@cedar-design/ui-vue 1.1.0 → 1.1.1

package/lib/people-select/selection.js

@@ -0,0 +1,43 @@
+"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;
 }
+.c-people-select-people {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--c-people-select-content-gap);
+}

package/lib/progress/style/index.css

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

package/lib/radio/style/index.css

@@ -7,7 +7,7 @@
   --c-radio-control-size: 14px;
   --c-radio-control-color-disabled: var(--c-sys-color-content-disabled);
   --c-radio-control-color-error: var(--c-sys-color-content-danger);
-  --c-radio-control-color-checked: var(--c-sys-color-content-brand);
+  --c-radio-control-color-checked: var(--c-sys-color-action-primary);
   --c-radio-action-padding: calc((var(--c-internal-radio-mask-height) / 2) - (var(--c-radio-control-size) / 2));
   --c-radio-label-text-color: var(--c-sys-color-content-primary);
   --c-radio-label-text-color-disabled: var(--c-sys-color-content-disabled);

package/lib/rate/style/index.css

@@ -6,7 +6,7 @@
   --c-rate-disabled-color: var(--c-sys-color-content-disabled);
   --c-rate-error-color: var(--c-sys-color-content-danger);
   --c-rate-active-scale: 1.2;
-  --c-rate-focus-color: var(--c-sys-color-content-brand);
+  --c-rate-focus-color: var(--c-sys-color-action-primary);
   --c-rate-focus-width: 2px;
   --c-rate-focus-offset: 2px;
   --c-rate-size: var(--c-font-size-title-3);

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;
@@ -106,18 +114,25 @@ 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");
@@ -130,6 +145,7 @@ function createRipple(event) {
     ripple.dataset.createdAt = String(performance.now());
     setStyles(this);
     if (!current()) {
+      if (this._ripple === _ripple) clearTasks(this);
       return;
     }
     this.appendChild(ripple);
@@ -137,6 +153,7 @@ 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;
@@ -145,10 +162,12 @@ 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;
@@ -168,6 +187,7 @@ function removeRipple() {
   const task = () => {
     const ripples = ownedRipples(this);
     if (!ripples.length) {
+      stopObserverIfIdle(this, _ripple);
       return;
     }
     const lastRipple = ripples[ripples.length - 1];
@@ -192,7 +212,10 @@ function removeRipple() {
         () => {
           waves.delete(lastRipple);
           lastRipple.remove();
-          if (!ownedRipples(this).length) restoreStyles(this);
+          if (!ownedRipples(this).length) {
+            restoreStyles(this);
+            stopObserverIfIdle(this, _ripple);
+          }
         },
         Math.max(MINIMUM_REMOVAL_DELAY, transitionTime(lastRipple, "opacity"))
       );
@@ -211,6 +234,7 @@ function forbidRippleTask() {
     _ripple.timers.delete(_ripple.tasker);
   }
   _ripple.tasker = null;
+  stopObserverIfIdle(this, _ripple);
 }
 function createTouchRipple(event) {
   if (this._ripple) {
@@ -246,6 +270,9 @@ 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) return;
@@ -253,6 +280,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);
@@ -284,6 +314,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) {
@@ -294,6 +327,28 @@ 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,
@@ -313,6 +368,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/scheduler/style/index.css

@@ -57,7 +57,7 @@
   --c-scheduler-lane-height: 38px;
   --c-scheduler-font-size: 14px;
   --c-scheduler-line-height: 1.5;
-  --c-scheduler-focus-color: var(--c-sys-color-content-brand);
+  --c-scheduler-focus-color: var(--c-sys-color-action-primary);
   --c-scheduler-now-color: var(--c-sys-color-content-danger);
   --c-scheduler-now-width: 2px;
   --c-scheduler-now-z-index: 3;

package/lib/search/HistoryContent.vue.js

@@ -2,8 +2,8 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const vue = require("vue");
 const globalConfig = require("../_utils/global-config.js");
-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 FieldSelect_vue_vue_type_script_setup_true_lang = require("./FieldSelect.vue.js");
 const _hoisted_1 = ["for"];
 const _hoisted_2 = ["disabled", "onClick"];
@@ -76,7 +76,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
               vue.createTextVNode(vue.toDisplayString(__props.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: __props.settings.loading && __props.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: __props.state.searchDisabled,

package/lib/search/props.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const props$1 = require("../field-decorator/props.js");
 const emptyValue = require("../_utils/empty-value.js");
-require("../input/index.js");
 const props = require("../input/props.js");
 const searchProps = {
   ...props$1.fieldLoadingProps,

package/lib/search/search.vue.js

@@ -7,7 +7,7 @@ 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 emptyValue = require("../_utils/empty-value.js");
 const globalConfig = require("../_utils/global-config.js");
-const button_index = require("../button/index.js");
+const base = require("../button/base.js");
 const icon_index = require("../icon/index.js");
 const input_vue_vue_type_script_setup_true_lang = require("../input/input.vue.js");
 const InputGroup_vue_vue_type_script_setup_true_lang = require("../input/InputGroup.vue.js");
@@ -235,7 +235,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
               ]),
               _: 3
             }, 8, ["open", "popup-container", "onUpdate:open", "onSelect"]),
-            vue.unref(effectiveShowAction) ? (vue.openBlock(), vue.createBlock(vue.unref(button_index.Button), vue.mergeProps({
+            vue.unref(effectiveShowAction) ? (vue.openBlock(), vue.createBlock(vue.unref(base.default), vue.mergeProps({
               key: 2,
               status: _ctx.searchButton ? "primary" : void 0,
               variant: _ctx.searchButton ? void 0 : "text"

package/lib/select/props.js

@@ -10,6 +10,8 @@ const formControl = require("../_utils/form-control.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

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

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

@@ -115,6 +115,7 @@ function useSelectController(props, { emit }) {
     () => 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);
@@ -336,6 +337,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,
@@ -375,6 +380,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) => {
@@ -399,6 +407,7 @@ function useSelectController(props, { emit }) {
       clearedValue = [];
     }
     session.update(clearedValue);
+    if (deferred.value && !needConfirm.value) void session.commit();
     updateInputValue("");
     if (!deferred.value) {
       eventHandlers.value?.onClear?.();
@@ -504,7 +513,9 @@ function useSelectController(props, { emit }) {
     props: vue.shallowReactive(props),
     listboxId,
     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,
@@ -550,7 +561,8 @@ function useSelectController(props, { emit }) {
     handleDropdownReachBottom,
     session,
     deferred,
-    canConfirm
+    canConfirm,
+    needConfirm
   };
 }
 exports.useSelectController = useSelectController;

package/lib/slider/Slider.vue.js

@@ -5,20 +5,34 @@ const globalConfig = require("../_utils/global-config.js");
 const sizeLength = require("../_utils/size-length.js");
 const model = require("./model.js");
 const errorDescription = require("../form/error-description.js");
+const labelContext = require("../form/label-context.js");
 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("@cedar-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: globalConfig.createNamespace("slider").name },
+  ...{ name: globalConfig.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 } = globalConfig.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);
@@ -292,21 +306,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,
@@ -345,6 +360,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],
@@ -374,8 +390,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, {
@@ -389,12 +405,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

@@ -17,6 +17,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"],
@@ -40,7 +42,7 @@ 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"))
@@ -54,7 +56,7 @@ 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"))