@maple-design/ui-vue 1.1.0 → 1.1.1

package/lib/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/lib/switch/Switch.vue.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const vue = require("vue");
+const editorPending = require("../_components/field-presentation/editor-pending.js");
 const useActionGuard = require("../_hooks/use-action-guard.js");
 const errorDescription = require("../form/error-description.js");
 const components = require("../utils/components.js");
@@ -22,6 +23,16 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const current = vue.computed(() => props2.modelValue === void 0 ? internal.value : props2.modelValue);
     const checked = vue.computed(() => current.value === props2.checkedValue);
     const pending = vue.ref(false);
+    const editorPending$1 = vue.inject(editorPending.fieldEditorControlPending, void 0);
+    vue.watch(
+      pending,
+      (value) => {
+        if (editorPending$1) {
+          editorPending$1.value = value;
+        }
+      },
+      { flush: "sync" }
+    );
     const busy = vue.computed(() => props2.loading || pending.value);
     const rippleKey = vue.ref(0);
     let active = true;

package/lib/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/lib/tab-bar/TabBar.vue.js

@@ -5,7 +5,7 @@ const sharedVue = require("@maple-design/shared-vue");
 const useVue = require("@maple-design/use-vue");
 const PendingFeedback_vue_vue_type_script_setup_true_lang = require("../_components/pending-feedback/PendingFeedback.vue.js");
 const useActionGuard = require("../_hooks/use-action-guard.js");
-const button_index = require("../button/index.js");
+const base = require("../button/base.js");
 const components = require("../utils/components.js");
 const elements = require("../utils/elements.js");
 const resizeObserver = require("../utils/resize-observer.js");
@@ -226,7 +226,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         }, _ctx.$attrs), [
           vue.createVNode(PendingFeedback_vue_vue_type_script_setup_true_lang.default, { loading: busy.value }, null, 8, ["loading"]),
           vue.renderSlot(_ctx.$slots, "default"),
-          _ctx.$slots.fab ? (vue.openBlock(), vue.createBlock(vue.unref(button_index.Button), vue.mergeProps({
+          _ctx.$slots.fab ? (vue.openBlock(), vue.createBlock(vue.unref(base.default), vue.mergeProps({
             key: 0,
             class: vue.unref(classes)(vue.unref(n)("fab"), [vue.unref(length) % 2, vue.unref(n)("--fab-right"), vue.unref(n)("--fab-center")]),
             "mp-tab-bar__fab": ""

package/lib/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/lib/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/lib/tabs/use-tabs-configuration.js

@@ -1,15 +1,14 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const vue = require("vue");
-require("../locale/index.js");
 const provide = require("../locale-provider/provide.js");
-const state = require("../locale/state.js");
+const miscText = require("../locale/misc-text.js");
 function useTabsConfiguration(size) {
   return { size: vue.computed(() => size.value ?? "md") };
 }
 function useTabsLocale() {
   const { t: localize } = provide.injectLocaleProvider();
-  const get = (key, fallback) => localize?.(key) ?? state.t(key) ?? fallback;
+  const get = (key, fallback) => localize?.(key) ?? miscText.miscText(key) ?? fallback;
   return vue.computed(() => ({
     close: get("tabs.close", "Close"),
     add: get("tabs.add", "Add tab"),

package/lib/themes/alps-light/index.js

@@ -8,7 +8,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)",
@@ -45,29 +44,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)",
@@ -200,9 +199,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)",
@@ -211,7 +210,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/lib/themes/create-brand-dark.js

@@ -176,6 +176,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;
 }
 exports.createBrandDark = createBrandDark;

package/lib/themes/dark/breadcrumb-item.js

@@ -2,7 +2,7 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 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/lib/themes/dark/cascader.js

@@ -3,7 +3,7 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 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)"
 };
 exports.default = cascader;

package/lib/themes/dark/index.js

@@ -68,9 +68,9 @@ const upload = require("./upload.js");
 const watermark = require("./watermark.js");
 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/lib/themes/firefly-light/index.js

@@ -8,7 +8,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)",
@@ -46,17 +45,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",
@@ -74,10 +73,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)",
@@ -88,9 +87,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)",
@@ -225,9 +224,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)",
@@ -237,7 +236,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/lib/themes/index.js

@@ -11,9 +11,9 @@ const toRem = require("./toRem.js");
 const toViewport = require("./toViewport.js");
 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/lib/themes/maple-light/index.js

@@ -4,9 +4,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/lib/time/presentation/TimeFieldPanel.vue.js

@@ -2,7 +2,7 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const vue = require("vue");
 const editorActions = require("../../_components/field-presentation/editor-actions.js");
-const button_index = require("../../button/index.js");
+const base = require("../../button/base.js");
 const components = require("../../utils/components.js");
 const _hoisted_1 = { class: "mp-time-field-panel__body" };
 const _hoisted_2 = {
@@ -33,7 +33,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         ]),
         !_ctx.disableConfirm || auxiliaryActions.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
           auxiliaryActions.value ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(auxiliaryActions.value), { key: 0 })) : vue.createCommentVNode("", true),
