mdui 2.0.3 → 2.0.5

package/components/slider/slider-base-style.js

@@ -1,2 +1,174 @@
 import { css } from 'lit';
-export const sliderBaseStyle = css `:host{position:relative;display:block;width:100%;-webkit-tap-highlight-color:transparent;height:2.5rem;padding:0 1.25rem}label{position:relative;display:block;width:100%;height:100%}input[type=range]{position:absolute;inset:0;z-index:4;height:100%;cursor:pointer;opacity:0;-webkit-appearance:none;appearance:none;width:calc(100% + 20rem * 2 / 16);margin:0 -1.25rem;padding:0 .75rem}:host([disabled]) input[type=range]{cursor:not-allowed}.track-active,.track-inactive{position:absolute;top:50%;height:.25rem;margin-top:-.125rem}.track-inactive{left:-.125rem;right:-.125rem;border-radius:var(--mdui-shape-corner-full);background-color:rgb(var(--mdui-color-surface-container-highest))}.invalid .track-inactive{background-color:rgba(var(--mdui-color-error),.12)}:host([disabled]) .track-inactive{background-color:rgba(var(--mdui-color-on-surface),.12)}.track-active{background-color:rgb(var(--mdui-color-primary))}.invalid .track-active{background-color:rgb(var(--mdui-color-error))}:host([disabled]) .track-active{background-color:rgba(var(--mdui-color-on-surface),.38)}.handle{position:absolute;top:50%;transform:translate(-50%);cursor:pointer;z-index:2;width:2.5rem;height:2.5rem;margin-top:-1.25rem;--mdui-comp-ripple-state-layer-color:var(--mdui-color-primary)}.invalid .handle{--mdui-comp-ripple-state-layer-color:var(--mdui-color-error)}.handle .elevation,.handle::before{position:absolute;display:block;content:' ';left:.625rem;top:.625rem;width:1.25rem;height:1.25rem;border-radius:var(--mdui-shape-corner-full)}.handle .elevation{background-color:rgb(var(--mdui-color-primary));box-shadow:var(--mdui-elevation-level1)}.invalid .handle .elevation{background-color:rgb(var(--mdui-color-error))}:host([disabled]) .handle .elevation{background-color:rgba(var(--mdui-color-on-surface),.38);box-shadow:var(--mdui-elevation-level0)}.handle::before{background-color:rgb(var(--mdui-color-background))}.handle mdui-ripple{border-radius:var(--mdui-shape-corner-full)}.label{position:absolute;left:50%;transform:translateX(-50%) scale(0);transform-origin:center bottom;display:flex;align-items:center;justify-content:center;cursor:default;white-space:nowrap;-webkit-user-select:none;user-select:none;pointer-events:none;transition:transform var(--mdui-motion-duration-short2) var(--mdui-motion-easing-standard);bottom:2.5rem;min-width:1.75rem;height:1.75rem;padding:.375rem .5rem;border-radius:var(--mdui-shape-corner-full);color:rgb(var(--mdui-color-on-primary));font-size:var(--mdui-typescale-label-medium-size);font-weight:var(--mdui-typescale-label-medium-weight);letter-spacing:var(--mdui-typescale-label-medium-tracking);line-height:var(--mdui-typescale-label-medium-line-height);background-color:rgb(var(--mdui-color-primary))}.invalid .label{color:rgb(var(--mdui-color-on-error));background-color:rgb(var(--mdui-color-error))}.label::after{content:' ';position:absolute;z-index:-1;transform:rotate(45deg);width:.875rem;height:.875rem;bottom:-.125rem;background-color:rgb(var(--mdui-color-primary))}.invalid .label::after{background-color:rgb(var(--mdui-color-error))}.label-visible{transform:translateX(-50%) scale(1);transition:transform var(--mdui-motion-duration-short4) var(--mdui-motion-easing-standard)}.tickmark{position:absolute;top:50%;transform:translate(-50%);width:.125rem;height:.125rem;margin-top:-.0625rem;border-radius:var(--mdui-shape-corner-full);background-color:rgba(var(--mdui-color-on-surface-variant),.38)}.invalid .tickmark{background-color:rgba(var(--mdui-color-error),.38)}.tickmark.active{background-color:rgba(var(--mdui-color-on-primary),.38)}.invalid .tickmark.active{background-color:rgba(var(--mdui-color-on-error),.38)}:host([disabled]) .tickmark{background-color:rgba(var(--mdui-color-on-surface),.38)}`;
+export const sliderBaseStyle = css `
+  :host {
+    position: relative;
+    display: block;
+    width: 100%;
+    -webkit-tap-highlight-color: transparent;
+    height: 2.5rem;
+    padding: 0rem 1.25rem;
+  }
+  label {
+    position: relative;
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+  input[type='range'] {
+    position: absolute;
+    inset: 0;
+    z-index: 4;
+    height: 100%;
+    cursor: pointer;
+    opacity: 0;
+    -webkit-appearance: none;
+    appearance: none;
+    width: calc(100% + 20rem * 2 / 16);
+    margin: 0rem -1.25rem;
+    padding: 0rem 0.75rem;
+  }
+  :host([disabled]) input[type='range'] {
+    cursor: not-allowed;
+  }
+  .track-inactive,
+  .track-active {
+    position: absolute;
+    top: 50%;
+    height: 0.25rem;
+    margin-top: -0.125rem;
+  }
+  .track-inactive {
+    left: -0.125rem;
+    right: -0.125rem;
+    border-radius: var(--mdui-shape-corner-full);
+    background-color: rgb(var(--mdui-color-surface-container-highest));
+  }
+  .invalid .track-inactive {
+    background-color: rgba(var(--mdui-color-error), 0.12);
+  }
+  :host([disabled]) .track-inactive {
+    background-color: rgba(var(--mdui-color-on-surface), 0.12);
+  }
+  .track-active {
+    background-color: rgb(var(--mdui-color-primary));
+  }
+  .invalid .track-active {
+    background-color: rgb(var(--mdui-color-error));
+  }
+  :host([disabled]) .track-active {
+    background-color: rgba(var(--mdui-color-on-surface), 0.38);
+  }
+  .handle {
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%);
+    cursor: pointer;
+    z-index: 2;
+    width: 2.5rem;
+    height: 2.5rem;
+    margin-top: -1.25rem;
+    --mdui-comp-ripple-state-layer-color: var(--mdui-color-primary);
+  }
+  .invalid .handle {
+    --mdui-comp-ripple-state-layer-color: var(--mdui-color-error);
+  }
+  .handle::before,
+  .handle .elevation {
+    position: absolute;
+    display: block;
+    content: ' ';
+    left: 0.625rem;
+    top: 0.625rem;
+    width: 1.25rem;
+    height: 1.25rem;
+    border-radius: var(--mdui-shape-corner-full);
+  }
+  .handle .elevation {
+    background-color: rgb(var(--mdui-color-primary));
+    box-shadow: var(--mdui-elevation-level1);
+  }
+  .invalid .handle .elevation {
+    background-color: rgb(var(--mdui-color-error));
+  }
+  :host([disabled]) .handle .elevation {
+    background-color: rgba(var(--mdui-color-on-surface), 0.38);
+    box-shadow: var(--mdui-elevation-level0);
+  }
+  .handle::before {
+    background-color: rgb(var(--mdui-color-background));
+  }
+  .handle mdui-ripple {
+    border-radius: var(--mdui-shape-corner-full);
+  }
+  .label {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%) scale(0);
+    transform-origin: center bottom;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: default;
+    white-space: nowrap;
+    -webkit-user-select: none;
+    user-select: none;
+    pointer-events: none;
+    transition: transform var(--mdui-motion-duration-short2)
+      var(--mdui-motion-easing-standard);
+    bottom: 2.5rem;
+    min-width: 1.75rem;
+    height: 1.75rem;
+    padding: 0.375rem 0.5rem;
+    border-radius: var(--mdui-shape-corner-full);
+    color: rgb(var(--mdui-color-on-primary));
+    font-size: var(--mdui-typescale-label-medium-size);
+    font-weight: var(--mdui-typescale-label-medium-weight);
+    letter-spacing: var(--mdui-typescale-label-medium-tracking);
+    line-height: var(--mdui-typescale-label-medium-line-height);
+    background-color: rgb(var(--mdui-color-primary));
+  }
+  .invalid .label {
+    color: rgb(var(--mdui-color-on-error));
+    background-color: rgb(var(--mdui-color-error));
+  }
+  .label::after {
+    content: ' ';
+    position: absolute;
+    z-index: -1;
+    transform: rotate(45deg);
+    width: 0.875rem;
+    height: 0.875rem;
+    bottom: -0.125rem;
+    background-color: rgb(var(--mdui-color-primary));
+  }
+  .invalid .label::after {
+    background-color: rgb(var(--mdui-color-error));
+  }
+  .label-visible {
+    transform: translateX(-50%) scale(1);
+    transition: transform var(--mdui-motion-duration-short4)
+      var(--mdui-motion-easing-standard);
+  }
+  .tickmark {
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%);
+    width: 0.125rem;
+    height: 0.125rem;
+    margin-top: -0.0625rem;
+    border-radius: var(--mdui-shape-corner-full);
+    background-color: rgba(var(--mdui-color-on-surface-variant), 0.38);
+  }
+  .invalid .tickmark {
+    background-color: rgba(var(--mdui-color-error), 0.38);
+  }
+  .tickmark.active {
+    background-color: rgba(var(--mdui-color-on-primary), 0.38);
+  }
+  .invalid .tickmark.active {
+    background-color: rgba(var(--mdui-color-on-error), 0.38);
+  }
+  :host([disabled]) .tickmark {
+    background-color: rgba(var(--mdui-color-on-surface), 0.38);
+  }
+`;

