@varlet/ui 3.18.1 → 3.19.0

package/es/radio/Radio.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 { useRadioGroup } from "./provide.mjs";
 const { name, n, classes } = createNamespace("radio");
-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, mergeProps as _mergeProps, 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, mergeProps as _mergeProps, createElementVNode as _createElementVNode } from "vue";
 const _hoisted_1 = ["aria-checked", "aria-disabled", "tabindex"];
 function __render__(_ctx, _cache) {
   const _component_var_icon = _resolveComponent("var-icon");
@@ -51,21 +72,35 @@ function __render__(_ctx, _cache) {
             style: _normalizeStyle({ color: _ctx.checked ? _ctx.checkedColor : _ctx.uncheckedColor })
           },
           [
-            _ctx.checked ? _renderSlot(_ctx.$slots, "checked-icon", { key: 0 }, () => [
-              _createVNode(_component_var_icon, {
+            _ctx.checked ? (_openBlock(), _createElementBlock(
+              "span",
+              {
+                key: 0,
                 class: _normalizeClass(_ctx.n("icon")),
-                "var-radio-cover": "",
-                name: "radio-marked",
-                size: _ctx.iconSize
-              }, null, 8, ["class", "size"])
-            ]) : _renderSlot(_ctx.$slots, "unchecked-icon", { key: 1 }, () => [
-              _createVNode(_component_var_icon, {
+                style: _normalizeStyle({ fontSize: _ctx.toSizeUnit(_ctx.iconSize) })
+              },
+              [
+                _renderSlot(_ctx.$slots, "checked-icon", {}, () => [
+                  _createVNode(_component_var_icon, { name: "radio-marked" })
+                ])
+              ],
+              6
+              /* CLASS, STYLE */
+            )) : (_openBlock(), _createElementBlock(
+              "span",
+              {
+                key: 1,
                 class: _normalizeClass(_ctx.n("icon")),
-                "var-radio-cover": "",
-                name: "radio-blank",
-                size: _ctx.iconSize
-              }, null, 8, ["class", "size"])
-            ]),
+                style: _normalizeStyle({ fontSize: _ctx.toSizeUnit(_ctx.iconSize) })
+              },
+              [
+                _renderSlot(_ctx.$slots, "unchecked-icon", {}, () => [
+                  _createVNode(_component_var_icon, { name: "radio-blank" })
+                ])
+              ],
+              6
+              /* CLASS, STYLE */
+            )),
             _createVNode(_component_var_hover_overlay, {
               hovering: !_ctx.disabled && !_ctx.formDisabled && _ctx.hovering,
               focusing: !_ctx.disabled && !_ctx.formDisabled && _ctx.isFocusing
@@ -190,14 +225,17 @@ const __sfc__ = defineComponent({
       });
     }
     function change(changedValue) {
-      const { checkedValue, onChange } = props2;
-      if (radioGroup && value.value === checkedValue) {
-        return;
-      }
-      value.value = changedValue;
-      call(onChange, value.value);
-      radioGroup == null ? void 0 : radioGroup.onToggle(checkedValue);
-      validateWithTrigger("onChange");
+      return __async(this, null, function* () {
+        const { checkedValue, onChange } = props2;
+        if (radioGroup && value.value === checkedValue) {
+          return;
+        }
+        value.value = changedValue;
+        radioGroup == null ? void 0 : radioGroup.onToggle(checkedValue);
+        yield nextTick();
+        call(onChange, changedValue);
+        validateWithTrigger("onChange");
+      });
     }
     function handleClick(e) {
       const { disabled, readonly, uncheckedValue, checkedValue, onClick } = props2;
@@ -249,6 +287,7 @@ const __sfc__ = defineComponent({
       classes,
       handleClick,
       handleTextClick,
+      toSizeUnit,
       toggle,
       reset,
       validate,

package/es/radio/radio.css

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

package/es/rail-navigation-item/RailNavigationItem.mjs

@@ -31,7 +31,7 @@ const defaultBadgeProps = {
   type: "primary",
   dot: true
 };
-import { renderSlot as _renderSlot, resolveComponent as _resolveComponent, normalizeClass as _normalizeClass, createVNode as _createVNode, mergeProps as _mergeProps, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, createElementBlock as _createElementBlock, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, normalizeStyle as _normalizeStyle, resolveDirective as _resolveDirective, withDirectives as _withDirectives } from "vue";
+import { renderSlot as _renderSlot, resolveComponent as _resolveComponent, createVNode as _createVNode, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, mergeProps as _mergeProps, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, createElementBlock as _createElementBlock, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, normalizeStyle as _normalizeStyle, resolveDirective as _resolveDirective, withDirectives as _withDirectives } from "vue";
 const _hoisted_1 = ["aria-disabled"];
 function __render__(_ctx, _cache) {
   const _component_var_icon = _resolveComponent("var-icon");
@@ -66,28 +66,42 @@ function __render__(_ctx, _cache) {
           "var-rail-navigation-item-cover": ""
         }), {
           default: _withCtx(() => [
+            _createElementVNode(
+              "span",
+              {
+                class: _normalizeClass(_ctx.n("icon"))
+              },
+              [
+                _renderSlot(_ctx.$slots, "icon", { active: _ctx.isActive }, () => [
+                  _createVNode(_component_var_icon, {
+                    name: _ctx.icon,
+                    namespace: _ctx.namespace
+                  }, null, 8, ["name", "namespace"])
+                ])
+              ],
+              2
+              /* CLASS */
+            )
+          ]),
+          _: 3
+          /* FORWARDED */
+        }, 16, ["class"])) : (_openBlock(), _createElementBlock(
+          "span",
+          {
+            key: 1,
+            class: _normalizeClass(_ctx.n("icon"))
+          },
+          [
             _renderSlot(_ctx.$slots, "icon", { active: _ctx.isActive }, () => [
               _createVNode(_component_var_icon, {
-                class: _normalizeClass(_ctx.n("icon")),
                 name: _ctx.icon,
-                namespace: _ctx.namespace,
-                "var-rail-navigation-item-cover": ""
-              }, null, 8, ["class", "name", "namespace"])
+                namespace: _ctx.namespace
+              }, null, 8, ["name", "namespace"])
             ])
-          ]),
-          _: 3
-          /* FORWARDED */
-        }, 16, ["class"])) : _renderSlot(_ctx.$slots, "icon", {
-          key: 1,
-          active: _ctx.isActive
-        }, () => [
-          _createVNode(_component_var_icon, {
-            class: _normalizeClass(_ctx.n("icon")),
-            name: _ctx.icon,
-            namespace: _ctx.namespace,
-            "var-rail-navigation-item-cover": ""
-          }, null, 8, ["class", "name", "namespace"])
-        ])
+          ],
+          2
+          /* CLASS */
+        ))
       ],
       2
       /* CLASS */

