@icen.ai/ui 0.9.0 → 0.10.0

package/dist/components/form-validate.css

@@ -0,0 +1,120 @@
+@layer icen.components {
+/*
+ * form-validate.css — 表单校验呈现层（与 behaviors/form-validate.ts 配套）
+ *
+ * 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 var(--icen-token-error);
+  border-radius: var(--icen-radius-md);
+  background: var(--icen-token-error-soft, var(--icen-token-bg-soft));
+  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-weight: 600;
+  color: var(--icen-token-error);
+}
+
+.icen-form-validate-summary-list {
+  margin: 0;
+  padding-inline-start: 1.2em;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.icen-form-validate-summary-item { color: var(--icen-token-error); text-decoration: none; }
+.icen-form-validate-summary-item:hover { text-decoration: underline; }
+
+/* ── 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;
+}
+
+}

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,283 @@
  *   - 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-md); }
 
-.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);
+.icen-form-label {
+  font-size: var(--icen-density-font-size-sm);
+  color: var(--icen-token-text-muted);
   letter-spacing: 0.02em;
   font-weight: 500;
 }
-.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-density-space-md);
+  height: var(--icen-density-input-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);
+  font-family: var(--icen-font-body);
+  font-size: var(--icen-density-font-size-md);
   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);
+  padding: var(--icen-density-space-sm) var(--icen-density-space-md);
   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: color-mix(in srgb, var(--icen-token-text-faint) 60%, transparent);
 }
-.form-input:hover,
-.form-textarea:hover {
+.icen-form-input:hover,
+.icen-form-textarea:hover {
   border-color: var(--icen-hover-border);
 }
-.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);
 }
 
-/* 校验态：原生 :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-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); }
 
-.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/icon.css

@@ -0,0 +1,102 @@
+@layer icen.components {
+/* Interface symbols and quiet actions. SVG is usable without this CSS; this file
+ * adds optical alignment, fixed action hit areas and progressive disclosure.
+ * data-icen-reveal on a labelled secondary action: parent hover/focus reveals it;
+ * keyboard and coarse pointers always retain access. No layout shift on reveal. */
+.icen-symbol { display: inline-block; flex: none; vertical-align: middle; overflow: visible; }
+.icen-icon-action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  inline-size: var(--icen-density-input-height-sm);
+  block-size: var(--icen-density-input-height-sm);
+  padding: 0;
+  border: 0;
+  border-radius: var(--icen-radius-sm);
+  background: transparent;
+  color: var(--icen-token-text-muted);
+  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:disabled { opacity: var(--icen-disabled-opacity); pointer-events: none; }
+@media (hover: hover) and (pointer: fine) {
+  .icen-icon-action[data-icen-reveal] { opacity: 0; }
+  :hover > .icen-icon-action[data-icen-reveal],
+  :focus-within > .icen-icon-action[data-icen-reveal],
+  .icen-icon-action[data-icen-reveal]:focus-visible { opacity: 1; }
+}
+@media (pointer: coarse) {
+  .icen-icon-action { min-inline-size: 44px; min-block-size: 44px; }
+}
+@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; }
+
+/* Search action: enhanceSearchField(input) adds these classes to a dedicated
+   wrapper and input, plus one labelled button with a decorative SVG.
+   Zero specificity positioning preserves component sticky search headers. */
+:where(.icen-search-field) { position: relative; }
+.icen-search-input::-webkit-search-cancel-button,
+.icen-search-input::-webkit-search-decoration {
+  -webkit-appearance: none;
+  appearance: none;
+}
+.icen-search-clear {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 24px;
+  block-size: 24px;
+  flex-shrink: 0;
+  padding: 0;
+  border: 0;
+  border-radius: var(--icen-radius-sm);
+  color: var(--icen-token-text-muted);
+  background: transparent;
+  cursor: pointer;
+  transition: color var(--icen-tx-fast), background var(--icen-tx-fast);
+}
+.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);
+}
+.icen-search-clear:focus-visible {
+  outline: 2px solid var(--icen-token-accent);
+  outline-offset: -2px;
+}
+@media (prefers-reduced-motion: reduce) {
+  .icen-search-clear { transition: none; }
+}
+
+/* Feedback actions keep their label's footprint while work is pending. */
+.icen-toast-action, .icen-notification-action { position: relative; }
+.icen-feedback-action-label { display: inline-block; }
+[aria-busy="true"] > .icen-feedback-action-label { opacity: 0; }
+.icen-feedback-action-spinner { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
+.icen-feedback-action-spinner > svg { inline-size: 16px; block-size: 16px; animation: icen-spin calc(var(--icen-duration-normal) * 4) linear infinite; }
+.icen-toast-action[aria-disabled="true"], .icen-notification-action[aria-disabled="true"] { cursor: progress; }
+.icen-toast-action[aria-disabled="true"]:not([aria-busy="true"]), .icen-notification-action[aria-disabled="true"]:not([aria-busy="true"]) { opacity: var(--icen-disabled-opacity); }
+.icen-feedback-error { display: block; margin-block-start: var(--icen-density-space-xs); color: var(--icen-token-error); font-size: var(--icen-density-font-size-sm); line-height: 1.5; }
+:root[data-icen-style="pixel"] .icen-feedback-action-spinner > svg { animation-timing-function: steps(8,end); }
+@media (prefers-reduced-motion: reduce) { .icen-feedback-action-spinner > svg { animation: none; } }
+.icen-suggestion-status { display: flex; align-items: center; gap: var(--icen-density-space-xs); padding: var(--icen-density-space-sm); color: var(--icen-token-text-muted); font-size: var(--icen-density-font-size-sm); line-height: var(--icen-line-height-body); }
+.icen-suggestion-symbol { display: inline-flex; align-items: center; justify-content: center; inline-size: 20px; block-size: 20px; flex: 0 0 20px; }
+.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); } }
+@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; } }
+
+}

package/dist/components/icon.mjs

@@ -0,0 +1,3 @@
+// @icen.ai/ui — kit: icon（CSS + behavior 一行入口；构建产物，勿手改）
+import './icon.css';
+export { ICON_PATHS, iconPath, iconHTML, createIcon, registerIcon } from '../behaviors/icons.mjs';