@morya-ui/mcp 0.3.1 → 0.3.3

package/data/catalog.json

@@ -1,12 +1,12 @@
 {
-  "generatedAt": "2026-09-23T09:00:38.573Z",
+  "generatedAt": "2026-09-24T08:45:45.036Z",
   "library": {
     "name": "morya-ui",
-    "version": "0.3.1"
+    "version": "0.3.3"
   },
   "mcp": {
     "name": "@morya-ui/mcp",
-    "version": "0.3.1"
+    "version": "0.3.3"
   },
   "components": [
     {
@@ -1406,12 +1406,36 @@
           "default": "false",
           "description": "强制方形纯图标按钮。"
         },
+        {
+          "name": "badge",
+          "type": "string",
+          "default": "—",
+          "description": "徽标文本。"
+        },
+        {
+          "name": "badgeSeverity",
+          "type": "'secondary' | 'info' | 'success' | 'warn' | 'danger' | 'contrast' | null",
+          "default": "null",
+          "description": "徽标语义色。"
+        },
         {
           "name": "severity",
           "type": "'secondary' | 'success' | 'info' | 'warn' | 'help' | 'danger' | 'contrast'",
           "default": "—",
           "description": "语义色。省略时为 primary。"
         },
+        {
+          "name": "color",
+          "type": "string",
+          "default": "—",
+          "description": "自定义颜色，覆盖 `severity`。"
+        },
+        {
+          "name": "size",
+          "type": "'small' | 'large' | 'sm' | 'md' | 'lg'",
+          "default": "—",
+          "description": "尺寸。默认中等；兼容 `sm` / `lg`。"
+        },
         {
           "name": "variant",
           "type": "'outlined' | 'text' | 'link' | 'ghost' | 'quaternary'",
@@ -1436,11 +1460,17 @@
           "default": "false",
           "description": "链接按钮。"
         },
+        {
+          "name": "underline",
+          "type": "boolean",
+          "default": "true",
+          "description": "`link` 悬浮下划线。设为 `false` 可关闭。"
+        },
         {
           "name": "ghost",
           "type": "boolean",
           "default": "false",
-          "description": "透明底按钮。"
+          "description": "浅色填充，等同于 `text` 的悬浮态。"
         },
         {
           "name": "quaternary",
@@ -1449,10 +1479,10 @@
           "description": "极轻量文字按钮。"
         },
         {
-          "name": "color",
-          "type": "string",
-          "default": "—",
-          "description": "自定义颜色，覆盖 `severity`。"
+          "name": "plain",
+          "type": "boolean",
+          "default": "false",
+          "description": "浅色填充，等同于 `outlined` 的悬浮态；也可与 `text` / `outlined` 组合弱化。"
         },
         {
           "name": "raised",
@@ -1466,18 +1496,6 @@
           "default": "false",
           "description": "全圆角。"
         },
-        {
-          "name": "plain",
-          "type": "boolean",
-          "default": "false",
-          "description": "弱化色，常与 `text` / `outlined` 组合。"
-        },
-        {
-          "name": "size",
-          "type": "'small' | 'large' | 'sm' | 'md' | 'lg'",
-          "default": "—",
-          "description": "尺寸。默认中等；兼容 `sm` / `lg`。"
-        },
         {
           "name": "fluid",
           "type": "boolean",
@@ -1497,22 +1515,16 @@
           "description": "禁用。"
         },
         {
-          "name": "badge",
-          "type": "string",
-          "default": "—",
-          "description": "徽标文本。"
-        },
-        {
-          "name": "badgeSeverity",
-          "type": "'secondary' | 'info' | 'success' | 'warn' | 'danger' | 'contrast' | null",
-          "default": "null",
-          "description": "徽标语义色。"
+          "name": "ripple",
+          "type": "boolean",
+          "default": "false",
+          "description": "点击水波纹。设为 `true` 可开启。"
         },
         {
-          "name": "autofocus",
+          "name": "press",
           "type": "boolean",
           "default": "false",
-          "description": "原生 autofocus。"
+          "description": "按下时轻微缩放。设为 `true` 可开启。"
         },
         {
           "name": "nativeType",
@@ -1520,6 +1532,12 @@
           "default": "'button'",
           "description": "原生 button type。"
         },
+        {
+          "name": "autofocus",
+          "type": "boolean",
+          "default": "false",
+          "description": "原生 autofocus。"
+        },
         {
           "name": "ariaLabel",
           "type": "string",
@@ -1592,7 +1610,7 @@
           "sectionId": "styles",
           "lang": "vue",
           "preview": true,
-          "code": "<script setup lang=\"ts\">\nimport { MButton } from 'morya-ui'\n</script>\n\n<template>\n  <div class=\"grid gap-4 w-full\">\n    <div class=\"flex flex-wrap gap-3 items-center\">\n      <MButton label=\"Outlined\" outlined />\n      <MButton label=\"Success\" severity=\"success\" outlined />\n      <MButton label=\"Danger\" severity=\"danger\" outlined />\n    </div>\n    <div class=\"flex flex-wrap gap-3 items-center\">\n      <MButton label=\"Raised\" raised />\n      <MButton label=\"Rounded\" rounded />\n      <MButton label=\"Plain Text\" text plain />\n    </div>\n    <div class=\"flex flex-wrap gap-3 items-center\">\n      <MButton label=\"Small\" size=\"small\" />\n      <MButton label=\"Large\" size=\"large\" />\n      <MButton label=\"Fluid\" fluid />\n    </div>\n  </div>\n</template>",
+          "code": "<script setup lang=\"ts\">\nimport { MButton } from 'morya-ui'\n</script>\n\n<template>\n  <div class=\"grid gap-4 w-full\">\n    <div class=\"flex flex-wrap gap-3 items-center\">\n      <MButton label=\"Outlined\" outlined />\n      <MButton label=\"Success\" severity=\"success\" outlined />\n      <MButton label=\"Danger\" severity=\"danger\" outlined />\n    </div>\n    <div class=\"flex flex-wrap gap-3 items-center\">\n      <MButton label=\"Raised\" raised />\n      <MButton label=\"Rounded\" rounded />\n      <MButton label=\"Plain\" plain />\n      <MButton label=\"Plain Text\" text plain />\n    </div>\n    <div class=\"flex flex-wrap gap-3 items-center\">\n      <MButton label=\"Small\" size=\"small\" />\n      <MButton label=\"Large\" size=\"large\" />\n      <MButton label=\"Fluid\" fluid />\n    </div>\n  </div>\n</template>",
           "locale": "zh-CN"
         },
         {
@@ -1601,7 +1619,7 @@
           "sectionId": "text-link",
           "lang": "vue",
           "preview": true,
-          "code": "<script setup lang=\"ts\">\nimport { MButton } from 'morya-ui'\n</script>\n\n<template>\n  <div class=\"flex flex-wrap gap-3 items-center\">\n    <MButton label=\"Text\" text />\n    <MButton label=\"Text Danger\" text severity=\"danger\" />\n    <MButton label=\"Link\" link />\n    <MButton label=\"Link Secondary\" link severity=\"secondary\" />\n  </div>\n</template>",
+          "code": "<script setup lang=\"ts\">\nimport { MButton } from 'morya-ui'\n</script>\n\n<template>\n  <div class=\"flex flex-wrap gap-3 items-center\">\n    <MButton label=\"Text\" text />\n    <MButton label=\"Text Danger\" text severity=\"danger\" />\n    <MButton label=\"Link\" link />\n    <MButton label=\"Link No Underline\" link :underline=\"false\" />\n    <MButton label=\"Link Secondary\" link severity=\"secondary\" />\n  </div>\n</template>",
           "locale": "zh-CN"
         },
         {
@@ -1682,7 +1700,7 @@
           "sectionId": "styles",
           "lang": "vue",
           "preview": true,
-          "code": "<script setup lang=\"ts\">\nimport { MButton } from 'morya-ui'\n</script>\n\n<template>\n  <div class=\"grid gap-4 w-full\">\n    <div class=\"flex flex-wrap gap-3 items-center\">\n      <MButton label=\"Outlined\" outlined />\n      <MButton label=\"Success\" severity=\"success\" outlined />\n      <MButton label=\"Danger\" severity=\"danger\" outlined />\n    </div>\n    <div class=\"flex flex-wrap gap-3 items-center\">\n      <MButton label=\"Raised\" raised />\n      <MButton label=\"Rounded\" rounded />\n      <MButton label=\"Plain Text\" text plain />\n    </div>\n    <div class=\"flex flex-wrap gap-3 items-center\">\n      <MButton label=\"Small\" size=\"small\" />\n      <MButton label=\"Large\" size=\"large\" />\n      <MButton label=\"Fluid\" fluid />\n    </div>\n  </div>\n</template>",
+          "code": "<script setup lang=\"ts\">\nimport { MButton } from 'morya-ui'\n</script>\n\n<template>\n  <div class=\"grid gap-4 w-full\">\n    <div class=\"flex flex-wrap gap-3 items-center\">\n      <MButton label=\"Outlined\" outlined />\n      <MButton label=\"Success\" severity=\"success\" outlined />\n      <MButton label=\"Danger\" severity=\"danger\" outlined />\n    </div>\n    <div class=\"flex flex-wrap gap-3 items-center\">\n      <MButton label=\"Raised\" raised />\n      <MButton label=\"Rounded\" rounded />\n      <MButton label=\"Plain\" plain />\n      <MButton label=\"Plain Text\" text plain />\n    </div>\n    <div class=\"flex flex-wrap gap-3 items-center\">\n      <MButton label=\"Small\" size=\"small\" />\n      <MButton label=\"Large\" size=\"large\" />\n      <MButton label=\"Fluid\" fluid />\n    </div>\n  </div>\n</template>",
           "locale": "en-US"
         },
         {
@@ -1691,7 +1709,7 @@
           "sectionId": "text-link",
           "lang": "vue",
           "preview": true,
-          "code": "<script setup lang=\"ts\">\nimport { MButton } from 'morya-ui'\n</script>\n\n<template>\n  <div class=\"flex flex-wrap gap-3 items-center\">\n    <MButton label=\"Text\" text />\n    <MButton label=\"Text Danger\" text severity=\"danger\" />\n    <MButton label=\"Link\" link />\n    <MButton label=\"Link Secondary\" link severity=\"secondary\" />\n  </div>\n</template>",
+          "code": "<script setup lang=\"ts\">\nimport { MButton } from 'morya-ui'\n</script>\n\n<template>\n  <div class=\"flex flex-wrap gap-3 items-center\">\n    <MButton label=\"Text\" text />\n    <MButton label=\"Text Danger\" text severity=\"danger\" />\n    <MButton label=\"Link\" link />\n    <MButton label=\"Link No Underline\" link :underline=\"false\" />\n    <MButton label=\"Link Secondary\" link severity=\"secondary\" />\n  </div>\n</template>",
           "locale": "en-US"
         },
         {
@@ -1773,12 +1791,12 @@
             {
               "id": "text-link",
               "title": "Text & Link",
-              "body": "`text` 为轻量文字按钮；`link` 呈现为内联链接样式。二者均可与 `severity` 组合。\n\n```vue preview src=\"./demos/TextAndLink.vue\"\n```"
+              "body": "`text` 为轻量文字按钮；`link` 呈现为无背景的内联链接样式，默认悬浮下划线，设 `:underline=\"false\"` 可关闭。二者均可与 `severity` 组合。\n\n```vue preview src=\"./demos/TextAndLink.vue\"\n```"
             },
             {
               "id": "ghost-quaternary",
               "title": "Ghost & Quaternary",
-              "body": "`ghost` 为透明底 + 描边色文字；`quaternary` 更克制，适合工具栏次要操作。也可通过 `variant` 指定。\n\n```vue preview src=\"./demos/GhostAndQuaternary.vue\"\n```"
+              "body": "`ghost` 为浅色填充，等同于 `text` 的悬浮态；`quaternary` 更克制，适合工具栏次要操作。也可通过 `variant` 指定。\n\n```vue preview src=\"./demos/GhostAndQuaternary.vue\"\n```"
             },
             {
               "id": "button-group",
@@ -1803,7 +1821,7 @@
             {
               "id": "props",
               "title": "Props",
-              "body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `label` | `string` | — | 按钮文案。存在默认插槽内容时以插槽为准。 |\n| `icon` | `IconName \\| Component` | — | 图标名称或自定义组件。 |\n| `iconPos` | `'left' \\| 'right' \\| 'top' \\| 'bottom'` | `'left'` | 图标相对标签的位置。 |\n| `iconOnly` | `boolean` | `false` | 强制方形纯图标按钮。 |\n| `severity` | `'secondary' \\| 'success' \\| 'info' \\| 'warn' \\| 'help' \\| 'danger' \\| 'contrast'` | — | 语义色。省略时为 primary。 |\n| `variant` | `'outlined' \\| 'text' \\| 'link' \\| 'ghost' \\| 'quaternary'` | — | 样式变体快捷方式，等价于对应布尔 prop。 |\n| `outlined` | `boolean` | `false` | 描边按钮。 |\n| `text` | `boolean` | `false` | 文字按钮。 |\n| `link` | `boolean` | `false` | 链接按钮。 |\n| `ghost` | `boolean` | `false` | 透明底按钮。 |\n| `quaternary` | `boolean` | `false` | 极轻量文字按钮。 |\n| `color` | `string` | — | 自定义颜色，覆盖 `severity`。 |\n| `raised` | `boolean` | `false` | 浮起阴影。 |\n| `rounded` | `boolean` | `false` | 全圆角。 |\n| `plain` | `boolean` | `false` | 弱化色，常与 `text` / `outlined` 组合。 |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | 尺寸。默认中等；兼容 `sm` / `lg`。 |\n| `fluid` | `boolean` | `false` | 宽度撑满容器。 |\n| `loading` | `boolean` | `false` | 加载中，禁用点击并显示 spinner。 |\n| `disabled` | `boolean` | `false` | 禁用。 |\n| `badge` | `string` | — | 徽标文本。 |\n| `badgeSeverity` | `'secondary' \\| 'info' \\| 'success' \\| 'warn' \\| 'danger' \\| 'contrast' \\| null` | `null` | 徽标语义色。 |\n| `autofocus` | `boolean` | `false` | 原生 autofocus。 |\n| `nativeType` | `'button' \\| 'submit' \\| 'reset'` | `'button'` | 原生 button type。 |\n| `ariaLabel` | `string` | — | 可访问名称；图标按钮建议提供。 |"
+              "body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `label` | `string` | — | 按钮文案。存在默认插槽内容时以插槽为准。 |\n| `icon` | `IconName \\| Component` | — | 图标名称或自定义组件。 |\n| `iconPos` | `'left' \\| 'right' \\| 'top' \\| 'bottom'` | `'left'` | 图标相对标签的位置。 |\n| `iconOnly` | `boolean` | `false` | 强制方形纯图标按钮。 |\n| `badge` | `string` | — | 徽标文本。 |\n| `badgeSeverity` | `'secondary' \\| 'info' \\| 'success' \\| 'warn' \\| 'danger' \\| 'contrast' \\| null` | `null` | 徽标语义色。 |\n| `severity` | `'secondary' \\| 'success' \\| 'info' \\| 'warn' \\| 'help' \\| 'danger' \\| 'contrast'` | — | 语义色。省略时为 primary。 |\n| `color` | `string` | — | 自定义颜色，覆盖 `severity`。 |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | 尺寸。默认中等；兼容 `sm` / `lg`。 |\n| `variant` | `'outlined' \\| 'text' \\| 'link' \\| 'ghost' \\| 'quaternary'` | — | 样式变体快捷方式，等价于对应布尔 prop。 |\n| `outlined` | `boolean` | `false` | 描边按钮。 |\n| `text` | `boolean` | `false` | 文字按钮。 |\n| `link` | `boolean` | `false` | 链接按钮。 |\n| `underline` | `boolean` | `true` | `link` 悬浮下划线。设为 `false` 可关闭。 |\n| `ghost` | `boolean` | `false` | 浅色填充，等同于 `text` 的悬浮态。 |\n| `quaternary` | `boolean` | `false` | 极轻量文字按钮。 |\n| `plain` | `boolean` | `false` | 浅色填充，等同于 `outlined` 的悬浮态；也可与 `text` / `outlined` 组合弱化。 |\n| `raised` | `boolean` | `false` | 浮起阴影。 |\n| `rounded` | `boolean` | `false` | 全圆角。 |\n| `fluid` | `boolean` | `false` | 宽度撑满容器。 |\n| `loading` | `boolean` | `false` | 加载中，禁用点击并显示 spinner。 |\n| `disabled` | `boolean` | `false` | 禁用。 |\n| `ripple` | `boolean` | `false` | 点击水波纹。设为 `true` 可开启。 |\n| `press` | `boolean` | `false` | 按下时轻微缩放。设为 `true` 可开启。 |\n| `nativeType` | `'button' \\| 'submit' \\| 'reset'` | `'button'` | 原生 button type。 |\n| `autofocus` | `boolean` | `false` | 原生 autofocus。 |\n| `ariaLabel` | `string` | — | 可访问名称；图标按钮建议提供。 |"
             },
             {
               "id": "events",
@@ -1826,7 +1844,7 @@
               "body": "- 渲染原生 `<button>`。\n- 纯图标按钮请设置 `ariaLabel`（或可访问的文本标签）。\n- `loading` 时设置 `aria-busy`，并禁用交互。"
             }
           ],
-          "markdown": "---\ntitle: Button\ncategory: 01 / BASIC\ndescription: 按钮用于触发即时动作。\n---\n\n# Button\n\n按钮用于触发即时动作。\n\n## 引入\n\n```ts\nimport { MButton } from 'morya-ui'\n```\n\n## 基础用法\n\n通过默认插槽或 `label` 展示按钮文案。\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Severity\n\n使用 `severity` 定义按钮语义色；省略时为 primary。\n\n```vue preview src=\"./demos/Severity.vue\"\n```\n\n## Styles\n\n`outlined`、`text`、`link`、`raised`、`rounded`、`plain` 可自由组合。\n\n```vue preview src=\"./demos/Styles.vue\"\n```\n\n## Text & Link\n\n`text` 为轻量文字按钮；`link` 呈现为内联链接样式。二者均可与 `severity` 组合。\n\n```vue preview src=\"./demos/TextAndLink.vue\"\n```\n\n## Ghost & Quaternary\n\n`ghost` 为透明底 + 描边色文字；`quaternary` 更克制，适合工具栏次要操作。也可通过 `variant` 指定。\n\n```vue preview src=\"./demos/GhostAndQuaternary.vue\"\n```\n\n## Button Group\n\n`MButtonGroup` 将相邻按钮拼成一组。\n\n```vue preview src=\"./demos/ButtonGroup.zh.vue\"\n```\n\n## Icons & Badge\n\n支持 `icon`、`iconPos`、`iconOnly`，以及 `badge` 徽标。\n\n```vue preview src=\"./demos/IconsAndBadge.vue\"\n```\n\n## Loading\n\n`loading` 状态下显示 spinner 并阻止点击。\n\n```vue preview src=\"./demos/Loading.vue\"\n```\n\n## Disabled\n\n```vue preview src=\"./demos/Disabled.vue\"\n```\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `label` | `string` | — | 按钮文案。存在默认插槽内容时以插槽为准。 |\n| `icon` | `IconName \\| Component` | — | 图标名称或自定义组件。 |\n| `iconPos` | `'left' \\| 'right' \\| 'top' \\| 'bottom'` | `'left'` | 图标相对标签的位置。 |\n| `iconOnly` | `boolean` | `false` | 强制方形纯图标按钮。 |\n| `severity` | `'secondary' \\| 'success' \\| 'info' \\| 'warn' \\| 'help' \\| 'danger' \\| 'contrast'` | — | 语义色。省略时为 primary。 |\n| `variant` | `'outlined' \\| 'text' \\| 'link' \\| 'ghost' \\| 'quaternary'` | — | 样式变体快捷方式，等价于对应布尔 prop。 |\n| `outlined` | `boolean` | `false` | 描边按钮。 |\n| `text` | `boolean` | `false` | 文字按钮。 |\n| `link` | `boolean` | `false` | 链接按钮。 |\n| `ghost` | `boolean` | `false` | 透明底按钮。 |\n| `quaternary` | `boolean` | `false` | 极轻量文字按钮。 |\n| `color` | `string` | — | 自定义颜色，覆盖 `severity`。 |\n| `raised` | `boolean` | `false` | 浮起阴影。 |\n| `rounded` | `boolean` | `false` | 全圆角。 |\n| `plain` | `boolean` | `false` | 弱化色，常与 `text` / `outlined` 组合。 |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | 尺寸。默认中等；兼容 `sm` / `lg`。 |\n| `fluid` | `boolean` | `false` | 宽度撑满容器。 |\n| `loading` | `boolean` | `false` | 加载中，禁用点击并显示 spinner。 |\n| `disabled` | `boolean` | `false` | 禁用。 |\n| `badge` | `string` | — | 徽标文本。 |\n| `badgeSeverity` | `'secondary' \\| 'info' \\| 'success' \\| 'warn' \\| 'danger' \\| 'contrast' \\| null` | `null` | 徽标语义色。 |\n| `autofocus` | `boolean` | `false` | 原生 autofocus。 |\n| `nativeType` | `'button' \\| 'submit' \\| 'reset'` | `'button'` | 原生 button type。 |\n| `ariaLabel` | `string` | — | 可访问名称；图标按钮建议提供。 |\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `click` | `MouseEvent` | 启用状态下点击触发。 |\n\n## Slots\n\n| 插槽名 | 说明 |\n| --- | --- |\n| `default` | 按钮内容，优先于 `label`。 |\n| `icon` | 自定义图标。 |\n| `loadingicon` | 自定义加载图标。 |\n\n## Instance\n\n| 方法 / 属性 | 说明 |\n| --- | --- |\n| `focus()` | 聚焦底层 button。 |\n| `ref` | 底层 `HTMLButtonElement`。 |\n\n## 无障碍\n\n- 渲染原生 `<button>`。\n- 纯图标按钮请设置 `ariaLabel`（或可访问的文本标签）。\n- `loading` 时设置 `aria-busy`，并禁用交互。\n"
+          "markdown": "---\ntitle: Button\ncategory: 01 / BASIC\ndescription: 按钮用于触发即时动作。\n---\n\n# Button\n\n按钮用于触发即时动作。\n\n## 引入\n\n```ts\nimport { MButton } from 'morya-ui'\n```\n\n## 基础用法\n\n通过默认插槽或 `label` 展示按钮文案。\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Severity\n\n使用 `severity` 定义按钮语义色；省略时为 primary。\n\n```vue preview src=\"./demos/Severity.vue\"\n```\n\n## Styles\n\n`outlined`、`text`、`link`、`raised`、`rounded`、`plain` 可自由组合。\n\n```vue preview src=\"./demos/Styles.vue\"\n```\n\n## Text & Link\n\n`text` 为轻量文字按钮；`link` 呈现为无背景的内联链接样式，默认悬浮下划线，设 `:underline=\"false\"` 可关闭。二者均可与 `severity` 组合。\n\n```vue preview src=\"./demos/TextAndLink.vue\"\n```\n\n## Ghost & Quaternary\n\n`ghost` 为浅色填充，等同于 `text` 的悬浮态；`quaternary` 更克制，适合工具栏次要操作。也可通过 `variant` 指定。\n\n```vue preview src=\"./demos/GhostAndQuaternary.vue\"\n```\n\n## Button Group\n\n`MButtonGroup` 将相邻按钮拼成一组。\n\n```vue preview src=\"./demos/ButtonGroup.zh.vue\"\n```\n\n## Icons & Badge\n\n支持 `icon`、`iconPos`、`iconOnly`，以及 `badge` 徽标。\n\n```vue preview src=\"./demos/IconsAndBadge.vue\"\n```\n\n## Loading\n\n`loading` 状态下显示 spinner 并阻止点击。\n\n```vue preview src=\"./demos/Loading.vue\"\n```\n\n## Disabled\n\n```vue preview src=\"./demos/Disabled.vue\"\n```\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `label` | `string` | — | 按钮文案。存在默认插槽内容时以插槽为准。 |\n| `icon` | `IconName \\| Component` | — | 图标名称或自定义组件。 |\n| `iconPos` | `'left' \\| 'right' \\| 'top' \\| 'bottom'` | `'left'` | 图标相对标签的位置。 |\n| `iconOnly` | `boolean` | `false` | 强制方形纯图标按钮。 |\n| `badge` | `string` | — | 徽标文本。 |\n| `badgeSeverity` | `'secondary' \\| 'info' \\| 'success' \\| 'warn' \\| 'danger' \\| 'contrast' \\| null` | `null` | 徽标语义色。 |\n| `severity` | `'secondary' \\| 'success' \\| 'info' \\| 'warn' \\| 'help' \\| 'danger' \\| 'contrast'` | — | 语义色。省略时为 primary。 |\n| `color` | `string` | — | 自定义颜色，覆盖 `severity`。 |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | 尺寸。默认中等；兼容 `sm` / `lg`。 |\n| `variant` | `'outlined' \\| 'text' \\| 'link' \\| 'ghost' \\| 'quaternary'` | — | 样式变体快捷方式，等价于对应布尔 prop。 |\n| `outlined` | `boolean` | `false` | 描边按钮。 |\n| `text` | `boolean` | `false` | 文字按钮。 |\n| `link` | `boolean` | `false` | 链接按钮。 |\n| `underline` | `boolean` | `true` | `link` 悬浮下划线。设为 `false` 可关闭。 |\n| `ghost` | `boolean` | `false` | 浅色填充，等同于 `text` 的悬浮态。 |\n| `quaternary` | `boolean` | `false` | 极轻量文字按钮。 |\n| `plain` | `boolean` | `false` | 浅色填充，等同于 `outlined` 的悬浮态；也可与 `text` / `outlined` 组合弱化。 |\n| `raised` | `boolean` | `false` | 浮起阴影。 |\n| `rounded` | `boolean` | `false` | 全圆角。 |\n| `fluid` | `boolean` | `false` | 宽度撑满容器。 |\n| `loading` | `boolean` | `false` | 加载中，禁用点击并显示 spinner。 |\n| `disabled` | `boolean` | `false` | 禁用。 |\n| `ripple` | `boolean` | `false` | 点击水波纹。设为 `true` 可开启。 |\n| `press` | `boolean` | `false` | 按下时轻微缩放。设为 `true` 可开启。 |\n| `nativeType` | `'button' \\| 'submit' \\| 'reset'` | `'button'` | 原生 button type。 |\n| `autofocus` | `boolean` | `false` | 原生 autofocus。 |\n| `ariaLabel` | `string` | — | 可访问名称；图标按钮建议提供。 |\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `click` | `MouseEvent` | 启用状态下点击触发。 |\n\n## Slots\n\n| 插槽名 | 说明 |\n| --- | --- |\n| `default` | 按钮内容，优先于 `label`。 |\n| `icon` | 自定义图标。 |\n| `loadingicon` | 自定义加载图标。 |\n\n## Instance\n\n| 方法 / 属性 | 说明 |\n| --- | --- |\n| `focus()` | 聚焦底层 button。 |\n| `ref` | 底层 `HTMLButtonElement`。 |\n\n## 无障碍\n\n- 渲染原生 `<button>`。\n- 纯图标按钮请设置 `ariaLabel`（或可访问的文本标签）。\n- `loading` 时设置 `aria-busy`，并禁用交互。\n"
         },
         "en-US": {
           "title": "Button",
@@ -1860,12 +1878,12 @@
             {
               "id": "text-link",
               "title": "Text & Link",
-              "body": "`text` is a lightweight text button; `link` renders as an inline link style. Both can be combined with `severity`.\n\n```vue preview src=\"./demos/TextAndLink.vue\"\n```"
+              "body": "`text` is a lightweight text button; `link` renders as a backgroundless inline link style with underline on hover by default. Set `:underline=\"false\"` to disable. Both can be combined with `severity`.\n\n```vue preview src=\"./demos/TextAndLink.vue\"\n```"
             },
             {
               "id": "ghost-quaternary",
               "title": "Ghost & Quaternary",
-              "body": "`ghost` is a transparent fill with tinted text; `quaternary` is quieter for secondary toolbar actions. Both can be set via `variant`.\n\n```vue preview src=\"./demos/GhostAndQuaternary.vue\"\n```"
+              "body": "`ghost` is a soft fill matching text hover; `quaternary` is quieter for secondary toolbar actions. Both can be set via `variant`.\n\n```vue preview src=\"./demos/GhostAndQuaternary.vue\"\n```"
             },
             {
               "id": "button-group",
@@ -1890,7 +1908,7 @@
             {
               "id": "props",
               "title": "Props",
-              "body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `label` | `string` | — | Button text. Default slot content takes precedence when present. |\n| `icon` | `IconName \\| Component` | — | Icon name or custom component. |\n| `iconPos` | `'left' \\| 'right' \\| 'top' \\| 'bottom'` | `'left'` | Icon position relative to the label. |\n| `iconOnly` | `boolean` | `false` | Force a square icon-only button. |\n| `severity` | `'secondary' \\| 'success' \\| 'info' \\| 'warn' \\| 'help' \\| 'danger' \\| 'contrast'` | — | Semantic color. Defaults to primary when omitted. |\n| `variant` | `'outlined' \\| 'text' \\| 'link' \\| 'ghost' \\| 'quaternary'` | — | Style variant shortcut, equivalent to the matching boolean prop. |\n| `outlined` | `boolean` | `false` | Outlined button. |\n| `text` | `boolean` | `false` | Text button. |\n| `link` | `boolean` | `false` | Link button. |\n| `ghost` | `boolean` | `false` | Transparent fill. |\n| `quaternary` | `boolean` | `false` | Extra-quiet text button. |\n| `color` | `string` | — | Custom color; overrides `severity`. |\n| `raised` | `boolean` | `false` | Raised shadow. |\n| `rounded` | `boolean` | `false` | Fully rounded. |\n| `plain` | `boolean` | `false` | Muted color; often combined with `text` / `outlined`. |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | Size. Medium by default; `sm` / `lg` aliases supported. |\n| `fluid` | `boolean` | `false` | Stretch to full container width. |\n| `loading` | `boolean` | `false` | Loading state; disables clicks and shows a spinner. |\n| `disabled` | `boolean` | `false` | Disabled. |\n| `badge` | `string` | — | Badge text. |\n| `badgeSeverity` | `'secondary' \\| 'info' \\| 'success' \\| 'warn' \\| 'danger' \\| 'contrast' \\| null` | `null` | Badge semantic color. |\n| `autofocus` | `boolean` | `false` | Native autofocus. |\n| `nativeType` | `'button' \\| 'submit' \\| 'reset'` | `'button'` | Native button type. |\n| `ariaLabel` | `string` | — | Accessible name; recommended for icon-only buttons. |"
+              "body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `label` | `string` | — | Button text. Default slot content takes precedence when present. |\n| `icon` | `IconName \\| Component` | — | Icon name or custom component. |\n| `iconPos` | `'left' \\| 'right' \\| 'top' \\| 'bottom'` | `'left'` | Icon position relative to the label. |\n| `iconOnly` | `boolean` | `false` | Force a square icon-only button. |\n| `badge` | `string` | — | Badge text. |\n| `badgeSeverity` | `'secondary' \\| 'info' \\| 'success' \\| 'warn' \\| 'danger' \\| 'contrast' \\| null` | `null` | Badge semantic color. |\n| `severity` | `'secondary' \\| 'success' \\| 'info' \\| 'warn' \\| 'help' \\| 'danger' \\| 'contrast'` | — | Semantic color. Defaults to primary when omitted. |\n| `color` | `string` | — | Custom color; overrides `severity`. |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | Size. Medium by default; `sm` / `lg` aliases supported. |\n| `variant` | `'outlined' \\| 'text' \\| 'link' \\| 'ghost' \\| 'quaternary'` | — | Style variant shortcut, equivalent to the matching boolean prop. |\n| `outlined` | `boolean` | `false` | Outlined button. |\n| `text` | `boolean` | `false` | Text button. |\n| `link` | `boolean` | `false` | Link button. |\n| `underline` | `boolean` | `true` | Underline on hover for `link`. Set `false` to disable. |\n| `ghost` | `boolean` | `false` | Soft fill matching text hover. |\n| `quaternary` | `boolean` | `false` | Extra-quiet text button. |\n| `plain` | `boolean` | `false` | Soft fill matching outlined hover; can also mute `text` / `outlined`. |\n| `raised` | `boolean` | `false` | Raised shadow. |\n| `rounded` | `boolean` | `false` | Fully rounded. |\n| `fluid` | `boolean` | `false` | Stretch to full container width. |\n| `loading` | `boolean` | `false` | Loading state; disables clicks and shows a spinner. |\n| `disabled` | `boolean` | `false` | Disabled. |\n| `ripple` | `boolean` | `false` | Click ripple ink. Set `true` to enable. |\n| `press` | `boolean` | `false` | Slight scale while pressed. Set `true` to enable. |\n| `nativeType` | `'button' \\| 'submit' \\| 'reset'` | `'button'` | Native button type. |\n| `autofocus` | `boolean` | `false` | Native autofocus. |\n| `ariaLabel` | `string` | — | Accessible name; recommended for icon-only buttons. |"
             },
             {
               "id": "events",
@@ -1913,7 +1931,7 @@
               "body": "- Renders a native `<button>`.\n- For icon-only buttons, set `ariaLabel` (or provide an accessible text label).\n- Sets `aria-busy` while `loading` and disables interaction."
             }
           ],
-          "markdown": "---\ntitle: Button\ncategory: 01 / BASIC\ndescription: Button triggers an immediate action.\n---\n\n# Button\n\nButton triggers an immediate action.\n\n## Import\n\n```ts\nimport { MButton } from 'morya-ui'\n```\n\n## Basic\n\nShow button text via the default slot or the `label` prop.\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Severity\n\nUse `severity` for semantic color; defaults to primary when omitted.\n\n```vue preview src=\"./demos/Severity.vue\"\n```\n\n## Styles\n\n`outlined`, `text`, `link`, `raised`, `rounded`, and `plain` can be combined freely.\n\n```vue preview src=\"./demos/Styles.vue\"\n```\n\n## Text & Link\n\n`text` is a lightweight text button; `link` renders as an inline link style. Both can be combined with `severity`.\n\n```vue preview src=\"./demos/TextAndLink.vue\"\n```\n\n## Ghost & Quaternary\n\n`ghost` is a transparent fill with tinted text; `quaternary` is quieter for secondary toolbar actions. Both can be set via `variant`.\n\n```vue preview src=\"./demos/GhostAndQuaternary.vue\"\n```\n\n## Button Group\n\n`MButtonGroup` joins adjacent buttons.\n\n```vue preview src=\"./demos/ButtonGroup.en.vue\"\n```\n\n## Icons & Badge\n\nSupports `icon`, `iconPos`, `iconOnly`, and a `badge`.\n\n```vue preview src=\"./demos/IconsAndBadge.vue\"\n```\n\n## Loading\n\nIn the `loading` state, a spinner is shown and clicks are blocked.\n\n```vue preview src=\"./demos/Loading.vue\"\n```\n\n## Disabled\n\n```vue preview src=\"./demos/Disabled.vue\"\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `label` | `string` | — | Button text. Default slot content takes precedence when present. |\n| `icon` | `IconName \\| Component` | — | Icon name or custom component. |\n| `iconPos` | `'left' \\| 'right' \\| 'top' \\| 'bottom'` | `'left'` | Icon position relative to the label. |\n| `iconOnly` | `boolean` | `false` | Force a square icon-only button. |\n| `severity` | `'secondary' \\| 'success' \\| 'info' \\| 'warn' \\| 'help' \\| 'danger' \\| 'contrast'` | — | Semantic color. Defaults to primary when omitted. |\n| `variant` | `'outlined' \\| 'text' \\| 'link' \\| 'ghost' \\| 'quaternary'` | — | Style variant shortcut, equivalent to the matching boolean prop. |\n| `outlined` | `boolean` | `false` | Outlined button. |\n| `text` | `boolean` | `false` | Text button. |\n| `link` | `boolean` | `false` | Link button. |\n| `ghost` | `boolean` | `false` | Transparent fill. |\n| `quaternary` | `boolean` | `false` | Extra-quiet text button. |\n| `color` | `string` | — | Custom color; overrides `severity`. |\n| `raised` | `boolean` | `false` | Raised shadow. |\n| `rounded` | `boolean` | `false` | Fully rounded. |\n| `plain` | `boolean` | `false` | Muted color; often combined with `text` / `outlined`. |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | Size. Medium by default; `sm` / `lg` aliases supported. |\n| `fluid` | `boolean` | `false` | Stretch to full container width. |\n| `loading` | `boolean` | `false` | Loading state; disables clicks and shows a spinner. |\n| `disabled` | `boolean` | `false` | Disabled. |\n| `badge` | `string` | — | Badge text. |\n| `badgeSeverity` | `'secondary' \\| 'info' \\| 'success' \\| 'warn' \\| 'danger' \\| 'contrast' \\| null` | `null` | Badge semantic color. |\n| `autofocus` | `boolean` | `false` | Native autofocus. |\n| `nativeType` | `'button' \\| 'submit' \\| 'reset'` | `'button'` | Native button type. |\n| `ariaLabel` | `string` | — | Accessible name; recommended for icon-only buttons. |\n\n## Events\n\n| Event | Prop | Description |\n| --- | --- | --- |\n| `click` | `MouseEvent` | Fired on click when enabled. |\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `default` | Button content; takes precedence over `label`. |\n| `icon` | Custom icon. |\n| `loadingicon` | Custom loading icon. |\n\n## Instance\n\n| Method / Property | Description |\n| --- | --- |\n| `focus()` | Focus the underlying button. |\n| `ref` | Underlying `HTMLButtonElement`. |\n\n## Accessibility\n\n- Renders a native `<button>`.\n- For icon-only buttons, set `ariaLabel` (or provide an accessible text label).\n- Sets `aria-busy` while `loading` and disables interaction.\n"
+          "markdown": "---\ntitle: Button\ncategory: 01 / BASIC\ndescription: Button triggers an immediate action.\n---\n\n# Button\n\nButton triggers an immediate action.\n\n## Import\n\n```ts\nimport { MButton } from 'morya-ui'\n```\n\n## Basic\n\nShow button text via the default slot or the `label` prop.\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Severity\n\nUse `severity` for semantic color; defaults to primary when omitted.\n\n```vue preview src=\"./demos/Severity.vue\"\n```\n\n## Styles\n\n`outlined`, `text`, `link`, `raised`, `rounded`, and `plain` can be combined freely.\n\n```vue preview src=\"./demos/Styles.vue\"\n```\n\n## Text & Link\n\n`text` is a lightweight text button; `link` renders as a backgroundless inline link style with underline on hover by default. Set `:underline=\"false\"` to disable. Both can be combined with `severity`.\n\n```vue preview src=\"./demos/TextAndLink.vue\"\n```\n\n## Ghost & Quaternary\n\n`ghost` is a soft fill matching text hover; `quaternary` is quieter for secondary toolbar actions. Both can be set via `variant`.\n\n```vue preview src=\"./demos/GhostAndQuaternary.vue\"\n```\n\n## Button Group\n\n`MButtonGroup` joins adjacent buttons.\n\n```vue preview src=\"./demos/ButtonGroup.en.vue\"\n```\n\n## Icons & Badge\n\nSupports `icon`, `iconPos`, `iconOnly`, and a `badge`.\n\n```vue preview src=\"./demos/IconsAndBadge.vue\"\n```\n\n## Loading\n\nIn the `loading` state, a spinner is shown and clicks are blocked.\n\n```vue preview src=\"./demos/Loading.vue\"\n```\n\n## Disabled\n\n```vue preview src=\"./demos/Disabled.vue\"\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `label` | `string` | — | Button text. Default slot content takes precedence when present. |\n| `icon` | `IconName \\| Component` | — | Icon name or custom component. |\n| `iconPos` | `'left' \\| 'right' \\| 'top' \\| 'bottom'` | `'left'` | Icon position relative to the label. |\n| `iconOnly` | `boolean` | `false` | Force a square icon-only button. |\n| `badge` | `string` | — | Badge text. |\n| `badgeSeverity` | `'secondary' \\| 'info' \\| 'success' \\| 'warn' \\| 'danger' \\| 'contrast' \\| null` | `null` | Badge semantic color. |\n| `severity` | `'secondary' \\| 'success' \\| 'info' \\| 'warn' \\| 'help' \\| 'danger' \\| 'contrast'` | — | Semantic color. Defaults to primary when omitted. |\n| `color` | `string` | — | Custom color; overrides `severity`. |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | Size. Medium by default; `sm` / `lg` aliases supported. |\n| `variant` | `'outlined' \\| 'text' \\| 'link' \\| 'ghost' \\| 'quaternary'` | — | Style variant shortcut, equivalent to the matching boolean prop. |\n| `outlined` | `boolean` | `false` | Outlined button. |\n| `text` | `boolean` | `false` | Text button. |\n| `link` | `boolean` | `false` | Link button. |\n| `underline` | `boolean` | `true` | Underline on hover for `link`. Set `false` to disable. |\n| `ghost` | `boolean` | `false` | Soft fill matching text hover. |\n| `quaternary` | `boolean` | `false` | Extra-quiet text button. |\n| `plain` | `boolean` | `false` | Soft fill matching outlined hover; can also mute `text` / `outlined`. |\n| `raised` | `boolean` | `false` | Raised shadow. |\n| `rounded` | `boolean` | `false` | Fully rounded. |\n| `fluid` | `boolean` | `false` | Stretch to full container width. |\n| `loading` | `boolean` | `false` | Loading state; disables clicks and shows a spinner. |\n| `disabled` | `boolean` | `false` | Disabled. |\n| `ripple` | `boolean` | `false` | Click ripple ink. Set `true` to enable. |\n| `press` | `boolean` | `false` | Slight scale while pressed. Set `true` to enable. |\n| `nativeType` | `'button' \\| 'submit' \\| 'reset'` | `'button'` | Native button type. |\n| `autofocus` | `boolean` | `false` | Native autofocus. |\n| `ariaLabel` | `string` | — | Accessible name; recommended for icon-only buttons. |\n\n## Events\n\n| Event | Prop | Description |\n| --- | --- | --- |\n| `click` | `MouseEvent` | Fired on click when enabled. |\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `default` | Button content; takes precedence over `label`. |\n| `icon` | Custom icon. |\n| `loadingicon` | Custom loading icon. |\n\n## Instance\n\n| Method / Property | Description |\n| --- | --- |\n| `focus()` | Focus the underlying button. |\n| `ref` | Underlying `HTMLButtonElement`. |\n\n## Accessibility\n\n- Renders a native `<button>`.\n- For icon-only buttons, set `ariaLabel` (or provide an accessible text label).\n- Sets `aria-busy` while `loading` and disables interaction.\n"
         }
       }
     },
