@icen.ai/ui 0.9.0 → 0.10.0

package/dist/components/autocomplete.css

@@ -0,0 +1,61 @@
+@layer icen.components {
+/*
+ * @icen.ai/ui — Component: autocomplete
+ * createAutocomplete owns .icen-autocomplete-panel with a named child listbox.
+ * .icen-autocomplete-option rows belong to that listbox; empty/loading/error and
+ * the keyboard-accessible retry button are siblings, not listbox options.
+ * Styling consumes shared tokens, materials and the suggestion status recipe.
+ */
+
+.icen-autocomplete-panel {
+  position: fixed;
+  z-index: var(--icen-z-popover);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding: 4px;
+  background: var(--icen-token-card-strong);
+  border: 1px solid var(--icen-token-outline);
+  border-radius: var(--icen-radius-md);
+  box-shadow: var(--icen-token-shadow-overlay);
+  transform-origin: top center;
+  animation: icen-pop-in var(--icen-tx-fast);
+}
+.icen-autocomplete-panel[data-icen-side='top'] { transform-origin: bottom center; }
+
+.icen-autocomplete-option {
+  display: flex;
+  align-items: center;
+  gap: var(--icen-density-space-xs);
+  padding: 6px var(--icen-density-space-sm);
+  font-size: var(--icen-density-font-size-sm);
+  color: var(--icen-token-text);
+  border-radius: var(--icen-radius-sm);
+  cursor: pointer;
+  min-block-size: var(--icen-density-input-height-sm);
+  overflow-wrap: anywhere;
+  transition:
+    background-color var(--icen-tx-fast),
+    color var(--icen-tx-fast);
+}
+.icen-autocomplete-option:hover { background: var(--icen-token-fill-1); }
+.icen-autocomplete-option.is-active { background: var(--icen-token-fill-2); }
+
+/* 命中片段高亮（behavior 以 <mark> 包裹 query 命中，大小写不敏感） */
+.icen-autocomplete-option mark {
+  background: color-mix(in srgb, var(--icen-token-accent) 18%, transparent);
+  color: inherit;
+  border-radius: 2px; /* guard:allow-radius 微构件（bar/dot/track/指示器等图形级，不属容器圆角面） */
+  padding: 0 1px;
+}
+
+/* 空结果态（behavior 按结果数切 [hidden]） */
+.icen-autocomplete-empty {
+  padding: var(--icen-density-space-sm);
+  font-size: var(--icen-density-font-size-sm);
+  color: var(--icen-token-text-muted);
+  text-align: center;
+}
+@media (pointer: coarse) { .icen-autocomplete-option { min-block-size: 44px; } }
+@media (prefers-reduced-motion: reduce) { .icen-autocomplete-panel { animation: none; } .icen-autocomplete-option { transition: none; } }
+
+}

package/dist/components/autocomplete.mjs

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

package/dist/components/back-top.css

