@icen.ai/ui 0.9.0 → 0.11.0

package/dist/components/tooltip.css

@@ -1,32 +1,44 @@
+@layer icen.components {
 /*
- * @icen.ai/ui — Component: tooltip（纯 CSS 气泡提示，无 JS）
+ * @icen.ai/ui — Component: tooltip（气泡提示）
  *
  * 完整契约：
- *   <button data-tooltip="提示文案" data-tooltip-side="top|bottom|left|right" data-tooltip-align="start|center|end">
- *   多行：data-tooltip-multiline="true" 允许换行（默认 whitespace nowrap 截断）
+ *   <button data-icen-tooltip="提示文案" data-icen-tooltip-side="top|bottom|left|right" data-icen-tooltip-align="start|icen-center|end">
+ *   多行：data-icen-tooltip-multiline="true" 允许换行（默认 whitespace nowrap 截断）
  *   无障碍：键盘 :focus-visible 立即出现（无延迟），鼠标 hover 延迟 400ms。
+ *
+ * 双层实现（同一属性契约）：
+ *   - CSS 回退：::after 内联气泡，零 JS 可用；但无法跳出祖先 overflow/stacking
+ *     裁切（z-index 对裁切无解），靠近容器/视口边缘也不会翻转。
+ *   - JS 增强（推荐）：initTooltip() 后气泡 portal 到 body（.icen-tooltip，
+ *     role=tooltip，aria-describedby 关联），computePopoverLayout 选侧/翻转/钳制，
+ *     指针可停留阅读；滚动/Escape/点击/移除即关。接管或抑制回退期间带 data-icen-tooltip-live，
+ *     下方 ::after 规则一律以 :not() 回避，绝不双渲染。
+ *
+ * RTL 豁免（guard 文件级白名单 scripts/guard/rtl.ts）：side 是物理侧边契约
+ * （data-icen-tooltip-side="left|right" 指触发器物理左/右侧），left/right 定位与水平居中配套，RTL 语义不变。
  */
 
-[data-tooltip] { position: relative; --tooltip-delay: 400ms; }
+[data-icen-tooltip] { position: relative; --tooltip-delay: 400ms; }
 
-[data-tooltip]::after {
-  content: attr(data-tooltip);
+[data-icen-tooltip]:not([data-icen-tooltip-live])::after {
+  content: attr(data-icen-tooltip);
   position: absolute;
-  z-index: var(--z-tooltip);
+  z-index: var(--icen-z-tooltip);
   width: max-content;
   max-width: min(260px, calc(100vw - 32px));
-  padding: 4px var(--density-space-xs);
-  font-size: var(--density-font-size-xs);
+  padding: 4px 7px;
+  font-size: var(--icen-font-size-caption);
   font-weight: 400;
   line-height: 1.4;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
-  background: color-mix(in srgb, var(--token-text) 92%, var(--token-bg));
-  color: var(--token-bg);
-  border: 1px solid var(--token-line);
-  box-shadow: var(--token-shadow-elevated);
-  border-radius: var(--radius-sm);
+  background: color-mix(in srgb, var(--icen-token-text) 92%, var(--icen-token-bg));
+  color: var(--icen-token-bg);
+  border: 1px solid color-mix(in srgb, var(--icen-token-bg) 12%, transparent);
+  box-shadow: var(--icen-token-shadow-elevated);
+  border-radius: var(--icen-radius-xs);
   opacity: 0;
   pointer-events: none;
   transition:
@@ -41,26 +53,26 @@
 }
 
 /* 多行模式 */
-[data-tooltip-multiline='true']::after {
+[data-icen-tooltip-multiline='true']:not([data-icen-tooltip-live])::after {
   white-space: normal;
   max-width: min(320px, calc(100vw - 32px));
 }
 
 /* ── 方向 ── */
-[data-tooltip-side='bottom']::after {
+[data-icen-tooltip-side='bottom']:not([data-icen-tooltip-live])::after {
   bottom: auto;
   top: calc(100% + 6px);
   left: 50%;
   transform: translate(-50%, -4px);
 }
-[data-tooltip-side='left']::after {
+[data-icen-tooltip-side='left']:not([data-icen-tooltip-live])::after {
   bottom: auto;
   top: 50%;
   left: auto;
   right: calc(100% + 6px);
   transform: translate(4px, -50%);
 }
-[data-tooltip-side='right']::after {
+[data-icen-tooltip-side='right']:not([data-icen-tooltip-live])::after {
   bottom: auto;
   top: 50%;
   right: auto;
@@ -69,48 +81,96 @@
 }
 
 /* ── 对齐（仅 top/bottom 方向生效）── */
-[data-tooltip-align='start']::after { left: 0; transform: translate(0, 4px); }
-[data-tooltip-align='end']::after { left: auto; right: 0; transform: translate(0, 4px); }
-[data-tooltip-side='bottom'][data-tooltip-align='start']::after { transform: translate(0, -4px); }
-[data-tooltip-side='bottom'][data-tooltip-align='end']::after { transform: translate(0, -4px); }
+[data-icen-tooltip-align='start']:not([data-icen-tooltip-live])::after { inset-inline-start: 0; transform: translate(0, 4px); }
+[data-icen-tooltip-align='end']:not([data-icen-tooltip-live])::after { inset-inline-start: auto; inset-inline-end: 0; transform: translate(0, 4px); }
+[data-icen-tooltip-side='bottom'][data-icen-tooltip-align='start']:not([data-icen-tooltip-live])::after { transform: translate(0, -4px); }
+[data-icen-tooltip-side='bottom'][data-icen-tooltip-align='end']:not([data-icen-tooltip-live])::after { transform: translate(0, -4px); }
 
 /* ── 出现：hover/focus-visible ── */
-[data-tooltip]:hover::after,
-[data-tooltip]:focus-visible::after {
+[data-icen-tooltip]:hover:not([data-icen-tooltip-live])::after,
+[data-icen-tooltip]:focus-visible:not([data-icen-tooltip-live])::after {
   opacity: 1;
   transform: translate(-50%, 0);
 }
-[data-tooltip-side='bottom']:hover::after,
-[data-tooltip-side='bottom']:focus-visible::after {
+[data-icen-tooltip-side='bottom']:hover:not([data-icen-tooltip-live])::after,
+[data-icen-tooltip-side='bottom']:focus-visible:not([data-icen-tooltip-live])::after {
   transform: translate(-50%, 0);
 }
-[data-tooltip-side='left']:hover::after,
-[data-tooltip-side='left']:focus-visible::after {
+[data-icen-tooltip-side='left']:hover:not([data-icen-tooltip-live])::after,
+[data-icen-tooltip-side='left']:focus-visible:not([data-icen-tooltip-live])::after {
   transform: translate(0, -50%);
 }
-[data-tooltip-side='right']:hover::after,
-[data-tooltip-side='right']:focus-visible::after {
+[data-icen-tooltip-side='right']:hover:not([data-icen-tooltip-live])::after,
+[data-icen-tooltip-side='right']:focus-visible:not([data-icen-tooltip-live])::after {
   transform: translate(0, -50%);
 }
 
 /* align 起效（覆盖 translateX 的 -50%） */
-[data-tooltip-align='start']:hover::after,
-[data-tooltip-align='start']:focus-visible::after { transform: translate(0, 0); }
-[data-tooltip-align='end']:hover::after,
-[data-tooltip-align='end']:focus-visible::after { transform: translate(0, 0); }
-[data-tooltip-side='bottom'][data-tooltip-align='start']:hover::after,
-[data-tooltip-side='bottom'][data-tooltip-align='start']:focus-visible::after { transform: translate(0, 0); }
-[data-tooltip-side='bottom'][data-tooltip-align='end']:hover::after,
-[data-tooltip-side='bottom'][data-tooltip-align='end']:focus-visible::after { transform: translate(0, 0); }
+[data-icen-tooltip-align='start']:hover:not([data-icen-tooltip-live])::after,
+[data-icen-tooltip-align='start']:focus-visible:not([data-icen-tooltip-live])::after { transform: translate(0, 0); }
+[data-icen-tooltip-align='end']:hover:not([data-icen-tooltip-live])::after,
+[data-icen-tooltip-align='end']:focus-visible:not([data-icen-tooltip-live])::after { transform: translate(0, 0); }
+[data-icen-tooltip-side='bottom'][data-icen-tooltip-align='start']:hover:not([data-icen-tooltip-live])::after,
+[data-icen-tooltip-side='bottom'][data-icen-tooltip-align='start']:focus-visible:not([data-icen-tooltip-live])::after { transform: translate(0, 0); }
+[data-icen-tooltip-side='bottom'][data-icen-tooltip-align='end']:hover:not([data-icen-tooltip-live])::after,
+[data-icen-tooltip-side='bottom'][data-icen-tooltip-align='end']:focus-visible:not([data-icen-tooltip-live])::after { transform: translate(0, 0); }
 
 /* 键盘聚焦立即出现（覆盖 400ms 延迟） */
-[data-tooltip]:focus-visible::after { transition-delay: 0ms; }
+[data-icen-tooltip]:focus-visible:not([data-icen-tooltip-live])::after { transition-delay: 0ms; }
 
 @media (prefers-reduced-motion: reduce) {
-  [data-tooltip]::after {
+  [data-icen-tooltip]:not([data-icen-tooltip-live])::after {
     transition: opacity var(--icen-tx-fast);
-    transform: none !important;
+    transform: none !important; /* guard:allow-important 动效守卫：降级媒体查询需压制组件动画 */
   }
-  [data-tooltip]:hover::after,
-  [data-tooltip]:focus-visible::after { transform: none !important; }
+  [data-icen-tooltip]:hover:not([data-icen-tooltip-live])::after,
+  [data-icen-tooltip]:focus-visible:not([data-icen-tooltip-live])::after { transform: none !important; /* guard:allow-important 状态/守卫覆盖需压制变体优先级 */ }
+}
+
+/* ═══════════ portal 气泡（initTooltip 增强层；material.css 像素材质已认 .icen-tooltip）═══════════
+   JS 以视口坐标计算 left/top（物理坐标，与 RTL 豁免同一理由），data-icen-side 驱动入场方向。 */
+.icen-tooltip {
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: var(--icen-z-tooltip);
+  box-sizing: border-box;
+  max-inline-size: min(260px, calc(100vw - 32px));
+  padding: 4px 7px;
+  font-size: var(--icen-font-size-caption);
+  font-weight: 400;
+  line-height: 1.4;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  background: color-mix(in srgb, var(--icen-token-text) 92%, var(--icen-token-bg));
+  color: var(--icen-token-bg);
+  border: 1px solid color-mix(in srgb, var(--icen-token-bg) 12%, transparent);
+  box-shadow: var(--icen-token-shadow-elevated);
+  border-radius: var(--icen-radius-xs);
+  pointer-events: none;
+  opacity: 0;
+  translate: 0 4px;
+  transition:
+    opacity var(--icen-tx-fast),
+    translate var(--icen-tx-fast);
+}
+.icen-tooltip.is-multiline {
+  white-space: normal;
+  max-inline-size: min(320px, calc(100vw - 32px));
+}
+.icen-tooltip[data-icen-side='bottom'] { translate: 0 -4px; }
+.icen-tooltip[data-icen-side='left'] { translate: 4px 0; }
+.icen-tooltip[data-icen-side='right'] { translate: -4px 0; }
+.icen-tooltip.is-open { opacity: 1; translate: 0 0; }
+.icen-tooltip.is-open { pointer-events: auto; }
+
+@media (prefers-reduced-motion: reduce) {
+  .icen-tooltip, .icen-tooltip[data-icen-side], .icen-tooltip.is-open { transition: opacity var(--icen-tx-fast); translate: none; }
+}
+@media (forced-colors: active) {
+  .icen-tooltip { background: Canvas; color: CanvasText; border-color: CanvasText; box-shadow: none; }
+}
+
+
 }

package/dist/components/tooltip.d.mts

@@ -0,0 +1,2 @@
+// kit: tooltip 类型面（构建产物，勿手改）
+export * from '../behaviors/tooltip.mjs';

package/dist/components/tooltip.mjs

@@ -1,2 +1,3 @@
 // @icen.ai/ui — kit: tooltip（CSS + behavior 一行入口；构建产物，勿手改）
 import './tooltip.css';
+export * from '../behaviors/tooltip.mjs';

package/dist/components/tree-select.css

@@ -0,0 +1,439 @@
+@layer icen.components {
+/*
+ * @icen.ai/ui — Component: tree-select（树选择）
+ * 与 behaviors/tree-select.ts 配套（函数式 API：createTreeSelect(el, opts) → handle）。
+ * 视觉语言复用 content.css 的 .icen-tree（chevron / 缩进 / 选中态），面板形态与 select 对齐。
+ *
+ * 完整契约（createTreeSelect 渲染进宿主 el；面板打开时 portal 到 document.body）：
+ *   <div class="icen-tree-select [.is-open] [.icen-tree-select--lined]" data-icen-tree-select
+ *        [data-icen-disabled]>
+ *     <button class="icen-tree-select-trigger" role="combobox" aria-haspopup="tree"
+ *             aria-expanded="false" aria-controls="<panelId>" [disabled]>
+ *       <span class="icen-tree-select-value [.is-empty]">请选择</span>
+ *       <svg class="icen-tree-select-chevron">…</svg>
+ *     </button>
+ *     <span class="icen-tree-select-chips" [hidden]>          ← behavior 生成，与 trigger 同级
+ *       <span class="icen-tree-select-chip"><span>前端</span><button class="icen-tree-select-chip-x" type="button" aria-label="移除前端">…svg…</button></span>
+ *     </span>
+ *     <button class="icen-tree-select-clear" aria-label="清除" [hidden]>×</button>  ← clearable
+ *     <div class="icen-tree-select-panel" id="<panelId>" [hidden] data-icen-side="top|bottom">
+ *       <div class="icen-tree-select-search">          ← opts.searchable 时渲染
+ *         <input class="icen-tree-select-search-input" type="search" placeholder="搜索" />
+ *       </div>
+ *       <div class="icen-tree-select-tree" role="tree">  ← 平铺行（--depth 缩进），非嵌套 ul
+ *         <div class="icen-tree-select-row [.is-selected|.is-checked|.is-mixed|.is-disabled|
+ *              .is-branch|.is-focused]" role="treeitem" tabindex="-1" data-icen-value="fe"
+ *              style="--depth:1" aria-level="2" aria-posinset="1" aria-setsize="3"
+ *              [aria-expanded="true"] [aria-selected="true"] [aria-checked="true|false|mixed"]>
+ *           <span class="icen-tree-select-toggle [.is-collapsed|.is-leaf]"><svg>…</svg></span>
+ *           <span class="icen-tree-select-check"></span>                ← checkable 时
+ *           <span class="icen-tree-select-label">前端</span>            ← 命中词 <mark>
+ *         </div>
+ *       </div>
+ *       <div class="icen-tree-select-empty" [hidden]>无匹配</div>       ← opts.emptyLabel
+ *     </div>
+ *   </div>
+ *
+ * behavior 维护：
+ *   - .icen-tree-select.is-open ↔ aria-expanded；panel portal 到 body（inline left/top/width/
+ *     max-height + data-icen-side）；外点 / Esc 关闭；window scroll/resize 跟随重定位
+ *   - 面板尺寸走全库统一 PanelSizing 契约（behaviors/popover.ts）：根 el 挂
+ *     data-icen-panel-width（固定宽，最高优先）/ data-icen-panel-min / data-icen-panel-max /
+ *     data-icen-panel-max-height（默认 280）
+ *   - multiple：trigger chips 渲染（超过 3 个收 +N）；checkable：三态勾选（.is-checked/
+ *     .is-mixed 驱动 .icen-tree-select-check）；单选：.is-selected 行
+ *   - 搜索态：.icen-tree-select-label mark 高亮命中词；无命中显示 .icen-tree-select-empty
+ *   - 连接线变体：根挂 .icen-tree-select--lined（行首竖向引导线 + 横向连接线）
+ *   - 键盘：↑↓ 行间移动 / → 展开（已展开进首子）/ ← 折叠（已折叠回父行）/ Enter 激活；
+ *     RTL 下树向 inline-start 侧生长（缩进为逻辑属性，自动镜像），→/← 由 behavior 镜像
+ *   - 事件 icen:tree-select-change { value: string[]; labels: string[] }
+ */
+
+.icen-tree-select {
+  --tree-select-height: var(--icen-control-height-md);
+  position: relative;
+  inline-size: 100%;
+}
+
+.icen-tree-select-trigger {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--icen-control-gap-sm);
+  inline-size: 100%;
+  min-height: var(--tree-select-height);
+  height: auto;
+  padding: 4px var(--icen-field-padding-inline);
+  font-family: var(--icen-font-body);
+  font-size: var(--icen-font-size-control);
+  line-height: 1.4;
+  text-align: start;
+  flex-wrap: wrap;
+  background: var(--icen-token-control);
+  color: var(--icen-token-text);
+  border: var(--icen-control-border-width) solid var(--icen-token-control-border);
+  border-radius: var(--icen-control-radius);
+  box-shadow: var(--icen-token-shadow-field);
+  cursor: pointer;
+  transition:
+    border-color var(--icen-tx-fast),
+    box-shadow var(--icen-tx-fast);
+  padding-inline-end: calc(var(--icen-field-padding-inline) + 18px);
+}
+.icen-tree-select-trigger:hover:not(:disabled) {
+  border-color: var(--icen-token-control-border-hover);
+}
+.icen-tree-select-trigger:focus-visible {
+  outline: none;
+  border-color: var(--icen-control-focus-border);
+  box-shadow: var(--icen-control-focus-shadow);
+}
+.icen-tree-select-trigger:disabled,
+.icen-tree-select[data-icen-disabled] .icen-tree-select-trigger,
+.icen-tree-select[aria-disabled='true'] .icen-tree-select-trigger {
+  opacity: var(--icen-disabled-opacity);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.icen-tree-select-value {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.icen-tree-select-value.is-empty {
+  color: var(--icen-token-text-muted);
+}
+
+.icen-tree-select-chevron {
+  position: absolute;
+  inset-inline-end: var(--icen-field-padding-inline);
+  inset-block-start: 50%;
+  translate: 0 -50%;
+  inline-size: 12px;
+  block-size: 12px;
+  flex: none;
+  color: var(--icen-token-text-muted);
+  opacity: .82;
+  pointer-events: none;
+  transition: transform var(--icen-tx-fast), opacity var(--icen-tx-fast);
+}
+.icen-tree-select.is-open .icen-tree-select-chevron { transform: rotate(180deg); }
+
+/* 清除钮（与 trigger 同级，绝对定位叠进 trigger 行内末端侧、chevron 内侧） */
+.icen-tree-select-clear {
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-end: var(--icen-density-space-sm);
+  translate: 0 -50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 24px;
+  block-size: 24px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--icen-radius-sm);
+  background: transparent;
+  color: var(--icen-token-text-muted);
+  cursor: pointer;
+  transition: opacity var(--icen-tx-fast), background-color var(--icen-tx-fast), color var(--icen-tx-fast);
+}
+.icen-tree-select-clear:hover {
+  color: var(--icen-token-text);
+  background: var(--icen-token-fill-1);
+}
+.icen-tree-select:has(.icen-tree-select-clear:not([hidden])) .icen-tree-select-trigger { padding-inline-end: calc(var(--icen-density-space-sm) + var(--icen-density-input-height-sm) + var(--icen-density-space-xs)); }
+
+/* ── 多选 chips（tag 式展示；× 仅 hover 对应 chip 时出现）── */
+.icen-tree-select-chips {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px;
+  flex: 1;
+  min-width: 0;
+}
+.icen-tree-select-chip {
+  display: inline-flex;
+  align-items: center;
+  max-inline-size: 100%;
+  font-size: var(--icen-density-font-size-xs);
+  line-height: 1.6;
+  color: var(--icen-token-text);
+  background: var(--icen-token-fill-2);
+  border-radius: var(--icen-radius-sm);
+  padding: 0 7px;
+  white-space: nowrap;
+}
+.icen-tree-select-chip-x {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  inline-size: 24px; /* 与 .icen-select-chip-x 同口径（WCAG 2.5.8 下限） */
+  block-size: 24px;
+  margin-inline-start: var(--icen-density-space-xs);
+  padding: 0;
+  border: 0;
+  border-radius: var(--icen-radius-xs);
+  background: transparent;
+  color: var(--icen-token-text-muted);
+  cursor: pointer;
+  transition: opacity var(--icen-tx-fast), background-color var(--icen-tx-fast), color var(--icen-tx-fast);
+}
+.icen-tree-select-chip-x:focus-visible { outline: 2px solid var(--icen-token-accent); outline-offset: 1px; }
+.icen-tree-select-chip-x:hover { color: var(--icen-token-error); }
+.icen-tree-select-chip--more { color: var(--icen-token-text-muted); background: var(--icen-token-fill-1); }
+
+/* 面板由 behavior portal 到 body：left/top/width/max-height 由 JS 按 trigger rect inline 写入；
+   data-icen-side="top|bottom" 标记翻侧方向。 */
+.icen-tree-select-panel {
+  position: absolute;
+  z-index: var(--icen-z-popover);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding: var(--icen-density-space-xs);
+  background: var(--icen-token-surface);
+  border: 1px solid var(--icen-token-material-edge);
+  border-radius: var(--icen-radius-lg);
+  box-shadow: var(--icen-token-material-light), var(--icen-token-shadow-elevated);
+  transform-origin: top center;
+  animation: icen-pop-in var(--icen-tx-fast);
+}
+.icen-tree-select-panel[data-icen-side='top'] { transform-origin: bottom center; }
+
+/* ── 搜索框 ── */
+.icen-tree-select-search {
+  padding: var(--icen-density-space-xs);
+  border-bottom: 1px solid var(--icen-token-outline-soft);
+  margin-bottom: 4px;
+  position: sticky;
+  top: 0;
+  background: var(--icen-token-card-strong);
+  z-index: 1;
+}
+.icen-tree-select-search-input { min-inline-size: 0; }
+
+
+/* ── 树（平铺行；--depth 缩进沿 inline-start，RTL 自动镜像）── */
+.icen-tree-select-tree {
+  user-select: none;
+}
+.icen-tree-select-row {
+  display: flex;
+  align-items: center;
+  gap: var(--icen-control-gap-sm);
+  min-block-size: var(--icen-control-height-sm);
+  padding-block: 3px;
+  padding-inline: calc(4px + var(--depth, 0) * 18px) var(--icen-density-space-sm);
+  border-radius: var(--icen-radius-xs);
+  font-size: var(--icen-font-size-control);
+  color: var(--icen-token-text);
+  cursor: pointer;
+  transition: background-color var(--icen-tx-fast);
+}
+.icen-tree-select-row:hover:not(.is-disabled) { background: var(--icen-token-fill-hover); }
+.icen-tree-select-row:focus-visible,
+.icen-tree-select-row.is-focused {
+  outline: none;
+  box-shadow: var(--icen-ring-inset);
+}
+.icen-tree-select-row.is-selected {
+  background: var(--icen-token-fill-selected);
+  color: var(--icen-token-text);
+  font-weight: var(--icen-font-weight-control);
+}
+.icen-tree-select-row.is-disabled,
+.icen-tree-select-row[aria-disabled='true'] {
+  opacity: var(--icen-disabled-opacity);
+}
+.icen-tree-select-row.is-disabled .icen-tree-select-toggle,
+.icen-tree-select-row.is-disabled .icen-tree-select-check,
+.icen-tree-select-row.is-disabled .icen-tree-select-label {
+  pointer-events: none;
+}
+
+/* 展开 toggle（叶子为占位空壳，保持缩进对齐） */
+.icen-tree-select-toggle {
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--icen-token-text-muted);
+  cursor: pointer;
+  border-radius: var(--icen-radius-xs);
+}
+.icen-tree-select-toggle:hover { color: var(--icen-token-text); }
+.icen-tree-select-toggle:focus-visible {
+  outline: none;
+  box-shadow: var(--icen-ring);
+}
+.icen-tree-select-toggle svg {
+  width: 13px;
+  height: 13px;
+  transition: transform var(--icen-tx-fast);
+}
+.icen-tree-select-toggle.is-collapsed svg { transform: rotate(-90deg); }
+.icen-tree-select-toggle.is-leaf { visibility: hidden; pointer-events: none; }
+
+/* RTL：折叠 chevron 镜像（展开方向随书写方向） */
+[dir='rtl'] .icen-tree-select-toggle.is-collapsed svg { transform: rotate(90deg); }
+
+/* 三态勾选框（checkable 时渲染；.is-checked/.is-mixed 由 behavior 求值挂行） */
+.icen-tree-select-check {
+  width: 15px;
+  height: 15px;
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--icen-token-control-border);
+  border-radius: var(--icen-radius-xs);
+  background: var(--icen-token-control);
+  transition:
+    background-color var(--icen-tx-fast),
+    border-color var(--icen-tx-fast);
+}
+.icen-tree-select-row.is-checked .icen-tree-select-check {
+  background: var(--icen-token-accent-strong);
+  border-color: var(--icen-token-accent-strong);
+  color: var(--icen-token-on-accent);
+}
+.icen-tree-select-row.is-mixed .icen-tree-select-check {
+  background: var(--icen-token-accent-strong);
+  border-color: var(--icen-token-accent-strong);
+  color: var(--icen-token-on-accent);
+}
+
+.icen-tree-select-label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.icen-tree-select-label mark {
+  background: color-mix(in srgb, var(--icen-token-warning) 30%, transparent);
+  color: inherit;
+}
+
+/* ── 连接线变体（根挂 .icen-tree-select--lined）──
+   平铺行按 --depth 在行首画竖向引导线 + 横向连接线（视觉对齐 content.css 的
+   .icen-tree--lined，沿 inline-start，RTL 自动镜像）。 */
+.icen-tree-select--lined .icen-tree-select-row {
+  position: relative;
+}
+.icen-tree-select--lined .icen-tree-select-row::before {
+  content: '';
+  position: absolute;
+  inset-inline-start: calc(4px + var(--depth, 0) * 18px + 8px);
+  inset-block: 0;
+  border-inline-start: 1px solid var(--icen-token-outline-soft);
+}
+.icen-tree-select--lined .icen-tree-select-row::after {
+  content: '';
+  position: absolute;
+  inset-inline-start: calc(4px + var(--depth, 0) * 18px + 8px);
+  inset-block-start: 50%;
+  inline-size: 9px;
+  border-block-start: 1px solid var(--icen-token-outline-soft);
+}
+
+/* 空状态（搜索无命中） */
+.icen-tree-select-empty {
+  padding: var(--icen-density-space-md);
+  font-size: var(--icen-density-font-size-sm);
+  color: var(--icen-token-text-faint);
+  text-align: center;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .icen-tree-select-panel { animation: none; }
+  .icen-tree-select-trigger,
+  .icen-tree-select-chevron,
+  .icen-tree-select-clear,
+  .icen-tree-select-chip-x,
+  .icen-tree-select-row,
+  .icen-tree-select-toggle svg,
+  .icen-tree-select-check,
+  .icen-tree-select-search-input { transition: none; }
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .icen-tree-select-clear:not([hidden]) { opacity: 0; pointer-events: none; }
+  .icen-tree-select:is(:hover,:focus-within) .icen-tree-select-clear:not([hidden]) { opacity: 1; pointer-events: auto; }
+}
+@media (pointer: coarse) {
+  .icen-tree-select-clear { min-inline-size: 44px; min-block-size: 44px; inset-inline-end: var(--icen-density-space-sm); }
+  .icen-tree-select:has(.icen-tree-select-clear:not([hidden])) .icen-tree-select-trigger { padding-inline-end: calc(var(--icen-density-input-height-sm) + var(--icen-density-space-sm) + var(--icen-density-space-xs)); }
+}
+
+.icen-tree-select--sm .icen-tree-select-trigger { block-size: var(--icen-density-input-height-sm); font-size: var(--icen-density-font-size-sm); }
+.icen-tree-select--lg .icen-tree-select-trigger { block-size: var(--icen-density-input-height-lg); font-size: var(--icen-density-font-size-lg); }
+
+/* The chips and trigger occupy one grid cell without nesting interactive elements. */
+.icen-tree-select:has(> .icen-tree-select-chips:not([hidden])) { display: grid; }
+.icen-tree-select:has(> .icen-tree-select-chips:not([hidden])) > .icen-tree-select-trigger {
+  grid-area: 1 / 1;
+  block-size: auto;
+  min-block-size: var(--tree-select-height);
+  align-self: stretch;
+}
+.icen-tree-select > .icen-tree-select-chips {
+  position: relative;
+  grid-area: 1 / 1;
+  align-self: center;
+  min-block-size: var(--tree-select-height);
+  padding-block: var(--icen-density-space-xs);
+  padding-inline-start: var(--icen-density-space-sm);
+  padding-inline-end: var(--icen-density-space-sm);
+  pointer-events: none;
+}
+.icen-tree-select:has(.icen-tree-select-clear:not([hidden])) > .icen-tree-select-chips { padding-inline-end: calc(var(--icen-density-space-sm) + var(--icen-density-input-height-sm) + var(--icen-density-space-xs)); }
+.icen-tree-select-chip { pointer-events: auto; }
+.icen-tree-select-chip > span { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; }
+@media (hover: hover) and (pointer: fine) {
+  .icen-tree-select-chip-x { opacity: 0; }
+  .icen-tree-select-chip:is(:hover,:focus-within) .icen-tree-select-chip-x { opacity: 1; }
+}
+@media (pointer: coarse) {
+  .icen-tree-select-chip-x { min-inline-size: 44px; min-block-size: 44px; }
+  .icen-tree-select:has(.icen-tree-select-clear:not([hidden])) > .icen-tree-select-chips { padding-inline-end: calc(var(--icen-density-input-height-sm) + var(--icen-density-space-sm) + var(--icen-density-space-xs)); }
+}
+
+.icen-tree-select-chips[hidden], .icen-tree-select-clear[hidden] { display: none; }
+
+.icen-tree-select--sm { --tree-select-height: var(--icen-density-input-height-sm); }
+.icen-tree-select--lg { --tree-select-height: var(--icen-density-input-height-lg); }
+
+.icen-tree-select-panel:has(> .icen-tree-select-search) { scroll-padding-block-start: calc(var(--icen-density-input-height-sm) + 3 * var(--icen-density-space-xs) + var(--icen-density-space-sm) + 1px); }
+
+.icen-tree-select-row:is(.is-checked,.is-mixed) .icen-tree-select-check {
+  background: var(--icen-token-accent-strong);
+  border-color: var(--icen-token-accent-strong);
+  color: var(--icen-token-on-accent);
+}
+.icen-tree-select-row:is(.is-checked,.is-mixed) .icen-tree-select-check::after {
+  content: '';
+  inline-size: 10px;
+  block-size: 10px;
+  background: currentColor;
+  mask: var(--icen-token-icon-check) center / contain no-repeat;
+  -webkit-mask: var(--icen-token-icon-check) center / contain no-repeat;
+}
+.icen-tree-select-row.is-mixed .icen-tree-select-check::after {
+  inline-size: 9px;
+  block-size: 9px;
+  mask-image: var(--icen-token-icon-minus);
+  -webkit-mask-image: var(--icen-token-icon-minus);
+}
+
+/* Clear affordance replaces the popup glyph in the trailing slot. */
+.icen-tree-select:has(.icen-tree-select-clear:not([hidden])) .icen-tree-select-chevron { display: none; }
+
+}

package/dist/components/tree-select.d.mts

@@ -0,0 +1,2 @@
+// kit: tree-select 类型面（构建产物，勿手改）
+export * from '../behaviors/tree-select.mjs';

package/dist/components/tree-select.mjs

@@ -0,0 +1,3 @@
+// @icen.ai/ui — kit: tree-select（CSS + behavior 一行入口；构建产物，勿手改）
+import './tree-select.css';
+export * from '../behaviors/tree-select.mjs';

package/dist/components/tree.d.mts

@@ -0,0 +1,2 @@
+// kit: tree 类型面（构建产物，勿手改）
+export * from '../behaviors/tree.mjs';