mdui 2.0.3 → 2.0.5

package/components/linear-progress/index.js

@@ -13,15 +13,15 @@ import { style } from './style.js';
  * <mdui-linear-progress></mdui-linear-progress>
  * ```
  *
- * @csspart indicator - 指示器
+ * @csspart indicator - 指示器部分
  *
- * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
  */
 let LinearProgress = class LinearProgress extends MduiElement {
     constructor() {
         super(...arguments);
         /**
-         * 进度指示器的最大值，默认为 1
+         * 进度指示器的最大值。默认为 `1`
          */
         this.max = 1;
     }
@@ -29,9 +29,13 @@ let LinearProgress = class LinearProgress extends MduiElement {
         const isDeterminate = !isUndefined(this.value);
         if (isDeterminate) {
             const value = this.value;
-            return html `<div part="indicator" class="determinate" style="${styleMap({
+            return html `<div
+        part="indicator"
+        class="determinate"
+        style="${styleMap({
                 width: `${(value / Math.max(this.max ?? value, value)) * 100}%`,
-            })}"></div>`;
+            })}"
+      ></div>`;
         }
         return html `<div part="indicator" class="indeterminate"></div>`;
     }

package/components/linear-progress/style.js

@@ -1,2 +1,74 @@
 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}}`;
+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: 0.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/list/list-item-style.js

@@ -1,4 +1,155 @@
 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(
+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;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}`;
+    );
+  }
+  :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: 0.38;
+  }
+  :host([nonclickable]:not([href])) .container {
+    cursor: auto;
+    -webkit-user-select: auto;
+    user-select: auto;
+  }
+  .preset {
+    display: flex;
+    align-items: center;
+    padding: 0.5rem 1.5rem 0.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([hover]) .description,
+  :host([focused]) .description,
+  :host([pressed]) .description {
+    color: rgb(var(--mdui-color-on-surface));
+  }
+  .has-description .description {
+    display: block;
+  }
+  :host([headline-line='1']) .headline,
+  :host([description-line='1']) .description {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  :host([headline-line='2']) .headline,
+  :host([description-line='2']) .description,
+  :host([headline-line='3']) .headline,
+  :host([description-line='3']) .description {
+    display: -webkit-box;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    -webkit-box-orient: vertical;
+  }
+  :host([headline-line='2']) .headline,
+  :host([description-line='2']) .description {
+    -webkit-line-clamp: 2;
+  }
+  :host([headline-line='3']) .headline,
+  :host([description-line='3']) .description {
+    -webkit-line-clamp: 3;
+  }
+  .icon,
+  .end-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]) .icon,
+  :host([disabled]) .end-icon,
+  :host([hover]) .icon,
+  :host([hover]) .end-icon,
+  :host([focused]) .icon,
+  :host([focused]) .end-icon,
+  :host([pressed]) .icon,
+  :host([pressed]) .end-icon {
+    color: rgb(var(--mdui-color-on-surface));
+  }
+  :host([active]) .icon,
+  :host([active]) .end-icon {
+    color: rgb(var(--mdui-color-on-secondary-container));
+  }
+  .icon mdui-icon,
+  .end-icon mdui-icon,
+  .is-icon ::slotted([slot='icon']),
+  .is-end-icon ::slotted([slot='end-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: -0.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: -0.5rem;
+  }
+`;

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

@@ -4,7 +4,7 @@ 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 MduiElement;
 /**
- * @summary 列表项组件。需与 `<mdui-list>` 组件配合使用
+ * @summary 列表项组件。需配合 `<mdui-list>` 组件使用
  *
  * ```html
  * <mdui-list>
@@ -30,8 +30,8 @@ declare const ListItem_base: import("@open-wc/dedupe-mixin").Constructor<import(
  * @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)
+ * @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<ListItemEventMap> {
     static styles: CSSResultGroup;
@@ -40,25 +40,25 @@ export declare class ListItem extends ListItem_base<ListItemEventMap> {
      */
     headline?: string;
     /**
-     * 主文本行数，超过行数限制后会截断显示。默认为没有行数限制。可选值为：
+     * 主文本行数，超过限制后将截断显示。默认无行数限制。可选值包括：
      *
-     * * `1`：显示单行文本，超出后截断显示
-     * * `2`：显示两行文本，超出后截断显示
-     * * `3`：显示三行文本，超出后截断显示
+     * * `1`：显示单行，超出后截断
+     * * `2`：显示两行，超出后截断
+     * * `3`：显示三行，超出后截断
      */
