mdui 2.0.2 → 2.0.3

package/components/avatar/index.d.ts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import '../icon.js';
 import type { CSSResultGroup, TemplateResult } from 'lit';
 /**
@@ -15,7 +15,7 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
  *
  * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
  */
-export declare class Avatar extends LitElement {
+export declare class Avatar extends MduiElement<AvatarEventMap> {
     static styles: CSSResultGroup;
     /**
      * 头像的图片地址
@@ -42,6 +42,8 @@ export declare class Avatar extends LitElement {
     private readonly hasSlotController;
     protected render(): TemplateResult;
 }
+export interface AvatarEventMap {
+}
 declare global {
     interface HTMLElementTagNameMap {
         'mdui-avatar': Avatar;

package/components/avatar/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 { ifDefined } from 'lit/directives/if-defined.js';
 import { styleMap } from 'lit/directives/style-map.js';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import { HasSlotController } from '@mdui/shared/controllers/has-slot.js';
 import { nothingTemplate } from '@mdui/shared/helpers/template.js';
 import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
@@ -22,7 +23,7 @@ import { style } from './style.js';
  *
  * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
  */
-let Avatar = class Avatar extends LitElement {
+let Avatar = class Avatar extends MduiElement {
     constructor() {
         super(...arguments);
         this.hasSlotController = new HasSlotController(this, '[default]');

package/components/badge/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 徽标组件
@@ -11,7 +11,7 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
  *
  * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
  */
-export declare class Badge extends LitElement {
+export declare class Badge extends MduiElement<BadgeEventMap> {
     static styles: CSSResultGroup;
     /**
      * 徽标形状。可选值为：
@@ -21,6 +21,8 @@ export declare class Badge extends LitElement {
     variant: /*小型徽标，不显示文字*/ 'small' | /*大型徽标，会显示文字*/ 'large';
     protected render(): TemplateResult;
 }
+export interface BadgeEventMap {
+}
 declare global {
     interface HTMLElementTagNameMap {
         'mdui-badge': Badge;

package/components/badge/index.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 { nothingTemplate } from '@mdui/shared/helpers/template.js';
 import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
 import { style } from './style.js';
@@ -15,7 +16,7 @@ import { style } from './style.js';
  *
  * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
  */
-let Badge = class Badge extends LitElement {
+let Badge = class Badge extends MduiElement {
     constructor() {
         super(...arguments);
         /**

package/components/bottom-app-bar/index.d.ts

@@ -27,7 +27,7 @@ declare const BottomAppBar_base: import("@open-wc/dedupe-mixin").Constructor<imp
  * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
  * @cssprop --z-index - 组件的 CSS 的 `z-index` 值
  */
-export declare class BottomAppBar extends BottomAppBar_base {
+export declare class BottomAppBar extends BottomAppBar_base<BottomAppBarEventMap> {
     static styles: CSSResultGroup;
     /**
      * 是否隐藏
@@ -52,6 +52,12 @@ export declare class BottomAppBar extends BottomAppBar_base {
      */
     protected runScrollThreshold(isScrollingUp: boolean): void;
 }
+export interface BottomAppBarEventMap {
+    show: CustomEvent<void>;
+    shown: CustomEvent<void>;
+    hide: CustomEvent<void>;
+    hidden: CustomEvent<void>;
+}
 declare global {
     interface HTMLElementTagNameMap {
         'mdui-bottom-app-bar': BottomAppBar;

package/components/bottom-app-bar/index.js

@@ -2,7 +2,6 @@ import { __decorate } from "tslib";
 import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { booleanConverter } from '@mdui/shared/helpers/decorator.js';
-import { emit } from '@mdui/shared/helpers/event.js';
 import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
 import { ScrollBehaviorMixin } from '@mdui/shared/mixins/scrollBehavior.js';
 import { LayoutItemBase } from '../layout/layout-item-base.js';
@@ -53,7 +52,7 @@ let BottomAppBar = class BottomAppBar extends ScrollBehaviorMixin(LayoutItemBase
         super.firstUpdated(_changedProperties);
         this.addEventListener('transitionend', (event) => {
             if (event.target === this) {
-                emit(this, this.hide ? 'hidden' : 'shown');
+                this.emit(this.hide ? 'hidden' : 'shown');
             }
         });
     }
@@ -67,15 +66,15 @@ let BottomAppBar = class BottomAppBar extends ScrollBehaviorMixin(LayoutItemBase
     runScrollThreshold(isScrollingUp) {
         // 向下滚动
         if (!isScrollingUp && !this.hide) {
-            const requestHide = emit(this, 'hide');
-            if (!requestHide.defaultPrevented) {
+            const eventProceeded = this.emit('hide', { cancelable: true });
+            if (eventProceeded) {
                 this.hide = true;
             }
         }
         // 向上滚动
         if (isScrollingUp && this.hide) {
-            const requestShow = emit(this, 'show');
-            if (!requestShow.defaultPrevented) {
+            const eventProceeded = this.emit('show', { cancelable: true });
+            if (eventProceeded) {
                 this.hide = false;
             }
         }

package/components/button/button-base.d.ts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import '../circular-progress.js';
 import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 type RenderButtonOptions = {
@@ -8,8 +8,8 @@ type RenderButtonOptions = {
     content?: TemplateResult | TemplateResult[];
     tabindex?: number;
 };
-declare const ButtonBase_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;
-export declare class ButtonBase extends ButtonBase_base {
+declare const ButtonBase_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;
+export declare class ButtonBase<E> extends ButtonBase_base<E> {
     static styles: CSSResultGroup;
     /**
      * 是否禁用

package/components/button/button-base.js

@@ -1,11 +1,11 @@
 import { __decorate } from "tslib";
-import { LitElement, html } from 'lit';
+import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import cc from 'classcat';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import { FormController } from '@mdui/shared/controllers/form.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 { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
 import { AnchorMixin } from '@mdui/shared/mixins/anchor.js';
@@ -13,7 +13,7 @@ import { FocusableMixin } from '@mdui/shared/mixins/focusable.js';
 import '../circular-progress.js';
 import { RippleMixin } from '../ripple/ripple-mixin.js';
 import { buttonBaseStyle } from './button-base-style.js';
-export class ButtonBase extends AnchorMixin(RippleMixin(FocusableMixin(LitElement))) {
+export class ButtonBase extends AnchorMixin(RippleMixin(FocusableMixin(MduiElement))) {
     constructor() {
         super(...arguments);
         /**
@@ -92,7 +92,8 @@ export class ButtonBase extends AnchorMixin(RippleMixin(FocusableMixin(LitElemen
         if (this.isButton()) {
             const valid = this.focusElement.checkValidity();
             if (!valid) {
-                emit(this, 'invalid', {
+                // @ts-ignore
+                this.emit('invalid', {
                     bubbles: false,
                     cancelable: true,
                     composed: false,
@@ -111,7 +112,8 @@ export class ButtonBase extends AnchorMixin(RippleMixin(FocusableMixin(LitElemen
         if (this.isButton()) {
             const invalid = !this.focusElement.reportValidity();
             if (invalid) {
-                emit(this, 'invalid', {
+                // @ts-ignore
+                this.emit('invalid', {
                     bubbles: false,
                     cancelable: true,
                     composed: false,

package/components/button/index.d.ts

@@ -25,7 +25,7 @@ import type { TemplateResult, CSSResultGroup } from 'lit';
  *
  * @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;
     /**
      * 按钮形状。可选值为：
@@ -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-icon/index.d.ts

@@ -24,7 +24,7 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
  *
  * @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;
     /**
      * 图标按钮的形状。可选值为：
@@ -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';
@@ -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 卡片组件
  *
@@ -16,7 +16,7 @@ declare const Card_base: import("@open-wc/dedupe-mixin").Constructor<import("@md
  *
  * @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;
     /**
      * 卡片形状。可选值为：
@@ -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';
@@ -22,7 +23,7 @@ import { style } from './style.js';
  *
  * @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);
         /**

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 复选框组件
  *
@@ -31,7 +31,7 @@ declare const Checkbox_base: import("@open-wc/dedupe-mixin").Constructor<import(
  * @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;
     /**
      * 是否为禁用状态
@@ -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';
@@ -42,7 +42,7 @@ import { style } from './style.js';
  * @csspart indeterminate-icon - 不确定状态图标
  * @csspart label - 文本
  */
-let Checkbox = class Checkbox extends RippleMixin(FocusableMixin(LitElement)) {
+let Checkbox = class Checkbox extends RippleMixin(FocusableMixin(MduiElement)) {
     constructor() {
         super(...arguments);
         /**
@@ -131,7 +131,7 @@ let Checkbox = class Checkbox extends RippleMixin(FocusableMixin(LitElement)) {
     checkValidity() {
         const valid = this.inputRef.value.checkValidity();
         if (!valid) {
-            emit(this, 'invalid', {
+            this.emit('invalid', {
                 bubbles: false,
                 cancelable: true,
                 composed: false,
@@ -147,13 +147,13 @@ let Checkbox = class Checkbox extends RippleMixin(FocusableMixin(LitElement)) {
     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();
             }
@@ -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];

package/components/chip/index.d.ts

@@ -33,7 +33,7 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
  *
  * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
  */
-export declare class Chip extends ButtonBase {
+export declare class Chip extends ButtonBase<ChipEventMap> {
     static styles: CSSResultGroup;
     /**
      * 纸片形状。可选值为：
@@ -95,6 +95,13 @@ export declare class Chip extends ButtonBase {
     private renderDeleteIcon;
     private renderInner;
 }
+export interface ChipEventMap {
+    focus: FocusEvent;
+    blur: FocusEvent;
+    invalid: CustomEvent<void>;
+    change: CustomEvent<void>;
+    delete: CustomEvent<void>;
+}
 declare global {
     interface HTMLElementTagNameMap {
         'mdui-chip': Chip;

package/components/chip/index.js

@@ -6,7 +6,6 @@ import cc from 'classcat';
 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 '@mdui/shared/icons/check.js';
 import '@mdui/shared/icons/clear.js';
@@ -79,7 +78,7 @@ let Chip = class Chip extends ButtonBase {
         return this.rippleRef.value;
     }
     onSelectedChange() {
-        emit(this, 'change');
+        this.emit('change');
     }
     firstUpdated(changedProperties) {
         super.firstUpdated(changedProperties);
@@ -134,7 +133,7 @@ let Chip = class Chip extends ButtonBase {
         }
         // 按下 Delete 或 BackSpace 键时，触发 delete 事件
         if (this.deletable && ['Delete', 'Backspace'].includes(event.key)) {
-            emit(this, 'delete');
+            this.emit('delete');
         }
     }
     /**
@@ -142,7 +141,7 @@ let Chip = class Chip extends ButtonBase {
      */
     onDelete(event) {
         event.stopPropagation();
-        emit(this, 'delete');
+        this.emit('delete');
     }
     renderIcon() {
         if (this.loading) {

package/components/circular-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,7 +7,7 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
  * <mdui-circular-progress></mdui-circular-progress>
  * ```
  */
-export declare class CircularProgress extends LitElement {
+export declare class CircularProgress extends MduiElement<CircularProgressEventMap> {
     static styles: CSSResultGroup;
     /**
      * 进度指示器的最大值，默认为 1
@@ -21,6 +21,8 @@ export declare class CircularProgress extends LitElement {
     private renderDeterminate;
     private renderInDeterminate;
 }
+export interface CircularProgressEventMap {
+}
 declare global {
     interface HTMLElementTagNameMap {
         'mdui-circular-progress': CircularProgress;

package/components/circular-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 { classMap } from 'lit/directives/class-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,7 +13,7 @@ import { style } from './style.js';
  * <mdui-circular-progress></mdui-circular-progress>
  * ```
  */
-let CircularProgress = class CircularProgress extends LitElement {
+let CircularProgress = class CircularProgress extends MduiElement {
     constructor() {
         super(...arguments);
         /**

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

@@ -1,5 +1,5 @@
-import { LitElement } from 'lit';
 import '@mdui/jq/methods/height.js';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import type { JQ } from '@mdui/jq/shared/core.js';
 import type { CSSResultGroup, TemplateResult, PropertyValues } from 'lit';
 /**
@@ -23,7 +23,7 @@ import type { CSSResultGroup, TemplateResult, PropertyValues } from 'lit';
  * @csspart header - 折叠面板的头部内容
  * @csspart body - 折叠面板的正文内容
  */
-export declare class CollapseItem extends LitElement {
+export declare class CollapseItem extends MduiElement<CollapseItemEventMap> {
     static styles: CSSResultGroup;
     /**
      * 该折叠面板项的值
@@ -55,3 +55,14 @@ export declare class CollapseItem extends LitElement {
     private onTransitionEnd;
     private updateBodyHeight;
 }
+export interface CollapseItemEventMap {
+    open: CustomEvent<void>;
+    opened: CustomEvent<void>;
+    close: CustomEvent<void>;
+    closed: CustomEvent<void>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mdui-collapse-item': CollapseItem;
+    }
+}

package/components/collapse/collapse-item.js

@@ -1,13 +1,13 @@
 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 { createRef, ref } from 'lit/directives/ref.js';
 import { $ } from '@mdui/jq/$.js';
 import '@mdui/jq/methods/height.js';
+import { MduiElement } from '@mdui/shared/base/mdui-element.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 { uniqueId } from '@mdui/shared/helpers/uniqueId.js';
 import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
 import { collapseItemStyle } from './collapse-item-style.js';
@@ -32,7 +32,7 @@ import { collapseItemStyle } from './collapse-item-style.js';
  * @csspart header - 折叠面板的头部内容
  * @csspart body - 折叠面板的正文内容
  */
-let CollapseItem = class CollapseItem extends LitElement {
+let CollapseItem = class CollapseItem extends MduiElement {
     constructor() {
         super(...arguments);
         /**
@@ -59,7 +59,7 @@ let CollapseItem = class CollapseItem extends LitElement {
         }
         else {
             this.state = this.active ? 'open' : 'close';
-            emit(this, this.state);
+            this.emit(this.state);
             this.updateBodyHeight();
         }
     }
@@ -76,7 +76,7 @@ let CollapseItem = class CollapseItem extends LitElement {
     onTransitionEnd(event) {
         if (event.target === this.bodyRef.value) {
             this.state = this.active ? 'opened' : 'closed';
-            emit(this, this.state);
+            this.emit(this.state);
             this.updateBodyHeight();
         }
     }

package/components/collapse/collapse.d.ts

@@ -1,5 +1,5 @@
-import { LitElement } from 'lit';
 import '@mdui/jq/methods/is.js';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import type { CSSResultGroup, TemplateResult } from 'lit';
 /**
  * @summary 折叠面板组件。需与 `<mdui-collapse-item>` 组件配合使用
@@ -15,7 +15,7 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
  *
  * @slot - `<mdui-collapse-item>` 组件
  */
-export declare class Collapse extends LitElement {
+export declare class Collapse extends MduiElement<CollapseEventMap> {
     static styles: CSSResultGroup;
     /**
      * 是否为手风琴模式
@@ -47,3 +47,11 @@ export declare class Collapse extends LitElement {
     private onSlotChange;
     private updateItems;
 }
+export interface CollapseEventMap {
+    change: CustomEvent<void>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mdui-collapse': Collapse;
+    }
+}