@lynx-js/web-elements 0.8.11 → 0.10.0

package/dist/element-reactive/index.js

@@ -0,0 +1,28 @@
+// Copyright 2023 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.
+/**
+ * @module element-reactive
+ *
+ * This module provides the core reactive framework for building Web Components in Lynx.
+ *
+ * Core features:
+ * - `Component` decorator: Defines a custom element with reactive capabilities.
+ * - Attribute & Style Binding: Automatically updates component state when attributes or styles change.
+ * - Event Handling: Provides mechanisms to bind and handle events efficiently.
+ * - Lifecycle Management: Extensions to standard Web Component lifecycle callbacks.
+ * - Plugin System: Allows extending component behavior.
+ *
+ * Use this module to create highly performant and reactive custom elements that integrate seamlessly with the Lynx platform.
+ */
+export { bindSwitchToEventListener } from './bindSwitchToEventListener.js';
+export { bindToAttribute } from './bindToAttribute.js';
+export { bindToStyle } from './bindToStyle.js';
+export { boostedQueueMicrotask } from './boostedQueueMicrotask.js';
+export { genDomGetter } from './genDomGetter.js';
+export { Component } from './component.js';
+export { html } from './html.js';
+export { registerAttributeHandler } from './registerAttributeHandler.js';
+export { registerStyleChangeHandler } from './registerStyleChangeHandler.js';
+export { registerEventEnableStatusChangeHandler } from './registerEventStatusChangedHandler.js';
+//# sourceMappingURL=index.js.map

package/dist/element-reactive/registerAttributeHandler.d.ts

@@ -0,0 +1,12 @@
+/**
+// Copyright 2023 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 type AttributeChangeHandler = (newValue: string | null, oldValue: string | null, attributeName: string) => void;
+/**
+ * @param attributeName
+ * @param noDomMeasure  If there are any measurement operation, the handler will be invoked after connected
+ * @returns
+ */
+export declare const registerAttributeHandler: (key: string, args_0: boolean) => <T>(this: T, target: AttributeChangeHandler | undefined, context: ClassMemberDecoratorContext | ClassFieldDecoratorContext<T>) => any;

package/dist/element-reactive/registerAttributeHandler.js

@@ -0,0 +1,11 @@
+import { generateRegister } from './generateRegister.js';
+/**
+ * @param attributeName
+ * @param noDomMeasure  If there are any measurement operation, the handler will be invoked after connected
+ * @returns
+ */
+export const registerAttributeHandler = generateRegister('attributeChangedHandler', (handler, [noDomMeasure]) => ({
+    handler,
+    noDomMeasure,
+}));
+//# sourceMappingURL=registerAttributeHandler.js.map

package/dist/element-reactive/registerEventStatusChangedHandler.d.ts

@@ -0,0 +1,11 @@
+/**
+// Copyright 2023 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 type EventStatusChangeHandler = (enable: boolean, eventName: string) => void;
+/**
+ * @param eventName
+ * @returns
+ */
+export declare const registerEventEnableStatusChangeHandler: (key: string) => <T>(this: T, target: EventStatusChangeHandler | undefined, context: ClassMemberDecoratorContext | ClassFieldDecoratorContext<T>) => any;

package/dist/element-reactive/registerEventStatusChangedHandler.js

@@ -0,0 +1,7 @@
+import { generateRegister } from './generateRegister.js';
+/**
+ * @param eventName
+ * @returns
+ */
+export const registerEventEnableStatusChangeHandler = generateRegister('eventStatusChangedHandler', (handler) => handler);
+//# sourceMappingURL=registerEventStatusChangedHandler.js.map

package/dist/element-reactive/registerStyleChangeHandler.d.ts

@@ -0,0 +1,2 @@
+export type StyleChangeHandler = (newValue: string | null, styleHyphenName: string) => void;
+export declare const registerStyleChangeHandler: (key: string) => <T>(this: T, target: StyleChangeHandler | undefined, context: ClassMemberDecoratorContext | ClassFieldDecoratorContext<T>) => any;

