@manohub/ui 0.10.5 → 1.0.1

package/dist/styles/components/tabbar.css

@@ -1,235 +1,235 @@
-/**
- * TabBar —— 页签条（下划线指示条 + 禁用 + 「更多」页签）。
- *
- * 出处：`@aihub/theme` 的 `playground/components/tabbar.css` 与 `src/components/tabbar.css`
- * （区高 26 / 项间距 30 / 字号 14 / 指示条高 3、距文字 3、两端与文字同宽 / 未选字 `#446a9f` /
- *  滑过 `#529dff` / 选中 `#4e94ff` / 禁用 Te07）。
- *
- * 三条必须照做的几何（做错一眼就歪）：
- *
- * 1. **不画轨线**：规范明确警告 —— 页签区没有底边框，选中只由指示条表达；加轨线会扣走区高 1px。
- *    「像不像页签」全靠那道 3px 指示条，不靠一条横线。
- * 2. **指示条是每个项自己的伪元素**（`::after`），不是一条共享滑块：所有项的指示条常驻，未选 `opacity:0; scale:.75`，
- *    选中转 `opacity:1; scale:1` —— "滑过去"的观感来自这两个属性的过渡（`display` 直切补间不了）。
- * 3. **文字贴底**：项高 26 = 文字框 20 + 留白 3 + 指示条 3，故 `align-items:flex-end` +
- *    `padding-bottom = indicator-gap + indicator-height`。少了这段内距，指示条会压在字上。
- *
- * **三源等价**（本仓通例）：原生 `:checked +` / 组件下发 `[data-state='active']` / 静态档 `.is-selected`
- * 指向同一份声明 —— 原生态给零 JS 用法（原生 radio 互斥 + ← → 换页签），组件态给受控值。
- */
-.mh-tabbar {
-  display: flex;
-  align-items: flex-end;
-  gap: var(--ui-tabbar-gap);
-  height: var(--ui-tabbar-height);
-  flex-shrink: 0;
-}
-
-.mh-tabbar__tab {
-  position: relative;
-  display: inline-flex;
-  align-items: flex-end;
-  height: 100%;
-  padding: 0 0 calc(var(--ui-tabbar-indicator-gap) + var(--ui-tabbar-indicator-height));
-  border: none;
-  background: transparent;
-  font-family: inherit;
-  font-size: var(--ui-tabbar-font-size);
-  line-height: var(--ui-line-body);
-  color: var(--ui-tabbar-text);
-  cursor: pointer;
-  white-space: nowrap;
-}
-/* 指示条：常驻、与文字同宽（不内缩），靠 opacity + scale 过渡出"滑动感" */
-.mh-tabbar__tab::after {
-  content: '';
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  height: var(--ui-tabbar-indicator-height);
-  border-radius: var(--ui-tabbar-indicator-radius);
-  background: var(--ui-tabbar-indicator);
-  opacity: 0;
-  scale: 0.75;
-  transition-property: opacity, scale;
-  transition-duration: 0.15s;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.mh-tabbar__tab:hover {
-  color: var(--ui-tabbar-text-hover);
-}
-.mh-tabbar__tab:active {
-  color: var(--ui-tabbar-text-active);
-}
-
-/* 选中（三源等价）：字转主色 + 中粗，指示条亮起 */
-.mh-tabbar__tab.is-selected,
-.mh-tabbar__tab[data-state='active'],
-.mh-tabbar > input:checked + .mh-tabbar__tab {
-  color: var(--ui-tabbar-text-active);
-  font-weight: var(--ui-weight-medium);
-}
-.mh-tabbar__tab.is-selected::after,
-.mh-tabbar__tab[data-state='active']::after,
-.mh-tabbar > input:checked + .mh-tabbar__tab::after {
-  opacity: 1;
-  scale: 1;
-}
-
-/* 禁用（三源等价）：字转弱、不可点 */
-.mh-tabbar__tab.is-disabled,
-.mh-tabbar__tab:disabled,
-.mh-tabbar > input:disabled + .mh-tabbar__tab {
-  color: var(--ui-tabbar-text-disabled);
-  cursor: not-allowed;
-}
-.mh-tabbar__tab.is-disabled::after,
-.mh-tabbar__tab:disabled::after,
-.mh-tabbar > input:disabled + .mh-tabbar__tab::after {
-  opacity: 0;
-}
-
-/* 「更多」页签：文字 + 转向箭头（字形来自 `@manohub/icon`，本层只排布） */
-.mh-tabbar__tab--more {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--ui-space-1);
-}
-
-/* 原生路径的隐身开关：可聚焦但不可见（焦点环画在可见的项上） */
-.mh-tabbar > 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-tabbar__tab:focus-visible,
-.mh-tabbar > input:focus-visible + .mh-tabbar__tab {
-  outline: 2px solid var(--ui-primary);
-  outline-offset: -2px;
-}
-
-/* ===== 居中档：页签少、要撑满整行时用 ===== */
-.mh-tabbar--centered {
-  justify-content: center;
-}
-
-/* ===== 尺寸档（只覆盖令牌） ===== */
-.mh-tabbar--sm {
-  --ui-tabbar-height: var(--ui-control-height-sm);
-  --ui-tabbar-font-size: var(--ui-font-caption);
-  --ui-tabbar-gap: var(--ui-space-6);
-}
-.mh-tabbar--lg {
-  --ui-tabbar-height: var(--ui-control-height-lg);
-  --ui-tabbar-font-size: var(--ui-font-heading);
-}
-
-/* ===== 选项卡形态（type="card"） =====
- * 与内容区连成一体：页签有边框与浅底，选中项转白底 + 顶部主色条；
- * 底边刻意不画 —— 让内容区自己的上边框接上（面板的 bordered 档就是为此）。 */
-.mh-tabbar--card {
-  align-items: flex-end;
-  gap: var(--ui-space-1);
-  height: auto;
-}
-.mh-tabbar--card .mh-tabbar__tab {
-  align-items: center;
-  height: var(--ui-tabbar-height);
-  padding: 0 var(--ui-tabbar-card-padding-x);
-  border: 1px solid var(--ui-base-300);
-  border-bottom: none;
-  border-radius: var(--ui-radius-control) var(--ui-radius-control) 0 0;
-  background: var(--ui-base-200);
-  color: var(--ui-base-content-muted);
-}
-/* 卡片档不画指示条：选中由底色与顶边表达（两套选中语汇叠在一起会互相打架） */
-.mh-tabbar--card .mh-tabbar__tab::after {
-  content: none;
-}
-.mh-tabbar--card .mh-tabbar__tab:hover {
-  color: var(--ui-primary);
-}
-.mh-tabbar--card .mh-tabbar__tab.is-selected,
-.mh-tabbar--card .mh-tabbar__tab[data-state='active'],
-.mh-tabbar--card > input:checked + .mh-tabbar__tab {
-  background: var(--ui-base-100);
-  color: var(--ui-primary);
-  box-shadow: inset 0 2px 0 var(--ui-primary);
-}
-.mh-tabbar--card .mh-tabbar__tab.is-disabled {
-  background: var(--ui-base-200);
-  color: var(--ui-tabbar-text-disabled);
-}
-
-/* ===== 关闭位 =====
- * 页签自己是 `<button>`，所以关闭位用 `<span role="button">`（按钮里嵌按钮是非法 HTML）；
- * 线上档的文字是「贴底」的，故关闭位要自己把底部内距补回来才与文字同一水平线。 */
-.mh-tabbar__close {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  align-self: center;
-  flex: none;
-  width: 16px;
-  height: 16px;
-  margin-bottom: calc(var(--ui-tabbar-indicator-gap) + var(--ui-tabbar-indicator-height));
-  margin-left: var(--ui-space-1);
-  border-radius: var(--ui-radius-full);
-  color: inherit;
-  cursor: pointer;
-  opacity: 0.5;
-  transition: opacity 0.15s ease, background-color 0.15s ease;
-}
-.mh-tabbar--card .mh-tabbar__close {
-  margin-bottom: 0;
-}
-.mh-tabbar__close > svg {
-  width: 12px;
-  height: 12px;
-}
-.mh-tabbar__close:hover {
-  opacity: 1;
-  background: rgb(0 0 0 / 0.08);
-}
-
-/* ===== 新增位 ===== */
-.mh-tabbar__add {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex: none;
-  width: var(--ui-tabbar-height);
-  height: var(--ui-tabbar-height);
-  padding: 0;
-  border: none;
-  border-radius: var(--ui-radius-control);
-  background: transparent;
-  color: var(--ui-base-content-muted);
-  cursor: pointer;
-  transition: background-color 0.15s ease, color 0.15s ease;
-}
-.mh-tabbar__add > svg {
-  width: var(--ui-font-icon); /* 常规图标档 */
-  height: var(--ui-font-icon);
-}
-/* 「更多」的折叠箭头：改前无声明、掉到 `<svg>` 默认 16 —— 与新增位同取常规图标档 */
-.mh-tabbar__tab--more > svg {
-  width: var(--ui-font-icon);
-  height: var(--ui-font-icon);
-}
-.mh-tabbar__add:hover {
-  background: var(--ui-base-200);
-  color: var(--ui-primary);
-}
+/**
+ * TabBar —— 页签条（下划线指示条 + 禁用 + 「更多」页签）。
+ *
+ * 出处：`@aihub/theme` 的 `playground/components/tabbar.css` 与 `src/components/tabbar.css`
+ * （区高 26 / 项间距 30 / 字号 14 / 指示条高 3、距文字 3、两端与文字同宽 / 未选字 `#446a9f` /
+ *  滑过 `#529dff` / 选中 `#4e94ff` / 禁用 Te07）。
+ *
+ * 三条必须照做的几何（做错一眼就歪）：
+ *
+ * 1. **不画轨线**：规范明确警告 —— 页签区没有底边框，选中只由指示条表达；加轨线会扣走区高 1px。
+ *    「像不像页签」全靠那道 3px 指示条，不靠一条横线。
+ * 2. **指示条是每个项自己的伪元素**（`::after`），不是一条共享滑块：所有项的指示条常驻，未选 `opacity:0; scale:.75`，
+ *    选中转 `opacity:1; scale:1` —— "滑过去"的观感来自这两个属性的过渡（`display` 直切补间不了）。
+ * 3. **文字贴底**：项高 26 = 文字框 20 + 留白 3 + 指示条 3，故 `align-items:flex-end` +
+ *    `padding-bottom = indicator-gap + indicator-height`。少了这段内距，指示条会压在字上。
+ *
+ * **三源等价**（本仓通例）：原生 `:checked +` / 组件下发 `[data-state='active']` / 静态档 `.is-selected`
+ * 指向同一份声明 —— 原生态给零 JS 用法（原生 radio 互斥 + ← → 换页签），组件态给受控值。
+ */
+.mh-tabbar {
+  display: flex;
+  align-items: flex-end;
+  gap: var(--ui-tabbar-gap);
+  height: var(--ui-tabbar-height);
+  flex-shrink: 0;
+}
+
+.mh-tabbar__tab {
+  position: relative;
+  display: inline-flex;
+  align-items: flex-end;
+  height: 100%;
+  padding: 0 0 calc(var(--ui-tabbar-indicator-gap) + var(--ui-tabbar-indicator-height));
+  border: none;
+  background: transparent;
+  font-family: inherit;
+  font-size: var(--ui-tabbar-font-size);
+  line-height: var(--ui-line-body);
+  color: var(--ui-tabbar-text);
+  cursor: pointer;
+  white-space: nowrap;
+}
+/* 指示条：常驻、与文字同宽（不内缩），靠 opacity + scale 过渡出"滑动感" */
+.mh-tabbar__tab::after {
+  content: '';
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: var(--ui-tabbar-indicator-height);
+  border-radius: var(--ui-tabbar-indicator-radius);
+  background: var(--ui-tabbar-indicator);
+  opacity: 0;
+  scale: 0.75;
+  transition-property: opacity, scale;
+  transition-duration: 0.15s;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.mh-tabbar__tab:hover {
+  color: var(--ui-tabbar-text-hover);
+}
+.mh-tabbar__tab:active {
+  color: var(--ui-tabbar-text-active);
+}
+
+/* 选中（三源等价）：字转主色 + 中粗，指示条亮起 */
+.mh-tabbar__tab.is-selected,
+.mh-tabbar__tab[data-state='active'],
+.mh-tabbar > input:checked + .mh-tabbar__tab {
+  color: var(--ui-tabbar-text-active);
+  font-weight: var(--ui-weight-medium);
+}
+.mh-tabbar__tab.is-selected::after,
+.mh-tabbar__tab[data-state='active']::after,
+.mh-tabbar > input:checked + .mh-tabbar__tab::after {
+  opacity: 1;
+  scale: 1;
+}
+
+/* 禁用（三源等价）：字转弱、不可点 */
+.mh-tabbar__tab.is-disabled,
+.mh-tabbar__tab:disabled,
+.mh-tabbar > input:disabled + .mh-tabbar__tab {
+  color: var(--ui-tabbar-text-disabled);
+  cursor: not-allowed;
+}
+.mh-tabbar__tab.is-disabled::after,
+.mh-tabbar__tab:disabled::after,
+.mh-tabbar > input:disabled + .mh-tabbar__tab::after {
+  opacity: 0;
+}
+
+/* 「更多」页签：文字 + 转向箭头（字形来自 `@manohub/icon`，本层只排布） */
+.mh-tabbar__tab--more {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ui-space-1);
+}
+
+/* 原生路径的隐身开关：可聚焦但不可见（焦点环画在可见的项上） */
+.mh-tabbar > 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-tabbar__tab:focus-visible,
+.mh-tabbar > input:focus-visible + .mh-tabbar__tab {
+  outline: 2px solid var(--ui-primary);
+  outline-offset: -2px;
+}
+
+/* ===== 居中档：页签少、要撑满整行时用 ===== */
+.mh-tabbar--centered {
+  justify-content: center;
+}
+
+/* ===== 尺寸档（只覆盖令牌） ===== */
+.mh-tabbar--sm {
+  --ui-tabbar-height: var(--ui-control-height-sm);
+  --ui-tabbar-font-size: var(--ui-font-caption);
+  --ui-tabbar-gap: var(--ui-space-6);
+}
+.mh-tabbar--lg {
+  --ui-tabbar-height: var(--ui-control-height-lg);
+  --ui-tabbar-font-size: var(--ui-font-heading);
+}
+
+/* ===== 选项卡形态（type="card"） =====
+ * 与内容区连成一体：页签有边框与浅底，选中项转白底 + 顶部主色条；
+ * 底边刻意不画 —— 让内容区自己的上边框接上（面板的 bordered 档就是为此）。 */
+.mh-tabbar--card {
+  align-items: flex-end;
+  gap: var(--ui-space-1);
+  height: auto;
+}
+.mh-tabbar--card .mh-tabbar__tab {
+  align-items: center;
+  height: var(--ui-tabbar-height);
+  padding: 0 var(--ui-tabbar-card-padding-x);
+  border: 1px solid var(--ui-base-300);
+  border-bottom: none;
+  border-radius: var(--ui-radius-control) var(--ui-radius-control) 0 0;
+  background: var(--ui-base-200);
+  color: var(--ui-base-content-muted);
+}
+/* 卡片档不画指示条：选中由底色与顶边表达（两套选中语汇叠在一起会互相打架） */
+.mh-tabbar--card .mh-tabbar__tab::after {
+  content: none;
+}
+.mh-tabbar--card .mh-tabbar__tab:hover {
+  color: var(--ui-primary);
+}
+.mh-tabbar--card .mh-tabbar__tab.is-selected,
+.mh-tabbar--card .mh-tabbar__tab[data-state='active'],
+.mh-tabbar--card > input:checked + .mh-tabbar__tab {
+  background: var(--ui-base-100);
+  color: var(--ui-primary);
+  box-shadow: inset 0 2px 0 var(--ui-primary);
+}
+.mh-tabbar--card .mh-tabbar__tab.is-disabled {
+  background: var(--ui-base-200);
+  color: var(--ui-tabbar-text-disabled);
+}
+
+/* ===== 关闭位 =====
+ * 页签自己是 `<button>`，所以关闭位用 `<span role="button">`（按钮里嵌按钮是非法 HTML）；
+ * 线上档的文字是「贴底」的，故关闭位要自己把底部内距补回来才与文字同一水平线。 */
+.mh-tabbar__close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  align-self: center;
+  flex: none;
+  width: 16px;
+  height: 16px;
+  margin-bottom: calc(var(--ui-tabbar-indicator-gap) + var(--ui-tabbar-indicator-height));
+  margin-left: var(--ui-space-1);
+  border-radius: var(--ui-radius-full);
+  color: inherit;
+  cursor: pointer;
+  opacity: 0.5;
+  transition: opacity 0.15s ease, background-color 0.15s ease;
+}
+.mh-tabbar--card .mh-tabbar__close {
+  margin-bottom: 0;
+}
+.mh-tabbar__close > svg {
+  width: 12px;
+  height: 12px;
+}
+.mh-tabbar__close:hover {
+  opacity: 1;
+  background: rgb(0 0 0 / 0.08);
+}
+
+/* ===== 新增位 ===== */
+.mh-tabbar__add {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: var(--ui-tabbar-height);
+  height: var(--ui-tabbar-height);
+  padding: 0;
+  border: none;
+  border-radius: var(--ui-radius-control);
+  background: transparent;
+  color: var(--ui-base-content-muted);
+  cursor: pointer;
+  transition: background-color 0.15s ease, color 0.15s ease;
+}
+.mh-tabbar__add > svg {
+  width: var(--ui-font-icon); /* 常规图标档 */
+  height: var(--ui-font-icon);
+}
+/* 「更多」的折叠箭头：改前无声明、掉到 `<svg>` 默认 16 —— 与新增位同取常规图标档 */
+.mh-tabbar__tab--more > svg {
+  width: var(--ui-font-icon);
+  height: var(--ui-font-icon);
+}
+.mh-tabbar__add:hover {
+  background: var(--ui-base-200);
+  color: var(--ui-primary);
+}

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

