@icen.ai/ui 0.4.0 → 0.5.0

package/dist/components/tag.css

@@ -0,0 +1,164 @@
+/*
+ * @icen.ai/ui — Component: tag（展示标签 / Chip）
+ *
+ * 与 pill 的差异（各司其职，不互相替代）：
+ *   - pill = 状态语义徽章（绿/黄/红/信息/accent），小尺寸，行内只读
+ *   - tag  = 中性展示标签，可选关闭按钮、可选中态、可带图标
+ *            常用于：分类、筛选条件、属性标记、邮件标签、文件 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>
+ *
+ *   选中态 .is-selected 由消费方驱动（用于筛选条件等）；
+ *   .tag-close 点击后消费方决定是否从 DOM 移除本节点（本组件不自动删除）。
+ */
+
+.tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 0 var(--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);
+  font: inherit;
+  font-size: var(--density-font-size-sm);
+  letter-spacing: 0.01em;
+  white-space: nowrap;
+  vertical-align: middle;
+  transition:
+    background-color var(--icen-tx-fast),
+    border-color var(--icen-tx-fast),
+    color var(--icen-tx-fast);
+}
+.tag:hover {
+  background: var(--token-fill-2);
+  color: var(--token-text);
+}
+
+/* 尺寸变体 */
+.tag--sm {
+  height: 20px;
+  padding: 0 6px;
+  font-size: var(--density-font-size-xs);
+  gap: 3px;
+}
+.tag--lg {
+  height: 28px;
+  padding: 0 10px;
+  font-size: var(--density-font-size-md);
+  gap: 6px;
+}
+
+/* ── 图标 ── */
+.tag-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--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 {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 240px;
+}
+
+/* ── 关闭按钮（消费方点击后自行决定是否从 DOM 移除） ── */
+.tag-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  padding: 0;
+  margin-right: -4px;
+  margin-left: 2px;
+  border: 0;
+  border-radius: var(--radius-xs);
+  background: transparent;
+  color: inherit;
+  opacity: 0.6;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  transition: opacity var(--icen-tx-fast), background-color var(--icen-tx-fast);
+}
+.tag-close:hover {
+  opacity: 1;
+  background: color-mix(in srgb, var(--token-text-faint) 22%, transparent);
+}
+.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; }
+
+/* ── 选中态（用于筛选条件等）── */
+.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);
+}
+.tag.is-selected .tag-icon { color: var(--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);
+}
+
+/* ── 禁用态 ── */
+.tag.is-disabled,
+.tag[aria-disabled='true'] {
+  opacity: var(--icen-disabled-opacity);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* ── 可点击（用于可筛选 tag） ── */
+button.tag,
+.tag[role='button'] {
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+.tag:where(button, [role='button']):focus-visible {
+  outline: none;
+  box-shadow: var(--icen-ring);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .tag, .tag-close { transition: none; }
+}

package/dist/components/tag.mjs

@@ -0,0 +1,2 @@
+// @icen.ai/ui — kit: tag（CSS + behavior 一行入口；构建产物，勿手改）
+import './tag.css';

package/dist/components/toast.css

@@ -77,6 +77,120 @@
   box-shadow: var(--icen-ring);
 }
 
+/* ── 增强 ── */
+
+/* 语义图标 */
+.toast-icon {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--token-text-faint);
+}
+.toast-icon svg { width: 16px; height: 16px; }
+.toast.ok .toast-icon { color: var(--token-success); }
+.toast.err .toast-icon { color: var(--token-error); }
+.toast.warn .toast-icon { color: var(--token-warning); }
+
+/* 关闭按钮 */
+.toast-close {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-xs);
+  background: transparent;
+  color: var(--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);
+}
+.toast-close svg { width: 12px; height: 12px; }
+
+/* 富内容（标题 + 正文） */
+.toast-content {
+  flex: 1;
+  min-width: 0;
+}
+.toast-title {
+  font-size: var(--density-font-size-md);
+  font-weight: 500;
+  color: var(--token-text);
+  line-height: 1.4;
+}
+.toast-body {
+  font-size: var(--density-font-size-sm);
+  color: var(--token-text-muted);
+  margin-top: 2px;
+  line-height: 1.5;
+}
+
+/* 超时进度条 */
+.toast-progress {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: transparent;
+  overflow: hidden;
+  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
+}
+.toast-progress-fill {
+  height: 100%;
+  background: var(--token-accent);
+  transform-origin: left;
+  animation: toast-countdown linear forwards;
+}
+.toast.ok .toast-progress-fill { background: var(--token-success); }
+.toast.err .toast-progress-fill { background: var(--token-error); }
+.toast.warn .toast-progress-fill { background: var(--token-warning); }
+@keyframes toast-countdown {
+  from { transform: scaleX(1); }
+  to   { transform: scaleX(0); }
+}
+
+.toast { position: relative; overflow: hidden; }
+
+/* 容器定位变体 */
+.toast-container[data-position='top-left'] {
+  right: auto;
+  bottom: auto;
+  top: var(--density-space-md);
+  left: var(--density-space-md);
+  align-items: flex-start;
+}
+.toast-container[data-position='top-right'] {
+  bottom: auto;
+  top: var(--density-space-md);
+}
+.toast-container[data-position='top-center'] {
+  right: auto;
+  bottom: auto;
+  top: var(--density-space-md);
+  left: 50%;
+  transform: translateX(-50%);
+  align-items: center;
+}
+.toast-container[data-position='bottom-left'] {
+  right: auto;
+  left: var(--density-space-md);
+  align-items: flex-start;
+}
+.toast-container[data-position='bottom-center'] {
+  right: auto;
+  left: 50%;
+  transform: translateX(-50%);
+  align-items: center;
+}
+
 .toast.leaving {
   opacity: 0;
   transform: translateY(8px);

package/dist/components/toolbar.css

@@ -0,0 +1,101 @@
+/*
+ * @icen.ai/ui — Component: toolbar（工具条）
+ *
+ * 横向承载按钮 / 控件的容器，常用于编辑器顶栏、列表上方操作行、表格批量操作条。
+ * 与 segmented 的区别：
+ *   - segmented = 紧贴的互斥分段选择
+ *   - 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>
+ *     <span class="toolbar-separator"></span>
+ *     <div class="toolbar-spacer"></div>      ← 弹性占位，把右侧元素推到末尾
+ *     <span class="toolbar-label">3 项</span>
+ *   </div>
+ *
+ *   编辑器顶栏（与 fixed 子项配套）：
+ *   <div class="toolbar toolbar--elevated">
+ *     …
+ *   </div>
+ */
+
+.toolbar {
+  display: flex;
+  align-items: center;
+  gap: var(--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);
+}
+.toolbar--wrap { flex-wrap: wrap; }
+.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);
+}
+
+/* ── 尺寸 ── */
+.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); }
+
+/* ── 分组（紧贴一组按钮） ── */
+.toolbar-group {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  padding: 2px;
+  background: var(--token-fill-1);
+  border-radius: var(--radius-sm);
+}
+.toolbar-group > .btn { border-color: transparent; background: transparent; }
+.toolbar-group > .btn:hover { background: var(--token-fill-2); }
+
+/* ── 分隔符 ── */
+.toolbar-separator {
+  width: 1px;
+  height: 20px;
+  background: var(--token-line-soft);
+  flex-shrink: 0;
+}
+.toolbar--sm .toolbar-separator { height: 16px; }
+.toolbar--lg .toolbar-separator { height: 24px; }
+
+/* 水平工具条里的垂直分隔（用于纵向 toolbar） */
+.toolbar--vertical { flex-direction: column; align-items: stretch; }
+.toolbar--vertical .toolbar-separator {
+  width: auto;
+  height: 1px;
+  margin: var(--density-space-xs) 0;
+}
+
+/* ── 弹性占位 ── */
+.toolbar-spacer { flex: 1 1 auto; min-width: var(--density-space-xs); }
+
+/* ── 内嵌文字（计数 / 状态） ── */
+.toolbar-label {
+  font-size: var(--density-font-size-sm);
+  color: var(--token-text-muted);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+.toolbar-label.accent { color: var(--token-accent); }
+
+@media (max-width: 480px) {
+  .toolbar { flex-wrap: wrap; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .toolbar * { transition: none !important; }
+}

package/dist/components/toolbar.mjs

@@ -0,0 +1,2 @@
+// @icen.ai/ui — kit: toolbar（CSS + behavior 一行入口；构建产物，勿手改）
+import './toolbar.css';

package/dist/components/upload.css

@@ -130,12 +130,43 @@
   border-radius: var(--radius-sm);
   font-size: var(--density-font-size-sm);
   animation: upload-item-in var(--icen-tx-fast);
+  transition: border-color var(--icen-tx-fast);
 }
-.upload-list-item-name {
+.upload-list-item:hover {
+  border-color: var(--token-outline);
+}
+.upload-list-item-thumb {
+  width: 32px;
+  height: 32px;
+  object-fit: cover;
+  border-radius: var(--radius-xs);
+  flex-shrink: 0;
+  background: var(--token-bg-soft);
+}
+.upload-list-item-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  flex-shrink: 0;
+  border-radius: var(--radius-xs);
+  background: var(--token-fill-1);
+  color: var(--token-text-faint);
+}
+.upload-list-item-icon svg { width: 16px; height: 16px; }
+.upload-list-item-info {
   flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+.upload-list-item-name {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  color: var(--token-text);
 }
 .upload-list-item-size {
   color: var(--token-text-faint);
@@ -147,20 +178,46 @@
   background: transparent;
   cursor: pointer;
   color: var(--token-text-faint);
-  padding: 2px;
+  padding: 4px;
   border-radius: var(--radius-full);
   display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
   transition: color var(--icen-tx-fast), background-color var(--icen-tx-fast);
 }
 .upload-list-item-x:hover {
-  color: var(--token-text);
-  background: var(--token-fill-2);
+  color: var(--token-error);
+  background: var(--token-error-muted);
 }
 .upload-list-item-x:focus-visible {
   outline: none;
   box-shadow: var(--icen-ring);
 }
 
+/* 进度条（behavior 可选注入 .upload-list-item-progress） */
+.upload-list-item-progress {
+  height: 2px;
+  width: 100%;
+  background: var(--token-fill-2);
+  border-radius: var(--radius-full);
+  overflow: hidden;
+  margin-top: 2px;
+}
+.upload-list-item-progress-bar {
+  height: 100%;
+  background: var(--token-accent);
+  border-radius: var(--radius-full);
+  transition: width var(--icen-tx-normal) var(--ease-out);
+}
+.upload-list-item.is-error {
+  border-color: var(--token-error);
+}
+.upload-list-item.is-error .upload-list-item-icon {
+  background: var(--token-error-muted);
+  color: var(--token-error);
+}
+
 @keyframes upload-item-in {
   from { opacity: 0; transform: translateY(-4px); }
   to { opacity: 1; transform: translateY(0); }