@lynx-js/web-elements 0.5.4 → 0.7.0

package/CHANGELOG.md

@@ -1,5 +1,82 @@
 # @lynx-js/web-elements
 
+## 0.7.0
+
+### Minor Changes
+
+- fix: ([#629](https://github.com/lynx-family/lynx-stack/pull/629))
+
+  - typo of `initial-scroll-offset` in scroll-view.
+  - scroll-view's `initial-scroll-index` is changed to `initial-scroll-to-index`.
+
+### Patch Changes
+
+- fix: x-image border-radius setting has no effect. ([#638](https://github.com/lynx-family/lynx-stack/pull/638))
+
+- perf: late evaluate document.font.ready ([#604](https://github.com/lynx-family/lynx-stack/pull/604))
+
+- perf: improve raw-text performance ([#601](https://github.com/lynx-family/lynx-stack/pull/601))
+
+- fix: the scroll-x field of scroll-view needs to be handled correctly. ([#635](https://github.com/lynx-family/lynx-stack/pull/635))
+
+  Before this, scroll-x of '' would result in no scrolling along x-axis.
+
+- feat: x-list supports `need-visible-item-info`, now you can get visible cells info in `scroll`、`scrolltoupper`、`scrolltolower` event. ([#595](https://github.com/lynx-family/lynx-stack/pull/595))
+
+## 0.6.0
+
+### Minor Changes
+
+- fix: When list-type is not specified, it is treated as single formatting. ([#535](https://github.com/lynx-family/lynx-stack/pull/535))
+
+- feat: improve compatibility for chrome 108 & support linear-gradient for nested x-text ([#590](https://github.com/lynx-family/lynx-stack/pull/590))
+
+  **This is a breaking change**
+
+  - Please upgrade your `@lynx-js/web-elements` to >=0.6.0
+  - Please upgrade your `@lynx-js/web-core` to >=0.12.0
+  - The compiled lynx template json won't be impacted.
+
+  On chrome 108, the `-webkit-background-clip:text` cannot be computed by a `var(--css-var-value-text)`
+
+  Therefore we move the logic into style transformation logic.
+
+  Now the following status is supported
+
+  ```
+  <text style="color:linear-gradient()">
+    <text>
+    <text>
+  </text>
+  ```
+
+### Patch Changes
+
+- feat: fully support MTS ([#569](https://github.com/lynx-family/lynx-stack/pull/569))
+
+  Now use support the following usage
+
+  - mainthread event
+  - mainthread ref
+  - runOnMainThread/runOnBackground
+  - ref.current.xx
+
+- feat: support `layoutchange` event for x-overlay-ng ([#519](https://github.com/lynx-family/lynx-stack/pull/519))
+
+- fix: position:fixed not work in scroll-view ([#580](https://github.com/lynx-family/lynx-stack/pull/580))
+
+- fix: x-list may cause error: 'Resizeobserver loop completed with undelivered notifications'. ([#541](https://github.com/lynx-family/lynx-stack/pull/541))
+
+- fix: refactor foldview slot offset logic ([#575](https://github.com/lynx-family/lynx-stack/pull/575))
+
+- fix: improve x-foldview-ng ([#513](https://github.com/lynx-family/lynx-stack/pull/513))
+
+  - support fling for touch event driven scrolling
+  - allow the height of `x-foldview-slot-ng` + `x-foldview-toolbar-ng` > `x-foldview-ng`
+  - do not prevent horizontal gesture. After this commit we only allow one direction gesture for one touch (start -> end)
+
+- feat: add list with waterfall ([#331](https://github.com/lynx-family/lynx-stack/pull/331))
+
 ## 0.5.4
 
 ### Patch Changes

package/dist/ScrollView/ScrollAttributes.js

@@ -14,8 +14,8 @@ let ScrollAttributes = (() => {
     return class ScrollAttributes {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
-            _private_handleInitialScrollOffset_decorators = [registerAttributeHandler('scroll-top', false), registerAttributeHandler('scroll-left', false), registerAttributeHandler('nitial-scroll-offset', false)];
-            _private_handleInitialScrollIndex_decorators = [registerAttributeHandler('scroll-to-index', false), registerAttributeHandler('initial-scroll-index', false)];
+            _private_handleInitialScrollOffset_decorators = [registerAttributeHandler('scroll-top', false), registerAttributeHandler('scroll-left', false), registerAttributeHandler('initial-scroll-offset', false)];
+            _private_handleInitialScrollIndex_decorators = [registerAttributeHandler('scroll-to-index', false), registerAttributeHandler('initial-scroll-to-index', false)];
             __esDecorate(this, _private_handleInitialScrollOffset_descriptor = { value: __setFunctionName(function (newVal, _, attributeName) {
                     if (newVal) {
                         const scrollValue = parseFloat(newVal);
@@ -49,7 +49,7 @@ let ScrollAttributes = (() => {
                         const scrollValue = parseFloat(newVal);
                         const childrenElement = this.#dom.children.item(scrollValue);
                         if (childrenElement && childrenElement instanceof HTMLElement) {
-                            const scrollX = !!this.#dom.getAttribute('scroll-x');
+                            const scrollX = this.#dom.getAttribute('scroll-x') !== null;
                             requestAnimationFrame(() => {
                                 if (scrollX) {
                                     this.#dom.scrollLeft = childrenElement.offsetLeft;
@@ -69,7 +69,7 @@ let ScrollAttributes = (() => {
             'scroll-left',
             'initial-scroll-offset',
             'scroll-to-index',
-            'initial-scroll-index',
+            'initial-scroll-to-index',
         ];
         constructor(dom) {
             this.#dom = dom;

package/dist/ScrollView/ScrollView.js

@@ -4,16 +4,16 @@ 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 { LynxExposure } from '../common/Exposure.js';
+import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 import { FadeEdgeLengthAttribute } from './FadeEdgeLengthAttribute.js';
 import { ScrollAttributes } from './ScrollAttributes.js';
 import { ScrollViewEvents } from './ScrollViewEvents.js';
 import { ScrollIntoView } from './ScrollIntoView.js';
-import { Component, genDomGetter, html } from '@lynx-js/web-elements-reactive';
+import { Component, html } from '@lynx-js/web-elements-reactive';
 import { scrollContainerDom } from '../common/constants.js';
 let ScrollView = (() => {
     let _classDecorators = [Component('scroll-view', [
-            LynxExposure,
+            CommonEventsAndMethods,
             ScrollAttributes,
             FadeEdgeLengthAttribute,
             ScrollViewEvents,

package/dist/XAudioTT/XAudioTT.js

@@ -7,11 +7,11 @@ import { __esDecorate, __runInitializers } from "tslib";
 import { Component, html, genDomGetter, bindToAttribute, } from '@lynx-js/web-elements-reactive';
 import { XAudioAttribute } from './XAudioAttribute.js';
 import { XAudioEvents } from './XAudioEvents.js';
-import { LynxExposure } from '../common/Exposure.js';
+import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 import { commonComponentEventSetting } from '../common/commonEventInitConfiguration.js';
 import { XAudioErrorCode, audioPlaybackStateMap, getAudioState, xAudioBlob, xAudioSrc, } from './utils.js';
 let XAudioTT = (() => {
-    let _classDecorators = [Component('x-audio-tt', [LynxExposure, XAudioAttribute, XAudioEvents], html `<audio id="audio"></audio>`)];
+    let _classDecorators = [Component('x-audio-tt', [CommonEventsAndMethods, XAudioAttribute, XAudioEvents], html `<audio id="audio"></audio>`)];
     let _classDescriptor;
     let _classExtraInitializers = [];
     let _classThis;

package/dist/XCanvas/XCanvas.js

@@ -5,13 +5,13 @@ import { __esDecorate, __runInitializers } from "tslib";
 // LICENSE file in the root directory of this source tree.
 */
 import { Component, html } from '@lynx-js/web-elements-reactive';
-import { LynxExposure } from '../common/Exposure.js';
+import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 import { CanvasAttributes } from './CanvasAttributes.js';
 /**
  * @deprecated this proposals cannot be implemented on other platforms
  */
 let XCanvas = (() => {
-    let _classDecorators = [Component('x-canvas', [LynxExposure, CanvasAttributes], html `<canvas id="canvas" part="canvas"></canvas>`)];
+    let _classDecorators = [Component('x-canvas', [CommonEventsAndMethods, CanvasAttributes], html `<canvas id="canvas" part="canvas"></canvas>`)];
     let _classDescriptor;
     let _classExtraInitializers = [];
     let _classThis;

package/dist/XFoldViewNg/XFoldviewHeaderNg.d.ts

@@ -1,2 +1,4 @@
 export declare class XFoldviewHeaderNg extends HTMLElement {
+    connectedCallback(): void;
+    dispose(): void;
 }

package/dist/XFoldViewNg/XFoldviewHeaderNg.js

@@ -5,12 +5,11 @@ import { __esDecorate, __runInitializers } from "tslib";
 // LICENSE file in the root directory of this source tree.
 */
 import { Component } from '@lynx-js/web-elements-reactive';
-import { LynxExposure } from '../common/Exposure.js';
-import { XFoldviewHeaderNgFeatures } from './XFoldviewHeaderNgFeatures.js';
+import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
+import { resizeObserver } from './XFoldviewNg.js';
 let XFoldviewHeaderNg = (() => {
     let _classDecorators = [Component('x-foldview-header-ng', [
-            LynxExposure,
-            XFoldviewHeaderNgFeatures,
+            CommonEventsAndMethods,
         ])];
     let _classDescriptor;
     let _classExtraInitializers = [];
@@ -25,6 +24,12 @@ let XFoldviewHeaderNg = (() => {
             if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
             __runInitializers(_classThis, _classExtraInitializers);
         }
+        connectedCallback() {
+            this.parentElement?.[resizeObserver]?.observe(this);
+        }
+        dispose() {
+            this.parentElement?.[resizeObserver]?.unobserve(this);
+        }
     };
     return XFoldviewHeaderNg = _classThis;
 })();

package/dist/XFoldViewNg/XFoldviewNg.d.ts

@@ -1,11 +1,22 @@
 import { scrollContainerDom } from '../common/constants.js';
+import type { XFoldviewSlotNg } from './XFoldviewSlotNg.js';
+export declare const scrollableLength: unique symbol;
+export declare const isHeaderShowing: unique symbol;
+export declare const resizeObserver: unique symbol;
+export declare const slotKid: unique symbol;
 export declare class XFoldviewNg extends HTMLElement {
+    #private;
     static readonly notToFilterFalseAttributes: Set<string>;
-    __scrollableLength: number;
-    get __headershowing(): boolean;
+    [slotKid]?: XFoldviewSlotNg;
+    [resizeObserver]?: ResizeObserver;
+    get [scrollableLength](): number;
+    get [isHeaderShowing](): boolean;
+    get scrollTop(): number;
+    set scrollTop(value: number);
     setFoldExpanded(params: {
         offset: string;
         smooth: boolean;
     }): void;
     get [scrollContainerDom](): this;
+    disconnectedCallback(): void;
 }

package/dist/XFoldViewNg/XFoldviewNg.js

@@ -5,12 +5,16 @@ import { __esDecorate, __runInitializers } from "tslib";
 // LICENSE file in the root directory of this source tree.
 */
 import { Component } from '@lynx-js/web-elements-reactive';
-import { LynxExposure } from '../common/Exposure.js';
+import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 import { XFoldviewNgEvents } from './XFoldviewNgEvents.js';
 import { scrollContainerDom } from '../common/constants.js';
+export const scrollableLength = Symbol('scrollableLength');
+export const isHeaderShowing = Symbol('isHeaderShowing');
+export const resizeObserver = Symbol('resizeObserver');
+export const slotKid = Symbol('slotKid');
 let XFoldviewNg = (() => {
     let _classDecorators = [Component('x-foldview-ng', [
-            LynxExposure,
+            CommonEventsAndMethods,
             XFoldviewNgEvents,
         ])];
     let _classDescriptor;
@@ -26,10 +30,40 @@ let XFoldviewNg = (() => {
             if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
         static notToFilterFalseAttributes = new Set(['scroll-enable']);
-        __scrollableLength = 0;
-        get __headershowing() {
+        [slotKid];
+        [resizeObserver] = new ResizeObserver((resizeEntries) => {
+            for (const resize of resizeEntries) {
+                if (resize.target.tagName === 'X-FOLDVIEW-HEADER-NG') {
+                    this.#headerHeight = resize.contentRect.height;
+                }
+                else if (resize.target.tagName === 'X-FOLDVIEW-TOOLBAR-NG') {
+                    this.#toolbarHeight = resize.contentRect.height;
+                }
+            }
+            if (this[slotKid]) {
+                this[slotKid].style.top = `${this.#headerHeight - this.#toolbarHeight}px`;
+            }
+        });
+        #headerHeight = 0;
+        #toolbarHeight = 0;
+        get [scrollableLength]() {
+            return this.#headerHeight - this.#toolbarHeight;
+        }
+        get [isHeaderShowing]() {
             // This behavior cannot be reproduced in the current test, but can be reproduced in Android WebView
-            return Math.abs(this.scrollTop - this.__scrollableLength) > 1;
+            return this[scrollableLength] - this.scrollTop >= 1;
+        }
+        get scrollTop() {
+            return super.scrollTop;
+        }
+        set scrollTop(value) {
+            if (value > this[scrollableLength]) {
+                value = this[scrollableLength];
+            }
+            else if (value < 0) {
+                value = 0;
+            }
+            super.scrollTop = value;
         }
         setFoldExpanded(params) {
             const { offset, smooth = true } = params;
@@ -42,6 +76,10 @@ let XFoldviewNg = (() => {
         get [scrollContainerDom]() {
             return this;
         }
+        disconnectedCallback() {
+            this[resizeObserver]?.disconnect();
+            this[resizeObserver] = undefined;
+        }
         static {
             __runInitializers(_classThis, _classExtraInitializers);
         }

package/dist/XFoldViewNg/XFoldviewNgEvents.d.ts

@@ -1,5 +1,5 @@
 import { type AttributeReactiveClass } from '@lynx-js/web-elements-reactive';
-import type { XFoldviewNg } from './XFoldviewNg.js';
+import { type XFoldviewNg } from './XFoldviewNg.js';
 export declare class XFoldviewNgEvents implements InstanceType<AttributeReactiveClass<typeof XFoldviewNg>> {
     #private;
     constructor(dom: XFoldviewNg);

package/dist/XFoldViewNg/XFoldviewNgEvents.js

@@ -4,22 +4,36 @@ import { __esDecorate, __runInitializers, __setFunctionName } 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 { registerAttributeHandler, } from '@lynx-js/web-elements-reactive';
+import { registerAttributeHandler, registerEventEnableStatusChangeHandler, } from '@lynx-js/web-elements-reactive';
 import { commonComponentEventSetting } from '../common/commonEventInitConfiguration.js';
+import { scrollableLength } from './XFoldviewNg.js';
 let XFoldviewNgEvents = (() => {
     let _instanceExtraInitializers = [];
     let _private_handleGranularity_decorators;
     let _private_handleGranularity_descriptor;
+    let _private_enableOffsetEvent_decorators;
+    let _private_enableOffsetEvent_descriptor;
     return class XFoldviewNgEvents {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
             _private_handleGranularity_decorators = [registerAttributeHandler('granularity', true)];
+            _private_enableOffsetEvent_decorators = [registerEventEnableStatusChangeHandler('offset')];
             __esDecorate(this, _private_handleGranularity_descriptor = { value: __setFunctionName(function (newVal) {
                     if (newVal && newVal !== '')
                         this.#granularity = parseFloat(newVal);
                     else
                         this.#granularity = 0.01;
                 }, "#handleGranularity") }, _private_handleGranularity_decorators, { kind: "method", name: "#handleGranularity", static: false, private: true, access: { has: obj => #handleGranularity in obj, get: obj => obj.#handleGranularity }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, _private_enableOffsetEvent_descriptor = { value: __setFunctionName(function (enable) {
+                    if (enable) {
+                        this.#dom.addEventListener('scroll', this.#handleScroll, {
+                            passive: true,
+                        });
+                    }
+                    else {
+                        this.#dom.removeEventListener('scroll', this.#handleScroll);
+                    }
+                }, "#enableOffsetEvent") }, _private_enableOffsetEvent_decorators, { kind: "method", name: "#enableOffsetEvent", static: false, private: true, access: { has: obj => #enableOffsetEvent in obj, get: obj => obj.#enableOffsetEvent }, metadata: _metadata }, null, _instanceExtraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
         #dom = __runInitializers(this, _instanceExtraInitializers);
@@ -27,12 +41,10 @@ let XFoldviewNgEvents = (() => {
         #pervScroll = 0;
         constructor(dom) {
             this.#dom = dom;
-            this.#dom.addEventListener('scroll', this.#handleScroll, {
-                passive: true,
-            });
         }
         static observedAttributes = ['granularity'];
         get #handleGranularity() { return _private_handleGranularity_descriptor.value; }
+        get #enableOffsetEvent() { return _private_enableOffsetEvent_descriptor.value; }
         #handleScroll = () => {
             const curentScrollTop = this.#dom.scrollTop;
             const scrollLength = Math.abs(this.#pervScroll - curentScrollTop);
@@ -44,7 +56,7 @@ let XFoldviewNgEvents = (() => {
                     ...commonComponentEventSetting,
                     detail: {
                         offset: curentScrollTop,
-                        height: this.#dom.__scrollableLength,
+                        height: this.#dom[scrollableLength],
                     },
                 }));
             }

package/dist/XFoldViewNg/XFoldviewSlotDragNg.js

@@ -5,10 +5,10 @@ import { __esDecorate, __runInitializers } from "tslib";
 // LICENSE file in the root directory of this source tree.
 */
 import { Component } from '@lynx-js/web-elements-reactive';
-import { LynxExposure } from '../common/Exposure.js';
+import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 let XFoldviewSlotDragNg = (() => {
     let _classDecorators = [Component('x-foldivew-slot-drag-ng', [
-            LynxExposure,
+            CommonEventsAndMethods,
         ])];
     let _classDescriptor;
     let _classExtraInitializers = [];

package/dist/XFoldViewNg/XFoldviewSlotNg.d.ts

@@ -1,2 +1,3 @@
 export declare class XFoldviewSlotNg extends HTMLElement {
+    connectedCallback(): void;
 }

package/dist/XFoldViewNg/XFoldviewSlotNg.js

@@ -5,11 +5,12 @@ import { __esDecorate, __runInitializers } from "tslib";
 // LICENSE file in the root directory of this source tree.
 */
 import { Component } from '@lynx-js/web-elements-reactive';
-import { LynxExposure } from '../common/Exposure.js';
+import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 import { XFoldviewSlotNgTouchEventsHandler } from './XFoldviewSlotNgTouchEventsHandler.js';
+import { slotKid } from './XFoldviewNg.js';
 let XFoldviewSlotNg = (() => {
     let _classDecorators = [Component('x-foldview-slot-ng', [
-            LynxExposure,
+            CommonEventsAndMethods,
             XFoldviewSlotNgTouchEventsHandler,
         ])];
     let _classDescriptor;
@@ -25,6 +26,11 @@ let XFoldviewSlotNg = (() => {
             if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
             __runInitializers(_classThis, _classExtraInitializers);
         }
+        connectedCallback() {
+            if (this.matches('x-foldview-ng>x-foldview-slot-ng:first-of-type')) {
+                this.parentElement[slotKid] = this;
+            }
+        }
     };
     return XFoldviewSlotNg = _classThis;
 })();

package/dist/XFoldViewNg/XFoldviewSlotNgTouchEventsHandler.js

@@ -1,11 +1,14 @@
+import { isHeaderShowing } from './XFoldviewNg.js';
 import { isChromium } from '../common/constants.js';
 export class XFoldviewSlotNgTouchEventsHandler {
     #parentScrollTop = 0;
     #childrenElemsntsScrollTop = new WeakMap();
-    #childrenElemsntsScrollLeft = new WeakMap();
     #elements;
     #previousPageY = 0;
     #previousPageX = 0;
+    #scrollingVertically = null;
+    #currentScrollingElement;
+    #deltaY = 0;
     #dom;
     static observedAttributes = [];
     constructor(dom) {
@@ -13,76 +16,72 @@ export class XFoldviewSlotNgTouchEventsHandler {
         this.#dom.addEventListener('touchmove', this.#scroller, {
             passive: false,
         });
-        this.#dom.addEventListener('touchstart', this.#initPreviousScreen, {
+        this.#dom.addEventListener('touchstart', this.#touchStart, {
             passive: true,
         });
-        this.#dom.addEventListener('touchcancel', this.#initPreviousScreen, {
+        this.#dom.addEventListener('touchend', this.#touchEnd, {
             passive: true,
         });
     }
-    #getTheMostScrollableKid(delta, isVertical) {
+    #getTheMostScrollableKid(delta) {
         const scrollableKid = this.#elements?.find((element) => {
-            if ((isVertical && element.scrollHeight > element.clientHeight)
-                || (!isVertical && element.scrollWidth > element.clientWidth)) {
+            if (element.scrollHeight > element.clientHeight) {
                 const couldScrollNear = delta < 0
-                    && (isVertical ? element.scrollTop !== 0 : element.scrollLeft !== 0);
+                    && element.scrollTop !== 0;
                 const couldScrollFar = delta > 0
-                    && Math.abs(isVertical
-                        ? (element.scrollHeight - element.clientHeight
-                            - element.scrollTop)
-                        : (element.scrollWidth - element.clientWidth
-                            - element.scrollLeft)) > 1;
+                    && Math.abs(element.scrollHeight - element.clientHeight
+                        - element.scrollTop) > 1;
                 return couldScrollNear || couldScrollFar;
             }
             return false;
         });
         return scrollableKid;
     }
-    #scrollKid(scrollableKid, delta, isVertical) {
-        let targetKidScrollDistance = (isVertical
-            ? this.#childrenElemsntsScrollTop
-            : this.#childrenElemsntsScrollLeft)
-            .get(scrollableKid) ?? 0;
+    #scrollKid(scrollableKid, delta) {
+        let targetKidScrollDistance = this.#childrenElemsntsScrollTop.get(scrollableKid) ?? 0;
         targetKidScrollDistance += delta;
         this.#childrenElemsntsScrollTop.set(scrollableKid, targetKidScrollDistance);
-        isVertical
-            ? (scrollableKid.scrollTop = targetKidScrollDistance)
-            : (scrollableKid.scrollLeft = targetKidScrollDistance);
+        scrollableKid.scrollTop = targetKidScrollDistance;
     }
     #scroller = (event) => {
         const parentElement = this.#getParentElement();
         const touch = event.touches.item(0);
         const { pageY, pageX } = touch;
         const deltaY = this.#previousPageY - pageY;
-        const deltaX = this.#previousPageX - pageX;
-        const scrollableKidY = this.#getTheMostScrollableKid(deltaY, true);
-        const scrollableKidX = this.#getTheMostScrollableKid(deltaX, false);
-        /**
-         * on chromium browsers, the y-axis js scrolling won't interrupt the pan-x gestures
-         * we make sure the x-axis scrolling will block the y-axis scrolling
-         */
-        if (deltaY && parentElement && Math.abs(deltaX / 4) < Math.abs(deltaY)) {
-            if (event.cancelable && !isChromium) {
+        if (this.#scrollingVertically === null) {
+            const deltaX = this.#previousPageX - pageX;
+            this.#scrollingVertically = Math.abs(deltaY) > Math.abs(deltaX);
+        }
+        if (this.#scrollingVertically === false) {
+            return;
+        }
+        const scrollableKidY = this.#getTheMostScrollableKid(deltaY);
+        if (parentElement) {
+            if (event.cancelable) {
                 event.preventDefault();
-                if (scrollableKidX) {
-                    this.#scrollKid(scrollableKidX, deltaX, false);
-                }
             }
-            if ((parentElement.__headershowing && deltaY > 0
+            if ((parentElement[isHeaderShowing] && deltaY > 0
                 || (deltaY < 0 && !scrollableKidY))
                 // deltaY > 0: swipe up (folding header)
                 // scroll the foldview if its scrollable
-                || (!parentElement.__headershowing && !scrollableKidY)
+                || (!parentElement[isHeaderShowing] && !scrollableKidY)
             // all sub doms are scrolled
             ) {
+                parentElement.scrollBy({
+                    top: deltaY,
+                    behavior: 'smooth',
+                });
                 this.#parentScrollTop += deltaY;
                 parentElement.scrollTop = this.#parentScrollTop;
+                this.#currentScrollingElement = parentElement;
             }
             else if (scrollableKidY) {
-                this.#scrollKid(scrollableKidY, deltaY, true);
+                this.#currentScrollingElement = scrollableKidY;
+                this.#scrollKid(scrollableKidY, deltaY);
             }
         }
         this.#previousPageY = pageY;
+        this.#deltaY = deltaY;
     };
     #getParentElement() {
         const parentElement = this.#dom.parentElement;
@@ -90,7 +89,7 @@ export class XFoldviewSlotNgTouchEventsHandler {
             return parentElement;
         }
     }
-    #initPreviousScreen = (event) => {
+    #touchStart = (event) => {
         const { pageX, pageY } = event.touches.item(0);
         this.#elements = document.elementsFromPoint(pageX, pageY).filter(e => this.#dom.contains(e));
         this.#previousPageY = pageY;
@@ -98,7 +97,22 @@ export class XFoldviewSlotNgTouchEventsHandler {
         this.#parentScrollTop = this.#getParentElement()?.scrollTop ?? 0;
         for (const element of this.#elements) {
             this.#childrenElemsntsScrollTop.set(element, element.scrollTop);
-            this.#childrenElemsntsScrollLeft.set(element, element.scrollLeft);
+        }
+        this.#scrollingVertically = null;
+        this.#currentScrollingElement = undefined;
+    };
+    #touchEnd = () => {
+        this.#scrollingVertically = null;
+        if (this.#currentScrollingElement) {
+            const parentElement = this.#getParentElement();
+            if (this.#currentScrollingElement === parentElement
+                && !parentElement[isHeaderShowing]) {
+                return;
+            }
+            this.#currentScrollingElement.scrollBy({
+                top: this.#deltaY * 4,
+                behavior: 'smooth',
+            });
         }
     };
 }

package/dist/XFoldViewNg/XFoldviewToolbarNg.d.ts

@@ -1,2 +1,4 @@
 export declare class XFoldviewToolbarNg extends HTMLElement {
+    connectedCallback(): void;
+    dispose(): void;
 }

package/dist/XFoldViewNg/XFoldviewToolbarNg.js

@@ -5,10 +5,11 @@ import { __esDecorate, __runInitializers } from "tslib";
 // LICENSE file in the root directory of this source tree.
 */
 import { Component } from '@lynx-js/web-elements-reactive';
-import { LynxExposure } from '../common/Exposure.js';
+import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
+import { resizeObserver } from './XFoldviewNg.js';
 let XFoldviewToolbarNg = (() => {
     let _classDecorators = [Component('x-foldview-toolbar-ng', [
-            LynxExposure,
+            CommonEventsAndMethods,
         ])];
     let _classDescriptor;
     let _classExtraInitializers = [];
@@ -23,6 +24,12 @@ let XFoldviewToolbarNg = (() => {
             if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
             __runInitializers(_classThis, _classExtraInitializers);
         }
+        connectedCallback() {
+            this.parentElement?.[resizeObserver]?.observe(this);
+        }
+        dispose() {
+            this.parentElement?.[resizeObserver]?.unobserve(this);
+        }
     };
     return XFoldviewToolbarNg = _classThis;
 })();

package/dist/XImage/FilterImage.js

@@ -5,12 +5,12 @@ import { __esDecorate, __runInitializers } from "tslib";
 // LICENSE file in the root directory of this source tree.
 */
 import { Component, html } from '@lynx-js/web-elements-reactive';
-import { LynxExposure } from '../common/Exposure.js';
+import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 import { DropShadow } from './DropShadow.js';
 import { ImageSrc } from './ImageSrc.js';
 import { ImageEvents } from './ImageEvents.js';
 let FilterImage = (() => {
-    let _classDecorators = [Component('filter-image', [LynxExposure, ImageSrc, DropShadow, ImageEvents], html ` <img part="img" alt="" id="img" /> `)];
+    let _classDecorators = [Component('filter-image', [CommonEventsAndMethods, ImageSrc, DropShadow, ImageEvents], html ` <img part="img" alt="" id="img" /> `)];
     let _classDescriptor;
     let _classExtraInitializers = [];
     let _classThis;

package/dist/XImage/XImage.js

@@ -5,11 +5,11 @@ import { __esDecorate, __runInitializers } from "tslib";
 // LICENSE file in the root directory of this source tree.
 */
 import { Component, html } from '@lynx-js/web-elements-reactive';
-import { LynxExposure } from '../common/Exposure.js';
+import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 import { ImageSrc } from './ImageSrc.js';
 import { ImageEvents } from './ImageEvents.js';
 let XImage = (() => {
-    let _classDecorators = [Component('x-image', [LynxExposure, ImageSrc, ImageEvents], html ` <img part="img" alt="" id="img" /> `)];
+    let _classDecorators = [Component('x-image', [CommonEventsAndMethods, ImageSrc, ImageEvents], html ` <img part="img" alt="" id="img" /> `)];
     let _classDescriptor;
     let _classExtraInitializers = [];
     let _classThis;