@icen.ai/ui 0.9.0 → 0.11.0

package/dist/components/cascader.css

@@ -0,0 +1,332 @@
+@layer icen.components {
+/*
+ * @icen.ai/ui — Component: cascader（级联选择）
+ * 与 behaviors/cascader.ts 配套（函数式 API：createCascader(el, opts) → handle）。
+ *
+ * 完整契约（createCascader 渲染进宿主 el；面板打开时 portal 到 document.body）：
+ *   <div class="icen-cascader [.is-open]" data-icen-cascader [data-icen-disabled]>
+ *     <button class="icen-cascader-trigger" role="combobox" aria-haspopup="listbox"
+ *             aria-expanded="false" aria-controls="<panelId>" [disabled]>
+ *       <span class="icen-cascader-value [.is-empty]">请选择 / 浙江 / 杭州</span>
+ *       <svg class="icen-cascader-chevron">…</svg>
+ *     </button>
+ *     <button class="icen-cascader-clear" aria-label="清除" [hidden]>×</button>  ← clearable；
+ *         与 trigger 同级（不能嵌套进 button），绝对定位叠进 trigger 行内末端侧
+ *     <div class="icen-cascader-panel" id="<panelId>" [hidden] data-icen-side="top|bottom">
+ *       <div class="icen-cascader-search">              ← opts.searchable 时渲染
+ *         <input class="icen-cascader-search-input" type="search" placeholder="搜索" />
+ *       </div>
+ *       <div class="icen-cascader-cols">                ← 多列区（搜索态 hidden）；列宽不足横向滚动
+ *         <ul class="icen-cascader-col" role="listbox" data-icen-level="0">
+ *           <li class="icen-cascader-item [.is-active|.is-focused|.is-selected|.is-disabled]"
+ *               role="option" aria-selected="false" tabindex="-1" data-icen-value="zj">
+ *             <span class="icen-cascader-item-label">浙江</span>
+ *             <svg class="icen-cascader-item-chevron">…</svg>   ← 有子级的项
+ *           </li>
+ *         </ul>
+ *       </div>
+ *       <ul class="icen-cascader-results" role="listbox" [hidden]>   ← 搜索态单列表
+ *         <li class="icen-cascader-result [.is-focused|.is-disabled]" role="option"
+ *             tabindex="-1" data-icen-index="0">
+ *           <span class="icen-cascader-result-part">浙江</span><i>/</i>
+ *           <span class="icen-cascader-result-label">杭州</span>
+ *         </li>
+ *       </ul>
+ *       <div class="icen-cascader-empty" [hidden]>无匹配</div>       ← opts.emptyLabel
+ *     </div>
+ *   </div>
+ *
+ * behavior 维护：
+ *   - .icen-cascader.is-open ↔ aria-expanded；panel portal 到 body（inline left/top/width/
+ *     max-height + data-icen-side）；外点 / Esc 关闭；window scroll/resize 跟随重定位
+ *   - 面板尺寸走全库统一 PanelSizing 契约（behaviors/popover.ts）：根 el 挂
+ *     data-icen-panel-width（固定宽，最高优先）/ data-icen-panel-min / data-icen-panel-max /
+ *     data-icen-panel-max-height（默认 240）
+ *   - 多列区：activePath 有子级即加列；列宽不足时 .icen-cascader-cols 横向滚动
+ *   - 搜索态（searchable + 搜索词非空）：多列区 hidden、结果单列表显示；每条 = 完整路径
+ *     面包屑（分隔符 <i> 为 muted 斜杠，末级 .icen-cascader-result-label 定值）；无命中
+ *     显示 .icen-cascader-empty
+ *   - 键盘：→ 进子级 / ← 回上级 / ↑↓ 列内移动 / Enter 定值或进子级 / Esc 关闭；
+ *     RTL（[dir="rtl"]）下 ←/→ 镜像；搜索态 ↑↓ 移动 .is-focused，Enter/点击定值
+ *   - 事件 icen:cascader-change { value: string[]; path: string[] }（path = 各级 label）
+ */
+
+.icen-cascader {
+  position: relative;
+  inline-size: 100%;
+}
+
+ .icen-cascader-trigger {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--icen-control-gap-sm);
+  inline-size: 100%;
+  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: 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: calc(var(--icen-field-padding-inline) + 18px);
+}
+.icen-cascader-trigger:hover:not(:disabled) {
+  border-color: var(--icen-token-control-border-hover);
+}
+.icen-cascader-trigger:focus-visible {
+  outline: none;
+  border-color: var(--icen-control-focus-border);
+  box-shadow: var(--icen-control-focus-shadow);
+}
+.icen-cascader-trigger:disabled,
+.icen-cascader[data-icen-disabled] .icen-cascader-trigger,
+.icen-cascader[aria-disabled='true'] .icen-cascader-trigger {
+  opacity: var(--icen-disabled-opacity);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.icen-cascader-value {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.icen-cascader-value.is-empty {
+  color: var(--icen-token-text-muted);
+}
+
+.icen-cascader-chevron {
+  position: absolute;
+  inset-inline-end: var(--icen-field-padding-inline);
+  inset-block-start: 50%;
+  translate: 0 -50%;
+  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), opacity var(--icen-tx-fast);
+}
+.icen-cascader.is-open .icen-cascader-chevron { transform: rotate(180deg); }
+
+/* 清除钮（与 trigger 同级，绝对定位叠进 trigger 行内末端侧、chevron 内侧） */
+.icen-cascader-clear {
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-end: var(--icen-density-space-sm);
+  translate: 0 -50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 24px;
+  block-size: 24px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--icen-radius-sm);
+  background: transparent;
+  color: var(--icen-token-text-muted);
+  cursor: pointer;
+  transition: opacity var(--icen-tx-fast), background-color var(--icen-tx-fast), color var(--icen-tx-fast);
+}
+.icen-cascader-clear:hover {
+  color: var(--icen-token-text);
+  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-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" 标记翻侧方向。 */
+.icen-cascader-panel {
+  position: absolute;
+  z-index: var(--icen-z-popover);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  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-material-light), var(--icen-token-shadow-elevated);
+  transform-origin: top center;
+  animation: icen-pop-in var(--icen-tx-fast);
+}
+.icen-cascader-panel[data-icen-side='top'] { transform-origin: bottom center; }
+
+/* ── 搜索框（opts.searchable 时 behavior 渲染）── */
+.icen-cascader-search {
+  padding: var(--icen-density-space-xs);
+  border-bottom: 1px solid var(--icen-token-separator-soft);
+  margin-bottom: var(--icen-density-space-xs);
+  position: sticky;
+  top: 0;
+  background: var(--icen-token-surface);
+  z-index: 1;
+}
+.icen-cascader-search-input { min-inline-size: 0; }
+
+
+/* ── 多列区：每级一列，列宽不足横向滚动 ── */
+.icen-cascader-cols {
+  display: flex;
+  align-items: stretch;
+  overflow-x: auto;
+}
+
+.icen-cascader-col {
+  list-style: none;
+  margin: 0;
+  padding: 0 4px;
+  min-inline-size: 144px;
+  flex: 1 0 144px;
+}
+.icen-cascader-col + .icen-cascader-col {
+  border-inline-start: 1px solid var(--icen-token-outline-soft);
+}
+
+.icen-cascader-item {
+  display: flex;
+  align-items: center;
+  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-hover); }
+.icen-cascader-item.is-focused {
+  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;
+}
+
+.icen-cascader-item-label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.icen-cascader-item-chevron {
+  width: 12px;
+  height: 12px;
+  flex-shrink: 0;
+  color: var(--icen-token-text-faint);
+}
+
+/* RTL：子列在左，chevron 指向左（drill-in 方向随书写方向镜像） */
+[dir='rtl'] .icen-cascader-item-chevron { transform: scaleX(-1); }
+
+/* ── 搜索结果单列表（面包屑式完整路径；分隔符 muted）── */
+.icen-cascader-results {
+  list-style: none;
+  margin: 0;
+  padding: 0 4px;
+}
+.icen-cascader-result {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 2px;
+  padding: 6px var(--icen-density-space-sm);
+  font-size: var(--icen-density-font-size-sm);
+  border-radius: var(--icen-radius-sm);
+  color: var(--icen-token-text);
+  cursor: pointer;
+  transition: background-color var(--icen-tx-fast);
+}
+.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;
+}
+.icen-cascader-result-part {
+  color: var(--icen-token-text-faint);
+}
+.icen-cascader-result-label {
+  color: var(--icen-token-text);
+  font-weight: 500;
+}
+.icen-cascader-result > i {
+  font-style: normal;
+  color: var(--icen-token-text-muted);
+  margin-inline: 2px;
+}
+
+/* 空状态（搜索无命中） */
+.icen-cascader-empty {
+  padding: var(--icen-density-space-md);
+  font-size: var(--icen-density-font-size-sm);
+  color: var(--icen-token-text-faint);
+  text-align: center;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .icen-cascader-panel { animation: none; }
+  .icen-cascader-trigger,
+  .icen-cascader-chevron,
+  .icen-cascader-clear,
+  .icen-cascader-item,
+  .icen-cascader-result,
+  .icen-cascader-search-input { transition: none; }
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .icen-cascader-clear:not([hidden]) { opacity: 0; pointer-events: none; }
+  .icen-cascader:is(:hover,:focus-within) .icen-cascader-clear:not([hidden]) { opacity: 1; pointer-events: auto; }
+}
+@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-control-height-sm) + var(--icen-density-space-sm) + var(--icen-density-space-xs)); }
+}
+
+.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-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. */
+/* 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/cascader.mjs

@@ -0,0 +1,3 @@
+// @icen.ai/ui — kit: cascader（CSS + behavior 一行入口；构建产物，勿手改）
+import './cascader.css';
+export * from '../behaviors/cascader.mjs';

package/dist/components/chart-area.css

@@ -1,15 +1,67 @@
+@layer icen.components {
 /*
  * @icen.ai/ui — Component: chart-area（面积图专属样式）
  * 依赖：charts.css（基座）
  *
  * DOM 由 behaviors/charts.ts 的 renderArea 构建：
- *   .chart-area > svg[viewBox="0 0 360 150"]
+ *   .icen-chart-area > svg[viewBox="0 0 360 150"]
  * 与折线同族，但以面积填充为视觉主体（渐变更浓、描边更细）。
+ * renderChart 的 area 走 renderLine（.icen-chart-line 容器），spec.marks 的
+ * SVG 标记（.icen-chart-mark-line / .icen-chart-mark-point / .icen-chart-mark-label）
+ * 同样追加进 svg（样式属性直出，挡指针事件在基座 charts.css）。
  */
 
