@lynx-js/web-elements-canary 0.10.2-canary-20260108-d4e7b0a3 → 0.11.0-canary-20260108-fc9e8632

package/CHANGELOG.md

@@ -1,6 +1,22 @@
 # @lynx-js/web-elements
 
-## 0.10.2-canary-20260108124744-d4e7b0a3959f6c370f311b5a36c1db13ac679640
+## 0.11.0-canary-20260108130640-fc9e86323bf6d0a67a841d128152c33f6f92cb4d
+
+### 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
 

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/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-canary",
-  "version": "0.10.2-canary-20260108-d4e7b0a3",
+  "version": "0.11.0-canary-20260108-fc9e8632",
   "private": false,
   "repository": {
     "type": "git",
@@ -18,9 +18,6 @@
     "./index.css": {
       "default": "./index.css"
     },
-    "./elements.css": {
-      "default": "./elements.css"
-    },
     "./all": {
       "@lynx-js/source-field": "./src/elements/all.ts",
       "types": "./dist/elements/all.d.ts",
@@ -115,14 +112,6 @@
       "@lynx-js/source-field": "./src/elements/htmlTemplates.ts",
       "types": "./dist/elements/htmlTemplates.d.ts",
       "default": "./dist/elements/htmlTemplates.js"
-    },
-    "./compat/LinearContainer": {
-      "@lynx-js/source-field": "./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",

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/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");