@@ -1957,10 +1975,10 @@
           "description": "是否描边。"
         },
         {
-          "name": "hoverable",
-          "type": "boolean",
-          "default": "false",
-          "description": "悬停抬起。"
+          "name": "shadow",
+          "type": "'never' | 'hover' | 'always'",
+          "default": "'never'",
+          "description": "阴影时机：`never` 无阴影；`hover` / `always` 均使用 `--m-card-shadow-rest`（`hover` 仅悬停时出现）。"
         },
         {
           "name": "headingLevel",
@@ -2029,7 +2047,16 @@
           "sectionId": "cover-hover",
           "lang": "vue",
           "preview": true,
-          "code": "<script setup lang=\"ts\">\nimport { MCard } from 'morya-ui'\n</script>\n\n<template>\n  <MCard title=\"Cover card\" hoverable size=\"small\">\n    <template #cover>\n      <div style=\"height:6rem;background:color-mix(in srgb, var(--m-color-primary) 18%, transparent)\" />\n    </template>\n    Hover to lift. Set `bordered` to false for a borderless surface.\n  </MCard>\n</template>",
+          "code": "<script setup lang=\"ts\">\nimport { MCard } from 'morya-ui'\n</script>\n\n<template>\n  <MCard title=\"Cover card\" shadow=\"hover\" size=\"small\">\n    <template #cover>\n      <div style=\"height:6rem;background:color-mix(in srgb, var(--m-color-primary) 18%, transparent)\" />\n    </template>\n    Hover for elevation (`shadow=\"hover\"`). Set `bordered` to false for a borderless surface.\n  </MCard>\n</template>",
+          "locale": "zh-CN"
+        },
+        {
+          "id": "shadow-1",
+          "section": "Shadow",
+          "sectionId": "shadow",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MCard } from 'morya-ui'\n</script>\n\n<template>\n  <div style=\"display:grid;gap:var(--m-space-4);max-width:28rem;padding:var(--m-space-2)\">\n    <MCard title=\"Flat (default)\" shadow=\"never\">\n      Flat surface; use `shadow=\"hover\"` when you want elevation on interaction only.\n    </MCard>\n    <MCard title=\"Hover shadow\" shadow=\"hover\">\n      Same elevation as `always`, shown only on hover (`--m-card-shadow-rest`).\n    </MCard>\n    <MCard title=\"Always elevated\" shadow=\"always\">\n      Resting shadow (`--m-card-shadow-rest` → `--m-shadow-raised`); use for dashboard modules.\n    </MCard>\n  </div>\n</template>",
           "locale": "zh-CN"
         },
         {
@@ -2065,7 +2092,16 @@
           "sectionId": "cover-hover",
           "lang": "vue",
           "preview": true,
-          "code": "<script setup lang=\"ts\">\nimport { MCard } from 'morya-ui'\n</script>\n\n<template>\n  <MCard title=\"Cover card\" hoverable size=\"small\">\n    <template #cover>\n      <div style=\"height:6rem;background:color-mix(in srgb, var(--m-color-primary) 18%, transparent)\" />\n    </template>\n    Hover to lift. Set `bordered` to false for a borderless surface.\n  </MCard>\n</template>",
+          "code": "<script setup lang=\"ts\">\nimport { MCard } from 'morya-ui'\n</script>\n\n<template>\n  <MCard title=\"Cover card\" shadow=\"hover\" size=\"small\">\n    <template #cover>\n      <div style=\"height:6rem;background:color-mix(in srgb, var(--m-color-primary) 18%, transparent)\" />\n    </template>\n    Hover for elevation (`shadow=\"hover\"`). Set `bordered` to false for a borderless surface.\n  </MCard>\n</template>",
+          "locale": "en-US"
+        },
+        {
+          "id": "shadow-1",
+          "section": "Shadow",
+          "sectionId": "shadow",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MCard } from 'morya-ui'\n</script>\n\n<template>\n  <div style=\"display:grid;gap:var(--m-space-4);max-width:28rem;padding:var(--m-space-2)\">\n    <MCard title=\"Flat (default)\" shadow=\"never\">\n      Flat surface; use `shadow=\"hover\"` when you want elevation on interaction only.\n    </MCard>\n    <MCard title=\"Hover shadow\" shadow=\"hover\">\n      Same elevation as `always`, shown only on hover (`--m-card-shadow-rest`).\n    </MCard>\n    <MCard title=\"Always elevated\" shadow=\"always\">\n      Resting shadow (`--m-card-shadow-rest` → `--m-shadow-raised`); use for dashboard modules.\n    </MCard>\n  </div>\n</template>",
           "locale": "en-US"
         }
       ],
@@ -2099,10 +2135,15 @@
               "title": "Cover & Hover",
               "body": "```vue preview src=\"./demos/CoverAndHover.vue\"\n```"
             },
+            {
+              "id": "shadow",
+              "title": "Shadow",
+              "body": "`shadow` 控制卡片**阴影**出现时机：`never` 平面、`hover` 悬停抬起、`always` 常驻抬起（均使用 `--m-card-shadow-rest`）。\n\n```vue preview src=\"./demos/Shadow.vue\"\n```"
+            },
             {
               "id": "props",
               "title": "Props",
-              "body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `title` | `string` | — | 标题。 |\n| `subtitle` | `string` | — | 副标题。 |\n| `ariaLabel` | `string` | — | 可访问名称；默认回退到 `title`。 |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | 内边距尺寸。 |\n| `bordered` | `boolean` | `true` | 是否描边。 |\n| `hoverable` | `boolean` | `false` | 悬停抬起。 |\n| `headingLevel` | `1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6` | `2` | 标题 heading 级别。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | 根节点透传，键名 `root`。 |"
+              "body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `title` | `string` | — | 标题。 |\n| `subtitle` | `string` | — | 副标题。 |\n| `ariaLabel` | `string` | — | 可访问名称；默认回退到 `title`。 |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | 内边距尺寸。 |\n| `bordered` | `boolean` | `true` | 是否描边。 |\n| `shadow` | `'never' \\| 'hover' \\| 'always'` | `'never'` | 阴影时机：`never` 无阴影；`hover` / `always` 均使用 `--m-card-shadow-rest`（`hover` 仅悬停时出现）。 |\n| `headingLevel` | `1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6` | `2` | 标题 heading 级别。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | 根节点透传，键名 `root`。 |"
             },
             {
               "id": "slots",
@@ -2120,7 +2161,7 @@
               "body": "无自定义事件。"
             }
           ],
-          "markdown": "---\ntitle: Card\ncategory: 03 / DATA\ndescription: 内容容器。通过 title / subtitle 或 header / footer 插槽组织结构。\n---\n\n# Card\n\n内容容器，适合分组展示标题、正文与操作。Footer 仅通过插槽扩展（不提供 `footer` prop）。\n\n## 引入\n\n```ts\nimport { MButton, MCard } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Custom Header\n\n```vue preview src=\"./demos/CustomHeader.vue\"\n```\n\n## Cover & Hover\n\n```vue preview src=\"./demos/CoverAndHover.vue\"\n```\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `title` | `string` | — | 标题。 |\n| `subtitle` | `string` | — | 副标题。 |\n| `ariaLabel` | `string` | — | 可访问名称；默认回退到 `title`。 |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | 内边距尺寸。 |\n| `bordered` | `boolean` | `true` | 是否描边。 |\n| `hoverable` | `boolean` | `false` | 悬停抬起。 |\n| `headingLevel` | `1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6` | `2` | 标题 heading 级别。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | 根节点透传，键名 `root`。 |\n\n## Slots\n\n| 插槽名 | 说明 |\n| --- | --- |\n| `default` | 正文。 |\n| `header` | 自定义头部（优先于 `title` / `subtitle`）。 |\n| `footer` | 底部区域（推荐用插槽，无 footer prop）。 |\n| `cover` | 封面，渲染在头部上方。 |\n\n## 无障碍\n\n- 有 `title` 时默认作为容器 `aria-label`；复杂头部请用 `#header` 并保证标题可读。\n- 底部操作按钮应使用语义清晰的 `label` 文本。\n\n## Events\n\n无自定义事件。\n"
+          "markdown": "---\ntitle: Card\ncategory: 03 / DATA\ndescription: 内容容器。通过 title / subtitle 或 header / footer 插槽组织结构。\n---\n\n# Card\n\n内容容器，适合分组展示标题、正文与操作。Footer 仅通过插槽扩展（不提供 `footer` prop）。\n\n## 引入\n\n```ts\nimport { MButton, MCard } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Custom Header\n\n```vue preview src=\"./demos/CustomHeader.vue\"\n```\n\n## Cover & Hover\n\n```vue preview src=\"./demos/CoverAndHover.vue\"\n```\n\n## Shadow\n\n`shadow` 控制卡片**阴影**出现时机：`never` 平面、`hover` 悬停抬起、`always` 常驻抬起（均使用 `--m-card-shadow-rest`）。\n\n```vue preview src=\"./demos/Shadow.vue\"\n```\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `title` | `string` | — | 标题。 |\n| `subtitle` | `string` | — | 副标题。 |\n| `ariaLabel` | `string` | — | 可访问名称；默认回退到 `title`。 |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | 内边距尺寸。 |\n| `bordered` | `boolean` | `true` | 是否描边。 |\n| `shadow` | `'never' \\| 'hover' \\| 'always'` | `'never'` | 阴影时机：`never` 无阴影；`hover` / `always` 均使用 `--m-card-shadow-rest`（`hover` 仅悬停时出现）。 |\n| `headingLevel` | `1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6` | `2` | 标题 heading 级别。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | 根节点透传，键名 `root`。 |\n\n## Slots\n\n| 插槽名 | 说明 |\n| --- | --- |\n| `default` | 正文。 |\n| `header` | 自定义头部（优先于 `title` / `subtitle`）。 |\n| `footer` | 底部区域（推荐用插槽，无 footer prop）。 |\n| `cover` | 封面，渲染在头部上方。 |\n\n## 无障碍\n\n- 有 `title` 时默认作为容器 `aria-label`；复杂头部请用 `#header` 并保证标题可读。\n- 底部操作按钮应使用语义清晰的 `label` 文本。\n\n## Events\n\n无自定义事件。\n"
         },
         "en-US": {
           "title": "Card",
@@ -2151,10 +2192,15 @@
               "title": "Cover & Hover",
               "body": "```vue preview src=\"./demos/CoverAndHover.vue\"\n```"
             },
+            {
+              "id": "shadow",
+              "title": "Shadow",
+              "body": "`shadow` controls **when** the elevation shadow appears: `never` (flat), `hover` (on pointer hover), or `always` (resting). `hover` and `always` share `--m-card-shadow-rest`.\n\n```vue preview src=\"./demos/Shadow.vue\"\n```"
+            },
             {
               "id": "props",
               "title": "Props",
-              "body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `title` | `string` | — | Title. |\n| `subtitle` | `string` | — | Subtitle. |\n| `ariaLabel` | `string` | — | Accessible name; falls back to `title` by default. |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | Padding size. |\n| `bordered` | `boolean` | `true` | Show a border. |\n| `hoverable` | `boolean` | `false` | Elevate on hover. |\n| `headingLevel` | `1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6` | `2` | Heading level for the title. |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Root pass-through; key `root`. |"
+              "body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `title` | `string` | — | Title. |\n| `subtitle` | `string` | — | Subtitle. |\n| `ariaLabel` | `string` | — | Accessible name; falls back to `title` by default. |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | Padding size. |\n| `bordered` | `boolean` | `true` | Show a border. |\n| `shadow` | `'never' \\| 'hover' \\| 'always'` | `'never'` | Shadow timing: `never`; `hover` and `always` share `--m-card-shadow-rest` (`hover` shows it only on hover). |\n| `headingLevel` | `1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6` | `2` | Heading level for the title. |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Root pass-through; key `root`. |"
             },
             {
               "id": "slots",
@@ -2172,7 +2218,7 @@
               "body": "No custom events."
             }
           ],
-          "markdown": "---\ntitle: Card\ncategory: 03 / DATA\ndescription: Content container. Structure content with title / subtitle or header / footer slots.\n---\n\n# Card\n\nContent container for grouping title, body, and actions. Footer is extended via slot only (no `footer` prop).\n\n## Import\n\n```ts\nimport { MButton, MCard } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Custom Header\n\n```vue preview src=\"./demos/CustomHeader.vue\"\n```\n\n## Cover & Hover\n\n```vue preview src=\"./demos/CoverAndHover.vue\"\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `title` | `string` | — | Title. |\n| `subtitle` | `string` | — | Subtitle. |\n| `ariaLabel` | `string` | — | Accessible name; falls back to `title` by default. |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | Padding size. |\n| `bordered` | `boolean` | `true` | Show a border. |\n| `hoverable` | `boolean` | `false` | Elevate on hover. |\n| `headingLevel` | `1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6` | `2` | Heading level for the title. |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Root pass-through; key `root`. |\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `default` | Body. |\n| `header` | Custom header (takes precedence over `title` / `subtitle`). |\n| `footer` | Footer area (use the slot; there is no footer prop). |\n| `cover` | Cover above the header. |\n\n## Accessibility\n\n- When `title` is set it becomes the container `aria-label`; use `#header` for complex headers with readable titles.\n- Footer actions should use descriptive button labels.\n\n## Events\n\nNo custom events.\n"
+          "markdown": "---\ntitle: Card\ncategory: 03 / DATA\ndescription: Content container. Structure content with title / subtitle or header / footer slots.\n---\n\n# Card\n\nContent container for grouping title, body, and actions. Footer is extended via slot only (no `footer` prop).\n\n## Import\n\n```ts\nimport { MButton, MCard } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Custom Header\n\n```vue preview src=\"./demos/CustomHeader.vue\"\n```\n\n## Cover & Hover\n\n```vue preview src=\"./demos/CoverAndHover.vue\"\n```\n\n## Shadow\n\n`shadow` controls **when** the elevation shadow appears: `never` (flat), `hover` (on pointer hover), or `always` (resting). `hover` and `always` share `--m-card-shadow-rest`.\n\n```vue preview src=\"./demos/Shadow.vue\"\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `title` | `string` | — | Title. |\n| `subtitle` | `string` | — | Subtitle. |\n| `ariaLabel` | `string` | — | Accessible name; falls back to `title` by default. |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | Padding size. |\n| `bordered` | `boolean` | `true` | Show a border. |\n| `shadow` | `'never' \\| 'hover' \\| 'always'` | `'never'` | Shadow timing: `never`; `hover` and `always` share `--m-card-shadow-rest` (`hover` shows it only on hover). |\n| `headingLevel` | `1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6` | `2` | Heading level for the title. |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Root pass-through; key `root`. |\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `default` | Body. |\n| `header` | Custom header (takes precedence over `title` / `subtitle`). |\n| `footer` | Footer area (use the slot; there is no footer prop). |\n| `cover` | Cover above the header. |\n\n## Accessibility\n\n- When `title` is set it becomes the container `aria-label`; use `#header` for complex headers with readable titles.\n- Footer actions should use descriptive button labels.\n\n## Events\n\nNo custom events.\n"
         }
       }
     },
@@ -3518,7 +3564,7 @@
           "name": "respectReducedMotion",
           "type": "boolean",
           "default": "true",
-          "description": "是否尊重系统 `prefers-reduced-motion`。"
+          "description": "已废弃。组件动效不读取系统 `prefers-reduced-motion`。"
         },
         {
           "name": "globalDensity",
@@ -3682,7 +3728,7 @@
             {
               "id": "能力一览",
               "title": "能力一览",
-              "body": "| 能力 | 说明 |\n| --- | --- |\n| `appendTo` | 浮层默认 Teleport 目标，默认 `body` |\n| `size` | 表单控件默认尺寸 |\n| `density` | 全局内容密度 `compact` / `comfortable` / `spacious` |\n| `inputVariant` | 输入框默认 `outlined` / `filled` |\n| `zIndex` | 浮层基础层级 |\n| `locale` | 确认 / 空态 / 加载 / 占位等文案。可传入内置语言包 `zhCN` / `enUS` |\n| `componentDefaults` | 按组件覆盖默认 props（如 `Input.size`、`Space.size`、`Dialog.transition`）。局部 Props 优先 |\n| `motion` | 按角色覆盖进出场预设（`dialog` / `drawer` / `popup` / `toast` / `tooltip` / `overlay`） |\n| `respectReducedMotion` | 是否尊重系统 `prefers-reduced-motion`（默认 `true`） |"
+              "body": "| 能力 | 说明 |\n| --- | --- |\n| `appendTo` | 浮层默认 Teleport 目标，默认 `body` |\n| `size` | 表单控件默认尺寸 |\n| `density` | 全局内容密度 `compact` / `comfortable` / `spacious` |\n| `inputVariant` | 输入框默认 `outlined` / `filled` |\n| `zIndex` | 浮层基础层级 |\n| `locale` | 确认 / 空态 / 加载 / 占位等文案。可传入内置语言包 `zhCN` / `enUS` |\n| `componentDefaults` | 按组件覆盖默认 props（如 `Input.size`、`Space.size`、`Dialog.transition`）。局部 Props 优先 |\n| `motion` | 按角色覆盖进出场预设（`dialog` / `drawer` / `popup` / `toast` / `tooltip` / `overlay`） |\n| `respectReducedMotion` | 已废弃。组件动效只跟 `useMotion` / `data-m-motion`，不读系统减少动态效果。 |"
             },
             {
               "id": "size",
@@ -3722,7 +3768,7 @@
             {
               "id": "props",
               "title": "Props",
-              "body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `config` | `Partial<MGlobalConfig>` | — | 一次性传入完整配置（与下列 shorthand 等价）。 |\n| `appendTo` | `string \\| HTMLElement` | `'body'` | 浮层默认 Teleport 目标。 |\n| `size` | [MSizeInput](/docs/types#MSizeInput) | — | 表单控件默认尺寸。 |\n| `inputVariant` | `'outlined' \\| 'filled'` | — | 输入框默认视觉变体。 |\n| `zIndex` | `number` | — | 浮层基础 z-index。 |\n| `density` | `'compact' \\| 'comfortable' \\| 'spacious'` | — | 全局内容密度。 |\n| `theme` | `'light' \\| 'dark' \\| 'system'` | — | 主题；`system` 跟随系统偏好。 |\n| `locale` | `MLocale` | — | 文案语言包（如 `zhCN` / `enUS`）。 |\n| `componentDefaults` | `Record<string, object>` | — | 按组件名覆盖默认 props（含 `transition`）。 |\n| `motion` | `{ transitions?: Partial<Record<role, string>> }` | — | 按浮层角色覆盖进出场预设。 |\n| `respectReducedMotion` | `boolean` | `true` | 是否尊重系统 `prefers-reduced-motion`。 |\n| `globalDensity` | `boolean` | `true` | 是否将 density / theme 写入 `documentElement`。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |"
+              "body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `config` | `Partial<MGlobalConfig>` | — | 一次性传入完整配置（与下列 shorthand 等价）。 |\n| `appendTo` | `string \\| HTMLElement` | `'body'` | 浮层默认 Teleport 目标。 |\n| `size` | [MSizeInput](/docs/types#MSizeInput) | — | 表单控件默认尺寸。 |\n| `inputVariant` | `'outlined' \\| 'filled'` | — | 输入框默认视觉变体。 |\n| `zIndex` | `number` | — | 浮层基础 z-index。 |\n| `density` | `'compact' \\| 'comfortable' \\| 'spacious'` | — | 全局内容密度。 |\n| `theme` | `'light' \\| 'dark' \\| 'system'` | — | 主题；`system` 跟随系统偏好。 |\n| `locale` | `MLocale` | — | 文案语言包（如 `zhCN` / `enUS`）。 |\n| `componentDefaults` | `Record<string, object>` | — | 按组件名覆盖默认 props（含 `transition`）。 |\n| `motion` | `{ transitions?: Partial<Record<role, string>> }` | — | 按浮层角色覆盖进出场预设。 |\n| `respectReducedMotion` | `boolean` | `true` | 已废弃。组件动效不读取系统 `prefers-reduced-motion`。 |\n| `globalDensity` | `boolean` | `true` | 是否将 density / theme 写入 `documentElement`。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |"
             },
             {
               "id": "events",
@@ -3735,7 +3781,7 @@
               "body": "| 插槽名 | 说明 |\n| --- | --- |\n| `default` | 子组件树。 |"
             }
           ],
-          "markdown": "---\ntitle: ConfigProvider\ncategory: 00 / GUIDE\ndescription: 全局配置入口。统一浮层挂载、尺寸、密度、文案等应用级默认值。\n---\n\n# ConfigProvider\n\n通过 `MConfigProvider` 或 `createMoryaUI` 为整棵组件树提供全局默认值。局部 Props 优先级高于全局配置。\n\n## 能力一览\n\n| 能力 | 说明 |\n| --- | --- |\n| `appendTo` | 浮层默认 Teleport 目标，默认 `body` |\n| `size` | 表单控件默认尺寸 |\n| `density` | 全局内容密度 `compact` / `comfortable` / `spacious` |\n| `inputVariant` | 输入框默认 `outlined` / `filled` |\n| `zIndex` | 浮层基础层级 |\n| `locale` | 确认 / 空态 / 加载 / 占位等文案。可传入内置语言包 `zhCN` / `enUS` |\n| `componentDefaults` | 按组件覆盖默认 props（如 `Input.size`、`Space.size`、`Dialog.transition`）。局部 Props 优先 |\n| `motion` | 按角色覆盖进出场预设（`dialog` / `drawer` / `popup` / `toast` / `tooltip` / `overlay`） |\n| `respectReducedMotion` | 是否尊重系统 `prefers-reduced-motion`（默认 `true`） |\n\n## Size\n\n```vue preview src=\"./demos/Size.zh.vue\"\n```\n\n## Component Defaults\n\n按组件名覆盖默认 props。键名用无前缀名称（`Input`、`Space`）或 `M*` 别名均可。\n\n优先级：**组件 Props > `componentDefaults[组件]` > 全局 `size` / `inputVariant` > 内置默认值**。\n\n`Space` / `Flex` 的 `size` 是间距，**不会**继承全局控件 `size`。\n\n```vue preview src=\"./demos/ComponentDefaults.zh.vue\"\n```\n\n## Density\n\n```vue preview src=\"./demos/Density.vue\"\n```\n\n## Input Variant\n\n```vue preview src=\"./demos/InputVariant.zh.vue\"\n```\n\n## 应用级插件\n\n```ts\nimport MoryaUI, { createMoryaUI, enUS } from 'morya-ui'\nimport { createApp } from 'vue'\nimport App from './App.vue'\nimport 'morya-ui/styles.css'\n\n// 方式一：默认导出\ncreateApp(App).use(MoryaUI, { locale: enUS }).mount('#app')\n\n// 方式二：工厂函数\ncreateApp(App)\n  .use(\n    createMoryaUI({\n      appendTo: 'body',\n      size: 'small',\n      density: 'comfortable',\n      zIndex: 1100,\n      locale: enUS,\n      motion: { transitions: { popup: 'slide-up', dialog: 'zoom' } },\n      componentDefaults: {\n        Space: { size: 'small' },\n        Input: { clearable: true },\n        Select: { transition: 'fade' },\n      },\n    }),\n  )\n  .mount('#app')\n```\n\n默认会**全局注册全部组件**（模板可直接用 `<MButton>`）。仅注入配置时传 `components: false`；也可传组件数组做部分注册。\n\n## 读取配置\n\n```ts\nimport { useMConfig } from 'morya-ui'\n\nconst config = useMConfig()\n```\n\n优先级：**组件 Props > `MConfigProvider` > `createMoryaUI()` > 内置默认值**。\n\n## 主题与动效\n\n主题强度与进出场预设是两层：\n\n- **强度**：`useMotion()` → `full` / `reduced` / `none`（写 `data-m-motion`）\n- **形态**：`motion.transitions[role]` / `componentDefaults.*.transition` / 组件 `transition` prop\n\n```ts\nimport { createMoryaUI, registerMotionPreset, useMotion, useTheme } from 'morya-ui'\n\nconst { setTheme, toggleTheme } = useTheme()\nconst { setMotion } = useMotion() // 'full' | 'reduced' | 'none'\n\napp.use(createMoryaUI({\n  respectReducedMotion: false, // 演示站可忽略系统减弱动效\n  motion: { transitions: { popup: 'slide-up' } },\n}))\n\nregisterMotionPreset('brand', { name: 'm-brand' })\n```\n\n完整预设列表与 demo 见 [动效](/docs/motion)；亮暗与密度见 [主题](/docs/theme)。\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `config` | `Partial<MGlobalConfig>` | — | 一次性传入完整配置（与下列 shorthand 等价）。 |\n| `appendTo` | `string \\| HTMLElement` | `'body'` | 浮层默认 Teleport 目标。 |\n| `size` | [MSizeInput](/docs/types#MSizeInput) | — | 表单控件默认尺寸。 |\n| `inputVariant` | `'outlined' \\| 'filled'` | — | 输入框默认视觉变体。 |\n| `zIndex` | `number` | — | 浮层基础 z-index。 |\n| `density` | `'compact' \\| 'comfortable' \\| 'spacious'` | — | 全局内容密度。 |\n| `theme` | `'light' \\| 'dark' \\| 'system'` | — | 主题；`system` 跟随系统偏好。 |\n| `locale` | `MLocale` | — | 文案语言包（如 `zhCN` / `enUS`）。 |\n| `componentDefaults` | `Record<string, object>` | — | 按组件名覆盖默认 props（含 `transition`）。 |\n| `motion` | `{ transitions?: Partial<Record<role, string>> }` | — | 按浮层角色覆盖进出场预设。 |\n| `respectReducedMotion` | `boolean` | `true` | 是否尊重系统 `prefers-reduced-motion`。 |\n| `globalDensity` | `boolean` | `true` | 是否将 density / theme 写入 `documentElement`。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n\n## Events\n\n无自定义事件。\n\n## Slots\n\n| 插槽名 | 说明 |\n| --- | --- |\n| `default` | 子组件树。 |\n"
+          "markdown": "---\ntitle: ConfigProvider\ncategory: 00 / GUIDE\ndescription: 全局配置入口。统一浮层挂载、尺寸、密度、文案等应用级默认值。\n---\n\n# ConfigProvider\n\n通过 `MConfigProvider` 或 `createMoryaUI` 为整棵组件树提供全局默认值。局部 Props 优先级高于全局配置。\n\n## 能力一览\n\n| 能力 | 说明 |\n| --- | --- |\n| `appendTo` | 浮层默认 Teleport 目标，默认 `body` |\n| `size` | 表单控件默认尺寸 |\n| `density` | 全局内容密度 `compact` / `comfortable` / `spacious` |\n| `inputVariant` | 输入框默认 `outlined` / `filled` |\n| `zIndex` | 浮层基础层级 |\n| `locale` | 确认 / 空态 / 加载 / 占位等文案。可传入内置语言包 `zhCN` / `enUS` |\n| `componentDefaults` | 按组件覆盖默认 props（如 `Input.size`、`Space.size`、`Dialog.transition`）。局部 Props 优先 |\n| `motion` | 按角色覆盖进出场预设（`dialog` / `drawer` / `popup` / `toast` / `tooltip` / `overlay`） |\n| `respectReducedMotion` | 已废弃。组件动效只跟 `useMotion` / `data-m-motion`，不读系统减少动态效果。 |\n\n## Size\n\n```vue preview src=\"./demos/Size.zh.vue\"\n```\n\n## Component Defaults\n\n按组件名覆盖默认 props。键名用无前缀名称（`Input`、`Space`）或 `M*` 别名均可。\n\n优先级：**组件 Props > `componentDefaults[组件]` > 全局 `size` / `inputVariant` > 内置默认值**。\n\n`Space` / `Flex` 的 `size` 是间距，**不会**继承全局控件 `size`。\n\n```vue preview src=\"./demos/ComponentDefaults.zh.vue\"\n```\n\n## Density\n\n```vue preview src=\"./demos/Density.vue\"\n```\n\n## Input Variant\n\n```vue preview src=\"./demos/InputVariant.zh.vue\"\n```\n\n## 应用级插件\n\n```ts\nimport MoryaUI, { createMoryaUI, enUS } from 'morya-ui'\nimport { createApp } from 'vue'\nimport App from './App.vue'\nimport 'morya-ui/styles.css'\n\n// 方式一：默认导出\ncreateApp(App).use(MoryaUI, { locale: enUS }).mount('#app')\n\n// 方式二：工厂函数\ncreateApp(App)\n  .use(\n    createMoryaUI({\n      appendTo: 'body',\n      size: 'small',\n      density: 'comfortable',\n      zIndex: 1100,\n      locale: enUS,\n      motion: { transitions: { popup: 'slide-up', dialog: 'zoom' } },\n      componentDefaults: {\n        Space: { size: 'small' },\n        Input: { clearable: true },\n        Select: { transition: 'fade' },\n      },\n    }),\n  )\n  .mount('#app')\n```\n\n默认会**全局注册全部组件**（模板可直接用 `<MButton>`）。仅注入配置时传 `components: false`；也可传组件数组做部分注册。\n\n## 读取配置\n\n```ts\nimport { useMConfig } from 'morya-ui'\n\nconst config = useMConfig()\n```\n\n优先级：**组件 Props > `MConfigProvider` > `createMoryaUI()` > 内置默认值**。\n\n## 主题与动效\n\n主题强度与进出场预设是两层：\n\n- **强度**：`useMotion()` → `full` / `reduced` / `none`（写 `data-m-motion`）\n- **形态**：`motion.transitions[role]` / `componentDefaults.*.transition` / 组件 `transition` prop\n\n```ts\nimport { createMoryaUI, registerMotionPreset, useMotion, useTheme } from 'morya-ui'\n\nconst { setTheme, toggleTheme } = useTheme()\nconst { setMotion } = useMotion() // 'full' | 'reduced' | 'none'\n\napp.use(createMoryaUI({\n  respectReducedMotion: false, // 演示站可忽略系统减弱动效\n  motion: { transitions: { popup: 'slide-up' } },\n}))\n\nregisterMotionPreset('brand', { name: 'm-brand' })\n```\n\n完整预设列表与 demo 见 [动效](/docs/motion)；亮暗与密度见 [主题](/docs/theme)。\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `config` | `Partial<MGlobalConfig>` | — | 一次性传入完整配置（与下列 shorthand 等价）。 |\n| `appendTo` | `string \\| HTMLElement` | `'body'` | 浮层默认 Teleport 目标。 |\n| `size` | [MSizeInput](/docs/types#MSizeInput) | — | 表单控件默认尺寸。 |\n| `inputVariant` | `'outlined' \\| 'filled'` | — | 输入框默认视觉变体。 |\n| `zIndex` | `number` | — | 浮层基础 z-index。 |\n| `density` | `'compact' \\| 'comfortable' \\| 'spacious'` | — | 全局内容密度。 |\n| `theme` | `'light' \\| 'dark' \\| 'system'` | — | 主题；`system` 跟随系统偏好。 |\n| `locale` | `MLocale` | — | 文案语言包（如 `zhCN` / `enUS`）。 |\n| `componentDefaults` | `Record<string, object>` | — | 按组件名覆盖默认 props（含 `transition`）。 |\n| `motion` | `{ transitions?: Partial<Record<role, string>> }` | — | 按浮层角色覆盖进出场预设。 |\n| `respectReducedMotion` | `boolean` | `true` | 已废弃。组件动效不读取系统 `prefers-reduced-motion`。 |\n| `globalDensity` | `boolean` | `true` | 是否将 density / theme 写入 `documentElement`。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n\n## Events\n\n无自定义事件。\n\n## Slots\n\n| 插槽名 | 说明 |\n| --- | --- |\n| `default` | 子组件树。 |\n"
         },
         "en-US": {
           "title": "ConfigProvider",
@@ -3749,7 +3795,7 @@
             {
               "id": "capabilities",
               "title": "Capabilities",
-              "body": "| Capability | Description |\n| --- | --- |\n| `appendTo` | Default Teleport target for overlays; defaults to `body` |\n| `size` | Default size for form controls |\n| `density` | Global content density: `compact` / `comfortable` / `spacious` |\n| `inputVariant` | Default input style: `outlined` / `filled` |\n| `zIndex` | Base overlay z-index |\n| `locale` | Strings for confirm / empty / loading / placeholder, etc. Pass built-in packs `zhCN` / `enUS` |\n| `componentDefaults` | Per-component default props (e.g. `Input.size`, `Dialog.transition`). Local props win |\n| `motion` | Enter/exit presets by overlay role (`dialog` / `drawer` / `popup` / `toast` / `tooltip` / `overlay`) |\n| `respectReducedMotion` | Honor OS `prefers-reduced-motion` (default `true`) |"
+              "body": "| Capability | Description |\n| --- | --- |\n| `appendTo` | Default Teleport target for overlays; defaults to `body` |\n| `size` | Default size for form controls |\n| `density` | Global content density: `compact` / `comfortable` / `spacious` |\n| `inputVariant` | Default input style: `outlined` / `filled` |\n| `zIndex` | Base overlay z-index |\n| `locale` | Strings for confirm / empty / loading / placeholder, etc. Pass built-in packs `zhCN` / `enUS` |\n| `componentDefaults` | Per-component default props (e.g. `Input.size`, `Dialog.transition`). Local props win |\n| `motion` | Enter/exit presets by overlay role (`dialog` / `drawer` / `popup` / `toast` / `tooltip` / `overlay`) |\n| `respectReducedMotion` | Deprecated. Component motion follows `useMotion` / `data-m-motion` only. |"
             },
             {
               "id": "size",
@@ -3789,7 +3835,7 @@
             {
               "id": "props",
               "title": "Props",
-              "body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `config` | `Partial<MGlobalConfig>` | — | Full config object (same as the shorthands below). |\n| `appendTo` | `string \\| HTMLElement` | `'body'` | Default Teleport target for overlays. |\n| `size` | [MSizeInput](/docs/types#MSizeInput) | — | Default form control size. |\n| `inputVariant` | `'outlined' \\| 'filled'` | — | Default input surface. |\n| `zIndex` | `number` | — | Base overlay z-index. |\n| `density` | `'compact' \\| 'comfortable' \\| 'spacious'` | — | Global content density. |\n| `theme` | `'light' \\| 'dark' \\| 'system'` | — | Color theme; `system` follows OS. |\n| `locale` | `MLocale` | — | Copy pack (`zhCN` / `enUS`). |\n| `componentDefaults` | `Record<string, object>` | — | Per-component default props (including `transition`). |\n| `motion` | `{ transitions?: Partial<Record<role, string>> }` | — | Enter/exit presets by overlay role. |\n| `respectReducedMotion` | `boolean` | `true` | Honor OS `prefers-reduced-motion`. |\n| `globalDensity` | `boolean` | `true` | Also write density / theme to `documentElement`. |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM pass-through; see [Styling & attrs](/docs/attrs). |"
+              "body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `config` | `Partial<MGlobalConfig>` | — | Full config object (same as the shorthands below). |\n| `appendTo` | `string \\| HTMLElement` | `'body'` | Default Teleport target for overlays. |\n| `size` | [MSizeInput](/docs/types#MSizeInput) | — | Default form control size. |\n| `inputVariant` | `'outlined' \\| 'filled'` | — | Default input surface. |\n| `zIndex` | `number` | — | Base overlay z-index. |\n| `density` | `'compact' \\| 'comfortable' \\| 'spacious'` | — | Global content density. |\n| `theme` | `'light' \\| 'dark' \\| 'system'` | — | Color theme; `system` follows OS. |\n| `locale` | `MLocale` | — | Copy pack (`zhCN` / `enUS`). |\n| `componentDefaults` | `Record<string, object>` | — | Per-component default props (including `transition`). |\n| `motion` | `{ transitions?: Partial<Record<role, string>> }` | — | Enter/exit presets by overlay role. |\n| `respectReducedMotion` | `boolean` | `true` | Deprecated. Component motion does not read OS `prefers-reduced-motion`. |\n| `globalDensity` | `boolean` | `true` | Also write density / theme to `documentElement`. |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM pass-through; see [Styling & attrs](/docs/attrs). |"
             },
             {
               "id": "events",
@@ -3802,7 +3848,7 @@
               "body": "| Slot | Description |\n| --- | --- |\n| `default` | Child tree. |"
             }
           ],
-          "markdown": "---\ntitle: ConfigProvider\ncategory: 00 / GUIDE\ndescription: Global configuration entry. Unifies app-level defaults such as overlay mount, size, density, and locale strings.\n---\n\n# ConfigProvider\n\nProvide global defaults for the component tree via `MConfigProvider` or `createMoryaUI`. Local props take precedence over global config.\n\n## Capabilities\n\n| Capability | Description |\n| --- | --- |\n| `appendTo` | Default Teleport target for overlays; defaults to `body` |\n| `size` | Default size for form controls |\n| `density` | Global content density: `compact` / `comfortable` / `spacious` |\n| `inputVariant` | Default input style: `outlined` / `filled` |\n| `zIndex` | Base overlay z-index |\n| `locale` | Strings for confirm / empty / loading / placeholder, etc. Pass built-in packs `zhCN` / `enUS` |\n| `componentDefaults` | Per-component default props (e.g. `Input.size`, `Dialog.transition`). Local props win |\n| `motion` | Enter/exit presets by overlay role (`dialog` / `drawer` / `popup` / `toast` / `tooltip` / `overlay`) |\n| `respectReducedMotion` | Honor OS `prefers-reduced-motion` (default `true`) |\n\n## Size\n\n```vue preview src=\"./demos/Size.en.vue\"\n```\n\n## Component Defaults\n\nOverride default props per component. Keys may be unprefixed (`Input`, `Space`) or `M*` aliases.\n\nPrecedence: **component props > `componentDefaults[component]` > global `size` / `inputVariant` > built-in defaults**.\n\n`Space` / `Flex` `size` is gap and does **not** inherit the global control `size`.\n\n```vue preview src=\"./demos/ComponentDefaults.en.vue\"\n```\n\n## Density\n\n```vue preview src=\"./demos/Density.vue\"\n```\n\n## Input Variant\n\n```vue preview src=\"./demos/InputVariant.en.vue\"\n```\n\n## App-level plugin\n\n```ts\nimport MoryaUI, { createMoryaUI, enUS } from 'morya-ui'\nimport { createApp } from 'vue'\nimport App from './App.vue'\nimport 'morya-ui/styles.css'\n\n// Option A: default export\ncreateApp(App).use(MoryaUI, { locale: enUS }).mount('#app')\n\n// Option B: factory\ncreateApp(App)\n  .use(\n    createMoryaUI({\n      appendTo: 'body',\n      size: 'small',\n      density: 'comfortable',\n      zIndex: 1100,\n      locale: enUS,\n      motion: { transitions: { popup: 'slide-up', dialog: 'zoom' } },\n      componentDefaults: {\n        Space: { size: 'small' },\n        Input: { clearable: true },\n        Select: { transition: 'fade' },\n      },\n    }),\n  )\n  .mount('#app')\n```\n\nBy default **all components are registered globally** (use `<MButton>` in templates). Pass `components: false` for config-only, or pass a component array for partial registration.\n\n## Reading config\n\n```ts\nimport { useMConfig } from 'morya-ui'\n\nconst config = useMConfig()\n```\n\nPrecedence: **component props > `MConfigProvider` > `createMoryaUI()` > built-in defaults**.\n\n## Theme and motion\n\nIntensity and enter/exit presets are separate layers:\n\n- **Intensity**: `useMotion()` → `full` / `reduced` / `none` (writes `data-m-motion`)\n- **Shape**: `motion.transitions[role]` / `componentDefaults.*.transition` / component `transition` prop\n\n```ts\nimport { createMoryaUI, registerMotionPreset, useMotion, useTheme } from 'morya-ui'\n\nconst { setTheme, toggleTheme } = useTheme()\nconst { setMotion } = useMotion() // 'full' | 'reduced' | 'none'\n\napp.use(createMoryaUI({\n  respectReducedMotion: false, // docs demos may ignore OS reduced motion\n  motion: { transitions: { popup: 'slide-up' } },\n}))\n\nregisterMotionPreset('brand', { name: 'm-brand' })\n```\n\nFull preset list and demos: [Motion](/docs/motion). Light/dark and density: [Theme](/docs/theme).\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `config` | `Partial<MGlobalConfig>` | — | Full config object (same as the shorthands below). |\n| `appendTo` | `string \\| HTMLElement` | `'body'` | Default Teleport target for overlays. |\n| `size` | [MSizeInput](/docs/types#MSizeInput) | — | Default form control size. |\n| `inputVariant` | `'outlined' \\| 'filled'` | — | Default input surface. |\n| `zIndex` | `number` | — | Base overlay z-index. |\n| `density` | `'compact' \\| 'comfortable' \\| 'spacious'` | — | Global content density. |\n| `theme` | `'light' \\| 'dark' \\| 'system'` | — | Color theme; `system` follows OS. |\n| `locale` | `MLocale` | — | Copy pack (`zhCN` / `enUS`). |\n| `componentDefaults` | `Record<string, object>` | — | Per-component default props (including `transition`). |\n| `motion` | `{ transitions?: Partial<Record<role, string>> }` | — | Enter/exit presets by overlay role. |\n| `respectReducedMotion` | `boolean` | `true` | Honor OS `prefers-reduced-motion`. |\n| `globalDensity` | `boolean` | `true` | Also write density / theme to `documentElement`. |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM pass-through; see [Styling & attrs](/docs/attrs). |\n\n## Events\n\nNo custom events.\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `default` | Child tree. |\n"
+          "markdown": "---\ntitle: ConfigProvider\ncategory: 00 / GUIDE\ndescription: Global configuration entry. Unifies app-level defaults such as overlay mount, size, density, and locale strings.\n---\n\n# ConfigProvider\n\nProvide global defaults for the component tree via `MConfigProvider` or `createMoryaUI`. Local props take precedence over global config.\n\n## Capabilities\n\n| Capability | Description |\n| --- | --- |\n| `appendTo` | Default Teleport target for overlays; defaults to `body` |\n| `size` | Default size for form controls |\n| `density` | Global content density: `compact` / `comfortable` / `spacious` |\n| `inputVariant` | Default input style: `outlined` / `filled` |\n| `zIndex` | Base overlay z-index |\n| `locale` | Strings for confirm / empty / loading / placeholder, etc. Pass built-in packs `zhCN` / `enUS` |\n| `componentDefaults` | Per-component default props (e.g. `Input.size`, `Dialog.transition`). Local props win |\n| `motion` | Enter/exit presets by overlay role (`dialog` / `drawer` / `popup` / `toast` / `tooltip` / `overlay`) |\n| `respectReducedMotion` | Deprecated. Component motion follows `useMotion` / `data-m-motion` only. |\n\n## Size\n\n```vue preview src=\"./demos/Size.en.vue\"\n```\n\n## Component Defaults\n\nOverride default props per component. Keys may be unprefixed (`Input`, `Space`) or `M*` aliases.\n\nPrecedence: **component props > `componentDefaults[component]` > global `size` / `inputVariant` > built-in defaults**.\n\n`Space` / `Flex` `size` is gap and does **not** inherit the global control `size`.\n\n```vue preview src=\"./demos/ComponentDefaults.en.vue\"\n```\n\n## Density\n\n```vue preview src=\"./demos/Density.vue\"\n```\n\n## Input Variant\n\n```vue preview src=\"./demos/InputVariant.en.vue\"\n```\n\n## App-level plugin\n\n```ts\nimport MoryaUI, { createMoryaUI, enUS } from 'morya-ui'\nimport { createApp } from 'vue'\nimport App from './App.vue'\nimport 'morya-ui/styles.css'\n\n// Option A: default export\ncreateApp(App).use(MoryaUI, { locale: enUS }).mount('#app')\n\n// Option B: factory\ncreateApp(App)\n  .use(\n    createMoryaUI({\n      appendTo: 'body',\n      size: 'small',\n      density: 'comfortable',\n      zIndex: 1100,\n      locale: enUS,\n      motion: { transitions: { popup: 'slide-up', dialog: 'zoom' } },\n      componentDefaults: {\n        Space: { size: 'small' },\n        Input: { clearable: true },\n        Select: { transition: 'fade' },\n      },\n    }),\n  )\n  .mount('#app')\n```\n\nBy default **all components are registered globally** (use `<MButton>` in templates). Pass `components: false` for config-only, or pass a component array for partial registration.\n\n## Reading config\n\n```ts\nimport { useMConfig } from 'morya-ui'\n\nconst config = useMConfig()\n```\n\nPrecedence: **component props > `MConfigProvider` > `createMoryaUI()` > built-in defaults**.\n\n## Theme and motion\n\nIntensity and enter/exit presets are separate layers:\n\n- **Intensity**: `useMotion()` → `full` / `reduced` / `none` (writes `data-m-motion`)\n- **Shape**: `motion.transitions[role]` / `componentDefaults.*.transition` / component `transition` prop\n\n```ts\nimport { createMoryaUI, registerMotionPreset, useMotion, useTheme } from 'morya-ui'\n\nconst { setTheme, toggleTheme } = useTheme()\nconst { setMotion } = useMotion() // 'full' | 'reduced' | 'none'\n\napp.use(createMoryaUI({\n  respectReducedMotion: false, // docs demos may ignore OS reduced motion\n  motion: { transitions: { popup: 'slide-up' } },\n}))\n\nregisterMotionPreset('brand', { name: 'm-brand' })\n```\n\nFull preset list and demos: [Motion](/docs/motion). Light/dark and density: [Theme](/docs/theme).\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `config` | `Partial<MGlobalConfig>` | — | Full config object (same as the shorthands below). |\n| `appendTo` | `string \\| HTMLElement` | `'body'` | Default Teleport target for overlays. |\n| `size` | [MSizeInput](/docs/types#MSizeInput) | — | Default form control size. |\n| `inputVariant` | `'outlined' \\| 'filled'` | — | Default input surface. |\n| `zIndex` | `number` | — | Base overlay z-index. |\n| `density` | `'compact' \\| 'comfortable' \\| 'spacious'` | — | Global content density. |\n| `theme` | `'light' \\| 'dark' \\| 'system'` | — | Color theme; `system` follows OS. |\n| `locale` | `MLocale` | — | Copy pack (`zhCN` / `enUS`). |\n| `componentDefaults` | `Record<string, object>` | — | Per-component default props (including `transition`). |\n| `motion` | `{ transitions?: Partial<Record<role, string>> }` | — | Enter/exit presets by overlay role. |\n| `respectReducedMotion` | `boolean` | `true` | Deprecated. Component motion does not read OS `prefers-reduced-motion`. |\n| `globalDensity` | `boolean` | `true` | Also write density / theme to `documentElement`. |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM pass-through; see [Styling & attrs](/docs/attrs). |\n\n## Events\n\nNo custom events.\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `default` | Child tree. |\n"
         }
       }
     },
