mdui 2.0.3 → 2.0.5

package/components/snackbar/style.js

@@ -1,2 +1,101 @@
 import { css } from 'lit';
-export const style = css `:host{--shape-corner:var(--mdui-shape-corner-extra-small);--z-index:2400;position:fixed;z-index:var(--z-index);display:none;align-items:center;flex-wrap:wrap;border-radius:var(--shape-corner);min-width:20rem;max-width:36rem;padding:.25rem 0;box-shadow:var(--mdui-elevation-level3);background-color:rgb(var(--mdui-color-inverse-surface));color:rgb(var(--mdui-color-inverse-on-surface));font-size:var(--mdui-typescale-body-medium-size);font-weight:var(--mdui-typescale-body-medium-weight);letter-spacing:var(--mdui-typescale-body-medium-tracking);line-height:var(--mdui-typescale-body-medium-line-height)}:host([placement^=top]){transform-origin:top;top:1rem}:host([placement^=bottom]){transform-origin:bottom;bottom:1rem}:host([placement=bottom-start]),:host([placement=top-start]){left:1rem}:host([placement=bottom-end]),:host([placement=top-end]){right:1rem}.message{display:block;margin:.625rem 1rem}:host([message-line='1']) .message{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host([message-line='2']) .message{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-box-orient:vertical;-webkit-line-clamp:2}.action-group{display:flex;align-items:center;margin-left:auto;padding-right:.5rem}.action,.close-button{display:inline-flex;align-items:center;justify-content:center}.action{color:rgb(var(--mdui-color-inverse-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)}.action mdui-button,::slotted(mdui-button[slot=action][variant=outlined]),::slotted(mdui-button[slot=action][variant=text]){color:inherit;font-size:inherit;font-weight:inherit;letter-spacing:inherit;--mdui-comp-ripple-state-layer-color:var(--mdui-color-inverse-primary)}.action mdui-button::part(button){padding:0 .5rem}.close-button{margin:0 -.25rem 0 .25rem;font-size:1.5rem;color:rgb(var(--mdui-color-inverse-on-surface))}.close-button mdui-button-icon,::slotted(mdui-button-icon[slot=close-button][variant=outlined]),::slotted(mdui-button-icon[slot=close-button][variant=standard]){font-size:inherit;color:inherit;--mdui-comp-ripple-state-layer-color:var(--mdui-color-inverse-on-surface)}.close-button .i,::slotted([slot=close-icon]){font-size:inherit}`;
+export const style = css `
+  :host {
+    --shape-corner: var(--mdui-shape-corner-extra-small);
+    --z-index: 2400;
+    position: fixed;
+    z-index: var(--z-index);
+    display: none;
+    align-items: center;
+    flex-wrap: wrap;
+    border-radius: var(--shape-corner);
+    min-width: 20rem;
+    max-width: 36rem;
+    padding: 0.25rem 0rem;
+    box-shadow: var(--mdui-elevation-level3);
+    background-color: rgb(var(--mdui-color-inverse-surface));
+    color: rgb(var(--mdui-color-inverse-on-surface));
+    font-size: var(--mdui-typescale-body-medium-size);
+    font-weight: var(--mdui-typescale-body-medium-weight);
+    letter-spacing: var(--mdui-typescale-body-medium-tracking);
+    line-height: var(--mdui-typescale-body-medium-line-height);
+  }
+  :host([placement^='top']) {
+    transform-origin: top;
+    top: 1rem;
+  }
+  :host([placement^='bottom']) {
+    transform-origin: bottom;
+    bottom: 1rem;
+  }
+  :host([placement='top-start']),
+  :host([placement='bottom-start']) {
+    left: 1rem;
+  }
+  :host([placement='top-end']),
+  :host([placement='bottom-end']) {
+    right: 1rem;
+  }
+  .message {
+    display: block;
+    margin: 0.625rem 1rem;
+  }
+  :host([message-line='1']) .message {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  :host([message-line='2']) .message {
+    display: -webkit-box;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+  }
+  .action-group {
+    display: flex;
+    align-items: center;
+    margin-left: auto;
+    padding-right: 0.5rem;
+  }
+  .action,
+  .close-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .action {
+    color: rgb(var(--mdui-color-inverse-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);
+  }
+  .action mdui-button,
+  ::slotted(mdui-button[slot='action'][variant='text']),
+  ::slotted(mdui-button[slot='action'][variant='outlined']) {
+    color: inherit;
+    font-size: inherit;
+    font-weight: inherit;
+    letter-spacing: inherit;
+    --mdui-comp-ripple-state-layer-color: var(--mdui-color-inverse-primary);
+  }
+  .action mdui-button::part(button) {
+    padding: 0rem 0.5rem;
+  }
+  .close-button {
+    margin: 0rem -0.25rem 0rem 0.25rem;
+    font-size: 1.5rem;
+    color: rgb(var(--mdui-color-inverse-on-surface));
+  }
+  .close-button mdui-button-icon,
+  ::slotted(mdui-button-icon[slot='close-button'][variant='standard']),
+  ::slotted(mdui-button-icon[slot='close-button'][variant='outlined']) {
+    font-size: inherit;
+    color: inherit;
+    --mdui-comp-ripple-state-layer-color: var(--mdui-color-inverse-on-surface);
+  }
+  .close-button .i,
+  ::slotted([slot='close-icon']) {
+    font-size: inherit;
+  }
+`;