package/es/rail-navigation-item/railNavigationItem.css

@@ -1 +1 @@
-:root { --rail-navigation-item-height: 64px; --rail-navigation-item-padding: 6px 4px; --rail-navigation-item-indicator-width: 56px; --rail-navigation-item-indicator-height: 32px; --rail-navigation-item-indicator-hover-background: transparent; --rail-navigation-item-indicator-pressed-background: transparent; --rail-navigation-item-indicator-active-background: transparent; --rail-navigation-item-inactive-text-color: var(--color-on-surface-variant); --rail-navigation-item-active-text-color: var(--color-primary); --rail-navigation-item-disabled-opacity: var(--opacity-disabled); --rail-navigation-item-icon-size: 24px; --rail-navigation-item-label-font-size: var(--font-size-sm); --rail-navigation-item-label-line-height: 1.5;}.var-rail-navigation-item { width: 100%; min-height: var(--rail-navigation-item-height); padding: var(--rail-navigation-item-padding); position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; color: var(--rail-navigation-item-inactive-text-color); cursor: pointer; user-select: none; transition: color 250ms, opacity 250ms;}.var-rail-navigation-item__indicator { width: var(--rail-navigation-item-indicator-width); height: var(--rail-navigation-item-indicator-height); display: inline-flex; align-items: center; justify-content: center; position: relative;}.var-rail-navigation-item__indicator::before,.var-rail-navigation-item__indicator::after { content: ''; z-index: 0; height: var(--rail-navigation-item-indicator-height); position: absolute; left: 50%; top: 50%; border-radius: calc(var(--rail-navigation-item-indicator-height) / 2); transform: translate(-50%, -50%);}.var-rail-navigation-item__indicator::before { width: var(--rail-navigation-item-indicator-width); background-color: var(--rail-navigation-item-indicator-hover-background); opacity: 0; transition: opacity 150ms;}.var-rail-navigation-item__indicator::after { width: var(--rail-navigation-item-indicator-width); transform: translate(-50%, -50%) scaleX(0); transform-origin: center;}.var-rail-navigation-item__icon[var-rail-navigation-item-cover] { font-size: var(--rail-navigation-item-icon-size);}.var-rail-navigation-item__icon { z-index: 1; position: relative; line-height: 1; color: currentColor;}.var-rail-navigation-item__badge[var-rail-navigation-item-cover] { z-index: 1;}.var-rail-navigation-item__label { margin-top: 4px; max-width: 100%; display: inline-flex; align-items: center; justify-content: center; color: currentColor; font-size: var(--rail-navigation-item-label-font-size); line-height: var(--rail-navigation-item-label-line-height); text-align: center; white-space: normal; word-break: break-word;}.var-rail-navigation-item:hover .var-rail-navigation-item__indicator::before { opacity: 1;}.var-rail-navigation-item:active:not(.var-rail-navigation-item--ripple-enabled):not(.var-rail-navigation-item--disabled) .var-rail-navigation-item__indicator::before { background-color: var(--rail-navigation-item-indicator-pressed-background); opacity: 1;}.var-rail-navigation-item--active { color: var(--rail-navigation-item-active-text-color);}.var-rail-navigation-item--active .var-rail-navigation-item__indicator::after { background-color: var(--rail-navigation-item-indicator-active-background); transform: translate(-50%, -50%) scaleX(1); transition: transform var(--rail-navigation-item-transition-duration-override, 250ms), background-color var(--rail-navigation-item-transition-duration-override, 250ms);}.var-rail-navigation-item--active:hover .var-rail-navigation-item__indicator::before { opacity: 0;}.var-rail-navigation-item--disabled { cursor: not-allowed; opacity: var(--rail-navigation-item-disabled-opacity);}.var-rail-navigation-item--disabled:hover .var-rail-navigation-item__indicator::before { opacity: 0;}.var-rail-navigation-item--disabled * { pointer-events: none;}.var-rail-navigation-item--icon-only { min-height: var(--rail-navigation-item-indicator-height);}
+:root { --rail-navigation-item-height: 64px; --rail-navigation-item-padding: 6px 4px; --rail-navigation-item-indicator-width: 56px; --rail-navigation-item-indicator-height: 32px; --rail-navigation-item-indicator-hover-background: transparent; --rail-navigation-item-indicator-pressed-background: transparent; --rail-navigation-item-indicator-active-background: transparent; --rail-navigation-item-inactive-text-color: var(--color-on-surface-variant); --rail-navigation-item-active-text-color: var(--color-primary); --rail-navigation-item-disabled-opacity: var(--opacity-disabled); --rail-navigation-item-icon-size: 24px; --rail-navigation-item-label-font-size: var(--font-size-sm); --rail-navigation-item-label-line-height: 1.5;}.var-rail-navigation-item { width: 100%; min-height: var(--rail-navigation-item-height); padding: var(--rail-navigation-item-padding); position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; color: var(--rail-navigation-item-inactive-text-color); cursor: pointer; user-select: none; transition: color 250ms, opacity 250ms;}.var-rail-navigation-item__indicator { width: var(--rail-navigation-item-indicator-width); height: var(--rail-navigation-item-indicator-height); display: inline-flex; align-items: center; justify-content: center; position: relative;}.var-rail-navigation-item__indicator::before,.var-rail-navigation-item__indicator::after { content: ''; z-index: 0; height: var(--rail-navigation-item-indicator-height); position: absolute; left: 50%; top: 50%; border-radius: calc(var(--rail-navigation-item-indicator-height) / 2); transform: translate(-50%, -50%);}.var-rail-navigation-item__indicator::before { width: var(--rail-navigation-item-indicator-width); background-color: var(--rail-navigation-item-indicator-hover-background); opacity: 0; transition: opacity 150ms;}.var-rail-navigation-item__indicator::after { width: var(--rail-navigation-item-indicator-width); transform: translate(-50%, -50%) scaleX(0); transform-origin: center;}.var-rail-navigation-item__icon { display: inline-flex; align-items: center; justify-content: center; width: 1em; height: 1em; font-size: var(--rail-navigation-item-icon-size); line-height: 1; z-index: 1; position: relative; color: currentColor;}.var-rail-navigation-item__icon .var-icon { font-size: inherit;}.var-rail-navigation-item__badge[var-rail-navigation-item-cover] { z-index: 1;}.var-rail-navigation-item__label { margin-top: 4px; max-width: 100%; display: inline-flex; align-items: center; justify-content: center; color: currentColor; font-size: var(--rail-navigation-item-label-font-size); line-height: var(--rail-navigation-item-label-line-height); text-align: center; white-space: normal; word-break: break-word;}.var-rail-navigation-item:hover .var-rail-navigation-item__indicator::before { opacity: 1;}.var-rail-navigation-item:active:not(.var-rail-navigation-item--ripple-enabled):not(.var-rail-navigation-item--disabled) .var-rail-navigation-item__indicator::before { background-color: var(--rail-navigation-item-indicator-pressed-background); opacity: 1;}.var-rail-navigation-item--active { color: var(--rail-navigation-item-active-text-color);}.var-rail-navigation-item--active .var-rail-navigation-item__indicator::after { background-color: var(--rail-navigation-item-indicator-active-background); transform: translate(-50%, -50%) scaleX(1); transition: transform var(--rail-navigation-item-transition-duration-override, 250ms), background-color var(--rail-navigation-item-transition-duration-override, 250ms);}.var-rail-navigation-item--active:hover .var-rail-navigation-item__indicator::before { opacity: 0;}.var-rail-navigation-item--disabled { cursor: not-allowed; opacity: var(--rail-navigation-item-disabled-opacity);}.var-rail-navigation-item--disabled:hover .var-rail-navigation-item__indicator::before { opacity: 0;}.var-rail-navigation-item--disabled * { pointer-events: none;}.var-rail-navigation-item--icon-only { min-height: var(--rail-navigation-item-indicator-height);}

