@icen.ai/ui 0.10.0 → 0.11.0

package/dist/components/notification.css

@@ -68,17 +68,19 @@
   position: relative;
   display: flex;
   align-items: flex-start;
-  gap: var(--icen-density-space-sm);
-  background: var(--icen-token-card-strong);
+  gap: var(--icen-control-gap);
+  background: color-mix(in srgb, var(--icen-token-surface) 96%, transparent);
+  backdrop-filter: blur(var(--icen-material-blur-chrome)) saturate(var(--icen-material-saturate));
+  -webkit-backdrop-filter: blur(var(--icen-material-blur-chrome)) saturate(var(--icen-material-saturate));
   color: var(--icen-token-text);
-  border: 1px solid var(--icen-token-outline-soft);
-  border-inline-start: 3px solid var(--icen-token-info);
-  border-radius: var(--icen-radius-md);
-  box-shadow: var(--icen-token-shadow-overlay);
+  border: 1px solid var(--icen-token-material-edge);
+  border-inline-start: 2px solid var(--icen-token-info);
+  border-radius: var(--icen-radius-lg);
+  box-shadow: var(--icen-token-material-light), var(--icen-token-shadow-elevated);
   padding-block: var(--icen-density-space-md);
-  padding-inline: var(--icen-density-space-sm) var(--icen-density-space-md);
+  padding-inline: 9px 10px;
   overflow: hidden; /* 倒计时进度条贴底 */
-  animation: icen-notif-in var(--icen-tx-normal);
+  animation: icen-notif-in var(--icen-duration-normal) var(--icen-ease-enter);
 }
 .icen-notification.icen-notification--success { border-inline-start-color: var(--icen-token-success); }
 .icen-notification.icen-notification--warning { border-inline-start-color: var(--icen-token-warning); }
@@ -87,12 +89,12 @@
 
 /* ── 优先级：高优先级强调（起始缘加粗 + 更强阴影）── */
 .icen-notification.is-priority {
-  border-inline-start-width: 4px;
-  box-shadow: var(--icen-token-shadow-overlay), 0 0 0 1px color-mix(in srgb, var(--icen-token-accent) 24%, transparent);
+  border-inline-start-width: 3px;
+  box-shadow: var(--icen-token-material-light), var(--icen-token-shadow-elevated), 0 0 0 1px color-mix(in srgb, var(--icen-token-accent) 24%, transparent);
 }
-.icen-notification.is-priority.icen-notification--success { box-shadow: var(--icen-token-shadow-overlay), 0 0 0 1px color-mix(in srgb, var(--icen-token-success) 28%, transparent); }
-.icen-notification.is-priority.icen-notification--warning { box-shadow: var(--icen-token-shadow-overlay), 0 0 0 1px color-mix(in srgb, var(--icen-token-warning) 28%, transparent); }
-.icen-notification.is-priority.icen-notification--error   { box-shadow: var(--icen-token-shadow-overlay), 0 0 0 1px color-mix(in srgb, var(--icen-token-error) 28%, transparent); }
+.icen-notification.is-priority.icen-notification--success { box-shadow: var(--icen-token-material-light), var(--icen-token-shadow-elevated), 0 0 0 1px color-mix(in srgb, var(--icen-token-success) 28%, transparent); }
+.icen-notification.is-priority.icen-notification--warning { box-shadow: var(--icen-token-material-light), var(--icen-token-shadow-elevated), 0 0 0 1px color-mix(in srgb, var(--icen-token-warning) 28%, transparent); }
+.icen-notification.is-priority.icen-notification--error   { box-shadow: var(--icen-token-material-light), var(--icen-token-shadow-elevated), 0 0 0 1px color-mix(in srgb, var(--icen-token-error) 28%, transparent); }
 
 /* ── 未读：标题起始缘侧 4px 强调点（inline-block 点，margin-inline-end 与文本同向推开） + 加粗 ── */
 .icen-notification.is-unread .icen-notification-title::before {
@@ -122,8 +124,8 @@
 /* 整条 hover 抬升仅可悬停设备生效（触屏关闭，AGENTS 动效守卫） */
 @media (hover: hover) and (pointer: fine) {
   .icen-notification.is-clickable:hover {
-    transform: translateY(-1px);
-    border-color: var(--icen-token-accent);
+    transform: none;
+    border-color: var(--icen-token-control-border-hover);
   }
 }
 
@@ -133,13 +135,13 @@
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  width: 22px;
-  height: 22px;
+  width: 20px;
+  height: 20px;
   margin-top: 1px;
   border-radius: var(--icen-radius-full);
-  color: var(--icen-token-text-faint);
+  color: var(--icen-token-text-muted);
 }
