mdui 2.0.2 → 2.0.4

package/components/dialog/index.js

@@ -1,15 +1,15 @@
 import { __decorate } from "tslib";
-import { html, LitElement } from 'lit';
+import { html } from 'lit';
 import { customElement, property, queryAssignedElements, } 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 { 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 { Modal } from '@mdui/shared/helpers/modal.js';
 import { getDuration, getEasing } from '@mdui/shared/helpers/motion.js';
 import { lockScreen, unlockScreen } from '@mdui/shared/helpers/scroll.js';
@@ -24,10 +24,10 @@ import { style } from './style.js';
  * <mdui-dialog>content</mdui-dialog>
  * ```
  *
- * @event open - 在对话框打开之前触发。可以通过调用 `event.preventDefault()` 阻止对话框打开
- * @event opened - 在对话框打开之后触发
- * @event close - 在对话框关闭之前触发。可以通过调用 `event.preventDefault()` 阻止对话框关闭
- * @event closed - 在对话框关闭之后触发
+ * @event open - 对话框开始打开时触发。可以通过调用 `event.preventDefault()` 阻止对话框打开
+ * @event opened - 对话框打开动画完成后触发
+ * @event close - 对话框开始关闭时触发。可以通过调用 `event.preventDefault()` 阻止对话框关闭
+ * @event closed - 对话框关闭动画完成后触发
  * @event overlay-click - 点击遮罩层时触发
  *
  * @slot header - 顶部元素，默认包含 `icon` slot 和 `headline` slot
@@ -39,17 +39,17 @@ import { style } from './style.js';
  *
  * @csspart overlay - 遮罩层
  * @csspart panel - 对话框容器
- * @csspart header - 对话框 header 部分，其中包含了 icon 和 headline
- * @csspart icon - 顶部的图标，位于 header 中
- * @csspart headline - 顶部的标题，位于 header 中
- * @csspart body - 对话框的 body 部分
+ * @csspart header - 对话框 header 部分，包含 icon 和 headline
+ * @csspart icon - 顶部图标，位于 header 中
+ * @csspart headline - 顶部标题，位于 header 中
+ * @csspart body - 对话框 body 部分
  * @csspart description - 副文本部分，位于 body 中
  * @csspart action - 底部操作按钮
  *
- * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
- * @cssprop --z-index - 组件的 CSS 的 `z-index` 值
+ * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --z-index - 组件的 CSS `z-index` 值
  */
-let Dialog = class Dialog extends LitElement {
+let Dialog = class Dialog extends MduiElement {
     constructor() {
         super(...arguments);
         /**
@@ -57,15 +57,15 @@ let Dialog = class Dialog extends LitElement {
          */
         this.open = false;
         /**
-         * 是否为全屏对话框
+         * 是否全屏显示对话框
          */
         this.fullscreen = false;
         /**
-         * 是否在按下 ESC 键时，关闭对话框
+         * 是否允许按下 ESC 键关闭对话框
          */
         this.closeOnEsc = false;
         /**
-         * 是否在点击遮罩时，关闭对话框
+         * 是否允许点击遮罩层关闭对话框
          */
         this.closeOnOverlayClick = false;
         /**
@@ -104,10 +104,8 @@ let Dialog = class Dialog extends LitElement {
         // 要区分是否首次渲染，首次渲染不触发事件，不执行动画；非首次渲染，触发事件，执行动画
         if (this.open) {
             if (hasUpdated) {
-                const requestOpen = emit(this, 'open', {
-                    cancelable: true,
-                });
-                if (requestOpen.defaultPrevented) {
+                const eventProceeded = this.emit('open', { cancelable: true });
+                if (!eventProceeded) {
                     return;
                 }
             }
@@ -165,14 +163,12 @@ let Dialog = class Dialog extends LitElement {
                 })),
             ]);
             if (hasUpdated) {
-                emit(this, 'opened');
+                this.emit('opened');
             }
         }
         else {
-            const requestClose = emit(this, 'close', {
-                cancelable: true,
-            });
-            if (requestClose.defaultPrevented) {
+            const eventProceeded = this.emit('close', { cancelable: true });
+            if (!eventProceeded) {
                 return;
             }
             this.modalHelper.deactivate();
@@ -197,7 +193,7 @@ let Dialog = class Dialog extends LitElement {
             if (typeof trigger?.focus === 'function') {
                 setTimeout(() => trigger.focus());
             }
-            emit(this, 'closed');
+            this.emit('closed');
         }
     }
     disconnectedCallback() {
@@ -229,7 +225,7 @@ let Dialog = class Dialog extends LitElement {
         })}" tabindex="0">${when(hasHeader, () => html `<slot name="header" part="header" class="header">${when(hasIcon, () => this.renderIcon())} ${when(hasHeadline, () => this.renderHeadline())}</slot>`)} ${when(hasBody, () => html `<div ${ref(this.bodyRef)} part="body" class="body">${when(hasDescription, () => this.renderDescription())}<slot></slot></div>`)} ${when(hasActionSlot, () => html `<slot name="action" part="action" class="action"></slot>`)}</div>`;
     }
     onOverlayClick() {
-        emit(this, 'overlay-click');
+        this.emit('overlay-click');
         if (!this.closeOnOverlayClick) {
             return;
         }

package/components/divider/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-divider></mdui-divider>
  * ```
  */
-export declare class Divider extends LitElement {
+export declare class Divider extends MduiElement<DividerEventMap> {
     static styles: CSSResultGroup;
     /**
-     * 是否显示垂直分割线
+     * 是否为垂直分割线
      */
     vertical: boolean;
     /**
-     * 是否左侧缩进
+     * 是否进行左侧缩进
      */
     inset: boolean;
     /**
-     * 是否左右两侧缩进
+     * 是否进行左右两侧缩进
      */
     middle: boolean;
     protected render(): TemplateResult;
 }
+export interface DividerEventMap {
+}
 declare global {
     interface HTMLElementTagNameMap {
         'mdui-divider': Divider;

package/components/divider/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 { booleanConverter } from '@mdui/shared/helpers/decorator.js';
 import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
 import { style } from './style.js';
@@ -11,19 +12,19 @@ import { style } from './style.js';
  * <mdui-divider></mdui-divider>
  * ```
  */
-let Divider = class Divider extends LitElement {
+let Divider = class Divider extends MduiElement {
     constructor() {
         super(...arguments);
         /**
-         * 是否显示垂直分割线
+         * 是否为垂直分割线
          */
         this.vertical = false;
         /**
-         * 是否左侧缩进
+         * 是否进行左侧缩进
          */
         this.inset = false;
         /**
-         * 是否左右两侧缩进
+         * 是否进行左右两侧缩进
          */
         this.middle = false;
     }

package/components/dropdown/index.d.ts

@@ -1,7 +1,7 @@
-import { LitElement } from 'lit';
 import '@mdui/jq/methods/height.js';
 import '@mdui/jq/methods/is.js';
 import '@mdui/jq/methods/width.js';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 /**
  * @summary 下拉组件
@@ -16,71 +16,71 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
  * </mdui-dropdown>
  * ```
  *
- * @event open - dropdown 开始打开时，事件被触发。可以通过调用 `event.preventDefault()` 阻止 dropdown 打开
- * @event opened - dropdown 打开动画完成时，事件被触发
- * @event close - dropdown 开始关闭时，事件被触发。可以通过调用 `event.preventDefault()` 阻止 dropdown 关闭
- * @event closed - dropdown 关闭动画完成时，事件被触发
+ * @event open - 下拉组件开始打开时，事件被触发。可以通过调用 `event.preventDefault()` 阻止下拉组件打开
+ * @event opened - 下拉组件打开动画完成时，事件被触发
+ * @event close - 下拉组件开始关闭时，事件被触发。可以通过调用 `event.preventDefault()` 阻止下拉组件关闭
+ * @event closed - 下拉组件关闭动画完成时，事件被触发
  *
- * @slot - dropdown 的内容
- * @slot trigger - 触发 dropdown 的元素，例如 [`<mdui-button>`](/docs/2/components/button) 元素
+ * @slot - 下拉组件的内容
+ * @slot trigger - 触发下拉组件的元素，例如 [`<mdui-button>`](/docs/2/components/button) 元素
  *
- * @csspart trigger - 触发 dropdown 的元素的容器，即 `trigger` slot 的容器
- * @csspart panel - dropdown 内容的容器
+ * @csspart trigger - 触发下拉组件的元素的容器，即 `trigger` slot 的容器
+ * @csspart panel - 下拉组件内容的容器
  *
- * @cssprop --z-index - 组件的 CSS 的 `z-index` 值
+ * @cssprop --z-index - 组件的 CSS `z-index` 值
  */
-export declare class Dropdown extends LitElement {
+export declare class Dropdown extends MduiElement<DropdownEventMap> {
     static styles: CSSResultGroup;
     /**
-     * dropdown 是否打开
+     * 是否打开下拉组件
      */
     open: boolean;
     /**
-     * 是否禁用 dropdown
+     * 是否禁用下拉组件
      */
     disabled: boolean;
     /**
-     * dropdown 的触发方式，支持传入多个值，用空格分隔。可选值为：
+     * 下拉组件的触发方式，支持多个值，用空格分隔。可选值包括：
      *
-     * * `click`：点击时触发
+     * * `click`：点击触发
      * * `hover`：鼠标悬浮触发
-     * * `focus`：聚焦时触发
-     * * `contextmenu`：鼠标右键点击、或触摸长按时触发
-     * * `manual`：使用了该值时，只能使用编程方式打开和关闭 dropdown，且不能再指定其他触发方式
+     * * `focus`：聚焦触发
+     * * `contextmenu`：鼠标右键点击、或触摸长按触发
+     * * `manual`：仅能通过编程方式打开和关闭下拉组件，不能再指定其他触发方式
      */
-    trigger: /*点击时触发*/ 'click' | /*鼠标悬浮触发*/ 'hover' | /*聚焦时触发*/ 'focus' | /*鼠标右键点击、或触摸长按时触发*/ 'contextmenu' | /*使用了该值时，只能使用编程方式打开和关闭 dropdown，且不能再指定其他触发方式*/ 'manual' | string;
+    trigger: /*点击触发*/ 'click' | /*鼠标悬浮触发*/ 'hover' | /*聚焦触发*/ 'focus' | /*鼠标右键点击、或触摸长按触发*/ 'contextmenu' | /*仅能通过编程方式打开和关闭下拉组件，不能再指定其他触发方式*/ 'manual' | string;
     /**
-     * dropdown 内容的位置。可选值为：
+     * 下拉组件内容的位置。可选值包括：
      *
      * * `auto`：自动判断位置
-     * * `top-start`：位于上方，且左对齐
-     * * `top`：位于上方，且居中对齐
-     * * `top-end`：位于上方，且右对齐
-     * * `bottom-start`：位于下方，且左对齐
-     * * `bottom`：位于下方，且居中对齐
-     * * `bottom-end`：位于下方，且右对齐
-     * * `left-start`：位于左侧，且顶部对齐
-     * * `left`：位于左侧，且居中对齐
-     * * `left-end`：位于左侧，且底部对齐
-     * * `right-start`：位于右侧，且顶部对齐
-     * * `right`：位于右侧，且居中对齐
-     * * `right-end`：位于右侧，且底部对齐
+     * * `top-start`：上方左对齐
+     * * `top`：上方居中
+     * * `top-end`：上方右对齐
+     * * `bottom-start`：下方左对齐
+     * * `bottom`：下方居中
+     * * `bottom-end`：下方右对齐
+     * * `left-start`：左侧顶部对齐
+     * * `left`：左侧居中
+     * * `left-end`：左侧底部对齐
+     * * `right-start`：右侧顶部对齐
+     * * `right`：右侧居中
+     * * `right-end`：右侧底部对齐
      */
-    placement: /*自动判断位置*/ 'auto' | /*位于上方，且左对齐*/ 'top-start' | /*位于上方，且居中对齐*/ 'top' | /*位于上方，且右对齐*/ 'top-end' | /*位于下方，且左对齐*/ 'bottom-start' | /*位于下方，且居中对齐*/ 'bottom' | /*位于下方，且右对齐*/ 'bottom-end' | /*位于左侧，且顶部对齐*/ 'left-start' | /*位于左侧，且居中对齐*/ 'left' | /*位于左侧，且底部对齐*/ 'left-end' | /*位于右侧，且顶部对齐*/ 'right-start' | /*位于右侧，且居中对齐*/ 'right' | /*位于右侧，且底部对齐*/ 'right-end';
+    placement: /*自动判断位置*/ 'auto' | /*上方左对齐*/ 'top-start' | /*上方居中*/ 'top' | /*上方右对齐*/ 'top-end' | /*下方左对齐*/ 'bottom-start' | /*下方居中*/ 'bottom' | /*下方右对齐*/ 'bottom-end' | /*左侧顶部对齐*/ 'left-start' | /*左侧居中*/ 'left' | /*左侧底部对齐*/ 'left-end' | /*右侧顶部对齐*/ 'right-start' | /*右侧居中*/ 'right' | /*右侧底部对齐*/ 'right-end';
     /**
-     * 在点击 [`<mdui-menu-item>`](/docs/2/components/menu#menu-item-api) 元素后，是否仍保持 dropdown 为打开状态
+     * 点击 [`<mdui-menu-item>`](/docs/2/components/menu#menu-item-api) 后，下拉组件是否保持打开状态
      */
     stayOpenOnClick: boolean;
     /**
-     * 通过 hover 触发 dropdown 打开时的延时，单位为毫秒
+     * 鼠标悬浮触发下拉组件打开的延时，单位为毫秒
      */
     openDelay: number;
     /**
-     * 通过 hover 触发 dropdown 关闭时的延时，单位为毫秒
+     * 鼠标悬浮触发下拉组件关闭的延时，单位为毫秒
      */
     closeDelay: number;
     /**
-     * 是否在触发 dropdown 时的光标所在的位置打开 dropdown。通常用于在打开鼠标右键菜单时使用
+     * 是否在触发下拉组件的光标位置打开下拉组件，常用于打开鼠标右键菜单
      */
     openOnPointer: boolean;
     private readonly triggerElements;
@@ -91,6 +91,7 @@ export declare class Dropdown extends LitElement {
     private openTimeout;
     private closeTimeout;
     private observeResize?;
+    private overflowAncestors?;
     private readonly panelRef;
     private readonly definedController;
     constructor();
@@ -123,6 +124,12 @@ export declare class Dropdown extends LitElement {
     private onMouseLeave;
     private updatePositioner;
 }
+export interface DropdownEventMap {
+    open: CustomEvent<void>;
+    opened: CustomEvent<void>;
+    close: CustomEvent<void>;
+    closed: CustomEvent<void>;
+}
 declare global {
     interface HTMLElementTagNameMap {
         'mdui-dropdown': Dropdown;

package/components/dropdown/index.js

@@ -1,17 +1,18 @@
 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 { getOverflowAncestors } from '@floating-ui/utils/dom';
 import { $ } from '@mdui/jq/$.js';
 import '@mdui/jq/methods/height.js';
 import '@mdui/jq/methods/is.js';
 import '@mdui/jq/methods/width.js';
 import { isFunction } 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 { 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';
@@ -29,72 +30,72 @@ import { style } from './style.js';
  * </mdui-dropdown>
  * ```
  *
- * @event open - dropdown 开始打开时，事件被触发。可以通过调用 `event.preventDefault()` 阻止 dropdown 打开
- * @event opened - dropdown 打开动画完成时，事件被触发
- * @event close - dropdown 开始关闭时，事件被触发。可以通过调用 `event.preventDefault()` 阻止 dropdown 关闭
- * @event closed - dropdown 关闭动画完成时，事件被触发
+ * @event open - 下拉组件开始打开时，事件被触发。可以通过调用 `event.preventDefault()` 阻止下拉组件打开
+ * @event opened - 下拉组件打开动画完成时，事件被触发
+ * @event close - 下拉组件开始关闭时，事件被触发。可以通过调用 `event.preventDefault()` 阻止下拉组件关闭
+ * @event closed - 下拉组件关闭动画完成时，事件被触发
  *
- * @slot - dropdown 的内容
- * @slot trigger - 触发 dropdown 的元素，例如 [`<mdui-button>`](/docs/2/components/button) 元素
+ * @slot - 下拉组件的内容
+ * @slot trigger - 触发下拉组件的元素，例如 [`<mdui-button>`](/docs/2/components/button) 元素
  *
- * @csspart trigger - 触发 dropdown 的元素的容器，即 `trigger` slot 的容器
- * @csspart panel - dropdown 内容的容器
+ * @csspart trigger - 触发下拉组件的元素的容器，即 `trigger` slot 的容器
+ * @csspart panel - 下拉组件内容的容器
  *
- * @cssprop --z-index - 组件的 CSS 的 `z-index` 值
+ * @cssprop --z-index - 组件的 CSS `z-index` 值
  */
-let Dropdown = class Dropdown extends LitElement {
+let Dropdown = class Dropdown extends MduiElement {
     constructor() {
         super();
         /**
-         * dropdown 是否打开
+         * 是否打开下拉组件
          */
         this.open = false;
         /**
-         * 是否禁用 dropdown
+         * 是否禁用下拉组件
          */
         this.disabled = false;
         /**
-         * dropdown 的触发方式，支持传入多个值，用空格分隔。可选值为：
+         * 下拉组件的触发方式，支持多个值，用空格分隔。可选值包括：
          *
-         * * `click`：点击时触发
+         * * `click`：点击触发
          * * `hover`：鼠标悬浮触发
-         * * `focus`：聚焦时触发
-         * * `contextmenu`：鼠标右键点击、或触摸长按时触发
-         * * `manual`：使用了该值时，只能使用编程方式打开和关闭 dropdown，且不能再指定其他触发方式
+         * * `focus`：聚焦触发
+         * * `contextmenu`：鼠标右键点击、或触摸长按触发
+         * * `manual`：仅能通过编程方式打开和关闭下拉组件，不能再指定其他触发方式
          */
         this.trigger = 'click';
         /**
-         * dropdown 内容的位置。可选值为：
+         * 下拉组件内容的位置。可选值包括：
          *
          * * `auto`：自动判断位置
-         * * `top-start`：位于上方，且左对齐
-         * * `top`：位于上方，且居中对齐
-         * * `top-end`：位于上方，且右对齐
-         * * `bottom-start`：位于下方，且左对齐
-         * * `bottom`：位于下方，且居中对齐
-         * * `bottom-end`：位于下方，且右对齐
-         * * `left-start`：位于左侧，且顶部对齐
-         * * `left`：位于左侧，且居中对齐
-         * * `left-end`：位于左侧，且底部对齐
-         * * `right-start`：位于右侧，且顶部对齐
-         * * `right`：位于右侧，且居中对齐
-         * * `right-end`：位于右侧，且底部对齐
+         * * `top-start`：上方左对齐
+         * * `top`：上方居中
+         * * `top-end`：上方右对齐
+         * * `bottom-start`：下方左对齐
+         * * `bottom`：下方居中
+         * * `bottom-end`：下方右对齐
+         * * `left-start`：左侧顶部对齐
+         * * `left`：左侧居中
+         * * `left-end`：左侧底部对齐
+         * * `right-start`：右侧顶部对齐
+         * * `right`：右侧居中
+         * * `right-end`：右侧底部对齐
          */
         this.placement = 'auto';
         /**
-         * 在点击 [`<mdui-menu-item>`](/docs/2/components/menu#menu-item-api) 元素后，是否仍保持 dropdown 为打开状态
+         * 点击 [`<mdui-menu-item>`](/docs/2/components/menu#menu-item-api) 后，下拉组件是否保持打开状态
          */
         this.stayOpenOnClick = false;
         /**
-         * 通过 hover 触发 dropdown 打开时的延时，单位为毫秒
+         * 鼠标悬浮触发下拉组件打开的延时，单位为毫秒
          */
         this.openDelay = 150;
         /**
-         * 通过 hover 触发 dropdown 关闭时的延时，单位为毫秒
+         * 鼠标悬浮触发下拉组件关闭的延时，单位为毫秒
          */
         this.closeDelay = 150;
         /**
-         * 是否在触发 dropdown 时的光标所在的位置打开 dropdown。通常用于在打开鼠标右键菜单时使用
+         * 是否在触发下拉组件的光标位置打开下拉组件，常用于打开鼠标右键菜单
          */
         this.openOnPointer = false;
         this.panelRef = createRef();
@@ -139,10 +140,8 @@ let Dropdown = class Dropdown extends LitElement {
         // 要区分是否首次渲染，首次渲染时不触发事件，不执行动画；非首次渲染，触发事件，执行动画
         if (this.open) {
             if (hasUpdated) {
-                const requestOpen = emit(this, 'open', {
-                    cancelable: true,
-                });
-                if (requestOpen.defaultPrevented) {
+                const eventProceeded = this.emit('open', { cancelable: true });
+                if (!eventProceeded) {
                     return;
                 }
             }
@@ -169,14 +168,12 @@ let Dropdown = class Dropdown extends LitElement {
                 }),
             ]);
             if (hasUpdated) {
-                emit(this, 'opened');
+                this.emit('opened');
             }
         }
         else {
-            const requestClose = emit(this, 'close', {
-                cancelable: true,
-            });
-            if (requestClose.defaultPrevented) {
+            const eventProceeded = this.emit('close', { cancelable: true });
+            if (!eventProceeded) {
                 return;
             }
             // dropdown 关闭时，如果不支持 focus 触发，且焦点在 dropdown 内，则焦点回到 trigger 上
@@ -199,7 +196,7 @@ let Dropdown = class Dropdown extends LitElement {
             if (this.panelRef.value) {
                 this.panelRef.value.hidden = true;
             }
-            emit(this, 'closed');
+            this.emit('closed');
         }
     }
     connectedCallback() {
@@ -207,14 +204,19 @@ let Dropdown = class Dropdown extends LitElement {
         this.definedController.whenDefined().then(() => {
             document.addEventListener('pointerdown', this.onDocumentClick);
             document.addEventListener('keydown', this.onDocumentKeydown);
-            window.addEventListener('scroll', this.onWindowScroll);
+            this.overflowAncestors = getOverflowAncestors(this.triggerElement);
+            this.overflowAncestors.forEach((ancestor) => {
+                ancestor.addEventListener('scroll', this.onWindowScroll);
+            });
         });
     }
     disconnectedCallback() {
         super.disconnectedCallback();
         document.removeEventListener('pointerdown', this.onDocumentClick);
         document.removeEventListener('keydown', this.onDocumentKeydown);
-        window.removeEventListener('scroll', this.onWindowScroll);
+        this.overflowAncestors?.forEach((ancestor) => {
+            ancestor.removeEventListener('scroll', this.onWindowScroll);
+        });
         this.observeResize?.unobserve();
     }
     firstUpdated(changedProperties) {

package/components/fab/index.d.ts

@@ -16,19 +16,19 @@ import type { TemplateResult, CSSResultGroup } from 'lit';
  * @slot - 文本
  * @slot icon - 图标
  *
- * @csspart button - 内部的 `button` 或 `a` 元素
+ * @csspart button - 内部的 `<button>` 或 `<a>` 元素
  * @csspart label - 右侧的文本
  * @csspart icon - 左侧的图标
  * @csspart loading - 加载中状态的 `<mdui-circular-progress>` 元素
  *
- * @cssprop --shape-corner-small - `size="small"` 时，组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
- * @cssprop --shape-corner-normal - `size="normal"` 时，组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
- * @cssprop --shape-corner-large - `size="large"` 时，组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --shape-corner-small - `size="small"` 时，组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --shape-corner-normal - `size="normal"` 时，组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --shape-corner-large - `size="large"` 时，组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
  */
-export declare class Fab extends ButtonBase {
+export declare class Fab extends ButtonBase<FabEventMap> {
     static styles: CSSResultGroup;
     /**
-     * FAB 形状，此组件的不同形状之间只有颜色不一样。可选值为：
+     * FAB 的形状，此组件的不同形状之间只有颜色不一样。可选值包括：
      *
      * * `primary`：使用 Primary container 背景色
      * * `surface`：使用 Surface container high 背景色
@@ -37,7 +37,7 @@ export declare class Fab extends ButtonBase {
      */
     variant: /*使用 Primary container 背景色*/ 'primary' | /*使用 Surface container high 背景色*/ 'surface' | /*使用 Secondary container 背景色*/ 'secondary' | /*使用 Tertiary container 背景色*/ 'tertiary';
     /**
-     * FAB 大小。可选值为：
+     * FAB 的大小。可选值包括：
      * * `normal`：普通大小 FAB
      * * `small`：小型 FAB
      * * `large`：大型 FAB
@@ -64,6 +64,11 @@ export declare class Fab extends ButtonBase {
     private renderIcon;
     private renderInner;
 }
+export interface FabEventMap {
+    focus: FocusEvent;
+    blur: FocusEvent;
+    invalid: CustomEvent<void>;
+}
 declare global {
     interface HTMLElementTagNameMap {
         'mdui-fab': Fab;

package/components/fab/index.js

@@ -26,20 +26,20 @@ import { style } from './style.js';
  * @slot - 文本
  * @slot icon - 图标
  *
- * @csspart button - 内部的 `button` 或 `a` 元素
+ * @csspart button - 内部的 `<button>` 或 `<a>` 元素
  * @csspart label - 右侧的文本
  * @csspart icon - 左侧的图标
  * @csspart loading - 加载中状态的 `<mdui-circular-progress>` 元素
  *
- * @cssprop --shape-corner-small - `size="small"` 时，组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
- * @cssprop --shape-corner-normal - `size="normal"` 时，组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
- * @cssprop --shape-corner-large - `size="large"` 时，组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --shape-corner-small - `size="small"` 时，组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --shape-corner-normal - `size="normal"` 时，组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --shape-corner-large - `size="large"` 时，组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
  */
 let Fab = class Fab extends ButtonBase {
     constructor() {
         super(...arguments);
         /**
-         * FAB 形状，此组件的不同形状之间只有颜色不一样。可选值为：
+         * FAB 的形状，此组件的不同形状之间只有颜色不一样。可选值包括：
          *
          * * `primary`：使用 Primary container 背景色
          * * `surface`：使用 Surface container high 背景色
@@ -48,7 +48,7 @@ let Fab = class Fab extends ButtonBase {
          */
         this.variant = 'primary';
         /**
-         * FAB 大小。可选值为：
+         * FAB 的大小。可选值包括：
          * * `normal`：普通大小 FAB
          * * `small`：小型 FAB
          * * `large`：大型 FAB

package/components/icon/index.d.ts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import type { TemplateResult, CSSResultGroup } from 'lit';
 /**
  * @summary 图标组件
@@ -9,7 +9,7 @@ import type { TemplateResult, CSSResultGroup } from 'lit';
  *
  * @slot - `svg` 图标的内容
  */
-export declare class Icon extends LitElement {
+export declare class Icon extends MduiElement<IconEventMap> {
     static styles: CSSResultGroup;
     /**
      * Material Icons 图标名
@@ -22,6 +22,8 @@ export declare class Icon extends LitElement {
     private readonly hasSlotController;
     protected render(): TemplateResult;
 }
+export interface IconEventMap {
+}
 declare global {
     interface HTMLElementTagNameMap {
         'mdui-icon': Icon;