@maple-design/ui-vue 1.1.0 → 1.1.1

package/lib/_components/field-presentation/EditorPanel.vue.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const vue = require("vue");
-const button_index = require("../../button/index.js");
+const base = require("../../button/base.js");
 const provide = require("../../locale-provider/provide.js");
 const components = require("../../utils/components.js");
 const context = require("./context.js");
@@ -128,7 +128,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
           }, [
             auxiliaryActions.value ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(auxiliaryActions.value), { key: 0 })) : vue.createCommentVNode("", true)
           ], 2),
-          _ctx.clearable ? (vue.openBlock(), vue.createBlock(vue.unref(button_index.Button), {
+          _ctx.clearable ? (vue.openBlock(), vue.createBlock(vue.unref(base.default), {
             key: 0,
             variant: "text",
             disabled: _ctx.disabled || _ctx.pending,
@@ -139,7 +139,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
             ]),
             _: 1
           }, 8, ["disabled"])) : vue.createCommentVNode("", true),
-          _ctx.needConfirm ? (vue.openBlock(), vue.createBlock(vue.unref(button_index.Button), {
+          _ctx.needConfirm ? (vue.openBlock(), vue.createBlock(vue.unref(base.default), {
             key: 1,
             status: "primary",
             loading: _ctx.pending,

package/lib/_components/field-presentation/editor-pending.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const fieldEditorControlPending = Symbol("field-editor-control-pending");
+exports.fieldEditorControlPending = fieldEditorControlPending;

package/lib/_components/field-presentation/with-field-presentation.js

@@ -6,6 +6,7 @@ const context$1 = require("../../input/context.js");
 const emptyValue = require("../../utils/empty-value.js");
 const useSelectionSession = require("../selection-field/use-selection-session.js");
 const context = require("./context.js");
+const editorPending = require("./editor-pending.js");
 const FieldPresentation_vue_vue_type_script_setup_true_lang = require("./FieldPresentation.vue.js");
 const formBridge = require("./form-bridge.js");
 function cloneValue(value, seen = /* @__PURE__ */ new WeakMap()) {
@@ -25,7 +26,7 @@ function cloneValue(value, seen = /* @__PURE__ */ new WeakMap()) {
   }
   return result;
 }
-function sameFieldValue(left, right, seen = /* @__PURE__ */ new WeakMap()) {
+function sameFieldValue(left, right, seen = /* @__PURE__ */ new WeakMap(), reverse = /* @__PURE__ */ new WeakMap()) {
   if (Object.is(left, right)) {
     return true;
   }
@@ -41,12 +42,18 @@ function sameFieldValue(left, right, seen = /* @__PURE__ */ new WeakMap()) {
   if (!Array.isArray(left) && Object.getPrototypeOf(left) !== Object.prototype) {
     return false;
   }
-  if (seen.get(left) === right) {
-    return true;
+  if (seen.has(left) || reverse.has(right)) {
+    return seen.get(left) === right && reverse.get(right) === left;
   }
   seen.set(left, right);
+  reverse.set(right, left);
   const keys = Object.keys(left);
-  return keys.length === Object.keys(right).length && keys.every((key) => Object.prototype.hasOwnProperty.call(right, key) && sameFieldValue(left[key], right[key], seen));
+  const result = keys.length === Object.keys(right).length && keys.every(
+    (key) => Object.prototype.hasOwnProperty.call(right, key) && sameFieldValue(left[key], right[key], seen, reverse)
+  );
+  seen.delete(left);
+  reverse.delete(right);
+  return result;
 }
 function formatFieldValue(value) {
   if (value == null || value === "") {
@@ -122,6 +129,8 @@ function withFieldPresentation(Base, adapter = {}) {
         readonly: vue.computed(() => props.readonly ?? inputGroup?.readonly.value),
         size: vue.computed(() => props.size ?? inputGroup?.size.value)
       });
+      const editorControlPending = vue.ref(false);
+      vue.provide(editorPending.fieldEditorControlPending, editorControlPending);
       const inner = vue.shallowRef();
       const host = vue.ref();
       const localValue = vue.shallowRef(props.defaultValue ?? props.modelValue);
@@ -247,9 +256,26 @@ function withFieldPresentation(Base, adapter = {}) {
           }
         }
       });
+      const needConfirm = vue.computed(
+        () => !adapter.selectionConfirmation || (props.needConfirm ?? Boolean(props.multiple))
+      );
+      const showConfirm = vue.computed(
+        () => needConfirm.value || adapter.selectionConfirmation === "select" && !sameFieldValue(session.draft.value, value.value)
+      );
+      const completeSelection = () => {
+        const candidate = cloneValue(session.draft.value);
+        void Promise.resolve(session.commit()).then((accepted) => {
+          if (!accepted && open.value && !session.pending.value && sameFieldValue(session.draft.value, candidate)) {
+            session.update(value.value);
+          }
+        });
+      };
       const updateDraft = (next) => {
         if (open.value && !blocked.value) {
           session.update(next);
+          if (adapter.selectionConfirmation === "update" && !needConfirm.value) {
+            completeSelection();
+          }
         }
       };
       const clearDraft = () => {
@@ -258,6 +284,9 @@ function withFieldPresentation(Base, adapter = {}) {
         }
         const fallback = "uncheckedValue" in props ? props.uncheckedValue : typeof props.defaultValue === "boolean" ? false : Array.isArray(value.value) ? [] : props.defaultValue;
         session.update(emptyValue.resolveEmptyValue(props, fallback));
+        if (!needConfirm.value) {
+          void session.commit();
+        }
       };
       const clearReference = async () => {
         if (blocked.value || selectionPaused.value || session.pending.value) {
@@ -275,8 +304,14 @@ function withFieldPresentation(Base, adapter = {}) {
         state.item?.resetValidation?.();
       };
       const confirm = async (event) => {
+        if (editorControlPending.value) {
+          return false;
+        }
         inner.value?.blur?.();
         await vue.nextTick();
+        if (editorControlPending.value) {
+          return false;
+        }
         return session.commit(event);
       };
       vue.watch(
@@ -486,6 +521,9 @@ function withFieldPresentation(Base, adapter = {}) {
             (...args) => {
               if (event === "update:modelValue") {
                 updateDraft(args[0]);
+              } else if (event === "select" && adapter.selectionConfirmation === "select" && !needConfirm.value) {
+                emit(event, ...args);
+                void session.commit();
               } else if (adapter.commitEvents?.[event]) {
                 if (open.value && !blocked.value && !session.pending.value) {
                   commitNotifications.set(event, args);
@@ -546,12 +584,12 @@ function withFieldPresentation(Base, adapter = {}) {
             open: open.value,
             disabled: form.mergedDisabled.value,
             readonly: form.mergedReadonly.value,
-            needConfirm: true,
+            needConfirm: showConfirm.value,
             clearable: props.clearable && !selectionPaused.value,
             onClear: clearDraft,
             loading: Boolean(props.loading || adapter.pauseSelectionWhileLoading && source?.loading.value),
             pending: session.pending.value,
-            confirmDisabled: selectionPaused.value || !validDraft(session.draft.value),
+            confirmDisabled: editorControlPending.value || selectionPaused.value || !validDraft(session.draft.value),
             error: session.error.value || state.item?.message?.value,
             onOpen: setOpen,
             onEditorReady,
@@ -588,7 +626,12 @@ function withFieldPresentation(Base, adapter = {}) {
               attrs,
               value: session.value.value,
               update: updateDraft,
-              emit,
+              emit: (name, ...args) => {
+                emit(name, ...args);
+                if (name === "select" && adapter.selectionConfirmation === "select" && !needConfirm.value) {
+                  void session.commit();
+                }
+              },
               slots,
               disabled: form.mergedDisabled.value || session.pending.value,
               readonly: form.mergedReadonly.value

package/lib/_components/picker-field/PickerField.vue.js

@@ -7,14 +7,12 @@ const props$1 = require("../../field-decorator/props.js");
 const errorDescription = require("../../form/error-description.js");
 const labelContext = require("../../form/label-context.js");
 const nativeAttrs = require("../../input/native-attrs.js");
-const provide = require("../../locale-provider/provide.js");
-const state = require("../../locale/state.js");
-const zhCN = require("../../locale/zh-CN.js");
 const components = require("../../utils/components.js");
 const texts = require("../field-presentation/texts.js");
 const openTrigger = require("./open-trigger.js");
 const props = require("./props.js");
 const rangeFieldContext = require("./range-field-context.js");
+const rangeLabels = require("./range-labels.js");
 const _hoisted_1 = ["role", "aria-labelledby"];
 const _hoisted_2 = ["id"];
 const _hoisted_3 = ["id", "value", "placeholder", "disabled", "readonly", "aria-expanded", "aria-invalid", "aria-describedby", "aria-haspopup", "onFocus", "onClick", "onBlur", "onInput", "onCompositionend", "onKeydown"];
@@ -79,15 +77,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     });
     const explicitRangeLabel = vue.computed(() => props2.range && formLabel?.value?.target ? groupLabelId.value : void 0);
     const endpointLabelId = (index) => `${generatedId}-range-endpoint-${index}`;
-    const { t: translateEndpoint } = provide.injectLocaleProvider();
-    const endpointLabels = vue.computed(() => {
-      const keys = ["fieldPresentation.rangeStart", "fieldPresentation.rangeEnd"];
-      const legacyKeys = props2.kind === "time" ? ["timeRangeStart", "timeRangeEnd"] : ["dateRangeStart", "dateRangeEnd"];
-      const fallback = [zhCN.defaultFieldRangeStart, zhCN.defaultFieldRangeEnd];
-      return keys.map(
-        (key, index) => translateEndpoint?.(key) ?? translateEndpoint?.(legacyKeys[index]) ?? state.t(key) ?? state.t(legacyKeys[index]) ?? fallback[index]
-      );
-    });
+    const endpointLabels = rangeLabels.usePickerRangeLabels(() => props2.kind);
     const inputs = [];
     const activeIndex = rangeFieldContext.useRangeFieldIndex(() => props2.disabledParts);
     const active = vue.ref(false);
@@ -262,7 +252,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                     key: 2,
                     id: endpointLabelId(index),
                     hidden: ""
-                  }, vue.toDisplayString(endpointLabels.value[index]), 9, _hoisted_2)) : vue.createCommentVNode("", true),
+                  }, vue.toDisplayString(vue.unref(endpointLabels)[index]), 9, _hoisted_2)) : vue.createCommentVNode("", true),
                   vue.createElementVNode("input", vue.mergeProps({ ref_for: true }, inputAttributes(index), {
                     id: props2.inputAttrs?.[index]?.id ?? (index === 0 ? controlId.value : controlId.value + "-" + index),
                     ref_for: true,

package/lib/_components/picker-field/TemporalCurrent.vue.js

@@ -2,10 +2,9 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const vue = require("vue");
 const iconsVue = require("@maple-design/icons-vue");
-require("../../locale/index.js");
 const provide = require("../../locale-provider/provide.js");
+const dateText = require("../../locale/date-text.js");
 const components = require("../../utils/components.js");
-const state = require("../../locale/state.js");
 const _hoisted_1 = ["aria-label", "title", "aria-pressed"];
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   ...{ name: components.createNamespace("temporal-current").name },
@@ -25,7 +24,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const { n } = components.createNamespace(props.prefix);
     const { n: c } = components.createNamespace("temporal-current");
     const { t: pt } = provide.injectLocaleProvider();
-    const toggleLabel = vue.computed(() => (pt ?? state.t)(props.view === "date" ? "timePickerHint" : "datePickerHint"));
+    const toggleLabel = vue.computed(() => (pt ?? dateText.dateText)(props.view === "date" ? "timePickerHint" : "datePickerHint"));
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", {
         class: vue.normalizeClass([vue.unref(n)("current"), vue.unref(c)()]),

package/lib/_components/picker-field/range-labels.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const vue = require("vue");
+const provide = require("../../locale-provider/provide.js");
+const state = require("../../locale/state.js");
+const zhCN = require("../../locale/zh-CN.js");
+function usePickerRangeLabels(kind) {
+  const { t: translateEndpoint } = provide.injectLocaleProvider();
+  return vue.computed(() => {
+    const keys = ["fieldPresentation.rangeStart", "fieldPresentation.rangeEnd"];
+    const legacyKeys = kind() === "time" ? ["timeRangeStart", "timeRangeEnd"] : ["dateRangeStart", "dateRangeEnd"];
+    const fallback = [zhCN.defaultFieldRangeStart, zhCN.defaultFieldRangeEnd];
+    return keys.map(
+      (key, index) => translateEndpoint?.(key) ?? translateEndpoint?.(legacyKeys[index]) ?? state.t(key) ?? state.t(legacyKeys[index]) ?? fallback[index]
+    );
+  });
+}
+exports.usePickerRangeLabels = usePickerRangeLabels;

package/lib/_components/selected-options/style/index.css

@@ -72,7 +72,7 @@
 .mp-selected-options__toggle:focus-visible,
 .mp-selected-options__clear:focus-visible,
 .mp-selected-options__remove:focus-visible {
-  outline: 2px solid var(--mp-sys-color-content-brand);
+  outline: 2px solid var(--mp-sys-color-action-primary);
   outline-offset: 1px;
 }
 .mp-selected-options__toggle {
@@ -208,10 +208,13 @@
   white-space: normal;
   overflow-wrap: anywhere;
 }
-.mp-selection-editor .mp-select-option.mp-select-option-selected,
-.mp-selection-editor .mp-select-option.mp-select-option-selected:hover {
-  background: var(--mp-selection-editor-selected-background);
-  color: var(--mp-selection-editor-accent);
+.mp-selection-editor .mp-select-option.mp-select-option-selected:not(.mp-select-option-disabled) {
+  background: var(--mp-select-popup-option-bg-selected);
+  color: var(--mp-select-popup-option-text-color-selected);
+}
+.mp-selection-editor .mp-select-option.mp-select-option-selected:not(.mp-select-option-disabled):hover,
+.mp-selection-editor .mp-select-option.mp-select-option-selected:not(.mp-select-option-disabled).mp-select-option-active {
+  background: var(--mp-select-popup-option-bg-selected-hover);
 }
 .mp-selection-editor .mp-select-option-disabled {
   opacity: var(--mp-selected-options-disabled-opacity);
@@ -239,9 +242,13 @@
   white-space: normal;
   overflow-wrap: anywhere;
 }
-.mp-selection-editor .mp-cascader-option > span:first-child {
-  order: 2;
-  margin-inline-start: var(--mp-selection-editor-gap);
+.mp-selection-editor .mp-cascader-option .mp-cascader-option-checkbox {
+  order: -1;
+  flex: none;
+  margin-inline-end: var(--mp-selection-editor-gap);
+}
+.mp-selection-editor .mp-cascader-option .mp-cascader-option-checkbox .mp-checkbox {
+  margin-inline-end: 0;
 }
 .mp-selection-editor .mp-selection-indicator {
   margin: 0;
@@ -249,11 +256,13 @@
   height: var(--mp-selection-editor-check-size);
   border-radius: var(--mp-selection-editor-radius);
 }
-.mp-selection-editor .mp-cascader-option.mp-cascader-option-selected,
-.mp-selection-editor .mp-cascader-option.mp-cascader-option-selected:hover,
-.mp-selection-editor .mp-cascader-option-active {
-  background: var(--mp-selection-editor-selected-background);
-  color: var(--mp-selection-editor-accent);
+.mp-selection-editor .mp-cascader-option.mp-cascader-option-selected:not(.mp-cascader-option-disabled) {
+  background: var(--mp-cascader-item-bg-active);
+  color: var(--mp-cascader-item-text-color-active);
+}
+.mp-selection-editor .mp-cascader-option.mp-cascader-option-selected:not(.mp-cascader-option-disabled):hover,
+.mp-selection-editor .mp-cascader-option.mp-cascader-option-selected:not(.mp-cascader-option-disabled).mp-cascader-option-active {
+  background: var(--mp-cascader-item-bg-hover);
 }
 .mp-selection-editor--mobile {
   width: 100%;
@@ -268,8 +277,6 @@
 .mp-selection-editor--mobile .mp-select-dropdown .mp-select-option,
 .mp-selection-editor--mobile .mp-cascader-option {
   min-height: var(--mp-selection-editor-touch-height);
-  border-radius: 0;
-  border-bottom: 1px solid var(--mp-selection-editor-border);
   font-size: var(--mp-selection-editor-touch-font-size);
 }
 .mp-selection-editor--mobile .mp-selection-indicator {
@@ -394,3 +401,14 @@
 .mp-selection-editor--mobile .mp-tree-node {
   min-height: var(--mp-selection-editor-touch-height);
 }
+.mp-selection-editor--select .mp-select-dropdown .mp-select-dropdown-list-wrapper,
+.mp-selection-editor--auto-complete .mp-select-dropdown .mp-select-dropdown-list-wrapper,
+.mp-selection-editor--people-select .mp-select-dropdown .mp-select-dropdown-list-wrapper {
+  padding-inline: var(--mp-select-popup-padding-horizontal);
+}
+.mp-selection-editor--select.mp-selection-editor--mobile .mp-select-dropdown .mp-select-option,
+.mp-selection-editor--auto-complete.mp-selection-editor--mobile .mp-select-dropdown .mp-select-option,
+.mp-selection-editor--people-select.mp-selection-editor--mobile .mp-select-dropdown .mp-select-option {
+  border-radius: var(--mp-select-popup-option-border-radius);
+  border-bottom: 0;
+}

package/lib/_components/selection-field/use-selection-session.js

@@ -55,6 +55,7 @@ function useSelectionSession(options) {
     if (options.blocked() || settled.value || pending.value || !options.open.value || options.valid?.(draft.value) === false) {
       return false;
     }
+    error.value = "";
     const next = options.clone(draft.value);
     const run = ++epoch;
     const finish = (allowed) => {

package/lib/_components/virtual-list-v2/VirtualList2.vue.js

@@ -109,6 +109,8 @@ const _sfc_main = vue.defineComponent({
       await vue.nextTick();
       updateViewport();
     });
+    let retainedInlineOffset;
+    let retainedScrollTop;
     let scrollRequest = 0;
     let commandedScroll;
     let mounted = false;
@@ -119,12 +121,31 @@ const _sfc_main = vue.defineComponent({
     vue.onMounted(() => {
       mounted = true;
     });
-    vue.onActivated(() => {
-      if (!disposed) {
-        active = true;
+    vue.onActivated(async () => {
+      if (disposed) {
+        return;
+      }
+      active = true;
+      const element = containerRef.value;
+      const request = scrollRequest;
+      const retained = retainedScrollTop;
+      const retainedInline = retainedInlineOffset;
+      retainedScrollTop = void 0;
+      retainedInlineOffset = void 0;
+      if (element && retainedInline !== void 0 && isCurrent(request, element) && direction.inlineScrollLeft(element) === 0) {
+        direction.setInlineScrollLeft(element, retainedInline);
+      }
+      await vue.nextTick();
+      if (element && retained !== void 0 && isCurrent(request, element) && element.scrollTop === 0) {
+        element.scrollTop = retained;
+        if (virtualEnabled.value) {
+          setStart(getStartByScroll(element.scrollTop));
+        }
       }
     });
     vue.onDeactivated(() => {
+      retainedScrollTop = scrollOffset.value;
+      retainedInlineOffset = readingOffset;
       active = false;
       scrollRequest++;
       commandedScroll = void 0;
@@ -257,6 +278,7 @@ const _sfc_main = vue.defineComponent({
       if (is.isNumber(options)) {
         if (Number.isFinite(options)) {
           element.scrollTop = Math.max(0, options);
+          scrollOffset.value = element.scrollTop;
           if (virtualEnabled.value) {
             setStart(getStartByScroll(element.scrollTop));
           }

package/lib/action-sheet/ActionSheet2.vue.js

@@ -1,15 +1,14 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const vue = require("vue");
-require("../locale/index.js");
 const provide = require("../locale-provider/provide.js");
+const miscText = require("../locale/misc-text.js");
 require("../popup/index.js");
 const ripple_index = require("../ripple/index.js");
 const components = require("../utils/components.js");
 const ActionItem = require("./ActionItem.vue.js");
 const props = require("./props.js");
 const Popup_vue_vue_type_script_setup_true_lang = require("../popup/Popup.vue.js");
-const state = require("../locale/state.js");
 const { name, n, classes } = components.createNamespace("action-sheet");
 const _sfc_main = vue.defineComponent({
   name,
@@ -65,7 +64,7 @@ const _sfc_main = vue.defineComponent({
       dialogLabelledby,
       contentAttrs,
       pt,
-      t: state.t,
+      t: miscText.miscText,
       n,
       classes,
       handleSelect

package/lib/auto-complete/auto-complete.js

@@ -6,7 +6,7 @@ const context = require("../_components/selected-options/context.js");
 const VirtualList = require("../_components/virtual-list-v2/VirtualList.vue.js");
 const useOptionRequest = require("../_hooks/use-option-request.js");
 const is = require("../_utils/is.js");
-const input_index = require("../input/index.js");
+const base = require("../input/base.js");
 const useInputForm = require("../input/use-input-form.js");
 const useSelect = require("../select/hooks/use-select.js");
 const Optgroup = require("../select/Optgroup.vue.js");
@@ -357,7 +357,7 @@ const Base = /* @__PURE__ */ vue.defineComponent({
       "aria-activedescendant": computedOpen.value && !loading.value && activeKey.value && enabledOptionKeys.value.includes(activeKey.value) && optionRefs.value[activeKey.value] ? getOptionId(activeKey.value) : void 0,
       autocomplete: "off"
     }));
-    const renderInput = (restAttrs) => vue.createVNode(input_index.Input, vue.mergeProps({
+    const renderInput = (restAttrs) => vue.createVNode(base.default, vue.mergeProps({
       "loading": loading.value,
       "loadingMode": props$1.loadingMode
     }, restAttrs, {

package/lib/auto-complete/presentation.js

@@ -6,6 +6,7 @@ const withFieldPresentation = require("../_components/field-presentation/with-fi
 const SelectionEditor_vue_vue_type_script_setup_true_lang = require("../_components/selected-options/SelectionEditor.vue.js");
 const autoComplete = require("./auto-complete.js");
 const _AutoComplete = withFieldPresentation.withFieldPresentation(autoComplete.default, {
+  selectionConfirmation: "select",
   methods: ["focus", "blur", "refresh"],
   defaultPresentation: context.defaultSelectionPresentation,
   intent: "input",

package/lib/auto-complete/props.js

@@ -7,6 +7,8 @@ const emptyValue = require("../utils/empty-value.js");
 const popupContainer = require("../utils/popup-container.js");
 const autoCompleteProps = {
   ...props$2.fieldLoadingProps,
+  /** 弹出编辑是否需要确认；默认选中候选项即提交，自定义文本通过确认提交。 */
+  needConfirm: { type: Boolean, default: void 0 },
   searchDelay: { type: Number, default: 250 },
   /** 清空动作产生的模型值；省略保留原默认值。 */
   ...props$1.fieldPresentationProps,

package/lib/auto-complete/style/index.css

@@ -54,11 +54,16 @@
   color: var(--mp-auto-complete-option-text-color-selected);
   background-color: var(--mp-auto-complete-option-bg-selected);
 }
-.mp-select-dropdown:where(.mp-auto-complete__dropdown) .mp-select-option-active,
-.mp-select-dropdown:where(.mp-auto-complete__dropdown) .mp-select-option:not(.mp-select-dropdown:where(.mp-auto-complete__dropdown) .mp-select-option-disabled):hover {
+.mp-select-dropdown:where(.mp-auto-complete__dropdown) .mp-select-option-active:not(.mp-select-option-selected):not(.mp-select-option-disabled),
+.mp-select-dropdown:where(.mp-auto-complete__dropdown) .mp-select-option:not(.mp-select-option-selected):not(.mp-select-option-disabled):hover {
   color: var(--mp-auto-complete-option-text-color-hover);
   background-color: var(--mp-auto-complete-option-bg-hover);
 }
+.mp-select-dropdown:where(.mp-auto-complete__dropdown) .mp-select-option-selected.mp-select-option-active:not(.mp-select-option-disabled),
+.mp-select-dropdown:where(.mp-auto-complete__dropdown) .mp-select-option-selected:not(.mp-select-option-disabled):hover {
+  color: var(--mp-auto-complete-option-text-color-selected);
+  background-color: var(--mp-auto-complete-option-bg-hover);
+}
 .mp-select-dropdown:where(.mp-auto-complete__dropdown) .mp-select-option-disabled {
   color: var(--mp-auto-complete-option-text-color-disabled);
   background-color: var(--mp-auto-complete-option-bg-disabled);

package/lib/back-top/style/index.css

@@ -12,7 +12,7 @@
   --mp-back-top-background: var(--mp-sys-color-surface-raised);
   --mp-back-top-text-color: var(--mp-sys-color-content-brand);
   --mp-back-top-hover-background: var(--mp-sys-color-state-hover);
-  --mp-back-top-focus-color: var(--mp-sys-color-content-brand);
+  --mp-back-top-focus-color: var(--mp-sys-color-action-primary);
   --mp-back-top-focus-width: 2px;
   --mp-back-top-focus-offset: 2px;
   --mp-back-top-z-index: var(--mp-z-index-local-sticky);

package/lib/breadcrumb/style/index.css

@@ -6,7 +6,7 @@
   --mp-breadcrumb-touch-target-size: 44px;
   --mp-breadcrumb-separator-margin: var(--mp-breadcrumb-item-separator-margin);
   --mp-breadcrumb-separator-font-size: var(--mp-breadcrumb-item-separator-font-size);
-  --mp-breadcrumb-item-active-color: rgb(var(--mp-primary-8));
+  --mp-breadcrumb-item-active-color: var(--mp-sys-color-action-primary);
   --mp-breadcrumb-item-inactive-color: var(--mp-color-text-2);
   --mp-breadcrumb-item-separator-margin: 0 var(--mp-breadcrumb-margin-separator-horizontal);
   --mp-breadcrumb-item-separator-font-size: 14px;

package/lib/button/base.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const components = require("../utils/components.js");
+const Button_vue_vue_type_script_setup_true_lang = require("./Button.vue.js");
+const props = require("./props.js");
+const MpButton = components.withPropsDefaultsSetter(Button_vue_vue_type_script_setup_true_lang.default, props.buttonProps);
+exports.default = MpButton;

package/lib/button/index.js

@@ -1,17 +1,17 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const components = require("../utils/components.js");
-const Button_vue_vue_type_script_setup_true_lang = require("./Button.vue.js");
+const base = require("./base.js");
 const ButtonGroup_vue_vue_type_script_setup_true_lang = require("./ButtonGroup.vue.js");
 const groupProps = require("./group-props.js");
 const props = require("./props.js");
 const constants = require("../utils/constants.js");
 const Button = components.withInstall(
-  Button_vue_vue_type_script_setup_true_lang.default,
-  Object.assign(Button_vue_vue_type_script_setup_true_lang.default, {
+  base.default,
+  Object.assign(base.default, {
     Group: ButtonGroup_vue_vue_type_script_setup_true_lang.default
   }),
-  { components: [Button_vue_vue_type_script_setup_true_lang.default, ButtonGroup_vue_vue_type_script_setup_true_lang.default] }
+  { components: [base.default, ButtonGroup_vue_vue_type_script_setup_true_lang.default] }
 );
 components.withPropsDefaultsSetter(Button, props.buttonProps);
 components.withPropsDefaultsSetter(ButtonGroup_vue_vue_type_script_setup_true_lang.default, groupProps.buttonGroupProps);

package/lib/button/style/index.css

@@ -15,7 +15,7 @@
   --mp-button-disabled-color: var(--mp-color-fill-2);
   --mp-button-disabled-solid-text-color: var(--mp-sys-color-content-on-dark);
   --mp-button-disabled-text-color: var(--mp-sys-color-content-disabled);
-  --mp-button-focus-color: var(--mp-sys-color-content-brand);
+  --mp-button-focus-color: var(--mp-sys-color-action-primary);
   --mp-button-info-color: var(--mp-sys-color-status-info);
   --mp-button-info-disabled-color: rgb(var(--mp-blue-3));
   --mp-button-info-foreground-color: var(--mp-sys-color-content-info);