-.icen-notification-icon svg { width: 16px; height: 16px; }
+.icen-notification-icon svg { width: 15px; height: 15px; }
 .icen-notification--success .icen-notification-icon { color: var(--icen-token-success); }
 .icen-notification--warning .icen-notification-icon { color: var(--icen-token-warning); }
 .icen-notification--error   .icen-notification-icon { color: var(--icen-token-error); }
@@ -173,7 +175,7 @@
 }
 .icen-notification-title {
   margin: 0;
-  font-size: var(--icen-density-font-size-md);
+  font-size: var(--icen-font-size-control);
   font-weight: 600;
   line-height: 1.4;
   overflow: hidden;
@@ -205,7 +207,8 @@
   border: 1px solid var(--icen-token-outline-soft);
   border-radius: var(--icen-radius-sm);
   background: var(--icen-token-fill-1);
-  color: var(--icen-token-text-muted);
+  /* 操作钮是功能性文字，不吃 muted 弱化（fill-1 上 4.27:1 过不了 AA） */
+  color: var(--icen-token-text);
   font: inherit;
   font-size: var(--icen-density-font-size-xs);
   font-weight: 500;
@@ -251,7 +254,8 @@
 }
 .icen-notification-link {
   font-size: var(--icen-density-font-size-sm);
-  color: var(--icen-token-accent);
+  /* accent-text 与全站 a 基线（base.css）同源：裸 accent 对浅色卡片 ~3.6:1 低于 AA */
+  color: var(--icen-token-accent-text);
   text-decoration: none;
   border-bottom: 1px dashed color-mix(in srgb, var(--icen-token-accent) 40%, transparent);
   transition: color var(--icen-tx-fast), border-color var(--icen-tx-fast);
@@ -284,7 +288,7 @@
   height: 100%;
   background: var(--icen-token-accent);
   border-radius: var(--icen-radius-full);
-  transition: width var(--icen-tx-normal) var(--icen-ease-out);
+  transition: width var(--icen-duration-normal) var(--icen-ease-out);
 }
 .icen-notification.icen-notification--success .icen-notification-progress-bar { background: var(--icen-token-success); }
 .icen-notification.icen-notification--warning .icen-notification-progress-bar { background: var(--icen-token-warning); }
@@ -356,7 +360,7 @@
 
 /* ── 暂停态（hover 时） ── */
 .icen-notification.is-paused {
-  box-shadow: var(--icen-token-shadow-overlay), 0 0 0 1px color-mix(in srgb, var(--icen-token-accent) 14%, transparent);
+  box-shadow: var(--icen-token-material-light), var(--icen-token-shadow-elevated), 0 0 0 1px color-mix(in srgb, var(--icen-token-accent) 14%, transparent);
 }
 
 /* ── 退场动画 ── */
@@ -431,7 +435,8 @@
   border: 1px solid var(--icen-token-outline-soft);
   border-radius: var(--icen-radius-sm);
   background: var(--icen-token-fill-1);
-  color: var(--icen-token-text-muted);
+  /* 功能性文字不吃 muted 弱化（fill-1 上 4.27:1 过不了 AA；hover 态本来就是正文色） */
+  color: var(--icen-token-text);
   font: inherit;
   font-size: var(--icen-density-font-size-xs);
   text-align: start;
@@ -447,4 +452,5 @@
 @media (prefers-reduced-motion: reduce) { .icen-notification-group-toggle, .icen-notification-group-toggle > svg { transition: none; } .icen-notification.is-group-revealing { animation: none; } }
 :root[data-icen-style="pixel"] .icen-notification.is-group-revealing { animation-timing-function: steps(2,end); }
 
+
 }

package/dist/components/notification.d.mts

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

package/dist/components/pagination.css

@@ -26,22 +26,23 @@
   min-width: 28px;
   height: 28px;
   padding: 0 var(--icen-density-space-xs);
-  border-radius: var(--icen-radius-sm);
-  font-size: var(--icen-density-font-size-sm);
+  border-radius: var(--icen-radius-xs);
+  font-size: var(--icen-font-size-control);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   color: var(--icen-token-text-muted);
   background: none;
-  border: 0;
+  border: 1px solid transparent;
   cursor: pointer;
   -webkit-tap-highlight-color: transparent;
   transition:
     background-color var(--icen-tx-fast),
