mdui 2.0.1 → 2.0.2

package/components/radio/radio-group.js

@@ -1,6 +1,6 @@
 import { __decorate } from "tslib";
 import { html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { customElement, property, state } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { createRef, ref } from 'lit/directives/ref.js';
 import { $ } from '@mdui/jq/$.js';
@@ -8,6 +8,7 @@ import '@mdui/jq/methods/closest.js';
 import '@mdui/jq/methods/find.js';
 import '@mdui/jq/methods/get.js';
 import { isNodeName } from '@mdui/jq/shared/helper.js';
+import { DefinedController } from '@mdui/shared/controllers/defined.js';
 import { FormController, formResets } from '@mdui/shared/controllers/form.js';
 import { defaultValue } from '@mdui/shared/decorators/default-value.js';
 import { watch } from '@mdui/shared/decorators/watch.js';
@@ -31,7 +32,7 @@ import { radioGroupStyle } from './radio-group-style.js';
  *
  * @slot - `<mdui-radio>` 元素
  */
-export let RadioGroup = class RadioGroup extends LitElement {
+let RadioGroup = class RadioGroup extends LitElement {
     constructor() {
         super(...arguments);
         /**
@@ -58,8 +59,13 @@ export let RadioGroup = class RadioGroup extends LitElement {
          * 是否验证未通过
          */
         this.invalid = false;
+        // 是否是初始状态，初始状态不显示动画
+        this.isInitial = true;
         this.inputRef = createRef();
         this.formController = new FormController(this);
+        this.definedController = new DefinedController(this, {
+            relatedElements: ['mdui-radio'],
+        });
     }
     /**
      * 表单验证状态对象
@@ -73,24 +79,26 @@ export let RadioGroup = class RadioGroup extends LitElement {
     get validationMessage() {
         return this.inputRef.value.validationMessage;
     }
-    get radios() {
+    // 为了使 <mdui-radio> 可以不是该组件的直接子元素，这里不用 @queryAssignedElements()
+    get items() {
         return $(this).find('mdui-radio').get();
     }
-    get radiosEnabled() {
+    get itemsEnabled() {
         return $(this)
             .find('mdui-radio:not([disabled])')
             .get();
     }
     async onValueChange() {
-        var _a;
+        this.isInitial = false;
+        await this.definedController.whenDefined();
         emit(this, 'input');
         emit(this, 'change');
-        this.radios.forEach((radio) => (radio.checked = radio.value === this.value));
+        this.updateItems();
         this.updateRadioFocusable();
         await this.updateComplete;
         // reset 引起的值变更，不执行验证；直接修改值引起的变更，需要进行验证
         const form = this.formController.getForm();
-        if (form && ((_a = formResets.get(form)) === null || _a === void 0 ? void 0 : _a.has(this))) {
+        if (form && formResets.get(form)?.has(this)) {
             this.invalid = false;
             formResets.get(form).delete(this);
         }
@@ -98,11 +106,9 @@ export let RadioGroup = class RadioGroup extends LitElement {
             this.invalid = !this.inputRef.value.checkValidity();
         }
     }
-    onInvalidChange() {
-        this.radiosEnabled.forEach((radio) => (radio.invalid = this.invalid));
-    }
-    onDisabledChange() {
-        this.radios.forEach((radio) => (radio.groupDisabled = this.disabled));
+    async onInvalidChange() {
+        await this.definedController.whenDefined();
+        this.updateItems();
     }
     /**
      * 检查表单字段是否验证通过。若未通过则返回 `false`，并触发 `invalid` 事件；若验证通过，则返回 `true`
@@ -149,63 +155,68 @@ export let RadioGroup = class RadioGroup extends LitElement {
         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.onRadioClick}" @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，仅有一个可聚焦
     // 若有已选中的，则已选中的可聚焦；若没有已选中的，则第一个可聚焦
     updateRadioFocusable() {
-        const radios = this.radios;
-        const radioChecked = radios.find((radio) => radio.checked);
-        if (radioChecked) {
-            radios.forEach((radio) => (radio.focusable = radio === radioChecked));
+        const items = this.items;
+        const itemChecked = items.find((item) => item.checked);
+        if (itemChecked) {
+            items.forEach((item) => {
+                item.focusable = item === itemChecked;
+            });
         }
         else {
-            this.radiosEnabled.forEach((radio, index) => (radio.focusable = !index));
+            this.itemsEnabled.forEach((item, index) => {
+                item.focusable = !index;
+            });
         }
     }
-    async onRadioClick(event) {
+    async onClick(event) {
+        await this.definedController.whenDefined();
         const target = event.target;
-        const radio = isNodeName(target, 'mdui-radio')
+        const item = isNodeName(target, 'mdui-radio')
             ? target
             : $(target).closest('mdui-radio')[0];
-        if (radio.disabled) {
+        if (!item || item.disabled) {
             return;
         }
-        this.value = radio.value;
+        this.value = item.value;
         await this.updateComplete;
-        radio.focus();
+        item.focus();
     }
     /**
      * 在内部的 `<mdui-radio>` 上按下按键时，在 `<mdui-radio>` 之间切换焦点
      */
-    onKeyDown(event) {
-        var _a;
+    async onKeyDown(event) {
         if (!['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', ' '].includes(event.key)) {
             return;
         }
-        const radios = this.radiosEnabled;
-        const radioChecked = (_a = radios.find((radio) => radio.checked)) !== null && _a !== void 0 ? _a : radios[0];
+        event.preventDefault();
+        await this.definedController.whenDefined();
+        const items = this.itemsEnabled;
+        const itemChecked = items.find((item) => item.checked) ?? items[0];
         const incr = event.key === ' '
             ? 0
             : ['ArrowUp', 'ArrowLeft'].includes(event.key)
                 ? -1
                 : 1;
-        let index = radios.indexOf(radioChecked) + incr;
+        let index = items.indexOf(itemChecked) + incr;
         if (index < 0) {
-            index = radios.length - 1;
+            index = items.length - 1;
         }
-        if (index > radios.length - 1) {
+        if (index > items.length - 1) {
             index = 0;
         }
-        this.value = radios[index].value;
-        this.updateComplete.then(() => {
-            radios[index].focus();
-        });
-        event.preventDefault();
+        this.value = items[index].value;
+        await this.updateComplete;
+        items[index].focus();
     }
-    onSlotChange() {
-        this.radios.forEach((radio) => (radio.checked = radio.value === this.value));
+    async onSlotChange() {
+        await this.definedController.whenDefined();
+        this.updateItems();
         this.updateRadioFocusable();
     }
     /**
@@ -213,8 +224,15 @@ export let RadioGroup = class RadioGroup extends LitElement {
      */
     onCheckedChange(event) {
         event.stopPropagation();
-        const target = event.target;
-        this.value = target.value;
+    }
+    // 更新 <mdui-radio> 的状态
+    updateItems() {
+        this.items.forEach((item) => {
+            item.checked = item.value === this.value;
+            item.invalid = this.invalid;
+            item.groupDisabled = this.disabled;
+            item.isInitial = this.isInitial;
+        });
     }
 };
 RadioGroup.styles = [
@@ -248,21 +266,16 @@ __decorate([
     })
 ], RadioGroup.prototype, "required", void 0);
 __decorate([
-    property({
-        type: Boolean,
-        reflect: true,
-        converter: booleanConverter,
-    })
+    state()
 ], RadioGroup.prototype, "invalid", void 0);
 __decorate([
     watch('value', true)
 ], RadioGroup.prototype, "onValueChange", null);
 __decorate([
-    watch('invalid')
-], RadioGroup.prototype, "onInvalidChange", null);
-__decorate([
+    watch('invalid', true),
     watch('disabled')
-], RadioGroup.prototype, "onDisabledChange", null);
+], RadioGroup.prototype, "onInvalidChange", null);
 RadioGroup = __decorate([
     customElement('mdui-radio-group')
 ], RadioGroup);
+export { RadioGroup };

package/components/radio/radio-style.js

@@ -1,2 +1,2 @@
 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;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));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)}:host([invalid]) i{--mdui-comp-ripple-state-layer-color:var(--mdui-color-error)}:host([invalid]) .icon{color:rgb(var(--mdui-color-error))}:host([invalid]) .label{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:.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%)}`;

package/components/radio/radio.d.ts

@@ -3,7 +3,7 @@ import '@mdui/shared/icons/circle.js';
 import '@mdui/shared/icons/radio-button-unchecked.js';
 import '../icon.js';
 import type { Ripple } from '../ripple/index.js';
-import type { CSSResultGroup, TemplateResult } from 'lit';
+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 LitElement;
 /**
  * @summary 单选框组件。需与 `<mdui-radio-group>` 组件配合使用
@@ -53,13 +53,14 @@ export declare class Radio extends Radio_base {
     protected invalid: boolean;
     protected groupDisabled: boolean;
     protected focusable: boolean;
+    protected isInitial: boolean;
     private readonly rippleRef;
     protected get rippleElement(): Ripple;
     protected get rippleDisabled(): boolean;
     protected get focusElement(): HTMLElement;
     protected get focusDisabled(): boolean;
     private onCheckedChange;
-    connectedCallback(): void;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
     protected render(): TemplateResult;
     private isDisabled;
 }

package/components/radio/radio.js

@@ -1,6 +1,7 @@
 import { __decorate } from "tslib";
 import { html, LitElement } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { createRef, ref } from 'lit/directives/ref.js';
 import { watch } from '@mdui/shared/decorators/watch.js';
 import { booleanConverter } from '@mdui/shared/helpers/decorator.js';
@@ -35,7 +36,7 @@ import { radioStyle } from './radio-style.js';
  * @csspart checked-icon 选中状态的图标
  * @csspart label - 文本
  */
-export let Radio = class Radio extends RippleMixin(FocusableMixin(LitElement)) {
+let Radio = class Radio extends RippleMixin(FocusableMixin(LitElement)) {
     constructor() {
         super(...arguments);
         /**
@@ -50,12 +51,16 @@ export let Radio = class Radio extends RippleMixin(FocusableMixin(LitElement)) {
          * 当前单选项是否已选中
          */
         this.checked = false;
-        // 是否验证未通过。由 mdui-radio-group 控制该参数
+        // 是否验证未通过。由 <mdui-radio-group> 控制该参数
         this.invalid = false;
-        // 父组件中是否设置了禁用。由 mdui-radio-group 控制该参数
+        // 父组件中是否设置了禁用。由 <mdui-radio-group> 控制该参数
         this.groupDisabled = false;
-        // 是否可聚焦。由 mdui-radio-group 控制该参数
-        this.focusable = false;
+        // 是否可聚焦。
+        // 单独使用该组件时，默认可聚焦。
+        // 如果放在 <mdui-radio-group> 组件中使用，则由 <mdui-radio-group> 控制该参数
+        this.focusable = true;
+        // 是否是初始状态，不显示动画。由 <mdui-radio-group> 组件控制该参数
+        this.isInitial = true;
         this.rippleRef = createRef();
     }
     get rippleElement() {
@@ -71,12 +76,10 @@ export let Radio = class Radio extends RippleMixin(FocusableMixin(LitElement)) {
         return this.isDisabled() || !this.focusable;
     }
     onCheckedChange() {
-        if (this.checked) {
-            emit(this, 'change');
-        }
+        emit(this, 'change');
     }
-    connectedCallback() {
-        super.connectedCallback();
+    firstUpdated(_changedProperties) {
+        super.firstUpdated(_changedProperties);
         this.addEventListener('click', () => {
             if (!this.isDisabled()) {
                 this.checked = true;
@@ -84,11 +87,15 @@ export let Radio = class Radio extends RippleMixin(FocusableMixin(LitElement)) {
         });
     }
     render() {
-        return html `<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
+        const className = classMap({
+            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"></slot>`;
+            : html `<mdui-icon-circle class="i"></mdui-icon-circle>`}</slot></i><slot part="label" class="label ${className}"></slot>`;
     }
     isDisabled() {
         return this.disabled || this.groupDisabled;
@@ -119,11 +126,7 @@ __decorate([
     property({ reflect: true, attribute: 'checked-icon' })
 ], Radio.prototype, "checkedIcon", void 0);
 __decorate([
-    property({
-        type: Boolean,
-        reflect: true,
-        converter: booleanConverter,
-    })
+    state()
 ], Radio.prototype, "invalid", void 0);
 __decorate([
     property({
@@ -136,9 +139,13 @@ __decorate([
 __decorate([
     state()
 ], Radio.prototype, "focusable", void 0);
+__decorate([
+    state()
+], Radio.prototype, "isInitial", void 0);
 __decorate([
     watch('checked', true)
 ], Radio.prototype, "onCheckedChange", null);
 Radio = __decorate([
     customElement('mdui-radio')
 ], Radio);
+export { Radio };

package/components/range-slider/index.js

@@ -10,7 +10,6 @@ import { $ } from '@mdui/jq/$.js';
 import '@mdui/jq/methods/css.js';
 import { FormController, formResets } from '@mdui/shared/controllers/form.js';
 import { defaultValue } from '@mdui/shared/decorators/default-value.js';
-import { emit } from '@mdui/shared/helpers/event.js';
 import { SliderBase } from '../slider/slider-base.js';
 /**
  * @summary 范围滑块组件
@@ -31,7 +30,7 @@ import { SliderBase } from '../slider/slider-base.js';
  * @csspart label - 提示文本
  * @csspart tickmark - 刻度标记
  */
-export let RangeSlider = class RangeSlider extends SliderBase {
+let RangeSlider = class RangeSlider extends SliderBase {
     constructor() {
         super(...arguments);
         /**
@@ -69,11 +68,10 @@ export let RangeSlider = class RangeSlider extends SliderBase {
         this._value = _value;
         this.requestUpdate('value', oldValue);
         this.updateComplete.then(() => {
-            var _a;
             this.updateStyle();
             // reset 引起的值变更，不执行验证；直接修改值引起的变更，需要进行验证
             const form = this.formController.getForm();
-            if (form && ((_a = formResets.get(form)) === null || _a === void 0 ? void 0 : _a.has(this))) {
+            if (form && formResets.get(form)?.has(this)) {
                 this.invalid = false;
                 formResets.get(form).delete(this);
             }
@@ -91,6 +89,9 @@ export let RangeSlider = class RangeSlider extends SliderBase {
         if (!this.defaultValue.length) {
             this.defaultValue = [...this.value];
         }
+    }
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
         // 在轨道上点击时，计算出点击位置在 <input type="range"> 元素上的值
         // 若该值在 this.value 的两个值中间位置的左侧，则表示操作的是左侧的值，否则操作的是右侧的值
         const getCurrentHandle = (event) => {
@@ -132,9 +133,6 @@ export let RangeSlider = class RangeSlider extends SliderBase {
                 this.startHover(event);
             }
         });
-    }
-    firstUpdated(changedProperties) {
-        super.firstUpdated(changedProperties);
         this.updateStyle();
     }
     /**
@@ -142,7 +140,7 @@ export let RangeSlider = class RangeSlider extends SliderBase {
      * <input class="invalid" /> 用于提供 html5 自带的表单错误提示
      */
     render() {
-        return html `<label><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({
             'z-index': this.currentHandle === 'end' ? '2' : '1',
@@ -170,7 +168,6 @@ export let RangeSlider = class RangeSlider extends SliderBase {
         const startValue = this.value[0];
         const endValue = this.value[1];
         const doInput = () => {
-            emit(this, 'input');
             this.updateStyle();
         };
         if (isStart) {
@@ -208,3 +205,4 @@ __decorate([
 RangeSlider = __decorate([
     customElement('mdui-range-slider')
 ], RangeSlider);
+export { RangeSlider };

package/components/ripple/index.js

@@ -24,7 +24,7 @@ import { style } from './style.js';
  * 背景色通过在 .surface 元素上添加对应的 class 实现
  * 阴影在 ripple-mixin 中处理，通过在 :host 元素上添加 attribute 供 CSS 选择器添加样式
  */
-export let Ripple = class Ripple extends LitElement {
+let Ripple = class Ripple extends LitElement {
     constructor() {
         super(...arguments);
         /**
@@ -171,3 +171,4 @@ __decorate([
 Ripple = __decorate([
     customElement('mdui-ripple')
 ], Ripple);
+export { Ripple };

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

@@ -70,9 +70,10 @@ export declare class SegmentedButtonGroup extends LitElement implements FormCont
      * 是否验证未通过
      */
     private invalid;
-    private hasSetDefaultValue;
+    private isInitial;
     private readonly inputRef;
     private readonly formController;
+    private readonly definedController;
     /**
      * 表单验证状态对象
      */
@@ -90,7 +91,6 @@ export declare class SegmentedButtonGroup extends LitElement implements FormCont
     private onSelectedKeysChange;
     private onValueChange;
     private onInvalidChange;
-    private onDisabledChange;
     connectedCallback(): void;
     /**
      * 检查表单字段是否验证通过。若未通过则返回 `false`，并触发 `invalid` 事件；若验证通过，则返回 `true`
@@ -109,14 +109,17 @@ export declare class SegmentedButtonGroup extends LitElement implements FormCont
      */
     setCustomValidity(message: string): void;
     protected render(): TemplateResult;
-    private updateSelected;
     private selectOne;
     private onClick;
     /**
      * 在隐藏的 `<input>` 或 `<select>` 上按下按键时，切换选中状态
+     * 通常为验证不通过时，默认聚焦到 `<input>` 或 `<select>` 上，此时按下按键，切换第一个元素的选中状态
      */
     private onInputKeyDown;
     private onSlotChange;
+    private setSelectedKeys;
+    private setValue;
+    private updateItems;
 }
 declare global {
     interface HTMLElementTagNameMap {