package/components/slider/slider-base.d.ts

@@ -5,11 +5,11 @@ declare const SliderBase_base: import("@open-wc/dedupe-mixin").Constructor<impor
 export declare class SliderBase<E> extends SliderBase_base<E> {
     static styles: CSSResultGroup;
     /**
-     * 最小允许值，默认为 `0`
+     * 滑块的最小值，默认为 `0`
      */
     min: number;
     /**
-     * 最大允许值，默认为 `100`
+     * 滑块的最大值，默认为 `100`
      */
     max: number;
     /**
@@ -21,21 +21,21 @@ export declare class SliderBase<E> extends SliderBase_base<E> {
      */
     tickmarks: boolean;
     /**
-     * 是否不显示文本提示
+     * 是否隐藏文本提示
      */
     nolabel: boolean;
     /**
-     * 是否禁用
+     * 是否被禁用
      */
     disabled: boolean;
     /**
-     * 关联的 `form` 元素。此属性值必须为同一页面中的一个 `<form>` 元素的 `id` 属性。
+     * 关联的 `<form>` 元素。此属性值应为同一页面中的一个 `<form>` 元素的 `id`。
      *
-     * 如果此属性未指定，则元素必须是 `form` 元素的后代。利用此属性，你可以将元素放置在页面中的任何位置，而不仅仅是作为 `form` 元素的后代。
+     * 如果未指定此属性，则该元素必须是 `<form>` 元素的子元素。通过此属性，你可以将元素放置在页面的任何位置，而不仅仅是 `<form>` 元素的子元素。
      */
     form?: string;
     /**
-     * 滑块名称，将与表单数据一起提交
+     * 滑块的名称，该名称将与表单数据一起提交
      */
     name: string;
     /**
@@ -48,35 +48,35 @@ export declare class SliderBase<E> extends SliderBase_base<E> {
     protected readonly inputRef: Ref<HTMLInputElement>;
     protected readonly trackActiveRef: Ref<HTMLElement>;
     /**
-     * 表单验证状态对象
+     * 表单验证状态对象，具体参见 [`ValidityState`](https://developer.mozilla.org/zh-CN/docs/Web/API/ValidityState)
      */
     get validity(): ValidityState;
     /**
-     * 表单验证的错误提示信息
+     * 如果表单验证未通过，此属性将包含提示信息。如果验证通过，此属性将为空字符串
      */
     get validationMessage(): string;
     protected get rippleDisabled(): boolean;
     protected get focusElement(): HTMLElement;
     protected get focusDisabled(): boolean;
     /**
-     * 用于自定义标签的显示格式
+     * 用于自定义标签的显示格式的函数。函数参数为滑块的当前值，返回值为期望显示的文本。
      */
     labelFormatter: (value: number) => string;
     private onDisabledChange;
     /**
-     * 检查表单字段是否验证通过。若未通过则返回 `false`，并触发 `invalid` 事件；若验证通过，则返回 `true`
+     * 检查表单字段是否通过验证。如果未通过，返回 `false` 并触发 `invalid` 事件；如果通过，返回 `true`
      */
     checkValidity(): boolean;
     /**
-     * 检查表单字段是否验证通过。若未通过则返回 `false`，并触发 `invalid` 事件；若验证通过，则返回 `true`。
+     * 检查表单字段是否通过验证。如果未通过，返回 `false` 并触发 `invalid` 事件；如果通过，返回 `true`。
      *
-     * 验证未通过时，还将在组件上显示未通过的提示。
+     * 如果验证未通过，还会在组件上显示验证失败的提示。
      */
     reportValidity(): boolean;
     /**
-     * 设置自定义的错误提示文本。只要文本不为空，则表示字段验证未通过
+     * 设置自定义的错误提示文本。只要这个文本不为空，就表示字段未通过验证
      *
-     * @param message 自定义的提示文本
+     * @param message 自定义的错误提示文本
      */
     setCustomValidity(message: string): void;
     /**

package/components/slider/slider-base.js

@@ -15,11 +15,11 @@ export class SliderBase extends RippleMixin(FocusableMixin(MduiElement)) {
     constructor() {
         super(...arguments);
         /**
-         * 最小允许值，默认为 `0`
+         * 滑块的最小值，默认为 `0`
          */
         this.min = 0;
         /**
-         * 最大允许值，默认为 `100`
+         * 滑块的最大值，默认为 `100`
          */
         this.max = 100;
         /**
@@ -31,15 +31,15 @@ export class SliderBase extends RippleMixin(FocusableMixin(MduiElement)) {
          */
         this.tickmarks = false;
         /**
-         * 是否不显示文本提示
+         * 是否隐藏文本提示
          */
         this.nolabel = false;
         /**
-         * 是否禁用
+         * 是否被禁用
          */
         this.disabled = false;
         /**
-         * 滑块名称，将与表单数据一起提交
+         * 滑块的名称，该名称将与表单数据一起提交
          */
         this.name = '';
         /**
@@ -53,18 +53,18 @@ export class SliderBase extends RippleMixin(FocusableMixin(MduiElement)) {
         this.inputRef = createRef();
         this.trackActiveRef = createRef();
         /**
-         * 用于自定义标签的显示格式
+         * 用于自定义标签的显示格式的函数。函数参数为滑块的当前值，返回值为期望显示的文本。
          */
         this.labelFormatter = (value) => value.toString();
     }
     /**
-     * 表单验证状态对象
+     * 表单验证状态对象，具体参见 [`ValidityState`](https://developer.mozilla.org/zh-CN/docs/Web/API/ValidityState)
      */
     get validity() {
         return this.inputRef.value.validity;
     }
     /**
-     * 表单验证的错误提示信息
+     * 如果表单验证未通过，此属性将包含提示信息。如果验证通过，此属性将为空字符串
      */
     get validationMessage() {
         return this.inputRef.value.validationMessage;
@@ -82,7 +82,7 @@ export class SliderBase extends RippleMixin(FocusableMixin(MduiElement)) {
         this.invalid = !this.inputRef.value.checkValidity();
     }
     /**
-     * 检查表单字段是否验证通过。若未通过则返回 `false`，并触发 `invalid` 事件；若验证通过，则返回 `true`
+     * 检查表单字段是否通过验证。如果未通过，返回 `false` 并触发 `invalid` 事件；如果通过，返回 `true`
      */
     checkValidity() {
         const valid = this.inputRef.value.checkValidity();
@@ -97,9 +97,9 @@ export class SliderBase extends RippleMixin(FocusableMixin(MduiElement)) {
         return valid;
     }
     /**
-     * 检查表单字段是否验证通过。若未通过则返回 `false`，并触发 `invalid` 事件；若验证通过，则返回 `true`。
+     * 检查表单字段是否通过验证。如果未通过，返回 `false` 并触发 `invalid` 事件；如果通过，返回 `true`。
      *
-     * 验证未通过时，还将在组件上显示未通过的提示。
+     * 如果验证未通过，还会在组件上显示验证失败的提示。
      */
     reportValidity() {
         this.invalid = !this.inputRef.value.reportValidity();
@@ -119,9 +119,9 @@ export class SliderBase extends RippleMixin(FocusableMixin(MduiElement)) {
         return !this.invalid;
     }
     /**
-     * 设置自定义的错误提示文本。只要文本不为空，则表示字段验证未通过
+     * 设置自定义的错误提示文本。只要这个文本不为空，就表示字段未通过验证
      *
-     * @param message 自定义的提示文本
+     * @param message 自定义的错误提示文本
      */
     setCustomValidity(message) {
         this.inputRef.value.setCustomValidity(message);
@@ -153,7 +153,12 @@ export class SliderBase extends RippleMixin(FocusableMixin(MduiElement)) {
      * 渲染浮动标签
      */
     renderLabel(value) {
-        return when(!this.nolabel, () => html `<div part="label" class="label ${classMap({ 'label-visible': this.labelVisible })}">${this.labelFormatter(value)}</div>`);
+        return when(!this.nolabel, () => html `<div
+          part="label"
+          class="label ${classMap({ 'label-visible': this.labelVisible })}"
+        >
+          ${this.labelFormatter(value)}
+        </div>`);
     }
     onChange() {
         // @ts-ignore

package/components/slider/style.js

@@ -1,2 +1,8 @@
 import { css } from 'lit';
-export const style = css `.track-active{left:-.125rem;border-radius:var(--mdui-shape-corner-full) 0 0 var(--mdui-shape-corner-full)}`;
+export const style = css `
+  .track-active {
+    left: -0.125rem;
+    border-radius: var(--mdui-shape-corner-full) 0 0
+      var(--mdui-shape-corner-full);
+  }
+`;

package/components/snackbar/index.d.ts

@@ -17,18 +17,18 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
  * @event closed - Snackbar 隐藏动画完成时，事件被触发
  * @event action-click - 点击操作按钮时触发
  *
- * @slot - Snackbar 中的消息文本内容
+ * @slot - Snackbar 的消息文本内容
  * @slot action - 右侧的操作按钮
- * @slot close-button - 右侧的关闭按钮。必须设置 `closeable` 属性为 `true` 才会显示该按钮
- * @slot close-icon - 右侧的关闭按钮中的图标
+ * @slot close-button - 右侧的关闭按钮。必须设置 `closeable` 属性为 `true` 才会显示
+ * @slot close-icon - 关闭按钮中的图标
  *
  * @csspart message - 消息文本
  * @csspart action - 操作按钮
  * @csspart close-button - 关闭按钮
  * @csspart close-icon - 关闭按钮中的图标
  *
- * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
- * @cssprop --z-index - 组件的 CSS 的 `z-index` 值
+ * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --z-index - 组件的 CSS `z-index` 值
  */
 export declare class Snackbar extends MduiElement<SnackbarEventMap> {
     static styles: CSSResultGroup;
@@ -37,22 +37,22 @@ export declare class Snackbar extends MduiElement<SnackbarEventMap> {
      */
     open: boolean;
     /**
-     * Snackbar 出现的位置。默认为 `bottom`。可选值为：
+     * Snackbar 的显示位置。默认为 `bottom`。可选值包括：
      *
-     * * `top`：位于顶部，居中对齐
-     * * `top-start`：位于顶部，左对齐
-     * * `top-end`：位于顶部，右对齐
-     * * `bottom`：位于底部，居中对齐
-     * * `bottom-start`：位于底部，左对齐
-     * * `bottom-end`：位于底部，右对齐
+     * * `top`：顶部居中
+     * * `top-start`：顶部左对齐
+     * * `top-end`：顶部右对齐
+     * * `bottom`：底部居中
+     * * `bottom-start`：底部左对齐
+     * * `bottom-end`：底部右对齐
      */
-    placement: /*位于顶部，居中对齐*/ 'top' | /*位于顶部，左对齐*/ 'top-start' | /*位于顶部，右对齐*/ 'top-end' | /*位于底部，居中对齐*/ 'bottom' | /*位于底部，左对齐*/ 'bottom-start' | /*位于底部，右对齐*/ 'bottom-end';
+    placement: /*顶部居中*/ 'top' | /*顶部左对齐*/ 'top-start' | /*顶部右对齐*/ 'top-end' | /*底部居中*/ 'bottom' | /*底部左对齐*/ 'bottom-start' | /*底部右对齐*/ 'bottom-end';
     /**
      * 操作按钮的文本。也可以通过 `slot="action"` 设置操作按钮
      */
     action?: string;
     /**
-     * 操作按钮是否为 loading 状态
+     * 操作按钮是否处于加载中状态
      */
     actionLoading: boolean;
     /**
@@ -60,22 +60,22 @@ export declare class Snackbar extends MduiElement<SnackbarEventMap> {
      */
     closeable: boolean;
     /**
-     * 关闭按钮中的 Material Icons 图标名。也可以通过 `slot="close-icon"` 设置
+     * 关闭按钮的 Material Icons 图标名。也可以通过 `slot="close-icon"` 设置
      */
     closeIcon?: string;
     /**
-     * 消息文本最多显示几行。默认不限制行数。可选值为：
+     * 消息文本的最大显示行数。默认不限制。可选值包括：
      *
-     * * `1`：消息文本最多显示一行
-     * * `2`：消息文本最多显示两行
+     * * `1`：最多显示一行
+     * * `2`：最多显示两行
      */
-    messageLine?: /*消息文本最多显示一行*/ 1 | /*消息文本最多显示两行*/ 2;
+    messageLine?: /*最多显示一行*/ 1 | /*最多显示两行*/ 2;
     /**
-     * 在多长时间后自动关闭（单位为毫秒）。设置为 `0` 时，不自动关闭。默认为 5 秒后自动关闭。
+     * 自动关闭的延迟时间（单位：毫秒）。设置为 `0` 则不自动关闭。默认为 5000 毫秒
      */
     autoCloseDelay: number;
     /**
-     * 点击或触摸 Snackbar 以外的区域时是否关闭 Snackbar
+     * 点击或触摸 Snackbar 以外的区域时，是否关闭 Snackbar
      */
     closeOnOutsideClick: boolean;
     private closeTimeout;

package/components/snackbar/index.js

@@ -28,18 +28,18 @@ import { style } from './style.js';
  * @event closed - Snackbar 隐藏动画完成时，事件被触发
  * @event action-click - 点击操作按钮时触发
  *
- * @slot - Snackbar 中的消息文本内容
+ * @slot - Snackbar 的消息文本内容
  * @slot action - 右侧的操作按钮
- * @slot close-button - 右侧的关闭按钮。必须设置 `closeable` 属性为 `true` 才会显示该按钮
- * @slot close-icon - 右侧的关闭按钮中的图标
+ * @slot close-button - 右侧的关闭按钮。必须设置 `closeable` 属性为 `true` 才会显示
+ * @slot close-icon - 关闭按钮中的图标
  *
  * @csspart message - 消息文本
  * @csspart action - 操作按钮
  * @csspart close-button - 关闭按钮
  * @csspart close-icon - 关闭按钮中的图标
  *
- * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
- * @cssprop --z-index - 组件的 CSS 的 `z-index` 值
+ * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --z-index - 组件的 CSS `z-index` 值
  */
 let Snackbar = class Snackbar extends MduiElement {
     constructor() {
@@ -49,18 +49,18 @@ let Snackbar = class Snackbar extends MduiElement {
          */
         this.open = false;
         /**
-         * Snackbar 出现的位置。默认为 `bottom`。可选值为：
+         * Snackbar 的显示位置。默认为 `bottom`。可选值包括：
          *
-         * * `top`：位于顶部，居中对齐
-         * * `top-start`：位于顶部，左对齐
-         * * `top-end`：位于顶部，右对齐
-         * * `bottom`：位于底部，居中对齐
-         * * `bottom-start`：位于底部，左对齐
-         * * `bottom-end`：位于底部，右对齐
+         * * `top`：顶部居中
+         * * `top-start`：顶部左对齐
+         * * `top-end`：顶部右对齐
+         * * `bottom`：底部居中
+         * * `bottom-start`：底部左对齐
+         * * `bottom-end`：底部右对齐
          */
         this.placement = 'bottom';
         /**
-         * 操作按钮是否为 loading 状态
+         * 操作按钮是否处于加载中状态
          */
         this.actionLoading = false;
         /**
@@ -68,11 +68,11 @@ let Snackbar = class Snackbar extends MduiElement {
          */
         this.closeable = false;
         /**
-         * 在多长时间后自动关闭（单位为毫秒）。设置为 `0` 时，不自动关闭。默认为 5 秒后自动关闭。
+         * 自动关闭的延迟时间（单位：毫秒）。设置为 `0` 则不自动关闭。默认为 5000 毫秒
          */
         this.autoCloseDelay = 5000;
         /**
-         * 点击或触摸 Snackbar 以外的区域时是否关闭 Snackbar
+         * 点击或触摸 Snackbar 以外的区域时，是否关闭 Snackbar
          */
         this.closeOnOutsideClick = false;
         this.onDocumentClick = this.onDocumentClick.bind(this);
@@ -204,11 +204,38 @@ let Snackbar = class Snackbar extends MduiElement {
         document.removeEventListener('pointerdown', this.onDocumentClick);
     }
     render() {
-        return html `<slot part="message" class="message"></slot><div class="action-group"><slot name="action" part="action" class="action" @click="${this.onActionClick}">${this.action
-            ? html `<mdui-button variant="text" loading="${this.actionLoading}">${this.action}</mdui-button>`
-            : nothingTemplate}</slot>${when(this.closeable, () => html `<slot name="close-button" part="close-button" class="close-button" @click="${this.onCloseClick}"><mdui-button-icon><slot name="close-icon" part="close-icon">${this.closeIcon
-            ? html `<mdui-icon name="${this.closeIcon}" class="i"></mdui-icon>`
-            : html `<mdui-icon-clear class="i"></mdui-icon-clear>`}</slot></mdui-button-icon></slot>`)}</div>`;
+        return html `<slot part="message" class="message"></slot>
+      <div class="action-group">
+        <slot
+          name="action"
+          part="action"
+          class="action"
+          @click=${this.onActionClick}
+        >
+          ${this.action
+            ? html `<mdui-button variant="text" loading=${this.actionLoading}>
+                ${this.action}
+              </mdui-button>`
+            : nothingTemplate}
+        </slot>
+        ${when(this.closeable, () => html `<slot
+              name="close-button"
+              part="close-button"
+              class="close-button"
+              @click=${this.onCloseClick}
+            >
+              <mdui-button-icon>
+                <slot name="close-icon" part="close-icon">
+                  ${this.closeIcon
+            ? html `<mdui-icon
+                        name=${this.closeIcon}
+                        class="i"
+                      ></mdui-icon>`
+            : html `<mdui-icon-clear class="i"></mdui-icon-clear>`}
+                </slot>
+              </mdui-button-icon>
+            </slot>`)}
+      </div>`;
     }
     /**
      * 在 document 上点击时，根据条件判断是否要关闭 snackbar