@@ -13482,7 +13528,7 @@
             {
               "id": "主题",
               "title": "主题",
-              "body": "指示器颜色走语义色：`--m-color-primary`、`--m-color-success`、`--m-color-warning`、`--m-color-danger`、`--m-color-text-muted`。遮罩默认是表面色的半透明混合，可用 `background` 或 `--m-loading-mask-bg` 覆盖。全屏层级是 `--m-loading-z-index`（默认 `--m-z-base + 200`）。\n\n`prefers-reduced-motion: reduce` 时循环动效关闭。"
+              "body": "指示器颜色走语义色：`--m-color-primary`、`--m-color-success`、`--m-color-warning`、`--m-color-danger`、`--m-color-text-muted`。遮罩默认是表面色的半透明混合，可用 `background` 或 `--m-loading-mask-bg` 覆盖。全屏层级是 `--m-loading-z-index`（默认 `--m-z-base + 200`）。\n\n主题动效为 `reduced` 或 `none` 时循环动效关闭。"
             },
             {
               "id": "无障碍",
@@ -13490,7 +13536,7 @@
               "body": "- 指示器使用 `role=\"status\"`。\n- 遮罩区域设置 `aria-busy`，被盖住的内容设为 `inert`。\n- 不要只靠动画表示加载；需要说明时传入 `text`。"
             }
           ],
-          "markdown": "---\ntitle: Loading\ncategory: 05 / FEEDBACK\ndescription: 加载指示与遮罩：多种动效、区域加载、v-loading 指令和命令式 service。\n---\n\n# Loading\n\n用于区域或全屏的加载反馈。可以只渲染指示器，也可以盖住一块内容，或用指令和服务在任意节点上打开遮罩。\n\n内置圆环、极光环、弹跳球、波浪条、脉冲环和星尘。默认是圆环（`effect=\"circular\"`）。要改全局默认动效，设置 `componentDefaults.Loading.effect`。\n\n全屏遮罩会 Teleport 到 `body`，避免被父级 `overflow` / `transform` 裁切。同一时间只保留一个全屏实例。\n\n## 引入\n\n```ts\nimport { loading, MLoading, useLoading, vLoading } from 'morya-ui'\n```\n\n`app.use(MoryaUI)` 会注册 `v-loading`。按需引入时，在 `<script setup>` 里导入 `vLoading` 即可在模板中使用该指令。\n\n## 动效\n\n```vue preview src=\"./demos/Effects.vue\"\n```\n\n## 区域加载\n\n组件包住内容，或在元素上使用 `v-loading`。未传 `text` 时不显示文案，读屏仍使用 locale 的 `loading`。可用 `delay` 避免短请求闪一下。\n\n```vue preview src=\"./demos/Region.zh.vue\"\n```\n\n## 服务式调用\n\n不传 `target` 时遮罩铺满视口。`close()` 会先播放离场再卸载，`setText()` 改文案。也可用 `useLoading()`，在组件卸载时自动关闭。\n\n```vue preview src=\"./demos/Service.zh.vue\"\n```\n\n```ts\nconst instance = loading.service({\n  text: '正在提交',\n  effect: 'wave',\n  lock: true,\n})\ninstance.setText('即将完成')\ninstance.close()\n```\n\n覆盖某个节点，或传入自定义指示器：\n\n```ts\nloading.service({\n  target: '#panel',\n  text: '加载中',\n})\n\nloading.service({\n  spinner: () => h('span', '…'),\n  text: '自定义',\n})\n```\n\n```ts\nconst { open, close } = useLoading({ effect: 'wave' })\nopen({ text: '保存中' })\nclose()\n```\n\n## 指令\n\n| 写法 | 说明 |\n| --- | --- |\n| `v-loading` | 布尔值，或带 `text` / `effect` / `background` / `lock` / `delay` / `spinner` 等字段的对象。 |\n| `v-loading.fullscreen` | 全屏遮罩。 |\n| `v-loading.lock` | 打开时锁定页面滚动。 |\n| `v-loading.body` | 遮罩挂到 `body`，并盖住当前元素（跟随尺寸变化）。 |\n| `m-loading-text` | 文案。 |\n| `m-loading-effect` | `circular` / `aurora` / `bounce` / `wave` / `pulse` / `stardust`。 |\n| `m-loading-background` | 遮罩背景色。 |\n| `m-loading-custom-class` | 加在遮罩上的类名。 |\n| `m-loading-delay` | 显示前延迟（ms）。 |\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `loading` | `boolean` | `true` | 包裹内容或 `fullscreen` 时是否显示遮罩。单独指示器始终显示。 |\n| `effect` | `'circular' \\| 'aurora' \\| 'bounce' \\| 'wave' \\| 'pulse' \\| 'stardust'` | `'circular'` | 动效。可用 `componentDefaults.Loading.effect` 改默认值。 |\n| `text` | `string` | — | 指示器下方文案。不传则不显示。 |\n| `ariaLabel` | `string` | locale `loading` | 无文案时的可访问名称。有文案时以文案为准。 |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | 指示器缩放。 |\n| `background` | `string` | — | 遮罩背景，任意 CSS 颜色。 |\n| `customClass` | `string` | — | 加在遮罩上的类名。 |\n| `fullscreen` | `boolean` | `false` | 遮罩铺满视口（Teleport 到 `body`）。 |\n| `lock` | `boolean` | `false` | 显示时禁止页面滚动。 |\n| `delay` | `number` | `0` | 显示前延迟（ms）。 |\n| `transition` | `string \\| false` | `'loading'` | 进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs)。 |\n\n## Events\n\n无自定义事件。\n\n## Slots\n\n| 插槽名 | 说明 |\n| --- | --- |\n| `default` | 被遮罩盖住的内容。 |\n| `indicator` | 替换遮罩中的指示器。仅在有默认插槽或 `fullscreen` 时生效。 |\n\n## 服务\n\n`loading.service(options)` 返回 `{ close, setText }`。`useLoading(defaults)` 返回 `{ open, close, setText }`。\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `target` | `string \\| HTMLElement` | — | 要盖住的元素或选择器。省略则为全屏。 |\n| `fullscreen` | `boolean` | 无 `target` 时为 `true` | 铺满视口。 |\n| `body` | `boolean` | `false` | 遮罩挂到 `body`，定位到 `target` 上。 |\n| `lock` | `boolean` | `false` | 锁定页面滚动。 |\n| `text` | `string` | — | 文案。 |\n| `effect` | 同组件 | `'circular'` | 动效。 |\n| `spinner` | `MRenderable` | — | 自定义指示器；设置后忽略内置 `effect`。 |\n| `background` | `string` | — | 遮罩背景。 |\n| `customClass` | `string` | — | 遮罩类名。 |\n| `size` | 同组件 | — | 指示器尺寸。 |\n| `delay` | `number` | — | 显示前延迟（ms）。 |\n\n## 主题\n\n指示器颜色走语义色：`--m-color-primary`、`--m-color-success`、`--m-color-warning`、`--m-color-danger`、`--m-color-text-muted`。遮罩默认是表面色的半透明混合，可用 `background` 或 `--m-loading-mask-bg` 覆盖。全屏层级是 `--m-loading-z-index`（默认 `--m-z-base + 200`）。\n\n`prefers-reduced-motion: reduce` 时循环动效关闭。\n\n## 无障碍\n\n- 指示器使用 `role=\"status\"`。\n- 遮罩区域设置 `aria-busy`，被盖住的内容设为 `inert`。\n- 不要只靠动画表示加载；需要说明时传入 `text`。\n"
+          "markdown": "---\ntitle: Loading\ncategory: 05 / FEEDBACK\ndescription: 加载指示与遮罩：多种动效、区域加载、v-loading 指令和命令式 service。\n---\n\n# Loading\n\n用于区域或全屏的加载反馈。可以只渲染指示器，也可以盖住一块内容，或用指令和服务在任意节点上打开遮罩。\n\n内置圆环、极光环、弹跳球、波浪条、脉冲环和星尘。默认是圆环（`effect=\"circular\"`）。要改全局默认动效，设置 `componentDefaults.Loading.effect`。\n\n全屏遮罩会 Teleport 到 `body`，避免被父级 `overflow` / `transform` 裁切。同一时间只保留一个全屏实例。\n\n## 引入\n\n```ts\nimport { loading, MLoading, useLoading, vLoading } from 'morya-ui'\n```\n\n`app.use(MoryaUI)` 会注册 `v-loading`。按需引入时，在 `<script setup>` 里导入 `vLoading` 即可在模板中使用该指令。\n\n## 动效\n\n```vue preview src=\"./demos/Effects.vue\"\n```\n\n## 区域加载\n\n组件包住内容，或在元素上使用 `v-loading`。未传 `text` 时不显示文案，读屏仍使用 locale 的 `loading`。可用 `delay` 避免短请求闪一下。\n\n```vue preview src=\"./demos/Region.zh.vue\"\n```\n\n## 服务式调用\n\n不传 `target` 时遮罩铺满视口。`close()` 会先播放离场再卸载，`setText()` 改文案。也可用 `useLoading()`，在组件卸载时自动关闭。\n\n```vue preview src=\"./demos/Service.zh.vue\"\n```\n\n```ts\nconst instance = loading.service({\n  text: '正在提交',\n  effect: 'wave',\n  lock: true,\n})\ninstance.setText('即将完成')\ninstance.close()\n```\n\n覆盖某个节点，或传入自定义指示器：\n\n```ts\nloading.service({\n  target: '#panel',\n  text: '加载中',\n})\n\nloading.service({\n  spinner: () => h('span', '…'),\n  text: '自定义',\n})\n```\n\n```ts\nconst { open, close } = useLoading({ effect: 'wave' })\nopen({ text: '保存中' })\nclose()\n```\n\n## 指令\n\n| 写法 | 说明 |\n| --- | --- |\n| `v-loading` | 布尔值，或带 `text` / `effect` / `background` / `lock` / `delay` / `spinner` 等字段的对象。 |\n| `v-loading.fullscreen` | 全屏遮罩。 |\n| `v-loading.lock` | 打开时锁定页面滚动。 |\n| `v-loading.body` | 遮罩挂到 `body`，并盖住当前元素（跟随尺寸变化）。 |\n| `m-loading-text` | 文案。 |\n| `m-loading-effect` | `circular` / `aurora` / `bounce` / `wave` / `pulse` / `stardust`。 |\n| `m-loading-background` | 遮罩背景色。 |\n| `m-loading-custom-class` | 加在遮罩上的类名。 |\n| `m-loading-delay` | 显示前延迟（ms）。 |\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `loading` | `boolean` | `true` | 包裹内容或 `fullscreen` 时是否显示遮罩。单独指示器始终显示。 |\n| `effect` | `'circular' \\| 'aurora' \\| 'bounce' \\| 'wave' \\| 'pulse' \\| 'stardust'` | `'circular'` | 动效。可用 `componentDefaults.Loading.effect` 改默认值。 |\n| `text` | `string` | — | 指示器下方文案。不传则不显示。 |\n| `ariaLabel` | `string` | locale `loading` | 无文案时的可访问名称。有文案时以文案为准。 |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | 指示器缩放。 |\n| `background` | `string` | — | 遮罩背景，任意 CSS 颜色。 |\n| `customClass` | `string` | — | 加在遮罩上的类名。 |\n| `fullscreen` | `boolean` | `false` | 遮罩铺满视口（Teleport 到 `body`）。 |\n| `lock` | `boolean` | `false` | 显示时禁止页面滚动。 |\n| `delay` | `number` | `0` | 显示前延迟（ms）。 |\n| `transition` | `string \\| false` | `'loading'` | 进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs)。 |\n\n## Events\n\n无自定义事件。\n\n## Slots\n\n| 插槽名 | 说明 |\n| --- | --- |\n| `default` | 被遮罩盖住的内容。 |\n| `indicator` | 替换遮罩中的指示器。仅在有默认插槽或 `fullscreen` 时生效。 |\n\n## 服务\n\n`loading.service(options)` 返回 `{ close, setText }`。`useLoading(defaults)` 返回 `{ open, close, setText }`。\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `target` | `string \\| HTMLElement` | — | 要盖住的元素或选择器。省略则为全屏。 |\n| `fullscreen` | `boolean` | 无 `target` 时为 `true` | 铺满视口。 |\n| `body` | `boolean` | `false` | 遮罩挂到 `body`，定位到 `target` 上。 |\n| `lock` | `boolean` | `false` | 锁定页面滚动。 |\n| `text` | `string` | — | 文案。 |\n| `effect` | 同组件 | `'circular'` | 动效。 |\n| `spinner` | `MRenderable` | — | 自定义指示器；设置后忽略内置 `effect`。 |\n| `background` | `string` | — | 遮罩背景。 |\n| `customClass` | `string` | — | 遮罩类名。 |\n| `size` | 同组件 | — | 指示器尺寸。 |\n| `delay` | `number` | — | 显示前延迟（ms）。 |\n\n## 主题\n\n指示器颜色走语义色：`--m-color-primary`、`--m-color-success`、`--m-color-warning`、`--m-color-danger`、`--m-color-text-muted`。遮罩默认是表面色的半透明混合，可用 `background` 或 `--m-loading-mask-bg` 覆盖。全屏层级是 `--m-loading-z-index`（默认 `--m-z-base + 200`）。\n\n主题动效为 `reduced` 或 `none` 时循环动效关闭。\n\n## 无障碍\n\n- 指示器使用 `role=\"status\"`。\n- 遮罩区域设置 `aria-busy`，被盖住的内容设为 `inert`。\n- 不要只靠动画表示加载；需要说明时传入 `text`。\n"
         },
         "en-US": {
           "title": "Loading",
@@ -13549,7 +13595,7 @@
             {
               "id": "theme",
               "title": "Theme",
-              "body": "Indicator colors use semantic tokens: `--m-color-primary`, `--m-color-success`, `--m-color-warning`, `--m-color-danger`, and `--m-color-text-muted`. The mask defaults to a translucent surface mix. Override it with `background` or `--m-loading-mask-bg`. Fullscreen stacking uses `--m-loading-z-index` (default `--m-z-base + 200`).\n\nLooping motion is disabled under `prefers-reduced-motion: reduce`."
+              "body": "Indicator colors use semantic tokens: `--m-color-primary`, `--m-color-success`, `--m-color-warning`, `--m-color-danger`, and `--m-color-text-muted`. The mask defaults to a translucent surface mix. Override it with `background` or `--m-loading-mask-bg`. Fullscreen stacking uses `--m-loading-z-index` (default `--m-z-base + 200`).\n\nLooping motion stops when theme motion is `reduced` or `none`."
             },
             {
               "id": "accessibility",
@@ -13557,7 +13603,7 @@
               "body": "- The indicator uses `role=\"status\"`.\n- The masked region sets `aria-busy`, and covered content is `inert`.\n- Do not rely on motion alone; pass `text` when the wait needs an explanation."
             }
           ],
-          "markdown": "---\ntitle: Loading\ncategory: 05 / FEEDBACK\ndescription: Loading indicator and mask, with multiple effects, a region overlay, the v-loading directive, and an imperative service.\n---\n\n# Loading\n\nRegion or fullscreen loading feedback. Render an indicator on its own, cover a block of content, or open a mask on any node with the directive or service.\n\nBuilt-in graphics are a circular spinner, aurora ring, bouncing balls, wave bars, pulse rings, and stardust. The default is the circular spinner (`effect=\"circular\"`). Set `componentDefaults.Loading.effect` to change the global default.\n\nFullscreen masks teleport to `body` so parent `overflow` / `transform` cannot clip them. Only one fullscreen instance stays open at a time.\n\n## Import\n\n```ts\nimport { loading, MLoading, useLoading, vLoading } from 'morya-ui'\n```\n\n`app.use(MoryaUI)` registers `v-loading`. For on-demand usage, import `vLoading` in `<script setup>` and the template can use the directive.\n\n## Effects\n\n```vue preview src=\"./demos/Effects.vue\"\n```\n\n## Region\n\nWrap content with the component, or put `v-loading` on an element. Omit `text` to hide the caption; screen readers still get the locale `loading` string. Use `delay` to avoid a flash on short requests.\n\n```vue preview src=\"./demos/Region.en.vue\"\n```\n\n## Service\n\nWith no `target`, the mask covers the viewport. `close()` plays the leave transition before unmounting, and `setText()` changes the caption. `useLoading()` closes automatically when the caller unmounts.\n\n```vue preview src=\"./demos/Service.en.vue\"\n```\n\n```ts\nconst instance = loading.service({\n  text: 'Submitting',\n  effect: 'wave',\n  lock: true,\n})\ninstance.setText('Almost done')\ninstance.close()\n```\n\nCover one node, or pass a custom indicator:\n\n```ts\nloading.service({\n  target: '#panel',\n  text: 'Loading',\n})\n\nloading.service({\n  spinner: () => h('span', '…'),\n  text: 'Custom',\n})\n```\n\n```ts\nconst { open, close } = useLoading({ effect: 'wave' })\nopen({ text: 'Saving' })\nclose()\n```\n\n## Directive\n\n| Form | Description |\n| --- | --- |\n| `v-loading` | A boolean, or an object with `text`, `effect`, `background`, `lock`, `delay`, `spinner`, and related fields. |\n| `v-loading.fullscreen` | Fullscreen mask. |\n| `v-loading.lock` | Lock page scrolling while open. |\n| `v-loading.body` | Mount the mask on `body`, positioned over the element (tracks size changes). |\n| `m-loading-text` | Caption. |\n| `m-loading-effect` | `circular` / `aurora` / `bounce` / `wave` / `pulse` / `stardust`. |\n| `m-loading-background` | Mask background. |\n| `m-loading-custom-class` | Extra class on the mask. |\n| `m-loading-delay` | Delay before showing (ms). |\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `loading` | `boolean` | `true` | Mask visibility when wrapping content or using `fullscreen`. A bare indicator is always shown. |\n| `effect` | `'circular' \\| 'aurora' \\| 'bounce' \\| 'wave' \\| 'pulse' \\| 'stardust'` | `'circular'` | Graphic. Override the default with `componentDefaults.Loading.effect`. |\n| `text` | `string` | — | Caption under the indicator. Hidden when omitted. |\n| `ariaLabel` | `string` | locale `loading` | Accessible name when there is no caption. A caption is used as the name when present. |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | Indicator scale. |\n| `background` | `string` | — | Mask background, any CSS color. |\n| `customClass` | `string` | — | Extra class on the mask. |\n| `fullscreen` | `boolean` | `false` | Cover the viewport (teleported to `body`). |\n| `lock` | `boolean` | `false` | Prevent page scrolling while visible. |\n| `delay` | `number` | `0` | Delay before showing (ms). |\n| `transition` | `string \\| false` | `'loading'` | Enter/exit motion preset; `false` / `'none'` disables. See [Motion](/docs/motion). |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n## Events\n\nNo custom events.\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `default` | Content covered by the mask. |\n| `indicator` | Replaces the indicator inside the mask. Used when there is a default slot or `fullscreen`. |\n\n## Service\n\n`loading.service(options)` returns `{ close, setText }`. `useLoading(defaults)` returns `{ open, close, setText }`.\n\n| Option | Type | Default | Description |\n| --- | --- | --- | --- |\n| `target` | `string \\| HTMLElement` | — | Element or selector to cover. Omit for fullscreen. |\n| `fullscreen` | `boolean` | `true` when `target` is omitted | Cover the viewport. |\n| `body` | `boolean` | `false` | Mount the mask on `body`, positioned over `target`. |\n| `lock` | `boolean` | `false` | Lock page scrolling. |\n| `text` | `string` | — | Caption. |\n| `effect` | same as the component | `'circular'` | Graphic. |\n| `spinner` | `MRenderable` | — | Custom indicator; skips built-in effects when set. |\n| `background` | `string` | — | Mask background. |\n| `customClass` | `string` | — | Extra mask class. |\n| `size` | same as the component | — | Indicator size. |\n| `delay` | `number` | — | Delay before showing (ms). |\n\n## Theme\n\nIndicator colors use semantic tokens: `--m-color-primary`, `--m-color-success`, `--m-color-warning`, `--m-color-danger`, and `--m-color-text-muted`. The mask defaults to a translucent surface mix. Override it with `background` or `--m-loading-mask-bg`. Fullscreen stacking uses `--m-loading-z-index` (default `--m-z-base + 200`).\n\nLooping motion is disabled under `prefers-reduced-motion: reduce`.\n\n## Accessibility\n\n- The indicator uses `role=\"status\"`.\n- The masked region sets `aria-busy`, and covered content is `inert`.\n- Do not rely on motion alone; pass `text` when the wait needs an explanation.\n"
+          "markdown": "---\ntitle: Loading\ncategory: 05 / FEEDBACK\ndescription: Loading indicator and mask, with multiple effects, a region overlay, the v-loading directive, and an imperative service.\n---\n\n# Loading\n\nRegion or fullscreen loading feedback. Render an indicator on its own, cover a block of content, or open a mask on any node with the directive or service.\n\nBuilt-in graphics are a circular spinner, aurora ring, bouncing balls, wave bars, pulse rings, and stardust. The default is the circular spinner (`effect=\"circular\"`). Set `componentDefaults.Loading.effect` to change the global default.\n\nFullscreen masks teleport to `body` so parent `overflow` / `transform` cannot clip them. Only one fullscreen instance stays open at a time.\n\n## Import\n\n```ts\nimport { loading, MLoading, useLoading, vLoading } from 'morya-ui'\n```\n\n`app.use(MoryaUI)` registers `v-loading`. For on-demand usage, import `vLoading` in `<script setup>` and the template can use the directive.\n\n## Effects\n\n```vue preview src=\"./demos/Effects.vue\"\n```\n\n## Region\n\nWrap content with the component, or put `v-loading` on an element. Omit `text` to hide the caption; screen readers still get the locale `loading` string. Use `delay` to avoid a flash on short requests.\n\n```vue preview src=\"./demos/Region.en.vue\"\n```\n\n## Service\n\nWith no `target`, the mask covers the viewport. `close()` plays the leave transition before unmounting, and `setText()` changes the caption. `useLoading()` closes automatically when the caller unmounts.\n\n```vue preview src=\"./demos/Service.en.vue\"\n```\n\n```ts\nconst instance = loading.service({\n  text: 'Submitting',\n  effect: 'wave',\n  lock: true,\n})\ninstance.setText('Almost done')\ninstance.close()\n```\n\nCover one node, or pass a custom indicator:\n\n```ts\nloading.service({\n  target: '#panel',\n  text: 'Loading',\n})\n\nloading.service({\n  spinner: () => h('span', '…'),\n  text: 'Custom',\n})\n```\n\n```ts\nconst { open, close } = useLoading({ effect: 'wave' })\nopen({ text: 'Saving' })\nclose()\n```\n\n## Directive\n\n| Form | Description |\n| --- | --- |\n| `v-loading` | A boolean, or an object with `text`, `effect`, `background`, `lock`, `delay`, `spinner`, and related fields. |\n| `v-loading.fullscreen` | Fullscreen mask. |\n| `v-loading.lock` | Lock page scrolling while open. |\n| `v-loading.body` | Mount the mask on `body`, positioned over the element (tracks size changes). |\n| `m-loading-text` | Caption. |\n| `m-loading-effect` | `circular` / `aurora` / `bounce` / `wave` / `pulse` / `stardust`. |\n| `m-loading-background` | Mask background. |\n| `m-loading-custom-class` | Extra class on the mask. |\n| `m-loading-delay` | Delay before showing (ms). |\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `loading` | `boolean` | `true` | Mask visibility when wrapping content or using `fullscreen`. A bare indicator is always shown. |\n| `effect` | `'circular' \\| 'aurora' \\| 'bounce' \\| 'wave' \\| 'pulse' \\| 'stardust'` | `'circular'` | Graphic. Override the default with `componentDefaults.Loading.effect`. |\n| `text` | `string` | — | Caption under the indicator. Hidden when omitted. |\n| `ariaLabel` | `string` | locale `loading` | Accessible name when there is no caption. A caption is used as the name when present. |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | Indicator scale. |\n| `background` | `string` | — | Mask background, any CSS color. |\n| `customClass` | `string` | — | Extra class on the mask. |\n| `fullscreen` | `boolean` | `false` | Cover the viewport (teleported to `body`). |\n| `lock` | `boolean` | `false` | Prevent page scrolling while visible. |\n| `delay` | `number` | `0` | Delay before showing (ms). |\n| `transition` | `string \\| false` | `'loading'` | Enter/exit motion preset; `false` / `'none'` disables. See [Motion](/docs/motion). |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n## Events\n\nNo custom events.\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `default` | Content covered by the mask. |\n| `indicator` | Replaces the indicator inside the mask. Used when there is a default slot or `fullscreen`. |\n\n## Service\n\n`loading.service(options)` returns `{ close, setText }`. `useLoading(defaults)` returns `{ open, close, setText }`.\n\n| Option | Type | Default | Description |\n| --- | --- | --- | --- |\n| `target` | `string \\| HTMLElement` | — | Element or selector to cover. Omit for fullscreen. |\n| `fullscreen` | `boolean` | `true` when `target` is omitted | Cover the viewport. |\n| `body` | `boolean` | `false` | Mount the mask on `body`, positioned over `target`. |\n| `lock` | `boolean` | `false` | Lock page scrolling. |\n| `text` | `string` | — | Caption. |\n| `effect` | same as the component | `'circular'` | Graphic. |\n| `spinner` | `MRenderable` | — | Custom indicator; skips built-in effects when set. |\n| `background` | `string` | — | Mask background. |\n| `customClass` | `string` | — | Extra mask class. |\n| `size` | same as the component | — | Indicator size. |\n| `delay` | `number` | — | Delay before showing (ms). |\n\n## Theme\n\nIndicator colors use semantic tokens: `--m-color-primary`, `--m-color-success`, `--m-color-warning`, `--m-color-danger`, and `--m-color-text-muted`. The mask defaults to a translucent surface mix. Override it with `background` or `--m-loading-mask-bg`. Fullscreen stacking uses `--m-loading-z-index` (default `--m-z-base + 200`).\n\nLooping motion stops when theme motion is `reduced` or `none`.\n\n## Accessibility\n\n- The indicator uses `role=\"status\"`.\n- The masked region sets `aria-busy`, and covered content is `inert`.\n- Do not rely on motion alone; pass `text` when the wait needs an explanation.\n"
         }
       }
     },
