@icen.ai/ui 0.10.0 → 0.11.0

package/dist/components/btn.css

@@ -11,37 +11,42 @@
  *   </button>
  *
  * 变体：
- *   .icen-btn          默认（surface 底 + outline-soft 描边）
- *   .icen-btn-primary  实心 accent
- *   .icen-btn-danger   透明底 + error 描边（hover 实心）
- *   .icen-btn-ghost    全透明，hover 浮起 fill-2
+ *   .icen-btn          默认（control 面 + 中性描边）
+ *   .icen-btn-primary  实心 accent（承文本用 accent-strong）
+ *   .icen-btn-danger   透明底 + error 描边（hover 淡红面）
+ *   .icen-btn-ghost    全透明，hover 浮起中性填充
  *   .icen-btn-link     link 文本按钮（无背景、underline on hover）
  *
  * 尺寸：默认 / .icen-btn-sm / .icen-btn-lg / .icen-btn-icon（正方形）
  * 状态：.is-loading 加 spinner + aria-busy；.is-error error 边；disabled/aria-disabled/data-icen-disabled
+ *
+ * 几何走 control token；表面物理（顶部高光、接触影）由原语适配层补。
+ * 按下以「面变深 + 内影」表达，不改变按钮占位或位置。
  */
 
 .icen-btn {
-  --btn-bg: var(--icen-token-surface);
-  --btn-fg: var(--icen-token-text);
-  --btn-border: var(--icen-token-line-soft);
+  --btn-bg: var(--icen-token-control);
   --btn-bg-hover: var(--icen-token-surface-hover);
-  --btn-border-hover: var(--icen-token-accent);
+  --btn-bg-active: var(--icen-token-surface-pressed);
+  --btn-fg: var(--icen-token-text);
+  --btn-border: var(--icen-token-control-border);
+  --btn-border-hover: var(--icen-token-control-border-hover);
 
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: 6px;
-  padding: 0 var(--icen-density-space-md);
-  height: var(--icen-density-input-height-md);
+  gap: var(--icen-control-gap);
+  block-size: var(--icen-control-height-md);
+  padding: 0 var(--icen-control-padding-inline);
   background: var(--btn-bg);
   color: var(--btn-fg);
-  border: 1px solid var(--btn-border);
-  border-radius: var(--icen-radius-md);
+  border: var(--icen-control-border-width) solid var(--btn-border);
+  border-radius: var(--icen-control-radius);
   font-family: var(--icen-font-body);
-  font-size: var(--icen-density-font-size-md);
-  font-weight: 500;
-  letter-spacing: 0.01em;
+  font-size: var(--icen-font-size-control);
+  font-weight: var(--icen-font-weight-control);
+  line-height: 1;
+  letter-spacing: var(--icen-letter-spacing-control);
   white-space: nowrap;
   cursor: pointer;
   user-select: none;
@@ -54,11 +59,14 @@
     box-shadow var(--icen-tx-fast),
     transform var(--icen-tx-fast);
 }