package/dist/element-reactive/registerStyleChangeHandler.js

@@ -0,0 +1,8 @@
+/**
+// Copyright 2023 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 { generateRegister } from './generateRegister.js';
+export const registerStyleChangeHandler = generateRegister('cssPropertyChangedHandler', (handler) => handler);
+//# sourceMappingURL=registerStyleChangeHandler.js.map

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

@@ -4,7 +4,7 @@ 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 } from '@lynx-js/web-elements-reactive';
+import { Component } from '../../element-reactive/index.js';
 let LynxWrapper = (() => {
     let _classDecorators = [Component('lynx-wrapper', [])];
     let _classDescriptor;

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

@@ -0,0 +1,14 @@
+/**
+ * @module elements/LynxWrapper
+ *
+ * `lynx-wrapper` is a helper element used to wrap content in specific scenarios.
+ * It is a simple container with no specific behavioral logic.
+ *
+ * @example
+ * ```html
+ * <lynx-wrapper>
+ *   <div>Content</div>
+ * </lynx-wrapper>
+ * ```
+ */
+export { LynxWrapper } from './LynxWrapper.js';

package/dist/elements/LynxWrapper/index.js

@@ -0,0 +1,18 @@
+// 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.
+/**
+ * @module elements/LynxWrapper
+ *
+ * `lynx-wrapper` is a helper element used to wrap content in specific scenarios.
+ * It is a simple container with no specific behavioral logic.
+ *
+ * @example
+ * ```html
+ * <lynx-wrapper>
+ *   <div>Content</div>
+ * </lynx-wrapper>
+ * ```
+ */
+export { LynxWrapper } from './LynxWrapper.js';
+//# sourceMappingURL=index.js.map

package/dist/{ScrollView → elements/ScrollView}/FadeEdgeLengthAttribute.d.ts

@@ -1,10 +1,12 @@
-import { type AttributeReactiveClass } from '@lynx-js/web-elements-reactive';
+import { type AttributeReactiveClass } from '../../element-reactive/index.js';
 import type { ScrollView } from './ScrollView.js';
 export declare class FadeEdgeLengthAttribute implements InstanceType<AttributeReactiveClass<typeof ScrollView>> {
     #private;
     static observedAttributes: string[];
     static observedCSSProperties: string[];
     constructor(dom: ScrollView);
+    _handleFadingEdgeLength: (this: void, newVal: string | null) => void;
+    _backgroundColorToVariable(backGroundColor: string | null): void;
     connectedCallback?(): void;
     dispose(): void;
 }

package/dist/elements/ScrollView/FadeEdgeLengthAttribute.js

