@cedar-design/ui-vue 1.1.0 → 1.1.1

package/es/people-select/selection.mjs

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

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

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

package/es/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/es/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/es/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/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;
@@ -104,18 +112,25 @@ 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");
@@ -128,6 +143,7 @@ function createRipple(event) {
     ripple.dataset.createdAt = String(performance.now());
     setStyles(this);
     if (!current()) {
+      if (this._ripple === _ripple) clearTasks(this);
       return;
     }
     this.appendChild(ripple);
@@ -135,6 +151,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;
@@ -143,10 +160,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;
@@ -166,6 +185,7 @@ function removeRipple() {
   const task = () => {
     const ripples = ownedRipples(this);
     if (!ripples.length) {
+      stopObserverIfIdle(this, _ripple);
       return;
     }
     const lastRipple = ripples[ripples.length - 1];
@@ -190,7 +210,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"))
       );
@@ -209,6 +232,7 @@ function forbidRippleTask() {
     _ripple.timers.delete(_ripple.tasker);
   }
   _ripple.tasker = null;
+  stopObserverIfIdle(this, _ripple);
 }
 function createTouchRipple(event) {
   if (this._ripple) {
@@ -244,6 +268,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;
@@ -251,6 +278,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);
@@ -282,6 +312,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) {
@@ -292,6 +325,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,
@@ -311,6 +366,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/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/es/search/HistoryContent.vue.mjs

@@ -1,7 +1,7 @@
 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 { createNamespace } from "../_utils/global-config.mjs";
-import { Button } from "../button/index.mjs";
-import { Input } from "../input/index.mjs";
+import Button from "../button/base.mjs";
+import SearchInput from "../input/base.mjs";
 import _sfc_main$1 from "./FieldSelect.vue.mjs";
 const _hoisted_1 = ["for"];
 const _hoisted_2 = ["disabled", "onClick"];
@@ -74,7 +74,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               createTextVNode(toDisplayString(__props.settings.label), 1)
             ])
           ], 10, _hoisted_1)) : createCommentVNode("", true),
-          createVNode(unref(Input), mergeProps({
+          createVNode(unref(SearchInput), mergeProps({
             ref_key: "inputRef",
             ref: inputRef,
             loading: __props.settings.loading && __props.settings.loadingMode === "line",

package/es/search/props.mjs

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

package/es/search/search.vue.mjs

@@ -5,7 +5,7 @@ import { useFieldPresentation } from "../_components/field-presentation/context.
 import _sfc_main$1 from "../_components/field-presentation/FieldPresentation.vue.mjs";
 import { useEmptyValues } from "../_utils/empty-value.mjs";
 import { createNamespace } from "../_utils/global-config.mjs";
-import { Button } from "../button/index.mjs";
+import Button from "../button/base.mjs";
 import { Icon } from "../icon/index.mjs";
 import _sfc_main$4 from "../input/input.vue.mjs";
 import _sfc_main$2 from "../input/InputGroup.vue.mjs";

package/es/select/props.mjs

@@ -8,6 +8,8 @@ import { formControlVariants } from "../_utils/form-control.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

@@ -8,7 +8,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 SearchInput from "../input/base.mjs";
 import _sfc_main$4 from "../input/InputFeedback.vue.mjs";
 import { createNamespace } from "../_utils/global-config.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(SearchInput, {
         "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,12 @@ 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
    **********************************************/
   --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/es/select/use-select-controller.mjs

@@ -113,6 +113,7 @@ function useSelectController(props, { emit }) {
     () => 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);
@@ -334,6 +335,10 @@ function useSelectController(props, { emit }) {
         handleOpenChange(false);
       }
     }
+    nativeOwner?.onSelect?.(ev);
+    if (deferred.value && !needConfirm.value) {
+      void session.commit(ev);
+    }
   };
   const handleSearch = useFieldSearch(
     () => props.searchDelay,
@@ -373,6 +378,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) => {
@@ -397,6 +405,7 @@ function useSelectController(props, { emit }) {
       clearedValue = [];
     }
     session.update(clearedValue);
+    if (deferred.value && !needConfirm.value) void session.commit();
     updateInputValue("");
     if (!deferred.value) {
       eventHandlers.value?.onClear?.();
@@ -502,7 +511,9 @@ function useSelectController(props, { emit }) {
     props: shallowReactive(props),
     listboxId,
     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,
@@ -548,7 +559,8 @@ function useSelectController(props, { emit }) {
     handleDropdownReachBottom,
     session,
     deferred,
-    canConfirm
+    canConfirm,
+    needConfirm
   };
 }
 export {

package/es/slider/Slider.vue.mjs

@@ -1,22 +1,36 @@
-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 { createNamespace } from "../_utils/global-config.mjs";
 import { positiveLength } from "../_utils/size-length.mjs";
 import { sliderBounds, sliderValues, snap, stepValue } from "./model.mjs";
 import { useFormErrorDescription } from "../form/error-description.mjs";
+import { useFormItemLabel } from "../form/label-context.mjs";
 import { sliderProps } from "./props.mjs";
 import _sfc_main$1 from "./SliderInput.vue.mjs";
 import { useSliderForm } from "./use-slider-form.mjs";
 import { useDirection } from "@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__ */ 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);
@@ -290,21 +304,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,
@@ -343,6 +358,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],
@@ -372,8 +388,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, {
@@ -387,12 +403,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

@@ -15,6 +15,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"],
@@ -38,7 +40,7 @@ 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"))
@@ -52,7 +54,7 @@ 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-c-theme]) {
-  --c-slider-active-color: var(--c-sys-color-content-brand);
+  --c-slider-active-color: var(--c-sys-color-action-primary);
   --c-slider-track-color: var(--c-sys-color-state-hover);
   --c-slider-thumb-color: var(--c-sys-color-surface-default);
-  --c-slider-thumb-border-color: var(--c-sys-color-content-brand);
+  --c-slider-thumb-border-color: var(--c-sys-color-action-primary);
   --c-slider-text-color: var(--c-sys-color-content-secondary);
   --c-slider-tooltip-background: var(--c-sys-color-surface-tooltip);
   --c-slider-tooltip-color: var(--c-sys-color-content-on-dark);