mdui 2.0.2 → 2.0.3

package/components/collapse/collapse.js

@@ -1,14 +1,14 @@
 import { __decorate } from "tslib";
-import { html, LitElement } from 'lit';
+import { html } from 'lit';
 import { customElement, property, queryAssignedElements, state, } from 'lit/decorators.js';
 import { $ } from '@mdui/jq/$.js';
 import '@mdui/jq/methods/is.js';
 import { isElement, isUndefined } from '@mdui/jq/shared/helper.js';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import { DefinedController } from '@mdui/shared/controllers/defined.js';
 import { watch } from '@mdui/shared/decorators/watch.js';
 import { arraysEqualIgnoreOrder } from '@mdui/shared/helpers/array.js';
 import { booleanConverter } from '@mdui/shared/helpers/decorator.js';
-import { emit } from '@mdui/shared/helpers/event.js';
 import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
 import { collapseStyle } from './collapse-style.js';
 /**
@@ -25,7 +25,7 @@ import { collapseStyle } from './collapse-style.js';
  *
  * @slot - `<mdui-collapse-item>` 组件
  */
-let Collapse = class Collapse extends LitElement {
+let Collapse = class Collapse extends MduiElement {
     constructor() {
         super(...arguments);
         /**
@@ -54,7 +54,7 @@ let Collapse = class Collapse extends LitElement {
                 .map((item) => item.value);
         this.setValue(value);
         if (!this.isInitial) {
-            emit(this, 'change');
+            this.emit('change');
         }
     }
     async onValueChange() {
@@ -109,10 +109,10 @@ let Collapse = class Collapse extends LitElement {
         if (event.button) {
             return;
         }
-        // collapse-item 被禁用，忽略
         const target = event.target;
         const item = target.closest('mdui-collapse-item');
-        if (item.disabled) {
+        // collapse-item 被禁用，忽略
+        if (!item || item.disabled) {
             return;
         }
         const path = event.composedPath();

package/components/dialog/index.d.ts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import '../icon.js';
 import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 /**
@@ -33,7 +33,7 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
  * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
  * @cssprop --z-index - 组件的 CSS 的 `z-index` 值
  */
-export declare class Dialog extends LitElement {
+export declare class Dialog extends MduiElement<DialogEventMap> {
     static styles: CSSResultGroup;
     /**
      * 顶部的 Material Icons 图标名。也可以通过 `slot="icon"` 设置
@@ -93,6 +93,13 @@ export declare class Dialog extends LitElement {
     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,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';
@@ -49,7 +49,7 @@ import { style } from './style.js';
  * @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);
         /**
@@ -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,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>
  * ```
  */
-let Divider = class Divider extends LitElement {
+let Divider = class Divider extends MduiElement {
     constructor() {
         super(...arguments);
         /**

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 下拉组件
@@ -29,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 是否打开
@@ -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';
@@ -42,7 +43,7 @@ import { style } from './style.js';
  *
  * @cssprop --z-index - 组件的 CSS 的 `z-index` 值
  */
-let Dropdown = class Dropdown extends LitElement {
+let Dropdown = class Dropdown extends MduiElement {
     constructor() {
         super();
         /**
@@ -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

@@ -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 形状，此组件的不同形状之间只有颜色不一样。可选值为：
@@ -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/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;

package/components/icon/index.js

@@ -1,10 +1,11 @@
 import { __decorate } from "tslib";
-import { html, LitElement } from 'lit';
+import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import { until } from 'lit/directives/until.js';
 import { ajax } from '@mdui/jq/functions/ajax.js';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import { HasSlotController } from '@mdui/shared/controllers/has-slot.js';
 import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
 import { style } from './style.js';
@@ -17,7 +18,7 @@ import { style } from './style.js';
  *
  * @slot - `svg` 图标的内容
  */
-let Icon = class Icon extends LitElement {
+let Icon = class Icon extends MduiElement {
     constructor() {
         super(...arguments);
         this.hasSlotController = new HasSlotController(this, '[default]');

package/components/layout/layout-item-base.d.ts

@@ -1,6 +1,7 @@
-import { LitElement } from 'lit';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import type { LayoutManager, LayoutPlacement } from './helper.js';
-export declare class LayoutItemBase extends LitElement {
+import type { PlainObject } from '@mdui/jq/shared/helper.js';
+export declare class LayoutItemBase<E = PlainObject> extends MduiElement<E> {
     /**
      * 该组件在 [`<mdui-layout>`](/docs/2/components/layout) 中的布局顺序，按从小到大排序。默认为 `0`
      */

package/components/layout/layout-item-base.js

@@ -1,10 +1,10 @@
 import { __decorate } from "tslib";
-import { LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 import { isNodeName } from '@mdui/jq/shared/helper.js';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import { watch } from '@mdui/shared/decorators/watch.js';
 import { getLayout } from './helper.js';
-export class LayoutItemBase extends LitElement {
+export class LayoutItemBase extends MduiElement {
     constructor() {
         super(...arguments);
         // 父元素是否是 `mdui-layout`

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

@@ -1,7 +1,6 @@
-import { CSSResultGroup } from 'lit';
 import { LayoutItemBase } from './layout-item-base.js';
 import type { LayoutPlacement } from './helper.js';
-import type { TemplateResult } from 'lit';
+import type { CSSResultGroup, TemplateResult } from 'lit';
 /**
  * @summary 布局项组件
  *
@@ -15,7 +14,7 @@ import type { TemplateResult } from 'lit';
  *
  * @slot - 可以是任意内容
  */
-export declare class LayoutItem extends LayoutItemBase {
+export declare class LayoutItem extends LayoutItemBase<LayoutItemEventMap> {
     static styles: CSSResultGroup;
     /**
      * 该组件所处位置。可选值为：
@@ -30,6 +29,8 @@ export declare class LayoutItem extends LayoutItemBase {
     private onPlacementChange;
     protected render(): TemplateResult;
 }
+export interface LayoutItemEventMap {
+}
 declare global {
     interface HTMLElementTagNameMap {
         'mdui-layout-item': LayoutItem;

package/components/layout/layout-main.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 布局主内容组件
@@ -13,13 +13,15 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
  *
  * @slot - 可以是任意内容
  */
-export declare class LayoutMain extends LitElement {
+export declare class LayoutMain extends MduiElement<LayoutMainEventMap> {
     static styles: CSSResultGroup;
     private layoutManager?;
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected render(): TemplateResult;
 }
+export interface LayoutMainEventMap {
+}
 declare global {
     interface HTMLElementTagNameMap {
         'mdui-layout-main': LayoutMain;

package/components/layout/layout-main.js

@@ -1,7 +1,8 @@
 import { __decorate } from "tslib";
-import { html, LitElement } from 'lit';
+import { html } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import { isNodeName } from '@mdui/jq/shared/helper.js';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
 import { getLayout } from './helper.js';
 import { layoutMainStyle } from './layout-main-style.js';
@@ -18,7 +19,7 @@ import { layoutMainStyle } from './layout-main-style.js';
  *
  * @slot - 可以是任意内容
  */
-let LayoutMain = class LayoutMain extends LitElement {
+let LayoutMain = class LayoutMain extends MduiElement {
     connectedCallback() {
         super.connectedCallback();
         const parentElement = this.parentElement;

package/components/layout/layout.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 布局组件
@@ -13,7 +13,7 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
  *
  * @slot - 可以是 [`<mdui-top-app-bar>`](/docs/2/components/top-app-bar)、[`<mdui-bottom-app-bar>`](/docs/2/components/bottom-app-bar)、[`<mdui-navigation-bar>`](/docs/2/components/navigation-bar)、[`<mdui-navigation-drawer>`](/docs/2/components/navigation-drawer)、[`<mdui-navigation-rail>`](/docs/2/components/navigation-rail)、`<mdui-layout-item>`、`<mdui-layout-main>` 元素
  */
-export declare class Layout extends LitElement {
+export declare class Layout extends MduiElement<LayoutEventMap> {
     static styles: CSSResultGroup;
     /**
      * 把当前布局的高度设为 100%
@@ -21,6 +21,8 @@ export declare class Layout extends LitElement {
     fullHeight: boolean;
     protected render(): TemplateResult;
 }
+export interface LayoutEventMap {
+}
 declare global {
     interface HTMLElementTagNameMap {
         'mdui-layout': Layout;

package/components/layout/layout.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 { layoutStyle } from './layout-style.js';
@@ -17,7 +18,7 @@ import { layoutStyle } from './layout-style.js';
  *
  * @slot - 可以是 [`<mdui-top-app-bar>`](/docs/2/components/top-app-bar)、[`<mdui-bottom-app-bar>`](/docs/2/components/bottom-app-bar)、[`<mdui-navigation-bar>`](/docs/2/components/navigation-bar)、[`<mdui-navigation-drawer>`](/docs/2/components/navigation-drawer)、[`<mdui-navigation-rail>`](/docs/2/components/navigation-rail)、`<mdui-layout-item>`、`<mdui-layout-main>` 元素
  */
-let Layout = class Layout extends LitElement {
+let Layout = class Layout extends MduiElement {
     constructor() {
         super(...arguments);
         /**

package/components/linear-progress/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 线性进度指示器组件
@@ -11,7 +11,7 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
  *
  * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
  */
-export declare class LinearProgress extends LitElement {
+export declare class LinearProgress extends MduiElement<LinearProgressEventMap> {
     static styles: CSSResultGroup;
     /**
      * 进度指示器的最大值，默认为 1
@@ -23,6 +23,8 @@ export declare class LinearProgress extends LitElement {
     value?: number;
     protected render(): TemplateResult;
 }
+export interface LinearProgressEventMap {
+}
 declare global {
     interface HTMLElementTagNameMap {
         'mdui-linear-progress': LinearProgress;

package/components/linear-progress/index.js

@@ -1,8 +1,9 @@
 import { __decorate } from "tslib";
-import { html, LitElement } from 'lit';
+import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { isUndefined } from '@mdui/jq/shared/helper.js';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
 import { style } from './style.js';
 /**
@@ -16,7 +17,7 @@ import { style } from './style.js';
  *
  * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
  */
-let LinearProgress = class LinearProgress extends LitElement {
+let LinearProgress = class LinearProgress extends MduiElement {
     constructor() {
         super(...arguments);
         /**

package/components/list/list-item-style.js

@@ -1,4 +1,4 @@
 import { css } from 'lit';
 export const listItemStyle = css `:host{--shape-corner:var(--mdui-shape-corner-none);--shape-corner-rounded:var(--mdui-shape-corner-extra-large);position:relative;display:block;border-radius:var(--shape-corner);--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-surface)}:host([rounded]),:host([rounded]) mdui-ripple{border-radius:var(--shape-corner-rounded)}:host([active]){background-color:rgb(var(--mdui-color-secondary-container));--mdui-comp-ripple-state-layer-color:var(
       --mdui-color-on-secondary-container
-    )}:host([disabled]){pointer-events:none}.container{cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}:host([disabled]) .container{cursor:default;opacity:.38}:host([nonclickable]:not([href])) .container{cursor:auto;-webkit-user-select:auto;user-select:auto}.preset{display:flex;align-items:center;text-decoration:none;padding:.5rem 1.5rem .5rem 1rem;min-height:3.5rem}:host([alignment=start]) .preset{align-items:flex-start}:host([alignment=end]) .preset{align-items:flex-end}.body{display:flex;flex:1 1 100%;flex-direction:column;justify-content:center;min-width:0}.headline{display:block;color:rgb(var(--mdui-color-on-surface));font-size:var(--mdui-typescale-body-large-size);font-weight:var(--mdui-typescale-body-large-weight);letter-spacing:var(--mdui-typescale-body-large-tracking);line-height:var(--mdui-typescale-body-large-line-height)}:host([active]) .headline{color:rgb(var(--mdui-color-on-secondary-container))}.description{display:none;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([disabled]) .description,:host([focused]) .description,:host([hover]) .description,:host([pressed]) .description{color:rgb(var(--mdui-color-on-surface))}.has-description .description{display:block}:host([description-line='1']) .description,:host([headline-line='1']) .headline{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host([description-line='2']) .description,:host([description-line='3']) .description,:host([headline-line='2']) .headline,:host([headline-line='3']) .headline{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-box-orient:vertical}:host([description-line='2']) .description,:host([headline-line='2']) .headline{-webkit-line-clamp:2}:host([description-line='3']) .description,:host([headline-line='3']) .headline{-webkit-line-clamp:3}.end-icon,.icon{display:flex;flex:0 0 auto;font-size:var(--mdui-typescale-label-small-size);font-weight:var(--mdui-typescale-label-small-weight);letter-spacing:var(--mdui-typescale-label-small-tracking);line-height:var(--mdui-typescale-label-small-line-height);color:rgb(var(--mdui-color-on-surface-variant))}:host([disabled]) .end-icon,:host([disabled]) .icon,:host([focused]) .end-icon,:host([focused]) .icon,:host([hover]) .end-icon,:host([hover]) .icon,:host([pressed]) .end-icon,:host([pressed]) .icon{color:rgb(var(--mdui-color-on-surface))}:host([active]) .end-icon,:host([active]) .icon{color:rgb(var(--mdui-color-on-secondary-container))}.end-icon mdui-icon,.icon mdui-icon,.is-end-icon ::slotted([slot=end-icon]),.is-icon ::slotted([slot=icon]){font-size:1.5rem}.has-icon .icon{margin-right:1rem}.has-icon ::slotted(mdui-checkbox[slot=icon]),.has-icon ::slotted(mdui-radio[slot=icon]){margin-left:-.5rem}.has-end-icon .end-icon{margin-left:1rem}.has-end-icon ::slotted(mdui-checkbox[slot=end-icon]),.has-end-icon ::slotted(mdui-radio[slot=end-icon]){margin-right:-.5rem}`;
+    )}:host([disabled]){pointer-events:none}.container{cursor:pointer;-webkit-user-select:none;user-select:none;text-decoration:none;color:inherit;-webkit-tap-highlight-color:transparent}:host([disabled]) .container{cursor:default;opacity:.38}:host([nonclickable]:not([href])) .container{cursor:auto;-webkit-user-select:auto;user-select:auto}.preset{display:flex;align-items:center;padding:.5rem 1.5rem .5rem 1rem;min-height:3.5rem}:host([alignment=start]) .preset{align-items:flex-start}:host([alignment=end]) .preset{align-items:flex-end}.body{display:flex;flex:1 1 100%;flex-direction:column;justify-content:center;min-width:0}.headline{display:block;color:rgb(var(--mdui-color-on-surface));font-size:var(--mdui-typescale-body-large-size);font-weight:var(--mdui-typescale-body-large-weight);letter-spacing:var(--mdui-typescale-body-large-tracking);line-height:var(--mdui-typescale-body-large-line-height)}:host([active]) .headline{color:rgb(var(--mdui-color-on-secondary-container))}.description{display:none;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([disabled]) .description,:host([focused]) .description,:host([hover]) .description,:host([pressed]) .description{color:rgb(var(--mdui-color-on-surface))}.has-description .description{display:block}:host([description-line='1']) .description,:host([headline-line='1']) .headline{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host([description-line='2']) .description,:host([description-line='3']) .description,:host([headline-line='2']) .headline,:host([headline-line='3']) .headline{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-box-orient:vertical}:host([description-line='2']) .description,:host([headline-line='2']) .headline{-webkit-line-clamp:2}:host([description-line='3']) .description,:host([headline-line='3']) .headline{-webkit-line-clamp:3}.end-icon,.icon{display:flex;flex:0 0 auto;font-size:var(--mdui-typescale-label-small-size);font-weight:var(--mdui-typescale-label-small-weight);letter-spacing:var(--mdui-typescale-label-small-tracking);line-height:var(--mdui-typescale-label-small-line-height);color:rgb(var(--mdui-color-on-surface-variant))}:host([disabled]) .end-icon,:host([disabled]) .icon,:host([focused]) .end-icon,:host([focused]) .icon,:host([hover]) .end-icon,:host([hover]) .icon,:host([pressed]) .end-icon,:host([pressed]) .icon{color:rgb(var(--mdui-color-on-surface))}:host([active]) .end-icon,:host([active]) .icon{color:rgb(var(--mdui-color-on-secondary-container))}.end-icon mdui-icon,.icon mdui-icon,.is-end-icon ::slotted([slot=end-icon]),.is-icon ::slotted([slot=icon]){font-size:1.5rem}.has-icon .icon{margin-right:1rem}.has-icon ::slotted(mdui-checkbox[slot=icon]),.has-icon ::slotted(mdui-radio[slot=icon]){margin-left:-.5rem}.has-end-icon .end-icon{margin-left:1rem}.has-end-icon ::slotted(mdui-checkbox[slot=end-icon]),.has-end-icon ::slotted(mdui-radio[slot=end-icon]){margin-right:-.5rem}`;

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

@@ -1,8 +1,8 @@
-import { LitElement } from 'lit';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import '../icon.js';
 import type { Ripple } from '../ripple/index.js';
 import type { CSSResultGroup, TemplateResult } from 'lit';
-declare const ListItem_base: import("@open-wc/dedupe-mixin").Constructor<import("@mdui/shared/mixins/anchor.js").AnchorMixinInterface> & import("@open-wc/dedupe-mixin").Constructor<import("../ripple/ripple-mixin.js").RippleMixinInterface> & import("@open-wc/dedupe-mixin").Constructor<import("@mdui/shared/mixins/focusable.js").FocusableMixinInterface> & typeof LitElement;
+declare const ListItem_base: import("@open-wc/dedupe-mixin").Constructor<import("@mdui/shared/mixins/anchor.js").AnchorMixinInterface> & import("@open-wc/dedupe-mixin").Constructor<import("../ripple/ripple-mixin.js").RippleMixinInterface> & import("@open-wc/dedupe-mixin").Constructor<import("@mdui/shared/mixins/focusable.js").FocusableMixinInterface> & typeof MduiElement;
 /**
  * @summary 列表项组件。需与 `<mdui-list>` 组件配合使用
  *
@@ -33,7 +33,7 @@ declare const ListItem_base: import("@open-wc/dedupe-mixin").Constructor<import(
  * @cssprop --shape-corner - 列表项的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
  * @cssprop --shape-corner-rounded - 指定了 `rounded` 时，列表项的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
  */
-export declare class ListItem extends ListItem_base {
+export declare class ListItem extends ListItem_base<ListItemEventMap> {
     static styles: CSSResultGroup;
     /**
      * 主文本。也可以通过 default slot 设置
@@ -103,6 +103,10 @@ export declare class ListItem extends ListItem_base {
     protected render(): TemplateResult;
     private renderInner;
 }
+export interface ListItemEventMap {
+    focus: FocusEvent;
+    blur: FocusEvent;
+}
 declare global {
     interface HTMLElementTagNameMap {
         'mdui-list-item': ListItem;