mdui 2.0.2 → 2.0.4

package/components/button/index.d.ts

@@ -14,29 +14,29 @@ import type { TemplateResult, CSSResultGroup } from 'lit';
  * @event invalid - 表单字段验证未通过时触发
  *
  * @slot - 按钮的文本
- * @slot icon - 按钮左侧元素
- * @slot end-icon - 按钮右侧元素
+ * @slot icon - 按钮左侧的元素
+ * @slot end-icon - 按钮右侧的元素
  *
  * @csspart button - 内部的 `<button>` 或 `<a>` 元素
- * @csspart label - 按钮文本
- * @csspart icon - 按钮左侧图标
- * @csspart end-icon - 按钮右侧图标
+ * @csspart label - 按钮的文本
+ * @csspart icon - 按钮左侧的图标
+ * @csspart end-icon - 按钮右侧的图标
  * @csspart loading - 加载中状态的 `<mdui-circular-progress>` 元素
  *
- * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
  */
-export declare class Button extends ButtonBase {
+export declare class Button extends ButtonBase<ButtonEventMap> {
     static styles: CSSResultGroup;
     /**
-     * 按钮形状。可选值为：
+     * 按钮的形状。可选值包括：
      *
-     * * `elevated`：带阴影的按钮，在需要把按钮和背景进行视觉分离时使用
-     * * `filled`：视觉效果仅次于 FAB，用于重要流程的最终操作，如“保存”、“确认”等
-     * * `tonal`：视觉效果介于 `filled` 和 `outlined` 之间，用于中高优先级的操作，如流程中的“下一步”
-     * * `outlined`：带边框的按钮，用于中等优先级，且次要的操作，如“返回”
-     * * `text`：文本按钮，用于最低优先级的操作
+     * * `elevated`：带阴影的按钮，适用于需要将按钮与背景视觉分离的场景
+     * * `filled`：视觉效果强烈，适用于重要流程的最终操作，如“保存”、“确认”等
+     * * `tonal`：视觉效果介于 `filled` 和 `outlined` 之间，适用于中高优先级的操作，如流程中的“下一步”
+     * * `outlined`：带边框的按钮，适用于中等优先级，且次要的操作，如“返回”
+     * * `text`：文本按钮，适用于最低优先级的操作
      */
-    variant: /*带阴影的按钮，在需要把按钮和背景进行视觉分离时使用*/ 'elevated' | /*视觉效果仅次于 FAB，用于重要流程的最终操作，如“保存”、“确认”等*/ 'filled' | /*视觉效果介于 `filled` 和 `outlined` 之间，用于中等偏高优先级的场景，如流程中的“下一步”*/ 'tonal' | /*带边框的按钮，用于中等优先级，且次要操作的场景，如“返回”*/ 'outlined' | /*文本按钮，用于最低优先级的操作*/ 'text';
+    variant: /*带阴影的按钮，适用于需要将按钮与背景视觉分离的场景*/ 'elevated' | /*视觉效果强烈，适用于重要流程的最终操作，如“保存”、“确认”等*/ 'filled' | /*视觉效果介于 `filled` 和 `outlined` 之间，适用于中高优先级的操作，如流程中的“下一步”*/ 'tonal' | /*带边框的按钮，适用于中等优先级，且次要的操作，如“返回”*/ 'outlined' | /*文本按钮，适用于最低优先级的操作*/ 'text';
     /**
      * 是否填满父元素宽度
      */
@@ -57,6 +57,11 @@ export declare class Button extends ButtonBase {
     private renderEndIcon;
     private renderInner;
 }
+export interface ButtonEventMap {
+    focus: FocusEvent;
+    blur: FocusEvent;
+    invalid: CustomEvent<void>;
+}
 declare global {
     interface HTMLElementTagNameMap {
         'mdui-button': Button;

package/components/button/index.js

@@ -19,28 +19,28 @@ import { style } from './style.js';
  * @event invalid - 表单字段验证未通过时触发
  *
  * @slot - 按钮的文本
- * @slot icon - 按钮左侧元素
- * @slot end-icon - 按钮右侧元素
+ * @slot icon - 按钮左侧的元素
+ * @slot end-icon - 按钮右侧的元素
  *
  * @csspart button - 内部的 `<button>` 或 `<a>` 元素
- * @csspart label - 按钮文本
- * @csspart icon - 按钮左侧图标
- * @csspart end-icon - 按钮右侧图标
+ * @csspart label - 按钮的文本
+ * @csspart icon - 按钮左侧的图标
+ * @csspart end-icon - 按钮右侧的图标
  * @csspart loading - 加载中状态的 `<mdui-circular-progress>` 元素
  *
- * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
  */
 let Button = class Button extends ButtonBase {
     constructor() {
         super(...arguments);
         /**
-         * 按钮形状。可选值为：
+         * 按钮的形状。可选值包括：
          *
-         * * `elevated`：带阴影的按钮，在需要把按钮和背景进行视觉分离时使用
-         * * `filled`：视觉效果仅次于 FAB，用于重要流程的最终操作，如“保存”、“确认”等
-         * * `tonal`：视觉效果介于 `filled` 和 `outlined` 之间，用于中高优先级的操作，如流程中的“下一步”
-         * * `outlined`：带边框的按钮，用于中等优先级，且次要的操作，如“返回”
-         * * `text`：文本按钮，用于最低优先级的操作
+         * * `elevated`：带阴影的按钮，适用于需要将按钮与背景视觉分离的场景
+         * * `filled`：视觉效果强烈，适用于重要流程的最终操作，如“保存”、“确认”等
+         * * `tonal`：视觉效果介于 `filled` 和 `outlined` 之间，适用于中高优先级的操作，如流程中的“下一步”
+         * * `outlined`：带边框的按钮，适用于中等优先级，且次要的操作，如“返回”
+         * * `text`：文本按钮，适用于最低优先级的操作
          */
         this.variant = 'filled';
         /**

package/components/button-icon/index.d.ts

@@ -22,19 +22,19 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
  * @csspart selected-icon 选中状态的图标
  * @csspart loading - 加载中状态的 `<mdui-circular-progress>` 元素
  *
- * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
  */
-export declare class ButtonIcon extends ButtonBase {
+export declare class ButtonIcon extends ButtonBase<ButtonIconEventMap> {
     static styles: CSSResultGroup;
     /**
-     * 图标按钮的形状。可选值为：
+     * 图标按钮的形状。可选值包括：
      *
-     * * `standard`：用于最低优先级的操作
-     * * `filled`：具有最强视觉效果，用于高优先级的操作
-     * * `tonal`：视觉效果介于 `filled` 和 `outlined` 之间，用于中高优先级的操作
-     * * `outlined`：用于中等优先级的操作
+     * * `standard`：适用于最低优先级的操作
+     * * `filled`：视觉效果强烈，适用于高优先级的操作
+     * * `tonal`：视觉效果介于 `filled` 和 `outlined` 之间，适用于中高优先级的操作
+     * * `outlined`：适用于中等优先级的操作
      */
-    variant: /*用于最低优先级的操作*/ 'standard' | /*具有最强视觉效果，用于高优先级的操作*/ 'filled' | /*视觉效果介于 `filled` 和 `outlined` 之间，用于中高优先级的操作*/ 'tonal' | /*用于中等优先级的操作*/ 'outlined';
+    variant: /*适用于最低优先级的操作*/ 'standard' | /*视觉效果强烈，适用于高优先级的操作*/ 'filled' | /*视觉效果介于 `filled` 和 `outlined` 之间，适用于中高优先级的操作*/ 'tonal' | /*适用于中等优先级的操作*/ 'outlined';
     /**
      * Material Icons 图标名。也可以通过 default slot 设置
      */
@@ -48,7 +48,7 @@ export declare class ButtonIcon extends ButtonBase {
      */
     selectable: boolean;
     /**
-     * 是否已选中
+     * 是否已被选中
      */
     selected: boolean;
     private readonly rippleRef;
@@ -59,6 +59,12 @@ export declare class ButtonIcon extends ButtonBase {
     protected render(): TemplateResult;
     private renderIcon;
 }
+export interface ButtonIconEventMap {
+    focus: FocusEvent;
+    blur: FocusEvent;
+    change: CustomEvent<void>;
+    invalid: CustomEvent<void>;
+}
 declare global {
     interface HTMLElementTagNameMap {
         'mdui-button-icon': ButtonIcon;

package/components/button-icon/index.js

@@ -5,7 +5,6 @@ import { createRef, ref } from 'lit/directives/ref.js';
 import { HasSlotController } from '@mdui/shared/controllers/has-slot.js';
 import { watch } from '@mdui/shared/decorators/watch.js';
 import { booleanConverter } from '@mdui/shared/helpers/decorator.js';
-import { emit } from '@mdui/shared/helpers/event.js';
 import { nothingTemplate } from '@mdui/shared/helpers/template.js';
 import { ButtonBase } from '../button/button-base.js';
 import '../icon.js';
@@ -30,18 +29,18 @@ import { style } from './style.js';
  * @csspart selected-icon 选中状态的图标
  * @csspart loading - 加载中状态的 `<mdui-circular-progress>` 元素
  *
- * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
  */
 let ButtonIcon = class ButtonIcon extends ButtonBase {
     constructor() {
         super(...arguments);
         /**
-         * 图标按钮的形状。可选值为：
+         * 图标按钮的形状。可选值包括：
          *
-         * * `standard`：用于最低优先级的操作
-         * * `filled`：具有最强视觉效果，用于高优先级的操作
-         * * `tonal`：视觉效果介于 `filled` 和 `outlined` 之间，用于中高优先级的操作
-         * * `outlined`：用于中等优先级的操作
+         * * `standard`：适用于最低优先级的操作
+         * * `filled`：视觉效果强烈，适用于高优先级的操作
+         * * `tonal`：视觉效果介于 `filled` 和 `outlined` 之间，适用于中高优先级的操作
+         * * `outlined`：适用于中等优先级的操作
          */
         this.variant = 'standard';
         /**
@@ -49,7 +48,7 @@ let ButtonIcon = class ButtonIcon extends ButtonBase {
          */
         this.selectable = false;
         /**
-         * 是否已选中
+         * 是否已被选中
          */
         this.selected = false;
         this.rippleRef = createRef();
@@ -59,7 +58,7 @@ let ButtonIcon = class ButtonIcon extends ButtonBase {
         return this.rippleRef.value;
     }
     onSelectedChange() {
-        emit(this, 'change');
+        this.emit('change');
     }
     firstUpdated(changedProperties) {
         super.firstUpdated(changedProperties);

package/components/card/index.d.ts

@@ -1,7 +1,7 @@
-import { LitElement } from 'lit';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import type { Ripple } from '../ripple/index.js';
 import type { TemplateResult, CSSResultGroup } from 'lit';
-declare const Card_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 LitElement;
+declare const Card_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 卡片组件
  *
@@ -12,22 +12,22 @@ declare const Card_base: import("@open-wc/dedupe-mixin").Constructor<import("@md
  * @event focus - 获得焦点时触发
  * @event blur - 失去焦点时触发
  *
- * @slot - 卡片内容
+ * @slot - 卡片的内容
  *
- * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
  */
-export declare class Card extends Card_base {
+export declare class Card extends Card_base<CardEventMap> {
     static styles: CSSResultGroup;
     /**
-     * 卡片形状。可选值为：
+     * 卡片的形状。可选值包括：
      *
-     * * `elevated`：具有阴影，与背景的分离度比 `filled` 更高，但小于 `outlined`
-     * * `filled`：与背景的分离度最小
-     * * `outlined`：具有边框，与背景的分离度最大
+     * * `elevated`：带阴影的卡片，与背景的视觉分离度较高
+     * * `filled`：带填充色的卡片，与背景的视觉分离度较低
+     * * `outlined`：带边框的卡片，与背景的视觉分离度最高
      */
-    variant: /*具有阴影，与背景的分离度比 `filled` 更高，但小于 `outlined`*/ 'elevated' | /*与背景的分离度最小*/ 'filled' | /*具有边框，与背景的分离度最大*/ 'outlined';
+    variant: /*带阴影的卡片，与背景的视觉分离度较高*/ 'elevated' | /*带填充色的卡片，与背景的视觉分离度较低*/ 'filled' | /*带边框的卡片，与背景的视觉分离度最高*/ 'outlined';
     /**
-     * 是否可点击。为 `true` 时，会添加鼠标悬浮效果、及点击涟漪效果
+     * 是否可点击。为 `true` 时，卡片将具有鼠标悬浮效果和点击涟漪效果
      */
     clickable: boolean;
     /**
@@ -41,6 +41,10 @@ export declare class Card extends Card_base {
     protected get focusDisabled(): boolean;
     protected render(): TemplateResult;
 }
+export interface CardEventMap {
+    focus: FocusEvent;
+    blur: FocusEvent;
+}
 declare global {
     interface HTMLElementTagNameMap {
         'mdui-card': Card;

package/components/card/index.js

@@ -1,7 +1,8 @@
 import { __decorate } from "tslib";
-import { LitElement, html } from 'lit';
+import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { createRef, ref } from 'lit/directives/ref.js';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import { booleanConverter } from '@mdui/shared/helpers/decorator.js';
 import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
 import { AnchorMixin } from '@mdui/shared/mixins/anchor.js';
@@ -18,23 +19,23 @@ import { style } from './style.js';
  * @event focus - 获得焦点时触发
  * @event blur - 失去焦点时触发
  *
- * @slot - 卡片内容
+ * @slot - 卡片的内容
  *
- * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
  */
-let Card = class Card extends AnchorMixin(RippleMixin(FocusableMixin(LitElement))) {
+let Card = class Card extends AnchorMixin(RippleMixin(FocusableMixin(MduiElement))) {
     constructor() {
         super(...arguments);
         /**
-         * 卡片形状。可选值为：
+         * 卡片的形状。可选值包括：
          *
-         * * `elevated`：具有阴影，与背景的分离度比 `filled` 更高，但小于 `outlined`
-         * * `filled`：与背景的分离度最小
-         * * `outlined`：具有边框，与背景的分离度最大
+         * * `elevated`：带阴影的卡片，与背景的视觉分离度较高
+         * * `filled`：带填充色的卡片，与背景的视觉分离度较低
+         * * `outlined`：带边框的卡片，与背景的视觉分离度最高
          */
         this.variant = 'elevated';
         /**
-         * 是否可点击。为 `true` 时，会添加鼠标悬浮效果、及点击涟漪效果
+         * 是否可点击。为 `true` 时，卡片将具有鼠标悬浮效果和点击涟漪效果
          */
         this.clickable = false;
         /**

package/components/checkbox/index.d.ts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import '@mdui/shared/icons/check-box-outline-blank.js';
 import '@mdui/shared/icons/check-box.js';
 import '@mdui/shared/icons/indeterminate-check-box.js';
@@ -6,7 +6,7 @@ import '../icon.js';
 import type { Ripple } from '../ripple/index.js';
 import type { FormControl } from '@mdui/jq/shared/form.js';
 import type { TemplateResult, CSSResultGroup } from 'lit';
-declare const Checkbox_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 LitElement;
+declare const Checkbox_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 复选框组件
  *
@@ -20,18 +20,18 @@ declare const Checkbox_base: import("@open-wc/dedupe-mixin").Constructor<import(
  * @event input - 选中状态变更时触发
  * @event invalid - 表单字段验证未通过时触发
  *
- * @slot - 文本
- * @slot unchecked-icon - 未选中状态图标
- * @slot checked-icon - 选中状态图标
- * @slot indeterminate-icon - 不确定状态图标
+ * @slot - 复选框文本
+ * @slot unchecked-icon - 未选中状态的图标
+ * @slot checked-icon - 选中状态的图标
+ * @slot indeterminate-icon - 不确定状态的图标
  *
  * @csspart control - 左侧图标容器
- * @csspart unchecked-icon - 未选中状态图标
- * @csspart checked-icon - 选中状态图标
- * @csspart indeterminate-icon - 不确定状态图标
- * @csspart label - 文本
+ * @csspart unchecked-icon - 未选中状态的图标
+ * @csspart checked-icon - 选中状态的图标
+ * @csspart indeterminate-icon - 不确定状态的图标
+ * @csspart label - 复选框文本
  */
-export declare class Checkbox extends Checkbox_base implements FormControl {
+export declare class Checkbox extends Checkbox_base<CheckboxEventMap> implements FormControl {
     static styles: CSSResultGroup;
     /**
      * 是否为禁用状态
@@ -42,21 +42,21 @@ export declare class Checkbox extends Checkbox_base implements FormControl {
      */
     checked: boolean;
     /**
-     * 默认选中状态。在重置表单时，将重置为该默认状态。该属性只能通过 JavaScript 属性设置
+     * 默认选中状态。在重置表单时，将恢复为此状态。此属性只能通过 JavaScript 属性设置
      */
     defaultChecked: boolean;
     /**
-     * 是否为不确定状态
+     * 是否处于不确定状态
      */
     indeterminate: boolean;
     /**
-     * 提交表单时，是否必须选中该复选框
+     * 提交表单时，是否必须选中此复选框
      */
     required: boolean;
     /**
-     * 关联的 `form` 元素。此属性值必须为同一页面中的一个 `<form>` 元素的 `id` 属性。
+     * 关联的 `<form>` 元素。此属性值应为同一页面中的一个 `<form>` 元素的 `id`。
      *
-     * 如果此属性未指定，则元素必须是 `form` 元素的后代。利用此属性，你可以将元素放置在页面中的任何位置，而不仅仅是作为 `form` 元素的后代。
+     * 如果未指定此属性，则该元素必须是 `<form>` 元素的子元素。通过此属性，你可以将元素放置在页面的任何位置，而不仅仅是 `<form>` 元素的子元素。
      */
     form?: string;
     /**
@@ -87,11 +87,11 @@ export declare class Checkbox extends Checkbox_base implements FormControl {
     private readonly rippleRef;
     private readonly formController;
     /**
-     * 表单验证状态对象
+     * 表单验证状态对象，具体参见 [`ValidityState`](https://developer.mozilla.org/zh-CN/docs/Web/API/ValidityState)
      */
     get validity(): ValidityState;
     /**
-     * 表单验证的错误提示信息
+     * 如果表单验证未通过，此属性将包含提示信息。如果验证通过，此属性将为空字符串
      */
     get validationMessage(): string;
     protected get rippleElement(): Ripple;
@@ -101,19 +101,19 @@ export declare class Checkbox extends Checkbox_base implements FormControl {
     private onDisabledChange;
     private onCheckedChange;
     /**
-     * 检查表单字段是否验证通过。若未通过则返回 `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;
@@ -122,6 +122,13 @@ export declare class Checkbox extends Checkbox_base implements FormControl {
      */
     private onChange;
 }
+export interface CheckboxEventMap {
+    focus: FocusEvent;
+    blur: FocusEvent;
+    change: CustomEvent<void>;
+    input: Event;
+    invalid: CustomEvent<void>;
+}
 declare global {
     interface HTMLElementTagNameMap {
         'mdui-checkbox': Checkbox;

package/components/checkbox/index.js

@@ -1,15 +1,15 @@
 import { __decorate } from "tslib";
-import { html, LitElement } from 'lit';
+import { html } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { live } from 'lit/directives/live.js';
 import { createRef, ref } from 'lit/directives/ref.js';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import { FormController, formResets } from '@mdui/shared/controllers/form.js';
 import { defaultValue } from '@mdui/shared/decorators/default-value.js';
 import { watch } from '@mdui/shared/decorators/watch.js';
 import { booleanConverter } from '@mdui/shared/helpers/decorator.js';
-import { emit } from '@mdui/shared/helpers/event.js';
 import '@mdui/shared/icons/check-box-outline-blank.js';
 import '@mdui/shared/icons/check-box.js';
 import '@mdui/shared/icons/indeterminate-check-box.js';
@@ -31,18 +31,18 @@ import { style } from './style.js';
  * @event input - 选中状态变更时触发
  * @event invalid - 表单字段验证未通过时触发
  *
- * @slot - 文本
- * @slot unchecked-icon - 未选中状态图标
- * @slot checked-icon - 选中状态图标
- * @slot indeterminate-icon - 不确定状态图标
+ * @slot - 复选框文本
+ * @slot unchecked-icon - 未选中状态的图标
+ * @slot checked-icon - 选中状态的图标
+ * @slot indeterminate-icon - 不确定状态的图标
  *
  * @csspart control - 左侧图标容器
- * @csspart unchecked-icon - 未选中状态图标
- * @csspart checked-icon - 选中状态图标
- * @csspart indeterminate-icon - 不确定状态图标
- * @csspart label - 文本
+ * @csspart unchecked-icon - 未选中状态的图标
+ * @csspart checked-icon - 选中状态的图标
+ * @csspart indeterminate-icon - 不确定状态的图标
+ * @csspart label - 复选框文本
  */
-let Checkbox = class Checkbox extends RippleMixin(FocusableMixin(LitElement)) {
+let Checkbox = class Checkbox extends RippleMixin(FocusableMixin(MduiElement)) {
     constructor() {
         super(...arguments);
         /**
@@ -54,15 +54,15 @@ let Checkbox = class Checkbox extends RippleMixin(FocusableMixin(LitElement)) {
          */
         this.checked = false;
         /**
-         * 默认选中状态。在重置表单时，将重置为该默认状态。该属性只能通过 JavaScript 属性设置
+         * 默认选中状态。在重置表单时，将恢复为此状态。此属性只能通过 JavaScript 属性设置
          */
         this.defaultChecked = false;
         /**
-         * 是否为不确定状态
+         * 是否处于不确定状态
          */
         this.indeterminate = false;
         /**
-         * 提交表单时，是否必须选中该复选框
+         * 提交表单时，是否必须选中此复选框
          */
         this.required = false;
         /**
@@ -86,13 +86,13 @@ let Checkbox = class Checkbox extends RippleMixin(FocusableMixin(LitElement)) {
         });
     }
     /**
-     * 表单验证状态对象
+     * 表单验证状态对象，具体参见 [`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;
@@ -126,12 +126,12 @@ let Checkbox = class Checkbox extends RippleMixin(FocusableMixin(LitElement)) {
         }
     }
     /**
-     * 检查表单字段是否验证通过。若未通过则返回 `false`，并触发 `invalid` 事件；若验证通过，则返回 `true`
+     * 检查表单字段是否通过验证。如果未通过，返回 `false` 并触发 `invalid` 事件；如果通过，返回 `true`
      */
     checkValidity() {
         const valid = this.inputRef.value.checkValidity();
         if (!valid) {
-            emit(this, 'invalid', {
+            this.emit('invalid', {
                 bubbles: false,
                 cancelable: true,
                 composed: false,
@@ -140,20 +140,20 @@ let Checkbox = class Checkbox extends RippleMixin(FocusableMixin(LitElement)) {
         return valid;
     }
     /**
-     * 检查表单字段是否验证通过。若未通过则返回 `false`，并触发 `invalid` 事件；若验证通过，则返回 `true`。
+     * 检查表单字段是否通过验证。如果未通过，返回 `false` 并触发 `invalid` 事件；如果通过，返回 `true`。
      *
-     * 验证未通过时，还将在组件上显示未通过的提示。
+     * 如果验证未通过，还会在组件上显示验证失败的提示。
      */
     reportValidity() {
         this.invalid = !this.inputRef.value.reportValidity();
         if (this.invalid) {
-            const requestInvalid = emit(this, 'invalid', {
+            const eventProceeded = this.emit('invalid', {
                 bubbles: false,
                 cancelable: true,
                 composed: false,
             });
             // 调用了 preventDefault() 时，隐藏默认的表单错误提示
-            if (requestInvalid.defaultPrevented) {
+            if (!eventProceeded) {
                 this.blur();
                 this.focus();
             }
@@ -161,9 +161,9 @@ let Checkbox = class Checkbox extends RippleMixin(FocusableMixin(LitElement)) {
         return !this.invalid;
     }
     /**
-     * 设置自定义的错误提示文本。只要文本不为空，则表示字段验证未通过
+     * 设置自定义的错误提示文本。只要这个文本不为空，就表示字段未通过验证
      *
-     * @param message 自定义的提示文本
+     * @param message 自定义的错误提示文本
      */
     setCustomValidity(message) {
         this.inputRef.value.setCustomValidity(message);
@@ -184,7 +184,7 @@ let Checkbox = class Checkbox extends RippleMixin(FocusableMixin(LitElement)) {
     onChange() {
         this.checked = this.inputRef.value.checked;
         this.indeterminate = false;
-        emit(this, 'change');
+        this.emit('change');
     }
 };
 Checkbox.styles = [componentStyle, style];