@@ -15199,19 +15245,54 @@
       "props": [
         {
           "name": "density",
-          "type": "'default' | 'compact' | 'spacious'",
-          "description": "子区块垂直间距。"
+          "type": "'default' | 'compact'",
+          "description": "`compact` 缩小主数值字号。"
         },
         {
           "name": "width",
           "type": "'full' | 'narrow'",
           "description": "`narrow` 约 42rem，适合表单页。"
         },
+        {
+          "name": "bands",
+          "type": "'auto' | 'uniform'",
+          "description": "`auto` 收紧 Header/筛选/Toolbar 与表格之间的 band；`uniform` 仅用 `gap`。"
+        },
         {
           "name": "ariaLabel",
           "type": "string",
           "description": "无障碍标签。"
         },
+        {
+          "name": "variant",
+          "type": "'default' | 'muted' | 'form' | 'actions'",
+          "description": "视觉变体；`muted` 与 Table header 同色浅底；`form` 渲染为 `MCard` 表面。"
+        },
+        {
+          "name": "collapsible",
+          "type": "boolean",
+          "description": "为 true 且提供 `#advanced` 时显示展开/收起。"
+        },
+        {
+          "name": "expanded",
+          "type": "boolean",
+          "description": "高级区展开状态（`v-model:expanded`）。"
+        },
+        {
+          "name": "expandLabel",
+          "type": "string",
+          "description": "覆盖默认展开/收起文案。"
+        },
+        {
+          "name": "collapseLabel",
+          "type": "string",
+          "description": "覆盖默认展开/收起文案。"
+        },
+        {
+          "name": "label",
+          "type": "string",
+          "description": "指标名称。"
+        },
         {
           "name": "title",
           "type": "string",
@@ -15227,35 +15308,55 @@
           "type": "string",
           "description": "占位说明。"
         },
-        {
-          "name": "variant",
-          "type": "'default' | 'muted' | 'form' | 'actions'",
-          "description": "视觉变体。"
-        },
-        {
-          "name": "label",
-          "type": "string",
-          "description": "指标名称。"
-        },
         {
           "name": "value",
           "type": "string | number",
-          "description": "主数值。"
+          "description": "主数值（等宽数字）。"
         },
         {
           "name": "trend",
           "type": "string",
-          "description": "变化量或说明。"
+          "description": "变化量，渲染为与 `MStatus` 同色的文本。"
         },
         {
           "name": "trendSeverity",
           "type": "'primary' | 'success' | 'warn' | 'danger' | 'secondary'",
           "description": "趋势色。"
         },
+        {
+          "name": "trendDirection",
+          "type": "'up' | 'down'",
+          "description": "在趋势旁显示升/降箭头。"
+        },
+        {
+          "name": "trendLabel",
+          "type": "string",
+          "description": "趋势后的弱说明，如「较上月」。"
+        },
         {
           "name": "icon",
           "type": "string",
-          "description": "右侧图标名。"
+          "description": "右侧弱化图标名。"
+        },
+        {
+          "name": "loading",
+          "type": "boolean",
+          "description": "用骨架屏代替数值与趋势。"
+        },
+        {
+          "name": "shadow",
+          "type": "'never' | 'hover' | 'always'",
+          "description": "透传 `MCard.shadow`（`layout=\"plain\"` 时无效）。"
+        },
+        {
+          "name": "layout",
+          "type": "'card' | 'plain'",
+          "description": "`plain` 无 Card 壳，适合横排 KPI 条。"
+        },
+        {
+          "name": "orientation",
+          "type": "'stacked' | 'inline'",
+          "description": "`inline` 标签与数值同一行。"
         },
         {
           "name": "minHeight",
@@ -15267,11 +15368,35 @@
       "slots": [
         {
           "name": "default",
-          "description": "无 `title` 时的左侧内容。"
+          "description": "自定义说明内容。"
+        },
+        {
+          "name": "advanced",
+          "description": "折叠区（需 `collapsible`）。"
+        },
+        {
+          "name": "active",
+          "description": "可选；已选摘要（更常见是下方 `MPageFilterChips`）。"
         },
         {
           "name": "actions",
-          "description": "右侧操作。"
+          "description": "标题行右侧操作区。"
+        },
+        {
+          "name": "breadcrumb",
+          "description": "标题上方的面包屑（放 `MBreadcrumb`）。"
+        },
+        {
+          "name": "tags",
+          "description": "标题右侧的状态/分类标记（放 `MTag` / `MStatus`）。"
+        },
+        {
+          "name": "icon",
+          "description": "自定义图标/插画。"
+        },
+        {
+          "name": "extra",
+          "description": "下一步操作区（如按钮）。"
         }
       ],
       "methods": [],
@@ -15282,7 +15407,7 @@
           "sectionId": "引入",
           "lang": "ts",
           "preview": false,
-          "code": "import {\n  MPageContent,\n  MPageFilters,\n  MPageHeader,\n  MPagePlaceholder,\n  MPageSection,\n  MPageStat,\n  MPageToolbar,\n} from 'morya-ui'",
+          "code": "import {\n  MPageContent,\n  MPageFilterChips,\n  MPageFilters,\n  MPageHeader,\n  MPagePlaceholder,\n  MPageSection,\n  MPageStat,\n  MPageToolbar,\n} from 'morya-ui'",
           "locale": "zh-CN"
         },
         {
@@ -15291,7 +15416,16 @@
           "sectionId": "列表页组合",
           "lang": "vue",
           "preview": true,
-          "code": "<script setup lang=\"ts\">\nimport {\n  MButton,\n  MInput,\n  MPageContent,\n  MPageFilters,\n  MPageToolbar,\n  MSpace,\n} from 'morya-ui'\nimport { ref } from 'vue'\n\nconst keyword = ref('')\n</script>\n\n<template>\n  <div\n    class=\"doc-demo-frame\"\n    style=\"border:1px solid var(--m-color-border);border-radius:var(--m-radius-md);overflow:hidden;background:var(--m-color-surface)\"\n  >\n    <MPageContent>\n      <MPageFilters aria-label=\"筛选\">\n        <MSpace wrap>\n          <MInput v-model=\"keyword\" placeholder=\"搜索\" clearable class=\"w-48\" />\n          <MButton severity=\"primary\">\n            查询\n          </MButton>\n        </MSpace>\n      </MPageFilters>\n      <MPageToolbar title=\"用户管理\">\n        <template #actions>\n          <MButton severity=\"primary\">\n            新建\n          </MButton>\n        </template>\n      </MPageToolbar>\n    </MPageContent>\n  </div>\n</template>",
+          "code": "<script setup lang=\"ts\">\nimport {\n  MButton,\n  MInput,\n  MPageContent,\n  MPageFilters,\n  MPageHeader,\n  MPageToolbar,\n  MSpace,\n} from 'morya-ui'\nimport { ref } from 'vue'\n\nconst keyword = ref('')\n</script>\n\n<template>\n  <div\n    class=\"doc-demo-frame\"\n    style=\"border:1px solid var(--m-color-border);border-radius:var(--m-radius-md);overflow:visible;background:var(--m-color-surface)\"\n  >\n    <MPageContent>\n      <MPageHeader title=\"用户管理\" description=\"维护账号与角色。\">\n        <template #actions>\n          <MButton severity=\"primary\">\n            新建\n          </MButton>\n        </template>\n      </MPageHeader>\n      <MPageFilters aria-label=\"筛选\" variant=\"filled\">\n        <MSpace wrap>\n          <MInput v-model=\"keyword\" placeholder=\"搜索\" clearable class=\"w-48\" />\n          <MButton severity=\"secondary\">\n            查询\n          </MButton>\n        </MSpace>\n      </MPageFilters>\n      <MPageToolbar>\n        <span style=\"color:var(--m-color-text-muted);font-size:var(--m-font-size-sm)\">已选 0 项</span>\n        <template #actions>\n          <MButton severity=\"secondary\" text>\n            导出\n          </MButton>\n          <MButton severity=\"danger\" text>\n            删除\n          </MButton>\n        </template>\n      </MPageToolbar>\n    </MPageContent>\n  </div>\n</template>",
+          "locale": "zh-CN"
+        },
+        {
+          "id": "列表页组合-2",
+          "section": "列表页组合",
+          "sectionId": "列表页组合",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport {\n  MButton,\n  MInput,\n  MPageContent,\n  MPageFilterChips,\n  MPageFilters,\n  MPageHeader,\n  MSelect,\n  MSpace,\n  MTag,\n} from 'morya-ui'\nimport { computed, ref } from 'vue'\n\nconst keyword = ref('')\nconst status = ref<string | null>('active')\nconst filtersExpanded = ref(false)\nconst department = ref<string | null>(null)\n\nconst activeFilters = computed(() => {\n  const items: Array<{ key: string; label: string }> = []\n  if (keyword.value.trim()) {\n    items.push({ key: 'keyword', label: `关键词：${keyword.value.trim()}` })\n  }\n  if (status.value && status.value !== 'all') {\n    items.push({ key: 'status', label: `状态：${status.value === 'active' ? '启用' : '停用'}` })\n  }\n  if (department.value) {\n    items.push({ key: 'department', label: `部门：${department.value}` })\n  }\n  return items\n})\n\nfunction clearFilter(key: string) {\n  if (key === 'keyword') keyword.value = ''\n  if (key === 'status') status.value = 'all'\n  if (key === 'department') department.value = null\n}\n\nfunction resetAll() {\n  keyword.value = ''\n  status.value = 'all'\n  department.value = null\n}\n</script>\n\n<template>\n  <div\n    class=\"doc-demo-frame\"\n    style=\"border:1px solid var(--m-color-border);border-radius:var(--m-radius-md);overflow:visible;background:var(--m-color-surface)\"\n  >\n    <MPageContent>\n      <MPageHeader title=\"用户管理\" description=\"折叠高级筛选，已选条件用 Tag 展示。\">\n        <template #actions>\n          <MButton severity=\"primary\">\n            新建\n          </MButton>\n        </template>\n      </MPageHeader>\n      <MPageFilters\n        v-model:expanded=\"filtersExpanded\"\n        aria-label=\"筛选\"\n        variant=\"filled\"\n        collapsible\n      >\n        <MSpace wrap>\n          <MInput v-model=\"keyword\" placeholder=\"搜索名称\" clearable style=\"width: 14rem\" />\n          <MSelect\n            v-model=\"status\"\n            :options=\"[\n              { label: '全部', value: 'all' },\n              { label: '启用', value: 'active' },\n              { label: '停用', value: 'inactive' },\n            ]\"\n            placeholder=\"状态\"\n            style=\"width: 10rem\"\n          />\n          <MButton severity=\"secondary\">\n            查询\n          </MButton>\n          <MButton severity=\"secondary\" text @click=\"resetAll\">\n            重置\n          </MButton>\n        </MSpace>\n        <template #advanced>\n          <MSpace wrap>\n            <MSelect\n              v-model=\"department\"\n              :options=\"[\n                { label: '研发', value: '研发' },\n                { label: '运营', value: '运营' },\n              ]\"\n              placeholder=\"部门\"\n              clearable\n              style=\"width: 10rem\"\n            />\n          </MSpace>\n        </template>\n      </MPageFilters>\n      <MPageFilterChips v-if=\"activeFilters.length\" label=\"已选\" aria-label=\"已选筛选\">\n        <MTag\n          v-for=\"item in activeFilters\"\n          :key=\"item.key\"\n          :value=\"item.label\"\n          size=\"small\"\n          bordered\n          closable\n          @close=\"clearFilter(item.key)\"\n        />\n      </MPageFilterChips>\n    </MPageContent>\n  </div>\n</template>",
           "locale": "zh-CN"
         },
         {
@@ -15309,7 +15443,16 @@
           "sectionId": "仪表盘-kpi",
           "lang": "vue",
           "preview": true,
-          "code": "<script setup lang=\"ts\">\nimport { MPageContent, MPageStat } from 'morya-ui'\n</script>\n\n<template>\n  <div\n    class=\"doc-demo-frame\"\n    style=\"border:1px solid var(--m-color-border);border-radius:var(--m-radius-md);overflow:hidden;background:var(--m-color-surface)\"\n  >\n    <MPageContent density=\"compact\">\n      <MPageStat label=\"总用户\" value=\"12,480\" trend=\"+8.2%\" icon=\"user\" />\n    </MPageContent>\n  </div>\n</template>",
+          "code": "<script setup lang=\"ts\">\nimport { MPageContent, MPageStat } from 'morya-ui'\n</script>\n\n<template>\n  <div\n    class=\"doc-demo-frame\"\n    style=\"border:1px solid var(--m-color-border);border-radius:var(--m-radius-md);overflow:hidden;background:var(--m-color-surface)\"\n  >\n    <MPageContent density=\"compact\">\n      <MPageStat\n        label=\"总用户\"\n        value=\"12,480\"\n        trend=\"+8.2%\"\n        trend-direction=\"up\"\n        trend-label=\"较上月\"\n        trend-severity=\"success\"\n        icon=\"user\"\n        shadow=\"hover\"\n      />\n      <MPageStat\n        label=\"待处理工单\"\n        value=\"47\"\n        trend=\"-12%\"\n        loading\n        icon=\"clipboard\"\n      />\n    </MPageContent>\n  </div>\n</template>",
+          "locale": "zh-CN"
+        },
+        {
+          "id": "仪表盘-kpi-2",
+          "section": "仪表盘 KPI",
+          "sectionId": "仪表盘-kpi",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MGrid, MGridItem, MPageContent, MPageStat } from 'morya-ui'\n</script>\n\n<template>\n  <div\n    class=\"doc-demo-frame\"\n    style=\"border:1px solid var(--m-color-border);border-radius:var(--m-radius-md);overflow:visible;background:var(--m-color-surface)\"\n  >\n    <MPageContent density=\"compact\">\n      <MGrid :cols=\"2\" :x-gap=\"16\" :y-gap=\"12\" responsive=\"screen\">\n        <MGridItem :span=\"1\">\n          <MPageStat\n            label=\"今日订单\"\n            value=\"1,284\"\n            trend=\"+6.1%\"\n            trend-direction=\"up\"\n            trend-severity=\"success\"\n            layout=\"plain\"\n            orientation=\"inline\"\n            density=\"compact\"\n          />\n        </MGridItem>\n        <MGridItem :span=\"1\">\n          <MPageStat\n            label=\"待处理\"\n            value=\"47\"\n            layout=\"plain\"\n            orientation=\"inline\"\n            density=\"compact\"\n          />\n        </MGridItem>\n        <MGridItem :span=\"2\">\n          <MPageStat\n            label=\"总用户\"\n            value=\"12,480\"\n            trend=\"+8.2%\"\n            trend-direction=\"up\"\n            trend-label=\"较上月\"\n            trend-severity=\"success\"\n            icon=\"user\"\n            shadow=\"hover\"\n          />\n        </MGridItem>\n      </MGrid>\n    </MPageContent>\n  </div>\n</template>",
           "locale": "zh-CN"
         },
         {
@@ -15318,7 +15461,7 @@
           "sectionId": "import",
           "lang": "ts",
           "preview": false,
-          "code": "import {\n  MPageContent,\n  MPageFilters,\n  MPageHeader,\n  MPagePlaceholder,\n  MPageSection,\n  MPageStat,\n  MPageToolbar,\n} from 'morya-ui'",
+          "code": "import {\n  MPageContent,\n  MPageFilterChips,\n  MPageFilters,\n  MPageHeader,\n  MPagePlaceholder,\n  MPageSection,\n  MPageStat,\n  MPageToolbar,\n} from 'morya-ui'",
           "locale": "en-US"
         },
         {
@@ -15327,7 +15470,25 @@
           "sectionId": "list-page-stack",
           "lang": "vue",
           "preview": true,
-          "code": "<script setup lang=\"ts\">\nimport {\n  MButton,\n  MInput,\n  MPageContent,\n  MPageFilters,\n  MPageToolbar,\n  MSpace,\n} from 'morya-ui'\nimport { ref } from 'vue'\n\nconst keyword = ref('')\n</script>\n\n<template>\n  <div\n    class=\"doc-demo-frame\"\n    style=\"border:1px solid var(--m-color-border);border-radius:var(--m-radius-md);overflow:hidden;background:var(--m-color-surface)\"\n  >\n    <MPageContent>\n      <MPageFilters aria-label=\"Filters\">\n        <MSpace wrap>\n          <MInput v-model=\"keyword\" placeholder=\"Search\" clearable class=\"w-48\" />\n          <MButton severity=\"primary\">\n            Search\n          </MButton>\n        </MSpace>\n      </MPageFilters>\n      <MPageToolbar title=\"Users\">\n        <template #actions>\n          <MButton severity=\"primary\">\n            Create\n          </MButton>\n        </template>\n      </MPageToolbar>\n    </MPageContent>\n  </div>\n</template>",
+          "code": "<script setup lang=\"ts\">\nimport {\n  MButton,\n  MInput,\n  MPageContent,\n  MPageFilters,\n  MPageHeader,\n  MPageToolbar,\n  MSpace,\n} from 'morya-ui'\nimport { ref } from 'vue'\n\nconst keyword = ref('')\n</script>\n\n<template>\n  <div\n    class=\"doc-demo-frame\"\n    style=\"border:1px solid var(--m-color-border);border-radius:var(--m-radius-md);overflow:visible;background:var(--m-color-surface)\"\n  >\n    <MPageContent>\n      <MPageHeader title=\"Users\" description=\"Manage accounts and roles.\">\n        <template #actions>\n          <MButton severity=\"primary\">\n            Create\n          </MButton>\n        </template>\n      </MPageHeader>\n      <MPageFilters aria-label=\"Filters\" variant=\"filled\">\n        <MSpace wrap>\n          <MInput v-model=\"keyword\" placeholder=\"Search\" clearable class=\"w-48\" />\n          <MButton severity=\"secondary\">\n            Search\n          </MButton>\n        </MSpace>\n      </MPageFilters>\n      <MPageToolbar>\n        <span style=\"color:var(--m-color-text-muted);font-size:var(--m-font-size-sm)\">0 selected</span>\n        <template #actions>\n          <MButton severity=\"secondary\" text>\n            Export\n          </MButton>\n          <MButton severity=\"danger\" text>\n            Delete\n          </MButton>\n        </template>\n      </MPageToolbar>\n    </MPageContent>\n  </div>\n</template>",
+          "locale": "en-US"
+        },
+        {
+          "id": "list-page-stack-2",
+          "section": "List page stack",
+          "sectionId": "list-page-stack",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport {\n  MButton,\n  MInput,\n  MPageContent,\n  MPageFilterChips,\n  MPageFilters,\n  MPageHeader,\n  MSelect,\n  MSpace,\n  MTag,\n} from 'morya-ui'\nimport { computed, ref } from 'vue'\n\nconst keyword = ref('')\nconst status = ref<string | null>('active')\nconst filtersExpanded = ref(false)\nconst department = ref<string | null>(null)\n\nconst activeFilters = computed(() => {\n  const items: Array<{ key: string; label: string }> = []\n  if (keyword.value.trim()) {\n    items.push({ key: 'keyword', label: `Keyword: ${keyword.value.trim()}` })\n  }\n  if (status.value && status.value !== 'all') {\n    items.push({\n      key: 'status',\n      label: `Status: ${status.value === 'active' ? 'Active' : 'Inactive'}`,\n    })\n  }\n  if (department.value) {\n    items.push({ key: 'department', label: `Department: ${department.value}` })\n  }\n  return items\n})\n\nfunction clearFilter(key: string) {\n  if (key === 'keyword') keyword.value = ''\n  if (key === 'status') status.value = 'all'\n  if (key === 'department') department.value = null\n}\n\nfunction resetAll() {\n  keyword.value = ''\n  status.value = 'all'\n  department.value = null\n}\n</script>\n\n<template>\n  <div\n    class=\"doc-demo-frame\"\n    style=\"border:1px solid var(--m-color-border);border-radius:var(--m-radius-md);overflow:visible;background:var(--m-color-surface)\"\n  >\n    <MPageContent>\n      <MPageHeader title=\"Users\" description=\"Collapsible advanced filters and active tags.\">\n        <template #actions>\n          <MButton severity=\"primary\">\n            Create\n          </MButton>\n        </template>\n      </MPageHeader>\n      <MPageFilters\n        v-model:expanded=\"filtersExpanded\"\n        aria-label=\"Filters\"\n        variant=\"filled\"\n        collapsible\n      >\n        <MSpace wrap>\n          <MInput v-model=\"keyword\" placeholder=\"Search name\" clearable style=\"width: 14rem\" />\n          <MSelect\n            v-model=\"status\"\n            :options=\"[\n              { label: 'All', value: 'all' },\n              { label: 'Active', value: 'active' },\n              { label: 'Inactive', value: 'inactive' },\n            ]\"\n            placeholder=\"Status\"\n            style=\"width: 10rem\"\n          />\n          <MButton severity=\"secondary\">\n            Search\n          </MButton>\n          <MButton severity=\"secondary\" text @click=\"resetAll\">\n            Reset\n          </MButton>\n        </MSpace>\n        <template #advanced>\n          <MSpace wrap>\n            <MSelect\n              v-model=\"department\"\n              :options=\"[\n                { label: 'Engineering', value: 'Engineering' },\n                { label: 'Operations', value: 'Operations' },\n              ]\"\n              placeholder=\"Department\"\n              clearable\n              style=\"width: 10rem\"\n            />\n          </MSpace>\n        </template>\n      </MPageFilters>\n      <MPageFilterChips v-if=\"activeFilters.length\" label=\"Active\" aria-label=\"Active filters\">\n        <MTag\n          v-for=\"item in activeFilters\"\n          :key=\"item.key\"\n          :value=\"item.label\"\n          size=\"small\"\n          bordered\n          closable\n          @close=\"clearFilter(item.key)\"\n        />\n      </MPageFilterChips>\n    </MPageContent>\n  </div>\n</template>",
+          "locale": "en-US"
+        },
+        {
+          "id": "dashboard-kpi-1",
+          "section": "Dashboard KPI",
+          "sectionId": "dashboard-kpi",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MGrid, MGridItem, MPageContent, MPageStat } from 'morya-ui'\n</script>\n\n<template>\n  <div\n    class=\"doc-demo-frame\"\n    style=\"border:1px solid var(--m-color-border);border-radius:var(--m-radius-md);overflow:visible;background:var(--m-color-surface)\"\n  >\n    <MPageContent density=\"compact\">\n      <MGrid :cols=\"2\" :x-gap=\"16\" :y-gap=\"12\" responsive=\"screen\">\n        <MGridItem :span=\"1\">\n          <MPageStat\n            label=\"Orders today\"\n            value=\"1,284\"\n            trend=\"+6.1%\"\n            trend-direction=\"up\"\n            trend-severity=\"success\"\n            layout=\"plain\"\n            orientation=\"inline\"\n            density=\"compact\"\n          />\n        </MGridItem>\n        <MGridItem :span=\"1\">\n          <MPageStat\n            label=\"Pending\"\n            value=\"47\"\n            layout=\"plain\"\n            orientation=\"inline\"\n            density=\"compact\"\n          />\n        </MGridItem>\n        <MGridItem :span=\"2\">\n          <MPageStat\n            label=\"Total users\"\n            value=\"12,480\"\n            trend=\"+8.2%\"\n            trend-direction=\"up\"\n            trend-label=\"vs last month\"\n            trend-severity=\"success\"\n            icon=\"user\"\n            shadow=\"hover\"\n          />\n        </MGridItem>\n      </MGrid>\n    </MPageContent>\n  </div>\n</template>",
           "locale": "en-US"
         }
       ],
@@ -15344,12 +15505,12 @@
             {
               "id": "引入",
               "title": "引入",
-              "body": "```ts\nimport {\n  MPageContent,\n  MPageFilters,\n  MPageHeader,\n  MPagePlaceholder,\n  MPageSection,\n  MPageStat,\n  MPageToolbar,\n} from 'morya-ui'\n```"
+              "body": "```ts\nimport {\n  MPageContent,\n  MPageFilterChips,\n  MPageFilters,\n  MPageHeader,\n  MPagePlaceholder,\n  MPageSection,\n  MPageStat,\n  MPageToolbar,\n} from 'morya-ui'\n```"
             },
             {
               "id": "列表页组合",
               "title": "列表页组合",
-              "body": "`MPageContent` 负责内容区 **padding**（默认 `--m-space-6`）与子区块 **gap**（默认 `--m-space-4`），文档预览中外框仅模拟 `MLayoutContent` 边界。\n\n```vue preview src=\"./demos/ListPageStack.zh.vue\"\n```"
+              "body": "`MPageContent` 负责内容区 **padding**（默认 `--m-space-6`）与子区块 **gap**（默认 `--m-space-4`），文档预览中外框仅模拟 `MLayoutContent` 边界。\n\n`MPageFilters` 默认是 **无框的控件行**（`variant=\"plain\"`）；需要一条可辨识的工具带时再用 `variant=\"filled\"`（与 Table header 相同的 `--m-color-fill-light`，无圆角）。`MPageHeader` 是页面身份（约 `--m-font-size-xl`）；`MPageToolbar` 是列表操作条（`--m-font-size-md`），不要当成第二页头。\n\n```vue preview src=\"./demos/ListPageStack.zh.vue\"\n```\n\n字段较多时：`MPageFilters collapsible` + `#advanced` 折叠高级项；已选条件用 `MPageFilterChips` 包一层 `MTag closable`（不要用自定义 dashed 壳）。\n\n```vue preview src=\"./demos/ListFiltersAdvanced.zh.vue\"\n```\n\n**面包屑**：路由级 trail 放在 `MLayoutHeader` 的 `MBreadcrumb`；若页内还需要上下文，用 `MPageHeader` 的 `#breadcrumb` 插槽——**不要**在 Layout 与 Page 各写一遍相同标题链。"
             },
             {
               "id": "表单页组合",
@@ -15359,20 +15520,20 @@
             {
               "id": "仪表盘-kpi",
               "title": "仪表盘 KPI",
-              "body": "```vue preview src=\"./demos/Kpi.vue\"\n```"
+              "body": "默认 `MPageStat` 为 Card 表面；密集条带可用 `layout=\"plain\"` + `orientation=\"inline\"` + `density=\"compact\"`。\n\n```vue preview src=\"./demos/Kpi.vue\"\n```\n\n```vue preview src=\"./demos/StatVariants.zh.vue\"\n```"
             },
             {
               "id": "组合规则",
               "title": "组合规则",
-              "body": "| 场景 | 推荐组件 | 避免 |\n| --- | --- | --- |\n| 内容区垂直堆叠 | `MPageContent` | 手写 `gap` / `padding` |\n| 筛选区 | `MPageFilters` + `MSpace` / `MFlex` | 额外包一层 `MCard` |\n| 标题 + 主操作 | `MPageToolbar` | 裸 `div` + `justify-content` |\n| 页面说明 | `MPageHeader` | 无层级的裸 `h1` |\n| 表单主体 | `MPageSection variant=\"form\"` | 重复边框的 `MCard` 嵌套 |\n| 列表表格 | 直接放 `MTable` | `MCard` 再包 `MTable bordered` |\n| KPI | `MPageStat` | 每页自定义 stat CSS |\n| 图表占位 | `MPagePlaceholder` |  dashed border 手写样式 |\n\n完整黄金样例用 MCP `get_golden_page`。**局部修改**时用 MCP `get_page_snippet`（如 `filters`、`toolbar`、`form-actions`）。"
+              "body": "| 场景 | 推荐组件 | 避免 |\n| --- | --- | --- |\n| 内容区垂直堆叠 | `MPageContent` | 手写 `gap` / `padding` |\n| 筛选区 | `MPageFilters` + `MSpace` / `MFlex` | 额外包一层 `MCard` |\n| 页面身份 + 页级操作 | `MPageHeader` | 无层级的裸 `h1` |\n| 列表操作条 | `MPageToolbar` | 把 Toolbar 当成第二页头 |\n| 表单主体 | `MPageSection variant=\"form\"`（内部即 `MCard` 表面） | 再包一层 `MCard` |\n| 列表表格 | 直接放 `MTable` | `MCard` 再包 `MTable bordered` |\n| KPI | `MPageStat` | 每页自定义 stat CSS |\n| 图表占位 | `MPagePlaceholder` 或 `MCard` + `MEmpty` | 虚线框 / 光晕手写样式 |\n\n完整黄金样例用 MCP `get_golden_page`。**局部修改**时用 MCP `get_page_snippet`（如 `filters`、`toolbar`、`form-actions`）。"
             },
             {
               "id": "api",
               "title": "API",
-              "body": "### MPageContent\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `density` | `'default' \\| 'compact' \\| 'spacious'` | `'default'` | 子区块垂直间距。 |\n| `width` | `'full' \\| 'narrow'` | `'full'` | `narrow` 约 42rem，适合表单页。 |\n\n### MPageFilters\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `ariaLabel` | `string` | — | 筛选区无障碍名称。 |\n\n### MPageToolbar\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `title` | `string` | — | 页面标题。 |\n| `headingLevel` | `1–6` | `1` | 标题层级。 |\n\n| Slot | 说明 |\n| --- | --- |\n| `default` | 无 `title` 时的左侧内容。 |\n| `actions` | 右侧操作区。 |\n\n### MPageHeader\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `title` | `string` | — | 页面标题。 |\n| `description` | `string` | — | 副标题/说明。 |\n| `headingLevel` | `1–6` | `1` | 标题层级。 |\n\n| Slot | 说明 |\n| --- | --- |\n| `actions` | 右侧操作。 |\n\n### MPageSection\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `variant` | `'default' \\| 'muted' \\| 'form' \\| 'actions'` | `'default'` | 视觉变体。 |\n| `title` | `string` | — | 可选分组标题。 |\n\n### MPageStat\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `label` | `string` | — | 指标名称。 |\n| `value` | `string \\| number` | — | 主数值。 |\n| `trend` | `string` | — | 变化量或说明。 |\n| `trendSeverity` | `'primary' \\| 'success' \\| 'warn' \\| 'danger' \\| 'secondary'` | `'primary'` | 趋势色。 |\n| `icon` | `string` | — | 右侧图标名。 |\n\n### MPagePlaceholder\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `description` | `string` | — | 占位说明。 |\n| `ariaLabel` | `string` | `'Placeholder'` | 无障碍标签。 |\n| `minHeight` | `number \\| string` | `'12rem'` | 最小高度。 |"
+              "body": "### MPageContent\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `density` | `'default' \\| 'compact' \\| 'spacious'` | `'default'` | 子区块垂直间距。 |\n| `width` | `'full' \\| 'narrow'` | `'full'` | `narrow` 约 42rem，适合表单页。 |\n| `bands` | `'auto' \\| 'uniform'` | `'auto'` | `auto` 收紧 Header/筛选/Toolbar 与表格之间的 band；`uniform` 仅用 `gap`。 |\n\n`bands=\"auto\"` 时可通过 CSS 变量微调：`--m-page-content-body-lead`、`--m-page-content-tools-pull`（见 `styles.css`）。\n\n### MPageFilters\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `ariaLabel` | `string` | — | 筛选区无障碍名称。 |\n| `variant` | `'plain' \\| 'filled'` | `'plain'` | 表面处理；`filled` 与 Table header 同色浅底，无圆角。 |\n| `collapsible` | `boolean` | `false` | 为 true 且提供 `#advanced` 时显示展开/收起。 |\n| `expanded` | `boolean` | `false` | 高级区展开状态（`v-model:expanded`）。 |\n| `expandLabel` / `collapseLabel` | `string` | — | 覆盖默认展开/收起文案。 |\n\n| Slot | 说明 |\n| --- | --- |\n| `default` | 常用筛选控件行。 |\n| `advanced` | 折叠区（需 `collapsible`）。 |\n| `active` | 可选；已选摘要（更常见是下方 `MPageFilterChips`）。 |\n\n### MPageFilterChips\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `label` | `string` | — | 弱前缀，如「已选」。 |\n| `ariaLabel` | `string` | — | 已选条件列表的无障碍名称。 |\n\n默认插槽放 `MTag closable` 或同类可移除标记。\n\n### MPageToolbar\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `title` | `string` | — | 操作条组名（`--m-font-size-md`），不是页面标题。 |\n| `headingLevel` | `1–6` | `1` | 标题层级。 |\n\n| Slot | 说明 |\n| --- | --- |\n| `default` | 无 `title` 时的左侧内容。 |\n| `actions` | 右侧操作区。 |\n\n### MPageHeader\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `title` | `string` | — | 页面标题（`--m-font-size-xl`）。 |\n| `description` | `string` | — | 副标题/说明。 |\n| `headingLevel` | `1–6` | `1` | 标题层级。 |\n\n| Slot | 说明 |\n| --- | --- |\n| `breadcrumb` | 标题上方的面包屑（放 `MBreadcrumb`）。 |\n| `tags` | 标题右侧的状态/分类标记（放 `MTag` / `MStatus`）。 |\n| `actions` | 右侧操作。 |\n\n### MPageSection\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `variant` | `'default' \\| 'muted' \\| 'form' \\| 'actions'` | `'default'` | 视觉变体；`muted` 与 Table header 同色浅底；`form` 渲染为 `MCard` 表面。 |\n| `title` | `string` | — | 可选分组标题。 |\n\n| Slot | 说明 |\n| --- | --- |\n| `actions` | 标题行右侧操作区。 |\n\n### MPageStat\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `label` | `string` | — | 指标名称。 |\n| `value` | `string \\| number` | — | 主数值（等宽数字）。 |\n| `trend` | `string` | — | 变化量，渲染为与 `MStatus` 同色的文本。 |\n| `trendSeverity` | `'primary' \\| 'success' \\| 'warn' \\| 'danger' \\| 'secondary'` | `'primary'` | 趋势色。 |\n| `trendDirection` | `'up' \\| 'down'` | — | 在趋势旁显示升/降箭头。 |\n| `trendLabel` | `string` | — | 趋势后的弱说明，如「较上月」。 |\n| `icon` | `string` | — | 右侧弱化图标名。 |\n| `loading` | `boolean` | `false` | 用骨架屏代替数值与趋势。 |\n| `shadow` | `'never' \\| 'hover' \\| 'always'` | `'always'` | 透传 `MCard.shadow`（`layout=\"plain\"` 时无效）。 |\n| `layout` | `'card' \\| 'plain'` | `'card'` | `plain` 无 Card 壳，适合横排 KPI 条。 |\n| `density` | `'default' \\| 'compact'` | `'default'` | `compact` 缩小主数值字号。 |\n| `orientation` | `'stacked' \\| 'inline'` | `'stacked'` | `inline` 标签与数值同一行。 |\n\n### MPagePlaceholder\n\n内部组合 `MEmpty`：默认展示空态插画与说明，可通过默认插槽自定义内容、`#icon` 自定义图标、`#extra` 放置下一步操作。\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `description` | `string` | — | 占位说明。 |\n| `ariaLabel` | `string` | `'Placeholder'` | 无障碍标签。 |\n| `minHeight` | `number \\| string` | `'12rem'` | 最小高度。 |\n\n| Slot | 说明 |\n| --- | --- |\n| `default` | 自定义说明内容。 |\n| `icon` | 自定义图标/插画。 |\n| `extra` | 下一步操作区（如按钮）。 |"
             }
           ],
