@icen.ai/ui 0.3.0 → 0.5.0

package/dist/components/feedback.css

@@ -15,6 +15,8 @@
   box-shadow: var(--token-shadow-inset);
   border: 1px solid transparent;
   font-size: var(--density-font-size-sm);
+  position: relative;
+  overflow: hidden;
 }
 .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); }
@@ -209,9 +211,245 @@
   50% { opacity: 0.5; }
 }
 
+/* ── alert 增强 ── */
+
+/* 可操作横幅（含按钮） */
+.alert-actions {
+  display: flex;
+  gap: var(--density-space-xs);
+  margin-top: var(--density-space-xs);
+}
+.alert--banner {
+  border-radius: 0;
+  border-left: none;
+  border-right: none;
+  border-top: none;
+}
+.alert--inline {
+  display: inline-flex;
+  padding: 2px var(--density-space-sm);
+  font-size: var(--density-font-size-xs);
+}
+.alert--inline .alert-close { width: 16px; height: 16px; }
+
+/* ── result 增强 ── */
+.result-list {
+  margin: var(--density-space-sm) 0 0;
+  padding: var(--density-space-sm);
+  background: var(--token-bg-soft);
+  border-radius: var(--radius-md);
+  font-size: var(--density-font-size-sm);
+  color: var(--token-text-muted);
+  text-align: left;
+  max-width: 400px;
+  max-height: 200px;
+  overflow-y: auto;
+}
+.result-list-item {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--density-space-xs);
+  padding: 2px 0;
+  font-variant-numeric: tabular-nums;
+  word-break: break-all;
+}
+
+/* ── progress 环形 ── */
+.progress-ring-wrap {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+.progress-ring {
+  transform: rotate(-90deg);
+}
+.progress-ring-track {
+  fill: none;
+  stroke: var(--token-fill-2);
+  stroke-width: 4;
+}
+.progress-ring-fill {
+  fill: none;
+  stroke: var(--token-accent);
+  stroke-width: 4;
+  stroke-linecap: round;
+  transition: stroke-dashoffset var(--icen-tx-slow) var(--ease-out);
+}
+.progress-ring-text {
+  position: absolute;
+  font-size: var(--density-font-size-sm);
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  color: var(--token-text);
+}
+.progress-ring--sm .progress-ring-track,
+.progress-ring--sm .progress-ring-fill { stroke-width: 3; }
+.progress-ring--lg .progress-ring-track,
+.progress-ring--lg .progress-ring-fill { stroke-width: 6; }
+.progress-ring--success .progress-ring-fill { stroke: var(--token-success); }
+.progress-ring--warning .progress-ring-fill { stroke: var(--token-warning); }
+.progress-ring--error   .progress-ring-fill { stroke: var(--token-error); }
+
+/* progress 条纹动画 */
+.progress--striped .progress-bar {
+  background-image: linear-gradient(
+    45deg,
+    color-mix(in srgb, var(--token-card-strong) 20%, transparent) 25%,
+    transparent 25%,
+    transparent 50%,
+    color-mix(in srgb, var(--token-card-strong) 20%, transparent) 50%,
+    color-mix(in srgb, var(--token-card-strong) 20%, transparent) 75%,
+    transparent 75%,
+    transparent
+  );
+  background-size: 20px 20px;
+  animation: progress-stripe 1s linear infinite;
+}
+@keyframes progress-stripe {
+  from { background-position: 0 0; }
+  to { background-position: 20px 0; }
+}
+
+/* progress 渐变 */
+.progress--gradient .progress-bar {
+  background: linear-gradient(90deg,
+    var(--token-accent),
+    color-mix(in srgb, var(--token-accent) 60%, var(--token-info)));
+}
+
+/* ── spinner 变体 ── */
+
+/* 点阵 spinner */
+.spinner--dots {
+  width: auto;
+  height: auto;
+  border: none;
+  display: inline-flex;
+  gap: 3px;
+  background: none;
+  animation: none;
+}
+.spinner--dots span {
+  display: block;
+  width: 6px;
+  height: 6px;
+  border-radius: var(--radius-full);
+  background: var(--token-accent);
+  animation: spinner-dot 1.4s ease-in-out infinite;
+}
+.spinner--dots span:nth-child(2) { animation-delay: 0.2s; }
+.spinner--dots span:nth-child(3) { animation-delay: 0.4s; }
+@keyframes spinner-dot {
+  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
+  40% { opacity: 1; transform: scale(1); }
+}
+
+/* 条形 spinner */
+.spinner--bars {
+  width: auto;
+  height: auto;
+  border: none;
+  display: inline-flex;
+  align-items: flex-end;
+  gap: 2px;
+  background: none;
+  animation: none;
+}
+.spinner--bars span {
+  display: block;
+  width: 3px;
+  height: 100%;
+  background: var(--token-accent);
+  border-radius: 1px;
+  animation: spinner-bar 1s ease-in-out infinite;
+}
+.spinner--bars span:nth-child(2) { animation-delay: 0.1s; }
+.spinner--bars span:nth-child(3) { animation-delay: 0.2s; }
+.spinner--bars span:nth-child(4) { animation-delay: 0.3s; }
+@keyframes spinner-bar {
+  0%, 100% { transform: scaleY(0.4); }
+  50% { transform: scaleY(1); }
+}
+
+/* 全屏遮罩 spinner */
+.spinner-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: var(--z-overlay, 9999);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: color-mix(in srgb, var(--token-card-strong) 70%, transparent);
+  backdrop-filter: blur(2px);
+  -webkit-backdrop-filter: blur(2px);
+  flex-direction: column;
+  gap: var(--density-space-md);
+}
+.spinner-overlay-text {
+  font-size: var(--density-font-size-sm);
+  color: var(--token-text-muted);
+}
+
+/* ── skeleton 复合体 ── */
+
+/* 骨架文本（多行模拟） */
+.skeleton-text-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--density-space-xs);
+  flex: 1;
+}
+
+/* 头像 + 文本行组合（评论/消息占位） */
+.skeleton-media {
+  display: flex;
+  align-items: center;
+  gap: var(--density-space-sm);
+}
+
+/* 表格骨架 */
+.skeleton-table {
+  display: flex;
+  flex-direction: column;
+  gap: var(--density-space-sm);
+}
+.skeleton-table-row {
+  display: flex;
+  gap: var(--density-space-sm);
+}
+.skeleton-table-row > * {
+  height: 12px;
+  border-radius: var(--radius-xs);
+  background: color-mix(in srgb, var(--token-text) 8%, transparent);
+  animation: icen-skeleton-pulse 2s ease-in-out infinite;
+}
+
+/* 骨架波纹变体（shimmer，区别于 pulse） */
+.skeleton--shimmer {
+  background: linear-gradient(
+    90deg,
+    color-mix(in srgb, var(--token-text) 6%, transparent) 0%,
+    color-mix(in srgb, var(--token-text) 12%, transparent) 50%,
+    color-mix(in srgb, var(--token-text) 6%, transparent) 100%
+  );
+  background-size: 200% 100%;
+  animation: skeleton-shimmer 1.5s ease-in-out infinite;
+}
+@keyframes skeleton-shimmer {
+  from { background-position: 200% 0; }
+  to { background-position: -200% 0; }
+}
+
 @media (prefers-reduced-motion: reduce) {
   .progress-bar { transition: none; }
   .progress--indeterminate .progress-bar { animation: none; width: 100% !important; }
+  .progress--striped .progress-bar { animation: none; }
+  .progress-ring-fill { transition: none; }
   .spinner { animation-duration: 2s; }
-  .skeleton { animation: none; opacity: 0.6; }
+  .spinner--dots span,
+  .spinner--bars span { animation: none; }
+  .skeleton,
+  .skeleton-table-row > * { animation: none; opacity: 0.6; }
+  .skeleton--shimmer { animation: none; }
 }

