mdui 2.0.2 → 2.0.3

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';
@@ -43,7 +44,7 @@ import { listItemStyle } from './list-item-style.js';
  * @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);
         /**

package/components/list/list-subheader.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 列表标题组件。需与 `<mdui-list>` 组件配合使用
@@ -13,10 +13,12 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
  *
  * @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,6 +1,7 @@
 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';
 /**
@@ -16,7 +17,7 @@ import { listSubheaderStyle } from './list-subheader-style.js';
  *
  * @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,4 +1,4 @@
-import { LitElement } from 'lit';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import type { CSSResultGroup, TemplateResult } from 'lit';
 /**
  * @summary 列表组件。需与 `<mdui-list-item>` 组件配合使用
@@ -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,6 +1,7 @@
 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';
 /**
@@ -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>`;
     }

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

@@ -1,16 +1,16 @@
-import { LitElement } from 'lit';
 import '@mdui/jq/methods/css.js';
 import '@mdui/jq/methods/height.js';
 import '@mdui/jq/methods/innerHeight.js';
 import '@mdui/jq/methods/innerWidth.js';
 import '@mdui/jq/methods/width.js';
 import '@mdui/jq/static/contains.js';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import '@mdui/shared/icons/arrow-right.js';
 import '@mdui/shared/icons/check.js';
 import '../icon.js';
 import type { Ripple } from '../ripple/index.js';
 import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
-declare const MenuItem_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 MenuItem_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 菜单项组件
  *
@@ -44,7 +44,7 @@ declare const MenuItem_base: import("@open-wc/dedupe-mixin").Constructor<import(
  * @csspart selected-icon - 选中状态的图标
  * @csspart submenu - 子菜单元素
  */