-          "markdown": "---\ntitle: Page\ncategory: 06 / LAYOUT\ndescription: 业务页面组合区块，封装间距、边框与标题层级，少写或不写页面 CSS。\n---\n\n# Page\n\n业务页面组合组件。与 `MLayout` 搭配使用，把列表页筛选区、工具栏、表单分组、KPI 卡片等常见区块的间距和边框内聚到组件内，**优先用 Page 组件拼装页面，而不是每页手写 scoped CSS**。\n\n## 引入\n\n```ts\nimport {\n  MPageContent,\n  MPageFilters,\n  MPageHeader,\n  MPagePlaceholder,\n  MPageSection,\n  MPageStat,\n  MPageToolbar,\n} from 'morya-ui'\n```\n\n## 列表页组合\n\n`MPageContent` 负责内容区 **padding**（默认 `--m-space-6`）与子区块 **gap**（默认 `--m-space-4`），文档预览中外框仅模拟 `MLayoutContent` 边界。\n\n```vue preview src=\"./demos/ListPageStack.zh.vue\"\n```\n\n## 表单页组合\n\n`MPageContent width=\"narrow\"` 限制表单宽度；`MPageSection variant=\"form\"` 提供表单表面；`variant=\"actions\"` 用于底栏操作。\n\n```vue preview src=\"./demos/Demo2.vue\"\n```\n\n## 仪表盘 KPI\n\n```vue preview src=\"./demos/Kpi.vue\"\n```\n\n## 组合规则\n\n| 场景 | 推荐组件 | 避免 |\n| --- | --- | --- |\n| 内容区垂直堆叠 | `MPageContent` | 手写 `gap` / `padding` |\n| 筛选区 | `MPageFilters` + `MSpace` / `MFlex` | 额外包一层 `MCard` |\n| 标题 + 主操作 | `MPageToolbar` | 裸 `div` + `justify-content` |\n| 页面说明 | `MPageHeader` | 无层级的裸 `h1` |\n| 表单主体 | `MPageSection variant=\"form\"` | 重复边框的 `MCard` 嵌套 |\n| 列表表格 | 直接放 `MTable` | `MCard` 再包 `MTable bordered` |\n| KPI | `MPageStat` | 每页自定义 stat CSS |\n| 图表占位 | `MPagePlaceholder` |  dashed border 手写样式 |\n\n完整黄金样例用 MCP `get_golden_page`。**局部修改**时用 MCP `get_page_snippet`（如 `filters`、`toolbar`、`form-actions`）。\n\n## API\n\n### MPageContent\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `density` | `'default' \\| 'compact' \\| 'spacious'` | `'default'` | 子区块垂直间距。 |\n| `width` | `'full' \\| 'narrow'` | `'full'` | `narrow` 约 42rem，适合表单页。 |\n\n### MPageFilters\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `ariaLabel` | `string` | — | 筛选区无障碍名称。 |\n\n### MPageToolbar\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `title` | `string` | — | 页面标题。 |\n| `headingLevel` | `1–6` | `1` | 标题层级。 |\n\n| Slot | 说明 |\n| --- | --- |\n| `default` | 无 `title` 时的左侧内容。 |\n| `actions` | 右侧操作区。 |\n\n### MPageHeader\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `title` | `string` | — | 页面标题。 |\n| `description` | `string` | — | 副标题/说明。 |\n| `headingLevel` | `1–6` | `1` | 标题层级。 |\n\n| Slot | 说明 |\n| --- | --- |\n| `actions` | 右侧操作。 |\n\n### MPageSection\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `variant` | `'default' \\| 'muted' \\| 'form' \\| 'actions'` | `'default'` | 视觉变体。 |\n| `title` | `string` | — | 可选分组标题。 |\n\n### MPageStat\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `label` | `string` | — | 指标名称。 |\n| `value` | `string \\| number` | — | 主数值。 |\n| `trend` | `string` | — | 变化量或说明。 |\n| `trendSeverity` | `'primary' \\| 'success' \\| 'warn' \\| 'danger' \\| 'secondary'` | `'primary'` | 趋势色。 |\n| `icon` | `string` | — | 右侧图标名。 |\n\n### MPagePlaceholder\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `description` | `string` | — | 占位说明。 |\n| `ariaLabel` | `string` | `'Placeholder'` | 无障碍标签。 |\n| `minHeight` | `number \\| string` | `'12rem'` | 最小高度。 |\n"
+          "markdown": "---\ntitle: Page\ncategory: 06 / LAYOUT\ndescription: 业务页面组合区块，封装间距、边框与标题层级，少写或不写页面 CSS。\n---\n\n# Page\n\n业务页面组合组件。与 `MLayout` 搭配使用，把列表页筛选区、工具栏、表单分组、KPI 卡片等常见区块的间距和边框内聚到组件内，**优先用 Page 组件拼装页面，而不是每页手写 scoped CSS**。\n\n## 引入\n\n```ts\nimport {\n  MPageContent,\n  MPageFilterChips,\n  MPageFilters,\n  MPageHeader,\n  MPagePlaceholder,\n  MPageSection,\n  MPageStat,\n  MPageToolbar,\n} from 'morya-ui'\n```\n\n## 列表页组合\n\n`MPageContent` 负责内容区 **padding**（默认 `--m-space-6`）与子区块 **gap**（默认 `--m-space-4`），文档预览中外框仅模拟 `MLayoutContent` 边界。\n\n`MPageFilters` 默认是 **无框的控件行**（`variant=\"plain\"`）；需要一条可辨识的工具带时再用 `variant=\"filled\"`（与 Table header 相同的 `--m-color-fill-light`，无圆角）。`MPageHeader` 是页面身份（约 `--m-font-size-xl`）；`MPageToolbar` 是列表操作条（`--m-font-size-md`），不要当成第二页头。\n\n```vue preview src=\"./demos/ListPageStack.zh.vue\"\n```\n\n字段较多时：`MPageFilters collapsible` + `#advanced` 折叠高级项；已选条件用 `MPageFilterChips` 包一层 `MTag closable`（不要用自定义 dashed 壳）。\n\n```vue preview src=\"./demos/ListFiltersAdvanced.zh.vue\"\n```\n\n**面包屑**：路由级 trail 放在 `MLayoutHeader` 的 `MBreadcrumb`；若页内还需要上下文，用 `MPageHeader` 的 `#breadcrumb` 插槽——**不要**在 Layout 与 Page 各写一遍相同标题链。\n\n## 表单页组合\n\n`MPageContent width=\"narrow\"` 限制表单宽度；`MPageSection variant=\"form\"` 提供表单表面；`variant=\"actions\"` 用于底栏操作。\n\n```vue preview src=\"./demos/Demo2.vue\"\n```\n\n## 仪表盘 KPI\n\n默认 `MPageStat` 为 Card 表面；密集条带可用 `layout=\"plain\"` + `orientation=\"inline\"` + `density=\"compact\"`。\n\n```vue preview src=\"./demos/Kpi.vue\"\n```\n\n```vue preview src=\"./demos/StatVariants.zh.vue\"\n```\n\n## 组合规则\n\n| 场景 | 推荐组件 | 避免 |\n| --- | --- | --- |\n| 内容区垂直堆叠 | `MPageContent` | 手写 `gap` / `padding` |\n| 筛选区 | `MPageFilters` + `MSpace` / `MFlex` | 额外包一层 `MCard` |\n| 页面身份 + 页级操作 | `MPageHeader` | 无层级的裸 `h1` |\n| 列表操作条 | `MPageToolbar` | 把 Toolbar 当成第二页头 |\n| 表单主体 | `MPageSection variant=\"form\"`（内部即 `MCard` 表面） | 再包一层 `MCard` |\n| 列表表格 | 直接放 `MTable` | `MCard` 再包 `MTable bordered` |\n| KPI | `MPageStat` | 每页自定义 stat CSS |\n| 图表占位 | `MPagePlaceholder` 或 `MCard` + `MEmpty` | 虚线框 / 光晕手写样式 |\n\n完整黄金样例用 MCP `get_golden_page`。**局部修改**时用 MCP `get_page_snippet`（如 `filters`、`toolbar`、`form-actions`）。\n\n## API\n\n### MPageContent\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `density` | `'default' \\| 'compact' \\| 'spacious'` | `'default'` | 子区块垂直间距。 |\n| `width` | `'full' \\| 'narrow'` | `'full'` | `narrow` 约 42rem，适合表单页。 |\n| `bands` | `'auto' \\| 'uniform'` | `'auto'` | `auto` 收紧 Header/筛选/Toolbar 与表格之间的 band；`uniform` 仅用 `gap`。 |\n\n`bands=\"auto\"` 时可通过 CSS 变量微调：`--m-page-content-body-lead`、`--m-page-content-tools-pull`（见 `styles.css`）。\n\n### MPageFilters\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `ariaLabel` | `string` | — | 筛选区无障碍名称。 |\n| `variant` | `'plain' \\| 'filled'` | `'plain'` | 表面处理；`filled` 与 Table header 同色浅底，无圆角。 |\n| `collapsible` | `boolean` | `false` | 为 true 且提供 `#advanced` 时显示展开/收起。 |\n| `expanded` | `boolean` | `false` | 高级区展开状态（`v-model:expanded`）。 |\n| `expandLabel` / `collapseLabel` | `string` | — | 覆盖默认展开/收起文案。 |\n\n| Slot | 说明 |\n| --- | --- |\n| `default` | 常用筛选控件行。 |\n| `advanced` | 折叠区（需 `collapsible`）。 |\n| `active` | 可选；已选摘要（更常见是下方 `MPageFilterChips`）。 |\n\n### MPageFilterChips\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `label` | `string` | — | 弱前缀，如「已选」。 |\n| `ariaLabel` | `string` | — | 已选条件列表的无障碍名称。 |\n\n默认插槽放 `MTag closable` 或同类可移除标记。\n\n### MPageToolbar\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `title` | `string` | — | 操作条组名（`--m-font-size-md`），不是页面标题。 |\n| `headingLevel` | `1–6` | `1` | 标题层级。 |\n\n| Slot | 说明 |\n| --- | --- |\n| `default` | 无 `title` 时的左侧内容。 |\n| `actions` | 右侧操作区。 |\n\n### MPageHeader\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `title` | `string` | — | 页面标题（`--m-font-size-xl`）。 |\n| `description` | `string` | — | 副标题/说明。 |\n| `headingLevel` | `1–6` | `1` | 标题层级。 |\n\n| Slot | 说明 |\n| --- | --- |\n| `breadcrumb` | 标题上方的面包屑（放 `MBreadcrumb`）。 |\n| `tags` | 标题右侧的状态/分类标记（放 `MTag` / `MStatus`）。 |\n| `actions` | 右侧操作。 |\n\n### MPageSection\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `variant` | `'default' \\| 'muted' \\| 'form' \\| 'actions'` | `'default'` | 视觉变体；`muted` 与 Table header 同色浅底；`form` 渲染为 `MCard` 表面。 |\n| `title` | `string` | — | 可选分组标题。 |\n\n| Slot | 说明 |\n| --- | --- |\n| `actions` | 标题行右侧操作区。 |\n\n### MPageStat\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `label` | `string` | — | 指标名称。 |\n| `value` | `string \\| number` | — | 主数值（等宽数字）。 |\n| `trend` | `string` | — | 变化量，渲染为与 `MStatus` 同色的文本。 |\n| `trendSeverity` | `'primary' \\| 'success' \\| 'warn' \\| 'danger' \\| 'secondary'` | `'primary'` | 趋势色。 |\n| `trendDirection` | `'up' \\| 'down'` | — | 在趋势旁显示升/降箭头。 |\n| `trendLabel` | `string` | — | 趋势后的弱说明，如「较上月」。 |\n| `icon` | `string` | — | 右侧弱化图标名。 |\n| `loading` | `boolean` | `false` | 用骨架屏代替数值与趋势。 |\n| `shadow` | `'never' \\| 'hover' \\| 'always'` | `'always'` | 透传 `MCard.shadow`（`layout=\"plain\"` 时无效）。 |\n| `layout` | `'card' \\| 'plain'` | `'card'` | `plain` 无 Card 壳，适合横排 KPI 条。 |\n| `density` | `'default' \\| 'compact'` | `'default'` | `compact` 缩小主数值字号。 |\n| `orientation` | `'stacked' \\| 'inline'` | `'stacked'` | `inline` 标签与数值同一行。 |\n\n### MPagePlaceholder\n\n内部组合 `MEmpty`：默认展示空态插画与说明，可通过默认插槽自定义内容、`#icon` 自定义图标、`#extra` 放置下一步操作。\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `description` | `string` | — | 占位说明。 |\n| `ariaLabel` | `string` | `'Placeholder'` | 无障碍标签。 |\n| `minHeight` | `number \\| string` | `'12rem'` | 最小高度。 |\n\n| Slot | 说明 |\n| --- | --- |\n| `default` | 自定义说明内容。 |\n| `icon` | 自定义图标/插画。 |\n| `extra` | 下一步操作区（如按钮）。 |\n"
         },
         "en-US": {
           "title": "Page",
@@ -15386,12 +15547,17 @@
             {
               "id": "import",
               "title": "Import",
-              "body": "```ts\nimport {\n  MPageContent,\n  MPageFilters,\n  MPageHeader,\n  MPagePlaceholder,\n  MPageSection,\n  MPageStat,\n  MPageToolbar,\n} from 'morya-ui'\n```"
+              "body": "```ts\nimport {\n  MPageContent,\n  MPageFilterChips,\n  MPageFilters,\n  MPageHeader,\n  MPagePlaceholder,\n  MPageSection,\n  MPageStat,\n  MPageToolbar,\n} from 'morya-ui'\n```"
             },
             {
               "id": "list-page-stack",
               "title": "List page stack",
-              "body": "`MPageContent` owns content **padding** (default `--m-space-6`) and section **gap** (default `--m-space-4`). The bordered frame in previews simulates `MLayoutContent` only.\n\n```vue preview src=\"./demos/ListPageStack.en.vue\"\n```"
+              "body": "`MPageContent` owns content **padding** (default `--m-space-6`) and section **gap** (default `--m-space-4`). The bordered frame in previews simulates `MLayoutContent` only.\n\n`MPageFilters` defaults to a borderless control row (`variant=\"plain\"`); `variant=\"filled\"` uses the same `--m-color-fill-light` as the Table header, with no radius. `MPageHeader` is page identity (`--m-font-size-xl`); `MPageToolbar` is a list action row (`--m-font-size-md`), not a second page title. `MPageStat` supports `trendDirection`, `trendLabel`, `loading`, and `shadow` (defaults to `always`).\n\n```vue preview src=\"./demos/ListPageStack.en.vue\"\n```\n\nUse `MPageFilters collapsible` + `#advanced` for secondary fields; show active criteria with `MPageFilterChips` and closable `MTag`.\n\n```vue preview src=\"./demos/ListFiltersAdvanced.en.vue\"\n```\n\nPut the route trail in `MLayoutHeader` (`MBreadcrumb`) **or** in `MPageHeader` `#breadcrumb` — not both with duplicate titles."
+            },
+            {
+              "id": "dashboard-kpi",
+              "title": "Dashboard KPI",
+              "body": "Default `MPageStat` uses a Card surface; dense strips can use `layout=\"plain\"`, `orientation=\"inline\"`, and `density=\"compact\"`.\n\n```vue preview src=\"./demos/StatVariants.en.vue\"\n```"
             },
             {
               "id": "form-page-stack",
@@ -15401,10 +15567,10 @@
             {
               "id": "composition-rules",
               "title": "Composition rules",
-              "body": "| Scenario | Use | Avoid |\n| --- | --- | --- |\n| Vertical page stack | `MPageContent` | Hand-written `gap` / `padding` |\n| Filters | `MPageFilters` | Extra bordered `MCard` wrapper |\n| Title + actions | `MPageToolbar` | Raw flex divs |\n| Form surface | `MPageSection variant=\"form\"` | Nested bordered cards |\n| Data table | `MTable` directly | `MCard` around bordered table |\n| KPI metric | `MPageStat` | Custom stat CSS per page |\n\nGolden references: MCP `get_golden_page`."
+              "body": "| Scenario | Use | Avoid |\n| --- | --- | --- |\n| Vertical page stack | `MPageContent` | Hand-written `gap` / `padding` |\n| Filters | `MPageFilters` | Extra bordered `MCard` wrapper |\n| Page identity + page actions | `MPageHeader` | Raw `h1` with no hierarchy |\n| List action row | `MPageToolbar` | Using Toolbar as a second page title |\n| Form surface | `MPageSection variant=\"form\"` | Nested bordered cards |\n| Data table | `MTable` directly | `MCard` around bordered table |\n| KPI metric | `MPageStat` | Custom stat CSS per page |\n\nGolden references: MCP `get_golden_page`."
             }
           ],
-          "markdown": "---\ntitle: Page\ncategory: 06 / LAYOUT\ndescription: Composable page sections for spacing, borders, and headings with little or no custom CSS.\n---\n\n# Page\n\nPage composition components. Use them with `MLayout` to encode filter bars, toolbars, form surfaces, KPI cards, and other admin-page blocks **without rewriting scoped CSS on every page**.\n\n## Import\n\n```ts\nimport {\n  MPageContent,\n  MPageFilters,\n  MPageHeader,\n  MPagePlaceholder,\n  MPageSection,\n  MPageStat,\n  MPageToolbar,\n} from 'morya-ui'\n```\n\n## List page stack\n\n`MPageContent` owns content **padding** (default `--m-space-6`) and section **gap** (default `--m-space-4`). The bordered frame in previews simulates `MLayoutContent` only.\n\n```vue preview src=\"./demos/ListPageStack.en.vue\"\n```\n\n## Form page stack\n\nUse `MPageContent width=\"narrow\"`, `MPageSection variant=\"form\"`, and `variant=\"actions\"` for the footer.\n\n## Composition rules\n\n| Scenario | Use | Avoid |\n| --- | --- | --- |\n| Vertical page stack | `MPageContent` | Hand-written `gap` / `padding` |\n| Filters | `MPageFilters` | Extra bordered `MCard` wrapper |\n| Title + actions | `MPageToolbar` | Raw flex divs |\n| Form surface | `MPageSection variant=\"form\"` | Nested bordered cards |\n| Data table | `MTable` directly | `MCard` around bordered table |\n| KPI metric | `MPageStat` | Custom stat CSS per page |\n\nGolden references: MCP `get_golden_page`.\n"
+          "markdown": "---\ntitle: Page\ncategory: 06 / LAYOUT\ndescription: Composable page sections for spacing, borders, and headings with little or no custom CSS.\n---\n\n# Page\n\nPage composition components. Use them with `MLayout` to encode filter bars, toolbars, form surfaces, KPI cards, and other admin-page blocks **without rewriting scoped CSS on every page**.\n\n## Import\n\n```ts\nimport {\n  MPageContent,\n  MPageFilterChips,\n  MPageFilters,\n  MPageHeader,\n  MPagePlaceholder,\n  MPageSection,\n  MPageStat,\n  MPageToolbar,\n} from 'morya-ui'\n```\n\n## List page stack\n\n`MPageContent` owns content **padding** (default `--m-space-6`) and section **gap** (default `--m-space-4`). The bordered frame in previews simulates `MLayoutContent` only.\n\n`MPageFilters` defaults to a borderless control row (`variant=\"plain\"`); `variant=\"filled\"` uses the same `--m-color-fill-light` as the Table header, with no radius. `MPageHeader` is page identity (`--m-font-size-xl`); `MPageToolbar` is a list action row (`--m-font-size-md`), not a second page title. `MPageStat` supports `trendDirection`, `trendLabel`, `loading`, and `shadow` (defaults to `always`).\n\n```vue preview src=\"./demos/ListPageStack.en.vue\"\n```\n\nUse `MPageFilters collapsible` + `#advanced` for secondary fields; show active criteria with `MPageFilterChips` and closable `MTag`.\n\n```vue preview src=\"./demos/ListFiltersAdvanced.en.vue\"\n```\n\nPut the route trail in `MLayoutHeader` (`MBreadcrumb`) **or** in `MPageHeader` `#breadcrumb` — not both with duplicate titles.\n\n## Dashboard KPI\n\nDefault `MPageStat` uses a Card surface; dense strips can use `layout=\"plain\"`, `orientation=\"inline\"`, and `density=\"compact\"`.\n\n```vue preview src=\"./demos/StatVariants.en.vue\"\n```\n\n## Form page stack\n\nUse `MPageContent width=\"narrow\"`, `MPageSection variant=\"form\"`, and `variant=\"actions\"` for the footer.\n\n## Composition rules\n\n| Scenario | Use | Avoid |\n| --- | --- | --- |\n| Vertical page stack | `MPageContent` | Hand-written `gap` / `padding` |\n| Filters | `MPageFilters` | Extra bordered `MCard` wrapper |\n| Page identity + page actions | `MPageHeader` | Raw `h1` with no hierarchy |\n| List action row | `MPageToolbar` | Using Toolbar as a second page title |\n| Form surface | `MPageSection variant=\"form\"` | Nested bordered cards |\n| Data table | `MTable` directly | `MCard` around bordered table |\n| KPI metric | `MPageStat` | Custom stat CSS per page |\n\nGolden references: MCP `get_golden_page`.\n"
         }
       }
     },
@@ -15463,7 +15629,7 @@
           "name": "showQuickJumper",
           "type": "boolean",
           "default": "false",
-          "description": "显示跳转到指定页。"
+          "description": "显示跳转页码选择器。页数超过 10 时可在下拉中筛选。"
         },
         {
           "name": "simple",
@@ -15601,7 +15767,7 @@
             {
               "id": "props",
               "title": "Props",
-              "body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `number` | `1` | 当前页（从 1 开始）。 |\n| `totalRecords` | `number` | — | 总记录数。 |\n| `rows` | `number` | `10` | 每页条数。 |\n| `pageSize` | `number` | — | `rows` 的别名；两者同时传入时以 `pageSize` 为准。 |\n| `pageLinkSize` | `number` | `5` | 页码按钮数量。 |\n| `showSizePicker` | `boolean` | `false` | 显示每页条数选择器。 |\n| `pageSizes` | `number[]` | `[10, 20, 50, 100]` | `showSizePicker` 的选项。 |\n| `showQuickJumper` | `boolean` | `false` | 显示跳转到指定页。 |\n| `simple` | `boolean` | `false` | 精简为上一页 / 当前页 / 下一页。 |\n| `disabled` | `boolean` | `false` | 禁用。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |"
+              "body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `number` | `1` | 当前页（从 1 开始）。 |\n| `totalRecords` | `number` | — | 总记录数。 |\n| `rows` | `number` | `10` | 每页条数。 |\n| `pageSize` | `number` | — | `rows` 的别名；两者同时传入时以 `pageSize` 为准。 |\n| `pageLinkSize` | `number` | `5` | 页码按钮数量。 |\n| `showSizePicker` | `boolean` | `false` | 显示每页条数选择器。 |\n| `pageSizes` | `number[]` | `[10, 20, 50, 100]` | `showSizePicker` 的选项。 |\n| `showQuickJumper` | `boolean` | `false` | 显示跳转页码选择器。页数超过 10 时可在下拉中筛选。 |\n| `simple` | `boolean` | `false` | 精简为上一页 / 当前页 / 下一页。 |\n| `disabled` | `boolean` | `false` | 禁用。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |"
             },
             {
               "id": "events",
@@ -15619,7 +15785,7 @@
               "body": "无插槽。"
             }
           ],
-          "markdown": "---\ntitle: Pagination\ncategory: 03 / DATA\ndescription: 分页器，v-model 为页码；实例暴露 first（零基首条索引）。\n---\n\n# Pagination\n\n分页导航，`v-model` 使用 **1-based 页码**；实例属性 `first` 对应零基首条记录索引 `(page - 1) * rows`。\n\n`pageSize` 是 `rows` 的别名（同时传入时 `pageSize` 优先）；另支持 `showSizePicker`、`showQuickJumper`、`simple`。\n\n## 引入\n\n```ts\nimport { MPagination } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Size picker / jumper / simple\n\n```vue preview src=\"./demos/SizePickerJumperSimple.vue\"\n```\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `number` | `1` | 当前页（从 1 开始）。 |\n| `totalRecords` | `number` | — | 总记录数。 |\n| `rows` | `number` | `10` | 每页条数。 |\n| `pageSize` | `number` | — | `rows` 的别名；两者同时传入时以 `pageSize` 为准。 |\n| `pageLinkSize` | `number` | `5` | 页码按钮数量。 |\n| `showSizePicker` | `boolean` | `false` | 显示每页条数选择器。 |\n| `pageSizes` | `number[]` | `[10, 20, 50, 100]` | `showSizePicker` 的选项。 |\n| `showQuickJumper` | `boolean` | `false` | 显示跳转到指定页。 |\n| `simple` | `boolean` | `false` | 精简为上一页 / 当前页 / 下一页。 |\n| `disabled` | `boolean` | `false` | 禁用。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `update:modelValue` | `number` | 页码变化。 |\n| `page` | `number` | 页码变化（同值）。 |\n| `update:rows` / `update:pageSize` | `number` | 每页条数变化（同值）。 |\n\n## Instance\n\n| 方法 / 属性 | 说明 |\n| --- | --- |\n| `first` | 当前页首条记录的零基索引：`(page - 1) * rows`。 |\n| `pageCount` | 总页数。 |\n\n## Slots\n\n无插槽。\n"
+          "markdown": "---\ntitle: Pagination\ncategory: 03 / DATA\ndescription: 分页器，v-model 为页码；实例暴露 first（零基首条索引）。\n---\n\n# Pagination\n\n分页导航，`v-model` 使用 **1-based 页码**；实例属性 `first` 对应零基首条记录索引 `(page - 1) * rows`。\n\n`pageSize` 是 `rows` 的别名（同时传入时 `pageSize` 优先）；另支持 `showSizePicker`、`showQuickJumper`、`simple`。\n\n## 引入\n\n```ts\nimport { MPagination } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Size picker / jumper / simple\n\n```vue preview src=\"./demos/SizePickerJumperSimple.vue\"\n```\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `number` | `1` | 当前页（从 1 开始）。 |\n| `totalRecords` | `number` | — | 总记录数。 |\n| `rows` | `number` | `10` | 每页条数。 |\n| `pageSize` | `number` | — | `rows` 的别名；两者同时传入时以 `pageSize` 为准。 |\n| `pageLinkSize` | `number` | `5` | 页码按钮数量。 |\n| `showSizePicker` | `boolean` | `false` | 显示每页条数选择器。 |\n| `pageSizes` | `number[]` | `[10, 20, 50, 100]` | `showSizePicker` 的选项。 |\n| `showQuickJumper` | `boolean` | `false` | 显示跳转页码选择器。页数超过 10 时可在下拉中筛选。 |\n| `simple` | `boolean` | `false` | 精简为上一页 / 当前页 / 下一页。 |\n| `disabled` | `boolean` | `false` | 禁用。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `update:modelValue` | `number` | 页码变化。 |\n| `page` | `number` | 页码变化（同值）。 |\n| `update:rows` / `update:pageSize` | `number` | 每页条数变化（同值）。 |\n\n## Instance\n\n| 方法 / 属性 | 说明 |\n| --- | --- |\n| `first` | 当前页首条记录的零基索引：`(page - 1) * rows`。 |\n| `pageCount` | 总页数。 |\n\n## Slots\n\n无插槽。\n"
         },
         "en-US": {
           "title": "Pagination",
@@ -15648,7 +15814,7 @@
             {
               "id": "props",
               "title": "Props",
-              "body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `number` | `1` | Current page (1-based). |\n| `totalRecords` | `number` | — | Total number of records. |\n| `rows` | `number` | `10` | Rows per page. |\n| `pageSize` | `number` | — | Alias of `rows`; `pageSize` wins when both are set. |\n| `pageLinkSize` | `number` | `5` | Number of page link buttons. |\n| `showSizePicker` | `boolean` | `false` | Show the page-size select. |\n| `pageSizes` | `number[]` | `[10, 20, 50, 100]` | Options for `showSizePicker`. |\n| `showQuickJumper` | `boolean` | `false` | Jump-to-page input. |\n| `simple` | `boolean` | `false` | Compact prev / current / next. |\n| `disabled` | `boolean` | `false` | Disabled. |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |"
+              "body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `number` | `1` | Current page (1-based). |\n| `totalRecords` | `number` | — | Total number of records. |\n| `rows` | `number` | `10` | Rows per page. |\n| `pageSize` | `number` | — | Alias of `rows`; `pageSize` wins when both are set. |\n| `pageLinkSize` | `number` | `5` | Number of page link buttons. |\n| `showSizePicker` | `boolean` | `false` | Show the page-size select. |\n| `pageSizes` | `number[]` | `[10, 20, 50, 100]` | Options for `showSizePicker`. |\n| `showQuickJumper` | `boolean` | `false` | Page select for jumping to a page. The menu can be filtered when there are more than 10 pages. |\n| `simple` | `boolean` | `false` | Compact prev / current / next. |\n| `disabled` | `boolean` | `false` | Disabled. |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |"
             },
             {
               "id": "events",
@@ -15666,7 +15832,7 @@
               "body": "No slots."
             }
           ],
-          "markdown": "---\ntitle: Pagination\ncategory: 03 / DATA\ndescription: Pagination. v-model is the page number. The instance exposes first (zero-based index of the first record).\n---\n\n# Pagination\n\nPagination. `v-model` uses a **1-based page number**. The instance property `first` is the zero-based index of the first record on the page: `(page - 1) * rows`.\n\n`pageSize` is an alias of `rows` (`pageSize` wins when both are set). Also supports `showSizePicker`, `showQuickJumper`, and `simple`.\n\n## Import\n\n```ts\nimport { MPagination } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Size picker / jumper / simple\n\n```vue preview src=\"./demos/SizePickerJumperSimple.vue\"\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `number` | `1` | Current page (1-based). |\n| `totalRecords` | `number` | — | Total number of records. |\n| `rows` | `number` | `10` | Rows per page. |\n| `pageSize` | `number` | — | Alias of `rows`; `pageSize` wins when both are set. |\n| `pageLinkSize` | `number` | `5` | Number of page link buttons. |\n| `showSizePicker` | `boolean` | `false` | Show the page-size select. |\n| `pageSizes` | `number[]` | `[10, 20, 50, 100]` | Options for `showSizePicker`. |\n| `showQuickJumper` | `boolean` | `false` | Jump-to-page input. |\n| `simple` | `boolean` | `false` | Compact prev / current / next. |\n| `disabled` | `boolean` | `false` | Disabled. |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n\n## Events\n\n| Event | Prop | Description |\n| --- | --- | --- |\n| `update:modelValue` | `number` | Emitted when the page changes. |\n| `page` | `number` | Emitted when the page changes (same value). |\n| `update:rows` / `update:pageSize` | `number` | Emitted when page size changes (same value). |\n\n## Instance\n\n| Method / Property | Description |\n| --- | --- |\n| `first` | Zero-based index of the first record on the current page: `(page - 1) * rows`. |\n| `pageCount` | Total number of pages. |\n\n## Slots\n\nNo slots.\n"
+          "markdown": "---\ntitle: Pagination\ncategory: 03 / DATA\ndescription: Pagination. v-model is the page number. The instance exposes first (zero-based index of the first record).\n---\n\n# Pagination\n\nPagination. `v-model` uses a **1-based page number**. The instance property `first` is the zero-based index of the first record on the page: `(page - 1) * rows`.\n\n`pageSize` is an alias of `rows` (`pageSize` wins when both are set). Also supports `showSizePicker`, `showQuickJumper`, and `simple`.\n\n## Import\n\n```ts\nimport { MPagination } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Size picker / jumper / simple\n\n```vue preview src=\"./demos/SizePickerJumperSimple.vue\"\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `number` | `1` | Current page (1-based). |\n| `totalRecords` | `number` | — | Total number of records. |\n| `rows` | `number` | `10` | Rows per page. |\n| `pageSize` | `number` | — | Alias of `rows`; `pageSize` wins when both are set. |\n| `pageLinkSize` | `number` | `5` | Number of page link buttons. |\n| `showSizePicker` | `boolean` | `false` | Show the page-size select. |\n| `pageSizes` | `number[]` | `[10, 20, 50, 100]` | Options for `showSizePicker`. |\n| `showQuickJumper` | `boolean` | `false` | Page select for jumping to a page. The menu can be filtered when there are more than 10 pages. |\n| `simple` | `boolean` | `false` | Compact prev / current / next. |\n| `disabled` | `boolean` | `false` | Disabled. |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n\n## Events\n\n| Event | Prop | Description |\n| --- | --- | --- |\n| `update:modelValue` | `number` | Emitted when the page changes. |\n| `page` | `number` | Emitted when the page changes (same value). |\n| `update:rows` / `update:pageSize` | `number` | Emitted when page size changes (same value). |\n\n## Instance\n\n| Method / Property | Description |\n| --- | --- |\n| `first` | Zero-based index of the first record on the current page: `(page - 1) * rows`. |\n| `pageCount` | Total number of pages. |\n\n## Slots\n\nNo slots.\n"
         }
       }
     },
@@ -15765,7 +15931,7 @@
           "sectionId": "基础用法",
           "lang": "vue",
           "preview": true,
-          "code": "<script setup lang=\"ts\">\nimport { MPanel } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst collapsed = ref(false)\n</script>\n\n<template>\n  <MPanel v-model=\"collapsed\" header=\"Panel\" toggleable>\n    <p style=\"margin:0\">\n      可折叠面板内容。\n    </p>\n    <template #footer>\n      操作区\n    </template>\n  </MPanel>\n</template>",
+          "code": "<script setup lang=\"ts\">\nimport { MPanel } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst collapsed = ref(false)\n</script>\n\n<template>\n  <MPanel v-model=\"collapsed\" header=\"Panel\" toggleable class=\"w-[300px]\">\n    <p style=\"margin:0\">\n      可折叠面板内容。\n    </p>\n    <template #footer>\n      操作区\n    </template>\n  </MPanel>\n</template>",
           "locale": "zh-CN"
         },
         {
@@ -15792,7 +15958,7 @@
           "sectionId": "basic",
           "lang": "vue",
           "preview": true,
-          "code": "<script setup lang=\"ts\">\nimport { MPanel } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst collapsed = ref(false)\n</script>\n\n<template>\n  <MPanel v-model=\"collapsed\" header=\"Panel\" toggleable>\n    <p style=\"margin:0\">\n      Collapsible panel content.\n    </p>\n    <template #footer>\n      Actions\n    </template>\n  </MPanel>\n</template>",
+          "code": "<script setup lang=\"ts\">\nimport { MPanel } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst collapsed = ref(false)\n</script>\n\n<template>\n  <MPanel v-model=\"collapsed\" header=\"Panel\" toggleable class=\"w-[300px]\">\n    <p style=\"margin:0\">\n      Collapsible panel content.\n    </p>\n    <template #footer>\n      Actions\n    </template>\n  </MPanel>\n</template>",
           "locale": "en-US"
         },
         {
@@ -16164,7 +16330,7 @@
         {
           "name": "transition",
           "type": "string | false",
-          "default": "'popover'",
+          "default": "'scale-fade'",
           "description": "进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。"
         },
         {
@@ -16328,7 +16494,7 @@
             {
               "id": "props",
               "title": "Props",
-              "body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `boolean` | `false` | 可见性。配合 `v-model` 使用。 |\n| `placement` | `'top' \\| 'bottom' \\| 'left' \\| 'right' \\| 'bottom-start' \\| 'bottom-end'` | `'bottom'` | 相对触发元素的位置。 |\n| `trigger` | `'manual' \\| 'click' \\| 'hover' \\| 'focus'` | `'manual'` | 打开方式。 |\n| `showDelay` / `hideDelay` | `number` | `0` / `200` | hover/focus 延迟（ms）。 |\n| `teleport` | `boolean` | `true` | 浮层 Teleport；默认挂到 `body`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | 挂载目标；`'self'` / `false` 就地渲染。 |\n| `transition` | `string \\| false` | `'popover'` | 进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。 |\n| `disabled` | `boolean` | — | — |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |"
+              "body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `boolean` | `false` | 可见性。配合 `v-model` 使用。 |\n| `placement` | `'top' \\| 'bottom' \\| 'left' \\| 'right' \\| 'bottom-start' \\| 'bottom-end'` | `'bottom'` | 相对触发元素的位置。 |\n| `trigger` | `'manual' \\| 'click' \\| 'hover' \\| 'focus'` | `'manual'` | 打开方式。 |\n| `showDelay` / `hideDelay` | `number` | `0` / `200` | hover/focus 延迟（ms）。 |\n| `teleport` | `boolean` | `true` | 浮层 Teleport；默认挂到 `body`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | 挂载目标；`'self'` / `false` 就地渲染。 |\n| `transition` | `string \\| false` | `'scale-fade'` | 进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。 |\n| `disabled` | `boolean` | — | — |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |"
             },
             {
               "id": "events",
@@ -16346,7 +16512,7 @@
               "body": "| 插槽名 | 说明 |\n| --- | --- |\n| `default` | 触发元素。 |\n| `content` | 浮层内容。 |"
             }
           ],
-          "markdown": "---\ntitle: Popover\ncategory: 05 / FEEDBACK\ndescription: 相对触发元素定位的浮层面板。支持 placement、Teleport；点击外部或 Esc 关闭。\n---\n\n# Popover\n\n相对触发元素显示的浮层，适合筛选、快捷操作或轻量表单。\n\n## 引入\n\n```ts\nimport { MButton, MPopover } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Placement\n\n```vue preview src=\"./demos/Placement.vue\"\n```\n\n## Hover\n\n`trigger` 默认 `manual`（仅 `v-model`）。设为 `hover` / `click` / `focus` 由组件自行开关。\n\n```vue preview src=\"./demos/Hover.vue\"\n```\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `boolean` | `false` | 可见性。配合 `v-model` 使用。 |\n| `placement` | `'top' \\| 'bottom' \\| 'left' \\| 'right' \\| 'bottom-start' \\| 'bottom-end'` | `'bottom'` | 相对触发元素的位置。 |\n| `trigger` | `'manual' \\| 'click' \\| 'hover' \\| 'focus'` | `'manual'` | 打开方式。 |\n| `showDelay` / `hideDelay` | `number` | `0` / `200` | hover/focus 延迟（ms）。 |\n| `teleport` | `boolean` | `true` | 浮层 Teleport；默认挂到 `body`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | 挂载目标；`'self'` / `false` 就地渲染。 |\n| `transition` | `string \\| false` | `'popover'` | 进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。 |\n| `disabled` | `boolean` | — | — |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `update:modelValue` | `boolean` | 可见性变化。 |\n| `show` | — | 打开时触发。 |\n| `hide` | — | 关闭后触发。 |\n\n## Methods\n\n| 方法 | 说明 |\n| --- | --- |\n| `show()` | 显示浮层。 |\n| `hide()` | 隐藏浮层。 |\n| `toggle()` | 切换显示状态。 |\n\n## Slots\n\n| 插槽名 | 说明 |\n| --- | --- |\n| `default` | 触发元素。 |\n| `content` | 浮层内容。 |\n"
+          "markdown": "---\ntitle: Popover\ncategory: 05 / FEEDBACK\ndescription: 相对触发元素定位的浮层面板。支持 placement、Teleport；点击外部或 Esc 关闭。\n---\n\n# Popover\n\n相对触发元素显示的浮层，适合筛选、快捷操作或轻量表单。\n\n## 引入\n\n```ts\nimport { MButton, MPopover } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Placement\n\n```vue preview src=\"./demos/Placement.vue\"\n```\n\n## Hover\n\n`trigger` 默认 `manual`（仅 `v-model`）。设为 `hover` / `click` / `focus` 由组件自行开关。\n\n```vue preview src=\"./demos/Hover.vue\"\n```\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `boolean` | `false` | 可见性。配合 `v-model` 使用。 |\n| `placement` | `'top' \\| 'bottom' \\| 'left' \\| 'right' \\| 'bottom-start' \\| 'bottom-end'` | `'bottom'` | 相对触发元素的位置。 |\n| `trigger` | `'manual' \\| 'click' \\| 'hover' \\| 'focus'` | `'manual'` | 打开方式。 |\n| `showDelay` / `hideDelay` | `number` | `0` / `200` | hover/focus 延迟（ms）。 |\n| `teleport` | `boolean` | `true` | 浮层 Teleport；默认挂到 `body`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | 挂载目标；`'self'` / `false` 就地渲染。 |\n| `transition` | `string \\| false` | `'scale-fade'` | 进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。 |\n| `disabled` | `boolean` | — | — |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `update:modelValue` | `boolean` | 可见性变化。 |\n| `show` | — | 打开时触发。 |\n| `hide` | — | 关闭后触发。 |\n\n## Methods\n\n| 方法 | 说明 |\n| --- | --- |\n| `show()` | 显示浮层。 |\n| `hide()` | 隐藏浮层。 |\n| `toggle()` | 切换显示状态。 |\n\n## Slots\n\n| 插槽名 | 说明 |\n| --- | --- |\n| `default` | 触发元素。 |\n| `content` | 浮层内容。 |\n"
         },
         "en-US": {
           "title": "Popover",
@@ -16380,7 +16546,7 @@
             {
               "id": "props",
               "title": "Props",
-              "body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `boolean` | `false` | Visibility. Use with `v-model`. |\n| `placement` | `'top' \\| 'bottom' \\| 'left' \\| 'right' \\| 'bottom-start' \\| 'bottom-end'` | `'bottom'` | Position relative to the trigger. |\n| `trigger` | `'manual' \\| 'click' \\| 'hover' \\| 'focus'` | `'manual'` | How it opens. |\n| `showDelay` / `hideDelay` | `number` | `0` / `200` | Hover/focus delay in ms. |\n| `teleport` | `boolean` | `true` | Overlay Teleport. Mounts to `body` by default. |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Mount target. `'self'` / `false` renders in place. |\n| `transition` | `string \\| false` | `'popover'` | Enter/exit motion preset; `false` / `'none'` disables. See [Motion](/docs/motion). |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |"
+              "body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `boolean` | `false` | Visibility. Use with `v-model`. |\n| `placement` | `'top' \\| 'bottom' \\| 'left' \\| 'right' \\| 'bottom-start' \\| 'bottom-end'` | `'bottom'` | Position relative to the trigger. |\n| `trigger` | `'manual' \\| 'click' \\| 'hover' \\| 'focus'` | `'manual'` | How it opens. |\n| `showDelay` / `hideDelay` | `number` | `0` / `200` | Hover/focus delay in ms. |\n| `teleport` | `boolean` | `true` | Overlay Teleport. Mounts to `body` by default. |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Mount target. `'self'` / `false` renders in place. |\n| `transition` | `string \\| false` | `'scale-fade'` | Enter/exit motion preset; `false` / `'none'` disables. See [Motion](/docs/motion). |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |"
             },
             {
               "id": "events",
@@ -16398,7 +16564,7 @@
               "body": "| Slot | Description |\n| --- | --- |\n| `default` | Trigger element. |\n| `content` | Overlay content. |"
             }
           ],