-    headlineLine?: /*显示单行文本，超出后截断显示*/ 1 | /*显示两行文本，超出后截断显示*/ 2 | /*显示三行文本，超出后截断显示*/ 3;
+    headlineLine?: /*显示单行，超出后截断*/ 1 | /*显示两行，超出后截断*/ 2 | /*显示三行，超出后截断*/ 3;
     /**
      * 副文本。也可以通过 `slot="description"` 设置
      */
     description?: string;
     /**
-     * 副文本行数，超过行数限制后会截断显示。默认为没有行数限制。可选值为：
+     * 副文本行数，超过限制后将截断显示。默认无行数限制。可选值包括：
      *
-     * * `1`：显示单行文本，超出后截断显示
-     * * `2`：显示两行文本，超出后截断显示
-     * * `3`：显示三行文本，超出后截断显示
+     * * `1`：显示单行，超出后截断
+     * * `2`：显示两行，超出后截断
+     * * `3`：显示三行，超出后截断
      */
-    descriptionLine?: 1 | 2 | 3;
+    descriptionLine?: /*显示单行，超出后截断*/ 1 | /*显示两行，超出后截断*/ 2 | /*显示三行，超出后截断*/ 3;
     /**
      * 左侧的 Material Icons 图标名。也可以通过 `slot="icon"` 设置
      */
