mdui 2.0.3 → 2.0.4

package/components/navigation-drawer/index.js

@@ -28,53 +28,52 @@ import { style } from './style.js';
  * <mdui-navigation-drawer>content</mdui-navigation-drawer>
  * ```
  *
- * @event open - 在抽屉导航打开之前触发。可以通过调用 `event.preventDefault()` 阻止抽屉导航打开
- * @event opened - 在抽屉导航打开之后触发
- * @event close - 在抽屉导航关闭之前触发。可以通过调用 `event.preventDefault()` 阻止抽屉导航关闭
- * @event closed - 在抽屉导航关闭之后触发
+ * @event open - 抽屉栏打开之前触发。可以通过调用 `event.preventDefault()` 阻止抽屉栏打开
+ * @event opened - 抽屉栏打开动画完成之后触发
+ * @event close - 抽屉栏关闭之前触发。可以通过调用 `event.preventDefault()` 阻止抽屉栏关闭
+ * @event closed - 抽屉栏关闭动画完成之后触发
  * @event overlay-click - 点击遮罩层时触发
  *
- * @slot - 抽屉导航中的内容
+ * @slot - 抽屉栏中的内容
  *
  * @csspart overlay - 遮罩层
- * @csspart panel - 抽屉导航容器
+ * @csspart panel - 抽屉栏容器
  *
- * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
- * @cssprop --z-index - 组件的 CSS 的 `z-index` 值
+ * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --z-index - 组件的 CSS `z-index` 值
  */
 let NavigationDrawer = class NavigationDrawer extends LayoutItemBase {
     constructor() {
         super(...arguments);
         /**
-         * 是否打开抽屉导航
+         * 是否打开抽屉栏
          */
         this.open = false;
         /**
-         * 打开时，是否显示遮罩层
+         * 抽屉栏打开时，是否显示遮罩层
          *
-         * 较窄的设备上（屏幕宽度小于 [`--mdui-breakpoint-md`](/docs/2/styles/design-tokens#breakpoint) 时），会无视该参数，始终显示遮罩层
+         * 在窄屏设备上（屏幕宽度小于 [`--mdui-breakpoint-md`](/docs/2/styles/design-tokens#breakpoint)），会始终显示遮罩层，无视该参数
          */
         this.modal = false;
         /**
-         * 在含遮罩层时，是否在按下 ESC 键时，关闭抽屉导航
+         * 在有遮罩层的情况下，按下 ESC 键是否关闭抽屉栏
          */
         this.closeOnEsc = false;
         /**
-         * 是否在点击遮罩时，关闭抽屉导航
+         * 点击遮罩层时，是否关闭抽屉栏
          */
         this.closeOnOverlayClick = false;
         /**
-         * 抽屉导航的显示位置。可选值为：
+         * 抽屉栏的位置。可选值包括：
          *
-         * * `left`：显示在左侧
-         * * `right`：显示在右侧
+         * * `left`：左侧
+         * * `right`：右侧
          */
         this.placement = 'left';
         /**
-         * 默认抽屉导航相对于 `body` 元素显示，该参数设置为 `true` 时，抽屉导航将相对于它的父元素显示
+         * 默认情况下，抽屉栏相对于 `body` 元素显示。当该参数设置为 `true` 时，抽屉栏将相对于其父元素显示。
          *
-         * Note:
-         * 设置了该属性时，必须手动在父元素上设置样式 `position: relative; overflow: hidden;`
+         * **Note**：设置该属性时，必须在父元素上手动设置样式 `position: relative; overflow: hidden;`。
          */
         this.contained = false;
         // 断点为 mobile 时为 `true` 时，强制使用遮罩层
@@ -91,7 +90,7 @@ let NavigationDrawer = class NavigationDrawer extends LayoutItemBase {
     get lockTarget() {
         return this.contained || this.isParentLayout
             ? this.parentElement
-            : document.body;
+            : document.documentElement;
     }
     get isModal() {
         return this.mobile || this.modal;
@@ -100,7 +99,7 @@ let NavigationDrawer = class NavigationDrawer extends LayoutItemBase {
     async onContainedChange() {
         await this.definedController.whenDefined();
         this.observeResize?.unobserve();
-        this.observeResize = observeResize(this.contained ? this.parentElement : document.body, () => {
+        this.observeResize = observeResize(this.contained ? this.parentElement : document.documentElement, () => {
             const target = this.contained ? this.parentElement : undefined;
             this.mobile = breakpoint(target).down('md');
             // 若位于 layout 中，且为模态化，则重新布局时，占据的宽度为 0
@@ -142,14 +141,22 @@ let NavigationDrawer = class NavigationDrawer extends LayoutItemBase {
         };
         // 停止原有动画
         const stopOldAnimations = async () => {
-            await Promise.all([
-                this.isModal
-                    ? stopAnimations(overlay)
-                    : !this.isParentLayout
-                        ? stopAnimations(this.lockTarget)
-                        : Promise.resolve(),
-                this.isModal ? stopAnimations(panel) : stopAnimations(this),
-            ]);
+            const elements = [];
+            if (this.isModal) {
+                elements.push(overlay, panel);
+            }
+            else if (!this.isParentLayout) {
+                elements.push(this.lockTarget);
+            }
+            if (this.isParentLayout) {
+                const layoutItems = this.layoutManager.getItemsAndMain();
+                const layoutIndex = layoutItems.indexOf(this);
+                elements.push(...layoutItems.slice(layoutIndex));
+            }
+            if (!this.isModal && !elements.includes(this)) {
+                elements.push(this);
+            }
+            await Promise.all(elements.map((element) => stopAnimations(element)));
         };
         // 打开
         // 要区分是否首次渲染，首次渲染时不触发事件，不执行动画；非首次渲染，触发事件，执行动画
@@ -203,6 +210,7 @@ let NavigationDrawer = class NavigationDrawer extends LayoutItemBase {
             // 但首次渲染不执行动画
             if (this.isParentLayout && hasUpdated) {
                 setLayoutTransition(duration, easingEmphasized);
+                this.layoutManager.updateLayout(this);
             }
             // drawer 显示动画
             animations.push(animateTo(this.isModal ? panel : this, [
@@ -213,6 +221,9 @@ let NavigationDrawer = class NavigationDrawer extends LayoutItemBase {
                 easing: easingEmphasized,
             }));
             await Promise.all(animations);
+            if (!this.open) {
+                return;
+            }
             // 若位于 layout 中，则 drawer 动画完成后，移除 layout-main 的动画
             if (this.isParentLayout && hasUpdated) {
                 setLayoutTransition(null);
@@ -258,6 +269,9 @@ let NavigationDrawer = class NavigationDrawer extends LayoutItemBase {
                 { transform: `translateX(${isRight ? '' : '-'}100%)` },
             ], { duration, easing: easingEmphasized }));
             await Promise.all(animations);
+            if (this.open) {
+                return;
+            }
             // 若位于 layout 中，则 drawer 动画结束后，移除 layout-main 的动画
             if (this.isParentLayout) {
                 setLayoutTransition(null);
@@ -266,7 +280,7 @@ let NavigationDrawer = class NavigationDrawer extends LayoutItemBase {
             if (this.isModal && !this.contained) {
                 unlockScreen(this, this.lockTarget);
             }
-            // 抽屉导航关闭后，恢复焦点到原有的元素上
+            // 抽屉栏关闭后，恢复焦点到原有的元素上
             const trigger = this.originalTrigger;
             if (isFunction(trigger?.focus)) {
                 setTimeout(() => trigger.focus());

package/components/navigation-rail/navigation-rail-item.d.ts

@@ -4,7 +4,7 @@ import type { Ripple } from '../ripple/index.js';
 import type { CSSResultGroup, TemplateResult } from 'lit';
 declare const NavigationRailItem_base: import("@open-wc/dedupe-mixin").Constructor<import("@mdui/shared/mixins/anchor.js").AnchorMixinInterface> & import("@open-wc/dedupe-mixin").Constructor<import("../ripple/ripple-mixin.js").RippleMixinInterface> & import("@open-wc/dedupe-mixin").Constructor<import("@mdui/shared/mixins/focusable.js").FocusableMixinInterface> & typeof MduiElement;
 /**
- * @summary 侧边导航栏项组件。需与 `<mdui-navigation-rail>` 组件配合使用
+ * @summary 侧边导航项组件。需配合 `<mdui-navigation-rail>` 组件使用
  *
  * ```html
  * <mdui-navigation-rail>