-.icen-btn:hover {
+.icen-btn:hover:not(:disabled):not([aria-disabled='true']):not([data-icen-disabled]) {
   background: var(--btn-bg-hover);
   border-color: var(--btn-border-hover);
 }
-.icen-btn:active { transform: var(--icen-press-soft); }
+.icen-btn:active:not(:disabled):not([aria-disabled='true']):not([data-icen-disabled]):not(.is-loading) {
+  background: var(--btn-bg-active);
+  transform: var(--icen-press-soft);
+}
 .icen-btn:focus-visible {
   outline: none;
   box-shadow: var(--icen-ring);
@@ -76,83 +84,80 @@
 /* ── 变体 ── */
 .icen-btn-primary {
   --btn-bg: var(--icen-token-accent-strong);
+  --btn-bg-hover: color-mix(in srgb, var(--icen-token-accent-strong) 92%, var(--icen-token-text));
+  --btn-bg-active: color-mix(in srgb, var(--icen-token-accent-strong) 84%, var(--icen-token-text));
   --btn-fg: var(--icen-token-on-accent);
   --btn-border: var(--icen-token-accent-strong);
-  --btn-bg-hover: color-mix(in srgb, var(--icen-token-accent-strong) 88%, black);
-  --btn-border-hover: color-mix(in srgb, var(--icen-token-accent-strong) 88%, black);
-}
-/* hover 阴影抬升仅可悬停设备生效（触屏关闭，AGENTS 动效守卫） */
-@media (hover: hover) and (pointer: fine) {
-  .icen-btn-primary:hover {
-    box-shadow: var(--icen-token-shadow-elevated);
-  }
+  --btn-border-hover: color-mix(in srgb, var(--icen-token-accent-strong) 92%, var(--icen-token-text));
 }
 
 .icen-btn-danger {
-  --btn-fg: var(--icen-token-error);
-  --btn-border: color-mix(in srgb, var(--icen-token-error) 35%, transparent);
   --btn-bg: transparent;
-  --btn-bg-hover: var(--icen-token-error);
+  --btn-bg-hover: var(--icen-token-error-muted);
+  --btn-bg-active: color-mix(in srgb, var(--icen-token-error) 18%, transparent);
+  --btn-fg: var(--icen-token-error);
+  --btn-border: color-mix(in srgb, var(--icen-token-error) 38%, transparent);
   --btn-border-hover: var(--icen-token-error);
 }
-.icen-btn-danger:hover { color: var(--icen-token-on-accent); }
 
 .icen-btn-ghost {
   --btn-bg: transparent;
+  --btn-bg-hover: var(--icen-token-fill-hover);
+  --btn-bg-active: var(--icen-token-fill-pressed);
   --btn-border: transparent;
-  --btn-bg-hover: var(--icen-token-fill-2);
   --btn-border-hover: transparent;
 }
 
 .icen-btn-link {
   --btn-bg: transparent;
-  --btn-border: transparent;
-  --btn-fg: var(--icen-token-accent);
   --btn-bg-hover: transparent;
+  --btn-bg-active: transparent;
+  --btn-fg: var(--icen-token-accent-text);
+  --btn-border: transparent;
   --btn-border-hover: transparent;
-  height: auto;
+  block-size: auto;
   padding: 0;
   border: 0;
   border-radius: 0;
   text-decoration: none;
 }
-.icen-btn-link:hover {
-  text-decoration: underline;
-  text-underline-offset: 3px;
-  background: transparent;
-}
+.icen-btn-link:hover { text-decoration: underline; text-underline-offset: 3px; background: transparent; }
+.icen-btn-link:active { transform: none; }
 
 /* ── 尺寸 ── */
 .icen-btn-sm {
-  height: var(--icen-density-input-height-sm);
-  padding: 0 var(--icen-density-space-sm);
+  block-size: var(--icen-control-height-sm);
+  padding: 0 var(--icen-control-padding-inline-sm);
   font-size: var(--icen-density-font-size-sm);
-  gap: 4px;
+  gap: var(--icen-control-gap-sm);
+  border-radius: var(--icen-control-radius-sm);
 }
 .icen-btn-lg {
-  height: var(--icen-density-input-height-lg);
-  padding: 0 var(--icen-density-space-lg);
+  block-size: var(--icen-control-height-lg);
+  padding: 0 var(--icen-control-padding-inline-lg);
   font-size: var(--icen-density-font-size-lg);
   gap: 8px;
+  border-radius: var(--icen-control-radius-lg);
 }
 .icen-btn-icon {
-  width: var(--icen-density-input-height-md);
+  inline-size: var(--icen-control-height-md);
   padding: 0;
   gap: 0;
 }
-.icen-btn-icon.icen-btn-sm { width: var(--icen-density-input-height-sm); }
-.icen-btn-icon.icen-btn-lg { width: var(--icen-density-input-height-lg); }
+.icen-btn-icon.icen-btn-sm { inline-size: var(--icen-control-height-sm); }
+.icen-btn-icon.icen-btn-lg { inline-size: var(--icen-control-height-lg); }
 
-.icen-btn-block {
-  display: flex;
-  width: 100%;
-}
+.icen-btn-block { display: flex; inline-size: 100%; }
 
 /* ── 状态 ── */
 .icen-btn.is-error {
   --btn-border: var(--icen-token-error);
   --btn-border-hover: var(--icen-token-error);
 }
+.icen-btn.is-error:focus-visible {
+  outline: none;
+  box-shadow: var(--icen-ring-error);
+}
 
 /* 加载态：居中 spinner 占位 + 文本保留（避免重排）。
    behavior 在挂 .is-loading 时把 [aria-busy=true] 也挂上。 */
@@ -160,27 +165,27 @@
 .icen-btn.is-loading::after {
   content: '';
   position: absolute;
-  top: 50%; left: 50%; /* guard:allow-physical 圆心居中：left 50% + 负边距 任意方向下均为中心 */
-  width: 14px; height: 14px;
-  margin: -7px 0 0 -7px; /* guard:allow-physical 居中负边距与 left 50% 配套（物理坐标对），RTL 下同样居中 */
-  border: 2px solid color-mix(in srgb, currentColor 35%, transparent);
+  inset-block-start: 50%;
+  inset-inline-start: 50%;
+  inline-size: 14px;
+  block-size: 14px;
+  margin-block-start: -7px;
+  margin-inline-start: -7px;
+  color: var(--btn-fg);
+  border: 1.5px solid color-mix(in srgb, currentColor 30%, transparent);
   border-top-color: currentColor;
   border-radius: 50%;
   animation: icen-spin var(--btn-spin-duration, var(--icen-duration-slow)) linear infinite;
-  opacity: 1; /* 覆盖 .icen-pressable::after 渐变（若与 .icen-pressable 同用） */
+  opacity: 1;
   background: none;
   pointer-events: none;
 }
 
 /* 图标按钮内部 svg 默认尺寸对齐字号 */
 .icen-btn-icon-start, .icen-btn-icon-end {
-  width: 1.1em;
-  height: 1.1em;
+  inline-size: 1.1em;
+  block-size: 1.1em;
   flex-shrink: 0;
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .icen-btn.is-loading::after { --btn-spin-duration: 1.2s; }
-}
-
 }

package/dist/components/btn.d.mts

@@ -0,0 +1,2 @@
+// kit: btn 类型面（构建产物，勿手改）
+export {};

package/dist/components/card.css

@@ -27,9 +27,9 @@
 
 .icen-card {
   position: relative;
-  background: var(--icen-token-card);
-  border: 1px solid var(--icen-token-outline-soft);
-  box-shadow: var(--icen-token-shadow-inset);
+  background: var(--icen-token-surface);
+  border: 1px solid var(--icen-token-separator-soft);
+  box-shadow: none;
   border-radius: var(--icen-radius-lg);
   overflow: hidden;
 }
@@ -37,20 +37,21 @@
 /* ── 变体 ── */
 .icen-card--elevated {
   box-shadow: var(--icen-token-shadow-card);
-  border-color: transparent;
+  border-color: var(--icen-token-separator-soft);
 }
 .icen-card--outlined {
-  border-color: var(--icen-token-outline);
+  border-color: var(--icen-token-separator);
   box-shadow: none;
 }
 .icen-card--flat {
   box-shadow: none;
-  background: var(--icen-token-bg-soft);
+  background: var(--icen-token-surface-chrome);
+  border-color: transparent;
 }
 .icen-card--glass {
   background: var(--icen-token-surface-glass);
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
+  backdrop-filter: blur(var(--icen-material-blur-floating)) saturate(var(--icen-material-saturate));
+  -webkit-backdrop-filter: blur(var(--icen-material-blur-floating)) saturate(var(--icen-material-saturate));
   box-shadow: none;
 }
 
@@ -73,11 +74,9 @@
 .icen-card--interactive:focus-within {
   border-color: var(--icen-token-accent);
 }
-.icen-card--interactive:focus-within {
-  border-color: var(--icen-token-accent);
-}
 .icen-card.is-selected {
-  box-shadow: var(--icen-ring);
+  border-color: color-mix(in srgb, var(--icen-token-accent) 34%, var(--icen-token-separator));
+  box-shadow: var(--icen-token-shadow-control);
 }
 
 /* ── 媒体封面 ── */
@@ -86,7 +85,7 @@
   width: 100%;
   aspect-ratio: 16 / 9;
   overflow: hidden;
-  background: var(--icen-token-bg-soft);
+  background: var(--icen-token-surface-raised);
 }
 /* 封面比例变体 */
 .icen-card-media--square { aspect-ratio: 1 / 1; }
