@icen.ai/ui 0.3.0 → 0.5.0

package/dist/components/badge.css

@@ -0,0 +1,131 @@
+/*
+ * @icen.ai/ui — Component: badge（数字徽标 / 小红点）
+ *
+ * 与 pill 的差异：
+ *   - pill = 行内状态徽章，有文字内容
+ *   - badge = 角标式徽章，挂在外层元素的右上角，强调"数量/新动态"
+ *
+ * 完整契约（外层必须 position: relative 或 inline-flex）：
+ *   <span class="badge-host">
+ *     <button class="btn">…</button>
+ *     <span class="badge">9</span>                   <!-- 数字徽标 -->
+ *   </span>
+ *
+ *   <span class="badge-host">
+ *     <button class="btn">…</button>
+ *     <span class="badge badge--dot"></span>          <!-- 纯圆点（无数字） -->
+ *   </span>
+ *
+ *   <span class="badge-host">
+ *     <span class="avatar">…</span>
+ *     <span class="badge badge--bottom badge--success badge--dot"></span>  <!-- 头像右下角在线点 -->
+ *   </span>
+ *
+ * 变体：--dot 纯圆点 / --sm 小号 / --lg 大号 / --bottom 底部角
+ * 语义色：--success（在线）/ --warning / --error / --accent
+ */
+
+.badge-host {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.badge {
+  position: absolute;
+  top: 0;
+  right: 0;
+  transform: translate(50%, -50%);
+  z-index: var(--z-raised);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 4px;
+  font: inherit;
+  font-size: 10px;
+  font-weight: 600;
+  line-height: 1;
+  font-variant-numeric: tabular-nums;
+  color: var(--token-on-accent, #fff);
+  background: var(--token-error);
+  border: 2px solid var(--token-surface);
+  border-radius: var(--radius-full);
+  box-shadow: var(--token-shadow-inset);
+  pointer-events: none;
+  white-space: nowrap;
+  transform-origin: center;
+}
+
+/* 纯圆点（无数字） */
+.badge--dot {
+  width: 8px;
+  height: 8px;
+  min-width: 0;
+  padding: 0;
+  font-size: 0;
+}
+
+/* 尺寸 */
+.badge--sm {
+  min-width: 14px;
+  height: 14px;
+  font-size: 9px;
+  padding: 0 3px;
+}
+.badge--sm.badge--dot {
+  width: 6px;
+  height: 6px;
+}
+.badge--lg {
+  min-width: 20px;
+  height: 20px;
+  font-size: var(--density-font-size-xs);
+  padding: 0 5px;
+}
+.badge--lg.badge--dot {
+  width: 10px;
+  height: 10px;
+}
+
+/* 底部角（头像在线指示等） */
+.badge--bottom {
+  top: auto;
+  bottom: 0;
+  transform: translate(50%, 50%);
+}
+
+/* 语义色变体 */
+.badge--accent {
+  background: var(--token-accent);
+}
+.badge--success {
+  background: var(--token-success);
+}
+.badge--warning {
+  background: var(--token-warning);
+}
+.badge--error {
+  background: var(--token-error);
+}
+.badge--info {
+  background: var(--token-info);
+}
+
+/* 挂在实底色按钮上时用更浅的边框 */
+.btn-primary .badge,
+.btn-danger .badge {
+  border-color: var(--token-on-accent, #fff);
+}
+
+/* 数字超过 99 显示 99+（消费方决定是否使用，这里只保证宽度容纳） */
+.badge[data-overflow] {
+  min-width: 20px;
+  padding: 0 5px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .badge { transition: none; }
+}

package/dist/components/badge.mjs

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

package/dist/components/breadcrumb.css

@@ -96,6 +96,63 @@
   padding: 0 2px;
   color: var(--token-text-faint);
   user-select: none;
+  cursor: pointer;
+  border-radius: var(--radius-xs);
+  transition: color var(--icen-tx-fast), background-color var(--icen-tx-fast);
+}
+.breadcrumb-ellipsis:hover {
+  color: var(--token-accent);
+  background: var(--token-fill-1);
+}
+
+/* ── 溢出下拉（behavior 可选：点击 … 展开被折叠的中间路径） ── */
+.breadcrumb-dropdown {
+  position: relative;
+}
+.breadcrumb-dropdown-menu {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  min-width: 160px;
+  padding: 4px;
+  background: var(--token-card-strong);
+  border: 1px solid var(--token-outline);
+  border-radius: var(--radius-md);
+  box-shadow: var(--token-shadow-overlay);
+  z-index: var(--z-popover);
+  animation: breadcrumb-drop-in var(--icen-tx-fast);
+}
+.breadcrumb-dropdown-menu[hidden] { display: none; }
+.breadcrumb-dropdown-menu a {
+  display: block;
+  padding: 4px var(--density-space-sm);
+  font-size: var(--density-font-size-sm);
+  color: var(--token-text-muted);
+  text-decoration: none;
+  border-radius: var(--radius-sm);
+  transition: background-color var(--icen-tx-fast), color var(--icen-tx-fast);
+}
+.breadcrumb-dropdown-menu a:hover {
+  background: var(--token-fill-1);
+  color: var(--token-text);
+}
+@keyframes breadcrumb-drop-in {
+  from { opacity: 0; transform: scale(0.96) translateY(-4px); }
+  to { opacity: 1; transform: scale(1) translateY(0); }
+}
+
+/* ── 面包屑分隔符变体 ── */
+.breadcrumb--slash .breadcrumb-sep::after { content: '/'; }
+.breadcrumb--arrow .breadcrumb-sep::after { content: '→'; }
+.breadcrumb--dot .breadcrumb-sep::after { content: '·'; font-size: 1.2em; }
+
+/* ── 面包屑尺寸变体 ── */
+.breadcrumb--sm {
+  font-size: var(--density-font-size-sm);
+}
+.breadcrumb--sm .breadcrumb-link,
+.breadcrumb--sm .breadcrumb-current {
+  max-width: 140px;
 }
 
 @media (max-width: 480px) {

package/dist/components/card.css

@@ -80,6 +80,20 @@
   overflow: hidden;
   background: var(--token-bg-soft);
 }
+/* 封面比例变体 */
+.card-media--square { aspect-ratio: 1 / 1; }
+.card-media--tall { aspect-ratio: 3 / 4; }
+.card-media--wide { aspect-ratio: 21 / 9; }
+.card-media--auto { aspect-ratio: auto; }
+/* 封面 hover 放大（配合 .card--interactive） */
+.card--interactive:hover .card-media > img,
+.card--interactive:hover .card-media > video {
+  transform: scale(1.04);
+}
+.card-media > img,
+.card-media > video {
+  transition: transform var(--icen-tx-slow) var(--ease-out);
+}
 .card-media > img,
 .card-media > video {
   width: 100%;
@@ -154,3 +168,57 @@
 @media (prefers-reduced-motion: reduce) {
   .card--interactive { transition: none; }
 }
+
+/* ── 卡片网格（card-group）：自适应多列 ── */
+.card-group {
+  display: grid;
+  gap: var(--density-space-md);
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+}
+.card-group--2 { grid-template-columns: repeat(2, 1fr); }
+.card-group--3 { grid-template-columns: repeat(3, 1fr); }
+.card-group--4 { grid-template-columns: repeat(4, 1fr); }
+
+/* ── 卡片列表（横向铺开，常用于搜索结果/消息流） ── */
+.card-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--density-space-sm);
+}
+.card-list > .card {
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+}
+.card-list > .card .card-media {
+  width: 120px;
+  flex-shrink: 0;
+  aspect-ratio: auto;
+}
+.card-list > .card .card-head,
+.card-list > .card .card-body,
+.card-list > .card .card-foot {
+  flex: 1;
+}
+
+/* ── 卡片头副标题 ── */
+.card-subtitle {
+  font-size: var(--density-font-size-xs);
+  color: var(--token-text-faint);
+  margin: 1px 0 0;
+  line-height: 1.4;
+}
+
+/* ── 卡片状态色边 ── */
+.card--success { border-color: color-mix(in srgb, var(--token-success) 35%, transparent); }
+.card--warning { border-color: color-mix(in srgb, var(--token-warning) 35%, transparent); }
+.card--error   { border-color: color-mix(in srgb, var(--token-error) 35%, transparent); }
+
+/* ── 卡片右上角徽标位 ── */
+.card-badge {
+  position: absolute;
+  top: var(--density-space-sm);
+  right: var(--density-space-sm);
+  z-index: 1;
+}
+.card { position: relative; }

package/dist/components/chart-area.css

@@ -0,0 +1,15 @@
+/*
+ * @icen.ai/ui — Component: chart-area（面积图专属样式）
+ * 依赖：charts.css（基座）
+ *
+ * DOM 由 behaviors/charts.ts 的 renderArea 构建：
+ *   .chart-area > svg[viewBox="0 0 360 150"]
+ * 与折线同族，但以面积填充为视觉主体（渐变更浓、描边更细）。
+ */
+
+.chart-area > svg {
+  display: block;
+  width: 100%;
+  height: 150px;
+  overflow: visible;
+}

package/dist/components/chart-area.mjs

@@ -0,0 +1,4 @@
+// @icen.ai/ui — kit: chart-area（CSS + behavior 一行入口；构建产物，勿手改）
+import './chart-area.css';
+import './charts.css';
+export { renderArea } from '../behaviors/charts.mjs';

package/dist/components/chart-bar.css

@@ -0,0 +1,79 @@
+/*
+ * @icen.ai/ui — Component: chart-bar（柱状/条形图专属样式）
+ * 依赖：charts.css（基座 .chart / .chart-labels / --chart-tone）
+ *
+ * DOM 由 behaviors/charts.ts 的 renderVBar / renderHBar 构建：
+ *   .chart-vbar > .chart-vbar-track > .chart-vbar-bar
+ *   .chart-hbar > .chart-hbar-row > .chart-hbar-label + .chart-hbar-track > .chart-hbar-bar + .chart-hbar-value
+ */
+
+/* ── vbar · 垂直柱状 ── */
+.chart-vbar {
+  display: flex;
+  align-items: flex-end;
+  gap: var(--density-space-xs);
+  height: 112px;
+}
+.chart-vbar-track {
+  flex: 1;
+  height: 100%;
+  min-width: 0;
+  display: flex;
+  align-items: flex-end;
+  background: color-mix(in srgb, var(--token-fill-2) 45%, transparent);
+  border-radius: var(--radius-sm);
+  overflow: hidden;
+}
+.chart-vbar-bar {
+  width: 100%;
+  border-radius: var(--radius-sm);
+  background: var(--chart-tone, var(--token-accent));
+  transition: height var(--icen-tx-slow);
+}
+.chart-vbar-bar:hover {
+  filter: brightness(1.08);
+}
+
+/* ── hbar · 水平条形 ── */
+.chart-hbar {
+  display: flex;
+  flex-direction: column;
+  gap: var(--density-space-xs);
+}
+.chart-hbar-row {
+  display: grid;
+  grid-template-columns: minmax(72px, 1fr) minmax(90px, 2fr) 52px;
+  gap: var(--density-space-xs);
+  align-items: center;
+  font-size: var(--density-font-size-xs);
+}
+.chart-hbar-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--token-text-muted);
+}
+.chart-hbar-track {
+  height: 10px;
+  overflow: hidden;
+  border-radius: var(--radius-full);
+  background: var(--token-fill-2);
+}
+.chart-hbar-bar {
+  height: 100%;
+  border-radius: var(--radius-full);
+  background: var(--chart-tone, var(--token-accent));
+  transition: width var(--icen-tx-slow);
+}
+.chart-hbar-bar:hover {
+  filter: brightness(1.08);
+}
+.chart-hbar-value {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+  color: var(--token-text-faint);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .chart-vbar-bar, .chart-hbar-bar { transition: none; }
+}