@@ -68,7 +68,7 @@ export declare class ListItem extends ListItem_base<ListItemEventMap> {
      */
     endIcon?: string;
     /**
-     * 是否禁用该列表项，列表项将置灰，且其中的 [`<mdui-checkbox>`](/docs/2/components/checkbox)、[`<mdui-radio>`](/docs/2/components/radio)、[`<mdui-switch>`](/docs/2/components/switch) 等都将禁用
+     * 是否禁用该列表项，禁用后，列表项将变为灰色，且其中的 [`<mdui-checkbox>`](/docs/2/components/checkbox)、[`<mdui-radio>`](/docs/2/components/radio)、[`<mdui-switch>`](/docs/2/components/switch) 等也将禁用
      */
     disabled: boolean;
     /**
@@ -76,15 +76,15 @@ export declare class ListItem extends ListItem_base<ListItemEventMap> {
      */
     active: boolean;
     /**
-     * 是否使列表项不可点击，但其中的 [`<mdui-checkbox>`](/docs/2/components/checkbox)、[`<mdui-radio>`](/docs/2/components/radio)、[`<mdui-switch>`](/docs/2/components/switch) 等仍可进行交互
+     * 是否使列表项不可点击。设置后，列表项中的 [`<mdui-checkbox>`](/docs/2/components/checkbox)、[`<mdui-radio>`](/docs/2/components/radio)、[`<mdui-switch>`](/docs/2/components/switch) 等仍可交互
      */
     nonclickable: boolean;
     /**
-     * 使用圆角形状的列表项
+     * 是否使用圆角形状的列表项
      */
     rounded: boolean;
     /**
-     * 列表项的垂直对齐方式。可选值为：
+     * 列表项的垂直对齐方式。可选值包括：
      *
      * * `start`：顶部对齐
      * * `center`：居中对齐

package/components/list/list-item.js

@@ -15,7 +15,7 @@ import '../icon.js';
 import { RippleMixin } from '../ripple/ripple-mixin.js';
 import { listItemStyle } from './list-item-style.js';
 /**
- * @summary 列表项组件。需与 `<mdui-list>` 组件配合使用
+ * @summary 列表项组件。需配合 `<mdui-list>` 组件使用
  *
  * ```html
  * <mdui-list>
@@ -41,14 +41,14 @@ import { listItemStyle } from './list-item-style.js';
  * @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)
+ * @cssprop --shape-corner - 列表项的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --shape-corner-rounded - 指定了 `rounded` 属性时，列表项的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
  */
 let ListItem = class ListItem extends AnchorMixin(RippleMixin(FocusableMixin(MduiElement))) {
     constructor() {
         super(...arguments);
         /**
-         * 是否禁用该列表项，列表项将置灰，且其中的 [`<mdui-checkbox>`](/docs/2/components/checkbox)、[`<mdui-radio>`](/docs/2/components/radio)、[`<mdui-switch>`](/docs/2/components/switch) 等都将禁用
+         * 是否禁用该列表项，禁用后，列表项将变为灰色，且其中的 [`<mdui-checkbox>`](/docs/2/components/checkbox)、[`<mdui-radio>`](/docs/2/components/radio)、[`<mdui-switch>`](/docs/2/components/switch) 等也将禁用
          */
         this.disabled = false;
         /**
@@ -56,15 +56,15 @@ let ListItem = class ListItem extends AnchorMixin(RippleMixin(FocusableMixin(Mdu
          */
         this.active = false;
         /**
-         * 是否使列表项不可点击，但其中的 [`<mdui-checkbox>`](/docs/2/components/checkbox)、[`<mdui-radio>`](/docs/2/components/radio)、[`<mdui-switch>`](/docs/2/components/switch) 等仍可进行交互
+         * 是否使列表项不可点击。设置后，列表项中的 [`<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`：居中对齐
@@ -103,24 +103,43 @@ let ListItem = class ListItem extends AnchorMixin(RippleMixin(FocusableMixin(Mdu
             // 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
+        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>`}`;
+            : 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
+        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>`;
+            : 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 = [

package/components/list/list-style.js

@@ -1,2 +1,11 @@
 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}`;
+export const listStyle = css `
+  :host {
+    display: block;
+    padding: 0.5rem 0rem;
+  }
+  ::slotted(mdui-divider[middle]) {
+    margin-left: 1rem;
+    margin-right: 1.5rem;
+  }
+`;

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

@@ -1,2 +1,20 @@
 import { css } from 'lit';
-export const listSubheaderStyle = css `:host{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:default;color:rgb(var(--mdui-color-on-surface-variant));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);padding-left:1rem;padding-right:1.5rem;height:3.5rem;line-height:3.5rem}`;
+export const listSubheaderStyle = css `
+  /* 规范中没有该描述 */
+  :host {
+    display: block;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    cursor: default;
+    color: rgb(var(--mdui-color-on-surface-variant));
+    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);
+    padding-left: 1rem;
+    padding-right: 1.5rem;
+    height: 3.5rem;
+    line-height: 3.5rem;
+  }
+`;

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

@@ -1,7 +1,7 @@
 import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import type { CSSResultGroup, TemplateResult } from 'lit';
 /**
- * @summary 列表标题组件。需与 `<mdui-list>` 组件配合使用
+ * @summary 列表标题组件。需配合 `<mdui-list>` 组件使用
  *
  * ```html
  * <mdui-list>
@@ -11,7 +11,7 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
  * </mdui-list>
  * ```
  *
- * @slot - 文本
+ * @slot - 列表标题文本
  */
 export declare class ListSubheader extends MduiElement<ListSubheaderEventMap> {
     static styles: CSSResultGroup;

package/components/list/list-subheader.js

@@ -5,7 +5,7 @@ import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
 import { listSubheaderStyle } from './list-subheader-style.js';
 /**
- * @summary 列表标题组件。需与 `<mdui-list>` 组件配合使用
+ * @summary 列表标题组件。需配合 `<mdui-list>` 组件使用
  *
  * ```html
  * <mdui-list>
@@ -15,7 +15,7 @@ import { listSubheaderStyle } from './list-subheader-style.js';
  * </mdui-list>
  * ```
  *
- * @slot - 文本
+ * @slot - 列表标题文本
  */
 let ListSubheader = class ListSubheader extends MduiElement {
     render() {

package/components/list/list.d.ts

@@ -1,7 +1,7 @@
 import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import type { CSSResultGroup, TemplateResult } from 'lit';
 /**
- * @summary 列表组件。需与 `<mdui-list-item>` 组件配合使用
+ * @summary 列表组件。需配合 `<mdui-list-item>` 组件使用
  *
  * ```html
  * <mdui-list>

package/components/list/list.js

@@ -5,7 +5,7 @@ import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
 import { listStyle } from './list-style.js';
 /**
- * @summary 列表组件。需与 `<mdui-list-item>` 组件配合使用
+ * @summary 列表组件。需配合 `<mdui-list-item>` 组件使用
  *
  * ```html
  * <mdui-list>