@maple-design/ui-vue 1.1.0 → 1.1.1

package/lib/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/lib/notice-bar/NoticeBar2.vue.js

@@ -5,12 +5,11 @@ const iconsVue = require("@maple-design/icons-vue");
 const sharedVue = require("@maple-design/shared-vue");
 require("../icon/index.js");
 const RegisteredIcon_vue_vue_type_script_setup_true_lang = require("../icon/RegisteredIcon.vue.js");
-require("../locale/index.js");
 const provide = require("../locale-provider/provide.js");
+const miscText = require("../locale/misc-text.js");
 const components = require("../utils/components.js");
 const props = require("./props.js");
 const Icon_vue_vue_type_script_setup_true_lang = require("../icon/Icon.vue.js");
-const state = require("../locale/state.js");
 const { name, n, classes } = components.createNamespace("notice-bar");
 const _sfc_main = vue.defineComponent({
   name,
@@ -23,7 +22,7 @@ const _sfc_main = vue.defineComponent({
   emits: ["close", "replay"],
   setup(props2, { emit }) {
     const { t: translate } = provide.injectLocaleProvider();
-    const closeLabel = vue.computed(() => String(translate?.("common.close") ?? state.t("common.close") ?? "Close"));
+    const closeLabel = vue.computed(() => String(translate?.("common.close") ?? miscText.miscText("common.close") ?? "Close"));
     const visible = vue.ref(true);
     const contentRef = vue.ref(null);
     const textRef = vue.ref(null);

package/lib/number-keyboard/NumberKeyboard2.vue.js

@@ -6,15 +6,14 @@ const sharedVue = require("@maple-design/shared-vue");
 const useVue = require("@maple-design/use-vue");
 const errorDescription = require("../form/error-description.js");
 require("../icon/index.js");
-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 props = require("./props.js");
 const Icon_vue_vue_type_script_setup_true_lang = require("../icon/Icon.vue.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("number-keyboard");
 function shuffle(items) {
   const result = [...items];
@@ -51,9 +50,9 @@ const _sfc_main = vue.defineComponent({
     const { describe: describeError } = errorDescription.useFormErrorDescription();
     const { t: localT } = provide.injectLocaleProvider();
     const titleId = `number-keyboard-title-${vue.useId()}`;
-    const deleteLabel = vue.computed(() => (localT || state.t)("numberKeyboard.delete") ?? "Delete");
-    const closeLabel = vue.computed(() => (localT || state.t)("numberKeyboard.done") ?? "Done");
-    const dialogLabel = () => attrs["aria-label"] ?? (!attrs["aria-labelledby"] && !props2.title ? (localT || state.t)("numberKeyboard.label") ?? "Number keyboard" : void 0);
+    const deleteLabel = vue.computed(() => (localT || miscText.miscText)("numberKeyboard.delete") ?? "Delete");
+    const closeLabel = vue.computed(() => (localT || miscText.miscText)("numberKeyboard.done") ?? "Done");
+    const dialogLabel = () => attrs["aria-label"] ?? (!attrs["aria-labelledby"] && !props2.title ? (localT || miscText.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 = useVue.useVModel(props2, "open", { emit, eventName: "update:open", defaultValue: props2.defaultOpen });
@@ -68,7 +67,7 @@ const _sfc_main = vue.defineComponent({
       }
       return props2.overlayClosable ?? true;
     });
-    const closeText = vue.computed(() => props2.closeButtonText ?? state.t("cascaderPickerDoneButtonText"));
+    const closeText = vue.computed(() => props2.closeButtonText ?? (localT || miscText.miscText)("cascaderPickerDoneButtonText"));
     const extraKeys = vue.computed(() => {
       const { extraKey } = props2;
       if (!extraKey || extraKey === "") {

package/lib/pagination/PageInput.vue.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const vue = require("vue");
-const input_index = require("../input/index.js");
+const base = require("../input/base.js");
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "PageInput",
   props: {
@@ -14,7 +14,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   setup(__props, { emit: __emit }) {
     const emit = __emit;
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createBlock(vue.unref(input_index.Input), {
+      return vue.openBlock(), vue.createBlock(vue.unref(base.default), {
         "edit-mode": "direct",
         "model-value": _ctx.modelValue,
         size: _ctx.size,

package/lib/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/lib/people-select/PeopleSelect.js

@@ -10,6 +10,7 @@ const emits = require("./emits.js");
 const Person_vue_vue_type_script_setup_true_lang = require("./Person.vue.js");
 const presentation = require("./presentation.js");
 const props = require("./props.js");
+const selection = require("./selection.js");
 const _PeopleSelect = vue.defineComponent({
   name: components.createNamespace("people-select").name,
   inheritAttrs: false,
@@ -34,42 +35,18 @@ const _PeopleSelect = vue.defineComponent({
       immediate: false
     });
     const options = vue.computed(() => Array.isArray(props2.options) ? props2.options : source.data.value);
-    const selectedCache = vue.ref();
-    vue.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 = vue.computed(() => {
-      const current = options.value.find((person) => person.value === value.value);
-      if (current) {
-        return current;
-      }
-      if (typeof props2.fallbackOption === "function" && value.value != null) {
-        return props2.fallbackOption(value.value);
-      }
-      if (props2.fallbackOption !== false && props2.label) {
-        return { ...selectedCache.value, value: value.value ?? "", label: props2.label };
+    const selection$1 = selection.useSelectedPeople(props2, value, options);
+    const selected = vue.computed(
+      () => selection$1.people.value[0] ?? {
+        value: "",
+        label: props2.label || props2.defaultText
       }
-      if (props2.fallbackOption !== false && selectedCache.value?.value === value.value) {
-        return selectedCache.value;
-      }
-      return {
-        value: value.value ?? "",
-        label: props2.fallbackOption === false ? props2.defaultText : props2.label || value.value || props2.defaultText
-      };
-    });
+    );
     const readScope = vue.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$1.people.value.map((person) => person.label).join(", "),
+      person: selected.value,
+      ...props2.multiple ? { people: selection$1.people.value } : {}
     }));
     const childOptions = options;
     async function load(query) {
@@ -111,25 +88,29 @@ const _PeopleSelect = vue.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) : props2.renderActions?.(scope);
+        return vue.h(
+          Person_vue_vue_type_script_setup_true_lang.default,
+          {
+            key: person.value,
+            person,
+            showAvatar: props2.showAvatar,
+            disabled: scope.disabled,
+            showPhone: props2.showPhone,
+            showChat: props2.showChat,
+            call: props2.call,
+            chat: props2.chat,
+            onActionError: (error, action) => emit("action-error", error, action)
+          },
+          actions == null ? void 0 : { default: () => actions }
+        );
       };
-      const actions = slots.actions ? slots.actions(scope) : props2.renderActions?.(scope);
-      return vue.h(
-        Person_vue_vue_type_script_setup_true_lang.default,
-        {
-          person: selected.value,
-          showAvatar: props2.showAvatar,
-          disabled: scope.disabled,
-          showPhone: props2.showPhone,
-          showChat: props2.showChat,
-          call: props2.call,
-          chat: props2.chat,
-          onActionError: (error, action) => emit("action-error", error, action)
-        },
-        actions == null ? void 0 : { default: () => actions }
-      );
+      return props2.multiple ? vue.h("span", { class: "mp-people-select-people" }, selection$1.people.value.map(renderPerson)) : renderPerson(selected.value);
     };
     const personSlots = () => ({
       ...slots,
@@ -151,8 +132,8 @@ const _PeopleSelect = vue.defineComponent({
         ref: control,
         modelValue: value.value,
         options: childOptions.value,
-        label: selected.value.label,
-        fallbackOption: props2.fallbackOption === false ? false : () => selected.value,
+        label: props2.multiple ? "" : selected.value.label,
+        fallbackOption: props2.fallbackOption === false ? false : selection$1.resolve,
         loading: props2.loading || source.loading.value,
         filterOption: props2.filterOption ?? !remote.value,
         "onUpdate:modelValue": update,

package/lib/people-select/Person.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 components = require("../utils/components.js");
 const usePeopleTexts = require("./use-people-texts.js");
 const _hoisted_1 = ["src"];
@@ -63,7 +63,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
           }, ["stop"]))
         }, [
           vue.renderSlot(_ctx.$slots, "default", {}, () => [
-            _ctx.showPhone ? (vue.openBlock(), vue.createBlock(vue.unref(button_index.Button), {
+            _ctx.showPhone ? (vue.openBlock(), vue.createBlock(vue.unref(base.default), {
               key: 0,
               size: "xs",
               variant: "text",
@@ -90,7 +90,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
               ])),
               _: 1
             }, 8, ["disabled", "aria-label", "loading"])) : vue.createCommentVNode("", true),
-            _ctx.showChat ? (vue.openBlock(), vue.createBlock(vue.unref(button_index.Button), {
+            _ctx.showChat ? (vue.openBlock(), vue.createBlock(vue.unref(base.default), {
               key: 1,
               size: "xs",
               variant: "text",

package/lib/people-select/emits.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-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/lib/people-select/people-select.js

@@ -5,7 +5,9 @@ const context = require("../_components/selected-options/context.js");
 const itemProvide = require("../form/item-provide.js");
 const select_index = require("../select/index.js");
 const components = require("../utils/components.js");
+const emits = require("./emits.js");
 const props = require("./props.js");
+const selection = require("./selection.js");
 const {
   name
 } = components.createNamespace("people-select");
@@ -13,12 +15,7 @@ const Base = /* @__PURE__ */ vue.defineComponent({
   name,
   inheritAttrs: false,
   props: 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: emits.peopleSelectEmits,
   setup(props2, {
     emit,
     attrs,
@@ -44,12 +41,12 @@ const Base = /* @__PURE__ */ vue.defineComponent({
       ...option
     })));
     const blocked = () => mergedDisabled.value || mergedReadonly.value || props2.loading;
-    const label = vue.computed(() => (Array.isArray(props2.options) ? props2.options : []).find((option) => option.value === value.value)?.label || props2.label || value.value || props2.defaultText);
+    const label = vue.computed(() => selection.peopleText(value.value, props2));
     const commit = (next) => {
       if (blocked()) {
         return;
       }
-      const text = next === null ? null : typeof next === "string" ? next : "";
+      const text = next === null ? null : props2.multiple ? Array.isArray(next) ? next.filter((id) => typeof id === "string") : [] : typeof next === "string" ? next : "";
       if (props2.modelValue === void 0) {
         localValue.value = text;
       }
@@ -62,6 +59,7 @@ const Base = /* @__PURE__ */ vue.defineComponent({
       name: props2.name
     }, {
       "placeholder": props2.placeholder,
+      "multiple": props2.multiple,
       "clearable": props2.clearable,
       "emptyValue": props2.emptyValue,
       "filterable": props2.filterable,

package/lib/people-select/presentation.js

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

package/lib/people-select/props.js

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

package/lib/people-select/selection.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const vue = require("vue");
+function personIds(value) {
+  return Array.isArray(value) ? value : value == null ? [] : [value];
+}
+function useSelectedPeople(props, value, options) {
+  const cache = vue.shallowRef(/* @__PURE__ */ new Map());
+  vue.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: vue.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(", ");
+}
+exports.peopleText = peopleText;
+exports.personIds = personIds;
+exports.useSelectedPeople = useSelectedPeople;

package/lib/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/lib/picker/Picker.vue.js

@@ -159,5 +159,5 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   }, 16);
 }
-const VarPicker = /* @__PURE__ */ _pluginVue_exportHelper.default(Picker_vue_vue_type_script_lang.default, [["render", _sfc_render]]);
-exports.default = VarPicker;
+const Picker = /* @__PURE__ */ _pluginVue_exportHelper.default(Picker_vue_vue_type_script_lang.default, [["render", _sfc_render]]);
+exports.default = Picker;

package/lib/picker/Picker2.vue.js

@@ -4,12 +4,12 @@ const vue = require("vue");
 const iconsVue = require("@maple-design/icons-vue");
 const sharedVue = require("@maple-design/shared-vue");
 const useVue = require("@maple-design/use-vue");
-const button_index = require("../button/index.js");
+const base = require("../button/base.js");
 const errorDescription = require("../form/error-description.js");
 const itemProvide = require("../form/item-provide.js");
 require("../icon/index.js");
-require("../locale/index.js");
 const provide = require("../locale-provider/provide.js");
+const temporalText = require("../locale/temporal-text.js");
 require("../popup/index.js");
 const components = require("../utils/components.js");
 const elements = require("../utils/elements.js");
@@ -17,7 +17,6 @@ const options = require("../utils/options.js");
 const props = require("./props.js");
 const Popup_vue_vue_type_script_setup_true_lang = require("../popup/Popup.vue.js");
 const Icon_vue_vue_type_script_setup_true_lang = require("../icon/Icon.vue.js");
-const state = require("../locale/state.js");
 const { name, n, classes } = components.createNamespace("picker");
 const MOMENTUM_RECORD_TIME = 300;
 const MOMENTUM_ALLOW_DISTANCE = 15;
@@ -28,7 +27,7 @@ const _sfc_main = vue.defineComponent({
   name,
   components: {
     MIconCheck: iconsVue.IconCheck,
-    MpButton: button_index.Button,
+    MpButton: base.default,
     MpIcon: Icon_vue_vue_type_script_setup_true_lang.default,
     MpPopup: Popup_vue_vue_type_script_setup_true_lang.default
   },
@@ -547,7 +546,7 @@ const _sfc_main = vue.defineComponent({
       Transition: vue.Transition,
       toRaw: vue.toRaw,
       pt,
-      t: state.t,
+      t: temporalText.temporalText,
       n,
       classes,
       isOptionSelected,

package/lib/picker/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 Picker = require("./Picker.vue.js");
+const props = require("./props.js");
+const MpPicker = components.withPropsDefaultsSetter(Picker.default, props.props);
+exports.default = MpPicker;

package/lib/picker/index.js

@@ -3,7 +3,7 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 const vue = require("vue");
 const sharedVue = require("@maple-design/shared-vue");
 const components = require("../utils/components.js");
-const Picker$1 = require("./Picker.vue.js");
+const base = require("./base.js");
 const props = require("./props.js");
 let singletonOptions;
 function Picker(options) {
@@ -19,7 +19,7 @@ function Picker(options) {
     function resetSingletonOptions() {
       singletonOptions === reactivePickerOptions && (singletonOptions = null);
     }
-    const { unmountInstance } = components.mountInstance(Picker$1.default, reactivePickerOptions, {
+    const { unmountInstance } = components.mountInstance(base.default, reactivePickerOptions, {
       onConfirm: (values, indexes, options2) => {
         resolve({
           state: "confirm",
@@ -74,10 +74,10 @@ Picker.close = function() {
     prevSingletonOptions.open = false;
   });
 };
-Picker.Component = components.withInstall(Picker$1.default);
-const InstalledPicker = components.withInstall(Picker$1.default, Picker);
+Picker.Component = components.withInstall(base.default);
+const InstalledPicker = components.withInstall(base.default, Picker);
 components.withPropsDefaultsSetter(Picker, props.props);
-const _PickerComponent = Picker$1.default;
+const _PickerComponent = base.default;
 exports.pickerProps = props.props;
 exports._PickerComponent = _PickerComponent;
 exports.default = InstalledPicker;

package/lib/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/lib/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/lib/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;