@manohub/ui 0.10.4 → 1.0.0

package/dist/styles/components/checkbox.css

@@ -1,145 +1,145 @@
-/**
- * Checkbox —— 复选框（真实 input 负责可访问性，方块自绘，状态走 data-state 协议）。
- *
- * 几何取自设计稿《MH后台-0911》`控件` 画布的三枚原子件（逐个实测）：
- * - `表单/checkbox/0`（`0:4101`）：14×14 / 白底 / 边 `#dcdcdc` / **r3**；
- * - `表单/checkbox/1`（`0:4098`）：14×14 / `#2660ff` 实底 / 白勾；
- * - `表单/checkbox/0.5`（`0:4095`）：14×14 / `#2660ff` 实底 / 白横杠（半选）。
- *
- * **标准档是 14**（改前为 16 —— 设计稿那枚 14 正好是本包原来的 `sm` 档，档位整体挪了一格）。
- * 勾图标 **10px**：白勾在设计里占 8×6，其对角线 ≈ 10，恰好是 14 框体内的视觉满宽。
- *
- * **框体圆角走主题的 `--ui-radius-xs`（3px）**，不再是本件写死的字面量 ——
- * 改前这里硬编码 4px，把 `farris` 主题声明的 3px 彻底挡住（该主题注释还写着「复选框框体 3px ✓」，
- * 实际从未生效）。框体边取 `--ui-base-400`：设计让勾选框比容器线深一档（`#dcdcdc` vs `#e6e6e6`），
- * 否则 14px 的小方块在浅底上看不见。
- *
- * 档位只覆盖令牌、不复制规则体（与 `Switch` 同一口径）。
- * 勾 / 横杠一律由内容承载，框体只管底与边：勾取 `@manohub/icon` 的 `check` 字形，
- * 半选取一条横杠；**未选态靠框体的 `color: transparent` 让 currentColor 图标隐形** ——
- * 不需要 `::after` 描画，也不需要为三态各备一套 DOM。
- */
-.mh-checkbox {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--ui-checkbox-label-gap);
-  font-size: var(--ui-font-body);
-  line-height: var(--ui-line-body);
-  color: var(--ui-base-content);
-  cursor: pointer;
-  user-select: none;
-}
-
-.mh-checkbox__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-checkbox__box {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex: none;
-  width: var(--ui-checkbox-size);
-  height: var(--ui-checkbox-size);
-  border: 1px solid var(--ui-base-400);
-  border-radius: var(--ui-checkbox-radius);
-  background: var(--ui-base-100);
-  /* 未选：字色透明 → currentColor 的勾与横杠自然隐形（同一份 DOM 覆盖三态） */
-  color: transparent;
-  transition-property: background-color, border-color, color, box-shadow;
-  transition-duration: 0.15s;
-  transition-timing-function: ease;
-}
-
-.mh-checkbox__icon {
-  flex: none;
-  width: var(--ui-checkbox-icon-size);
-  height: var(--ui-checkbox-icon-size);
-}
-
-/* ===== 尺寸档（只覆盖令牌） ===== */
-.mh-checkbox--sm {
-  --ui-checkbox-size: var(--ui-checkbox-size-sm);
-  --ui-checkbox-icon-size: var(--ui-checkbox-icon-size-sm);
-  font-size: var(--ui-font-caption);
-}
-.mh-checkbox--lg {
-  --ui-checkbox-size: var(--ui-checkbox-size-lg);
-  --ui-checkbox-icon-size: var(--ui-checkbox-icon-size-lg);
-}
-
-/*
- * 选中 / 半选：填充**主色**，勾与横杠用 currentColor 绘制。
- *
- * 全库"选中"只有主色一种表达 —— 一屏里会出现「蓝色开关 + 蓝色表格勾选列（复用本件）
- * + 蓝色勾选框」同一种叫法；`@aihub/theme` 的 checkbox 口径也是「已选择背景取主色」。
- * 要再引入中性面填充，做成 `tone` 的第二档（如 `tone="neutral"`），**不要**把默认改回深色。
- */
-.mh-checkbox__box[data-state='checked'],
-.mh-checkbox__box[data-state='indeterminate'] {
-  background: var(--ui-primary);
-  border-color: var(--ui-primary);
-  color: var(--ui-primary-content);
-}
-
-.mh-checkbox__dash {
-  width: 8px;
-  height: 2px;
-  border-radius: 1px;
-  background: currentColor;
-}
-
-/* 滑过：未选才补边色（选中态已经有满色底，再变色只会闪） */
-.mh-checkbox:hover .mh-checkbox__box {
-  border-color: var(--ui-primary);
-}
-.mh-checkbox__box[data-state='checked'],
-.mh-checkbox__box[data-state='indeterminate'] {
-  border-color: var(--ui-primary);
-}
-
-/* 键盘焦点环画在可见框体上（隐身开关没有可见焦点）。
-   必须是 `:focus-visible`（与 `.mh-radio` / `.mh-switch` 的轨道同一写法）：用 `:focus-within` 的话
-   鼠标点一下也会亮 —— 在表格勾选列里就表现为「框体 1px 边框 + 外面再一圈」，看着像两层 border。 */
-.mh-checkbox > .mh-checkbox__input:focus-visible + .mh-checkbox__box {
-  outline: 2px solid var(--ui-primary-weak);
-  outline-offset: 2px;
-}
-
-.mh-checkbox.is-disabled {
-  cursor: not-allowed;
-  color: var(--ui-base-content-subtle);
-}
-
-.mh-checkbox.is-disabled .mh-checkbox__box {
-  background: var(--ui-base-200);
-  border-color: var(--ui-base-300);
-  color: var(--ui-base-content-subtle);
-}
-
-.mh-checkbox.is-disabled:hover .mh-checkbox__box {
-  border-color: var(--ui-base-300);
-}
-
-/* ===== 多选组（表驱动；横向缺省换行，vertical 走纵向） ===== */
-.mh-checkbox__group {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--ui-space-2) var(--ui-space-4);
-  align-items: center;
-}
-.mh-checkbox__group--vertical {
-  flex-direction: column;
-  align-items: flex-start;
-  gap: var(--ui-space-2);
-}
+/**
+ * Checkbox —— 复选框（真实 input 负责可访问性，方块自绘，状态走 data-state 协议）。
+ *
+ * 几何取自设计稿《MH后台-0911》`控件` 画布的三枚原子件（逐个实测）：
+ * - `表单/checkbox/0`（`0:4101`）：14×14 / 白底 / 边 `#dcdcdc` / **r3**；
+ * - `表单/checkbox/1`（`0:4098`）：14×14 / `#2660ff` 实底 / 白勾；
+ * - `表单/checkbox/0.5`（`0:4095`）：14×14 / `#2660ff` 实底 / 白横杠（半选）。
+ *
+ * **标准档是 14**（改前为 16 —— 设计稿那枚 14 正好是本包原来的 `sm` 档，档位整体挪了一格）。
+ * 勾图标 **10px**：白勾在设计里占 8×6，其对角线 ≈ 10，恰好是 14 框体内的视觉满宽。
+ *
+ * **框体圆角走主题的 `--ui-radius-xs`（3px）**，不再是本件写死的字面量 ——
+ * 改前这里硬编码 4px，把 `farris` 主题声明的 3px 彻底挡住（该主题注释还写着「复选框框体 3px ✓」，
+ * 实际从未生效）。框体边取 `--ui-base-400`：设计让勾选框比容器线深一档（`#dcdcdc` vs `#e6e6e6`），
+ * 否则 14px 的小方块在浅底上看不见。
+ *
+ * 档位只覆盖令牌、不复制规则体（与 `Switch` 同一口径）。
+ * 勾 / 横杠一律由内容承载，框体只管底与边：勾取 `@manohub/icon` 的 `check` 字形，
+ * 半选取一条横杠；**未选态靠框体的 `color: transparent` 让 currentColor 图标隐形** ——
+ * 不需要 `::after` 描画，也不需要为三态各备一套 DOM。
+ */
+.mh-checkbox {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ui-checkbox-label-gap);
+  font-size: var(--ui-font-body);
+  line-height: var(--ui-line-body);
+  color: var(--ui-base-content);
+  cursor: pointer;
+  user-select: none;
+}
+
+.mh-checkbox__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-checkbox__box {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: var(--ui-checkbox-size);
+  height: var(--ui-checkbox-size);
+  border: 1px solid var(--ui-base-400);
+  border-radius: var(--ui-checkbox-radius);
+  background: var(--ui-base-100);
+  /* 未选：字色透明 → currentColor 的勾与横杠自然隐形（同一份 DOM 覆盖三态） */
+  color: transparent;
+  transition-property: background-color, border-color, color, box-shadow;
+  transition-duration: 0.15s;
+  transition-timing-function: ease;
+}
+
+.mh-checkbox__icon {
+  flex: none;
+  width: var(--ui-checkbox-icon-size);
+  height: var(--ui-checkbox-icon-size);
+}
+
+/* ===== 尺寸档（只覆盖令牌） ===== */
+.mh-checkbox--sm {
+  --ui-checkbox-size: var(--ui-checkbox-size-sm);
+  --ui-checkbox-icon-size: var(--ui-checkbox-icon-size-sm);
+  font-size: var(--ui-font-caption);
+}
+.mh-checkbox--lg {
+  --ui-checkbox-size: var(--ui-checkbox-size-lg);
+  --ui-checkbox-icon-size: var(--ui-checkbox-icon-size-lg);
+}
+
+/*
+ * 选中 / 半选：填充**主色**，勾与横杠用 currentColor 绘制。
+ *
+ * 全库"选中"只有主色一种表达 —— 一屏里会出现「蓝色开关 + 蓝色表格勾选列（复用本件）
+ * + 蓝色勾选框」同一种叫法；`@aihub/theme` 的 checkbox 口径也是「已选择背景取主色」。
+ * 要再引入中性面填充，做成 `tone` 的第二档（如 `tone="neutral"`），**不要**把默认改回深色。
+ */
+.mh-checkbox__box[data-state='checked'],
+.mh-checkbox__box[data-state='indeterminate'] {
+  background: var(--ui-primary);
+  border-color: var(--ui-primary);
+  color: var(--ui-primary-content);
+}
+
+.mh-checkbox__dash {
+  width: 8px;
+  height: 2px;
+  border-radius: 1px;
+  background: currentColor;
+}
+
+/* 滑过：未选才补边色（选中态已经有满色底，再变色只会闪） */
+.mh-checkbox:hover .mh-checkbox__box {
+  border-color: var(--ui-primary);
+}
+.mh-checkbox__box[data-state='checked'],
+.mh-checkbox__box[data-state='indeterminate'] {
+  border-color: var(--ui-primary);
+}
+
+/* 键盘焦点环画在可见框体上（隐身开关没有可见焦点）。
+   必须是 `:focus-visible`（与 `.mh-radio` / `.mh-switch` 的轨道同一写法）：用 `:focus-within` 的话
+   鼠标点一下也会亮 —— 在表格勾选列里就表现为「框体 1px 边框 + 外面再一圈」，看着像两层 border。 */
+.mh-checkbox > .mh-checkbox__input:focus-visible + .mh-checkbox__box {
+  outline: 2px solid var(--ui-primary-weak);
+  outline-offset: 2px;
+}
+
+.mh-checkbox.is-disabled {
+  cursor: not-allowed;
+  color: var(--ui-base-content-subtle);
+}
+
+.mh-checkbox.is-disabled .mh-checkbox__box {
+  background: var(--ui-base-200);
+  border-color: var(--ui-base-300);
+  color: var(--ui-base-content-subtle);
+}
+
+.mh-checkbox.is-disabled:hover .mh-checkbox__box {
+  border-color: var(--ui-base-300);
+}
+
+/* ===== 多选组（表驱动；横向缺省换行，vertical 走纵向） ===== */
+.mh-checkbox__group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--ui-space-2) var(--ui-space-4);
+  align-items: center;
+}
+.mh-checkbox__group--vertical {
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--ui-space-2);
+}

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

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