mdui 2.0.1 → 2.0.3

package/components/dialog/index.d.ts

@@ -1,6 +1,6 @@
-import { LitElement } from 'lit';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import '../icon.js';
-import type { CSSResultGroup, TemplateResult } from 'lit';
+import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 /**
  * @summary 对话框组件
  *
@@ -33,7 +33,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 Dialog extends LitElement {
+export declare class Dialog extends MduiElement<DialogEventMap> {
     static styles: CSSResultGroup;
     /**
      * 顶部的 Material Icons 图标名。也可以通过 `slot="icon"` 设置
@@ -83,15 +83,23 @@ export declare class Dialog extends LitElement {
     private readonly panelRef;
     private readonly bodyRef;
     private readonly hasSlotController;
+    private readonly definedController;
     private onOpenChange;
-    connectedCallback(): void;
     disconnectedCallback(): void;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
     protected render(): TemplateResult;
     private onOverlayClick;
     private renderIcon;
     private renderHeadline;
     private renderDescription;
 }
+export interface DialogEventMap {
+    open: CustomEvent<void>;
+    opened: CustomEvent<void>;
+    close: CustomEvent<void>;
+    closed: CustomEvent<void>;
+    'overlay-click': CustomEvent<void>;
+}
 declare global {
     interface HTMLElementTagNameMap {
         'mdui-dialog': Dialog;

package/components/dialog/index.js

@@ -1,14 +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';
@@ -48,7 +49,7 @@ import { style } from './style.js';
  * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
  * @cssprop --z-index - 组件的 CSS 的 `z-index` 值
  */
