@icen.ai/ui 0.10.0 → 0.11.0

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';

package/dist/components/input.css

@@ -30,16 +30,16 @@
 .icen-kb-filter-value {
   box-sizing: border-box;
   min-inline-size: 0;
-  block-size: var(--input-height, var(--icen-density-input-height-md));
-  padding: 0 var(--input-padding-inline, var(--icen-density-space-sm));
+  block-size: var(--input-height, var(--icen-control-height-md));
+  padding: 0 var(--input-padding-inline, var(--icen-field-padding-inline));
   font-family: var(--icen-font-body);
-  font-size: var(--input-font-size, var(--icen-density-font-size-md));
-  line-height: 1.5;
+  font-size: var(--input-font-size, var(--icen-font-size-control));
+  line-height: 1.4;
   color: var(--icen-token-text);
   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);
   transition: border-color var(--icen-tx-fast), box-shadow var(--icen-tx-fast);
 }
 .icen-input-wrap {
@@ -50,7 +50,7 @@
   inline-size: 100%;
 }
 :is(.icen-input-wrap,.icen-input-control,.icen-kb-input,.icen-kb-retrieval-query,.icen-kb-hittest-input,.icen-kb-filter-field,.icen-kb-filter-value):hover {
-  border-color: var(--icen-hover-border);
+  border-color: var(--icen-token-control-border-hover);
 }
 :is(.icen-input-wrap,.icen-input-control,.icen-kb-input,.icen-kb-retrieval-query,.icen-kb-hittest-input,.icen-kb-filter-field,.icen-kb-filter-value):focus-within {
   outline: none;
@@ -77,13 +77,13 @@
 /* 尺寸变体 */
 .icen-input-wrap--sm, .icen-input-control--sm,
 .icen-kb-input, .icen-kb-retrieval-query, .icen-kb-hittest-input, .icen-kb-filter-field, .icen-kb-filter-value {
-  --input-height: var(--icen-density-input-height-sm);
-  --input-padding-inline: max(8px, calc(var(--icen-density-space-sm) * 1.25));
+  --input-height: var(--icen-control-height-sm);
+  --input-padding-inline: var(--icen-field-padding-inline-sm);
   --input-font-size: var(--icen-density-font-size-sm);
 }
 .icen-input-wrap--lg, .icen-input-control--lg {
-  --input-height: var(--icen-density-input-height-lg);
-  --input-padding-inline: var(--icen-density-space-md);
+  --input-height: var(--icen-control-height-lg);
+  --input-padding-inline: var(--icen-control-padding-inline-lg);
   --input-font-size: var(--icen-density-font-size-lg);
 }
 
@@ -99,7 +99,7 @@
   font: inherit;
 }
 .icen-input::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-input:read-only {
   color: var(--icen-token-text-muted);
@@ -162,7 +162,7 @@
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  width: 22px; height: 22px;
+  width: 24px; height: 24px; /* WCAG 2.5.8 下限（22 → 24） */
   padding: 0;
   border: none;
   background: transparent;
@@ -191,14 +191,14 @@
   display: flex;
   width: 100%;
   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);
   transition: border-color var(--icen-tx-fast),
     box-shadow var(--icen-tx-fast);
 }
 .icen-textarea-wrap:hover {
-  border-color: var(--icen-hover-border);
+  border-color: var(--icen-token-control-border-hover);
 }
 .icen-textarea-wrap:focus-within {
   box-shadow: var(--icen-control-focus-shadow);
@@ -221,19 +221,19 @@
 
 .icen-textarea {
   width: 100%;
-  padding: var(--icen-density-space-sm) var(--icen-density-space-md);
+  padding: var(--icen-density-space-sm) var(--icen-field-padding-inline);
   background: transparent;
   border: none;
   outline: none;
   resize: vertical;
   color: var(--icen-token-text);
   font: inherit;
-  font-size: var(--icen-density-font-size-md);
+  font-size: var(--icen-font-size-control);
   line-height: 1.5;
-  min-height: calc(3 * 1.5em + 24px);
+  min-height: calc(3 * 1.5em + 22px);
 }
 .icen-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） */
 }
 
 /* 字符计数（behavior 可挂到 .icen-input-wrap 或 .icen-textarea-wrap 内行内末端） */

package/dist/components/input.d.mts

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

package/dist/components/kb-access.d.mts

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

package/dist/components/kb-acl.d.mts

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