@cedar-design/ui-vue 1.1.0 → 1.1.1

package/es/steps/style/index.css

@@ -27,15 +27,15 @@
   --c-steps-circle-item-tail-color-wait: var(--c-sys-color-border-default);
   --c-steps-circle-item-title-color-wait: var(--c-sys-color-content-secondary);
   --c-steps-circle-item-description-color-wait: var(--c-sys-color-content-secondary);
-  --c-steps-circle-item-bg-process: var(--c-sys-color-content-brand);
+  --c-steps-circle-item-bg-process: var(--c-sys-color-action-primary);
   --c-steps-circle-item-border-color-process: transparent;
   --c-steps-circle-item-icon-text-color-process: var(--c-sys-color-surface-default);
-  --c-steps-circle-item-tail-color-process: var(--c-sys-color-content-brand);
+  --c-steps-circle-item-tail-color-process: var(--c-sys-color-action-primary);
   --c-steps-circle-item-title-color-process: var(--c-sys-color-content-primary);
   --c-steps-circle-item-description-color-process: var(--c-sys-color-content-secondary);
   --c-steps-circle-item-bg-finish: var(--c-sys-color-state-selected);
   --c-steps-circle-item-border-color-finish: transparent;
-  --c-steps-circle-item-icon-text-color-finish: var(--c-sys-color-content-brand);
+  --c-steps-circle-item-icon-text-color-finish: var(--c-sys-color-action-primary);
   --c-steps-circle-item-title-color-finish: var(--c-sys-color-content-primary);
   --c-steps-circle-item-description-color-finish: var(--c-sys-color-content-secondary);
   --c-steps-circle-item-bg-error: var(--c-sys-color-content-danger);
@@ -61,13 +61,13 @@
   --c-steps-dot-item-tail-color-wait: var(--c-sys-color-border-default);
   --c-steps-dot-item-title-color-wait: var(--c-sys-color-content-secondary);
   --c-steps-dot-item-description-color-wait: var(--c-sys-color-content-secondary);
-  --c-steps-dot-item-bg-process: var(--c-sys-color-content-brand);
-  --c-steps-dot-item-border-color-process: var(--c-sys-color-content-brand);
-  --c-steps-dot-item-tail-color-process: var(--c-sys-color-content-brand);
+  --c-steps-dot-item-bg-process: var(--c-sys-color-action-primary);
+  --c-steps-dot-item-border-color-process: var(--c-sys-color-action-primary);
+  --c-steps-dot-item-tail-color-process: var(--c-sys-color-action-primary);
   --c-steps-dot-item-title-color-process: var(--c-sys-color-content-primary);
   --c-steps-dot-item-description-color-process: var(--c-sys-color-content-secondary);
-  --c-steps-dot-item-bg-finish: var(--c-sys-color-content-brand);
-  --c-steps-dot-item-border-color-finish: var(--c-sys-color-content-brand);
+  --c-steps-dot-item-bg-finish: var(--c-sys-color-action-primary);
+  --c-steps-dot-item-border-color-finish: var(--c-sys-color-action-primary);
   --c-steps-dot-item-title-color-finish: var(--c-sys-color-content-primary);
   --c-steps-dot-item-description-color-finish: var(--c-sys-color-content-secondary);
   --c-steps-dot-item-bg-error: var(--c-sys-color-content-danger);
@@ -86,7 +86,7 @@
   --c-steps-arrow-item-bg-wait: var(--c-sys-color-surface-muted);
   --c-steps-arrow-item-title-color-wait: var(--c-sys-color-content-secondary);
   --c-steps-arrow-item-description-color-wait: var(--c-sys-color-content-secondary);
-  --c-steps-arrow-item-bg-process: var(--c-sys-color-content-brand);
+  --c-steps-arrow-item-bg-process: var(--c-sys-color-action-primary);
   --c-steps-arrow-item-title-color-process: var(--c-sys-color-surface-default);
   --c-steps-arrow-item-description-color-process: var(--c-sys-color-surface-default);
   --c-steps-arrow-item-bg-finish: var(--c-sys-color-state-selected);
@@ -104,7 +104,7 @@
   --c-steps-navigation-arrow-spacing-right: var(--c-spacing-5);
   --c-steps-navigation-ink-spacing-left: var(--c-spacing-none);
   --c-steps-navigation-ink-spacing-right: 30px;
