@icen.ai/ui 0.5.0 → 0.8.1

package/dist/components/layout.css

@@ -1,23 +1,23 @@
 /*
  * @icen.ai/ui — Component: layout（布局原语，全部是工具类，无 JS）
  * stack / divider / surface / text / grid / center / container / aspect / visually-hidden
- * 全部消费 --token-*；档位类名与 opengal primitives/layout(-containers) 一一对应。
+ * 全部消费 --token-* 与 --density-*；档位类名与 opengal primitives/layout(-containers) 一一对应。
  */
 
-/* ── Stack：flex 堆叠（默认列向，gap 8px） ── */
-.stack { display: flex; flex-direction: column; gap: 8px; }
+/* ── Stack：flex 堆叠（默认列向，gap = density-space-sm） ── */
+.stack { display: flex; flex-direction: column; gap: var(--density-space-sm); }
 .stack--row { flex-direction: row; }
 .stack--inline { display: inline-flex; }
 .stack--wrap { flex-wrap: wrap; }
 .stack--gap-0 { gap: 0; }
-.stack--gap-1 { gap: 4px; }
-.stack--gap-2 { gap: 8px; }
-.stack--gap-3 { gap: 12px; }
-.stack--gap-4 { gap: 16px; }
-.stack--gap-6 { gap: 24px; }
-.stack--gap-8 { gap: 32px; }
-.stack--gap-12 { gap: 48px; }
-.stack--gap-16 { gap: 64px; }
+.stack--gap-1 { gap: var(--density-space-xs); }
+.stack--gap-2 { gap: var(--density-space-sm); }
+.stack--gap-3 { gap: var(--density-space-md); }
+.stack--gap-4 { gap: var(--density-space-lg); }
+.stack--gap-6 { gap: var(--density-space-xl); }
+.stack--gap-8 { gap: var(--density-space-2xl); }
+.stack--gap-12 { gap: var(--density-space-3xl); }
+.stack--gap-16 { gap: var(--density-space-4xl); }
 .stack--items-start { align-items: flex-start; }
 .stack--items-center { align-items: center; }
 .stack--items-end { align-items: flex-end; }
@@ -34,13 +34,13 @@
 .divider { background: var(--token-outline-soft); height: 1px; width: 100%; }
 .divider--vertical { width: 1px; height: 100%; align-self: stretch; }
 
-/* ── Surface：卡片容器（默认 inset 阴影 + 16px padding） ── */
+/* ── Surface：卡片容器（默认 inset 阴影 + density-space-lg padding） ── */
 .surface {
   border-radius: var(--radius-lg);
   background: var(--token-card);
   border: 1px solid var(--token-outline-soft);
   box-shadow: var(--token-shadow-inset);
-  padding: 16px;
+  padding: var(--density-space-lg);
 }
 .surface--elevated { box-shadow: var(--token-shadow-card); }
 .surface--overlay {
@@ -49,18 +49,18 @@
   box-shadow: var(--token-shadow-overlay);
 }
 .surface--p-none { padding: 0; }
-.surface--p-sm { padding: 12px; }
-.surface--p-md { padding: 16px; }
-.surface--p-lg { padding: 20px; }
+.surface--p-sm { padding: var(--density-space-md); }
+.surface--p-md { padding: var(--density-space-lg); }
+.surface--p-lg { padding: calc(var(--density-space-lg) + var(--density-space-xs)); }
 
 /* ── Text：字号 / 语义色 / 截断 ── */
-.text--xs { font-size: 11px; }
-.text--sm { font-size: 12px; }
-.text--base { font-size: 13px; }
-.text--md { font-size: 14px; }
-.text--lg { font-size: 15px; }
-.text--xl { font-size: 18px; }
-.text--2xl { font-size: 22px; }
+.text--xs { font-size: var(--density-font-size-xs); }
+.text--sm { font-size: var(--density-font-size-sm); }
+.text--base { font-size: var(--density-font-size-md); }
+.text--md { font-size: var(--density-font-size-lg); }
+.text--lg { font-size: var(--density-font-size-lg); }
+.text--xl { font-size: var(--density-font-size-xl); }
+.text--2xl { font-size: var(--density-font-size-2xl); }
 .text--muted { color: var(--token-text-muted); }
 .text--faint { color: var(--token-text-faint); }
 .text--accent { color: var(--token-accent); }
