mdui 2.0.3 → 2.0.5

package/components/navigation-rail/navigation-rail-item.d.ts

@@ -4,7 +4,7 @@ import type { Ripple } from '../ripple/index.js';
 import type { CSSResultGroup, TemplateResult } from 'lit';
 declare const NavigationRailItem_base: import("@open-wc/dedupe-mixin").Constructor<import("@mdui/shared/mixins/anchor.js").AnchorMixinInterface> & import("@open-wc/dedupe-mixin").Constructor<import("../ripple/ripple-mixin.js").RippleMixinInterface> & import("@open-wc/dedupe-mixin").Constructor<import("@mdui/shared/mixins/focusable.js").FocusableMixinInterface> & typeof MduiElement;
 /**
- * @summary 侧边导航栏项组件。需与 `<mdui-navigation-rail>` 组件配合使用
+ * @summary 侧边导航项组件。需配合 `<mdui-navigation-rail>` 组件使用
  *
  * ```html
  * <mdui-navigation-rail>
@@ -14,7 +14,7 @@ declare const NavigationRailItem_base: import("@open-wc/dedupe-mixin").Construct
  * </mdui-navigation-rail>
  * ```
  *
- * @slot - 文本
+ * @slot - 文本内容
  * @slot icon - 图标
  * @slot active-icon - 激活状态的图标
  * @slot badge - 徽标
@@ -27,18 +27,18 @@ declare const NavigationRailItem_base: import("@open-wc/dedupe-mixin").Construct
  * @csspart badge - 徽标
  * @csspart icon - 图标
  * @csspart active-icon - 激活状态的图标
- * @csspart label - 文本
+ * @csspart label - 文本内容
  *
- * @cssprop --shape-corner-indicator - 指示器的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --shape-corner-indicator - 指示器的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
  */
 export declare class NavigationRailItem extends NavigationRailItem_base<NavigationRailItemEventMap> {
     static styles: CSSResultGroup;
     /**
-     * 未激活状态的 Material Icons 图标名。也可以通过 `slot="icon"` 设置
+     * 未激活状态下的 Material Icons 图标名。也可以通过 `slot="icon"` 设置
      */
     icon?: string;
     /**
-     * 激活状态的 Material Icons 图标名。也可以通过 `slot="active-icon"` 设置
+     * 激活状态下的 Material Icons 图标名。也可以通过 `slot="active-icon"` 设置
      */
     activeIcon?: string;
     /**

package/components/navigation-rail/navigation-rail-item.js

@@ -16,7 +16,7 @@ import '../icon.js';
 import { RippleMixin } from '../ripple/ripple-mixin.js';
 import { navigationRailItemStyle } from './navigation-rail-item-style.js';
 /**
- * @summary 侧边导航栏项组件。需与 `<mdui-navigation-rail>` 组件配合使用
+ * @summary 侧边导航项组件。需配合 `<mdui-navigation-rail>` 组件使用
  *
  * ```html
  * <mdui-navigation-rail>
@@ -26,7 +26,7 @@ import { navigationRailItemStyle } from './navigation-rail-item-style.js';
  * </mdui-navigation-rail>
  * ```
  *
- * @slot - 文本
+ * @slot - 文本内容
  * @slot icon - 图标
  * @slot active-icon - 激活状态的图标
  * @slot badge - 徽标
@@ -39,9 +39,9 @@ import { navigationRailItemStyle } from './navigation-rail-item-style.js';
  * @csspart badge - 徽标
  * @csspart icon - 图标
  * @csspart active-icon - 激活状态的图标
- * @csspart label - 文本
+ * @csspart label - 文本内容
  *
- * @cssprop --shape-corner-indicator - 指示器的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --shape-corner-indicator - 指示器的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
  */
 let NavigationRailItem = class NavigationRailItem extends AnchorMixin(RippleMixin(FocusableMixin(MduiElement))) {
     constructor() {
@@ -91,17 +91,36 @@ let NavigationRailItem = class NavigationRailItem extends AnchorMixin(RippleMixi
                 className,
                 content: this.renderInner(hasDefaultSlot),
             })
-            : html `<div part="container" class="${className}">${this.renderInner(hasDefaultSlot)}</div>`}<mdui-ripple .noRipple="${!this.active || this.noRipple}" ${ref(this.rippleRef)}></mdui-ripple>`;
+            : html `<div part="container" class=${className}>
+            ${this.renderInner(hasDefaultSlot)}
+          </div>`}
+      <mdui-ripple
+        .noRipple=${!this.active || this.noRipple}
+        ${ref(this.rippleRef)}
+      ></mdui-ripple>`;
     }
     renderInner(hasDefaultSlot) {
-        return html `<div part="indicator" class="indicator"><slot name="badge" part="badge" class="${classMap({
+        return html `<div part="indicator" class="indicator">
+        <slot
+          name="badge"
+          part="badge"
+          class=${classMap({
             badge: true,
             'placement-right': this.placement === 'right',
-        })}"></slot><slot name="active-icon" part="active-icon" class="active-icon">${this.activeIcon
-            ? html `<mdui-icon name="${this.activeIcon}"></mdui-icon>`
-            : nothingTemplate}</slot><slot name="icon" part="icon" class="icon">${this.icon
-            ? html `<mdui-icon name="${this.icon}"></mdui-icon>`
-            : nothingTemplate}</slot></div>${hasDefaultSlot
+        })}
+        ></slot>
+        <slot name="active-icon" part="active-icon" class="active-icon">
+          ${this.activeIcon
+            ? html `<mdui-icon name=${this.activeIcon}></mdui-icon>`
+            : nothingTemplate}
+        </slot>
+        <slot name="icon" part="icon" class="icon">
+          ${this.icon
+            ? html `<mdui-icon name=${this.icon}></mdui-icon>`
+            : nothingTemplate}
+        </slot>
+      </div>
+      ${hasDefaultSlot
             ? html `<slot part="label" class="label"></slot>`
             : nothing}`;
     }

package/components/navigation-rail/navigation-rail-style.js

@@ -1,2 +1,80 @@
 import { css } from 'lit';
-export const navigationRailStyle = css `:host{--shape-corner:var(--mdui-shape-corner-none);--z-index:2000;position:fixed;top:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;border-radius:0 var(--shape-corner) var(--shape-corner) 0;z-index:var(--z-index);width:5rem;background-color:rgb(var(--mdui-color-surface));padding:.375rem .75rem}:host([contained]){position:absolute}:host([divider]){border-right:.0625rem solid rgb(var(--mdui-color-surface-variant));width:5.0625rem}:host([placement=right]){left:initial;right:0;border-radius:var(--shape-corner) 0 0 var(--shape-corner)}:host([placement=right][divider]){border-right:none;border-left:.0625rem solid rgb(var(--mdui-color-surface-variant))}.bottom,.items,.top{display:flex;flex-direction:column;align-items:center;width:100%}.top{margin-bottom:1.75rem}.bottom{margin-top:1.75rem}::slotted([slot=bottom]),::slotted([slot=top]),::slotted(mdui-navigation-rail-item){margin-top:.375rem;margin-bottom:.375rem}:host([alignment=start]) .top-spacer{flex-grow:0}:host([alignment=start]) .bottom-spacer{flex-grow:1}:host([alignment=end]) .top-spacer{flex-grow:1}:host([alignment=end]) .bottom-spacer{flex-grow:0}:host([alignment=center]){justify-content:center}:host([alignment=center]) .bottom,:host([alignment=center]) .top{position:absolute}:host([alignment=center]) .top{top:.375rem}:host([alignment=center]) .bottom{bottom:.375rem}`;
+export const navigationRailStyle = css `
+  :host {
+    --shape-corner: var(--mdui-shape-corner-none);
+    --z-index: 2000;
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    border-radius: 0 var(--shape-corner) var(--shape-corner) 0;
+    z-index: var(--z-index);
+    width: 5rem;
+    background-color: rgb(var(--mdui-color-surface));
+    padding: 0.375rem 0.75rem;
+  }
+  :host([contained]) {
+    position: absolute;
+  }
+  :host([divider]) {
+    border-right: 0.0625rem solid rgb(var(--mdui-color-surface-variant));
+    width: 5.0625rem;
+  }
+  :host([placement='right']) {
+    left: initial;
+    right: 0;
+    border-radius: var(--shape-corner) 0 0 var(--shape-corner);
+  }
+  :host([placement='right'][divider]) {
+    border-right: none;
+    border-left: 0.0625rem solid rgb(var(--mdui-color-surface-variant));
+  }
+  .top,
+  .items,
+  .bottom {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+  }
+  .top {
+    margin-bottom: 1.75rem;
+  }
+  .bottom {
+    margin-top: 1.75rem;
+  }
+  ::slotted(mdui-navigation-rail-item),
+  ::slotted([slot='top']),
+  ::slotted([slot='bottom']) {
+    margin-top: 0.375rem;
+    margin-bottom: 0.375rem;
+  }
+  :host([alignment='start']) .top-spacer {
+    flex-grow: 0;
+  }
+  :host([alignment='start']) .bottom-spacer {
+    flex-grow: 1;
+  }
+  :host([alignment='end']) .top-spacer {
+    flex-grow: 1;
+  }
+  :host([alignment='end']) .bottom-spacer {
+    flex-grow: 0;
+  }
+  :host([alignment='center']) {
+    justify-content: center;
+  }
+  :host([alignment='center']) .top,
+  :host([alignment='center']) .bottom {
+    position: absolute;
+  }
+  :host([alignment='center']) .top {
+    top: 0.375rem;
+  }
+  :host([alignment='center']) .bottom {
+    bottom: 0.375rem;
+  }
+`;

package/components/navigation-rail/navigation-rail.d.ts

@@ -4,7 +4,7 @@ import { LayoutItemBase } from '../layout/layout-item-base.js';
 import type { LayoutPlacement } from '../layout/helper.js';
 import type { CSSResultGroup, TemplateResult } from 'lit';
 /**
- * @summary 侧边导航栏组件。需与 `<mdui-navigation-rail-item>` 组件配合使用
+ * @summary 侧边导航栏组件。需配合 `<mdui-navigation-rail-item>` 组件使用
  *
  * ```html
  * <mdui-navigation-rail>
