@icen.ai/ui 0.2.0 → 0.3.0

package/dist/components/pagination.css

@@ -1,32 +1,118 @@
 /*
  * @icen.ai/ui — Component: pagination（分页）
- * 用法：<nav class="pagination" aria-label="分页">
- *         <button class="page-btn motion is-disabled">‹</button>
- *         <button class="page-btn motion">1</button>
- *         <span class="page-ellipsis">…</span>
- *         <button class="page-btn motion is-active" aria-current="page">5</button>
- *         <button class="page-btn motion">›</button>
- *       </nav>
+ *
+ * 完整契约：
+ *   <nav class="pagination [pagination--sm]" aria-label="分页">
+ *     <button class="page-btn motion [.is-disabled]" aria-label="上一页" aria-disabled="true">‹</button>
+ *     <button class="page-btn motion [.is-active]" aria-current="page">1</button>
+ *     <span class="page-ellipsis" aria-hidden="true">…</span>
+ *     <button class="page-btn motion">5</button>
+ *     <button class="page-btn motion" aria-label="下一页">›</button>
+ *   </nav>
+ *
  * 翻页逻辑由消费方实现，这里只提供静态样式契约。
  */
 
-.pagination { display: flex; align-items: center; gap: 4px; }
+.pagination {
+  display: flex;
+  align-items: center;
+  gap: var(--density-space-xs);
+}
 
 .page-btn {
-  min-width: 28px; height: 28px; padding: 0 6px;
-  border-radius: var(--radius-md); font-size: 12px;
-  display: inline-flex; align-items: center; justify-content: center;
-  color: var(--token-text-muted); background: none; border: 0; cursor: pointer;
+  min-width: 28px;
+  height: 28px;
+  padding: 0 var(--density-space-xs);
+  border-radius: var(--radius-sm);
+  font-size: var(--density-font-size-sm);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--token-text-muted);
+  background: none;
+  border: 0;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  transition:
+    background-color var(--icen-tx-fast),
+    color var(--icen-tx-fast);
+}
+.page-btn:not(.is-active):hover {
+  background: var(--token-control-hover);
+  color: var(--token-text);
+}
+.page-btn:focus-visible {
+  outline: none;
+  box-shadow: var(--icen-ring);
+}
+.page-btn.is-active,
+.page-btn[aria-current='page'] {
+  background: var(--token-accent);
+  color: var(--token-on-accent, #fff);
+  font-weight: 500;
+  box-shadow: var(--token-shadow-elevated);
 }
-.page-btn:not(.is-active):hover { background: var(--token-control-hover); color: var(--token-text); }
-.page-btn.is-active {
-  background: var(--token-accent); color: var(--token-on-accent);
-  font-weight: 500; box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
+.page-btn.is-disabled,
+.page-btn:disabled,
+.page-btn[aria-disabled='true'] {
+  opacity: var(--icen-disabled-opacity);
+  pointer-events: none;
 }
-.page-btn.is-disabled, .page-btn:disabled { opacity: .3; pointer-events: none; }
 
 .page-ellipsis {
-  min-width: 28px; height: 28px; font-size: 12px;
-  display: inline-flex; align-items: center; justify-content: center;
+  min-width: 28px;
+  height: 28px;
+  font-size: var(--density-font-size-sm);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--token-text-faint);
+  user-select: none;
+}
+
+/* 尺寸变体 */
+.pagination--sm .page-btn,
+.pagination--sm .page-ellipsis {
+  min-width: 22px;
+  height: 22px;
+  font-size: var(--density-font-size-xs);
+}
+
+/* 带总数/跳页输入的复合体（behavior 可选渲染） */
+.pagination-info {
+  font-size: var(--density-font-size-sm);
   color: var(--token-text-faint);
+  font-variant-numeric: tabular-nums;
+  margin-left: var(--density-space-sm);
+}
+.pagination-jump {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--density-space-xs);
+  margin-left: var(--density-space-sm);
+  font-size: var(--density-font-size-sm);
+  color: var(--token-text-muted);
+}
+.pagination-jump-input {
+  width: 56px;
+  height: 28px;
+  padding: 0 var(--density-space-xs);
+  text-align: center;
+  background: var(--token-control);
+  border: 1px solid var(--token-outline-soft);
+  border-radius: var(--radius-sm);
+  color: var(--token-text);
+  font: inherit;
+  font-size: var(--density-font-size-sm);
+  transition: border-color var(--icen-tx-fast), box-shadow var(--icen-tx-fast);
+}
+.pagination-jump-input:hover { border-color: var(--icen-hover-border); }
+.pagination-jump-input:focus-visible {
+  outline: none;
+  border-color: var(--icen-control-focus-border);
+  box-shadow: var(--icen-control-focus-shadow);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .page-btn { transition: none; }
 }

