@manohub/ui 0.6.0

package/dist/styles/components/radio.css

@@ -0,0 +1,271 @@
+/**
+ * Radio —— 单选族的面：普通单选组（`Radio.Group`）+ 卡片式单选组（`Radio.Card`），两形态共用一个文件。
+ *
+ * - `Radio` / `Radio.Group`：一行一个选项 + 组容器，类根 `.mh-radio*`
+ * - `Radio.Card`：一个选项一张卡、整卡可点，类根 `.mh-radio-card*`
+ *
+ * **为什么同面**：两者是**同一个件的两种组形态**，共用同一套状态协议（选中 / 禁用 / 键盘焦点）
+ * 与同一套「框体 + 圆点」几何，差别只在承载形态；拆成两份必然让同一族的选中 / 禁用语义各自漂。
+ * 合一后圆点配方只有一处（面二自绘，与面一的框体同色同档），且 `radio.css` 与
+ * `components/radio/` 仍是标准的「一组件一面」（护栏 `contract-class-surface.spec.ts`）。
+ *
+ * ===== 面一：`Radio`（普通单选组）=====
+ *
+ * 出处：`@aihub/theme` 的 `playground/components/radio.css` 与其令牌 `src/components/checkbox.css`
+ * （框体实测、单选为胶囊、未选边框 Ne04、滑过 Th05、选中主色圆点、禁用 Ne05 + Te07、选项间距 16 / 10）。
+ *
+ * **与 `Radio.Card` 的判据**：选项只有一行文字（或极短说明）→ 面一；
+ * 选项需要标题 + 描述 + 整卡可点（卡片式选择）→ 面二。
+ * **与 `Capsule` 的判据**：要「按钮形态的分组」→ `Capsule`（本面不实现按钮档，避免两套平铺控件）。
+ *
+ * **与复选框同族**：圆点由 `border` 从 1px 补间到圆点档画成（盒定尺，无布局位移），
+ * 不走字形 mask —— 这是规范的做法（勾/横杠才需要 mask）。
+ *
+ * **尺寸三档只覆盖令牌**（`--ui-radio-size*` / `--ui-radio-dot*`），几何规则只有一份。
+ *
+ * **状态三源等价**（本仓通例）：原生 `input:checked` / 组件下发 `[data-state]` / 静态档 `.is-*`
+ * 指向同一份声明，不写第二份面。
+ *
+ * 边界（有意不做）：规范 `radio.css` 里的 `.cell-check`（表格选择列）**不在这里实现** ——
+ * 表格选择列归表格族，本面不重复实现（否则会出现两套表格选择列外观）。
+ */
+.mh-radio {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ui-radio-label-gap);
+  font-size: var(--ui-font-body);
+  line-height: var(--ui-line-body);
+  color: var(--ui-base-content);
+  cursor: pointer;
+  user-select: none;
+}
+
+/* 组容器：横向 16 / 纵向 12 */
+.mh-radio-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--ui-space-4);
+}
+.mh-radio-group--vertical {
+  flex-direction: column;
+  gap: var(--ui-space-3);
+}
+
+/* 隐身开关：真实 radio 负责可访问性与键盘，可见框体自绘（同 Checkbox 配方） */
+.mh-radio__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-radio__box {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: var(--ui-radio-size);
+  height: var(--ui-radio-size);
+  border: 1px solid var(--ui-base-400); /* Ne04 未选默认 */
+  border-radius: var(--ui-radius-full); /* 单选为胶囊 */
+  background: var(--ui-base-100);
+  transition-property: border-width, border-color, background-color;
+  transition-duration: 0.15s;
+  transition-timing-function: ease;
+}
+
+/* ===== 尺寸档（只覆盖令牌） ===== */
+.mh-radio--sm {
+  --ui-radio-size: var(--ui-radio-size-sm);
+  --ui-radio-dot: var(--ui-radio-dot-sm);
+  font-size: var(--ui-font-caption);
+}
+.mh-radio--lg {
+  --ui-radio-size: var(--ui-radio-size-lg);
+  --ui-radio-dot: var(--ui-radio-dot-lg);
+}
+
+/* 禁用整行：不可点（原生 disabled 与静态档同款） */
+.mh-radio.is-disabled,
+.mh-radio:has(> .mh-radio__input:disabled) {
+  cursor: not-allowed;
+  color: var(--ui-base-content-subtle);
+}
+
+/* 滑过：未选边框转主色滑过档（Th05） */
+.mh-radio.is-hover .mh-radio__box,
+.mh-radio:hover > .mh-radio__box {
+  border-color: var(--ui-primary-hover);
+}
+
+/* 选中：圆点（主色，随选择控件色）；三源等价 */
+.mh-radio.is-checked .mh-radio__box,
+.mh-radio__box[data-state='checked'],
+.mh-radio > .mh-radio__input:checked + .mh-radio__box {
+  border: var(--ui-radio-dot) solid var(--ui-primary);
+}
+/* 选中后滑过不再改边色（已经是满色圆点，改色只会闪） */
+.mh-radio.is-checked:hover > .mh-radio__box,
+.mh-radio > .mh-radio__input:checked:hover + .mh-radio__box {
+  border-color: var(--ui-primary);
+}
+
+/* 禁用边框（Ne05） */
+.mh-radio.is-disabled .mh-radio__box,
+.mh-radio > .mh-radio__input:disabled + .mh-radio__box {
+  border-color: var(--ui-base-300);
+  background: var(--ui-base-200);
+}
+
+/* 禁用且选中：圆点转 Te07 */
+.mh-radio.is-disabled.is-checked .mh-radio__box,
+.mh-radio > .mh-radio__input:disabled:checked + .mh-radio__box {
+  border-color: var(--ui-base-content-subtle);
+}
+
+/* 键盘焦点环画在可见框体上（隐身开关没有可见焦点） */
+.mh-radio > .mh-radio__input:focus-visible + .mh-radio__box {
+  outline: 2px solid var(--ui-primary-weak);
+  outline-offset: 2px;
+}
+
+.mh-radio__label {
+  min-width: 0;
+}
+
+/* ===== 面二：`Radio.Card`（卡片式单选组，自建）=====
+   一个选项一张卡、整卡可点；选中态由描边 + 浅底 + 圆点三件一起表达（只靠颜色会看不出可点）。
+   真实 input 只保留可访问性与键盘（同 name 成组 ⇒ 方向键即换选），视觉全在卡片上。
+   卡片宽度取 flex 基准 240、上限 360：窄容器自动一列，宽容器两列并排且不无限拉伸。
+   圆点配方与面一同源（16px 框体 + 3px 上边距对齐 22px 行高的首行），色档亦同（主色 / 主色内容）。 */
+
+.mh-radio-card {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--ui-space-3);
+}
+
+.mh-radio-card__item {
+  position: relative;
+  flex: 1 1 240px;
+  max-width: 360px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: flex-start;
+  gap: var(--ui-space-2);
+  padding: var(--ui-space-3) var(--ui-space-4);
+  border: 1px solid var(--ui-base-300);
+  border-radius: var(--ui-radius-md);
+  background: var(--ui-base-100);
+  cursor: pointer;
+  transition: border-color 0.15s, background-color 0.15s;
+}
+
+.mh-radio-card__item:hover {
+  border-color: var(--ui-primary);
+}
+
+.mh-radio-card__item[data-state='checked'] {
+  border-color: var(--ui-primary);
+  background: var(--ui-primary-subtle);
+}
+
+.mh-radio-card__item:focus-within {
+  outline: 2px solid var(--ui-primary-weak);
+  outline-offset: 1px;
+}
+
+.mh-radio-card__item[data-disabled='true'] {
+  cursor: not-allowed;
+  border-color: var(--ui-base-300);
+  background: var(--ui-base-200);
+}
+
+.mh-radio-card__item[data-disabled='true']:hover {
+  border-color: var(--ui-base-300);
+}
+
+/* 原生 radio：视觉由卡片承担（隐藏方式与 Checkbox 同款） */
+
+.mh-radio-card__input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: 0;
+  padding: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.mh-radio-card__radio {
+  position: relative;
+  flex: 0 0 auto;
+  width: 16px;
+  height: 16px;
+  box-sizing: border-box;
+  /* 与标题首行（14px 字 / 22px 行高）视觉居中 */
+  margin-top: 3px;
+  border: 1px solid var(--ui-base-400);
+  border-radius: var(--ui-radius-full);
+  background: var(--ui-base-100);
+  transition: background-color 0.15s, border-color 0.15s;
+}
+
+.mh-radio-card__item[data-state='checked'] .mh-radio-card__radio {
+  border-color: var(--ui-primary);
+  background: var(--ui-primary);
+}
+
+.mh-radio-card__item[data-state='checked'] .mh-radio-card__radio::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  width: 6px;
+  height: 6px;
+  border-radius: var(--ui-radius-full);
+  background: var(--ui-primary-content);
+}
+
+.mh-radio-card__item[data-disabled='true'] .mh-radio-card__radio {
+  border-color: var(--ui-base-400);
+  background: var(--ui-base-200);
+}
+
+.mh-radio-card__body {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.mh-radio-card__label {
+  font-size: var(--ui-font-body);
+  font-weight: var(--ui-weight-medium);
+  color: var(--ui-base-content);
+}
+
+.mh-radio-card__desc {
+  font-size: var(--ui-font-caption);
+  line-height: var(--ui-line-caption);
+  color: var(--ui-base-content-subtle);
+}
+
+.mh-radio-card__item[data-disabled='true'] .mh-radio-card__label,
+.mh-radio-card__item[data-disabled='true'] .mh-radio-card__desc {
+  color: var(--ui-base-content-subtle);
+}
+
+/* ===== 网格档（`columns > 1`）：等宽网格，列数由组件下发 ===== */
+.mh-radio-card--grid {
+  display: grid;
+  grid-template-columns: repeat(var(--ui-radio-card-columns), minmax(0, 1fr));
+}

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

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

package/dist/styles/components/search.css

@@ -0,0 +1,30 @@
+/**
+ * Search —— 搜索框（输入框 + 搜索触发位的**组合件面**）。
+ *
+ * 本面**只声明「一行里怎么摆」**：输入框那一段的面归 `input.css`（框 / 内距 / 清除位 /
+ * 聚焦态 / 禁用态全套复用），搜索按钮的面归 `button.css`。本件因此没有自己的几何令牌，
+ * 也不重画任何控件的框 —— 两份输入框几何必然在改令牌时漂开。
+ *
+ * 两条摆法：
+ * - 输入框 `flex: 1 1 auto` + `min-width: 0`：输入框自带 `width: 100%`，在 flex 行里
+ *   必须允许收缩，否则会把同行的搜索按钮挤出容器（窄栏里尤其明显）；
+ * - 搜索按钮 `flex: none`：它永远是「那么大」，宽度让给输入框。
+ *
+ * **类名与面文件名同根**：`.mh-search*`，一律 `mh-` 前缀。
+ */
+.mh-search {
+  display: flex;
+  align-items: center;
+  gap: var(--ui-space-2);
+  width: 100%;
+  min-width: 0;
+}
+
+.mh-search__input {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.mh-search__btn {
+  flex: none;
+}

package/dist/styles/components/select.css

@@ -0,0 +1,242 @@
+/**
+ * Select —— 选择器族（单选触发器 + 多选标签 + 选项面板 + 搜索行 + 日期格）。
+ *
+ * 出处：`@aihub/theme` 的 `playground/components/select.css` 与 `src/components/select.css`
+ * （触发器同输入框、选项行高 30、内距 8；面板内距 4 + 选项 30；多选标签复用标签族形态；
+ *  日期格 26 方形，选中主色实底、区间 Ne10）。
+ *
+ * **触发器的框不在本件**：触发器 = 输入框的「触发器形态」（TSX 里是 `<Input as="button">`），
+ * 框 / 内距 / 边 / 圆角 / 底 / 字 / hover / 聚焦 / 禁用 / 校验色与**清除位**、**右侧图标位**
+ * 全部归输入面与它的表壳（`.mh-input` + `.mh-input__wrap`）。本件只给选择器自己的排版
+ * （`display` / `gap` / `width` / `text-align` / `overflow` 与值 / 标签），另通过挂在**表壳**上的
+ * `.mh-select-host` 微调两处壳内节奏（间距回到 4px、箭头收敛回 12px）。
+ * **禁写：本件不得再画框**（画了就又开一份会与输入面漂移的规格 —— 这正是本次收敛掉的东西）。
+ *
+ * **面板开合与定位不在本件**：面板是操作层的组合 —— 消费方/组件在面板根并列挂
+ * `class="mh-popup mh-select__panel mh-popup--anchored"`（`data-side` / `data-align` 定位档、
+ * Esc、点外部关闭、顶层渲染全在 `styles/operations/popup.css`）。本件只给**面**
+ * （底 / 圆角 / 内距 / 阴影 / 选项行）。
+ *
+ * **面板宽度跟触发器走**：规范把触发器与面板都钉在 300px，本仓触发器是**流式宽度**
+ * （与 input 同一结论），故面板用 `anchor-size(width)` 取锚点宽。触发器进表壳后，
+ * `popovertarget` 的**隐式锚**只有壳内那个控件那么宽，故这里走**显式锚档**：
+ * 表壳挂 `.mh-popup-anchor`（`anchor-name`）、面板挂 `.mh-popup--anchored`（`position-anchor`），
+ * 锚点即整件；非锚定场景回落到 240px 兜底值。
+ *
+ * **一处有色差异**：规范的选中行是灰底（Ne10），本仓的「选中」统一走**主色浅底**
+ * `--ui-primary-subtle`（与列表 / 树的选中态同一语义槽位），否则悬停（Ne11）与选中（Ne10）两档灰
+ * 在本仓有限的灰阶里挤成同色、看不出选中。
+ *
+ * 选项选中态**三源等价**：原生 `:has(input:checked)`（零 JS 单选路径）/ 组件下发
+ * `[data-state='selected']` / 静态档 `.is-selected`。
+ */
+
+/* ===== 触发器：只留选择器自己的排版（框与状态全归输入面） ===== */
+.mh-select {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ui-space-1);
+  width: 100%;
+  text-align: left;
+  cursor: pointer;
+  overflow: hidden;
+}
+
+/* 表壳上的本件修饰（TSX 把 `mh-select-host` 挂在**表壳**上：`class` 落壳是输入面的既有契约）。 */
+/* ① 壳内间距：输入框的附加位节奏是 8px，选择器自己的是 4px（值 / 标签与清除位、箭头之间） */
+.mh-select-host {
+  gap: var(--ui-space-1);
+}
+/* ② 箭头尺寸：`.mh-input__suffix > svg`（0-1-1）会把槽内图标统一成 16px，而本件箭头是 12px
+   —— 这里以 0-2-0 收敛回来。注意不能在 select.css 里直写 `.mh-input__suffix`：
+   面文件的类名必须与文件词根同根（机械护栏），故走自己的壳修饰类。 */
+.mh-select-host .mh-select__caret {
+  width: var(--ui-select-icon-size);
+  height: var(--ui-select-icon-size);
+}
+
+/* ===== 尺寸档：框的尺寸归输入面，本类只承载选择器自有部位的对档微调 ===== */
+/* 框高 / 字号由 `<Input size>` 下发的 `mh-input--sm` / `--lg` 承担（含表壳的换高）。
+   两处口径要认（都是输入面既有事实，不是本件选择）：
+   ① **左右内距不随档位变**：带壳时内距归表壳（`--ui-input-padding-x` = 12px 恒定），
+      `--ui-input-padding-x-sm/-lg` 只对**裸控件**生效 —— 输入框自己的 sm / lg 实测也是 12px；
+   ② `mh-select--*` 只跟「选择器自己的东西」有关 —— 当前只有标签：小号控件 24px 高，
+      24px 的标签会顶满整件、失去呼吸位，故收 4px。 */
+.mh-select--sm .mh-select__chip {
+  height: calc(var(--ui-select-chip-height) - 4px);
+}
+
+/* 无选中值时的提示文字（组件把 placeholder 渲染进 `__value` 并挂这个修饰类） */
+.mh-select__value {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.mh-select__value--placeholder {
+  color: var(--ui-base-content-subtle);
+}
+/* 下拉箭头：渲染在输入面的**右侧图标位**（`.mh-input__suffix`，表壳的子元素）里 ——
+   位置由表壳的 flex 排布给（控件 `flex: 1 1 auto` 自然把附加位挤到右端），故不再需要 `margin-left: auto`。
+   字形由 @manohub/icon 给；展开转向由 popup.css 的 `.mh-popup-caret` 承担（含触发器进表壳后的兄弟档）；
+   尺寸的 12px 在下面 `mh-select-host` 一节按特异性收敛（槽内 svg 会被输入面统一成 16px）。 */
+.mh-select__caret {
+  flex: none;
+  color: var(--ui-base-content-muted); /* Te07 */
+}
+
+/* ===== 多选：标签 + 收纳（单行不换行，超出由组件算「其他 n 项」） =====
+   清除位不在本件：它是输入面的内建件（`.mh-input__clear`，圆点实底 + 反白叉号），
+   由 `<Input clearable>` 渲染在**表壳**里 —— 与值 / 标签同一行的右端。 */
+.mh-select--multiple {
+  flex-wrap: nowrap;
+}
+.mh-select__chip {
+  display: inline-flex;
+  align-items: center;
+  flex: none;
+  height: var(--ui-select-chip-height);
+  padding: 0 var(--ui-space-2);
+  border-radius: var(--ui-radius-full);
+  background: var(--ui-base-200); /* Ne11 轻量片底 */
+  font-size: var(--ui-select-font-size);
+  color: var(--ui-base-content);
+}
+.mh-select__chip--fold {
+  background: var(--ui-base-200);
+  color: var(--ui-base-content-muted);
+}
+/* ===== 面板皮肤（与操作层并列组合：`class="mh-popup mh-select__panel mh-popup--anchored"`） ===== */
+.mh-select__panel {
+  /* 锚 = `.mh-popup-anchor`（挂在表壳上）→ 面板与**整件**同宽；非锚定场景回落 240 */
+  width: anchor-size(width, 240px);
+  padding: var(--ui-space-1) 0;
+  border-radius: var(--ui-select-radius);
+  background: var(--ui-base-100);
+  /* 锚定浮层的投影走 `--ui-shadow-popover`（**不是** elevated）：两枚令牌按「锚定浮层 vs 居中浮层」
+     分工，default 主题给前者填的是设计实测值（`0:4025` 的 `0 4px 20px rgba(0,14,51,.10)`），
+     farris 主题给的是规范的 `--mh-shadow-lg：14dp 下拉/弹出层` —— 语义与两套来源都对得上。 */
+  box-shadow: var(--ui-shadow-popover);
+}
+
+/* 选项行：滑过 / 选中 / 禁用 / 提示 / 空态 */
+.mh-select__option {
+  position: relative;
+  display: flex;
+  align-items: center;
+  /* **必须显式给宽**：选项是 `<button>`，而按钮的 `width: auto` 解析成「包裹内容宽」
+     （表单控件不参与块级拉伸），不给就会缩成文字那么宽 ——
+     滑过 / 选中的底色只剩一小条，聚焦环也贴着文字。`.mh-select__add` 同理。 */
+  width: 100%;
+  height: var(--ui-select-option-height);
+  padding: 0 var(--ui-select-padding-x);
+  font-size: var(--ui-select-font-size);
+  color: var(--ui-base-content);
+  cursor: pointer;
+}
+/* 零 JS 单选路径的隐身开关（真实 radio 负责键盘与可访问性，高亮画在行上） */
+.mh-select__option > 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-select__option:hover,
+.mh-select__option.is-hover {
+  background: var(--ui-select-option-hover);
+}
+.mh-select__option:has(input:focus-visible) {
+  outline: 2px solid var(--ui-primary);
+  outline-offset: -2px;
+}
+/* 选中：三源等价（原生 / 组件 / 静态档） */
+.mh-select__option.is-selected,
+.mh-select__option[data-state='selected'],
+.mh-select__option:has(input:checked) {
+  background: var(--ui-select-option-selected);
+  color: var(--ui-primary);
+}
+.mh-select__option.is-disabled,
+.mh-select__option[data-disabled='true'],
+.mh-select__option:has(input:disabled) {
+  color: var(--ui-base-content-subtle);
+  cursor: not-allowed;
+}
+.mh-select__option--hint {
+  color: var(--ui-base-content-muted);
+}
+.mh-select__option--empty {
+  color: var(--ui-base-content-muted);
+}
+/* 「创建 xxx」行：搜索词无命中时出现，语义与选项行一致但用主色标出 */
+.mh-select__add {
+  width: 100%;
+  border: none;
+  background: transparent;
+  color: var(--ui-primary);
+  font-family: inherit;
+  text-align: left;
+}
+.mh-select__add:hover,
+.mh-select__add.is-hover {
+  background: var(--ui-select-option-hover);
+}
+
+/* ===== 选项分组（组标题不可点，只做分区；组间距靠分隔线给） ===== */
+.mh-select__group + .mh-select__group,
+.mh-select__group + .mh-select__option {
+  border-top: 1px solid var(--ui-base-200);
+}
+.mh-select__group-label {
+  display: block;
+  padding: var(--ui-space-1) var(--ui-select-padding-x);
+  font-size: var(--ui-select-font-size);
+  color: var(--ui-base-content-muted);
+  cursor: default;
+}
+
+/* 搜索行（选项多于 8 条时由组件渲染） */
+.mh-select__search {
+  padding: var(--ui-space-2) var(--ui-space-2) var(--ui-space-1);
+}
+
+/* ===== 日期格（DatePicker 复用本族面板；选中主色实底、区间浅底） ===== */
+.mh-select__date {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--ui-select-height);
+  height: var(--ui-select-height);
+  border: none;
+  border-radius: var(--ui-radius-control);
+  background: transparent;
+  font-family: inherit;
+  font-size: var(--ui-select-font-size);
+  color: var(--ui-base-content);
+  cursor: pointer;
+}
+.mh-select__date:hover,
+.mh-select__date.is-hover {
+  background: var(--ui-select-option-hover);
+}
+.mh-select__date.is-selected,
+.mh-select__date[data-state='selected'] {
+  background: var(--ui-primary);
+  color: var(--ui-primary-content);
+}
+.mh-select__date.is-range {
+  background: var(--ui-primary-weak);
+}
+.mh-select__date.is-disabled,
+.mh-select__date:disabled {
+  color: var(--ui-base-content-subtle);
+  cursor: not-allowed;
+}

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

@@ -0,0 +1,33 @@
+/**
+ * select —— 单件令牌（**基础值**）。
+ *
+ * 本件自己的几何 / 尺寸 / 色彩槽位；只服务本件，故不随主题进 `@manohub/theme`。
+ *
+ * ## 抽出说明
+ * 本文件从面文件里抽出（原先混写在 `select.css` 顶部）：这些是**基础值**，锚在
+ * `[data-manohub-ui]` —— 跨包唯一作用域锚，由入口层无条件写在应用容器上，因此**任何落在
+ * 容器里的分件都取得到值**，不再依赖「声明在某个组件根类上」这条脆弱假设
+ * （历史症状：跨件消费的 `--ui-*-group-*` 取不到值，组内间距变 0）。
+ *
+ * ⚠️ `.mh-<件>--<档>` 这类**档位改写**留在面文件的修饰符块里 —— 它们靠「同一元素上两个
+ * 选择器改写同一个令牌」生效，搬到本文件会让档位失效。
+ * ⚠️ 新增组件要登记两处：本文件 + `src/styles/index.css`（见其文件头「五处齐备」）。
+ */
+[data-manohub-ui] {
+  /* 本件有三处「跨分件消费」的令牌，改前靠把它们同时声明在下面几个类上兜 —— 现在都靠容器锚取到值：
+     - 表壳 `.mh-select-host`：箭头槽（`.mh-input__suffix`）挂在壳里、**不在控件子树里** ——
+       少了这一条，箭头的 `width: var(--ui-select-icon-size)` 整条作废、会被输入面的槽规则顶成 16px
+       （实测：chrome 里量到 16px 才发现的）；
+     - 面板 `.mh-select__panel`：挂在 `.mh-popup-host` 下、与触发器**兄弟**（不在 `.mh-select`
+       子树里）—— 否则圆角、行高、字号、选中底全失效。 */
+  /* 单件令牌 */
+  --ui-select-height: var(--ui-control-height-md); /* 标准档 32（日期格与面板内部用；触发器的框高归输入面） */
+  --ui-select-padding-x: var(--ui-space-3); /* 12 */
+  --ui-select-radius: var(--ui-radius-md); /* 8：设计 `0:4025` 下拉面板 r8（原注释写 8 但取的是控件档 6） */
+  --ui-select-font-size: var(--ui-font-body); /* 14 */
+  --ui-select-option-height: 36px; /* 设计 `0:4024`：选项行 144×36（原为 34） */
+  --ui-select-option-hover: var(--ui-base-200); /* 设计滑过底 #f2f2f2 */
+  --ui-select-option-selected: var(--ui-primary-subtle); /* 见头部「有色差异」 */
+  --ui-select-chip-height: 24px; /* 多选标签（规范复用标签族 24 档） */
+  --ui-select-icon-size: var(--ui-font-icon); /* 下拉箭头：常规图标档 */
+}

package/dist/styles/components/skeleton.css

@@ -0,0 +1,60 @@
+/**
+ * Skeleton —— 骨架屏（骨架行 / 列表骨架 / 块状骨架）。
+ *
+ * 出处：`@aihub/theme` 的 `playground/components/skeleton.css` 与 `src/components/skeleton.css`
+ * （行高 30 与表格行高一致、圆角 6、行间距 10、shimmer 微光 1.6s ease-in-out）。
+ *
+ * **微光动画与色值在本包只有这一处定义**（`--ui-skeleton-*` + `@keyframes mh-skeleton-shimmer`）：
+ * `query-state.css` 的加载态骨架复用这里的令牌与动画名，不再自带一份 —— 两处各写一份必然漂
+ * （时长/色值改一处漏一处，同一屏出现两种呼吸节奏）。
+ *
+ * 动画降级：`prefers-reduced-motion` 下应压平（本件只声明动画，压平由消费方或后续统一的降级策略负责，
+ * 与 theme 包 `base/motion.css` 的分工一致）。
+ */
+.mh-skeleton {
+  height: var(--ui-skeleton-height);
+  border-radius: var(--ui-skeleton-radius);
+  background: var(--ui-skeleton-bg);
+  animation: var(--ui-skeleton-animation);
+}
+
+/* 行与行之间（纵向列表的默认节奏） */
+.mh-skeleton + .mh-skeleton {
+  margin-top: var(--ui-skeleton-gap);
+}
+
+/* 骨架列表容器：只做纵向排布，不写任何面（行自己的样子由 `.mh-skeleton` 给） */
+.mh-skeleton-list {
+  display: flex;
+  flex-direction: column;
+}
+
+/* 块状骨架：给一段区间的占位（如卡片体 / 详情页），不参与「行间距」节奏 */
+.mh-skeleton--block {
+  height: auto;
+  min-height: var(--ui-skeleton-height);
+}
+
+/* 微光动画（唯一来源；名字带 mh- 前缀防撞） */
+@keyframes mh-skeleton-shimmer {
+  0% {
+    background-color: var(--ui-skeleton-bg);
+  }
+  50% {
+    background-color: var(--ui-skeleton-highlight);
+  }
+  100% {
+    background-color: var(--ui-skeleton-bg);
+  }
+}
+
+/* ===== 胶囊档（标签 / 头像 / 次按钮的占位） ===== */
+.mh-skeleton--round {
+  border-radius: var(--ui-radius-full);
+}
+
+/* ===== 静态档：关掉微光 =====
+ * 静态摆样、截图与打印时用 —— 动着的占位会让截图前后不一致。 */
+.mh-skeleton-list--static .mh-skeleton {
+  animation: none;
+}