mdui 2.0.2 → 2.0.4

package/components/icon/index.js

@@ -1,10 +1,11 @@
 import { __decorate } from "tslib";
-import { html, LitElement } from 'lit';
+import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import { until } from 'lit/directives/until.js';
 import { ajax } from '@mdui/jq/functions/ajax.js';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import { HasSlotController } from '@mdui/shared/controllers/has-slot.js';
 import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
 import { style } from './style.js';
@@ -17,7 +18,7 @@ import { style } from './style.js';
  *
  * @slot - `svg` 图标的内容
  */
-let Icon = class Icon extends LitElement {
+let Icon = class Icon extends MduiElement {
     constructor() {
         super(...arguments);
         this.hasSlotController = new HasSlotController(this, '[default]');

package/components/layout/layout-item-base.d.ts

@@ -1,6 +1,7 @@
-import { LitElement } from 'lit';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import type { LayoutManager, LayoutPlacement } from './helper.js';
-export declare class LayoutItemBase extends LitElement {
+import type { PlainObject } from '@mdui/jq/shared/helper.js';
+export declare class LayoutItemBase<E = PlainObject> extends MduiElement<E> {
     /**
      * 该组件在 [`<mdui-layout>`](/docs/2/components/layout) 中的布局顺序，按从小到大排序。默认为 `0`
      */

package/components/layout/layout-item-base.js

@@ -1,10 +1,10 @@
 import { __decorate } from "tslib";
-import { LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 import { isNodeName } from '@mdui/jq/shared/helper.js';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import { watch } from '@mdui/shared/decorators/watch.js';
 import { getLayout } from './helper.js';
-export class LayoutItemBase extends LitElement {
+export class LayoutItemBase extends MduiElement {
     constructor() {
         super(...arguments);
         // 父元素是否是 `mdui-layout`

package/components/layout/layout-item.d.ts

@@ -1,7 +1,6 @@
-import { CSSResultGroup } from 'lit';
 import { LayoutItemBase } from './layout-item-base.js';
 import type { LayoutPlacement } from './helper.js';
-import type { TemplateResult } from 'lit';
+import type { CSSResultGroup, TemplateResult } from 'lit';
 /**
  * @summary 布局项组件
  *
@@ -13,23 +12,25 @@ import type { TemplateResult } from 'lit';
  * </mdui-layout>
  * ```
  *
- * @slot - 可以是任意内容
+ * @slot - 可以包含任意内容
  */
-export declare class LayoutItem extends LayoutItemBase {
+export declare class LayoutItem extends LayoutItemBase<LayoutItemEventMap> {
     static styles: CSSResultGroup;
     /**
-     * 该组件所处位置。可选值为：
+     * 组件的位置。可选值包括：
      *
-     * * `top`：位于上方
-     * * `bottom`：位于下方
-     * * `left`：位于左侧
-     * * `right`：位于右侧
+     * * `top`：上方
+     * * `bottom`：下方
+     * * `left`：左侧
+     * * `right`：右侧
      */
-    placement: /*位于上方*/ 'top' | /*位于下方*/ 'bottom' | /*位于左侧*/ 'left' | /*位于右侧*/ 'right';
+    placement: /*上方*/ 'top' | /*下方*/ 'bottom' | /*左侧*/ 'left' | /*右侧*/ 'right';
     protected get layoutPlacement(): LayoutPlacement;
     private onPlacementChange;
     protected render(): TemplateResult;
 }
+export interface LayoutItemEventMap {
+}
 declare global {
     interface HTMLElementTagNameMap {
         'mdui-layout-item': LayoutItem;

package/components/layout/layout-item.js

@@ -16,18 +16,18 @@ import { layoutItemStyle } from './layout-item-style.js';
  * </mdui-layout>
  * ```
  *
- * @slot - 可以是任意内容
+ * @slot - 可以包含任意内容
  */
 let LayoutItem = class LayoutItem extends LayoutItemBase {
     constructor() {
         super(...arguments);
         /**
-         * 该组件所处位置。可选值为：
+         * 组件的位置。可选值包括：
          *
-         * * `top`：位于上方
-         * * `bottom`：位于下方
-         * * `left`：位于左侧
-         * * `right`：位于右侧
+         * * `top`：上方
+         * * `bottom`：下方
+         * * `left`：左侧
+         * * `right`：右侧
          */
         this.placement = 'top';
     }

package/components/layout/layout-main.d.ts

@@ -1,7 +1,7 @@
-import { LitElement } from 'lit';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import type { CSSResultGroup, TemplateResult } from 'lit';
 /**
- * @summary 布局主内容组件
+ * @summary 布局主体内容组件
  *
  * ```html
  * <mdui-layout>
@@ -11,15 +11,17 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
  * </mdui-layout>
  * ```
  *
- * @slot - 可以是任意内容
+ * @slot - 可以包含任意内容
  */
-export declare class LayoutMain extends LitElement {
+export declare class LayoutMain extends MduiElement<LayoutMainEventMap> {
     static styles: CSSResultGroup;
     private layoutManager?;
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected render(): TemplateResult;
 }
+export interface LayoutMainEventMap {
+}
 declare global {
     interface HTMLElementTagNameMap {
         'mdui-layout-main': LayoutMain;

package/components/layout/layout-main.js

@@ -1,12 +1,13 @@
 import { __decorate } from "tslib";
-import { html, LitElement } from 'lit';
+import { html } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import { isNodeName } from '@mdui/jq/shared/helper.js';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
 import { getLayout } from './helper.js';
 import { layoutMainStyle } from './layout-main-style.js';
 /**
- * @summary 布局主内容组件
+ * @summary 布局主体内容组件
  *
  * ```html
  * <mdui-layout>
@@ -16,9 +17,9 @@ import { layoutMainStyle } from './layout-main-style.js';
  * </mdui-layout>
  * ```
  *
- * @slot - 可以是任意内容
+ * @slot - 可以包含任意内容
  */
-let LayoutMain = class LayoutMain extends LitElement {
+let LayoutMain = class LayoutMain extends MduiElement {
     connectedCallback() {
         super.connectedCallback();
         const parentElement = this.parentElement;

package/components/layout/layout.d.ts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import type { CSSResultGroup, TemplateResult } from 'lit';
 /**
  * @summary 布局组件
@@ -11,16 +11,18 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
  * </mdui-layout>
  * ```
  *
- * @slot - 可以是 [`<mdui-top-app-bar>`](/docs/2/components/top-app-bar)、[`<mdui-bottom-app-bar>`](/docs/2/components/bottom-app-bar)、[`<mdui-navigation-bar>`](/docs/2/components/navigation-bar)、[`<mdui-navigation-drawer>`](/docs/2/components/navigation-drawer)、[`<mdui-navigation-rail>`](/docs/2/components/navigation-rail)、`<mdui-layout-item>`、`<mdui-layout-main>` 元素
+ * @slot - 可以包含 [`<mdui-top-app-bar>`](/docs/2/components/top-app-bar)、[`<mdui-bottom-app-bar>`](/docs/2/components/bottom-app-bar)、[`<mdui-navigation-bar>`](/docs/2/components/navigation-bar)、[`<mdui-navigation-drawer>`](/docs/2/components/navigation-drawer)、[`<mdui-navigation-rail>`](/docs/2/components/navigation-rail)、`<mdui-layout-item>`、`<mdui-layout-main>` 元素
  */
-export declare class Layout extends LitElement {
+export declare class Layout extends MduiElement<LayoutEventMap> {
     static styles: CSSResultGroup;
     /**
-     * 把当前布局的高度设为 100%
+     * 设置当前布局的高度为 100%
      */
     fullHeight: boolean;
     protected render(): TemplateResult;
 }
+export interface LayoutEventMap {
+}
 declare global {
     interface HTMLElementTagNameMap {
         'mdui-layout': Layout;

package/components/layout/layout.js

@@ -1,6 +1,7 @@
 import { __decorate } from "tslib";
-import { html, LitElement } from 'lit';
+import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.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 { layoutStyle } from './layout-style.js';
@@ -15,13 +16,13 @@ import { layoutStyle } from './layout-style.js';
  * </mdui-layout>
  * ```
  *
- * @slot - 可以是 [`<mdui-top-app-bar>`](/docs/2/components/top-app-bar)、[`<mdui-bottom-app-bar>`](/docs/2/components/bottom-app-bar)、[`<mdui-navigation-bar>`](/docs/2/components/navigation-bar)、[`<mdui-navigation-drawer>`](/docs/2/components/navigation-drawer)、[`<mdui-navigation-rail>`](/docs/2/components/navigation-rail)、`<mdui-layout-item>`、`<mdui-layout-main>` 元素
+ * @slot - 可以包含 [`<mdui-top-app-bar>`](/docs/2/components/top-app-bar)、[`<mdui-bottom-app-bar>`](/docs/2/components/bottom-app-bar)、[`<mdui-navigation-bar>`](/docs/2/components/navigation-bar)、[`<mdui-navigation-drawer>`](/docs/2/components/navigation-drawer)、[`<mdui-navigation-rail>`](/docs/2/components/navigation-rail)、`<mdui-layout-item>`、`<mdui-layout-main>` 元素
  */
-let Layout = class Layout extends LitElement {
+let Layout = class Layout extends MduiElement {
     constructor() {
         super(...arguments);
         /**
-         * 把当前布局的高度设为 100%
+         * 设置当前布局的高度为 100%
          */
         this.fullHeight = false;
     }

package/components/linear-progress/index.d.ts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import type { CSSResultGroup, TemplateResult } from 'lit';
 /**
  * @summary 线性进度指示器组件
@@ -7,22 +7,24 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
  * <mdui-linear-progress></mdui-linear-progress>
  * ```
  *
- * @csspart indicator - 指示器
+ * @csspart indicator - 指示器部分
  *
- * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
  */
-export declare class LinearProgress extends LitElement {
+export declare class LinearProgress extends MduiElement<LinearProgressEventMap> {
     static styles: CSSResultGroup;
     /**
-     * 进度指示器的最大值，默认为 1
+     * 进度指示器的最大值。默认为 `1`
      */
     max: number;
     /**
-     * 进度指示器的当前值。若未指定该值，则为不确定状态
+     * 进度指示器的当前值。如果未指定该值，则处于不确定状态
      */
     value?: number;
     protected render(): TemplateResult;
 }
+export interface LinearProgressEventMap {
+}
 declare global {
     interface HTMLElementTagNameMap {
         'mdui-linear-progress': LinearProgress;

package/components/linear-progress/index.js

@@ -1,8 +1,9 @@
 import { __decorate } from "tslib";
-import { html, LitElement } from 'lit';
+import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { isUndefined } from '@mdui/jq/shared/helper.js';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
 import { style } from './style.js';
 /**
@@ -12,15 +13,15 @@ import { style } from './style.js';
  * <mdui-linear-progress></mdui-linear-progress>
  * ```
  *
- * @csspart indicator - 指示器
+ * @csspart indicator - 指示器部分
  *
- * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
  */
-let LinearProgress = class LinearProgress extends LitElement {
+let LinearProgress = class LinearProgress extends MduiElement {
     constructor() {
         super(...arguments);
         /**
-         * 进度指示器的最大值，默认为 1
+         * 进度指示器的最大值。默认为 `1`
          */
         this.max = 1;
     }

package/components/list/list-item-style.js

@@ -1,4 +1,4 @@
 import { css } from 'lit';
 export const listItemStyle = css `:host{--shape-corner:var(--mdui-shape-corner-none);--shape-corner-rounded:var(--mdui-shape-corner-extra-large);position:relative;display:block;border-radius:var(--shape-corner);--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-surface)}:host([rounded]),:host([rounded]) mdui-ripple{border-radius:var(--shape-corner-rounded)}:host([active]){background-color:rgb(var(--mdui-color-secondary-container));--mdui-comp-ripple-state-layer-color:var(
       --mdui-color-on-secondary-container
-    )}:host([disabled]){pointer-events:none}.container{cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}:host([disabled]) .container{cursor:default;opacity:.38}:host([nonclickable]:not([href])) .container{cursor:auto;-webkit-user-select:auto;user-select:auto}.preset{display:flex;align-items:center;text-decoration:none;padding:.5rem 1.5rem .5rem 1rem;min-height:3.5rem}:host([alignment=start]) .preset{align-items:flex-start}:host([alignment=end]) .preset{align-items:flex-end}.body{display:flex;flex:1 1 100%;flex-direction:column;justify-content:center;min-width:0}.headline{display:block;color:rgb(var(--mdui-color-on-surface));font-size:var(--mdui-typescale-body-large-size);font-weight:var(--mdui-typescale-body-large-weight);letter-spacing:var(--mdui-typescale-body-large-tracking);line-height:var(--mdui-typescale-body-large-line-height)}:host([active]) .headline{color:rgb(var(--mdui-color-on-secondary-container))}.description{display:none;color:rgb(var(--mdui-color-on-surface-variant));font-size:var(--mdui-typescale-body-medium-size);font-weight:var(--mdui-typescale-body-medium-weight);letter-spacing:var(--mdui-typescale-body-medium-tracking);line-height:var(--mdui-typescale-body-medium-line-height)}:host([disabled]) .description,:host([focused]) .description,:host([hover]) .description,:host([pressed]) .description{color:rgb(var(--mdui-color-on-surface))}.has-description .description{display:block}:host([description-line='1']) .description,:host([headline-line='1']) .headline{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host([description-line='2']) .description,:host([description-line='3']) .description,:host([headline-line='2']) .headline,:host([headline-line='3']) .headline{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-box-orient:vertical}:host([description-line='2']) .description,:host([headline-line='2']) .headline{-webkit-line-clamp:2}:host([description-line='3']) .description,:host([headline-line='3']) .headline{-webkit-line-clamp:3}.end-icon,.icon{display:flex;flex:0 0 auto;font-size:var(--mdui-typescale-label-small-size);font-weight:var(--mdui-typescale-label-small-weight);letter-spacing:var(--mdui-typescale-label-small-tracking);line-height:var(--mdui-typescale-label-small-line-height);color:rgb(var(--mdui-color-on-surface-variant))}:host([disabled]) .end-icon,:host([disabled]) .icon,:host([focused]) .end-icon,:host([focused]) .icon,:host([hover]) .end-icon,:host([hover]) .icon,:host([pressed]) .end-icon,:host([pressed]) .icon{color:rgb(var(--mdui-color-on-surface))}:host([active]) .end-icon,:host([active]) .icon{color:rgb(var(--mdui-color-on-secondary-container))}.end-icon mdui-icon,.icon mdui-icon,.is-end-icon ::slotted([slot=end-icon]),.is-icon ::slotted([slot=icon]){font-size:1.5rem}.has-icon .icon{margin-right:1rem}.has-icon ::slotted(mdui-checkbox[slot=icon]),.has-icon ::slotted(mdui-radio[slot=icon]){margin-left:-.5rem}.has-end-icon .end-icon{margin-left:1rem}.has-end-icon ::slotted(mdui-checkbox[slot=end-icon]),.has-end-icon ::slotted(mdui-radio[slot=end-icon]){margin-right:-.5rem}`;
+    )}:host([disabled]){pointer-events:none}.container{cursor:pointer;-webkit-user-select:none;user-select:none;text-decoration:none;color:inherit;-webkit-tap-highlight-color:transparent}:host([disabled]) .container{cursor:default;opacity:.38}:host([nonclickable]:not([href])) .container{cursor:auto;-webkit-user-select:auto;user-select:auto}.preset{display:flex;align-items:center;padding:.5rem 1.5rem .5rem 1rem;min-height:3.5rem}:host([alignment=start]) .preset{align-items:flex-start}:host([alignment=end]) .preset{align-items:flex-end}.body{display:flex;flex:1 1 100%;flex-direction:column;justify-content:center;min-width:0}.headline{display:block;color:rgb(var(--mdui-color-on-surface));font-size:var(--mdui-typescale-body-large-size);font-weight:var(--mdui-typescale-body-large-weight);letter-spacing:var(--mdui-typescale-body-large-tracking);line-height:var(--mdui-typescale-body-large-line-height)}:host([active]) .headline{color:rgb(var(--mdui-color-on-secondary-container))}.description{display:none;color:rgb(var(--mdui-color-on-surface-variant));font-size:var(--mdui-typescale-body-medium-size);font-weight:var(--mdui-typescale-body-medium-weight);letter-spacing:var(--mdui-typescale-body-medium-tracking);line-height:var(--mdui-typescale-body-medium-line-height)}:host([disabled]) .description,:host([focused]) .description,:host([hover]) .description,:host([pressed]) .description{color:rgb(var(--mdui-color-on-surface))}.has-description .description{display:block}:host([description-line='1']) .description,:host([headline-line='1']) .headline{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host([description-line='2']) .description,:host([description-line='3']) .description,:host([headline-line='2']) .headline,:host([headline-line='3']) .headline{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-box-orient:vertical}:host([description-line='2']) .description,:host([headline-line='2']) .headline{-webkit-line-clamp:2}:host([description-line='3']) .description,:host([headline-line='3']) .headline{-webkit-line-clamp:3}.end-icon,.icon{display:flex;flex:0 0 auto;font-size:var(--mdui-typescale-label-small-size);font-weight:var(--mdui-typescale-label-small-weight);letter-spacing:var(--mdui-typescale-label-small-tracking);line-height:var(--mdui-typescale-label-small-line-height);color:rgb(var(--mdui-color-on-surface-variant))}:host([disabled]) .end-icon,:host([disabled]) .icon,:host([focused]) .end-icon,:host([focused]) .icon,:host([hover]) .end-icon,:host([hover]) .icon,:host([pressed]) .end-icon,:host([pressed]) .icon{color:rgb(var(--mdui-color-on-surface))}:host([active]) .end-icon,:host([active]) .icon{color:rgb(var(--mdui-color-on-secondary-container))}.end-icon mdui-icon,.icon mdui-icon,.is-end-icon ::slotted([slot=end-icon]),.is-icon ::slotted([slot=icon]){font-size:1.5rem}.has-icon .icon{margin-right:1rem}.has-icon ::slotted(mdui-checkbox[slot=icon]),.has-icon ::slotted(mdui-radio[slot=icon]){margin-left:-.5rem}.has-end-icon .end-icon{margin-left:1rem}.has-end-icon ::slotted(mdui-checkbox[slot=end-icon]),.has-end-icon ::slotted(mdui-radio[slot=end-icon]){margin-right:-.5rem}`;

package/components/list/list-item.d.ts

@@ -1,10 +1,10 @@
-import { LitElement } from 'lit';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import '../icon.js';
 import type { Ripple } from '../ripple/index.js';
 import type { CSSResultGroup, TemplateResult } from 'lit';
-declare const ListItem_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 ListItem_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-list>` 组件配合使用
+ * @summary 列表项组件。需配合 `<mdui-list>` 组件使用
  *
  * ```html
  * <mdui-list>
@@ -30,35 +30,35 @@ declare const ListItem_base: import("@open-wc/dedupe-mixin").Constructor<import(
  * @csspart headline - 主标题
  * @csspart description - 副标题
  *
- * @cssprop --shape-corner - 列表项的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
- * @cssprop --shape-corner-rounded - 指定了 `rounded` 时，列表项的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --shape-corner - 列表项的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --shape-corner-rounded - 指定了 `rounded` 属性时，列表项的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
  */
-export declare class ListItem extends ListItem_base {
+export declare class ListItem extends ListItem_base<ListItemEventMap> {
     static styles: CSSResultGroup;
     /**
      * 主文本。也可以通过 default slot 设置
      */
     headline?: string;
     /**
-     * 主文本行数，超过行数限制后会截断显示。默认为没有行数限制。可选值为：
+     * 主文本行数，超过限制后将截断显示。默认无行数限制。可选值包括：
      *
-     * * `1`：显示单行文本，超出后截断显示
-     * * `2`：显示两行文本，超出后截断显示
-     * * `3`：显示三行文本，超出后截断显示
+     * * `1`：显示单行，超出后截断
+     * * `2`：显示两行，超出后截断
+     * * `3`：显示三行，超出后截断
      */
-    headlineLine?: /*显示单行文本，超出后截断显示*/ 1 | /*显示两行文本，超出后截断显示*/ 2 | /*显示三行文本，超出后截断显示*/ 3;
+    headlineLine?: /*显示单行，超出后截断*/ 1 | /*显示两行，超出后截断*/ 2 | /*显示三行，超出后截断*/ 3;
     /**
      * 副文本。也可以通过 `slot="description"` 设置
      */
     description?: string;
     /**
-     * 副文本行数，超过行数限制后会截断显示。默认为没有行数限制。可选值为：
+     * 副文本行数，超过限制后将截断显示。默认无行数限制。可选值包括：
      *
-     * * `1`：显示单行文本，超出后截断显示
-     * * `2`：显示两行文本，超出后截断显示
-     * * `3`：显示三行文本，超出后截断显示
+     * * `1`：显示单行，超出后截断
+     * * `2`：显示两行，超出后截断
+     * * `3`：显示三行，超出后截断
      */
-    descriptionLine?: 1 | 2 | 3;
+    descriptionLine?: /*显示单行，超出后截断*/ 1 | /*显示两行，超出后截断*/ 2 | /*显示三行，超出后截断*/ 3;
     /**
      * 左侧的 Material Icons 图标名。也可以通过 `slot="icon"` 设置
      */
@@ -68,7 +68,7 @@ export declare class ListItem extends ListItem_base {
      */
     endIcon?: string;
     /**
-     * 是否禁用该列表项，列表项将置灰，且其中的 [`<mdui-checkbox>`](/docs/2/components/checkbox)、[`<mdui-radio>`](/docs/2/components/radio)、[`<mdui-switch>`](/docs/2/components/switch) 等都将禁用
+     * 是否禁用该列表项，禁用后，列表项将变为灰色，且其中的 [`<mdui-checkbox>`](/docs/2/components/checkbox)、[`<mdui-radio>`](/docs/2/components/radio)、[`<mdui-switch>`](/docs/2/components/switch) 等也将禁用
      */
     disabled: boolean;
     /**
@@ -76,15 +76,15 @@ export declare class ListItem extends ListItem_base {
      */
     active: boolean;
     /**
-     * 是否使列表项不可点击，但其中的 [`<mdui-checkbox>`](/docs/2/components/checkbox)、[`<mdui-radio>`](/docs/2/components/radio)、[`<mdui-switch>`](/docs/2/components/switch) 等仍可进行交互
+     * 是否使列表项不可点击。设置后，列表项中的 [`<mdui-checkbox>`](/docs/2/components/checkbox)、[`<mdui-radio>`](/docs/2/components/radio)、[`<mdui-switch>`](/docs/2/components/switch) 等仍可交互
      */
     nonclickable: boolean;
     /**
-     * 使用圆角形状的列表项
+     * 是否使用圆角形状的列表项
      */
     rounded: boolean;
     /**
-     * 列表项的垂直对齐方式。可选值为：
+     * 列表项的垂直对齐方式。可选值包括：
      *
      * * `start`：顶部对齐
      * * `center`：居中对齐
@@ -103,6 +103,10 @@ export declare class ListItem extends ListItem_base {
     protected render(): TemplateResult;
     private renderInner;
 }
+export interface ListItemEventMap {
+    focus: FocusEvent;
+    blur: FocusEvent;
+}
 declare global {
     interface HTMLElementTagNameMap {
         'mdui-list-item': ListItem;

package/components/list/list-item.js

@@ -1,9 +1,10 @@
 import { __decorate } from "tslib";
-import { html, LitElement } from 'lit';
+import { html } from 'lit';
 import { customElement, property, queryAssignedElements, } from 'lit/decorators.js';
 import { createRef, ref } from 'lit/directives/ref.js';
 import cc from 'classcat';
 import { isNodeName, getNodeName } from '@mdui/jq/shared/helper.js';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import { HasSlotController } from '@mdui/shared/controllers/has-slot.js';
 import { booleanConverter } from '@mdui/shared/helpers/decorator.js';
 import { nothingTemplate } from '@mdui/shared/helpers/template.js';
@@ -14,7 +15,7 @@ import '../icon.js';
 import { RippleMixin } from '../ripple/ripple-mixin.js';
 import { listItemStyle } from './list-item-style.js';
 /**
- * @summary 列表项组件。需与 `<mdui-list>` 组件配合使用
+ * @summary 列表项组件。需配合 `<mdui-list>` 组件使用
  *
  * ```html
  * <mdui-list>
@@ -40,14 +41,14 @@ import { listItemStyle } from './list-item-style.js';
  * @csspart headline - 主标题
  * @csspart description - 副标题
  *
- * @cssprop --shape-corner - 列表项的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
- * @cssprop --shape-corner-rounded - 指定了 `rounded` 时，列表项的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --shape-corner - 列表项的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --shape-corner-rounded - 指定了 `rounded` 属性时，列表项的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
  */
-let ListItem = class ListItem extends AnchorMixin(RippleMixin(FocusableMixin(LitElement))) {
+let ListItem = class ListItem extends AnchorMixin(RippleMixin(FocusableMixin(MduiElement))) {
     constructor() {
         super(...arguments);
         /**
-         * 是否禁用该列表项，列表项将置灰，且其中的 [`<mdui-checkbox>`](/docs/2/components/checkbox)、[`<mdui-radio>`](/docs/2/components/radio)、[`<mdui-switch>`](/docs/2/components/switch) 等都将禁用
+         * 是否禁用该列表项，禁用后，列表项将变为灰色，且其中的 [`<mdui-checkbox>`](/docs/2/components/checkbox)、[`<mdui-radio>`](/docs/2/components/radio)、[`<mdui-switch>`](/docs/2/components/switch) 等也将禁用
          */
         this.disabled = false;
         /**
@@ -55,15 +56,15 @@ let ListItem = class ListItem extends AnchorMixin(RippleMixin(FocusableMixin(Lit
          */
         this.active = false;
         /**
-         * 是否使列表项不可点击，但其中的 [`<mdui-checkbox>`](/docs/2/components/checkbox)、[`<mdui-radio>`](/docs/2/components/radio)、[`<mdui-switch>`](/docs/2/components/switch) 等仍可进行交互
+         * 是否使列表项不可点击。设置后，列表项中的 [`<mdui-checkbox>`](/docs/2/components/checkbox)、[`<mdui-radio>`](/docs/2/components/radio)、[`<mdui-switch>`](/docs/2/components/switch) 等仍可交互
          */
         this.nonclickable = false;
         /**
-         * 使用圆角形状的列表项
+         * 是否使用圆角形状的列表项
          */
         this.rounded = false;
         /**
-         * 列表项的垂直对齐方式。可选值为：
+         * 列表项的垂直对齐方式。可选值包括：
          *
          * * `start`：顶部对齐
          * * `center`：居中对齐

package/components/list/list-subheader.d.ts

@@ -1,7 +1,7 @@
-import { LitElement } from 'lit';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import type { CSSResultGroup, TemplateResult } from 'lit';
 /**
- * @summary 列表标题组件。需与 `<mdui-list>` 组件配合使用
+ * @summary 列表标题组件。需配合 `<mdui-list>` 组件使用
  *
  * ```html
  * <mdui-list>
@@ -11,12 +11,14 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
  * </mdui-list>
  * ```
  *
- * @slot - 文本
+ * @slot - 列表标题文本
  */
-export declare class ListSubheader extends LitElement {
+export declare class ListSubheader extends MduiElement<ListSubheaderEventMap> {
     static styles: CSSResultGroup;
     protected render(): TemplateResult;
 }
+export interface ListSubheaderEventMap {
+}
 declare global {
     interface HTMLElementTagNameMap {
         'mdui-list-subheader': ListSubheader;

package/components/list/list-subheader.js

@@ -1,10 +1,11 @@
 import { __decorate } from "tslib";
-import { html, LitElement } from 'lit';
+import { html } from 'lit';
 import { customElement } from 'lit/decorators.js';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
 import { listSubheaderStyle } from './list-subheader-style.js';
 /**
- * @summary 列表标题组件。需与 `<mdui-list>` 组件配合使用
+ * @summary 列表标题组件。需配合 `<mdui-list>` 组件使用
  *
  * ```html
  * <mdui-list>
@@ -14,9 +15,9 @@ import { listSubheaderStyle } from './list-subheader-style.js';
  * </mdui-list>
  * ```
  *
- * @slot - 文本
+ * @slot - 列表标题文本
  */
-let ListSubheader = class ListSubheader extends LitElement {
+let ListSubheader = class ListSubheader extends MduiElement {
     render() {
         return html `<slot></slot>`;
     }

package/components/list/list.d.ts

@@ -1,7 +1,7 @@
-import { LitElement } from 'lit';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import type { CSSResultGroup, TemplateResult } from 'lit';
 /**
- * @summary 列表组件。需与 `<mdui-list-item>` 组件配合使用
+ * @summary 列表组件。需配合 `<mdui-list-item>` 组件使用
  *
  * ```html
  * <mdui-list>
@@ -13,10 +13,12 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
  *
  * @slot - `<mdui-list-item>` 元素
  */
-export declare class List extends LitElement {
+export declare class List extends MduiElement<ListEventMap> {
     static styles: CSSResultGroup;
     protected render(): TemplateResult;
 }
+export interface ListEventMap {
+}
 declare global {
     interface HTMLElementTagNameMap {
         'mdui-list': List;

package/components/list/list.js

@@ -1,10 +1,11 @@
 import { __decorate } from "tslib";
-import { html, LitElement } from 'lit';
+import { html } from 'lit';
 import { customElement } from 'lit/decorators.js';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
 import { listStyle } from './list-style.js';
 /**
- * @summary 列表组件。需与 `<mdui-list-item>` 组件配合使用
+ * @summary 列表组件。需配合 `<mdui-list-item>` 组件使用
  *
  * ```html
  * <mdui-list>
@@ -16,7 +17,7 @@ import { listStyle } from './list-style.js';
  *
  * @slot - `<mdui-list-item>` 元素
  */
-let List = class List extends LitElement {
+let List = class List extends MduiElement {
     render() {
         return html `<slot></slot>`;
     }