@icen.ai/ui 0.2.1 → 0.3.0

package/dist/components/input.css

@@ -2,81 +2,201 @@
  * @icen.ai/ui — Component: input（wrapper 式输入框 / 多行 / 搜索）
  * 规格源自 opengal primitives/input.tsx；与 behaviors/input.ts 配套。
  *
- * 契约：
- *   <div class="input-wrap control [--sm|--lg] [.is-error] [.is-disabled]">
- *     <span class="input-leading">…</span>            可选前缀
+ * 完整契约：
+ *   <div class="input-wrap control [--sm|--lg] [--search] [.is-error] [.is-disabled]">
+ *     <span class="input-leading">…</span>            可选前缀（svg/icon/text）
  *     <input class="input" />
- *     <button class="input-clear">…</button>          可选清除钮（behavior 清空并聚焦）
- *     <button class="input-pw-toggle">…</button>      可选密码可见切换（behavior 驱动）
- *     <span class="input-trailing">…</span>           可选后缀
+ *     <button class="input-clear" aria-label="清除">…</button>     behavior 清空并聚焦
+ *     <button class="input-pw-toggle" aria-label="切换可见性">…</button>
+ *     <span class="input-trailing">…</span>           可选后缀（单位/字符计数等）
  *   </div>
- *   多行：<div class="textarea-wrap control"><textarea class="textarea" data-autosize></textarea></div>
- *   搜索：.input-wrap--search = leading 放大镜 + .input-clear 的结构约定（无额外视觉）
+ *
+ *   多行：<div class="textarea-wrap control" [.is-error|.is-disabled]><textarea class="textarea" data-autosize></textarea></div>
+ *
+ * --search 修饰：仅语义标记（让 behavior 知道这是搜索框，绑定 clear + Esc），
+ *              不额外改样式；视觉上仍用 .input-leading 放大镜。
  */
 
+/* ── 单行 ── */
 .input-wrap {
-  display: flex; align-items: center; gap: 8px; width: 100%;
-  height: 36px; padding: 0 12px; font-size: 13px;
+  display: flex;
+  align-items: center;
+  gap: var(--density-space-xs);
+  width: 100%;
+  height: var(--density-input-height-md);
+  padding: 0 var(--density-space-sm);
+  font-size: var(--density-font-size-md);
   background: var(--token-control);
   border: 1px solid var(--token-outline-soft);
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius-md);
   box-shadow: var(--token-shadow-inset);
+  transition: border-color var(--icen-tx-fast),
+    box-shadow var(--icen-tx-fast);
+}
+.input-wrap:hover {
+  border-color: var(--icen-hover-border);
+}
+.input-wrap:focus-within {
+  box-shadow: var(--icen-control-focus-shadow);
+  border-color: var(--icen-control-focus-border);
+}
+.input-wrap.is-error,
+.input-wrap.is-error:focus-within {
+  border-color: var(--token-error);
+}
+.input-wrap.is-error:focus-within {
+  box-shadow: var(--icen-control-error-shadow);
+}
+.input-wrap.is-disabled,
+.input-wrap[aria-disabled='true'],
+.input-wrap[data-disabled] {
+  opacity: var(--icen-disabled-opacity);
+  background: var(--token-bg-soft);
+  cursor: not-allowed;
+  pointer-events: none;
 }
-.input-wrap:focus-within { border-color: var(--token-accent); }
-.input-wrap.is-error, .input-wrap.is-error:focus-within { border-color: var(--token-error); }
-.input-wrap.is-disabled { opacity: 0.4; }
 .input-wrap.is-disabled .input { cursor: not-allowed; }
 
