@icen.ai/ui 0.10.0 → 0.11.1

package/dist/components/date-picker.css

@@ -46,22 +46,22 @@
 .icen-date-picker-trigger {
   display: inline-flex;
   align-items: center;
-  gap: var(--icen-density-space-xs);
+  gap: var(--icen-control-gap-sm);
   width: 100%;
-  height: var(--icen-density-input-height-md);
-  padding: 0 var(--icen-density-space-sm);
+  height: var(--icen-control-height-md);
+  padding: 0 var(--icen-field-padding-inline);
   background: var(--icen-token-control);
-  border: 1px solid var(--icen-token-outline-soft);
-  border-radius: var(--icen-radius-md);
-  box-shadow: var(--icen-token-shadow-inset);
+  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);
   color: var(--icen-token-text);
   font: inherit;
-  font-size: var(--icen-density-font-size-md);
+  font-size: var(--icen-font-size-control);
   cursor: pointer;
   -webkit-tap-highlight-color: transparent;
   transition: border-color var(--icen-tx-fast), box-shadow var(--icen-tx-fast);
 }
-.icen-date-picker-trigger:hover { border-color: var(--icen-hover-border); }
+.icen-date-picker-trigger:hover { border-color: var(--icen-token-control-border-hover); }
 .icen-date-picker-trigger.is-open {
   border-color: var(--icen-control-focus-border);
   box-shadow: var(--icen-control-focus-shadow);
@@ -85,8 +85,8 @@
 .icen-date-picker-icon svg { width: 14px; height: 14px; }
 
 /* 尺寸 */
-.icen-date-picker-trigger.icen-date-picker-trigger--sm { height: var(--icen-density-input-height-sm); font-size: var(--icen-density-font-size-sm); }
-.icen-date-picker-trigger.icen-date-picker-trigger--lg { height: var(--icen-density-input-height-lg); font-size: var(--icen-density-font-size-lg); }
+.icen-date-picker-trigger.icen-date-picker-trigger--sm { height: var(--icen-control-height-sm); font-size: var(--icen-density-font-size-sm); }
+.icen-date-picker-trigger.icen-date-picker-trigger--lg { height: var(--icen-control-height-lg); font-size: var(--icen-density-font-size-lg); }
 
 /* ── 面板 ── */
 .icen-date-picker-panel {
@@ -94,11 +94,11 @@
   z-index: var(--icen-z-popover);
   width: 280px;
   padding: var(--icen-density-space-sm);
-  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);
-  font-size: var(--icen-density-font-size-sm);
+  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);
+  font-size: var(--icen-font-size-control);
   animation: icen-pop-in var(--icen-tx-fast);
 }
 
@@ -147,9 +147,9 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 24px;
+  height: 22px;
   font-size: var(--icen-density-font-size-xs);
-  color: var(--icen-token-text-faint);
+  color: var(--icen-token-text-muted);
   font-weight: 500;
 }
 
@@ -165,7 +165,7 @@
   height: 30px;
   padding: 0;
   border: 0;
-  border-radius: var(--icen-radius-sm);
+  border-radius: var(--icen-radius-xs);
   background: transparent;
   color: var(--icen-token-text);
   font: inherit;
@@ -175,10 +175,10 @@
   -webkit-tap-highlight-color: transparent;
   transition: background-color var(--icen-tx-fast), color var(--icen-tx-fast);
 }
-.icen-date-picker-cell:hover { background: var(--icen-token-fill-1); }
+.icen-date-picker-cell:hover { background: var(--icen-token-fill-hover); }
 .icen-date-picker-cell.is-today {
-  border: 1px solid var(--icen-token-accent);
-  color: var(--icen-token-accent-text, var(--icen-token-accent-deep, var(--icen-token-accent)));
+  border: 0;
+  color: var(--icen-token-accent-text);
   font-weight: 600;
 }
 .icen-date-picker-cell.is-selected {
@@ -186,7 +186,7 @@
   color: var(--icen-token-on-accent);
   font-weight: 600;
 }
