@maple-design/ui-vue 1.1.0 → 1.1.1

package/es/steps/style/index.css

@@ -27,15 +27,15 @@
   --mp-steps-circle-item-tail-color-wait: var(--mp-sys-color-border-default);
   --mp-steps-circle-item-title-color-wait: var(--mp-sys-color-content-secondary);
   --mp-steps-circle-item-description-color-wait: var(--mp-sys-color-content-secondary);
-  --mp-steps-circle-item-bg-process: var(--mp-sys-color-content-brand);
+  --mp-steps-circle-item-bg-process: var(--mp-sys-color-action-primary);
   --mp-steps-circle-item-border-color-process: transparent;
   --mp-steps-circle-item-icon-text-color-process: var(--mp-sys-color-surface-default);
-  --mp-steps-circle-item-tail-color-process: var(--mp-sys-color-content-brand);
+  --mp-steps-circle-item-tail-color-process: var(--mp-sys-color-action-primary);
   --mp-steps-circle-item-title-color-process: var(--mp-sys-color-content-primary);
   --mp-steps-circle-item-description-color-process: var(--mp-sys-color-content-secondary);
   --mp-steps-circle-item-bg-finish: var(--mp-sys-color-state-selected);
   --mp-steps-circle-item-border-color-finish: transparent;
-  --mp-steps-circle-item-icon-text-color-finish: var(--mp-sys-color-content-brand);
+  --mp-steps-circle-item-icon-text-color-finish: var(--mp-sys-color-action-primary);
   --mp-steps-circle-item-title-color-finish: var(--mp-sys-color-content-primary);
   --mp-steps-circle-item-description-color-finish: var(--mp-sys-color-content-secondary);
   --mp-steps-circle-item-bg-error: var(--mp-sys-color-content-danger);
@@ -61,13 +61,13 @@
   --mp-steps-dot-item-tail-color-wait: var(--mp-sys-color-border-default);
   --mp-steps-dot-item-title-color-wait: var(--mp-sys-color-content-secondary);
   --mp-steps-dot-item-description-color-wait: var(--mp-sys-color-content-secondary);
-  --mp-steps-dot-item-bg-process: var(--mp-sys-color-content-brand);
-  --mp-steps-dot-item-border-color-process: var(--mp-sys-color-content-brand);
-  --mp-steps-dot-item-tail-color-process: var(--mp-sys-color-content-brand);
+  --mp-steps-dot-item-bg-process: var(--mp-sys-color-action-primary);
+  --mp-steps-dot-item-border-color-process: var(--mp-sys-color-action-primary);
+  --mp-steps-dot-item-tail-color-process: var(--mp-sys-color-action-primary);
   --mp-steps-dot-item-title-color-process: var(--mp-sys-color-content-primary);
   --mp-steps-dot-item-description-color-process: var(--mp-sys-color-content-secondary);
-  --mp-steps-dot-item-bg-finish: var(--mp-sys-color-content-brand);
-  --mp-steps-dot-item-border-color-finish: var(--mp-sys-color-content-brand);
+  --mp-steps-dot-item-bg-finish: var(--mp-sys-color-action-primary);
+  --mp-steps-dot-item-border-color-finish: var(--mp-sys-color-action-primary);
   --mp-steps-dot-item-title-color-finish: var(--mp-sys-color-content-primary);
   --mp-steps-dot-item-description-color-finish: var(--mp-sys-color-content-secondary);
   --mp-steps-dot-item-bg-error: var(--mp-sys-color-content-danger);
@@ -86,7 +86,7 @@
   --mp-steps-arrow-item-bg-wait: var(--mp-sys-color-surface-muted);
   --mp-steps-arrow-item-title-color-wait: var(--mp-sys-color-content-secondary);
   --mp-steps-arrow-item-description-color-wait: var(--mp-sys-color-content-secondary);
-  --mp-steps-arrow-item-bg-process: var(--mp-sys-color-content-brand);
+  --mp-steps-arrow-item-bg-process: var(--mp-sys-color-action-primary);
   --mp-steps-arrow-item-title-color-process: var(--mp-sys-color-surface-default);
   --mp-steps-arrow-item-description-color-process: var(--mp-sys-color-surface-default);
   --mp-steps-arrow-item-bg-finish: var(--mp-sys-color-state-selected);
@@ -104,7 +104,7 @@
   --mp-steps-navigation-arrow-spacing-right: 10px;
   --mp-steps-navigation-ink-spacing-left: 0;
   --mp-steps-navigation-ink-spacing-right: 30px;
