@mdui/shared 1.0.0 → 1.0.2

package/controllers/defined.d.ts

@@ -0,0 +1,69 @@
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+interface Options {
+    /**
+     * 是否在整个页面的 DOM 就绪后，才认为组件已定义完成
+     *
+     * 如果需要操作或读取组件外部、或组件 slot 中的原生 DOM 时，需要设置为 true
+     */
+    needDomReady?: boolean;
+    /**
+     * 是否在指定 Web Components 注册完成后，才认为组件定义完成。则 needDomReady 将默认为 true
+     *
+     * 若值为数组，则监听当前组件 slot 中的组件，如 ['mdui-segmented-button']
+     * 若值为对象，则监听对象键名指定的组件，键值为 true，则监听整个页面的组件；否则监听 slot 中的组件
+     *
+     * 可以在数组中设置空字符串，或在对象中设置空字符串键名，来表示等待所有 Web Components 注册完成
+     */
+    relatedElements?: string[] | {
+        [localName: string]: boolean;
+    };
+}
+/**
+ * 判断组件是否定义完成
+ *
+ * 如果需要在组件操作或读取组件外部、或组件 slot 中的原生 DOM 时，则需要在 DOM 就绪时，才能认为组件定义完成
+ * 如果组件需要和其他组件配合使用，则需要等待其他组件定义完成后，才能认为组件定义完成
+ */
+export declare class DefinedController implements ReactiveController {
+    private host;
+    /**
+     * 组件是否已定义完成
+     */
+    private defined;
+    /**
+     * 是否在 DOM 就绪后，才算组件定义完成
+     */
+    private readonly needDomReady?;
+    /**
+     * 在哪些相关组件定义完成后，才算组件定义完成
+     */
+    private readonly relatedElements?;
+    constructor(host: ReactiveControllerHost & Element, options: Options);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    /**
+     * 判断组件是否定义完成
+     */
+    isDefined(): boolean;
+    /**
+     * 在组件定义完成后，promise 被 resolve
+     */
+    whenDefined(): Promise<void>;
+    /**
+     * slot 中的未完成定义的相关 Web components 组件的 CSS 选择器
+     */
+    private getScopeLocalNameSelector;
+    /**
+     * 整个页面中的未完成定义的相关 Web components 组件的 CSS 选择器
+     */
+    private getGlobalLocalNameSelector;
+    /**
+     * 获取未完成定义的相关 Web components 组件名
+     */
+    private getUndefinedLocalNames;
+    /**
+     * slot 变更时，若 slot 中包含未完成定义的相关 Web components 组件，则组件未定义完成
+     */
+    private onSlotChange;
+}
+export {};

package/controllers/defined.js

@@ -0,0 +1,126 @@
+import { getDocument } from 'ssr-window';
+import { unique } from '@mdui/jq/functions/unique.js';
+import { isDomReady } from '@mdui/jq/shared/dom.js';
+/**
+ * 判断组件是否定义完成
+ *
+ * 如果需要在组件操作或读取组件外部、或组件 slot 中的原生 DOM 时，则需要在 DOM 就绪时，才能认为组件定义完成
+ * 如果组件需要和其他组件配合使用，则需要等待其他组件定义完成后，才能认为组件定义完成
+ */
+export class DefinedController {
+    constructor(host, options) {
+        /**
+         * 组件是否已定义完成
+         */
+        this.defined = false;
+        (this.host = host).addController(this);
+        this.relatedElements = options.relatedElements;
+        this.needDomReady = options.needDomReady || !!options.relatedElements;
+        this.onSlotChange = this.onSlotChange.bind(this);
+    }
+    hostConnected() {
+        this.host.shadowRoot.addEventListener('slotchange', this.onSlotChange);
+    }
+    hostDisconnected() {
+        this.host.shadowRoot.removeEventListener('slotchange', this.onSlotChange);
+    }
+    /**
+     * 判断组件是否定义完成
+     */
+    isDefined() {
+        if (this.defined) {
+            return true;
+        }
+        this.defined =
+            (!this.needDomReady || isDomReady()) &&
+                !this.getUndefinedLocalNames().length;
+        return this.defined;
+    }
+    /**
+     * 在组件定义完成后，promise 被 resolve
+     */
+    async whenDefined() {
+        if (this.defined) {
+            return Promise.resolve();
+        }
+        const document = getDocument();
+        if (this.needDomReady && !isDomReady(document)) {
+            await new Promise((resolve) => {
+                document.addEventListener('DOMContentLoaded', () => resolve(), {
+                    once: true,
+                });
+            });
+        }
+        const undefinedLocalNames = this.getUndefinedLocalNames();
+        if (undefinedLocalNames.length) {
+            const promises = [];
+            undefinedLocalNames.forEach((localName) => {
+                promises.push(customElements.whenDefined(localName));
+            });
+            await Promise.all(promises);
+        }
+        this.defined = true;
+        return;
+    }
+    /**
+     * slot 中的未完成定义的相关 Web components 组件的 CSS 选择器
+     */
+    getScopeLocalNameSelector() {
+        const localNames = this.relatedElements;
+        if (!localNames) {
+            return null;
+        }
+        if (Array.isArray(localNames)) {
+            return localNames
+                .map((localName) => `${localName}:not(:defined)`)
+                .join(',');
+        }
+        return Object.keys(localNames)
+            .filter((localName) => !localNames[localName])
+            .map((localName) => `${localName}:not(:defined)`)
+            .join(',');
+    }
+    /**
+     * 整个页面中的未完成定义的相关 Web components 组件的 CSS 选择器
+     */
+    getGlobalLocalNameSelector() {
+        const localNames = this.relatedElements;
+        if (!localNames || Array.isArray(localNames)) {
+            return null;
+        }
+        return Object.keys(localNames)
+            .filter((localName) => localNames[localName])
+            .map((localName) => `${localName}:not(:defined)`)
+            .join(',');
+    }
+    /**
+     * 获取未完成定义的相关 Web components 组件名
+     */
+    getUndefinedLocalNames() {
+        const scopeSelector = this.getScopeLocalNameSelector();
+        const globalSelector = this.getGlobalLocalNameSelector();
+        const undefinedScopeElements = scopeSelector
+            ? [...this.host.querySelectorAll(scopeSelector)]
+            : [];
+        const undefinedGlobalElements = globalSelector
+            ? [...getDocument().querySelectorAll(globalSelector)]
+            : [];
+        const localNames = [
+            ...undefinedScopeElements,
+            ...undefinedGlobalElements,
+        ].map((element) => element.localName);
+        return unique(localNames);
+    }
+    /**
+     * slot 变更时，若 slot 中包含未完成定义的相关 Web components 组件，则组件未定义完成
+     */
+    onSlotChange() {
+        const selector = this.getScopeLocalNameSelector();
+        if (selector) {
+            const undefinedElements = this.host.querySelectorAll(selector);
+            if (undefinedElements.length) {
+                this.defined = false;
+            }
+        }
+    }
+}

