mdui 2.0.0 → 2.0.2

package/components/menu/menu.js

@@ -9,8 +9,10 @@ import '@mdui/jq/methods/get.js';
 import '@mdui/jq/methods/is.js';
 import '@mdui/jq/methods/parent.js';
 import '@mdui/jq/methods/parents.js';
-import { isString } from '@mdui/jq/shared/helper.js';
+import { isString, 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 { delay } from '@mdui/shared/helpers/delay.js';
 import { emit } from '@mdui/shared/helpers/event.js';
@@ -39,7 +41,7 @@ import { menuStyle } from './menu-style.js';
  *
  * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
  */
-export let Menu = class Menu extends LitElement {
+let Menu = class Menu extends LitElement {
     constructor() {
         super(...arguments);
         /**
@@ -65,10 +67,13 @@ export let Menu = class Menu extends LitElement {
         this.submenuCloseDelay = 200;
         // 因为 menu-item 的 value 可能会重复，所有在每一个 menu-item 元素上都加了一个唯一的 key 属性，通过 selectedKeys 来记录选中状态的 key
         this.selectedKeys = [];
-        // 是否已完成初始 value 的设置。首次设置初始值时，不触发 change 事件
-        this.hasSetDefaultValue = false;
+        // 是否是初始状态，初始状态不触发 change 事件
+        this.isInitial = true;
         // 最后一次获得焦点的 menu-item 元素。为嵌套菜单时，把不同层级的 menu-item 放到对应索引位的位置
         this.lastActiveItems = [];
+        this.definedController = new DefinedController(this, {
+            relatedElements: ['mdui-menu-item'],
+        });
     }
     // 菜单项元素（包含子菜单中的菜单项）
     get items() {
@@ -110,7 +115,8 @@ export let Menu = class Menu extends LitElement {
             : 0;
         this.lastActiveItems[index] = item;
     }
-    onSlotChange() {
+    async onSlotChange() {
+        await this.definedController.whenDefined();
         this.items.forEach((item) => {
             item.dense = this.dense;
             item.selects = this.selects;
@@ -119,43 +125,32 @@ export let Menu = class Menu extends LitElement {
             item.submenuCloseDelay = this.submenuCloseDelay;
         });
     }
-    onSelectsChange() {
-        if (!this.isSelectable && this.selectedKeys.length) {
-            this.selectedKeys = [];
-            this.onSelectedKeysChange();
-            this.onValueChange();
+    async onSelectsChange() {
+        if (!this.isSelectable) {
+            // 不可选中，清空选中值
+            this.setSelectedKeys([]);
         }
-        if (this.isSingle && this.selectedKeys.length > 1) {
-            this.selectedKeys = this.selectedKeys.slice(0, 1);
-            this.onSelectedKeysChange();
-            this.onValueChange();
+        else if (this.isSingle) {
+            // 单选，只保留第一个选中的值
+            this.setSelectedKeys(this.selectedKeys.slice(0, 1));
         }
+        await this.onSelectedKeysChange();
     }
-    onSelectedKeysChange(oldSelectedKeys) {
-        // 根据 selectedKeys 读取出对应 menu-item 的 value。页面首次渲染时，values 始终为空数组
+    async onSelectedKeysChange() {
+        await this.definedController.whenDefined();
+        // 根据 selectedKeys 读取出对应 menu-item 的 value
         const values = this.itemsEnabled
             .filter((item) => this.selectedKeys.includes(item.key))
             .map((item) => item.value);
-        // 如果是多选，且每一项值都不变，则视为未变更，不触发 change 事件
-        if (this.isMultiple &&
-            oldSelectedKeys &&
-            oldSelectedKeys.length === this.selectedKeys.length &&
-            oldSelectedKeys.every((v, i) => v === this.selectedKeys[i])) {
-            this.hasSetDefaultValue = true;
-            return;
-        }
-        this.value = this.isMultiple ? values : values[0] || undefined;
-        if (this.hasSetDefaultValue) {
+        const value = this.isMultiple ? values : values[0] || undefined;
+        this.setValue(value);
+        if (!this.isInitial) {
             emit(this, 'change');
         }
-        else {
-            this.hasSetDefaultValue = true;
-        }
     }
     async onValueChange() {
-        if (!this.hasUpdated) {
-            await this.updateComplete;
-        }
+        this.isInitial = !this.hasUpdated;
+        await this.definedController.whenDefined();
         // 根据 value 找出对应的 menu-item，并把这些 menu-item 的 key 赋值给 selectedKeys
         if (!this.isSelectable) {
             this.updateSelected();
@@ -168,16 +163,16 @@ export let Menu = class Menu extends LitElement {
                     ? [this.value]
                     : this.value).filter((i) => i);
         if (!values.length) {
-            this.selectedKeys = [];
+            this.setSelectedKeys([]);
         }
         else if (this.isSingle) {
             const firstItem = this.itemsEnabled.find((item) => item.value === values[0]);
-            this.selectedKeys = firstItem ? [firstItem.key] : [];
+            this.setSelectedKeys(firstItem ? [firstItem.key] : []);
         }
         else if (this.isMultiple) {
-            this.selectedKeys = this.itemsEnabled
+            this.setSelectedKeys(this.itemsEnabled
                 .filter((item) => values.includes(item.value))
-                .map((item) => item.key);
+                .map((item) => item.key));
         }
         this.updateSelected();
         this.updateFocusable();
@@ -200,8 +195,10 @@ export let Menu = class Menu extends LitElement {
     }
     firstUpdated(changedProperties) {
         super.firstUpdated(changedProperties);
-        this.updateFocusable();
-        this.lastActiveItem = this.items.find((item) => item.focusable);
+        this.definedController.whenDefined().then(() => {
+            this.updateFocusable();
+            this.lastActiveItem = this.items.find((item) => item.focusable);
+        });
         // 子菜单打开时，把焦点放到新的子菜单上
         this.addEventListener('submenu-open', (e) => {
             const $parentItem = $(e.target);
@@ -231,6 +228,19 @@ export let Menu = class Menu extends LitElement {
     render() {
         return html `<slot @slotchange="${this.onSlotChange}" @click="${this.onClick}" @keydown="${this.onKeyDown}"></slot>`;
     }
+    setSelectedKeys(selectedKeys) {
+        if (!arraysEqualIgnoreOrder(this.selectedKeys, selectedKeys)) {
+            this.selectedKeys = selectedKeys;
+        }
+    }
+    setValue(value) {
+        if (this.isSingle || isUndefined(this.value) || isUndefined(value)) {
+            this.value = value;
+        }
+        else if (!arraysEqualIgnoreOrder(this.value, value)) {
+            this.value = value;
+        }
+    }
     // 获取和指定菜单项同级的所有菜单项
     getSiblingsItems(item, onlyEnabled = false) {
         return $(item)
@@ -242,23 +252,29 @@ export let Menu = class Menu extends LitElement {
     updateFocusable() {
         // 焦点优先放在之前焦点所在的元素上
         if (this.lastActiveItem) {
-            this.items.forEach((item) => (item.focusable = item.key === this.lastActiveItem.key));
+            this.items.forEach((item) => {
+                item.focusable = item.key === this.lastActiveItem.key;
+            });
             return;
         }
         // 没有选中任何一项，焦点放在第一个 menu-item 上
         if (!this.selectedKeys.length) {
-            this.itemsEnabled.forEach((item, index) => (item.focusable = !index));
+            this.itemsEnabled.forEach((item, index) => {
+                item.focusable = !index;
+            });
             return;
         }
         // 如果是单选，焦点放在当前选中的元素上
         if (this.isSingle) {
-            this.items.forEach((item) => (item.focusable = this.selectedKeys.includes(item.key)));
+            this.items.forEach((item) => {
+                item.focusable = this.selectedKeys.includes(item.key);
+            });
             return;
         }
         // 是多选，且原焦点不在 selectedKeys 上，焦点放在第一个选中的 menu-item 上
         if (this.isMultiple) {
             const focusableItem = this.items.find((item) => item.focusable);
-            if (!(focusableItem === null || focusableItem === void 0 ? void 0 : focusableItem.key) ||
+            if (!focusableItem?.key ||
                 !this.selectedKeys.includes(focusableItem.key)) {
                 this.itemsEnabled
                     .filter((item) => this.selectedKeys.includes(item.key))
@@ -268,7 +284,9 @@ export let Menu = class Menu extends LitElement {
     }
     updateSelected() {
         // 选中 menu-item
-        this.items.forEach((item) => (item.selected = this.selectedKeys.includes(item.key)));
+        this.items.forEach((item) => {
+            item.selected = this.selectedKeys.includes(item.key);
+        });
     }
     // 切换一个菜单项的选中状态
     selectOne(item) {
@@ -281,28 +299,32 @@ export let Menu = class Menu extends LitElement {
             else {
                 selectedKeys.push(item.key);
             }
-            this.selectedKeys = selectedKeys;
+            this.setSelectedKeys(selectedKeys);
         }
         if (this.isSingle) {
             if (this.selectedKeys.includes(item.key)) {
-                this.selectedKeys = [];
+                this.setSelectedKeys([]);
             }
             else {
-                this.selectedKeys = [item.key];
+                this.setSelectedKeys([item.key]);
             }
         }
+        this.isInitial = false;
         this.updateSelected();
     }
     // 使一个 menu-item 可聚焦
-    focusableOne(item) {
+    async focusableOne(item) {
         this.items.forEach((_item) => (_item.focusable = _item.key === item.key));
+        await delay(); // 等待 focusableMixin 更新完成
     }
     // 聚焦一个 menu-item
-    async focusOne(item, options) {
-        await delay(); // 等待 focusableMixin 更新完成
+    focusOne(item, options) {
         item.focus(options);
     }
-    onClick(event) {
+    async onClick(event) {
+        if (!this.definedController.isDefined()) {
+            return;
+        }
         if (this.isSubmenu) {
             return;
         }
@@ -312,17 +334,20 @@ export let Menu = class Menu extends LitElement {
         }
         const target = event.target;
         const item = target.closest('mdui-menu-item');
-        if (item === null || item === void 0 ? void 0 : item.disabled) {
+        if (item?.disabled) {
             return;
         }
         this.lastActiveItem = item;
         if (this.isSelectable && item.value) {
             this.selectOne(item);
         }
-        this.focusableOne(item);
+        await this.focusableOne(item);
         this.focusOne(item);
     }
-    onKeyDown(event) {
+    async onKeyDown(event) {
+        if (!this.definedController.isDefined()) {
+            return;
+        }
         if (this.isSubmenu) {
             return;
         }
@@ -337,7 +362,7 @@ export let Menu = class Menu extends LitElement {
             event.preventDefault();
             if (this.isSelectable && item.value) {
                 this.selectOne(item);
-                this.focusableOne(item);
+                await this.focusableOne(item);
                 this.focusOne(item);
             }
         }
@@ -367,7 +392,7 @@ export let Menu = class Menu extends LitElement {
                     index = 0;
                 }
                 this.lastActiveItem = items[index];
-                this.focusableOne(items[index]);
+                await this.focusableOne(items[index]);
                 this.focusOne(items[index]);
                 return;
             }
@@ -412,7 +437,7 @@ __decorate([
     watch('submenuCloseDelay')
 ], Menu.prototype, "onSlotChange", null);
 __decorate([
-    watch('selects')
+    watch('selects', true)
 ], Menu.prototype, "onSelectsChange", null);
 __decorate([
     watch('selectedKeys', true)
@@ -423,3 +448,4 @@ __decorate([
 Menu = __decorate([
     customElement('mdui-menu')
 ], Menu);
+export { Menu };

package/components/navigation-bar/navigation-bar-item-style.js

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const navigationBarItemStyle = css `:host{--shape-corner-indicator:var(--mdui-shape-corner-full);position:relative;z-index:0;flex:1;overflow:hidden;min-width:3rem;--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-surface-variant)}.container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-decoration:none;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:padding var(--mdui-motion-duration-short4) var(--mdui-motion-easing-standard);padding-top:.75rem;padding-bottom:.75rem}mdui-ripple{z-index:1;left:50%;transform:translateX(-50%);transition:margin-top var(--mdui-motion-duration-short4) var(--mdui-motion-easing-standard);width:4rem;height:2rem;margin-top:.75rem;border-radius:var(--mdui-shape-corner-full)}.indicator{position:relative;display:flex;align-items:center;justify-content:center;background-color:transparent;border-radius:var(--shape-corner-indicator);transition:background-color var(--mdui-motion-duration-short1) var(--mdui-motion-easing-standard),width var(--mdui-motion-duration-short4) var(--mdui-motion-easing-standard);height:2rem;width:2rem}::slotted([slot=badge]){position:absolute;transform:translate(50%,-50%)}::slotted([slot=badge][variant=small]){transform:translate(.5625rem,-.5625rem)}.active-icon,.icon{color:rgb(var(--mdui-color-on-surface-variant));font-size:1.5rem}.active-icon mdui-icon,.icon mdui-icon,::slotted([slot=active]),::slotted([slot=icon]){font-size:inherit}.icon{display:flex}.active-icon{display:none}.label{display:flex;align-items:center;transition:opacity var(--mdui-motion-duration-short4) var(--mdui-motion-easing-linear);height:1rem;color:rgb(var(--mdui-color-on-surface-variant));margin-top:.25rem;margin-bottom:.25rem;font-size:var(--mdui-typescale-label-medium-size);font-weight:var(--mdui-typescale-label-medium-weight);letter-spacing:var(--mdui-typescale-label-medium-tracking);line-height:var(--mdui-typescale-label-medium-line-height)}:host([label-visibility=selected]:not([active])) mdui-ripple,:host([label-visibility=unlabeled]) mdui-ripple{margin-top:1.5rem}:host([label-visibility=selected]:not([active])) .container,:host([label-visibility=unlabeled]) .container{padding-top:1.5rem;padding-bottom:0}:host([label-visibility=selected]:not([active])) .label,:host([label-visibility=unlabeled]) .label{opacity:0}:host([active]){--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-surface)}:host([active]) .indicator{width:4rem;background-color:rgb(var(--mdui-color-secondary-container))}:host([active]) .active-icon,:host([active]) .icon{color:rgb(var(--mdui-color-on-secondary-container))}:host([active]) .has-active-icon .active-icon{display:flex}:host([active]) .has-active-icon .icon{display:none}:host([active]) .label{color:rgb(var(--mdui-color-on-surface))}`;
+export const navigationBarItemStyle = css `:host{--shape-corner-indicator:var(--mdui-shape-corner-full);position:relative;z-index:0;flex:1;overflow:hidden;min-width:3rem;--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-surface-variant)}.container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-decoration:none;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;padding-top:.75rem;padding-bottom:.75rem}.container:not(.initial){transition:padding var(--mdui-motion-duration-short4) var(--mdui-motion-easing-standard)}mdui-ripple{z-index:1;left:50%;transform:translateX(-50%);width:4rem;height:2rem;margin-top:.75rem;border-radius:var(--mdui-shape-corner-full)}mdui-ripple:not(.initial){transition:margin-top var(--mdui-motion-duration-short4) var(--mdui-motion-easing-standard)}.indicator{position:relative;display:flex;align-items:center;justify-content:center;background-color:transparent;border-radius:var(--shape-corner-indicator);height:2rem;width:2rem}:not(.initial) .indicator{transition:background-color var(--mdui-motion-duration-short1) var(--mdui-motion-easing-standard),width var(--mdui-motion-duration-short4) var(--mdui-motion-easing-standard)}::slotted([slot=badge]){position:absolute;transform:translate(50%,-50%)}::slotted([slot=badge][variant=small]){transform:translate(.5625rem,-.5625rem)}.active-icon,.icon{color:rgb(var(--mdui-color-on-surface-variant));font-size:1.5rem}.active-icon mdui-icon,.icon mdui-icon,::slotted([slot=active]),::slotted([slot=icon]){font-size:inherit}.icon{display:flex}.active-icon{display:none}.label{display:flex;align-items:center;height:1rem;color:rgb(var(--mdui-color-on-surface-variant));margin-top:.25rem;margin-bottom:.25rem;font-size:var(--mdui-typescale-label-medium-size);font-weight:var(--mdui-typescale-label-medium-weight);letter-spacing:var(--mdui-typescale-label-medium-tracking);line-height:var(--mdui-typescale-label-medium-line-height)}:not(.initial) .label{transition:opacity var(--mdui-motion-duration-short4) var(--mdui-motion-easing-linear)}:host(:not([active])) mdui-ripple.label-visibility-selected,mdui-ripple.label-visibility-unlabeled{margin-top:1.5rem}.container.label-visibility-unlabeled,:host(:not([active])) .container.label-visibility-selected{padding-top:1.5rem;padding-bottom:0}.container.label-visibility-unlabeled .label,:host(:not([active])) .container.label-visibility-selected .label{opacity:0}:host([active]){--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-surface)}:host([active]) .indicator{width:4rem;background-color:rgb(var(--mdui-color-secondary-container))}:host([active]) .active-icon,:host([active]) .icon{color:rgb(var(--mdui-color-on-secondary-container))}:host([active]) .has-active-icon .active-icon{display:flex}:host([active]) .has-active-icon .icon{display:none}:host([active]) .label{color:rgb(var(--mdui-color-on-surface))}`;

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

@@ -46,11 +46,15 @@ export declare class NavigationBarItem extends NavigationBarItem_base {
      */
     value?: string;
     /**
-     * 文本的可视状态，由 `navigation-bar` 调用
+     * 文本的可视状态，由 `<mdui-navigation-bar>` 组件控制该参数
      */
     protected labelVisibility?: 'selected' | 'labeled' | 'unlabeled';
     /**
-     * 是否为激活状态，由 `navigation-bar` 组件控制该参数
+     * 是否是初始状态，不显示动画。由 `<mdui-navigation-bar>` 组件控制该参数
+     */
+    protected isInitial: boolean;
+    /**
+     * 是否为激活状态，由 `<mdui-navigation-bar>` 组件控制该参数
      */
     protected active: boolean;
     private disabled;

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

@@ -41,16 +41,20 @@ import { navigationBarItemStyle } from './navigation-bar-item-style.js';
  *
  * @cssprop --shape-corner-indicator - 指示器的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
  */
-export let NavigationBarItem = class NavigationBarItem extends AnchorMixin(RippleMixin(FocusableMixin(LitElement))) {
+let NavigationBarItem = class NavigationBarItem extends AnchorMixin(RippleMixin(FocusableMixin(LitElement))) {
     constructor() {
         super(...arguments);
         /**
-         * 是否为激活状态，由 `navigation-bar` 组件控制该参数
+         * 是否是初始状态，不显示动画。由 `<mdui-navigation-bar>` 组件控制该参数
+         */
+        this.isInitial = true;
+        /**
+         * 是否为激活状态，由 `<mdui-navigation-bar>` 组件控制该参数
          */
         this.active = false;
         // 是否禁用该元素，该组件没有禁用状态
         this.disabled = false;
-        // 每一个 `navigation-bar-item` 元素都添加一个唯一的 key
+        // 每一个 `<navigation-bar-item>` 元素都添加一个唯一的 key
         this.key = uniqueId();
         this.rippleRef = createRef();
         this.hasSlotController = new HasSlotController(this, 'active-icon');
@@ -62,18 +66,26 @@ export let NavigationBarItem = class NavigationBarItem extends AnchorMixin(Rippl
         return this.disabled;
     }
     get focusElement() {
-        var _a;
-        return this.href ? (_a = this.renderRoot) === null || _a === void 0 ? void 0 : _a.querySelector('._a') : this;
+        return this.href ? this.renderRoot?.querySelector('._a') : this;
     }
     get focusDisabled() {
         return this.disabled;
     }
     render() {
-        const className = cc({
-            container: true,
-            'has-active-icon': this.activeIcon || this.hasSlotController.test('active-icon'),
+        const labelVisibilityClassName = cc({
+            'label-visibility-selected': this.labelVisibility === 'selected',
+            'label-visibility-labeled': this.labelVisibility === 'labeled',
+            'label-visibility-unlabeled': this.labelVisibility === 'unlabeled',
+            initial: this.isInitial,
         });
-        return html `<mdui-ripple .noRipple="${!this.active || this.noRipple}" ${ref(this.rippleRef)}></mdui-ripple>${this.href
+        const className = cc([
+            {
+                container: true,
+                'has-active-icon': this.activeIcon || this.hasSlotController.test('active-icon'),
+            },
+            labelVisibilityClassName,
+        ]);
+        return html `<mdui-ripple .noRipple="${!this.active || this.noRipple}" class="${labelVisibilityClassName}" ${ref(this.rippleRef)}></mdui-ripple>${this.href
             ? this.renderAnchor({
                 part: 'container',
                 className,
@@ -103,8 +115,11 @@ __decorate([
     property({ reflect: true })
 ], NavigationBarItem.prototype, "value", void 0);
 __decorate([
-    property({ reflect: true, attribute: 'label-visibility' })
+    state()
 ], NavigationBarItem.prototype, "labelVisibility", void 0);
+__decorate([
+    state()
+], NavigationBarItem.prototype, "isInitial", void 0);
 __decorate([
     property({
         type: Boolean,
@@ -118,3 +133,4 @@ __decorate([
 NavigationBarItem = __decorate([
     customElement('mdui-navigation-bar-item')
 ], NavigationBarItem);
+export { NavigationBarItem };

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

@@ -1,5 +1,4 @@
-import '@mdui/jq/methods/find.js';
-import '@mdui/jq/methods/get.js';
+import { PropertyValues } from 'lit';
 import { LayoutItemBase } from '../layout/layout-item-base.js';
 import type { LayoutPlacement } from '../layout/helper.js';
 import type { ScrollPaddingPosition } from '@mdui/shared/mixins/scrollBehavior.js';
@@ -52,14 +51,15 @@ export declare class NavigationBar extends NavigationBar_base {
      */
     scrollBehavior?: 'hide';
     private activeKey;
-    private hasSetDefaultValue;
+    private readonly items;
+    private isInitial;
+    private definedController;
     protected get scrollPaddingPosition(): ScrollPaddingPosition;
     protected get layoutPlacement(): LayoutPlacement;
-    private get items();
     private onActiveKeyChange;
     private onValueChange;
     private onLabelVisibilityChange;
-    connectedCallback(): void;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
     protected render(): TemplateResult;
     /**
      * 滚动行为
@@ -67,7 +67,7 @@ export declare class NavigationBar extends NavigationBar_base {
      */
     protected runScrollThreshold(isScrollingUp: boolean): void;
     private onClick;
-    private updateActive;
+    private updateItems;
     private onSlotChange;
 }
 declare global {

package/components/navigation-bar/navigation-bar.js

@@ -1,9 +1,7 @@
 import { __decorate } from "tslib";
 import { html } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import { $ } from '@mdui/jq/$.js';
-import '@mdui/jq/methods/find.js';
-import '@mdui/jq/methods/get.js';
+import { customElement, property, queryAssignedElements, state, } from 'lit/decorators.js';
+import { DefinedController } from '@mdui/shared/controllers/defined.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 +31,7 @@ import { navigationBarStyle } from './navigation-bar-style.js';
  * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
  * @cssprop --z-index - 组件的 CSS 的 `z-index` 值
  */
-export let NavigationBar = class NavigationBar extends ScrollBehaviorMixin(LayoutItemBase) {
+let NavigationBar = class NavigationBar extends ScrollBehaviorMixin(LayoutItemBase) {
     constructor() {
         super(...arguments);
         /**
@@ -51,8 +49,11 @@ export let NavigationBar = class NavigationBar extends ScrollBehaviorMixin(Layou
         this.labelVisibility = 'auto';
         // 因为 navigation-bar-item 的 value 可能会重复，所以在每个 navigation-bar-item 元素上都添加了一个唯一的 key，通过 activeKey 来记录激活状态的 key
         this.activeKey = 0;
-        // 是否已完成初始 value 的设置。首次设置初始值时，不触发 change 事件
-        this.hasSetDefaultValue = false;
+        // 是否是初始状态，初始状态不触发 change 事件，没有动画
+        this.isInitial = true;
+        this.definedController = new DefinedController(this, {
+            relatedElements: ['mdui-navigation-bar-item'],
+        });
     }
     get scrollPaddingPosition() {
         return 'bottom';
@@ -60,43 +61,28 @@ export let NavigationBar = class NavigationBar extends ScrollBehaviorMixin(Layou
     get layoutPlacement() {
         return 'bottom';
     }
-    // 所有的子项元素
-    get items() {
-        return $(this)
-            .find('mdui-navigation-bar-item')
-            .get();
-    }
-    onActiveKeyChange() {
+    async onActiveKeyChange() {
+        await this.definedController.whenDefined();
         // 根据 activeKey 读取对应 navigation-bar-item 的值
         const item = this.items.find((item) => item.key === this.activeKey);
-        this.value = item === null || item === void 0 ? void 0 : item.value;
-        if (this.hasSetDefaultValue) {
+        this.value = item?.value;
+        if (!this.isInitial) {
             emit(this, 'change');
         }
-        else {
-            this.hasSetDefaultValue = true;
-        }
     }
-    onValueChange() {
-        var _a;
+    async onValueChange() {
+        this.isInitial = !this.hasUpdated;
+        await this.definedController.whenDefined();
         const item = this.items.find((item) => item.value === this.value);
-        this.activeKey = (_a = item === null || item === void 0 ? void 0 : item.key) !== null && _a !== void 0 ? _a : 0;
-        this.updateActive();
+        this.activeKey = item?.key ?? 0;
+        this.updateItems();
     }
-    onLabelVisibilityChange() {
-        const items = this.items;
-        // 为 navigation-bar-item 设置 labelVisibility 属性
-        const labelVisibility = this.labelVisibility === 'auto'
-            ? items.length <= 3
-                ? 'labeled'
-                : 'selected'
-            : this.labelVisibility;
-        items.forEach((item) => {
-            item.labelVisibility = labelVisibility;
-        });
+    async onLabelVisibilityChange() {
+        await this.definedController.whenDefined();
+        this.updateItems();
     }
-    connectedCallback() {
-        super.connectedCallback();
+    firstUpdated(_changedProperties) {
+        super.firstUpdated(_changedProperties);
         this.addEventListener('transitionend', (event) => {
             if (event.target === this) {
                 emit(this, this.hide ? 'hidden' : 'shown');
@@ -134,13 +120,27 @@ export let NavigationBar = class NavigationBar extends ScrollBehaviorMixin(Layou
         const target = event.target;
         const item = target.closest('mdui-navigation-bar-item');
         this.activeKey = item.key;
-        this.updateActive();
+        this.isInitial = false;
+        this.updateItems();
     }
-    updateActive() {
-        this.items.forEach((item) => (item.active = this.activeKey === item.key));
+    // 更新 <mdui-navigation-bar-item> 的状态
+    updateItems() {
+        const items = this.items;
+        // <mdui-navigation-bar-item> 的 labelVisibility 不含 auto
+        const labelVisibility = this.labelVisibility === 'auto'
+            ? items.length <= 3
+                ? 'labeled'
+                : 'selected'
+            : this.labelVisibility;
+        items.forEach((item) => {
+            item.active = this.activeKey === item.key;
+            item.labelVisibility = labelVisibility;
+            item.isInitial = this.isInitial;
+        });
     }
-    onSlotChange() {
-        this.onLabelVisibilityChange();
+    async onSlotChange() {
+        await this.definedController.whenDefined();
+        this.updateItems();
     }
 };
 NavigationBar.styles = [
@@ -167,7 +167,13 @@ __decorate([
     state()
 ], NavigationBar.prototype, "activeKey", void 0);
 __decorate([
-    watch('activeKey')
+    queryAssignedElements({
+        selector: 'mdui-navigation-bar-item',
+        flatten: true,
+    })
+], NavigationBar.prototype, "items", void 0);
+__decorate([
+    watch('activeKey', true)
 ], NavigationBar.prototype, "onActiveKeyChange", null);
 __decorate([
     watch('value')
@@ -178,3 +184,4 @@ __decorate([
 NavigationBar = __decorate([
     customElement('mdui-navigation-bar')
 ], NavigationBar);
+export { NavigationBar };

package/components/navigation-drawer/index.d.ts

@@ -2,7 +2,7 @@ import '@mdui/jq/methods/css.js';
 import '@mdui/jq/methods/innerWidth.js';
 import { LayoutItemBase } from '../layout/layout-item-base.js';
 import type { LayoutPlacement } from '../layout/helper.js';
-import type { CSSResultGroup, TemplateResult } from 'lit';
+import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 /**
  * 在手机端，`modal` 始终为 `true`；大于手机端时，`modal` 属性才开始生效
  *
@@ -66,16 +66,20 @@ export declare class NavigationDrawer extends LayoutItemBase {
     private modalHelper;
     private readonly overlayRef;
     private readonly panelRef;
+    private readonly definedController;
     protected get layoutPlacement(): LayoutPlacement;
     private get lockTarget();
     private get isModal();
     private onContainedChange;
     private onPlacementChange;
+    private onMobileChange;
     private onOpenChange;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
     protected render(): TemplateResult;
     private onOverlayClick;
+    private getLockTargetAnimate;
 }
 declare global {
     interface HTMLElementTagNameMap {