@manohub/ui 0.6.0

package/dist/styles/components/skeleton.tokens.css

@@ -0,0 +1,27 @@
+/**
+ * skeleton —— 单件令牌（**基础值**）。
+ *
+ * 本件自己的几何 / 尺寸 / 色彩槽位；只服务本件，故不随主题进 `@manohub/theme`。
+ *
+ * ## 抽出说明
+ * 本文件从面文件里抽出（原先混写在 `skeleton.css` 顶部）：这些是**基础值**，锚在
+ * `[data-manohub-ui]` —— 跨包唯一作用域锚，由入口层无条件写在应用容器上，因此**任何落在
+ * 容器里的分件都取得到值**，不再依赖「声明在某个组件根类上」这条脆弱假设
+ * （历史症状：跨件消费的 `--ui-*-group-*` 取不到值，组内间距变 0）。
+ *
+ * ⚠️ `.mh-<件>--<档>` 这类**档位改写**留在面文件的修饰符块里 —— 它们靠「同一元素上两个
+ * 选择器改写同一个令牌」生效，搬到本文件会让档位失效。
+ * ⚠️ 新增组件要登记两处：本文件 + `src/styles/index.css`（见其文件头「五处齐备」）。
+ */
+[data-manohub-ui] {
+  /* 单件令牌（只服务本件） */
+  --ui-skeleton-bg: var(--ui-base-200); /* Ne10 底 */
+  --ui-skeleton-highlight: var(--ui-base-100); /* Ne12 扫过高光 */
+  --ui-skeleton-radius: var(--ui-radius-control);
+  /* 与通用行高档一致（36）。⚠️ 原注释写「规范：30 对齐表格行高」是**误导**：30 是表格行高
+     （设计实测），而本令牌是通用行高档。表格骨架若要贴合 30，请在消费侧覆盖本令牌，
+     不要改 `--ui-row-height`（它还供 Collapse 头行使用）。 */
+  --ui-skeleton-height: var(--ui-row-height);
+  --ui-skeleton-gap: var(--ui-space-3); /* 行间距 10 */
+  --ui-skeleton-animation: mh-skeleton-shimmer 1.6s ease-in-out infinite;
+}

package/dist/styles/components/steps.css

