@icen.ai/ui 0.9.0 → 0.11.0

package/dist/components/form-validate.css

@@ -0,0 +1,134 @@
+@layer icen.components {
+/*
+ * 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。
+ *     校验态落在「最近的 .icen-field / .icen-form-field 包装器」上：
+ *       .is-error + data-icen-invalid="true"   未过：控件 aria-invalid="true"，
+ *         自动创建 <p class="icen-field-error" role="alert" data-icen-fv-auto>（id 自动生成，
+ *         控件 aria-describedby 接线；手写错误节点不带 data-icen-fv-auto，清空后保留）
+ *       .is-valid + data-icen-valid="true"     通过（仅 form/字段带 data-icen-validate-show-valid 时挂）
+ *       .is-validating                          异步校验中（控件 aria-busy="true"）
+ *     提交失败且 form 带 data-icen-validate-summary → 表单顶部渲染错误清单：
+ *       <div class="icen-form-validate-summary" role="alert">
+ *         <p class="icen-form-validate-summary-title">…</p>
+ *         <ul class="icen-form-validate-summary-list">
+ *           <li><a class="icen-form-validate-summary-item" href="#字段 id">…</a></li>…
+ *         </ul></div>
+ *     AI 工具 show_form 挂载体（import behaviors/form-validate.ts 即注册）：
+ *       <div class="icen-ai-form"><p class="icen-ai-form-title">…</p>
+ *         <form class="icen-form icen-ai-form-fields" data-icen-validate data-icen-validate-summary>
+ *           <div class="icen-field"><label class="icen-field-label">…<span class="icen-req">*</span></label>
+ *             <input|icen-textarea|select class="icen-form-input|icen-form-textarea">…
+ *             [<span class="icen-field-hint">…</span>]</div>…
+ *           <div class="icen-ai-form-actions"><button class="icen-btn icen-btn-primary">提交</button>
+ *             <button class="icen-btn icen-btn-ghost" data-icen-ai-form-cancel>取消</button></div>
+ *         </form></div>
+ *
+ * 样式策略：控件本身的错误边框/焦点环归 form.css（:invalid / [data-icen-invalid] 同已支持），
+ *   本文件只补包装器态（.is-error/.is-valid/.is-validating）、字段级错误/提示文案、
+ *   提交失败汇总清单与 show_form 挂载体布局——全部消费 --icen-token-*。
+ */
+
+/* ── 字段包装器校验态（控件视觉归 form.css，这里只挂状态色与动效提示） ── */
+
+.icen-field.is-error > .icen-field-label,
+.icen-field.is-error > .icen-form-label { color: var(--icen-token-error); }
+
+.icen-field.is-valid > .icen-field-label,
+.icen-field.is-valid > .icen-form-label { color: var(--icen-token-success-text, color-mix(in srgb, var(--icen-token-success) 90%, black)); }
+[data-icen-theme='dark'] .icen-field.is-valid > .icen-field-label,
+[data-icen-theme='dark'] .icen-field.is-valid > .icen-form-label { color: var(--icen-token-success-text, var(--icen-token-success)); }
+
+.icen-field.is-validating { cursor: progress; }
+.icen-field.is-validating > :is(input, textarea, select) { opacity: var(--icen-disabled-opacity); }
+
+/* ── 字段级文案 ── */
+
+.icen-field-label {
+  display: block;
+  font-size: var(--icen-density-font-size-sm);
+  color: var(--icen-token-text);
+  margin-bottom: var(--icen-density-space-xs);
+}
+.icen-field-label .icen-req { color: var(--icen-token-error); margin-inline-start: 2px; }
+
+.icen-field-hint {
+  display: block;
+  font-size: var(--icen-density-font-size-xs);
+  color: var(--icen-token-text-faint);
+  line-height: 1.4;
+  margin-top: var(--icen-density-space-xs);
+}
+
+.icen-field-error {
+  margin: var(--icen-density-space-xs) 0 0;
+  font-size: var(--icen-density-font-size-xs);
+  color: var(--icen-token-error);
+  line-height: 1.4;
+}
+
+/* ── 提交失败汇总清单（form[data-icen-validate-summary]，表单顶部，锚点聚焦字段） ── */
+
+.icen-form-validate-summary {
+  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, 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-font-size-control);
+  font-weight: 600;
+  line-height: 1.45;
+  color: var(--icen-token-error);
+}
+
+.icen-form-validate-summary-list {
+  margin: 0;
+  padding-inline-start: 1.2em;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.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 区，窄宽单列） ── */
+
+.icen-ai-form { display: flex; flex-direction: column; gap: var(--icen-density-space-sm); }
+
+.icen-ai-form-title {
+  margin: 0;
+  font-size: var(--icen-density-font-size-md);
+  font-weight: 600;
+  color: var(--icen-token-text);
+}
+
+.icen-ai-form-fields { gap: var(--icen-density-space-sm); }
+
+.icen-ai-form-actions {
+  display: flex;
+  gap: var(--icen-density-space-sm);
+  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-validate.mjs

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

package/dist/components/form.css

@@ -1,3 +1,4 @@
+@layer icen.components {
 /*
  * @icen.ai/ui — Component: form（表单结构：字段组 / label / hint / 横幅提示）
  *
@@ -6,261 +7,286 @@
  *   - form.css 处理"字段→label→hint 的纵向布局"和"页面级结果横幅"
  *
  * 契约：
- *   <form class="form">
- *     <fieldset class="form-field">
- *       <label class="form-label" for="x">姓名</label>
- *       <span class="control"><input id="x" class="form-input" /></span>
- *       <span class="form-hint">必填，3-20 个字符</span>     <!-- 可选 -->
- *       <span class="form-error">姓名长度不足</span>          <!-- 可选，aria-live=polite -->
+ *   <icen-form class="icen-form">
+ *     <fieldset class="icen-form-field">
+ *       <label class="icen-form-label" for="x">姓名</label>
+ *       <span class="icen-control"><icen-input id="x" class="icen-form-input" /></span>
+ *       <span class="icen-form-hint">必填，3-20 个字符</span>     <!-- 可选 -->
+ *       <span class="icen-form-error">姓名长度不足</span>          <!-- 可选，aria-live=polite -->
  *     </fieldset>
- *   </form>
+ *   </icen-form>
  *
- *   <div class="banner-ok [.banner-block]">已保存</div>
- *   <div class="banner-err [.banner-block]">提交失败：网络错误</div>
+ *   <div class="icen-banner-ok [.icen-banner-block]">已保存</div>
+ *   <div class="icen-banner-err [.icen-banner-block]">提交失败：网络错误</div>
  *
- * form-input 同时支持 :invalid 与 [data-invalid=true]，behavior 二选一驱动。
+ * form-input 的错误态以 :user-invalid（交互后）与 [data-icen-invalid=true]（behavior 驱动）为通道；
+ * 原生回退 :invalid:not(:placeholder-shown) 启发式。
  */
 
-.form { display: flex; flex-direction: column; gap: var(--density-space-md); }
+.icen-form { display: flex; flex-direction: column; gap: var(--icen-density-space-lg); }
 
-.form-field {
+.icen-form-field {
   display: flex;
   flex-direction: column;
-  gap: var(--density-space-xs);
+  gap: var(--icen-density-space-xs);
   margin: 0;
   padding: 0;
   border: 0;
 }
 
-.form-label {
-  font-size: var(--density-font-size-sm);
-  color: var(--token-text-muted);
-  letter-spacing: 0.02em;
-  font-weight: 500;
+.icen-form-label {
+  font-size: var(--icen-density-font-size-sm);
+  color: var(--icen-token-text-muted);
+  letter-spacing: 0;
+  font-weight: var(--icen-font-weight-label);
+  line-height: 1.35;
 }
-.form-label .req { color: var(--token-error); margin-left: 2px; }
+.icen-form-label .icen-req { color: var(--icen-token-error); margin-inline-start: 2px; }
 
-/* 裸 input（非 .control wrapper 用法） */
-.form-input,
-.form-textarea {
-  width: 100%;
-  padding: 0 var(--density-space-md);
-  height: var(--density-input-height-md);
-  background: var(--token-control);
-  color: var(--token-text);
-  border: 1px solid var(--token-outline-soft);
-  border-radius: var(--radius-md);
-  font-family: var(--font-body);
-  font-size: var(--density-font-size-md);
+/* 裸 input（非 .icen-control wrapper 用法） */
+.icen-form-input,
+.icen-form-textarea {
+  inline-size: 100%;
+  padding: 0 var(--icen-field-padding-inline);
+  height: var(--icen-control-height-md);
+  background: var(--icen-token-control);
+  color: var(--icen-token-text);
+  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-font-size-control);
   outline: none;
   transition:
     border-color var(--icen-tx-fast),
     box-shadow var(--icen-tx-fast),
     background-color var(--icen-tx-fast);
 }
-.form-textarea {
+.icen-form-textarea {
   height: auto;
-  min-height: calc(4 * 1.5em + 24px);
-  padding: var(--density-space-sm) var(--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;
 }
-.form-input::placeholder,
-.form-textarea::placeholder {
-  color: color-mix(in srgb, var(--token-text-faint) 60%, transparent);
+.icen-form-input::placeholder,
+.icen-form-textarea::placeholder {
+  color: var(--icen-token-text-faint); /* 全量 faint：60% 混透浅色仅 ~2.4:1 低于 AA（faint 全量 ≥4.9:1） */
 }
-.form-input:hover,
-.form-textarea:hover {
-  border-color: var(--icen-hover-border);
+.icen-form-input:hover,
+.icen-form-textarea:hover {
+  border-color: var(--icen-token-control-border-hover);
 }
-.form-input:focus-visible,
-.form-textarea:focus-visible {
+.icen-form-input:focus-visible,
+.icen-form-textarea:focus-visible {
   border-color: var(--icen-control-focus-border);
   box-shadow: var(--icen-control-focus-shadow);
 }
-.form-input:disabled,
-.form-textarea:disabled,
-.form-input[aria-disabled='true'],
-.form-textarea[aria-disabled='true'] {
+.icen-form-input:disabled,
+.icen-form-textarea:disabled,
+.icen-form-input[aria-disabled='true'],
+.icen-form-textarea[aria-disabled='true'] {
   opacity: var(--icen-disabled-opacity);
   cursor: not-allowed;
-  background: var(--token-bg-soft);
+  background: var(--icen-token-bg-soft);
+  /* 禁用态不吃 hover 抬边（上面 :hover 只看伪类，指针仍会触发） */
+  pointer-events: none;
 }
 
-/* 校验态：原生 :invalid 与显式 [data-invalid] 同时支持 */
-.form-input:where(:invalid:not(:placeholder-shown), [data-invalid='true']),
-.form-textarea:where(:invalid:not(:placeholder-shown), [data-invalid='true']) {
-  border-color: var(--token-error);
-}
-.form-input:where(:invalid:not(:placeholder-shown), [data-invalid='true']):focus-visible,
-.form-textarea:where(:invalid:not(:placeholder-shown), [data-invalid='true']):focus-visible {
-  border-color: var(--token-error);
+/* 校验态：:user-invalid（交互后才判 invalid，现代引擎）为主通道；
+   显式 [data-icen-invalid] 由 behavior 驱动；原生回退 :invalid:not(:placeholder-shown) 启发式 */
+.icen-form-input:where(:user-invalid, [data-icen-invalid='true']),
+.icen-form-textarea:where(:user-invalid, [data-icen-invalid='true']) {
+  border-color: var(--icen-token-error);
+}
+.icen-form-input:where(:user-invalid, [data-icen-invalid='true']):focus-visible,
+.icen-form-textarea:where(:user-invalid, [data-icen-invalid='true']):focus-visible {
+  border-color: var(--icen-token-error);
   box-shadow: var(--icen-control-error-shadow);
 }
+@supports not selector(:user-invalid) {
+  .icen-form-input:where(:invalid:not(:placeholder-shown), [data-icen-invalid='true']),
+  .icen-form-textarea:where(:invalid:not(:placeholder-shown), [data-icen-invalid='true']) {
+    border-color: var(--icen-token-error);
+  }
+  .icen-form-input:where(:invalid:not(:placeholder-shown), [data-icen-invalid='true']):focus-visible,
+  .icen-form-textarea:where(:invalid:not(:placeholder-shown), [data-icen-invalid='true']):focus-visible {
+    border-color: var(--icen-token-error);
+    box-shadow: var(--icen-control-error-shadow);
+  }
+}
 
 /* 尺寸变体 */
-.form-input--sm, .form-textarea--sm { height: var(--density-input-height-sm); font-size: var(--density-font-size-sm); }
-.form-input--lg, .form-textarea--lg { height: var(--density-input-height-lg); font-size: var(--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); }
 
-.form-hint {
-  font-size: var(--density-font-size-xs);
-  color: var(--token-text-faint);
+.icen-form-hint {
+  font-size: var(--icen-density-font-size-xs);
+  color: var(--icen-token-text-faint);
   line-height: 1.4;
 }
-.form-error {
-  font-size: var(--density-font-size-xs);
-  color: var(--token-error);
+.icen-form-error {
+  font-size: var(--icen-density-font-size-xs);
+  color: var(--icen-token-error);
   line-height: 1.4;
 }
-.form-field[data-invalid='true'] .form-label { color: var(--token-error); }
+.icen-form-field[data-icen-invalid='true'] .icen-form-label { color: var(--icen-token-error); }
 
 /* ── 表单增强 ── */
 
 /* 水平布局（label 与控件同行） */
-.form-field--horizontal {
+.icen-form-field--horizontal {
   display: flex;
   flex-direction: row;
   align-items: flex-start;
-  gap: var(--density-space-md);
+  gap: var(--icen-density-space-md);
 }
-.form-field--horizontal .form-label {
+.icen-form-field--horizontal .icen-form-label {
   flex-shrink: 0;
-  width: 120px;
-  text-align: right;
-  padding-top: calc((var(--density-input-height-md) - 1lh) / 2);
+  inline-size: 120px;
+  text-align: end;
+  padding-top: calc((var(--icen-density-input-height-md) - 1lh) / 2);
 }
-.form-field--horizontal .form-field-control {
+.icen-form-field--horizontal .icen-form-field-control {
   flex: 1;
   min-width: 0;
 }
 
 /* label 带帮助提示图标 */
-.form-label-help {
+.icen-form-label-help {
   display: inline-flex;
   align-items: center;
-  margin-left: 4px;
+  margin-inline-start: 4px;
   width: 14px;
   height: 14px;
-  color: var(--token-text-faint);
+  color: var(--icen-token-text-faint);
   cursor: help;
 }
-.form-label-help svg { width: 12px; height: 12px; }
+.icen-form-label-help svg { width: 12px; height: 12px; }
 
 /* label 带可选标记 */
-.form-label-optional {
-  font-size: var(--density-font-size-2xs);
+.icen-form-label-optional {
+  font-size: var(--icen-density-font-size-2xs);
   font-weight: 400;
-  color: var(--token-text-faint);
-  margin-left: 4px;
+  color: var(--icen-token-text-faint);
+  margin-inline-start: 4px;
 }
 
 /* 表单区块标题 */
-.form-section {
-  padding: var(--density-space-sm) 0;
+.icen-form-section {
+  padding: var(--icen-density-space-sm) 0;
 }
-.form-section-title {
-  font-size: var(--density-font-size-md);
+.icen-form-section-title {
+  font-size: var(--icen-density-font-size-md);
   font-weight: 600;
-  color: var(--token-text);
-  margin: 0 0 var(--density-space-sm);
-  padding-bottom: var(--density-space-xs);
-  border-bottom: 1px solid var(--token-outline-soft);
+  color: var(--icen-token-text);
+  margin: 0 0 var(--icen-density-space-sm);
+  padding-bottom: var(--icen-density-space-xs);
+  border-bottom: 1px solid var(--icen-token-outline-soft);
 }
-.form-section-desc {
-  font-size: var(--density-font-size-sm);
-  color: var(--token-text-muted);
-  margin: calc(-1 * var(--density-space-xs)) 0 var(--density-space-sm);
+.icen-form-section-desc {
+  font-size: var(--icen-density-font-size-sm);
+  color: var(--icen-token-text-muted);
+  margin: calc(-1 * var(--icen-density-space-xs)) 0 var(--icen-density-space-sm);
 }
 
 /* 表单操作区（底部按钮行） */
-.form-actions {
+.icen-form-actions {
   display: flex;
   align-items: center;
-  gap: var(--density-space-sm);
-  padding-top: var(--density-space-sm);
-  border-top: 1px solid var(--token-outline-soft);
+  gap: var(--icen-density-space-sm);
+  padding-top: var(--icen-density-space-sm);
+  border-top: 1px solid var(--icen-token-outline-soft);
 }
-.form-actions--right { justify-content: flex-end; }
-.form-actions--center { justify-content: center; }
-.form-actions--split { justify-content: space-between; }
+.icen-form-actions--right { justify-content: flex-end; }
+.icen-form-actions--center { justify-content: center; }
+.icen-form-actions--split { justify-content: space-between; }
 
 /* 行内表单（紧凑，单行多字段） */
-.form--inline {
+.icen-form--inline {
   flex-direction: row;
   align-items: flex-end;
-  gap: var(--density-space-sm);
+  gap: var(--icen-density-space-sm);
   flex-wrap: wrap;
 }
-.form--inline .form-field {
+.icen-form--inline .icen-form-field {
   flex: 1;
   min-width: 160px;
 }
 
 /* 字段网格（多列布局） */
-.form-grid {
+.icen-form-grid {
   display: grid;
   grid-template-columns: repeat(var(--form-cols, 2), 1fr);
-  gap: var(--density-space-md);
+  gap: var(--icen-density-space-md);
 }
-.form-grid .form-field--full { grid-column: 1 / -1; }
+.icen-form-grid .icen-form-field--full { grid-column: 1 / -1; }
 
 /* 字段成功态 */
-.form-field[data-valid='true'] .form-label::after {
-  content: '✓';
-  margin-left: 4px;
-  color: var(--token-success);
+.icen-form-field[data-icen-valid='true'] .icen-form-label::after {
+  content: '';
+  display: inline-block;
+  inline-size: 16px;
+  block-size: 16px;
+  flex: none;
+  vertical-align: middle;
+  background: currentColor;
+  mask: var(--icen-token-icon-check) center / contain no-repeat;
+  margin-inline-start: 4px;
+  color: var(--icen-token-success);
   font-weight: 700;
 }
 
 /* 表单加载遮罩 */
-.form-loading {
+.icen-form-loading {
   position: relative;
   pointer-events: none;
   opacity: 0.6;
 }
-.form-loading::after {
+.icen-form-loading::after {
   content: '';
   position: absolute;
   top: 50%;
-  left: 50%;
+  left: 50%; /* guard:allow-physical 圆心居中：left 50% + 负边距 任意方向下均为中心 */
   width: 24px;
   height: 24px;
-  margin: -12px 0 0 -12px;
-  border: 2px solid color-mix(in srgb, var(--token-accent) 30%, transparent);
-  border-top-color: var(--token-accent);
+  margin: -12px 0 0 -12px; /* guard:allow-physical 居中负边距与 left 50% 配套（物理坐标对），RTL 下同样居中 */
+  border: 2px solid color-mix(in srgb, var(--icen-token-accent) 30%, transparent);
+  border-top-color: var(--icen-token-accent);
   border-radius: 50%;
   animation: icen-spin var(--form-loading-duration, 0.8s) linear infinite;
 }
 
 /* ── 页面级横幅：操作结果 / 引导提示 ──
    与 feedback.css 的 alert 共享同一套视觉 token（--banner-* 仅在底色/文字/描边上分流） */
-.banner-ok,
-.banner-err {
+.icen-banner-ok,
+.icen-banner-err {
   display: flex;
   align-items: flex-start;
-  gap: var(--density-space-sm);
-  padding: var(--density-space-sm) var(--density-space-md);
-  margin-bottom: var(--density-space-md);
-  border-radius: var(--radius-md);
-  font-size: var(--density-font-size-sm);
+  gap: var(--icen-density-space-sm);
+  padding: var(--icen-density-space-sm) var(--icen-density-space-md);
+  margin-bottom: var(--icen-density-space-md);
+  border-radius: var(--icen-radius-md);
+  font-size: var(--icen-density-font-size-sm);
   line-height: 1.5;
   border: 1px solid transparent;
   background: var(--banner-bg);
   color: var(--banner-fg);
   border-color: var(--banner-border);
 }
-.banner-ok {
-  --banner-bg: var(--token-success-muted);
-  --banner-fg: var(--token-success);
-  --banner-border: color-mix(in srgb, var(--token-success) 25%, transparent);
+.icen-banner-ok {
+  --banner-bg: var(--icen-token-success-muted);
+  --banner-fg: var(--icen-token-success);
+  --banner-border: color-mix(in srgb, var(--icen-token-success) 25%, transparent);
 }
-.banner-err {
-  --banner-bg: var(--token-error-muted);
-  --banner-fg: var(--token-error);
-  --banner-border: color-mix(in srgb, var(--token-error) 25%, transparent);
+.icen-banner-err {
+  --banner-bg: var(--icen-token-error-muted);
+  --banner-fg: var(--icen-token-error);
+  --banner-border: color-mix(in srgb, var(--icen-token-error) 25%, transparent);
 }
 /* block 模式：横向占满，带图标位 */
-.banner-block {
+.icen-banner-block {
   align-items: center;
-  padding: var(--density-space-md);
+  padding: var(--icen-density-space-md);
+}
+
 }

package/dist/components/form.d.mts

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