mdui 2.0.1 → 2.0.3

package/components/fab/index.js

@@ -3,6 +3,7 @@ import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { createRef, ref } from 'lit/directives/ref.js';
 import cc from 'classcat';
+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 { booleanConverter } from '@mdui/shared/helpers/decorator.js';
@@ -34,7 +35,7 @@ import { style } from './style.js';
  * @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 let Fab = class Fab extends ButtonBase {
+let Fab = class Fab extends ButtonBase {
     constructor() {
         super(...arguments);
         /**
@@ -59,6 +60,9 @@ export let Fab = class Fab extends ButtonBase {
         this.extended = false;
         this.rippleRef = createRef();
         this.hasSlotController = new HasSlotController(this, 'icon');
+        this.definedController = new DefinedController(this, {
+            relatedElements: [''],
+        });
     }
     get rippleElement() {
         return this.rippleRef.value;
@@ -68,15 +72,15 @@ export let Fab = class Fab extends ButtonBase {
      */
     async onExtendedChange() {
         const hasUpdated = this.hasUpdated;
-        if (!this.extended) {
-            this.style.width = '';
+        if (this.extended) {
+            this.style.width = `${this.scrollWidth}px`;
         }
         else {
-            this.style.width = `${this.scrollWidth}px`;
+            this.style.width = '';
         }
+        await this.definedController.whenDefined();
         await this.updateComplete;
         if (this.extended && !hasUpdated) {
-            await delay();
             this.style.width = `${this.scrollWidth}px`;
         }
         if (!hasUpdated) {
@@ -142,3 +146,4 @@ __decorate([
 Fab = __decorate([
     customElement('mdui-fab')
 ], Fab);
+export { 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` 图标的内容
  */
-export let Icon = class Icon extends LitElement {
+let Icon = class Icon extends MduiElement {
     constructor() {
         super(...arguments);
         this.hasSlotController = new HasSlotController(this, '[default]');
@@ -55,3 +56,4 @@ __decorate([
 Icon = __decorate([
     customElement('mdui-icon')
 ], Icon);
+export { Icon };

package/components/layout/helper.d.ts

@@ -6,11 +6,9 @@ import type { LayoutMain } from './layout-main.js';
 import type { Layout } from './layout.js';
 export type LayoutPlacement = 'top' | 'left' | 'right' | 'bottom';
 export declare class LayoutManager {
-    private $layout;
     private $main?;
     private states;
     private items?;
-    constructor(element: Layout);
     /**
      * 注册 `<mdui-layout-main>`
      */
@@ -39,10 +37,6 @@ export declare class LayoutManager {
      * 获取 `<mdui-layout-item>` 及 `<mdui-layout-main>` 元素
      */
     getItemsAndMain(): (LayoutItemBase | LayoutMain)[];
-    /**
-     * 检查指定 `<mdui-layout-item>` 元素是否已注册
-     */
-    hasItem(element: LayoutItemBase): boolean;
     /**
      * 更新 `order` 值，更新完后重新计算布局
      */
@@ -60,6 +54,11 @@ export declare class LayoutManager {
      * 按 order 排序，order 相同时，按在 DOM 中的顺序排序
      */
     private resort;
+    /**
+     * 组件宽度是否为 0
+     * mdui-navigation-drawer 较为特殊，在为模态化时，占据的宽度为 0
+     */
+    private isNoWidth;
 }
 /**
  * 获取 layout 实例

package/components/layout/helper.js

@@ -5,9 +5,8 @@ import '@mdui/jq/methods/get.js';
 import { isNodeName } from '@mdui/jq/shared/helper.js';
 import { observeResize } from '@mdui/shared/helpers/observeResize.js';
 export class LayoutManager {
-    constructor(element) {
+    constructor() {
         this.states = [];
-        this.$layout = $(element);
     }
     /**
      * 注册 `<mdui-layout-main>`
@@ -29,15 +28,9 @@ export class LayoutManager {
         this.states.push(state);
         // 监听元素尺寸变化
         state.observeResize = observeResize(state.element, () => {
-            // drawer 较特殊，在为模态化时，占据的宽度为 0
-            if (isNodeName(state.element, 'mdui-navigation-drawer') &&
-                // @ts-ignore
-                state.element.isModal) {
-                this.updateLayout(state.element, { width: 0 });
-            }
-            else {
-                this.updateLayout(state.element);
-            }
+            this.updateLayout(state.element, {
+                width: this.isNoWidth(state) ? 0 : undefined,
+            });
         });
         this.items = undefined;
         this.resort();
@@ -48,14 +41,13 @@ export class LayoutManager {
      * 取消注册 `<mdui-layout-item>`
      */
     unregisterItem(element) {
-        var _a;
         const index = this.states.findIndex((item) => item.element === element);
         if (index < 0) {
             return;
         }
         // 取消监听尺寸变化
         const item = this.states[index];
-        (_a = item.observeResize) === null || _a === void 0 ? void 0 : _a.unobserve();
+        item.observeResize?.unobserve();
         this.items = undefined;
         // 移除一个元素，并从下一个元素开始更新
         this.states.splice(index, 1);
@@ -68,16 +60,19 @@ export class LayoutManager {
      */
     getItems() {
         if (!this.items) {
-            this.items = this.$layout
-                .children([
-                'mdui-navigation-bar',
-                'mdui-navigation-drawer',
-                'mdui-navigation-rail',
-                'mdui-bottom-app-bar',
-                'mdui-top-app-bar',
-                'mdui-layout-item',
-            ].join(','))
-                .get();
+            const items = this.states.map((state) => state.element);
+            this.items = items.sort((a, b) => {
+                const position = a.compareDocumentPosition(b);
+                if (position & Node.DOCUMENT_POSITION_FOLLOWING) {
+                    return -1;
+                }
+                else if (position & Node.DOCUMENT_POSITION_PRECEDING) {
+                    return 1;
+                }
+                else {
+                    return 0;
+                }
+            });
         }
         return this.items;
     }
@@ -93,12 +88,6 @@ export class LayoutManager {
     getItemsAndMain() {
         return [...this.getItems(), this.getMain()].filter((i) => i);
     }
-    /**
-     * 检查指定 `<mdui-layout-item>` 元素是否已注册
-     */
-    hasItem(element) {
-        return this.getItems().includes(element);
-    }
     /**
      * 更新 `order` 值，更新完后重新计算布局
      */
@@ -115,8 +104,8 @@ export class LayoutManager {
         const state = element
             ? {
                 element,
-                width: size === null || size === void 0 ? void 0 : size.width,
-                height: size === null || size === void 0 ? void 0 : size.height,
+                width: size?.width,
+                height: size?.height,
             }
             : undefined;
         const index = state
@@ -127,7 +116,6 @@ export class LayoutManager {
         }
         Object.assign(this.states[index], state);
         this.states.forEach((currState, currIndex) => {
-            var _a, _b, _c, _d, _e, _f, _g, _h;
             if (currIndex < index) {
                 return;
             }
@@ -135,24 +123,22 @@ export class LayoutManager {
             const placement = currState.element.layoutPlacement;
             // 前一个元素
             const prevState = currIndex > 0 ? this.states[currIndex - 1] : undefined;
-            const top = (_a = prevState === null || prevState === void 0 ? void 0 : prevState.top) !== null && _a !== void 0 ? _a : 0;
-            const right = (_b = prevState === null || prevState === void 0 ? void 0 : prevState.right) !== null && _b !== void 0 ? _b : 0;
-            const bottom = (_c = prevState === null || prevState === void 0 ? void 0 : prevState.bottom) !== null && _c !== void 0 ? _c : 0;
-            const left = (_d = prevState === null || prevState === void 0 ? void 0 : prevState.left) !== null && _d !== void 0 ? _d : 0;
+            const top = prevState?.top ?? 0;
+            const right = prevState?.right ?? 0;
+            const bottom = prevState?.bottom ?? 0;
+            const left = prevState?.left ?? 0;
             Object.assign(currState, { top, right, bottom, left });
             switch (placement) {
                 case 'top':
-                    currState.top += (_e = currState.height) !== null && _e !== void 0 ? _e : currState.element.offsetHeight;
-                    break;
-                case 'right':
-                    currState.right += (_f = currState.width) !== null && _f !== void 0 ? _f : currState.element.offsetWidth;
-                    break;
                 case 'bottom':
-                    currState.bottom +=
-                        (_g = currState.height) !== null && _g !== void 0 ? _g : currState.element.offsetHeight;
+                    currState[placement] +=
+                        currState.height ?? currState.element.offsetHeight;
                     break;
+                case 'right':
                 case 'left':
-                    currState.left += (_h = currState.width) !== null && _h !== void 0 ? _h : currState.element.offsetWidth;
+                    currState[placement] +=
+                        (this.isNoWidth(currState) ? 0 : currState.width) ??
+                            currState.element.offsetWidth;
                     break;
             }
             currState.height = currState.width = undefined;
@@ -181,9 +167,8 @@ export class LayoutManager {
     resort() {
         const items = this.getItems();
         this.states.sort((a, b) => {
-            var _a, _b;
-            const aOrder = (_a = a.element.order) !== null && _a !== void 0 ? _a : 0;
-            const bOrder = (_b = b.element.order) !== null && _b !== void 0 ? _b : 0;
+            const aOrder = a.element.order ?? 0;
+            const bOrder = b.element.order ?? 0;
             if (aOrder > bOrder) {
                 return 1;
             }
@@ -199,6 +184,15 @@ export class LayoutManager {
             return 0;
         });
     }
+    /**
+     * 组件宽度是否为 0
+     * mdui-navigation-drawer 较为特殊，在为模态化时，占据的宽度为 0
+     */
+    isNoWidth(state) {
+        return (isNodeName(state.element, 'mdui-navigation-drawer') &&
+            // @ts-ignore
+            state.element.isModal);
+    }
 }
 const layoutManagerMap = new WeakMap();
 /**
@@ -206,7 +200,7 @@ const layoutManagerMap = new WeakMap();
  */
 export const getLayout = (element) => {
     if (!layoutManagerMap.has(element)) {
-        layoutManagerMap.set(element, new LayoutManager(element));
+        layoutManagerMap.set(element, new LayoutManager());
     }
     return layoutManagerMap.get(element);
 };

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`
@@ -18,8 +18,7 @@ export class LayoutItemBase extends LitElement {
     }
     // order 变更时，需要重新调整布局
     onOrderChange() {
-        var _a;
-        (_a = this.layoutManager) === null || _a === void 0 ? void 0 : _a.updateOrder();
+        this.layoutManager?.updateOrder();
     }
     connectedCallback() {
         super.connectedCallback();

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-item.js

@@ -18,7 +18,7 @@ import { layoutItemStyle } from './layout-item-style.js';
  *
  * @slot - 可以是任意内容
  */
-export let LayoutItem = class LayoutItem extends LayoutItemBase {
+let LayoutItem = class LayoutItem extends LayoutItemBase {
     constructor() {
         super(...arguments);
         /**
@@ -36,8 +36,7 @@ export let LayoutItem = class LayoutItem extends LayoutItemBase {
     }
     // placement 变更时，需要重新调整布局
     onPlacementChange() {
-        var _a;
-        (_a = this.layoutManager) === null || _a === void 0 ? void 0 : _a.updateLayout(this);
+        this.layoutManager?.updateLayout(this);
     }
     render() {
         return html `<slot></slot>`;
@@ -56,3 +55,4 @@ __decorate([
 LayoutItem = __decorate([
     customElement('mdui-layout-item')
 ], LayoutItem);
+export { 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 - 可以是任意内容
  */
-export let LayoutMain = class LayoutMain extends LitElement {
+let LayoutMain = class LayoutMain extends MduiElement {
     connectedCallback() {
         super.connectedCallback();
         const parentElement = this.parentElement;
@@ -44,3 +45,4 @@ LayoutMain.styles = [
 LayoutMain = __decorate([
     customElement('mdui-layout-main')
 ], LayoutMain);
+export { LayoutMain };

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>` 元素
  */
-export let Layout = class Layout extends LitElement {
+let Layout = class Layout extends MduiElement {
     constructor() {
         super(...arguments);
         /**
@@ -41,3 +42,4 @@ __decorate([
 Layout = __decorate([
     customElement('mdui-layout')
 ], Layout);
+export { Layout };

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)
  */
-export let LinearProgress = class LinearProgress extends LitElement {
+let LinearProgress = class LinearProgress extends MduiElement {
     constructor() {
         super(...arguments);
         /**
@@ -25,12 +26,11 @@ export let LinearProgress = class LinearProgress extends LitElement {
         this.max = 1;
     }
     render() {
-        var _a;
         const isDeterminate = !isUndefined(this.value);
         if (isDeterminate) {
             const value = this.value;
             return html `<div part="indicator" class="determinate" style="${styleMap({
-                width: `${(value / Math.max((_a = this.max) !== null && _a !== void 0 ? _a : value, value)) * 100}%`,
+                width: `${(value / Math.max(this.max ?? value, value)) * 100}%`,
             })}"></div>`;
         }
         return html `<div part="indicator" class="indeterminate"></div>`;
@@ -46,3 +46,4 @@ __decorate([
 LinearProgress = __decorate([
     customElement('mdui-linear-progress')
 ], LinearProgress);
+export { LinearProgress };

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;

package/components/list/list-item.js

@@ -1,9 +1,10 @@
 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 cc from 'classcat';
 import { isNodeName, getNodeName } from '@mdui/jq/shared/helper.js';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import { HasSlotController } from '@mdui/shared/controllers/has-slot.js';
 import { booleanConverter } from '@mdui/shared/helpers/decorator.js';
 import { nothingTemplate } from '@mdui/shared/helpers/template.js';
@@ -43,7 +44,7 @@ import { listItemStyle } from './list-item-style.js';
  * @cssprop --shape-corner - 列表项的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
  * @cssprop --shape-corner-rounded - 指定了 `rounded` 时，列表项的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
  */
-export let ListItem = class ListItem extends AnchorMixin(RippleMixin(FocusableMixin(LitElement))) {
+let ListItem = class ListItem extends AnchorMixin(RippleMixin(FocusableMixin(MduiElement))) {
     constructor() {
         super(...arguments);
         /**
@@ -81,7 +82,7 @@ export let ListItem = class ListItem extends AnchorMixin(RippleMixin(FocusableMi
         return this.focusDisabled;
     }
     get focusElement() {
-        return this.href ? this.itemRef.value : this;
+        return this.href && !this.disabled ? this.itemRef.value : this;
     }
     get focusDisabled() {
         return this.href ? this.disabled : this.disabled || this.nonclickable;
@@ -184,3 +185,4 @@ __decorate([
 ListItem = __decorate([
     customElement('mdui-list-item')
 ], ListItem);
+export { ListItem };