@icen.ai/ui 0.9.0 → 0.11.0

package/dist/components/toast.css

@@ -1,200 +1,203 @@
+@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-control-gap);
+  background: color-mix(in srgb, var(--icen-token-surface) 96%, transparent);
+  backdrop-filter: blur(var(--icen-material-blur-chrome)) saturate(var(--icen-material-saturate));
+  -webkit-backdrop-filter: blur(var(--icen-material-blur-chrome)) saturate(var(--icen-material-saturate));
+  color: var(--icen-token-text);
+  border: 1px solid var(--icen-token-material-edge);
+  border-inline-start: 2px solid var(--icen-token-separator-strong);
+  border-radius: var(--icen-radius-lg);
+  box-shadow: var(--icen-token-material-light), var(--icen-token-shadow-elevated);
+  padding: 8px 10px;
+  font-size: var(--icen-font-size-control);
   line-height: 1.4;
-  max-width: 380px;
-  animation: icen-toast-in var(--icen-tx-slow);
+  max-inline-size: 400px;
+  animation: icen-toast-in var(--icen-duration-normal) var(--icen-ease-enter);
 }
 
-/* 语义色：左缘 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;
+  min-block-size: 24px;
+  padding-inline: 8px;
+  background: var(--icen-token-fill-hover);
   border: 0;
+  border-radius: var(--icen-radius-xs);
   cursor: pointer;
-  color: var(--token-accent);
+  color: var(--icen-token-text);
   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;
+  text-decoration: none;
   -webkit-tap-highlight-color: transparent;
-  transition: color var(--icen-tx-fast);
+  transition: color var(--icen-tx-fast), background-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-text); background: var(--icen-token-fill-2); }
+.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-muted);
 }
-.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: 15px; height: 15px; }
+.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;
   justify-content: center;
-  width: 20px;
-  height: 20px;
+  width: 24px;
+  height: 24px;
   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-muted);
   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-hover);
 }
-.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);
-  font-weight: 500;
-  color: var(--token-text);
+.icen-toast-title {
+  font-size: var(--icen-font-size-control);
+  font-weight: 600;
+  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:
@@ -203,15 +206,30 @@
 }
 
 @keyframes icen-toast-in {
-  from { opacity: 0; transform: translateY(8px); }
-  to   { opacity: 1; transform: translateY(0); }
+  from { opacity: 0; transform: translateY(6px) scale(.99); }
+  to   { opacity: 1; transform: translateY(0) scale(1); }
 }
 
 @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: 28px; block-size: 28px; }
+.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(400px, calc(100vw - 2 * var(--icen-density-space-md))); }
+.icen-toast-action { min-block-size: 24px; background: var(--icen-token-fill-hover); }
+.icen-toast-action:hover { background: var(--icen-token-fill-2); }
+@media (pointer: coarse) { .icen-toast-action { min-inline-size: 44px; min-block-size: 44px; } }
+
+
 }

package/dist/components/toast.d.mts

@@ -0,0 +1,2 @@
+// kit: toast 类型面（构建产物，勿手改）
+export * from '../behaviors/toast.mjs';

package/dist/components/toolbar.css

@@ -1,3 +1,4 @@
+@layer icen.components {
 /*
  * @icen.ai/ui — Component: toolbar（工具条）
  *
@@ -7,95 +8,98 @@
  *   - toolbar   = 宽松的按钮/控件容器，可分组、可分隔、可换行
  *
  * 完整契约：
- *   <div class="toolbar [--sm|--lg] [--wrap] [--borderless]">
- *     <button class="btn btn-sm">…</button>
- *     <div class="toolbar-group">
- *       <button class="btn btn-sm">…</button>
- *       <button class="btn btn-sm">…</button>
+ *   <div class="icen-toolbar [--sm|--lg] [--wrap] [--borderless]">
+ *     <button class="icen-btn icen-btn-sm">…</button>
+ *     <div class="icen-toolbar-group">
+ *       <button class="icen-btn icen-btn-sm">…</button>
+ *       <button class="icen-btn icen-btn-sm">…</button>
  *     </div>
- *     <span class="toolbar-separator"></span>
- *     <div class="toolbar-spacer"></div>      ← 弹性占位，把右侧元素推到末尾
- *     <span class="toolbar-label">3 项</span>
+ *     <span class="icen-toolbar-separator"></span>
+ *     <div class="icen-toolbar-spacer"></div>      ← 弹性占位，把后续元素推到行内末尾（RTL 镜像到左侧）
+ *     <span class="icen-toolbar-label">3 项</span>
  *   </div>
  *
  *   编辑器顶栏（与 fixed 子项配套）：
- *   <div class="toolbar toolbar--elevated">
+ *   <div class="icen-toolbar icen-toolbar--elevated">
  *     …
  *   </div>
  */
 
