Browse Source

[stdf]Update Tailwind v4 for rounded

dufu1991 1 year ago
parent
commit
c5d22b4529
75 changed files with 457 additions and 451 deletions
  1. 1 1
      docs/mds/components/actionSheet/api.md
  2. 1 1
      docs/mds/components/actionSheet/api_en.md
  3. 1 1
      docs/mds/components/avatar/api.md
  4. 1 1
      docs/mds/components/avatar/api_en.md
  5. 10 10
      docs/mds/components/badge/api.md
  6. 10 10
      docs/mds/components/badge/api_en.md
  7. 1 1
      docs/mds/components/bottomSheet/api.md
  8. 1 1
      docs/mds/components/bottomSheet/api_en.md
  9. 1 1
      docs/mds/components/button/api.md
  10. 1 1
      docs/mds/components/button/api_en.md
  11. 1 1
      docs/mds/components/calendar/api.md
  12. 1 1
      docs/mds/components/calendar/api_en.md
  13. 11 11
      docs/mds/components/cell/api.md
  14. 10 10
      docs/mds/components/indexBar/api.md
  15. 1 1
      docs/mds/components/input/api.md
  16. 1 1
      docs/mds/components/numKeyboard/api.md
  17. 1 1
      docs/mds/components/numKeyboard/api_en.md
  18. 15 15
      docs/mds/components/pagination/api.md
  19. 15 15
      docs/mds/components/pagination/api_en.md
  20. 2 2
      docs/mds/components/placeholder/api.md
  21. 2 2
      docs/mds/components/placeholder/api_en.md
  22. 32 32
      docs/mds/components/popup/api.md
  23. 32 32
      docs/mds/components/popup/api_en.md
  24. 1 1
      docs/mds/components/progress/api.md
  25. 1 1
      docs/mds/components/progress/api_en.md
  26. 9 9
      docs/mds/components/skeleton/api.md
  27. 9 9
      docs/mds/components/skeleton/api_en.md
  28. 14 14
      docs/mds/components/slider/api.md
  29. 14 14
      docs/mds/components/slider/api_en.md
  30. 18 18
      docs/mds/components/stepper/api.md
  31. 18 18
      docs/mds/components/stepper/api_en.md
  32. 7 7
      docs/mds/components/steps/api.md
  33. 7 7
      docs/mds/components/steps/api_en.md
  34. 4 4
      docs/mds/components/swiper/api.md
  35. 3 3
      docs/mds/components/swiper/api_en.md
  36. 11 11
      docs/mds/components/switch/api.md
  37. 9 9
      docs/mds/components/switch/api_en.md
  38. 1 1
      docs/mds/components/tabs/api.md
  39. 1 1
      docs/mds/components/tabs/api_en.md
  40. 1 1
      docs/mds/components/toast/api.md
  41. 1 1
      docs/mds/components/toast/api_en.md
  42. 1 1
      packages/stdf/src/lib/components/actionSheet/ActionSheet.svelte
  43. 3 3
      packages/stdf/src/lib/components/avatar/Avatar.svelte
  44. 8 8
      packages/stdf/src/lib/components/avatar/Avatars.svelte
  45. 1 1
      packages/stdf/src/lib/components/badge/Badge.svelte
  46. 3 7
      packages/stdf/src/lib/components/bottomSheet/BottomSheet.svelte
  47. 4 16
      packages/stdf/src/lib/components/button/Button.svelte
  48. 5 5
      packages/stdf/src/lib/components/calendar/Calendar.svelte
  49. 1 1
      packages/stdf/src/lib/components/cell/Cell.svelte
  50. 1 1
      packages/stdf/src/lib/components/cell/CellGroup.svelte
  51. 8 8
      packages/stdf/src/lib/components/indexBar/IndexBar.svelte
  52. 5 5
      packages/stdf/src/lib/components/input/Input.svelte
  53. 1 1
      packages/stdf/src/lib/components/loading/loadings/oneColor/1_30.svelte
  54. 3 3
      packages/stdf/src/lib/components/numKeyboard/NumKeyboard.svelte
  55. 17 4
      packages/stdf/src/lib/components/pagination/Page.svelte
  56. 12 5
      packages/stdf/src/lib/components/pagination/Pagination.svelte
  57. 2 2
      packages/stdf/src/lib/components/placeholder/Placeholder.svelte
  58. 5 5
      packages/stdf/src/lib/components/popup/Popup.svelte
  59. 1 1
      packages/stdf/src/lib/components/progress/Progress.svelte
  60. 4 4
      packages/stdf/src/lib/components/skeleton/Skeleton.svelte
  61. 10 10
      packages/stdf/src/lib/components/slider/Slider.svelte
  62. 7 7
      packages/stdf/src/lib/components/stepper/Stepper.svelte
  63. 10 8
      packages/stdf/src/lib/components/steps/Steps.svelte
  64. 1 1
      packages/stdf/src/lib/components/swiper/Swiper.svelte
  65. 4 4
      packages/stdf/src/lib/components/switch/Switch.svelte
  66. 8 8
      packages/stdf/src/lib/components/tabs/Tab.svelte
  67. 4 4
      packages/stdf/src/lib/components/toast/Toast.svelte
  68. 24 24
      packages/stdf/src/lib/types/index.ts
  69. 1 1
      packages/stdf/src/routes/bottomSheet/en_US/+page.svelte
  70. 3 3
      packages/stdf/src/routes/checkbox/en_US/+page.svelte
  71. 3 3
      packages/stdf/src/routes/checkbox/zh_CN/+page.svelte
  72. 8 8
      packages/stdf/src/routes/components/ThemeSwitch.svelte
  73. 2 2
      packages/stdf/src/routes/progress/en_US/+page.svelte
  74. 3 3
      packages/stdf/src/routes/radio/en_US/+page.svelte
  75. 3 3
      packages/stdf/src/routes/radio/zh_CN/+page.svelte

+ 1 - 1
docs/mds/components/actionSheet/api.md

@@ -28,5 +28,5 @@
 | style     | `'normal'\|'theme'\|'danger'\|'disabled'` | `'normal'` | N    | 选项样式。     |
 | desc      | `string`                                  | `''`       | N    | 选项描述。     |
 | showImg   | `boolean`                                 | `false`    | N    | 是否显示图片。 |
-| imgRadius | `'none'\|'base'\|'full'\|'lg'`            | `'full'`   | N    | 图片圆角。     |
+| imgRadius | `'none'\|'sm'\|'full'\|'lg'`              | `'full'`   | N    | 图片圆角。     |
 | imgSrc    | `string`                                  | `''`       | N    | 图片地址。     |

+ 1 - 1
docs/mds/components/actionSheet/api_en.md

@@ -28,5 +28,5 @@
 | style     | `'normal'\|'theme'\|'danger'\|'disabled'` | `'normal'` | N        | Option style.          |
 | desc      | `string`                                  | `''`       | N        | Option description.    |
 | showImg   | `boolean`                                 | `false`    | N        | Whether to show image. |
-| imgRadius | `'none'\|'base'\|'full'\|'lg'`            | `'full'`   | N        | Image border radius.   |
+| imgRadius | `'none'\|'sm'\|'full'\|'lg'`              | `'full'`   | N        | Image border radius.   |
 | imgSrc    | `string`                                  | `''`       | N        | Image source URL.      |

+ 1 - 1
docs/mds/components/avatar/api.md