-  --c-steps-navigation-ink-bg: var(--c-sys-color-content-brand);
+  --c-steps-navigation-ink-bg: var(--c-sys-color-action-primary);
   --c-steps-changeable-hover-text-color: var(--c-sys-color-content-brand);
   --c-steps-node-font-weight: var(--c-font-weight-500);
   --c-steps-transition-duration-1: var(--c-transition-duration-1);

package/es/switch/Switch.vue.mjs

@@ -1,4 +1,5 @@
-import { defineComponent, ref, computed, onBeforeUnmount, onDeactivated, onActivated, watch, openBlock, createElementBlock, mergeProps, withKeys, withModifiers, unref, createElementVNode, normalizeClass, renderSlot, createTextVNode, toDisplayString, createCommentVNode, normalizeStyle } from "vue";
+import { defineComponent, ref, computed, inject, watch, onBeforeUnmount, onDeactivated, onActivated, openBlock, createElementBlock, mergeProps, withKeys, withModifiers, unref, createElementVNode, normalizeClass, renderSlot, createTextVNode, toDisplayString, createCommentVNode, normalizeStyle } from "vue";
+import { fieldEditorControlPending } from "../_components/field-presentation/editor-pending.mjs";
 import { invokeBeforeHook } from "../_hooks/use-action-guard.mjs";
 import { createNamespace } from "../_utils/global-config.mjs";
 import { useFormErrorDescription } from "../form/error-description.mjs";
@@ -20,6 +21,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const current = computed(() => props.modelValue === void 0 ? internal.value : props.modelValue);
     const checked = computed(() => current.value === props.checkedValue);
     const pending = ref(false);
+    const editorPending = inject(fieldEditorControlPending, void 0);
+    watch(pending, (value) => {
+      if (editorPending) editorPending.value = value;
+    }, { flush: "sync" });
     const busy = computed(() => props.loading || pending.value);
     const rippleKey = ref(0);
     let active = true;

package/es/switch/style/index.css

@@ -12,7 +12,7 @@
   --c-switch-size-lg-scale: 1.2;
   --c-switch-hit-area: 0px;
   --c-switch-track-background: var(--c-sys-color-content-secondary);
-  --c-switch-track-active-background: var(--c-sys-color-content-brand);
+  --c-switch-track-active-background: var(--c-sys-color-action-primary);
   --c-switch-track-error-background: var(--c-sys-color-content-danger);
   --c-switch-handle-background: var(--c-sys-color-surface-default);
   --c-switch-handle-color: var(--c-sys-color-content-brand);

package/es/table/structural-slot.mjs

@@ -0,0 +1,17 @@
+import { isVNode, Comment, Text, Fragment } from "vue";
+function firstStructuralNode(nodes) {
+  if (Array.isArray(nodes)) {
+    for (const node of nodes) {
+      const result = firstStructuralNode(node);
+      if (result) return result;
+    }
+    return void 0;
+  }
+  if (!isVNode(nodes) || nodes.type === Comment) return void 0;
+  if (nodes.type === Text && !String(nodes.children ?? "").trim()) return void 0;
+  if (nodes.type === Fragment && Array.isArray(nodes.children)) return firstStructuralNode(nodes.children);
+  return nodes;
+}
+export {
+  firstStructuralNode
+};

package/es/table/style/index.css

@@ -58,14 +58,14 @@
   --c-table-header-cell-action-margin-left: 2px;
   --c-table-th-actions-margin-left: 8px;
   --c-table-header-filters-icon-color: var(--c-color-text-2);
-  --c-table-header-filters-icon-active-color: var(--c-sys-color-content-brand);
+  --c-table-header-filters-icon-active-color: var(--c-sys-color-action-primary);
   --c-table-header-filters-icon-hover-bg: var(--c-color-neutral-4);
   --c-table-filters-icon-font-size: 16px;
   --c-table-filters-width: 24px;
   --c-table-filters-icon-hover-bg: var(--c-color-fill-4);
   --c-table-header-sorter-icon-color: var(--c-color-neutral-5);
   --c-table-header-sorter-icon-next-color: var(--c-color-neutral-6);
-  --c-table-header-sorter-icon-active-color: var(--c-sys-color-content-brand);
+  --c-table-header-sorter-icon-active-color: var(--c-sys-color-action-primary);
   --c-table-header-sorter-icon-margin-left: var(--c-spacing-4);
   --c-table-header-sorter-icon-height: 8px;
   --c-table-header-sorter-icon-width: 14px;

package/es/table/table-tbody.mjs

