@cedar-design/ui-vue 1.1.0 → 1.1.1

package/es/_components/field-presentation/EditorPanel.vue.mjs

@@ -1,6 +1,6 @@
 import { defineComponent, shallowRef, provide, computed, ref, openBlock, createElementBlock, normalizeClass, unref, createElementVNode, toDisplayString, createCommentVNode, renderSlot, createBlock, resolveDynamicComponent, withModifiers, withCtx, createTextVNode, Fragment } from "vue";
 import { createNamespace } from "../../_utils/global-config.mjs";
-import { Button } from "../../button/index.mjs";
+import Button from "../../button/base.mjs";
 import { useI18n } from "../../locale/index.mjs";
 import { fieldEditorBoundary, fieldEditorPanel, fieldEditorEnterSubmits } from "./context.mjs";
 import { editorAuxiliaryActions } from "./editor-actions.mjs";

package/es/_components/field-presentation/editor-pending.mjs

@@ -0,0 +1,4 @@
+const fieldEditorControlPending = Symbol("field-editor-control-pending");
+export {
+  fieldEditorControlPending
+};

package/es/_components/field-presentation/with-field-presentation.mjs

@@ -1,10 +1,11 @@
-import { defineComponent, getCurrentInstance, provide, computed, inject, shallowRef, ref, watch, onBeforeUnmount, onDeactivated, onActivated, onMounted, nextTick, h, proxyRefs } from "vue";
+import { defineComponent, getCurrentInstance, provide, computed, inject, ref, shallowRef, watch, onBeforeUnmount, onDeactivated, onActivated, onMounted, h, nextTick, proxyRefs } from "vue";
 import { useOptionRequest, provideOptionRequest } from "../../_hooks/use-option-request.mjs";
 import { useEmptyValues, provideEmptyValues, resolveEmptyValue } from "../../_utils/empty-value.mjs";
 import { inputGroupKey } from "../../input/context.mjs";
 import { useSelectionSession } from "../selection-field/use-selection-session.mjs";
 import { useFieldPresentation, fieldEditorBoundary, fieldControlFormEvents, invokeBeforeCommit } from "./context.mjs";
 import _sfc_main from "./FieldPresentation.vue.mjs";
+import { fieldEditorControlPending } from "./editor-pending.mjs";
 import { usePresentationForm } from "./form-bridge.mjs";
 function cloneValue(value, seen = /* @__PURE__ */ new WeakMap()) {
   if (value instanceof Date) {
@@ -23,7 +24,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;
   }
@@ -39,12 +40,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 === "") {
@@ -120,6 +125,8 @@ function withFieldPresentation(Base, adapter = {}) {
         readonly: computed(() => props.readonly ?? inputGroup?.readonly.value),
         size: computed(() => props.size ?? inputGroup?.size.value)
       });
+      const editorControlPending = ref(false);
+      provide(fieldEditorControlPending, editorControlPending);
       const inner = shallowRef();
       const host = ref();
       const localValue = shallowRef(props.defaultValue ?? props.modelValue);
@@ -240,9 +247,22 @@ function withFieldPresentation(Base, adapter = {}) {
           }
         }
       });
