@manohub/ui 0.10.4 → 1.0.0

package/dist/styles/components/list-view.css

@@ -1,244 +1,244 @@
-/**
- * ListView（卡片网格列表：容器自适应列数 + 骨架卡 + 三态）。
- *
- * 依据：卡片本体沿用 card.css（Card）；本文件只管网格容器、骨架卡与卡片项几何。
- */
-
-/* ===== ListView（卡片网格列表：容器自适应列数 + 骨架卡 + 三态）=====
-   列数由**容器宽度**决定（auto-fill），不跟视口断点：窄栏自动减列。
-   `min(var(--mh-list-view-min), 100%)` 是必需的一层保护 —— 只写固定下限时，
-   容器比下限还窄会溢出（列宽不会缩到容器以内）。 */
-
-.mh-list-view {
-  --mh-list-view-min: var(--ui-grid-column-min);
-  --mh-list-view-gap: var(--ui-space-5);
-  --mh-list-view-card-min-height: 144px;
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(min(var(--mh-list-view-min), 100%), 1fr));
-  gap: var(--mh-list-view-gap);
-  align-items: stretch;
-}
-
-/* 骨架卡：与卡片同尺寸（最小高 + 圆角），避免加载完成时高度跳动 */
-
-.mh-list-view__skeleton {
-  min-height: var(--mh-list-view-card-min-height);
-  border-radius: var(--ui-radius-md);
-  background: var(--ui-base-200);
-  animation: mh-list-view-pulse 1.4s ease-in-out infinite;
-}
-
-@keyframes mh-list-view-pulse {
-  0%,
-  100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.55;
-  }
-}
-
-/* 列表卡片项：最小高对齐（原型 min-h-36），同排卡片等高、尾部一行对齐 */
-
-.mh-list-view__card {
-  min-height: var(--mh-list-view-card-min-height);
-}
-
-/* 头部：图标 + 标题块 + 状态胶囊（原型 flex items-start） */
-
-.mh-list-view__card-head {
-  display: flex;
-  align-items: flex-start;
-  gap: var(--ui-space-3);
-}
-
-/* 图标容器 36×36（原型 h-9 w-9），圆角取控件档 6（原型 rounded-md） */
-
-.mh-list-view__card-icon {
-  flex: none;
-  width: 36px;
-  height: 36px;
-  overflow: hidden;
-  border-radius: var(--ui-radius-control);
-}
-
-.mh-list-view__card-icon-img {
-  display: block;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.mh-list-view__card-title-block {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  min-width: 0;
-}
-
-/* 标题 16/600（原型 text-base font-semibold leading-6，与令牌档一致） */
-
-.mh-list-view__card-title {
-  overflow: hidden;
-  font-size: var(--ui-font-heading);
-  font-weight: var(--ui-weight-semibold);
-  line-height: var(--ui-line-heading);
-  color: var(--ui-base-content);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.mh-list-view__card-subtitle {
-  font-size: var(--ui-font-caption);
-  line-height: var(--ui-line-caption);
-  color: var(--ui-base-content-muted);
-}
-
-/* 状态胶囊：全圆角 + 弱底同色字（原型 rounded-full px-2.5 text-xs leading-5） */
-
-.mh-list-view__card-status {
-  --mh-status-fg: var(--ui-primary);
-  --mh-status-bg: var(--ui-primary-weak);
-  display: inline-flex;
-  flex: none;
-  align-items: center;
-  gap: var(--ui-space-1);
-  margin-left: auto;
-  padding: 0 10px;
-  border-radius: var(--ui-radius-full);
-  font-size: var(--ui-font-caption);
-  line-height: var(--ui-line-caption);
-  white-space: nowrap;
-  color: var(--mh-status-fg);
-  background: var(--mh-status-bg);
-}
-
-.mh-list-view__card-status--primary {
-  --mh-status-fg: var(--ui-primary);
-  --mh-status-bg: var(--ui-primary-weak);
-}
-
-.mh-list-view__card-status--success {
-  --mh-status-fg: var(--ui-success-strong);
-  --mh-status-bg: var(--ui-success-weak);
-}
-
-.mh-list-view__card-status--warning {
-  --mh-status-fg: var(--ui-warning-strong);
-  --mh-status-bg: var(--ui-warning-weak);
-}
-
-.mh-list-view__card-status--error {
-  --mh-status-fg: var(--ui-error);
-  --mh-status-bg: var(--ui-error-weak);
-}
-
-.mh-list-view__card-status--neutral {
-  --mh-status-fg: var(--ui-base-content-muted);
-  --mh-status-bg: var(--ui-base-200);
-}
-
-.mh-list-view__card-status-dot {
-  width: 6px;
-  height: 6px;
-  flex: none;
-  border-radius: var(--ui-radius-full);
-  background: var(--mh-status-fg);
-}
-
-/* 描述：两行截断（原型 line-clamp-2 text-xs text-muted-foreground） */
-
-.mh-list-view__card-desc {
-  display: -webkit-box;
-  margin: 0;
-  overflow: hidden;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-  line-clamp: 2;
-  font-size: var(--ui-font-caption);
-  line-height: var(--ui-line-caption);
-  color: var(--ui-base-content-muted);
-}
-
-/* 尾部：左「自定义内容 + 标签组」、右「统计 + 操作位」；贴卡片底部（原型 mt-auto） */
-
-.mh-list-view__card-foot {
-  display: flex;
-  align-items: center;
-  gap: var(--ui-space-2);
-  margin-top: auto;
-}
-
-.mh-list-view__card-foot-main {
-  display: flex;
-  align-items: center;
-  gap: var(--ui-space-2);
-  min-width: 0;
-}
-
-.mh-list-view__card-foot-side {
-  display: flex;
-  flex: none;
-  align-items: center;
-  gap: var(--ui-space-1);
-  margin-left: auto;
-}
-
-.mh-list-view__card-tags {
-  display: flex;
-  align-items: center;
-  gap: var(--ui-space-2);
-  min-width: 0;
-}
-
-/* 标签片：主色弱底 + 主色字 + 小圆角（原型 rounded bg-primary/10 px-2 leading-5 font-medium） */
-
-.mh-list-view__card-tag {
-  flex: none;
-  padding: 0 var(--ui-space-2);
-  border-radius: var(--ui-radius-sm);
-  font-size: var(--ui-font-caption);
-  font-weight: var(--ui-weight-medium);
-  line-height: var(--ui-line-caption);
-  color: var(--ui-primary);
-  background: var(--ui-primary-weak);
-}
-
-.mh-list-view__card-extra {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--ui-space-1);
-  font-size: var(--ui-font-caption);
-  line-height: var(--ui-line-caption);
-  color: var(--ui-base-content-muted);
-}
-
-/* 操作位：默认隐藏，卡片悬浮（或卡内获得焦点）时显形 —— 键盘 Tab 进来同样可见。
-   触屏没有 hover 能力，故 hover 缺失时恒显形，避免操作不可达。 */
-
-.mh-list-view__card-actions {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--ui-space-1);
-  opacity: 0;
-  transition: opacity 0.15s ease;
-}
-
-.mh-list-view__card:hover .mh-list-view__card-actions {
-  opacity: 1;
-}
-
-.mh-list-view__card:focus-within .mh-list-view__card-actions {
-  opacity: 1;
-}
-
-@media (hover: none) {
-  .mh-list-view__card-actions {
-    opacity: 1;
-  }
-}
-
-/* ===== 固定列数档（`columns > 0`）：不再按容器宽度自适应 ===== */
-.mh-list-view--fixed {
-  grid-template-columns: repeat(var(--mh-list-view-columns, 1), minmax(0, 1fr));
-}
+/**
+ * ListView（卡片网格列表：容器自适应列数 + 骨架卡 + 三态）。
+ *
+ * 依据：卡片本体沿用 card.css（Card）；本文件只管网格容器、骨架卡与卡片项几何。
+ */
+
+/* ===== ListView（卡片网格列表：容器自适应列数 + 骨架卡 + 三态）=====
+   列数由**容器宽度**决定（auto-fill），不跟视口断点：窄栏自动减列。
+   `min(var(--mh-list-view-min), 100%)` 是必需的一层保护 —— 只写固定下限时，
+   容器比下限还窄会溢出（列宽不会缩到容器以内）。 */
+
+.mh-list-view {
+  --mh-list-view-min: var(--ui-grid-column-min);
+  --mh-list-view-gap: var(--ui-space-5);
+  --mh-list-view-card-min-height: 144px;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(var(--mh-list-view-min), 100%), 1fr));
+  gap: var(--mh-list-view-gap);
+  align-items: stretch;
+}
+
+/* 骨架卡：与卡片同尺寸（最小高 + 圆角），避免加载完成时高度跳动 */
+
+.mh-list-view__skeleton {
+  min-height: var(--mh-list-view-card-min-height);
+  border-radius: var(--ui-radius-md);
+  background: var(--ui-base-200);
+  animation: mh-list-view-pulse 1.4s ease-in-out infinite;
+}
+
+@keyframes mh-list-view-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.55;
+  }
+}
+
+/* 列表卡片项：最小高对齐（原型 min-h-36），同排卡片等高、尾部一行对齐 */
+
+.mh-list-view__card {
+  min-height: var(--mh-list-view-card-min-height);
+}
+
+/* 头部：图标 + 标题块 + 状态胶囊（原型 flex items-start） */
+
+.mh-list-view__card-head {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--ui-space-3);
+}
+
+/* 图标容器 36×36（原型 h-9 w-9），圆角取控件档 6（原型 rounded-md） */
+
+.mh-list-view__card-icon {
+  flex: none;
+  width: 36px;
+  height: 36px;
+  overflow: hidden;
+  border-radius: var(--ui-radius-control);
+}
+
+.mh-list-view__card-icon-img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.mh-list-view__card-title-block {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-width: 0;
+}
+
+/* 标题 16/600（原型 text-base font-semibold leading-6，与令牌档一致） */
+
+.mh-list-view__card-title {
+  overflow: hidden;
+  font-size: var(--ui-font-heading);
+  font-weight: var(--ui-weight-semibold);
+  line-height: var(--ui-line-heading);
+  color: var(--ui-base-content);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mh-list-view__card-subtitle {
+  font-size: var(--ui-font-caption);
+  line-height: var(--ui-line-caption);
+  color: var(--ui-base-content-muted);
+}
+
+/* 状态胶囊：全圆角 + 弱底同色字（原型 rounded-full px-2.5 text-xs leading-5） */
+
+.mh-list-view__card-status {
+  --mh-status-fg: var(--ui-primary);
+  --mh-status-bg: var(--ui-primary-weak);
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  gap: var(--ui-space-1);
+  margin-left: auto;
+  padding: 0 10px;
+  border-radius: var(--ui-radius-full);
+  font-size: var(--ui-font-caption);
+  line-height: var(--ui-line-caption);
+  white-space: nowrap;
+  color: var(--mh-status-fg);
+  background: var(--mh-status-bg);
+}
+
+.mh-list-view__card-status--primary {
+  --mh-status-fg: var(--ui-primary);
+  --mh-status-bg: var(--ui-primary-weak);
+}
+
+.mh-list-view__card-status--success {
+  --mh-status-fg: var(--ui-success-strong);
+  --mh-status-bg: var(--ui-success-weak);
+}
+
+.mh-list-view__card-status--warning {
+  --mh-status-fg: var(--ui-warning-strong);
+  --mh-status-bg: var(--ui-warning-weak);
+}
+
+.mh-list-view__card-status--error {
+  --mh-status-fg: var(--ui-error);
+  --mh-status-bg: var(--ui-error-weak);
+}
+
+.mh-list-view__card-status--neutral {
+  --mh-status-fg: var(--ui-base-content-muted);
+  --mh-status-bg: var(--ui-base-200);
+}
+
+.mh-list-view__card-status-dot {
+  width: 6px;
+  height: 6px;
+  flex: none;
+  border-radius: var(--ui-radius-full);
+  background: var(--mh-status-fg);
+}
+
+/* 描述：两行截断（原型 line-clamp-2 text-xs text-muted-foreground） */
+
+.mh-list-view__card-desc {
+  display: -webkit-box;
+  margin: 0;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  font-size: var(--ui-font-caption);
+  line-height: var(--ui-line-caption);
+  color: var(--ui-base-content-muted);
+}
+
+/* 尾部：左「自定义内容 + 标签组」、右「统计 + 操作位」；贴卡片底部（原型 mt-auto） */
+
+.mh-list-view__card-foot {
+  display: flex;
+  align-items: center;
+  gap: var(--ui-space-2);
+  margin-top: auto;
+}
+
+.mh-list-view__card-foot-main {
+  display: flex;
+  align-items: center;
+  gap: var(--ui-space-2);
+  min-width: 0;
+}
+
+.mh-list-view__card-foot-side {
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: var(--ui-space-1);
+  margin-left: auto;
+}
+
+.mh-list-view__card-tags {
+  display: flex;
+  align-items: center;
+  gap: var(--ui-space-2);
+  min-width: 0;
+}
+
+/* 标签片：主色弱底 + 主色字 + 小圆角（原型 rounded bg-primary/10 px-2 leading-5 font-medium） */
+
+.mh-list-view__card-tag {
+  flex: none;
+  padding: 0 var(--ui-space-2);
+  border-radius: var(--ui-radius-sm);
+  font-size: var(--ui-font-caption);
+  font-weight: var(--ui-weight-medium);
+  line-height: var(--ui-line-caption);
+  color: var(--ui-primary);
+  background: var(--ui-primary-weak);
+}
+
+.mh-list-view__card-extra {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ui-space-1);
+  font-size: var(--ui-font-caption);
+  line-height: var(--ui-line-caption);
+  color: var(--ui-base-content-muted);
+}
+
+/* 操作位：默认隐藏，卡片悬浮（或卡内获得焦点）时显形 —— 键盘 Tab 进来同样可见。
+   触屏没有 hover 能力，故 hover 缺失时恒显形，避免操作不可达。 */
+
+.mh-list-view__card-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ui-space-1);
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+
+.mh-list-view__card:hover .mh-list-view__card-actions {
+  opacity: 1;
+}
+
+.mh-list-view__card:focus-within .mh-list-view__card-actions {
+  opacity: 1;
+}
+
+@media (hover: none) {
+  .mh-list-view__card-actions {
+    opacity: 1;
+  }
+}
+
+/* ===== 固定列数档（`columns > 0`）：不再按容器宽度自适应 ===== */
+.mh-list-view--fixed {
+  grid-template-columns: repeat(var(--mh-list-view-columns, 1), minmax(0, 1fr));
+}

