@maple-design/ui-vue 1.1.0 → 1.1.1

package/es/ripple/index.mjs

@@ -8,6 +8,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) {
@@ -47,6 +53,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;
@@ -121,18 +129,27 @@ function createRipple(event) {
   if (!_ripple) {
     return;
   }
+  syncOwnerDocument(this);
   _ripple.removeRipple();
   if (_ripple.disabled || _ripple.tasker || !Context.enableRipple) {
     return;
   }
+  watchOwnerDuringGesture(this, _ripple);
   const task = () => {
     const current = () => this._ripple === _ripple && !_ripple.disabled && Context.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");
@@ -145,6 +162,9 @@ function createRipple(event) {
     ripple.dataset.createdAt = String(performance.now());
     setStyles(this);
     if (!current()) {
+      if (this._ripple === _ripple) {
+        clearTasks(this);
+      }
       return;
     }
     this.appendChild(ripple);
@@ -152,6 +172,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;
@@ -160,10 +183,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;
@@ -183,6 +212,7 @@ function removeRipple() {
   const task = () => {
     const ripples = ownedRipples(this);
     if (!ripples.length) {
+      stopObserverIfIdle(this, _ripple);
       return;
     }
     const lastRipple = ripples[ripples.length - 1];
@@ -209,6 +239,7 @@ function removeRipple() {
           lastRipple.remove();
           if (!ownedRipples(this).length) {
             restoreStyles(this);
+            stopObserverIfIdle(this, _ripple);
           }
         },
         Math.max(MINIMUM_REMOVAL_DELAY, transitionTime(lastRipple, "opacity"))
@@ -228,6 +259,7 @@ function forbidRippleTask() {
     _ripple.timers.delete(_ripple.tasker);
   }
   _ripple.tasker = null;
+  stopObserverIfIdle(this, _ripple);
 }
 function createTouchRipple(event) {
   if (this._ripple) {
@@ -263,6 +295,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) {
@@ -272,6 +309,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);
@@ -305,6 +345,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) {
@@ -315,6 +358,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,
@@ -334,6 +411,7 @@ function unmounted(el) {
   delete el._ripple;
 }
 function updated(el, binding) {
+  syncOwnerDocument(el);
   const newBinding = {
     color: binding.value?.color,
     disabled: binding.value?.disabled

package/es/search/HistoryContent.vue.mjs

@@ -1,6 +1,6 @@
 import { defineComponent, useSlots, ref, watch, onBeforeUnmount, computed, openBlock, createElementBlock, normalizeClass, unref, createElementVNode, createBlock, normalizeStyle, renderSlot, createTextVNode, toDisplayString, createCommentVNode, createVNode, mergeProps, createSlots, withCtx, normalizeProps, guardReactiveProps, Fragment, renderList } from "vue";
-import { Button } from "../button/index.mjs";
-import { Input } from "../input/index.mjs";
+import MpButton from "../button/base.mjs";
+import MpInput from "../input/base.mjs";
 import { createNamespace } from "../utils/components.mjs";
 import _sfc_main$1 from "./FieldSelect.vue.mjs";
 const _hoisted_1 = ["for"];
@@ -74,7 +74,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               createTextVNode(toDisplayString(_ctx.settings.label), 1)
             ])
           ], 10, _hoisted_1)) : createCommentVNode("", true),
-          createVNode(unref(Input), mergeProps({
+          createVNode(unref(MpInput), mergeProps({
             ref_key: "inputRef",
             ref: inputRef,
             loading: _ctx.settings.loading && _ctx.settings.loadingMode === "line",
@@ -120,7 +120,7 @@ const _sfc_main = /* @__PURE__ */ 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"]),
-          createVNode(unref(Button), {
+          createVNode(unref(MpButton), {
             class: normalizeClass(unref(n)("cancel")),
             variant: "text",
             disabled: _ctx.state.searchDisabled,

package/es/search/Search.vue.mjs

@@ -2,10 +2,10 @@ import { defineComponent, useSlots, shallowRef, ref, reactive, computed, watch,
 import { IconSearch } from "@maple-design/icons-vue";
 import { useFieldPresentation } from "../_components/field-presentation/context.mjs";
 import _sfc_main$1 from "../_components/field-presentation/FieldPresentation.vue.mjs";
-import { Button } from "../button/index.mjs";
+import MpButton from "../button/base.mjs";
 import "../field-decorator/index.mjs";
 import _sfc_main$5 from "../icon/RegisteredIcon.vue.mjs";
-import { Input } from "../input/index.mjs";
+import MpInput from "../input/base.mjs";
 import _sfc_main$4 from "../loading/Loading.vue.mjs";
 import { Menu } from "../menu/index.mjs";
 import { createNamespace } from "../utils/components.mjs";
@@ -179,7 +179,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 createTextVNode(toDisplayString(_ctx.label), 1)
               ])
             ], 10, _hoisted_2)) : createCommentVNode("", true),
-            createVNode(unref(Input), {
+            createVNode(unref(MpInput), {
               ref_key: "input",
               ref: input,
               "edit-mode": "direct",
@@ -258,7 +258,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           ]),
           _: 3
         }, 8, ["loading", "loading-mode", "class", "style", "variant", "size", "disabled", "readonly", "error"]),
-        unref(effectiveShowAction) ? (openBlock(), createBlock(unref(Button), mergeProps({
+        unref(effectiveShowAction) ? (openBlock(), createBlock(unref(MpButton), mergeProps({
           key: 1,
           class: unref(n)("action"),
           variant: "text",

package/es/search/props.mjs

@@ -1,7 +1,6 @@
 import { fieldLoadingProps } from "../field-decorator/props.mjs";
-import "../input/index.mjs";
-import { emptyValueProp } from "../utils/empty-value.mjs";
 import { inputProps } from "../input/props.mjs";
+import { emptyValueProp } from "../utils/empty-value.mjs";
 const searchProps = {
   ...fieldLoadingProps,
   readPretty: inputProps.readPretty,

package/es/select/props.mjs

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

package/es/select/select.mjs

@@ -7,7 +7,7 @@ import _sfc_main$1 from "../_components/selected-options/SelectionEditor.vue.mjs
 import _sfc_main$2 from "../_components/selection-field/MenuPresentation.vue.mjs";
 import _sfc_main$3 from "../_components/selection-field/SelectionField.vue.mjs";
 import { isFunction } from "../_utils/is.mjs";
-import { Input } from "../input/index.mjs";
+import MpInput from "../input/base.mjs";
 import _sfc_main$4 from "../input/InputFeedback.vue.mjs";
 import { createNamespace } from "../utils/components.mjs";
 import { selectEmits } from "./emits.mjs";
@@ -86,7 +86,7 @@ const Select = /* @__PURE__ */ defineComponent({
       "onRemove": (key) => controller.handleRemove(String(key)),
       "onClear": controller.clearSelection
     }, {
-      default: () => [(props.filterable || props.creatable) && createVNode(Input, {
+      default: () => [(props.filterable || props.creatable) && createVNode(MpInput, {
         "modelValue": controller.computedInputValue,
         "editMode": "direct",
         "hint": false,
@@ -152,7 +152,7 @@ const Select = /* @__PURE__ */ defineComponent({
           "disabled": controller.mergedDisabled,
           "readonly": controller.mergedReadonly,
           "limit": props.limit,
-          "needConfirm": controller.deferred,
+          "needConfirm": controller.deferred && controller.needConfirm,
           "pending": controller.session.pending,
           "error": controller.session.error || controller.presentationError,
           "onOpen": controller.handleOpenChange,
@@ -175,7 +175,7 @@ const Select = /* @__PURE__ */ 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,
@@ -184,6 +184,16 @@ const Select = /* @__PURE__ */ 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)
             }) : createVNode(_sfc_main$1, {

package/es/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/es/select/use-select-controller.mjs

@@ -96,6 +96,7 @@ function useSelectController(props, { emit }) {
   }));
   const committedValue = computed(() => props.modelValue !== void 0 ? props.modelValue : _value.value);
   const deferred = computed(() => editMode.value !== "direct");
+  const needConfirm = computed(() => props.needConfirm ?? props.multiple);
   const publish = (value) => {
     _value.value = value;
     emit("update:modelValue", value);
@@ -309,6 +310,10 @@ function useSelectController(props, { emit }) {
         handleOpenChange(false);
       }
     }
+    nativeOwner?.onSelect?.(ev);
+    if (deferred.value && !needConfirm.value) {
+      void session.commit(ev);
+    }
   };
   const handleSearch = useFieldSearch(
     () => props.searchDelay,
@@ -348,6 +353,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) => {
@@ -376,6 +384,9 @@ function useSelectController(props, { emit }) {
       clearedValue = [];
     }
     session.update(clearedValue);
+    if (deferred.value && !needConfirm.value) {
+      void session.commit();
+    }
     updateInputValue("");
     if (!deferred.value) {
       eventHandlers.value?.onClear?.();
@@ -477,7 +488,15 @@ function useSelectController(props, { emit }) {
     activeDescendant: 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: () => provide(selectNativeEditorOwner, { source, selectedOptions: _selectedOption }),
+    provideNativeEditorOwner: () => provide(selectNativeEditorOwner, {
+      source,
+      selectedOptions: _selectedOption,
+      onSelect: (event) => {
+        if (!needConfirm.value) {
+          void session.commit(event);
+        }
+      }
+    }),
     loading,
     refresh: source.refresh,
     registerPresentation: presentationState.register,
@@ -523,7 +542,8 @@ function useSelectController(props, { emit }) {
     handleDropdownReachBottom,
     session,
     deferred,
-    canConfirm
+    canConfirm,
+    needConfirm
   };
 }
 export {

package/es/slider/Slider.vue.mjs

@@ -1,5 +1,6 @@
-import { defineComponent, computed, ref, useId, watch, onBeforeUnmount, onDeactivated, openBlock, createElementBlock, normalizeStyle, normalizeClass, unref, createElementVNode, Fragment, renderList, toDisplayString, withModifiers, renderSlot, createCommentVNode, createBlock } from "vue";
+import { defineComponent, useAttrs, computed, ref, useId, watch, onBeforeUnmount, onDeactivated, openBlock, createElementBlock, mergeProps, unref, createElementVNode, normalizeClass, normalizeStyle, Fragment, renderList, toDisplayString, withModifiers, renderSlot, createCommentVNode, createBlock } from "vue";
 import { useFormErrorDescription } from "../form/error-description.mjs";
+import { useFormItemLabel } from "../form/label-context.mjs";
 import { createNamespace } from "../utils/components.mjs";
 import { positiveLength } from "../utils/size-length.mjs";
 import { sliderBounds, sliderValues, snap, stepValue } from "./model.mjs";
@@ -7,16 +8,33 @@ import { sliderProps } from "./props.mjs";
 import _sfc_main$1 from "./SliderInput.vue.mjs";
 import { useSliderForm } from "./use-slider-form.mjs";
 import { useDirection } from "@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__ */ defineComponent({
-  ...{ name: createNamespace("slider").name },
+  ...{ name: createNamespace("slider").name, inheritAttrs: false },
   __name: "Slider",
   props: sliderProps,
   emits: ["update:modelValue", "change", "start", "end"],
   setup(__props, { expose: __expose, emit: __emit }) {
     const { n, classes } = createNamespace("slider");
     const props = __props;
+    const attrs = useAttrs();
+    const formLabel = useFormItemLabel();
+    const rangeGroupLabel = computed(() => {
+      const label = formLabel?.value;
+      return props.range && attrs.role == null && attrs["aria-labelledby"] == null && label?.target && label.target === attrs.id ? label.id : void 0;
+    });
+    const singleLabelledBy = computed(() => {
+      if (props.range) {
+        return void 0;
+      }
+      if (attrs["aria-labelledby"] != null) {
+        return attrs["aria-labelledby"];
+      }
+      const label = formLabel?.value;
+      return props.ariaLabel == null && label?.target && label.target === attrs.id ? label.id : void 0;
+    });
     const { describe: describeError } = useFormErrorDescription();
     const emit = __emit;
     const { mergedDisabled, mergedReadonly, mergedError, eventHandlers } = useSliderForm(props);
@@ -293,21 +311,22 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     onBeforeUnmount(cleanup);
     onDeactivated(cleanup);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
+      return openBlock(), createElementBlock("div", mergeProps({
         ref_key: "root",
-        ref: root,
-        class: normalizeClass(
-          unref(classes)(
-            unref(n)(),
-            unref(n)(`--${_ctx.orientation}`),
-            [isDisabled.value, unref(n)("--disabled")],
-            [unref(mergedReadonly), unref(n)("--readonly")],
-            [unref(mergedError), unref(n)("--error")],
-            [_ctx.marks, unref(n)("--marks")]
-          )
+        ref: root
+      }, _ctx.$attrs, {
+        class: unref(classes)(
+          unref(n)(),
+          unref(n)(`--${_ctx.orientation}`),
+          [isDisabled.value, unref(n)("--disabled")],
+          [unref(mergedReadonly), unref(n)("--readonly")],
+          [unref(mergedError), unref(n)("--error")],
+          [_ctx.marks, unref(n)("--marks")]
         ),
-        style: 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
+      }), [
         createElementVNode("div", {
           ref_key: "track",
           ref: track,
@@ -346,6 +365,7 @@ const _sfc_main = /* @__PURE__ */ 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],
@@ -380,8 +400,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 id: `${tooltipId}-${index}`,
                 class: normalizeClass(unref(n)("tooltip")),
                 role: "tooltip"
-              }, toDisplayString(format(values.value[index])), 11, _hoisted_2)) : createCommentVNode("", true)
-            ], 46, _hoisted_1);
+              }, toDisplayString(format(values.value[index])), 11, _hoisted_3)) : createCommentVNode("", true)
+            ], 46, _hoisted_2);
           }), 128))
         ], 34),
         _ctx.showInput ? (openBlock(), createBlock(_sfc_main$1, {
@@ -395,12 +415,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           readonly: unref(mergedReadonly),
           error: 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) => unref(eventHandlers)?.onFocus?.()),
           onBlur: _cache[3] || (_cache[3] = ($event) => unref(eventHandlers)?.onBlur?.())
-        }, null, 8, ["model-value", "min", "max", "step", "range", "disabled", "readonly", "error", "aria-label", "aria-invalid"])) : createCommentVNode("", true)
-      ], 6);
+        }, null, 8, ["model-value", "min", "max", "step", "range", "disabled", "readonly", "error", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid"])) : createCommentVNode("", true)
+      ], 16, _hoisted_1);
     };
   }
 });

package/es/slider/SliderInput.vue.mjs

@@ -16,6 +16,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     readonly: Boolean,
     error: Boolean,
     ariaLabel: [String, Array],
+    ariaLabelledby: String,
+    ariaDescribedby: String,
     ariaInvalid: { type: [String, Boolean], default: void 0 }
   },
   emits: ["change", "focus", "blur"],
@@ -39,7 +41,12 @@ const _sfc_main = /* @__PURE__ */ 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"))
@@ -53,7 +60,12 @@ const _sfc_main = /* @__PURE__ */ 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/es/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);