package/dist/components/chart-bar.mjs

@@ -0,0 +1,4 @@
+// @icen.ai/ui — kit: chart-bar（CSS + behavior 一行入口；构建产物，勿手改）
+import './chart-bar.css';
+import './charts.css';
+export { renderVBar, renderHBar } from '../behaviors/charts.mjs';

package/dist/components/chart-gauge.css

@@ -0,0 +1,38 @@
+/*
+ * @icen.ai/ui — Component: chart-gauge（进度环 / 仪表盘专属样式）
+ * 依赖：charts.css（基座 --chart-tone）
+ *
+ * DOM 由 behaviors/charts.ts 的 renderGauge 构建：
+ *   .chart-gauge > svg[viewBox="0 0 120 120"]（-90° 起笔，环形单值）
+ *                > .chart-gauge-center > .chart-gauge-value + .chart-gauge-label
+ */
+
+.chart-gauge {
+  position: relative;
+  width: 132px;
+  flex-shrink: 0;
+}
+.chart-gauge > svg {
+  display: block;
+  width: 132px;
+  height: 132px;
+}
+.chart-gauge-center {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1px;
+}
+.chart-gauge-value {
+  font-size: 20px;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  color: var(--token-text);
+}
+.chart-gauge-label {
+  font-size: var(--density-font-size-xs);
+  color: var(--token-text-faint);
+}