package/dist/components/form.css

@@ -114,6 +114,125 @@
 }
 .form-field[data-invalid='true'] .form-label { color: var(--token-error); }
 
+/* ── 表单增强 ── */
+
+/* 水平布局（label 与控件同行） */
+.form-field--horizontal {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: var(--density-space-md);
+}
+.form-field--horizontal .form-label {
+  flex-shrink: 0;
+  width: 120px;
+  text-align: right;
+  padding-top: calc((var(--density-input-height-md) - 1lh) / 2);
+}
+.form-field--horizontal .form-field-control {
+  flex: 1;
+  min-width: 0;
+}
+
+/* label 带帮助提示图标 */
+.form-label-help {
+  display: inline-flex;
+  align-items: center;
+  margin-left: 4px;
+  width: 14px;
+  height: 14px;
+  color: var(--token-text-faint);
+  cursor: help;
+}
+.form-label-help svg { width: 12px; height: 12px; }
+
+/* label 带可选标记 */
+.form-label-optional {
+  font-size: 10px;
+  font-weight: 400;
+  color: var(--token-text-faint);
+  margin-left: 4px;
+}
+
+/* 表单区块标题 */
+.form-section {
+  padding: var(--density-space-sm) 0;
+}
+.form-section-title {
+  font-size: var(--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);
+}
+.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);
+}
+
+/* 表单操作区（底部按钮行） */
+.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);
+}
+.form-actions--right { justify-content: flex-end; }
+.form-actions--center { justify-content: center; }
+.form-actions--split { justify-content: space-between; }
+
+/* 行内表单（紧凑，单行多字段） */
+.form--inline {
+  flex-direction: row;
+  align-items: flex-end;
+  gap: var(--density-space-sm);
+  flex-wrap: wrap;
+}
+.form--inline .form-field {
+  flex: 1;
+  min-width: 160px;
+}
+
+/* 字段网格（多列布局） */
+.form-grid {
+  display: grid;
+  grid-template-columns: repeat(var(--form-cols, 2), 1fr);
+  gap: var(--density-space-md);
+}
+.form-grid .form-field--full { grid-column: 1 / -1; }
+
+/* 字段成功态 */
+.form-field[data-valid='true'] .form-label::after {
+  content: '✓';
+  margin-left: 4px;
+  color: var(--token-success);
+  font-weight: 700;
+}
+
+/* 表单加载遮罩 */
+.form-loading {
+  position: relative;
+  pointer-events: none;
+  opacity: 0.6;
+}
+.form-loading::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  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);
+  border-radius: 50%;
+  animation: form-loading-spin 0.8s linear infinite;
+}
+@keyframes form-loading-spin { to { transform: rotate(360deg); } }
+
 /* ── 页面级横幅：操作结果 / 引导提示 ── */
 .banner-ok,
 .banner-err {

package/dist/components/form.mjs

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

package/dist/components/input.css

@@ -188,7 +188,19 @@
   color: color-mix(in srgb, var(--token-text-faint) 60%, transparent);
 }
 