+    border-color var(--icen-tx-fast),
     color var(--icen-tx-fast);
 }
 .icen-page-btn:not(.is-active):hover {
-  background: var(--icen-token-control-hover);
+  background: var(--icen-token-fill-hover);
   color: var(--icen-token-text);
 }
 .icen-page-btn:focus-visible {
@@ -50,10 +51,11 @@
 }
 .icen-page-btn.is-active,
 .icen-page-btn[aria-current='page'] {
-  background: var(--icen-token-accent-strong);
-  color: var(--icen-token-on-accent);
-  font-weight: 500;
-  box-shadow: var(--icen-token-shadow-elevated);
+  background: var(--icen-token-fill-selected);
+  border-color: color-mix(in srgb, var(--icen-token-accent) 24%, transparent);
+  color: var(--icen-token-text);
+  font-weight: 600;
+  box-shadow: none;
 }
 .icen-page-btn.is-disabled,
 .icen-page-btn:disabled,
@@ -76,8 +78,8 @@
 /* 尺寸变体 */
 .icen-pagination--sm .icen-page-btn,
 .icen-pagination--sm .icen-page-ellipsis {
-  min-width: 22px;
-  height: 22px;
+  min-width: 24px; /* WCAG 2.5.8 下限（22 → 24） */
+  height: 24px;
   font-size: var(--icen-density-font-size-xs);
 }
 
@@ -102,14 +104,14 @@
   padding: 0 var(--icen-density-space-xs);
   text-align: center;
   background: var(--icen-token-control);
-  border: 1px solid var(--icen-token-outline-soft);
-  border-radius: var(--icen-radius-sm);
+  border: 1px solid var(--icen-token-control-border);
+  border-radius: var(--icen-radius-xs);
   color: var(--icen-token-text);
   font: inherit;
   font-size: var(--icen-density-font-size-sm);
   transition: border-color var(--icen-tx-fast), box-shadow var(--icen-tx-fast);
 }
-.icen-pagination-jump-input:hover { border-color: var(--icen-hover-border); }
+.icen-pagination-jump-input:hover { border-color: var(--icen-token-control-border-hover); }
 .icen-pagination-jump-input:focus-visible {
   outline: none;
   border-color: var(--icen-control-focus-border);

package/dist/components/pagination.d.mts

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

package/dist/components/panel.css

@@ -30,9 +30,9 @@
 
 .icen-panel {
   background: var(--icen-token-surface);
-  border: 1px solid var(--icen-token-line-soft);
+  border: 1px solid var(--icen-token-separator-soft);
   border-radius: var(--icen-radius-lg);
-  box-shadow: var(--icen-token-shadow-elevated);
+  box-shadow: none;
   margin-bottom: var(--icen-density-space-lg);
   overflow: hidden;
 }
@@ -43,12 +43,12 @@
   align-items: center;
   justify-content: space-between;
   gap: var(--icen-density-space-sm);
-  padding: var(--icen-density-space-sm) var(--icen-density-space-md);
-  border-bottom: 1px solid var(--icen-token-line-soft);
-  font-size: var(--icen-density-font-size-xs);
-  letter-spacing: 0.08em;
-  color: var(--icen-token-text-muted);
-  text-transform: uppercase;
+  min-block-size: var(--icen-control-height-md);
+  padding: 6px var(--icen-density-space-md);
+  border-bottom: 1px solid var(--icen-token-separator-soft);
+  font-size: var(--icen-font-size-caption);
+  letter-spacing: var(--icen-letter-spacing-caption);
+  color: var(--icen-token-text);
   font-weight: 600;
 }
 .icen-panel-title-text {
@@ -67,8 +67,7 @@
   font-size: var(--icen-density-font-size-xs);
   font-weight: 400;
   letter-spacing: 0;
-  text-transform: none;
-  color: var(--icen-token-text-faint);
+  color: var(--icen-token-text-muted);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -121,7 +120,7 @@
   border-bottom-color: transparent;
 }
 .icen-panel--collapsible .icen-panel-body {
-  animation: panel-expand var(--icen-tx-normal) var(--icen-ease-out);
+  animation: panel-expand var(--icen-duration-normal) var(--icen-ease-out);
 }
 @keyframes panel-expand {
   from { opacity: 0; transform: translateY(-8px); }
@@ -130,9 +129,9 @@
 
 /* ── body / foot ── */
 .icen-panel-body {
-  padding: var(--icen-density-space-md);
-  font-size: var(--icen-density-font-size-md);
-  line-height: 1.6;
+  padding: var(--icen-density-space-md) var(--icen-density-space-md) var(--icen-density-space-lg);
+  font-size: var(--icen-font-size-control);
+  line-height: 1.55;
 }
 .icen-panel--flush .icen-panel-body { padding: 0; }
 
@@ -142,21 +141,21 @@
   justify-content: flex-end;
   gap: var(--icen-density-space-sm);
   padding: var(--icen-density-space-sm) var(--icen-density-space-md);
-  border-top: 1px solid var(--icen-token-line-soft);
-  background: color-mix(in srgb, var(--icen-token-bg-soft) 50%, transparent);
+  border-top: 1px solid var(--icen-token-separator-soft);
+  background: var(--icen-token-surface-chrome);
 }
 
 /* ── 强调变体 ── */
