fix(web): ensure x-list scrolltolower observer sentinel is detectable

[Sherry-hue]

Summary by CodeRabbit

• Bug Fixes
  • Fixed an issue where scroll-to-lower events did not trigger at the bottom of lists.
  • Improved sentinel sizing and placement for scroll boundaries so scroll events fire reliably (including horizontal scrolling scenarios).

Checklist

• Tests updated (or not required).
• Documentation updated (or not required).
• Changeset added, and when a BREAKING CHANGE occurs, it needs to be clearly marked (or not required).

[changeset-bot]

🦋 Changeset detected

Latest commit: f6140c8

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 10 packages

Name	Type
@lynx-js/web-elements	Patch
upgrade-rspeedy	Patch
@lynx-js/web-core	Patch
@lynx-js/web-rsbuild-server-middleware	Patch
@lynx-js/template-webpack-plugin	Patch
@lynx-js/react-rsbuild-plugin	Patch
create-rspeedy	Patch
@lynx-js/web-worker-rpc	Patch
@lynx-js/react-alias-rsbuild-plugin	Patch
@lynx-js/rspeedy	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: e011d3d9-dc55-4956-86a9-14e670d25fc6

📥 Commits

Reviewing files that changed from the base of the PR and between fc03d1a and f6140c8.

⛔ Files ignored due to path filters (1)