-/* 尺寸三档：高度 / 横向内边距 / 字号 */
-.input-wrap--sm { height: 32px; padding: 0 10px; font-size: 12px; }
-.input-wrap--lg { height: 40px; padding: 0 14px; font-size: 14px; }
+/* 尺寸变体 */
+.input-wrap--sm {
+  height: var(--density-input-height-sm);
+  padding: 0 10px;
+  font-size: var(--density-font-size-sm);
+}
+.input-wrap--lg {
+  height: var(--density-input-height-lg);
+  padding: 0 var(--density-space-md);
+  font-size: var(--density-font-size-lg);
+}
 
 .input {
-  flex: 1; min-width: 0; padding: 0;
-  background: transparent; border: none; outline: none;
-  color: var(--token-text); font: inherit;
+  flex: 1;
+  min-width: 0;
+  padding: 0;
+  background: transparent;
+  border: none;
+  outline: none;
+  color: var(--token-text);
+  font: inherit;
+}
+.input::placeholder {
+  color: color-mix(in srgb, var(--token-text-faint) 60%, transparent);
+}
+.input:read-only {
+  color: var(--token-text-muted);
+  cursor: default;
 }
-.input::placeholder { color: color-mix(in srgb, var(--token-text-faint) 60%, transparent); }
+.input::-webkit-search-cancel-button { -webkit-appearance: none; }
 
-.input-leading, .input-trailing {
-  display: inline-flex; align-items: center; flex-shrink: 0;
+.input-leading,
+.input-trailing {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
   color: var(--token-text-faint);
 }
+.input-leading svg, .input-trailing svg { width: 14px; height: 14px; }
 
-.input-clear {
-  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
-  padding: 2px; border: none; background: transparent; cursor: pointer;
-  border-radius: var(--radius-full); color: var(--token-text-faint);
-  transition: color var(--duration-normal) var(--ease-out),
-    background-color var(--duration-normal) var(--ease-out);
-}
-.input-clear:hover { color: var(--token-text); background: var(--token-surface-hover); }
+/* ── 前缀/后缀文字（单位、域名等）── */
+.input-affix {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  padding: 0 var(--density-space-xs);
+  color: var(--token-text-muted);
+  font-size: 0.92em;
+  background: var(--token-fill-1);
+  border-radius: var(--radius-xs);
+}
 
+.input-clear,
 .input-pw-toggle {
-  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
-  padding: 2px; border: none; background: transparent; cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 22px; height: 22px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  border-radius: var(--radius-full);
   color: var(--token-text-faint);
-  transition: color var(--duration-normal) var(--ease-out);
+  transition:
+    color var(--icen-tx-fast),
+    background-color var(--icen-tx-fast);
+}
+.input-clear:hover,
+.input-pw-toggle:hover {
+  color: var(--token-text);
+  background: var(--token-surface-hover);
+}
+.input-clear:focus-visible,
+.input-pw-toggle:focus-visible {
+  outline: none;
+  box-shadow: var(--icen-ring);
 }
-.input-pw-toggle:hover { color: var(--token-text); }
+.input-clear svg, .input-pw-toggle svg { width: 12px; height: 12px; }
 
 /* ── 多行：同一 wrapper 视觉，内部 textarea 裸奔 ── */
 .textarea-wrap {
-  display: flex; width: 100%;
+  display: flex;
+  width: 100%;
   background: var(--token-control);
   border: 1px solid var(--token-outline-soft);
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius-md);
   box-shadow: var(--token-shadow-inset);
+  transition: border-color var(--icen-tx-fast),
+    box-shadow var(--icen-tx-fast);
+}
+.textarea-wrap:hover {
+  border-color: var(--icen-hover-border);
+}
+.textarea-wrap:focus-within {
+  box-shadow: var(--icen-control-focus-shadow);
+  border-color: var(--icen-control-focus-border);
+}
+.textarea-wrap.is-error,
+.textarea-wrap.is-error:focus-within {
+  border-color: var(--token-error);
+  box-shadow: var(--icen-control-error-shadow);
+}
+.textarea-wrap.is-disabled,
+.textarea-wrap[aria-disabled='true'],
+.textarea-wrap[data-disabled] {
+  opacity: var(--icen-disabled-opacity);
+  background: var(--token-bg-soft);
+  cursor: not-allowed;
+  pointer-events: none;
 }