-.icen-panel--accent { border-color: color-mix(in srgb, var(--icen-token-accent) 30%, transparent); }
+.icen-panel--accent { border-color: color-mix(in srgb, var(--icen-token-accent) 30%, var(--icen-token-separator)); }
 .icen-panel--accent .icen-panel-title {
-  color: var(--icen-token-accent);
+  color: var(--icen-token-accent-text);
   background: var(--icen-token-accent-subtle);
 }
 
 /* ── 平面变体（无阴影，嵌套时用） ── */
 .icen-panel--flat {
-  box-shadow: none;
-  background: var(--icen-token-bg-soft);
+  background: var(--icen-token-surface-chrome);
+  border-color: transparent;
 }
 
 /* ── 可折叠模式：标题栏可点（纯 CSS 方案用 details/summary） ── */

package/dist/components/panel.d.mts

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

package/dist/components/pill.css

@@ -13,14 +13,15 @@
   display: inline-flex;
   align-items: center;
   gap: 4px;
-  padding: 2px var(--icen-density-space-sm);
+  min-block-size: 19px;
+  padding: 1px 7px;
   border-radius: var(--icen-radius-full);
   font-size: var(--icen-density-font-size-xs);
-  letter-spacing: 0.02em;
+  letter-spacing: .01em;
   font-weight: 500;
-  background: var(--icen-token-surface-strong);
+  background: var(--icen-token-fill-hover);
   color: var(--icen-token-text-muted);
-  border: 1px solid var(--icen-token-line-soft);
+  border: 1px solid var(--icen-token-separator-soft);
   white-space: nowrap;
   vertical-align: middle;
 }
@@ -41,9 +42,9 @@
   background: color-mix(in srgb, var(--icen-token-error) 9%, transparent);
 }
 .icen-pill--accent {
-  color: var(--icen-token-accent-deep, var(--icen-token-accent));
-  border-color: color-mix(in srgb, var(--icen-token-accent) 40%, transparent);
-  background: color-mix(in srgb, var(--icen-token-accent) 9%, transparent);
+  color: var(--icen-token-accent-text);
+  border-color: color-mix(in srgb, var(--icen-token-accent) 30%, transparent);
+  background: var(--icen-token-accent-subtle);
 }
 .icen-pill--info {
   color: var(--icen-token-info);

package/dist/components/pill.d.mts

@@ -0,0 +1,2 @@
+// kit: pill 类型面（构建产物，勿手改）
+export {};

package/dist/components/popover.css

@@ -26,17 +26,19 @@
   min-inline-size: 200px;
   max-inline-size: min(360px, calc(100vw - 32px));
   padding: var(--icen-density-space-sm);
-  background: var(--icen-token-card-strong);
+  background: color-mix(in srgb, var(--icen-token-surface) 94%, transparent);
+  backdrop-filter: blur(var(--icen-material-blur-floating)) saturate(var(--icen-material-saturate));
+  -webkit-backdrop-filter: blur(var(--icen-material-blur-floating)) saturate(var(--icen-material-saturate));
   color: var(--icen-token-text);
-  border: 1px solid var(--icen-token-outline);
-  box-shadow: var(--icen-token-shadow-overlay);
+  border: 1px solid var(--icen-token-material-edge);
+  box-shadow: var(--icen-token-material-light), var(--icen-token-shadow-elevated);
   border-radius: var(--icen-radius-lg);
-  animation: icen-popover-in var(--icen-tx-fast);
+  animation: icen-popover-in var(--icen-duration-fast) var(--icen-ease-enter);
   transform-origin: top center;
   /* 退场走过渡（可中断回弹）；与菜单同收敛配方 */
   transition:
-    opacity var(--icen-tx-fast) var(--icen-ease-out),
-    transform var(--icen-tx-fast) var(--icen-ease-out);
+    opacity var(--icen-duration-fast) var(--icen-ease-out),
+    transform var(--icen-duration-fast) var(--icen-ease-out);
 }
 .icen-popover[data-icen-state='closing'] {
   animation: none; /* 打断可能仍在跑的进场 */
@@ -65,14 +67,14 @@
   align-items: flex-start;
   justify-content: space-between;
   gap: var(--icen-density-space-sm);
-  padding: var(--icen-density-space-xs) var(--icen-density-space-xs) var(--icen-density-space-sm);
-  border-bottom: 1px solid var(--icen-token-line-soft);
-  margin-bottom: var(--icen-density-space-sm);
+  padding: var(--icen-density-space-xs);
+  border-bottom: 1px solid var(--icen-token-separator-soft);
+  margin-bottom: var(--icen-density-space-xs);
 }
 .icen-popover-title {
   margin: 0;
-  font-size: var(--icen-density-font-size-sm);
-  font-weight: 600;
+  font-size: var(--icen-font-size-control);
+  font-weight: var(--icen-font-weight-title);
   font-family: var(--icen-font-heading);
   line-height: 1.3;
 }