@@ -1,5 +1,6 @@
 import { defineComponent, createVNode } from "vue";
 import { createNamespace } from "../_utils/global-config.mjs";
+import { firstStructuralNode } from "./structural-slot.mjs";
 const {
   name
 } = createNamespace("tbody");
@@ -9,7 +10,7 @@ const Tbody = /* @__PURE__ */ defineComponent({
     slots
   }) {
     return () => {
-      return createVNode(slots.tbody?.()[0] ?? "tbody", null, {
+      return createVNode(firstStructuralNode(slots.tbody?.()) ?? "tbody", null, {
         default: slots.default
       });
     };

package/es/table/table-td.mjs

@@ -9,6 +9,7 @@ import AutoTooltip from "../_components/auto-tooltip/auto-tooltip.mjs";
 import _sfc_main from "./TableSlot.vue.mjs";
 import { forwardTableSlot, forwardTableColumnSlot } from "./forward-table-slot.mjs";
 import { getColumnLayoutKey, isTableExtraColumn } from "./extra-column.mjs";
+import { firstStructuralNode } from "./structural-slot.mjs";
 function _isSlot(s) {
   return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
 }
@@ -228,11 +229,11 @@ const Td = /* @__PURE__ */ defineComponent({
       }, [renderContent()])]);
     };
     return () => {
-      const customCell = slots.td?.({
+      const customCell = firstStructuralNode(slots.td?.({
         record: props.record?.raw,
         column: props.column,
         rowIndex: props.rowIndex ?? -1
-      })[0];
+      }));
       const customHeaders = customCell?.props && Object.prototype.hasOwnProperty.call(customCell.props, "headers") && customCell.props.headers !== void 0 ? customCell.props.headers : props.headers;
       return createVNode(customCell ?? "td", {
         class: cls.value,

package/es/table/table-th.mjs

@@ -1,5 +1,6 @@
 import { defineComponent, toRefs, inject, computed, createVNode, mergeProps, isVNode } from "vue";
 import { getPrefixCls, createNamespace } from "../_utils/global-config.mjs";
+import { firstStructuralNode } from "./structural-slot.mjs";
 import { Checkbox } from "../checkbox/index.mjs";
 import { Radio } from "../radio/index.mjs";
 import { Button } from "../button/index.mjs";
@@ -348,9 +349,9 @@ const Th = /* @__PURE__ */ defineComponent({
       const rowSpan = props.column.rowSpan ?? 1;
       const resizeColumnName = typeof props.column.title === "string" ? props.column.title : props.column.dataIndex;
       const translatedResizeLabel = t("table.resizeColumn", resizeColumnName);
-      const customHeader = props.customHeader ?? slots.th?.({
+      const customHeader = firstStructuralNode([props.customHeader]) ?? firstStructuralNode(slots.th?.({
         column: props.column
-      })[0];
+      }));
       return createVNode(customHeader ?? "th", {
         class: cls.value,
         style: style.value,

package/es/table/table-thead.mjs

@@ -1,5 +1,6 @@
 import { defineComponent, createVNode } from "vue";
 import { createNamespace } from "../_utils/global-config.mjs";
+import { firstStructuralNode } from "./structural-slot.mjs";
 const {
   name
 } = createNamespace("thead");
@@ -9,7 +10,7 @@ const Thead = /* @__PURE__ */ defineComponent({
     slots
   }) {
     return () => {
-      return createVNode(slots.thead?.()[0] ?? "thead", null, {
+      return createVNode(firstStructuralNode(slots.thead?.()) ?? "thead", null, {
         default: slots.default
       });
     };

package/es/table/table-tr.mjs

@@ -2,6 +2,7 @@ import { defineComponent, inject, computed, createVNode, isVNode, Fragment } fro
 import { getPrefixCls, createNamespace } from "../_utils/global-config.mjs";
 import { tableInjectionKey } from "./context.mjs";
 import { orderPhysicalColumns } from "./column-direction.mjs";
+import { firstStructuralNode } from "./structural-slot.mjs";
 const {
   name
 } = createNamespace("tr");
@@ -34,10 +35,10 @@ const Tr = /* @__PURE__ */ defineComponent({
       [`${prefixCls}-tr-checked`]: props.checked
     }]);
     return () => {
-      return createVNode(slots.tr?.({
+      return createVNode(firstStructuralNode(slots.tr?.({
         rowIndex: props.rowIndex,
         record: props.record?.raw
-      })[0] ?? "tr", {
+      })) ?? "tr", {
         class: cls.value
       }, {
         default: () => {

package/es/table/table.mjs

@@ -1,4 +1,4 @@
-import { defineComponent, toRefs, computed, inject, ref, reactive, onMounted, onBeforeUnmount, watch, watchEffect, onActivated, onDeactivated, watchPostEffect, provide, useId, toRaw, createVNode, mergeProps, isVNode, Fragment, Teleport } from "vue";
+import { defineComponent, toRefs, computed, inject, ref, reactive, onMounted, onBeforeUnmount, watch, watchEffect, onActivated, onDeactivated, watchPostEffect, provide, useId, shallowRef, getCurrentInstance, toRaw, createVNode, mergeProps, isVNode, Fragment, Teleport } from "vue";
 import { useI18n } from "../locale/index.mjs";
 import { useThemeScope } from "../theme-provider/context.mjs";
 import { useElementResize } from "../_utils/resize-observer.mjs";
@@ -23,6 +23,7 @@ import _sfc_main$2 from "./TableSlot.vue.mjs";
 import _sfc_main$1 from "./TableColumnSlot.vue.mjs";
 import { forwardTableSlot } from "./forward-table-slot.mjs";
 import Thead from "./table-thead.mjs";
+import { firstStructuralNode } from "./structural-slot.mjs";
 import Tbody from "./table-tbody.mjs";
 import Tr from "./table-tr.mjs";
 import Th from "./table-th.mjs";
@@ -1279,9 +1280,10 @@ const _Table = /* @__PURE__ */ defineComponent({
     const semanticId = `c-table-header-${useId()}`;
     const visibleHeaderId = (row, index) => `${semanticId}-visible-${row}-${index}`;
     const visibleOperationId = (index) => `${semanticId}-visible-operation-${index}`;
-    const customHeaders = computed(() => groupColumns.value.map((row) => row.map((column) => slots.th?.({
+    const activeHeaderSlot = shallowRef(slots.th);
+    const customHeaders = computed(() => groupColumns.value.map((row) => row.map((column) => firstStructuralNode(activeHeaderSlot.value?.({
       column
-    })?.[0])));
+    })))));
     const explicitHeaderName = (value) => typeof value === "string" && value.trim() ? value : void 0;
     const semanticRows = (surface) => groupColumns.value.map((row, rowIndex) => [...rowIndex === 0 ? operations.value.map((_, index) => ({
       id: `${semanticId}-${surface}-operation-${index}`,
@@ -1897,13 +1899,27 @@ const _Table = /* @__PURE__ */ defineComponent({
       }
       return Object.keys(result).length > 0 ? result : void 0;
     });
+    const tableInstance = getCurrentInstance();
+    let slotSnapshot = [];
+    const currentSlotSnapshot = () => {
+      const incoming = tableInstance.vnode.children;
+      const raw = incoming && !Array.isArray(incoming) && typeof incoming === "object" ? incoming : {};
+      const next = Object.keys(raw).filter((key) => key !== "_" && key !== "$stable").sort().flatMap((key) => [key, raw[key]]);
+      if (next.length !== slotSnapshot.length || next.some((value, index) => value !== slotSnapshot[index])) {
+        slotSnapshot = next;
+        activeHeaderSlot.value = slots.th;
+      }
+      return slotSnapshot;
+    };
     const DeferredTable = /* @__PURE__ */ defineComponent({
       props: {
-        rowSlotState: Number
+        rowSlotState: Number,
+        slotSnapshot: Array
       },
       setup: () => () => renderTable()
     });
     const render = () => {
+      const snapshot = currentSlotSnapshot();
       if (slots.default) {
         let _slot;
         return createVNode(ResizeObserver, {
@@ -1933,7 +1949,8 @@ const _Table = /* @__PURE__ */ defineComponent({
           "aria-busy": loadingProps.value.loading || void 0
         }, tableInteractionEvents), [children.value, createVNode(_sfc_main, loadingProps.value, {
           default: () => [props.pagination !== false && (flattenData.value.length > 0 || sortedData.value.length > 0) && isPaginationTop.value && renderPaginationArea(), createVNode(DeferredTable, {
-            "rowSlotState": (slots.tr ? 1 : 0) | (slots["expand-row"] ? 2 : 0)
+            "rowSlotState": (slots.tr ? 1 : 0) | (slots["expand-row"] ? 2 : 0),
+            "slotSnapshot": snapshot
           }, null), props.pagination !== false && (flattenData.value.length > 0 || sortedData.value.length > 0) && !isPaginationTop.value && renderPaginationArea()]
         })])]
       });

package/es/tabs/style/index.css

@@ -5,7 +5,7 @@
 :where([data-c-theme]) {
   --c-tabs-background: var(--c-sys-color-surface-default);
   --c-tabs-title-text-color: var(--c-sys-color-content-secondary);
-  --c-tabs-title-text-color-active: var(--c-sys-color-content-brand);
+  --c-tabs-title-text-color-active: var(--c-sys-color-action-primary);
   --c-tabs-title-text-color-disabled: var(--c-sys-color-content-disabled);
   --c-tabs-muted-background: var(--c-sys-color-surface-muted);
   --c-tabs-border-color: var(--c-sys-color-border-default);

package/es/time/picker/Panel2.vue.mjs

@@ -1,7 +1,7 @@
 import { navigateTemporalColumns } from "../../_utils/temporal-keyboard.mjs";
 import { defineComponent, toRefs, reactive, ref, watch, computed } from "vue";
 import TimeColumn from "./TimeColumn.vue.mjs";
-import { Button } from "../../button/index.mjs";
+import Button from "../../button/base.mjs";
 import { isUndefined, isDayjs } from "../../_utils/is.mjs";
 import { dayjs } from "../../_utils/date.mjs";
 import { getPrefixCls, createNamespace } from "../../_utils/global-config.mjs";

package/es/time/picker/RangePanel2.vue.mjs

@@ -4,7 +4,7 @@ import Panel from "./Panel.vue.mjs";
 import { isValidRangeValue, isTimeRangeNextDay } from "./utils/index.mjs";
 import { getPrefixCls, createNamespace } from "../../_utils/global-config.mjs";
 import { useI18n } from "../../locale/index.mjs";
-import { Button } from "../../button/index.mjs";
+import Button from "../../button/base.mjs";
 const { name } = createNamespace("time-picker-range-panel");
 const panelIndexes = [0, 1];
 const _sfc_main = defineComponent({

package/es/tree/style/index.css

@@ -6,7 +6,7 @@
   --c-tree-focus-outline-width: 2px;
   --c-tree-title-text-color: var(--c-color-text-1);
   --c-tree-title-text-color-hover: var(--c-color-text-1);
-  --c-tree-title-text-color-active: var(--c-sys-color-content-brand);
+  --c-tree-title-text-color-active: var(--c-sys-color-action-primary);
   --c-tree-title-text-color-disabled: var(--c-color-text-4);
   --c-tree-title-text-color-active-disabled: var(--c-color-primary-light-3);
   --c-tree-title-bg-hover: var(--c-color-fill-2);

package/es/tree-select/panel.mjs

@@ -195,7 +195,9 @@ const Panel = /* @__PURE__ */ defineComponent({
             "aria-disabled": visibleNodeMap.value.get(key)?.disabled,
             "aria-expanded": status.isLeaf ? void 0 : status.expanded,
             "class": [`${prefixCls}-option`, {
-              [`${prefixCls}-option-active`]: key === activeKey.value
+              [`${prefixCls}-option-active`]: key === activeKey.value,
+              [`${prefixCls}-option-selected`]: status.selected || status.checked,
+              [`${prefixCls}-option-disabled`]: visibleNodeMap.value.get(key)?.disabled
             }],
             "onMouseenter": () => {
               if (visibleNodeMap.value.has(key) && !visibleNodeMap.value.get(key)?.disabled) activeKey.value = key;

package/es/tree-select/presentation.mjs

@@ -4,6 +4,7 @@ import { optionValueText } from "../_components/field-presentation/option-labels
 import { withFieldPresentation } from "../_components/field-presentation/with-field-presentation.mjs";
 import Base from "./TreeSelect.vue.mjs";
 const _TreeSelect = withFieldPresentation(Base, {
+  selectionConfirmation: "update",
   pauseSelectionWhileLoading: true,
   editor: ({ props, attrs, value, update, emit, slots, disabled, readonly }) => h(
     _sfc_main,

package/es/tree-select/props.mjs

@@ -5,6 +5,8 @@ import { popupContainerProp } from "../_utils/popup-container.mjs";
 import { fieldLoadingProps } from "../field-decorator/props.mjs";
 const treeSelectProps = {
   ...fieldLoadingProps,
+  /** 弹出编辑是否需要确认；未设置时单选即提交，多选保留确认。 */
+  needConfirm: { type: Boolean, default: void 0 },
   openTriggerTarget: openTriggerTargetProp,
   /** 内置字段匹配是否区分大小写。 */
   caseSensitive: { type: Boolean, default: false },

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

@@ -4,13 +4,14 @@
 :root,
 :where([data-c-theme]) {
   --c-tree-select-option-active-background: var(--c-color-fill-2);
-  --c-tree-select-option-radius: var(--c-sys-radius-sm);
-  --c-tree-select-popup-padding-left: var(--c-spacing-5);
-  --c-tree-select-popup-padding-right: var(--c-spacing-2);
-  --c-tree-select-popup-padding-vertical: var(--c-spacing-2);
+  --c-tree-select-option-radius: var(--c-select-popup-option-border-radius);
+  --c-tree-select-popup-padding-left: var(--c-select-popup-padding-horizontal);
+  --c-tree-select-popup-padding-right: var(--c-select-popup-padding-horizontal);
+  --c-tree-select-popup-padding-vertical: var(--c-select-popup-padding-vertical);
   --c-tree-select-highlight-font-weight: var(--c-font-weight-500);
 }
 .c-tree-select-popup {
+  --c-tree-title-text-color-active: var(--c-select-popup-option-text-color-selected);
   box-sizing: border-box;
   padding: var(--c-tree-select-popup-padding-vertical) 0;
   background-color: var(--c-color-bg-popup);
@@ -26,7 +27,31 @@
   overflow: auto;
 }
 .c-tree-select-popup .c-tree-node {
-  padding-inline-start: 0;
+  isolation: isolate;
+  box-sizing: border-box;
+  min-height: var(--c-select-popup-option-height);
+  padding-inline: var(--c-select-popup-option-padding-horizontal);
+  border-bottom: 0;
+  border-radius: var(--c-tree-select-option-radius);
+}
+.c-tree-select-popup .c-tree-node-title,
+.c-tree-select-popup .c-tree-node-selected .c-tree-node-title {
+  position: static;
+  min-width: 0;
+  min-height: inherit;
+  margin: 0;
+  padding: 0;
+  background: transparent;
+}
+.c-tree-select-popup .c-tree-node-title-text {
+  flex: 1;
+  min-width: 0;
+}
+.c-tree-select-popup .c-tree-node:hover .c-tree-select-option:not(.c-tree-select-option-selected):not(.c-tree-select-option-disabled)::before {
+  background: var(--c-tree-select-option-active-background);
+}
+.c-tree-select-popup .c-tree-node:hover .c-tree-select-option-selected:not(.c-tree-select-option-disabled)::before {
+  background: var(--c-select-popup-option-bg-selected-hover);
 }
 .c-tree-select-highlight {
   font-weight: var(--c-tree-select-highlight-font-weight);
@@ -45,8 +70,25 @@
 }
 .c-tree-select-option {
   display: block;
+  overflow-wrap: anywhere;
 }
-.c-tree-select-option-active {
-  background: var(--c-tree-select-option-active-background);
+.c-tree-select-option::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: -1;
   border-radius: var(--c-tree-select-option-radius);
+  pointer-events: none;
+}
+.c-tree-select-option-active:not(.c-tree-select-option-selected):not(.c-tree-select-option-disabled)::before {
+  background: var(--c-tree-select-option-active-background);
+}
+.c-tree-select-option-selected:not(.c-tree-select-option-disabled) {
+  color: var(--c-select-popup-option-text-color-selected);
+}
+.c-tree-select-option-selected:not(.c-tree-select-option-disabled)::before {
+  background: var(--c-select-popup-option-bg-selected);
+}
+.c-tree-select-option-active.c-tree-select-option-selected:not(.c-tree-select-option-disabled)::before {
+  background: var(--c-select-popup-option-bg-selected-hover);
 }

package/es/trigger/interaction.mjs

@@ -1,4 +1,4 @@
-import { inject, provide, onBeforeUnmount, watch, onMounted, onActivated, onDeactivated, nextTick } from "vue";
+import { inject, provide, watch, onMounted, onActivated, onDeactivated, onBeforeUnmount, nextTick } from "vue";
 import { bindTriggerEvents } from "./reference.mjs";
 import { isTriggerReferenceClickBlocked } from "./reference-click.mjs";
 const interactionKey = Symbol("trigger-interaction");

package/es/trigger/popup-move-focus.mjs

@@ -7,19 +7,19 @@ const shadowHostNames = /* @__PURE__ */ new Set(["article", "aside", "blockquote
 function mayHideShadow(element) {
   return !element.shadowRoot && (element.localName.includes("-") || shadowHostNames.has(element.localName));
 }
-function documentChain(start) {
+function documentChain(start, allowPartial = false) {
   const documents = [start], frames = [];
   let current = start;
   try {
     while (current.defaultView && current.defaultView.parent !== current.defaultView) {
       const frame = current.defaultView.frameElement;
-      if (!frame) return void 0;
+      if (!frame) return allowPartial ? { documents, frames } : void 0;
       frames.push(frame);
       current = frame.ownerDocument;
       documents.push(current);
     }
   } catch {
-    return void 0;
+    return allowPartial ? { documents, frames } : void 0;
   }
   return { documents, frames };
 }
@@ -28,7 +28,7 @@ function canRestore(owner, destination, anchor, focused) {
     const current = owner.activeElement;
     return (!current || current === owner.body || current === owner.documentElement || current === anchor) && (current !== anchor || deepestActive(anchor) === focused);
   }
-  const from = documentChain(owner), to = documentChain(destination);
+  const from = documentChain(owner, true), to = documentChain(destination, true);
   if (!from || !to) return false;
   const common = from.documents.find((doc) => to.documents.includes(doc));
   if (!common || !common.hasFocus()) return false;
@@ -77,8 +77,8 @@ function usePopupMoveFocus(target, inline, popup, visible) {
   return (event) => {
     if (!moving || moving !== event.target || event.relatedTarget) return false;
     const owner = moving.ownerDocument;
-    const chain = documentChain(owner);
-    if (!chain) return false;
+    const chain = documentChain(owner, true);
+    if (!chain || !chain.documents[chain.documents.length - 1].hasFocus()) return false;
     return chain.documents.every((doc) => {
       const current = doc.activeElement;
       return !current || current === doc.body || current === doc.documentElement || current === moving || chain.frames.includes(current);

package/es/trigger/position.mjs

@@ -87,12 +87,21 @@ function getScrollElements(element) {
   const visited = /* @__PURE__ */ new Set();
   while (root && !visited.has(root.ownerDocument)) {
     visited.add(root.ownerDocument);
-    let current = root.parentElement;
+    const parent = (node) => {
+      if (node.assignedSlot) return node.assignedSlot;
+      if (node.parentElement) return node.parentElement;
+      const tree = node.getRootNode();
+      return tree.nodeType === 11 && "host" in tree ? tree.host : null;
+    };
+    let current = parent(root);
+    const ancestors = /* @__PURE__ */ new Set();
     while (current && current !== current.ownerDocument.documentElement) {
+      if (ancestors.has(current)) break;
+      ancestors.add(current);
       const style = current.ownerDocument.defaultView?.getComputedStyle(current);
       const overflow = `${style?.overflow ?? ""}${style?.overflowX ?? ""}${style?.overflowY ?? ""}`;
       if (/(auto|scroll|overlay)/.test(overflow)) result.push(current);
-      current = current.parentElement;
+      current = parent(current);
     }
     try {
       root = root.ownerDocument.defaultView?.frameElement ?? void 0;
@@ -102,6 +111,34 @@ function getScrollElements(element) {
   }
   return result;
 }
+function getSlotChangeRoots(element) {
+  const roots = [];
+  const visited = /* @__PURE__ */ new Set();
+  let current = element;
+  while (current && !visited.has(current)) {
+    visited.add(current);
+    const parentShadow = current.parentElement?.shadowRoot;
+    if (parentShadow) roots.push(parentShadow);
+    if (current.assignedSlot) {
+      current = current.assignedSlot;
+    } else if (current.parentElement) {
+      current = current.parentElement;
+    } else {
+      const tree = current.getRootNode();
+      if (tree.nodeType === 11 && "host" in tree) {
+        roots.push(tree);
+        current = tree.host;
+      } else {
+        try {
+          current = current.ownerDocument.defaultView?.frameElement;
+        } catch {
+          current = void 0;
+        }
+      }
+    }
+  }
+  return roots;
+}
 function getScrollViews(element) {
   const result = [];
   let document = element?.ownerDocument;
@@ -121,5 +158,6 @@ function getScrollViews(element) {
 export {
   calculatePopupPosition,
   getScrollElements,
-  getScrollViews
+  getScrollViews,
+  getSlotChangeRoots
 };

package/es/trigger/positioner.mjs

@@ -1,15 +1,17 @@
 import { ref, watch, nextTick, onMounted, onActivated, onDeactivated, onBeforeUnmount } from "vue";
 import { getArrowStyle } from "./arrow.mjs";
 import { getPositioningSpace, translateRectBetweenDocuments, getRelativeRect, getTransformOrigin } from "./geometry.mjs";
-import { getScrollElements, getScrollViews, calculatePopupPosition } from "./position.mjs";
+import { getSlotChangeRoots, getScrollElements, getScrollViews, calculatePopupPosition } from "./position.mjs";
 import { useElementResize } from "../_utils/resize-observer.mjs";
 function rafThrottle(callback, ownerView) {
   let frame;
   let frameView;
   let latest;
+  let latestTarget;
   let generation = 0;
   const run = (event) => {
     latest = event;
+    latestTarget = event?.currentTarget ?? event?.target;
     if (frame !== void 0) {
       return;
     }
@@ -27,8 +29,10 @@ function rafThrottle(callback, ownerView) {
       frame = void 0;
       frameView = void 0;
       const currentEvent = latest;
+      const currentTarget = latestTarget;
       latest = void 0;
-      callback(currentEvent);
+      latestTarget = void 0;
+      callback(currentEvent, currentTarget);
     });
   };
   run.cancel = () => {
@@ -39,6 +43,7 @@ function rafThrottle(callback, ownerView) {
     frame = void 0;
     frameView = void 0;
     latest = void 0;
+    latestTarget = void 0;
   };
   return run;
 }
@@ -54,6 +59,7 @@ function useTriggerPositioner(options, context) {
   let scrollPositions = /* @__PURE__ */ new WeakMap();
   let windowPositions = /* @__PURE__ */ new WeakMap();
   let scrollViews = [];
+  let slotRoots = [];
   function update() {
     const reference = context.reference.value;
     const popup = context.popup.value;
@@ -142,10 +148,10 @@ function useTriggerPositioner(options, context) {
     }
   }
   const scrolling = rafThrottle(
-    (event) => {
+    (_event, eventTarget) => {
       const shouldClose = options.scrollToClose || context.globalScrollToClose.value;
-      if (shouldClose && event?.target) {
-        const target = event.target;
+      if (shouldClose && eventTarget) {
+        const target = eventTarget;
         const previous = scrollPositions.get(target) ?? [
           target.scrollTop,
           target.scrollLeft
@@ -190,11 +196,26 @@ function useTriggerPositioner(options, context) {
     for (const element of scrollElements)
       element.removeEventListener("scroll", scrolling);
     for (const view of scrollViews) view.removeEventListener("scroll", onWindowScroll);
+    for (const slot of slotRoots) slot.removeEventListener("slotchange", onSlotChange);
+    slotRoots = [];
     scrollViews = [];
     scrollElements = [];
     scrollPositions = /* @__PURE__ */ new WeakMap();
     windowPositions = /* @__PURE__ */ new WeakMap();
   }
+  function onSlotChange() {
+    positionGeneration++;
+    const reference = context.reference.value;
+    const popup = context.popup.value;
+    const nextElements = [.../* @__PURE__ */ new Set([...getScrollElements(reference), ...getScrollElements(popup)])];
+    const nextViews = [.../* @__PURE__ */ new Set([...getScrollViews(reference), ...getScrollViews(popup)])];
+    const nextRoots = [.../* @__PURE__ */ new Set([...getSlotChangeRoots(reference), ...getSlotChangeRoots(popup)])];
+    function changed(before, after) {
+      return before.length !== after.length || before.some((item, index) => item !== after[index]);
+    }
+    if (changed(scrollElements, nextElements) || changed(scrollViews, nextViews) || changed(slotRoots, nextRoots)) bindScroll();
+    nextTick(update);
+  }
   function bindScroll() {
     unbindScroll();
     const reference = context.reference.value;
@@ -202,6 +223,8 @@ function useTriggerPositioner(options, context) {
     const active = options.updateAtScroll || options.scrollToClose || context.globalUpdateAtScroll.value || context.globalScrollToClose.value;
     if (!active || !reference || !popup || !context.visible.value || suspended)
       return;
+    slotRoots = [.../* @__PURE__ */ new Set([...getSlotChangeRoots(reference), ...getSlotChangeRoots(popup)])];
+    for (const slot of slotRoots) slot.addEventListener("slotchange", onSlotChange);
     scrollElements = [
       .../* @__PURE__ */ new Set([
         ...getScrollElements(reference),