@@ -105,7 +104,7 @@
   inline-size: 100%;
   height: 100%;
   object-fit: cover;
-  transition: transform var(--icen-tx-slow) var(--icen-ease-out);
+  transition: transform var(--icen-duration-slow) var(--icen-ease-out);
 }
 .icen-card-tag {
   position: absolute;
@@ -127,13 +126,14 @@
   align-items: flex-start;
   justify-content: space-between;
   gap: var(--icen-density-space-sm);
-  padding: var(--icen-density-space-md);
+  padding: var(--icen-density-space-md) var(--icen-density-space-md) var(--icen-density-space-xs);
 }
 .icen-card-title {
-  font-size: var(--icen-density-font-size-lg);
-  font-weight: 600;
+  font-size: var(--icen-font-size-title);
+  font-weight: var(--icen-font-weight-title);
   color: var(--icen-token-text);
   line-height: 1.3;
+  letter-spacing: -.01em;
   margin: 0;
   font-family: var(--icen-font-heading);
 }
@@ -141,13 +141,13 @@
   font-size: var(--icen-density-font-size-sm);
   color: var(--icen-token-text-muted);
   margin: 2px 0 0;
-  line-height: 1.4;
+  line-height: 1.45;
 }
 .icen-card-body {
   padding: 0 var(--icen-density-space-md) var(--icen-density-space-md);
-  font-size: var(--icen-density-font-size-md);
+  font-size: var(--icen-font-size-control);
   color: var(--icen-token-text-muted);
-  line-height: 1.6;
+  line-height: 1.55;
 }
 .icen-card-body > p:first-child { margin-top: 0; }
 .icen-card-body > p:last-child { margin-bottom: 0; }
