mdui 2.0.3 → 2.0.5

package/components/radio/radio.js

@@ -14,7 +14,7 @@ import '../icon.js';
 import { RippleMixin } from '../ripple/ripple-mixin.js';
 import { radioStyle } from './radio-style.js';
 /**
- * @summary 单选框组件。需与 `<mdui-radio-group>` 组件配合使用
+ * @summary 单选框组件。需配合 `<mdui-radio-group>` 组件使用
  *
  * ```html
  * <mdui-radio-group value="chinese">
@@ -27,14 +27,14 @@ import { radioStyle } from './radio-style.js';
  * @event blur - 失去焦点时触发
  * @event change - 选中该单选项时触发
  *
- * @slot - 文本
+ * @slot - 文本内容
  * @slot unchecked-icon - 未选中状态的图标
  * @slot checked-icon - 选中状态的图标
  *
  * @csspart control - 左侧图标容器
  * @csspart unchecked-icon 未选中状态的图标
  * @csspart checked-icon 选中状态的图标
- * @csspart label - 文本
+ * @csspart label - 文本内容
  */
 let Radio = class Radio extends RippleMixin(FocusableMixin(MduiElement)) {
     constructor() {
@@ -91,11 +91,29 @@ let Radio = class Radio extends RippleMixin(FocusableMixin(MduiElement)) {
             invalid: this.invalid,
             initial: this.isInitial,
         });
-        return html `<i part="control" class="${className}"><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-radio-button-unchecked class="i"></mdui-icon-radio-button-unchecked>`}</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-circle class="i"></mdui-icon-circle>`}</slot></i><slot part="label" class="label ${className}"></slot>`;
+        return html `<i part="control" class=${className}>
+        <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-radio-button-unchecked
+                class="i"
+              ></mdui-icon-radio-button-unchecked>`}
+        </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-circle class="i"></mdui-icon-circle>`}
+        </slot>
+      </i>
+      <slot part="label" class="label ${className}"></slot>`;
     }
     isDisabled() {
         return this.disabled || this.groupDisabled;

package/components/range-slider/index.d.ts

@@ -12,7 +12,7 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
  *
  * @event focus - 获得焦点时触发
  * @event blur - 失去焦点时触发
- * @event change - 在值发生了变更，且失去了焦点时，将触发该事件
+ * @event change - 值发生变更，且失去焦点时，将触发该事件
  * @event input - 值变更时触发
  * @event invalid - 表单字段验证未通过时触发
  *
@@ -25,7 +25,7 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 export declare class RangeSlider extends SliderBase<RangeSliderEventMap> implements FormControl {
     static styles: CSSResultGroup;
     /**
-     * 默认值。在重置表单时，将重置为该默认值。该属性只能通过 JavaScript 属性设置
+     * 默认值。在重置表单时，将重置为该默认值。此属性只能通过 JavaScript 属性设置
      */
     defaultValue: number[];
     /**
@@ -40,10 +40,9 @@ export declare class RangeSlider extends SliderBase<RangeSliderEventMap> impleme
     private readonly formController;
     private _value;
     /**
-     * 滑块的值，为数组格式；将于表单数据一起提交
+     * 滑块的值，为数组格式，将于表单数据一起提交。
      *
-     * NOTE:
-     * 该属性无法通过 HTML 属性设置初始值，如果要修改该值，只能通过修改 JavaScript 属性值实现。
+     * **NOTE**：该属性无法通过 HTML 属性设置初始值，如果要修改该值，只能通过修改 JavaScript 属性值实现。
      */
     get value(): number[];
     set value(_value: number[]);
@@ -55,7 +54,7 @@ export declare class RangeSlider extends SliderBase<RangeSliderEventMap> impleme
      * <input class="invalid" /> 用于提供 html5 自带的表单错误提示
      */
     protected render(): TemplateResult;
-    protected getRippleIndex: () => 0 | 1;
+    protected getRippleIndex: () => 1 | 0;
     private updateStyle;
     private onInput;
 }

package/components/range-slider/index.js

@@ -20,7 +20,7 @@ import { SliderBase } from '../slider/slider-base.js';
  *
  * @event focus - 获得焦点时触发
  * @event blur - 失去焦点时触发
- * @event change - 在值发生了变更，且失去了焦点时，将触发该事件
+ * @event change - 值发生变更，且失去焦点时，将触发该事件
  * @event input - 值变更时触发
  * @event invalid - 表单字段验证未通过时触发
  *
@@ -34,7 +34,7 @@ let RangeSlider = class RangeSlider extends SliderBase {
     constructor() {
         super(...arguments);
         /**
-         * 默认值。在重置表单时，将重置为该默认值。该属性只能通过 JavaScript 属性设置
+         * 默认值。在重置表单时，将重置为该默认值。此属性只能通过 JavaScript 属性设置
          */
         this.defaultValue = [];
         /**
@@ -55,10 +55,9 @@ let RangeSlider = class RangeSlider extends SliderBase {
         };
     }
     /**
-     * 滑块的值，为数组格式；将于表单数据一起提交
+     * 滑块的值，为数组格式，将于表单数据一起提交。
      *
-     * NOTE:
-     * 该属性无法通过 HTML 属性设置初始值，如果要修改该值，只能通过修改 JavaScript 属性值实现。
+     * **NOTE**：该属性无法通过 HTML 属性设置初始值，如果要修改该值，只能通过修改 JavaScript 属性值实现。
      */
     get value() {
         return this._value;
@@ -144,18 +143,66 @@ let RangeSlider = class RangeSlider extends SliderBase {
      * <input class="invalid" /> 用于提供 html5 自带的表单错误提示
      */
     render() {
-        return html `<label class="${classMap({ invalid: this.invalid })}"><input ${ref(this.inputRef)} type="range" step="${this.step}" min="${this.min}" max="${this.max}" ?disabled="${this.disabled}" @input="${this.onInput}" @change="${this.onChange}"><div part="track-inactive" class="track-inactive"></div><div ${ref(this.trackActiveRef)} part="track-active" class="track-active"></div><div ${ref(this.handleStartRef)} part="handle" class="handle start" style="${styleMap({
+        return html `<label class=${classMap({ invalid: this.invalid })}>
+      <input
+        ${ref(this.inputRef)}
+        type="range"
+        step=${this.step}
+        min=${this.min}
+        max=${this.max}
+        ?disabled=${this.disabled}
+        @input=${this.onInput}
+        @change=${this.onChange}
+      />
+      <div part="track-inactive" class="track-inactive"></div>
+      <div
+        ${ref(this.trackActiveRef)}
+        part="track-active"
+        class="track-active"
+      ></div>
+      <div
+        ${ref(this.handleStartRef)}
+        part="handle"
+        class="handle start"
+        style=${styleMap({
             'z-index': this.currentHandle === 'start' ? '2' : '1',
-        })}"><div class="elevation"></div><mdui-ripple ${ref(this.rippleStartRef)} .noRipple="${this.noRipple}"></mdui-ripple>${this.renderLabel(this.value[0])}</div><div ${ref(this.handleEndRef)} part="handle" class="handle end" style="${styleMap({
+        })}
+      >
+        <div class="elevation"></div>
+        <mdui-ripple
+          ${ref(this.rippleStartRef)}
+          .noRipple=${this.noRipple}
+        ></mdui-ripple>
+        ${this.renderLabel(this.value[0])}
+      </div>
+      <div
+        ${ref(this.handleEndRef)}
+        part="handle"
+        class="handle end"
+        style=${styleMap({
             'z-index': this.currentHandle === 'end' ? '2' : '1',
-        })}"><div class="elevation"></div><mdui-ripple ${ref(this.rippleEndRef)} .noRipple="${this.noRipple}"></mdui-ripple>${this.renderLabel(this.value[1])}</div>${when(this.tickmarks, () => map(this.getCandidateValues(), (value) => html `<div part="tickmark" class="tickmark ${classMap({
+        })}
+      >
+        <div class="elevation"></div>
+        <mdui-ripple
+          ${ref(this.rippleEndRef)}
+          .noRipple=${this.noRipple}
+        ></mdui-ripple>
+        ${this.renderLabel(this.value[1])}
+      </div>
+      ${when(this.tickmarks, () => map(this.getCandidateValues(), (value) => html `<div
+              part="tickmark"
+              class="tickmark ${classMap({
             active: value > this.value[0] && value < this.value[1],
-        })}" style="${styleMap({
+        })}"
+              style="${styleMap({
             left: `${((value - this.min) / this.max) * 100}%`,
             display: value === this.value[0] || value === this.value[1]
                 ? 'none'
                 : 'block',
-        })}"></div>`))}</label>`;
+        })}"
+            ></div>`))}
+    </label>`;
     }
     updateStyle() {
         const getPercent = (value) => ((value - this.min) / (this.max - this.min)) * 100;

package/components/ripple/index.js

@@ -144,11 +144,14 @@ let Ripple = class Ripple extends MduiElement {
         this.dragged = false;
     }
     render() {
-        return html `<div ${ref(this.surfaceRef)} class="surface ${classMap({
+        return html `<div
+      ${ref(this.surfaceRef)}
+      class="surface ${classMap({
             hover: this.hover,
             focused: this.focused,
             dragged: this.dragged,
-        })}"></div>`;
+        })}"
+    ></div>`;
     }
 };
 Ripple.styles = [componentStyle, style];

package/components/ripple/style.js

@@ -1,2 +1,97 @@
 import { css } from 'lit';
-export const style = css `:host{position:absolute;top:0;left:0;display:block;width:100%;height:100%;overflow:hidden;pointer-events:none}.surface{position:absolute;top:0;left:0;width:100%;height:100%;transition-duration:280ms;transition-property:background-color;pointer-events:none;transition-timing-function:var(--mdui-motion-easing-standard)}.hover{background-color:rgba(var(--mdui-comp-ripple-state-layer-color,var(--mdui-color-on-surface)),var(--mdui-state-layer-hover))}:host-context([focus-visible]) .focused{background-color:rgba(var(--mdui-comp-ripple-state-layer-color,var(--mdui-color-on-surface)),var(--mdui-state-layer-focus))}.dragged{background-color:rgba(var(--mdui-comp-ripple-state-layer-color,var(--mdui-color-on-surface)),var(--mdui-state-layer-dragged))}.wave{position:absolute;z-index:1;background-color:rgb(var(--mdui-comp-ripple-state-layer-color,var(--mdui-color-on-surface)));border-radius:50%;transform:translate3d(0,0,0) scale(.4);opacity:0;animation:225ms ease 0s 1 normal forwards running mdui-comp-ripple-radius-in,75ms ease 0s 1 normal forwards running mdui-comp-ripple-opacity-in;pointer-events:none}.out{transform:translate3d(var(--mdui-comp-ripple-transition-x,0),var(--mdui-comp-ripple-transition-y,0),0) scale(1);animation:150ms ease 0s 1 normal none running mdui-comp-ripple-opacity-out}@keyframes mdui-comp-ripple-radius-in{from{transform:translate3d(0,0,0) scale(.4);animation-timing-function:var(--mdui-motion-easing-standard)}to{transform:translate3d(var(--mdui-comp-ripple-transition-x,0),var(--mdui-comp-ripple-transition-y,0),0) scale(1)}}@keyframes mdui-comp-ripple-opacity-in{from{opacity:0;animation-timing-function:linear}to{opacity:var(--mdui-state-layer-pressed)}}@keyframes mdui-comp-ripple-opacity-out{from{animation-timing-function:linear;opacity:var(--mdui-state-layer-pressed)}to{opacity:0}}`;
+export const style = css `
+  :host {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: block;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    pointer-events: none;
+  }
+  .surface {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    transition-duration: 280ms;
+    transition-property: background-color;
+    pointer-events: none;
+    transition-timing-function: var(--mdui-motion-easing-standard);
+  }
+  .hover {
+    background-color: rgba(
+      var(--mdui-comp-ripple-state-layer-color, var(--mdui-color-on-surface)),
+      var(--mdui-state-layer-hover)
+    );
+  }
+  :host-context([focus-visible]) .focused {
+    background-color: rgba(
+      var(--mdui-comp-ripple-state-layer-color, var(--mdui-color-on-surface)),
+      var(--mdui-state-layer-focus)
+    );
+  }
+  .dragged {
+    background-color: rgba(
+      var(--mdui-comp-ripple-state-layer-color, var(--mdui-color-on-surface)),
+      var(--mdui-state-layer-dragged)
+    );
+  }
+  .wave {
+    position: absolute;
+    z-index: 1;
+    background-color: rgb(
+      var(--mdui-comp-ripple-state-layer-color, var(--mdui-color-on-surface))
+    );
+    border-radius: 50%;
+    transform: translate3d(0, 0, 0) scale(0.4);
+    opacity: 0;
+    animation:
+      225ms ease 0s 1 normal forwards running mdui-comp-ripple-radius-in,
+      75ms ease 0s 1 normal forwards running mdui-comp-ripple-opacity-in;
+    pointer-events: none;
+  }
+  .out {
+    transform: translate3d(
+        var(--mdui-comp-ripple-transition-x, 0),
+        var(--mdui-comp-ripple-transition-y, 0),
+        0
+      )
+      scale(1);
+    animation: 150ms ease 0s 1 normal none running mdui-comp-ripple-opacity-out;
+  }
+  @keyframes mdui-comp-ripple-radius-in {
+    from {
+      transform: translate3d(0, 0, 0) scale(0.4);
+      animation-timing-function: var(--mdui-motion-easing-standard);
+    }
+    to {
+      transform: translate3d(
+          var(--mdui-comp-ripple-transition-x, 0),
+          var(--mdui-comp-ripple-transition-y, 0),
+          0
+        )
+        scale(1);
+    }
+  }
+  @keyframes mdui-comp-ripple-opacity-in {
+    from {
+      opacity: 0;
+      animation-timing-function: linear;
+    }
+    to {
+      opacity: var(--mdui-state-layer-pressed);
+    }
+  }
+  @keyframes mdui-comp-ripple-opacity-out {
+    from {
+      animation-timing-function: linear;
+      opacity: var(--mdui-state-layer-pressed);
+    }
+    to {
+      opacity: 0;
+    }
+  }
+`;

package/components/segmented-button/segmented-button-group-style.js

@@ -1,2 +1,29 @@
 import { css } from 'lit';
-export const segmentedButtonGroupStyle = css `:host{--shape-corner:var(--mdui-shape-corner-full);position:relative;display:inline-flex;vertical-align:middle;height:2.5rem;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);color:rgb(var(--mdui-color-on-surface));--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-surface)}:host([full-width]){display:flex;flex-wrap:nowrap}input,select{position:absolute;width:100%;height:100%;padding:0;opacity:0;pointer-events:none}`;
+export const segmentedButtonGroupStyle = css `
+  :host {
+    --shape-corner: var(--mdui-shape-corner-full);
+    position: relative;
+    display: inline-flex;
+    vertical-align: middle;
+    height: 2.5rem;
+    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);
+    color: rgb(var(--mdui-color-on-surface));
+    --mdui-comp-ripple-state-layer-color: var(--mdui-color-on-surface);
+  }
+  :host([full-width]) {
+    display: flex;
+    flex-wrap: nowrap;
+  }
+  input,
+  select {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    opacity: 0;
+    pointer-events: none;
+  }
+`;

package/components/segmented-button/segmented-button-group.d.ts

@@ -4,7 +4,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-segmented-button>` 组件配合使用
+ * @summary 分段按钮组件。需配合 `<mdui-segmented-button>` 组件使用
  *
  * ```html
  * <mdui-segmented-button-group>
@@ -19,7 +19,7 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
  *
  * @slot - `<mdui-segmented-button>` 组件
  *
- * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
  */
 export declare class SegmentedButtonGroup extends MduiElement<SegmentedButtonGroupEventMap> implements FormControl {
     static styles: CSSResultGroup;
@@ -28,12 +28,12 @@ export declare class SegmentedButtonGroup extends MduiElement<SegmentedButtonGro
      */
     fullWidth: boolean;
     /**
-     * 分段按钮的可选中状态。默认为不可选中。可选值为：
+     * 分段按钮的可选中状态，默认为不可选中。可选值包括：
      *
-     * * `single`：最多只能选中一个
-     * * `multiple`：可以选中多个
+     * * `single`：单选
+     * * `multiple`：多选
      */
-    selects?: /*最多只能选中一个*/ 'single' | /*可以选中多个*/ 'multiple';
+    selects?: /*单选*/ 'single' | /*多选*/ 'multiple';
     /**
      * 是否为禁用状态
      */
@@ -43,9 +43,9 @@ export declare class SegmentedButtonGroup extends MduiElement<SegmentedButtonGro
      */
     required: boolean;
     /**
-     * 关联的 `form` 元素。此属性值必须为同一页面中的一个 `<form>` 元素的 `id` 属性。
+     * 关联的 `<form>` 元素。此属性值应为同一页面中的一个 `<form>` 元素的 `id`。
      *
-     * 如果此属性未指定，则元素必须是 `form` 元素的后代。利用此属性，你可以将元素放置在页面中的任何位置，而不仅仅是作为 `form` 元素的后代。
+     * 如果未指定此属性，则该元素必须是 `<form>` 元素的子元素。通过此属性，你可以将元素放置在页面的任何位置，而不仅仅是 `<form>` 元素的子元素。
      */
     form?: string;
     /**
@@ -53,12 +53,9 @@ export declare class SegmentedButtonGroup extends MduiElement<SegmentedButtonGro
      */
     name: string;
     /**
-     * 当前选中的 `<mdui-segmented-button>` 的值
+     * 当前选中的 `<mdui-segmented-button>` 的值。
      *
-     * Note:
-     * 该属性的 HTML 属性始终为字符串，且仅在 `selects="single"` 时可以通过 HTML 属性设置初始值
-     * 该属性的 JavaScript 属性值在 `selects="single"` 时为字符串，在 `selects="multiple"` 时为字符串数组。
-     * 所以，在 `selects="multiple"` 时，如果要修改该值，只能通过修改 JavaScript 属性值实现。
+     * **Note**：该属性的 HTML 属性始终为字符串，且仅在 `selects="single"` 时可以通过 HTML 属性设置初始值。该属性的 JavaScript 属性值在 `selects="single"` 时为字符串，在 `selects="multiple"` 时为字符串数组。所以，在 `selects="multiple"` 时，如果要修改该值，只能通过修改 JavaScript 属性值实现。
      */
     value: string | string[];
     /**
@@ -75,11 +72,11 @@ export declare class SegmentedButtonGroup extends MduiElement<SegmentedButtonGro
     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();
@@ -93,19 +90,19 @@ export declare class SegmentedButtonGroup extends MduiElement<SegmentedButtonGro
     private onInvalidChange;
     connectedCallback(): void;
     /**
-     * 检查表单字段是否验证通过。若未通过则返回 `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/segmented-button/segmented-button-group.js

