[doc]跟新到 v2.0.0

docs/mds/components/accordion/api.md

@@ -0,0 +1,37 @@
+## AccordionItem Props
+
+| 名称     | 类型                                                      | 默认值      | 必传 | 说明           |
+| -------- | --------------------------------------------------------- | ----------- | ---- | -------------- |
+| title    | `string`                                                  | -           | Y    | 标题。         |
+| content  | `string`                                                  | `''`        | N    | 内容文本。     |
+| disabled | `boolean`                                                 | `false`     | N    | 是否禁用。     |
+| icon     | [`Icon`](https://stdf.design/components?nav=icon&tab=1) | `undefined` | N    | 标题左侧图标。 |
+
+## Accordion Props
+
+| 名称               | 类型                                       | 默认值    | 必传 | 说明                                       |
+| ------------------ | ------------------------------------------ | --------- | ---- | ------------------------------------------ |
+| items              | `AccordionItemProps[]`                     | `[]`      | N    | 手风琴项数据。                             |
+| activeIndex        | `number \| number[]`                       | -         | N    | 激活项索引，单选为 number，多选为数组。    |
+| multiple           | `boolean`                                  | `false`   | N    | 是否允许多项同时展开。                     |
+| radius             | `'none'\|'sm'\|'md'\|'lg'\|'xl'\|'2xl'\|'3xl'\|'4xl'\|''` | `'md'`    | N    | 圆角风格。                                 |
+| border             | `'none'\|'solid'\|'dashed'\|'dotted'`      | `'solid'` | N    | 边框风格。                                 |
+| divider            | `boolean`                                  | `true`    | N    | 是否显示分割线。                           |
+| expandIcon         | `'arrow'\|'plus'\|null`                    | `'arrow'` | N    | 展开图标类型。                             |
+| iconPosition       | `'left'\|'right'`                          | `'right'` | N    | 展开图标位置。                             |
+| transitionDuration | `number`                                   | `300`     | N    | 动画时长（ms）。                           |
+| injClass           | `string`                                   | `''`      | N    | 注入 CSS 名称。                            |
+| titleClass         | `string`                                   | `''`      | N    | 标题区域注入 CSS。                         |
+| contentClass       | `string`                                   | `''`      | N    | 内容区域注入 CSS。                         |
+
+## Accordion Events
+
+| 名称     | 类型                                            | 参数                        | 描述                     |
+| -------- | ----------------------------------------------- | --------------------------- | ------------------------ |
+| onchange | `(index: number \| number[] \| undefined) => void` | 当前激活索引（单选/多选） | 展开/折叠状态变化时触发。 |
+
+## Accordion Snippets
+
+| 名称     | 类型                                              | 参数                  | 说明             |
+| -------- | ------------------------------------------------- | --------------------- | ---------------- |
+| children | `Snippet<[item: AccordionItemProps, index: number]>` | 当前项数据和索引 | 自定义内容区域。 |

docs/mds/components/accordion/api_en.md

@@ -0,0 +1,37 @@
+## AccordionItem Props
+
+| Name     | Type                                                      | Default     | Required | Description       |
+| -------- | --------------------------------------------------------- | ----------- | -------- | ----------------- |
+| title    | `string`                                                  | -           | Y        | Title.            |
+| content  | `string`                                                  | `''`        | N        | Content text.     |
+| disabled | `boolean`                                                 | `false`     | N        | Whether disabled. |
+| icon     | [`Icon`](https://stdf.design/components?nav=icon&tab=1) | `undefined` | N        | Title left icon.  |
+
+## Accordion Props
+
+| Name               | Type                                       | Default   | Required | Description                                          |
+| ------------------ | ------------------------------------------ | --------- | -------- | ---------------------------------------------------- |
+| items              | `AccordionItemProps[]`                     | `[]`      | N        | Accordion items data.                                |
+| activeIndex        | `number \| number[]`                       | -         | N        | Active index, number for single, array for multiple. |
+| multiple           | `boolean`                                  | `false`   | N        | Whether to allow multiple items to expand.           |
+| radius             | `'none'\|'sm'\|'md'\|'lg'\|'xl'\|'2xl'\|'3xl'\|'4xl'\|''` | `'md'`    | N        | Border radius style.                                 |
+| border             | `'none'\|'solid'\|'dashed'\|'dotted'`      | `'solid'` | N        | Border style.                                        |
+| divider            | `boolean`                                  | `true`    | N        | Whether to show divider.                             |
+| expandIcon         | `'arrow'\|'plus'\|null`                    | `'arrow'` | N        | Expand icon type.                                    |
+| iconPosition       | `'left'\|'right'`                          | `'right'` | N        | Expand icon position.                                |
+| transitionDuration | `number`                                   | `300`     | N        | Transition duration (ms).                            |
+| injClass           | `string`                                   | `''`      | N        | Injected CSS class name.                             |
+| titleClass         | `string`                                   | `''`      | N        | Title area injected CSS.                             |
+| contentClass       | `string`                                   | `''`      | N        | Content area injected CSS.                           |
+
+## Accordion Events
+
+| Name     | Type                                            | Params                            | Description                              |
+| -------- | ----------------------------------------------- | --------------------------------- | ---------------------------------------- |
+| onchange | `(index: number \| number[] \| undefined) => void` | Current active index (single/multiple) | Triggered when expand/collapse changes. |
+
+## Accordion Snippets
+
+| Name     | Type                                              | Params                    | Description          |
+| -------- | ------------------------------------------------- | ------------------------- | -------------------- |
+| children | `Snippet<[item: AccordionItemProps, index: number]>` | Current item data and index | Custom content area. |

docs/mds/components/accordion/guide.md

@@ -0,0 +1,35 @@
+## 使用场景
+
+手风琴组件用于展示可折叠的内容面板，常见于 FAQ、设置页面、内容分组等场景。
+
+## 展开模式
+
+默认单选模式，同一时间只能展开一项。设置 `multiple` 为 `true` 可开启多选模式，允许多项同时展开。
+
+## 展开图标
+
+通过 `expandIcon` 属性控制展开图标类型：
+
+- `'arrow'`：箭头图标（默认），展开时旋转 90 度
+- `'plus'`：加号图标，展开时旋转 45 度变成叉号
+- `null`：不显示展开图标
+
+通过 `iconPosition` 属性控制展开图标位置，可选 `'left'` 或 `'right'`（默认）。
+
+## 分割线
+
+默认显示分割线，设置 `divider` 为 `false` 可隐藏分割线。
+
+## 禁用项
+
+在 `items` 数组中设置 `disabled` 为 `true` 可禁用某项，禁用项无法展开/折叠。
+
+## 自定义内容
+
+通过 `children` Snippet 可自定义内容区域的渲染，Snippet 接收当前项数据和索引作为参数。
+
+## injClass
+
+通过 `injClass` 参数可以向组件外层容器注入 CSS 名称，`titleClass` 和 `contentClass` 分别用于标题和内容区域。
+
+若注入的 class 没生效，请在注入的 class 名称前添加"!"，可参考 [Tailwind Important modifier](https://tailwindcss.com/docs/configuration#important-modifier)。

docs/mds/components/accordion/guide_en.md

@@ -0,0 +1,35 @@
+## Use Cases
+
+The Accordion component is used to display collapsible content panels, commonly seen in FAQ, settings pages, content grouping and other scenarios.
+
+## Expand Mode
+
+Default is single selection mode, only one item can be expanded at a time. Set `multiple` to `true` to enable multiple selection mode, allowing multiple items to expand simultaneously.
+
+## Expand Icon
+
+Control the expand icon type through the `expandIcon` property:
+
+- `'arrow'`: Arrow icon (default), rotates 90 degrees when expanded
+- `'plus'`: Plus icon, rotates 45 degrees to become an X when expanded
+- `null`: No expand icon
+
+Control the expand icon position through the `iconPosition` property, options are `'left'` or `'right'` (default).
+
+## Divider
+
+Dividers are shown by default. Set `divider` to `false` to hide dividers.
+
+## Disabled Item
+
+Set `disabled` to `true` in the `items` array to disable an item. Disabled items cannot be expanded/collapsed.
+
+## Custom Content
+
+Use the `children` Snippet to customize the content area rendering. The Snippet receives the current item data and index as parameters.
+
+## injClass
+
+The `injClass` parameter allows injecting CSS class names to the outer container. `titleClass` and `contentClass` are used for the title and content areas respectively.
+
+If the injected class doesn't take effect, please add "!" before the class name. Refer to [Tailwind Important modifier](https://tailwindcss.com/docs/configuration#important-modifier).

docs/mds/components/actionPopover/FAQ.md

@@ -0,0 +1 @@
+暂无。

docs/mds/components/actionPopover/FAQ_en.md

@@ -0,0 +1 @@
+None.

docs/mds/components/actionPopover/api.md

@@ -0,0 +1,54 @@
+## ActionPopover Props
+
+| 名称            | 类型                                                     | 默认值                            | 必传 | 说明                                                                 |
+| --------------- | -------------------------------------------------------- | --------------------------------- | ---- | -------------------------------------------------------------------- |
+| visible         | `boolean`                                                | `false`                           | N    | 是否显示。                                                           |
+| title           | `string`                                                 | `''`                              | N    | 标题。                                                               |
+| titleAlign      | `'left'\|'center'\|'right'`                             | `'center'`                        | N    | 标题对齐方式。                                                       |
+| actions         | `Action[]`                                               | `[]`                              | Y    | 菜单选项， Action Props 组成的数组。                                 |
+| showCancel      | `boolean`                                                | `false`                           | N    | 是否显示取消选项。                                                   |
+| cancelText      | `string`                                                 | 当前语言的 actionSheet.cancelText | N    | 取消选项文本。                                                       |
+| actionClosable  | `boolean`                                                | `true`                            | N    | 点击选项是否关闭。                                                   |
+| align           | `'left'\|'center'\|'right'`                             | `'center'`                        | N    | 对齐方式。                                                           |
+| inverse         | `boolean`                                                | `false`                           | N    | 是否启用反转色，亮暗模式对调。                                       |
+| layout          | `'v'\|'h'\|'grid'\|'ring'`                              | `'v'`                             | N    | 操作项布局方式， v 为纵向， h 为横向， grid 为宫格， ring 为环形。    |
+| gridColumns     | `2\|3\|4`                                                | `3`                               | N    | 宫格列数，支持 2、3、4，仅在 layout 为 grid 时生效。                  |
+| triggerRef      | `HTMLElement\|null`                                      | `null`                            | N    | 触发元素引用。                                                       |
+| inlineAlign     | `'left'\|'center'\|'right'`                             | `'center'`                        | N    | 水平对齐方式。                                                       |
+| inlineDirection | `'auto'\|'up'\|'down'`                                  | `'auto'`                          | N    | 弹出方向， auto 会根据触发元素在视口中的位置自动判断。               |
+| inlineOffset    | `number`                                                 | `8`                               | N    | 弹出面板与触发元素的间距。                                            |
+| inlineShadow    | `'none'\|'xs'\|'sm'\|'md'\|'lg'\|'xl'\|'2xl'`            | `'md'`                            | N    | 弹出面板的阴影大小。                                                  |
+| inlineRadius    | `'none'\|'sm'\|'md'\|'lg'\|'xl'\|'2xl'\|'3xl'\|''`       | `''`                              | N    | 弹出面板的圆角大小，空字符串表示使用默认圆角。                        |
+| ringActions     | `RingAction[]`                                           | `[]`                              | N    | 环形布局操作项，仅在 layout 为 ring 时生效。                          |
+| ringRadius      | `number`                                                 | `0`                               | N    | 环形半径，0 表示自动计算。                                            |
+| ringItemSize    | `number`                                                 | `44`                              | N    | 环形操作项尺寸（宽高）。                                              |
+| ringShape       | `'auto'\|'full'\|'half'\|'quarter'`                     | `'auto'`                          | N    | 环形形状， auto 根据操作项数量自动判断。                              |
+
+## ActionPopover Events
+
+| 名称          | 类型                                      | 参数                                          | 描述                                         |
+| ------------- | ----------------------------------------- | --------------------------------------------- | -------------------------------------------- |
+| onclose       | `() => void`                              | -                                             | 关闭时触发。                                 |
+| oncancel      | `() => void`                              | -                                             | 点击取消时触发。                             |
+| onclickAction | `(index: number, action: Action) => void` | index - 点击索引值<br />action - 点击选项数据 | 点击选项时触发，即使点击选项不关闭也会触发。 |
+
+## Action Props
+
+| 名称      | 类型                                                    | 默认值     | 必传 | 说明                         |
+| --------- | ------------------------------------------------------- | ---------- | ---- | ---------------------------- |
+| content   | `string`                                                | `''`       | Y    | 选项内容。                   |
+| style     | `'normal'\|'theme'\|'success'\|'warning'\|'error'\|'info'` | `'normal'` | N    | 选项样式，支持 normal、theme、success、warning、error、info， theme 适配亮暗色。 |
+| disabled  | `boolean`                                               | `false`    | N    | 是否禁用，可与 style 组合。  |
+| desc      | `string`                                                | `''`       | N    | 选项描述。                   |
+| icon      | [`Icon`](https://stdf.design/components?nav=icon&tab=1) | `null`     | N    | 选项图标，优先级高于图片。   |
+| showImg   | `boolean`                                               | `false`    | N    | 是否显示图片。               |
+| imgRadius | `'none'\|'sm'\|'full'\|'lg'`                            | `'full'`   | N    | 图片圆角。                   |
+| imgSrc    | `string`                                                | `''`       | N    | 图片地址。                   |
+
+## RingAction Props
+
+| 名称     | 类型                                                    | 默认值     | 必传 | 说明                         |
+| -------- | ------------------------------------------------------- | ---------- | ---- | ---------------------------- |
+| icon     | [`Icon`](https://stdf.design/components?nav=icon&tab=1) | -          | Y    | 操作项图标。                 |
+| style    | `'normal'\|'theme'\|'success'\|'warning'\|'error'\|'info'` | `'normal'` | N    | 操作项样式。                 |
+| disabled | `boolean`                                               | `false`    | N    | 是否禁用。                   |

docs/mds/components/actionPopover/api_en.md

@@ -0,0 +1,54 @@
+## ActionPopover Props
+
+| Name            | Type                                                    | Default                                 | Required | Description                                                                    |
+| --------------- | ------------------------------------------------------- | --------------------------------------- | -------- | ------------------------------------------------------------------------------ |
+| visible         | `boolean`                                               | `false`                                 | N        | Whether to show the action popover.                                            |
+| title           | `string`                                                | `''`                                    | N        | Title text.                                                                    |
+| titleAlign      | `'left'\|'center'\|'right'`                           | `'center'`                              | N        | Title alignment.                                                               |
+| actions         | `Action[]`                                              | `[]`                                    | Y        | Menu options array composed of Action Props.                                   |
+| showCancel      | `boolean`                                               | `false`                                 | N        | Whether to show cancel button.                                                 |
+| cancelText      | `string`                                                | Current language actionSheet.cancelText | N        | Cancel button text.                                                            |
+| actionClosable  | `boolean`                                               | `true`                                  | N        | Whether to close when clicking an option.                                      |
+| align           | `'left'\|'center'\|'right'`                           | `'center'`                              | N        | Content alignment.                                                             |
+| inverse         | `boolean`                                               | `false`                                 | N        | Whether to enable inverse colors.                                              |
+| layout          | `'v'\|'h'\|'grid'\|'ring'`                            | `'v'`                                   | N        | Action layout: v for vertical, h for horizontal, grid for grid, ring for ring. |
+| gridColumns     | `2\|3\|4`                                               | `3`                                     | N        | Grid columns, supports 2, 3, 4, only works when layout is grid.                |
+| triggerRef      | `HTMLElement\|null`                                    | `null`                                  | N        | Trigger element reference.                                                     |
+| inlineAlign     | `'left'\|'center'\|'right'`                           | `'center'`                              | N        | Horizontal alignment.                                                          |
+| inlineDirection | `'auto'\|'up'\|'down'`                                | `'auto'`                                | N        | Popup direction, auto detects based on trigger element position.               |
+| inlineOffset    | `number`                                                | `8`                                     | N        | Gap between popup panel and trigger element.                                   |
+| inlineShadow    | `'none'\|'xs'\|'sm'\|'md'\|'lg'\|'xl'\|'2xl'`       | `'md'`                                  | N        | Shadow size of popup panel.                                                    |
+| inlineRadius    | `'none'\|'sm'\|'md'\|'lg'\|'xl'\|'2xl'\|'3xl'\|''` | `''`                                    | N        | Border radius of popup panel, empty string for default radius.                 |
+| ringActions     | `RingAction[]`                                          | `[]`                                    | N        | Ring layout actions, only works when layout is ring.                           |
+| ringRadius      | `number`                                                | `0`                                     | N        | Ring radius, 0 for auto calculation.                                           |
+| ringItemSize    | `number`                                                | `44`                                    | N        | Ring action item size (width and height).                                      |
+| ringShape       | `'auto'\|'full'\|'half'\|'quarter'`                   | `'auto'`                                | N        | Ring shape, auto detects based on action count.                                |
+
+## ActionPopover Events
+
+| Name          | Type                                      | Parameters                                      | Description                                                           |
+| ------------- | ----------------------------------------- | ----------------------------------------------- | --------------------------------------------------------------------- |
+| onclose       | `() => void`                              | -                                               | Triggered when closing.                                               |
+| oncancel      | `() => void`                              | -                                               | Triggered when clicking cancel button.                                |
+| onclickAction | `(index: number, action: Action) => void` | index - Click index; action - Click option data | Triggered when clicking an option, even if the option does not close. |
+
+## Action Props
+
+| Name      | Type                                                    | Default    | Required | Description                               |
+| --------- | ------------------------------------------------------- | ---------- | -------- | ----------------------------------------- |
+| content   | `string`                                                | `''`       | Y        | Option content.                           |
+| style     | `'normal'\|'theme'\|'success'\|'warning'\|'error'\|'info'` | `'normal'` | N        | Option style, supports normal, theme, success, warning, error, info. theme adapts to light and dark. |
+| disabled  | `boolean`                                               | `false`    | N        | Whether to disable the option, can be used with style. |
+| desc      | `string`                                                | `''`       | N        | Option description.                       |
+| icon      | [`Icon`](https://stdf.design/components?nav=icon&tab=1) | `null`     | N        | Option icon, takes priority over image.   |
+| showImg   | `boolean`                                               | `false`    | N        | Whether to show image.                    |
+| imgRadius | `'none'\|'sm'\|'full'\|'lg'`                         | `'full'`   | N        | Image border radius.                      |
+| imgSrc    | `string`                                                | `''`       | N        | Image source URL.                         |
+
+## RingAction Props
+
+| Name     | Type                                                    | Default    | Required | Description                               |
+| -------- | ------------------------------------------------------- | ---------- | -------- | ----------------------------------------- |
+| icon     | [`Icon`](https://stdf.design/components?nav=icon&tab=1) | -          | Y        | Action item icon.                         |
+| style    | `'normal'\|'theme'\|'success'\|'warning'\|'error'\|'info'` | `'normal'` | N        | Action item style.                        |
+| disabled | `boolean`                                               | `false`    | N        | Whether to disable the action.            |

docs/mds/components/actionPopover/guide.md

@@ -0,0 +1,33 @@
+## 使用
+
+ActionPopover 操作气泡用于在触发元素附近弹出，提供与当前场景相关的操作动作，适合更紧凑的交互场景。
+
+## 说明
+
+ActionPopover 操作气泡通过 triggerRef 绑定触发元素，弹出位置会根据 inlineDirection 或视口位置自动调整。
+
+## 反转色
+
+ActionPopover 支持 inverse 反转色，用于让亮暗模式对调，默认不反转。
+
+## 布局
+
+通过 layout 控制操作项布局，支持 v（纵向）、 h（横向）、 grid（宫格）、 ring（环形）。宫格列数可通过 gridColumns 设置。
+
+## 环形布局
+
+当 layout 设置为 ring 时，操作项会以环形方式排布在触发元素周围。环形布局仅支持图标操作项，需要通过 ringActions 传入。
+
+环形形状通过 ringShape 控制，支持以下值：
+- auto：根据操作项数量自动判断，≤3 个为 1/4 圆，≤5 个为半圆，>5 个为全圆
+- quarter：1/4 圆
+- half：半圆
+- full：全圆
+
+环形布局会根据触发元素在视口中的位置自动判断展开方向。例如，触发元素在左上角时，环形会向右下方展开。
+
+可通过 ringRadius 自定义环形半径，ringItemSize 设置操作项尺寸。
+
+## actions
+
+ActionPopover 的 actions 属性是一个数组，数组中的每一项都是一个对象，对象属性参考 Action Props。

docs/mds/components/actionPopover/guide_en.md

@@ -0,0 +1,33 @@
+## Usage
+
+ActionPopover is an inline panel that appears near the trigger element and provides operation actions for the current context, suitable for compact interaction scenarios.
+
+## Description
+
+ActionPopover binds to the trigger element through triggerRef. The position is adjusted based on inlineDirection or the viewport.
+
+## Inverse colors
+
+ActionPopover supports inverse to swap light and dark styles, default is off.
+
+## Layout
+
+Use layout to control action arrangement: v for vertical, h for horizontal, grid for grid, ring for ring. Use gridColumns to set grid columns.
+
+## Ring Layout
+
+When layout is set to ring, action items are arranged in a circular pattern around the trigger element. Ring layout only supports icon actions, which should be passed via ringActions.
+
+Ring shape is controlled by ringShape, supporting the following values:
+- auto: Automatically determined based on action count, ≤3 items for quarter circle, ≤5 items for half circle, >5 items for full circle
+- quarter: Quarter circle
+- half: Half circle
+- full: Full circle
+
+Ring layout automatically determines the expansion direction based on the trigger element's position in the viewport. For example, when the trigger is in the top-left corner, the ring expands toward the bottom-right.
+
+Use ringRadius to customize the ring radius, and ringItemSize to set the action item size.
+
+## Actions
+
+The actions property of ActionPopover is an array, and each item in the array is an object. The properties of the object refer to Action Props.

docs/mds/components/actionPopover/version_en.md

@@ -0,0 +1,3 @@
+## 0.0.1
+
+- [!tag|A|0|] Add ActionPopover component.

docs/mds/components/actionSheet/api.md

@@ -1,16 +1,16 @@
 ## ActionSheet Props
 
-| 名称           | 类型                                                        | 默认值                            | 必传 | 说明                                |
-| -------------- | ----------------------------------------------------------- | --------------------------------- | ---- | ----------------------------------- |
-| visible        | `boolean`                                                   | `false`                           | N    | 是否显示。                          |
-| title          | `string`                                                    | `''`                              | N    | 标题。                              |
-| titleAlign     | `'left'\|'center'\|'right'`                                 | `'center'`                        | N    | 标题对齐方式。                      |
-| actions        | `Action[]`                                                  | `[]`                              | Y    | 菜单选项，Action Props 组成的数组。 |
-| popup          | [`Popup`](https://stdf.design/components?nav=popup&tab=1) | `{}`                              | N    | 弹出层参数。                        |
-| showCancel     | `boolean`                                                   | `false`                           | N    | 是否显示取消选项。                  |
-| cancelText     | `string`                                                    | 当前语言的 actionSheet.cancelText | N    | 取消选项文本。                      |
-| actionClosable | `boolean`                                                   | `true`                            | N    | 点击选项是否关闭。                  |
-| align          | `'left'\|'center'\|'right'`                                 | `'center'`                        | N    | 对齐方式。                          |
+| 名称            | 类型                                                      | 默认值                            | 必传 | 说明                                                                    |
+| --------------- | --------------------------------------------------------- | --------------------------------- | ---- | ----------------------------------------------------------------------- |
+| visible         | `boolean`                                                 | `false`                           | N    | 是否显示。                                                              |
+| title           | `string`                                                  | `''`                              | N    | 标题。                                                                  |
+| titleAlign      | `'left'\|'center'\|'right'`                               | `'center'`                        | N    | 标题对齐方式。                                                          |
+| actions         | `Action[]`                                                | `[]`                              | Y    | 菜单选项， Action Props 组成的数组。                                    |
+| popup           | [`Popup`](https://stdf.design/components?nav=popup&tab=1) | `{}`                              | N    | 弹出层参数。                                                            |
+| showCancel      | `boolean`                                                 | `false`                           | N    | 是否显示取消选项。                                                      |
+| cancelText      | `string`                                                  | 当前语言的 actionSheet.cancelText | N    | 取消选项文本。                                                          |
+| actionClosable  | `boolean`                                                 | `true`                            | N    | 点击选项是否关闭。                                                      |
+| align           | `'left'\|'center'\|'right'`                               | `'center'`                        | N    | 对齐方式。                                                              |
 
 ## ActionSheet Events
 
@@ -22,11 +22,13 @@
 
 ## Action Props
 
-| 名称      | 类型                                      | 默认值     | 必传 | 说明           |
-| --------- | ----------------------------------------- | ---------- | ---- | -------------- |
-| content   | `string`                                  | `''`       | Y    | 选项内容。     |
-| style     | `'normal'\|'theme'\|'danger'\|'disabled'` | `'normal'` | N    | 选项样式。     |
-| desc      | `string`                                  | `''`       | N    | 选项描述。     |
-| showImg   | `boolean`                                 | `false`    | N    | 是否显示图片。 |
-| imgRadius | `'none'\|'sm'\|'full'\|'lg'`              | `'full'`   | N    | 图片圆角。     |
-| imgSrc    | `string`                                  | `''`       | N    | 图片地址。     |
+| 名称      | 类型                                                    | 默认值     | 必传 | 说明                         |
+| --------- | ------------------------------------------------------- | ---------- | ---- | ---------------------------- |
+| content   | `string`                                                | `''`       | Y    | 选项内容。                   |
+| style     | `'normal'\|'theme'\|'success'\|'warning'\|'error'\|'info'` | `'normal'` | N    | 选项样式，支持 normal、theme、success、warning、error、info， theme 适配亮暗色。 |
+| disabled  | `boolean`                                               | `false`    | N    | 是否禁用，可与 style 组合。  |
+| desc      | `string`                                                | `''`       | N    | 选项描述。                   |
+| icon      | [`Icon`](https://stdf.design/components?nav=icon&tab=1) | `null`     | N    | 选项图标，优先级高于图片。   |
+| showImg   | `boolean`                                               | `false`    | N    | 是否显示图片。               |
+| imgRadius | `'none'\|'sm'\|'full'\|'lg'`                            | `'full'`   | N    | 图片圆角。                   |
+| imgSrc    | `string`                                                | `''`       | N    | 图片地址。                   |

docs/mds/components/actionSheet/api_en.md

@@ -1,16 +1,16 @@
 ## ActionSheet Props
 
-| Name           | Type                                                        | Default                                 | Required | Description                                  |
-| -------------- | ----------------------------------------------------------- | --------------------------------------- | -------- | -------------------------------------------- |
-| visible        | `boolean`                                                   | `false`                                 | N        | Whether to show the action sheet.            |
-| title          | `string`                                                    | `''`                                    | N        | Title text.                                  |
-| titleAlign     | `'left'\|'center'\|'right'`                                 | `'center'`                              | N        | Title alignment.                             |
-| actions        | `Action[]`                                                  | `[]`                                    | Y        | Menu options array composed of Action Props. |
-| popup          | [`Popup`](https://stdf.design/components?nav=popup&tab=1) | `{}`                                    | N        | Popup layer parameters.                      |
-| showCancel     | `boolean`                                                   | `false`                                 | N        | Whether to show cancel button.               |
-| cancelText     | `string`                                                    | Current language actionSheet.cancelText | N        | Cancel button text.                          |
-| actionClosable | `boolean`                                                   | `true`                                  | N        | Whether to close when clicking an option.    |
-| align          | `'left'\|'center'\|'right'`                                 | `'center'`                              | N        | Content alignment.                           |
+| Name            | Type                                                      | Default                                 | Required | Description                                                                    |
+| --------------- | --------------------------------------------------------- | --------------------------------------- | -------- | ------------------------------------------------------------------------------ |
+| visible         | `boolean`                                                 | `false`                                 | N        | Whether to show the action sheet.                                              |
+| title           | `string`                                                  | `''`                                    | N        | Title text.                                                                    |
+| titleAlign      | `'left'\|'center'\|'right'`                               | `'center'`                              | N        | Title alignment.                                                               |
+| actions         | `Action[]`                                                | `[]`                                    | Y        | Menu options array composed of Action Props.                                   |
+| popup           | [`Popup`](https://stdf.design/components?nav=popup&tab=1) | `{}`                                    | N        | Popup layer parameters.                                                        |
+| showCancel      | `boolean`                                                 | `false`                                 | N        | Whether to show cancel button.                                                 |
+| cancelText      | `string`                                                  | Current language actionSheet.cancelText | N        | Cancel button text.                                                            |
+| actionClosable  | `boolean`                                                 | `true`                                  | N        | Whether to close when clicking an option.                                      |
+| align           | `'left'\|'center'\|'right'`                               | `'center'`                              | N        | Content alignment.                                                             |
 
 ## ActionSheet Events
 
@@ -22,11 +22,13 @@
 
 ## Action Props
 
-| Name      | Type                                      | Default    | Required | Description            |
-| --------- | ----------------------------------------- | ---------- | -------- | ---------------------- |
-| content   | `string`                                  | `''`       | Y        | Option content.        |
-| style     | `'normal'\|'theme'\|'danger'\|'disabled'` | `'normal'` | N        | Option style.          |
-| desc      | `string`                                  | `''`       | N        | Option description.    |
-| showImg   | `boolean`                                 | `false`    | N        | Whether to show image. |
-| imgRadius | `'none'\|'sm'\|'full'\|'lg'`              | `'full'`   | N        | Image border radius.   |
-| imgSrc    | `string`                                  | `''`       | N        | Image source URL.      |
+| Name      | Type                                                    | Default    | Required | Description                               |
+| --------- | ------------------------------------------------------- | ---------- | -------- | ----------------------------------------- |
+| content   | `string`                                                | `''`       | Y        | Option content.                           |
+| style     | `'normal'\|'theme'\|'success'\|'warning'\|'error'\|'info'` | `'normal'` | N        | Option style, supports normal, theme, success, warning, error, info. theme adapts to light and dark. |
+| disabled  | `boolean`                                               | `false`    | N        | Whether to disable the option, can be used with style. |
+| desc      | `string`                                                | `''`       | N        | Option description.                       |
+| icon      | [`Icon`](https://stdf.design/components?nav=icon&tab=1) | `null`     | N        | Option icon, takes priority over image.   |
+| showImg   | `boolean`                                               | `false`    | N        | Whether to show image.                    |
+| imgRadius | `'none'\|'sm'\|'full'\|'lg'`                            | `'full'`   | N        | Image border radius.                      |
+| imgSrc    | `string`                                                | `''`       | N        | Image source URL.                         |

docs/mds/components/actionSheet/guide.md

@@ -1,10 +1,11 @@
 ## 使用
 
-ActionSheet 动作面板一般从页面底部弹出，提供与当前场景相关的操作动作。此操作一般不会携带数据，不用担心误触，默认不显示取消操作项，允许点击遮罩关闭。
+ActionSheet 操作面板一般从页面底部弹出，提供与当前场景相关的操作动作。此操作一般不会携带数据，不用担心误触，默认不显示取消操作项，允许点击遮罩关闭。
+如需在触发元素附近弹出，请使用 ActionPopover 操作气泡。
 
 ## 说明
 
-ActionSheet 动作面板是在 Popup 基础上封装的，通过预先定义一些 Popup 的 Props 实现，因此可以通过传入 Popup 的属性来实现不同的效果。比如示例中通过设置 popup 的 radius 改变圆角风格。
+ActionSheet 操作面板是在 Popup 基础上封装的，通过预先定义一些 Popup 的 Props 实现，因此可以通过传入 Popup 的属性来实现不同的效果。比如示例中通过设置 popup 的 radius 改变圆角风格。
 
 ## actions
 

docs/mds/components/actionSheet/guide_en.md

@@ -1,6 +1,7 @@
 ## Usage
 
 ActionSheet is a panel that pops up from the bottom of the page and provides operation actions related to the current scene. This operation generally does not carry data, so there is no need to worry about accidental touch. The cancel operation item is not displayed by default and clicking the mask can close it.
+For inline popups near the trigger, use ActionPopover.
 
 ## Description
 

docs/mds/components/actionSheet/version.md

@@ -0,0 +1,7 @@
+## 2.0.0
+
+- [!tag|A|0|] Action Props 新增 `disabled` 属性，支持禁用选项。
+- [!tag|A|0|] Action Props 新增 `icon` 属性，支持图标优先于图片展示。
+- [!tag|A|0|] `style` 新增 `success`、`warning`、`error`、`info`，`theme` 支持亮暗适配。
+- [!tag|O|0|] 移除 `style` 中的 `danger` 与 `disabled`，改为 `error` 与 `disabled` 组合。
+

docs/mds/components/alert/FAQ.md

@@ -0,0 +1 @@
+

docs/mds/components/alert/FAQ_en.md

@@ -0,0 +1 @@
+

docs/mds/components/alert/api.md

@@ -0,0 +1,36 @@
+## Alert Props
+
+| 名称             | 类型                                                             | 默认值       | 必传 | 说明                                       |
+| ---------------- | ---------------------------------------------------------------- | ------------ | ---- | ------------------------------------------ |
+| visible          | `boolean`                                                        | `false`      | N    | 是否显示，支持双向绑定。                   |
+| title            | `string`                                                         | `''`         | N    | 标题。                                     |
+| message          | `string`                                                         | `''`         | N    | 消息内容。                                 |
+| duration         | `number`                                                         | `3000`       | N    | 显示时长（ms），设为 0 不自动关闭。        |
+| position         | `'top'\|'bottom'`                                                | `'top'`      | N    | 显示位置。                                 |
+| py               | `'0'\|'10'\|'20'\|'40'\|'60'\|'80'`                               | `'20'`       | N    | 距离顶部/底部的距离。                      |
+| type             | `'success'\|'error'\|'warning'\|'info'\|null`                    | `null`       | N    | 提示类型。                                 |
+| showIcon         | `boolean`                                                        | `true`       | N    | 是否显示类型图标。                         |
+| icon             | [`Icon`](https://stdf.design/components?nav=icon&tab=1)          | `{}`         | N    | 自定义图标配置。                           |
+| closable         | `boolean`                                                        | `true`       | N    | 是否显示关闭按钮。                         |
+| inverse          | `boolean`                                                        | `true`       | N    | 是否反转色，开启后亮色模式使用深色背景。   |
+| card             | [`Card`](https://stdf.design/components?nav=card&tab=1)          | `{}`         | N    | Card 组件配置。                            |
+| transitionType   | `'scale'\|'fly'\|'fade'\|'slide'\|'blur'\|null`                  | `'fly'`      | N    | 过渡动画类型，对应 [svelte/transition](https://svelte.dev/docs/svelte/svelte-transition) 的动画函数。 |
+| transitionParams | [`Transition`](https://svelte.dev/docs/svelte/svelte-transition) | `{}`         | N    | 动画参数，对应 svelte/transition 各函数的参数，进入动画的 duration 默认 300。 |
+| outDuration      | `number`                                                         | `300`        | N    | 退出动画时间（ms）。                       |
+| easeType         | [`SvelteEasingProps`](https://svelte.dev/docs/svelte/svelte-easing) | `'cubicOut'` | N    | 进入动画缓动函数，对应 [svelte/easing](https://svelte.dev/docs/svelte/svelte-easing) 的缓动函数。 |
+| easeOutType      | [`SvelteEasingProps`](https://svelte.dev/docs/svelte/svelte-easing) | `'cubicOut'` | N    | 退出动画缓动函数，对应 svelte/easing 的缓动函数。 |
+| zIndex           | `number`                                                         | `1000`       | N    | z-index 层级。                             |
+| clickable        | `boolean`                                                        | `true`       | N    | 是否允许穿透点击下方内容。                 |
+| injClass         | `string`                                                         | `''`         | N    | 注入 CSS 名称。                            |
+
+## Alert Events
+
+| 名称    | 类型         | 参数 | 描述               |
+| ------- | ------------ | ---- | ------------------ |
+| onclose | `() => void` | -    | 关闭时触发。       |
+
+## Alert Snippets
+
+| 名称     | 类型      | 参数 | 说明             |
+| -------- | --------- | ---- | ---------------- |
+| children | `Snippet` | -    | 自定义内容区域。 |

docs/mds/components/alert/api_en.md

@@ -0,0 +1,36 @@
+## Alert Props
+
+| Name             | Type                                                             | Default      | Required | Description                                                          |
+| ---------------- | ---------------------------------------------------------------- | ------------ | -------- | -------------------------------------------------------------------- |
+| visible          | `boolean`                                                        | `false`      | N        | Whether to show, supports two-way binding.                           |
+| title            | `string`                                                         | `''`         | N        | Title.                                                               |
+| message          | `string`                                                         | `''`         | N        | Message content.                                                     |
+| duration         | `number`                                                         | `3000`       | N        | Display duration (ms), set to 0 to disable auto close.               |
+| position         | `'top'\|'bottom'`                                                | `'top'`      | N        | Display position.                                                    |
+| py               | `'0'\|'10'\|'20'\|'40'\|'60'\|'80'`                               | `'20'`       | N        | Distance from top/bottom.                                            |
+| type             | `'success'\|'error'\|'warning'\|'info'\|null`                    | `null`       | N        | Alert type.                                                          |
+| showIcon         | `boolean`                                                        | `true`       | N        | Whether to show type icon.                                           |
+| icon             | [`Icon`](https://stdf.design/components?nav=icon&tab=1)          | `{}`         | N        | Custom icon configuration.                                           |
+| closable         | `boolean`                                                        | `true`       | N        | Whether to show close button.                                        |
+| inverse          | `boolean`                                                        | `true`       | N        | Whether to use inverse colors, uses dark background in light mode.   |
+| card             | [`Card`](https://stdf.design/components?nav=card&tab=1)          | `{}`         | N        | Card component configuration.                                        |
+| transitionType   | `'scale'\|'fly'\|'fade'\|'slide'\|'blur'\|null`                  | `'fly'`      | N        | Transition animation type, corresponds to [svelte/transition](https://svelte.dev/docs/svelte/svelte-transition) functions. |
+| transitionParams | [`Transition`](https://svelte.dev/docs/svelte/svelte-transition) | `{}`         | N        | Animation parameters for svelte/transition functions, in duration defaults to 300. |
+| outDuration      | `number`                                                         | `300`        | N        | Out animation duration (ms).                                         |
+| easeType         | [`SvelteEasingProps`](https://svelte.dev/docs/svelte/svelte-easing) | `'cubicOut'` | N        | In animation easing function, corresponds to [svelte/easing](https://svelte.dev/docs/svelte/svelte-easing) functions. |
+| easeOutType      | [`SvelteEasingProps`](https://svelte.dev/docs/svelte/svelte-easing) | `'cubicOut'` | N        | Out animation easing function, corresponds to svelte/easing functions. |
+| zIndex           | `number`                                                         | `1000`       | N        | z-index level.                                                       |
+| clickable        | `boolean`                                                        | `true`       | N        | Whether to allow click-through to content below.                     |
+| injClass         | `string`                                                         | `''`         | N        | Inject CSS class name.                                               |
+
+## Alert Events
+
+| Name    | Type         | Params | Description           |
+| ------- | ------------ | ------ | --------------------- |
+| onclose | `() => void` | -      | Triggered when closed. |
+
+## Alert Snippets
+
+| Name     | Type      | Params | Description              |
+| -------- | --------- | ------ | ------------------------ |
+| children | `Snippet` | -      | Custom content area.     |

docs/mds/components/alert/guide.md

@@ -0,0 +1,92 @@
+## 使用场景
+
+Alert 组件用于展示卡片式的弹窗提示，适用于需要更丰富内容展示的通知场景，如操作反馈、系统通知等。
+
+## 设计理念与场景区分
+
+在 STDF 的反馈体系中，Toast、Alert、Modal、Dialog 都用于向用户传达信息，但侧重点不同。
+
+- **Toast**：轻量、非阻断，关注短时提示与状态反馈，适合操作后即时反馈。
+- **Alert**：卡片式通知，强调信息呈现与可读性，支持标题、图标、操作按钮，适合通知类提醒或较丰富的提示内容。
+- **Modal**：强提醒、弱交互，通常是单按钮确认或阅读确认，适合需要用户明确知悉但交互简单的场景。
+- **Dialog**：强提醒、强交互，通常需要用户做选择或确认，适合涉及决策的流程或风险操作。
+
+## 提示类型
+
+通过 `type` 属性设置不同的提示类型：
+
+- `'success'`：成功提示，绿色图标
+- `'error'`：错误提示，红色图标
+- `'warning'`：警告提示，橙色图标
+- `'info'`：信息提示，蓝色图标
+- `null`：无类型，不显示默认图标
+
+## 显示位置
+
+默认从顶部滑入，设置 `position` 为 `'bottom'` 可从底部滑入。通过 `py` 属性调整距离顶部/底部的距离。
+
+## 自动关闭
+
+默认 3 秒后自动关闭，通过 `duration` 属性调整显示时长。设置为 `0` 则不自动关闭，需手动关闭。
+
+## 过渡动画
+
+通过 `transitionType` 属性设置过渡动画，支持 [svelte/transition](https://svelte.dev/docs/svelte/svelte-transition) 的所有适用于普通 DOM 元素的动画函数：
+
+- `'fly'`：飞入动画（默认），从顶部/底部滑入
+- `'scale'`：缩放动画
+- `'fade'`：淡入动画
+- `'slide'`：展开动画
+- `'blur'`：模糊动画
+- `null`：无动画
+
+## 动画参数
+
+通过 `transitionParams` 属性设置动画参数，其中 `duration` 表示进入的动画时间（默认 300ms）。
+
+transitionParams 具体支持的参数请参考 [svelte/transition](https://svelte.dev/docs/svelte/svelte-transition)。
+
+例如，可以自定义 fly 动画的 Y 值：
+
+```svelte
+<Alert transitionType="fly" transitionParams={{ y: 200, delay: 100 }} />
+```
+
+考虑到用户体验，提示信息出现时有一个较短的动画（默认 300ms），能引起用户的注意力；而提示信息展示完后可以通过 `outDuration` 属性设置退出的动画时间（默认 300ms）。
+
+退出动画只允许设置动画时长，其他参数会沿用进入动画的参数，保证动画效果「从哪里来回哪里去」。
+
+## 缓动函数
+
+通过 `easeType` 属性设置进入动画的缓动函数，`easeOutType` 设置退出动画的缓动函数，支持 [svelte/easing](https://svelte.dev/docs/svelte/svelte-easing) 的所有缓动函数：
+
+- `'linear'`：线性
+- `'cubicOut'`：三次方缓出（默认）
+- `'bounceOut'`：弹跳缓出
+- `'elasticOut'`：弹性缓出
+- `'backOut'`：回弹缓出
+- 更多缓动函数请参考 svelte/easing 文档
+
+例如，使用弹性缓动效果：
+
+```svelte
+<Alert easeType="elasticOut" easeOutType="elasticOut" />
+```
+
+## 自定义卡片样式
+
+通过 `card` 属性传递 Card 组件的配置，可自定义阴影、圆角、边框等样式。
+
+## 自定义内容
+
+通过 `children` Snippet 可完全自定义提示内容，实现更复杂的交互效果。
+
+## 穿透点击
+
+默认允许点击穿透（`clickable` 为 `true`），即提示显示时可以点击下方内容。设置为 `false` 可阻止穿透。
+
+## injClass
+
+通过 `injClass` 参数可以向组件外层容器注入 CSS 名称。
+
+若注入的 class 没生效，请在注入的 class 名称前添加"!"，可参考 [Tailwind Important modifier](https://tailwindcss.com/docs/configuration#important-modifier)。

docs/mds/components/alert/guide_en.md

@@ -0,0 +1,92 @@
+## Use Cases
+
+Alert component displays card-style popup notifications, suitable for scenarios requiring richer content presentation, such as operation feedback and system notifications.
+
+## Design Philosophy and Use Case Differences
+
+In STDF, Toast, Alert, Modal, and Dialog all provide user feedback, but they emphasize different interaction levels.
+
+- **Toast**: Lightweight, non-blocking, focused on short status feedback for quick actions.
+- **Alert**: Card-style notification emphasizing content readability, suitable for richer notices with title, icon, or actions.
+- **Modal**: Strong awareness with minimal interaction, often a single confirm or acknowledgment.
+- **Dialog**: Strong awareness with decision-making, usually primary/secondary actions for confirmations or risky flows.
+
+## Alert Types
+
+Set different alert types via `type` property:
+
+- `'success'`: Success alert with green icon
+- `'error'`: Error alert with red icon
+- `'warning'`: Warning alert with orange icon
+- `'info'`: Info alert with blue icon
+- `null`: No type, no default icon displayed
+
+## Display Position
+
+By default slides in from the top. Set `position` to `'bottom'` to slide in from the bottom. Adjust distance from top/bottom via `py` property.
+
+## Auto Close
+
+Automatically closes after 3 seconds by default. Adjust display duration via `duration` property. Set to `0` to disable auto close and require manual closing.
+
+## Transition Animation
+
+Set transition animation via `transitionType` property, supports all [svelte/transition](https://svelte.dev/docs/svelte/svelte-transition) functions applicable to regular DOM elements:
+
+- `'fly'`: Fly-in animation (default), slides in from top/bottom
+- `'scale'`: Scale animation
+- `'fade'`: Fade-in animation
+- `'slide'`: Slide animation
+- `'blur'`: Blur animation
+- `null`: No animation
+
+## Animation Parameters
+
+Set animation parameters via `transitionParams` property, where `duration` represents the enter animation duration (default 300ms).
+
+For supported parameters in transitionParams, please refer to [svelte/transition](https://svelte.dev/docs/svelte/svelte-transition).
+
+For example, you can customize the Y value for fly animation:
+
+```svelte
+<Alert transitionType="fly" transitionParams={{ y: 200, delay: 100 }} />
+```
+
+For better user experience, the alert appears with a short animation (default 300ms) to catch user attention. You can set the exit animation duration via `outDuration` property (default 300ms).
+
+Exit animation only allows setting the duration. Other parameters will inherit from the enter animation to ensure the animation effect "goes back to where it came from".
+
+## Easing Functions
+
+Set the easing function for enter animation via `easeType` property, and `easeOutType` for exit animation. Supports all [svelte/easing](https://svelte.dev/docs/svelte/svelte-easing) easing functions:
+
+- `'linear'`: Linear
+- `'cubicOut'`: Cubic ease-out (default)
+- `'bounceOut'`: Bounce ease-out
+- `'elasticOut'`: Elastic ease-out
+- `'backOut'`: Back ease-out
+- For more easing functions, refer to svelte/easing documentation
+
+For example, using elastic easing effect:
+
+```svelte
+<Alert easeType="elasticOut" easeOutType="elasticOut" />
+```
+
+## Custom Card Style
+
+Pass Card component configuration via `card` property to customize shadow, radius, border, and other styles.
+
+## Custom Content
+
+Use `children` Snippet to fully customize alert content for more complex interactions.
+
+## Click-through
+
+Click-through is enabled by default (`clickable` is `true`), meaning content below can be clicked while the alert is displayed. Set to `false` to prevent click-through.
+
+## injClass
+
+Inject CSS class names to the component's outer container via `injClass` parameter.
+
+If the injected class doesn't take effect, add "!" before the class name. Refer to [Tailwind Important modifier](https://tailwindcss.com/docs/configuration#important-modifier).

docs/mds/components/alert/version_en.md

@@ -0,0 +1 @@
+

docs/mds/components/asyncPicker/api.md

@@ -16,7 +16,8 @@
 | prevText     | `string`                                                        | 当前语言的 picker.defaultPrev     | N    | 上一级文本。                 |
 | showSelected | `boolean`                                                       | `false`                           | N    | 是否显示已选项。             |
 | selectedText | `string`                                                        | 当前语言的 picker.defaultSelected | N    | 已选文本。                   |
-| popup        | [`Popup`](https://stdf.design/components?nav=popup&tab=1)     | `{}`                              | N    | 弹出层参数。                 |
+| height       | `number`                                                        | `30`                              | N    | 不使用弹出层时，展示区域高度占页面百分比。 |
+| popup        | [`Popup`](https://stdf.design/components?nav=popup&tab=1)\|`null`     | `{}`                              | N    | 弹出层参数，传 `null` 时不使用弹出层直接展示。 |
 | loading      | [`Loading`](https://stdf.design/components?nav=loading&tab=1) | `{}`                              | N    | 加载数据时 Loading 参数。    |
 
 ## AsyncPicker Events

docs/mds/components/asyncPicker/api_en.md

@@ -16,7 +16,8 @@
 | prevText     | `string`                                                        | Current language picker.defaultPrev     | N        | Previous level text.                                      |
 | showSelected | `boolean`                                                       | `false`                                 | N        | Whether to show selected items.                           |
 | selectedText | `string`                                                        | Current language picker.defaultSelected | N        | Selected text.                                            |
-| popup        | [`Popup`](https://stdf.design/components?nav=popup&tab=1)     | `{}`                                    | N        | Popup parameters.                                         |
+| height       | `number`                                                        | `30`                                    | N        | Height percentage of display area when not using popup. |
+| popup        | [`Popup`](https://stdf.design/components?nav=popup&tab=1)\|`null`     | `{}`                                    | N        | Popup parameters. Pass `null` to display without popup. |
 | loading      | [`Loading`](https://stdf.design/components?nav=loading&tab=1) | `{}`                                    | N        | Loading parameters when loading data.                     |
 
 ## AsyncPicker Events

docs/mds/components/asyncPicker/guide.md

@@ -26,6 +26,8 @@ AsyncPicker 组件最终返回的数据有两项，一项是选定的多列数
 
 AsyncPicker 是在 Popup 基础上封装的，通过预先定义一些 Popup 的 Props 实现，因此可以通过传入 Popup 的属性来实现不同的效果。比如示例中通过设置 popup 的 radius 改变圆角风格。
 
+如果不需要使用弹出层，可以将 `popup` 设置为 `null`，此时 AsyncPicker 将直接展示在页面上。可通过 `height` 属性设置展示区域高度占页面百分比。
+
 AsyncPicker 内加载数据时显示的 loading 是在 Loading 组件基础上封装的，可以通过传入 Loading 的属性来实现不同的效果。比如示例中通过设置 loading 的一些参数换了一个 loading 效果。
 
 ## Radio、ActionSheet、IndexBar、Picker、AsyncPicker 区别

docs/mds/components/asyncPicker/guide_en.md

@@ -26,6 +26,8 @@ In actual development, AsyncPicker data is usually obtained dynamically, typical
 
 AsyncPicker is built on top of Popup by pre-defining some Popup Props. Therefore, different effects can be achieved by passing in Popup properties. For example, in the demo, the border radius style is changed by setting the popup's radius.
 
+If you don't need to use a popup, you can set `popup` to `null`, and the AsyncPicker will be displayed directly on the page. You can set the display area height percentage with the `height` property.
+
 The loading display in AsyncPicker during data loading is built on top of the Loading component. Different effects can be achieved by passing in Loading properties. For example, in the demo, a different loading effect is achieved by setting some loading parameters.
 
 ## Differences between Radio, ActionSheet, IndexBar, Picker, and AsyncPicker

docs/mds/components/asyncPicker/version.md

@@ -0,0 +1,9 @@
+## 2.0.0
+
+- [!tag|A|0|] 新增 `height` 属性，支持不使用弹出层时配置展示区域高度。
+- [!tag|A|0|] `popup` 支持传 `null`，可直接在页面内展示。
+
+## 1.3.0
+
+- [!tag|A|0|]`popup` 属性支持传入 `null`，不使用弹出层直接展示异步选择器。
+- [!tag|A|0|]新增 `height` 属性，设置不使用弹出层时展示区域高度占页面百分比。

docs/mds/components/asyncPicker/version_en.md

@@ -0,0 +1,4 @@
+## 1.3.0
+
+- [!tag|A|0|]`popup` property supports `null` to display async picker without popup.
+- [!tag|A|0|]Add `height` property to set display area height percentage when not using popup.

docs/mds/components/avatar/api.md

@@ -1,12 +1,12 @@
 ## Avatar Props
 
-| 属性     | 类型                                                      | 默认值   | 必传 | 说明                 |
+| 名称     | 类型                                                      | 默认值   | 必传 | 说明                 |
 | -------- | --------------------------------------------------------- | -------- | ---- | -------------------- |
 | image    | `string`                                                  | `''`     | N    | 图片路径。           |
 | alt      | `string`                                                  | `''`     | N    | 替换文本，建议单字。 |
 | icon     | [`Icon`](https://stdf.design/components?nav=icon&tab=1) | `{}`     | N    | 替换图标。           |
 | altSize  | `'xs'\|'sm'\|'md'\|'lg'\|'xl'`                            | `'md'`   | N    | 替换文本大小。       |
-| radius   | `'none'\|'sm'\|'xl'\|'2xl'\|'3xl'\|'full'`                | `'sm'`   | N    | 圆角风格。           |
+| radius   | `'none'\|'xs'\|'sm'\|'md'\|'lg'\|'xl'\|'2xl'\|'full'\|''`  | `'sm'`   | N    | 圆角风格。           |
 | size     | `'xs'\|'sm'\|'base'\|'md'\|'lg'\|'xl'\|'2xl'`             | `'md'`   | N    | 头像框大小。         |
 | imgSize  | `'s'\|'m'\|'l'`                                           | `'l'`    | N    | 头像图片大小。       |
 | line     | `'none'\|'solid'\|'dashed'\|'dotted'`                     | `'none'` | N    | 边框风格。           |
@@ -17,23 +17,3 @@
 | 名称    | 类型         | 参数 | 描述       |
 | ------- | ------------ | ---- | ---------- |
 | onclick | `() => void` | -    | 点击触发。 |
-
-## Avatars Props
-
-| 名称      | 类型                                                                                        | 默认值    | 必传 | 说明                             |
-| --------- | ------------------------------------------------------------------------------------------- | --------- | ---- | -------------------------------- |
-| data      | `Avatar[]`                                                                                  | `[]`      | N    | 由 Avatar Props 组成的头像数据。 |
-| radius    | `'none'\|'base'\|'xl'\|'2xl'\|'3xl'\|'full'`                                                | `'full'`  | N    | 圆角风格。                       |
-| size      | `'xs'\|'sm'\|'base'\|'md'\|'lg'\|'xl'\|'2xl'`                                               | `'md'`    | N    | 头像框大小。                     |
-| compact   | `number`                                                                                    | `5`       | N    | 紧凑程度，越大越紧凑。           |
-| lineWidth | `'0'\|'1'\|'2'\|'3'\|'4'\|'8'`                                                              | `'3'`     | N    | 边框粗细。                       |
-| reverse   | `boolean`                                                                                   | `false`   | N    | 是否反向。                       |
-| max       | `number`                                                                                    | `10`      | N    | 最大最大显示数量。               |
-| top       | `'totle'\|'add'\|null`\|[`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | `'totle'` | N    | 顶层内容。                       |
-| injClass  | `string`                                                                                    | `''`      | N    | 注入 CSS 名称。                  |
-
-## Avatars Events
-
-| 名称    | 类型         | 参数 | 描述             |
-| ------- | ------------ | ---- | ---------------- |
-| onclick | `() => void` | -    | 点击头像组触发。 |

docs/mds/components/avatar/api_en.md

@@ -1,12 +1,12 @@
 ## Avatar Props
 
-| Property | Type                                                      | Default  | Required | Description                        |
+| Name     | Type                                                      | Default  | Required | Description                        |
 | -------- | --------------------------------------------------------- | -------- | -------- | ---------------------------------- |
 | image    | `string`                                                  | `''`     | N        | Image path.                        |
 | alt      | `string`                                                  | `''`     | N        | Alt text, single char recommended. |
 | icon     | [`Icon`](https://stdf.design/components?nav=icon&tab=1) | `{}`     | N        | Alternative icon.                  |
 | altSize  | `'xs'\|'sm'\|'md'\|'lg'\|'xl'`                            | `'md'`   | N        | Alt text size.                     |
-| radius   | `'none'\|'sm'\|'xl'\|'2xl'\|'3xl'\|'full'`                | `'sm'`   | N        | Border radius style.               |
+| radius   | `'none'\|'xs'\|'sm'\|'md'\|'lg'\|'xl'\|'2xl'\|'full'\|''`  | `'sm'`   | N        | Border radius style.               |
 | size     | `'xs'\|'sm'\|'base'\|'md'\|'lg'\|'xl'\|'2xl'`             | `'md'`   | N        | Avatar frame size.                 |
 | imgSize  | `'s'\|'m'\|'l'`                                           | `'l'`    | N        | Avatar image size.                 |
 | line     | `'none'\|'solid'\|'dashed'\|'dotted'`                     | `'none'` | N        | Border style.                      |
@@ -17,23 +17,3 @@
 | Name    | Type         | Params | Description         |
 | ------- | ------------ | ------ | ------------------- |
 | onclick | `() => void` | -      | Triggered on click. |
-
-## Avatars Props
-
-| Name      | Type                                                                                        | Default   | Required | Description                                   |
-| --------- | ------------------------------------------------------------------------------------------- | --------- | -------- | --------------------------------------------- |
-| data      | `Avatar[]`                                                                                  | `[]`      | N        | Array of Avatar Props data.                   |
-| radius    | `'none'\|'base'\|'xl'\|'2xl'\|'3xl'\|'full'`                                                | `'full'`  | N        | Border radius style.                          |
-| size      | `'xs'\|'sm'\|'base'\|'md'\|'lg'\|'xl'\|'2xl'`                                               | `'md'`    | N        | Avatar frame size.                            |
-| compact   | `number`                                                                                    | `5`       | N        | Compactness level, higher means more compact. |
-| lineWidth | `'0'\|'1'\|'2'\|'3'\|'4'\|'8'`                                                              | `'3'`     | N        | Border width.                                 |
-| reverse   | `boolean`                                                                                   | `false`   | N        | Whether to reverse the order.                 |
-| max       | `number`                                                                                    | `10`      | N        | Maximum number of avatars to display.         |
-| top       | `'totle'\|'add'\|null`\|[`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | `'totle'` | N        | Top layer content.                            |
-| injClass  | `string`                                                                                    | `''`      | N        | Injected CSS class name.                      |
-
-## Avatars Events
-
-| Name    | Type         | Params | Description                          |
-| ------- | ------------ | ------ | ------------------------------------ |
-| onclick | `() => void` | -      | Triggered when avatar group clicked. |

docs/mds/components/avatar/guide.md

@@ -16,12 +16,4 @@ image > alt > icon。
 
 通过 injClass 参数可以向组件内部 button 元素注入 CSS 名称（不仅限于 Tailwind CSS），这将使组件样式有更多自定义可能性，示例中通过 injClass 实现了自定义背景色和边框颜色。
 
-若注入的 class 没生效，请在注入的 class 名称前添加“!” ，可参考 [Tailwind Important modifier](https://tailwindcss.com/docs/configuration#important-modifier)。
-
-## 头像组
-
-v0.4.0 开始支持头像组，头像组的使用场景是在头像框内部显示多个头像，例如群聊头像、评论头像等。传入由 Avatar Props 组成的数组即可，头像组有自己的 Props 用于控制不同样式。
-
-默认顶层显示头像总数，可通过 top 参数控制顶层显示内容，可选值有 totle（显示头像总数）、add（新增头像 Icon）、null（不显示）、Snippet（自定义顶层内容）。
-
-头像组 Props 自己也有一个 injClass，可为头像组注入 Class 名称，一般用于当默认边框颜色与背景色不统一时传入传入 ring 的颜色使其统一。
+若注入的 class 没生效，请在注入的 class 名称前添加"!" ，可参考 [Tailwind Important modifier](https://tailwindcss.com/docs/configuration#important-modifier)。

docs/mds/components/avatar/guide_en.md

@@ -17,11 +17,3 @@ This parameter determines the ratio of the internal image to the entire avatar f
 The injClass parameter allows injecting CSS class names (not limited to Tailwind CSS) into the component's internal button element, enabling more customization possibilities for component styles. The example demonstrates custom background color and border color through injClass.
 
 If the injected class doesn't take effect, please add "!" before the class name. Refer to [Tailwind Important modifier](https://tailwindcss.com/docs/configuration#important-modifier).
-
-## Avatar Group
-
-Starting from v0.4.0, avatar groups are supported. Avatar groups are used to display multiple avatars within an avatar frame, such as group chat avatars or comment avatars. Simply pass in an array composed of Avatar Props, and the avatar group has its own Props to control different styles.
-
-By default, the top layer displays the total number of avatars. The top parameter can control the top layer content, with options including totle (display total avatar count), add (add avatar Icon), null (no display), and Snippet (custom top layer content).
-
-Avatar group Props also has its own injClass, which can inject Class names for the avatar group, typically used to unify the ring color when the default border color doesn't match the background color.

docs/mds/components/avatar/version.md

@@ -1,3 +1,8 @@
+## 2.0.0
+
+- [!tag|O|0|] `radius` 选项补充 `xs`、`md`、`lg` 与空值，移除 `3xl`，默认圆角调整为主题圆角。
+- [!tag|O|0|] 移除 Avatars 组件，改为独立的 AvatarGroup 组件。
+
 ## 1.1.1
 
 - [!tag|B|2|] 修复 Safari 中默认头像未居中问题。

docs/mds/components/avatarGroup/FAQ.md

@@ -0,0 +1,25 @@
+## 常见问题
+
+### 头像组的边框颜色与背景色不一致怎么办？
+
+可以通过 `injClass` 注入自定义的 ring 颜色类，例如：
+
+```svelte
+<AvatarGroup {data} injClass="!ring-white dark:!ring-gray-900" />
+```
+
+### 如何自定义顶层内容？
+
+使用 Snippet 传入自定义内容：
+
+```svelte
+<AvatarGroup {data}>
+	{#snippet top()}
+		<div class="custom-top">自定义内容</div>
+	{/snippet}
+</AvatarGroup>
+```
+
+### 头像重叠太多或太少怎么调整？
+
+调整 `compact` 参数，数值越大重叠越多。默认值为 5，可以根据需要设置 0-10 之间的值。

docs/mds/components/avatarGroup/FAQ_en.md

@@ -0,0 +1,25 @@
+## FAQ
+
+### What if the avatar group border color doesn't match the background?
+
+You can inject custom ring color classes through `injClass`:
+
+```svelte
+<AvatarGroup {data} injClass="!ring-white dark:!ring-gray-900" />
+```
+
+### How to customize the top layer content?
+
+Use Snippet to pass custom content:
+
+```svelte
+<AvatarGroup {data}>
+	{#snippet top()}
+		<div class="custom-top">Custom content</div>
+	{/snippet}
+</AvatarGroup>
+```
+
+### How to adjust if avatars overlap too much or too little?
+
+Adjust the `compact` parameter. Higher values mean more overlap. Default is 5, you can set values between 0-10 as needed.

docs/mds/components/avatarGroup/api.md

@@ -0,0 +1,19 @@
+## AvatarGroup Props
+
+| 名称      | 类型                                                                                        | 默认值    | 必传 | 说明                             |
+| --------- | ------------------------------------------------------------------------------------------- | --------- | ---- | -------------------------------- |
+| data      | `Avatar[]`                                                                                  | `[]`      | N    | 由 Avatar Props 组成的头像数据。 |
+| radius    | `'none'\|'xs'\|'sm'\|'md'\|'lg'\|'xl'\|'2xl'\|'full'\|''`                                    | `'sm'`    | N    | 圆角风格。                       |
+| size      | `'xs'\|'sm'\|'base'\|'md'\|'lg'\|'xl'\|'2xl'`                                               | `'md'`    | N    | 头像框大小。                     |
+| compact   | `number`                                                                                    | `5`       | N    | 紧凑程度，越大越紧凑。           |
+| lineWidth | `'0'\|'1'\|'2'\|'3'\|'4'\|'8'`                                                              | `'3'`     | N    | 边框粗细。                       |
+| reverse   | `boolean`                                                                                   | `false`   | N    | 是否反向。                       |
+| max       | `number`                                                                                    | `10`      | N    | 最大显示数量。                   |
+| top       | `'totle'\|'add'\|null`\|[`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | `'totle'` | N    | 顶层内容。                       |
+| injClass  | `string`                                                                                    | `''`      | N    | 注入 CSS 名称。                  |
+
+## AvatarGroup Events
+
+| 名称    | 类型         | 参数 | 描述             |
+| ------- | ------------ | ---- | ---------------- |
+| onclick | `() => void` | -    | 点击头像组触发。 |

docs/mds/components/avatarGroup/api_en.md

@@ -0,0 +1,19 @@
+## AvatarGroup Props
+
+| Name      | Type                                                                                        | Default   | Required | Description                                   |
+| --------- | ------------------------------------------------------------------------------------------- | --------- | -------- | --------------------------------------------- |
+| data      | `Avatar[]`                                                                                  | `[]`      | N        | Array of Avatar Props data.                   |
+| radius    | `'none'\|'xs'\|'sm'\|'md'\|'lg'\|'xl'\|'2xl'\|'full'\|''`                                    | `'sm'`    | N        | Border radius style.                          |
+| size      | `'xs'\|'sm'\|'base'\|'md'\|'lg'\|'xl'\|'2xl'`                                               | `'md'`    | N        | Avatar frame size.                            |
+| compact   | `number`                                                                                    | `5`       | N        | Compactness level, higher means more compact. |
+| lineWidth | `'0'\|'1'\|'2'\|'3'\|'4'\|'8'`                                                              | `'3'`     | N        | Border width.                                 |
+| reverse   | `boolean`                                                                                   | `false`   | N        | Whether to reverse the order.                 |
+| max       | `number`                                                                                    | `10`      | N        | Maximum number of avatars to display.         |
+| top       | `'totle'\|'add'\|null`\|[`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | `'totle'` | N        | Top layer content.                            |
+| injClass  | `string`                                                                                    | `''`      | N        | Injected CSS class name.                      |
+
+## AvatarGroup Events
+
+| Name    | Type         | Params | Description                          |
+| ------- | ------------ | ------ | ------------------------------------ |
+| onclick | `() => void` | -      | Triggered when avatar group clicked. |

docs/mds/components/avatarGroup/guide.md

@@ -0,0 +1,30 @@
+## 基础用法
+
+头像组用于展示多个头像的叠加效果，常见于群聊头像、评论者列表等场景。传入由 Avatar Props 组成的数组即可。
+
+## 紧凑程度
+
+通过 `compact` 参数控制头像之间的重叠程度，数值越大越紧凑。默认值为 5。
+
+## 顶层内容
+
+默认顶层显示头像总数，可通过 `top` 参数控制顶层显示内容：
+
+- `'totle'`：显示头像总数（默认）
+- `'add'`：显示添加图标
+- `null`：不显示顶层
+- `Snippet`：自定义顶层内容
+
+## 反向排列
+
+设置 `reverse` 为 `true` 可以反转头像的排列顺序和层叠方向。
+
+## 最大显示数量
+
+通过 `max` 参数限制最多显示的头像数量，超出的数量会在顶层显示。
+
+## injClass
+
+通过 `injClass` 参数可以为头像组注入 CSS 类名，一般用于当默认边框颜色与背景色不统一时传入 ring 的颜色使其统一。
+
+若注入的 class 没生效，请在注入的 class 名称前添加"!"，可参考 [Tailwind Important modifier](https://tailwindcss.com/docs/configuration#important-modifier)。

docs/mds/components/avatarGroup/guide_en.md

@@ -0,0 +1,30 @@
+## Basic Usage
+
+AvatarGroup is used to display multiple avatars with overlapping effect, commonly used for group chat avatars, commenter lists, etc. Simply pass in an array of Avatar Props.
+
+## Compactness
+
+Use the `compact` parameter to control the overlap between avatars. Higher values mean more compact. Default is 5.
+
+## Top Layer Content
+
+By default, the top layer displays the total count. Use the `top` parameter to control the content:
+
+- `'totle'`: Display total count (default)
+- `'add'`: Display add icon
+- `null`: Hide top layer
+- `Snippet`: Custom top layer content
+
+## Reverse Order
+
+Set `reverse` to `true` to reverse the arrangement and stacking order of avatars.
+
+## Maximum Display Count
+
+Use the `max` parameter to limit the maximum number of avatars displayed. Excess count will be shown in the top layer.
+
+## injClass
+
+The `injClass` parameter allows injecting CSS class names for the avatar group, typically used to unify the ring color when the default border color doesn't match the background color.
+
+If the injected class doesn't take effect, please add "!" before the class name. Refer to [Tailwind Important modifier](https://tailwindcss.com/docs/configuration#important-modifier).

docs/mds/components/badge/api.md

@@ -3,7 +3,7 @@
 | 名称     | 类型                           | 默认值   | 必传 | 说明                                         |
 | -------- | ------------------------------ | -------- | ---- | -------------------------------------------- |
 | text     | `string`                       | `''`     | N    | 徽标文案。                                   |
-| radius   | `'full'\|'sm'\|'none'\|'leaf'` | `'full'` | N    | 圆角风格。                                   |
+| radius   | `'none'\|'xs'\|'sm'\|'md'\|'lg'\|'xl'\|'2xl'\|'full'\|''\|'leaf'` | `'sm'`   | N    | 圆角风格。                                   |
 | isLeft   | `boolean`                      | `false`  | N    | 是否位于左侧（仅 isInner 为 false 时生效）。 |
 | isShow   | `boolean`                      | `true`   | N    | 是否显示。                                   |
 | offsetY  | `number`                       | `0`      | N    | 上下偏移量（仅 isInner 为 false 时生效）。   |

docs/mds/components/badge/api_en.md

@@ -3,7 +3,7 @@
 | Name     | Type                           | Default  | Required | Description                                                         |
 | -------- | ------------------------------ | -------- | -------- | ------------------------------------------------------------------- |
 | text     | `string`                       | `''`     | N        | Badge text content.                                                 |
-| radius   | `'full'\|'sm'\|'none'\|'leaf'` | `'full'` | N        | Border radius style.                                                |
+| radius   | `'none'\|'xs'\|'sm'\|'md'\|'lg'\|'xl'\|'2xl'\|'full'\|''\|'leaf'` | `'sm'`   | N        | Border radius style.                                                |
 | isLeft   | `boolean`                      | `false`  | N        | Whether to position on the left (only works when isInner is false). |
 | isShow   | `boolean`                      | `true`   | N        | Whether to show the badge.                                          |
 | offsetY  | `number`                       | `0`      | N        | Vertical offset (only works when isInner is false).                 |

docs/mds/components/badge/version.md

@@ -0,0 +1,4 @@
+## 2.0.0
+
+- [!tag|O|0|] `radius` 选项扩展为完整圆角等级，默认值调整为 `sm`。
+

docs/mds/components/bottomSheet/api.md

@@ -16,7 +16,7 @@
 | stayHeightList  | `number[]`                                                | `[10, 50, 90]`               | N    | 固定高度列表。                     |
 | stayHeightIndex | `number`                                                  | `1`                          | N    | 初始固定高度索引。                 |
 | closeHeight     | `number`                                                  | `0`                          | N    | 滑动结束时位置低于此高度自动关闭。 |
-| radius          | `'none'\|'middle'\|'full'`                                | `'full'`                     | N    | 圆角风格。                         |
+| radius          | `'none'\|'sm'\|'md'\|'lg'\|'xl'\|'2xl'\|'3xl'\|'4xl'\|''` | `''`                         | N    | 圆角风格。                         |
 
 ## BottomSheet Events
 

docs/mds/components/bottomSheet/api_en.md

@@ -16,7 +16,7 @@
 | stayHeightList  | `number[]`                                                | `[10, 50, 90]`                 | N        | Fixed height list.                                                     |
 | stayHeightIndex | `number`                                                  | `1`                            | N        | Initial fixed height index.                                            |
 | closeHeight     | `number`                                                  | `0`                            | N        | Auto close when position is lower than this height after sliding ends. |
-| radius          | `'none'\|'middle'\|'full'`                                | `'full'`                       | N        | Border radius style.                                                   |
+| radius          | `'none'\|'sm'\|'md'\|'lg'\|'xl'\|'2xl'\|'3xl'\|'4xl'\|''` | `''`                           | N        | Border radius style.                                                   |
 
 ## BottomSheet Events
 

docs/mds/components/bottomSheet/version.md

@@ -1,3 +1,7 @@
+## 2.0.0
+
+- [!tag|O|0|] `radius` 选项扩展为更多等级并支持空值，默认使用主题圆角。
+
 ## 0.5.1
 
 - [!tag|O|0|]优化滑动动画效果。关联 [PR](https://github.com/any-tdf/stdf/pull/31)。[!contribute|mrlovables|]

docs/mds/components/button/api.md

@@ -1,26 +1,25 @@
 ## Button Props
 
-| 名称            | 类型                                                                          | 默认值    | 必传 | 说明                           |
-| --------------- | ----------------------------------------------------------------------------- | --------- | ---- | ------------------------------ |
-| fill            | `'base'\|'line'\|'lineLight'\|'lineTheme'\|'text'\|'textTheme'\|'colorLight'` | `'base'`  | N    | 填充模式。                     |
-| state           | `'theme'\|'success'\|'warning'\|'error'\|'info'`                              | `'theme'` | N    | 状态色，theme 表示跟随主题色。 |
-| radius          | `'none'\|'sm'\|'xl'\|'2xl'\|'full'`                                           | `'sm'`    | N    | 圆角风格。                     |
-| size            | `'full'\|'big'\|'md'\|'sm'\|'auto'`                                           | `'big'`   | N    | 尺寸。                         |
-| line            | `'solid'\|'dashed'\|'dotted'`                                                 | `'solid'` | N    | 边框风格。                     |
-| heightOut       | `'0'\|'1'\|'2'\|'3'\|'4'`                                                     | `'2'`     | N    | 按钮外部高度。                 |
-| heightIn        | `'0'\|'1'\|'2'\|'3'\|'4'`                                                     | `'3'`     | N    | 按钮高度。                     |
-| injClass        | `string`                                                                      | `''`      | N    | 注入 CSS 名称。                |
-| love            | `boolean`                                                                     | `false`   | N    | 是否开启关爱版。               |
-| group           | `boolean`                                                                     | `false`   | N    | 是否使用按钮组。               |
-| disabled        | `boolean`                                                                     | `false`   | N    | 是否禁用。                     |
-| customSize      | `boolean`                                                                     | `false`   | N    | 是否自定义大小。               |
-| customWidth     | `number`                                                                      | `0`       | N    | 自定义宽度。                   |
-| customHeight    | `number`                                                                      | `0`       | N    | 自定义高度。                   |
-| icon            | [`Icon`](https://stdf.design/components?nav=icon&tab=1)\|`null`             | `null`    | N    | 图标参数。                     |
-| iconPosition    | `'left'\|'right'`                                                            | `'left'` | N    | 图标位置。                     |
-| loading         | [`Loading`](https://stdf.design/components?nav=loading&tab=1)\|`null`       | `null`    | N    | 加载参数。                     |
-| disabledLoading | `boolean`                                                                     | `false`   | N    | 加载时是否禁用。               |
-| type            | `'button'\|'reset'\|'submit'`                                                | `button`  | N        | button 的类型。               |
+| 名称            | 类型                                                                          | 默认值    | 必传 | 说明                                                                                     |
+| --------------- | ----------------------------------------------------------------------------- | --------- | ---- | ---------------------------------------------------------------------------------------- |
+| fill            | `'base'\|'line'\|'lineLight'\|'lineState'\|'text'\|'textState'\|'colorLight'` | `'base'`  | N    | 填充模式。base/lineState/textState/colorLight 跟随 state，line/lineLight/text 为无色。 |
+| state           | `'theme'\|'success'\|'warning'\|'error'\|'info'`                              | `'theme'` | N    | 状态色，theme 表示跟随主题色。                                                           |
+| radius          | `'none'\|'xs'\|'sm'\|'md'\|'lg'\|'xl'\|'2xl'\|'full'\|''`                          | `'sm'`    | N    | 圆角风格。                                                                               |
+| size            | `'full'\|'big'\|'md'\|'sm'\|'auto'`                                           | `'big'`   | N    | 尺寸。                                                                                   |
+| border          | `'solid'\|'dashed'\|'dotted'`                                                 | `'solid'` | N    | 边框风格。                                                                               |
+| heightOut       | `'0'\|'1'\|'2'\|'3'\|'4'`                                                     | `'2'`     | N    | 按钮外部高度。                                                                           |
+| heightIn        | `'0'\|'1'\|'2'\|'3'\|'4'`                                                     | `'3'`     | N    | 按钮高度。                                                                               |
+| injClass        | `string`                                                                      | `''`      | N    | 注入 CSS 名称。                                                                          |
+| love            | `boolean`                                                                     | `false`   | N    | 是否开启关爱版。                                                                         |
+| disabled        | `boolean`                                                                     | `false`   | N    | 是否禁用。                                                                               |
+| customSize      | `boolean`                                                                     | `false`   | N    | 是否自定义大小。                                                                         |
+| customWidth     | `number`                                                                      | `0`       | N    | 自定义宽度。                                                                             |
+| customHeight    | `number`                                                                      | `0`       | N    | 自定义高度。                                                                             |
+| icon            | [`Icon`](https://stdf.design/components?nav=icon&tab=1)\|`null`               | `null`    | N    | 图标参数。                                                                               |
+| iconPosition    | `'left'\|'right'`                                                             | `'left'`  | N    | 图标位置。                                                                               |
+| loading         | [`Loading`](https://stdf.design/components?nav=loading&tab=1)\|`null`         | `null`    | N    | 加载参数。                                                                               |
+| disabledLoading | `boolean`                                                                     | `false`   | N    | 加载时是否禁用。                                                                         |
+| type            | `'button'\|'reset'\|'submit'`                                                 | `button`  | N    | button 的类型。                                                                          |
 
 ## Button Events
 

docs/mds/components/button/api_en.md

@@ -1,26 +1,25 @@
 ## Button Props
 
-| Name            | Type                                                                          | Default   | Required | Description                                      |
-| --------------- | ----------------------------------------------------------------------------- | --------- | -------- | ------------------------------------------------ |
-| fill            | `'base'\|'line'\|'lineLight'\|'lineTheme'\|'text'\|'textTheme'\|'colorLight'` | `'base'`  | N        | Fill mode.                                       |
-| state           | `'theme'\|'success'\|'warning'\|'error'\|'info'`                              | `'theme'` | N        | Status color, theme means following theme color. |
-| radius          | `'none'\|'sm'\|'xl'\|'2xl'\|'full'`                                           | `'sm'`    | N        | Border radius style.                             |
-| size            | `'full'\|'big'\|'md'\|'sm'\|'auto'`                                           | `'big'`   | N        | Size.                                            |
-| line            | `'solid'\|'dashed'\|'dotted'`                                                 | `'solid'` | N        | Border style.                                    |
-| heightOut       | `'0'\|'1'\|'2'\|'3'\|'4'`                                                     | `'2'`     | N        | Button outer height.                             |
-| heightIn        | `'0'\|'1'\|'2'\|'3'\|'4'`                                                     | `'3'`     | N        | Button height.                                   |
-| injClass        | `string`                                                                      | `''`      | N        | Inject CSS class name.                           |
-| love            | `boolean`                                                                     | `false`   | N        | Whether to enable care version.                  |
-| group           | `boolean`                                                                     | `false`   | N        | Whether to use button group.                     |
-| disabled        | `boolean`                                                                     | `false`   | N        | Whether to disable.                              |
-| customSize      | `boolean`                                                                     | `false`   | N        | Whether to use custom size.                      |
-| customWidth     | `number`                                                                      | `0`       | N        | Custom width.                                    |
-| customHeight    | `number`                                                                      | `0`       | N        | Custom height.                                   |
-| icon            | [`Icon`](https://stdf.design/components?nav=icon&tab=1)\|`null`               | `null`    | N        | Icon props.                                      |
-| iconPosition    | `'left'\|'right'`                                                            | `'left'` | N        | Icon position.                                   |
-| loading         | [`Loading`](https://stdf.design/components?nav=loading&tab=1)\|`null`         | `null`    | N        | Loading props.                                   |
-| disabledLoading | `boolean`                                                                     | `false`   | N        | Whether to disable when loading.                 |
-| type            | `'button'\|'reset'\|'submit'`                                                 | `button`  | N        | The default behavior of the button               |
+| Name            | Type                                                                          | Default   | Required | Description                                                                                                    |
+| --------------- | ----------------------------------------------------------------------------- | --------- | -------- | -------------------------------------------------------------------------------------------------------------- |
+| fill            | `'base'\|'line'\|'lineLight'\|'lineState'\|'text'\|'textState'\|'colorLight'` | `'base'`  | N        | Fill mode. base/lineState/textState/colorLight follow state, line/lineLight/text are colorless.                |
+| state           | `'theme'\|'success'\|'warning'\|'error'\|'info'`                              | `'theme'` | N        | Status color, theme means following theme color.                                                               |
+| radius          | `'none'\|'xs'\|'sm'\|'md'\|'lg'\|'xl'\|'2xl'\|'full'\|''`                          | `'sm'`    | N        | Border radius style.                                                                                           |
+| size            | `'full'\|'big'\|'md'\|'sm'\|'auto'`                                           | `'big'`   | N        | Size.                                                                                                          |
+| border          | `'solid'\|'dashed'\|'dotted'`                                                 | `'solid'` | N        | Border style.                                                                                                  |
+| heightOut       | `'0'\|'1'\|'2'\|'3'\|'4'`                                                     | `'2'`     | N        | Button outer height.                                                                                           |
+| heightIn        | `'0'\|'1'\|'2'\|'3'\|'4'`                                                     | `'3'`     | N        | Button height.                                                                                                 |
+| injClass        | `string`                                                                      | `''`      | N        | Inject CSS class name.                                                                                         |
+| love            | `boolean`                                                                     | `false`   | N        | Whether to enable care version.                                                                                |
+| disabled        | `boolean`                                                                     | `false`   | N        | Whether to disable.                                                                                            |
+| customSize      | `boolean`                                                                     | `false`   | N        | Whether to use custom size.                                                                                    |
+| customWidth     | `number`                                                                      | `0`       | N        | Custom width.                                                                                                  |
+| customHeight    | `number`                                                                      | `0`       | N        | Custom height.                                                                                                 |
+| icon            | [`Icon`](https://stdf.design/components?nav=icon&tab=1)\|`null`               | `null`    | N        | Icon props.                                                                                                    |
+| iconPosition    | `'left'\|'right'`                                                             | `'left'`  | N        | Icon position.                                                                                                 |
+| loading         | [`Loading`](https://stdf.design/components?nav=loading&tab=1)\|`null`         | `null`    | N        | Loading props.                                                                                                 |
+| disabledLoading | `boolean`                                                                     | `false`   | N        | Whether to disable when loading.                                                                               |
+| type            | `'button'\|'reset'\|'submit'`                                                 | `button`  | N        | The default behavior of the button.                                                                            |
 
 ## Button Events
 

docs/mds/components/button/guide.md

@@ -4,7 +4,17 @@
 
 ## 填充模式
 
-填充模式中，line 为线性按钮（幽灵按钮）；lineLight 线性浅色按钮；text 为纯文本按钮；而 lineTheme 与 textTheme 表示对应边框和文字颜色会跟随主题色，包括亮暗模式；colorLight 为带透明度浅色背景按钮，也自动适配亮暗模式。
+填充模式中：
+
+- `base`：实心填充按钮（默认），背景色跟随状态色
+- `line`：线性按钮（幽灵按钮），无色边框，黑/白色文字
+- `lineLight`：线性浅色按钮，淡色边框
+- `lineState`：线性状态按钮，边框和文字颜色跟随状态色
+- `text`：纯文本按钮，无色文字
+- `textState`：纯文本状态按钮，文字颜色跟随状态色
+- `colorLight`：浅色背景按钮，浅色背景 + 状态色文字
+
+其中 `base`、`lineState`、`textState`、`colorLight` 会跟随 `state` 参数变化颜色，而 `line`、`lineLight`、`text` 为无色模式，不受 `state` 影响。
 
 ## 状态色
 
@@ -16,7 +26,7 @@
 
 ## 边框风格
 
-边框风格（line）必须在填充模式（fill）为 line 或 lineTheme 情况下才会生效。
+边框风格（border）必须在填充模式（fill）为 `line`、`lineLight` 或 `lineState` 情况下才会生效。
 
 ## CSS 注入
 
@@ -26,7 +36,7 @@
 
 ## 按钮组
 
-要使用按钮组可以直接通过在内部 Snippet 放入多个元素，结合 heightOut 与 heightIn 就可以实现。需要注意的是此时点击事件就需要绑定在内部独立元素之上，另外需要通过将 Props 的 group 设置为 true，将不显示整个按钮区域的点击效果。可参考示例。
+按钮组功能已独立为 [ButtonGroup](/components?nav=buttonGroup&tab=0) 组件，支持通过 `items` 数组或 `children` 自定义两种方式使用。
 
 ## 带图标或加载
 

docs/mds/components/button/guide_en.md

@@ -4,7 +4,17 @@ In the practical application of mobile web, the use of large theme color buttons
 
 ## Fill pattern
 
-In fill mode, line is a linear button (ghost button), lineLight is a linear light button, text is a plain text button, and lineTheme and textTheme indicate that the corresponding border and text color will follow the theme color, including light and dark colors.
+Fill modes include:
+
+- `base`: Solid fill button (default), background color follows state color
+- `line`: Linear button (ghost button), colorless border, black/white text
+- `lineLight`: Linear light button, light border
+- `lineState`: Linear state button, border and text color follow state color
+- `text`: Plain text button, colorless text
+- `textState`: Text state button, text color follows state color
+- `colorLight`: Light background button, light background + state color text
+
+Among them, `base`, `lineState`, `textState`, and `colorLight` will change color following the `state` parameter, while `line`, `lineLight`, and `text` are colorless modes, not affected by `state`.
 
 ## Status color
 
@@ -16,7 +26,7 @@ The button size is full and big for block-level elements, md, sm, and xs for inl
 
 ## Border style
 
-The border style (line) will only take effect if the fill mode (fill) is line or lineTheme.
+The border style will only take effect if the fill mode (fill) is `line`, `lineLight`, or `lineState`.
 
 ## CSS injection
 
@@ -26,7 +36,7 @@ If the injected class does not take effect, please add "!" before the injected c
 
 ## Button group
 
-To use the button group, you can directly put multiple elements in the inner Snippet, which can be achieved by combining heightOut and heightIn. It should be noted that the click event needs to be bound to the internal independent element at this time. In addition, by setting the group of Props to true, the click effect of the entire button area will not be displayed. Examples are available.
+The button group feature has been extracted to the [ButtonGroup](/components?nav=buttonGroup&tab=0) component, which supports two ways of use: `items` array or `children` customization.
 
 ## With icon or loading
 

docs/mds/components/button/version.md

@@ -4,6 +4,7 @@
 
 <!-- 记得带上版本号和更新日期，以下是一个示例：
 
+
 ## 0.0.1
 
 -   [!tag|B|1|] 严重 BUG。[!contribute|dufu1991|][!issue|dufu1991|]
@@ -13,6 +14,13 @@
 -   [!tag|A|0|] 新增。
  -->
 
+## 2.0.0
+
+- [!tag|A|0|] 新增 `border` 属性用于边框风格，替代原 `line` 属性。
+- [!tag|O|0|] `fill` 选项调整为 `lineState` 与 `textState`，原 `lineTheme` 与 `textTheme` 迁移为状态版。
+- [!tag|O|0|] 移除 `group` 属性，按钮组改用 ButtonGroup 组件。
+- [!tag|O|0|] `radius` 选项补充更多等级并支持空值。
+
 ## 1.1.0
 
 - [!tag|A|0|] 新增 `iconPosition` 属性，支持设置图标位置。

docs/mds/components/buttonGroup/api.md

@@ -0,0 +1,30 @@
+## ButtonGroup Props
+
+| 名称          | 类型                                                                            | 默认值    | 必传 | 说明                                         |
+| ------------- | ------------------------------------------------------------------------------- | --------- | ---- | -------------------------------------------- |
+| items         | `ButtonGroupItemProps[]`                                                        | `[]`      | N    | 按钮项数组。                                 |
+| fill          | `'base'\|'line'\|'lineLight'\|'lineState'\|'text'\|'textState'\|'colorLight'`   | `'base'`  | N    | 填充模式。                                   |
+| state         | `'theme'\|'success'\|'warning'\|'error'\|'info'`                                | `'theme'` | N    | 状态色。                                     |
+| radius        | `'none'\|'xs'\|'sm'\|'md'\|'lg'\|'xl'\|'2xl'\|'full'\|''`                            | `'sm'`    | N    | 圆角风格。                                   |
+| size          | `'full'\|'big'\|'md'\|'sm'\|'auto'`                                             | `'big'`   | N    | 尺寸。                                       |
+| border        | `'solid'\|'dashed'\|'dotted'`                                                   | `'solid'` | N    | 边框风格。                                   |
+| dividerHeight | `'full'\|'mid'\|'short'`                                                        | `'mid'`   | N    | 分割线高度。full(100%)/mid(60%)/short(30%)。 |
+| heightOut     | `'0'\|'1'\|'2'\|'3'\|'4'`                                                       | `'2'`     | N    | 按钮外部高度。                               |
+| heightIn      | `'0'\|'1'\|'2'\|'3'\|'4'`                                                       | `'3'`     | N    | 按钮高度。                                   |
+| injClass      | `string`                                                                        | `''`      | N    | 注入 CSS 名称。                              |
+
+## ButtonGroupItemProps
+
+| 名称         | 类型                                                    | 默认值   | 必传 | 说明           |
+| ------------ | ------------------------------------------------------- | -------- | ---- | -------------- |
+| text         | `string`                                                | -        | N    | 按钮文本。     |
+| icon         | [`Icon`](https://stdf.design/components?nav=icon&tab=1) | `null`   | N    | 图标参数。     |
+| iconPosition | `'left'\|'right'`                                       | `'left'` | N    | 图标位置。     |
+| disabled     | `boolean`                                               | `false`  | N    | 是否禁用。     |
+| onclick      | `() => void`                                            | -        | N    | 点击回调函数。 |
+
+## ButtonGroup Snippets
+
+| 名称     | 类型                                                                | 参数 | 说明                               |
+| -------- | ------------------------------------------------------------------- | ---- | ---------------------------------- |
+| children | [`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | -    | 自定义内容（替代 items 数组模式）。 |

docs/mds/components/buttonGroup/api_en.md

@@ -0,0 +1,29 @@
+## ButtonGroup Props
+
+| Name          | Type                                                                            | Default   | Required | Description                                    |
+| ------------- | ------------------------------------------------------------------------------- | --------- | -------- | ---------------------------------------------- |
+| items         | `ButtonGroupItemProps[]`                                                        | `[]`      | N        | Button items array.                            |
+| fill          | `'base'\|'line'\|'lineLight'\|'lineState'\|'text'\|'textState'\|'colorLight'`   | `'base'`  | N        | Fill mode.                                     |
+| state         | `'theme'\|'success'\|'warning'\|'error'\|'info'`                                | `'theme'` | N        | Status color.                                  |
+| radius        | `'none'\|'xs'\|'sm'\|'md'\|'lg'\|'xl'\|'2xl'\|'full'\|''`                            | `'sm'`    | N        | Border radius style.                           |
+| size          | `'full'\|'big'\|'md'\|'sm'\|'auto'`                                             | `'big'`   | N        | Size.                                          |
+| border        | `'solid'\|'dashed'\|'dotted'`                                                   | `'solid'` | N        | Border style.                                  |
+| dividerHeight | `'full'\|'mid'\|'short'`                                                        | `'mid'`   | N        | Divider height. full(100%)/mid(60%)/short(30%).|
+| heightOut     | `'0'\|'1'\|'2'\|'3'\|'4'`                                                       | `'2'`     | N        | Button outer height.                           |
+| heightIn      | `'0'\|'1'\|'2'\|'3'\|'4'`                                                       | `'3'`     | N        | Button height.                                 |
+| injClass      | `string`                                                                        | `''`      | N        | Inject CSS class name.                         |
+
+## ButtonGroupItemProps
+
+| Name     | Type                                                    | Default | Required | Description         |
+| -------- | ------------------------------------------------------- | ------- | -------- | ------------------- |
+| text     | `string`                                                | -       | N        | Button text.        |
+| icon     | [`Icon`](https://stdf.design/components?nav=icon&tab=1) | `null`  | N        | Icon props.         |
+| disabled | `boolean`                                               | `false` | N        | Whether to disable. |
+| onclick  | `() => void`                                            | -       | N        | Click callback.     |
+
+## ButtonGroup Snippets
+
+| Name     | Type                                                                | Parameters | Description                                  |
+| -------- | ------------------------------------------------------------------- | ---------- | -------------------------------------------- |
+| children | [`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | -          | Custom content (replaces items array mode).  |

docs/mds/components/buttonGroup/guide.md

@@ -0,0 +1,36 @@
+## 使用场景
+
+ButtonGroup 用于将多个相关操作组合在一起，常见于工具栏、操作面板等场景。
+
+## 两种使用方式
+
+ButtonGroup 支持两种使用方式：
+
+### 1. items 数组模式
+
+通过 `items` 属性传入按钮配置数组，每个按钮项支持 `text`、`icon`、`disabled`、`onclick` 属性。
+
+### 2. children 自定义模式
+
+当需要完全自定义按钮内容时，可以使用 `children` Snippet。
+
+## fill + state 组合
+
+ButtonGroup 的 `fill` 和 `state` 属性可以组合使用：
+
+- `base`/`lineState`/`textState`/`colorLight`：跟随 `state` 变化
+- `line`/`lineLight`/`text`：为无色模式，不受 `state` 影响
+
+## 分割线
+
+按钮之间的分割线高度通过 `dividerHeight` 属性控制：
+
+- `full`：100% 高度
+- `mid`：60% 高度（默认）
+- `short`：30% 高度
+
+分割线颜色会自动跟随按钮文字颜色。
+
+## 禁用按钮
+
+可以在 `items` 数组中单独设置某个按钮的 `disabled` 属性来禁用它。

docs/mds/components/buttonGroup/guide_en.md

@@ -0,0 +1,36 @@
+## Use Cases
+
+ButtonGroup is used to combine multiple related actions together, commonly seen in toolbars, action panels, etc.
+
+## Two Usage Methods
+
+ButtonGroup supports two usage methods:
+
+### 1. Items Array Mode
+
+Pass button configuration array through the `items` prop. Each button item supports `text`, `icon`, `disabled`, and `onclick` properties.
+
+### 2. Children Custom Mode
+
+When you need to fully customize button content, use the `children` Snippet.
+
+## fill + state Combination
+
+ButtonGroup's `fill` and `state` props can be used together:
+
+- `base`/`lineState`/`textState`/`colorLight`: Follow `state` changes
+- `line`/`lineLight`/`text`: Colorless mode, not affected by `state`
+
+## Divider
+
+The divider height between buttons is controlled by the `dividerHeight` prop:
+
+- `full`: 100% height
+- `mid`: 60% height (default)
+- `short`: 30% height
+
+The divider color automatically follows the button text color.
+
+## Disable Buttons
+
+You can disable individual buttons by setting the `disabled` property in the `items` array.

docs/mds/components/calendar/api.md

@@ -15,7 +15,7 @@
 | height          | `number`                                                      | `50`                                 | N    | 显示高度占页面高度百分比。                   |
 | infoDates       | `InfoDate[]`                                                  | `[]`                                 | N    | 需要显示信息的日期。                         |
 | disabledDates   | `string[]`                                                    | `[]`                                 | N    | 不可选的日期。                               |
-| radius          | `'none'\|'sm'\|'xl'\|'2xl'`                                   | `'xl'`                               | N    | 选定日期的圆角风格。                         |
+| radius          | `'none'\|'xs'\|'sm'\|'md'\|'lg'\|'xl'\|'2xl'\|'full'\|''`      | `'sm'`                               | N    | 选定日期的圆角风格。                         |
 | showSelectedDay | `boolean`                                                     | `true`                               | N    | 多选和范围选择时确定按钮是否显示已选天数。   |
 | confirmText     | `string`                                                      | 当前语言的 calendarLang.confirmText  | N    | 确定按钮文案。                               |
 | selectedText    | `string`                                                      | 当前语言的 calendarLang.selectedText | N    | showSelectedDay 为 true 时确定按钮部分文案。 |
@@ -25,9 +25,11 @@
 | highlightToday  | `boolean`                                                     | `true`                               | N    | 是否高亮今天。                               |
 | useAnimation    | `boolean`                                                     | `true`                               | N    | 自动滚动到指定月份时是否使用动画。           |
 | outFormat       | `string`                                                      | `'YMD'`                              | N    | 返回日期数据格式。                           |
-| popup           | [`Popup`](https://stdf.design/components?nav=popup&tab=1)   | `{}`                                 | N    | 弹出层参数。                                 |
+| popup           | [`Popup`](https://stdf.design/components?nav=popup&tab=1) \| `null` | `{}`                                 | N    | 弹出层参数，传 null 时不使用弹出层。         |
 | button          | [`Button`](https://stdf.design/components?nav=button&tab=1) | `{}`                                 | N    | 确定按钮参数。                               |
+| card            | [`Card`](https://stdf.design/components?nav=card&tab=1)     | `{}`                                 | N    | 月份卡片参数，monthCard 为 true 时生效。     |
 | clear           | `boolean`                                                     | `true`                               | N    | 关闭时是否清空已选日期。                     |
+| initSelectedDates | `string[]`                                                  | `[]`                                 | N    | 初始化时已选日期，格式为 YYYYMMDD。          |
 
 ## Calendar Events
 

docs/mds/components/calendar/api_en.md

@@ -15,7 +15,7 @@
 | height          | `number`                                                      | `50`                                       | N        | Display height as percentage of page height.                                   |
 | infoDates       | `InfoDate[]`                                                  | `[]`                                       | N        | Dates that need to display information.                                        |
 | disabledDates   | `string[]`                                                    | `[]`                                       | N        | Disabled dates.                                                                |
-| radius          | `'none'\|'sm'\|'xl'\|'2xl'`                                   | `'xl'`                                     | N        | Border radius style for selected dates.                                        |
+| radius          | `'none'\|'xs'\|'sm'\|'md'\|'lg'\|'xl'\|'2xl'\|'full'\|''`      | `'sm'`                                     | N        | Border radius style for selected dates.                                        |
 | showSelectedDay | `boolean`                                                     | `true`                                     | N        | Whether to show selected days count in confirm button for multiple/range mode. |
 | confirmText     | `string`                                                      | Current language calendarLang.confirmText  | N        | Confirm button text.                                                           |
 | selectedText    | `string`                                                      | Current language calendarLang.selectedText | N        | Part of confirm button text when showSelectedDay is true.                      |
@@ -25,9 +25,11 @@
 | highlightToday  | `boolean`                                                     | `true`                                     | N        | Whether to highlight today.                                                    |
 | useAnimation    | `boolean`                                                     | `true`                                     | N        | Whether to use animation when auto-scrolling to specified month.               |
 | outFormat       | `string`                                                      | `'YMD'`                                    | N        | Output date format.                                                            |
-| popup           | [`Popup`](https://stdf.design/components?nav=popup&tab=1)   | `{}`                                       | N        | Popup parameters.                                                              |
+| popup           | [`Popup`](https://stdf.design/components?nav=popup&tab=1) \| `null` | `{}`                                       | N        | Popup parameters, pass null to disable popup.                                  |
 | button          | [`Button`](https://stdf.design/components?nav=button&tab=1) | `{}`                                       | N        | Confirm button parameters.                                                     |
+| card            | [`Card`](https://stdf.design/components?nav=card&tab=1)     | `{}`                                       | N        | Month card parameters, effective when monthCard is true.                       |
 | clear           | `boolean`                                                     | `true`                                     | N        | Whether to clear selected dates when closing.                                  |
+| initSelectedDates | `string[]`                                                  | `[]`                                       | N        | Initially selected dates in YYYYMMDD format.                                   |
 
 ## Calendar Events
 

docs/mds/components/calendar/guide.md

@@ -39,6 +39,10 @@ Calendar 组件可以通过传入 monthMark 属性来决定是否在日历的每
 
 ## 说明
 
-Calendar 是在 Popup 基础上封装的，通过预先定义一些 Popup 的 Props 实现，因此可以通过传入 Popup 的属性来实现不同的效果。比如示例中通过设置 popup 的 radius 改变圆角风格。
+Calendar 是在 Popup 基础上封装的，通过预先定义一些 Popup 的 Props 实现，因此可以通过传入 Popup 的属性来实现不同的效果。比如示例中通过设置 popup 的 radius 改变圆角风格。如果需要在页面内直接展示日历而不使用弹出层，可以通过设置 popup 为 null 来实现，此时日历将直接渲染在页面内，适合需要将日历嵌入页面布局的场景。
 
 Calendar 内底部的确定按钮使用了 Button 组件，可以通过传入 button 参数来自定义按钮的样式，请参考示例。
+
+## 月份卡片样式
+
+当 monthCard 属性为 true 时，每个月份会使用 Card 组件来包裹显示。可以通过传入 card 参数来自定义卡片的样式，例如设置主题色背景、圆角风格等。请参考示例。

docs/mds/components/calendar/guide_en.md

@@ -38,10 +38,17 @@ When user clicks confirm button located at bottom part of Calendar component it
 ## Month Watermark
 
 By setting monthMark property Calendar component decides whether watermark text displaying name(s)of months appears inside every calendar month view; since different languages have varying lengths for their respective names one may adjust font size via monthMarkSize property.
-]=[]
 
 ### Note
 
 Calendar was built atop Popup module utilizing predefined Props thus allowing various effects achieved through properties passed into Popup object itself e.g., radius style change demonstrated via sample code snippet provided hereunder.
 
 Calendar's Confirm Button uses Button Component enabling customization options available through button parameter - refer to examples provided below.
+
+## Without Popup
+
+By default, Calendar uses Popup to display. If you need to render the calendar directly on the page, you can set popup to null. The calendar will be rendered inline without popping up, which is suitable for scenarios where you need to embed the calendar into the page layout.
+
+## Month Card Style
+
+When the monthCard property is true, each month will be wrapped and displayed using the Card component. You can customize the card style by passing the card parameter, such as setting dashed borders, theme background colors, etc. Please refer to the examples.

docs/mds/components/calendar/version.md

@@ -1,3 +1,15 @@
+## 2.0.0
+
+- [!tag|A|0|] `popup` 支持传 `null`，可直接在页面内展示。
+- [!tag|A|0|] 新增 `card` 属性，支持通过 Card 配置月份卡片。
+- [!tag|A|0|] 新增 `initSelectedDates` 属性，支持初始化已选日期。
+- [!tag|O|0|] `radius` 选项补充更多等级并调整默认值。
+
+## 1.3.0
+
+- [!tag|A|0|]`popup` 属性支持传入 `null`，不使用弹出层直接展示日历。
+- [!tag|A|0|]新增 `initSelectedDates` 属性，支持初始化时设置已选日期。
+
 ## 1.0.3
 
 - [!tag|A|0|]新增 `clear` 属性，关闭时可保留已选日期。

docs/mds/components/calendar/version_en.md

@@ -1,3 +1,8 @@
+## 1.3.0
+
+- [!tag|A|0|]`popup` property supports `null` to display calendar without popup.
+- [!tag|A|0|]Add `initSelectedDates` property to set initially selected dates.
+
 ## 1.0.3
 
 - [!tag|A|0|]Add `clear` property, keep the selected date when closed.

docs/mds/components/card/api.md

@@ -0,0 +1,35 @@
+## Card Props
+
+| 名称        | 类型                                                   | 默认值    | 必传 | 说明                                        |
+| ----------- | ------------------------------------------------------ | --------- | ---- | ------------------------------------------- |
+| bg          | `'surface'\|'gray'\|'theme'`                                       | `'surface'` | N    | 背景类型：纯色/灰色透明/主题色透明。        |
+| radius      | `'none'\|'sm'\|'md'\|'lg'\|'xl'\|'2xl'\|'3xl'\|'4xl'\|''` | `''`        | N    | 圆角大小，默认使用 CSS 变量 `--radius-box`。|
+| shadow      | `'none'\|'xs'\|'sm'\|'md'\|'lg'\|'xl'\|'2xl'`          | `'sm'`    | N    | 阴影大小。                                  |
+| border      | `'none'\|'solid'\|'dashed'\|'dotted'`                  | `'none'`  | N    | 边框风格。                                  |
+| borderWidth | `'0'\|'1'\|'2'\|'4'`                                   | `'1'`     | N    | 边框粗细（border 不为 none 时生效）。       |
+| mx          | `'0'\|'1'\|'2'\|'3'\|'4'\|'6'\|'8'`                    | `'2'`     | N    | 左右外边距。                                |
+| my          | `'0'\|'1'\|'2'\|'3'\|'4'\|'6'\|'8'`                    | `'2'`     | N    | 上下外边距。                                |
+| p           | `'0'\|'1'\|'2'\|'3'\|'4'\|'6'\|'8'`                    | `'4'`     | N    | 内容区内边距（px 和 py 都未设置时生效）。   |
+| px          | `'0'\|'1'\|'2'\|'3'\|'4'\|'6'\|'8'`                    | -         | N    | 内容区左右内边距（设置后 p 失效）。         |
+| py          | `'0'\|'1'\|'2'\|'3'\|'4'\|'6'\|'8'`                    | -         | N    | 内容区上下内边距（设置后 p 失效）。         |
+| overflow    | `boolean`                                              | `true`    | N    | 是否溢出隐藏（保持圆角裁剪效果）。          |
+| headerLine  | `boolean`                                              | `true`    | N    | 头部与内容之间是否显示分隔线。              |
+| footerLine  | `boolean`                                              | `true`    | N    | 内容与底部之间是否显示分隔线。              |
+| injClass    | `string`                                               | `''`      | N    | 注入卡片容器的 CSS 名称，可自定义背景等。   |
+| headerClass | `string`                                               | `''`      | N    | 注入头部区域的 CSS 名称。                   |
+| bodyClass   | `string`                                               | `''`      | N    | 注入内容区域的 CSS 名称。                   |
+| footerClass | `string`                                               | `''`      | N    | 注入底部区域的 CSS 名称。                   |
+
+## Card Events
+
+| 名称    | 类型         | 参数 | 描述             |
+| ------- | ------------ | ---- | ---------------- |
+| onclick | `() => void` | -    | 点击卡片时触发。 |
+
+## Card Snippets
+
+| 名称     | 类型                                                                | 参数 | 说明               |
+| -------- | ------------------------------------------------------------------- | ---- | ------------------ |
+| header   | [`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | -    | 卡片头部内容。 |
+| children | [`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | -    | 卡片主体内容。 |
+| footer   | [`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | -    | 卡片底部内容。 |

docs/mds/components/card/api_en.md

@@ -0,0 +1,35 @@
+## Card Props
+
+| Name        | Type                                                   | Default   | Required | Description                                              |
+| ----------- | ------------------------------------------------------ | --------- | -------- | -------------------------------------------------------- |
+| bg          | `'surface'\|'gray'\|'theme'`                                       | `'surface'` | N        | Background type: solid/gray transparent/theme transparent. |
+| radius      | `'none'\|'sm'\|'md'\|'lg'\|'xl'\|'2xl'\|'3xl'\|'4xl'\|''` | `''`        | N        | Border radius size, uses CSS variable `--radius-box` by default. |
+| shadow      | `'none'\|'xs'\|'sm'\|'md'\|'lg'\|'xl'\|'2xl'`          | `'sm'`    | N        | Shadow size.                                             |
+| border      | `'none'\|'solid'\|'dashed'\|'dotted'`                  | `'none'`  | N        | Border style.                                            |
+| borderWidth | `'0'\|'1'\|'2'\|'4'`                                   | `'1'`     | N        | Border width (effective when border is not none).        |
+| mx          | `'0'\|'1'\|'2'\|'3'\|'4'\|'6'\|'8'`                    | `'2'`     | N        | Horizontal margin.                                       |
+| my          | `'0'\|'1'\|'2'\|'3'\|'4'\|'6'\|'8'`                    | `'2'`     | N        | Vertical margin.                                         |
+| p           | `'0'\|'1'\|'2'\|'3'\|'4'\|'6'\|'8'`                    | `'4'`     | N        | Body padding (effective when px and py are not set).     |
+| px          | `'0'\|'1'\|'2'\|'3'\|'4'\|'6'\|'8'`                    | -         | N        | Body horizontal padding (overrides p when set).          |
+| py          | `'0'\|'1'\|'2'\|'3'\|'4'\|'6'\|'8'`                    | -         | N        | Body vertical padding (overrides p when set).            |
+| overflow    | `boolean`                                              | `true`    | N        | Whether to clip overflow (maintains rounded corner clip). |
+| headerLine  | `boolean`                                              | `true`    | N        | Whether to show divider line between header and body.    |
+| footerLine  | `boolean`                                              | `true`    | N        | Whether to show divider line between body and footer.    |
+| injClass    | `string`                                               | `''`      | N        | Injected CSS class for card container, can customize bg. |
+| headerClass | `string`                                               | `''`      | N        | Injected CSS class for header area.                      |
+| bodyClass   | `string`                                               | `''`      | N        | Injected CSS class for body area.                        |
+| footerClass | `string`                                               | `''`      | N        | Injected CSS class for footer area.                      |
+
+## Card Events
+
+| Name    | Type         | Params | Description                     |
+| ------- | ------------ | ------ | ------------------------------- |
+| onclick | `() => void` | -      | Triggered when card is clicked. |
+
+## Card Snippets
+
+| Name     | Type                                                                | Params | Description              |
+| -------- | ------------------------------------------------------------------- | ------ | ------------------------ |
+| header   | [`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | -      | Card header content. |
+| children | [`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | -      | Card body content.   |
+| footer   | [`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | -      | Card footer content. |

docs/mds/components/card/guide.md

@@ -0,0 +1,62 @@
+## 基础用法
+
+Card 组件是一个通用的容器组件，用于将内容组织在一个具有圆角、阴影和边框的卡片容器中。将需要展示的内容作为默认 Snippet 传入即可。
+
+## 背景类型
+
+Card 组件提供了三种背景类型：
+
+- **surface**：表面背景（默认），亮色模式为白色，暗黑模式为深灰色
+- **gray**：灰色透明背景，与页面背景形成轻微区分
+- **theme**：主题色透明背景，带有轻微的主题色
+
+如果需要更多自定义背景，可以通过 `injClass` 属性注入自定义 CSS 类名。
+
+## 预设区域
+
+Card 组件提供了三个预设区域：
+
+- **header**：头部区域，通常用于展示标题、操作按钮等
+- **children**：主体内容区域，用于展示卡片的主要内容
+- **footer**：底部区域，通常用于展示操作按钮、统计信息等
+
+这三个区域都是可选的，可以根据实际需求灵活组合使用。
+
+## 分隔线
+
+默认情况下，头部与主体内容之间、主体内容与底部之间会显示分隔线。可以通过 `headerLine` 和 `footerLine` 属性来控制是否显示分隔线。
+
+## 圆角配置
+
+通过 `radius` 属性可以配置卡片的圆角大小，支持从 `none`（无圆角）到 `full`（完全圆角）的多种选项。
+
+## 阴影配置
+
+通过 `shadow` 属性可以配置卡片的阴影效果，支持从 `none`（无阴影）到 `2xl`（特大阴影）的多种选项。阴影在暗黑模式下会自动调整为适配的样式。
+
+## 内边距配置
+
+- 使用 `p` 属性可以统一设置主体内容区域四个方向的内边距
+- 使用 `px` 和 `py` 属性可以分别设置水平和垂直方向的内边距
+- 当设置了 `px` 或 `py` 时，`p` 属性将不生效
+
+## 边框配置
+
+- 使用 `border` 属性配置边框风格：`solid`（实线）、`dashed`（虚线）、`dotted`（点线）
+- 使用 `borderWidth` 属性配置边框粗细
+- 当 `border` 为 `none` 时，边框相关配置不生效
+
+## 可点击卡片
+
+当传入 `onclick` 事件处理函数时，卡片会渲染为 `button` 元素，具有可点击的交互效果。
+
+## CSS 注入
+
+Card 组件提供了多个 CSS 注入属性，可以向不同区域注入自定义样式：
+
+- `injClass`：注入卡片容器的样式
+- `headerClass`：注入头部区域的样式
+- `bodyClass`：注入主体内容区域的样式
+- `footerClass`：注入底部区域的样式
+
+若注入的 class 没生效，请在注入的 class 名称前添加 `!`，可参考 [Tailwind Important modifier](https://tailwindcss.com/docs/configuration#important-modifier)。

docs/mds/components/card/guide_en.md

@@ -0,0 +1,62 @@
+## Basic Usage
+
+The Card component is a versatile container component used to organize content within a card container with rounded corners, shadow, and border. Simply pass the content to be displayed as the default Snippet.
+
+## Background Type
+
+The Card component provides three background types:
+
+- **surface**: Surface background (default), white in light mode, dark gray in dark mode
+- **gray**: Gray transparent background, slightly distinguishes from the page background
+- **theme**: Theme transparent background, with a subtle theme color
+
+For more custom backgrounds, you can inject custom CSS class names through the `injClass` property.
+
+## Preset Areas
+
+The Card component provides three preset areas:
+
+- **header**: Header area, typically used for displaying titles, action buttons, etc.
+- **children**: Main content area, used for displaying the primary content of the card
+- **footer**: Footer area, typically used for displaying action buttons, statistics, etc.
+
+All three areas are optional and can be flexibly combined according to actual needs.
+
+## Divider Lines
+
+By default, divider lines are displayed between the header and body content, and between the body content and footer. You can control whether to show divider lines through the `headerLine` and `footerLine` properties.
+
+## Radius Configuration
+
+The `radius` property can be used to configure the border radius of the card, supporting various options from `none` (no radius) to `full` (fully rounded).
+
+## Shadow Configuration
+
+The `shadow` property can be used to configure the shadow effect of the card, supporting various options from `none` (no shadow) to `2xl` (extra large shadow). The shadow will automatically adjust to a suitable style in dark mode.
+
+## Padding Configuration
+
+- Use the `p` property to uniformly set padding for the body content area in all four directions
+- Use the `px` and `py` properties to separately set horizontal and vertical padding
+- When `px` or `py` is set, the `p` property will not take effect
+
+## Border Configuration
+
+- Use the `border` property to configure border style: `solid`, `dashed`, `dotted`
+- Use the `borderWidth` property to configure border thickness
+- When `border` is `none`, border-related configurations will not take effect
+
+## Clickable Card
+
+When an `onclick` event handler is provided, the card will render as a `button` element with clickable interaction.
+
+## CSS Injection
+
+The Card component provides multiple CSS injection properties to inject custom styles into different areas:
+
+- `injClass`: Inject styles into the card container
+- `headerClass`: Inject styles into the header area
+- `bodyClass`: Inject styles into the body content area
+- `footerClass`: Inject styles into the footer area
+
+If the injected class name does not take effect, add a `!` before the class name, as demonstrated in the [Tailwind Important Modifier](https://tailwindcss.com/docs/configuration#important-modifier).

docs/mds/components/cell/api.md

@@ -11,7 +11,7 @@
 | line         | `boolean`                                                         | `false`   | N    | 是否显示底部分割线。   |
 | my           | `'0'\|'1'\|'2'\|'3'\|'4'\|'6'\|'8'`                               | `'4'`     | N    | 上下间距。             |
 | mx           | `'0'\|'1'\|'2'\|'3'\|'4'\|'6'\|'8'`                               | `'2'`     | N    | 左右间距。             |
-| radius       | `'none'\|'sm'\|'md'\|'lg'\|'xl'\|'2xl'\|'full'`                   | `'lg'`    | N    | 圆角风格。             |
+| radius       | `'none'\|'sm'\|'md'\|'lg'\|'xl'\|'2xl'\|'3xl'\|'4xl'\|''` | `''`      | N    | 圆角风格。             |
 | switchActive | `boolean`                                                         | `false`   | N    | 开关状态。             |
 | shadow       | `'none'\|'xs'\|'sm'\|'md'\|'lg'\|'xl'\|'2xl'`                     | `'xs'`    | N    | 阴影风格。             |
 | injClass     | `string`                                                          | `''`      | N    | 注入 CSS 名称。        |
@@ -38,7 +38,7 @@
 | ------ | ----------------------------------------------- | ------ | ---- | ---------- |
 | my     | `'0'\|'1'\|'2'\|'3'\|'4'\|'6'\|'8'`             | `'4'`  | N    | 上下间距。 |
 | mx     | `'0'\|'1'\|'2'\|'3'\|'4'\|'6'\|'8'`             | `'2'`  | N    | 左右间距。 |
-| radius | `'none'\|'sm'\|'md'\|'lg'\|'xl'\|'2xl'\|'full'` | `'lg'` | N    | 圆角风格。 |
+| radius | `'none'\|'sm'\|'md'\|'lg'\|'xl'\|'2xl'\|'3xl'\|'4xl'\|''` | `''`   | N    | 圆角风格。 |
 | shadow | `'none'\|'xs'\|'sm'\|'md'\|'lg'\|'xl'\|'2xl'`   | `'xs'` | N    | 阴影风格。 |
 
 ## CellGroup Snippets

docs/mds/components/cell/api_en.md

@@ -11,7 +11,7 @@
 | line         | `boolean`                                                         | `false`   | N        | Show bottom divider.         |
 | my           | `'0'\|'1'\|'2'\|'3'\|'4'\|'6'\|'8'`                               | `'4'`     | N        | Vertical margin.             |
 | mx           | `'0'\|'1'\|'2'\|'3'\|'4'\|'6'\|'8'`                               | `'2'`     | N        | Horizontal margin.           |
-| radius       | `'none'\|'base'\|'md'\|'lg'\|'xl'\|'2xl'\|'full'`                 | `'lg'`    | N        | Border radius style.         |
+| radius       | `'none'\|'sm'\|'md'\|'lg'\|'xl'\|'2xl'\|'3xl'\|'4xl'\|''` | `''`      | N        | Border radius style.         |
 | switchActive | `boolean`                                                         | `false`   | N        | Switch state.                |
 | shadow       | `'none'\|'xs'\|'sm'\|'md'\|'lg'\|'xl'\|'2xl'`                   | `'xs'`    | N        | Shadow style.                |
 | injClass     | `string`                                                          | `''`      | N        | Inject CSS class name.       |
@@ -38,7 +38,7 @@
 | ------ | ------------------------------------------------- | ------- | -------- | ------------------ |
 | my     | `'0'\|'1'\|'2'\|'3'\|'4'\|'6'\|'8'`               | `'4'`   | N        | Vertical margin.   |
 | mx     | `'0'\|'1'\|'2'\|'3'\|'4'\|'6'\|'8'`               | `'2'`   | N        | Horizontal margin. |
-| radius | `'none'\|'base'\|'md'\|'lg'\|'xl'\|'2xl'\|'full'` | `'lg'`  | N        | Border radius.     |
+| radius | `'none'\|'sm'\|'md'\|'lg'\|'xl'\|'2xl'\|'3xl'\|'4xl'\|''` | `''`    | N        | Border radius.     |
 | shadow | `'none'\|'xs'\|'sm'\|'md'\|'lg'\|'xl'\|'2xl'`     | `'xs'`  | N        | Shadow style.      |
 
 ## CellGroup Snippets

docs/mds/components/cell/guide.md

@@ -39,3 +39,11 @@ Cell 组件支持组合使用，可以向 CellGroup 传入 Cell 来实现。为
 ## 自定义
 
 使用上下左右间距和顶部底部圆角参数，可以配置出多种 Cell 风格，如果还不能满足，可以使用注入 CSS（injClass）来实现更多自定义的样式，请参考示例。
+
+## 左滑操作
+
+Cell 组件支持左滑操作功能，通过 `swipeActions` 参数传入操作项数组即可实现，操作项最多支持 4 个。
+
+每个操作项支持 `text`（文字）、`icon`（图标）、`state`（背景色状态）和 `onclick`（点击回调）属性。`state` 支持预设的 `'theme'`、`'success'`、`'warning'`、`'error'`、`'info'` 或自定义颜色值。
+
+设置 `swipeOpen` 为 `true` 可使滑动操作初始展开。点击操作项后会自动关闭滑动。

docs/mds/components/cell/guide_en.md

@@ -39,3 +39,11 @@ Cell component supports combination usage by passing Cells to CellGroup. To avoi
 ## Customization
 
 Using vertical and horizontal margin parameters and top/bottom border radius parameters, you can configure various Cell styles. If these still don't meet your needs, you can use injected CSS (injClass) to achieve more custom styles, please refer to examples.
+
+## Swipe Actions
+
+Cell component supports swipe actions by passing an action array through the `swipeActions` parameter. Maximum 4 action items are supported.
+
+Each action item supports `text`, `icon`, `state` (background color state), and `onclick` (click callback) properties. `state` supports preset values `'theme'`, `'success'`, `'warning'`, `'error'`, `'info'` or custom color values.
+
+Set `swipeOpen` to `true` to initially open the swipe actions. Actions automatically close after clicking an action item.

docs/mds/components/cell/version.md

@@ -1,3 +1,7 @@
+## 2.0.0
+
+- [!tag|O|0|] Cell 与 CellGroup 的 `radius` 选项补充 `3xl`、`4xl` 与空值，默认圆角改为主题圆角。
+
 ## 1.0.3
 
 - [!tag|B|3|]修复右侧箭头未垂直居中问题。

docs/mds/components/charRoll/api.md

@@ -0,0 +1,109 @@
+## CharRoll Props
+
+| 名称 | 类型 | 默认值 | 必传 | 说明 |
+| --- | --- | --- | --- | --- |
+| value | `string \| number` | `''` | N | 显示的值。 |
+| duration | `number` | `1000` | N | 动画持续时间，单位：ms。 |
+| delay | `number` | `0` | N | 动画延迟时间，单位：ms。 |
+| stagger | `number` | `50` | N | 每个字符的错开延迟，单位：ms。 |
+| direction | `'up' \| 'down'` | `'up'` | N | 滚动方向。 |
+| height | `number` | `40` | N | 字符高度，单位：px。 |
+| separator | `boolean` | `false` | N | 是否显示千分位分隔符。 |
+| decimal | `number` | `-` | N | 小数位数。 |
+| prefix | `string` | `''` | N | 前缀。 |
+| suffix | `string` | `''` | N | 后缀。 |
+| charSet | `string` | `-` | N | 自定义字符集，优先级高于 preset。 |
+| preset | `CharRollPreset` | `'number'` | N | 预设字符集。 |
+| loops | `number` | `1` | N | 循环圈数。 |
+| autoStart | `boolean` | `true` | N | 是否自动开始动画。 |
+| loop | `boolean` | `false` | N | 是否循环播放。 |
+| loopInterval | `number` | `3000` | N | 循环间隔，单位：ms。 |
+| easing | [`SvelteEasing`](https://svelte.dev/docs#run-time-svelte-easing) | `'cubicOut'` | N | 缓动函数，共 31 个值，参考 [svelte/easing](https://svelte.dev/docs#run-time-svelte-easing)。 |
+| radius | `'none'\|'xs'\|'sm'\|'md'\|'lg'\|'xl'\|'2xl'\|'full'\|''` | `'sm'` | N | 圆角样式。 |
+| bg | `'none' \| 'surface' \| 'gray' \| 'theme'` | `'none'` | N | 背景色。 |
+| gap | `'0' \| '1' \| '2' \| '3' \| '4'` | `'1'` | N | 字符间距。 |
+| fontSize | `'xs' \| 'sm' \| 'base' \| 'lg' \| 'xl' \| '2xl' \| '3xl' \| '4xl'` | `'xl'` | N | 字体大小。 |
+| fontWeight | `'normal' \| 'medium' \| 'semibold' \| 'bold'` | `'bold'` | N | 字体粗细。 |
+| injClass | `string` | `''` | N | 注入 CSS 类。 |
+| charClass | `string` | `''` | N | 字符容器 CSS 类。 |
+
+## CharRoll Events
+
+| 名称 | 类型 | 参数 | 说明 |
+| --- | --- | --- | --- |
+| onstart | `() => void` | - | 动画开始时触发。 |
+| oncomplete | `() => void` | - | 动画完成时触发。 |
+| onchange | `(value: string) => void` | value: 当前值 | 值变化时触发。 |
+
+## CharRoll Snippets
+
+| 名称 | 类型 | 参数 | 说明 |
+| --- | --- | --- | --- |
+| children | [`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | char: string, index: number | 自定义字符渲染。 |
+
+## CharRoll Methods
+
+通过 `bind:this` 获取组件实例，可调用以下方法：
+
+| 方法 | 说明 |
+| --- | --- |
+| start() | 开始动画。 |
+| pause() | 暂停动画，自动对齐到完整字符位置。 |
+| reset() | 重置动画。 |
+
+## CharRollPreset
+
+| 值 | 字符集 | 说明 |
+| --- | --- | --- |
+| `'number'` | `0123456789` | 数字（默认）。 |
+| `'letter'` | `A-Za-z` | 大小写字母。 |
+| `'letterUpper'` | `A-Z` | 大写字母。 |
+| `'letterLower'` | `a-z` | 小写字母。 |
+| `'alphanumeric'` | `0-9A-Za-z` | 字母数字混合。 |
+| `'hex'` | `0-9a-f` | 十六进制（小写）。 |
+| `'hexUpper'` | `0-9A-F` | 十六进制（大写）。 |
+| `'binary'` | `01` | 二进制。 |
+| `'octal'` | `0-7` | 八进制。 |
+
+## SmallAreaRadius
+
+```typescript
+type SmallAreaRadius = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full' | '';
+```
+
+## SvelteEasing
+
+```typescript
+type SvelteEasing =
+    | 'backIn'
+    | 'backInOut'
+    | 'backOut'
+    | 'bounceIn'
+    | 'bounceInOut'
+    | 'bounceOut'
+    | 'circIn'
+    | 'circInOut'
+    | 'circOut'
+    | 'cubicIn'
+    | 'cubicInOut'
+    | 'cubicOut'
+    | 'elasticIn'
+    | 'elasticInOut'
+    | 'elasticOut'
+    | 'expoIn'
+    | 'expoInOut'
+    | 'expoOut'
+    | 'linear'
+    | 'quadIn'
+    | 'quadInOut'
+    | 'quadOut'
+    | 'quartIn'
+    | 'quartInOut'
+    | 'quartOut'
+    | 'quintIn'
+    | 'quintInOut'
+    | 'quintOut'
+    | 'sineIn'
+    | 'sineInOut'
+    | 'sineOut';
+```

docs/mds/components/charRoll/api_en.md

@@ -0,0 +1,109 @@
+## CharRoll Props
+
+| Property | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| value | `string \| number` | `''` | N | Value to display. |
+| duration | `number` | `1000` | N | Animation duration in ms. |
+| delay | `number` | `0` | N | Animation delay in ms. |
+| stagger | `number` | `50` | N | Stagger delay per character in ms. |
+| direction | `'up' \| 'down'` | `'up'` | N | Scroll direction. |
+| height | `number` | `40` | N | Character height in px. |
+| separator | `boolean` | `false` | N | Show thousand separator. |
+| decimal | `number` | `-` | N | Decimal places. |
+| prefix | `string` | `''` | N | Prefix. |
+| suffix | `string` | `''` | N | Suffix. |
+| charSet | `string` | `-` | N | Custom character set, priority over preset. |
+| preset | `CharRollPreset` | `'number'` | N | Preset character set. |
+| loops | `number` | `1` | N | Number of loops. |
+| autoStart | `boolean` | `true` | N | Auto start animation. |
+| loop | `boolean` | `false` | N | Loop animation. |
+| loopInterval | `number` | `3000` | N | Loop interval in ms. |
+| easing | [`SvelteEasing`](https://svelte.dev/docs#run-time-svelte-easing) | `'cubicOut'` | N | Easing function, 31 values available, see [svelte/easing](https://svelte.dev/docs#run-time-svelte-easing). |
+| radius | `'none'\|'xs'\|'sm'\|'md'\|'lg'\|'xl'\|'2xl'\|'full'\|''` | `'sm'` | N | Border radius. |
+| bg | `'none' \| 'surface' \| 'gray' \| 'theme'` | `'none'` | N | Background color. |
+| gap | `'0' \| '1' \| '2' \| '3' \| '4'` | `'1'` | N | Character gap. |
+| fontSize | `'xs' \| 'sm' \| 'base' \| 'lg' \| 'xl' \| '2xl' \| '3xl' \| '4xl'` | `'xl'` | N | Font size. |
+| fontWeight | `'normal' \| 'medium' \| 'semibold' \| 'bold'` | `'bold'` | N | Font weight. |
+| injClass | `string` | `''` | N | Inject CSS class. |
+| charClass | `string` | `''` | N | Character container CSS class. |
+
+## CharRoll Events
+
+| Event | Type | Parameters | Description |
+| --- | --- | --- | --- |
+| onstart | `() => void` | - | Triggered when animation starts. |
+| oncomplete | `() => void` | - | Triggered when animation completes. |
+| onchange | `(value: string) => void` | value: current value | Triggered when value changes. |
+
+## CharRoll Snippets
+
+| Name | Type | Parameters | Description |
+| --- | --- | --- | --- |
+| children | [`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | char: string, index: number | Custom character render. |
+
+## CharRoll Methods
+
+Get component instance via `bind:this` to call these methods:
+
+| Method | Description |
+| --- | --- |
+| start() | Start animation. |
+| pause() | Pause animation, auto snap to complete character position. |
+| reset() | Reset animation. |
+
+## CharRollPreset
+
+| Value | Character Set | Description |
+| --- | --- | --- |
+| `'number'` | `0123456789` | Numbers (default). |
+| `'letter'` | `A-Za-z` | Upper and lower case letters. |
+| `'letterUpper'` | `A-Z` | Uppercase letters. |
+| `'letterLower'` | `a-z` | Lowercase letters. |
+| `'alphanumeric'` | `0-9A-Za-z` | Alphanumeric. |
+| `'hex'` | `0-9a-f` | Hexadecimal (lowercase). |
+| `'hexUpper'` | `0-9A-F` | Hexadecimal (uppercase). |
+| `'binary'` | `01` | Binary. |
+| `'octal'` | `0-7` | Octal. |
+
+## SmallAreaRadius
+
+```typescript
+type SmallAreaRadius = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full' | '';
+```
+
+## SvelteEasing
+
+```typescript
+type SvelteEasing =
+    | 'backIn'
+    | 'backInOut'
+    | 'backOut'
+    | 'bounceIn'
+    | 'bounceInOut'
+    | 'bounceOut'
+    | 'circIn'
+    | 'circInOut'
+    | 'circOut'
+    | 'cubicIn'
+    | 'cubicInOut'
+    | 'cubicOut'
+    | 'elasticIn'
+    | 'elasticInOut'
+    | 'elasticOut'
+    | 'expoIn'
+    | 'expoInOut'
+    | 'expoOut'
+    | 'linear'
+    | 'quadIn'
+    | 'quadInOut'
+    | 'quadOut'
+    | 'quartIn'
+    | 'quartInOut'
+    | 'quartOut'
+    | 'quintIn'
+    | 'quintInOut'
+    | 'quintOut'
+    | 'sineIn'
+    | 'sineInOut'
+    | 'sineOut';
+```

docs/mds/components/charRoll/guide.md

@@ -0,0 +1,101 @@
+## 基本用法
+
+通过 `value` 属性设置要显示的值，可以是数字或字符串。组件默认会自动开始滚动动画。
+
+## 预设字符集
+
+通过 `preset` 属性选择预设的字符集：
+
+- `'number'`：数字 0-9（默认）
+- `'letter'`：大小写字母 A-Za-z
+- `'letterUpper'`：大写字母 A-Z
+- `'letterLower'`：小写字母 a-z
+- `'alphanumeric'`：字母数字混合
+- `'hex'`：十六进制 0-9a-f
+- `'hexUpper'`：十六进制大写 0-9A-F
+- `'binary'`：二进制 01
+- `'octal'`：八进制 0-7
+
+## 自定义字符集
+
+通过 `charSet` 属性可以完全自定义滚动的字符集，优先级高于 `preset`。适用于表情符号、中文字符等特殊场景。
+
+注意：对于组合字符（如 7⃣ 等由多个 Unicode 码点组成的字符），建议使用单一码点的字符，以避免字符拆分问题。
+
+## 金额格式
+
+通过 `separator` 属性开启千分位分隔符，通过 `decimal` 属性设置小数位数。可以结合 `prefix` 和 `suffix` 属性添加货币符号和单位。
+
+## 滚动方向
+
+通过 `direction` 属性设置滚动方向：
+
+- `'up'`：向上滚动（默认）
+- `'down'`：向下滚动
+
+## 循环圈数
+
+通过 `loops` 属性设置动画滚动的圈数。增加圈数可以让动画更加华丽，适合抽奖、老虎机等场景。
+
+## 错开动画
+
+通过 `stagger` 属性设置每个字符的动画延迟时间（毫秒），可以产生波浪式的动画效果。设置为 `0` 则所有字符同时滚动。
+
+## 手动控制
+
+设置 `autoStart` 为 `false` 可以禁用自动开始。通过 `bind:this` 获取组件实例后，可以调用以下方法手动控制动画：
+
+- `start()`：开始动画
+- `pause()`：暂停动画（自动对齐到完整字符位置）
+- `reset()`：重置动画
+
+## 循环播放
+
+设置 `loop` 为 `true` 可以开启循环播放，通过 `loopInterval` 设置循环间隔时间。
+
+## 缓动函数
+
+滚动动画的缓动类型由 `easing` 属性决定，默认值为 `cubicOut`，可选值有 31 个（一个线性动画 `linear` 与下面 30 种非线性动画），具体值可参考 [svelte/easing](https://svelte.dev/docs#run-time-svelte-easing)，具体非线性动效可参考 [ease visualiser](https://svelte.dev/examples/easing)。动画持续时间由 `duration` 属性决定。
+
+| ease    | in        | out        | inOut        |
+| ------- | --------- | ---------- | ------------ |
+| back    | backIn    | backOut    | backInOut    |
+| bounce  | bounceIn  | bounceOut  | bounceInOut  |
+| circ    | circIn    | circOut    | circInOut    |
+| cubic   | cubicIn   | cubicOut   | cubicInOut   |
+| elastic | elasticIn | elasticOut | elasticInOut |
+| expo    | expoIn    | expoOut    | expoInOut    |
+| quad    | quadIn    | quadOut    | quadInOut    |
+| quart   | quartIn   | quartOut   | quartInOut   |
+| quint   | quintIn   | quintOut   | quintInOut   |
+| sine    | sineIn    | sineOut    | sineInOut    |
+
+其中 `backOut` 会产生回弹效果，`elasticOut` 会产生弹性效果，`bounceOut` 会产生弹跳效果，适合老虎机、抽奖等需要视觉冲击力的场景。
+
+## 自定义样式
+
+组件提供丰富的样式配置：
+
+- `height`：字符高度（像素）
+- `fontSize`：字体大小
+- `fontWeight`：字体粗细
+- `bg`：背景色
+- `radius`：圆角
+- `gap`：字符间距
+
+## 事件回调
+
+- `onstart`：动画开始时触发
+- `oncomplete`：动画完成时触发
+- `onchange`：值变化时触发
+
+## CSS 注入
+
+通过 `injClass` 参数可以向组件容器注入 CSS 类名，通过 `charClass` 可以向每个字符容器注入 CSS 类名。
+
+## 自定义渲染
+
+通过 `children` Snippet 可以完全自定义每个字符的渲染内容。Snippet 接收两个参数：
+
+- `char`：当前字符
+- `index`：字符索引

docs/mds/components/charRoll/guide_en.md

@@ -0,0 +1,101 @@
+## Basic Usage
+
+Set the value to display via the `value` property, which can be a number or string. The component will automatically start the rolling animation by default.
+
+## Preset Character Sets
+
+Select a preset character set via the `preset` property:
+
+- `'number'`: Digits 0-9 (default)
+- `'letter'`: Upper and lowercase letters A-Za-z
+- `'letterUpper'`: Uppercase letters A-Z
+- `'letterLower'`: Lowercase letters a-z
+- `'alphanumeric'`: Alphanumeric characters
+- `'hex'`: Hexadecimal 0-9a-f
+- `'hexUpper'`: Hexadecimal uppercase 0-9A-F
+- `'binary'`: Binary 01
+- `'octal'`: Octal 0-7
+
+## Custom Character Set
+
+Fully customize the character set via the `charSet` property, which takes priority over `preset`. Suitable for emoji, Chinese characters, and other special scenarios.
+
+Note: For combining characters (such as 7⃣ composed of multiple Unicode code points), it is recommended to use single code point characters to avoid character splitting issues.
+
+## Money Format
+
+Enable thousand separator with the `separator` property, and set decimal places with the `decimal` property. Combine with `prefix` and `suffix` properties to add currency symbols and units.
+
+## Scroll Direction
+
+Set the scroll direction via the `direction` property:
+
+- `'up'`: Scroll up (default)
+- `'down'`: Scroll down
+
+## Loops
+
+Set the number of animation loops via the `loops` property. Increasing loops makes the animation more spectacular, suitable for lottery and slot machine scenarios.
+
+## Stagger Animation
+
+Set the animation delay for each character via the `stagger` property (in milliseconds), creating a wave-like animation effect. Set to `0` for all characters to scroll simultaneously.
+
+## Manual Control
+
+Set `autoStart` to `false` to disable auto-start. Get the component instance via `bind:this` to call these methods:
+
+- `start()`: Start animation
+- `pause()`: Pause animation (auto snap to complete character position)
+- `reset()`: Reset animation
+
+## Loop Animation
+
+Set `loop` to `true` to enable loop playback, and set the loop interval via `loopInterval`.
+
+## Easing Function
+
+The easing type for the rolling animation is determined by the `easing` property, with a default value of `cubicOut`. There are 31 optional values (including a linear animation and 30 non-linear animations), specifically documented at [svelte/easing](https://svelte.dev/docs#run-time-svelte-easing), and the specific non-linear effects can be seen at the [ease visualizer](https://svelte.dev/examples/easing). The animation duration is determined by the `duration` property.
+
+| ease    | in        | out        | inOut        |
+| ------- | --------- | ---------- | ------------ |
+| back    | backIn    | backOut    | backInOut    |
+| bounce  | bounceIn  | bounceOut  | bounceInOut  |
+| circ    | circIn    | circOut    | circInOut    |
+| cubic   | cubicIn   | cubicOut   | cubicInOut   |
+| elastic | elasticIn | elasticOut | elasticInOut |
+| expo    | expoIn    | expoOut    | expoInOut    |
+| quad    | quadIn    | quadOut    | quadInOut    |
+| quart   | quartIn   | quartOut   | quartInOut   |
+| quint   | quintIn   | quintOut   | quintInOut   |
+| sine    | sineIn    | sineOut    | sineInOut    |
+
+Among them, `backOut` produces a bounce-back effect, `elasticOut` produces an elastic effect, and `bounceOut` produces a bouncing effect, suitable for slot machines, lotteries, and other scenarios requiring visual impact.
+
+## Custom Style
+
+The component provides rich style configurations:
+
+- `height`: Character height (pixels)
+- `fontSize`: Font size
+- `fontWeight`: Font weight
+- `bg`: Background color
+- `radius`: Border radius
+- `gap`: Character gap
+
+## Events
+
+- `onstart`: Triggered when animation starts
+- `oncomplete`: Triggered when animation completes
+- `onchange`: Triggered when value changes
+
+## CSS Injection
+
+Inject CSS class names to the component container via `injClass`, and to each character container via `charClass`.
+
+## Custom Rendering
+
+Fully customize each character's rendering content via the `children` Snippet. The Snippet receives two parameters:
+
+- `char`: Current character
+- `index`: Character index

docs/mds/components/checkbox/version.md

@@ -0,0 +1,4 @@
+## 2.0.0
+
+- [!tag|O|0|] 勾选图标改为使用 Icon 的 `state` 主题色，亮暗模式表现更一致。
+

docs/mds/components/codeInput/api.md

@@ -0,0 +1,34 @@
+## CodeInput Props
+
+| 名称            | 类型                                                                        | 默认值     | 必传 | 说明                                                                            |
+| --------------- | --------------------------------------------------------------------------- | ---------- | ---- | ------------------------------------------------------------------------------- |
+| value           | `string`                                                                    | `''`       | N    | 输入值（bindable）。                                                            |
+| length          | `number`                                                                    | `6`        | N    | 输入框长度。                                                                    |
+| mask            | `boolean\|string`                                                           | `false`    | N    | 掩码，true 显示圆点，字符串显示该字符。                                         |
+| gutter          | `'0'\|'1'\|'2'\|'3'\|'4'`                                                   | `'2'`      | N    | 格子间距。                                                                      |
+| focused         | `boolean`                                                                   | `false`    | N    | 是否聚焦（bindable）。                                                          |
+| type            | `'number'\|'text'`                                                          | `'number'` | N    | 输入类型。                                                                      |
+| inputMode       | `'text'\|'decimal'\|'email'\|'none'\|'numeric'\|'search'\|'tel'\|'url'\|''` | `''`       | N    | 原生键盘类型，为空时根据 type 自动选择。                                        |
+| native          | `boolean`                                                                   | `false`    | N    | 是否使用原生键盘。                                                              |
+| info            | `string`                                                                    | `''`       | N    | 提示信息。                                                                      |
+| errorInfo       | `string`                                                                    | `''`       | N    | 错误提示。                                                                      |
+| radius          | `'none'\|'xs'\|'sm'\|'md'\|'lg'\|'xl'\|'2xl'\|'full'\|''`                        | `''`       | N    | 圆角。                                                                          |
+| cellSize        | `'sm'\|'md'\|'lg'`                                                          | `'md'`     | N    | 单元格大小。                                                                    |
+| cellStyle       | `'box'\|'line'`                                                             | `'box'`    | N    | 单元格样式。                                                                    |
+| cellBg          | `'surface'\|'gray'\|'theme'`                                                | `'gray'`   | N    | 单元格背景。                                                                    |
+| cellBorder      | `'none'\|'solid'\|'dashed'\|'dotted'`                                       | `'solid'`  | N    | 单元格边框样式。                                                                |
+| cursorStyle     | `'line'\|'underline'`                                                       | `'line'`   | N    | 光标样式。                                                                      |
+| cursorAnimation | `'pulse'\|'blink'`                                                          | `'blink'`  | N    | 光标动画。                                                                      |
+| keyboardVisible | `boolean`                                                                   | `false`    | N    | 键盘是否可见（bindable），控制光标是否闪烁。                                    |
+| autoClose       | `boolean`                                                                   | `false`    | N    | 输入完成后是否自动关闭键盘。                                                    |
+| autoScroll      | `boolean\|number`                                                           | `true`     | N    | 键盘弹出时自动滚动页面避免遮挡，true 使用默认高度（视口 40%），数值则使用该高度。 |
+| bold            | `boolean`                                                                   | `false`    | N    | 输入内容是否加大加粗显示。                                                      |
+| injClass        | `string`                                                                    | `''`       | N    | 注入 CSS。                                                                      |
+
+## CodeInput Events
+
+| 名称     | 类型                      | 参数              | 说明                                   |
+| -------- | ------------------------- | ----------------- | -------------------------------------- |
+| onfinish | `(value: string) => void` | value: 当前输入值 | 输入完成时触发。                       |
+| onclose  | `() => void`              | -                 | 键盘关闭时触发（autoClose 为 true 时）。 |
+| onfocus  | `() => void`              | -                 | 聚焦时触发。                           |

docs/mds/components/codeInput/api_en.md

@@ -0,0 +1,34 @@
+## CodeInput Props
+
+| Prop            | Type                                                                        | Default    | Description                                                                                        |
+| --------------- | --------------------------------------------------------------------------- | ---------- | -------------------------------------------------------------------------------------------------- |
+| value           | `string`                                                                    | `''`       | Input value (bindable)                                                                             |
+| length          | `number`                                                                    | `6`        | Input length                                                                                       |
+| mask            | `boolean\|string`                                                           | `false`    | Mask mode, true shows dot, string shows that character                                             |
+| gutter          | `'0'\|'1'\|'2'\|'3'\|'4'`                                                   | `'2'`      | Cell gutter                                                                                        |
+| focused         | `boolean`                                                                   | `false`    | Whether focused (bindable)                                                                         |
+| type            | `'number'\|'text'`                                                          | `'number'` | Input type                                                                                         |
+| inputMode       | `'text'\|'decimal'\|'email'\|'none'\|'numeric'\|'search'\|'tel'\|'url'\|''` | `''`       | Native keyboard type, auto-select based on type when empty                                         |
+| native          | `boolean`                                                                   | `false`    | Use native keyboard                                                                                |
+| info            | `string`                                                                    | `''`       | Info message                                                                                       |
+| errorInfo       | `string`                                                                    | `''`       | Error message                                                                                      |
+| radius          | `'none'\|'xs'\|'sm'\|'md'\|'lg'\|'xl'\|'2xl'\|'full'\|''`                        | `''`       | Border radius                                                                                      |
+| cellSize        | `'sm'\|'md'\|'lg'`                                                          | `'md'`     | Cell size                                                                                          |
+| cellStyle       | `'box'\|'line'`                                                             | `'box'`    | Cell style                                                                                         |
+| cellBg          | `'surface'\|'gray'\|'theme'`                                                | `'gray'`   | Cell background                                                                                    |
+| cellBorder      | `'none'\|'solid'\|'dashed'\|'dotted'`                                       | `'solid'`  | Cell border style                                                                                  |
+| cursorStyle     | `'line'\|'underline'`                                                       | `'line'`   | Cursor style                                                                                       |
+| cursorAnimation | `'pulse'\|'blink'`                                                          | `'blink'`  | Cursor animation                                                                                   |
+| keyboardVisible | `boolean`                                                                   | `false`    | Whether keyboard is visible (bindable), controls cursor blinking                                   |
+| autoClose       | `boolean`                                                                   | `false`    | Auto close keyboard after input complete                                                           |
+| autoScroll      | `boolean\|number`                                                           | `true`     | Auto scroll page when keyboard opens to avoid covering, true uses default height (40% viewport), number uses that height |
+| bold            | `boolean`                                                                   | `false`    | Whether to display input content in larger and bolder style                                        |
+| injClass        | `string`                                                                    | `''`       | Inject CSS class                                                                                   |
+
+## CodeInput Events
+
+| Event    | Parameters                | Description                                    |
+| -------- | ------------------------- | ---------------------------------------------- |
+| onfinish | `(value: string) => void` | Triggered when input is complete               |
+| onclose  | `() => void`              | Triggered when keyboard closes (if autoClose)  |
+| onfocus  | `() => void`              | Triggered when focused                         |

docs/mds/components/codeInput/guide.md

@@ -0,0 +1,52 @@
+## 介绍
+
+CodeInput 用于输入密码、验证码等场景。数字输入配合 NumKeyboard，字母输入配合 FullKeyboard。
+
+## 使用场景
+
+- 短信验证码、邮箱验证码
+- 支付密码、银行卡 PIN 码
+- 双因素认证码（TOTP）
+- 信用卡 CVV/CVC 安全码
+- 快递取件码、外卖取餐码
+- 礼品卡兑换码、邀请码
+- 软件激活码、序列号
+- 门禁密码、智能锁密码
+
+## 单元格样式
+
+通过 `cellStyle` 设置单元格样式：
+
+- `box`（默认）：方格模式，带背景和边框
+- `line`：线模式，仅底部有横线
+
+## 单元格背景
+
+通过 `cellBg` 设置单元格背景（仅方格模式有效）：
+
+- `surface`：使用 surface 背景色
+- `gray`（默认）：使用灰色半透明背景
+- `theme`：使用主题色半透明背景
+
+## 单元格边框
+
+通过 `cellBorder` 设置单元格边框样式（仅方格模式有效）：
+
+- `none`：无边框
+- `solid`（默认）：实线边框
+- `dashed`：虚线边框
+- `dotted`：点线边框
+
+## 自动关闭
+
+当 `autoClose` 为 `true` 时，输入完成（达到指定长度）后会自动关闭键盘并触发 `onclose` 事件。适用于验证码输入等场景，用户输入完成后无需手动点击完成按钮。
+
+## 自动滚动
+
+当 CodeInput 位于可视区域底部时，弹出键盘可能会遮挡输入区域。`autoScroll` 默认开启，会自动滚动页面确保输入区域可见。
+
+- `true`（默认）：使用视口高度 40% 作为键盘高度进行计算
+- `number`：使用指定数值作为键盘高度（单位：px）
+- `false`：禁用自动滚动
+
+注意：自动滚动功能需要页面有足够的滚动空间。请确保 CodeInput 下方有足够的内容或留白区域，使页面可以滚动到目标位置。