@chenzy-design/svelte 0.3.1 → 0.4.1

package/dist/cascader/Cascader.svelte

@@ -6,19 +6,18 @@
   加载中显示 spinner，结果缓存到本地 extraChildren（不改 treeData prop）。
   multiple：每列 checkbox 多选 + 父子联动（复用 core conduct/toggleCheck，以 value 为 key），
   trigger 按选中叶子路径多 tag 回显可单独移除；value 为 Key[][]（多条路径）。
-  filterable：搜索时切换为扁平路径列表，按 label 链过滤 + 高亮命中，点击直接选中整条路径。
-  expandTrigger='hover'：悬停非叶子节点即展开子级列（pointerenter 设 activePath，选中仍用点击）。
+  filterTreeNode：搜索时切换为扁平路径列表，按 label 链过滤 + 高亮命中，点击直接选中整条路径。
+  showNext='hover'：悬停非叶子节点即展开子级列（pointerenter 设 activePath，选中仍用点击）。
   displayRender：自定义触发器选中路径回显（单选 + 多选每个 tag 共用）。
   changeOnSelect（单选）：点击任一层级节点（含中间非叶子）立即提交从根到该
   节点的路径并触发 onChange；非叶子同时展开子列、不关闭面板（可停在任意层级
   或继续深入），叶子提交并关闭。关闭时仅叶子提交并关闭，非叶子仅展开（默认）。
   spec §4 补齐：separator（分隔符）、displayProp（回显字段 label/value）、
   maxTagCount（多选 tag 折叠 +N）、leafOnly（多选完全勾选父级折叠为父路径）、
-  filterTreeNode（filterable 的超集：true=默认子串匹配，函数=自定义谓词）、
+  filterTreeNode（true=默认子串匹配，函数=自定义谓词）、
   filterLeafOnly（搜索是否仅到叶子）、emptyContent（空态 string|Snippet）、
-  destroyOnClose（关闭保留/卸载浮层 DOM）、zIndex、getPopupContainer（浮层容器）、
-  columnWidth（列宽 number|number[]）。
-  新增：borderless/prefix/suffix/clearIcon/expandIcon/motion/keyMaps/remote/
+  zIndex、getPopupContainer（浮层容器）。
+  新增：borderless/prefix/suffix/clearIcon/expandIcon/arrowIcon/motion/keyMaps/remote/
   checkRelation/autoMergeValue/showNext/triggerRender/filterRender/filterSorter/
   topSlot/bottomSlot/onClear/onLoad/onSelect/onDropdownVisibleChange/onListScroll 等。
 -->
@@ -28,7 +27,6 @@
     useDismiss,
     conduct,
     toggleCheck,
-    resolveColumnWidth,
     rovingKeyFromEvent,
     nextRovingIndex,
     type TreeNodeData,
@@ -36,15 +34,27 @@
   } from '@chenzy-design/core';
   import { SvelteMap, SvelteSet } from 'svelte/reactivity';
   import type { Snippet } from 'svelte';
+  import {
+    IconClear,
+    IconChevronDown,
+    IconChevronRight,
+    IconSpin,
+  } from '@chenzy-design/icons';
   import { useLocale } from '../locale-provider/index.js';
   import { getGlobalPopupContainer } from '../config-provider/index.js';
   import { floating } from '../_floating/use-floating.js';
   import Tag from '../tag/Tag.svelte';
+  import Checkbox from '../checkbox/Checkbox.svelte';
+  import Input from '../input/Input.svelte';
+  import TagInput from '../tag-input/TagInput.svelte';
+  import { VirtualList } from '../virtual-list/index.js';
   import type { CascaderNode } from './types.js';
+  import { getInputGroupContext } from '../input/context.js';
 
   type Key = string | number;
   type Size = 'small' | 'default' | 'large';
-  type Status = 'default' | 'warning' | 'error';
+  /** 校验状态（对齐 Semi validateStatus）：默认 / 警告 / 错误 */
+  type ValidateStatus = 'default' | 'warning' | 'error';
 
   interface Props {
     /** 单选为单条路径 Key[]；多选为多条路径 Key[][] */
@@ -56,17 +66,13 @@
     /** 多选：每列 checkbox + 父子联动，trigger 多 tag 回显 */
     multiple?: boolean;
     size?: Size;
-    status?: Status;
+    /** 校验状态（对齐 Semi validateStatus）：'default' | 'warning' | 'error' */
+    validateStatus?: ValidateStatus;
     placeholder?: string;
     disabled?: boolean;
-    clearable?: boolean;
     changeOnSelect?: boolean;
-    /** 展开触发方式：'click' 点击展开（默认）；'hover' 悬停非叶子节点即展开子级列（legacy alias，推荐用 showNext） */
-    expandTrigger?: 'click' | 'hover';
     /** 多选时只回传/计数叶子节点（父节点不进 value、tag、计数） */
     leafOnly?: boolean;
-    /** 搜索时切换为扁平路径列表，按 label 链过滤 + 高亮命中（向后兼容别名，等价 filterTreeNode=true） */
-    filterable?: boolean;
     /** 是否可搜索及自定义匹配：false 关闭；true 默认按 label 链子串匹配；函数自定义谓词 */
     filterTreeNode?: boolean | ((query: string, path: CascaderFlatPath<CascaderNode>) => boolean);
     /** 搜索结果是否仅展示到叶子路径（默认 true；false 时含中间层级路径） */
@@ -79,35 +85,45 @@
     maxTagCount?: number;
     /** 列为空（无可选项）时内容；缺省走 i18n */
     emptyContent?: string | Snippet;
-    /** 关闭即卸载浮层内容（{#if}），重开重建。默认 false：首开后保留 DOM 仅隐藏。 */
-    destroyOnClose?: boolean;
     /** 浮层层级 */
     zIndex?: number;
     /** 浮层挂载容器，缺省 document.body。非 body 容器时改 absolute 定位相对该容器。 */
     getPopupContainer?: () => HTMLElement | null | undefined;
-    /** 列宽：统一（number）或逐列（number[]，超出取末项） */
-    columnWidth?: number | number[];
     /** 动态加载子节点；点击非叶子且无 children 的节点时调用 */
     loadData?: (node: CascaderNode) => Promise<CascaderNode[]>;
     /** 自定义触发器选中路径的回显文本（单选 + 多选每个 tag 均走此函数） */
     displayRender?: (labels: string[], selectedNodes: CascaderNode[]) => string;
-    /** 单选回调单条路径；多选回调多条叶子路径 */
-    onChange?: (value: Key[] | Key[][]) => void;
-    onOpenChange?: (open: boolean) => void;
+    /** 单选回调单条路径；多选回调多条叶子路径。onChangeWithObject=true 时改为回传节点对象（单选节点链 CascaderNode[]，多选每条路径节点链 CascaderNode[][]） */
+    onChange?: (value: Key[] | Key[][] | CascaderNode[] | CascaderNode[][]) => void;
+    /** 可访问名（对齐 Semi aria-label，默认 'Cascader'）。本库沿用 Input/Checkbox 的 ariaLabel 命名惯例。 */
     ariaLabel?: string;
+    /** aria-labelledby：关联外部 label 元素（Form.Field 透传 labelId，对齐 Semi）。 */
+    ariaLabelledby?: string;
+    /** aria-describedby：关联 helpText / extraText（Form.Field 透传）。 */
+    ariaDescribedby?: string;
+    /** aria-errormessage：error 态关联错误信息容器（Form.Field 透传）。 */
+    ariaErrormessage?: string;
+    /** aria-required：必填语义（Form.Field required 透传）。 */
+    ariaRequired?: boolean;
 
     // --- 外观 ---
+    /** 附加到根节点的自定义 class */
+    class?: string;
     /** 无边框模式 */
     borderless?: boolean;
     /** 前置内容（Snippet 或 string） */
     prefix?: Snippet | string;
+    /** 内嵌标签：触发器在值前渲染的标签（如「地区：」），Semi 中为 prefix 的别名 */
+    insetLabel?: Snippet | string;
+    /** 内嵌标签的 DOM id（供外部 aria-labelledby 引用） */
+    insetLabelId?: string;
     /** 后置内容（Snippet 或 string） */
     suffix?: Snippet | string;
     /** 自定义清除图标 */
     clearIcon?: Snippet;
-    /** 自定义展开图标（expandIcon / arrowIcon 均可，expandIcon 优先） */
+    /** 自定义菜单项右侧展开图标（列项 icon，对齐 Semi expandIcon） */
     expandIcon?: Snippet;
-    /** 自定义右侧下拉箭头（expandIcon 的别名） */
+    /** 自定义触发器右侧下拉箭头（对齐 Semi arrowIcon，与 expandIcon 语义不同） */
     arrowIcon?: Snippet;
     /** 下拉框展开动画（默认 true） */
     motion?: boolean;
@@ -121,8 +137,12 @@
     position?: string;
     /** 选择框样式 */
     style?: string;
-    /** 下拉菜单样式 */
+    /** 下拉菜单样式（合并进浮层根节点，不覆盖 use:floating 写入的定位样式） */
     dropdownStyle?: string | Record<string, string>;
+    /** 追加到浮层根节点的自定义类名（与内置类名并存） */
+    dropdownClassName?: string;
+    /** 浮层与 trigger 的额外间距（px），映射到浮层 offset；对象形态仅取 marginTop（其余方向暂未接入定位）。 */
+    dropdownMargin?: number | { marginTop?: number; marginBottom?: number; marginLeft?: number; marginRight?: number };
     /** 失焦回调 */
     onBlur?: (e: MouseEvent) => void;
     /** 聚焦回调 */
@@ -163,13 +183,15 @@
     checkRelation?: 'related' | 'unRelated';
     /** onChange 回调是否返回完整 option 对象 */
     onChangeWithObject?: boolean;
-    /** 超出 max 时回调 */
-    onExceed?: (items: unknown[]) => void;
-    /** 超出 maxTagCount 时是否显示 popover */
+    /** 多选可勾选数量上限；超出时不选入并触发 onExceed（减少始终允许） */
+    max?: number;
+    /** 超出 max 时回调，传当前（含超出项）勾选的节点集合 */
+    onExceed?: (items: CascaderNode[]) => void;
+    /** 超出 maxTagCount 折叠的 tag 以 Popover 悬浮展示剩余项（hover +N）。默认 false。 */
     showRestTagsPopover?: boolean;
-    /** 超出 tag popover 的 props */
+    /** 传给剩余 tags Popover 的额外 props（透传，可覆盖默认）。 */
     restTagsPopoverProps?: Record<string, unknown>;
-    /** 是否显示清除按钮（clearable 的别名） */
+    /** 是否显示清除按钮（对齐 Semi showClear，默认 false） */
     showClear?: boolean;
 
     // --- 节点配置 ---
@@ -181,7 +203,7 @@
     enableLeafClick?: boolean;
     /** 禁用不从父节点继承（严格禁用） */
     disableStrictly?: boolean;
-    /** 展开触发方式（新版 canonical prop，优先于 expandTrigger） */
+    /** 展开触发方式（对齐 Semi showNext）：'click' 点击展开（默认）；'hover' 悬停即展开子级列 */
     showNext?: 'click' | 'hover';
 
     // --- 事件 ---
@@ -205,35 +227,36 @@
     value,
     defaultValue,
     treeData = [],
-    open,
+    open: openProp,
     defaultOpen = false,
     multiple = false,
-    size = 'default',
-    status = 'default',
-    placeholder = '请选择',
-    disabled = false,
-    clearable = false,
+    size: sizeProp,
+    validateStatus = 'default',
+    placeholder,
+    disabled: disabledProp,
     changeOnSelect = false,
-    expandTrigger = 'click',
     leafOnly = false,
-    filterable = false,
     filterTreeNode,
     filterLeafOnly = true,
     displayProp = 'label',
     separator = ' / ',
     maxTagCount,
     emptyContent,
-    destroyOnClose = false,
     zIndex = 1030,
     getPopupContainer,
-    columnWidth = 180,
     loadData,
     displayRender,
     onChange,
-    onOpenChange,
-    ariaLabel,
+    ariaLabel = 'Cascader',
+    ariaLabelledby,
+    ariaDescribedby,
+    ariaErrormessage,
+    ariaRequired,
+    class: className = '',
     borderless = false,
     prefix,
+    insetLabel,
+    insetLabelId,
     suffix,
     clearIcon,
     expandIcon,
@@ -245,6 +268,8 @@
     position,
     style,
     dropdownStyle,
+    dropdownClassName,
+    dropdownMargin,
     onBlur,
     onFocus,
     preventScroll = false,
@@ -262,10 +287,11 @@
     autoMergeValue = true,
     checkRelation = 'related',
     onChangeWithObject = false,
+    max,
     onExceed,
     showRestTagsPopover = false,
     restTagsPopoverProps,
-    showClear: showClearProp,
+    showClear: showClearProp = false,
     keyMaps,
     clickToSelect = false,
     enableLeafClick = false,
@@ -279,11 +305,34 @@
     triggerRender,
   }: Props = $props();
 
