@maple-design/ui-vue 1.1.0 → 1.1.1

package/es/card/Card.vue.mjs

@@ -1,7 +1,7 @@
 import { defineComponent, computed, ref, shallowRef, watch, nextTick, onBeforeUnmount, onDeactivated, onActivated, withDirectives, openBlock, createElementBlock, normalizeStyle, unref, normalizeClass, createElementVNode, renderSlot, createCommentVNode, toDisplayString, createBlock, createVNode, withModifiers, withCtx } from "vue";
 import { IconClose } from "@maple-design/icons-vue";
 import { getRect, doubleRaf } from "@maple-design/shared-vue";
-import { Button } from "../button/index.mjs";
+import MpButton from "../button/base.mjs";
 import { useLock } from "../context/lock.mjs";
 import { useZIndex } from "../context/zIndex.mjs";
 import "../divider/index.mjs";
@@ -64,29 +64,29 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     let stopInactiveFocusTracking;
     function trackInactiveFocus() {
       stopInactiveFocusTracking?.();
-      const document = card.value?.ownerDocument;
-      if (!document) {
+      const document2 = card.value?.ownerDocument;
+      if (!document2) {
         return;
       }
       const remember = (target) => {
         const element = target;
-        if (element && typeof element.focus === "function" && !card.value?.contains(element) && element !== document.body && element !== document.documentElement) {
+        if (element && typeof element.focus === "function" && !card.value?.contains(element) && element !== document2.body && element !== document2.documentElement) {
           returnFocus = element;
         }
       };
-      remember(document.activeElement);
+      remember(document2.activeElement);
       const onFocus = (event) => remember(event.target);
-      document.addEventListener("focusin", onFocus, true);
-      stopInactiveFocusTracking = () => document.removeEventListener("focusin", onFocus, true);
+      document2.addEventListener("focusin", onFocus, true);
+      stopInactiveFocusTracking = () => document2.removeEventListener("focusin", onFocus, true);
     }
     function updateReturnFocus(open) {
-      const document = card.value?.ownerDocument;
-      if (!document) {
+      const document2 = card.value?.ownerDocument;
+      if (!document2) {
         return;
       }
-      const focused = document.activeElement;
+      const focused = document2.activeElement;
       if (open) {
-        returnFocus = focused && focused !== document.body && focused !== document.documentElement ? focused : null;
+        returnFocus = focused && focused !== document2.body && focused !== document2.documentElement ? focused : null;
         return;
       }
       const target = returnFocus;
@@ -100,6 +100,37 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const { onStackTop } = usePopupLayer(wantsFloating, zIndex, () => card.value?.ownerDocument, true);
     const available = () => active && !disposed;
     let openingWaiting = false;
+    let cancelOpeningFrames;
+    function waitForOwnerFrames(view) {
+      cancelOpeningFrames?.();
+      return new Promise((resolve) => {
+        let handle;
+        let settled = false;
+        const finish = (completed) => {
+          if (settled) {
+            return;
+          }
+          settled = true;
+          if (cancelOpeningFrames === cancel) {
+            cancelOpeningFrames = void 0;
+          }
+          resolve(completed);
+        };
+        const cancel = () => {
+          if (handle !== void 0) {
+            view.cancelAnimationFrame?.(handle);
+          }
+          finish(false);
+        };
+        cancelOpeningFrames = cancel;
+        handle = view.requestAnimationFrame(() => {
+          if (settled) {
+            return;
+          }
+          handle = view.requestAnimationFrame(() => finish(true));
+        });
+      });
+    }
     let reducedMotion = false;
     let stopMotionTracking;
     function trackMotion(element) {
@@ -150,6 +181,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       wantsFloating,
       (value) => {
         const token = ++generation;
+        cancelOpeningFrames?.();
         if (!active) {
           if (!disposed && value) {
             trackInactiveFocus();
@@ -181,6 +213,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         return;
       }
       const token = ++generation;
+      cancelOpeningFrames?.();
       const element = card.value;
       let consumed = false;
       clearTimeout(floater.value ?? void 0);
@@ -208,7 +241,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           dropdownFloaterLeft = floaterLeft.value;
           showFloatingButtons.value = true;
           if (!reducedMotion) {
-            await doubleRaf();
+            const view = element.ownerDocument.defaultView;
+            if (view && typeof document !== "undefined" && element.ownerDocument !== document && typeof view.requestAnimationFrame === "function") {
+              if (!await waitForOwnerFrames(view)) {
+                return;
+              }
+            } else {
+              await doubleRaf();
+            }
           }
           if (!current(token, element) || !wantsFloating()) {
             return;
@@ -231,6 +271,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         return;
       }
       const token = ++generation;
+      cancelOpeningFrames?.();
       const element = card.value;
       let consumed = false;
       clearTimeout(dropper);
@@ -328,6 +369,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     });
     function cleanup() {
+      cancelOpeningFrames?.();
       openingWaiting = false;
       active = false;
       generation++;
@@ -473,7 +515,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             })
           }, [
             renderSlot(_ctx.$slots, "close-button", {}, () => [
-              createVNode(unref(Button), {
+              createVNode(unref(MpButton), {
                 "data-card-cover": "",
                 class: normalizeClass(unref(classes)(unref(n)("close-button"), unref(n)("$-elevation--6"))),
                 "aria-label": props.closeButtonAriaLabel ?? unref(closeLabel),

package/es/carousel/style/index.css

@@ -28,7 +28,7 @@
   --mp-carousel-card-opacity: 0.6;
   --mp-carousel-focus-width: 2px;
   --mp-carousel-focus-offset: 2px;
-  --mp-carousel-focus-color: var(--mp-sys-color-content-brand);
+  --mp-carousel-focus-color: var(--mp-sys-color-action-primary);
 }
 .mp-carousel {
   position: relative;

package/es/carousel/use-carousel-locale.mjs

@@ -1,10 +1,17 @@
 import { computed } from "vue";
-import "../locale/index.mjs";
 import { injectLocaleProvider } from "../locale-provider/provide.mjs";
-import { t } from "../locale/state.mjs";
+import { t, defaultLocaleReady } from "../locale/state.mjs";
+import { defaultCarouselGoto, defaultCarouselSlide, defaultCarouselNext, defaultCarouselPrevious, defaultCarouselLabel } from "../locale/zh-CN.mjs";
 function useCarouselLocale() {
   const { t: translate } = injectLocaleProvider();
-  const message = (key) => String((translate || t)(key));
+  const defaults = {
+    "carousel.label": defaultCarouselLabel,
+    "carousel.previous": defaultCarouselPrevious,
+    "carousel.next": defaultCarouselNext,
+    "carousel.slide": defaultCarouselSlide,
+    "carousel.goto": defaultCarouselGoto
+  };
+  const message = (key) => String(translate ? translate(key) : t(key) ?? (!defaultLocaleReady.value ? defaults[key] : void 0));
   return computed(() => ({
     label: message("carousel.label"),
     previous: message("carousel.previous"),

package/es/cascader/CascaderMenu.vue.mjs

@@ -4,7 +4,7 @@ import { useFieldTexts } from "../_components/field-presentation/texts.mjs";
 import { selectionEditorSurface } from "../_components/selected-options/context.mjs";
 import _sfc_main$1 from "../_components/selected-options/SelectedOptions.vue.mjs";
 import { provideFormErrorDescriptionBoundary } from "../form/error-description.mjs";
-import { Input } from "../input/index.mjs";
+import MpInput from "../input/base.mjs";
 import { createNamespace } from "../utils/components.mjs";
 import BaseCascaderPanel from "./base-cascader-panel.mjs";
 import CascaderSearchPanel from "./cascader-search-panel.mjs";
@@ -36,7 +36,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         onClear: _ctx.controller.clearSelection
       }, {
         default: withCtx(() => [
-          _ctx.searchable ? (openBlock(), createBlock(unref(Input), {
+          _ctx.searchable ? (openBlock(), createBlock(unref(MpInput), {
             key: 0,
             "model-value": _ctx.controller.computedInputValue,
             "edit-mode": "direct",

package/es/cascader/cascader-option.mjs

@@ -2,10 +2,12 @@ import { defineComponent, inject, useId, ref, computed, onDeactivated, onBeforeU
 import { IconCheck, IconLoading, IconRight } from "@maple-design/icons-vue";
 import { isolateEditorForm } from "../_components/field-presentation/form-bridge.mjs";
 import { isFunction } from "../_utils/is.mjs";
-import { Checkbox } from "../checkbox/index.mjs";
+import _Checkbox from "../checkbox/base.mjs";
 import { getPrefixCls, createNamespace } from "../utils/components.mjs";
 import { cascaderInjectionKey } from "./context.mjs";
 import { getCheckedStatus, getOptionLabel } from "./utils.mjs";
+const INTERACTIVE_ROLES = /* @__PURE__ */ new Set(["button", "link", "checkbox", "radio", "switch", "textbox", "combobox", "menuitem", "menuitemcheckbox", "menuitemradio", "option", "treeitem", "gridcell", "slider", "spinbutton", "tab"]);
+const CONCRETE_ROLES = new Set("alert alertdialog application article banner blockquote button caption cell checkbox code columnheader combobox comment complementary contentinfo definition deletion directory document emphasis feed figure form generic grid gridcell group heading image img insertion link list listbox listitem log main mark marquee math menu menubar menuitem menuitemcheckbox menuitemradio meter navigation none note option paragraph presentation progressbar radio radiogroup region row rowgroup rowheader scrollbar search searchbox sectionfooter sectionheader separator slider spinbutton status strong suggestion subscript superscript switch tab table tablist tabpanel term textbox time timer toolbar tooltip tree treegrid treeitem doc-abstract doc-acknowledgments doc-afterword doc-appendix doc-backlink doc-biblioentry doc-bibliography doc-biblioref doc-chapter doc-colophon doc-conclusion doc-cover doc-credit doc-credits doc-dedication doc-endnote doc-endnotes doc-epigraph doc-epilogue doc-errata doc-example doc-footnote doc-foreword doc-glossary doc-glossref doc-index doc-introduction doc-noteref doc-notice doc-pagebreak doc-pagefooter doc-pageheader doc-pagelist doc-part doc-preface doc-prologue doc-pullquote doc-qna doc-subtitle doc-tip doc-toc graphics-document graphics-object graphics-symbol".split(" "));
 function ownsOptionClick(event) {
   if (event.defaultPrevented) {
     return false;
@@ -29,7 +31,14 @@ function ownsOptionClick(event) {
     if (element?.nodeType !== 1 || typeof element.matches !== "function") {
       continue;
     }
-    if (element.matches('li[data-cascader-key], button, a[href], input, select, textarea, summary, [contenteditable]:not([contenteditable="false"]), [role="button"], [role="link"], [role="checkbox"], [role="radio"], [role="switch"], [role="textbox"], [role="combobox"], [role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"], [role="option"], [role="treeitem"], [role="gridcell"], [role="slider"], [role="spinbutton"], [role="tab"]')) {
+    const primaryRole = element.getAttribute("role")?.trim().split(/\s+/).find((role) => CONCRETE_ROLES.has(role));
+    if (primaryRole && INTERACTIVE_ROLES.has(primaryRole)) {
+      return false;
+    }
+    if (element.hasAttribute("tabindex") && element.tabIndex >= 0) {
+      return false;
+    }
+    if (element.matches('li[data-cascader-key], button, a[href], input, select, textarea, summary, audio[controls], video[controls], [contenteditable]:not([contenteditable="false"])')) {
       return false;
     }
     if (element.matches("label") && (element.htmlFor || element.querySelector("input, button, select, textarea"))) {
@@ -110,7 +119,9 @@ const CascaderOption = /* @__PURE__ */ defineComponent({
       },
       onMouseleave: (event) => {
         const element = event.currentTarget;
-        const focused = element.ownerDocument.activeElement;
+        const nodeRoot = element.getRootNode();
+        const focusRoot = "activeElement" in nodeRoot ? nodeRoot : element.ownerDocument;
+        const focused = focusRoot.activeElement;
         let focusedOption = focused?.closest("[data-cascader-key]");
         const panelSelector = `.${getPrefixCls("cascader")}-panel, .${getPrefixCls("cascader")}-editor-panel`;
         const panel = element.closest(panelSelector);
@@ -197,7 +208,7 @@ const CascaderOption = /* @__PURE__ */ defineComponent({
     }, events), [props.multiple && createVNode("span", {
       "class": `${prefixCls}-checkbox`,
       "onClick": (event) => event.stopPropagation()
-    }, [createVNode(Checkbox, {
+    }, [createVNode(_Checkbox, {
       "editMode": "direct",
       "uninjectGroupContext": true,
       "modelValue": Boolean(checkedStatus.value.checked),
@@ -209,9 +220,7 @@ const CascaderOption = /* @__PURE__ */ defineComponent({
         if (props.option.disabled || props.option.selectionDisabled) {
           return;
         }
-        const task = handlePathChange(new Event("change"));
         cascaderCtx.onClickOption?.(props.option, Boolean(checked));
-        return task;
       }
     }, null)]), createVNode("div", {
       "class": `${prefixCls}-label`

package/es/cascader/field-adapter.mjs

@@ -2,6 +2,7 @@ import { h } from "vue";
 import { optionValueText } from "../_components/field-presentation/option-labels.mjs";
 import _sfc_main from "./CascaderEditor.vue.mjs";
 const cascaderFieldAdapter = {
+  selectionConfirmation: "update",
   pauseSelectionWhileLoading: true,
   methods: ["focus", "blur", "refresh"],
   defaultPresentation: "popup",

package/es/cascader/props.mjs

@@ -6,6 +6,8 @@ import { emptyValueProp } from "../utils/empty-value.mjs";
 import { popupContainerProp } from "../utils/popup-container.mjs";
 const cascaderProps = {
   ...fieldLoadingProps,
+  /** 弹出编辑是否需要确认；未设置时单选即提交，多选保留确认。 */
+  needConfirm: { type: Boolean, default: void 0 },
   openTriggerTarget: openTriggerTargetProp,
   /** 清空动作产生的模型值；省略保留原默认值。 */
   /** 内置本地过滤是否区分大小写；自定义过滤函数优先。 */

package/es/cascader/style/index.css

@@ -11,7 +11,7 @@
   --mp-cascader-size-item-height: 36px;
   --mp-cascader-font-item-size: var(--mp-sys-font-size-md);
   --mp-cascader-margin-item-icon-left: var(--mp-sys-space-5);
-  --mp-cascader-item-check-color: var(--mp-sys-color-content-primary);
+  --mp-cascader-item-check-color: var(--mp-sys-color-action-primary);
   --mp-cascader-item-check-size: var(--mp-sys-font-size-md);
   --mp-cascader-item-text-color: var(--mp-sys-color-content-primary);
   --mp-cascader-item-icon-color: var(--mp-sys-color-content-secondary);
@@ -19,11 +19,11 @@
   --mp-cascader-padding-item-right: var(--mp-sys-space-5);
   --mp-cascader-size-item-icon: 12px;
   --mp-cascader-item-text-color-hover: var(--mp-cascader-item-text-color);
-  --mp-cascader-item-text-color-active: var(--mp-cascader-item-text-color);
+  --mp-cascader-item-text-color-active: var(--mp-sys-color-action-primary);
   --mp-cascader-item-text-color-disabled: var(--mp-sys-color-content-disabled);
   --mp-cascader-item-text-color-disabled-active: var(--mp-sys-color-content-disabled);
-  --mp-cascader-item-bg-active: var(--mp-color-fill-2);
-  --mp-cascader-item-bg-hover: var(--mp-cascader-item-bg-active);
+  --mp-cascader-item-bg-active: transparent;
+  --mp-cascader-item-bg-hover: var(--mp-color-fill-2);
   --mp-cascader-item-bg-disabled: transparent;
   --mp-cascader-item-bg-disabled-active: var(--mp-color-fill-2);
   --mp-cascader-checkbox-bg-hover: var(--mp-color-fill-3);
@@ -222,17 +222,44 @@
 .mp-cascader-search-option-disabled:hover .mp-cascader-option-check {
   color: var(--mp-cascader-item-text-color-disabled);
 }
-.mp-cascader-option-active {
-  color: var(--mp-cascader-item-text-color-active);
-  background-color: var(--mp-cascader-item-bg-active);
+.mp-cascader-option-active,
+.mp-cascader-search-option-active {
+  color: var(--mp-cascader-item-text-color-hover);
+  background-color: var(--mp-cascader-item-bg-hover);
   transition: all var(--mp-sys-motion-duration-standard) var(--mp-sys-motion-easing-standard);
 }
-.mp-cascader-option-active:hover {
+.mp-cascader-option-selected,
+.mp-cascader-search-option-selected {
   color: var(--mp-cascader-item-text-color-active);
   background-color: var(--mp-cascader-item-bg-active);
 }
+.mp-cascader-option-selected:hover,
+.mp-cascader-search-option-selected:hover,
+.mp-cascader-option-selected.mp-cascader-option-active,
+.mp-cascader-search-option-selected.mp-cascader-option-active,
+.mp-cascader-option-selected.mp-cascader-search-option-active,
+.mp-cascader-search-option-selected.mp-cascader-search-option-active,
+.mp-cascader-option-selected.mp-cascader-search-option-hover,
+.mp-cascader-search-option-selected.mp-cascader-search-option-hover {
+  color: var(--mp-cascader-item-text-color-active);
+  background-color: var(--mp-cascader-item-bg-hover);
+}
 .mp-cascader-option-active.mp-cascader-option-disabled,
-.mp-cascader-option-active.mp-cascader-option-disabled:hover {
+.mp-cascader-option-active.mp-cascader-search-option-disabled,
+.mp-cascader-search-option-active.mp-cascader-option-disabled,
+.mp-cascader-search-option-active.mp-cascader-search-option-disabled,
+.mp-cascader-option-active.mp-cascader-option-disabled:hover,
+.mp-cascader-option-active.mp-cascader-search-option-disabled:hover,
+.mp-cascader-search-option-active.mp-cascader-option-disabled:hover,
+.mp-cascader-search-option-active.mp-cascader-search-option-disabled:hover,
+.mp-cascader-option-selected.mp-cascader-option-disabled,
+.mp-cascader-option-selected.mp-cascader-search-option-disabled,
+.mp-cascader-search-option-selected.mp-cascader-option-disabled,
+.mp-cascader-search-option-selected.mp-cascader-search-option-disabled,
+.mp-cascader-option-selected.mp-cascader-option-disabled:hover,
+.mp-cascader-option-selected.mp-cascader-search-option-disabled:hover,
+.mp-cascader-search-option-selected.mp-cascader-option-disabled:hover,
+.mp-cascader-search-option-selected.mp-cascader-search-option-disabled:hover {
   color: var(--mp-cascader-item-text-color-disabled-active);
   background-color: var(--mp-cascader-item-bg-disabled-active);
 }

package/es/cascader/style/index.mjs

@@ -8,6 +8,7 @@ import '../../trigger/style/index.mjs'
 import '../../empty/style/index.mjs'
 import '../../loading/style/index.mjs'
 import '../../button/style/index.mjs'
+import '../../checkbox/style/index.mjs'
 import '../../picker/style/index.mjs'
 import '../../popup/style/index.mjs'
 import './index.css'

package/es/cascader/use-cascader-focus.mjs

@@ -6,11 +6,13 @@ function useCascaderFocus(activeKey) {
   onBeforeUnmount(() => cancelPendingFocus?.());
   return (root, option, originPanel, panelSelector) => {
     const key = activeKey.value;
-    if (!key || !root.contains(option) || root.ownerDocument.activeElement !== option) {
+    const document = root.ownerDocument;
+    const nodeRoot = root.getRootNode();
+    const focusRoot = "activeElement" in nodeRoot ? nodeRoot : document;
+    if (!key || !root.contains(option) || focusRoot.activeElement !== option) {
       return;
     }
     cancelPendingFocus?.();
-    const document = root.ownerDocument;
     const view = document.defaultView;
     if (!view) {
       return;
@@ -34,7 +36,7 @@ function useCascaderFocus(activeKey) {
       }
     };
     const onFocus = (next) => {
-      if (next.target !== option) {
+      if (next.target !== option && !next.composedPath().includes(option)) {
         cleanup();
       }
     };
@@ -42,9 +44,10 @@ function useCascaderFocus(activeKey) {
       if (done) {
         return;
       }
-      const focused = document.activeElement;
-      const lostToRemoval = !option.isConnected && (focused === document.body || focused === document.documentElement);
-      if (!root.isConnected || activeKey.value !== key || focused !== option && !lostToRemoval) {
+      const focused = focusRoot.activeElement;
+      const docFocus = document.activeElement;
+      const lostToRemoval = !option.isConnected && (docFocus === document.body || docFocus === document.documentElement) && (focused === null || focused === document.body || focused === document.documentElement);
+      if (!root.isConnected || root.getRootNode() !== nodeRoot || activeKey.value !== key || focused !== option && !lostToRemoval) {
         cleanup();
         return;
       }

package/es/checkbox/CheckboxGroup.vue.mjs

@@ -6,7 +6,7 @@ import { ChoiceLabel } from "./choice-label.mjs";
 import { normalizeChoiceOptions } from "./choice-options.mjs";
 import { useChoiceState, choiceLimit } from "./choice-state.mjs";
 import { checkboxGroupKey } from "./context.mjs";
-import _Checkbox from "./presentation.mjs";
+import Checkbox from "./presentation.mjs";
 import { checkboxGroupProps } from "./props.mjs";
 import { useCheckboxGroupMethods } from "./use-checkbox-group-methods.mjs";
 import { useChoiceForm } from "./use-choice-form.mjs";
@@ -75,7 +75,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         "aria-disabled": unref(mergedDisabled) || void 0
       }), [
         props.options !== void 0 ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(normalizedOptions.value, (option) => {
-          return openBlock(), createBlock(unref(_Checkbox), {
+          return openBlock(), createBlock(unref(Checkbox), {
             key: `${typeof option.value}:${String(option.value)}`,
             "edit-mode": "direct",
             value: option.value,

package/es/checkbox/base.mjs

@@ -0,0 +1,7 @@
+import { withPropsDefaultsSetter } from "../utils/components.mjs";
+import Checkbox from "./presentation.mjs";
+import { checkboxProps } from "./props.mjs";
+const _Checkbox = withPropsDefaultsSetter(Checkbox, checkboxProps);
+export {
+  _Checkbox as default
+};

package/es/checkbox/index.mjs

@@ -1,6 +1,6 @@
 import { withInstall, withPropsDefaultsSetter } from "../utils/components.mjs";
+import _Checkbox from "./base.mjs";
 import CheckboxGroup from "./group-presentation.mjs";
-import _Checkbox from "./presentation.mjs";
 import { checkboxProps, checkboxGroupProps } from "./props.mjs";
 const Checkbox = withInstall(
   _Checkbox,

package/es/checkbox/presentation.mjs

@@ -1,6 +1,6 @@
 import { withFieldPresentation } from "../_components/field-presentation/with-field-presentation.mjs";
 import _sfc_main from "./Checkbox.vue.mjs";
-const _Checkbox = withFieldPresentation(_sfc_main, { methods: ["toggle", "focus", "blur"] });
+const Checkbox = withFieldPresentation(_sfc_main, { methods: ["toggle", "focus", "blur"] });
 export {
-  _Checkbox as default
+  Checkbox as default
 };

package/es/checkbox/style/index.css

@@ -4,7 +4,7 @@
 :root,
 :where([data-mp-theme]) {
   --mp-checkbox-control-color: var(--mp-sys-color-content-secondary);
-  --mp-checkbox-control-color-checked: var(--mp-sys-color-content-brand);
+  --mp-checkbox-control-color-checked: var(--mp-sys-color-action-primary);
   --mp-checkbox-control-color-disabled: var(--mp-sys-color-content-disabled);
   --mp-checkbox-control-color-error: var(--mp-sys-color-content-danger);
   --mp-checkbox-control-size: 24px;

package/es/countdown/use-countdown.mjs

@@ -46,9 +46,12 @@ function useCountdown(props, emit) {
   let resumeOnActivate = false;
   let generation = 0;
   let handle;
-  function display() {
+  function updateDisplay() {
     timeData.value = splitTime(remaining);
     showTime.value = parseFormat(props.format, timeData.value);
+  }
+  function display() {
+    updateDisplay();
     emit("change", timeData.value);
   }
   function cancel() {
@@ -93,11 +96,15 @@ function useCountdown(props, emit) {
   }
   function pause() {
     resumeOnActivate = false;
-    if (running) {
+    const wasRunning = running;
+    if (wasRunning) {
       remaining = Math.max(0, deadline - performance.now());
     }
     running = false;
     cancel();
+    if (wasRunning && mounted) {
+      updateDisplay();
+    }
   }
   function reset() {
     if (!mounted) {

package/es/date/DatePanelActions.vue.mjs

@@ -1,6 +1,6 @@
 import { defineComponent, openBlock, createElementBlock, normalizeClass, unref, renderSlot, normalizeProps, guardReactiveProps, createBlock, withCtx, createVNode, createCommentVNode, createTextVNode, toDisplayString } from "vue";
 import { IconThunderbolt } from "@maple-design/icons-vue";
-import { Button } from "../button/index.mjs";
+import MpButton from "../button/base.mjs";
 import { createNamespace } from "../utils/components.mjs";
 import { usePanelActionsLocale } from "./presentation/use-panel-actions-locale.mjs";
 const _sfc_main = /* @__PURE__ */ defineComponent({
@@ -31,7 +31,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           selectNow: () => emit("select-now"),
           nowDisabled: _ctx.nowDisabled
         })), () => [
-          _ctx.showQuick ? (openBlock(), createBlock(unref(Button), {
+          _ctx.showQuick ? (openBlock(), createBlock(unref(MpButton), {
             key: 0,
             variant: "text",
             status: "primary",
@@ -49,7 +49,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             ]),
             _: 1
           }, 8, ["class", "aria-label", "aria-pressed", "disabled"])) : createCommentVNode("", true),
-          _ctx.showNow ? (openBlock(), createBlock(unref(Button), {
+          _ctx.showNow ? (openBlock(), createBlock(unref(MpButton), {
             key: 1,
             variant: "text",
             disabled: _ctx.nowDisabled,
@@ -60,7 +60,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             ]),
             _: 1
           }, 8, ["disabled"])) : createCommentVNode("", true),
-          _ctx.showConfirm ? (openBlock(), createBlock(unref(Button), {
+          _ctx.showConfirm ? (openBlock(), createBlock(unref(MpButton), {
             key: 2,
             status: "primary",
             disabled: !_ctx.canConfirm,

package/es/date/DateRangeQuickPanel.vue.mjs

@@ -1,5 +1,5 @@
 import { defineComponent, unref, openBlock, createElementBlock, normalizeClass, Fragment, renderList, createBlock, withCtx, resolveDynamicComponent, createTextVNode, toDisplayString, createCommentVNode } from "vue";
-import { Button } from "../button/index.mjs";
+import MpButton from "../button/base.mjs";
 import { createNamespace } from "../utils/components.mjs";
 import { useRangeQuickPanel } from "./range-quick-selection.mjs";
 const _sfc_main = /* @__PURE__ */ defineComponent({
@@ -16,7 +16,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         "aria-label": "快捷选择"
       }, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(unref(quick).items.value, (item, index) => {
-          return openBlock(), createBlock(unref(Button), {
+          return openBlock(), createBlock(unref(MpButton), {
             key: index,
             variant: "text",
             status: "primary",

package/es/date/DateShortcuts.vue.mjs

@@ -1,5 +1,5 @@
 import { defineComponent, openBlock, createElementBlock, normalizeClass, unref, Fragment, renderList, createBlock, withCtx, resolveDynamicComponent, createTextVNode, toDisplayString } from "vue";
-import { Button } from "../button/index.mjs";
+import MpButton from "../button/base.mjs";
 import { createNamespace } from "../utils/components.mjs";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{ name: createNamespace("date-shortcuts").name },
@@ -18,7 +18,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         class: normalizeClass(unref(classes)(unref(n)(), unref(n)(`--${_ctx.position}`)))
       }, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.shortcuts, (shortcut, index) => {
-          return openBlock(), createBlock(unref(Button), {
+          return openBlock(), createBlock(unref(MpButton), {
             key: index,
             variant: "text",
             disabled: _ctx.blocked || shortcut.disabled,

package/es/date/field-adapter.mjs

@@ -3,12 +3,11 @@ import { isFieldOpenClick } from "../_components/picker-field/open-trigger.mjs";
 import _sfc_main$1 from "../_components/picker-field/PickerField.vue.mjs";
 import { provideRangeField } from "../_components/picker-field/range-field-context.mjs";
 import { fieldDecoratorProps } from "../field-decorator/props.mjs";
-import "../locale/index.mjs";
+import { dateText } from "../locale/date-text.mjs";
 import { isDateSelectionValid } from "./date-rules.mjs";
 import { dateEventPayload, formatDateValue } from "./date-value.mjs";
 import _sfc_main from "./DatePanel.vue.mjs";
 import { dateFieldPanelOptions } from "./field-panel-options.mjs";
-import { t } from "../locale/state.mjs";
 function dateFieldAdapter(range) {
   return {
     methods: ["focus", "blur"],
@@ -24,7 +23,7 @@ function dateFieldAdapter(range) {
         class: ["mp-date-range", attrs.class],
         texts: [0, 1].map((index) => formatDateValue(value?.[index], props)),
         placeholder: Array.isArray(props.placeholder) ? props.placeholder[0] : props.placeholder,
-        placeholders: Array.isArray(props.placeholder) ? props.placeholder : typeof props.placeholder === "string" ? [props.placeholder, props.placeholder] : [t("dateRangeStart"), t("dateRangeEnd")],
+        placeholders: Array.isArray(props.placeholder) ? props.placeholder : typeof props.placeholder === "string" ? [props.placeholder, props.placeholder] : [dateText("dateRangeStart"), dateText("dateRangeEnd")],
         range: true,
         openTriggerTarget: props.openTriggerTarget,
         separator: props.separator,

package/es/date/picker-panels/DayPickerPanel2.vue.mjs

@@ -4,16 +4,15 @@ import dayjs from "dayjs";
 import isSameOrAfter from "dayjs/plugin/isSameOrAfter.js";
 import isSameOrBefore from "dayjs/plugin/isSameOrBefore.js";
 import { navigateTemporalGrid } from "../../_utils/temporal-keyboard.mjs";
-import { Button } from "../../button/index.mjs";
-import "../../locale/index.mjs";
+import MpButton from "../../button/base.mjs";
 import { injectLocaleProvider } from "../../locale-provider/provide.mjs";
+import { dateText } from "../../locale/date-text.mjs";
 import { createNamespace } from "../../utils/components.mjs";
 import { calendarMonthDays } from "../../utils/picker-data.mjs";
 import { isRangeHighlighted } from "../range-highlight.mjs";
 import { useCalendarRangeStyle } from "../use-calendar-range-style.mjs";
 import PanelHeader from "./PanelHeader.vue.mjs";
 import { WEEK_HEADER } from "../presentation-props.mjs";
-import { t } from "../../locale/state.mjs";
 dayjs.extend(isSameOrBefore);
 dayjs.extend(isSameOrAfter);
 const { n, classes } = createNamespace("day-picker");
@@ -21,7 +20,7 @@ const { n: nDate } = createNamespace("date-picker");
 const _sfc_main = defineComponent({
   name: createNamespace("day-picker-panel").name,
   components: {
-    MpButton: Button,
+    MpButton,
     PanelHeader
   },
   props: {
@@ -82,7 +81,7 @@ const _sfc_main = defineComponent({
       }
       return [...WEEK_HEADER.slice(index), ...WEEK_HEADER.slice(0, index)];
     });
-    const getDayAbbr = (key) => (pt || t)("datePickerWeekDict")?.[key].abbr ?? "";
+    const getDayAbbr = (key) => (pt || dateText)("datePickerWeekDict")?.[key].abbr ?? "";
     const filterDay = (day) => day > 0 ? day : "";
     const days = computed(() => {
       const {