-/* 字符计数（behavior 可挂到 .textarea-wrap 内尾部） */
+/* 字符计数（behavior 可挂到 .input-wrap 或 .textarea-wrap 内尾部） */
+.input-wrap { position: relative; }
+.input-wrap--has-counter { padding-right: calc(var(--density-space-sm) + 48px); }
+.input-wrap--has-counter .input-counter {
+  position: absolute;
+  right: var(--density-space-sm);
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: var(--density-font-size-xs);
+  color: var(--token-text-faint);
+  font-variant-numeric: tabular-nums;
+  pointer-events: none;
+}
 .input-counter {
   position: absolute;
   right: var(--density-space-sm);
@@ -197,6 +209,17 @@
   color: var(--token-text-faint);
   font-variant-numeric: tabular-nums;
   pointer-events: none;
+  transition: color var(--icen-tx-fast);
 }
+.input-counter.is-warn { color: var(--token-warning); }
+.input-counter.is-error { color: var(--token-error); font-weight: 600; }
+
 .textarea-wrap { position: relative; }
 .textarea-wrap .textarea { padding-bottom: 24px; }
+
+/* 有计数器时的 textarea 底部留空 */
+.textarea-wrap .input-counter {
+  position: absolute;
+  right: var(--density-space-sm);
+  bottom: var(--density-space-xs);
+}