@@ -6,7 +6,7 @@
 | alt      | `string`                                                  | `''`     | N    | 替换文本,建议单字。 |
 | icon     | [`Icon`](https://stdf.design/#/components?nav=icon&tab=1) | `{}`     | N    | 替换图标。           |
 | altSize  | `'xs'\|'sm'\|'md'\|'lg'\|'xl'`                            | `'md'`   | N    | 替换文本大小。       |
-| radius   | `'none'\|'base'\|'xl'\|'2xl'\|'3xl'\|'full'`              | `'base'` | N    | 圆角风格。           |
+| radius   | `'none'\|'sm'\|'xl'\|'2xl'\|'3xl'\|'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    | 边框风格。           |

+ 1 - 1
docs/mds/components/avatar/api_en.md

@@ -6,7 +6,7 @@
 | 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'\|'base'\|'xl'\|'2xl'\|'3xl'\|'full'`              | `'base'` | N        | Border radius style.               |
+| radius   | `'none'\|'sm'\|'xl'\|'2xl'\|'3xl'\|'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.                      |

+ 10 - 10
docs/mds/components/badge/api.md

@@ -1,15 +1,15 @@
 ## Badge Props
 
-| 名称     | 类型                             | 默认值   | 必传 | 说明                                         |
-| -------- | -------------------------------- | -------- | ---- | -------------------------------------------- |
-| text     | `string`                         | `''`     | N    | 徽标文案。                                   |
-| radius   | `'full'\|'base'\|'none'\|'leaf'` | `'full'` | N    | 圆角风格。                                   |
-| isLeft   | `boolean`                        | `false`  | N    | 是否位于左侧(仅 isInner 为 false 时生效)。 |
-| isShow   | `boolean`                        | `true`   | N    | 是否显示。                                   |
-| offsetY  | `number`                         | `0`      | N    | 上下偏移量(仅 isInner 为 false 时生效)。   |
-| offsetX  | `number`                         | `0`      | N    | 左右偏移量(仅 isInner 为 false 时生效)。   |
-| isInner  | `boolean`                        | `false`  | N    | 是否位于内部。                               |
-| injClass | `string`                         | `''`     | N    | 注入 CSS 名称。                              |
+| 名称     | 类型                           | 默认值   | 必传 | 说明                                         |
+| -------- | ------------------------------ | -------- | ---- | -------------------------------------------- |
+| text     | `string`                       | `''`     | N    | 徽标文案。                                   |
+| radius   | `'full'\|'sm'\|'none'\|'leaf'` | `'full'` | N    | 圆角风格。                                   |
+| isLeft   | `boolean`                      | `false`  | N    | 是否位于左侧(仅 isInner 为 false 时生效)。 |
+| isShow   | `boolean`                      | `true`   | N    | 是否显示。                                   |
+| offsetY  | `number`                       | `0`      | N    | 上下偏移量(仅 isInner 为 false 时生效)。   |
+| offsetX  | `number`                       | `0`      | N    | 左右偏移量(仅 isInner 为 false 时生效)。   |
+| isInner  | `boolean`                      | `false`  | N    | 是否位于内部。                               |
+| injClass | `string`                       | `''`     | N    | 注入 CSS 名称。                              |
 
 ## Badge Snippets
 

+ 10 - 10
docs/mds/components/badge/api_en.md

@@ -1,15 +1,15 @@
 ## Badge Props
 
-| Name     | Type                             | Default  | Required | Description                                                         |
-| -------- | -------------------------------- | -------- | -------- | ------------------------------------------------------------------- |
-| text     | `string`                         | `''`     | N        | Badge text content.                                                 |
-| radius   | `'full'\|'base'\|'none'\|'leaf'` | `'full'` | 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).                 |
-| offsetX  | `number`                         | `0`      | N        | Horizontal offset (only works when isInner is false).               |
-| isInner  | `boolean`                        | `false`  | N        | Whether to position inside.                                         |
-| injClass | `string`                         | `''`     | N        | Injected CSS class name.                                            |
+| Name     | Type                           | Default  | Required | Description                                                         |
+| -------- | ------------------------------ | -------- | -------- | ------------------------------------------------------------------- |
+| text     | `string`                       | `''`     | N        | Badge text content.                                                 |
+| radius   | `'full'\|'sm'\|'none'\|'leaf'` | `'full'` | 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).                 |
+| offsetX  | `number`                       | `0`      | N        | Horizontal offset (only works when isInner is false).               |
+| isInner  | `boolean`                      | `false`  | N        | Whether to position inside.                                         |
+| injClass | `string`                       | `''`     | N        | Injected CSS class name.                                            |
 
 ## Badge Snippets
 

+ 1 - 1
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'\|'base'\|'full'`                                  | `'full'`                     | N    | 圆角风格。                         |
+| radius          | `'none'\|'middle'\|'full'`                                | `'full'`                     | N    | 圆角风格。                         |
 
 ## BottomSheet Events
 

+ 1 - 1
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'\|'base'\|'full'`                                  | `'full'`                       | N        | Border radius style.                                                   |
+| radius          | `'none'\|'middle'\|'full'`                                | `'full'`                       | N        | Border radius style.                                                   |
 
 ## BottomSheet Events
 

+ 1 - 1
docs/mds/components/button/api.md

@@ -4,7 +4,7 @@
 | --------------- | ----------------------------------------------------------------------------- | --------- | ---- | ------------------------------ |
 | fill            | `'base'\|'line'\|'lineLight'\|'lineTheme'\|'text'\|'textTheme'\|'colorLight'` | `'base'`  | N    | 填充模式。                     |
 | state           | `'theme'\|'success'\|'warning'\|'error'\|'info'`                              | `'theme'` | N    | 状态色,theme 表示跟随主题色。 |
-| radius          | `'none'\|'base'\|'xl'\|'2xl'\|'full'`                                         | `'base'`  | N    | 圆角风格。                     |
+| 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    | 按钮外部高度。                 |

+ 1 - 1
docs/mds/components/button/api_en.md

@@ -4,7 +4,7 @@
 | --------------- | ----------------------------------------------------------------------------- | --------- | -------- | ------------------------------------------------ |
 | 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'\|'base'\|'xl'\|'2xl'\|'full'`                                         | `'base'`  | N        | Border radius style.                             |
+| 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.                             |

+ 1 - 1
docs/mds/components/calendar/api.md

@@ -15,7 +15,7 @@
 | height          | `number`                                                      | `50`                                 | N    | 显示高度占页面高度百分比。                   |
 | infoDates       | `InfoDate[]`                                                  | `[]`                                 | N    | 需要显示信息的日期。                         |
 | disabledDates   | `string[]`                                                    | `[]`                                 | N    | 不可选的日期。                               |
-| radius          | `'none'\|'base'\|'xl'\|'2xl'`                                 | `'xl'`                               | N    | 选定日期的圆角风格。                         |
+| radius          | `'none'\|'sm'\|'xl'\|'2xl'`                                   | `'xl'`                               | N    | 选定日期的圆角风格。                         |
 | showSelectedDay | `boolean`                                                     | `true`                               | N    | 多选和范围选择时确定按钮是否显示已选天数。   |
 | confirmText     | `string`                                                      | 当前语言的 calendarLang.confirmText  | N    | 确定按钮文案。                               |
 | selectedText    | `string`                                                      | 当前语言的 calendarLang.selectedText | N    | showSelectedDay 为 true 时确定按钮部分文案。 |

+ 1 - 1
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'\|'base'\|'xl'\|'2xl'`                                 | `'xl'`                                     | N        | Border radius style for selected dates.                                        |
+| radius          | `'none'\|'sm'\|'xl'\|'2xl'`                                   | `'xl'`                                     | 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.                      |

+ 11 - 11
docs/mds/components/cell/api.md

@@ -11,9 +11,9 @@
 | 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'\|'base'\|'md'\|'lg'\|'xl'\|'2xl'\|'full'`                 | `'lg'`    | N    | 圆角风格。             |
+| radius       | `'none'\|'sm'\|'md'\|'lg'\|'xl'\|'2xl'\|'full'`                   | `'lg'`    | N    | 圆角风格。             |
 | switchActive | `boolean`                                                         | `false`   | N    | 开关状态。             |
-| shadow       | `'none'\|'xs'\|'sm'\|'md'\|'lg'\|'xl'\|'2xl'`                   | `'xs'`    | N    | 阴影风格。             |
+| shadow       | `'none'\|'xs'\|'sm'\|'md'\|'lg'\|'xl'\|'2xl'`                     | `'xs'`    | N    | 阴影风格。             |
 | injClass     | `string`                                                          | `''`      | N    | 注入 CSS 名称。        |
 | love         | `boolean`                                                         | `false`   | N    | 是否开启关爱版。       |
 | clickAll     | `boolean`                                                         | `true`    | N    | 是否点击整行触发事件。 |
@@ -34,12 +34,12 @@
 
 ## CellGroup Props
 
-| 名称   | 类型                                              | 默认值 | 必传 | 说明       |
-| ------ | ------------------------------------------------- | ------ | ---- | ---------- |
-| my     | `'0'\|'1'\|'2'\|'3'\|'4'\|'6'\|'8'`               | `'4'`  | N    | 上下间距。 |
-| mx     | `'0'\|'1'\|'2'\|'3'\|'4'\|'6'\|'8'`               | `'2'`  | N    | 左右间距。 |
-| radius | `'none'\|'base'\|'md'\|'lg'\|'xl'\|'2xl'\|'full'` | `'lg'` | N    | 圆角风格。 |
-| shadow | `'none'\|'xs'\|'sm'\|'md'\|'lg'\|'xl'\|'2xl'`     | `'xs'` | 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    | 圆角风格。 |
+| shadow | `'none'\|'xs'\|'sm'\|'md'\|'lg'\|'xl'\|'2xl'`   | `'xs'` | N    | 阴影风格。 |
 
 ## CellGroup Snippets
 
@@ -51,8 +51,8 @@
 
 ```javascript
 type CellRight = {
-	type: 'switch' | 'icon';
-	switch?: Switch;
-	icon?: Icon;
+    type: 'switch' | 'icon',
+    switch?: Switch,
+    icon?: Icon,
 };
 ```

+ 10 - 10
docs/mds/components/indexBar/api.md

@@ -1,15 +1,15 @@
 ## IndexBar Props
 
-| 名称          | 类型                     | 默认值   | 必传 | 说明                             |
-| ------------- | ------------------------ | -------- | ---- | -------------------------------- |
-| data          | `IndexBarItem[]`         | `[]`     | Y    | 索引数据组成的数组。             |
-| current       | `number`                 | `0`      | N    | 当前激活的索引值。               |
-| top           | `number`                 | `0`      | N    | 索引内容区域距离文档顶部的距离。 |
-| height        | `number`                 | `100`    | Y    | 索引内容区域高度。               |
-| radius        | `'none'\|'base'\|'full'` | `'base'` | N    | 圆角风格。                       |
-| scrollAlign   | `boolean`                | `true`   | N    | 是否开启滚动自动对齐。           |
-| titleInjClass | `string`                 | `''`     | N    | 索引组标题注入 CSS。             |
-| textInjClass  | `string`                 | `''`     | N    | 索引项文本注入 CSS。             |
+| 名称          | 类型                       | 默认值     | 必传 | 说明                             |
+| ------------- | -------------------------- | ---------- | ---- | -------------------------------- |
+| data          | `IndexBarItem[]`           | `[]`       | Y    | 索引数据组成的数组。             |
+| current       | `number`                   | `0`        | N    | 当前激活的索引值。               |
+| top           | `number`                   | `0`        | N    | 索引内容区域距离文档顶部的距离。 |
+| height        | `number`                   | `100`      | Y    | 索引内容区域高度。               |
+| radius        | `'none'\|'middle'\|'full'` | `'middle'` | N    | 圆角风格。                       |
+| scrollAlign   | `boolean`                  | `true`     | N    | 是否开启滚动自动对齐。           |
+| titleInjClass | `string`                   | `''`       | N    | 索引组标题注入 CSS。             |
+| textInjClass  | `string`                   | `''`       | N    | 索引项文本注入 CSS。             |
 
 ## IndexBar Events
 

+ 1 - 1
docs/mds/components/input/api.md

@@ -6,7 +6,7 @@
 | titlePosition     | `'in'\|'out'\|null`                                                                                       | `'out'`   | N    | 标题位置。                      |
 | inputPosition     | `'left'\|'right'`                                                                                         | `'left'`  | N    | 输入框文字位置。                |
 | placeholder       | `string`                                                                                                  | `''`      | N    | 输入框提示文本。                |
-| radius            | `'none'\|'base'\|'xl'\|'full'`                                                                            | `'base'`  | N    | 圆角风格。                      |
+| radius            | `'none'\|'sm'\|'xl'\|'full'`                                                                              | `'sm'`    | N    | 圆角风格。                      |
 | inputStyle        | `'block'\|'line'`                                                                                         | `'block'` | N    | 输入框风格。                    |
 | lineTransition    | `string`                                                                                                  | `'none'`  | N    | 线性过渡位置。                  |
 | duration          | `'fast'\|'base'\|'slow'\|'slower'`                                                                        | `'base'`  | N    | 过渡时间。                      |

+ 1 - 1
docs/mds/components/numKeyboard/api.md

@@ -14,7 +14,7 @@
 | close        | `boolean`                                                   | `false`                | N    | 是否显示关闭按钮。   |
 | doneText     | `string`                                                    | 当前语言的 common.done | N    | 完成按钮文案。       |
 | doneDisabled | `boolean`                                                   | `false`                | N    | 完成按钮是否禁用。   |
-| radius       | `'none'\|'base'\|'md'\|'lg'\|'xl'\|'2xl'\|'3xl'\|'full'`    | `'base'`               | N    | 按键圆角。           |
+| radius       | `'none'\|'sm'\|'md'\|'lg'\|'xl'\|'2xl'\|'3xl'\|'full'`      | `'sm'`                 | N    | 按键圆角。           |
 | clear        | `boolean`                                                   | `false`                | N    | 打开时是否清空内容。 |
 | panelClass   | `string`                                                    | `''`                   | N    | 键盘面板注入 Class。 |
 | keyClass     | `string`                                                    | `''`                   | N    | 按键注入 Class。     |

+ 1 - 1
docs/mds/components/numKeyboard/api_en.md

@@ -14,7 +14,7 @@
 | close        | `boolean`                                                   | `false`                        | N        | Whether to show close button.       |
 | doneText     | `string`                                                    | Current language's common.done | N        | Done button text.                   |
 | doneDisabled | `boolean`                                                   | `false`                        | N        | Whether to disable done button.     |
-| radius       | `'none'\|'base'\|'md'\|'lg'\|'xl'\|'2xl'\|'3xl'\|'full'`    | `'base'`                       | N        | Key border radius.                  |
+| radius       | `'none'\|'sm'\|'md'\|'lg'\|'xl'\|'2xl'\|'3xl'\|'full'`      | `'sm'`                         | N        | Key border radius.                  |
 | clear        | `boolean`                                                   | `false`                        | N        | Whether to clear content when open. |
 | panelClass   | `string`                                                    | `''`                           | N        | Inject class for keyboard panel.    |
 | keyClass     | `string`                                                    | `''`                           | N        | Inject class for keys.              |

+ 15 - 15
docs/mds/components/pagination/api.md

@@ -1,20 +1,20 @@
 ## Pagination Props
 
-| 名称             | 类型                                       | 默认值                                   | 必传 | 说明                 |
-| ---------------- | ------------------------------------------ | ---------------------------------------- | ---- | -------------------- |
-| total            | `number`                                   | `0`                                      | Y    | 总条数。             |
-| pageSize         | `number`                                   | `10`                                     | N    | 每页条数。           |
-| current          | `number`                                   | `1`                                      | N    | 当前页。             |
-| maxShowPage      | `5\|7\|9\|11`                              | `7`                                      | N    | 最大显示页码数。     |
-| radius           | `'none'\|'base'\|'md'\|'lg'\|'xl'\|'full'` | `'md'`                                   | N    | 圆角风格。           |
-| type             | `'border'\|'block'\|'bold'`                | `'bold'`                                 | N    | 高亮页码类型。       |
-| pageCol          | `number`                                   | `3`                                      | N    | 省略页码列数。       |
-| showNextOmitPage | `boolean`                                  | `false`                                  | N    | 是否显示后省略页码。 |
-| showPreOmitPage  | `boolean`                                  | `false`                                  | N    | 是否显示前省略页码。 |
-| injClass         | `string`                                   | `''`                                     | N    | 注入 CSS 名称。。    |
-| noDataText       | `string`                                   | 当前语言的 common.noData                 | N    | 无数据显示文本。     |
-| onePageText      | `string`                                   | 当前语言的 pagination.defaultOnlyOnePage | N    | 仅一页显示文本。     |
-| continuous       | `boolean`                                  | `false`                                  | N    | 是否是连续模式。     |
+| 名称             | 类型                                     | 默认值                                   | 必传 | 说明                 |
+| ---------------- | ---------------------------------------- | ---------------------------------------- | ---- | -------------------- |
+| total            | `number`                                 | `0`                                      | Y    | 总条数。             |
+| pageSize         | `number`                                 | `10`                                     | N    | 每页条数。           |
+| current          | `number`                                 | `1`                                      | N    | 当前页。             |
+| maxShowPage      | `5\|7\|9\|11`                            | `7`                                      | N    | 最大显示页码数。     |
+| radius           | `'none'\|'sm'\|'md'\|'lg'\|'xl'\|'full'` | `'md'`                                   | N    | 圆角风格。           |
+| type             | `'border'\|'block'\|'bold'`              | `'bold'`                                 | N    | 高亮页码类型。       |
+| pageCol          | `number`                                 | `3`                                      | N    | 省略页码列数。       |
+| showNextOmitPage | `boolean`                                | `false`                                  | N    | 是否显示后省略页码。 |
+| showPreOmitPage  | `boolean`                                | `false`                                  | N    | 是否显示前省略页码。 |
+| injClass         | `string`                                 | `''`                                     | N    | 注入 CSS 名称。。    |
+| noDataText       | `string`                                 | 当前语言的 common.noData                 | N    | 无数据显示文本。     |
+| onePageText      | `string`                                 | 当前语言的 pagination.defaultOnlyOnePage | N    | 仅一页显示文本。     |
+| continuous       | `boolean`                                | `false`                                  | N    | 是否是连续模式。     |
 
 ## Pagination Events
 

+ 15 - 15
docs/mds/components/pagination/api_en.md

@@ -1,20 +1,20 @@
 ## Pagination Props
 
-| Name             | Type                                       | Default                                          | Required | Description                                  |
-| ---------------- | ------------------------------------------ | ------------------------------------------------ | -------- | -------------------------------------------- |
-| total            | `number`                                   | `0`                                              | Y        | Total number of items.                       |
-| pageSize         | `number`                                   | `10`                                             | N        | Number of items per page.                    |
-| current          | `number`                                   | `1`                                              | N        | Current page number.                         |
-| maxShowPage      | `5\|7\|9\|11`                              | `7`                                              | N        | Maximum number of page numbers to display.   |
-| radius           | `'none'\|'base'\|'md'\|'lg'\|'xl'\|'full'` | `'md'`                                           | N        | Border radius style.                         |
-| type             | `'border'\|'block'\|'bold'`                | `'bold'`                                         | N        | Highlighted page number style.               |
-| pageCol          | `number`                                   | `3`                                              | N        | Number of columns for omitted page numbers.  |
-| showNextOmitPage | `boolean`                                  | `false`                                          | N        | Whether to show omitted page numbers after.  |
-| showPreOmitPage  | `boolean`                                  | `false`                                          | N        | Whether to show omitted page numbers before. |
-| injClass         | `string`                                   | `''`                                             | N        | Inject CSS class name.                       |
-| noDataText       | `string`                                   | Current language's common.noData                 | N        | Text to display when no data.                |
-| onePageText      | `string`                                   | Current language's pagination.defaultOnlyOnePage | N        | Text to display when only one page.          |
-| continuous       | `boolean`                                  | `false`                                          | N        | Whether to use continuous mode.              |
+| Name             | Type                                     | Default                                          | Required | Description                                  |
+| ---------------- | ---------------------------------------- | ------------------------------------------------ | -------- | -------------------------------------------- |
+| total            | `number`                                 | `0`                                              | Y        | Total number of items.                       |
+| pageSize         | `number`                                 | `10`                                             | N        | Number of items per page.                    |
+| current          | `number`                                 | `1`                                              | N        | Current page number.                         |
+| maxShowPage      | `5\|7\|9\|11`                            | `7`                                              | N        | Maximum number of page numbers to display.   |
+| radius           | `'none'\|'sm'\|'md'\|'lg'\|'xl'\|'full'` | `'md'`                                           | N        | Border radius style.                         |
+| type             | `'border'\|'block'\|'bold'`              | `'bold'`                                         | N        | Highlighted page number style.               |
+| pageCol          | `number`                                 | `3`                                              | N        | Number of columns for omitted page numbers.  |
+| showNextOmitPage | `boolean`                                | `false`                                          | N        | Whether to show omitted page numbers after.  |
+| showPreOmitPage  | `boolean`                                | `false`                                          | N        | Whether to show omitted page numbers before. |
+| injClass         | `string`                                 | `''`                                             | N        | Inject CSS class name.                       |
+| noDataText       | `string`                                 | Current language's common.noData                 | N        | Text to display when no data.                |
+| onePageText      | `string`                                 | Current language's pagination.defaultOnlyOnePage | N        | Text to display when only one page.          |
+| continuous       | `boolean`                                | `false`                                          | N        | Whether to use continuous mode.              |
 
 ## Pagination Events
 

+ 2 - 2
docs/mds/components/placeholder/api.md

@@ -4,8 +4,8 @@
 | -------- | ---------------------------------------------------------------- | -------- | ---- | --------------- |
 | py       | `'0'\|'1'\|'2'\|'3'\|'4'`                                        | `'4'`    | N    | 上下内边距。    |
 | height   | `'full'\|'1'\|'2'\|'4'\|'8'\|'16'\|'24'\|'32'\|'48'\|'64'\|'96'` | `'full'` | N    | 高度。          |
-| radius   | `'none'\|'base'\|'md'\|'xl'\|'2xl'\|'3xl'\|'full'`               | `'md'`   | N    | 圆角风格。      |
-| shadow   | `'none'\|'xs'\|'sm'\|'md'\|'lg'\|'xl'\|'2xl'`                   | `'none'` | N    | 阴影风格。      |
+| radius   | `'none'\|'sm'\|'md'\|'xl'\|'2xl'\|'3xl'\|'full'`                 | `'md'`   | N    | 圆角风格。      |
+| shadow   | `'none'\|'xs'\|'sm'\|'md'\|'lg'\|'xl'\|'2xl'`                    | `'none'` | N    | 阴影风格。      |
 | injClass | `string`                                                         | `''`     | N    | 注入 CSS 名称。 |
 
 ## Placeholder Snippets

+ 2 - 2
docs/mds/components/placeholder/api_en.md

@@ -4,8 +4,8 @@
 | -------- | ---------------------------------------------------------------- | -------- | -------- | ------------------------ |
 | py       | `'0'\|'1'\|'2'\|'3'\|'4'`                                        | `'4'`    | N        | Vertical padding.        |
 | height   | `'full'\|'1'\|'2'\|'4'\|'8'\|'16'\|'24'\|'32'\|'48'\|'64'\|'96'` | `'full'` | N        | Height.                  |
-| radius   | `'none'\|'base'\|'md'\|'xl'\|'2xl'\|'3xl'\|'full'`               | `'md'`   | N        | Border radius style.     |
-| shadow   | `'none'\|'xs'\|'sm'\|'md'\|'lg'\|'xl'\|'2xl'`                   | `'none'` | N        | Shadow style.            |
+| radius   | `'none'\|'sm'\|'md'\|'xl'\|'2xl'\|'3xl'\|'full'`                 | `'md'`   | N        | Border radius style.     |
+| shadow   | `'none'\|'xs'\|'sm'\|'md'\|'lg'\|'xl'\|'2xl'`                    | `'none'` | N        | Shadow style.            |
 | injClass | `string`                                                         | `''`     | N        | Injected CSS class name. |
 
 ## Placeholder Snippets

+ 32 - 32
docs/mds/components/popup/api.md

@@ -14,7 +14,7 @@
 | mask               | [`Mask`](https://stdf.design/#/components?nav=mask&tab=1)                          | `{}`         | N    | 遮罩层参数。                                                                                 |
 | maskClosable       | `boolean`                                                                          | `true`       | N    | 点击遮罩层是否关闭。                                                                         |
 | radiusPosition     | `'all'\|'top'\|'bottom'\|'left'\|'right'`                                          | `'top'`      | N    | 圆角位置。                                                                                   |
-| radius             | `'none'\|'base'\|'md'\|'lg'\|'xl'\|'2xl'\|'3xl'\|'full'`                           | `'none'`     | N    | 圆角大小。                                                                                   |
+| radius             | `'none'\|'sm'\|'md'\|'lg'\|'xl'\|'2xl'\|'3xl'\|'full'`                             | `'none'`     | N    | 圆角大小。                                                                                   |
 | transitionDistance | `number`                                                                           | `0`          | N    | 动画距离,当弹出层大小由内部元素决定时生效。                                                 |
 | transparent        | `boolean`                                                                          | `false`      | N    | 背景是否透明。                                                                               |
 | allowBodyScroll    | `boolean`                                                                          | `true`       | N    | 弹出层显示时是否允许 body 滚动。                                                             |
@@ -39,35 +39,35 @@
 
 ```javascript
 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';
+    | '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';
 ```

+ 32 - 32
docs/mds/components/popup/api_en.md

@@ -14,7 +14,7 @@
 | mask               | [`Mask`](https://stdf.design/#/components?nav=mask&tab=1)                          | `{}`         | N        | Mask layer parameters.                                                                                          |
 | maskClosable       | `boolean`                                                                          | `true`       | N        | Whether clicking mask layer closes popup.                                                                       |
 | radiusPosition     | `'all'\|'top'\|'bottom'\|'left'\|'right'`                                          | `'top'`      | N        | Border radius position.                                                                                         |
-| radius             | `'none'\|'base'\|'md'\|'lg'\|'xl'\|'2xl'\|'3xl'\|'full'`                           | `'none'`     | N        | Border radius size.                                                                                             |
+| radius             | `'none'\|'sm'\|'md'\|'lg'\|'xl'\|'2xl'\|'3xl'\|'full'`                             | `'none'`     | N        | Border radius size.                                                                                             |
 | transitionDistance | `number`                                                                           | `0`          | N        | Animation distance when popup size is determined by inner elements.                                             |
 | transparent        | `boolean`                                                                          | `false`      | N        | Whether background is transparent.                                                                              |
 | allowBodyScroll    | `boolean`                                                                          | `true`       | N        | Whether to allow body scrolling when popup is shown.                                                            |
@@ -39,35 +39,35 @@
 
 ```javascript
 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';
+    | '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';
 ```

+ 1 - 1
docs/mds/components/progress/api.md

@@ -5,7 +5,7 @@
 | percent         | `number`                             | `66`      | N    | 百分比。                                          |
 | percentPosition | `'inner'\|'right'\|'block'\|null`    | `'right'` | N    | 百分比位置。                                      |
 | height          | `'1'\|'2'\|'3'\|'4'`                 | `'2'`     | N    | 高度。                                            |
-| radius          | `'full'\|'base'\|'none'`             | `'full'`  | N    | 圆角风格。                                        |
+| radius          | `'full'\|'middle'\|'none'`           | `'full'`  | N    | 圆角风格。                                        |
 | inactive        | `boolean`                            | `false`   | N    | 是否置灰。                                        |
 | overflowPercent | `number`                             | `10`      | N    | percentPosition 为 `'inner'` 时,文字溢出的阀值。 |
 | duration        | `'150'\|'300'\|'500'\|'700'\|'1000'` | `'300'`   | N    | 动画过度时间(ms)。                              |

+ 1 - 1
docs/mds/components/progress/api_en.md

@@ -5,7 +5,7 @@
 | percent         | `number`                             | `66`      | N        | Percentage value.                                                 |
 | percentPosition | `'inner'\|'right'\|'block'\|null`    | `'right'` | N        | Position of percentage text.                                      |
 | height          | `'1'\|'2'\|'3'\|'4'`                 | `'2'`     | N        | Height of progress bar.                                           |
-| radius          | `'full'\|'base'\|'none'`             | `'full'`  | N        | Border radius style.                                              |
+| radius          | `'full'\|'middle'\|'none'`           | `'full'`  | N        | Border radius style.                                              |
 | inactive        | `boolean`                            | `false`   | N        | Whether to show in inactive state.                                |
 | overflowPercent | `number`                             | `10`      | N        | Text overflow threshold when percentPosition is set to `'inner'`. |
 | duration        | `'150'\|'300'\|'500'\|'700'\|'1000'` | `'300'`   | N        | Animation transition duration (ms).                               |

+ 9 - 9
docs/mds/components/skeleton/api.md

@@ -1,11 +1,11 @@
 ## Skeleton Props
 
-| 名称      | 类型                                                                   | 默认值   | 必传 | 说明                                                                  |
-| --------- | ---------------------------------------------------------------------- | -------- | ---- | --------------------------------------------------------------------- |
-| type      | `'div'\|'p'\|'img'\|'video'\|'code'\|'qrcode'\|'barcode'`              | `'div'`  | N    | Skeleton 类型。                                                       |
-| width     | `'2'\|'4'\|'6'\|'8'\|'12'\|'16'\|'24'\|'32'\|'48'\|'64'\|'96'\|'full'` | `'6'`    | N    | 宽度。                                                                |
-| height    | `'1'\|'2'\|'4'\|'6'\|'8'\|'12'\|'16'\|'24'\|'32'\|'48'\|'64'\|'96'`    | `'6'`    | N    | 高度。                                                                |
-| radius    | `'none'\|'base'\|'md'\|'xl'\|'2xl'\|'3xl'\|'full'`                     | `'base'` | N    | 圆角风格。                                                            |
-| padding   | `'0.5'\|'1'\|'2'\|'4'\|'8'`                                            | `'1'`    | N    | 内边距。                                                              |
-| lines     | `number`                                                               | `3`      | N    | 行数,仅在 type 为 p 时生效。                                         |
-| iconRatio | `number`                                                               | `0.6`    | N    | 内部图标比例,仅在 type 为 img、video、code、qrcode、barcode 时生效。 |
+| 名称      | 类型                                                                   | 默认值  | 必传 | 说明                                                                  |
+| --------- | ---------------------------------------------------------------------- | ------- | ---- | --------------------------------------------------------------------- |
+| type      | `'div'\|'p'\|'img'\|'video'\|'code'\|'qrcode'\|'barcode'`              | `'div'` | N    | Skeleton 类型。                                                       |
+| width     | `'2'\|'4'\|'6'\|'8'\|'12'\|'16'\|'24'\|'32'\|'48'\|'64'\|'96'\|'full'` | `'6'`   | N    | 宽度。                                                                |
+| height    | `'1'\|'2'\|'4'\|'6'\|'8'\|'12'\|'16'\|'24'\|'32'\|'48'\|'64'\|'96'`    | `'6'`   | N    | 高度。                                                                |
+| radius    | `'none'\|'sm'\|'md'\|'xl'\|'2xl'\|'3xl'\|'full'`                       | `'sm'`  | N    | 圆角风格。                                                            |
+| padding   | `'0.5'\|'1'\|'2'\|'4'\|'8'`                                            | `'1'`   | N    | 内边距。                                                              |
+| lines     | `number`                                                               | `3`     | N    | 行数,仅在 type 为 p 时生效。                                         |
+| iconRatio | `number`                                                               | `0.6`   | N    | 内部图标比例,仅在 type 为 img、video、code、qrcode、barcode 时生效。 |

+ 9 - 9
docs/mds/components/skeleton/api_en.md

@@ -1,11 +1,11 @@
 ## Skeleton Props
 
-| Name      | Type                                                                   | Default  | Required | Description                                                                               |
-| --------- | ---------------------------------------------------------------------- | -------- | -------- | ----------------------------------------------------------------------------------------- |
-| type      | `'div'\|'p'\|'img'\|'video'\|'code'\|'qrcode'\|'barcode'`              | `'div'`  | N        | Type of skeleton.                                                                         |
-| width     | `'2'\|'4'\|'6'\|'8'\|'12'\|'16'\|'24'\|'32'\|'48'\|'64'\|'96'\|'full'` | `'6'`    | N        | Width.                                                                                    |
-| height    | `'1'\|'2'\|'4'\|'6'\|'8'\|'12'\|'16'\|'24'\|'32'\|'48'\|'64'\|'96'`    | `'6'`    | N        | Height.                                                                                   |
-| radius    | `'none'\|'base'\|'md'\|'xl'\|'2xl'\|'3xl'\|'full'`                     | `'base'` | N        | Border radius style.                                                                      |
-| padding   | `'0.5'\|'1'\|'2'\|'4'\|'8'`                                            | `'1'`    | N        | Padding.                                                                                  |
-| lines     | `number`                                                               | `3`      | N        | Number of lines, only takes effect when type is p.                                        |
-| iconRatio | `number`                                                               | `0.6`    | N        | Internal icon ratio, only takes effect when type is img, video, code, qrcode, or barcode. |
+| Name      | Type                                                                   | Default | Required | Description                                                                               |
+| --------- | ---------------------------------------------------------------------- | ------- | -------- | ----------------------------------------------------------------------------------------- |
+| type      | `'div'\|'p'\|'img'\|'video'\|'code'\|'qrcode'\|'barcode'`              | `'div'` | N        | Type of skeleton.                                                                         |
+| width     | `'2'\|'4'\|'6'\|'8'\|'12'\|'16'\|'24'\|'32'\|'48'\|'64'\|'96'\|'full'` | `'6'`   | N        | Width.                                                                                    |
+| height    | `'1'\|'2'\|'4'\|'6'\|'8'\|'12'\|'16'\|'24'\|'32'\|'48'\|'64'\|'96'`    | `'6'`   | N        | Height.                                                                                   |
+| radius    | `'none'\|'sm'\|'md'\|'xl'\|'2xl'\|'3xl'\|'full'`                       | `'sm'`  | N        | Border radius style.                                                                      |
+| padding   | `'0.5'\|'1'\|'2'\|'4'\|'8'`                                            | `'1'`   | N        | Padding.                                                                                  |
+| lines     | `number`                                                               | `3`     | N        | Number of lines, only takes effect when type is p.                                        |
+| iconRatio | `number`                                                               | `0.6`   | N        | Internal icon ratio, only takes effect when type is img, video, code, qrcode, or barcode. |

+ 14 - 14
docs/mds/components/slider/api.md

@@ -1,19 +1,19 @@
 ## Slider Props
 
-| 名称       | 类型                          | 默认值    | 必传 | 说明             |
-| ---------- | ----------------------------- | --------- | ---- | ---------------- |
-| value      | `number`                      | `40`      | N    | 当前值。         |
-| step       | `number`                      | `1`       | N    | 步长。           |
-| minRange   | `number`                      | `0`       | N    | 可选最小值。     |
-| maxRange   | `number`                      | `100`     | N    | 可选最大值。     |
-| isRange    | `boolean`                     | `false`   | N    | 是否为区间选择。 |
-| startValue | `number`                      | `20`      | N    | 区间选择开始值。 |
-| endValue   | `number`                      | `60`      | N    | 区间选择结束值。 |
-| showTip    | `'always'\|'never'\|'touch`   | `'touch'` | N    | 提示显示方式。   |
-| radius     | `'none'\|'base'\|'xl'\|'full` | `'full'`  | N    | 圆角风格。       |
-| lineBlock  | `boolean`                     | `false`   | N    | 滑块是否为线框。 |
-| disabled   | `boolean`                     | `false`   | N    | 是否禁用。       |
-| readonly   | `boolean`                     | `false`   | N    | 是否只读。       |
+| 名称       | 类型                        | 默认值    | 必传 | 说明             |
+| ---------- | --------------------------- | --------- | ---- | ---------------- |
+| value      | `number`                    | `40`      | N    | 当前值。         |
+| step       | `number`                    | `1`       | N    | 步长。           |
+| minRange   | `number`                    | `0`       | N    | 可选最小值。     |
+| maxRange   | `number`                    | `100`     | N    | 可选最大值。     |
+| isRange    | `boolean`                   | `false`   | N    | 是否为区间选择。 |
+| startValue | `number`                    | `20`      | N    | 区间选择开始值。 |
+| endValue   | `number`                    | `60`      | N    | 区间选择结束值。 |
+| showTip    | `'always'\|'never'\|'touch` | `'touch'` | N    | 提示显示方式。   |
+| radius     | `'none'\|'sm'\|'xl'\|'full` | `'full'`  | N    | 圆角风格。       |
+| lineBlock  | `boolean`                   | `false`   | N    | 滑块是否为线框。 |
+| disabled   | `boolean`                   | `false`   | N    | 是否禁用。       |
+| readonly   | `boolean`                   | `false`   | N    | 是否只读。       |
 
 ## Slider Events
 

+ 14 - 14
docs/mds/components/slider/api_en.md

@@ -1,19 +1,19 @@
 ## Slider Props
 
-| Name       | Type                          | Default   | Required | Description                         |
-| ---------- | ----------------------------- | --------- | -------- | ----------------------------------- |
-| value      | `number`                      | `40`      | N        | Current value.                      |
-| step       | `number`                      | `1`       | N        | Step size.                          |
-| minRange   | `number`                      | `0`       | N        | Minimum selectable value.           |
-| maxRange   | `number`                      | `100`     | N        | Maximum selectable value.           |
-| isRange    | `boolean`                     | `false`   | N        | Whether it's a range selection.     |
-| startValue | `number`                      | `20`      | N        | Start value for range selection.    |
-| endValue   | `number`                      | `60`      | N        | End value for range selection.      |
-| showTip    | `'always'\|'never'\|'touch`   | `'touch'` | N        | Tip display mode.                   |
-| radius     | `'none'\|'base'\|'xl'\|'full` | `'full'`  | N        | Border radius style.                |
-| lineBlock  | `boolean`                     | `false`   | N        | Whether the slider is a line block. |
-| disabled   | `boolean`                     | `false`   | N        | Whether it's disabled.              |
-| readonly   | `boolean`                     | `false`   | N        | Whether it's read-only.             |
+| Name       | Type                        | Default   | Required | Description                         |
+| ---------- | --------------------------- | --------- | -------- | ----------------------------------- |
+| value      | `number`                    | `40`      | N        | Current value.                      |
+| step       | `number`                    | `1`       | N        | Step size.                          |
+| minRange   | `number`                    | `0`       | N        | Minimum selectable value.           |
+| maxRange   | `number`                    | `100`     | N        | Maximum selectable value.           |
+| isRange    | `boolean`                   | `false`   | N        | Whether it's a range selection.     |
+| startValue | `number`                    | `20`      | N        | Start value for range selection.    |
+| endValue   | `number`                    | `60`      | N        | End value for range selection.      |
+| showTip    | `'always'\|'never'\|'touch` | `'touch'` | N        | Tip display mode.                   |
+| radius     | `'none'\|'sm'\|'xl'\|'full` | `'full'`  | N        | Border radius style.                |
+| lineBlock  | `boolean`                   | `false`   | N        | Whether the slider is a line block. |
+| disabled   | `boolean`                   | `false`   | N        | Whether it's disabled.              |
+| readonly   | `boolean`                   | `false`   | N        | Whether it's read-only.             |
 
 ## Slider Events
 

+ 18 - 18
docs/mds/components/stepper/api.md

@@ -1,23 +1,23 @@
 ## Stepper Props
 
-| 名称            | 类型                                                            | 默认值   | 必传 | 说明                               |
-| --------------- | --------------------------------------------------------------- | -------- | ---- | ---------------------------------- |
-| value           | `number`                                                        | `10`     | N    | 当前值。                           |
-| min             | `number`                                                        | `0`      | N    | 最小值。                           |
-| max             | `number`                                                        | `100`    | N    | 最大值。                           |
-| step            | `number`                                                        | `1`      | N    | 步长。                             |
-| vertical        | `boolean`                                                       | `false`  | N    | 是否纵向。                         |
-| numberHighlight | `boolean`                                                       | `false`  | N    | 是否强调数字区域。                 |
-| theme           | `boolean`                                                       | `true`   | N    | 强调区域是否是主题色。             |
-| radius          | `'none'\|'base'\|'xl'\|'full'`                                  | `'base'` | N    | 圆角风格。                         |
-| decimal         | `number`                                                        | `0`      | N    | 对内部显示数字保留小数位数。       |
-| async           | `boolean`                                                       | `false`  | N    | 是否异步状态。                     |
-| asyncLoading    | `boolean`                                                       | `false`  | N    | 异步状态时,是否显示内部 Loading。 |
-| loading         | [`Loading`](https://stdf.design/#/components?nav=loading&tab=1) | `{}`     | N    | 异步状态时,Loading 参数。         |
-| padding         | `boolean`                                                       | `true`   | N    | 外部有无 padding。                 |
-| injClassOut     | `string`                                                        | `''`     | N    | 外部注入的类。                     |
-| injClassBtn     | `string`                                                        | `''`     | N    | 按钮区域注入的类。                 |
-| injClassNum     | `string`                                                        | `''`     | N    | 数字区域注入的类。                 |
+| 名称            | 类型                                                            | 默认值  | 必传 | 说明                               |
+| --------------- | --------------------------------------------------------------- | ------- | ---- | ---------------------------------- |
+| value           | `number`                                                        | `10`    | N    | 当前值。                           |
+| min             | `number`                                                        | `0`     | N    | 最小值。                           |
+| max             | `number`                                                        | `100`   | N    | 最大值。                           |
+| step            | `number`                                                        | `1`     | N    | 步长。                             |
+| vertical        | `boolean`                                                       | `false` | N    | 是否纵向。                         |
+| numberHighlight | `boolean`                                                       | `false` | N    | 是否强调数字区域。                 |
+| theme           | `boolean`                                                       | `true`  | N    | 强调区域是否是主题色。             |
+| radius          | `'none'\|'sm'\|'xl'\|'full'`                                    | `'sm'`  | N    | 圆角风格。                         |
+| decimal         | `number`                                                        | `0`     | N    | 对内部显示数字保留小数位数。       |
+| async           | `boolean`                                                       | `false` | N    | 是否异步状态。                     |
+| asyncLoading    | `boolean`                                                       | `false` | N    | 异步状态时,是否显示内部 Loading。 |
+| loading         | [`Loading`](https://stdf.design/#/components?nav=loading&tab=1) | `{}`    | N    | 异步状态时,Loading 参数。         |
+| padding         | `boolean`                                                       | `true`  | N    | 外部有无 padding。                 |
+| injClassOut     | `string`                                                        | `''`    | N    | 外部注入的类。                     |
+| injClassBtn     | `string`                                                        | `''`    | N    | 按钮区域注入的类。                 |
+| injClassNum     | `string`                                                        | `''`    | N    | 数字区域注入的类。                 |
 
 ## Stepper Events
 

+ 18 - 18
docs/mds/components/stepper/api_en.md

@@ -1,23 +1,23 @@
 ## Stepper Props
 
-| Name            | Type                                                            | Default  | Required | Description                                        |
-| --------------- | --------------------------------------------------------------- | -------- | -------- | -------------------------------------------------- |
-| value           | `number`                                                        | `10`     | N        | Current value.                                     |
-| min             | `number`                                                        | `0`      | N        | Minimum value.                                     |
-| max             | `number`                                                        | `100`    | N        | Maximum value.                                     |
-| step            | `number`                                                        | `1`      | N        | Step increment.                                    |
-| vertical        | `boolean`                                                       | `false`  | N        | Whether to display vertically.                     |
-| numberHighlight | `boolean`                                                       | `false`  | N        | Whether to highlight the number area.              |
-| theme           | `boolean`                                                       | `true`   | N        | Whether the highlighted area uses the theme color. |
-| radius          | `'none'\|'base'\|'xl'\|'full'`                                  | `'base'` | N        | Border radius style.                               |
-| decimal         | `number`                                                        | `0`      | N        | Number of decimal places for displayed value.      |
-| async           | `boolean`                                                       | `false`  | N        | Whether in async state.                            |
-| asyncLoading    | `boolean`                                                       | `false`  | N        | Whether to show internal Loading in async state.   |
-| loading         | [`Loading`](https://stdf.design/#/components?nav=loading&tab=1) | `{}`     | N        | Loading parameters in async state.                 |
-| padding         | `boolean`                                                       | `true`   | N        | Whether to have external padding.                  |
-| injClassOut     | `string`                                                        | `''`     | N        | Injected class for the outer container.            |
-| injClassBtn     | `string`                                                        | `''`     | N        | Injected class for the button area.                |
-| injClassNum     | `string`                                                        | `''`     | N        | Injected class for the number area.                |
+| Name            | Type                                                            | Default | Required | Description                                        |
+| --------------- | --------------------------------------------------------------- | ------- | -------- | -------------------------------------------------- |
+| value           | `number`                                                        | `10`    | N        | Current value.                                     |
+| min             | `number`                                                        | `0`     | N        | Minimum value.                                     |
+| max             | `number`                                                        | `100`   | N        | Maximum value.                                     |
+| step            | `number`                                                        | `1`     | N        | Step increment.                                    |
+| vertical        | `boolean`                                                       | `false` | N        | Whether to display vertically.                     |
+| numberHighlight | `boolean`                                                       | `false` | N        | Whether to highlight the number area.              |
+| theme           | `boolean`                                                       | `true`  | N        | Whether the highlighted area uses the theme color. |
+| radius          | `'none'\|'sm'\|'xl'\|'full'`                                    | `'sm'`  | N        | Border radius style.                               |
+| decimal         | `number`                                                        | `0`     | N        | Number of decimal places for displayed value.      |
+| async           | `boolean`                                                       | `false` | N        | Whether in async state.                            |
+| asyncLoading    | `boolean`                                                       | `false` | N        | Whether to show internal Loading in async state.   |
+| loading         | [`Loading`](https://stdf.design/#/components?nav=loading&tab=1) | `{}`    | N        | Loading parameters in async state.                 |
+| padding         | `boolean`                                                       | `true`  | N        | Whether to have external padding.                  |
+| injClassOut     | `string`                                                        | `''`    | N        | Injected class for the outer container.            |
+| injClassBtn     | `string`                                                        | `''`    | N        | Injected class for the button area.                |
+| injClassNum     | `string`                                                        | `''`    | N        | Injected class for the number area.                |
 
 ## Stepper Events
 

+ 7 - 7
docs/mds/components/steps/api.md

@@ -1,12 +1,12 @@
 ## Steps Props
 
-| 名称      | 类型                           | 默认值   | 必传 | 说明                                        |
-| --------- | ------------------------------ | -------- | ---- | ------------------------------------------- |
-| steps     | `StepsItem[]`                  | `[]`     | Y    | step Props 或 finishStep Props 组成的数组。 |
-| current   | `number`                       | `1`      | N    | 当前进行的步骤序号。                        |
-| radius    | `'none'\|'base'\|'xl'\|'full'` | `'base'` | N    | 圆角风格。                                  |
-| barBorder | `boolean`                      | `true`   | N    | 图标是否带边框。                            |
-| vertical  | `boolean`                      | `false`  | N    | 是否纵向布局。                              |
+| 名称      | 类型                         | 默认值  | 必传 | 说明                                        |
+| --------- | ---------------------------- | ------- | ---- | ------------------------------------------- |
+| steps     | `StepsItem[]`                | `[]`    | Y    | step Props 或 finishStep Props 组成的数组。 |
+| current   | `number`                     | `1`     | N    | 当前进行的步骤序号。                        |
+| radius    | `'none'\|'sm'\|'xl'\|'full'` | `'sm'`  | N    | 圆角风格。                                  |
+| barBorder | `boolean`                    | `true`  | N    | 图标是否带边框。                            |
+| vertical  | `boolean`                    | `false` | N    | 是否纵向布局。                              |
 
 ## StepsItem Props
 

+ 7 - 7
docs/mds/components/steps/api_en.md

@@ -1,12 +1,12 @@
 ## Steps Props
 
-| Name      | Type                           | Default  | Required | Description                                       |
-| --------- | ------------------------------ | -------- | -------- | ------------------------------------------------- |
-| steps     | `StepsItem[]`                  | `[]`     | Y        | Array composed of step Props or finishStep Props. |
-| current   | `number`                       | `1`      | N        | Current step number.                              |
-| radius    | `'none'\|'base'\|'xl'\|'full'` | `'base'` | N        | Border radius style.                              |
-| barBorder | `boolean`                      | `true`   | N        | Whether the icon has a border.                    |
-| vertical  | `boolean`                      | `false`  | N        | Whether to use vertical layout.                   |
+| Name      | Type                         | Default | Required | Description                                       |
+| --------- | ---------------------------- | ------- | -------- | ------------------------------------------------- |
+| steps     | `StepsItem[]`                | `[]`    | Y        | Array composed of step Props or finishStep Props. |
+| current   | `number`                     | `1`     | N        | Current step number.                              |
+| radius    | `'none'\|'sm'\|'xl'\|'full'` | `'sm'`  | N        | Border radius style.                              |
+| barBorder | `boolean`                    | `true`  | N        | Whether the icon has a border.                    |
+| vertical  | `boolean`                    | `false` | N        | Whether to use vertical layout.                   |
 
 ## StepsItem Props
 

+ 4 - 4
docs/mds/components/swiper/api.md

@@ -20,13 +20,13 @@
 | px                  | `'0'\|'1'\|'2'\|'4'\|'6'\|'8'\|'12'\|'16'\|'24'` | `'0'`         | N    | 容器横向内边距。             |
 | py                  | `'0'\|'1'\|'2'\|'4'\|'6'\|'8'\|'12'`             | `'0'`         | N    | 容器纵向内边距。             |
 | translateX          | `number`                                         | `0`           | N    | 未激活容器 X 方向偏移值。    |
-| translateZ          | `number`                                         | `0`           | N    | 未激活容器 Z 方向偏移值。   |
+| translateZ          | `number`                                         | `0`           | N    | 未激活容器 Z 方向偏移值。    |
 | rotateX             | `number`                                         | `0`           | N    | 未激活容器 X 轴旋转值。      |
 | rotateY             | `number`                                         | `0`           | N    | 未激活容器 Y 轴旋转值。      |
 | rotateZ             | `number`                                         | `0`           | N    | 未激活容器 Z 轴旋转值。      |
 | activeInjClass      | `string`                                         | `''`          | N    | 激活容器注入 Class。         |
 | notActiveInjClass   | `string`                                         | `''`          | N    | 未激活容器注入 Class。       |
-| radius              | `'none'\|'base'\|'xl'\|'2xl'\|'full'`            | `'none'`      | N    | 容器内部区域圆角。           |
+| radius              | `'none'\|'sm'\|'xl'\|'2xl'\|'full'`              | `'none'`      | N    | 容器内部区域圆角。           |
 | triggerLong         | `number`                                         | `30`          | N    | 始终触发的滑动距离百分比。   |
 | notTriggerLong      | `number`                                         | `10`          | N    | 始终不触发的滑动距离百分比。 |
 | triggerSpeed        | `number`                                         | `0.5`         | N    | 触发的滑动速度系数。         |
@@ -42,11 +42,11 @@
 ## SwiperImg
 
 ```javascript
-type SwiperImg = { type: 'img'; url: string };
+type SwiperImg = { type: 'img', url: string };
 ```
 
 ## SwiperComponent
 
 ```javascript
-type SwiperComponent = { type: 'component'; component: Component };
+type SwiperComponent = { type: 'component', component: Component };
 ```

+ 3 - 3
docs/mds/components/swiper/api_en.md

@@ -26,7 +26,7 @@
 | rotateZ             | `number`                                         | `0`           | N        | Inactive container Z-axis rotation.             |
 | activeInjClass      | `string`                                         | `''`          | N        | Active container injected class.                |
 | notActiveInjClass   | `string`                                         | `''`          | N        | Inactive container injected class.              |
-| radius              | `'none'\|'base'\|'xl'\|'2xl'\|'full'`            | `'none'`      | N        | Container inner area border radius.             |
+| radius              | `'none'\|'sm'\|'xl'\|'2xl'\|'full'`              | `'none'`      | N        | Container inner area border radius.             |
 | triggerLong         | `number`                                         | `30`          | N        | Slide distance percentage that always triggers. |
 | notTriggerLong      | `number`                                         | `10`          | N        | Slide distance percentage that never triggers.  |
 | triggerSpeed        | `number`                                         | `0.5`         | N        | Slide speed coefficient that triggers.          |
@@ -42,11 +42,11 @@
 ## SwiperImg
 
 ```javascript
-type SwiperImg = { type: 'img'; url: string };
+type SwiperImg = { type: 'img', url: string };
 ```
 
 ## SwiperComponent
 
 ```javascript
-type SwiperComponent = { type: 'component'; component: Component };
+type SwiperComponent = { type: 'component', component: Component };
 ```

+ 11 - 11
docs/mds/components/switch/api.md

@@ -1,19 +1,19 @@
 ## Switch Props
 
-| 名称     | 类型                                                            | 默认值   | 必传 | 说明                                            |
-| -------- | --------------------------------------------------------------- | -------- | ---- | ----------------------------------------------- |
-| active   | `boolean`                                                       | `false`  | N    | 开关状态。                                      |
-| radius   | `'none'\|'base'\|'full'`                                        | `'base'` | N    | 圆角风格。                                      |
-| inside   | `'state'\|'loading'\|[string,string]\|null`                     | `null`   | N    | 开关内部内容。                                  |
-| injClass | `string`                                                        | `''`     | N    | 注入 CSS 名称。                                 |
-| disabled | `boolean`                                                       | `false`  | N    | 是否禁用。                                      |
-| async    | `boolean`                                                       | `false`  | N    | 是否异步。                                      |
-| loading  | [`Loading`](https://stdf.design/#/components?nav=loading&tab=1) | `{}`     | N    | 加载组件参数,仅 inside 为 `'loading'` 时生效。 |
+| 名称     | 类型                                                            | 默认值     | 必传 | 说明                                            |
+| -------- | --------------------------------------------------------------- | ---------- | ---- | ----------------------------------------------- |
+| active   | `boolean`                                                       | `false`    | N    | 开关状态。                                      |
+| radius   | `'none'\|'middle'\|'full'`                                      | `'middle'` | N    | 圆角风格。                                      |
+| inside   | `'state'\|'loading'\|[string,string]\|null`                     | `null`     | N    | 开关内部内容。                                  |
+| injClass | `string`                                                        | `''`       | N    | 注入 CSS 名称。                                 |
+| disabled | `boolean`                                                       | `false`    | N    | 是否禁用。                                      |
+| async    | `boolean`                                                       | `false`    | N    | 是否异步。                                      |
+| loading  | [`Loading`](https://stdf.design/#/components?nav=loading&tab=1) | `{}`       | N    | 加载组件参数,仅 inside 为 `'loading'` 时生效。 |
 
 ## Switch Events
 
-| 名称     | 类型                        | 参数                    | 描述                  |
-| -------- | --------------------------- | ----------------------- | --------------------- |
+| 名称     | 类型                        | 参数                    | 描述                 |
+| -------- | --------------------------- | ----------------------- | -------------------- |
 | onclick  | `() => void`                | -                       | 点击触发。           |
 | onchange | `(active: boolean) => void` | active - 当前开关状态。 | 开关状态变化时触发。 |
 

+ 9 - 9
docs/mds/components/switch/api_en.md

@@ -1,14 +1,14 @@
 ## Switch Props
 
-| Name     | Type                                                            | Default  | Required | Description                                                              |
-| -------- | --------------------------------------------------------------- | -------- | -------- | ------------------------------------------------------------------------ |
-| active   | `boolean`                                                       | `false`  | N        | Switch state.                                                            |
-| radius   | `'none'\|'base'\|'full'`                                        | `'base'` | N        | Border radius style.                                                     |
-| inside   | `'state'\|'loading'\|[string,string]\|null`                     | `null`   | N        | Switch inner content.                                                    |
-| injClass | `string`                                                        | `''`     | N        | Injected CSS class name.                                                 |
-| disabled | `boolean`                                                       | `false`  | N        | Whether the switch is disabled.                                          |
-| async    | `boolean`                                                       | `false`  | N        | Whether the switch is asynchronous.                                      |
-| loading  | [`Loading`](https://stdf.design/#/components?nav=loading&tab=1) | `{}`     | N        | Loading component parameters, only effective when inside is `'loading'`. |
+| Name     | Type                                                            | Default    | Required | Description                                                              |
+| -------- | --------------------------------------------------------------- | ---------- | -------- | ------------------------------------------------------------------------ |
+| active   | `boolean`                                                       | `false`    | N        | Switch state.                                                            |
+| radius   | `'none'\|'middle'\|'full'`                                      | `'middle'` | N        | Border radius style.                                                     |
+| inside   | `'state'\|'loading'\|[string,string]\|null`                     | `null`     | N        | Switch inner content.                                                    |
+| injClass | `string`                                                        | `''`       | N        | Injected CSS class name.                                                 |
+| disabled | `boolean`                                                       | `false`    | N        | Whether the switch is disabled.                                          |
+| async    | `boolean`                                                       | `false`    | N        | Whether the switch is asynchronous.                                      |
+| loading  | [`Loading`](https://stdf.design/#/components?nav=loading&tab=1) | `{}`       | N        | Loading component parameters, only effective when inside is `'loading'`. |
 
 ## Switch Events
 

+ 1 - 1
docs/mds/components/tabs/api.md

@@ -27,7 +27,7 @@
 | labels            | `TabLabel[]`                                          | `[]`     | Y    | 选项卡内容组。                     |
 | active            | `number`                                              | `0`      | N    | 激活的选项卡索引值。               |
 | lineType          | `boolean`                                             | `false`  | N    | 是否使用线性风格。                 |
-| radius            | `'none'\|'base'\|'xl'\|'full'`                        | `'base'` | N    | 圆角风格。                         |
+| radius            | `'none'\|'sm'\|'xl'\|'full'`                          | `'sm'`   | N    | 圆角风格。                         |
 | mx                | `'0'\|'1'\|'2'\|'3'\|'4'\|'6'\|'8'\|'12'\|'16'\|'20'` | `'2'`    | N    | 左右间距。                         |
 | duration          | `'fast'\|'base'\|'slow'\|'slower'`                    | `'base'` | N    | 过渡动画快慢。                     |
 | layout            | `'h'\|'v'`                                            | `'h'`    | N    | 水平或垂直布局。                   |

+ 1 - 1
docs/mds/components/tabs/api_en.md

@@ -27,7 +27,7 @@
 | labels            | `TabLabel[]`                                          | `[]`     | Y        | Tab content group.                               |
 | active            | `number`                                              | `0`      | N        | Active tab index.                                |
 | lineType          | `boolean`                                             | `false`  | N        | Whether to use line style.                       |
-| radius            | `'none'\|'base'\|'xl'\|'full'`                        | `'base'` | N        | Border radius style.                             |
+| radius            | `'none'\|'sm'\|'xl'\|'full'`                          | `'sm'`   | N        | Border radius style.                             |
 | mx                | `'0'\|'1'\|'2'\|'3'\|'4'\|'6'\|'8'\|'12'\|'16'\|'20'` | `'2'`    | N        | Horizontal margin.                               |
 | duration          | `'fast'\|'base'\|'slow'\|'slower'`                    | `'base'` | N        | Transition animation duration.                   |
 | layout            | `'h'\|'v'`                                            | `'h'`    | N        | Horizontal or vertical layout.                   |

+ 1 - 1
docs/mds/components/toast/api.md

@@ -7,7 +7,7 @@
 | duration         | `number`                                                         | `2000`     | N    | 显示时长,为 0 时提示不会自动关闭,单位:ms。                         |
 | position         | `'center'\|'top'\|'bottom'`                                      | `'center'` | N    | 显示位置。                                                            |
 | py               | `'0'\|'10'\|'20'\|'40'\|'60'\|'80'`                              | `'20'`     | N    | 顶部和底部显示时距离顶部或底部的距离,position 为 'center' 时不生效。 |
-| radius           | `'none'\|'sm'\|'base'\|'md'\|'lg'\|'xl'\|'2xl'\|'full'`          | `'base'`   | N    | 圆角风格。                                                            |
+| radius           | `'none'\|'xs'\|'sm'\|'md'\|'lg'\|'xl'\|'2xl'\|'full'`            | `'sm'`     | N    | 圆角风格。                                                            |
 | transitionType   | `'scale'\|'fly'\|'fade'\|'slide'\|'blur'\|null`                  | `'scale'`  | N    | 动画类型。                                                            |
 | transitionParams | [`Transition`](https://svelte.dev/docs/svelte/svelte-transition) | `{}`       | N    | 动画参数,其中 duration 默认 300。                                    |
 | outDuration      | `number`                                                         | `0`        | N    | 退出动画时间,单位:ms。                                              |

+ 1 - 1
docs/mds/components/toast/api_en.md

@@ -7,7 +7,7 @@
 | duration         | `number`                                                         | `2000`     | N        | Display duration in ms. Toast won't auto-close if set to 0.                        |
 | position         | `'center'\|'top'\|'bottom'`                                      | `'center'` | N        | Display position.                                                                  |
 | py               | `'0'\|'10'\|'20'\|'40'\|'60'\|'80'`                              | `'20'`     | N        | Distance from top/bottom when position is 'top'/'bottom'. Ignored for 'center'.    |
-| radius           | `'none'\|'sm'\|'base'\|'md'\|'lg'\|'xl'\|'2xl'\|'full'`          | `'base'`   | N        | Border radius style.                                                               |
+| radius           | `'none'\|'xs'\|'sm'\|'md'\|'lg'\|'xl'\|'2xl'\|'full'`            | `'sm'`     | N        | Border radius style.                                                               |
 | transitionType   | `'scale'\|'fly'\|'fade'\|'slide'\|'blur'\|null`                  | `'scale'`  | N        | Animation type.                                                                    |
 | transitionParams | [`Transition`](https://svelte.dev/docs/svelte/svelte-transition) | `{}`       | N        | Animation parameters, default duration is 300.                                     |
 | outDuration      | `number`                                                         | `0`        | N        | Exit animation duration in ms.                                                     |

+ 1 - 1
packages/stdf/src/lib/components/actionSheet/ActionSheet.svelte

@@ -34,7 +34,7 @@
 			danger: ' text-error ',
 			disabled: ' text-black/20 dark:text-white/20 '
 		},
-		imgRadius: { none: 'rounded-none', base: 'rounded', full: 'rounded-full', lg: 'rounded-lg' },
+		imgRadius: { none: 'rounded-none', sm: 'rounded-sm', full: 'rounded-full', lg: 'rounded-lg' },
 		align: { left: 'justify-start pl-4', center: 'justify-center', right: 'justify-end pr-4' }
 	};
 

+ 3 - 3
packages/stdf/src/lib/components/avatar/Avatar.svelte

@@ -7,7 +7,7 @@
 		alt = '',
 		icon = {},
 		altSize = 'md',
-		radius = 'base',
+		radius = 'sm',
 		size = 'base',
 		imgSize = 'l',
 		line = 'none',
@@ -19,7 +19,7 @@
 	// radius style
 	const radiusObj = {
 		none: 'rounded-none',
-		base: 'rounded',
+		sm: 'rounded-sm',
 		xl: 'rounded-xl',
 		'2xl': 'rounded-2xl',
 		'3xl': 'rounded-3xl',
@@ -68,7 +68,7 @@
 
 <button
 	class="bg-primary-200 dark:bg-dark-200 flex justify-center overflow-hidden relative{lineObj[line] || ''} {sizeObj[size] ||
-		sizeObj.md} {radiusObj[radius] || radiusObj.base} {injClass}"
+		sizeObj.md} {radiusObj[radius] || radiusObj.sm} {injClass}"
 	onclick={() => onclick && onclick()}
 >
 	{#if image === '' && alt === ''}

+ 8 - 8
packages/stdf/src/lib/components/avatar/Avatars.svelte

@@ -20,7 +20,7 @@
 	// radius style
 	const radiusObj = {
 		none: 'rounded-none',
-		base: 'rounded',
+		sm: 'rounded-sm',
 		xl: 'rounded-xl',
 		'2xl': 'rounded-2xl',
 		'3xl': 'rounded-3xl',
@@ -68,21 +68,21 @@
 	{#if reverse}
 		<div
 			class="relative {lineWidthClass[lineWidth] || lineWidthClass[2]} ring-primaryWhite dark:ring-darkBlack {radiusObj[radius] ||
-				radiusObj.base} {injClass}"
+				radiusObj.sm} {injClass}"
 			style="z-index:{dataInner.length}"
 		>
 			{#if top === 'totle'}
 				<div
 					class="bg-primary-200 dark:bg-dark-200 text-primary-950 dark:text-dark-950 flex flex-col justify-center overflow-hidden text-center {radiusObj[
 						radius
-					] || radiusObj.base} {sizeObj[size] || sizeObj.md} {textSizeObj[size] || textSizeObj.base}"
+					] || radiusObj.sm} {sizeObj[size] || sizeObj.md} {textSizeObj[size] || textSizeObj.base}"
 				>
 					+{data.length}
 				</div>
 			{:else if top === 'add'}
 				<div
 					class="bg-primary-200 dark:bg-dark-200 flex flex-col justify-center overflow-hidden text-center {radiusObj[radius] ||
-						radiusObj.base} {sizeObj[size] || sizeObj.md} {textSizeObj[size] || textSizeObj.base}"
+						radiusObj.sm} {sizeObj[size] || sizeObj.md} {textSizeObj[size] || textSizeObj.base}"
 				>
 					<Icon name="ri-user-add-line" injClass="text-primary-950 dark:text-dark-950" />
 				</div>
@@ -94,7 +94,7 @@
 	{#each dataInner as item, i}
 		<div
 			class="relative {lineWidthClass[lineWidth] || lineWidthClass[2]} ring-primaryWhite dark:ring-darkBlack {radiusObj[radius] ||
-				radiusObj.base} {injClass}"
+				radiusObj.sm} {injClass}"
 			style="transform: translateX({-compact * 10 * i - (reverse ? 50 : 0)}%);z-index:{reverse ? dataInner.length - 1 - i : i}"
 		>
 			<Avatar {radius} {size} {...item} />
@@ -103,21 +103,21 @@
 	{#if !reverse}
 		<div
 			class="relative {lineWidthClass[lineWidth] || lineWidthClass[2]} ring-primaryWhite dark:ring-darkBlack {radiusObj[radius] ||
-				radiusObj.base} {injClass}"
+				radiusObj.sm} {injClass}"
 			style="transform: translateX(-{compact * 10 * dataInner.length}%);z-index:{dataInner.length}"
 		>
 			{#if top === 'totle'}
 				<div
 					class="bg-primary-200 dark:bg-dark-200 text-primary-950 dark:text-dark-950 flex flex-col justify-center overflow-hidden text-center {radiusObj[
 						radius
-					] || radiusObj.base} {sizeObj[size] || sizeObj.md} {textSizeObj[size] || textSizeObj.base}"
+					] || radiusObj.sm} {sizeObj[size] || sizeObj.md} {textSizeObj[size] || textSizeObj.base}"
 				>
 					+{data.length}
 				</div>
 			{:else if top === 'add'}
 				<div
 					class="bg-primary-200 dark:bg-dark-200 flex flex-col justify-center overflow-hidden text-center {radiusObj[radius] ||
-						radiusObj.base} {sizeObj[size] || sizeObj.md} {textSizeObj[size] || textSizeObj.base}"
+						radiusObj.sm} {sizeObj[size] || sizeObj.md} {textSizeObj[size] || textSizeObj.base}"
 				>
 					<Icon name="ri-user-add-line" injClass="text-primary-950 dark:text-dark-950" />
 				</div>

