@cedar-design/ui-vue 1.1.0 → 1.1.1

package/es/trigger/trigger.mjs

@@ -144,7 +144,7 @@ const _Trigger = /* @__PURE__ */ defineComponent({
     });
     return () => {
       const referenceNodes = mergeFirstReferenceClass(slots.default?.() ?? [], visible.value ? props.openedClass : void 0);
-      const contentNodes = slots.content?.() ?? [];
+      const contentNodes = renderState.rendered.value ? slots.content?.() ?? [] : [];
       const hiddenByEmpty = props.hideEmpty && isEmptyContent(contentNodes);
       nodes.value = referenceNodes;
       return createVNode(Fragment, null, [referenceNodes, createVNode(Teleport, {

package/es/upload/composables/use-upload-queue.mjs

@@ -2,10 +2,13 @@ import { ref, computed, nextTick } from "vue";
 function useUploadQueue(options) {
   const inner = ref((options.defaultValue?.() ?? []).map((file) => ({ ...file })));
   const fileList = computed(() => options.modelValue?.() ?? inner.value);
+  let revision = 0;
   let pending;
   let pendingBase;
   const mutationList = () => pending && fileList.value === pendingBase ? pending : fileList.value;
   function commit(next, changed) {
+    const currentRevision = ++revision;
+    const startedActive = options.isActive?.() ?? true;
     pendingBase = fileList.value;
     pending = next;
     if (options.modelValue?.() === void 0) inner.value = next;
@@ -16,7 +19,7 @@ function useUploadQueue(options) {
       }
     });
     options.onUpdateModelValue?.(next);
-    options.onChange?.(next, changed);
+    if (revision === currentRevision && (!startedActive || (options.isActive?.() ?? true))) options.onChange?.(next, changed);
   }
   function append(files) {
     if (files.length) commit([...mutationList(), ...files], files[0]);
@@ -55,6 +58,11 @@ function useUploadQueue(options) {
   }
   function reset() {
     if (fileList.value.length) commit([]);
+    else {
+      revision++;
+      pending = void 0;
+      pendingBase = void 0;
+    }
   }
   return {
     fileList,

package/es/upload/composables/use-uploader.mjs

@@ -9,6 +9,7 @@ import { useFilePicker } from "./use-file-picker.mjs";
 import { useUploadQueue } from "./use-upload-queue.mjs";
 function useUploader(options) {
   const feedback = usePendingFeedback();
+  const preparation = usePendingFeedback();
   let active = true;
   let inactive = false;
   let generation = 0;
@@ -26,7 +27,8 @@ function useUploader(options) {
     modelValue: options.modelValue,
     defaultValue: options.defaultValue,
     onChange: options.onChange,
-    onUpdateModelValue: options.onUpdateModelValue
+    onUpdateModelValue: options.onUpdateModelValue,
+    isActive: () => active && !inactive
   });
   const replacementTarget = ref();
   const metadataVersion = ref(0);
@@ -164,8 +166,8 @@ function useUploader(options) {
   }
   function enqueue(files, rejected, previous) {
     const epoch = generation;
-    adding = adding.then(() => prepareFiles(files, rejected, epoch, previous)).catch(() => {
-    });
+    adding = preparation.track(() => adding.then(() => prepareFiles(files, rejected, epoch, previous)).catch(() => {
+    }));
     return adding;
   }
   async function prepareFiles(files, initialRejected, epoch, previous) {
@@ -177,7 +179,9 @@ function useUploader(options) {
         candidates = await feedback.track(() => options.beforeAdd(files));
         for (const file of files) if (!candidates.includes(file)) rejected.push({ file, reason: "before-add" });
       } catch {
-        reject([...rejected, ...files.map((file) => ({ file, reason: "before-add" }))]);
+        if (valid(epoch)) {
+          reject([...rejected, ...files.map((file) => ({ file, reason: "before-add" }))]);
+        }
         return;
       }
     }
@@ -248,7 +252,15 @@ function useUploader(options) {
       return;
     }
     reject(rejected);
+    if (!valid(epoch)) {
+      items.forEach((item) => release(item.uid));
+      return;
+    }
     if (rejected.some((file) => file.reason === "max-files")) options.onExceed?.(candidates, queue.fileList.value);
+    if (!valid(epoch)) {
+      items.forEach((item) => release(item.uid));
+      return;
+    }
     if (!items.length) return;
     if (previous) {
       if (!sameTarget(previous)) {
@@ -268,9 +280,13 @@ function useUploader(options) {
     items.forEach((file) => pendingAuto.add(file.uid));
     if (previous) {
       queue.replace(previous, items[0]);
+      if (!valid(epoch)) return;
       options.onReplace?.(items[0], previous);
     } else queue.append(items);
-    items.forEach((file) => options.onRead?.(reactive(file)));
+    for (const file of items) {
+      if (!valid(epoch)) return;
+      options.onRead?.(reactive(file));
+    }
     await nextTick();
   }
   async function submit(file) {
@@ -280,6 +296,7 @@ function useUploader(options) {
   }
   async function uploadFile(file) {
     if (attempts.has(file.uid)) return;
+    const epoch = generation;
     const attempt = {};
     attempts.set(file.uid, attempt);
     const current = () => active && !inactive && attempts.get(file.uid) === attempt && queue.fileList.value.some(
@@ -330,7 +347,7 @@ function useUploader(options) {
           status: changed.status,
           percent: changed.percent
         });
-        options.onProgress?.(changed, event);
+        if (valid(epoch) && current()) options.onProgress?.(changed, event);
       };
       const handleSuccess = (response) => {
         if (!current()) return;
@@ -346,7 +363,7 @@ function useUploader(options) {
           percent: changed.percent,
           response
         });
-        options.onSuccess?.(changed);
+        if (valid(epoch)) options.onSuccess?.(changed);
       };
       const handleError = (error) => {
         if (!current()) return;
@@ -362,7 +379,7 @@ function useUploader(options) {
           percent: changed.percent,
           error
         });
-        options.onError?.(changed);
+        if (valid(epoch)) options.onError?.(changed);
       };
       const requestOptions = {
         action: options.action?.(),
@@ -392,7 +409,7 @@ function useUploader(options) {
       attempts.delete(file.uid);
       const changed = { ...item, status: "error", percent: 0, error };
       queue.patch(file.uid, changed);
-      options.onError?.(changed);
+      if (valid(epoch)) options.onError?.(changed);
     }
   }
   function abort(file) {
@@ -421,7 +438,7 @@ function useUploader(options) {
       cancelAttempt(file.uid);
       pendingAuto.delete(file.uid);
       queue.remove(file);
-      options.onRemove?.(file);
+      if (valid(epoch)) options.onRemove?.(file);
     } catch {
     } finally {
       if (removals.get(file.uid) === token) removals.delete(file.uid);
@@ -444,8 +461,9 @@ function useUploader(options) {
     });
   }
   function reset() {
-    feedback.cancel();
     if (disabled.value) return;
+    feedback.cancel();
+    preparation.cancel();
     generation++;
     replacementTarget.value = void 0;
     adding = Promise.resolve();
@@ -486,6 +504,8 @@ function useUploader(options) {
   });
   return {
     guardPending: feedback.pending,
+    /** @internal Coordinates deferred field confirmation with file preparation. */
+    editorPending: computed(() => feedback.pending.value || preparation.pending.value),
     fileList: queue.fileList,
     maxReached,
     disabled,

package/es/upload/upload.vue.mjs

@@ -1,5 +1,6 @@
-import { defineComponent, ref, watch, onBeforeUnmount, openBlock, createElementBlock, unref, normalizeClass, createElementVNode, createVNode, withDirectives, renderSlot, toDisplayString, createCommentVNode, Fragment, renderList, mergeProps, normalizeStyle } from "vue";
+import { defineComponent, ref, inject, watch, onBeforeUnmount, openBlock, createElementBlock, unref, normalizeClass, createElementVNode, createVNode, withDirectives, renderSlot, toDisplayString, createCommentVNode, Fragment, renderList, mergeProps, normalizeStyle } from "vue";
 import _sfc_main$1 from "../_components/pending-feedback/PendingFeedback.vue.mjs";
+import { fieldEditorControlPending } from "../_components/field-presentation/editor-pending.mjs";
 import { IconEye, IconDownload, IconClose, IconRefresh } from "@cedar-design/icons-vue";
 import { createNamespace, formatElevation } from "../_utils/global-config.mjs";
 import { ImagePreviewFn as previewImage } from "../image/preview-api.mjs";
@@ -133,6 +134,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         }
       }
     });
+    const editorPending = inject(fieldEditorControlPending, void 0);
+    watch(uploader.editorPending, (value) => {
+      if (editorPending) editorPending.value = value;
+    }, { flush: "sync" });
+    onBeforeUnmount(() => {
+      if (editorPending) editorPending.value = false;
+    });
     const {
       fileList,
       maxReached,
@@ -248,7 +256,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           class: normalizeClass(unref(n)("input")),
           type: "file",
           accept: _ctx.accept,
-          capture: _ctx.capture,
+          capture: _ctx.capture === false ? void 0 : _ctx.capture === true ? "" : _ctx.capture,
           multiple: !unref(replacementTarget) && (_ctx.multiple || _ctx.directory),
           disabled: unref(disabledState),
           webkitdirectory: !unref(replacementTarget) && _ctx.directory || void 0,

package/lib/_components/field-presentation/EditorPanel.vue.js

@@ -2,7 +2,7 @@
 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 base = require("../../button/base.js");
 const locale_index = require("../../locale/index.js");
 const context = require("./context.js");
 const editorActions = require("./editor-actions.js");
@@ -124,7 +124,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
           }, [
             auxiliaryActions.value ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(auxiliaryActions.value), { key: 0 })) : vue.createCommentVNode("", true)
           ], 2),
-          __props.clearable ? (vue.openBlock(), vue.createBlock(vue.unref(button_index.Button), {
+          __props.clearable ? (vue.openBlock(), vue.createBlock(vue.unref(base.default), {
             key: 0,
             variant: "text",
             disabled: __props.disabled || __props.pending,
@@ -137,7 +137,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
             ]),
             _: 1
           }, 8, ["disabled"])) : vue.createCommentVNode("", true),
-          __props.needConfirm ? (vue.openBlock(), vue.createBlock(vue.unref(button_index.Button), {
+          __props.needConfirm ? (vue.openBlock(), vue.createBlock(vue.unref(base.default), {
             key: 1,
             status: "primary",
             loading: __props.pending,

package/lib/_components/field-presentation/editor-pending.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const fieldEditorControlPending = Symbol("field-editor-control-pending");
+exports.fieldEditorControlPending = fieldEditorControlPending;

package/lib/_components/field-presentation/with-field-presentation.js

@@ -7,6 +7,7 @@ const context$1 = require("../../input/context.js");
 const useSelectionSession = require("../selection-field/use-selection-session.js");
 const context = require("./context.js");
 const FieldPresentation_vue_vue_type_script_setup_true_lang = require("./FieldPresentation.vue.js");
+const editorPending = require("./editor-pending.js");
 const formBridge = require("./form-bridge.js");
 function cloneValue(value, seen = /* @__PURE__ */ new WeakMap()) {
   if (value instanceof Date) {
@@ -25,7 +26,7 @@ function cloneValue(value, seen = /* @__PURE__ */ new WeakMap()) {
   }
   return result;
 }
-function sameFieldValue(left, right, seen = /* @__PURE__ */ new WeakMap()) {
+function sameFieldValue(left, right, seen = /* @__PURE__ */ new WeakMap(), reverse = /* @__PURE__ */ new WeakMap()) {
   if (Object.is(left, right)) {
     return true;
   }
@@ -41,12 +42,16 @@ function sameFieldValue(left, right, seen = /* @__PURE__ */ new WeakMap()) {
   if (!Array.isArray(left) && Object.getPrototypeOf(left) !== Object.prototype) {
     return false;
   }
-  if (seen.get(left) === right) {
-    return true;
+  if (seen.has(left) || reverse.has(right)) {
+    return seen.get(left) === right && reverse.get(right) === left;
   }
   seen.set(left, right);
+  reverse.set(right, left);
   const keys = Object.keys(left);
-  return keys.length === Object.keys(right).length && keys.every((key) => Object.prototype.hasOwnProperty.call(right, key) && sameFieldValue(left[key], right[key], seen));
+  const result = keys.length === Object.keys(right).length && keys.every((key) => Object.prototype.hasOwnProperty.call(right, key) && sameFieldValue(left[key], right[key], seen, reverse));
+  seen.delete(left);
+  reverse.delete(right);
+  return result;
 }
 function formatFieldValue(value) {
   if (value == null || value === "") {
@@ -122,6 +127,8 @@ function withFieldPresentation(Base, adapter = {}) {
         readonly: vue.computed(() => props.readonly ?? inputGroup?.readonly.value),
         size: vue.computed(() => props.size ?? inputGroup?.size.value)
       });
+      const editorControlPending = vue.ref(false);
+      vue.provide(editorPending.fieldEditorControlPending, editorControlPending);
       const inner = vue.shallowRef();
       const host = vue.ref();
       const localValue = vue.shallowRef(props.defaultValue ?? props.modelValue);
@@ -242,9 +249,22 @@ function withFieldPresentation(Base, adapter = {}) {
           }
         }
       });
+      const needConfirm = vue.computed(() => !adapter.selectionConfirmation || (props.needConfirm ?? Boolean(props.multiple)));
+      const showConfirm = vue.computed(
+        () => needConfirm.value || adapter.selectionConfirmation === "select" && !sameFieldValue(session.draft.value, value.value)
+      );
+      const completeSelection = () => {
+        const candidate = cloneValue(session.draft.value);
+        void Promise.resolve(session.commit()).then((accepted) => {
+          if (!accepted && open.value && !session.pending.value && sameFieldValue(session.draft.value, candidate)) {
+            session.update(value.value);
+          }
+        });
+      };
       const updateDraft = (next) => {
         if (open.value && !blocked.value) {
           session.update(next);
+          if (adapter.selectionConfirmation === "update" && !needConfirm.value) completeSelection();
         }
       };
       const clearDraft = () => {
@@ -253,6 +273,7 @@ function withFieldPresentation(Base, adapter = {}) {
         }
         const fallback = "uncheckedValue" in props ? props.uncheckedValue : typeof props.defaultValue === "boolean" ? false : Array.isArray(value.value) ? [] : props.defaultValue;
         session.update(emptyValue.resolveEmptyValue(props, fallback));
+        if (!needConfirm.value) void session.commit();
       };
       const clearReference = async () => {
         if (blocked.value || selectionPaused.value || session.pending.value) {
@@ -270,8 +291,10 @@ function withFieldPresentation(Base, adapter = {}) {
         state.item?.resetValidation?.();
       };
       const confirm = async (event) => {
+        if (editorControlPending.value) return false;
         inner.value?.blur?.();
         await vue.nextTick();
+        if (editorControlPending.value) return false;
         return session.commit(event);
       };
       vue.watch(
@@ -481,6 +504,9 @@ function withFieldPresentation(Base, adapter = {}) {
             (...args) => {
               if (event === "update:modelValue") {
                 updateDraft(args[0]);
+              } else if (event === "select" && adapter.selectionConfirmation === "select" && !needConfirm.value) {
+                emit(event, ...args);
+                void session.commit();
               } else if (adapter.commitEvents?.[event]) {
                 if (open.value && !blocked.value && !session.pending.value) commitNotifications.set(event, args);
               } else if (event !== "change" && event !== "update:open" && event !== "open-change") {
@@ -539,12 +565,12 @@ function withFieldPresentation(Base, adapter = {}) {
             open: open.value,
             disabled: form.mergedDisabled.value,
             readonly: form.mergedReadonly.value,
-            needConfirm: true,
+            needConfirm: showConfirm.value,
             clearable: props.clearable && !selectionPaused.value,
             onClear: clearDraft,
             loading: Boolean(props.loading || adapter.pauseSelectionWhileLoading && source?.loading.value),
             pending: session.pending.value,
-            confirmDisabled: selectionPaused.value || !validDraft(session.draft.value),
+            confirmDisabled: editorControlPending.value || selectionPaused.value || !validDraft(session.draft.value),
             error: session.error.value || state.item?.message?.value,
             onOpen: setOpen,
             onEditorReady,

package/lib/_components/picker-field/PickerField.vue.js

@@ -6,14 +6,13 @@ const FieldDecorator_vue_vue_type_script_setup_true_lang = require("../../field-
 const props$1 = require("../../field-decorator/props.js");
 const errorDescription = require("../../form/error-description.js");
 const labelContext = require("../../form/label-context.js");
-const locale_index = require("../../locale/index.js");
-const zhCn = require("../../locale/lang/zh-cn.js");
 const nativeAttrs = require("../../input/native-attrs.js");
 const globalConfig = require("../../_utils/global-config.js");
 const texts = require("../field-presentation/texts.js");
 const openTrigger = require("./open-trigger.js");
 const props = require("./props.js");
 const rangeFieldContext = require("./range-field-context.js");
+const rangeLabels = require("./range-labels.js");
 const _hoisted_1 = ["role", "aria-labelledby"];
 const _hoisted_2 = ["id"];
 const _hoisted_3 = ["id", "value", "placeholder", "disabled", "readonly", "aria-expanded", "aria-invalid", "aria-describedby", "aria-haspopup", "onFocus", "onClick", "onBlur", "onInput", "onCompositionend", "onKeydown"];
@@ -34,7 +33,9 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     function inputAttributes(index) {
       const part = { ...props2.inputAttrs?.[index] ?? {} };
       for (const key of ["aria-label", "aria-labelledby"]) {
-        if (part[key] === void 0 || part[key] === null) delete part[key];
+        if (part[key] === void 0 || part[key] === null) {
+          delete part[key];
+        }
       }
       const common = nativeAttrs.splitInputAttrs(attrs).native;
       const merged = vue.mergeProps(common, part);
@@ -76,14 +77,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     });
     const explicitRangeLabel = vue.computed(() => props2.range && formLabel?.value?.target ? groupLabelId.value : void 0);
     const endpointLabelId = (index) => `${generatedId}-range-endpoint-${index}`;
-    const { i18nMessage } = locale_index.useI18n();
-    const endpointLabels = vue.computed(() => {
-      const legacy = i18nMessage.value.datePicker?.rangePlaceholder?.[props2.kind] ?? zhCn.default.datePicker.rangePlaceholder[props2.kind];
-      return [
-        i18nMessage.value.fieldPresentation?.rangeStart ?? legacy[0],
-        i18nMessage.value.fieldPresentation?.rangeEnd ?? legacy[1]
-      ];
-    });
+    const endpointLabels = rangeLabels.usePickerRangeLabels(() => props2.kind);
     const inputs = [];
     const activeIndex = rangeFieldContext.useRangeFieldIndex(() => props2.disabledParts);
     const active = vue.ref(false);
@@ -258,7 +252,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                     key: 2,
                     id: endpointLabelId(index),
                     hidden: ""
-                  }, vue.toDisplayString(endpointLabels.value[index]), 9, _hoisted_2)) : vue.createCommentVNode("", true),
+                  }, vue.toDisplayString(vue.unref(endpointLabels)[index]), 9, _hoisted_2)) : vue.createCommentVNode("", true),
                   vue.createElementVNode("input", vue.mergeProps({ ref_for: true }, inputAttributes(index), {
                     id: props2.inputAttrs?.[index]?.id ?? (index === 0 ? controlId.value : controlId.value + "-" + index),
                     ref_for: true,

package/lib/_components/picker-field/range-labels.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const vue = require("vue");
+const locale_index = require("../../locale/index.js");
+const zhCn = require("../../locale/lang/zh-cn.js");
+function usePickerRangeLabels(kind) {
+  const { i18nMessage } = locale_index.useI18n();
+  return vue.computed(() => {
+    const legacy = i18nMessage.value.datePicker?.rangePlaceholder?.[kind()] ?? zhCn.default.datePicker.rangePlaceholder[kind()];
+    return [
+      i18nMessage.value.fieldPresentation?.rangeStart ?? legacy[0],
+      i18nMessage.value.fieldPresentation?.rangeEnd ?? legacy[1]
+    ];
+  });
+}
+exports.usePickerRangeLabels = usePickerRangeLabels;

package/lib/_components/selected-options/style/index.css

@@ -72,7 +72,7 @@
 .c-selected-options__toggle:focus-visible,
 .c-selected-options__clear:focus-visible,
 .c-selected-options__remove:focus-visible {
-  outline: 2px solid var(--c-sys-color-content-brand);
+  outline: 2px solid var(--c-sys-color-action-primary);
   outline-offset: 1px;
 }
 .c-selected-options__toggle {
@@ -208,10 +208,13 @@
   white-space: normal;
   overflow-wrap: anywhere;
 }
-.c-selection-editor .c-select-option.c-select-option-selected,
-.c-selection-editor .c-select-option.c-select-option-selected:hover {
-  background: var(--c-selection-editor-selected-background);
-  color: var(--c-selection-editor-accent);
+.c-selection-editor .c-select-option.c-select-option-selected:not(.c-select-option-disabled) {
+  background: var(--c-select-popup-option-bg-selected);
+  color: var(--c-select-popup-option-text-color-selected);
+}
+.c-selection-editor .c-select-option.c-select-option-selected:not(.c-select-option-disabled):hover,
+.c-selection-editor .c-select-option.c-select-option-selected:not(.c-select-option-disabled).c-select-option-active {
+  background: var(--c-select-popup-option-bg-selected-hover);
 }
 .c-selection-editor .c-select-option-disabled {
   opacity: var(--c-selected-options-disabled-opacity);
@@ -239,9 +242,13 @@
   white-space: normal;
   overflow-wrap: anywhere;
 }
-.c-selection-editor .c-cascader-option > span:first-child {
-  order: 2;
-  margin-inline-start: var(--c-selection-editor-gap);
+.c-selection-editor .c-cascader-option .c-cascader-option-checkbox {
+  order: -1;
+  flex: none;
+  margin-inline-end: var(--c-selection-editor-gap);
+}
+.c-selection-editor .c-cascader-option .c-cascader-option-checkbox .c-checkbox {
+  margin-inline-end: 0;
 }
 .c-selection-editor .c-selection-indicator {
   margin: 0;
@@ -249,11 +256,13 @@
   height: var(--c-selection-editor-check-size);
   border-radius: var(--c-selection-editor-radius);
 }
-.c-selection-editor .c-cascader-option.c-cascader-option-selected,
-.c-selection-editor .c-cascader-option.c-cascader-option-selected:hover,
-.c-selection-editor .c-cascader-option-active {
-  background: var(--c-selection-editor-selected-background);
-  color: var(--c-selection-editor-accent);
+.c-selection-editor .c-cascader-option.c-cascader-option-selected:not(.c-cascader-option-disabled) {
+  background: var(--c-cascader-item-bg-active);
+  color: var(--c-cascader-item-text-color-active);
+}
+.c-selection-editor .c-cascader-option.c-cascader-option-selected:not(.c-cascader-option-disabled):hover,
+.c-selection-editor .c-cascader-option.c-cascader-option-selected:not(.c-cascader-option-disabled).c-cascader-option-active {
+  background: var(--c-cascader-item-bg-hover);
 }
 .c-selection-editor--mobile {
   width: 100%;
@@ -268,8 +277,6 @@
 .c-selection-editor--mobile .c-select-dropdown .c-select-option,
 .c-selection-editor--mobile .c-cascader-option {
   min-height: var(--c-selection-editor-touch-height);
-  border-radius: 0;
-  border-bottom: 1px solid var(--c-selection-editor-border);
   font-size: var(--c-selection-editor-touch-font-size);
 }
 .c-selection-editor--mobile .c-selection-indicator {
@@ -394,3 +401,14 @@
 .c-selection-editor--mobile .c-tree-node {
   min-height: var(--c-selection-editor-touch-height);
 }
+.c-selection-editor--select .c-select-dropdown .c-select-dropdown-list-wrapper,
+.c-selection-editor--auto-complete .c-select-dropdown .c-select-dropdown-list-wrapper,
+.c-selection-editor--people-select .c-select-dropdown .c-select-dropdown-list-wrapper {
+  padding-inline: var(--c-select-popup-padding-horizontal);
+}
+.c-selection-editor--select.c-selection-editor--mobile .c-select-dropdown .c-select-option,
+.c-selection-editor--auto-complete.c-selection-editor--mobile .c-select-dropdown .c-select-option,
+.c-selection-editor--people-select.c-selection-editor--mobile .c-select-dropdown .c-select-option {
+  border-radius: var(--c-select-popup-option-border-radius);
+  border-bottom: 0;
+}

package/lib/_components/selection-field/use-selection-session.js

@@ -55,6 +55,7 @@ function useSelectionSession(options) {
     if (options.blocked() || settled.value || pending.value || !options.open.value || options.valid?.(draft.value) === false) {
       return false;
     }
+    error.value = "";
     const next = options.clone(draft.value);
     const run = ++epoch;
     const finish = (allowed) => {

package/lib/_components/virtual-list-v2/VirtualList2.vue.js

@@ -107,6 +107,8 @@ const _sfc_main = vue.defineComponent({
       await vue.nextTick();
       updateViewport();
     });
+    let retainedInlineOffset;
+    let retainedScrollTop;
     let scrollRequest = 0;
     let commandedScroll;
     let mounted = false;
@@ -117,10 +119,25 @@ const _sfc_main = vue.defineComponent({
     vue.onMounted(() => {
       mounted = true;
     });
-    vue.onActivated(() => {
-      if (!disposed) active = true;
+    vue.onActivated(async () => {
+      if (disposed) return;
+      active = true;
+      const element = containerRef.value;
+      const request = scrollRequest;
+      const retained = retainedScrollTop;
+      const retainedInline = retainedInlineOffset;
+      retainedScrollTop = void 0;
+      retainedInlineOffset = void 0;
+      if (element && retainedInline !== void 0 && isCurrent(request, element) && direction.inlineScrollLeft(element) === 0) direction.setInlineScrollLeft(element, retainedInline);
+      await vue.nextTick();
+      if (element && retained !== void 0 && isCurrent(request, element) && element.scrollTop === 0) {
+        element.scrollTop = retained;
+        if (virtualEnabled.value) setStart(getStartByScroll(element.scrollTop));
+      }
     });
     vue.onDeactivated(() => {
+      retainedScrollTop = scrollOffset.value;
+      retainedInlineOffset = readingOffset;
       active = false;
       scrollRequest++;
       commandedScroll = void 0;
@@ -222,6 +239,7 @@ const _sfc_main = vue.defineComponent({
       if (is.isNumber(options)) {
         if (Number.isFinite(options)) {
           element.scrollTop = Math.max(0, options);
+          scrollOffset.value = element.scrollTop;
           if (virtualEnabled.value) setStart(getStartByScroll(element.scrollTop));
         }
         return;

package/lib/_utils/modal-focus.js

@@ -64,6 +64,13 @@ function useModalFocus(root, active, isTop, lockScroll = () => true, ownerDocume
     element = target;
     if (!target.contains(target.ownerDocument.activeElement)) target.focus({ preventScroll: true });
   }
+  function focusAfterEnter() {
+    const doc = root()?.ownerDocument;
+    const current = doc?.activeElement;
+    if (!current || current === doc?.body || current === doc?.documentElement || previous.includes(current)) {
+      focus();
+    }
+  }
   function restore() {
     const focused = owner?.activeElement;
     const target = previous.find(restorable);
@@ -146,7 +153,7 @@ function useModalFocus(root, active, isTop, lockScroll = () => true, ownerDocume
       unbind();
       bind();
     }
-    if (value) capture();
+    if (value && (!captured || root() !== element)) capture();
   }, { flush: "post" });
   vue.onMounted(() => {
     mounted = true;
@@ -169,6 +176,6 @@ function useModalFocus(root, active, isTop, lockScroll = () => true, ownerDocume
     unbind();
     restore();
   });
-  return { focus, restore, trap };
+  return { focus, focusAfterEnter, restore, trap };
 }
 exports.useModalFocus = useModalFocus;

package/lib/_utils/modal-surface.js

@@ -46,7 +46,7 @@ function useModalSurface(options) {
     mergedZIndex,
     modalDocument
   );
-  const { focus, restore } = modalFocus.useModalFocus(
+  const { focus, focusAfterEnter, restore } = modalFocus.useModalFocus(
     () => options.root.value?.querySelector("[data-modal-focus-root]") ?? options.root.value,
     () => mergedOpen.value,
     onStackTop,
@@ -54,7 +54,13 @@ function useModalSurface(options) {
     modalDocument
   );
   vue.watch([popupContainerTarget, () => options.popupContainer() === false], () => {
-    vue.nextTick(focus);
+    vue.nextTick(() => {
+      const doc = modalDocument();
+      const current = doc?.activeElement;
+      if (!current || current === doc?.body || current === doc?.documentElement) {
+        focus();
+      }
+    });
   }, { flush: "post" });
   scrollLock.useScrollLock(
     () => scrollLockTarget.value,
@@ -128,7 +134,7 @@ function useModalSurface(options) {
   vue.onBeforeUnmount(unbind);
   function opened() {
     if (mergedOpen.value) {
-      focus();
+      focusAfterEnter();
       transition.opened();
     }
   }

package/lib/anchor/style/index.css

@@ -14,7 +14,7 @@
   --c-anchor-title-margin-bottom: var(--c-spacing-1);
   --c-anchor-color-title: var(--c-color-text-2);
   --c-anchor-color-title-hover: rgb(var(--c-primary-5));
-  --c-anchor-color-title-active: var(--c-sys-color-content-brand);
+  --c-anchor-color-title-active: var(--c-sys-color-action-primary);
   --c-anchor-font-weight-title-hover: var(--c-font-weight-500);
   --c-anchor-font-weight-title-active: var(--c-font-weight-500);
   --c-anchor-color-bg-title-hover: var(--c-color-fill-2);

package/lib/auto-complete/auto-complete.js

@@ -8,7 +8,7 @@ const useOptionRequest = require("../_hooks/use-option-request.js");
 const globalConfig = require("../_utils/global-config.js");
 const is = require("../_utils/is.js");
 const textInputValue = require("../_utils/text-input-value.js");
-const input_index = require("../input/index.js");
+const base = require("../input/base.js");
 const useInputForm = require("../input/use-input-form.js");
 const useSelect = require("../select/hooks/use-select.js");
 const Optgroup = require("../select/Optgroup.vue.js");
@@ -356,7 +356,7 @@ const Base = /* @__PURE__ */ vue.defineComponent({
       "aria-activedescendant": computedOpen.value && !loading.value && activeKey.value && enabledOptionKeys.value.includes(activeKey.value) && optionRefs.value[activeKey.value] ? getOptionId(activeKey.value) : void 0,
       autocomplete: "off"
     }));
-    const renderInput = (restAttrs) => vue.createVNode(input_index.Input, vue.mergeProps({
+    const renderInput = (restAttrs) => vue.createVNode(base.default, vue.mergeProps({
       "loading": loading.value,
       "loadingMode": props$1.loadingMode
     }, restAttrs, {