-.icen-date-picker-cell.is-selected.is-today { border-color: var(--icen-token-on-accent); }
+.icen-date-picker-cell.is-selected.is-today { color: var(--icen-token-on-accent); }
 .icen-date-picker-cell.is-outside {
   color: var(--icen-token-text-muted);
   opacity: 1;
@@ -243,14 +243,14 @@
 .icen-date-picker-grid { display: flex; flex-direction: column; gap: 2px; }
 .icen-date-picker-week { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 2px; }
 .icen-date-picker-week > span { min-inline-size: 0; }
-.icen-date-picker-cell { inline-size: 100%; block-size: 34px; }
-.icen-date-picker-nav { inline-size: 30px; block-size: 30px; flex: 0 0 30px; }
-.icen-date-picker-nav > svg { inline-size: 16px; block-size: 16px; }
+.icen-date-picker-cell { inline-size: 100%; block-size: 30px; }
+.icen-date-picker-nav { inline-size: 28px; block-size: 28px; flex: 0 0 28px; border-radius: var(--icen-radius-xs); }
+.icen-date-picker-nav > svg { inline-size: 15px; block-size: 15px; }
 .icen-date-picker-icon { inline-size: 20px; block-size: 20px; align-items: center; justify-content: center; }
 .icen-date-picker-icon > svg { inline-size: 16px; block-size: 16px; }
 .icen-date-picker-nav:disabled, .icen-date-picker-today:disabled, .icen-date-picker-clear:disabled { opacity: .4; cursor: default; }
 .icen-date-picker-nav:disabled:hover, .icen-date-picker-today:disabled:hover, .icen-date-picker-clear:disabled:hover { background: transparent; }
-.icen-date-picker-trigger[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
+.icen-date-picker-trigger[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; }
 .icen-date-picker-cell.is-outside.is-selected { opacity: 1; color: var(--icen-token-on-accent); }
 .icen-date-picker-panel:focus-visible { outline: 2px solid var(--icen-token-accent); outline-offset: 2px; }
 .icen-date-picker-empty { margin-block: var(--icen-density-space-sm) 0; color: var(--icen-token-text-muted); text-align: center; }

package/dist/components/date-picker.d.mts

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

package/dist/components/desc.d.mts

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

package/dist/components/dropdown.d.mts

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

package/dist/components/empty.css

@@ -37,23 +37,23 @@
 
 /* ── 图标 ── */
 .icen-empty-icon {
-  width: 48px;
-  height: 48px;
-  border-radius: var(--icen-radius-lg);
-  background: var(--icen-token-card);
-  border: 1px solid var(--icen-token-outline-soft);
-  box-shadow: var(--icen-token-shadow-inset);
+  width: 40px;
+  height: 40px;
+  border-radius: var(--icen-control-radius-lg);
+  background: var(--icen-token-fill-hover);
+  border: 1px solid transparent;
+  box-shadow: none;
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--icen-token-text-faint);
-  margin-bottom: var(--icen-density-space-md);
+  color: var(--icen-token-text-muted);
+  margin-bottom: var(--icen-density-space-sm);
 }
-.icen-empty--lg .icen-empty-icon { width: 64px; height: 64px; }
-.icen-empty--sm .icen-empty-icon { width: 36px; height: 36px; margin-bottom: var(--icen-density-space-sm); }
-.icen-empty-icon svg { width: 24px; height: 24px; }
-.icen-empty--lg .icen-empty-icon svg { width: 32px; height: 32px; }
-.icen-empty--sm .icen-empty-icon svg { width: 18px; height: 18px; }
+.icen-empty--lg .icen-empty-icon { width: 52px; height: 52px; }
+.icen-empty--sm .icen-empty-icon { width: 32px; height: 32px; margin-bottom: var(--icen-density-space-xs); }
+.icen-empty-icon svg { width: 20px; height: 20px; }
+.icen-empty--lg .icen-empty-icon svg { width: 26px; height: 26px; }
+.icen-empty--sm .icen-empty-icon svg { width: 16px; height: 16px; }
 
 /* ── 类型预设 ── */
 .icen-empty--error .icen-empty-icon {
@@ -78,8 +78,8 @@
 
 /* ── 标题与描述 ── */
 .icen-empty-title {
-  font-size: var(--icen-density-font-size-md);
-  font-weight: 500;
+  font-size: var(--icen-font-size-title);
+  font-weight: var(--icen-font-weight-title);
   color: var(--icen-token-text);
   margin: 0;
   line-height: 1.4;
@@ -89,7 +89,7 @@
   font-size: var(--icen-density-font-size-sm);
   color: var(--icen-token-text-muted);
   margin: 4px 0 0;
-  max-width: 280px;
+  max-width: 300px;
   line-height: 1.5;
 }
 

package/dist/components/empty.d.mts

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

package/dist/components/feedback.css

@@ -11,18 +11,19 @@
   display: flex;
   align-items: flex-start;
   gap: var(--icen-density-space-sm);
-  padding: var(--icen-density-space-sm);
-  border-radius: var(--icen-radius-md);
-  box-shadow: var(--icen-token-shadow-inset);
+  padding: 8px 10px;
+  border-radius: var(--icen-control-radius-lg);
+  box-shadow: none;
   border: 1px solid transparent;
+  border-inline-start-width: 2px;
   font-size: var(--icen-density-font-size-sm);
   position: relative;
   overflow: hidden;
 }
-.icen-alert--info    { background: var(--icen-token-info-muted);    border-color: color-mix(in srgb, var(--icen-token-info) 18%, transparent); }
-.icen-alert--success { background: var(--icen-token-success-muted); border-color: color-mix(in srgb, var(--icen-token-success) 18%, transparent); }
-.icen-alert--warning { background: var(--icen-token-warning-muted); border-color: color-mix(in srgb, var(--icen-token-warning) 18%, transparent); }
-.icen-alert--error   { background: var(--icen-token-error-muted);   border-color: color-mix(in srgb, var(--icen-token-error) 18%, transparent); }
+.icen-alert--info    { background: var(--icen-token-info-muted);    border-color: color-mix(in srgb, var(--icen-token-info) 18%, transparent); border-inline-start-color: var(--icen-token-info); }
+.icen-alert--success { background: var(--icen-token-success-muted); border-color: color-mix(in srgb, var(--icen-token-success) 18%, transparent); border-inline-start-color: var(--icen-token-success); }
+.icen-alert--warning { background: var(--icen-token-warning-muted); border-color: color-mix(in srgb, var(--icen-token-warning) 18%, transparent); border-inline-start-color: var(--icen-token-warning); }
+.icen-alert--error   { background: var(--icen-token-error-muted);   border-color: color-mix(in srgb, var(--icen-token-error) 18%, transparent); border-inline-start-color: var(--icen-token-error); }
 
 .icen-alert-icon {
   flex-shrink: 0;
@@ -37,8 +38,8 @@
 
 .icen-alert-content { flex: 1; min-inline-size: 0; }
 .icen-alert-title {
-  font-size: var(--icen-density-font-size-md);
-  font-weight: 500;
+  font-size: var(--icen-font-size-control);
+  font-weight: 600;
   margin: 0;
   line-height: 1.4;
 }
@@ -54,13 +55,13 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 22px;
-  height: 22px;
+  width: 24px;
+  height: 24px;
   padding: 0;
   border: 0;
   border-radius: var(--icen-radius-xs);
   background: none;
-  color: var(--icen-token-text-faint);
+  color: var(--icen-token-text-muted);
   cursor: pointer;
   transition:
     opacity var(--icen-tx-fast),
@@ -100,32 +101,33 @@
   padding: 40px var(--icen-density-space-md);
 }
 .icen-result-icon {
-  width: 64px;
-  height: 64px;
+  width: 56px;
+  height: 56px;
   border-radius: var(--icen-radius-full);
   display: flex;
   align-items: center;
   justify-content: center;
-  box-shadow: var(--icen-token-shadow-inset);
+  box-shadow: none;
   border: 1px solid transparent;
-  margin-bottom: var(--icen-density-space-md);
+  margin-bottom: var(--icen-density-space-sm);
 }
-.icen-result-icon svg { width: 28px; height: 28px; }
+.icen-result-icon svg { width: 26px; height: 26px; }
 .icen-result--success .icen-result-icon { background: var(--icen-token-success-muted); color: var(--icen-token-success); border-color: color-mix(in srgb, var(--icen-token-success) 12%, transparent); }
 .icen-result--error   .icen-result-icon { background: var(--icen-token-error-muted);   color: var(--icen-token-error);   border-color: color-mix(in srgb, var(--icen-token-error) 12%, transparent); }
 .icen-result--warning .icen-result-icon { background: var(--icen-token-warning-muted); color: var(--icen-token-warning); border-color: color-mix(in srgb, var(--icen-token-warning) 12%, transparent); }
 .icen-result--info    .icen-result-icon { background: var(--icen-token-info-muted);    color: var(--icen-token-info);    border-color: color-mix(in srgb, var(--icen-token-info) 12%, transparent); }
 
 .icen-result-title {
-  font-size: var(--icen-density-font-size-lg);
+  font-size: var(--icen-density-font-size-xl);
   font-weight: 600;
   color: var(--icen-token-text);
   margin: 0;
   font-family: var(--icen-font-heading);
   line-height: 1.3;
+  letter-spacing: -.015em;
 }
 .icen-result-desc {
-  font-size: var(--icen-density-font-size-sm);
+  font-size: var(--icen-font-size-control);
   color: var(--icen-token-text-muted);
   margin: var(--icen-density-space-xs) 0 0;
   max-width: 360px;
@@ -147,15 +149,15 @@
 }
 .icen-progress-track {
   flex: 1;
-  height: 6px;
+  height: 4px;
   overflow: hidden;
   border-radius: var(--icen-radius-full);
-  background: color-mix(in srgb, var(--icen-token-line-soft) 40%, transparent);
+  background: var(--icen-token-fill-2);
 }
 .icen-progress-bar {
   height: 100%;
   border-radius: var(--icen-radius-full);
-  background: var(--icen-token-accent);
+  background: var(--icen-token-accent-strong);
   transition: width var(--icen-tx-slow);
 }
 .icen-progress--success .icen-progress-bar { background: var(--icen-token-success); }
@@ -184,15 +186,15 @@
 /* ══════════════ spinner · 加载圈 ══════════════ */
 .icen-spinner {
   display: inline-block;
-  width: 20px;
-  height: 20px;
-  border: 2px solid color-mix(in srgb, var(--icen-token-accent) 30%, transparent);
-  border-top-color: var(--icen-token-accent);
+  width: 18px;
+  height: 18px;
+  border: 1.5px solid color-mix(in srgb, var(--icen-token-accent) 26%, transparent);
+  border-top-color: var(--icen-token-accent-strong);
   border-radius: var(--icen-radius-full);
   animation: icen-spin var(--spinner-duration, 0.8s) linear infinite;
 }
-.icen-spinner--sm { width: 14px; height: 14px; border-width: 2px; }
-.icen-spinner--lg { width: 32px; height: 32px; border-width: 3px; }
+.icen-spinner--sm { width: 13px; height: 13px; border-width: 1.5px; }
+.icen-spinner--lg { width: 28px; height: 28px; border-width: 2.5px; }
 .icen-spinner--success { border-color: color-mix(in srgb, var(--icen-token-success) 30%, transparent); border-top-color: var(--icen-token-success); }
 .icen-spinner--error   { border-color: color-mix(in srgb, var(--icen-token-error) 30%, transparent); border-top-color: var(--icen-token-error); }
 .icen-spinner--muted   { border-color: color-mix(in srgb, var(--icen-token-text-faint) 30%, transparent); border-top-color: var(--icen-token-text-faint); }
@@ -283,7 +285,7 @@
   stroke: var(--icen-token-accent);
   stroke-width: 4;
   stroke-linecap: round;
-  transition: stroke-dashoffset var(--icen-tx-slow) var(--icen-ease-out);
+  transition: stroke-dashoffset var(--icen-duration-slow) var(--icen-ease-out);
 }
 .icen-progress-ring-text {
   position: absolute;

package/dist/components/form-validate.css

@@ -2,6 +2,10 @@
 /*
  * form-validate.css — 表单校验呈现层（与 behaviors/form-validate.ts 配套）
  *
+ * 分层登记（guard: tier-direction 文件级白名单）：show_form 渲染体（.icen-ai-form*）
+ * 归本模块所有（runShowForm 在 form-validate.ts，注册在 ai-tools.ts），
+ * 类名沿用 ai 族命名是历史契约，不算 Core→Beta 依赖。
+ *
  * DOM 契约（行为层写入；本文件只负责呈现，不驱动逻辑）：
  *   <form data-icen-validate [data-icen-validate-summary] [data-icen-validate-show-valid]>
  *     字段 = form 内有 name 的 input / textarea / select；initFormValidate() 自动挂 novalidate。
@@ -73,17 +77,18 @@
 /* ── 提交失败汇总清单（form[data-icen-validate-summary]，表单顶部，锚点聚焦字段） ── */
 
 .icen-form-validate-summary {
-  border: 1px solid var(--icen-token-error);
+  border: 1px solid color-mix(in srgb, var(--icen-token-error) 45%, transparent);
   border-radius: var(--icen-radius-md);
-  background: var(--icen-token-error-soft, var(--icen-token-bg-soft));
+  background: var(--icen-token-error-soft, color-mix(in srgb, var(--icen-token-error) 6%, transparent));
   padding: var(--icen-density-space-sm) var(--icen-density-space-md);
   margin-bottom: var(--icen-density-space-md);
 }
 
 .icen-form-validate-summary-title {
   margin: 0 0 var(--icen-density-space-xs);
-  font-size: var(--icen-density-font-size-sm);
+  font-size: var(--icen-font-size-control);
   font-weight: 600;
+  line-height: 1.45;
   color: var(--icen-token-error);
 }
 
@@ -92,11 +97,12 @@
   padding-inline-start: 1.2em;
   display: flex;
   flex-direction: column;
-  gap: 2px;
+  gap: 4px;
 }
 
