mdui 1.0.2 → 2.0.0

package/components/layout/layout-item.js

@@ -0,0 +1,58 @@
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { watch } from '@mdui/shared/decorators/watch.js';
+import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
+import { LayoutItemBase } from './layout-item-base.js';
+import { layoutItemStyle } from './layout-item-style.js';
+/**
+ * @summary 布局项组件
+ *
+ * ```html
+ * <mdui-layout>
+ * ..<mdui-layout-item></mdui-layout-item>
+ * ..<mdui-layout-item></mdui-layout-item>
+ * ..<mdui-layout-main></mdui-layout-main>
+ * </mdui-layout>
+ * ```
+ *
+ * @slot - 可以是任意内容
+ */
+export let LayoutItem = class LayoutItem extends LayoutItemBase {
+    constructor() {
+        super(...arguments);
+        /**
+         * 该组件所处位置。可选值为：
+         *
+         * * `top`：位于上方
+         * * `bottom`：位于下方
+         * * `left`：位于左侧
+         * * `right`：位于右侧
+         */
+        this.placement = 'top';
+    }
+    get layoutPlacement() {
+        return this.placement;
+    }
+    // placement 变更时，需要重新调整布局
+    onPlacementChange() {
+        var _a;
+        (_a = this.layoutManager) === null || _a === void 0 ? void 0 : _a.updateLayout(this);
+    }
+    render() {
+        return html `<slot></slot>`;
+    }
+};
+LayoutItem.styles = [
+    componentStyle,
+    layoutItemStyle,
+];
+__decorate([
+    property({ reflect: true })
+], LayoutItem.prototype, "placement", void 0);
+__decorate([
+    watch('placement', true)
+], LayoutItem.prototype, "onPlacementChange", null);
+LayoutItem = __decorate([
+    customElement('mdui-layout-item')
+], LayoutItem);

package/components/layout/layout-main-style.d.ts

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

package/components/layout/layout-main-style.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const layoutMainStyle = css `:host{flex:1 0 auto;max-width:100%;overflow:auto}`;

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

@@ -0,0 +1,27 @@
+import { LitElement } from 'lit';
+import type { CSSResultGroup, TemplateResult } from 'lit';
+/**
+ * @summary 布局主内容组件
+ *
+ * ```html
+ * <mdui-layout>
+ * ..<mdui-layout-item></mdui-layout-item>
+ * ..<mdui-layout-item></mdui-layout-item>
+ * ..<mdui-layout-main></mdui-layout-main>
+ * </mdui-layout>
+ * ```
+ *
+ * @slot - 可以是任意内容
+ */
+export declare class LayoutMain extends LitElement {
+    static styles: CSSResultGroup;
+    private layoutManager?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mdui-layout-main': LayoutMain;
+    }
+}

package/components/layout/layout-main.js

@@ -0,0 +1,46 @@
+import { __decorate } from "tslib";
+import { html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { isNodeName } from '@mdui/jq/shared/helper.js';
+import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
+import { getLayout } from './helper.js';
+import { layoutMainStyle } from './layout-main-style.js';
+/**
+ * @summary 布局主内容组件
+ *
+ * ```html
+ * <mdui-layout>
+ * ..<mdui-layout-item></mdui-layout-item>
+ * ..<mdui-layout-item></mdui-layout-item>
+ * ..<mdui-layout-main></mdui-layout-main>
+ * </mdui-layout>
+ * ```
+ *
+ * @slot - 可以是任意内容
+ */
+export let LayoutMain = class LayoutMain extends LitElement {
+    connectedCallback() {
+        super.connectedCallback();
+        const parentElement = this.parentElement;
+        if (isNodeName(parentElement, 'mdui-layout')) {
+            this.layoutManager = getLayout(parentElement);
+            this.layoutManager.registerMain(this);
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this.layoutManager) {
+            this.layoutManager.unregisterMain();
+        }
+    }
+    render() {
+        return html `<slot></slot>`;
+    }
+};
+LayoutMain.styles = [
+    componentStyle,
+    layoutMainStyle,
+];
+LayoutMain = __decorate([
+    customElement('mdui-layout-main')
+], LayoutMain);

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

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

package/components/layout/layout-style.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const layoutStyle = css `:host{position:relative;display:flex;flex:1 1 auto;overflow:hidden}:host([full-height]){height:100%}`;

package/components/layout/layout.d.ts

@@ -0,0 +1,28 @@
+import { LitElement } from 'lit';
+import type { CSSResultGroup, TemplateResult } from 'lit';
+/**
+ * @summary 布局组件
+ *
+ * ```html
+ * <mdui-layout>
+ * ..<mdui-layout-item></mdui-layout-item>
+ * ..<mdui-layout-item></mdui-layout-item>
+ * ..<mdui-layout-main></mdui-layout-main>
+ * </mdui-layout>
+ * ```
+ *
+ * @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 {
+    static styles: CSSResultGroup;
+    /**
+     * 把当前布局的高度设为 100%
+     */
+    fullHeight: boolean;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mdui-layout': Layout;
+    }
+}

