@lynx-js/web-elements 0.11.1 → 0.11.3

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @lynx-js/web-elements
 
+## 0.11.3
+
+### Patch Changes
+
+- fix: firefox 147+ layout issue ([#2205](https://github.com/lynx-family/lynx-stack/pull/2205))
+
+## 0.11.2
+
+### Patch Changes
+
+- Add scrollHeight/scrollWidth getters to XList. ([#2156](https://github.com/lynx-family/lynx-stack/pull/2156))
+
+- Inherit padding styles for x-input elements. ([#2199](https://github.com/lynx-family/lynx-stack/pull/2199))
+
+- Remove the default lazy-loading attribute from x-image elements. ([#2186](https://github.com/lynx-family/lynx-stack/pull/2186))
+
+- Fix x-input number type forwarding to the inner input element. ([#2193](https://github.com/lynx-family/lynx-stack/pull/2193))
+
 ## 0.11.1
 
 ### Patch Changes

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

@@ -1,5 +1,4 @@
 import { type AttributeReactiveClass } from '../../element-reactive/index.js';
-import '../../../src/compat/LinearContainer/linear-compat.css';
 declare class LinearContainerImpl implements InstanceType<AttributeReactiveClass<typeof HTMLElement>> {
     #private;
     static readonly observedAttributes: never[];

package/dist/compat/LinearContainer/LinearContainer.js

@@ -2,7 +2,6 @@
 // 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 { bindToAttribute, } from '../../element-reactive/index.js';
-import '../../../src/compat/LinearContainer/linear-compat.css';
 /** For @container
  * chrome 111, safari 18, firefox no
  *
@@ -39,15 +38,15 @@ import '../../../src/compat/LinearContainer/linear-compat.css';
  * it fixed in 116.0.5806.0, detail: https://issues.chromium.org/issues/40270007
  *
  * so we limit this feature to chrome 117, safari 18, firefox no:
- * rex unit: chrome 111, safari 17.2, firefox no
- *  https://developer.mozilla.org/en-US/docs/Web/CSS/length
+ * -webkit-box-reflect: chrome 4, safari 4, firefox no
+ *  https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/-webkit-box-reflect
  * transition-behavior:allow-discrete: chrome 117, safari 18, firefox 125
  *  https://developer.mozilla.org/en-US/docs/Web/CSS/transition-behavior
  *  https://caniuse.com/mdn-css_properties_display_is_transitionable
  *
  * update this once firefox supports this.
  */
-const supportContainerStyleQuery = CSS.supports('width:1rex')
+const supportContainerStyleQuery = CSS.supports('-webkit-box-reflect: above')
     && CSS.supports('transition-behavior:allow-discrete')
     && CSS.supports('content-visibility: auto');
 class LinearContainerImpl {

package/dist/elements/XInput/XInputEvents.js

@@ -27,6 +27,7 @@ let XInputEvents = (() => {
         static observedAttributes = ['send-composing-input', 'input-filter'];
         #dom = __runInitializers(this, _instanceExtraInitializers);
         #sendComposingInput = false;
+        #numberInputFilter = /[^0-9.]|\.(?=.*\.)/g;
         #getInputElement = genDomGetter(() => this.#dom.shadowRoot, '#input');
         #getFormElement = genDomGetter(() => this.#dom.shadowRoot, '#form');
         _handleEnableInputEvent(status) {
@@ -54,10 +55,7 @@ let XInputEvents = (() => {
         };
         #teleportInput = (event) => {
             const input = this.#getInputElement();
-            const inputFilter = this.#dom.getAttribute('input-filter');
-            const filterValue = inputFilter
-                ? input.value.replace(new RegExp(inputFilter, 'g'), '')
-                : input.value;
+            const filterValue = this.#filterInputValue(input.value);
             const isComposing = event.isComposing;
             input.value = filterValue;
             if (isComposing && !this.#sendComposingInput)
@@ -78,10 +76,7 @@ let XInputEvents = (() => {
         };
         #teleportCompositionendInput = () => {
             const input = this.#getInputElement();
-            const inputFilter = this.#dom.getAttribute('input-filter');
-            const filterValue = inputFilter
-                ? input.value.replace(new RegExp(inputFilter, 'g'), '')
-                : input.value;
+            const filterValue = this.#filterInputValue(input.value);
             input.value = filterValue;
             // if #sendComposingInput set true, #teleportInput will send detail
             if (!this.#sendComposingInput) {
@@ -100,6 +95,17 @@ let XInputEvents = (() => {
                 }));
             }
         };
+        #filterInputValue(value) {
+            let filterValue = value;
+            if (this.#dom.getAttribute('type') === 'number') {
+                filterValue = filterValue.replace(this.#numberInputFilter, '');
+            }
+            const inputFilter = this.#dom.getAttribute('input-filter');
+            if (inputFilter) {
+                filterValue = filterValue.replace(new RegExp(inputFilter, 'g'), '');
+            }
+            return filterValue;
+        }
         _handleEnableSelectionEvent(status) {
             if (status) {
                 this.#getInputElement().addEventListener('select', this.#selectEvent, {

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

@@ -5,6 +5,8 @@ export declare class XList extends HTMLElement {
     set scrollTop(val: number);
     get scrollLeft(): number;
     set scrollLeft(val: number);
+    get scrollHeight(): number;
+    get scrollWidth(): number;
     get __scrollTop(): number;
     get __scrollLeft(): number;
     scrollToPosition(params: {

package/dist/elements/XList/XList.js

@@ -46,6 +46,12 @@ let XList = (() => {
         set scrollLeft(val) {
             this.#getListContainer().scrollLeft = val;
         }
+        get scrollHeight() {
+            return this.#getListContainer().scrollHeight;
+        }
+        get scrollWidth() {
+            return this.#getListContainer().scrollWidth;
+        }
         get __scrollTop() {
             return super.scrollTop;
         }

package/dist/elements/XSwiper/XSwiperIndicator.js

@@ -4,7 +4,7 @@ import { __esDecorate, __runInitializers } from "tslib";
 // Licensed under the Apache License Version 2.0 that can be found in the
 // LICENSE file in the root directory of this source tree.
 */
-import { genDomGetter, registerAttributeHandler, bindToStyle, boostedQueueMicrotask, } from '../../element-reactive/index.js';
+import { genDomGetter, registerAttributeHandler, bindToStyle, } from '../../element-reactive/index.js';
 let XSwiperIndicator = (() => {
     let __handleIndicatorColor_decorators;
     let __handleIndicatorColor_initializers = [];
@@ -102,9 +102,8 @@ let XSwiperIndicator = (() => {
                         }
                     }
                 }).bind(this));
-                boostedQueueMicrotask(() => {
-                    this.#getIndicatorContainer().children[this.#dom.currentIndex]?.style.setProperty('background-color', 'var(--indicator-active-color)', 'important');
-                });
+                const firstPaintIndex = parseFloat(this.#dom.getAttribute('current') ?? '0');
+                this.#getIndicatorContainer().children[firstPaintIndex]?.style.setProperty('background-color', 'var(--indicator-active-color)', 'important');
             }
         }
         dispose() {

package/dist/elements/common/constants.d.ts

@@ -1,4 +1,2 @@
 export declare const useScrollEnd: boolean;
-export declare const isChromium: boolean;
-export declare const isWebkit: boolean;
 export declare const scrollContainerDom: unique symbol;

package/dist/elements/common/constants.js

@@ -3,12 +3,5 @@
 // LICENSE file in the root directory of this source tree.
 // safari cannot use scrollend event
 export const useScrollEnd = 'onscrollend' in document;
-const UA = window.navigator.userAgent;
-export const isChromium = UA.includes('Chrome');
-export const isWebkit = /\b(iPad|iPhone|iPod|OS X)\b/.test(UA)
-    && !/Edge/.test(UA)
-    && /WebKit/.test(UA)
-    // @ts-expect-error
-    && !window.MSStream;
 export const scrollContainerDom = Symbol.for('lynx-scroll-container-dom');
 //# sourceMappingURL=constants.js.map

package/dist/elements/htmlTemplates.js

@@ -1,6 +1,12 @@
 // 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.
+// --- IMPORTANT SYNCHRONIZATION NOTICE ---
+// The templates defined in this file are mirrored in the pure Rust library `web_elements`.
+// If you modify, add, or remove any template in this file, you MUST ALSO update
+// the corresponding Rust implementation in `src/template.rs` to ensure they
+// remain exactly synchronized. Tests enforce this parity.
+// ----------------------------------------
 export const templateScrollView = `<style>
   .placeholder-dom {
     display: none;
@@ -85,13 +91,13 @@ export const templateScrollView = `<style>
     part="bot-fade-mask"
   ></div>`;
 export const templateXAudioTT = `<audio id="audio"></audio>`;
-const XSSDetector = /<\s*script/g;
+const XSSDetector = /<\s*script/;
 export const templateXImage = (attributes) => {
     const { src } = attributes;
     if (src && XSSDetector.test(src)) {
         throw new Error('detected <script, this is a potential XSS attack, please check your src');
     }
-    return `<img part="img" alt="" loading="lazy" id="img" ${src ? `src="${src}"` : ''}/> `;
+    return `<img part="img" alt="" id="img" ${src ? `src="${src}"` : ''}/> `;
 };
 export const templateFilterImage = templateXImage;
 export const templateXInput = `<style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/web-elements",
-  "version": "0.11.1",
+  "version": "0.11.3",
   "private": false,
   "repository": {
     "type": "git",
@@ -127,9 +127,9 @@
     "**/*.css"
   ],
   "devDependencies": {
-    "@playwright/test": "^1.57.0",
-    "@rsbuild/core": "1.7.2",
-    "@rsbuild/plugin-source-build": "1.0.3",
+    "@playwright/test": "^1.58.2",
+    "@rsbuild/core": "1.7.3",
+    "@rsbuild/plugin-source-build": "1.0.4",
     "nyc": "^17.1.0",
     "tslib": "^2.8.1",
     "@lynx-js/playwright-fixtures": "0.0.0"

package/src/elements/XInput/x-input.css

@@ -28,6 +28,7 @@ x-input::part(input), x-input::part(form) {
   background-color: inherit;
   z-index: inherit;
   margin: inherit;
+  padding: inherit;
   color: inherit;
 }