@@ -69,8 +69,8 @@
 .text--error { color: var(--token-error); }
 .text--truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 
-/* ── Grid：栅格（默认 gap 12px） ── */
-.grid { display: grid; gap: 12px; }
+/* ── Grid：栅格（默认 gap = density-space-md） ── */
+.grid { display: grid; gap: var(--density-space-md); }
 .grid--cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
 .grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@@ -78,28 +78,28 @@
 .grid--cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
 .grid--cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
 .grid--gap-0 { gap: 0; }
-.grid--gap-4 { gap: 4px; }
-.grid--gap-8 { gap: 8px; }
-.grid--gap-12 { gap: 12px; }
-.grid--gap-16 { gap: 16px; }
-.grid--gap-24 { gap: 24px; }
+.grid--gap-4 { gap: var(--density-space-xs); }
+.grid--gap-8 { gap: var(--density-space-sm); }
+.grid--gap-12 { gap: var(--density-space-md); }
+.grid--gap-16 { gap: var(--density-space-lg); }
+.grid--gap-24 { gap: var(--density-space-xl); }
 
 /* ── Center：flex 居中盒 ── */
 .center { display: flex; align-items: center; justify-content: center; }
 
 /* ── Container：限宽容器（默认 960px） ── */
-.container { width: 100%; margin-inline: auto; padding-inline: 16px; max-width: 960px; }
+.container { width: 100%; margin-inline: auto; padding-inline: var(--density-space-lg); max-width: 960px; }
 .container--sm { max-width: 480px; }
 .container--md { max-width: 720px; }
 .container--lg { max-width: 960px; }
 .container--xl { max-width: 1200px; }
 .container--full { max-width: none; }
 
-/* ── Aspect：固定比例盒（padding-bottom hack，内容 absolute inset:0） ── */
-.aspect { position: relative; width: 100%; overflow: hidden; padding-bottom: 56.25%; }
-.aspect--square { padding-bottom: 100%; }
-.aspect--4-3 { padding-bottom: 75%; }
-.aspect--2-3 { padding-bottom: 150%; }
+/* ── Aspect：固定比例盒（aspect-ratio，内容 absolute inset:0 铺满） ── */
+.aspect { position: relative; width: 100%; overflow: hidden; aspect-ratio: 16 / 9; }
+.aspect--square { aspect-ratio: 1 / 1; }
+.aspect--4-3 { aspect-ratio: 4 / 3; }
+.aspect--2-3 { aspect-ratio: 2 / 3; }
 .aspect > * { position: absolute; inset: 0; }
 
 /* ── VisuallyHidden：屏幕阅读器专用文本（sr-only 等价） ── */

package/dist/components/media.css

@@ -4,6 +4,10 @@
  * 包含：avatar（头像）/ media-card（封面卡，滑出 overlay）/ rating（星级评分）/ carousel（轮播，与 behaviors/carousel 配套）
  * 规格源自 opengal data/display.tsx 的 Avatar、data/cartridge-card.tsx 的 hover overlay、
  * data/exhibit.tsx 的 Carousel 与 Rating。
+ *
+ * 例外声明（deliberate exception）：carousel-thumbs 隐藏滚动条是有意设计
+ * （缩略图条视觉纯净，滚动仍可用）。违反「组件不写滚动条样式」纪律仅此处，
+ * 先例参照 scroll-area.css 的尺寸变体。
  */
 
 /* ══════════════ avatar · 头像 ══════════════ */
@@ -23,8 +27,8 @@
   flex-shrink: 0;
   user-select: none;
 }
