@manohub/ui 0.10.5 → 1.0.1

package/dist/styles/components/radio.css

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

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

@@ -1,34 +1,34 @@
-/**
- * Search —— 搜索框（输入框 + 可选搜索按钮的**组合件面**）。
- *
- * 本面**只声明「一行里怎么摆」**：输入框那一段的面归 `input.css`（框 / 内距 / 清除位 /
- * 聚焦态 / 禁用态全套复用），搜索按钮的面归 `button.css`。本件因此没有自己的几何令牌，
- * 也不重画任何控件的框 —— 两份输入框几何必然在改令牌时漂开。
- *
- * 两条摆法：
- * - 输入框 `flex: 1 1 auto` + `min-width: 0`：输入框自带 `width: 100%`，在 flex 行里
- *   必须允许收缩，否则会把同行的搜索按钮挤出容器（窄栏里尤其明显）；
- * - 搜索按钮 `flex: none`：它永远是「那么大」，宽度让给输入框。
- *
- * **按钮是可选的**：不传 `searchText` 时本件只渲染输入框（框内的放大镜已占住「搜索」语义，
- * 再出一个同字形的图标按钮就是同一个意思画两遍）。此时 `__btn` 那条摆法规则无对象，
- * 输入框自然占满整行——摆法不用改，缺了按钮也不留空档。
- *
- * **类名与面文件名同根**：`.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;
-}
+/**
+ * Search —— 搜索框（输入框 + 可选搜索按钮的**组合件面**）。
+ *
+ * 本面**只声明「一行里怎么摆」**：输入框那一段的面归 `input.css`（框 / 内距 / 清除位 /
+ * 聚焦态 / 禁用态全套复用），搜索按钮的面归 `button.css`。本件因此没有自己的几何令牌，
+ * 也不重画任何控件的框 —— 两份输入框几何必然在改令牌时漂开。
+ *
+ * 两条摆法：
+ * - 输入框 `flex: 1 1 auto` + `min-width: 0`：输入框自带 `width: 100%`，在 flex 行里
+ *   必须允许收缩，否则会把同行的搜索按钮挤出容器（窄栏里尤其明显）；
+ * - 搜索按钮 `flex: none`：它永远是「那么大」，宽度让给输入框。
+ *
+ * **按钮是可选的**：不传 `searchText` 时本件只渲染输入框（框内的放大镜已占住「搜索」语义，
+ * 再出一个同字形的图标按钮就是同一个意思画两遍）。此时 `__btn` 那条摆法规则无对象，
+ * 输入框自然占满整行——摆法不用改，缺了按钮也不留空档。
+ *
+ * **类名与面文件名同根**：`.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;
+}