@lynx-js/web-elements 0.9.0 → 0.10.0

package/dist/elements/XList/ListItemAttributes.js

@@ -0,0 +1,31 @@
+import { __esDecorate, __runInitializers } from "tslib";
+/*
+// Copyright 2024 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+*/
+import { registerAttributeHandler, bindToStyle, } from '../../element-reactive/index.js';
+let ListItemAttributes = (() => {
+    let __handlerEstimatedMainAxisSizePx_decorators;
+    let __handlerEstimatedMainAxisSizePx_initializers = [];
+    let __handlerEstimatedMainAxisSizePx_extraInitializers = [];
+    return class ListItemAttributes {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            __handlerEstimatedMainAxisSizePx_decorators = [registerAttributeHandler('estimated-main-axis-size-px', true)];
+            __esDecorate(null, null, __handlerEstimatedMainAxisSizePx_decorators, { kind: "field", name: "_handlerEstimatedMainAxisSizePx", static: false, private: false, access: { has: obj => "_handlerEstimatedMainAxisSizePx" in obj, get: obj => obj._handlerEstimatedMainAxisSizePx, set: (obj, value) => { obj._handlerEstimatedMainAxisSizePx = value; } }, metadata: _metadata }, __handlerEstimatedMainAxisSizePx_initializers, __handlerEstimatedMainAxisSizePx_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static observedAttributes = [
+            'estimated-main-axis-size-px',
+        ];
+        #dom;
+        _handlerEstimatedMainAxisSizePx = __runInitializers(this, __handlerEstimatedMainAxisSizePx_initializers, bindToStyle(() => this.#dom, '--estimated-main-axis-size-px', (v) => `${parseFloat(v)}px`));
+        constructor(dom) {
+            __runInitializers(this, __handlerEstimatedMainAxisSizePx_extraInitializers);
+            this.#dom = dom;
+        }
+    };
+})();
+export { ListItemAttributes };
+//# sourceMappingURL=ListItemAttributes.js.map

package/dist/{XList → elements/XList}/XList.js

@@ -4,13 +4,13 @@ import { __esDecorate, __runInitializers } from "tslib";
 // Licensed under the Apache License Version 2.0 that can be found in the
 // LICENSE file in the root directory of this source tree.
 */
-import { Component, genDomGetter } from '@lynx-js/web-elements-reactive';
+import { Component, genDomGetter } from '../../element-reactive/index.js';
 import { XListAttributes } from './XListAttributes.js';
 import { XListEvents } from './XListEvents.js';
 import { XListWaterfall } from './XListWaterfall.js';
 import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 import { commonComponentEventSetting } from '../common/commonEventInitConfiguration.js';
-import { templateXList } from '@lynx-js/web-elements-template';
+import { templateXList } from '../htmlTemplates.js';
 let XList = (() => {
     let _classDecorators = [Component('x-list', [CommonEventsAndMethods, XListAttributes, XListEvents, XListWaterfall], templateXList)];
     let _classDescriptor;

package/dist/{XList → elements/XList}/XListAttributes.d.ts

@@ -1,8 +1,10 @@
-import { type AttributeReactiveClass } from '@lynx-js/web-elements-reactive';
+import { type AttributeReactiveClass } from '../../element-reactive/index.js';
 import type { XList } from './XList.js';
 export declare class XListAttributes implements InstanceType<AttributeReactiveClass<typeof HTMLElement>> {
     #private;
     static observedAttributes: string[];
+    _handlerStickyOffset: (this: void, newVal: string | null) => void;
+    _handlerCount: (this: void, newVal: string | null) => void;
     constructor(dom: XList);
     connectedCallback(): void;
 }

package/dist/{XList → elements/XList}/XListAttributes.js

@@ -4,21 +4,21 @@ import { __esDecorate, __runInitializers } from "tslib";
 // Licensed under the Apache License Version 2.0 that can be found in the
 // LICENSE file in the root directory of this source tree.
 */
-import { bindToStyle, boostedQueueMicrotask, registerAttributeHandler, } from '@lynx-js/web-elements-reactive';
+import { bindToStyle, boostedQueueMicrotask, registerAttributeHandler, } from '../../element-reactive/index.js';
 let XListAttributes = (() => {
-    let _private_handlerStickyOffset_decorators;
-    let _private_handlerStickyOffset_initializers = [];
-    let _private_handlerStickyOffset_extraInitializers = [];
-    let _private_handlerCount_decorators;
-    let _private_handlerCount_initializers = [];
-    let _private_handlerCount_extraInitializers = [];
+    let __handlerStickyOffset_decorators;
+    let __handlerStickyOffset_initializers = [];
+    let __handlerStickyOffset_extraInitializers = [];
+    let __handlerCount_decorators;
+    let __handlerCount_initializers = [];
+    let __handlerCount_extraInitializers = [];
     return class XListAttributes {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
-            _private_handlerStickyOffset_decorators = [registerAttributeHandler('sticky-offset', true)];
-            _private_handlerCount_decorators = [registerAttributeHandler('span-count', true), registerAttributeHandler('column-count', true)];
-            __esDecorate(null, null, _private_handlerStickyOffset_decorators, { kind: "field", name: "#handlerStickyOffset", static: false, private: true, access: { has: obj => #handlerStickyOffset in obj, get: obj => obj.#handlerStickyOffset, set: (obj, value) => { obj.#handlerStickyOffset = value; } }, metadata: _metadata }, _private_handlerStickyOffset_initializers, _private_handlerStickyOffset_extraInitializers);
-            __esDecorate(null, null, _private_handlerCount_decorators, { kind: "field", name: "#handlerCount", static: false, private: true, access: { has: obj => #handlerCount in obj, get: obj => obj.#handlerCount, set: (obj, value) => { obj.#handlerCount = value; } }, metadata: _metadata }, _private_handlerCount_initializers, _private_handlerCount_extraInitializers);
+            __handlerStickyOffset_decorators = [registerAttributeHandler('sticky-offset', true)];
+            __handlerCount_decorators = [registerAttributeHandler('span-count', true), registerAttributeHandler('column-count', true)];
+            __esDecorate(null, null, __handlerStickyOffset_decorators, { kind: "field", name: "_handlerStickyOffset", static: false, private: false, access: { has: obj => "_handlerStickyOffset" in obj, get: obj => obj._handlerStickyOffset, set: (obj, value) => { obj._handlerStickyOffset = value; } }, metadata: _metadata }, __handlerStickyOffset_initializers, __handlerStickyOffset_extraInitializers);
+            __esDecorate(null, null, __handlerCount_decorators, { kind: "field", name: "_handlerCount", static: false, private: false, access: { has: obj => "_handlerCount" in obj, get: obj => obj._handlerCount, set: (obj, value) => { obj._handlerCount = value; } }, metadata: _metadata }, __handlerCount_initializers, __handlerCount_extraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
         static observedAttributes = [
@@ -28,10 +28,10 @@ let XListAttributes = (() => {
             'column-count',
         ];
         #dom;
-        #handlerStickyOffset = __runInitializers(this, _private_handlerStickyOffset_initializers, bindToStyle(() => this.#dom, '--list-item-sticky-offset', (v) => `${parseFloat(v)}px`));
-        #handlerCount = (__runInitializers(this, _private_handlerStickyOffset_extraInitializers), __runInitializers(this, _private_handlerCount_initializers, bindToStyle(() => this.#dom, '--list-item-span-count', (v) => `${parseFloat(v)}`)));
+        _handlerStickyOffset = __runInitializers(this, __handlerStickyOffset_initializers, bindToStyle(() => this.#dom, '--list-item-sticky-offset', (v) => `${parseFloat(v)}px`));
+        _handlerCount = (__runInitializers(this, __handlerStickyOffset_extraInitializers), __runInitializers(this, __handlerCount_initializers, bindToStyle(() => this.#dom, '--list-item-span-count', (v) => `${parseFloat(v)}`)));
         constructor(dom) {
-            __runInitializers(this, _private_handlerCount_extraInitializers);
+            __runInitializers(this, __handlerCount_extraInitializers);
             this.#dom = dom;
         }
         connectedCallback() {

package/dist/elements/XList/XListEvents.d.ts

@@ -0,0 +1,14 @@
+import { type AttributeReactiveClass } from '../../element-reactive/index.js';
+import type { XList } from './XList.js';
+export declare class XListEvents implements InstanceType<AttributeReactiveClass<typeof HTMLElement>> {
+    #private;
+    static observedAttributes: string[];
+    _updateEventSwitches: (enableScrollToUpper: boolean) => void;
+    _handleUpperThresholdItemCountChange(newValue: string | null, oldValue: string | null): void;
+    _updateScrollToLowerEventSwitches: (enableScrollToLower: boolean) => void;
+    _handleLowerThresholdItemCountChange(newValue: string | null, oldValue: string | null): void;
+    _handleScrollEventsSwitches: (enabled: boolean, name: string) => void;
+    _handleScrollToUpperEdgeEventEnable: (enabled: boolean) => void;
+    _handleScrollToLowerEdgeEventEnable: (enabled: boolean) => void;
+    constructor(dom: XList);
+}

package/dist/{XList → elements/XList}/XListEvents.js

@@ -1,84 +1,51 @@
-import { __esDecorate, __runInitializers, __setFunctionName } from "tslib";
+import { __esDecorate, __runInitializers } from "tslib";
 /*
 // Copyright 2024 The Lynx Authors. All rights reserved.
 // Licensed under the Apache License Version 2.0 that can be found in the
 // LICENSE file in the root directory of this source tree.
 */
-import { genDomGetter, registerAttributeHandler, } from '@lynx-js/web-elements-reactive';
+import { genDomGetter, registerAttributeHandler, } from '../../element-reactive/index.js';
 import { commonComponentEventSetting } from '../common/commonEventInitConfiguration.js';
 import { throttle } from '../common/throttle.js';
 import { bindToIntersectionObserver } from '../common/bindToIntersectionObserver.js';
 import { useScrollEnd } from '../common/constants.js';
-import { registerEventEnableStatusChangeHandler } from '@lynx-js/web-elements-reactive';
+import { registerEventEnableStatusChangeHandler } from '../../element-reactive/index.js';
 let XListEvents = (() => {
     let _instanceExtraInitializers = [];
-    let _private_updateEventSwitches_decorators;
-    let _private_updateEventSwitches_initializers = [];
-    let _private_updateEventSwitches_extraInitializers = [];
-    let _private_handleUpperThresholdItemCountChange_decorators;
-    let _private_handleUpperThresholdItemCountChange_descriptor;
-    let _private_updateScrollToLowerEventSwitches_decorators;
-    let _private_updateScrollToLowerEventSwitches_initializers = [];
-    let _private_updateScrollToLowerEventSwitches_extraInitializers = [];
-    let _private_handleLowerThresholdItemCountChange_decorators;
-    let _private_handleLowerThresholdItemCountChange_descriptor;
-    let _private_handleScrollEventsSwitches_decorators;
-    let _private_handleScrollEventsSwitches_initializers = [];
-    let _private_handleScrollEventsSwitches_extraInitializers = [];
-    let _private_handleScrollToUpperEdgeEventEnable_decorators;
-    let _private_handleScrollToUpperEdgeEventEnable_initializers = [];
-    let _private_handleScrollToUpperEdgeEventEnable_extraInitializers = [];
-    let _private_handleScrollToLowerEdgeEventEnable_decorators;
-    let _private_handleScrollToLowerEdgeEventEnable_initializers = [];
-    let _private_handleScrollToLowerEdgeEventEnable_extraInitializers = [];
+    let __updateEventSwitches_decorators;
+    let __updateEventSwitches_initializers = [];
+    let __updateEventSwitches_extraInitializers = [];
+    let __handleUpperThresholdItemCountChange_decorators;
+    let __updateScrollToLowerEventSwitches_decorators;
+    let __updateScrollToLowerEventSwitches_initializers = [];
+    let __updateScrollToLowerEventSwitches_extraInitializers = [];
+    let __handleLowerThresholdItemCountChange_decorators;
+    let __handleScrollEventsSwitches_decorators;
+    let __handleScrollEventsSwitches_initializers = [];
+    let __handleScrollEventsSwitches_extraInitializers = [];
+    let __handleScrollToUpperEdgeEventEnable_decorators;
+    let __handleScrollToUpperEdgeEventEnable_initializers = [];
+    let __handleScrollToUpperEdgeEventEnable_extraInitializers = [];
+    let __handleScrollToLowerEdgeEventEnable_decorators;
+    let __handleScrollToLowerEdgeEventEnable_initializers = [];
+    let __handleScrollToLowerEdgeEventEnable_extraInitializers = [];
     return class XListEvents {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
-            _private_updateEventSwitches_decorators = [registerEventEnableStatusChangeHandler('scrolltoupper')];
-            _private_handleUpperThresholdItemCountChange_decorators = [registerAttributeHandler('upper-threshold-item-count', true)];
-            _private_updateScrollToLowerEventSwitches_decorators = [registerEventEnableStatusChangeHandler('scrolltolower')];
-            _private_handleLowerThresholdItemCountChange_decorators = [registerAttributeHandler('lower-threshold-item-count', true)];
-            _private_handleScrollEventsSwitches_decorators = [registerEventEnableStatusChangeHandler('lynxscroll'), registerEventEnableStatusChangeHandler('lynxscrollend'), registerEventEnableStatusChangeHandler('snap')];
-            _private_handleScrollToUpperEdgeEventEnable_decorators = [registerEventEnableStatusChangeHandler('scrolltoupperedge')];
-            _private_handleScrollToLowerEdgeEventEnable_decorators = [registerEventEnableStatusChangeHandler('scrolltoloweredge')];
-            __esDecorate(this, _private_handleUpperThresholdItemCountChange_descriptor = { value: __setFunctionName(function (newValue, oldValue) {
-                    const oldItemCount = oldValue !== null
-                        ? parseFloat(oldValue)
-                        : 0;
-                    const oldObserverDom = oldItemCount === 0
-                        ? this.#getUpperThresholdObserverDom()
-                        : this.#dom.children[oldItemCount - 1];
-                    oldObserverDom && this.#upperObserver?.unobserve(oldObserverDom);
-                    const itemCount = newValue !== null
-                        ? parseFloat(newValue)
-                        : 0;
-                    const observerDom = itemCount === 0
-                        ? this.#getUpperThresholdObserverDom()
-                        : this.#dom.children[itemCount - 1];
-                    observerDom && this.#upperObserver?.observe(observerDom);
-                }, "#handleUpperThresholdItemCountChange") }, _private_handleUpperThresholdItemCountChange_decorators, { kind: "method", name: "#handleUpperThresholdItemCountChange", static: false, private: true, access: { has: obj => #handleUpperThresholdItemCountChange in obj, get: obj => obj.#handleUpperThresholdItemCountChange }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __esDecorate(this, _private_handleLowerThresholdItemCountChange_descriptor = { value: __setFunctionName(function (newValue, oldValue) {
-                    const oldItemCount = oldValue !== null
-                        ? parseFloat(oldValue)
-                        : 0;
-                    const oldObserverDom = oldItemCount === 0
-                        ? this.#getLowerThresholdObserverDom()
-                        : this.#dom.children[this.#dom.children.length - oldItemCount];
-                    oldObserverDom && this.#lowerObserver?.unobserve(oldObserverDom);
-                    const itemCount = newValue !== null
-                        ? parseFloat(newValue)
-                        : 0;
-                    const observerDom = itemCount === 0
-                        ? this.#getLowerThresholdObserverDom()
-                        : this.#dom.children[this.#dom.children.length
-                            - itemCount];
-                    observerDom && this.#lowerObserver?.observe(observerDom);
-                }, "#handleLowerThresholdItemCountChange") }, _private_handleLowerThresholdItemCountChange_decorators, { kind: "method", name: "#handleLowerThresholdItemCountChange", static: false, private: true, access: { has: obj => #handleLowerThresholdItemCountChange in obj, get: obj => obj.#handleLowerThresholdItemCountChange }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __esDecorate(null, null, _private_updateEventSwitches_decorators, { kind: "field", name: "#updateEventSwitches", static: false, private: true, access: { has: obj => #updateEventSwitches in obj, get: obj => obj.#updateEventSwitches, set: (obj, value) => { obj.#updateEventSwitches = value; } }, metadata: _metadata }, _private_updateEventSwitches_initializers, _private_updateEventSwitches_extraInitializers);
-            __esDecorate(null, null, _private_updateScrollToLowerEventSwitches_decorators, { kind: "field", name: "#updateScrollToLowerEventSwitches", static: false, private: true, access: { has: obj => #updateScrollToLowerEventSwitches in obj, get: obj => obj.#updateScrollToLowerEventSwitches, set: (obj, value) => { obj.#updateScrollToLowerEventSwitches = value; } }, metadata: _metadata }, _private_updateScrollToLowerEventSwitches_initializers, _private_updateScrollToLowerEventSwitches_extraInitializers);
-            __esDecorate(null, null, _private_handleScrollEventsSwitches_decorators, { kind: "field", name: "#handleScrollEventsSwitches", static: false, private: true, access: { has: obj => #handleScrollEventsSwitches in obj, get: obj => obj.#handleScrollEventsSwitches, set: (obj, value) => { obj.#handleScrollEventsSwitches = value; } }, metadata: _metadata }, _private_handleScrollEventsSwitches_initializers, _private_handleScrollEventsSwitches_extraInitializers);
-            __esDecorate(null, null, _private_handleScrollToUpperEdgeEventEnable_decorators, { kind: "field", name: "#handleScrollToUpperEdgeEventEnable", static: false, private: true, access: { has: obj => #handleScrollToUpperEdgeEventEnable in obj, get: obj => obj.#handleScrollToUpperEdgeEventEnable, set: (obj, value) => { obj.#handleScrollToUpperEdgeEventEnable = value; } }, metadata: _metadata }, _private_handleScrollToUpperEdgeEventEnable_initializers, _private_handleScrollToUpperEdgeEventEnable_extraInitializers);
-            __esDecorate(null, null, _private_handleScrollToLowerEdgeEventEnable_decorators, { kind: "field", name: "#handleScrollToLowerEdgeEventEnable", static: false, private: true, access: { has: obj => #handleScrollToLowerEdgeEventEnable in obj, get: obj => obj.#handleScrollToLowerEdgeEventEnable, set: (obj, value) => { obj.#handleScrollToLowerEdgeEventEnable = value; } }, metadata: _metadata }, _private_handleScrollToLowerEdgeEventEnable_initializers, _private_handleScrollToLowerEdgeEventEnable_extraInitializers);
+            __updateEventSwitches_decorators = [registerEventEnableStatusChangeHandler('scrolltoupper')];
+            __handleUpperThresholdItemCountChange_decorators = [registerAttributeHandler('upper-threshold-item-count', true)];
+            __updateScrollToLowerEventSwitches_decorators = [registerEventEnableStatusChangeHandler('scrolltolower')];
+            __handleLowerThresholdItemCountChange_decorators = [registerAttributeHandler('lower-threshold-item-count', true)];
+            __handleScrollEventsSwitches_decorators = [registerEventEnableStatusChangeHandler('lynxscroll'), registerEventEnableStatusChangeHandler('lynxscrollend'), registerEventEnableStatusChangeHandler('snap')];
+            __handleScrollToUpperEdgeEventEnable_decorators = [registerEventEnableStatusChangeHandler('scrolltoupperedge')];
+            __handleScrollToLowerEdgeEventEnable_decorators = [registerEventEnableStatusChangeHandler('scrolltoloweredge')];
+            __esDecorate(this, null, __handleUpperThresholdItemCountChange_decorators, { kind: "method", name: "_handleUpperThresholdItemCountChange", static: false, private: false, access: { has: obj => "_handleUpperThresholdItemCountChange" in obj, get: obj => obj._handleUpperThresholdItemCountChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, __handleLowerThresholdItemCountChange_decorators, { kind: "method", name: "_handleLowerThresholdItemCountChange", static: false, private: false, access: { has: obj => "_handleLowerThresholdItemCountChange" in obj, get: obj => obj._handleLowerThresholdItemCountChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(null, null, __updateEventSwitches_decorators, { kind: "field", name: "_updateEventSwitches", static: false, private: false, access: { has: obj => "_updateEventSwitches" in obj, get: obj => obj._updateEventSwitches, set: (obj, value) => { obj._updateEventSwitches = value; } }, metadata: _metadata }, __updateEventSwitches_initializers, __updateEventSwitches_extraInitializers);
+            __esDecorate(null, null, __updateScrollToLowerEventSwitches_decorators, { kind: "field", name: "_updateScrollToLowerEventSwitches", static: false, private: false, access: { has: obj => "_updateScrollToLowerEventSwitches" in obj, get: obj => obj._updateScrollToLowerEventSwitches, set: (obj, value) => { obj._updateScrollToLowerEventSwitches = value; } }, metadata: _metadata }, __updateScrollToLowerEventSwitches_initializers, __updateScrollToLowerEventSwitches_extraInitializers);
+            __esDecorate(null, null, __handleScrollEventsSwitches_decorators, { kind: "field", name: "_handleScrollEventsSwitches", static: false, private: false, access: { has: obj => "_handleScrollEventsSwitches" in obj, get: obj => obj._handleScrollEventsSwitches, set: (obj, value) => { obj._handleScrollEventsSwitches = value; } }, metadata: _metadata }, __handleScrollEventsSwitches_initializers, __handleScrollEventsSwitches_extraInitializers);
+            __esDecorate(null, null, __handleScrollToUpperEdgeEventEnable_decorators, { kind: "field", name: "_handleScrollToUpperEdgeEventEnable", static: false, private: false, access: { has: obj => "_handleScrollToUpperEdgeEventEnable" in obj, get: obj => obj._handleScrollToUpperEdgeEventEnable, set: (obj, value) => { obj._handleScrollToUpperEdgeEventEnable = value; } }, metadata: _metadata }, __handleScrollToUpperEdgeEventEnable_initializers, __handleScrollToUpperEdgeEventEnable_extraInitializers);
+            __esDecorate(null, null, __handleScrollToLowerEdgeEventEnable_decorators, { kind: "field", name: "_handleScrollToLowerEdgeEventEnable", static: false, private: false, access: { has: obj => "_handleScrollToLowerEdgeEventEnable" in obj, get: obj => obj._handleScrollToLowerEdgeEventEnable, set: (obj, value) => { obj._handleScrollToLowerEdgeEventEnable = value; } }, metadata: _metadata }, __handleScrollToLowerEdgeEventEnable_initializers, __handleScrollToLowerEdgeEventEnable_extraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
         static observedAttributes = [
@@ -128,7 +95,7 @@ let XListEvents = (() => {
                 }));
             }
         };
-        #updateEventSwitches = __runInitializers(this, _private_updateEventSwitches_initializers, (enableScrollToUpper) => {
+        _updateEventSwitches = __runInitializers(this, __updateEventSwitches_initializers, (enableScrollToUpper) => {
             enableScrollToUpper
                 ? this.#dom.setAttribute('x-enable-scrolltoupper-event', '')
                 : this.#dom.removeAttribute('x-enable-scrolltoupper-event'); // css needs this;
@@ -166,8 +133,23 @@ let XListEvents = (() => {
                 });
             }
         });
-        get #handleUpperThresholdItemCountChange() { return _private_handleUpperThresholdItemCountChange_descriptor.value; }
-        #handleLowerObserver = (__runInitializers(this, _private_updateEventSwitches_extraInitializers), (entries) => {
+        _handleUpperThresholdItemCountChange(newValue, oldValue) {
+            const oldItemCount = oldValue !== null
+                ? parseFloat(oldValue)
+                : 0;
+            const oldObserverDom = oldItemCount === 0
+                ? this.#getUpperThresholdObserverDom()
+                : this.#dom.children[oldItemCount - 1];
+            oldObserverDom && this.#upperObserver?.unobserve(oldObserverDom);
+            const itemCount = newValue !== null
+                ? parseFloat(newValue)
+                : 0;
+            const observerDom = itemCount === 0
+                ? this.#getUpperThresholdObserverDom()
+                : this.#dom.children[itemCount - 1];
+            observerDom && this.#upperObserver?.observe(observerDom);
+        }
+        #handleLowerObserver = (__runInitializers(this, __updateEventSwitches_extraInitializers), (entries) => {
             const { isIntersecting } = entries[0];
             if (isIntersecting) {
                 this.#dom.dispatchEvent(new CustomEvent('scrolltolower', {
@@ -183,7 +165,7 @@ let XListEvents = (() => {
             scrolltolower: false,
             scrolltoupper: false,
         };
-        #updateScrollToLowerEventSwitches = __runInitializers(this, _private_updateScrollToLowerEventSwitches_initializers, (enableScrollToLower) => {
+        _updateScrollToLowerEventSwitches = __runInitializers(this, __updateScrollToLowerEventSwitches_initializers, (enableScrollToLower) => {
             this.#eventSwitches.scrolltolower = enableScrollToLower;
             enableScrollToLower
                 ? this.#dom.setAttribute('x-enable-scrolltolower-event', '')
@@ -221,8 +203,24 @@ let XListEvents = (() => {
                 });
             }
         });
-        get #handleLowerThresholdItemCountChange() { return _private_handleLowerThresholdItemCountChange_descriptor.value; }
-        #handleChildrenObserver = (__runInitializers(this, _private_updateScrollToLowerEventSwitches_extraInitializers), (mutationList) => {
+        _handleLowerThresholdItemCountChange(newValue, oldValue) {
+            const oldItemCount = oldValue !== null
+                ? parseFloat(oldValue)
+                : 0;
+            const oldObserverDom = oldItemCount === 0
+                ? this.#getLowerThresholdObserverDom()
+                : this.#dom.children[this.#dom.children.length - oldItemCount];
+            oldObserverDom && this.#lowerObserver?.unobserve(oldObserverDom);
+            const itemCount = newValue !== null
+                ? parseFloat(newValue)
+                : 0;
+            const observerDom = itemCount === 0
+                ? this.#getLowerThresholdObserverDom()
+                : this.#dom.children[this.#dom.children.length
+                    - itemCount];
+            observerDom && this.#lowerObserver?.observe(observerDom);
+        }
+        #handleChildrenObserver = (__runInitializers(this, __updateScrollToLowerEventSwitches_extraInitializers), (mutationList) => {
             const mutation = mutationList?.[0];
             // reset upper and lower observers
             if (mutation?.type === 'childList') {
@@ -283,7 +281,7 @@ let XListEvents = (() => {
                 detail: this.#getScrollDetail(),
             }));
         };
-        #handleScrollEventsSwitches = __runInitializers(this, _private_handleScrollEventsSwitches_initializers, (enabled, name) => {
+        _handleScrollEventsSwitches = __runInitializers(this, __handleScrollEventsSwitches_initializers, (enabled, name) => {
             this.#eventSwitches[name] =
                 enabled;
             const { lynxscroll, lynxscrollend, snap } = this.#eventSwitches;
@@ -293,7 +291,7 @@ let XListEvents = (() => {
             // cancel the previous listener first
             this.#throttledScroll
                 && listContainer.removeEventListener('scroll', this.#throttledScroll);
-            if (scroll !== null || this.#enableScrollEnd) {
+            if (lynxscroll !== null || this.#enableScrollEnd) {
                 const wait = scrollEventThrottle !== null
                     ? parseFloat(scrollEventThrottle)
                     : 0;
@@ -313,7 +311,7 @@ let XListEvents = (() => {
                 listContainer.removeEventListener('scrollend', this.#handleScrollEnd);
             }
         });
-        #handleObserver = (__runInitializers(this, _private_handleScrollEventsSwitches_extraInitializers), (entries) => {
+        #handleObserver = (__runInitializers(this, __handleScrollEventsSwitches_extraInitializers), (entries) => {
             const { isIntersecting, target } = entries[0];
             const id = target.id;
             if (isIntersecting) {
@@ -331,20 +329,20 @@ let XListEvents = (() => {
                 }
             }
         });
-        #handleScrollToUpperEdgeEventEnable = __runInitializers(this, _private_handleScrollToUpperEdgeEventEnable_initializers, (enabled) => {
+        _handleScrollToUpperEdgeEventEnable = __runInitializers(this, __handleScrollToUpperEdgeEventEnable_initializers, (enabled) => {
             enabled
                 ? this.#dom.setAttribute('x-enable-scrolltoupperedge-event', '')
                 : this.#dom.removeAttribute('x-enable-scrolltoupperedge-event'); // css needs this;
             this.#updateUpperEdgeIntersectionObserver(enabled);
         });
-        #updateUpperEdgeIntersectionObserver = (__runInitializers(this, _private_handleScrollToUpperEdgeEventEnable_extraInitializers), bindToIntersectionObserver(this.#getListContainer, this.#getUpperThresholdObserverDom, this.#handleObserver));
-        #handleScrollToLowerEdgeEventEnable = __runInitializers(this, _private_handleScrollToLowerEdgeEventEnable_initializers, (enabled) => {
+        #updateUpperEdgeIntersectionObserver = (__runInitializers(this, __handleScrollToUpperEdgeEventEnable_extraInitializers), bindToIntersectionObserver(this.#getListContainer, this.#getUpperThresholdObserverDom, this.#handleObserver));
+        _handleScrollToLowerEdgeEventEnable = __runInitializers(this, __handleScrollToLowerEdgeEventEnable_initializers, (enabled) => {
             enabled
                 ? this.#dom.setAttribute('x-enable-scrolltoloweredge-event', '')
                 : this.#dom.removeAttribute('x-enable-scrolltoloweredge-event'); // css needs this;
             this.#updateLowerEdgeIntersectionObserver(enabled);
         });
-        #updateLowerEdgeIntersectionObserver = (__runInitializers(this, _private_handleScrollToLowerEdgeEventEnable_extraInitializers), bindToIntersectionObserver(this.#getListContainer, this.#getLowerThresholdObserverDom, this.#handleObserver));
+        #updateLowerEdgeIntersectionObserver = (__runInitializers(this, __handleScrollToLowerEdgeEventEnable_extraInitializers), bindToIntersectionObserver(this.#getListContainer, this.#getLowerThresholdObserverDom, this.#handleObserver));
         #handleScrollEnd = () => {
             const itemSnap = this.#dom.getAttribute('item-snap');
             this.#dom.dispatchEvent(new CustomEvent('lynxscrollend', {

package/dist/{XList → elements/XList}/XListWaterfall.d.ts

@@ -1,7 +1,9 @@
-import { type AttributeReactiveClass } from '@lynx-js/web-elements-reactive';
+import { type AttributeReactiveClass } from '../../element-reactive/index.js';
 import type { XList } from './XList.js';
 export declare class XListWaterfall implements InstanceType<AttributeReactiveClass<typeof HTMLElement>> {
     #private;
     static observedAttributes: string[];
+    _handleXEnableHeaderOffsetEvent(enableScrollToLower: boolean): void;
     constructor(dom: XList);
+    _handlerListType(newVal: string | null): void;
 }

package/dist/{XList → elements/XList}/XListWaterfall.js

@@ -1,82 +1,23 @@
-import { __esDecorate, __runInitializers, __setFunctionName } from "tslib";
+import { __esDecorate, __runInitializers } from "tslib";
 /*
 // Copyright 2024 The Lynx Authors. All rights reserved.
 // Licensed under the Apache License Version 2.0 that can be found in the
 // LICENSE file in the root directory of this source tree.
 */
-import { genDomGetter, registerAttributeHandler, registerEventEnableStatusChangeHandler, } from '@lynx-js/web-elements-reactive';
+import { genDomGetter, registerAttributeHandler, registerEventEnableStatusChangeHandler, } from '../../element-reactive/index.js';
 const WATERFALL_SLOT = 'waterfall-slot';
 const WATERFALL_STYLE = 'waterfall-style';
 let XListWaterfall = (() => {
     let _instanceExtraInitializers = [];
-    let _private_handleXEnableHeaderOffsetEvent_decorators;
-    let _private_handleXEnableHeaderOffsetEvent_descriptor;
-    let _private_handlerListType_decorators;
-    let _private_handlerListType_descriptor;
+    let __handleXEnableHeaderOffsetEvent_decorators;
+    let __handlerListType_decorators;
     return class XListWaterfall {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
-            _private_handleXEnableHeaderOffsetEvent_decorators = [registerEventEnableStatusChangeHandler('scrolltolower')];
-            _private_handlerListType_decorators = [registerAttributeHandler('list-type', true)];
-            __esDecorate(this, _private_handleXEnableHeaderOffsetEvent_descriptor = { value: __setFunctionName(function (enableScrollToLower) {
-                    enableScrollToLower
-                        ? this.#dom.setAttribute('x-enable-scrolltolower-event', '')
-                        : this.#dom.removeAttribute('x-enable-scrolltolower-event'); // css needs this;
-                    if (enableScrollToLower) {
-                        const lower = this.#getLowerThresholdObserver();
-                        const scrollOrientation = this.#dom.getAttribute('scroll-orientation')
-                            || 'vertical';
-                        const listContent = this.#getListContainer();
-                        // under waterfall, and when the list-item does not have a specified height, obtaining the correct scrollable value takes some time.
-                        setTimeout(() => {
-                            if (scrollOrientation === 'vertical') {
-                                lower.style.setProperty('top', 
-                                // Firefox cannot trigger the bottom IntersectionObserver
-                                `${String(listContent.scrollHeight - 1)}px`, 'important');
-                                // Firefox needs this
-                                lower.style.setProperty('bottom', 'unset', 'important');
-                            }
-                            else {
-                                lower.style.setProperty('left', 
-                                // Firefox cannot trigger the bottom IntersectionObserver
-                                `${String(listContent.scrollWidth - 1)}px`, 'important');
-                                // Firefox needs this
-                                lower.style.setProperty('right', 'unset', 'important');
-                            }
-                        }, 100);
-                    }
-                }, "#handleXEnableHeaderOffsetEvent") }, _private_handleXEnableHeaderOffsetEvent_decorators, { kind: "method", name: "#handleXEnableHeaderOffsetEvent", static: false, private: true, access: { has: obj => #handleXEnableHeaderOffsetEvent in obj, get: obj => obj.#handleXEnableHeaderOffsetEvent }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __esDecorate(this, _private_handlerListType_descriptor = { value: __setFunctionName(function (newVal) {
-                    if (newVal === 'waterfall') {
-                        this.#createWaterfallContainer();
-                        if (!this.#resizeObserver) {
-                            this.#resizeObserverInit();
-                        }
-                        if (!this.#childrenObserver) {
-                            this.#childrenObserver = new MutationObserver((mutationList) => {
-                                const mutation = mutationList?.[0];
-                                if (mutation?.type === 'childList') {
-                                    this.#resizeObserverInit();
-                                }
-                            });
-                            this.#childrenObserver.observe(this.#dom, {
-                                childList: true,
-                            });
-                        }
-                    }
-                    else {
-                        this.#resizeObserver?.disconnect();
-                        this.#resizeObserver = undefined;
-                        this.#childrenObserver?.disconnect();
-                        this.#childrenObserver = undefined;
-                        for (let i = 0; i < this.#dom.children.length; i++) {
-                            const listItem = this.#dom.children[i];
-                            listItem.removeAttribute('slot');
-                        }
-                        this.#dom.shadowRoot?.querySelector(`slot[name=${WATERFALL_SLOT}]`)
-                            ?.remove();
-                    }
-                }, "#handlerListType") }, _private_handlerListType_decorators, { kind: "method", name: "#handlerListType", static: false, private: true, access: { has: obj => #handlerListType in obj, get: obj => obj.#handlerListType }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __handleXEnableHeaderOffsetEvent_decorators = [registerEventEnableStatusChangeHandler('scrolltolower')];
+            __handlerListType_decorators = [registerAttributeHandler('list-type', true)];
+            __esDecorate(this, null, __handleXEnableHeaderOffsetEvent_decorators, { kind: "method", name: "_handleXEnableHeaderOffsetEvent", static: false, private: false, access: { has: obj => "_handleXEnableHeaderOffsetEvent" in obj, get: obj => obj._handleXEnableHeaderOffsetEvent }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, __handlerListType_decorators, { kind: "method", name: "_handlerListType", static: false, private: false, access: { has: obj => "_handlerListType" in obj, get: obj => obj._handlerListType }, metadata: _metadata }, null, _instanceExtraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
         static observedAttributes = ['list-type'];
@@ -85,7 +26,34 @@ let XListWaterfall = (() => {
         #getLowerThresholdObserver = genDomGetter(() => this.#dom.shadowRoot, 'div[part="lower-threshold-observer"]');
         #resizeObserver;
         #childrenObserver;
-        get #handleXEnableHeaderOffsetEvent() { return _private_handleXEnableHeaderOffsetEvent_descriptor.value; }
+        _handleXEnableHeaderOffsetEvent(enableScrollToLower) {
+            enableScrollToLower
+                ? this.#dom.setAttribute('x-enable-scrolltolower-event', '')
+                : this.#dom.removeAttribute('x-enable-scrolltolower-event'); // css needs this;
+            if (enableScrollToLower) {
+                const lower = this.#getLowerThresholdObserver();
+                const scrollOrientation = this.#dom.getAttribute('scroll-orientation')
+                    || 'vertical';
+                const listContent = this.#getListContainer();
+                // under waterfall, and when the list-item does not have a specified height, obtaining the correct scrollable value takes some time.
+                setTimeout(() => {
+                    if (scrollOrientation === 'vertical') {
+                        lower.style.setProperty('top', 
+                        // Firefox cannot trigger the bottom IntersectionObserver
+                        `${String(listContent.scrollHeight - 1)}px`, 'important');
+                        // Firefox needs this
+                        lower.style.setProperty('bottom', 'unset', 'important');
+                    }
+                    else {
+                        lower.style.setProperty('left', 
+                        // Firefox cannot trigger the bottom IntersectionObserver
+                        `${String(listContent.scrollWidth - 1)}px`, 'important');
+                        // Firefox needs this
+                        lower.style.setProperty('right', 'unset', 'important');
+                    }
+                }, 100);
+            }
+        }
         #createWaterfallContainer = () => {
             const waterfallSlot = document.createElement('slot');
             waterfallSlot.setAttribute('name', `${WATERFALL_SLOT}`);
@@ -171,7 +139,37 @@ let XListWaterfall = (() => {
                 this.#resizeObserver?.observe(element);
             });
         };
-        get #handlerListType() { return _private_handlerListType_descriptor.value; }
+        _handlerListType(newVal) {
+            if (newVal === 'waterfall') {
+                this.#createWaterfallContainer();
+                if (!this.#resizeObserver) {
+                    this.#resizeObserverInit();
+                }
+                if (!this.#childrenObserver) {
+                    this.#childrenObserver = new MutationObserver((mutationList) => {
+                        const mutation = mutationList?.[0];
+                        if (mutation?.type === 'childList') {
+                            this.#resizeObserverInit();
+                        }
+                    });
+                    this.#childrenObserver.observe(this.#dom, {
+                        childList: true,
+                    });
+                }
+            }
+            else {
+                this.#resizeObserver?.disconnect();
+                this.#resizeObserver = undefined;
+                this.#childrenObserver?.disconnect();
+                this.#childrenObserver = undefined;
+                for (let i = 0; i < this.#dom.children.length; i++) {
+                    const listItem = this.#dom.children[i];
+                    listItem.removeAttribute('slot');
+                }
+                this.#dom.shadowRoot?.querySelector(`slot[name=${WATERFALL_SLOT}]`)
+                    ?.remove();
+            }
+        }
     };
 })();
 export { XListWaterfall };

package/dist/elements/XList/index.d.ts

@@ -0,0 +1,32 @@
+export { ListItem } from './ListItem.js';
+/**
+ * @module elements/XList
+ *
+ * `x-list` provides a scalable list container, supporting waterflow layout.
+ *
+ * Attributes:
+ * - `list-type`: 'single' | 'flow' | 'waterfall'.
+ * - `span-count` / `column-count`: Columns in waterfall/flow.
+ * - `sticky-offset`: Top offset for sticky items.
+ * - `scroll-orientation`: 'vertical' | 'horizontal'.
+ * - `upper-threshold-item-count`: Items from top to trigger `scrolltoupper`.
+ * - `lower-threshold-item-count`: Items from bottom to trigger `scrolltolower`.
+ * - `initial-scroll-index`: Initial scroll index.
+ *
+ * Events:
+ * - `scrolltoupper`: Reached top threshold.
+ * - `scrolltolower`: Reached bottom threshold.
+ * - `scroll`: Fired on scroll.
+ * - `scrollend`: Fired when scrolling stops.
+ * - `snap`: Fired on scroll snap.
+ *
+ * Methods:
+ * - `scrollToPosition({ position, offset, smooth })`: Scrolls to index.
+ * - `autoScroll({ rate, start, autoStop })`: Auto-scrolling.
+ *
+ * CSS:
+ * - `list-type="flow"` uses `display: grid`.
+ * - `list-type="waterfall"` uses `display: flex` (column) / `display: row` with absolute positioning for items.
+ * - `sticky` items use `position: sticky`.
+ */
+export { XList } from './XList.js';

package/dist/elements/XList/index.js

@@ -0,0 +1,36 @@
+// Copyright 2024 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+export { ListItem } from './ListItem.js';
+/**
+ * @module elements/XList
+ *
+ * `x-list` provides a scalable list container, supporting waterflow layout.
+ *
+ * Attributes:
+ * - `list-type`: 'single' | 'flow' | 'waterfall'.
+ * - `span-count` / `column-count`: Columns in waterfall/flow.
+ * - `sticky-offset`: Top offset for sticky items.
+ * - `scroll-orientation`: 'vertical' | 'horizontal'.
+ * - `upper-threshold-item-count`: Items from top to trigger `scrolltoupper`.
+ * - `lower-threshold-item-count`: Items from bottom to trigger `scrolltolower`.
+ * - `initial-scroll-index`: Initial scroll index.
+ *
+ * Events:
+ * - `scrolltoupper`: Reached top threshold.
+ * - `scrolltolower`: Reached bottom threshold.
+ * - `scroll`: Fired on scroll.
+ * - `scrollend`: Fired when scrolling stops.
+ * - `snap`: Fired on scroll snap.
+ *
+ * Methods:
+ * - `scrollToPosition({ position, offset, smooth })`: Scrolls to index.
+ * - `autoScroll({ rate, start, autoStop })`: Auto-scrolling.
+ *
+ * CSS:
+ * - `list-type="flow"` uses `display: grid`.
+ * - `list-type="waterfall"` uses `display: flex` (column) / `display: row` with absolute positioning for items.
+ * - `sticky` items use `position: sticky`.
+ */
+export { XList } from './XList.js';
+//# sourceMappingURL=index.js.map