package/dist/components/media.css

@@ -59,6 +59,42 @@
 .avatar-status--busy   { background: var(--token-error); }
 .avatar-status--away   { background: var(--token-warning); }
 
+/* 头像色彩变体（文字头像底色） */
+.avatar--info    { background: color-mix(in srgb, var(--token-info) 15%, transparent); color: var(--token-info); }
+.avatar--success { background: color-mix(in srgb, var(--token-success) 15%, transparent); color: var(--token-success); }
+.avatar--warning { background: color-mix(in srgb, var(--token-warning) 15%, transparent); color: var(--token-warning); }
+.avatar--error   { background: color-mix(in srgb, var(--token-error) 15%, transparent); color: var(--token-error); }
+
+/* 渐变底头像 */
+.avatar--gradient {
+  background: linear-gradient(135deg, var(--token-accent), var(--token-accent-deep, var(--token-accent)));
+  color: var(--token-on-accent, #fff);
+}
+
+/* 方形头像 */
+.avatar--square { border-radius: var(--radius-md); }
+
+/* 头像通知环（红圈外框） */
+.avatar--ring {
+  box-shadow: 0 0 0 2px var(--token-bg), 0 0 0 4px var(--token-error);
+}
+
+/* 头像组溢出计数 */
+.avatar-group-count {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--token-text-muted);
+  background: var(--token-fill-2);
+  border: 2px solid var(--token-bg);
+  border-radius: var(--radius-full);
+  margin-left: -8px;
+}
+
 /* ══════════════ media-card · 封面卡 ══════════════ */
 .media-card {
   position: relative;
@@ -164,6 +200,53 @@
   font-variant-numeric: tabular-nums;
 }
 