-.textarea-wrap:focus-within { border-color: var(--token-accent); }
-.textarea-wrap.is-error, .textarea-wrap.is-error:focus-within { border-color: var(--token-error); }
-.textarea-wrap.is-disabled { opacity: 0.4; }
 .textarea-wrap.is-disabled .textarea { cursor: not-allowed; }
 
 .textarea {
-  width: 100%; padding: 12px;
-  background: transparent; border: none; outline: none; resize: none;
-  color: var(--token-text); font: inherit; font-size: 13px; line-height: 1.5;
-  min-height: calc(3 * 1.5em + 24px); /* 3 行 + 上下 padding */
+  width: 100%;
+  padding: var(--density-space-sm) var(--density-space-md);
+  background: transparent;
+  border: none;
+  outline: none;
+  resize: vertical;
+  color: var(--token-text);
+  font: inherit;
+  font-size: var(--density-font-size-md);
+  line-height: 1.5;
+  min-height: calc(3 * 1.5em + 24px);
+}
+.textarea::placeholder {
+  color: color-mix(in srgb, var(--token-text-faint) 60%, transparent);
+}
+
+/* 字符计数（behavior 可挂到 .textarea-wrap 内尾部） */
+.input-counter {
+  position: absolute;
+  right: var(--density-space-sm);
+  bottom: var(--density-space-xs);
+  font-size: var(--density-font-size-xs);
+  color: var(--token-text-faint);
+  font-variant-numeric: tabular-nums;
+  pointer-events: none;
 }
-.textarea::placeholder { color: color-mix(in srgb, var(--token-text-faint) 60%, transparent); }
+.textarea-wrap { position: relative; }
+.textarea-wrap .textarea { padding-bottom: 24px; }

package/dist/components/input.mjs

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

package/dist/components/kbd.mjs

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

package/dist/components/layout.mjs

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

package/dist/components/list.mjs

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

package/dist/components/media-card.mjs

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

package/dist/components/media.css

@@ -1,37 +1,79 @@
 /*
  * @icen.ai/ui — Component: media（媒体族）
+ *
  * 包含：avatar（头像）/ media-card（封面卡，滑出 overlay）/ rating（星级评分）/ carousel（轮播，与 behaviors/carousel 配套）
- * carousel 归入本文件（无独立 carousel.css 配额）；规格源自 opengal data/display.tsx 的 Avatar、
- * data/cartridge-card.tsx 的 hover overlay、data/exhibit.tsx 的 Carousel 与 Rating。
+ * 规格源自 opengal data/display.tsx 的 Avatar、data/cartridge-card.tsx 的 hover overlay、
+ * data/exhibit.tsx 的 Carousel 与 Rating。
  */
 
 /* ══════════════ avatar · 头像 ══════════════ */
 .avatar {
   position: relative;
-  display: inline-flex; align-items: center; justify-content: center;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   overflow: hidden;
   border-radius: var(--radius-full);
   background: var(--token-accent-subtle);
   color: var(--token-accent);
   font-weight: 600;
-  width: 36px; height: 36px; font-size: 12px;
+  width: 36px;
+  height: 36px;
+  font-size: var(--density-font-size-sm);
   flex-shrink: 0;
+  user-select: none;
 }
 .avatar--xs { width: 20px; height: 20px; font-size: 9px; }
 .avatar--sm { width: 28px; height: 28px; font-size: 10px; }