+ 1 - 1
packages/stdf/src/lib/components/badge/Badge.svelte

@@ -16,7 +16,7 @@
 	// radius style
 	const radiusObj = {
 		full: ' rounded-full',
-		base: ' rounded',
+		sm: ' rounded-sm',
 		none: ' rounded-none',
 		leftLeaf: ' rounded-full rounded-br-none',
 		rightLeaf: ' rounded-full rounded-bl-none'

+ 3 - 7
packages/stdf/src/lib/components/bottomSheet/BottomSheet.svelte

@@ -115,15 +115,11 @@
 
 	// 窗口圆角风格
 	// window radius style
-	const windowRadiusClass = {
-		none: ' rounded-none',
-		base: ' rounded-t-lg',
-		full: ' rounded-t-2xl'
-	};
+	const windowRadiusClass = { none: ' rounded-none', middle: ' rounded-t-lg', full: ' rounded-t-2xl' };
 
 	// 图标圆角风格
 	// icon radius style
-	const iconRadiusClass = { none: ' rounded-none', base: ' rounded', full: ' rounded-full' };
+	const iconRadiusClass = { none: ' rounded-none', middle: ' rounded-sm', full: ' rounded-full' };
 
 	// 滑动开始
 	// start sliding
@@ -300,7 +296,7 @@
 							<Icon name="ri-arrow-down-s-line" alpha={0.4} size={16} top={-1} />
 						</button>
 					{:else}
-						<button class="cursor-pointer font-bold text-primary dark:text-dark" onclick={closeFunc}>{closeContent}</button>
+						<button class="text-primary dark:text-dark cursor-pointer font-bold" onclick={closeFunc}>{closeContent}</button>
 					{/if}
 				</div>
 			</div>

+ 4 - 16
packages/stdf/src/lib/components/button/Button.svelte

@@ -6,7 +6,7 @@
 	let {
 		fill = 'base',
 		state = 'theme',
-		radius = 'base',
+		radius = 'sm',
 		size = 'big',
 		line = 'solid',
 		injClass = '',
@@ -29,23 +29,11 @@
 
 	// 状态样式
 	// State style
-	const stateObj = {
-		theme: 'bg-primary dark:bg-dark',
-		success: 'bg-success',
-		warning: 'bg-warning',
-		error: 'bg-error',
-		info: 'bg-info'
-	};
+	const stateObj = { theme: 'bg-primary dark:bg-dark', success: 'bg-success', warning: 'bg-warning', error: 'bg-error', info: 'bg-info' };
 
 	// 圆角风格样式
 	// Corner style style
-	const radiusObj = {
-		none: 'rounded-none',
-		base: 'rounded',
-		xl: 'rounded-xl',
-		'2xl': 'rounded-2xl',
-		full: 'rounded-full'
-	};
+	const radiusObj = { none: 'rounded-none', sm: 'rounded-sm', xl: 'rounded-xl', '2xl': 'rounded-2xl', full: 'rounded-full' };
 
 	// 填充模式样式
 	// Fill mode style
@@ -94,7 +82,7 @@
 		class="inline-flex items-center justify-center gap-1 truncate {!group && !innerDisabled ? 'active:opacity-80' : ''} {heightInObj[
 			heightIn
 		] || heightInObj['3']} {sizeObj[size] || sizeObj.big} {textColor} {lineObj[line] || lineObj.solid} {radiusObj[radius] ||
-			radiusObj.base} {fill === 'base' && (stateObj[state] || stateObj.theme)} {fillObj[fill] || fillObj.base} {injClass} {innerDisabled
+			radiusObj.sm} {fill === 'base' && (stateObj[state] || stateObj.theme)} {fillObj[fill] || fillObj.base} {injClass} {innerDisabled
 			? 'cursor-not-allowed opacity-50'
 			: ''}"
 		disabled={innerDisabled}