package/es/rate/Rate.mjs

@@ -10,7 +10,7 @@ import { createNamespace, useValidation } from "../utils/components.mjs";
 import { toSizeUnit } from "../utils/elements.mjs";
 import { props } from "./props.mjs";
 const { name, n } = createNamespace("rate");
-import { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, resolveComponent as _resolveComponent, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createVNode as _createVNode, resolveDirective as _resolveDirective, withDirectives as _withDirectives, createElementVNode as _createElementVNode } from "vue";
+import { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, renderSlot as _renderSlot, resolveComponent as _resolveComponent, createVNode as _createVNode, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, resolveDirective as _resolveDirective, withDirectives as _withDirectives } from "vue";
 const _hoisted_1 = ["onClick"];
 function __render__(_ctx, _cache) {
   const _component_var_icon = _resolveComponent("var-icon");
@@ -40,14 +40,24 @@ function __render__(_ctx, _cache) {
                 class: _normalizeClass(_ctx.getClass(value)),
                 onClick: ($event) => _ctx.handleClick(value, $event)
               }, [
-                _createVNode(_component_var_icon, {
-                  class: _normalizeClass(_ctx.n("content-icon")),
-                  "var-rate-cover": "",
-                  transition: 0,
-                  namespace: _ctx.getCurrentState(value).namespace,
-                  name: _ctx.getCurrentState(value).name,
-                  style: _normalizeStyle({ fontSize: _ctx.toSizeUnit(_ctx.size) })
-                }, null, 8, ["class", "namespace", "name", "style"]),
+                _createElementVNode(
+                  "span",
+                  {
+                    class: _normalizeClass(_ctx.n("content-icon")),
+                    style: _normalizeStyle({ fontSize: _ctx.toSizeUnit(_ctx.size) })
+                  },
+                  [
+                    _renderSlot(_ctx.$slots, _ctx.getCurrentState(value).slot, {}, () => [
+                      _createVNode(_component_var_icon, {
+                        transition: 0,
+                        namespace: _ctx.getCurrentState(value).namespace,
+                        name: _ctx.getCurrentState(value).name
+                      }, null, 8, ["namespace", "name"])
+                    ])
+                  ],
+                  6
+                  /* CLASS, STYLE */
+                ),
                 _createVNode(_component_var_hover_overlay, {
                   hovering: _ctx.hovering && value === _ctx.currentHoveringValue && !_ctx.disabled && !_ctx.formDisabled
                 }, null, 8, ["hovering"])
@@ -126,15 +136,16 @@ const __sfc__ = defineComponent({
         iconColor = disabledColor;
       }
       if (index <= modelValue) {
-        return { color: iconColor, name: icon, namespace };
+        return { color: iconColor, name: icon, namespace, slot: "icon" };
       }
       if (half && index <= modelValue + 0.5) {
-        return { color: iconColor, name: halfIcon, namespace: halfIconNamespace };
+        return { color: iconColor, name: halfIcon, namespace: halfIconNamespace, slot: "half-icon" };
       }
       return {
         color: disabled || (form == null ? void 0 : form.disabled.value) ? disabledColor : emptyColor,
         name: emptyIcon,
-        namespace: emptyIconNamespace
+        namespace: emptyIconNamespace,
+        slot: "empty-icon"
       };
     }
     function changeValue(score, event) {

package/es/rate/rate.css

@@ -1 +1 @@
-:root { --rate-color: var(--color-text); --rate-size: 24px; --rate-disabled-color: var(--color-text-disabled); --rate-error-color: var(--color-danger); --rate-action-padding: 4px; --rate-primary-color: var(--color-primary);}.var-rate { display: flex; transform: translateX(calc(-1 * var(--rate-action-padding)));}.var-rate__wrap { width: 100%;}.var-rate__content { position: relative; display: flex; padding: var(--rate-action-padding); cursor: pointer; border-radius: 50%; color: var(--rate-color); transition: color 0.25s; -webkit-tap-highlight-color: transparent;}.var-rate__content-icon[var-rate-cover] { font-size: var(--rate-size);}.var-rate--primary { color: var(--rate-primary-color);}.var-rate--disabled { color: var(--rate-disabled-color); cursor: not-allowed;}.var-rate--error { color: var(--rate-error-color);}
+:root { --rate-color: var(--color-text); --rate-size: 24px; --rate-disabled-color: var(--color-text-disabled); --rate-error-color: var(--color-danger); --rate-action-padding: 4px; --rate-primary-color: var(--color-primary);}.var-rate { display: flex; transform: translateX(calc(-1 * var(--rate-action-padding)));}.var-rate__wrap { width: 100%;}.var-rate__content { position: relative; display: flex; padding: var(--rate-action-padding); cursor: pointer; border-radius: 50%; color: var(--rate-color); transition: color 0.25s; -webkit-tap-highlight-color: transparent;}.var-rate__content-icon { display: inline-flex; align-items: center; justify-content: center; width: 1em; height: 1em; font-size: var(--rate-size); line-height: 1;}.var-rate__content-icon .var-icon { font-size: inherit;}.var-rate--primary { color: var(--rate-primary-color);}.var-rate--disabled { color: var(--rate-disabled-color); cursor: not-allowed;}.var-rate--error { color: var(--rate-error-color);}

package/es/select/Select.mjs

@@ -50,7 +50,7 @@ import { injectLocaleProvider } from "../locale-provider/provide.mjs";
 import VarMenu from "../menu/index.mjs";
 import VarOption from "../option/index.mjs";
 import { createNamespace, MaybeVNode, useValidation } from "../utils/components.mjs";
-import { focusChildElementByKey, toPxNum } from "../utils/elements.mjs";
+import { focusChildElementByKey, scrollSelectedIntoView, toPxNum } from "../utils/elements.mjs";
 import { props } from "./props.mjs";
 import { useOptions } from "./provide.mjs";
 import VarSelectFilter from "./SelectFilter.mjs";
@@ -483,6 +483,11 @@ const __sfc__ = defineComponent({
         );
       }
     );
+    watch(showMenu, (value) => {
+      if (value) {
+        nextTick(scrollSelectedOptionIntoView);
+      }
+    });
     bindOptions(selectProvider);
     useEventListener(() => window, "keydown", handleKeydown);
     useEventListener(() => window, "keyup", handleKeyup);
@@ -502,6 +507,10 @@ const __sfc__ = defineComponent({
       }
       return true;
     }
+    function scrollSelectedOptionIntoView() {
+      var _a2;
+      scrollSelectedIntoView(menuEl.value, (_a2 = menuEl.value) == null ? void 0 : _a2.querySelector(".var-option--selected-color"));
+    }
     function handleKeydown(event) {
       var _a2;
       if (disabled.value || readonly.value || !isFocusing.value) {

package/es/select/select.css

@@ -1 +1 @@
-:root { --select-scroller-background: var(--color-surface-container-high); --select-scroller-padding: 6px 0; --select-scroller-max-height: 278px; --select-scroller-border-radius: 2px; --select-chips-margin: -5px 0 0 0; --select-chips-padding: 2px 0; --select-chip-margin: 5px 5px 0 0; --select-chip-background-color: #e0e0e0; --select-arrow-size: 20px; --select-standard-menu-margin: calc(var(--field-decorator-placeholder-size) * 0.75 + 12px) 0 0 0; --select-label-font-size: 16px; --select-empty-text-color: rgba(0, 0, 0, 0.6); --select-empty-height: 38px; --select-empty-font-size: 14px;}.var-select { text-align: left; outline: none;}.var-select__menu[var-select-cover] { width: 100%; background: transparent; display: block;}.var-select__chip[var-select-cover] { margin: var(--select-chip-margin); background-color: var(--select-chip-background-color);}.var-select__chips { padding: var(--select-chips-padding); margin: var(--select-chips-margin);}.var-select__scroller { --scrollbar-track-background: var(--select-scroller-background); max-height: var(--select-scroller-max-height); background: var(--select-scroller-background); padding: var(--select-scroller-padding); overflow-y: auto; transition: background-color 0.25s; border-radius: var(--select-scroller-border-radius);}.var-select__select { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 24px; outline: none; border: none; font-size: inherit; color: var(--field-decorator-text-color); word-break: break-all; overflow: hidden; transition: color 0.25s;}.var-select__values { display: flex; flex-wrap: wrap; align-items: center;}.var-select__chips { display: flex; flex-wrap: wrap; align-items: center;}.var-select__filter { flex: 1; position: absolute; left: 0; top: 0; height: 100%; border: none; outline: none; padding: 0; background-color: transparent; font-size: var(--field-decorator-placeholder-size); line-height: inherit; color: var(--field-decorator-text-color);}.var-select__filter--multiple { position: unset;}.var-select__chips .var-select__filter { padding-left: 0; margin-top: 4px;}.var-select__filter-calculator { position: absolute; left: 0; top: 0; max-width: 100%; visibility: hidden; white-space: pre; overflow: hidden; pointer-events: none;}.var-select__label { display: flex; align-items: center; font-size: var(--select-label-font-size);}.var-select__placeholder { max-width: 100%; position: absolute; top: 50%; left: 0; transform: translateY(-50%); font-size: var(--field-decorator-placeholder-size); line-height: 1.5em; color: var(--field-decorator-blur-color); pointer-events: none; cursor: inherit;}.var-select__empty { color: var(--select-empty-text-color); text-align: center; height: var(--select-empty-height); font-size: var(--select-empty-font-size); display: flex; align-items: center; justify-content: center;}.var-select__arrow[var-select-cover] { flex-shrink: 0; font-size: var(--select-arrow-size); margin-left: 6px;}.var-select--standard-menu-margin { margin: var(--select-standard-menu-margin) !important;}.var-select--disabled { color: var(--field-decorator-disabled-color); cursor: not-allowed;}.var-select--error { color: var(--field-decorator-error-color);}.var-select--arrow-rotate { transform: rotate(180deg);}.var-select--label-focusing { color: var(--field-decorator-blur-color);}
+:root { --select-scroller-background: var(--color-surface-container-high); --select-scroller-padding: 6px 0; --select-scroller-max-height: 278px; --select-scroller-border-radius: 2px; --select-chips-margin: -5px 0 0 0; --select-chips-padding: 2px 0; --select-chip-margin: 5px 5px 0 0; --select-chip-background-color: #e0e0e0; --select-arrow-size: 20px; --select-standard-menu-margin: calc(var(--field-decorator-placeholder-size) * 0.75 + 12px) 0 0 0; --select-label-font-size: 16px; --select-empty-text-color: rgba(0, 0, 0, 0.6); --select-empty-height: 38px; --select-empty-font-size: 14px;}.var-select { text-align: left; outline: none;}.var-select__menu[var-select-cover] { width: 100%; background: transparent; display: block;}.var-select__chip[var-select-cover] { margin: var(--select-chip-margin); background-color: var(--select-chip-background-color);}.var-select__chips { padding: var(--select-chips-padding); margin: var(--select-chips-margin);}.var-select__scroller { --scrollbar-track-background: var(--select-scroller-background); position: relative; max-height: var(--select-scroller-max-height); background: var(--select-scroller-background); padding: var(--select-scroller-padding); overflow-y: auto; transition: background-color 0.25s; border-radius: var(--select-scroller-border-radius);}.var-select__select { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 24px; outline: none; border: none; font-size: inherit; color: var(--field-decorator-text-color); word-break: break-all; overflow: hidden; transition: color 0.25s;}.var-select__values { display: flex; flex-wrap: wrap; align-items: center;}.var-select__chips { display: flex; flex-wrap: wrap; align-items: center;}.var-select__filter { flex: 1; position: absolute; left: 0; top: 0; height: 100%; border: none; outline: none; padding: 0; background-color: transparent; font-size: var(--field-decorator-placeholder-size); line-height: inherit; color: var(--field-decorator-text-color);}.var-select__filter--multiple { position: unset;}.var-select__chips .var-select__filter { padding-left: 0; margin-top: 4px;}.var-select__filter-calculator { position: absolute; left: 0; top: 0; max-width: 100%; visibility: hidden; white-space: pre; overflow: hidden; pointer-events: none;}.var-select__label { display: flex; align-items: center; font-size: var(--select-label-font-size);}.var-select__placeholder { max-width: 100%; position: absolute; top: 50%; left: 0; transform: translateY(-50%); font-size: var(--field-decorator-placeholder-size); line-height: 1.5em; color: var(--field-decorator-blur-color); pointer-events: none; cursor: inherit;}.var-select__empty { color: var(--select-empty-text-color); text-align: center; height: var(--select-empty-height); font-size: var(--select-empty-font-size); display: flex; align-items: center; justify-content: center;}.var-select__arrow[var-select-cover] { flex-shrink: 0; font-size: var(--select-arrow-size); margin-left: 6px;}.var-select--standard-menu-margin { margin: var(--select-standard-menu-margin) !important;}.var-select--disabled { color: var(--field-decorator-disabled-color); cursor: not-allowed;}.var-select--error { color: var(--field-decorator-error-color);}.var-select--arrow-rotate { transform: rotate(180deg);}.var-select--label-focusing { color: var(--field-decorator-blur-color);}

package/es/slider/Slider.mjs

@@ -346,8 +346,8 @@ const __sfc__ = defineComponent({
       item.handleHovering(value);
     }
     function emitChange(value) {
-      call(props2.onChange, value);
       call(props2["onUpdate:modelValue"], value);
+      call(props2.onChange, value);
       validateWithTrigger();
     }
     function setPercent(moveDistance, type) {

package/es/step/Step.mjs

@@ -5,7 +5,7 @@ import { createNamespace } from "../utils/components.mjs";
 import { props } from "./props.mjs";
 import { useSteps } from "./provide.mjs";
 const { name, n, classes } = createNamespace("step");
-import { resolveComponent as _resolveComponent, normalizeClass as _normalizeClass, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, createElementBlock as _createElementBlock, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, renderSlot as _renderSlot } 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, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode } from "vue";
 const _hoisted_1 = { key: 3 };
 function __render__(_ctx, _cache) {
   const _component_var_icon = _resolveComponent("var-icon");
@@ -29,25 +29,55 @@ function __render__(_ctx, _cache) {
               onClick: _cache[0] || (_cache[0] = (...args) => _ctx.click && _ctx.click(...args))
             },
             [
-              _ctx.isActive ? (_openBlock(), _createBlock(_component_var_icon, {
-                key: 0,
-                class: _normalizeClass(_ctx.n("icon")),
-                "var-step-cover": "",
-                name: _ctx.activeIcon,
-                namespace: _ctx.activeIconNamespace
-              }, null, 8, ["class", "name", "namespace"])) : _ctx.isCurrent && _ctx.currentIcon ? (_openBlock(), _createBlock(_component_var_icon, {
-                key: 1,
-                class: _normalizeClass(_ctx.n("icon")),
-                "var-step-cover": "",
-                name: _ctx.currentIcon,
-                namespace: _ctx.currentIconNamespace
-              }, null, 8, ["class", "name", "namespace"])) : _ctx.inactiveIcon ? (_openBlock(), _createBlock(_component_var_icon, {
-                key: 2,
-                class: _normalizeClass(_ctx.n("icon")),
-                "var-step-cover": "",
-                name: _ctx.inactiveIcon,
-                namespace: _ctx.inactiveIconNamespace
-              }, null, 8, ["class", "name", "namespace"])) : (_openBlock(), _createElementBlock(
+              _ctx.isActive ? (_openBlock(), _createElementBlock(
+                "span",
+                {
+                  key: 0,
+                  class: _normalizeClass(_ctx.n("icon"))
+                },
+                [
+                  _renderSlot(_ctx.$slots, "active-icon", {}, () => [
+                    _createVNode(_component_var_icon, {
+                      name: _ctx.activeIcon,
+                      namespace: _ctx.activeIconNamespace
+                    }, null, 8, ["name", "namespace"])
+                  ])
+                ],
+                2
+                /* CLASS */
+              )) : _ctx.isCurrent && (_ctx.$slots["current-icon"] || _ctx.currentIcon) ? (_openBlock(), _createElementBlock(
+                "span",
+                {
+                  key: 1,
+                  class: _normalizeClass(_ctx.n("icon"))
+                },
+                [
+                  _renderSlot(_ctx.$slots, "current-icon", {}, () => [
+                    _createVNode(_component_var_icon, {
+                      name: _ctx.currentIcon,
+                      namespace: _ctx.currentIconNamespace
+                    }, null, 8, ["name", "namespace"])
+                  ])
+                ],
+                2
+                /* CLASS */
+              )) : _ctx.$slots["inactive-icon"] || _ctx.inactiveIcon ? (_openBlock(), _createElementBlock(
+                "span",
+                {
+                  key: 2,
+                  class: _normalizeClass(_ctx.n("icon"))
+                },
+                [
+                  _renderSlot(_ctx.$slots, "inactive-icon", {}, () => [
+                    _createVNode(_component_var_icon, {
+                      name: _ctx.inactiveIcon,
+                      namespace: _ctx.inactiveIconNamespace
+                    }, null, 8, ["name", "namespace"])
+                  ])
+                ],
+                2
+                /* CLASS */
+              )) : (_openBlock(), _createElementBlock(
                 "span",
                 _hoisted_1,
                 _toDisplayString(_ctx.index + 1),

package/es/step/step.css

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

package/es/style.mjs

@@ -27,6 +27,7 @@ import './count-to/style/index.mjs'
 import './countdown/style/index.mjs'
 import './counter/style/index.mjs'
 import './data-table/style/index.mjs'
+import './date-input/style/index.mjs'
 import './date-picker/style/index.mjs'
 import './dialog/style/index.mjs'
 import './divider/style/index.mjs'

package/es/switch/Switch.mjs

@@ -222,8 +222,8 @@ const __sfc__ = defineComponent({
           validateWithTrigger("onLazyChange");
         });
       } else {
-        call(onChange, newValue);
         call(updateModelValue, newValue);
+        call(onChange, newValue);
         validateWithTrigger("onChange");
       }
     }

package/es/themes/dark/alert.mjs

@@ -2,9 +2,9 @@ var stdin_default = {
   "--alert-padding": "16px",
   "--alert-border-radius": "4px",
   "--alert-icon-size": "22px",
-  "--alert-icon-margin": "0 12px 0 0",
+  "--alert-icon-margin": "1px 12px 0 0",
   "--alert-close-icon-size": "22px",
-  "--alert-close-icon-margin": "2px 0 0 12px",
+  "--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)",

package/es/themes/dark/dateInput.mjs

@@ -0,0 +1,9 @@
+var stdin_default = {
+  "--date-input-picker-width": "320px",
+  "--date-input-time-select-separator-color": "var(--color-on-surface-variant)",
+  "--date-input-time-select-border-color": "var(--color-outline)",
+  "--date-input-time-select-active-color": "var(--color-primary)"
+};
+export {
+  stdin_default as default
+};

package/es/themes/dark/datePicker.mjs

@@ -2,46 +2,50 @@ var stdin_default = {
   "--date-picker-main-color": "#fff",
   "--date-picker-body-background-color": "#303030",
   "--day-picker-head-item-color": "#aaaaaa",
-  "--year-picker-item-color": "#fff",
+  "--day-picker-adjacent-item-color": "rgba(255, 255, 255, 0.56)",
+  "--day-picker-disabled-item-color": "var(--color-text-disabled)",
   "--date-picker-header-color": "#fff",
   "--date-picker-border-radius": "4px",
   "--date-picker-font-size": "var(--font-size-md)",
   "--date-picker-min-width": "290px",
-  "--date-picker-title-hint-color": "#fff",
+  "--date-picker-title-hint-color": "#aaaaaa",
   "--date-picker-title-hint-font-size": "var(--font-size-md)",
   "--date-picker-title-height": "105px",
-  "--date-picker-title-padding": "16px",
-  "--date-picker-title-background": "var(--color-primary)",
+  "--date-picker-title-padding": "20px 20px 16px",
+  "--date-picker-title-background": "#303030",
   "--date-picker-title-color": "#fff",
-  "--date-picker-title-year-font-size": "var(--font-size-md)",
-  "--date-picker-title-year-font-weight": "500",
-  "--date-picker-title-year-margin-bottom": "8px",
   "--date-picker-title-date-height": "48px",
   "--date-picker-title-date-font-size": "34px",
   "--date-picker-title-date-font-weight": "500",
   "--date-picker-title-date-range-font-size": "20px",
   "--date-picker-title-date-justify-content": "normal",
-  "--date-picker-body-height": "280px",
-  "--date-picker-body-padding": "0",
-  "--date-picker-header-padding": "4px 16px",
-  "--date-picker-actions-padding": "0 8px 12px 8px",
-  "--date-picker-header-arrow-filter": "opacity(0.54)",
+  "--date-picker-body-height": "304px",
+  "--date-picker-body-padding-horizontal": "12px",
+  "--date-picker-body-padding": "0 var(--date-picker-body-padding-horizontal) 16px",
+  "--date-picker-header-padding": "0 0 16px",
+  "--date-picker-header-padding-top-no-title": "20px",
+  "--date-picker-actions-padding": "10px 20px 20px",
+  "--date-picker-header-arrow-filter": "opacity(1)",
   "--month-picker-padding": "0 12px",
-  "--month-picker-item-width": "33%",
-  "--month-picker-item-height": "56px",
+  "--month-picker-item-width": "32%",
+  "--month-picker-item-height": "46px",
   "--month-picker-item-button-max-width": "140px",
+  "--month-picker-item-button-font-weight": "normal",
   "--year-picker-padding": "0 12px",
-  "--year-picker-item-width": "33%",
-  "--year-picker-item-height": "56px",
+  "--year-picker-item-width": "32%",
+  "--year-picker-item-height": "46px",
   "--year-picker-item-button-max-width": "140px",
+  "--year-picker-item-button-font-weight": "normal",
   "--day-picker-content-item-width": "14.28%",
-  "--day-picker-content-item-font-size": "var(--font-size-sm)",
+  "--day-picker-content-item-min-height": "21px",
+  "--day-picker-content-item-font-size": "var(--font-size-md)",
   "--day-picker-content-item-padding": "2px 0",
   "--day-picker-content-item-button-width": "32px",
   "--day-picker-content-item-button-height": "32px",
-  "--day-picker-content-item-button-font-size": "var(--font-size-sm)",
+  "--day-picker-content-item-button-font-size": "var(--font-size-md)",
+  "--day-picker-head-item-font-size": "var(--font-size-md)",
   "--day-picker-head-item-padding": "8px 0",
-  "--day-picker-head-item-font-weight": "600"
+  "--day-picker-head-item-font-weight": "normal"
 };
 export {
   stdin_default as default

package/es/themes/dark/index.mjs

@@ -34,6 +34,7 @@ import collapse from "./collapse.mjs";
 import countdown from "./countdown.mjs";
 import counter from "./counter.mjs";
 import dataTable from "./dataTable.mjs";
+import dateInput from "./dateInput.mjs";
 import datePicker from "./datePicker.mjs";
 import dialog from "./dialog.mjs";
 import divider from "./divider.mjs";
@@ -87,7 +88,7 @@ import tooltip from "./tooltip.mjs";
 import treeMenu from "./treeMenu.mjs";
 import uploader from "./uploader.mjs";
 import watermark from "./watermark.mjs";
-var stdin_default = __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({
+var stdin_default = __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({
   "--color-scheme": "dark",
   "--font-size-xs": "10px",
   "--font-size-sm": "12px",
@@ -166,7 +167,7 @@ var stdin_default = __spreadValues(__spreadValues(__spreadValues(__spreadValues(
   "--shadow-key-umbra-opacity": "rgba(0, 0, 0, 0.2)",
   "--shadow-key-penumbra-opacity": "rgba(0, 0, 0, 0.14)",
   "--shadow-key-ambient-opacity": "rgba(0, 0, 0, 0.12)"
-}, button), alert), cell), card), timePicker), datePicker), skeleton), tabs), tab), popup), dialog), actionSheet), chip), badge), uploader), collapse), pullRefresh), switchThemes), step), pagination), table), fieldDecorator), radio), checkbox), segmentedButton), segmentedButtons), divider), picker), appBar), bottomNavigationItem), menu), result), breadcrumb), avatar), link), progress), option), watermark), menuSelect), menuOption), avatarGroup), backTop), bottomNavigation), countdown), counter), dataTable), railNavigation), railNavigationItem), fab), floatingPanel), formDetails), hoverOverlay), icon), imagePreview), indexBar), input), otpInput), list), loading), loadingBar), overlay), paper), rate), ripple), slider), snackbar), space), swipe), tooltip), treeMenu), select), code), signature);
+}, button), alert), cell), card), timePicker), dateInput), datePicker), skeleton), tabs), tab), popup), dialog), actionSheet), chip), badge), uploader), collapse), pullRefresh), switchThemes), step), pagination), table), fieldDecorator), radio), checkbox), segmentedButton), segmentedButtons), divider), picker), appBar), bottomNavigationItem), menu), result), breadcrumb), avatar), link), progress), option), watermark), menuSelect), menuOption), avatarGroup), backTop), bottomNavigation), countdown), counter), dataTable), railNavigation), railNavigationItem), fab), floatingPanel), formDetails), hoverOverlay), icon), imagePreview), indexBar), input), otpInput), list), loading), loadingBar), overlay), paper), rate), ripple), slider), snackbar), space), swipe), tooltip), treeMenu), select), code), signature);
 export {
   stdin_default as default
 };

package/es/themes/md3-dark/alert.mjs

@@ -2,9 +2,9 @@ var stdin_default = {
   "--alert-padding": "16px",
   "--alert-border-radius": "4px",
   "--alert-icon-size": "22px",
-  "--alert-icon-margin": "0 12px 0 0",
+  "--alert-icon-margin": "1px 12px 0 0",
   "--alert-close-icon-size": "22px",
-  "--alert-close-icon-margin": "2px 0 0 12px",
+  "--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)",