@cedar-design/ui-vue 1.1.0 → 1.1.1

package/lib/auto-complete/presentation.js

@@ -6,6 +6,7 @@ const withFieldPresentation = require("../_components/field-presentation/with-fi
 const SelectionEditor_vue_vue_type_script_setup_true_lang = require("../_components/selected-options/SelectionEditor.vue.js");
 const autoComplete = require("./auto-complete.js");
 const _AutoComplete = withFieldPresentation.withFieldPresentation(autoComplete.default, {
+  selectionConfirmation: "select",
   methods: ["focus", "blur", "refresh"],
   defaultPresentation: context.defaultSelectionPresentation,
   intent: "input",

package/lib/auto-complete/props.js

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

package/lib/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/lib/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/lib/button/base.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const components = require("../_utils/maple/components.js");
+const Button_vue_vue_type_script_setup_true_lang = require("./Button.vue.js");
+const Button = components.withPropsDefaultsSetter(Button_vue_vue_type_script_setup_true_lang.default, Button_vue_vue_type_script_setup_true_lang.default.props);
+exports.default = Button;

package/lib/button/index.js

@@ -1,16 +1,16 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const globalConfig = require("../_utils/global-config.js");
-const Button_vue_vue_type_script_setup_true_lang = require("./Button.vue.js");
+const base = require("./base.js");
 const ButtonGroup_vue_vue_type_script_setup_true_lang = require("./ButtonGroup.vue.js");
 const props = require("./props.js");
 const groupProps = require("./group-props.js");
 const Button = globalConfig.withInstall(
-  Button_vue_vue_type_script_setup_true_lang.default,
-  Object.assign(Button_vue_vue_type_script_setup_true_lang.default, {
+  base.default,
+  Object.assign(base.default, {
     Group: ButtonGroup_vue_vue_type_script_setup_true_lang.default
   }),
-  { components: [Button_vue_vue_type_script_setup_true_lang.default, ButtonGroup_vue_vue_type_script_setup_true_lang.default] }
+  { components: [base.default, ButtonGroup_vue_vue_type_script_setup_true_lang.default] }
 );
 const _ButtonComponent = Button;
 const _ButtonGroupComponent = ButtonGroup_vue_vue_type_script_setup_true_lang.default;

package/lib/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);

package/lib/card/Card.vue.js

@@ -3,7 +3,7 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 const vue = require("vue");
 const iconsVue = require("@cedar-design/icons-vue");
 const sharedVue = require("@cedar-design/shared-vue");
-const button_index = require("../button/index.js");
+const base = require("../button/base.js");
 const lock = require("../context/lock.js");
 const zIndex = require("../context/zIndex.js");
 const icon_index = require("../icon/index.js");
@@ -62,25 +62,25 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     let stopInactiveFocusTracking;
     function trackInactiveFocus() {
       stopInactiveFocusTracking?.();
-      const document = card.value?.ownerDocument;
-      if (!document) return;
+      const document2 = card.value?.ownerDocument;
+      if (!document2) return;
       const remember = (target) => {
         const element = target;
-        if (element && typeof element.focus === "function" && !card.value?.contains(element) && element !== document.body && element !== document.documentElement) {
+        if (element && typeof element.focus === "function" && !card.value?.contains(element) && element !== document2.body && element !== document2.documentElement) {
           returnFocus = element;
         }
       };
-      remember(document.activeElement);
+      remember(document2.activeElement);
       const onFocus = (event) => remember(event.target);
-      document.addEventListener("focusin", onFocus, true);
-      stopInactiveFocusTracking = () => document.removeEventListener("focusin", onFocus, true);
+      document2.addEventListener("focusin", onFocus, true);
+      stopInactiveFocusTracking = () => document2.removeEventListener("focusin", onFocus, true);
     }
     function updateReturnFocus(open) {
-      const document = card.value?.ownerDocument;
-      if (!document) return;
-      const focused = document.activeElement;
+      const document2 = card.value?.ownerDocument;
+      if (!document2) return;
+      const focused = document2.activeElement;
       if (open) {
-        returnFocus = focused && focused !== document.body && focused !== document.documentElement ? focused : null;
+        returnFocus = focused && focused !== document2.body && focused !== document2.documentElement ? focused : null;
         return;
       }
       const target = returnFocus;
@@ -94,6 +94,29 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const { onStackTop } = popupLayer.usePopupLayer(wantsFloating, zIndex$1, () => card.value?.ownerDocument, true);
     const available = () => active && !disposed;
     let openingWaiting = false;
+    let cancelOpeningFrames;
+    function waitForOwnerFrames(view) {
+      cancelOpeningFrames?.();
+      return new Promise((resolve) => {
+        let handle;
+        let settled = false;
+        const finish = (completed) => {
+          if (settled) return;
+          settled = true;
+          if (cancelOpeningFrames === cancel) cancelOpeningFrames = void 0;
+          resolve(completed);
+        };
+        const cancel = () => {
+          if (handle !== void 0) view.cancelAnimationFrame?.(handle);
+          finish(false);
+        };
+        cancelOpeningFrames = cancel;
+        handle = view.requestAnimationFrame(() => {
+          if (settled) return;
+          handle = view.requestAnimationFrame(() => finish(true));
+        });
+      });
+    }
     let reducedMotion = false;
     let stopMotionTracking;
     function trackMotion(element) {
@@ -129,6 +152,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       wantsFloating,
       (value) => {
         const token = ++generation;
+        cancelOpeningFrames?.();
         if (!active) {
           if (!disposed && value) trackInactiveFocus();
           else {
@@ -159,6 +183,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         return;
       }
       const token = ++generation;
+      cancelOpeningFrames?.();
       const element = card.value;
       let consumed = false;
       clearTimeout(floater.value ?? void 0);
@@ -185,7 +210,14 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
           dropdownFloaterTop = floaterTop.value;
           dropdownFloaterLeft = floaterLeft.value;
           showFloatingButtons.value = true;
-          if (!reducedMotion) await sharedVue.doubleRaf();
+          if (!reducedMotion) {
+            const view = element.ownerDocument.defaultView;
+            if (view && typeof document !== "undefined" && element.ownerDocument !== document && typeof view.requestAnimationFrame === "function") {
+              if (!await waitForOwnerFrames(view)) return;
+            } else {
+              await sharedVue.doubleRaf();
+            }
+          }
           if (!current(token, element) || !wantsFloating()) {
             return;
           }
@@ -207,6 +239,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         return;
       }
       const token = ++generation;
+      cancelOpeningFrames?.();
       const element = card.value;
       let consumed = false;
       clearTimeout(dropper);
@@ -295,6 +328,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       }
     });
     function cleanup() {
+      cancelOpeningFrames?.();
       openingWaiting = false;
       active = false;
       generation++;
@@ -440,7 +474,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
             })
           }, [
             vue.renderSlot(_ctx.$slots, "close-button", {}, () => [
-              vue.createVNode(vue.unref(button_index.Button), {
+              vue.createVNode(vue.unref(base.default), {
                 "data-card-cover": "",
                 class: vue.normalizeClass(vue.unref(classes)(vue.unref(n)("close-button"), vue.unref(n)("$-elevation--6"))),
                 "aria-label": props2.closeButtonAriaLabel ?? vue.unref(closeLabel),

package/lib/carousel/style/index.css

@@ -28,7 +28,7 @@
   --c-carousel-card-opacity: 0.6;
   --c-carousel-focus-width: 2px;
   --c-carousel-focus-offset: 2px;
-  --c-carousel-focus-color: var(--c-sys-color-content-brand);
+  --c-carousel-focus-color: var(--c-sys-color-action-primary);
 }
 .c-carousel {
   position: relative;

package/lib/cascader/CascaderMenu.vue.js

@@ -6,7 +6,7 @@ const formBridge = require("../_components/field-presentation/form-bridge.js");
 const errorDescription = require("../form/error-description.js");
 const context = require("../_components/selected-options/context.js");
 const SelectedOptions_vue_vue_type_script_setup_true_lang = require("../_components/selected-options/SelectedOptions.vue.js");
-const input_index = require("../input/index.js");
+const base = require("../input/base.js");
 const globalConfig = require("../_utils/global-config.js");
 const baseCascaderPanel = require("./base-cascader-panel.js");
 const cascaderSearchPanel = require("./cascader-search-panel.js");
@@ -46,7 +46,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         onClear: __props.controller.clearSelection
       }, {
         default: vue.withCtx(() => [
-          __props.searchable ? (vue.openBlock(), vue.createBlock(vue.unref(input_index.Input), {
+          __props.searchable ? (vue.openBlock(), vue.createBlock(vue.unref(base.default), {
             key: 0,
             "model-value": __props.controller.computedInputValue,
             "edit-mode": "direct",

package/lib/cascader/cascader-option.js

@@ -4,10 +4,12 @@ const vue = require("vue");
 const iconsVue = require("@cedar-design/icons-vue");
 const formBridge = require("../_components/field-presentation/form-bridge.js");
 const is = require("../_utils/is.js");
-const checkbox_index = require("../checkbox/index.js");
+const base = require("../checkbox/base.js");
 const globalConfig = require("../_utils/global-config.js");
 const context = require("./context.js");
 const utils = require("./utils.js");
+const INTERACTIVE_ROLES = /* @__PURE__ */ new Set(["button", "link", "checkbox", "radio", "switch", "textbox", "combobox", "menuitem", "menuitemcheckbox", "menuitemradio", "option", "treeitem", "gridcell", "slider", "spinbutton", "tab"]);
+const CONCRETE_ROLES = new Set("alert alertdialog application article banner blockquote button caption cell checkbox code columnheader combobox comment complementary contentinfo definition deletion directory document emphasis feed figure form generic grid gridcell group heading image img insertion link list listbox listitem log main mark marquee math menu menubar menuitem menuitemcheckbox menuitemradio meter navigation none note option paragraph presentation progressbar radio radiogroup region row rowgroup rowheader scrollbar search searchbox sectionfooter sectionheader separator slider spinbutton status strong suggestion subscript superscript switch tab table tablist tabpanel term textbox time timer toolbar tooltip tree treegrid treeitem doc-abstract doc-acknowledgments doc-afterword doc-appendix doc-backlink doc-biblioentry doc-bibliography doc-biblioref doc-chapter doc-colophon doc-conclusion doc-cover doc-credit doc-credits doc-dedication doc-endnote doc-endnotes doc-epigraph doc-epilogue doc-errata doc-example doc-footnote doc-foreword doc-glossary doc-glossref doc-index doc-introduction doc-noteref doc-notice doc-pagebreak doc-pagefooter doc-pageheader doc-pagelist doc-part doc-preface doc-prologue doc-pullquote doc-qna doc-subtitle doc-tip doc-toc graphics-document graphics-object graphics-symbol".split(" "));
 function ownsOptionClick(event) {
   if (event.defaultPrevented) return false;
   const boundary = event.currentTarget;
@@ -25,7 +27,10 @@ function ownsOptionClick(event) {
     if (item === boundary) break;
     const element = item;
     if (element?.nodeType !== 1 || typeof element.matches !== "function") continue;
-    if (element.matches('li[data-cascader-key], button, a[href], input, select, textarea, summary, [contenteditable]:not([contenteditable="false"]), [role="button"], [role="link"], [role="checkbox"], [role="radio"], [role="switch"], [role="textbox"], [role="combobox"], [role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"], [role="option"], [role="treeitem"], [role="gridcell"], [role="slider"], [role="spinbutton"], [role="tab"]')) return false;
+    const primaryRole = element.getAttribute("role")?.trim().split(/\s+/).find((role) => CONCRETE_ROLES.has(role));
+    if (primaryRole && INTERACTIVE_ROLES.has(primaryRole)) return false;
+    if (element.hasAttribute("tabindex") && element.tabIndex >= 0) return false;
+    if (element.matches('li[data-cascader-key], button, a[href], input, select, textarea, summary, audio[controls], video[controls], [contenteditable]:not([contenteditable="false"])')) return false;
     if (element.matches("label") && (element.htmlFor || element.querySelector("input, button, select, textarea"))) return false;
   }
   return true;
@@ -90,7 +95,9 @@ const CascaderOption = /* @__PURE__ */ vue.defineComponent({
       },
       onMouseleave: (event) => {
         const element = event.currentTarget;
-        const focused = element.ownerDocument.activeElement;
+        const nodeRoot = element.getRootNode();
+        const focusRoot = "activeElement" in nodeRoot ? nodeRoot : element.ownerDocument;
+        const focused = focusRoot.activeElement;
         let focusedOption = focused?.closest("[data-cascader-key]");
         const panelSelector = `.${globalConfig.getPrefixCls("cascader")}-panel, .${globalConfig.getPrefixCls("cascader")}-editor-panel`;
         const panel = element.closest(panelSelector);
@@ -171,7 +178,7 @@ const CascaderOption = /* @__PURE__ */ vue.defineComponent({
     }, events), [props.multiple && vue.createVNode("span", {
       "class": `${prefixCls}-checkbox`,
       "onClick": (event) => event.stopPropagation()
-    }, [vue.createVNode(checkbox_index.Checkbox, {
+    }, [vue.createVNode(base.default, {
       "editMode": "direct",
       "uninjectGroupContext": true,
       "modelValue": Boolean(checkedStatus.value.checked),
@@ -183,9 +190,7 @@ const CascaderOption = /* @__PURE__ */ vue.defineComponent({
         if (props.option.disabled || props.option.selectionDisabled) {
           return;
         }
-        const task = handlePathChange(new Event("change"));
         cascaderCtx.onClickOption?.(props.option, Boolean(checked));
-        return task;
       }
     }, null)]), vue.createVNode("div", {
       "class": `${prefixCls}-label`

package/lib/cascader/field-adapter.js

@@ -4,6 +4,7 @@ const vue = require("vue");
 const optionLabels = require("../_components/field-presentation/option-labels.js");
 const CascaderEditor_vue_vue_type_script_setup_true_lang = require("./CascaderEditor.vue.js");
 const cascaderFieldAdapter = {
+  selectionConfirmation: "update",
   pauseSelectionWhileLoading: true,
   methods: ["focus", "blur", "refresh"],
   text: (value, props) => optionLabels.optionValueText(value, { ...props, showPathLabel: true }),

package/lib/cascader/props.js

@@ -9,6 +9,8 @@ const formControl = require("../_utils/form-control.js");
 const popupContainer = require("../_utils/popup-container.js");
 const cascaderProps = {
   ...props.fieldLoadingProps,
+  /** 弹出编辑是否需要确认；未设置时单选即提交，多选保留确认。 */
+  needConfirm: { type: Boolean, default: void 0 },
   openTriggerTarget: openTrigger.openTriggerTargetProp,
   /** 内置本地过滤是否区分大小写；自定义过滤函数优先。 */
   caseSensitive: { type: Boolean, default: false },

package/lib/cascader/style/index.css

@@ -11,7 +11,7 @@
   --c-cascader-size-item-height: 36px;
   --c-cascader-font-item-size: var(--c-sys-font-size-md);
   --c-cascader-margin-item-icon-left: var(--c-sys-space-5);
-  --c-cascader-item-check-color: var(--c-sys-color-content-primary);
+  --c-cascader-item-check-color: var(--c-sys-color-action-primary);
   --c-cascader-item-check-size: var(--c-sys-font-size-md);
   --c-cascader-item-text-color: var(--c-sys-color-content-primary);
   --c-cascader-item-icon-color: var(--c-sys-color-content-secondary);
@@ -19,11 +19,11 @@
   --c-cascader-padding-item-right: var(--c-sys-space-5);
   --c-cascader-size-item-icon: 12px;
   --c-cascader-item-text-color-hover: var(--c-cascader-item-text-color);
-  --c-cascader-item-text-color-active: var(--c-cascader-item-text-color);
+  --c-cascader-item-text-color-active: var(--c-sys-color-action-primary);
   --c-cascader-item-text-color-disabled: var(--c-sys-color-content-disabled);
   --c-cascader-item-text-color-disabled-active: var(--c-sys-color-content-disabled);
-  --c-cascader-item-bg-active: var(--c-color-fill-2);
-  --c-cascader-item-bg-hover: var(--c-cascader-item-bg-active);
+  --c-cascader-item-bg-active: transparent;
+  --c-cascader-item-bg-hover: var(--c-color-fill-2);
   --c-cascader-item-bg-disabled: transparent;
   --c-cascader-item-bg-disabled-active: var(--c-color-fill-2);
   --c-cascader-checkbox-bg-hover: var(--c-color-fill-3);
@@ -222,17 +222,44 @@
 .c-cascader-search-option-disabled:hover .c-cascader-option-check {
   color: var(--c-cascader-item-text-color-disabled);
 }
-.c-cascader-option-active {
-  color: var(--c-cascader-item-text-color-active);
-  background-color: var(--c-cascader-item-bg-active);
+.c-cascader-option-active,
+.c-cascader-search-option-active {
+  color: var(--c-cascader-item-text-color-hover);
+  background-color: var(--c-cascader-item-bg-hover);
   transition: all var(--c-sys-motion-duration-standard) var(--c-sys-motion-easing-standard);
 }
-.c-cascader-option-active:hover {
+.c-cascader-option-selected,
+.c-cascader-search-option-selected {
   color: var(--c-cascader-item-text-color-active);
   background-color: var(--c-cascader-item-bg-active);
 }
+.c-cascader-option-selected:hover,
+.c-cascader-search-option-selected:hover,
+.c-cascader-option-selected.c-cascader-option-active,
+.c-cascader-search-option-selected.c-cascader-option-active,
+.c-cascader-option-selected.c-cascader-search-option-active,
+.c-cascader-search-option-selected.c-cascader-search-option-active,
+.c-cascader-option-selected.c-cascader-search-option-hover,
+.c-cascader-search-option-selected.c-cascader-search-option-hover {
+  color: var(--c-cascader-item-text-color-active);
+  background-color: var(--c-cascader-item-bg-hover);
+}
 .c-cascader-option-active.c-cascader-option-disabled,
-.c-cascader-option-active.c-cascader-option-disabled:hover {
+.c-cascader-option-active.c-cascader-search-option-disabled,
+.c-cascader-search-option-active.c-cascader-option-disabled,
+.c-cascader-search-option-active.c-cascader-search-option-disabled,
+.c-cascader-option-active.c-cascader-option-disabled:hover,
+.c-cascader-option-active.c-cascader-search-option-disabled:hover,
+.c-cascader-search-option-active.c-cascader-option-disabled:hover,
+.c-cascader-search-option-active.c-cascader-search-option-disabled:hover,
+.c-cascader-option-selected.c-cascader-option-disabled,
+.c-cascader-option-selected.c-cascader-search-option-disabled,
+.c-cascader-search-option-selected.c-cascader-option-disabled,
+.c-cascader-search-option-selected.c-cascader-search-option-disabled,
+.c-cascader-option-selected.c-cascader-option-disabled:hover,
+.c-cascader-option-selected.c-cascader-search-option-disabled:hover,
+.c-cascader-search-option-selected.c-cascader-option-disabled:hover,
+.c-cascader-search-option-selected.c-cascader-search-option-disabled:hover {
   color: var(--c-cascader-item-text-color-disabled-active);
   background-color: var(--c-cascader-item-bg-disabled-active);
 }

package/lib/cascader/use-cascader-focus.js

@@ -8,9 +8,11 @@ function useCascaderFocus(activeKey) {
   vue.onBeforeUnmount(() => cancelPendingFocus?.());
   return (root, option, originPanel, panelSelector) => {
     const key = activeKey.value;
-    if (!key || !root.contains(option) || root.ownerDocument.activeElement !== option) return;
-    cancelPendingFocus?.();
     const document = root.ownerDocument;
+    const nodeRoot = root.getRootNode();
+    const focusRoot = "activeElement" in nodeRoot ? nodeRoot : document;
+    if (!key || !root.contains(option) || focusRoot.activeElement !== option) return;
+    cancelPendingFocus?.();
     const view = document.defaultView;
     if (!view) return;
     let observer;
@@ -26,13 +28,14 @@ function useCascaderFocus(activeKey) {
       if (cancelPendingFocus === cleanup) cancelPendingFocus = void 0;
     };
     const onFocus = (next) => {
-      if (next.target !== option) cleanup();
+      if (next.target !== option && !next.composedPath().includes(option)) cleanup();
     };
     const attempt = () => {
       if (done) return;
-      const focused = document.activeElement;
-      const lostToRemoval = !option.isConnected && (focused === document.body || focused === document.documentElement);
-      if (!root.isConnected || activeKey.value !== key || focused !== option && !lostToRemoval) {
+      const focused = focusRoot.activeElement;
+      const docFocus = document.activeElement;
+      const lostToRemoval = !option.isConnected && (docFocus === document.body || docFocus === document.documentElement) && (focused === null || focused === document.body || focused === document.documentElement);
+      if (!root.isConnected || root.getRootNode() !== nodeRoot || activeKey.value !== key || focused !== option && !lostToRemoval) {
         cleanup();
         return;
       }