@lynx-js/web-elements 0.10.1 → 0.11.1

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @lynx-js/web-elements
 
+## 0.11.1
+
+### Patch Changes
+
+- feat: add wheel event handling and corresponding tests for x-foldview-ng ([#2145](https://github.com/lynx-family/lynx-stack/pull/2145))
+
+## 0.11.0
+
+### Minor Changes
+
+- feat: integrate the LinearContainer Compat plugin ([#2100](https://github.com/lynx-family/lynx-stack/pull/2100))
+
+  **This is a BREAKING CHANGE**
+
+  Now we integrated the `LinearCompat` into @lynx-js/web-elements. Developers can safely remove the following imports:
+
+  ```js
+  import '@lynx-js/web-elements/compat/LinearContainer';
+  ```
+
+  ```js
+  import '@lynx-js/web-elements-compat/LinearContainer';
+  ```
+
+### Patch Changes
+
+- fix: list-item `contain` property changes from `size` to `layout paint`, because the size of the `list-item` can be expanded by its children. ([#2043](https://github.com/lynx-family/lynx-stack/pull/2043))
+
+- Use the scoped `@lynx-js/source-field` for source build resolution. ([#2096](https://github.com/lynx-family/lynx-stack/pull/2096))
+
 ## 0.10.1
 
 ### Patch Changes

package/dist/compat/LinearContainer/LinearContainer.d.ts

@@ -1,8 +1,10 @@
 import { type AttributeReactiveClass } from '../../element-reactive/index.js';
 import '../../../src/compat/LinearContainer/linear-compat.css';
-export declare class LinearContainer implements InstanceType<AttributeReactiveClass<typeof HTMLElement>> {
+declare class LinearContainerImpl implements InstanceType<AttributeReactiveClass<typeof HTMLElement>> {
     #private;
     static readonly observedAttributes: never[];
     static readonly observedCSSProperties: string[];
     constructor(currentElement: HTMLElement);
 }
+export declare const LinearContainer: typeof LinearContainerImpl | undefined;
+export {};

package/dist/compat/LinearContainer/LinearContainer.js

@@ -50,7 +50,7 @@ import '../../../src/compat/LinearContainer/linear-compat.css';
 const supportContainerStyleQuery = CSS.supports('width:1rex')
     && CSS.supports('transition-behavior:allow-discrete')
     && CSS.supports('content-visibility: auto');
-export class LinearContainer {
+class LinearContainerImpl {
     static observedAttributes = [];
     static observedCSSProperties = [
         '--lynx-display',
@@ -68,42 +68,7 @@ export class LinearContainer {
     #setComputedDisplay = bindToAttribute(() => this.#dom, 'lynx-computed-display');
     #setLinearOrientation = bindToAttribute(() => this.#dom, 'lynx-linear-orientation');
 }
-/**
- * remove this once firefox supports @container style()
- * @see https://developer.mozilla.org/en-US/docs/Web/CSS/@container
- * @see https://bugzilla.mozilla.org/show_bug.cgi?id=1795622
- */
-if (!supportContainerStyleQuery) {
-    const targetElements = new Set([
-        'x-view',
-        'scroll-view',
-        'x-foldview-header-ng',
-        'x-foldview-ng',
-        'x-foldview-slot-drag-ng',
-        'x-foldview-slot-ng',
-        'x-foldview-toolbar-ng',
-        'x-refresh-footer',
-        'x-refresh-header',
-        'x-refresh-view',
-        'x-swiper-item',
-        'x-viewpager-item-ng',
-        'x-viewpager-ng',
-    ]);
-    const realDefine = customElements.define.bind(customElements);
-    const fakeDefine = (name, cls, options) => {
-        if (targetElements.has(name)) {
-            cls.registerPlugin?.(LinearContainer);
-            targetElements.delete(name);
-        }
-        realDefine(name, cls, options);
-    };
-    customElements.define = fakeDefine;
-    for (const tag of targetElements) {
-        (customElements.whenDefined(tag)).then((cls) => {
-            if (targetElements.has(tag)) {
-                cls.registerPlugin?.(LinearContainer);
-            }
-        });
-    }
-}
+export const LinearContainer = supportContainerStyleQuery
+    ? undefined
+    : LinearContainerImpl;
 //# sourceMappingURL=LinearContainer.js.map

package/dist/compat/index.d.ts

@@ -0,0 +1 @@
+export { LinearContainer } from './LinearContainer/LinearContainer.js';

package/dist/compat/index.js

@@ -0,0 +1,2 @@
+export { LinearContainer } from './LinearContainer/LinearContainer.js';
+//# sourceMappingURL=index.js.map

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

@@ -40,4 +40,4 @@ export type AttributeReactiveObject = {
     dispose?(): void;
     connectedCallback?(): void;
 };
-export declare function Component<T extends WebComponentClass>(tag: string, attributeReactiveClasses: AttributeReactiveClass<T>[], template?: string): (target: T, context: ClassDecoratorContext<T>) => T;
+export declare function Component<T extends WebComponentClass>(tag: string, attributeReactiveClassesOptional: (AttributeReactiveClass<T> | undefined)[], template?: string): (target: T, context: ClassDecoratorContext<T>) => T;

package/dist/element-reactive/component.js

@@ -7,8 +7,9 @@ function convertStyleWithPriority(value, priority) {
         return value;
     }
 }
-export function Component(tag, attributeReactiveClasses, template) {
+export function Component(tag, attributeReactiveClassesOptional, template) {
     let templateElement;
+    const attributeReactiveClasses = attributeReactiveClassesOptional.filter((e) => Boolean(e));
     return (target, { addInitializer }) => {
         const observedStyleProperties = new Set([
             ...attributeReactiveClasses
@@ -158,52 +159,62 @@ export function Component(tag, attributeReactiveClasses, template) {
                 });
             }
             #eventListenerMap = {};
-            addEventListener(type, listener, options) {
-                super.addEventListener(type, listener, options);
-                this.#eventListenerMap[type] ??= {
+            enableEvent(eventName) {
+                this.#eventListenerMap[eventName] ??= {
                     count: 0,
                     listenerCount: new WeakMap(),
                     captureListenerCount: new WeakMap(),
                 };
-                const targetEventInfo = this.#eventListenerMap[type];
-                const capture = typeof options === 'object' ? options.capture : options;
-                const targetMap = capture
-                    ? targetEventInfo.captureListenerCount
-                    : targetEventInfo.listenerCount;
-                const currentListenerCount = targetMap.get(listener) ?? 0;
-                targetMap.set(listener, currentListenerCount + 1);
+                const targetEventInfo = this.#eventListenerMap[eventName];
                 if (targetEventInfo.count === 0) {
                     // trigger eventStatusChangeHandler
                     for (const oneReactive of this.#attributeReactives) {
-                        const handler = oneReactive.eventStatusChangedHandler?.[type];
+                        const handler = oneReactive.eventStatusChangedHandler?.[eventName];
                         if (handler) {
-                            handler.call(oneReactive, true, type);
+                            handler.call(oneReactive, true, eventName);
                         }
                     }
                 }
                 targetEventInfo.count++;
             }
+            disableEvent(eventName) {
+                const targetEventInfo = this.#eventListenerMap[eventName];
+                if (targetEventInfo && targetEventInfo.count > 0) {
+                    targetEventInfo.count--;
+                    if (targetEventInfo.count === 0) {
+                        // trigger eventStatusChangeHandler
+                        for (const oneReactive of this.#attributeReactives) {
+                            const handler = oneReactive.eventStatusChangedHandler?.[eventName];
+                            if (handler) {
+                                handler.call(oneReactive, false, eventName);
+                            }
+                        }
+                    }
+                }
+            }
+            addEventListener(type, listener, options) {
+                super.addEventListener(type, listener, options);
+                this.enableEvent(type);
+                const targetEventInfo = this.#eventListenerMap[type];
+                const capture = typeof options === 'object' ? options.capture : options;
+                const targetMap = capture
+                    ? targetEventInfo.captureListenerCount
+                    : targetEventInfo.listenerCount;
+                const currentListenerCount = targetMap.get(listener) ?? 0;
+                targetMap.set(listener, currentListenerCount + 1);
+            }
             removeEventListener(type, listener, options) {
                 super.removeEventListener(type, listener, options);
                 const capture = typeof options === 'object' ? options.capture : options;
                 const targetEventInfo = this.#eventListenerMap[type];
                 if (targetEventInfo && targetEventInfo.count > 0) {
                     const targetMap = capture
-                        ? targetEventInfo?.captureListenerCount
-                        : targetEventInfo?.listenerCount;
+                        ? targetEventInfo.captureListenerCount
+                        : targetEventInfo.listenerCount;
                     const currentListenerCount = targetMap.get(listener);
                     if (currentListenerCount === 1) {
-                        targetEventInfo.listenerCount.delete(listener);
-                        targetEventInfo.count--;
-                        if (targetEventInfo.count === 0) {
-                            // trigger eventStatusChangeHandler
-                            for (const oneReactive of this.#attributeReactives) {
-                                const handler = oneReactive.eventStatusChangedHandler?.[type];
-                                if (handler) {
-                                    handler.call(oneReactive, false, type);
-                                }
-                            }
-                        }
+                        targetMap.delete(listener);
+                        this.disableEvent(type);
                     }
                 }
             }

package/dist/elements/ScrollView/ScrollView.js

@@ -12,8 +12,10 @@ import { ScrollIntoView } from './ScrollIntoView.js';
 import { Component } from '../../element-reactive/index.js';
 import { scrollContainerDom } from '../common/constants.js';
 import { templateScrollView } from '../htmlTemplates.js';
+import { LinearContainer } from '../../compat/index.js';
 let ScrollView = (() => {
     let _classDecorators = [Component('scroll-view', [
+            LinearContainer,
             CommonEventsAndMethods,
             ScrollAttributes,
             FadeEdgeLengthAttribute,

package/dist/elements/XFoldViewNg/XFoldviewHeaderNg.js

@@ -8,8 +8,10 @@ import { Component } from '../../element-reactive/index.js';
 import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 import { resizeObserver } from './XFoldviewNg.js';
 import { getCombinedDirectParentElement } from '../common/getCombinedParentElement.js';
+import { LinearContainer } from '../../compat/index.js';
 let XFoldviewHeaderNg = (() => {
     let _classDecorators = [Component('x-foldview-header-ng', [
+            LinearContainer,
             CommonEventsAndMethods,
         ])];
     let _classDescriptor;

package/dist/elements/XFoldViewNg/XFoldviewNg.js

@@ -8,12 +8,14 @@ import { Component } from '../../element-reactive/index.js';
 import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 import { XFoldviewNgEvents } from './XFoldviewNgEvents.js';
 import { scrollContainerDom } from '../common/constants.js';
+import { LinearContainer } from '../../compat/index.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', [
+            LinearContainer,
             CommonEventsAndMethods,
             XFoldviewNgEvents,
         ])];

package/dist/elements/XFoldViewNg/XFoldviewSlotDragNg.js

@@ -6,8 +6,10 @@ import { __esDecorate, __runInitializers } from "tslib";
 */
 import { Component } from '../../element-reactive/index.js';
 import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
+import { LinearContainer } from '../../compat/index.js';
 let XFoldviewSlotDragNg = (() => {
     let _classDecorators = [Component('x-foldview-slot-drag-ng', [
+            LinearContainer,
             CommonEventsAndMethods,
         ])];
     let _classDescriptor;

package/dist/elements/XFoldViewNg/XFoldviewSlotNg.js

@@ -8,8 +8,10 @@ import { Component } from '../../element-reactive/index.js';
 import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 import { XFoldviewSlotNgTouchEventsHandler } from './XFoldviewSlotNgTouchEventsHandler.js';
 import { slotKid } from './XFoldviewNg.js';
+import { LinearContainer } from '../../compat/index.js';
 let XFoldviewSlotNg = (() => {
     let _classDecorators = [Component('x-foldview-slot-ng', [
+            LinearContainer,
             CommonEventsAndMethods,
             XFoldviewSlotNgTouchEventsHandler,
         ])];

package/dist/elements/XFoldViewNg/XFoldviewSlotNgTouchEventsHandler.js

@@ -12,7 +12,7 @@ export class XFoldviewSlotNgTouchEventsHandler {
     static observedAttributes = [];
     constructor(dom) {
         this.#dom = dom;
-        this.#dom.addEventListener('touchmove', this.#scroller, {
+        this.#dom.addEventListener('touchmove', this.#handleTouch, {
             passive: false,
         });
         this.#dom.addEventListener('touchstart', this.#touchStart, {
@@ -21,6 +21,9 @@ export class XFoldviewSlotNgTouchEventsHandler {
         this.#dom.addEventListener('touchend', this.#touchEnd, {
             passive: true,
         });
+        this.#dom.addEventListener('wheel', this.#handleWheel, {
+            passive: false,
+        });
     }
     #getTheMostScrollableKid(delta) {
         const scrollableKid = this.#elements?.find((element) => {
@@ -42,8 +45,11 @@ export class XFoldviewSlotNgTouchEventsHandler {
         this.#childrenElemsntsScrollTop.set(scrollableKid, targetKidScrollDistance);
         scrollableKid.scrollTop = targetKidScrollDistance;
     }
-    #scroller = (event) => {
+    #handleTouch = (event) => {
         const parentElement = this.#getParentElement();
+        if (!parentElement) {
+            return;
+        }
         const touch = event.touches.item(0);
         const { pageY, pageX } = touch;
         const deltaY = this.#previousPageY - pageY;
@@ -54,33 +60,34 @@ export class XFoldviewSlotNgTouchEventsHandler {
         if (this.#scrollingVertically === false) {
             return;
         }
-        const scrollableKidY = this.#getTheMostScrollableKid(deltaY);
-        if (parentElement) {
-            if (event.cancelable) {
-                event.preventDefault();
-            }
-            if ((parentElement[isHeaderShowing] && deltaY > 0
-                || (deltaY < 0 && !scrollableKidY))
-                // deltaY > 0: swipe up (folding header)
-                // scroll the foldview if its scrollable
-                || (!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.#currentScrollingElement = scrollableKidY;
-                this.#scrollKid(scrollableKidY, deltaY);
-            }
+        if (event.cancelable) {
+            event.preventDefault();
         }
+        this.#handleScrollDelta(deltaY, parentElement);
         this.#previousPageY = pageY;
-        this.#deltaY = deltaY;
+    };
+    #handleWheel = (event) => {
+        const parentElement = this.#getParentElement();
+        if (!parentElement) {
+            return;
+        }
+        if (Math.abs(event.deltaY) <= Math.abs(event.deltaX)) {
+            return;
+        }
+        const pathElements = event.composedPath().filter((element) => element instanceof Element && this.#dom.contains(element));
+        const { clientX, clientY } = event;
+        const pointElements = document.elementsFromPoint(clientX, clientY).filter(e => this.#dom.contains(e));
+        this.#elements = [...new Set([...pathElements, ...pointElements])];
+        this.#parentScrollTop = parentElement.scrollTop;
+        if (this.#elements) {
+            for (const element of this.#elements) {
+                this.#childrenElemsntsScrollTop.set(element, element.scrollTop);
+            }
+        }
+        if (event.cancelable) {
+            event.preventDefault();
+        }
+        this.#handleScrollDelta(event.deltaY, parentElement);
     };
     #getParentElement() {
         const parentElement = this.#dom.parentElement;
@@ -114,5 +121,28 @@ export class XFoldviewSlotNgTouchEventsHandler {
             });
         }
     };
+    #handleScrollDelta(deltaY, parentElement) {
+        const scrollableKidY = this.#getTheMostScrollableKid(deltaY);
+        if ((parentElement[isHeaderShowing] && deltaY > 0
+            || (deltaY < 0 && !scrollableKidY))
+            // deltaY > 0: swipe up (folding header)
+            // scroll the foldview if its scrollable
+            || (!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.#currentScrollingElement = scrollableKidY;
+            this.#scrollKid(scrollableKidY, deltaY);
+        }
+        this.#deltaY = deltaY;
+    }
 }
 //# sourceMappingURL=XFoldviewSlotNgTouchEventsHandler.js.map

package/dist/elements/XFoldViewNg/XFoldviewToolbarNg.js

@@ -8,8 +8,10 @@ import { Component } from '../../element-reactive/index.js';
 import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 import { resizeObserver } from './XFoldviewNg.js';
 import { getCombinedDirectParentElement } from '../common/getCombinedParentElement.js';
+import { LinearContainer } from '../../compat/index.js';
 let XFoldviewToolbarNg = (() => {
     let _classDecorators = [Component('x-foldview-toolbar-ng', [
+            LinearContainer,
             CommonEventsAndMethods,
         ])];
     let _classDescriptor;

package/dist/elements/XRefreshView/XRefreshFooter.js

@@ -7,8 +7,10 @@ import { __esDecorate, __runInitializers } from "tslib";
 import { Component } from '../../element-reactive/index.js';
 import { XRefreshSubElementIntersectionObserver } from './XRefreshSubElementIntersectionObserver.js';
 import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
+import { LinearContainer } from '../../compat/index.js';
 let XRefreshFooter = (() => {
     let _classDecorators = [Component('x-refresh-footer', [
+            LinearContainer,
             CommonEventsAndMethods,
             XRefreshSubElementIntersectionObserver,
         ])];

package/dist/elements/XRefreshView/XRefreshHeader.js

@@ -7,8 +7,10 @@ import { __esDecorate, __runInitializers } from "tslib";
 import { Component } from '../../element-reactive/index.js';
 import { XRefreshSubElementIntersectionObserver } from './XRefreshSubElementIntersectionObserver.js';
 import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
+import { LinearContainer } from '../../compat/index.js';
 let XRefreshHeader = (() => {
     let _classDecorators = [Component('x-refresh-header', [
+            LinearContainer,
             CommonEventsAndMethods,
             XRefreshSubElementIntersectionObserver,
         ])];

package/dist/elements/XRefreshView/XRefreshView.js

@@ -9,8 +9,9 @@ import { XRefreshViewEventsEmitter } from './XRefreshViewEventsEmitter.js';
 import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 import { scrollContainerDom } from '../common/constants.js';
 import { templateXRefreshView } from '../htmlTemplates.js';
+import { LinearContainer } from '../../compat/index.js';
 let XRefreshView = (() => {
-    let _classDecorators = [Component('x-refresh-view', [CommonEventsAndMethods, XRefreshViewEventsEmitter], templateXRefreshView)];
+    let _classDecorators = [Component('x-refresh-view', [LinearContainer, CommonEventsAndMethods, XRefreshViewEventsEmitter], templateXRefreshView)];
     let _classDescriptor;
     let _classExtraInitializers = [];
     let _classThis;

package/dist/elements/XSwiper/SwiperItem.js

@@ -6,8 +6,12 @@ import { __esDecorate, __runInitializers } from "tslib";
 */
 import { Component } from '../../element-reactive/index.js';
 import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
+import { LinearContainer } from '../../compat/index.js';
 let SwiperItem = (() => {
-    let _classDecorators = [Component('x-swiper-item', [CommonEventsAndMethods])];
+    let _classDecorators = [Component('x-swiper-item', [
+            LinearContainer,
+            CommonEventsAndMethods,
+        ])];
     let _classDescriptor;
     let _classExtraInitializers = [];
     let _classThis;

package/dist/elements/XView/XView.js

@@ -7,8 +7,10 @@ import { __esDecorate, __runInitializers } from "tslib";
 import { Component } from '../../element-reactive/index.js';
 import { ScrollIntoView } from '../ScrollView/ScrollIntoView.js';
 import { CommonEventsAndMethods, layoutChangeTarget, } from '../common/CommonEventsAndMethods.js';
+import { LinearContainer } from '../../compat/index.js';
 let XView = (() => {
     let _classDecorators = [Component('x-view', [
+            LinearContainer,
             CommonEventsAndMethods,
         ])];
     let _classDescriptor;

package/dist/elements/XViewpagerNg/XViewpagerItemNg.js

@@ -6,8 +6,10 @@ import { __esDecorate, __runInitializers } from "tslib";
 */
 import { Component } from '../../element-reactive/index.js';
 import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
+import { LinearContainer } from '../../compat/index.js';
 let XViewpagerItemNg = (() => {
     let _classDecorators = [Component('x-viewpager-item-ng', [
+            LinearContainer,
             CommonEventsAndMethods,
         ])];
     let _classDescriptor;

package/dist/elements/XViewpagerNg/XViewpagerNg.js

@@ -9,8 +9,9 @@ import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 import { XViewpagerNgEvents } from './XViewpagerNgEvents.js';
 import { scrollContainerDom } from '../common/constants.js';
 import { templateXViewpageNg } from '../htmlTemplates.js';
+import { LinearContainer } from '../../compat/index.js';
 let XViewpagerNg = (() => {
-    let _classDecorators = [Component('x-viewpager-ng', [CommonEventsAndMethods, XViewpagerNgEvents], templateXViewpageNg)];
+    let _classDecorators = [Component('x-viewpager-ng', [LinearContainer, CommonEventsAndMethods, XViewpagerNgEvents], templateXViewpageNg)];
     let _classDescriptor;
     let _classExtraInitializers = [];
     let _classThis;

package/index.css

@@ -2,5 +2,20 @@
  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 url("./src/compat/LinearContainer/linear-compat.css");
 @import url("./src/elements/common-css/linear.css");
-@import url("./elements.css");
+@import url("./src/elements/LynxWrapper/lynx-wrapper.css");
+@import url("./src/elements/XText/x-text.css");
+@import url("./src/elements/ScrollView/scroll-view.css");
+@import url("./src/elements/XFoldViewNg/x-foldview-ng.css");
+@import url("./src/elements/XViewpagerNg/x-viewpager-ng.css");
+@import url("./src/elements/XCanvas/x-canvas.css");
+@import url("./src/elements/XSvg/x-svg.css");
+@import url("./src/elements/XImage/x-image.css");
+@import url("./src/elements/XInput/x-input.css");
+@import url("./src/elements/XOverlayNg/x-overlay-ng.css");
+@import url("./src/elements/XRefreshView/x-refresh-view.css");
+@import url("./src/elements/XSwiper/x-swiper.css");
+@import url("./src/elements/XTextarea/x-textarea.css");
+@import url("./src/elements/XList/x-list.css");
+@import url("./src/elements/XWebView/x-webview.css");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/web-elements",
-  "version": "0.10.1",
+  "version": "0.11.1",
   "private": false,
   "repository": {
     "type": "git",
@@ -18,111 +18,100 @@
     "./index.css": {
       "default": "./index.css"
     },
-    "./elements.css": {
-      "default": "./elements.css"
-    },
     "./all": {
-      "source": "./src/elements/all.ts",
+      "@lynx-js/source-field": "./src/elements/all.ts",
       "types": "./dist/elements/all.d.ts",
       "default": "./dist/elements/all.js"
     },
     "./LynxWrapper": {
-      "source": "./src/elements/LynxWrapper/index.ts",
+      "@lynx-js/source-field": "./src/elements/LynxWrapper/index.ts",
       "types": "./dist/elements/LynxWrapper/index.d.ts",
       "default": "./dist/elements/LynxWrapper/index.js"
     },
     "./ScrollView": {
-      "source": "./src/elements/ScrollView/index.ts",
+      "@lynx-js/source-field": "./src/elements/ScrollView/index.ts",
       "types": "./dist/elements/ScrollView/index.d.ts",
       "default": "./dist/elements/ScrollView/index.js"
     },
     "./XAudioTT": {
-      "source": "./src/elements/XAudioTT/index.ts",
+      "@lynx-js/source-field": "./src/elements/XAudioTT/index.ts",
       "types": "./dist/elements/XAudioTT/index.d.ts",
       "default": "./dist/elements/XAudioTT/index.js"
     },
     "./XCanvas": {
-      "source": "./src/elements/XCanvas/index.ts",
+      "@lynx-js/source-field": "./src/elements/XCanvas/index.ts",
       "types": "./dist/elements/XCanvas/index.d.ts",
       "default": "./dist/elements/XCanvas/index.js"
     },
     "./XFoldViewNg": {
-      "source": "./src/elements/XFoldViewNg/index.ts",
+      "@lynx-js/source-field": "./src/elements/XFoldViewNg/index.ts",
       "types": "./dist/elements/XFoldViewNg/index.d.ts",
       "default": "./dist/elements/XFoldViewNg/index.js"
     },
     "./XImage": {
-      "source": "./src/elements/XImage/index.ts",
+      "@lynx-js/source-field": "./src/elements/XImage/index.ts",
       "types": "./dist/elements/XImage/index.d.ts",
       "default": "./dist/elements/XImage/index.js"
     },
     "./XInput": {
-      "source": "./src/elements/XInput/index.ts",
+      "@lynx-js/source-field": "./src/elements/XInput/index.ts",
       "types": "./dist/elements/XInput/index.d.ts",
       "default": "./dist/elements/XInput/index.js"
     },
     "./XOverlayNg": {
-      "source": "./src/elements/XOverlayNg/index.ts",
+      "@lynx-js/source-field": "./src/elements/XOverlayNg/index.ts",
       "types": "./dist/elements/XOverlayNg/index.d.ts",
       "default": "./dist/elements/XOverlayNg/index.js"
     },
     "./XRefreshView": {
-      "source": "./src/elements/XRefreshView/index.ts",
+      "@lynx-js/source-field": "./src/elements/XRefreshView/index.ts",
       "types": "./dist/elements/XRefreshView/index.d.ts",
       "default": "./dist/elements/XRefreshView/index.js"
     },
     "./XSvg": {
-      "source": "./src/elements/XSvg/index.ts",
+      "@lynx-js/source-field": "./src/elements/XSvg/index.ts",
       "types": "./dist/elements/XSvg/index.d.ts",
       "default": "./dist/elements/XSvg/index.js"
     },
     "./XSwiper": {
-      "source": "./src/elements/XSwiper/index.ts",
+      "@lynx-js/source-field": "./src/elements/XSwiper/index.ts",
       "types": "./dist/elements/XSwiper/index.d.ts",
       "default": "./dist/elements/XSwiper/index.js"
     },
     "./XText": {
-      "source": "./src/elements/XText/index.ts",
+      "@lynx-js/source-field": "./src/elements/XText/index.ts",
       "types": "./dist/elements/XText/index.d.ts",
       "default": "./dist/elements/XText/index.js"
     },
     "./XTextarea": {
-      "source": "./src/elements/XTextarea/index.ts",
+      "@lynx-js/source-field": "./src/elements/XTextarea/index.ts",
       "types": "./dist/elements/XTextarea/index.d.ts",
       "default": "./dist/elements/XTextarea/index.js"
     },
     "./XView": {
-      "source": "./src/elements/XView/index.ts",
+      "@lynx-js/source-field": "./src/elements/XView/index.ts",
       "types": "./dist/elements/XView/index.d.ts",
       "default": "./dist/elements/XView/index.js"
     },
     "./XViewpagerNg": {
-      "source": "./src/elements/XViewpagerNg/index.ts",
+      "@lynx-js/source-field": "./src/elements/XViewpagerNg/index.ts",
       "types": "./dist/elements/XViewpagerNg/index.d.ts",
       "default": "./dist/elements/XViewpagerNg/index.js"
     },
     "./XList": {
-      "source": "./src/elements/XList/index.ts",
+      "@lynx-js/source-field": "./src/elements/XList/index.ts",
       "types": "./dist/elements/XList/index.d.ts",
       "default": "./dist/elements/XList/index.js"
     },
     "./XWebView": {
-      "source": "./src/elements/XWebView/index.ts",
+      "@lynx-js/source-field": "./src/elements/XWebView/index.ts",
       "types": "./dist/elements/XWebView/index.d.ts",
       "default": "./dist/elements/XWebView/index.js"
     },
     "./html-templates": {
-      "source": "./src/elements/htmlTemplates.ts",
+      "@lynx-js/source-field": "./src/elements/htmlTemplates.ts",
       "types": "./dist/elements/htmlTemplates.d.ts",
       "default": "./dist/elements/htmlTemplates.js"
-    },
-    "./compat/LinearContainer": {
-      "source": "./src/compat/LinearContainer/LinearContainer.ts",
-      "types": "./dist/compat/LinearContainer/LinearContainer.d.ts",
-      "default": "./dist/compat/LinearContainer/LinearContainer.js"
-    },
-    "./compat/LinearContainer/linear-compat.css": {
-      "default": "./src/compat/LinearContainer/linear-compat.css"
     }
   },
   "main": "dist/index.js",
@@ -139,8 +128,8 @@
   ],
   "devDependencies": {
     "@playwright/test": "^1.57.0",
-    "@rsbuild/core": "1.6.13",
-    "@rsbuild/plugin-source-build": "^1.0.3",
+    "@rsbuild/core": "1.7.2",
+    "@rsbuild/plugin-source-build": "1.0.3",
     "nyc": "^17.1.0",
     "tslib": "^2.8.1",
     "@lynx-js/playwright-fixtures": "0.0.0"

package/src/compat/LinearContainer/linear-compat.css

@@ -47,78 +47,78 @@
     --flex-wrap: nowrap;
     --align-self: auto;
   }
-}
-[lynx-computed-display="linear"] {
-  flex-wrap: nowrap !important;
-  flex-direction: column;
-  justify-content: flex-start;
-}
+  [lynx-computed-display="linear"] {
+    flex-wrap: nowrap !important;
+    flex-direction: column;
+    justify-content: flex-start;
+  }
 
-[lynx-computed-display="flex"] {
-  flex-direction: var(--flex-direction);
-  justify-content: var(--justify-content);
-  flex-wrap: var(--flex-wrap);
-}
+  [lynx-computed-display="flex"] {
+    flex-direction: var(--flex-direction);
+    justify-content: var(--justify-content);
+    flex-wrap: var(--flex-wrap);
+  }
 
-[lynx-computed-display="flex"] > *,
-[lynx-computed-display="flex"] > lynx-wrapper > * {
-  flex: var(
-    --flex,
-    var(--flex-grow) var(--flex-shrink) var(--flex-basis)
-  );
-}
-[lynx-computed-display="linear"] > *,
-[lynx-computed-display="linear"] > lynx-wrapper > * {
-  flex-shrink: 0 !important;
-  flex-grow: calc(
-    var(--lynx-linear-weight) /
-      calc(
-      var(--lynx-linear-weight-sum) +
-        (
-        1 - clamp(0, var(--lynx-linear-weight-sum) * 999999, 1)
+  [lynx-computed-display="flex"] > *,
+  [lynx-computed-display="flex"] > lynx-wrapper > * {
+    flex: var(
+      --flex,
+      var(--flex-grow) var(--flex-shrink) var(--flex-basis)
+    );
+  }
+  [lynx-computed-display="linear"] > *,
+  [lynx-computed-display="linear"] > lynx-wrapper > * {
+    flex-shrink: 0 !important;
+    flex-grow: calc(
+      var(--lynx-linear-weight) /
+        calc(
+        var(--lynx-linear-weight-sum) +
+          (
+          1 - clamp(0, var(--lynx-linear-weight-sum) * 999999, 1)
+        )
       )
-    )
-  ) !important;
-  flex-basis: var(--lynx-linear-weight-basis) !important;
-}
+    ) !important;
+    flex-basis: var(--lynx-linear-weight-basis) !important;
+  }
 
-[lynx-computed-display="linear"][lynx-linear-orientation="vertical"] {
-  flex-direction: column !important;
-  justify-content: var(--justify-content-column);
-}
+  [lynx-computed-display="linear"][lynx-linear-orientation="vertical"] {
+    flex-direction: column !important;
+    justify-content: var(--justify-content-column);
+  }
 
-[lynx-computed-display="linear"][lynx-linear-orientation="horizontal"] {
-  flex-direction: row !important;
-  justify-content: var(--justify-content-row);
-}
+  [lynx-computed-display="linear"][lynx-linear-orientation="horizontal"] {
+    flex-direction: row !important;
+    justify-content: var(--justify-content-row);
+  }
 
-[lynx-computed-display="linear"][lynx-linear-orientation="vertical-reverse"] {
-  flex-direction: column-reverse !important;
-  justify-content: var(--justify-content-column-reverse);
-}
+  [lynx-computed-display="linear"][lynx-linear-orientation="vertical-reverse"] {
+    flex-direction: column-reverse !important;
+    justify-content: var(--justify-content-column-reverse);
+  }
 
-[lynx-computed-display="linear"][lynx-linear-orientation="horizontal-reverse"] {
-  flex-direction: row-reverse !important;
-  justify-content: var(--justify-content-row-reverse);
-}
+  [lynx-computed-display="linear"][lynx-linear-orientation="horizontal-reverse"] {
+    flex-direction: row-reverse !important;
+    justify-content: var(--justify-content-row-reverse);
+  }
 
-[lynx-computed-display="linear"][lynx-linear-orientation="vertical"] > *,
-[lynx-computed-display="linear"][lynx-linear-orientation="vertical-reverse"],
-[lynx-computed-display="linear"][lynx-linear-orientation="vertical"]
-  > lynx-wrapper
-  > *,
-[lynx-computed-display="linear"][lynx-linear-orientation="vertical-reverse"]
-  > lynx-wrapper
-  > * {
-  align-self: var(--align-self-column);
-}
-[lynx-computed-display="linear"][lynx-linear-orientation="horizontal"] > *,
-[lynx-computed-display="linear"][lynx-linear-orientation="horizontal-reverse"],
-[lynx-computed-display="linear"][lynx-linear-orientation="horizontal"]
-  > lynx-wrapper
-  > *,
-[lynx-computed-display="linear"][lynx-linear-orientation="horizontal-reverse"]
-  > lynx-wrapper
-  > * {
-  align-self: var(--align-self-row);
+  [lynx-computed-display="linear"][lynx-linear-orientation="vertical"] > *,
+  [lynx-computed-display="linear"][lynx-linear-orientation="vertical-reverse"],
+  [lynx-computed-display="linear"][lynx-linear-orientation="vertical"]
+    > lynx-wrapper
+    > *,
+  [lynx-computed-display="linear"][lynx-linear-orientation="vertical-reverse"]
+    > lynx-wrapper
+    > * {
+    align-self: var(--align-self-column);
+  }
+  [lynx-computed-display="linear"][lynx-linear-orientation="horizontal"] > *,
+  [lynx-computed-display="linear"][lynx-linear-orientation="horizontal-reverse"],
+  [lynx-computed-display="linear"][lynx-linear-orientation="horizontal"]
+    > lynx-wrapper
+    > *,
+  [lynx-computed-display="linear"][lynx-linear-orientation="horizontal-reverse"]
+    > lynx-wrapper
+    > * {
+    align-self: var(--align-self-row);
+  }
 }

package/src/elements/XList/x-list.css

@@ -65,7 +65,7 @@ list-item {
   content-visibility: auto;
   flex: 0 0 auto !important;
   position: static;
-  contain: size;
+  contain: layout paint;
   contain-intrinsic-size: none auto var(--estimated-main-axis-size-px, 100cqh);
 }
 

package/src/elements/common-css/linear.css

@@ -258,7 +258,6 @@ list-item {
  *
  * update this once firefox supports this.
  * 
- * If you want to be fully compatible with chrome below 117, you need to use @lynx-js/web-elements/compat/LinearContainer.
  */
 @supports (content-visibility: auto) and
   (transition-behavior: allow-discrete) and (width: 1rex) {

package/elements.css

@@ -1,19 +0,0 @@
-/* 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 url("./src/elements/LynxWrapper/lynx-wrapper.css");
-@import url("./src/elements/XText/x-text.css");
-@import url("./src/elements/ScrollView/scroll-view.css");
-@import url("./src/elements/XFoldViewNg/x-foldview-ng.css");
-@import url("./src/elements/XViewpagerNg/x-viewpager-ng.css");
-@import url("./src/elements/XCanvas/x-canvas.css");
-@import url("./src/elements/XSvg/x-svg.css");
-@import url("./src/elements/XImage/x-image.css");
-@import url("./src/elements/XInput/x-input.css");
-@import url("./src/elements/XOverlayNg/x-overlay-ng.css");
-@import url("./src/elements/XRefreshView/x-refresh-view.css");
-@import url("./src/elements/XSwiper/x-swiper.css");
-@import url("./src/elements/XTextarea/x-textarea.css");
-@import url("./src/elements/XList/x-list.css");
-@import url("./src/elements/XWebView/x-webview.css");