+/* 只读模式（不可交互） */
+.rating--readonly .rating-star {
+  cursor: default;
+}
+.rating--readonly .rating-star:hover {
+  transform: none;
+}
+
+/* 清除评分钮 */
+.rating-clear {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  margin-left: 4px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-xs);
+  background: transparent;
+  color: var(--token-text-faint);
+  cursor: pointer;
+  transition: color var(--icen-tx-fast), background-color var(--icen-tx-fast);
+}
+.rating-clear:hover {
+  color: var(--token-text);
+  background: var(--token-fill-1);
+}
+.rating-clear svg { width: 12px; height: 12px; }
+
+/* 评分数（评价人数） */
+.rating-count {
+  margin-left: var(--density-space-xs);
+  font-size: var(--density-font-size-xs);
+  color: var(--token-text-faint);
+  font-variant-numeric: tabular-nums;
+}
+
+/* 评分 + 文字摘要（如「4.5 · 128 条评价」） */
+.rating-summary {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--density-space-xs);
+  font-size: var(--density-font-size-sm);
+  color: var(--token-text-muted);
+}
+
 /* ══════════════ carousel · 轮播（behaviors/carousel 配套） ══════════════
  * DOM 契约：
  *   <div class="carousel" data-carousel>
@@ -274,7 +357,67 @@
   transition: width var(--icen-tx-slow);
 }
 
+/* 缩略图导航条 */
+.carousel-thumbs {
+  display: flex;
+  gap: var(--density-space-xs);
+  margin-top: var(--density-space-sm);
+  padding: var(--density-space-xs);
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+.carousel-thumbs::-webkit-scrollbar { display: none; }
+.carousel-thumb {
+  flex-shrink: 0;
+  width: 56px;
+  height: 40px;
+  border-radius: var(--radius-sm);
+  overflow: hidden;
+  border: 2px solid transparent;
+  cursor: pointer;
+  opacity: 0.6;
+  transition: opacity var(--icen-tx-fast), border-color var(--icen-tx-fast);
+}
+.carousel-thumb:hover { opacity: 1; }
+.carousel-thumb.is-active,
+.carousel-thumb[aria-current='true'] {
+  opacity: 1;
+  border-color: var(--token-accent);
+}
+.carousel-thumb img,
+.carousel-thumb video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* 轮播索引指示器（1 / 5） */
+.carousel-index {
+  position: absolute;
+  top: var(--density-space-sm);
+  right: var(--density-space-sm);
+  padding: 2px var(--density-space-sm);
+  font-size: var(--density-font-size-xs);
+  font-variant-numeric: tabular-nums;
+  color: var(--token-bg);
+  background: color-mix(in srgb, var(--token-text) 60%, transparent);
+  border-radius: var(--radius-full);
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+  z-index: 2;
+}
+
+/* 渐入动画 */
+.carousel-slide {
+  animation: carousel-slide-fade var(--icen-tx-normal) var(--ease-out);
+}
+@keyframes carousel-slide-fade {
+  from { opacity: 0.6; }
+  to { opacity: 1; }
+}
+
 @media (prefers-reduced-motion: reduce) {
   .carousel-track { transition: none; }
-  .media-card, .rating-star, .carousel-arrow { transition: none; }
+  .carousel-slide { animation: none; }
+  .media-card, .rating-star, .carousel-arrow, .carousel-thumb { transition: none; }
 }

package/dist/components/nav.css

@@ -159,3 +159,102 @@
 @media (prefers-reduced-motion: reduce) {
   .nav, .nav-btn { transition: none; }
 }
+
+/* ── 增强 ── */
+
+/* 导航搜索槽 */
+.nav-search {
+  display: flex;
+  align-items: center;
+  gap: var(--density-space-xs);
+  padding: 0 var(--density-space-sm);
+  height: 32px;
+  min-width: 180px;
+  background: var(--token-control);
+  border: 1px solid var(--token-outline-soft);
+  border-radius: var(--radius-full);
+  color: var(--token-text-faint);
+  font-size: var(--density-font-size-sm);
+  cursor: pointer;
+  transition: border-color var(--icen-tx-fast);
+}
+.nav-search:hover { border-color: var(--token-accent); }
+.nav-search svg { width: 14px; height: 14px; flex-shrink: 0; }
+.nav-search-kbd {
+  margin-left: auto;
+  padding: 1px 5px;
+  font-size: 10px;
+  font-family: var(--font-mono);
+  color: var(--token-text-faint);
+  background: var(--token-fill-2);
+  border-radius: var(--radius-xs);
+}
+
+/* 导航按钮上的通知徽标 */
+.nav-btn-badge {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  min-width: 8px;
+  height: 8px;
+  padding: 0;
+  background: var(--token-error);
+  border: 1.5px solid var(--token-surface-glass);
+  border-radius: var(--radius-full);
+  pointer-events: none;
+}
+.nav-btn { position: relative; }
+.nav-btn-badge--count {
+  min-width: 16px;
+  height: 16px;
+  padding: 0 4px;
+  font-size: 9px;
+  font-weight: 700;
+  color: var(--token-on-accent, #fff);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+}
+
+/* 链接式导航项（a 标签替代 button） */
+.nav-link {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--density-space-xs);
+  padding: 6px var(--density-space-sm);
+  font-size: var(--density-font-size-md);
+  color: var(--token-text-muted);
+  text-decoration: none;
+  border-radius: var(--radius-full);
+  transition: color var(--icen-tx-fast), background-color var(--icen-tx-fast);
+}
+.nav-link:hover {
+  color: var(--token-text);
+  background: var(--token-control-hover);
+  text-decoration: none;
+}
+.nav-link.is-active,
+.nav-link[aria-current='page'] {
+  color: var(--token-accent);
+  background: var(--token-accent-subtle);
+}
+
+/* 导航用户区（头像 + 下拉触发器） */
+.nav-user {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--density-space-xs);
+  padding: 3px var(--density-space-xs) 3px 3px;
+  border-radius: var(--radius-full);
+  border: 1px solid var(--token-outline-soft);
+  background: var(--token-surface);
+  cursor: pointer;
+  transition: border-color var(--icen-tx-fast);
+}
+.nav-user:hover { border-color: var(--token-accent); }
+.nav-user-name {
+  font-size: var(--density-font-size-sm);
+  color: var(--token-text);
+}
+.nav-user svg { width: 12px; height: 12px; color: var(--token-text-faint); }