@icen.ai/ui 0.8.1 → 0.10.0

package/dist/components/pagination.css

@@ -1,36 +1,37 @@
+@layer icen.components {
 /*
  * @icen.ai/ui — Component: pagination（分页）
  *
  * 完整契约：
- *   <nav class="pagination [pagination--sm]" aria-label="分页">
- *     <button class="page-btn motion [.is-disabled]" aria-label="上一页" aria-disabled="true">‹</button>
- *     <button class="page-btn motion [.is-active]" aria-current="page">1</button>
- *     <span class="page-ellipsis" aria-hidden="true">…</span>
- *     <button class="page-btn motion">5</button>
- *     <button class="page-btn motion" aria-label="下一页">›</button>
- *   </nav>
+ *   <icen-nav class="icen-pagination [icen-pagination--sm]" aria-label="分页">
+ *     <button class="icen-page-btn icen-motion [.is-disabled]" aria-label="上一页" aria-disabled="true">‹</button>
+ *     <button class="icen-page-btn icen-motion [.is-active]" aria-current="page">1</button>
+ *     <span class="icen-page-ellipsis" aria-hidden="true">…</span>
+ *     <button class="icen-page-btn icen-motion">5</button>
+ *     <button class="icen-page-btn icen-motion" aria-label="下一页">›</button>
+ *   </icen-nav>
  *
- * 点击接线由 behaviors/controls.ts 的 initPagination() 提供（.page-btn 激活位移 +
- * icen:page-change，上下页按钮按 aria-label / data-dir 推断方向）；总页数与省略号
+ * 点击接线由 behaviors/controls.ts 的 initPagination() 提供（.icen-page-btn 激活位移 +
+ * icen:page-change，上下页按钮按 aria-label / data-icen-dir 推断方向）；总页数与省略号
  * 折叠策略由消费方维护，这里只提供样式契约。
  */
 
-.pagination {
+.icen-pagination {
   display: flex;
   align-items: center;
-  gap: var(--density-space-xs);
+  gap: var(--icen-density-space-xs);
 }
 
-.page-btn {
+.icen-page-btn {
   min-width: 28px;
   height: 28px;
-  padding: 0 var(--density-space-xs);
-  border-radius: var(--radius-sm);
-  font-size: var(--density-font-size-sm);
+  padding: 0 var(--icen-density-space-xs);
+  border-radius: var(--icen-radius-sm);
+  font-size: var(--icen-density-font-size-sm);
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  color: var(--token-text-muted);
+  color: var(--icen-token-text-muted);
   background: none;
   border: 0;
   cursor: pointer;
@@ -39,82 +40,84 @@
     background-color var(--icen-tx-fast),
     color var(--icen-tx-fast);
 }
-.page-btn:not(.is-active):hover {
-  background: var(--token-control-hover);
-  color: var(--token-text);
+.icen-page-btn:not(.is-active):hover {
+  background: var(--icen-token-control-hover);
+  color: var(--icen-token-text);
 }
-.page-btn:focus-visible {
+.icen-page-btn:focus-visible {
   outline: none;
   box-shadow: var(--icen-ring);
 }
-.page-btn.is-active,
-.page-btn[aria-current='page'] {
-  background: var(--token-accent);
-  color: var(--token-on-accent);
+.icen-page-btn.is-active,
+.icen-page-btn[aria-current='page'] {
+  background: var(--icen-token-accent-strong);
+  color: var(--icen-token-on-accent);
   font-weight: 500;
-  box-shadow: var(--token-shadow-elevated);
+  box-shadow: var(--icen-token-shadow-elevated);
 }
-.page-btn.is-disabled,
-.page-btn:disabled,
-.page-btn[aria-disabled='true'] {
+.icen-page-btn.is-disabled,
+.icen-page-btn:disabled,
+.icen-page-btn[aria-disabled='true'] {
   opacity: var(--icen-disabled-opacity);
   pointer-events: none;
 }
 
-.page-ellipsis {
+.icen-page-ellipsis {
   min-width: 28px;
   height: 28px;
-  font-size: var(--density-font-size-sm);
+  font-size: var(--icen-density-font-size-sm);
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  color: var(--token-text-faint);
+  color: var(--icen-token-text-faint);
   user-select: none;
 }
 
 /* 尺寸变体 */
-.pagination--sm .page-btn,
-.pagination--sm .page-ellipsis {
+.icen-pagination--sm .icen-page-btn,
+.icen-pagination--sm .icen-page-ellipsis {
   min-width: 22px;
   height: 22px;
-  font-size: var(--density-font-size-xs);
+  font-size: var(--icen-density-font-size-xs);
 }
 
 /* 带总数/跳页输入的复合体（behavior 可选渲染） */
-.pagination-info {
-  font-size: var(--density-font-size-sm);
-  color: var(--token-text-faint);
+.icen-pagination-info {
+  font-size: var(--icen-density-font-size-sm);
+  color: var(--icen-token-text-faint);
   font-variant-numeric: tabular-nums;
-  margin-left: var(--density-space-sm);
+  margin-inline-start: var(--icen-density-space-sm);
 }
-.pagination-jump {
+.icen-pagination-jump {
   display: inline-flex;
   align-items: center;
-  gap: var(--density-space-xs);
-  margin-left: var(--density-space-sm);
-  font-size: var(--density-font-size-sm);
-  color: var(--token-text-muted);
+  gap: var(--icen-density-space-xs);
+  margin-inline-start: var(--icen-density-space-sm);
+  font-size: var(--icen-density-font-size-sm);
+  color: var(--icen-token-text-muted);
 }
-.pagination-jump-input {
+.icen-pagination-jump-input {
   width: 56px;
   height: 28px;
-  padding: 0 var(--density-space-xs);
+  padding: 0 var(--icen-density-space-xs);
   text-align: center;
-  background: var(--token-control);
-  border: 1px solid var(--token-outline-soft);
-  border-radius: var(--radius-sm);
-  color: var(--token-text);
+  background: var(--icen-token-control);
+  border: 1px solid var(--icen-token-outline-soft);
+  border-radius: var(--icen-radius-sm);
+  color: var(--icen-token-text);
   font: inherit;
-  font-size: var(--density-font-size-sm);
+  font-size: var(--icen-density-font-size-sm);
   transition: border-color var(--icen-tx-fast), box-shadow var(--icen-tx-fast);
 }
-.pagination-jump-input:hover { border-color: var(--icen-hover-border); }
-.pagination-jump-input:focus-visible {
+.icen-pagination-jump-input:hover { border-color: var(--icen-hover-border); }
+.icen-pagination-jump-input:focus-visible {
   outline: none;
   border-color: var(--icen-control-focus-border);
   box-shadow: var(--icen-control-focus-shadow);
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .page-btn { transition: none; }
+  .icen-page-btn { transition: none; }
+}
+
 }

package/dist/components/panel.css

@@ -1,86 +1,87 @@
+@layer icen.components {
 /*
  * @icen.ai/ui — Component: panel（白卡片容器 + 标题栏 + 可选 footer）
  *
  * 完整契约：
- *   <div class="panel [panel--flush] [panel--accent]
+ *   <div class="icen-panel [icen-panel--flush] [icen-panel--accent]
  *        [panel--collapsible] [.is-collapsed]">
- *     <div class="panel-title">
- *       <div class="panel-title-text">
+ *     <div class="icen-panel-title">
+ *       <div class="icen-panel-title-text">
  *         <span>标题</span>
- *         <span class="panel-subtitle">副标题描述</span>     ← 可选
+ *         <span class="icen-panel-subtitle">副标题描述</span>     ← 可选
  *       </div>
- *       <div class="panel-title-actions">
- *         <button class="btn btn-sm">…</button>
- *         <button class="panel-toggle" aria-expanded="true">  ← collapsible 模式
- *           <svg class="panel-toggle-icon">…chevron…</svg>
+ *       <div class="icen-panel-title-actions">
+ *         <button class="icen-btn icen-btn-sm">…</button>
+ *         <button class="icen-panel-toggle" aria-expanded="true">  ← collapsible 模式
+ *           <svg class="icen-panel-toggle-icon">…chevron…</svg>
  *         </button>
  *       </div>
  *     </div>
- *     <div class="panel-body">…</div>
- *     <div class="panel-foot">…可选底栏</div>
+ *     <div class="icen-panel-body">…</div>
+ *     <div class="icen-panel-foot">…可选底栏</div>
  *   </div>
  *
  * --flush：body 不留 padding，使用方自行处理内层布局。
  * --collapsible：标题栏出现展开/折叠钮（behavior 可选，也可靠纯 CSS details/summary）。
  * --accent：强调色标题边。
- * .panel-subtitle：标题下方的副标题/描述文字。
- * .panel.is-collapsed：折叠态——隐藏 body + foot。
+ * .icen-panel-subtitle：标题下方的副标题/描述文字。
+ * .icen-panel.is-collapsed：折叠态——隐藏 body + foot。
  */
 
-.panel {
-  background: var(--token-surface);
-  border: 1px solid var(--token-line-soft);
-  border-radius: var(--radius-lg);
-  box-shadow: var(--token-shadow-elevated);
-  margin-bottom: var(--density-space-lg);
+.icen-panel {
+  background: var(--icen-token-surface);
+  border: 1px solid var(--icen-token-line-soft);
+  border-radius: var(--icen-radius-lg);
+  box-shadow: var(--icen-token-shadow-elevated);
+  margin-bottom: var(--icen-density-space-lg);
   overflow: hidden;
 }
 
 /* ── 标题栏 ── */
-.panel-title {
+.icen-panel-title {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: var(--density-space-sm);
-  padding: var(--density-space-sm) var(--density-space-md);
-  border-bottom: 1px solid var(--token-line-soft);
-  font-size: var(--density-font-size-xs);
+  gap: var(--icen-density-space-sm);
+  padding: var(--icen-density-space-sm) var(--icen-density-space-md);
+  border-bottom: 1px solid var(--icen-token-line-soft);
+  font-size: var(--icen-density-font-size-xs);
   letter-spacing: 0.08em;
-  color: var(--token-text-muted);
+  color: var(--icen-token-text-muted);
   text-transform: uppercase;
   font-weight: 600;
 }
-.panel-title-text {
+.icen-panel-title-text {
   flex: 1;
   min-width: 0;
   display: flex;
   flex-direction: column;
   gap: 1px;
 }
-.panel-title-text > span:first-child {
+.icen-panel-title-text > span:first-child {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.panel-subtitle {
-  font-size: var(--density-font-size-xs);
+.icen-panel-subtitle {
+  font-size: var(--icen-density-font-size-xs);
   font-weight: 400;
   letter-spacing: 0;
   text-transform: none;
-  color: var(--token-text-faint);
+  color: var(--icen-token-text-faint);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.panel-title-actions {
+.icen-panel-title-actions {
   display: flex;
   align-items: center;
-  gap: var(--density-space-xs);
+  gap: var(--icen-density-space-xs);
   flex-shrink: 0;
 }
 
 /* ── 可折叠钮 ── */
-.panel-toggle {
+.icen-panel-toggle {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -89,38 +90,38 @@
   padding: 0;
   border: none;
   background: transparent;
-  color: var(--token-text-faint);
+  color: var(--icen-token-text-faint);
   cursor: pointer;
-  border-radius: var(--radius-xs);
+  border-radius: var(--icen-radius-xs);
   transition: color var(--icen-tx-fast), background-color var(--icen-tx-fast);
 }
-.panel-toggle:hover {
-  color: var(--token-text);
-  background: var(--token-fill-1);
+.icen-panel-toggle:hover {
+  color: var(--icen-token-text);
+  background: var(--icen-token-fill-1);
 }
-.panel-toggle:focus-visible {
+.icen-panel-toggle:focus-visible {
   outline: none;
   box-shadow: var(--icen-ring);
 }
-.panel-toggle-icon {
+.icen-panel-toggle-icon {
   width: 14px;
   height: 14px;
   transition: transform var(--icen-tx-fast);
 }
-.panel.is-collapsed .panel-toggle-icon {
+.icen-panel.is-collapsed .icen-panel-toggle-icon {
   transform: rotate(-90deg);
 }
 
 /* ── 折叠态：隐藏 body + foot，去掉标题栏底边 ── */
-.panel.is-collapsed .panel-body,
-.panel.is-collapsed .panel-foot {
+.icen-panel.is-collapsed .icen-panel-body,
+.icen-panel.is-collapsed .icen-panel-foot {
   display: none;
 }
-.panel.is-collapsed .panel-title {
+.icen-panel.is-collapsed .icen-panel-title {
   border-bottom-color: transparent;
 }
-.panel--collapsible .panel-body {
-  animation: panel-expand var(--icen-tx-normal) var(--ease-out);
+.icen-panel--collapsible .icen-panel-body {
+  animation: panel-expand var(--icen-tx-normal) var(--icen-ease-out);
 }
 @keyframes panel-expand {
   from { opacity: 0; transform: translateY(-8px); }
@@ -128,42 +129,44 @@
 }
 
 /* ── body / foot ── */
-.panel-body {
-  padding: var(--density-space-md);
-  font-size: var(--density-font-size-md);
+.icen-panel-body {
+  padding: var(--icen-density-space-md);
+  font-size: var(--icen-density-font-size-md);
   line-height: 1.6;
 }
-.panel--flush .panel-body { padding: 0; }
+.icen-panel--flush .icen-panel-body { padding: 0; }
 
-.panel-foot {
+.icen-panel-foot {
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  gap: var(--density-space-sm);
-  padding: var(--density-space-sm) var(--density-space-md);
-  border-top: 1px solid var(--token-line-soft);
-  background: color-mix(in srgb, var(--token-bg-soft) 50%, transparent);
+  gap: var(--icen-density-space-sm);
+  padding: var(--icen-density-space-sm) var(--icen-density-space-md);
+  border-top: 1px solid var(--icen-token-line-soft);
+  background: color-mix(in srgb, var(--icen-token-bg-soft) 50%, transparent);
 }
 
 /* ── 强调变体 ── */
-.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);
+.icen-panel--accent { border-color: color-mix(in srgb, var(--icen-token-accent) 30%, transparent); }
+.icen-panel--accent .icen-panel-title {
+  color: var(--icen-token-accent);
+  background: var(--icen-token-accent-subtle);
 }
 
 /* ── 平面变体（无阴影，嵌套时用） ── */
-.panel--flat {
+.icen-panel--flat {
   box-shadow: none;
-  background: var(--token-bg-soft);
+  background: var(--icen-token-bg-soft);
 }
 
 /* ── 可折叠模式：标题栏可点（纯 CSS 方案用 details/summary） ── */
-.panel--collapsible .panel-title {
+.icen-panel--collapsible .icen-panel-title {
   cursor: pointer;
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .panel-toggle-icon { transition: none; }
-  .panel--collapsible .panel-body { animation: none; }
+  .icen-panel-toggle-icon { transition: none; }
+  .icen-panel--collapsible .icen-panel-body { animation: none; }
+}
+
 }

package/dist/components/panel.mjs

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

package/dist/components/pill.css

@@ -1,131 +1,132 @@
+@layer icen.components {
 /*
  * @icen.ai/ui — Component: pill（状态徽章 / tag）
  *
  * 完整契约：
- *   <span class="pill [pill--success|pill--warning|pill--error|pill--info|pill--accent] [.pill--dot|pill--outline|pill--sm]">文本</span>
+ *   <span class="icen-pill [icen-pill--success|icen-pill--warning|icen-pill--error|icen-pill--info|icen-pill--accent] [.icen-pill--dot|icen-pill--outline|icen-pill--sm]">文本</span>
  *
  * 语义色纪律：仅绿/黄/红/信息 + 品牌 accent。
- * --dot：左侧加状态色圆点；--outline：透明底、纯描边；--sm：紧凑尺寸。
+ * --dot：起始缘加状态色圆点（RTL 镜像到右侧）；--outline：透明底、纯描边；--sm：紧凑尺寸。
  */
 
-.pill {
+.icen-pill {
   display: inline-flex;
   align-items: center;
   gap: 4px;
-  padding: 2px var(--density-space-sm);
-  border-radius: var(--radius-full);
-  font-size: var(--density-font-size-xs);
+  padding: 2px var(--icen-density-space-sm);
+  border-radius: var(--icen-radius-full);
+  font-size: var(--icen-density-font-size-xs);
   letter-spacing: 0.02em;
   font-weight: 500;
-  background: var(--token-surface-strong);
-  color: var(--token-text-muted);
-  border: 1px solid var(--token-line-soft);
+  background: var(--icen-token-surface-strong);
+  color: var(--icen-token-text-muted);
+  border: 1px solid var(--icen-token-line-soft);
   white-space: nowrap;
   vertical-align: middle;
 }
 
-.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--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--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 {
-  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 {
-  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);
+.icen-pill--success {
+  color: var(--icen-token-success);
+  border-color: color-mix(in srgb, var(--icen-token-success) 35%, transparent);
+  background: color-mix(in srgb, var(--icen-token-success) 9%, transparent);
+}
+.icen-pill--warning {
+  color: var(--icen-token-warning);
+  border-color: color-mix(in srgb, var(--icen-token-warning) 35%, transparent);
+  background: color-mix(in srgb, var(--icen-token-warning) 9%, transparent);
+}
+.icen-pill--error {
+  color: var(--icen-token-error);
+  border-color: color-mix(in srgb, var(--icen-token-error) 35%, transparent);
+  background: color-mix(in srgb, var(--icen-token-error) 9%, transparent);
+}
+.icen-pill--accent {
+  color: var(--icen-token-accent-deep, var(--icen-token-accent));
+  border-color: color-mix(in srgb, var(--icen-token-accent) 40%, transparent);
+  background: color-mix(in srgb, var(--icen-token-accent) 9%, transparent);
+}
+.icen-pill--info {
+  color: var(--icen-token-info);
+  border-color: color-mix(in srgb, var(--icen-token-info) 35%, transparent);
+  background: color-mix(in srgb, var(--icen-token-info) 9%, transparent);
 }
 
-/* 点状变体：左侧状态色圆点 */
-.pill--dot::before {
+/* 点状变体：起始缘状态色圆点（RTL 镜像到右侧） */
+.icen-pill--dot::before {
   content: '';
   display: inline-block;
   width: 6px;
   height: 6px;
-  border-radius: var(--radius-full);
+  border-radius: var(--icen-radius-full);
   background: currentColor;
   flex-shrink: 0;
 }
 
 /* 描边变体：透明底，仅描边 */
-.pill--outline {
-  background: transparent !important;
+.icen-pill--outline {
+  background: transparent !important; /* guard:allow-important 状态/守卫覆盖需压制变体优先级 */
 }
 
 /* 尺寸变体 */
-.pill--sm {
-  padding: 1px var(--density-space-xs);
-  font-size: var(--density-font-size-2xs);
+.icen-pill--sm {
+  padding: 1px var(--icen-density-space-xs);
+  font-size: var(--icen-density-font-size-2xs);
 }
-.pill--lg {
-  padding: 4px calc(var(--density-space-sm) + 2px);
-  font-size: var(--density-font-size-sm);
+.icen-pill--lg {
+  padding: 4px calc(var(--icen-density-space-sm) + 2px);
+  font-size: var(--icen-density-font-size-sm);
 }
 
 /* 实色变体：accent 实底（用于 count、活跃状态等强调场景） */
-.pill--solid {
-  background: var(--token-accent);
-  color: var(--token-on-accent);
-  border-color: var(--token-accent);
-}
-.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); }
+.icen-pill--solid {
+  background: var(--icen-token-accent-strong);
+  color: var(--icen-token-on-accent);
+  border-color: var(--icen-token-accent-strong);
+}
+.icen-pill--solid.icen-pill--success { background: var(--icen-token-success); border-color: var(--icen-token-success); }
+.icen-pill--solid.icen-pill--warning { background: var(--icen-token-warning); border-color: var(--icen-token-warning); }
+.icen-pill--solid.icen-pill--error   { background: var(--icen-token-error);   border-color: var(--icen-token-error); }
+.icen-pill--solid.icen-pill--info    { background: var(--icen-token-info);    border-color: var(--icen-token-info); }
 
 /* ── 增强 ── */
 
 /* 可关闭 pill */
-.pill-close {
+.icen-pill-close {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 14px;
   height: 14px;
-  margin-left: 2px;
-  margin-right: -4px;
+  margin-inline-start: 2px;
+  margin-inline-end: -4px;
   padding: 0;
   border: 0;
-  border-radius: var(--radius-full);
+  border-radius: var(--icen-radius-full);
   background: transparent;
   color: inherit;
   opacity: 0.6;
   cursor: pointer;
   transition: opacity var(--icen-tx-fast), background-color var(--icen-tx-fast);
 }
-.pill-close:hover { opacity: 1; background: color-mix(in srgb, currentColor 15%, transparent); }
-.pill-close svg { width: 9px; height: 9px; }
+.icen-pill-close:hover { opacity: 1; background: color-mix(in srgb, currentColor 15%, transparent); }
+.icen-pill-close svg { width: 9px; height: 9px; }
 
 /* 图标 pill */
-.pill-icon {
+.icen-pill-icon {
   display: inline-flex;
   align-items: center;
 }
-.pill-icon svg { width: 10px; height: 10px; }
+.icen-pill-icon svg { width: 10px; height: 10px; }
 
 /* 实时脉冲（用于"直播"/"实时"状态） */
-.pill--live::before {
+.icen-pill--live::before {
   content: '';
   display: inline-block;
   width: 6px;
   height: 6px;
-  border-radius: var(--radius-full);
+  border-radius: var(--icen-radius-full);
   background: currentColor;
-  margin-right: 2px;
+  margin-inline-end: 2px;
   animation: pill-pulse var(--pill-pulse-duration, 1.5s) ease-in-out infinite;
 }
 @keyframes pill-pulse {
@@ -134,25 +135,34 @@
 }
 
 /* 纯数字计数（不带文字） */
-.pill--count {
+.icen-pill--count {
   min-width: 18px;
   height: 18px;
   padding: 0 5px;
   justify-content: center;
-  font-size: var(--density-font-size-2xs);
+  font-size: var(--icen-density-font-size-2xs);
   font-weight: 700;
   font-variant-numeric: tabular-nums;
   line-height: 1;
 }
 
 /* 渐变变体 */
-.pill--gradient {
-  background: linear-gradient(135deg, var(--token-accent), var(--token-accent-deep, var(--token-accent)));
-  color: var(--token-on-accent);
+.icen-pill--gradient {
+  background: linear-gradient(135deg, var(--icen-token-accent), var(--icen-token-accent-deep, var(--icen-token-accent)));
+  color: var(--icen-token-on-accent);
   border-color: transparent;
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .pill--live::before { animation: none; }
-  .pill-close { transition: none; }
+  .icen-pill--live::before { animation: none; }
+  .icen-pill-close { transition: none; }
+}
+
+/* Stable secondary-action slot: reveal is optical rather than a width change. */
+@media (hover: hover) and (pointer: fine) {
+  .icen-pill-close { opacity: 0; }
+  .icen-pill:is(:hover,:focus-within) .icen-pill-close { opacity: 1; }
+}
+@media (pointer: coarse) { .icen-pill-close { min-inline-size: 28px; min-block-size: 28px; opacity: 1; } }
+
 }