-          !_ctx.disableConfirm ? (vue.openBlock(), vue.createBlock(vue.unref(button_index.Button), {
+          !_ctx.disableConfirm ? (vue.openBlock(), vue.createBlock(vue.unref(base.default), {
             key: 1,
             class: vue.normalizeClass(n("confirm-button")),
             status: "primary",

package/lib/time/presentation/TimePanelContent2.vue.js

@@ -3,17 +3,16 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 const vue = require("vue");
 const editorActions = require("../../_components/field-presentation/editor-actions.js");
 const temporalKeyboard = require("../../_utils/temporal-keyboard.js");
-const button_index = require("../../button/index.js");
-require("../../locale/index.js");
+const base$1 = require("../../button/base.js");
 const provide = require("../../locale-provider/provide.js");
-const picker_index = require("../../picker/index.js");
+const temporalText = require("../../locale/temporal-text.js");
+const base = require("../../picker/base.js");
 const components = require("../../utils/components.js");
 const pickerColumns = require("../picker-columns.js");
-const state = require("../../locale/state.js");
 const { n, classes } = components.createNamespace("time-picker");
 const _sfc_main = vue.defineComponent({
   name: components.createNamespace("time-panel-content").name,
-  components: { MpButton: button_index.Button, MpPicker: picker_index._PickerComponent },
+  components: { MpButton: base$1.default, MpPicker: base.default },
   props: {
     options: { type: Object, required: true },
     state: { type: Object, required: true }
@@ -22,7 +21,7 @@ const _sfc_main = vue.defineComponent({
     const { t: pt } = provide.injectLocaleProvider();
     const hostActions = vue.inject(editorActions.editorAuxiliaryActions, void 0);
     const nowAction = () => props.options.showNowButton ? vue.h(
-      button_index.Button,
+      base$1.default,
       {
         variant: "text",
         disabled: props.state.nowDisabled.value,
@@ -30,7 +29,7 @@ const _sfc_main = vue.defineComponent({
           props.state.selectNow();
         }
       },
-      () => (pt ?? state.t)("datePickerNowButtonText")
+      () => (pt ?? temporalText.temporalText)("datePickerNowButtonText")
     ) : void 0;
     if (hostActions) {
       hostActions.value = nowAction;
@@ -46,11 +45,11 @@ const _sfc_main = vue.defineComponent({
       nowAction,
       ...vue.toRefs(props.options),
       ...props.state,
-      columnLabels: vue.computed(() => pickerColumns.getTimePickerColumnLabels(props.options, (key) => (pt ?? state.t)(key))),
+      columnLabels: vue.computed(() => pickerColumns.getTimePickerColumnLabels(props.options, (key) => (pt ?? temporalText.temporalText)(key))),
       n,
       classes,
       formatElevation: components.formatElevation,
-      t: state.t,
+      t: temporalText.temporalText,
       pt
     };
   }

package/lib/time/presentation/use-field-locale.js

@@ -1,16 +1,15 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-require("../../locale/index.js");
 const provide = require("../../locale-provider/provide.js");
-const state = require("../../locale/state.js");
+const temporalText = require("../../locale/temporal-text.js");
 function useTimeFieldLocale() {
   const { t: provided } = provide.injectLocaleProvider();
   return {
     placeholder: (_range) => "",
-    nextDay: () => (provided ?? state.t)("timeRangeNextDay"),
-    title: () => (provided ?? state.t)("pickerTitle"),
-    cancel: () => (provided ?? state.t)("pickerCancelButtonText"),
-    confirm: () => (provided ?? state.t)("pickerConfirmButtonText")
+    nextDay: () => (provided ?? temporalText.temporalText)("timeRangeNextDay"),
+    title: () => (provided ?? temporalText.temporalText)("pickerTitle"),
+    cancel: () => (provided ?? temporalText.temporalText)("pickerCancelButtonText"),
+    confirm: () => (provided ?? temporalText.temporalText)("pickerConfirmButtonText")
   };
 }
 exports.useTimeFieldLocale = useTimeFieldLocale;

package/lib/time/props.js

@@ -4,13 +4,13 @@ const props$2 = require("../_components/field-presentation/props.js");
 const fields = require("../_components/picker-field/fields.js");
 const openTrigger = require("../_components/picker-field/open-trigger.js");
 require("../field-decorator/index.js");
-const props$1 = require("../field-decorator/props.js");
 const components = require("../utils/components.js");
 const emptyValue = require("../utils/empty-value.js");
 const popupContainer = require("../utils/popup-container.js");
 const disabledProps = require("./disabled-props.js");
 const pickerProps = require("./picker-props.js");
 const stepProp = require("./step-prop.js");
+const props$1 = require("../field-decorator/props.js");
 const props = {
   ...props$1.fieldLoadingProps,
   openTriggerTarget: openTrigger.openTriggerTargetProp,

package/lib/time-range/presentation/TimePanelContent2.vue.js

@@ -3,24 +3,23 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 const vue = require("vue");
 const editorActions = require("../../_components/field-presentation/editor-actions.js");
 const temporalKeyboard = require("../../_utils/temporal-keyboard.js");
-const button_index = require("../../button/index.js");
-require("../../locale/index.js");
+const base$1 = require("../../button/base.js");
 const provide = require("../../locale-provider/provide.js");
-const picker_index = require("../../picker/index.js");
+const temporalText = require("../../locale/temporal-text.js");
+const base = require("../../picker/base.js");
 const pickerColumns = require("../../time/picker-columns.js");
 const components = require("../../utils/components.js");
-const state = require("../../locale/state.js");
 const { n, classes } = components.createNamespace("time-range-picker");
 const _sfc_main = vue.defineComponent({
   name: components.createNamespace("time-range-panel-content").name,
-  components: { MpButton: button_index.Button, MpPicker: picker_index._PickerComponent },
+  components: { MpButton: base$1.default, MpPicker: base.default },
   props: {
     options: { type: Object, required: true },
     state: { type: Object, required: true }
   },
   setup(props) {
     const { t: pt } = provide.injectLocaleProvider();
-    const translate = (key) => (pt ? pt : state.t)(key);
+    const translate = (key) => (pt ? pt : temporalText.temporalText)(key);
     const columnLabels = vue.computed(() => {
       const labels = pickerColumns.getTimePickerColumnLabels(props.options, translate);
       return [...labels, ...labels];
@@ -30,7 +29,7 @@ const _sfc_main = vue.defineComponent({
       () => props.state.orderInvalid.value ? translate("timeRangeOrderError") : void 0
     );
     const nowAction = () => props.options.showNowButton ? vue.h(
-      button_index.Button,
+      base$1.default,
       {
         variant: "text",
         disabled: props.state.nowDisabled.value,

package/lib/time-range/props.js

@@ -5,12 +5,12 @@ const fields = require("../_components/picker-field/fields.js");
 const openTrigger = require("../_components/picker-field/open-trigger.js");
 const props$3 = require("../_components/picker-field/props.js");
 require("../field-decorator/index.js");
-const props$1 = require("../field-decorator/props.js");
 const disabledProps = require("../time/disabled-props.js");
 const stepProp = require("../time/step-prop.js");
 const components = require("../utils/components.js");
 const emptyValue = require("../utils/empty-value.js");
 const popupContainer = require("../utils/popup-container.js");
+const props$1 = require("../field-decorator/props.js");
 const props = {
   ...props$1.fieldLoadingProps,
   inputAttrs: props$3.rangeInputAttrsProp,

package/lib/trigger/popup-move-focus.js

@@ -30,21 +30,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 };
 }
@@ -53,7 +53,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;
   }
@@ -120,8 +120,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) => {