mdui 1.0.2 → 2.0.1

package/components/dialog/index.js

@@ -0,0 +1,307 @@
+import { __decorate } from "tslib";
+import { html, LitElement } 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 { 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';
+import { nothingTemplate } from '@mdui/shared/helpers/template.js';
+import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
+import '../icon.js';
+import { style } from './style.js';
+/**
+ * @summary 对话框组件
+ *
+ * ```html
+ * <mdui-dialog>content</mdui-dialog>
+ * ```
+ *
+ * @event open - 在对话框打开之前触发。可以通过调用 `event.preventDefault()` 阻止对话框打开
+ * @event opened - 在对话框打开之后触发
+ * @event close - 在对话框关闭之前触发。可以通过调用 `event.preventDefault()` 阻止对话框关闭
+ * @event closed - 在对话框关闭之后触发
+ * @event overlay-click - 点击遮罩层时触发
+ *
+ * @slot header - 顶部元素，默认包含 `icon` slot 和 `headline` slot
+ * @slot icon - 顶部图标
+ * @slot headline - 顶部标题
+ * @slot description - 标题下方的文本
+ * @slot - 对话框主体内容
+ * @slot action - 底部操作栏中的元素
+ *
+ * @csspart overlay - 遮罩层
+ * @csspart panel - 对话框容器
+ * @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` 值
+ */
+export let Dialog = class Dialog extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * 是否打开对话框
+         */
+        this.open = false;
+        /**
+         * 是否为全屏对话框
+         */
+        this.fullscreen = false;
+        /**
+         * 是否在按下 ESC 键时，关闭对话框
+         */
+        this.closeOnEsc = false;
+        /**
+         * 是否在点击遮罩时，关闭对话框
+         */
+        this.closeOnOverlayClick = false;
+        /**
+         * 是否垂直排列底部操作按钮
+         */
+        this.stackedActions = false;
+        this.overlayRef = createRef();
+        this.panelRef = createRef();
+        this.bodyRef = createRef();
+        this.hasSlotController = new HasSlotController(this, 'header', 'icon', 'headline', 'description', 'action', '[default]');
+    }
+    async onOpenChange() {
+        var _a;
+        const hasUpdated = this.hasUpdated;
+        if (!hasUpdated) {
+            await this.updateComplete;
+        }
+        // 内部的 header, body, actions 元素
+        const children = Array.from(this.panelRef.value.querySelectorAll('.header, .body, .actions'));
+        const easingLinear = getEasing(this, 'linear');
+        const easingEmphasizedDecelerate = getEasing(this, 'emphasized-decelerate');
+        const easingEmphasizedAccelerate = getEasing(this, 'emphasized-accelerate');
+        // 打开
+        // 要区分是否首次渲染，首次渲染不触发事件，不执行动画；非首次渲染，触发事件，执行动画
+        if (this.open) {
+            if (hasUpdated) {
+                const requestOpen = emit(this, 'open', {
+                    cancelable: true,
+                });
+                if (requestOpen.defaultPrevented) {
+                    return;
+                }
+            }
+            this.style.display = 'flex';
+            // 包含 <mdui-top-app-bar slot="header"> 时
+            const topAppBarElements = (_a = this.topAppBarElements) !== null && _a !== void 0 ? _a : [];
+            if (topAppBarElements.length) {
+                const topAppBarElement = topAppBarElements[0];
+                // top-app-bar 未设置 scrollTarget 时，默认设置为 bodyRef
+                if (!topAppBarElement.scrollTarget) {
+                    topAppBarElement.scrollTarget = this.bodyRef.value;
+                }
+                // 移除 header 和 body 之间的 margin
+                this.bodyRef.value.style.marginTop = '0';
+            }
+            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)),
+            ]);
+            // 设置聚焦
+            requestAnimationFrame(() => {
+                const autoFocusTarget = this.querySelector('[autofocus]');
+                if (autoFocusTarget) {
+                    autoFocusTarget.focus({ preventScroll: true });
+                }
+                else {
+                    this.panelRef.value.focus({ preventScroll: true });
+                }
+            });
+            const duration = getDuration(this, 'medium4');
+            await Promise.all([
+                animateTo(this.overlayRef.value, [{ opacity: 0 }, { opacity: 1, offset: 0.3 }, { opacity: 1 }], {
+                    duration: hasUpdated ? duration : 0,
+                    easing: easingLinear,
+                }),
+                animateTo(this.panelRef.value, [
+                    { transform: 'translateY(-1.875rem) scaleY(0)' },
+                    { transform: 'translateY(0) scaleY(1)' },
+                ], {
+                    duration: hasUpdated ? duration : 0,
+                    easing: easingEmphasizedDecelerate,
+                }),
+                animateTo(this.panelRef.value, [{ opacity: 0 }, { opacity: 1, offset: 0.1 }, { opacity: 1 }], {
+                    duration: hasUpdated ? duration : 0,
+                    easing: easingLinear,
+                }),
+                ...children.map((child) => animateTo(child, [
+                    { opacity: 0 },
+                    { opacity: 0, offset: 0.2 },
+                    { opacity: 1, offset: 0.8 },
+                    { opacity: 1 },
+                ], {
+                    duration: hasUpdated ? duration : 0,
+                    easing: easingLinear,
+                })),
+            ]);
+            if (hasUpdated) {
+                emit(this, 'opened');
+            }
+            return;
+        }
+        if (!this.open && hasUpdated) {
+            const requestClose = emit(this, 'close', {
+                cancelable: true,
+            });
+            if (requestClose.defaultPrevented) {
+                return;
+            }
+            this.modalHelper.deactivate();
+            await Promise.all([
+                stopAnimations(this.overlayRef.value),
+                stopAnimations(this.panelRef.value),
+                ...children.map((child) => stopAnimations(child)),
+            ]);
+            const duration = getDuration(this, 'short4');
+            await Promise.all([
+                animateTo(this.overlayRef.value, [{ opacity: 1 }, { opacity: 0 }], {
+                    duration,
+                    easing: easingLinear,
+                }),
+                animateTo(this.panelRef.value, [
+                    { transform: 'translateY(0) scaleY(1)' },
+                    { transform: 'translateY(-1.875rem) scaleY(0.6)' },
+                ], { duration, easing: easingEmphasizedAccelerate }),
+                animateTo(this.panelRef.value, [{ opacity: 1 }, { opacity: 1, offset: 0.75 }, { opacity: 0 }], { duration, easing: easingLinear }),
+                ...children.map((child) => animateTo(child, [{ opacity: 1 }, { opacity: 0, offset: 0.75 }, { opacity: 0 }], { duration, easing: easingLinear })),
+            ]);
+            this.style.display = 'none';
+            unlockScreen(this);
+            // 对话框关闭后，恢复焦点到原有的元素上
+            const trigger = this.originalTrigger;
+            if (typeof (trigger === null || trigger === void 0 ? void 0 : trigger.focus) === 'function') {
+                setTimeout(() => trigger.focus());
+            }
+            emit(this, 'closed');
+            return;
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.modalHelper = new Modal(this);
+        this.addEventListener('keydown', (event) => {
+            if (this.open && this.closeOnEsc && event.key === 'Escape') {
+                event.stopPropagation();
+                this.open = false;
+            }
+        });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        unlockScreen(this);
+    }
+    render() {
+        const hasActionSlot = this.hasSlotController.test('action');
+        const hasDefaultSlot = this.hasSlotController.test('[default]');
+        const hasIcon = !!this.icon || this.hasSlotController.test('icon');
+        const hasHeadline = !!this.headline || this.hasSlotController.test('headline');
+        const hasDescription = !!this.description || this.hasSlotController.test('description');
+        const hasHeader = hasIcon || hasHeadline || this.hasSlotController.test('header');
+        const hasBody = hasDescription || hasDefaultSlot;
+        return html `<div ${ref(this.overlayRef)} part="overlay" class="overlay" @click="${this.onOverlayClick}" tabindex="-1"></div><div ${ref(this.panelRef)} part="panel" class="panel ${classMap({
+            'has-icon': hasIcon,
+            'has-description': hasDescription,
+            'has-default': hasDefaultSlot,
+        })}" 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');
+        if (!this.closeOnOverlayClick) {
+            return;
+        }
+        this.open = false;
+    }
+    renderIcon() {
+        return html `<slot name="icon" part="icon" class="icon">${this.icon
+            ? html `<mdui-icon name="${this.icon}"></mdui-icon>`
+            : nothingTemplate}</slot>`;
+    }
+    renderHeadline() {
+        return html `<slot name="headline" part="headline" class="headline">${this.headline}</slot>`;
+    }
+    renderDescription() {
+        return html `<slot name="description" part="description" class="description">${this.description}</slot>`;
+    }
+};
+Dialog.styles = [componentStyle, style];
+__decorate([
+    property({ reflect: true })
+], Dialog.prototype, "icon", void 0);
+__decorate([
+    property({ reflect: true })
+], Dialog.prototype, "headline", void 0);
+__decorate([
+    property({ reflect: true })
+], Dialog.prototype, "description", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+    })
+], Dialog.prototype, "open", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+    })
+], Dialog.prototype, "fullscreen", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+        attribute: 'close-on-esc',
+    })
+], Dialog.prototype, "closeOnEsc", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+        attribute: 'close-on-overlay-click',
+    })
+], Dialog.prototype, "closeOnOverlayClick", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+        attribute: 'stacked-actions',
+    })
+], Dialog.prototype, "stackedActions", void 0);
+__decorate([
+    queryAssignedElements({
+        slot: 'header',
+        selector: 'mdui-top-app-bar',
+        flatten: true,
+    })
+], Dialog.prototype, "topAppBarElements", void 0);
+__decorate([
+    watch('open')
+], Dialog.prototype, "onOpenChange", null);
+Dialog = __decorate([
+    customElement('mdui-dialog')
+], Dialog);

package/components/dialog/style.d.ts

@@ -0,0 +1 @@
+export declare const style: import("lit").CSSResult;

package/components/dialog/style.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const style = css `:host{--shape-corner:var(--mdui-shape-corner-extra-large);--z-index:2300;position:fixed;z-index:var(--z-index);display:none;align-items:center;justify-content:center;inset:0;padding:3rem}::slotted(mdui-top-app-bar[slot=header]){position:absolute;border-top-left-radius:var(--mdui-shape-corner-extra-large);border-top-right-radius:var(--mdui-shape-corner-extra-large);background-color:rgb(var(--mdui-color-surface-container-high))}:host([fullscreen]){--shape-corner:var(--mdui-shape-corner-none);padding:0}:host([fullscreen]) ::slotted(mdui-top-app-bar[slot=header]){border-top-left-radius:var(--mdui-shape-corner-none);border-top-right-radius:var(--mdui-shape-corner-none)}.overlay{position:fixed;inset:0;background-color:rgba(var(--mdui-color-scrim),.4)}.panel{position:relative;display:flex;flex-direction:column;max-height:100%;border-radius:var(--shape-corner);outline:0;transform-origin:top;min-width:17.5rem;max-width:35rem;padding:1.5rem;background-color:rgb(var(--mdui-color-surface-container-high));box-shadow:var(--mdui-elevation-level3)}:host([fullscreen]) .panel{width:100%;max-width:100%;height:100%;max-height:100%;box-shadow:var(--mdui-elevation-level0)}.header{display:flex;flex-direction:column}.has-icon .header{align-items:center}.icon{display:flex;color:rgb(var(--mdui-color-secondary));font-size:1.5rem}.icon mdui-icon,::slotted([slot=icon]){font-size:inherit}.headline{display:flex;color:rgb(var(--mdui-color-on-surface));font-size:var(--mdui-typescale-headline-small-size);font-weight:var(--mdui-typescale-headline-small-weight);letter-spacing:var(--mdui-typescale-headline-small-tracking);line-height:var(--mdui-typescale-headline-small-line-height)}.icon+.headline{padding-top:1rem}.body{overflow:auto}.header+.body{margin-top:1rem}.description{display:flex;color:rgb(var(--mdui-color-on-surface-variant));font-size:var(--mdui-typescale-body-medium-size);font-weight:var(--mdui-typescale-body-medium-weight);letter-spacing:var(--mdui-typescale-body-medium-tracking);line-height:var(--mdui-typescale-body-medium-line-height)}:host([fullscreen]) .description{color:rgb(var(--mdui-color-on-surface))}.has-description.has-default .description{margin-bottom:1rem}.action{display:flex;justify-content:flex-end;padding-top:1.5rem}.action::slotted(:not(:first-child)){margin-left:.5rem}:host([stacked-actions]) .action{flex-direction:column;align-items:end}:host([stacked-actions]) .action::slotted(:not(:first-child)){margin-left:0;margin-top:.5rem}`;

package/components/dialog.d.ts

@@ -0,0 +1 @@
+export * from './dialog/index.js';

package/components/dialog.js

@@ -0,0 +1 @@
+export * from './dialog/index.js';

package/components/divider/index.d.ts

@@ -0,0 +1,30 @@
+import { LitElement } from 'lit';
+import type { CSSResultGroup, TemplateResult } from 'lit';
+/**
+ * @summary 分割线组件
+ *
+ * ```html
+ * <mdui-divider></mdui-divider>
+ * ```
+ */
+export declare class Divider extends LitElement {
+    static styles: CSSResultGroup;
+    /**
+     * 是否显示垂直分割线
+     */
+    vertical: boolean;
+    /**
+     * 是否左侧缩进
+     */
+    inset: boolean;
+    /**
+     * 是否左右两侧缩进
+     */
+    middle: boolean;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mdui-divider': Divider;
+    }
+}

package/components/divider/index.js

@@ -0,0 +1,58 @@
+import { __decorate } from "tslib";
+import { html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { booleanConverter } from '@mdui/shared/helpers/decorator.js';
+import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
+import { style } from './style.js';
+/**
+ * @summary 分割线组件
+ *
+ * ```html
+ * <mdui-divider></mdui-divider>
+ * ```
+ */
+export let Divider = class Divider extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * 是否显示垂直分割线
+         */
+        this.vertical = false;
+        /**
+         * 是否左侧缩进
+         */
+        this.inset = false;
+        /**
+         * 是否左右两侧缩进
+         */
+        this.middle = false;
+    }
+    render() {
+        return html ``;
+    }
+};
+Divider.styles = [componentStyle, style];
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+    })
+], Divider.prototype, "vertical", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+    })
+], Divider.prototype, "inset", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+    })
+], Divider.prototype, "middle", void 0);
+Divider = __decorate([
+    customElement('mdui-divider')
+], Divider);

package/components/divider/style.d.ts

@@ -0,0 +1 @@
+export declare const style: import("lit").CSSResult;

package/components/divider/style.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const style = css `:host{display:block;height:.0625rem;background-color:rgb(var(--mdui-color-surface-variant))}:host([inset]){margin-left:1rem}:host([middle]){margin-left:1rem;margin-right:1rem}:host([vertical]){height:100%;width:.0625rem}`;

package/components/divider.d.ts

@@ -0,0 +1 @@
+export * from './divider/index.js';

package/components/divider.js

@@ -0,0 +1 @@
+export * from './divider/index.js';

package/components/dropdown/index.d.ts

@@ -0,0 +1,131 @@
+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 type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
+/**
+ * @summary 下拉组件
+ *
+ * ```html
+ * <mdui-dropdown>
+ * ..<mdui-button slot="trigger">open dropdown</mdui-button>
+ * ..<mdui-menu>
+ * ....<mdui-menu-item>Item 1</mdui-menu-item>
+ * ....<mdui-menu-item>Item 2</mdui-menu-item>
+ * ..</mdui-menu>
+ * </mdui-dropdown>
+ * ```
+ *
+ * @event open - dropdown 开始打开时，事件被触发。可以通过调用 `event.preventDefault()` 阻止 dropdown 打开
+ * @event opened - dropdown 打开动画完成时，事件被触发
+ * @event close - dropdown 开始关闭时，事件被触发。可以通过调用 `event.preventDefault()` 阻止 dropdown 关闭
+ * @event closed - dropdown 关闭动画完成时，事件被触发
+ *
+ * @slot - dropdown 的内容
+ * @slot trigger - 触发 dropdown 的元素，例如 [`<mdui-button>`](/docs/2/components/button) 元素
+ *
+ * @csspart trigger - 触发 dropdown 的元素的容器，即 `trigger` slot 的容器
+ * @csspart panel - dropdown 内容的容器
+ *
+ * @cssprop --z-index - 组件的 CSS 的 `z-index` 值
+ */
+export declare class Dropdown extends LitElement {
+    static styles: CSSResultGroup;
+    /**
+     * dropdown 是否打开
+     */
+    open: boolean;
+    /**
+     * 是否禁用 dropdown
+     */
+    disabled: boolean;
+    /**
+     * dropdown 的触发方式，支持传入多个值，用空格分隔。可选值为：
+     *
+     * * `click`：点击时触发
+     * * `hover`：鼠标悬浮触发
+     * * `focus`：聚焦时触发
+     * * `contextmenu`：鼠标右键点击、或触摸长按时触发
+     * * `manual`：使用了该值时，只能使用编程方式打开和关闭 dropdown，且不能再指定其他触发方式
+     */
+    trigger: /*点击时触发*/ 'click' | /*鼠标悬浮触发*/ 'hover' | /*聚焦时触发*/ 'focus' | /*鼠标右键点击、或触摸长按时触发*/ 'contextmenu' | /*使用了该值时，只能使用编程方式打开和关闭 dropdown，且不能再指定其他触发方式*/ 'manual' | string;
+    /**
+     * dropdown 内容的位置。可选值为：
+     *
+     * * `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 为打开状态
+     */
+    stayOpenOnClick: boolean;
+    /**
+     * 通过 hover 触发 dropdown 打开时的延时，单位为毫秒
+     */
+    openDelay: number;
+    /**
+     * 通过 hover 触发 dropdown 关闭时的延时，单位为毫秒
+     */
+    closeDelay: number;
+    /**
+     * 是否在触发 dropdown 时的光标所在的位置打开 dropdown。通常用于在打开鼠标右键菜单时使用
+     */
+    openOnPointer: boolean;
+    private readonly triggerSlots;
+    private readonly panelSlots;
+    private pointerOffsetX;
+    private pointerOffsetY;
+    private animateDirection;
+    private openTimeout;
+    private closeTimeout;
+    private observeResize?;
+    private readonly panelRef;
+    constructor();
+    private get triggerSlot();
+    private get panelSlot();
+    private onPositionChange;
+    private onOpenChange;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected firstUpdated(changedProperties: PropertyValues): void;
+    protected render(): TemplateResult;
+    /**
+     * 获取 dropdown 打开、关闭动画的 CSS scaleX 或 scaleY
+     */
+    private getCssScaleName;
+    /**
+     * 在 document 上点击时，根据条件判断是否要关闭 dropdown
+     */
+    private onDocumentClick;
+    /**
+     * 在 document 上按下按键时，根据条件判断是否要关闭 dropdown
+     */
+    private onDocumentKeydown;
+    private onWindowScroll;
+    private hasTrigger;
+    private onFocus;
+    private onClick;
+    private onPanelClick;
+    private onContextMenu;
+    private onMouseEnter;
+    private onMouseLeave;
+    private updatePositioner;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mdui-dropdown': Dropdown;
+    }
+}