@@ -1,33 +1,34 @@
+@layer icen.components {
 /*
  * @icen.ai/ui — Component: back-top（回到顶部按钮，与 behaviors/back-top 配套）
  *
  * 契约（两种用法）：
- *   1. 手写 + init：behavior 给 .back-top[data-back-top] 加 .is-shown 类
- *      <button class="back-top" data-back-top type="button" aria-label="回到顶部">…svg…</button>
+ *   1. 手写 + init：behavior 给 .icen-back-top[data-icen-back-top] 加 .is-shown 类
+ *      <button class="icen-back-top" data-icen-back-top type="button" aria-label="回到顶部">…svg…</button>
  *
- *   2. 全自动：initBackTop() 后任何 [data-back-top-auto] 会被自动 portal 到 body
+ *   2. 全自动：initBackTop() 后任何 [data-icen-back-top-auto] 会被自动 portal 到 body
  *      并接管滚到顶部逻辑，无需手写按钮
  *      initBackTop({ autoCreate: true })   // 自动创建一个默认样式的按钮
  *
  * 默认滚动超过 320px 后出现；点击后 window.scrollTo({ top: 0, behavior: 'smooth' })。
  */
 
-.back-top {
+.icen-back-top {
   position: fixed;
-  right: var(--density-space-lg);
-  bottom: var(--density-space-lg);
-  z-index: var(--z-sticky);
+  inset-inline-end: var(--icen-density-space-lg);
+  bottom: var(--icen-density-space-lg);
+  z-index: var(--icen-z-sticky);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 40px;
   height: 40px;
   padding: 0;
-  background: var(--token-card-strong);
-  color: var(--token-text-muted);
-  border: 1px solid var(--token-outline-soft);
-  border-radius: var(--radius-full);
-  box-shadow: var(--token-shadow-overlay);
+  background: var(--icen-token-card-strong);
+  color: var(--icen-token-text-muted);
+  border: 1px solid var(--icen-token-outline-soft);
+  border-radius: var(--icen-radius-full);
+  box-shadow: var(--icen-token-shadow-overlay);
   cursor: pointer;
   -webkit-tap-highlight-color: transparent;
   opacity: 0;
@@ -39,50 +40,52 @@
     color var(--icen-tx-fast),
     border-color var(--icen-tx-fast);
 }
-.back-top.is-shown {
+.icen-back-top.is-shown {
   opacity: 1;
   transform: translateY(0) scale(1);
   pointer-events: auto;
 }
-.back-top:hover {
-  color: var(--token-accent);
-  border-color: var(--token-accent);
+.icen-back-top:hover {
+  color: var(--icen-token-accent);
+  border-color: var(--icen-token-accent);
 }
-.back-top:focus-visible {
+.icen-back-top:focus-visible {
   outline: none;
-  box-shadow: var(--token-shadow-overlay), var(--icen-ring);
+  box-shadow: var(--icen-token-shadow-overlay), var(--icen-ring);
 }
-.back-top svg {
+.icen-back-top svg {
   width: 18px;
   height: 18px;
   flex-shrink: 0;
 }
 
 /* 尺寸变体 */
-.back-top--sm {
+.icen-back-top--sm {
   width: 32px;
   height: 32px;
 }
-.back-top--sm svg { width: 14px; height: 14px; }
-.back-top--lg {
+.icen-back-top--sm svg { width: 14px; height: 14px; }
+.icen-back-top--lg {
   width: 48px;
   height: 48px;
 }
-.back-top--lg svg { width: 22px; height: 22px; }
+.icen-back-top--lg svg { width: 22px; height: 22px; }
 
 /* 方向变体：箭头方向（默认上） */
-.back-top[data-dir='left'] svg { transform: rotate(90deg); }
-.back-top[data-dir='right'] svg { transform: rotate(-90deg); }
-.back-top[data-dir='down'] svg { transform: rotate(180deg); }
+.icen-back-top[data-icen-dir='left'] svg { transform: rotate(90deg); }
+.icen-back-top[data-icen-dir='right'] svg { transform: rotate(-90deg); }
+.icen-back-top[data-icen-dir='down'] svg { transform: rotate(180deg); }
 
 @media (max-width: 480px) {
-  .back-top {
-    right: var(--density-space-sm);
-    bottom: var(--density-space-sm);
+  .icen-back-top {
+    inset-inline-end: var(--icen-density-space-sm);
+    bottom: var(--icen-density-space-sm);
   }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .back-top { transition: opacity var(--icen-tx-fast); transform: none !important; }
-  .back-top.is-shown { transform: none !important; }
+  .icen-back-top { transition: opacity var(--icen-tx-fast); transform: none !important; /* guard:allow-important 动效守卫：降级媒体查询需压制组件动画 */ }
+  .icen-back-top.is-shown { transform: none !important; /* guard:allow-important 动效守卫：降级媒体查询需压制组件动画 */ }
+}
+
 }

package/dist/components/badge.css

@@ -1,3 +1,4 @@
+@layer icen.components {
 /*
  * @icen.ai/ui — Component: badge（数字徽标 / 小红点）
  *
@@ -6,38 +7,38 @@
  *   - badge = 角标式徽章，挂在外层元素的右上角，强调"数量/新动态"
  *
  * 完整契约（外层必须 position: relative 或 inline-flex）：
- *   <span class="badge-host">
- *     <button class="btn">…</button>
- *     <span class="badge">9</span>                   <!-- 数字徽标 -->
+ *   <span class="icen-badge-host">
+ *     <button class="icen-btn">…</button>
+ *     <span class="icen-badge">9</span>                   <!-- 数字徽标 -->
  *   </span>
  *
- *   <span class="badge-host">
- *     <button class="btn">…</button>
- *     <span class="badge badge--dot"></span>          <!-- 纯圆点（无数字） -->
+ *   <span class="icen-badge-host">
+ *     <button class="icen-btn">…</button>
+ *     <span class="icen-badge icen-badge--dot"></span>          <!-- 纯圆点（无数字） -->
  *   </span>
  *
- *   <span class="badge-host">
- *     <span class="avatar">…</span>
- *     <span class="badge badge--bottom badge--success badge--dot"></span>  <!-- 头像右下角在线点 -->
+ *   <span class="icen-badge-host">
+ *     <span class="icen-avatar">…</span>
+ *     <span class="icen-badge icen-badge--bottom icen-badge--success icen-badge--dot"></span>  <!-- 头像右下角在线点 -->
  *   </span>
  *
  * 变体：--dot 纯圆点 / --sm 小号 / --lg 大号 / --bottom 底部角
  * 语义色：--success（在线）/ --warning / --error / --info / --accent
  */
 
-.badge-host {
+.icen-badge-host {
   position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
 }
 
-.badge {
+.icen-badge {
   position: absolute;
   top: 0;
-  right: 0;
+  right: 0; /* guard:allow-physical 角标契约是物理右上角（transform translate(50%) 同角心对齐），RTL 保持右上角 */
   transform: translate(50%, -50%);
-  z-index: var(--z-raised);
+  z-index: var(--icen-z-raised);
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -45,22 +46,22 @@
   height: 16px;
   padding: 0 4px;
   font: inherit;
-  font-size: var(--density-font-size-2xs);
+  font-size: var(--icen-density-font-size-2xs);
   font-weight: 600;
   line-height: 1;
   font-variant-numeric: tabular-nums;
-  color: var(--token-on-accent);
-  background: var(--token-error);
-  border: 2px solid var(--token-surface);
-  border-radius: var(--radius-full);
-  box-shadow: var(--token-shadow-inset);
+  color: var(--icen-token-on-accent);
+  background: var(--icen-token-error);
+  border: 2px solid var(--icen-token-surface);
+  border-radius: var(--icen-radius-full);
+  box-shadow: var(--icen-token-shadow-inset);
   pointer-events: none;
   white-space: nowrap;
   transform-origin: center;
 }
 
 /* 纯圆点（无数字） */
-.badge--dot {
+.icen-badge--dot {
   width: 8px;
   height: 8px;
   min-width: 0;
@@ -69,59 +70,61 @@
 }
 
 /* 尺寸 */
-.badge--sm {
+.icen-badge--sm {
   min-width: 14px;
   height: 14px;
-  font-size: var(--density-font-size-2xs);
+  font-size: var(--icen-density-font-size-2xs);
   padding: 0 3px;
 }
-.badge--sm.badge--dot {
+.icen-badge--sm.icen-badge--dot {
   width: 6px;
   height: 6px;
 }
-.badge--lg {
+.icen-badge--lg {
   min-width: 20px;
   height: 20px;
-  font-size: var(--density-font-size-xs);
+  font-size: var(--icen-density-font-size-xs);
   padding: 0 5px;
 }
-.badge--lg.badge--dot {
+.icen-badge--lg.icen-badge--dot {
   width: 10px;
   height: 10px;
 }
 
 /* 底部角（头像在线指示等） */
-.badge--bottom {
+.icen-badge--bottom {
   top: auto;
   bottom: 0;
   transform: translate(50%, 50%);
 }
 
 /* 语义色变体 */
-.badge--accent {
-  background: var(--token-accent);
+.icen-badge--accent {
+  background: var(--icen-token-accent-strong);
 }
-.badge--success {
-  background: var(--token-success);
+.icen-badge--success {
+  background: var(--icen-token-success);
 }
-.badge--warning {
-  background: var(--token-warning);
+.icen-badge--warning {
+  background: var(--icen-token-warning);
 }
-.badge--error {
-  background: var(--token-error);
+.icen-badge--error {
+  background: var(--icen-token-error);
 }
-.badge--info {
-  background: var(--token-info);
+.icen-badge--info {
+  background: var(--icen-token-info);
 }
 
 /* 挂在实底色按钮上时用更浅的边框 */
-.btn-primary .badge,
-.btn-danger .badge {
-  border-color: var(--token-on-accent);
+.icen-btn-primary .icen-badge,
+.icen-btn-danger .icen-badge {
+  border-color: var(--icen-token-on-accent);
 }
 
 /* 数字超过 99 显示 99+（消费方决定是否使用，这里只保证宽度容纳） */
-.badge[data-overflow] {
+.icen-badge[data-icen-overflow] {
   min-width: 20px;
   padding: 0 5px;
 }
+
+}

package/dist/components/breadcrumb.css

@@ -1,50 +1,51 @@
+@layer icen.components {
 /*
  * @icen.ai/ui — Component: breadcrumb（面包屑）
  *
  * 完整契约：
- *   <nav class="breadcrumb" aria-label="面包屑">
+ *   <icen-nav class="icen-breadcrumb" aria-label="面包屑">
  *     <ol>
  *       <li>
- *         <a class="breadcrumb-link" href="…"><svg>…</svg> 首页</a>
- *         <span class="breadcrumb-sep" aria-hidden="true"></span>
+ *         <a class="icen-breadcrumb-link" href="…"><svg>…</svg> 首页</a>
+ *         <span class="icen-breadcrumb-sep" aria-hidden="true"></span>
  *       </li>
  *       <li>
- *         <span class="breadcrumb-ellipsis" aria-hidden="true">…</span>
- *         <span class="breadcrumb-sep" aria-hidden="true"></span>
+ *         <span class="icen-breadcrumb-ellipsis" aria-hidden="true">…</span>
+ *         <span class="icen-breadcrumb-sep" aria-hidden="true"></span>
  *       </li>
- *       <li><span class="breadcrumb-current" aria-current="page">当前页</span></li>
+ *       <li><span class="icen-breadcrumb-current" aria-current="page">当前页</span></li>
  *     </ol>
- *   </nav>
+ *   </icen-nav>
  *
- * 分隔符是 .breadcrumb-sep::after（›）；超长折叠用 .breadcrumb-ellipsis。
+ * 分隔符是 .icen-breadcrumb-sep::after（›）；超长折叠用 .icen-breadcrumb-ellipsis。
  */
 
-.breadcrumb {
+.icen-breadcrumb {
   display: flex;
   align-items: center;
-  font-size: var(--density-font-size-md);
+  font-size: var(--icen-density-font-size-md);
 }
-.breadcrumb ol {
+.icen-breadcrumb ol {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
-  gap: var(--density-space-xs);
+  gap: var(--icen-density-space-xs);
   list-style: none;
   margin: 0;
   padding: 0;
 }
-.breadcrumb li {
+.icen-breadcrumb li {
   display: flex;
   align-items: center;
-  gap: var(--density-space-xs);
+  gap: var(--icen-density-space-xs);
   min-width: 0;
 }
 
-.breadcrumb-link {
+.icen-breadcrumb-link {
   display: inline-flex;
   align-items: center;
-  gap: var(--density-space-xs);
-  color: var(--token-text-muted);
+  gap: var(--icen-density-space-xs);
+  color: var(--icen-token-text-muted);
   text-decoration: none;
   max-width: 200px;
   overflow: hidden;
@@ -52,74 +53,94 @@
   white-space: nowrap;
   transition: color var(--icen-tx-fast);
 }
-.breadcrumb-link:hover {
-  color: var(--token-accent);
+.icen-breadcrumb-link:hover {
+  color: var(--icen-token-accent);
   text-decoration: none;
 }
-.breadcrumb-link:focus-visible {
+.icen-breadcrumb-link:focus-visible {
   outline: none;
-  border-radius: var(--radius-xs);
+  border-radius: var(--icen-radius-xs);
   box-shadow: var(--icen-ring);
 }
-.breadcrumb-link > svg {
+.icen-breadcrumb-link > svg {
   width: 13px;
   height: 13px;
   flex-shrink: 0;
 }
 
-.breadcrumb-sep {
-  color: var(--token-text-faint);
-  font-size: var(--density-font-size-md);
+.icen-breadcrumb-sep {
+  color: var(--icen-token-text-faint);
+  font-size: var(--icen-density-font-size-md);
   line-height: 1;
   user-select: none;
 }
-.breadcrumb-sep::after { content: '›'; }
+.icen-breadcrumb-sep::after { content: '';
+  display: inline-block;
+  inline-size: 16px;
+  block-size: 16px;
+  flex: none;
+  vertical-align: middle;
+  background: currentColor;
+  mask: var(--icen-token-icon-chevron-right) center / contain no-repeat; }
 
-.breadcrumb-current {
+.icen-breadcrumb-current {
   display: inline-flex;
   align-items: center;
-  gap: var(--density-space-xs);
-  color: var(--token-text);
+  gap: var(--icen-density-space-xs);
+  color: var(--icen-token-text);
   font-weight: 500;
   max-width: 240px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.breadcrumb-current > svg {
+.icen-breadcrumb-current > svg {
   width: 13px;
   height: 13px;
   flex-shrink: 0;
 }
 
-.breadcrumb-ellipsis {
+.icen-breadcrumb-ellipsis {
   padding: 0 2px;
-  color: var(--token-text-faint);
+  color: var(--icen-token-text-faint);
   user-select: none;
   cursor: pointer;
-  border-radius: var(--radius-xs);
+  border-radius: var(--icen-radius-xs);
   transition: color var(--icen-tx-fast), background-color var(--icen-tx-fast);
 }
-.breadcrumb-ellipsis:hover {
-  color: var(--token-accent);
-  background: var(--token-fill-1);
+.icen-breadcrumb-ellipsis:hover {
+  color: var(--icen-token-accent);
+  background: var(--icen-token-fill-1);
 }
 
 /* ── 面包屑分隔符变体 ── */
-.breadcrumb--slash .breadcrumb-sep::after { content: '/'; }
-.breadcrumb--arrow .breadcrumb-sep::after { content: '→'; }
-.breadcrumb--dot .breadcrumb-sep::after { content: '·'; font-size: 1.2em; }
+.icen-breadcrumb--slash .icen-breadcrumb-sep::after { content: '/'; }
+.icen-breadcrumb--arrow .icen-breadcrumb-sep::after { content: '';
+  display: inline-block;
+  inline-size: 16px;
+  block-size: 16px;
+  flex: none;
+  vertical-align: middle;
+  background: currentColor;
+  mask: var(--icen-token-icon-arrow-right) center / contain no-repeat; }
+.icen-breadcrumb--dot .icen-breadcrumb-sep::after { content: '·'; font-size: 1.2em; }
 
 /* ── 面包屑尺寸变体 ── */
-.breadcrumb--sm {
-  font-size: var(--density-font-size-sm);
+.icen-breadcrumb--sm {
+  font-size: var(--icen-density-font-size-sm);
 }
-.breadcrumb--sm .breadcrumb-link,
-.breadcrumb--sm .breadcrumb-current {
-  max-width: 140px;
+.icen-breadcrumb--sm .icen-breadcrumb-link,
+.icen-breadcrumb--sm .icen-breadcrumb-current {
+  max-inline-size: 140px;
 }
 
 @media (max-width: 480px) {
-  .breadcrumb-link { max-width: 100px; }
-  .breadcrumb-current { max-width: 120px; }
+  .icen-breadcrumb-link { max-inline-size: 100px; }
+  .icen-breadcrumb-current { max-inline-size: 120px; }
+}
+
+/* ── RTL：分隔符方向镜像（› / → 指向行进方向，RTL 下行进朝左）── */
+:is([dir='rtl']) .icen-breadcrumb-sep::after { transform: scaleX(-1); }
+:is([dir='rtl']) .icen-breadcrumb--arrow .icen-breadcrumb-sep::after { transform: scaleX(-1); }
+
 }