-.chart-area > svg {
+.icen-chart-area {
+  position: relative;
+  min-width: 0;
+}
+.icen-chart-area > svg {
   display: block;
   width: 100%;
   height: 150px;
   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';

package/dist/components/chart-bar.css

@@ -1,89 +1,198 @@
+@layer icen.components {
 /*
  * @icen.ai/ui — Component: chart-bar（柱状/条形图专属样式）
- * 依赖：charts.css（基座 .chart / .chart-labels / --chart-tone）
+ * 依赖：charts.css（基座 .icen-chart / .icen-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
+ *   .icen-chart-vbar > .icen-chart-vbar-track > .icen-chart-vbar-bar
+ *   .icen-chart-hbar > .icen-chart-hbar-row > .icen-chart-hbar-label + .icen-chart-hbar-track > .icen-chart-hbar-bar + .icen-chart-hbar-value
+ *
+ * renderChart spec.marks 的 vbar DOM 变体；百分比绝对定位于 plot 内，
+ * 标记色经 --chart-mark-tone 注入，缺省 faint 参考线 / accent 标记点）：
+ *   .icen-chart-vbar > .icen-chart-mark-line--h（水平参考线）/ .icen-chart-mark-line--v（垂直参考线）
+ *     > .icen-chart-mark-label（尾部标注，视口内夹取）
+ *   .icen-chart-vbar > .icen-chart-mark-point（标记点）> .icen-chart-mark-label
+ *
+ * RTL 豁免（guard 文件级白名单 scripts/guard/rtl.ts）：图表是物理坐标系——
+ * plot 内百分比定位 / 参考线 / 值标签对齐全部按物理 left/right 计算，RTL 不镜像。
  */
 
 /* ── vbar · 垂直柱状 ── */
-.chart-vbar {
+.icen-chart-vbar {
+  position: relative;
   display: flex;
   align-items: flex-end;
-  gap: var(--density-space-xs);
+  gap: 4px;
   height: 112px;
 }
-.chart-vbar-track {
+/* 轨道同时承担两件事：极淡的槽 + 四档横向网格（柱体覆盖网格，空白区仍可读数） */
+.icen-chart-vbar-track {
   flex: 1;
-  height: 100%;
   min-width: 0;
+  height: 100%;
   display: flex;
   align-items: flex-end;
-  background: color-mix(in srgb, var(--token-fill-2) 45%, transparent);
-  border-radius: var(--radius-sm);
   overflow: hidden;
+  border-radius: var(--icen-radius-xs);
+  background:
+    repeating-linear-gradient(
+      to top,
+      color-mix(in srgb, var(--icen-token-line-soft) 90%, transparent) 0 1px,
+      transparent 1px 25%
+    ),
+    color-mix(in srgb, var(--icen-token-fill-2) 34%, transparent);
 }
-.chart-vbar-bar {
+.icen-chart-vbar-bar {
   width: 100%;
-  border-radius: var(--radius-sm);
-  background: var(--chart-tone, var(--token-accent));
-  transition: height var(--icen-tx-slow);
+  border-radius: var(--icen-radius-xs);
+  background: var(--chart-tone, var(--icen-token-accent));
+  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--icen-token-top-highlight) 55%, transparent);
+  transition: height var(--icen-duration-slow) var(--icen-ease-out), filter var(--icen-tx-fast);
 }
-.chart-vbar-bar:hover {
+.icen-chart-vbar-bar:hover,
+.icen-chart-vbar-bar.is-hover {
   filter: brightness(1.08);
 }
 
 /* ── hbar · 水平条形 ── */
-.chart-hbar {
+.icen-chart-hbar {
   display: flex;
   flex-direction: column;
-  gap: var(--density-space-xs);
+  gap: 2px;
 }
-.chart-hbar-row {
+.icen-chart-hbar-row {
   display: grid;
-  grid-template-columns: minmax(72px, 1fr) minmax(90px, 2fr) 52px;
-  gap: var(--density-space-xs);
+  grid-template-columns: minmax(72px, 1fr) minmax(90px, 2fr) minmax(52px, auto); /* 数值列可长：定宽 52px 遇 "1234567.89" 会换行撑高整行错位 */
+  gap: var(--icen-density-space-xs);
   align-items: center;
-  font-size: var(--density-font-size-xs);
+  min-height: 26px;
+  padding: 0 4px;
+  margin: 0 -4px;
+  border-radius: var(--icen-radius-xs);
+  font-size: 12px;
+  transition: background-color var(--icen-tx-fast);
 }
-.chart-hbar-label {
+.icen-chart-hbar-row:hover {
+  background: var(--icen-token-fill-hover);
+}
+.icen-chart-hbar-label {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  color: var(--token-text-muted);
+  color: var(--icen-token-text-muted);
 }
-.chart-hbar-track {
-  height: 10px;
+.icen-chart-hbar-track {
+  height: 8px;
   overflow: hidden;
-  border-radius: var(--radius-full);
-  background: var(--token-fill-2);
+  border-radius: var(--icen-radius-full);
+  background: color-mix(in srgb, var(--icen-token-fill-2) 70%, transparent);
 }
-.chart-hbar-bar {
+.icen-chart-hbar-bar {
   height: 100%;
-  border-radius: var(--radius-full);
-  background: var(--chart-tone, var(--token-accent));
-  transition: width var(--icen-tx-slow);
+  border-radius: var(--icen-radius-full);
+  background: var(--chart-tone, var(--icen-token-accent));
+  transition: width var(--icen-duration-slow) var(--icen-ease-out), filter var(--icen-tx-fast);
 }
-.chart-hbar-bar:hover {
+.icen-chart-hbar-bar:hover,
+.icen-chart-hbar-bar.is-hover {
   filter: brightness(1.08);
 }
-.chart-hbar-value {
+.icen-chart-hbar-value {
   text-align: right;
+  font-family: var(--icen-font-mono);
+  font-size: 11px;
   font-variant-numeric: tabular-nums;
-  color: var(--token-text-faint);
+  white-space: nowrap; /* 配合 minmax(52px, auto)：长数值单行右对齐，不换行 */
+  color: var(--icen-token-text-muted);
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .chart-vbar-bar, .chart-hbar-bar { transition: none; }
+  .icen-chart-vbar-bar, .icen-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 {
+.icen-chart-vbar-track--multi { gap: 2px; }
+.icen-chart-vbar-track--multi > .icen-chart-vbar-bar { flex: 1; min-width: 0; width: auto; }
+.icen-chart-vbar-track--multi.icen-chart-vbar-track--stacked {
   flex-direction: column;
   justify-content: flex-end;
   gap: 0;
+  background: color-mix(in srgb, var(--icen-token-fill-2) 26%, transparent);
+}
+.icen-chart-vbar-track--multi.icen-chart-vbar-track--stacked > .icen-chart-vbar-bar {
+  flex: none;
+  width: 100%;
+  border-radius: 0;
+  box-shadow: none;
+}
+/* 堆叠两端保留外轮廓圆角，段与段之间用 2px 面色缝分界（同色相邻也辨得清） */
+.icen-chart-vbar-track--stacked > .icen-chart-vbar-bar:first-child {
+  border-end-start-radius: var(--icen-radius-xs);
+  border-end-end-radius: var(--icen-radius-xs);
+}
+.icen-chart-vbar-track--stacked > .icen-chart-vbar-bar:last-child {
+  border-start-start-radius: var(--icen-radius-xs);
+  border-start-end-radius: var(--icen-radius-xs);
+}
+.icen-chart-vbar-track--stacked > .icen-chart-vbar-bar + .icen-chart-vbar-bar {
+  box-shadow: inset 0 2px 0 var(--icen-token-card);
+}
+
+/* ── 标记线/标记点（spec.marks 的 vbar DOM 变体；--chart-mark-tone 注入标记色；
+      绝对定位元素无 z-index 也高于同容器内的静态条/轨，保持 DOM 顺序即叠放正确）── */
+.icen-chart-vbar .icen-chart-mark-line {
+  position: absolute;
+  pointer-events: none;
+}
+.icen-chart-vbar .icen-chart-mark-line--h {
+  left: 0;
+  right: 0;
+  border-top: 1px dashed var(--chart-mark-tone, var(--icen-token-text-faint));
+}
+.icen-chart-vbar .icen-chart-mark-line--v {
+  top: 0;
+  bottom: 0;
+  border-left: 1px dashed var(--chart-mark-tone, var(--icen-token-text-faint));
+  transform: translateX(-0.5px);
+}
+.icen-chart-vbar .icen-chart-mark-label {
+  position: absolute;
+  font-size: 11px;
+  line-height: 1.25;
+  color: var(--chart-mark-tone, var(--icen-token-text-muted));
+  white-space: nowrap;
+}
+.icen-chart-vbar .icen-chart-mark-line--h > .icen-chart-mark-label {
+  right: 4px;
+  top: -2px;
+  transform: translateY(-100%);
+}
+.icen-chart-vbar .icen-chart-mark-line--v > .icen-chart-mark-label {
+  top: 2px;
+  left: 3px;
+}
+.icen-chart-vbar .icen-chart-mark-point {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  border-radius: var(--icen-radius-full);
+  background: var(--icen-token-card);
+  border: 2px solid var(--chart-mark-tone, var(--icen-token-accent));
+  transform: translate(-50%, 50%);
+  pointer-events: none;
+}
+.icen-chart-vbar .icen-chart-mark-point > .icen-chart-mark-label {
+  bottom: 13px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+@media (forced-colors: active) {
+  .icen-chart-vbar-track {
+    background: Canvas;
+    border: 1px solid CanvasText;
+  }
+  .icen-chart-hbar-track { border: 1px solid CanvasText; }
+}
+
 }
-.chart-vbar-track--multi.chart-vbar-track--stacked > .chart-vbar-bar { flex: none; width: 100%; }

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

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

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

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