@@ -1,30 +1,30 @@
-/**
- * tabs —— 单件令牌（**基础值**）。
- *
- * 本件自己的几何 / 尺寸 / 色彩槽位；只服务本件，故不随主题进 `@manohub/theme`。
- *
- * ## 抽出说明
- * 本文件从面文件里抽出（原先混写在 `tabbar.css` 顶部）：这些是**基础值**，锚在
- * `[data-manohub-ui]` —— 跨包唯一作用域锚，由入口层无条件写在应用容器上，因此**任何落在
- * 容器里的分件都取得到值**，不再依赖「声明在某个组件根类上」这条脆弱假设
- * （历史症状：跨件消费的 `--ui-*-group-*` 取不到值，组内间距变 0）。
- *
- * ⚠️ `.mh-<件>--<档>` 这类**档位改写**留在面文件的修饰符块里 —— 它们靠「同一元素上两个
- * 选择器改写同一个令牌」生效，搬到本文件会让档位失效。
- * ⚠️ 新增组件要登记两处：本文件 + `src/styles/index.css`（见其文件头「五处齐备」）。
- */
-[data-manohub-ui] {
-  /* 单件令牌 */
-  --ui-tabbar-height: var(--ui-control-height-md); /* 标准控件高 32 */
-  --ui-tabbar-gap: 30px; /* 项间距（规范实测） */
-  --ui-tabbar-font-size: var(--ui-font-body);
-  --ui-tabbar-text: var(--ui-base-content); /* 规范未选档 #446a9f（偏蓝的正文色），本仓取正文色 */
-  --ui-tabbar-text-hover: var(--ui-primary-hover); /* 规范 #529dff */
-  --ui-tabbar-text-active: var(--ui-primary); /* 规范 #4e94ff */
-  --ui-tabbar-text-disabled: var(--ui-base-content-subtle); /* 规范 Te07 */
-  --ui-tabbar-indicator: var(--ui-primary);
-  --ui-tabbar-indicator-gap: 3px; /* 指示条与文字的留白 */
-  --ui-tabbar-indicator-height: 3px;
-  --ui-tabbar-indicator-radius: var(--ui-radius-full);
-  --ui-tabbar-card-padding-x: var(--ui-space-4);
-}
+/**
+ * tabs —— 单件令牌（**基础值**）。
+ *
+ * 本件自己的几何 / 尺寸 / 色彩槽位；只服务本件，故不随主题进 `@manohub/theme`。
+ *
+ * ## 抽出说明
+ * 本文件从面文件里抽出（原先混写在 `tabbar.css` 顶部）：这些是**基础值**，锚在
+ * `[data-manohub-ui]` —— 跨包唯一作用域锚，由入口层无条件写在应用容器上，因此**任何落在
+ * 容器里的分件都取得到值**，不再依赖「声明在某个组件根类上」这条脆弱假设
+ * （历史症状：跨件消费的 `--ui-*-group-*` 取不到值，组内间距变 0）。
+ *
+ * ⚠️ `.mh-<件>--<档>` 这类**档位改写**留在面文件的修饰符块里 —— 它们靠「同一元素上两个
+ * 选择器改写同一个令牌」生效，搬到本文件会让档位失效。
+ * ⚠️ 新增组件要登记两处：本文件 + `src/styles/index.css`（见其文件头「五处齐备」）。
+ */
+[data-manohub-ui] {
+  /* 单件令牌 */
+  --ui-tabbar-height: var(--ui-control-height-md); /* 标准控件高 32 */
+  --ui-tabbar-gap: 30px; /* 项间距（规范实测） */
+  --ui-tabbar-font-size: var(--ui-font-body);
+  --ui-tabbar-text: var(--ui-base-content); /* 规范未选档 #446a9f（偏蓝的正文色），本仓取正文色 */
+  --ui-tabbar-text-hover: var(--ui-primary-hover); /* 规范 #529dff */
+  --ui-tabbar-text-active: var(--ui-primary); /* 规范 #4e94ff */
+  --ui-tabbar-text-disabled: var(--ui-base-content-subtle); /* 规范 Te07 */
+  --ui-tabbar-indicator: var(--ui-primary);
+  --ui-tabbar-indicator-gap: 3px; /* 指示条与文字的留白 */
+  --ui-tabbar-indicator-height: 3px;
+  --ui-tabbar-indicator-radius: var(--ui-radius-full);
+  --ui-tabbar-card-padding-x: var(--ui-space-4);
+}