package/dist/components/chart-gauge.mjs

@@ -0,0 +1,4 @@
+// @icen.ai/ui — kit: chart-gauge（CSS + behavior 一行入口；构建产物，勿手改）
+import './chart-gauge.css';
+import './charts.css';
+export { renderGauge } from '../behaviors/charts.mjs';

package/dist/components/chart-heatmap.css

@@ -0,0 +1,52 @@
+/*
+ * @icen.ai/ui — Component: chart-heatmap（热力图 / 贡献图专属样式）
+ * 依赖：charts.css（基座 --chart-tone）
+ *
+ * DOM 由 behaviors/charts.ts 的 renderHeatmap 构建：
+ *   .chart-heatmap > .chart-heatmap-grid > .chart-heatmap-cell[data-level=0-4][.is-blank]
+ *                  > .chart-heatmap-legend
+ * 7 行（周一→周日）× N 周列，5 档色阶（data-level 0-4）。
+ */
+
+.chart-heatmap {
+  display: flex;
+  flex-direction: column;
+  gap: var(--density-space-xs);
+}
+.chart-heatmap-grid {
+  display: grid;
+  grid-template-rows: repeat(7, 1fr);
+  grid-auto-flow: column;
+  grid-auto-columns: 1fr;
+  gap: 3px;
+  width: 100%;
+}
+.chart-heatmap-cell {
+  aspect-ratio: 1;
+  border-radius: 2px;
+  background: var(--token-fill-2);
+}
+.chart-heatmap-cell.is-blank { background: transparent; }
+.chart-heatmap-cell[data-level='1'] { background: color-mix(in srgb, var(--chart-tone, var(--token-accent)) 28%, var(--token-fill-2)); }
+.chart-heatmap-cell[data-level='2'] { background: color-mix(in srgb, var(--chart-tone, var(--token-accent)) 50%, var(--token-fill-2)); }
+.chart-heatmap-cell[data-level='3'] { background: color-mix(in srgb, var(--chart-tone, var(--token-accent)) 74%, var(--token-fill-2)); }
+.chart-heatmap-cell[data-level='4'] { background: var(--chart-tone, var(--token-accent)); }
+.chart-heatmap-cell:not(.is-blank):hover {
+  outline: 1px solid var(--chart-tone, var(--token-accent));
+  outline-offset: 0;
+}
+.chart-heatmap-legend {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 3px;
+  font-size: var(--density-font-size-xs);
+  color: var(--token-text-faint);
+}
+.chart-heatmap-legend .chart-heatmap-cell {
+  width: 10px;
+  height: 10px;
+  aspect-ratio: auto;
+}
+.chart-heatmap-legend > span:first-child { margin-right: 2px; }
+.chart-heatmap-legend > span:last-child { margin-left: 2px; }

