mdui 2.0.0 → 2.0.2

package/components/avatar/index.js

@@ -22,7 +22,7 @@ import { style } from './style.js';
  *
  * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
  */
-export let Avatar = class Avatar extends LitElement {
+let Avatar = class Avatar extends LitElement {
     constructor() {
         super(...arguments);
         this.hasSlotController = new HasSlotController(this, '[default]');
@@ -53,3 +53,4 @@ __decorate([
 Avatar = __decorate([
     customElement('mdui-avatar')
 ], Avatar);
+export { Avatar };

package/components/badge/index.js

@@ -15,7 +15,7 @@ import { style } from './style.js';
  *
  * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
  */
-export let Badge = class Badge extends LitElement {
+let Badge = class Badge extends LitElement {
     constructor() {
         super(...arguments);
         /**
@@ -39,3 +39,4 @@ __decorate([
 Badge = __decorate([
     customElement('mdui-badge')
 ], Badge);
+export { Badge };

package/components/bottom-app-bar/index.d.ts

@@ -1,7 +1,7 @@
 import { LayoutItemBase } from '../layout/layout-item-base.js';
 import type { LayoutPlacement } from '../layout/helper.js';
 import type { ScrollPaddingPosition } from '@mdui/shared/mixins/scrollBehavior.js';
-import type { CSSResultGroup, TemplateResult } from 'lit';
+import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 declare const BottomAppBar_base: import("@open-wc/dedupe-mixin").Constructor<import("@mdui/shared/mixins/scrollBehavior.js").ScrollBehaviorMixinInterface> & typeof LayoutItemBase;
 /**
  * @summary 底部应用栏组件
@@ -44,7 +44,7 @@ export declare class BottomAppBar extends BottomAppBar_base {
     scrollBehavior?: 'hide';
     protected get scrollPaddingPosition(): ScrollPaddingPosition;
     protected get layoutPlacement(): LayoutPlacement;
-    connectedCallback(): void;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
     protected render(): TemplateResult;
     /**
      * 滚动行为

package/components/bottom-app-bar/index.js

@@ -31,7 +31,7 @@ import { style } from './style.js';
  * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
  * @cssprop --z-index - 组件的 CSS 的 `z-index` 值
  */
-export let BottomAppBar = class BottomAppBar extends ScrollBehaviorMixin(LayoutItemBase) {
+let BottomAppBar = class BottomAppBar extends ScrollBehaviorMixin(LayoutItemBase) {
     constructor() {
         super(...arguments);
         /**
@@ -49,8 +49,8 @@ export let BottomAppBar = class BottomAppBar extends ScrollBehaviorMixin(LayoutI
     get layoutPlacement() {
         return 'bottom';
     }
-    connectedCallback() {
-        super.connectedCallback();
+    firstUpdated(_changedProperties) {
+        super.firstUpdated(_changedProperties);
         this.addEventListener('transitionend', (event) => {
             if (event.target === this) {
                 emit(this, this.hide ? 'hidden' : 'shown');
@@ -103,3 +103,4 @@ __decorate([
 BottomAppBar = __decorate([
     customElement('mdui-bottom-app-bar')
 ], BottomAppBar);
+export { BottomAppBar };

package/components/button/button-base.d.ts

@@ -1,6 +1,6 @@
 import { LitElement } from 'lit';
 import '../circular-progress.js';
-import type { CSSResultGroup, TemplateResult } from 'lit';
+import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 type RenderButtonOptions = {
     id?: string;
     className?: string;
@@ -114,7 +114,6 @@ export declare class ButtonBase extends ButtonBase_base {
     protected get rippleDisabled(): boolean;
     protected get focusElement(): HTMLElement | null;
     protected get focusDisabled(): boolean;
-    connectedCallback(): void;
     /**
      * 检查表单字段是否验证通过。若未通过则返回 `false`，并触发 `invalid` 事件；若验证通过，则返回 `true`
      */
@@ -131,6 +130,7 @@ export declare class ButtonBase extends ButtonBase_base {
      * @param message 自定义的提示文本
      */
     setCustomValidity(message: string): void;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
     protected renderLoading(): TemplateResult;
     protected renderButton({ id, className, part, content, }: RenderButtonOptions): TemplateResult;
     protected isButton(): boolean;

package/components/button/button-base.js

@@ -76,25 +76,15 @@ export class ButtonBase extends AnchorMixin(RippleMixin(FocusableMixin(LitElemen
         return this.disabled || this.loading;
     }
     get focusElement() {
-        var _a, _b;
         return this.isButton()
-            ? (_a = this.renderRoot) === null || _a === void 0 ? void 0 : _a.querySelector('._button')
-            : (_b = this.renderRoot) === null || _b === void 0 ? void 0 : _b.querySelector('._a');
+            ? this.renderRoot?.querySelector('._button')
+            : !this.focusDisabled
+                ? this.renderRoot?.querySelector('._a')
+                : this;
     }
     get focusDisabled() {
         return this.disabled || this.loading;
     }
-    connectedCallback() {
-        super.connectedCallback();
-        this.addEventListener('click', () => {
-            if (this.type === 'submit') {
-                this.formController.submit(this);
-            }
-            if (this.type === 'reset') {
-                this.formController.reset(this);
-            }
-        });
-    }
     /**
      * 检查表单字段是否验证通过。若未通过则返回 `false`，并触发 `invalid` 事件；若验证通过，则返回 `true`
      */
@@ -142,6 +132,17 @@ export class ButtonBase extends AnchorMixin(RippleMixin(FocusableMixin(LitElemen
             this.focusElement.setCustomValidity(message);
         }
     }
+    firstUpdated(_changedProperties) {
+        super.firstUpdated(_changedProperties);
+        this.addEventListener('click', () => {
+            if (this.type === 'submit') {
+                this.formController.submit(this);
+            }
+            if (this.type === 'reset') {
+                this.formController.reset(this);
+            }
+        });
+    }
     renderLoading() {
         return this.loading
             ? html `<mdui-circular-progress part="loading"></mdui-circular-progress>`

package/components/button/index.js

@@ -30,7 +30,7 @@ import { style } from './style.js';
  *
  * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
  */
-export let Button = class Button extends ButtonBase {
+let Button = class Button extends ButtonBase {
     constructor() {
         super(...arguments);
         /**
@@ -108,3 +108,4 @@ __decorate([
 Button = __decorate([
     customElement('mdui-button')
 ], Button);
+export { Button };

package/components/button-icon/index.js

@@ -32,7 +32,7 @@ import { style } from './style.js';
  *
  * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
  */
-export let ButtonIcon = class ButtonIcon extends ButtonBase {
+let ButtonIcon = class ButtonIcon extends ButtonBase {
     constructor() {
         super(...arguments);
         /**
@@ -127,3 +127,4 @@ __decorate([
 ButtonIcon = __decorate([
     customElement('mdui-button-icon')
 ], ButtonIcon);
+export { ButtonIcon };

package/components/card/index.d.ts

@@ -37,7 +37,7 @@ export declare class Card extends Card_base {
     private readonly rippleRef;
     protected get rippleElement(): Ripple;
     protected get rippleDisabled(): boolean;
-    protected get focusElement(): HTMLElement;
+    protected get focusElement(): HTMLElement | null;
     protected get focusDisabled(): boolean;
     protected render(): TemplateResult;
 }

package/components/card/index.js

@@ -22,7 +22,7 @@ import { style } from './style.js';
  *
  * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
  */
-export let Card = class Card extends AnchorMixin(RippleMixin(FocusableMixin(LitElement))) {
+let Card = class Card extends AnchorMixin(RippleMixin(FocusableMixin(LitElement))) {
     constructor() {
         super(...arguments);
         /**
@@ -50,7 +50,9 @@ export let Card = class Card extends AnchorMixin(RippleMixin(FocusableMixin(LitE
         return this.disabled || (!this.href && !this.clickable);
     }
     get focusElement() {
-        return this;
+        return this.href && !this.disabled
+            ? this.renderRoot.querySelector('._a')
+            : this;
     }
     get focusDisabled() {
         return this.rippleDisabled;
@@ -85,3 +87,4 @@ __decorate([
 Card = __decorate([
     customElement('mdui-card')
 ], Card);
+export { Card };

package/components/checkbox/index.js

@@ -1,6 +1,7 @@
 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 { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { live } from 'lit/directives/live.js';
 import { createRef, ref } from 'lit/directives/ref.js';
@@ -41,7 +42,7 @@ import { style } from './style.js';
  * @csspart indeterminate-icon - 不确定状态图标
  * @csspart label - 文本
  */
-export let Checkbox = class Checkbox extends RippleMixin(FocusableMixin(LitElement)) {
+let Checkbox = class Checkbox extends RippleMixin(FocusableMixin(LitElement)) {
     constructor() {
         super(...arguments);
         /**
@@ -113,11 +114,10 @@ export let Checkbox = class Checkbox extends RippleMixin(FocusableMixin(LitEleme
         this.invalid = !this.inputRef.value.checkValidity();
     }
     async onCheckedChange() {
-        var _a;
         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);
         }
@@ -170,7 +170,7 @@ export let Checkbox = class Checkbox extends RippleMixin(FocusableMixin(LitEleme
         this.invalid = !this.inputRef.value.checkValidity();
     }
     render() {
-        return html `<label><input ${ref(this.inputRef)} type="checkbox" name="${ifDefined(this.name)}" value="${ifDefined(this.value)}" .indeterminate="${live(this.indeterminate)}" .disabled="${this.disabled}" .checked="${live(this.checked)}" .required="${this.required}" @change="${this.onChange}"> <i part="control"><mdui-ripple ${ref(this.rippleRef)} .noRipple="${this.noRipple}"></mdui-ripple><slot name="unchecked-icon" part="unchecked-icon" class="icon unchecked-icon">${this.uncheckedIcon
+        return html `<label class="${classMap({ invalid: this.invalid })}"><input ${ref(this.inputRef)} type="checkbox" name="${ifDefined(this.name)}" value="${ifDefined(this.value)}" .indeterminate="${live(this.indeterminate)}" .disabled="${this.disabled}" .checked="${live(this.checked)}" .required="${this.required}" @change="${this.onChange}"> <i part="control"><mdui-ripple ${ref(this.rippleRef)} .noRipple="${this.noRipple}"></mdui-ripple><slot name="unchecked-icon" part="unchecked-icon" class="icon unchecked-icon">${this.uncheckedIcon
             ? html `<mdui-icon name="${this.uncheckedIcon}" class="i"></mdui-icon>`
             : html `<mdui-icon-check-box-outline-blank class="i"></mdui-icon-check-box-outline-blank>`}</slot><slot name="checked-icon" part="checked-icon" class="icon checked-icon">${this.checkedIcon
             ? html `<mdui-icon name="${this.checkedIcon}" class="i"></mdui-icon>`
@@ -238,11 +238,7 @@ __decorate([
     property({ reflect: true, attribute: 'indeterminate-icon' })
 ], Checkbox.prototype, "indeterminateIcon", void 0);
 __decorate([
-    property({
-        type: Boolean,
-        reflect: true,
-        converter: booleanConverter,
-    })
+    state()
 ], Checkbox.prototype, "invalid", void 0);
 __decorate([
     watch('disabled', true),
@@ -255,3 +251,4 @@ __decorate([
 Checkbox = __decorate([
     customElement('mdui-checkbox')
 ], Checkbox);
+export { Checkbox };

package/components/checkbox/style.js

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

package/components/chip/index.js

@@ -42,7 +42,7 @@ import { style } from './style.js';
  *
  * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
  */
-export let Chip = class Chip extends ButtonBase {
+let Chip = class Chip extends ButtonBase {
     constructor() {
         super();
         /**
@@ -241,3 +241,4 @@ __decorate([
 Chip = __decorate([
     customElement('mdui-chip')
 ], Chip);
+export { Chip };

package/components/circular-progress/index.js

@@ -12,7 +12,7 @@ import { style } from './style.js';
  * <mdui-circular-progress></mdui-circular-progress>
  * ```
  */
-export let CircularProgress = class CircularProgress extends LitElement {
+let CircularProgress = class CircularProgress extends LitElement {
     constructor() {
         super(...arguments);
         /**
@@ -28,14 +28,13 @@ export let CircularProgress = class CircularProgress extends LitElement {
         })}">${isDeterminate ? this.renderDeterminate() : this.renderInDeterminate()}</div>`;
     }
     renderDeterminate() {
-        var _a;
         const value = this.value;
         const strokeWidth = 4; // 圆环宽度
         const circleRadius = 18; // 圆环宽度中心点的半径
         const π = 3.1415926;
         const center = circleRadius + strokeWidth / 2;
         const circumference = 2 * π * circleRadius;
-        const determinateStrokeDashOffset = (1 - value / Math.max((_a = this.max) !== null && _a !== void 0 ? _a : value, value)) * circumference;
+        const determinateStrokeDashOffset = (1 - value / Math.max(this.max ?? value, value)) * circumference;
         return html `<svg viewBox="0 0 ${center * 2} ${center * 2}"><circle class="track" cx="${center}" cy="${center}" r="${circleRadius}" stroke-width="${strokeWidth}"></circle><circle class="circle" cx="${center}" cy="${center}" r="${circleRadius}" stroke-dasharray="${2 * π * circleRadius}" stroke-dashoffset="${determinateStrokeDashOffset}" stroke-width="${strokeWidth}"></circle></svg>`;
     }
     renderInDeterminate() {
@@ -59,3 +58,4 @@ __decorate([
 CircularProgress = __decorate([
     customElement('mdui-circular-progress')
 ], CircularProgress);
+export { CircularProgress };

package/components/collapse/collapse-item-style.js

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const collapseItemStyle = css `:host{display:flex;flex-direction:column}.header{display:block}.body{display:block;overflow:hidden;transition:height var(--mdui-motion-duration-short4) var(--mdui-motion-easing-emphasized)}.body.opened{overflow:visible}:host([active]) .body{transition-duration:var(--mdui-motion-duration-medium4)}`;
+export const collapseItemStyle = css `:host{display:flex;flex-direction:column}.header{display:block}.body{display:block;overflow:hidden;transition:height var(--mdui-motion-duration-short4) var(--mdui-motion-easing-emphasized)}.body.opened{overflow:visible}.body.active{transition-duration:var(--mdui-motion-duration-medium4)}`;

package/components/collapse/collapse-item.d.ts

@@ -1,6 +1,5 @@
 import { LitElement } from 'lit';
 import '@mdui/jq/methods/height.js';
-import '@mdui/jq/methods/on.js';
 import type { JQ } from '@mdui/jq/shared/core.js';
 import type { CSSResultGroup, TemplateResult, PropertyValues } from 'lit';
 /**
@@ -47,10 +46,12 @@ export declare class CollapseItem extends LitElement {
      */
     protected active: boolean;
     private state;
+    protected isInitial: boolean;
     protected readonly key: number;
     private readonly bodyRef;
     private onActiveChange;
     protected firstUpdated(changedProperties: PropertyValues): void;
     protected render(): TemplateResult;
+    private onTransitionEnd;
     private updateBodyHeight;
 }

package/components/collapse/collapse-item.js

@@ -5,7 +5,6 @@ import { classMap } from 'lit/directives/class-map.js';
 import { createRef, ref } from 'lit/directives/ref.js';
 import { $ } from '@mdui/jq/$.js';
 import '@mdui/jq/methods/height.js';
-import '@mdui/jq/methods/on.js';
 import { watch } from '@mdui/shared/decorators/watch.js';
 import { booleanConverter } from '@mdui/shared/helpers/decorator.js';
 import { emit } from '@mdui/shared/helpers/event.js';
@@ -33,7 +32,7 @@ import { collapseItemStyle } from './collapse-item-style.js';
  * @csspart header - 折叠面板的头部内容
  * @csspart body - 折叠面板的正文内容
  */
-export let CollapseItem = class CollapseItem extends LitElement {
+let CollapseItem = class CollapseItem extends LitElement {
     constructor() {
         super(...arguments);
         /**
@@ -45,34 +44,41 @@ export let CollapseItem = class CollapseItem extends LitElement {
          */
         this.active = false;
         this.state = 'closed';
+        // 是否是初始状态，不显示动画
+        this.isInitial = true;
         // 每一个 `collapse-item` 元素都添加一个唯一的 key
         this.key = uniqueId();
         this.bodyRef = createRef();
     }
     onActiveChange() {
-        if (this.hasUpdated) {
+        if (this.isInitial) {
+            this.state = this.active ? 'opened' : 'closed';
+            if (this.hasUpdated) {
+                this.updateBodyHeight();
+            }
+        }
+        else {
             this.state = this.active ? 'open' : 'close';
             emit(this, this.state);
             this.updateBodyHeight();
         }
-        else {
-            this.state = this.active ? 'opened' : 'closed';
-        }
     }
     firstUpdated(changedProperties) {
         super.firstUpdated(changedProperties);
-        $(this.bodyRef.value).on('transitionend', (e) => {
-            const event = e;
-            if (event.target === this.bodyRef.value) {
-                this.state = this.active ? 'opened' : 'closed';
-                emit(this, this.state);
-                this.updateBodyHeight();
-            }
-        });
         this.updateBodyHeight();
     }
     render() {
-        return html `<slot name="header" part="header" class="header">${this.header}</slot><slot part="body" class="body ${classMap({ opened: this.state === 'opened' })}" ${ref(this.bodyRef)}></slot>`;
+        return html `<slot name="header" part="header" class="header">${this.header}</slot><slot part="body" class="body ${classMap({
+            opened: this.state === 'opened',
+            active: this.active,
+        })}" ${ref(this.bodyRef)} @transitionend="${this.onTransitionEnd}"></slot>`;
+    }
+    onTransitionEnd(event) {
+        if (event.target === this.bodyRef.value) {
+            this.state = this.active ? 'opened' : 'closed';
+            emit(this, this.state);
+            this.updateBodyHeight();
+        }
     }
     updateBodyHeight() {
         const scrollHeight = this.bodyRef.value.scrollHeight;
@@ -109,11 +115,7 @@ __decorate([
     property()
 ], CollapseItem.prototype, "trigger", void 0);
 __decorate([
-    property({
-        type: Boolean,
-        reflect: true,
-        converter: booleanConverter,
-    })
+    state()
 ], CollapseItem.prototype, "active", void 0);
 __decorate([
     state()
@@ -124,3 +126,4 @@ __decorate([
 CollapseItem = __decorate([
     customElement('mdui-collapse-item')
 ], CollapseItem);
+export { CollapseItem };

package/components/collapse/collapse.d.ts

@@ -1,6 +1,4 @@
 import { LitElement } from 'lit';
-import '@mdui/jq/methods/find.js';
-import '@mdui/jq/methods/get.js';
 import '@mdui/jq/methods/is.js';
 import type { CSSResultGroup, TemplateResult } from 'lit';
 /**
@@ -37,13 +35,15 @@ export declare class Collapse extends LitElement {
      */
     disabled: boolean;
     private activeKeys;
-    private items;
+    private readonly items;
+    private isInitial;
+    private definedController;
     private onActiveKeysChange;
     private onValueChange;
-    connectedCallback(): void;
     protected render(): TemplateResult;
-    private syncItems;
+    private setActiveKeys;
+    private setValue;
     private onClick;
     private onSlotChange;
-    private updateActive;
+    private updateItems;
 }

package/components/collapse/collapse.js

@@ -1,12 +1,12 @@
 import { __decorate } from "tslib";
 import { html, LitElement } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
+import { customElement, property, queryAssignedElements, state, } from 'lit/decorators.js';
 import { $ } from '@mdui/jq/$.js';
-import '@mdui/jq/methods/find.js';
-import '@mdui/jq/methods/get.js';
 import '@mdui/jq/methods/is.js';
-import { isElement } from '@mdui/jq/shared/helper.js';
+import { isElement, isUndefined } from '@mdui/jq/shared/helper.js';
+import { DefinedController } from '@mdui/shared/controllers/defined.js';
 import { watch } from '@mdui/shared/decorators/watch.js';
+import { arraysEqualIgnoreOrder } from '@mdui/shared/helpers/array.js';
 import { booleanConverter } from '@mdui/shared/helpers/decorator.js';
 import { emit } from '@mdui/shared/helpers/event.js';
 import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
@@ -25,7 +25,7 @@ import { collapseStyle } from './collapse-style.js';
  *
  * @slot - `<mdui-collapse-item>` 组件
  */
-export let Collapse = class Collapse extends LitElement {
+let Collapse = class Collapse extends LitElement {
     constructor() {
         super(...arguments);
         /**
@@ -38,53 +38,67 @@ export let Collapse = class Collapse extends LitElement {
         this.disabled = false;
         // 因为 collapse-item 的 value 可能会重复，所以在每个 collapse-item 元素上都添加了一个唯一的 key，通过 activeKey 来记录激活状态的 key
         this.activeKeys = [];
-        this.items = [];
+        // 是否是初始状态，初始状态不触发 change 事件，没有动画
+        this.isInitial = true;
+        this.definedController = new DefinedController(this, {
+            relatedElements: ['mdui-collapse-item'],
+        });
     }
-    onActiveKeysChange() {
-        var _a;
+    async onActiveKeysChange() {
+        await this.definedController.whenDefined();
         // 根据 activeKeys 读取对应 collapse-item 的值
-        this.value = this.accordion
-            ? (_a = this.items.find((item) => this.activeKeys.includes(item.key))) === null || _a === void 0 ? void 0 : _a.value
+        const value = this.accordion
+            ? this.items.find((item) => this.activeKeys.includes(item.key))?.value
             : this.items
                 .filter((item) => this.activeKeys.includes(item.key))
                 .map((item) => item.value);
-        emit(this, 'change');
+        this.setValue(value);
+        if (!this.isInitial) {
+            emit(this, 'change');
+        }
     }
-    onValueChange() {
+    async onValueChange() {
+        this.isInitial = !this.hasUpdated;
+        await this.definedController.whenDefined();
         if (this.accordion) {
             const value = this.value;
             if (!value) {
-                this.activeKeys = [];
+                this.setActiveKeys([]);
             }
             else {
                 const item = this.items.find((item) => item.value === value);
-                this.activeKeys = item ? [item.key] : [];
+                this.setActiveKeys(item ? [item.key] : []);
             }
         }
         else {
             const value = this.value;
             if (!value.length) {
-                this.activeKeys = [];
+                this.setActiveKeys([]);
             }
             else {
-                this.activeKeys = this.items
+                const activeKeys = this.items
                     .filter((item) => value.includes(item.value))
                     .map((item) => item.key);
+                this.setActiveKeys(activeKeys);
             }
         }
-        this.updateActive();
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.syncItems();
+        this.updateItems();
     }
     render() {
         return html `<slot @slotchange="${this.onSlotChange}" @click="${this.onClick}"></slot>`;
     }
-    syncItems() {
-        this.items = $(this)
-            .find('mdui-collapse-item')
-            .get();
+    setActiveKeys(activeKeys) {
+        if (!arraysEqualIgnoreOrder(this.activeKeys, activeKeys)) {
+            this.activeKeys = activeKeys;
+        }
+    }
+    setValue(value) {
+        if (this.accordion || isUndefined(this.value) || isUndefined(value)) {
+            this.value = value;
+        }
+        else if (!arraysEqualIgnoreOrder(this.value, value)) {
+            this.value = value;
+        }
     }
     onClick(event) {
         // 全部禁用
@@ -113,10 +127,10 @@ export let Collapse = class Collapse extends LitElement {
         }
         if (this.accordion) {
             if (this.activeKeys.includes(item.key)) {
-                this.activeKeys = [];
+                this.setActiveKeys([]);
             }
             else {
-                this.activeKeys = [item.key];
+                this.setActiveKeys([item.key]);
             }
         }
         else {
@@ -128,16 +142,21 @@ export let Collapse = class Collapse extends LitElement {
             else {
                 activeKeys.push(item.key);
             }
-            this.activeKeys = activeKeys;
+            this.setActiveKeys(activeKeys);
         }
-        this.updateActive();
+        this.isInitial = false;
+        this.updateItems();
     }
-    onSlotChange() {
-        this.syncItems();
-        this.updateActive();
+    async onSlotChange() {
+        await this.definedController.whenDefined();
+        this.updateItems();
     }
-    updateActive() {
-        this.items.forEach((item) => (item.active = this.activeKeys.includes(item.key)));
+    // 更新 <mdui-collapse-item> 的状态
+    updateItems() {
+        this.items.forEach((item) => {
+            item.active = this.activeKeys.includes(item.key);
+            item.isInitial = this.isInitial;
+        });
     }
 };
 Collapse.styles = [
@@ -164,6 +183,9 @@ __decorate([
 __decorate([
     state()
 ], Collapse.prototype, "activeKeys", void 0);
+__decorate([
+    queryAssignedElements({ selector: 'mdui-collapse-item', flatten: true })
+], Collapse.prototype, "items", void 0);
 __decorate([
     watch('activeKeys', true)
 ], Collapse.prototype, "onActiveKeysChange", null);
@@ -173,3 +195,4 @@ __decorate([
 Collapse = __decorate([
     customElement('mdui-collapse')
 ], Collapse);
+export { Collapse };