-  --mp-steps-navigation-ink-bg: var(--mp-sys-color-content-brand);
+  --mp-steps-navigation-ink-bg: var(--mp-sys-color-action-primary);
   --mp-steps-changeable-hover-text-color: var(--mp-sys-color-content-brand);
   --mp-steps-node-font-weight: 500;
   --mp-steps-transition-duration-1: 0.1s;

package/es/switch/Switch.vue.mjs

@@ -1,4 +1,5 @@
-import { defineComponent, ref, computed, onBeforeUnmount, onDeactivated, onActivated, watch, openBlock, createElementBlock, mergeProps, withKeys, withModifiers, unref, createElementVNode, normalizeClass, renderSlot, createTextVNode, toDisplayString, createCommentVNode, normalizeStyle } from "vue";
+import { defineComponent, ref, computed, inject, watch, onBeforeUnmount, onDeactivated, onActivated, openBlock, createElementBlock, mergeProps, withKeys, withModifiers, unref, createElementVNode, normalizeClass, renderSlot, createTextVNode, toDisplayString, createCommentVNode, normalizeStyle } from "vue";
+import { fieldEditorControlPending } from "../_components/field-presentation/editor-pending.mjs";
 import { invokeBeforeHook } from "../_hooks/use-action-guard.mjs";
 import { useFormErrorDescription } from "../form/error-description.mjs";
 import { createNamespace } from "../utils/components.mjs";
@@ -20,6 +21,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const current = computed(() => props.modelValue === void 0 ? internal.value : props.modelValue);
     const checked = computed(() => current.value === props.checkedValue);
     const pending = ref(false);
+    const editorPending = inject(fieldEditorControlPending, void 0);
+    watch(
+      pending,
+      (value) => {
+        if (editorPending) {
+          editorPending.value = value;
+        }
+      },
+      { flush: "sync" }
+    );
     const busy = computed(() => props.loading || pending.value);
     const rippleKey = ref(0);
     let active = true;

package/es/switch/style/index.css

@@ -12,7 +12,7 @@
   --mp-switch-size-lg-scale: 1.2;
   --mp-switch-hit-area: 0px;
   --mp-switch-track-background: var(--mp-sys-color-content-secondary);
-  --mp-switch-track-active-background: var(--mp-sys-color-content-brand);
+  --mp-switch-track-active-background: var(--mp-sys-color-action-primary);
   --mp-switch-track-error-background: var(--mp-sys-color-content-danger);
   --mp-switch-handle-background: var(--mp-sys-color-surface-default);
   --mp-switch-handle-color: var(--mp-sys-color-content-brand);

package/es/tab-bar/TabBar.vue.mjs

@@ -3,7 +3,7 @@ import { isNumber, normalizeToArray, call, getRect } from "@maple-design/shared-
 import { onWindowResize, onSmartMounted } from "@maple-design/use-vue";
 import _sfc_main$1 from "../_components/pending-feedback/PendingFeedback.vue.mjs";
 import { useActionGuard } from "../_hooks/use-action-guard.mjs";
-import { Button } from "../button/index.mjs";
+import MpButton from "../button/base.mjs";
 import { createNamespace } from "../utils/components.mjs";
 import { toSizeUnit } from "../utils/elements.mjs";
 import { useElementResize } from "../utils/resize-observer.mjs";