-.icen-form-validate-summary-item { color: var(--icen-token-error); text-decoration: none; }
-.icen-form-validate-summary-item:hover { text-decoration: underline; }
+.icen-form-validate-summary-item { font-size: var(--icen-font-size-caption); line-height: 1.6; color: var(--icen-token-error); text-decoration: none; }
+.icen-form-validate-summary-item:hover { text-decoration: underline; text-underline-offset: 2px; }
+.icen-form-validate-summary-item:focus-visible { outline: none; box-shadow: var(--icen-ring); border-radius: var(--icen-radius-xs); }
 
 /* ── AI 工具 show_form 挂载体（嵌在 ai-tool 卡的 IO 区，窄宽单列） ── */
 
@@ -117,4 +123,12 @@
   justify-content: flex-end;
 }
 
+@media (forced-colors: active) {
+  .icen-form-validate-summary {
+    border-color: CanvasText;
+    background: Canvas;
+  }
+  .icen-form-validate-summary-item:focus-visible { outline: 2px solid Highlight; outline-offset: 1px; box-shadow: none; }
+}
+
 }

package/dist/components/form-validate.d.mts

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

package/dist/components/form.css

@@ -23,7 +23,7 @@
  * 原生回退 :invalid:not(:placeholder-shown) 启发式。
  */
 