package/dist/components/chart-heatmap.mjs

@@ -0,0 +1,4 @@
+// @icen.ai/ui — kit: chart-heatmap（CSS + behavior 一行入口；构建产物，勿手改）
+import './chart-heatmap.css';
+import './charts.css';
+export { renderHeatmap } from '../behaviors/charts.mjs';

package/dist/components/chart-line.css

@@ -0,0 +1,15 @@
+/*
+ * @icen.ai/ui — Component: chart-line（折线图专属样式）
+ * 依赖：charts.css（基座）
+ *
+ * DOM 由 behaviors/charts.ts 的 renderLine 构建：
+ *   .chart-line > svg[viewBox="0 0 360 150"]
+ * 含面积渐变 + 网格线 + 数据点 + 底部 .chart-labels。
+ */
+
+.chart-line > svg {
+  display: block;
+  width: 100%;
+  height: 150px;
+  overflow: visible;
+}

package/dist/components/chart-line.mjs

@@ -0,0 +1,4 @@
+// @icen.ai/ui — kit: chart-line（CSS + behavior 一行入口；构建产物，勿手改）
+import './chart-line.css';
+import './charts.css';
+export { renderLine } from '../behaviors/charts.mjs';

package/dist/components/chart-pie.css

@@ -0,0 +1,26 @@
+/*
+ * @icen.ai/ui — Component: chart-pie（饼/环形图专属样式）
+ * 依赖：charts.css（基座 .chart-legend）
+ *
+ * DOM 由 behaviors/charts.ts 的 renderDonut 构建：
+ *   .chart-donut > svg[viewBox="0 0 120 120"]（-90° 起笔）
+ *   .chart-donut > .chart-legend
+ */
+
+.chart-donut {
+  display: flex;
+  align-items: center;
+  gap: var(--density-space-md);
+  min-height: 150px;
+}
+.chart-donut > svg {
+  width: 132px;
+  height: 132px;
+  flex-shrink: 0;
+}
+.chart-donut-center {
+  font-variant-numeric: tabular-nums;
+  text-anchor: middle;
+  fill: var(--token-text);
+  font-weight: 600;
+}