@@ -157,8 +157,8 @@
   align-items: center;
   gap: var(--icen-density-space-sm);
   padding: var(--icen-density-space-sm) var(--icen-density-space-md);
-  border-top: 1px solid var(--icen-token-outline-soft);
-  background: color-mix(in srgb, var(--icen-token-bg-soft) 50%, transparent);
+  border-top: 1px solid var(--icen-token-separator-soft);
+  background: var(--icen-token-surface-chrome);
 }
 .icen-card-meta {
   display: flex;

package/dist/components/card.d.mts

@@ -0,0 +1,2 @@
+// kit: card 类型面（构建产物，勿手改）
+export {};

package/dist/components/carousel.d.mts

@@ -0,0 +1,2 @@
+// kit: carousel 类型面（构建产物，勿手改）
+export * from '../behaviors/carousel.mjs';

package/dist/components/cascader.css

@@ -60,25 +60,26 @@
   position: relative;
   display: flex;
   align-items: center;
-  gap: var(--icen-density-space-xs);
+  gap: var(--icen-control-gap-sm);
   inline-size: 100%;
-  height: var(--icen-density-input-height-md);
-  padding: 0 var(--icen-density-space-sm);
-  font-size: var(--icen-density-font-size-md);
+  height: var(--icen-control-height-md);
+  padding: 0 var(--icen-field-padding-inline);
+  font-family: var(--icen-font-body);
+  font-size: var(--icen-font-size-control);
   text-align: start;
   background: var(--icen-token-control);
   color: var(--icen-token-text);
-  border: 1px solid var(--icen-token-outline-soft);
-  border-radius: var(--icen-radius-md);
-  box-shadow: var(--icen-token-shadow-inset);
+  border: var(--icen-control-border-width) solid var(--icen-token-control-border);
+  border-radius: var(--icen-control-radius);
+  box-shadow: var(--icen-token-shadow-field);
   cursor: pointer;
   transition:
     border-color var(--icen-tx-fast),
     box-shadow var(--icen-tx-fast);
-  padding-inline-end: var(--icen-density-space-sm);
+  padding-inline-end: calc(var(--icen-field-padding-inline) + 18px);
 }
 .icen-cascader-trigger:hover:not(:disabled) {
-  border-color: var(--icen-hover-border);
+  border-color: var(--icen-token-control-border-hover);
 }
 .icen-cascader-trigger:focus-visible {
   outline: none;
@@ -106,15 +107,16 @@
 
 .icen-cascader-chevron {
   position: absolute;
-  inset-inline-end: var(--icen-density-space-sm);
+  inset-inline-end: var(--icen-field-padding-inline);
   inset-block-start: 50%;
   translate: 0 -50%;
-  inline-size: 16px;
-  block-size: 16px;
+  inline-size: 12px;
+  block-size: 12px;
   flex: none;
   color: var(--icen-token-text-muted);
+  opacity: .82;
   pointer-events: none;
-  transition: transform var(--icen-tx-fast);
+  transition: transform var(--icen-tx-fast), opacity var(--icen-tx-fast);
 }
 .icen-cascader.is-open .icen-cascader-chevron { transform: rotate(180deg); }
 
@@ -139,10 +141,10 @@
 }
 .icen-cascader-clear:hover {
   color: var(--icen-token-text);
-  background: var(--icen-token-fill-1);
+  background: var(--icen-token-fill-hover);
 }
 /* 有清除钮时 trigger 行内末端侧让位（clear 18px + chevron 14px + 间距） */