+ 5 - 5
packages/stdf/src/lib/components/calendar/Calendar.svelte

@@ -53,7 +53,7 @@
 
 	// 圆角风格样式
 	// Rounded style style
-	const radiusClass = { base: 'rounded', xl: 'rounded-xl', '2xl': 'rounded-2xl', none: 'rounded-none' };
+	const radiusClass = { sm: 'rounded-sm', xl: 'rounded-xl', '2xl': 'rounded-2xl', none: 'rounded-none' };
 
 	// 月份水印文字大小样式
 	// Month watermark text size style
@@ -306,7 +306,7 @@
 				<div class="calendar-container flex flex-nowrap gap-4 overflow-x-auto px-4 pb-1 pt-2">
 					{#each quickSelects as item}
 						<button
-							class="flex-none rounded bg-white px-2 py-1 text-xs shadow-sm dark:bg-black dark:shadow-white/10"
+							class="flex-none rounded-sm bg-white px-2 py-1 text-xs shadow-sm dark:bg-black dark:shadow-white/10"
 							class:!bg-primary={isQuickSelect && quickSelectItem === item}
 							class:text-white={isQuickSelect && quickSelectItem === item}
 							class:dark:!bg-dark={isQuickSelect && quickSelectItem === item}
@@ -384,13 +384,13 @@
 									mode === 'range' &&
 									(selectedDateStr.indexOf(`${item.year}${item.month}${day.text}`) === selectedDateStr.length - 8 || day.end)}
 								class:!rounded-none={radius === 'none' && mode !== 'range'}