• packages/web-platform/web-core-e2e/server-tests/__snapshots__/server-e2e.test.ts.snap is excluded by !**/*.snap

📒 Files selected for processing (4)

• .changeset/wild-wolves-love.md
• packages/web-platform/web-elements/src/elements/XList/x-list.css
• packages/web-platform/web-elements/src/elements/htmlTemplates.ts
• packages/web-platform/web-elements/src/template.rs

✅ Files skipped from review due to trivial changes (3)

• .changeset/wild-wolves-love.md
• packages/web-platform/web-elements/src/template.rs
• packages/web-platform/web-elements/src/elements/XList/x-list.css

🚧 Files skipped from review as they are similar to previous changes (1)

• packages/web-platform/web-elements/src/elements/htmlTemplates.ts

---

📝 Walkthrough

Walkthrough

A changeset was added and XList sentinel elements gained part attributes; CSS ::part(...) rules were added to size and position upper/lower threshold sentinels to ensure IntersectionObserver detection for scroll thresholds.

Changes

Cohort / File(s)	Summary
Changeset Documentation \.changeset/wild-wolves-love.md	Added a patch changeset noting a fix for bindscrolltolower not firing due to ineffective lower-threshold sentinel sizing/offset.
XList CSS packages/web-platform/web-elements/src/elements/XList/x-list.css	Added ::part(upper-threshold-sentinel) and ::part(lower-threshold-sentinel) rules that set sentinel sizing (flex: 0 0 1px), negative margins, and 1px translate offsets; horizontal-orientation overrides included.
Templates (TS + Rust) packages/web-platform/web-elements/src/elements/htmlTemplates.ts, packages/web-platform/web-elements/src/template.rs	Added part="upper-threshold-sentinel" and part="lower-threshold-sentinel" attributes to the existing observer <div> elements in the XList template.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• feat(web): list estimated-main-axis-size-px supports && autoScroll op… #1911: Touches XList lower-threshold sentinel/observer behavior and CSS/markup for threshold detection.

Suggested reviewers

• PupilTong
• hzy

Poem

🐇 I nibble the edges, place a tiny part,
A sentinel sized to do its part,
CSS and template — snug and slight,
Now scrolls find the bottom, day or night. 🥕

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: fixing the x-list scrolltolower observer sentinel to be detectable by adding CSS rules and part attributes for proper sizing and positioning.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!

[coderabbitai]

🧹 Nitpick comments (1)

packages/web-platform/web-elements/src/elements/XList/x-list.css (1)

160-189: Nit: intentional asymmetry between upper and lower sentinel transforms?

The lower sentinel gets both margin-top: -1px and translateY(1px) (and horizontal equivalents), while the upper sentinel only gets margin-bottom: -1px with no counter-transform. If this asymmetry is deliberate (to push the lower sentinel just past the scroll boundary so the bottom IntersectionObserver fires at the edge), consider a brief comment in the CSS explaining why — it will save future maintainers from "symmetrizing" it and re-breaking the fix.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/web-platform/web-elements/src/elements/XList/x-list.css` around
lines 160 - 189, Add a brief clarifying comment above the sentinel CSS rules
(the selectors using ::part(upper-threshold-sentinel) and
::part(lower-threshold-sentinel) and their horizontal variants) explaining that
the lower sentinel intentionally uses margin-top: -1px plus transform:
translateY(1px) (and translateX(1px) for horizontal) to push it just past the
scroll boundary so the IntersectionObserver fires at the edge, and that the
upper sentinel intentionally omits the counter-transform—this prevents future
maintainers from “symmetrizing” the rules and reintroducing the bug.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@packages/web-platform/web-elements/src/elements/XList/x-list.css`:
- Around line 160-189: Add a brief clarifying comment above the sentinel CSS
rules (the selectors using ::part(upper-threshold-sentinel) and
::part(lower-threshold-sentinel) and their horizontal variants) explaining that
the lower sentinel intentionally uses margin-top: -1px plus transform:
translateY(1px) (and translateX(1px) for horizontal) to push it just past the
scroll boundary so the IntersectionObserver fires at the edge, and that the
upper sentinel intentionally omits the counter-transform—this prevents future
maintainers from “symmetrizing” the rules and reintroducing the bug.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 81801664-c1a0-400f-b557-7a9e76c964a3

📥 Commits

Reviewing files that changed from the base of the PR and between 9e149c4 and fc03d1a.

📒 Files selected for processing (4)

• .changeset/wild-wolves-love.md
• packages/web-platform/web-elements/src/elements/XList/x-list.css
• packages/web-platform/web-elements/src/elements/htmlTemplates.ts
• packages/web-platform/web-elements/src/template.rs

[codspeed-hq]

Merging this PR will degrade performance by 19.25%

⚠️ Different runtime environments detected

Some benchmarks with significant performance changes were compared across different runtime environments,
which may affect the accuracy of the results.

Open the report in CodSpeed to investigate

⚡ 2 improved benchmarks
❌ 1 regressed benchmark
✅ 78 untouched benchmarks
⏩ 26 skipped benchmarks¹

⚠️ Please fix the performance issues or acknowledge them on CodSpeed.

Performance Changes

	Benchmark	BASE	HEAD	Efficiency
❌	003-hello-list-destroyBackground	2.8 ms	3.4 ms	-19.25%
⚡	002-hello-reactLynx-destroyBackground	832.6 µs	669.2 µs	+24.42%
⚡	transform 1000 view elements	46.8 ms	41.9 ms	+11.67%

---

_{Comparing Sherry-hue:fix/list-lower (f6140c8) with main (25b09e9)}

Footnotes

1. 26 benchmarks were skipped, so the baseline results were used instead. If they were deleted from the codebase, click here and archive them to remove them from the performance reports. ↩

[relativeci]

React External

#616 Bundle Size — 583.28KiB (0%).

f6140c8(current) vs 25b09e9 main#604(baseline)

Bundle metrics  no changes

	Current #616	Baseline #604
Initial JS	0B	0B
Initial CSS	0B	0B
Cache Invalidation	0%	0%
Chunks	0	0
Assets	3	3
Modules	17	17
Duplicate Modules	5	5
Duplicate Code	8.59%	8.59%
Packages	0	0
Duplicate Packages	0	0

Bundle size by type  no changes

	Current #616	Baseline #604
Other	583.28KiB	583.28KiB

Bundle analysis report Branch Sherry-hue:fix/list-lower Project dashboard

---

^{Generated by RelativeCI Documentation Report issue}

[relativeci]

Web Explorer

#9072 Bundle Size — 899.89KiB (+0.13%).

f6140c8(current) vs 25b09e9 main#9060(baseline)

Bundle metrics   3 changes

	Current #9072	Baseline #9060
Initial JS	44.46KiB	44.46KiB
Initial CSS	2.22KiB	2.22KiB
Cache Invalidation	24.15%	0%
Chunks	9	9
Assets	11	11
Modules	229(-0.43%)	230
Duplicate Modules	11	11
Duplicate Code	27.2%(-0.04%)	27.21%
Packages	10	10
Duplicate Packages	0	0

Bundle size by type   1 change 1 regression

	Current #9072	Baseline #9060
JS	495.65KiB (+0.24%)	494.47KiB
Other	402.02KiB	402.02KiB
CSS	2.22KiB	2.22KiB

Bundle analysis report Branch Sherry-hue:fix/list-lower Project dashboard

---

^{Generated by RelativeCI Documentation Report issue}

[relativeci]

React MTF Example

#631 Bundle Size — 195.57KiB (0%).

f6140c8(current) vs 25b09e9 main#619(baseline)

Bundle metrics  no changes

	Current #631	Baseline #619
Initial JS	0B	0B
Initial CSS	0B	0B
Cache Invalidation	0%	0%
Chunks	0	0
Assets	3	3
Modules	173	173
Duplicate Modules	66	66
Duplicate Code	44%	44%
Packages	2	2
Duplicate Packages	0	0

Bundle size by type  no changes

	Current #631	Baseline #619
IMG	111.23KiB	111.23KiB
Other	84.34KiB	84.34KiB

Bundle analysis report Branch Sherry-hue:fix/list-lower Project dashboard

---

^{Generated by RelativeCI Documentation Report issue}

[relativeci]

React Example

#7498 Bundle Size — 224.41KiB (0%).

f6140c8(current) vs 25b09e9 main#7486(baseline)

Bundle metrics  no changes

	Current #7498	Baseline #7486
Initial JS	0B	0B
Initial CSS	0B	0B
Cache Invalidation	0%	0%
Chunks	0	0
Assets	4	4
Modules	179	179
Duplicate Modules	69	69
Duplicate Code	44.51%	44.51%
Packages	2	2
Duplicate Packages	0	0

Bundle size by type  no changes

	Current #7498	Baseline #7486
IMG	145.76KiB	145.76KiB
Other	78.65KiB	78.65KiB

Bundle analysis report Branch Sherry-hue:fix/list-lower Project dashboard

---

^{Generated by RelativeCI Documentation Report issue}