-export declare class MenuItem extends MenuItem_base {
+export declare class MenuItem extends MenuItem_base<MenuItemEventMap> {
     static styles: CSSResultGroup;
     /**
      * 该菜单项的值
@@ -116,6 +116,14 @@ export declare class MenuItem extends MenuItem_base {
     private updateSubmenuPositioner;
     private renderInner;
 }
+export interface MenuItemEventMap {
+    focus: FocusEvent;
+    blur: FocusEvent;
+    'submenu-open': CustomEvent<void>;
+    'submenu-opened': CustomEvent<void>;
+    'submenu-close': CustomEvent<void>;
+    'submenu-closed': CustomEvent<void>;
+}
 declare global {
     interface HTMLElementTagNameMap {
         'mdui-menu-item': MenuItem;

package/components/menu/menu-item.js

@@ -1,5 +1,5 @@
 import { __decorate } from "tslib";
-import { html, LitElement } from 'lit';
+import { html } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { createRef, ref } from 'lit/directives/ref.js';
 import { when } from 'lit/directives/when.js';
@@ -12,12 +12,12 @@ import '@mdui/jq/methods/innerWidth.js';
 import '@mdui/jq/methods/width.js';
 import { isUndefined } from '@mdui/jq/shared/helper.js';
 import '@mdui/jq/static/contains.js';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import { DefinedController } from '@mdui/shared/controllers/defined.js';
 import { HasSlotController } from '@mdui/shared/controllers/has-slot.js';
 import { watch } from '@mdui/shared/decorators/watch.js';
 import { animateTo, stopAnimations } from '@mdui/shared/helpers/animate.js';
 import { booleanConverter } from '@mdui/shared/helpers/decorator.js';
-import { emit } from '@mdui/shared/helpers/event.js';
 import { getDuration, getEasing } from '@mdui/shared/helpers/motion.js';
 import { nothingTemplate } from '@mdui/shared/helpers/template.js';
 import { uniqueId } from '@mdui/shared/helpers/uniqueId.js';
@@ -62,7 +62,7 @@ import { menuItemStyle } from './menu-item-style.js';
  * @csspart selected-icon - 选中状态的图标
  * @csspart submenu - 子菜单元素
  */
-let MenuItem = class MenuItem extends AnchorMixin(RippleMixin(FocusableMixin(LitElement))) {
+let MenuItem = class MenuItem extends AnchorMixin(RippleMixin(FocusableMixin(MduiElement))) {
     constructor() {
         super();
         /**
@@ -128,10 +128,8 @@ let MenuItem = class MenuItem extends AnchorMixin(RippleMixin(FocusableMixin(Lit
         // 要区分是否首次渲染，首次渲染时不触发事件，不执行动画；非首次渲染，触发事件，执行动画
         if (this.submenuOpen) {
             if (hasUpdated) {
-                const requestOpen = emit(this, 'submenu-open', {
-                    cancelable: true,
-                });
-                if (requestOpen.defaultPrevented) {
+                const eventProceeded = this.emit('submenu-open', { cancelable: true });
+                if (!eventProceeded) {
                     return;
                 }
             }
@@ -150,14 +148,12 @@ let MenuItem = class MenuItem extends AnchorMixin(RippleMixin(FocusableMixin(Lit
                 }),
             ]);
             if (hasUpdated) {
-                emit(this, 'submenu-opened');
+                this.emit('submenu-opened');
             }
         }
         else {
-            const requestClose = emit(this, 'submenu-close', {
-                cancelable: true,
-            });
-            if (requestClose.defaultPrevented) {
+            const eventProceeded = this.emit('submenu-close', { cancelable: true });
+            if (!eventProceeded) {
                 return;
             }
             const duration = getDuration(this, 'short4');
@@ -169,7 +165,7 @@ let MenuItem = class MenuItem extends AnchorMixin(RippleMixin(FocusableMixin(Lit
             if (this.submenuRef.value) {
                 this.submenuRef.value.hidden = true;
             }
-            emit(this, 'submenu-closed');
+            this.emit('submenu-closed');
         }
     }
     connectedCallback() {

package/components/menu/menu.d.ts

@@ -1,4 +1,3 @@
-import { LitElement } from 'lit';
 import '@mdui/jq/methods/add.js';
 import '@mdui/jq/methods/children.js';
 import '@mdui/jq/methods/find.js';
@@ -6,6 +5,7 @@ import '@mdui/jq/methods/get.js';
 import '@mdui/jq/methods/is.js';
 import '@mdui/jq/methods/parent.js';
 import '@mdui/jq/methods/parents.js';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 /**
  * 键盘快捷键：
@@ -30,7 +30,7 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
  *
  * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
  */
-export declare class Menu extends LitElement {
+export declare class Menu extends MduiElement<MenuEventMap> {
     static styles: CSSResultGroup;
     /**
      * 菜单项的可选中状态。默认为不可选中。可选值为：
@@ -107,6 +107,9 @@ export declare class Menu extends LitElement {
     private onClick;
     private onKeyDown;
 }
+export interface MenuEventMap {
+    change: CustomEvent<void>;
+}
 declare global {
     interface HTMLElementTagNameMap {
         'mdui-menu': Menu;

package/components/menu/menu.js

@@ -1,5 +1,5 @@
 import { __decorate } from "tslib";
-import { html, LitElement } from 'lit';
+import { html } from 'lit';
 import { customElement, property, queryAssignedElements, state, } from 'lit/decorators.js';
 import { $ } from '@mdui/jq/$.js';
 import '@mdui/jq/methods/add.js';
@@ -10,12 +10,12 @@ import '@mdui/jq/methods/is.js';
 import '@mdui/jq/methods/parent.js';
 import '@mdui/jq/methods/parents.js';
 import { isString, isUndefined } from '@mdui/jq/shared/helper.js';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import { DefinedController } from '@mdui/shared/controllers/defined.js';
 import { watch } from '@mdui/shared/decorators/watch.js';
 import { arraysEqualIgnoreOrder } from '@mdui/shared/helpers/array.js';
 import { booleanConverter } from '@mdui/shared/helpers/decorator.js';
 import { delay } from '@mdui/shared/helpers/delay.js';
-import { emit } from '@mdui/shared/helpers/event.js';
 import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
 import { menuStyle } from './menu-style.js';
 /**
@@ -41,7 +41,7 @@ import { menuStyle } from './menu-style.js';
  *
  * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
  */
-let Menu = class Menu extends LitElement {
+let Menu = class Menu extends MduiElement {
     constructor() {
         super(...arguments);
         /**
@@ -145,7 +145,7 @@ let Menu = class Menu extends LitElement {
         const value = this.isMultiple ? values : values[0] || undefined;
         this.setValue(value);
         if (!this.isInitial) {
-            emit(this, 'change');
+            this.emit('change');
         }
     }
     async onValueChange() {
@@ -334,7 +334,7 @@ let Menu = class Menu extends LitElement {
         }
         const target = event.target;
         const item = target.closest('mdui-menu-item');
-        if (item?.disabled) {
+        if (!item || item.disabled) {
             return;
         }
         this.lastActiveItem = item;

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

@@ -1,8 +1,8 @@
-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 NavigationBarItem_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 NavigationBarItem_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-bar>` 组件配合使用
  *
@@ -31,7 +31,7 @@ declare const NavigationBarItem_base: import("@open-wc/dedupe-mixin").Constructo
  *
  * @cssprop --shape-corner-indicator - 指示器的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
  */
-export declare class NavigationBarItem extends NavigationBarItem_base {
+export declare class NavigationBarItem extends NavigationBarItem_base<NavigationBarItemEventMap> {
     static styles: CSSResultGroup;
     /**
      * 未激活状态的 Material Icons 图标名。也可以通过 `slot="icon"` 设置
@@ -68,6 +68,10 @@ export declare class NavigationBarItem extends NavigationBarItem_base {
     protected render(): TemplateResult;
     private renderInner;
 }
+export interface NavigationBarItemEventMap {
+    focus: FocusEvent;
+    blur: FocusEvent;
+}
 declare global {
     interface HTMLElementTagNameMap {
         'mdui-navigation-bar-item': NavigationBarItem;

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

@@ -1,8 +1,9 @@
 import { __decorate } from "tslib";
-import { html, LitElement } from 'lit';
+import { html } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { createRef, ref } from 'lit/directives/ref.js';
 import cc from 'classcat';
+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';
@@ -41,7 +42,7 @@ import { navigationBarItemStyle } from './navigation-bar-item-style.js';
  *
  * @cssprop --shape-corner-indicator - 指示器的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
  */
-let NavigationBarItem = class NavigationBarItem extends AnchorMixin(RippleMixin(FocusableMixin(LitElement))) {
+let NavigationBarItem = class NavigationBarItem extends AnchorMixin(RippleMixin(FocusableMixin(MduiElement))) {
     constructor() {
         super(...arguments);
         /**

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

@@ -26,7 +26,7 @@ declare const NavigationBar_base: import("@open-wc/dedupe-mixin").Constructor<im
  * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
  * @cssprop --z-index - 组件的 CSS 的 `z-index` 值
  */
-export declare class NavigationBar extends NavigationBar_base {
+export declare class NavigationBar extends NavigationBar_base<NavigationBarEventMap> {
     static styles: CSSResultGroup;
     /**
      * 是否隐藏
@@ -70,6 +70,13 @@ export declare class NavigationBar extends NavigationBar_base {
     private updateItems;
     private onSlotChange;
 }
+export interface NavigationBarEventMap {
+    change: CustomEvent<void>;
+    show: CustomEvent<void>;
+    shown: CustomEvent<void>;
+    hide: CustomEvent<void>;
+    hidden: CustomEvent<void>;
+}
 declare global {
     interface HTMLElementTagNameMap {
         'mdui-navigation-bar': NavigationBar;

package/components/navigation-bar/navigation-bar.js

@@ -4,7 +4,6 @@ import { customElement, property, queryAssignedElements, state, } from 'lit/deco
 import { DefinedController } from '@mdui/shared/controllers/defined.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 { 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';
@@ -67,7 +66,7 @@ let NavigationBar = class NavigationBar extends ScrollBehaviorMixin(LayoutItemBa
         const item = this.items.find((item) => item.key === this.activeKey);
         this.value = item?.value;
         if (!this.isInitial) {
-            emit(this, 'change');
+            this.emit('change');
         }
     }
     async onValueChange() {
@@ -85,7 +84,7 @@ let NavigationBar = class NavigationBar extends ScrollBehaviorMixin(LayoutItemBa
         super.firstUpdated(_changedProperties);
         this.addEventListener('transitionend', (event) => {
             if (event.target === this) {
-                emit(this, this.hide ? 'hidden' : 'shown');
+                this.emit(this.hide ? 'hidden' : 'shown');
             }
         });
     }
@@ -99,15 +98,15 @@ let NavigationBar = class NavigationBar extends ScrollBehaviorMixin(LayoutItemBa
     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;
             }
         }
@@ -119,6 +118,9 @@ let NavigationBar = class NavigationBar extends ScrollBehaviorMixin(LayoutItemBa
         }
         const target = event.target;
         const item = target.closest('mdui-navigation-bar-item');
+        if (!item) {
+            return;
+        }
         this.activeKey = item.key;
         this.isInitial = false;
         this.updateItems();

package/components/navigation-drawer/index.d.ts

@@ -26,7 +26,7 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
  * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
  * @cssprop --z-index - 组件的 CSS 的 `z-index` 值
  */
-export declare class NavigationDrawer extends LayoutItemBase {
+export declare class NavigationDrawer extends LayoutItemBase<NavigationDrawerEventMap> {
     static styles: CSSResultGroup;
     /**
      * 是否打开抽屉导航
@@ -81,6 +81,13 @@ export declare class NavigationDrawer extends LayoutItemBase {
     private onOverlayClick;
     private getLockTargetAnimate;
 }
+export interface NavigationDrawerEventMap {
+    open: CustomEvent<void>;
+    opened: CustomEvent<void>;
+    close: CustomEvent<void>;
+    closed: CustomEvent<void>;
+    'overlay-click': CustomEvent<void>;
+}
 declare global {
     interface HTMLElementTagNameMap {
         'mdui-navigation-drawer': NavigationDrawer;

package/components/navigation-drawer/index.js

@@ -12,7 +12,6 @@ import { watch } from '@mdui/shared/decorators/watch.js';
 import { animateTo, stopAnimations } from '@mdui/shared/helpers/animate.js';
 import { breakpoint } from '@mdui/shared/helpers/breakpoint.js';
 import { booleanConverter } from '@mdui/shared/helpers/decorator.js';
-import { emit } from '@mdui/shared/helpers/event.js';
 import { Modal } from '@mdui/shared/helpers/modal.js';
 import { getDuration, getEasing } from '@mdui/shared/helpers/motion.js';
 import { observeResize } from '@mdui/shared/helpers/observeResize.js';
@@ -162,8 +161,8 @@ let NavigationDrawer = class NavigationDrawer extends LayoutItemBase {
                 overlay = this.overlayRef.value;
             }
             if (hasUpdated) {
-                const requestOpen = emit(this, 'open', { cancelable: true });
-                if (requestOpen.defaultPrevented) {
+                const eventProceeded = this.emit('open', { cancelable: true });
+                if (!eventProceeded) {
                     return;
                 }
             }
@@ -219,13 +218,13 @@ let NavigationDrawer = class NavigationDrawer extends LayoutItemBase {
                 setLayoutTransition(null);
             }
             if (hasUpdated) {
-                emit(this, 'opened');
+                this.emit('opened');
             }
         }
         else if (this.hasUpdated) {
             // 关闭
-            const requestClose = emit(this, 'close', { cancelable: true });
-            if (requestClose.defaultPrevented) {
+            const eventProceeded = this.emit('close', { cancelable: true });
+            if (!eventProceeded) {
                 return;
             }
             await this.definedController.whenDefined();
@@ -272,7 +271,7 @@ let NavigationDrawer = class NavigationDrawer extends LayoutItemBase {
             if (isFunction(trigger?.focus)) {
                 setTimeout(() => trigger.focus());
             }
-            emit(this, 'closed');
+            this.emit('closed');
         }
     }
     connectedCallback() {
@@ -300,7 +299,7 @@ let NavigationDrawer = class NavigationDrawer extends LayoutItemBase {
         return html `${when(this.isModal, () => html `<div ${ref(this.overlayRef)} part="overlay" class="overlay" @click="${this.onOverlayClick}"></div>`)}<slot ${ref(this.panelRef)} part="panel" class="panel" tabindex="0"></slot>`;
     }
     onOverlayClick() {
-        emit(this, 'overlay-click');
+        this.emit('overlay-click');
         if (this.closeOnOverlayClick) {
             this.open = false;
         }

package/components/navigation-drawer/style.js

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const style = css `:host{--shape-corner:var(--mdui-shape-corner-large);--z-index:2200;display:none;position:fixed;top:0;bottom:0;left:0;z-index:1;width:22.5rem}:host([placement=right]){left:initial;right:0}:host([mobile]),:host([modal]){top:0!important;right:0;bottom:0!important;width:initial;z-index:var(--z-index)}:host([placement=right][mobile]),:host([placement=right][modal]){left:0}:host([contained]){position:absolute}.overlay{position:absolute;inset:0;z-index:inherit;background-color:rgba(var(--mdui-color-scrim),.4)}.panel{display:block;position:absolute;top:0;bottom:0;left:0;width:100%;overflow:auto;z-index:inherit;background-color:rgb(var(--mdui-color-surface));box-shadow:var(--mdui-elevation-level0)}:host([mobile]) .panel,:host([modal]) .panel{border-radius:0 var(--shape-corner) var(--shape-corner) 0;width:22.5rem;background-color:rgb(var(--mdui-color-surface-container-low));box-shadow:var(--mdui-elevation-level1)}:host([placement=right]) .panel{left:initial;right:0}:host([placement=right][mobile]) .panel,:host([placement=right][modal]) .panel{border-radius:var(--shape-corner) 0 0 var(--shape-corner)}`;
+export const style = css `:host{--shape-corner:var(--mdui-shape-corner-large);--z-index:2200;display:none;position:fixed;top:0;bottom:0;left:0;z-index:1;width:22.5rem}:host([placement=right]){left:initial;right:0}:host([mobile]),:host([modal]){top:0!important;right:0;bottom:0!important;width:initial;z-index:var(--z-index)}:host([placement=right][mobile]),:host([placement=right][modal]){left:0}:host([contained]){position:absolute}.overlay{position:absolute;inset:0;z-index:inherit;background-color:rgba(var(--mdui-color-scrim),.4)}.panel{display:block;position:absolute;top:0;bottom:0;left:0;width:100%;overflow:auto;z-index:inherit;background-color:rgb(var(--mdui-color-surface));box-shadow:var(--mdui-elevation-level0)}:host([mobile]) .panel,:host([modal]) .panel{border-radius:0 var(--shape-corner) var(--shape-corner) 0;max-width:80%;width:22.5rem;background-color:rgb(var(--mdui-color-surface-container-low));box-shadow:var(--mdui-elevation-level1)}:host([placement=right]) .panel{left:initial;right:0}:host([placement=right][mobile]) .panel,:host([placement=right][modal]) .panel{border-radius:var(--shape-corner) 0 0 var(--shape-corner)}`;

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

@@ -1,8 +1,8 @@
-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 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 LitElement;
+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>` 组件配合使用
  *
@@ -31,7 +31,7 @@ declare const NavigationRailItem_base: import("@open-wc/dedupe-mixin").Construct
  *
  * @cssprop --shape-corner-indicator - 指示器的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
  */
-export declare class NavigationRailItem extends NavigationRailItem_base {
+export declare class NavigationRailItem extends NavigationRailItem_base<NavigationRailItemEventMap> {
     static styles: CSSResultGroup;
     /**
      * 未激活状态的 Material Icons 图标名。也可以通过 `slot="icon"` 设置
@@ -68,6 +68,10 @@ export declare class NavigationRailItem extends NavigationRailItem_base {
     protected render(): TemplateResult;
     private renderInner;
 }
+export interface NavigationRailItemEventMap {
+    focus: FocusEvent;
+    blur: FocusEvent;
+}
 declare global {
     interface HTMLElementTagNameMap {
         'mdui-navigation-rail-item': NavigationRailItem;

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

@@ -1,9 +1,10 @@
 import { __decorate } from "tslib";
-import { html, LitElement, nothing } from 'lit';
+import { html, nothing } 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 cc from 'classcat';
+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';
@@ -42,7 +43,7 @@ import { navigationRailItemStyle } from './navigation-rail-item-style.js';
  *
  * @cssprop --shape-corner-indicator - 指示器的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
  */
-let NavigationRailItem = class NavigationRailItem extends AnchorMixin(RippleMixin(FocusableMixin(LitElement))) {
+let NavigationRailItem = class NavigationRailItem extends AnchorMixin(RippleMixin(FocusableMixin(MduiElement))) {
     constructor() {
         super(...arguments);
         /**

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

@@ -27,7 +27,7 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
  * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
  * @cssprop --z-index - 组件的 CSS 的 `z-index` 值
  */
-export declare class NavigationRail extends LayoutItemBase {
+export declare class NavigationRail extends LayoutItemBase<NavigationRailEventMap> {
     static styles: CSSResultGroup;
     /**
      * 当前选中的 `<mdui-navigation-rail-item>` 的值
@@ -79,6 +79,9 @@ export declare class NavigationRail extends LayoutItemBase {
     private updateItems;
     private onSlotChange;
 }
+export interface NavigationRailEventMap {
+    change: CustomEvent<void>;
+}
 declare global {
     interface HTMLElementTagNameMap {
         'mdui-navigation-rail': NavigationRail;

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

@@ -9,7 +9,6 @@ import { DefinedController } from '@mdui/shared/controllers/defined.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 { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
 import { LayoutItemBase } from '../layout/layout-item-base.js';
 import { navigationRailStyle } from './navigation-rail-style.js';
@@ -97,7 +96,7 @@ let NavigationRail = class NavigationRail extends LayoutItemBase {
         const item = this.items.find((item) => item.key === this.activeKey);
         this.value = item?.value;
         if (!this.isInitial) {
-            emit(this, 'change');
+            this.emit('change');
         }
     }
     async onValueChange() {
@@ -166,6 +165,9 @@ let NavigationRail = class NavigationRail extends LayoutItemBase {
         }
         const target = event.target;
         const item = target.closest('mdui-navigation-rail-item');
+        if (!item) {
+            return;
+        }
         this.activeKey = item.key;
         this.isInitial = false;
         this.updateItems();

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

@@ -1,7 +1,7 @@
-import { LitElement } from 'lit';
 import '@mdui/jq/methods/closest.js';
 import '@mdui/jq/methods/find.js';
 import '@mdui/jq/methods/get.js';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import type { FormControl } from '@mdui/jq/shared/form.js';
 import type { CSSResultGroup, TemplateResult } from 'lit';
 /**
@@ -20,7 +20,7 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
  *
  * @slot - `<mdui-radio>` 元素
  */
-export declare class RadioGroup extends LitElement implements FormControl {
+export declare class RadioGroup extends MduiElement<RadioGroupEventMap> implements FormControl {
     static styles: CSSResultGroup;
     /**
      * 是否为禁用状态
@@ -98,6 +98,11 @@ export declare class RadioGroup extends LitElement implements FormControl {
     private onCheckedChange;
     private updateItems;
 }
+export interface RadioGroupEventMap {
+    change: CustomEvent<void>;
+    input: CustomEvent<void>;
+    invalid: CustomEvent<void>;
+}
 declare global {
     interface HTMLElementTagNameMap {
         'mdui-radio-group': RadioGroup;