@icen.ai/ui 0.4.0 → 0.8.0

package/dist/components/badge.css

@@ -0,0 +1,127 @@
+/*
+ * @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: var(--density-font-size-2xs);
+  font-weight: 600;
+  line-height: 1;
+  font-variant-numeric: tabular-nums;
+  color: var(--token-on-accent);
+  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: var(--density-font-size-2xs);
+  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);
+}
+
+/* 数字超过 99 显示 99+（消费方决定是否使用，这里只保证宽度容纳） */
+.badge[data-overflow] {
+  min-width: 20px;
+  padding: 0 5px;
+}

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,59 @@
   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: icen-pop-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);
+}
+
+/* ── 面包屑分隔符变体 ── */
+.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/btn.css

@@ -75,7 +75,7 @@
 /* ── 变体 ── */
 .btn-primary {
   --btn-bg: var(--token-accent);
-  --btn-fg: var(--token-on-accent, #fff);
+  --btn-fg: var(--token-on-accent);
   --btn-border: var(--token-accent);
   --btn-bg-hover: var(--token-accent-deep, color-mix(in srgb, var(--token-accent) 85%, black));
   --btn-border-hover: var(--token-accent-deep, var(--token-accent));
@@ -91,7 +91,7 @@
   --btn-bg-hover: var(--token-error);
   --btn-border-hover: var(--token-error);
 }
-.btn-danger:hover { color: var(--token-on-accent, #fff); }
+.btn-danger:hover { color: var(--token-on-accent); }
 
 .btn-ghost {
   --btn-bg: transparent;
@@ -162,14 +162,11 @@
   border: 2px solid color-mix(in srgb, currentColor 35%, transparent);
   border-top-color: currentColor;
   border-radius: 50%;
-  animation: btn-spin var(--duration-slow) linear infinite;
+  animation: icen-spin var(--btn-spin-duration, var(--duration-slow)) linear infinite;
   opacity: 1; /* 覆盖 .pressable::after 渐变（若与 .pressable 同用） */
   background: none;
   pointer-events: none;
 }
-@keyframes btn-spin {
-  to { transform: rotate(360deg); }
-}
 
 /* 图标按钮内部 svg 默认尺寸对齐字号 */
 .btn-icon-start, .btn-icon-end {
@@ -179,5 +176,5 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .btn.is-loading::after { animation-duration: 1.2s; }
+  .btn.is-loading::after { --btn-spin-duration: 1.2s; }
 }

package/dist/components/card.css

@@ -25,6 +25,7 @@
  */
 
 .card {
+  position: relative;
   background: var(--token-card);
   border: 1px solid var(--token-outline-soft);
   box-shadow: var(--token-shadow-inset);
@@ -80,11 +81,22 @@
   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 {
   width: 100%;
   height: 100%;
   object-fit: cover;
+  transition: transform var(--icen-tx-slow) var(--ease-out);
 }
 .card-tag {
   position: absolute;
@@ -93,7 +105,7 @@
   padding: 2px var(--density-space-xs);
   font-size: var(--density-font-size-xs);
   font-weight: 600;
-  color: var(--token-on-accent, #fff);
+  color: var(--token-on-accent);
   background: color-mix(in srgb, var(--token-text) 70%, transparent);
   border-radius: var(--radius-xs);
   backdrop-filter: blur(8px);
@@ -154,3 +166,56 @@
 @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;
+}

package/dist/components/chart-bar.css

@@ -77,3 +77,13 @@
 @media (prefers-reduced-motion: reduce) {
   .chart-vbar-bar, .chart-hbar-bar { transition: none; }
 }
+
+/* ── 多系列：分组（簇内并排）与堆叠（列内向上叠）── */
+.chart-vbar-track--multi { gap: 2px; }
+.chart-vbar-track--multi > .chart-vbar-bar { flex: 1; min-width: 0; width: auto; }
+.chart-vbar-track--multi.chart-vbar-track--stacked {
+  flex-direction: column;
+  justify-content: flex-end;
+  gap: 0;
+}
+.chart-vbar-track--multi.chart-vbar-track--stacked > .chart-vbar-bar { flex: none; width: 100%; }

package/dist/components/chart-calendar.mjs

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

package/dist/components/chart-gauge.css

@@ -27,7 +27,7 @@
   gap: 1px;
 }
 .chart-gauge-value {
-  font-size: 20px;
+  font-size: var(--density-font-size-2xl);
   font-weight: 700;
   font-variant-numeric: tabular-nums;
   color: var(--token-text);

package/dist/components/chart-heatmap.css

@@ -50,3 +50,43 @@
 }
 .chart-heatmap-legend > span:first-child { margin-right: 2px; }
 .chart-heatmap-legend > span:last-child { margin-left: 2px; }
+
+/* ── 贡献日历（renderCalendar）：月份标签 + 星期列 + 周格 ──
+ * 布局 grid：左列星期标签（一/三/五/日），右列自上而下 月份行 / 周格 / 图例。
+ * 月份标签按周列定位：left = col / columns * 100%。 */
+.chart-calendar {
+  display: grid;
+  grid-template-columns: 14px 1fr;
+  grid-template-rows: 14px auto auto;
+  column-gap: 4px;
+  row-gap: 3px;
+}
+.chart-calendar-months {
+  grid-column: 2;
+  position: relative;
+  font-size: var(--density-font-size-2xs);
+  color: var(--token-text-faint);
+}
+.chart-calendar-month {
+  position: absolute;
+  top: 0;
+  left: calc(var(--col, 0) / var(--columns, 1) * 100%);
+  white-space: nowrap;
+}
+.chart-calendar-weekdays {
+  grid-column: 1;
+  grid-row: 2;
+  display: grid;
+  grid-template-rows: repeat(7, 1fr);
+  font-size: var(--density-font-size-2xs);
+  color: var(--token-text-faint);
+  line-height: 1;
+}
+.chart-calendar .chart-heatmap-grid {
+  grid-column: 2;
+  grid-row: 2;
+}
+.chart-calendar .chart-heatmap-legend {
+  grid-column: 2;
+  grid-row: 3;
+}

package/dist/components/chart-scatter.css

@@ -0,0 +1,24 @@
+/*
+ * @icen.ai/ui — Component: chart-scatter（散点/气泡图专属样式）
+ * 依赖：charts.css（基座 .chart / tooltip / [data-chart-mark] 交互态）
+ *
+ * DOM 由 behaviors/charts.ts 的 renderScatter 构建：
+ *   .chart-scatter > svg（360×220 viewBox，网格 + 刻度 + circle[data-chart-mark]）
+ * 气泡第三维：points[].size 映射半径 3–10；hover/点击/右键走通用层委托。
+ */
+
+.chart-scatter svg {
+  width: 100%;
+  height: auto;
+  display: block;
+}
+.chart-scatter circle[data-chart-mark] {
+  transition: fill-opacity var(--icen-tx-fast);
+}
+.chart-scatter circle[data-chart-mark]:hover {
+  fill-opacity: 0.85;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .chart-scatter circle[data-chart-mark] { transition: none; }
+}

package/dist/components/chart-scatter.mjs

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

package/dist/components/charts.css

@@ -70,7 +70,7 @@
   flex: 1;
   min-width: 0;
   text-align: center;
-  font-size: 9px;
+  font-size: var(--density-font-size-2xs);
   color: var(--token-text-faint);
   overflow: hidden;
   text-overflow: ellipsis;
@@ -85,3 +85,88 @@
 .chart-tone-4 { --chart-tone: var(--token-warning); }
 .chart-tone-5 { --chart-tone: var(--token-info); }
 .chart-tone-6 { --chart-tone: color-mix(in srgb, var(--token-text) 50%, transparent); }
+
+/* ═══ 通用层（renderChart）：标题 / 内置 tooltip / 标记交互 / 图例切换 ═══ */
+
+/* 标题（spec.title 有值时渲染） */
+.chart-title {
+  font-size: var(--density-font-size-sm);
+  font-weight: 600;
+  color: var(--token-text);
+}
+
+/* 头部行（renderChart 渲染）：标题 + 图例可见性小眼睛 */
+.chart-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--density-space-sm);
+  min-height: 24px;
+}
+.chart-legend-eye {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  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);
+}
+.chart-legend-eye:hover { color: var(--token-text); background: var(--token-fill-1); }
+.chart-legend-eye:focus-visible { outline: none; box-shadow: var(--icen-ring); }
+.chart-legend-eye svg { width: 13px; height: 13px; }
+
+/* 图例统一隐藏：容器级继承——data-legend-hidden 一条选择器覆盖全部图型的图例 */
+[data-legend-hidden='true'] .chart-legend,
+[data-legend-hidden='true'] .chart-legend--toggle,
+[data-legend-hidden='true'] .chart-heatmap-legend {
+  display: none;
+}
+
+/* 内置 tooltip：portal 到 body 的单例，position: fixed 跟随指针 */
+.chart-tooltip {
+  position: fixed;
+  z-index: var(--z-tooltip);
+  max-width: 280px;
+  padding: 3px 8px;
+  border-radius: var(--radius-sm);
+  background: var(--token-card-strong);
+  border: 1px solid var(--token-line);
+  box-shadow: var(--token-shadow-elevated);
+  font-size: var(--density-font-size-xs);
+  font-variant-numeric: tabular-nums;
+  color: var(--token-text);
+  pointer-events: none;
+}
+.chart-tooltip[hidden] { display: none; }
+
+/* 数据标记（各图型的条/点/段/格）：交互态由委托层挂 .is-hover，图例切换挂 .is-off */
+[data-chart-mark] { cursor: pointer; }
+[data-chart-mark].is-hover { filter: brightness(1.12); }
+[data-chart-mark].is-off { opacity: 0.16; pointer-events: none; }
+svg circle[data-chart-mark].is-hover { stroke-width: 3; }
+
+/* 可切换图例：行可点（Enter/Space 等价），.is-off 划线淡化 */
+.chart-legend--toggle .chart-legend-toggle-item {
+  cursor: pointer;
+  border-radius: var(--radius-xs);
+  padding: 2px 4px;
+  margin: -2px -4px;
+  transition: background-color var(--icen-tx-fast);
+}
+.chart-legend--toggle .chart-legend-toggle-item:hover { background: var(--token-fill-1); }
+.chart-legend--toggle .chart-legend-toggle-item:focus-visible {
+  outline: none;
+  box-shadow: var(--icen-ring);
+}
+.chart-legend--toggle .is-off .chart-legend-label,
+.chart-legend--toggle .is-off .chart-legend-value {
+  color: var(--token-text-faint);
+  text-decoration: line-through;
+}
+.chart-legend--toggle .is-off .chart-legend-dot { opacity: 0.3; }

package/dist/components/charts.mjs

@@ -9,4 +9,5 @@ import './chart-area.css';
 import './chart-stack.css';
 import './chart-gauge.css';
 import './chart-sparkline.css';
+import './chart-scatter.css';
 export * from '../behaviors/charts.mjs';