mdui 2.0.3 → 2.0.5

package/components/button/button-base.js

@@ -21,43 +21,43 @@ export class ButtonBase extends AnchorMixin(RippleMixin(FocusableMixin(MduiEleme
          */
         this.disabled = false;
         /**
-         * 是否为加载中状态
+         * 是否处于加载中状态
          */
         this.loading = false;
         /**
-         * 按钮的名称，将与表单数据一起提交
+         * 按钮的名称，将与表单数据一起提交。
          *
-         * **Note**：仅在未指定 `href` 属性时可用
+         * **Note**：仅在未设置 `href` 属性时，此属性才有效。
          */
         this.name = '';
         /**
-         * 按钮的初始值，将与表单数据一起提交
+         * 按钮的初始值，将与表单数据一起提交。
          *
-         * **Note**：仅在未指定 `href` 属性时可用
+         * **Note**：仅在未设置 `href` 属性时，此属性才有效。
          */
         this.value = '';
         /**
-         * 按钮的类型。默认值为 `button`。可选值为：
+         * 按钮的类型。默认类型为 `button`。可选类型包括：
          *
-         * * `submit`：点击按钮将表单数据提交给服务器
-         * * `reset`：点击按钮将表单中所有组件重置为初始值
-         * * `button`：按钮没有默认行为
+         * * `submit`：点击按钮会提交表单数据到服务器
+         * * `reset`：点击按钮会将表单中的所有字段重置为初始值
+         * * `button`：此类型的按钮没有默认行为
          *
-         * **Note**：仅在未指定 `href` 属性时可用
+         * **Note**：仅在未指定 `href` 属性时，此属性才有效。
          */
         this.type = 'button';
         /**
-         * 指定了该属性时，表示当表单被提交时不需要验证。
+         * 如果设置了此属性，表单提交时将不执行表单验证。
          *
-         * 指定了该属性时，将覆盖 `form` 元素的 `novalidate` 属性。
+         * 如果设置了此属性，将覆盖 `<form>` 元素的 `novalidate` 属性。
          *
-         * **Note**：仅在未指定 `href` 属性、且 `type="submit"` 时可用。
+         * **Note**：仅在未设置 `href` 属性且 `type="submit"` 时，此属性才有效。
          */
         this.formNoValidate = false;
         this.formController = new FormController(this);
     }
     /**
-     * 表单验证状态对象
+     * 表单验证状态对象，具体参见 [`ValidityState`](https://developer.mozilla.org/zh-CN/docs/Web/API/ValidityState)
      */
     get validity() {
         if (this.isButton()) {
@@ -65,7 +65,7 @@ export class ButtonBase extends AnchorMixin(RippleMixin(FocusableMixin(MduiEleme
         }
     }
     /**
-     * 表单验证的错误提示信息
+     * 如果表单验证未通过，此属性将包含提示信息。如果验证通过，此属性将为空字符串
      */
     get validationMessage() {
         if (this.isButton()) {
@@ -86,7 +86,7 @@ export class ButtonBase extends AnchorMixin(RippleMixin(FocusableMixin(MduiEleme
         return this.disabled || this.loading;
     }
     /**
-     * 检查表单字段是否验证通过。若未通过则返回 `false`，并触发 `invalid` 事件；若验证通过，则返回 `true`
+     * 检查表单字段是否通过验证。如果未通过，返回 `false` 并触发 `invalid` 事件；如果通过，返回 `true`
      */
     checkValidity() {
         if (this.isButton()) {
@@ -104,9 +104,9 @@ export class ButtonBase extends AnchorMixin(RippleMixin(FocusableMixin(MduiEleme
         return true;
     }
     /**
-     * 检查表单字段是否验证通过。若未通过则返回 `false`，并触发 `invalid` 事件；若验证通过，则返回 `true`。
+     * 检查表单字段是否通过验证。如果未通过，返回 `false` 并触发 `invalid` 事件；如果通过，返回 `true`。
      *
-     * 验证未通过时，还将在组件上显示未通过的提示。
+     * 如果验证未通过，还会在组件上显示验证失败的提示。
      */
     reportValidity() {
         if (this.isButton()) {
@@ -125,9 +125,9 @@ export class ButtonBase extends AnchorMixin(RippleMixin(FocusableMixin(MduiEleme
         return true;
     }
     /**
-     * 设置自定义的错误提示文本。只要文本不为空，则表示字段验证未通过
+     * 设置自定义的错误提示文本。只要这个文本不为空，就表示字段未通过验证
      *
-     * @param message 自定义的提示文本
+     * @param message 自定义的错误提示文本
      */
     setCustomValidity(message) {
         if (this.isButton()) {
@@ -151,7 +151,14 @@ export class ButtonBase extends AnchorMixin(RippleMixin(FocusableMixin(MduiEleme
             : nothingTemplate;
     }
     renderButton({ id, className, part, content = html `<slot></slot>`, }) {
-        return html `<button id="${ifDefined(id)}" class="${cc(['_button', className])}" part="${ifDefined(part)}" ?disabled="${this.rippleDisabled || this.focusDisabled}">${content}</button>`;
+        return html `<button
+      id=${ifDefined(id)}
+      class=${cc(['_button', className])}
+      part=${ifDefined(part)}
+      ?disabled=${this.rippleDisabled || this.focusDisabled}
+    >
+      ${content}
+    </button>`;
     }
     isButton() {
         return !this.href;

package/components/button/index.d.ts

@@ -14,29 +14,29 @@ import type { TemplateResult, CSSResultGroup } from 'lit';
  * @event invalid - 表单字段验证未通过时触发
  *
  * @slot - 按钮的文本
- * @slot icon - 按钮左侧元素
- * @slot end-icon - 按钮右侧元素
+ * @slot icon - 按钮左侧的元素
+ * @slot end-icon - 按钮右侧的元素
  *
  * @csspart button - 内部的 `<button>` 或 `<a>` 元素
- * @csspart label - 按钮文本
- * @csspart icon - 按钮左侧图标
- * @csspart end-icon - 按钮右侧图标
+ * @csspart label - 按钮的文本
+ * @csspart icon - 按钮左侧的图标
+ * @csspart end-icon - 按钮右侧的图标
  * @csspart loading - 加载中状态的 `<mdui-circular-progress>` 元素
  *
- * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
  */
 export declare class Button extends ButtonBase<ButtonEventMap> {
     static styles: CSSResultGroup;
     /**
-     * 按钮形状。可选值为：
+     * 按钮的形状。可选值包括：
      *
-     * * `elevated`：带阴影的按钮，在需要把按钮和背景进行视觉分离时使用
-     * * `filled`：视觉效果仅次于 FAB，用于重要流程的最终操作，如“保存”、“确认”等
-     * * `tonal`：视觉效果介于 `filled` 和 `outlined` 之间，用于中高优先级的操作，如流程中的“下一步”
-     * * `outlined`：带边框的按钮，用于中等优先级，且次要的操作，如“返回”
-     * * `text`：文本按钮，用于最低优先级的操作
+     * * `elevated`：带阴影的按钮，适用于需要将按钮与背景视觉分离的场景
+     * * `filled`：视觉效果强烈，适用于重要流程的最终操作，如“保存”、“确认”等
+     * * `tonal`：视觉效果介于 `filled` 和 `outlined` 之间，适用于中高优先级的操作，如流程中的“下一步”
+     * * `outlined`：带边框的按钮，适用于中等优先级，且次要的操作，如“返回”
+     * * `text`：文本按钮，适用于最低优先级的操作
      */
-    variant: /*带阴影的按钮，在需要把按钮和背景进行视觉分离时使用*/ 'elevated' | /*视觉效果仅次于 FAB，用于重要流程的最终操作，如“保存”、“确认”等*/ 'filled' | /*视觉效果介于 `filled` 和 `outlined` 之间，用于中等偏高优先级的场景，如流程中的“下一步”*/ 'tonal' | /*带边框的按钮，用于中等优先级，且次要操作的场景，如“返回”*/ 'outlined' | /*文本按钮，用于最低优先级的操作*/ 'text';
+    variant: /*带阴影的按钮，适用于需要将按钮与背景视觉分离的场景*/ 'elevated' | /*视觉效果强烈，适用于重要流程的最终操作，如“保存”、“确认”等*/ 'filled' | /*视觉效果介于 `filled` 和 `outlined` 之间，适用于中高优先级的操作，如流程中的“下一步”*/ 'tonal' | /*带边框的按钮，适用于中等优先级，且次要的操作，如“返回”*/ 'outlined' | /*文本按钮，适用于最低优先级的操作*/ 'text';
     /**
      * 是否填满父元素宽度
      */

package/components/button/index.js

@@ -19,28 +19,28 @@ import { style } from './style.js';
  * @event invalid - 表单字段验证未通过时触发
  *
  * @slot - 按钮的文本
- * @slot icon - 按钮左侧元素
- * @slot end-icon - 按钮右侧元素
+ * @slot icon - 按钮左侧的元素
+ * @slot end-icon - 按钮右侧的元素
  *
  * @csspart button - 内部的 `<button>` 或 `<a>` 元素
- * @csspart label - 按钮文本
- * @csspart icon - 按钮左侧图标
- * @csspart end-icon - 按钮右侧图标
+ * @csspart label - 按钮的文本
+ * @csspart icon - 按钮左侧的图标
+ * @csspart end-icon - 按钮右侧的图标
  * @csspart loading - 加载中状态的 `<mdui-circular-progress>` 元素
  *
- * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
  */
 let Button = class Button extends ButtonBase {
     constructor() {
         super(...arguments);
         /**
-         * 按钮形状。可选值为：
+         * 按钮的形状。可选值包括：
          *
-         * * `elevated`：带阴影的按钮，在需要把按钮和背景进行视觉分离时使用
-         * * `filled`：视觉效果仅次于 FAB，用于重要流程的最终操作，如“保存”、“确认”等
-         * * `tonal`：视觉效果介于 `filled` 和 `outlined` 之间，用于中高优先级的操作，如流程中的“下一步”
-         * * `outlined`：带边框的按钮，用于中等优先级，且次要的操作，如“返回”
-         * * `text`：文本按钮，用于最低优先级的操作
+         * * `elevated`：带阴影的按钮，适用于需要将按钮与背景视觉分离的场景
+         * * `filled`：视觉效果强烈，适用于重要流程的最终操作，如“保存”、“确认”等
+         * * `tonal`：视觉效果介于 `filled` 和 `outlined` 之间，适用于中高优先级的操作，如流程中的“下一步”
+         * * `outlined`：带边框的按钮，适用于中等优先级，且次要的操作，如“返回”
+         * * `text`：文本按钮，适用于最低优先级的操作
          */
         this.variant = 'filled';
         /**
@@ -53,14 +53,20 @@ let Button = class Button extends ButtonBase {
         return this.rippleRef.value;
     }
     render() {
-        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: 'button',
                 part: 'button',
                 content: this.renderInner(),
             })
             : this.disabled || this.loading
-                ? html `<span part="button" class="button _a">${this.renderInner()}</span>`
+                ? html `<span part="button" class="button _a">
+            ${this.renderInner()}
+          </span>`
                 : this.renderAnchor({
                     className: 'button',
                     part: 'button',
@@ -71,17 +77,21 @@ let Button = class Button 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>`;
     }
     renderLabel() {
         return html `<slot part="label" class="label"></slot>`;
     }
     renderEndIcon() {
-        return html `<slot name="end-icon" part="end-icon" class="end-icon">${this.endIcon
-            ? html `<mdui-icon name="${this.endIcon}"></mdui-icon>`
-            : nothingTemplate}</slot>`;
+        return html `<slot name="end-icon" part="end-icon" class="end-icon">
+      ${this.endIcon
+            ? html `<mdui-icon name=${this.endIcon}></mdui-icon>`
+            : nothingTemplate}
+    </slot>`;
     }
     renderInner() {
         return [this.renderIcon(), this.renderLabel(), this.renderEndIcon()];

package/components/button/style.js

@@ -1,4 +1,113 @@
 import { css } from 'lit';
-export const style = css `:host{--shape-corner:var(--mdui-shape-corner-full);position:relative;display:inline-block;overflow:hidden;text-align:center;border-radius:var(--shape-corner);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:box-shadow var(--mdui-motion-duration-short4) var(--mdui-motion-easing-linear);min-width:3rem;height:2.5rem;color:rgb(var(--mdui-color-primary));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{width:100%;padding:0 1rem}:host([full-width]){display:block}:host([variant=elevated]){box-shadow:var(--mdui-elevation-level1);background-color:rgb(var(--mdui-color-surface-container-low));--mdui-comp-ripple-state-layer-color:var(--mdui-color-primary)}:host([variant=filled]){color:rgb(var(--mdui-color-on-primary));background-color:rgb(var(--mdui-color-primary));--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-primary)}:host([variant=tonal]){color:rgb(var(--mdui-color-on-secondary-container));background-color:rgb(var(--mdui-color-secondary-container));--mdui-comp-ripple-state-layer-color:var(
+export const style = css `
+  /**
+ * mdui-button 组件。默认为 variant="text"
+ */
+  :host {
+    --shape-corner: var(--mdui-shape-corner-full);
+    position: relative;
+    display: inline-block;
+    overflow: hidden;
+    text-align: center;
+    border-radius: var(--shape-corner);
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+    transition: box-shadow var(--mdui-motion-duration-short4)
+      var(--mdui-motion-easing-linear);
+    min-width: 3rem;
+    height: 2.5rem;
+    color: rgb(var(--mdui-color-primary));
+    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 {
+    width: 100%;
+    padding: 0rem 1rem;
+  }
+  :host([full-width]) {
+    display: block;
+  }
+  :host([variant='elevated']) {
+    box-shadow: var(--mdui-elevation-level1);
+    background-color: rgb(var(--mdui-color-surface-container-low));
+    --mdui-comp-ripple-state-layer-color: var(--mdui-color-primary);
+  }
+  :host([variant='filled']) {
+    color: rgb(var(--mdui-color-on-primary));
+    background-color: rgb(var(--mdui-color-primary));
+    --mdui-comp-ripple-state-layer-color: var(--mdui-color-on-primary);
+  }
+  :host([variant='tonal']) {
+    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=outlined]){border:.0625rem solid rgb(var(--mdui-color-outline));--mdui-comp-ripple-state-layer-color:var(--mdui-color-primary)}:host([variant=text]){--mdui-comp-ripple-state-layer-color:var(--mdui-color-primary)}:host([variant=outlined][focus-visible]){border-color:rgb(var(--mdui-color-primary))}:host([variant=elevated][hover]){box-shadow:var(--mdui-elevation-level2)}:host([variant=filled][hover]),:host([variant=tonal][hover]){box-shadow:var(--mdui-elevation-level1)}:host([disabled]),:host([loading]){cursor:default;pointer-events:none}:host([disabled]){color:rgba(var(--mdui-color-on-surface),38%);box-shadow:var(--mdui-elevation-level0)}:host([variant=elevated][disabled]),:host([variant=filled][disabled]),:host([variant=tonal][disabled]){background-color:rgba(var(--mdui-color-on-surface),12%)}:host([variant=outlined][disabled]){border-color:rgba(var(--mdui-color-on-surface),12%)}.label{display:inline-flex;padding-right:.5rem;padding-left:.5rem}.end-icon,.icon{display:inline-flex;font-size:1.28571429em}.end-icon mdui-icon,.icon mdui-icon,::slotted([slot=end-icon]),::slotted([slot=icon]){font-size:inherit}mdui-circular-progress{display:inline-flex;width:1.125rem;height:1.125rem}:host([variant=filled]) mdui-circular-progress{stroke:rgb(var(--mdui-color-on-primary))}:host([variant=tonal]) mdui-circular-progress{stroke:rgb(var(--mdui-color-on-secondary-container))}:host([disabled]) mdui-circular-progress{stroke:rgba(var(--mdui-color-on-surface),38%)}`;
+    );
+  }
+  :host([variant='outlined']) {
+    border: 0.0625rem solid rgb(var(--mdui-color-outline));
+    --mdui-comp-ripple-state-layer-color: var(--mdui-color-primary);
+  }
+  :host([variant='text']) {
+    --mdui-comp-ripple-state-layer-color: var(--mdui-color-primary);
+  }
+  :host([variant='outlined'][focus-visible]) {
+    border-color: rgb(var(--mdui-color-primary));
+  }
+  :host([variant='elevated'][hover]) {
+    box-shadow: var(--mdui-elevation-level2);
+  }
+  :host([variant='filled'][hover]),
+  :host([variant='tonal'][hover]) {
+    box-shadow: var(--mdui-elevation-level1);
+  }
+  :host([disabled]),
+  :host([loading]) {
+    cursor: default;
+    pointer-events: none;
+  }
+  :host([disabled]) {
+    color: rgba(var(--mdui-color-on-surface), 38%);
+    box-shadow: var(--mdui-elevation-level0);
+  }
+  :host([variant='elevated'][disabled]),
+  :host([variant='filled'][disabled]),
+  :host([variant='tonal'][disabled]) {
+    background-color: rgba(var(--mdui-color-on-surface), 12%);
+  }
+  :host([variant='outlined'][disabled]) {
+    border-color: rgba(var(--mdui-color-on-surface), 12%);
+  }
+  .label {
+    display: inline-flex;
+    padding-right: 0.5rem;
+    padding-left: 0.5rem;
+  }
+  .icon,
+  .end-icon {
+    display: inline-flex;
+    font-size: 1.28571429em;
+  }
+  .icon mdui-icon,
+  .end-icon mdui-icon,
+  ::slotted([slot='icon']),
+  ::slotted([slot='end-icon']) {
+    font-size: inherit;
+  }
+  mdui-circular-progress {
+    display: inline-flex;
+    width: 1.125rem;
+    height: 1.125rem;
+  }
+  :host([variant='filled']) mdui-circular-progress {
+    stroke: rgb(var(--mdui-color-on-primary));
+  }
+  :host([variant='tonal']) mdui-circular-progress {
+    stroke: rgb(var(--mdui-color-on-secondary-container));
+  }
+  :host([disabled]) mdui-circular-progress {
+    stroke: rgba(var(--mdui-color-on-surface), 38%);
+  }
+`;

package/components/button-icon/index.d.ts

@@ -22,19 +22,19 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
  * @csspart selected-icon 选中状态的图标
  * @csspart loading - 加载中状态的 `<mdui-circular-progress>` 元素
  *
- * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
  */
 export declare class ButtonIcon extends ButtonBase<ButtonIconEventMap> {
     static styles: CSSResultGroup;
     /**
-     * 图标按钮的形状。可选值为：
+     * 图标按钮的形状。可选值包括：
      *
-     * * `standard`：用于最低优先级的操作
-     * * `filled`：具有最强视觉效果，用于高优先级的操作
-     * * `tonal`：视觉效果介于 `filled` 和 `outlined` 之间，用于中高优先级的操作
-     * * `outlined`：用于中等优先级的操作
+     * * `standard`：适用于最低优先级的操作
+     * * `filled`：视觉效果强烈，适用于高优先级的操作
+     * * `tonal`：视觉效果介于 `filled` 和 `outlined` 之间，适用于中高优先级的操作
+     * * `outlined`：适用于中等优先级的操作
      */
-    variant: /*用于最低优先级的操作*/ 'standard' | /*具有最强视觉效果，用于高优先级的操作*/ 'filled' | /*视觉效果介于 `filled` 和 `outlined` 之间，用于中高优先级的操作*/ 'tonal' | /*用于中等优先级的操作*/ 'outlined';
+    variant: /*适用于最低优先级的操作*/ 'standard' | /*视觉效果强烈，适用于高优先级的操作*/ 'filled' | /*视觉效果介于 `filled` 和 `outlined` 之间，适用于中高优先级的操作*/ 'tonal' | /*适用于中等优先级的操作*/ 'outlined';
     /**
      * Material Icons 图标名。也可以通过 default slot 设置
      */
@@ -48,7 +48,7 @@ export declare class ButtonIcon extends ButtonBase<ButtonIconEventMap> {
      */
     selectable: boolean;
     /**
-     * 是否已选中
+     * 是否已被选中
      */
     selected: boolean;
     private readonly rippleRef;

package/components/button-icon/index.js

@@ -29,18 +29,18 @@ import { style } from './style.js';
  * @csspart selected-icon 选中状态的图标
  * @csspart loading - 加载中状态的 `<mdui-circular-progress>` 元素
  *
- * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
  */
 let ButtonIcon = class ButtonIcon extends ButtonBase {
     constructor() {
         super(...arguments);
         /**
-         * 图标按钮的形状。可选值为：
+         * 图标按钮的形状。可选值包括：
          *
-         * * `standard`：用于最低优先级的操作
-         * * `filled`：具有最强视觉效果，用于高优先级的操作
-         * * `tonal`：视觉效果介于 `filled` 和 `outlined` 之间，用于中高优先级的操作
-         * * `outlined`：用于中等优先级的操作
+         * * `standard`：适用于最低优先级的操作
+         * * `filled`：视觉效果强烈，适用于高优先级的操作
+         * * `tonal`：视觉效果介于 `filled` 和 `outlined` 之间，适用于中高优先级的操作
+         * * `outlined`：适用于中等优先级的操作
          */
         this.variant = 'standard';
         /**
@@ -48,7 +48,7 @@ let ButtonIcon = class ButtonIcon extends ButtonBase {
          */
         this.selectable = false;
         /**
-         * 是否已选中
+         * 是否已被选中
          */
         this.selected = false;
         this.rippleRef = createRef();
@@ -70,28 +70,45 @@ let ButtonIcon = class ButtonIcon extends ButtonBase {
         });
     }
     render() {
-        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: 'button',
                 part: 'button',
                 content: this.renderIcon(),
             })
             : this.disabled || this.loading
-                ? html `<span part="button" class="button _a">${this.renderIcon()}</span>`
+                ? html `<span part="button" class="button _a">
+            ${this.renderIcon()}
+          </span>`
                 : this.renderAnchor({
                     className: 'button',
                     part: 'button',
                     content: this.renderIcon(),
-                })} ${this.renderLoading()}`;
+                })}
+      ${this.renderLoading()}`;
     }
     renderIcon() {
         const icon = () => this.hasSlotController.test('[default]')
             ? html `<slot></slot>`
             : this.icon
-                ? html `<mdui-icon part="icon" class="icon" name="${this.icon}"></mdui-icon>`
+                ? html `<mdui-icon
+            part="icon"
+            class="icon"
+            name=${this.icon}
+          ></mdui-icon>`
                 : nothingTemplate;
         const selectedIcon = () => this.hasSlotController.test('selected-icon') || this.selectedIcon
-            ? html `<slot name="selected-icon" part="selected-icon" class="selected-icon"><mdui-icon name="${this.selectedIcon}"></mdui-icon></slot>`
+            ? html `<slot
+            name="selected-icon"
+            part="selected-icon"
+            class="selected-icon"
+          >
+            <mdui-icon name=${this.selectedIcon}></mdui-icon>
+          </slot>`
             : icon();
         return this.selected ? selectedIcon() : icon();
     }

package/components/button-icon/style.js

@@ -1,4 +1,105 @@
 import { css } from 'lit';
-export const style = css `:host{--shape-corner:var(--mdui-shape-corner-full);position:relative;display:inline-block;overflow:hidden;text-align:center;border-radius:var(--shape-corner);cursor:pointer;-webkit-tap-highlight-color:transparent;font-size:1.5rem;width:2.5rem;min-width:2.5rem;height:2.5rem}:host([variant=standard]){color:rgb(var(--mdui-color-on-surface-variant));--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-surface-variant)}:host([variant=filled]){color:rgb(var(--mdui-color-primary));background-color:rgb(var(--mdui-color-surface-container-highest));--mdui-comp-ripple-state-layer-color:var(--mdui-color-primary)}:host([variant=tonal]){color:rgb(var(--mdui-color-on-surface-variant));background-color:rgb(var(--mdui-color-surface-container-highest));--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-surface-variant)}:host([variant=outlined]){border:.0625rem solid rgb(var(--mdui-color-outline));color:rgb(var(--mdui-color-on-surface-variant));--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-surface-variant)}:host([variant=outlined][pressed]){color:rgb(var(--mdui-color-on-surface));--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-surface)}:host([variant=standard][selected]){color:rgb(var(--mdui-color-primary));--mdui-comp-ripple-state-layer-color:var(--mdui-color-primary)}:host([variant=filled]:not([selectable])),:host([variant=filled][selected]){color:rgb(var(--mdui-color-on-primary));background-color:rgb(var(--mdui-color-primary));--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-primary)}:host([variant=tonal]:not([selectable])),:host([variant=tonal][selected]){color:rgb(var(--mdui-color-on-secondary-container));background-color:rgb(var(--mdui-color-secondary-container));--mdui-comp-ripple-state-layer-color:var(
+export const style = css `
+  :host {
+    --shape-corner: var(--mdui-shape-corner-full);
+    position: relative;
+    display: inline-block;
+    overflow: hidden;
+    text-align: center;
+    border-radius: var(--shape-corner);
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+    font-size: 1.5rem;
+    width: 2.5rem;
+    min-width: 2.5rem;
+    height: 2.5rem;
+  }
+  :host([variant='standard']) {
+    color: rgb(var(--mdui-color-on-surface-variant));
+    --mdui-comp-ripple-state-layer-color: var(--mdui-color-on-surface-variant);
+  }
+  :host([variant='filled']) {
+    color: rgb(var(--mdui-color-primary));
+    background-color: rgb(var(--mdui-color-surface-container-highest));
+    --mdui-comp-ripple-state-layer-color: var(--mdui-color-primary);
+  }
+  :host([variant='tonal']) {
+    color: rgb(var(--mdui-color-on-surface-variant));
+    background-color: rgb(var(--mdui-color-surface-container-highest));
+    --mdui-comp-ripple-state-layer-color: var(--mdui-color-on-surface-variant);
+  }
+  :host([variant='outlined']) {
+    border: 0.0625rem solid rgb(var(--mdui-color-outline));
+    color: rgb(var(--mdui-color-on-surface-variant));
+    --mdui-comp-ripple-state-layer-color: var(--mdui-color-on-surface-variant);
+  }
+  :host([variant='outlined'][pressed]) {
+    color: rgb(var(--mdui-color-on-surface));
+    --mdui-comp-ripple-state-layer-color: var(--mdui-color-on-surface);
+  }
+  :host([variant='standard'][selected]) {
+    color: rgb(var(--mdui-color-primary));
+    --mdui-comp-ripple-state-layer-color: var(--mdui-color-primary);
+  }
+  :host([variant='filled'][selected]),
+  :host([variant='filled']:not([selectable])) {
+    color: rgb(var(--mdui-color-on-primary));
+    background-color: rgb(var(--mdui-color-primary));
+    --mdui-comp-ripple-state-layer-color: var(--mdui-color-on-primary);
+  }
+  :host([variant='tonal'][selected]),
+  :host([variant='tonal']:not([selectable])) {
+    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=outlined][selected]){border:none;color:rgb(var(--mdui-color-inverse-on-surface));background-color:rgb(var(--mdui-color-inverse-surface));--mdui-comp-ripple-state-layer-color:var(--mdui-color-inverse-on-surface)}:host([variant=filled][disabled]),:host([variant=outlined][disabled]),:host([variant=tonal][disabled]){background-color:rgba(var(--mdui-color-on-surface),.12);border-color:rgba(var(--mdui-color-on-surface),.12)}:host([disabled]),:host([loading]){cursor:default;pointer-events:none}:host([disabled]){color:rgba(var(--mdui-color-on-surface),.38)!important}:host([loading]) .button,:host([loading]) mdui-ripple{opacity:0}.button{float:left;width:100%}.icon,.selected-icon mdui-icon,::slotted(*){font-size:inherit}mdui-circular-progress{display:flex;position:absolute;top:calc(50% - 1.5rem / 2);left:calc(50% - 1.5rem / 2);width:1.5rem;height:1.5rem}:host([variant=filled]:not([disabled])) mdui-circular-progress{stroke:rgb(var(--mdui-color-on-primary))}:host([disabled]) mdui-circular-progress{stroke:rgba(var(--mdui-color-on-surface),38%)}`;
+    );
+  }
+  :host([variant='outlined'][selected]) {
+    border: none;
+    color: rgb(var(--mdui-color-inverse-on-surface));
+    background-color: rgb(var(--mdui-color-inverse-surface));
+    --mdui-comp-ripple-state-layer-color: var(--mdui-color-inverse-on-surface);
+  }
+  :host([variant='filled'][disabled]),
+  :host([variant='tonal'][disabled]),
+  :host([variant='outlined'][disabled]) {
+    background-color: rgba(var(--mdui-color-on-surface), 0.12);
+    border-color: rgba(var(--mdui-color-on-surface), 0.12);
+  }
+  :host([disabled]),
+  :host([loading]) {
+    cursor: default;
+    pointer-events: none;
+  }
+  :host([disabled]) {
+    color: rgba(var(--mdui-color-on-surface), 0.38) !important;
+  }
+  :host([loading]) mdui-ripple,
+  :host([loading]) .button {
+    opacity: 0;
+  }
+  .button {
+    float: left;
+    width: 100%;
+  }
+  .icon,
+  .selected-icon mdui-icon,
+  ::slotted(*) {
+    font-size: inherit;
+  }
+  mdui-circular-progress {
+    display: flex;
+    position: absolute;
+    top: calc(50% - 1.5rem / 2);
+    left: calc(50% - 1.5rem / 2);
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  :host([variant='filled']:not([disabled])) mdui-circular-progress {
+    stroke: rgb(var(--mdui-color-on-primary));
+  }
+  :host([disabled]) mdui-circular-progress {
+    stroke: rgba(var(--mdui-color-on-surface), 38%);
+  }
+`;

package/components/card/index.d.ts

@@ -12,22 +12,22 @@ declare const Card_base: import("@open-wc/dedupe-mixin").Constructor<import("@md
  * @event focus - 获得焦点时触发
  * @event blur - 失去焦点时触发
  *
- * @slot - 卡片内容
+ * @slot - 卡片的内容
  *
- * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
  */
 export declare class Card extends Card_base<CardEventMap> {
     static styles: CSSResultGroup;
     /**
-     * 卡片形状。可选值为：
+     * 卡片的形状。可选值包括：
      *
-     * * `elevated`：具有阴影，与背景的分离度比 `filled` 更高，但小于 `outlined`
-     * * `filled`：与背景的分离度最小
-     * * `outlined`：具有边框，与背景的分离度最大
+     * * `elevated`：带阴影的卡片，与背景的视觉分离度较高
+     * * `filled`：带填充色的卡片，与背景的视觉分离度较低
+     * * `outlined`：带边框的卡片，与背景的视觉分离度最高
      */
-    variant: /*具有阴影，与背景的分离度比 `filled` 更高，但小于 `outlined`*/ 'elevated' | /*与背景的分离度最小*/ 'filled' | /*具有边框，与背景的分离度最大*/ 'outlined';
+    variant: /*带阴影的卡片，与背景的视觉分离度较高*/ 'elevated' | /*带填充色的卡片，与背景的视觉分离度较低*/ 'filled' | /*带边框的卡片，与背景的视觉分离度最高*/ 'outlined';
     /**
-     * 是否可点击。为 `true` 时，会添加鼠标悬浮效果、及点击涟漪效果
+     * 是否可点击。为 `true` 时，卡片将具有鼠标悬浮效果和点击涟漪效果
      */
     clickable: boolean;
     /**