@icen.ai/ui 0.9.0 → 0.11.0

package/dist/components/chart-gauge.css

@@ -1,38 +1,61 @@
+@layer icen.components {
 /*
  * @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
+ *   .icen-chart-gauge > svg[viewBox="0 0 120 120"]（-90° 起笔，环形单值）
+ *                > .icen-chart-gauge-center > .icen-chart-gauge-value + .icen-chart-gauge-label
  */
 
-.chart-gauge {
+.icen-chart-gauge {
   position: relative;
   width: 132px;
   flex-shrink: 0;
 }
-.chart-gauge > svg {
+.icen-chart-gauge > svg {
   display: block;
   width: 132px;
   height: 132px;
+  overflow: visible;
 }
-.chart-gauge-center {
+/* 轨道与进度同宽（10）；轨道压到 6 成，进度弧圆头收口 */
+.icen-chart-gauge svg circle {
+  stroke-width: 10;
+}
+.icen-chart-gauge svg circle:first-of-type {
+  opacity: 0.7;
+}
+.icen-chart-gauge-center {
   position: absolute;
   inset: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 1px;
+  gap: 2px;
+  text-align: center;
 }
-.chart-gauge-value {
-  font-size: var(--density-font-size-2xl);
-  font-weight: 700;
+.icen-chart-gauge-value {
+  font-size: var(--icen-density-font-size-2xl);
+  font-weight: 600;
+  line-height: 1.05;
+  letter-spacing: -0.02em;
   font-variant-numeric: tabular-nums;
-  color: var(--token-text);
+  color: var(--icen-token-text);
+}
+.icen-chart-gauge-label {
+  max-width: 88px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 11px;
+  letter-spacing: 0.01em;
+  color: var(--icen-token-text-faint);
 }
-.chart-gauge-label {
-  font-size: var(--density-font-size-xs);
-  color: var(--token-text-faint);
+
+@media (forced-colors: active) {
+  .icen-chart-gauge svg circle:first-of-type { stroke: CanvasText; }
+}
+
 }

package/dist/components/chart-gauge.d.mts

@@ -0,0 +1,2 @@
+// kit: chart-gauge 类型面（构建产物，勿手改）
+export { renderGauge } from '../behaviors/charts.mjs';

package/dist/components/chart-graph.css

@@ -1,57 +1,72 @@
+@layer icen.components {
 /*
  * @icen.ai/ui — Component: chart-graph（知识图谱 / 力导向 node-link 专属样式）
- * 依赖：charts.css（基座 .chart / tooltip / [data-chart-mark] 交互态 / 可切换图例）
+ * 依赖：charts.css（基座 .icen-chart / tooltip / [data-icen-chart-mark] 交互态 / 可切换图例）
  *
  * DOM 由 behaviors/charts.ts 的 renderGraph 构建：
- *   .chart-graph > svg（360×260 viewBox）
- *     ├ g.chart-graph-edges > line.chart-graph-edge（line-soft，簇隐藏联动 .is-off）
- *     └ g.chart-graph-nodes > g.chart-graph-node（transform 定位）
- *         ├ circle.chart-graph-dot（簇调色；r = 6 + weight 归一 × 12）
+ *   .icen-chart-graph > svg（360×260 viewBox）
+ *     ├ g.chart-graph-edges > line.icen-chart-graph-edge（line-soft，簇隐藏联动 .is-off）
+ *     └ g.chart-graph-nodes > g.icen-chart-graph-node（transform 定位）
+ *         ├ circle.icen-chart-graph-dot（簇调色；r = 6 + weight 归一 × 12）
  *         ├ circle.chart-graph-hit（透明命中圆）＋ <title>
  * 布局确定性（同数据同布局，无随机源）；拖拽 = pointer + 局部松弛（rAF，
  * 拖拽节点 .is-drag 描边 accent）。
  */
 
-.chart-graph svg {
+.icen-chart-graph svg {
   width: 100%;
   height: auto;
   display: block;
+  overflow: visible;
 }
 
-/* 边：不参与命中（交互只留节点），任一端簇隐藏时淡化 */
-.chart-graph-edge {
+/* 边：不参与命中（交互只留节点），任一端簇隐藏时淡化；权重宽度由行为直出 */
+.icen-chart-graph-edge {
   pointer-events: none;
+  stroke: var(--icen-token-line);
+  opacity: 0.9;
   transition: opacity var(--icen-tx-fast);
 }
-.chart-graph-edge.is-off {
-  opacity: 0.1;
+.icen-chart-graph-edge.is-off {
+  opacity: 0.08;
 }
 
 /* 节点：拖拽抓手（触屏禁默认手势，pointer 拖拽不滚动页面） */
-.chart-graph .chart-graph-node {
+.icen-chart-graph .icen-chart-graph-node {
   cursor: grab;
   touch-action: none;
 }
-.chart-graph .chart-graph-node:active {
+.icen-chart-graph .icen-chart-graph-node:active {
   cursor: grabbing;
 }
-.chart-graph-dot {
-  transition: stroke var(--icen-tx-fast), stroke-width var(--icen-tx-fast);
+.icen-chart-graph-dot {
+  transition: stroke var(--icen-tx-fast), stroke-width var(--icen-tx-fast), filter var(--icen-tx-fast);
 }
 /* hover：描边换前景色（bindDatumEvents 挂 .is-hover） */
-.chart-graph-node.is-hover .chart-graph-dot {
-  stroke: var(--token-text);
+.icen-chart-graph-node.is-hover .icen-chart-graph-dot {
+  stroke: var(--icen-token-text);
   stroke-width: 2;
+  filter: brightness(1.05);
 }
 /* 拖拽态：accent 描边 */
-.chart-graph-node.is-drag .chart-graph-dot {
-  stroke: var(--token-accent);
+.icen-chart-graph-node.is-drag .icen-chart-graph-dot {
+  stroke: var(--icen-token-accent);
   stroke-width: 2.5;
 }
+.icen-chart-graph-node.is-off {
+  opacity: 0.16;
+}
 
 @media (prefers-reduced-motion: reduce) {
-  .chart-graph-edge,
-  .chart-graph-dot {
+  .icen-chart-graph-edge,
+  .icen-chart-graph-dot {
     transition: none;
   }
 }
+
+@media (forced-colors: active) {
+  .icen-chart-graph-edge { stroke: GrayText; }
+  .icen-chart-graph-dot { stroke: CanvasText; }
+}
+
+}

package/dist/components/chart-graph.d.mts

@@ -0,0 +1,2 @@
+// kit: chart-graph 类型面（构建产物，勿手改）
+export { renderGraph, layoutGraph } from '../behaviors/charts.mjs';

package/dist/components/chart-heatmap.css

@@ -1,19 +1,23 @@
+@layer icen.components {
 /*
  * @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）。
+ *   .icen-chart-heatmap > .icen-chart-heatmap-grid > .icen-chart-heatmap-cell[data-icen-level=0-4][.is-blank]
+ *                  > .icen-chart-heatmap-legend
+ * 7 行（周一→周日）× N 周列，5 档色阶（data-icen-level 0-4）。
+ *
+ * RTL 豁免（guard 文件级白名单 scripts/guard/rtl.ts）：热力图格子按列号物理百分比定位
+ * （贡献图坐标系），RTL 不镜像。
  */
 
-.chart-heatmap {
+.icen-chart-heatmap {
   display: flex;
   flex-direction: column;
-  gap: var(--density-space-xs);
+  gap: 6px;
 }
-.chart-heatmap-grid {
+.icen-chart-heatmap-grid {
   display: grid;
   grid-template-rows: repeat(7, 1fr);
   grid-auto-flow: column;
@@ -21,72 +25,96 @@
   gap: 3px;
   width: 100%;
 }
-.chart-heatmap-cell {
+.icen-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 {
+  border-radius: var(--icen-radius-xs);
+  background: color-mix(in srgb, var(--icen-token-fill-2) 80%, transparent);
+  transition: box-shadow var(--icen-tx-fast), filter var(--icen-tx-fast);
+}
+.icen-chart-heatmap-cell.is-blank { background: transparent; }
+.icen-chart-heatmap-cell[data-icen-level='1'] { background: color-mix(in srgb, var(--chart-tone, var(--icen-token-accent)) 24%, var(--icen-token-fill-2)); }
+.icen-chart-heatmap-cell[data-icen-level='2'] { background: color-mix(in srgb, var(--chart-tone, var(--icen-token-accent)) 46%, var(--icen-token-fill-2)); }
+.icen-chart-heatmap-cell[data-icen-level='3'] { background: color-mix(in srgb, var(--chart-tone, var(--icen-token-accent)) 70%, var(--icen-token-fill-2)); }
+.icen-chart-heatmap-cell[data-icen-level='4'] { background: var(--chart-tone, var(--icen-token-accent)); }
+
+/* hover：面色内圈 + 色环外圈（不改变格子尺寸，网格不跳） */
+.icen-chart-heatmap-cell:not(.is-blank):hover {
+  box-shadow:
+    0 0 0 1.5px var(--icen-token-card),
+    0 0 0 2.5px var(--chart-tone, var(--icen-token-accent));
+}
+.icen-chart-heatmap-cell:not(.is-blank):active {
+  filter: brightness(0.94);
+}
+
+.icen-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);
+  gap: 4px;
+  font-size: 11px;
+  letter-spacing: 0.01em;
+  color: var(--icen-token-text-faint);
 }
-.chart-heatmap-legend .chart-heatmap-cell {
+.icen-chart-heatmap-legend .icen-chart-heatmap-cell {
   width: 10px;
   height: 10px;
   aspect-ratio: auto;
+  border-radius: 2px; /* guard:allow-radius 微构件（bar/dot/track/指示器等图形级，不属容器圆角面） */
 }
-.chart-heatmap-legend > span:first-child { margin-right: 2px; }
-.chart-heatmap-legend > span:last-child { margin-left: 2px; }
+.icen-chart-heatmap-legend > span:first-child { margin-right: 2px; }
+.icen-chart-heatmap-legend > span:last-child { margin-left: 2px; }
 
 /* ── 贡献日历（renderCalendar）：月份标签 + 星期列 + 周格 ──
  * 布局 grid：左列星期标签（一/三/五/日），右列自上而下 月份行 / 周格 / 图例。
  * 月份标签按周列定位：left = col / columns * 100%。 */
-.chart-calendar {
+.icen-chart-calendar {
   display: grid;
-  grid-template-columns: 14px 1fr;
+  grid-template-columns: 16px 1fr;
   grid-template-rows: 14px auto auto;
-  column-gap: 4px;
-  row-gap: 3px;
+  column-gap: 6px;
+  row-gap: 4px;
 }
-.chart-calendar-months {
+.icen-chart-calendar-months {
   grid-column: 2;
   position: relative;
-  font-size: var(--density-font-size-2xs);
-  color: var(--token-text-faint);
+  font-size: 10px;
+  letter-spacing: 0.01em;
+  color: var(--icen-token-text-faint);
 }
-.chart-calendar-month {
+.icen-chart-calendar-month {
   position: absolute;
   top: 0;
   left: calc(var(--col, 0) / var(--columns, 1) * 100%);
   white-space: nowrap;
 }
-.chart-calendar-weekdays {
+.icen-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);
+  align-items: center;
+  font-size: 10px;
+  color: var(--icen-token-text-faint);
   line-height: 1;
 }
-.chart-calendar .chart-heatmap-grid {
+.icen-chart-calendar .icen-chart-heatmap-grid {
   grid-column: 2;
   grid-row: 2;
+  gap: 2px;
 }
-.chart-calendar .chart-heatmap-legend {
+.icen-chart-calendar .icen-chart-heatmap-legend {
   grid-column: 2;
   grid-row: 3;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .icen-chart-heatmap-cell { transition: none; }
+}
+
+@media (forced-colors: active) {
+  .icen-chart-heatmap-cell { border: 1px solid CanvasText; }
+  .icen-chart-heatmap-cell.is-blank { border-color: transparent; }
+}
+
+}

package/dist/components/chart-heatmap.d.mts

@@ -0,0 +1,2 @@
+// kit: chart-heatmap 类型面（构建产物，勿手改）
+export { renderHeatmap } from '../behaviors/charts.mjs';

package/dist/components/chart-line.css

@@ -1,15 +1,74 @@
+@layer icen.components {
 /*
  * @icen.ai/ui — Component: chart-line（折线图专属样式）
  * 依赖：charts.css（基座）
  *
  * DOM 由 behaviors/charts.ts 的 renderLine 构建：
- *   .chart-line > svg[viewBox="0 0 360 150"]
- * 含面积渐变 + 网格线 + 数据点 + 底部 .chart-labels。
+ *   .icen-chart-line > svg[viewBox="0 0 360 150"]
+ * 含面积渐变 + 网格线 + 数据点 + 底部 .icen-chart-labels。
+ * 网格线带 .icen-chart-grid，最底一条同时带 .icen-chart-baseline（轴基线加重）。
+ * spec.marks 的 SVG 标记（.icen-chart-mark-line 参考线 / .icen-chart-mark-point
+ * 标记点 + .icen-chart-mark-label 标注）直接追加进本 svg，样式属性直出（挡指针事件在基座）。
  */
 
-.chart-line > svg {
+.icen-chart-line {
+  position: relative;
+  min-width: 0;
+}
+.icen-chart-line > svg {
   display: block;
   width: 100%;
   height: 150px;
   overflow: visible;
 }
+
+/* 网格：四档横向发丝线；基线略重（1 档灰差，不做粗黑轴） */
+.icen-chart-line svg .icen-chart-grid {
+  stroke: var(--icen-token-line-soft);
+  opacity: 0.9;
+}
+.icen-chart-line svg .icen-chart-baseline {
+  stroke: var(--icen-token-line);
+  opacity: 1;
+}
+
+/* 数据线：单/多系列统一 2px（行为给 2.5/2，CSS 归一保持同族粗细） */
+.icen-chart-line svg > path[fill='none'] {
+  stroke-width: 2;
+}
+/* 面积渐变压到克制档：首色 .22、尾色 0，避免大色块压过线本身 */
+.icen-chart-line svg stop:first-child { stop-opacity: 0.22; }
+.icen-chart-line svg stop:last-child { stop-opacity: 0; }
+
+/* 数据点：白芯 + 色环；hover 放大 1.45×（命中圆在点之后，用相邻选择器把放大
+   落到被盖住的实心点上；命中圆自身只铺一层极淡的 accent 晕） */
+.icen-chart-line svg circle[data-icen-chart-mark]:not([data-icen-chart-hit]) {
+  transform-box: fill-box;
+  transform-origin: center;
+  transition: transform var(--icen-duration-fast) var(--icen-ease-out), opacity var(--icen-tx-fast);
+}
+.icen-chart-line svg circle[data-icen-chart-mark]:not([data-icen-chart-hit]):has(+ .is-hover) {
+  transform: scale(1.45);
+}
+.icen-chart-line svg circle[data-icen-chart-hit].is-hover {
+  fill: color-mix(in srgb, var(--icen-token-accent) 9%, transparent);
+}
+.icen-chart-line svg circle[data-icen-chart-mark].is-off {
+  opacity: 0.18;
+}
+
+/* 轴标签行与绘图区之间留一口气，不贴线 */
+.icen-chart-line .icen-chart-labels {
+  margin-top: 5px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .icen-chart-line svg circle[data-icen-chart-mark] { transition: none; }
+}
+
+@media (forced-colors: active) {
+  .icen-chart-line svg .icen-chart-grid,
+  .icen-chart-line svg .icen-chart-baseline { stroke: GrayText; }
+}
+
+}

package/dist/components/chart-line.d.mts

@@ -0,0 +1,2 @@
+// kit: chart-line 类型面（构建产物，勿手改）
+export { renderLine } from '../behaviors/charts.mjs';

package/dist/components/chart-map.d.mts

@@ -0,0 +1,2 @@
+// kit: chart-map 类型面（构建产物，勿手改）
+export { renderMap } from '../behaviors/charts.mjs';

package/dist/components/chart-pie.css

@@ -1,20 +1,52 @@
+@layer icen.components {
 /*
  * @icen.ai/ui — Component: chart-pie（饼/环形图专属样式）
- * 依赖：charts.css（基座 .chart-legend）
+ * 依赖：charts.css（基座 .icen-chart-legend）
  *
  * DOM 由 behaviors/charts.ts 的 renderDonut 构建：
- *   .chart-donut > svg[viewBox="0 0 120 120"]（-90° 起笔）
- *   .chart-donut > .chart-legend
+ *   .icen-chart-donut > svg[viewBox="0 0 120 120"]（-90° 起笔）
+ *   .icen-chart-donut > .icen-chart-legend
+ * 多段时 behavior 在每段尾部留 2.5 用户单位白隙（同色相邻段可辨）。
  */
 
-.chart-donut {
+.icen-chart-donut {
   display: flex;
   align-items: center;
-  gap: var(--density-space-md);
+  flex-wrap: wrap;
+  gap: var(--icen-density-space-md);
   min-height: 150px;
 }
-.chart-donut > svg {
+.icen-chart-donut > svg {
   width: 132px;
   height: 132px;
   flex-shrink: 0;
+  overflow: visible;
+}
+
+/* 环宽 13（轨道与弧一致）；hover 段加宽 2px 但不压邻段（底座已留 2.5 缝隙） */
+.icen-chart-donut svg circle {
+  stroke-width: 13;
+  transition: stroke-width var(--icen-duration-fast) var(--icen-ease-out), opacity var(--icen-tx-fast);
+}
+.icen-chart-donut svg circle[data-icen-chart-mark].is-hover {
+  stroke-width: 15;
+}
+.icen-chart-donut svg circle[data-icen-chart-mark].is-off {
+  opacity: 0.22;
+  stroke-width: 13;
+}
+
+.icen-chart-donut .icen-chart-legend {
+  gap: 6px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .icen-chart-donut svg circle { transition: none; }
+}
+
+@media (forced-colors: active) {
+  .icen-chart-donut svg circle { forced-color-adjust: none; }
+  .icen-chart-donut svg circle:first-of-type { stroke: CanvasText; }
+}
+
 }

package/dist/components/chart-pie.d.mts

@@ -0,0 +1,2 @@
+// kit: chart-pie 类型面（构建产物，勿手改）
+export { renderDonut } from '../behaviors/charts.mjs';

package/dist/components/chart-radar.css

@@ -1,14 +1,20 @@
+@layer icen.components {
 /*
  * @icen.ai/ui — Component: chart-radar（雷达图专属样式）
- * 依赖：charts.css（基座 .chart-legend）
+ * 依赖：charts.css（基座 .icen-chart-legend）
  *
  * DOM 由 behaviors/charts.ts 的 renderRadar 构建：
- *   .chart-radar > svg[viewBox="0 0 200 200"]（N 轴蛛网 + 数据多边形）
- *                > .chart-legend
+ *   .icen-chart-radar > svg[viewBox="0 0 200 200"]（N 轴蛛网 + 数据多边形）
+ *                > .icen-chart-legend
  * 多系列时各系列分配 chart-tone-1..6，图例由 behavior 生成。
+ * 蛛网：环与轴都是发丝实线（虚线在 200px 视觉尺寸下会碎），最外环略重。
  */
 
-.chart-radar > svg {
+.icen-chart-radar {
+  align-items: center;
+  gap: var(--icen-density-space-md);
+}
+.icen-chart-radar > svg {
   display: block;
   width: 100%;
   max-width: 260px;
@@ -16,4 +22,50 @@
   aspect-ratio: 1;
   overflow: visible;
 }
-.chart-radar { gap: var(--density-space-md); }
+
+/* 蛛网环：fill=none 的 polygon 即网格；虚线归一为实线，避免缩放后出现摩尔纹 */
+.icen-chart-radar svg polygon[fill='none'] {
+  stroke: var(--icen-token-line-soft);
+  stroke-dasharray: none;
+  opacity: 0.9;
+}
+.icen-chart-radar svg line {
+  stroke: var(--icen-token-line-soft);
+  opacity: 0.8;
+}
+.icen-chart-radar svg text {
+  font-size: 10px;
+  letter-spacing: 0.01em;
+  fill: var(--icen-token-text-muted);
+}
+/* 数据多边形：填充 12%，描边 1.75；hover 只加浓填充 */
+.icen-chart-radar svg polygon[fill-opacity] {
+  fill-opacity: 0.12;
+  stroke-width: 1.75;
+  transition: fill-opacity var(--icen-tx-fast);
+}
+.icen-chart-radar svg polygon[fill-opacity]:hover,
+.icen-chart-radar svg polygon[fill-opacity].is-hover {
+  fill-opacity: 0.2;
+}
+.icen-chart-radar svg circle[data-icen-chart-mark] {
+  stroke-width: 1.75;
+  transition: transform var(--icen-duration-fast) var(--icen-ease-out);
+  transform-box: fill-box;
+  transform-origin: center;
+}
+.icen-chart-radar svg circle[data-icen-chart-mark].is-hover {
+  transform: scale(1.35);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .icen-chart-radar svg polygon[fill-opacity],
+  .icen-chart-radar svg circle[data-icen-chart-mark] { transition: none; }
+}
+
+@media (forced-colors: active) {
+  .icen-chart-radar svg polygon[fill='none'],
+  .icen-chart-radar svg line { stroke: GrayText; }
+}
+
+}

package/dist/components/chart-radar.d.mts

@@ -0,0 +1,2 @@
+// kit: chart-radar 类型面（构建产物，勿手改）
+export { renderRadar } from '../behaviors/charts.mjs';

package/dist/components/chart-scatter.css

@@ -1,24 +1,64 @@
+@layer icen.components {
 /*
  * @icen.ai/ui — Component: chart-scatter（散点/气泡图专属样式）
- * 依赖：charts.css（基座 .chart / tooltip / [data-chart-mark] 交互态）
+ * 依赖：charts.css（基座 .icen-chart / tooltip / [data-icen-chart-mark] 交互态）
  *
  * DOM 由 behaviors/charts.ts 的 renderScatter 构建：
- *   .chart-scatter > svg（360×220 viewBox，网格 + 刻度 + circle[data-chart-mark]）
+ *   .icen-chart-scatter > svg（360×220 viewBox，网格 + 刻度 + circle[data-icen-chart-mark]）
+ * 横网格带 .icen-chart-grid、纵向带 .icen-chart-grid--v；左/下轴带 .icen-chart-axis。
  * 气泡第三维：points[].size 映射半径 3–10；hover/点击/右键走通用层委托。
  */
 
-.chart-scatter svg {
+.icen-chart-scatter {
+  min-width: 0;
+}
+.icen-chart-scatter svg {
   width: 100%;
   height: auto;
   display: block;
+  overflow: visible;
+}
+
+/* 网格：横实纵虚；轴线略重，刻度文字 10px（行为直出 8px，CSS 覆盖） */
+.icen-chart-scatter svg .icen-chart-grid {
+  stroke: var(--icen-token-line-soft);
+  opacity: 0.9;
+}
+.icen-chart-scatter svg .icen-chart-grid--v {
+  stroke-dasharray: 2 4;
+  opacity: 0.75;
+}
+.icen-chart-scatter svg .icen-chart-axis {
+  stroke: var(--icen-token-line);
+  stroke-dasharray: none;
+  opacity: 1;
+}
+.icen-chart-scatter svg text {
+  font-size: 10px;
+  letter-spacing: 0.01em;
+  fill: var(--icen-token-text-faint);
 }
-.chart-scatter circle[data-chart-mark] {
-  transition: fill-opacity var(--icen-tx-fast);
+
+/* 数据点：半透明填充 + 细描边；hover 加浓不放大（气泡半径本身携带尺寸语义） */
+.icen-chart-scatter circle[data-icen-chart-mark] {
+  transition: fill-opacity var(--icen-tx-fast), stroke-width var(--icen-tx-fast);
 }
-.chart-scatter circle[data-chart-mark]:hover {
+.icen-chart-scatter circle[data-icen-chart-mark]:hover,
+.icen-chart-scatter circle[data-icen-chart-mark].is-hover {
   fill-opacity: 0.85;
+  stroke-width: 1.75;
+}
+.icen-chart-scatter circle[data-icen-chart-mark].is-off {
+  opacity: 0.14;
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .chart-scatter circle[data-chart-mark] { transition: none; }
+  .icen-chart-scatter circle[data-icen-chart-mark] { transition: none; }
+}
+
+@media (forced-colors: active) {
+  .icen-chart-scatter svg .icen-chart-grid,
+  .icen-chart-scatter svg .icen-chart-axis { stroke: GrayText; }
+}
+
 }

package/dist/components/chart-scatter.d.mts

@@ -0,0 +1,2 @@
+// kit: chart-scatter 类型面（构建产物，勿手改）
+export { renderScatter, renderMap } from '../behaviors/charts.mjs';