-export let Dialog = class Dialog extends LitElement {
+let Dialog = class Dialog extends MduiElement {
     constructor() {
         super(...arguments);
         /**
@@ -75,10 +76,17 @@ export let Dialog = class Dialog extends LitElement {
         this.panelRef = createRef();
         this.bodyRef = createRef();
         this.hasSlotController = new HasSlotController(this, 'header', 'icon', 'headline', 'description', 'action', '[default]');
+        this.definedController = new DefinedController(this, {
+            relatedElements: ['mdui-top-app-bar'],
+        });
     }
     async onOpenChange() {
-        var _a;
         const hasUpdated = this.hasUpdated;
+        // 默认为关闭状态。因此首次渲染时，且为关闭状态，不执行
+        if (!this.open && !hasUpdated) {
+            return;
+        }
+        await this.definedController.whenDefined();
         if (!hasUpdated) {
             await this.updateComplete;
         }
@@ -87,20 +95,23 @@ export let Dialog = class Dialog extends LitElement {
         const easingLinear = getEasing(this, 'linear');
         const easingEmphasizedDecelerate = getEasing(this, 'emphasized-decelerate');
         const easingEmphasizedAccelerate = getEasing(this, 'emphasized-accelerate');
+        const stopAnimation = () => Promise.all([
+            stopAnimations(this.overlayRef.value),
+            stopAnimations(this.panelRef.value),
+            ...children.map((child) => stopAnimations(child)),
+        ]);
         // 打开
         // 要区分是否首次渲染，首次渲染不触发事件，不执行动画；非首次渲染，触发事件，执行动画
         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;
                 }
             }
             this.style.display = 'flex';
             // 包含 <mdui-top-app-bar slot="header"> 时
-            const topAppBarElements = (_a = this.topAppBarElements) !== null && _a !== void 0 ? _a : [];
+            const topAppBarElements = this.topAppBarElements ?? [];
             if (topAppBarElements.length) {
                 const topAppBarElement = topAppBarElements[0];
                 // top-app-bar 未设置 scrollTarget 时，默认设置为 bodyRef
@@ -113,11 +124,7 @@ export let Dialog = class Dialog extends LitElement {
             this.originalTrigger = document.activeElement;
             this.modalHelper.activate();
             lockScreen(this);
-            await Promise.all([
-                stopAnimations(this.overlayRef.value),
-                stopAnimations(this.panelRef.value),
-                ...children.map((child) => stopAnimations(child)),
-            ]);
+            await stopAnimation();
             // 设置聚焦
             requestAnimationFrame(() => {
                 const autoFocusTarget = this.querySelector('[autofocus]');
@@ -156,23 +163,16 @@ export let Dialog = class Dialog extends LitElement {
                 })),
             ]);
             if (hasUpdated) {
-                emit(this, 'opened');
+                this.emit('opened');
             }
-            return;
         }
-        if (!this.open && hasUpdated) {
-            const requestClose = emit(this, 'close', {
-                cancelable: true,
-            });
-            if (requestClose.defaultPrevented) {
+        else {
+            const eventProceeded = this.emit('close', { cancelable: true });
+            if (!eventProceeded) {
                 return;
             }
             this.modalHelper.deactivate();
-            await Promise.all([
-                stopAnimations(this.overlayRef.value),
-                stopAnimations(this.panelRef.value),
-                ...children.map((child) => stopAnimations(child)),
-            ]);
+            await stopAnimation();
             const duration = getDuration(this, 'short4');
             await Promise.all([
                 animateTo(this.overlayRef.value, [{ opacity: 1 }, { opacity: 0 }], {
@@ -190,15 +190,18 @@ export let Dialog = class Dialog extends LitElement {
             unlockScreen(this);
             // 对话框关闭后，恢复焦点到原有的元素上
             const trigger = this.originalTrigger;
-            if (typeof (trigger === null || trigger === void 0 ? void 0 : trigger.focus) === 'function') {
+            if (typeof trigger?.focus === 'function') {
                 setTimeout(() => trigger.focus());
             }
-            emit(this, 'closed');
-            return;
+            this.emit('closed');
         }
     }
-    connectedCallback() {
-        super.connectedCallback();
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        unlockScreen(this);
+    }
+    firstUpdated(_changedProperties) {
+        super.firstUpdated(_changedProperties);
         this.modalHelper = new Modal(this);
         this.addEventListener('keydown', (event) => {
             if (this.open && this.closeOnEsc && event.key === 'Escape') {
@@ -207,10 +210,6 @@ export let Dialog = class Dialog extends LitElement {
             }
         });
     }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        unlockScreen(this);
-    }
     render() {
         const hasActionSlot = this.hasSlotController.test('action');
         const hasDefaultSlot = this.hasSlotController.test('[default]');
@@ -226,7 +225,7 @@ export 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;
         }
@@ -305,3 +304,4 @@ __decorate([
 Dialog = __decorate([
     customElement('mdui-dialog')
 ], Dialog);
+export { Dialog };

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,7 +7,7 @@ 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;
     /**
      * 是否显示垂直分割线
@@ -23,6 +23,8 @@ export declare class Divider extends LitElement {
     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,7 +12,7 @@ import { style } from './style.js';
  * <mdui-divider></mdui-divider>
  * ```
  */
-export let Divider = class Divider extends LitElement {
+let Divider = class Divider extends MduiElement {
     constructor() {
         super(...arguments);
         /**
@@ -56,3 +57,4 @@ __decorate([
 Divider = __decorate([
     customElement('mdui-divider')
 ], Divider);
+export { Divider };

package/components/dropdown/index.d.ts

@@ -1,8 +1,7 @@
-import { LitElement } from 'lit';
 import '@mdui/jq/methods/height.js';
 import '@mdui/jq/methods/is.js';
-import '@mdui/jq/methods/on.js';
 import '@mdui/jq/methods/width.js';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 /**
  * @summary 下拉组件
@@ -30,7 +29,7 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
  *
  * @cssprop --z-index - 组件的 CSS 的 `z-index` 值
  */
-export declare class Dropdown extends LitElement {
+export declare class Dropdown extends MduiElement<DropdownEventMap> {
     static styles: CSSResultGroup;
     /**
      * dropdown 是否打开
@@ -84,18 +83,19 @@ export declare class Dropdown extends LitElement {
      * 是否在触发 dropdown 时的光标所在的位置打开 dropdown。通常用于在打开鼠标右键菜单时使用
      */
     openOnPointer: boolean;
-    private readonly triggerSlots;
-    private readonly panelSlots;
+    private readonly triggerElements;
+    private readonly panelElements;
     private pointerOffsetX;
     private pointerOffsetY;
     private animateDirection;
     private openTimeout;
     private closeTimeout;
     private observeResize?;
+    private overflowAncestors?;
     private readonly panelRef;
+    private readonly definedController;
     constructor();
-    private get triggerSlot();
-    private get panelSlot();
+    private get triggerElement();
     private onPositionChange;
     private onOpenChange;
     connectedCallback(): void;
@@ -124,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,16 +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/on.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';
@@ -41,7 +43,7 @@ import { style } from './style.js';
  *
  * @cssprop --z-index - 组件的 CSS 的 `z-index` 值
  */
-export let Dropdown = class Dropdown extends LitElement {
+let Dropdown = class Dropdown extends MduiElement {
     constructor() {
         super();
         /**
@@ -97,6 +99,9 @@ export let Dropdown = class Dropdown extends LitElement {
          */
         this.openOnPointer = false;
         this.panelRef = createRef();
+        this.definedController = new DefinedController(this, {
+            relatedElements: [''],
+        });
         this.onDocumentClick = this.onDocumentClick.bind(this);
         this.onDocumentKeydown = this.onDocumentKeydown.bind(this);
         this.onWindowScroll = this.onWindowScroll.bind(this);
@@ -107,43 +112,44 @@ export let Dropdown = class Dropdown extends LitElement {
         this.onMouseEnter = this.onMouseEnter.bind(this);
         this.onPanelClick = this.onPanelClick.bind(this);
     }
-    get triggerSlot() {
-        return this.triggerSlots[0];
-    }
-    get panelSlot() {
-        return this.panelSlots[0];
+    get triggerElement() {
+        return this.triggerElements[0];
     }
     // 这些属性变更时，需要更新样式
     async onPositionChange() {
-        // 打开动画开始前，设置 panel 的样式
+        // 如果是打开状态，则更新 panel 的位置
         if (this.open) {
+            await this.definedController.whenDefined();
             this.updatePositioner();
         }
     }
     async onOpenChange() {
-        var _a, _b, _c, _d;
         const hasUpdated = this.hasUpdated;
+        // 默认为关闭状态。因此首次渲染时，且为关闭状态，不执行
+        if (!this.open && !hasUpdated) {
+            return;
+        }
+        await this.definedController.whenDefined();
+        if (!hasUpdated) {
+            await this.updateComplete;
+        }
         const easingLinear = getEasing(this, 'linear');
         const easingEmphasizedDecelerate = getEasing(this, 'emphasized-decelerate');
         const easingEmphasizedAccelerate = getEasing(this, 'emphasized-accelerate');
         // 打开
         // 要区分是否首次渲染，首次渲染时不触发事件，不执行动画；非首次渲染，触发事件，执行动画
         if (this.open) {
-            if (!hasUpdated) {
-                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;
                 }
             }
             // dropdown 打开时，尝试把焦点放到 panel 中
-            if (typeof ((_a = this.panelSlot) === null || _a === void 0 ? void 0 : _a.focus) === 'function') {
-                this.panelSlot.focus();
-            }
+            const focusablePanel = this.panelElements.find((panel) => isFunction(panel.focus));
+            setTimeout(() => {
+                focusablePanel?.focus();
+            });
             const duration = getDuration(this, 'medium4');
             await stopAnimations(this.panelRef.value);
             this.panelRef.value.hidden = false;
@@ -162,24 +168,20 @@ export let Dropdown = class Dropdown extends LitElement {
                 }),
             ]);
             if (hasUpdated) {
-                emit(this, 'opened');
+                this.emit('opened');
             }
-            return;
         }
-        // 关闭
-        if (!this.open && hasUpdated) {
-            const requestClose = emit(this, 'close', {
-                cancelable: true,
-            });
-            if (requestClose.defaultPrevented) {
+        else {
+            const eventProceeded = this.emit('close', { cancelable: true });
+            if (!eventProceeded) {
                 return;
             }
             // dropdown 关闭时，如果不支持 focus 触发，且焦点在 dropdown 内，则焦点回到 trigger 上
             if (!this.hasTrigger('focus') &&
-                typeof ((_b = this.triggerSlot) === null || _b === void 0 ? void 0 : _b.focus) === 'function' &&
+                isFunction(this.triggerElement?.focus) &&
                 (this.contains(document.activeElement) ||
-                    this.contains((_d = (_c = document.activeElement) === null || _c === void 0 ? void 0 : _c.assignedSlot) !== null && _d !== void 0 ? _d : null))) {
-                this.triggerSlot.focus();
+                    this.contains(document.activeElement?.assignedSlot ?? null))) {
+                this.triggerElement.focus();
             }
             const duration = getDuration(this, 'short4');
             await stopAnimations(this.panelRef.value);
@@ -194,40 +196,45 @@ export let Dropdown = class Dropdown extends LitElement {
             if (this.panelRef.value) {
                 this.panelRef.value.hidden = true;
             }
-            emit(this, 'closed');
+            this.emit('closed');
         }
     }
     connectedCallback() {
         super.connectedCallback();
-        document.addEventListener('pointerdown', this.onDocumentClick);
-        document.addEventListener('keydown', this.onDocumentKeydown);
-        window.addEventListener('scroll', this.onWindowScroll);
-        // triggerSlot 的尺寸变化时，重新调整 panel 的位置
-        this.updateComplete.then(() => {
-            this.observeResize = observeResize(this.triggerSlot, () => {
-                this.updatePositioner();
+        this.definedController.whenDefined().then(() => {
+            document.addEventListener('pointerdown', this.onDocumentClick);
+            document.addEventListener('keydown', this.onDocumentKeydown);
+            this.overflowAncestors = getOverflowAncestors(this.triggerElement);
+            this.overflowAncestors.forEach((ancestor) => {
+                ancestor.addEventListener('scroll', this.onWindowScroll);
             });
         });
     }
     disconnectedCallback() {
-        var _a;
         super.disconnectedCallback();
         document.removeEventListener('pointerdown', this.onDocumentClick);
         document.removeEventListener('keydown', this.onDocumentKeydown);
-        window.removeEventListener('scroll', this.onWindowScroll);
-        (_a = this.observeResize) === null || _a === void 0 ? void 0 : _a.unobserve();
+        this.overflowAncestors?.forEach((ancestor) => {
+            ancestor.removeEventListener('scroll', this.onWindowScroll);
+        });
+        this.observeResize?.unobserve();
     }
     firstUpdated(changedProperties) {
         super.firstUpdated(changedProperties);
         this.addEventListener('mouseleave', this.onMouseLeave);
-        this.triggerSlot.addEventListener('focus', this.onFocus);
-        this.triggerSlot.addEventListener('click', this.onClick);
-        this.triggerSlot.addEventListener('contextmenu', this.onContextMenu);
-        this.triggerSlot.addEventListener('mouseenter', this.onMouseEnter);
-        $(this.panelRef.value).on('click', this.onPanelClick);
+        this.definedController.whenDefined().then(() => {
+            this.triggerElement.addEventListener('focus', this.onFocus);
+            this.triggerElement.addEventListener('click', this.onClick);
+            this.triggerElement.addEventListener('contextmenu', this.onContextMenu);
+            this.triggerElement.addEventListener('mouseenter', this.onMouseEnter);
+            // triggerElement 的尺寸变化时，重新调整 panel 的位置
+            this.observeResize = observeResize(this.triggerElement, () => {
+                this.updatePositioner();
+            });
+        });
     }
     render() {
-        return html `<slot name="trigger" part="trigger" class="trigger"></slot><slot ${ref(this.panelRef)} part="panel" class="panel" hidden></slot>`;
+        return html `<slot name="trigger" part="trigger" class="trigger"></slot><slot ${ref(this.panelRef)} part="panel" class="panel" hidden @click="${this.onPanelClick}"></slot>`;
     }
     /**
      * 获取 dropdown 打开、关闭动画的 CSS scaleX 或 scaleY
@@ -250,7 +257,7 @@ export let Dropdown = class Dropdown extends LitElement {
         // 当包含 contextmenu 且不包含 click 时，点击 trigger，关闭
         if (this.hasTrigger('contextmenu') &&
             !this.hasTrigger('click') &&
-            path.includes(this.triggerSlot)) {
+            path.includes(this.triggerElement)) {
             this.open = false;
         }
     }
@@ -258,7 +265,6 @@ export let Dropdown = class Dropdown extends LitElement {
      * 在 document 上按下按键时，根据条件判断是否要关闭 dropdown
      */
     onDocumentKeydown(event) {
-        var _a;
         if (this.disabled || !this.open) {
             return;
         }
@@ -270,8 +276,7 @@ export let Dropdown = class Dropdown extends LitElement {
         // 按下 Tab 键时，关闭 dropdown
         if (event.key === 'Tab') {
             // 如果不支持 focus 触发，则焦点回到 trigger 上（这个会在 onOpenChange 中执行 ）这里只需阻止默认的 Tab 行为
-            if (!this.hasTrigger('focus') &&
-                typeof ((_a = this.triggerSlot) === null || _a === void 0 ? void 0 : _a.focus) === 'function') {
+            if (!this.hasTrigger('focus') && isFunction(this.triggerElement?.focus)) {
                 event.preventDefault();
             }
             this.open = false;
@@ -304,10 +309,9 @@ export let Dropdown = class Dropdown extends LitElement {
         this.open = !this.open;
     }
     onPanelClick(e) {
-        const event = e;
         if (!this.disabled &&
             !this.stayOpenOnClick &&
-            $(event.target).is('mdui-menu-item')) {
+            $(e.target).is('mdui-menu-item')) {
             this.open = false;
         }
     }
@@ -345,17 +349,19 @@ export let Dropdown = class Dropdown extends LitElement {
             this.open = false;
         }, this.closeDelay || 50);
     }
+    // 更新 panel 的位置
     updatePositioner() {
-        var _a;
         const $panel = $(this.panelRef.value);
         const $window = $(window);
-        const panelSlots = this.panelSlots;
+        const panelElements = this.panelElements;
         const panelRect = {
-            width: Math.max(...((_a = panelSlots === null || panelSlots === void 0 ? void 0 : panelSlots.map((panel) => panel.offsetWidth)) !== null && _a !== void 0 ? _a : [])),
-            height: panelSlots === null || panelSlots === void 0 ? void 0 : panelSlots.map((panel) => panel.offsetHeight).reduce((total, height) => total + height),
+            width: Math.max(...(panelElements?.map((panel) => panel.offsetWidth) ?? [])),
+            height: panelElements
+                ?.map((panel) => panel.offsetHeight)
+                .reduce((total, height) => total + height, 0),
         };
-        // 在光标位置触发时，假设 triggerSlot 的宽高为 0，位置位于光标位置
-        const triggerClientRect = this.triggerSlot.getBoundingClientRect();
+        // 在光标位置触发时，假设 triggerElement 的宽高为 0，位置位于光标位置
+        const triggerClientRect = this.triggerElement.getBoundingClientRect();
         const triggerRect = this.openOnPointer
             ? {
                 top: this.pointerOffsetY + triggerClientRect.top,
@@ -555,10 +561,10 @@ __decorate([
 ], Dropdown.prototype, "openOnPointer", void 0);
 __decorate([
     queryAssignedElements({ slot: 'trigger', flatten: true })
-], Dropdown.prototype, "triggerSlots", void 0);
+], Dropdown.prototype, "triggerElements", void 0);
 __decorate([
     queryAssignedElements({ flatten: true })
-], Dropdown.prototype, "panelSlots", void 0);
+], Dropdown.prototype, "panelElements", void 0);
 __decorate([
     watch('placement', true),
     watch('openOnPointer', true)
@@ -569,3 +575,4 @@ __decorate([
 Dropdown = __decorate([
     customElement('mdui-dropdown')
 ], Dropdown);
+export { Dropdown };

package/components/fab/index.d.ts

@@ -25,7 +25,7 @@ import type { TemplateResult, CSSResultGroup } from 'lit';
  * @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 形状，此组件的不同形状之间只有颜色不一样。可选值为：
@@ -53,6 +53,7 @@ export declare class Fab extends ButtonBase {
     extended: boolean;
     private readonly rippleRef;
     private readonly hasSlotController;
+    private readonly definedController;
     protected get rippleElement(): Ripple;
     /**
      * extended 变更时，设置动画
@@ -63,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;