@icen.ai/ui 0.8.1 → 0.10.0

package/dist/components/stat.css

@@ -1,232 +1,238 @@
+@layer icen.components {
 /*
  * @icen.ai/ui — Component: stat（指标卡）
  *
  * 完整契约：
- *   <div class="stat-grid [stat-grid--2|stat-grid--3|stat-grid--4]">
- *     <div class="stat-card [.stat-card--interactive] [.stat-card--horizontal]">
- *       <div class="stat-head">
- *         <span class="stat-label">用户总数</span>
- *         <span class="stat-icon [.icon--success|.icon--warning|.icon--error|.icon--info]>…svg…</span>
+ *   <div class="icen-stat-grid [icen-stat-grid--2|icen-stat-grid--3|icen-stat-grid--4]">
+ *     <div class="icen-stat-card [.icen-stat-card--interactive] [.icen-stat-card--horizontal]">
+ *       <div class="icen-stat-head">
+ *         <span class="icen-stat-label">用户总数</span>
+ *         <span class="icen-stat-icon [.icen-icon--success|.icen-icon--warning|.icen-icon--error|.icen-icon--info]>…svg…</span>
  *       </div>
- *       <div class="stat-body">
- *         <div class="stat-num [--accent|--warning|--error|--info]">0</div>
- *         <div class="stat-delta [.up|.down|.flat]">          ← 可选趋势
+ *       <div class="icen-stat-body">
+ *         <div class="icen-stat-num [--accent|--warning|--error|--info]">0</div>
+ *         <div class="icen-stat-delta [.icen-up|.icen-down|.icen-flat]">          ← 可选趋势
  *           <svg>…arrow…</svg> +12.4%
- *           <span class="stat-period">比上周</span>
+ *           <span class="icen-stat-period">比上周</span>
  *         </div>
  *       </div>
- *       <div class="stat-spark">…svg mini chart…</div>         ← 可选：迷你折线/柱状
- *       <div class="stat-progress">                           ← 可选：进度环
- *         <svg class="stat-ring" viewBox="0 0 36 36">
- *           <circle class="stat-ring-track" cx="18" cy="18" r="15.5" />
- *           <circle class="stat-ring-fill" cx="18" cy="18" r="15.5" style="stroke-dasharray:75,100" />
+ *       <div class="icen-stat-spark">…svg mini icen-chart…</div>         ← 可选：迷你折线/柱状
+ *       <div class="icen-stat-progress">                           ← 可选：进度环
+ *         <svg class="icen-stat-ring" viewBox="0 0 36 36">
+ *           <circle class="icen-stat-ring-track" cx="18" cy="18" r="15.5" />
+ *           <circle class="icen-stat-ring-fill" cx="18" cy="18" r="15.5" style="stroke-dasharray:75,100" />
  *         </svg>
  *       </div>
  *     </div>
  *   </div>
  *
- * .stat-card--horizontal：横向布局（数字在右，标签在左），适合 dashboard 顶栏。
- * .stat-spark：内嵌迷你折线/柱状图（消费方可引用 chart-sparkline.css 或自绘 SVG）。
- * .stat-ring：进度环（SVG stroke-dasharray 控制百分比，0-100）。
+ * .icen-stat-card--horizontal：横向布局（数字在右，标签在左），适合 dashboard 顶栏。
+ * .icen-stat-spark：内嵌迷你折线/柱状图（消费方可引用 chart-sparkline.css 或自绘 SVG）。
+ * .icen-stat-ring：进度环（SVG stroke-dasharray 控制百分比，0-100）。
  */
 
-.stat-grid {
+.icen-stat-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
-  gap: var(--density-space-md);
-  margin-bottom: var(--density-space-lg);
+  gap: var(--icen-density-space-md);
+  margin-bottom: var(--icen-density-space-lg);
 }
-.stat-grid--2 { grid-template-columns: repeat(2, 1fr); }
-.stat-grid--3 { grid-template-columns: repeat(3, 1fr); }
-.stat-grid--4 { grid-template-columns: repeat(4, 1fr); }
+.icen-stat-grid--2 { grid-template-columns: repeat(2, 1fr); }
+.icen-stat-grid--3 { grid-template-columns: repeat(3, 1fr); }
+.icen-stat-grid--4 { grid-template-columns: repeat(4, 1fr); }
 
-.stat-card {
+.icen-stat-card {
   display: flex;
   flex-direction: column;
-  gap: var(--density-space-xs);
-  background: var(--token-surface);
-  border: 1px solid var(--token-line-soft);
-  border-radius: var(--radius-lg);
-  padding: var(--density-space-md);
-  box-shadow: var(--token-shadow-elevated);
+  gap: var(--icen-density-space-xs);
+  background: var(--icen-token-surface);
+  border: 1px solid var(--icen-token-line-soft);
+  border-radius: var(--icen-radius-lg);
+  padding: var(--icen-density-space-md);
+  box-shadow: var(--icen-token-shadow-elevated);
   transition:
     border-color var(--icen-tx-fast),
     box-shadow var(--icen-tx-fast),
     transform var(--icen-tx-fast);
 }
-.stat-card--interactive {
+.icen-stat-card--interactive {
   cursor: pointer;
 }
-.stat-card--interactive:hover {
-  transform: translateY(-1px);
-  border-color: color-mix(in srgb, var(--token-accent) 26%, var(--token-outline-soft));
-  box-shadow: var(--token-shadow-card);
+/* hover 抬升仅可悬停设备生效（触屏关闭，AGENTS 动效守卫） */
+@media (hover: hover) and (pointer: fine) {
+  .icen-stat-card--interactive:hover {
+    transform: translateY(-1px);
+    border-color: color-mix(in srgb, var(--icen-token-accent) 26%, var(--icen-token-outline-soft));
+    box-shadow: var(--icen-token-shadow-card);
+  }
 }
 
-.stat-head {
+.icen-stat-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: var(--density-space-sm);
+  gap: var(--icen-density-space-sm);
 }
-.stat-label {
-  color: var(--token-text-faint);
-  font-size: var(--density-font-size-xs);
+.icen-stat-label {
+  color: var(--icen-token-text-faint);
+  font-size: var(--icen-density-font-size-xs);
   letter-spacing: 0.05em;
   text-transform: uppercase;
 }
-.stat-icon {
+.icen-stat-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 24px;
   height: 24px;
-  border-radius: var(--radius-sm);
-  background: var(--token-accent-subtle);
-  color: var(--token-accent);
-}
-.stat-icon.icon--success { background: color-mix(in srgb, var(--token-success) 14%, transparent); color: var(--token-success); }
-.stat-icon.icon--warning { background: color-mix(in srgb, var(--token-warning) 14%, transparent); color: var(--token-warning); }
-.stat-icon.icon--error   { background: color-mix(in srgb, var(--token-error) 14%, transparent); color: var(--token-error); }
-.stat-icon.icon--info    { background: color-mix(in srgb, var(--token-info) 14%, transparent); color: var(--token-info); }
-.stat-icon svg { width: 14px; height: 14px; }
+  border-radius: var(--icen-radius-sm);
+  background: var(--icen-token-accent-subtle);
+  color: var(--icen-token-accent);
+}
+.icen-stat-icon.icen-icon--success { background: color-mix(in srgb, var(--icen-token-success) 14%, transparent); color: var(--icen-token-success); }
+.icen-stat-icon.icen-icon--warning { background: color-mix(in srgb, var(--icen-token-warning) 14%, transparent); color: var(--icen-token-warning); }
+.icen-stat-icon.icen-icon--error   { background: color-mix(in srgb, var(--icen-token-error) 14%, transparent); color: var(--icen-token-error); }
+.icen-stat-icon.icen-icon--info    { background: color-mix(in srgb, var(--icen-token-info) 14%, transparent); color: var(--icen-token-info); }
+.icen-stat-icon svg { width: 14px; height: 14px; }
 
 /* ── 内容体（数字 + 趋势） ── */
-.stat-body {
+.icen-stat-body {
   display: flex;
   flex-direction: column;
   gap: 2px;
 }
 
-.stat-num {
-  font-size: var(--density-font-size-2xl);
+.icen-stat-num {
+  font-size: var(--icen-density-font-size-2xl);
   font-weight: 700;
   line-height: 1.2;
   font-variant-numeric: tabular-nums lining-nums;
-  color: var(--token-text);
+  color: var(--icen-token-text);
   word-break: break-all;
 }
-.stat-num--accent  { color: var(--token-accent); }
-.stat-num--warning { color: var(--token-warning); }
-.stat-num--error   { color: var(--token-error); }
-.stat-num--info    { color: var(--token-info); }
+.icen-stat-num--accent  { color: var(--icen-token-accent); }
+.icen-stat-num--warning { color: var(--icen-token-warning); }
+.icen-stat-num--error   { color: var(--icen-token-error); }
+.icen-stat-num--info    { color: var(--icen-token-info); }
 
-.stat-delta {
+.icen-stat-delta {
   display: inline-flex;
   align-items: center;
   gap: 4px;
-  font-size: var(--density-font-size-xs);
-  color: var(--token-text-muted);
+  font-size: var(--icen-density-font-size-xs);
+  color: var(--icen-token-text-muted);
   font-variant-numeric: tabular-nums;
 }
-.stat-delta svg { width: 12px; height: 12px; }
-.stat-delta.up   { color: var(--token-success); }
-.stat-delta.down { color: var(--token-error); }
-.stat-delta.flat { color: var(--token-text-faint); }
-.stat-period {
-  color: var(--token-text-faint);
-  margin-left: var(--density-space-xs);
+.icen-stat-delta svg { width: 12px; height: 12px; }
+.icen-stat-delta.icen-up   { color: var(--icen-token-success); }
+.icen-stat-delta.icen-down { color: var(--icen-token-error); }
+.icen-stat-delta.icen-flat { color: var(--icen-token-text-faint); }
+.icen-stat-period {
+  color: var(--icen-token-text-faint);
+  margin-inline-start: var(--icen-density-space-xs);
 }
 
 /* 紧凑变体 */
-.stat-card--sm {
-  padding: var(--density-space-sm);
+.icen-stat-card--sm {
+  padding: var(--icen-density-space-sm);
   gap: 2px;
 }
-.stat-card--sm .stat-num { font-size: var(--density-font-size-lg); }
-.stat-card--sm .stat-label { font-size: var(--density-font-size-2xs); }
+.icen-stat-card--sm .icen-stat-num { font-size: var(--icen-density-font-size-lg); }
+.icen-stat-card--sm .icen-stat-label { font-size: var(--icen-density-font-size-2xs); }
 
-/* ── 横向布局（dashboard 顶栏：标签左 + 数字右） ── */
-.stat-card--horizontal {
+/* ── 横向布局（dashboard 顶栏：标签起始缘 + 数字行内末端） ── */
+.icen-stat-card--horizontal {
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
-  gap: var(--density-space-md);
+  gap: var(--icen-density-space-md);
 }
-.stat-card--horizontal .stat-head {
+.icen-stat-card--horizontal .icen-stat-head {
   flex-direction: column;
   align-items: flex-start;
   gap: 2px;
   flex: 1;
-  min-width: 0;
+  min-inline-size: 0;
 }
-.stat-card--horizontal .stat-body {
-  text-align: right;
+.icen-stat-card--horizontal .icen-stat-body {
+  text-align: end;
   flex-shrink: 0;
 }
-.stat-card--horizontal .stat-delta {
+.icen-stat-card--horizontal .icen-stat-delta {
   justify-content: flex-end;
 }
 
 /* ── 迷你图槽（stat-spark）── */
-.stat-spark {
-  margin-top: var(--density-space-xs);
+.icen-stat-spark {
+  margin-top: var(--icen-density-space-xs);
   height: 28px;
   width: 100%;
 }
-.stat-spark svg {
+.icen-stat-spark svg {
   width: 100%;
   height: 100%;
   display: block;
 }
-.stat-card--horizontal .stat-spark {
+.icen-stat-card--horizontal .icen-stat-spark {
   margin-top: 0;
   width: 80px;
   flex-shrink: 0;
 }
 
 /* ── 进度环 ── */
-.stat-progress {
+.icen-stat-progress {
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-top: var(--density-space-xs);
+  margin-top: var(--icen-density-space-xs);
 }
-.stat-card--horizontal .stat-progress {
+.icen-stat-card--horizontal .icen-stat-progress {
   margin-top: 0;
   flex-shrink: 0;
 }
-.stat-ring {
+.icen-stat-ring {
   width: 48px;
   height: 48px;
   transform: rotate(-90deg);
 }
-.stat-ring-track {
+.icen-stat-ring-track {
   fill: none;
-  stroke: var(--token-fill-2);
+  stroke: var(--icen-token-fill-2);
   stroke-width: 3;
 }
-.stat-ring-fill {
+.icen-stat-ring-fill {
   fill: none;
-  stroke: var(--token-accent);
+  stroke: var(--icen-token-accent);
   stroke-width: 3;
   stroke-linecap: round;
   stroke-dasharray: 0, 100;
-  transition: stroke-dasharray var(--icen-tx-slow) var(--ease-out);
+  transition: stroke-dasharray var(--icen-tx-slow) var(--icen-ease-out);
 }
-.stat-card .stat-ring-fill { stroke: var(--token-accent); }
+.icen-stat-card .icen-stat-ring-fill { stroke: var(--icen-token-accent); }
 
 /* ── 数字带前缀/后缀 ── */
-.stat-num-prefix,
-.stat-num-suffix {
+.icen-stat-num-prefix,
+.icen-stat-num-suffix {
   font-size: 0.6em;
   font-weight: 500;
-  color: var(--token-text-faint);
+  color: var(--icen-token-text-faint);
   margin: 0 1px;
 }
 
 /* ── 加载态骨架（脉冲 keyframes 见 base.css 的 icen-skeleton-pulse） ── */
-.stat-card.is-loading .stat-num,
-.stat-card.is-loading .stat-delta {
+.icen-stat-card.is-loading .icen-stat-num,
+.icen-stat-card.is-loading .icen-stat-delta {
   color: transparent;
-  background: var(--token-fill-2);
-  border-radius: var(--radius-xs);
+  background: var(--icen-token-fill-2);
+  border-radius: var(--icen-radius-xs);
   animation: icen-skeleton-pulse var(--stat-skeleton-duration, 1.5s) ease-in-out infinite;
 }
-.stat-card.is-loading .stat-num { height: 28px; }
-.stat-card.is-loading .stat-delta { height: 14px; width: 60%; }
+.icen-stat-card.is-loading .icen-stat-num { height: 28px; }
+.icen-stat-card.is-loading .icen-stat-delta { height: 14px; width: 60%; }
 @media (prefers-reduced-motion: reduce) {
-  .stat-card.is-loading .stat-num,
-  .stat-card.is-loading .stat-delta { animation: none; }
-  .stat-ring-fill { transition: none; }
+  .icen-stat-card.is-loading .icen-stat-num,
+  .icen-stat-card.is-loading .icen-stat-delta { animation: none; }
+  .icen-stat-ring-fill { transition: none; }
+}
+
 }