package/dist/components/pagination.mjs

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

package/dist/components/panel.css

@@ -1,6 +1,17 @@
 /*
- * @icen.ai/ui — Component: panel（白卡片容器 + 标题栏）
- * 用法：<div class="panel-block"><div class="panel-title"><span>标题</span></div> …内容… </div>
+ * @icen.ai/ui — Component: panel（白卡片容器 + 标题栏 + 可选 footer）
+ *
+ * 完整契约：
+ *   <div class="panel-block [panel-block--flush]">
+ *     <div class="panel-title">
+ *       <span>标题</span>
+ *       <div class="panel-title-actions"><button class="btn btn-sm">…</button></div>
+ *     </div>
+ *     <div class="panel-body">…</div>
+ *     <div class="panel-foot">…可选底栏</div>
+ *   </div>
+ *
+ * --flush：body 不留 padding，使用方自行处理内层布局。
  */
 
 .panel-block {
@@ -8,12 +19,56 @@
   border: 1px solid var(--token-line-soft);
   border-radius: var(--radius-lg);
   box-shadow: var(--token-shadow-elevated);
-  margin-bottom: 24px;
+  margin-bottom: var(--density-space-lg);
   overflow: hidden;
 }
 .panel-title {
-  display: flex; align-items: center; justify-content: space-between;
-  padding: 14px 20px; border-bottom: 1px solid var(--token-line-soft);
-  font-size: 12px; letter-spacing: 2px; color: var(--token-text-muted);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--density-space-sm);
+  padding: var(--density-space-sm) var(--density-space-md);
+  border-bottom: 1px solid var(--token-line-soft);
+  font-size: var(--density-font-size-xs);
+  letter-spacing: 0.08em;
+  color: var(--token-text-muted);
   text-transform: uppercase;
+  font-weight: 600;
+}
+.panel-title > span:first-child {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.panel-title-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--density-space-xs);
+  flex-shrink: 0;
+}
+
+.panel-body {
+  padding: var(--density-space-md);
+  font-size: var(--density-font-size-md);
+  line-height: 1.6;
+}
+.panel-block--flush .panel-body { padding: 0; }
+
+.panel-foot {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--density-space-sm);
+  padding: var(--density-space-sm) var(--density-space-md);
+  border-top: 1px solid var(--token-line-soft);
+  background: color-mix(in srgb, var(--token-bg-soft) 50%, transparent);
+}
+
+/* 强调变体：accent 色标题边（用于警告/告警面板） */
+.panel-block--accent { border-color: color-mix(in srgb, var(--token-accent) 30%, transparent); }
+.panel-block--accent .panel-title {
+  color: var(--token-accent);
+  background: var(--token-accent-subtle);
 }

package/dist/components/panel.mjs

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

package/dist/components/pill.css

@@ -1,28 +1,88 @@
 /*
- * @icen.ai/ui — Component: pill（状态徽章）
- * 用法：<span class="pill ok|warn|bad|accent">文本</span>
- * 语义色纪律：仅绿/黄/红 + 品牌 accent。
+ * @icen.ai/ui — Component: pill（状态徽章 / tag）
+ *
+ * 完整契约：
+ *   <span class="pill [ok|warn|bad|accent|info] [.pill--dot|pill--outline|pill--sm]">文本</span>
+ *
+ * 语义色纪律：仅绿/黄/红/信息 + 品牌 accent。
+ * --dot：左侧加状态色圆点；--outline：透明底、纯描边；--sm：紧凑尺寸。
  */
 
 .pill {
-  display: inline-block; padding: 2px 10px; border-radius: var(--radius-full);
-  font-size: 11px; letter-spacing: 1px;
-  background: var(--token-surface-strong); color: var(--token-text-muted);
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px var(--density-space-sm);
+  border-radius: var(--radius-full);
+  font-size: var(--density-font-size-xs);
+  letter-spacing: 0.02em;
+  font-weight: 500;
+  background: var(--token-surface-strong);
+  color: var(--token-text-muted);
   border: 1px solid var(--token-line-soft);
+  white-space: nowrap;
+  vertical-align: middle;
 }