-.icen-form { display: flex; flex-direction: column; gap: var(--icen-density-space-md); }
+.icen-form { display: flex; flex-direction: column; gap: var(--icen-density-space-lg); }
 
 .icen-form-field {
   display: flex;
@@ -37,8 +37,9 @@
 .icen-form-label {
   font-size: var(--icen-density-font-size-sm);
   color: var(--icen-token-text-muted);
-  letter-spacing: 0.02em;
-  font-weight: 500;
+  letter-spacing: 0;
+  font-weight: var(--icen-font-weight-label);
+  line-height: 1.35;
 }
 .icen-form-label .icen-req { color: var(--icen-token-error); margin-inline-start: 2px; }
 
@@ -46,14 +47,14 @@
 .icen-form-input,
 .icen-form-textarea {
   inline-size: 100%;
-  padding: 0 var(--icen-density-space-md);
-  height: var(--icen-density-input-height-md);
+  padding: 0 var(--icen-field-padding-inline);
+  height: var(--icen-control-height-md);
   background: var(--icen-token-control);
   color: var(--icen-token-text);
-  border: 1px solid var(--icen-token-outline-soft);
-  border-radius: var(--icen-radius-md);
+  border: var(--icen-control-border-width) solid var(--icen-token-control-border);
+  border-radius: var(--icen-control-radius);
   font-family: var(--icen-font-body);
-  font-size: var(--icen-density-font-size-md);
+  font-size: var(--icen-font-size-control);
   outline: none;
   transition:
     border-color var(--icen-tx-fast),
@@ -62,18 +63,18 @@
 }
 .icen-form-textarea {
   height: auto;
-  min-height: calc(4 * 1.5em + 24px);
-  padding: var(--icen-density-space-sm) var(--icen-density-space-md);
+  min-height: calc(4 * 1.5em + 22px);
+  padding: var(--icen-density-space-sm) var(--icen-field-padding-inline);
   line-height: 1.5;
   resize: vertical;
 }
 .icen-form-input::placeholder,
 .icen-form-textarea::placeholder {
-  color: color-mix(in srgb, var(--icen-token-text-faint) 60%, transparent);
+  color: var(--icen-token-text-faint); /* 全量 faint：60% 混透浅色仅 ~2.4:1 低于 AA（faint 全量 ≥4.9:1） */
 }
 .icen-form-input:hover,
 .icen-form-textarea:hover {
-  border-color: var(--icen-hover-border);
+  border-color: var(--icen-token-control-border-hover);
 }
 .icen-form-input:focus-visible,
 .icen-form-textarea:focus-visible {
@@ -87,6 +88,8 @@
   opacity: var(--icen-disabled-opacity);
   cursor: not-allowed;
   background: var(--icen-token-bg-soft);
+  /* 禁用态不吃 hover 抬边（上面 :hover 只看伪类，指针仍会触发） */
+  pointer-events: none;
 }
 
 /* 校验态：:user-invalid（交互后才判 invalid，现代引擎）为主通道；
@@ -113,8 +116,8 @@
 }
 
 /* 尺寸变体 */
-.icen-form-input--sm, .icen-form-textarea--sm { height: var(--icen-density-input-height-sm); font-size: var(--icen-density-font-size-sm); }
-.icen-form-input--lg, .icen-form-textarea--lg { height: var(--icen-density-input-height-lg); font-size: var(--icen-density-font-size-lg); }
+.icen-form-input--sm, .icen-form-textarea--sm { height: var(--icen-control-height-sm); font-size: var(--icen-density-font-size-sm); }
+.icen-form-input--lg, .icen-form-textarea--lg { height: var(--icen-control-height-lg); font-size: var(--icen-density-font-size-lg); }
 
 .icen-form-hint {
   font-size: var(--icen-density-font-size-xs);

package/dist/components/form.d.mts

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

package/dist/components/icon.css

@@ -19,9 +19,9 @@
   cursor: pointer;
   transition: opacity var(--icen-tx-fast), background-color var(--icen-tx-fast), color var(--icen-tx-fast), transform var(--icen-tx-fast);
 }
-.icen-icon-action:hover { background: var(--icen-token-fill-1); color: var(--icen-token-text); }
-.icen-icon-action:active { transform: scale(.94); }
-.icen-icon-action:focus-visible { outline: 2px solid var(--icen-token-accent); outline-offset: 2px; }
+.icen-icon-action:hover { background: var(--icen-token-fill-hover); color: var(--icen-token-text); }
+.icen-icon-action:active { background: var(--icen-token-fill-pressed); }
+.icen-icon-action:focus-visible { outline: none; box-shadow: var(--icen-ring); }
 .icen-icon-action:disabled { opacity: var(--icen-disabled-opacity); pointer-events: none; }
 @media (hover: hover) and (pointer: fine) {
   .icen-icon-action[data-icen-reveal] { opacity: 0; }
@@ -34,7 +34,6 @@
 }
 @media (prefers-reduced-motion: reduce) {
   .icen-icon-action { transition: none; }
-  .icen-icon-action:active { transform: none; }
 }
 
 :root[data-icen-style="pixel"] .icen-symbol { stroke-linecap: square; stroke-linejoin: miter; shape-rendering: crispEdges; }
@@ -66,11 +65,14 @@
 .icen-search-clear > svg { inline-size: 16px; block-size: 16px; pointer-events: none; }
 .icen-search-clear:hover {
   color: var(--icen-token-text);
-  background: var(--icen-token-surface-hover);
+  background: var(--icen-token-fill-hover);
+}
+.icen-search-clear:active {
+  background: var(--icen-token-fill-pressed);
 }
 .icen-search-clear:focus-visible {
-  outline: 2px solid var(--icen-token-accent);
-  outline-offset: -2px;
+  outline: none;
+  box-shadow: var(--icen-ring);
 }
 @media (prefers-reduced-motion: reduce) {
   .icen-search-clear { transition: none; }
@@ -92,11 +94,20 @@
 .icen-suggestion-symbol > svg { inline-size: 16px; block-size: 16px; }
 .icen-suggestion-copy { flex: 1; min-inline-size: 0; overflow-wrap: anywhere; }
 .icen-suggestion-status.is-loading .icen-suggestion-symbol > svg { animation: icen-spin calc(var(--icen-duration-normal) * 4) linear infinite; }
-.icen-suggestion-retry { flex: 0 0 auto; padding-inline: var(--icen-density-space-sm); min-block-size: var(--icen-density-input-height-sm); 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); font: inherit; cursor: pointer; }
-.icen-suggestion-retry:focus-visible { outline: 2px solid var(--icen-token-accent); outline-offset: 1px; }
-@media (hover: hover) and (pointer: fine) { .icen-suggestion-retry:hover { background: var(--icen-token-fill-2); } }
+.icen-suggestion-retry { flex: 0 0 auto; padding-inline: var(--icen-density-space-sm); min-block-size: var(--icen-density-input-height-sm); 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); font: inherit; cursor: pointer; transition: background-color var(--icen-tx-fast), border-color var(--icen-tx-fast); }
+.icen-suggestion-retry:focus-visible { outline: none; box-shadow: var(--icen-ring); }
+@media (hover: hover) and (pointer: fine) { .icen-suggestion-retry:hover { background: var(--icen-token-fill-2); border-color: var(--icen-token-line); } }
 @media (pointer: coarse) { .icen-suggestion-retry { min-inline-size: 44px; min-block-size: 44px; } }
 :root[data-icen-style="pixel"] .icen-suggestion-status.is-loading .icen-suggestion-symbol > svg { animation-timing-function: steps(8,end); }
 @media (prefers-reduced-motion: reduce) { .icen-suggestion-status.is-loading .icen-suggestion-symbol > svg { animation: none; } }
 
+@media (forced-colors: active) {
+  .icen-icon-action,
+  .icen-search-clear,
+  .icen-suggestion-retry { border: 1px solid CanvasText; }
+  .icen-icon-action:focus-visible,
+  .icen-search-clear:focus-visible,
+  .icen-suggestion-retry:focus-visible { outline: 2px solid Highlight; outline-offset: 1px; box-shadow: none; }
+}
+
 }

package/dist/components/icon.d.mts

@@ -0,0 +1,2 @@
+// kit: icon 类型面（构建产物，勿手改）
+export { ICON_PATHS, iconPath, iconHTML, createIcon, registerIcon } from '../behaviors/icons.mjs';