@manohub/ui 0.10.4 → 1.0.0

package/dist/styles/components/capsule.css

@@ -1,128 +1,128 @@
-/**
- * Capsule —— 胶囊选择器（一组互斥选项，选中项白底胶囊浮在轨道上）。
- *
- * 出处：`@aihub/theme` 的 `playground/components/capsule.css` 与 `src/components/capsule.css`
- * （轨道 32 高 / 内距 2 / 项 28 高 / 项内距 14 / 字号 14 / 圆角全；选中 = 白底 + 主色字 + medium +
- *  1px 4px 主色投影；未选字 Te05、滑过转主色、禁用 Te07；轨道底 Au04）。
- *
- * **外形档**（`shape`）：规范只有「圆角全」的胶囊形态；`.mh-capsule--square` 是**本仓新增**的圆角矩形档
- * （与方角控件并排排版时用），圆角取**复选框档**令牌 `--ui-radius-sm`（比控件档更方，具体值随主题变）。
- * 两档只差圆角令牌一处，其余几何与颜色一律不变。
- *
- * **操作是原生的**：一组同名 radio —— 开关与项**平级相邻、开关在前**，开关由本族隐身但保持可聚焦
- * （Tab 进组、方向键换项、空格选中）。焦点环画在可见项上。
- *
- * 状态三源等价：原生 `input:checked` / 组件下发 `[data-state='active']` / 静态档 `.is-selected`。
- *
- * **与面板组合**：要「选中即切面板」，把本件塞进 `Tabs` 的 `selector` 插槽即可 ——
- * 面板显隐由 `Tabs` 按受控值下发 `hidden`，本族不认识它、它也不认识本族（两层零互指）。
- *
- * **与 `Tabs` 的判据**：`Tabs` 是操作层的**骨架**（只给根、面板组与收起态，不带面），
- * 面可由本件或按钮族的分段形态担任；本件是**带自己轨道与选中胶囊的轻量选择控件**。
- *
- * **轨道按内容宽收缩，不被父级拉宽**（缺省档口径的第二半）—— `align-self: flex-start` 就是为这条而写：
- * 父级若是**列向弹性**（典型是 `Tabs` 的根 `.mh-tabs`），交叉轴缺省 `stretch` 会把唯一的子项拉成通栏，
- * 轨道底随之变成一条长胶囊（实测：内容 112px 的轨道被拉到 638px）；`TabBar` 同样被拉满，但它规范里
- * 第 1 条就是「不画轨线」，没有底色，肉眼看不出来。要**主动**撑满仍然走 `block` 档 —— 那条
- * `width: 100%` 是显式宽度，`align-self` 管不着它（撑满与否只由 `block` 决定）。
- */
-.mh-capsule {
-  display: inline-flex;
-  /* 缺省不吃父级交叉轴的拉伸（理由见上）；`align-self` 只对弹性子项生效，独立使用无副作用 */
-  align-self: flex-start;
-  align-items: center;
-  gap: 0; /* 胶囊相邻无间隙 */
-  min-height: var(--ui-capsule-height);
-  padding: var(--ui-capsule-inset);
-  border-radius: var(--ui-capsule-radius);
-  background: var(--ui-capsule-track-bg);
-}
-
-/* 隐身开关：视觉隐藏但保持可聚焦（1px 盒 + clip-path，同 checkbox / radio 配方） */
-.mh-capsule__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; /* 别让这 1px 盒抢走轨道上的点击 */
-}
-
-.mh-capsule__item {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  height: var(--ui-capsule-item-height);
-  padding: 0 var(--ui-capsule-item-padding-x);
-  border: none;
-  border-radius: var(--ui-capsule-radius);
-  background: transparent;
-  font-family: inherit;
-  font-size: var(--ui-capsule-font-size);
-  line-height: var(--ui-line-body);
-  color: var(--ui-capsule-text);
-  cursor: pointer;
-  user-select: none;
-}
-
-/* 滑过：未选项文字转主色滑过档（白底项保持自己的字色） */
-.mh-capsule__item:hover,
-.mh-capsule__item.is-hover {
-  color: var(--ui-primary-hover);
-}
-
-/* 键盘焦点环画在可见项上（隐身开关没有可见焦点；环随项自身圆角 = 胶囊形） */
-.mh-capsule__input:focus-visible + .mh-capsule__item {
-  outline: 2px solid var(--ui-primary);
-  outline-offset: -2px;
-}
-
-/* 禁用：原生 disabled 与静态档同款（方向键会自动跳过禁用项，这是原生 radio 组的行为） */
-.mh-capsule__item.is-disabled,
-.mh-capsule__input:disabled + .mh-capsule__item {
-  color: var(--ui-base-content-subtle); /* Te07 */
-  cursor: not-allowed;
-}
-
-/* 选中：白底胶囊 + 主色字 + 投影（三源等价；下划线只属已退役的线性档，本族不画） */
-.mh-capsule__item.is-selected,
-.mh-capsule__item[data-state='active'],
-.mh-capsule__input:checked + .mh-capsule__item {
-  background: var(--ui-capsule-item-bg);
-  color: var(--ui-primary);
-  font-weight: var(--ui-weight-medium);
-  box-shadow: 0 1px 4px color-mix(in srgb, var(--ui-primary) 30%, transparent);
-}
-
-/* ===== 尺寸档（只覆盖令牌，几何规则只有一份） ===== */
-.mh-capsule--sm {
-  --ui-capsule-height: var(--ui-control-height-sm);
-  --ui-capsule-item-height: calc(var(--ui-control-height-sm) - 4px);
-  --ui-capsule-font-size: var(--ui-font-caption);
-}
-.mh-capsule--lg {
-  --ui-capsule-height: var(--ui-control-height-lg);
-  --ui-capsule-item-height: calc(var(--ui-control-height-lg) - 4px);
-  --ui-capsule-font-size: var(--ui-font-body);
-}
-
-/* ===== 外形档（只覆盖圆角令牌，几何与颜色规则只有一份） ===== */
-.mh-capsule--square {
-  --ui-capsule-radius: var(--ui-radius-sm); /* 复选框档：比控件档更方（值随主题变） */
-}
-
-/* ===== 整宽档：每项等分（移动端 / 表单里占满一行） ===== */
-.mh-capsule--block {
-  display: flex;
-  width: 100%;
-}
-.mh-capsule--block > .mh-capsule__item {
-  flex: 1;
-  min-width: 0;
-  justify-content: center;
-}
+/**
+ * Capsule —— 胶囊选择器（一组互斥选项，选中项白底胶囊浮在轨道上）。
+ *
+ * 出处：`@aihub/theme` 的 `playground/components/capsule.css` 与 `src/components/capsule.css`
+ * （轨道 32 高 / 内距 2 / 项 28 高 / 项内距 14 / 字号 14 / 圆角全；选中 = 白底 + 主色字 + medium +
+ *  1px 4px 主色投影；未选字 Te05、滑过转主色、禁用 Te07；轨道底 Au04）。
+ *
+ * **外形档**（`shape`）：规范只有「圆角全」的胶囊形态；`.mh-capsule--square` 是**本仓新增**的圆角矩形档
+ * （与方角控件并排排版时用），圆角取**复选框档**令牌 `--ui-radius-sm`（比控件档更方，具体值随主题变）。
+ * 两档只差圆角令牌一处，其余几何与颜色一律不变。
+ *
+ * **操作是原生的**：一组同名 radio —— 开关与项**平级相邻、开关在前**，开关由本族隐身但保持可聚焦
+ * （Tab 进组、方向键换项、空格选中）。焦点环画在可见项上。
+ *
+ * 状态三源等价：原生 `input:checked` / 组件下发 `[data-state='active']` / 静态档 `.is-selected`。
+ *
+ * **与面板组合**：要「选中即切面板」，把本件塞进 `Tabs` 的 `selector` 插槽即可 ——
+ * 面板显隐由 `Tabs` 按受控值下发 `hidden`，本族不认识它、它也不认识本族（两层零互指）。
+ *
+ * **与 `Tabs` 的判据**：`Tabs` 是操作层的**骨架**（只给根、面板组与收起态，不带面），
+ * 面可由本件或按钮族的分段形态担任；本件是**带自己轨道与选中胶囊的轻量选择控件**。
+ *
+ * **轨道按内容宽收缩，不被父级拉宽**（缺省档口径的第二半）—— `align-self: flex-start` 就是为这条而写：
+ * 父级若是**列向弹性**（典型是 `Tabs` 的根 `.mh-tabs`），交叉轴缺省 `stretch` 会把唯一的子项拉成通栏，
+ * 轨道底随之变成一条长胶囊（实测：内容 112px 的轨道被拉到 638px）；`TabBar` 同样被拉满，但它规范里
+ * 第 1 条就是「不画轨线」，没有底色，肉眼看不出来。要**主动**撑满仍然走 `block` 档 —— 那条
+ * `width: 100%` 是显式宽度，`align-self` 管不着它（撑满与否只由 `block` 决定）。
+ */
+.mh-capsule {
+  display: inline-flex;
+  /* 缺省不吃父级交叉轴的拉伸（理由见上）；`align-self` 只对弹性子项生效，独立使用无副作用 */
+  align-self: flex-start;
+  align-items: center;
+  gap: 0; /* 胶囊相邻无间隙 */
+  min-height: var(--ui-capsule-height);
+  padding: var(--ui-capsule-inset);
+  border-radius: var(--ui-capsule-radius);
+  background: var(--ui-capsule-track-bg);
+}
+
+/* 隐身开关：视觉隐藏但保持可聚焦（1px 盒 + clip-path，同 checkbox / radio 配方） */
+.mh-capsule__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; /* 别让这 1px 盒抢走轨道上的点击 */
+}
+
+.mh-capsule__item {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--ui-capsule-item-height);
+  padding: 0 var(--ui-capsule-item-padding-x);
+  border: none;
+  border-radius: var(--ui-capsule-radius);
+  background: transparent;
+  font-family: inherit;
+  font-size: var(--ui-capsule-font-size);
+  line-height: var(--ui-line-body);
+  color: var(--ui-capsule-text);
+  cursor: pointer;
+  user-select: none;
+}
+
+/* 滑过：未选项文字转主色滑过档（白底项保持自己的字色） */
+.mh-capsule__item:hover,
+.mh-capsule__item.is-hover {
+  color: var(--ui-primary-hover);
+}
+
+/* 键盘焦点环画在可见项上（隐身开关没有可见焦点；环随项自身圆角 = 胶囊形） */
+.mh-capsule__input:focus-visible + .mh-capsule__item {
+  outline: 2px solid var(--ui-primary);
+  outline-offset: -2px;
+}
+
+/* 禁用：原生 disabled 与静态档同款（方向键会自动跳过禁用项，这是原生 radio 组的行为） */
+.mh-capsule__item.is-disabled,
+.mh-capsule__input:disabled + .mh-capsule__item {
+  color: var(--ui-base-content-subtle); /* Te07 */
+  cursor: not-allowed;
+}
+
+/* 选中：白底胶囊 + 主色字 + 投影（三源等价；下划线只属已退役的线性档，本族不画） */
+.mh-capsule__item.is-selected,
+.mh-capsule__item[data-state='active'],
+.mh-capsule__input:checked + .mh-capsule__item {
+  background: var(--ui-capsule-item-bg);
+  color: var(--ui-primary);
+  font-weight: var(--ui-weight-medium);
+  box-shadow: 0 1px 4px color-mix(in srgb, var(--ui-primary) 30%, transparent);
+}
+
+/* ===== 尺寸档（只覆盖令牌，几何规则只有一份） ===== */
+.mh-capsule--sm {
+  --ui-capsule-height: var(--ui-control-height-sm);
+  --ui-capsule-item-height: calc(var(--ui-control-height-sm) - 4px);
+  --ui-capsule-font-size: var(--ui-font-caption);
+}
+.mh-capsule--lg {
+  --ui-capsule-height: var(--ui-control-height-lg);
+  --ui-capsule-item-height: calc(var(--ui-control-height-lg) - 4px);
+  --ui-capsule-font-size: var(--ui-font-body);
+}
+
+/* ===== 外形档（只覆盖圆角令牌，几何与颜色规则只有一份） ===== */
+.mh-capsule--square {
+  --ui-capsule-radius: var(--ui-radius-sm); /* 复选框档：比控件档更方（值随主题变） */
+}
+
+/* ===== 整宽档：每项等分（移动端 / 表单里占满一行） ===== */
+.mh-capsule--block {
+  display: flex;
+  width: 100%;
+}
+.mh-capsule--block > .mh-capsule__item {
+  flex: 1;
+  min-width: 0;
+  justify-content: center;
+}

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