+
 .pill.ok {
-  color: var(--token-success); border-color: color-mix(in srgb, var(--token-success) 35%, transparent);
-  background: color-mix(in srgb, var(--token-success) 7%, transparent);
+  color: var(--token-success);
+  border-color: color-mix(in srgb, var(--token-success) 35%, transparent);
+  background: color-mix(in srgb, var(--token-success) 9%, transparent);
 }
 .pill.warn {
-  color: var(--token-warning); border-color: color-mix(in srgb, var(--token-warning) 35%, transparent);
-  background: color-mix(in srgb, var(--token-warning) 7%, transparent);
+  color: var(--token-warning);
+  border-color: color-mix(in srgb, var(--token-warning) 35%, transparent);
+  background: color-mix(in srgb, var(--token-warning) 9%, transparent);
 }
 .pill.bad {
-  color: var(--token-error); border-color: color-mix(in srgb, var(--token-error) 35%, transparent);
-  background: color-mix(in srgb, var(--token-error) 7%, transparent);
+  color: var(--token-error);
+  border-color: color-mix(in srgb, var(--token-error) 35%, transparent);
+  background: color-mix(in srgb, var(--token-error) 9%, transparent);
 }
 .pill.accent {
-  color: var(--token-accent-deep); border-color: color-mix(in srgb, var(--token-accent) 40%, transparent);
-  background: color-mix(in srgb, var(--token-accent) 7%, transparent);
+  color: var(--token-accent-deep, var(--token-accent));
+  border-color: color-mix(in srgb, var(--token-accent) 40%, transparent);
+  background: color-mix(in srgb, var(--token-accent) 9%, transparent);
+}
+.pill.info {
+  color: var(--token-info);
+  border-color: color-mix(in srgb, var(--token-info) 35%, transparent);
+  background: color-mix(in srgb, var(--token-info) 9%, transparent);
+}
+
+/* 点状变体：左侧状态色圆点 */
+.pill--dot::before {
+  content: '';
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: var(--radius-full);
+  background: currentColor;
+  flex-shrink: 0;
+}
+
+/* 描边变体：透明底，仅描边 */
+.pill--outline {
+  background: transparent !important;
+}
+
+/* 尺寸变体 */
+.pill--sm {
+  padding: 1px var(--density-space-xs);
+  font-size: 10px;
+}
+.pill--lg {
+  padding: 4px calc(var(--density-space-sm) + 2px);
+  font-size: var(--density-font-size-sm);
+}
+
+/* 实色变体：accent 实底（用于 count、活跃状态等强调场景） */
+.pill--solid {
+  background: var(--token-accent);
+  color: var(--token-on-accent, #fff);
+  border-color: var(--token-accent);
 }
+.pill--solid.ok   { background: var(--token-success); border-color: var(--token-success); color: var(--token-on-accent, #fff); }
+.pill--solid.warn { background: var(--token-warning); border-color: var(--token-warning); color: var(--token-on-accent, #fff); }
+.pill--solid.bad  { background: var(--token-error);   border-color: var(--token-error);   color: var(--token-on-accent, #fff); }
+.pill--solid.info { background: var(--token-info);    border-color: var(--token-info);    color: var(--token-on-accent, #fff); }

package/dist/components/pill.mjs

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

package/dist/components/popover.css

@@ -1,20 +1,110 @@
 /*
  * @icen.ai/ui — Component: popover（锚定浮层，与 behaviors/popover 配套）
- * 面板由 JS portal 到 document.body 并按 fixed 定位；data-side 由布局函数写入。
+ *
+ * 完整契约：
+ *   <button class="popover-trigger pressable" data-popover-target="id" aria-haspopup="dialog">…</button>
+ *   <div class="popover [--sm|--lg]" id="id" data-side="top|bottom|left|right" role="dialog" hidden>
+ *     <div class="popover-header">           可选
+ *       <h3 class="popover-title">…</h3>
+ *       <button class="popover-close" aria-label="关闭">…</button>
+ *     </div>
+ *     <div class="popover-body">…</div>
+ *     <div class="popover-footer">           可选
+ *       <button class="btn">取消</button>
+ *     </div>
+ *   </div>
+ *
+ * behavior：面板 portal 到 document.body 按 fixed 定位；data-side 由布局函数写入；
+ *           ESC / 外部点击关闭；焦点 trap 可选。
  */
 
 .popover {
-  position: fixed; z-index: var(--z-popover);
-  padding: 8px;
-  background: var(--token-card-strong); color: var(--token-text);
+  position: fixed;
+  z-index: var(--z-popover);
+  min-width: 200px;
+  max-width: min(360px, calc(100vw - 32px));
+  padding: var(--density-space-sm);
+  background: var(--token-card-strong);
+  color: var(--token-text);
   border: 1px solid var(--token-outline);
   box-shadow: var(--token-shadow-overlay);
   border-radius: var(--radius-lg);
-  animation: icen-popover-in 150ms var(--ease-out);
+  animation: icen-popover-in var(--icen-tx-fast);
+  transform-origin: top center;
+}
+.popover[data-side='top'] {
+  animation-name: icen-popover-in-top;
+  transform-origin: bottom center;
+}
+.popover[data-side='left'] {
+  animation-name: icen-popover-in-left;
+  transform-origin: right center;
+}
+.popover[data-side='right'] {
+  animation-name: icen-popover-in-right;
+  transform-origin: left center;
+}
+
+.popover--sm { min-width: 160px; max-width: 240px; }
+.popover--lg { min-width: 280px; max-width: min(480px, calc(100vw - 32px)); }
+
+.popover-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--density-space-sm);
+  padding: var(--density-space-xs) var(--density-space-xs) var(--density-space-sm);
+  border-bottom: 1px solid var(--token-line-soft);
+  margin-bottom: var(--density-space-sm);
+}
+.popover-title {
+  margin: 0;
+  font-size: var(--density-font-size-sm);
+  font-weight: 600;
+  font-family: var(--font-heading);
+  line-height: 1.3;
+}
+.popover-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  color: var(--token-text-faint);
+  border-radius: var(--radius-sm);
+  flex-shrink: 0;
+  transition:
+    background-color var(--icen-tx-fast),
+    color var(--icen-tx-fast);
+}
+.popover-close:hover {
+  background: var(--token-surface-hover);
+  color: var(--token-text);
+}
+.popover-close:focus-visible {
+  outline: none;
+  box-shadow: var(--icen-ring);
+}
+
+.popover-body {
+  font-size: var(--density-font-size-sm);
+  line-height: 1.5;
+}
+
+.popover-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--density-space-xs);
+  margin-top: var(--density-space-sm);
+  padding-top: var(--density-space-sm);
+  border-top: 1px solid var(--token-line-soft);
 }
-.popover[data-side='top'] { animation-name: icen-popover-in-top; }
 
-/* 进场动画与 .menu 同参数：fade + scale(.95→1) + 按侧位移 8px */
+/* ── 进场动画（按侧别反向位移 8px） ── */
 @keyframes icen-popover-in {
   from { opacity: 0; transform: scale(0.95) translateY(-8px); }
   to { opacity: 1; transform: scale(1) translateY(0); }
@@ -23,3 +113,15 @@
   from { opacity: 0; transform: scale(0.95) translateY(8px); }
   to { opacity: 1; transform: scale(1) translateY(0); }
 }
+@keyframes icen-popover-in-left {
+  from { opacity: 0; transform: scale(0.95) translateX(8px); }
+  to { opacity: 1; transform: scale(1) translateX(0); }
+}
+@keyframes icen-popover-in-right {
+  from { opacity: 0; transform: scale(0.95) translateX(-8px); }
+  to { opacity: 1; transform: scale(1) translateX(0); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .popover { animation: none; }
+}

package/dist/components/popover.mjs

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

package/dist/components/progress.mjs

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

package/dist/components/rating.mjs

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

package/dist/components/result.mjs

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