package/dist/styles/components/loading.css

@@ -1,76 +1,76 @@
-/**
- * Loading —— 加载态面（转圈 + 可选文案；行内 / 区域遮罩 / 全屏遮罩三形态）。
- *
- * 出处：设计稿的「正在忙」态没有独立组件，各页自绘了五花八门的遮罩与转圈
- * （`::after` 画环、文字符号 `...`、gif 图各有）。本件收的是**三件事**：
- * 转圈字形、遮罩底色、覆盖范围 —— 三者都是「改一处要全会跟着变」的口径。
- *
- * 字形归 `@manohub/icon`（`loading`），本面只负责**转**与**在哪转**：
- * 动画名加 `mh-` 前缀（与 toast 的 `mh-toast-spin` 同理：动画名是全局标识，防撞名）。
- *
- * 尺寸按**全局图标档**派生（`calc()` 加减，与 button.css 同款）：
- * 改全局图标档时三档一起缩放，不会出现「转圈比旁边图标大一圈」。
- *
- * 遮罩底色由主题底色派生（`color-mix`，**不新造色值**）：换主题跟着变。
- */
-.mh-loading {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--ui-loading-gap);
-  color: var(--ui-loading-text-color);
-  font-size: var(--ui-font-body);
-  line-height: var(--ui-line-body);
-}
-
-/* 尺寸档（按全局图标档派生，档距用 calc 表达） */
-.mh-loading--sm {
-  --ui-loading-spinner-size: calc(var(--ui-font-icon) - 4px);
-}
-.mh-loading--lg {
-  --ui-loading-spinner-size: calc(var(--ui-font-icon) + 8px);
-}
-
-.mh-loading__spinner {
-  flex: none;
-  width: var(--ui-loading-spinner-size);
-  height: var(--ui-loading-spinner-size);
-  /* 转圈是**提示进行中**，取主色：与语义四色（成功/警告/错误）不混 |
-     独立 `rotate` 属性（不碰 transform）：与全库动画令牌同款约束 */
-  color: var(--ui-primary);
-  animation: mh-loading-spin 0.8s linear infinite;
-}
-@keyframes mh-loading-spin {
-  to {
-    rotate: 360deg;
-  }
-}
-/* 降级：减弱动效时放慢而不是全停 —— 完全静止的转圈会被读成「卡住了」 */
-@media (prefers-reduced-motion: reduce) {
-  .mh-loading__spinner {
-    animation-duration: 2.4s;
-  }
-}
-
-.mh-loading__text {
-  min-width: 0;
-}
-
-/* ===== 区域遮罩：铺满**最近的定位祖先**（宿主需自带 position: relative）===== */
-.mh-loading--area {
-  position: absolute;
-  inset: 0;
-  z-index: 10;
-  background: var(--ui-loading-mask);
-  /* 遮罩要拦住交互：光标与吞点击都是「正在忙」的表达 */
-  cursor: wait;
-}
-
-/* ===== 全屏遮罩：铺满视口（层级夹在 toast 堆叠 1080 与模态 top layer 之间）===== */
-.mh-loading--screen {
-  position: fixed;
-  inset: 0;
-  z-index: 1090;
-  background: var(--ui-loading-mask);
-  cursor: wait;
-}
+/**
+ * Loading —— 加载态面（转圈 + 可选文案；行内 / 区域遮罩 / 全屏遮罩三形态）。
+ *
+ * 出处：设计稿的「正在忙」态没有独立组件，各页自绘了五花八门的遮罩与转圈
+ * （`::after` 画环、文字符号 `...`、gif 图各有）。本件收的是**三件事**：
+ * 转圈字形、遮罩底色、覆盖范围 —— 三者都是「改一处要全会跟着变」的口径。
+ *
+ * 字形归 `@manohub/icon`（`loading`），本面只负责**转**与**在哪转**：
+ * 动画名加 `mh-` 前缀（与 toast 的 `mh-toast-spin` 同理：动画名是全局标识，防撞名）。
+ *
+ * 尺寸按**全局图标档**派生（`calc()` 加减，与 button.css 同款）：
+ * 改全局图标档时三档一起缩放，不会出现「转圈比旁边图标大一圈」。
+ *
+ * 遮罩底色由主题底色派生（`color-mix`，**不新造色值**）：换主题跟着变。
+ */
+.mh-loading {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ui-loading-gap);
+  color: var(--ui-loading-text-color);
+  font-size: var(--ui-font-body);
+  line-height: var(--ui-line-body);
+}
+
+/* 尺寸档（按全局图标档派生，档距用 calc 表达） */
+.mh-loading--sm {
+  --ui-loading-spinner-size: calc(var(--ui-font-icon) - 4px);
+}
+.mh-loading--lg {
+  --ui-loading-spinner-size: calc(var(--ui-font-icon) + 8px);
+}
+
+.mh-loading__spinner {
+  flex: none;
+  width: var(--ui-loading-spinner-size);
+  height: var(--ui-loading-spinner-size);
+  /* 转圈是**提示进行中**，取主色：与语义四色（成功/警告/错误）不混 |
+     独立 `rotate` 属性（不碰 transform）：与全库动画令牌同款约束 */
+  color: var(--ui-primary);
+  animation: mh-loading-spin 0.8s linear infinite;
+}
+@keyframes mh-loading-spin {
+  to {
+    rotate: 360deg;
+  }
+}
+/* 降级：减弱动效时放慢而不是全停 —— 完全静止的转圈会被读成「卡住了」 */
+@media (prefers-reduced-motion: reduce) {
+  .mh-loading__spinner {
+    animation-duration: 2.4s;
+  }
+}
+
+.mh-loading__text {
+  min-width: 0;
+}
+
+/* ===== 区域遮罩：铺满**最近的定位祖先**（宿主需自带 position: relative）===== */
+.mh-loading--area {
+  position: absolute;
+  inset: 0;
+  z-index: 10;
+  background: var(--ui-loading-mask);
+  /* 遮罩要拦住交互：光标与吞点击都是「正在忙」的表达 */
+  cursor: wait;
+}
+
+/* ===== 全屏遮罩：铺满视口（层级夹在 toast 堆叠 1080 与模态 top layer 之间）===== */
+.mh-loading--screen {
+  position: fixed;
+  inset: 0;
+  z-index: 1090;
+  background: var(--ui-loading-mask);
+  cursor: wait;
+}