@icen.ai/ui 0.2.0 → 0.3.0

package/dist/components/feedback.css

@@ -1,70 +1,136 @@
 /*
  * @icen.ai/ui — Component: feedback（反馈族）
+ *
  * 包含：alert（四态内联横幅）/ result（终态页）/ progress（线性进度）/ spinner（加载圈）/ skeleton（占位块）
- * 规格源自 opengal src/presentation/ui/feedback/toast.tsx 的 Alert 与 data/exhibit.tsx 的 Result、
- * data/display.tsx 的 Progress / Spinner / Skeleton。
- * base.css 未提供 spin / skeleton-pulse 关键帧，在本文件自带。
+ * 规格源自 opengal feedback/toast.tsx 与 data/exhibit.tsx、data/display.tsx。
  */
 
 /* ══════════════ alert · 内联横幅 ══════════════ */
 .alert {
-  display: flex; align-items: flex-start; gap: 12px;
-  padding: 12px;
-  border-radius: var(--radius-lg);
+  display: flex;
+  align-items: flex-start;
+  gap: var(--density-space-sm);
+  padding: var(--density-space-sm);
+  border-radius: var(--radius-md);
   box-shadow: var(--token-shadow-inset);
   border: 1px solid transparent;
+  font-size: var(--density-font-size-sm);
 }
-.alert--info    { background: var(--token-info-muted);    border-color: color-mix(in srgb, var(--token-info) 15%, transparent); }
-.alert--success { background: var(--token-success-muted); border-color: color-mix(in srgb, var(--token-success) 15%, transparent); }
-.alert--warning { background: var(--token-warning-muted); border-color: color-mix(in srgb, var(--token-warning) 15%, transparent); }
-.alert--error   { background: var(--token-error-muted);   border-color: color-mix(in srgb, var(--token-error) 15%, transparent); }
+.alert--info    { background: var(--token-info-muted);    border-color: color-mix(in srgb, var(--token-info) 18%, transparent); }
+.alert--success { background: var(--token-success-muted); border-color: color-mix(in srgb, var(--token-success) 18%, transparent); }
+.alert--warning { background: var(--token-warning-muted); border-color: color-mix(in srgb, var(--token-warning) 18%, transparent); }
+.alert--error   { background: var(--token-error-muted);   border-color: color-mix(in srgb, var(--token-error) 18%, transparent); }
 
-.alert-icon { flex-shrink: 0; margin-top: 2px; display: flex; }
+.alert-icon {
+  flex-shrink: 0;
+  margin-top: 1px;
+  display: flex;
+}
 .alert-icon svg { width: 16px; height: 16px; }
-.alert--info .alert-icon,       .alert--info .alert-title    { color: var(--token-info); }
-.alert--success .alert-icon,    .alert--success .alert-title { color: var(--token-success); }
-.alert--warning .alert-icon,    .alert--warning .alert-title { color: var(--token-warning); }
-.alert--error .alert-icon,      .alert--error .alert-title   { color: var(--token-error); }
+.alert--info .alert-icon,    .alert--info .alert-title    { color: var(--token-info); }
+.alert--success .alert-icon, .alert--success .alert-title { color: var(--token-success); }
+.alert--warning .alert-icon, .alert--warning .alert-title { color: var(--token-warning); }
+.alert--error .alert-icon,   .alert--error .alert-title   { color: var(--token-error); }
 
 .alert-content { flex: 1; min-width: 0; }
-.alert-title { font-size: 13px; font-weight: 500; margin: 0; }
-.alert-body { font-size: 12px; color: var(--token-text-muted); line-height: 1.6; }
+.alert-title {
+  font-size: var(--density-font-size-md);
+  font-weight: 500;
+  margin: 0;
+  line-height: 1.4;
+}
+.alert-body {
+  font-size: var(--density-font-size-sm);
+  color: var(--token-text-muted);
+  line-height: 1.5;
+  margin-top: 2px;
+}
 .alert-close {
-  margin-left: auto; flex-shrink: 0;
-  display: flex; align-items: center; justify-content: center;
-  padding: 2px; border: 0; border-radius: var(--radius-xs);
-  background: none; color: var(--token-text-faint); cursor: pointer;
+  margin-left: auto;
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-xs);
+  background: none;
+  color: var(--token-text-faint);
+  cursor: pointer;
+  transition:
+    background-color var(--icen-tx-fast),
+    color var(--icen-tx-fast);
+}
+.alert-close:hover {
+  color: var(--token-text);
+  background: color-mix(in srgb, var(--token-text) 6%, transparent);
+}
+.alert-close:focus-visible {
+  outline: none;
+  box-shadow: var(--icen-ring);
 }