+  // InputGroup 组级默认（size/disabled）：显式 prop 始终优先，否则回退组级，再回退组件默认。
+  const group = getInputGroupContext();
+  const size = $derived<Size>(sizeProp ?? group?.size ?? 'default');
+  const disabled = $derived<boolean>(disabledProp ?? group?.disabled ?? false);
+
   const loc = useLocale();
   // ConfigProvider 全局浮层容器默认；自身 getPopupContainer prop 优先，未传时回退此值（再回退 body）。
   const globalPopupContainer = getGlobalPopupContainer();
   const resolvePopupContainer = $derived(getPopupContainer ?? globalPopupContainer);
 
+  // 浮层与触发器间距：dropdownMargin 数字直接作 offset；对象形态取 marginTop（其余方向暂未接入）；未传回退默认 4。
+  const dropdownOffset = $derived.by(() => {
+    if (dropdownMargin == null) return 4;
+    if (typeof dropdownMargin === 'number') return dropdownMargin;
+    return dropdownMargin.marginTop ?? 4;
+  });
+
+  // 浮层自定义样式：合并 dropdownStyle（字符串或对象）与 zIndex，供拼接到浮层 inline style。
+  const dropdownStyleStr = $derived.by(() => {
+    const parts: string[] = [];
+    if (dropdownStyle) {
+      if (typeof dropdownStyle === 'string') parts.push(dropdownStyle);
+      else parts.push(Object.entries(dropdownStyle).map(([k, v]) => `${k}: ${v}`).join('; '));
+    }
+    if (zIndex != null) parts.push(`z-index: ${zIndex}`);
+    return parts.filter(Boolean).join('; ');
+  });
+
   // --- keyMaps: 字段名映射，规整 treeData ---
   const kmValue = $derived(keyMaps?.value ?? 'value');
   const kmLabel = $derived(keyMaps?.label ?? 'label');
@@ -318,15 +367,12 @@
   }
   const normalizedTreeData = $derived(keyMapsDefault ? treeData : normalizeNodes(treeData));
 
-  // showNext 是 canonical prop；expandTrigger 是 legacy alias。showNext 优先。
-  const effectiveExpandTrigger = $derived(
-    showNext === 'hover' || expandTrigger === 'hover' ? 'hover' : 'click',
-  );
+  // 展开触发方式（对齐 Semi showNext）。
+  const effectiveExpandTrigger = $derived(showNext === 'hover' ? 'hover' : 'click');
 
-  // filterTreeNode 优先；未显式传时回退 filterable 别名（向后兼容）。
-  // 归一为：是否可搜索 + 实际谓词（true=默认子串匹配，函数=自定义）。
+  // filterTreeNode 归一：是否可搜索 + 实际谓词（true=默认子串匹配，函数=自定义）。
   const filterSpec = $derived<boolean | ((q: string, p: CascaderFlatPath<CascaderNode>) => boolean)>(
-    remote ? true : (filterTreeNode !== undefined ? filterTreeNode : filterable),
+    remote ? true : (filterTreeNode ?? false),
   );
   const isFilterable = $derived(filterSpec !== false || remote);
   const showBuiltinSearch = $derived(isFilterable && searchPosition !== 'custom');
@@ -419,10 +465,10 @@
     isValueControlled ? asMultiPaths(value) : innerPaths,
   );
 
-  // --- 受控 open (红线 #1): 不无条件回写 open，仅 onOpenChange ---
-  const isOpenControlled = $derived(open !== undefined);
+  // --- 受控 open (红线 #1): 不无条件回写 open，仅 onDropdownVisibleChange ---
+  const isOpenControlled = $derived(openProp !== undefined);
   let innerOpen = $state(getInitialOpen());
-  const isOpen = $derived(isOpenControlled ? !!open : innerOpen);
+  const isOpen = $derived(isOpenControlled ? !!openProp : innerOpen);
 
   // --- 本地展开状态 (红线 #2): activePath 本地 $state，不依赖挂载 registry ---
   let activePath = $state<Key[]>(getInitialPath());
@@ -466,6 +512,13 @@
   const trimmedSearch = $derived(searchValue.trim());
   const searchActive = $derived(isFilterable && trimmedSearch.length > 0);
 