@@ -80,30 +82,37 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 22px;
-  height: 22px;
+  width: 24px;
+  height: 24px;
   padding: 0;
   border: none;
   background: transparent;
   cursor: pointer;
-  color: var(--icen-token-text-faint);
-  border-radius: var(--icen-radius-sm);
+  color: var(--icen-token-text-muted);
+  border-radius: var(--icen-radius-full);
   flex-shrink: 0;
   transition:
     background-color var(--icen-tx-fast),
     color var(--icen-tx-fast);
 }
 .icen-popover-close:hover {
-  background: var(--icen-token-surface-hover);
+  background: var(--icen-token-fill-hover);
   color: var(--icen-token-text);
 }
 .icen-popover-close:focus-visible {
   outline: none;
   box-shadow: var(--icen-ring);
 }
+/* 触屏抬到 44px 触达面（同 modal/toast/notification 关闭钮口径；桌面保持 22px 紧凑视觉） */
+@media (pointer: coarse) {
+  .icen-popover-close {
+    min-inline-size: 44px;
+    min-block-size: 44px;
+  }
+}
 
 .icen-popover-body {
-  font-size: var(--icen-density-font-size-sm);
+  font-size: var(--icen-font-size-control);
   line-height: 1.5;
 }
 
@@ -113,24 +122,24 @@
   gap: var(--icen-density-space-xs);
   margin-top: var(--icen-density-space-sm);
   padding-top: var(--icen-density-space-sm);
-  border-top: 1px solid var(--icen-token-line-soft);
+  border-top: 1px solid var(--icen-token-separator-soft);
 }
 
-/* ── 进场动画（与菜单同配方：fade + scale(.985)，按侧别反向位移 3px） ── */
+/* ── 进场动画（与菜单同配方：fade + scale(.98)，按侧别反向位移 2px） ── */
 @keyframes icen-popover-in {
-  from { opacity: 0; transform: scale(0.985) translateY(-3px); }
+  from { opacity: 0; transform: scale(0.98) translateY(-2px); }
   to { opacity: 1; transform: scale(1) translateY(0); }
 }
 @keyframes icen-popover-in-top {
-  from { opacity: 0; transform: scale(0.985) translateY(3px); }
+  from { opacity: 0; transform: scale(0.98) translateY(2px); }
   to { opacity: 1; transform: scale(1) translateY(0); }
 }
 @keyframes icen-popover-in-left {
-  from { opacity: 0; transform: scale(0.985) translateX(3px); }
+  from { opacity: 0; transform: scale(0.98) translateX(2px); }
   to { opacity: 1; transform: scale(1) translateX(0); }
 }
 @keyframes icen-popover-in-right {
-  from { opacity: 0; transform: scale(0.985) translateX(-3px); }
+  from { opacity: 0; transform: scale(0.98) translateX(-2px); }
   to { opacity: 1; transform: scale(1) translateX(0); }
 }
 

package/dist/components/popover.d.mts

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

package/dist/components/progress.d.mts

@@ -0,0 +1,2 @@
+// kit: progress 类型面（构建产物，勿手改）
+export {};

package/dist/components/rating.d.mts

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

package/dist/components/result.d.mts

@@ -0,0 +1,2 @@
+// kit: result 类型面（构建产物，勿手改）
+export {};