package/components/switch/index.d.ts

@@ -26,8 +26,8 @@ declare const Switch_base: import("@open-wc/dedupe-mixin").Constructor<import(".
  * @csspart unchecked-icon - 未选中状态的图标
  * @csspart checked-icon 选中状态的图标
  *
- * @cssprop --shape-corner - 组件的轨道的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
- * @cssprop --shape-corner-thumb - 组件的图标容器的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --shape-corner - 组件轨道的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --shape-corner-thumb - 组件图标容器的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
  */
 export declare class Switch extends Switch_base<SwitchEventMap> implements FormControl {
     static styles: CSSResultGroup;
@@ -40,7 +40,7 @@ export declare class Switch extends Switch_base<SwitchEventMap> implements FormC
      */
     checked: boolean;
     /**
-     * 默认选中状态。在重置表单时，将重置为该默认状态。该属性只能通过 JavaScript 属性设置
+     * 默认选中状态。在重置表单时，将重置为此状态。此属性只能通过 JavaScript 属性设置
      */
     defaultChecked: boolean;
     /**
@@ -50,17 +50,17 @@ export declare class Switch extends Switch_base<SwitchEventMap> implements FormC
     /**
      * 选中状态的 Material Icons 图标名。也可以通过 `slot="checked-icon"` 设置
      *
-     * 默认为 check 图标，可传入空字符串移除默认图标
+     * 默认为 `check` 图标，可传入空字符串移除默认图标
      */
     checkedIcon?: string;
     /**
-     * 提交表单时，是否必须选中该开关
+     * 提交表单时，是否必须选中此开关
      */
     required: boolean;
     /**
-     * 关联的 `form` 元素。此属性值必须为同一页面中的一个 `<form>` 元素的 `id` 属性。
+     * 关联的 `<form>` 元素。此属性值应为同一页面中的一个 `<form>` 元素的 `id`。
      *
-     * 如果此属性未指定，则元素必须是 `form` 元素的后代。利用此属性，你可以将元素放置在页面中的任何位置，而不仅仅是作为 `form` 元素的后代。
+     * 如果未指定此属性，则该元素必须是 `<form>` 元素的子元素。通过此属性，你可以将元素放置在页面的任何位置，而不仅仅是 `<form>` 元素的子元素。
      */
     form?: string;
     /**
@@ -80,11 +80,11 @@ export declare class Switch extends Switch_base<SwitchEventMap> implements FormC
     private readonly formController;
     private readonly hasSlotController;
     /**
-     * 表单验证状态对象
+     * 表单验证状态对象，具体参见 [`ValidityState`](https://developer.mozilla.org/zh-CN/docs/Web/API/ValidityState)
      */
     get validity(): ValidityState;
     /**
-     * 表单验证的错误提示信息
+     * 如果表单验证未通过，此属性将包含提示信息。如果验证通过，此属性将为空字符串
      */
     get validationMessage(): string;
     protected get rippleElement(): Ripple;
@@ -94,19 +94,19 @@ export declare class Switch extends Switch_base<SwitchEventMap> implements FormC
     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/switch/index.js

@@ -39,8 +39,8 @@ import { style } from './style.js';
  * @csspart unchecked-icon - 未选中状态的图标
  * @csspart checked-icon 选中状态的图标
  *
- * @cssprop --shape-corner - 组件的轨道的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
- * @cssprop --shape-corner-thumb - 组件的图标容器的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --shape-corner - 组件轨道的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --shape-corner-thumb - 组件图标容器的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
  */
 let Switch = class Switch extends RippleMixin(FocusableMixin(MduiElement)) {
     constructor() {
@@ -54,11 +54,11 @@ let Switch = class Switch extends RippleMixin(FocusableMixin(MduiElement)) {
          */
         this.checked = false;
         /**
-         * 默认选中状态。在重置表单时，将重置为该默认状态。该属性只能通过 JavaScript 属性设置
+         * 默认选中状态。在重置表单时，将重置为此状态。此属性只能通过 JavaScript 属性设置
          */
         this.defaultChecked = false;
         /**
-         * 提交表单时，是否必须选中该开关
+         * 提交表单时，是否必须选中此开关
          */
         this.required = false;
         /**
@@ -83,13 +83,13 @@ let Switch = class Switch extends RippleMixin(FocusableMixin(MduiElement)) {
         this.hasSlotController = new HasSlotController(this, 'unchecked-icon');
     }
     /**
-     * 表单验证状态对象
+     * 表单验证状态对象，具体参见 [`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;
@@ -123,7 +123,7 @@ let Switch = class Switch extends RippleMixin(FocusableMixin(MduiElement)) {
         }
     }
     /**
-     * 检查表单字段是否验证通过。若未通过则返回 `false`，并触发 `invalid` 事件；若验证通过，则返回 `true`
+     * 检查表单字段是否通过验证。如果未通过，返回 `false` 并触发 `invalid` 事件；如果通过，返回 `true`
      */
     checkValidity() {
         const valid = this.inputRef.value.checkValidity();
@@ -137,9 +137,9 @@ let Switch = class Switch extends RippleMixin(FocusableMixin(MduiElement)) {
         return valid;
     }
     /**
-     * 检查表单字段是否验证通过。若未通过则返回 `false`，并触发 `invalid` 事件；若验证通过，则返回 `true`。
+     * 检查表单字段是否通过验证。如果未通过，返回 `false` 并触发 `invalid` 事件；如果通过，返回 `true`。
      *
-     * 验证未通过时，还将在组件上显示未通过的提示。
+     * 如果验证未通过，还会在组件上显示验证失败的提示。
      */
     reportValidity() {
         this.invalid = !this.inputRef.value.reportValidity();
@@ -158,25 +158,59 @@ let Switch = class Switch 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({
+        return html `<label
+      class=${classMap({
             invalid: this.invalid,
             'has-unchecked-icon': this.uncheckedIcon || this.hasSlotController.test('unchecked-icon'),
-        })}"><input ${ref(this.inputRef)} type="checkbox" name="${ifDefined(this.name)}" value="${ifDefined(this.value)}" .disabled="${this.disabled}" .checked="${live(this.checked)}" .required="${this.required}" @change="${this.onChange}"><div part="track" class="track"><div part="thumb" class="thumb"><mdui-ripple ${ref(this.rippleRef)} .noRipple="${this.noRipple}"></mdui-ripple><slot name="checked-icon" part="checked-icon" class="checked-icon">${this.checkedIcon
-            ? html `<mdui-icon name="${this.checkedIcon}" class="i"></mdui-icon>`
+        })}
+    >
+      <input
+        ${ref(this.inputRef)}
+        type="checkbox"
+        name=${ifDefined(this.name)}
+        value=${ifDefined(this.value)}
+        .disabled=${this.disabled}
+        .checked=${live(this.checked)}
+        .required=${this.required}
+        @change=${this.onChange}
+      />
+      <div part="track" class="track">
+        <div part="thumb" class="thumb">
+          <mdui-ripple
+            ${ref(this.rippleRef)}
+            .noRipple=${this.noRipple}
+          ></mdui-ripple>
+          <slot name="checked-icon" part="checked-icon" class="checked-icon">
+            ${this.checkedIcon
+            ? html `<mdui-icon name=${this.checkedIcon} class="i"></mdui-icon>`
             : this.checkedIcon === ''
                 ? nothingTemplate
-                : html `<mdui-icon-check class="i"></mdui-icon-check>`}</slot><slot name="unchecked-icon" part="unchecked-icon" class="unchecked-icon">${this.uncheckedIcon
-            ? html `<mdui-icon name="${this.uncheckedIcon}" class="i"></mdui-icon>`
-            : nothingTemplate}</slot></div></div></label>`;
+                : html `<mdui-icon-check class="i"></mdui-icon-check>`}
+          </slot>
+          <slot
+            name="unchecked-icon"
+            part="unchecked-icon"
+            class="unchecked-icon"
+          >
+            ${this.uncheckedIcon
+            ? html `<mdui-icon
+                  name=${this.uncheckedIcon}
+                  class="i"
+                ></mdui-icon>`
+            : nothingTemplate}
+          </slot>
+        </div>
+      </div>
+    </label>`;
     }
     /**
      * input[type="checkbox"] 的 change 事件无法冒泡越过 shadow dom

package/components/switch/style.js

@@ -1,2 +1,203 @@
 import { css } from 'lit';
-export const style = css `:host{--shape-corner:var(--mdui-shape-corner-full);--shape-corner-thumb:var(--mdui-shape-corner-full);position:relative;display:inline-block;cursor:pointer;-webkit-tap-highlight-color:transparent;height:2.5rem}:host([disabled]){cursor:default;pointer-events:none}label{display:inline-flex;align-items:center;width:100%;height:100%;white-space:nowrap;cursor:inherit;-webkit-user-select:none;user-select:none;touch-action:manipulation;zoom:1;-webkit-user-drag:none}.track{position:relative;display:flex;align-items:center;border-radius:var(--shape-corner);transition-property:background-color,border-width;transition-duration:var(--mdui-motion-duration-short4);transition-timing-function:var(--mdui-motion-easing-standard);height:2rem;width:3.25rem;border:.125rem solid rgb(var(--mdui-color-outline));background-color:rgb(var(--mdui-color-surface-container-highest))}:host([checked]) .track{background-color:rgb(var(--mdui-color-primary));border-width:0}.invalid .track{background-color:rgb(var(--mdui-color-error-container));border-color:rgb(var(--mdui-color-error))}:host([disabled]) .track{background-color:rgba(var(--mdui-color-surface-container-highest),.12);border-color:rgba(var(--mdui-color-on-surface),.12)}:host([disabled][checked]) .track{background-color:rgba(var(--mdui-color-on-surface),.12)}input{position:absolute;padding:0;opacity:0;pointer-events:none;width:1.25rem;height:1.25rem;margin:0 0 0 .625rem}mdui-ripple{border-radius:50%;transition-property:left,top;transition-duration:var(--mdui-motion-duration-short4);transition-timing-function:var(--mdui-motion-easing-standard);width:2.5rem;height:2.5rem}.thumb{position:absolute;display:flex;align-items:center;justify-content:center;border-radius:var(--shape-corner-thumb);transition-property:width,height,left,background-color;transition-duration:var(--mdui-motion-duration-short4);transition-timing-function:var(--mdui-motion-easing-standard);height:1rem;width:1rem;left:.375rem;background-color:rgb(var(--mdui-color-outline));--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-surface)}.thumb mdui-ripple{left:-.75rem;top:-.75rem}.has-unchecked-icon .thumb{height:1.5rem;width:1.5rem;left:.125rem}.has-unchecked-icon .thumb mdui-ripple{left:-.5rem;top:-.5rem}:host([focus-visible]) .thumb,:host([hover]) .thumb,:host([pressed]) .thumb{background-color:rgb(var(--mdui-color-on-surface-variant))}:host([checked]) .thumb{height:1.5rem;width:1.5rem;left:1.5rem;background-color:rgb(var(--mdui-color-on-primary));--mdui-comp-ripple-state-layer-color:var(--mdui-color-primary)}:host([checked]) .thumb mdui-ripple{left:-.5rem;top:-.5rem}:host([pressed]) .thumb{height:1.75rem;width:1.75rem;left:0}:host([pressed]) .thumb mdui-ripple{left:-.375rem;top:-.375rem}:host([pressed][checked]) .thumb{left:1.375rem}:host([focus-visible][checked]) .thumb,:host([hover][checked]) .thumb,:host([pressed][checked]) .thumb{background-color:rgb(var(--mdui-color-primary-container))}.invalid .thumb{background-color:rgb(var(--mdui-color-error));--mdui-comp-ripple-state-layer-color:var(--mdui-color-error)}:host([focus-visible]) .invalid .thumb,:host([hover]) .invalid .thumb,:host([pressed]) .invalid .thumb{background-color:rgb(var(--mdui-color-error))}:host([disabled]) .thumb{background-color:rgba(var(--mdui-color-on-surface),.38)}:host([disabled][checked]) .thumb{background-color:rgb(var(--mdui-color-surface))}.checked-icon,.unchecked-icon{display:flex;position:absolute;transition-property:opacity,transform;font-size:1rem}.unchecked-icon{opacity:1;transform:scale(1);transition-delay:var(--mdui-motion-duration-short1);transition-duration:var(--mdui-motion-duration-short3);transition-timing-function:var(--mdui-motion-easing-linear);color:rgb(var(--mdui-color-surface-container-highest))}:host([checked]) .unchecked-icon{opacity:0;transform:scale(.92);transition-delay:0s;transition-duration:var(--mdui-motion-duration-short1)}:host([disabled]) .unchecked-icon{color:rgba(var(--mdui-color-surface-container-highest),.38)}.checked-icon{opacity:0;transform:scale(.92);transition-delay:0s;transition-duration:var(--mdui-motion-duration-short1);transition-timing-function:var(--mdui-motion-easing-linear);color:rgb(var(--mdui-color-on-primary-container))}:host([checked]) .checked-icon{opacity:1;transform:scale(1);transition-delay:var(--mdui-motion-duration-short1);transition-duration:var(--mdui-motion-duration-short3)}.invalid .checked-icon{color:rgb(var(--mdui-color-error-container))}:host([disabled]) .checked-icon{color:rgba(var(--mdui-color-on-surface),.38)}.checked-icon .i,.unchecked-icon .i,::slotted([slot=checked-icon]),::slotted([slot=unchecked-icon]){font-size:inherit;color:inherit}`;
+export const style = css `
+  :host {
+    --shape-corner: var(--mdui-shape-corner-full);
+    --shape-corner-thumb: var(--mdui-shape-corner-full);
+    position: relative;
+    display: inline-block;
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+    height: 2.5rem;
+  }
+  :host([disabled]) {
+    cursor: default;
+    pointer-events: none;
+  }
+  label {
+    display: inline-flex;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    white-space: nowrap;
+    cursor: inherit;
+    -webkit-user-select: none;
+    user-select: none;
+    touch-action: manipulation;
+    zoom: 1;
+    -webkit-user-drag: none;
+  }
+  /* 轨道 */
+  .track {
+    position: relative;
+    display: flex;
+    align-items: center;
+    border-radius: var(--shape-corner);
+    transition-property: background-color, border-width;
+    transition-duration: var(--mdui-motion-duration-short4);
+    transition-timing-function: var(--mdui-motion-easing-standard);
+    height: 2rem;
+    width: 3.25rem;
+    border: 0.125rem solid rgb(var(--mdui-color-outline));
+    background-color: rgb(var(--mdui-color-surface-container-highest));
+  }
+  :host([checked]) .track {
+    background-color: rgb(var(--mdui-color-primary));
+    border-width: 0rem;
+  }
+  .invalid .track {
+    background-color: rgb(var(--mdui-color-error-container));
+    border-color: rgb(var(--mdui-color-error));
+  }
+  :host([disabled]) .track {
+    background-color: rgba(var(--mdui-color-surface-container-highest), 0.12);
+    border-color: rgba(var(--mdui-color-on-surface), 0.12);
+  }
+  :host([disabled][checked]) .track {
+    background-color: rgba(var(--mdui-color-on-surface), 0.12);
+  }
+  /* 隐藏系统 input 标签，用自定义的图标代替 */
+  input {
+    position: absolute;
+    padding: 0;
+    opacity: 0;
+    pointer-events: none;
+    width: 1.25rem;
+    height: 1.25rem;
+    margin: 0rem 0rem 0rem 0.625rem;
+  }
+  mdui-ripple {
+    border-radius: 50%;
+    transition-property: left, top;
+    transition-duration: var(--mdui-motion-duration-short4);
+    transition-timing-function: var(--mdui-motion-easing-standard);
+    width: 2.5rem;
+    height: 2.5rem;
+  }
+  .thumb {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--shape-corner-thumb);
+    transition-property: width, height, left, background-color;
+    transition-duration: var(--mdui-motion-duration-short4);
+    transition-timing-function: var(--mdui-motion-easing-standard);
+    height: 1rem;
+    width: 1rem;
+    left: 0.375rem;
+    background-color: rgb(var(--mdui-color-outline));
+    --mdui-comp-ripple-state-layer-color: var(--mdui-color-on-surface);
+  }
+  .thumb mdui-ripple {
+    left: -0.75rem;
+    top: -0.75rem;
+  }
+  .has-unchecked-icon .thumb {
+    height: 1.5rem;
+    width: 1.5rem;
+    left: 0.125rem;
+  }
+  .has-unchecked-icon .thumb mdui-ripple {
+    left: -0.5rem;
+    top: -0.5rem;
+  }
+  :host([hover]) .thumb,
+  :host([focus-visible]) .thumb,
+  :host([pressed]) .thumb {
+    background-color: rgb(var(--mdui-color-on-surface-variant));
+  }
+  :host([checked]) .thumb {
+    height: 1.5rem;
+    width: 1.5rem;
+    left: 1.5rem;
+    background-color: rgb(var(--mdui-color-on-primary));
+    --mdui-comp-ripple-state-layer-color: var(--mdui-color-primary);
+  }
+  :host([checked]) .thumb mdui-ripple {
+    left: -0.5rem;
+    top: -0.5rem;
+  }
+  :host([pressed]) .thumb {
+    height: 1.75rem;
+    width: 1.75rem;
+    left: 0rem;
+  }
+  :host([pressed]) .thumb mdui-ripple {
+    left: -0.375rem;
+    top: -0.375rem;
+  }
+  :host([pressed][checked]) .thumb {
+    left: 1.375rem;
+  }
+  :host([hover][checked]) .thumb,
+  :host([focus-visible][checked]) .thumb,
+  :host([pressed][checked]) .thumb {
+    background-color: rgb(var(--mdui-color-primary-container));
+  }
+  .invalid .thumb {
+    background-color: rgb(var(--mdui-color-error));
+    --mdui-comp-ripple-state-layer-color: var(--mdui-color-error);
+  }
+  :host([hover]) .invalid .thumb,
+  :host([focus-visible]) .invalid .thumb,
+  :host([pressed]) .invalid .thumb {
+    background-color: rgb(var(--mdui-color-error));
+  }
+  :host([disabled]) .thumb {
+    background-color: rgba(var(--mdui-color-on-surface), 0.38);
+  }
+  :host([disabled][checked]) .thumb {
+    background-color: rgb(var(--mdui-color-surface));
+  }
+  .unchecked-icon,
+  .checked-icon {
+    display: flex;
+    position: absolute;
+    transition-property: opacity, transform;
+    font-size: 1rem;
+  }
+  .unchecked-icon {
+    opacity: 1;
+    transform: scale(1);
+    transition-delay: var(--mdui-motion-duration-short1);
+    transition-duration: var(--mdui-motion-duration-short3);
+    transition-timing-function: var(--mdui-motion-easing-linear);
+    color: rgb(var(--mdui-color-surface-container-highest));
+  }
+  :host([checked]) .unchecked-icon {
+    opacity: 0;
+    transform: scale(0.92);
+    transition-delay: 0ms;
+    transition-duration: var(--mdui-motion-duration-short1);
+  }
+  :host([disabled]) .unchecked-icon {
+    color: rgba(var(--mdui-color-surface-container-highest), 0.38);
+  }
+  .checked-icon {
+    opacity: 0;
+    transform: scale(0.92);
+    transition-delay: 0ms;
+    transition-duration: var(--mdui-motion-duration-short1);
+    transition-timing-function: var(--mdui-motion-easing-linear);
+    color: rgb(var(--mdui-color-on-primary-container));
+  }
+  :host([checked]) .checked-icon {
+    opacity: 1;
+    transform: scale(1);
+    transition-delay: var(--mdui-motion-duration-short1);
+    transition-duration: var(--mdui-motion-duration-short3);
+  }
+  .invalid .checked-icon {
+    color: rgb(var(--mdui-color-error-container));
+  }
+  :host([disabled]) .checked-icon {
+    color: rgba(var(--mdui-color-on-surface), 0.38);
+  }
+  .unchecked-icon .i,
+  .checked-icon .i,
+  ::slotted([slot='unchecked-icon']),
+  ::slotted([slot='checked-icon']) {
+    font-size: inherit;
+    color: inherit;
+  }
+`;

package/components/tabs/tab-panel-style.js

@@ -1,2 +1,11 @@
 import { css } from 'lit';
-export const tabPanelStyle = css `:host{display:block;overflow-y:auto;flex:1 1 auto}:host(:not([active])){display:none}`;
+export const tabPanelStyle = css `
+  :host {
+    display: block;
+    overflow-y: auto;
+    flex: 1 1 auto;
+  }
+  :host(:not([active])) {
+    display: none;
+  }
+`;

package/components/tabs/tab-panel.d.ts

@@ -1,7 +1,7 @@
 import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import type { CSSResultGroup, TemplateResult } from 'lit';
 /**
- * @summary 选项卡面板项组件。需与 `<mdui-tabs>` 和 `<mdui-tab>` 组件配合使用
+ * @summary 选项卡面板项组件。需配合 `<mdui-tabs>` 和 `<mdui-tab>` 组件使用
  *
  * ```html
  * <mdui-tabs value="tab-1">
@@ -15,12 +15,12 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
  * </mdui-tabs>
  * ```
  *
- * @slot - 选项卡面板内容
+ * @slot - 选项卡面板项内容
  */
 export declare class TabPanel extends MduiElement<TabPanelEventMap> {
     static styles: CSSResultGroup;
     /**
-     * 该选项卡面板的值
+     * 选项卡面板项的值
      */
     value?: string;
     /**

package/components/tabs/tab-panel.js

@@ -6,7 +6,7 @@ import { booleanConverter } from '@mdui/shared/helpers/decorator.js';
 import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
 import { tabPanelStyle } from './tab-panel-style.js';
 /**
- * @summary 选项卡面板项组件。需与 `<mdui-tabs>` 和 `<mdui-tab>` 组件配合使用
+ * @summary 选项卡面板项组件。需配合 `<mdui-tabs>` 和 `<mdui-tab>` 组件使用
  *
  * ```html
  * <mdui-tabs value="tab-1">
@@ -20,7 +20,7 @@ import { tabPanelStyle } from './tab-panel-style.js';
  * </mdui-tabs>
  * ```
  *
- * @slot - 选项卡面板内容
+ * @slot - 选项卡面板项内容
  */
 let TabPanel = class TabPanel extends MduiElement {
     constructor() {

package/components/tabs/tab-style.js

@@ -1,2 +1,86 @@
 import { css } from 'lit';
-export const tabStyle = css `:host{position:relative;--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-surface)}:host([active]){--mdui-comp-ripple-state-layer-color:var(--mdui-color-primary)}.container{display:flex;justify-content:center;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;height:100%}.preset{flex-direction:column;min-height:3rem;padding:.625rem 1rem}:host([inline]) .preset{flex-direction:row}.icon-container,.label-container{position:relative;display:flex;align-items:center;justify-content:center}.icon-container ::slotted([slot=badge]){position:absolute;transform:translate(50%,-50%)}.icon-container ::slotted([slot=badge][variant=small]){transform:translate(.5625rem,-.5625rem)}.label-container ::slotted([slot=badge]){position:absolute;left:100%;bottom:100%;transform:translate(-.75rem,.625rem)}.label-container ::slotted([slot=badge][variant=small]){transform:translate(-.375rem,.375rem)}.icon,.label{display:flex;color:rgb(var(--mdui-color-on-surface-variant))}:host([focused]) .icon,:host([focused]) .label,:host([hover]) .icon,:host([hover]) .label,:host([pressed]) .icon,:host([pressed]) .label{color:rgb(var(--mdui-color-on-surface))}:host([active]) .icon,:host([active]) .label{color:rgb(var(--mdui-color-primary))}:host([active]) .variant-secondary .icon,:host([active]) .variant-secondary .label{color:rgb(var(--mdui-color-on-surface))}.icon{font-size:1.5rem}.label{font-size:var(--mdui-typescale-title-small-size);font-weight:var(--mdui-typescale-title-small-weight);letter-spacing:var(--mdui-typescale-title-small-tracking);line-height:var(--mdui-typescale-title-small-line-height)}.icon mdui-icon,::slotted([slot=icon]){font-size:inherit;color:inherit}`;
+export const tabStyle = css `
+  :host {
+    position: relative;
+    --mdui-comp-ripple-state-layer-color: var(--mdui-color-on-surface);
+  }
+  :host([active]) {
+    --mdui-comp-ripple-state-layer-color: var(--mdui-color-primary);
+  }
+  .container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    -webkit-user-select: none;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+    height: 100%;
+  }
+  .preset {
+    flex-direction: column;
+    min-height: 3rem;
+    padding: 0.625rem 1rem;
+  }
+  :host([inline]) .preset {
+    flex-direction: row;
+  }
+  .icon-container,
+  .label-container {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .icon-container ::slotted([slot='badge']) {
+    position: absolute;
+    transform: translate(50%, -50%);
+  }
+  .icon-container ::slotted([slot='badge'][variant='small']) {
+    transform: translate(0.5625rem, -0.5625rem);
+  }
+  .label-container ::slotted([slot='badge']) {
+    position: absolute;
+    left: 100%;
+    bottom: 100%;
+    transform: translate(-0.75rem, 0.625rem);
+  }
+  .label-container ::slotted([slot='badge'][variant='small']) {
+    transform: translate(-0.375rem, 0.375rem);
+  }
+  .icon,
+  .label {
+    display: flex;
+    color: rgb(var(--mdui-color-on-surface-variant));
+  }
+  :host([hover]) .icon,
+  :host([hover]) .label,
+  :host([focused]) .icon,
+  :host([focused]) .label,
+  :host([pressed]) .icon,
+  :host([pressed]) .label {
+    color: rgb(var(--mdui-color-on-surface));
+  }
+  :host([active]) .icon,
+  :host([active]) .label {
+    color: rgb(var(--mdui-color-primary));
+  }
+  :host([active]) .variant-secondary .icon,
+  :host([active]) .variant-secondary .label {
+    color: rgb(var(--mdui-color-on-surface));
+  }
+  .icon {
+    font-size: 1.5rem;
+  }
+  .label {
+    font-size: var(--mdui-typescale-title-small-size);
+    font-weight: var(--mdui-typescale-title-small-weight);
+    letter-spacing: var(--mdui-typescale-title-small-tracking);
+    line-height: var(--mdui-typescale-title-small-line-height);
+  }
+  .icon mdui-icon,
+  ::slotted([slot='icon']) {
+    font-size: inherit;
+    color: inherit;
+  }
+`;