@icen.ai/ui 0.9.0 → 0.10.0

package/dist/components/tag.css

@@ -1,3 +1,4 @@
+@layer icen.components {
 /*
  * @icen.ai/ui — Component: tag（展示标签 / Chip）
  *
@@ -7,29 +8,29 @@
  *            常用于：分类、筛选条件、属性标记、邮件标签、文件 tag
  *
  * 完整契约：
- *   <span class="tag [.tag--sm|.tag--lg] [.is-selected] [.is-disabled]
- *        [.tag--accent|.tag--success|.tag--warning|.tag--error|.tag--info]">
- *     <span class="tag-icon">…svg…</span>           <!-- 可选左图标 -->
- *     <span class="tag-label">标签文本</span>
- *     <button class="tag-close" type="button" aria-label="移除">×</button>  <!-- 可选 -->
+ *   <span class="icen-tag [.icen-tag--sm|.icen-tag--lg] [.is-selected] [.is-disabled]
+ *        [.icen-tag--accent|.icen-tag--success|.icen-tag--warning|.icen-tag--error|.icen-tag--info]">
+ *     <span class="icen-tag-icon">…svg…</span>           <!-- 可选左图标 -->
+ *     <span class="icen-tag-label">标签文本</span>
+ *     <button class="icen-tag-close" type="button" aria-label="移除">×</button>  <!-- 可选 -->
  *   </span>
  *
  *   选中态 .is-selected 由消费方驱动（用于筛选条件等）；
- *   .tag-close 点击后消费方决定是否从 DOM 移除本节点（本组件不自动删除）。
+ *   .icen-tag-close 点击后消费方决定是否从 DOM 移除本节点（本组件不自动删除）。
  */
 
-.tag {
+.icen-tag {
   display: inline-flex;
   align-items: center;
   gap: 4px;
-  padding: 0 var(--density-space-sm);
+  padding: 0 var(--icen-density-space-sm);
   height: 24px;
-  background: var(--token-fill-1);
-  color: var(--token-text-muted);
-  border: 1px solid var(--token-line-soft);
-  border-radius: var(--radius-sm);
+  background: var(--icen-token-fill-1);
+  color: var(--icen-token-text-muted);
+  border: 1px solid var(--icen-token-line-soft);
+  border-radius: var(--icen-radius-sm);
   font: inherit;
-  font-size: var(--density-font-size-sm);
+  font-size: var(--icen-density-font-size-sm);
   letter-spacing: 0.01em;
   white-space: nowrap;
   vertical-align: middle;
@@ -38,54 +39,54 @@
     border-color var(--icen-tx-fast),
     color var(--icen-tx-fast);
 }
-.tag:hover {
-  background: var(--token-fill-2);
-  color: var(--token-text);
+.icen-tag:hover {
+  background: var(--icen-token-fill-2);
+  color: var(--icen-token-text);
 }
 
 /* 尺寸变体 */
-.tag--sm {
+.icen-tag--sm {
   height: 20px;
   padding: 0 6px;
-  font-size: var(--density-font-size-xs);
+  font-size: var(--icen-density-font-size-xs);
   gap: 3px;
 }
-.tag--lg {
+.icen-tag--lg {
   height: 28px;
   padding: 0 10px;
-  font-size: var(--density-font-size-md);
+  font-size: var(--icen-density-font-size-md);
   gap: 6px;
 }
 
 /* ── 图标 ── */
-.tag-icon {
+.icen-tag-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  color: var(--token-text-faint);
+  color: var(--icen-token-text-faint);
 }
-.tag-icon svg { width: 12px; height: 12px; }
-.tag--sm .tag-icon svg { width: 10px; height: 10px; }
-.tag--lg .tag-icon svg { width: 14px; height: 14px; }
-.tag-label {
+.icen-tag-icon svg { width: 12px; height: 12px; }
+.icen-tag--sm .icen-tag-icon svg { width: 10px; height: 10px; }
+.icen-tag--lg .icen-tag-icon svg { width: 14px; height: 14px; }
+.icen-tag-label {
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: 240px;
 }
 
 /* ── 关闭按钮（消费方点击后自行决定是否从 DOM 移除） ── */
-.tag-close {
+.icen-tag-close {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 16px;
   height: 16px;
   padding: 0;
-  margin-right: -4px;
-  margin-left: 2px;
+  margin-inline-end: -4px;
+  margin-inline-start: 2px;
   border: 0;
-  border-radius: var(--radius-xs);
+  border-radius: var(--icen-radius-xs);
   background: transparent;
   color: inherit;
   opacity: 0.6;
@@ -93,72 +94,81 @@
   -webkit-tap-highlight-color: transparent;
   transition: opacity var(--icen-tx-fast), background-color var(--icen-tx-fast);
 }
-.tag-close:hover {
+.icen-tag-close:hover {
   opacity: 1;
-  background: color-mix(in srgb, var(--token-text-faint) 22%, transparent);
+  background: color-mix(in srgb, var(--icen-token-text-faint) 22%, transparent);
 }
-.tag-close:focus-visible {
+.icen-tag-close:focus-visible {
   outline: none;
   box-shadow: var(--icen-ring);
 }
-.tag-close svg { width: 10px; height: 10px; }
-.tag--sm .tag-close { width: 14px; height: 14px; margin-right: -2px; }
-.tag--lg .tag-close { width: 18px; height: 18px; margin-right: -6px; }
+.icen-tag-close svg { width: 10px; height: 10px; }
+.icen-tag--sm .icen-tag-close { width: 14px; height: 14px; margin-inline-end: -2px; }
+.icen-tag--lg .icen-tag-close { width: 18px; height: 18px; margin-inline-end: -6px; }
 
 /* ── 选中态（用于筛选条件等）── */
-.tag.is-selected {
-  background: var(--token-accent-subtle);
-  color: var(--token-accent-deep, var(--token-accent));
-  border-color: color-mix(in srgb, var(--token-accent) 40%, transparent);
+.icen-tag.is-selected {
+  background: var(--icen-token-accent-subtle);
+  color: var(--icen-token-accent-deep, var(--icen-token-accent));
+  border-color: color-mix(in srgb, var(--icen-token-accent) 40%, transparent);
 }
-.tag.is-selected .tag-icon { color: var(--token-accent); }
+.icen-tag.is-selected .icen-tag-icon { color: var(--icen-token-accent); }
 
 /* ── 语义色变体（与 pill 对齐，但底色更淡，作分类着色用）── */
-.tag--accent {
-  background: color-mix(in srgb, var(--token-accent) 10%, transparent);
-  color: var(--token-accent-deep, var(--token-accent));
-  border-color: color-mix(in srgb, var(--token-accent) 30%, transparent);
-}
-.tag--success {
-  background: color-mix(in srgb, var(--token-success) 10%, transparent);
-  color: var(--token-success);
-  border-color: color-mix(in srgb, var(--token-success) 30%, transparent);
-}
-.tag--warning {
-  background: color-mix(in srgb, var(--token-warning) 10%, transparent);
-  color: var(--token-warning);
-  border-color: color-mix(in srgb, var(--token-warning) 30%, transparent);
-}
-.tag--error {
-  background: color-mix(in srgb, var(--token-error) 10%, transparent);
-  color: var(--token-error);
-  border-color: color-mix(in srgb, var(--token-error) 30%, transparent);
-}
-.tag--info {
-  background: color-mix(in srgb, var(--token-info) 10%, transparent);
-  color: var(--token-info);
-  border-color: color-mix(in srgb, var(--token-info) 30%, transparent);
+.icen-tag--accent {
+  background: color-mix(in srgb, var(--icen-token-accent) 10%, transparent);
+  color: var(--icen-token-accent-deep, var(--icen-token-accent));
+  border-color: color-mix(in srgb, var(--icen-token-accent) 30%, transparent);
+}
+.icen-tag--success {
+  background: color-mix(in srgb, var(--icen-token-success) 10%, transparent);
+  color: var(--icen-token-success);
+  border-color: color-mix(in srgb, var(--icen-token-success) 30%, transparent);
+}
+.icen-tag--warning {
+  background: color-mix(in srgb, var(--icen-token-warning) 10%, transparent);
+  color: var(--icen-token-warning);
+  border-color: color-mix(in srgb, var(--icen-token-warning) 30%, transparent);
+}
+.icen-tag--error {
+  background: color-mix(in srgb, var(--icen-token-error) 10%, transparent);
+  color: var(--icen-token-error);
+  border-color: color-mix(in srgb, var(--icen-token-error) 30%, transparent);
+}
+.icen-tag--info {
+  background: color-mix(in srgb, var(--icen-token-info) 10%, transparent);
+  color: var(--icen-token-info);
+  border-color: color-mix(in srgb, var(--icen-token-info) 30%, transparent);
 }
 
 /* ── 禁用态 ── */
-.tag.is-disabled,
-.tag[aria-disabled='true'] {
+.icen-tag.is-disabled,
+.icen-tag[aria-disabled='true'] {
   opacity: var(--icen-disabled-opacity);
   cursor: not-allowed;
   pointer-events: none;
 }
 
 /* ── 可点击（用于可筛选 tag） ── */
-button.tag,
-.tag[role='button'] {
+button.icen-tag,
+.icen-tag[role='button'] {
   cursor: pointer;
   -webkit-tap-highlight-color: transparent;
 }
-.tag:where(button, [role='button']):focus-visible {
+.icen-tag:where(button, [role='button']):focus-visible {
   outline: none;
   box-shadow: var(--icen-ring);
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .tag, .tag-close { transition: none; }
+  .icen-tag, .icen-tag-close { transition: none; }
+}
+
+/* Reveal only the secondary action; its fixed slot keeps the label still. */
+@media (hover: hover) and (pointer: fine) {
+  .icen-tag-close { opacity: 0; transform: scale(.88); transition: opacity var(--icen-tx-fast), transform var(--icen-tx-fast), background-color var(--icen-tx-fast); }
+  .icen-tag:is(:hover,:focus-within) .icen-tag-close { opacity: 1; transform: none; }
+}
+@media (prefers-reduced-motion: reduce) { .icen-tag-close { transition: none; transform: none; } }
+
 }

package/dist/components/theme-switcher.css

@@ -0,0 +1,105 @@
+@layer icen.components {
+/* Appearance control: .icen-theme-switcher; --xs/--sm/default/--lg sizes.
+ * data-icen-display=icon|color|color-name|name|swatch|swatch-name.
+ * data-icen-layout=inline exposes the same choices as a settings panel.
+ * All rendering is owned by theme-switcher.ts; CSS has no behavior dependency. */
+.icen-theme-switcher {
+  --switcher-height: var(--icen-density-input-height-md);
+  --switcher-font: var(--icen-density-font-size-md);
+  display: inline-flex;
+  max-inline-size: 100%;
+  vertical-align: middle;
+  font-family: var(--icen-font-body);
+  font-size: var(--switcher-font);
+  color: var(--icen-token-text);
+}
+.icen-theme-switcher--xs { --switcher-height: calc(var(--icen-density-input-height-sm) - 4px); --switcher-font: var(--icen-density-font-size-sm); }
+.icen-theme-switcher--sm { --switcher-height: var(--icen-density-input-height-sm); --switcher-font: var(--icen-density-font-size-sm); }
+.icen-theme-switcher--lg { --switcher-height: var(--icen-density-input-height-lg); }
+.icen-theme-switcher-trigger,
+.icen-theme-switcher-option {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--icen-density-space-sm);
+  border: 1px solid var(--icen-token-line-soft);
+  border-radius: var(--icen-radius-md);
+  background: var(--icen-token-surface);
+  color: var(--icen-token-text);
+  font: inherit;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color var(--icen-tx-fast), border-color var(--icen-tx-fast);
+}
+.icen-theme-switcher-trigger { min-block-size: var(--switcher-height); padding: 0 var(--icen-density-space-sm); white-space: nowrap; }
+.icen-theme-switcher-trigger:hover,
+.icen-theme-switcher-option:hover { background: var(--icen-token-surface-hover); border-color: var(--icen-token-line); }
+.icen-theme-switcher-trigger:focus-visible,
+.icen-theme-switcher-option:focus-visible { outline: 2px solid var(--icen-token-accent); outline-offset: 3px; }
+.icen-theme-switcher-trigger[aria-expanded="true"] { border-color: var(--icen-token-accent); }
+.icen-theme-switcher-sample { display: inline-flex; flex: 0 0 auto; inline-size: 40px; block-size: 20px; overflow: hidden; border: 1px solid var(--icen-token-line); border-radius: var(--icen-radius-sm); }
+.icen-theme-switcher-sample i { display: block; flex: 1; }
+.icen-theme-switcher-symbol { display: inline-flex; align-items: center; justify-content: center; inline-size: 20px; font-size: 20px; line-height: 1; }
+.icen-theme-switcher[data-icen-display="icon"] .icen-theme-switcher-trigger,
+.icen-theme-switcher[data-icen-display="color"] .icen-theme-switcher-trigger { inline-size: var(--switcher-height); padding: 0; }
+.icen-theme-switcher[data-icen-display="icon"] .icen-theme-switcher-name,
+.icen-theme-switcher[data-icen-display="color"] .icen-theme-switcher-name,
+.icen-theme-switcher[data-icen-display="swatch"] .icen-theme-switcher-name { display: none; }
+.icen-theme-switcher[data-icen-display="name"] .icen-theme-switcher-trigger > .icen-theme-switcher-sample,
+.icen-theme-switcher[data-icen-display="name"] .icen-theme-switcher-trigger > .icen-theme-switcher-symbol { display: none; }
+.icen-theme-switcher:is([data-icen-display="icon"],[data-icen-display="color"],[data-icen-display="color-name"]) .icen-theme-switcher-trigger .icen-theme-switcher-sample { inline-size: 18px; block-size: 18px; border-radius: var(--icen-radius-full); transform: rotate(-35deg); }
+.icen-theme-switcher:is([data-icen-display="icon"],[data-icen-display="color"],[data-icen-display="color-name"]) .icen-theme-switcher-trigger .icen-theme-switcher-sample i:last-child { display: none; }
+.icen-theme-switcher-panel {
+  position: fixed;
+  z-index: var(--icen-z-popover);
+  box-sizing: border-box;
+  padding: var(--icen-density-space-md);
+  overflow: auto;
+  border: 1px solid var(--icen-token-line-soft);
+  border-radius: var(--icen-radius-lg);
+  background: var(--icen-token-surface);
+  color: var(--icen-token-text);
+  box-shadow: var(--icen-token-shadow-overlay);
+  font: var(--icen-density-font-size-sm)/1.5 var(--icen-font-body);
+}
+.icen-theme-switcher-panel[hidden] { display: none; }
+.icen-theme-switcher-section + .icen-theme-switcher-section { margin-block-start: var(--icen-density-space-md); padding-block-start: var(--icen-density-space-md); border-block-start: 1px solid var(--icen-token-line-soft); }
+.icen-theme-switcher-heading { margin: 0 0 var(--icen-density-space-sm); font-size: var(--icen-density-font-size-sm); font-weight: 500; color: var(--icen-token-text-muted); }
+.icen-theme-switcher-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--icen-density-space-sm); }
+.icen-theme-switcher-option { position: relative; min-block-size: var(--icen-density-input-height-md); padding: var(--icen-density-space-sm); }
+.icen-theme-switcher-options--theme .icen-theme-switcher-option { flex-direction: column; align-items: stretch; gap: var(--icen-density-space-sm); text-align: start; }
+.icen-theme-switcher-options--theme .icen-theme-switcher-sample { inline-size: 100%; block-size: 28px; }
+.icen-theme-switcher-option[aria-pressed="true"] { border-color: var(--icen-token-accent); background: var(--icen-token-accent-subtle); }
+.icen-theme-switcher[data-icen-layout="inline"] { display: block; inline-size: 100%; container: icen-appearance / inline-size; }
+.icen-theme-switcher[data-icen-layout="inline"] > .icen-theme-switcher-panel { position: static; inline-size: 100%; box-shadow: none; background: var(--icen-token-surface); }
+/* Six built-ins form complete rows. Query the host, so sidebars and embedded
+ * settings do not inherit the viewport's column count. */
+@container icen-appearance (min-width: 420px) {
+  .icen-theme-switcher-options--theme { grid-template-columns: repeat(3,minmax(0,1fr)); }
+}
+@container icen-appearance (min-width: 840px) {
+  .icen-theme-switcher-options--theme { grid-template-columns: repeat(6,minmax(0,1fr)); }
+}
+@media (pointer: coarse) {
+  .icen-theme-switcher-trigger { min-block-size: 44px; min-inline-size: 44px; }
+  .icen-theme-switcher-option { min-block-size: 44px; }
+}
+@media (forced-colors: active) {
+  .icen-theme-switcher-option[aria-pressed="true"] { outline: 2px solid Highlight; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .icen-theme-switcher-chevron, .icen-theme-switcher-check, .icen-theme-switcher-trigger, .icen-theme-switcher-option { transition: none; }
+}
+
+/* Compact menu cards keep all three axes visible in ordinary desktop viewports. */
+.icen-theme-switcher-panel[role="dialog"] .icen-theme-switcher-section + .icen-theme-switcher-section { margin-block-start: var(--icen-density-space-sm); padding-block-start: var(--icen-density-space-sm); }
+.icen-theme-switcher-panel[role="dialog"] .icen-theme-switcher-options--theme .icen-theme-switcher-option { gap: var(--icen-density-space-xs); }
+.icen-theme-switcher-panel[role="dialog"] .icen-theme-switcher-options--theme .icen-theme-switcher-sample { block-size: 24px; }
+
+.icen-theme-switcher-panel[role="dialog"] .icen-theme-switcher-section:has(.icen-theme-switcher-options--mode) .icen-theme-switcher-heading { display: none; }
+
+/* Compatibility with previously authored markup; new renderers omit these slots. */
+.icen-theme-switcher-chevron, .icen-theme-switcher-check { display: none; }
+
+}

package/dist/components/theme-switcher.mjs

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

package/dist/components/toast.css

@@ -1,103 +1,104 @@
+@layer icen.components {
 /*
  * @icen.ai/ui — Component: toast（轻提示，与 behaviors/toast 配套）
  *
- * 容器固定在右下角，左缘 3px 语义色条；滑入动画用 motion token。
+ * 容器固定在行内末端下角（LTR 右下 / RTL 镜像左下），起始缘 3px 语义色条；滑入动画用 motion token。
  *
  * 完整契约：
- *   <div class="toast-container" role="status" aria-live="polite">
- *     <div class="toast [toast--success|toast--error|toast--warning|toast--info]" role="status|alert">
- *       <span class="toast-msg">文本</span>
- *       <button class="toast-action">撤销</button>       ← 可选 action
+ *   <div class="icen-toast-container" role="status" aria-live="polite">
+ *     <div class="icen-toast [icen-toast--success|icen-toast--error|icen-toast--warning|icen-toast--info]" role="status|icen-alert">
+ *       <span class="icen-toast-msg">文本</span>
+ *       <button class="icen-toast-action">撤销</button>       ← 可选 action
  *     </div>
  *   </div>
  *
  * behavior 自动维护 role 与 aria-live。
  */
 
-.toast-container {
+.icen-toast-container {
   position: fixed;
-  right: var(--density-space-md);
-  bottom: var(--density-space-md);
-  z-index: var(--z-toast);
+  inset-inline-end: var(--icen-density-space-md);
+  bottom: var(--icen-density-space-md);
+  z-index: var(--icen-z-toast);
   display: flex;
   flex-direction: column;
-  gap: var(--density-space-sm);
+  gap: var(--icen-density-space-sm);
   align-items: flex-end;
   pointer-events: none;
 }
 
-.toast {
+.icen-toast {
   pointer-events: auto;
   position: relative;
   overflow: hidden;
   display: inline-flex;
   align-items: center;
-  gap: var(--density-space-sm);
-  background: var(--token-surface);
-  color: var(--token-text);
-  border: 1px solid var(--token-line-soft);
-  border-left: 3px solid var(--token-line-strong);
-  border-radius: var(--radius-sm);
-  box-shadow: var(--token-shadow-overlay);
-  padding: var(--density-space-sm) var(--density-space-md);
-  font-size: var(--density-font-size-md);
+  gap: var(--icen-density-space-sm);
+  background: var(--icen-token-surface);
+  color: var(--icen-token-text);
+  border: 1px solid var(--icen-token-line-soft);
+  border-inline-start: 3px solid var(--icen-token-line-strong);
+  border-radius: var(--icen-radius-sm);
+  box-shadow: var(--icen-token-shadow-overlay);
+  padding: var(--icen-density-space-sm) var(--icen-density-space-md);
+  font-size: var(--icen-density-font-size-md);
   line-height: 1.4;
-  max-width: 380px;
+  max-inline-size: 380px;
   animation: icen-toast-in var(--icen-tx-slow);
 }
 
-/* 语义色：左缘 3px 强调 */
-.toast--success { border-left-color: var(--token-success); }
-.toast--error   { border-left-color: var(--token-error); }
-.toast--warning { border-left-color: var(--token-warning); }
-.toast--info    { border-left-color: var(--token-info); }
+/* 语义色：起始缘 3px 强调 */
+.icen-toast--success { border-inline-start-color: var(--icen-token-success); }
+.icen-toast--error   { border-inline-start-color: var(--icen-token-error); }
+.icen-toast--warning { border-inline-start-color: var(--icen-token-warning); }
+.icen-toast--info    { border-inline-start-color: var(--icen-token-info); }
 
-.toast-msg {
+.icen-toast-msg {
   flex: 1;
   min-width: 0;
   word-break: break-word;
 }
 
-.toast-action {
+.icen-toast-action {
   flex-shrink: 0;
   padding: 0;
   background: none;
   border: 0;
   cursor: pointer;
-  color: var(--token-accent);
+  color: var(--icen-token-accent);
   font: inherit;
-  font-size: var(--density-font-size-sm);
+  font-size: var(--icen-density-font-size-sm);
   font-weight: 500;
   text-decoration: underline;
   text-underline-offset: 3px;
   -webkit-tap-highlight-color: transparent;
   transition: color var(--icen-tx-fast);
 }
-.toast-action:hover { color: var(--token-accent-deep, var(--token-accent)); }
-.toast-action:focus-visible {
+.icen-toast-action:hover { color: var(--icen-token-accent-deep, var(--icen-token-accent)); }
+.icen-toast-action:focus-visible {
   outline: none;
-  border-radius: var(--radius-xs);
+  border-radius: var(--icen-radius-xs);
   box-shadow: var(--icen-ring);
 }
 
 /* ── 增强 ── */
 
 /* 语义图标 */
-.toast-icon {
+.icen-toast-icon {
   flex-shrink: 0;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  color: var(--token-text-faint);
+  color: var(--icen-token-text-faint);
 }
-.toast-icon svg { width: 16px; height: 16px; }
-.toast--success .toast-icon { color: var(--token-success); }
-.toast--error   .toast-icon { color: var(--token-error); }
-.toast--warning .toast-icon { color: var(--token-warning); }
-.toast--info    .toast-icon { color: var(--token-info); }
+.icen-toast-icon svg { width: 16px; height: 16px; }
+.icen-toast--success .icen-toast-icon { color: var(--icen-token-success); }
+.icen-toast--error   .icen-toast-icon { color: var(--icen-token-error); }
+.icen-toast--warning .icen-toast-icon { color: var(--icen-token-warning); }
+.icen-toast--info    .icen-toast-icon { color: var(--icen-token-info); }
 
 /* 关闭按钮 */
-.toast-close {
+.icen-toast-close {
   flex-shrink: 0;
   display: inline-flex;
   align-items: center;
@@ -106,95 +107,94 @@
   height: 20px;
   padding: 0;
   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);
 }
-.toast-close:hover {
-  color: var(--token-text);
-  background: var(--token-fill-1);
+.icen-toast-close:hover {
+  color: var(--icen-token-text);
+  background: var(--icen-token-fill-1);
 }
-.toast-close svg { width: 12px; height: 12px; }
+.icen-toast-close svg { width: 12px; height: 12px; }
 
 /* 富内容（标题 + 正文） */
-.toast-content {
+.icen-toast-content {
   flex: 1;
   min-width: 0;
 }
-.toast-title {
-  font-size: var(--density-font-size-md);
+.icen-toast-title {
+  font-size: var(--icen-density-font-size-md);
   font-weight: 500;
-  color: var(--token-text);
+  color: var(--icen-token-text);
   line-height: 1.4;
 }
-.toast-body {
-  font-size: var(--density-font-size-sm);
-  color: var(--token-text-muted);
+.icen-toast-body {
+  font-size: var(--icen-density-font-size-sm);
+  color: var(--icen-token-text-muted);
   margin-top: 2px;
   line-height: 1.5;
 }
 
 /* 超时进度条 */
-.toast-progress {
+.icen-toast-progress {
   position: absolute;
   bottom: 0;
-  left: 0;
-  right: 0;
+  inset-inline: 0;
   height: 2px;
   background: transparent;
   overflow: hidden;
-  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
+  border-radius: 0 0 var(--icen-radius-sm) var(--icen-radius-sm);
 }
-.toast-progress-fill {
+.icen-toast-progress-fill {
   height: 100%;
-  background: var(--token-accent);
-  transform-origin: left;
+  background: var(--icen-token-accent);
+  transform-origin: left; /* guard:allow-physical 倒计时压缩方向是动画语义（LTR 自左向右消减），RTL 下保持同一物理节奏 */
   animation: toast-countdown linear forwards;
 }
-.toast--success .toast-progress-fill { background: var(--token-success); }
-.toast--error   .toast-progress-fill { background: var(--token-error); }
-.toast--warning .toast-progress-fill { background: var(--token-warning); }
-.toast--info    .toast-progress-fill { background: var(--token-info); }
+.icen-toast--success .icen-toast-progress-fill { background: var(--icen-token-success); }
+.icen-toast--error   .icen-toast-progress-fill { background: var(--icen-token-error); }
+.icen-toast--warning .icen-toast-progress-fill { background: var(--icen-token-warning); }
+.icen-toast--info    .icen-toast-progress-fill { background: var(--icen-token-info); }
 @keyframes toast-countdown {
   from { transform: scaleX(1); }
   to   { transform: scaleX(0); }
 }
 
-/* 容器定位变体 */
-.toast-container[data-position='top-left'] {
-  right: auto;
+/* 容器定位变体（位置名为物理角契约，RTL 语义不变） */
+.icen-toast-container[data-icen-position='top-left'] {
+  right: auto; /* guard:allow-physical 物理角位置变体 top-left */
   bottom: auto;
-  top: var(--density-space-md);
-  left: var(--density-space-md);
+  top: var(--icen-density-space-md);
+  left: var(--icen-density-space-md); /* guard:allow-physical 物理角位置变体 top-left */
   align-items: flex-start;
 }
-.toast-container[data-position='top-right'] {
+.icen-toast-container[data-icen-position='top-right'] {
   bottom: auto;
-  top: var(--density-space-md);
+  top: var(--icen-density-space-md);
 }
-.toast-container[data-position='top-center'] {
-  right: auto;
+.icen-toast-container[data-icen-position='top-center'] {
+  right: auto; /* guard:allow-physical 物理角位置变体 top-center */
   bottom: auto;
-  top: var(--density-space-md);
-  left: 50%;
+  top: var(--icen-density-space-md);
+  left: 50%; /* guard:allow-physical 水平居中：left 50% + translateX(-50%) 任意方向下均为视口水平中心 */
   transform: translateX(-50%);
   align-items: center;
 }
-.toast-container[data-position='bottom-left'] {
-  right: auto;
-  left: var(--density-space-md);
+.icen-toast-container[data-icen-position='bottom-left'] {
+  right: auto; /* guard:allow-physical 物理角位置变体 bottom-left */
+  left: var(--icen-density-space-md); /* guard:allow-physical 物理角位置变体 bottom-left */
   align-items: flex-start;
 }
-.toast-container[data-position='bottom-center'] {
-  right: auto;
-  left: 50%;
+.icen-toast-container[data-icen-position='bottom-center'] {
+  right: auto; /* guard:allow-physical 物理角位置变体 bottom-center */
+  left: 50%; /* guard:allow-physical 水平居中：left 50% + translateX(-50%) 任意方向下均为视口水平中心 */
   transform: translateX(-50%);
   align-items: center;
 }
 
-.toast.is-leaving {
+.icen-toast.is-leaving {
   opacity: 0;
   transform: translateY(8px);
   transition:
@@ -208,10 +208,24 @@
 }
 
 @media (max-width: 480px) {
-  .toast-container { right: var(--density-space-sm); bottom: var(--density-space-sm); left: var(--density-space-sm); align-items: stretch; }
-  .toast { max-width: none; }
+  .icen-toast-container { inset-inline: var(--icen-density-space-sm); bottom: var(--icen-density-space-sm); align-items: stretch; }
+  .icen-toast { max-inline-size: none; }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .toast { animation: none; }
+  .icen-toast { animation: none; }
+}
+
+/* Quiet close shares the same fixed action slot as other interface controls. */
+.icen-toast-close.icen-icon-action { inline-size: var(--icen-density-input-height-sm); block-size: var(--icen-density-input-height-sm); }
+.icen-toast-close.icen-icon-action > svg { inline-size: 14px; block-size: 14px; }
+.icen-toast-close:focus-visible { outline: 2px solid var(--icen-token-accent); outline-offset: 1px; }
+@media (pointer: coarse) { .icen-toast-close.icen-icon-action { min-inline-size: 44px; min-block-size: 44px; } }
+
+.icen-toast-content { min-inline-size: 0; }
+.icen-toast { max-inline-size: min(380px, calc(100vw - 2 * var(--icen-density-space-md))); }
+.icen-toast-action { min-block-size: var(--icen-density-input-height-sm); padding-inline: var(--icen-density-space-sm); border-radius: var(--icen-radius-sm); text-decoration: none; background: var(--icen-token-fill-1); }
+.icen-toast-action:hover { background: var(--icen-token-fill-2); }
+@media (pointer: coarse) { .icen-toast-action { min-inline-size: 44px; min-block-size: 44px; } }
+
 }