@@ -0,0 +1,157 @@
+/**
+ * Steps —— 步骤条（横向节点式 + 条形燕尾段式 + 进度条）。
+ *
+ * 出处：`@aihub/theme` 的 `playground/components/steps.css` 与 `src/components/steps.css`
+ * （节点 30 圆、字号 14、节点与标题**同行**、标题间距 12；连线是 2px **点线** + 末端 6px 方盒转 45°
+ *  的 `>` 折角箭头、最小长 58.383、弹性撑开；段 140×30、相邻**重叠 10**、整条 inline-flex 收宽；
+ *  进度条高 9）。
+ *
+ * **当前步之后那一段才转蓝**（已完成步之后仍是灰线）—— 这是规范实测的取向，别做成"已完成段全蓝"。
+ *
+ * 状态来源是**单一来源**（组件下发的 `--done` / `--current` / `--active`）：步骤序号不是原生元素能表达的状态，
+ * 故这里没有「三源等价」可言 —— 与勾选/开关那类不同，别照抄那份写法。
+ *
+ * 连线用**独立空元素**（`.mh-steps__connector`）而不是 `.mh-steps__step + ::after`：折角箭头要撑开弹性余量，
+ * 且 N 个节点配 N-1 条线，独立元素才能让两端节点各自保持自己的标题宽度。
+ */
+
+/* 几何只挂在 node 档根件上：令牌在同名 `.tokens.css`（锚 `[data-manohub-ui]`），几何若跟着挂会给 bar / 进度条多套一层 flex */
+.mh-steps {
+  display: flex;
+  align-items: center;
+}
+
+/* ===== 横向节点式 ===== */
+.mh-steps__step {
+  display: flex;
+  align-items: center;
+  gap: var(--ui-steps-title-gap);
+  flex: none;
+}
+.mh-steps__node {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: var(--ui-steps-node-size);
+  height: var(--ui-steps-node-size);
+  border-radius: var(--ui-radius-full);
+  background: var(--ui-steps-node-undone);
+  color: var(--ui-steps-node-text);
+  font-size: var(--ui-font-caption);
+  line-height: 1;
+}
+.mh-steps__node-icon {
+  width: var(--ui-steps-node-icon-size);
+  height: var(--ui-steps-node-icon-size);
+}
+.mh-steps__step--done .mh-steps__node,
+.mh-steps__step--current .mh-steps__node {
+  background: var(--ui-steps-node-bg);
+}
+.mh-steps__title {
+  font-size: var(--ui-font-body); /* 规范字号档 md（14） */
+  line-height: var(--ui-line-body);
+  color: var(--ui-base-content);
+  white-space: nowrap;
+}
+
+/* 连线：本体是 ::before 的点线，箭头是 ::after 的方盒去左下两边后转 45°（不是实心三角） */
+.mh-steps__connector {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  min-width: var(--ui-steps-connector-length);
+  margin: 0 var(--ui-space-3);
+  color: var(--ui-steps-connector-line);
+}
+.mh-steps__connector::before {
+  content: '';
+  flex: 1;
+  height: 0;
+  border-top: var(--ui-steps-connector-width) dotted currentColor;
+}
+.mh-steps__connector::after {
+  content: '';
+  flex: none;
+  width: var(--ui-steps-connector-arrow);
+  height: var(--ui-steps-connector-arrow);
+  border-top: var(--ui-steps-connector-width) solid currentColor;
+  border-right: var(--ui-steps-connector-width) solid currentColor;
+  transform: rotate(45deg);
+}
+.mh-steps__connector--active {
+  color: var(--ui-steps-connector-line-active);
+}
+
+/* ===== 条形燕尾段式 ===== */
+.mh-steps__bar {
+  display: inline-flex; /* 整条宽度收在段总宽上（块级 flex 会撑满整行） */
+  align-items: center;
+}
+.mh-steps__seg {
+  display: flex;
+  align-items: center;
+  gap: var(--ui-space-1);
+  width: var(--ui-steps-seg-width);
+  height: var(--ui-steps-seg-height);
+  /* 让开左尖 + 相邻段重叠：段是裁形，靠重叠咬合而不是留缝 */
+  padding-left: calc(var(--ui-steps-seg-overlap) + var(--ui-space-1));
+  margin-left: calc(var(--ui-steps-seg-overlap) * -1);
+  font-size: var(--ui-font-caption);
+  color: var(--ui-base-content);
+  background: var(--ui-steps-seg-bg);
+  clip-path: polygon(
+    0 50%,
+    var(--ui-steps-seg-overlap) 0,
+    calc(100% - var(--ui-steps-seg-overlap)) 0,
+    100% 50%,
+    calc(100% - var(--ui-steps-seg-overlap)) 100%,
+    var(--ui-steps-seg-overlap) 100%
+  );
+}
+.mh-steps__seg:first-child {
+  margin-left: 0;
+  clip-path: polygon(
+    0 0,
+    calc(100% - var(--ui-steps-seg-overlap)) 0,
+    100% 50%,
+    calc(100% - var(--ui-steps-seg-overlap)) 100%,
+    0 100%
+  );
+}
+.mh-steps__seg:last-child {
+  clip-path: polygon(0 50%, var(--ui-steps-seg-overlap) 0, 100% 0, 100% 100%, var(--ui-steps-seg-overlap) 100%);
+}
+.mh-steps__seg--active {
+  position: relative;
+  z-index: 1; /* 压住左右相邻段 */
+  background: var(--ui-steps-seg-bg-active);
+  color: var(--ui-steps-seg-text-active);
+  /* 段是裁形，光晕只能用 drop-shadow 跟随形状（box-shadow 会露方角） */
+  filter: drop-shadow(0 4px 5px color-mix(in srgb, var(--ui-primary) 30%, transparent));
+}
+
+/* ===== 进度条（规范只有令牌、无标记示例；与对话框的进程条共用） ===== */
+.mh-steps__progress {
+  height: var(--ui-steps-progress-height);
+  border-radius: var(--ui-radius-full);
+  background: var(--ui-steps-node-undone);
+  overflow: hidden;
+}
+.mh-steps__progress-fill {
+  display: block;
+  height: 100%;
+  border-radius: var(--ui-radius-full);
+  background: var(--ui-primary);
+}
+
+/* ===== 尺寸档（只覆盖令牌，几何规则只有一份） ===== */
+.mh-steps--sm {
+  --ui-steps-node-size: calc(var(--ui-steps-node-size-base) * 0.8);
+  font-size: var(--ui-font-caption);
+}
+.mh-steps--lg {
+  --ui-steps-node-size: calc(var(--ui-steps-node-size-base) * 1.15);
+  font-size: var(--ui-font-heading);
+}

