@icen.ai/ui 0.8.1 → 0.10.0

package/dist/components/btn.css

@@ -1,44 +1,45 @@
+@layer icen.components {
 /*
  * @icen.ai/ui — Component: btn（按钮）
  *
  * 完整契约：
- *   <button class="btn [.btn-primary|.btn-danger|.btn-ghost|.btn-link] [.btn-sm|.btn-lg] [.btn-block] [.btn-icon]
- *           [.is-loading] [.is-error] [disabled]|[aria-disabled=true]|[data-disabled]>
- *     [<svg class="btn-icon-start">…</svg>]    可选前置图标（与 .btn-icon 不同：.btn-icon 是纯图标钮）
+ *   <button class="icen-btn [.icen-btn-primary|.icen-btn-danger|.icen-btn-ghost|.icen-btn-link] [.icen-btn-sm|.icen-btn-lg] [.icen-btn-block] [.icen-btn-icon]
+ *           [.is-loading] [.is-error] [disabled]|[aria-disabled=true]|[data-icen-disabled]>
+ *     [<svg class="icen-btn-icon-start">…</svg>]    可选前置图标（与 .icen-btn-icon 不同：.icen-btn-icon 是纯图标钮）
  *     <span class="btn-text">文本</span>
- *     [<svg class="btn-icon-end">…</svg>]      可选后置图标
+ *     [<svg class="icen-btn-icon-end">…</svg>]      可选后置图标
  *   </button>
  *
  * 变体：
- *   .btn          默认（surface 底 + outline-soft 描边）
- *   .btn-primary  实心 accent
- *   .btn-danger   透明底 + error 描边（hover 实心）
- *   .btn-ghost    全透明，hover 浮起 fill-2
- *   .btn-link     link 文本按钮（无背景、underline on hover）
+ *   .icen-btn          默认（surface 底 + outline-soft 描边）
+ *   .icen-btn-primary  实心 accent
+ *   .icen-btn-danger   透明底 + error 描边（hover 实心）
+ *   .icen-btn-ghost    全透明，hover 浮起 fill-2
+ *   .icen-btn-link     link 文本按钮（无背景、underline on hover）
  *
- * 尺寸：默认 / .btn-sm / .btn-lg / .btn-icon（正方形）
- * 状态：.is-loading 加 spinner + aria-busy；.is-error error 边；disabled/aria-disabled/data-disabled
+ * 尺寸：默认 / .icen-btn-sm / .icen-btn-lg / .icen-btn-icon（正方形）
+ * 状态：.is-loading 加 spinner + aria-busy；.is-error error 边；disabled/aria-disabled/data-icen-disabled
  */
 
-.btn {
-  --btn-bg: var(--token-surface);
-  --btn-fg: var(--token-text);
-  --btn-border: var(--token-line-soft);
-  --btn-bg-hover: var(--token-surface-hover);
-  --btn-border-hover: var(--token-accent);
+.icen-btn {
+  --btn-bg: var(--icen-token-surface);
+  --btn-fg: var(--icen-token-text);
+  --btn-border: var(--icen-token-line-soft);
+  --btn-bg-hover: var(--icen-token-surface-hover);
+  --btn-border-hover: var(--icen-token-accent);
 
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 6px;
-  padding: 0 var(--density-space-md);
-  height: var(--density-input-height-md);
+  padding: 0 var(--icen-density-space-md);
+  height: var(--icen-density-input-height-md);
   background: var(--btn-bg);
   color: var(--btn-fg);
   border: 1px solid var(--btn-border);
-  border-radius: var(--radius-md);
-  font-family: var(--font-body);
-  font-size: var(--density-font-size-md);
+  border-radius: var(--icen-radius-md);
+  font-family: var(--icen-font-body);
+  font-size: var(--icen-density-font-size-md);
   font-weight: 500;
   letter-spacing: 0.01em;
   white-space: nowrap;
@@ -53,19 +54,19 @@
     box-shadow var(--icen-tx-fast),
     transform var(--icen-tx-fast);
 }
-.btn:hover {
+.icen-btn:hover {
   background: var(--btn-bg-hover);
   border-color: var(--btn-border-hover);
 }
-.btn:active { transform: var(--icen-press-soft); }
-.btn:focus-visible {
+.icen-btn:active { transform: var(--icen-press-soft); }
+.icen-btn:focus-visible {
   outline: none;
   box-shadow: var(--icen-ring);
 }
-.btn:disabled,
-.btn[aria-disabled='true'],
-.btn[data-disabled],
-.btn.is-loading {
+.icen-btn:disabled,
+.icen-btn[aria-disabled='true'],
+.icen-btn[data-icen-disabled],
+.icen-btn.is-loading {
   cursor: not-allowed;
   opacity: var(--icen-disabled-opacity);
   transform: none;
@@ -73,37 +74,40 @@
 }
 
 /* ── 变体 ── */
-.btn-primary {
-  --btn-bg: var(--token-accent);
-  --btn-fg: var(--token-on-accent);
-  --btn-border: var(--token-accent);
-  --btn-bg-hover: var(--token-accent-deep, color-mix(in srgb, var(--token-accent) 85%, black));
-  --btn-border-hover: var(--token-accent-deep, var(--token-accent));
-}
-.btn-primary:hover {
-  box-shadow: var(--token-shadow-elevated);
+.icen-btn-primary {
+  --btn-bg: var(--icen-token-accent-strong);
+  --btn-fg: var(--icen-token-on-accent);
+  --btn-border: var(--icen-token-accent-strong);
+  --btn-bg-hover: color-mix(in srgb, var(--icen-token-accent-strong) 88%, black);
+  --btn-border-hover: color-mix(in srgb, var(--icen-token-accent-strong) 88%, black);
+}
+/* hover 阴影抬升仅可悬停设备生效（触屏关闭，AGENTS 动效守卫） */
+@media (hover: hover) and (pointer: fine) {
+  .icen-btn-primary:hover {
+    box-shadow: var(--icen-token-shadow-elevated);
+  }
 }
 
-.btn-danger {
-  --btn-fg: var(--token-error);
-  --btn-border: color-mix(in srgb, var(--token-error) 35%, transparent);
+.icen-btn-danger {
+  --btn-fg: var(--icen-token-error);
+  --btn-border: color-mix(in srgb, var(--icen-token-error) 35%, transparent);
   --btn-bg: transparent;
-  --btn-bg-hover: var(--token-error);
-  --btn-border-hover: var(--token-error);
+  --btn-bg-hover: var(--icen-token-error);
+  --btn-border-hover: var(--icen-token-error);
 }
-.btn-danger:hover { color: var(--token-on-accent); }
+.icen-btn-danger:hover { color: var(--icen-token-on-accent); }
 
-.btn-ghost {
+.icen-btn-ghost {
   --btn-bg: transparent;
   --btn-border: transparent;
-  --btn-bg-hover: var(--token-fill-2);
+  --btn-bg-hover: var(--icen-token-fill-2);
   --btn-border-hover: transparent;
 }
 
-.btn-link {
+.icen-btn-link {
   --btn-bg: transparent;
   --btn-border: transparent;
-  --btn-fg: var(--token-accent);
+  --btn-fg: var(--icen-token-accent);
   --btn-bg-hover: transparent;
   --btn-border-hover: transparent;
   height: auto;
@@ -112,69 +116,71 @@
   border-radius: 0;
   text-decoration: none;
 }
-.btn-link:hover {
+.icen-btn-link:hover {
   text-decoration: underline;
   text-underline-offset: 3px;
   background: transparent;
 }
 
 /* ── 尺寸 ── */
-.btn-sm {
-  height: var(--density-input-height-sm);
-  padding: 0 var(--density-space-sm);
-  font-size: var(--density-font-size-sm);
+.icen-btn-sm {
+  height: var(--icen-density-input-height-sm);
+  padding: 0 var(--icen-density-space-sm);
+  font-size: var(--icen-density-font-size-sm);
   gap: 4px;
 }
-.btn-lg {
-  height: var(--density-input-height-lg);
-  padding: 0 var(--density-space-lg);
-  font-size: var(--density-font-size-lg);
+.icen-btn-lg {
+  height: var(--icen-density-input-height-lg);
+  padding: 0 var(--icen-density-space-lg);
+  font-size: var(--icen-density-font-size-lg);
   gap: 8px;
 }
-.btn-icon {
-  width: var(--density-input-height-md);
+.icen-btn-icon {
+  width: var(--icen-density-input-height-md);
   padding: 0;
   gap: 0;
 }
-.btn-icon.btn-sm { width: var(--density-input-height-sm); }
-.btn-icon.btn-lg { width: var(--density-input-height-lg); }
+.icen-btn-icon.icen-btn-sm { width: var(--icen-density-input-height-sm); }
+.icen-btn-icon.icen-btn-lg { width: var(--icen-density-input-height-lg); }
 
-.btn-block {
+.icen-btn-block {
   display: flex;
   width: 100%;
 }
 
 /* ── 状态 ── */
-.btn.is-error {
-  --btn-border: var(--token-error);
-  --btn-border-hover: var(--token-error);
+.icen-btn.is-error {
+  --btn-border: var(--icen-token-error);
+  --btn-border-hover: var(--icen-token-error);
 }
 
-/* 加载态：左侧 spinner 占位 + 文本保留（避免重排）。
+/* 加载态：居中 spinner 占位 + 文本保留（避免重排）。
    behavior 在挂 .is-loading 时把 [aria-busy=true] 也挂上。 */
-.btn.is-loading { position: relative; color: transparent; }
-.btn.is-loading::after {
+.icen-btn.is-loading { position: relative; color: transparent; }
+.icen-btn.is-loading::after {
   content: '';
   position: absolute;
-  top: 50%; left: 50%;
+  top: 50%; left: 50%; /* guard:allow-physical 圆心居中：left 50% + 负边距 任意方向下均为中心 */
   width: 14px; height: 14px;
-  margin: -7px 0 0 -7px;
+  margin: -7px 0 0 -7px; /* guard:allow-physical 居中负边距与 left 50% 配套（物理坐标对），RTL 下同样居中 */
   border: 2px solid color-mix(in srgb, currentColor 35%, transparent);
   border-top-color: currentColor;
   border-radius: 50%;
-  animation: icen-spin var(--btn-spin-duration, var(--duration-slow)) linear infinite;
-  opacity: 1; /* 覆盖 .pressable::after 渐变（若与 .pressable 同用） */
+  animation: icen-spin var(--btn-spin-duration, var(--icen-duration-slow)) linear infinite;
+  opacity: 1; /* 覆盖 .icen-pressable::after 渐变（若与 .icen-pressable 同用） */
   background: none;
   pointer-events: none;
 }
 
 /* 图标按钮内部 svg 默认尺寸对齐字号 */
-.btn-icon-start, .btn-icon-end {
+.icen-btn-icon-start, .icen-btn-icon-end {
   width: 1.1em;
   height: 1.1em;
   flex-shrink: 0;
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .btn.is-loading::after { --btn-spin-duration: 1.2s; }
+  .icen-btn.is-loading::after { --btn-spin-duration: 1.2s; }
+}
+
 }

package/dist/components/card.css

@@ -1,221 +1,232 @@
+@layer icen.components {
 /*
  * @icen.ai/ui — Component: card（组合卡片容器）
  *
  * 完整契约：
- *   <div class="card [.card--elevated|.card--outlined|.card--glass|.card--flat|.card--interactive] [.is-selected]">
- *     <div class="card-media">                           ← 可选：封面图区
+ *   <div class="icen-card [.icen-card--elevated|.icen-card--outlined|.icen-card--glass|.icen-card--flat|.icen-card--interactive] [.is-selected]">
+ *     <div class="icen-card-media">                           ← 可选：封面图区
  *       <img src="…" />
- *       <span class="card-tag">置顶</span>                ← 可选：图上徽标
+ *       <span class="icen-card-tag">置顶</span>                ← 可选：图上徽标
  *     </div>
- *     <div class="card-head">
+ *     <div class="icen-card-head">
  *       <div>
- *         <h3 class="card-title">标题</h3>
- *         <p class="card-desc">副标题（可选）</p>
+ *         <h3 class="icen-card-title">标题</h3>
+ *         <p class="icen-card-desc">副标题（可选）</p>
  *       </div>
- *       <div class="card-action"><button>…</button></div>
+ *       <div class="icen-card-action"><button>…</button></div>
  *     </div>
- *     <div class="card-body">…</div>
- *     <div class="card-foot">
- *       <div class="card-meta">…</div>
- *       <div class="card-action">…</div>
+ *     <div class="icen-card-body">…</div>
+ *     <div class="icen-card-foot">
+ *       <div class="icen-card-meta">…</div>
+ *       <div class="icen-card-action">…</div>
  *     </div>
  *   </div>
  *
  * 规格源自 opengal src/presentation/ui/data/card.tsx。
  */
 
-.card {
+.icen-card {
   position: relative;
-  background: var(--token-card);
-  border: 1px solid var(--token-outline-soft);
-  box-shadow: var(--token-shadow-inset);
-  border-radius: var(--radius-lg);
+  background: var(--icen-token-card);
+  border: 1px solid var(--icen-token-outline-soft);
+  box-shadow: var(--icen-token-shadow-inset);
+  border-radius: var(--icen-radius-lg);
   overflow: hidden;
 }
 
 /* ── 变体 ── */
-.card--elevated {
-  box-shadow: var(--token-shadow-card);
+.icen-card--elevated {
+  box-shadow: var(--icen-token-shadow-card);
   border-color: transparent;
 }
-.card--outlined {
-  border-color: var(--token-outline);
+.icen-card--outlined {
+  border-color: var(--icen-token-outline);
   box-shadow: none;
 }
-.card--flat {
+.icen-card--flat {
   box-shadow: none;
-  background: var(--token-bg-soft);
+  background: var(--icen-token-bg-soft);
 }
-.card--glass {
-  background: var(--token-surface-glass);
+.icen-card--glass {
+  background: var(--icen-token-surface-glass);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   box-shadow: none;
 }
 
 /* ── 修饰 ── */
-.card--interactive {
+.icen-card--interactive {
   cursor: pointer;
   transition:
     border-color var(--icen-tx-slow),
     box-shadow var(--icen-tx-slow),
     transform var(--icen-tx-slow);
 }
-.card--interactive:hover {
-  transform: translateY(-1px);
-  border-color: color-mix(in srgb, var(--token-accent) 26%, var(--token-outline-soft));
-  box-shadow: var(--token-shadow-card);
+/* hover 抬升仅可悬停设备生效（触屏关闭，AGENTS 动效守卫）；focus-within 全设备保留 */
+@media (hover: hover) and (pointer: fine) {
+  .icen-card--interactive:hover {
+    transform: translateY(-1px);
+    border-color: color-mix(in srgb, var(--icen-token-accent) 26%, var(--icen-token-outline-soft));
+    box-shadow: var(--icen-token-shadow-card);
+  }
 }
-.card--interactive:focus-within {
-  border-color: var(--token-accent);
+.icen-card--interactive:focus-within {
+  border-color: var(--icen-token-accent);
 }
-.card.is-selected {
+.icen-card--interactive:focus-within {
+  border-color: var(--icen-token-accent);
+}
+.icen-card.is-selected {
   box-shadow: var(--icen-ring);
 }
 
 /* ── 媒体封面 ── */
-.card-media {
+.icen-card-media {
   position: relative;
   width: 100%;
   aspect-ratio: 16 / 9;
   overflow: hidden;
-  background: var(--token-bg-soft);
+  background: var(--icen-token-bg-soft);
 }
 /* 封面比例变体 */
-.card-media--square { aspect-ratio: 1 / 1; }
-.card-media--tall { aspect-ratio: 3 / 4; }
-.card-media--wide { aspect-ratio: 21 / 9; }
-.card-media--auto { aspect-ratio: auto; }
-/* 封面 hover 放大（配合 .card--interactive） */
-.card--interactive:hover .card-media > img,
-.card--interactive:hover .card-media > video {
-  transform: scale(1.04);
-}
-.card-media > img,
-.card-media > video {
-  width: 100%;
+.icen-card-media--square { aspect-ratio: 1 / 1; }
+.icen-card-media--tall { aspect-ratio: 3 / 4; }
+.icen-card-media--wide { aspect-ratio: 21 / 9; }
+.icen-card-media--auto { aspect-ratio: auto; }
+/* 封面 hover 放大（配合 .icen-card--interactive，仅可悬停设备） */
+@media (hover: hover) and (pointer: fine) {
+  .icen-card--interactive:hover .icen-card-media > img,
+  .icen-card--interactive:hover .icen-card-media > video {
+    transform: scale(1.04);
+  }
+}
+.icen-card-media > img,
+.icen-card-media > video {
+  inline-size: 100%;
   height: 100%;
   object-fit: cover;
-  transition: transform var(--icen-tx-slow) var(--ease-out);
+  transition: transform var(--icen-tx-slow) var(--icen-ease-out);
 }
-.card-tag {
+.icen-card-tag {
   position: absolute;
-  top: var(--density-space-xs);
-  left: var(--density-space-xs);
-  padding: 2px var(--density-space-xs);
-  font-size: var(--density-font-size-xs);
+  top: var(--icen-density-space-xs);
+  inset-inline-start: var(--icen-density-space-xs);
+  padding: 2px var(--icen-density-space-xs);
+  font-size: var(--icen-density-font-size-xs);
   font-weight: 600;
-  color: var(--token-on-accent);
-  background: color-mix(in srgb, var(--token-text) 70%, transparent);
-  border-radius: var(--radius-xs);
+  color: var(--icen-token-on-accent);
+  background: color-mix(in srgb, var(--icen-token-text) 70%, transparent);
+  border-radius: var(--icen-radius-xs);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
 }
 
 /* ── 子结构 ── */
-.card-head {
+.icen-card-head {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
-  gap: var(--density-space-sm);
-  padding: var(--density-space-md);
+  gap: var(--icen-density-space-sm);
+  padding: var(--icen-density-space-md);
 }
-.card-title {
-  font-size: var(--density-font-size-lg);
+.icen-card-title {
+  font-size: var(--icen-density-font-size-lg);
   font-weight: 600;
-  color: var(--token-text);
+  color: var(--icen-token-text);
   line-height: 1.3;
   margin: 0;
-  font-family: var(--font-heading);
+  font-family: var(--icen-font-heading);
 }
-.card-desc {
-  font-size: var(--density-font-size-sm);
-  color: var(--token-text-muted);
+.icen-card-desc {
+  font-size: var(--icen-density-font-size-sm);
+  color: var(--icen-token-text-muted);
   margin: 2px 0 0;
   line-height: 1.4;
 }
-.card-body {
-  padding: 0 var(--density-space-md) var(--density-space-md);
-  font-size: var(--density-font-size-md);
-  color: var(--token-text-muted);
+.icen-card-body {
+  padding: 0 var(--icen-density-space-md) var(--icen-density-space-md);
+  font-size: var(--icen-density-font-size-md);
+  color: var(--icen-token-text-muted);
   line-height: 1.6;
 }
-.card-body > p:first-child { margin-top: 0; }
-.card-body > p:last-child { margin-bottom: 0; }
+.icen-card-body > p:first-child { margin-top: 0; }
+.icen-card-body > p:last-child { margin-bottom: 0; }
 
-.card-foot {
+.icen-card-foot {
   display: flex;
   align-items: center;
-  gap: var(--density-space-sm);
-  padding: var(--density-space-sm) var(--density-space-md);
-  border-top: 1px solid var(--token-outline-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-outline-soft);
+  background: color-mix(in srgb, var(--icen-token-bg-soft) 50%, transparent);
 }
-.card-meta {
+.icen-card-meta {
   display: flex;
   align-items: center;
-  gap: var(--density-space-xs);
-  font-size: var(--density-font-size-xs);
-  color: var(--token-text-faint);
+  gap: var(--icen-density-space-xs);
+  font-size: var(--icen-density-font-size-xs);
+  color: var(--icen-token-text-faint);
 }
-.card-action {
-  margin-left: auto;
+.icen-card-action {
+  margin-inline-start: auto;
   flex-shrink: 0;
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .card--interactive { transition: none; }
+  .icen-card--interactive { transition: none; }
 }
 
 /* ── 卡片网格（card-group）：自适应多列 ── */
-.card-group {
+.icen-card-group {
   display: grid;
-  gap: var(--density-space-md);
+  gap: var(--icen-density-space-md);
   grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
 }
-.card-group--2 { grid-template-columns: repeat(2, 1fr); }
-.card-group--3 { grid-template-columns: repeat(3, 1fr); }
-.card-group--4 { grid-template-columns: repeat(4, 1fr); }
+.icen-card-group--2 { grid-template-columns: repeat(2, 1fr); }
+.icen-card-group--3 { grid-template-columns: repeat(3, 1fr); }
+.icen-card-group--4 { grid-template-columns: repeat(4, 1fr); }
 
 /* ── 卡片列表（横向铺开，常用于搜索结果/消息流） ── */
-.card-list {
+.icen-card-list {
   display: flex;
   flex-direction: column;
-  gap: var(--density-space-sm);
+  gap: var(--icen-density-space-sm);
 }
-.card-list > .card {
+.icen-card-list > .icen-card {
   display: flex;
   flex-direction: row;
   align-items: stretch;
 }
-.card-list > .card .card-media {
-  width: 120px;
+.icen-card-list > .icen-card .icen-card-media {
+  inline-size: 120px;
   flex-shrink: 0;
   aspect-ratio: auto;
 }
-.card-list > .card .card-head,
-.card-list > .card .card-body,
-.card-list > .card .card-foot {
+.icen-card-list > .icen-card .icen-card-head,
+.icen-card-list > .icen-card .icen-card-body,
+.icen-card-list > .icen-card .icen-card-foot {
   flex: 1;
 }
 
 /* ── 卡片头副标题 ── */
-.card-subtitle {
-  font-size: var(--density-font-size-xs);
-  color: var(--token-text-faint);
+.icen-card-subtitle {
+  font-size: var(--icen-density-font-size-xs);
+  color: var(--icen-token-text-faint);
   margin: 1px 0 0;
   line-height: 1.4;
 }
 
 /* ── 卡片状态色边 ── */
-.card--success { border-color: color-mix(in srgb, var(--token-success) 35%, transparent); }
-.card--warning { border-color: color-mix(in srgb, var(--token-warning) 35%, transparent); }
-.card--error   { border-color: color-mix(in srgb, var(--token-error) 35%, transparent); }
+.icen-card--success { border-color: color-mix(in srgb, var(--icen-token-success) 35%, transparent); }
+.icen-card--warning { border-color: color-mix(in srgb, var(--icen-token-warning) 35%, transparent); }
+.icen-card--error   { border-color: color-mix(in srgb, var(--icen-token-error) 35%, transparent); }
 
-/* ── 卡片右上角徽标位 ── */
-.card-badge {
+/* ── 卡片右上角徽标位（物理角契约：与 .icen-badge 角标一致，RTL 不镜像） ── */
+.icen-card-badge {
   position: absolute;
-  top: var(--density-space-sm);
-  right: var(--density-space-sm);
+  top: var(--icen-density-space-sm);
+  right: var(--icen-density-space-sm); /* guard:allow-physical 徽标位钉在卡片物理右上角（同 .icen-badge 角标契约） */
   z-index: 1;
 }
+
+}