@manohub/ui 0.10.4 → 1.0.0

package/dist/styles/components/switch.css

@@ -1,165 +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;
-}
+/**
+ * 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

@@ -1,26 +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; /* 规范禁用透明度 */
-}
+/**
+ * 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; /* 规范禁用透明度 */
+}