package/dist/styles/components/steps.tokens.css

@@ -0,0 +1,42 @@
+/**
+ * steps —— 单件令牌（**基础值**）。
+ *
+ * 本件自己的几何 / 尺寸 / 色彩槽位；只服务本件，故不随主题进 `@manohub/theme`。
+ *
+ * ## 抽出说明
+ * 本文件从面文件里抽出（原先混写在 `steps.css` 顶部）：这些是**基础值**，锚在
+ * `[data-manohub-ui]` —— 跨包唯一作用域锚，由入口层无条件写在应用容器上，因此**任何落在
+ * 容器里的分件都取得到值**，不再依赖「声明在某个组件根类上」这条脆弱假设
+ * （历史症状：跨件消费的 `--ui-*-group-*` 取不到值，组内间距变 0）。
+ *
+ * ⚠️ `.mh-<件>--<档>` 这类**档位改写**留在面文件的修饰符块里 —— 它们靠「同一元素上两个
+ * 选择器改写同一个令牌」生效，搬到本文件会让档位失效。
+ * ⚠️ 新增组件要登记两处：本文件 + `src/styles/index.css`（见其文件头「五处齐备」）。
+ */
+[data-manohub-ui] {
+  /* bar 档与独立进度条都是**自己的根节点**（无 `.mh-steps` 祖先）—— 靠容器锚取到值 */
+  /* 单件令牌 */
+  /* 基准尺寸与「当前档尺寸」分开：尺寸档要用基准做 calc，直接自引用会构成环形引用
+     （自定义属性引用自身 → 整条在计算值阶段作废 → 连子节点都继承不到） */
+  --ui-steps-node-size-base: 30px;
+  --ui-steps-node-size: var(--ui-steps-node-size-base);
+  --ui-steps-node-undone: var(--ui-base-300); /* 规范 Ne05 未开始底（节点内也是白字，不是灰字） */
+  --ui-steps-node-text: var(--ui-base-100); /* 反白字：序号 / 勾 / 图标 */
+  --ui-steps-node-icon-size: 16px;
+  --ui-steps-node-bg: var(--ui-primary); /* 规范是近乎平色的主色渐变（#2a83ff→#2a87ff），本仓取主色平色 */
+  --ui-steps-connector-length: 58.383px; /* 规范实测最小段长（其余由 flex 撑开） */
+  --ui-steps-connector-width: 2px;
+  --ui-steps-connector-arrow: 6px;
+  /* 连接线沿用 base-400：设计稿里**只有三个向导页**画了连接线（`#cdd2de`），而向导页已判定为旧稿；
+     四个品牌页没有步骤条样张 → 按「未覆盖槽位沿用现值并注明」处理，不做推测性改动。 */
+  --ui-steps-connector-line: var(--ui-base-400);
+  --ui-steps-connector-line-active: var(--ui-primary); /* 规范 #4999fe */
+  --ui-steps-title-gap: var(--ui-space-3); /* 节点与标题间距 12 */
+  --ui-steps-seg-width: 140px;
+  --ui-steps-seg-height: 30px;
+  --ui-steps-seg-overlap: 10px; /* 相邻段重叠（燕尾尖咬合） */
+  --ui-steps-seg-bg: var(--ui-base-200); /* 规范 #e9edf7 */
+  --ui-steps-seg-bg-active: var(--ui-primary);
+  --ui-steps-seg-text-active: var(--ui-base-100);
+  --ui-steps-progress-height: 9px; /* 规范令牌；供进度条形态用 */
+}