-.icen-cascader:has(.icen-cascader-clear:not([hidden])) .icen-cascader-trigger { padding-inline-end: calc(var(--icen-density-space-sm) + var(--icen-density-input-height-sm) + var(--icen-density-space-xs)); }
+.icen-cascader:has(.icen-cascader-clear:not([hidden])) .icen-cascader-trigger { padding-inline-end: calc(var(--icen-density-space-sm) + var(--icen-control-height-sm) + var(--icen-density-space-xs)); }
 
 /* 面板由 behavior portal 到 body：left/top/width/max-height 由 JS 按 trigger rect inline 写入；
    data-icen-side="top|bottom" 标记翻侧方向。 */
@@ -151,11 +153,11 @@
   z-index: var(--icen-z-popover);
   overflow-y: auto;
   overscroll-behavior: contain;
-  padding: var(--icen-density-space-sm);
-  background: var(--icen-token-card-strong);
-  border: 1px solid var(--icen-token-outline);
+  padding: var(--icen-density-space-xs);
+  background: var(--icen-token-surface);
+  border: 1px solid var(--icen-token-material-edge);
   border-radius: var(--icen-radius-lg);
-  box-shadow: var(--icen-token-shadow-overlay);
+  box-shadow: var(--icen-token-material-light), var(--icen-token-shadow-elevated);
   transform-origin: top center;
   animation: icen-pop-in var(--icen-tx-fast);
 }
@@ -164,11 +166,11 @@
 /* ── 搜索框（opts.searchable 时 behavior 渲染）── */
 .icen-cascader-search {
   padding: var(--icen-density-space-xs);
-  border-bottom: 1px solid var(--icen-token-outline-soft);
-  margin-bottom: 4px;
+  border-bottom: 1px solid var(--icen-token-separator-soft);
+  margin-bottom: var(--icen-density-space-xs);
   position: sticky;
   top: 0;
-  background: var(--icen-token-card-strong);
+  background: var(--icen-token-surface);
   z-index: 1;
 }
 .icen-cascader-search-input { min-inline-size: 0; }
@@ -195,25 +197,41 @@
 .icen-cascader-item {
   display: flex;
   align-items: center;
-  gap: var(--icen-density-space-xs);
-  padding: 6px var(--icen-density-space-sm);
-  font-size: var(--icen-density-font-size-sm);
-  border-radius: var(--icen-radius-sm);
+  gap: var(--icen-control-gap-sm);
+  min-block-size: var(--icen-control-height-sm);
+  padding: 4px var(--icen-density-space-sm);
+  font-size: var(--icen-font-size-control);
+  border-radius: var(--icen-radius-xs);
   color: var(--icen-token-text);
   cursor: pointer;
   transition:
     background-color var(--icen-tx-fast),
     color var(--icen-tx-fast);
 }
-.icen-cascader-item:hover:not(.is-disabled) { background: var(--icen-token-fill-1); }
+.icen-cascader-item:hover:not(.is-disabled) { background: var(--icen-token-fill-hover); }
 .icen-cascader-item.is-focused {
-  background: var(--icen-token-fill-2);
+  background: var(--icen-token-fill-selected);
 }
 .icen-cascader-item.is-active {
   color: var(--icen-token-accent-text);
   font-weight: 500;
   background: var(--icen-token-accent-subtle);
 }
+.icen-cascader-item.is-selected {
+  background: var(--icen-token-fill-selected);
+  color: var(--icen-token-text);
+  font-weight: var(--icen-font-weight-control);
+}
+.icen-cascader-item.is-selected::after {
+  content: '';
+  inline-size: 12px;
+  block-size: 12px;
+  flex: none;
+  margin-inline-start: auto;
+  background: currentColor;
+  mask: var(--icen-token-icon-check) center / contain no-repeat;
+  -webkit-mask: var(--icen-token-icon-check) center / contain no-repeat;
+}
 .icen-cascader-item.is-disabled {
   opacity: 0.4;
   cursor: not-allowed;
@@ -254,8 +272,8 @@
   cursor: pointer;
   transition: background-color var(--icen-tx-fast);
 }