-.avatar--lg { width: 48px; height: 48px; font-size: 14px; }
-.avatar img { width: 100%; height: 100%; object-fit: cover; }
+.avatar--lg { width: 48px; height: 48px; font-size: var(--density-font-size-md); }
+.avatar--xl { width: 80px; height: 80px; font-size: var(--density-font-size-lg); }
+.avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* 头像组：多个头像重叠 */
+.avatar-group {
+  display: inline-flex;
+  align-items: center;
+}
+.avatar-group .avatar {
+  border: 2px solid var(--token-bg);
+  margin-left: -8px;
+}
+.avatar-group .avatar:first-child { margin-left: 0; }
+
+/* 在线状态点 */
+.avatar-status {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 10px;
+  height: 10px;
+  border: 2px solid var(--token-bg);
+  border-radius: var(--radius-full);
+  background: var(--token-text-faint);
+}
+.avatar-status--online { background: var(--token-success); }
+.avatar-status--busy   { background: var(--token-error); }
+.avatar-status--away   { background: var(--token-warning); }
 
 /* ══════════════ media-card · 封面卡 ══════════════ */
 .media-card {
   position: relative;
   overflow: hidden;
   border-radius: var(--radius-lg);
-  transition: transform 300ms var(--ease-out), box-shadow 300ms var(--ease-out);
+  background: var(--token-bg-soft);
+  transition:
+    transform var(--icen-tx-slow),
+    box-shadow var(--icen-tx-slow);
 }
 .media-card:hover {
   transform: translateY(-6px);
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), 0 0 20px var(--token-accent-glow);
+  box-shadow:
+    0 8px 32px color-mix(in srgb, var(--token-text) 18%, transparent),
+    0 0 20px var(--token-accent-glow);
 }
 .media-card-cover {
   display: block;
@@ -40,52 +82,95 @@
   object-fit: cover;
 }
 .media-card-overlay {
-  position: absolute; left: 0; right: 0; bottom: 0;
-  padding: 32px 12px 10px;
-  background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.35) 65%, transparent);
+  position: absolute;
+  left: 0; right: 0; bottom: 0;
+  padding: 32px var(--density-space-sm) var(--density-space-xs);
+  background: linear-gradient(
+    to top,
+    color-mix(in srgb, var(--token-text) 72%, transparent),
+    color-mix(in srgb, var(--token-text) 35%, transparent) 65%,
+    transparent
+  );
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
-  color: #fff;
+  color: var(--token-bg);
   transform: translateY(100%);
-  transition: transform 200ms var(--ease-out);
+  transition: transform var(--icen-tx-normal);
   pointer-events: none;
 }
 .media-card:hover .media-card-overlay {
   transform: translateY(0);
   transition-delay: 80ms;
 }
+.media-card-overlay-title {
+  font-size: var(--density-font-size-md);
+  font-weight: 600;
+  margin: 0;
+}
+.media-card-overlay-desc {
+  font-size: var(--density-font-size-xs);
+  margin: 2px 0 0;
+  opacity: 0.8;
+}
 
 /* ══════════════ rating · 星级评分 ══════════════ */
-.rating { display: inline-flex; align-items: center; gap: 2px; }
+.rating {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+}
 .rating-star {
   padding: 2px;
   border-radius: var(--radius-xs);
-  background: none; border: 0;
+  background: none;
+  border: 0;
   cursor: pointer;
-  display: inline-flex; align-items: center; justify-content: center;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  -webkit-tap-highlight-color: transparent;
+  transition: transform var(--icen-tx-fast);
+}
+.rating-star:hover { transform: scale(1.1); }
+.rating-star:focus-visible {
+  outline: none;
+  box-shadow: var(--icen-ring);
 }
 .rating-star svg {
-  width: 18px; height: 18px; display: block;
+  width: 18px;
+  height: 18px;
+  display: block;
   fill: transparent;
   stroke: var(--token-line-strong);
   stroke-width: 1.6;
-  transition: fill var(--duration-normal) var(--ease-out), stroke var(--duration-normal) var(--ease-out);
+  transition:
+    fill var(--icen-tx-fast),
+    stroke var(--icen-tx-fast);
 }
 .rating--sm .rating-star svg { width: 14px; height: 14px; }
 .rating--lg .rating-star svg { width: 22px; height: 22px; }
-.rating-star.is-filled svg { fill: var(--token-warning); stroke: var(--token-warning); }
+.rating-star.is-filled svg {
+  fill: var(--token-warning);
+  stroke: var(--token-warning);
+}
 .rating-star.is-half svg {
   fill: color-mix(in srgb, var(--token-warning) 50%, transparent);
   stroke: var(--token-warning);
 }
