mdui 2.0.3 → 2.0.5

package/components/card/index.js

@@ -19,23 +19,23 @@ import { style } from './style.js';
  * @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)
  */
 let Card = class Card extends AnchorMixin(RippleMixin(FocusableMixin(MduiElement))) {
     constructor() {
         super(...arguments);
         /**
-         * 卡片形状。可选值为：
+         * 卡片的形状。可选值包括：
          *
-         * * `elevated`：具有阴影，与背景的分离度比 `filled` 更高，但小于 `outlined`
-         * * `filled`：与背景的分离度最小
-         * * `outlined`：具有边框，与背景的分离度最大
+         * * `elevated`：带阴影的卡片，与背景的视觉分离度较高
+         * * `filled`：带填充色的卡片，与背景的视觉分离度较低
+         * * `outlined`：带边框的卡片，与背景的视觉分离度最高
          */
         this.variant = 'elevated';
         /**
-         * 是否可点击。为 `true` 时，会添加鼠标悬浮效果、及点击涟漪效果
+         * 是否可点击。为 `true` 时，卡片将具有鼠标悬浮效果和点击涟漪效果
          */
         this.clickable = false;
         /**
@@ -59,7 +59,11 @@ let Card = class Card extends AnchorMixin(RippleMixin(FocusableMixin(MduiElement
         return this.rippleDisabled;
     }
     render() {
-        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: 'link',
                 content: html `<slot></slot>`,

package/components/card/style.js

@@ -1,2 +1,73 @@
 import { css } from 'lit';
-export const style = css `:host{--shape-corner:var(--mdui-shape-corner-medium);position:relative;display:inline-block;overflow:hidden;border-radius:var(--shape-corner);-webkit-tap-highlight-color:transparent;transition:box-shadow var(--mdui-motion-duration-short4) var(--mdui-motion-easing-linear);--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-surface)}:host([clickable]){cursor:pointer}:host([variant=elevated]){background-color:rgb(var(--mdui-color-surface-container-low));box-shadow:var(--mdui-elevation-level1)}:host([variant=filled]){background-color:rgb(var(--mdui-color-surface-container-highest))}:host([variant=outlined]){background-color:rgb(var(--mdui-color-surface));border:.0625rem solid rgb(var(--mdui-color-outline))}:host([variant=elevated][hover]){box-shadow:var(--mdui-elevation-level2)}:host([variant=filled][hover]),:host([variant=outlined][hover]){box-shadow:var(--mdui-elevation-level1)}:host([variant=elevated][dragged]),:host([variant=filled][dragged]),:host([variant=outlined][dragged]){box-shadow:var(--mdui-elevation-level3)}:host([disabled]){opacity:.38;cursor:default;-webkit-user-select:none;user-select:none}:host([variant=elevated][disabled]){background-color:rgb(var(--mdui-color-surface-variant));box-shadow:var(--mdui-elevation-level0)}:host([variant=filled][disabled]){background-color:rgb(var(--mdui-color-surface));box-shadow:var(--mdui-elevation-level1)}:host([variant=outlined][disabled]){box-shadow:var(--mdui-elevation-level0);border-color:rgba(var(--mdui-color-outline),.32)}.link{position:relative;display:inline-block;width:100%;height:100%;color:inherit;font-size:inherit;letter-spacing:inherit;text-decoration:none;touch-action:manipulation;-webkit-user-drag:none}`;
+export const style = css `
+  /**
+ * mdui-card 组件。默认为 variant="elevated"
+ */
+  :host {
+    --shape-corner: var(--mdui-shape-corner-medium);
+    position: relative;
+    display: inline-block;
+    overflow: hidden;
+    border-radius: var(--shape-corner);
+    -webkit-tap-highlight-color: transparent;
+    transition: box-shadow var(--mdui-motion-duration-short4)
+      var(--mdui-motion-easing-linear);
+    --mdui-comp-ripple-state-layer-color: var(--mdui-color-on-surface);
+  }
+  :host([clickable]) {
+    cursor: pointer;
+  }
+  :host([variant='elevated']) {
+    background-color: rgb(var(--mdui-color-surface-container-low));
+    box-shadow: var(--mdui-elevation-level1);
+  }
+  :host([variant='filled']) {
+    background-color: rgb(var(--mdui-color-surface-container-highest));
+  }
+  :host([variant='outlined']) {
+    background-color: rgb(var(--mdui-color-surface));
+    border: 0.0625rem solid rgb(var(--mdui-color-outline));
+  }
+  :host([variant='elevated'][hover]) {
+    box-shadow: var(--mdui-elevation-level2);
+  }
+  :host([variant='filled'][hover]),
+  :host([variant='outlined'][hover]) {
+    box-shadow: var(--mdui-elevation-level1);
+  }
+  :host([variant='elevated'][dragged]),
+  :host([variant='filled'][dragged]),
+  :host([variant='outlined'][dragged]) {
+    box-shadow: var(--mdui-elevation-level3);
+  }
+  :host([disabled]) {
+    opacity: 0.38;
+    cursor: default;
+    -webkit-user-select: none;
+    user-select: none;
+  }
+  :host([variant='elevated'][disabled]) {
+    background-color: rgb(var(--mdui-color-surface-variant));
+    box-shadow: var(--mdui-elevation-level0);
+  }
+  :host([variant='filled'][disabled]) {
+    background-color: rgb(var(--mdui-color-surface));
+    box-shadow: var(--mdui-elevation-level1);
+  }
+  :host([variant='outlined'][disabled]) {
+    box-shadow: var(--mdui-elevation-level0);
+    border-color: rgba(var(--mdui-color-outline), 0.32);
+  }
+  .link {
+    position: relative;
+    display: inline-block;
+    width: 100%;
+    height: 100%;
+    color: inherit;
+    font-size: inherit;
+    letter-spacing: inherit;
+    text-decoration: none;
+    touch-action: manipulation;
+    -webkit-user-drag: none;
+  }
+`;

package/components/checkbox/index.d.ts

@@ -20,16 +20,16 @@ declare const Checkbox_base: import("@open-wc/dedupe-mixin").Constructor<import(
  * @event input - 选中状态变更时触发
  * @event invalid - 表单字段验证未通过时触发
  *
- * @slot - 文本
- * @slot unchecked-icon - 未选中状态图标
- * @slot checked-icon - 选中状态图标
- * @slot indeterminate-icon - 不确定状态图标
+ * @slot - 复选框文本
+ * @slot unchecked-icon - 未选中状态的图标
+ * @slot checked-icon - 选中状态的图标
+ * @slot indeterminate-icon - 不确定状态的图标
  *
  * @csspart control - 左侧图标容器
- * @csspart unchecked-icon - 未选中状态图标
- * @csspart checked-icon - 选中状态图标
- * @csspart indeterminate-icon - 不确定状态图标
- * @csspart label - 文本
+ * @csspart unchecked-icon - 未选中状态的图标
+ * @csspart checked-icon - 选中状态的图标
+ * @csspart indeterminate-icon - 不确定状态的图标
+ * @csspart label - 复选框文本
  */
 export declare class Checkbox extends Checkbox_base<CheckboxEventMap> implements FormControl {
     static styles: CSSResultGroup;
@@ -42,21 +42,21 @@ export declare class Checkbox extends Checkbox_base<CheckboxEventMap> implements
      */
     checked: boolean;
     /**
-     * 默认选中状态。在重置表单时，将重置为该默认状态。该属性只能通过 JavaScript 属性设置
+     * 默认选中状态。在重置表单时，将恢复为此状态。此属性只能通过 JavaScript 属性设置
      */
     defaultChecked: boolean;
     /**
-     * 是否为不确定状态
+     * 是否处于不确定状态
      */
     indeterminate: boolean;
     /**
-     * 提交表单时，是否必须选中该复选框
+     * 提交表单时，是否必须选中此复选框
      */
     required: boolean;
     /**
-     * 关联的 `form` 元素。此属性值必须为同一页面中的一个 `<form>` 元素的 `id` 属性。
+     * 关联的 `<form>` 元素。此属性值应为同一页面中的一个 `<form>` 元素的 `id`。
      *
-     * 如果此属性未指定，则元素必须是 `form` 元素的后代。利用此属性，你可以将元素放置在页面中的任何位置，而不仅仅是作为 `form` 元素的后代。
+     * 如果未指定此属性，则该元素必须是 `<form>` 元素的子元素。通过此属性，你可以将元素放置在页面的任何位置，而不仅仅是 `<form>` 元素的子元素。
      */
     form?: string;
     /**
@@ -87,11 +87,11 @@ export declare class Checkbox extends Checkbox_base<CheckboxEventMap> implements
     private readonly rippleRef;
     private readonly formController;
     /**
-     * 表单验证状态对象
+     * 表单验证状态对象，具体参见 [`ValidityState`](https://developer.mozilla.org/zh-CN/docs/Web/API/ValidityState)
      */
     get validity(): ValidityState;
     /**
-     * 表单验证的错误提示信息
+     * 如果表单验证未通过，此属性将包含提示信息。如果验证通过，此属性将为空字符串
      */
     get validationMessage(): string;
     protected get rippleElement(): Ripple;
@@ -101,19 +101,19 @@ export declare class Checkbox extends Checkbox_base<CheckboxEventMap> implements
     private onDisabledChange;
     private onCheckedChange;
     /**
-     * 检查表单字段是否验证通过。若未通过则返回 `false`，并触发 `invalid` 事件；若验证通过，则返回 `true`
+     * 检查表单字段是否通过验证。如果未通过，返回 `false` 并触发 `invalid` 事件；如果通过，返回 `true`
      */
     checkValidity(): boolean;
     /**
-     * 检查表单字段是否验证通过。若未通过则返回 `false`，并触发 `invalid` 事件；若验证通过，则返回 `true`。
+     * 检查表单字段是否通过验证。如果未通过，返回 `false` 并触发 `invalid` 事件；如果通过，返回 `true`。
      *
-     * 验证未通过时，还将在组件上显示未通过的提示。
+     * 如果验证未通过，还会在组件上显示验证失败的提示。
      */
     reportValidity(): boolean;
     /**
-     * 设置自定义的错误提示文本。只要文本不为空，则表示字段验证未通过
+     * 设置自定义的错误提示文本。只要这个文本不为空，就表示字段未通过验证
      *
-     * @param message 自定义的提示文本
+     * @param message 自定义的错误提示文本
      */
     setCustomValidity(message: string): void;
     protected render(): TemplateResult;

package/components/checkbox/index.js

@@ -31,16 +31,16 @@ import { style } from './style.js';
  * @event input - 选中状态变更时触发
  * @event invalid - 表单字段验证未通过时触发
  *
- * @slot - 文本
- * @slot unchecked-icon - 未选中状态图标
- * @slot checked-icon - 选中状态图标
- * @slot indeterminate-icon - 不确定状态图标
+ * @slot - 复选框文本
+ * @slot unchecked-icon - 未选中状态的图标
+ * @slot checked-icon - 选中状态的图标
+ * @slot indeterminate-icon - 不确定状态的图标
  *
  * @csspart control - 左侧图标容器
- * @csspart unchecked-icon - 未选中状态图标
- * @csspart checked-icon - 选中状态图标
- * @csspart indeterminate-icon - 不确定状态图标
- * @csspart label - 文本
+ * @csspart unchecked-icon - 未选中状态的图标
+ * @csspart checked-icon - 选中状态的图标
+ * @csspart indeterminate-icon - 不确定状态的图标
+ * @csspart label - 复选框文本
  */
 let Checkbox = class Checkbox extends RippleMixin(FocusableMixin(MduiElement)) {
     constructor() {
@@ -54,15 +54,15 @@ let Checkbox = class Checkbox extends RippleMixin(FocusableMixin(MduiElement)) {
          */
         this.checked = false;
         /**
-         * 默认选中状态。在重置表单时，将重置为该默认状态。该属性只能通过 JavaScript 属性设置
+         * 默认选中状态。在重置表单时，将恢复为此状态。此属性只能通过 JavaScript 属性设置
          */
         this.defaultChecked = false;
         /**
-         * 是否为不确定状态
+         * 是否处于不确定状态
          */
         this.indeterminate = false;
         /**
-         * 提交表单时，是否必须选中该复选框
+         * 提交表单时，是否必须选中此复选框
          */
         this.required = false;
         /**
@@ -86,13 +86,13 @@ let Checkbox = class Checkbox extends RippleMixin(FocusableMixin(MduiElement)) {
         });
     }
     /**
-     * 表单验证状态对象
+     * 表单验证状态对象，具体参见 [`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;
@@ -126,7 +126,7 @@ let Checkbox = class Checkbox extends RippleMixin(FocusableMixin(MduiElement)) {
         }
     }
     /**
-     * 检查表单字段是否验证通过。若未通过则返回 `false`，并触发 `invalid` 事件；若验证通过，则返回 `true`
+     * 检查表单字段是否通过验证。如果未通过，返回 `false` 并触发 `invalid` 事件；如果通过，返回 `true`
      */
     checkValidity() {
         const valid = this.inputRef.value.checkValidity();
@@ -140,9 +140,9 @@ let Checkbox = class Checkbox extends RippleMixin(FocusableMixin(MduiElement)) {
         return valid;
     }
     /**
-     * 检查表单字段是否验证通过。若未通过则返回 `false`，并触发 `invalid` 事件；若验证通过，则返回 `true`。
+     * 检查表单字段是否通过验证。如果未通过，返回 `false` 并触发 `invalid` 事件；如果通过，返回 `true`。
      *
-     * 验证未通过时，还将在组件上显示未通过的提示。
+     * 如果验证未通过，还会在组件上显示验证失败的提示。
      */
     reportValidity() {
         this.invalid = !this.inputRef.value.reportValidity();
@@ -161,22 +161,65 @@ let Checkbox = class Checkbox extends RippleMixin(FocusableMixin(MduiElement)) {
         return !this.invalid;
     }
     /**
-     * 设置自定义的错误提示文本。只要文本不为空，则表示字段验证未通过
+     * 设置自定义的错误提示文本。只要这个文本不为空，就表示字段未通过验证
      *
-     * @param message 自定义的提示文本
+     * @param message 自定义的错误提示文本
      */
     setCustomValidity(message) {
         this.inputRef.value.setCustomValidity(message);
         this.invalid = !this.inputRef.value.checkValidity();
     }
     render() {
-        return html `<label class="${classMap({ invalid: this.invalid })}"><input ${ref(this.inputRef)} type="checkbox" name="${ifDefined(this.name)}" value="${ifDefined(this.value)}" .indeterminate="${live(this.indeterminate)}" .disabled="${this.disabled}" .checked="${live(this.checked)}" .required="${this.required}" @change="${this.onChange}"> <i part="control"><mdui-ripple ${ref(this.rippleRef)} .noRipple="${this.noRipple}"></mdui-ripple><slot name="unchecked-icon" part="unchecked-icon" class="icon unchecked-icon">${this.uncheckedIcon
-            ? html `<mdui-icon name="${this.uncheckedIcon}" class="i"></mdui-icon>`
-            : html `<mdui-icon-check-box-outline-blank class="i"></mdui-icon-check-box-outline-blank>`}</slot><slot name="checked-icon" part="checked-icon" class="icon checked-icon">${this.checkedIcon
-            ? html `<mdui-icon name="${this.checkedIcon}" class="i"></mdui-icon>`
-            : html `<mdui-icon-check-box class="i"></mdui-icon-check-box>`}</slot><slot name="indeterminate-icon" part="indeterminate-icon" class="icon indeterminate-icon">${this.indeterminateIcon
-            ? html `<mdui-icon name="${this.indeterminateIcon}" class="i"></mdui-icon>`
-            : html `<mdui-icon-indeterminate-check-box class="i"></mdui-icon-indeterminate-check-box>`}</slot></i><slot part="label" class="label"></slot></label>`;
+        return html `<label class="${classMap({ invalid: this.invalid })}">
+      <input
+        ${ref(this.inputRef)}
+        type="checkbox"
+        name=${ifDefined(this.name)}
+        value=${ifDefined(this.value)}
+        .indeterminate=${live(this.indeterminate)}
+        .disabled=${this.disabled}
+        .checked=${live(this.checked)}
+        .required=${this.required}
+        @change=${this.onChange}
+      />
+      <i part="control">
+        <mdui-ripple
+          ${ref(this.rippleRef)}
+          .noRipple=${this.noRipple}
+        ></mdui-ripple>
+        <slot
+          name="unchecked-icon"
+          part="unchecked-icon"
+          class="icon unchecked-icon"
+        >
+          ${this.uncheckedIcon
+            ? html `<mdui-icon name=${this.uncheckedIcon} class="i"></mdui-icon>`
+            : html `<mdui-icon-check-box-outline-blank
+                class="i"
+              ></mdui-icon-check-box-outline-blank>`}
+        </slot>
+        <slot name="checked-icon" part="checked-icon" class="icon checked-icon">
+          ${this.checkedIcon
+            ? html `<mdui-icon name=${this.checkedIcon} class="i"></mdui-icon>`
+            : html `<mdui-icon-check-box class="i"></mdui-icon-check-box>`}
+        </slot>
+        <slot
+          name="indeterminate-icon"
+          part="indeterminate-icon"
+          class="icon indeterminate-icon"
+        >
+          ${this.indeterminateIcon
+            ? html `<mdui-icon
+                name=${this.indeterminateIcon}
+                class="i"
+              ></mdui-icon>`
+            : html `<mdui-icon-indeterminate-check-box
+                class="i"
+              ></mdui-icon-indeterminate-check-box>`}
+        </slot>
+      </i>
+      <slot part="label" class="label"></slot>
+    </label>`;
     }
     /**
      * input[type="checkbox"] 的 change 事件无法冒泡越过 shadow dom

package/components/checkbox/style.js

@@ -1,2 +1,132 @@
 import { css } from 'lit';
-export const style = css `:host{position:relative;display:inline-flex;cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:.125rem;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)}label{display:inline-flex;align-items:center;width:100%;cursor:inherit;-webkit-user-select:none;user-select:none;touch-action:manipulation;zoom:1;-webkit-user-drag:none}input{position:absolute;padding:0;opacity:0;pointer-events:none;width:1.125rem;height:1.125rem;margin:0 0 0 .6875rem}.icon{display:flex;position:absolute;opacity:1;transform:scale(1);color:rgb(var(--mdui-color-on-surface));font-size:1.5rem;transition:color var(--mdui-motion-duration-short4) var(--mdui-motion-easing-standard)}.checked-icon,.indeterminate-icon{opacity:0;transform:scale(.5);transition-property:color,opacity,transform;transition-duration:var(--mdui-motion-duration-short4);transition-timing-function:var(--mdui-motion-easing-standard)}.icon .i,::slotted([slot=checked-icon]),::slotted([slot=indeterminate-icon]),::slotted([slot=unchecked-icon]){color:inherit;font-size:inherit}i{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:50%;width:2.5rem;min-width:2.5rem;height:2.5rem;--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-surface)}.label{display:flex;width:100%;padding-top:.625rem;padding-bottom:.625rem;color:rgb(var(--mdui-color-on-surface));transition:color var(--mdui-motion-duration-short4) var(--mdui-motion-easing-standard)}:host([checked]) i{--mdui-comp-ripple-state-layer-color:var(--mdui-color-primary)}:host([checked]) .icon{color:rgb(var(--mdui-color-primary))}:host([checked]) .indeterminate-icon{opacity:0;transform:scale(.5)}:host([checked]) .checked-icon{opacity:1;transform:scale(1)}:host([indeterminate]) i{--mdui-comp-ripple-state-layer-color:var(--mdui-color-primary)}:host([indeterminate]) .icon{color:rgb(var(--mdui-color-primary))}:host([indeterminate]) .checked-icon{opacity:0;transform:scale(.5)}:host([indeterminate]) .indeterminate-icon{opacity:1;transform:scale(1)}.invalid i{--mdui-comp-ripple-state-layer-color:var(--mdui-color-error)}.invalid .icon{color:rgb(var(--mdui-color-error))}.invalid .label{color:rgb(var(--mdui-color-error))}:host([disabled]){cursor:default;pointer-events:none}:host([disabled]) .icon{color:rgba(var(--mdui-color-on-surface),38%)}:host([disabled]) .label{color:rgba(var(--mdui-color-on-surface),38%)}:host([disabled][checked]) .unchecked-icon,:host([disabled][indeterminate]) .unchecked-icon{opacity:0}`;
+export const style = css `
+  :host {
+    position: relative;
+    display: inline-flex;
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+    border-radius: 0.125rem;
+    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);
+  }
+  label {
+    display: inline-flex;
+    align-items: center;
+    width: 100%;
+    cursor: inherit;
+    -webkit-user-select: none;
+    user-select: none;
+    touch-action: manipulation;
+    zoom: 1;
+    -webkit-user-drag: none;
+  }
+  /* 隐藏系统 input 标签，用自定义的图标代替 */
+  input {
+    position: absolute;
+    padding: 0;
+    opacity: 0;
+    pointer-events: none;
+    width: 1.125rem;
+    height: 1.125rem;
+    margin: 0rem 0rem 0rem 0.6875rem;
+  }
+  .icon {
+    display: flex;
+    position: absolute;
+    opacity: 1;
+    transform: scale(1);
+    color: rgb(var(--mdui-color-on-surface));
+    font-size: 1.5rem;
+    transition: color var(--mdui-motion-duration-short4)
+      var(--mdui-motion-easing-standard);
+  }
+  .checked-icon,
+  .indeterminate-icon {
+    opacity: 0;
+    transform: scale(0.5);
+    transition-property: color, opacity, transform;
+    transition-duration: var(--mdui-motion-duration-short4);
+    transition-timing-function: var(--mdui-motion-easing-standard);
+  }
+  .icon .i,
+  ::slotted([slot='unchecked-icon']),
+  ::slotted([slot='checked-icon']),
+  ::slotted([slot='indeterminate-icon']) {
+    color: inherit;
+    font-size: inherit;
+  }
+  i {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    border-radius: 50%;
+    width: 2.5rem;
+    min-width: 2.5rem;
+    height: 2.5rem;
+    --mdui-comp-ripple-state-layer-color: var(--mdui-color-on-surface);
+  }
+  .label {
+    display: flex;
+    width: 100%;
+    padding-top: 0.625rem;
+    padding-bottom: 0.625rem;
+    color: rgb(var(--mdui-color-on-surface));
+    transition: color var(--mdui-motion-duration-short4)
+      var(--mdui-motion-easing-standard);
+  }
+  :host([checked]) i {
+    --mdui-comp-ripple-state-layer-color: var(--mdui-color-primary);
+  }
+  :host([checked]) .icon {
+    color: rgb(var(--mdui-color-primary));
+  }
+  :host([checked]) .indeterminate-icon {
+    opacity: 0;
+    transform: scale(0.5);
+  }
+  :host([checked]) .checked-icon {
+    opacity: 1;
+    transform: scale(1);
+  }
+  :host([indeterminate]) i {
+    --mdui-comp-ripple-state-layer-color: var(--mdui-color-primary);
+  }
+  :host([indeterminate]) .icon {
+    color: rgb(var(--mdui-color-primary));
+  }
+  :host([indeterminate]) .checked-icon {
+    opacity: 0;
+    transform: scale(0.5);
+  }
+  :host([indeterminate]) .indeterminate-icon {
+    opacity: 1;
+    transform: scale(1);
+  }
+  .invalid i {
+    --mdui-comp-ripple-state-layer-color: var(--mdui-color-error);
+  }
+  .invalid .icon {
+    color: rgb(var(--mdui-color-error));
+  }
+  .invalid .label {
+    color: rgb(var(--mdui-color-error));
+  }
+  :host([disabled]) {
+    cursor: default;
+    pointer-events: none;
+  }
+  :host([disabled]) .icon {
+    color: rgba(var(--mdui-color-on-surface), 38%);
+  }
+  :host([disabled]) .label {
+    color: rgba(var(--mdui-color-on-surface), 38%);
+  }
+  :host([disabled][checked]) .unchecked-icon,
+  :host([disabled][indeterminate]) .unchecked-icon {
+    opacity: 0;
+  }
+`;

package/components/chip/index.d.ts

@@ -17,35 +17,35 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
  * @event change - 选中状态变更时触发
  * @event delete - 点击删除图标时触发
  *
- * @slot - 文本
+ * @slot - 纸片文本
  * @slot icon - 左侧元素
  * @slot end-icon - 右侧元素
- * @slot selected-icon - 选中状态的左侧元素
- * @slot delete-icon - 可删除时，右侧的删除元素
+ * @slot selected-icon - 选中状态下的左侧元素
+ * @slot delete-icon - 可删除时的右侧删除元素
  *
- * @csspart button - 内部的 `button` 或 `a` 元素
- * @csspart label - 文本
+ * @csspart button - 内部的 `<button>` 或 `<a>` 元素
+ * @csspart label - 纸片文本
  * @csspart icon - 左侧图标
  * @csspart end-icon - 右侧图标
- * @csspart selected-icon - 选中状态的左侧图标
- * @csspart delete-icon - 可删除时，右侧的删除图标
+ * @csspart selected-icon - 选中状态下的左侧图标
+ * @csspart delete-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 Chip extends ButtonBase<ChipEventMap> {
     static styles: CSSResultGroup;
     /**
-     * 纸片形状。可选值为：
+     * 纸片的形状。可选值包括：
      *
-     * * `assist`：用于显示和当前上下文相关的辅助操作。例如在点餐页面，提供分享，收藏等功能
-     * * `filter`：用于对内容进行筛选。例如在搜索结果页，对搜索结果进行过滤
-     * * `input`：用于表示用户输入的信息片段。例如 Gmail 中“收件人”字段中的联系人
-     * * `suggestion`：用于提供动态生成的推荐信息，以简化用户操作。例如在聊天应用中猜测用户可能想发送的信息，供用户选择
+     * * `assist`：用于显示与当前上下文相关的辅助操作，如在点餐页面提供分享、收藏等功能
+     * * `filter`：用于对内容进行筛选，如在搜索结果页过滤搜索结果
+     * * `input`：用于表示用户输入的信息片段，如在 Gmail 的“收件人”字段中的联系人
+     * * `suggestion`：用于提供动态生成的推荐信息，以简化用户操作，如在聊天应用中预测用户可能想发送的信息
      */
-    variant: /*用于显示和当前上下文相关的辅助操作。例如在点餐页面，提供分享，收藏等功能*/ 'assist' | /*用于对内容进行筛选。例如在搜索结果页，对搜索结果进行过滤*/ 'filter' | /*用于表示用户输入的信息片段。例如 Gmail 中“收件人”字段中的联系人*/ 'input' | /*用于提供动态生成的推荐信息，以简化用户操作。例如在聊天应用中猜测用户可能想发送的信息，供用户选择*/ 'suggestion';
+    variant: /*用于显示与当前上下文相关的辅助操作，如在点餐页面提供分享、收藏等功能*/ 'assist' | /*用于对内容进行筛选，如在搜索结果页过滤搜索结果*/ 'filter' | /*用于表示用户输入的信息片段，如在 Gmail 的“收件人”字段中的联系人*/ 'input' | /*用于提供动态生成的推荐信息，以简化用户操作，如在聊天应用中预测用户可能想发送的信息*/ 'suggestion';
     /**
-     * 是否包含阴影
+     * 是否显示阴影
      */
     elevated: boolean;
     /**
@@ -53,11 +53,11 @@ export declare class Chip extends ButtonBase<ChipEventMap> {
      */
     selectable: boolean;
     /**
-     * 是否为选中状态
+     * 是否已选中
      */
     selected: boolean;
     /**
-     * 是否可删除。为 `true` 时，在右侧会显示删除图标图标
+     * 是否可删除。为 `true` 时，纸片右侧会显示删除图标
      */
     deletable: boolean;
     /**
@@ -65,7 +65,7 @@ export declare class Chip extends ButtonBase<ChipEventMap> {
      */
     icon?: string;
     /**
-     * 选中状态，左侧的 Material Icons 图标名。也可以通过 `slot="selected-icon"` 设置
+     * 选中状态下左侧的 Material Icons 图标名。也可以通过 `slot="selected-icon"` 设置
      */
     selectedIcon?: string;
     /**
@@ -73,7 +73,7 @@ export declare class Chip extends ButtonBase<ChipEventMap> {
      */
     endIcon?: string;
     /**
-     * 右侧的 Material Icons 图标名。也可以通过 `slot="delete-icon"` 设置
+     * 可删除时，右侧删除图标的 Material Icons 图标名。也可以通过 `slot="delete-icon"` 设置
      */
     deleteIcon?: string;
     private readonly rippleRef;