@@ -0,0 +1,42 @@
+/*
+// 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 { __esDecorate, __runInitializers } from "tslib";
+import { bindToStyle, genDomGetter, registerAttributeHandler, registerStyleChangeHandler, } from '../../element-reactive/index.js';
+let FadeEdgeLengthAttribute = (() => {
+    let _instanceExtraInitializers = [];
+    let __handleFadingEdgeLength_decorators;
+    let __handleFadingEdgeLength_initializers = [];
+    let __handleFadingEdgeLength_extraInitializers = [];
+    let __backgroundColorToVariable_decorators;
+    return class FadeEdgeLengthAttribute {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            __handleFadingEdgeLength_decorators = [registerAttributeHandler('fading-edge-length', true)];
+            __backgroundColorToVariable_decorators = [registerStyleChangeHandler('background'), registerStyleChangeHandler('background-color')];
+            __esDecorate(this, null, __backgroundColorToVariable_decorators, { kind: "method", name: "_backgroundColorToVariable", static: false, private: false, access: { has: obj => "_backgroundColorToVariable" in obj, get: obj => obj._backgroundColorToVariable }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(null, null, __handleFadingEdgeLength_decorators, { kind: "field", name: "_handleFadingEdgeLength", static: false, private: false, access: { has: obj => "_handleFadingEdgeLength" in obj, get: obj => obj._handleFadingEdgeLength, set: (obj, value) => { obj._handleFadingEdgeLength = value; } }, metadata: _metadata }, __handleFadingEdgeLength_initializers, __handleFadingEdgeLength_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        #dom = __runInitializers(this, _instanceExtraInitializers);
+        #getTopFadeMask = genDomGetter(() => this.#dom.shadowRoot, '#top-fade-mask');
+        #getBotFadeMask = genDomGetter(() => this.#dom.shadowRoot, '#bot-fade-mask');
+        static observedAttributes = ['fading-edge-length'];
+        static observedCSSProperties = ['background', 'background-color'];
+        constructor(dom) {
+            __runInitializers(this, __handleFadingEdgeLength_extraInitializers);
+            this.#dom = dom;
+        }
+        _handleFadingEdgeLength = __runInitializers(this, __handleFadingEdgeLength_initializers, bindToStyle(() => this.#dom, '--scroll-view-fading-edge-length', (v) => `${parseFloat(v)}px`));
+        _backgroundColorToVariable(backGroundColor) {
+            this.#getTopFadeMask().style.setProperty('--scroll-view-bg-color', backGroundColor);
+            this.#getBotFadeMask().style.setProperty('--scroll-view-bg-color', backGroundColor);
+        }
+        connectedCallback() { }
+        dispose() { }
+    };
+})();
+export { FadeEdgeLengthAttribute };
+//# sourceMappingURL=FadeEdgeLengthAttribute.js.map

package/dist/{ScrollView → elements/ScrollView}/ScrollAttributes.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 { ScrollView } from './ScrollView.js';
 export declare class ScrollAttributes implements InstanceType<AttributeReactiveClass<typeof ScrollView>> {
     #private;
     static observedAttributes: string[];
     constructor(dom: ScrollView);
+    _handleInitialScrollOffset(newVal: string | null, _: string | null, attributeName: string): void;
+    _handleInitialScrollIndex(newVal: string | null): void;
     dispose(): void;
 }

package/dist/elements/ScrollView/ScrollAttributes.js

@@ -0,0 +1,81 @@
+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, } from '../../element-reactive/index.js';
+let ScrollAttributes = (() => {
+    let _instanceExtraInitializers = [];
+    let __handleInitialScrollOffset_decorators;
+    let __handleInitialScrollIndex_decorators;
+    return class ScrollAttributes {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            __handleInitialScrollOffset_decorators = [registerAttributeHandler('scroll-top', false), registerAttributeHandler('scroll-left', false), registerAttributeHandler('initial-scroll-offset', false)];
+            __handleInitialScrollIndex_decorators = [registerAttributeHandler('scroll-to-index', false), registerAttributeHandler('initial-scroll-to-index', false)];
+            __esDecorate(this, null, __handleInitialScrollOffset_decorators, { kind: "method", name: "_handleInitialScrollOffset", static: false, private: false, access: { has: obj => "_handleInitialScrollOffset" in obj, get: obj => obj._handleInitialScrollOffset }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, __handleInitialScrollIndex_decorators, { kind: "method", name: "_handleInitialScrollIndex", static: false, private: false, access: { has: obj => "_handleInitialScrollIndex" in obj, get: obj => obj._handleInitialScrollIndex }, metadata: _metadata }, null, _instanceExtraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        #dom = __runInitializers(this, _instanceExtraInitializers);
+        static observedAttributes = [
+            'scroll-top',
+            'scroll-left',
+            'initial-scroll-offset',
+            'scroll-to-index',
+            'initial-scroll-to-index',
+        ];
+        constructor(dom) {
+            this.#dom = dom;
+        }
+        _handleInitialScrollOffset(newVal, _, attributeName) {
+            if (newVal) {
+                const scrollValue = parseFloat(newVal);
+                const scrollOrientation = this.#dom.getAttribute('scroll-orientation');
+                const scrollY = this.#dom.getAttribute('scroll-y');
+                const scrollX = this.#dom.getAttribute('scroll-x');
+                const topScrollDistance = (attributeName === 'scroll-top'
+                    || attributeName === 'initial-scroll-offset')
+                    && (scrollY === ''
+                        || scrollY === 'true'
+                        || scrollOrientation === 'vertical'
+                        || scrollOrientation === 'both');
+                const leftScrollDistance = (attributeName === 'scroll-left'
+                    || attributeName === 'initial-scroll-offset')
+                    && (scrollX === ''
+                        || scrollX === 'true'
+                        || scrollOrientation === 'vertical'
+                        || scrollOrientation === 'both');
+                requestAnimationFrame(() => {
+                    if (topScrollDistance) {
+                        this.#dom.scrollTo(0, scrollValue);
+                    }
+                    if (leftScrollDistance) {
+                        this.#dom.scrollLeft = scrollValue;
+                    }
+                });
+            }
+        }
+        _handleInitialScrollIndex(newVal) {
+            if (newVal) {
+                const scrollValue = parseFloat(newVal);
+                const childrenElement = this.#dom.children.item(scrollValue);
+                if (childrenElement && childrenElement instanceof HTMLElement) {
+                    const scrollX = this.#dom.getAttribute('scroll-x') !== null;
+                    requestAnimationFrame(() => {
+                        if (scrollX) {
+                            this.#dom.scrollLeft = childrenElement.offsetLeft;
+                        }
+                        else {
+                            this.#dom.scrollTop = childrenElement.offsetTop;
+                        }
+                    });
+                }
+            }
+        }
+        dispose() { }
+    };
+})();
+export { ScrollAttributes };
+//# sourceMappingURL=ScrollAttributes.js.map

package/dist/{ScrollView → elements/ScrollView}/ScrollIntoView.d.ts

@@ -1,4 +1,4 @@
-import { type AttributeReactiveClass } from '@lynx-js/web-elements-reactive';
+import { type AttributeReactiveClass } from '../../element-reactive/index.js';
 import type { ScrollView } from './ScrollView.js';
 export declare class ScrollIntoView implements InstanceType<AttributeReactiveClass<typeof ScrollView>> {
     #private;

package/dist/{ScrollView → elements/ScrollView}/ScrollIntoView.js

@@ -3,7 +3,7 @@
 // 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 {} from '@lynx-js/web-elements-reactive';
+import {} from '../../element-reactive/index.js';
 export class ScrollIntoView {
     static eventName = '__scrollIntoView';
     static observedAttributes = [];

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

@@ -9,9 +9,9 @@ import { FadeEdgeLengthAttribute } from './FadeEdgeLengthAttribute.js';
 import { ScrollAttributes } from './ScrollAttributes.js';
 import { ScrollViewEvents } from './ScrollViewEvents.js';
 import { ScrollIntoView } from './ScrollIntoView.js';
-import { Component } from '@lynx-js/web-elements-reactive';
+import { Component } from '../../element-reactive/index.js';
 import { scrollContainerDom } from '../common/constants.js';
-import { templateScrollView } from '@lynx-js/web-elements-template';
+import { templateScrollView } from '../htmlTemplates.js';
 let ScrollView = (() => {
     let _classDecorators = [Component('scroll-view', [
             CommonEventsAndMethods,

package/dist/elements/ScrollView/ScrollViewEvents.d.ts

@@ -0,0 +1,15 @@
+import { type AttributeReactiveClass } from '../../element-reactive/index.js';
+import type { ScrollView } from './ScrollView.js';
+export declare class ScrollViewEvents implements InstanceType<AttributeReactiveClass<typeof ScrollView>> {
+    #private;
+    constructor(dom: ScrollView);
+    static observedAttributes: string[];
+    _handleScrollUpperThresholdEventEnabled: (enabled: boolean) => void;
+    _handleScrollLowerThresholdEventEnabled: (enabled: boolean) => void;
+    _updateUpperThreshold: (this: void, newVal: string | null) => void;
+    _updateLowerThreshold: (this: void, newVal: string | null) => void;
+    _handleScrollEventEnabled: (enabled: boolean) => void;
+    _handleScrollEndEventEnabled: (enabled: boolean) => void;
+    connectedCallback?(): void;
+    dispose(): void;
+}

package/dist/elements/ScrollView/ScrollViewEvents.js

@@ -0,0 +1,167 @@
+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 { bindToStyle, genDomGetter, registerAttributeHandler, } from '../../element-reactive/index.js';
+import { commonComponentEventSetting } from '../common/commonEventInitConfiguration.js';
+import { bindToIntersectionObserver } from '../common/bindToIntersectionObserver.js';
+import { useScrollEnd } from '../common/constants.js';
+import { registerEventEnableStatusChangeHandler } from '../../element-reactive/index.js';
+let ScrollViewEvents = (() => {
+    let __handleScrollUpperThresholdEventEnabled_decorators;
+    let __handleScrollUpperThresholdEventEnabled_initializers = [];
+    let __handleScrollUpperThresholdEventEnabled_extraInitializers = [];
+    let __handleScrollLowerThresholdEventEnabled_decorators;
+    let __handleScrollLowerThresholdEventEnabled_initializers = [];
+    let __handleScrollLowerThresholdEventEnabled_extraInitializers = [];
+    let __updateUpperThreshold_decorators;
+    let __updateUpperThreshold_initializers = [];
+    let __updateUpperThreshold_extraInitializers = [];
+    let __updateLowerThreshold_decorators;
+    let __updateLowerThreshold_initializers = [];
+    let __updateLowerThreshold_extraInitializers = [];
+    let __handleScrollEventEnabled_decorators;
+    let __handleScrollEventEnabled_initializers = [];
+    let __handleScrollEventEnabled_extraInitializers = [];
+    let __handleScrollEndEventEnabled_decorators;
+    let __handleScrollEndEventEnabled_initializers = [];
+    let __handleScrollEndEventEnabled_extraInitializers = [];
+    return class ScrollViewEvents {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            __handleScrollUpperThresholdEventEnabled_decorators = [registerEventEnableStatusChangeHandler('scrolltoupper')];
+            __handleScrollLowerThresholdEventEnabled_decorators = [registerEventEnableStatusChangeHandler('scrolltolower')];
+            __updateUpperThreshold_decorators = [registerAttributeHandler('upper-threshold', true)];
+            __updateLowerThreshold_decorators = [registerAttributeHandler('lower-threshold', true)];
+            __handleScrollEventEnabled_decorators = [registerEventEnableStatusChangeHandler('lynxscroll')];
+            __handleScrollEndEventEnabled_decorators = [registerEventEnableStatusChangeHandler('lynxscrollend')];
+            __esDecorate(null, null, __handleScrollUpperThresholdEventEnabled_decorators, { kind: "field", name: "_handleScrollUpperThresholdEventEnabled", static: false, private: false, access: { has: obj => "_handleScrollUpperThresholdEventEnabled" in obj, get: obj => obj._handleScrollUpperThresholdEventEnabled, set: (obj, value) => { obj._handleScrollUpperThresholdEventEnabled = value; } }, metadata: _metadata }, __handleScrollUpperThresholdEventEnabled_initializers, __handleScrollUpperThresholdEventEnabled_extraInitializers);
+            __esDecorate(null, null, __handleScrollLowerThresholdEventEnabled_decorators, { kind: "field", name: "_handleScrollLowerThresholdEventEnabled", static: false, private: false, access: { has: obj => "_handleScrollLowerThresholdEventEnabled" in obj, get: obj => obj._handleScrollLowerThresholdEventEnabled, set: (obj, value) => { obj._handleScrollLowerThresholdEventEnabled = value; } }, metadata: _metadata }, __handleScrollLowerThresholdEventEnabled_initializers, __handleScrollLowerThresholdEventEnabled_extraInitializers);
+            __esDecorate(null, null, __updateUpperThreshold_decorators, { kind: "field", name: "_updateUpperThreshold", static: false, private: false, access: { has: obj => "_updateUpperThreshold" in obj, get: obj => obj._updateUpperThreshold, set: (obj, value) => { obj._updateUpperThreshold = value; } }, metadata: _metadata }, __updateUpperThreshold_initializers, __updateUpperThreshold_extraInitializers);
+            __esDecorate(null, null, __updateLowerThreshold_decorators, { kind: "field", name: "_updateLowerThreshold", static: false, private: false, access: { has: obj => "_updateLowerThreshold" in obj, get: obj => obj._updateLowerThreshold, set: (obj, value) => { obj._updateLowerThreshold = value; } }, metadata: _metadata }, __updateLowerThreshold_initializers, __updateLowerThreshold_extraInitializers);
+            __esDecorate(null, null, __handleScrollEventEnabled_decorators, { kind: "field", name: "_handleScrollEventEnabled", static: false, private: false, access: { has: obj => "_handleScrollEventEnabled" in obj, get: obj => obj._handleScrollEventEnabled, set: (obj, value) => { obj._handleScrollEventEnabled = value; } }, metadata: _metadata }, __handleScrollEventEnabled_initializers, __handleScrollEventEnabled_extraInitializers);
+            __esDecorate(null, null, __handleScrollEndEventEnabled_decorators, { kind: "field", name: "_handleScrollEndEventEnabled", static: false, private: false, access: { has: obj => "_handleScrollEndEventEnabled" in obj, get: obj => obj._handleScrollEndEventEnabled, set: (obj, value) => { obj._handleScrollEndEventEnabled = value; } }, metadata: _metadata }, __handleScrollEndEventEnabled_initializers, __handleScrollEndEventEnabled_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        #dom;
+        #debounceScrollForMockingScrollEnd;
+        #prevX = 0;
+        #prevY = 0;
+        constructor(dom) {
+            __runInitializers(this, __handleScrollEndEventEnabled_extraInitializers);
+            this.#dom = dom;
+        }
+        #getScrollContainer = () => this.#dom;
+        #getUpperThresholdObserverDom = genDomGetter(() => this.#dom.shadowRoot, '#upper-threshold-observer');
+        #getLowerThresholdObserverDom = genDomGetter(() => this.#dom.shadowRoot, '#lower-threshold-observer');
+        #handleObserver = (entries) => {
+            const { isIntersecting, target } = entries[0];
+            const id = target.id;
+            if (isIntersecting) {
+                if (id === 'upper-threshold-observer') {
+                    this.#dom.dispatchEvent(new CustomEvent('scrolltoupper', {
+                        ...commonComponentEventSetting,
+                        detail: this.#getScrollDetail(),
+                    }));
+                }
+                else if (id === 'lower-threshold-observer') {
+                    this.#dom.dispatchEvent(new CustomEvent('scrolltolower', {
+                        ...commonComponentEventSetting,
+                        detail: this.#getScrollDetail(),
+                    }));
+                }
+            }
+        };
+        static observedAttributes = [
+            'upper-threshold',
+            'lower-threshold',
+        ];
+        _handleScrollUpperThresholdEventEnabled = __runInitializers(this, __handleScrollUpperThresholdEventEnabled_initializers, (enabled) => {
+            enabled
+                ? this.#dom.setAttribute('x-enable-scrolltoupper-event', '')
+                : this.#dom.removeAttribute('x-enable-scrolltoupper-event'); // css needs this;
+            this.#updateUpperIntersectionObserver(enabled);
+        });
+        #updateUpperIntersectionObserver = (__runInitializers(this, __handleScrollUpperThresholdEventEnabled_extraInitializers), bindToIntersectionObserver(this.#getScrollContainer, this.#getUpperThresholdObserverDom, this.#handleObserver));
+        _handleScrollLowerThresholdEventEnabled = __runInitializers(this, __handleScrollLowerThresholdEventEnabled_initializers, (enabled) => {
+            enabled
+                ? this.#dom.setAttribute('x-enable-scrolltolower-event', '')
+                : this.#dom.removeAttribute('x-enable-scrolltolower-event'); // css needs this;
+            this.#updateLowerIntersectionObserver(enabled);
+        });
+        #updateLowerIntersectionObserver = (__runInitializers(this, __handleScrollLowerThresholdEventEnabled_extraInitializers), bindToIntersectionObserver(this.#getScrollContainer, this.#getLowerThresholdObserverDom, this.#handleObserver));
+        _updateUpperThreshold = __runInitializers(this, __updateUpperThreshold_initializers, bindToStyle(this.#getUpperThresholdObserverDom, 'flex-basis', (v) => `${parseInt(v)}px`));
+        _updateLowerThreshold = (__runInitializers(this, __updateUpperThreshold_extraInitializers), __runInitializers(this, __updateLowerThreshold_initializers, bindToStyle(this.#getLowerThresholdObserverDom, 'flex-basis', (v) => `${parseInt(v)}px`)));
+        #getScrollDetail() {
+            let { scrollTop, scrollLeft, scrollHeight, scrollWidth } = this
+                .#getScrollContainer();
+            if (scrollTop === 0) {
+                scrollTop -= this.#dom.scrollHeight / 2 - this.#dom.scrollTop;
+            }
+            if (scrollLeft === 0) {
+                scrollLeft -= this.#dom.scrollWidth / 2 - this.#dom.scrollLeft;
+            }
+            const detail = {
+                scrollTop,
+                scrollLeft,
+                scrollHeight,
+                scrollWidth,
+                isDragging: false,
+                deltaX: scrollLeft - this.#prevX,
+                deltaY: scrollTop - this.#prevY,
+            };
+            this.#prevX = scrollLeft;
+            this.#prevY = scrollTop;
+            return detail;
+        }
+        #handleScroll = (__runInitializers(this, __updateLowerThreshold_extraInitializers), () => {
+            if (this.#scrollEndEventEnabled && !useScrollEnd) {
+                // debounce
+                clearTimeout(this.#debounceScrollForMockingScrollEnd);
+                this.#debounceScrollForMockingScrollEnd = setTimeout(() => {
+                    this.#handleScrollEnd();
+                }, 100);
+            }
+            this.#dom.dispatchEvent(new CustomEvent('lynxscroll', {
+                ...commonComponentEventSetting,
+                detail: this.#getScrollDetail(),
+            }));
+        });
+        #handleScrollEnd = () => {
+            this.#dom.dispatchEvent(new CustomEvent('lynxscrollend', {
+                ...commonComponentEventSetting,
+                detail: this.#getScrollDetail(),
+            }));
+        };
+        #scrollEventEnabled = false;
+        _handleScrollEventEnabled = __runInitializers(this, __handleScrollEventEnabled_initializers, (enabled) => {
+            this.#scrollEventEnabled = enabled;
+            this.#handleScrollEventsSwitches();
+        });
+        #scrollEndEventEnabled = (__runInitializers(this, __handleScrollEventEnabled_extraInitializers), false);
+        _handleScrollEndEventEnabled = __runInitializers(this, __handleScrollEndEventEnabled_initializers, (enabled) => {
+            this.#scrollEndEventEnabled = enabled;
+            this.#handleScrollEventsSwitches();
+        });
+        #handleScrollEventsSwitches() {
+            if (this.#scrollEventEnabled || this.#scrollEndEventEnabled) {
+                this.#getScrollContainer().addEventListener('scroll', this.#handleScroll);
+                this.#getScrollContainer().addEventListener('scrollend', this.#handleScrollEnd);
+                this.#dom.addEventListener('scroll', this.#handleScroll);
+                this.#dom.addEventListener('scrollend', this.#handleScrollEnd);
+                this.#prevX = 0;
+                this.#prevY = 0;
+            }
+            else {
+                this.#dom.removeEventListener('scroll', this.#handleScroll);
+                this.#dom.removeEventListener('scrollend', this.#handleScrollEnd);
+            }
+        }
+        connectedCallback() { }
+        dispose() { }
+    };
+})();
+export { ScrollViewEvents };
+//# sourceMappingURL=ScrollViewEvents.js.map

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

@@ -0,0 +1,32 @@
+/**
+ * @module elements/ScrollView
+ *
+ * `scroll-view` provides a scrollable container.
+ *
+ * Attributes:
+ * - `scroll-top`: Sets the vertical scroll position.
+ * - `scroll-left`: Sets the horizontal scroll position.
+ * - `initial-scroll-offset`: Sets the initial scroll position (in px).
+ * - `scroll-to-index`: Scrolls to the child element at the specified index.
+ * - `initial-scroll-to-index`: Scrolls to the child element at the specified index on init.
+ * - `fading-edge-length`: Sets the length of the fading edge effect.
+ * - `scroll-orientation`: 'vertical' | 'horizontal' | 'both'.
+ * - `scroll-y`: 'true' | 'false' to enable vertical scrolling.
+ * - `scroll-x`: 'true' | 'false' to enable horizontal scrolling.
+ * - `enable-scroll`: 'true' | 'false', creates a scrolling container.
+ *
+ * Events:
+ * - `scrolltoupper`: Reached top threshold.
+ * - `scrolltolower`: Reached bottom threshold.
+ * - `scroll`: Fired on scroll. Detail: `{ scrollTop, scrollLeft, scrollHeight, scrollWidth, deltaX, deltaY }`.
+ *
+ * CSS:
+ * - Forces `display: flex` and linear layout behavior.
+ * - Hides scrollbars by default (unless enabled via attribute).
+ * - Uses `scroll-timeline` for scroll-linked animations.
+ *
+ * Methods:
+ * - `scrollTo(options)`: Scrolls to a specific position or child.
+ * - `autoScroll(options)`: Starts or stops auto-scrolling.
+ */
+export { ScrollView } from './ScrollView.js';