+  // 触发器内搜索输入框（对齐 Semi renderInput：搜索框在触发器选择区内，非浮层顶部）。
+  // showInput：面板打开且内置可搜索时显示 <Input>（Semi 于 toggleInputShow(true) 时聚焦）。
+  // 单选：Input 与 displayText span 同层；多选走 TagInput（其内建搜索输入，见 renderTagInput 段）。
+  const showInput = $derived(showBuiltinSearch && isOpen);
+  // 搜索 Input 组件实例（供打开时聚焦，对齐 Semi focusInput）。
+  let searchInputEl = $state<Input | undefined>(undefined);
+
   // onSearch 回调：搜索值变化时触发
   $effect(() => {
     if (isFilterable && trimmedSearch) {
@@ -519,7 +572,14 @@
       const lower = trimmedSearch.toLowerCase();
       results = flatPaths.filter((p) => {
         if (filterLeafOnly && !p.isLeaf) return false;
-        return p.labels.join(separator).toLowerCase().includes(lower);
+        // treeNodeFilterProp==='label'（默认）：按整条 label 链匹配（既有行为）。
+        // 其它字段：取路径末节点（目标节点）该字段值转字符串做子串匹配。
+        if (treeNodeFilterProp === 'label') {
+          return p.labels.join(separator).toLowerCase().includes(lower);
+        }
+        const lastNode = p.nodes[p.nodes.length - 1] as unknown as Record<string, unknown>;
+        const field = lastNode?.[treeNodeFilterProp];
+        return field != null && String(field).toLowerCase().includes(lower);
       });
     }
     if (filterSorter) {
@@ -554,7 +614,9 @@
       const leaf = p.values[p.values.length - 1] as Key;
       const nextBase = toggleCheck(mergedTreeData, checkedBase, leaf);
       const resolved = conduct(mergedTreeData, nextBase);
-      setPaths(leafBaseToPaths(resolved.checked));
+      const nextPaths = leafBaseToPaths(resolved.checked);
+      if (exceedsMax(currentPaths.length, nextPaths.length, resolved.checked)) return;
+      setPaths(nextPaths);
       searchValue = '';
     } else {
       setValue(p.values.slice());
@@ -582,6 +644,19 @@
   //   leafOnly=true：完全勾选的父级折叠为父路径并停止下钻（父 tag 代表整子树）。
   const checkedLeafPaths = $derived.by<{ path: Key[]; labels: string[]; nodes: CascaderNode[] }[]>(() => {
     if (!multiple) return [];
+    // unRelated（互不联动）：tag 源直接取用户实际勾选的每条路径（currentPaths），
+    // 不走联动推导的 checkState、不下钻到叶子（对齐 Semi：unRelated 用 checkedKeys 直接回显）。
+    // 否则勾选中间节点（如「热带」）会被 conduct 联动展开成其叶子 tag（芒果/菠萝），语义错。
+    if (isUnRelated) {
+      const out: { path: Key[]; labels: string[]; nodes: CascaderNode[] }[] = [];
+      for (const p of currentPaths) {
+        if (p.length === 0) continue;
+        const chain = findPath(normalizedTreeData, p);
+        if (chain.length === 0) continue;
+        out.push({ path: p, labels: chain.map((n) => n.label), nodes: chain });
+      }
+      return out;
+    }
     const out: { path: Key[]; labels: string[]; nodes: CascaderNode[] }[] = [];
     const walk = (nodes: CascaderNode[], path: Key[], labels: string[], chain: CascaderNode[]) => {
       for (const n of nodes) {
@@ -604,29 +679,34 @@
     return out;
   });
 
-  // maxTagCount 折叠：显示前 N 个 tag + 隐藏数（仅影响显示，不改 value，红线 #1/#2）。
-  const visibleTagPaths = $derived(
-    maxTagCount !== undefined && maxTagCount >= 0
-      ? checkedLeafPaths.slice(0, maxTagCount)
-      : checkedLeafPaths,
-  );
-  const hiddenTagCount = $derived(
-    maxTagCount !== undefined && maxTagCount >= 0
-      ? Math.max(0, checkedLeafPaths.length - maxTagCount)
-      : 0,
+  // --- 多选触发器复用 TagInput（对齐 Semi renderTagInput）---
+  // TagInput 消费 string[] 的 value（每条选中路径以其末端节点 value 为 key），
+  // 折叠 maxTagCount / 剩余 Popover / +N 均由 TagInput 内部处理（Semi 同构）。
+  // key→路径回显数据映射：renderTagItem 收到 key 后据此取路径 label；onRemove 据此取叶子 value。
+  const tagKeyToLeaf = $derived.by(() => {
+    const m = new Map<string, { path: Key[]; labels: string[]; nodes: CascaderNode[] }>();
+    for (const leaf of checkedLeafPaths) {
+      m.set(String(leaf.path[leaf.path.length - 1]), leaf);
+    }
+    return m;
+  });
+  // TagInput value：每条选中路径末端节点 value 的字符串键（顺序即 checkedLeafPaths 顺序）。
+  const tagInputValue = $derived(
+    checkedLeafPaths.map((leaf) => String(leaf.path[leaf.path.length - 1])),
   );
-
-  // clearable / showClear 别名归一（showClear prop 优先 clearable）
-  const effClearable = $derived(showClearProp ?? clearable ?? false);
-  // expandIcon / arrowIcon 别名归一
-  const effExpandIcon = $derived(expandIcon ?? arrowIcon);
+  // exactOptionalPropertyTypes：可选 prop 传 undefined 会报错，缺省时不带该键（对象展开透传）。
+  const tagInputOptional = $derived<Record<string, unknown>>({
+    ...(maxTagCount !== undefined ? { maxTagCount } : {}),
+    ...(restTagsPopoverProps !== undefined ? { restTagsPopoverProps } : {}),
+    ...(showBuiltinSearch ? { onInputChange: (v: string) => (searchValue = v) } : {}),
+  });
 
   const selectedChain = $derived(findPath(normalizedTreeData, currentValue));
   const displayLabel = $derived(renderPath(selectedChain.map((n) => n.label), selectedChain));
   const hasSelection = $derived(
     multiple ? checkedLeafPaths.length > 0 : selectedChain.length > 0,
   );
-  const showClear = $derived(effClearable && !disabled && hasSelection);
+  const showClear = $derived(showClearProp && !disabled && hasSelection);
 
   // 单条路径回显文本：有 displayRender 走自定义（仍传 label 链 + 节点链）；
   // 否则按 displayProp 取 label 或 value 链，用 separator 连接。
@@ -639,7 +719,12 @@
 
   function setValue(next: Key[]) {
     if (!isValueControlled) innerValue = next;
-    onChange?.(next);
+    // onChangeWithObject=true：回传选中路径上每个节点的完整对象链，而非 value 数组。
+    if (onChangeWithObject) {
+      onChange?.(findPath(normalizedTreeData, next));
+    } else {
+      onChange?.(next);
+    }
   }
 
   // 多选：由 conduct 解析后的 checked 全集生成多条路径回调。
@@ -675,11 +760,43 @@
 
   function setPaths(nextPaths: Key[][]) {
     if (!isValueControlled) innerPaths = nextPaths;
-    onChange?.(nextPaths);
+    // onChangeWithObject=true：每条选中路径回传其完整节点链（CascaderNode[]），而非 value 链。
+    if (onChangeWithObject) {
+      onChange?.(nextPaths.map((p) => findPath(normalizedTreeData, p)));
+    } else {
+      onChange?.(nextPaths);
+    }
   }
 
-  // 切换某节点勾选（支持 related/unRelated 两种模式）
-  function toggleCheckNode(node: CascaderNode) {
+  // 由 value 集合收集对应节点对象（用于 onExceed 回调）。
+  function nodesForKeys(keys: Set<Key>): CascaderNode[] {
+    const out: CascaderNode[] = [];
+    const walk = (nodes: CascaderNode[]) => {
+      for (const n of nodes) {
+        if (keys.has(n.value)) out.push(n);
+        const kids = childrenOf(n);
+        if (kids && kids.length > 0) walk(kids);
+      }
+    };
+    walk(normalizedTreeData);
+    return out;
+  }
+
+  // max 数量上限（对齐 Semi）：仅在「增加勾选」且结果超出 max 时拦截并调 onExceed；
+  // 减少勾选始终放行。prevSize/nextSize 为归一后的对外 value 计数（related=已解析集，
+  // unRelated=显式勾选集），保持与 Semi「resolved/checked size」一致。
+  function exceedsMax(prevSize: number, nextSize: number, nextKeys: Set<Key>): boolean {
+    if (max === undefined || max < 0) return false;
+    if (nextSize > prevSize && nextSize > max) {
+      onExceed?.(nodesForKeys(nextKeys));
+      return true;
+    }
+    return false;
+  }
+
+  // 切换某节点勾选（支持 related/unRelated 两种模式）。colIndex=该节点所在列，
+  // 用于在 unRelated 下构建完整路径（父路径 = activePath 前 colIndex 项）。
+  function toggleCheckNode(node: CascaderNode, colIndex?: number) {
     if (node.disabled || disabled) return;
     if (isUnRelated) {
       // unRelated: 独立切换，不联动父子
@@ -689,20 +806,22 @@
       if (idx >= 0) {
         nextPaths.splice(idx, 1);
       } else {
-        // 从 activePath 构建完整路径
-        const colIdx = activePath.indexOf(nodeVal);
-        if (colIdx >= 0) {
-          nextPaths.push(activePath.slice(0, colIdx + 1));
-        } else {
-          nextPaths.push([nodeVal]);
-        }
+        // 构建完整路径：第 colIndex 列节点的父路径 = activePath 前 colIndex 项。
+        // 用 colIndex 而非 activePath.indexOf(nodeVal)——后者在值重复/父列未展开时会失败，
+        // 导致存入残缺路径（如只有 [tropical] 丢了父 fruit），findPath 解析不到而 tag 不渲染。
+        const parent = typeof colIndex === 'number' ? activePath.slice(0, colIndex) : [];
+        nextPaths.push([...parent, nodeVal]);
       }
+      const nextKeys = pathsToLeafBase(nextPaths);
+      if (exceedsMax(currentPaths.length, nextPaths.length, nextKeys)) return;
       setPaths(nextPaths);
       return;
     }
     const nextBase = toggleCheck(mergedTreeData, checkedBase, node.value);
     const resolved = conduct(mergedTreeData, nextBase);
-    setPaths(leafBaseToPaths(resolved.checked));
+    const nextPaths = leafBaseToPaths(resolved.checked);
+    if (exceedsMax(currentPaths.length, nextPaths.length, resolved.checked)) return;
+    setPaths(nextPaths);
   }
 
   // 移除某 tag（按叶子 value 取消勾选，联动祖先半选更新）
@@ -713,8 +832,14 @@
       setPaths(nextPaths);
       return;
     }
-    const nextBase = new Set(checkedBase);
-    nextBase.delete(leafValue);
+    // 修复 autoMergeValue 合并态删除失效：checkedBase 在合并态含父 key、不含被合并的叶子，
+    // 直接 delete(leafValue) 会 miss。改从 tag 显示源 checkedLeafPaths（完整展开的叶子路径，
+    // 与 tag 一一对应）重建叶子基集 minus 要删的叶子，保证删除源与显示源一致。
+    const nextBase = new Set<Key>();
+    for (const leaf of checkedLeafPaths) {
+      const key = leaf.path[leaf.path.length - 1] as Key;
+      if (key !== leafValue) nextBase.add(key);
+    }
     const resolved = conduct(mergedTreeData, nextBase);
     setPaths(leafBaseToPaths(resolved.checked));
   }
@@ -734,7 +859,6 @@
     if (next === isOpen) return;
     if (!next) searchValue = '';
     if (!isOpenControlled) innerOpen = next;
-    onOpenChange?.(next);
     onDropdownVisibleChange?.(next);
     if (next) {
       // 打开时同步 activePath 到当前选中路径
@@ -752,9 +876,34 @@
 
   function toggleOpen() {
     if (disabled) return;
+    // 对齐 Semi handleClick：可搜索时点击开着的触发器不收起（焦点留搜索框继续输入）。
+    if (isOpen && showBuiltinSearch) return;
     setOpen(!isOpen);
   }
 
+  // --- 命令式 Methods（经 bind:this 组件实例调用）---
+  // 复用现成 setOpen（尊重受控/非受控 + onOpenChange/onDropdownVisibleChange 副作用）。
+  /** 打开下拉面板。 */
+  export function open() {
+    setOpen(true);
+  }
+  /** 关闭下拉面板。 */
+  export function close() {
+    setOpen(false);
+  }
+  /** 聚焦触发器可聚焦元素（消费 preventScroll）。 */
+  export function focus() {
+    rootEl?.focus({ preventScroll });
+  }
+  /** 触发器失焦。 */
+  export function blur() {
+    rootEl?.blur();
+  }
+  /** 以编程方式设置搜索值并触发搜索流程（等价用户在搜索框输入）。 */
+  export function search(value: string) {
+    searchValue = value;
+  }
+
   function isActiveAt(colIndex: number, node: CascaderNode): boolean {
     return activePath[colIndex] === node.value;
   }
@@ -814,7 +963,7 @@
       }
       // enableLeafClick: 只有 true 时叶子点击触发勾选
       if (enableLeafClick || !node.isLeaf) {
-        toggleCheckNode(node);
+        toggleCheckNode(node, colIndex);
       }
       return;
     }
@@ -859,6 +1008,33 @@
     }
   }
 
+  // hover 展开延迟：enter 延迟 mouseEnterDelay 后展开；leave 清除 pending enter
+  // 定时器（延迟 mouseLeaveDelay），避免鼠标划过瞬间抖动展开。timer 用普通变量。
+  let hoverTimer: ReturnType<typeof setTimeout> | undefined;
+  function clearHoverTimer() {
+    if (hoverTimer !== undefined) {
+      clearTimeout(hoverTimer);
+      hoverTimer = undefined;
+    }
+  }
+  function scheduleHoverExpand(colIndex: number, node: CascaderNode) {
+    if (effectiveExpandTrigger !== 'hover') return;
+    clearHoverTimer();
+    hoverTimer = setTimeout(() => {
+      hoverTimer = undefined;
+      hoverExpand(colIndex, node);
+    }, mouseEnterDelay);
+  }
+  function scheduleHoverLeave() {
+    if (effectiveExpandTrigger !== 'hover') return;
+    // 移出：仅清除 pending 的 enter 展开（延迟 mouseLeaveDelay），不主动收起已展开列。
+    if (hoverTimer === undefined) return;
+    const pending = hoverTimer;
+    hoverTimer = undefined;
+    setTimeout(() => clearTimeout(pending), mouseLeaveDelay);
+  }
+  $effect(() => () => clearHoverTimer());
+
   function clearAll(e: MouseEvent) {
     e.stopPropagation();
     if (disabled) return;
@@ -984,7 +1160,7 @@
       case ' ':
         e.preventDefault();
         if (node) {
-          if (multiple) toggleCheckNode(node);
+          if (multiple) toggleCheckNode(node, kbCol);
           else selectNode(kbCol, node);
         }
         break;
@@ -997,13 +1173,21 @@
   let rootEl = $state<HTMLDivElement | null>(null);
   let panelEl = $state<HTMLDivElement | null>(null);
 
-  // --- destroyOnClose：默认 false 时首开后保留浮层 DOM（仅 --hidden 切显隐），
-  //     true 时关闭即从 DOM 卸载（{#if shouldRender}），重开重建。 ---
+  // 浮层 DOM 保活：首开后保留（仅 -hidden 切显隐），对齐 Semi Popover motion（无 destroyOnClose）。
   let hasBeenOpened = $state(false);
   $effect(() => {
     if (isOpen) hasBeenOpened = true;
   });
-  const shouldRender = $derived(destroyOnClose ? isOpen : isOpen || hasBeenOpened);
+  const shouldRender = $derived(isOpen || hasBeenOpened);
+
+  // 打开且内置可搜索时聚焦触发器内搜索 Input（对齐 Semi toggle2SearchInput→focus）。
+  // 焦点从 root(combobox) 转移到 Input 原生 input：searchable 时 combobox 语义由 Input 承载。
+  $effect(() => {
+    if (showInput && searchInputEl) {
+      // tick 后聚焦，待 Input 挂载。
+      requestAnimationFrame(() => searchInputEl?.focus());
+    }
+  });
 
   // 空态文本（emptyContent 为 string 时用，Snippet 时模板直接渲染）。
   const emptyText = $derived(
@@ -1022,99 +1206,203 @@
     });
   });
 