-.alert-close:hover { color: var(--token-text); background: color-mix(in srgb, var(--token-text) 6%, transparent); }
 .alert-close svg { width: 14px; height: 14px; }
 
 /* ══════════════ result · 终态页 ══════════════ */
 .result {
-  display: flex; flex-direction: column; align-items: center; justify-content: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
   text-align: center;
-  padding: 40px 24px;
+  padding: 40px var(--density-space-md);
 }
 .result-icon {
-  width: 64px; height: 64px;
+  width: 64px;
+  height: 64px;
   border-radius: var(--radius-full);
-  display: flex; align-items: center; justify-content: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   box-shadow: var(--token-shadow-inset);
   border: 1px solid transparent;
-  margin-bottom: 16px;
+  margin-bottom: var(--density-space-md);
 }
 .result-icon svg { width: 28px; height: 28px; }
-.result--success .result-icon { background: var(--token-success-muted); color: var(--token-success); border-color: color-mix(in srgb, var(--token-success) 10%, transparent); }
-.result--error   .result-icon { background: var(--token-error-muted);   color: var(--token-error);   border-color: color-mix(in srgb, var(--token-error) 10%, transparent); }
-.result--warning .result-icon { background: var(--token-warning-muted); color: var(--token-warning); border-color: color-mix(in srgb, var(--token-warning) 10%, transparent); }
-.result--info    .result-icon { background: var(--token-info-muted);    color: var(--token-info);    border-color: color-mix(in srgb, var(--token-info) 10%, transparent); }
-.result-title { font-size: 17px; font-weight: 600; color: var(--token-text); margin: 0; }
-.result-desc { font-size: 13px; color: var(--token-text-muted); margin: 4px 0 0; max-width: 360px; }
-.result-extra { display: flex; align-items: center; gap: 8px; margin-top: 20px; }
+.result--success .result-icon { background: var(--token-success-muted); color: var(--token-success); border-color: color-mix(in srgb, var(--token-success) 12%, transparent); }
+.result--error   .result-icon { background: var(--token-error-muted);   color: var(--token-error);   border-color: color-mix(in srgb, var(--token-error) 12%, transparent); }
+.result--warning .result-icon { background: var(--token-warning-muted); color: var(--token-warning); border-color: color-mix(in srgb, var(--token-warning) 12%, transparent); }
+.result--info    .result-icon { background: var(--token-info-muted);    color: var(--token-info);    border-color: color-mix(in srgb, var(--token-info) 12%, transparent); }
+
+.result-title {
+  font-size: var(--density-font-size-lg);
+  font-weight: 600;
+  color: var(--token-text);
+  margin: 0;
+  font-family: var(--font-heading);
+  line-height: 1.3;
+}
+.result-desc {
+  font-size: var(--density-font-size-sm);
+  color: var(--token-text-muted);
+  margin: var(--density-space-xs) 0 0;
+  max-width: 360px;
+  line-height: 1.5;
+}
+.result-extra {
+  display: flex;
+  align-items: center;
+  gap: var(--density-space-sm);
+  margin-top: var(--density-space-md);
+}
 
 /* ══════════════ progress · 线性进度 ══════════════ */
-.progress { display: flex; align-items: center; gap: 8px; }
+.progress {
+  display: flex;
+  align-items: center;
+  gap: var(--density-space-sm);
+}
 .progress-track {
-  flex: 1; height: 6px; overflow: hidden;
+  flex: 1;
+  height: 6px;
+  overflow: hidden;
   border-radius: var(--radius-full);
   background: color-mix(in srgb, var(--token-line-soft) 40%, transparent);
 }