-          "markdown": "---\ntitle: Popover\ncategory: 05 / FEEDBACK\ndescription: Floating panel positioned relative to a trigger. Supports placement and Teleport. Closes on outside click or Esc.\n---\n\n# Popover\n\nOverlay positioned relative to a trigger. Use it for filters, quick actions, or lightweight forms.\n\n## Import\n\n```ts\nimport { MButton, MPopover } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Placement\n\n```vue preview src=\"./demos/Placement.vue\"\n```\n\n## Hover\n\n`trigger` defaults to `manual` (`v-model` only). Use `hover` / `click` / `focus` to let the component open itself.\n\n```vue preview src=\"./demos/Hover.vue\"\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `boolean` | `false` | Visibility. Use with `v-model`. |\n| `placement` | `'top' \\| 'bottom' \\| 'left' \\| 'right' \\| 'bottom-start' \\| 'bottom-end'` | `'bottom'` | Position relative to the trigger. |\n| `trigger` | `'manual' \\| 'click' \\| 'hover' \\| 'focus'` | `'manual'` | How it opens. |\n| `showDelay` / `hideDelay` | `number` | `0` / `200` | Hover/focus delay in ms. |\n| `teleport` | `boolean` | `true` | Overlay Teleport. Mounts to `body` by default. |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Mount target. `'self'` / `false` renders in place. |\n| `transition` | `string \\| false` | `'popover'` | Enter/exit motion preset; `false` / `'none'` disables. See [Motion](/docs/motion). |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n\n## Events\n\n| Event | Prop | Description |\n| --- | --- | --- |\n| `update:modelValue` | `boolean` | Emitted when visibility changes. |\n| `show` | — | Emitted when opened. |\n| `hide` | — | Emitted after close. |\n\n## Methods\n\n| Method | Description |\n| --- | --- |\n| `show()` | Show the popover. |\n| `hide()` | Hide the popover. |\n| `toggle()` | Toggle visibility. |\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `default` | Trigger element. |\n| `content` | Overlay content. |\n"
+          "markdown": "---\ntitle: Popover\ncategory: 05 / FEEDBACK\ndescription: Floating panel positioned relative to a trigger. Supports placement and Teleport. Closes on outside click or Esc.\n---\n\n# Popover\n\nOverlay positioned relative to a trigger. Use it for filters, quick actions, or lightweight forms.\n\n## Import\n\n```ts\nimport { MButton, MPopover } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Placement\n\n```vue preview src=\"./demos/Placement.vue\"\n```\n\n## Hover\n\n`trigger` defaults to `manual` (`v-model` only). Use `hover` / `click` / `focus` to let the component open itself.\n\n```vue preview src=\"./demos/Hover.vue\"\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `boolean` | `false` | Visibility. Use with `v-model`. |\n| `placement` | `'top' \\| 'bottom' \\| 'left' \\| 'right' \\| 'bottom-start' \\| 'bottom-end'` | `'bottom'` | Position relative to the trigger. |\n| `trigger` | `'manual' \\| 'click' \\| 'hover' \\| 'focus'` | `'manual'` | How it opens. |\n| `showDelay` / `hideDelay` | `number` | `0` / `200` | Hover/focus delay in ms. |\n| `teleport` | `boolean` | `true` | Overlay Teleport. Mounts to `body` by default. |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Mount target. `'self'` / `false` renders in place. |\n| `transition` | `string \\| false` | `'scale-fade'` | Enter/exit motion preset; `false` / `'none'` disables. See [Motion](/docs/motion). |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n\n## Events\n\n| Event | Prop | Description |\n| --- | --- | --- |\n| `update:modelValue` | `boolean` | Emitted when visibility changes. |\n| `show` | — | Emitted when opened. |\n| `hide` | — | Emitted after close. |\n\n## Methods\n\n| Method | Description |\n| --- | --- |\n| `show()` | Show the popover. |\n| `hide()` | Hide the popover. |\n| `toggle()` | Toggle visibility. |\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `default` | Trigger element. |\n| `content` | Overlay content. |\n"
         }
       }
     },