package/components/layout/layout.js

@@ -0,0 +1,43 @@
+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 { layoutStyle } from './layout-style.js';
+/**
+ * @summary 布局组件
+ *
+ * ```html
+ * <mdui-layout>
+ * ..<mdui-layout-item></mdui-layout-item>
+ * ..<mdui-layout-item></mdui-layout-item>
+ * ..<mdui-layout-main></mdui-layout-main>
+ * </mdui-layout>
+ * ```
+ *
+ * @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 {
+    constructor() {
+        super(...arguments);
+        /**
+         * 把当前布局的高度设为 100%
+         */
+        this.fullHeight = false;
+    }
+    render() {
+        return html `<slot></slot>`;
+    }
+};
+Layout.styles = [componentStyle, layoutStyle];
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+        attribute: 'full-height',
+    })
+], Layout.prototype, "fullHeight", void 0);
+Layout = __decorate([
+    customElement('mdui-layout')
+], Layout);

package/components/layout-item.d.ts

@@ -0,0 +1 @@
+export * from './layout/layout-item.js';

package/components/layout-item.js

@@ -0,0 +1 @@
+export * from './layout/layout-item.js';

package/components/layout-main.d.ts

@@ -0,0 +1 @@
+export * from './layout/layout-main.js';

package/components/layout-main.js

@@ -0,0 +1 @@
+export * from './layout/layout-main.js';

package/components/layout.d.ts

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

package/components/layout.js

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

package/components/linear-progress/index.d.ts

@@ -0,0 +1,30 @@
+import { LitElement } from 'lit';
+import type { CSSResultGroup, TemplateResult } from 'lit';
+/**
+ * @summary 线性进度指示器组件
+ *
+ * ```html
+ * <mdui-linear-progress></mdui-linear-progress>
+ * ```
+ *
+ * @csspart indicator - 指示器
+ *
+ * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ */
+export declare class LinearProgress extends LitElement {
+    static styles: CSSResultGroup;
+    /**
+     * 进度指示器的最大值，默认为 1
+     */
+    max: number;
+    /**
+     * 进度指示器的当前值。若未指定该值，则为不确定状态
+     */
+    value?: number;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mdui-linear-progress': LinearProgress;
+    }
+}

package/components/linear-progress/index.js

@@ -0,0 +1,48 @@
+import { __decorate } from "tslib";
+import { html, LitElement } 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 { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
+import { style } from './style.js';
+/**
+ * @summary 线性进度指示器组件
+ *
+ * ```html
+ * <mdui-linear-progress></mdui-linear-progress>
+ * ```
+ *
+ * @csspart indicator - 指示器
+ *
+ * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ */
+export let LinearProgress = class LinearProgress extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * 进度指示器的最大值，默认为 1
+         */
+        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}%`,
+            })}"></div>`;
+        }
+        return html `<div part="indicator" class="indeterminate"></div>`;
+    }
+};
+LinearProgress.styles = [componentStyle, style];
+__decorate([
+    property({ type: Number, reflect: true })
+], LinearProgress.prototype, "max", void 0);
+__decorate([
+    property({ type: Number })
+], LinearProgress.prototype, "value", void 0);
+LinearProgress = __decorate([
+    customElement('mdui-linear-progress')
+], LinearProgress);

package/components/linear-progress/style.d.ts

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