-								class:!rounded-l={radius === 'base' &&
+								class:!rounded-l-sm={radius === 'sm' &&
 									mode === 'range' &&
 									(selectedDateStr.indexOf(`${item.year}${item.month}${day.text}`) === 0 || day.start)}
-								class:!rounded-r={radius === 'base' &&
+								class:!rounded-r-sm={radius === 'sm' &&
 									mode === 'range' &&
 									(selectedDateStr.indexOf(`${item.year}${item.month}${day.text}`) === selectedDateStr.length - 8 || day.end)}
-								class:!rounded={radius === 'base' && mode !== 'range'}
+								class:!rounded-sm={radius === 'sn' && mode !== 'range'}
 							>
 								<div
 									class="{radiusClass[radius] || 'rounded-xl'} relative flex h-full w-full flex-col justify-center {day.info

+ 1 - 1
packages/stdf/src/lib/components/cell/Cell.svelte

@@ -29,7 +29,7 @@
 	// Rounded style style
 	const radiusObj = {
 		none: ' rounded-none',
-		base: ' rounded',
+		sm: ' rounded-sm',
 		md: ' rounded-md',
 		lg: ' rounded-lg',
 		xl: ' rounded-xl',

+ 1 - 1
packages/stdf/src/lib/components/cell/CellGroup.svelte

@@ -14,7 +14,7 @@
 	};
 	const radiusClass = {
 		none: ' rounded-none',
-		base: ' rounded',
+		sm: ' rounded-sm',
 		md: ' rounded-md',
 		lg: ' rounded-lg',
 		xl: ' rounded-xl',

+ 8 - 8
packages/stdf/src/lib/components/indexBar/IndexBar.svelte

@@ -9,7 +9,7 @@
 		current = $bindable(0),
 		top = 0,
 		height = 100,
-		radius = 'base',
+		radius = 'middle',
 		scrollAlign = true,
 		titleInjClass = '',
 		textInjClass = '',
@@ -48,7 +48,7 @@
 
 	// 圆角风格样式
 	// Rounded style style
-	const radiusObj = { none: 'rounded-none', base: 'rounded', full: 'rounded-full' };
+	const radiusObj = { none: 'rounded-none', middle: 'rounded-sm', full: 'rounded-full' };
 
 	onMount(() => {
 		if (bodyDom) {
@@ -134,7 +134,7 @@
 <div bind:this={bodyDom} class="overflow-y-auto {scrollAlign && 'snap-y'}" onscroll={scrollBody} style="height:{height}px;">
 	{#each data as group, index}
 		<div class="snap-start px-4 pt-8" bind:clientHeight={group.height}>
-			<div class="text-sm text-primary dark:text-dark {titleInjClass}">{group.title}</div>
+			<div class="text-primary dark:text-dark text-sm {titleInjClass}">{group.title}</div>
 			{#each group.child as child, childIndex}
 				<button class="w-full py-2 text-left {textInjClass}" onclick={() => onclickChild && onclickChild(index, group, childIndex, child)}>
 					{child}
@@ -152,23 +152,23 @@
 	bind:this={barDom}
 	class="fixed right-5 flex w-7 cursor-move touch-none select-none flex-col justify-around bg-black/5 p-1 dark:bg-white/5 {radiusObj[
 		radius
-	] || radiusObj.base}"
+	] || radiusObj.middle}"
 	style="top:{top + (height - barHeight) / 2}px;min-height:{height / 4}px;"
 >
 	{#each data as group, i}
 		<div class="relative flex flex-1 flex-col justify-center">
 			<div
 				class="h-5 w-5 text-center text-xs leading-5 transition-all {current === i
-					? 'bg-primary text-white dark:bg-dark dark:text-black'
-					: 'text-gray-600 dark:text-gray-400'} {radiusObj[radius] || radiusObj.base}"
+					? 'bg-primary dark:bg-dark text-white dark:text-black'
+					: 'text-gray-600 dark:text-gray-400'} {radiusObj[radius] || radiusObj.middle}"
 			>
 				{group.index}
 			</div>
 			{#if currentTouch === i}
 				<div
-					class="absolute -left-24 top-1/2 h-14 w-14 -translate-y-2/4 border border-primary text-center text-3xl leading-[3.5rem] text-primary dark:border-dark dark:text-dark {radiusObj[
+					class="border-primary text-primary dark:border-dark dark:text-dark absolute -left-24 top-1/2 h-14 w-14 -translate-y-2/4 border text-center text-3xl leading-[3.5rem] {radiusObj[
 						radius
-					] || radiusObj.base}"
+					] || radiusObj.middle}"
 					transition:fly={{ x: 38, duration: 300 }}
 				>
 					{group.index}

+ 5 - 5
packages/stdf/src/lib/components/input/Input.svelte

@@ -14,7 +14,7 @@
 		titlePosition = 'out',
 		inputPosition = 'left',
 		placeholder = '',
-		radius = 'base',
+		radius = 'sm',
 		label1 = null,
 		label2 = null,
 		label3 = null,
@@ -105,12 +105,12 @@
 
 	// 圆角风格样式
 	// Corner style style
-	const radiusObj = { none: 'rounded-none', base: 'rounded', xl: 'rounded-xl', '2xl': 'rounded-2xl', full: 'rounded-full' };
+	const radiusObj = { none: 'rounded-none', sm: 'rounded-sm', xl: 'rounded-xl', '2xl': 'rounded-2xl', full: 'rounded-full' };
 
 	// 输入框风格样式
 	// Input box style style
 	const inputStyleObj = {
-		block: 'px-2 ring-2 ring-transparent bg-black/5 dark:bg-white/5 ' + radiusObj[radius] || radiusObj.base,
+		block: 'px-2 ring-2 ring-transparent bg-black/5 dark:bg-white/5 ' + radiusObj[radius] || radiusObj.sm,
 		line: 'px-1 border-b bg-transparent border-gray-300 dark:border-gray-500'
 	};
 
@@ -127,7 +127,7 @@
 	// 根据是否获取焦点判断输入框样式
 	// Determine the input box style according to whether to get focus
 	const inputStyleFocusObj = $derived({
-		block: 'px-2 ring-2 bg-transparent ' + stateObj[inputState] || stateObj.theme + radiusObj[radius] || radiusObj.base,
+		block: 'px-2 ring-2 bg-transparent ' + stateObj[inputState] || stateObj.theme + radiusObj[radius] || radiusObj.sm,
 		line: 'px-1 border-b bg-transparent border-gray-300 dark:border-gray-500'
 	});
 