-.toolbar {
+.icen-toolbar {
   display: flex;
   align-items: center;
-  gap: var(--density-space-sm);
+  gap: var(--icen-density-space-sm);
   flex-wrap: nowrap;
-  padding: var(--density-space-sm);
-  background: var(--token-bg-soft);
-  border: 1px solid var(--token-line-soft);
-  border-radius: var(--radius-md);
+  min-block-size: 44px;
+  padding: 6px 8px;
+  background: var(--icen-token-surface-chrome);
+  border: 1px solid var(--icen-token-separator-soft);
+  border-radius: var(--icen-control-radius-lg);
 }
-.toolbar--wrap { flex-wrap: wrap; }
-.toolbar--borderless {
+.icen-toolbar--wrap { flex-wrap: wrap; }
+.icen-toolbar--borderless {
   background: transparent;
   border-color: transparent;
   padding: 0;
 }
-.toolbar--elevated {
-  background: var(--token-card-strong);
-  border-color: var(--token-outline-soft);
-  box-shadow: var(--token-shadow-elevated);
+.icen-toolbar--elevated {
+  background: var(--icen-token-surface);
+  border-color: var(--icen-token-material-edge);
+  box-shadow: var(--icen-token-material-light), var(--icen-token-shadow-elevated);
 }
 
 /* ── 尺寸 ── */
-.toolbar--sm { padding: 4px var(--density-space-xs); gap: var(--density-space-xs); }
-.toolbar--lg { padding: var(--density-space-md); gap: var(--density-space-md); }
+.icen-toolbar--sm { min-block-size: 36px; padding: 4px 6px; gap: var(--icen-density-space-xs); }
+.icen-toolbar--lg { min-block-size: 52px; padding: 8px 12px; gap: var(--icen-density-space-md); }
 
 /* ── 分组（紧贴一组按钮） ── */
-.toolbar-group {
+.icen-toolbar-group {
   display: inline-flex;
   align-items: center;
   gap: 2px;
   padding: 2px;
-  background: var(--token-fill-1);
-  border-radius: var(--radius-sm);
+  background: var(--icen-token-fill-hover);
+  border-radius: var(--icen-radius-xs);
 }
-.toolbar-group > .btn { border-color: transparent; background: transparent; }
-.toolbar-group > .btn:hover { background: var(--token-fill-2); }
+.icen-toolbar-group > .icen-btn { border-color: transparent; background: transparent; box-shadow: none; }
+.icen-toolbar-group > .icen-btn:hover { background: var(--icen-token-fill-hover); }
 
 /* ── 分隔符 ── */
-.toolbar-separator {
+.icen-toolbar-separator {
   width: 1px;
-  height: 20px;
-  background: var(--token-line-soft);
+  height: 18px;
+  background: var(--icen-token-separator);
   flex-shrink: 0;
 }
-.toolbar--sm .toolbar-separator { height: 16px; }
-.toolbar--lg .toolbar-separator { height: 24px; }
+.icen-toolbar--sm .icen-toolbar-separator { height: 14px; }
+.icen-toolbar--lg .icen-toolbar-separator { height: 22px; }
 
 /* 水平工具条里的垂直分隔（用于纵向 toolbar） */
-.toolbar--vertical { flex-direction: column; align-items: stretch; }
-.toolbar--vertical .toolbar-separator {
+.icen-toolbar--vertical { flex-direction: column; align-items: stretch; }
+.icen-toolbar--vertical .icen-toolbar-separator {
   width: auto;
   height: 1px;
-  margin: var(--density-space-xs) 0;
+  margin: var(--icen-density-space-xs) 0;
 }
 
 /* ── 弹性占位 ── */
-.toolbar-spacer { flex: 1 1 auto; min-width: var(--density-space-xs); }
+.icen-toolbar-spacer { flex: 1 1 auto; min-width: var(--icen-density-space-xs); }
 
 /* ── 内嵌文字（计数 / 状态） ── */
-.toolbar-label {
-  font-size: var(--density-font-size-sm);
-  color: var(--token-text-muted);
+.icen-toolbar-label {
+  font-size: var(--icen-density-font-size-sm);
+  color: var(--icen-token-text-muted);
   font-variant-numeric: tabular-nums;
   white-space: nowrap;
 }
-.toolbar-label.accent { color: var(--token-accent); }
+.icen-toolbar-label.icen-accent { color: var(--icen-token-accent-text); }
 
 @media (max-width: 480px) {
-  .toolbar { flex-wrap: wrap; }
+  .icen-toolbar { flex-wrap: wrap; }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .toolbar * { transition: none !important; }
+  .icen-toolbar * { transition: none !important; /* guard:allow-important 动效守卫：降级媒体查询需压制组件动画 */ }
+}
+
 }

package/dist/components/toolbar.d.mts

@@ -0,0 +1,2 @@
+// kit: toolbar 类型面（构建产物，勿手改）
+export {};