+  // 对齐 Semi 修饰类：single/multiple/filterable/focus(=open)/error/warning/borderless/with-prefix/with-suffix。
   const cls = $derived(
     [
       'cd-cascader',
-      `cd-cascader--${size}`,
-      `cd-cascader--${status}`,
-      disabled && 'cd-cascader--disabled',
-      isOpen && 'cd-cascader--open',
-      position && `cd-cascader--${position}`,
-      borderless && 'cd-cascader--borderless',
-      motion === false && 'cd-cascader--no-motion',
+      size === 'small' && 'cd-cascader-small',
+      size === 'large' && 'cd-cascader-large',
+      validateStatus === 'error' && 'cd-cascader-error',
+      validateStatus === 'warning' && 'cd-cascader-warning',
+      disabled && 'cd-cascader-disabled',
+      isOpen && 'cd-cascader-focus',
+      multiple ? 'cd-cascader-multiple' : 'cd-cascader-single',
+      isFilterable && 'cd-cascader-filterable',
+      borderless && 'cd-cascader-borderless',
+      (prefix || insetLabel) && 'cd-cascader-with-prefix',
+      suffix && 'cd-cascader-with-suffix',
+      motion === false && 'cd-cascader-no-motion',
+      className,
     ]
       .filter(Boolean)
       .join(' '),
   );
 </script>
 