package/components/linear-progress/style.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const style = css `:host{--shape-corner:var(--mdui-shape-corner-none);position:relative;display:inline-block;width:100%;overflow:hidden;border-radius:var(--shape-corner);background-color:rgb(var(--mdui-color-surface-container-highest));height:.25rem}.determinate,.indeterminate{background-color:rgb(var(--mdui-color-primary))}.determinate{height:100%;transition:width var(--mdui-motion-duration-long2) var(--mdui-motion-easing-standard)}.indeterminate::before{position:absolute;top:0;bottom:0;left:0;background-color:inherit;animation:mdui-comp-progress-indeterminate 2s var(--mdui-motion-easing-linear) infinite;content:' '}.indeterminate::after{position:absolute;top:0;bottom:0;left:0;background-color:inherit;animation:mdui-comp-progress-indeterminate-short 2s var(--mdui-motion-easing-linear) infinite;content:' '}@keyframes mdui-comp-progress-indeterminate{0%{left:0;width:0}50%{left:30%;width:70%}75%{left:100%;width:0}}@keyframes mdui-comp-progress-indeterminate-short{0%{left:0;width:0}50%{left:0;width:0}75%{left:0;width:25%}100%{left:100%;width:0}}`;

package/components/linear-progress.d.ts

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

package/components/linear-progress.js

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

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

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

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