@@ -19,7 +19,7 @@ import { booleanConverter } from '@mdui/shared/helpers/decorator.js';
 import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
 import { segmentedButtonGroupStyle } from './segmented-button-group-style.js';
 /**
- * @summary 分段按钮组件。需与 `<mdui-segmented-button>` 组件配合使用
+ * @summary 分段按钮组件。需配合 `<mdui-segmented-button>` 组件使用
  *
  * ```html
  * <mdui-segmented-button-group>
@@ -34,7 +34,7 @@ import { segmentedButtonGroupStyle } from './segmented-button-group-style.js';
  *
  * @slot - `<mdui-segmented-button>` 组件
  *
- * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
  */
 let SegmentedButtonGroup = class SegmentedButtonGroup extends MduiElement {
     constructor() {
@@ -56,12 +56,9 @@ let SegmentedButtonGroup = class SegmentedButtonGroup extends MduiElement {
          */
         this.name = '';
         /**
-         * 当前选中的 `<mdui-segmented-button>` 的值
+         * 当前选中的 `<mdui-segmented-button>` 的值。
          *
-         * Note:
-         * 该属性的 HTML 属性始终为字符串，且仅在 `selects="single"` 时可以通过 HTML 属性设置初始值
-         * 该属性的 JavaScript 属性值在 `selects="single"` 时为字符串，在 `selects="multiple"` 时为字符串数组。
-         * 所以，在 `selects="multiple"` 时，如果要修改该值，只能通过修改 JavaScript 属性值实现。
+         * **Note**：该属性的 HTML 属性始终为字符串，且仅在 `selects="single"` 时可以通过 HTML 属性设置初始值。该属性的 JavaScript 属性值在 `selects="single"` 时为字符串，在 `selects="multiple"` 时为字符串数组。所以，在 `selects="multiple"` 时，如果要修改该值，只能通过修改 JavaScript 属性值实现。
          */
         this.value = '';
         /**
@@ -83,13 +80,13 @@ let SegmentedButtonGroup = class SegmentedButtonGroup 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;
@@ -195,7 +192,7 @@ let SegmentedButtonGroup = class SegmentedButtonGroup extends MduiElement {
         this.defaultValue = this.selects === 'multiple' ? [] : '';
     }
     /**
-     * 检查表单字段是否验证通过。若未通过则返回 `false`，并触发 `invalid` 事件；若验证通过，则返回 `true`
+     * 检查表单字段是否通过验证。如果未通过，返回 `false` 并触发 `invalid` 事件；如果通过，返回 `true`
      */
     checkValidity() {
         const valid = this.inputRef.value.checkValidity();
@@ -209,9 +206,9 @@ let SegmentedButtonGroup = class SegmentedButtonGroup extends MduiElement {
         return valid;
     }
     /**
-     * 检查表单字段是否验证通过。若未通过则返回 `false`，并触发 `invalid` 事件；若验证通过，则返回 `true`。
+     * 检查表单字段是否通过验证。如果未通过，返回 `false` 并触发 `invalid` 事件；如果通过，返回 `true`。
      *
-     * 验证未通过时，还将在组件上显示未通过的提示。
+     * 如果验证未通过，还会在组件上显示验证失败的提示。
      */
     reportValidity() {
         this.invalid = !this.inputRef.value.reportValidity();
@@ -230,16 +227,36 @@ let SegmentedButtonGroup = class SegmentedButtonGroup 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 `${when(this.isSelectable && this.isSingle, () => html `<input ${ref(this.inputRef)} type="radio" name="${ifDefined(this.name)}" value="1" .disabled="${this.disabled}" .required="${this.required}" .checked="${!!this.value}" tabindex="-1" @keydown="${this.onInputKeyDown}">`)}${when(this.isSelectable && this.isMultiple, () => html `<select ${ref(this.inputRef)} name="${ifDefined(this.name)}" .disabled="${this.disabled}" .required="${this.required}" multiple="multiple" tabindex="-1" @keydown="${this.onInputKeyDown}">${map(this.value, (value) => html `<option selected="selected" value="${value}"></option>`)}</select>`)}<slot @slotchange="${this.onSlotChange}" @click="${this.onClick}"></slot>`;
+        return html `${when(this.isSelectable && this.isSingle, () => html `<input
+            ${ref(this.inputRef)}
+            type="radio"
+            name=${ifDefined(this.name)}
+            value="1"
+            .disabled=${this.disabled}
+            .required=${this.required}
+            .checked=${!!this.value}
+            tabindex="-1"
+            @keydown=${this.onInputKeyDown}
+          />`)}${when(this.isSelectable && this.isMultiple, () => html `<select
+            ${ref(this.inputRef)}
+            name=${ifDefined(this.name)}
+            .disabled=${this.disabled}
+            .required=${this.required}
+            multiple
+            tabindex="-1"
+            @keydown=${this.onInputKeyDown}
+          >
+            ${map(this.value, (value) => html `<option selected value=${value}></option>`)}
+          </select>`)}<slot @slotchange=${this.onSlotChange} @click=${this.onClick}></slot>`;
     }
     // 切换一个元素的选中状态
     selectOne(item) {

package/components/segmented-button/segmented-button-style.js

@@ -1,4 +1,83 @@
 import { css } from 'lit';
-export const segmentedButtonStyle = css `:host{position:relative;display:inline-flex;flex-grow:1;flex-shrink:0;float:left;height:100%;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent;border:.0625rem solid rgb(var(--mdui-color-outline))}.button{width:100%;padding:0 .75rem}:host([invalid]){color:rgb(var(--mdui-color-error));border-color:rgb(var(--mdui-color-error))}:host([invalid]) .button{background-color:rgb(var(--mdui-color-error-container))}:host([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 segmentedButtonStyle = css `
+  :host {
+    position: relative;
+    display: inline-flex;
+    flex-grow: 1;
+    flex-shrink: 0;
+    float: left;
+    height: 100%;
+    overflow: hidden;
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+    border: 0.0625rem solid rgb(var(--mdui-color-outline));
+  }
+  .button {
+    width: 100%;
+    padding: 0rem 0.75rem;
+  }
+  :host([invalid]) {
+    color: rgb(var(--mdui-color-error));
+    border-color: rgb(var(--mdui-color-error));
+  }
+  :host([invalid]) .button {
+    background-color: rgb(var(--mdui-color-error-container));
+  }
+  :host([selected]) {
+    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([disabled]),:host([group-disabled]){cursor:default;pointer-events:none;color:rgba(var(--mdui-color-on-surface),38%);border-color:rgba(var(--mdui-color-on-surface),12%)}:host([loading]){cursor:default;pointer-events:none}:host(:not(.mdui-segmented-button-first)){margin-left:-.0625rem}:host(.mdui-segmented-button-first){border-radius:var(--shape-corner) 0 0 var(--shape-corner)}:host(.mdui-segmented-button-last){border-radius:0 var(--shape-corner) var(--shape-corner) 0}.end-icon,.icon,.selected-icon{display:inline-flex;font-size:1.28571429em}.end-icon .i,.icon .i,.selected-icon .i,::slotted([slot=end-icon]),::slotted([slot=icon]),::slotted([slot=selected-icon]){font-size:inherit}mdui-circular-progress{width:1.125rem;height:1.125rem}:host([disabled]) mdui-circular-progress{opacity:.38}.label{display:inline-flex}.has-icon .label{padding-left:.5rem}.has-end-icon .label{padding-right:.5rem}`;
+    );
+  }
+  :host([disabled]),
+  :host([group-disabled]) {
+    cursor: default;
+    pointer-events: none;
+    color: rgba(var(--mdui-color-on-surface), 38%);
+    border-color: rgba(var(--mdui-color-on-surface), 12%);
+  }
+  :host([loading]) {
+    cursor: default;
+    pointer-events: none;
+  }
+  :host(:not(.mdui-segmented-button-first)) {
+    margin-left: -0.0625rem;
+  }
+  :host(.mdui-segmented-button-first) {
+    border-radius: var(--shape-corner) 0 0 var(--shape-corner);
+  }
+  :host(.mdui-segmented-button-last) {
+    border-radius: 0 var(--shape-corner) var(--shape-corner) 0;
+  }
+  .icon,
+  .end-icon,
+  .selected-icon {
+    display: inline-flex;
+    font-size: 1.28571429em;
+  }
+  .icon .i,
+  .end-icon .i,
+  .selected-icon .i,
+  ::slotted([slot='icon']),
+  ::slotted([slot='end-icon']),
+  ::slotted([slot='selected-icon']) {
+    font-size: inherit;
+  }
+  mdui-circular-progress {
+    width: 1.125rem;
+    height: 1.125rem;
+  }
+  :host([disabled]) mdui-circular-progress {
+    opacity: 0.38;
+  }
+  .label {
+    display: inline-flex;
+  }
+  .has-icon .label {
+    padding-left: 0.5rem;
+  }
+  .has-end-icon .label {
+    padding-right: 0.5rem;
+  }
+`;