@@ -224,7 +224,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         }, _ctx.$attrs), [
           createVNode(_sfc_main$1, { loading: busy.value }, null, 8, ["loading"]),
           renderSlot(_ctx.$slots, "default"),
-          _ctx.$slots.fab ? (openBlock(), createBlock(unref(Button), mergeProps({
+          _ctx.$slots.fab ? (openBlock(), createBlock(unref(MpButton), mergeProps({
             key: 0,
             class: unref(classes)(unref(n)("fab"), [unref(length) % 2, unref(n)("--fab-right"), unref(n)("--fab-center")]),
             "mp-tab-bar__fab": ""

package/es/tab-bar/style/index.css

@@ -8,10 +8,10 @@
   --mp-tab-bar-item-focus-color: currentColor;
   --mp-tab-bar-item-font-size: var(--mp-font-size-sm);
   --mp-tab-bar-item-inactive-color: var(--mp-color-text-2);
-  --mp-tab-bar-item-active-color: var(--mp-sys-color-content-brand);
+  --mp-tab-bar-item-active-color: var(--mp-sys-color-action-primary);
   --mp-tab-bar-item-active-background-color: transparent;
   --mp-tab-bar-item-variant-active-background-color: color-mix(in srgb, var(--mp-color-primary) 14%, var(--mp-tab-bar-background-color));
-  --mp-tab-bar-item-variant-active-color: var(--mp-sys-color-content-brand);
+  --mp-tab-bar-item-variant-active-color: var(--mp-sys-color-action-primary);
   --mp-tab-bar-item-line-height: 1;
   --mp-tab-bar-item-icon-size: 22px;
   --mp-tab-bar-item-icon-margin-bottom: 5px;

package/es/tabs/style/index.css

@@ -5,7 +5,7 @@
 :where([data-mp-theme]) {
   --mp-tabs-background: var(--mp-sys-color-surface-default);
   --mp-tabs-title-text-color: var(--mp-sys-color-content-secondary);
-  --mp-tabs-title-text-color-active: var(--mp-sys-color-content-brand);
+  --mp-tabs-title-text-color-active: var(--mp-sys-color-action-primary);
   --mp-tabs-title-text-color-disabled: var(--mp-sys-color-content-disabled);
   --mp-tabs-muted-background: var(--mp-sys-color-surface-muted);
   --mp-tabs-border-color: var(--mp-sys-color-border-default);

package/es/tabs/use-tabs-configuration.mjs

@@ -1,13 +1,12 @@
 import { computed } from "vue";
-import "../locale/index.mjs";
 import { injectLocaleProvider } from "../locale-provider/provide.mjs";
-import { t } from "../locale/state.mjs";
+import { miscText } from "../locale/misc-text.mjs";
 function useTabsConfiguration(size) {
   return { size: computed(() => size.value ?? "md") };
 }
 function useTabsLocale() {
   const { t: localize } = injectLocaleProvider();
-  const get = (key, fallback) => localize?.(key) ?? t(key) ?? fallback;
+  const get = (key, fallback) => localize?.(key) ?? miscText(key) ?? fallback;
   return computed(() => ({
     close: get("tabs.close", "Close"),
     add: get("tabs.add", "Add tab"),

package/es/themes/alps-light/index.mjs

@@ -6,7 +6,6 @@ const alpsLight = {
   "--mp-selection-editor-accent": "var(--mp-sys-color-content-primary)",
   "--mp-selection-editor-selected-background": "var(--mp-sys-color-state-selected)",
   "--mp-selected-options-clear-color": "var(--mp-sys-color-content-primary)",
-  "--mp-select-popup-option-check-color": "var(--mp-sys-color-content-primary)",
   "--mp-sys-font-family": "ALPSSans-Regular, PingFang SC, Helvetica, Verdana, Arial, sans-serif",
   "--mp-color-primary": "rgb(9, 12, 26)",
   "--mp-sys-color-action-primary": "rgb(9, 12, 26)",
@@ -43,29 +42,29 @@ const alpsLight = {
   "--mp-field-variant-outline-background": "transparent",
   "--mp-field-variant-outline-border-color": "rgb(220, 222, 228)",
   "--mp-field-variant-outline-border-color-hover": "rgb(220, 222, 228)",
-  "--mp-field-variant-outline-border-color-focus": "rgb(9, 12, 26)",
+  "--mp-field-variant-outline-border-color-focus": "var(--mp-sys-color-action-primary)",
   "--mp-field-variant-outline-border-color-disabled": "rgb(220, 222, 228)",
   "--mp-field-variant-outline-border-color-error": "rgb(244, 85, 82)",
-  "--mp-field-focus-color": "rgb(9, 12, 26)",
+  "--mp-field-focus-color": "var(--mp-sys-color-action-primary)",
   "--mp-field-error-color": "rgb(184, 50, 49)",
   "--mp-field-variant-filled-background": "var(--mp-sys-color-surface-muted)",
   "--mp-field-variant-filled-background-hover": "rgb(239, 241, 244)",
   "--mp-field-variant-filled-background-focus": "rgb(229, 233, 239)",
   "--mp-field-variant-filled-background-disabled": "var(--mp-sys-color-surface-muted)",
   "--mp-field-variant-standard-line-color": "var(--mp-sys-color-border-strong)",
-  "--mp-field-variant-standard-line-color-focus": "rgb(9, 12, 26)",
+  "--mp-field-variant-standard-line-color-focus": "var(--mp-sys-color-action-primary)",
   "--mp-button-solid-text-color": "rgb(255, 255, 255)",
   "--mp-button-primary-disabled-color": "rgb(220, 222, 228)",
   "--mp-button-disabled-solid-text-color": "rgb(255, 255, 255)",
   "--mp-button-primary-state-layer-color": "rgb(57, 60, 72)",
   "--mp-checkbox-control-color": "rgb(107, 109, 120)",
-  "--mp-checkbox-control-color-checked": "rgb(255, 61, 0)",
+  "--mp-checkbox-control-color-checked": "var(--mp-sys-color-action-primary)",
   "--mp-checkbox-control-color-disabled": "rgb(220, 222, 228)",
   "--mp-checkbox-control-border-radius": "999px",
   "--mp-radio-control-color": "rgb(107, 109, 120)",
-  "--mp-radio-control-color-checked": "rgb(255, 61, 0)",
+  "--mp-radio-control-color-checked": "var(--mp-sys-color-action-primary)",
   "--mp-radio-control-color-disabled": "rgb(220, 222, 228)",
-  "--mp-switch-track-active-background": "rgb(255, 61, 0)",
+  "--mp-switch-track-active-background": "var(--mp-sys-color-action-primary)",
   "--mp-switch-track-background": "rgb(220, 222, 228)",
   "--mp-switch-handle-background": "rgb(255, 255, 255)",
   "--mp-switch-text-color": "var(--mp-sys-color-content-primary)",
@@ -198,9 +197,9 @@ const alpsLight = {
   "--mp-field-variant-standard-line-size-focus": "1px",
   "--mp-button-primary-foreground-color": "rgb(255, 61, 0)",
   "--mp-button-primary-tonal-color": "rgb(255, 247, 240)",
-  "--mp-date-calendar-selected-background": "rgb(255, 61, 0)",
-  "--mp-date-calendar-selected-color": "rgb(9, 12, 26)",
-  "--mp-date-calendar-today-color": "rgb(184, 50, 49)",
+  "--mp-date-calendar-selected-background": "var(--mp-sys-color-action-primary)",
+  "--mp-date-calendar-selected-color": "var(--mp-button-solid-text-color)",
+  "--mp-date-calendar-today-color": "var(--mp-sys-color-action-primary)",
   "--mp-picker-option-text-color": "rgb(155, 157, 166)",
   "--mp-picker-option-active-text-color": "rgb(9, 12, 26)",
   "--mp-upload-duration-background": "rgba(0, 0, 0, 0.72)",
@@ -209,7 +208,7 @@ const alpsLight = {
   "--mp-upload-card-size": "108px",
   "--mp-upload-border-radius": "8px",
   "--mp-upload-background": "rgb(247, 247, 247)",
-  "--mp-upload-active-color": "rgb(255, 61, 0)",
+  "--mp-upload-active-color": "var(--mp-sys-color-action-primary)",
   "--mp-upload-error-color": "rgb(184, 50, 49)",
   "--mp-date-picker-main-color": "var(--mp-sys-color-content-primary)",
   "--mp-date-picker-header-color": "var(--mp-sys-color-content-secondary)",

package/es/themes/create-brand-dark.mjs

@@ -174,6 +174,24 @@ function createBrandDark(light, brand) {
     }
   }
   set("primary-7", rgb(pressed).join(", "));
+  aliases(
+    [
+      "checkbox-control-color-checked",
+      "radio-control-color-checked",
+      "switch-track-active-background",
+      "slider-active-color",
+      "slider-thumb-border-color",
+      "field-focus-color",
+      "field-variant-outline-border-color-focus",
+      "field-variant-standard-line-color-focus",
+      "date-calendar-selected-background",
+      "date-calendar-today-color",
+      "temporal-panel-summary-active-color",
+      "upload-active-color"
+    ],
+    "var(--mp-sys-color-action-primary)"
+  );
+  set("date-calendar-selected-color", "var(--mp-button-solid-text-color)");
   return dark;
 }
 export {

package/es/themes/dark/breadcrumb-item.mjs

@@ -1,6 +1,6 @@
 const breadcrumbItem = {
   "--mp-breadcrumb-item-inactive-color": "var(--mp-color-text-2)",
-  "--mp-breadcrumb-item-active-color": "rgb(var(--mp-primary-8))",
+  "--mp-breadcrumb-item-active-color": "var(--mp-sys-color-action-primary)",
   "--mp-breadcrumb-item-separator-margin": "0 10px",
   "--mp-breadcrumb-item-separator-font-size": "14px"
 };

package/es/themes/dark/cascader.mjs

@@ -1,7 +1,7 @@
 const cascader = {
   "--mp-cascader-item-text-color": "var(--mp-sys-color-content-primary)",
   "--mp-cascader-item-icon-color": "var(--mp-sys-color-content-secondary)",
-  "--mp-cascader-item-bg-active": "var(--mp-sys-color-state-selected)",
+  "--mp-cascader-item-bg-hover": "var(--mp-sys-color-state-selected)",
   "--mp-cascader-item-text-color-disabled": "var(--mp-sys-color-content-disabled)"
 };
 export {

package/es/themes/dark/index.mjs

@@ -66,9 +66,9 @@ import upload from "./upload.mjs";
 import watermark from "./watermark.mjs";
 const defaultDark = {
   "--mp-color-scheme": "dark",
-  "--mp-field-focus-color": "rgb(var(--mp-primary-9))",
+  "--mp-field-focus-color": "var(--mp-sys-color-action-primary)",
   "--mp-field-error-color": "rgb(var(--mp-danger-8))",
-  "--mp-field-variant-outline-border-color-focus": "rgb(var(--mp-primary-9))",
+  "--mp-field-variant-outline-border-color-focus": "var(--mp-sys-color-action-primary)",
   "--mp-brand-1": "0, 66, 77",
   "--mp-brand-2": "4, 94, 105",
   "--mp-brand-3": "11, 125, 133",

package/es/themes/firefly-light/index.mjs

@@ -6,7 +6,6 @@ const fireflyLight = {
   "--mp-selection-editor-accent": "var(--mp-sys-color-content-primary)",
   "--mp-selection-editor-selected-background": "var(--mp-sys-color-state-selected)",
   "--mp-selected-options-clear-color": "var(--mp-sys-color-content-primary)",
-  "--mp-select-popup-option-check-color": "var(--mp-sys-color-content-primary)",
   "--mp-sys-font-family": "Pyro QiHei, PingFang SC, Helvetica, Verdana, Arial, sans-serif",
   "--mp-color-primary": "rgb(234, 255, 104)",
   "--mp-sys-color-action-primary": "rgb(234, 255, 104)",
@@ -44,17 +43,17 @@ const fireflyLight = {
   "--mp-field-variant-outline-background": "rgba(23, 34, 75, 0.04)",
   "--mp-field-variant-outline-border-color": "transparent",
   "--mp-field-variant-outline-border-color-hover": "transparent",
-  "--mp-field-variant-outline-border-color-focus": "rgb(154, 137, 235)",
+  "--mp-field-variant-outline-border-color-focus": "var(--mp-sys-color-action-primary)",
   "--mp-field-variant-outline-border-color-disabled": "transparent",
   "--mp-field-variant-outline-border-color-error": "rgb(255, 115, 91)",
-  "--mp-field-focus-color": "var(--mp-sys-color-content-brand)",
+  "--mp-field-focus-color": "var(--mp-sys-color-action-primary)",
   "--mp-field-error-color": "rgb(180, 59, 40)",
   "--mp-field-variant-filled-background": "var(--mp-sys-color-surface-muted)",
   "--mp-field-variant-filled-background-hover": "rgba(23, 34, 75, 0.08)",
   "--mp-field-variant-filled-background-focus": "rgba(23, 34, 75, 0.12)",
   "--mp-field-variant-filled-background-disabled": "var(--mp-sys-color-surface-muted)",
   "--mp-field-variant-standard-line-color": "var(--mp-sys-color-border-strong)",
-  "--mp-field-variant-standard-line-color-focus": "rgb(154, 137, 235)",
+  "--mp-field-variant-standard-line-color-focus": "var(--mp-sys-color-action-primary)",
   // Horo roles: primary = yellow action, secondary = neutral, tertiary = auxiliary violet.
   "--mp-button-primary-foreground-color": "rgb(234, 255, 104)",
   "--mp-button-primary-tonal-color": "#30391F",
@@ -72,10 +71,10 @@ const fireflyLight = {
   "--mp-button-disabled-solid-text-color": "rgba(23, 34, 75, 0.16)",
   "--mp-button-primary-state-layer-color": "rgb(207, 223, 38)",
   "--mp-checkbox-control-color": "rgba(23, 34, 75, 0.36)",
-  "--mp-checkbox-control-color-checked": "rgb(207, 199, 255)",
+  "--mp-checkbox-control-color-checked": "var(--mp-sys-color-action-primary)",
   "--mp-checkbox-mark-color": "rgb(23, 34, 75)",
-  "--mp-slider-active-color": "rgb(207, 199, 255)",
-  "--mp-slider-thumb-border-color": "rgb(154, 137, 235)",
+  "--mp-slider-active-color": "var(--mp-sys-color-action-primary)",
+  "--mp-slider-thumb-border-color": "var(--mp-sys-color-action-primary)",
   // Link follows Button text/outline roles; keep readable surfaces explicit in demos.
   "--mp-link-primary-color": "var(--mp-button-primary-foreground-color)",
   "--mp-link-secondary-color": "var(--mp-button-secondary-foreground-color)",
@@ -86,9 +85,9 @@ const fireflyLight = {
   "--mp-checkbox-control-color-disabled": "rgba(23, 34, 75, 0.16)",
   "--mp-checkbox-control-border-radius": "8px",
   "--mp-radio-control-color": "rgba(23, 34, 75, 0.36)",
-  "--mp-radio-control-color-checked": "rgb(207, 199, 255)",
+  "--mp-radio-control-color-checked": "var(--mp-sys-color-action-primary)",
   "--mp-radio-control-color-disabled": "rgba(23, 34, 75, 0.08)",
-  "--mp-switch-track-active-background": "rgb(182, 168, 251)",
+  "--mp-switch-track-active-background": "var(--mp-sys-color-action-primary)",
   "--mp-switch-track-background": "rgba(23, 34, 75, 0.08)",
   "--mp-switch-handle-background": "rgb(255, 255, 255)",
   "--mp-switch-text-color": "var(--mp-sys-color-content-primary)",
@@ -223,9 +222,9 @@ const fireflyLight = {
   "--mp-field-size-md-font-size": "16px",
   "--mp-field-size-md-height": "48px",
   "--mp-field-variant-standard-line-size-focus": "1px",
-  "--mp-date-calendar-selected-background": "rgb(207, 199, 255)",
-  "--mp-date-calendar-selected-color": "rgba(23, 34, 75, 1)",
-  "--mp-date-calendar-today-color": "rgb(119, 104, 211)",
+  "--mp-date-calendar-selected-background": "var(--mp-sys-color-action-primary)",
+  "--mp-date-calendar-selected-color": "var(--mp-button-solid-text-color)",
+  "--mp-date-calendar-today-color": "var(--mp-sys-color-action-primary)",
   "--mp-date-picker-range-background": "rgba(207, 199, 255, 0.24)",
   "--mp-picker-option-text-color": "rgba(23, 34, 75, 0.36)",
   "--mp-picker-option-active-text-color": "rgba(23, 34, 75, 1)",
@@ -235,7 +234,7 @@ const fireflyLight = {
   "--mp-upload-card-size": "108px",
   "--mp-upload-border-radius": "24px",
   "--mp-upload-background": "rgba(23, 34, 75, 0.04)",
-  "--mp-upload-active-color": "rgb(154, 137, 235)",
+  "--mp-upload-active-color": "var(--mp-sys-color-action-primary)",
   "--mp-upload-error-color": "rgb(180, 59, 40)",
   "--mp-date-picker-main-color": "var(--mp-sys-color-content-primary)",
   "--mp-date-picker-header-color": "var(--mp-sys-color-content-secondary)",

package/es/themes/index.mjs

@@ -9,9 +9,9 @@ import { toRem } from "./toRem.mjs";
 import { toViewport } from "./toViewport.mjs";
 const defaultLight = {
   "--mp-color-scheme": "light",
-  "--mp-field-focus-color": "rgb(var(--mp-primary-9))",
+  "--mp-field-focus-color": "var(--mp-sys-color-action-primary)",
   "--mp-field-error-color": "rgb(var(--mp-danger-8))",
-  "--mp-field-variant-outline-border-color-focus": "rgb(var(--mp-primary-9))",
+  "--mp-field-variant-outline-border-color-focus": "var(--mp-sys-color-action-primary)",
   "--mp-brand-1": "232, 255, 251",
   "--mp-brand-2": "176, 242, 233",
   "--mp-brand-3": "125, 229, 219",

package/es/themes/maple-light/index.mjs

@@ -2,9 +2,9 @@ const mapleLight = {
   "--mp-color-scheme": "light",
   "--mp-switch-checked-text-color": "var(--mp-sys-color-content-on-dark)",
   "--mp-date-calendar-selected-color": "var(--mp-sys-color-content-on-dark)",
-  "--mp-field-focus-color": "rgb(var(--mp-primary-8))",
+  "--mp-field-focus-color": "var(--mp-sys-color-action-primary)",
   "--mp-field-error-color": "rgb(var(--mp-danger-8))",
-  "--mp-field-variant-outline-border-color-focus": "rgb(var(--mp-primary-8))",
+  "--mp-field-variant-outline-border-color-focus": "var(--mp-sys-color-action-primary)",
   "--mp-brand-1": "255, 247, 237",
   "--mp-brand-2": "255, 237, 213",
   "--mp-brand-3": "254, 215, 170",

package/es/time/presentation/TimeFieldPanel.vue.mjs

@@ -1,6 +1,6 @@
 import { defineComponent, shallowRef, provide, openBlock, createElementBlock, normalizeClass, createElementVNode, renderSlot, createBlock, resolveDynamicComponent, createCommentVNode, unref, withCtx, createTextVNode, toDisplayString } from "vue";
 import { editorAuxiliaryActions } from "../../_components/field-presentation/editor-actions.mjs";
-import { Button } from "../../button/index.mjs";
+import MpButton from "../../button/base.mjs";
 import { createNamespace } from "../../utils/components.mjs";
 const _hoisted_1 = { class: "mp-time-field-panel__body" };
 const _hoisted_2 = {
@@ -31,7 +31,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         ]),
         !_ctx.disableConfirm || auxiliaryActions.value ? (openBlock(), createElementBlock("div", _hoisted_2, [
           auxiliaryActions.value ? (openBlock(), createBlock(resolveDynamicComponent(auxiliaryActions.value), { key: 0 })) : createCommentVNode("", true),
-          !_ctx.disableConfirm ? (openBlock(), createBlock(unref(Button), {
+          !_ctx.disableConfirm ? (openBlock(), createBlock(unref(MpButton), {
             key: 1,
             class: normalizeClass(n("confirm-button")),
             status: "primary",

package/es/time/presentation/TimePanelContent2.vue.mjs

@@ -1,17 +1,16 @@
 import { defineComponent, inject, onBeforeUnmount, computed, toRefs, h } from "vue";
 import { editorAuxiliaryActions } from "../../_components/field-presentation/editor-actions.mjs";
 import { navigateTemporalColumns } 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 { _PickerComponent } from "../../picker/index.mjs";
+import { temporalText } from "../../locale/temporal-text.mjs";
+import MpPicker from "../../picker/base.mjs";
 import { formatElevation, createNamespace } from "../../utils/components.mjs";
 import { getTimePickerColumnLabels } from "../picker-columns.mjs";
-import { t } from "../../locale/state.mjs";
 const { n, classes } = createNamespace("time-picker");
 const _sfc_main = defineComponent({
   name: createNamespace("time-panel-content").name,
-  components: { MpButton: Button, MpPicker: _PickerComponent },
+  components: { MpButton, MpPicker },
   props: {
     options: { type: Object, required: true },
     state: { type: Object, required: true }
@@ -20,7 +19,7 @@ const _sfc_main = defineComponent({
     const { t: pt } = injectLocaleProvider();
     const hostActions = inject(editorAuxiliaryActions, void 0);
     const nowAction = () => props.options.showNowButton ? h(
-      Button,
+      MpButton,
       {
         variant: "text",
         disabled: props.state.nowDisabled.value,
@@ -28,7 +27,7 @@ const _sfc_main = defineComponent({
           props.state.selectNow();
         }
       },
-      () => (pt ?? t)("datePickerNowButtonText")
+      () => (pt ?? temporalText)("datePickerNowButtonText")
     ) : void 0;
     if (hostActions) {
       hostActions.value = nowAction;
@@ -44,11 +43,11 @@ const _sfc_main = defineComponent({
       nowAction,
       ...toRefs(props.options),
       ...props.state,
-      columnLabels: computed(() => getTimePickerColumnLabels(props.options, (key) => (pt ?? t)(key))),
+      columnLabels: computed(() => getTimePickerColumnLabels(props.options, (key) => (pt ?? temporalText)(key))),
       n,
       classes,
       formatElevation,
-      t,
+      t: temporalText,
       pt
     };
   }

package/es/time/presentation/use-field-locale.mjs

@@ -1,14 +1,13 @@
-import "../../locale/index.mjs";
 import { injectLocaleProvider } from "../../locale-provider/provide.mjs";
-import { t } from "../../locale/state.mjs";
+import { temporalText } from "../../locale/temporal-text.mjs";
 function useTimeFieldLocale() {
   const { t: provided } = injectLocaleProvider();
   return {
     placeholder: (_range) => "",
-    nextDay: () => (provided ?? t)("timeRangeNextDay"),
-    title: () => (provided ?? t)("pickerTitle"),
-    cancel: () => (provided ?? t)("pickerCancelButtonText"),
-    confirm: () => (provided ?? t)("pickerConfirmButtonText")
+    nextDay: () => (provided ?? temporalText)("timeRangeNextDay"),
+    title: () => (provided ?? temporalText)("pickerTitle"),
+    cancel: () => (provided ?? temporalText)("pickerCancelButtonText"),
+    confirm: () => (provided ?? temporalText)("pickerConfirmButtonText")
   };
 }
 export {

package/es/time/props.mjs

@@ -2,13 +2,13 @@ import { fieldPresentationProps } from "../_components/field-presentation/props.
 import { timePickerFieldsProp } from "../_components/picker-field/fields.mjs";
 import { openTriggerTargetProp } from "../_components/picker-field/open-trigger.mjs";
 import "../field-decorator/index.mjs";
-import { fieldDecoratorProps, fieldLoadingProps } from "../field-decorator/props.mjs";
 import { pickProps } from "../utils/components.mjs";
 import { emptyValueProp } from "../utils/empty-value.mjs";
 import { popupContainerProp } from "../utils/popup-container.mjs";
 import { timeDisabledProps } from "./disabled-props.mjs";
 import { props as props$1 } from "./picker-props.mjs";
 import { timeStepProp } from "./step-prop.mjs";
+import { fieldDecoratorProps, fieldLoadingProps } from "../field-decorator/props.mjs";
 const props = {
   ...fieldLoadingProps,
   openTriggerTarget: openTriggerTargetProp,

package/es/time-range/presentation/TimePanelContent2.vue.mjs

@@ -1,24 +1,23 @@
 import { defineComponent, computed, inject, onBeforeUnmount, toRefs, h } from "vue";
 import { editorAuxiliaryActions, useEditorFeedback } from "../../_components/field-presentation/editor-actions.mjs";
 import { navigateTemporalColumns } 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 { _PickerComponent } from "../../picker/index.mjs";
+import { temporalText } from "../../locale/temporal-text.mjs";
+import MpPicker from "../../picker/base.mjs";
 import { getTimePickerColumnLabels } from "../../time/picker-columns.mjs";
 import { formatElevation, createNamespace } from "../../utils/components.mjs";
-import { t } from "../../locale/state.mjs";
 const { n, classes } = createNamespace("time-range-picker");
 const _sfc_main = defineComponent({
   name: createNamespace("time-range-panel-content").name,
-  components: { MpButton: Button, MpPicker: _PickerComponent },
+  components: { MpButton, MpPicker },
   props: {
     options: { type: Object, required: true },
     state: { type: Object, required: true }
   },
   setup(props) {
     const { t: pt } = injectLocaleProvider();
-    const translate = (key) => (pt ? pt : t)(key);
+    const translate = (key) => (pt ? pt : temporalText)(key);
     const columnLabels = computed(() => {
       const labels = getTimePickerColumnLabels(props.options, translate);
       return [...labels, ...labels];
@@ -28,7 +27,7 @@ const _sfc_main = defineComponent({
       () => props.state.orderInvalid.value ? translate("timeRangeOrderError") : void 0
     );
     const nowAction = () => props.options.showNowButton ? h(
-      Button,
+      MpButton,
       {
         variant: "text",
         disabled: props.state.nowDisabled.value,

package/es/time-range/props.mjs

@@ -3,12 +3,12 @@ import { timePickerFieldsProp } from "../_components/picker-field/fields.mjs";
 import { openTriggerTargetProp } from "../_components/picker-field/open-trigger.mjs";
 import { rangeInputAttrsProp } from "../_components/picker-field/props.mjs";
 import "../field-decorator/index.mjs";
-import { fieldDecoratorProps, fieldLoadingProps } from "../field-decorator/props.mjs";
 import { timeDisabledProps } from "../time/disabled-props.mjs";
 import { timeStepProp } from "../time/step-prop.mjs";
 import { pickProps } from "../utils/components.mjs";
 import { emptyValueProp } from "../utils/empty-value.mjs";
 import { popupContainerProp } from "../utils/popup-container.mjs";
+import { fieldDecoratorProps, fieldLoadingProps } from "../field-decorator/props.mjs";
 const props = {
   ...fieldLoadingProps,
   inputAttrs: rangeInputAttrsProp,

package/es/trigger/popup-move-focus.mjs

@@ -28,21 +28,21 @@ const shadowHostNames = /* @__PURE__ */ new Set([
 function mayHideShadow(element) {
   return !element.shadowRoot && (element.localName.includes("-") || shadowHostNames.has(element.localName));
 }
-function documentChain(start) {
+function documentChain(start, allowPartial = false) {
   const documents = [start], frames = [];
   let current = start;
   try {
     while (current.defaultView && current.defaultView.parent !== current.defaultView) {
       const frame = current.defaultView.frameElement;
       if (!frame) {
-        return void 0;
+        return allowPartial ? { documents, frames } : void 0;
       }
       frames.push(frame);
       current = frame.ownerDocument;
       documents.push(current);
     }
   } catch {
-    return void 0;
+    return allowPartial ? { documents, frames } : void 0;
   }
   return { documents, frames };
 }
@@ -51,7 +51,7 @@ function canRestore(owner, destination, anchor, focused) {
     const current = owner.activeElement;
     return (!current || current === owner.body || current === owner.documentElement || current === anchor) && (current !== anchor || deepestActive(anchor) === focused);
   }
-  const from = documentChain(owner), to = documentChain(destination);
+  const from = documentChain(owner, true), to = documentChain(destination, true);
   if (!from || !to) {
     return false;
   }
@@ -118,8 +118,8 @@ function usePopupMoveFocus(target, inline, popup, visible) {
       return false;
     }
     const owner = moving.ownerDocument;
-    const chain = documentChain(owner);
-    if (!chain) {
+    const chain = documentChain(owner, true);
+    if (!chain || !chain.documents[chain.documents.length - 1].hasFocus()) {
       return false;
     }
     return chain.documents.every((doc) => {