@@ -24,8 +24,8 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
  * @csspart bottom - 底部元素的容器
  * @csspart items - `<mdui-navigation-rail-item>` 组件的容器
  *
- * @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 NavigationRail extends LayoutItemBase<NavigationRailEventMap> {
     static styles: CSSResultGroup;
@@ -34,14 +34,14 @@ export declare class NavigationRail extends LayoutItemBase<NavigationRailEventMa
      */
     value?: string;
     /**
-     * 导航栏的位置。可选值为：
+     * 导航栏的位置。可选值包括：
      *
-     * * `left`：显示在左侧
-     * * `right`：显示在右侧
+     * * `left`：左侧
+     * * `right`：右侧
      */
-    placement: /*显示在左侧*/ 'left' | /*显示在右侧*/ 'right';
+    placement: /*左侧*/ 'left' | /*右侧*/ 'right';
     /**
-     * 导航栏中的 `<mdui-navigation-rail-item>` 元素的对齐方式。可选值为：
+     * `<mdui-navigation-rail-item>` 元素的对齐方式。可选值包括：
      *
      * * `start`：顶部对齐
      * * `center`：居中对齐
@@ -49,10 +49,9 @@ export declare class NavigationRail extends LayoutItemBase<NavigationRailEventMa
      */
     alignment: /*顶部对齐*/ 'start' | /*居中对齐*/ 'center' | /*底部对齐*/ 'end';
     /**
-     * 默认导航栏相对于 `body` 元素显示，该参数设置为 `true` 时，导航栏将相对于它的父元素显示
+     * 默认情况下，导航栏相对于 `body` 元素显示。当该参数设置为 `true` 时，导航栏将相对于其父元素显示。
      *
-     * Note:
-     * 设置了该属性时，必须手动在父元素上设置样式 `position: relative;`
+     * **Note**：设置该属性时，必须在父元素上手动设置样式 `position: relative;`。
      */
     contained: boolean;
     /**

package/components/navigation-rail/navigation-rail.js

@@ -13,7 +13,7 @@ import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
 import { LayoutItemBase } from '../layout/layout-item-base.js';
 import { navigationRailStyle } from './navigation-rail-style.js';
 /**
- * @summary 侧边导航栏组件。需与 `<mdui-navigation-rail-item>` 组件配合使用
+ * @summary 侧边导航栏组件。需配合 `<mdui-navigation-rail-item>` 组件使用
  *
  * ```html
  * <mdui-navigation-rail>
@@ -33,21 +33,21 @@ import { navigationRailStyle } from './navigation-rail-style.js';
  * @csspart bottom - 底部元素的容器
  * @csspart items - `<mdui-navigation-rail-item>` 组件的容器
  *
- * @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 NavigationRail = class NavigationRail extends LayoutItemBase {
     constructor() {
         super(...arguments);
         /**
-         * 导航栏的位置。可选值为：
+         * 导航栏的位置。可选值包括：
          *
-         * * `left`：显示在左侧
-         * * `right`：显示在右侧
+         * * `left`：左侧
+         * * `right`：右侧
          */
         this.placement = 'left';
         /**
-         * 导航栏中的 `<mdui-navigation-rail-item>` 元素的对齐方式。可选值为：
+         * `<mdui-navigation-rail-item>` 元素的对齐方式。可选值包括：
          *
          * * `start`：顶部对齐
          * * `center`：居中对齐
@@ -55,10 +55,9 @@ let NavigationRail = class NavigationRail extends LayoutItemBase {
          */
         this.alignment = 'start';
         /**
-         * 默认导航栏相对于 `body` 元素显示，该参数设置为 `true` 时，导航栏将相对于它的父元素显示
+         * 默认情况下，导航栏相对于 `body` 元素显示。当该参数设置为 `true` 时，导航栏将相对于其父元素显示。
          *
-         * Note:
-         * 设置了该属性时，必须手动在父元素上设置样式 `position: relative;`
+         * **Note**：设置该属性时，必须在父元素上手动设置样式 `position: relative;`。
          */
         this.contained = false;
         /**
@@ -156,7 +155,16 @@ let NavigationRail = class NavigationRail extends LayoutItemBase {
     render() {
         const hasTopSlot = this.hasSlotController.test('top');
         const hasBottomSlot = this.hasSlotController.test('bottom');
-        return html `${when(hasTopSlot, () => html `<slot name="top" part="top" class="top"></slot>`)} <span class="top-spacer"></span><slot part="items" class="items" @slotchange="${this.onSlotChange}" @click="${this.onClick}"></slot><span class="bottom-spacer"></span> ${when(hasBottomSlot, () => html `<slot name="bottom" part="bottom" class="bottom"></slot>`)}`;
+        return html `${when(hasTopSlot, () => html `<slot name="top" part="top" class="top"></slot>`)}
+      <span class="top-spacer"></span>
+      <slot
+        part="items"
+        class="items"
+        @slotchange=${this.onSlotChange}
+        @click=${this.onClick}
+      ></slot>
+      <span class="bottom-spacer"></span>
+      ${when(hasBottomSlot, () => html `<slot name="bottom" part="bottom" class="bottom"></slot>`)}`;
     }
     onClick(event) {
         // event.button 为 0 时，为鼠标左键点击。忽略鼠标中键和右键

package/components/radio/radio-group-style.js

@@ -1,2 +1,21 @@
 import { css } from 'lit';
-export const radioGroupStyle = css `:host{display:inline-block}fieldset{border:none;padding:0;margin:0;min-width:0}input{position:absolute;padding:0;opacity:0;pointer-events:none;width:1.25rem;height:1.25rem;margin:0 0 0 .625rem}`;
+export const radioGroupStyle = css `
+  :host {
+    display: inline-block;
+  }
+  fieldset {
+    border: none;
+    padding: 0;
+    margin: 0;
+    min-width: 0;
+  }
+  input {
+    position: absolute;
+    padding: 0;
+    opacity: 0;
+    pointer-events: none;
+    width: 1.25rem;
+    height: 1.25rem;
+    margin: 0rem 0rem 0rem 0.625rem;
+  }
+`;

package/components/radio/radio-group.d.ts

@@ -5,7 +5,7 @@ import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import type { FormControl } from '@mdui/jq/shared/form.js';
 import type { CSSResultGroup, TemplateResult } from 'lit';
 /**
- * @summary 单选框组组件。需与 `<mdui-radio>` 组件配合使用
+ * @summary 单选框组组件。需配合 `<mdui-radio>` 组件使用
  *
  * ```html
  * <mdui-radio-group value="chinese">
@@ -23,21 +23,21 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
 export declare class RadioGroup extends MduiElement<RadioGroupEventMap> implements FormControl {
     static styles: CSSResultGroup;
     /**
-     * 是否为禁用状态
+     * 是否禁用此组件
      */
     disabled: boolean;
     /**
-     * 关联的 `form` 元素。此属性值必须为同一页面中的一个 `<form>` 元素的 `id` 属性。
+     * 关联的 `<form>` 元素。此属性值应为同一页面中的一个 `<form>` 元素的 `id`。
      *
-     * 如果此属性未指定，则元素必须是 `form` 元素的后代。利用此属性，你可以将元素放置在页面中的任何位置，而不仅仅是作为 `form` 元素的后代。
+     * 如果未指定此属性，则该元素必须是 `<form>` 元素的子元素。通过此属性，你可以将元素放置在页面的任何位置，而不仅仅是 `<form>` 元素的子元素。
      */
     form?: string;
     /**
-     * 单选框名称，将与表单数据一起提交
+     * 单选框组的名称，将与表单数据一起提交
      */
     name: string;
     /**
-     * 单选框的值，将于表单数据一起提交
+     * 单选框组的名称，将于表单数据一起提交
      */
     value: string;
     /**
@@ -57,11 +57,11 @@ export declare class RadioGroup extends MduiElement<RadioGroupEventMap> implemen
     private readonly formController;
     private readonly definedController;
     /**
-     * 表单验证状态对象
+     * 表单验证状态对象，具体参见 [`ValidityState`](https://developer.mozilla.org/zh-CN/docs/Web/API/ValidityState)
      */
     get validity(): ValidityState;
     /**
-     * 表单验证的错误提示信息
+     * 如果表单验证未通过，此属性将包含提示信息。如果验证通过，此属性将为空字符串
      */
     get validationMessage(): string;
     private get items();
@@ -69,19 +69,19 @@ export declare class RadioGroup extends MduiElement<RadioGroupEventMap> implemen
     private onValueChange;
     private onInvalidChange;
     /**
-     * 检查表单字段是否验证通过。若未通过则返回 `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/radio/radio-group.js

@@ -16,7 +16,7 @@ import { booleanConverter } from '@mdui/shared/helpers/decorator.js';
 import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
 import { radioGroupStyle } from './radio-group-style.js';
 /**
- * @summary 单选框组组件。需与 `<mdui-radio>` 组件配合使用
+ * @summary 单选框组组件。需配合 `<mdui-radio>` 组件使用
  *
  * ```html
  * <mdui-radio-group value="chinese">
@@ -35,15 +35,15 @@ let RadioGroup = class RadioGroup extends MduiElement {
     constructor() {
         super(...arguments);
         /**
-         * 是否为禁用状态
+         * 是否禁用此组件
          */
         this.disabled = false;
         /**
-         * 单选框名称，将与表单数据一起提交
+         * 单选框组的名称，将与表单数据一起提交
          */
         this.name = '';
         /**
-         * 单选框的值，将于表单数据一起提交
+         * 单选框组的名称，将于表单数据一起提交
          */
         this.value = '';
         /**
@@ -67,13 +67,13 @@ let RadioGroup = class RadioGroup extends 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;
@@ -110,7 +110,7 @@ let RadioGroup = class RadioGroup extends MduiElement {
         this.updateItems();
     }
     /**
-     * 检查表单字段是否验证通过。若未通过则返回 `false`，并触发 `invalid` 事件；若验证通过，则返回 `true`
+     * 检查表单字段是否通过验证。如果未通过，返回 `false` 并触发 `invalid` 事件；如果通过，返回 `true`
      */
     checkValidity() {
         const valid = this.inputRef.value.checkValidity();
@@ -124,9 +124,9 @@ let RadioGroup = class RadioGroup extends MduiElement {
         return valid;
     }
     /**
-     * 检查表单字段是否验证通过。若未通过则返回 `false`，并触发 `invalid` 事件；若验证通过，则返回 `true`。
+     * 检查表单字段是否通过验证。如果未通过，返回 `false` 并触发 `invalid` 事件；如果通过，返回 `true`。
      *
-     * 验证未通过时，还将在组件上显示未通过的提示。
+     * 如果验证未通过，还会在组件上显示验证失败的提示。
      */
     reportValidity() {
         this.invalid = !this.inputRef.value.reportValidity();
@@ -145,16 +145,34 @@ let RadioGroup = class RadioGroup extends MduiElement {
         return !this.invalid;
     }
     /**
-     * 设置自定义的错误提示文本。只要文本不为空，则表示字段验证未通过
+     * 设置自定义的错误提示文本。只要这个文本不为空，就表示字段未通过验证
      *
-     * @param message 自定义的提示文本
+     * @param message 自定义的错误提示文本
      */
     setCustomValidity(message) {
         this.inputRef.value.setCustomValidity(message);
         this.invalid = !this.inputRef.value.checkValidity();
     }
     render() {
-        return html `<fieldset><input ${ref(this.inputRef)} type="radio" class="input" name="${ifDefined(this.name)}" value="${ifDefined(this.value)}" .checked="${!!this.value}" .required="${this.required}" tabindex="-1" @keydown="${this.onKeyDown}"><slot @click="${this.onClick}" @keydown="${this.onKeyDown}" @slotchange="${this.onSlotChange}" @change="${this.onCheckedChange}"></slot></fieldset>`;
+        return html `<fieldset>
+      <input
+        ${ref(this.inputRef)}
+        type="radio"
+        class="input"
+        name=${ifDefined(this.name)}
+        value=${ifDefined(this.value)}
+        .checked=${!!this.value}
+        .required=${this.required}
+        tabindex="-1"
+        @keydown=${this.onKeyDown}
+      />
+      <slot
+        @click=${this.onClick}
+        @keydown=${this.onKeyDown}
+        @slotchange=${this.onSlotChange}
+        @change=${this.onCheckedChange}
+      ></slot>
+    </fieldset>`;
     }
     // 更新 mdui-radio 的 checked 后，需要更新可聚焦状态
     // 同一个 mdui-radio-group 中的多个 mdui-radio，仅有一个可聚焦

package/components/radio/radio-style.js

@@ -1,2 +1,108 @@
 import { css } from 'lit';
-export const radioStyle = css `:host{position:relative;display:inline-flex;align-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;touch-action:manipulation;zoom:1;-webkit-user-drag:none;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)}.icon{display:flex;position:absolute;font-size:1.5rem}:not(.initial) .icon{transition-duration:var(--mdui-motion-duration-short4);transition-timing-function:var(--mdui-motion-easing-standard)}.unchecked-icon{transition-property:color;color:rgb(var(--mdui-color-on-surface-variant))}:host([focused]) .unchecked-icon,:host([hover]) .unchecked-icon,:host([pressed]) .unchecked-icon{color:rgb(var(--mdui-color-on-surface))}.checked-icon{opacity:0;transform:scale(.2);transition-property:color,opacity,transform;color:rgb(var(--mdui-color-primary))}.icon .i,::slotted([slot=checked-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))}.label:not(.initial){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]) .checked-icon{opacity:1;transform:scale(.5)}i.invalid{--mdui-comp-ripple-state-layer-color:var(--mdui-color-error)}i.invalid .icon{color:rgb(var(--mdui-color-error))}.label.invalid{color:rgb(var(--mdui-color-error))}:host([disabled]),:host([group-disabled]){cursor:default;pointer-events:none}:host([disabled]) .icon,:host([group-disabled]) .icon{color:rgba(var(--mdui-color-on-surface),38%)}:host([disabled]) .label,:host([group-disabled]) .label{color:rgba(var(--mdui-color-on-surface),38%)}`;
+export const radioStyle = css `
+  :host {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+    -webkit-user-select: none;
+    user-select: none;
+    touch-action: manipulation;
+    zoom: 1;
+    -webkit-user-drag: none;
+    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);
+  }
+  .icon {
+    display: flex;
+    position: absolute;
+    font-size: 1.5rem;
+  }
+  :not(.initial) .icon {
+    transition-duration: var(--mdui-motion-duration-short4);
+    transition-timing-function: var(--mdui-motion-easing-standard);
+  }
+  .unchecked-icon {
+    transition-property: color;
+    color: rgb(var(--mdui-color-on-surface-variant));
+  }
+  :host([hover]) .unchecked-icon,
+  :host([focused]) .unchecked-icon,
+  :host([pressed]) .unchecked-icon {
+    color: rgb(var(--mdui-color-on-surface));
+  }
+  .checked-icon {
+    opacity: 0;
+    transform: scale(0.2);
+    transition-property: color, opacity, transform;
+    color: rgb(var(--mdui-color-primary));
+  }
+  .icon .i,
+  ::slotted([slot='unchecked-icon']),
+  ::slotted([slot='checked-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));
+  }
+  .label:not(.initial) {
+    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]) .checked-icon {
+    opacity: 1;
+    transform: scale(0.5);
+  }
+  /* 验证不通过状态 */
+  i.invalid {
+    --mdui-comp-ripple-state-layer-color: var(--mdui-color-error);
+  }
+  i.invalid .icon {
+    color: rgb(var(--mdui-color-error));
+  }
+  .label.invalid {
+    color: rgb(var(--mdui-color-error));
+  }
+  /* 禁用状态的图标 */
+  :host([disabled]),
+  :host([group-disabled]) {
+    cursor: default;
+    pointer-events: none;
+  }
+  :host([disabled]) .icon,
+  :host([group-disabled]) .icon {
+    color: rgba(var(--mdui-color-on-surface), 38%);
+  }
+  :host([disabled]) .label,
+  :host([group-disabled]) .label {
+    color: rgba(var(--mdui-color-on-surface), 38%);
+  }
+`;

package/components/radio/radio.d.ts

@@ -6,7 +6,7 @@ import type { Ripple } from '../ripple/index.js';
 import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 declare const Radio_base: import("@open-wc/dedupe-mixin").Constructor<import("../ripple/ripple-mixin.js").RippleMixinInterface> & import("@open-wc/dedupe-mixin").Constructor<import("@mdui/shared/mixins/focusable.js").FocusableMixinInterface> & typeof MduiElement;
 /**
- * @summary 单选框组件。需与 `<mdui-radio-group>` 组件配合使用
+ * @summary 单选框组件。需配合 `<mdui-radio-group>` 组件使用
  *
  * ```html
  * <mdui-radio-group value="chinese">
@@ -19,14 +19,14 @@ declare const Radio_base: import("@open-wc/dedupe-mixin").Constructor<import("..
  * @event blur - 失去焦点时触发
  * @event change - 选中该单选项时触发
  *
- * @slot - 文本
+ * @slot - 文本内容
  * @slot unchecked-icon - 未选中状态的图标
  * @slot checked-icon - 选中状态的图标
  *
  * @csspart control - 左侧图标容器
  * @csspart unchecked-icon 未选中状态的图标
  * @csspart checked-icon 选中状态的图标
- * @csspart label - 文本
+ * @csspart label - 文本内容
  */
 export declare class Radio extends Radio_base<RadioEventMap> {
     static styles: CSSResultGroup;