@maple-design/ui-vue 1.1.0 → 1.1.1

package/es/nav-menu/style/index.css

@@ -5,7 +5,7 @@
 :where([data-mp-theme]) {
   --mp-nav-menu-background: var(--mp-sys-color-surface-overlay);
   --mp-nav-menu-color: var(--mp-sys-color-content-primary);
-  --mp-nav-menu-active-color: var(--mp-sys-color-content-brand);
+  --mp-nav-menu-active-color: var(--mp-sys-color-action-primary);
   --mp-nav-menu-disabled-color: var(--mp-color-text-disabled);
   --mp-nav-menu-border-color: var(--mp-sys-color-border-default);
   --mp-nav-menu-height: 48px;

package/es/notice-bar/NoticeBar2.vue.mjs

@@ -3,12 +3,11 @@ import { IconClose } from "@maple-design/icons-vue";
 import { toNumber } from "@maple-design/shared-vue";
 import "../icon/index.mjs";
 import _sfc_main$1 from "../icon/RegisteredIcon.vue.mjs";
-import "../locale/index.mjs";
 import { injectLocaleProvider } from "../locale-provider/provide.mjs";
+import { miscText } from "../locale/misc-text.mjs";
 import { createNamespace } from "../utils/components.mjs";
 import { props } from "./props.mjs";
 import _sfc_main$2 from "../icon/Icon.vue.mjs";
-import { t } from "../locale/state.mjs";
 const { name, n, classes } = createNamespace("notice-bar");
 const _sfc_main = defineComponent({
   name,
@@ -21,7 +20,7 @@ const _sfc_main = defineComponent({
   emits: ["close", "replay"],
   setup(props2, { emit }) {
     const { t: translate } = injectLocaleProvider();
-    const closeLabel = computed(() => String(translate?.("common.close") ?? t("common.close") ?? "Close"));
+    const closeLabel = computed(() => String(translate?.("common.close") ?? miscText("common.close") ?? "Close"));
     const visible = ref(true);
     const contentRef = ref(null);
     const textRef = ref(null);

package/es/number-keyboard/NumberKeyboard2.vue.mjs

@@ -4,15 +4,14 @@ import { toNumber } from "@maple-design/shared-vue";
 import { useVModel } from "@maple-design/use-vue";
 import { useFormErrorDescription } from "../form/error-description.mjs";
 import "../icon/index.mjs";
-import "../locale/index.mjs";
 import { injectLocaleProvider } from "../locale-provider/provide.mjs";
+import { miscText } from "../locale/misc-text.mjs";
 import "../popup/index.mjs";
 import { Ripple } from "../ripple/index.mjs";
 import { createNamespace } from "../utils/components.mjs";
 import { props } from "./props.mjs";
 import _sfc_main$1 from "../icon/Icon.vue.mjs";
 import _sfc_main$2 from "../popup/Popup.vue.mjs";
-import { t } from "../locale/state.mjs";
 const { name, n, classes } = createNamespace("number-keyboard");
 function shuffle(items) {
   const result = [...items];
@@ -49,9 +48,9 @@ const _sfc_main = defineComponent({
     const { describe: describeError } = useFormErrorDescription();
     const { t: localT } = injectLocaleProvider();
     const titleId = `number-keyboard-title-${useId()}`;
-    const deleteLabel = computed(() => (localT || t)("numberKeyboard.delete") ?? "Delete");
-    const closeLabel = computed(() => (localT || t)("numberKeyboard.done") ?? "Done");
-    const dialogLabel = () => attrs["aria-label"] ?? (!attrs["aria-labelledby"] && !props2.title ? (localT || t)("numberKeyboard.label") ?? "Number keyboard" : void 0);
+    const deleteLabel = computed(() => (localT || miscText)("numberKeyboard.delete") ?? "Delete");
+    const closeLabel = computed(() => (localT || miscText)("numberKeyboard.done") ?? "Done");
+    const dialogLabel = () => attrs["aria-label"] ?? (!attrs["aria-labelledby"] && !props2.title ? (localT || miscText)("numberKeyboard.label") ?? "Number keyboard" : void 0);
     const dialogLabelledby = () => attrs["aria-labelledby"] ?? (!attrs["aria-label"] && props2.title ? titleId : void 0);
     const contentAttrs = () => Object.fromEntries(Object.entries(attrs).filter(([key]) => key !== "aria-label" && key !== "aria-labelledby"));
     const open = useVModel(props2, "open", { emit, eventName: "update:open", defaultValue: props2.defaultOpen });
@@ -66,7 +65,7 @@ const _sfc_main = defineComponent({
       }
       return props2.overlayClosable ?? true;
     });
-    const closeText = computed(() => props2.closeButtonText ?? t("cascaderPickerDoneButtonText"));
+    const closeText = computed(() => props2.closeButtonText ?? (localT || miscText)("cascaderPickerDoneButtonText"));
     const extraKeys = computed(() => {
       const { extraKey } = props2;
       if (!extraKey || extraKey === "") {

package/es/pagination/PageInput.vue.mjs

@@ -1,5 +1,5 @@
 import { defineComponent, openBlock, createBlock, unref, withKeys, withModifiers } from "vue";
-import { Input } from "../input/index.mjs";
+import MpInput from "../input/base.mjs";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "PageInput",
   props: {
@@ -12,7 +12,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: __emit }) {
     const emit = __emit;
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(Input), {
+      return openBlock(), createBlock(unref(MpInput), {
         "edit-mode": "direct",
         "model-value": _ctx.modelValue,
         size: _ctx.size,

package/es/pagination/style/index.css

@@ -21,11 +21,11 @@
   --mp-pagination-touch-size: 44px;
   --mp-pagination-focus-width: 2px;
   --mp-pagination-focus-offset: 1px;
-  --mp-pagination-focus-color: var(--mp-sys-color-content-brand);
+  --mp-pagination-focus-color: var(--mp-sys-color-action-primary);
   --mp-pagination-item-background: transparent;
   --mp-pagination-hover-background: var(--mp-color-fill-1);
   --mp-pagination-active-background: var(--mp-color-primary-light-1);
-  --mp-pagination-active-color: var(--mp-sys-color-content-brand);
+  --mp-pagination-active-color: var(--mp-sys-color-action-primary);
   --mp-pagination-disabled-color: var(--mp-color-text-disabled);
   --mp-pagination-disabled-background: var(--mp-color-fill-1);
 }

package/es/people-select/PeopleSelect.mjs

@@ -1,4 +1,4 @@
-import { defineComponent, computed, ref, watch, onMounted, onBeforeUnmount, h } from "vue";
+import { defineComponent, computed, ref, onMounted, watch, onBeforeUnmount, h } from "vue";
 import { useAsyncData } from "@maple-design/use-vue";
 import { useFieldPresentation } from "../_components/field-presentation/context.mjs";
 import { usePresentationForm } from "../_components/field-presentation/form-bridge.mjs";
@@ -8,6 +8,7 @@ import { peopleSelectEmits } from "./emits.mjs";
 import _sfc_main from "./Person.vue.mjs";
 import Presented from "./presentation.mjs";
 import { peopleSelectProps } from "./props.mjs";
+import { useSelectedPeople } from "./selection.mjs";
 const _PeopleSelect = defineComponent({
   name: createNamespace("people-select").name,
   inheritAttrs: false,
@@ -32,42 +33,18 @@ const _PeopleSelect = defineComponent({
       immediate: false
     });
     const options = computed(() => Array.isArray(props.options) ? props.options : source.data.value);
-    const selectedCache = ref();
-    watch(
-      [options, value],
-      () => {
-        const person = options.value.find((person2) => person2.value === value.value);
-        if (person) {
-          selectedCache.value = person;
-        } else if (selectedCache.value?.value !== value.value) {
-          selectedCache.value = void 0;
-        }
-      },
-      { immediate: true }
-    );
-    const selected = computed(() => {
-      const current = options.value.find((person) => person.value === value.value);
-      if (current) {
-        return current;
-      }
-      if (typeof props.fallbackOption === "function" && value.value != null) {
-        return props.fallbackOption(value.value);
-      }
-      if (props.fallbackOption !== false && props.label) {
-        return { ...selectedCache.value, value: value.value ?? "", label: props.label };
+    const selection = useSelectedPeople(props, value, options);
+    const selected = computed(
+      () => selection.people.value[0] ?? {
+        value: "",
+        label: props.label || props.defaultText
       }
-      if (props.fallbackOption !== false && selectedCache.value?.value === value.value) {
-        return selectedCache.value;
-      }
-      return {
-        value: value.value ?? "",
-        label: props.fallbackOption === false ? props.defaultText : props.label || value.value || props.defaultText
-      };
-    });
+    );
     const readScope = computed(() => ({
       value: value.value,
-      text: emptyPolicy.isEmpty(value.value) ? emptyPolicy.emptyText.value : selected.value.label,
-      person: selected.value
+      text: emptyPolicy.isEmpty(value.value) ? emptyPolicy.emptyText.value : selection.people.value.map((person) => person.label).join(", "),
+      person: selected.value,
+      ...props.multiple ? { people: selection.people.value } : {}
     }));
     const childOptions = options;
     async function load(query) {
@@ -109,25 +86,29 @@ const _PeopleSelect = defineComponent({
       if (emptyPolicy.isEmpty(value.value)) {
         return emptyPolicy.emptyText.value;
       }
-      const scope = {
-        person: selected.value,
-        disabled: form.mergedDisabled.value || !value.value || !!selected.value.disabled
+      const renderPerson = (person) => {
+        const scope = {
+          person,
+          disabled: form.mergedDisabled.value || !person.value || !!person.disabled
+        };
+        const actions = slots.actions ? slots.actions(scope) : props.renderActions?.(scope);
+        return h(
+          _sfc_main,
+          {
+            key: person.value,
+            person,
+            showAvatar: props.showAvatar,
+            disabled: scope.disabled,
+            showPhone: props.showPhone,
+            showChat: props.showChat,
+            call: props.call,
+            chat: props.chat,
+            onActionError: (error, action) => emit("action-error", error, action)
+          },
+          actions == null ? void 0 : { default: () => actions }
+        );
       };
-      const actions = slots.actions ? slots.actions(scope) : props.renderActions?.(scope);
-      return h(
-        _sfc_main,
-        {
-          person: selected.value,
-          showAvatar: props.showAvatar,
-          disabled: scope.disabled,
-          showPhone: props.showPhone,
-          showChat: props.showChat,
-          call: props.call,
-          chat: props.chat,
-          onActionError: (error, action) => emit("action-error", error, action)
-        },
-        actions == null ? void 0 : { default: () => actions }
-      );
+      return props.multiple ? h("span", { class: "mp-people-select-people" }, selection.people.value.map(renderPerson)) : renderPerson(selected.value);
     };
     const personSlots = () => ({
       ...slots,
@@ -149,8 +130,8 @@ const _PeopleSelect = defineComponent({
         ref: control,
         modelValue: value.value,
         options: childOptions.value,
-        label: selected.value.label,
-        fallbackOption: props.fallbackOption === false ? false : () => selected.value,
+        label: props.multiple ? "" : selected.value.label,
+        fallbackOption: props.fallbackOption === false ? false : selection.resolve,
         loading: props.loading || source.loading.value,
         filterOption: props.filterOption ?? !remote.value,
         "onUpdate:modelValue": update,

package/es/people-select/Person.vue.mjs

@@ -1,5 +1,5 @@
 import { defineComponent, reactive, openBlock, createElementBlock, normalizeClass, unref, createCommentVNode, createElementVNode, toDisplayString, withModifiers, renderSlot, createBlock, withCtx } from "vue";
-import { Button } from "../button/index.mjs";
+import MpButton from "../button/base.mjs";
 import { createNamespace } from "../utils/components.mjs";
 import { usePeopleTexts } from "./use-people-texts.mjs";
 const _hoisted_1 = ["src"];
@@ -61,7 +61,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           }, ["stop"]))
         }, [
           renderSlot(_ctx.$slots, "default", {}, () => [
-            _ctx.showPhone ? (openBlock(), createBlock(unref(Button), {
+            _ctx.showPhone ? (openBlock(), createBlock(unref(MpButton), {
               key: 0,
               size: "xs",
               variant: "text",
@@ -88,7 +88,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               ])),
               _: 1
             }, 8, ["disabled", "aria-label", "loading"])) : createCommentVNode("", true),
-            _ctx.showChat ? (openBlock(), createBlock(unref(Button), {
+            _ctx.showChat ? (openBlock(), createBlock(unref(MpButton), {
               key: 1,
               size: "xs",
               variant: "text",

package/es/people-select/emits.mjs

@@ -1,4 +1,4 @@
-const identity = (value) => value === null || typeof value === "string";
+const identity = (value) => value === null || typeof value === "string" || Array.isArray(value) && value.every((id) => typeof id === "string");
 const peopleSelectEmits = {
   "update:modelValue": identity,
   "update:open": (open) => typeof open === "boolean",

package/es/people-select/people-select.mjs

@@ -3,7 +3,9 @@ import { selectionEditorSurface } from "../_components/selected-options/context.
 import { useFormItem } from "../form/item-provide.mjs";
 import { Select } from "../select/index.mjs";
 import { createNamespace } from "../utils/components.mjs";
+import { peopleSelectEmits } from "./emits.mjs";
 import { peopleSelectProps } from "./props.mjs";
+import { peopleText } from "./selection.mjs";
 const {
   name
 } = createNamespace("people-select");
@@ -11,12 +13,7 @@ const Base = /* @__PURE__ */ defineComponent({
   name,
   inheritAttrs: false,
   props: peopleSelectProps,
-  emits: {
-    "update:modelValue": (value) => value === null || typeof value === "string",
-    change: (value) => value === null || typeof value === "string",
-    clear: () => true,
-    search: (query) => typeof query === "string"
-  },
+  emits: peopleSelectEmits,
   setup(props, {
     emit,
     attrs,
@@ -42,12 +39,12 @@ const Base = /* @__PURE__ */ defineComponent({
       ...option
     })));
     const blocked = () => mergedDisabled.value || mergedReadonly.value || props.loading;
-    const label = computed(() => (Array.isArray(props.options) ? props.options : []).find((option) => option.value === value.value)?.label || props.label || value.value || props.defaultText);
+    const label = computed(() => peopleText(value.value, props));
     const commit = (next) => {
       if (blocked()) {
         return;
       }
-      const text = next === null ? null : typeof next === "string" ? next : "";
+      const text = next === null ? null : props.multiple ? Array.isArray(next) ? next.filter((id) => typeof id === "string") : [] : typeof next === "string" ? next : "";
       if (props.modelValue === void 0) {
         localValue.value = text;
       }
@@ -60,6 +57,7 @@ const Base = /* @__PURE__ */ defineComponent({
       name: props.name
     }, {
       "placeholder": props.placeholder,
+      "multiple": props.multiple,
       "clearable": props.clearable,
       "emptyValue": props.emptyValue,
       "filterable": props.filterable,

package/es/people-select/presentation.mjs

@@ -2,10 +2,12 @@ import { h } from "vue";
 import { withFieldPresentation } from "../_components/field-presentation/with-field-presentation.mjs";
 import _sfc_main from "../_components/selected-options/SelectionEditor.vue.mjs";
 import Base from "./people-select.mjs";
+import { peopleText } from "./selection.mjs";
 const Presented = withFieldPresentation(Base, {
+  selectionConfirmation: "update",
   methods: ["focus", "blur"],
   defaultPresentation: "popup",
-  text: (value, props) => props.options?.find((option) => option.value === value)?.label || props.label || value || props.defaultText || "",
+  text: peopleText,
   editor: ({ props, attrs, value, update, emit, slots, disabled, readonly }) => h(
     _sfc_main,
     { kind: "people-select" },

package/es/people-select/props.mjs

@@ -4,6 +4,8 @@ import { selectProps } from "../select/props.mjs";
 import { emptyValueProp } from "../utils/empty-value.mjs";
 const peopleSelectProps = {
   ...fieldLoadingProps,
+  /** 弹出编辑是否需要确认；未设置时单选即提交，多选保留确认。 */
+  needConfirm: { type: Boolean, default: void 0 },
   ...fieldPresentationProps,
   emptyValue: emptyValueProp(),
   /** Reactive display data for a selected value absent from options. */
@@ -41,9 +43,13 @@ const peopleSelectProps = {
     type: String,
     default: "-"
   },
-  modelValue: { type: String, default: void 0 },
-  /** 非受控初始选中人员标识，仅创建时读取。 */
-  defaultValue: { type: String, default: "" },
+  multiple: selectProps.multiple,
+  modelValue: { type: [String, Array], default: void 0 },
+  /** 非受控初始选中人员 ID 或 ID 数组，仅创建时读取。 */
+  defaultValue: {
+    type: [String, Array],
+    default: (props) => props.multiple ? [] : ""
+  },
   isLabel: {
     type: Boolean,
     default: false

package/es/people-select/selection.mjs

@@ -0,0 +1,64 @@
+import { shallowRef, watch, computed } from "vue";
+function personIds(value) {
+  return Array.isArray(value) ? value : value == null ? [] : [value];
+}
+function useSelectedPeople(props, value, options) {
+  const cache = shallowRef(/* @__PURE__ */ new Map());
+  watch(
+    [options, value],
+    () => {
+      const next = /* @__PURE__ */ new Map();
+      for (const id of personIds(value.value)) {
+        const person = options.value.find((option) => option.value === id) ?? cache.value.get(id);
+        if (person) {
+          next.set(id, person);
+        }
+      }
+      cache.value = next;
+    },
+    { immediate: true, flush: "sync" }
+  );
+  function resolve(id) {
+    const current = options.value.find((option) => option.value === id);
+    if (current) {
+      return current;
+    }
+    if (typeof props.fallbackOption === "function") {
+      return props.fallbackOption(id);
+    }
+    if (props.fallbackOption !== false) {
+      if (!props.multiple && props.label) {
+        return { ...cache.value.get(id), value: id, label: props.label };
+      }
+      const cached = cache.value.get(id);
+      if (cached) {
+        return cached;
+      }
+    }
+    return {
+      value: id,
+      label: props.fallbackOption === false ? props.defaultText ?? "-" : !props.multiple && props.label || id || (props.defaultText ?? "-")
+    };
+  }
+  return {
+    people: computed(() => personIds(value.value).map(resolve)),
+    resolve
+  };
+}
+function peopleText(value, props) {
+  return personIds(value).map((id) => {
+    const option = Array.isArray(props.options) ? props.options.find((person) => person.value === id) : void 0;
+    if (option) {
+      return option.label;
+    }
+    if (typeof props.fallbackOption === "function") {
+      return props.fallbackOption(id).label;
+    }
+    return !props.multiple && props.label || id || (props.defaultText ?? "-");
+  }).join(", ");
+}
+export {
+  peopleText,
+  personIds,
+  useSelectedPeople
+};

package/es/people-select/style/index.css

@@ -30,3 +30,9 @@
   align-items: center;
   justify-content: center;
 }
+.mp-people-select-people {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--mp-people-select-content-gap);
+}

package/es/picker/Picker.vue.mjs

@@ -157,7 +157,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   }, 16);
 }
-const VarPicker = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+const Picker = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {
-  VarPicker as default
+  Picker as default
 };

package/es/picker/Picker2.vue.mjs

@@ -2,12 +2,12 @@ import { defineComponent, ref, computed, useId, onMounted, onActivated, onDeacti
 import { IconCheck } from "@maple-design/icons-vue";
 import { toNumber, clamp, clampArrayRange } from "@maple-design/shared-vue";
 import { useTouch } from "@maple-design/use-vue";
-import { Button } from "../button/index.mjs";
+import MpButton from "../button/base.mjs";
 import { useFormErrorDescription } from "../form/error-description.mjs";
 import { useFormItem } from "../form/item-provide.mjs";
 import "../icon/index.mjs";
-import "../locale/index.mjs";
 import { injectLocaleProvider } from "../locale-provider/provide.mjs";
+import { temporalText } from "../locale/temporal-text.mjs";
 import "../popup/index.mjs";
 import { createNamespace } from "../utils/components.mjs";
 import { toPxNum, getTranslateY } from "../utils/elements.mjs";
@@ -15,7 +15,6 @@ import { useFieldNames } from "../utils/options.mjs";
 import { props } from "./props.mjs";
 import _sfc_main$1 from "../popup/Popup.vue.mjs";
 import _sfc_main$2 from "../icon/Icon.vue.mjs";
-import { t } from "../locale/state.mjs";
 const { name, n, classes } = createNamespace("picker");
 const MOMENTUM_RECORD_TIME = 300;
 const MOMENTUM_ALLOW_DISTANCE = 15;
@@ -26,7 +25,7 @@ const _sfc_main = defineComponent({
   name,
   components: {
     MIconCheck: IconCheck,
-    MpButton: Button,
+    MpButton,
     MpIcon: _sfc_main$2,
     MpPopup: _sfc_main$1
   },
@@ -545,7 +544,7 @@ const _sfc_main = defineComponent({
       Transition,
       toRaw,
       pt,
-      t,
+      t: temporalText,
       n,
       classes,
       isOptionSelected,

package/es/picker/base.mjs

@@ -0,0 +1,7 @@
+import { withPropsDefaultsSetter } from "../utils/components.mjs";
+import Picker from "./Picker.vue.mjs";
+import { props } from "./props.mjs";
+const MpPicker = withPropsDefaultsSetter(Picker, props);
+export {
+  MpPicker as default
+};

package/es/picker/index.mjs

@@ -1,7 +1,7 @@
 import { reactive, nextTick } from "vue";
 import { isArray, call } from "@maple-design/shared-vue";
 import { withInstall, withPropsDefaultsSetter, mountInstance } from "../utils/components.mjs";
-import VarPicker from "./Picker.vue.mjs";
+import MpPicker from "./base.mjs";
 import { props } from "./props.mjs";
 let singletonOptions;
 function Picker(options) {
@@ -17,7 +17,7 @@ function Picker(options) {
     function resetSingletonOptions() {
       singletonOptions === reactivePickerOptions && (singletonOptions = null);
     }
-    const { unmountInstance } = mountInstance(VarPicker, reactivePickerOptions, {
+    const { unmountInstance } = mountInstance(MpPicker, reactivePickerOptions, {
       onConfirm: (values, indexes, options2) => {
         resolve({
           state: "confirm",
@@ -72,10 +72,10 @@ Picker.close = function() {
     prevSingletonOptions.open = false;
   });
 };
-Picker.Component = withInstall(VarPicker);
-const InstalledPicker = withInstall(VarPicker, Picker);
+Picker.Component = withInstall(MpPicker);
+const InstalledPicker = withInstall(MpPicker, Picker);
 withPropsDefaultsSetter(Picker, props);
-const _PickerComponent = VarPicker;
+const _PickerComponent = MpPicker;
 export {
   _PickerComponent,
   InstalledPicker as default,

package/es/progress/style/index.css

@@ -6,8 +6,8 @@
   --mp-progress-font-size: var(--mp-sys-font-size-sm);
   --mp-progress-text-color: var(--mp-sys-color-content-secondary);
   --mp-progress-track-color: var(--mp-sys-color-state-hover);
-  --mp-progress-default-color: var(--mp-sys-color-content-brand);
-  --mp-progress-primary-color: var(--mp-sys-color-content-brand);
+  --mp-progress-default-color: var(--mp-sys-color-action-primary);
+  --mp-progress-primary-color: var(--mp-sys-color-action-primary);
   --mp-progress-secondary-color: var(--mp-sys-color-content-secondary);
   --mp-progress-tertiary-color: var(--mp-sys-color-content-tertiary);
   --mp-progress-info-color: var(--mp-sys-color-content-info);

package/es/radio/style/index.css

@@ -3,7 +3,7 @@
 }
 :root,
 :where([data-mp-theme]) {
-  --mp-radio-control-color-checked: var(--mp-sys-color-content-brand);
+  --mp-radio-control-color-checked: var(--mp-sys-color-action-primary);
   --mp-radio-control-color: var(--mp-sys-color-content-secondary);
   --mp-radio-control-color-disabled: var(--mp-sys-color-content-disabled);
   --mp-radio-control-color-error: var(--mp-sys-color-content-danger);

package/es/rate/style/index.css

@@ -6,7 +6,7 @@
   --mp-rate-disabled-color: var(--mp-sys-color-content-disabled);
   --mp-rate-error-color: var(--mp-sys-color-content-danger);
   --mp-rate-active-scale: 1.2;
-  --mp-rate-focus-color: var(--mp-sys-color-content-brand);
+  --mp-rate-focus-color: var(--mp-sys-color-action-primary);
   --mp-rate-focus-width: 2px;
   --mp-rate-focus-offset: 2px;
   --mp-rate-size: 24px;
@@ -14,7 +14,7 @@
   --mp-rate-min-height: 0px;
   --mp-rate-action-padding: 4px;
   --mp-rate-empty-color: var(--mp-color-text);
-  --mp-rate-active-color: var(--mp-sys-color-content-brand);
+  --mp-rate-active-color: var(--mp-sys-color-action-primary);
   --mp-rate-transition-duration: 250ms;
   --mp-rate-scale-duration: 250ms;
   --mp-rate-transition-timing-function: ease;