@morya-ui/mcp 0.4.4 → 0.5.0

package/data/catalog.json

@@ -1,12 +1,12 @@
 {
-  "generatedAt": "2026-10-10T16:01:00.709Z",
+  "generatedAt": "2026-10-13T08:55:20.652Z",
   "library": {
     "name": "morya-ui",
-    "version": "0.4.4"
+    "version": "0.5.0"
   },
   "mcp": {
     "name": "@morya-ui/mcp",
-    "version": "0.4.4"
+    "version": "0.5.0"
   },
   "components": [
     {
@@ -4414,6 +4414,419 @@
         }
       }
     },
+    {
+      "id": "ColorPicker",
+      "name": "ColorPicker",
+      "exportName": "MColorPicker",
+      "category": "02 / FORM",
+      "description": "颜色选择器，支持面板取色、透明度与预设色板。",
+      "descriptionEn": "Color picker with panel, alpha, and preset swatches.",
+      "import": "import { MColorPicker } from 'morya-ui'",
+      "props": [
+        {
+          "name": "modelValue",
+          "type": "string",
+          "default": "'#1677ff'",
+          "description": "当前颜色值（hex）或 CSS 渐变字符串。"
+        },
+        {
+          "name": "gradient",
+          "type": "boolean",
+          "default": "false",
+          "description": "启用渐变色模式。"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "default": "false",
+          "description": "禁用。"
+        },
+        {
+          "name": "disabledAlpha",
+          "type": "boolean",
+          "default": "false",
+          "description": "禁用透明度调节。"
+        },
+        {
+          "name": "allowClear",
+          "type": "boolean",
+          "default": "false",
+          "description": "显示清空按钮。"
+        },
+        {
+          "name": "format",
+          "type": "'hex' | 'rgb' | 'hsb'",
+          "default": "'hex'",
+          "description": "显示格式。"
+        },
+        {
+          "name": "presets",
+          "type": "ColorPickerPreset[]",
+          "default": "—",
+          "description": "预设色板。"
+        },
+        {
+          "name": "showText",
+          "type": "boolean",
+          "default": "false",
+          "description": "在触发器中显示颜色文本。"
+        },
+        {
+          "name": "size",
+          "type": "MSizeInput",
+          "default": "—",
+          "description": "尺寸。"
+        },
+        {
+          "name": "placement",
+          "type": "ColorPickerPlacement",
+          "default": "'bottom-start'",
+          "description": "弹层位置。"
+        },
+        {
+          "name": "teleport",
+          "type": "boolean",
+          "default": "true",
+          "description": "是否 teleport 到 body。"
+        },
+        {
+          "name": "appendTo",
+          "type": "MAppendTo",
+          "default": "'body'",
+          "description": "挂载目标。"
+        },
+        {
+          "name": "transition",
+          "type": "MotionPresetId | false",
+          "default": "—",
+          "description": "过渡动画。"
+        },
+        {
+          "name": "pt",
+          "type": "FieldPassThrough",
+          "default": "—",
+          "description": "DOM 透传。"
+        },
+        {
+          "name": "label",
+          "type": "string",
+          "description": "分组标签。"
+        },
+        {
+          "name": "colors",
+          "type": "string[]",
+          "description": "颜色数组。"
+        },
+        {
+          "name": "defaultOpen",
+          "type": "boolean",
+          "description": "默认展开。"
+        }
+      ],
+      "events": [
+        {
+          "name": "update:modelValue",
+          "payload": "string",
+          "description": "颜色变化。"
+        },
+        {
+          "name": "change",
+          "payload": "string",
+          "description": "颜色变化（同 `update:modelValue`）。"
+        },
+        {
+          "name": "clear",
+          "payload": "—",
+          "description": "点击清空。"
+        },
+        {
+          "name": "show",
+          "payload": "—",
+          "description": "面板打开。"
+        },
+        {
+          "name": "hide",
+          "payload": "—",
+          "description": "面板关闭。"
+        }
+      ],
+      "slots": [
+        {
+          "name": "—",
+          "description": "暂无自定义插槽。"
+        }
+      ],
+      "methods": [
+        {
+          "name": "open",
+          "description": "打开颜色选择面板。"
+        },
+        {
+          "name": "close",
+          "description": "关闭颜色选择面板。"
+        },
+        {
+          "name": "toggle",
+          "description": "切换颜色选择面板的显示状态。"
+        }
+      ],
+      "examples": [
+        {
+          "id": "引入-1",
+          "section": "引入",
+          "sectionId": "引入",
+          "lang": "ts",
+          "preview": false,
+          "code": "import { MColorPicker } from \"morya-ui\";",
+          "locale": "zh-CN"
+        },
+        {
+          "id": "基础用法-1",
+          "section": "基础用法",
+          "sectionId": "基础用法",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MColorPicker } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst color = ref('#1677ff')\n</script>\n\n<template>\n  <MColorPicker v-model=\"color\" />\n</template>",
+          "locale": "zh-CN"
+        },
+        {
+          "id": "预设色板-1",
+          "section": "预设色板",
+          "sectionId": "预设色板",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MColorPicker } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst color = ref('#1677ff')\n</script>\n\n<template>\n  <MColorPicker\n    v-model=\"color\"\n    :presets=\"[\n      { label: 'Recommended', colors: ['#1677ff', '#52c41a', '#faad14', '#f5222d', '#722ed1'] },\n    ]\"\n  />\n</template>",
+          "locale": "zh-CN"
+        },
+        {
+          "id": "显示文本与清空-1",
+          "section": "显示文本与清空",
+          "sectionId": "显示文本与清空",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MColorPicker } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst color = ref('#1677ff')\n</script>\n\n<template>\n  <MColorPicker v-model=\"color\" show-text allow-clear />\n</template>",
+          "locale": "zh-CN"
+        },
+        {
+          "id": "渐变色-1",
+          "section": "渐变色",
+          "sectionId": "渐变色",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MColorPicker } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst color = ref('#1677ff')\n</script>\n\n<template>\n  <MColorPicker v-model=\"color\" gradient />\n</template>",
+          "locale": "zh-CN"
+        },
+        {
+          "id": "渐变值绑定-1",
+          "section": "渐变值绑定",
+          "sectionId": "渐变值绑定",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MColorPicker } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst color = ref('linear-gradient(90deg, #1677ff 0%, #ff4d4f 100%)')\n</script>\n\n<template>\n  <MColorPicker v-model=\"color\" gradient show-text />\n</template>",
+          "locale": "zh-CN"
+        },
+        {
+          "id": "import-1",
+          "section": "Import",
+          "sectionId": "import",
+          "lang": "ts",
+          "preview": false,
+          "code": "import { MColorPicker } from \"morya-ui\";",
+          "locale": "en-US"
+        },
+        {
+          "id": "basic-1",
+          "section": "Basic",
+          "sectionId": "basic",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MColorPicker } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst color = ref('#1677ff')\n</script>\n\n<template>\n  <MColorPicker v-model=\"color\" />\n</template>",
+          "locale": "en-US"
+        },
+        {
+          "id": "presets-1",
+          "section": "Presets",
+          "sectionId": "presets",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MColorPicker } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst color = ref('#1677ff')\n</script>\n\n<template>\n  <MColorPicker\n    v-model=\"color\"\n    :presets=\"[\n      { label: 'Recommended', colors: ['#1677ff', '#52c41a', '#faad14', '#f5222d', '#722ed1'] },\n    ]\"\n  />\n</template>",
+          "locale": "en-US"
+        },
+        {
+          "id": "show-text-and-clear-1",
+          "section": "Show text and clear",
+          "sectionId": "show-text-and-clear",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MColorPicker } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst color = ref('#1677ff')\n</script>\n\n<template>\n  <MColorPicker v-model=\"color\" show-text allow-clear />\n</template>",
+          "locale": "en-US"
+        },
+        {
+          "id": "gradient-1",
+          "section": "Gradient",
+          "sectionId": "gradient",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MColorPicker } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst color = ref('#1677ff')\n</script>\n\n<template>\n  <MColorPicker v-model=\"color\" gradient />\n</template>",
+          "locale": "en-US"
+        },
+        {
+          "id": "gradient-value-binding-1",
+          "section": "Gradient Value Binding",
+          "sectionId": "gradient-value-binding",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MColorPicker } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst color = ref('linear-gradient(90deg, #1677ff 0%, #ff4d4f 100%)')\n</script>\n\n<template>\n  <MColorPicker v-model=\"color\" gradient show-text />\n</template>",
+          "locale": "en-US"
+        }
+      ],
+      "locales": {
+        "zh-CN": {
+          "title": "ColorPicker",
+          "description": "颜色选择器，支持面板取色、透明度与预设色板。",
+          "sections": [
+            {
+              "id": "overview",
+              "title": "",
+              "body": "# ColorPicker\n\n颜色选择器，支持 HSB 面板取色、透明度调节、预设色板与多种格式显示。"
+            },
+            {
+              "id": "何时使用",
+              "title": "何时使用",
+              "body": "- 需要完整的颜色选择体验，而非仅输入 hex。\n- 需要调节透明度（alpha）时。\n- 需要提供预设色板供用户快速选择时。"
+            },
+            {
+              "id": "引入",
+              "title": "引入",
+              "body": "```ts\nimport { MColorPicker } from \"morya-ui\";\n```"
+            },
+            {
+              "id": "基础用法",
+              "title": "基础用法",
+              "body": "```vue preview src=\"./demos/Basic.vue\"\n```"
+            },
+            {
+              "id": "预设色板",
+              "title": "预设色板",
+              "body": "```vue preview src=\"./demos/Presets.vue\"\n```"
+            },
+            {
+              "id": "显示文本与清空",
+              "title": "显示文本与清空",
+              "body": "```vue preview src=\"./demos/ShowText.vue\"\n```"
+            },
+            {
+              "id": "渐变色",
+              "title": "渐变色",
+              "body": "启用 `gradient` 后支持线性/径向渐变编辑，可添加/删除/拖拽色标。\n\n```vue preview src=\"./demos/Gradient.vue\"\n```"
+            },
+            {
+              "id": "渐变值绑定",
+              "title": "渐变值绑定",
+              "body": "```vue preview src=\"./demos/GradientValue.vue\"\n```"
+            },
+            {
+              "id": "props",
+              "title": "Props",
+              "body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `string` | `'#1677ff'` | 当前颜色值（hex）或 CSS 渐变字符串。 |\n| `gradient` | `boolean` | `false` | 启用渐变色模式。 |\n| `disabled` | `boolean` | `false` | 禁用。 |\n| `disabledAlpha` | `boolean` | `false` | 禁用透明度调节。 |\n| `allowClear` | `boolean` | `false` | 显示清空按钮。 |\n| `format` | `'hex' \\| 'rgb' \\| 'hsb'` | `'hex'` | 显示格式。 |\n| `presets` | `ColorPickerPreset[]` | — | 预设色板。 |\n| `showText` | `boolean` | `false` | 在触发器中显示颜色文本。 |\n| `size` | `MSizeInput` | — | 尺寸。 |\n| `placement` | `ColorPickerPlacement` | `'bottom-start'` | 弹层位置。 |\n| `teleport` | `boolean` | `true` | 是否 teleport 到 body。 |\n| `appendTo` | `MAppendTo` | `'body'` | 挂载目标。 |\n| `transition` | `MotionPresetId \\| false` | — | 过渡动画。 |\n| `pt` | `FieldPassThrough` | — | DOM 透传。 |"
+            },
+            {
+              "id": "events",
+              "title": "Events",
+              "body": "| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `update:modelValue` | `string` | 颜色变化。 |\n| `change` | `string` | 颜色变化（同 `update:modelValue`）。 |\n| `clear` | — | 点击清空。 |\n| `show` | — | 面板打开。 |\n| `hide` | — | 面板关闭。 |"
+            },
+            {
+              "id": "colorpickerpreset",
+              "title": "ColorPickerPreset",
+              "body": "| 参数 | 类型 | 说明 |\n| --- | --- | --- |\n| `label` | `string` | 分组标签。 |\n| `colors` | `string[]` | 颜色数组。 |\n| `defaultOpen` | `boolean` | 默认展开。 |"
+            },
+            {
+              "id": "slots",
+              "title": "Slots",
+              "body": "| 插槽名 | 说明 |\n| --- | --- |\n| — | 暂无自定义插槽。 |"
+            },
+            {
+              "id": "methods",
+              "title": "Methods",
+              "body": "| 方法名 | 说明 |\n| --- | --- |\n| `open` | 打开颜色选择面板。 |\n| `close` | 关闭颜色选择面板。 |\n| `toggle` | 切换颜色选择面板的显示状态。 |"
+            }
+          ],
+          "markdown": "---\ntitle: ColorPicker\ncategory: 02 / FORM\ndescription: 颜色选择器，支持面板取色、透明度与预设色板。\n---\n\n# ColorPicker\n\n颜色选择器，支持 HSB 面板取色、透明度调节、预设色板与多种格式显示。\n\n## 何时使用\n\n- 需要完整的颜色选择体验，而非仅输入 hex。\n- 需要调节透明度（alpha）时。\n- 需要提供预设色板供用户快速选择时。\n\n## 引入\n\n```ts\nimport { MColorPicker } from \"morya-ui\";\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## 预设色板\n\n```vue preview src=\"./demos/Presets.vue\"\n```\n\n## 显示文本与清空\n\n```vue preview src=\"./demos/ShowText.vue\"\n```\n\n## 渐变色\n\n启用 `gradient` 后支持线性/径向渐变编辑，可添加/删除/拖拽色标。\n\n```vue preview src=\"./demos/Gradient.vue\"\n```\n\n## 渐变值绑定\n\n```vue preview src=\"./demos/GradientValue.vue\"\n```\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `string` | `'#1677ff'` | 当前颜色值（hex）或 CSS 渐变字符串。 |\n| `gradient` | `boolean` | `false` | 启用渐变色模式。 |\n| `disabled` | `boolean` | `false` | 禁用。 |\n| `disabledAlpha` | `boolean` | `false` | 禁用透明度调节。 |\n| `allowClear` | `boolean` | `false` | 显示清空按钮。 |\n| `format` | `'hex' \\| 'rgb' \\| 'hsb'` | `'hex'` | 显示格式。 |\n| `presets` | `ColorPickerPreset[]` | — | 预设色板。 |\n| `showText` | `boolean` | `false` | 在触发器中显示颜色文本。 |\n| `size` | `MSizeInput` | — | 尺寸。 |\n| `placement` | `ColorPickerPlacement` | `'bottom-start'` | 弹层位置。 |\n| `teleport` | `boolean` | `true` | 是否 teleport 到 body。 |\n| `appendTo` | `MAppendTo` | `'body'` | 挂载目标。 |\n| `transition` | `MotionPresetId \\| false` | — | 过渡动画。 |\n| `pt` | `FieldPassThrough` | — | DOM 透传。 |\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `update:modelValue` | `string` | 颜色变化。 |\n| `change` | `string` | 颜色变化（同 `update:modelValue`）。 |\n| `clear` | — | 点击清空。 |\n| `show` | — | 面板打开。 |\n| `hide` | — | 面板关闭。 |\n\n## ColorPickerPreset\n\n| 参数 | 类型 | 说明 |\n| --- | --- | --- |\n| `label` | `string` | 分组标签。 |\n| `colors` | `string[]` | 颜色数组。 |\n| `defaultOpen` | `boolean` | 默认展开。 |\n\n## Slots\n\n| 插槽名 | 说明 |\n| --- | --- |\n| — | 暂无自定义插槽。 |\n\n## Methods\n\n| 方法名 | 说明 |\n| --- | --- |\n| `open` | 打开颜色选择面板。 |\n| `close` | 关闭颜色选择面板。 |\n| `toggle` | 切换颜色选择面板的显示状态。 |\n"
+        },
+        "en-US": {
+          "title": "ColorPicker",
+          "description": "Color picker with panel, alpha, and preset swatches.",
+          "sections": [
+            {
+              "id": "overview",
+              "title": "",
+              "body": "# ColorPicker\n\nColor picker with HSB panel, alpha slider, preset swatches, and multiple display formats."
+            },
+            {
+              "id": "when-to-use",
+              "title": "When to use",
+              "body": "- When you need a full color picking experience, not just hex input.\n- When you need alpha channel support.\n- When you want to provide preset color palettes."
+            },
+            {
+              "id": "import",
+              "title": "Import",
+              "body": "```ts\nimport { MColorPicker } from \"morya-ui\";\n```"
+            },
+            {
+              "id": "basic",
+              "title": "Basic",
+              "body": "```vue preview src=\"./demos/Basic.vue\"\n```"
+            },
+            {
+              "id": "presets",
+              "title": "Presets",
+              "body": "```vue preview src=\"./demos/Presets.vue\"\n```"
+            },
+            {
+              "id": "show-text-and-clear",
+              "title": "Show text and clear",
+              "body": "```vue preview src=\"./demos/ShowText.vue\"\n```"
+            },
+            {
+              "id": "gradient",
+              "title": "Gradient",
+              "body": "Enable `gradient` for linear/radial gradient editing with draggable color stops.\n\n```vue preview src=\"./demos/Gradient.vue\"\n```"
+            },
+            {
+              "id": "gradient-value-binding",
+              "title": "Gradient Value Binding",
+              "body": "```vue preview src=\"./demos/GradientValue.vue\"\n```"
+            },
+            {
+              "id": "props",
+              "title": "Props",
+              "body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `string` | `'#1677ff'` | Current color value (hex) or CSS gradient string. |\n| `gradient` | `boolean` | `false` | Enable gradient mode. |\n| `disabled` | `boolean` | `false` | Disabled. |\n| `disabledAlpha` | `boolean` | `false` | Disable alpha channel. |\n| `allowClear` | `boolean` | `false` | Show clear button. |\n| `format` | `'hex' \\| 'rgb' \\| 'hsb'` | `'hex'` | Display format. |\n| `presets` | `ColorPickerPreset[]` | — | Preset color palettes. |\n| `showText` | `boolean` | `false` | Show color text in trigger. |\n| `size` | `MSizeInput` | — | Size. |\n| `placement` | `ColorPickerPlacement` | `'bottom-start'` | Popup placement. |\n| `teleport` | `boolean` | `true` | Teleport to body. |\n| `appendTo` | `MAppendTo` | `'body'` | Mount target. |\n| `transition` | `MotionPresetId \\| false` | — | Transition. |\n| `pt` | `FieldPassThrough` | — | DOM pass-through. |"
+            },
+            {
+              "id": "events",
+              "title": "Events",
+              "body": "| Event | Payload | Description |\n| --- | --- | --- |\n| `update:modelValue` | `string` | Color changed. |\n| `change` | `string` | Color changed. |\n| `clear` | — | Clear clicked. |\n| `show` | — | Panel opened. |\n| `hide` | — | Panel closed. |"
+            },
+            {
+              "id": "colorpickerpreset",
+              "title": "ColorPickerPreset",
+              "body": "| Prop | Type | Description |\n| --- | --- | --- |\n| `label` | `string` | Group label. |\n| `colors` | `string[]` | Color array. |\n| `defaultOpen` | `boolean` | Default expanded. |"
+            },
+            {
+              "id": "slots",
+              "title": "Slots",
+              "body": "| Name | Description |\n| --- | --- |\n| — | No custom slots yet. |"
+            },
+            {
+              "id": "methods",
+              "title": "Methods",
+              "body": "| Method | Description |\n| --- | --- |\n| `open` | Open the color picker panel. |\n| `close` | Close the color picker panel. |\n| `toggle` | Toggle the color picker panel visibility. |"
+            }
+          ],
+          "markdown": "---\ntitle: ColorPicker\ncategory: 02 / FORM\ndescription: Color picker with panel, alpha, and preset swatches.\n---\n\n# ColorPicker\n\nColor picker with HSB panel, alpha slider, preset swatches, and multiple display formats.\n\n## When to use\n\n- When you need a full color picking experience, not just hex input.\n- When you need alpha channel support.\n- When you want to provide preset color palettes.\n\n## Import\n\n```ts\nimport { MColorPicker } from \"morya-ui\";\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Presets\n\n```vue preview src=\"./demos/Presets.vue\"\n```\n\n## Show text and clear\n\n```vue preview src=\"./demos/ShowText.vue\"\n```\n\n## Gradient\n\nEnable `gradient` for linear/radial gradient editing with draggable color stops.\n\n```vue preview src=\"./demos/Gradient.vue\"\n```\n\n## Gradient Value Binding\n\n```vue preview src=\"./demos/GradientValue.vue\"\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `string` | `'#1677ff'` | Current color value (hex) or CSS gradient string. |\n| `gradient` | `boolean` | `false` | Enable gradient mode. |\n| `disabled` | `boolean` | `false` | Disabled. |\n| `disabledAlpha` | `boolean` | `false` | Disable alpha channel. |\n| `allowClear` | `boolean` | `false` | Show clear button. |\n| `format` | `'hex' \\| 'rgb' \\| 'hsb'` | `'hex'` | Display format. |\n| `presets` | `ColorPickerPreset[]` | — | Preset color palettes. |\n| `showText` | `boolean` | `false` | Show color text in trigger. |\n| `size` | `MSizeInput` | — | Size. |\n| `placement` | `ColorPickerPlacement` | `'bottom-start'` | Popup placement. |\n| `teleport` | `boolean` | `true` | Teleport to body. |\n| `appendTo` | `MAppendTo` | `'body'` | Mount target. |\n| `transition` | `MotionPresetId \\| false` | — | Transition. |\n| `pt` | `FieldPassThrough` | — | DOM pass-through. |\n\n## Events\n\n| Event | Payload | Description |\n| --- | --- | --- |\n| `update:modelValue` | `string` | Color changed. |\n| `change` | `string` | Color changed. |\n| `clear` | — | Clear clicked. |\n| `show` | — | Panel opened. |\n| `hide` | — | Panel closed. |\n\n## ColorPickerPreset\n\n| Prop | Type | Description |\n| --- | --- | --- |\n| `label` | `string` | Group label. |\n| `colors` | `string[]` | Color array. |\n| `defaultOpen` | `boolean` | Default expanded. |\n\n## Slots\n\n| Name | Description |\n| --- | --- |\n| — | No custom slots yet. |\n\n## Methods\n\n| Method | Description |\n| --- | --- |\n| `open` | Open the color picker panel. |\n| `close` | Close the color picker panel. |\n| `toggle` | Toggle the color picker panel visibility. |\n"
+        }
+      }
+    },
     {
       "id": "CommandMenu",
       "name": "CommandMenu",
@@ -6106,7 +6519,31 @@
           "name": "shortcuts",
           "type": "DatePickerShortcut[]",
           "default": "[]",
-          "description": "面板快捷选项。"
+          "description": "面板快捷选项；与当前值匹配时高亮。"
+        },
+        {
+          "name": "status",
+          "type": "'default' | 'warning' | 'error'",
+          "default": "'default'",
+          "description": "视觉警示；`invalid` / `errorMessage` 自动视为 `error`。"
+        },
+        {
+          "name": "needConfirm",
+          "type": "boolean",
+          "default": "false",
+          "description": "选择后仅写入 draft，按「确认」提交、「取消」回滚。"
+        },
+        {
+          "name": "multiple",
+          "type": "boolean",
+          "default": "false",
+          "description": "多选日期（仅 `type='date'`）；`modelValue` 为 `string[]`。"
+        },
+        {
+          "name": "mask",
+          "type": "boolean",
+          "default": "false",
+          "description": "输入框可编辑，按 `format` 自动补分隔符；Enter 提交，Esc/失焦回滚。"
         },
         {
           "name": "fluid",
@@ -6206,6 +6643,14 @@
         {
           "name": "trigger",
           "description": "自定义触发器 `{ value, open }`。"
+        },
+        {
+          "name": "footer",
+          "description": "面板底部自定义操作区，作用域 `{ close }`。`need-confirm` 时若未提供则显示默认「取消/确认」。"
+        },
+        {
+          "name": "cell",
+          "description": "自定义日期单元格，作用域 `{ date, inMonth, selected, inRange, rangeStart, rangeEnd, isToday, disabled }`。"
         }
       ],
       "methods": [],
@@ -6309,6 +6754,123 @@
           "code": "<script setup lang=\"ts\">\nimport { MDatePicker } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst value = ref<string | null>(null)\nconst shortcuts = [\n  { label: '今天', value: () => new Date() },\n  { label: '六月一日', value: '2024-06-01' },\n]\n</script>\n\n<template>\n  <MDatePicker v-model=\"value\" label=\"快捷选项\" :shortcuts=\"shortcuts\" />\n</template>",
           "locale": "zh-CN"
         },
+        {
+          "id": "范围快捷键-1",
+          "section": "范围快捷键",
+          "sectionId": "范围快捷键",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MDatePicker } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst recent = ref<[string, string] | null>(null)\nconst month = ref<[string, string] | null>(null)\n\nfunction iso(date: Date) {\n  const y = date.getFullYear()\n  const m = String(date.getMonth() + 1).padStart(2, '0')\n  const d = String(date.getDate()).padStart(2, '0')\n  return `${y}-${m}-${d}`\n}\n\nfunction daysAgo(n: number) {\n  const d = new Date()\n  d.setDate(d.getDate() - n)\n  return d\n}\n\nconst recentShortcuts = [\n  { label: '最近 7 天', value: () => [iso(daysAgo(6)), iso(new Date())] as [string, string] },\n  { label: '最近 30 天', value: () => [iso(daysAgo(29)), iso(new Date())] as [string, string] },\n  { label: '最近 90 天', value: () => [iso(daysAgo(89)), iso(new Date())] as [string, string] },\n]\n\nconst monthShortcuts = [\n  {\n    label: '本月',\n    value: () => {\n      const now = new Date()\n      const start = new Date(now.getFullYear(), now.getMonth(), 1)\n      return [iso(start), iso(now)] as [string, string]\n    },\n  },\n  {\n    label: '上月',\n    value: () => {\n      const now = new Date()\n      const start = new Date(now.getFullYear(), now.getMonth() - 1, 1)\n      const end = new Date(now.getFullYear(), now.getMonth(), 0)\n      return [iso(start), iso(end)] as [string, string]\n    },\n  },\n  {\n    label: '今年',\n    value: () => {\n      const now = new Date()\n      return [`${now.getFullYear()}-01-01`, iso(now)] as [string, string]\n    },\n  },\n]\n</script>\n\n<template>\n  <div style=\"display: grid; gap: 12px; max-width: 32rem\">\n    <MDatePicker\n      v-model=\"recent\"\n      type=\"daterange\"\n      label=\"最近 N 天\"\n      :shortcuts=\"recentShortcuts\"\n      help-text=\"匹配当前值的快捷键会高亮\"\n    />\n    <MDatePicker\n      v-model=\"month\"\n      type=\"daterange\"\n      label=\"按月 / 按年\"\n      :shortcuts=\"monthShortcuts\"\n    />\n  </div>\n</template>",
+          "locale": "zh-CN"
+        },
+        {
+          "id": "自定义格式-1",
+          "section": "自定义格式",
+          "sectionId": "自定义格式",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MDatePicker } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst isoDate = ref<string | null>('2024-06-15')\nconst slashDate = ref<string | null>('2024-06-15')\nconst chineseDate = ref<string | null>('2024-06-15')\nconst time12 = ref<string | null>('2024-06-15 14:30')\n</script>\n\n<template>\n  <div style=\"display: grid; gap: 12px; max-width: 32rem\">\n    <MDatePicker v-model=\"isoDate\" label=\"默认 ISO（YYYY-MM-DD）\" />\n    <MDatePicker v-model=\"slashDate\" label=\"斜杠格式（YYYY/MM/DD）\" format=\"YYYY/MM/DD\" />\n    <MDatePicker v-model=\"chineseDate\" label=\"中文格式（YYYY年MM月DD日）\" format=\"YYYY年MM月DD日\" />\n    <MDatePicker\n      v-model=\"time12\"\n      type=\"datetime\"\n      label=\"日期时间带斜杠（YYYY/MM/DD HH:mm）\"\n      format=\"YYYY/MM/DD\"\n    />\n  </div>\n</template>",
+          "locale": "zh-CN"
+        },
+        {
+          "id": "日期时间-1",
+          "section": "日期时间",
+          "sectionId": "日期时间",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MDatePicker } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst datetime = ref<string | null>('2024-06-15 14:30')\nconst datetimeSec = ref<string | null>('2024-06-15 14:30:45')\nconst range = ref<[string, string] | null>(null)\n</script>\n\n<template>\n  <div style=\"display: grid; gap: 12px; max-width: 32rem\">\n    <MDatePicker\n      v-model=\"datetime\"\n      type=\"datetime\"\n      label=\"日期时间（分钟）\"\n      help-text=\"点击日期后再选时间，配合 need-confirm 体验更佳\"\n    />\n    <MDatePicker\n      v-model=\"datetimeSec\"\n      type=\"datetime\"\n      label=\"日期时间（含秒）\"\n      show-seconds\n      need-confirm\n    />\n    <MDatePicker\n      v-model=\"range\"\n      type=\"datetimerange\"\n      label=\"日期时间范围\"\n      need-confirm\n      help-text=\"两次点击选定日期，再用时间列调整起止时刻\"\n    />\n  </div>\n</template>",
+          "locale": "zh-CN"
+        },
+        {
+          "id": "自定义触发器-1",
+          "section": "自定义触发器",
+          "sectionId": "自定义触发器",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MButton, MDatePicker, MIcon } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst date1 = ref<string | null>('2024-06-15')\nconst date2 = ref<string | null>(null)\n</script>\n\n<template>\n  <div style=\"display: grid; gap: 16px; max-width: 32rem\">\n    <MDatePicker v-model=\"date1\" label=\"按钮触发器\">\n      <template #trigger=\"{ value }\">\n        <MButton type=\"default\" size=\"small\">\n          <MIcon name=\"calendar\" size=\"sm\" style=\"margin-right: 4px\" />\n          {{ value || '选择日期' }}\n        </MButton>\n      </template>\n    </MDatePicker>\n\n    <MDatePicker v-model=\"date2\" label=\"纯图标触发器\">\n      <template #trigger=\"{ value }\">\n        <button\n          type=\"button\"\n          style=\"display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--m-color-border); border-radius: var(--m-radius-control); background: var(--m-color-surface); cursor: pointer\"\n        >\n          <MIcon name=\"calendar\" size=\"sm\" />\n          <span v-if=\"value\">{{ value }}</span>\n          <span v-else style=\"color: var(--m-color-text-muted)\">未选择</span>\n        </button>\n      </template>\n    </MDatePicker>\n  </div>\n</template>",
+          "locale": "zh-CN"
+        },
+        {
+          "id": "禁用区间-1",
+          "section": "禁用区间",
+          "sectionId": "禁用区间",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MDatePicker } from 'morya-ui'\nimport { computed, ref } from 'vue'\n\nconst weekdayOnly = ref<string | null>(null)\nconst futureOnly = ref<string | null>(null)\nconst next30 = ref<string | null>(null)\n\nfunction iso(date: Date) {\n  const y = date.getFullYear()\n  const m = String(date.getMonth() + 1).padStart(2, '0')\n  const d = String(date.getDate()).padStart(2, '0')\n  return `${y}-${m}-${d}`\n}\n\nconst today = computed(() => iso(new Date()))\nconst in30Days = computed(() => {\n  const d = new Date()\n  d.setDate(d.getDate() + 30)\n  return iso(d)\n})\n</script>\n\n<template>\n  <div style=\"display: grid; gap: 12px; max-width: 32rem\">\n    <MDatePicker\n      v-model=\"weekdayOnly\"\n      label=\"只能选今天之前\"\n      :max-date=\"today\"\n      help-text=\"max-date = 今天\"\n    />\n    <MDatePicker\n      v-model=\"futureOnly\"\n      label=\"只能选未来日期\"\n      :min-date=\"today\"\n      help-text=\"min-date = 今天\"\n    />\n    <MDatePicker\n      v-model=\"next30\"\n      label=\"只能选未来 30 天内\"\n      :min-date=\"today\"\n      :max-date=\"in30Days\"\n      help-text=\"min-date 与 max-date 组合\"\n    />\n  </div>\n</template>",
+          "locale": "zh-CN"
+        },
+        {
+          "id": "内联面板-1",
+          "section": "内联面板",
+          "sectionId": "内联面板",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MDatePicker } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst date = ref<string | null>('2024-06-15')\n</script>\n\n<template>\n  <div style=\"max-width: 32rem\">\n    <p style=\"margin: 0 0 8px; color: var(--m-color-text-muted); font-size: 13px\">\n      使用 <code>:teleport=\"false\"</code> + <code>append-to=\"self\"</code> 让面板就地渲染，适合嵌入卡片或自定义布局。\n    </p>\n    <div style=\"border: 1px solid var(--m-color-border); border-radius: 8px; padding: 16px; background: var(--m-color-surface)\">\n      <MDatePicker v-model=\"date\" label=\"内联面板\" :teleport=\"false\" append-to=\"self\" />\n    </div>\n  </div>\n</template>",
+          "locale": "zh-CN"
+        },
+        {
+          "id": "状态-status-1",
+          "section": "状态（status）",
+          "sectionId": "状态-status",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MDatePicker } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst warning = ref<string | null>('2024-06-15')\nconst error = ref<string | null>('2024-06-20')\n</script>\n\n<template>\n  <div style=\"display: grid; gap: 12px\">\n    <MDatePicker v-model=\"warning\" label=\"Warning 状态\" status=\"warning\" help-text=\"这是一个温馨提示\" />\n    <MDatePicker v-model=\"error\" label=\"Error 状态\" status=\"error\" help-text=\"字段存在错误\" />\n  </div>\n</template>",
+          "locale": "zh-CN"
+        },
+        {
+          "id": "页脚与自定义单元格-1",
+          "section": "页脚与自定义单元格",
+          "sectionId": "页脚与自定义单元格",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MButton, MDatePicker, MTag } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst value = ref<string | null>('2024-06-15')\n\nconst holidays = new Set(['2024-06-10', '2024-06-17'])\n\nfunction pad(n: number) {\n  return String(n).padStart(2, '0')\n}\nfunction iso(date: Date) {\n  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`\n}\nfunction today(): string {\n  return iso(new Date())\n}\n</script>\n\n<template>\n  <MDatePicker v-model=\"value\" label=\"带页脚与自定义单元格\">\n    <template #cell=\"{ date }\">\n      <span style=\"position: relative\">\n        {{ date.getDate() }}\n        <span\n          v-if=\"holidays.has(iso(date))\"\n          style=\"position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--m-color-primary)\"\n        />\n      </span>\n    </template>\n    <template #footer=\"{ close }\">\n      <MTag value=\"演示：圆点 = 节假日\" type=\"secondary\" />\n      <MButton size=\"small\" @click=\"value = today(); close()\">今天</MButton>\n    </template>\n  </MDatePicker>\n</template>",
+          "locale": "zh-CN"
+        },
+        {
+          "id": "needconfirm-确认提交-1",
+          "section": "needConfirm 确认提交",
+          "sectionId": "needconfirm-确认提交",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MDatePicker } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst datetime = ref<string | null>('2024-06-15 14:30')\nconst time = ref<string | null>('09:15')\n</script>\n\n<template>\n  <div style=\"display: grid; gap: 12px\">\n    <MDatePicker v-model=\"datetime\" type=\"datetime\" label=\"日期时间（需确认）\" need-confirm />\n    <MDatePicker v-model=\"time\" type=\"time\" label=\"时间（需确认）\" need-confirm />\n  </div>\n</template>",
+          "locale": "zh-CN"
+        },
+        {
+          "id": "多选日期-1",
+          "section": "多选日期",
+          "sectionId": "多选日期",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MDatePicker } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst dates = ref<string[]>(['2024-06-10', '2024-06-15'])\n</script>\n\n<template>\n  <MDatePicker v-model=\"dates\" label=\"多选日期\" multiple />\n</template>",
+          "locale": "zh-CN"
+        },
+        {
+          "id": "多选实战-排班-1",
+          "section": "多选实战：排班",
+          "sectionId": "多选实战-排班",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MDatePicker, MTag } from 'morya-ui'\nimport { computed, ref } from 'vue'\n\nconst selectedDates = ref<string[]>([])\n\nconst sorted = computed(() =>\n  [...selectedDates.value].sort((a, b) => (a < b ? -1 : 1)),\n)\n\nconst weekdayMap = ['日', '一', '二', '三', '四', '五', '六']\nfunction formatDay(iso: string) {\n  const d = new Date(iso)\n  return `${iso.slice(5)} 周${weekdayMap[d.getDay()]}`\n}\n</script>\n\n<template>\n  <div style=\"display: grid; gap: 12px; max-width: 32rem\">\n    <MDatePicker\n      v-model=\"selectedDates\"\n      label=\"选择排班日期\"\n      multiple\n      help-text=\"点击切换选中；可跨月选择多天\"\n    />\n    <div v-if=\"sorted.length\" style=\"display: flex; flex-wrap: wrap; gap: 6px\">\n      <MTag v-for=\"iso in sorted\" :key=\"iso\" :value=\"formatDay(iso)\" type=\"primary\" />\n    </div>\n    <p v-else style=\"color: var(--m-color-text-muted); font-size: 13px; margin: 0\">\n      尚未选择任何日期\n    </p>\n  </div>\n</template>",
+          "locale": "zh-CN"
+        },
+        {
+          "id": "表单集成-1",
+          "section": "表单集成",
+          "sectionId": "表单集成",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MButton, MDatePicker } from 'morya-ui'\nimport { reactive, ref } from 'vue'\n\nconst form = reactive({\n  name: '',\n  startDate: null as string | null,\n  endDate: null as string | null,\n})\n\nconst submitted = ref<string | null>(null)\n\nfunction iso(date: Date) {\n  const y = date.getFullYear()\n  const m = String(date.getMonth() + 1).padStart(2, '0')\n  const d = String(date.getDate()).padStart(2, '0')\n  return `${y}-${m}-${d}`\n}\nconst today = iso(new Date())\n\nconst startError = ref('')\nconst endError = ref('')\n\nfunction submit() {\n  startError.value = form.startDate ? '' : '请选择开始日期'\n  endError.value = form.endDate ? '' : '请选择结束日期'\n  if (form.startDate && form.endDate && form.endDate < form.startDate) {\n    endError.value = '结束日期不能早于开始日期'\n  }\n  if (startError.value || endError.value) return\n  submitted.value = JSON.stringify(form, null, 2)\n}\n</script>\n\n<template>\n  <form style=\"display: grid; gap: 12px; max-width: 32rem\" @submit.prevent=\"submit\">\n    <MDatePicker\n      v-model=\"form.startDate\"\n      label=\"开始日期\"\n      required\n      :min-date=\"today\"\n      :error-message=\"startError\"\n    />\n    <MDatePicker\n      v-model=\"form.endDate\"\n      label=\"结束日期\"\n      required\n      :min-date=\"form.startDate ?? today\"\n      :error-message=\"endError\"\n    />\n    <div>\n      <MButton type=\"primary\" html-type=\"submit\">提交</MButton>\n    </div>\n    <pre v-if=\"submitted\" style=\"background: var(--m-color-surface-sunken); padding: 8px; border-radius: 4px; font-size: 12px\">{{ submitted }}</pre>\n  </form>\n</template>",
+          "locale": "zh-CN"
+        },
+        {
+          "id": "输入掩码-1",
+          "section": "输入掩码",
+          "sectionId": "输入掩码",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MDatePicker } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst date = ref<string | null>('2024-06-15')\nconst datetime = ref<string | null>('2024-06-15 14:30')\n</script>\n\n<template>\n  <div style=\"display: grid; gap: 12px\">\n    <MDatePicker v-model=\"date\" label=\"输入掩码（date）\" mask />\n    <MDatePicker v-model=\"datetime\" type=\"datetime\" label=\"输入掩码（datetime）\" mask />\n  </div>\n</template>",
+          "locale": "zh-CN"
+        },
         {
           "id": "类型-1",
           "section": "类型",
@@ -6417,6 +6979,123 @@
           "code": "<script setup lang=\"ts\">\nimport { MDatePicker } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst value = ref<string | null>(null)\nconst shortcuts = [\n  { label: 'Today', value: () => new Date() },\n  { label: 'June 1', value: '2024-06-01' },\n]\n</script>\n\n<template>\n  <MDatePicker v-model=\"value\" label=\"Shortcuts\" :shortcuts=\"shortcuts\" />\n</template>",
           "locale": "en-US"
         },
+        {
+          "id": "range-shortcuts-1",
+          "section": "Range Shortcuts",
+          "sectionId": "range-shortcuts",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MDatePicker } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst recent = ref<[string, string] | null>(null)\nconst month = ref<[string, string] | null>(null)\n\nfunction iso(date: Date) {\n  const y = date.getFullYear()\n  const m = String(date.getMonth() + 1).padStart(2, '0')\n  const d = String(date.getDate()).padStart(2, '0')\n  return `${y}-${m}-${d}`\n}\n\nfunction daysAgo(n: number) {\n  const d = new Date()\n  d.setDate(d.getDate() - n)\n  return d\n}\n\nconst recentShortcuts = [\n  { label: 'Last 7 days', value: () => [iso(daysAgo(6)), iso(new Date())] as [string, string] },\n  { label: 'Last 30 days', value: () => [iso(daysAgo(29)), iso(new Date())] as [string, string] },\n  { label: 'Last 90 days', value: () => [iso(daysAgo(89)), iso(new Date())] as [string, string] },\n]\n\nconst monthShortcuts = [\n  {\n    label: 'This month',\n    value: () => {\n      const now = new Date()\n      const start = new Date(now.getFullYear(), now.getMonth(), 1)\n      return [iso(start), iso(now)] as [string, string]\n    },\n  },\n  {\n    label: 'Last month',\n    value: () => {\n      const now = new Date()\n      const start = new Date(now.getFullYear(), now.getMonth() - 1, 1)\n      const end = new Date(now.getFullYear(), now.getMonth(), 0)\n      return [iso(start), iso(end)] as [string, string]\n    },\n  },\n  {\n    label: 'Year to date',\n    value: () => {\n      const now = new Date()\n      return [`${now.getFullYear()}-01-01`, iso(now)] as [string, string]\n    },\n  },\n]\n</script>\n\n<template>\n  <div style=\"display: grid; gap: 12px; max-width: 32rem\">\n    <MDatePicker\n      v-model=\"recent\"\n      type=\"daterange\"\n      label=\"Recent N days\"\n      :shortcuts=\"recentShortcuts\"\n      help-text=\"Shortcuts matching the current value get highlighted\"\n    />\n    <MDatePicker\n      v-model=\"month\"\n      type=\"daterange\"\n      label=\"By month / year\"\n      :shortcuts=\"monthShortcuts\"\n    />\n  </div>\n</template>",
+          "locale": "en-US"
+        },
+        {
+          "id": "custom-format-1",
+          "section": "Custom Format",
+          "sectionId": "custom-format",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MDatePicker } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst isoDate = ref<string | null>('2024-06-15')\nconst slashDate = ref<string | null>('2024-06-15')\nconst usDate = ref<string | null>('2024-06-15')\nconst time = ref<string | null>('2024-06-15 14:30')\n</script>\n\n<template>\n  <div style=\"display: grid; gap: 12px; max-width: 32rem\">\n    <MDatePicker v-model=\"isoDate\" label=\"Default ISO (YYYY-MM-DD)\" />\n    <MDatePicker v-model=\"slashDate\" label=\"Slash (YYYY/MM/DD)\" format=\"YYYY/MM/DD\" />\n    <MDatePicker v-model=\"usDate\" label=\"US style (MM/DD/YYYY)\" format=\"MM/DD/YYYY\" />\n    <MDatePicker\n      v-model=\"time\"\n      type=\"datetime\"\n      label=\"Datetime with slash (YYYY/MM/DD HH:mm)\"\n      format=\"YYYY/MM/DD\"\n    />\n  </div>\n</template>",
+          "locale": "en-US"
+        },
+        {
+          "id": "datetime-1",
+          "section": "Datetime",
+          "sectionId": "datetime",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MDatePicker } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst datetime = ref<string | null>('2024-06-15 14:30')\nconst datetimeSec = ref<string | null>('2024-06-15 14:30:45')\nconst range = ref<[string, string] | null>(null)\n</script>\n\n<template>\n  <div style=\"display: grid; gap: 12px; max-width: 32rem\">\n    <MDatePicker\n      v-model=\"datetime\"\n      type=\"datetime\"\n      label=\"Datetime (minute)\"\n      help-text=\"Pick a date, then time; pair with need-confirm for a smoother flow\"\n    />\n    <MDatePicker\n      v-model=\"datetimeSec\"\n      type=\"datetime\"\n      label=\"Datetime (with seconds)\"\n      show-seconds\n      need-confirm\n    />\n    <MDatePicker\n      v-model=\"range\"\n      type=\"datetimerange\"\n      label=\"Datetime range\"\n      need-confirm\n      help-text=\"Pick two dates, then adjust start / end time in the time columns\"\n    />\n  </div>\n</template>",
+          "locale": "en-US"
+        },
+        {
+          "id": "custom-trigger-1",
+          "section": "Custom Trigger",
+          "sectionId": "custom-trigger",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MButton, MDatePicker, MIcon } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst date1 = ref<string | null>('2024-06-15')\nconst date2 = ref<string | null>(null)\n</script>\n\n<template>\n  <div style=\"display: grid; gap: 16px; max-width: 32rem\">\n    <MDatePicker v-model=\"date1\" label=\"Button trigger\">\n      <template #trigger=\"{ value }\">\n        <MButton type=\"default\" size=\"small\">\n          <MIcon name=\"calendar\" size=\"sm\" style=\"margin-right: 4px\" />\n          {{ value || 'Pick a date' }}\n        </MButton>\n      </template>\n    </MDatePicker>\n\n    <MDatePicker v-model=\"date2\" label=\"Icon trigger\">\n      <template #trigger=\"{ value }\">\n        <button\n          type=\"button\"\n          style=\"display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--m-color-border); border-radius: var(--m-radius-control); background: var(--m-color-surface); cursor: pointer\"\n        >\n          <MIcon name=\"calendar\" size=\"sm\" />\n          <span v-if=\"value\">{{ value }}</span>\n          <span v-else style=\"color: var(--m-color-text-muted)\">Not set</span>\n        </button>\n      </template>\n    </MDatePicker>\n  </div>\n</template>",
+          "locale": "en-US"
+        },
+        {
+          "id": "disabled-ranges-1",
+          "section": "Disabled Ranges",
+          "sectionId": "disabled-ranges",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MDatePicker } from 'morya-ui'\nimport { computed, ref } from 'vue'\n\nconst pastOnly = ref<string | null>(null)\nconst futureOnly = ref<string | null>(null)\nconst next30 = ref<string | null>(null)\n\nfunction iso(date: Date) {\n  const y = date.getFullYear()\n  const m = String(date.getMonth() + 1).padStart(2, '0')\n  const d = String(date.getDate()).padStart(2, '0')\n  return `${y}-${m}-${d}`\n}\n\nconst today = computed(() => iso(new Date()))\nconst in30Days = computed(() => {\n  const d = new Date()\n  d.setDate(d.getDate() + 30)\n  return iso(d)\n})\n</script>\n\n<template>\n  <div style=\"display: grid; gap: 12px; max-width: 32rem\">\n    <MDatePicker\n      v-model=\"pastOnly\"\n      label=\"Past dates only\"\n      :max-date=\"today\"\n      help-text=\"max-date = today\"\n    />\n    <MDatePicker\n      v-model=\"futureOnly\"\n      label=\"Future dates only\"\n      :min-date=\"today\"\n      help-text=\"min-date = today\"\n    />\n    <MDatePicker\n      v-model=\"next30\"\n      label=\"Within next 30 days\"\n      :min-date=\"today\"\n      :max-date=\"in30Days\"\n      help-text=\"min-date + max-date combined\"\n    />\n  </div>\n</template>",
+          "locale": "en-US"
+        },
+        {
+          "id": "inline-panel-1",
+          "section": "Inline Panel",
+          "sectionId": "inline-panel",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MDatePicker } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst date = ref<string | null>('2024-06-15')\n</script>\n\n<template>\n  <div style=\"max-width: 32rem\">\n    <p style=\"margin: 0 0 8px; color: var(--m-color-text-muted); font-size: 13px\">\n      Use <code>:teleport=\"false\"</code> with <code>append-to=\"self\"</code> to render the panel inline — useful inside cards or custom layouts.\n    </p>\n    <div style=\"border: 1px solid var(--m-color-border); border-radius: 8px; padding: 16px; background: var(--m-color-surface)\">\n      <MDatePicker v-model=\"date\" label=\"Inline panel\" :teleport=\"false\" append-to=\"self\" />\n    </div>\n  </div>\n</template>",
+          "locale": "en-US"
+        },
+        {
+          "id": "status-1",
+          "section": "Status",
+          "sectionId": "status",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MDatePicker } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst warning = ref<string | null>('2024-06-15')\nconst error = ref<string | null>('2024-06-20')\n</script>\n\n<template>\n  <div style=\"display: grid; gap: 12px\">\n    <MDatePicker v-model=\"warning\" label=\"Warning status\" status=\"warning\" help-text=\"A friendly reminder\" />\n    <MDatePicker v-model=\"error\" label=\"Error status\" status=\"error\" help-text=\"Something is wrong\" />\n  </div>\n</template>",
+          "locale": "en-US"
+        },
+        {
+          "id": "footer-custom-cell-1",
+          "section": "Footer & Custom Cell",
+          "sectionId": "footer-custom-cell",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MButton, MDatePicker, MTag } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst value = ref<string | null>('2024-06-15')\n\nconst holidays = new Set(['2024-06-10', '2024-06-17'])\n\nfunction pad(n: number) {\n  return String(n).padStart(2, '0')\n}\nfunction iso(date: Date) {\n  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`\n}\nfunction today(): string {\n  return iso(new Date())\n}\n</script>\n\n<template>\n  <MDatePicker v-model=\"value\" label=\"Footer + custom cell\">\n    <template #cell=\"{ date }\">\n      <span style=\"position: relative\">\n        {{ date.getDate() }}\n        <span\n          v-if=\"holidays.has(iso(date))\"\n          style=\"position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--m-color-primary)\"\n        />\n      </span>\n    </template>\n    <template #footer=\"{ close }\">\n      <MTag value=\"Dot = holiday\" type=\"secondary\" />\n      <MButton size=\"small\" @click=\"value = today(); close()\">Today</MButton>\n    </template>\n  </MDatePicker>\n</template>",
+          "locale": "en-US"
+        },
+        {
+          "id": "needconfirm-1",
+          "section": "needConfirm",
+          "sectionId": "needconfirm",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MDatePicker } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst datetime = ref<string | null>('2024-06-15 14:30')\nconst time = ref<string | null>('09:15')\n</script>\n\n<template>\n  <div style=\"display: grid; gap: 12px\">\n    <MDatePicker v-model=\"datetime\" type=\"datetime\" label=\"Datetime (need confirm)\" need-confirm />\n    <MDatePicker v-model=\"time\" type=\"time\" label=\"Time (need confirm)\" need-confirm />\n  </div>\n</template>",
+          "locale": "en-US"
+        },
+        {
+          "id": "multiple-dates-1",
+          "section": "Multiple Dates",
+          "sectionId": "multiple-dates",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MDatePicker } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst dates = ref<string[]>(['2024-06-10', '2024-06-15'])\n</script>\n\n<template>\n  <MDatePicker v-model=\"dates\" label=\"Multiple dates\" multiple />\n</template>",
+          "locale": "en-US"
+        },
+        {
+          "id": "multiple-in-practice-shift-planning-1",
+          "section": "Multiple in Practice: Shift Planning",
+          "sectionId": "multiple-in-practice-shift-planning",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MDatePicker, MTag } from 'morya-ui'\nimport { computed, ref } from 'vue'\n\nconst selectedDates = ref<string[]>([])\n\nconst sorted = computed(() =>\n  [...selectedDates.value].sort((a, b) => (a < b ? -1 : 1)),\n)\n\nconst weekdayMap = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']\nfunction formatDay(iso: string) {\n  const d = new Date(iso)\n  return `${iso.slice(5)} ${weekdayMap[d.getDay()]}`\n}\n</script>\n\n<template>\n  <div style=\"display: grid; gap: 12px; max-width: 32rem\">\n    <MDatePicker\n      v-model=\"selectedDates\"\n      label=\"Pick shift days\"\n      multiple\n      help-text=\"Click to toggle; you can pick across months\"\n    />\n    <div v-if=\"sorted.length\" style=\"display: flex; flex-wrap: wrap; gap: 6px\">\n      <MTag v-for=\"iso in sorted\" :key=\"iso\" :value=\"formatDay(iso)\" type=\"primary\" />\n    </div>\n    <p v-else style=\"color: var(--m-color-text-muted); font-size: 13px; margin: 0\">\n      No days selected yet\n    </p>\n  </div>\n</template>",
+          "locale": "en-US"
+        },
+        {
+          "id": "form-integration-1",
+          "section": "Form Integration",
+          "sectionId": "form-integration",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MButton, MDatePicker } from 'morya-ui'\nimport { reactive, ref } from 'vue'\n\nconst form = reactive({\n  name: '',\n  startDate: null as string | null,\n  endDate: null as string | null,\n})\n\nconst submitted = ref<string | null>(null)\n\nfunction iso(date: Date) {\n  const y = date.getFullYear()\n  const m = String(date.getMonth() + 1).padStart(2, '0')\n  const d = String(date.getDate()).padStart(2, '0')\n  return `${y}-${m}-${d}`\n}\nconst today = iso(new Date())\n\nconst startError = ref('')\nconst endError = ref('')\n\nfunction submit() {\n  startError.value = form.startDate ? '' : 'Start date is required'\n  endError.value = form.endDate ? '' : 'End date is required'\n  if (form.startDate && form.endDate && form.endDate < form.startDate) {\n    endError.value = 'End date cannot be earlier than start date'\n  }\n  if (startError.value || endError.value) return\n  submitted.value = JSON.stringify(form, null, 2)\n}\n</script>\n\n<template>\n  <form style=\"display: grid; gap: 12px; max-width: 32rem\" @submit.prevent=\"submit\">\n    <MDatePicker\n      v-model=\"form.startDate\"\n      label=\"Start date\"\n      required\n      :min-date=\"today\"\n      :error-message=\"startError\"\n    />\n    <MDatePicker\n      v-model=\"form.endDate\"\n      label=\"End date\"\n      required\n      :min-date=\"form.startDate ?? today\"\n      :error-message=\"endError\"\n    />\n    <div>\n      <MButton type=\"primary\" html-type=\"submit\">Submit</MButton>\n    </div>\n    <pre v-if=\"submitted\" style=\"background: var(--m-color-surface-sunken); padding: 8px; border-radius: 4px; font-size: 12px\">{{ submitted }}</pre>\n  </form>\n</template>",
+          "locale": "en-US"
+        },
+        {
+          "id": "input-mask-1",
+          "section": "Input Mask",
+          "sectionId": "input-mask",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MDatePicker } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst date = ref<string | null>('2024-06-15')\nconst datetime = ref<string | null>('2024-06-15 14:30')\n</script>\n\n<template>\n  <div style=\"display: grid; gap: 12px\">\n    <MDatePicker v-model=\"date\" label=\"Mask (date)\" mask />\n    <MDatePicker v-model=\"datetime\" type=\"datetime\" label=\"Mask (datetime)\" mask />\n  </div>\n</template>",
+          "locale": "en-US"
+        },
         {
           "id": "types-1",
           "section": "Types",
@@ -6497,10 +7176,80 @@
               "title": "Shortcuts",
               "body": "```vue preview src=\"./demos/Shortcuts.zh.vue\"\n```"
             },
+            {
+              "id": "范围快捷键",
+              "title": "范围快捷键",
+              "body": "`shortcuts` 在 `daterange` / `datetimerange` 下更强大：返回 `[start, end]` 元组即可一键选定区间。与当前值匹配的快捷键会自动高亮。\n\n```vue preview src=\"./demos/RangeShortcuts.zh.vue\"\n```"
+            },
+            {
+              "id": "自定义格式",
+              "title": "自定义格式",
+              "body": "`format` 仅控制显示，提交值仍按 `type` 约定（`YYYY-MM-DD` 等）。支持任意 `YYYY` / `MM` / `DD` / `HH` / `mm` / `ss` 组合与自由文本。\n\n```vue preview src=\"./demos/Format.zh.vue\"\n```"
+            },
+            {
+              "id": "日期时间",
+              "title": "日期时间",
+              "body": "`datetime` 与 `datetimerange` 把日历与时间列放在同一面板；`show-seconds` 含秒；`need-confirm` 让用户从容完成两步选择后再提交。\n\n```vue preview src=\"./demos/Datetime.zh.vue\"\n```"
+            },
+            {
+              "id": "自定义触发器",
+              "title": "自定义触发器",
+              "body": "`#trigger` 插槽完全接管触发元素，作用域 `{ value, open }`。适合按钮、图标或复合排版。\n\n```vue preview src=\"./demos/CustomTrigger.zh.vue\"\n```"
+            },
+            {
+              "id": "禁用区间",
+              "title": "禁用区间",
+              "body": "`min-date` / `max-date` 之外的日期会在日历中置灰禁用。两者可单独或组合使用。\n\n```vue preview src=\"./demos/DisabledDates.zh.vue\"\n```"
+            },
+            {
+              "id": "内联面板",
+              "title": "内联面板",
+              "body": "`:teleport=\"false\"` + `append-to=\"self\"` 让面板嵌入文档流，不浮出层叠上下文，适合卡片、抽屉或复合表单内嵌。\n\n```vue preview src=\"./demos/InlinePanel.zh.vue\"\n```"
+            },
+            {
+              "id": "面板模式切换",
+              "title": "面板模式切换",
+              "body": "点击面板头部的月份/年份标签，可在 日 → 月 → 年 三个子面板间循环切换，方便快速跳到目标年份/月份再回到日视图。"
+            },
+            {
+              "id": "状态-status",
+              "title": "状态（status）",
+              "body": "`status` 提供 `'warning'` 与 `'error'` 两种视觉警示（`invalid` / `errorMessage` 会自动落到 `error`）。`warning` 通常配合 `helpText` 表达温和提醒，不阻断提交。\n\n```vue preview src=\"./demos/Status.zh.vue\"\n```"
+            },
+            {
+              "id": "页脚与自定义单元格",
+              "title": "页脚与自定义单元格",
+              "body": "`#footer` 插槽在面板底部渲染操作区（作用域 `{ close }`）；`#cell` 插槽自定义日期单元格内容（作用域含 `date / inMonth / selected / inRange / rangeStart / rangeEnd / isToday / disabled`），适合加节假日标记、日程点、自定义排版。\n\n```vue preview src=\"./demos/FooterAndCell.zh.vue\"\n```"
+            },
+            {
+              "id": "needconfirm-确认提交",
+              "title": "needConfirm 确认提交",
+              "body": "`need-confirm` 启用后，选择值只写入暂存 draft，点击「确认」才提交并关闭，「取消」回滚。适合 `datetime` / `datetimerange` / `time` 等需要多步操作的场景。\n\n```vue preview src=\"./demos/NeedConfirm.zh.vue\"\n```"
+            },
+            {
+              "id": "多选日期",
+              "title": "多选日期",
+              "body": "`multiple` 仅在 `type='date'` 下生效。`modelValue` 变为 `string[]`，每次点击切换选中，面板保持打开。\n\n```vue preview src=\"./demos/Multiple.zh.vue\"\n```"
+            },
+            {
+              "id": "多选实战-排班",
+              "title": "多选实战：排班",
+              "body": "多选配合 `MTag` 展示所选日期，直观易读。\n\n```vue preview src=\"./demos/WorkSchedule.zh.vue\"\n```"
+            },
+            {
+              "id": "表单集成",
+              "title": "表单集成",
+              "body": "结合 `required` / `error-message` / `min-date`，实现一个完整的项目日期范围校验表单。\n\n```vue preview src=\"./demos/FormIntegration.zh.vue\"\n```"
+            },
+            {
+              "id": "输入掩码",
+              "title": "输入掩码",
+              "body": "`mask` 让输入框可编辑，按 `format` 自动插入 `-` `/` `:` 分隔符；`Enter` 提交，`Esc` 或失焦回滚。仅 `date` / `datetime` / `time` 类型支持。\n\n```vue preview src=\"./demos/Mask.zh.vue\"\n```"
+            },
             {
               "id": "props",
               "title": "Props",
-              "body": "| 参数           | 类型                                                                                    | 默认值         | 说明                                                                                        |\n| -------------- | --------------------------------------------------------------------------------------- | -------------- | ------------------------------------------------------------------------------------------- |\n| `modelValue`   | `string \\| Date \\| [string, string] \\| null`                                            | `null`         | 按 `type`：`YYYY-MM-DD`、`[start,end]`、`YYYY-MM-DD HH:mm`、`HH:mm`、`YYYY-MM`、`YYYY` 等。 |\n| `type`         | `'date' \\| 'daterange' \\| 'datetime' \\| 'datetimerange' \\| 'time' \\| 'month' \\| 'year'` | `'date'`       | 面板与值格式。                                                                              |\n| `showSeconds`  | `boolean`                                                                               | `false`        | `time` / `datetime` / `datetimerange` 是否含秒。                                            |\n| `label`        | `string`                                                                                | —              | 标签。                                                                                      |\n| `minDate`      | `string \\| Date \\| null`                                                                | —              | 可选下限。                                                                                  |\n| `maxDate`      | `string \\| Date \\| null`                                                                | —              | 可选上限。                                                                                  |\n| `placeholder`  | `string`                                                                                | locale         | 占位。                                                                                      |\n| `format`       | `string`                                                                                | `'YYYY-MM-DD'` | 输入框展示格式（`YYYY`/`MM`/`DD`/`HH`/`mm`/`ss`）；提交值仍按 `type` 约定。                 |\n| `clearable`    | `boolean`                                                                               | `true`         | 显示清除按钮。                                                                              |\n| `shortcuts`    | `DatePickerShortcut[]`                                                                  | `[]`           | 面板快捷选项。                                                                              |\n| `fluid`        | `boolean`                                                                               | `false`        | 宽度撑满。                                                                                  |\n| `size`         | [MSizeInput](/docs/types#MSizeInput)                                                    | —              | `small` / `large`；可继承 ConfigProvider。                                                  |\n| `disabled`     | `boolean`                                                                               | `false`        | 禁用。                                                                                      |\n| `invalid`      | `boolean`                                                                               | `false`        | 校验失败态。                                                                                |\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| `errorMessage` | `string`                                                                                | —              | —                                                                                           |\n| `helpText`     | `string`                                                                                | —              | —                                                                                           |\n| `id`           | `string`                                                                                | —              | —                                                                                           |\n| `pt`           | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }`  | —              | DOM 透传，见 [样式与 attrs](/docs/attrs).                                                   |"
+              "body": "| 参数           | 类型                                                                                    | 默认值         | 说明                                                                                        |\n| -------------- | --------------------------------------------------------------------------------------- | -------------- | ------------------------------------------------------------------------------------------- |\n| `modelValue`   | `string \\| Date \\| [string, string] \\| null`                                            | `null`         | 按 `type`：`YYYY-MM-DD`、`[start,end]`、`YYYY-MM-DD HH:mm`、`HH:mm`、`YYYY-MM`、`YYYY` 等。 |\n| `type`         | `'date' \\| 'daterange' \\| 'datetime' \\| 'datetimerange' \\| 'time' \\| 'month' \\| 'year'` | `'date'`       | 面板与值格式。                                                                              |\n| `showSeconds`  | `boolean`                                                                               | `false`        | `time` / `datetime` / `datetimerange` 是否含秒。                                            |\n| `label`        | `string`                                                                                | —              | 标签。                                                                                      |\n| `minDate`      | `string \\| Date \\| null`                                                                | —              | 可选下限。                                                                                  |\n| `maxDate`      | `string \\| Date \\| null`                                                                | —              | 可选上限。                                                                                  |\n| `placeholder`  | `string`                                                                                | locale         | 占位。                                                                                      |\n| `format`       | `string`                                                                                | `'YYYY-MM-DD'` | 输入框展示格式（`YYYY`/`MM`/`DD`/`HH`/`mm`/`ss`）；提交值仍按 `type` 约定。                 |\n| `clearable`    | `boolean`                                                                               | `true`         | 显示清除按钮。                                                                              |\n| `shortcuts`    | `DatePickerShortcut[]`                                                                  | `[]`           | 面板快捷选项；与当前值匹配时高亮。                                                          |\n| `status`       | `'default' \\| 'warning' \\| 'error'`                                                     | `'default'`    | 视觉警示；`invalid` / `errorMessage` 自动视为 `error`。                                     |\n| `needConfirm`  | `boolean`                                                                               | `false`        | 选择后仅写入 draft，按「确认」提交、「取消」回滚。                                          |\n| `multiple`     | `boolean`                                                                               | `false`        | 多选日期（仅 `type='date'`）；`modelValue` 为 `string[]`。                                  |\n| `mask`         | `boolean`                                                                               | `false`        | 输入框可编辑，按 `format` 自动补分隔符；Enter 提交，Esc/失焦回滚。                          |\n| `fluid`        | `boolean`                                                                               | `false`        | 宽度撑满。                                                                                  |\n| `size`         | [MSizeInput](/docs/types#MSizeInput)                                                    | —              | `small` / `large`；可继承 ConfigProvider。                                                  |\n| `disabled`     | `boolean`                                                                               | `false`        | 禁用。                                                                                      |\n| `invalid`      | `boolean`                                                                               | `false`        | 校验失败态。                                                                                |\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| `errorMessage` | `string`                                                                                | —              | —                                                                                           |\n| `helpText`     | `string`                                                                                | —              | —                                                                                           |\n| `id`           | `string`                                                                                | —              | —                                                                                           |\n| `pt`           | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }`  | —              | DOM 透传，见 [样式与 attrs](/docs/attrs).                                                   |"
             },
             {
               "id": "events",
@@ -6510,7 +7259,7 @@
             {
               "id": "slots",
               "title": "Slots",
-              "body": "| 插槽名    | 说明                             |\n| --------- | -------------------------------- |\n| `trigger` | 自定义触发器 `{ value, open }`。 |"
+              "body": "| 插槽名    | 说明                                                                                                                              |\n| --------- | --------------------------------------------------------------------------------------------------------------------------------- |\n| `trigger` | 自定义触发器 `{ value, open }`。                                                                                                  |\n| `footer`  | 面板底部自定义操作区，作用域 `{ close }`。`need-confirm` 时若未提供则显示默认「取消/确认」。                                       |\n| `cell`    | 自定义日期单元格，作用域 `{ date, inMonth, selected, inRange, rangeStart, rangeEnd, isToday, disabled }`。                         |"
             },
             {
               "id": "类型",
@@ -6523,7 +7272,7 @@
               "body": "用 `type` 区分日期/范围/时间模式（含 `daterange`、`datetime`、`time` 等）。"
             }
           ],
-          "markdown": "---\ntitle: DatePicker\ncategory: 02 / FORM\ndescription: 日历弹层选择日期、时间、月份或年份。单值或范围，字符串格式按 `type` 约定。支持 min/max、shortcuts、format、showSeconds、clearable。\n---\n\n# DatePicker\n\n带月份导航与日网格的日期选择器；也可切换为时间列、月/年面板。\n\n## 何时使用\n\n- 需要选择日期、日期范围、日期时间、月或年时。\n- 仅选时刻时优先使用独立入口 [TimePicker](/components/TimePicker)（仍可用 `type=\"time\"`）。\n\n## 引入\n\n```ts\nimport { MDatePicker } from \"morya-ui\";\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.zh.vue\"\n```\n\n## Size\n\n```vue preview src=\"./demos/Size.vue\"\n```\n\n## Min / Max\n\n超出范围的日期在日历中禁用。\n\n```vue preview src=\"./demos/MinMax.zh.vue\"\n```\n\n## Invalid\n\n```vue preview src=\"./demos/Invalid.zh.vue\"\n```\n\n## Disabled\n\n```vue preview src=\"./demos/Disabled.zh.vue\"\n```\n\n## Fluid\n\n```vue preview src=\"./demos/Fluid.zh.vue\"\n```\n\n## Teleport\n\n面板默认 Teleport 到 `body`。可用 `append-to=\"self\"` 或 `teleport={false}` 就地渲染。\n\n```vue preview src=\"./demos/Teleport.zh.vue\"\n```\n\n## Range\n\n`type=\"daterange\"` 时先点起点、再点终点；值为 `[start, end]`（ISO 日期）。\n\n```vue preview src=\"./demos/Range.zh.vue\"\n```\n\n## 类型扩展\n\n`type` 支持 `month` / `year` / `time` / `datetime` / `datetimerange`。`showSeconds` 控制是否包含秒。\n\n仅时间场景优先用独立组件 [TimePicker](/components/TimePicker)；本页 `type=\"time\"` 仍可用。\n\n`datetimerange`：两次点击选定日期后以两端 `00:00`（或 `00:00:00`）发出；面板保持打开时可用时间列调整终点时刻，点选最细粒度单位后关闭。\n\n```vue preview src=\"./demos/Types.vue\"\n```\n\n## Shortcuts\n\n```vue preview src=\"./demos/Shortcuts.zh.vue\"\n```\n\n## Props\n\n| 参数           | 类型                                                                                    | 默认值         | 说明                                                                                        |\n| -------------- | --------------------------------------------------------------------------------------- | -------------- | ------------------------------------------------------------------------------------------- |\n| `modelValue`   | `string \\| Date \\| [string, string] \\| null`                                            | `null`         | 按 `type`：`YYYY-MM-DD`、`[start,end]`、`YYYY-MM-DD HH:mm`、`HH:mm`、`YYYY-MM`、`YYYY` 等。 |\n| `type`         | `'date' \\| 'daterange' \\| 'datetime' \\| 'datetimerange' \\| 'time' \\| 'month' \\| 'year'` | `'date'`       | 面板与值格式。                                                                              |\n| `showSeconds`  | `boolean`                                                                               | `false`        | `time` / `datetime` / `datetimerange` 是否含秒。                                            |\n| `label`        | `string`                                                                                | —              | 标签。                                                                                      |\n| `minDate`      | `string \\| Date \\| null`                                                                | —              | 可选下限。                                                                                  |\n| `maxDate`      | `string \\| Date \\| null`                                                                | —              | 可选上限。                                                                                  |\n| `placeholder`  | `string`                                                                                | locale         | 占位。                                                                                      |\n| `format`       | `string`                                                                                | `'YYYY-MM-DD'` | 输入框展示格式（`YYYY`/`MM`/`DD`/`HH`/`mm`/`ss`）；提交值仍按 `type` 约定。                 |\n| `clearable`    | `boolean`                                                                               | `true`         | 显示清除按钮。                                                                              |\n| `shortcuts`    | `DatePickerShortcut[]`                                                                  | `[]`           | 面板快捷选项。                                                                              |\n| `fluid`        | `boolean`                                                                               | `false`        | 宽度撑满。                                                                                  |\n| `size`         | [MSizeInput](/docs/types#MSizeInput)                                                    | —              | `small` / `large`；可继承 ConfigProvider。                                                  |\n| `disabled`     | `boolean`                                                                               | `false`        | 禁用。                                                                                      |\n| `invalid`      | `boolean`                                                                               | `false`        | 校验失败态。                                                                                |\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| `errorMessage` | `string`                                                                                | —              | —                                                                                           |\n| `helpText`     | `string`                                                                                | —              | —                                                                                           |\n| `id`           | `string`                                                                                | —              | —                                                                                           |\n| `pt`           | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }`  | —              | DOM 透传，见 [样式与 attrs](/docs/attrs).                                                   |\n\n## Events\n\n| 事件名              | 参数                                 | 说明             |\n| ------------------- | ------------------------------------ | ---------------- |\n| `update:modelValue` | `string \\| [string, string] \\| null` | 值变化。         |\n| `clear`             | —                                    | 点击清除时触发。 |\n| `change`            | —                                    | —                |\n| `hide`              | —                                    | —                |\n| `show`              | —                                    | —                |\n\n## Slots\n\n| 插槽名    | 说明                             |\n| --------- | -------------------------------- |\n| `trigger` | 自定义触发器 `{ value, open }`。 |\n\n## 类型\n\n<h4 id=\"DatePickerShortcut\">DatePickerShortcut</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ninterface DatePickerShortcut {\n  label: string;\n  value:\n    | DatePickerDateValue\n    | [DatePickerDateValue, DatePickerDateValue]\n    | (() => DatePickerDateValue | [DatePickerDateValue, DatePickerDateValue]);\n}\n```\n\n## 功能边界\n\n用 `type` 区分日期/范围/时间模式（含 `daterange`、`datetime`、`time` 等）。\n"
+          "markdown": "---\ntitle: DatePicker\ncategory: 02 / FORM\ndescription: 日历弹层选择日期、时间、月份或年份。单值或范围，字符串格式按 `type` 约定。支持 min/max、shortcuts、format、showSeconds、clearable。\n---\n\n# DatePicker\n\n带月份导航与日网格的日期选择器；也可切换为时间列、月/年面板。\n\n## 何时使用\n\n- 需要选择日期、日期范围、日期时间、月或年时。\n- 仅选时刻时优先使用独立入口 [TimePicker](/components/TimePicker)（仍可用 `type=\"time\"`）。\n\n## 引入\n\n```ts\nimport { MDatePicker } from \"morya-ui\";\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.zh.vue\"\n```\n\n## Size\n\n```vue preview src=\"./demos/Size.vue\"\n```\n\n## Min / Max\n\n超出范围的日期在日历中禁用。\n\n```vue preview src=\"./demos/MinMax.zh.vue\"\n```\n\n## Invalid\n\n```vue preview src=\"./demos/Invalid.zh.vue\"\n```\n\n## Disabled\n\n```vue preview src=\"./demos/Disabled.zh.vue\"\n```\n\n## Fluid\n\n```vue preview src=\"./demos/Fluid.zh.vue\"\n```\n\n## Teleport\n\n面板默认 Teleport 到 `body`。可用 `append-to=\"self\"` 或 `teleport={false}` 就地渲染。\n\n```vue preview src=\"./demos/Teleport.zh.vue\"\n```\n\n## Range\n\n`type=\"daterange\"` 时先点起点、再点终点；值为 `[start, end]`（ISO 日期）。\n\n```vue preview src=\"./demos/Range.zh.vue\"\n```\n\n## 类型扩展\n\n`type` 支持 `month` / `year` / `time` / `datetime` / `datetimerange`。`showSeconds` 控制是否包含秒。\n\n仅时间场景优先用独立组件 [TimePicker](/components/TimePicker)；本页 `type=\"time\"` 仍可用。\n\n`datetimerange`：两次点击选定日期后以两端 `00:00`（或 `00:00:00`）发出；面板保持打开时可用时间列调整终点时刻，点选最细粒度单位后关闭。\n\n```vue preview src=\"./demos/Types.vue\"\n```\n\n## Shortcuts\n\n```vue preview src=\"./demos/Shortcuts.zh.vue\"\n```\n\n## 范围快捷键\n\n`shortcuts` 在 `daterange` / `datetimerange` 下更强大：返回 `[start, end]` 元组即可一键选定区间。与当前值匹配的快捷键会自动高亮。\n\n```vue preview src=\"./demos/RangeShortcuts.zh.vue\"\n```\n\n## 自定义格式\n\n`format` 仅控制显示，提交值仍按 `type` 约定（`YYYY-MM-DD` 等）。支持任意 `YYYY` / `MM` / `DD` / `HH` / `mm` / `ss` 组合与自由文本。\n\n```vue preview src=\"./demos/Format.zh.vue\"\n```\n\n## 日期时间\n\n`datetime` 与 `datetimerange` 把日历与时间列放在同一面板；`show-seconds` 含秒；`need-confirm` 让用户从容完成两步选择后再提交。\n\n```vue preview src=\"./demos/Datetime.zh.vue\"\n```\n\n## 自定义触发器\n\n`#trigger` 插槽完全接管触发元素，作用域 `{ value, open }`。适合按钮、图标或复合排版。\n\n```vue preview src=\"./demos/CustomTrigger.zh.vue\"\n```\n\n## 禁用区间\n\n`min-date` / `max-date` 之外的日期会在日历中置灰禁用。两者可单独或组合使用。\n\n```vue preview src=\"./demos/DisabledDates.zh.vue\"\n```\n\n## 内联面板\n\n`:teleport=\"false\"` + `append-to=\"self\"` 让面板嵌入文档流，不浮出层叠上下文，适合卡片、抽屉或复合表单内嵌。\n\n```vue preview src=\"./demos/InlinePanel.zh.vue\"\n```\n\n## 面板模式切换\n\n点击面板头部的月份/年份标签，可在 日 → 月 → 年 三个子面板间循环切换，方便快速跳到目标年份/月份再回到日视图。\n\n## 状态（status）\n\n`status` 提供 `'warning'` 与 `'error'` 两种视觉警示（`invalid` / `errorMessage` 会自动落到 `error`）。`warning` 通常配合 `helpText` 表达温和提醒，不阻断提交。\n\n```vue preview src=\"./demos/Status.zh.vue\"\n```\n\n## 页脚与自定义单元格\n\n`#footer` 插槽在面板底部渲染操作区（作用域 `{ close }`）；`#cell` 插槽自定义日期单元格内容（作用域含 `date / inMonth / selected / inRange / rangeStart / rangeEnd / isToday / disabled`），适合加节假日标记、日程点、自定义排版。\n\n```vue preview src=\"./demos/FooterAndCell.zh.vue\"\n```\n\n## needConfirm 确认提交\n\n`need-confirm` 启用后，选择值只写入暂存 draft，点击「确认」才提交并关闭，「取消」回滚。适合 `datetime` / `datetimerange` / `time` 等需要多步操作的场景。\n\n```vue preview src=\"./demos/NeedConfirm.zh.vue\"\n```\n\n## 多选日期\n\n`multiple` 仅在 `type='date'` 下生效。`modelValue` 变为 `string[]`，每次点击切换选中，面板保持打开。\n\n```vue preview src=\"./demos/Multiple.zh.vue\"\n```\n\n## 多选实战：排班\n\n多选配合 `MTag` 展示所选日期，直观易读。\n\n```vue preview src=\"./demos/WorkSchedule.zh.vue\"\n```\n\n## 表单集成\n\n结合 `required` / `error-message` / `min-date`，实现一个完整的项目日期范围校验表单。\n\n```vue preview src=\"./demos/FormIntegration.zh.vue\"\n```\n\n## 输入掩码\n\n`mask` 让输入框可编辑，按 `format` 自动插入 `-` `/` `:` 分隔符；`Enter` 提交，`Esc` 或失焦回滚。仅 `date` / `datetime` / `time` 类型支持。\n\n```vue preview src=\"./demos/Mask.zh.vue\"\n```\n\n## Props\n\n| 参数           | 类型                                                                                    | 默认值         | 说明                                                                                        |\n| -------------- | --------------------------------------------------------------------------------------- | -------------- | ------------------------------------------------------------------------------------------- |\n| `modelValue`   | `string \\| Date \\| [string, string] \\| null`                                            | `null`         | 按 `type`：`YYYY-MM-DD`、`[start,end]`、`YYYY-MM-DD HH:mm`、`HH:mm`、`YYYY-MM`、`YYYY` 等。 |\n| `type`         | `'date' \\| 'daterange' \\| 'datetime' \\| 'datetimerange' \\| 'time' \\| 'month' \\| 'year'` | `'date'`       | 面板与值格式。                                                                              |\n| `showSeconds`  | `boolean`                                                                               | `false`        | `time` / `datetime` / `datetimerange` 是否含秒。                                            |\n| `label`        | `string`                                                                                | —              | 标签。                                                                                      |\n| `minDate`      | `string \\| Date \\| null`                                                                | —              | 可选下限。                                                                                  |\n| `maxDate`      | `string \\| Date \\| null`                                                                | —              | 可选上限。                                                                                  |\n| `placeholder`  | `string`                                                                                | locale         | 占位。                                                                                      |\n| `format`       | `string`                                                                                | `'YYYY-MM-DD'` | 输入框展示格式（`YYYY`/`MM`/`DD`/`HH`/`mm`/`ss`）；提交值仍按 `type` 约定。                 |\n| `clearable`    | `boolean`                                                                               | `true`         | 显示清除按钮。                                                                              |\n| `shortcuts`    | `DatePickerShortcut[]`                                                                  | `[]`           | 面板快捷选项；与当前值匹配时高亮。                                                          |\n| `status`       | `'default' \\| 'warning' \\| 'error'`                                                     | `'default'`    | 视觉警示；`invalid` / `errorMessage` 自动视为 `error`。                                     |\n| `needConfirm`  | `boolean`                                                                               | `false`        | 选择后仅写入 draft，按「确认」提交、「取消」回滚。                                          |\n| `multiple`     | `boolean`                                                                               | `false`        | 多选日期（仅 `type='date'`）；`modelValue` 为 `string[]`。                                  |\n| `mask`         | `boolean`                                                                               | `false`        | 输入框可编辑，按 `format` 自动补分隔符；Enter 提交，Esc/失焦回滚。                          |\n| `fluid`        | `boolean`                                                                               | `false`        | 宽度撑满。                                                                                  |\n| `size`         | [MSizeInput](/docs/types#MSizeInput)                                                    | —              | `small` / `large`；可继承 ConfigProvider。                                                  |\n| `disabled`     | `boolean`                                                                               | `false`        | 禁用。                                                                                      |\n| `invalid`      | `boolean`                                                                               | `false`        | 校验失败态。                                                                                |\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| `errorMessage` | `string`                                                                                | —              | —                                                                                           |\n| `helpText`     | `string`                                                                                | —              | —                                                                                           |\n| `id`           | `string`                                                                                | —              | —                                                                                           |\n| `pt`           | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }`  | —              | DOM 透传，见 [样式与 attrs](/docs/attrs).                                                   |\n\n## Events\n\n| 事件名              | 参数                                 | 说明             |\n| ------------------- | ------------------------------------ | ---------------- |\n| `update:modelValue` | `string \\| [string, string] \\| null` | 值变化。         |\n| `clear`             | —                                    | 点击清除时触发。 |\n| `change`            | —                                    | —                |\n| `hide`              | —                                    | —                |\n| `show`              | —                                    | —                |\n\n## Slots\n\n| 插槽名    | 说明                                                                                                                              |\n| --------- | --------------------------------------------------------------------------------------------------------------------------------- |\n| `trigger` | 自定义触发器 `{ value, open }`。                                                                                                  |\n| `footer`  | 面板底部自定义操作区，作用域 `{ close }`。`need-confirm` 时若未提供则显示默认「取消/确认」。                                       |\n| `cell`    | 自定义日期单元格，作用域 `{ date, inMonth, selected, inRange, rangeStart, rangeEnd, isToday, disabled }`。                         |\n\n## 类型\n\n<h4 id=\"DatePickerShortcut\">DatePickerShortcut</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ninterface DatePickerShortcut {\n  label: string;\n  value:\n    | DatePickerDateValue\n    | [DatePickerDateValue, DatePickerDateValue]\n    | (() => DatePickerDateValue | [DatePickerDateValue, DatePickerDateValue]);\n}\n```\n\n## 功能边界\n\n用 `type` 区分日期/范围/时间模式（含 `daterange`、`datetime`、`time` 等）。\n"
         },
         "en-US": {
           "title": "DatePicker",
@@ -6594,10 +7343,80 @@
               "title": "Shortcuts",
               "body": "```vue preview src=\"./demos/Shortcuts.en.vue\"\n```"
             },
+            {
+              "id": "range-shortcuts",
+              "title": "Range Shortcuts",
+              "body": "`shortcuts` shine for `daterange` / `datetimerange`: return a `[start, end]` tuple to select a range in one click. The shortcut matching the current value is highlighted automatically.\n\n```vue preview src=\"./demos/RangeShortcuts.en.vue\"\n```"
+            },
+            {
+              "id": "custom-format",
+              "title": "Custom Format",
+              "body": "`format` only affects display; the emitted value still follows the `type` convention (`YYYY-MM-DD`, etc.). Mix `YYYY` / `MM` / `DD` / `HH` / `mm` / `ss` with free text.\n\n```vue preview src=\"./demos/Format.en.vue\"\n```"
+            },
+            {
+              "id": "datetime",
+              "title": "Datetime",
+              "body": "`datetime` and `datetimerange` combine the calendar and time columns in one panel. `show-seconds` includes seconds; `need-confirm` lets users finish the two-step pick before committing.\n\n```vue preview src=\"./demos/Datetime.en.vue\"\n```"
+            },
+            {
+              "id": "custom-trigger",
+              "title": "Custom Trigger",
+              "body": "The `#trigger` slot takes full control of the trigger element with scope `{ value, open }` — handy for buttons, icons, or composite layouts.\n\n```vue preview src=\"./demos/CustomTrigger.en.vue\"\n```"
+            },
+            {
+              "id": "disabled-ranges",
+              "title": "Disabled Ranges",
+              "body": "Dates outside `min-date` / `max-date` are disabled in the calendar. Use them alone or together.\n\n```vue preview src=\"./demos/DisabledDates.en.vue\"\n```"
+            },
+            {
+              "id": "inline-panel",
+              "title": "Inline Panel",
+              "body": "`:teleport=\"false\"` with `append-to=\"self\"` renders the panel inline, outside the overlay stacking context — useful inside cards, drawers, or complex forms.\n\n```vue preview src=\"./demos/InlinePanel.en.vue\"\n```"
+            },
+            {
+              "id": "panel-mode-cycling",
+              "title": "Panel Mode Cycling",
+              "body": "Click the panel header label to cycle through days → months → years sub-panels, handy for jumping to a target year/month before returning to the day grid."
+            },
+            {
+              "id": "status",
+              "title": "Status",
+              "body": "`status` accepts `'warning'` or `'error'` for visual emphasis (`invalid` / `errorMessage` imply `error`). Use `warning` with `helpText` for friendly reminders that don't block submission.\n\n```vue preview src=\"./demos/Status.en.vue\"\n```"
+            },
+            {
+              "id": "footer-custom-cell",
+              "title": "Footer & Custom Cell",
+              "body": "The `#footer` slot renders an action area at the bottom of the panel (scope `{ close }`); `#cell` customizes the day cell (scope includes `date / inMonth / selected / inRange / rangeStart / rangeEnd / isToday / disabled`) — great for holiday dots, schedule markers, or custom layouts.\n\n```vue preview src=\"./demos/FooterAndCell.en.vue\"\n```"
+            },
+            {
+              "id": "needconfirm",
+              "title": "needConfirm",
+              "body": "With `need-confirm`, picking a value only writes to a draft; **OK** commits and closes, **Cancel** rolls back. Recommended for `datetime` / `datetimerange` / `time` where selection takes multiple steps.\n\n```vue preview src=\"./demos/NeedConfirm.en.vue\"\n```"
+            },
+            {
+              "id": "multiple-dates",
+              "title": "Multiple Dates",
+              "body": "`multiple` (only valid for `type='date'`) makes `modelValue` a `string[]`; each click toggles selection and the panel stays open.\n\n```vue preview src=\"./demos/Multiple.en.vue\"\n```"
+            },
+            {
+              "id": "multiple-in-practice-shift-planning",
+              "title": "Multiple in Practice: Shift Planning",
+              "body": "Combine `multiple` with `MTag` to display picked days in a friendly, readable way.\n\n```vue preview src=\"./demos/WorkSchedule.en.vue\"\n```"
+            },
+            {
+              "id": "form-integration",
+              "title": "Form Integration",
+              "body": "Combine `required`, `error-message` and `min-date` for a complete date-range validation form.\n\n```vue preview src=\"./demos/FormIntegration.en.vue\"\n```"
+            },
+            {
+              "id": "input-mask",
+              "title": "Input Mask",
+              "body": "`mask` makes the input editable, auto-inserting `-` / `/` / `:` separators matching the display `format`. Press **Enter** to commit, **Esc** or blur to revert. Supported on `date` / `datetime` / `time` only.\n\n```vue preview src=\"./demos/Mask.en.vue\"\n```"
+            },
             {
               "id": "props",
               "title": "Props",
-              "body": "| Prop           | Type                                                                                    | Default        | Description                                                                                  |\n| -------------- | --------------------------------------------------------------------------------------- | -------------- | -------------------------------------------------------------------------------------------- |\n| `modelValue`   | `string \\| Date \\| [string, string] \\| null`                                            | `null`         | By `type`: `YYYY-MM-DD`, `[start,end]`, `YYYY-MM-DD HH:mm`, `HH:mm`, `YYYY-MM`, `YYYY`, etc. |\n| `type`         | `'date' \\| 'daterange' \\| 'datetime' \\| 'datetimerange' \\| 'time' \\| 'month' \\| 'year'` | `'date'`       | Panel and value shape.                                                                       |\n| `showSeconds`  | `boolean`                                                                               | `false`        | Include seconds for `time` / `datetime` / `datetimerange`.                                   |\n| `label`        | `string`                                                                                | —              | Label.                                                                                       |\n| `minDate`      | `string \\| Date \\| null`                                                                | —              | Optional lower bound.                                                                        |\n| `maxDate`      | `string \\| Date \\| null`                                                                | —              | Optional upper bound.                                                                        |\n| `placeholder`  | `string`                                                                                | locale         | Placeholder.                                                                                 |\n| `format`       | `string`                                                                                | `'YYYY-MM-DD'` | Input display pattern (`YYYY`/`MM`/`DD`/`HH`/`mm`/`ss`); emitted value follows `type`.       |\n| `clearable`    | `boolean`                                                                               | `true`         | Show a clear button.                                                                         |\n| `shortcuts`    | `DatePickerShortcut[]`                                                                  | `[]`           | Panel shortcuts.                                                                             |\n| `fluid`        | `boolean`                                                                               | `false`        | Stretch to full width.                                                                       |\n| `size`         | [MSizeInput](/docs/types#MSizeInput)                                                    | —              | `small` / `large`; can inherit from ConfigProvider.                                          |\n| `disabled`     | `boolean`                                                                               | `false`        | Disabled.                                                                                    |\n| `invalid`      | `boolean`                                                                               | `false`        | Invalid state.                                                                               |\n| `teleport`     | `boolean`                                                                               | `true`         | Panel 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| `errorMessage` | `string`                                                                                | —              | —                                                                                            |\n| `helpText`     | `string`                                                                                | —              | —                                                                                            |\n| `id`           | `string`                                                                                | —              | —                                                                                            |\n| `pt`           | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }`  | —              | Pass-through; see [Styling & attrs](/docs/attrs).                                            |"
+              "body": "| Prop           | Type                                                                                    | Default        | Description                                                                                  |\n| -------------- | --------------------------------------------------------------------------------------- | -------------- | -------------------------------------------------------------------------------------------- |\n| `modelValue`   | `string \\| Date \\| [string, string] \\| null`                                            | `null`         | By `type`: `YYYY-MM-DD`, `[start,end]`, `YYYY-MM-DD HH:mm`, `HH:mm`, `YYYY-MM`, `YYYY`, etc. |\n| `type`         | `'date' \\| 'daterange' \\| 'datetime' \\| 'datetimerange' \\| 'time' \\| 'month' \\| 'year'` | `'date'`       | Panel and value shape.                                                                       |\n| `showSeconds`  | `boolean`                                                                               | `false`        | Include seconds for `time` / `datetime` / `datetimerange`.                                   |\n| `label`        | `string`                                                                                | —              | Label.                                                                                       |\n| `minDate`      | `string \\| Date \\| null`                                                                | —              | Optional lower bound.                                                                        |\n| `maxDate`      | `string \\| Date \\| null`                                                                | —              | Optional upper bound.                                                                        |\n| `placeholder`  | `string`                                                                                | locale         | Placeholder.                                                                                 |\n| `format`       | `string`                                                                                | `'YYYY-MM-DD'` | Input display pattern (`YYYY`/`MM`/`DD`/`HH`/`mm`/`ss`); emitted value follows `type`.       |\n| `clearable`    | `boolean`                                                                               | `true`         | Show a clear button.                                                                         |\n| `shortcuts`    | `DatePickerShortcut[]`                                                                  | `[]`           | Panel shortcuts; the one matching the current value is highlighted.                          |\n| `status`       | `'default' \\| 'warning' \\| 'error'`                                                     | `'default'`    | Visual status; `invalid` / `errorMessage` imply `error`.                                     |\n| `needConfirm`  | `boolean`                                                                               | `false`        | Defer commit until OK; Cancel rolls back.                                                    |\n| `multiple`     | `boolean`                                                                               | `false`        | Pick many dates (`type='date'` only); `modelValue` is `string[]`.                            |\n| `mask`         | `boolean`                                                                               | `false`        | Editable input with auto separators; Enter commits, Esc/blur reverts.                        |\n| `fluid`        | `boolean`                                                                               | `false`        | Stretch to full width.                                                                       |\n| `size`         | [MSizeInput](/docs/types#MSizeInput)                                                    | —              | `small` / `large`; can inherit from ConfigProvider.                                          |\n| `disabled`     | `boolean`                                                                               | `false`        | Disabled.                                                                                    |\n| `invalid`      | `boolean`                                                                               | `false`        | Invalid state.                                                                               |\n| `teleport`     | `boolean`                                                                               | `true`         | Panel 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| `errorMessage` | `string`                                                                                | —              | —                                                                                            |\n| `helpText`     | `string`                                                                                | —              | —                                                                                            |\n| `id`           | `string`                                                                                | —              | —                                                                                            |\n| `pt`           | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }`  | —              | Pass-through; see [Styling & attrs](/docs/attrs).                                            |"
             },
             {
               "id": "events",
@@ -6607,7 +7426,7 @@
             {
               "id": "slots",
               "title": "Slots",
-              "body": "| Slot      | Description                       |\n| --------- | --------------------------------- |\n| `trigger` | Custom trigger `{ value, open }`. |"
+              "body": "| Slot      | Description                                                                                                                  |\n| --------- | ---------------------------------------------------------------------------------------------------------------------------- |\n| `trigger` | Custom trigger `{ value, open }`.                                                                                            |\n| `footer`  | Panel bottom action area, scope `{ close }`. When `need-confirm` is on and no footer is given, default OK/Cancel is shown.   |\n| `cell`    | Custom day cell, scope `{ date, inMonth, selected, inRange, rangeStart, rangeEnd, isToday, disabled }`.                       |"
             },
             {
               "id": "types",
@@ -6620,7 +7439,7 @@
               "body": "Date, range, and time modes are selected via `type` (`daterange`, `datetime`, `time`, etc.)."
             }
           ],
-          "markdown": "---\ntitle: DatePicker\ncategory: 02 / FORM\ndescription: Calendar overlay for a date, time, month, or year. String shape follows `type`. Supports min/max, shortcuts, format, showSeconds, and clearable.\n---\n\n# DatePicker\n\nDate picker with month navigation and a day grid; also supports time columns and month/year panels.\n\n## When to use\n\n- Use for date, date range, date-time, month, or year selection.\n- For time-only, prefer the dedicated [TimePicker](/components/TimePicker) entry (`type=\"time\"` still works).\n\n## Import\n\n```ts\nimport { MDatePicker } from \"morya-ui\";\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.en.vue\"\n```\n\n## Size\n\n```vue preview src=\"./demos/Size.vue\"\n```\n\n## Min / Max\n\nDates outside the range are disabled in the calendar.\n\n```vue preview src=\"./demos/MinMax.en.vue\"\n```\n\n## Invalid\n\n```vue preview src=\"./demos/Invalid.en.vue\"\n```\n\n## Disabled\n\n```vue preview src=\"./demos/Disabled.en.vue\"\n```\n\n## Fluid\n\n```vue preview src=\"./demos/Fluid.en.vue\"\n```\n\n## Teleport\n\nThe panel Teleports to `body` by default. Use `append-to=\"self\"` or `teleport={false}` to render in place.\n\n```vue preview src=\"./demos/Teleport.en.vue\"\n```\n\n## Range\n\nWith `type=\"daterange\"`, click the start date then the end date. The value is `[start, end]` (ISO dates).\n\n```vue preview src=\"./demos/Range.en.vue\"\n```\n\n## Type variants\n\n`type` also supports `month` / `year` / `time` / `datetime` / `datetimerange`. Use `showSeconds` to include seconds.\n\nFor time-only, prefer the dedicated [TimePicker](/components/TimePicker); `type=\"time\"` on this component still works.\n\n`datetimerange`: after two date clicks, emits both ends with `00:00` (or `00:00:00`); while the panel stays open, time columns adjust the end time and selecting the finest unit closes.\n\n```vue preview src=\"./demos/Types.vue\"\n```\n\n## Shortcuts\n\n```vue preview src=\"./demos/Shortcuts.en.vue\"\n```\n\n## Props\n\n| Prop           | Type                                                                                    | Default        | Description                                                                                  |\n| -------------- | --------------------------------------------------------------------------------------- | -------------- | -------------------------------------------------------------------------------------------- |\n| `modelValue`   | `string \\| Date \\| [string, string] \\| null`                                            | `null`         | By `type`: `YYYY-MM-DD`, `[start,end]`, `YYYY-MM-DD HH:mm`, `HH:mm`, `YYYY-MM`, `YYYY`, etc. |\n| `type`         | `'date' \\| 'daterange' \\| 'datetime' \\| 'datetimerange' \\| 'time' \\| 'month' \\| 'year'` | `'date'`       | Panel and value shape.                                                                       |\n| `showSeconds`  | `boolean`                                                                               | `false`        | Include seconds for `time` / `datetime` / `datetimerange`.                                   |\n| `label`        | `string`                                                                                | —              | Label.                                                                                       |\n| `minDate`      | `string \\| Date \\| null`                                                                | —              | Optional lower bound.                                                                        |\n| `maxDate`      | `string \\| Date \\| null`                                                                | —              | Optional upper bound.                                                                        |\n| `placeholder`  | `string`                                                                                | locale         | Placeholder.                                                                                 |\n| `format`       | `string`                                                                                | `'YYYY-MM-DD'` | Input display pattern (`YYYY`/`MM`/`DD`/`HH`/`mm`/`ss`); emitted value follows `type`.       |\n| `clearable`    | `boolean`                                                                               | `true`         | Show a clear button.                                                                         |\n| `shortcuts`    | `DatePickerShortcut[]`                                                                  | `[]`           | Panel shortcuts.                                                                             |\n| `fluid`        | `boolean`                                                                               | `false`        | Stretch to full width.                                                                       |\n| `size`         | [MSizeInput](/docs/types#MSizeInput)                                                    | —              | `small` / `large`; can inherit from ConfigProvider.                                          |\n| `disabled`     | `boolean`                                                                               | `false`        | Disabled.                                                                                    |\n| `invalid`      | `boolean`                                                                               | `false`        | Invalid state.                                                                               |\n| `teleport`     | `boolean`                                                                               | `true`         | Panel 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| `errorMessage` | `string`                                                                                | —              | —                                                                                            |\n| `helpText`     | `string`                                                                                | —              | —                                                                                            |\n| `id`           | `string`                                                                                | —              | —                                                                                            |\n| `pt`           | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }`  | —              | Pass-through; see [Styling & attrs](/docs/attrs).                                            |\n\n## Events\n\n| Event               | Prop                                 | Description                             |\n| ------------------- | ------------------------------------ | --------------------------------------- |\n| `update:modelValue` | `string \\| [string, string] \\| null` | Value change.                           |\n| `clear`             | —                                    | Fired when the clear button is clicked. |\n| `change`            | —                                    | —                                       |\n| `hide`              | —                                    | —                                       |\n| `show`              | —                                    | —                                       |\n\n## Slots\n\n| Slot      | Description                       |\n| --------- | --------------------------------- |\n| `trigger` | Custom trigger `{ value, open }`. |\n\n## Types\n\n<h4 id=\"DatePickerShortcut\">DatePickerShortcut</h4>\n\nSee source `types.ts` for the full definition.\n\n```ts\ninterface DatePickerShortcut {\n  label: string;\n  value:\n    | DatePickerDateValue\n    | [DatePickerDateValue, DatePickerDateValue]\n    | (() => DatePickerDateValue | [DatePickerDateValue, DatePickerDateValue]);\n}\n```\n\n## Boundaries\n\nDate, range, and time modes are selected via `type` (`daterange`, `datetime`, `time`, etc.).\n"
+          "markdown": "---\ntitle: DatePicker\ncategory: 02 / FORM\ndescription: Calendar overlay for a date, time, month, or year. String shape follows `type`. Supports min/max, shortcuts, format, showSeconds, and clearable.\n---\n\n# DatePicker\n\nDate picker with month navigation and a day grid; also supports time columns and month/year panels.\n\n## When to use\n\n- Use for date, date range, date-time, month, or year selection.\n- For time-only, prefer the dedicated [TimePicker](/components/TimePicker) entry (`type=\"time\"` still works).\n\n## Import\n\n```ts\nimport { MDatePicker } from \"morya-ui\";\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.en.vue\"\n```\n\n## Size\n\n```vue preview src=\"./demos/Size.vue\"\n```\n\n## Min / Max\n\nDates outside the range are disabled in the calendar.\n\n```vue preview src=\"./demos/MinMax.en.vue\"\n```\n\n## Invalid\n\n```vue preview src=\"./demos/Invalid.en.vue\"\n```\n\n## Disabled\n\n```vue preview src=\"./demos/Disabled.en.vue\"\n```\n\n## Fluid\n\n```vue preview src=\"./demos/Fluid.en.vue\"\n```\n\n## Teleport\n\nThe panel Teleports to `body` by default. Use `append-to=\"self\"` or `teleport={false}` to render in place.\n\n```vue preview src=\"./demos/Teleport.en.vue\"\n```\n\n## Range\n\nWith `type=\"daterange\"`, click the start date then the end date. The value is `[start, end]` (ISO dates).\n\n```vue preview src=\"./demos/Range.en.vue\"\n```\n\n## Type variants\n\n`type` also supports `month` / `year` / `time` / `datetime` / `datetimerange`. Use `showSeconds` to include seconds.\n\nFor time-only, prefer the dedicated [TimePicker](/components/TimePicker); `type=\"time\"` on this component still works.\n\n`datetimerange`: after two date clicks, emits both ends with `00:00` (or `00:00:00`); while the panel stays open, time columns adjust the end time and selecting the finest unit closes.\n\n```vue preview src=\"./demos/Types.vue\"\n```\n\n## Shortcuts\n\n```vue preview src=\"./demos/Shortcuts.en.vue\"\n```\n\n## Range Shortcuts\n\n`shortcuts` shine for `daterange` / `datetimerange`: return a `[start, end]` tuple to select a range in one click. The shortcut matching the current value is highlighted automatically.\n\n```vue preview src=\"./demos/RangeShortcuts.en.vue\"\n```\n\n## Custom Format\n\n`format` only affects display; the emitted value still follows the `type` convention (`YYYY-MM-DD`, etc.). Mix `YYYY` / `MM` / `DD` / `HH` / `mm` / `ss` with free text.\n\n```vue preview src=\"./demos/Format.en.vue\"\n```\n\n## Datetime\n\n`datetime` and `datetimerange` combine the calendar and time columns in one panel. `show-seconds` includes seconds; `need-confirm` lets users finish the two-step pick before committing.\n\n```vue preview src=\"./demos/Datetime.en.vue\"\n```\n\n## Custom Trigger\n\nThe `#trigger` slot takes full control of the trigger element with scope `{ value, open }` — handy for buttons, icons, or composite layouts.\n\n```vue preview src=\"./demos/CustomTrigger.en.vue\"\n```\n\n## Disabled Ranges\n\nDates outside `min-date` / `max-date` are disabled in the calendar. Use them alone or together.\n\n```vue preview src=\"./demos/DisabledDates.en.vue\"\n```\n\n## Inline Panel\n\n`:teleport=\"false\"` with `append-to=\"self\"` renders the panel inline, outside the overlay stacking context — useful inside cards, drawers, or complex forms.\n\n```vue preview src=\"./demos/InlinePanel.en.vue\"\n```\n\n## Panel Mode Cycling\n\nClick the panel header label to cycle through days → months → years sub-panels, handy for jumping to a target year/month before returning to the day grid.\n\n## Status\n\n`status` accepts `'warning'` or `'error'` for visual emphasis (`invalid` / `errorMessage` imply `error`). Use `warning` with `helpText` for friendly reminders that don't block submission.\n\n```vue preview src=\"./demos/Status.en.vue\"\n```\n\n## Footer & Custom Cell\n\nThe `#footer` slot renders an action area at the bottom of the panel (scope `{ close }`); `#cell` customizes the day cell (scope includes `date / inMonth / selected / inRange / rangeStart / rangeEnd / isToday / disabled`) — great for holiday dots, schedule markers, or custom layouts.\n\n```vue preview src=\"./demos/FooterAndCell.en.vue\"\n```\n\n## needConfirm\n\nWith `need-confirm`, picking a value only writes to a draft; **OK** commits and closes, **Cancel** rolls back. Recommended for `datetime` / `datetimerange` / `time` where selection takes multiple steps.\n\n```vue preview src=\"./demos/NeedConfirm.en.vue\"\n```\n\n## Multiple Dates\n\n`multiple` (only valid for `type='date'`) makes `modelValue` a `string[]`; each click toggles selection and the panel stays open.\n\n```vue preview src=\"./demos/Multiple.en.vue\"\n```\n\n## Multiple in Practice: Shift Planning\n\nCombine `multiple` with `MTag` to display picked days in a friendly, readable way.\n\n```vue preview src=\"./demos/WorkSchedule.en.vue\"\n```\n\n## Form Integration\n\nCombine `required`, `error-message` and `min-date` for a complete date-range validation form.\n\n```vue preview src=\"./demos/FormIntegration.en.vue\"\n```\n\n## Input Mask\n\n`mask` makes the input editable, auto-inserting `-` / `/` / `:` separators matching the display `format`. Press **Enter** to commit, **Esc** or blur to revert. Supported on `date` / `datetime` / `time` only.\n\n```vue preview src=\"./demos/Mask.en.vue\"\n```\n\n## Props\n\n| Prop           | Type                                                                                    | Default        | Description                                                                                  |\n| -------------- | --------------------------------------------------------------------------------------- | -------------- | -------------------------------------------------------------------------------------------- |\n| `modelValue`   | `string \\| Date \\| [string, string] \\| null`                                            | `null`         | By `type`: `YYYY-MM-DD`, `[start,end]`, `YYYY-MM-DD HH:mm`, `HH:mm`, `YYYY-MM`, `YYYY`, etc. |\n| `type`         | `'date' \\| 'daterange' \\| 'datetime' \\| 'datetimerange' \\| 'time' \\| 'month' \\| 'year'` | `'date'`       | Panel and value shape.                                                                       |\n| `showSeconds`  | `boolean`                                                                               | `false`        | Include seconds for `time` / `datetime` / `datetimerange`.                                   |\n| `label`        | `string`                                                                                | —              | Label.                                                                                       |\n| `minDate`      | `string \\| Date \\| null`                                                                | —              | Optional lower bound.                                                                        |\n| `maxDate`      | `string \\| Date \\| null`                                                                | —              | Optional upper bound.                                                                        |\n| `placeholder`  | `string`                                                                                | locale         | Placeholder.                                                                                 |\n| `format`       | `string`                                                                                | `'YYYY-MM-DD'` | Input display pattern (`YYYY`/`MM`/`DD`/`HH`/`mm`/`ss`); emitted value follows `type`.       |\n| `clearable`    | `boolean`                                                                               | `true`         | Show a clear button.                                                                         |\n| `shortcuts`    | `DatePickerShortcut[]`                                                                  | `[]`           | Panel shortcuts; the one matching the current value is highlighted.                          |\n| `status`       | `'default' \\| 'warning' \\| 'error'`                                                     | `'default'`    | Visual status; `invalid` / `errorMessage` imply `error`.                                     |\n| `needConfirm`  | `boolean`                                                                               | `false`        | Defer commit until OK; Cancel rolls back.                                                    |\n| `multiple`     | `boolean`                                                                               | `false`        | Pick many dates (`type='date'` only); `modelValue` is `string[]`.                            |\n| `mask`         | `boolean`                                                                               | `false`        | Editable input with auto separators; Enter commits, Esc/blur reverts.                        |\n| `fluid`        | `boolean`                                                                               | `false`        | Stretch to full width.                                                                       |\n| `size`         | [MSizeInput](/docs/types#MSizeInput)                                                    | —              | `small` / `large`; can inherit from ConfigProvider.                                          |\n| `disabled`     | `boolean`                                                                               | `false`        | Disabled.                                                                                    |\n| `invalid`      | `boolean`                                                                               | `false`        | Invalid state.                                                                               |\n| `teleport`     | `boolean`                                                                               | `true`         | Panel 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| `errorMessage` | `string`                                                                                | —              | —                                                                                            |\n| `helpText`     | `string`                                                                                | —              | —                                                                                            |\n| `id`           | `string`                                                                                | —              | —                                                                                            |\n| `pt`           | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }`  | —              | Pass-through; see [Styling & attrs](/docs/attrs).                                            |\n\n## Events\n\n| Event               | Prop                                 | Description                             |\n| ------------------- | ------------------------------------ | --------------------------------------- |\n| `update:modelValue` | `string \\| [string, string] \\| null` | Value change.                           |\n| `clear`             | —                                    | Fired when the clear button is clicked. |\n| `change`            | —                                    | —                                       |\n| `hide`              | —                                    | —                                       |\n| `show`              | —                                    | —                                       |\n\n## Slots\n\n| Slot      | Description                                                                                                                  |\n| --------- | ---------------------------------------------------------------------------------------------------------------------------- |\n| `trigger` | Custom trigger `{ value, open }`.                                                                                            |\n| `footer`  | Panel bottom action area, scope `{ close }`. When `need-confirm` is on and no footer is given, default OK/Cancel is shown.   |\n| `cell`    | Custom day cell, scope `{ date, inMonth, selected, inRange, rangeStart, rangeEnd, isToday, disabled }`.                       |\n\n## Types\n\n<h4 id=\"DatePickerShortcut\">DatePickerShortcut</h4>\n\nSee source `types.ts` for the full definition.\n\n```ts\ninterface DatePickerShortcut {\n  label: string;\n  value:\n    | DatePickerDateValue\n    | [DatePickerDateValue, DatePickerDateValue]\n    | (() => DatePickerDateValue | [DatePickerDateValue, DatePickerDateValue]);\n}\n```\n\n## Boundaries\n\nDate, range, and time modes are selected via `type` (`daterange`, `datetime`, `time`, etc.).\n"
         }
       }
     },
@@ -12709,241 +13528,6 @@
         }
       }
     },
-    {
-      "id": "InputColor",
-      "name": "InputColor",
-      "exportName": "MInputColor",
-      "category": "02 / FORM",
-      "description": "颜色选择，支持色板与十六进制文本。",
-      "descriptionEn": "Color picker with a palette and hexadecimal text input.",
-      "import": "import { MInputColor } from 'morya-ui'",
-      "props": [
-        {
-          "name": "modelValue",
-          "type": "string",
-          "default": "'#000000'",
-          "description": "十六进制颜色。"
-        },
-        {
-          "name": "swatches",
-          "type": "string[]",
-          "default": "—",
-          "description": "快捷色板。"
-        },
-        {
-          "name": "disabled",
-          "type": "boolean",
-          "default": "false",
-          "description": "禁用。"
-        },
-        {
-          "name": "id",
-          "type": "string",
-          "default": "—",
-          "description": "色板 input id。"
-        },
-        {
-          "name": "invalid",
-          "type": "boolean",
-          "default": "—",
-          "description": "—"
-        },
-        {
-          "name": "label",
-          "type": "string",
-          "default": "—",
-          "description": "—"
-        },
-        {
-          "name": "size",
-          "type": "[MSizeInput](/docs/types#MSizeInput)",
-          "default": "—",
-          "description": "—"
-        },
-        {
-          "name": "pt",
-          "type": "[FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }",
-          "default": "—",
-          "description": "DOM 透传，见 [样式与 attrs](/docs/attrs)."
-        }
-      ],
-      "events": [
-        {
-          "name": "update:modelValue",
-          "payload": "string",
-          "description": "颜色变化。"
-        }
-      ],
-      "slots": [
-        {
-          "name": "trigger",
-          "description": "自定义颜色触发器。"
-        }
-      ],
-      "methods": [],
-      "examples": [
-        {
-          "id": "引入-1",
-          "section": "引入",
-          "sectionId": "引入",
-          "lang": "ts",
-          "preview": false,
-          "code": "import { MInputColor } from \"morya-ui\";",
-          "locale": "zh-CN"
-        },
-        {
-          "id": "基础用法-1",
-          "section": "基础用法",
-          "sectionId": "基础用法",
-          "lang": "vue",
-          "preview": true,
-          "code": "<script setup lang=\"ts\">\nimport { MInputColor } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst color = ref('#2563eb')\n</script>\n\n<template>\n  <MInputColor v-model=\"color\" />\n</template>",
-          "locale": "zh-CN"
-        },
-        {
-          "id": "swatches-1",
-          "section": "Swatches",
-          "sectionId": "swatches",
-          "lang": "vue",
-          "preview": true,
-          "code": "<script setup lang=\"ts\">\nimport { MInputColor } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst color = ref('#2563eb')\n</script>\n\n<template>\n  <MInputColor v-model=\"color\" :swatches=\"['#2563eb', '#16a34a', '#dc2626']\" />\n</template>",
-          "locale": "zh-CN"
-        },
-        {
-          "id": "import-1",
-          "section": "Import",
-          "sectionId": "import",
-          "lang": "ts",
-          "preview": false,
-          "code": "import { MInputColor } from \"morya-ui\";",
-          "locale": "en-US"
-        },
-        {
-          "id": "basic-1",
-          "section": "Basic",
-          "sectionId": "basic",
-          "lang": "vue",
-          "preview": true,
-          "code": "<script setup lang=\"ts\">\nimport { MInputColor } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst color = ref('#2563eb')\n</script>\n\n<template>\n  <MInputColor v-model=\"color\" />\n</template>",
-          "locale": "en-US"
-        },
-        {
-          "id": "swatches-1",
-          "section": "Swatches",
-          "sectionId": "swatches",
-          "lang": "vue",
-          "preview": true,
-          "code": "<script setup lang=\"ts\">\nimport { MInputColor } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst color = ref('#2563eb')\n</script>\n\n<template>\n  <MInputColor v-model=\"color\" :swatches=\"['#2563eb', '#16a34a', '#dc2626']\" />\n</template>",
-          "locale": "en-US"
-        }
-      ],
-      "locales": {
-        "zh-CN": {
-          "title": "InputColor",
-          "description": "颜色选择，支持色板与十六进制文本。",
-          "sections": [
-            {
-              "id": "overview",
-              "title": "",
-              "body": "# InputColor\n\n通过原生色板与文本框编辑 hex 颜色。"
-            },
-            {
-              "id": "何时使用",
-              "title": "何时使用",
-              "body": "- 表单需要选择或输入十六进制颜色时。\n- 需要预设色块（`swatches`）即可，不需要完整独立取色面板。"
-            },
-            {
-              "id": "引入",
-              "title": "引入",
-              "body": "```ts\nimport { MInputColor } from \"morya-ui\";\n```"
-            },
-            {
-              "id": "基础用法",
-              "title": "基础用法",
-              "body": "```vue preview src=\"./demos/Basic.vue\"\n```"
-            },
-            {
-              "id": "swatches",
-              "title": "Swatches",
-              "body": "`swatches` 提供快捷色板。\n\n```vue preview src=\"./demos/Swatches.vue\"\n```"
-            },
-            {
-              "id": "props",
-              "title": "Props",
-              "body": "| 参数         | 类型                                                                                   | 默认值      | 说明                                      |\n| ------------ | -------------------------------------------------------------------------------------- | ----------- | ----------------------------------------- |\n| `modelValue` | `string`                                                                               | `'#000000'` | 十六进制颜色。                            |\n| `swatches`   | `string[]`                                                                             | —           | 快捷色板。                                |\n| `disabled`   | `boolean`                                                                              | `false`     | 禁用。                                    |\n| `id`         | `string`                                                                               | —           | 色板 input id。                           |\n| `invalid`    | `boolean`                                                                              | —           | —                                         |\n| `label`      | `string`                                                                               | —           | —                                         |\n| `size`       | [MSizeInput](/docs/types#MSizeInput)                                                   | —           | —                                         |\n| `pt`         | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }` | —           | DOM 透传，见 [样式与 attrs](/docs/attrs). |"
-            },
-            {
-              "id": "events",
-              "title": "Events",
-              "body": "| 事件名              | 参数     | 说明       |\n| ------------------- | -------- | ---------- |\n| `update:modelValue` | `string` | 颜色变化。 |"
-            },
-            {
-              "id": "功能边界",
-              "title": "功能边界",
-              "body": "选色实现是**原生色板 + hex 文本 + 可选 swatches**，不是完整的面板级取色体验。"
-            },
-            {
-              "id": "slots",
-              "title": "Slots",
-              "body": "| 插槽名    | 说明               |\n| --------- | ------------------ |\n| `trigger` | 自定义颜色触发器。 |"
-            }
-          ],
-          "markdown": "---\ntitle: InputColor\ncategory: 02 / FORM\ndescription: 颜色选择，支持色板与十六进制文本。\n---\n\n# InputColor\n\n通过原生色板与文本框编辑 hex 颜色。\n\n## 何时使用\n\n- 表单需要选择或输入十六进制颜色时。\n- 需要预设色块（`swatches`）即可，不需要完整独立取色面板。\n\n## 引入\n\n```ts\nimport { MInputColor } from \"morya-ui\";\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Swatches\n\n`swatches` 提供快捷色板。\n\n```vue preview src=\"./demos/Swatches.vue\"\n```\n\n## Props\n\n| 参数         | 类型                                                                                   | 默认值      | 说明                                      |\n| ------------ | -------------------------------------------------------------------------------------- | ----------- | ----------------------------------------- |\n| `modelValue` | `string`                                                                               | `'#000000'` | 十六进制颜色。                            |\n| `swatches`   | `string[]`                                                                             | —           | 快捷色板。                                |\n| `disabled`   | `boolean`                                                                              | `false`     | 禁用。                                    |\n| `id`         | `string`                                                                               | —           | 色板 input id。                           |\n| `invalid`    | `boolean`                                                                              | —           | —                                         |\n| `label`      | `string`                                                                               | —           | —                                         |\n| `size`       | [MSizeInput](/docs/types#MSizeInput)                                                   | —           | —                                         |\n| `pt`         | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }` | —           | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n## Events\n\n| 事件名              | 参数     | 说明       |\n| ------------------- | -------- | ---------- |\n| `update:modelValue` | `string` | 颜色变化。 |\n\n## 功能边界\n\n选色实现是**原生色板 + hex 文本 + 可选 swatches**，不是完整的面板级取色体验。\n\n## Slots\n\n| 插槽名    | 说明               |\n| --------- | ------------------ |\n| `trigger` | 自定义颜色触发器。 |\n"
-        },
-        "en-US": {
-          "title": "InputColor",
-          "description": "Color picker with a palette and hexadecimal text input.",
-          "sections": [
-            {
-              "id": "overview",
-              "title": "",
-              "body": "# InputColor\n\nEdit hex colors with the native color picker and a text field."
-            },
-            {
-              "id": "when-to-use",
-              "title": "When to use",
-              "body": "- Use when a form needs a hex color value.\n- Prefer this when native picker + optional `swatches` is enough; not a full standalone color panel."
-            },
-            {
-              "id": "import",
-              "title": "Import",
-              "body": "```ts\nimport { MInputColor } from \"morya-ui\";\n```"
-            },
-            {
-              "id": "basic",
-              "title": "Basic",
-              "body": "```vue preview src=\"./demos/Basic.vue\"\n```"
-            },
-            {
-              "id": "swatches",
-              "title": "Swatches",
-              "body": "`swatches` provides a row of preset colors.\n\n```vue preview src=\"./demos/Swatches.vue\"\n```"
-            },
-            {
-              "id": "props",
-              "title": "Props",
-              "body": "| Prop         | Type                                                                                   | Default     | Description                                       |\n| ------------ | -------------------------------------------------------------------------------------- | ----------- | ------------------------------------------------- |\n| `modelValue` | `string`                                                                               | `'#000000'` | Hexadecimal color.                                |\n| `swatches`   | `string[]`                                                                             | —           | Preset color chips.                               |\n| `disabled`   | `boolean`                                                                              | `false`     | Disabled.                                         |\n| `id`         | `string`                                                                               | —           | Color input id.                                   |\n| `pt`         | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }` | —           | Pass-through; see [Styling & attrs](/docs/attrs). |"
-            },
-            {
-              "id": "events",
-              "title": "Events",
-              "body": "| Event               | Prop     | Description    |\n| ------------------- | -------- | -------------- |\n| `update:modelValue` | `string` | Color changed. |"
-            },
-            {
-              "id": "boundaries",
-              "title": "Boundaries",
-              "body": "A **native picker + hex text + optional swatches**, not a full panel-level color experience."
-            },
-            {
-              "id": "slots",
-              "title": "Slots",
-              "body": "| Slot      | Description           |\n| --------- | --------------------- |\n| `trigger` | Custom color trigger. |"
-            }
-          ],
-          "markdown": "---\ntitle: InputColor\ncategory: 02 / FORM\ndescription: Color picker with a palette and hexadecimal text input.\n---\n\n# InputColor\n\nEdit hex colors with the native color picker and a text field.\n\n## When to use\n\n- Use when a form needs a hex color value.\n- Prefer this when native picker + optional `swatches` is enough; not a full standalone color panel.\n\n## Import\n\n```ts\nimport { MInputColor } from \"morya-ui\";\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Swatches\n\n`swatches` provides a row of preset colors.\n\n```vue preview src=\"./demos/Swatches.vue\"\n```\n\n## Props\n\n| Prop         | Type                                                                                   | Default     | Description                                       |\n| ------------ | -------------------------------------------------------------------------------------- | ----------- | ------------------------------------------------- |\n| `modelValue` | `string`                                                                               | `'#000000'` | Hexadecimal color.                                |\n| `swatches`   | `string[]`                                                                             | —           | Preset color chips.                               |\n| `disabled`   | `boolean`                                                                              | `false`     | Disabled.                                         |\n| `id`         | `string`                                                                               | —           | Color input id.                                   |\n| `pt`         | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }` | —           | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n## Events\n\n| Event               | Prop     | Description    |\n| ------------------- | -------- | -------------- |\n| `update:modelValue` | `string` | Color changed. |\n\n## Boundaries\n\nA **native picker + hex text + optional swatches**, not a full panel-level color experience.\n\n## Slots\n\n| Slot      | Description           |\n| --------- | --------------------- |\n| `trigger` | Custom color trigger. |\n"
-        }
-      }
-    },
     {
       "id": "InputGroup",
       "name": "InputGroup",
@@ -17783,7 +18367,7 @@
       "exportName": "MOrderList",
       "category": "03 / DATA",
       "description": "列表拖拽与上下按钮排序。",
-      "descriptionEn": "Reorder a list with drag-and-drop and up/down buttons.",
+      "descriptionEn": "Reorder a list with drag handles and up/down buttons.",
       "import": "import { MOrderList } from 'morya-ui'",
       "props": [
         {
@@ -17792,6 +18376,12 @@
           "default": "[]",
           "description": "列表数据。"
         },
+        {
+          "name": "selection",
+          "type": "number | null",
+          "default": "—",
+          "description": "受控选中下标，配合 `v-model:selection`。"
+        },
         {
           "name": "dataKey",
           "type": "string",
@@ -17810,15 +18400,21 @@
           "default": "true",
           "description": "是否启用拖拽。"
         },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "default": "false",
+          "description": "禁用全部交互（按钮、拖拽、选中）。"
+        },
         {
           "name": "emptyMessage",
           "type": "string",
           "default": "—",
-          "description": "—"
+          "description": "空态文案，默认取 locale `emptyMessage`。"
         },
         {
           "name": "pt",
-          "type": "[RootPassThrough](/docs/types#RootPassThrough) `{ root? }",
+          "type": "[OrderListPassThrough](/docs/types#OrderListPassThrough)",
           "default": "—",
           "description": "DOM 透传，见 [样式与 attrs](/docs/attrs)."
         }
@@ -17827,22 +18423,27 @@
         {
           "name": "update:modelValue",
           "payload": "unknown[]",
-          "description": "顺序变化。"
+          "description": "顺序变化后的新数组。"
+        },
+        {
+          "name": "update:selection",
+          "payload": "number | null",
+          "description": "选中下标变化。"
         },
         {
           "name": "reorder",
-          "payload": "unknown[]",
-          "description": "拖拽或按钮重排后。"
+          "payload": "{ item, from, to }",
+          "description": "单次移动的详情（移动项、原下标、新下标）。"
         }
       ],
       "slots": [
         {
           "name": "item",
-          "description": "`{ item, index }` 自定义项。"
+          "description": "`{ item, index, selected, dragging }` 自定义项。"
         },
         {
           "name": "empty",
-          "description": "自定义 `empty` 内容。"
+          "description": "自定义空态内容。"
         }
       ],
       "methods": [],
@@ -17865,6 +18466,24 @@
           "code": "<script setup lang=\"ts\">\nimport { MOrderList } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst items = ref(['设计', '开发', '测试', '发布'])\n</script>\n\n<template>\n  <MOrderList v-model=\"items\" />\n</template>",
           "locale": "zh-CN"
         },
+        {
+          "id": "禁用-1",
+          "section": "禁用",
+          "sectionId": "禁用",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MOrderList } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst items = ref(['设计', '开发', '测试', '发布'])\n</script>\n\n<template>\n  <MOrderList v-model=\"items\" disabled />\n</template>",
+          "locale": "zh-CN"
+        },
+        {
+          "id": "自定义项-1",
+          "section": "自定义项",
+          "sectionId": "自定义项",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MOrderList } from 'morya-ui'\nimport { ref } from 'vue'\n\ninterface Task {\n  id: number\n  title: string\n  tag: string\n}\n\nconst tasks = ref<Task[]>([\n  { id: 1, title: '需求评审', tag: '产品' },\n  { id: 2, title: '接口设计', tag: '后端' },\n  { id: 3, title: '页面开发', tag: '前端' },\n  { id: 4, title: '联调测试', tag: 'QA' },\n])\n</script>\n\n<template>\n  <MOrderList v-model=\"tasks\" data-key=\"id\">\n    <template #item=\"{ item, selected }\">\n      <span style=\"display:flex;justify-content:space-between;width:100%;gap:0.5rem\">\n        <span>{{ (item as Task).title }}</span>\n        <span\n          :style=\"{\n            fontSize: '0.75rem',\n            padding: '0 0.4rem',\n            borderRadius: '999px',\n            background: selected ? 'var(--m-color-primary)' : 'var(--m-color-border)',\n            color: selected ? 'var(--m-color-on-emphasis)' : 'var(--m-color-text-muted)',\n          }\"\n        >{{ (item as Task).tag }}</span>\n      </span>\n    </template>\n  </MOrderList>\n</template>",
+          "locale": "zh-CN"
+        },
         {
           "id": "import-1",
           "section": "Import",
@@ -17882,6 +18501,24 @@
           "preview": true,
           "code": "<script setup lang=\"ts\">\nimport { MOrderList } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst items = ref(['Design', 'Development', 'Testing', 'Release'])\n</script>\n\n<template>\n  <MOrderList v-model=\"items\" />\n</template>",
           "locale": "en-US"
+        },
+        {
+          "id": "disabled-1",
+          "section": "Disabled",
+          "sectionId": "disabled",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MOrderList } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst items = ref(['Design', 'Develop', 'Test', 'Release'])\n</script>\n\n<template>\n  <MOrderList v-model=\"items\" disabled />\n</template>",
+          "locale": "en-US"
+        },
+        {
+          "id": "custom-item-1",
+          "section": "Custom item",
+          "sectionId": "custom-item",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MOrderList } from 'morya-ui'\nimport { ref } from 'vue'\n\ninterface Task {\n  id: number\n  title: string\n  tag: string\n}\n\nconst tasks = ref<Task[]>([\n  { id: 1, title: 'Requirement review', tag: 'Product' },\n  { id: 2, title: 'API design', tag: 'Backend' },\n  { id: 3, title: 'Page development', tag: 'Frontend' },\n  { id: 4, title: 'Integration test', tag: 'QA' },\n])\n</script>\n\n<template>\n  <MOrderList v-model=\"tasks\" data-key=\"id\">\n    <template #item=\"{ item, selected }\">\n      <span style=\"display:flex;justify-content:space-between;width:100%;gap:0.5rem\">\n        <span>{{ (item as Task).title }}</span>\n        <span\n          :style=\"{\n            fontSize: '0.75rem',\n            padding: '0 0.4rem',\n            borderRadius: '999px',\n            background: selected ? 'var(--m-color-primary)' : 'var(--m-color-border)',\n            color: selected ? 'var(--m-color-on-emphasis)' : 'var(--m-color-text-muted)',\n          }\"\n        >{{ (item as Task).tag }}</span>\n      </span>\n    </template>\n  </MOrderList>\n</template>",
+          "locale": "en-US"
         }
       ],
       "locales": {
@@ -17892,7 +18529,7 @@
             {
               "id": "overview",
               "title": "",
-              "body": "# OrderList\n\n支持拖拽手柄重排（原生 HTML5 DnD，无外部拖拽库），并保留上下按钮作为键盘友好备选。"
+              "body": "# OrderList\n\n支持拖拽手柄重排（原生 HTML5 DnD，无外部拖拽库），并保留上下/置顶/置底按钮作为键盘友好备选。"
             },
             {
               "id": "引入",
@@ -17904,32 +18541,52 @@
               "title": "基础用法",
               "body": "```vue preview src=\"./demos/Basic.zh.vue\"\n```"
             },
+            {
+              "id": "禁用",
+              "title": "禁用",
+              "body": "```vue preview src=\"./demos/Disabled.zh.vue\"\n```"
+            },
+            {
+              "id": "自定义项",
+              "title": "自定义项",
+              "body": "通过 `#item` 插槽自定义渲染，作用域含 `{ item, index, selected, dragging }`。\n\n```vue preview src=\"./demos/CustomItem.zh.vue\"\n```"
+            },
+            {
+              "id": "键盘操作",
+              "title": "键盘操作",
+              "body": "| 按键 | 说明 |\n| --- | --- |\n| `↑` / `↓` | 移动选中项高亮。 |\n| `Ctrl/⌘ + ↑` / `Ctrl/⌘ + ↓` | 将选中项上移 / 下移一位。 |\n| `Ctrl/⌘ + Home` / `Ctrl/⌘ + End` | 将选中项置顶 / 置底。 |\n| `Home` / `End` | 高亮首项 / 末项。 |"
+            },
             {
               "id": "props",
               "title": "Props",
-              "body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `unknown[]` | `[]` | 列表数据。 |\n| `dataKey` | `string` | — | 对象项的唯一键。 |\n| `listStyle` | `string \\| object` | — | 列表样式。 |\n| `dragdrop` | `boolean` | `true` | 是否启用拖拽。 |\n| `emptyMessage` | `string` | — | — |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |"
+              "body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `unknown[]` | `[]` | 列表数据。 |\n| `selection` | `number \\| null` | — | 受控选中下标，配合 `v-model:selection`。 |\n| `dataKey` | `string` | — | 对象项的唯一键。 |\n| `listStyle` | `string \\| object` | — | 列表样式。 |\n| `dragdrop` | `boolean` | `true` | 是否启用拖拽。 |\n| `disabled` | `boolean` | `false` | 禁用全部交互（按钮、拖拽、选中）。 |\n| `emptyMessage` | `string` | — | 空态文案，默认取 locale `emptyMessage`。 |\n| `pt` | [OrderListPassThrough](/docs/types#OrderListPassThrough) | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |"
             },
             {
               "id": "slots",
               "title": "Slots",
-              "body": "| 插槽 | 说明 |\n| --- | --- |\n| `item` | `{ item, index }` 自定义项。 |\n| `empty` | 自定义 `empty` 内容。 |"
+              "body": "| 插槽 | 说明 |\n| --- | --- |\n| `item` | `{ item, index, selected, dragging }` 自定义项。 |\n| `empty` | 自定义空态内容。 |"
             },
             {
               "id": "events",
               "title": "Events",
-              "body": "| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `update:modelValue` | `unknown[]` | 顺序变化。 |\n| `reorder` | `unknown[]` | 拖拽或按钮重排后。 |"
+              "body": "| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `update:modelValue` | `unknown[]` | 顺序变化后的新数组。 |\n| `update:selection` | `number \\| null` | 选中下标变化。 |\n| `reorder` | `{ item, from, to }` | 单次移动的详情（移动项、原下标、新下标）。 |"
+            },
+            {
+              "id": "无障碍",
+              "title": "无障碍",
+              "body": "- 列表为 `role=\"listbox\"`，项为 `role=\"option\"`，选中项同步 `aria-selected`。\n- 拖拽仅在手柄 `pointerdown` 后启动，避免误触；键盘可完整完成所有排序操作。\n- `disabled` 时列表标记 `aria-disabled`，项不可聚焦、不可拖拽。"
             }
           ],
-          "markdown": "---\ntitle: OrderList\ncategory: 03 / DATA\ndescription: 列表拖拽与上下按钮排序。\n---\n\n# OrderList\n\n支持拖拽手柄重排（原生 HTML5 DnD，无外部拖拽库），并保留上下按钮作为键盘友好备选。\n\n## 引入\n\n```ts\nimport { MOrderList } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.zh.vue\"\n```\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `unknown[]` | `[]` | 列表数据。 |\n| `dataKey` | `string` | — | 对象项的唯一键。 |\n| `listStyle` | `string \\| object` | — | 列表样式。 |\n| `dragdrop` | `boolean` | `true` | 是否启用拖拽。 |\n| `emptyMessage` | `string` | — | — |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n\n## Slots\n\n| 插槽 | 说明 |\n| --- | --- |\n| `item` | `{ item, index }` 自定义项。 |\n| `empty` | 自定义 `empty` 内容。 |\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `update:modelValue` | `unknown[]` | 顺序变化。 |\n| `reorder` | `unknown[]` | 拖拽或按钮重排后。 |\n"
+          "markdown": "---\ntitle: OrderList\ncategory: 03 / DATA\ndescription: 列表拖拽与上下按钮排序。\n---\n\n# OrderList\n\n支持拖拽手柄重排（原生 HTML5 DnD，无外部拖拽库），并保留上下/置顶/置底按钮作为键盘友好备选。\n\n## 引入\n\n```ts\nimport { MOrderList } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.zh.vue\"\n```\n\n## 禁用\n\n```vue preview src=\"./demos/Disabled.zh.vue\"\n```\n\n## 自定义项\n\n通过 `#item` 插槽自定义渲染，作用域含 `{ item, index, selected, dragging }`。\n\n```vue preview src=\"./demos/CustomItem.zh.vue\"\n```\n\n## 键盘操作\n\n| 按键 | 说明 |\n| --- | --- |\n| `↑` / `↓` | 移动选中项高亮。 |\n| `Ctrl/⌘ + ↑` / `Ctrl/⌘ + ↓` | 将选中项上移 / 下移一位。 |\n| `Ctrl/⌘ + Home` / `Ctrl/⌘ + End` | 将选中项置顶 / 置底。 |\n| `Home` / `End` | 高亮首项 / 末项。 |\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `unknown[]` | `[]` | 列表数据。 |\n| `selection` | `number \\| null` | — | 受控选中下标，配合 `v-model:selection`。 |\n| `dataKey` | `string` | — | 对象项的唯一键。 |\n| `listStyle` | `string \\| object` | — | 列表样式。 |\n| `dragdrop` | `boolean` | `true` | 是否启用拖拽。 |\n| `disabled` | `boolean` | `false` | 禁用全部交互（按钮、拖拽、选中）。 |\n| `emptyMessage` | `string` | — | 空态文案，默认取 locale `emptyMessage`。 |\n| `pt` | [OrderListPassThrough](/docs/types#OrderListPassThrough) | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n## Slots\n\n| 插槽 | 说明 |\n| --- | --- |\n| `item` | `{ item, index, selected, dragging }` 自定义项。 |\n| `empty` | 自定义空态内容。 |\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `update:modelValue` | `unknown[]` | 顺序变化后的新数组。 |\n| `update:selection` | `number \\| null` | 选中下标变化。 |\n| `reorder` | `{ item, from, to }` | 单次移动的详情（移动项、原下标、新下标）。 |\n\n## 无障碍\n\n- 列表为 `role=\"listbox\"`，项为 `role=\"option\"`，选中项同步 `aria-selected`。\n- 拖拽仅在手柄 `pointerdown` 后启动，避免误触；键盘可完整完成所有排序操作。\n- `disabled` 时列表标记 `aria-disabled`，项不可聚焦、不可拖拽。\n"
         },
         "en-US": {
           "title": "OrderList",
-          "description": "Reorder a list with drag-and-drop and up/down buttons.",
+          "description": "Reorder a list with drag handles and up/down buttons.",
           "sections": [
             {
               "id": "overview",
               "title": "",
-              "body": "# OrderList\n\nReorder with a drag handle (native HTML5 DnD, no external library). Up and down buttons remain as a keyboard-friendly fallback."
+              "body": "# OrderList\n\nReorder items with drag handles (native HTML5 DnD, no external library), with up/down and top/bottom buttons as a keyboard-friendly alternative."
             },
             {
               "id": "import",
@@ -17941,23 +18598,43 @@
               "title": "Basic",
               "body": "```vue preview src=\"./demos/Basic.en.vue\"\n```"
             },
+            {
+              "id": "disabled",
+              "title": "Disabled",
+              "body": "```vue preview src=\"./demos/Disabled.en.vue\"\n```"
+            },
+            {
+              "id": "custom-item",
+              "title": "Custom item",
+              "body": "Customize rendering via the `#item` slot with scope `{ item, index, selected, dragging }`.\n\n```vue preview src=\"./demos/CustomItem.en.vue\"\n```"
+            },
+            {
+              "id": "keyboard",
+              "title": "Keyboard",
+              "body": "| Key | Action |\n| --- | --- |\n| `↑` / `↓` | Move the selection highlight. |\n| `Ctrl/⌘ + ↑` / `Ctrl/⌘ + ↓` | Move the selected item up / down one step. |\n| `Ctrl/⌘ + Home` / `Ctrl/⌘ + End` | Move the selected item to top / bottom. |\n| `Home` / `End` | Highlight the first / last item. |"
+            },
             {
               "id": "props",
               "title": "Props",
-              "body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `unknown[]` | `[]` | List data. |\n| `dataKey` | `string` | — | Unique key for object items. |\n| `listStyle` | `string \\| object` | — | List styles. |\n| `dragdrop` | `boolean` | `true` | Whether to enable drag-and-drop. |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |"
+              "body": "| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `unknown[]` | `[]` | List data. |\n| `selection` | `number \\| null` | — | Controlled selected index, with `v-model:selection`. |\n| `dataKey` | `string` | — | Unique key for object items. |\n| `listStyle` | `string \\| object` | — | List style. |\n| `dragdrop` | `boolean` | `true` | Enable drag-and-drop reorder. |\n| `disabled` | `boolean` | `false` | Disable all interactions (buttons, drag, selection). |\n| `emptyMessage` | `string` | — | Empty state message; defaults to locale `emptyMessage`. |\n| `pt` | [OrderListPassThrough](/docs/types#OrderListPassThrough) | — | DOM pass-through; see [Styling & attrs](/docs/attrs). |"
             },
             {
               "id": "slots",
               "title": "Slots",
-              "body": "| Slot | Description |\n| --- | --- |\n| `item` | `{ item, index }` custom item. |"
+              "body": "| Slot | Description |\n| --- | --- |\n| `item` | `{ item, index, selected, dragging }` custom item. |\n| `empty` | Custom empty content. |"
             },
             {
               "id": "events",
               "title": "Events",
-              "body": "| Event | Prop | Description |\n| --- | --- | --- |\n| `update:modelValue` | `unknown[]` | Emitted when the order changes. |\n| `reorder` | `unknown[]` | Emitted after a drag or button reorder. |"
+              "body": "| Event | Payload | Description |\n| --- | --- | --- |\n| `update:modelValue` | `unknown[]` | New order after reorder. |\n| `update:selection` | `number \\| null` | Selected index change. |\n| `reorder` | `{ item, from, to }` | Detail of a single move (item, original index, new index). |"
+            },
+            {
+              "id": "accessibility",
+              "title": "Accessibility",
+              "body": "- The list is `role=\"listbox\"` and items are `role=\"option\"` with `aria-selected`.\n- Dragging only starts after the handle is pressed, avoiding accidental drags; every reorder is fully keyboard-operable.\n- When `disabled`, the list is marked `aria-disabled`; items are not focusable or draggable."
             }
           ],
-          "markdown": "---\ntitle: OrderList\ncategory: 03 / DATA\ndescription: Reorder a list with drag-and-drop and up/down buttons.\n---\n\n# OrderList\n\nReorder with a drag handle (native HTML5 DnD, no external library). Up and down buttons remain as a keyboard-friendly fallback.\n\n## Import\n\n```ts\nimport { MOrderList } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.en.vue\"\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `unknown[]` | `[]` | List data. |\n| `dataKey` | `string` | — | Unique key for object items. |\n| `listStyle` | `string \\| object` | — | List styles. |\n| `dragdrop` | `boolean` | `true` | Whether to enable drag-and-drop. |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `item` | `{ item, index }` custom item. |\n\n## Events\n\n| Event | Prop | Description |\n| --- | --- | --- |\n| `update:modelValue` | `unknown[]` | Emitted when the order changes. |\n| `reorder` | `unknown[]` | Emitted after a drag or button reorder. |\n"
+          "markdown": "---\ntitle: OrderList\ncategory: 03 / DATA\ndescription: Reorder a list with drag handles and up/down buttons.\n---\n\n# OrderList\n\nReorder items with drag handles (native HTML5 DnD, no external library), with up/down and top/bottom buttons as a keyboard-friendly alternative.\n\n## Import\n\n```ts\nimport { MOrderList } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.en.vue\"\n```\n\n## Disabled\n\n```vue preview src=\"./demos/Disabled.en.vue\"\n```\n\n## Custom item\n\nCustomize rendering via the `#item` slot with scope `{ item, index, selected, dragging }`.\n\n```vue preview src=\"./demos/CustomItem.en.vue\"\n```\n\n## Keyboard\n\n| Key | Action |\n| --- | --- |\n| `↑` / `↓` | Move the selection highlight. |\n| `Ctrl/⌘ + ↑` / `Ctrl/⌘ + ↓` | Move the selected item up / down one step. |\n| `Ctrl/⌘ + Home` / `Ctrl/⌘ + End` | Move the selected item to top / bottom. |\n| `Home` / `End` | Highlight the first / last item. |\n\n## Props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `unknown[]` | `[]` | List data. |\n| `selection` | `number \\| null` | — | Controlled selected index, with `v-model:selection`. |\n| `dataKey` | `string` | — | Unique key for object items. |\n| `listStyle` | `string \\| object` | — | List style. |\n| `dragdrop` | `boolean` | `true` | Enable drag-and-drop reorder. |\n| `disabled` | `boolean` | `false` | Disable all interactions (buttons, drag, selection). |\n| `emptyMessage` | `string` | — | Empty state message; defaults to locale `emptyMessage`. |\n| `pt` | [OrderListPassThrough](/docs/types#OrderListPassThrough) | — | DOM pass-through; see [Styling & attrs](/docs/attrs). |\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `item` | `{ item, index, selected, dragging }` custom item. |\n| `empty` | Custom empty content. |\n\n## Events\n\n| Event | Payload | Description |\n| --- | --- | --- |\n| `update:modelValue` | `unknown[]` | New order after reorder. |\n| `update:selection` | `number \\| null` | Selected index change. |\n| `reorder` | `{ item, from, to }` | Detail of a single move (item, original index, new index). |\n\n## Accessibility\n\n- The list is `role=\"listbox\"` and items are `role=\"option\"` with `aria-selected`.\n- Dragging only starts after the handle is pressed, avoiding accidental drags; every reorder is fully keyboard-operable.\n- When `disabled`, the list is marked `aria-disabled`; items are not focusable or draggable.\n"
         }
       }
     },
@@ -25743,8 +26420,8 @@
       "name": "Table",
       "exportName": "MTable",
       "category": "03 / DATA",
-      "description": "数据表格。支持排序、筛选、选择、分页、固定列与空/加载态。列宽支持 width / minWidth / fit。",
-      "descriptionEn": "Data table with sorting, filtering, selection, pagination, frozen columns, and empty/loading states. Column width supports width / minWidth / fit.",
+      "description": "数据表格。支持排序、筛选、选择、分页、固定列、列拖拽、列设置、骨架屏与虚拟滚动。列宽支持 width / minWidth / fit。",
+      "descriptionEn": "Data table with sorting, filtering, selection, pagination, fixed columns, column drag, column settings, skeleton loading and virtual scrolling. Column widths support width / minWidth / fit.",
       "import": "import { MTable } from 'morya-ui'",
       "props": [
         {
@@ -25855,6 +26532,18 @@
           "default": "40",
           "description": "虚拟行高估算。"
         },
+        {
+          "name": "virtualDynamicRowHeight",
+          "type": "boolean",
+          "default": "false",
+          "description": "动态行高虚拟滚动（实测行高缓存，配合 `ResizeObserver`）。"
+        },
+        {
+          "name": "virtualOverscan",
+          "type": "number",
+          "default": "4",
+          "description": "虚拟滚动上下额外渲染的行数，减少白屏闪烁。"
+        },
         {
           "name": "hiddenColumns",
           "type": "string[] | null",
@@ -25867,6 +26556,30 @@
           "default": "null",
           "description": "叶列顺序（`v-model:column-order`）。"
         },
+        {
+          "name": "columnSetting",
+          "type": "boolean",
+          "default": "false",
+          "description": "显示列设置按钮（显示/隐藏列）。"
+        },
+        {
+          "name": "columnDrag",
+          "type": "boolean",
+          "default": "false",
+          "description": "表头拖拽排序。"
+        },
+        {
+          "name": "skeleton",
+          "type": "boolean",
+          "default": "false",
+          "description": "骨架屏加载态。"
+        },
+        {
+          "name": "skeletonRows",
+          "type": "number",
+          "default": "5",
+          "description": "骨架屏行数。"
+        },
         {
           "name": "showFooter",
           "type": "boolean",
@@ -25939,23 +26652,41 @@
           "default": "true",
           "description": "行 hover 高亮。"
         },
+        {
+          "name": "sortConfig",
+          "type": "TableSortConfig | null",
+          "default": "null",
+          "description": "统一排序配置 `{ field, order, multiple, must, mode }`。"
+        },
         {
           "name": "sortField",
-          "type": "—",
-          "default": "—",
-          "description": "受控排序字段与方向。"
+          "type": "string | null",
+          "default": "null",
+          "description": "（兼容）单字段排序。建议用 `sortConfig`。"
         },
         {
           "name": "sortOrder",
-          "type": "—",
-          "default": "—",
-          "description": "受控排序字段与方向。"
+          "type": "'asc' | 'desc' | null",
+          "default": "null",
+          "description": "（兼容）单字段排序方向。建议用 `sortConfig`。"
+        },
+        {
+          "name": "multiSort",
+          "type": "boolean",
+          "default": "false",
+          "description": "（兼容）多列排序。建议用 `sortConfig.multiple`。"
+        },
+        {
+          "name": "mustSort",
+          "type": "boolean",
+          "default": "false",
+          "description": "（兼容）禁止取消排序。建议用 `sortConfig.must`。"
         },
         {
           "name": "sortMode",
           "type": "'client' | 'emit'",
           "default": "'client'",
-          "description": "客户端排序或仅抛出排序事件。"
+          "description": "（兼容）排序模式。建议用 `sortConfig.mode`。"
         },
         {
           "name": "searchField",
@@ -25975,6 +26706,18 @@
           "default": "null",
           "description": "结构化筛选条件。"
         },
+        {
+          "name": "filterModel",
+          "type": "Record<string, unknown> | null",
+          "default": "null",
+          "description": "列筛选 v-model（与 `update:filter-model` 配合）。"
+        },
+        {
+          "name": "filters",
+          "type": "Record<string, unknown> | null",
+          "default": "null",
+          "description": "（兼容）旧筛选 v-model 名。"
+        },
         {
           "name": "loading",
           "type": "boolean",
@@ -26077,12 +26820,6 @@
           "default": "—",
           "description": "—"
         },
-        {
-          "name": "filters",
-          "type": "Record<string, unknown> | null",
-          "default": "—",
-          "description": "—"
-        },
         {
           "name": "fixedCheckbox",
           "type": "boolean",
@@ -26131,18 +26868,6 @@
           "default": "—",
           "description": "—"
         },
-        {
-          "name": "multiSort",
-          "type": "boolean",
-          "default": "—",
-          "description": "—"
-        },
-        {
-          "name": "mustSort",
-          "type": "boolean",
-          "default": "—",
-          "description": "—"
-        },
         {
           "name": "showIndex",
           "type": "boolean",
@@ -26175,17 +26900,27 @@
         },
         {
           "name": "pt",
-          "type": "[RootPassThrough](/docs/types#RootPassThrough) `{ root? }",
+          "type": "TablePassThrough",
           "default": "—",
-          "description": "DOM 透传，见 [样式与 attrs](/docs/attrs)."
+          "description": "多部分 DOM 透传：`{ root, scrollbar, thead, tbody, tfoot, pagination, emptyMessage }`。"
         }
       ],
       "events": [
         {
-          "name": "sort",
+          "name": "sort-change",
           "payload": "{ sortField?, sortOrder? }",
           "description": "排序变化。"
         },
+        {
+          "name": "filter-change",
+          "payload": "Record<string, unknown> | null",
+          "description": "列筛选提交（与 `update:filter-model` 同步）。"
+        },
+        {
+          "name": "expand-change",
+          "payload": "{ row, expanded }",
+          "description": "行展开状态变化（详情展开或树节点展开）。"
+        },
         {
           "name": "row-click",
           "payload": "{ row, index }`, `Event",
@@ -26221,11 +26956,6 @@
           "payload": "row | null, oldRow | null",
           "description": "当前高亮行变化。"
         },
-        {
-          "name": "expand",
-          "payload": "{ row, expanded }",
-          "description": "行展开。"
-        },
         {
           "name": "update:selection",
           "payload": "TableItem[]",
@@ -26247,39 +26977,34 @@
           "description": "当前行键 v-model。"
         },
         {
-          "name": "filter",
-          "payload": "—",
-          "description": "—"
-        },
-        {
-          "name": "update:expandedRowKeys",
-          "payload": "—",
-          "description": "—"
+          "name": "update:expanded-row-keys",
+          "payload": "Array<string | number>",
+          "description": "树/详情展开键 v-model。"
         },
         {
-          "name": "update:filters",
-          "payload": "—",
-          "description": "—"
+          "name": "update:filter-model",
+          "payload": "Record<string, unknown> | null",
+          "description": "列筛选 v-model。"
         },
         {
-          "name": "update:columnWidths",
+          "name": "update:column-widths",
           "payload": "Record<string, number>",
           "description": "列宽 v-model。"
         },
         {
-          "name": "update:hiddenColumns",
+          "name": "update:hidden-columns",
           "payload": "string[]",
           "description": "隐藏列 v-model。"
         },
         {
-          "name": "update:columnOrder",
+          "name": "update:column-order",
           "payload": "string[]",
           "description": "列顺序 v-model。"
         },
         {
-          "name": "update:selectedItem",
-          "payload": "—",
-          "description": "—"
+          "name": "update:selected-item",
+          "payload": "TableItem | null",
+          "description": "单选 v-model。"
         }
       ],
       "slots": [
@@ -26305,7 +27030,7 @@
         },
         {
           "name": "loading",
-          "description": "自定义加载态。"
+          "description": "自定义加载态（`skeleton` 为 true 时不生效）。"
         },
         {
           "name": "pagination",
@@ -26501,7 +27226,7 @@
           "sectionId": "引入",
           "lang": "ts",
           "preview": false,
-          "code": "import type { TableColumnDefinition, TableItem } from 'morya-ui'\nimport { MTable, MTag } from 'morya-ui'",
+          "code": "import type { TableColumnDefinition, TableItem, TableSortConfig, TablePassThrough } from 'morya-ui'\nimport { MTable, MTag } from 'morya-ui'",
           "locale": "zh-CN"
         },
         {
@@ -26549,6 +27274,15 @@
           "code": "<script setup lang=\"ts\">\nimport type { TableItem } from 'morya-ui'\nimport { MTable } from 'morya-ui'\n\ntype Row = { id: number; name: string; role: string; extra: string }\n\nconst columns = [\n  { key: 'name', label: '姓名' },\n  { key: 'role', label: '角色' },\n]\nconst rows: Row[] = [{ id: 1, name: 'Ada', role: '设计师', extra: '设计系统细节' }]\n\nfunction extraOf(row: TableItem) {\n  return (row as Row).extra\n}\n</script>\n\n<template>\n  <MTable :columns=\"columns\" :rows=\"rows\" expandable bordered :paginator=\"false\">\n    <template #expansion=\"{ row }\">\n      {{ extraOf(row) }}\n    </template>\n  </MTable>\n</template>",
           "locale": "zh-CN"
         },
+        {
+          "id": "排序-sortconfig-1",
+          "section": "排序（sortConfig）",
+          "sectionId": "排序-sortconfig",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport type { TableSortConfig } from 'morya-ui'\nimport { MTable } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst columns = [\n  { key: 'name', label: '项目', minWidth: 160, sortable: true },\n  { key: 'owner', label: '负责人', minWidth: 100, sortable: true },\n  { key: 'progress', label: '进度', width: 110, align: 'end' as const, sortable: true },\n]\n\nconst rows = [\n  { id: 1, name: 'Landing Redesign', owner: 'Ada', progress: 100 },\n  { id: 2, name: 'Dashboard v2', owner: 'Lin', progress: 62 },\n  { id: 3, name: 'Auth Gateway', owner: 'Kai', progress: 88 },\n  { id: 4, name: 'Billing Migration', owner: 'Ada', progress: 24 },\n]\n\nconst sortConfig = ref<TableSortConfig>({\n  field: 'progress',\n  order: 'desc',\n  mode: 'client',\n})\n</script>\n\n<template>\n  <MTable :columns=\"columns\" :rows=\"rows\" :sort-config=\"sortConfig\" bordered striped />\n</template>",
+          "locale": "zh-CN"
+        },
         {
           "id": "列宽拖拽与表头筛选-1",
           "section": "列宽拖拽与表头筛选",
@@ -26558,6 +27292,33 @@
           "code": "<script setup lang=\"ts\">\nimport type { TableColumnDefinition } from 'morya-ui'\nimport { MTable } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst columns: TableColumnDefinition[] = [\n  {\n    key: 'name',\n    label: '姓名',\n    width: 140,\n    resizable: true,\n    filterable: true,\n  },\n  {\n    key: 'status',\n    label: '状态',\n    width: 120,\n    resizable: true,\n    filterable: true,\n    filters: [\n      { label: '草稿', value: 'Draft' },\n      { label: '上线', value: 'Live' },\n    ],\n  },\n  { key: 'role', label: '角色', minWidth: 120 },\n]\n\nconst rows = [\n  { id: 1, name: 'Ada', status: 'Draft', role: 'Designer' },\n  { id: 2, name: 'Lin', status: 'Live', role: 'Engineer' },\n  { id: 3, name: 'Kai', status: 'Live', role: 'Engineer' },\n  { id: 4, name: 'Mia', status: 'Draft', role: 'Designer' },\n]\n\nconst columnWidths = ref<Record<string, number>>({})\n</script>\n\n<template>\n  <MTable\n    v-model:column-widths=\"columnWidths\"\n    :columns=\"columns\"\n    :rows=\"rows\"\n    bordered\n    :paginator=\"false\"\n  />\n</template>",
           "locale": "zh-CN"
         },
+        {
+          "id": "列设置面板-1",
+          "section": "列设置面板",
+          "sectionId": "列设置面板",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MTable, MTag } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst columns = [\n  { key: 'name', label: '项目', minWidth: 140 },\n  { key: 'status', label: '状态', width: 120 },\n  { key: 'owner', label: '负责人', minWidth: 100 },\n  { key: 'team', label: '团队', minWidth: 120 },\n  { key: 'progress', label: '进度', width: 100, align: 'end' as const },\n]\n\nconst rows = [\n  { id: 1, name: 'Landing Redesign', status: 'Published', owner: 'Ada', team: 'Design', progress: '100%' },\n  { id: 2, name: 'Dashboard v2', status: 'Draft', owner: 'Lin', team: 'Frontend', progress: '62%' },\n  { id: 3, name: 'Auth Gateway', status: 'Review', owner: 'Kai', team: 'Backend', progress: '88%' },\n]\n\nconst hiddenColumns = ref<string[]>([])\n</script>\n\n<template>\n  <MTable\n    v-model:hidden-columns=\"hiddenColumns\"\n    :columns=\"columns\"\n    :rows=\"rows\"\n    column-setting\n    bordered\n    striped\n  >\n    <template #cell-status=\"{ value }\">\n      <MTag\n        :value=\"String(value)\"\n        :type=\"value === 'Published' ? 'success' : value === 'Review' ? 'warning' : 'secondary'\"\n      />\n    </template>\n  </MTable>\n</template>",
+          "locale": "zh-CN"
+        },
+        {
+          "id": "列拖拽排序-1",
+          "section": "列拖拽排序",
+          "sectionId": "列拖拽排序",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MTable, MTag } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst columns = [\n  { key: 'name', label: '项目', minWidth: 140 },\n  { key: 'status', label: '状态', width: 120 },\n  { key: 'owner', label: '负责人', minWidth: 100 },\n  { key: 'team', label: '团队', minWidth: 120 },\n  { key: 'progress', label: '进度', width: 100, align: 'end' as const },\n]\n\nconst rows = [\n  { id: 1, name: 'Landing Redesign', status: 'Published', owner: 'Ada', team: 'Design', progress: '100%' },\n  { id: 2, name: 'Dashboard v2', status: 'Draft', owner: 'Lin', team: 'Frontend', progress: '62%' },\n  { id: 3, name: 'Auth Gateway', status: 'Review', owner: 'Kai', team: 'Backend', progress: '88%' },\n]\n\nconst columnOrder = ref<string[]>([])\n</script>\n\n<template>\n  <MTable\n    v-model:column-order=\"columnOrder\"\n    :columns=\"columns\"\n    :rows=\"rows\"\n    column-drag\n    bordered\n    striped\n  >\n    <template #cell-status=\"{ value }\">\n      <MTag\n        :value=\"String(value)\"\n        :type=\"value === 'Published' ? 'success' : value === 'Review' ? 'warning' : 'secondary'\"\n      />\n    </template>\n  </MTable>\n</template>",
+          "locale": "zh-CN"
+        },
+        {
+          "id": "骨架屏加载-1",
+          "section": "骨架屏加载",
+          "sectionId": "骨架屏加载",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MButton, MTable } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst columns = [\n  { key: 'name', label: '项目', minWidth: 160 },\n  { key: 'owner', label: '负责人', minWidth: 100 },\n  { key: 'team', label: '团队', minWidth: 120 },\n  { key: 'progress', label: '进度', width: 100, align: 'end' as const },\n]\n\nconst allRows = [\n  { id: 1, name: 'Landing Redesign', owner: 'Ada', team: 'Design', progress: '100%' },\n  { id: 2, name: 'Dashboard v2', owner: 'Lin', team: 'Frontend', progress: '62%' },\n  { id: 3, name: 'Auth Gateway', owner: 'Kai', team: 'Backend', progress: '88%' },\n]\n\nconst rows = ref<typeof allRows>([])\nconst loading = ref(true)\n\nfunction reload() {\n  loading.value = true\n  rows.value = []\n  window.setTimeout(() => {\n    rows.value = allRows\n    loading.value = false\n  }, 1500)\n}\n\nreload()\n</script>\n\n<template>\n  <div style=\"display: grid; gap: 12px\">\n    <div>\n      <MButton size=\"small\" @click=\"reload\">重新加载</MButton>\n    </div>\n    <MTable\n      :columns=\"columns\"\n      :rows=\"rows\"\n      :loading=\"loading\"\n      :skeleton=\"loading\"\n      :skeleton-rows=\"4\"\n      bordered\n      striped\n    />\n  </div>\n</template>",
+          "locale": "zh-CN"
+        },
         {
           "id": "虚拟滚动-1",
           "section": "虚拟滚动",
@@ -26567,6 +27328,15 @@
           "code": "<script setup lang=\"ts\">\nimport { MTable } from 'morya-ui'\n\nconst columns = [\n  { key: 'id', label: 'ID', width: 80 },\n  { key: 'name', label: '姓名', minWidth: 160 },\n]\n\nconst rows = Array.from({ length: 5000 }, (_, i) => ({\n  id: i + 1,\n  name: `行 ${i + 1}`,\n}))\n</script>\n\n<template>\n  <MTable\n    :columns=\"columns\"\n    :rows=\"rows\"\n    virtual\n    :virtual-row-height=\"40\"\n    :max-height=\"320\"\n    bordered\n    :paginator=\"false\"\n  />\n</template>",
           "locale": "zh-CN"
         },
+        {
+          "id": "动态行高虚拟滚动-1",
+          "section": "动态行高虚拟滚动",
+          "sectionId": "动态行高虚拟滚动",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MTable } from 'morya-ui'\n\nconst columns = [\n  { key: 'id', label: 'ID', width: 80 },\n  { key: 'title', label: '标题', minWidth: 200 },\n  { key: 'summary', label: '摘要', minWidth: 320 },\n]\n\n// 模拟内容长度不一的行：摘要字段长短不同 → 行高不同\nconst rows = Array.from({ length: 2000 }, (_, i) => ({\n  id: i + 1,\n  title: `任务 ${i + 1}`,\n  summary: i % 7 === 0\n    ? `这是一段比较长的摘要，用来演示动态行高。`.repeat((i % 5) + 2)\n    : `简短摘要 ${i + 1}`,\n}))\n</script>\n\n<template>\n  <MTable\n    :columns=\"columns\"\n    :rows=\"rows\"\n    virtual\n    virtual-dynamic-row-height\n    :virtual-row-height=\"44\"\n    :max-height=\"360\"\n    bordered\n    :paginator=\"false\"\n  />\n</template>",
+          "locale": "zh-CN"
+        },
         {
           "id": "多级表头-表尾与合并-1",
           "section": "多级表头、表尾与合并",
@@ -26618,7 +27388,7 @@
           "sectionId": "类型",
           "lang": "ts",
           "preview": false,
-          "code": "type TableTextDirection = 'left' | 'center' | 'right'",
+          "code": "interface TableSortConfig {\n  field?: string | null\n  order?: 'asc' | 'desc' | null\n  multiple?: boolean\n  must?: boolean\n  mode?: 'client' | 'emit'\n}",
           "locale": "zh-CN"
         },
         {
@@ -26627,7 +27397,7 @@
           "sectionId": "类型",
           "lang": "ts",
           "preview": false,
-          "code": "type TableFilterOption = | { field: string; comparison: 'between'; criteria: [number, number] }\n  | { field: string; comparison: '=' | '!='; criteria: number | string }\n  | { field: string; comparison: '>' | '>=' | '<' | '<='; criteria: number }\n  | { field: number | string; comparison: 'in'; criteria: number[] | string[] }\n  | { field: string; comparison: (value: unknown, criteria: string) => boolean; criteria: string }",
+          "code": "interface TablePassThrough {\n  root?: Record<string, unknown>\n  scrollbar?: Record<string, unknown>\n  thead?: Record<string, unknown>\n  tbody?: Record<string, unknown>\n  tfoot?: Record<string, unknown>\n  pagination?: Record<string, unknown>\n  emptyMessage?: Record<string, unknown>\n}",
           "locale": "zh-CN"
         },
         {
@@ -26636,7 +27406,7 @@
           "sectionId": "类型",
           "lang": "ts",
           "preview": false,
-          "code": "type TableHeaderItemClassName = string | ((header: TableHeader, columnNumber: number) => string)",
+          "code": "type TableTextDirection = 'left' | 'center' | 'right'",
           "locale": "zh-CN"
         },
         {
@@ -26645,7 +27415,7 @@
           "sectionId": "类型",
           "lang": "ts",
           "preview": false,
-          "code": "type TableBodyRowClassName = string | ((item: TableItem, rowNumber: number) => string)",
+          "code": "type TableFilterOption =\n  | { field: string; comparison: 'between'; criteria: [number, number] }\n  | { field: string; comparison: '=' | '!='; criteria: number | string }\n  | { field: string; comparison: '>' | '>=' | '<' | '<='; criteria: number }\n  | { field: number | string; comparison: 'in'; criteria: number[] | string[] }\n  | { field: string; comparison: (value: unknown, criteria: string) => boolean; criteria: string }",
           "locale": "zh-CN"
         },
         {
@@ -26654,7 +27424,7 @@
           "sectionId": "类型",
           "lang": "ts",
           "preview": false,
-          "code": "type TableBodyItemClassName = string | ((column: string, rowNumber: number) => string)",
+          "code": "type TableHeaderItemClassName = string | ((header: TableHeader, columnNumber: number) => string)",
           "locale": "zh-CN"
         },
         {
@@ -26663,7 +27433,7 @@
           "sectionId": "类型",
           "lang": "ts",
           "preview": false,
-          "code": "interface TableTreeConfig {\n  childrenField?: string // default 'children'\n  indent?: number // default 16\n  expandAll?: boolean\n  accordion?: boolean\n  trigger?: 'default' | 'row'\n  lazy?: boolean\n  hasChildField?: string // default 'hasChild'\n  loadMethod?: (row: TableItem) => Promise<TableItem[]> | TableItem[]\n  transform?: boolean // flat parentId → tree\n  rowField?: string\n  parentField?: string // default 'parentId'\n  treeNode?: string // column key for toggler; default first column\n  showLine?: boolean\n}",
+          "code": "type TableBodyRowClassName = string | ((item: TableItem, rowNumber: number) => string)",
           "locale": "zh-CN"
         },
         {
@@ -26672,7 +27442,7 @@
           "sectionId": "类型",
           "lang": "ts",
           "preview": false,
-          "code": "interface TableColumnDefinition {\n  key: string\n  label: string\n  width?: number\n  minWidth?: number\n  sortable?: boolean\n  fixed?: boolean | 'left' | 'right'\n  align?: 'start' | 'center' | 'end'\n  render?: (row: TableItem) => unknown\n  showOverflowTooltip?: boolean\n}",
+          "code": "type TableBodyItemClassName = string | ((column: string, rowNumber: number) => string)",
           "locale": "zh-CN"
         },
         {
@@ -26681,6 +27451,24 @@
           "sectionId": "类型",
           "lang": "ts",
           "preview": false,
+          "code": "interface TableTreeConfig {\n  childrenField?: string // default 'children'\n  indent?: number // default 16\n  expandAll?: boolean\n  accordion?: boolean\n  trigger?: 'default' | 'row'\n  lazy?: boolean\n  hasChildField?: string // default 'hasChild'\n  loadMethod?: (row: TableItem) => Promise<TableItem[]> | TableItem[]\n  transform?: boolean // flat parentId → tree\n  rowField?: string\n  parentField?: string // default 'parentId'\n  treeNode?: string // column key for toggler; default first column\n  showLine?: boolean\n}",
+          "locale": "zh-CN"
+        },
+        {
+          "id": "类型-10",
+          "section": "类型",
+          "sectionId": "类型",
+          "lang": "ts",
+          "preview": false,
+          "code": "interface TableColumnDefinition {\n  key: string\n  label: string\n  width?: number\n  minWidth?: number\n  sortable?: boolean\n  fixed?: boolean | 'left' | 'right'\n  align?: 'start' | 'center' | 'end'\n  render?: (row: TableItem) => unknown\n  showOverflowTooltip?: boolean\n  resizable?: boolean\n  filterable?: boolean\n  filters?: TableColumnFilter[]\n  children?: TableColumnDefinition[]\n}",
+          "locale": "zh-CN"
+        },
+        {
+          "id": "类型-11",
+          "section": "类型",
+          "sectionId": "类型",
+          "lang": "ts",
+          "preview": false,
           "code": "interface TableServerOptions {\n  page: number\n  rowsPerPage: number\n  sortBy?: string | string[]\n  sortType?: 'asc' | 'desc' | ('asc' | 'desc')[]\n}",
           "locale": "zh-CN"
         },
@@ -26690,7 +27478,7 @@
           "sectionId": "import",
           "lang": "ts",
           "preview": false,
-          "code": "import type { TableColumnDefinition, TableItem } from 'morya-ui'\nimport { MTable, MTag } from 'morya-ui'",
+          "code": "import type { TableColumnDefinition, TableItem, TableSortConfig, TablePassThrough } from 'morya-ui'\nimport { MTable, MTag } from 'morya-ui'",
           "locale": "en-US"
         },
         {
@@ -26703,72 +27491,117 @@
           "locale": "en-US"
         },
         {
-          "id": "selection-1",
-          "section": "Selection",
-          "sectionId": "selection",
+          "id": "row-selection-1",
+          "section": "Row Selection",
+          "sectionId": "row-selection",
           "lang": "vue",
           "preview": true,
           "code": "<script setup lang=\"ts\">\nimport { MTable } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst columns = [\n  { key: 'name', label: 'Name', minWidth: 120 },\n  { key: 'role', label: 'Role', minWidth: 120 },\n]\nconst rows = [\n  { id: 1, name: 'Ada', role: 'Designer' },\n  { id: 2, name: 'Lin', role: 'Engineer' },\n]\nconst selection = ref<Record<string, unknown>[]>([])\n</script>\n\n<template>\n  <MTable\n    v-model:selection=\"selection\"\n    :columns=\"columns\"\n    :rows=\"rows\"\n    selection-mode=\"multiple\"\n    highlight-current\n    :paginator=\"false\"\n  />\n</template>",
           "locale": "en-US"
         },
         {
-          "id": "filter-and-pagination-1",
-          "section": "Filter and pagination",
-          "sectionId": "filter-and-pagination",
+          "id": "filtering-pagination-1",
+          "section": "Filtering & Pagination",
+          "sectionId": "filtering-pagination",
           "lang": "vue",
           "preview": true,
           "code": "<script setup lang=\"ts\">\nimport { MTable } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst columns = [\n  { key: 'name', label: 'Name', sortable: true, minWidth: 120 },\n  { key: 'role', label: 'Role', minWidth: 120 },\n]\nconst rows = [\n  { id: 1, name: 'Ada', role: 'Designer' },\n  { id: 2, name: 'Lin', role: 'Engineer' },\n  { id: 3, name: 'Kai', role: 'Engineer' },\n  { id: 4, name: 'Mia', role: 'Designer' },\n]\nconst page = ref(1)\n</script>\n\n<template>\n  <MTable\n    v-model:page=\"page\"\n    :columns=\"columns\"\n    :rows=\"rows\"\n    paginator\n    :rows-per-page=\"2\"\n  />\n</template>",
           "locale": "en-US"
         },
         {
-          "id": "expandable-rows-1",
-          "section": "Expandable rows",
-          "sectionId": "expandable-rows",
+          "id": "fixed-columns-1",
+          "section": "Fixed Columns",
+          "sectionId": "fixed-columns",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MTable } from 'morya-ui'\n\nconst columns = [\n  { key: 'name', label: 'Name', width: 120, fixed: 'left' as const },\n  { key: 'q1', label: 'Q1 Revenue', width: 140 },\n  { key: 'q2', label: 'Q2 Revenue', width: 140 },\n  { key: 'q3', label: 'Q3 Revenue', width: 140 },\n  { key: 'action', label: 'Action', width: 100, fixed: 'right' as const },\n]\nconst rows = [\n  { id: 1, name: 'Ada', q1: '124k', q2: '131k', q3: '140k', action: 'Edit' },\n  { id: 2, name: 'Lin', q1: '98k', q2: '102k', q3: '115k', action: 'Edit' },\n]\n</script>\n\n<template>\n  <MTable :columns=\"columns\" :rows=\"rows\" bordered :paginator=\"false\" />\n</template>",
+          "locale": "en-US"
+        },
+        {
+          "id": "expandable-rows-cell-rendering-1",
+          "section": "Expandable Rows & Cell Rendering",
+          "sectionId": "expandable-rows-cell-rendering",
           "lang": "vue",
           "preview": true,
           "code": "<script setup lang=\"ts\">\nimport type { TableItem } from 'morya-ui'\nimport { MTable } from 'morya-ui'\n\ntype Row = { id: number; name: string; role: string; extra: string }\n\nconst columns = [\n  { key: 'name', label: 'Name' },\n  { key: 'role', label: 'Role' },\n]\nconst rows: Row[] = [{ id: 1, name: 'Ada', role: 'Designer', extra: 'Design system' }]\n\nfunction extraOf(row: TableItem) {\n  return (row as Row).extra\n}\n</script>\n\n<template>\n  <MTable :columns=\"columns\" :rows=\"rows\" expandable bordered :paginator=\"false\">\n    <template #expansion=\"{ row }\">\n      {{ extraOf(row) }}\n    </template>\n  </MTable>\n</template>",
           "locale": "en-US"
         },
         {
-          "id": "fixed-columns-1",
-          "section": "Fixed columns",
-          "sectionId": "fixed-columns",
+          "id": "sorting-sortconfig-1",
+          "section": "Sorting (sortConfig)",
+          "sectionId": "sorting-sortconfig",
           "lang": "vue",
           "preview": true,
-          "code": "<script setup lang=\"ts\">\nimport { MTable } from 'morya-ui'\n\nconst columns = [\n  { key: 'name', label: 'Name', width: 120, fixed: 'left' as const },\n  { key: 'q1', label: 'Q1 Revenue', width: 140 },\n  { key: 'q2', label: 'Q2 Revenue', width: 140 },\n  { key: 'q3', label: 'Q3 Revenue', width: 140 },\n  { key: 'action', label: 'Action', width: 100, fixed: 'right' as const },\n]\nconst rows = [\n  { id: 1, name: 'Ada', q1: '124k', q2: '131k', q3: '140k', action: 'Edit' },\n  { id: 2, name: 'Lin', q1: '98k', q2: '102k', q3: '115k', action: 'Edit' },\n]\n</script>\n\n<template>\n  <MTable :columns=\"columns\" :rows=\"rows\" bordered :paginator=\"false\" />\n</template>",
+          "code": "<script setup lang=\"ts\">\nimport type { TableSortConfig } from 'morya-ui'\nimport { MTable } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst columns = [\n  { key: 'name', label: 'Project', minWidth: 160, sortable: true },\n  { key: 'owner', label: 'Owner', minWidth: 100, sortable: true },\n  { key: 'progress', label: 'Progress', width: 110, align: 'end' as const, sortable: true },\n]\n\nconst rows = [\n  { id: 1, name: 'Landing Redesign', owner: 'Ada', progress: 100 },\n  { id: 2, name: 'Dashboard v2', owner: 'Lin', progress: 62 },\n  { id: 3, name: 'Auth Gateway', owner: 'Kai', progress: 88 },\n  { id: 4, name: 'Billing Migration', owner: 'Ada', progress: 24 },\n]\n\nconst sortConfig = ref<TableSortConfig>({\n  field: 'progress',\n  order: 'desc',\n  mode: 'client',\n})\n</script>\n\n<template>\n  <MTable :columns=\"columns\" :rows=\"rows\" :sort-config=\"sortConfig\" bordered striped />\n</template>",
           "locale": "en-US"
         },
         {
-          "id": "column-resize-and-header-filters-1",
-          "section": "Column resize and header filters",
-          "sectionId": "column-resize-and-header-filters",
+          "id": "column-resizing-header-filters-1",
+          "section": "Column Resizing & Header Filters",
+          "sectionId": "column-resizing-header-filters",
           "lang": "vue",
           "preview": true,
           "code": "<script setup lang=\"ts\">\nimport type { TableColumnDefinition } from 'morya-ui'\nimport { MTable } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst columns: TableColumnDefinition[] = [\n  {\n    key: 'name',\n    label: 'Name',\n    width: 140,\n    resizable: true,\n    filterable: true,\n  },\n  {\n    key: 'status',\n    label: 'Status',\n    width: 120,\n    resizable: true,\n    filterable: true,\n    filters: [\n      { label: 'Draft', value: 'Draft' },\n      { label: 'Live', value: 'Live' },\n    ],\n  },\n  { key: 'role', label: 'Role', minWidth: 120 },\n]\n\nconst rows = [\n  { id: 1, name: 'Ada', status: 'Draft', role: 'Designer' },\n  { id: 2, name: 'Lin', status: 'Live', role: 'Engineer' },\n  { id: 3, name: 'Kai', status: 'Live', role: 'Engineer' },\n  { id: 4, name: 'Mia', status: 'Draft', role: 'Designer' },\n]\n\nconst columnWidths = ref<Record<string, number>>({})\n</script>\n\n<template>\n  <MTable\n    v-model:column-widths=\"columnWidths\"\n    :columns=\"columns\"\n    :rows=\"rows\"\n    bordered\n    :paginator=\"false\"\n  />\n</template>",
           "locale": "en-US"
         },
         {
-          "id": "virtual-scroll-1",
-          "section": "Virtual scroll",
-          "sectionId": "virtual-scroll",
+          "id": "column-settings-panel-1",
+          "section": "Column Settings Panel",
+          "sectionId": "column-settings-panel",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MTable, MTag } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst columns = [\n  { key: 'name', label: 'Project', minWidth: 140 },\n  { key: 'status', label: 'Status', width: 120 },\n  { key: 'owner', label: 'Owner', minWidth: 100 },\n  { key: 'team', label: 'Team', minWidth: 120 },\n  { key: 'progress', label: 'Progress', width: 100, align: 'end' as const },\n]\n\nconst rows = [\n  { id: 1, name: 'Landing Redesign', status: 'Published', owner: 'Ada', team: 'Design', progress: '100%' },\n  { id: 2, name: 'Dashboard v2', status: 'Draft', owner: 'Lin', team: 'Frontend', progress: '62%' },\n  { id: 3, name: 'Auth Gateway', status: 'Review', owner: 'Kai', team: 'Backend', progress: '88%' },\n]\n\nconst hiddenColumns = ref<string[]>([])\n</script>\n\n<template>\n  <MTable\n    v-model:hidden-columns=\"hiddenColumns\"\n    :columns=\"columns\"\n    :rows=\"rows\"\n    column-setting\n    bordered\n    striped\n  >\n    <template #cell-status=\"{ value }\">\n      <MTag\n        :value=\"String(value)\"\n        :type=\"value === 'Published' ? 'success' : value === 'Review' ? 'warning' : 'secondary'\"\n      />\n    </template>\n  </MTable>\n</template>",
+          "locale": "en-US"
+        },
+        {
+          "id": "column-drag-1",
+          "section": "Column Drag",
+          "sectionId": "column-drag",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MTable, MTag } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst columns = [\n  { key: 'name', label: 'Project', minWidth: 140 },\n  { key: 'status', label: 'Status', width: 120 },\n  { key: 'owner', label: 'Owner', minWidth: 100 },\n  { key: 'team', label: 'Team', minWidth: 120 },\n  { key: 'progress', label: 'Progress', width: 100, align: 'end' as const },\n]\n\nconst rows = [\n  { id: 1, name: 'Landing Redesign', status: 'Published', owner: 'Ada', team: 'Design', progress: '100%' },\n  { id: 2, name: 'Dashboard v2', status: 'Draft', owner: 'Lin', team: 'Frontend', progress: '62%' },\n  { id: 3, name: 'Auth Gateway', status: 'Review', owner: 'Kai', team: 'Backend', progress: '88%' },\n]\n\nconst columnOrder = ref<string[]>([])\n</script>\n\n<template>\n  <MTable\n    v-model:column-order=\"columnOrder\"\n    :columns=\"columns\"\n    :rows=\"rows\"\n    column-drag\n    bordered\n    striped\n  >\n    <template #cell-status=\"{ value }\">\n      <MTag\n        :value=\"String(value)\"\n        :type=\"value === 'Published' ? 'success' : value === 'Review' ? 'warning' : 'secondary'\"\n      />\n    </template>\n  </MTable>\n</template>",
+          "locale": "en-US"
+        },
+        {
+          "id": "skeleton-loading-1",
+          "section": "Skeleton Loading",
+          "sectionId": "skeleton-loading",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MButton, MTable } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst columns = [\n  { key: 'name', label: 'Project', minWidth: 160 },\n  { key: 'owner', label: 'Owner', minWidth: 100 },\n  { key: 'team', label: 'Team', minWidth: 120 },\n  { key: 'progress', label: 'Progress', width: 100, align: 'end' as const },\n]\n\nconst allRows = [\n  { id: 1, name: 'Landing Redesign', owner: 'Ada', team: 'Design', progress: '100%' },\n  { id: 2, name: 'Dashboard v2', owner: 'Lin', team: 'Frontend', progress: '62%' },\n  { id: 3, name: 'Auth Gateway', owner: 'Kai', team: 'Backend', progress: '88%' },\n]\n\nconst rows = ref<typeof allRows>([])\nconst loading = ref(true)\n\nfunction reload() {\n  loading.value = true\n  rows.value = []\n  window.setTimeout(() => {\n    rows.value = allRows\n    loading.value = false\n  }, 1500)\n}\n\nreload()\n</script>\n\n<template>\n  <div style=\"display: grid; gap: 12px\">\n    <div>\n      <MButton size=\"small\" @click=\"reload\">Reload</MButton>\n    </div>\n    <MTable\n      :columns=\"columns\"\n      :rows=\"rows\"\n      :loading=\"loading\"\n      :skeleton=\"loading\"\n      :skeleton-rows=\"4\"\n      bordered\n      striped\n    />\n  </div>\n</template>",
+          "locale": "en-US"
+        },
+        {
+          "id": "virtual-scrolling-1",
+          "section": "Virtual Scrolling",
+          "sectionId": "virtual-scrolling",
           "lang": "vue",
           "preview": true,
           "code": "<script setup lang=\"ts\">\nimport { MTable } from 'morya-ui'\n\nconst columns = [\n  { key: 'id', label: 'ID', width: 80 },\n  { key: 'name', label: 'Name', minWidth: 160 },\n]\n\nconst rows = Array.from({ length: 5000 }, (_, i) => ({\n  id: i + 1,\n  name: `Row ${i + 1}`,\n}))\n</script>\n\n<template>\n  <MTable\n    :columns=\"columns\"\n    :rows=\"rows\"\n    virtual\n    :virtual-row-height=\"40\"\n    :max-height=\"320\"\n    bordered\n    :paginator=\"false\"\n  />\n</template>",
           "locale": "en-US"
         },
         {
-          "id": "multi-header-footer-and-merges-1",
-          "section": "Multi-header, footer, and merges",
-          "sectionId": "multi-header-footer-and-merges",
+          "id": "dynamic-row-height-virtual-scrolling-1",
+          "section": "Dynamic Row Height Virtual Scrolling",
+          "sectionId": "dynamic-row-height-virtual-scrolling",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MTable } from 'morya-ui'\n\nconst columns = [\n  { key: 'id', label: 'ID', width: 80 },\n  { key: 'title', label: 'Title', minWidth: 200 },\n  { key: 'summary', label: 'Summary', minWidth: 320 },\n]\n\n// Rows with variable content length → variable row height\nconst rows = Array.from({ length: 2000 }, (_, i) => ({\n  id: i + 1,\n  title: `Task ${i + 1}`,\n  summary: i % 7 === 0\n    ? 'A longer summary used to demonstrate dynamic row height. '.repeat((i % 5) + 2)\n    : `Short summary ${i + 1}`,\n}))\n</script>\n\n<template>\n  <MTable\n    :columns=\"columns\"\n    :rows=\"rows\"\n    virtual\n    virtual-dynamic-row-height\n    :virtual-row-height=\"44\"\n    :max-height=\"360\"\n    bordered\n    :paginator=\"false\"\n  />\n</template>",
+          "locale": "en-US"
+        },
+        {
+          "id": "multi-level-headers-footer-span-1",
+          "section": "Multi-level Headers, Footer & Span",
+          "sectionId": "multi-level-headers-footer-span",
           "lang": "vue",
           "preview": true,
           "code": "<script setup lang=\"ts\">\nimport type { TableColumnDefinition, TableItem } from 'morya-ui'\nimport { MTable } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst columns: TableColumnDefinition[] = [\n  {\n    key: 'info',\n    label: 'Info',\n    children: [\n      { key: 'name', label: 'Name' },\n      { key: 'role', label: 'Role' },\n    ],\n  },\n  { key: 'score', label: 'Score', align: 'end' },\n]\n\nconst rows = ref<TableItem[]>([\n  { id: 1, name: 'Ada', role: 'Designer', score: 96 },\n  { id: 2, name: 'Lin', role: 'Engineer', score: 88 },\n  { id: 3, name: 'Kai', role: 'Engineer', score: 91 },\n])\n\nconst hiddenColumns = ref<string[]>([])\n</script>\n\n<template>\n  <MTable\n    v-model:hidden-columns=\"hiddenColumns\"\n    :columns=\"columns\"\n    :rows=\"rows\"\n    bordered\n    show-footer\n    :footer-method=\"({ data }) => [[\n      'Total',\n      '',\n      data.reduce((sum, row) => sum + Number(row.score ?? 0), 0),\n    ]]\"\n    :span-method=\"({ column, rowIndex }) => {\n      if (column.value === 'role' && rowIndex === 1) return { rowspan: 2, colspan: 1 }\n      if (column.value === 'role' && rowIndex === 2) return { rowspan: 0, colspan: 0 }\n      return { rowspan: 1, colspan: 1 }\n    }\"\n    :paginator=\"false\"\n  />\n</template>",
           "locale": "en-US"
         },
         {
-          "id": "empty-and-loading-1",
-          "section": "Empty and loading",
-          "sectionId": "empty-and-loading",
+          "id": "empty-loading-1",
+          "section": "Empty & Loading",
+          "sectionId": "empty-loading",
           "lang": "vue",
           "preview": true,
           "code": "<script setup lang=\"ts\">\nimport { MButton, MTable } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst loading = ref(false)\nconst columns = [\n  { key: 'name', label: 'Name', minWidth: 120 },\n  { key: 'role', label: 'Role', minWidth: 120 },\n]\n</script>\n\n<template>\n  <div class=\"grid gap-3\">\n    <MButton :label=\"loading ? 'Stop loading' : 'Start loading'\" @click=\"loading = !loading\" />\n    <MTable\n      :columns=\"columns\"\n      :rows=\"[]\"\n      :loading=\"loading\"\n      empty-text=\"No data yet\"\n      empty-description=\"Records will appear here after you create the first one\"\n      :paginator=\"false\"\n    />\n  </div>\n</template>",
@@ -26776,7 +27609,7 @@
         },
         {
           "id": "tree-table-1",
-          "section": "Tree table",
+          "section": "Tree Table",
           "sectionId": "tree-table",
           "lang": "vue",
           "preview": true,
@@ -26785,7 +27618,7 @@
         },
         {
           "id": "server-mode-1",
-          "section": "Server mode",
+          "section": "Server Mode",
           "sectionId": "server-mode",
           "lang": "vue",
           "preview": true,
@@ -26807,7 +27640,7 @@
           "sectionId": "types",
           "lang": "ts",
           "preview": false,
-          "code": "interface TableColumnDefinition {\n  key: string\n  label: string\n  width?: number\n  minWidth?: number\n  sortable?: boolean\n  fixed?: boolean | 'left' | 'right'\n  align?: 'start' | 'center' | 'end'\n  render?: (row: TableItem) => unknown\n  filterable?: boolean\n  filters?: TableColumnFilter[]\n  resizable?: boolean\n  children?: TableColumnDefinition[]\n  showOverflowTooltip?: boolean\n}",
+          "code": "interface TableSortConfig {\n  field?: string | null\n  order?: 'asc' | 'desc' | null\n  multiple?: boolean\n  must?: boolean\n  mode?: 'client' | 'emit'\n}",
           "locale": "en-US"
         },
         {
@@ -26816,6 +27649,78 @@
           "sectionId": "types",
           "lang": "ts",
           "preview": false,
+          "code": "interface TablePassThrough {\n  root?: Record<string, unknown>\n  scrollbar?: Record<string, unknown>\n  thead?: Record<string, unknown>\n  tbody?: Record<string, unknown>\n  tfoot?: Record<string, unknown>\n  pagination?: Record<string, unknown>\n  emptyMessage?: Record<string, unknown>\n}",
+          "locale": "en-US"
+        },
+        {
+          "id": "types-4",
+          "section": "Types",
+          "sectionId": "types",
+          "lang": "ts",
+          "preview": false,
+          "code": "type TableTextDirection = 'left' | 'center' | 'right'",
+          "locale": "en-US"
+        },
+        {
+          "id": "types-5",
+          "section": "Types",
+          "sectionId": "types",
+          "lang": "ts",
+          "preview": false,
+          "code": "type TableFilterOption =\n  | { field: string; comparison: 'between'; criteria: [number, number] }\n  | { field: string; comparison: '=' | '!='; criteria: number | string }\n  | { field: string; comparison: '>' | '>=' | '<' | '<='; criteria: number }\n  | { field: number | string; comparison: 'in'; criteria: number[] | string[] }\n  | { field: string; comparison: (value: unknown, criteria: string) => boolean; criteria: string }",
+          "locale": "en-US"
+        },
+        {
+          "id": "types-6",
+          "section": "Types",
+          "sectionId": "types",
+          "lang": "ts",
+          "preview": false,
+          "code": "type TableHeaderItemClassName = string | ((header: TableHeader, columnNumber: number) => string)",
+          "locale": "en-US"
+        },
+        {
+          "id": "types-7",
+          "section": "Types",
+          "sectionId": "types",
+          "lang": "ts",
+          "preview": false,
+          "code": "type TableBodyRowClassName = string | ((item: TableItem, rowNumber: number) => string)",
+          "locale": "en-US"
+        },
+        {
+          "id": "types-8",
+          "section": "Types",
+          "sectionId": "types",
+          "lang": "ts",
+          "preview": false,
+          "code": "type TableBodyItemClassName = string | ((column: string, rowNumber: number) => string)",
+          "locale": "en-US"
+        },
+        {
+          "id": "types-9",
+          "section": "Types",
+          "sectionId": "types",
+          "lang": "ts",
+          "preview": false,
+          "code": "interface TableTreeConfig {\n  childrenField?: string // default 'children'\n  indent?: number // default 16\n  expandAll?: boolean\n  accordion?: boolean\n  trigger?: 'default' | 'row'\n  lazy?: boolean\n  hasChildField?: string // default 'hasChild'\n  loadMethod?: (row: TableItem) => Promise<TableItem[]> | TableItem[]\n  transform?: boolean // flat parentId → tree\n  rowField?: string\n  parentField?: string // default 'parentId'\n  treeNode?: string // column key for toggler; default first column\n  showLine?: boolean\n}",
+          "locale": "en-US"
+        },
+        {
+          "id": "types-10",
+          "section": "Types",
+          "sectionId": "types",
+          "lang": "ts",
+          "preview": false,
+          "code": "interface TableColumnDefinition {\n  key: string\n  label: string\n  width?: number\n  minWidth?: number\n  sortable?: boolean\n  fixed?: boolean | 'left' | 'right'\n  align?: 'start' | 'center' | 'end'\n  render?: (row: TableItem) => unknown\n  showOverflowTooltip?: boolean\n  resizable?: boolean\n  filterable?: boolean\n  filters?: TableColumnFilter[]\n  children?: TableColumnDefinition[]\n}",
+          "locale": "en-US"
+        },
+        {
+          "id": "types-11",
+          "section": "Types",
+          "sectionId": "types",
+          "lang": "ts",
+          "preview": false,
           "code": "interface TableServerOptions {\n  page: number\n  rowsPerPage: number\n  sortBy?: string | string[]\n  sortType?: 'asc' | 'desc' | ('asc' | 'desc')[]\n}",
           "locale": "en-US"
         }
@@ -26823,7 +27728,7 @@
       "locales": {
         "zh-CN": {
           "title": "Table",
-          "description": "数据表格。支持排序、筛选、选择、分页、固定列与空/加载态。列宽支持 width / minWidth / fit。",
+          "description": "数据表格。支持排序、筛选、选择、分页、固定列、列拖拽、列设置、骨架屏与虚拟滚动。列宽支持 width / minWidth / fit。",
           "sections": [
             {
               "id": "overview",
@@ -26833,7 +27738,7 @@
             {
               "id": "引入",
               "title": "引入",
-              "body": "```ts\nimport type { TableColumnDefinition, TableItem } from 'morya-ui'\nimport { MTable, MTag } from 'morya-ui'\n```"
+              "body": "```ts\nimport type { TableColumnDefinition, TableItem, TableSortConfig, TablePassThrough } from 'morya-ui'\nimport { MTable, MTag } from 'morya-ui'\n```"
             },
             {
               "id": "基础用法",
@@ -26860,16 +27765,41 @@
               "title": "展开行与列渲染",
               "body": "列可通过 `render` 或 `#cell-{key}` 自定义单元格。展开行设置 `expandable`（或 `expandConfig`），详情由 `#expansion` 提供。树模式下 `expandedRowKeys` 用于树节点展开，不可同时用于详情展开。\n\n```vue preview src=\"./demos/ExpandableRows.zh.vue\"\n```"
             },
+            {
+              "id": "排序-sortconfig",
+              "title": "排序（sortConfig）",
+              "body": "通过 `sort-config` 统一配置排序：`{ field, order, multiple, must, mode }`。`mode: 'client'`（默认）由表格内部对当前页数据排序；`mode: 'emit'` 时表格只触发 `sort-change` 事件，数据由外部接管（适合服务端排序）。多列排序设 `multiple: true`，禁止取消排序设 `must: true`。\n\n```vue preview src=\"./demos/Sorting.zh.vue\"\n```"
+            },
             {
               "id": "列宽拖拽与表头筛选",
               "title": "列宽拖拽与表头筛选",
-              "body": "列设置 `resizable` 可拖拽改宽（`v-model:column-widths`）；`filterable` 显示表头筛选，可选 `filters` 为多选选项，否则为文本包含筛选。面板内 **清除** 仅重置草稿，**确认** 后才写入 `v-model:filters`。\n\n```vue preview src=\"./demos/ResizeAndFilter.zh.vue\"\n```"
+              "body": "列设置 `resizable` 可拖拽改宽（`v-model:column-widths`）；`filterable` 显示表头筛选，列定义里的 `filters` 为多选选项，省略则为文本包含筛选。面板内 **清除** 仅重置草稿，**确认** 后才写入 `v-model:filter-model`（旧 prop 名 `filters` 仍兼容）。\n\n```vue preview src=\"./demos/ResizeAndFilter.zh.vue\"\n```"
+            },
+            {
+              "id": "列设置面板",
+              "title": "列设置面板",
+              "body": "开启 `column-setting` 在表头右上角显示「列设置」按钮，弹出面板可勾选显示/隐藏列，配合 `v-model:hidden-columns` 持久化。面板文案随 `MLocale` 切换。\n\n```vue preview src=\"./demos/ColumnSetting.zh.vue\"\n```"
+            },
+            {
+              "id": "列拖拽排序",
+              "title": "列拖拽排序",
+              "body": "开启 `column-drag` 后，拖拽表头单元格可调整叶列顺序，顺序由 `v-model:column-order` 同步。拖放仅在同一层级内进行，不会破坏多级表头结构。\n\n```vue preview src=\"./demos/ColumnDrag.zh.vue\"\n```"
+            },
+            {
+              "id": "骨架屏加载",
+              "title": "骨架屏加载",
+              "body": "通过 `skeleton` 启用骨架屏加载态，替代整页遮罩 spinner；`skeleton-rows` 控制骨架行数（默认 `5`）。骨架屏会让用户提前感知表格布局，加载体验更好。\n\n```vue preview src=\"./demos/Skeleton.zh.vue\"\n```"
             },
             {
               "id": "虚拟滚动",
               "title": "虚拟滚动",
               "body": "开启 `virtual`，并提供 `maxHeight` / `tableHeight` / `fill` 之一以形成滚动视口；缺高度时开发环境会 `console.warn`。展开行 / `#expansion` / `expandConfig` 与虚拟滚动互斥，会自动降级为普通渲染（开发环境会提示）。\n\n```vue preview src=\"./demos/VirtualScroll.zh.vue\"\n```"
             },
+            {
+              "id": "动态行高虚拟滚动",
+              "title": "动态行高虚拟滚动",
+              "body": "默认虚拟滚动要求所有行等高（由 `virtual-row-height` 估算）。如果某些行由于内容差异存在不同高度，可开启 `virtual-dynamic-row-height`：表格会通过 `ResizeObserver` 实测每行高度并缓存，配合前缀和 + 二分查找实现 O(log n) 滚动定位，长列表下滚动仍保持流畅。\n\n```vue preview src=\"./demos/DynamicRowHeight.zh.vue\"\n```"
+            },
             {
               "id": "多级表头-表尾与合并",
               "title": "多级表头、表尾与合并",
@@ -26893,7 +27823,7 @@
             {
               "id": "breaking-changes",
               "title": "Breaking changes",
-              "body": "- 移除内置单元格编辑：`editConfig`、列 `editable`、`edit-change`、`#edit-{key}`；请用 `#cell-{key}` / `render` 自定义\n- 移除 `MTreeTable`（含 `morya-ui/tree-table`）；树表改用 `MTable` + `treeConfig`\n- `serverItemsLength` → `serverTotal`；`rowsItems` → `pageSizes`\n- `hideHeader` 移除；改用 `showHeader`（默认 `true`）\n- `hideRowsPerPage` 移除；改用 `showRowsPerPage`（默认 `true`）\n- 移除：`clickEventType`、`rowsPerPageMessage`、`rowsOfPageSeparatorMessage`、`preventContextMenuRow`、`tableNodeId`\n- 事件：`contextmenuRow` → `row-contextmenu`；`selectRow` / `deselectRow` / `selectAll` → `select-row` / `deselect-row` / `select-all`\n- 移除事件：`updatePageItems`、`updateTotalItems`、`page`（保留 `update:page`）\n- 行交互：始终同时支持单击 / 双击（`row-click` / `row-dblclick`）；右键始终 `preventDefault` 并抛出 `row-contextmenu`"
+              "body": "- 移除内置单元格编辑：`editConfig`、列 `editable`、`edit-change`、`#edit-{key}`；请用 `#cell-{key}` / `render` 自定义\n- 移除 `MTreeTable`（含 `morya-ui/tree-table`）；树表改用 `MTable` + `treeConfig`\n- `serverItemsLength` → `serverTotal`；`rowsItems` → `pageSizes`\n- `hideHeader` 移除；改用 `showHeader`（默认 `true`）\n- `hideRowsPerPage` 移除；改用 `showRowsPerPage`（默认 `true`）\n- 移除：`clickEventType`、`rowsPerPageMessage`、`rowsOfPageSeparatorMessage`、`preventContextMenuRow`、`tableNodeId`\n- 事件：`sortChange` → `sort-change`；`expandRow` → `expand-change`；`contextmenuRow` → `row-contextmenu`；`selectRow` / `deselectRow` / `selectAll` → `select-row` / `deselect-row` / `select-all`\n- 新增事件：`filter-change`（列筛选提交）\n- 移除事件：`updatePageItems`、`updateTotalItems`、`page`（保留 `update:page`）\n- 行交互：始终同时支持单击 / 双击（`row-click` / `row-dblclick`）；右键始终 `preventDefault` 并抛出 `row-contextmenu`\n- 排序 props 合并：`sortField` / `sortOrder` / `multiSort` / `mustSort` / `sortMode` 仍兼容，新代码请使用 `sortConfig: TableSortConfig`\n- 筛选 v-model：`v-model:filters` 仍兼容，新代码请使用 `v-model:filter-model`"
             },
             {
               "id": "tablecolumndefinition",
@@ -26903,17 +27833,17 @@
             {
               "id": "props",
               "title": "Props",
-              "body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `columns` | `TableColumnDefinition[]` | — | 列定义。 |\n| `rows` | `TableItem[]` | — | 行数据。 |\n| `fit` | `boolean` | `true` | 弹性列是否撑满表格宽度。 |\n| `selectionMode` | `'single' \\| 'multiple' \\| null` | `null` | 行选择模式。 |\n| `selection` | `TableItem[] \\| null` | `null` | 多选绑定（`v-model:selection`）。 |\n| `selectedItem` | `TableItem \\| null` | `null` | 单选绑定（`v-model:selected-item`）。 |\n| `serverOptions` | `TableServerOptions \\| null` | `null` | 服务端分页/排序选项。 |\n| `serverTotal` | `number` | `0` | 服务端总条数。 |\n| `paginator` | `boolean` | `false` | 显示内置分页页脚。 |\n| `page` | `number` | `1` | 当前页（`v-model:page`）。 |\n| `rowsPerPage` | `number` | `25` | 每页条数。 |\n| `pageSizes` | `number[]` | `[25, 50, 100]` | 分页每页条数选项。 |\n| `showHeader` | `boolean` | `true` | 是否显示表头。 |\n| `showRowsPerPage` | `boolean` | `true` | 是否显示每页条数选择器。 |\n| `fill` | `boolean` | `false` | 撑满父级剩余高度（仅全视口主列表配 `MPageContent fill`）；表体滚动，分页贴底。设置 `maxHeight` / `tableHeight` 时忽略。 |\n| `columnWidths` | `Record<string, number> \\| null` | `null` | 列宽（`v-model:column-widths`）。 |\n| `virtual` | `boolean` | `false` | 行虚拟滚动（需高度；展开行时跳过）。 |\n| `virtualRowHeight` | `number` | `40` | 虚拟行高估算。 |\n| `hiddenColumns` | `string[] \\| null` | `null` | 隐藏列键（`v-model:hidden-columns`）。 |\n| `columnOrder` | `string[] \\| null` | `null` | 叶列顺序（`v-model:column-order`）。 |\n| `showFooter` | `boolean` | `false` | 显示表尾。 |\n| `footerMethod` | `TableFooterMethod \\| null` | `null` | 表尾数据。 |\n| `spanMethod` | `TableSpanMethod \\| null` | `null` | 单元格合并。 |\n| `treeConfig` | `TableTreeConfig \\| null` | `null` | 树形行。 |\n| `expandConfig` | `TableExpandConfig \\| null` | `null` | 详情展开配置（与树互斥）。 |\n| `checkboxConfig` | `TableCheckboxConfig \\| null` | `null` | 多选：级联 / `checkMethod` / `checkRowKeys` / `trigger` / `reserve`。 |\n| `radioConfig` | `TableRadioConfig \\| null` | `null` | 单选：`strict` / `checkMethod` / `trigger`。 |\n| `expandable` | `boolean` | `false` | 显示展开列（也可由 `#expansion` 或 `expandConfig` 启用）。 |\n| `striped` | `boolean` | `false` | 斑马纹行。 |\n| `bordered` | `boolean` | `false` | 单元格边框。 |\n| `highlightCurrent` | `boolean` | `false` | 高亮当前行，配合 `v-model:current-row-key`。 |\n| `rowHover` | `boolean` | `true` | 行 hover 高亮。 |\n| `sortField` / `sortOrder` | — | — | 受控排序字段与方向。 |\n| `sortMode` | `'client' \\| 'emit'` | `'client'` | 客户端排序或仅抛出排序事件。 |\n| `searchField` / `searchValue` | — | — | 客户端搜索。 |\n| `filterOptions` | `TableFilterOption[]` | `null` | 结构化筛选条件。 |\n| `loading` | `boolean` | `false` | 加载中。 |\n| `emptyText` | `string` | — | 空数据文案。 |\n| `emptyDescription` | `string` | — | 空数据补充说明。 |\n| `maxHeight` | `number \\| null` | `null` | 表格最大高度，超出滚动。 |\n| `showOverflowTooltip` | `boolean` | `false` | 全局单元格溢出 Tooltip。 |\n| `rowKey` | `string` | `'id'` | 行唯一键字段。 |\n| `size` | `'small' \\| 'medium' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | 表格密度（`large`/`small` 同步单元格 padding）。 |\n| `ariaLabel` | `string` | — | — |\n| `bodyExpandRowClassName` | `TableBodyRowClassName` | — | — |\n| `bodyItemClassName` | `TableBodyItemClassName` | — | — |\n| `bodyRowClassName` | `TableBodyRowClassName` | — | — |\n| `bodyTextDirection` | `TableTextDirection` | — | — |\n| `checkboxColumnWidth` | `number \\| null` | — | — |\n| `clickRowToExpand` | `boolean` | — | — |\n| `currentRowKey` | `string \\| number \\| null` | — | — |\n| `expandColumnWidth` | `number` | — | — |\n| `expandedRowKeys` | `Array<string \\| number>` | — | — |\n| `filters` | `Record<string, unknown> \\| null` | — | — |\n| `fixedCheckbox` | `boolean` | — | — |\n| `fixedExpand` | `boolean` | — | — |\n| `fixedHeader` | `boolean` | — | — |\n| `fixedIndex` | `boolean` | — | — |\n| `headerClassName` | `string` | — | — |\n| `headerItemClassName` | `TableHeaderItemClassName` | — | — |\n| `headerTextDirection` | `TableTextDirection` | — | — |\n| `indexColumnWidth` | `number` | — | — |\n| `multiSort` | `boolean` | — | — |\n| `mustSort` | `boolean` | — | — |\n| `showIndex` | `boolean` | — | — |\n| `showIndexSymbol` | `string` | — | — |\n| `tableClassName` | `string` | — | — |\n| `tableHeight` | `number \\| null` | — | — |\n| `tableMinHeight` | `number` | — | — |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |"
+              "body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `columns` | `TableColumnDefinition[]` | — | 列定义。 |\n| `rows` | `TableItem[]` | — | 行数据。 |\n| `fit` | `boolean` | `true` | 弹性列是否撑满表格宽度。 |\n| `selectionMode` | `'single' \\| 'multiple' \\| null` | `null` | 行选择模式。 |\n| `selection` | `TableItem[] \\| null` | `null` | 多选绑定（`v-model:selection`）。 |\n| `selectedItem` | `TableItem \\| null` | `null` | 单选绑定（`v-model:selected-item`）。 |\n| `serverOptions` | `TableServerOptions \\| null` | `null` | 服务端分页/排序选项。 |\n| `serverTotal` | `number` | `0` | 服务端总条数。 |\n| `paginator` | `boolean` | `false` | 显示内置分页页脚。 |\n| `page` | `number` | `1` | 当前页（`v-model:page`）。 |\n| `rowsPerPage` | `number` | `25` | 每页条数。 |\n| `pageSizes` | `number[]` | `[25, 50, 100]` | 分页每页条数选项。 |\n| `showHeader` | `boolean` | `true` | 是否显示表头。 |\n| `showRowsPerPage` | `boolean` | `true` | 是否显示每页条数选择器。 |\n| `fill` | `boolean` | `false` | 撑满父级剩余高度（仅全视口主列表配 `MPageContent fill`）；表体滚动，分页贴底。设置 `maxHeight` / `tableHeight` 时忽略。 |\n| `columnWidths` | `Record<string, number> \\| null` | `null` | 列宽（`v-model:column-widths`）。 |\n| `virtual` | `boolean` | `false` | 行虚拟滚动（需高度；展开行时跳过）。 |\n| `virtualRowHeight` | `number` | `40` | 虚拟行高估算。 |\n| `virtualDynamicRowHeight` | `boolean` | `false` | 动态行高虚拟滚动（实测行高缓存，配合 `ResizeObserver`）。 |\n| `virtualOverscan` | `number` | `4` | 虚拟滚动上下额外渲染的行数，减少白屏闪烁。 |\n| `hiddenColumns` | `string[] \\| null` | `null` | 隐藏列键（`v-model:hidden-columns`）。 |\n| `columnOrder` | `string[] \\| null` | `null` | 叶列顺序（`v-model:column-order`）。 |\n| `columnSetting` | `boolean` | `false` | 显示列设置按钮（显示/隐藏列）。 |\n| `columnDrag` | `boolean` | `false` | 表头拖拽排序。 |\n| `skeleton` | `boolean` | `false` | 骨架屏加载态。 |\n| `skeletonRows` | `number` | `5` | 骨架屏行数。 |\n| `showFooter` | `boolean` | `false` | 显示表尾。 |\n| `footerMethod` | `TableFooterMethod \\| null` | `null` | 表尾数据。 |\n| `spanMethod` | `TableSpanMethod \\| null` | `null` | 单元格合并。 |\n| `treeConfig` | `TableTreeConfig \\| null` | `null` | 树形行。 |\n| `expandConfig` | `TableExpandConfig \\| null` | `null` | 详情展开配置（与树互斥）。 |\n| `checkboxConfig` | `TableCheckboxConfig \\| null` | `null` | 多选：级联 / `checkMethod` / `checkRowKeys` / `trigger` / `reserve`。 |\n| `radioConfig` | `TableRadioConfig \\| null` | `null` | 单选：`strict` / `checkMethod` / `trigger`。 |\n| `expandable` | `boolean` | `false` | 显示展开列（也可由 `#expansion` 或 `expandConfig` 启用）。 |\n| `striped` | `boolean` | `false` | 斑马纹行。 |\n| `bordered` | `boolean` | `false` | 单元格边框。 |\n| `highlightCurrent` | `boolean` | `false` | 高亮当前行，配合 `v-model:current-row-key`。 |\n| `rowHover` | `boolean` | `true` | 行 hover 高亮。 |\n| `sortConfig` | `TableSortConfig \\| null` | `null` | 统一排序配置 `{ field, order, multiple, must, mode }`。 |\n| `sortField` | `string \\| null` | `null` | （兼容）单字段排序。建议用 `sortConfig`。 |\n| `sortOrder` | `'asc' \\| 'desc' \\| null` | `null` | （兼容）单字段排序方向。建议用 `sortConfig`。 |\n| `multiSort` | `boolean` | `false` | （兼容）多列排序。建议用 `sortConfig.multiple`。 |\n| `mustSort` | `boolean` | `false` | （兼容）禁止取消排序。建议用 `sortConfig.must`。 |\n| `sortMode` | `'client' \\| 'emit'` | `'client'` | （兼容）排序模式。建议用 `sortConfig.mode`。 |\n| `searchField` / `searchValue` | — | — | 客户端搜索。 |\n| `filterOptions` | `TableFilterOption[]` | `null` | 结构化筛选条件。 |\n| `filterModel` | `Record<string, unknown> \\| null` | `null` | 列筛选 v-model（与 `update:filter-model` 配合）。 |\n| `filters` | `Record<string, unknown> \\| null` | `null` | （兼容）旧筛选 v-model 名。 |\n| `loading` | `boolean` | `false` | 加载中。 |\n| `emptyText` | `string` | — | 空数据文案。 |\n| `emptyDescription` | `string` | — | 空数据补充说明。 |\n| `maxHeight` | `number \\| null` | `null` | 表格最大高度，超出滚动。 |\n| `showOverflowTooltip` | `boolean` | `false` | 全局单元格溢出 Tooltip。 |\n| `rowKey` | `string` | `'id'` | 行唯一键字段。 |\n| `size` | `'small' \\| 'medium' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | 表格密度（`large`/`small` 同步单元格 padding）。 |\n| `ariaLabel` | `string` | — | — |\n| `bodyExpandRowClassName` | `TableBodyRowClassName` | — | — |\n| `bodyItemClassName` | `TableBodyItemClassName` | — | — |\n| `bodyRowClassName` | `TableBodyRowClassName` | — | — |\n| `bodyTextDirection` | `TableTextDirection` | — | — |\n| `checkboxColumnWidth` | `number \\| null` | — | — |\n| `clickRowToExpand` | `boolean` | — | — |\n| `currentRowKey` | `string \\| number \\| null` | — | — |\n| `expandColumnWidth` | `number` | — | — |\n| `expandedRowKeys` | `Array<string \\| number>` | — | — |\n| `fixedCheckbox` | `boolean` | — | — |\n| `fixedExpand` | `boolean` | — | — |\n| `fixedHeader` | `boolean` | — | — |\n| `fixedIndex` | `boolean` | — | — |\n| `headerClassName` | `string` | — | — |\n| `headerItemClassName` | `TableHeaderItemClassName` | — | — |\n| `headerTextDirection` | `TableTextDirection` | — | — |\n| `indexColumnWidth` | `number` | — | — |\n| `showIndex` | `boolean` | — | — |\n| `showIndexSymbol` | `string` | — | — |\n| `tableClassName` | `string` | — | — |\n| `tableHeight` | `number \\| null` | — | — |\n| `tableMinHeight` | `number` | — | — |\n| `pt` | `TablePassThrough` | — | 多部分 DOM 透传：`{ root, scrollbar, thead, tbody, tfoot, pagination, emptyMessage }`。 |"
             },
             {
               "id": "slots",
               "title": "Slots",
-              "body": "| 插槽 | 说明 |\n| --- | --- |\n| `cell-{key}` | 列 `{key}` 单元格，作用域 `{ row, value, column }`（可自行实现编辑器）。 |\n| `footer` | 自定义表尾。 |\n| `body-cell` | 任意单元格，作用域 `{ row, column, value }`。 |\n| `expansion` | 展开行内容，作用域 `{ row }`。 |\n| `empty` | 自定义空态。 |\n| `loading` | 自定义加载态。 |\n| `pagination` | 自定义分页区域。 |\n| `body` | 自定义 `body` 内容。 |\n| `body-append` | 自定义 `body-append` 内容。 |\n| `body-prepend` | 自定义 `body-prepend` 内容。 |\n| `customize-headers` | 自定义 `customize-headers` 内容。 |\n| `header` | 自定义 `header` 内容。 |\n| `header-{key}` | 列头插槽（键名大小写与 `columns[].key` 一致）。 |"
+              "body": "| 插槽 | 说明 |\n| --- | --- |\n| `cell-{key}` | 列 `{key}` 单元格，作用域 `{ row, value, column }`（可自行实现编辑器）。 |\n| `footer` | 自定义表尾。 |\n| `body-cell` | 任意单元格，作用域 `{ row, column, value }`。 |\n| `expansion` | 展开行内容，作用域 `{ row }`。 |\n| `empty` | 自定义空态。 |\n| `loading` | 自定义加载态（`skeleton` 为 true 时不生效）。 |\n| `pagination` | 自定义分页区域。 |\n| `body` | 自定义 `body` 内容。 |\n| `body-append` | 自定义 `body-append` 内容。 |\n| `body-prepend` | 自定义 `body-prepend` 内容。 |\n| `customize-headers` | 自定义 `customize-headers` 内容。 |\n| `header` | 自定义 `header` 内容。 |\n| `header-{key}` | 列头插槽（键名大小写与 `columns[].key` 一致）。 |"
             },
             {
               "id": "events",
               "title": "Events",
-              "body": "| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `sort` | `{ sortField?, sortOrder? }` | 排序变化。 |\n| `row-click` | `{ row, index }`, `Event` | 行单击。 |\n| `row-dblclick` | `{ row, index }`, `Event` | 行双击。 |\n| `row-contextmenu` | `item`, `MouseEvent` | 行右键。 |\n| `select-row` | `TableItem` | 选中一行。 |\n| `deselect-row` | `TableItem` | 取消选中一行。 |\n| `select-all` | — | 全选当前页。 |\n| `current-change` | `row \\| null, oldRow \\| null` | 当前高亮行变化。 |\n| `expand` | `{ row, expanded }` | 行展开。 |\n| `update:selection` | `TableItem[]` | 多选 v-model。 |\n| `update:page` | `number` | 页码 v-model。 |\n| `update:server-options` | `TableServerOptions` | 服务端选项 v-model。 |\n| `update:current-row-key` | `string \\| number \\| null` | 当前行键 v-model。 |\n| `filter` | — | — |\n| `update:expandedRowKeys` | — | — |\n| `update:filters` | — | — |\n| `update:columnWidths` | `Record<string, number>` | 列宽 v-model。 |\n| `update:hiddenColumns` | `string[]` | 隐藏列 v-model。 |\n| `update:columnOrder` | `string[]` | 列顺序 v-model。 |\n| `update:selectedItem` | — | — |"
+              "body": "| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `sort-change` | `{ sortField?, sortOrder? }` | 排序变化。 |\n| `filter-change` | `Record<string, unknown> \\| null` | 列筛选提交（与 `update:filter-model` 同步）。 |\n| `expand-change` | `{ row, expanded }` | 行展开状态变化（详情展开或树节点展开）。 |\n| `row-click` | `{ row, index }`, `Event` | 行单击。 |\n| `row-dblclick` | `{ row, index }`, `Event` | 行双击。 |\n| `row-contextmenu` | `item`, `MouseEvent` | 行右键。 |\n| `select-row` | `TableItem` | 选中一行。 |\n| `deselect-row` | `TableItem` | 取消选中一行。 |\n| `select-all` | — | 全选当前页。 |\n| `current-change` | `row \\| null, oldRow \\| null` | 当前高亮行变化。 |\n| `update:selection` | `TableItem[]` | 多选 v-model。 |\n| `update:page` | `number` | 页码 v-model。 |\n| `update:server-options` | `TableServerOptions` | 服务端选项 v-model。 |\n| `update:current-row-key` | `string \\| number \\| null` | 当前行键 v-model。 |\n| `update:expanded-row-keys` | `Array<string \\| number>` | 树/详情展开键 v-model。 |\n| `update:filter-model` | `Record<string, unknown> \\| null` | 列筛选 v-model。 |\n| `update:column-widths` | `Record<string, number>` | 列宽 v-model。 |\n| `update:hidden-columns` | `string[]` | 隐藏列 v-model。 |\n| `update:column-order` | `string[]` | 列顺序 v-model。 |\n| `update:selected-item` | `TableItem \\| null` | 单选 v-model。 |"
             },
             {
               "id": "实例方法",
@@ -26923,24 +27853,24 @@
             {
               "id": "类型",
               "title": "类型",
-              "body": "<h4 id=\"TableItem\">TableItem</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ntype TableItem = Record<string, unknown>\n```\n\n<h4 id=\"TableTextDirection\">TableTextDirection</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ntype TableTextDirection = 'left' | 'center' | 'right'\n```\n\n<h4 id=\"TableFilterOption\">TableFilterOption</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ntype TableFilterOption = | { field: string; comparison: 'between'; criteria: [number, number] }\n  | { field: string; comparison: '=' | '!='; criteria: number | string }\n  | { field: string; comparison: '>' | '>=' | '<' | '<='; criteria: number }\n  | { field: number | string; comparison: 'in'; criteria: number[] | string[] }\n  | { field: string; comparison: (value: unknown, criteria: string) => boolean; criteria: string }\n```\n\n<h4 id=\"TableHeaderItemClassName\">TableHeaderItemClassName</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ntype TableHeaderItemClassName = string | ((header: TableHeader, columnNumber: number) => string)\n```\n\n<h4 id=\"TableBodyRowClassName\">TableBodyRowClassName</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ntype TableBodyRowClassName = string | ((item: TableItem, rowNumber: number) => string)\n```\n\n<h4 id=\"TableBodyItemClassName\">TableBodyItemClassName</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ntype TableBodyItemClassName = string | ((column: string, rowNumber: number) => string)\n```\n\n\n<h4 id=\"TableTreeConfig\">TableTreeConfig</h4>\n\n```ts\ninterface TableTreeConfig {\n  childrenField?: string // default 'children'\n  indent?: number // default 16\n  expandAll?: boolean\n  accordion?: boolean\n  trigger?: 'default' | 'row'\n  lazy?: boolean\n  hasChildField?: string // default 'hasChild'\n  loadMethod?: (row: TableItem) => Promise<TableItem[]> | TableItem[]\n  transform?: boolean // flat parentId → tree\n  rowField?: string\n  parentField?: string // default 'parentId'\n  treeNode?: string // column key for toggler; default first column\n  showLine?: boolean\n}\n```\n\n<h4 id=\"TableColumnDefinition\">TableColumnDefinition</h4>\n\n列定义，传给 `columns`：\n\n```ts\ninterface TableColumnDefinition {\n  key: string\n  label: string\n  width?: number\n  minWidth?: number\n  sortable?: boolean\n  fixed?: boolean | 'left' | 'right'\n  align?: 'start' | 'center' | 'end'\n  render?: (row: TableItem) => unknown\n  showOverflowTooltip?: boolean\n}\n```\n\n<h4 id=\"TableServerOptions\">TableServerOptions</h4>\n\n服务端分页/排序时传给 `serverOptions`，配合 `serverTotal`：\n\n```ts\ninterface TableServerOptions {\n  page: number\n  rowsPerPage: number\n  sortBy?: string | string[]\n  sortType?: 'asc' | 'desc' | ('asc' | 'desc')[]\n}\n```\n\n更多见 [API 类型](/docs/types)。"
+              "body": "<h4 id=\"TableItem\">TableItem</h4>\n\n```ts\ntype TableItem = Record<string, unknown>\n```\n\n<h4 id=\"TableSortConfig\">TableSortConfig</h4>\n\n统一排序配置；`field` / `order` 描述当前单列排序状态，`mode` 决定由表格内部或外部接管排序：\n\n```ts\ninterface TableSortConfig {\n  field?: string | null\n  order?: 'asc' | 'desc' | null\n  multiple?: boolean\n  must?: boolean\n  mode?: 'client' | 'emit'\n}\n```\n\n<h4 id=\"TablePassThrough\">TablePassThrough</h4>\n\n多部分 DOM 透传，支持 class / style / 任意 attrs：\n\n```ts\ninterface TablePassThrough {\n  root?: Record<string, unknown>\n  scrollbar?: Record<string, unknown>\n  thead?: Record<string, unknown>\n  tbody?: Record<string, unknown>\n  tfoot?: Record<string, unknown>\n  pagination?: Record<string, unknown>\n  emptyMessage?: Record<string, unknown>\n}\n```\n\n<h4 id=\"TableTextDirection\">TableTextDirection</h4>\n\n```ts\ntype TableTextDirection = 'left' | 'center' | 'right'\n```\n\n<h4 id=\"TableFilterOption\">TableFilterOption</h4>\n\n```ts\ntype TableFilterOption =\n  | { field: string; comparison: 'between'; criteria: [number, number] }\n  | { field: string; comparison: '=' | '!='; criteria: number | string }\n  | { field: string; comparison: '>' | '>=' | '<' | '<='; criteria: number }\n  | { field: number | string; comparison: 'in'; criteria: number[] | string[] }\n  | { field: string; comparison: (value: unknown, criteria: string) => boolean; criteria: string }\n```\n\n<h4 id=\"TableHeaderItemClassName\">TableHeaderItemClassName</h4>\n\n```ts\ntype TableHeaderItemClassName = string | ((header: TableHeader, columnNumber: number) => string)\n```\n\n<h4 id=\"TableBodyRowClassName\">TableBodyRowClassName</h4>\n\n```ts\ntype TableBodyRowClassName = string | ((item: TableItem, rowNumber: number) => string)\n```\n\n<h4 id=\"TableBodyItemClassName\">TableBodyItemClassName</h4>\n\n```ts\ntype TableBodyItemClassName = string | ((column: string, rowNumber: number) => string)\n```\n\n<h4 id=\"TableTreeConfig\">TableTreeConfig</h4>\n\n```ts\ninterface TableTreeConfig {\n  childrenField?: string // default 'children'\n  indent?: number // default 16\n  expandAll?: boolean\n  accordion?: boolean\n  trigger?: 'default' | 'row'\n  lazy?: boolean\n  hasChildField?: string // default 'hasChild'\n  loadMethod?: (row: TableItem) => Promise<TableItem[]> | TableItem[]\n  transform?: boolean // flat parentId → tree\n  rowField?: string\n  parentField?: string // default 'parentId'\n  treeNode?: string // column key for toggler; default first column\n  showLine?: boolean\n}\n```\n\n<h4 id=\"TableColumnDefinition\">TableColumnDefinition</h4>\n\n列定义，传给 `columns`：\n\n```ts\ninterface TableColumnDefinition {\n  key: string\n  label: string\n  width?: number\n  minWidth?: number\n  sortable?: boolean\n  fixed?: boolean | 'left' | 'right'\n  align?: 'start' | 'center' | 'end'\n  render?: (row: TableItem) => unknown\n  showOverflowTooltip?: boolean\n  resizable?: boolean\n  filterable?: boolean\n  filters?: TableColumnFilter[]\n  children?: TableColumnDefinition[]\n}\n```\n\n<h4 id=\"TableServerOptions\">TableServerOptions</h4>\n\n服务端分页/排序时传给 `serverOptions`，配合 `serverTotal`：\n\n```ts\ninterface TableServerOptions {\n  page: number\n  rowsPerPage: number\n  sortBy?: string | string[]\n  sortType?: 'asc' | 'desc' | ('asc' | 'desc')[]\n}\n```\n\n更多见 [API 类型](/docs/types)。"
             }
           ],
-          "markdown": "---\ntitle: Table\ncategory: 03 / DATA\ndescription: 数据表格。支持排序、筛选、选择、分页、固定列与空/加载态。列宽支持 width / minWidth / fit。\n---\n\n# Table\n\n`MTable` 用于展示结构化行数据。通过 `columns` 定义列、`rows` 传入数据；内置客户端排序、筛选、分页与行选择，也支持服务端分页模式。多选表头「全选」仅作用于当前页。\n\n列宽规则：\n\n- 设置了 `width` 的列为固定宽度\n- 未设 `width` 的列以 `minWidth`（默认 `80`）为弹性下限；`fit` 为 `true`（默认）时，剩余宽度按比例分配给弹性列\n- 总最小宽度超出容器时出现横向滚动\n- 需要表体自己滚动时用 `maxHeight` / `tableHeight`；与 `MLayout` 根滚动叠用时优先固定表高，避免双层滚动条\n- 全视口主列表可用 `MPageContent fill` + `MTable fill paginator`（表体滚动、分页贴底）；嵌入表或短页不必使用 `fill`\n\n## 引入\n\n```ts\nimport type { TableColumnDefinition, TableItem } from 'morya-ui'\nimport { MTable, MTag } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.zh.vue\"\n```\n\n## 行选择\n\n多选配合 `selection-mode=\"multiple\"` 与 `v-model:selection`；单选使用 `selection-mode=\"single\"` 与 `v-model:selected-item`。表头全选仅选中当前页。\n\n```vue preview src=\"./demos/Selection.zh.vue\"\n```\n\n## 筛选与分页\n\n客户端筛选可通过 `search-value` / `filter-options`；分页开启 `paginator` 并配合 `v-model:page` 与 `rows-per-page`（受控同步）。\n\n```vue preview src=\"./demos/FilterAndPagination.zh.vue\"\n```\n\n## 固定列\n\n列定义中设置 `fixed: 'left' | 'right'`（或 `fixed: true` 视为左固定）。\n\n```vue preview src=\"./demos/FixedColumns.zh.vue\"\n```\n\n## 展开行与列渲染\n\n列可通过 `render` 或 `#cell-{key}` 自定义单元格。展开行设置 `expandable`（或 `expandConfig`），详情由 `#expansion` 提供。树模式下 `expandedRowKeys` 用于树节点展开，不可同时用于详情展开。\n\n```vue preview src=\"./demos/ExpandableRows.zh.vue\"\n```\n\n## 列宽拖拽与表头筛选\n\n列设置 `resizable` 可拖拽改宽（`v-model:column-widths`）；`filterable` 显示表头筛选，可选 `filters` 为多选选项，否则为文本包含筛选。面板内 **清除** 仅重置草稿，**确认** 后才写入 `v-model:filters`。\n\n```vue preview src=\"./demos/ResizeAndFilter.zh.vue\"\n```\n\n## 虚拟滚动\n\n开启 `virtual`，并提供 `maxHeight` / `tableHeight` / `fill` 之一以形成滚动视口；缺高度时开发环境会 `console.warn`。展开行 / `#expansion` / `expandConfig` 与虚拟滚动互斥，会自动降级为普通渲染（开发环境会提示）。\n\n```vue preview src=\"./demos/VirtualScroll.zh.vue\"\n```\n\n## 多级表头、表尾与合并\n\n列支持 `children` 多级表头；`show-footer` + `footer-method` 渲染合计（`footerMethod({ columns, data })` 返回行矩阵，或使用 `#footer` 插槽完全自定义）；`span-method` 合并单元格。\n\n```vue preview src=\"./demos/GridFeatures.zh.vue\"\n```\n\n## 空态与加载\n\n```vue preview src=\"./demos/EmptyAndLoading.zh.vue\"\n```\n\n## 树形表格\n\n传入 `tree-config` 启用树模式：嵌套 `children`，或 `transform` + `parentId` 扁平数据。展开状态用 `v-model:expanded-row-keys`。支持 `expandAll` / `expandRowKeys`、`accordion`、`trigger`、`toggleMethod`、懒加载 `lazy` + `loadMethod`。\n\n实例方法：`setTreeExpand`、`setAllTreeExpand`、`toggleTreeExpand`、`isTreeExpandByRow`、`getTreeExpandRecords`、`clearTreeExpand`。\n\n树 + 多选时默认父子级联与半选（`checkbox-config.check-strictly=false`）；`checkMethod` 可禁用单行勾选。\n\n```vue preview src=\"./demos/Tree.zh.vue\"\n```\n\n## 服务端模式\n\n传入 `server-options` 与 `server-total`，通过 `v-model:server-options` 同步页码、每页条数与排序字段。\n\n```vue preview src=\"./demos/Demo7.vue\"\n```\n\n## Breaking changes\n\n- 移除内置单元格编辑：`editConfig`、列 `editable`、`edit-change`、`#edit-{key}`；请用 `#cell-{key}` / `render` 自定义\n- 移除 `MTreeTable`（含 `morya-ui/tree-table`）；树表改用 `MTable` + `treeConfig`\n- `serverItemsLength` → `serverTotal`；`rowsItems` → `pageSizes`\n- `hideHeader` 移除；改用 `showHeader`（默认 `true`）\n- `hideRowsPerPage` 移除；改用 `showRowsPerPage`（默认 `true`）\n- 移除：`clickEventType`、`rowsPerPageMessage`、`rowsOfPageSeparatorMessage`、`preventContextMenuRow`、`tableNodeId`\n- 事件：`contextmenuRow` → `row-contextmenu`；`selectRow` / `deselectRow` / `selectAll` → `select-row` / `deselect-row` / `select-all`\n- 移除事件：`updatePageItems`、`updateTotalItems`、`page`（保留 `update:page`）\n- 行交互：始终同时支持单击 / 双击（`row-click` / `row-dblclick`）；右键始终 `preventDefault` 并抛出 `row-contextmenu`\n\n## TableColumnDefinition\n\n| 字段 | 类型 | 说明 |\n| --- | --- | --- |\n| `key` | `string` | 列字段名（绑定行数据的键）。 |\n| `label` | `string` | 列头文案。 |\n| `width` | `number` | 固定列宽（px）。 |\n| `minWidth` | `number` | 弹性列最小宽度，默认 `80`。 |\n| `sortable` | `boolean` | 是否可排序。 |\n| `fixed` | `boolean \\| 'left' \\| 'right'` | 固定列；`true` 等同 `'left'`。 |\n| `align` | `'start' \\| 'center' \\| 'end'` | 单元格对齐。 |\n| `render` | `(row) => unknown` | 自定义单元格渲染。 |\n| `showOverflowTooltip` | `boolean` | 该列文本溢出时显示 Tooltip。 |\n| `resizable` | `boolean` | 可拖拽调整列宽。 |\n| `filterable` | `boolean` | 显示表头筛选。 |\n| `filters` | `TableColumnFilter[]` | 表头筛选选项；省略则为文本筛选。 |\n| `children` | `TableColumnDefinition[]` | 多级表头子列。 |\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `columns` | `TableColumnDefinition[]` | — | 列定义。 |\n| `rows` | `TableItem[]` | — | 行数据。 |\n| `fit` | `boolean` | `true` | 弹性列是否撑满表格宽度。 |\n| `selectionMode` | `'single' \\| 'multiple' \\| null` | `null` | 行选择模式。 |\n| `selection` | `TableItem[] \\| null` | `null` | 多选绑定（`v-model:selection`）。 |\n| `selectedItem` | `TableItem \\| null` | `null` | 单选绑定（`v-model:selected-item`）。 |\n| `serverOptions` | `TableServerOptions \\| null` | `null` | 服务端分页/排序选项。 |\n| `serverTotal` | `number` | `0` | 服务端总条数。 |\n| `paginator` | `boolean` | `false` | 显示内置分页页脚。 |\n| `page` | `number` | `1` | 当前页（`v-model:page`）。 |\n| `rowsPerPage` | `number` | `25` | 每页条数。 |\n| `pageSizes` | `number[]` | `[25, 50, 100]` | 分页每页条数选项。 |\n| `showHeader` | `boolean` | `true` | 是否显示表头。 |\n| `showRowsPerPage` | `boolean` | `true` | 是否显示每页条数选择器。 |\n| `fill` | `boolean` | `false` | 撑满父级剩余高度（仅全视口主列表配 `MPageContent fill`）；表体滚动，分页贴底。设置 `maxHeight` / `tableHeight` 时忽略。 |\n| `columnWidths` | `Record<string, number> \\| null` | `null` | 列宽（`v-model:column-widths`）。 |\n| `virtual` | `boolean` | `false` | 行虚拟滚动（需高度；展开行时跳过）。 |\n| `virtualRowHeight` | `number` | `40` | 虚拟行高估算。 |\n| `hiddenColumns` | `string[] \\| null` | `null` | 隐藏列键（`v-model:hidden-columns`）。 |\n| `columnOrder` | `string[] \\| null` | `null` | 叶列顺序（`v-model:column-order`）。 |\n| `showFooter` | `boolean` | `false` | 显示表尾。 |\n| `footerMethod` | `TableFooterMethod \\| null` | `null` | 表尾数据。 |\n| `spanMethod` | `TableSpanMethod \\| null` | `null` | 单元格合并。 |\n| `treeConfig` | `TableTreeConfig \\| null` | `null` | 树形行。 |\n| `expandConfig` | `TableExpandConfig \\| null` | `null` | 详情展开配置（与树互斥）。 |\n| `checkboxConfig` | `TableCheckboxConfig \\| null` | `null` | 多选：级联 / `checkMethod` / `checkRowKeys` / `trigger` / `reserve`。 |\n| `radioConfig` | `TableRadioConfig \\| null` | `null` | 单选：`strict` / `checkMethod` / `trigger`。 |\n| `expandable` | `boolean` | `false` | 显示展开列（也可由 `#expansion` 或 `expandConfig` 启用）。 |\n| `striped` | `boolean` | `false` | 斑马纹行。 |\n| `bordered` | `boolean` | `false` | 单元格边框。 |\n| `highlightCurrent` | `boolean` | `false` | 高亮当前行，配合 `v-model:current-row-key`。 |\n| `rowHover` | `boolean` | `true` | 行 hover 高亮。 |\n| `sortField` / `sortOrder` | — | — | 受控排序字段与方向。 |\n| `sortMode` | `'client' \\| 'emit'` | `'client'` | 客户端排序或仅抛出排序事件。 |\n| `searchField` / `searchValue` | — | — | 客户端搜索。 |\n| `filterOptions` | `TableFilterOption[]` | `null` | 结构化筛选条件。 |\n| `loading` | `boolean` | `false` | 加载中。 |\n| `emptyText` | `string` | — | 空数据文案。 |\n| `emptyDescription` | `string` | — | 空数据补充说明。 |\n| `maxHeight` | `number \\| null` | `null` | 表格最大高度，超出滚动。 |\n| `showOverflowTooltip` | `boolean` | `false` | 全局单元格溢出 Tooltip。 |\n| `rowKey` | `string` | `'id'` | 行唯一键字段。 |\n| `size` | `'small' \\| 'medium' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | 表格密度（`large`/`small` 同步单元格 padding）。 |\n| `ariaLabel` | `string` | — | — |\n| `bodyExpandRowClassName` | `TableBodyRowClassName` | — | — |\n| `bodyItemClassName` | `TableBodyItemClassName` | — | — |\n| `bodyRowClassName` | `TableBodyRowClassName` | — | — |\n| `bodyTextDirection` | `TableTextDirection` | — | — |\n| `checkboxColumnWidth` | `number \\| null` | — | — |\n| `clickRowToExpand` | `boolean` | — | — |\n| `currentRowKey` | `string \\| number \\| null` | — | — |\n| `expandColumnWidth` | `number` | — | — |\n| `expandedRowKeys` | `Array<string \\| number>` | — | — |\n| `filters` | `Record<string, unknown> \\| null` | — | — |\n| `fixedCheckbox` | `boolean` | — | — |\n| `fixedExpand` | `boolean` | — | — |\n| `fixedHeader` | `boolean` | — | — |\n| `fixedIndex` | `boolean` | — | — |\n| `headerClassName` | `string` | — | — |\n| `headerItemClassName` | `TableHeaderItemClassName` | — | — |\n| `headerTextDirection` | `TableTextDirection` | — | — |\n| `indexColumnWidth` | `number` | — | — |\n| `multiSort` | `boolean` | — | — |\n| `mustSort` | `boolean` | — | — |\n| `showIndex` | `boolean` | — | — |\n| `showIndexSymbol` | `string` | — | — |\n| `tableClassName` | `string` | — | — |\n| `tableHeight` | `number \\| null` | — | — |\n| `tableMinHeight` | `number` | — | — |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n\n## Slots\n\n| 插槽 | 说明 |\n| --- | --- |\n| `cell-{key}` | 列 `{key}` 单元格，作用域 `{ row, value, column }`（可自行实现编辑器）。 |\n| `footer` | 自定义表尾。 |\n| `body-cell` | 任意单元格，作用域 `{ row, column, value }`。 |\n| `expansion` | 展开行内容，作用域 `{ row }`。 |\n| `empty` | 自定义空态。 |\n| `loading` | 自定义加载态。 |\n| `pagination` | 自定义分页区域。 |\n| `body` | 自定义 `body` 内容。 |\n| `body-append` | 自定义 `body-append` 内容。 |\n| `body-prepend` | 自定义 `body-prepend` 内容。 |\n| `customize-headers` | 自定义 `customize-headers` 内容。 |\n| `header` | 自定义 `header` 内容。 |\n| `header-{key}` | 列头插槽（键名大小写与 `columns[].key` 一致）。 |\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `sort` | `{ sortField?, sortOrder? }` | 排序变化。 |\n| `row-click` | `{ row, index }`, `Event` | 行单击。 |\n| `row-dblclick` | `{ row, index }`, `Event` | 行双击。 |\n| `row-contextmenu` | `item`, `MouseEvent` | 行右键。 |\n| `select-row` | `TableItem` | 选中一行。 |\n| `deselect-row` | `TableItem` | 取消选中一行。 |\n| `select-all` | — | 全选当前页。 |\n| `current-change` | `row \\| null, oldRow \\| null` | 当前高亮行变化。 |\n| `expand` | `{ row, expanded }` | 行展开。 |\n| `update:selection` | `TableItem[]` | 多选 v-model。 |\n| `update:page` | `number` | 页码 v-model。 |\n| `update:server-options` | `TableServerOptions` | 服务端选项 v-model。 |\n| `update:current-row-key` | `string \\| number \\| null` | 当前行键 v-model。 |\n| `filter` | — | — |\n| `update:expandedRowKeys` | — | — |\n| `update:filters` | — | — |\n| `update:columnWidths` | `Record<string, number>` | 列宽 v-model。 |\n| `update:hiddenColumns` | `string[]` | 隐藏列 v-model。 |\n| `update:columnOrder` | `string[]` | 列顺序 v-model。 |\n| `update:selectedItem` | — | — |\n\n## 实例方法\n\n通过 `ref` 可访问分页、筛选、选择、滚动与展开控制：\n\n| 方法 / 属性 | 说明 |\n| --- | --- |\n| `currentPageFirstIndex` | 当前页首条记录的索引（无数据时为 `-1`）。 |\n| `currentPageLastIndex` | 当前页末条记录的索引。 |\n| `clientItemsLength` | 数据总条数（服务端模式下为服务端总数）。 |\n| `maxPaginationNumber` | 最大页码。 |\n| `currentPaginationNumber` | 当前页码。 |\n| `isLastPage` / `isFirstPage` | 是否末页 / 首页。 |\n| `nextPage()` / `prevPage()` | 下一页 / 上一页。 |\n| `updatePage(page)` | 跳到指定页码。 |\n| `rowsPerPageOptions` | 每页条数选项。 |\n| `rowsPerPageActiveOption` | 当前生效的每页条数。 |\n| `updateRowsPerPageActiveOption(n)` | 修改每页条数。 |\n| `setFilters(filters)` / `clearFilter()` | 设置 / 清空筛选。 |\n| `setColumnWidths(widths)` | 设置列宽（等同 `v-model:column-widths`）。 |\n| `setHiddenColumns(keys)` | 设置隐藏列键（等同 `v-model:hidden-columns`）。 |\n| `setColumnOrder(keys)` | 设置叶列顺序（等同 `v-model:column-order`）。 |\n| `clearSort()` | 清空排序。 |\n| `getCheckboxRecords()` | 当前多选行。 |\n| `setCheckboxRow(rows, checked)` | 设置行选中状态。 |\n| `clearCheckboxRow()` | 清空多选。 |\n| `isCheckedByCheckboxRow(row)` | 行是否选中。 |\n| `isAllCheckboxChecked()` | 当前页是否全选。 |\n| `getCheckboxIndeterminateRecords()` | 半选行（树级联）。 |\n| `scrollTo(...)` / `scrollToRow(row)` | 滚动定位。 |\n| `setRowExpand` / `setAllRowExpand` / `toggleRowExpand` / `clearRowExpand` / `isRowExpandByRow` / `getRowExpandRecords` | 详情展开（非树模式）。 |\n| `setTreeExpand` / `setAllTreeExpand` / `toggleTreeExpand` / `clearTreeExpand` / `isTreeExpandByRow` / `getTreeExpandRecords` | 树节点展开。 |\n\n## 类型\n\n<h4 id=\"TableItem\">TableItem</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ntype TableItem = Record<string, unknown>\n```\n\n<h4 id=\"TableTextDirection\">TableTextDirection</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ntype TableTextDirection = 'left' | 'center' | 'right'\n```\n\n<h4 id=\"TableFilterOption\">TableFilterOption</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ntype TableFilterOption = | { field: string; comparison: 'between'; criteria: [number, number] }\n  | { field: string; comparison: '=' | '!='; criteria: number | string }\n  | { field: string; comparison: '>' | '>=' | '<' | '<='; criteria: number }\n  | { field: number | string; comparison: 'in'; criteria: number[] | string[] }\n  | { field: string; comparison: (value: unknown, criteria: string) => boolean; criteria: string }\n```\n\n<h4 id=\"TableHeaderItemClassName\">TableHeaderItemClassName</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ntype TableHeaderItemClassName = string | ((header: TableHeader, columnNumber: number) => string)\n```\n\n<h4 id=\"TableBodyRowClassName\">TableBodyRowClassName</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ntype TableBodyRowClassName = string | ((item: TableItem, rowNumber: number) => string)\n```\n\n<h4 id=\"TableBodyItemClassName\">TableBodyItemClassName</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ntype TableBodyItemClassName = string | ((column: string, rowNumber: number) => string)\n```\n\n\n<h4 id=\"TableTreeConfig\">TableTreeConfig</h4>\n\n```ts\ninterface TableTreeConfig {\n  childrenField?: string // default 'children'\n  indent?: number // default 16\n  expandAll?: boolean\n  accordion?: boolean\n  trigger?: 'default' | 'row'\n  lazy?: boolean\n  hasChildField?: string // default 'hasChild'\n  loadMethod?: (row: TableItem) => Promise<TableItem[]> | TableItem[]\n  transform?: boolean // flat parentId → tree\n  rowField?: string\n  parentField?: string // default 'parentId'\n  treeNode?: string // column key for toggler; default first column\n  showLine?: boolean\n}\n```\n\n<h4 id=\"TableColumnDefinition\">TableColumnDefinition</h4>\n\n列定义，传给 `columns`：\n\n```ts\ninterface TableColumnDefinition {\n  key: string\n  label: string\n  width?: number\n  minWidth?: number\n  sortable?: boolean\n  fixed?: boolean | 'left' | 'right'\n  align?: 'start' | 'center' | 'end'\n  render?: (row: TableItem) => unknown\n  showOverflowTooltip?: boolean\n}\n```\n\n<h4 id=\"TableServerOptions\">TableServerOptions</h4>\n\n服务端分页/排序时传给 `serverOptions`，配合 `serverTotal`：\n\n```ts\ninterface TableServerOptions {\n  page: number\n  rowsPerPage: number\n  sortBy?: string | string[]\n  sortType?: 'asc' | 'desc' | ('asc' | 'desc')[]\n}\n```\n\n更多见 [API 类型](/docs/types)。\n"
+          "markdown": "---\ntitle: Table\ncategory: 03 / DATA\ndescription: 数据表格。支持排序、筛选、选择、分页、固定列、列拖拽、列设置、骨架屏与虚拟滚动。列宽支持 width / minWidth / fit。\n---\n\n# Table\n\n`MTable` 用于展示结构化行数据。通过 `columns` 定义列、`rows` 传入数据；内置客户端排序、筛选、分页与行选择，也支持服务端分页模式。多选表头「全选」仅作用于当前页。\n\n列宽规则：\n\n- 设置了 `width` 的列为固定宽度\n- 未设 `width` 的列以 `minWidth`（默认 `80`）为弹性下限；`fit` 为 `true`（默认）时，剩余宽度按比例分配给弹性列\n- 总最小宽度超出容器时出现横向滚动\n- 需要表体自己滚动时用 `maxHeight` / `tableHeight`；与 `MLayout` 根滚动叠用时优先固定表高，避免双层滚动条\n- 全视口主列表可用 `MPageContent fill` + `MTable fill paginator`（表体滚动、分页贴底）；嵌入表或短页不必使用 `fill`\n\n## 引入\n\n```ts\nimport type { TableColumnDefinition, TableItem, TableSortConfig, TablePassThrough } from 'morya-ui'\nimport { MTable, MTag } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.zh.vue\"\n```\n\n## 行选择\n\n多选配合 `selection-mode=\"multiple\"` 与 `v-model:selection`；单选使用 `selection-mode=\"single\"` 与 `v-model:selected-item`。表头全选仅选中当前页。\n\n```vue preview src=\"./demos/Selection.zh.vue\"\n```\n\n## 筛选与分页\n\n客户端筛选可通过 `search-value` / `filter-options`；分页开启 `paginator` 并配合 `v-model:page` 与 `rows-per-page`（受控同步）。\n\n```vue preview src=\"./demos/FilterAndPagination.zh.vue\"\n```\n\n## 固定列\n\n列定义中设置 `fixed: 'left' | 'right'`（或 `fixed: true` 视为左固定）。\n\n```vue preview src=\"./demos/FixedColumns.zh.vue\"\n```\n\n## 展开行与列渲染\n\n列可通过 `render` 或 `#cell-{key}` 自定义单元格。展开行设置 `expandable`（或 `expandConfig`），详情由 `#expansion` 提供。树模式下 `expandedRowKeys` 用于树节点展开，不可同时用于详情展开。\n\n```vue preview src=\"./demos/ExpandableRows.zh.vue\"\n```\n\n## 排序（sortConfig）\n\n通过 `sort-config` 统一配置排序：`{ field, order, multiple, must, mode }`。`mode: 'client'`（默认）由表格内部对当前页数据排序；`mode: 'emit'` 时表格只触发 `sort-change` 事件，数据由外部接管（适合服务端排序）。多列排序设 `multiple: true`，禁止取消排序设 `must: true`。\n\n```vue preview src=\"./demos/Sorting.zh.vue\"\n```\n\n## 列宽拖拽与表头筛选\n\n列设置 `resizable` 可拖拽改宽（`v-model:column-widths`）；`filterable` 显示表头筛选，列定义里的 `filters` 为多选选项，省略则为文本包含筛选。面板内 **清除** 仅重置草稿，**确认** 后才写入 `v-model:filter-model`（旧 prop 名 `filters` 仍兼容）。\n\n```vue preview src=\"./demos/ResizeAndFilter.zh.vue\"\n```\n\n## 列设置面板\n\n开启 `column-setting` 在表头右上角显示「列设置」按钮，弹出面板可勾选显示/隐藏列，配合 `v-model:hidden-columns` 持久化。面板文案随 `MLocale` 切换。\n\n```vue preview src=\"./demos/ColumnSetting.zh.vue\"\n```\n\n## 列拖拽排序\n\n开启 `column-drag` 后，拖拽表头单元格可调整叶列顺序，顺序由 `v-model:column-order` 同步。拖放仅在同一层级内进行，不会破坏多级表头结构。\n\n```vue preview src=\"./demos/ColumnDrag.zh.vue\"\n```\n\n## 骨架屏加载\n\n通过 `skeleton` 启用骨架屏加载态，替代整页遮罩 spinner；`skeleton-rows` 控制骨架行数（默认 `5`）。骨架屏会让用户提前感知表格布局，加载体验更好。\n\n```vue preview src=\"./demos/Skeleton.zh.vue\"\n```\n\n## 虚拟滚动\n\n开启 `virtual`，并提供 `maxHeight` / `tableHeight` / `fill` 之一以形成滚动视口；缺高度时开发环境会 `console.warn`。展开行 / `#expansion` / `expandConfig` 与虚拟滚动互斥，会自动降级为普通渲染（开发环境会提示）。\n\n```vue preview src=\"./demos/VirtualScroll.zh.vue\"\n```\n\n## 动态行高虚拟滚动\n\n默认虚拟滚动要求所有行等高（由 `virtual-row-height` 估算）。如果某些行由于内容差异存在不同高度，可开启 `virtual-dynamic-row-height`：表格会通过 `ResizeObserver` 实测每行高度并缓存，配合前缀和 + 二分查找实现 O(log n) 滚动定位，长列表下滚动仍保持流畅。\n\n```vue preview src=\"./demos/DynamicRowHeight.zh.vue\"\n```\n\n## 多级表头、表尾与合并\n\n列支持 `children` 多级表头；`show-footer` + `footer-method` 渲染合计（`footerMethod({ columns, data })` 返回行矩阵，或使用 `#footer` 插槽完全自定义）；`span-method` 合并单元格。\n\n```vue preview src=\"./demos/GridFeatures.zh.vue\"\n```\n\n## 空态与加载\n\n```vue preview src=\"./demos/EmptyAndLoading.zh.vue\"\n```\n\n## 树形表格\n\n传入 `tree-config` 启用树模式：嵌套 `children`，或 `transform` + `parentId` 扁平数据。展开状态用 `v-model:expanded-row-keys`。支持 `expandAll` / `expandRowKeys`、`accordion`、`trigger`、`toggleMethod`、懒加载 `lazy` + `loadMethod`。\n\n实例方法：`setTreeExpand`、`setAllTreeExpand`、`toggleTreeExpand`、`isTreeExpandByRow`、`getTreeExpandRecords`、`clearTreeExpand`。\n\n树 + 多选时默认父子级联与半选（`checkbox-config.check-strictly=false`）；`checkMethod` 可禁用单行勾选。\n\n```vue preview src=\"./demos/Tree.zh.vue\"\n```\n\n## 服务端模式\n\n传入 `server-options` 与 `server-total`，通过 `v-model:server-options` 同步页码、每页条数与排序字段。\n\n```vue preview src=\"./demos/Demo7.vue\"\n```\n\n## Breaking changes\n\n- 移除内置单元格编辑：`editConfig`、列 `editable`、`edit-change`、`#edit-{key}`；请用 `#cell-{key}` / `render` 自定义\n- 移除 `MTreeTable`（含 `morya-ui/tree-table`）；树表改用 `MTable` + `treeConfig`\n- `serverItemsLength` → `serverTotal`；`rowsItems` → `pageSizes`\n- `hideHeader` 移除；改用 `showHeader`（默认 `true`）\n- `hideRowsPerPage` 移除；改用 `showRowsPerPage`（默认 `true`）\n- 移除：`clickEventType`、`rowsPerPageMessage`、`rowsOfPageSeparatorMessage`、`preventContextMenuRow`、`tableNodeId`\n- 事件：`sortChange` → `sort-change`；`expandRow` → `expand-change`；`contextmenuRow` → `row-contextmenu`；`selectRow` / `deselectRow` / `selectAll` → `select-row` / `deselect-row` / `select-all`\n- 新增事件：`filter-change`（列筛选提交）\n- 移除事件：`updatePageItems`、`updateTotalItems`、`page`（保留 `update:page`）\n- 行交互：始终同时支持单击 / 双击（`row-click` / `row-dblclick`）；右键始终 `preventDefault` 并抛出 `row-contextmenu`\n- 排序 props 合并：`sortField` / `sortOrder` / `multiSort` / `mustSort` / `sortMode` 仍兼容，新代码请使用 `sortConfig: TableSortConfig`\n- 筛选 v-model：`v-model:filters` 仍兼容，新代码请使用 `v-model:filter-model`\n\n## TableColumnDefinition\n\n| 字段 | 类型 | 说明 |\n| --- | --- | --- |\n| `key` | `string` | 列字段名（绑定行数据的键）。 |\n| `label` | `string` | 列头文案。 |\n| `width` | `number` | 固定列宽（px）。 |\n| `minWidth` | `number` | 弹性列最小宽度，默认 `80`。 |\n| `sortable` | `boolean` | 是否可排序。 |\n| `fixed` | `boolean \\| 'left' \\| 'right'` | 固定列；`true` 等同 `'left'`。 |\n| `align` | `'start' \\| 'center' \\| 'end'` | 单元格对齐。 |\n| `render` | `(row) => unknown` | 自定义单元格渲染。 |\n| `showOverflowTooltip` | `boolean` | 该列文本溢出时显示 Tooltip。 |\n| `resizable` | `boolean` | 可拖拽调整列宽。 |\n| `filterable` | `boolean` | 显示表头筛选。 |\n| `filters` | `TableColumnFilter[]` | 表头筛选选项；省略则为文本筛选。 |\n| `children` | `TableColumnDefinition[]` | 多级表头子列。 |\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `columns` | `TableColumnDefinition[]` | — | 列定义。 |\n| `rows` | `TableItem[]` | — | 行数据。 |\n| `fit` | `boolean` | `true` | 弹性列是否撑满表格宽度。 |\n| `selectionMode` | `'single' \\| 'multiple' \\| null` | `null` | 行选择模式。 |\n| `selection` | `TableItem[] \\| null` | `null` | 多选绑定（`v-model:selection`）。 |\n| `selectedItem` | `TableItem \\| null` | `null` | 单选绑定（`v-model:selected-item`）。 |\n| `serverOptions` | `TableServerOptions \\| null` | `null` | 服务端分页/排序选项。 |\n| `serverTotal` | `number` | `0` | 服务端总条数。 |\n| `paginator` | `boolean` | `false` | 显示内置分页页脚。 |\n| `page` | `number` | `1` | 当前页（`v-model:page`）。 |\n| `rowsPerPage` | `number` | `25` | 每页条数。 |\n| `pageSizes` | `number[]` | `[25, 50, 100]` | 分页每页条数选项。 |\n| `showHeader` | `boolean` | `true` | 是否显示表头。 |\n| `showRowsPerPage` | `boolean` | `true` | 是否显示每页条数选择器。 |\n| `fill` | `boolean` | `false` | 撑满父级剩余高度（仅全视口主列表配 `MPageContent fill`）；表体滚动，分页贴底。设置 `maxHeight` / `tableHeight` 时忽略。 |\n| `columnWidths` | `Record<string, number> \\| null` | `null` | 列宽（`v-model:column-widths`）。 |\n| `virtual` | `boolean` | `false` | 行虚拟滚动（需高度；展开行时跳过）。 |\n| `virtualRowHeight` | `number` | `40` | 虚拟行高估算。 |\n| `virtualDynamicRowHeight` | `boolean` | `false` | 动态行高虚拟滚动（实测行高缓存，配合 `ResizeObserver`）。 |\n| `virtualOverscan` | `number` | `4` | 虚拟滚动上下额外渲染的行数，减少白屏闪烁。 |\n| `hiddenColumns` | `string[] \\| null` | `null` | 隐藏列键（`v-model:hidden-columns`）。 |\n| `columnOrder` | `string[] \\| null` | `null` | 叶列顺序（`v-model:column-order`）。 |\n| `columnSetting` | `boolean` | `false` | 显示列设置按钮（显示/隐藏列）。 |\n| `columnDrag` | `boolean` | `false` | 表头拖拽排序。 |\n| `skeleton` | `boolean` | `false` | 骨架屏加载态。 |\n| `skeletonRows` | `number` | `5` | 骨架屏行数。 |\n| `showFooter` | `boolean` | `false` | 显示表尾。 |\n| `footerMethod` | `TableFooterMethod \\| null` | `null` | 表尾数据。 |\n| `spanMethod` | `TableSpanMethod \\| null` | `null` | 单元格合并。 |\n| `treeConfig` | `TableTreeConfig \\| null` | `null` | 树形行。 |\n| `expandConfig` | `TableExpandConfig \\| null` | `null` | 详情展开配置（与树互斥）。 |\n| `checkboxConfig` | `TableCheckboxConfig \\| null` | `null` | 多选：级联 / `checkMethod` / `checkRowKeys` / `trigger` / `reserve`。 |\n| `radioConfig` | `TableRadioConfig \\| null` | `null` | 单选：`strict` / `checkMethod` / `trigger`。 |\n| `expandable` | `boolean` | `false` | 显示展开列（也可由 `#expansion` 或 `expandConfig` 启用）。 |\n| `striped` | `boolean` | `false` | 斑马纹行。 |\n| `bordered` | `boolean` | `false` | 单元格边框。 |\n| `highlightCurrent` | `boolean` | `false` | 高亮当前行，配合 `v-model:current-row-key`。 |\n| `rowHover` | `boolean` | `true` | 行 hover 高亮。 |\n| `sortConfig` | `TableSortConfig \\| null` | `null` | 统一排序配置 `{ field, order, multiple, must, mode }`。 |\n| `sortField` | `string \\| null` | `null` | （兼容）单字段排序。建议用 `sortConfig`。 |\n| `sortOrder` | `'asc' \\| 'desc' \\| null` | `null` | （兼容）单字段排序方向。建议用 `sortConfig`。 |\n| `multiSort` | `boolean` | `false` | （兼容）多列排序。建议用 `sortConfig.multiple`。 |\n| `mustSort` | `boolean` | `false` | （兼容）禁止取消排序。建议用 `sortConfig.must`。 |\n| `sortMode` | `'client' \\| 'emit'` | `'client'` | （兼容）排序模式。建议用 `sortConfig.mode`。 |\n| `searchField` / `searchValue` | — | — | 客户端搜索。 |\n| `filterOptions` | `TableFilterOption[]` | `null` | 结构化筛选条件。 |\n| `filterModel` | `Record<string, unknown> \\| null` | `null` | 列筛选 v-model（与 `update:filter-model` 配合）。 |\n| `filters` | `Record<string, unknown> \\| null` | `null` | （兼容）旧筛选 v-model 名。 |\n| `loading` | `boolean` | `false` | 加载中。 |\n| `emptyText` | `string` | — | 空数据文案。 |\n| `emptyDescription` | `string` | — | 空数据补充说明。 |\n| `maxHeight` | `number \\| null` | `null` | 表格最大高度，超出滚动。 |\n| `showOverflowTooltip` | `boolean` | `false` | 全局单元格溢出 Tooltip。 |\n| `rowKey` | `string` | `'id'` | 行唯一键字段。 |\n| `size` | `'small' \\| 'medium' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | 表格密度（`large`/`small` 同步单元格 padding）。 |\n| `ariaLabel` | `string` | — | — |\n| `bodyExpandRowClassName` | `TableBodyRowClassName` | — | — |\n| `bodyItemClassName` | `TableBodyItemClassName` | — | — |\n| `bodyRowClassName` | `TableBodyRowClassName` | — | — |\n| `bodyTextDirection` | `TableTextDirection` | — | — |\n| `checkboxColumnWidth` | `number \\| null` | — | — |\n| `clickRowToExpand` | `boolean` | — | — |\n| `currentRowKey` | `string \\| number \\| null` | — | — |\n| `expandColumnWidth` | `number` | — | — |\n| `expandedRowKeys` | `Array<string \\| number>` | — | — |\n| `fixedCheckbox` | `boolean` | — | — |\n| `fixedExpand` | `boolean` | — | — |\n| `fixedHeader` | `boolean` | — | — |\n| `fixedIndex` | `boolean` | — | — |\n| `headerClassName` | `string` | — | — |\n| `headerItemClassName` | `TableHeaderItemClassName` | — | — |\n| `headerTextDirection` | `TableTextDirection` | — | — |\n| `indexColumnWidth` | `number` | — | — |\n| `showIndex` | `boolean` | — | — |\n| `showIndexSymbol` | `string` | — | — |\n| `tableClassName` | `string` | — | — |\n| `tableHeight` | `number \\| null` | — | — |\n| `tableMinHeight` | `number` | — | — |\n| `pt` | `TablePassThrough` | — | 多部分 DOM 透传：`{ root, scrollbar, thead, tbody, tfoot, pagination, emptyMessage }`。 |\n\n## Slots\n\n| 插槽 | 说明 |\n| --- | --- |\n| `cell-{key}` | 列 `{key}` 单元格，作用域 `{ row, value, column }`（可自行实现编辑器）。 |\n| `footer` | 自定义表尾。 |\n| `body-cell` | 任意单元格，作用域 `{ row, column, value }`。 |\n| `expansion` | 展开行内容，作用域 `{ row }`。 |\n| `empty` | 自定义空态。 |\n| `loading` | 自定义加载态（`skeleton` 为 true 时不生效）。 |\n| `pagination` | 自定义分页区域。 |\n| `body` | 自定义 `body` 内容。 |\n| `body-append` | 自定义 `body-append` 内容。 |\n| `body-prepend` | 自定义 `body-prepend` 内容。 |\n| `customize-headers` | 自定义 `customize-headers` 内容。 |\n| `header` | 自定义 `header` 内容。 |\n| `header-{key}` | 列头插槽（键名大小写与 `columns[].key` 一致）。 |\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `sort-change` | `{ sortField?, sortOrder? }` | 排序变化。 |\n| `filter-change` | `Record<string, unknown> \\| null` | 列筛选提交（与 `update:filter-model` 同步）。 |\n| `expand-change` | `{ row, expanded }` | 行展开状态变化（详情展开或树节点展开）。 |\n| `row-click` | `{ row, index }`, `Event` | 行单击。 |\n| `row-dblclick` | `{ row, index }`, `Event` | 行双击。 |\n| `row-contextmenu` | `item`, `MouseEvent` | 行右键。 |\n| `select-row` | `TableItem` | 选中一行。 |\n| `deselect-row` | `TableItem` | 取消选中一行。 |\n| `select-all` | — | 全选当前页。 |\n| `current-change` | `row \\| null, oldRow \\| null` | 当前高亮行变化。 |\n| `update:selection` | `TableItem[]` | 多选 v-model。 |\n| `update:page` | `number` | 页码 v-model。 |\n| `update:server-options` | `TableServerOptions` | 服务端选项 v-model。 |\n| `update:current-row-key` | `string \\| number \\| null` | 当前行键 v-model。 |\n| `update:expanded-row-keys` | `Array<string \\| number>` | 树/详情展开键 v-model。 |\n| `update:filter-model` | `Record<string, unknown> \\| null` | 列筛选 v-model。 |\n| `update:column-widths` | `Record<string, number>` | 列宽 v-model。 |\n| `update:hidden-columns` | `string[]` | 隐藏列 v-model。 |\n| `update:column-order` | `string[]` | 列顺序 v-model。 |\n| `update:selected-item` | `TableItem \\| null` | 单选 v-model。 |\n\n## 实例方法\n\n通过 `ref` 可访问分页、筛选、选择、滚动与展开控制：\n\n| 方法 / 属性 | 说明 |\n| --- | --- |\n| `currentPageFirstIndex` | 当前页首条记录的索引（无数据时为 `-1`）。 |\n| `currentPageLastIndex` | 当前页末条记录的索引。 |\n| `clientItemsLength` | 数据总条数（服务端模式下为服务端总数）。 |\n| `maxPaginationNumber` | 最大页码。 |\n| `currentPaginationNumber` | 当前页码。 |\n| `isLastPage` / `isFirstPage` | 是否末页 / 首页。 |\n| `nextPage()` / `prevPage()` | 下一页 / 上一页。 |\n| `updatePage(page)` | 跳到指定页码。 |\n| `rowsPerPageOptions` | 每页条数选项。 |\n| `rowsPerPageActiveOption` | 当前生效的每页条数。 |\n| `updateRowsPerPageActiveOption(n)` | 修改每页条数。 |\n| `setFilters(filters)` / `clearFilter()` | 设置 / 清空筛选。 |\n| `setColumnWidths(widths)` | 设置列宽（等同 `v-model:column-widths`）。 |\n| `setHiddenColumns(keys)` | 设置隐藏列键（等同 `v-model:hidden-columns`）。 |\n| `setColumnOrder(keys)` | 设置叶列顺序（等同 `v-model:column-order`）。 |\n| `clearSort()` | 清空排序。 |\n| `getCheckboxRecords()` | 当前多选行。 |\n| `setCheckboxRow(rows, checked)` | 设置行选中状态。 |\n| `clearCheckboxRow()` | 清空多选。 |\n| `isCheckedByCheckboxRow(row)` | 行是否选中。 |\n| `isAllCheckboxChecked()` | 当前页是否全选。 |\n| `getCheckboxIndeterminateRecords()` | 半选行（树级联）。 |\n| `scrollTo(...)` / `scrollToRow(row)` | 滚动定位。 |\n| `setRowExpand` / `setAllRowExpand` / `toggleRowExpand` / `clearRowExpand` / `isRowExpandByRow` / `getRowExpandRecords` | 详情展开（非树模式）。 |\n| `setTreeExpand` / `setAllTreeExpand` / `toggleTreeExpand` / `clearTreeExpand` / `isTreeExpandByRow` / `getTreeExpandRecords` | 树节点展开。 |\n\n## 类型\n\n<h4 id=\"TableItem\">TableItem</h4>\n\n```ts\ntype TableItem = Record<string, unknown>\n```\n\n<h4 id=\"TableSortConfig\">TableSortConfig</h4>\n\n统一排序配置；`field` / `order` 描述当前单列排序状态，`mode` 决定由表格内部或外部接管排序：\n\n```ts\ninterface TableSortConfig {\n  field?: string | null\n  order?: 'asc' | 'desc' | null\n  multiple?: boolean\n  must?: boolean\n  mode?: 'client' | 'emit'\n}\n```\n\n<h4 id=\"TablePassThrough\">TablePassThrough</h4>\n\n多部分 DOM 透传，支持 class / style / 任意 attrs：\n\n```ts\ninterface TablePassThrough {\n  root?: Record<string, unknown>\n  scrollbar?: Record<string, unknown>\n  thead?: Record<string, unknown>\n  tbody?: Record<string, unknown>\n  tfoot?: Record<string, unknown>\n  pagination?: Record<string, unknown>\n  emptyMessage?: Record<string, unknown>\n}\n```\n\n<h4 id=\"TableTextDirection\">TableTextDirection</h4>\n\n```ts\ntype TableTextDirection = 'left' | 'center' | 'right'\n```\n\n<h4 id=\"TableFilterOption\">TableFilterOption</h4>\n\n```ts\ntype TableFilterOption =\n  | { field: string; comparison: 'between'; criteria: [number, number] }\n  | { field: string; comparison: '=' | '!='; criteria: number | string }\n  | { field: string; comparison: '>' | '>=' | '<' | '<='; criteria: number }\n  | { field: number | string; comparison: 'in'; criteria: number[] | string[] }\n  | { field: string; comparison: (value: unknown, criteria: string) => boolean; criteria: string }\n```\n\n<h4 id=\"TableHeaderItemClassName\">TableHeaderItemClassName</h4>\n\n```ts\ntype TableHeaderItemClassName = string | ((header: TableHeader, columnNumber: number) => string)\n```\n\n<h4 id=\"TableBodyRowClassName\">TableBodyRowClassName</h4>\n\n```ts\ntype TableBodyRowClassName = string | ((item: TableItem, rowNumber: number) => string)\n```\n\n<h4 id=\"TableBodyItemClassName\">TableBodyItemClassName</h4>\n\n```ts\ntype TableBodyItemClassName = string | ((column: string, rowNumber: number) => string)\n```\n\n<h4 id=\"TableTreeConfig\">TableTreeConfig</h4>\n\n```ts\ninterface TableTreeConfig {\n  childrenField?: string // default 'children'\n  indent?: number // default 16\n  expandAll?: boolean\n  accordion?: boolean\n  trigger?: 'default' | 'row'\n  lazy?: boolean\n  hasChildField?: string // default 'hasChild'\n  loadMethod?: (row: TableItem) => Promise<TableItem[]> | TableItem[]\n  transform?: boolean // flat parentId → tree\n  rowField?: string\n  parentField?: string // default 'parentId'\n  treeNode?: string // column key for toggler; default first column\n  showLine?: boolean\n}\n```\n\n<h4 id=\"TableColumnDefinition\">TableColumnDefinition</h4>\n\n列定义，传给 `columns`：\n\n```ts\ninterface TableColumnDefinition {\n  key: string\n  label: string\n  width?: number\n  minWidth?: number\n  sortable?: boolean\n  fixed?: boolean | 'left' | 'right'\n  align?: 'start' | 'center' | 'end'\n  render?: (row: TableItem) => unknown\n  showOverflowTooltip?: boolean\n  resizable?: boolean\n  filterable?: boolean\n  filters?: TableColumnFilter[]\n  children?: TableColumnDefinition[]\n}\n```\n\n<h4 id=\"TableServerOptions\">TableServerOptions</h4>\n\n服务端分页/排序时传给 `serverOptions`，配合 `serverTotal`：\n\n```ts\ninterface TableServerOptions {\n  page: number\n  rowsPerPage: number\n  sortBy?: string | string[]\n  sortType?: 'asc' | 'desc' | ('asc' | 'desc')[]\n}\n```\n\n更多见 [API 类型](/docs/types)。\n"
         },
         "en-US": {
           "title": "Table",
-          "description": "Data table with sorting, filtering, selection, pagination, frozen columns, and empty/loading states. Column width supports width / minWidth / fit.",
+          "description": "Data table with sorting, filtering, selection, pagination, fixed columns, column drag, column settings, skeleton loading and virtual scrolling. Column widths support width / minWidth / fit.",
           "sections": [
             {
               "id": "overview",
               "title": "",
-              "body": "# Table\n\n`MTable` displays structured row data. Define columns with `columns`, pass data with `rows`, and use built-in client-side sort, filter, pagination, and row selection—or switch to server-driven pagination. Header “select all” applies to the current page only.\n\nColumn width rules:\n\n- Columns with `width` use a fixed width\n- Columns without `width` are flexible with a `minWidth` lower bound (default `80`); when `fit` is `true` (default), remaining width is distributed proportionally\n- Horizontal scrolling appears when the total minimum width exceeds the container\n- Prefer `maxHeight` / `tableHeight` when the table body should scroll on its own; when nested under `MLayout` root scroll, fix the table height to avoid stacked scrollbars\n- For full-viewport main lists, use `MPageContent fill` + `MTable fill paginator` (body scrolls; pagination at the bottom). Skip `fill` for embedded or short tables."
+              "body": "# Table\n\n`MTable` renders structured row data. Pass `columns` for column definitions and `rows` for data; built-in client-side sorting, filtering, pagination and row selection are included, with a server-side mode for remote sources. The header \"select all\" only applies to the current page.\n\nColumn width rules:\n\n- Columns with `width` are fixed.\n- Columns without `width` flex from `minWidth` (default `80`); when `fit` is `true` (default), remaining space is distributed proportionally.\n- Total minimum width beyond the container triggers horizontal scrolling.\n- Use `maxHeight` / `tableHeight` for body scrolling; with `MLayout` root scrolling prefer a fixed table height to avoid double scrollbars.\n- Full-viewport lists: `MPageContent fill` + `MTable fill paginator` (body scrolls, paginator pinned). Embedded tables and short pages don't need `fill`."
             },
             {
               "id": "import",
               "title": "Import",
-              "body": "```ts\nimport type { TableColumnDefinition, TableItem } from 'morya-ui'\nimport { MTable, MTag } from 'morya-ui'\n```"
+              "body": "```ts\nimport type { TableColumnDefinition, TableItem, TableSortConfig, TablePassThrough } from 'morya-ui'\nimport { MTable, MTag } from 'morya-ui'\n```"
             },
             {
               "id": "basic",
@@ -26948,92 +27878,117 @@
               "body": "```vue preview src=\"./demos/Basic.en.vue\"\n```"
             },
             {
-              "id": "selection",
-              "title": "Selection",
-              "body": "Use `selection-mode=\"multiple\"` with `v-model:selection`, or `selection-mode=\"single\"` with `v-model:selected-item`.\n\n```vue preview src=\"./demos/Selection.en.vue\"\n```"
+              "id": "row-selection",
+              "title": "Row Selection",
+              "body": "Multiple selection uses `selection-mode=\"multiple\"` with `v-model:selection`; single selection uses `selection-mode=\"single\"` with `v-model:selected-item`. Header \"select all\" only applies to the current page.\n\n```vue preview src=\"./demos/Selection.en.vue\"\n```"
             },
             {
-              "id": "filter-and-pagination",
-              "title": "Filter and pagination",
-              "body": "Use `search-value` / `filter-options` for client filtering. Enable `paginator` with `v-model:page` and `rows-per-page`.\n\n```vue preview src=\"./demos/FilterAndPagination.en.vue\"\n```"
+              "id": "filtering-pagination",
+              "title": "Filtering & Pagination",
+              "body": "Client-side filtering via `search-value` / `filter-options`; enable `paginator` with `v-model:page` and `rows-per-page` (controlled).\n\n```vue preview src=\"./demos/FilterAndPagination.en.vue\"\n```"
             },
             {
-              "id": "expandable-rows",
-              "title": "Expandable rows",
-              "body": "Customize cells with `render` or `#cell-{key}`. Set `expandable` (or `expandConfig`) and provide the `#expansion` slot. In tree mode, `expandedRowKeys` controls tree nodes and cannot be used for detail expansion at the same time.\n\n```vue preview src=\"./demos/ExpandableRows.en.vue\"\n```"
+              "id": "fixed-columns",
+              "title": "Fixed Columns",
+              "body": "Set `fixed: 'left' | 'right'` in the column definition (`fixed: true` equals left).\n\n```vue preview src=\"./demos/FixedColumns.en.vue\"\n```"
             },
             {
-              "id": "fixed-columns",
-              "title": "Fixed columns",
-              "body": "Set `fixed: 'left' | 'right'` on a column (or `fixed: true` for left).\n\n```vue preview src=\"./demos/FixedColumns.en.vue\"\n```"
+              "id": "expandable-rows-cell-rendering",
+              "title": "Expandable Rows & Cell Rendering",
+              "body": "Customize cells via `render` or `#cell-{key}`. Enable row details with `expandable` (or `expandConfig`) and provide content via `#expansion`. In tree mode `expandedRowKeys` is reserved for tree nodes and cannot also drive detail expansion.\n\n```vue preview src=\"./demos/ExpandableRows.en.vue\"\n```"
+            },
+            {
+              "id": "sorting-sortconfig",
+              "title": "Sorting (sortConfig)",
+              "body": "Use `sort-config` to configure sorting in one place: `{ field, order, multiple, must, mode }`. With `mode: 'client'` (default) the table sorts the current page itself; with `mode: 'emit'` only the `sort-change` event is emitted and the data is owned by the caller (useful for server-side sorting). Set `multiple: true` for multi-column sort and `must: true` to prevent clearing.\n\n```vue preview src=\"./demos/Sorting.en.vue\"\n```"
+            },
+            {
+              "id": "column-resizing-header-filters",
+              "title": "Column Resizing & Header Filters",
+              "body": "Set `resizable` to drag column widths (`v-model:column-widths`); `filterable` adds a header filter — column `filters` becomes a multi-select, otherwise a text-contains filter. **Clear** resets the draft, **OK** commits to `v-model:filter-model` (legacy `v-model:filters` still supported).\n\n```vue preview src=\"./demos/ResizeAndFilter.en.vue\"\n```"
             },
             {
-              "id": "column-resize-and-header-filters",
-              "title": "Column resize and header filters",
-              "body": "Set `resizable` to drag column widths (`v-model:column-widths`). Set `filterable` for a header filter; optional `filters` for checkbox options, otherwise free-text contains. **Clear** resets the draft only; **Confirm** applies to `v-model:filters`.\n\n```vue preview src=\"./demos/ResizeAndFilter.en.vue\"\n```"
+              "id": "column-settings-panel",
+              "title": "Column Settings Panel",
+              "body": "Enable `column-setting` to show a settings button in the header corner. The popover lets users toggle column visibility, synced via `v-model:hidden-columns`. Panel copy follows `MLocale`.\n\n```vue preview src=\"./demos/ColumnSetting.en.vue\"\n```"
             },
             {
-              "id": "virtual-scroll",
-              "title": "Virtual scroll",
-              "body": "Enable `virtual` with `maxHeight` / `tableHeight` / `fill` so the body scrolls; dev mode warns if height is missing. Expandable rows (`#expansion` / `expandConfig`) disable virtualization (dev warning when both are set).\n\n```vue preview src=\"./demos/VirtualScroll.en.vue\"\n```"
+              "id": "column-drag",
+              "title": "Column Drag",
+              "body": "Enable `column-drag` to reorder leaf columns by dragging header cells. Order is synced through `v-model:column-order`. Drag-and-drop stays within a single header level and never breaks multi-level headers.\n\n```vue preview src=\"./demos/ColumnDrag.en.vue\"\n```"
             },
             {
-              "id": "multi-header-footer-and-merges",
-              "title": "Multi-header, footer, and merges",
-              "body": "Use column `children` for grouped headers; `show-footer` + `footer-method` for summaries (`footerMethod({ columns, data })` matrix or `#footer` slot); `span-method` for merges.\n\n```vue preview src=\"./demos/GridFeatures.en.vue\"\n```"
+              "id": "skeleton-loading",
+              "title": "Skeleton Loading",
+              "body": "Enable `skeleton` for a skeleton loading state instead of a full-overlay spinner. `skeleton-rows` controls the number of placeholder rows (default `5`). Skeleton previews preserve the layout and feel much faster.\n\n```vue preview src=\"./demos/Skeleton.en.vue\"\n```"
             },
             {
-              "id": "empty-and-loading",
-              "title": "Empty and loading",
+              "id": "virtual-scrolling",
+              "title": "Virtual Scrolling",
+              "body": "Enable `virtual` and provide one of `maxHeight` / `tableHeight` / `fill` to form a scroll viewport; without one, the dev build warns. Expandable rows / `#expansion` / `expandConfig` are mutually exclusive with virtualization and fall back to plain rendering (with a dev warning).\n\n```vue preview src=\"./demos/VirtualScroll.en.vue\"\n```"
+            },
+            {
+              "id": "dynamic-row-height-virtual-scrolling",
+              "title": "Dynamic Row Height Virtual Scrolling",
+              "body": "By default virtual scrolling assumes all rows have equal height (estimated by `virtual-row-height`). If your rows vary in height due to content, enable `virtual-dynamic-row-height`: the table measures each row with `ResizeObserver`, caches the result, and uses prefix sums + binary search for O(log n) positioning, keeping long lists smooth.\n\n```vue preview src=\"./demos/DynamicRowHeight.en.vue\"\n```"
+            },
+            {
+              "id": "multi-level-headers-footer-span",
+              "title": "Multi-level Headers, Footer & Span",
+              "body": "Columns support `children` for multi-level headers; `show-footer` + `footer-method` renders totals (`footerMethod({ columns, data })` returns a row matrix, or use `#footer` for full customization); `span-method` merges cells.\n\n```vue preview src=\"./demos/GridFeatures.en.vue\"\n```"
+            },
+            {
+              "id": "empty-loading",
+              "title": "Empty & Loading",
               "body": "```vue preview src=\"./demos/EmptyAndLoading.en.vue\"\n```"
             },
             {
               "id": "tree-table",
-              "title": "Tree table",
-              "body": "Pass `tree-config` for hierarchical rows: nested `children`, or flat `parentId` with `transform`. Bind expand state with `v-model:expanded-row-keys`. Supports `expandAll` / `expandRowKeys`, `accordion`, `trigger`, `toggleMethod`, and lazy `loadMethod`.\n\nInstance methods: `setTreeExpand`, `setAllTreeExpand`, `toggleTreeExpand`, `isTreeExpandByRow`, `getTreeExpandRecords`, `clearTreeExpand`.\n\nWith multi-select, parent/child cascade and indeterminate are on by default (`checkbox-config.check-strictly=false`). Use `checkMethod` to disable specific rows.\n\n```vue preview src=\"./demos/Tree.en.vue\"\n```"
+              "title": "Tree Table",
+              "body": "Pass `tree-config` to enable tree mode: nested `children`, or `transform` + `parentId` for flat data. Expansion state is bound with `v-model:expanded-row-keys`. Supports `expandAll` / `expandRowKeys`, `accordion`, `trigger`, `toggleMethod`, and lazy loading via `lazy` + `loadMethod`.\n\nInstance methods: `setTreeExpand`, `setAllTreeExpand`, `toggleTreeExpand`, `isTreeExpandByRow`, `getTreeExpandRecords`, `clearTreeExpand`.\n\nWith multiple selection, parent-child cascading with half-check is enabled by default (`checkbox-config.check-strictly=false`); use `checkMethod` to disable a row's checkbox.\n\n```vue preview src=\"./demos/Tree.en.vue\"\n```"
             },
             {
               "id": "server-mode",
-              "title": "Server mode",
-              "body": "Pass `server-options` with `server-total`, and sync page / page size / sort via `v-model:server-options`.\n\n```vue preview src=\"./demos/Demo7.vue\"\n```"
+              "title": "Server Mode",
+              "body": "Pass `server-options` and `server-total`, syncing page, rows-per-page and sort fields via `v-model:server-options`.\n\n```vue preview src=\"./demos/Demo7.vue\"\n```"
             },
             {
               "id": "breaking-changes",
               "title": "Breaking changes",
-              "body": "- Removed built-in cell editing: `editConfig`, column `editable`, `edit-change`, `#edit-{key}`; use `#cell-{key}` / `render` instead\n- Removed `MTreeTable` (including `morya-ui/tree-table`); use `MTable` + `treeConfig`\n- `serverItemsLength` → `serverTotal`\n- `rowsItems` → `pageSizes`\n- Removed `hideHeader`; use `showHeader` (default `true`)\n- Removed `hideRowsPerPage`; use `showRowsPerPage` (default `true`)\n- Removed: `clickEventType`, `rowsPerPageMessage`, `rowsOfPageSeparatorMessage`, `preventContextMenuRow`, `tableNodeId`\n- Events: `contextmenuRow` → `row-contextmenu`; `selectRow` / `deselectRow` / `selectAll` → `select-row` / `deselect-row` / `select-all`\n- Removed events: `updatePageItems`, `updateTotalItems`, `page` (keep `update:page`)\n- Row interaction: click and dblclick always emit (`row-click` / `row-dblclick`); context menu always `preventDefault`s and emits `row-contextmenu`"
+              "body": "- Built-in cell editing removed: `editConfig`, column `editable`, `edit-change`, `#edit-{key}`; use `#cell-{key}` / `render` instead.\n- `MTreeTable` removed (including `morya-ui/tree-table`); use `MTable` + `treeConfig`.\n- `serverItemsLength` → `serverTotal`; `rowsItems` → `pageSizes`.\n- `hideHeader` removed; use `showHeader` (default `true`).\n- `hideRowsPerPage` removed; use `showRowsPerPage` (default `true`).\n- Removed: `clickEventType`, `rowsPerPageMessage`, `rowsOfPageSeparatorMessage`, `preventContextMenuRow`, `tableNodeId`.\n- Events: `sortChange` → `sort-change`; `expandRow` → `expand-change`; `contextmenuRow` → `row-contextmenu`; `selectRow` / `deselectRow` / `selectAll` → `select-row` / `deselect-row` / `select-all`.\n- New event: `filter-change` (header filter commit).\n- Removed events: `updatePageItems`, `updateTotalItems`, `page` (`update:page` kept).\n- Row interactions: always support single / double click (`row-click` / `row-dblclick`); right-click always `preventDefault` and emits `row-contextmenu`.\n- Sorting props merged: `sortField` / `sortOrder` / `multiSort` / `mustSort` / `sortMode` still work, but new code should use `sortConfig: TableSortConfig`.\n- Filter v-model: `v-model:filters` still works; new code should use `v-model:filter-model`."
             },
             {
               "id": "tablecolumndefinition",
               "title": "TableColumnDefinition",
-              "body": "| Field | Type | Description |\n| --- | --- | --- |\n| `key` | `string` | Field name bound to row data. |\n| `label` | `string` | Column header text. |\n| `width` | `number` | Fixed width in px. |\n| `minWidth` | `number` | Flex column minimum width; default `80`. |\n| `sortable` | `boolean` | Enable sorting. |\n| `fixed` | `boolean \\| 'left' \\| 'right'` | Freeze column (left freeze supported). |\n| `align` | `'start' \\| 'center' \\| 'end'` | Cell alignment. |\n| `render` | `(row) => unknown` | Custom cell renderer. |\n| `showOverflowTooltip` | `boolean` | Tooltip when cell text overflows. |\n| `resizable` | `boolean` | Drag to resize column width. |\n| `filterable` | `boolean` | Show header filter trigger. |\n| `filters` | `TableColumnFilter[]` | Header filter options; omit for text filter. |\n| `children` | `TableColumnDefinition[]` | Nested columns for multi-level headers. |"
+              "body": "| Field | Type | Description |\n| --- | --- | --- |\n| `key` | `string` | Field name on the row. |\n| `label` | `string` | Header text. |\n| `width` | `number` | Fixed column width (px). |\n| `minWidth` | `number` | Flex column minimum width, default `80`. |\n| `sortable` | `boolean` | Sortable. |\n| `fixed` | `boolean \\| 'left' \\| 'right'` | Fixed column; `true` equals `'left'`. |\n| `align` | `'start' \\| 'center' \\| 'end'` | Cell alignment. |\n| `render` | `(row) => unknown` | Custom cell renderer. |\n| `showOverflowTooltip` | `boolean` | Show tooltip on overflow. |\n| `resizable` | `boolean` | Allow drag resizing. |\n| `filterable` | `boolean` | Show header filter. |\n| `filters` | `TableColumnFilter[]` | Header filter options; omit for text filter. |\n| `children` | `TableColumnDefinition[]` | Multi-level sub-columns. |"
             },
             {
               "id": "props",
               "title": "Props",
-              "body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `columns` | `TableColumnDefinition[]` | — | Column definitions. |\n| `rows` | `TableItem[]` | — | Row data. |\n| `fit` | `boolean` | `true` | Flexible columns fill remaining width. |\n| `selectionMode` | `'single' \\| 'multiple' \\| null` | `null` | Row selection mode. |\n| `selection` | `TableItem[] \\| null` | `null` | Multi-select (`v-model:selection`). |\n| `selectedItem` | `TableItem \\| null` | `null` | Single-select (`v-model:selected-item`). |\n| `serverOptions` | `TableServerOptions \\| null` | `null` | Server paging/sort options. |\n| `serverTotal` | `number` | `0` | Total row count in server mode. |\n| `paginator` | `boolean` | `false` | Built-in pagination footer. |\n| `page` | `number` | `1` | Current page (`v-model:page`). |\n| `rowsPerPage` | `number` | `25` | Page size. |\n| `pageSizes` | `number[]` | `[25, 50, 100]` | Page size options. |\n| `showHeader` | `boolean` | `true` | Show table header. |\n| `showRowsPerPage` | `boolean` | `true` | Show page-size picker. |\n| `fill` | `boolean` | `false` | Fill remaining parent height (only for full-viewport main lists with `MPageContent fill`). Body scrolls; paginator stays at the bottom. Ignored when `maxHeight` / `tableHeight` is set. |\n| `treeConfig` | `TableTreeConfig \\| null` | `null` | Tree rows. |\n| `expandConfig` | `TableExpandConfig \\| null` | `null` | Detail expand (mutually exclusive with tree). |\n| `checkboxConfig` | `TableCheckboxConfig \\| null` | `null` | Multi-select options. |\n| `radioConfig` | `TableRadioConfig \\| null` | `null` | Single-select options. |\n| `striped` / `bordered` | `boolean` | `false` | Striped rows / cell borders. |\n| `highlightCurrent` | `boolean` | `false` | Highlight current row. |\n| `loading` / `emptyText` / `emptyDescription` | — | — | Loading and empty states. |\n| `maxHeight` | `number \\| null` | `null` | Scrollable body max height. |\n| `rowKey` | `string` | `'id'` | Stable row key field. |\n| `size` | `'small' \\| 'medium' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | Table density (`large`/`small` also adjust cell padding). |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |"
+              "body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `columns` | `TableColumnDefinition[]` | — | Column definitions. |\n| `rows` | `TableItem[]` | — | Row data. |\n| `fit` | `boolean` | `true` | Stretch flex columns to fill width. |\n| `selectionMode` | `'single' \\| 'multiple' \\| null` | `null` | Selection mode. |\n| `selection` | `TableItem[] \\| null` | `null` | Multiple selection (`v-model:selection`). |\n| `selectedItem` | `TableItem \\| null` | `null` | Single selection (`v-model:selected-item`). |\n| `serverOptions` | `TableServerOptions \\| null` | `null` | Server pagination/sort options. |\n| `serverTotal` | `number` | `0` | Server total count. |\n| `paginator` | `boolean` | `false` | Show built-in paginator. |\n| `page` | `number` | `1` | Current page (`v-model:page`). |\n| `rowsPerPage` | `number` | `25` | Rows per page. |\n| `pageSizes` | `number[]` | `[25, 50, 100]` | Page size options. |\n| `showHeader` | `boolean` | `true` | Show header. |\n| `showRowsPerPage` | `boolean` | `true` | Show rows-per-page selector. |\n| `fill` | `boolean` | `false` | Fill parent height (with `MPageContent fill`); body scrolls, paginator pinned. Ignored when `maxHeight` / `tableHeight` is set. |\n| `columnWidths` | `Record<string, number> \\| null` | `null` | Column widths (`v-model:column-widths`). |\n| `virtual` | `boolean` | `false` | Row virtualization (requires a height; skipped with expand rows). |\n| `virtualRowHeight` | `number` | `40` | Estimated virtual row height. |\n| `virtualDynamicRowHeight` | `boolean` | `false` | Dynamic row-height virtualization (measured & cached via `ResizeObserver`). |\n| `virtualOverscan` | `number` | `4` | Extra rows rendered above/below the viewport to avoid flicker. |\n| `hiddenColumns` | `string[] \\| null` | `null` | Hidden column keys (`v-model:hidden-columns`). |\n| `columnOrder` | `string[] \\| null` | `null` | Leaf column order (`v-model:column-order`). |\n| `columnSetting` | `boolean` | `false` | Show column settings button (visibility toggle). |\n| `columnDrag` | `boolean` | `false` | Header drag reordering. |\n| `skeleton` | `boolean` | `false` | Skeleton loading state. |\n| `skeletonRows` | `number` | `5` | Skeleton row count. |\n| `showFooter` | `boolean` | `false` | Show footer. |\n| `footerMethod` | `TableFooterMethod \\| null` | `null` | Footer data. |\n| `spanMethod` | `TableSpanMethod \\| null` | `null` | Cell span. |\n| `treeConfig` | `TableTreeConfig \\| null` | `null` | Tree rows. |\n| `expandConfig` | `TableExpandConfig \\| null` | `null` | Detail expansion (mutually exclusive with tree). |\n| `checkboxConfig` | `TableCheckboxConfig \\| null` | `null` | Multiple selection: cascade / `checkMethod` / `checkRowKeys` / `trigger` / `reserve`. |\n| `radioConfig` | `TableRadioConfig \\| null` | `null` | Single selection: `strict` / `checkMethod` / `trigger`. |\n| `expandable` | `boolean` | `false` | Show expand column (also enabled by `#expansion` or `expandConfig`). |\n| `striped` | `boolean` | `false` | Zebra rows. |\n| `bordered` | `boolean` | `false` | Cell borders. |\n| `highlightCurrent` | `boolean` | `false` | Highlight current row; pair with `v-model:current-row-key`. |\n| `rowHover` | `boolean` | `true` | Row hover highlight. |\n| `sortConfig` | `TableSortConfig \\| null` | `null` | Unified sorting config `{ field, order, multiple, must, mode }`. |\n| `sortField` | `string \\| null` | `null` | (legacy) Single-field sort. Prefer `sortConfig`. |\n| `sortOrder` | `'asc' \\| 'desc' \\| null` | `null` | (legacy) Sort direction. Prefer `sortConfig`. |\n| `multiSort` | `boolean` | `false` | (legacy) Multi-column sort. Prefer `sortConfig.multiple`. |\n| `mustSort` | `boolean` | `false` | (legacy) Disallow clearing sort. Prefer `sortConfig.must`. |\n| `sortMode` | `'client' \\| 'emit'` | `'client'` | (legacy) Sort mode. Prefer `sortConfig.mode`. |\n| `searchField` / `searchValue` | — | — | Client-side search. |\n| `filterOptions` | `TableFilterOption[]` | `null` | Structured filter criteria. |\n| `filterModel` | `Record<string, unknown> \\| null` | `null` | Header filter v-model (`update:filter-model`). |\n| `filters` | `Record<string, unknown> \\| null` | `null` | (legacy) Old filter v-model name. |\n| `loading` | `boolean` | `false` | Loading state. |\n| `emptyText` | `string` | — | Empty text. |\n| `emptyDescription` | `string` | — | Empty description. |\n| `maxHeight` | `number \\| null` | `null` | Max height, scrolls beyond. |\n| `showOverflowTooltip` | `boolean` | `false` | Global overflow tooltip. |\n| `rowKey` | `string` | `'id'` | Row unique key field. |\n| `size` | `'small' \\| 'medium' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | Density (`large`/`small` adjust cell padding). |\n| `ariaLabel` | `string` | — | — |\n| `bodyExpandRowClassName` | `TableBodyRowClassName` | — | — |\n| `bodyItemClassName` | `TableBodyItemClassName` | — | — |\n| `bodyRowClassName` | `TableBodyRowClassName` | — | — |\n| `bodyTextDirection` | `TableTextDirection` | — | — |\n| `checkboxColumnWidth` | `number \\| null` | — | — |\n| `clickRowToExpand` | `boolean` | — | — |\n| `currentRowKey` | `string \\| number \\| null` | — | — |\n| `expandColumnWidth` | `number` | — | — |\n| `expandedRowKeys` | `Array<string \\| number>` | — | — |\n| `fixedCheckbox` | `boolean` | — | — |\n| `fixedExpand` | `boolean` | — | — |\n| `fixedHeader` | `boolean` | — | — |\n| `fixedIndex` | `boolean` | — | — |\n| `headerClassName` | `string` | — | — |\n| `headerItemClassName` | `TableHeaderItemClassName` | — | — |\n| `headerTextDirection` | `TableTextDirection` | — | — |\n| `indexColumnWidth` | `number` | — | — |\n| `showIndex` | `boolean` | — | — |\n| `showIndexSymbol` | `string` | — | — |\n| `tableClassName` | `string` | — | — |\n| `tableHeight` | `number \\| null` | — | — |\n| `tableMinHeight` | `number` | — | — |\n| `pt` | `TablePassThrough` | — | Multi-part DOM pass-through: `{ root, scrollbar, thead, tbody, tfoot, pagination, emptyMessage }`. |"
             },
             {
               "id": "slots",
               "title": "Slots",
-              "body": "| Slot | Description |\n| --- | --- |\n| `cell-{key}` | Cell for column `{key}`; scope `{ row, value, column }` (use this for custom editors). |\n| `body-cell` | Any cell; scope `{ row, column, value }`. |\n| `expansion` | Expanded row; scope `{ row }`. |\n| `empty` / `loading` | Empty and loading placeholders. |\n| `header-{key}` | Header slot (exact key case). |"
+              "body": "| Slot | Description |\n| --- | --- |\n| `cell-{key}` | Cell of column `{key}`, scope `{ row, value, column }` (use it to build editors). |\n| `footer` | Custom footer. |\n| `body-cell` | Any cell, scope `{ row, column, value }`. |\n| `expansion` | Expanded row content, scope `{ row }`. |\n| `empty` | Custom empty state. |\n| `loading` | Custom loading state (ignored when `skeleton` is true). |\n| `pagination` | Custom pagination area. |\n| `body` | Custom `body` content. |\n| `body-append` | Custom `body-append` content. |\n| `body-prepend` | Custom `body-prepend` content. |\n| `customize-headers` | Custom `customize-headers` content. |\n| `header` | Custom `header` content. |\n| `header-{key}` | Header slot (case matches `columns[].key`). |"
             },
             {
               "id": "events",
               "title": "Events",
-              "body": "| Event | Payload | Description |\n| --- | --- | --- |\n| `sort` | `{ sortField?, sortOrder? }` | Sort changed. |\n| `row-click` | `{ row, index }`, `Event` | Row clicked. |\n| `row-dblclick` | `{ row, index }`, `Event` | Row double-clicked. |\n| `row-contextmenu` | `item`, `MouseEvent` | Row context menu. |\n| `select-row` / `deselect-row` | `TableItem` | Row selection toggled. |\n| `select-all` | — | Select all on current page. |\n| `current-change` | `row \\| null, oldRow \\| null` | Current row changed. |\n| `update:selection` | `TableItem[]` | Selection v-model. |\n| `update:page` | `number` | Page v-model. |"
+              "body": "| Event | Payload | Description |\n| --- | --- | --- |\n| `sort-change` | `{ sortField?, sortOrder? }` | Sort changed. |\n| `filter-change` | `Record<string, unknown> \\| null` | Header filter committed (mirrors `update:filter-model`). |\n| `expand-change` | `{ row, expanded }` | Row expansion changed (detail or tree). |\n| `row-click` | `{ row, index }`, `Event` | Row click. |\n| `row-dblclick` | `{ row, index }`, `Event` | Row double click. |\n| `row-contextmenu` | `item`, `MouseEvent` | Row right click. |\n| `select-row` | `TableItem` | Row selected. |\n| `deselect-row` | `TableItem` | Row deselected. |\n| `select-all` | — | All rows of current page selected. |\n| `current-change` | `row \\| null, oldRow \\| null` | Current row changed. |\n| `update:selection` | `TableItem[]` | Multiple selection v-model. |\n| `update:page` | `number` | Page v-model. |\n| `update:server-options` | `TableServerOptions` | Server options v-model. |\n| `update:current-row-key` | `string \\| number \\| null` | Current row key v-model. |\n| `update:expanded-row-keys` | `Array<string \\| number>` | Expanded row keys v-model. |\n| `update:filter-model` | `Record<string, unknown> \\| null` | Header filter v-model. |\n| `update:column-widths` | `Record<string, number>` | Column widths v-model. |\n| `update:hidden-columns` | `string[]` | Hidden columns v-model. |\n| `update:column-order` | `string[]` | Column order v-model. |\n| `update:selected-item` | `TableItem \\| null` | Single selection v-model. |"
             },
             {
-              "id": "instance",
-              "title": "Instance",
-              "body": "Pagination, filter, selection, scroll, and expand controls via `ref`:\n\n| Method / Property | Description |\n| --- | --- |\n| `currentPageFirstIndex` | Index of the first record on the current page (`-1` when empty). |\n| `currentPageLastIndex` | Index of the last record on the current page. |\n| `clientItemsLength` | Total item count (server total in server mode). |\n| `maxPaginationNumber` | Last page number. |\n| `currentPaginationNumber` | Current page number. |\n| `isLastPage` / `isFirstPage` | Whether the current page is the last / first. |\n| `nextPage()` / `prevPage()` | Go to the next / previous page. |\n| `updatePage(page)` | Jump to a page. |\n| `rowsPerPageOptions` | Rows-per-page options. |\n| `rowsPerPageActiveOption` | Active rows-per-page value. |\n| `updateRowsPerPageActiveOption(n)` | Change rows per page. |\n| `setFilters(filters)` / `clearFilter()` | Set / clear filters. |\n| `setColumnWidths(widths)` | Set column widths (same as `v-model:column-widths`). |\n| `setHiddenColumns(keys)` | Set hidden column keys (same as `v-model:hidden-columns`). |\n| `setColumnOrder(keys)` | Set leaf column order (same as `v-model:column-order`). |\n| `clearSort()` | Clear sort. |\n| `getCheckboxRecords()` / `setCheckboxRow` / `clearCheckboxRow` / `isCheckedByCheckboxRow` / `isAllCheckboxChecked` | Selection APIs. |\n| `scrollTo(...)` / `scrollToRow(row)` | Scroll helpers. |\n| `setRowExpand` / `toggleRowExpand` / `clearRowExpand` / … | Detail expand (non-tree). |\n| `setTreeExpand` / `toggleTreeExpand` / `clearTreeExpand` / … | Tree expand. |"
+              "id": "instance-api",
+              "title": "Instance API",
+              "body": "Access via `ref`:\n\n| Method / Property | Description |\n| --- | --- |\n| `currentPageFirstIndex` | Index of the first record on the current page (`-1` if empty). |\n| `currentPageLastIndex` | Index of the last record on the current page. |\n| `clientItemsLength` | Total row count (server total in server mode). |\n| `maxPaginationNumber` | Maximum page number. |\n| `currentPaginationNumber` | Current page number. |\n| `isLastPage` / `isFirstPage` | Whether on the last / first page. |\n| `nextPage()` / `prevPage()` | Go to next / previous page. |\n| `updatePage(page)` | Go to a specific page. |\n| `rowsPerPageOptions` | Rows-per-page options. |\n| `rowsPerPageActiveOption` | Current rows-per-page value. |\n| `updateRowsPerPageActiveOption(n)` | Update rows-per-page. |\n| `setFilters(filters)` / `clearFilter()` | Set / clear filters. |\n| `setColumnWidths(widths)` | Set column widths (same as `v-model:column-widths`). |\n| `setHiddenColumns(keys)` | Set hidden column keys (same as `v-model:hidden-columns`). |\n| `setColumnOrder(keys)` | Set leaf column order (same as `v-model:column-order`). |\n| `clearSort()` | Clear sorting. |\n| `getCheckboxRecords()` | Currently checked rows. |\n| `setCheckboxRow(rows, checked)` | Set row checked state. |\n| `clearCheckboxRow()` | Clear all checked rows. |\n| `isCheckedByCheckboxRow(row)` | Whether a row is checked. |\n| `isAllCheckboxChecked()` | Whether all rows on the current page are checked. |\n| `getCheckboxIndeterminateRecords()` | Indeterminate (half-checked) rows in tree cascade. |\n| `scrollTo(...)` / `scrollToRow(row)` | Scroll positioning. |\n| `setRowExpand` / `setAllRowExpand` / `toggleRowExpand` / `clearRowExpand` / `isRowExpandByRow` / `getRowExpandRecords` | Detail expansion (non-tree). |\n| `setTreeExpand` / `setAllTreeExpand` / `toggleTreeExpand` / `clearTreeExpand` / `isTreeExpandByRow` / `getTreeExpandRecords` | Tree node expansion. |"
             },
             {
               "id": "types",
               "title": "Types",
-              "body": "<h4 id=\"TableItem\">TableItem</h4>\n\nSee source `types.ts` for the full definition.\n\n```ts\ntype TableItem = Record<string, unknown>\n```\n\n\n<h4 id=\"TableColumnDefinition\">TableColumnDefinition</h4>\n\nColumn definition passed to `columns`:\n\n```ts\ninterface TableColumnDefinition {\n  key: string\n  label: string\n  width?: number\n  minWidth?: number\n  sortable?: boolean\n  fixed?: boolean | 'left' | 'right'\n  align?: 'start' | 'center' | 'end'\n  render?: (row: TableItem) => unknown\n  filterable?: boolean\n  filters?: TableColumnFilter[]\n  resizable?: boolean\n  children?: TableColumnDefinition[]\n  showOverflowTooltip?: boolean\n}\n```\n\n<h4 id=\"TableServerOptions\">TableServerOptions</h4>\n\nServer-side paging/sorting payload for `serverOptions`, with `serverTotal`:\n\n```ts\ninterface TableServerOptions {\n  page: number\n  rowsPerPage: number\n  sortBy?: string | string[]\n  sortType?: 'asc' | 'desc' | ('asc' | 'desc')[]\n}\n```\n\n`TableItem` is `Record<string, unknown>`. See also [API types](/docs/types)."
+              "body": "<h4 id=\"TableItem\">TableItem</h4>\n\n```ts\ntype TableItem = Record<string, unknown>\n```\n\n<h4 id=\"TableSortConfig\">TableSortConfig</h4>\n\nUnified sort config; `field` / `order` describe the current single-column sort, `mode` chooses between internal and external sorting:\n\n```ts\ninterface TableSortConfig {\n  field?: string | null\n  order?: 'asc' | 'desc' | null\n  multiple?: boolean\n  must?: boolean\n  mode?: 'client' | 'emit'\n}\n```\n\n<h4 id=\"TablePassThrough\">TablePassThrough</h4>\n\nMulti-part DOM pass-through; supports class / style / any attrs:\n\n```ts\ninterface TablePassThrough {\n  root?: Record<string, unknown>\n  scrollbar?: Record<string, unknown>\n  thead?: Record<string, unknown>\n  tbody?: Record<string, unknown>\n  tfoot?: Record<string, unknown>\n  pagination?: Record<string, unknown>\n  emptyMessage?: Record<string, unknown>\n}\n```\n\n<h4 id=\"TableTextDirection\">TableTextDirection</h4>\n\n```ts\ntype TableTextDirection = 'left' | 'center' | 'right'\n```\n\n<h4 id=\"TableFilterOption\">TableFilterOption</h4>\n\n```ts\ntype TableFilterOption =\n  | { field: string; comparison: 'between'; criteria: [number, number] }\n  | { field: string; comparison: '=' | '!='; criteria: number | string }\n  | { field: string; comparison: '>' | '>=' | '<' | '<='; criteria: number }\n  | { field: number | string; comparison: 'in'; criteria: number[] | string[] }\n  | { field: string; comparison: (value: unknown, criteria: string) => boolean; criteria: string }\n```\n\n<h4 id=\"TableHeaderItemClassName\">TableHeaderItemClassName</h4>\n\n```ts\ntype TableHeaderItemClassName = string | ((header: TableHeader, columnNumber: number) => string)\n```\n\n<h4 id=\"TableBodyRowClassName\">TableBodyRowClassName</h4>\n\n```ts\ntype TableBodyRowClassName = string | ((item: TableItem, rowNumber: number) => string)\n```\n\n<h4 id=\"TableBodyItemClassName\">TableBodyItemClassName</h4>\n\n```ts\ntype TableBodyItemClassName = string | ((column: string, rowNumber: number) => string)\n```\n\n<h4 id=\"TableTreeConfig\">TableTreeConfig</h4>\n\n```ts\ninterface TableTreeConfig {\n  childrenField?: string // default 'children'\n  indent?: number // default 16\n  expandAll?: boolean\n  accordion?: boolean\n  trigger?: 'default' | 'row'\n  lazy?: boolean\n  hasChildField?: string // default 'hasChild'\n  loadMethod?: (row: TableItem) => Promise<TableItem[]> | TableItem[]\n  transform?: boolean // flat parentId → tree\n  rowField?: string\n  parentField?: string // default 'parentId'\n  treeNode?: string // column key for toggler; default first column\n  showLine?: boolean\n}\n```\n\n<h4 id=\"TableColumnDefinition\">TableColumnDefinition</h4>\n\nColumn definition passed to `columns`:\n\n```ts\ninterface TableColumnDefinition {\n  key: string\n  label: string\n  width?: number\n  minWidth?: number\n  sortable?: boolean\n  fixed?: boolean | 'left' | 'right'\n  align?: 'start' | 'center' | 'end'\n  render?: (row: TableItem) => unknown\n  showOverflowTooltip?: boolean\n  resizable?: boolean\n  filterable?: boolean\n  filters?: TableColumnFilter[]\n  children?: TableColumnDefinition[]\n}\n```\n\n<h4 id=\"TableServerOptions\">TableServerOptions</h4>\n\nServer pagination/sort options passed to `serverOptions`, paired with `serverTotal`:\n\n```ts\ninterface TableServerOptions {\n  page: number\n  rowsPerPage: number\n  sortBy?: string | string[]\n  sortType?: 'asc' | 'desc' | ('asc' | 'desc')[]\n}\n```\n\nSee more at [API Types](/docs/types)."
             }
           ],
-          "markdown": "---\ntitle: Table\ncategory: 03 / DATA\ndescription: Data table with sorting, filtering, selection, pagination, frozen columns, and empty/loading states. Column width supports width / minWidth / fit.\n---\n\n# Table\n\n`MTable` displays structured row data. Define columns with `columns`, pass data with `rows`, and use built-in client-side sort, filter, pagination, and row selection—or switch to server-driven pagination. Header “select all” applies to the current page only.\n\nColumn width rules:\n\n- Columns with `width` use a fixed width\n- Columns without `width` are flexible with a `minWidth` lower bound (default `80`); when `fit` is `true` (default), remaining width is distributed proportionally\n- Horizontal scrolling appears when the total minimum width exceeds the container\n- Prefer `maxHeight` / `tableHeight` when the table body should scroll on its own; when nested under `MLayout` root scroll, fix the table height to avoid stacked scrollbars\n- For full-viewport main lists, use `MPageContent fill` + `MTable fill paginator` (body scrolls; pagination at the bottom). Skip `fill` for embedded or short tables.\n\n## Import\n\n```ts\nimport type { TableColumnDefinition, TableItem } from 'morya-ui'\nimport { MTable, MTag } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.en.vue\"\n```\n\n## Selection\n\nUse `selection-mode=\"multiple\"` with `v-model:selection`, or `selection-mode=\"single\"` with `v-model:selected-item`.\n\n```vue preview src=\"./demos/Selection.en.vue\"\n```\n\n## Filter and pagination\n\nUse `search-value` / `filter-options` for client filtering. Enable `paginator` with `v-model:page` and `rows-per-page`.\n\n```vue preview src=\"./demos/FilterAndPagination.en.vue\"\n```\n\n## Expandable rows\n\nCustomize cells with `render` or `#cell-{key}`. Set `expandable` (or `expandConfig`) and provide the `#expansion` slot. In tree mode, `expandedRowKeys` controls tree nodes and cannot be used for detail expansion at the same time.\n\n```vue preview src=\"./demos/ExpandableRows.en.vue\"\n```\n\n## Fixed columns\n\nSet `fixed: 'left' | 'right'` on a column (or `fixed: true` for left).\n\n```vue preview src=\"./demos/FixedColumns.en.vue\"\n```\n\n## Column resize and header filters\n\nSet `resizable` to drag column widths (`v-model:column-widths`). Set `filterable` for a header filter; optional `filters` for checkbox options, otherwise free-text contains. **Clear** resets the draft only; **Confirm** applies to `v-model:filters`.\n\n```vue preview src=\"./demos/ResizeAndFilter.en.vue\"\n```\n\n## Virtual scroll\n\nEnable `virtual` with `maxHeight` / `tableHeight` / `fill` so the body scrolls; dev mode warns if height is missing. Expandable rows (`#expansion` / `expandConfig`) disable virtualization (dev warning when both are set).\n\n```vue preview src=\"./demos/VirtualScroll.en.vue\"\n```\n\n## Multi-header, footer, and merges\n\nUse column `children` for grouped headers; `show-footer` + `footer-method` for summaries (`footerMethod({ columns, data })` matrix or `#footer` slot); `span-method` for merges.\n\n```vue preview src=\"./demos/GridFeatures.en.vue\"\n```\n\n## Empty and loading\n\n```vue preview src=\"./demos/EmptyAndLoading.en.vue\"\n```\n\n## Tree table\n\nPass `tree-config` for hierarchical rows: nested `children`, or flat `parentId` with `transform`. Bind expand state with `v-model:expanded-row-keys`. Supports `expandAll` / `expandRowKeys`, `accordion`, `trigger`, `toggleMethod`, and lazy `loadMethod`.\n\nInstance methods: `setTreeExpand`, `setAllTreeExpand`, `toggleTreeExpand`, `isTreeExpandByRow`, `getTreeExpandRecords`, `clearTreeExpand`.\n\nWith multi-select, parent/child cascade and indeterminate are on by default (`checkbox-config.check-strictly=false`). Use `checkMethod` to disable specific rows.\n\n```vue preview src=\"./demos/Tree.en.vue\"\n```\n\n## Server mode\n\nPass `server-options` with `server-total`, and sync page / page size / sort via `v-model:server-options`.\n\n```vue preview src=\"./demos/Demo7.vue\"\n```\n\n## Breaking changes\n\n- Removed built-in cell editing: `editConfig`, column `editable`, `edit-change`, `#edit-{key}`; use `#cell-{key}` / `render` instead\n- Removed `MTreeTable` (including `morya-ui/tree-table`); use `MTable` + `treeConfig`\n- `serverItemsLength` → `serverTotal`\n- `rowsItems` → `pageSizes`\n- Removed `hideHeader`; use `showHeader` (default `true`)\n- Removed `hideRowsPerPage`; use `showRowsPerPage` (default `true`)\n- Removed: `clickEventType`, `rowsPerPageMessage`, `rowsOfPageSeparatorMessage`, `preventContextMenuRow`, `tableNodeId`\n- Events: `contextmenuRow` → `row-contextmenu`; `selectRow` / `deselectRow` / `selectAll` → `select-row` / `deselect-row` / `select-all`\n- Removed events: `updatePageItems`, `updateTotalItems`, `page` (keep `update:page`)\n- Row interaction: click and dblclick always emit (`row-click` / `row-dblclick`); context menu always `preventDefault`s and emits `row-contextmenu`\n\n## TableColumnDefinition\n\n| Field | Type | Description |\n| --- | --- | --- |\n| `key` | `string` | Field name bound to row data. |\n| `label` | `string` | Column header text. |\n| `width` | `number` | Fixed width in px. |\n| `minWidth` | `number` | Flex column minimum width; default `80`. |\n| `sortable` | `boolean` | Enable sorting. |\n| `fixed` | `boolean \\| 'left' \\| 'right'` | Freeze column (left freeze supported). |\n| `align` | `'start' \\| 'center' \\| 'end'` | Cell alignment. |\n| `render` | `(row) => unknown` | Custom cell renderer. |\n| `showOverflowTooltip` | `boolean` | Tooltip when cell text overflows. |\n| `resizable` | `boolean` | Drag to resize column width. |\n| `filterable` | `boolean` | Show header filter trigger. |\n| `filters` | `TableColumnFilter[]` | Header filter options; omit for text filter. |\n| `children` | `TableColumnDefinition[]` | Nested columns for multi-level headers. |\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `columns` | `TableColumnDefinition[]` | — | Column definitions. |\n| `rows` | `TableItem[]` | — | Row data. |\n| `fit` | `boolean` | `true` | Flexible columns fill remaining width. |\n| `selectionMode` | `'single' \\| 'multiple' \\| null` | `null` | Row selection mode. |\n| `selection` | `TableItem[] \\| null` | `null` | Multi-select (`v-model:selection`). |\n| `selectedItem` | `TableItem \\| null` | `null` | Single-select (`v-model:selected-item`). |\n| `serverOptions` | `TableServerOptions \\| null` | `null` | Server paging/sort options. |\n| `serverTotal` | `number` | `0` | Total row count in server mode. |\n| `paginator` | `boolean` | `false` | Built-in pagination footer. |\n| `page` | `number` | `1` | Current page (`v-model:page`). |\n| `rowsPerPage` | `number` | `25` | Page size. |\n| `pageSizes` | `number[]` | `[25, 50, 100]` | Page size options. |\n| `showHeader` | `boolean` | `true` | Show table header. |\n| `showRowsPerPage` | `boolean` | `true` | Show page-size picker. |\n| `fill` | `boolean` | `false` | Fill remaining parent height (only for full-viewport main lists with `MPageContent fill`). Body scrolls; paginator stays at the bottom. Ignored when `maxHeight` / `tableHeight` is set. |\n| `treeConfig` | `TableTreeConfig \\| null` | `null` | Tree rows. |\n| `expandConfig` | `TableExpandConfig \\| null` | `null` | Detail expand (mutually exclusive with tree). |\n| `checkboxConfig` | `TableCheckboxConfig \\| null` | `null` | Multi-select options. |\n| `radioConfig` | `TableRadioConfig \\| null` | `null` | Single-select options. |\n| `striped` / `bordered` | `boolean` | `false` | Striped rows / cell borders. |\n| `highlightCurrent` | `boolean` | `false` | Highlight current row. |\n| `loading` / `emptyText` / `emptyDescription` | — | — | Loading and empty states. |\n| `maxHeight` | `number \\| null` | `null` | Scrollable body max height. |\n| `rowKey` | `string` | `'id'` | Stable row key field. |\n| `size` | `'small' \\| 'medium' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | Table density (`large`/`small` also adjust cell padding). |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `cell-{key}` | Cell for column `{key}`; scope `{ row, value, column }` (use this for custom editors). |\n| `body-cell` | Any cell; scope `{ row, column, value }`. |\n| `expansion` | Expanded row; scope `{ row }`. |\n| `empty` / `loading` | Empty and loading placeholders. |\n| `header-{key}` | Header slot (exact key case). |\n\n## Events\n\n| Event | Payload | Description |\n| --- | --- | --- |\n| `sort` | `{ sortField?, sortOrder? }` | Sort changed. |\n| `row-click` | `{ row, index }`, `Event` | Row clicked. |\n| `row-dblclick` | `{ row, index }`, `Event` | Row double-clicked. |\n| `row-contextmenu` | `item`, `MouseEvent` | Row context menu. |\n| `select-row` / `deselect-row` | `TableItem` | Row selection toggled. |\n| `select-all` | — | Select all on current page. |\n| `current-change` | `row \\| null, oldRow \\| null` | Current row changed. |\n| `update:selection` | `TableItem[]` | Selection v-model. |\n| `update:page` | `number` | Page v-model. |\n\n## Instance\n\nPagination, filter, selection, scroll, and expand controls via `ref`:\n\n| Method / Property | Description |\n| --- | --- |\n| `currentPageFirstIndex` | Index of the first record on the current page (`-1` when empty). |\n| `currentPageLastIndex` | Index of the last record on the current page. |\n| `clientItemsLength` | Total item count (server total in server mode). |\n| `maxPaginationNumber` | Last page number. |\n| `currentPaginationNumber` | Current page number. |\n| `isLastPage` / `isFirstPage` | Whether the current page is the last / first. |\n| `nextPage()` / `prevPage()` | Go to the next / previous page. |\n| `updatePage(page)` | Jump to a page. |\n| `rowsPerPageOptions` | Rows-per-page options. |\n| `rowsPerPageActiveOption` | Active rows-per-page value. |\n| `updateRowsPerPageActiveOption(n)` | Change rows per page. |\n| `setFilters(filters)` / `clearFilter()` | Set / clear filters. |\n| `setColumnWidths(widths)` | Set column widths (same as `v-model:column-widths`). |\n| `setHiddenColumns(keys)` | Set hidden column keys (same as `v-model:hidden-columns`). |\n| `setColumnOrder(keys)` | Set leaf column order (same as `v-model:column-order`). |\n| `clearSort()` | Clear sort. |\n| `getCheckboxRecords()` / `setCheckboxRow` / `clearCheckboxRow` / `isCheckedByCheckboxRow` / `isAllCheckboxChecked` | Selection APIs. |\n| `scrollTo(...)` / `scrollToRow(row)` | Scroll helpers. |\n| `setRowExpand` / `toggleRowExpand` / `clearRowExpand` / … | Detail expand (non-tree). |\n| `setTreeExpand` / `toggleTreeExpand` / `clearTreeExpand` / … | Tree expand. |\n\n## Types\n\n<h4 id=\"TableItem\">TableItem</h4>\n\nSee source `types.ts` for the full definition.\n\n```ts\ntype TableItem = Record<string, unknown>\n```\n\n\n<h4 id=\"TableColumnDefinition\">TableColumnDefinition</h4>\n\nColumn definition passed to `columns`:\n\n```ts\ninterface TableColumnDefinition {\n  key: string\n  label: string\n  width?: number\n  minWidth?: number\n  sortable?: boolean\n  fixed?: boolean | 'left' | 'right'\n  align?: 'start' | 'center' | 'end'\n  render?: (row: TableItem) => unknown\n  filterable?: boolean\n  filters?: TableColumnFilter[]\n  resizable?: boolean\n  children?: TableColumnDefinition[]\n  showOverflowTooltip?: boolean\n}\n```\n\n<h4 id=\"TableServerOptions\">TableServerOptions</h4>\n\nServer-side paging/sorting payload for `serverOptions`, with `serverTotal`:\n\n```ts\ninterface TableServerOptions {\n  page: number\n  rowsPerPage: number\n  sortBy?: string | string[]\n  sortType?: 'asc' | 'desc' | ('asc' | 'desc')[]\n}\n```\n\n`TableItem` is `Record<string, unknown>`. See also [API types](/docs/types).\n"
+          "markdown": "---\ntitle: Table\ncategory: 03 / DATA\ndescription: Data table with sorting, filtering, selection, pagination, fixed columns, column drag, column settings, skeleton loading and virtual scrolling. Column widths support width / minWidth / fit.\n---\n\n# Table\n\n`MTable` renders structured row data. Pass `columns` for column definitions and `rows` for data; built-in client-side sorting, filtering, pagination and row selection are included, with a server-side mode for remote sources. The header \"select all\" only applies to the current page.\n\nColumn width rules:\n\n- Columns with `width` are fixed.\n- Columns without `width` flex from `minWidth` (default `80`); when `fit` is `true` (default), remaining space is distributed proportionally.\n- Total minimum width beyond the container triggers horizontal scrolling.\n- Use `maxHeight` / `tableHeight` for body scrolling; with `MLayout` root scrolling prefer a fixed table height to avoid double scrollbars.\n- Full-viewport lists: `MPageContent fill` + `MTable fill paginator` (body scrolls, paginator pinned). Embedded tables and short pages don't need `fill`.\n\n## Import\n\n```ts\nimport type { TableColumnDefinition, TableItem, TableSortConfig, TablePassThrough } from 'morya-ui'\nimport { MTable, MTag } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.en.vue\"\n```\n\n## Row Selection\n\nMultiple selection uses `selection-mode=\"multiple\"` with `v-model:selection`; single selection uses `selection-mode=\"single\"` with `v-model:selected-item`. Header \"select all\" only applies to the current page.\n\n```vue preview src=\"./demos/Selection.en.vue\"\n```\n\n## Filtering & Pagination\n\nClient-side filtering via `search-value` / `filter-options`; enable `paginator` with `v-model:page` and `rows-per-page` (controlled).\n\n```vue preview src=\"./demos/FilterAndPagination.en.vue\"\n```\n\n## Fixed Columns\n\nSet `fixed: 'left' | 'right'` in the column definition (`fixed: true` equals left).\n\n```vue preview src=\"./demos/FixedColumns.en.vue\"\n```\n\n## Expandable Rows & Cell Rendering\n\nCustomize cells via `render` or `#cell-{key}`. Enable row details with `expandable` (or `expandConfig`) and provide content via `#expansion`. In tree mode `expandedRowKeys` is reserved for tree nodes and cannot also drive detail expansion.\n\n```vue preview src=\"./demos/ExpandableRows.en.vue\"\n```\n\n## Sorting (sortConfig)\n\nUse `sort-config` to configure sorting in one place: `{ field, order, multiple, must, mode }`. With `mode: 'client'` (default) the table sorts the current page itself; with `mode: 'emit'` only the `sort-change` event is emitted and the data is owned by the caller (useful for server-side sorting). Set `multiple: true` for multi-column sort and `must: true` to prevent clearing.\n\n```vue preview src=\"./demos/Sorting.en.vue\"\n```\n\n## Column Resizing & Header Filters\n\nSet `resizable` to drag column widths (`v-model:column-widths`); `filterable` adds a header filter — column `filters` becomes a multi-select, otherwise a text-contains filter. **Clear** resets the draft, **OK** commits to `v-model:filter-model` (legacy `v-model:filters` still supported).\n\n```vue preview src=\"./demos/ResizeAndFilter.en.vue\"\n```\n\n## Column Settings Panel\n\nEnable `column-setting` to show a settings button in the header corner. The popover lets users toggle column visibility, synced via `v-model:hidden-columns`. Panel copy follows `MLocale`.\n\n```vue preview src=\"./demos/ColumnSetting.en.vue\"\n```\n\n## Column Drag\n\nEnable `column-drag` to reorder leaf columns by dragging header cells. Order is synced through `v-model:column-order`. Drag-and-drop stays within a single header level and never breaks multi-level headers.\n\n```vue preview src=\"./demos/ColumnDrag.en.vue\"\n```\n\n## Skeleton Loading\n\nEnable `skeleton` for a skeleton loading state instead of a full-overlay spinner. `skeleton-rows` controls the number of placeholder rows (default `5`). Skeleton previews preserve the layout and feel much faster.\n\n```vue preview src=\"./demos/Skeleton.en.vue\"\n```\n\n## Virtual Scrolling\n\nEnable `virtual` and provide one of `maxHeight` / `tableHeight` / `fill` to form a scroll viewport; without one, the dev build warns. Expandable rows / `#expansion` / `expandConfig` are mutually exclusive with virtualization and fall back to plain rendering (with a dev warning).\n\n```vue preview src=\"./demos/VirtualScroll.en.vue\"\n```\n\n## Dynamic Row Height Virtual Scrolling\n\nBy default virtual scrolling assumes all rows have equal height (estimated by `virtual-row-height`). If your rows vary in height due to content, enable `virtual-dynamic-row-height`: the table measures each row with `ResizeObserver`, caches the result, and uses prefix sums + binary search for O(log n) positioning, keeping long lists smooth.\n\n```vue preview src=\"./demos/DynamicRowHeight.en.vue\"\n```\n\n## Multi-level Headers, Footer & Span\n\nColumns support `children` for multi-level headers; `show-footer` + `footer-method` renders totals (`footerMethod({ columns, data })` returns a row matrix, or use `#footer` for full customization); `span-method` merges cells.\n\n```vue preview src=\"./demos/GridFeatures.en.vue\"\n```\n\n## Empty & Loading\n\n```vue preview src=\"./demos/EmptyAndLoading.en.vue\"\n```\n\n## Tree Table\n\nPass `tree-config` to enable tree mode: nested `children`, or `transform` + `parentId` for flat data. Expansion state is bound with `v-model:expanded-row-keys`. Supports `expandAll` / `expandRowKeys`, `accordion`, `trigger`, `toggleMethod`, and lazy loading via `lazy` + `loadMethod`.\n\nInstance methods: `setTreeExpand`, `setAllTreeExpand`, `toggleTreeExpand`, `isTreeExpandByRow`, `getTreeExpandRecords`, `clearTreeExpand`.\n\nWith multiple selection, parent-child cascading with half-check is enabled by default (`checkbox-config.check-strictly=false`); use `checkMethod` to disable a row's checkbox.\n\n```vue preview src=\"./demos/Tree.en.vue\"\n```\n\n## Server Mode\n\nPass `server-options` and `server-total`, syncing page, rows-per-page and sort fields via `v-model:server-options`.\n\n```vue preview src=\"./demos/Demo7.vue\"\n```\n\n## Breaking changes\n\n- Built-in cell editing removed: `editConfig`, column `editable`, `edit-change`, `#edit-{key}`; use `#cell-{key}` / `render` instead.\n- `MTreeTable` removed (including `morya-ui/tree-table`); use `MTable` + `treeConfig`.\n- `serverItemsLength` → `serverTotal`; `rowsItems` → `pageSizes`.\n- `hideHeader` removed; use `showHeader` (default `true`).\n- `hideRowsPerPage` removed; use `showRowsPerPage` (default `true`).\n- Removed: `clickEventType`, `rowsPerPageMessage`, `rowsOfPageSeparatorMessage`, `preventContextMenuRow`, `tableNodeId`.\n- Events: `sortChange` → `sort-change`; `expandRow` → `expand-change`; `contextmenuRow` → `row-contextmenu`; `selectRow` / `deselectRow` / `selectAll` → `select-row` / `deselect-row` / `select-all`.\n- New event: `filter-change` (header filter commit).\n- Removed events: `updatePageItems`, `updateTotalItems`, `page` (`update:page` kept).\n- Row interactions: always support single / double click (`row-click` / `row-dblclick`); right-click always `preventDefault` and emits `row-contextmenu`.\n- Sorting props merged: `sortField` / `sortOrder` / `multiSort` / `mustSort` / `sortMode` still work, but new code should use `sortConfig: TableSortConfig`.\n- Filter v-model: `v-model:filters` still works; new code should use `v-model:filter-model`.\n\n## TableColumnDefinition\n\n| Field | Type | Description |\n| --- | --- | --- |\n| `key` | `string` | Field name on the row. |\n| `label` | `string` | Header text. |\n| `width` | `number` | Fixed column width (px). |\n| `minWidth` | `number` | Flex column minimum width, default `80`. |\n| `sortable` | `boolean` | Sortable. |\n| `fixed` | `boolean \\| 'left' \\| 'right'` | Fixed column; `true` equals `'left'`. |\n| `align` | `'start' \\| 'center' \\| 'end'` | Cell alignment. |\n| `render` | `(row) => unknown` | Custom cell renderer. |\n| `showOverflowTooltip` | `boolean` | Show tooltip on overflow. |\n| `resizable` | `boolean` | Allow drag resizing. |\n| `filterable` | `boolean` | Show header filter. |\n| `filters` | `TableColumnFilter[]` | Header filter options; omit for text filter. |\n| `children` | `TableColumnDefinition[]` | Multi-level sub-columns. |\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `columns` | `TableColumnDefinition[]` | — | Column definitions. |\n| `rows` | `TableItem[]` | — | Row data. |\n| `fit` | `boolean` | `true` | Stretch flex columns to fill width. |\n| `selectionMode` | `'single' \\| 'multiple' \\| null` | `null` | Selection mode. |\n| `selection` | `TableItem[] \\| null` | `null` | Multiple selection (`v-model:selection`). |\n| `selectedItem` | `TableItem \\| null` | `null` | Single selection (`v-model:selected-item`). |\n| `serverOptions` | `TableServerOptions \\| null` | `null` | Server pagination/sort options. |\n| `serverTotal` | `number` | `0` | Server total count. |\n| `paginator` | `boolean` | `false` | Show built-in paginator. |\n| `page` | `number` | `1` | Current page (`v-model:page`). |\n| `rowsPerPage` | `number` | `25` | Rows per page. |\n| `pageSizes` | `number[]` | `[25, 50, 100]` | Page size options. |\n| `showHeader` | `boolean` | `true` | Show header. |\n| `showRowsPerPage` | `boolean` | `true` | Show rows-per-page selector. |\n| `fill` | `boolean` | `false` | Fill parent height (with `MPageContent fill`); body scrolls, paginator pinned. Ignored when `maxHeight` / `tableHeight` is set. |\n| `columnWidths` | `Record<string, number> \\| null` | `null` | Column widths (`v-model:column-widths`). |\n| `virtual` | `boolean` | `false` | Row virtualization (requires a height; skipped with expand rows). |\n| `virtualRowHeight` | `number` | `40` | Estimated virtual row height. |\n| `virtualDynamicRowHeight` | `boolean` | `false` | Dynamic row-height virtualization (measured & cached via `ResizeObserver`). |\n| `virtualOverscan` | `number` | `4` | Extra rows rendered above/below the viewport to avoid flicker. |\n| `hiddenColumns` | `string[] \\| null` | `null` | Hidden column keys (`v-model:hidden-columns`). |\n| `columnOrder` | `string[] \\| null` | `null` | Leaf column order (`v-model:column-order`). |\n| `columnSetting` | `boolean` | `false` | Show column settings button (visibility toggle). |\n| `columnDrag` | `boolean` | `false` | Header drag reordering. |\n| `skeleton` | `boolean` | `false` | Skeleton loading state. |\n| `skeletonRows` | `number` | `5` | Skeleton row count. |\n| `showFooter` | `boolean` | `false` | Show footer. |\n| `footerMethod` | `TableFooterMethod \\| null` | `null` | Footer data. |\n| `spanMethod` | `TableSpanMethod \\| null` | `null` | Cell span. |\n| `treeConfig` | `TableTreeConfig \\| null` | `null` | Tree rows. |\n| `expandConfig` | `TableExpandConfig \\| null` | `null` | Detail expansion (mutually exclusive with tree). |\n| `checkboxConfig` | `TableCheckboxConfig \\| null` | `null` | Multiple selection: cascade / `checkMethod` / `checkRowKeys` / `trigger` / `reserve`. |\n| `radioConfig` | `TableRadioConfig \\| null` | `null` | Single selection: `strict` / `checkMethod` / `trigger`. |\n| `expandable` | `boolean` | `false` | Show expand column (also enabled by `#expansion` or `expandConfig`). |\n| `striped` | `boolean` | `false` | Zebra rows. |\n| `bordered` | `boolean` | `false` | Cell borders. |\n| `highlightCurrent` | `boolean` | `false` | Highlight current row; pair with `v-model:current-row-key`. |\n| `rowHover` | `boolean` | `true` | Row hover highlight. |\n| `sortConfig` | `TableSortConfig \\| null` | `null` | Unified sorting config `{ field, order, multiple, must, mode }`. |\n| `sortField` | `string \\| null` | `null` | (legacy) Single-field sort. Prefer `sortConfig`. |\n| `sortOrder` | `'asc' \\| 'desc' \\| null` | `null` | (legacy) Sort direction. Prefer `sortConfig`. |\n| `multiSort` | `boolean` | `false` | (legacy) Multi-column sort. Prefer `sortConfig.multiple`. |\n| `mustSort` | `boolean` | `false` | (legacy) Disallow clearing sort. Prefer `sortConfig.must`. |\n| `sortMode` | `'client' \\| 'emit'` | `'client'` | (legacy) Sort mode. Prefer `sortConfig.mode`. |\n| `searchField` / `searchValue` | — | — | Client-side search. |\n| `filterOptions` | `TableFilterOption[]` | `null` | Structured filter criteria. |\n| `filterModel` | `Record<string, unknown> \\| null` | `null` | Header filter v-model (`update:filter-model`). |\n| `filters` | `Record<string, unknown> \\| null` | `null` | (legacy) Old filter v-model name. |\n| `loading` | `boolean` | `false` | Loading state. |\n| `emptyText` | `string` | — | Empty text. |\n| `emptyDescription` | `string` | — | Empty description. |\n| `maxHeight` | `number \\| null` | `null` | Max height, scrolls beyond. |\n| `showOverflowTooltip` | `boolean` | `false` | Global overflow tooltip. |\n| `rowKey` | `string` | `'id'` | Row unique key field. |\n| `size` | `'small' \\| 'medium' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | Density (`large`/`small` adjust cell padding). |\n| `ariaLabel` | `string` | — | — |\n| `bodyExpandRowClassName` | `TableBodyRowClassName` | — | — |\n| `bodyItemClassName` | `TableBodyItemClassName` | — | — |\n| `bodyRowClassName` | `TableBodyRowClassName` | — | — |\n| `bodyTextDirection` | `TableTextDirection` | — | — |\n| `checkboxColumnWidth` | `number \\| null` | — | — |\n| `clickRowToExpand` | `boolean` | — | — |\n| `currentRowKey` | `string \\| number \\| null` | — | — |\n| `expandColumnWidth` | `number` | — | — |\n| `expandedRowKeys` | `Array<string \\| number>` | — | — |\n| `fixedCheckbox` | `boolean` | — | — |\n| `fixedExpand` | `boolean` | — | — |\n| `fixedHeader` | `boolean` | — | — |\n| `fixedIndex` | `boolean` | — | — |\n| `headerClassName` | `string` | — | — |\n| `headerItemClassName` | `TableHeaderItemClassName` | — | — |\n| `headerTextDirection` | `TableTextDirection` | — | — |\n| `indexColumnWidth` | `number` | — | — |\n| `showIndex` | `boolean` | — | — |\n| `showIndexSymbol` | `string` | — | — |\n| `tableClassName` | `string` | — | — |\n| `tableHeight` | `number \\| null` | — | — |\n| `tableMinHeight` | `number` | — | — |\n| `pt` | `TablePassThrough` | — | Multi-part DOM pass-through: `{ root, scrollbar, thead, tbody, tfoot, pagination, emptyMessage }`. |\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `cell-{key}` | Cell of column `{key}`, scope `{ row, value, column }` (use it to build editors). |\n| `footer` | Custom footer. |\n| `body-cell` | Any cell, scope `{ row, column, value }`. |\n| `expansion` | Expanded row content, scope `{ row }`. |\n| `empty` | Custom empty state. |\n| `loading` | Custom loading state (ignored when `skeleton` is true). |\n| `pagination` | Custom pagination area. |\n| `body` | Custom `body` content. |\n| `body-append` | Custom `body-append` content. |\n| `body-prepend` | Custom `body-prepend` content. |\n| `customize-headers` | Custom `customize-headers` content. |\n| `header` | Custom `header` content. |\n| `header-{key}` | Header slot (case matches `columns[].key`). |\n\n## Events\n\n| Event | Payload | Description |\n| --- | --- | --- |\n| `sort-change` | `{ sortField?, sortOrder? }` | Sort changed. |\n| `filter-change` | `Record<string, unknown> \\| null` | Header filter committed (mirrors `update:filter-model`). |\n| `expand-change` | `{ row, expanded }` | Row expansion changed (detail or tree). |\n| `row-click` | `{ row, index }`, `Event` | Row click. |\n| `row-dblclick` | `{ row, index }`, `Event` | Row double click. |\n| `row-contextmenu` | `item`, `MouseEvent` | Row right click. |\n| `select-row` | `TableItem` | Row selected. |\n| `deselect-row` | `TableItem` | Row deselected. |\n| `select-all` | — | All rows of current page selected. |\n| `current-change` | `row \\| null, oldRow \\| null` | Current row changed. |\n| `update:selection` | `TableItem[]` | Multiple selection v-model. |\n| `update:page` | `number` | Page v-model. |\n| `update:server-options` | `TableServerOptions` | Server options v-model. |\n| `update:current-row-key` | `string \\| number \\| null` | Current row key v-model. |\n| `update:expanded-row-keys` | `Array<string \\| number>` | Expanded row keys v-model. |\n| `update:filter-model` | `Record<string, unknown> \\| null` | Header filter v-model. |\n| `update:column-widths` | `Record<string, number>` | Column widths v-model. |\n| `update:hidden-columns` | `string[]` | Hidden columns v-model. |\n| `update:column-order` | `string[]` | Column order v-model. |\n| `update:selected-item` | `TableItem \\| null` | Single selection v-model. |\n\n## Instance API\n\nAccess via `ref`:\n\n| Method / Property | Description |\n| --- | --- |\n| `currentPageFirstIndex` | Index of the first record on the current page (`-1` if empty). |\n| `currentPageLastIndex` | Index of the last record on the current page. |\n| `clientItemsLength` | Total row count (server total in server mode). |\n| `maxPaginationNumber` | Maximum page number. |\n| `currentPaginationNumber` | Current page number. |\n| `isLastPage` / `isFirstPage` | Whether on the last / first page. |\n| `nextPage()` / `prevPage()` | Go to next / previous page. |\n| `updatePage(page)` | Go to a specific page. |\n| `rowsPerPageOptions` | Rows-per-page options. |\n| `rowsPerPageActiveOption` | Current rows-per-page value. |\n| `updateRowsPerPageActiveOption(n)` | Update rows-per-page. |\n| `setFilters(filters)` / `clearFilter()` | Set / clear filters. |\n| `setColumnWidths(widths)` | Set column widths (same as `v-model:column-widths`). |\n| `setHiddenColumns(keys)` | Set hidden column keys (same as `v-model:hidden-columns`). |\n| `setColumnOrder(keys)` | Set leaf column order (same as `v-model:column-order`). |\n| `clearSort()` | Clear sorting. |\n| `getCheckboxRecords()` | Currently checked rows. |\n| `setCheckboxRow(rows, checked)` | Set row checked state. |\n| `clearCheckboxRow()` | Clear all checked rows. |\n| `isCheckedByCheckboxRow(row)` | Whether a row is checked. |\n| `isAllCheckboxChecked()` | Whether all rows on the current page are checked. |\n| `getCheckboxIndeterminateRecords()` | Indeterminate (half-checked) rows in tree cascade. |\n| `scrollTo(...)` / `scrollToRow(row)` | Scroll positioning. |\n| `setRowExpand` / `setAllRowExpand` / `toggleRowExpand` / `clearRowExpand` / `isRowExpandByRow` / `getRowExpandRecords` | Detail expansion (non-tree). |\n| `setTreeExpand` / `setAllTreeExpand` / `toggleTreeExpand` / `clearTreeExpand` / `isTreeExpandByRow` / `getTreeExpandRecords` | Tree node expansion. |\n\n## Types\n\n<h4 id=\"TableItem\">TableItem</h4>\n\n```ts\ntype TableItem = Record<string, unknown>\n```\n\n<h4 id=\"TableSortConfig\">TableSortConfig</h4>\n\nUnified sort config; `field` / `order` describe the current single-column sort, `mode` chooses between internal and external sorting:\n\n```ts\ninterface TableSortConfig {\n  field?: string | null\n  order?: 'asc' | 'desc' | null\n  multiple?: boolean\n  must?: boolean\n  mode?: 'client' | 'emit'\n}\n```\n\n<h4 id=\"TablePassThrough\">TablePassThrough</h4>\n\nMulti-part DOM pass-through; supports class / style / any attrs:\n\n```ts\ninterface TablePassThrough {\n  root?: Record<string, unknown>\n  scrollbar?: Record<string, unknown>\n  thead?: Record<string, unknown>\n  tbody?: Record<string, unknown>\n  tfoot?: Record<string, unknown>\n  pagination?: Record<string, unknown>\n  emptyMessage?: Record<string, unknown>\n}\n```\n\n<h4 id=\"TableTextDirection\">TableTextDirection</h4>\n\n```ts\ntype TableTextDirection = 'left' | 'center' | 'right'\n```\n\n<h4 id=\"TableFilterOption\">TableFilterOption</h4>\n\n```ts\ntype TableFilterOption =\n  | { field: string; comparison: 'between'; criteria: [number, number] }\n  | { field: string; comparison: '=' | '!='; criteria: number | string }\n  | { field: string; comparison: '>' | '>=' | '<' | '<='; criteria: number }\n  | { field: number | string; comparison: 'in'; criteria: number[] | string[] }\n  | { field: string; comparison: (value: unknown, criteria: string) => boolean; criteria: string }\n```\n\n<h4 id=\"TableHeaderItemClassName\">TableHeaderItemClassName</h4>\n\n```ts\ntype TableHeaderItemClassName = string | ((header: TableHeader, columnNumber: number) => string)\n```\n\n<h4 id=\"TableBodyRowClassName\">TableBodyRowClassName</h4>\n\n```ts\ntype TableBodyRowClassName = string | ((item: TableItem, rowNumber: number) => string)\n```\n\n<h4 id=\"TableBodyItemClassName\">TableBodyItemClassName</h4>\n\n```ts\ntype TableBodyItemClassName = string | ((column: string, rowNumber: number) => string)\n```\n\n<h4 id=\"TableTreeConfig\">TableTreeConfig</h4>\n\n```ts\ninterface TableTreeConfig {\n  childrenField?: string // default 'children'\n  indent?: number // default 16\n  expandAll?: boolean\n  accordion?: boolean\n  trigger?: 'default' | 'row'\n  lazy?: boolean\n  hasChildField?: string // default 'hasChild'\n  loadMethod?: (row: TableItem) => Promise<TableItem[]> | TableItem[]\n  transform?: boolean // flat parentId → tree\n  rowField?: string\n  parentField?: string // default 'parentId'\n  treeNode?: string // column key for toggler; default first column\n  showLine?: boolean\n}\n```\n\n<h4 id=\"TableColumnDefinition\">TableColumnDefinition</h4>\n\nColumn definition passed to `columns`:\n\n```ts\ninterface TableColumnDefinition {\n  key: string\n  label: string\n  width?: number\n  minWidth?: number\n  sortable?: boolean\n  fixed?: boolean | 'left' | 'right'\n  align?: 'start' | 'center' | 'end'\n  render?: (row: TableItem) => unknown\n  showOverflowTooltip?: boolean\n  resizable?: boolean\n  filterable?: boolean\n  filters?: TableColumnFilter[]\n  children?: TableColumnDefinition[]\n}\n```\n\n<h4 id=\"TableServerOptions\">TableServerOptions</h4>\n\nServer pagination/sort options passed to `serverOptions`, paired with `serverTotal`:\n\n```ts\ninterface TableServerOptions {\n  page: number\n  rowsPerPage: number\n  sortBy?: string | string[]\n  sortType?: 'asc' | 'desc' | ('asc' | 'desc')[]\n}\n```\n\nSee more at [API Types](/docs/types).\n"
         }
       }
     },
@@ -32601,7 +33556,7 @@
         "zh-CN": {
           "title": "主题",
           "description": "亮暗主题、设计令牌与内容密度。",
-          "markdown": "---\ntitle: 主题\norder: 5\ndescription: 亮暗主题、设计令牌与内容密度。\n---\n\n# 主题\n\n主题能力内置于 `morya-ui`。组件只消费语义化 CSS 变量（`--m-*`），不自行维护第二套色板。\n\n引入 `morya-ui/styles.css` 时已包含这些变量；主题 JS API（`useTheme` 等）从同一包导入。\n\n## 亮 / 暗色\n\n```ts\nimport { useTheme } from \"morya-ui\";\n\nconst { isDark, setTheme, toggleTheme } = useTheme();\n\nsetTheme(\"light\"); // 或 'dark'\ntoggleTheme();\n```\n\n文档站右上角的按钮调用的就是同一套 API。主题偏好会写到 `document.documentElement` 的 `data-theme`。\n\n## 设计令牌\n\n常用变量示例见 [设计令牌](/docs/design-tokens) 完整列表（支持搜索与分类）。\n\n| Token                                                             | 用途                                          |\n| ----------------------------------------------------------------- | --------------------------------------------- |\n| `--m-color-primary`                                               | 品牌主色                                      |\n| `--m-color-surface`                                               | 页面底色                                      |\n| `--m-color-text`                                                  | 正文                                          |\n| `--m-color-border`                                                | 分割线 / 描边                                 |\n| `--m-radius-sm/md/lg`                                             | 圆角阶梯                                      |\n| `--m-space-*`                                                     | 间距阶梯                                      |\n| `--m-font-size-xs/sm/md/lg`                                       | 组件正文字号阶梯                              |\n| `--m-opacity-disabled`                                            | 禁用态透明度                                  |\n| `--m-z-base` / `--m-z-overlay` / `--m-z-dropdown` / `--m-z-toast` | 浮层层叠（Config `zIndex` 会写 `--m-z-base`） |\n| `--m-menu-min-width` / `--m-control-affix-*`                      | 菜单最小宽、输入清除区尺寸                    |\n\n动效相关 token（`--m-motion-*`）见 [动效](/docs/motion)。\n\n## 内容密度\n\n```ts\nimport { useDensity } from \"morya-ui\";\n\nconst { preference, setDensity } = useDensity();\nsetDensity(\"compact\"); // 'compact' | 'comfortable' | 'spacious'\n```\n\n也会写到 `document.documentElement` 的 `data-m-density`，并缩放 `--m-space-*` 与 `--m-control-height-*`。  \n应用级可用 `createMoryaUI({ density: 'compact' })` 或 `<MConfigProvider density=\"compact\">`。\n\n在组件页侧栏「主题」可临时改主色、圆角与密度，用于本地预览。完整交互页见 [主题编辑器](/theme-editor)（可导出 `createTheme` / CSS）。\n\n## 控件尺寸与聚焦\n\n默认控件高度采用 compact 节奏：\n\n| Size            | 高度                                 | 字号   |\n| --------------- | ------------------------------------ | ------ |\n| `small`         | `28px`（`--m-control-height-small`） | `14px` |\n| 默认 / `medium` | `34px`                               | `14px` |\n| `large`         | `40px`                               | `15px` |\n\n聚焦样式为 **主色描边 + 2px 淡色光晕**（非外扩 outline ring）：\n\n```css\nborder-color: var(--m-color-primary-hover);\nbox-shadow: var(--m-focus-shadow); /* 0 0 0 2px primary@20% */\n```\n\n相关 token：`--m-radius-control`、`--m-control-padding-x-*`、`--m-button-padding-x-*`、`--m-focus-shadow` / `--m-focus-shadow-danger`。\n\n## createTheme\n\n从 seed 推导完整 `--m-*` 并应用到文档或作用域元素：\n\n```ts\nimport { createTheme } from \"morya-ui\";\n\nconst theme = createTheme({\n  seed: { colorPrimary: \"#0b6e4f\", borderRadius: 8 },\n  // algorithm: 'dark' | 'compact' | ['dark', 'compact']\n});\n\ntheme.apply(); // 写到 :root（或传入元素做局部主题）\n// const dispose = theme.inject()  // 写入 <style data-m-theme>（组件级覆盖需要）\n```\n\n在线调色与导出片段：[主题编辑器](/theme-editor)。\n\n## 与 ConfigProvider\n\n主题切换是「视觉层」；`MConfigProvider` / `createMoryaUI` 负责尺寸、文案、浮层挂载等「行为默认值」。二者可同时使用，详见 [全局配置](/docs/config)。\n\n进出场与 `useMotion` 见 [动效](/docs/motion)。\n",
+          "markdown": "---\ntitle: 主题\norder: 5\ndescription: 亮暗主题、设计令牌与内容密度。\n---\n\n# 主题\n\n主题能力内置于 `morya-ui`。组件只消费语义化 CSS 变量（`--m-*`），不自行维护第二套色板。\n\n引入 `morya-ui/styles.css` 时已包含这些变量；主题 JS API（`useTheme` 等）从同一包导入。\n\n## 亮 / 暗色\n\n```ts\nimport { useTheme } from \"morya-ui\";\n\nconst { isDark, setTheme, toggleTheme } = useTheme();\n\nsetTheme(\"light\"); // 或 'dark'\ntoggleTheme();\n```\n\n文档站右上角的按钮调用的就是同一套 API。主题偏好会写到 `document.documentElement` 的 `data-theme`。\n\n## 设计令牌\n\n常用变量示例见 [设计令牌](/docs/design-tokens) 完整列表（支持搜索与分类）。\n\n| Token                                                             | 用途                                          |\n| ----------------------------------------------------------------- | --------------------------------------------- |\n| `--m-color-primary`                                               | 品牌主色                                      |\n| `--m-color-surface`                                               | 页面底色                                      |\n| `--m-color-text`                                                  | 正文                                          |\n| `--m-color-border`                                                | 分割线 / 描边                                 |\n| `--m-radius-sm/md/lg`                                             | 圆角阶梯                                      |\n| `--m-space-*`                                                     | 间距阶梯                                      |\n| `--m-font-size-xs/sm/md/lg`                                       | 组件正文字号阶梯                              |\n| `--m-opacity-disabled`                                            | 禁用态透明度                                  |\n| `--m-z-base` / `--m-z-overlay` / `--m-z-dropdown` / `--m-z-toast` | 浮层层叠（Config `zIndex` 会写 `--m-z-base`） |\n| `--m-overlay-menu-min-width` / `--m-control-affix-*`                      | 菜单最小宽、输入清除区尺寸                    |\n\n动效相关 token（`--m-motion-*`）见 [动效](/docs/motion)。\n\n## 内容密度\n\n```ts\nimport { useDensity } from \"morya-ui\";\n\nconst { preference, setDensity } = useDensity();\nsetDensity(\"compact\"); // 'compact' | 'comfortable' | 'spacious'\n```\n\n也会写到 `document.documentElement` 的 `data-m-density`，并缩放 `--m-space-*` 与 `--m-control-height-*`。  \n应用级可用 `createMoryaUI({ density: 'compact' })` 或 `<MConfigProvider density=\"compact\">`。\n\n在组件页侧栏「主题」可临时改主色、圆角与密度，用于本地预览。完整交互页见 [主题编辑器](/theme-editor)（可导出 `createTheme` / CSS）。\n\n## 控件尺寸与聚焦\n\n默认控件高度采用 compact 节奏：\n\n| Size            | 高度                                 | 字号   |\n| --------------- | ------------------------------------ | ------ |\n| `small`         | `28px`（`--m-control-height-small`） | `14px` |\n| 默认 / `medium` | `34px`                               | `14px` |\n| `large`         | `40px`                               | `15px` |\n\n聚焦样式为 **主色描边 + 2px 淡色光晕**（非外扩 outline ring）：\n\n```css\nborder-color: var(--m-color-primary-hover);\nbox-shadow: var(--m-focus-shadow); /* 0 0 0 2px primary@20% */\n```\n\n相关 token：`--m-radius-control`、`--m-control-padding-x-*`、`--m-button-padding-x-*`、`--m-focus-shadow` / `--m-focus-shadow-danger`。\n\n## createTheme\n\n从 seed 推导完整 `--m-*` 并应用到文档或作用域元素：\n\n```ts\nimport { createTheme } from \"morya-ui\";\n\nconst theme = createTheme({\n  seed: { colorPrimary: \"#0b6e4f\", borderRadius: 8 },\n  // algorithm: 'dark' | 'compact' | ['dark', 'compact']\n});\n\ntheme.apply(); // 写到 :root（或传入元素做局部主题）\n// const dispose = theme.inject()  // 写入 <style data-m-theme>（组件级覆盖需要）\n```\n\n在线调色与导出片段：[主题编辑器](/theme-editor)。\n\n## 与 ConfigProvider\n\n主题切换是「视觉层」；`MConfigProvider` / `createMoryaUI` 负责尺寸、文案、浮层挂载等「行为默认值」。二者可同时使用，详见 [全局配置](/docs/config)。\n\n进出场与 `useMotion` 见 [动效](/docs/motion)。\n",
           "sections": [
             {
               "title": "",
@@ -32616,7 +33571,7 @@
             {
               "title": "设计令牌",
               "id": "设计令牌",
-              "body": "常用变量示例见 [设计令牌](/docs/design-tokens) 完整列表（支持搜索与分类）。\n\n| Token                                                             | 用途                                          |\n| ----------------------------------------------------------------- | --------------------------------------------- |\n| `--m-color-primary`                                               | 品牌主色                                      |\n| `--m-color-surface`                                               | 页面底色                                      |\n| `--m-color-text`                                                  | 正文                                          |\n| `--m-color-border`                                                | 分割线 / 描边                                 |\n| `--m-radius-sm/md/lg`                                             | 圆角阶梯                                      |\n| `--m-space-*`                                                     | 间距阶梯                                      |\n| `--m-font-size-xs/sm/md/lg`                                       | 组件正文字号阶梯                              |\n| `--m-opacity-disabled`                                            | 禁用态透明度                                  |\n| `--m-z-base` / `--m-z-overlay` / `--m-z-dropdown` / `--m-z-toast` | 浮层层叠（Config `zIndex` 会写 `--m-z-base`） |\n| `--m-menu-min-width` / `--m-control-affix-*`                      | 菜单最小宽、输入清除区尺寸                    |\n\n动效相关 token（`--m-motion-*`）见 [动效](/docs/motion)。"
+              "body": "常用变量示例见 [设计令牌](/docs/design-tokens) 完整列表（支持搜索与分类）。\n\n| Token                                                             | 用途                                          |\n| ----------------------------------------------------------------- | --------------------------------------------- |\n| `--m-color-primary`                                               | 品牌主色                                      |\n| `--m-color-surface`                                               | 页面底色                                      |\n| `--m-color-text`                                                  | 正文                                          |\n| `--m-color-border`                                                | 分割线 / 描边                                 |\n| `--m-radius-sm/md/lg`                                             | 圆角阶梯                                      |\n| `--m-space-*`                                                     | 间距阶梯                                      |\n| `--m-font-size-xs/sm/md/lg`                                       | 组件正文字号阶梯                              |\n| `--m-opacity-disabled`                                            | 禁用态透明度                                  |\n| `--m-z-base` / `--m-z-overlay` / `--m-z-dropdown` / `--m-z-toast` | 浮层层叠（Config `zIndex` 会写 `--m-z-base`） |\n| `--m-overlay-menu-min-width` / `--m-control-affix-*`                      | 菜单最小宽、输入清除区尺寸                    |\n\n动效相关 token（`--m-motion-*`）见 [动效](/docs/motion)。"
             },
             {
               "title": "内容密度",
@@ -32643,7 +33598,7 @@
         "en-US": {
           "title": "Theme",
           "description": "Light and dark themes, design tokens, and density.",
-          "markdown": "---\ntitle: Theme\norder: 5\ndescription: Light and dark themes, design tokens, and density.\n---\n\n# Theme\n\nTheme support is built into `morya-ui`. Components consume semantic CSS variables (`--m-*`) and do not keep a second palette.\n\nImporting `morya-ui/styles.css` already includes these variables. Theme JS APIs (`useTheme` and friends) come from the same package.\n\n## Light / dark\n\n```ts\nimport { useTheme } from \"morya-ui\";\n\nconst { isDark, setTheme, toggleTheme } = useTheme();\n\nsetTheme(\"light\"); // or 'dark'\ntoggleTheme();\n```\n\nThe button at the top-right of the docs site uses the same API. The preference is written to `data-theme` on `document.documentElement`.\n\n## Design tokens\n\nSee the full [Design tokens](/docs/design-tokens) catalog (searchable, grouped by category).\n\n| Token                                                             | Use                                             |\n| ----------------------------------------------------------------- | ----------------------------------------------- |\n| `--m-color-primary`                                               | Brand color                                     |\n| `--m-color-surface`                                               | Page background                                 |\n| `--m-color-text`                                                  | Body text                                       |\n| `--m-color-border`                                                | Dividers / strokes                              |\n| `--m-radius-sm/md/lg`                                             | Radius scale                                    |\n| `--m-space-*`                                                     | Spacing scale                                   |\n| `--m-font-size-xs/sm/md/lg`                                       | Component type scale                            |\n| `--m-opacity-disabled`                                            | Disabled opacity                                |\n| `--m-z-base` / `--m-z-overlay` / `--m-z-dropdown` / `--m-z-toast` | Overlay stacking (`zIndex` writes `--m-z-base`) |\n| `--m-menu-min-width` / `--m-control-affix-*`                      | Menu min width, input clear-button size         |\n\nMotion tokens (`--m-motion-*`) are covered in [Motion](/docs/motion).\n\n## Density\n\n```ts\nimport { useDensity } from \"morya-ui\";\n\nconst { preference, setDensity } = useDensity();\nsetDensity(\"compact\"); // 'compact' | 'comfortable' | 'spacious'\n```\n\nThis writes `data-m-density` on `document.documentElement` and scales `--m-space-*` plus `--m-control-height-*`.  \nAt the app level use `createMoryaUI({ density: 'compact' })` or `<MConfigProvider density=\"compact\">`.\n\nThe Components page sidebar Theme panel can temporarily change accent, radius, and density for local preview. Full interactive page: [Theme editor](/theme-editor) (exports `createTheme` / CSS).\n\n## Control size and focus\n\nDefault control heights follow a compact rhythm:\n\n| Size               | Height                              | Font size |\n| ------------------ | ----------------------------------- | --------- |\n| `small`            | `28px` (`--m-control-height-small`) | `14px`    |\n| Default / `medium` | `34px`                              | `14px`    |\n| `large`            | `40px`                              | `15px`    |\n\nFocus uses a **brand border + 2px tinted glow** (not an outset outline ring):\n\n```css\nborder-color: var(--m-color-primary-hover);\nbox-shadow: var(--m-focus-shadow); /* 0 0 0 2px primary@20% */\n```\n\nRelated tokens: `--m-radius-control`, `--m-control-padding-x-*`, `--m-button-padding-x-*`, `--m-focus-shadow` / `--m-focus-shadow-danger`.\n\n## createTheme\n\nDerive the full `--m-*` set from a seed and apply it to the document or a scoped element:\n\n```ts\nimport { createTheme } from \"morya-ui\";\n\nconst theme = createTheme({\n  seed: { colorPrimary: \"#0b6e4f\", borderRadius: 8 },\n  // algorithm: 'dark' | 'compact' | ['dark', 'compact']\n});\n\ntheme.apply(); // write onto :root (or pass an element for scoped theming)\n// const dispose = theme.inject()  // <style data-m-theme> (needed for component overrides)\n```\n\nLive tuning and export snippets: [Theme editor](/theme-editor).\n\n## With ConfigProvider\n\nTheme switching is the visual layer. `MConfigProvider` / `createMoryaUI` own size, copy, overlay mount, and other behavioral defaults. Use both together; see [Configuration](/docs/config).\n\nEnter/exit presets and `useMotion` live under [Motion](/docs/motion).\n",
+          "markdown": "---\ntitle: Theme\norder: 5\ndescription: Light and dark themes, design tokens, and density.\n---\n\n# Theme\n\nTheme support is built into `morya-ui`. Components consume semantic CSS variables (`--m-*`) and do not keep a second palette.\n\nImporting `morya-ui/styles.css` already includes these variables. Theme JS APIs (`useTheme` and friends) come from the same package.\n\n## Light / dark\n\n```ts\nimport { useTheme } from \"morya-ui\";\n\nconst { isDark, setTheme, toggleTheme } = useTheme();\n\nsetTheme(\"light\"); // or 'dark'\ntoggleTheme();\n```\n\nThe button at the top-right of the docs site uses the same API. The preference is written to `data-theme` on `document.documentElement`.\n\n## Design tokens\n\nSee the full [Design tokens](/docs/design-tokens) catalog (searchable, grouped by category).\n\n| Token                                                             | Use                                             |\n| ----------------------------------------------------------------- | ----------------------------------------------- |\n| `--m-color-primary`                                               | Brand color                                     |\n| `--m-color-surface`                                               | Page background                                 |\n| `--m-color-text`                                                  | Body text                                       |\n| `--m-color-border`                                                | Dividers / strokes                              |\n| `--m-radius-sm/md/lg`                                             | Radius scale                                    |\n| `--m-space-*`                                                     | Spacing scale                                   |\n| `--m-font-size-xs/sm/md/lg`                                       | Component type scale                            |\n| `--m-opacity-disabled`                                            | Disabled opacity                                |\n| `--m-z-base` / `--m-z-overlay` / `--m-z-dropdown` / `--m-z-toast` | Overlay stacking (`zIndex` writes `--m-z-base`) |\n| `--m-overlay-menu-min-width` / `--m-control-affix-*`                      | Menu min width, input clear-button size         |\n\nMotion tokens (`--m-motion-*`) are covered in [Motion](/docs/motion).\n\n## Density\n\n```ts\nimport { useDensity } from \"morya-ui\";\n\nconst { preference, setDensity } = useDensity();\nsetDensity(\"compact\"); // 'compact' | 'comfortable' | 'spacious'\n```\n\nThis writes `data-m-density` on `document.documentElement` and scales `--m-space-*` plus `--m-control-height-*`.  \nAt the app level use `createMoryaUI({ density: 'compact' })` or `<MConfigProvider density=\"compact\">`.\n\nThe Components page sidebar Theme panel can temporarily change accent, radius, and density for local preview. Full interactive page: [Theme editor](/theme-editor) (exports `createTheme` / CSS).\n\n## Control size and focus\n\nDefault control heights follow a compact rhythm:\n\n| Size               | Height                              | Font size |\n| ------------------ | ----------------------------------- | --------- |\n| `small`            | `28px` (`--m-control-height-small`) | `14px`    |\n| Default / `medium` | `34px`                              | `14px`    |\n| `large`            | `40px`                              | `15px`    |\n\nFocus uses a **brand border + 2px tinted glow** (not an outset outline ring):\n\n```css\nborder-color: var(--m-color-primary-hover);\nbox-shadow: var(--m-focus-shadow); /* 0 0 0 2px primary@20% */\n```\n\nRelated tokens: `--m-radius-control`, `--m-control-padding-x-*`, `--m-button-padding-x-*`, `--m-focus-shadow` / `--m-focus-shadow-danger`.\n\n## createTheme\n\nDerive the full `--m-*` set from a seed and apply it to the document or a scoped element:\n\n```ts\nimport { createTheme } from \"morya-ui\";\n\nconst theme = createTheme({\n  seed: { colorPrimary: \"#0b6e4f\", borderRadius: 8 },\n  // algorithm: 'dark' | 'compact' | ['dark', 'compact']\n});\n\ntheme.apply(); // write onto :root (or pass an element for scoped theming)\n// const dispose = theme.inject()  // <style data-m-theme> (needed for component overrides)\n```\n\nLive tuning and export snippets: [Theme editor](/theme-editor).\n\n## With ConfigProvider\n\nTheme switching is the visual layer. `MConfigProvider` / `createMoryaUI` own size, copy, overlay mount, and other behavioral defaults. Use both together; see [Configuration](/docs/config).\n\nEnter/exit presets and `useMotion` live under [Motion](/docs/motion).\n",
           "sections": [
             {
               "title": "",
@@ -32658,7 +33613,7 @@
             {
               "title": "Design tokens",
               "id": "design-tokens",
-              "body": "See the full [Design tokens](/docs/design-tokens) catalog (searchable, grouped by category).\n\n| Token                                                             | Use                                             |\n| ----------------------------------------------------------------- | ----------------------------------------------- |\n| `--m-color-primary`                                               | Brand color                                     |\n| `--m-color-surface`                                               | Page background                                 |\n| `--m-color-text`                                                  | Body text                                       |\n| `--m-color-border`                                                | Dividers / strokes                              |\n| `--m-radius-sm/md/lg`                                             | Radius scale                                    |\n| `--m-space-*`                                                     | Spacing scale                                   |\n| `--m-font-size-xs/sm/md/lg`                                       | Component type scale                            |\n| `--m-opacity-disabled`                                            | Disabled opacity                                |\n| `--m-z-base` / `--m-z-overlay` / `--m-z-dropdown` / `--m-z-toast` | Overlay stacking (`zIndex` writes `--m-z-base`) |\n| `--m-menu-min-width` / `--m-control-affix-*`                      | Menu min width, input clear-button size         |\n\nMotion tokens (`--m-motion-*`) are covered in [Motion](/docs/motion)."
+              "body": "See the full [Design tokens](/docs/design-tokens) catalog (searchable, grouped by category).\n\n| Token                                                             | Use                                             |\n| ----------------------------------------------------------------- | ----------------------------------------------- |\n| `--m-color-primary`                                               | Brand color                                     |\n| `--m-color-surface`                                               | Page background                                 |\n| `--m-color-text`                                                  | Body text                                       |\n| `--m-color-border`                                                | Dividers / strokes                              |\n| `--m-radius-sm/md/lg`                                             | Radius scale                                    |\n| `--m-space-*`                                                     | Spacing scale                                   |\n| `--m-font-size-xs/sm/md/lg`                                       | Component type scale                            |\n| `--m-opacity-disabled`                                            | Disabled opacity                                |\n| `--m-z-base` / `--m-z-overlay` / `--m-z-dropdown` / `--m-z-toast` | Overlay stacking (`zIndex` writes `--m-z-base`) |\n| `--m-overlay-menu-min-width` / `--m-control-affix-*`                      | Menu min width, input clear-button size         |\n\nMotion tokens (`--m-motion-*`) are covered in [Motion](/docs/motion)."
             },
             {
               "title": "Density",
@@ -32967,24 +33922,24 @@
         "zh-CN": {
           "title": "API 类型",
           "description": "文档 Props 里常见类型名的结构与含义。",
-          "markdown": "---\ntitle: API 类型\norder: 8\ndescription: 文档 Props 里常见类型名的结构与含义。\n---\n\n# API 类型\n\n组件文档 Props 表里出现的类型名，在这里查具体结构。包入口也导出同名类型，可在业务代码里 `import type { … } from 'morya-ui'`（以各组件 `types.ts` 为准）。\n\n<h3 id=\"PassThroughPart\">PassThroughPart</h3>\n\n单个 DOM 节点上要合并的属性 bag。`pt.<part>` 的值就是这个类型。\n\n```ts\ntype PassThroughPart = Record<string, unknown>\n```\n\n常用键：`class`、`style`、`data-*`、`onClick` / `onKeydown`（Vue 事件监听写法）、以及该节点合法的原生 HTML 属性。\n\n<h3 id=\"RootPassThrough\">RootPassThrough</h3>\n\n单根容器（Card、Dialog 遮罩、Tabs 等）：\n\n```ts\ninterface RootPassThrough {\n  root?: PassThroughPart\n}\n```\n\n<h3 id=\"ControlPassThrough\">ControlPassThrough</h3>\n\nCheckbox / Radio / Switch（可见根是 `<label>`，hidden input 单独一段）：\n\n```ts\ninterface ControlPassThrough {\n  root?: PassThroughPart   // 一般是 label\n  input?: PassThroughPart  // 原生 input\n}\n```\n\n<h3 id=\"FieldPassThrough\">FieldPassThrough</h3>\n\n表单字段（Input、Select、DatePicker 等）：\n\n```ts\ninterface FieldPassThrough {\n  root?: PassThroughPart    // 外层 .m-*-field\n  label?: PassThroughPart\n  control?: PassThroughPart // 触发器 / 组合控件（Select 等）\n  input?: PassThroughPart   // 原生 input / textarea\n}\n```\n\n具体组件支持哪些键，见该组件文档的 **类型** 或 **pt** 小节。\n\n<h3 id=\"InputPassThrough\">InputPassThrough</h3>\n\n[`Input`](/components/Input) 在 `FieldPassThrough` 基础上多了前后缀等：\n\n```ts\ntype InputPassThrough = FieldPassThrough & {\n  prefix?: PassThroughPart\n  suffix?: PassThroughPart\n  help?: PassThroughPart\n  count?: PassThroughPart\n}\n```\n\n<h3 id=\"SplitterPassThrough\">SplitterPassThrough</h3>\n\n[`Splitter`](/components/Splitter) 在 `RootPassThrough` 上增加分隔条与面板：\n\n```ts\ntype SplitterPassThrough = RootPassThrough & {\n  gutter?: PassThroughPart\n  panel1?: PassThroughPart\n  panel2?: PassThroughPart\n}\n```\n\n分隔条外观也可用 `resizeTriggerClass` / `resizeTriggerStyle`，内容用 `#resize-trigger`（别名 `#gutter`）。\n\n<h3 id=\"MSizeInput\">MSizeInput</h3>\n\n控件尺寸，多数表单 / 按钮组件的 `size` prop：\n\n```ts\ntype MSizeInput = 'small' | 'medium' | 'large' | 'sm' | 'md' | 'lg'\n```\n\n`sm` / `md` / `lg` 为兼容别名；未传时通常继承 [ConfigProvider](/docs/config) 的 `size`。\n\n<h3 id=\"MInputVariant\">MInputVariant</h3>\n\n输入框视觉变体：\n\n```ts\ntype MInputVariant = 'outlined' | 'filled'\n```\n\n<h3 id=\"ButtonType\">ButtonType</h3>\n\n按钮类型糖（[`Button`](/components/Button)）：\n\n```ts\ntype ButtonType = 'default' | 'primary' | 'dashed' | 'link' | 'text'\n```\n\n<h3 id=\"ButtonColor\">ButtonColor</h3>\n\n按钮颜色轴（Button、ConfirmDialog `acceptColor`、Dialog `positiveColor` 等）：\n\n```ts\ntype ButtonColor =\n  | 'default'\n  | 'primary'\n  | 'danger'\n  | 'success'\n  | 'info'\n  | 'warning'\n  | 'help'\n  | 'contrast'\n  | 'link'\n```\n\n<h3 id=\"ButtonVariant\">ButtonVariant</h3>\n\n按钮变体轴：\n\n```ts\ntype ButtonVariant = 'solid' | 'outlined' | 'dashed' | 'filled' | 'text' | 'link'\n```\n\n<h3 id=\"MAppendTo\">MAppendTo</h3>\n\n浮层 Teleport 挂载目标（Dialog、Select 菜单、Toast 等）：\n\n```ts\ntype MAppendTo = string | HTMLElement | 'self'\n```\n\n- `'body'`（默认）：挂到 document.body  \n- `'self'`：不 Teleport，就地渲染  \n- 也常见 `appendTo: false`（运行时兼容，同 `'self'`）\n\n<h3 id=\"AsyncGuard\">AsyncGuard</h3>\n\n关闭 / 确认前的拦截函数。返回 `false`（含 Promise 解析为 `false`）则**不继续**：\n\n```ts\ntype AsyncGuard<T extends unknown[] = []> = (\n  ...args: T\n) => unknown | Promise<unknown>\n```\n\n用于 Dialog `beforeClose`、`onPositiveClick`，ConfirmDialog / ConfirmPopup 的 `beforeAccept` 等。\n\n<h3 id=\"SelectOption\">SelectOption</h3>\n\n[`Select`](/components/Select) 选项项：\n\n```ts\ninterface SelectOption {\n  label: string\n  value: string | number\n  disabled?: boolean\n}\n```\n\n<h3 id=\"SelectOptionGroup\">SelectOptionGroup</h3>\n\n[`Select`](/components/Select) 选项分组（混入 `options` 渲染分组标题行）：\n\n```ts\ninterface SelectOptionGroup {\n  label: string\n  items: SelectOption[]\n}\n```\n\n<h3 id=\"SelectModelValue\">SelectModelValue</h3>\n\n```ts\ntype SelectValue = string | number\ntype SelectModelValue = SelectValue | SelectValue[] | undefined\n```\n\n单选为标量；`multiple` 时为数组。\n\n<h3 id=\"IconName\">IconName</h3>\n\n[`MIcon`](/components/Icon) / [`Button`](/components/Button) 的 `icon` / `name` 使用的注册名，例如 `'search'`、`'chevron-down'`。完整列表见 Icon 文档注册表。\n\n<h3 id=\"MenuNodeBase\">MenuNodeBase</h3>\n\nMenu / Dropdown / ContextMenu 等导航项的公共字段：\n\n```ts\ninterface MenuNodeBase {\n  key?: string\n  label?: string\n  value?: string\n  icon?: string\n  disabled?: boolean\n  separator?: boolean\n  shortcut?: string\n  command?: () => void\n  items?: MenuNodeBase[]\n}\n```\n\n<h3 id=\"MToneType\">MToneType</h3>\n\n显示 / 反馈组件的语义色基集：\n\n```ts\ntype MToneType =\n  | 'secondary'\n  | 'success'\n  | 'info'\n  | 'warning'\n  | 'help'\n  | 'danger'\n  | 'contrast'\n```\n\n<h3 id=\"MTagType\">MTagType</h3>\n\nTag / Badge / Chip / Status：`MToneType` 加上品牌色 `primary`。\n\n```ts\ntype MTagType = MToneType | 'primary'\n```\n\n<h3 id=\"MToastType\">MToastType</h3>\n\nMessage / Toast / Timeline 的语义色：\n\n```ts\ntype MToastType =\n  | 'success'\n  | 'info'\n  | 'warning'\n  | 'danger'\n  | 'secondary'\n  | 'contrast'\n```\n\n---\n\n更细的组件专属类型（如 `TableServerOptions`、`MenuItem`）写在对应组件页 **类型** 小节；这里只列跨组件复用的名字。\n",
+          "markdown": "---\ntitle: API 类型\norder: 8\ndescription: 文档 Props 里常见类型名的结构与含义。\n---\n\n# API 类型\n\n组件文档 Props 表里出现的类型名，在这里查具体结构。包入口也导出同名类型，可在业务代码里 `import type { … } from 'morya-ui'`（以各组件 `types.ts` 为准）。\n\n<h3 id=\"PassThroughPart\">PassThroughPart</h3>\n\n单个 DOM 节点上要合并的属性 bag。`pt.<part>` 的值就是这个类型。\n\n```ts\ntype PassThroughPart = Record<string, unknown>\n```\n\n常用键：`class`、`style`、`data-*`、`onClick` / `onKeydown`（Vue 事件监听写法）、以及该节点合法的原生 HTML 属性。\n\n<h3 id=\"RootPassThrough\">RootPassThrough</h3>\n\n单根容器（Card、Dialog 遮罩、Tabs 等）：\n\n```ts\ninterface RootPassThrough {\n  root?: PassThroughPart\n}\n```\n\n<h3 id=\"ControlPassThrough\">ControlPassThrough</h3>\n\nCheckbox / Radio / Switch（可见根是 `<label>`，hidden input 单独一段）：\n\n```ts\ninterface ControlPassThrough {\n  root?: PassThroughPart   // 一般是 label\n  input?: PassThroughPart  // 原生 input\n}\n```\n\n<h3 id=\"FieldPassThrough\">FieldPassThrough</h3>\n\n表单字段（Input、Select、DatePicker 等）：\n\n```ts\ninterface FieldPassThrough {\n  root?: PassThroughPart    // 外层 .m-*-field\n  label?: PassThroughPart\n  control?: PassThroughPart // 触发器 / 组合控件（Select 等）\n  input?: PassThroughPart   // 原生 input / textarea\n}\n```\n\n具体组件支持哪些键，见该组件文档的 **类型** 或 **pt** 小节。\n\n<h3 id=\"InputPassThrough\">InputPassThrough</h3>\n\n[`Input`](/components/Input) 在 `FieldPassThrough` 基础上多了前后缀等：\n\n```ts\ntype InputPassThrough = FieldPassThrough & {\n  prefix?: PassThroughPart\n  suffix?: PassThroughPart\n  help?: PassThroughPart\n  count?: PassThroughPart\n}\n```\n\n<h3 id=\"SplitterPassThrough\">SplitterPassThrough</h3>\n\n[`Splitter`](/components/Splitter) 在 `RootPassThrough` 上增加分隔条与面板：\n\n```ts\ntype SplitterPassThrough = RootPassThrough & {\n  gutter?: PassThroughPart\n  panel1?: PassThroughPart\n  panel2?: PassThroughPart\n}\n```\n\n分隔条外观也可用 `resizeTriggerClass` / `resizeTriggerStyle`，内容用 `#resize-trigger`（别名 `#gutter`）。\n\n<h3 id=\"OrderListPassThrough\">OrderListPassThrough</h3>\n\n[`OrderList`](/components/order-list) 在 `RootPassThrough` 上增加按钮组与列表项：\n\n```ts\ntype OrderListPassThrough = RootPassThrough & {\n  controls?: PassThroughPart  // 左侧按钮组\n  list?: PassThroughPart      // 滚动列表\n  item?: PassThroughPart      // 单个列表项\n  handle?: PassThroughPart    // 拖拽手柄\n  label?: PassThroughPart     // 项文本容器\n}\n```\n\n<h3 id=\"MSizeInput\">MSizeInput</h3>\n\n控件尺寸，多数表单 / 按钮组件的 `size` prop：\n\n```ts\ntype MSizeInput = 'small' | 'medium' | 'large' | 'sm' | 'md' | 'lg'\n```\n\n`sm` / `md` / `lg` 为兼容别名；未传时通常继承 [ConfigProvider](/docs/config) 的 `size`。\n\n<h3 id=\"MInputVariant\">MInputVariant</h3>\n\n输入框视觉变体：\n\n```ts\ntype MInputVariant = 'outlined' | 'filled'\n```\n\n<h3 id=\"ButtonType\">ButtonType</h3>\n\n按钮类型糖（[`Button`](/components/Button)）：\n\n```ts\ntype ButtonType = 'default' | 'primary' | 'dashed' | 'link' | 'text'\n```\n\n<h3 id=\"ButtonColor\">ButtonColor</h3>\n\n按钮颜色轴（Button、ConfirmDialog `acceptColor`、Dialog `positiveColor` 等）：\n\n```ts\ntype ButtonColor =\n  | 'default'\n  | 'primary'\n  | 'danger'\n  | 'success'\n  | 'info'\n  | 'warning'\n  | 'help'\n  | 'contrast'\n  | 'link'\n```\n\n<h3 id=\"ButtonVariant\">ButtonVariant</h3>\n\n按钮变体轴：\n\n```ts\ntype ButtonVariant = 'solid' | 'outlined' | 'dashed' | 'filled' | 'text' | 'link'\n```\n\n<h3 id=\"MAppendTo\">MAppendTo</h3>\n\n浮层 Teleport 挂载目标（Dialog、Select 菜单、Toast 等）：\n\n```ts\ntype MAppendTo = string | HTMLElement | 'self'\n```\n\n- `'body'`（默认）：挂到 document.body  \n- `'self'`：不 Teleport，就地渲染  \n- 也常见 `appendTo: false`（运行时兼容，同 `'self'`）\n\n<h3 id=\"AsyncGuard\">AsyncGuard</h3>\n\n关闭 / 确认前的拦截函数。返回 `false`（含 Promise 解析为 `false`）则**不继续**：\n\n```ts\ntype AsyncGuard<T extends unknown[] = []> = (\n  ...args: T\n) => unknown | Promise<unknown>\n```\n\n用于 Dialog `beforeClose`、`onPositiveClick`，ConfirmDialog / ConfirmPopup 的 `beforeAccept` 等。\n\n<h3 id=\"SelectOption\">SelectOption</h3>\n\n[`Select`](/components/Select) 选项项：\n\n```ts\ninterface SelectOption {\n  label: string\n  value: string | number\n  disabled?: boolean\n}\n```\n\n<h3 id=\"SelectOptionGroup\">SelectOptionGroup</h3>\n\n[`Select`](/components/Select) 选项分组（混入 `options` 渲染分组标题行）：\n\n```ts\ninterface SelectOptionGroup {\n  label: string\n  items: SelectOption[]\n}\n```\n\n<h3 id=\"SelectModelValue\">SelectModelValue</h3>\n\n```ts\ntype SelectValue = string | number\ntype SelectModelValue = SelectValue | SelectValue[] | undefined\n```\n\n单选为标量；`multiple` 时为数组。\n\n<h3 id=\"IconName\">IconName</h3>\n\n[`MIcon`](/components/Icon) / [`Button`](/components/Button) 的 `icon` / `name` 使用的注册名，例如 `'search'`、`'chevron-down'`。完整列表见 Icon 文档注册表。\n\n<h3 id=\"MenuNodeBase\">MenuNodeBase</h3>\n\nMenu / Dropdown / ContextMenu 等导航项的公共字段：\n\n```ts\ninterface MenuNodeBase {\n  key?: string\n  label?: string\n  value?: string\n  icon?: string\n  disabled?: boolean\n  separator?: boolean\n  shortcut?: string\n  command?: () => void\n  items?: MenuNodeBase[]\n}\n```\n\n<h3 id=\"MToneType\">MToneType</h3>\n\n显示 / 反馈组件的语义色基集：\n\n```ts\ntype MToneType =\n  | 'secondary'\n  | 'success'\n  | 'info'\n  | 'warning'\n  | 'help'\n  | 'danger'\n  | 'contrast'\n```\n\n<h3 id=\"MTagType\">MTagType</h3>\n\nTag / Badge / Chip / Status：`MToneType` 加上品牌色 `primary`。\n\n```ts\ntype MTagType = MToneType | 'primary'\n```\n\n<h3 id=\"MToastType\">MToastType</h3>\n\nMessage / Toast / Timeline 的语义色：\n\n```ts\ntype MToastType =\n  | 'success'\n  | 'info'\n  | 'warning'\n  | 'danger'\n  | 'secondary'\n  | 'contrast'\n```\n\n---\n\n更细的组件专属类型（如 `TableServerOptions`、`MenuItem`）写在对应组件页 **类型** 小节；这里只列跨组件复用的名字。\n",
           "sections": [
             {
               "title": "",
               "id": "overview",
-              "body": "# API 类型\n\n组件文档 Props 表里出现的类型名，在这里查具体结构。包入口也导出同名类型，可在业务代码里 `import type { … } from 'morya-ui'`（以各组件 `types.ts` 为准）。\n\n<h3 id=\"PassThroughPart\">PassThroughPart</h3>\n\n单个 DOM 节点上要合并的属性 bag。`pt.<part>` 的值就是这个类型。\n\n```ts\ntype PassThroughPart = Record<string, unknown>\n```\n\n常用键：`class`、`style`、`data-*`、`onClick` / `onKeydown`（Vue 事件监听写法）、以及该节点合法的原生 HTML 属性。\n\n<h3 id=\"RootPassThrough\">RootPassThrough</h3>\n\n单根容器（Card、Dialog 遮罩、Tabs 等）：\n\n```ts\ninterface RootPassThrough {\n  root?: PassThroughPart\n}\n```\n\n<h3 id=\"ControlPassThrough\">ControlPassThrough</h3>\n\nCheckbox / Radio / Switch（可见根是 `<label>`，hidden input 单独一段）：\n\n```ts\ninterface ControlPassThrough {\n  root?: PassThroughPart   // 一般是 label\n  input?: PassThroughPart  // 原生 input\n}\n```\n\n<h3 id=\"FieldPassThrough\">FieldPassThrough</h3>\n\n表单字段（Input、Select、DatePicker 等）：\n\n```ts\ninterface FieldPassThrough {\n  root?: PassThroughPart    // 外层 .m-*-field\n  label?: PassThroughPart\n  control?: PassThroughPart // 触发器 / 组合控件（Select 等）\n  input?: PassThroughPart   // 原生 input / textarea\n}\n```\n\n具体组件支持哪些键，见该组件文档的 **类型** 或 **pt** 小节。\n\n<h3 id=\"InputPassThrough\">InputPassThrough</h3>\n\n[`Input`](/components/Input) 在 `FieldPassThrough` 基础上多了前后缀等：\n\n```ts\ntype InputPassThrough = FieldPassThrough & {\n  prefix?: PassThroughPart\n  suffix?: PassThroughPart\n  help?: PassThroughPart\n  count?: PassThroughPart\n}\n```\n\n<h3 id=\"SplitterPassThrough\">SplitterPassThrough</h3>\n\n[`Splitter`](/components/Splitter) 在 `RootPassThrough` 上增加分隔条与面板：\n\n```ts\ntype SplitterPassThrough = RootPassThrough & {\n  gutter?: PassThroughPart\n  panel1?: PassThroughPart\n  panel2?: PassThroughPart\n}\n```\n\n分隔条外观也可用 `resizeTriggerClass` / `resizeTriggerStyle`，内容用 `#resize-trigger`（别名 `#gutter`）。\n\n<h3 id=\"MSizeInput\">MSizeInput</h3>\n\n控件尺寸，多数表单 / 按钮组件的 `size` prop：\n\n```ts\ntype MSizeInput = 'small' | 'medium' | 'large' | 'sm' | 'md' | 'lg'\n```\n\n`sm` / `md` / `lg` 为兼容别名；未传时通常继承 [ConfigProvider](/docs/config) 的 `size`。\n\n<h3 id=\"MInputVariant\">MInputVariant</h3>\n\n输入框视觉变体：\n\n```ts\ntype MInputVariant = 'outlined' | 'filled'\n```\n\n<h3 id=\"ButtonType\">ButtonType</h3>\n\n按钮类型糖（[`Button`](/components/Button)）：\n\n```ts\ntype ButtonType = 'default' | 'primary' | 'dashed' | 'link' | 'text'\n```\n\n<h3 id=\"ButtonColor\">ButtonColor</h3>\n\n按钮颜色轴（Button、ConfirmDialog `acceptColor`、Dialog `positiveColor` 等）：\n\n```ts\ntype ButtonColor =\n  | 'default'\n  | 'primary'\n  | 'danger'\n  | 'success'\n  | 'info'\n  | 'warning'\n  | 'help'\n  | 'contrast'\n  | 'link'\n```\n\n<h3 id=\"ButtonVariant\">ButtonVariant</h3>\n\n按钮变体轴：\n\n```ts\ntype ButtonVariant = 'solid' | 'outlined' | 'dashed' | 'filled' | 'text' | 'link'\n```\n\n<h3 id=\"MAppendTo\">MAppendTo</h3>\n\n浮层 Teleport 挂载目标（Dialog、Select 菜单、Toast 等）：\n\n```ts\ntype MAppendTo = string | HTMLElement | 'self'\n```\n\n- `'body'`（默认）：挂到 document.body  \n- `'self'`：不 Teleport，就地渲染  \n- 也常见 `appendTo: false`（运行时兼容，同 `'self'`）\n\n<h3 id=\"AsyncGuard\">AsyncGuard</h3>\n\n关闭 / 确认前的拦截函数。返回 `false`（含 Promise 解析为 `false`）则**不继续**：\n\n```ts\ntype AsyncGuard<T extends unknown[] = []> = (\n  ...args: T\n) => unknown | Promise<unknown>\n```\n\n用于 Dialog `beforeClose`、`onPositiveClick`，ConfirmDialog / ConfirmPopup 的 `beforeAccept` 等。\n\n<h3 id=\"SelectOption\">SelectOption</h3>\n\n[`Select`](/components/Select) 选项项：\n\n```ts\ninterface SelectOption {\n  label: string\n  value: string | number\n  disabled?: boolean\n}\n```\n\n<h3 id=\"SelectOptionGroup\">SelectOptionGroup</h3>\n\n[`Select`](/components/Select) 选项分组（混入 `options` 渲染分组标题行）：\n\n```ts\ninterface SelectOptionGroup {\n  label: string\n  items: SelectOption[]\n}\n```\n\n<h3 id=\"SelectModelValue\">SelectModelValue</h3>\n\n```ts\ntype SelectValue = string | number\ntype SelectModelValue = SelectValue | SelectValue[] | undefined\n```\n\n单选为标量；`multiple` 时为数组。\n\n<h3 id=\"IconName\">IconName</h3>\n\n[`MIcon`](/components/Icon) / [`Button`](/components/Button) 的 `icon` / `name` 使用的注册名，例如 `'search'`、`'chevron-down'`。完整列表见 Icon 文档注册表。\n\n<h3 id=\"MenuNodeBase\">MenuNodeBase</h3>\n\nMenu / Dropdown / ContextMenu 等导航项的公共字段：\n\n```ts\ninterface MenuNodeBase {\n  key?: string\n  label?: string\n  value?: string\n  icon?: string\n  disabled?: boolean\n  separator?: boolean\n  shortcut?: string\n  command?: () => void\n  items?: MenuNodeBase[]\n}\n```\n\n<h3 id=\"MToneType\">MToneType</h3>\n\n显示 / 反馈组件的语义色基集：\n\n```ts\ntype MToneType =\n  | 'secondary'\n  | 'success'\n  | 'info'\n  | 'warning'\n  | 'help'\n  | 'danger'\n  | 'contrast'\n```\n\n<h3 id=\"MTagType\">MTagType</h3>\n\nTag / Badge / Chip / Status：`MToneType` 加上品牌色 `primary`。\n\n```ts\ntype MTagType = MToneType | 'primary'\n```\n\n<h3 id=\"MToastType\">MToastType</h3>\n\nMessage / Toast / Timeline 的语义色：\n\n```ts\ntype MToastType =\n  | 'success'\n  | 'info'\n  | 'warning'\n  | 'danger'\n  | 'secondary'\n  | 'contrast'\n```\n\n---\n\n更细的组件专属类型（如 `TableServerOptions`、`MenuItem`）写在对应组件页 **类型** 小节；这里只列跨组件复用的名字。"
+              "body": "# API 类型\n\n组件文档 Props 表里出现的类型名，在这里查具体结构。包入口也导出同名类型，可在业务代码里 `import type { … } from 'morya-ui'`（以各组件 `types.ts` 为准）。\n\n<h3 id=\"PassThroughPart\">PassThroughPart</h3>\n\n单个 DOM 节点上要合并的属性 bag。`pt.<part>` 的值就是这个类型。\n\n```ts\ntype PassThroughPart = Record<string, unknown>\n```\n\n常用键：`class`、`style`、`data-*`、`onClick` / `onKeydown`（Vue 事件监听写法）、以及该节点合法的原生 HTML 属性。\n\n<h3 id=\"RootPassThrough\">RootPassThrough</h3>\n\n单根容器（Card、Dialog 遮罩、Tabs 等）：\n\n```ts\ninterface RootPassThrough {\n  root?: PassThroughPart\n}\n```\n\n<h3 id=\"ControlPassThrough\">ControlPassThrough</h3>\n\nCheckbox / Radio / Switch（可见根是 `<label>`，hidden input 单独一段）：\n\n```ts\ninterface ControlPassThrough {\n  root?: PassThroughPart   // 一般是 label\n  input?: PassThroughPart  // 原生 input\n}\n```\n\n<h3 id=\"FieldPassThrough\">FieldPassThrough</h3>\n\n表单字段（Input、Select、DatePicker 等）：\n\n```ts\ninterface FieldPassThrough {\n  root?: PassThroughPart    // 外层 .m-*-field\n  label?: PassThroughPart\n  control?: PassThroughPart // 触发器 / 组合控件（Select 等）\n  input?: PassThroughPart   // 原生 input / textarea\n}\n```\n\n具体组件支持哪些键，见该组件文档的 **类型** 或 **pt** 小节。\n\n<h3 id=\"InputPassThrough\">InputPassThrough</h3>\n\n[`Input`](/components/Input) 在 `FieldPassThrough` 基础上多了前后缀等：\n\n```ts\ntype InputPassThrough = FieldPassThrough & {\n  prefix?: PassThroughPart\n  suffix?: PassThroughPart\n  help?: PassThroughPart\n  count?: PassThroughPart\n}\n```\n\n<h3 id=\"SplitterPassThrough\">SplitterPassThrough</h3>\n\n[`Splitter`](/components/Splitter) 在 `RootPassThrough` 上增加分隔条与面板：\n\n```ts\ntype SplitterPassThrough = RootPassThrough & {\n  gutter?: PassThroughPart\n  panel1?: PassThroughPart\n  panel2?: PassThroughPart\n}\n```\n\n分隔条外观也可用 `resizeTriggerClass` / `resizeTriggerStyle`，内容用 `#resize-trigger`（别名 `#gutter`）。\n\n<h3 id=\"OrderListPassThrough\">OrderListPassThrough</h3>\n\n[`OrderList`](/components/order-list) 在 `RootPassThrough` 上增加按钮组与列表项：\n\n```ts\ntype OrderListPassThrough = RootPassThrough & {\n  controls?: PassThroughPart  // 左侧按钮组\n  list?: PassThroughPart      // 滚动列表\n  item?: PassThroughPart      // 单个列表项\n  handle?: PassThroughPart    // 拖拽手柄\n  label?: PassThroughPart     // 项文本容器\n}\n```\n\n<h3 id=\"MSizeInput\">MSizeInput</h3>\n\n控件尺寸，多数表单 / 按钮组件的 `size` prop：\n\n```ts\ntype MSizeInput = 'small' | 'medium' | 'large' | 'sm' | 'md' | 'lg'\n```\n\n`sm` / `md` / `lg` 为兼容别名；未传时通常继承 [ConfigProvider](/docs/config) 的 `size`。\n\n<h3 id=\"MInputVariant\">MInputVariant</h3>\n\n输入框视觉变体：\n\n```ts\ntype MInputVariant = 'outlined' | 'filled'\n```\n\n<h3 id=\"ButtonType\">ButtonType</h3>\n\n按钮类型糖（[`Button`](/components/Button)）：\n\n```ts\ntype ButtonType = 'default' | 'primary' | 'dashed' | 'link' | 'text'\n```\n\n<h3 id=\"ButtonColor\">ButtonColor</h3>\n\n按钮颜色轴（Button、ConfirmDialog `acceptColor`、Dialog `positiveColor` 等）：\n\n```ts\ntype ButtonColor =\n  | 'default'\n  | 'primary'\n  | 'danger'\n  | 'success'\n  | 'info'\n  | 'warning'\n  | 'help'\n  | 'contrast'\n  | 'link'\n```\n\n<h3 id=\"ButtonVariant\">ButtonVariant</h3>\n\n按钮变体轴：\n\n```ts\ntype ButtonVariant = 'solid' | 'outlined' | 'dashed' | 'filled' | 'text' | 'link'\n```\n\n<h3 id=\"MAppendTo\">MAppendTo</h3>\n\n浮层 Teleport 挂载目标（Dialog、Select 菜单、Toast 等）：\n\n```ts\ntype MAppendTo = string | HTMLElement | 'self'\n```\n\n- `'body'`（默认）：挂到 document.body  \n- `'self'`：不 Teleport，就地渲染  \n- 也常见 `appendTo: false`（运行时兼容，同 `'self'`）\n\n<h3 id=\"AsyncGuard\">AsyncGuard</h3>\n\n关闭 / 确认前的拦截函数。返回 `false`（含 Promise 解析为 `false`）则**不继续**：\n\n```ts\ntype AsyncGuard<T extends unknown[] = []> = (\n  ...args: T\n) => unknown | Promise<unknown>\n```\n\n用于 Dialog `beforeClose`、`onPositiveClick`，ConfirmDialog / ConfirmPopup 的 `beforeAccept` 等。\n\n<h3 id=\"SelectOption\">SelectOption</h3>\n\n[`Select`](/components/Select) 选项项：\n\n```ts\ninterface SelectOption {\n  label: string\n  value: string | number\n  disabled?: boolean\n}\n```\n\n<h3 id=\"SelectOptionGroup\">SelectOptionGroup</h3>\n\n[`Select`](/components/Select) 选项分组（混入 `options` 渲染分组标题行）：\n\n```ts\ninterface SelectOptionGroup {\n  label: string\n  items: SelectOption[]\n}\n```\n\n<h3 id=\"SelectModelValue\">SelectModelValue</h3>\n\n```ts\ntype SelectValue = string | number\ntype SelectModelValue = SelectValue | SelectValue[] | undefined\n```\n\n单选为标量；`multiple` 时为数组。\n\n<h3 id=\"IconName\">IconName</h3>\n\n[`MIcon`](/components/Icon) / [`Button`](/components/Button) 的 `icon` / `name` 使用的注册名，例如 `'search'`、`'chevron-down'`。完整列表见 Icon 文档注册表。\n\n<h3 id=\"MenuNodeBase\">MenuNodeBase</h3>\n\nMenu / Dropdown / ContextMenu 等导航项的公共字段：\n\n```ts\ninterface MenuNodeBase {\n  key?: string\n  label?: string\n  value?: string\n  icon?: string\n  disabled?: boolean\n  separator?: boolean\n  shortcut?: string\n  command?: () => void\n  items?: MenuNodeBase[]\n}\n```\n\n<h3 id=\"MToneType\">MToneType</h3>\n\n显示 / 反馈组件的语义色基集：\n\n```ts\ntype MToneType =\n  | 'secondary'\n  | 'success'\n  | 'info'\n  | 'warning'\n  | 'help'\n  | 'danger'\n  | 'contrast'\n```\n\n<h3 id=\"MTagType\">MTagType</h3>\n\nTag / Badge / Chip / Status：`MToneType` 加上品牌色 `primary`。\n\n```ts\ntype MTagType = MToneType | 'primary'\n```\n\n<h3 id=\"MToastType\">MToastType</h3>\n\nMessage / Toast / Timeline 的语义色：\n\n```ts\ntype MToastType =\n  | 'success'\n  | 'info'\n  | 'warning'\n  | 'danger'\n  | 'secondary'\n  | 'contrast'\n```\n\n---\n\n更细的组件专属类型（如 `TableServerOptions`、`MenuItem`）写在对应组件页 **类型** 小节；这里只列跨组件复用的名字。"
             }
           ]
         },
         "en-US": {
           "title": "API types",
           "description": "Shapes behind type names in component Props tables.",
-          "markdown": "---\ntitle: API types\norder: 8\ndescription: Shapes behind type names in component Props tables.\n---\n\n# API types\n\nLook up structures for names that appear in Props tables. The package re-exports the same names as TypeScript types (`import type { … } from 'morya-ui'`), per component `types.ts`.\n\n<h3 id=\"PassThroughPart\">PassThroughPart</h3>\n\nAttribute bag merged onto one DOM node—the value of `pt.<part>`.\n\n```ts\ntype PassThroughPart = Record<string, unknown>\n```\n\nCommon keys: `class`, `style`, `data-*`, `onClick` / `onKeydown`, and valid native attributes for that element.\n\n<h3 id=\"RootPassThrough\">RootPassThrough</h3>\n\nSingle-root containers (Card, Dialog backdrop, Tabs, …):\n\n```ts\ninterface RootPassThrough {\n  root?: PassThroughPart\n}\n```\n\n<h3 id=\"ControlPassThrough\">ControlPassThrough</h3>\n\nCheckbox / Radio / Switch (visible `<label>` root + hidden input):\n\n```ts\ninterface ControlPassThrough {\n  root?: PassThroughPart   // usually the label\n  input?: PassThroughPart  // native input\n}\n```\n\n<h3 id=\"FieldPassThrough\">FieldPassThrough</h3>\n\nForm fields (Input, Select, DatePicker, …):\n\n```ts\ninterface FieldPassThrough {\n  root?: PassThroughPart    // outer .m-*-field\n  label?: PassThroughPart\n  control?: PassThroughPart // trigger / composite control\n  input?: PassThroughPart   // native input / textarea\n}\n```\n\nWhich keys a component accepts is listed on that component’s **Types** or **pt** section.\n\n<h3 id=\"InputPassThrough\">InputPassThrough</h3>\n\n[`Input`](/components/Input) extends `FieldPassThrough` with affixes:\n\n```ts\ntype InputPassThrough = FieldPassThrough & {\n  prefix?: PassThroughPart\n  suffix?: PassThroughPart\n  help?: PassThroughPart\n  count?: PassThroughPart\n}\n```\n\n<h3 id=\"SplitterPassThrough\">SplitterPassThrough</h3>\n\n[`Splitter`](/components/Splitter) extends `RootPassThrough` with gutter and panes:\n\n```ts\ntype SplitterPassThrough = RootPassThrough & {\n  gutter?: PassThroughPart\n  panel1?: PassThroughPart\n  panel2?: PassThroughPart\n}\n```\n\nGutter look can also use `resizeTriggerClass` / `resizeTriggerStyle`; content goes in `#resize-trigger` (alias `#gutter`).\n\n<h3 id=\"MSizeInput\">MSizeInput</h3>\n\nControl size for many form / button props:\n\n```ts\ntype MSizeInput = 'small' | 'medium' | 'large' | 'sm' | 'md' | 'lg'\n```\n\n`sm` / `md` / `lg` are legacy aliases. Omitted `size` usually inherits [ConfigProvider](/docs/config).\n\n<h3 id=\"MInputVariant\">MInputVariant</h3>\n\n```ts\ntype MInputVariant = 'outlined' | 'filled'\n```\n\n<h3 id=\"ButtonType\">ButtonType</h3>\n\nButton type sugar ([`Button`](/components/Button)):\n\n```ts\ntype ButtonType = 'default' | 'primary' | 'dashed' | 'link' | 'text'\n```\n\n<h3 id=\"ButtonColor\">ButtonColor</h3>\n\nButton color axis (Button, ConfirmDialog `acceptColor`, Dialog `positiveColor`, …):\n\n```ts\ntype ButtonColor =\n  | 'default'\n  | 'primary'\n  | 'danger'\n  | 'success'\n  | 'info'\n  | 'warning'\n  | 'help'\n  | 'contrast'\n  | 'link'\n```\n\n<h3 id=\"ButtonVariant\">ButtonVariant</h3>\n\nButton variant axis:\n\n```ts\ntype ButtonVariant = 'solid' | 'outlined' | 'dashed' | 'filled' | 'text' | 'link'\n```\n\n<h3 id=\"MAppendTo\">MAppendTo</h3>\n\nOverlay Teleport target:\n\n```ts\ntype MAppendTo = string | HTMLElement | 'self'\n```\n\n- `'body'` (default)  \n- `'self'` — render in place (no Teleport)  \n- `false` is accepted at runtime (same idea as `'self'`)\n\n<h3 id=\"AsyncGuard\">AsyncGuard</h3>\n\nGuard before close / confirm. Return `false` (including from a Promise) to **abort**:\n\n```ts\ntype AsyncGuard<T extends unknown[] = []> = (\n  ...args: T\n) => unknown | Promise<unknown>\n```\n\nUsed by Dialog `beforeClose`, ConfirmDialog `beforeAccept`, and similar.\n\n<h3 id=\"SelectOption\">SelectOption</h3>\n\n[`Select`](/components/Select) option row:\n\n```ts\ninterface SelectOption {\n  label: string\n  value: string | number\n  disabled?: boolean\n}\n```\n\n<h3 id=\"SelectOptionGroup\">SelectOptionGroup</h3>\n\n[`Select`](/components/Select) option group (mix into `options` to render a group header row):\n\n```ts\ninterface SelectOptionGroup {\n  label: string\n  items: SelectOption[]\n}\n```\n\n<h3 id=\"SelectModelValue\">SelectModelValue</h3>\n\n```ts\ntype SelectValue = string | number\ntype SelectModelValue = SelectValue | SelectValue[] | undefined\n```\n\nScalar when single-select; array when `multiple`.\n\n<h3 id=\"IconName\">IconName</h3>\n\nRegistered icon id for [`MIcon`](/components/Icon) / [`Button`](/components/Button), e.g. `'search'`. See the Icon registry.\n\n<h3 id=\"MenuNodeBase\">MenuNodeBase</h3>\n\nShared fields for Menu / Dropdown / ContextMenu items:\n\n```ts\ninterface MenuNodeBase {\n  key?: string\n  label?: string\n  value?: string\n  icon?: string\n  disabled?: boolean\n  separator?: boolean\n  shortcut?: string\n  command?: () => void\n  items?: MenuNodeBase[]\n}\n```\n\n<h3 id=\"MToneType\">MToneType</h3>\n\nBase semantic tones for display / feedback components:\n\n```ts\ntype MToneType =\n  | 'secondary'\n  | 'success'\n  | 'info'\n  | 'warning'\n  | 'help'\n  | 'danger'\n  | 'contrast'\n```\n\n<h3 id=\"MTagType\">MTagType</h3>\n\nTag / Badge / Chip / Status: `MToneType` plus brand `primary`.\n\n```ts\ntype MTagType = MToneType | 'primary'\n```\n\n<h3 id=\"MToastType\">MToastType</h3>\n\nMessage / Toast / Timeline tones:\n\n```ts\ntype MToastType =\n  | 'success'\n  | 'info'\n  | 'warning'\n  | 'danger'\n  | 'secondary'\n  | 'contrast'\n```\n\n---\n\nComponent-only types (`TableServerOptions`, `MenuItem`, …) live under each component’s **Types** section; this page is for shared names only.\n",
+          "markdown": "---\ntitle: API types\norder: 8\ndescription: Shapes behind type names in component Props tables.\n---\n\n# API types\n\nLook up structures for names that appear in Props tables. The package re-exports the same names as TypeScript types (`import type { … } from 'morya-ui'`), per component `types.ts`.\n\n<h3 id=\"PassThroughPart\">PassThroughPart</h3>\n\nAttribute bag merged onto one DOM node—the value of `pt.<part>`.\n\n```ts\ntype PassThroughPart = Record<string, unknown>\n```\n\nCommon keys: `class`, `style`, `data-*`, `onClick` / `onKeydown`, and valid native attributes for that element.\n\n<h3 id=\"RootPassThrough\">RootPassThrough</h3>\n\nSingle-root containers (Card, Dialog backdrop, Tabs, …):\n\n```ts\ninterface RootPassThrough {\n  root?: PassThroughPart\n}\n```\n\n<h3 id=\"ControlPassThrough\">ControlPassThrough</h3>\n\nCheckbox / Radio / Switch (visible `<label>` root + hidden input):\n\n```ts\ninterface ControlPassThrough {\n  root?: PassThroughPart   // usually the label\n  input?: PassThroughPart  // native input\n}\n```\n\n<h3 id=\"FieldPassThrough\">FieldPassThrough</h3>\n\nForm fields (Input, Select, DatePicker, …):\n\n```ts\ninterface FieldPassThrough {\n  root?: PassThroughPart    // outer .m-*-field\n  label?: PassThroughPart\n  control?: PassThroughPart // trigger / composite control\n  input?: PassThroughPart   // native input / textarea\n}\n```\n\nWhich keys a component accepts is listed on that component’s **Types** or **pt** section.\n\n<h3 id=\"InputPassThrough\">InputPassThrough</h3>\n\n[`Input`](/components/Input) extends `FieldPassThrough` with affixes:\n\n```ts\ntype InputPassThrough = FieldPassThrough & {\n  prefix?: PassThroughPart\n  suffix?: PassThroughPart\n  help?: PassThroughPart\n  count?: PassThroughPart\n}\n```\n\n<h3 id=\"SplitterPassThrough\">SplitterPassThrough</h3>\n\n[`Splitter`](/components/Splitter) extends `RootPassThrough` with gutter and panes:\n\n```ts\ntype SplitterPassThrough = RootPassThrough & {\n  gutter?: PassThroughPart\n  panel1?: PassThroughPart\n  panel2?: PassThroughPart\n}\n```\n\nGutter look can also use `resizeTriggerClass` / `resizeTriggerStyle`; content goes in `#resize-trigger` (alias `#gutter`).\n\n<h3 id=\"OrderListPassThrough\">OrderListPassThrough</h3>\n\n[`OrderList`](/components/order-list) extends `RootPassThrough` with the button group and list items:\n\n```ts\ntype OrderListPassThrough = RootPassThrough & {\n  controls?: PassThroughPart  // left button group\n  list?: PassThroughPart      // scrollable list\n  item?: PassThroughPart      // single item\n  handle?: PassThroughPart    // drag handle\n  label?: PassThroughPart     // item label container\n}\n```\n\n<h3 id=\"MSizeInput\">MSizeInput</h3>\n\nControl size for many form / button props:\n\n```ts\ntype MSizeInput = 'small' | 'medium' | 'large' | 'sm' | 'md' | 'lg'\n```\n\n`sm` / `md` / `lg` are legacy aliases. Omitted `size` usually inherits [ConfigProvider](/docs/config).\n\n<h3 id=\"MInputVariant\">MInputVariant</h3>\n\n```ts\ntype MInputVariant = 'outlined' | 'filled'\n```\n\n<h3 id=\"ButtonType\">ButtonType</h3>\n\nButton type sugar ([`Button`](/components/Button)):\n\n```ts\ntype ButtonType = 'default' | 'primary' | 'dashed' | 'link' | 'text'\n```\n\n<h3 id=\"ButtonColor\">ButtonColor</h3>\n\nButton color axis (Button, ConfirmDialog `acceptColor`, Dialog `positiveColor`, …):\n\n```ts\ntype ButtonColor =\n  | 'default'\n  | 'primary'\n  | 'danger'\n  | 'success'\n  | 'info'\n  | 'warning'\n  | 'help'\n  | 'contrast'\n  | 'link'\n```\n\n<h3 id=\"ButtonVariant\">ButtonVariant</h3>\n\nButton variant axis:\n\n```ts\ntype ButtonVariant = 'solid' | 'outlined' | 'dashed' | 'filled' | 'text' | 'link'\n```\n\n<h3 id=\"MAppendTo\">MAppendTo</h3>\n\nOverlay Teleport target:\n\n```ts\ntype MAppendTo = string | HTMLElement | 'self'\n```\n\n- `'body'` (default)  \n- `'self'` — render in place (no Teleport)  \n- `false` is accepted at runtime (same idea as `'self'`)\n\n<h3 id=\"AsyncGuard\">AsyncGuard</h3>\n\nGuard before close / confirm. Return `false` (including from a Promise) to **abort**:\n\n```ts\ntype AsyncGuard<T extends unknown[] = []> = (\n  ...args: T\n) => unknown | Promise<unknown>\n```\n\nUsed by Dialog `beforeClose`, ConfirmDialog `beforeAccept`, and similar.\n\n<h3 id=\"SelectOption\">SelectOption</h3>\n\n[`Select`](/components/Select) option row:\n\n```ts\ninterface SelectOption {\n  label: string\n  value: string | number\n  disabled?: boolean\n}\n```\n\n<h3 id=\"SelectOptionGroup\">SelectOptionGroup</h3>\n\n[`Select`](/components/Select) option group (mix into `options` to render a group header row):\n\n```ts\ninterface SelectOptionGroup {\n  label: string\n  items: SelectOption[]\n}\n```\n\n<h3 id=\"SelectModelValue\">SelectModelValue</h3>\n\n```ts\ntype SelectValue = string | number\ntype SelectModelValue = SelectValue | SelectValue[] | undefined\n```\n\nScalar when single-select; array when `multiple`.\n\n<h3 id=\"IconName\">IconName</h3>\n\nRegistered icon id for [`MIcon`](/components/Icon) / [`Button`](/components/Button), e.g. `'search'`. See the Icon registry.\n\n<h3 id=\"MenuNodeBase\">MenuNodeBase</h3>\n\nShared fields for Menu / Dropdown / ContextMenu items:\n\n```ts\ninterface MenuNodeBase {\n  key?: string\n  label?: string\n  value?: string\n  icon?: string\n  disabled?: boolean\n  separator?: boolean\n  shortcut?: string\n  command?: () => void\n  items?: MenuNodeBase[]\n}\n```\n\n<h3 id=\"MToneType\">MToneType</h3>\n\nBase semantic tones for display / feedback components:\n\n```ts\ntype MToneType =\n  | 'secondary'\n  | 'success'\n  | 'info'\n  | 'warning'\n  | 'help'\n  | 'danger'\n  | 'contrast'\n```\n\n<h3 id=\"MTagType\">MTagType</h3>\n\nTag / Badge / Chip / Status: `MToneType` plus brand `primary`.\n\n```ts\ntype MTagType = MToneType | 'primary'\n```\n\n<h3 id=\"MToastType\">MToastType</h3>\n\nMessage / Toast / Timeline tones:\n\n```ts\ntype MToastType =\n  | 'success'\n  | 'info'\n  | 'warning'\n  | 'danger'\n  | 'secondary'\n  | 'contrast'\n```\n\n---\n\nComponent-only types (`TableServerOptions`, `MenuItem`, …) live under each component’s **Types** section; this page is for shared names only.\n",
           "sections": [
             {
               "title": "",
               "id": "overview",
-              "body": "# API types\n\nLook up structures for names that appear in Props tables. The package re-exports the same names as TypeScript types (`import type { … } from 'morya-ui'`), per component `types.ts`.\n\n<h3 id=\"PassThroughPart\">PassThroughPart</h3>\n\nAttribute bag merged onto one DOM node—the value of `pt.<part>`.\n\n```ts\ntype PassThroughPart = Record<string, unknown>\n```\n\nCommon keys: `class`, `style`, `data-*`, `onClick` / `onKeydown`, and valid native attributes for that element.\n\n<h3 id=\"RootPassThrough\">RootPassThrough</h3>\n\nSingle-root containers (Card, Dialog backdrop, Tabs, …):\n\n```ts\ninterface RootPassThrough {\n  root?: PassThroughPart\n}\n```\n\n<h3 id=\"ControlPassThrough\">ControlPassThrough</h3>\n\nCheckbox / Radio / Switch (visible `<label>` root + hidden input):\n\n```ts\ninterface ControlPassThrough {\n  root?: PassThroughPart   // usually the label\n  input?: PassThroughPart  // native input\n}\n```\n\n<h3 id=\"FieldPassThrough\">FieldPassThrough</h3>\n\nForm fields (Input, Select, DatePicker, …):\n\n```ts\ninterface FieldPassThrough {\n  root?: PassThroughPart    // outer .m-*-field\n  label?: PassThroughPart\n  control?: PassThroughPart // trigger / composite control\n  input?: PassThroughPart   // native input / textarea\n}\n```\n\nWhich keys a component accepts is listed on that component’s **Types** or **pt** section.\n\n<h3 id=\"InputPassThrough\">InputPassThrough</h3>\n\n[`Input`](/components/Input) extends `FieldPassThrough` with affixes:\n\n```ts\ntype InputPassThrough = FieldPassThrough & {\n  prefix?: PassThroughPart\n  suffix?: PassThroughPart\n  help?: PassThroughPart\n  count?: PassThroughPart\n}\n```\n\n<h3 id=\"SplitterPassThrough\">SplitterPassThrough</h3>\n\n[`Splitter`](/components/Splitter) extends `RootPassThrough` with gutter and panes:\n\n```ts\ntype SplitterPassThrough = RootPassThrough & {\n  gutter?: PassThroughPart\n  panel1?: PassThroughPart\n  panel2?: PassThroughPart\n}\n```\n\nGutter look can also use `resizeTriggerClass` / `resizeTriggerStyle`; content goes in `#resize-trigger` (alias `#gutter`).\n\n<h3 id=\"MSizeInput\">MSizeInput</h3>\n\nControl size for many form / button props:\n\n```ts\ntype MSizeInput = 'small' | 'medium' | 'large' | 'sm' | 'md' | 'lg'\n```\n\n`sm` / `md` / `lg` are legacy aliases. Omitted `size` usually inherits [ConfigProvider](/docs/config).\n\n<h3 id=\"MInputVariant\">MInputVariant</h3>\n\n```ts\ntype MInputVariant = 'outlined' | 'filled'\n```\n\n<h3 id=\"ButtonType\">ButtonType</h3>\n\nButton type sugar ([`Button`](/components/Button)):\n\n```ts\ntype ButtonType = 'default' | 'primary' | 'dashed' | 'link' | 'text'\n```\n\n<h3 id=\"ButtonColor\">ButtonColor</h3>\n\nButton color axis (Button, ConfirmDialog `acceptColor`, Dialog `positiveColor`, …):\n\n```ts\ntype ButtonColor =\n  | 'default'\n  | 'primary'\n  | 'danger'\n  | 'success'\n  | 'info'\n  | 'warning'\n  | 'help'\n  | 'contrast'\n  | 'link'\n```\n\n<h3 id=\"ButtonVariant\">ButtonVariant</h3>\n\nButton variant axis:\n\n```ts\ntype ButtonVariant = 'solid' | 'outlined' | 'dashed' | 'filled' | 'text' | 'link'\n```\n\n<h3 id=\"MAppendTo\">MAppendTo</h3>\n\nOverlay Teleport target:\n\n```ts\ntype MAppendTo = string | HTMLElement | 'self'\n```\n\n- `'body'` (default)  \n- `'self'` — render in place (no Teleport)  \n- `false` is accepted at runtime (same idea as `'self'`)\n\n<h3 id=\"AsyncGuard\">AsyncGuard</h3>\n\nGuard before close / confirm. Return `false` (including from a Promise) to **abort**:\n\n```ts\ntype AsyncGuard<T extends unknown[] = []> = (\n  ...args: T\n) => unknown | Promise<unknown>\n```\n\nUsed by Dialog `beforeClose`, ConfirmDialog `beforeAccept`, and similar.\n\n<h3 id=\"SelectOption\">SelectOption</h3>\n\n[`Select`](/components/Select) option row:\n\n```ts\ninterface SelectOption {\n  label: string\n  value: string | number\n  disabled?: boolean\n}\n```\n\n<h3 id=\"SelectOptionGroup\">SelectOptionGroup</h3>\n\n[`Select`](/components/Select) option group (mix into `options` to render a group header row):\n\n```ts\ninterface SelectOptionGroup {\n  label: string\n  items: SelectOption[]\n}\n```\n\n<h3 id=\"SelectModelValue\">SelectModelValue</h3>\n\n```ts\ntype SelectValue = string | number\ntype SelectModelValue = SelectValue | SelectValue[] | undefined\n```\n\nScalar when single-select; array when `multiple`.\n\n<h3 id=\"IconName\">IconName</h3>\n\nRegistered icon id for [`MIcon`](/components/Icon) / [`Button`](/components/Button), e.g. `'search'`. See the Icon registry.\n\n<h3 id=\"MenuNodeBase\">MenuNodeBase</h3>\n\nShared fields for Menu / Dropdown / ContextMenu items:\n\n```ts\ninterface MenuNodeBase {\n  key?: string\n  label?: string\n  value?: string\n  icon?: string\n  disabled?: boolean\n  separator?: boolean\n  shortcut?: string\n  command?: () => void\n  items?: MenuNodeBase[]\n}\n```\n\n<h3 id=\"MToneType\">MToneType</h3>\n\nBase semantic tones for display / feedback components:\n\n```ts\ntype MToneType =\n  | 'secondary'\n  | 'success'\n  | 'info'\n  | 'warning'\n  | 'help'\n  | 'danger'\n  | 'contrast'\n```\n\n<h3 id=\"MTagType\">MTagType</h3>\n\nTag / Badge / Chip / Status: `MToneType` plus brand `primary`.\n\n```ts\ntype MTagType = MToneType | 'primary'\n```\n\n<h3 id=\"MToastType\">MToastType</h3>\n\nMessage / Toast / Timeline tones:\n\n```ts\ntype MToastType =\n  | 'success'\n  | 'info'\n  | 'warning'\n  | 'danger'\n  | 'secondary'\n  | 'contrast'\n```\n\n---\n\nComponent-only types (`TableServerOptions`, `MenuItem`, …) live under each component’s **Types** section; this page is for shared names only."
+              "body": "# API types\n\nLook up structures for names that appear in Props tables. The package re-exports the same names as TypeScript types (`import type { … } from 'morya-ui'`), per component `types.ts`.\n\n<h3 id=\"PassThroughPart\">PassThroughPart</h3>\n\nAttribute bag merged onto one DOM node—the value of `pt.<part>`.\n\n```ts\ntype PassThroughPart = Record<string, unknown>\n```\n\nCommon keys: `class`, `style`, `data-*`, `onClick` / `onKeydown`, and valid native attributes for that element.\n\n<h3 id=\"RootPassThrough\">RootPassThrough</h3>\n\nSingle-root containers (Card, Dialog backdrop, Tabs, …):\n\n```ts\ninterface RootPassThrough {\n  root?: PassThroughPart\n}\n```\n\n<h3 id=\"ControlPassThrough\">ControlPassThrough</h3>\n\nCheckbox / Radio / Switch (visible `<label>` root + hidden input):\n\n```ts\ninterface ControlPassThrough {\n  root?: PassThroughPart   // usually the label\n  input?: PassThroughPart  // native input\n}\n```\n\n<h3 id=\"FieldPassThrough\">FieldPassThrough</h3>\n\nForm fields (Input, Select, DatePicker, …):\n\n```ts\ninterface FieldPassThrough {\n  root?: PassThroughPart    // outer .m-*-field\n  label?: PassThroughPart\n  control?: PassThroughPart // trigger / composite control\n  input?: PassThroughPart   // native input / textarea\n}\n```\n\nWhich keys a component accepts is listed on that component’s **Types** or **pt** section.\n\n<h3 id=\"InputPassThrough\">InputPassThrough</h3>\n\n[`Input`](/components/Input) extends `FieldPassThrough` with affixes:\n\n```ts\ntype InputPassThrough = FieldPassThrough & {\n  prefix?: PassThroughPart\n  suffix?: PassThroughPart\n  help?: PassThroughPart\n  count?: PassThroughPart\n}\n```\n\n<h3 id=\"SplitterPassThrough\">SplitterPassThrough</h3>\n\n[`Splitter`](/components/Splitter) extends `RootPassThrough` with gutter and panes:\n\n```ts\ntype SplitterPassThrough = RootPassThrough & {\n  gutter?: PassThroughPart\n  panel1?: PassThroughPart\n  panel2?: PassThroughPart\n}\n```\n\nGutter look can also use `resizeTriggerClass` / `resizeTriggerStyle`; content goes in `#resize-trigger` (alias `#gutter`).\n\n<h3 id=\"OrderListPassThrough\">OrderListPassThrough</h3>\n\n[`OrderList`](/components/order-list) extends `RootPassThrough` with the button group and list items:\n\n```ts\ntype OrderListPassThrough = RootPassThrough & {\n  controls?: PassThroughPart  // left button group\n  list?: PassThroughPart      // scrollable list\n  item?: PassThroughPart      // single item\n  handle?: PassThroughPart    // drag handle\n  label?: PassThroughPart     // item label container\n}\n```\n\n<h3 id=\"MSizeInput\">MSizeInput</h3>\n\nControl size for many form / button props:\n\n```ts\ntype MSizeInput = 'small' | 'medium' | 'large' | 'sm' | 'md' | 'lg'\n```\n\n`sm` / `md` / `lg` are legacy aliases. Omitted `size` usually inherits [ConfigProvider](/docs/config).\n\n<h3 id=\"MInputVariant\">MInputVariant</h3>\n\n```ts\ntype MInputVariant = 'outlined' | 'filled'\n```\n\n<h3 id=\"ButtonType\">ButtonType</h3>\n\nButton type sugar ([`Button`](/components/Button)):\n\n```ts\ntype ButtonType = 'default' | 'primary' | 'dashed' | 'link' | 'text'\n```\n\n<h3 id=\"ButtonColor\">ButtonColor</h3>\n\nButton color axis (Button, ConfirmDialog `acceptColor`, Dialog `positiveColor`, …):\n\n```ts\ntype ButtonColor =\n  | 'default'\n  | 'primary'\n  | 'danger'\n  | 'success'\n  | 'info'\n  | 'warning'\n  | 'help'\n  | 'contrast'\n  | 'link'\n```\n\n<h3 id=\"ButtonVariant\">ButtonVariant</h3>\n\nButton variant axis:\n\n```ts\ntype ButtonVariant = 'solid' | 'outlined' | 'dashed' | 'filled' | 'text' | 'link'\n```\n\n<h3 id=\"MAppendTo\">MAppendTo</h3>\n\nOverlay Teleport target:\n\n```ts\ntype MAppendTo = string | HTMLElement | 'self'\n```\n\n- `'body'` (default)  \n- `'self'` — render in place (no Teleport)  \n- `false` is accepted at runtime (same idea as `'self'`)\n\n<h3 id=\"AsyncGuard\">AsyncGuard</h3>\n\nGuard before close / confirm. Return `false` (including from a Promise) to **abort**:\n\n```ts\ntype AsyncGuard<T extends unknown[] = []> = (\n  ...args: T\n) => unknown | Promise<unknown>\n```\n\nUsed by Dialog `beforeClose`, ConfirmDialog `beforeAccept`, and similar.\n\n<h3 id=\"SelectOption\">SelectOption</h3>\n\n[`Select`](/components/Select) option row:\n\n```ts\ninterface SelectOption {\n  label: string\n  value: string | number\n  disabled?: boolean\n}\n```\n\n<h3 id=\"SelectOptionGroup\">SelectOptionGroup</h3>\n\n[`Select`](/components/Select) option group (mix into `options` to render a group header row):\n\n```ts\ninterface SelectOptionGroup {\n  label: string\n  items: SelectOption[]\n}\n```\n\n<h3 id=\"SelectModelValue\">SelectModelValue</h3>\n\n```ts\ntype SelectValue = string | number\ntype SelectModelValue = SelectValue | SelectValue[] | undefined\n```\n\nScalar when single-select; array when `multiple`.\n\n<h3 id=\"IconName\">IconName</h3>\n\nRegistered icon id for [`MIcon`](/components/Icon) / [`Button`](/components/Button), e.g. `'search'`. See the Icon registry.\n\n<h3 id=\"MenuNodeBase\">MenuNodeBase</h3>\n\nShared fields for Menu / Dropdown / ContextMenu items:\n\n```ts\ninterface MenuNodeBase {\n  key?: string\n  label?: string\n  value?: string\n  icon?: string\n  disabled?: boolean\n  separator?: boolean\n  shortcut?: string\n  command?: () => void\n  items?: MenuNodeBase[]\n}\n```\n\n<h3 id=\"MToneType\">MToneType</h3>\n\nBase semantic tones for display / feedback components:\n\n```ts\ntype MToneType =\n  | 'secondary'\n  | 'success'\n  | 'info'\n  | 'warning'\n  | 'help'\n  | 'danger'\n  | 'contrast'\n```\n\n<h3 id=\"MTagType\">MTagType</h3>\n\nTag / Badge / Chip / Status: `MToneType` plus brand `primary`.\n\n```ts\ntype MTagType = MToneType | 'primary'\n```\n\n<h3 id=\"MToastType\">MToastType</h3>\n\nMessage / Toast / Timeline tones:\n\n```ts\ntype MToastType =\n  | 'success'\n  | 'info'\n  | 'warning'\n  | 'danger'\n  | 'secondary'\n  | 'contrast'\n```\n\n---\n\nComponent-only types (`TableServerOptions`, `MenuItem`, …) live under each component’s **Types** section; this page is for shared names only."
             }
           ]
         }
@@ -33125,7 +34080,7 @@
         "zh-CN": {
           "title": "SSR 与服务端框架",
           "description": "在 Nuxt、Astro、Vite SSR 等环境中使用 Morya UI。",
-          "markdown": "---\ntitle: SSR 与服务端框架\norder: 10\ndescription: 在 Nuxt、Astro、Vite SSR 等环境中使用 Morya UI。\n---\n\n# SSR 与服务端框架\n\nMorya UI 面向 **Vue 3** 的 SSR 场景做了兼容（推荐 3.5 及以上）：服务端不会访问 `document` / `window`，组件实例 id 在服务端与客户端保持一致，命令式 API（`toast` / `message` / `confirm`）在服务端自动跳过。\n\n以下框架均可接入；按场景选择 **全量 SSR** 或 **客户端 Islands**。\n\n## 通用约定\n\n| 项 | 建议 |\n| --- | --- |\n| 样式 | 在应用入口或框架配置中引入 `morya-ui/styles.css` |\n| 主题 | 优先用根级 **`MConfigProvider`** 设置 `theme` / `density`，避免在 SSR 阶段单独调用 `useTheme()` 写 `document` |\n| 命令式反馈 | `toast()`、`message()`、`confirm()` 仅在浏览器执行；SSR 期间调用不会报错，但不会渲染 |\n| 按需导入 | 配合 `morya-ui/resolver` 与 `unplugin-vue-components` 减小体积 |\n| 浮层 | Dialog / Select / Tooltip 等使用 Vue `Teleport`；SSR 可输出占位，交互在客户端水合后生效 |\n\n## Nuxt 3\n\n推荐使用官方模块 **`@morya-ui/nuxt`**（同仓库 `packages/nuxt`）。\n\n### 安装\n\n```bash\npnpm add morya-ui @morya-ui/nuxt\npnpm add -D unplugin-vue-components\n```\n\n### 配置\n\n```ts\nimport { MoryaUIResolver } from 'morya-ui/resolver'\n// nuxt.config.ts\nimport Components from 'unplugin-vue-components/vite'\n\nexport default defineNuxtConfig({\n  modules: ['@morya-ui/nuxt'],\n  vite: {\n    plugins: [\n      Components({\n        resolvers: [MoryaUIResolver()],\n      }),\n    ],\n  },\n})\n```\n\n模块默认会：\n\n- 引入 `morya-ui/styles.css`\n- 将 `morya-ui` 加入 `build.transpile`\n- 在客户端注册 overlay 上下文（供 `toast` / `message` 使用）\n\n### 根布局\n\n```vue\n<!-- app.vue -->\n<script setup lang=\"ts\">\nconst theme = ref<'light' | 'dark'>('light')\n</script>\n\n<template>\n  <MConfigProvider :theme=\"theme\" density=\"comfortable\">\n    <NuxtPage />\n  </MConfigProvider>\n</template>\n```\n\n按需导入时无需 `app.use(MoryaUI)`；若需全量注册，可在 `plugins/morya-ui.client.ts` 中 `nuxtApp.vueApp.use(MoryaUI)`。\n\n### 仅客户端组件\n\n极少数依赖浏览器专有 API 的场景（如自定义 `appendTo` 到尚未存在的节点），可用 Nuxt 的 `<ClientOnly>` 包裹。\n\n## Astro + Vue\n\n适合 **静态页 + Vue 岛**（管理后台、控制台嵌入营销站）。\n\n### 安装\n\n```bash\npnpm add morya-ui\nnpx astro add vue\n```\n\n### 在 Vue 岛中使用\n\n```astro\n---\n// src/pages/admin.astro\nimport AdminShell from '../components/AdminShell.vue'\n---\n<AdminShell client:load />\n```\n\n```vue\n<!-- src/components/AdminShell.vue -->\n<script setup lang=\"ts\">\nimport { MButton, MConfigProvider } from 'morya-ui'\nimport 'morya-ui/styles.css'\n</script>\n\n<template>\n  <MConfigProvider theme=\"light\">\n    <MButton label=\"Hello\" />\n  </MConfigProvider>\n</template>\n```\n\n- 交互型后台推荐 `client:load` 或 `client:only`\n- 纯展示块可用 `client:visible` 延迟水合\n- Astro 本身不做 Vue SSR 时，无需处理 hydration id 问题\n\n## Vite SSR（含自定义服务端）\n\n```ts\nimport { MConfigProvider } from 'morya-ui/config-provider'\n// main.server.ts / entry-server.ts\nimport { createSSRApp } from 'vue'\nimport App from './App.vue'\nimport 'morya-ui/styles.css'\n\nexport function createApp() {\n  const app = createSSRApp(App)\n  return { app }\n}\n```\n\n客户端入口可注册 overlay 插件：\n\n```ts\n// entry-client.ts\nimport { createMoryaUI } from 'morya-ui'\n\ncreateApp(/* ... */)\n  .use(createMoryaUI({ components: false }))\n  .mount('#app')\n```\n\n构建时确保 `morya-ui` 进入 `ssr.noExternal`（或 `ssr: { noExternal: ['morya-ui'] }`），以便正确处理 `.vue` 与 CSS 副作用。\n\n## 其他 Vue SSR 方案\n\n| 方案 | 说明 |\n| --- | --- |\n| **Quasar (SSR mode)** | 在 `quasar.config` 的 `build.transpileDependencies` 中加入 `morya-ui`，入口引入样式 |\n| **vite-plugin-ssr / vike** | 与 Vite SSR 相同：服务端渲染 + 客户端 `createMoryaUI({ components: false })` |\n| **Inertia + Vue SSR** | 根组件包 `MConfigProvider`；命令式 API 仅在 `onMounted` 后调用 |\n\n## 已知限制\n\n- **不支持 Vue 2**；SSR 仅适用于 Vue 3。\n- **IE** 不在支持范围内（与 Vue 3 一致）。\n- 主题 `localStorage` 持久化仅在浏览器生效；SSR 首屏使用 `MConfigProvider` 或 cookie 同步主题可避免闪动。\n- 全量 E2E SSR 回归仍在完善；若遇到 hydration 警告，请提供最小复现并 [提 Issue](https://github.com/morya-space/morya-ui/issues)。\n\n## 下一步\n\n- [快速上手](/docs/quick-start)：安装与导入方式\n- [全局配置](/docs/config)：`MConfigProvider`\n- [主题](/docs/theme)：亮暗色与 token\n",
+          "markdown": "---\ntitle: SSR 与服务端框架\norder: 10\ndescription: 在 Nuxt、Astro、Vite SSR 等环境中使用 Morya UI。\n---\n\n# SSR 与服务端框架\n\nMorya UI 面向 **Vue 3** 的 SSR 场景做了兼容（推荐 3.5 及以上）：服务端不会访问 `document` / `window`，组件实例 id 在服务端与客户端保持一致，命令式 API（`toast` / `message` / `confirm`）在服务端自动跳过。\n\n以下框架均可接入；按场景选择 **全量 SSR** 或 **客户端 Islands**。\n\n## 通用约定\n\n| 项 | 建议 |\n| --- | --- |\n| 样式 | 在应用入口或框架配置中引入 `morya-ui/styles.css` |\n| 主题 | 优先用根级 **`MConfigProvider`** 设置 `theme` / `density`，避免在 SSR 阶段单独调用 `useTheme()` 写 `document` |\n| 命令式反馈 | `toast()`、`message()`、`confirm()` 仅在浏览器执行；SSR 期间调用不会报错，但不会渲染 |\n| 按需导入 | 配合 `morya-ui/resolver` 与 `unplugin-vue-components` 减小体积 |\n| 浮层 | Dialog / Select / Tooltip 等使用 Vue `Teleport`；SSR 可输出占位，交互在客户端水合后生效 |\n\n## Nuxt 3\n\n推荐使用官方模块 **`@morya-ui/nuxt`**（同仓库 `packages/nuxt`）。\n\n### 安装\n\n```bash\npnpm add morya-ui @morya-ui/nuxt\npnpm add -D unplugin-vue-components\n```\n\n### 配置\n\n```ts\nimport { MoryaUIResolver } from 'morya-ui/resolver'\n// nuxt.config.ts\nimport Components from 'unplugin-vue-components/vite'\n\nexport default defineNuxtConfig({\n  modules: ['@morya-ui/nuxt'],\n  vite: {\n    plugins: [\n      Components({\n        resolvers: [MoryaUIResolver()],\n      }),\n    ],\n  },\n})\n```\n\n模块默认会：\n\n- 引入 `morya-ui/styles.css`\n- 将 `morya-ui` 加入 `build.transpile`\n- 在客户端注册 overlay 上下文（供 `toast` / `message` 使用）\n\n### 根布局\n\n```vue\n<!-- app.vue -->\n<script setup lang=\"ts\">\nconst theme = ref<'light' | 'dark'>('light')\n</script>\n\n<template>\n  <MConfigProvider :theme=\"theme\" density=\"comfortable\">\n    <NuxtPage />\n  </MConfigProvider>\n</template>\n```\n\n按需导入时无需 `app.use(MoryaUI)`；若需全量注册，可在 `plugins/morya-ui.client.ts` 中 `nuxtApp.vueApp.use(MoryaUI)`。\n\n### 仅客户端组件\n\n极少数依赖浏览器专有 API 的场景（如自定义 `appendTo` 到尚未存在的节点），可用 Nuxt 的 `<ClientOnly>` 包裹。\n\n## Astro + Vue\n\n适合 **静态页 + Vue 岛**（管理后台、控制台嵌入营销站）。\n\n### 安装\n\n```bash\npnpm add morya-ui\nnpx astro add vue\n```\n\n### 在 Vue 岛中使用\n\n```astro\n---\n// src/pages/admin.astro\nimport AdminShell from '../components/AdminShell.vue'\n---\n<AdminShell client:load />\n```\n\n```vue\n<!-- src/components/AdminShell.vue -->\n<script setup lang=\"ts\">\nimport { MButton, MConfigProvider } from 'morya-ui'\nimport 'morya-ui/styles.css'\n</script>\n\n<template>\n  <MConfigProvider theme=\"light\">\n    <MButton label=\"Hello\" />\n  </MConfigProvider>\n</template>\n```\n\n- 交互型后台推荐 `client:load` 或 `client:only`\n- 纯展示块可用 `client:visible` 延迟水合\n- Astro 本身不做 Vue SSR 时，无需处理 hydration id 问题\n\n## Vite SSR（含自定义服务端）\n\n```ts\nimport { MConfigProvider } from 'morya-ui/config-provider'\n// main.server.ts / entry-server.ts\nimport { createSSRApp } from 'vue'\nimport App from './App.vue'\nimport 'morya-ui/styles.css'\n\nexport function createApp() {\n  const app = createSSRApp(App)\n  return { app }\n}\n```\n\n客户端入口可注册 overlay 插件：\n\n```ts\n// entry-client.ts\nimport { createMoryaUI } from 'morya-ui'\n\ncreateApp(/* ... */)\n  .use(createMoryaUI({ components: false }))\n  .mount('#app')\n```\n\n构建时确保 `morya-ui` 进入 `ssr.noExternal`（或 `ssr: { noExternal: ['morya-ui'] }`），以便正确处理 `.vue` 与 CSS 副作用。\n\n## 其他 Vue SSR 方案\n\n| 方案 | 说明 |\n| --- | --- |\n| **vite-plugin-ssr / vike** | 与 Vite SSR 相同：服务端渲染 + 客户端 `createMoryaUI({ components: false })` |\n| **Inertia + Vue SSR** | 根组件包 `MConfigProvider`；命令式 API 仅在 `onMounted` 后调用 |\n\n## 已知限制\n\n- **不支持 Vue 2**；SSR 仅适用于 Vue 3。\n- **IE** 不在支持范围内（与 Vue 3 一致）。\n- 主题 `localStorage` 持久化仅在浏览器生效；SSR 首屏使用 `MConfigProvider` 或 cookie 同步主题可避免闪动。\n- 全量 E2E SSR 回归仍在完善；若遇到 hydration 警告，请提供最小复现并 [提 Issue](https://github.com/morya-space/morya-ui/issues)。\n\n## 下一步\n\n- [快速上手](/docs/quick-start)：安装与导入方式\n- [全局配置](/docs/config)：`MConfigProvider`\n- [主题](/docs/theme)：亮暗色与 token\n",
           "sections": [
             {
               "title": "",
@@ -33155,7 +34110,7 @@
             {
               "title": "其他 Vue SSR 方案",
               "id": "其他-vue-ssr-方案",
-              "body": "| 方案 | 说明 |\n| --- | --- |\n| **Quasar (SSR mode)** | 在 `quasar.config` 的 `build.transpileDependencies` 中加入 `morya-ui`，入口引入样式 |\n| **vite-plugin-ssr / vike** | 与 Vite SSR 相同：服务端渲染 + 客户端 `createMoryaUI({ components: false })` |\n| **Inertia + Vue SSR** | 根组件包 `MConfigProvider`；命令式 API 仅在 `onMounted` 后调用 |"
+              "body": "| 方案 | 说明 |\n| --- | --- |\n| **vite-plugin-ssr / vike** | 与 Vite SSR 相同：服务端渲染 + 客户端 `createMoryaUI({ components: false })` |\n| **Inertia + Vue SSR** | 根组件包 `MConfigProvider`；命令式 API 仅在 `onMounted` 后调用 |"
             },
             {
               "title": "已知限制",