+      const needConfirm = computed(() => !adapter.selectionConfirmation || (props.needConfirm ?? Boolean(props.multiple)));
+      const showConfirm = 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 = () => {
@@ -251,6 +271,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(resolveEmptyValue(props, fallback));
+        if (!needConfirm.value) void session.commit();
       };
       const clearReference = async () => {
         if (blocked.value || selectionPaused.value || session.pending.value) {
@@ -268,8 +289,10 @@ function withFieldPresentation(Base, adapter = {}) {
         state.item?.resetValidation?.();
       };
       const confirm = async (event) => {
+        if (editorControlPending.value) return false;
         inner.value?.blur?.();
         await nextTick();
+        if (editorControlPending.value) return false;
         return session.commit(event);
       };
       watch(
@@ -479,6 +502,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") {
@@ -537,12 +563,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/es/_components/picker-field/PickerField.vue.mjs

@@ -4,14 +4,13 @@ import _sfc_main$1 from "../../field-decorator/FieldDecorator.vue.mjs";
 import { fieldDecoratorProps } from "../../field-decorator/props.mjs";
 import { useFormErrorDescription } from "../../form/error-description.mjs";
 import { useFormItemLabel } from "../../form/label-context.mjs";
-import { useI18n } from "../../locale/index.mjs";
-import lang from "../../locale/lang/zh-cn.mjs";
 import { splitInputAttrs } from "../../input/native-attrs.mjs";
 import { createNamespace } from "../../_utils/global-config.mjs";
 import { useFieldTexts } from "../field-presentation/texts.mjs";
 import { isFieldOpenClick, blockFieldOpenClick } from "./open-trigger.mjs";
 import { pickerFieldProps } from "./props.mjs";
 import { useRangeFieldIndex } from "./range-field-context.mjs";
+import { usePickerRangeLabels } from "./range-labels.mjs";
 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"];
@@ -32,7 +31,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     function inputAttributes(index) {
       const part = { ...props.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 = splitInputAttrs(attrs).native;
       const merged = mergeProps(common, part);
@@ -74,14 +75,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     const explicitRangeLabel = computed(() => props.range && formLabel?.value?.target ? groupLabelId.value : void 0);
     const endpointLabelId = (index) => `${generatedId}-range-endpoint-${index}`;
-    const { i18nMessage } = useI18n();
-    const endpointLabels = computed(() => {
-      const legacy = i18nMessage.value.datePicker?.rangePlaceholder?.[props.kind] ?? lang.datePicker.rangePlaceholder[props.kind];
-      return [
-        i18nMessage.value.fieldPresentation?.rangeStart ?? legacy[0],
-        i18nMessage.value.fieldPresentation?.rangeEnd ?? legacy[1]
-      ];
-    });
+    const endpointLabels = usePickerRangeLabels(() => props.kind);
     const inputs = [];
     const activeIndex = useRangeFieldIndex(() => props.disabledParts);
     const active = ref(false);
@@ -256,7 +250,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     key: 2,
                     id: endpointLabelId(index),
                     hidden: ""
-                  }, toDisplayString(endpointLabels.value[index]), 9, _hoisted_2)) : createCommentVNode("", true),
+                  }, toDisplayString(unref(endpointLabels)[index]), 9, _hoisted_2)) : createCommentVNode("", true),
                   createElementVNode("input", mergeProps({ ref_for: true }, inputAttributes(index), {
                     id: props.inputAttrs?.[index]?.id ?? (index === 0 ? controlId.value : controlId.value + "-" + index),
                     ref_for: true,

package/es/_components/picker-field/range-labels.mjs

@@ -0,0 +1,16 @@
+import { computed } from "vue";
+import { useI18n } from "../../locale/index.mjs";
+import lang from "../../locale/lang/zh-cn.mjs";
+function usePickerRangeLabels(kind) {
+  const { i18nMessage } = useI18n();
+  return computed(() => {
+    const legacy = i18nMessage.value.datePicker?.rangePlaceholder?.[kind()] ?? lang.datePicker.rangePlaceholder[kind()];
+    return [
+      i18nMessage.value.fieldPresentation?.rangeStart ?? legacy[0],
+      i18nMessage.value.fieldPresentation?.rangeEnd ?? legacy[1]
+    ];
+  });
+}
+export {
+  usePickerRangeLabels
+};

package/es/_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/es/_components/selection-field/use-selection-session.mjs

@@ -53,6 +53,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/es/_components/virtual-list-v2/VirtualList2.vue.mjs

@@ -1,4 +1,4 @@
-import { setInlineScrollLeft, inlineScrollLeft } from "../../_utils/direction.mjs";
+import { inlineScrollLeft, setInlineScrollLeft } from "../../_utils/direction.mjs";
 import { getPrefixCls, createNamespace } from "../../_utils/global-config.mjs";
 import { defineComponent, toRefs, computed, ref, onMounted, onBeforeUnmount, watch, nextTick, onActivated, onDeactivated } from "vue";
 import { useSize } from "./hooks/use-size.mjs";
@@ -105,6 +105,8 @@ const _sfc_main = defineComponent({
       await nextTick();
       updateViewport();
     });
+    let retainedInlineOffset;
+    let retainedScrollTop;
     let scrollRequest = 0;
     let commandedScroll;
     let mounted = false;
@@ -115,10 +117,25 @@ const _sfc_main = defineComponent({
     onMounted(() => {
       mounted = true;
     });
-    onActivated(() => {
-      if (!disposed) active = true;
+    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) && inlineScrollLeft(element) === 0) setInlineScrollLeft(element, retainedInline);
+      await nextTick();
+      if (element && retained !== void 0 && isCurrent(request, element) && element.scrollTop === 0) {
+        element.scrollTop = retained;
+        if (virtualEnabled.value) setStart(getStartByScroll(element.scrollTop));
+      }
     });
     onDeactivated(() => {
+      retainedScrollTop = scrollOffset.value;
+      retainedInlineOffset = readingOffset;
       active = false;
       scrollRequest++;
       commandedScroll = void 0;
@@ -220,6 +237,7 @@ const _sfc_main = defineComponent({
       if (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/es/_utils/modal-focus.mjs

@@ -62,6 +62,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);
@@ -144,7 +151,7 @@ function useModalFocus(root, active, isTop, lockScroll = () => true, ownerDocume
       unbind();
       bind();
     }
-    if (value) capture();
+    if (value && (!captured || root() !== element)) capture();
   }, { flush: "post" });
   onMounted(() => {
     mounted = true;
@@ -167,7 +174,7 @@ function useModalFocus(root, active, isTop, lockScroll = () => true, ownerDocume
     unbind();
     restore();
   });
-  return { focus, restore, trap };
+  return { focus, focusAfterEnter, restore, trap };
 }
 export {
   useModalFocus

package/es/_utils/modal-surface.mjs

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

package/es/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/es/auto-complete/auto-complete.mjs

@@ -6,7 +6,7 @@ import { useOptionRequest } from "../_hooks/use-option-request.mjs";
 import { createNamespace, getPrefixCls } from "../_utils/global-config.mjs";
 import { isUndefined, isNull, isFunction } from "../_utils/is.mjs";
 import { resolveTextInputMaxLength, normalizeTextInputValue } from "../_utils/text-input-value.mjs";
-import { Input } from "../input/index.mjs";
+import SearchInput from "../input/base.mjs";
 import { useInputForm } from "../input/use-input-form.mjs";
 import { useSelect } from "../select/hooks/use-select.mjs";
 import Optgroup from "../select/Optgroup.vue.mjs";
@@ -354,7 +354,7 @@ const Base = /* @__PURE__ */ 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) => createVNode(Input, mergeProps({
+    const renderInput = (restAttrs) => createVNode(SearchInput, mergeProps({
       "loading": loading.value,
       "loadingMode": props.loadingMode
     }, restAttrs, {

package/es/auto-complete/presentation.mjs

@@ -4,6 +4,7 @@ import { withFieldPresentation } from "../_components/field-presentation/with-fi
 import _sfc_main from "../_components/selected-options/SelectionEditor.vue.mjs";
 import Base from "./auto-complete.mjs";
 const _AutoComplete = withFieldPresentation(Base, {
+  selectionConfirmation: "select",
   methods: ["focus", "blur", "refresh"],
   defaultPresentation: defaultSelectionPresentation,
   intent: "input",

package/es/auto-complete/props.mjs

@@ -5,6 +5,8 @@ import { emptyValueProp } from "../_utils/empty-value.mjs";
 import { popupContainerProp } from "../_utils/popup-container.mjs";
 const autoCompleteProps = {
   ...fieldLoadingProps,
+  /** 弹出编辑是否需要确认；默认选中候选项即提交，自定义文本通过确认提交。 */
+  needConfirm: { type: Boolean, default: void 0 },
   searchDelay: { type: Number, default: 250 },
   /** 清空动作产生的模型值；省略保留原默认值。 */
   ...fieldPresentationProps,

package/es/auto-complete/style/index.css

@@ -54,11 +54,16 @@
   color: var(--c-auto-complete-option-text-color-selected);
   background-color: var(--c-auto-complete-option-bg-selected);
 }
-.c-select-dropdown:where(.c-auto-complete__dropdown) .c-select-option-active,
-.c-select-dropdown:where(.c-auto-complete__dropdown) .c-select-option:not(.c-select-dropdown:where(.c-auto-complete__dropdown) .c-select-option-disabled):hover {
+.c-select-dropdown:where(.c-auto-complete__dropdown) .c-select-option-active:not(.c-select-option-selected):not(.c-select-option-disabled),
+.c-select-dropdown:where(.c-auto-complete__dropdown) .c-select-option:not(.c-select-option-selected):not(.c-select-option-disabled):hover {
   color: var(--c-auto-complete-option-text-color-hover);
   background-color: var(--c-auto-complete-option-bg-hover);
 }
+.c-select-dropdown:where(.c-auto-complete__dropdown) .c-select-option-selected.c-select-option-active:not(.c-select-option-disabled),
+.c-select-dropdown:where(.c-auto-complete__dropdown) .c-select-option-selected:not(.c-select-option-disabled):hover {
+  color: var(--c-auto-complete-option-text-color-selected);
+  background-color: var(--c-auto-complete-option-bg-hover);
+}
 .c-select-dropdown:where(.c-auto-complete__dropdown) .c-select-option-disabled {
   color: var(--c-auto-complete-option-text-color-disabled);
   background-color: var(--c-auto-complete-option-bg-disabled);

package/es/back-top/style/index.css

@@ -12,7 +12,7 @@
   --c-back-top-background: var(--c-sys-color-surface-raised);
   --c-back-top-text-color: var(--c-sys-color-content-brand);
   --c-back-top-hover-background: var(--c-sys-color-state-hover);
-  --c-back-top-focus-color: var(--c-sys-color-content-brand);
+  --c-back-top-focus-color: var(--c-sys-color-action-primary);
   --c-back-top-focus-width: 2px;
   --c-back-top-focus-offset: 2px;
   --c-back-top-z-index: var(--c-z-index-local-sticky);

package/es/button/base.mjs

@@ -0,0 +1,6 @@
+import { withPropsDefaultsSetter } from "../_utils/maple/components.mjs";
+import _sfc_main from "./Button.vue.mjs";
+const Button = withPropsDefaultsSetter(_sfc_main, _sfc_main.props);
+export {
+  Button as default
+};

package/es/button/index.mjs

@@ -1,20 +1,20 @@
 import { withInstall } from "../_utils/global-config.mjs";
-import _sfc_main from "./Button.vue.mjs";
-import _sfc_main$1 from "./ButtonGroup.vue.mjs";
+import Button$1 from "./base.mjs";
+import _sfc_main from "./ButtonGroup.vue.mjs";
 import { buttonProps } from "./props.mjs";
 import { buttonGroupProps } from "./group-props.mjs";
 const Button = withInstall(
-  _sfc_main,
-  Object.assign(_sfc_main, {
-    Group: _sfc_main$1
+  Button$1,
+  Object.assign(Button$1, {
+    Group: _sfc_main
   }),
-  { components: [_sfc_main, _sfc_main$1] }
+  { components: [Button$1, _sfc_main] }
 );
 const _ButtonComponent = Button;
-const _ButtonGroupComponent = _sfc_main$1;
+const _ButtonGroupComponent = _sfc_main;
 export {
   Button,
-  _sfc_main$1 as ButtonGroup,
+  _sfc_main as ButtonGroup,
   _ButtonComponent,
   _ButtonGroupComponent,
   buttonGroupProps,

package/es/button/style/index.css

@@ -15,7 +15,7 @@
   --c-button-disabled-color: var(--c-color-fill-2);
   --c-button-disabled-solid-text-color: var(--c-sys-color-content-on-dark);
   --c-button-disabled-text-color: var(--c-sys-color-content-disabled);
-  --c-button-focus-color: var(--c-sys-color-content-brand);
+  --c-button-focus-color: var(--c-sys-color-action-primary);
   --c-button-info-color: var(--c-sys-color-status-info);
   --c-button-info-disabled-color: rgb(var(--c-blue-3));
   --c-button-info-foreground-color: var(--c-sys-color-content-info);