@@ -72,35 +138,80 @@
   height: 100%;
   border-radius: var(--radius-full);
   background: var(--token-accent);
-  transition: width 500ms var(--ease-out);
+  transition: width var(--icen-tx-slow);
 }
+.progress--success .progress-bar { background: var(--token-success); }
+.progress--warning .progress-bar { background: var(--token-warning); }
+.progress--error   .progress-bar { background: var(--token-error); }
+
+/* 不定进度（spinner 替代品）：bar 来回扫动 */
+.progress--indeterminate .progress-bar {
+  width: 35% !important;
+  animation: progress-sweep 1.4s var(--ease-in-out, var(--ease-out)) infinite;
+}
+@keyframes progress-sweep {
+  0%   { transform: translateX(-100%); }
+  100% { transform: translateX(300%); }
+}
+
 .progress--sm .progress-track { height: 4px; }
-.progress-label { font-size: 11px; color: var(--token-text-muted); font-variant-numeric: tabular-nums; }
+.progress--lg .progress-track { height: 8px; }
+.progress-label {
+  font-size: var(--density-font-size-xs);
+  color: var(--token-text-muted);
+  font-variant-numeric: tabular-nums;
+  flex-shrink: 0;
+}
 
 /* ══════════════ spinner · 加载圈 ══════════════ */
 .spinner {
-  width: 20px; height: 20px;
-  border: 2px solid var(--token-accent);
-  border-top-color: transparent;
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  border: 2px solid color-mix(in srgb, var(--token-accent) 30%, transparent);
+  border-top-color: var(--token-accent);
   border-radius: var(--radius-full);
-  animation: icen-spin 1s linear infinite;
+  animation: icen-spin 0.8s linear infinite;
 }
-.spinner--sm { width: 16px; height: 16px; }
-.spinner--lg { width: 32px; height: 32px; }
+.spinner--sm { width: 14px; height: 14px; border-width: 2px; }
+.spinner--lg { width: 32px; height: 32px; border-width: 3px; }
+.spinner--success { border-color: color-mix(in srgb, var(--token-success) 30%, transparent); border-top-color: var(--token-success); }
+.spinner--error   { border-color: color-mix(in srgb, var(--token-error) 30%, transparent); border-top-color: var(--token-error); }
+.spinner--muted   { border-color: color-mix(in srgb, var(--token-text-faint) 30%, transparent); border-top-color: var(--token-text-faint); }
 
-@keyframes icen-spin {
-  to { transform: rotate(360deg); }
+@keyframes icen-spin { to { transform: rotate(360deg); } }
+
+/* 文字+spinner 组合 */
+.spinner-wrap {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--density-space-xs);
+  font-size: var(--density-font-size-sm);
+  color: var(--token-text-muted);
 }
 
 /* ══════════════ skeleton · 占位块 ══════════════ */
 .skeleton {
-  background: var(--token-control-hover);
+  display: block;
+  background: color-mix(in srgb, var(--token-text) 8%, transparent);
   border-radius: var(--radius-sm);
   animation: icen-skeleton-pulse 2s ease-in-out infinite;
 }
 .skeleton--circle { border-radius: var(--radius-full); }
+.skeleton--text {
+  height: 0.85em;
+  margin: 0.25em 0;
+}
+.skeleton--text:last-child { width: 60%; }
 
 @keyframes icen-skeleton-pulse {
   0%, 100% { opacity: 1; }
   50% { opacity: 0.5; }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .progress-bar { transition: none; }
+  .progress--indeterminate .progress-bar { animation: none; width: 100% !important; }
+  .spinner { animation-duration: 2s; }
+  .skeleton { animation: none; opacity: 0.6; }
+}

package/dist/components/form.css