package/dist/components/chart-pie.mjs

@@ -0,0 +1,4 @@
+// @icen.ai/ui — kit: chart-pie（CSS + behavior 一行入口；构建产物，勿手改）
+import './chart-pie.css';
+import './charts.css';
+export { renderDonut } from '../behaviors/charts.mjs';

package/dist/components/chart-radar.css

@@ -0,0 +1,19 @@
+/*
+ * @icen.ai/ui — Component: chart-radar（雷达图专属样式）
+ * 依赖：charts.css（基座 .chart-legend）
+ *
+ * DOM 由 behaviors/charts.ts 的 renderRadar 构建：
+ *   .chart-radar > svg[viewBox="0 0 200 200"]（N 轴蛛网 + 数据多边形）
+ *                > .chart-legend
+ * 多系列时各系列分配 chart-tone-1..6，图例由 behavior 生成。
+ */
+
+.chart-radar > svg {
+  display: block;
+  width: 100%;
+  max-width: 260px;
+  height: auto;
+  aspect-ratio: 1;
+  overflow: visible;
+}
+.chart-radar { gap: var(--density-space-md); }

package/dist/components/chart-radar.mjs

@@ -0,0 +1,4 @@
+// @icen.ai/ui — kit: chart-radar（CSS + behavior 一行入口；构建产物，勿手改）
+import './chart-radar.css';
+import './charts.css';
+export { renderRadar } from '../behaviors/charts.mjs';

package/dist/components/chart-sparkline.css

@@ -0,0 +1,14 @@
+/*
+ * @icen.ai/ui — Component: chart-sparkline（迷你趋势线专属样式）
+ * 依赖：charts.css（基座）
+ *
+ * DOM 由 behaviors/charts.ts 的 renderSparkline 构建：
+ *   .chart-sparkline > svg[viewBox="0 0 96 28"]（无轴，末点高亮）
+ */
+
+.chart-sparkline > svg {
+  display: block;
+  width: 96px;
+  height: 28px;
+  overflow: visible;
+}

package/dist/components/chart-sparkline.mjs

@@ -0,0 +1,4 @@
+// @icen.ai/ui — kit: chart-sparkline（CSS + behavior 一行入口；构建产物，勿手改）
+import './chart-sparkline.css';
+import './charts.css';
+export { renderSparkline } from '../behaviors/charts.mjs';

package/dist/components/chart-stack.css

@@ -0,0 +1,30 @@
+/*
+ * @icen.ai/ui — Component: chart-stack（堆叠条图专属样式）
+ * 依赖：charts.css（基座 .chart-legend）
+ *
+ * DOM 由 behaviors/charts.ts 的 renderStack 构建：
+ *   .chart-stack > .chart-stack-seg[]
+ *   .chart-legend
+ */
+
+.chart-stack {
+  height: 16px;
+  display: flex;
+  overflow: hidden;
+  border-radius: var(--radius-full);
+  background: var(--token-fill-2);
+  margin-bottom: var(--density-space-sm);
+}
+.chart-stack-seg {
+  height: 100%;
+  min-width: 3px;
+  background: var(--chart-tone, var(--token-accent));
+  transition: width var(--icen-tx-slow);
+}
+.chart-stack-seg:hover {
+  filter: brightness(1.08);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .chart-stack-seg { transition: none; }
+}

package/dist/components/chart-stack.mjs

@@ -0,0 +1,4 @@
+// @icen.ai/ui — kit: chart-stack（CSS + behavior 一行入口；构建产物，勿手改）
+import './chart-stack.css';
+import './charts.css';
+export { renderStack } from '../behaviors/charts.mjs';