-<div class={cls} bind:this={rootEl} {style}>
-  <!-- combobox 容器用 div 以合法承载多选 tags / clear 等内部交互元素 -->
-  {#if triggerRender}
-    {@render triggerRender({ value, placeholder, isOpen, disabled })}
-  {:else}
-  <div
-    class="cd-cascader__trigger"
+<!--
+  root 触发器容器（对齐 Semi .semi-cascader，含 prefix / selection / clearbtn / arrow / suffix）。
+  - 非搜索：root 承载 role=combobox + tabindex + 键盘（aria-activedescendant 列内 roving），焦点在 root。
+  - 内置可搜索：combobox 语义下移到 selection 内的搜索 <Input>（原生 input 承载 role/aria +
+    键盘），root 转为普通容器（无 role/tabindex，避免嵌套双 combobox）。对齐 Semi renderInput。
+-->
+<!--
+  searchInput：触发器内搜索 <Input>（对齐 Semi renderInput 的 {showInput && <Input/>}）。
+  combobox 语义经 rest 透传落到 Input 内部原生 <input>：role=combobox + aria-expanded
+  + aria-controls + aria-activedescendant + aria-autocomplete=list。受控值 searchValue + onInput
+  回填（勿 bind:）。键盘走 onFlatKeydown（搜索态 roving）+ Escape 关闭。
+-->
+{#snippet searchInput()}
+  <Input
+    bind:this={searchInputEl}
+    class="cd-cascader-search-input"
+    size={size === 'large' ? 'default' : 'small'}
+    borderless
+    {disabled}
+    {validateStatus}
+    value={searchValue}
+    placeholder={hasSelection ? '' : (searchPlaceholder ?? loc().t('Cascader.searchPlaceholder'))}
+    ariaLabel={ariaLabel}
     role="combobox"
     aria-haspopup="listbox"
     aria-expanded={isOpen}
-    aria-controls={listId}
-    aria-activedescendant={isOpen && !searchActive ? activeDescId : undefined}
-    aria-label={ariaLabel}
-    aria-invalid={status === 'error' || undefined}
-    aria-disabled={disabled || undefined}
-    tabindex={disabled ? -1 : 0}
-    onclick={toggleOpen}
-    onfocus={(e) => onFocus?.(e as unknown as MouseEvent)}
-    onblur={(e) => onBlur?.(e as unknown as MouseEvent)}
-    onkeydown={(e) => {
-      if (disabled) return;
-      if (!isOpen) {
-        // 关闭态：Enter/Space/Down 打开浮层。
-        if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {
-          e.preventDefault();
-          setOpen(true);
-        }
-        return;
-      }
-      // 打开态：搜索激活时由搜索框处理 roving，焦点不在触发器；
-      // 否则触发器（焦点宿主）驱动列 roving（aria-activedescendant 模型）。
-      if (!searchActive) onPanelKeydown(e);
+    aria-controls={searchActive ? flatListId : listId}
+    aria-activedescendant={activeDescId}
+    aria-autocomplete="list"
+    onInput={(v) => (searchValue = v)}
+    onKeyDown={(e) => {
+      if (searchActive) onFlatKeydown(e);
       else if (e.key === 'Escape') setOpen(false);
+      else onPanelKeydown(e);
     }}
-  >
-    {#if prefix}
-      <span class="cd-cascader__prefix" aria-hidden="true">
-        {#if typeof prefix === 'string'}{prefix}{:else}{@render (prefix as Snippet)()}{/if}
-      </span>
+  />
+{/snippet}
+
+<!-- searchTrigger：Semi renderInput 的 search-wrapper（span[displayText|placeholder] + searchInput）。 -->
+{#snippet searchTrigger(displayText: string)}
+  <div class="cd-cascader-search-wrapper">
+    <span
+      class={[
+        !displayText && 'cd-cascader-selection-placeholder',
+        displayText && 'cd-cascader-selection-text',
+        showInput && searchValue && 'cd-cascader-selection-text-hide',
+        showInput && !searchValue && 'cd-cascader-selection-text-inactive',
+      ].filter(Boolean).join(' ')}
+    >{displayText ? displayText : (placeholder ?? '')}</span>
+    {#if showInput}
+      {@render searchInput()}
+    {/if}
+  </div>
+{/snippet}
+
+<!-- svelte-ignore a11y_interactive_supports_focus -->
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<div
+  class={cls}
+  bind:this={rootEl}
+  {style}
+  role={triggerRender || showBuiltinSearch ? undefined : 'combobox'}
+  aria-haspopup={triggerRender || showBuiltinSearch ? undefined : 'listbox'}
+  aria-expanded={triggerRender || showBuiltinSearch ? undefined : isOpen}
+  aria-controls={triggerRender || showBuiltinSearch ? undefined : listId}
+  aria-activedescendant={!triggerRender && !showBuiltinSearch && isOpen && !searchActive ? activeDescId : undefined}
+  aria-label={triggerRender || showBuiltinSearch ? undefined : ariaLabel}
+  aria-labelledby={ariaLabelledby}
+  aria-describedby={ariaDescribedby}
+  aria-errormessage={ariaErrormessage}
+  aria-required={ariaRequired || undefined}
+  aria-invalid={!triggerRender && !showBuiltinSearch && validateStatus === 'error' ? true : undefined}
+  aria-disabled={!triggerRender && !showBuiltinSearch && disabled ? true : undefined}
+  tabindex={triggerRender || showBuiltinSearch ? undefined : (disabled ? -1 : 0)}
+  onclick={triggerRender ? undefined : toggleOpen}
+  onfocus={triggerRender ? undefined : (e) => onFocus?.(e as unknown as MouseEvent)}
+  onblur={triggerRender ? undefined : (e) => onBlur?.(e as unknown as MouseEvent)}
+  onkeydown={triggerRender || showBuiltinSearch ? undefined : (e) => {
+    if (disabled) return;
+    if (!isOpen) {
+      if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {
+        e.preventDefault();
+        setOpen(true);
+      }
+      return;
+    }
+    if (!searchActive) onPanelKeydown(e);
+    else if (e.key === 'Escape') setOpen(false);
+  }}
+>
+  {#if triggerRender}
+    {@render triggerRender({ value, placeholder: placeholder ?? '', isOpen, disabled })}
+  {:else}
+    {#if prefix || insetLabel}
+      <div class="cd-cascader-prefix" aria-hidden="true">
+        {#if prefix}
+          {#if typeof prefix === 'string'}
+            <span class="cd-cascader-prefix-text">{prefix}</span>
+          {:else}{@render (prefix as Snippet)()}{/if}
+        {/if}
+        {#if insetLabel}
+          <span class="cd-cascader-inset-label" id={insetLabelId}>
+            {#if typeof insetLabel === 'string'}{insetLabel}{:else}{@render (insetLabel as Snippet)()}{/if}
+          </span>
+        {/if}
+      </div>
     {/if}
 
-    <span class="cd-cascader__content">
+    <div class={['cd-cascader-selection', multiple && 'cd-cascader-selection-multiple'].filter(Boolean).join(' ')}>
       {#if multiple}
-        {#if checkedLeafPaths.length > 0}
-          <span class="cd-cascader__tags">
-            {#each visibleTagPaths as leaf (leaf.path.join('/'))}
+        <!--
+          多选触发器整体复用 TagInput（严格对齐 Semi renderTagInput）：
+          value=已选叶子 key、maxTagCount/showRestTagsPopover/restTagsPopoverProps 透传、
+          renderTagItem 保留 cascader 路径 label 回显、inputValue+onInputChange 接搜索过滤、
+          onRemove 接删除叶子（受控不回写 value，仅 onChange，红线 #1）、expandRestTagsOnClick=false。
+          搜索输入内建在 TagInput（Semi 同构，无独立搜索 Input）；不可搜索时 TagInput 输入框仅占位不生效。
+        -->
+        <TagInput
+          {disabled}
+          size={size === 'large' ? 'large' : size === 'small' ? 'small' : 'default'}
+          {validateStatus}
+          value={tagInputValue}
+          {showRestTagsPopover}
+          expandRestTagsOnClick={false}
+          inputValue={showBuiltinSearch ? searchValue : ''}
+          {...tagInputOptional}
+          onRemove={(removedKey) => {
+            const leaf = tagKeyToLeaf.get(removedKey);
+            if (leaf) removeLeaf(leaf.path[leaf.path.length - 1] as Key);
+          }}
+          placeholder={hasSelection ? '' : (placeholder ?? '')}
+          ariaLabel={ariaLabel}
+        >
+          {#snippet renderTagItem({ value: nodeKey, onClose })}
+            {@const leaf = tagKeyToLeaf.get(nodeKey)}
+            {#if leaf}
               <Tag
-                size={size === 'large' ? 'default' : 'small'}
+                class="cd-cascader-selection-tag"
+                size={size === 'large' ? 'large' : 'small'}
+                color="white"
+                type="light"
                 closable={!disabled}
-                onClose={() => removeLeaf(leaf.path[leaf.path.length - 1] as Key)}
+                onClose={(_children, e) => {
+                  e.preventDefault();
+                  onClose();
+                }}
               >
                 {renderPath(leaf.labels, leaf.nodes)}
               </Tag>
-            {/each}
-            {#if hiddenTagCount > 0}
-              <Tag size={size === 'large' ? 'default' : 'small'}>+{hiddenTagCount}</Tag>
             {/if}
-          </span>
-        {:else}
-          <span class="cd-cascader__placeholder">{placeholder}</span>
-        {/if}
+          {/snippet}
+        </TagInput>
+      {:else if showBuiltinSearch}
+        <!-- 单选 + 内置可搜索：displayText/placeholder span + showInput 时的搜索 Input
+             （对齐 Semi renderInput：search-wrapper > span + <Input>，非浮层顶部裸 input）。 -->
+        {@render searchTrigger(hasSelection ? displayLabel : '')}
       {:else if hasSelection}
-        <span class="cd-cascader__value">{displayLabel}</span>
+        <span class="cd-cascader-selection-text">{displayLabel}</span>
       {:else}
-        <span class="cd-cascader__placeholder">{placeholder}</span>
+        <span class="cd-cascader-selection-placeholder">{placeholder ?? ''}</span>
       {/if}
-    </span>
+    </div>
 
     {#if suffix}
-      <span class="cd-cascader__suffix" aria-hidden="true">
-        {#if typeof suffix === 'string'}{suffix}{:else}{@render (suffix as Snippet)()}{/if}
-      </span>
+      <div class="cd-cascader-suffix" aria-hidden="true">
+        {#if typeof suffix === 'string'}
+          <span class="cd-cascader-suffix-text">{suffix}</span>
+        {:else}{@render (suffix as Snippet)()}{/if}
+      </div>
     {/if}
 
     {#if showClear}
       <span
-        class="cd-cascader__clear"
+        class="cd-cascader-clearbtn"
         role="button"
         tabindex="-1"
         aria-label={loc().t('Cascader.clear')}
@@ -1129,110 +1417,111 @@
         {#if clearIcon}
           {@render clearIcon()}
         {:else}
-          <svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true" focusable="false">
-            <path
-              fill="currentColor"
-              d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1Zm2.5 9.1-1.4 1.4L8 9.4 6.5 11l-1.4-1.4L6.6 8 5.1 6.5 6.5 5.1 8 6.6 9.5 5.1l1.4 1.4L9.4 8l1.1 1.1Z"
-            />
-          </svg>
+          <IconClear aria-hidden="true" />
         {/if}
       </span>
     {/if}
 
-    <span class="cd-cascader__arrow" aria-hidden="true">
-      {#if effExpandIcon}
-        {@render effExpandIcon()}
+    <span class="cd-cascader-arrow" aria-hidden="true">
+      {#if arrowIcon}
+        {@render arrowIcon()}
       {:else}
-        <svg viewBox="0 0 16 16" width="12" height="12" focusable="false">
-          <path fill="currentColor" d="M3.5 6 8 10.5 12.5 6l-1-1L8 8.5 4.5 5l-1 1Z" />
-        </svg>
+        <IconChevronDown aria-hidden="true" />
       {/if}
     </span>
-  </div>
   {/if}
 
   {#if shouldRender}
     <div
-      class="cd-cascader__panel"
-      class:cd-cascader__panel--hidden={!isOpen}
+      class={['cd-cascader-popover', dropdownClassName].filter(Boolean).join(' ')}
+      class:cd-cascader-popover-hidden={!isOpen}
       bind:this={panelEl}
       use:floating={{
         trigger: rootEl,
         placement: 'bottomStart',
-        autoAdjust: true,
-        offset: 4,
+        autoAdjust: autoAdjustOverflow,
+        offset: dropdownOffset,
         getContainer: resolvePopupContainer,
         open: isOpen,
       }}
       id={listId}
-      style:z-index={zIndex}
+      style={dropdownStyleStr}
     >
       {#if topSlot}{@render topSlot()}{/if}
 
-      {#if showBuiltinSearch}
-        <div class="cd-cascader__search">
-          <input
-            class="cd-cascader__search-input"
-            type="text"
-            role="combobox"
-            aria-expanded={searchActive}
-            aria-controls={flatListId}
-            aria-activedescendant={searchActive ? activeDescId : undefined}
-            placeholder={loc().t('Cascader.searchPlaceholder')}
-            aria-label={loc().t('Cascader.searchPlaceholder')}
-            bind:value={searchValue}
-            onkeydown={onFlatKeydown}
-          />
-        </div>
-      {/if}
       {#if searchActive}
-        <ul
-          class="cd-cascader__flat"
-          role="listbox"
-          id={flatListId}
-          aria-label={loc().t('Cascader.searchResults')}
-        >
-          {#if filteredPaths.length === 0}
-            {#if isEmptySnippet}
-              <li class="cd-cascader__empty">{@render (emptyContent as Snippet)()}</li>
+        <!-- 单条搜索结果项：virtualize 与非 virtualize 两路共用同一渲染，行为一致 -->
+        {#snippet flatOption(p: FlatPath, fi: number)}
+          <!-- 键盘经搜索框 aria-activedescendant 漫游管理，选项 tabindex=-1 click-only -->
+          <!-- svelte-ignore a11y_click_events_have_key_events -->
+          <li
+            id={flatItemId(p.values)}
+            class="cd-cascader-option cd-cascader-option-flatten"
+            class:cd-cascader-option-active={kbFlatIndex === fi}
+            role="option"
+            aria-selected={kbFlatIndex === fi}
+            aria-disabled={p.disabled || undefined}
+            onclick={() => selectFlatPath(p)}
+            tabindex={-1}
+          >
+            {#if filterRender}
+              {@render filterRender({ path: p })}
             {:else}
-              <li class="cd-cascader__empty">{emptyText}</li>
+              <span class="cd-cascader-option-label">
+                {#each highlightParts(p.labels.join(separator)) as part, i (i)}
+                  {#if part.mark}<span class="cd-cascader-option-label-highlight">{part.text}</span>{:else}{part.text}{/if}
+                {/each}
+              </span>
             {/if}
-          {:else}
-            {#each filteredPaths as p, fi (p.values.join('/'))}
-              <!-- 键盘经搜索框 aria-activedescendant 漫游管理，选项 tabindex=-1 click-only -->
-              <!-- svelte-ignore a11y_click_events_have_key_events -->
-              <li
-                id={flatItemId(p.values)}
-                class="cd-cascader__option cd-cascader__flat-option"
-                class:cd-cascader__option--active={kbFlatIndex === fi}
-                role="option"
-                aria-selected={kbFlatIndex === fi}
-                aria-disabled={p.disabled || undefined}
-                onclick={() => selectFlatPath(p)}
-                tabindex={-1}
-              >
-                {#if filterRender}
-                  {@render filterRender({ path: p })}
-                {:else}
-                  <span class="cd-cascader__option-label">
-                    {#each highlightParts(p.labels.join(separator)) as part, i (i)}
-                      {#if part.mark}<mark class="cd-cascader__highlight">{part.text}</mark>{:else}{part.text}{/if}
-                    {/each}
-                  </span>
-                {/if}
-              </li>
-            {/each}
-          {/if}
-        </ul>
+          </li>
+        {/snippet}
+        {#if virtualizeInSearch && filteredPaths.length > 0}
+          <!-- 搜索结果虚拟滚动：仅在传入 virtualizeInSearch 且有命中时启用 -->
+          <div
+            class="cd-cascader-option-lists cd-cascader-flatten"
+            role="listbox"
+            id={flatListId}
+            aria-label={loc().t('Cascader.searchResults')}
+            style:inline-size="{virtualizeInSearch.width}px"
+          >
+            <VirtualList
+              data={filteredPaths}
+              getKey={(p: FlatPath) => p.values.join('/')}
+              itemSize={virtualizeInSearch.itemSize}
+              height={virtualizeInSearch.height}
+            >
+              {#snippet renderItem(p: FlatPath, fi: number)}
+                {@render flatOption(p, fi)}
+              {/snippet}
+            </VirtualList>
+          </div>
+        {:else}
+          <ul
+            class="cd-cascader-option-lists cd-cascader-flatten"
+            role="listbox"
+            id={flatListId}
+            aria-label={loc().t('Cascader.searchResults')}
+          >
+            {#if filteredPaths.length === 0}
+              {#if isEmptySnippet}
+                <li class="cd-cascader-option-empty">{@render (emptyContent as Snippet)()}</li>
+              {:else}
+                <li class="cd-cascader-option-empty">{emptyText}</li>
+              {/if}
+            {:else}
+              {#each filteredPaths as p, fi (p.values.join('/'))}
+                {@render flatOption(p, fi)}
+              {/each}
+            {/if}
+          </ul>
+        {/if}
       {:else}
-      <div class="cd-cascader__columns">
+      <div class="cd-cascader-option-lists">
       {#each columns as column, colIndex (colIndex)}
         <ul
-          class="cd-cascader__column"
+          class="cd-cascader-option-list"
           role="listbox"
           aria-label={loc().t('Cascader.columnLabel', { level: colIndex + 1 })}
-          style:inline-size="{resolveColumnWidth(columnWidth, colIndex, 180)}px"
           onscroll={(e) => onListScroll?.(e, {
             panelIndex: colIndex,
             activeNode: columns[colIndex]?.find((n) => isActiveAt(colIndex, n)) ?? null,
@@ -1240,58 +1529,58 @@
         >
           {#if column.length === 0}
             {#if isEmptySnippet}
-              <li class="cd-cascader__empty">{@render (emptyContent as Snippet)()}</li>
+              <li class="cd-cascader-option-empty">{@render (emptyContent as Snippet)()}</li>
             {:else}
-              <li class="cd-cascader__empty">{emptyText}</li>
+              <li class="cd-cascader-option-empty">{emptyText}</li>
             {/if}
           {/if}
           {#each column as node (node.value)}
+            {@const cs = multiple ? nodeCheck(node) : { checked: false, half: false }}
             <!-- 键盘经触发器 aria-activedescendant 漫游管理，选项 tabindex=-1 click-only -->
             <!-- svelte-ignore a11y_click_events_have_key_events -->
             <li
               id={colItemId(colIndex, node.value)}
-              class="cd-cascader__option"
-              class:cd-cascader__option--active={isActiveAt(colIndex, node)}
-              class:cd-cascader__option--kbactive={isKbActive(colIndex, node)}
-              class:cd-cascader__option--selected={isSelectedLeaf(colIndex, node)}
+              class="cd-cascader-option"
+              class:cd-cascader-option-active={isActiveAt(colIndex, node)}
+              class:cd-cascader-option-kbactive={isKbActive(colIndex, node)}
+              class:cd-cascader-option-select={isSelectedLeaf(colIndex, node)}
+              class:cd-cascader-option-disabled={node.disabled}
               role="option"
               aria-selected={isActiveAt(colIndex, node)}
               aria-disabled={node.disabled || undefined}
               onclick={() => selectNode(colIndex, node)}
-              onpointerenter={() => hoverExpand(colIndex, node)}
+              onpointerenter={() => scheduleHoverExpand(colIndex, node)}
+              onpointerleave={scheduleHoverLeave}
               tabindex={-1}
             >
-              {#if multiple}
-                {@const cs = nodeCheck(node)}
-                <span
-                  class="cd-cascader__checkbox"
-                  class:cd-cascader__checkbox--checked={cs.checked}
-                  class:cd-cascader__checkbox--half={cs.half}
-                  role="button"
-                  tabindex="-1"
-                  aria-hidden="true"
-                  onclick={(e) => {
-                    e.stopPropagation();
-                    toggleCheckNode(node);
-                  }}
-                >
-                  {#if cs.checked}
-                    <svg viewBox="0 0 16 16" width="12" height="12" aria-hidden="true" focusable="false">
-                      <path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M3.5 8.5l3 3 6-6.5" />
-                    </svg>
-                  {:else if cs.half}
-                    <svg viewBox="0 0 16 16" width="12" height="12" aria-hidden="true" focusable="false">
-                      <path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" d="M4 8h8" />
-                    </svg>
-                  {/if}
-                </span>
-              {/if}
-              <span class="cd-cascader__option-label">{node.label}</span>
+              <span class="cd-cascader-option-label">
+                {#if multiple}
+                  <!-- 复用已对齐的 Checkbox：勾选由其 onChange 驱动 toggleCheckNode；
+                       stopPropagation 阻止冒泡到 li（否则 selectNode 会二次触发）。 -->
+                  <!-- svelte-ignore a11y_no_static_element_interactions -->
+                  <!-- svelte-ignore a11y_click_events_have_key_events -->
+                  <span
+                    class="cd-cascader-option-label-checkbox"
+                    onclick={(e) => e.stopPropagation()}
+                  >
+                    <Checkbox
+                      checked={cs.checked}
+                      indeterminate={cs.half}
+                      disabled={node.disabled || disabled}
+                      ariaLabel={node.label}
+                      onChange={() => toggleCheckNode(node, colIndex)}
+                    />
+                  </span>
+                {/if}
+                {node.label}
+              </span>
               {#if isLoading(node)}
-                <span class="cd-cascader__option-loading" aria-label={loc().t('Cascader.loading')}></span>
+                <span class="cd-cascader-option-icon cd-cascader-option-spin-icon" aria-label={loc().t('Cascader.loading')}>
+                  <IconSpin aria-hidden="true" />
+                </span>
               {:else if canExpand(node)}
-                <span class="cd-cascader__option-expand" aria-hidden="true">
-                  {#if expandIcon}{@render expandIcon()}{:else}›{/if}
+                <span class="cd-cascader-option-icon" aria-hidden="true">
+                  {#if expandIcon}{@render expandIcon()}{:else}<IconChevronRight aria-hidden="true" />{/if}
                 </span>
               {/if}
             </li>
@@ -1307,94 +1596,112 @@
 </div>
 
 <style>
+  /* 根即 combobox（对齐 Semi .semi-cascader 填充式触发器）。 */
   .cd-cascader {
     position: relative;
     display: inline-flex;
-    inline-size: 100%;
-    font-size: var(--cd-select-font-size);
-  }
-  .cd-cascader__trigger {
-    display: flex;
     align-items: center;
-    gap: var(--cd-spacing-tight);
     inline-size: 100%;
     min-block-size: var(--cd-select-height-default);
-    padding-inline: var(--cd-select-padding-x);
+    box-sizing: border-box;
+    font-size: var(--cd-select-font-size);
     background: var(--cd-select-bg);
     border: 1px solid var(--cd-select-border);
     border-radius: var(--cd-select-radius);
-    color: inherit;
-    font: inherit;
-    text-align: start;
     cursor: pointer;
     transition:
       border-color var(--cd-motion-duration-fast) var(--cd-motion-ease-standard),
       background-color var(--cd-motion-duration-fast) var(--cd-motion-ease-standard);
   }
-  .cd-cascader--small .cd-cascader__trigger {
+  .cd-cascader-small {
     min-block-size: var(--cd-select-height-small);
   }
-  .cd-cascader--large .cd-cascader__trigger {
+  .cd-cascader-large {
     min-block-size: var(--cd-select-height-large);
   }
   /* 对齐 Semi 填充式：悬浮加深底色（非展开/禁用态） */
-  .cd-cascader:not(.cd-cascader--open):not(.cd-cascader--disabled) .cd-cascader__trigger:hover {
+  .cd-cascader:not(.cd-cascader-focus):not(.cd-cascader-disabled):hover {
     background: var(--cd-select-bg-hover);
   }
-  .cd-cascader__trigger:focus-visible {
+  .cd-cascader:focus-visible {
     outline: none;
     background: var(--cd-select-bg);
     border-color: var(--cd-select-border-active);
     box-shadow: var(--cd-focus-ring);
   }
-  .cd-cascader--open .cd-cascader__trigger {
+  .cd-cascader-focus {
     background: var(--cd-select-bg);
     border-color: var(--cd-select-border-active);
   }
-  .cd-cascader--error .cd-cascader__trigger {
+  .cd-cascader-error {
     border-color: var(--cd-select-border-error);
   }
-  .cd-cascader__trigger[aria-disabled='true'] {
+  .cd-cascader-disabled {
     background: var(--cd-color-disabled-fill, var(--cd-color-fill-0));
     color: var(--cd-color-text-3);
     cursor: not-allowed;
+    user-select: none;
   }
-  .cd-cascader__content {
-    display: flex;
+  /* 选中值 / 占位 / tags 容器 */
+  .cd-cascader-selection {
+    display: inline-flex;
     flex: 1 1 auto;
     align-items: center;
+    flex-wrap: wrap;
+    gap: var(--cd-spacing-extra-tight);
     min-inline-size: 0;
+    overflow: hidden;
+    padding-inline: var(--cd-select-padding-x);
+    color: var(--cd-color-cascader-selection-text-default);
+  }
+  .cd-cascader-selection-text {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
   }
-  .cd-cascader__value {
+  .cd-cascader-selection-placeholder {
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
+    color: var(--cd-color-cascader-placeholder-text-default);
+  }
+  /* 多选：TagInput 撑满选择区且去除外层内边距（TagInput 自带内边距 + tag 折叠/+N/搜索）。 */
+  .cd-cascader-selection-multiple {
+    padding-inline: 0;
+    overflow: visible;
   }
-  .cd-cascader__placeholder {
-    color: var(--cd-input-color-placeholder);
+  .cd-cascader-selection-multiple :global(.cd-tag-input) {
+    inline-size: 100%;
+    min-block-size: auto;
+    border: none;
+    background: transparent;
   }
-  .cd-cascader__clear,
-  .cd-cascader__arrow {
+  .cd-cascader-clearbtn,
+  .cd-cascader-arrow {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     flex: 0 0 auto;
-    color: var(--cd-color-text-2);
+    inline-size: var(--cd-width-cascader-icon, 32px);
+    color: var(--cd-color-cascader-icon-default);
   }
-  .cd-cascader__clear {
+  .cd-cascader-clearbtn {
     cursor: pointer;
   }
-  .cd-cascader__clear:hover {
-    color: var(--cd-color-text-0);
+  .cd-cascader-clearbtn:hover {
+    color: var(--cd-color-cascader-icon-hover);
   }
-  .cd-cascader__arrow {
+  .cd-cascader-clearbtn:active {
+    color: var(--cd-color-cascader-icon-active);
+  }
+  .cd-cascader-arrow {
     transition: transform var(--cd-motion-duration-fast) var(--cd-motion-ease-standard);
   }
-  .cd-cascader--open .cd-cascader__arrow {
+  .cd-cascader-focus .cd-cascader-arrow {
     transform: rotate(180deg);
   }
   /* 面板 portal 到 body，由 JS 写 position:fixed + transform 定位 */
-  .cd-cascader__panel {
+  .cd-cascader-popover {
     z-index: var(--cd-select-dropdown-z);
     display: flex;
     flex-direction: column;
@@ -1403,142 +1710,144 @@
     border-radius: var(--cd-select-dropdown-radius);
     box-shadow: var(--cd-select-dropdown-shadow);
   }
-  /* destroyOnClose=false 关闭后保留 DOM 但不可见、不可交互、不占位 */
-  .cd-cascader__panel--hidden {
+  /* 关闭后保留 DOM 但不可见、不可交互、不占位（对齐 Semi Popover motion）。 */
+  .cd-cascader-popover-hidden {
     display: none;
   }
-  /* 级联列容器：横向排列各列 */
-  .cd-cascader__columns {
-    display: flex;
-    max-block-size: 16rem;
+  /* 触发器内搜索段（对齐 Semi renderInput 的 search-wrapper）：占满选择区，
+     span 与 <Input> 层叠占位。Input 无边框透明底，融入触发器（借用 Input borderless）。 */
+  .cd-cascader-search-wrapper {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    flex: 1 1 auto;
+    min-inline-size: 0;
   }
-  .cd-cascader__search {
-    padding: var(--cd-spacing-extra-tight) var(--cd-spacing-tight);
-    border-block-end: 1px solid var(--cd-cascader-column-border);
+  /* showInput 时 span 与 <Input> 层叠（span 绝对定位于输入框上层作占位）；
+     未 showInput（关闭态）时 span 留在正常流中撑起 wrapper 高度，避免塌陷不可见。 */
+  .cd-cascader-search-wrapper:has(.cd-cascader-search-input) .cd-cascader-selection-placeholder,
+  .cd-cascader-search-wrapper:has(.cd-cascader-search-input) .cd-cascader-selection-text {
+    position: absolute;
+    inset-inline: 0;
+    pointer-events: none;
   }
-  .cd-cascader__search-input {
+  /* showInput 且有输入：隐藏底层 displayText（改由 Input 显示输入值）。 */
+  .cd-cascader-selection-text-hide {
+    display: none;
+  }
+  /* showInput 且无输入：displayText 淡显作为占位提示（对齐 Semi selection-text-inactive）。 */
+  .cd-cascader-selection-text-inactive {
+    color: var(--cd-color-cascader-placeholder-text-default);
+  }
+  /* 触发器内搜索 Input：撑满、透明融入触发器（borderless 已去边框底色）。 */
+  .cd-cascader-search-wrapper :global(.cd-cascader-search-input) {
     inline-size: 100%;
-    block-size: var(--cd-input-height-small);
-    padding-inline: var(--cd-input-padding-x);
-    background: var(--cd-input-bg, transparent);
-    color: inherit;
-    border: 1px solid var(--cd-input-border);
-    border-radius: var(--cd-input-radius);
-    font: inherit;
-    font-size: var(--cd-font-size-small);
-  }
-  .cd-cascader__search-input:focus-visible {
-    outline: none;
-    border-color: var(--cd-input-border-active);
-    box-shadow: var(--cd-focus-ring);
+    background: transparent;
   }
-  /* 搜索结果：扁平路径列表（单列纵向滚动） */
-  .cd-cascader__flat {
+  /* 各级菜单列容器：横向排列 */
+  .cd-cascader-option-lists {
+    display: flex;
     margin: 0;
+    padding: 0;
+    max-block-size: 16rem;
+  }
+  /* 搜索结果扁平列表：单列纵向滚动 */
+  .cd-cascader-option-lists.cd-cascader-flatten {
+    display: block;
     padding-block: var(--cd-spacing-extra-tight);
-    padding-inline: 0;
     list-style: none;
-    max-block-size: 16rem;
     min-inline-size: var(--cd-cascader-column-width);
     overflow-y: auto;
   }
-  .cd-cascader__flat-option {
-    justify-content: flex-start;
-  }
-  .cd-cascader__empty {
-    padding: var(--cd-tree-node-padding-x);
-    color: var(--cd-color-text-3);
-    text-align: center;
-  }
-  .cd-cascader__highlight {
-    padding: 0;
-    color: var(--cd-tree-search-highlight-color);
-    background: var(--cd-tree-search-highlight-bg);
-  }
-  .cd-cascader__column {
+  .cd-cascader-option-list {
+    box-sizing: border-box;
     margin: 0;
     padding-block: var(--cd-spacing-extra-tight);
     padding-inline: 0;
     list-style: none;
     overflow-y: auto;
     inline-size: var(--cd-cascader-column-width);
-    border-inline-end: 1px solid var(--cd-cascader-column-border);
+    border-inline-start: 1px solid var(--cd-cascader-column-border);
+  }
+  .cd-cascader-option-list:first-child {
+    border-inline-start: none;
   }
-  .cd-cascader__column:last-child {
-    border-inline-end: none;
+  .cd-cascader-option-empty {
+    padding: var(--cd-tree-node-padding-x);
+    color: var(--cd-color-cascader-option-empty-text-default);
+    text-align: center;
+    cursor: not-allowed;
   }
-  .cd-cascader__option {
+  .cd-cascader-option {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: var(--cd-spacing-tight);
     block-size: var(--cd-tree-node-height);
     padding-inline: var(--cd-tree-node-padding-x);
+    color: var(--cd-color-cascader-option-main-text-default);
     cursor: pointer;
+    transition: background-color var(--cd-motion-duration-fast) var(--cd-motion-ease-standard);
+  }
+  .cd-cascader-option:hover {
+    background: var(--cd-color-cascader-option-bg-hover);
   }
-  .cd-cascader__option:hover {
-    background: var(--cd-tree-node-bg-hover);
+  .cd-cascader-option:active {
+    background: var(--cd-color-cascader-option-bg-active);
   }
-  .cd-cascader__option--active {
-    background: var(--cd-tree-node-bg-active);
+  /* 命中项（当前路径 active）：primary-light 底色，对齐 Semi option-bg-selected */
+  .cd-cascader-option-active,
+  .cd-cascader-option-active:hover {
+    background: var(--cd-color-cascader-option-bg-selected);
   }
   /* 键盘 roving 高亮（aria-activedescendant 当前项），焦点环不依赖真实 DOM 焦点 */
-  .cd-cascader__option--kbactive {
+  .cd-cascader-option-kbactive {
     box-shadow: var(--cd-focus-ring);
   }
-  .cd-cascader__option--selected {
-    color: var(--cd-tree-node-color-selected);
+  /* 选中叶子 / 搜索命中高亮文字：字重加粗 + primary 色 */
+  .cd-cascader-option-select .cd-cascader-option-label,
+  .cd-cascader-option-label-highlight {
+    font-weight: var(--cd-font-cascader-select-fontweight);
+    color: var(--cd-color-cascader-select-highlight);
   }
-  .cd-cascader__option:focus-visible {
+  .cd-cascader-option:focus-visible {
     outline: none;
     box-shadow: var(--cd-focus-ring);
   }
-  .cd-cascader__option[aria-disabled='true'] {
-    color: var(--cd-color-text-3);
+  .cd-cascader-option-disabled {
+    color: var(--cd-color-cascader-option-disabled-text-default);
     cursor: not-allowed;
   }
-  .cd-cascader__option-label {
+  .cd-cascader-option-disabled:hover,
+  .cd-cascader-option-disabled:active {
+    background: transparent;
+  }
+  .cd-cascader-option-disabled .cd-cascader-option-label {
+    color: var(--cd-color-cascader-option-disabled-text-default);
+  }
+  .cd-cascader-option-label {
+    display: flex;
+    align-items: center;
+    min-inline-size: 0;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
     flex: 1 1 auto;
   }
-  .cd-cascader__checkbox {
+  .cd-cascader-option-label-checkbox {
     display: inline-flex;
     align-items: center;
-    justify-content: center;
     flex: 0 0 auto;
-    inline-size: 1rem;
-    block-size: 1rem;
-    color: #fff;
-    background: var(--cd-color-bg-1, #fff);
-    border: 1px solid var(--cd-color-border);
-    border-radius: var(--cd-radius-small, 3px);
-    cursor: pointer;
+    margin-inline-end: var(--cd-spacing-tight);
   }
-  .cd-cascader__checkbox--checked,
-  .cd-cascader__checkbox--half {
-    background: var(--cd-color-primary);
-    border-color: var(--cd-color-primary);
-  }
-  .cd-cascader__tags {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--cd-spacing-extra-tight);
+  .cd-cascader-option-icon {
+    display: inline-flex;
     align-items: center;
-    min-inline-size: 0;
-  }
-  .cd-cascader__option-expand {
     flex: 0 0 auto;
-    color: var(--cd-tree-expand-icon-color);
+    inline-size: var(--cd-width-cascader-option-icon, 16px);
+    color: var(--cd-color-cascader-option-icon-default);
   }
-  .cd-cascader__option-loading {
-    flex: 0 0 auto;
-    inline-size: 12px;
-    block-size: 12px;
-    border: 2px solid var(--cd-tree-expand-icon-color, currentColor);
-    border-block-start-color: transparent;
-    border-radius: var(--cd-border-radius-full);
+  .cd-cascader-option-spin-icon :global(svg) {
     animation: cd-cascader-spin 0.7s linear infinite;
   }
   @keyframes cd-cascader-spin {
@@ -1547,32 +1856,57 @@
     }
   }
   @media (prefers-reduced-motion: reduce) {
-    .cd-cascader__option-loading {
+    .cd-cascader-option-spin-icon :global(svg) {
       animation: none;
     }
-    .cd-cascader__trigger,
-    .cd-cascader__arrow {
+    .cd-cascader,
+    .cd-cascader-arrow {
       transition: none;
     }
   }
-  /* --- 新增样式 --- */
-  .cd-cascader--borderless .cd-cascader__trigger {
+  /* borderless：非聚焦/悬浮态透明底色 + 隐藏箭头（对齐 Semi） */
+  .cd-cascader-borderless:not(:focus-within):not(:hover) {
     border-color: transparent;
     background: transparent;
   }
-  .cd-cascader--borderless .cd-cascader__trigger:focus-visible {
-    border-color: var(--cd-select-border-active);
-    background: var(--cd-select-bg);
+  .cd-cascader-borderless:not(:focus-within):not(:hover) .cd-cascader-arrow {
+    opacity: 0;
+  }
+  .cd-cascader-borderless:focus-within:not(:active) {
+    background: transparent;
   }
-  .cd-cascader--no-motion .cd-cascader__trigger,
-  .cd-cascader--no-motion .cd-cascader__arrow {
+  .cd-cascader-no-motion,
+  .cd-cascader-no-motion .cd-cascader-arrow {
     transition: none;
   }
-  .cd-cascader__prefix,
-  .cd-cascader__suffix {
+  /* prefix / suffix / inset-label */
+  .cd-cascader-prefix,
+  .cd-cascader-suffix {
     display: inline-flex;
     align-items: center;
     flex: 0 0 auto;
-    color: var(--cd-color-text-2);
+    color: var(--cd-color-cascader-prefix-suffix-text-default);
+  }
+  .cd-cascader-prefix-text,
+  .cd-cascader-suffix-text {
+    margin-inline: var(--cd-spacing-base-tight);
+    font-weight: var(--cd-font-cascader-label-fontweight);
+    color: var(--cd-color-cascader-prefix-suffix-text-default);
+  }
+  .cd-cascader-with-prefix .cd-cascader-selection {
+    padding-inline-start: 0;
+  }
+  .cd-cascader-with-suffix .cd-cascader-selection {
+    padding-inline-end: 0;
+  }
+  /* insetLabel：值前内嵌标签，消费 cascader label token */
+  .cd-cascader-inset-label {
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+    white-space: nowrap;
+    margin-inline: var(--cd-spacing-base-tight);
+    color: var(--cd-color-cascader-label-text-default);
+    font-weight: var(--cd-font-cascader-label-fontweight);
   }
 </style>