@@ -14,7 +14,7 @@ declare const NavigationRailItem_base: import("@open-wc/dedupe-mixin").Construct
  * </mdui-navigation-rail>
  * ```
  *
- * @slot - 文本
+ * @slot - 文本内容
  * @slot icon - 图标
  * @slot active-icon - 激活状态的图标
  * @slot badge - 徽标
@@ -27,18 +27,18 @@ declare const NavigationRailItem_base: import("@open-wc/dedupe-mixin").Construct
  * @csspart badge - 徽标
  * @csspart icon - 图标
  * @csspart active-icon - 激活状态的图标
- * @csspart label - 文本
+ * @csspart label - 文本内容
  *
- * @cssprop --shape-corner-indicator - 指示器的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --shape-corner-indicator - 指示器的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
  */
 export declare class NavigationRailItem extends NavigationRailItem_base<NavigationRailItemEventMap> {
     static styles: CSSResultGroup;
     /**
-     * 未激活状态的 Material Icons 图标名。也可以通过 `slot="icon"` 设置
+     * 未激活状态下的 Material Icons 图标名。也可以通过 `slot="icon"` 设置
      */
     icon?: string;
     /**
-     * 激活状态的 Material Icons 图标名。也可以通过 `slot="active-icon"` 设置
+     * 激活状态下的 Material Icons 图标名。也可以通过 `slot="active-icon"` 设置
      */
     activeIcon?: string;
     /**

package/components/navigation-rail/navigation-rail-item.js

@@ -16,7 +16,7 @@ import '../icon.js';
 import { RippleMixin } from '../ripple/ripple-mixin.js';
 import { navigationRailItemStyle } from './navigation-rail-item-style.js';
 /**
- * @summary 侧边导航栏项组件。需与 `<mdui-navigation-rail>` 组件配合使用
+ * @summary 侧边导航项组件。需配合 `<mdui-navigation-rail>` 组件使用
  *
  * ```html
  * <mdui-navigation-rail>