package/dist/styles/components/switch.css

@@ -0,0 +1,165 @@
+/**
+ * Switch —— 开关（两档尺寸：表格档 36×18 / 表单档 50×24）。
+ *
+ * 出处：`@aihub/theme` 的 `playground/components/switch.css` 与 `src/components/switch.css`
+ * （轨道 36×18、滑块 14、内距 2；表单档 50×24、滑块 18、内距 3；未选中底 Ne04、选中主色；
+ *  文字与轨道间距 10；禁用整体降透明 0.5）。
+ *
+ * **结构固定**：`input` →（可选）`__label` → `__track > __knob` —— 轨道用**通用兄弟** `~` 命中，
+ * 因为文字可以夹在开关与轨道之间（规范的结构如此），用相邻兄弟 `+` 会漏。
+ *
+ * 状态三源等价：原生 `input:checked`（零 JS）/ 组件下发 `[data-state='checked']` / 静态档 `.is-checked`。
+ *
+ * **焦点环画在可见轨道上**（隐身开关没有可见焦点），外扩 2px —— 轨道自身无边框，内缩会吃掉滑块。
+ */
+.mh-switch {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ui-switch-label-gap);
+  cursor: pointer;
+}
+/* 隐身开关（1px 盒 + clip-path + appearance:none，与 checkbox / radio 同配方）：
+   不用 display:none / visibility:hidden —— 那会把键盘与读屏一起关掉。 */
+.mh-switch__input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  clip-path: inset(50%);
+  appearance: none;
+  pointer-events: none;
+}
+.mh-switch__label {
+  font-size: var(--ui-font-caption);
+  line-height: var(--ui-line-caption);
+  color: var(--ui-base-content);
+}
+.mh-switch__track {
+  position: relative;
+  flex: none;
+  width: var(--ui-switch-track-w);
+  height: var(--ui-switch-track-h);
+  border-radius: var(--ui-radius-full);
+  background: var(--ui-switch-off-bg);
+  transition: background-color 0.15s ease;
+}
+.mh-switch__knob {
+  position: absolute;
+  top: var(--ui-switch-inset);
+  left: var(--ui-switch-inset);
+  width: var(--ui-switch-knob);
+  height: var(--ui-switch-knob);
+  border-radius: var(--ui-radius-full);
+  background: var(--ui-base-100);
+  box-shadow: var(--ui-shadow-card);
+  transition: transform 0.15s ease;
+}
+
+/* 选中：三源等价（滑动量 = 轨道宽 − 滑块 − 2×内距，不写死数值） */
+.mh-switch.is-checked .mh-switch__track,
+.mh-switch[data-state='checked'] .mh-switch__track,
+.mh-switch > .mh-switch__input:checked ~ .mh-switch__track {
+  background: var(--ui-switch-on-bg);
+}
+.mh-switch.is-checked .mh-switch__knob,
+.mh-switch[data-state='checked'] .mh-switch__knob,
+.mh-switch > .mh-switch__input:checked ~ .mh-switch__track .mh-switch__knob {
+  transform: translateX(
+    calc(var(--ui-switch-track-w) - var(--ui-switch-knob) - 2 * var(--ui-switch-inset))
+  );
+}
+
+/* 键盘焦点环画在轨道上（外扩 2px） */
+.mh-switch > .mh-switch__input:focus-visible ~ .mh-switch__track {
+  outline: 2px solid var(--ui-primary);
+  outline-offset: 2px;
+}
+
+/* 禁用：整行不可点 + 整体降透明（原生 disabled 与静态档同款） */
+.mh-switch.is-disabled,
+.mh-switch:has(.mh-switch__input:disabled) {
+  opacity: var(--ui-switch-disabled-opacity);
+  cursor: not-allowed;
+}
+
+/* ===== 尺寸档：sm 28×14 / lg 50×24（只覆盖令牌，不重写几何） ===== */
+.mh-switch--sm {
+  --ui-switch-track-w: 28px;
+  --ui-switch-track-h: 14px;
+  --ui-switch-knob: 10px;
+  --ui-switch-inset: 2px;
+}
+.mh-switch--form,
+.mh-switch--lg {
+  --ui-switch-track-w: 50px;
+  --ui-switch-track-h: 24px;
+  --ui-switch-knob: 18px;
+  --ui-switch-inset: 3px;
+}
+
+/* ===== 文字位置：用 flex `order` 翻转，不做 DOM 重排 =====
+ * 换 DOM 顺序会让上面那条 `input:checked ~ track` 兄弟规则立刻失效。 */
+.mh-switch--label-right > .mh-switch__label {
+  order: 1;
+}
+
+/* ===== 轨道内文案（iOS 式：选中时靠左让出滑块，未选中时靠右） ===== */
+.mh-switch--with-text {
+  --ui-switch-track-w: 46px;
+}
+.mh-switch--sm.mh-switch--with-text {
+  --ui-switch-track-w: 38px;
+}
+.mh-switch--lg.mh-switch--with-text {
+  --ui-switch-track-w: 56px;
+}
+.mh-switch__track-text {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  font-size: 11px;
+  line-height: 1;
+  color: var(--ui-base-100);
+  white-space: nowrap;
+  pointer-events: none;
+}
+.mh-switch.is-checked .mh-switch__track-text,
+.mh-switch[data-state='checked'] .mh-switch__track-text,
+.mh-switch > .mh-switch__input:checked ~ .mh-switch__track .mh-switch__track-text {
+  left: calc(var(--ui-switch-inset) + 2px);
+  right: calc(var(--ui-switch-knob) + 2 * var(--ui-switch-inset));
+  justify-content: flex-start;
+}
+.mh-switch:not(.is-checked) .mh-switch__track-text {
+  left: calc(var(--ui-switch-knob) + 2 * var(--ui-switch-inset));
+  right: calc(var(--ui-switch-inset) + 2px);
+  justify-content: flex-end;
+}
+
+/* ===== 加载：轨道内转圈（同时置原生 disabled，真正吞掉点击） ===== */
+.mh-switch__spinner {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 10px;
+  height: 10px;
+  margin: -5px 0 0 -5px;
+  border: 1.5px solid var(--ui-base-100);
+  border-top-color: transparent;
+  border-radius: var(--ui-radius-full);
+  animation: mh-switch-spin 0.8s linear infinite;
+}
+@keyframes mh-switch-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+.mh-switch.is-loading {
+  cursor: progress;
+}