+.rating-value {
+  margin-left: var(--density-space-xs);
+  font-size: var(--density-font-size-sm);
+  color: var(--token-text-muted);
+  font-variant-numeric: tabular-nums;
+}
 
 /* ══════════════ carousel · 轮播（behaviors/carousel 配套） ══════════════
  * DOM 契约：
- *   <div class="carousel">
+ *   <div class="carousel" data-carousel>
  *     <div class="carousel-track"><div class="carousel-slide">…</div>×n</div>
- *     <button class="carousel-arrow carousel-arrow--prev">…</button>
- *     <button class="carousel-arrow carousel-arrow--next">…</button>
- *     <div class="carousel-dots"></div>   <!-- dots 由 behavior 自动生成 -->
+ *     <button class="carousel-arrow carousel-arrow--prev" aria-label="上一张">…</button>
+ *     <button class="carousel-arrow carousel-arrow--next" aria-label="下一张">…</button>
+ *     <div class="carousel-dots"></div>   <!-- behavior 自动生成 .carousel-dot -->
  *   </div>
  */
 .carousel {
@@ -96,38 +181,100 @@
 }
 .carousel-track {
   display: flex;
-  transition: transform 300ms var(--ease-out);
+  transition: transform var(--icen-tx-slow);
+}
+.carousel-slide {
+  width: 100%;
+  flex-shrink: 0;
 }
-.carousel-slide { width: 100%; flex-shrink: 0; }
 .carousel-arrow {
-  position: absolute; top: 50%; transform: translateY(-50%);
-  width: 32px; height: 32px;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 32px;
+  height: 32px;
   border-radius: var(--radius-full);
   background: color-mix(in srgb, var(--token-card) 78%, transparent);
   border: 1px solid var(--token-outline-soft);
   color: var(--token-text);
-  display: flex; align-items: center; justify-content: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   backdrop-filter: blur(4px);
   -webkit-backdrop-filter: blur(4px);
   box-shadow: var(--token-shadow-card);
   cursor: pointer;
-  transition: background-color var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-out);
+  z-index: 2;
+  transition:
+    background-color var(--icen-tx-fast),
+    transform var(--icen-tx-fast),
+    opacity var(--icen-tx-fast);
+}
+.carousel-arrow:hover {
+  background: var(--token-card-strong);
+}
+.carousel-arrow:focus-visible {
+  outline: none;
+  box-shadow: var(--icen-ring), var(--token-shadow-card);
+}
+.carousel-arrow:active {
+  transform: translateY(-50%) scale(0.95);
+}
+.carousel-arrow:disabled,
+.carousel-arrow[aria-disabled='true'] {
+  opacity: var(--icen-disabled-opacity);
+  cursor: not-allowed;
+  pointer-events: none;
 }
-.carousel-arrow:hover { background: var(--token-card-strong); }
-.carousel-arrow:active { transform: translateY(-50%) scale(0.95); }
 .carousel-arrow svg { width: 16px; height: 16px; }
-.carousel-arrow--prev { left: 8px; }
-.carousel-arrow--next { right: 8px; }
+.carousel-arrow--prev { left: var(--density-space-sm); }
+.carousel-arrow--next { right: var(--density-space-sm); }
+
 .carousel-dots {
-  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
-  display: flex; gap: 6px;
+  position: absolute;
+  bottom: var(--density-space-sm);
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  gap: 6px;
+  z-index: 2;
 }
 .carousel-dot {
-  width: 6px; height: 6px; padding: 0;
-  border: 0; border-radius: var(--radius-full);
+  width: 6px;
+  height: 6px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-full);
   background: color-mix(in srgb, var(--token-card) 70%, transparent);
   cursor: pointer;
-  transition: width var(--duration-normal) var(--ease-out), background-color var(--duration-normal) var(--ease-out);
+  transition:
+    width var(--icen-tx-fast),
+    background-color var(--icen-tx-fast);
+}
+.carousel-dot:hover {
+  background: color-mix(in srgb, var(--token-accent) 70%, transparent);
+}
+.carousel-dot:focus-visible {
+  outline: none;
+  box-shadow: var(--icen-ring);
+}
+.carousel-dot.active,
+.carousel-dot[aria-current='true'] {
+  width: 20px;
+  background: var(--token-accent);
+}
+
+/* 自动播放进度条（behavior 可选） */
+.carousel-progress {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: 2px;
+  background: var(--token-accent);
+  transition: width var(--icen-tx-slow);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .carousel-track { transition: none; }
+  .media-card, .rating-star, .carousel-arrow { transition: none; }
 }
-.carousel-dot:hover { background: color-mix(in srgb, var(--token-accent) 70%, transparent); }
-.carousel-dot.active { width: 20px; background: var(--token-accent); }