@@ -26,7 +26,7 @@ import { navigationRailItemStyle } from './navigation-rail-item-style.js';
  * </mdui-navigation-rail>
  * ```
  *
- * @slot - 文本
+ * @slot - 文本内容
  * @slot icon - 图标
  * @slot active-icon - 激活状态的图标
  * @slot badge - 徽标
@@ -39,9 +39,9 @@ import { navigationRailItemStyle } from './navigation-rail-item-style.js';
  * @csspart badge - 徽标
  * @csspart icon - 图标
  * @csspart active-icon - 激活状态的图标
- * @csspart label - 文本
+ * @csspart label - 文本内容
  *
- * @cssprop --shape-corner-indicator - 指示器的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --shape-corner-indicator - 指示器的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
  */
 let NavigationRailItem = class NavigationRailItem extends AnchorMixin(RippleMixin(FocusableMixin(MduiElement))) {
     constructor() {

package/components/navigation-rail/navigation-rail.d.ts

@@ -4,7 +4,7 @@ import { LayoutItemBase } from '../layout/layout-item-base.js';
 import type { LayoutPlacement } from '../layout/helper.js';
 import type { CSSResultGroup, TemplateResult } from 'lit';
 /**
- * @summary 侧边导航栏组件。需与 `<mdui-navigation-rail-item>` 组件配合使用
+ * @summary 侧边导航栏组件。需配合 `<mdui-navigation-rail-item>` 组件使用
  *
  * ```html
  * <mdui-navigation-rail>
@@ -24,8 +24,8 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
  * @csspart bottom - 底部元素的容器
  * @csspart items - `<mdui-navigation-rail-item>` 组件的容器
  *
- * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
- * @cssprop --z-index - 组件的 CSS 的 `z-index` 值
+ * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --z-index - 组件的 CSS `z-index` 值
  */
 export declare class NavigationRail extends LayoutItemBase<NavigationRailEventMap> {
     static styles: CSSResultGroup;
@@ -34,14 +34,14 @@ export declare class NavigationRail extends LayoutItemBase<NavigationRailEventMa
      */
     value?: string;
     /**
-     * 导航栏的位置。可选值为：
+     * 导航栏的位置。可选值包括：
      *
-     * * `left`：显示在左侧
-     * * `right`：显示在右侧
+     * * `left`：左侧
+     * * `right`：右侧
      */
-    placement: /*显示在左侧*/ 'left' | /*显示在右侧*/ 'right';
+    placement: /*左侧*/ 'left' | /*右侧*/ 'right';
     /**
-     * 导航栏中的 `<mdui-navigation-rail-item>` 元素的对齐方式。可选值为：
+     * `<mdui-navigation-rail-item>` 元素的对齐方式。可选值包括：
      *
      * * `start`：顶部对齐
      * * `center`：居中对齐
@@ -49,10 +49,9 @@ export declare class NavigationRail extends LayoutItemBase<NavigationRailEventMa
      */
     alignment: /*顶部对齐*/ 'start' | /*居中对齐*/ 'center' | /*底部对齐*/ 'end';
     /**
-     * 默认导航栏相对于 `body` 元素显示，该参数设置为 `true` 时，导航栏将相对于它的父元素显示
+     * 默认情况下，导航栏相对于 `body` 元素显示。当该参数设置为 `true` 时，导航栏将相对于其父元素显示。
      *
-     * Note:
-     * 设置了该属性时，必须手动在父元素上设置样式 `position: relative;`
+     * **Note**：设置该属性时，必须在父元素上手动设置样式 `position: relative;`。
      */
     contained: boolean;
     /**

package/components/navigation-rail/navigation-rail.js

@@ -13,7 +13,7 @@ import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
 import { LayoutItemBase } from '../layout/layout-item-base.js';
 import { navigationRailStyle } from './navigation-rail-style.js';
 /**
- * @summary 侧边导航栏组件。需与 `<mdui-navigation-rail-item>` 组件配合使用
+ * @summary 侧边导航栏组件。需配合 `<mdui-navigation-rail-item>` 组件使用
  *
  * ```html
  * <mdui-navigation-rail>
@@ -33,21 +33,21 @@ import { navigationRailStyle } from './navigation-rail-style.js';
  * @csspart bottom - 底部元素的容器
  * @csspart items - `<mdui-navigation-rail-item>` 组件的容器
  *
- * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
- * @cssprop --z-index - 组件的 CSS 的 `z-index` 值
+ * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --z-index - 组件的 CSS `z-index` 值
  */
 let NavigationRail = class NavigationRail extends LayoutItemBase {
     constructor() {
         super(...arguments);
         /**
-         * 导航栏的位置。可选值为：
+         * 导航栏的位置。可选值包括：
          *
-         * * `left`：显示在左侧
-         * * `right`：显示在右侧
+         * * `left`：左侧
+         * * `right`：右侧
          */
         this.placement = 'left';
         /**
-         * 导航栏中的 `<mdui-navigation-rail-item>` 元素的对齐方式。可选值为：
+         * `<mdui-navigation-rail-item>` 元素的对齐方式。可选值包括：
          *
          * * `start`：顶部对齐
          * * `center`：居中对齐
@@ -55,10 +55,9 @@ let NavigationRail = class NavigationRail extends LayoutItemBase {
          */
         this.alignment = 'start';
         /**
-         * 默认导航栏相对于 `body` 元素显示，该参数设置为 `true` 时，导航栏将相对于它的父元素显示
+         * 默认情况下，导航栏相对于 `body` 元素显示。当该参数设置为 `true` 时，导航栏将相对于其父元素显示。
          *
-         * Note:
-         * 设置了该属性时，必须手动在父元素上设置样式 `position: relative;`
+         * **Note**：设置该属性时，必须在父元素上手动设置样式 `position: relative;`。
          */
         this.contained = false;
         /**

package/components/radio/radio-group.d.ts

@@ -5,7 +5,7 @@ import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import type { FormControl } from '@mdui/jq/shared/form.js';
 import type { CSSResultGroup, TemplateResult } from 'lit';
 /**
- * @summary 单选框组组件。需与 `<mdui-radio>` 组件配合使用
+ * @summary 单选框组组件。需配合 `<mdui-radio>` 组件使用
  *
  * ```html
  * <mdui-radio-group value="chinese">
@@ -23,21 +23,21 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
 export declare class RadioGroup extends MduiElement<RadioGroupEventMap> implements FormControl {
     static styles: CSSResultGroup;
     /**
-     * 是否为禁用状态
+     * 是否禁用此组件
      */
     disabled: boolean;
     /**
-     * 关联的 `form` 元素。此属性值必须为同一页面中的一个 `<form>` 元素的 `id` 属性。
+     * 关联的 `<form>` 元素。此属性值应为同一页面中的一个 `<form>` 元素的 `id`。
      *
-     * 如果此属性未指定，则元素必须是 `form` 元素的后代。利用此属性，你可以将元素放置在页面中的任何位置，而不仅仅是作为 `form` 元素的后代。
+     * 如果未指定此属性，则该元素必须是 `<form>` 元素的子元素。通过此属性，你可以将元素放置在页面的任何位置，而不仅仅是 `<form>` 元素的子元素。
      */
     form?: string;
     /**
-     * 单选框名称，将与表单数据一起提交
+     * 单选框组的名称，将与表单数据一起提交
      */
     name: string;
     /**
-     * 单选框的值，将于表单数据一起提交
+     * 单选框组的名称，将于表单数据一起提交
      */
     value: string;
     /**
@@ -57,11 +57,11 @@ export declare class RadioGroup extends MduiElement<RadioGroupEventMap> implemen
     private readonly formController;
     private readonly definedController;
     /**
-     * 表单验证状态对象
+     * 表单验证状态对象，具体参见 [`ValidityState`](https://developer.mozilla.org/zh-CN/docs/Web/API/ValidityState)
      */
     get validity(): ValidityState;
     /**
-     * 表单验证的错误提示信息
+     * 如果表单验证未通过，此属性将包含提示信息。如果验证通过，此属性将为空字符串
      */
     get validationMessage(): string;
     private get items();
@@ -69,19 +69,19 @@ export declare class RadioGroup extends MduiElement<RadioGroupEventMap> implemen
     private onValueChange;
     private onInvalidChange;
     /**
-     * 检查表单字段是否验证通过。若未通过则返回 `false`，并触发 `invalid` 事件；若验证通过，则返回 `true`
+     * 检查表单字段是否通过验证。如果未通过，返回 `false` 并触发 `invalid` 事件；如果通过，返回 `true`
      */
     checkValidity(): boolean;
     /**
-     * 检查表单字段是否验证通过。若未通过则返回 `false`，并触发 `invalid` 事件；若验证通过，则返回 `true`。
+     * 检查表单字段是否通过验证。如果未通过，返回 `false` 并触发 `invalid` 事件；如果通过，返回 `true`。
      *
-     * 验证未通过时，还将在组件上显示未通过的提示。
+     * 如果验证未通过，还会在组件上显示验证失败的提示。
      */
     reportValidity(): boolean;
     /**
-     * 设置自定义的错误提示文本。只要文本不为空，则表示字段验证未通过
+     * 设置自定义的错误提示文本。只要这个文本不为空，就表示字段未通过验证
      *
-     * @param message 自定义的提示文本
+     * @param message 自定义的错误提示文本
      */
     setCustomValidity(message: string): void;
     protected render(): TemplateResult;

package/components/radio/radio-group.js

@@ -16,7 +16,7 @@ import { booleanConverter } from '@mdui/shared/helpers/decorator.js';
 import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
 import { radioGroupStyle } from './radio-group-style.js';
 /**
- * @summary 单选框组组件。需与 `<mdui-radio>` 组件配合使用
+ * @summary 单选框组组件。需配合 `<mdui-radio>` 组件使用
  *
  * ```html
  * <mdui-radio-group value="chinese">
@@ -35,15 +35,15 @@ let RadioGroup = class RadioGroup extends MduiElement {
     constructor() {
         super(...arguments);
         /**
-         * 是否为禁用状态
+         * 是否禁用此组件
          */
         this.disabled = false;
         /**
-         * 单选框名称，将与表单数据一起提交
+         * 单选框组的名称，将与表单数据一起提交
          */
         this.name = '';
         /**
-         * 单选框的值，将于表单数据一起提交
+         * 单选框组的名称，将于表单数据一起提交
          */
         this.value = '';
         /**
@@ -67,13 +67,13 @@ let RadioGroup = class RadioGroup extends MduiElement {
         });
     }
     /**
-     * 表单验证状态对象
+     * 表单验证状态对象，具体参见 [`ValidityState`](https://developer.mozilla.org/zh-CN/docs/Web/API/ValidityState)
      */
     get validity() {
         return this.inputRef.value.validity;
     }
     /**
-     * 表单验证的错误提示信息
+     * 如果表单验证未通过，此属性将包含提示信息。如果验证通过，此属性将为空字符串
      */
     get validationMessage() {
         return this.inputRef.value.validationMessage;
@@ -110,7 +110,7 @@ let RadioGroup = class RadioGroup extends MduiElement {
         this.updateItems();
     }
     /**
-     * 检查表单字段是否验证通过。若未通过则返回 `false`，并触发 `invalid` 事件；若验证通过，则返回 `true`
+     * 检查表单字段是否通过验证。如果未通过，返回 `false` 并触发 `invalid` 事件；如果通过，返回 `true`
      */
     checkValidity() {
         const valid = this.inputRef.value.checkValidity();
@@ -124,9 +124,9 @@ let RadioGroup = class RadioGroup extends MduiElement {
         return valid;
     }
     /**
-     * 检查表单字段是否验证通过。若未通过则返回 `false`，并触发 `invalid` 事件；若验证通过，则返回 `true`。
+     * 检查表单字段是否通过验证。如果未通过，返回 `false` 并触发 `invalid` 事件；如果通过，返回 `true`。
      *
-     * 验证未通过时，还将在组件上显示未通过的提示。
+     * 如果验证未通过，还会在组件上显示验证失败的提示。
      */
     reportValidity() {
         this.invalid = !this.inputRef.value.reportValidity();
@@ -145,9 +145,9 @@ let RadioGroup = class RadioGroup extends MduiElement {
         return !this.invalid;
     }
     /**
-     * 设置自定义的错误提示文本。只要文本不为空，则表示字段验证未通过
+     * 设置自定义的错误提示文本。只要这个文本不为空，就表示字段未通过验证
      *
-     * @param message 自定义的提示文本
+     * @param message 自定义的错误提示文本
      */
     setCustomValidity(message) {
         this.inputRef.value.setCustomValidity(message);

package/components/radio/radio.d.ts

@@ -6,7 +6,7 @@ import type { Ripple } from '../ripple/index.js';
 import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 declare const Radio_base: import("@open-wc/dedupe-mixin").Constructor<import("../ripple/ripple-mixin.js").RippleMixinInterface> & import("@open-wc/dedupe-mixin").Constructor<import("@mdui/shared/mixins/focusable.js").FocusableMixinInterface> & typeof MduiElement;
 /**
- * @summary 单选框组件。需与 `<mdui-radio-group>` 组件配合使用
+ * @summary 单选框组件。需配合 `<mdui-radio-group>` 组件使用
  *
  * ```html
  * <mdui-radio-group value="chinese">
@@ -19,14 +19,14 @@ declare const Radio_base: import("@open-wc/dedupe-mixin").Constructor<import("..
  * @event blur - 失去焦点时触发
  * @event change - 选中该单选项时触发
  *
- * @slot - 文本
+ * @slot - 文本内容
  * @slot unchecked-icon - 未选中状态的图标
  * @slot checked-icon - 选中状态的图标
  *
  * @csspart control - 左侧图标容器
  * @csspart unchecked-icon 未选中状态的图标
  * @csspart checked-icon 选中状态的图标
- * @csspart label - 文本
+ * @csspart label - 文本内容
  */
 export declare class Radio extends Radio_base<RadioEventMap> {
     static styles: CSSResultGroup;

package/components/radio/radio.js

@@ -14,7 +14,7 @@ import '../icon.js';
 import { RippleMixin } from '../ripple/ripple-mixin.js';
 import { radioStyle } from './radio-style.js';
 /**
- * @summary 单选框组件。需与 `<mdui-radio-group>` 组件配合使用
+ * @summary 单选框组件。需配合 `<mdui-radio-group>` 组件使用
  *
  * ```html
  * <mdui-radio-group value="chinese">
@@ -27,14 +27,14 @@ import { radioStyle } from './radio-style.js';
  * @event blur - 失去焦点时触发
  * @event change - 选中该单选项时触发
  *
- * @slot - 文本
+ * @slot - 文本内容
  * @slot unchecked-icon - 未选中状态的图标
  * @slot checked-icon - 选中状态的图标
  *
  * @csspart control - 左侧图标容器
  * @csspart unchecked-icon 未选中状态的图标
  * @csspart checked-icon 选中状态的图标
- * @csspart label - 文本
+ * @csspart label - 文本内容
  */
 let Radio = class Radio extends RippleMixin(FocusableMixin(MduiElement)) {
     constructor() {

package/components/range-slider/index.d.ts

@@ -12,7 +12,7 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
  *
  * @event focus - 获得焦点时触发
  * @event blur - 失去焦点时触发
- * @event change - 在值发生了变更，且失去了焦点时，将触发该事件
+ * @event change - 值发生变更，且失去焦点时，将触发该事件
  * @event input - 值变更时触发
  * @event invalid - 表单字段验证未通过时触发
  *
@@ -25,7 +25,7 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 export declare class RangeSlider extends SliderBase<RangeSliderEventMap> implements FormControl {
     static styles: CSSResultGroup;
     /**
-     * 默认值。在重置表单时，将重置为该默认值。该属性只能通过 JavaScript 属性设置
+     * 默认值。在重置表单时，将重置为该默认值。此属性只能通过 JavaScript 属性设置
      */
     defaultValue: number[];
     /**
@@ -40,10 +40,9 @@ export declare class RangeSlider extends SliderBase<RangeSliderEventMap> impleme
     private readonly formController;
     private _value;
     /**
-     * 滑块的值，为数组格式；将于表单数据一起提交
+     * 滑块的值，为数组格式，将于表单数据一起提交。
      *
-     * NOTE:
-     * 该属性无法通过 HTML 属性设置初始值，如果要修改该值，只能通过修改 JavaScript 属性值实现。
+     * **NOTE**：该属性无法通过 HTML 属性设置初始值，如果要修改该值，只能通过修改 JavaScript 属性值实现。
      */
     get value(): number[];
     set value(_value: number[]);

package/components/range-slider/index.js

@@ -20,7 +20,7 @@ import { SliderBase } from '../slider/slider-base.js';
  *
  * @event focus - 获得焦点时触发
  * @event blur - 失去焦点时触发
- * @event change - 在值发生了变更，且失去了焦点时，将触发该事件
+ * @event change - 值发生变更，且失去焦点时，将触发该事件
  * @event input - 值变更时触发
  * @event invalid - 表单字段验证未通过时触发
  *
@@ -34,7 +34,7 @@ let RangeSlider = class RangeSlider extends SliderBase {
     constructor() {
         super(...arguments);
         /**
-         * 默认值。在重置表单时，将重置为该默认值。该属性只能通过 JavaScript 属性设置
+         * 默认值。在重置表单时，将重置为该默认值。此属性只能通过 JavaScript 属性设置
          */
         this.defaultValue = [];
         /**
@@ -55,10 +55,9 @@ let RangeSlider = class RangeSlider extends SliderBase {
         };
     }
     /**
-     * 滑块的值，为数组格式；将于表单数据一起提交
+     * 滑块的值，为数组格式，将于表单数据一起提交。
      *
-     * NOTE:
-     * 该属性无法通过 HTML 属性设置初始值，如果要修改该值，只能通过修改 JavaScript 属性值实现。
+     * **NOTE**：该属性无法通过 HTML 属性设置初始值，如果要修改该值，只能通过修改 JavaScript 属性值实现。
      */
     get value() {
         return this._value;