@@ -1,27 +1,27 @@
-/**
- * capsule —— 单件令牌（**基础值**）。
- *
- * 本件自己的几何 / 尺寸 / 色彩槽位；只服务本件，故不随主题进 `@manohub/theme`。
- *
- * ## 抽出说明
- * 本文件从面文件里抽出（原先混写在 `capsule.css` 顶部）：这些是**基础值**，锚在
- * `[data-manohub-ui]` —— 跨包唯一作用域锚，由入口层无条件写在应用容器上，因此**任何落在
- * 容器里的分件都取得到值**，不再依赖「声明在某个组件根类上」这条脆弱假设
- * （历史症状：跨件消费的 `--ui-*-group-*` 取不到值，组内间距变 0）。
- *
- * ⚠️ `.mh-<件>--<档>` 这类**档位改写**留在面文件的修饰符块里 —— 它们靠「同一元素上两个
- * 选择器改写同一个令牌」生效，搬到本文件会让档位失效。
- * ⚠️ 新增组件要登记两处：本文件 + `src/styles/index.css`（见其文件头「五处齐备」）。
- */
-[data-manohub-ui] {
-  /* 单件令牌（项高 28 + 内距 2×2 = 轨道 32，与规范实测一致） */
-  --ui-capsule-height: 32px;
-  --ui-capsule-item-height: 28px;
-  --ui-capsule-inset: 2px; /* 规范实测 2（本仓间距刻度从 4 起，取 4 会让轨道变 36，故按实测值给） */
-  --ui-capsule-item-padding-x: 14px; /* 规范实测（项宽 84 = 14 + 文字 56 + 14） */
-  --ui-capsule-font-size: var(--ui-font-body); /* 规范字号档 md（14）对位 */
-  --ui-capsule-track-bg: var(--ui-primary-weak); /* 规范 Au04 轨道底 */
-  --ui-capsule-item-bg: var(--ui-base-100); /* 选中 = 白底 */
-  --ui-capsule-text: var(--ui-base-content-muted); /* 未选 Te05 */
-  --ui-capsule-radius: var(--ui-radius-full); /* 缺省胶囊形；方形档覆盖为复选框档（见「外形档」） */
-}
+/**
+ * capsule —— 单件令牌（**基础值**）。
+ *
+ * 本件自己的几何 / 尺寸 / 色彩槽位；只服务本件，故不随主题进 `@manohub/theme`。
+ *
+ * ## 抽出说明
+ * 本文件从面文件里抽出（原先混写在 `capsule.css` 顶部）：这些是**基础值**，锚在
+ * `[data-manohub-ui]` —— 跨包唯一作用域锚，由入口层无条件写在应用容器上，因此**任何落在
+ * 容器里的分件都取得到值**，不再依赖「声明在某个组件根类上」这条脆弱假设
+ * （历史症状：跨件消费的 `--ui-*-group-*` 取不到值，组内间距变 0）。
+ *
+ * ⚠️ `.mh-<件>--<档>` 这类**档位改写**留在面文件的修饰符块里 —— 它们靠「同一元素上两个
+ * 选择器改写同一个令牌」生效，搬到本文件会让档位失效。
+ * ⚠️ 新增组件要登记两处：本文件 + `src/styles/index.css`（见其文件头「五处齐备」）。
+ */
+[data-manohub-ui] {
+  /* 单件令牌（项高 28 + 内距 2×2 = 轨道 32，与规范实测一致） */
+  --ui-capsule-height: 32px;
+  --ui-capsule-item-height: 28px;
+  --ui-capsule-inset: 2px; /* 规范实测 2（本仓间距刻度从 4 起，取 4 会让轨道变 36，故按实测值给） */
+  --ui-capsule-item-padding-x: 14px; /* 规范实测（项宽 84 = 14 + 文字 56 + 14） */
+  --ui-capsule-font-size: var(--ui-font-body); /* 规范字号档 md（14）对位 */
+  --ui-capsule-track-bg: var(--ui-primary-weak); /* 规范 Au04 轨道底 */
+  --ui-capsule-item-bg: var(--ui-base-100); /* 选中 = 白底 */
+  --ui-capsule-text: var(--ui-base-content-muted); /* 未选 Te05 */
+  --ui-capsule-radius: var(--ui-radius-full); /* 缺省胶囊形；方形档覆盖为复选框档（见「外形档」） */
+}