@icen.ai/ui 0.9.0 → 0.10.0

package/dist/components/toolbar.css

@@ -1,3 +1,4 @@
+@layer icen.components {
 /*
  * @icen.ai/ui — Component: toolbar（工具条）
  *
@@ -7,95 +8,97 @@
  *   - toolbar   = 宽松的按钮/控件容器，可分组、可分隔、可换行
  *
  * 完整契约：
- *   <div class="toolbar [--sm|--lg] [--wrap] [--borderless]">
- *     <button class="btn btn-sm">…</button>
- *     <div class="toolbar-group">
- *       <button class="btn btn-sm">…</button>
- *       <button class="btn btn-sm">…</button>
+ *   <div class="icen-toolbar [--sm|--lg] [--wrap] [--borderless]">
+ *     <button class="icen-btn icen-btn-sm">…</button>
+ *     <div class="icen-toolbar-group">
+ *       <button class="icen-btn icen-btn-sm">…</button>
+ *       <button class="icen-btn icen-btn-sm">…</button>
  *     </div>
- *     <span class="toolbar-separator"></span>
- *     <div class="toolbar-spacer"></div>      ← 弹性占位，把右侧元素推到末尾
- *     <span class="toolbar-label">3 项</span>
+ *     <span class="icen-toolbar-separator"></span>
+ *     <div class="icen-toolbar-spacer"></div>      ← 弹性占位，把后续元素推到行内末尾（RTL 镜像到左侧）
+ *     <span class="icen-toolbar-label">3 项</span>
  *   </div>
  *
  *   编辑器顶栏（与 fixed 子项配套）：
- *   <div class="toolbar toolbar--elevated">
+ *   <div class="icen-toolbar icen-toolbar--elevated">
  *     …
  *   </div>
  */
 
-.toolbar {
+.icen-toolbar {
   display: flex;
   align-items: center;
-  gap: var(--density-space-sm);
+  gap: var(--icen-density-space-sm);
   flex-wrap: nowrap;
-  padding: var(--density-space-sm);
-  background: var(--token-bg-soft);
-  border: 1px solid var(--token-line-soft);
-  border-radius: var(--radius-md);
+  padding: var(--icen-density-space-sm);
+  background: var(--icen-token-bg-soft);
+  border: 1px solid var(--icen-token-line-soft);
+  border-radius: var(--icen-radius-md);
 }
-.toolbar--wrap { flex-wrap: wrap; }
-.toolbar--borderless {
+.icen-toolbar--wrap { flex-wrap: wrap; }
+.icen-toolbar--borderless {
   background: transparent;
   border-color: transparent;
   padding: 0;
 }
-.toolbar--elevated {
-  background: var(--token-card-strong);
-  border-color: var(--token-outline-soft);
-  box-shadow: var(--token-shadow-elevated);
+.icen-toolbar--elevated {
+  background: var(--icen-token-card-strong);
+  border-color: var(--icen-token-outline-soft);
+  box-shadow: var(--icen-token-shadow-elevated);
 }
 
 /* ── 尺寸 ── */
-.toolbar--sm { padding: 4px var(--density-space-xs); gap: var(--density-space-xs); }
-.toolbar--lg { padding: var(--density-space-md); gap: var(--density-space-md); }
+.icen-toolbar--sm { padding: 4px var(--icen-density-space-xs); gap: var(--icen-density-space-xs); }
+.icen-toolbar--lg { padding: var(--icen-density-space-md); gap: var(--icen-density-space-md); }
 
 /* ── 分组（紧贴一组按钮） ── */
-.toolbar-group {
+.icen-toolbar-group {
   display: inline-flex;
   align-items: center;
   gap: 2px;
   padding: 2px;
-  background: var(--token-fill-1);
-  border-radius: var(--radius-sm);
+  background: var(--icen-token-fill-1);
+  border-radius: var(--icen-radius-sm);
 }
-.toolbar-group > .btn { border-color: transparent; background: transparent; }
-.toolbar-group > .btn:hover { background: var(--token-fill-2); }
+.icen-toolbar-group > .icen-btn { border-color: transparent; background: transparent; }
+.icen-toolbar-group > .icen-btn:hover { background: var(--icen-token-fill-2); }
 
 /* ── 分隔符 ── */
-.toolbar-separator {
+.icen-toolbar-separator {
   width: 1px;
   height: 20px;
-  background: var(--token-line-soft);
+  background: var(--icen-token-line-soft);
   flex-shrink: 0;
 }
-.toolbar--sm .toolbar-separator { height: 16px; }
-.toolbar--lg .toolbar-separator { height: 24px; }
+.icen-toolbar--sm .icen-toolbar-separator { height: 16px; }
+.icen-toolbar--lg .icen-toolbar-separator { height: 24px; }
 
 /* 水平工具条里的垂直分隔（用于纵向 toolbar） */
-.toolbar--vertical { flex-direction: column; align-items: stretch; }
-.toolbar--vertical .toolbar-separator {
+.icen-toolbar--vertical { flex-direction: column; align-items: stretch; }
+.icen-toolbar--vertical .icen-toolbar-separator {
   width: auto;
   height: 1px;
-  margin: var(--density-space-xs) 0;
+  margin: var(--icen-density-space-xs) 0;
 }
 
 /* ── 弹性占位 ── */
-.toolbar-spacer { flex: 1 1 auto; min-width: var(--density-space-xs); }
+.icen-toolbar-spacer { flex: 1 1 auto; min-width: var(--icen-density-space-xs); }
 
 /* ── 内嵌文字（计数 / 状态） ── */
-.toolbar-label {
-  font-size: var(--density-font-size-sm);
-  color: var(--token-text-muted);
+.icen-toolbar-label {
+  font-size: var(--icen-density-font-size-sm);
+  color: var(--icen-token-text-muted);
   font-variant-numeric: tabular-nums;
   white-space: nowrap;
 }
-.toolbar-label.accent { color: var(--token-accent); }
+.icen-toolbar-label.icen-accent { color: var(--icen-token-accent-text, var(--icen-token-accent-deep, var(--icen-token-accent))); }
 
 @media (max-width: 480px) {
-  .toolbar { flex-wrap: wrap; }
+  .icen-toolbar { flex-wrap: wrap; }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .toolbar * { transition: none !important; }
+  .icen-toolbar * { transition: none !important; /* guard:allow-important 动效守卫：降级媒体查询需压制组件动画 */ }
+}
+
 }

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 var(--icen-density-space-xs);
+  font-size: var(--icen-density-font-size-xs);
   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 var(--icen-token-line);
+  box-shadow: var(--icen-token-shadow-elevated);
+  border-radius: var(--icen-radius-sm);
   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,95 @@
 }
 
 /* ── 对齐（仅 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 var(--icen-density-space-xs);
+  font-size: var(--icen-density-font-size-xs);
+  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 var(--icen-token-line);
+  box-shadow: var(--icen-token-shadow-elevated);
+  border-radius: var(--icen-radius-sm);
+  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.mjs

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