package/dist/styles/components/switch.tokens.css

@@ -0,0 +1,26 @@
+/**
+ * switch —— 单件令牌（**基础值**）。
+ *
+ * 本件自己的几何 / 尺寸 / 色彩槽位；只服务本件，故不随主题进 `@manohub/theme`。
+ *
+ * ## 抽出说明
+ * 本文件从面文件里抽出（原先混写在 `switch.css` 顶部）：这些是**基础值**，锚在
+ * `[data-manohub-ui]` —— 跨包唯一作用域锚，由入口层无条件写在应用容器上，因此**任何落在
+ * 容器里的分件都取得到值**，不再依赖「声明在某个组件根类上」这条脆弱假设
+ * （历史症状：跨件消费的 `--ui-*-group-*` 取不到值，组内间距变 0）。
+ *
+ * ⚠️ `.mh-<件>--<档>` 这类**档位改写**留在面文件的修饰符块里 —— 它们靠「同一元素上两个
+ * 选择器改写同一个令牌」生效，搬到本文件会让档位失效。
+ * ⚠️ 新增组件要登记两处：本文件 + `src/styles/index.css`（见其文件头「五处齐备」）。
+ */
+[data-manohub-ui] {
+  /* 单件令牌 */
+  --ui-switch-track-w: 36px; /* 规范表格档 */
+  --ui-switch-track-h: 18px;
+  --ui-switch-knob: 14px;
+  --ui-switch-inset: 2px;
+  --ui-switch-label-gap: 10px; /* 规范实测 */
+  --ui-switch-off-bg: var(--ui-base-400); /* Ne04 */
+  --ui-switch-on-bg: var(--ui-primary);
+  --ui-switch-disabled-opacity: 0.5; /* 规范禁用透明度 */
+}