@@ -26839,7 +27005,7 @@
         "zh-CN": {
           "title": "一键接入",
           "description": "用 @morya-ui/setup 安装组件库，并按需写入样式、Agent 配置与 MCP。",
-          "markdown": "---\ntitle: 一键接入\norder: 3\ndescription: 用 @morya-ui/setup 安装组件库，并按需写入样式、Agent 配置与 MCP。\n---\n\n# 一键接入\n\n[`@morya-ui/setup`](https://www.npmjs.com/package/@morya-ui/setup) 用于在业务 Vue 项目中接入 `morya-ui`：安装依赖、注入样式，并可一并写入 Agent Skill、Cursor 规则与 MCP。手写安装见 [快速上手](/docs/quick-start)；AI 生成页面的约定见 [AI 接入](/docs/ai-setup)。\n\n## 命令\n\n在业务项目根目录执行：\n\n```bash\nnpx @morya-ui/setup\n```\n\n默认会：\n\n1. 安装 `morya-ui`（按锁文件选用 pnpm / yarn / npm）\n2. 复制 `DESIGN.md`、Agent Skill、Cursor rules 与检查脚本\n3. 合并 `.cursor/mcp.json`，接入 [`@morya-ui/mcp`](https://www.npmjs.com/package/@morya-ui/mcp)\n4. 尝试在入口注入 `import 'morya-ui/styles.css'`\n5. 若缺失则追加 `check:colors` 脚本\n\n也可以按场景选用：\n\n```bash\n# 只安装组件库并注入样式\nnpx @morya-ui/setup app\n\n# 已装库时，只写入 AI 配置与 MCP\nnpx @morya-ui/setup ai\n\n# 非交互：默认 skill / 指定 / 全部\nnpx @morya-ui/setup ai --yes\nnpx @morya-ui/setup ai --skills=morya-ui-pages,frontend-design\nnpx @morya-ui/setup ai --skills=all\n```\n\n在 TTY 下，`full` / `ai` 会提示勾选可选 Agent Skill（必选 `morya-ui-pages` 始终写入）。完成后若写入了 MCP，请 **重启 Cursor**（或重载 MCP）。生成页面前让 Agent 先读 `DESIGN.md`。\n\n## 选项\n\n| Flag | 说明 |\n| --- | --- |\n| `--cwd <dir>` | 目标项目根（默认当前目录） |\n| `--pm pnpm\\|yarn\\|npm` | 指定包管理器 |\n| `--skills <list>` | 逗号分隔的 skill id，或 `all`（跳过交互提示） |\n| `--yes` / `-y` | 使用默认 skill，不提示 |\n| `--force` | 覆盖已有模板文件与 `morya-ui` MCP 条目 |\n| `--dry-run` | 只打印将要执行的操作 |\n| `--skip-install` | 不安装依赖 |\n| `--skip-template` | 不复制 skill / rules / docs |\n| `--skip-mcp` | 不写 MCP 配置 |\n| `--skip-styles` | 不注入样式 import |\n| `--skip-scripts` | 不改 `package.json` scripts |\n\n默认 **不覆盖** 已有文件；只有 `--force` 才会覆盖模板与 MCP 条目。\n\n### Skills\n\n| Id | 默认 | 作用 |\n| --- | --- | --- |\n| `morya-ui-pages` | 必选 | 用 `M*` + 黄金布局生成页面 |\n| `frontend-design` | 可选 | Express / 品牌向视觉味觉 |\n| `fixing-accessibility` | 可选 | 无障碍审计与定向修复 |\n\n目录：[`packages/setup/catalog/skills.json`](https://github.com/morya-space/morya-ui/blob/main/packages/setup/catalog/skills.json)。\n\n示例：只补 MCP：\n\n```bash\nnpx @morya-ui/setup ai --skip-template --skip-scripts\n```\n\n## 会落到项目里的内容\n\n| 路径 | 作用 |\n| --- | --- |\n| `DESIGN.md` | AI 设计第一信源（原则、应用根、令牌摘要、禁止项） |\n| `.agents/skills/morya-ui-pages/` | 页面生成 Agent Skill（见 [Agent Skill](/docs/agent-skill)） |\n| `.agents/skills/<optional>/` | 勾选时写入的 companion skill |\n| `.cursor/rules/` | Cursor 常驻规则 |\n| `scripts/check-raw-colors.mjs` | 裸色值扫描 |\n| `.cursor/mcp.json` | Cursor MCP（`npx -y @morya-ui/mcp`） |\n\n模板源在仓库 [`design-kit/`](https://github.com/morya-space/morya-ui/tree/main/design-kit)。CLI 不调用 `app.use(MoryaUI)`，也不改 `App.vue`。\n\n## 冲突策略\n\n- 模板文件与 `.cursor/rules/*`：目标已存在则跳过（除非 `--force`）\n- `.cursor/mcp.json`：合并其它 server；已有 `morya-ui` 条目则跳过（除非 `--force`）\n- `check:colors`：仅在缺失时追加（除非 `--force`）\n- 样式：找到入口且尚未引入时才注入\n\n## 下一步\n\n- [快速上手](/docs/quick-start)：组件用法与最小示例  \n- [AI 接入](/docs/ai-setup)：用 AI 生成业务页面时如何配合 Skill / MCP  \n- [Agent Skill](/docs/agent-skill) · [Agent MCP](/docs/mcp)  \n- [组件](/components)：浏览 API 与预览\n",
+          "markdown": "---\ntitle: 一键接入\norder: 3\ndescription: 用 @morya-ui/setup 安装组件库，并按需写入样式、Agent 配置与 MCP。\n---\n\n# 一键接入\n\n[`@morya-ui/setup`](https://www.npmjs.com/package/@morya-ui/setup) 用于在业务 Vue 项目中接入 `morya-ui`：安装依赖、注入样式，并可一并写入 Agent Skill、Cursor 规则与 MCP。手写安装见 [快速上手](/docs/quick-start)；AI 生成页面的约定见 [AI 接入](/docs/ai-setup)。\n\n## 命令\n\n在业务项目根目录执行：\n\n```bash\nnpx @morya-ui/setup\n```\n\n默认会：\n\n1. 安装 `morya-ui`（按锁文件选用 pnpm / yarn / npm）\n2. 复制 `DESIGN.md`、Agent Skill、Cursor rules 与检查脚本\n3. 合并 `.cursor/mcp.json`，接入 [`@morya-ui/mcp`](https://www.npmjs.com/package/@morya-ui/mcp)\n4. 尝试在入口注入 `import 'morya-ui/styles.css'`\n5. 若缺失则追加 `check:colors` 脚本\n\n也可以按场景选用：\n\n```bash\n# 只安装组件库并注入样式\nnpx @morya-ui/setup app\n\n# 已装库时，只写入 AI 配置与 MCP\nnpx @morya-ui/setup ai\n\n# 非交互：默认 skill / 指定 / 全部\nnpx @morya-ui/setup ai --yes\nnpx @morya-ui/setup ai --skills=morya-ui-pages,frontend-design,impeccable\nnpx @morya-ui/setup ai --skills=all\n```\n\n在 TTY 下，`full` / `ai` 会提示勾选可选 Agent Skill（必选 `morya-ui-pages` 始终写入）。可选 companion 通过 [skills CLI](https://skills.sh/) 安装**最新版**。完成后若写入了 MCP，请 **重启 Cursor**（或重载 MCP）。生成页面前让 Agent 先读 `DESIGN.md`。\n\n## 选项\n\n| Flag | 说明 |\n| --- | --- |\n| `--cwd <dir>` | 目标项目根（默认当前目录） |\n| `--pm pnpm\\|yarn\\|npm` | 指定包管理器 |\n| `--skills <list>` | 逗号分隔的 skill id，或 `all`（跳过交互提示） |\n| `--yes` / `-y` | 使用默认 skill，不提示 |\n| `--force` | 覆盖已有模板文件与 `morya-ui` MCP 条目 |\n| `--dry-run` | 只打印将要执行的操作 |\n| `--skip-install` | 不安装依赖 |\n| `--skip-template` | 不复制 skill / rules / docs（也不装 companion） |\n| `--skip-mcp` | 不写 MCP 配置 |\n| `--skip-styles` | 不注入样式 import |\n| `--skip-scripts` | 不改 `package.json` scripts |\n\n模板文件默认 **不覆盖**；只有 `--force` 才会覆盖模板与 MCP 条目。勾选的 companion skill 会始终拉取最新版。\n\n### Skills\n\n| Id | 默认 | 安装方式 | 作用 |\n| --- | --- | --- | --- |\n| `morya-ui-pages` | 必选 | 包内 template | 用 `M*` + 黄金布局生成页面 |\n| `frontend-design` | 可选 | skills CLI（`anthropics/skills` 最新） | Express / 品牌向视觉味觉 |\n| `fixing-accessibility` | 可选 | skills CLI（`ibelick/ui-skills` 最新） | 无障碍审计与定向修复 |\n| `impeccable` | 可选 | skills CLI（`pbakaus/impeccable` 最新） | 命名化 polish / 审计 / 改版 |\n\n目录：[`packages/setup/catalog/skills.json`](https://github.com/morya-space/morya-ui/blob/main/packages/setup/catalog/skills.json)。\n\n示例：只补 MCP：\n\n```bash\nnpx @morya-ui/setup ai --skip-template --skip-scripts\n```\n\n## 会落到项目里的内容\n\n| 路径 | 作用 |\n| --- | --- |\n| `DESIGN.md` | AI 设计第一信源（原则、应用根、令牌摘要、禁止项） |\n| `.agents/skills/morya-ui-pages/` | 页面生成 Agent Skill（见 [Agent Skill](/docs/agent-skill)） |\n| `.agents/skills/<optional>/` | 勾选时由 skills CLI 写入的最新 companion |\n| `.cursor/rules/` | Cursor 常驻规则 |\n| `scripts/check-raw-colors.mjs` | 裸色值扫描 |\n| `.cursor/mcp.json` | Cursor MCP（`npx -y @morya-ui/mcp`） |\n\n模板源在仓库 [`design-kit/`](https://github.com/morya-space/morya-ui/tree/main/design-kit)。CLI 不调用 `app.use(MoryaUI)`，也不改 `App.vue`。\n\n## 冲突策略\n\n- 模板文件与 `.cursor/rules/*`：目标已存在则跳过（除非 `--force`）\n- Companion skills（skills CLI）：勾选时始终安装/更新为最新版\n- `.cursor/mcp.json`：合并其它 server；已有 `morya-ui` 条目则跳过（除非 `--force`）\n- `check:colors`：仅在缺失时追加（除非 `--force`）\n- 样式：找到入口且尚未引入时才注入\n\n## 下一步\n\n- [快速上手](/docs/quick-start)：组件用法与最小示例  \n- [AI 接入](/docs/ai-setup)：用 AI 生成业务页面时如何配合 Skill / MCP  \n- [Agent Skill](/docs/agent-skill) · [Agent MCP](/docs/mcp)  \n- [组件](/components)：浏览 API 与预览\n",
           "sections": [
             {
               "title": "",
@@ -26849,22 +27015,22 @@
             {
               "title": "命令",
               "id": "命令",
-              "body": "在业务项目根目录执行：\n\n```bash\nnpx @morya-ui/setup\n```\n\n默认会：\n\n1. 安装 `morya-ui`（按锁文件选用 pnpm / yarn / npm）\n2. 复制 `DESIGN.md`、Agent Skill、Cursor rules 与检查脚本\n3. 合并 `.cursor/mcp.json`，接入 [`@morya-ui/mcp`](https://www.npmjs.com/package/@morya-ui/mcp)\n4. 尝试在入口注入 `import 'morya-ui/styles.css'`\n5. 若缺失则追加 `check:colors` 脚本\n\n也可以按场景选用：\n\n```bash\n# 只安装组件库并注入样式\nnpx @morya-ui/setup app\n\n# 已装库时，只写入 AI 配置与 MCP\nnpx @morya-ui/setup ai\n\n# 非交互：默认 skill / 指定 / 全部\nnpx @morya-ui/setup ai --yes\nnpx @morya-ui/setup ai --skills=morya-ui-pages,frontend-design\nnpx @morya-ui/setup ai --skills=all\n```\n\n在 TTY 下，`full` / `ai` 会提示勾选可选 Agent Skill（必选 `morya-ui-pages` 始终写入）。完成后若写入了 MCP，请 **重启 Cursor**（或重载 MCP）。生成页面前让 Agent 先读 `DESIGN.md`。"
+              "body": "在业务项目根目录执行：\n\n```bash\nnpx @morya-ui/setup\n```\n\n默认会：\n\n1. 安装 `morya-ui`（按锁文件选用 pnpm / yarn / npm）\n2. 复制 `DESIGN.md`、Agent Skill、Cursor rules 与检查脚本\n3. 合并 `.cursor/mcp.json`，接入 [`@morya-ui/mcp`](https://www.npmjs.com/package/@morya-ui/mcp)\n4. 尝试在入口注入 `import 'morya-ui/styles.css'`\n5. 若缺失则追加 `check:colors` 脚本\n\n也可以按场景选用：\n\n```bash\n# 只安装组件库并注入样式\nnpx @morya-ui/setup app\n\n# 已装库时，只写入 AI 配置与 MCP\nnpx @morya-ui/setup ai\n\n# 非交互：默认 skill / 指定 / 全部\nnpx @morya-ui/setup ai --yes\nnpx @morya-ui/setup ai --skills=morya-ui-pages,frontend-design,impeccable\nnpx @morya-ui/setup ai --skills=all\n```\n\n在 TTY 下，`full` / `ai` 会提示勾选可选 Agent Skill（必选 `morya-ui-pages` 始终写入）。可选 companion 通过 [skills CLI](https://skills.sh/) 安装**最新版**。完成后若写入了 MCP，请 **重启 Cursor**（或重载 MCP）。生成页面前让 Agent 先读 `DESIGN.md`。"
             },
             {
               "title": "选项",
               "id": "选项",
-              "body": "| Flag | 说明 |\n| --- | --- |\n| `--cwd <dir>` | 目标项目根（默认当前目录） |\n| `--pm pnpm\\|yarn\\|npm` | 指定包管理器 |\n| `--skills <list>` | 逗号分隔的 skill id，或 `all`（跳过交互提示） |\n| `--yes` / `-y` | 使用默认 skill，不提示 |\n| `--force` | 覆盖已有模板文件与 `morya-ui` MCP 条目 |\n| `--dry-run` | 只打印将要执行的操作 |\n| `--skip-install` | 不安装依赖 |\n| `--skip-template` | 不复制 skill / rules / docs |\n| `--skip-mcp` | 不写 MCP 配置 |\n| `--skip-styles` | 不注入样式 import |\n| `--skip-scripts` | 不改 `package.json` scripts |\n\n默认 **不覆盖** 已有文件；只有 `--force` 才会覆盖模板与 MCP 条目。\n\n### Skills\n\n| Id | 默认 | 作用 |\n| --- | --- | --- |\n| `morya-ui-pages` | 必选 | 用 `M*` + 黄金布局生成页面 |\n| `frontend-design` | 可选 | Express / 品牌向视觉味觉 |\n| `fixing-accessibility` | 可选 | 无障碍审计与定向修复 |\n\n目录：[`packages/setup/catalog/skills.json`](https://github.com/morya-space/morya-ui/blob/main/packages/setup/catalog/skills.json)。\n\n示例：只补 MCP：\n\n```bash\nnpx @morya-ui/setup ai --skip-template --skip-scripts\n```"
+              "body": "| Flag | 说明 |\n| --- | --- |\n| `--cwd <dir>` | 目标项目根（默认当前目录） |\n| `--pm pnpm\\|yarn\\|npm` | 指定包管理器 |\n| `--skills <list>` | 逗号分隔的 skill id，或 `all`（跳过交互提示） |\n| `--yes` / `-y` | 使用默认 skill，不提示 |\n| `--force` | 覆盖已有模板文件与 `morya-ui` MCP 条目 |\n| `--dry-run` | 只打印将要执行的操作 |\n| `--skip-install` | 不安装依赖 |\n| `--skip-template` | 不复制 skill / rules / docs（也不装 companion） |\n| `--skip-mcp` | 不写 MCP 配置 |\n| `--skip-styles` | 不注入样式 import |\n| `--skip-scripts` | 不改 `package.json` scripts |\n\n模板文件默认 **不覆盖**；只有 `--force` 才会覆盖模板与 MCP 条目。勾选的 companion skill 会始终拉取最新版。\n\n### Skills\n\n| Id | 默认 | 安装方式 | 作用 |\n| --- | --- | --- | --- |\n| `morya-ui-pages` | 必选 | 包内 template | 用 `M*` + 黄金布局生成页面 |\n| `frontend-design` | 可选 | skills CLI（`anthropics/skills` 最新） | Express / 品牌向视觉味觉 |\n| `fixing-accessibility` | 可选 | skills CLI（`ibelick/ui-skills` 最新） | 无障碍审计与定向修复 |\n| `impeccable` | 可选 | skills CLI（`pbakaus/impeccable` 最新） | 命名化 polish / 审计 / 改版 |\n\n目录：[`packages/setup/catalog/skills.json`](https://github.com/morya-space/morya-ui/blob/main/packages/setup/catalog/skills.json)。\n\n示例：只补 MCP：\n\n```bash\nnpx @morya-ui/setup ai --skip-template --skip-scripts\n```"
             },
             {
               "title": "会落到项目里的内容",
               "id": "会落到项目里的内容",
-              "body": "| 路径 | 作用 |\n| --- | --- |\n| `DESIGN.md` | AI 设计第一信源（原则、应用根、令牌摘要、禁止项） |\n| `.agents/skills/morya-ui-pages/` | 页面生成 Agent Skill（见 [Agent Skill](/docs/agent-skill)） |\n| `.agents/skills/<optional>/` | 勾选时写入的 companion skill |\n| `.cursor/rules/` | Cursor 常驻规则 |\n| `scripts/check-raw-colors.mjs` | 裸色值扫描 |\n| `.cursor/mcp.json` | Cursor MCP（`npx -y @morya-ui/mcp`） |\n\n模板源在仓库 [`design-kit/`](https://github.com/morya-space/morya-ui/tree/main/design-kit)。CLI 不调用 `app.use(MoryaUI)`，也不改 `App.vue`。"
+              "body": "| 路径 | 作用 |\n| --- | --- |\n| `DESIGN.md` | AI 设计第一信源（原则、应用根、令牌摘要、禁止项） |\n| `.agents/skills/morya-ui-pages/` | 页面生成 Agent Skill（见 [Agent Skill](/docs/agent-skill)） |\n| `.agents/skills/<optional>/` | 勾选时由 skills CLI 写入的最新 companion |\n| `.cursor/rules/` | Cursor 常驻规则 |\n| `scripts/check-raw-colors.mjs` | 裸色值扫描 |\n| `.cursor/mcp.json` | Cursor MCP（`npx -y @morya-ui/mcp`） |\n\n模板源在仓库 [`design-kit/`](https://github.com/morya-space/morya-ui/tree/main/design-kit)。CLI 不调用 `app.use(MoryaUI)`，也不改 `App.vue`。"
             },
             {
               "title": "冲突策略",
               "id": "冲突策略",
-              "body": "- 模板文件与 `.cursor/rules/*`：目标已存在则跳过（除非 `--force`）\n- `.cursor/mcp.json`：合并其它 server；已有 `morya-ui` 条目则跳过（除非 `--force`）\n- `check:colors`：仅在缺失时追加（除非 `--force`）\n- 样式：找到入口且尚未引入时才注入"
+              "body": "- 模板文件与 `.cursor/rules/*`：目标已存在则跳过（除非 `--force`）\n- Companion skills（skills CLI）：勾选时始终安装/更新为最新版\n- `.cursor/mcp.json`：合并其它 server；已有 `morya-ui` 条目则跳过（除非 `--force`）\n- `check:colors`：仅在缺失时追加（除非 `--force`）\n- 样式：找到入口且尚未引入时才注入"
             },
             {
               "title": "下一步",
@@ -26876,7 +27042,7 @@
         "en-US": {
           "title": "One-shot setup",
           "description": "Use @morya-ui/setup to install the library and optionally write styles, Agent config, and MCP.",
-          "markdown": "---\ntitle: One-shot setup\norder: 3\ndescription: Use @morya-ui/setup to install the library and optionally write styles, Agent config, and MCP.\n---\n\n# One-shot setup\n\n[`@morya-ui/setup`](https://www.npmjs.com/package/@morya-ui/setup) onboards a consumer Vue app to `morya-ui`: install the dependency, inject styles, and optionally write the Agent skill, Cursor rules, and MCP. For manual install see [Quick start](/docs/quick-start). For AI page-generation workflow see [AI setup](/docs/ai-setup).\n\n## Commands\n\nFrom the app project root:\n\n```bash\nnpx @morya-ui/setup\n```\n\nBy default this will:\n\n1. Install `morya-ui` (pnpm / yarn / npm from the lockfile)\n2. Copy `DESIGN.md`, Agent skill, Cursor rules, and check scripts\n3. Merge `.cursor/mcp.json` for [`@morya-ui/mcp`](https://www.npmjs.com/package/@morya-ui/mcp)\n4. Try to inject `import 'morya-ui/styles.css'`\n5. Add a `check:colors` script when missing\n\nOther common commands:\n\n```bash\n# Library + styles only\nnpx @morya-ui/setup app\n\n# AI config + MCP only (library already installed)\nnpx @morya-ui/setup ai\n\n# Non-interactive skill selection\nnpx @morya-ui/setup ai --yes\nnpx @morya-ui/setup ai --skills=morya-ui-pages,frontend-design\nnpx @morya-ui/setup ai --skills=all\n```\n\nOn a TTY, `full` / `ai` prompts for optional Agent skills (required `morya-ui-pages` is always included). If MCP was written, **restart Cursor** (or reload MCP). Have the agent read `DESIGN.md` before generating pages.\n\n## Options\n\n| Flag | Meaning |\n| --- | --- |\n| `--cwd <dir>` | Target project root (default: cwd) |\n| `--pm pnpm\\|yarn\\|npm` | Package manager |\n| `--skills <list>` | Comma-separated skill ids, or `all` (skips the prompt) |\n| `--yes` / `-y` | Use default skills without prompting |\n| `--force` | Overwrite existing template files and the `morya-ui` MCP entry |\n| `--dry-run` | Print actions only |\n| `--skip-install` | Skip dependency install |\n| `--skip-template` | Skip copying skill / rules / docs |\n| `--skip-mcp` | Skip writing MCP config |\n| `--skip-styles` | Skip styles import injection |\n| `--skip-scripts` | Skip `package.json` scripts |\n\nBy default **existing files are not overwritten**; use `--force` to overwrite templates and the MCP entry.\n\n### Skills\n\n| Id | Default | Role |\n| --- | --- | --- |\n| `morya-ui-pages` | required | Page generation with `M*` + golden layouts |\n| `frontend-design` | optional | Express / brand visual taste |\n| `fixing-accessibility` | optional | A11y audit and targeted fixes |\n\nCatalog: [`packages/setup/catalog/skills.json`](https://github.com/morya-space/morya-ui/blob/main/packages/setup/catalog/skills.json).\n\nExample: MCP only:\n\n```bash\nnpx @morya-ui/setup ai --skip-template --skip-scripts\n```\n\n## What lands in the project\n\n| Path | Role |\n| --- | --- |\n| `DESIGN.md` | Primary design brief (principles, app root, token summary, bans) |\n| `.agents/skills/morya-ui-pages/` | Page-generation Agent skill (see [Agent Skill](/docs/agent-skill)) |\n| `.agents/skills/<optional>/` | Companion skills when selected |\n| `.cursor/rules/` | Cursor always-on rules |\n| `scripts/check-raw-colors.mjs` | Raw color scan |\n| `.cursor/mcp.json` | Cursor MCP (`npx -y @morya-ui/mcp`) |\n\nTemplate source: [`design-kit/`](https://github.com/morya-space/morya-ui/tree/main/design-kit). The CLI does not call `app.use(MoryaUI)` or edit `App.vue`.\n\n## Conflict policy\n\n- Template files and `.cursor/rules/*`: skip if the destination exists (unless `--force`)\n- `.cursor/mcp.json`: merge other servers; skip an existing `morya-ui` entry unless `--force`\n- `check:colors`: add only if missing (unless `--force`)\n- Styles: inject only when an entry is found and the import is not already present\n\n## Next steps\n\n- [Quick start](/docs/quick-start): component usage and a minimal example  \n- [AI setup](/docs/ai-setup): how setup relates to Skill / MCP for AI page generation  \n- [Agent Skill](/docs/agent-skill) · [Agent MCP](/docs/mcp)  \n- [Components](/components): browse APIs and previews\n",
+          "markdown": "---\ntitle: One-shot setup\norder: 3\ndescription: Use @morya-ui/setup to install the library and optionally write styles, Agent config, and MCP.\n---\n\n# One-shot setup\n\n[`@morya-ui/setup`](https://www.npmjs.com/package/@morya-ui/setup) onboards a consumer Vue app to `morya-ui`: install the dependency, inject styles, and optionally write the Agent skill, Cursor rules, and MCP. For manual install see [Quick start](/docs/quick-start). For AI page-generation workflow see [AI setup](/docs/ai-setup).\n\n## Commands\n\nFrom the app project root:\n\n```bash\nnpx @morya-ui/setup\n```\n\nBy default this will:\n\n1. Install `morya-ui` (pnpm / yarn / npm from the lockfile)\n2. Copy `DESIGN.md`, Agent skill, Cursor rules, and check scripts\n3. Merge `.cursor/mcp.json` for [`@morya-ui/mcp`](https://www.npmjs.com/package/@morya-ui/mcp)\n4. Try to inject `import 'morya-ui/styles.css'`\n5. Add a `check:colors` script when missing\n\nOther common commands:\n\n```bash\n# Library + styles only\nnpx @morya-ui/setup app\n\n# AI config + MCP only (library already installed)\nnpx @morya-ui/setup ai\n\n# Non-interactive skill selection\nnpx @morya-ui/setup ai --yes\nnpx @morya-ui/setup ai --skills=morya-ui-pages,frontend-design,impeccable\nnpx @morya-ui/setup ai --skills=all\n```\n\nOn a TTY, `full` / `ai` prompts for optional Agent skills (required `morya-ui-pages` is always included). Optional companions are installed at **latest** via the [skills CLI](https://skills.sh/). If MCP was written, **restart Cursor** (or reload MCP). Have the agent read `DESIGN.md` before generating pages.\n\n## Options\n\n| Flag | Meaning |\n| --- | --- |\n| `--cwd <dir>` | Target project root (default: cwd) |\n| `--pm pnpm\\|yarn\\|npm` | Package manager |\n| `--skills <list>` | Comma-separated skill ids, or `all` (skips the prompt) |\n| `--yes` / `-y` | Use default skills without prompting |\n| `--force` | Overwrite existing template files and the `morya-ui` MCP entry |\n| `--dry-run` | Print actions only |\n| `--skip-install` | Skip dependency install |\n| `--skip-template` | Skip copying skill / rules / docs (also skips companion install) |\n| `--skip-mcp` | Skip writing MCP config |\n| `--skip-styles` | Skip styles import injection |\n| `--skip-scripts` | Skip `package.json` scripts |\n\nTemplate files are **not** overwritten by default; use `--force` for templates and the MCP entry. Selected companion skills always refresh to latest.\n\n### Skills\n\n| Id | Default | Install | Role |\n| --- | --- | --- | --- |\n| `morya-ui-pages` | required | package template | Page generation with `M*` + golden layouts |\n| `frontend-design` | optional | skills CLI (`anthropics/skills`, latest) | Express / brand visual taste |\n| `fixing-accessibility` | optional | skills CLI (`ibelick/ui-skills`, latest) | A11y audit and targeted fixes |\n| `impeccable` | optional | skills CLI (`pbakaus/impeccable`, latest) | Named polish / audit / redesign |\n\nCatalog: [`packages/setup/catalog/skills.json`](https://github.com/morya-space/morya-ui/blob/main/packages/setup/catalog/skills.json).\n\nExample: MCP only:\n\n```bash\nnpx @morya-ui/setup ai --skip-template --skip-scripts\n```\n\n## What lands in the project\n\n| Path | Role |\n| --- | --- |\n| `DESIGN.md` | Primary design brief (principles, app root, token summary, bans) |\n| `.agents/skills/morya-ui-pages/` | Page-generation Agent skill (see [Agent Skill](/docs/agent-skill)) |\n| `.agents/skills/<optional>/` | Latest companion skills via skills CLI when selected |\n| `.cursor/rules/` | Cursor always-on rules |\n| `scripts/check-raw-colors.mjs` | Raw color scan |\n| `.cursor/mcp.json` | Cursor MCP (`npx -y @morya-ui/mcp`) |\n\nTemplate source: [`design-kit/`](https://github.com/morya-space/morya-ui/tree/main/design-kit). The CLI does not call `app.use(MoryaUI)` or edit `App.vue`.\n\n## Conflict policy\n\n- Template files and `.cursor/rules/*`: skip if the destination exists (unless `--force`)\n- Companion skills (skills CLI): always install/update to latest when selected\n- `.cursor/mcp.json`: merge other servers; skip an existing `morya-ui` entry unless `--force`\n- `check:colors`: add only if missing (unless `--force`)\n- Styles: inject only when an entry is found and the import is not already present\n\n## Next steps\n\n- [Quick start](/docs/quick-start): component usage and a minimal example  \n- [AI setup](/docs/ai-setup): how setup relates to Skill / MCP for AI page generation  \n- [Agent Skill](/docs/agent-skill) · [Agent MCP](/docs/mcp)  \n- [Components](/components): browse APIs and previews\n",
           "sections": [
             {
               "title": "",
@@ -26886,22 +27052,22 @@
             {
               "title": "Commands",
               "id": "commands",
-              "body": "From the app project root:\n\n```bash\nnpx @morya-ui/setup\n```\n\nBy default this will:\n\n1. Install `morya-ui` (pnpm / yarn / npm from the lockfile)\n2. Copy `DESIGN.md`, Agent skill, Cursor rules, and check scripts\n3. Merge `.cursor/mcp.json` for [`@morya-ui/mcp`](https://www.npmjs.com/package/@morya-ui/mcp)\n4. Try to inject `import 'morya-ui/styles.css'`\n5. Add a `check:colors` script when missing\n\nOther common commands:\n\n```bash\n# Library + styles only\nnpx @morya-ui/setup app\n\n# AI config + MCP only (library already installed)\nnpx @morya-ui/setup ai\n\n# Non-interactive skill selection\nnpx @morya-ui/setup ai --yes\nnpx @morya-ui/setup ai --skills=morya-ui-pages,frontend-design\nnpx @morya-ui/setup ai --skills=all\n```\n\nOn a TTY, `full` / `ai` prompts for optional Agent skills (required `morya-ui-pages` is always included). If MCP was written, **restart Cursor** (or reload MCP). Have the agent read `DESIGN.md` before generating pages."
+              "body": "From the app project root:\n\n```bash\nnpx @morya-ui/setup\n```\n\nBy default this will:\n\n1. Install `morya-ui` (pnpm / yarn / npm from the lockfile)\n2. Copy `DESIGN.md`, Agent skill, Cursor rules, and check scripts\n3. Merge `.cursor/mcp.json` for [`@morya-ui/mcp`](https://www.npmjs.com/package/@morya-ui/mcp)\n4. Try to inject `import 'morya-ui/styles.css'`\n5. Add a `check:colors` script when missing\n\nOther common commands:\n\n```bash\n# Library + styles only\nnpx @morya-ui/setup app\n\n# AI config + MCP only (library already installed)\nnpx @morya-ui/setup ai\n\n# Non-interactive skill selection\nnpx @morya-ui/setup ai --yes\nnpx @morya-ui/setup ai --skills=morya-ui-pages,frontend-design,impeccable\nnpx @morya-ui/setup ai --skills=all\n```\n\nOn a TTY, `full` / `ai` prompts for optional Agent skills (required `morya-ui-pages` is always included). Optional companions are installed at **latest** via the [skills CLI](https://skills.sh/). If MCP was written, **restart Cursor** (or reload MCP). Have the agent read `DESIGN.md` before generating pages."
             },
             {
               "title": "Options",
               "id": "options",
-              "body": "| Flag | Meaning |\n| --- | --- |\n| `--cwd <dir>` | Target project root (default: cwd) |\n| `--pm pnpm\\|yarn\\|npm` | Package manager |\n| `--skills <list>` | Comma-separated skill ids, or `all` (skips the prompt) |\n| `--yes` / `-y` | Use default skills without prompting |\n| `--force` | Overwrite existing template files and the `morya-ui` MCP entry |\n| `--dry-run` | Print actions only |\n| `--skip-install` | Skip dependency install |\n| `--skip-template` | Skip copying skill / rules / docs |\n| `--skip-mcp` | Skip writing MCP config |\n| `--skip-styles` | Skip styles import injection |\n| `--skip-scripts` | Skip `package.json` scripts |\n\nBy default **existing files are not overwritten**; use `--force` to overwrite templates and the MCP entry.\n\n### Skills\n\n| Id | Default | Role |\n| --- | --- | --- |\n| `morya-ui-pages` | required | Page generation with `M*` + golden layouts |\n| `frontend-design` | optional | Express / brand visual taste |\n| `fixing-accessibility` | optional | A11y audit and targeted fixes |\n\nCatalog: [`packages/setup/catalog/skills.json`](https://github.com/morya-space/morya-ui/blob/main/packages/setup/catalog/skills.json).\n\nExample: MCP only:\n\n```bash\nnpx @morya-ui/setup ai --skip-template --skip-scripts\n```"
+              "body": "| Flag | Meaning |\n| --- | --- |\n| `--cwd <dir>` | Target project root (default: cwd) |\n| `--pm pnpm\\|yarn\\|npm` | Package manager |\n| `--skills <list>` | Comma-separated skill ids, or `all` (skips the prompt) |\n| `--yes` / `-y` | Use default skills without prompting |\n| `--force` | Overwrite existing template files and the `morya-ui` MCP entry |\n| `--dry-run` | Print actions only |\n| `--skip-install` | Skip dependency install |\n| `--skip-template` | Skip copying skill / rules / docs (also skips companion install) |\n| `--skip-mcp` | Skip writing MCP config |\n| `--skip-styles` | Skip styles import injection |\n| `--skip-scripts` | Skip `package.json` scripts |\n\nTemplate files are **not** overwritten by default; use `--force` for templates and the MCP entry. Selected companion skills always refresh to latest.\n\n### Skills\n\n| Id | Default | Install | Role |\n| --- | --- | --- | --- |\n| `morya-ui-pages` | required | package template | Page generation with `M*` + golden layouts |\n| `frontend-design` | optional | skills CLI (`anthropics/skills`, latest) | Express / brand visual taste |\n| `fixing-accessibility` | optional | skills CLI (`ibelick/ui-skills`, latest) | A11y audit and targeted fixes |\n| `impeccable` | optional | skills CLI (`pbakaus/impeccable`, latest) | Named polish / audit / redesign |\n\nCatalog: [`packages/setup/catalog/skills.json`](https://github.com/morya-space/morya-ui/blob/main/packages/setup/catalog/skills.json).\n\nExample: MCP only:\n\n```bash\nnpx @morya-ui/setup ai --skip-template --skip-scripts\n```"
             },
             {
               "title": "What lands in the project",
               "id": "what-lands-in-the-project",
-              "body": "| Path | Role |\n| --- | --- |\n| `DESIGN.md` | Primary design brief (principles, app root, token summary, bans) |\n| `.agents/skills/morya-ui-pages/` | Page-generation Agent skill (see [Agent Skill](/docs/agent-skill)) |\n| `.agents/skills/<optional>/` | Companion skills when selected |\n| `.cursor/rules/` | Cursor always-on rules |\n| `scripts/check-raw-colors.mjs` | Raw color scan |\n| `.cursor/mcp.json` | Cursor MCP (`npx -y @morya-ui/mcp`) |\n\nTemplate source: [`design-kit/`](https://github.com/morya-space/morya-ui/tree/main/design-kit). The CLI does not call `app.use(MoryaUI)` or edit `App.vue`."
+              "body": "| Path | Role |\n| --- | --- |\n| `DESIGN.md` | Primary design brief (principles, app root, token summary, bans) |\n| `.agents/skills/morya-ui-pages/` | Page-generation Agent skill (see [Agent Skill](/docs/agent-skill)) |\n| `.agents/skills/<optional>/` | Latest companion skills via skills CLI when selected |\n| `.cursor/rules/` | Cursor always-on rules |\n| `scripts/check-raw-colors.mjs` | Raw color scan |\n| `.cursor/mcp.json` | Cursor MCP (`npx -y @morya-ui/mcp`) |\n\nTemplate source: [`design-kit/`](https://github.com/morya-space/morya-ui/tree/main/design-kit). The CLI does not call `app.use(MoryaUI)` or edit `App.vue`."
             },
             {
               "title": "Conflict policy",
               "id": "conflict-policy",
-              "body": "- Template files and `.cursor/rules/*`: skip if the destination exists (unless `--force`)\n- `.cursor/mcp.json`: merge other servers; skip an existing `morya-ui` entry unless `--force`\n- `check:colors`: add only if missing (unless `--force`)\n- Styles: inject only when an entry is found and the import is not already present"
+              "body": "- Template files and `.cursor/rules/*`: skip if the destination exists (unless `--force`)\n- Companion skills (skills CLI): always install/update to latest when selected\n- `.cursor/mcp.json`: merge other servers; skip an existing `morya-ui` entry unless `--force`\n- `check:colors`: add only if missing (unless `--force`)\n- Styles: inject only when an entry is found and the import is not already present"
             },
             {
               "title": "Next steps",
@@ -27071,7 +27237,7 @@
         "zh-CN": {
           "title": "动效",
           "description": "动效强度偏好、进出场预设与相关设计令牌。",
-          "markdown": "---\ntitle: 动效\norder: 6\ndescription: 动效强度偏好、进出场预设与相关设计令牌。\n---\n\n# 动效\n\n动效分两层，彼此正交：\n\n1. **强度**：`useMotion` → `full` / `reduced` / `none`（写到 `data-m-motion`）\n2. **形态**：命名进出场预设（Vue `<Transition>`）\n\n时长、缓动与位移由 `--m-motion-*` 令牌驱动；完整列表见 [设计令牌](/docs/design-tokens)。\n\n## 动效偏好\n\n```ts\nimport { useMotion } from 'morya-ui'\n\nconst { preference, setMotion } = useMotion()\nsetMotion('full') // 'full' | 'reduced' | 'none'\n```\n\n- `full`：标准过渡与浮层动画  \n- `reduced`：缩短时长、弱化位移；循环指示器停掉  \n- `none`：立即切换  \n\n文档站组件页侧栏「动效」分段控件调用的是同一套 API。偏好会持久化到 `localStorage`（键名 `morya-ui-motion`）。\n\n系统开启 `prefers-reduced-motion` 时，默认会按减弱策略处理。若仍要保留完整过渡，可在 `createMoryaUI` / `MConfigProvider` 上设 `respectReducedMotion: false`。\n\n## 动效预设（进出场）\n\n浮层组件通过命名预设选择 Vue `<Transition>` 效果，解析优先级：\n\n1. 组件 `transition` prop  \n2. `componentDefaults[Component].transition`  \n3. `motion.transitions[role]`（`dialog` / `drawer` / `popup` / `toast` / `tooltip` / `overlay`）  \n4. 组件内置默认  \n\n内置 id：`fade`、`scale-fade`、`slide-fade`、`zoom`、`dialog`、`slide-up` / `slide-down` / `slide-left` / `slide-right`、`drawer`、`popover`、`loading`、`blockui`、`message`、`none`。  \n`transition={false}` 或 `'none'` 关闭 CSS 过渡。\n\n```ts\nimport { createMoryaUI, registerMotionPreset } from 'morya-ui'\n\napp.use(createMoryaUI({\n  motion: { transitions: { popup: 'slide-up', dialog: 'zoom' } },\n  componentDefaults: { Select: { transition: 'fade' } },\n}))\n\n// 自定义：先写好 .m-brand-enter-active 等 CSS，再注册\nregisterMotionPreset('brand', { name: 'm-brand' })\n```\n\n```vue\n<MDialog transition=\"slide-up\" />\n<MSelect :transition=\"false\" />\n```\n\n```vue preview src=\"./demos/theme/MotionPresets.vue\"\n```\n\n切换下拉中的预设后，请重新打开 Dialog / Drawer / Select 或再点一次 Toast，才能看到新的进出场。\n\n## 可选：接入 Animate.css\n\n`morya-ui` **不依赖** Animate.css。若业务需要 bounce / zoomIn 等 keyframe 动效，可在应用侧安装后，用桥接 CSS + `registerMotionPreset` 挂到现有 `transition` API。时长继续用 `--m-motion-enter` / `--m-motion-exit`，即可跟 `useMotion` 强度联动。\n\n```bash\npnpm add animate.css\n```\n\n```ts\nimport { registerMotionPreset } from 'morya-ui'\nimport 'animate.css'\n// 桥接 CSS：把 Animate.css keyframes 映射到 .m-animate-*-enter-active 等\n// 完整示例见 demos/theme/animate-css-bridge.css 或下方演示源码\n\nregisterMotionPreset('animate-bounce', { name: 'm-animate-bounce' })\nregisterMotionPreset('animate-zoom', { name: 'm-animate-zoom' })\nregisterMotionPreset('animate-fade-up', { name: 'm-animate-fade-up' })\n```\n\n```vue\n<MDialog transition=\"animate-bounce\" />\n<MSelect transition=\"animate-fade-up\" />\n```\n\n要点：\n\n- Vue `<Transition>` 需要 `.{name}-enter-active` / `leave-active`；把 Animate.css 的 `@keyframes` 写进这些类即可。\n- **Dialog / Drawer** 的 Transition 类在遮罩上：遮罩用同时长的 `fadeIn` / `fadeOut`，表达性动画写在内部 `.m-dialog-zoom` / `.m-drawer`，否则面板动效容易被截断或整层遮罩一起弹跳。\n- **Select / Toast** 等浮层根节点即 Transition 目标，可直接在 `-enter-active` 上挂 keyframe。\n\n文档站已引入 Animate.css，可直接试用：\n\n```vue preview src=\"./demos/theme/AnimateCssPresets.vue\"\n```\n\n## 相关令牌\n\n| Token | 用途 |\n| --- | --- |\n| `--m-motion-fast/normal/enter/exit` | 过渡时长 |\n| `--m-motion-distance` / `--m-motion-ease` | 进出场位移与缓动 |\n| `--m-motion-spin*` / `--m-motion-pulse` / `--m-motion-skeleton` | 循环指示器（`reduced`/`none` 下为 `0ms`） |\n| `--m-motion-loading-*` | Loading 变体循环时长 |\n\n亮暗主题与密度见 [主题](/docs/theme)；无障碍说明见 [无障碍](/docs/accessibility)。\n",
+          "markdown": "---\ntitle: 动效\norder: 6\ndescription: 动效强度偏好、进出场预设与相关设计令牌。\n---\n\n# 动效\n\n动效分两层，彼此正交：\n\n1. **强度**：`useMotion` → `full` / `reduced` / `none`（写到 `data-m-motion`）\n2. **形态**：命名进出场预设（Vue `<Transition>`）\n\n时长、缓动与位移由 `--m-motion-*` 令牌驱动；完整列表见 [设计令牌](/docs/design-tokens)。\n\n## 动效偏好\n\n```ts\nimport { useMotion } from 'morya-ui'\n\nconst { preference, setMotion } = useMotion()\nsetMotion('full') // 'full' | 'reduced' | 'none'\n```\n\n- `full`：标准过渡与浮层动画  \n- `reduced`：缩短时长、弱化位移；循环指示器停掉  \n- `none`：立即切换  \n\n文档站组件页侧栏「动效」分段控件调用的是同一套 API。偏好会持久化到 `localStorage`（键名 `morya-ui-motion`）。组件动效只跟这一套配置走，不读取系统的 `prefers-reduced-motion`。\n\n## 动效预设（进出场）\n\n浮层组件通过命名预设选择 Vue `<Transition>` 效果，解析优先级：\n\n1. 组件 `transition` prop  \n2. `componentDefaults[Component].transition`  \n3. `motion.transitions[role]`（`dialog` / `drawer` / `popup` / `toast` / `tooltip` / `overlay`）  \n4. 组件内置默认  \n\n内置 id：`fade`、`scale-fade`、`slide-fade`、`zoom`、`dialog`、`slide-up` / `slide-down` / `slide-left` / `slide-right`、`drawer`、`popover`、`loading`、`blockui`、`message`、`none`。  \n`transition={false}` 或 `'none'` 关闭 CSS 过渡。\n\n```ts\nimport { createMoryaUI, registerMotionPreset } from 'morya-ui'\n\napp.use(createMoryaUI({\n  motion: { transitions: { popup: 'slide-up', dialog: 'zoom' } },\n  componentDefaults: { Select: { transition: 'fade' } },\n}))\n\n// 自定义：先写好 .m-brand-enter-active 等 CSS，再注册\nregisterMotionPreset('brand', { name: 'm-brand' })\n```\n\n```vue\n<MDialog transition=\"slide-up\" />\n<MSelect :transition=\"false\" />\n```\n\n```vue preview src=\"./demos/theme/MotionPresets.vue\"\n```\n\n切换下拉中的预设后，请重新打开 Dialog / Drawer / Select 或再点一次 Toast，才能看到新的进出场。\n\n## 可选：接入 Animate.css\n\n`morya-ui` **不依赖** Animate.css。若业务需要 bounce / zoomIn 等 keyframe 动效，可在应用侧安装后，用桥接 CSS + `registerMotionPreset` 挂到现有 `transition` API。时长继续用 `--m-motion-enter` / `--m-motion-exit`，即可跟 `useMotion` 强度联动。\n\n```bash\npnpm add animate.css\n```\n\n```ts\nimport { registerMotionPreset } from 'morya-ui'\nimport 'animate.css'\n// 桥接 CSS：把 Animate.css keyframes 映射到 .m-animate-*-enter-active 等\n// 完整示例见 demos/theme/animate-css-bridge.css 或下方演示源码\n\nregisterMotionPreset('animate-bounce', { name: 'm-animate-bounce' })\nregisterMotionPreset('animate-zoom', { name: 'm-animate-zoom' })\nregisterMotionPreset('animate-fade-up', { name: 'm-animate-fade-up' })\n```\n\n```vue\n<MDialog transition=\"animate-bounce\" />\n<MSelect transition=\"animate-fade-up\" />\n```\n\n要点：\n\n- Vue `<Transition>` 需要 `.{name}-enter-active` / `leave-active`；把 Animate.css 的 `@keyframes` 写进这些类即可。\n- **Dialog / Drawer** 的 Transition 类在遮罩上：遮罩用同时长的 `fadeIn` / `fadeOut`，表达性动画写在内部 `.m-dialog-zoom` / `.m-drawer`，否则面板动效容易被截断或整层遮罩一起弹跳。\n- **Select / Toast** 等浮层根节点即 Transition 目标，可直接在 `-enter-active` 上挂 keyframe。\n\n文档站已引入 Animate.css，可直接试用：\n\n```vue preview src=\"./demos/theme/AnimateCssPresets.vue\"\n```\n\n## 相关令牌\n\n| Token | 用途 |\n| --- | --- |\n| `--m-motion-fast/normal/enter/exit` | 过渡时长 |\n| `--m-motion-distance` / `--m-motion-ease` | 进出场位移与缓动 |\n| `--m-motion-spin*` / `--m-motion-pulse` / `--m-motion-skeleton` | 循环指示器（`reduced`/`none` 下为 `0ms`） |\n| `--m-motion-loading-*` | Loading 变体循环时长 |\n\n亮暗主题与密度见 [主题](/docs/theme)；无障碍说明见 [无障碍](/docs/accessibility)。\n",
           "sections": [
             {
               "title": "",
@@ -27081,7 +27247,7 @@
             {
               "title": "动效偏好",
               "id": "动效偏好",
-              "body": "```ts\nimport { useMotion } from 'morya-ui'\n\nconst { preference, setMotion } = useMotion()\nsetMotion('full') // 'full' | 'reduced' | 'none'\n```\n\n- `full`：标准过渡与浮层动画  \n- `reduced`：缩短时长、弱化位移；循环指示器停掉  \n- `none`：立即切换  \n\n文档站组件页侧栏「动效」分段控件调用的是同一套 API。偏好会持久化到 `localStorage`（键名 `morya-ui-motion`）。\n\n系统开启 `prefers-reduced-motion` 时，默认会按减弱策略处理。若仍要保留完整过渡，可在 `createMoryaUI` / `MConfigProvider` 上设 `respectReducedMotion: false`。"
+              "body": "```ts\nimport { useMotion } from 'morya-ui'\n\nconst { preference, setMotion } = useMotion()\nsetMotion('full') // 'full' | 'reduced' | 'none'\n```\n\n- `full`：标准过渡与浮层动画  \n- `reduced`：缩短时长、弱化位移；循环指示器停掉  \n- `none`：立即切换  \n\n文档站组件页侧栏「动效」分段控件调用的是同一套 API。偏好会持久化到 `localStorage`（键名 `morya-ui-motion`）。组件动效只跟这一套配置走，不读取系统的 `prefers-reduced-motion`。"
             },
             {
               "title": "动效预设（进出场）",
@@ -27103,7 +27269,7 @@
         "en-US": {
           "title": "Motion",
           "description": "Motion intensity preferences, enter/exit presets, and related design tokens.",
-          "markdown": "---\ntitle: Motion\norder: 6\ndescription: Motion intensity preferences, enter/exit presets, and related design tokens.\n---\n\n# Motion\n\nMotion has two orthogonal layers:\n\n1. **Intensity**: `useMotion` → `full` / `reduced` / `none` (writes `data-m-motion`)\n2. **Shape**: named enter/exit presets (Vue `<Transition>`)\n\nDurations, easing, and travel come from `--m-motion-*` tokens; see the full [Design tokens](/docs/design-tokens) catalog.\n\n## Motion preference\n\n```ts\nimport { useMotion } from 'morya-ui'\n\nconst { preference, setMotion } = useMotion()\nsetMotion('full') // 'full' | 'reduced' | 'none'\n```\n\n- `full`: standard transitions and overlay motion  \n- `reduced`: shorter duration, less travel; looping indicators stop  \n- `none`: instant switches  \n\nThe Components page sidebar Motion control uses the same API. The preference is persisted in `localStorage` (`morya-ui-motion`).\n\nWhen the OS enables `prefers-reduced-motion`, reduced policies apply by default. Set `respectReducedMotion: false` on `createMoryaUI` / `MConfigProvider` to keep full transitions.\n\n## Motion presets (enter/exit)\n\nOverlay components pick a named Vue `<Transition>` preset. Resolution order:\n\n1. Component `transition` prop  \n2. `componentDefaults[Component].transition`  \n3. `motion.transitions[role]` (`dialog` / `drawer` / `popup` / `toast` / `tooltip` / `overlay`)  \n4. Component built-in default  \n\nBuilt-in ids: `fade`, `scale-fade`, `slide-fade`, `zoom`, `dialog`, `slide-up` / `slide-down` / `slide-left` / `slide-right`, `drawer`, `popover`, `loading`, `blockui`, `message`, `none`.  \n`transition={false}` or `'none'` disables CSS transitions.\n\n```ts\nimport { createMoryaUI, registerMotionPreset } from 'morya-ui'\n\napp.use(createMoryaUI({\n  motion: { transitions: { popup: 'slide-up', dialog: 'zoom' } },\n  componentDefaults: { Select: { transition: 'fade' } },\n}))\n\n// Custom: provide .m-brand-enter-active CSS, then register\nregisterMotionPreset('brand', { name: 'm-brand' })\n```\n\n```vue\n<MDialog transition=\"slide-up\" />\n<MSelect :transition=\"false\" />\n```\n\n```vue preview src=\"./demos/theme/MotionPresets.vue\"\n```\n\nAfter changing a preset in the dropdowns, reopen Dialog / Drawer / Select or trigger Toast again to replay enter/exit.\n\n## Optional: Animate.css\n\n`morya-ui` does **not** depend on Animate.css. If your app wants keyframe effects such as bounce / zoomIn, install it on the app side and wire it through bridge CSS + `registerMotionPreset` into the existing `transition` API. Keep durations on `--m-motion-enter` / `--m-motion-exit` so they stay linked to `useMotion` intensity.\n\n```bash\npnpm add animate.css\n```\n\n```ts\nimport { registerMotionPreset } from 'morya-ui'\nimport 'animate.css'\n// Bridge CSS: map Animate.css keyframes onto .m-animate-*-enter-active etc.\n// Full example: demos/theme/animate-css-bridge.css or the live demo source below\n\nregisterMotionPreset('animate-bounce', { name: 'm-animate-bounce' })\nregisterMotionPreset('animate-zoom', { name: 'm-animate-zoom' })\nregisterMotionPreset('animate-fade-up', { name: 'm-animate-fade-up' })\n```\n\n```vue\n<MDialog transition=\"animate-bounce\" />\n<MSelect transition=\"animate-fade-up\" />\n```\n\nNotes:\n\n- Vue `<Transition>` expects `.{name}-enter-active` / `leave-active`; map Animate.css `@keyframes` onto those classes.\n- **Dialog / Drawer** put Transition classes on the backdrop: use a same-duration `fadeIn` / `fadeOut` on the mask, and put the expressive animation on nested `.m-dialog-zoom` / `.m-drawer` so the panel is not cut short and the scrim does not bounce.\n- **Select / Toast** and similar overlays transition the panel root, so keyframes can sit directly on `-enter-active`.\n\nThis docs site already depends on Animate.css for the live demo:\n\n```vue preview src=\"./demos/theme/AnimateCssPresets.vue\"\n```\n\n## Related tokens\n\n| Token | Use |\n| --- | --- |\n| `--m-motion-fast/normal/enter/exit` | Transition duration |\n| `--m-motion-distance` / `--m-motion-ease` | Enter/exit travel and easing |\n| `--m-motion-spin*` / `--m-motion-pulse` / `--m-motion-skeleton` | Looping indicators (`0ms` under `reduced`/`none`) |\n| `--m-motion-loading-*` | Loading variant loop durations |\n\nLight/dark theme and density: [Theme](/docs/theme). Accessibility notes: [Accessibility](/docs/accessibility).\n",
+          "markdown": "---\ntitle: Motion\norder: 6\ndescription: Motion intensity preferences, enter/exit presets, and related design tokens.\n---\n\n# Motion\n\nMotion has two orthogonal layers:\n\n1. **Intensity**: `useMotion` → `full` / `reduced` / `none` (writes `data-m-motion`)\n2. **Shape**: named enter/exit presets (Vue `<Transition>`)\n\nDurations, easing, and travel come from `--m-motion-*` tokens; see the full [Design tokens](/docs/design-tokens) catalog.\n\n## Motion preference\n\n```ts\nimport { useMotion } from 'morya-ui'\n\nconst { preference, setMotion } = useMotion()\nsetMotion('full') // 'full' | 'reduced' | 'none'\n```\n\n- `full`: standard transitions and overlay motion  \n- `reduced`: shorter duration, less travel; looping indicators stop  \n- `none`: instant switches  \n\nThe Components page sidebar Motion control uses the same API. The preference is persisted in `localStorage` (`morya-ui-motion`). Component motion follows this setting only and does not read the OS `prefers-reduced-motion` media query.\n\n## Motion presets (enter/exit)\n\nOverlay components pick a named Vue `<Transition>` preset. Resolution order:\n\n1. Component `transition` prop  \n2. `componentDefaults[Component].transition`  \n3. `motion.transitions[role]` (`dialog` / `drawer` / `popup` / `toast` / `tooltip` / `overlay`)  \n4. Component built-in default  \n\nBuilt-in ids: `fade`, `scale-fade`, `slide-fade`, `zoom`, `dialog`, `slide-up` / `slide-down` / `slide-left` / `slide-right`, `drawer`, `popover`, `loading`, `blockui`, `message`, `none`.  \n`transition={false}` or `'none'` disables CSS transitions.\n\n```ts\nimport { createMoryaUI, registerMotionPreset } from 'morya-ui'\n\napp.use(createMoryaUI({\n  motion: { transitions: { popup: 'slide-up', dialog: 'zoom' } },\n  componentDefaults: { Select: { transition: 'fade' } },\n}))\n\n// Custom: provide .m-brand-enter-active CSS, then register\nregisterMotionPreset('brand', { name: 'm-brand' })\n```\n\n```vue\n<MDialog transition=\"slide-up\" />\n<MSelect :transition=\"false\" />\n```\n\n```vue preview src=\"./demos/theme/MotionPresets.vue\"\n```\n\nAfter changing a preset in the dropdowns, reopen Dialog / Drawer / Select or trigger Toast again to replay enter/exit.\n\n## Optional: Animate.css\n\n`morya-ui` does **not** depend on Animate.css. If your app wants keyframe effects such as bounce / zoomIn, install it on the app side and wire it through bridge CSS + `registerMotionPreset` into the existing `transition` API. Keep durations on `--m-motion-enter` / `--m-motion-exit` so they stay linked to `useMotion` intensity.\n\n```bash\npnpm add animate.css\n```\n\n```ts\nimport { registerMotionPreset } from 'morya-ui'\nimport 'animate.css'\n// Bridge CSS: map Animate.css keyframes onto .m-animate-*-enter-active etc.\n// Full example: demos/theme/animate-css-bridge.css or the live demo source below\n\nregisterMotionPreset('animate-bounce', { name: 'm-animate-bounce' })\nregisterMotionPreset('animate-zoom', { name: 'm-animate-zoom' })\nregisterMotionPreset('animate-fade-up', { name: 'm-animate-fade-up' })\n```\n\n```vue\n<MDialog transition=\"animate-bounce\" />\n<MSelect transition=\"animate-fade-up\" />\n```\n\nNotes:\n\n- Vue `<Transition>` expects `.{name}-enter-active` / `leave-active`; map Animate.css `@keyframes` onto those classes.\n- **Dialog / Drawer** put Transition classes on the backdrop: use a same-duration `fadeIn` / `fadeOut` on the mask, and put the expressive animation on nested `.m-dialog-zoom` / `.m-drawer` so the panel is not cut short and the scrim does not bounce.\n- **Select / Toast** and similar overlays transition the panel root, so keyframes can sit directly on `-enter-active`.\n\nThis docs site already depends on Animate.css for the live demo:\n\n```vue preview src=\"./demos/theme/AnimateCssPresets.vue\"\n```\n\n## Related tokens\n\n| Token | Use |\n| --- | --- |\n| `--m-motion-fast/normal/enter/exit` | Transition duration |\n| `--m-motion-distance` / `--m-motion-ease` | Enter/exit travel and easing |\n| `--m-motion-spin*` / `--m-motion-pulse` / `--m-motion-skeleton` | Looping indicators (`0ms` under `reduced`/`none`) |\n| `--m-motion-loading-*` | Loading variant loop durations |\n\nLight/dark theme and density: [Theme](/docs/theme). Accessibility notes: [Accessibility](/docs/accessibility).\n",
           "sections": [
             {
               "title": "",
@@ -27113,7 +27279,7 @@
             {
               "title": "Motion preference",
               "id": "motion-preference",
-              "body": "```ts\nimport { useMotion } from 'morya-ui'\n\nconst { preference, setMotion } = useMotion()\nsetMotion('full') // 'full' | 'reduced' | 'none'\n```\n\n- `full`: standard transitions and overlay motion  \n- `reduced`: shorter duration, less travel; looping indicators stop  \n- `none`: instant switches  \n\nThe Components page sidebar Motion control uses the same API. The preference is persisted in `localStorage` (`morya-ui-motion`).\n\nWhen the OS enables `prefers-reduced-motion`, reduced policies apply by default. Set `respectReducedMotion: false` on `createMoryaUI` / `MConfigProvider` to keep full transitions."
+              "body": "```ts\nimport { useMotion } from 'morya-ui'\n\nconst { preference, setMotion } = useMotion()\nsetMotion('full') // 'full' | 'reduced' | 'none'\n```\n\n- `full`: standard transitions and overlay motion  \n- `reduced`: shorter duration, less travel; looping indicators stop  \n- `none`: instant switches  \n\nThe Components page sidebar Motion control uses the same API. The preference is persisted in `localStorage` (`morya-ui-motion`). Component motion follows this setting only and does not read the OS `prefers-reduced-motion` media query."
             },
             {
               "title": "Motion presets (enter/exit)",
@@ -27511,7 +27677,7 @@
         "zh-CN": {
           "title": "无障碍",
           "description": "使用 Morya UI 组件时的无障碍约定与检查清单。",
-          "markdown": "---\ntitle: 无障碍\norder: 11\ndescription: 使用 Morya UI 组件时的无障碍约定与检查清单。\n---\n\n# 无障碍\n\nMorya UI 以**语义化 HTML 优先、必要时补充 ARIA**为原则。组件尽量自带标签关联、键盘路径与浮层焦点管理；业务侧仍需提供有意义的文案与结构。\n\n## 快速检查清单\n\n| 场景 | 建议 |\n| --- | --- |\n| 图标按钮 | 设置 `aria-label` 或可见文本，勿仅靠图标传达含义 |\n| 表单字段 | 使用 `label`；错误时用 `invalid` + `error-message` |\n| 装饰性图标 | 省略 `label`，组件会使用 `aria-hidden` |\n| 浮层 / 对话框 | 确认 Esc 可关闭；打开后焦点在面板内 |\n| 动效敏感用户 | 使用 `useMotion()` 设为 `reduced` 或 `none` |\n| 仅颜色区分状态 | 同时提供文案、图标或 `error-message` |\n\n## 表单与校验\n\n输入类组件（`Input`、`Textarea`、`Select` 等）共享字段模式：\n\n```vue\n<MInput\n  id=\"email\"\n  v-model=\"email\"\n  label=\"邮箱\"\n  invalid\n  error-message=\"请输入有效邮箱\"\n/>\n```\n\n要点：\n\n- **`label`** 会关联到控件；配合 `FloatLabel` 时也会写入 `for`。\n- **`invalid`** 会设置 `aria-invalid` 与错误样式。\n- **`error-message`** 会通过 `aria-describedby` 关联帮助/错误区域。\n- 必填请同时使用原生 `required`（若组件支持）或业务层校验提示，不要只用颜色表达。\n\n## 图标与按钮\n\n`MIcon` 仅承载**系统图标**。无 `label` 时视为装饰并隐藏；信息性图标请传 `label`：\n\n```vue\n<MIcon name=\"info\" label=\"更多信息\" />\n<MButton icon=\"search\" aria-label=\"搜索\" icon-only />\n```\n\n带文字的按钮优先用默认插槽或 `label`，不必重复 `aria-label`。\n\n## 浮层与焦点\n\n以下组件默认 Teleport 到 `body`，并在打开时锁定滚动、支持 `Escape` 关闭：\n\n- `Dialog`、`Drawer`、`CommandMenu`\n- `Select`、`Popover`、`Tooltip`（按组件实现）\n\n弹出层触发器应设置：\n\n- `aria-expanded` / `aria-controls`（如 `Popover`）\n- 可见标签或 `aria-label`\n\n模态对话框打开后，焦点应落在可交互元素上；关闭后宜将焦点还原到触发器（业务层使用 `Dialog` 时可自行管理）。\n\n## 键盘交互\n\n| 组件 | 常用按键 |\n| --- | --- |\n| `CommandMenu` | `↑`/`↓` 选择，`Enter` 执行，`Esc` 关闭 |\n| `Select` | `Enter`/`Space` 打开，`↑`/`↓` 移动选项，`Esc` 关闭 |\n| `Tabs` | 方向键在 Tab 列表间移动（实现依组件） |\n| `Slider` | 方向键调整值；可通过 `aria-label` 命名 |\n\n具体行为以各组件文档为准；新增组件请在 `docs/` 中说明键盘表。\n\n## 动效与对比度\n\n```ts\nimport { useMotion } from 'morya-ui'\n\nconst { setMotion } = useMotion()\nsetMotion('reduced') // 或 'none'\n```\n\n`reduced` / `none` 会缩短或关闭 `--m-motion-*` 过渡，减轻 vestibular 不适。\n\n颜色应通过 `--m-color-*` 令牌消费，以保证亮/暗主题下对比度一致。自定义主题后请在真实内容上抽查正文与错误态可读性。\n\n## 组件库内已知实践\n\n近期实现/改进包括：\n\n- **FloatLabel**：`label[for]` 关联首个输入控件\n- **Popover**：触发器 `aria-expanded` / `aria-haspopup` / `aria-controls`\n- **Slider**：单 thumb 默认 `aria-label`（可通过 prop 覆盖）\n- **Select / CascadeSelect / TreeSelect / DatePicker**：`combobox` 语义、键盘导航与字段反馈（`invalid` / `error-message` / `help-text`）\n\n## 测试建议\n\n- 使用键盘完成主流程（Tab、Enter、Esc、方向键）。\n- 使用系统屏幕阅读器（NVDA / VoiceOver）抽查表单与对话框。\n- 在 `prefers-reduced-motion: reduce` 或 `useMotion('none')` 下确认界面仍可用。\n\n## 相关\n\n- [动效](/docs/motion)：强度偏好、进出场预设与令牌\\n- [主题](/docs/theme)：亮暗色与密度\n- [全局配置](/docs/config)：语言包与默认尺寸\n",
+          "markdown": "---\ntitle: 无障碍\norder: 11\ndescription: 使用 Morya UI 组件时的无障碍约定与检查清单。\n---\n\n# 无障碍\n\nMorya UI 以**语义化 HTML 优先、必要时补充 ARIA**为原则。组件尽量自带标签关联、键盘路径与浮层焦点管理；业务侧仍需提供有意义的文案与结构。\n\n## 快速检查清单\n\n| 场景 | 建议 |\n| --- | --- |\n| 图标按钮 | 设置 `aria-label` 或可见文本，勿仅靠图标传达含义 |\n| 表单字段 | 使用 `label`；错误时用 `invalid` + `error-message` |\n| 装饰性图标 | 省略 `label`，组件会使用 `aria-hidden` |\n| 浮层 / 对话框 | 确认 Esc 可关闭；打开后焦点在面板内 |\n| 动效敏感用户 | 使用 `useMotion()` 设为 `reduced` 或 `none` |\n| 仅颜色区分状态 | 同时提供文案、图标或 `error-message` |\n\n## 表单与校验\n\n输入类组件（`Input`、`Textarea`、`Select` 等）共享字段模式：\n\n```vue\n<MInput\n  id=\"email\"\n  v-model=\"email\"\n  label=\"邮箱\"\n  invalid\n  error-message=\"请输入有效邮箱\"\n/>\n```\n\n要点：\n\n- **`label`** 会关联到控件；配合 `FloatLabel` 时也会写入 `for`。\n- **`invalid`** 会设置 `aria-invalid` 与错误样式。\n- **`error-message`** 会通过 `aria-describedby` 关联帮助/错误区域。\n- 必填请同时使用原生 `required`（若组件支持）或业务层校验提示，不要只用颜色表达。\n\n## 图标与按钮\n\n`MIcon` 仅承载**系统图标**。无 `label` 时视为装饰并隐藏；信息性图标请传 `label`：\n\n```vue\n<MIcon name=\"info\" label=\"更多信息\" />\n<MButton icon=\"search\" aria-label=\"搜索\" icon-only />\n```\n\n带文字的按钮优先用默认插槽或 `label`，不必重复 `aria-label`。\n\n## 浮层与焦点\n\n以下组件默认 Teleport 到 `body`，并在打开时锁定滚动、支持 `Escape` 关闭：\n\n- `Dialog`、`Drawer`、`CommandMenu`\n- `Select`、`Popover`、`Tooltip`（按组件实现）\n\n弹出层触发器应设置：\n\n- `aria-expanded` / `aria-controls`（如 `Popover`）\n- 可见标签或 `aria-label`\n\n模态对话框打开后，焦点应落在可交互元素上；关闭后宜将焦点还原到触发器（业务层使用 `Dialog` 时可自行管理）。\n\n## 键盘交互\n\n| 组件 | 常用按键 |\n| --- | --- |\n| `CommandMenu` | `↑`/`↓` 选择，`Enter` 执行，`Esc` 关闭 |\n| `Select` | `Enter`/`Space` 打开，`↑`/`↓` 移动选项，`Esc` 关闭 |\n| `Tabs` | 方向键在 Tab 列表间移动（实现依组件） |\n| `Slider` | 方向键调整值；可通过 `aria-label` 命名 |\n\n具体行为以各组件文档为准；新增组件请在 `docs/` 中说明键盘表。\n\n## 动效与对比度\n\n```ts\nimport { useMotion } from 'morya-ui'\n\nconst { setMotion } = useMotion()\nsetMotion('reduced') // 或 'none'\n```\n\n`reduced` / `none` 会缩短或关闭 `--m-motion-*` 过渡，减轻 vestibular 不适。\n\n颜色应通过 `--m-color-*` 令牌消费，以保证亮/暗主题下对比度一致。自定义主题后请在真实内容上抽查正文与错误态可读性。\n\n## 组件库内已知实践\n\n近期实现/改进包括：\n\n- **FloatLabel**：`label[for]` 关联首个输入控件\n- **Popover**：触发器 `aria-expanded` / `aria-haspopup` / `aria-controls`\n- **Slider**：单 thumb 默认 `aria-label`（可通过 prop 覆盖）\n- **Select / CascadeSelect / TreeSelect / DatePicker**：`combobox` 语义、键盘导航与字段反馈（`invalid` / `error-message` / `help-text`）\n\n## 测试建议\n\n- 使用键盘完成主流程（Tab、Enter、Esc、方向键）。\n- 使用系统屏幕阅读器（NVDA / VoiceOver）抽查表单与对话框。\n- 在 `useMotion('reduced')` 或 `useMotion('none')` 下确认界面仍可用。\n\n## 相关\n\n- [动效](/docs/motion)：强度偏好、进出场预设与令牌\\n- [主题](/docs/theme)：亮暗色与密度\n- [全局配置](/docs/config)：语言包与默认尺寸\n",
           "sections": [
             {
               "title": "",
@@ -27556,7 +27722,7 @@
             {
               "title": "测试建议",
               "id": "测试建议",
-              "body": "- 使用键盘完成主流程（Tab、Enter、Esc、方向键）。\n- 使用系统屏幕阅读器（NVDA / VoiceOver）抽查表单与对话框。\n- 在 `prefers-reduced-motion: reduce` 或 `useMotion('none')` 下确认界面仍可用。"
+              "body": "- 使用键盘完成主流程（Tab、Enter、Esc、方向键）。\n- 使用系统屏幕阅读器（NVDA / VoiceOver）抽查表单与对话框。\n- 在 `useMotion('reduced')` 或 `useMotion('none')` 下确认界面仍可用。"
             },
             {
               "title": "相关",
@@ -27568,7 +27734,7 @@
         "en-US": {
           "title": "Accessibility",
           "description": "Accessibility conventions when using Morya UI components.",
-          "markdown": "---\ntitle: Accessibility\norder: 11\ndescription: Accessibility conventions when using Morya UI components.\n---\n\n# Accessibility\n\nMorya UI favors **semantic HTML first, ARIA when necessary**. Components handle labels, keyboard paths, and overlay focus where possible; apps still must supply meaningful copy and structure.\n\n## Quick checklist\n\n| Scenario | Guidance |\n| --- | --- |\n| Icon-only buttons | Set `aria-label` or visible text—do not rely on icon shape alone |\n| Form fields | Use `label`; on failure use `invalid` + `error-message` |\n| Decorative icons | Omit `label`; the icon is `aria-hidden` |\n| Overlays / dialogs | Ensure Escape closes; focus stays manageable while open |\n| Motion sensitivity | Use `useMotion()` with `reduced` or `none` |\n| Status by color only | Add text, icons, or `error-message` |\n\n## Forms and validation\n\nInput-family components (`Input`, `Textarea`, `Select`, …) share the same field pattern:\n\n```vue\n<MInput\n  id=\"email\"\n  v-model=\"email\"\n  label=\"Email\"\n  invalid\n  error-message=\"Enter a valid email address\"\n/>\n```\n\nNotes:\n\n- **`label`** wires to the control; `FloatLabel` also sets `for` on the label element.\n- **`invalid`** sets `aria-invalid` and error styling.\n- **`error-message`** is linked through `aria-describedby`.\n- Mark required fields with native `required` when supported **and** validation copy—not color alone.\n\n## Icons and buttons\n\n`MIcon` covers **system icons** only. Without `label` the icon is decorative (`aria-hidden`); informative icons need `label`:\n\n```vue\n<MIcon name=\"info\" label=\"More information\" />\n<MButton icon=\"search\" aria-label=\"Search\" icon-only />\n```\n\nPrefer default slot / `label` text on buttons; avoid duplicating `aria-label` when visible text exists.\n\n## Overlays and focus\n\nThese default to Teleport on `body`, block scroll while open, and close on Escape where applicable:\n\n- `Dialog`, `Drawer`, `CommandMenu`\n- `Select`, `Popover`, `Tooltip` (per component)\n\nTriggers should expose:\n\n- `aria-expanded` / `aria-controls` (e.g. `Popover`)\n- Visible text or `aria-label`\n\nAfter closing a modal, return focus to the trigger when your UX requires it.\n\n## Keyboard\n\n| Component | Keys |\n| --- | --- |\n| `CommandMenu` | `↑`/`↓` move, `Enter` run, `Esc` close |\n| `Select` | `Enter`/`Space` open, `↑`/`↓` options, `Esc` close |\n| `Tabs` | Arrow keys between tabs (see component doc) |\n| `Slider` | Arrow keys adjust value; override naming with `aria-label` |\n\nDocument keyboard tables in component `docs/` when adding new widgets.\n\n## Motion and contrast\n\n```ts\nimport { useMotion } from 'morya-ui'\n\nconst { setMotion } = useMotion()\nsetMotion('reduced') // or 'none'\n```\n\n`reduced` / `none` shortens or disables `--m-motion-*` transitions.\n\nConsume colors through `--m-color-*` tokens for light/dark parity. After theming, spot-check body text and error states on real content.\n\n## In-library improvements\n\nRecent work includes:\n\n- **FloatLabel**: `label[for]` linked to the first input\n- **Popover**: trigger `aria-expanded` / `aria-haspopup` / `aria-controls`\n- **Slider**: default `aria-label` on a single thumb (overridable)\n- **Select / CascadeSelect / TreeSelect / DatePicker**: combobox semantics, keyboard navigation, and field feedback (`invalid` / `error-message` / `help-text`)\n\n## Testing tips\n\n- Complete primary flows with keyboard only (Tab, Enter, Esc, arrows).\n- Spot-check forms and dialogs with NVDA or VoiceOver.\n- Verify usability under `prefers-reduced-motion: reduce` or `useMotion('none')`.\n\n## See also\n\n- [Motion](/docs/motion): intensity, enter/exit presets, and tokens\\n- [Theme](/docs/theme): light/dark and density\n- [Configuration](/docs/config): locale and defaults\n",
+          "markdown": "---\ntitle: Accessibility\norder: 11\ndescription: Accessibility conventions when using Morya UI components.\n---\n\n# Accessibility\n\nMorya UI favors **semantic HTML first, ARIA when necessary**. Components handle labels, keyboard paths, and overlay focus where possible; apps still must supply meaningful copy and structure.\n\n## Quick checklist\n\n| Scenario | Guidance |\n| --- | --- |\n| Icon-only buttons | Set `aria-label` or visible text—do not rely on icon shape alone |\n| Form fields | Use `label`; on failure use `invalid` + `error-message` |\n| Decorative icons | Omit `label`; the icon is `aria-hidden` |\n| Overlays / dialogs | Ensure Escape closes; focus stays manageable while open |\n| Motion sensitivity | Use `useMotion()` with `reduced` or `none` |\n| Status by color only | Add text, icons, or `error-message` |\n\n## Forms and validation\n\nInput-family components (`Input`, `Textarea`, `Select`, …) share the same field pattern:\n\n```vue\n<MInput\n  id=\"email\"\n  v-model=\"email\"\n  label=\"Email\"\n  invalid\n  error-message=\"Enter a valid email address\"\n/>\n```\n\nNotes:\n\n- **`label`** wires to the control; `FloatLabel` also sets `for` on the label element.\n- **`invalid`** sets `aria-invalid` and error styling.\n- **`error-message`** is linked through `aria-describedby`.\n- Mark required fields with native `required` when supported **and** validation copy—not color alone.\n\n## Icons and buttons\n\n`MIcon` covers **system icons** only. Without `label` the icon is decorative (`aria-hidden`); informative icons need `label`:\n\n```vue\n<MIcon name=\"info\" label=\"More information\" />\n<MButton icon=\"search\" aria-label=\"Search\" icon-only />\n```\n\nPrefer default slot / `label` text on buttons; avoid duplicating `aria-label` when visible text exists.\n\n## Overlays and focus\n\nThese default to Teleport on `body`, block scroll while open, and close on Escape where applicable:\n\n- `Dialog`, `Drawer`, `CommandMenu`\n- `Select`, `Popover`, `Tooltip` (per component)\n\nTriggers should expose:\n\n- `aria-expanded` / `aria-controls` (e.g. `Popover`)\n- Visible text or `aria-label`\n\nAfter closing a modal, return focus to the trigger when your UX requires it.\n\n## Keyboard\n\n| Component | Keys |\n| --- | --- |\n| `CommandMenu` | `↑`/`↓` move, `Enter` run, `Esc` close |\n| `Select` | `Enter`/`Space` open, `↑`/`↓` options, `Esc` close |\n| `Tabs` | Arrow keys between tabs (see component doc) |\n| `Slider` | Arrow keys adjust value; override naming with `aria-label` |\n\nDocument keyboard tables in component `docs/` when adding new widgets.\n\n## Motion and contrast\n\n```ts\nimport { useMotion } from 'morya-ui'\n\nconst { setMotion } = useMotion()\nsetMotion('reduced') // or 'none'\n```\n\n`reduced` / `none` shortens or disables `--m-motion-*` transitions.\n\nConsume colors through `--m-color-*` tokens for light/dark parity. After theming, spot-check body text and error states on real content.\n\n## In-library improvements\n\nRecent work includes:\n\n- **FloatLabel**: `label[for]` linked to the first input\n- **Popover**: trigger `aria-expanded` / `aria-haspopup` / `aria-controls`\n- **Slider**: default `aria-label` on a single thumb (overridable)\n- **Select / CascadeSelect / TreeSelect / DatePicker**: combobox semantics, keyboard navigation, and field feedback (`invalid` / `error-message` / `help-text`)\n\n## Testing tips\n\n- Complete primary flows with keyboard only (Tab, Enter, Esc, arrows).\n- Spot-check forms and dialogs with NVDA or VoiceOver.\n- Verify usability under `useMotion('reduced')` or `useMotion('none')`.\n\n## See also\n\n- [Motion](/docs/motion): intensity, enter/exit presets, and tokens\\n- [Theme](/docs/theme): light/dark and density\n- [Configuration](/docs/config): locale and defaults\n",
           "sections": [
             {
               "title": "",
@@ -27613,7 +27779,7 @@
             {
               "title": "Testing tips",
               "id": "testing-tips",
-              "body": "- Complete primary flows with keyboard only (Tab, Enter, Esc, arrows).\n- Spot-check forms and dialogs with NVDA or VoiceOver.\n- Verify usability under `prefers-reduced-motion: reduce` or `useMotion('none')`."
+              "body": "- Complete primary flows with keyboard only (Tab, Enter, Esc, arrows).\n- Spot-check forms and dialogs with NVDA or VoiceOver.\n- Verify usability under `useMotion('reduced')` or `useMotion('none')`."
             },
             {
               "title": "See also",
@@ -27699,7 +27865,7 @@
         "zh-CN": {
           "title": "Agent Skill",
           "description": "消费方 morya-ui-pages skill：何时触发、与 rules/MCP 分工、页面类型地图。",
-          "markdown": "---\ntitle: Agent Skill\norder: 13\ndescription: 消费方 morya-ui-pages skill：何时触发、与 rules/MCP 分工、页面类型地图。\n---\n\n# Agent Skill\n\n消费方用 AI 生成 **基于 `morya-ui` 的业务页面** 时，应加载 **`morya-ui-pages`** skill。它规定组件契约、页面类型与工作流；**不是**组件库源码里写新组件用的 skill。\n\n安装方式见 [一键接入](/docs/setup)（`npx @morya-ui/setup` 会复制到项目）；AI 侧流程见 [AI 接入](/docs/ai-setup)。本文说明 skill **是什么、何时用、和其它配置怎么分工**。\n\n## 装到哪里\n\n```text\n.agents/skills/morya-ui-pages/\n├── SKILL.md\n└── references/          # 布局、表面、令牌、反馈、检查清单等\n```\n\n支持 Agent Skills 自动发现的客户端（如 Cursor）会从 `.agents/skills` 读取。生成列表 / 表单 / 登录 / 落地等页面前，应优先匹配本 skill。\n\n源文件在仓库 [`design-kit/.agents/skills/morya-ui-pages/`](https://github.com/morya-space/morya-ui/tree/main/design-kit/.agents/skills/morya-ui-pages)，随 `@morya-ui/setup` 的 template 同步。可选 companion（`frontend-design`、`fixing-accessibility`）可用 `npx @morya-ui/setup ai --skills=…` 一并写入，见 [一键接入](/docs/setup)。\n\n## 何时触发\n\n典型话术或主题：\n\n- `morya-ui`、`M*` 组件、`--m-*` 令牌、黄金样例\n- 后台 / 列表 / 表单 / 仪表盘 / 详情 / 设置\n- 登录 / 注册 / 空状态 / 向导 / 落地页 / 官网\n\n**优先于**通用 `frontend-design`、Impeccable、UI-UX-Pro-Max 等：那些只能当审美参考；栈是 morya-ui 时以本 skill 为准。\n\n**不要**用于：纯后端、或在本仓库 `src/components` 里新增组件库组件。\n\n## 与其它配置的分工\n\n| 层 | 角色 |\n| --- | --- |\n| [一键接入](/docs/setup) / `@morya-ui/setup` | 一次性把库 + skill + rules + MCP 装进项目 |\n| [AI 接入](/docs/ai-setup) | 装好后如何配合 Agent 生成页面 |\n| **`morya-ui-pages` skill** | 按需工作流：选表面、读黄金样例、组 `M*`、自检 |\n| `.cursor/rules/` | 编辑器常驻短规则（设计系统、组件用法、布局） |\n| `DESIGN.md` | 项目设计第一信源；与 skill 冲突时以项目 `DESIGN.md` 为准 |\n| [Agent MCP](/docs/mcp) | 运行时查真实 Props / Events / 示例，禁止臆造 API |\n\n两层始终生效：\n\n1. **契约** — 只用 `M*` 与 `--m-*`，API 以 MCP / 文档为准  \n2. **工艺** — 先定表面类型，再做视觉；后台偏克制，落地 / 品牌向可有意表达，但仍上令牌、上组件\n\n## 页面类型（Surface）地图\n\n| 车道 | 典型表面 | 优先参考 |\n| --- | --- | --- |\n| **Ops** | 列表、表单、仪表盘、详情、设置、筛选抽屉 | 黄金样例 + skill `page-layouts` |\n| **Account** | 登录、注册、邀请、重置密码、个人资料 | skill `surfaces` § Account |\n| **Flow** | 引导、空状态、向导、成功页 | skill `surfaces` § Flow |\n| **System** | 404、无权限、维护中 | skill `surfaces` § System |\n| **Express** | 营销落地、定价、功能展示 | skill `surfaces` + `visual-craft` |\n| **Overlay** | 以 Dialog / Drawer / CommandMenu 为主界面 | skill `surfaces` § Overlay |\n\n不确定时：后台默认 Ops → 最近黄金样例；对外营销 → Express。\n\n## Agent 推荐工作流（摘要）\n\n1. 钉死主体、受众、表面、第一屏单一任务  \n2. 优先 MCP：`recommend_page` → **`get_golden_page`（镜像）** → `get_component` / `get_example`  \n3. 无 MCP 时读 skill `references/`（布局、表面、反馈）  \n4. 反馈默认 `message`；`toast` 仅 summary+detail / 异步感。表单常驻错误用字段 `errorMessage` 或 token 样式的 `role=\"alert\"`，不要把 `<MMessage>` 当成内嵌 Alert。表格行数据用 `rows`。交付前默认做一轮 craft（Ops polish / 氛围配方，见 skill `visual-craft`）。  \n5. **必须**跑 MCP `validate_usage`（API 准确）与 `validate_page`（布局/契约建议）；对照 skill 检查清单\n\n细节与硬边界以项目内 `SKILL.md` 为准，本文不重复全文。\n\n## 下一步\n\n- [一键接入](/docs/setup)：安装 skill 与其它配置  \n- [AI 接入](/docs/ai-setup)：用 AI 生成页面时的流程  \n- [Agent MCP](/docs/mcp)：工具与客户端配置  \n- [快速上手](/docs/quick-start)：手写安装组件库  \n- [组件](/components)：浏览 API\n",
+          "markdown": "---\ntitle: Agent Skill\norder: 13\ndescription: 消费方 morya-ui-pages skill：何时触发、与 rules/MCP 分工、页面类型地图。\n---\n\n# Agent Skill\n\n消费方用 AI 生成 **基于 `morya-ui` 的业务页面** 时，应加载 **`morya-ui-pages`** skill。它规定组件契约、页面类型与工作流；**不是**组件库源码里写新组件用的 skill。\n\n安装方式见 [一键接入](/docs/setup)（`npx @morya-ui/setup` 会复制到项目）；AI 侧流程见 [AI 接入](/docs/ai-setup)。本文说明 skill **是什么、何时用、和其它配置怎么分工**。\n\n## 装到哪里\n\n```text\n.agents/skills/morya-ui-pages/\n├── SKILL.md\n└── references/          # 布局、表面、令牌、反馈、检查清单等\n```\n\n支持 Agent Skills 自动发现的客户端（如 Cursor）会从 `.agents/skills` 读取。生成列表 / 表单 / 登录 / 落地等页面前，应优先匹配本 skill。\n\n源文件在仓库 [`design-kit/.agents/skills/morya-ui-pages/`](https://github.com/morya-space/morya-ui/tree/main/design-kit/.agents/skills/morya-ui-pages)，随 `@morya-ui/setup` 的 template 同步。可选 companion（`frontend-design`、`fixing-accessibility`、`impeccable`）由 setup 通过 skills CLI 安装**最新版**，见 [一键接入](/docs/setup)。\n\n## 何时触发\n\n典型话术或主题：\n\n- `morya-ui`、`M*` 组件、`--m-*` 令牌、黄金样例\n- 后台 / 列表 / 表单 / 仪表盘 / 详情 / 设置\n- 登录 / 注册 / 空状态 / 向导 / 落地页 / 官网\n\n**优先于**通用 `frontend-design`、Impeccable、UI-UX-Pro-Max 等：那些只能当审美参考；栈是 morya-ui 时以本 skill 为准。\n\n**不要**用于：纯后端、或在本仓库 `src/components` 里新增组件库组件。\n\n## 与其它配置的分工\n\n| 层 | 角色 |\n| --- | --- |\n| [一键接入](/docs/setup) / `@morya-ui/setup` | 一次性把库 + skill + rules + MCP 装进项目 |\n| [AI 接入](/docs/ai-setup) | 装好后如何配合 Agent 生成页面 |\n| **`morya-ui-pages` skill** | 按需工作流：选表面、读黄金样例、组 `M*`、自检 |\n| `.cursor/rules/` | 编辑器常驻短规则（设计系统、组件用法、布局） |\n| `DESIGN.md` | 项目设计第一信源；与 skill 冲突时以项目 `DESIGN.md` 为准 |\n| [Agent MCP](/docs/mcp) | 运行时查真实 Props / Events / 示例，禁止臆造 API |\n\n两层始终生效：\n\n1. **契约** — 只用 `M*` 与 `--m-*`，API 以 MCP / 文档为准  \n2. **工艺** — 先定表面类型，再做视觉；后台偏克制，落地 / 品牌向可有意表达，但仍上令牌、上组件\n\n## 页面类型（Surface）地图\n\n| 车道 | 典型表面 | 优先参考 |\n| --- | --- | --- |\n| **Ops** | 列表、表单、仪表盘、详情、设置、筛选抽屉 | 黄金样例 + skill `page-layouts` |\n| **Account** | 登录、注册、邀请、重置密码、个人资料 | skill `surfaces` § Account |\n| **Flow** | 引导、空状态、向导、成功页 | skill `surfaces` § Flow |\n| **System** | 404、无权限、维护中 | skill `surfaces` § System |\n| **Express** | 营销落地、定价、功能展示 | skill `surfaces` + `visual-craft` |\n| **Overlay** | 以 Dialog / Drawer / CommandMenu 为主界面 | skill `surfaces` § Overlay |\n\n不确定时：后台默认 Ops → 最近黄金样例；对外营销 → Express。\n\n## Agent 推荐工作流（摘要）\n\n1. 钉死主体、受众、表面、第一屏单一任务  \n2. 优先 MCP：`recommend_page` → **`get_golden_page`（镜像）** → `get_component` / `get_example`  \n3. 无 MCP 时读 skill `references/`（布局、表面、反馈）  \n4. 反馈默认 `message`；`toast` 仅 summary+detail / 异步感。表单常驻错误用字段 `errorMessage` 或 token 样式的 `role=\"alert\"`，不要把 `<MMessage>` 当成内嵌 Alert。表格行数据用 `rows`。选型冲突面用 MCP `recommend_component`（返回 recipe），无 MCP 时读 skill `decision-recipes`。交付前默认做一轮 craft（Ops polish / 氛围配方，见 skill `visual-craft`）。  \n5. **必须**跑 MCP `validate_usage`（API 准确）与 `validate_page`（布局/契约建议）；对照 skill 检查清单\n\n细节与硬边界以项目内 `SKILL.md` 为准，本文不重复全文。\n\n## 下一步\n\n- [一键接入](/docs/setup)：安装 skill 与其它配置  \n- [AI 接入](/docs/ai-setup)：用 AI 生成页面时的流程  \n- [Agent MCP](/docs/mcp)：工具与客户端配置  \n- [快速上手](/docs/quick-start)：手写安装组件库  \n- [组件](/components)：浏览 API\n",
           "sections": [
             {
               "title": "",
@@ -27709,7 +27875,7 @@
             {
               "title": "装到哪里",
               "id": "装到哪里",
-              "body": "```text\n.agents/skills/morya-ui-pages/\n├── SKILL.md\n└── references/          # 布局、表面、令牌、反馈、检查清单等\n```\n\n支持 Agent Skills 自动发现的客户端（如 Cursor）会从 `.agents/skills` 读取。生成列表 / 表单 / 登录 / 落地等页面前，应优先匹配本 skill。\n\n源文件在仓库 [`design-kit/.agents/skills/morya-ui-pages/`](https://github.com/morya-space/morya-ui/tree/main/design-kit/.agents/skills/morya-ui-pages)，随 `@morya-ui/setup` 的 template 同步。可选 companion（`frontend-design`、`fixing-accessibility`）可用 `npx @morya-ui/setup ai --skills=…` 一并写入，见 [一键接入](/docs/setup)。"
+              "body": "```text\n.agents/skills/morya-ui-pages/\n├── SKILL.md\n└── references/          # 布局、表面、令牌、反馈、检查清单等\n```\n\n支持 Agent Skills 自动发现的客户端（如 Cursor）会从 `.agents/skills` 读取。生成列表 / 表单 / 登录 / 落地等页面前，应优先匹配本 skill。\n\n源文件在仓库 [`design-kit/.agents/skills/morya-ui-pages/`](https://github.com/morya-space/morya-ui/tree/main/design-kit/.agents/skills/morya-ui-pages)，随 `@morya-ui/setup` 的 template 同步。可选 companion（`frontend-design`、`fixing-accessibility`、`impeccable`）由 setup 通过 skills CLI 安装**最新版**，见 [一键接入](/docs/setup)。"
             },
             {
               "title": "何时触发",
@@ -27729,7 +27895,7 @@
             {
               "title": "Agent 推荐工作流（摘要）",
               "id": "agent-推荐工作流-摘要",
-              "body": "1. 钉死主体、受众、表面、第一屏单一任务  \n2. 优先 MCP：`recommend_page` → **`get_golden_page`（镜像）** → `get_component` / `get_example`  \n3. 无 MCP 时读 skill `references/`（布局、表面、反馈）  \n4. 反馈默认 `message`；`toast` 仅 summary+detail / 异步感。表单常驻错误用字段 `errorMessage` 或 token 样式的 `role=\"alert\"`，不要把 `<MMessage>` 当成内嵌 Alert。表格行数据用 `rows`。交付前默认做一轮 craft（Ops polish / 氛围配方，见 skill `visual-craft`）。  \n5. **必须**跑 MCP `validate_usage`（API 准确）与 `validate_page`（布局/契约建议）；对照 skill 检查清单\n\n细节与硬边界以项目内 `SKILL.md` 为准，本文不重复全文。"
+              "body": "1. 钉死主体、受众、表面、第一屏单一任务  \n2. 优先 MCP：`recommend_page` → **`get_golden_page`（镜像）** → `get_component` / `get_example`  \n3. 无 MCP 时读 skill `references/`（布局、表面、反馈）  \n4. 反馈默认 `message`；`toast` 仅 summary+detail / 异步感。表单常驻错误用字段 `errorMessage` 或 token 样式的 `role=\"alert\"`，不要把 `<MMessage>` 当成内嵌 Alert。表格行数据用 `rows`。选型冲突面用 MCP `recommend_component`（返回 recipe），无 MCP 时读 skill `decision-recipes`。交付前默认做一轮 craft（Ops polish / 氛围配方，见 skill `visual-craft`）。  \n5. **必须**跑 MCP `validate_usage`（API 准确）与 `validate_page`（布局/契约建议）；对照 skill 检查清单\n\n细节与硬边界以项目内 `SKILL.md` 为准，本文不重复全文。"
             },
             {
               "title": "下一步",
@@ -27741,7 +27907,7 @@
         "en-US": {
           "title": "Agent Skill",
           "description": "Consumer morya-ui-pages skill — when it triggers, vs rules/MCP, and the surface map.",
-          "markdown": "---\ntitle: Agent Skill\norder: 13\ndescription: Consumer morya-ui-pages skill — when it triggers, vs rules/MCP, and the surface map.\n---\n\n# Agent Skill\n\nWhen AI generates **morya-ui consumer pages**, load the **`morya-ui-pages`** skill. It defines the component contract, surface types, and workflow. It is **not** for authoring new components inside the library source.\n\nInstall via [One-shot setup](/docs/setup) (`npx @morya-ui/setup` copies it into the project); AI workflow: [AI setup](/docs/ai-setup). This page explains **what it is, when to use it, and how it relates to other config**.\n\n## Where it lives\n\n```text\n.agents/skills/morya-ui-pages/\n├── SKILL.md\n└── references/          # layouts, surfaces, tokens, feedback, checklist, …\n```\n\nClients that auto-discover Agent Skills (e.g. Cursor) read `.agents/skills`. Prefer this skill before generating list / form / login / landing pages.\n\nSource: [`design-kit/.agents/skills/morya-ui-pages/`](https://github.com/morya-space/morya-ui/tree/main/design-kit/.agents/skills/morya-ui-pages), synced into the `@morya-ui/setup` template. Optional companions (`frontend-design`, `fixing-accessibility`) can be installed with `npx @morya-ui/setup ai --skills=…` — see [One-shot setup](/docs/setup).\n\n## When it triggers\n\nTypical topics:\n\n- `morya-ui`, `M*` components, `--m-*` tokens, golden pages\n- Admin list / form / dashboard / detail / settings\n- Login / register / empty state / wizard / landing / marketing site\n\n**Prefer over** generic `frontend-design`, Impeccable, or UI-UX-Pro-Max when the stack is morya-ui — those may inform taste only.\n\n**Do not** use for backend-only work or for adding components under this repo’s `src/components`.\n\n## How it relates to other config\n\n| Layer | Role |\n| --- | --- |\n| [One-shot setup](/docs/setup) / `@morya-ui/setup` | One-shot install of library + skill + rules + MCP |\n| [AI setup](/docs/ai-setup) | How to use the Agent after install |\n| **`morya-ui-pages` skill** | On-demand workflow: pick surface, golden pages, compose `M*`, review |\n| `.cursor/rules/` | Always-on short editor rules |\n| `DESIGN.md` | Project design source of truth; wins over skill on conflict |\n| [Agent MCP](/docs/mcp) | Runtime lookup of real props / events / examples |\n\nTwo layers always apply:\n\n1. **Contract** — only `M*` and `--m-*`; APIs from MCP / docs  \n2. **Craft** — pick the surface first; Ops stays restrained; Express may take intentional aesthetic risk on-token and on-component\n\n## Surface map\n\n| Lane | Surfaces | Prefer |\n| --- | --- | --- |\n| **Ops** | list, form, dashboard, detail, settings, filter drawer | Golden pages + skill `page-layouts` |\n| **Account** | login, register, invite, reset password, profile | skill `surfaces` § Account |\n| **Flow** | onboarding, empty, wizard, success | skill `surfaces` § Flow |\n| **System** | 404, permission denied, maintenance | skill `surfaces` § System |\n| **Express** | marketing landing, pricing, feature showcase | skill `surfaces` + `visual-craft` |\n| **Overlay** | Dialog / Drawer / CommandMenu as the main UI | skill `surfaces` § Overlay |\n\nUnclear brief → Ops → nearest golden page; public marketing → Express.\n\n## Recommended agent workflow (summary)\n\n1. Pin subject, audience, surface, and the first viewport’s single job  \n2. Prefer MCP: `recommend_page` → **`get_golden_page` (mirror)** → `get_component` / `get_example`  \n3. Without MCP, read skill `references/` (layouts, surfaces, feedback)  \n4. Feedback defaults to `message`; `toast` only for summary+detail / async feel. Persistent form errors use field `errorMessage` or a token-styled `role=\"alert\"` — `<MMessage>` is not an inline alert. Table rows use `rows`. Always run a light craft pass before delivery (Ops polish / atmosphere — see skill `visual-craft`).  \n5. **Always** run MCP `validate_usage` (API accuracy) and `validate_page` (layout/contract advisories); use the skill checklist  \n\nFull rules and hard boundaries live in the project’s `SKILL.md` — this page does not duplicate it.\n\n## Next steps\n\n- [One-shot setup](/docs/setup): install the skill and related config  \n- [AI setup](/docs/ai-setup): AI page-generation workflow  \n- [Agent MCP](/docs/mcp): tools and client config  \n- [Quick start](/docs/quick-start): manual library install  \n- [Components](/components): browse APIs\n",
+          "markdown": "---\ntitle: Agent Skill\norder: 13\ndescription: Consumer morya-ui-pages skill — when it triggers, vs rules/MCP, and the surface map.\n---\n\n# Agent Skill\n\nWhen AI generates **morya-ui consumer pages**, load the **`morya-ui-pages`** skill. It defines the component contract, surface types, and workflow. It is **not** for authoring new components inside the library source.\n\nInstall via [One-shot setup](/docs/setup) (`npx @morya-ui/setup` copies it into the project); AI workflow: [AI setup](/docs/ai-setup). This page explains **what it is, when to use it, and how it relates to other config**.\n\n## Where it lives\n\n```text\n.agents/skills/morya-ui-pages/\n├── SKILL.md\n└── references/          # layouts, surfaces, tokens, feedback, checklist, …\n```\n\nClients that auto-discover Agent Skills (e.g. Cursor) read `.agents/skills`. Prefer this skill before generating list / form / login / landing pages.\n\nSource: [`design-kit/.agents/skills/morya-ui-pages/`](https://github.com/morya-space/morya-ui/tree/main/design-kit/.agents/skills/morya-ui-pages), synced into the `@morya-ui/setup` template. Optional companions (`frontend-design`, `fixing-accessibility`, `impeccable`) are installed at **latest** via the skills CLI when selected — see [One-shot setup](/docs/setup).\n\n## When it triggers\n\nTypical topics:\n\n- `morya-ui`, `M*` components, `--m-*` tokens, golden pages\n- Admin list / form / dashboard / detail / settings\n- Login / register / empty state / wizard / landing / marketing site\n\n**Prefer over** generic `frontend-design`, Impeccable, or UI-UX-Pro-Max when the stack is morya-ui — those may inform taste only.\n\n**Do not** use for backend-only work or for adding components under this repo’s `src/components`.\n\n## How it relates to other config\n\n| Layer | Role |\n| --- | --- |\n| [One-shot setup](/docs/setup) / `@morya-ui/setup` | One-shot install of library + skill + rules + MCP |\n| [AI setup](/docs/ai-setup) | How to use the Agent after install |\n| **`morya-ui-pages` skill** | On-demand workflow: pick surface, golden pages, compose `M*`, review |\n| `.cursor/rules/` | Always-on short editor rules |\n| `DESIGN.md` | Project design source of truth; wins over skill on conflict |\n| [Agent MCP](/docs/mcp) | Runtime lookup of real props / events / examples |\n\nTwo layers always apply:\n\n1. **Contract** — only `M*` and `--m-*`; APIs from MCP / docs  \n2. **Craft** — pick the surface first; Ops stays restrained; Express may take intentional aesthetic risk on-token and on-component\n\n## Surface map\n\n| Lane | Surfaces | Prefer |\n| --- | --- | --- |\n| **Ops** | list, form, dashboard, detail, settings, filter drawer | Golden pages + skill `page-layouts` |\n| **Account** | login, register, invite, reset password, profile | skill `surfaces` § Account |\n| **Flow** | onboarding, empty, wizard, success | skill `surfaces` § Flow |\n| **System** | 404, permission denied, maintenance | skill `surfaces` § System |\n| **Express** | marketing landing, pricing, feature showcase | skill `surfaces` + `visual-craft` |\n| **Overlay** | Dialog / Drawer / CommandMenu as the main UI | skill `surfaces` § Overlay |\n\nUnclear brief → Ops → nearest golden page; public marketing → Express.\n\n## Recommended agent workflow (summary)\n\n1. Pin subject, audience, surface, and the first viewport’s single job  \n2. Prefer MCP: `recommend_page` → **`get_golden_page` (mirror)** → `get_component` / `get_example`  \n3. Without MCP, read skill `references/` (layouts, surfaces, feedback)  \n4. Feedback defaults to `message`; `toast` only for summary+detail / async feel. Persistent form errors use field `errorMessage` or a token-styled `role=\"alert\"` — `<MMessage>` is not an inline alert. Table rows use `rows`. Always run a light craft pass before delivery (Ops polish / atmosphere — see skill `visual-craft`).  \n5. **Always** run MCP `validate_usage` (API accuracy) and `validate_page` (layout/contract advisories); use the skill checklist  \n\nFull rules and hard boundaries live in the project’s `SKILL.md` — this page does not duplicate it.\n\n## Next steps\n\n- [One-shot setup](/docs/setup): install the skill and related config  \n- [AI setup](/docs/ai-setup): AI page-generation workflow  \n- [Agent MCP](/docs/mcp): tools and client config  \n- [Quick start](/docs/quick-start): manual library install  \n- [Components](/components): browse APIs\n",
           "sections": [
             {
               "title": "",
@@ -27751,7 +27917,7 @@
             {
               "title": "Where it lives",
               "id": "where-it-lives",
-              "body": "```text\n.agents/skills/morya-ui-pages/\n├── SKILL.md\n└── references/          # layouts, surfaces, tokens, feedback, checklist, …\n```\n\nClients that auto-discover Agent Skills (e.g. Cursor) read `.agents/skills`. Prefer this skill before generating list / form / login / landing pages.\n\nSource: [`design-kit/.agents/skills/morya-ui-pages/`](https://github.com/morya-space/morya-ui/tree/main/design-kit/.agents/skills/morya-ui-pages), synced into the `@morya-ui/setup` template. Optional companions (`frontend-design`, `fixing-accessibility`) can be installed with `npx @morya-ui/setup ai --skills=…` — see [One-shot setup](/docs/setup)."
+              "body": "```text\n.agents/skills/morya-ui-pages/\n├── SKILL.md\n└── references/          # layouts, surfaces, tokens, feedback, checklist, …\n```\n\nClients that auto-discover Agent Skills (e.g. Cursor) read `.agents/skills`. Prefer this skill before generating list / form / login / landing pages.\n\nSource: [`design-kit/.agents/skills/morya-ui-pages/`](https://github.com/morya-space/morya-ui/tree/main/design-kit/.agents/skills/morya-ui-pages), synced into the `@morya-ui/setup` template. Optional companions (`frontend-design`, `fixing-accessibility`, `impeccable`) are installed at **latest** via the skills CLI when selected — see [One-shot setup](/docs/setup)."
             },
             {
               "title": "When it triggers",