-.avatar--xs { width: 20px; height: 20px; font-size: 9px; }
-.avatar--sm { width: 28px; height: 28px; font-size: 10px; }
+.avatar--xs { width: 20px; height: 20px; font-size: var(--density-font-size-2xs); }
+.avatar--sm { width: 28px; height: 28px; font-size: var(--density-font-size-2xs); }
 .avatar--lg { width: 48px; height: 48px; font-size: var(--density-font-size-md); }
 .avatar--xl { width: 80px; height: 80px; font-size: var(--density-font-size-lg); }
 .avatar img {
@@ -68,7 +72,7 @@
 /* 渐变底头像 */
 .avatar--gradient {
   background: linear-gradient(135deg, var(--token-accent), var(--token-accent-deep, var(--token-accent)));
-  color: var(--token-on-accent, #fff);
+  color: var(--token-on-accent);
 }
 
 /* 方形头像 */
@@ -86,7 +90,7 @@
   justify-content: center;
   width: 28px;
   height: 28px;
-  font-size: 10px;
+  font-size: var(--density-font-size-2xs);
   font-weight: 600;
   color: var(--token-text-muted);
   background: var(--token-fill-2);
@@ -108,7 +112,7 @@
 .media-card:hover {
   transform: translateY(-6px);
   box-shadow:
-    0 8px 32px color-mix(in srgb, var(--token-text) 18%, transparent),
+    var(--token-shadow-overlay),
     0 0 20px var(--token-accent-glow);
 }
 .media-card-cover {
@@ -136,7 +140,7 @@
 }
 .media-card:hover .media-card-overlay {
   transform: translateY(0);
-  transition-delay: 80ms;
+  transition-delay: var(--media-overlay-delay, 80ms);
 }
 .media-card-overlay-title {
   font-size: var(--density-font-size-md);
@@ -341,7 +345,7 @@
   outline: none;
   box-shadow: var(--icen-ring);
 }
-.carousel-dot.active,
+.carousel-dot.is-active,
 .carousel-dot[aria-current='true'] {
   width: 20px;
   background: var(--token-accent);
@@ -357,7 +361,7 @@
   transition: width var(--icen-tx-slow);
 }
 
-/* 缩略图导航条 */
+/* 缩略图导航条（deliberate exception：隐藏滚动条是设计意图，见文件头注释） */
 .carousel-thumbs {
   display: flex;
   gap: var(--density-space-xs);

package/dist/components/menu.css

@@ -41,7 +41,7 @@
   border: 1px solid var(--token-outline);
   box-shadow: var(--token-shadow-overlay);
   border-radius: var(--radius-lg);
-  animation: icen-menu-in var(--icen-tx-fast);
+  animation: icen-menu-in var(--menu-in-duration, var(--icen-tx-fast));
 }
 .menu[data-side='top'] { animation-name: icen-menu-in-top; }
 .menu[data-side='left'] { animation-name: icen-menu-in-left; }
@@ -52,7 +52,7 @@
   min-width: 218px;
   max-width: 286px;
   z-index: var(--z-tooltip); /* 上下文菜单高于普通 popover，与 tooltip 平齐 */
-  animation-duration: 100ms;
+  --menu-in-duration: 100ms;
 }
 
 /* ── 分组标签 / 头（context-menu 的 header 项） ── */

package/dist/components/modal.css

@@ -102,7 +102,7 @@
   border: 0;
   cursor: pointer;
   color: var(--token-text-faint);
-  font-size: 16px;
+  font-size: var(--density-font-size-lg);
   line-height: 1;
   border-radius: var(--radius-sm);
   transition:

package/dist/components/nav.css

@@ -25,7 +25,12 @@
   backdrop-filter: blur(12px) saturate(1.1);
   -webkit-backdrop-filter: blur(12px) saturate(1.1);
   border-bottom: 1px solid var(--token-outline-soft);
-  transition: all var(--icen-tx-slow);
+  transition:
+    background-color var(--icen-tx-slow),
+    border-color var(--icen-tx-slow),
+    box-shadow var(--icen-tx-slow),
+    transform var(--icen-tx-slow),
+    backdrop-filter var(--icen-tx-slow);
 }
 .nav:has(.nav-bottom) {
   height: auto;
@@ -82,6 +87,7 @@
 .nav-bottom { width: 100%; padding-top: var(--density-space-xs); }
 
 .nav-btn {
+  position: relative;
   display: inline-flex;
   align-items: center;
   gap: var(--density-space-xs);
@@ -113,7 +119,7 @@
 .nav-btn.is-active,
 .nav-btn[aria-current='page'] {
   background: var(--token-accent);
-  color: var(--token-on-accent, #fff);
+  color: var(--token-on-accent);
   font-weight: 500;
   box-shadow: var(--token-shadow-elevated);
 }
@@ -183,7 +189,7 @@
 .nav-search-kbd {
   margin-left: auto;
   padding: 1px 5px;
-  font-size: 10px;
+  font-size: var(--density-font-size-2xs);
   font-family: var(--font-mono);
   color: var(--token-text-faint);
   background: var(--token-fill-2);
@@ -203,14 +209,13 @@
   border-radius: var(--radius-full);
   pointer-events: none;
 }
-.nav-btn { position: relative; }
 .nav-btn-badge--count {
   min-width: 16px;
   height: 16px;
   padding: 0 4px;
-  font-size: 9px;
+  font-size: var(--density-font-size-2xs);
   font-weight: 700;
-  color: var(--token-on-accent, #fff);
+  color: var(--token-on-accent);
   display: inline-flex;
   align-items: center;
   justify-content: center;

package/dist/components/notification.css

@@ -9,7 +9,7 @@
  *
  * 完整契约（由 behavior 渲染）：
  *   <div class="notification-container" role="region" aria-label="通知" data-position="top-right">
- *     <div class="notification [notif--success|warning|error|info]
+ *     <div class="notification [notification--success|warning|error]
  *          [.is-priority] [.is-unread] [.is-progress] [.is-clickable] [.is-paused]
  *          [.has-avatar]" role="alert|button">
  *       <span class="notification-icon">…svg 或 img.notification-avatar…</span>
@@ -78,19 +78,19 @@
   overflow: hidden; /* 倒计时进度条贴底 */
   animation: icen-notif-in var(--icen-tx-normal);
 }
-.notification.notif--success { border-left-color: var(--token-success); }
-.notification.notif--warning { border-left-color: var(--token-warning); }
-.notification.notif--error   { border-left-color: var(--token-error); }
-.notification.notif--info    { border-left-color: var(--token-info); }
+.notification.notification--success { border-left-color: var(--token-success); }
+.notification.notification--warning { border-left-color: var(--token-warning); }
+.notification.notification--error   { border-left-color: var(--token-error); }
+/* info 为基类默认配色（基类左侧边即 --token-info），无修饰类 */
 
 /* ── 优先级：高优先级强调（左侧加粗 + 更强阴影）── */
 .notification.is-priority {
   border-left-width: 4px;
   box-shadow: var(--token-shadow-overlay), 0 0 0 1px color-mix(in srgb, var(--token-accent) 24%, transparent);
 }
-.notification.is-priority.notif--success { box-shadow: var(--token-shadow-overlay), 0 0 0 1px color-mix(in srgb, var(--token-success) 28%, transparent); }
-.notification.is-priority.notif--warning { box-shadow: var(--token-shadow-overlay), 0 0 0 1px color-mix(in srgb, var(--token-warning) 28%, transparent); }
-.notification.is-priority.notif--error   { box-shadow: var(--token-shadow-overlay), 0 0 0 1px color-mix(in srgb, var(--token-error) 28%, transparent); }
+.notification.is-priority.notification--success { box-shadow: var(--token-shadow-overlay), 0 0 0 1px color-mix(in srgb, var(--token-success) 28%, transparent); }
+.notification.is-priority.notification--warning { box-shadow: var(--token-shadow-overlay), 0 0 0 1px color-mix(in srgb, var(--token-warning) 28%, transparent); }
+.notification.is-priority.notification--error   { box-shadow: var(--token-shadow-overlay), 0 0 0 1px color-mix(in srgb, var(--token-error) 28%, transparent); }
 
 /* ── 未读：标题左侧 4px 强调点 + 加粗 ── */
 .notification.is-unread .notification-title::before {
@@ -105,9 +105,9 @@
   background: var(--token-accent);
   flex-shrink: 0;
 }
-.notification.is-unread.notif--success .notification-title::before { background: var(--token-success); }
-.notification.is-unread.notif--warning .notification-title::before { background: var(--token-warning); }
-.notification.is-unread.notif--error   .notification-title::before { background: var(--token-error); }
+.notification.is-unread.notification--success .notification-title::before { background: var(--token-success); }
+.notification.is-unread.notification--warning .notification-title::before { background: var(--token-warning); }
+.notification.is-unread.notification--error   .notification-title::before { background: var(--token-error); }
 
 /* ── 可点击：整条 hover 抬升 ── */
 .notification.is-clickable {
@@ -135,10 +135,9 @@
   color: var(--token-text-faint);
 }
 .notification-icon svg { width: 16px; height: 16px; }
-.notif--success .notification-icon { color: var(--token-success); }
-.notif--warning .notification-icon { color: var(--token-warning); }
-.notif--error   .notification-icon { color: var(--token-error); }
-.notif--info    .notification-icon { color: var(--token-info); }
+.notification--success .notification-icon { color: var(--token-success); }
+.notification--warning .notification-icon { color: var(--token-warning); }
+.notification--error   .notification-icon { color: var(--token-error); }
 
 /* 头像（圆形图） */
 .notification-avatar {
@@ -155,7 +154,7 @@
 }
 
 /* 进度通知的图标默认走品牌色 */
-.notification.is-progress:not(.notif--success):not(.notif--warning):not(.notif--error) .notification-icon {
+.notification.is-progress:not(.notification--success):not(.notification--warning):not(.notification--error) .notification-icon {
   color: var(--token-accent);
 }
 
@@ -221,23 +220,23 @@
 /* primary：实底 accent */
 .notification-action--primary {
   background: var(--token-accent);
-  color: var(--token-on-accent, #fff);
+  color: var(--token-on-accent);
   border-color: var(--token-accent);
 }
 .notification-action--primary:hover {
   background: var(--token-accent-deep, var(--token-accent));
-  color: var(--token-on-accent, #fff);
+  color: var(--token-on-accent);
   border-color: var(--token-accent-deep, var(--token-accent));
 }
 /* danger：实底 error */
 .notification-action--danger {
   background: var(--token-error);
-  color: var(--token-on-accent, #fff);
+  color: var(--token-on-accent);
   border-color: var(--token-error);
 }
 .notification-action--danger:hover {
   filter: brightness(0.92);
-  color: var(--token-on-accent, #fff);
+  color: var(--token-on-accent);
   border-color: var(--token-error);
 }
 
@@ -282,9 +281,9 @@
   border-radius: var(--radius-full);
   transition: width var(--icen-tx-normal) var(--ease-out);
 }
-.notification.notif--success .notification-progress-bar { background: var(--token-success); }
-.notification.notif--warning .notification-progress-bar { background: var(--token-warning); }
-.notification.notif--error   .notification-progress-bar { background: var(--token-error); }
+.notification.notification--success .notification-progress-bar { background: var(--token-success); }
+.notification.notification--warning .notification-progress-bar { background: var(--token-warning); }
+.notification.notification--error   .notification-progress-bar { background: var(--token-error); }
 .notification-progress-label {
   flex: 0 0 auto;
   font-size: var(--density-font-size-xs);
@@ -340,9 +339,9 @@
   animation-fill-mode: forwards;
   animation-play-state: running;
 }
-.notification.notif--success .notification-countdown-fill { background: var(--token-success); opacity: 0.6; }
-.notification.notif--warning .notification-countdown-fill { background: var(--token-warning); opacity: 0.6; }
-.notification.notif--error   .notification-countdown-fill { background: var(--token-error); opacity: 0.6; }
+.notification.notification--success .notification-countdown-fill { background: var(--token-success); opacity: 0.6; }
+.notification.notification--warning .notification-countdown-fill { background: var(--token-warning); opacity: 0.6; }
+.notification.notification--error   .notification-countdown-fill { background: var(--token-error); opacity: 0.6; }
 .notification.is-paused .notification-countdown-fill {
   animation-play-state: paused;
 }
@@ -357,7 +356,7 @@
 }
 
 /* ── 退场动画 ── */
-.notification.leaving {
+.notification.is-leaving {
   opacity: 0;
   transform: translateX(20px);
   transition:
@@ -381,7 +380,7 @@
 
 @media (prefers-reduced-motion: reduce) {
   .notification { animation: none; }
-  .notification.leaving { transform: none; }
+  .notification.is-leaving { transform: none; }
   .notification-countdown-fill { animation: none; transform-origin: left; }
   .notification-progress-bar { transition: none; }
 }

package/dist/components/pagination.css

@@ -10,7 +10,9 @@
  *     <button class="page-btn motion" aria-label="下一页">›</button>
  *   </nav>
  *
- * 翻页逻辑由消费方实现，这里只提供静态样式契约。
+ * 点击接线由 behaviors/controls.ts 的 initPagination() 提供（.page-btn 激活位移 +
+ * icen:page-change，上下页按钮按 aria-label / data-dir 推断方向）；总页数与省略号
+ * 折叠策略由消费方维护，这里只提供样式契约。
  */
 
 .pagination {
@@ -48,7 +50,7 @@
 .page-btn.is-active,
 .page-btn[aria-current='page'] {
   background: var(--token-accent);
-  color: var(--token-on-accent, #fff);
+  color: var(--token-on-accent);
   font-weight: 500;
   box-shadow: var(--token-shadow-elevated);
 }

package/dist/components/pagination.mjs

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

package/dist/components/panel.css

@@ -2,8 +2,8 @@
  * @icen.ai/ui — Component: panel（白卡片容器 + 标题栏 + 可选 footer）
  *
  * 完整契约：
- *   <div class="panel-block [panel-block--flush] [panel-block--accent]
- *        [panel-block--collapsible] [.is-collapsed]">
+ *   <div class="panel [panel--flush] [panel--accent]
+ *        [panel--collapsible] [.is-collapsed]">
  *     <div class="panel-title">
  *       <div class="panel-title-text">
  *         <span>标题</span>
@@ -24,10 +24,10 @@
  * --collapsible：标题栏出现展开/折叠钮（behavior 可选，也可靠纯 CSS details/summary）。
  * --accent：强调色标题边。
  * .panel-subtitle：标题下方的副标题/描述文字。
- * .panel-block.is-collapsed：折叠态——隐藏 body + foot。
+ * .panel.is-collapsed：折叠态——隐藏 body + foot。
  */
 
-.panel-block {
+.panel {
   background: var(--token-surface);
   border: 1px solid var(--token-line-soft);
   border-radius: var(--radius-lg);
@@ -63,7 +63,7 @@
   white-space: nowrap;
 }
 .panel-subtitle {
-  font-size: 11px;
+  font-size: var(--density-font-size-xs);
   font-weight: 400;
   letter-spacing: 0;
   text-transform: none;
@@ -107,19 +107,19 @@
   height: 14px;
   transition: transform var(--icen-tx-fast);
 }
-.panel-block.is-collapsed .panel-toggle-icon {
+.panel.is-collapsed .panel-toggle-icon {
   transform: rotate(-90deg);
 }
 
 /* ── 折叠态：隐藏 body + foot，去掉标题栏底边 ── */
-.panel-block.is-collapsed .panel-body,
-.panel-block.is-collapsed .panel-foot {
+.panel.is-collapsed .panel-body,
+.panel.is-collapsed .panel-foot {
   display: none;
 }
-.panel-block.is-collapsed .panel-title {
+.panel.is-collapsed .panel-title {
   border-bottom-color: transparent;
 }
-.panel-block--collapsible .panel-body {
+.panel--collapsible .panel-body {
   animation: panel-expand var(--icen-tx-normal) var(--ease-out);
 }
 @keyframes panel-expand {
@@ -133,7 +133,7 @@
   font-size: var(--density-font-size-md);
   line-height: 1.6;
 }
-.panel-block--flush .panel-body { padding: 0; }
+.panel--flush .panel-body { padding: 0; }
 
 .panel-foot {
   display: flex;
@@ -146,24 +146,24 @@
 }
 
 /* ── 强调变体 ── */
-.panel-block--accent { border-color: color-mix(in srgb, var(--token-accent) 30%, transparent); }
-.panel-block--accent .panel-title {
+.panel--accent { border-color: color-mix(in srgb, var(--token-accent) 30%, transparent); }
+.panel--accent .panel-title {
   color: var(--token-accent);
   background: var(--token-accent-subtle);
 }
 
 /* ── 平面变体（无阴影，嵌套时用） ── */
-.panel-block--flat {
+.panel--flat {
   box-shadow: none;
   background: var(--token-bg-soft);
 }
 
 /* ── 可折叠模式：标题栏可点（纯 CSS 方案用 details/summary） ── */
-.panel-block--collapsible .panel-title {
+.panel--collapsible .panel-title {
   cursor: pointer;
 }
 
 @media (prefers-reduced-motion: reduce) {
   .panel-toggle-icon { transition: none; }
-  .panel-block--collapsible .panel-body { animation: none; }
+  .panel--collapsible .panel-body { animation: none; }
 }

package/dist/components/pill.css

@@ -2,7 +2,7 @@
  * @icen.ai/ui — Component: pill（状态徽章 / tag）
  *
  * 完整契约：
- *   <span class="pill [ok|warn|bad|accent|info] [.pill--dot|pill--outline|pill--sm]">文本</span>
+ *   <span class="pill [pill--success|pill--warning|pill--error|pill--info|pill--accent] [.pill--dot|pill--outline|pill--sm]">文本</span>
  *
  * 语义色纪律：仅绿/黄/红/信息 + 品牌 accent。
  * --dot：左侧加状态色圆点；--outline：透明底、纯描边；--sm：紧凑尺寸。
@@ -24,27 +24,27 @@
   vertical-align: middle;
 }
 
-.pill.ok {
+.pill--success {
   color: var(--token-success);
   border-color: color-mix(in srgb, var(--token-success) 35%, transparent);
   background: color-mix(in srgb, var(--token-success) 9%, transparent);
 }
-.pill.warn {
+.pill--warning {
   color: var(--token-warning);
   border-color: color-mix(in srgb, var(--token-warning) 35%, transparent);
   background: color-mix(in srgb, var(--token-warning) 9%, transparent);
 }
-.pill.bad {
+.pill--error {
   color: var(--token-error);
   border-color: color-mix(in srgb, var(--token-error) 35%, transparent);
   background: color-mix(in srgb, var(--token-error) 9%, transparent);
 }
-.pill.accent {
+.pill--accent {
   color: var(--token-accent-deep, var(--token-accent));
   border-color: color-mix(in srgb, var(--token-accent) 40%, transparent);
   background: color-mix(in srgb, var(--token-accent) 9%, transparent);
 }
-.pill.info {
+.pill--info {
   color: var(--token-info);
   border-color: color-mix(in srgb, var(--token-info) 35%, transparent);
   background: color-mix(in srgb, var(--token-info) 9%, transparent);
@@ -69,7 +69,7 @@
 /* 尺寸变体 */
 .pill--sm {
   padding: 1px var(--density-space-xs);
-  font-size: 10px;
+  font-size: var(--density-font-size-2xs);
 }
 .pill--lg {
   padding: 4px calc(var(--density-space-sm) + 2px);
@@ -79,13 +79,13 @@
 /* 实色变体：accent 实底（用于 count、活跃状态等强调场景） */
 .pill--solid {
   background: var(--token-accent);
-  color: var(--token-on-accent, #fff);
+  color: var(--token-on-accent);
   border-color: var(--token-accent);
 }
-.pill--solid.ok   { background: var(--token-success); border-color: var(--token-success); color: var(--token-on-accent, #fff); }
-.pill--solid.warn { background: var(--token-warning); border-color: var(--token-warning); color: var(--token-on-accent, #fff); }
-.pill--solid.bad  { background: var(--token-error);   border-color: var(--token-error);   color: var(--token-on-accent, #fff); }
-.pill--solid.info { background: var(--token-info);    border-color: var(--token-info);    color: var(--token-on-accent, #fff); }
+.pill--solid.pill--success { background: var(--token-success); border-color: var(--token-success); }
+.pill--solid.pill--warning { background: var(--token-warning); border-color: var(--token-warning); }
+.pill--solid.pill--error   { background: var(--token-error);   border-color: var(--token-error); }
+.pill--solid.pill--info    { background: var(--token-info);    border-color: var(--token-info); }
 
 /* ── 增强 ── */
 
@@ -126,7 +126,7 @@
   border-radius: var(--radius-full);
   background: currentColor;
   margin-right: 2px;
-  animation: pill-pulse 1.5s ease-in-out infinite;
+  animation: pill-pulse var(--pill-pulse-duration, 1.5s) ease-in-out infinite;
 }
 @keyframes pill-pulse {
   0%, 100% { opacity: 1; transform: scale(1); }
@@ -139,7 +139,7 @@
   height: 18px;
   padding: 0 5px;
   justify-content: center;
-  font-size: 10px;
+  font-size: var(--density-font-size-2xs);
   font-weight: 700;
   font-variant-numeric: tabular-nums;
   line-height: 1;
@@ -148,7 +148,7 @@
 /* 渐变变体 */
 .pill--gradient {
   background: linear-gradient(135deg, var(--token-accent), var(--token-accent-deep, var(--token-accent)));
-  color: var(--token-on-accent, #fff);
+  color: var(--token-on-accent);
   border-color: transparent;
 }
 

package/dist/components/rating.mjs

@@ -1,2 +1,3 @@
 // @icen.ai/ui — kit: rating（CSS + behavior 一行入口；构建产物，勿手改）
 import './media.css';
+export { initRating } from '../behaviors/controls.mjs';