@lynx-js/web-elements 0.12.7 → 0.12.9

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @lynx-js/web-elements
 
+## 0.12.9
+
+### Patch Changes
+
+- Clamp the `setFoldExpanded` offset of `<x-foldview-ng>` to the scrollable length. ([#3290](https://github.com/lynx-family/lynx-stack/pull/3290))
+
+  `setFoldExpanded` called the native `scrollTo`, bypassing the clamping done by the
+  `scrollTop` setter. A page collapsing its header with a deliberately large offset
+  (e.g. `offset: '99999px'`) scrolled past the end, which does not happen on native.
+- Give `<x-foldview-header-ng>` a `width: 100%`. ([#3290](https://github.com/lynx-family/lynx-stack/pull/3290))
+
+  The element is laid out with `position: absolute` but had no width, so it shrank to
+  fit its content instead of filling the foldview.
+
+## 0.12.8
+
+### Patch Changes
+
+- Keep XList scroll offsets and automatic scrolling aligned with its configured orientation. ([#3357](https://github.com/lynx-family/lynx-stack/pull/3357))
+
+- Updated dependency `dompurify` to `^3.4.13`. ([#3417](https://github.com/lynx-family/lynx-stack/pull/3417))
+
+- Updated dependency `markdown-it` to `^15.0.0`. ([#3423](https://github.com/lynx-family/lynx-stack/pull/3423))
+
 ## 0.12.7
 
 ### Patch Changes

package/dist/elements/XFoldViewNg/XFoldviewNg.js

@@ -70,8 +70,10 @@ let XFoldviewNg = (() => {
         setFoldExpanded(params) {
             const { offset, smooth = true } = params;
             const offsetValue = parseFloat(offset);
+            // `scrollTo` is the native method and does not go through the `scrollTop`
+            // setter above, so the offset has to be clamped here as well.
             this.scrollTo({
-                top: offsetValue,
+                top: Math.min(Math.max(offsetValue, 0), this[scrollableLength]),
                 behavior: smooth ? 'smooth' : 'instant',
             });
         }

package/dist/elements/XList/XList.js

@@ -42,7 +42,7 @@ let XList = (() => {
             this.#getListContainer().scrollTop = val;
         }
         get scrollLeft() {
-            return this.#getListContainer().scrollTop;
+            return this.#getListContainer().scrollLeft;
         }
         set scrollLeft(val) {
             this.#getListContainer().scrollLeft = val;
@@ -60,7 +60,7 @@ let XList = (() => {
             return super.scrollTop;
         }
         get __scrollLeft() {
-            return super.scrollTop;
+            return super.scrollLeft;
         }
         scrollToPosition(params) {
             let offset;
@@ -110,15 +110,15 @@ let XList = (() => {
             const scrollContainer = this.#getListContainer();
             const deltaTime = timestamp - this.#autoScrollOptions.lastTimestamp;
             const tickDistance = (deltaTime / 1000) * this.#autoScrollOptions.rate;
+            const isScrollVertical = (this.getAttribute('scroll-orientation')
+                || 'vertical') === 'vertical';
             scrollContainer.scrollBy({
-                left: tickDistance,
-                top: tickDistance,
+                left: isScrollVertical ? 0 : tickDistance,
+                top: isScrollVertical ? tickDistance : 0,
                 // smooth might cause lag when scrolling.
                 behavior: 'auto',
             });
             this.#autoScrollOptions.lastTimestamp = timestamp;
-            const isScrollVertical = (this.getAttribute('scroll-orientation')
-                || 'vertical') === 'vertical';
             const isContainerScrollable = isScrollVertical
                 ? scrollContainer.scrollTop + scrollContainer.clientHeight
                     >= scrollContainer.scrollHeight

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/web-elements",
-  "version": "0.12.7",
+  "version": "0.12.9",
   "private": false,
   "repository": {
     "type": "git",
@@ -134,12 +134,12 @@
     "**/*.css"
   ],
   "dependencies": {
-    "dompurify": "^3.4.12",
-    "markdown-it": "^14.3.0"
+    "dompurify": "^3.4.13",
+    "markdown-it": "^15.0.0"
   },
   "devDependencies": {
     "@playwright/test": "^1.61.1",
-    "@rsbuild/core": "2.1.7",
+    "@rsbuild/core": "2.1.10",
     "@rsbuild/plugin-source-build": "1.0.6",
     "@types/markdown-it": "^14.1.2",
     "@types/node": "^24.13.3",

package/src/elements/XFoldViewNg/x-foldview-ng.css

@@ -59,6 +59,8 @@ x-foldview-header-ng {
   order: 2;
   flex: 0 0 auto;
   position: absolute;
+  /* an out-of-flow box shrinks to fit its content without an explicit width */
+  width: 100%;
 }
 
 x-foldview-ng[header-over-slot] > x-foldview-slot-ng,

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

@@ -192,10 +192,6 @@ x-list::part(lower-threshold-observer) {
   flex-direction: column-reverse;
 }
 
-x-list[vertical-orientation="false"]::part(lower-threshold-observer) {
-  flex-direction: row-reverse;
-}
-
 /* list-type single */
 x-list {
   display: flex;