mdui 2.0.2 → 2.0.3

package/components/snackbar/index.d.ts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import '@mdui/shared/icons/clear.js';
 import '../button-icon.js';
 import '../button.js';
@@ -30,7 +30,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 Snackbar extends LitElement {
+export declare class Snackbar extends MduiElement<SnackbarEventMap> {
     static styles: CSSResultGroup;
     /**
      * 是否显示 Snackbar
@@ -91,6 +91,13 @@ export declare class Snackbar extends LitElement {
     private onActionClick;
     private onCloseClick;
 }
+export interface SnackbarEventMap {
+    open: CustomEvent<void>;
+    opened: CustomEvent<void>;
+    close: CustomEvent<void>;
+    closed: CustomEvent<void>;
+    'action-click': CustomEvent<void>;
+}
 declare global {
     interface HTMLElementTagNameMap {
         'mdui-snackbar': Snackbar;

package/components/snackbar/index.js

@@ -1,12 +1,12 @@
 import { __decorate } from "tslib";
-import { html, LitElement } from 'lit';
+import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { when } from 'lit/directives/when.js';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 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 { getDuration, getEasing } from '@mdui/shared/helpers/motion.js';
 import { nothingTemplate } from '@mdui/shared/helpers/template.js';
 import '@mdui/shared/icons/clear.js';
@@ -41,7 +41,7 @@ import { style } from './style.js';
  * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
  * @cssprop --z-index - 组件的 CSS 的 `z-index` 值
  */
-let Snackbar = class Snackbar extends LitElement {
+let Snackbar = class Snackbar extends MduiElement {
     constructor() {
         super();
         /**
@@ -97,8 +97,8 @@ let Snackbar = class Snackbar extends LitElement {
                 await this.updateComplete;
             }
             if (hasUpdated) {
-                const requestOpen = emit(this, 'open', { cancelable: true });
-                if (requestOpen.defaultPrevented) {
+                const eventProceeded = this.emit('open', { cancelable: true });
+                if (!eventProceeded) {
                     return;
                 }
             }
@@ -155,14 +155,14 @@ let Snackbar = class Snackbar extends LitElement {
                 })),
             ]);
             if (hasUpdated) {
-                emit(this, 'opened');
+                this.emit('opened');
             }
             return;
         }
         // 关闭
         if (!this.open && this.hasUpdated) {
-            const requestClose = emit(this, 'close', { cancelable: true });
-            if (requestClose.defaultPrevented) {
+            const eventProceeded = this.emit('close', { cancelable: true });
+            if (!eventProceeded) {
                 return;
             }
             window.clearTimeout(this.closeTimeout);
@@ -191,7 +191,7 @@ let Snackbar = class Snackbar extends LitElement {
                 ...children.map((child) => animateTo(child, [{ opacity: 1 }, { opacity: 0, offset: 0.75 }, { opacity: 0 }], { duration, easing: easingLinear })),
             ]);
             this.style.display = 'none';
-            emit(this, 'closed');
+            this.emit('closed');
             return;
         }
     }
@@ -224,7 +224,7 @@ let Snackbar = class Snackbar extends LitElement {
     }
     onActionClick(event) {
         event.stopPropagation();
-        emit(this, 'action-click');
+        this.emit('action-click');
     }
     onCloseClick() {
         this.open = false;

package/components/switch/index.d.ts

@@ -1,10 +1,10 @@
-import { LitElement } from 'lit';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import '@mdui/shared/icons/check.js';
 import '../icon.js';
 import type { Ripple } from '../ripple/index.js';
 import type { FormControl } from '@mdui/jq/shared/form.js';
 import type { CSSResultGroup, TemplateResult } from 'lit';
-declare const Switch_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 Switch_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 开关切换组件
  *
@@ -29,7 +29,7 @@ declare const Switch_base: import("@open-wc/dedupe-mixin").Constructor<import(".
  * @cssprop --shape-corner - 组件的轨道的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
  * @cssprop --shape-corner-thumb - 组件的图标容器的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
  */
-export declare class Switch extends Switch_base implements FormControl {
+export declare class Switch extends Switch_base<SwitchEventMap> implements FormControl {
     static styles: CSSResultGroup;
     /**
      * 是否为禁用状态
@@ -115,6 +115,13 @@ export declare class Switch extends Switch_base implements FormControl {
      */
     private onChange;
 }
+export interface SwitchEventMap {
+    focus: FocusEvent;
+    blur: FocusEvent;
+    change: CustomEvent<void>;
+    input: Event;
+    invalid: CustomEvent<void>;
+}
 declare global {
     interface HTMLElementTagNameMap {
         'mdui-switch': Switch;

package/components/switch/index.js

@@ -1,16 +1,16 @@
 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 { HasSlotController } from '@mdui/shared/controllers/has-slot.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 { nothingTemplate } from '@mdui/shared/helpers/template.js';
 import '@mdui/shared/icons/check.js';
 import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
@@ -42,7 +42,7 @@ import { style } from './style.js';
  * @cssprop --shape-corner - 组件的轨道的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
  * @cssprop --shape-corner-thumb - 组件的图标容器的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
  */
-let Switch = class Switch extends RippleMixin(FocusableMixin(LitElement)) {
+let Switch = class Switch extends RippleMixin(FocusableMixin(MduiElement)) {
     constructor() {
         super(...arguments);
         /**
@@ -128,7 +128,7 @@ let Switch = class Switch 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,
@@ -144,13 +144,13 @@ let Switch = class Switch 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();
             }
@@ -183,7 +183,7 @@ let Switch = class Switch extends RippleMixin(FocusableMixin(LitElement)) {
      */
     onChange() {
         this.checked = this.inputRef.value.checked;
-        emit(this, 'change');
+        this.emit('change');
     }
 };
 Switch.styles = [componentStyle, style];

package/components/tabs/tab-panel.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-tabs>` 和 `<mdui-tab>` 组件配合使用
@@ -17,7 +17,7 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
  *
  * @slot - 选项卡面板内容
  */
-export declare class TabPanel extends LitElement {
+export declare class TabPanel extends MduiElement<TabPanelEventMap> {
     static styles: CSSResultGroup;
     /**
      * 该选项卡面板的值
@@ -29,6 +29,8 @@ export declare class TabPanel extends LitElement {
     protected active: boolean;
     protected render(): TemplateResult;
 }
+export interface TabPanelEventMap {
+}
 declare global {
     interface HTMLElementTagNameMap {
         'mdui-tab-panel': TabPanel;

package/components/tabs/tab-panel.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 { tabPanelStyle } from './tab-panel-style.js';
@@ -21,7 +22,7 @@ import { tabPanelStyle } from './tab-panel-style.js';
  *
  * @slot - 选项卡面板内容
  */
-let TabPanel = class TabPanel extends LitElement {
+let TabPanel = class TabPanel extends MduiElement {
     constructor() {
         super(...arguments);
         /**

package/components/tabs/tab.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 Tab_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 Tab_base: import("@open-wc/dedupe-mixin").Constructor<import("../ripple/ripple-mixin.js").RippleMixinInterface> & import("@open-wc/dedupe-mixin").Constructor<import("@mdui/shared/mixins/focusable.js").FocusableMixinInterface> & typeof MduiElement;
 /**
  * @summary 选项卡项组件。需与 `<mdui-tabs>` 和 `<mdui-tab-panel>` 组件配合使用
  *
@@ -30,7 +30,7 @@ declare const Tab_base: import("@open-wc/dedupe-mixin").Constructor<import("../r
  * @csspart icon - 导航项中的图标
  * @csspart label - 导航项的文本
  */
-export declare class Tab extends Tab_base {
+export declare class Tab extends Tab_base<TabEventMap> {
     static styles: CSSResultGroup;
     /**
      * 该选项卡导航项的值
@@ -61,6 +61,10 @@ export declare class Tab extends Tab_base {
     protected get focusDisabled(): boolean;
     protected render(): TemplateResult;
 }
+export interface TabEventMap {
+    focus: FocusEvent;
+    blur: FocusEvent;
+}
 declare global {
     interface HTMLElementTagNameMap {
         'mdui-tab': Tab;

package/components/tabs/tab.js

@@ -1,9 +1,10 @@
 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 { when } from 'lit/directives/when.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';
@@ -40,7 +41,7 @@ import { tabStyle } from './tab-style.js';
  * @csspart icon - 导航项中的图标
  * @csspart label - 导航项的文本
  */
-let Tab = class Tab extends RippleMixin(FocusableMixin(LitElement)) {
+let Tab = class Tab extends RippleMixin(FocusableMixin(MduiElement)) {
     constructor() {
         super(...arguments);
         /**

package/components/tabs/tabs.d.ts

@@ -1,8 +1,8 @@
-import { LitElement } from 'lit';
 import '@mdui/jq/methods/children.js';
 import '@mdui/jq/methods/css.js';
 import '@mdui/jq/methods/find.js';
 import '@mdui/jq/methods/get.js';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 /**
  * @summary 选项卡组件。需与 `<mdui-tab>` 和 `<mdui-tab-panel>` 组件配合使用
@@ -27,7 +27,7 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
  * @csspart container - `<mdui-tab>` 元素的容器
  * @csspart indicator - 激活状态指示器
  */
-export declare class Tabs extends LitElement {
+export declare class Tabs extends MduiElement<TabsEventMap> {
     static styles: CSSResultGroup;
     /**
      * 选项卡形状。可选值为：
@@ -81,6 +81,9 @@ export declare class Tabs extends LitElement {
     private updateActive;
     private updateIndicator;
 }
+export interface TabsEventMap {
+    change: CustomEvent<void>;
+}
 declare global {
     interface HTMLElementTagNameMap {
         'mdui-tabs': Tabs;

package/components/tabs/tabs.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 { classMap } from 'lit/directives/class-map.js';
 import { createRef, ref } from 'lit/directives/ref.js';
@@ -8,10 +8,10 @@ import '@mdui/jq/methods/children.js';
 import '@mdui/jq/methods/css.js';
 import '@mdui/jq/methods/find.js';
 import '@mdui/jq/methods/get.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 { booleanConverter } from '@mdui/shared/helpers/decorator.js';
-import { emit } from '@mdui/shared/helpers/event.js';
 import { observeResize } from '@mdui/shared/helpers/observeResize.js';
 import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
 import { tabsStyle } from './tabs-style.js';
@@ -38,7 +38,7 @@ import { tabsStyle } from './tabs-style.js';
  * @csspart container - `<mdui-tab>` 元素的容器
  * @csspart indicator - 激活状态指示器
  */
-let Tabs = class Tabs extends LitElement {
+let Tabs = class Tabs extends MduiElement {
     constructor() {
         super(...arguments);
         /**
@@ -85,7 +85,7 @@ let Tabs = class Tabs extends LitElement {
         this.value = this.tabs.find((tab) => tab.key === this.activeKey)?.value;
         this.updateActive();
         if (!this.isInitial) {
-            emit(this, 'change');
+            this.emit('change');
         }
     }
     async onValueChange() {
@@ -121,6 +121,9 @@ let Tabs = class Tabs extends LitElement {
         await this.definedController.whenDefined();
         const target = event.target;
         const tab = target.closest('mdui-tab');
+        if (!tab) {
+            return;
+        }
         this.activeKey = tab.key;
         this.isInitial = false;
         this.updateActive();

package/components/text-field/index.d.ts

@@ -1,5 +1,5 @@
-import { LitElement } from 'lit';
 import '@mdui/jq/methods/css.js';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import '@mdui/shared/icons/cancel--outlined.js';
 import '@mdui/shared/icons/error.js';
 import '@mdui/shared/icons/visibility-off.js';
@@ -8,7 +8,7 @@ import '../button-icon.js';
 import '../icon.js';
 import type { FormControl } from '@mdui/jq/shared/form.js';
 import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
-declare const TextField_base: import("@open-wc/dedupe-mixin").Constructor<import("@mdui/shared/mixins/focusable.js").FocusableMixinInterface> & typeof LitElement;
+declare const TextField_base: import("@open-wc/dedupe-mixin").Constructor<import("@mdui/shared/mixins/focusable.js").FocusableMixinInterface> & typeof MduiElement;
 /**
  * @summary 文本框组件
  *
@@ -53,7 +53,7 @@ declare const TextField_base: import("@open-wc/dedupe-mixin").Constructor<import
  * @csspart error - 底部的错误描述文本
  * @csspart counter - 底部右侧的字数统计
  */
-export declare class TextField extends TextField_base implements FormControl {
+export declare class TextField extends TextField_base<TextFieldEventMap> implements FormControl {
     static styles: CSSResultGroup;
     /**
      * 文本框形状。默认为 `filled`。可选值为：
@@ -392,6 +392,14 @@ export declare class TextField extends TextField_base implements FormControl {
     private renderHelper;
     private renderCounter;
 }
+export interface TextFieldEventMap {
+    focus: FocusEvent;
+    blur: FocusEvent;
+    change: CustomEvent<void>;
+    input: CustomEvent<void>;
+    invalid: CustomEvent<void>;
+    clear: CustomEvent<void>;
+}
 declare global {
     interface HTMLElementTagNameMap {
         'mdui-text-field': TextField;

package/components/text-field/index.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 { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
@@ -9,12 +9,12 @@ import { when } from 'lit/directives/when.js';
 import { animate } from '@lit-labs/motion';
 import { $ } from '@mdui/jq/$.js';
 import '@mdui/jq/methods/css.js';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import { FormController, formResets } from '@mdui/shared/controllers/form.js';
 import { HasSlotController } from '@mdui/shared/controllers/has-slot.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 { getDuration, getEasing } from '@mdui/shared/helpers/motion.js';
 import { observeResize } from '@mdui/shared/helpers/observeResize.js';
 import { nothingTemplate } from '@mdui/shared/helpers/template.js';
@@ -71,7 +71,7 @@ import { style } from './style.js';
  * @csspart error - 底部的错误描述文本
  * @csspart counter - 底部右侧的字数统计
  */
-let TextField = class TextField extends FocusableMixin(LitElement) {
+let TextField = class TextField extends FocusableMixin(MduiElement) {
     constructor() {
         super(...arguments);
         /**
@@ -313,8 +313,8 @@ let TextField = class TextField extends FocusableMixin(LitElement) {
         if (this.value !== this.inputRef.value.value) {
             this.value = this.inputRef.value.value;
             this.setTextareaHeight();
-            emit(this, 'input');
-            emit(this, 'change');
+            this.emit('input');
+            this.emit('change');
         }
     }
     /**
@@ -323,7 +323,7 @@ let TextField = class TextField extends FocusableMixin(LitElement) {
     checkValidity() {
         const valid = this.inputRef.value.checkValidity();
         if (!valid) {
-            emit(this, 'invalid', {
+            this.emit('invalid', {
                 bubbles: false,
                 cancelable: true,
                 composed: false,
@@ -339,7 +339,7 @@ let TextField = class TextField extends FocusableMixin(LitElement) {
     reportValidity() {
         this.invalid = !this.inputRef.value.reportValidity();
         if (this.invalid) {
-            emit(this, 'invalid', {
+            this.emit('invalid', {
                 bubbles: false,
                 cancelable: true,
                 composed: false,
@@ -393,13 +393,13 @@ let TextField = class TextField extends FocusableMixin(LitElement) {
         if (this.isTextarea) {
             this.setTextareaHeight();
         }
-        emit(this, 'change');
+        this.emit('change');
     }
     onClear(event) {
         this.value = '';
-        emit(this, 'clear');
-        emit(this, 'input');
-        emit(this, 'change');
+        this.emit('clear');
+        this.emit('input');
+        this.emit('change');
         this.focus();
         event.stopPropagation();
     }
@@ -408,7 +408,7 @@ let TextField = class TextField extends FocusableMixin(LitElement) {
         if (this.isTextarea) {
             this.setTextareaHeight();
         }
-        emit(this, 'input');
+        this.emit('input');
     }
     onInvalid(event) {
         event.preventDefault();

package/components/tooltip/index.d.ts

@@ -1,9 +1,9 @@
-import { LitElement } from 'lit';
 import '@mdui/jq/methods/css.js';
 import '@mdui/jq/methods/filter.js';
 import '@mdui/jq/methods/height.js';
 import '@mdui/jq/methods/prop.js';
 import '@mdui/jq/methods/width.js';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import type { CSSResultGroup, TemplateResult, PropertyValues } from 'lit';
 /**
  * @summary 工具提示组件
@@ -33,7 +33,7 @@ import type { CSSResultGroup, TemplateResult, PropertyValues } from 'lit';
  * @cssprop --shape-corner-rich - variant="rich" 时，组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
  * @cssprop --z-index - 组件的 CSS 的 `z-index` 值
  */
-export declare class Tooltip extends LitElement {
+export declare class Tooltip extends MduiElement<TooltipEventMap> {
     static styles: CSSResultGroup;
     /**
      * tooltip 的形状。默认为 `plain`。可选值为：
@@ -98,6 +98,7 @@ export declare class Tooltip extends LitElement {
      */
     open: boolean;
     private observeResize?;
+    private overflowAncestors?;
     private hoverTimeout;
     private readonly popupRef;
     private readonly hasSlotController;
@@ -133,6 +134,12 @@ export declare class Tooltip extends LitElement {
     private onWindowScroll;
     private updatePositioner;
 }
+export interface TooltipEventMap {
+    open: CustomEvent<void>;
+    opened: CustomEvent<void>;
+    close: CustomEvent<void>;
+    closed: CustomEvent<void>;
+}
 declare global {
     interface HTMLElementTagNameMap {
         'mdui-tooltip': Tooltip;

package/components/tooltip/index.js

@@ -1,21 +1,22 @@
 import { __decorate } from "tslib";
-import { html, LitElement } from 'lit';
+import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { createRef, ref } from 'lit/directives/ref.js';
 import { when } from 'lit/directives/when.js';
+import { getOverflowAncestors } from '@floating-ui/utils/dom';
 import { $ } from '@mdui/jq/$.js';
 import '@mdui/jq/methods/css.js';
 import '@mdui/jq/methods/filter.js';
 import '@mdui/jq/methods/height.js';
 import '@mdui/jq/methods/prop.js';
 import '@mdui/jq/methods/width.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 { HoverController } from '@mdui/shared/controllers/hover.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 { observeResize } from '@mdui/shared/helpers/observeResize.js';
 import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
@@ -48,7 +49,7 @@ import { style } from './style.js';
  * @cssprop --shape-corner-rich - variant="rich" 时，组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
  * @cssprop --z-index - 组件的 CSS 的 `z-index` 值
  */
-let Tooltip = class Tooltip extends LitElement {
+let Tooltip = class Tooltip extends MduiElement {
     constructor() {
         super();
         /**
@@ -149,10 +150,8 @@ let Tooltip = class Tooltip extends LitElement {
                 await this.updateComplete;
             }
             if (hasUpdated) {
-                const requestOpen = emit(this, 'open', {
-                    cancelable: true,
-                });
-                if (requestOpen.defaultPrevented) {
+                const eventProceeded = this.emit('open', { cancelable: true });
+                if (!eventProceeded) {
                     return;
                 }
             }
@@ -164,33 +163,36 @@ let Tooltip = class Tooltip extends LitElement {
                 easing,
             });
             if (hasUpdated) {
-                emit(this, 'opened');
+                this.emit('opened');
             }
             return;
         }
         // 关闭
         if (!this.open && hasUpdated) {
-            const requestClose = emit(this, 'close', {
-                cancelable: true,
-            });
-            if (requestClose.defaultPrevented) {
+            const eventProceeded = this.emit('close', { cancelable: true });
+            if (!eventProceeded) {
                 return;
             }
             await stopAnimations(this.popupRef.value);
             await animateTo(this.popupRef.value, [{ transform: 'scale(1)' }, { transform: 'scale(0)' }], { duration, easing });
             this.popupRef.value.hidden = true;
-            emit(this, 'closed');
+            this.emit('closed');
         }
     }
     connectedCallback() {
         super.connectedCallback();
         document.addEventListener('pointerdown', this.onDocumentClick);
-        window.addEventListener('scroll', this.onWindowScroll);
+        this.overflowAncestors = getOverflowAncestors(this.target);
+        this.overflowAncestors.forEach((ancestor) => {
+            ancestor.addEventListener('scroll', this.onWindowScroll);
+        });
     }
     disconnectedCallback() {
         super.disconnectedCallback();
         document.removeEventListener('pointerdown', this.onDocumentClick);
-        window.removeEventListener('scroll', this.onWindowScroll);
+        this.overflowAncestors?.forEach((ancestor) => {
+            ancestor.removeEventListener('scroll', this.onWindowScroll);
+        });
         this.observeResize?.unobserve();
     }
     firstUpdated(changedProperties) {

package/components/top-app-bar/top-app-bar-title.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-top-app-bar>` 组件配合使用
@@ -18,7 +18,7 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
  * @csspart label 文本内容
  * @csspart label-large 展开状态的文本内容
  */
-export declare class TopAppBarTitle extends LitElement {
+export declare class TopAppBarTitle extends MduiElement<TopAppBarTitleEventMap> {
     static styles: CSSResultGroup;
     /**
      * 顶部应用栏形状。由 mdui-top-app-bar 组件控制该参数
@@ -39,6 +39,8 @@ export declare class TopAppBarTitle extends LitElement {
      */
     private onSlotChange;
 }
+export interface TopAppBarTitleEventMap {
+}
 declare global {
     interface HTMLElementTagNameMap {
         'mdui-top-app-bar-title': TopAppBarTitle;