@@ -256,7 +256,7 @@
 			class="relative my-0.5 flex items-center space-x-1 whitespace-nowrap text-sm transition-all {durationObj[duration] ||
 				durationObj.base} {titlePosition === 'in' ? 'py-1' : 'py-3'} {focus
 				? inputStyleFocusObj[inputStyle] || inputStyleFocusObj.block
-				: inputStyleObj[inputStyle] || inputStyleObj.block} {inputStyle === 'block' ? radiusObj[radius] || radiusObj.base : ''}"
+				: inputStyleObj[inputStyle] || inputStyleObj.block} {inputStyle === 'block' ? radiusObj[radius] || radiusObj.sm : ''}"
 		>
 			{#if label1Child}
 				{@render label1Child?.()}

+ 1 - 1
packages/stdf/src/lib/components/loading/loadings/oneColor/1_30.svelte

@@ -15,7 +15,7 @@
 	{#each [0, -0.36, -0.2] as item}
 		<div class="cube h-2 w-2" style="animation-duration: {1.75 / speed}s; animation-delay: calc({1.75 / speed}s * {item})">
 			<div
-				class="cube__inner h-2 w-2 rounded-sm{colorClass()}"
+				class="cube__inner h-2 w-2 rounded-xs{colorClass()}"
 				style="background-color: {customColor[0]}; animation-duration: {1.75 / speed}s; animation-delay: calc({1.75 / speed}s * {item})"
 			></div>
 		</div>

+ 3 - 3
packages/stdf/src/lib/components/numKeyboard/NumKeyboard.svelte

@@ -23,7 +23,7 @@
 		close = false,
 		doneText = commonLang.done,
 		doneDisabled = $bindable(false),
-		radius = 'base',
+		radius = 'sm',
 		clear = false,
 		panelClass = '',
 		keyClass = '',
@@ -54,7 +54,7 @@
 	// radius class
 	const radiusClass = {
 		none: 'rounded-none',
-		base: 'rounded',
+		sm: 'rounded-sm',
 		md: 'rounded-md',
 		lg: 'rounded-lg',
 		xl: 'rounded-xl',
@@ -76,7 +76,7 @@
 	// Button type class
 	const buttonClass = `flex flex-col justify-center items-center shadow-xs font-bold active:scale-95 transition-all duration-100 ${
 		heightClass[height] || 'h-12'
-	} ${fontSizeClass[height] || 'text-base'} ${radiusClass[radius] || 'rounded'}${keyClass ? ' ' + keyClass : ''}`;
+	} ${fontSizeClass[height] || 'text-base'} ${radiusClass[radius] || 'rounded-sm'}${keyClass ? ' ' + keyClass : ''}`;
 
 	// 块式 class
 	// Block type class

+ 17 - 4
packages/stdf/src/lib/components/pagination/Page.svelte

@@ -1,7 +1,13 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 
-	type Props = { active?: boolean; radius?: string; type?: string; children?: Snippet; onclick?: () => void };
+	type Props = {
+		active?: boolean;
+		radius?: 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'none';
+		type?: 'border' | 'block' | 'bold';
+		children?: Snippet;
+		onclick?: () => void;
+	};
 	let { active = false, radius = 'md', type = 'border', children, onclick }: Props = $props();
 
 	const typeClass = {
@@ -10,14 +16,21 @@
 		bold: 'font-bold text-primary dark:text-dark border-transparent'
 	};
 
-	const radiusClass = { base: 'rounded', md: 'rounded-md', lg: 'rounded-lg', xl: 'rounded-xl', full: 'rounded-full', none: 'rounded-none' };
+	const radiusClass = {
+		sm: 'rounded-sm',
+		md: 'rounded-md',
+		lg: 'rounded-lg',
+		xl: 'rounded-xl',
+		full: 'rounded-full',
+		none: 'rounded-none'
+	};
 </script>
 
 <button
 	{onclick}
 	class="flex-1 border py-2 {active
-		? typeClass[type as keyof typeof typeClass] || typeClass.border
-		: 'border-transparent' + (type === 'bold' ? ' opacity-50' : '')} {radiusClass[radius as keyof typeof radiusClass] || radiusClass.base}"
+		? typeClass[type] || typeClass.border
+		: 'border-transparent' + (type === 'bold' ? ' opacity-50' : '')} {radiusClass[radius] || radiusClass.md}"
 >
 	{@render children?.()}
 </button>

+ 12 - 5
packages/stdf/src/lib/components/pagination/Pagination.svelte

@@ -186,14 +186,21 @@
 
 	// 圆角样式
 	// radius class
-	const radiusClass = { base: 'rounded', md: 'rounded-md', lg: 'rounded-lg', xl: 'rounded-xl', full: 'rounded-full', none: 'rounded-none' };
+	const radiusClass = {
+		sm: 'rounded-sm',
+		md: 'rounded-md',
+		lg: 'rounded-lg',
+		xl: 'rounded-xl',
+		full: 'rounded-full',
+		none: 'rounded-none'
+	};
 </script>
 
 <div class="relative flex justify-between bg-white py-1 text-center text-sm dark:bg-black {injClass}">
 	<button
 		class="flex-1 border border-transparent py-2 transition-all {current > 1
 			? 'text-primary dark:text-dark'
-			: 'text-primary/30 dark:text-dark/30'} {radiusClass[radius] || radiusClass.base} active:scale-75"
+			: 'text-primary/30 dark:text-dark/30'} {radiusClass[radius] || radiusClass.md} active:scale-75"
 		onclick={preFunc}
 	>
 		<Icon name="ri-arrow-left-s-line" size={18} />
@@ -215,7 +222,7 @@
 			<button
 				class="flex-1 border py-2 {showPreOmitPage
 					? typeClass[type] || typeClass.border
-					: 'border-transparent' + (type === 'bold' ? ' opacity-50' : '')} {radiusClass[radius] || radiusClass.base}"
+					: 'border-transparent' + (type === 'bold' ? ' opacity-50' : '')} {radiusClass[radius] || radiusClass.md}"
 				onclick={() => !continuous && clickPreEllipsisFunc()}
 			>
 				{#if type === 'bold' && showPreOmitPage}
@@ -257,7 +264,7 @@
 			<button
 				class="flex-1 border py-2 {showNextOmitPage
 					? typeClass[type] || typeClass.border
-					: 'border-transparent' + (type === 'bold' ? ' opacity-50' : '')} {radiusClass[radius] || radiusClass.base}"
+					: 'border-transparent' + (type === 'bold' ? ' opacity-50' : '')} {radiusClass[radius] || radiusClass.md}"
 				onclick={() => !continuous && clickNextEllipsisFunc()}
 			>
 				{#if type === 'bold' && showNextOmitPage}
@@ -272,7 +279,7 @@
 	<button
 		class="flex-1 border border-transparent py-2 transition-all {current < totalPage
 			? 'text-primary dark:text-dark'
-			: 'text-primary/30 dark:text-dark/30'} {radiusClass[radius] || radiusClass.base} active:scale-75"
+			: 'text-primary/30 dark:text-dark/30'} {radiusClass[radius] || radiusClass.md} active:scale-75"
 		onclick={nextFunc}
 	>
 		<Icon name="ri-arrow-right-s-line" size={20} />

+ 2 - 2
packages/stdf/src/lib/components/placeholder/Placeholder.svelte

@@ -23,7 +23,7 @@
 	// radius style
 	const radiusObj = {
 		none: ' rounded-none',
-		base: ' rounded',
+		sm: ' rounded-sm',
 		md: ' rounded-md',
 		xl: ' rounded-xl',
 		'2xl': ' rounded-2xl',
@@ -50,7 +50,7 @@
 
 <div
 	class="flex flex-col justify-center bg-black/5 dark:bg-white/5 text-center{heightObj[height as keyof typeof heightObj] ||
-		heightObj.full}{pyObj[py as keyof typeof pyObj] || pyObj['4']}{radiusObj[radius as keyof typeof radiusObj] || radiusObj.base}{shadowObj[
+		heightObj.full}{pyObj[py as keyof typeof pyObj] || pyObj['4']}{radiusObj[radius as keyof typeof radiusObj] || radiusObj.md}{shadowObj[
 		shadow as keyof typeof shadowObj
 	] || shadowObj.none}{injClass === '' ? '' : ` ${injClass}`}"
 >

+ 5 - 5
packages/stdf/src/lib/components/popup/Popup.svelte

@@ -34,7 +34,7 @@
 	const radiusFun = () => {
 		const radioMap = {
 			none: 'rounded-none',
-			base: 'rounded',
+			sm: 'rounded-sm',
 			md: 'rounded-md',
 			lg: 'rounded-lg',
 			xl: 'rounded-xl',
@@ -44,7 +44,7 @@
 		};
 		const radiusTopMap = {
 			none: 'rounded-t-none',
-			base: 'rounded-t',
+			sm: 'rounded-t-sm',
 			md: 'rounded-t-md',
 			lg: 'rounded-t-lg',
 			xl: 'rounded-t-xl',
@@ -54,7 +54,7 @@
 		};
 		const radiusBottomMap = {
 			none: 'rounded-b-none',
-			base: 'rounded-b',
+			sm: 'rounded-b-sm',
 			md: 'rounded-b-md',
 			lg: 'rounded-b-lg',
 			xl: 'rounded-b-xl',
@@ -64,7 +64,7 @@
 		};
 		const radiusLeftMap = {
 			none: 'rounded-l-none',
-			base: 'rounded-l',
+			sm: 'rounded-l-sm',
 			md: 'rounded-l-md',
 			lg: 'rounded-l-lg',
 			xl: 'rounded-l-xl',
@@ -74,7 +74,7 @@
 		};
 		const radiusRightMap = {
 			none: 'rounded-r-none',
-			base: 'rounded-r',
+			sm: 'rounded-r-sm',
 			md: 'rounded-r-md',
 			lg: 'rounded-r-lg',
 			xl: 'rounded-r-xl',

+ 1 - 1
packages/stdf/src/lib/components/progress/Progress.svelte

@@ -20,7 +20,7 @@
 
 	// 圆角样式
 	// radius class
-	const radiusClass = { full: ' rounded-full', base: ' rounded', none: ' rounded-none' };
+	const radiusClass = { full: ' rounded-full', middle: ' rounded-sm', none: ' rounded-none' };
 
 	// 动画时间样式
 	// duration class

+ 4 - 4
packages/stdf/src/lib/components/skeleton/Skeleton.svelte

@@ -2,11 +2,11 @@
 	import Icon from '../icon/Icon.svelte';
 	import type { SkeletonProps } from '../../types/index.js';
 
-	let { type = 'div', width = '6', height = '6', radius = 'base', space = '1', lines = 3, iconRatio = 0.6 }: SkeletonProps = $props();
+	let { type = 'div', width = '6', height = '6', radius = 'sm', space = '1', lines = 3, iconRatio = 0.6 }: SkeletonProps = $props();
 
 	const radiusObj = {
 		none: ' rounded-none',
-		base: ' rounded',
+		sm: ' rounded-sm',
 		md: ' rounded-md',
 		xl: ' rounded-xl',
 		'2xl': ' rounded-2xl',
@@ -67,13 +67,13 @@
 			{/each}
 			<div
 				class="bg-black/20 dark:bg-white/20 {randomArr[Math.floor(Math.random() * randomArr.length)]}{heightObj[height] ||
-					heightObj['6']}{radiusObj[radius] || radiusObj.base}"
+					heightObj['6']}{radiusObj[radius] || radiusObj.sm}"
 			></div>
 		</div>
 	{:else}
 		<div
 			class="bg-black/20 dark:bg-white/20{widthObj[width] || widthObj.full}{heightObj[height] || heightObj['6']}{radiusObj[radius] ||
-				radiusObj.base} flex flex-col justify-center"
+				radiusObj.sm} flex flex-col justify-center"
 		>
 			{#if type === 'img' || type === 'video' || type === 'code' || type === 'qrcode' || type === 'barcode'}
 				<div class="m-auto" style="width:{iconRatio * 100 + '%'}">

+ 10 - 10
packages/stdf/src/lib/components/slider/Slider.svelte

@@ -54,7 +54,7 @@
 
 	//是否按下 is down
 	let isDown = false;
-	const radiusObj = { none: ' rounded-none', base: ' rounded', xl: ' rounded-xl', full: ' rounded-full' };
+	const radiusObj = { none: ' rounded-none', sm: ' rounded-sm', xl: ' rounded-xl', full: ' rounded-full' };
 
 	const touchLineStart = (e: PointerEvent) => {
 		if (disabled || readonly) {
@@ -197,15 +197,15 @@
 		<div class="pointer-events-none absolute flex h-7 w-full flex-col justify-center">
 			<div
 				class="{lineBlock
-					? 'h-6 w-6 border border-primary bg-white dark:border-dark dark:bg-black'
-					: 'h-5 w-5 bg-primary ring-4 ring-primary/10 dark:bg-dark dark:ring-dark/10'}{radiusObj[radius] || radiusObj['full']}"
+					? 'border-primary dark:border-dark h-6 w-6 border bg-white dark:bg-black'
+					: 'bg-primary ring-primary/10 dark:bg-dark dark:ring-dark/10 h-5 w-5 ring-4'}{radiusObj[radius] || radiusObj['full']}"
 				style="transform: translateX(calc({currentStartX}px - 50%));"
 			>
 				{#if showTip === 'always' || (currentMove === 'start' && showTip !== 'never')}
 					<div
 						class="absolute -top-9 bg-black/90 py-1 text-xs text-white dark:bg-white dark:text-black px-2{radius === 'none'
 							? ' rounded-none'
-							: ' rounded'}"
+							: ' rounded-sm'}"
 						style="left: 50%;transform: translateX(-50%);"
 						in:fly={{ y: 8, duration: 500 }}
 						out:fly={{ y: 8, duration: 300 }}
@@ -222,8 +222,8 @@
 		<div class="pointer-events-none absolute flex h-7 w-full flex-col justify-center">
 			<div
 				class="{lineBlock
-					? 'h-6 w-6 border border-primary bg-white dark:border-dark dark:bg-black'
-					: 'h-5 w-5 bg-primary ring-4 ring-primary/10 dark:bg-dark dark:ring-dark/10'}{radiusObj[radius] || radiusObj['full']}"
+					? 'border-primary dark:border-dark h-6 w-6 border bg-white dark:bg-black'
+					: 'bg-primary ring-primary/10 dark:bg-dark dark:ring-dark/10 h-5 w-5 ring-4'}{radiusObj[radius] || radiusObj['full']}"
 				style="transform: translateX(calc({currentEndX}px - 50%));"
 				bind:this={blockDom}
 			>
@@ -231,7 +231,7 @@
 					<div
 						class="absolute -top-9 bg-black/90 py-1 text-xs text-white dark:bg-white dark:text-black px-2{radius === 'none'
 							? ' rounded-none'
-							: ' rounded'}"
+							: ' rounded-sm'}"
 						style="left: 50%;transform: translateX(-50%);"
 						in:fly={{ y: 8, duration: 500 }}
 						out:fly={{ y: 8, duration: 300 }}
@@ -249,15 +249,15 @@
 		<div class="pointer-events-none absolute flex h-7 w-full flex-col justify-center">
 			<div
 				class="{lineBlock
-					? 'h-6 w-6 border border-primary bg-white dark:border-dark dark:bg-black'
-					: 'h-5 w-5 bg-primary ring-4 ring-primary/10 dark:bg-dark dark:ring-dark/10'}{radiusObj[radius] || radiusObj['full']}"
+					? 'border-primary dark:border-dark h-6 w-6 border bg-white dark:bg-black'
+					: 'bg-primary ring-primary/10 dark:bg-dark dark:ring-dark/10 h-5 w-5 ring-4'}{radiusObj[radius] || radiusObj['full']}"
 				style="transform: translateX(calc({currentX}px - 50%));"
 			>
 				{#if showTip === 'always' || (currentMove === 'one' && showTip !== 'never')}
 					<div
 						class="absolute -top-9 bg-black/90 py-1 text-xs text-white dark:bg-white dark:text-black px-2{radius === 'none'
 							? ' rounded-none'
-							: ' rounded'}"
+							: ' rounded-sm'}"
 						style="left: 50%;transform: translateX(-50%);"
 						in:fly={{ y: 8, duration: 500 }}
 						out:fly={{ y: 8, duration: 300 }}

+ 7 - 7
packages/stdf/src/lib/components/stepper/Stepper.svelte

@@ -11,7 +11,7 @@
 		vertical = false,
 		numberHighlight = false,
 		theme = true,
-		radius = 'base',
+		radius = 'sm',
 		decimal = 0,
 		async = false,
 		asyncLoading = false,
@@ -27,7 +27,7 @@
 
 	// 圆角
 	// Round
-	const roundObj = { none: 'rounded-none', base: 'rounded', xl: 'rounded-xl', full: 'rounded-full' };
+	const roundObj = { none: 'rounded-none', sm: 'rounded-sm', xl: 'rounded-xl', full: 'rounded-full' };
 
 	// 减少
 	// Decrease
@@ -55,14 +55,14 @@
 </script>
 
 <div
-	class="inline-flex items-center bg-gray-100 dark:bg-gray-800 {roundObj[radius] || 'rounded'} {padding
+	class="inline-flex items-center bg-gray-100 dark:bg-gray-800 {roundObj[radius] || 'rounded-sm'} {padding
 		? 'p-1'
 		: 'p-0'} overflow-hidden {injClassOut} {vertical ? 'flex-col-reverse' : 'flex-row'}"
 >
 	<button
 		onclick={decreaseFn}
 		class="{vertical ? 'w-full' : 'w-9'} h-9 {roundObj[radius] ||
-			'rounded'} flex flex-col items-center {injClassBtn} justify-center{numberHighlight
+			'rounded-sm'} flex flex-col items-center {injClassBtn} justify-center{numberHighlight
 			? ''
 			: theme
 				? ' bg-primary/5 dark:bg-dark/10'
@@ -76,12 +76,12 @@
 	</button>
 
 	{#if async && asyncLoading}
-		<div class="h-9 px-2 {roundObj[radius] || 'rounded'} flex flex-col items-center justify-center">
+		<div class="h-9 px-2 {roundObj[radius] || 'rounded-sm'} flex flex-col items-center justify-center">
 			<Loading width="6" height="6" {...loading} />
 		</div>
 	{:else}
 		<div
-			class="h-9 px-4 {roundObj[radius] || 'rounded'} flex flex-col items-center {injClassNum} justify-center{numberHighlight
+			class="h-9 px-4 {roundObj[radius] || 'rounded-sm'} flex flex-col items-center {injClassNum} justify-center{numberHighlight
 				? theme
 					? ' bg-primary/5 text-primary dark:bg-dark/10 dark:text-dark'
 					: ' bg-white dark:bg-black'
@@ -94,7 +94,7 @@
 	<button
 		onclick={increaseFn}
 		class="{vertical ? 'w-full' : 'w-9'} h-9 {roundObj[radius] ||
-			'rounded'} flex flex-col items-center {injClassBtn} justify-center{numberHighlight
+			'rounded-sm'} flex flex-col items-center {injClassBtn} justify-center{numberHighlight
 			? ''
 			: theme
 				? ' bg-primary/5 dark:bg-dark/10'

+ 10 - 8
packages/stdf/src/lib/components/steps/Steps.svelte

@@ -2,9 +2,9 @@
 	import Icon from '../icon/Icon.svelte';
 	import type { StepsProps } from '../../types/index.js';
 
-	let { steps = [], current = 1, radius = 'base', barBorder = true, vertical = false }: StepsProps = $props();
+	let { steps = [], current = 1, radius = 'sm', barBorder = true, vertical = false }: StepsProps = $props();
 
-	const radiusObj = { none: 'rounded-none', base: 'rounded', xl: 'rounded-xl', full: 'rounded-full' };
+	const radiusObj = { none: 'rounded-none', sm: 'rounded-sm', xl: 'rounded-xl', full: 'rounded-full' };
 	let width = $state(0);
 
 	let heightList = $state<number[]>([]);
@@ -28,8 +28,9 @@
 								? 'border-primary dark:border-dark text-primary dark:text-dark'
 								: i === current - 1
 									? 'border-primary dark:border-dark bg-primary dark:bg-dark text-white dark:text-black'
-									: 'border-black/30 text-black/30 dark:border-white/30 dark:text-white/30'} {radiusObj[radius] ||
-								radiusObj.base} {!barBorder ? '!border-transparent' : ''}"
+									: 'border-black/30 text-black/30 dark:border-white/30 dark:text-white/30'} {radiusObj[radius] || radiusObj.sm} {!barBorder
+								? '!border-transparent'
+								: ''}"
 							style="top:12px"
 						>
 							{#if item.step?.bar?.type === 'icon' || item.finishStep?.bar?.type === 'icon'}
@@ -76,7 +77,7 @@
 								? 'border-primary dark:border-dark'
 								: i === current - 1
 									? 'border-primary dark:border-dark bg-primary dark:bg-dark'
-									: 'border-black/30 dark:border-white/30'} {radiusObj[radius] || radiusObj.base}"
+									: 'border-black/30 dark:border-white/30'} {radiusObj[radius] || radiusObj.sm}"
 							style="top:16px"
 						></div>
 					</div>
@@ -125,8 +126,9 @@
 								? 'border-primary dark:border-dark text-primary dark:text-dark'
 								: i === current - 1
 									? 'border-primary dark:border-dark bg-primary dark:bg-dark text-white dark:text-black'
-									: 'border-black/30 text-black/30 dark:border-white/30 dark:text-white/30'} {radiusObj[radius] ||
-								radiusObj.base} {!barBorder ? '!border-transparent' : ''}"
+									: 'border-black/30 text-black/30 dark:border-white/30 dark:text-white/30'} {radiusObj[radius] || radiusObj.sm} {!barBorder
+								? '!border-transparent'
+								: ''}"
 							style="left:calc(50% - 15px)"
 						>
 							{#if item.step?.bar?.type === 'icon' || item.finishStep?.bar?.type === 'icon'}
@@ -176,7 +178,7 @@
 								? 'border-primary dark:border-dark'
 								: i === current - 1
 									? 'border-primary dark:border-dark bg-primary dark:bg-dark'
-									: 'border-black/30 dark:border-white/30'} {radiusObj[radius] || radiusObj.base}"
+									: 'border-black/30 dark:border-white/30'} {radiusObj[radius] || radiusObj.sm}"
 							style="left:calc(50% - 5px)"
 						></div>
 					</div>

+ 1 - 1
packages/stdf/src/lib/components/swiper/Swiper.svelte

@@ -64,7 +64,7 @@
 	const indicateAlignObj = { left: 'justify-start', center: 'justify-center', right: 'justify-end' };
 	const pxObj = { '0': '', '1': 'px-1', '2': 'px-2', '4': 'px-4', '6': 'px-6', '8': 'px-8', '12': 'px-12', '16': 'px-16', '24': 'px-24' };
 	const pyObj = { '0': '', '1': 'py-1', '2': 'py-2', '4': 'py-4', '6': 'py-6', '8': 'py-8', '12': 'py-12' };
-	const radiusObj = { none: 'rounded-none', base: 'rounded-base', xl: 'rounded-xl', '2xl': 'rounded-2xl', full: 'rounded-full' };
+	const radiusObj = { none: 'rounded-none', sm: 'rounded-sm', xl: 'rounded-xl', '2xl': 'rounded-2xl', full: 'rounded-full' };
 	//根据 indicateStyle 和是否激活生成不同样式的 indicate
 	//generate different style indicate according to indicateStyle and isActive
 	const indicateStyleInnerFun = (indicateStyle: string, isActive: boolean, indicateColor: string, indicateActiveColor: string) => {

+ 4 - 4
packages/stdf/src/lib/components/switch/Switch.svelte

@@ -4,7 +4,7 @@
 
 	let {
 		active = false,
-		radius = 'base',
+		radius = 'middle',
 		inside = null,
 		injClass = '',
 		disabled = false,
@@ -18,7 +18,7 @@
 
 	// 是否处于纵向拉长状态  is in the vertical elongation state
 	let isLong = $state(false);
-	const radiusObj = { none: 'rounded-none', base: 'rounded', full: 'rounded-full' };
+	const radiusObj = { none: 'rounded-none', middle: 'rounded-sm', full: 'rounded-full' };
 	const setChangeFun = () => {
 		if (!disabled) {
 			if (!async) {
@@ -41,14 +41,14 @@
 
 <button
 	onclick={setChangeFun}
-	class="relative flex h-6 w-12 justify-around transition-all duration-500 active:opacity-80 {radiusObj[radius] || radiusObj.base} {active
+	class="relative flex h-6 w-12 justify-around transition-all duration-500 active:opacity-80 {radiusObj[radius] || radiusObj.middle} {active
 		? `bg-primary dark:bg-dark ${injClass}`
 		: 'bg-black/10 dark:bg-white/20'} {disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'}"
 >
 	<div
 		class="absolute top-0.5 h-5 w-5 bg-white text-center text-xs leading-5 text-black/80 transition-all duration-300 dark:bg-black dark:text-white/90 {radiusObj[
 			radius
-		] || radiusObj.base}"
+		] || radiusObj.middle}"
 		style="left:{active ? '1.625rem' : '0.125rem'};transform:{isLong ? 'scaleX(1.3)' : 'scaleX(1)'}"
 	>
 		{#if inside === 'state'}

+ 8 - 8
packages/stdf/src/lib/components/tabs/Tab.svelte

@@ -6,7 +6,7 @@
 		labels = [],
 		active = $bindable(0),
 		lineType = false,
-		radius = 'base',
+		radius = 'sm',
 		duration = 'base',
 		layout = 'h',
 		love = false,
@@ -21,7 +21,7 @@
 		onclickTab
 	}: TabProps = $props();
 
-	const radiusObj = { none: 'rounded-none', base: 'rounded', xl: 'rounded-xl', full: 'rounded-full' };
+	const radiusObj = { none: 'rounded-none', sm: 'rounded-sm', xl: 'rounded-xl', full: 'rounded-full' };
 	const durationObj = { fast: 'duration-150', base: 'duration-300', slow: 'duration-500', slower: 'duration-1000' };
 	const mxClass = {
 		'0': 'mx-0',
@@ -78,14 +78,14 @@
 		bind:clientHeight={ofTabH}
 		bind:this={ofDom}
 		class="{lineType ? '' : 'bg-black/5 dark:bg-white/10'} no-scrollbar relative overflow-auto scroll-smooth p-0.5 {radiusObj[radius] ||
-			radiusObj.base} {mxClass[mx] || mxClass['2']} {injClass}"
+			radiusObj.sm} {mxClass[mx] || mxClass['2']} {injClass}"
 	>
 		{#if lineType}
 			<div class="absolute bottom-0 h-0.5 w-full bg-black/5 dark:bg-white/5" style="width: {itemW * labels.length}px"></div>
 		{/if}
 		<div
 			class="{lineType ? '' : 'dark:shadow-xs shadow-sm dark:shadow-white/10'} absolute transition-all {durationObj[duration] ||
-				durationObj.base} {radiusObj[radius] || radiusObj.base} {lineType
+				durationObj.base} {radiusObj[radius] || radiusObj.sm} {lineType
 				? 'bg-primary dark:bg-dark bottom-0'
 				: 'bg-white dark:bg-gray-950'} {activeInjClass}"
 			style="width: {ofActiveW}px;height: {lineType ? 2 : ofActiveH}px;left: {ofActiveLeft}px;"
@@ -95,7 +95,7 @@
 				<button
 					class="flex shrink-0 justify-center overflow-hidden py-1 font-medium {love ? 'text-lg' : 'text-sm'} leading-6 {radiusObj[
 						radius
-					] || radiusObj.base} {tabInjClass} {i === active ? activeTabInjClass : ''}"
+					] || radiusObj.sm} {tabInjClass} {i === active ? activeTabInjClass : ''}"
 					style="width: {itemW}px"
 					onclick={() => clickTabFun(i)}
 				>
@@ -115,7 +115,7 @@
 	<div
 		bind:clientWidth={tabW}
 		bind:clientHeight={tabH}
-		class="{lineType && layout !== 'v' ? '' : 'bg-black/5 dark:bg-white/10'} relative p-0.5 {radiusObj[radius] || radiusObj.base} {mxClass[
+		class="{lineType && layout !== 'v' ? '' : 'bg-black/5 dark:bg-white/10'} relative p-0.5 {radiusObj[radius] || radiusObj.sm} {mxClass[
 			mx
 		] || mxClass['2']} {injClass}"
 	>
@@ -125,7 +125,7 @@
 		<div
 			class="{lineType && layout !== 'v' ? '' : 'dark:shadow-xs shadow-sm dark:shadow-white/10'} absolute transition-all {durationObj[
 				duration
-			] || durationObj.base} {radiusObj[radius] || radiusObj.base} {lineType && layout !== 'v'
+			] || durationObj.base} {radiusObj[radius] || radiusObj.sm} {lineType && layout !== 'v'
 				? 'bg-primary dark:bg-dark bottom-0'
 				: 'bg-white dark:bg-gray-950'} {activeInjClass}"
 			style="width: {activeW}px;height: {lineType && layout !== 'v' ? 2 : activeH}px;left: {activeLeft}px;top: {activeTop}px"
@@ -135,7 +135,7 @@
 				<button
 					class="flex flex-1 justify-center {layout === 'h' ? 'py-1' : 'py-2'} overflow-hidden font-medium {love
 						? 'text-lg'
-						: 'text-sm'} leading-6 {radiusObj[radius] || radiusObj.base} {tabInjClass} {i === active ? activeTabInjClass : ''}"
+						: 'text-sm'} leading-6 {radiusObj[radius] || radiusObj.sm} {tabInjClass} {i === active ? activeTabInjClass : ''}"
 					onclick={() => clickTabFun(i)}
 				>
 					{#if label.icon}

+ 4 - 4
packages/stdf/src/lib/components/toast/Toast.svelte

@@ -11,7 +11,7 @@
 		duration = 2000,
 		position = 'center',
 		py = '0',
-		radius = 'base',
+		radius = 'sm',
 		transitionType = 'scale',
 		transitionParams = {},
 		outDuration = 0,
@@ -43,10 +43,10 @@
 	const positionClass = { center: ' justify-center', top: ' justify-start', bottom: ' justify-end' };
 	const pyClass = { '0': ' py-0', '10': ' py-10', '20': ' py-20', '40': ' py-40', '60': ' py-60', '80': ' py-80' };
 	const radiusClass = {
-		base: ' rounded',
+		sm: ' rounded-sm',
 		full: ' rounded-full',
 		none: ' rounded-none',
-		sm: ' rounded-sm',
+		xs: ' rounded-xs',
 		md: ' rounded-md',
 		lg: ' rounded-lg',
 		xl: ' rounded-xl',
@@ -92,7 +92,7 @@
 			<div class="flex justify-center px-10">
 				<div
 					class="inline-block bg-black/90 text-center dark:bg-white/90 p-4{radiusClass[radius] ||
-						radiusClass['base']} text-white dark:text-black"
+						radiusClass.sm} text-white dark:text-black"
 				>
 					{#if children}
 						{@render children()}

+ 24 - 24
packages/stdf/src/lib/types/index.ts

@@ -5,7 +5,7 @@ export type ActionProps = {
 	style?: 'normal' | 'theme' | 'danger' | 'disabled';
 	desc?: string;
 	showImg?: boolean;
-	imgRadius?: 'none' | 'base' | 'full' | 'lg';
+	imgRadius?: 'none' | 'sm' | 'full' | 'lg';
 	imgSrc?: string;
 };
 export type ActionSheetProps = {
@@ -52,7 +52,7 @@ export type AvatarProps = {
 	alt?: string;
 	icon?: IconProps;
 	altSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-	radius?: 'none' | 'base' | 'xl' | '2xl' | '3xl' | 'full';
+	radius?: 'none' | 'sm' | 'xl' | '2xl' | '3xl' | 'full';
 	size?: 'xs' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl';
 	imgSize?: 's' | 'm' | 'l';
 	line?: 'none' | 'solid' | 'dashed' | 'dotted';
@@ -61,7 +61,7 @@ export type AvatarProps = {
 };
 export type AvatarsProps = {
 	data: AvatarProps[];
-	radius?: 'none' | 'base' | 'xl' | '2xl' | '3xl' | 'full';
+	radius?: 'none' | 'sm' | 'xl' | '2xl' | '3xl' | 'full';
 	size?: 'xs' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl';
 	compact?: number;
 	lineWidth?: '0' | '1' | '2' | '3' | '4' | '8';
@@ -74,7 +74,7 @@ export type AvatarsProps = {
 
 export type BadgeProps = {
 	text?: string;
-	radius?: 'full' | 'base' | 'none' | 'leaf';
+	radius?: 'full' | 'sm' | 'none' | 'leaf';
 	isLeft?: boolean;
 	isShow?: boolean;
 	offsetY?: number;
@@ -99,7 +99,7 @@ export type BottomSheetProps = {
 	stayHeightList?: number[];
 	stayHeightIndex?: number;
 	closeHeight?: number;
-	radius?: 'none' | 'base' | 'full';
+	radius?: 'none' | 'middle' | 'full';
 	children?: Snippet;
 	onheightChange?: (height: number) => void;
 	onclickMask?: () => void;
@@ -110,7 +110,7 @@ export type BottomSheetProps = {
 export type ButtonProps = {
 	fill?: 'base' | 'line' | 'lineLight' | 'lineTheme' | 'text' | 'textTheme' | 'colorLight';
 	state?: 'theme' | 'success' | 'warning' | 'error' | 'info';
-	radius?: 'none' | 'base' | 'xl' | '2xl' | 'full';
+	radius?: 'none' | 'sm' | 'xl' | '2xl' | 'full';
 	size?: 'full' | 'big' | 'md' | 'sm' | 'auto';
 	line?: 'solid' | 'dashed' | 'dotted';
 	injClass?: string;
@@ -144,7 +144,7 @@ export type CalendarProps = {
 	height?: number;
 	infoDates?: InfoDateProps[];
 	disabledDates?: string[];
-	radius?: 'none' | 'base' | 'xl' | '2xl';
+	radius?: 'none' | 'sm' | 'xl' | '2xl';
 	showSelectedDay?: boolean;
 	confirmText?: string;
 	selectedText?: string;
@@ -172,7 +172,7 @@ export type CellProps = {
 	line?: boolean;
 	my?: '0' | '1' | '2' | '3' | '4' | '6' | '8';
 	mx?: '0' | '1' | '2' | '3' | '4' | '6' | '8';
-	radius?: 'none' | 'base' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
+	radius?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
 	switchActive?: boolean;
 	shadow?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 	injClass?: string;
@@ -184,7 +184,7 @@ export type CellProps = {
 	onclick?: () => void;
 };
 export type CellGroupProps = {
-	radius?: 'none' | 'base' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
+	radius?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
 	shadow?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 	my?: '0' | '1' | '2' | '3' | '4' | '6' | '8';
 	mx?: '0' | '1' | '2' | '3' | '4' | '6' | '8';
@@ -285,7 +285,7 @@ export type IndexBarProps = {
 	current?: number;
 	top?: number;
 	height: number;
-	radius?: 'none' | 'base' | 'full';
+	radius?: 'none' | 'middle' | 'full';
 	scrollAlign?: boolean;
 	titleInjClass?: string;
 	textInjClass?: string;
@@ -297,7 +297,7 @@ export type InputProps = {
 	titlePosition?: 'in' | 'out' | null;
 	inputPosition?: 'left' | 'right';
 	placeholder?: string;
-	radius?: 'none' | 'base' | 'xl' | 'full';
+	radius?: 'none' | 'sm' | 'xl' | 'full';
 	inputStyle?: 'block' | 'line';
 	lineTransition?: null | 'center' | 'left';
 	duration?: 'fast' | 'base' | 'slow' | 'slower';
@@ -430,7 +430,7 @@ export type NumKeyboardProps = {
 	close?: boolean;
 	doneText?: string;
 	doneDisabled?: boolean;
-	radius?: 'none' | 'base' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full';
+	radius?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full';
 	clear?: boolean;
 	panelClass?: string;
 	keyClass?: string;
@@ -446,7 +446,7 @@ export type PaginationProps = {
 	pageSize?: number;
 	current?: number;
 	maxShowPage?: 5 | 7 | 9 | 11;
-	radius?: 'none' | 'base' | 'md' | 'lg' | 'xl' | 'full';
+	radius?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
 	type?: 'border' | 'block' | 'bold';
 	pageCol?: number;
 	showNextOmitPage?: boolean;
@@ -498,7 +498,7 @@ export type PickerProps = {
 export type PlaceholderProps = {
 	py?: '0' | '1' | '2' | '3' | '4';
 	height?: 'full' | '1' | '2' | '4' | '8' | '16' | '24' | '32' | '48' | '64' | '96';
-	radius?: 'none' | 'base' | 'md' | 'xl' | '2xl' | '3xl' | 'full';
+	radius?: 'none' | 'sm' | 'md' | 'xl' | '2xl' | '3xl' | 'full';
 	shadow?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 	injClass?: string;
 	children?: Snippet;
@@ -517,7 +517,7 @@ export type PopupProps = {
 	mask?: MaskProps;
 	maskClosable?: boolean;
 	radiusPosition?: 'all' | 'top' | 'bottom' | 'left' | 'right';
-	radius?: 'none' | 'base' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full';
+	radius?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full';
 	transitionDistance?: number;
 	transparent?: boolean;
 	allowBodyScroll?: boolean;
@@ -533,7 +533,7 @@ export type ProgressProps = {
 	percent?: number;
 	percentPosition?: 'inner' | 'right' | 'block' | null;
 	height?: '1' | '2' | '3' | '4';
-	radius?: 'full' | 'base' | 'none';
+	radius?: 'full' | 'middle' | 'none';
 	inactive?: boolean;
 	overflowPercent?: number;
 	duration?: '150' | '300' | '500' | '700' | '1000';
@@ -597,7 +597,7 @@ export type SkeletonProps = {
 	type?: 'div' | 'p' | 'img' | 'video' | 'code' | 'qrcode' | 'barcode';
 	width?: 'full' | '2' | '4' | '6' | '8' | '12' | '16' | '24' | '32' | '48' | '64' | '96';
 	height?: '1' | '2' | '4' | '6' | '8' | '12' | '16' | '24' | '32' | '48' | '64' | '96';
-	radius?: 'none' | 'base' | 'md' | 'xl' | '2xl' | '3xl' | 'full';
+	radius?: 'none' | 'sm' | 'md' | 'xl' | '2xl' | '3xl' | 'full';
 	space?: '0.5' | '1' | '2' | '4' | '8';
 	lines?: number;
 	iconRatio?: number;
@@ -613,7 +613,7 @@ export type SliderProps = {
 	startValue?: number;
 	endValue?: number;
 	showTip?: 'always' | 'touch' | 'never';
-	radius?: 'none' | 'base' | 'xl' | 'full';
+	radius?: 'none' | 'sm' | 'xl' | 'full';
 	lineBlock?: boolean;
 	disabled?: boolean;
 	readonly?: boolean;
@@ -629,7 +629,7 @@ export type StepperProps = {
 	vertical?: boolean;
 	numberHighlight?: boolean;
 	theme?: boolean;
-	radius?: 'none' | 'base' | 'xl' | 'full';
+	radius?: 'none' | 'sm' | 'xl' | 'full';
 	decimal?: number;
 	async?: boolean;
 	asyncLoading?: boolean;
@@ -666,7 +666,7 @@ export type StepsItemProps = {
 export type StepsProps = {
 	steps: StepsItemProps[];
 	current?: number;
-	radius?: 'none' | 'base' | 'xl' | 'full';
+	radius?: 'none' | 'sm' | 'xl' | 'full';
 	barBorder?: boolean;
 	vertical?: boolean;
 };
@@ -698,7 +698,7 @@ export type SwiperProps = {
 	rotateZ?: number;
 	activeInjClass?: string;
 	notActiveInjClass?: string;
-	radius?: 'none' | 'base' | 'xl' | '2xl' | 'full';
+	radius?: 'none' | 'sm' | 'xl' | '2xl' | 'full';
 	triggerLong?: number;
 	notTriggerLong?: number;
 	triggerSpeed?: number;
@@ -709,7 +709,7 @@ export type SwiperProps = {
 
 export type SwitchProps = {
 	active?: boolean;
-	radius?: 'none' | 'base' | 'full';
+	radius?: 'none' | 'middle' | 'full';
 	inside?: 'state' | 'loading' | [string, string] | null;
 	injClass?: string;
 	disabled?: boolean;
@@ -741,7 +741,7 @@ export type TabProps = {
 	labels?: TabLabelProps[];
 	active?: number;
 	lineType?: boolean;
-	radius?: 'none' | 'base' | 'xl' | 'full';
+	radius?: 'none' | 'sm' | 'xl' | 'full';
 	duration?: 'fast' | 'base' | 'slow' | 'slower';
 	layout?: 'h' | 'v';
 	love?: boolean;
@@ -837,7 +837,7 @@ export type ToastProps = {
 	duration?: number;
 	position?: 'center' | 'top' | 'bottom';
 	py?: '0' | '10' | '20' | '40' | '60' | '80';
-	radius?: 'none' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
+	radius?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
 	transitionType?: 'scale' | 'fly' | 'fade' | 'slide' | 'blur' | null;
 	transitionParams?: object;
 	outDuration?: number;

+ 1 - 1
packages/stdf/src/routes/bottomSheet/en_US/+page.svelte

@@ -113,7 +113,7 @@
 	</BottomSheet>
 
 	<Cell title="Different rounded style" onclick={() => (visible12 = true)} />
-	<BottomSheet bind:visible={visible12} radius="base" showBackIcon>
+	<BottomSheet bind:visible={visible12} radius="middle" showBackIcon>
 		<Aphorism num={2} />
 	</BottomSheet>
 

+ 3 - 3
packages/stdf/src/routes/checkbox/en_US/+page.svelte

@@ -177,7 +177,7 @@
 	<Checkbox layout="h" data={dota}>
 		{#snippet checkboxChild({ item })}
 			<button
-				class="rounded border px-5 py-0.5 text-sm {checkedsCustom.includes(item.name)
+				class="rounded-sm border px-5 py-0.5 text-sm {checkedsCustom.includes(item.name)
 					? 'bg-primary/10 text-primary dark:bg-dark/10 dark:text-dark'
 					: 'border-gray-200 bg-gray-100 dark:border-gray-500 dark:bg-gray-600'}"
 				onclick={() => {
@@ -197,7 +197,7 @@
 				<!-- svelte-ignore a11y_click_events_have_key_events -->
 				<!-- svelte-ignore a11y_no_static_element_interactions -->
 				<div
-					class="mb-1 h-12 w-12 overflow-hidden rounded {imgCheckeds.includes(item.name) ? 'ring-2 ring-primary dark:ring-dark' : ''}"
+					class="mb-1 h-12 w-12 overflow-hidden rounded-sm {imgCheckeds.includes(item.name) ? 'ring-primary dark:ring-dark ring-2' : ''}"
 					onclick={() => {
 						dotaImgsFun(item.name);
 					}}
@@ -229,7 +229,7 @@
 			<!-- svelte-ignore a11y_click_events_have_key_events -->
 			<!-- svelte-ignore a11y_no_static_element_interactions -->
 			<div
-				class="m-1 rounded border px-2 py-0.5 text-sm {checkInlines.includes(item.name)
+				class="m-1 rounded-sm border px-2 py-0.5 text-sm {checkInlines.includes(item.name)
 					? 'bg-primary/10 text-primary dark:bg-dark/10 dark:text-dark'
 					: 'border-gray-200 bg-gray-100 dark:border-gray-500 dark:bg-gray-600'}"
 				onclick={() => {

+ 3 - 3
packages/stdf/src/routes/checkbox/zh_CN/+page.svelte

@@ -173,7 +173,7 @@
 	<Checkbox layout="h" data={dota}>
 		{#snippet checkboxChild({ item })}
 			<button
-				class="rounded border px-5 py-0.5 text-sm {checkedsCustom.includes(item.name)
+				class="rounded-sm border px-5 py-0.5 text-sm {checkedsCustom.includes(item.name)
 					? 'bg-primary/10 text-primary dark:bg-dark/10 dark:text-dark'
 					: 'border-gray-200 bg-gray-100 dark:border-gray-500 dark:bg-gray-600'}"
 				onclick={() => {
@@ -193,7 +193,7 @@
 				<!-- svelte-ignore a11y_click_events_have_key_events -->
 				<!-- svelte-ignore a11y_no_static_element_interactions -->
 				<div
-					class="mb-1 h-12 w-12 overflow-hidden rounded {imgCheckeds.includes(item.name) ? 'ring-2 ring-primary dark:ring-dark' : ''}"
+					class="mb-1 h-12 w-12 overflow-hidden rounded-sm {imgCheckeds.includes(item.name) ? 'ring-primary dark:ring-dark ring-2' : ''}"
 					onclick={() => {
 						dotaImgsFun(item.name);
 					}}
@@ -225,7 +225,7 @@
 			<!-- svelte-ignore a11y_click_events_have_key_events -->
 			<!-- svelte-ignore a11y_no_static_element_interactions -->
 			<div
-				class="m-1 rounded border px-2 py-0.5 text-sm {checkInlines.includes(item.name)
+				class="m-1 rounded-sm border px-2 py-0.5 text-sm {checkInlines.includes(item.name)
 					? 'bg-primary/10 text-primary dark:bg-dark/10 dark:text-dark'
 					: 'border-gray-200 bg-gray-100 dark:border-gray-500 dark:bg-gray-600'}"
 				onclick={() => {

+ 8 - 8
packages/stdf/src/routes/components/ThemeSwitch.svelte

@@ -35,22 +35,22 @@
 			<div class="whitespace-nowrap">{isZh ? item.name_CN : item.name}</div>
 			<div class="flex justify-between gap-2">
 				<!-- theme  -->
-				<div class="flex overflow-hidden rounded-sm">
-					<div class="w-6 bg-primary" style="background-color: {bgFunc(item.theme.color.primary.default)};"></div>
-					<div class="w-6 bg-dark" style="background-color: {bgFunc(item.theme.color.dark.default)};"></div>
+				<div class="rounded-xs flex overflow-hidden">
+					<div class="bg-primary w-6" style="background-color: {bgFunc(item.theme.color.primary.default)};"></div>
+					<div class="bg-dark w-6" style="background-color: {bgFunc(item.theme.color.dark.default)};"></div>
 				</div>
 				<div class="flex flex-col justify-between gap-1">
 					<!-- Functional -->
 					<div class="flex gap-0.5">
-						<div class="h-3 w-3 rounded-sm" style="background-color: {bgFunc(item.theme.color.functional.success)};"></div>
-						<div class="h-3 w-3 rounded-sm" style="background-color: {bgFunc(item.theme.color.functional.warning)};"></div>
-						<div class="h-3 w-3 rounded-sm" style="background-color: {bgFunc(item.theme.color.functional.error)};"></div>
-						<div class="h-3 w-3 rounded-sm" style="background-color: {bgFunc(item.theme.color.functional.info)};"></div>
+						<div class="rounded-xs h-3 w-3" style="background-color: {bgFunc(item.theme.color.functional.success)};"></div>
+						<div class="rounded-xs h-3 w-3" style="background-color: {bgFunc(item.theme.color.functional.warning)};"></div>
+						<div class="rounded-xs h-3 w-3" style="background-color: {bgFunc(item.theme.color.functional.error)};"></div>
+						<div class="rounded-xs h-3 w-3" style="background-color: {bgFunc(item.theme.color.functional.info)};"></div>
 					</div>
 					<!-- Extended -->
 					<div class="flex gap-0.5">
 						{#each item.theme.color?.extend ?? [] as child}
-							<div class="h-3 w-3 rounded-sm" style="background-color: {bgFunc(child.color)};"></div>
+							<div class="rounded-xs h-3 w-3" style="background-color: {bgFunc(child.color)};"></div>
 						{/each}
 					</div>
 				</div>

+ 2 - 2
packages/stdf/src/routes/progress/en_US/+page.svelte

@@ -35,9 +35,9 @@
 	<div class="m-4 mt-8 text-lg font-bold">Different styles of rounded corners</div>
 	<div class="flex flex-col space-y-4">
 		<Progress radius="none" />
-		<Progress radius="base" />
+		<Progress radius="middle" />
 		<Progress radius="none" percentPosition="block" />
-		<Progress radius="base" percentPosition="block" />
+		<Progress radius="middle" percentPosition="block" />
 		<Progress percentPosition="block" />
 	</div>
 

+ 3 - 3
packages/stdf/src/routes/radio/en_US/+page.svelte

@@ -103,7 +103,7 @@
 	<Radio layout="h" data={dota}>
 		{#snippet radioChild({ item })}
 			<button
-				class="rounded border px-5 py-0.5 text-sm {checkedsCustom === item.name
+				class="rounded-sm border px-5 py-0.5 text-sm {checkedsCustom === item.name
 					? 'bg-primary/10 text-primary dark:bg-dark/10 dark:text-dark'
 					: 'border-gray-200 bg-gray-100 dark:border-gray-500 dark:bg-gray-600'}"
 				onclick={() => (checkedsCustom = item.name)}
@@ -121,7 +121,7 @@
 				<!-- svelte-ignore a11y_click_events_have_key_events -->
 				<!-- svelte-ignore a11y_no_static_element_interactions -->
 				<div
-					class="mb-1 h-12 w-12 overflow-hidden rounded {imgChecked === item.name ? 'ring-2 ring-primary dark:ring-dark' : ''}"
+					class="mb-1 h-12 w-12 overflow-hidden rounded-sm {imgChecked === item.name ? 'ring-primary dark:ring-dark ring-2' : ''}"
 					onclick={() => (imgChecked = item.name)}
 				>
 					<img class="h-full w-full object-cover" src={`/assets/images/dota_${item.imgName}.png`} alt="" />
@@ -150,7 +150,7 @@
 			<!-- svelte-ignore a11y_click_events_have_key_events -->
 			<!-- svelte-ignore a11y_no_static_element_interactions -->
 			<div
-				class="m-1 rounded border px-2 py-0.5 text-sm {checkInline === item.name
+				class="m-1 rounded-sm border px-2 py-0.5 text-sm {checkInline === item.name
 					? 'bg-primary/10 text-primary dark:bg-dark/10 dark:text-dark'
 					: 'border-gray-200 bg-gray-100 dark:border-gray-500 dark:bg-gray-600'}"
 				onclick={() => (checkInline = item.name)}

+ 3 - 3
packages/stdf/src/routes/radio/zh_CN/+page.svelte

@@ -100,7 +100,7 @@
 	<Radio layout="h" data={dota}>
 		{#snippet radioChild({ item })}
 			<button
-				class="rounded border px-5 py-0.5 text-sm {checkedsCustom === item.name
+				class="rounded-sm border px-5 py-0.5 text-sm {checkedsCustom === item.name
 					? 'bg-primary/10 text-primary dark:bg-dark/10 dark:text-dark'
 					: 'border-gray-200 bg-gray-100 dark:border-gray-500 dark:bg-gray-600'}"
 				onclick={() => (checkedsCustom = item.name)}
@@ -118,7 +118,7 @@
 				<!-- svelte-ignore a11y_click_events_have_key_events -->
 				<!-- svelte-ignore a11y_no_static_element_interactions -->
 				<div
-					class="mb-1 h-12 w-12 overflow-hidden rounded {imgChecked === item.name ? 'ring-2 ring-primary dark:ring-dark' : ''}"
+					class="mb-1 h-12 w-12 overflow-hidden rounded-sm {imgChecked === item.name ? 'ring-primary dark:ring-dark ring-2' : ''}"
 					onclick={() => (imgChecked = item.name)}
 				>
 					<img class="h-full w-full object-cover" src={`/assets/images/dota_${item.name}.png`} alt="" />
@@ -147,7 +147,7 @@
 			<!-- svelte-ignore a11y_click_events_have_key_events -->
 			<!-- svelte-ignore a11y_no_static_element_interactions -->
 			<div
-				class="m-1 rounded border px-2 py-0.5 text-sm {checkInline === item.name
+				class="m-1 rounded-sm border px-2 py-0.5 text-sm {checkInline === item.name
 					? 'bg-primary/10 text-primary dark:bg-dark/10 dark:text-dark'
 					: 'border-gray-200 bg-gray-100 dark:border-gray-500 dark:bg-gray-600'}"
 				onclick={() => (checkInline = item.name)}