-.icen-cascader-result:hover:not(.is-disabled) { background: var(--icen-token-fill-1); }
-.icen-cascader-result.is-focused { background: var(--icen-token-fill-2); }
+.icen-cascader-result:hover:not(.is-disabled) { background: var(--icen-token-fill-hover); }
+.icen-cascader-result.is-focused { background: var(--icen-token-fill-selected); }
 .icen-cascader-result.is-disabled {
   opacity: 0.4;
   cursor: not-allowed;
@@ -297,15 +315,18 @@
 }
 @media (pointer: coarse) {
   .icen-cascader-clear { min-inline-size: 44px; min-block-size: 44px; inset-inline-end: var(--icen-density-space-sm); }
-  .icen-cascader:has(.icen-cascader-clear:not([hidden])) .icen-cascader-trigger { padding-inline-end: calc(var(--icen-density-input-height-sm) + var(--icen-density-space-sm) + var(--icen-density-space-xs)); }
+  .icen-cascader:has(.icen-cascader-clear:not([hidden])) .icen-cascader-trigger { padding-inline-end: calc(var(--icen-control-height-sm) + var(--icen-density-space-sm) + var(--icen-density-space-xs)); }
 }
 
-.icen-cascader--sm .icen-cascader-trigger { block-size: var(--icen-density-input-height-sm); font-size: var(--icen-density-font-size-sm); }
-.icen-cascader--lg .icen-cascader-trigger { block-size: var(--icen-density-input-height-lg); font-size: var(--icen-density-font-size-lg); }
+.icen-cascader--sm .icen-cascader-trigger { block-size: var(--icen-control-height-sm); font-size: var(--icen-density-font-size-sm); }
+.icen-cascader--lg .icen-cascader-trigger { block-size: var(--icen-control-height-lg); font-size: var(--icen-density-font-size-lg); }
 
-.icen-cascader-panel:has(> .icen-cascader-search) { scroll-padding-block-start: calc(var(--icen-density-input-height-sm) + 3 * var(--icen-density-space-xs) + var(--icen-density-space-sm) + 1px); }
+.icen-cascader-panel:has(> .icen-cascader-search) { scroll-padding-block-start: calc(var(--icen-control-height-sm) + 3 * var(--icen-density-space-xs) + var(--icen-density-space-sm) + 1px); }
 
 /* Popup affordance is carried by the control surface, not a direction glyph. */
-.icen-cascader-chevron { display: none; }
+/* Clear affordance replaces the popup glyph in the trailing slot. */
+.icen-cascader:has(.icen-cascader-clear:not([hidden])) .icen-cascader-chevron { display: none; }
+
+
 
 }

package/dist/components/cascader.d.mts

@@ -0,0 +1,2 @@
+// kit: cascader 类型面（构建产物，勿手改）
+export * from '../behaviors/cascader.mjs';

package/dist/components/chart-area.css

@@ -11,6 +11,10 @@
  * 同样追加进 svg（样式属性直出，挡指针事件在基座 charts.css）。
  */
 
+.icen-chart-area {
+  position: relative;
+  min-width: 0;
+}
 .icen-chart-area > svg {
   display: block;
   width: 100%;
@@ -18,4 +22,46 @@
   overflow: visible;
 }
 
+.icen-chart-area svg .icen-chart-grid {
+  stroke: var(--icen-token-line-soft);
+  opacity: 0.9;
+}
+.icen-chart-area svg .icen-chart-baseline {
+  stroke: var(--icen-token-line);
+  opacity: 1;
+}
+
+/* 面积是主体：渐变略浓于折线（.3 → 0），但描边收细到 1.75 */
+.icen-chart-area svg > path[fill='none'] {
+  stroke-width: 1.75;
+}
+.icen-chart-area svg stop:first-child { stop-opacity: 0.3; }
+.icen-chart-area svg stop:last-child { stop-opacity: 0; }
+
+/* 数据点：小一号的白芯色环，hover 放大到 1.5×（与折线同一套手感） */
+.icen-chart-area 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-area svg circle[data-icen-chart-mark]:not([data-icen-chart-hit]):has(+ .is-hover) {
+  transform: scale(1.5);
+}
+.icen-chart-area svg circle[data-icen-chart-hit].is-hover {
+  fill: color-mix(in srgb, var(--icen-token-accent) 9%, transparent);
+}
+
+.icen-chart-area .icen-chart-labels {
+  margin-top: 5px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .icen-chart-area svg circle[data-icen-chart-mark] { transition: none; }
+}
+
+@media (forced-colors: active) {
+  .icen-chart-area svg .icen-chart-grid,
+  .icen-chart-area svg .icen-chart-baseline { stroke: GrayText; }
+}
+
 }

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

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