@maple-design/ui-vue 1.1.0 → 1.1.1

package/lib/ripple/index.js

@@ -10,6 +10,12 @@ const waves = /* @__PURE__ */ new WeakMap();
 function ownedRipples(element) {
   return Array.from(element.children).filter((child) => waves.has(child));
 }
+function stopObserverIfIdle(element, state) {
+  if (!state.tasker && !ownedRipples(element).length) {
+    state.migrationObserver?.disconnect();
+    state.migrationObserver = void 0;
+  }
+}
 function transitionTime(element, property) {
   const style = element.ownerDocument.defaultView?.getComputedStyle(element);
   if (!style) {
@@ -49,6 +55,8 @@ function clearTasks(element) {
   if (!state) {
     return;
   }
+  state.migrationObserver?.disconnect();
+  state.migrationObserver = void 0;
   state.timers.forEach((timer) => window.clearTimeout(timer));
   state.timers.clear();
   state.tasker = null;
@@ -123,18 +131,27 @@ function createRipple(event) {
   if (!_ripple) {
     return;
   }
+  syncOwnerDocument(this);
   _ripple.removeRipple();
   if (_ripple.disabled || _ripple.tasker || !context_index.default.enableRipple) {
     return;
   }
+  watchOwnerDuringGesture(this, _ripple);
   const task = () => {
     const current = () => this._ripple === _ripple && !_ripple.disabled && context_index.default.enableRipple;
     if (!current()) {
+      if (this._ripple === _ripple) {
+        _ripple.tasker = null;
+        stopObserverIfIdle(this, _ripple);
+      }
       return;
     }
     _ripple.tasker = null;
     const { x, y, centerX, centerY, size } = computeRippleStyles(this, event);
     if (!current()) {
+      if (this._ripple === _ripple) {
+        clearTasks(this);
+      }
       return;
     }
     const ripple = this.ownerDocument.createElement("div");
@@ -147,6 +164,9 @@ function createRipple(event) {
     ripple.dataset.createdAt = String(performance.now());
     setStyles(this);
     if (!current()) {
+      if (this._ripple === _ripple) {
+        clearTasks(this);
+      }
       return;
     }
     this.appendChild(ripple);
@@ -154,6 +174,9 @@ function createRipple(event) {
     waves.set(ripple, wave);
     const expansion = transitionTime(ripple, "transform");
     if (!current() || waves.get(ripple) !== wave) {
+      if (!current() && this._ripple === _ripple) {
+        clearTasks(this);
+      }
       return;
     }
     wave.expandUntil += expansion;
@@ -162,10 +185,16 @@ function createRipple(event) {
       () => {
         const wave2 = waves.get(ripple);
         if (!wave2 || !current()) {
+          if (!current() && this._ripple === _ripple) {
+            clearTasks(this);
+          }
           return;
         }
         const expansion2 = transitionTime(ripple, "transform");
         if (!current() || waves.get(ripple) !== wave2) {
+          if (!current() && this._ripple === _ripple) {
+            clearTasks(this);
+          }
           return;
         }
         wave2.expandUntil = performance.now() + expansion2;
@@ -185,6 +214,7 @@ function removeRipple() {
   const task = () => {
     const ripples = ownedRipples(this);
     if (!ripples.length) {
+      stopObserverIfIdle(this, _ripple);
       return;
     }
     const lastRipple = ripples[ripples.length - 1];
@@ -211,6 +241,7 @@ function removeRipple() {
           lastRipple.remove();
           if (!ownedRipples(this).length) {
             restoreStyles(this);
+            stopObserverIfIdle(this, _ripple);
           }
         },
         Math.max(MINIMUM_REMOVAL_DELAY, transitionTime(lastRipple, "opacity"))
@@ -230,6 +261,7 @@ function forbidRippleTask() {
     _ripple.timers.delete(_ripple.tasker);
   }
   _ripple.tasker = null;
+  stopObserverIfIdle(this, _ripple);
 }
 function createTouchRipple(event) {
   if (this._ripple) {
@@ -265,6 +297,11 @@ function removeKeyboardRipple(event) {
 }
 const releaseGroups = /* @__PURE__ */ new WeakMap();
 const releaseEvents = ["touchend", "mouseup", "touchcancel", "dragend"];
+function releaseOnMovedHost() {
+  if (this._ripple && this._ripple.document !== this.ownerDocument) {
+    syncOwnerDocument(this);
+  }
+}
 function bindListeners(el) {
   const state = el._ripple;
   if (!state || state.listening || state.disabled) {
@@ -274,6 +311,9 @@ function bindListeners(el) {
   el.addEventListener("touchstart", createTouchRipple, { passive: true });
   el.addEventListener("mousedown", createMouseRipple, { passive: true });
   el.addEventListener("touchmove", forbidRippleTask, { passive: true });
+  el.addEventListener("mouseup", releaseOnMovedHost);
+  el.addEventListener("touchend", releaseOnMovedHost);
+  el.addEventListener("touchcancel", releaseOnMovedHost);
   el.addEventListener("dragstart", removeRipple, { passive: true });
   el.addEventListener("keydown", createKeyboardRipple);
   el.addEventListener("keyup", removeKeyboardRipple);
@@ -307,6 +347,9 @@ function unbindListeners(el) {
   el.removeEventListener("touchstart", createTouchRipple);
   el.removeEventListener("mousedown", createMouseRipple);
   el.removeEventListener("touchmove", forbidRippleTask);
+  el.removeEventListener("mouseup", releaseOnMovedHost);
+  el.removeEventListener("touchend", releaseOnMovedHost);
+  el.removeEventListener("touchcancel", releaseOnMovedHost);
   el.removeEventListener("dragstart", removeRipple);
   const group = releaseGroups.get(state.document);
   if (group && group.hosts.delete(el) && !group.hosts.size) {
@@ -317,6 +360,40 @@ function unbindListeners(el) {
     releaseGroups.delete(state.document);
   }
 }
+function syncOwnerDocument(el) {
+  const state = el._ripple;
+  if (!state || state.document === el.ownerDocument) {
+    return;
+  }
+  clearTasks(el);
+  unbindListeners(el);
+  state.document = el.ownerDocument;
+  bindListeners(el);
+}
+function watchOwnerDuringGesture(el, state) {
+  if (state.migrationObserver || typeof MutationObserver === "undefined") {
+    return;
+  }
+  let connected = el.isConnected;
+  const observer = new MutationObserver(() => {
+    if (el._ripple !== state) {
+      return;
+    }
+    if (state.document !== el.ownerDocument) {
+      syncOwnerDocument(el);
+    } else if (connected && !el.isConnected) {
+      clearTasks(el);
+    } else if (el.isConnected) {
+      connected = true;
+    }
+  });
+  const root = el.getRootNode();
+  observer.observe(root, { childList: true, subtree: true });
+  if (root !== state.document) {
+    observer.observe(state.document, { childList: true, subtree: true });
+  }
+  state.migrationObserver = observer;
+}
 function mounted(el, binding) {
   el._ripple = {
     document: el.ownerDocument,
@@ -336,6 +413,7 @@ function unmounted(el) {
   delete el._ripple;
 }
 function updated(el, binding) {
+  syncOwnerDocument(el);
   const newBinding = {
     color: binding.value?.color,
     disabled: binding.value?.disabled

package/lib/search/HistoryContent.vue.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const vue = require("vue");
-const button_index = require("../button/index.js");
-const input_index = require("../input/index.js");
+const base$1 = require("../button/base.js");
+const base = require("../input/base.js");
 const components = require("../utils/components.js");
 const FieldSelect_vue_vue_type_script_setup_true_lang = require("./FieldSelect.vue.js");
 const _hoisted_1 = ["for"];
@@ -76,7 +76,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
               vue.createTextVNode(vue.toDisplayString(_ctx.settings.label), 1)
             ])
           ], 10, _hoisted_1)) : vue.createCommentVNode("", true),
-          vue.createVNode(vue.unref(input_index.Input), vue.mergeProps({
+          vue.createVNode(vue.unref(base.default), vue.mergeProps({
             ref_key: "inputRef",
             ref: inputRef,
             loading: _ctx.settings.loading && _ctx.settings.loadingMode === "line",
@@ -122,7 +122,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
               key: "2"
             } : void 0
           ]), 1040, ["loading", "loading-mode", "model-value", "empty-value", "input-attrs", "error", "placeholder", "class", "onUpdate:modelValue", "onInput", "onChange", "onClear", "onPressEnter", "onBlur", "onFocus"]),
-          vue.createVNode(vue.unref(button_index.Button), {
+          vue.createVNode(vue.unref(base$1.default), {
             class: vue.normalizeClass(vue.unref(n)("cancel")),
             variant: "text",
             disabled: _ctx.state.searchDisabled,

package/lib/search/Search.vue.js

@@ -4,10 +4,10 @@ const vue = require("vue");
 const iconsVue = require("@maple-design/icons-vue");
 const context = require("../_components/field-presentation/context.js");
 const FieldPresentation_vue_vue_type_script_setup_true_lang = require("../_components/field-presentation/FieldPresentation.vue.js");
-const button_index = require("../button/index.js");
+const base$1 = require("../button/base.js");
 require("../field-decorator/index.js");
 const RegisteredIcon_vue_vue_type_script_setup_true_lang = require("../icon/RegisteredIcon.vue.js");
-const input_index = require("../input/index.js");
+const base = require("../input/base.js");
 const Loading_vue_vue_type_script_setup_true_lang = require("../loading/Loading.vue.js");
 const menu_index = require("../menu/index.js");
 const components = require("../utils/components.js");
@@ -181,7 +181,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                 vue.createTextVNode(vue.toDisplayString(_ctx.label), 1)
               ])
             ], 10, _hoisted_2)) : vue.createCommentVNode("", true),
-            vue.createVNode(vue.unref(input_index.Input), {
+            vue.createVNode(vue.unref(base.default), {
               ref_key: "input",
               ref: input,
               "edit-mode": "direct",
@@ -260,7 +260,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
           ]),
           _: 3
         }, 8, ["loading", "loading-mode", "class", "style", "variant", "size", "disabled", "readonly", "error"]),
-        vue.unref(effectiveShowAction) ? (vue.openBlock(), vue.createBlock(vue.unref(button_index.Button), vue.mergeProps({
+        vue.unref(effectiveShowAction) ? (vue.openBlock(), vue.createBlock(vue.unref(base$1.default), vue.mergeProps({
           key: 1,
           class: vue.unref(n)("action"),
           variant: "text",

package/lib/search/props.js

@@ -1,9 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const props$1 = require("../field-decorator/props.js");
-require("../input/index.js");
-const emptyValue = require("../utils/empty-value.js");
 const props = require("../input/props.js");
+const emptyValue = require("../utils/empty-value.js");
 const searchProps = {
   ...props$1.fieldLoadingProps,
   readPretty: props.inputProps.readPretty,

package/lib/select/props.js

@@ -9,6 +9,8 @@ const emptyValue = require("../utils/empty-value.js");
 const popupContainer = require("../utils/popup-container.js");
 const selectProps = {
   ...props.fieldLoadingProps,
+  /** 弹出编辑是否需要确认；未设置时单选即提交，多选保留确认。 */
+  needConfirm: { type: Boolean, default: void 0 },
   openTriggerTarget: openTrigger.openTriggerTargetProp,
   /** 异步候选加载器；显式 options 优先，组件管理加载和请求取消。 */
   /** 内置本地过滤是否区分大小写；自定义过滤函数优先。 */

package/lib/select/select.js

@@ -9,7 +9,7 @@ const SelectionEditor_vue_vue_type_script_setup_true_lang = require("../_compone
 const MenuPresentation_vue_vue_type_script_setup_true_lang = require("../_components/selection-field/MenuPresentation.vue.js");
 const SelectionField_vue_vue_type_script_setup_true_lang = require("../_components/selection-field/SelectionField.vue.js");
 const is = require("../_utils/is.js");
-const input_index = require("../input/index.js");
+const base = require("../input/base.js");
 const InputFeedback_vue_vue_type_script_setup_true_lang = require("../input/InputFeedback.vue.js");
 const components = require("../utils/components.js");
 const emits = require("./emits.js");
@@ -88,7 +88,7 @@ const Select = /* @__PURE__ */ vue.defineComponent({
       "onRemove": (key) => controller.handleRemove(String(key)),
       "onClear": controller.clearSelection
     }, {
-      default: () => [(props2.filterable || props2.creatable) && vue.createVNode(input_index.Input, {
+      default: () => [(props2.filterable || props2.creatable) && vue.createVNode(base.default, {
         "modelValue": controller.computedInputValue,
         "editMode": "direct",
         "hint": false,
@@ -154,7 +154,7 @@ const Select = /* @__PURE__ */ vue.defineComponent({
           "disabled": controller.mergedDisabled,
           "readonly": controller.mergedReadonly,
           "limit": props2.limit,
-          "needConfirm": controller.deferred,
+          "needConfirm": controller.deferred && controller.needConfirm,
           "pending": controller.session.pending,
           "error": controller.session.error || controller.presentationError,
           "onOpen": controller.handleOpenChange,
@@ -177,7 +177,7 @@ const Select = /* @__PURE__ */ vue.defineComponent({
                 editMode: "direct",
                 readPretty: false,
                 beforeCommit: void 0,
-                open: void 0,
+                open: controller.needConfirm ? void 0 : true,
                 defaultOpen: true,
                 modelValue: controller.session.value,
                 disabled: controller.mergedDisabled || controller.session.pending,
@@ -186,6 +186,16 @@ const Select = /* @__PURE__ */ vue.defineComponent({
                 onKeydown: (event) => emit("keydown", event),
                 onSearch: (...args) => emit("search", ...args),
                 onChange: () => {
+                },
+                onClear: () => {
+                  if (!controller.needConfirm) {
+                    void controller.session.commit();
+                  }
+                },
+                onRemove: () => {
+                  if (!controller.needConfirm) {
+                    void controller.session.commit();
+                  }
                 }
               }, slots)
             }) : vue.createVNode(SelectionEditor_vue_vue_type_script_setup_true_lang.default, {

package/lib/select/style/index.css

@@ -7,28 +7,31 @@
    * Popup Box
    **********************************************/
   --mp-select-popup-max-height: 200px;
-  --mp-select-popup-border-radius: var(--mp-sys-radius-md);
+  --mp-select-popup-border-radius: var(--mp-sys-radius-lg);
   --mp-select-popup-padding-vertical: var(--mp-sys-space-2);
   --mp-select-popup-font-size: var(--mp-sys-font-size-md);
   --mp-select-popup-bg: var(--mp-sys-color-surface-overlay);
-  --mp-select-popup-border-color: var(--mp-sys-color-border-default);
-  --mp-select-popup-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+  --mp-select-popup-border-color: var(--mp-sys-color-border-subtle);
+  --mp-select-popup-box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
   /**********************************************
    * Popup Options
    * status: default / disabled / selected / hover
    **********************************************/
   --mp-select-popup-option-height: 36px;
   --mp-select-popup-option-font-weight-selected: var(--mp-sys-font-weight-medium);
-  --mp-select-popup-option-padding-horizontal: var(--mp-sys-space-5);
-  --mp-select-popup-option-bg: var(--mp-sys-color-surface-overlay);
+  --mp-select-popup-option-padding-horizontal: var(--mp-sys-space-4);
+  --mp-select-popup-padding-horizontal: var(--mp-sys-space-3);
+  --mp-select-popup-option-border-radius: var(--mp-sys-radius-lg);
+  --mp-select-popup-option-bg: transparent;
   --mp-select-popup-option-bg-hover: var(--mp-sys-color-state-hover);
-  --mp-select-popup-option-bg-selected: var(--mp-sys-color-surface-overlay);
-  --mp-select-popup-option-bg-disabled: var(--mp-sys-color-surface-overlay);
+  --mp-select-popup-option-bg-selected: transparent;
+  --mp-select-popup-option-bg-selected-hover: var(--mp-select-popup-option-bg-hover);
+  --mp-select-popup-option-bg-disabled: transparent;
   --mp-select-popup-option-text-color: var(--mp-sys-color-content-primary);
   --mp-select-popup-option-text-color-hover: var(--mp-sys-color-content-primary);
-  --mp-select-popup-option-text-color-selected: var(--mp-sys-color-content-primary);
+  --mp-select-popup-option-text-color-selected: var(--mp-sys-color-action-primary);
   --mp-select-popup-option-text-color-disabled: var(--mp-sys-color-content-disabled);
-  --mp-select-popup-option-check-color: var(--mp-sys-color-content-primary);
+  --mp-select-popup-option-check-color: var(--mp-sys-color-action-primary);
   --mp-select-popup-option-check-size: var(--mp-sys-font-size-md);
   --mp-select-popup-option-check-gap: var(--mp-sys-space-4);
   --mp-select-popup-group-title-height: 20px;
@@ -69,6 +72,8 @@
   list-style: none;
 }
 .mp-select-dropdown-list-wrapper {
+  box-sizing: border-box;
+  padding-inline: var(--mp-select-popup-padding-horizontal);
   max-height: var(--mp-select-popup-max-height);
   overflow-y: auto;
 }
@@ -80,6 +85,8 @@
   box-sizing: border-box;
   width: 100%;
   padding: 0 var(--mp-select-popup-option-padding-horizontal);
+  border-radius: var(--mp-select-popup-option-border-radius);
+  transition: background-color var(--mp-sys-motion-duration-fast) var(--mp-sys-motion-easing-standard), color var(--mp-sys-motion-duration-fast) var(--mp-sys-motion-easing-standard);
   color: var(--mp-select-popup-option-text-color);
   font-size: var(--mp-select-popup-font-size);
   line-height: var(--mp-select-popup-option-height);
@@ -119,11 +126,14 @@
   font-weight: var(--mp-select-popup-option-font-weight-selected);
   background-color: var(--mp-select-popup-option-bg-selected);
 }
-.mp-select-dropdown .mp-select-option-active,
-.mp-select-dropdown .mp-select-option:not(.mp-select-dropdown .mp-select-option-disabled):hover {
+.mp-select-dropdown .mp-select-option-active:not(.mp-select-option-selected):not(.mp-select-option-disabled),
+.mp-select-dropdown .mp-select-option:not(.mp-select-option-selected):not(.mp-select-option-disabled):hover {
   color: var(--mp-select-popup-option-text-color-hover);
   background-color: var(--mp-select-popup-option-bg-hover);
-  transition: all var(--mp-sys-motion-duration-fast) var(--mp-sys-motion-easing-standard);
+}
+.mp-select-dropdown .mp-select-option-selected:not(.mp-select-option-disabled):hover,
+.mp-select-dropdown .mp-select-option-selected.mp-select-option-active:not(.mp-select-option-disabled) {
+  background-color: var(--mp-select-popup-option-bg-selected-hover);
 }
 .mp-select-dropdown .mp-select-option-disabled {
   color: var(--mp-select-popup-option-text-color-disabled);

package/lib/select/use-select-controller.js

@@ -98,6 +98,7 @@ function useSelectController(props, { emit }) {
   }));
   const committedValue = vue.computed(() => props.modelValue !== void 0 ? props.modelValue : _value.value);
   const deferred = vue.computed(() => editMode.value !== "direct");
+  const needConfirm = vue.computed(() => props.needConfirm ?? props.multiple);
   const publish = (value) => {
     _value.value = value;
     emit("update:modelValue", value);
@@ -311,6 +312,10 @@ function useSelectController(props, { emit }) {
         handleOpenChange(false);
       }
     }
+    nativeOwner?.onSelect?.(ev);
+    if (deferred.value && !needConfirm.value) {
+      void session.commit(ev);
+    }
   };
   const handleSearch = useFieldSearch.useFieldSearch(
     () => props.searchDelay,
@@ -350,6 +355,9 @@ function useSelectController(props, { emit }) {
     }
     const newKeys = computedValueObjects.value.map((item) => item.key).filter((_key) => _key !== key);
     session.update(getValueFromValueKeys(newKeys));
+    if (deferred.value && !needConfirm.value) {
+      void session.commit();
+    }
     emit("remove", optionInfo?.value);
   };
   const clearSelection = (e) => {
@@ -378,6 +386,9 @@ function useSelectController(props, { emit }) {
       clearedValue = [];
     }
     session.update(clearedValue);
+    if (deferred.value && !needConfirm.value) {
+      void session.commit();
+    }
     updateInputValue("");
     if (!deferred.value) {
       eventHandlers.value?.onClear?.();
@@ -479,7 +490,15 @@ function useSelectController(props, { emit }) {
     activeDescendant: vue.computed(
       () => computedOpen.value && !loading.value && activeKey.value && enabledOptionKeys.value.includes(activeKey.value) && (optionRefs.value[activeKey.value] || !props.virtualListProps && optionInfoMap.get(activeKey.value)?.ref) ? getOptionId(activeKey.value) : void 0
     ),
-    provideNativeEditorOwner: () => vue.provide(nativeEditorOwner.selectNativeEditorOwner, { source, selectedOptions: _selectedOption }),
+    provideNativeEditorOwner: () => vue.provide(nativeEditorOwner.selectNativeEditorOwner, {
+      source,
+      selectedOptions: _selectedOption,
+      onSelect: (event) => {
+        if (!needConfirm.value) {
+          void session.commit(event);
+        }
+      }
+    }),
     loading,
     refresh: source.refresh,
     registerPresentation: presentationState.register,
@@ -525,7 +544,8 @@ function useSelectController(props, { emit }) {
     handleDropdownReachBottom,
     session,
     deferred,
-    canConfirm
+    canConfirm,
+    needConfirm
   };
 }
 exports.useSelectController = useSelectController;

package/lib/slider/Slider.vue.js

@@ -2,6 +2,7 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const vue = require("vue");
 const errorDescription = require("../form/error-description.js");
+const labelContext = require("../form/label-context.js");
 const components = require("../utils/components.js");
 const sizeLength = require("../utils/size-length.js");
 const model = require("./model.js");
@@ -9,16 +10,33 @@ const props = require("./props.js");
 const SliderInput_vue_vue_type_script_setup_true_lang = require("./SliderInput.vue.js");
 const useSliderForm = require("./use-slider-form.js");
 const useVue = require("@maple-design/use-vue");
-const _hoisted_1 = ["tabindex", "aria-label", "aria-valuemin", "aria-valuemax", "aria-valuenow", "aria-valuetext", "aria-orientation", "aria-disabled", "aria-readonly", "aria-invalid", "aria-describedby", "onPointerdown", "onKeydown", "onFocus", "onMouseenter"];
-const _hoisted_2 = ["id"];
+const _hoisted_1 = ["role", "aria-labelledby"];
+const _hoisted_2 = ["tabindex", "aria-label", "aria-labelledby", "aria-valuemin", "aria-valuemax", "aria-valuenow", "aria-valuetext", "aria-orientation", "aria-disabled", "aria-readonly", "aria-invalid", "aria-describedby", "onPointerdown", "onKeydown", "onFocus", "onMouseenter"];
+const _hoisted_3 = ["id"];
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
-  ...{ name: components.createNamespace("slider").name },
+  ...{ name: components.createNamespace("slider").name, inheritAttrs: false },
   __name: "Slider",
   props: props.sliderProps,
   emits: ["update:modelValue", "change", "start", "end"],
   setup(__props, { expose: __expose, emit: __emit }) {
     const { n, classes } = components.createNamespace("slider");
     const props2 = __props;
+    const attrs = vue.useAttrs();
+    const formLabel = labelContext.useFormItemLabel();
+    const rangeGroupLabel = vue.computed(() => {
+      const label = formLabel?.value;
+      return props2.range && attrs.role == null && attrs["aria-labelledby"] == null && label?.target && label.target === attrs.id ? label.id : void 0;
+    });
+    const singleLabelledBy = vue.computed(() => {
+      if (props2.range) {
+        return void 0;
+      }
+      if (attrs["aria-labelledby"] != null) {
+        return attrs["aria-labelledby"];
+      }
+      const label = formLabel?.value;
+      return props2.ariaLabel == null && label?.target && label.target === attrs.id ? label.id : void 0;
+    });
     const { describe: describeError } = errorDescription.useFormErrorDescription();
     const emit = __emit;
     const { mergedDisabled, mergedReadonly, mergedError, eventHandlers } = useSliderForm.useSliderForm(props2);
@@ -295,21 +313,22 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     vue.onBeforeUnmount(cleanup);
     vue.onDeactivated(cleanup);
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", {
+      return vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
         ref_key: "root",
-        ref: root,
-        class: vue.normalizeClass(
-          vue.unref(classes)(
-            vue.unref(n)(),
-            vue.unref(n)(`--${_ctx.orientation}`),
-            [isDisabled.value, vue.unref(n)("--disabled")],
-            [vue.unref(mergedReadonly), vue.unref(n)("--readonly")],
-            [vue.unref(mergedError), vue.unref(n)("--error")],
-            [_ctx.marks, vue.unref(n)("--marks")]
-          )
+        ref: root
+      }, _ctx.$attrs, {
+        class: vue.unref(classes)(
+          vue.unref(n)(),
+          vue.unref(n)(`--${_ctx.orientation}`),
+          [isDisabled.value, vue.unref(n)("--disabled")],
+          [vue.unref(mergedReadonly), vue.unref(n)("--readonly")],
+          [vue.unref(mergedError), vue.unref(n)("--error")],
+          [_ctx.marks, vue.unref(n)("--marks")]
         ),
-        style: vue.normalizeStyle(customStyle.value)
-      }, [
+        style: customStyle.value,
+        role: _ctx.$attrs.role ?? (_ctx.range && (rangeGroupLabel.value || typeof _ctx.$attrs["aria-labelledby"] === "string" && _ctx.$attrs["aria-labelledby"].trim()) ? "group" : void 0),
+        "aria-labelledby": _ctx.$attrs["aria-labelledby"] ?? rangeGroupLabel.value
+      }), [
         vue.createElementVNode("div", {
           ref_key: "track",
           ref: track,
@@ -348,6 +367,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
               role: "slider",
               tabindex: isDisabled.value ? void 0 : 0,
               "aria-label": thumbLabel(index),
+              "aria-labelledby": singleLabelledBy.value,
               "aria-valuemin": index === 1 && _ctx.range ? values.value[0] : bounds.value.min,
               "aria-valuemax": index === 0 ? values.value[1] : bounds.value.max,
               "aria-valuenow": values.value[index],
@@ -382,8 +402,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                 id: `${tooltipId}-${index}`,
                 class: vue.normalizeClass(vue.unref(n)("tooltip")),
                 role: "tooltip"
-              }, vue.toDisplayString(format(values.value[index])), 11, _hoisted_2)) : vue.createCommentVNode("", true)
-            ], 46, _hoisted_1);
+              }, vue.toDisplayString(format(values.value[index])), 11, _hoisted_3)) : vue.createCommentVNode("", true)
+            ], 46, _hoisted_2);
           }), 128))
         ], 34),
         _ctx.showInput ? (vue.openBlock(), vue.createBlock(SliderInput_vue_vue_type_script_setup_true_lang.default, {
@@ -397,12 +417,14 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
           readonly: vue.unref(mergedReadonly),
           error: vue.unref(mergedError),
           "aria-label": _ctx.ariaLabel,
+          "aria-labelledby": singleLabelledBy.value,
+          "aria-describedby": _ctx.$attrs["aria-describedby"],
           "aria-invalid": _ctx.$attrs["aria-invalid"],
           onChange: inputChange,
           onFocus: _cache[2] || (_cache[2] = ($event) => vue.unref(eventHandlers)?.onFocus?.()),
           onBlur: _cache[3] || (_cache[3] = ($event) => vue.unref(eventHandlers)?.onBlur?.())
-        }, null, 8, ["model-value", "min", "max", "step", "range", "disabled", "readonly", "error", "aria-label", "aria-invalid"])) : vue.createCommentVNode("", true)
-      ], 6);
+        }, null, 8, ["model-value", "min", "max", "step", "range", "disabled", "readonly", "error", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid"])) : vue.createCommentVNode("", true)
+      ], 16, _hoisted_1);
     };
   }
 });

package/lib/slider/SliderInput.vue.js

@@ -18,6 +18,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     readonly: Boolean,
     error: Boolean,
     ariaLabel: [String, Array],
+    ariaLabelledby: String,
+    ariaDescribedby: String,
     ariaInvalid: { type: [String, Boolean], default: void 0 }
   },
   emits: ["change", "focus", "blur"],
@@ -41,7 +43,12 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
           disabled: __props.disabled,
           readonly: __props.readonly,
           error: __props.error,
-          "input-attrs": { "aria-label": label(0), "aria-invalid": __props.ariaInvalid },
+          "input-attrs": {
+            "aria-label": label(0),
+            "aria-labelledby": __props.ariaLabelledby,
+            "aria-describedby": __props.ariaDescribedby,
+            "aria-invalid": __props.ariaInvalid
+          },
           onChange: _cache[0] || (_cache[0] = (value) => emit("change", 0, value ?? void 0)),
           onFocus: _cache[1] || (_cache[1] = ($event) => emit("focus")),
           onBlur: _cache[2] || (_cache[2] = ($event) => emit("blur"))
@@ -55,7 +62,12 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
           disabled: __props.disabled,
           readonly: __props.readonly,
           error: __props.error,
-          "input-attrs": { "aria-label": label(1), "aria-invalid": __props.ariaInvalid },
+          "input-attrs": {
+            "aria-label": label(1),
+            "aria-labelledby": __props.ariaLabelledby,
+            "aria-describedby": __props.ariaDescribedby,
+            "aria-invalid": __props.ariaInvalid
+          },
           onChange: _cache[3] || (_cache[3] = (value) => emit("change", 1, value ?? void 0)),
           onFocus: _cache[4] || (_cache[4] = ($event) => emit("focus")),
           onBlur: _cache[5] || (_cache[5] = ($event) => emit("blur"))

package/lib/slider/style/index.css

@@ -3,10 +3,10 @@
 }
 :root,
 :where([data-mp-theme]) {
-  --mp-slider-active-color: var(--mp-sys-color-content-brand);
+  --mp-slider-active-color: var(--mp-sys-color-action-primary);
   --mp-slider-track-color: var(--mp-sys-color-state-hover);
   --mp-slider-thumb-color: var(--mp-sys-color-surface-default);
-  --mp-slider-thumb-border-color: var(--mp-sys-color-content-brand);
+  --mp-slider-thumb-border-color: var(--mp-sys-color-action-primary);
   --mp-slider-text-color: var(--mp-sys-color-content-secondary);
   --mp-slider-tooltip-background: var(--mp-sys-color-surface-tooltip);
   --mp-slider-tooltip-color: var(--mp-sys-color-content-on-dark);