@cedar-design/ui-vue 1.1.0 → 1.1.1

package/lib/slider/style/index.css

@@ -3,10 +3,10 @@
 }
 :root,
 :where([data-c-theme]) {
-  --c-slider-active-color: var(--c-sys-color-content-brand);
+  --c-slider-active-color: var(--c-sys-color-action-primary);
   --c-slider-track-color: var(--c-sys-color-state-hover);
   --c-slider-thumb-color: var(--c-sys-color-surface-default);
-  --c-slider-thumb-border-color: var(--c-sys-color-content-brand);
+  --c-slider-thumb-border-color: var(--c-sys-color-action-primary);
   --c-slider-text-color: var(--c-sys-color-content-secondary);
   --c-slider-tooltip-background: var(--c-sys-color-surface-tooltip);
   --c-slider-tooltip-color: var(--c-sys-color-content-on-dark);

package/lib/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/lib/switch/Switch.vue.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const vue = require("vue");
+const editorPending = require("../_components/field-presentation/editor-pending.js");
 const useActionGuard = require("../_hooks/use-action-guard.js");
 const globalConfig = require("../_utils/global-config.js");
 const errorDescription = require("../form/error-description.js");
@@ -22,6 +23,10 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const current = vue.computed(() => props2.modelValue === void 0 ? internal.value : props2.modelValue);
     const checked = vue.computed(() => current.value === props2.checkedValue);
     const pending = vue.ref(false);
+    const editorPending$1 = vue.inject(editorPending.fieldEditorControlPending, void 0);
+    vue.watch(pending, (value) => {
+      if (editorPending$1) editorPending$1.value = value;
+    }, { flush: "sync" });
     const busy = vue.computed(() => props2.loading || pending.value);
     const rippleKey = vue.ref(0);
     let active = true;

package/lib/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/lib/table/structural-slot.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const vue = require("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 (!vue.isVNode(nodes) || nodes.type === vue.Comment) return void 0;
+  if (nodes.type === vue.Text && !String(nodes.children ?? "").trim()) return void 0;
+  if (nodes.type === vue.Fragment && Array.isArray(nodes.children)) return firstStructuralNode(nodes.children);
+  return nodes;
+}
+exports.firstStructuralNode = firstStructuralNode;

package/lib/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/lib/table/table-tbody.js

@@ -2,6 +2,7 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const vue = require("vue");
 const globalConfig = require("../_utils/global-config.js");
+const structuralSlot = require("./structural-slot.js");
 const {
   name
 } = globalConfig.createNamespace("tbody");
@@ -11,7 +12,7 @@ const Tbody = /* @__PURE__ */ vue.defineComponent({
     slots
   }) {
     return () => {
-      return vue.createVNode(slots.tbody?.()[0] ?? "tbody", null, {
+      return vue.createVNode(structuralSlot.firstStructuralNode(slots.tbody?.()) ?? "tbody", null, {
         default: slots.default
       });
     };

package/lib/table/table-td.js

@@ -11,6 +11,7 @@ const autoTooltip = require("../_components/auto-tooltip/auto-tooltip.js");
 const TableSlot_vue_vue_type_script_setup_true_lang = require("./TableSlot.vue.js");
 const forwardTableSlot = require("./forward-table-slot.js");
 const extraColumn = require("./extra-column.js");
+const structuralSlot = require("./structural-slot.js");
 function _isSlot(s) {
   return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
 }
@@ -230,11 +231,11 @@ const Td = /* @__PURE__ */ vue.defineComponent({
       }, [renderContent()])]);
     };
     return () => {
-      const customCell = slots.td?.({
+      const customCell = structuralSlot.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 vue.createVNode(customCell ?? "td", {
         class: cls.value,

package/lib/table/table-th.js

@@ -2,6 +2,7 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const vue = require("vue");
 const globalConfig = require("../_utils/global-config.js");
+const structuralSlot = require("./structural-slot.js");
 const checkbox_index = require("../checkbox/index.js");
 const radio_index = require("../radio/index.js");
 const button_index = require("../button/index.js");
@@ -350,9 +351,9 @@ const Th = /* @__PURE__ */ vue.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 = structuralSlot.firstStructuralNode([props.customHeader]) ?? structuralSlot.firstStructuralNode(slots.th?.({
         column: props.column
-      })[0];
+      }));
       return vue.createVNode(customHeader ?? "th", {
         class: cls.value,
         style: style.value,

package/lib/table/table-thead.js

@@ -2,6 +2,7 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const vue = require("vue");
 const globalConfig = require("../_utils/global-config.js");
+const structuralSlot = require("./structural-slot.js");
 const {
   name
 } = globalConfig.createNamespace("thead");
@@ -11,7 +12,7 @@ const Thead = /* @__PURE__ */ vue.defineComponent({
     slots
   }) {
     return () => {
-      return vue.createVNode(slots.thead?.()[0] ?? "thead", null, {
+      return vue.createVNode(structuralSlot.firstStructuralNode(slots.thead?.()) ?? "thead", null, {
         default: slots.default
       });
     };

package/lib/table/table-tr.js

@@ -4,6 +4,7 @@ const vue = require("vue");
 const globalConfig = require("../_utils/global-config.js");
 const context = require("./context.js");
 const columnDirection = require("./column-direction.js");
+const structuralSlot = require("./structural-slot.js");
 const {
   name
 } = globalConfig.createNamespace("tr");
@@ -36,10 +37,10 @@ const Tr = /* @__PURE__ */ vue.defineComponent({
       [`${prefixCls}-tr-checked`]: props.checked
     }]);
     return () => {
-      return vue.createVNode(slots.tr?.({
+      return vue.createVNode(structuralSlot.firstStructuralNode(slots.tr?.({
         rowIndex: props.rowIndex,
         record: props.record?.raw
-      })[0] ?? "tr", {
+      })) ?? "tr", {
         class: cls.value
       }, {
         default: () => {

package/lib/table/table.js

@@ -25,6 +25,7 @@ const TableSlot_vue_vue_type_script_setup_true_lang = require("./TableSlot.vue.j
 const TableColumnSlot_vue_vue_type_script_setup_true_lang = require("./TableColumnSlot.vue.js");
 const forwardTableSlot = require("./forward-table-slot.js");
 const tableThead = require("./table-thead.js");
+const structuralSlot = require("./structural-slot.js");
 const tableTbody = require("./table-tbody.js");
 const tableTr = require("./table-tr.js");
 const tableTh = require("./table-th.js");
@@ -1281,9 +1282,10 @@ const _Table = /* @__PURE__ */ vue.defineComponent({
     const semanticId = `c-table-header-${vue.useId()}`;
     const visibleHeaderId = (row, index) => `${semanticId}-visible-${row}-${index}`;
     const visibleOperationId = (index) => `${semanticId}-visible-operation-${index}`;
-    const customHeaders = vue.computed(() => groupColumns.value.map((row) => row.map((column) => slots.th?.({
+    const activeHeaderSlot = vue.shallowRef(slots.th);
+    const customHeaders = vue.computed(() => groupColumns.value.map((row) => row.map((column) => structuralSlot.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}`,
@@ -1899,13 +1901,27 @@ const _Table = /* @__PURE__ */ vue.defineComponent({
       }
       return Object.keys(result).length > 0 ? result : void 0;
     });
+    const tableInstance = vue.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__ */ vue.defineComponent({
       props: {
-        rowSlotState: Number
+        rowSlotState: Number,
+        slotSnapshot: Array
       },
       setup: () => () => renderTable()
     });
     const render = () => {
+      const snapshot = currentSlotSnapshot();
       if (slots.default) {
         let _slot;
         return vue.createVNode(resizeObserver$1.default, {
@@ -1935,7 +1951,8 @@ const _Table = /* @__PURE__ */ vue.defineComponent({
           "aria-busy": loadingProps.value.loading || void 0
         }, tableInteractionEvents), [children.value, vue.createVNode(Loading_vue_vue_type_script_setup_true_lang.default, loadingProps.value, {
           default: () => [props2.pagination !== false && (flattenData.value.length > 0 || sortedData.value.length > 0) && isPaginationTop.value && renderPaginationArea(), vue.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), props2.pagination !== false && (flattenData.value.length > 0 || sortedData.value.length > 0) && !isPaginationTop.value && renderPaginationArea()]
         })])]
       });

package/lib/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/lib/time/picker/Panel2.vue.js

@@ -3,7 +3,7 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 const temporalKeyboard = require("../../_utils/temporal-keyboard.js");
 const vue = require("vue");
 const TimeColumn = require("./TimeColumn.vue.js");
-const button_index = require("../../button/index.js");
+const base = require("../../button/base.js");
 const is = require("../../_utils/is.js");
 const date = require("../../_utils/date.js");
 const globalConfig = require("../../_utils/global-config.js");
@@ -15,7 +15,7 @@ const _sfc_main = vue.defineComponent({
   name: globalConfig.createNamespace("time-picker-panel").name,
   components: {
     TimeColumn: TimeColumn.default,
-    Button: button_index.Button
+    Button: base.default
   },
   props: {
     min: String,

package/lib/time/picker/RangePanel2.vue.js

@@ -6,14 +6,14 @@ const Panel = require("./Panel.vue.js");
 const time_picker_utils_index = require("./utils/index.js");
 const globalConfig = require("../../_utils/global-config.js");
 const locale_index = require("../../locale/index.js");
-const button_index = require("../../button/index.js");
+const base = require("../../button/base.js");
 const { name } = globalConfig.createNamespace("time-picker-range-panel");
 const panelIndexes = [0, 1];
 const _sfc_main = vue.defineComponent({
   name,
   components: {
     Panel: Panel.default,
-    Button: button_index.Button
+    Button: base.default
   },
   inheritAttrs: false,
   props: {

package/lib/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/lib/tree-select/panel.js

@@ -197,7 +197,9 @@ const Panel = /* @__PURE__ */ vue.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/lib/tree-select/presentation.js

@@ -6,6 +6,7 @@ const optionLabels = require("../_components/field-presentation/option-labels.js
 const withFieldPresentation = require("../_components/field-presentation/with-field-presentation.js");
 const TreeSelect = require("./TreeSelect.vue.js");
 const _TreeSelect = withFieldPresentation.withFieldPresentation(TreeSelect.default, {
+  selectionConfirmation: "update",
   pauseSelectionWhileLoading: true,
   editor: ({ props, attrs, value, update, emit, slots, disabled, readonly }) => vue.h(
     SelectionEditor_vue_vue_type_script_setup_true_lang.default,

package/lib/tree-select/props.js

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

package/lib/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/lib/trigger/popup-move-focus.js

@@ -9,19 +9,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 };
 }
@@ -30,7 +30,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;
@@ -79,8 +79,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/lib/trigger/position.js

@@ -89,12 +89,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;
@@ -104,6 +113,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;
@@ -123,3 +160,4 @@ function getScrollViews(element) {
 exports.calculatePopupPosition = calculatePopupPosition;
 exports.getScrollElements = getScrollElements;
 exports.getScrollViews = getScrollViews;
+exports.getSlotChangeRoots = getSlotChangeRoots;