@@ -0,0 +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}`;

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

@@ -0,0 +1,111 @@
+import { LitElement } from 'lit';
+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;
+/**
+ * @summary 列表项组件。需与 `<mdui-list>` 组件配合使用
+ *
+ * ```html
+ * <mdui-list>
+ * ..<mdui-list-subheader>Subheader</mdui-list-subheader>
+ * ..<mdui-list-item>Item 1</mdui-list-item>
+ * ..<mdui-list-item>Item 2</mdui-list-item>
+ * </mdui-list>
+ * ```
+ *
+ * @event focus - 获得焦点时触发
+ * @event blur - 失去焦点时触发
+ *
+ * @slot - 主文本
+ * @slot description - 副文本
+ * @slot icon - 列表项左侧的元素
+ * @slot end-icon - 列表项右侧的元素
+ * @slot custom - 任意自定义内容
+ *
+ * @csspart container - 列表项容器
+ * @csspart icon - 左侧图标
+ * @csspart end-icon - 右侧图标
+ * @csspart body - 中间部分
+ * @csspart headline - 主标题
+ * @csspart description - 副标题
+ *
+ * @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 {
+    static styles: CSSResultGroup;
+    /**
+     * 主文本。也可以通过 default slot 设置
+     */
+    headline?: string;
+    /**
+     * 主文本行数，超过行数限制后会截断显示。默认为没有行数限制。可选值为：
+     *
+     * * `1`：显示单行文本，超出后截断显示
+     * * `2`：显示两行文本，超出后截断显示
+     * * `3`：显示三行文本，超出后截断显示
+     */
+    headlineLine?: /*显示单行文本，超出后截断显示*/ 1 | /*显示两行文本，超出后截断显示*/ 2 | /*显示三行文本，超出后截断显示*/ 3;
+    /**
+     * 副文本。也可以通过 `slot="description"` 设置
+     */
+    description?: string;
+    /**
+     * 副文本行数，超过行数限制后会截断显示。默认为没有行数限制。可选值为：
+     *
+     * * `1`：显示单行文本，超出后截断显示
+     * * `2`：显示两行文本，超出后截断显示
+     * * `3`：显示三行文本，超出后截断显示
+     */
+    descriptionLine?: 1 | 2 | 3;
+    /**
+     * 左侧的 Material Icons 图标名。也可以通过 `slot="icon"` 设置
+     */
+    icon?: string;
+    /**
+     * 右侧的 Material Icons 图标名。也可以通过 `slot="end-icon"` 设置
+     */
+    endIcon?: string;
+    /**
+     * 是否禁用该列表项，列表项将置灰，且其中的 [`<mdui-checkbox>`](/docs/2/components/checkbox)、[`<mdui-radio>`](/docs/2/components/radio)、[`<mdui-switch>`](/docs/2/components/switch) 等都将禁用
+     */
+    disabled: boolean;
+    /**
+     * 是否激活该列表项
+     */
+    active: boolean;
+    /**
+     * 是否使列表项不可点击，但其中的 [`<mdui-checkbox>`](/docs/2/components/checkbox)、[`<mdui-radio>`](/docs/2/components/radio)、[`<mdui-switch>`](/docs/2/components/switch) 等仍可进行交互
+     */
+    nonclickable: boolean;
+    /**
+     * 使用圆角形状的列表项
+     */
+    rounded: boolean;
+    /**
+     * 列表项的垂直对齐方式。可选值为：
+     *
+     * * `start`：顶部对齐
+     * * `center`：居中对齐
+     * * `end`：底部对齐
+     */
+    alignment: /*顶部对齐*/ 'start' | /*居中对齐*/ 'center' | /*底部对齐*/ 'end';
+    private readonly iconElements;
+    private readonly endIconElements;
+    private readonly rippleRef;
+    private readonly itemRef;
+    private readonly hasSlotController;
+    protected get rippleElement(): Ripple;
+    protected get rippleDisabled(): boolean;
+    protected get focusElement(): HTMLElement;
+    protected get focusDisabled(): boolean;
+    protected render(): TemplateResult;
+    private renderInner;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mdui-list-item': ListItem;
+    }
+}
+export {};

package/components/list/list-item.js

@@ -0,0 +1,186 @@
+import { __decorate } from "tslib";
+import { html, LitElement } 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 { HasSlotController } from '@mdui/shared/controllers/has-slot.js';
+import { booleanConverter } from '@mdui/shared/helpers/decorator.js';
+import { nothingTemplate } from '@mdui/shared/helpers/template.js';
+import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
+import { AnchorMixin } from '@mdui/shared/mixins/anchor.js';
+import { FocusableMixin } from '@mdui/shared/mixins/focusable.js';
+import '../icon.js';
+import { RippleMixin } from '../ripple/ripple-mixin.js';
+import { listItemStyle } from './list-item-style.js';
+/**
+ * @summary 列表项组件。需与 `<mdui-list>` 组件配合使用
+ *
+ * ```html
+ * <mdui-list>
+ * ..<mdui-list-subheader>Subheader</mdui-list-subheader>
+ * ..<mdui-list-item>Item 1</mdui-list-item>
+ * ..<mdui-list-item>Item 2</mdui-list-item>
+ * </mdui-list>
+ * ```
+ *
+ * @event focus - 获得焦点时触发
+ * @event blur - 失去焦点时触发
+ *
+ * @slot - 主文本
+ * @slot description - 副文本
+ * @slot icon - 列表项左侧的元素
+ * @slot end-icon - 列表项右侧的元素
+ * @slot custom - 任意自定义内容
+ *
+ * @csspart container - 列表项容器
+ * @csspart icon - 左侧图标
+ * @csspart end-icon - 右侧图标
+ * @csspart body - 中间部分
+ * @csspart headline - 主标题
+ * @csspart description - 副标题
+ *
+ * @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))) {
+    constructor() {
+        super(...arguments);
+        /**
+         * 是否禁用该列表项，列表项将置灰，且其中的 [`<mdui-checkbox>`](/docs/2/components/checkbox)、[`<mdui-radio>`](/docs/2/components/radio)、[`<mdui-switch>`](/docs/2/components/switch) 等都将禁用
+         */
+        this.disabled = false;
+        /**
+         * 是否激活该列表项
+         */
+        this.active = false;
+        /**
+         * 是否使列表项不可点击，但其中的 [`<mdui-checkbox>`](/docs/2/components/checkbox)、[`<mdui-radio>`](/docs/2/components/radio)、[`<mdui-switch>`](/docs/2/components/switch) 等仍可进行交互
+         */
+        this.nonclickable = false;
+        /**
+         * 使用圆角形状的列表项
+         */
+        this.rounded = false;
+        /**
+         * 列表项的垂直对齐方式。可选值为：
+         *
+         * * `start`：顶部对齐
+         * * `center`：居中对齐
+         * * `end`：底部对齐
+         */
+        this.alignment = 'center';
+        this.rippleRef = createRef();
+        this.itemRef = createRef();
+        this.hasSlotController = new HasSlotController(this, '[default]', 'description', 'icon', 'end-icon', 'custom');
+    }
+    get rippleElement() {
+        return this.rippleRef.value;
+    }
+    get rippleDisabled() {
+        return this.focusDisabled;
+    }
+    get focusElement() {
+        return this.href ? this.itemRef.value : this;
+    }
+    get focusDisabled() {
+        return this.href ? this.disabled : this.disabled || this.nonclickable;
+    }
+    render() {
+        const preset = !this.hasSlotController.test('custom');
+        const hasIcon = this.icon || this.hasSlotController.test('icon');
+        const hasEndIcon = this.endIcon || this.hasSlotController.test('end-icon');
+        const hasDescription = this.description || this.hasSlotController.test('description');
+        const className = cc({
+            container: true,
+            preset,
+            'has-icon': hasIcon,
+            'has-end-icon': hasEndIcon,
+            'has-description': hasDescription,
+            // icon slot 中的元素是否为 mdui-icon 或 mdui-icon-* 组件
+            'is-icon': isNodeName(this.iconElements[0], 'mdui-icon'),
+            // end-icon slot 中的元素是否为 mdui-icon 或 mdui-icon-* 组件
+            'is-end-icon': getNodeName(this.endIconElements[0]).startsWith('mdui-icon-'),
+        });
+        return html `<mdui-ripple ${ref(this.rippleRef)} .noRipple="${this.noRipple}"></mdui-ripple>${this.href && !this.disabled
+            ? this.renderAnchor({
+                className,
+                content: this.renderInner(),
+                part: 'container',
+                refDirective: ref(this.itemRef),
+            })
+            : html `<div part="container" class="${className}" ${ref(this.itemRef)}>${this.renderInner()}</div>`}`;
+    }
+    renderInner() {
+        const hasDefaultSlot = this.hasSlotController.test('[default]');
+        return html `<slot name="custom"><slot name="icon" part="icon" class="icon">${this.icon
+            ? html `<mdui-icon name="${this.icon}"></mdui-icon>`
+            : nothingTemplate}</slot><div part="body" class="body">${hasDefaultSlot
+            ? html `<slot part="headline" class="headline"></slot>`
+            : html `<div part="headline" class="headline">${this.headline}</div>`}<slot name="description" part="description" class="description">${this.description}</slot></div><slot name="end-icon" part="end-icon" class="end-icon">${this.endIcon
+            ? html `<mdui-icon name="${this.endIcon}"></mdui-icon>`
+            : nothingTemplate}</slot></slot>`;
+    }
+};
+ListItem.styles = [
+    componentStyle,
+    listItemStyle,
+];
+__decorate([
+    property({ reflect: true })
+], ListItem.prototype, "headline", void 0);
+__decorate([
+    property({ type: Number, reflect: true, attribute: 'headline-line' })
+], ListItem.prototype, "headlineLine", void 0);
+__decorate([
+    property({ reflect: true })
+], ListItem.prototype, "description", void 0);
+__decorate([
+    property({ type: Number, reflect: true, attribute: 'description-line' })
+], ListItem.prototype, "descriptionLine", void 0);
+__decorate([
+    property({ reflect: true })
+], ListItem.prototype, "icon", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'end-icon' })
+], ListItem.prototype, "endIcon", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+    })
+], ListItem.prototype, "disabled", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+    })
+], ListItem.prototype, "active", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+    })
+], ListItem.prototype, "nonclickable", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+    })
+], ListItem.prototype, "rounded", void 0);
+__decorate([
+    property({ reflect: true })
+], ListItem.prototype, "alignment", void 0);
+__decorate([
+    queryAssignedElements({ slot: 'icon', flatten: true })
+], ListItem.prototype, "iconElements", void 0);
+__decorate([
+    queryAssignedElements({ slot: 'end-icon', flatten: true })
+], ListItem.prototype, "endIconElements", void 0);
+ListItem = __decorate([
+    customElement('mdui-list-item')
+], ListItem);

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

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

package/components/list/list-style.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const listStyle = css `:host{display:block;padding:.5rem 0}::slotted(mdui-divider[middle]){margin-left:1rem;margin-right:1.5rem}`;

package/components/list/list-subheader-style.d.ts

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