@icen.ai/ui 0.8.1 → 0.10.0

package/dist/components/content.css

@@ -1,226 +1,233 @@
+@layer icen.components {
 /*
  * @icen.ai/ui — Component: content（内容展示族）
  *
  * 包含：kbd（按键）/ code-inline（行内代码）/ list（分隔列表）/ accordion（手风琴，behaviors/accordion 配套）/
  *       timeline（时间线）/ desc（描述列表）/ tree（树形，behaviors/tree 配套）
  * markup API 变体（正文"增强"段，behavior 不产出、由手写 markup 消费）：
- *   .accordion--cards / .code-inline--success|--warning|--error /
- *   .timeline--right|--alternate|--sm / .timeline-extra / .timeline-dot--sm 及 dot 语义色（--error 等）
+ *   .icen-accordion--cards / .icen-code-inline--success|--warning|--error /
+ *   .icen-timeline--right|--alternate|--sm / .icen-timeline-extra / .icen-timeline-dot--sm 及 dot 语义色（--error 等）
  * 规格源自 opengal src/presentation/ui/data/exhibit.tsx 与 data/display.tsx。
  */
 
 /* ══════════════ kbd · 按键 ══════════════ */
-.kbd {
+.icen-kbd {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   vertical-align: middle;
-  font-family: var(--font-mono);
+  font-family: var(--icen-font-mono);
   font-weight: 500;
-  border-radius: var(--radius-xs);
-  border: 1px solid var(--token-outline);
-  background: var(--token-control);
-  color: var(--token-text-muted);
-  box-shadow: var(--token-shadow-inset);
+  border-radius: var(--icen-radius-xs);
+  border: 1px solid var(--icen-token-outline);
+  background: var(--icen-token-control);
+  color: var(--icen-token-text-muted);
+  box-shadow: var(--icen-token-shadow-inset);
   height: 20px;
   min-width: 20px;
-  padding: 0 var(--density-space-xs);
-  font-size: var(--density-font-size-xs);
+  padding: 0 var(--icen-density-space-xs);
+  font-size: var(--icen-density-font-size-xs);
 }
-.kbd--sm {
+.icen-kbd--sm {
   height: 16px;
   min-width: 16px;
   padding: 0 4px;
-  font-size: var(--density-font-size-2xs);
+  font-size: var(--icen-density-font-size-2xs);
 }
-.kbd-group {
+.icen-kbd-group {
   display: inline-flex;
   align-items: center;
   gap: 2px;
-  font-family: var(--font-mono);
-  font-size: var(--density-font-size-xs);
-  color: var(--token-text-muted);
+  font-family: var(--icen-font-mono);
+  font-size: var(--icen-density-font-size-xs);
+  color: var(--icen-token-text-muted);
 }
-.kbd-group .kbd { font-size: inherit; }
+.icen-kbd-group .icen-kbd { font-size: inherit; }
 
 /* ══════════════ code-inline · 行内代码 ══════════════ */
-.code-inline {
-  padding: 2px var(--density-space-xs);
-  border-radius: var(--radius-xs);
-  background: var(--token-control);
-  border: 1px solid var(--token-outline-soft);
+.icen-code-inline {
+  padding: 2px var(--icen-density-space-xs);
+  border-radius: var(--icen-radius-xs);
+  background: var(--icen-token-control);
+  border: 1px solid var(--icen-token-outline-soft);
   font-size: 0.9em;
-  font-family: var(--font-mono);
-  color: var(--token-accent);
+  font-family: var(--icen-font-mono);
+  color: var(--icen-token-accent-text, var(--icen-token-accent));
   word-break: break-word;
 }
 
 /* ══════════════ list · 分隔列表 ══════════════
- * DOM：<ul class="list [list--hover|list--compact]"><li class="list-item">…</li></ul>
+ * DOM：<ul class="icen-list [list--hover|icen-list--compact]"><li class="icen-list-item">…</li></ul>
  * list--hover：每项 hover 浮起（默认有 hover）；
  * list--compact：缩小 padding。
  */
-.list {
+.icen-list {
   list-style: none;
   margin: 0;
   padding: 0;
 }
-.list-item {
-  padding: var(--density-space-sm);
-  border-radius: var(--radius-sm);
+.icen-list-item {
+  padding: var(--icen-density-space-sm);
+  border-radius: var(--icen-radius-sm);
   transition: background-color var(--icen-tx-fast);
 }
-.list-item:hover { background: var(--token-control-hover); }
-.list .list-item + .list-item { border-top: 1px solid var(--token-outline-soft); }
-.list--compact .list-item { padding: var(--density-space-xs) var(--density-space-sm); }
+.icen-list-item:hover { background: var(--icen-token-control-hover); }
+.icen-list .icen-list-item + .icen-list-item { border-top: 1px solid var(--icen-token-outline-soft); }
+.icen-list--compact .icen-list-item { padding: var(--icen-density-space-xs) var(--icen-density-space-sm); }
 
 /* ══════════════ accordion · 手风琴（behaviors/accordion 配套） ══════════════
  * DOM：
- *   <div class="accordion" data-single?>
- *     <div class="accordion-item [.is-open] [.is-disabled]">
- *       <button class="accordion-trigger" aria-expanded="true">标题 <svg class="accordion-chevron"/></button>
- *       <div class="accordion-panel"><div class="accordion-panel-inner">内容</div></div>
+ *   <div class="accordion" data-icen-single?>
+ *     <div class="icen-accordion-item [.is-open] [.is-disabled]">
+ *       <button class="icen-accordion-trigger" aria-expanded="true">标题 <svg class="icen-accordion-chevron"/></button>
+ *       <div class="icen-accordion-panel"><div class="icen-accordion-panel-inner">内容</div></div>
  *     </div>
  *   </div>
  * 展开 = item 挂 .is-open；panel 用 grid-template-rows 0fr→1fr 做过渡。
- * data-single：展开一项自动收起其余（behavior 实现）。
+ * data-icen-single：展开一项自动收起其余（behavior 实现）。
  */
-.accordion-item {
-  border-bottom: 1px solid var(--token-outline-soft);
+.icen-accordion-item {
+  border-bottom: 1px solid var(--icen-token-outline-soft);
 }
-.accordion-item:last-child { border-bottom: 0; }
-.accordion-trigger {
+.icen-accordion-item:last-child { border-bottom: 0; }
+.icen-accordion-trigger {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: var(--density-space-sm);
-  padding: var(--density-space-sm);
-  font-size: var(--density-font-size-md);
+  gap: var(--icen-density-space-sm);
+  padding: var(--icen-density-space-sm);
+  font-size: var(--icen-density-font-size-md);
   font-weight: 500;
-  color: var(--token-text);
-  text-align: left;
+  color: var(--icen-token-text);
+  text-align: start;
   background: none;
   border: 0;
   cursor: pointer;
-  border-radius: var(--radius-sm);
+  border-radius: var(--icen-radius-sm);
   transition: background-color var(--icen-tx-fast);
 }
-.accordion-trigger:hover {
-  background: var(--token-control-hover);
+.icen-accordion-trigger:hover {
+  background: var(--icen-token-control-hover);
 }
-.accordion-trigger:focus-visible {
+.icen-accordion-trigger:focus-visible {
   outline: none;
   box-shadow: var(--icen-ring);
 }
-.accordion-item.is-disabled .accordion-trigger,
-.accordion-item[aria-disabled='true'] .accordion-trigger {
+.icen-accordion-item.is-disabled .icen-accordion-trigger,
+.icen-accordion-item[aria-disabled='true'] .icen-accordion-trigger {
   opacity: var(--icen-disabled-opacity);
   cursor: not-allowed;
   pointer-events: none;
 }
-.accordion-chevron {
+.icen-accordion-chevron {
   width: 14px;
   height: 14px;
   flex-shrink: 0;
-  color: var(--token-text-faint);
+  color: var(--icen-token-text-faint);
   transition: transform var(--icen-tx-normal);
 }
-.accordion-item.is-open .accordion-chevron {
+.icen-accordion-item.is-open .icen-accordion-chevron {
   transform: rotate(180deg);
 }
-.accordion-panel {
+.icen-accordion-panel {
   display: grid;
   grid-template-rows: 0fr;
+  overflow: clip; /* 双保险：收起态任何残留内容都不许露出 */
   transition: grid-template-rows var(--icen-tx-normal);
 }
-.accordion-item.is-open .accordion-panel { grid-template-rows: 1fr; }
-.accordion-panel-inner {
+.icen-accordion-item.is-open .icen-accordion-panel { grid-template-rows: 1fr; }
+.icen-accordion-panel-inner {
   overflow: hidden;
   min-height: 0;
-  padding: 0 var(--density-space-sm) var(--density-space-sm);
-  font-size: var(--density-font-size-sm);
-  color: var(--token-text-muted);
+  /* 块距随开合动画：静态 padding-bottom 会成为 0fr 轨道的最小内容贡献，
+     收起态露出首行文字上缘（内边距不被 overflow 裁切） */
+  padding: 0 var(--icen-density-space-sm);
+  padding-block-end: 0;
+  transition: padding-block-end var(--icen-tx-normal);
+  font-size: var(--icen-density-font-size-sm);
+  color: var(--icen-token-text-muted);
   line-height: 1.6;
 }
+.icen-accordion-item.is-open .icen-accordion-panel-inner { padding-block-end: var(--icen-density-space-sm); }
 
 /* 卡片式手风琴：整组包在带边框的卡片里 */
-.accordion--cards {
-  border: 1px solid var(--token-outline-soft);
-  border-radius: var(--radius-md);
+.icen-accordion--cards {
+  border: 1px solid var(--icen-token-outline-soft);
+  border-radius: var(--icen-radius-md);
   overflow: hidden;
 }
-.accordion--cards .accordion-item {
+.icen-accordion--cards .icen-accordion-item {
   border-bottom: 0;
 }
-.accordion--cards .accordion-item + .accordion-item {
-  border-top: 1px solid var(--token-outline-soft);
+.icen-accordion--cards .icen-accordion-item + .icen-accordion-item {
+  border-top: 1px solid var(--icen-token-outline-soft);
 }
 
 /* ══════════════ timeline · 时间线 ══════════════
- * DOM：.timeline-item > .timeline-dot + .timeline-body
+ * DOM：.icen-timeline-item > .icen-timeline-dot + .icen-timeline-body
  * 连接线 = item::after（相对 item 绝对定位，从 dot 下方贯穿到下一项），末项不画。
  */
-.timeline {
+.icen-timeline {
   display: flex;
   flex-direction: column;
 }
-.timeline-item {
+.icen-timeline-item {
   position: relative;
   display: flex;
-  gap: var(--density-space-sm);
-  padding-bottom: var(--density-space-lg);
+  gap: var(--icen-density-space-sm);
+  padding-bottom: var(--icen-density-space-lg);
 }
-.timeline-item:last-child { padding-bottom: 0; }
-.timeline-item:not(:last-child)::after {
+.icen-timeline-item:last-child { padding-bottom: 0; }
+.icen-timeline-item:not(:last-child)::after {
   content: '';
   position: absolute;
-  left: 13.5px;       /* 28px dot 的水平中心 */
+  inset-inline-start: 13.5px; /* 28px dot 的水平中心（dot 在 flex 起始缘，RTL 自动镜像） */
   top: 32px;
   bottom: 0;
   width: 1px;
-  background: var(--token-outline-soft);
+  background: var(--icen-token-outline-soft);
 }
-.timeline-dot {
+.icen-timeline-dot {
   width: 28px;
   height: 28px;
   flex-shrink: 0;
-  border-radius: var(--radius-full);
+  border-radius: var(--icen-radius-full);
   display: flex;
   align-items: center;
   justify-content: center;
-  background: var(--token-control);
-  border: 1px solid var(--token-outline-soft);
-  color: var(--token-text-muted);
+  background: var(--icen-token-control);
+  border: 1px solid var(--icen-token-outline-soft);
+  color: var(--icen-token-text-muted);
   z-index: 1;
 }
-.timeline-dot svg { width: 13px; height: 13px; }
-.timeline-dot--accent  { background: var(--token-accent);  color: var(--token-on-accent); border-color: transparent; }
-.timeline-dot--success { background: var(--token-success); color: var(--token-on-accent); border-color: transparent; }
-.timeline-dot--warning { background: var(--token-warning); color: var(--token-on-accent); border-color: transparent; }
-.timeline-dot--error   { background: var(--token-error);   color: var(--token-on-accent); border-color: transparent; }
-.timeline-dot--info    { background: var(--token-info);    color: var(--token-on-accent); border-color: transparent; }
+.icen-timeline-dot svg { width: 13px; height: 13px; }
+.icen-timeline-dot--accent  { background: var(--icen-token-accent-strong);  color: var(--icen-token-on-accent); border-color: transparent; }
+.icen-timeline-dot--success { background: var(--icen-token-success); color: var(--icen-token-on-accent); border-color: transparent; }
+.icen-timeline-dot--warning { background: var(--icen-token-warning); color: var(--icen-token-on-accent); border-color: transparent; }
+.icen-timeline-dot--error   { background: var(--icen-token-error);   color: var(--icen-token-on-accent); border-color: transparent; }
+.icen-timeline-dot--info    { background: var(--icen-token-info);    color: var(--icen-token-on-accent); border-color: transparent; }
 
-.timeline-body { flex: 1; min-width: 0; }
-.timeline-head {
+.icen-timeline-body { flex: 1; min-inline-size: 0; }
+.icen-timeline-head {
   display: flex;
   align-items: center;
-  gap: var(--density-space-sm);
+  gap: var(--icen-density-space-sm);
 }
-.timeline-title {
-  font-size: var(--density-font-size-md);
+.icen-timeline-title {
+  font-size: var(--icen-density-font-size-md);
   font-weight: 500;
-  color: var(--token-text);
+  color: var(--icen-token-text);
 }
-.timeline-time {
-  font-size: var(--density-font-size-xs);
-  color: var(--token-text-faint);
-  margin-left: auto;
+.icen-timeline-time {
+  font-size: var(--icen-density-font-size-xs);
+  color: var(--icen-token-text-faint);
+  margin-inline-start: auto;
   font-variant-numeric: tabular-nums;
 }
-.timeline-desc {
-  font-size: var(--density-font-size-sm);
-  color: var(--token-text-muted);
+.icen-timeline-desc {
+  font-size: var(--icen-density-font-size-sm);
+  color: var(--icen-token-text-muted);
   margin: 4px 0 0;
   line-height: 1.5;
 }
@@ -229,96 +236,101 @@
  * 列数由容器 style="--desc-cols:N" 指定，默认 2；item 可用 style="--desc-span:N" 跨列。
  * --bordered 变体：gap:1px 露出容器底色形成格线。
  */
-.desc { display: flex; flex-direction: column; gap: var(--density-space-sm); }
-.desc-title {
-  font-size: var(--density-font-size-md);
+.icen-desc { display: flex; flex-direction: column; gap: var(--icen-density-space-sm); }
+.icen-desc-title {
+  font-size: var(--icen-density-font-size-md);
   font-weight: 500;
-  color: var(--token-text);
+  color: var(--icen-token-text);
   margin: 0;
 }
-.desc-grid {
+.icen-desc-grid {
   display: grid;
   grid-template-columns: repeat(var(--desc-cols, 2), minmax(0, 1fr));
   gap: 1px;
   margin: 0;
 }
-.desc--bordered .desc-grid {
-  background: var(--token-outline-soft);
-  border: 1px solid var(--token-outline-soft);
-  border-radius: var(--radius-md);
+.icen-desc--bordered .icen-desc-grid {
+  background: var(--icen-token-outline-soft);
+  border: 1px solid var(--icen-token-outline-soft);
+  border-radius: var(--icen-radius-md);
   overflow: hidden;
 }
-.desc-item { grid-column: span var(--desc-span, 1); }
-.desc--bordered .desc-item {
-  background: var(--token-card);
-  padding: var(--density-space-sm) var(--density-space-md);
+.icen-desc-item { grid-column: span var(--desc-span, 1); }
+.icen-desc--bordered .icen-desc-item {
+  background: var(--icen-token-card);
+  padding: var(--icen-density-space-sm) var(--icen-density-space-md);
 }
-.desc:not(.desc--bordered) .desc-item {
+.icen-desc:not(.icen-desc--bordered) .icen-desc-item {
   display: flex;
   flex-direction: column;
   gap: 2px;
 }
-.desc-item dt {
-  font-size: var(--density-font-size-xs);
-  color: var(--token-text-faint);
+.icen-desc-item dt {
+  font-size: var(--icen-density-font-size-xs);
+  color: var(--icen-token-text-faint);
 }
-.desc-item dd {
-  font-size: var(--density-font-size-md);
-  color: var(--token-text);
+.icen-desc-item dd {
+  font-size: var(--icen-density-font-size-md);
+  color: var(--icen-token-text);
   margin: 0;
   line-height: 1.5;
 }
 
 @media (max-width: 640px) {
-  .desc-grid { grid-template-columns: 1fr !important; }
+  .icen-desc-grid { grid-template-columns: 1fr !important; /* guard:allow-important 状态/守卫覆盖需压制变体优先级 */ }
 }
 
 /* ══════════════ tree · 树形（behaviors/tree 配套） ══════════════
  * DOM：
- *   <ul class="tree"><li>
- *     <div class="tree-node [.is-selected] [.is-disabled]" style="--depth:0">
- *       <button class="tree-toggle [.is-collapsed]"><svg/></button>
- *       <span class="tree-label">节点</span>
+ *   <ul class="icen-tree"><li>
+ *     <div class="icen-tree-node [.is-selected] [.is-disabled]" style="--depth:0">
+ *       <button class="icen-tree-toggle [.is-collapsed]"><svg/></button>
+ *       <span class="icen-tree-label">节点</span>
  *     </div>
  *     <ul>…子节点…</ul>
  *   </li></ul>
  * 折叠 = toggle 挂 .is-collapsed（chevron 转 -90°）+ 子 ul hidden；选中 = node 挂 .is-selected。
  */
-.tree, .tree ul {
+.icen-tree, .icen-tree ul {
   list-style: none;
   margin: 0;
   padding: 0;
 }
-.tree { user-select: none; }
-.tree-node {
+.icen-tree { user-select: none; }
+.icen-tree-node {
   display: flex;
   align-items: center;
-  gap: var(--density-space-xs);
-  padding: var(--density-space-xs) var(--density-space-sm) var(--density-space-xs) calc(4px + var(--depth, 0) * 14px);
-  border-radius: var(--radius-sm);
-  font-size: var(--density-font-size-md);
-  color: var(--token-text);
+  gap: var(--icen-density-space-xs);
+  /* 深度缩进沿 inline-start（RTL 下树向左侧生长） */
+  padding-block: var(--icen-density-space-xs);
+  padding-inline: calc(4px + var(--depth, 0) * 14px) var(--icen-density-space-sm);
+  border-radius: var(--icen-radius-sm);
+  font-size: var(--icen-density-font-size-md);
+  color: var(--icen-token-text);
   cursor: pointer;
   transition: background-color var(--icen-tx-fast);
 }
-.tree-node:hover { background: var(--token-control-hover); }
-.tree-node:focus-visible,
-.tree-node:focus-within {
+.icen-tree-node:hover { background: var(--icen-token-control-hover); }
+.icen-tree-node:focus-visible,
+.icen-tree-node:focus-within {
   outline: none;
   box-shadow: var(--icen-ring);
 }
-.tree-node.is-selected,
-.tree-node[aria-selected='true'] {
-  background: var(--token-accent-subtle);
-  color: var(--token-accent);
+.icen-tree-node.is-selected,
+.icen-tree-node[aria-selected='true'] {
+  background: var(--icen-token-accent-subtle);
+  color: var(--icen-token-accent-text, var(--icen-token-accent-deep, var(--icen-token-accent)));
   font-weight: 500;
 }
-.tree-node.is-disabled,
-.tree-node[aria-disabled='true'] {
-  opacity: var(--icen-disabled-opacity);
+.icen-tree-node.is-disabled,
+.icen-tree-node[aria-disabled='true'] {
   pointer-events: none;
 }
-.tree-toggle {
+.icen-tree-node.is-disabled .icen-tree-label,
+.icen-tree-node[aria-disabled='true'] .icen-tree-label {
+  color: var(--icen-token-text-muted); /* 禁用≠淡到不可读：不整行降透明（axe 会把透明度算进对比度），标签落 muted */
+}
+.icen-tree-toggle {
   width: 18px;
   height: 18px;
   flex-shrink: 0;
@@ -328,53 +340,53 @@
   padding: 0;
   border: 0;
   background: none;
-  color: var(--token-text-muted);
+  color: var(--icen-token-text-muted);
   cursor: pointer;
 }
-.tree-toggle:hover { color: var(--token-text); }
-.tree-toggle:focus-visible {
+.icen-tree-toggle:hover { color: var(--icen-token-text); }
+.icen-tree-toggle:focus-visible {
   outline: none;
-  border-radius: var(--radius-xs);
+  border-radius: var(--icen-radius-xs);
   box-shadow: var(--icen-ring);
 }
-.tree-toggle svg {
+.icen-tree-toggle svg {
   width: 13px;
   height: 13px;
   transition: transform var(--icen-tx-fast);
 }
-.tree-toggle.is-collapsed svg { transform: rotate(-90deg); }
-.tree-toggle[aria-hidden='true'] { visibility: hidden; pointer-events: none; }
-.tree-label {
+.icen-tree-toggle.is-collapsed svg { transform: rotate(-90deg); }
+.icen-tree-toggle[aria-hidden='true'] { visibility: hidden; pointer-events: none; }
+.icen-tree-label {
   flex: 1;
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.tree-icon {
+.icen-tree-icon {
   flex-shrink: 0;
   width: 14px;
   height: 14px;
-  color: var(--token-text-muted);
+  color: var(--icen-token-text-muted);
 }
-.tree-node.is-selected .tree-icon { color: var(--token-accent); }
-.tree-badge {
+.icen-tree-node.is-selected .icen-tree-icon { color: var(--icen-token-accent); }
+.icen-tree-badge {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 16px;
   height: 16px;
   padding: 0 4px;
-  font-size: var(--density-font-size-2xs);
+  font-size: var(--icen-density-font-size-2xs);
   font-weight: 600;
-  color: var(--token-on-accent);
-  background: var(--token-accent);
-  border-radius: var(--radius-full);
+  color: var(--icen-token-on-accent);
+  background: var(--icen-token-accent-strong);
+  border-radius: var(--icen-radius-full);
   flex-shrink: 0;
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .accordion-panel, .accordion-chevron, .tree-toggle svg, .list-item, .tree-node {
+  .icen-accordion-panel, .icen-accordion-chevron, .icen-tree-toggle svg, .icen-list-item, .icen-tree-node {
     transition: none;
   }
 }
@@ -382,196 +394,190 @@
 /* ── list 增强 ── */
 
 /* 列表项带前置图标/头像 */
-.list-item-leading {
+.icen-list-item-leading {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  margin-right: var(--density-space-sm);
+  margin-inline-end: var(--icen-density-space-sm);
 }
-.list-item-leading svg { width: 16px; height: 16px; color: var(--token-text-faint); }
-.list-item-content {
+.icen-list-item-leading svg { width: 16px; height: 16px; color: var(--icen-token-text-faint); }
+.icen-list-item-content {
   flex: 1;
-  min-width: 0;
+  min-inline-size: 0;
   display: flex;
   flex-direction: column;
   gap: 1px;
 }
-.list-item-title {
-  font-size: var(--density-font-size-md);
-  color: var(--token-text);
+.icen-list-item-title {
+  font-size: var(--icen-density-font-size-md);
+  color: var(--icen-token-text);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.list-item-meta {
-  font-size: var(--density-font-size-xs);
-  color: var(--token-text-faint);
+.icen-list-item-meta {
+  font-size: var(--icen-density-font-size-xs);
+  color: var(--icen-token-text-faint);
 }
-.list-item-trailing {
+.icen-list-item-trailing {
   flex-shrink: 0;
-  margin-left: var(--density-space-sm);
-  font-size: var(--density-font-size-xs);
-  color: var(--token-text-faint);
+  margin-inline-start: var(--icen-density-space-sm);
+  font-size: var(--icen-density-font-size-xs);
+  color: var(--icen-token-text-faint);
 }
-.list-item--selectable {
+.icen-list-item--selectable {
   cursor: pointer;
 }
-.list-item.is-selected {
-  background: var(--token-accent-subtle);
+.icen-list-item.is-selected {
+  background: var(--icen-token-accent-subtle);
 }
-.list-item.is-selected .list-item-title { color: var(--token-accent); font-weight: 500; }
+.icen-list-item.is-selected .icen-list-item-title { color: var(--icen-token-accent); font-weight: 500; }
 
 /* 列表项 flex 布局（leading + content + trailing） */
-.list-item--flex {
+.icen-list-item--flex {
   display: flex;
   align-items: center;
 }
 
 /* 斑马列表 */
-.list--striped .list-item:nth-child(odd) {
-  background: color-mix(in srgb, var(--token-bg-soft) 40%, transparent);
+.icen-list--striped .icen-list-item:nth-child(odd) {
+  background: color-mix(in srgb, var(--icen-token-bg-soft) 40%, transparent);
 }
 
 /* ── timeline 增强 ── */
 
-/* 右侧时间线（dot 在右） */
-.timeline--right .timeline-item { flex-direction: row-reverse; }
-.timeline--right .timeline-item:not(:last-child)::after {
-  left: auto;
-  right: 13.5px;
+/* 右侧时间线（物理变体：dot 固定在右，RTL 语义不变） */
+.icen-timeline--right .icen-timeline-item { flex-direction: row-reverse; }
+.icen-timeline--right .icen-timeline-item:not(:last-child)::after {
+  left: auto; /* guard:allow-physical --right 是按物理侧命名的变体 */
+  right: 13.5px; /* guard:allow-physical --right 是按物理侧命名的变体 */
 }
-.timeline--right .timeline-body { text-align: right; }
-.timeline--right .timeline-time { margin-left: 0; margin-right: auto; }
+.icen-timeline--right .icen-timeline-body { text-align: right; /* guard:allow-physical --right 物理变体：正文贴物理右侧 */ }
+.icen-timeline--right .icen-timeline-time { margin-left: 0; /* guard:allow-physical --right 物理变体 */ margin-right: auto; /* guard:allow-physical --right 物理变体 */ }
 
-/* 交替时间线（奇左偶右） */
-.timeline--alternate .timeline-item:nth-child(even) { flex-direction: row-reverse; }
-.timeline--alternate .timeline-item:nth-child(even):not(:last-child)::after {
-  left: auto; right: 13.5px;
+/* 交替时间线（奇物理左偶物理右，变体名即物理侧约定） */
+.icen-timeline--alternate .icen-timeline-item:nth-child(even) { flex-direction: row-reverse; }
+.icen-timeline--alternate .icen-timeline-item:nth-child(even):not(:last-child)::after {
+  left: auto; /* guard:allow-physical --alternate 偶数项钉在物理右侧 */
+  right: 13.5px; /* guard:allow-physical --alternate 偶数项钉在物理右侧 */
 }
-.timeline--alternate .timeline-item:nth-child(even) .timeline-body { text-align: right; }
-.timeline--alternate .timeline-item:nth-child(even) .timeline-time {
-  margin-left: 0; margin-right: auto;
+.icen-timeline--alternate .icen-timeline-item:nth-child(even) .icen-timeline-body { text-align: right; /* guard:allow-physical --alternate 偶数项正文贴物理右侧 */ }
+.icen-timeline--alternate .icen-timeline-item:nth-child(even) .icen-timeline-time {
+  margin-left: 0; /* guard:allow-physical --alternate 偶数项 */
+  margin-right: auto; /* guard:allow-physical --alternate 偶数项 */
 }
 
 /* 自定义 dot 尺寸 */
-.timeline-dot--sm { width: 20px; height: 20px; }
-.timeline-dot--sm svg { width: 10px; height: 10px; }
-.timeline--sm .timeline-item:not(:last-child)::after { left: 10px; top: 24px; }
+.icen-timeline-dot--sm { width: 20px; height: 20px; }
+.icen-timeline-dot--sm svg { width: 10px; height: 10px; }
+.icen-timeline--sm .icen-timeline-item:not(:last-child)::after { inset-inline-start: 10px; top: 24px; }
 
 /* 时间线自定义内容槽（放标签、卡片等） */
-.timeline-extra {
-  margin-top: var(--density-space-xs);
-  padding: var(--density-space-sm);
-  background: var(--token-bg-soft);
-  border-radius: var(--radius-sm);
-  font-size: var(--density-font-size-sm);
+.icen-timeline-extra {
+  margin-top: var(--icen-density-space-xs);
+  padding: var(--icen-density-space-sm);
+  background: var(--icen-token-bg-soft);
+  border-radius: var(--icen-radius-sm);
+  font-size: var(--icen-density-font-size-sm);
 }
 
 /* ── desc 增强 ── */
 
 /* 行内描述（label: value 在同一行） */
-.desc--inline .desc-item {
+.icen-desc--inline .icen-desc-item {
   display: flex;
   align-items: baseline;
-  gap: var(--density-space-sm);
+  gap: var(--icen-density-space-sm);
   padding: 4px 0;
 }
-.desc--inline .desc-item dt {
+.icen-desc--inline .icen-desc-item dt {
   flex-shrink: 0;
-  min-width: 80px;
+  min-inline-size: 80px;
 }
-.desc--inline .desc-item dd {
+.icen-desc--inline .icen-desc-item dd {
   flex: 1;
 }
 
 /* 垂直描述（label 在上，value 在下） */
-.desc--vertical .desc-item {
+.icen-desc--vertical .icen-desc-item {
   display: flex;
   flex-direction: column;
   gap: 2px;
 }
 
 /* 可复制描述值 */
-.desc-copy {
+.icen-desc-copy {
   display: inline-flex;
   align-items: center;
-  gap: var(--density-space-xs);
+  gap: var(--icen-density-space-xs);
 }
-.desc-copy-btn {
+.icen-desc-copy-btn {
   display: inline-flex;
   align-items: center;
   padding: 2px;
   border: 0;
-  border-radius: var(--radius-xs);
+  border-radius: var(--icen-radius-xs);
   background: transparent;
-  color: var(--token-text-faint);
+  color: var(--icen-token-text-faint);
   cursor: pointer;
   transition: color var(--icen-tx-fast), background-color var(--icen-tx-fast);
 }
-.desc-copy-btn:hover { color: var(--token-accent); background: var(--token-fill-1); }
-.desc-copy-btn svg { width: 12px; height: 12px; }
+.icen-desc-copy-btn:hover { color: var(--icen-token-accent); background: var(--icen-token-fill-1); }
+.icen-desc-copy-btn svg { width: 12px; height: 12px; }
 
 /* ── tree 增强 ── */
 
-/* 带连接线的树 */
-.tree--lined ul {
+/* 带连接线的树（连接线沿 inline-start 侧缩进，RTL 自动镜像） */
+.icen-tree--lined ul {
   position: relative;
-  margin-left: 7px;
-  padding-left: 0;
-  border-left: 1px solid var(--token-outline-soft);
+  margin-inline-start: 7px;
+  padding-inline-start: 0;
+  border-inline-start: 1px solid var(--icen-token-outline-soft);
 }
-.tree--lined .tree-node {
+.icen-tree--lined .icen-tree-node {
   position: relative;
 }
-.tree--lined ul > li > .tree-node::before {
+.icen-tree--lined ul > li > .icen-tree-node::before {
   content: '';
   position: absolute;
-  left: -8px;
+  inset-inline-start: -8px;
   top: 50%;
   width: 8px;
   height: 1px;
-  background: var(--token-outline-soft);
+  background: var(--icen-token-outline-soft);
 }
 
 /* 树搜索高亮 */
-.tree-label mark {
-  background: color-mix(in srgb, var(--token-warning) 30%, transparent);
+.icen-tree-label mark {
+  background: color-mix(in srgb, var(--icen-token-warning) 30%, transparent);
   color: inherit;
-  border-radius: 2px;
+  border-radius: 2px; /* guard:allow-radius 微构件（bar/dot/track/指示器等图形级，不属容器圆角面）  */
   padding: 0 1px;
 }
 
 /* ── kbd 增强 ── */
 
 /* 大号 kbd（展示用） */
-.kbd--lg {
+.icen-kbd--lg {
   height: 28px;
   min-width: 28px;
-  padding: 0 var(--density-space-sm);
-  font-size: var(--density-font-size-md);
+  padding: 0 var(--icen-density-space-sm);
+  font-size: var(--icen-density-font-size-md);
 }
 
 /* kbd 按下态（动画反馈） */
-.kbd.is-pressed {
+.icen-kbd.is-pressed {
   transform: translateY(1px);
   box-shadow: none;
 }
 
 /* ── code-inline 增强 ── */
-.code-inline--success { color: var(--token-success); }
-.code-inline--warning { color: var(--token-warning); }
-.code-inline--error   { color: var(--token-error); }
-
-/* 代码块（多行，非行内） */
-.code-block {
-  padding: var(--density-space-sm) var(--density-space-md);
-  background: var(--token-bg-soft);
-  border: 1px solid var(--token-outline-soft);
-  border-radius: var(--radius-md);
-  font-family: var(--font-mono);
-  font-size: var(--density-font-size-sm);
-  color: var(--token-text);
-  overflow-x: auto;
-  line-height: 1.6;
+.icen-code-inline--success { color: var(--icen-token-success); }
+.icen-code-inline--warning { color: var(--icen-token-warning); }
+.icen-code-inline--error   { color: var(--icen-token-error); }
+
+/* 代码块（多行，非行内）：由独立组件 code-block.css 承担（标题栏/行号/折叠/diff/
+ * shiki 协同），本文件不再承载 .icen-code-block 样式。 */
+
 }