mdui 2.0.3 → 2.0.5

package/components/dropdown/index.js

@@ -30,72 +30,72 @@ import { style } from './style.js';
  * </mdui-dropdown>
  * ```
  *
- * @event open - dropdown 开始打开时，事件被触发。可以通过调用 `event.preventDefault()` 阻止 dropdown 打开
- * @event opened - dropdown 打开动画完成时，事件被触发
- * @event close - dropdown 开始关闭时，事件被触发。可以通过调用 `event.preventDefault()` 阻止 dropdown 关闭
- * @event closed - dropdown 关闭动画完成时，事件被触发
+ * @event open - 下拉组件开始打开时，事件被触发。可以通过调用 `event.preventDefault()` 阻止下拉组件打开
+ * @event opened - 下拉组件打开动画完成时，事件被触发
+ * @event close - 下拉组件开始关闭时，事件被触发。可以通过调用 `event.preventDefault()` 阻止下拉组件关闭
+ * @event closed - 下拉组件关闭动画完成时，事件被触发
  *
- * @slot - dropdown 的内容
- * @slot trigger - 触发 dropdown 的元素，例如 [`<mdui-button>`](/docs/2/components/button) 元素
+ * @slot - 下拉组件的内容
+ * @slot trigger - 触发下拉组件的元素，例如 [`<mdui-button>`](/docs/2/components/button) 元素
  *
- * @csspart trigger - 触发 dropdown 的元素的容器，即 `trigger` slot 的容器
- * @csspart panel - dropdown 内容的容器
+ * @csspart trigger - 触发下拉组件的元素的容器，即 `trigger` slot 的容器
+ * @csspart panel - 下拉组件内容的容器
  *
- * @cssprop --z-index - 组件的 CSS 的 `z-index` 值
+ * @cssprop --z-index - 组件的 CSS `z-index` 值
  */
 let Dropdown = class Dropdown extends MduiElement {
     constructor() {
         super();
         /**
-         * dropdown 是否打开
+         * 是否打开下拉组件
          */
         this.open = false;
         /**
-         * 是否禁用 dropdown
+         * 是否禁用下拉组件
          */
         this.disabled = false;
         /**
-         * dropdown 的触发方式，支持传入多个值，用空格分隔。可选值为：
+         * 下拉组件的触发方式，支持多个值，用空格分隔。可选值包括：
          *
-         * * `click`：点击时触发
+         * * `click`：点击触发
          * * `hover`：鼠标悬浮触发
-         * * `focus`：聚焦时触发
-         * * `contextmenu`：鼠标右键点击、或触摸长按时触发
-         * * `manual`：使用了该值时，只能使用编程方式打开和关闭 dropdown，且不能再指定其他触发方式
+         * * `focus`：聚焦触发
+         * * `contextmenu`：鼠标右键点击、或触摸长按触发
+         * * `manual`：仅能通过编程方式打开和关闭下拉组件，不能再指定其他触发方式
          */
         this.trigger = 'click';
         /**
-         * dropdown 内容的位置。可选值为：
+         * 下拉组件内容的位置。可选值包括：
          *
          * * `auto`：自动判断位置
-         * * `top-start`：位于上方，且左对齐
-         * * `top`：位于上方，且居中对齐
-         * * `top-end`：位于上方，且右对齐
-         * * `bottom-start`：位于下方，且左对齐
-         * * `bottom`：位于下方，且居中对齐
-         * * `bottom-end`：位于下方，且右对齐
-         * * `left-start`：位于左侧，且顶部对齐
-         * * `left`：位于左侧，且居中对齐
-         * * `left-end`：位于左侧，且底部对齐
-         * * `right-start`：位于右侧，且顶部对齐
-         * * `right`：位于右侧，且居中对齐
-         * * `right-end`：位于右侧，且底部对齐
+         * * `top-start`：上方左对齐
+         * * `top`：上方居中
+         * * `top-end`：上方右对齐
+         * * `bottom-start`：下方左对齐
+         * * `bottom`：下方居中
+         * * `bottom-end`：下方右对齐
+         * * `left-start`：左侧顶部对齐
+         * * `left`：左侧居中
+         * * `left-end`：左侧底部对齐
+         * * `right-start`：右侧顶部对齐
+         * * `right`：右侧居中
+         * * `right-end`：右侧底部对齐
          */
         this.placement = 'auto';
         /**
-         * 在点击 [`<mdui-menu-item>`](/docs/2/components/menu#menu-item-api) 元素后，是否仍保持 dropdown 为打开状态
+         * 点击 [`<mdui-menu-item>`](/docs/2/components/menu#menu-item-api) 后，下拉组件是否保持打开状态
          */
         this.stayOpenOnClick = false;
         /**
-         * 通过 hover 触发 dropdown 打开时的延时，单位为毫秒
+         * 鼠标悬浮触发下拉组件打开的延时，单位为毫秒
          */
         this.openDelay = 150;
         /**
-         * 通过 hover 触发 dropdown 关闭时的延时，单位为毫秒
+         * 鼠标悬浮触发下拉组件关闭的延时，单位为毫秒
          */
         this.closeDelay = 150;
         /**
-         * 是否在触发 dropdown 时的光标所在的位置打开 dropdown。通常用于在打开鼠标右键菜单时使用
+         * 是否在触发下拉组件的光标位置打开下拉组件，常用于打开鼠标右键菜单
          */
         this.openOnPointer = false;
         this.panelRef = createRef();
@@ -234,7 +234,14 @@ let Dropdown = class Dropdown extends MduiElement {
         });
     }
     render() {
-        return html `<slot name="trigger" part="trigger" class="trigger"></slot><slot ${ref(this.panelRef)} part="panel" class="panel" hidden @click="${this.onPanelClick}"></slot>`;
+        return html `<slot name="trigger" part="trigger" class="trigger"></slot>
+      <slot
+        ${ref(this.panelRef)}
+        part="panel"
+        class="panel"
+        hidden
+        @click=${this.onPanelClick}
+      ></slot>`;
     }
     /**
      * 获取 dropdown 打开、关闭动画的 CSS scaleX 或 scaleY

package/components/dropdown/style.js

@@ -1,2 +1,12 @@
 import { css } from 'lit';
-export const style = css `:host{--z-index:2100;display:contents}.panel{display:block;position:fixed;z-index:var(--z-index)}`;
+export const style = css `
+  :host {
+    --z-index: 2100;
+    display: contents;
+  }
+  .panel {
+    display: block;
+    position: fixed;
+    z-index: var(--z-index);
+  }
+`;

package/components/fab/index.d.ts

@@ -16,19 +16,19 @@ import type { TemplateResult, CSSResultGroup } from 'lit';
  * @slot - 文本
  * @slot icon - 图标
  *
- * @csspart button - 内部的 `button` 或 `a` 元素
+ * @csspart button - 内部的 `<button>` 或 `<a>` 元素
  * @csspart label - 右侧的文本
  * @csspart icon - 左侧的图标
  * @csspart loading - 加载中状态的 `<mdui-circular-progress>` 元素
  *
- * @cssprop --shape-corner-small - `size="small"` 时，组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
- * @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)
+ * @cssprop --shape-corner-small - `size="small"` 时，组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @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<FabEventMap> {
     static styles: CSSResultGroup;
     /**
-     * FAB 形状，此组件的不同形状之间只有颜色不一样。可选值为：
+     * FAB 的形状，此组件的不同形状之间只有颜色不一样。可选值包括：
      *
      * * `primary`：使用 Primary container 背景色
      * * `surface`：使用 Surface container high 背景色
@@ -37,7 +37,7 @@ export declare class Fab extends ButtonBase<FabEventMap> {
      */
     variant: /*使用 Primary container 背景色*/ 'primary' | /*使用 Surface container high 背景色*/ 'surface' | /*使用 Secondary container 背景色*/ 'secondary' | /*使用 Tertiary container 背景色*/ 'tertiary';
     /**
-     * FAB 大小。可选值为：
+     * FAB 的大小。可选值包括：
      * * `normal`：普通大小 FAB
      * * `small`：小型 FAB
      * * `large`：大型 FAB

package/components/fab/index.js

@@ -26,20 +26,20 @@ import { style } from './style.js';
  * @slot - 文本
  * @slot icon - 图标
  *
- * @csspart button - 内部的 `button` 或 `a` 元素
+ * @csspart button - 内部的 `<button>` 或 `<a>` 元素
  * @csspart label - 右侧的文本
  * @csspart icon - 左侧的图标
  * @csspart loading - 加载中状态的 `<mdui-circular-progress>` 元素
  *
- * @cssprop --shape-corner-small - `size="small"` 时，组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
- * @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)
+ * @cssprop --shape-corner-small - `size="small"` 时，组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @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)
  */
 let Fab = class Fab extends ButtonBase {
     constructor() {
         super(...arguments);
         /**
-         * FAB 形状，此组件的不同形状之间只有颜色不一样。可选值为：
+         * FAB 的形状，此组件的不同形状之间只有颜色不一样。可选值包括：
          *
          * * `primary`：使用 Primary container 背景色
          * * `surface`：使用 Surface container high 背景色
@@ -48,7 +48,7 @@ let Fab = class Fab extends ButtonBase {
          */
         this.variant = 'primary';
         /**
-         * FAB 大小。可选值为：
+         * FAB 的大小。可选值包括：
          * * `normal`：普通大小 FAB
          * * `small`：小型 FAB
          * * `large`：大型 FAB
@@ -94,14 +94,20 @@ let Fab = class Fab extends ButtonBase {
             button: true,
             'has-icon': this.icon || this.hasSlotController.test('icon'),
         });
-        return html `<mdui-ripple ${ref(this.rippleRef)} .noRipple="${this.noRipple}"></mdui-ripple>${this.isButton()
+        return html `<mdui-ripple
+        ${ref(this.rippleRef)}
+        .noRipple=${this.noRipple}
+      ></mdui-ripple>
+      ${this.isButton()
             ? this.renderButton({
                 className,
                 part: 'button',
                 content: this.renderInner(),
             })
             : this.disabled || this.loading
-                ? html `<span part="button" class="_a ${className}">${this.renderInner()}</span>`
+                ? html `<span part="button" class="_a ${className}">
+            ${this.renderInner()}
+          </span>`
                 : this.renderAnchor({
                     className,
                     part: 'button',
@@ -115,9 +121,11 @@ let Fab = class Fab extends ButtonBase {
         if (this.loading) {
             return this.renderLoading();
         }
-        return html `<slot name="icon" part="icon" class="icon">${this.icon
-            ? html `<mdui-icon name="${this.icon}"></mdui-icon>`
-            : nothingTemplate}</slot>`;
+        return html `<slot name="icon" part="icon" class="icon">
+      ${this.icon
+            ? html `<mdui-icon name=${this.icon}></mdui-icon>`
+            : nothingTemplate}
+    </slot>`;
     }
     renderInner() {
         return [this.renderIcon(), this.renderLabel()];

package/components/fab/style.js

@@ -1,8 +1,157 @@
 import { css } from 'lit';
-export const style = css `:host{--shape-corner-small:var(--mdui-shape-corner-small);--shape-corner-normal:var(--mdui-shape-corner-large);--shape-corner-large:var(--mdui-shape-corner-extra-large);position:relative;display:inline-block;overflow:hidden;text-align:center;border-radius:var(--shape-corner-normal);cursor:pointer;-webkit-tap-highlight-color:transparent;transition-property:box-shadow;transition-timing-function:var(--mdui-motion-easing-emphasized);transition-duration:var(--mdui-motion-duration-medium4);width:3.5rem;height:3.5rem;box-shadow:var(--mdui-elevation-level3);font-size:var(--mdui-typescale-label-large-size);font-weight:var(--mdui-typescale-label-large-weight);letter-spacing:var(--mdui-typescale-label-large-tracking);line-height:var(--mdui-typescale-label-large-line-height)}.button{padding:0 1rem}:host([size=small]) .button{padding:0 .5rem}:host([size=large]) .button{padding:0 1.875rem}:host([lowered]){box-shadow:var(--mdui-elevation-level1)}:host([focus-visible]){box-shadow:var(--mdui-elevation-level3)}:host([lowered][focus-visible]){box-shadow:var(--mdui-elevation-level1)}:host([pressed]){box-shadow:var(--mdui-elevation-level3)}:host([lowered][pressed]){box-shadow:var(--mdui-elevation-level1)}:host([hover]){box-shadow:var(--mdui-elevation-level4)}:host([lowered][hover]){box-shadow:var(--mdui-elevation-level2)}:host([variant=primary]){color:rgb(var(--mdui-color-on-primary-container));background-color:rgb(var(--mdui-color-primary-container));--mdui-comp-ripple-state-layer-color:var(
+export const style = css `
+  /**
+ * mdui-fab 组件。默认为 variant="primary" size="normal"
+ */
+  :host {
+    --shape-corner-small: var(--mdui-shape-corner-small);
+    --shape-corner-normal: var(--mdui-shape-corner-large);
+    --shape-corner-large: var(--mdui-shape-corner-extra-large);
+    position: relative;
+    display: inline-block;
+    overflow: hidden;
+    text-align: center;
+    border-radius: var(--shape-corner-normal);
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+    transition-property: box-shadow;
+    transition-timing-function: var(--mdui-motion-easing-emphasized);
+    transition-duration: var(--mdui-motion-duration-medium4);
+    width: 3.5rem;
+    height: 3.5rem;
+    box-shadow: var(--mdui-elevation-level3);
+    font-size: var(--mdui-typescale-label-large-size);
+    font-weight: var(--mdui-typescale-label-large-weight);
+    letter-spacing: var(--mdui-typescale-label-large-tracking);
+    line-height: var(--mdui-typescale-label-large-line-height);
+  }
+  .button {
+    padding: 0rem 1rem;
+  }
+  :host([size='small']) .button {
+    padding: 0rem 0.5rem;
+  }
+  :host([size='large']) .button {
+    padding: 0rem 1.875rem;
+  }
+  :host([lowered]) {
+    box-shadow: var(--mdui-elevation-level1);
+  }
+  :host([focus-visible]) {
+    box-shadow: var(--mdui-elevation-level3);
+  }
+  :host([lowered][focus-visible]) {
+    box-shadow: var(--mdui-elevation-level1);
+  }
+  :host([pressed]) {
+    box-shadow: var(--mdui-elevation-level3);
+  }
+  :host([lowered][pressed]) {
+    box-shadow: var(--mdui-elevation-level1);
+  }
+  :host([hover]) {
+    box-shadow: var(--mdui-elevation-level4);
+  }
+  :host([lowered][hover]) {
+    box-shadow: var(--mdui-elevation-level2);
+  }
+  :host([variant='primary']) {
+    color: rgb(var(--mdui-color-on-primary-container));
+    background-color: rgb(var(--mdui-color-primary-container));
+    --mdui-comp-ripple-state-layer-color: var(
       --mdui-color-on-primary-container
-    )}:host([variant=surface]){color:rgb(var(--mdui-color-primary));background-color:rgb(var(--mdui-color-surface-container-high));--mdui-comp-ripple-state-layer-color:var(--mdui-color-primary)}:host([variant=surface][lowered]){background-color:rgb(var(--mdui-color-surface-container-low))}:host([variant=secondary]){color:rgb(var(--mdui-color-on-secondary-container));background-color:rgb(var(--mdui-color-secondary-container));--mdui-comp-ripple-state-layer-color:var(
+    );
+  }
+  :host([variant='surface']) {
+    color: rgb(var(--mdui-color-primary));
+    background-color: rgb(var(--mdui-color-surface-container-high));
+    --mdui-comp-ripple-state-layer-color: var(--mdui-color-primary);
+  }
+  :host([variant='surface'][lowered]) {
+    background-color: rgb(var(--mdui-color-surface-container-low));
+  }
+  :host([variant='secondary']) {
+    color: rgb(var(--mdui-color-on-secondary-container));
+    background-color: rgb(var(--mdui-color-secondary-container));
+    --mdui-comp-ripple-state-layer-color: var(
       --mdui-color-on-secondary-container
-    )}:host([variant=tertiary]){color:rgb(var(--mdui-color-on-tertiary-container));background-color:rgb(var(--mdui-color-tertiary-container));--mdui-comp-ripple-state-layer-color:var(
+    );
+  }
+  :host([variant='tertiary']) {
+    color: rgb(var(--mdui-color-on-tertiary-container));
+    background-color: rgb(var(--mdui-color-tertiary-container));
+    --mdui-comp-ripple-state-layer-color: var(
       --mdui-color-on-tertiary-container
-    )}:host([size=small]){border-radius:var(--shape-corner-small);width:2.5rem;height:2.5rem}:host([size=large]){border-radius:var(--shape-corner-large);width:6rem;height:6rem}:host([disabled]),:host([loading]){cursor:default;pointer-events:none}:host([disabled]){color:rgba(var(--mdui-color-on-surface),38%);background-color:rgba(var(--mdui-color-on-surface),12%);box-shadow:var(--mdui-elevation-level0)}:host([extended]){width:auto}.label{display:inline-flex;transition:opacity var(--mdui-motion-duration-short2) var(--mdui-motion-easing-linear) var(--mdui-motion-duration-short2);padding-left:.25rem;padding-right:.25rem}.has-icon .label{margin-left:.5rem}:host([size=small]) .has-icon .label{margin-left:.25rem}:host([size=large]) .has-icon .label{margin-left:1rem}:host(:not([extended])) .label{opacity:0;transition-delay:0s;transition-duration:var(--mdui-motion-duration-short1)}:host([size=large]) .label{font-size:1.5em}.icon{display:inline-flex;font-size:1.71428571em}:host([size=large]) .icon{font-size:2.57142857em}.icon mdui-icon,::slotted([slot=icon]){font-size:inherit}mdui-circular-progress{display:inline-flex;width:1.5rem;height:1.5rem}:host([size=large]) mdui-circular-progress{width:2.25rem;height:2.25rem}:host([disabled]) mdui-circular-progress{stroke:rgba(var(--mdui-color-on-surface),38%)}`;
+    );
+  }
+  :host([size='small']) {
+    border-radius: var(--shape-corner-small);
+    width: 2.5rem;
+    height: 2.5rem;
+  }
+  :host([size='large']) {
+    border-radius: var(--shape-corner-large);
+    width: 6rem;
+    height: 6rem;
+  }
+  :host([disabled]),
+  :host([loading]) {
+    cursor: default;
+    pointer-events: none;
+  }
+  :host([disabled]) {
+    color: rgba(var(--mdui-color-on-surface), 38%);
+    background-color: rgba(var(--mdui-color-on-surface), 12%);
+    box-shadow: var(--mdui-elevation-level0);
+  }
+  :host([extended]) {
+    width: auto;
+  }
+  .label {
+    display: inline-flex;
+    transition: opacity var(--mdui-motion-duration-short2)
+      var(--mdui-motion-easing-linear) var(--mdui-motion-duration-short2);
+    padding-left: 0.25rem;
+    padding-right: 0.25rem;
+  }
+  .has-icon .label {
+    margin-left: 0.5rem;
+  }
+  :host([size='small']) .has-icon .label {
+    margin-left: 0.25rem;
+  }
+  :host([size='large']) .has-icon .label {
+    margin-left: 1rem;
+  }
+  :host(:not([extended])) .label {
+    opacity: 0;
+    transition-delay: 0ms;
+    transition-duration: var(--mdui-motion-duration-short1);
+  }
+  :host([size='large']) .label {
+    font-size: 1.5em;
+  }
+  .icon {
+    display: inline-flex;
+    font-size: 1.71428571em;
+  }
+  :host([size='large']) .icon {
+    font-size: 2.57142857em;
+  }
+  .icon mdui-icon,
+  ::slotted([slot='icon']) {
+    font-size: inherit;
+  }
+  mdui-circular-progress {
+    display: inline-flex;
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  :host([size='large']) mdui-circular-progress {
+    width: 2.25rem;
+    height: 2.25rem;
+  }
+  :host([disabled]) mdui-circular-progress {
+    stroke: rgba(var(--mdui-color-on-surface), 38%);
+  }
+`;

package/components/icon/index.js

@@ -34,7 +34,11 @@ let Icon = class Icon extends MduiElement {
                     ['sharp', 'Material Icons Sharp'],
                     ['two-tone', 'Material Icons Two Tone'],
                 ]);
-                return html `<span style="${styleMap({ fontFamily: familyMap.get(variant) })}">${name}</span>`;
+                return html `<span
+          style=${styleMap({ fontFamily: familyMap.get(variant) })}
+        >
+          ${name}
+        </span>`;
             }
             if (this.src) {
                 return html `${until(ajax({ url: this.src }).then(unsafeSVG))}`;

package/components/icon/style.js

@@ -1,2 +1,30 @@
 import { css } from 'lit';
-export const style = css `:host{display:inline-block;width:1em;height:1em;font-weight:400;font-family:'Material Icons';font-style:normal;line-height:1;direction:ltr;letter-spacing:normal;white-space:nowrap;text-transform:none;word-wrap:normal;-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;-moz-osx-font-smoothing:grayscale;font-size:1.5rem}::slotted(svg),svg{width:100%;height:100%;fill:currentcolor}`;
+export const style = css `
+  :host {
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    font-weight: normal;
+    font-family: 'Material Icons';
+    font-style: normal;
+    line-height: 1;
+    direction: ltr;
+    letter-spacing: normal;
+    white-space: nowrap;
+    text-transform: none;
+    word-wrap: normal;
+    /* Support for all WebKit browsers. */
+    -webkit-font-smoothing: antialiased;
+    /* Support for Safari and Chrome. */
+    text-rendering: optimizelegibility;
+    /* Support for Firefox. */
+    -moz-osx-font-smoothing: grayscale;
+    font-size: 1.5rem;
+  }
+  svg,
+  ::slotted(svg) {
+    width: 100%;
+    height: 100%;
+    fill: currentcolor;
+  }
+`;

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

@@ -1,2 +1,7 @@
 import { css } from 'lit';
-export const layoutItemStyle = css `:host{display:flex;z-index:1}`;
+export const layoutItemStyle = css `
+  :host {
+    display: flex;
+    z-index: 1;
+  }
+`;

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

@@ -12,19 +12,19 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
  * </mdui-layout>
  * ```
  *
- * @slot - 可以是任意内容
+ * @slot - 可以包含任意内容
  */
 export declare class LayoutItem extends LayoutItemBase<LayoutItemEventMap> {
     static styles: CSSResultGroup;
     /**
-     * 该组件所处位置。可选值为：
+     * 组件的位置。可选值包括：
      *
-     * * `top`：位于上方
-     * * `bottom`：位于下方
-     * * `left`：位于左侧
-     * * `right`：位于右侧
+     * * `top`：上方
+     * * `bottom`：下方
+     * * `left`：左侧
+     * * `right`：右侧
      */
-    placement: /*位于上方*/ 'top' | /*位于下方*/ 'bottom' | /*位于左侧*/ 'left' | /*位于右侧*/ 'right';
+    placement: /*上方*/ 'top' | /*下方*/ 'bottom' | /*左侧*/ 'left' | /*右侧*/ 'right';
     protected get layoutPlacement(): LayoutPlacement;
     private onPlacementChange;
     protected render(): TemplateResult;

package/components/layout/layout-item.js

@@ -16,18 +16,18 @@ import { layoutItemStyle } from './layout-item-style.js';
  * </mdui-layout>
  * ```
  *
- * @slot - 可以是任意内容
+ * @slot - 可以包含任意内容
  */
 let LayoutItem = class LayoutItem extends LayoutItemBase {
     constructor() {
         super(...arguments);
         /**
-         * 该组件所处位置。可选值为：
+         * 组件的位置。可选值包括：
          *
-         * * `top`：位于上方
-         * * `bottom`：位于下方
-         * * `left`：位于左侧
-         * * `right`：位于右侧
+         * * `top`：上方
+         * * `bottom`：下方
+         * * `left`：左侧
+         * * `right`：右侧
          */
         this.placement = 'top';
     }

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

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

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

@@ -1,7 +1,7 @@
 import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import type { CSSResultGroup, TemplateResult } from 'lit';
 /**
- * @summary 布局主内容组件
+ * @summary 布局主体内容组件
  *
  * ```html
  * <mdui-layout>
@@ -11,7 +11,7 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
  * </mdui-layout>
  * ```
  *
- * @slot - 可以是任意内容
+ * @slot - 可以包含任意内容
  */
 export declare class LayoutMain extends MduiElement<LayoutMainEventMap> {
     static styles: CSSResultGroup;

package/components/layout/layout-main.js

@@ -7,7 +7,7 @@ import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
 import { getLayout } from './helper.js';
 import { layoutMainStyle } from './layout-main-style.js';
 /**
- * @summary 布局主内容组件
+ * @summary 布局主体内容组件
  *
  * ```html
  * <mdui-layout>
@@ -17,7 +17,7 @@ import { layoutMainStyle } from './layout-main-style.js';
  * </mdui-layout>
  * ```
  *
- * @slot - 可以是任意内容
+ * @slot - 可以包含任意内容
  */
 let LayoutMain = class LayoutMain extends MduiElement {
     connectedCallback() {

package/components/layout/layout-style.js

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

@@ -11,12 +11,12 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
  * </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>` 元素
+ * @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 MduiElement<LayoutEventMap> {
     static styles: CSSResultGroup;
     /**
-     * 把当前布局的高度设为 100%
+     * 设置当前布局的高度为 100%
      */
     fullHeight: boolean;
     protected render(): TemplateResult;

package/components/layout/layout.js

@@ -16,13 +16,13 @@ import { layoutStyle } from './layout-style.js';
  * </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>` 元素
+ * @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 MduiElement {
     constructor() {
         super(...arguments);
         /**
-         * 把当前布局的高度设为 100%
+         * 设置当前布局的高度为 100%
          */
         this.fullHeight = false;
     }

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

@@ -7,18 +7,18 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
  * <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)
  */
 export declare class LinearProgress extends MduiElement<LinearProgressEventMap> {
     static styles: CSSResultGroup;
     /**
-     * 进度指示器的最大值，默认为 1
+     * 进度指示器的最大值。默认为 `1`
      */
     max: number;
     /**
-     * 进度指示器的当前值。若未指定该值，则为不确定状态
+     * 进度指示器的当前值。如果未指定该值，则处于不确定状态
      */
     value?: number;
     protected render(): TemplateResult;