package/dist/elements/ScrollView/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.
+/**
+ * @module elements/ScrollView
+ *
+ * `scroll-view` provides a scrollable container.
+ *
+ * Attributes:
+ * - `scroll-top`: Sets the vertical scroll position.
+ * - `scroll-left`: Sets the horizontal scroll position.
+ * - `initial-scroll-offset`: Sets the initial scroll position (in px).
+ * - `scroll-to-index`: Scrolls to the child element at the specified index.
+ * - `initial-scroll-to-index`: Scrolls to the child element at the specified index on init.
+ * - `fading-edge-length`: Sets the length of the fading edge effect.
+ * - `scroll-orientation`: 'vertical' | 'horizontal' | 'both'.
+ * - `scroll-y`: 'true' | 'false' to enable vertical scrolling.
+ * - `scroll-x`: 'true' | 'false' to enable horizontal scrolling.
+ * - `enable-scroll`: 'true' | 'false', creates a scrolling container.
+ *
+ * Events:
+ * - `scrolltoupper`: Reached top threshold.
+ * - `scrolltolower`: Reached bottom threshold.
+ * - `scroll`: Fired on scroll. Detail: `{ scrollTop, scrollLeft, scrollHeight, scrollWidth, deltaX, deltaY }`.
+ *
+ * CSS:
+ * - Forces `display: flex` and linear layout behavior.
+ * - Hides scrollbars by default (unless enabled via attribute).
+ * - Uses `scroll-timeline` for scroll-linked animations.
+ *
+ * Methods:
+ * - `scrollTo(options)`: Scrolls to a specific position or child.
+ * - `autoScroll(options)`: Starts or stops auto-scrolling.
+ */
+export { ScrollView } from './ScrollView.js';
+//# sourceMappingURL=index.js.map

package/dist/{XAudioTT → elements/XAudioTT}/XAudioAttribute.d.ts

@@ -1,7 +1,10 @@
-import { type AttributeReactiveClass } from '@lynx-js/web-elements-reactive';
+import { type AttributeReactiveClass } from '../../element-reactive/index.js';
 import type { XAudioTT } from './XAudioTT.js';
 export declare class XAudioAttribute implements InstanceType<AttributeReactiveClass<typeof HTMLElement>> {
     #private;
     static observedAttributes: string[];
+    _handleSrc(newValue: string | null): void;
+    _handleLoop: (this: void, newVal: string | null) => void;
+    _handlePauseOnHide(newValue: string | null): void;
     constructor(dom: XAudioTT);
 }