package/controllers/form.d.ts

@@ -21,6 +21,7 @@ export declare class FormController implements ReactiveController {
     private host;
     private form?;
     private options;
+    private definedController;
     constructor(host: ReactiveControllerHost & FormControl, options?: Partial<FormControllerOptions>);
     hostConnected(): void;
     hostDisconnected(): void;

package/controllers/form.js

@@ -4,8 +4,9 @@
 import { $ } from '@mdui/jq/$.js';
 import '@mdui/jq/methods/attr.js';
 import '@mdui/jq/methods/css.js';
-import { formCollections } from '@mdui/jq/shared/form.js';
+import { formCollections, getFormControls } from '@mdui/jq/shared/form.js';
 import { isFunction, isString, isUndefined } from '@mdui/jq/shared/helper.js';
+import { DefinedController } from './defined.js';
 /**
  * 在执行 `<form>` 元素的 reportValidity() 时，不会执行 mdui 组件的 reportValidity() 方法，
  * 因此在 mdui 表单控件的 hostConnected 中把 `<form>` 的 reportValidity 替换为自定义方法，
@@ -25,6 +26,9 @@ export const formResets = new WeakMap();
 export class FormController {
     constructor(host, options) {
         (this.host = host).addController(this);
+        this.definedController = new DefinedController(host, {
+            needDomReady: true,
+        });
         this.options = {
             form: (control) => {
                 const formId = $(control).attr('form');
@@ -48,30 +52,33 @@ export class FormController {
         this.reportFormValidity = this.reportFormValidity.bind(this);
     }
     hostConnected() {
-        this.form = this.options.form(this.host);
-        if (this.form) {
-            this.attachForm(this.form);
-        }
+        this.definedController.whenDefined().then(() => {
+            this.form = this.options.form(this.host);
+            if (this.form) {
+                this.attachForm(this.form);
+            }
+        });
     }
     hostDisconnected() {
         this.detachForm();
     }
     hostUpdated() {
-        const form = this.options.form(this.host);
-        if (!form) {
-            this.detachForm();
-        }
-        if (form && this.form !== form) {
-            this.detachForm();
-            this.attachForm(form);
-        }
+        this.definedController.whenDefined().then(() => {
+            const form = this.options.form(this.host);
+            if (!form) {
+                this.detachForm();
+            }
+            if (form && this.form !== form) {
+                this.detachForm();
+                this.attachForm(form);
+            }
+        });
     }
     /**
      * 获取当前表单控件关联的 `<form>` 元素
      */
     getForm() {
-        var _a;
-        return (_a = this.form) !== null && _a !== void 0 ? _a : null;
+        return this.form ?? null;
     }
     /**
      * 重置整个表单，所有表单控件恢复成默认值
@@ -175,6 +182,7 @@ export class FormController {
             }
         }
     }
+    // todo: 当前组件进行验证的顺序，取决于组件的注册顺序，而不会按在 DOM 中的顺序从上到下验证。如何按 DOM 顺序验证？
     onFormSubmit(event) {
         const disabled = this.options.disabled(this.host);
         const reportValidity = this.options.reportValidity;
@@ -203,7 +211,8 @@ export class FormController {
     }
     reportFormValidity() {
         if (this.form && !this.form.noValidate) {
-            for (const element of this.form.querySelectorAll('*')) {
+            const elements = getFormControls(this.form);
+            for (const element of elements) {
                 if (isFunction(element.reportValidity) && !element.reportValidity()) {
                     return false;
                 }

package/controllers/has-slot.js

@@ -1,3 +1,5 @@
+import { $ } from '@mdui/jq/$.js';
+import { isDomReady } from '@mdui/jq/shared/dom.js';
 /**
  * 检查指定的 slot 是否存在
  */
@@ -10,6 +12,11 @@ export class HasSlotController {
     }
     hostConnected() {
         this.host.shadowRoot.addEventListener('slotchange', this.onSlotChange);
+        if (!isDomReady()) {
+            $(() => {
+                this.host.requestUpdate();
+            });
+        }
     }
     hostDisconnected() {
         this.host.shadowRoot.removeEventListener('slotchange', this.onSlotChange);

package/controllers/hover.d.ts

@@ -17,17 +17,22 @@ export declare class HoverController implements ReactiveController {
     private readonly leaveEventName;
     private mouseEnterItems;
     private mouseLeaveItems;
+    /**
+     * @param host
+     * @param elementRef 检查鼠标是否放在该元素上
+     */
     constructor(host: ReactiveControllerHost & Element, elementRef: Ref<HTMLElement>);
+    hostConnected(): void;
     hostDisconnected(): void;
     /**
      * 指定鼠标移入时的回调函数
-     * @param callback
+     * @param callback 要执行的回调函数
      * @param one 是否仅执行一次
      */
     onMouseEnter(callback: () => void, one?: boolean): void;
     /**
      * 指定鼠标移出时的回调函数
-     * @param callback
+     * @param callback 要执行的回调函数
      * @param one 是否仅执行一次
      */
     onMouseLeave(callback: () => void, one?: boolean): void;

package/controllers/hover.js

@@ -6,6 +6,10 @@ import { uniqueId } from '../helpers/uniqueId.js';
  * 检查当前鼠标是否放在指定元素上，及进入、离开元素执行对于的回调
  */
 export class HoverController {
+    /**
+     * @param host
+     * @param elementRef 检查鼠标是否放在该元素上
+     */
     constructor(host, elementRef) {
         /**
          * 当前鼠标是否放在元素上
@@ -18,25 +22,29 @@ export class HoverController {
         this.mouseLeaveItems = [];
         (this.host = host).addController(this);
         this.elementRef = elementRef;
+    }
+    hostConnected() {
         this.host.updateComplete.then(() => {
             $(this.elementRef.value)
                 .on(this.enterEventName, () => {
                 this.isHover = true;
-                this.mouseEnterItems.forEach((item, index, items) => {
+                for (let i = this.mouseEnterItems.length - 1; i >= 0; i--) {
+                    const item = this.mouseEnterItems[i];
                     item.callback();
                     if (item.one) {
-                        items.splice(index, 1);
+                        this.mouseEnterItems.splice(i, 1);
                     }
-                });
+                }
             })
                 .on(this.leaveEventName, () => {
                 this.isHover = false;
-                this.mouseLeaveItems.forEach((item, index, items) => {
+                for (let i = this.mouseLeaveItems.length - 1; i >= 0; i--) {
+                    const item = this.mouseLeaveItems[i];
                     item.callback();
                     if (item.one) {
-                        items.splice(index, 1);
+                        this.mouseLeaveItems.splice(i, 1);
                     }
-                });
+                }
             });
         });
     }
@@ -45,7 +53,7 @@ export class HoverController {
     }
     /**
      * 指定鼠标移入时的回调函数
-     * @param callback
+     * @param callback 要执行的回调函数
      * @param one 是否仅执行一次
      */
     onMouseEnter(callback, one = false) {
@@ -53,7 +61,7 @@ export class HoverController {
     }
     /**
      * 指定鼠标移出时的回调函数
-     * @param callback
+     * @param callback 要执行的回调函数
      * @param one 是否仅执行一次
      */
     onMouseLeave(callback, one = false) {

package/decorators/default-value.js

@@ -19,7 +19,6 @@ export function defaultValue(propertyName = 'value') {
         const constructor = proto.constructor;
         const attributeChangedCallback = constructor.prototype.attributeChangedCallback;
         constructor.prototype.attributeChangedCallback = function (name, old, value) {
-            var _a;
             const options = constructor.getPropertyOptions(propertyName);
             const attributeName = isString(options.attribute)
                 ? options.attribute
@@ -28,7 +27,7 @@ export function defaultValue(propertyName = 'value') {
                 const converter = options.converter || defaultConverter;
                 const fromAttribute = isFunction(converter)
                     ? converter
-                    : (_a = converter === null || converter === void 0 ? void 0 : converter.fromAttribute) !== null && _a !== void 0 ? _a : defaultConverter.fromAttribute;
+                    : converter?.fromAttribute ?? defaultConverter.fromAttribute;
                 const newValue = fromAttribute(value, options.type);
                 if (this[propertyName] !== newValue) {
                     this[key] = newValue;

package/decorators/watch.d.ts

@@ -1,5 +1,6 @@
 /**
  * watch 装饰器。在 @property 或 @state 属性变更时，且在组件更新前触发
+ * 若初始值为 undefined，则初始状态不会触发；否则初始状态就会先触发一次
  *
  * 如果要等属性变更后，且组件更新完成再执行，可以在函数中执行 `await this.updateComplete`
  * 如果要等组件首次渲染完后再监听属性，可以传入第二个参数 true。或者在函数中通过 `this.hasUpdated` 进行判断

package/decorators/watch.js

@@ -1,5 +1,6 @@
 /**
  * watch 装饰器。在 @property 或 @state 属性变更时，且在组件更新前触发
+ * 若初始值为 undefined，则初始状态不会触发；否则初始状态就会先触发一次
  *
  * 如果要等属性变更后，且组件更新完成再执行，可以在函数中执行 `await this.updateComplete`
  * 如果要等组件首次渲染完后再监听属性，可以传入第二个参数 true。或者在函数中通过 `this.hasUpdated` 进行判断

package/helpers/array.d.ts

@@ -0,0 +1,6 @@
+/**
+ * 检查两个数组是否包含相同的元素，不考虑顺序
+ * @param a
+ * @param b
+ */
+export declare const arraysEqualIgnoreOrder: (a: (string | number | boolean)[], b: (string | number | boolean)[]) => boolean;

package/helpers/array.js

@@ -0,0 +1,13 @@
+/**
+ * 检查两个数组是否包含相同的元素，不考虑顺序
+ * @param a
+ * @param b
+ */
+export const arraysEqualIgnoreOrder = (a, b) => {
+    if (a.length !== b.length) {
+        return false;
+    }
+    const sortedA = [...a].sort();
+    const sortedB = [...b].sort();
+    return sortedA.every((value, index) => value === sortedB[index]);
+};

package/helpers/modal.js

@@ -30,7 +30,7 @@ export class Modal {
             if (!this.element.matches(':focus-within')) {
                 const { start, end } = getTabbableBoundary(this.element);
                 const target = this.tabDirection === 'forward' ? start : end;
-                if (typeof (target === null || target === void 0 ? void 0 : target.focus) === 'function') {
+                if (typeof target?.focus === 'function') {
                     target.focus({ preventScroll: true });
                 }
             }

package/helpers/motion.js

@@ -16,5 +16,11 @@ export const getEasing = (element, name) => {
  */
 export const getDuration = (element, name) => {
     const cssVariableName = `--mdui-motion-duration-${name}`;
-    return parseFloat($(element).css(cssVariableName).trim());
+    const cssValue = $(element).css(cssVariableName).trim().toLowerCase();
+    if (cssValue.endsWith('ms')) {
+        return parseFloat(cssValue);
+    }
+    else {
+        return parseFloat(cssValue) * 1000;
+    }
 };

package/helpers/observeResize.js

@@ -16,8 +16,7 @@ export const observeResize = (target, callback) => {
     const result = {
         unobserve: () => {
             $target.each((_, target) => {
-                var _a;
-                const coArr = (_a = weakMap.get(target)) !== null && _a !== void 0 ? _a : [];
+                const coArr = weakMap.get(target) ?? [];
                 const index = coArr.findIndex((co) => co.key === key);
                 if (index !== -1) {
                     coArr.splice(index, 1);
@@ -47,9 +46,8 @@ export const observeResize = (target, callback) => {
     }
     // 添加监听
     $target.each((_, target) => {
-        var _a;
         observer.observe(target);
-        const coArr = (_a = weakMap.get(target)) !== null && _a !== void 0 ? _a : [];
+        const coArr = weakMap.get(target) ?? [];
         coArr.push({ callback, key });
         weakMap.set(target, coArr);
     });

package/helpers/scroll.d.ts

@@ -1,14 +1,24 @@
 import '@mdui/jq/methods/addClass.js';
+import '@mdui/jq/methods/append.js';
+import '@mdui/jq/methods/appendTo.js';
+import '@mdui/jq/methods/css.js';
+import '@mdui/jq/methods/remove.js';
 import '@mdui/jq/methods/removeClass.js';
+import '@mdui/jq/methods/width.js';
+/**
+ * 获取滚动条宽度
+ * @param fresh 是否重新计算
+ */
+export declare const getScrollBarSize: (fresh?: boolean) => number;
 /**
  * 锁定指定元素，禁止滚动。对同一个元素多次调用此方法，只会锁定一次
- * @param element
+ * @param source 由该元素触发锁定
  * @param target 锁定该元素的滚动状态，默认为 body
  */
-export declare const lockScreen: (element: HTMLElement, target?: HTMLElement) => void;
+export declare const lockScreen: (source: HTMLElement, target?: HTMLElement) => void;
 /**
  * 解除指定元素的滚动状态锁定。
- * @param element
+ * @param source 由该元素触发锁定
  * @param target 锁定该元素的滚动状态，默认为 body
  */
-export declare const unlockScreen: (element: HTMLElement, target?: HTMLElement) => void;
+export declare const unlockScreen: (source: HTMLElement, target?: HTMLElement) => void;

package/helpers/scroll.js

@@ -1,28 +1,86 @@
 import { getDocument } from 'ssr-window';
 import { $ } from '@mdui/jq/$.js';
 import '@mdui/jq/methods/addClass.js';
+import '@mdui/jq/methods/append.js';
+import '@mdui/jq/methods/appendTo.js';
+import '@mdui/jq/methods/css.js';
+import '@mdui/jq/methods/remove.js';
 import '@mdui/jq/methods/removeClass.js';
-const locks = new Set();
-const CSS_CLASS = 'mdui-lock-screen';
+import '@mdui/jq/methods/width.js';
+import { isUndefined } from '@mdui/jq/shared/helper.js';
+// 缓存滚动条宽度
+let scrollBarSizeCached;
+/**
+ * 获取滚动条宽度
+ * @param fresh 是否重新计算
+ */
+export const getScrollBarSize = (fresh) => {
+    if (isUndefined(document)) {
+        return 0;
+    }
+    if (fresh || scrollBarSizeCached === undefined) {
+        const $inner = $('<div>').css({
+            width: '100%',
+            height: '200px',
+        });
+        const $outer = $('<div>')
+            .css({
+            position: 'absolute',
+            top: '0',
+            left: '0',
+            pointerEvents: 'none',
+            visibility: 'hidden',
+            width: '200px',
+            height: '150px',
+            overflow: 'hidden',
+        })
+            .append($inner)
+            .appendTo(document.body);
+        const widthContained = $inner[0].offsetWidth;
+        $outer.css('overflow', 'scroll');
+        let widthScroll = $inner[0].offsetWidth;
+        if (widthContained === widthScroll) {
+            widthScroll = $outer[0].clientWidth;
+        }
+        $outer.remove();
+        scrollBarSizeCached = widthContained - widthScroll;
+    }
+    return scrollBarSizeCached;
+};
+const lockMap = new WeakMap();
+const className = 'mdui-lock-screen';
 /**
  * 锁定指定元素，禁止滚动。对同一个元素多次调用此方法，只会锁定一次
- * @param element
+ * @param source 由该元素触发锁定
  * @param target 锁定该元素的滚动状态，默认为 body
  */
-export const lockScreen = (element, target) => {
+export const lockScreen = (source, target) => {
     const document = getDocument();
-    locks.add(element);
-    $(target || document.body).addClass(CSS_CLASS);
+    target ??= document.body;
+    if (!lockMap.has(target)) {
+        lockMap.set(target, new Set());
+    }
+    const lock = lockMap.get(target);
+    lock.add(source);
+    $(target)
+        .addClass(className)
+        .css('width', `calc(100% - ${getScrollBarSize()}px)`);
 };
 /**
  * 解除指定元素的滚动状态锁定。
- * @param element
+ * @param source 由该元素触发锁定
  * @param target 锁定该元素的滚动状态，默认为 body
  */
-export const unlockScreen = (element, target) => {
+export const unlockScreen = (source, target) => {
     const document = getDocument();
-    locks.delete(element);
-    if (locks.size === 0) {
-        $(target || document.body).removeClass(CSS_CLASS);
+    target ??= document.body;
+    const lock = lockMap.get(target);
+    if (!lock) {
+        return;
+    }
+    lock.delete(source);
+    if (lock.size === 0) {
+        lockMap.delete(target);
+        $(target).removeClass(className).width('');
     }
 };

package/helpers/tabbable.js

@@ -3,7 +3,7 @@ import { getWindow } from 'ssr-window';
 /** Determines if the specified element is tabbable using heuristics inspired by https://github.com/focus-trap/tabbable */
 function isTabbable(el) {
     const window = getWindow();
-    const tag = el.tagName.toLowerCase();
+    const localName = el.localName;
     // Elements with a -1 tab index are not tabbable
     if (el.getAttribute('tabindex') === '-1') {
         return false;
@@ -18,7 +18,7 @@ function isTabbable(el) {
         return false;
     }
     // Radios without a checked attribute are not tabbable
-    if (tag === 'input' &&
+    if (localName === 'input' &&
         el.getAttribute('type') === 'radio' &&
         !el.hasAttribute('checked')) {
         return false;
@@ -32,7 +32,8 @@ function isTabbable(el) {
         return false;
     }
     // Audio and video elements with the controls attribute are tabbable
-    if ((tag === 'audio' || tag === 'video') && el.hasAttribute('controls')) {
+    if ((localName === 'audio' || localName === 'video') &&
+        el.hasAttribute('controls')) {
         return true;
     }
     // Elements with a tabindex other than -1 are tabbable
@@ -54,14 +55,13 @@ function isTabbable(el) {
         'audio',
         'video',
         'summary',
-    ].includes(tag);
+    ].includes(localName);
 }
 /**
  * Returns the first and last bounding elements that are tabbable. This is more performant than checking every single
  * element because it short-circuits after finding the first and last ones.
  */
 export function getTabbableBoundary(root) {
-    var _a, _b;
     const allElements = [];
     function walk(el) {
         if (el instanceof HTMLElement) {
@@ -76,7 +76,7 @@ export function getTabbableBoundary(root) {
     // Collect all elements including the root
     walk(root);
     // Find the first and last tabbable elements
-    const start = (_a = allElements.find((el) => isTabbable(el))) !== null && _a !== void 0 ? _a : null;
-    const end = (_b = allElements.reverse().find((el) => isTabbable(el))) !== null && _b !== void 0 ? _b : null;
+    const start = allElements.find((el) => isTabbable(el)) ?? null;
+    const end = allElements.reverse().find((el) => isTabbable(el)) ?? null;
     return { start, end };
 }

package/icons/arrow-right.js

@@ -3,7 +3,7 @@ import { LitElement } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { style } from './shared/style.js';
 import { svgTag } from './shared/svg-tag.js';
-export let IconArrowRight = class IconArrowRight extends LitElement {
+let IconArrowRight = class IconArrowRight extends LitElement {
     render() {
         return svgTag('<path d="m10 17 5-5-5-5v10z"/>');
     }
@@ -12,3 +12,4 @@ IconArrowRight.styles = style;
 IconArrowRight = __decorate([
     customElement('mdui-icon-arrow-right')
 ], IconArrowRight);
+export { IconArrowRight };

package/icons/cancel--outlined.js

@@ -3,7 +3,7 @@ import { LitElement } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { style } from './shared/style.js';
 import { svgTag } from './shared/svg-tag.js';
-export let IconCancel_Outlined = class IconCancel_Outlined extends LitElement {
+let IconCancel_Outlined = class IconCancel_Outlined extends LitElement {
     render() {
         return svgTag('<path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z"/>');
     }
@@ -12,3 +12,4 @@ IconCancel_Outlined.styles = style;
 IconCancel_Outlined = __decorate([
     customElement('mdui-icon-cancel--outlined')
 ], IconCancel_Outlined);
+export { IconCancel_Outlined };

package/icons/check-box-outline-blank.js

@@ -3,7 +3,7 @@ import { LitElement } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { style } from './shared/style.js';
 import { svgTag } from './shared/svg-tag.js';
-export let IconCheckBoxOutlineBlank = class IconCheckBoxOutlineBlank extends LitElement {
+let IconCheckBoxOutlineBlank = class IconCheckBoxOutlineBlank extends LitElement {
     render() {
         return svgTag('<path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/>');
     }
@@ -12,3 +12,4 @@ IconCheckBoxOutlineBlank.styles = style;
 IconCheckBoxOutlineBlank = __decorate([
     customElement('mdui-icon-check-box-outline-blank')
 ], IconCheckBoxOutlineBlank);
+export { IconCheckBoxOutlineBlank };

package/icons/check-box.js

@@ -3,7 +3,7 @@ import { LitElement } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { style } from './shared/style.js';
 import { svgTag } from './shared/svg-tag.js';
-export let IconCheckBox = class IconCheckBox extends LitElement {
+let IconCheckBox = class IconCheckBox extends LitElement {
     render() {
         return svgTag('<path d="M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zm-9 14-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>');
     }
@@ -12,3 +12,4 @@ IconCheckBox.styles = style;
 IconCheckBox = __decorate([
     customElement('mdui-icon-check-box')
 ], IconCheckBox);
+export { IconCheckBox };

package/icons/check.js

@@ -3,7 +3,7 @@ import { LitElement } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { style } from './shared/style.js';
 import { svgTag } from './shared/svg-tag.js';
-export let IconCheck = class IconCheck extends LitElement {
+let IconCheck = class IconCheck extends LitElement {
     render() {
         return svgTag('<path d="M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>');
     }
@@ -12,3 +12,4 @@ IconCheck.styles = style;
 IconCheck = __decorate([
     customElement('mdui-icon-check')
 ], IconCheck);
+export { IconCheck };

package/icons/circle.js

@@ -3,7 +3,7 @@ import { LitElement } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { style } from './shared/style.js';
 import { svgTag } from './shared/svg-tag.js';
-export let IconCircle = class IconCircle extends LitElement {
+let IconCircle = class IconCircle extends LitElement {
     render() {
         return svgTag('<path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2z"/>');
     }
@@ -12,3 +12,4 @@ IconCircle.styles = style;
 IconCircle = __decorate([
     customElement('mdui-icon-circle')
 ], IconCircle);
+export { IconCircle };

package/icons/clear.js

@@ -3,7 +3,7 @@ import { LitElement } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { style } from './shared/style.js';
 import { svgTag } from './shared/svg-tag.js';
-export let IconClear = class IconClear extends LitElement {
+let IconClear = class IconClear extends LitElement {
     render() {
         return svgTag('<path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>');
     }
@@ -12,3 +12,4 @@ IconClear.styles = style;
 IconClear = __decorate([
     customElement('mdui-icon-clear')
 ], IconClear);
+export { IconClear };

package/icons/error.js

@@ -3,7 +3,7 @@ import { LitElement } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { style } from './shared/style.js';
 import { svgTag } from './shared/svg-tag.js';
-export let IconError = class IconError extends LitElement {
+let IconError = class IconError extends LitElement {
     render() {
         return svgTag('<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>');
     }
@@ -12,3 +12,4 @@ IconError.styles = style;
 IconError = __decorate([
     customElement('mdui-icon-error')
 ], IconError);
+export { IconError };

package/icons/indeterminate-check-box.js

@@ -3,7 +3,7 @@ import { LitElement } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { style } from './shared/style.js';
 import { svgTag } from './shared/svg-tag.js';
-export let IconIndeterminateCheckBox = class IconIndeterminateCheckBox extends LitElement {
+let IconIndeterminateCheckBox = class IconIndeterminateCheckBox extends LitElement {
     render() {
         return svgTag('<path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10H7v-2h10v2z"/>');
     }
@@ -12,3 +12,4 @@ IconIndeterminateCheckBox.styles = style;
 IconIndeterminateCheckBox = __decorate([
     customElement('mdui-icon-indeterminate-check-box')
 ], IconIndeterminateCheckBox);
+export { IconIndeterminateCheckBox };

package/icons/radio-button-unchecked.js

@@ -3,7 +3,7 @@ import { LitElement } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { style } from './shared/style.js';
 import { svgTag } from './shared/svg-tag.js';
-export let IconRadioButtonUnchecked = class IconRadioButtonUnchecked extends LitElement {
+let IconRadioButtonUnchecked = class IconRadioButtonUnchecked extends LitElement {
     render() {
         return svgTag('<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/>');
     }
@@ -12,3 +12,4 @@ IconRadioButtonUnchecked.styles = style;
 IconRadioButtonUnchecked = __decorate([
     customElement('mdui-icon-radio-button-unchecked')
 ], IconRadioButtonUnchecked);
+export { IconRadioButtonUnchecked };

package/icons/visibility-off.js

@@ -3,7 +3,7 @@ import { LitElement } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { style } from './shared/style.js';
 import { svgTag } from './shared/svg-tag.js';
-export let IconVisibilityOff = class IconVisibilityOff extends LitElement {
+let IconVisibilityOff = class IconVisibilityOff extends LitElement {
     render() {
         return svgTag('<path d="M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46A11.804 11.804 0 0 0 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78 3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z"/>');
     }
@@ -12,3 +12,4 @@ IconVisibilityOff.styles = style;
 IconVisibilityOff = __decorate([
     customElement('mdui-icon-visibility-off')
 ], IconVisibilityOff);
+export { IconVisibilityOff };

package/icons/visibility.js

@@ -3,7 +3,7 @@ import { LitElement } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { style } from './shared/style.js';
 import { svgTag } from './shared/svg-tag.js';
-export let IconVisibility = class IconVisibility extends LitElement {
+let IconVisibility = class IconVisibility extends LitElement {
     render() {
         return svgTag('<path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/>');
     }
@@ -12,3 +12,4 @@ IconVisibility.styles = style;
 IconVisibility = __decorate([
     customElement('mdui-icon-visibility')
 ], IconVisibility);
+export { IconVisibility };

package/mixins/anchor.d.ts

@@ -8,7 +8,7 @@ type RenderAnchorOptions = {
     className?: string;
     part?: string;
     content?: TemplateResult | typeof nothing | (TemplateResult | typeof nothing)[];
-    tabindex?: number;
+    tabIndex?: number;
     refDirective?: DirectiveResult<typeof RefDirective>;
 };
 export declare class AnchorMixinInterface extends LitElement {

package/mixins/anchor.js

@@ -4,8 +4,8 @@ import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 export const AnchorMixin = (superclass) => {
     class AnchorMixinClass extends superclass {
-        renderAnchor({ id, className, part, content = html `<slot></slot>`, refDirective, }) {
-            return html `<a ${refDirective} id="${ifDefined(id)}" class="_a ${className ? className : ''}" part="${ifDefined(part)}" href="${ifDefined(this.href)}" download="${ifDefined(this.download)}" target="${ifDefined(this.target)}" rel="${ifDefined(this.rel)}">${content}</a>`;
+        renderAnchor({ id, className, part, content = html `<slot></slot>`, refDirective, tabIndex, }) {
+            return html `<a ${refDirective} id="${ifDefined(id)}" class="_a ${className ? className : ''}" part="${ifDefined(part)}" href="${ifDefined(this.href)}" download="${ifDefined(this.download)}" target="${ifDefined(this.target)}" rel="${ifDefined(this.rel)}" tabindex="${ifDefined(tabIndex)}">${content}</a>`;
         }
     }
     __decorate([

package/mixins/focusable.d.ts

@@ -14,6 +14,6 @@ export declare class FocusableMixinInterface extends LitElement {
     click(): void;
 }
 /**
- * 参考：https://github.com/adobe/spectrum-web-components/blob/main/packages/shared/src/focusable.ts
+ * 参考：https://github.com/adobe/spectrum-web-components/blob/main/tools/shared/src/focusable.ts
  */
 export declare const FocusableMixin: <T extends Constructor<LitElement>>(superclass: T) => Constructor<FocusableMixinInterface> & T;

package/mixins/focusable.js

@@ -6,6 +6,7 @@ import '@mdui/jq/methods/attr.js';
 import '@mdui/jq/methods/css.js';
 import '@mdui/jq/methods/each.js';
 import '@mdui/jq/methods/removeAttr.js';
+import { DefinedController } from '../controllers/defined.js';
 import { booleanConverter } from '../helpers/decorator.js';
 let isClick = true;
 const document = getDocument();
@@ -16,7 +17,7 @@ document.addEventListener('keydown', () => {
     isClick = false;
 });
 /**
- * 参考：https://github.com/adobe/spectrum-web-components/blob/main/packages/shared/src/focusable.ts
+ * 参考：https://github.com/adobe/spectrum-web-components/blob/main/tools/shared/src/focusable.ts
  */
 export const FocusableMixin = (superclass) => {
     class FocusableMixinClass extends superclass {
@@ -36,6 +37,7 @@ export const FocusableMixin = (superclass) => {
              * 添加到 :host 元素上，供 CSS 选择器添加样式
              */
             this.focusVisible = false;
+            this.focusableDefinedController = new DefinedController(this, { relatedElements: [''] });
             this._manipulatingTabindex = false;
             this._tabIndex = 0;
         }
@@ -244,7 +246,7 @@ export const FocusableMixin = (superclass) => {
         })
     ], FocusableMixinClass.prototype, "focusVisible", void 0);
     __decorate([
-        property({ type: Number, reflect: true, attribute: 'tabindex' })
+        property({ type: Number })
     ], FocusableMixinClass.prototype, "tabIndex", null);
     // @ts-ignore
     return FocusableMixinClass;

package/mixins/scrollBehavior.d.ts

@@ -1,4 +1,5 @@
 import '@mdui/jq/methods/css.js';
+import { DefinedController } from '../controllers/defined.js';
 import type { JQ } from '@mdui/jq/shared/core.js';
 import type { Constructor } from '@open-wc/dedupe-mixin';
 import type { LitElement } from 'lit';
@@ -8,6 +9,7 @@ export declare class ScrollBehaviorMixinInterface extends LitElement {
     scrollTarget?: string | HTMLElement | JQ<HTMLElement>;
     scrollBehavior?: ScrollBehavior;
     scrollThreshold?: number;
+    protected scrollBehaviorDefinedController: DefinedController;
     protected updateContainerPadding(): void;
     protected hasScrollBehavior(behavior: ScrollBehavior | ScrollBehavior[]): boolean;
 }

package/mixins/scrollBehavior.js

@@ -3,6 +3,7 @@ import { property } from 'lit/decorators.js';
 import { $ } from '@mdui/jq/$.js';
 import '@mdui/jq/methods/css.js';
 import { isNodeName } from '@mdui/jq/shared/helper.js';
+import { DefinedController } from '../controllers/defined.js';
 import { watch } from '../decorators/watch.js';
 /**
  * 滚动行为
@@ -18,6 +19,9 @@ export const ScrollBehaviorMixin = (superclass) => {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         constructor(...args) {
             super(...args);
+            this.scrollBehaviorDefinedController = new DefinedController(this, {
+                needDomReady: true,
+            });
             /**
              * 上次滚动后，垂直方向的距离（滚动距离超过 scrollThreshold 才记录）
              */
@@ -38,7 +42,8 @@ export const ScrollBehaviorMixin = (superclass) => {
         get scrollPaddingPosition() {
             throw new Error('Must implement scrollPaddingPosition getter');
         }
-        onScrollTargetChange(oldValue, newValue) {
+        async onScrollTargetChange(oldValue, newValue) {
+            await this.scrollBehaviorDefinedController.whenDefined();
             // 仅在有值切换到无值、或无值切换到有值时，更新
             if ((oldValue && !newValue) || (!oldValue && newValue)) {
                 this.updateContainerPadding();
@@ -56,7 +61,8 @@ export const ScrollBehaviorMixin = (superclass) => {
                 newListening.addEventListener('scroll', this.onListeningScroll);
             }
         }
-        onScrollBehaviorChange(oldValue, newValue) {
+        async onScrollBehaviorChange(oldValue, newValue) {
+            await this.scrollBehaviorDefinedController.whenDefined();
             // 仅在有值切换到无值、或无值切换到有值时，更新
             if ((oldValue && !newValue) || (!oldValue && newValue)) {
                 this.updateContainerPadding();
@@ -75,12 +81,16 @@ export const ScrollBehaviorMixin = (superclass) => {
         }
         connectedCallback() {
             super.connectedCallback();
-            this.isParentLayout = isNodeName(this.parentElement, 'mdui-layout');
-            this.updateContainerPadding();
+            this.scrollBehaviorDefinedController.whenDefined().then(() => {
+                this.isParentLayout = isNodeName(this.parentElement, 'mdui-layout');
+                this.updateContainerPadding();
+            });
         }
         disconnectedCallback() {
             super.disconnectedCallback();
-            this.updateContainerPadding(false);
+            this.scrollBehaviorDefinedController.whenDefined().then(() => {
+                this.updateContainerPadding(false);
+            });
         }
         /**
          * scrollBehavior 包含多个滚动行为，用空格分割
@@ -88,8 +98,8 @@ export const ScrollBehaviorMixin = (superclass) => {
          * @param behavior 为数组时，只要其中一个行为在 scrollBehavior 中，即返回 `true`
          */
         hasScrollBehavior(behavior) {
-            var _a, _b;
-            const behaviors = ((_b = (_a = this.scrollBehavior) === null || _a === void 0 ? void 0 : _a.split(' ')) !== null && _b !== void 0 ? _b : []);
+            const behaviors = (this.scrollBehavior?.split(' ') ??
+                []);
             if (Array.isArray(behavior)) {
                 return !!behaviors.filter((v) => behavior.includes(v)).length;
             }
@@ -146,8 +156,7 @@ export const ScrollBehaviorMixin = (superclass) => {
          * 滚动事件，这里过滤掉不符合条件的滚动
          */
         onScroll(listening) {
-            var _a;
-            const scrollTop = (_a = listening.scrollY) !== null && _a !== void 0 ? _a : listening.scrollTop;
+            const scrollTop = listening.scrollY ?? listening.scrollTop;
             // 无视 scrollThreshold 的回调
             if (this.lastScrollTopNoThreshold !== scrollTop) {
                 this.runScrollNoThreshold(scrollTop < this.lastScrollTopNoThreshold, scrollTop);
@@ -165,9 +174,8 @@ export const ScrollBehaviorMixin = (superclass) => {
          * 用于在 scrollTarget、scrollBehavior 变更时，重新设置 lastScrollTopThreshold、lastScrollTopNoThreshold 的初始值
          */
         updateScrollTop(listening) {
-            var _a;
             this.lastScrollTopThreshold = this.lastScrollTopNoThreshold =
-                (_a = listening.scrollY) !== null && _a !== void 0 ? _a : listening.scrollTop;
+                listening.scrollY ?? listening.scrollTop;
         }
         /**
          * 获取组件需要监听哪个元素的滚动状态

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mdui/shared",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "mdui 项目的公共部分",
   "type": "module",
   "files": [
@@ -26,10 +26,10 @@
   },
   "homepage": "https://github.com/zdhxiong/mdui#readme",
   "dependencies": {
-    "@open-wc/dedupe-mixin": "^1.3.1",
-    "lit": "^2.7.5",
+    "@open-wc/dedupe-mixin": "^1.4.0",
+    "lit": "^3.0.0",
     "ssr-window": "^4.0.2",
-    "tslib": "^2.6.0",
-    "@mdui/jq": "3.0.0"
+    "tslib": "^2.6.2",
+    "@mdui/jq": "^3.0.1"
   }
 }