@@ -1,31 +1,148 @@
 /*
- * @icen.ai/ui — Component: form（表单字段/输入/错误与成功提示）
+ * @icen.ai/ui — Component: form（表单结构：字段组 / label / hint / 横幅提示）
+ *
+ * 与 input.css 的 wrapper 基元互补：
+ *   - input.css 处理"单个 input 的视觉外壳"
+ *   - 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 -->
+ *     </fieldset>
+ *   </form>
+ *
+ *   <div class="banner-ok [.banner-block]">已保存</div>
+ *   <div class="banner-err [.banner-block]">提交失败：网络错误</div>
+ *
+ * form-input 同时支持 :invalid 与 [data-invalid=true]，behavior 二选一驱动。
  */
 
-.form-field { margin-bottom: 18px; }
-.form-label { display: block; font-size: 12px; color: var(--token-text-muted); margin-bottom: 6px; letter-spacing: 1px; }
-.form-input {
-  width: 100%; padding: 11px 14px;
-  background: var(--token-bg); color: var(--token-text);
-  border: 1px solid var(--token-line-soft); border-radius: var(--radius-sm);
-  font-family: var(--font-mono); font-size: 14px;
-  outline: none; transition: border-color var(--duration-fast) var(--ease-out);
+.form { display: flex; flex-direction: column; gap: var(--density-space-md); }
+
+.form-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--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;
+}
+.form-label .req { color: var(--token-error); margin-left: 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);
+  outline: none;
+  transition:
+    border-color var(--icen-tx-fast),
+    box-shadow var(--icen-tx-fast),
+    background-color var(--icen-tx-fast);
+}
+.form-textarea {
+  height: auto;
+  min-height: calc(4 * 1.5em + 24px);
+  padding: var(--density-space-sm) var(--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);
+}
+.form-input:hover,
+.form-textarea:hover {
+  border-color: var(--icen-hover-border);
+}
+.form-input:focus-visible,
+.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'] {
+  opacity: var(--icen-disabled-opacity);
+  cursor: not-allowed;
+  background: var(--token-bg-soft);
 }
-.form-input:focus { border-color: var(--token-accent); }
-.form-input::placeholder { color: var(--token-text-faint); }
 
+/* 校验态：原生 :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);
+  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); }
+
+.form-hint {
+  font-size: var(--density-font-size-xs);
+  color: var(--token-text-faint);
+  line-height: 1.4;
+}
 .form-error {
-  background: color-mix(in srgb, var(--token-error) 7%, transparent); color: var(--token-error);
-  border: 1px solid color-mix(in srgb, var(--token-error) 25%, transparent); border-radius: var(--radius-sm);
-  padding: 10px 14px; font-size: 12.5px; margin-bottom: 16px;
-  font-family: var(--font-heading);
+  font-size: var(--density-font-size-xs);
+  color: var(--token-error);
+  line-height: 1.4;
 }
-.form-ok {
-  background: color-mix(in srgb, var(--token-success) 8%, transparent); color: var(--token-success);
-  border: 1px solid color-mix(in srgb, var(--token-success) 25%, transparent); border-radius: var(--radius-sm);
-  padding: 10px 14px; font-size: 12.5px; margin-bottom: 16px;
-  font-family: var(--font-heading);
+.form-field[data-invalid='true'] .form-label { color: var(--token-error); }
+
+/* ── 页面级横幅：操作结果 / 引导提示 ── */
+.banner-ok,
+.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);
+  line-height: 1.5;
+  border: 1px solid transparent;
+}
+.banner-ok {
+  background: var(--token-success-muted);
+  color: var(--token-success);
+  border-color: color-mix(in srgb, var(--token-success) 25%, transparent);
+}
+.banner-err {
+  background: var(--token-error-muted);
+  color: var(--token-error);
+  border-color: color-mix(in srgb, var(--token-error) 25%, transparent);
+}
+/* block 模式：横向占满，带图标位 */
+.banner-block {
+  align-items: center;
+  padding: var(--density-space-md);
 }
 
-/* 页面级横幅（与表单提示同族，用于操作结果/引导提示） */
-.banner-ok, .banner-err { margin-bottom: 20px; }
+@media (prefers-reduced-motion: reduce) {
+  .banner-ok, .banner-err { transition: none; }
+}