fix(carousel): correct page count when rendered inside a Portal/Dialog

[Copilot]

Carousel inside a Dialog/Portal computes snap points before the portal's DOM layout is complete, resulting in incorrect pageSnapPoints and unreachable slides (e.g., 10 pages calculated for 11 slides).

📝 Description

trackSlideResize only observed individual slide elements via ResizeObserver. When mounted inside a Portal, the container (item-group) resizes from zero to its actual dimensions as the dialog opens — but that resize was never observed, so SNAP.REFRESH was never triggered with correct layout data.

⛳️ Current behavior (updates)

SNAP.REFRESH (which recalculates pageSnapPoints) is only triggered by slide-level resize events. Container-level resizes — which happen when a Portal/Dialog completes layout — are silently ignored.

🚀 New behavior

The item-group container is now also observed by ResizeObserver. Any container resize (e.g., dialog opening, portal becoming visible) triggers SNAP.REFRESH, ensuring snap points are always computed from accurate layout dimensions.

// Before
const cleanups = itemEls.map((el) => resizeObserverBorderBox.observe(el, exec))

// After
const cleanups = [resizeObserverBorderBox.observe(el, exec), ...itemEls.map((el) => resizeObserverBorderBox.observe(el, exec))]

💣 Is this a breaking change (Yes/No):

No

📝 Additional Information

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Carousel: incorrect page count when rendered inside a Dialog (Portal)</issue_title>
<issue_description># 🐛 Bug report

When a Carousel is rendered inside a Dialog (which uses a Portal), zag-js computes scroll snap points from an incomplete DOM layout. This causes the carousel to calculate fewer pages than there are actual slides, for example, 10 pages for 11 slides, making the last slide unreachable via prev/next navigation.

The root cause is that @zag-js/carousel measures the item-group's scroll dimensions synchronously on mount. When the carousel is inside a Portal with open animations (opacity, scale), the browser hasn't completed layout yet at mount time, so scrollWidth and related measurements are incorrect, leading to wrong pageSnapPoints.

💥 Steps to reproduce

1. Render a Carousel with 11 slides inside a Dialog
2. Open the dialog
3. Click "Next" repeatedly to navigate through all slides
4. Navigation stops at "Page 10 / 11" — slide 11 is unreachable

💻 Link to reproduction

CodeSandbox reproduction: https://codesandbox.io/p/sandbox/fxjkls

🧐 Expected behavior

The carousel should correctly calculate pageSnapPoints and pageCount even when rendered inside a Portal/Dialog. All 11 slides should be reachable via prev/next navigation.

🧭 Possible Solution

The snap-point calculation should be deferred until the Portal's DOM layout has been fully computed. Currently, measuring scrollWidth / offsetWidth on mount happens too early when inside a Portal with animations.

A fix in zag-js could involve recalculating snap points after the first layout paint (e.g., using a ResizeObserver on the item-group container, or deferring the initial measurement with requestAnimationFrame).

User-land workaround: Defer rendering the Carousel by one requestAnimationFrame after the Portal mounts:

const [layoutReady, setLayoutReady] = useState(false);

useEffect(() => {
  const frame = requestAnimationFrame(() => setLayoutReady(true));
  return () => cancelAnimationFrame(frame);
}, []);

if (!layoutReady) return null;

return <Carousel.Root>{/* slides */}</Carousel.Root>;

🌍 System information

Software	Version(s)
Zag Version	1.34.1
Browser	Chrome, Firefox, Safari (all affected)
Operating System	Linux / macOS / Windows

📝 Additional information

The issue only manifests when the Carousel is inside a Portal (e.g., Chakra's Dialog) because the Portal DOM isn't laid out yet at mount time, especially combined with dialog open animations.
</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Carousel: incorrect page count when rendered inside a Dialog (Portal) #2993

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[changeset-bot]

🦋 Changeset detected

Latest commit: 06f6461

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

This PR includes changesets to release 84 packages

Name	Type
@zag-js/carousel	Patch
@zag-js/anatomy-icons	Patch
@zag-js/anatomy	Patch
@zag-js/core	Patch
@zag-js/docs	Patch
@zag-js/preact	Patch
@zag-js/react	Patch
@zag-js/solid	Patch
@zag-js/svelte	Patch
@zag-js/vanilla	Patch
@zag-js/vue	Patch
@zag-js/accordion	Patch
@zag-js/angle-slider	Patch
@zag-js/async-list	Patch
@zag-js/avatar	Patch
@zag-js/cascade-select	Patch
@zag-js/checkbox	Patch
@zag-js/clipboard	Patch
@zag-js/collapsible	Patch
@zag-js/color-picker	Patch
@zag-js/combobox	Patch
@zag-js/date-picker	Patch
@zag-js/dialog	Patch
@zag-js/drawer	Patch
@zag-js/editable	Patch
@zag-js/file-upload	Patch
@zag-js/floating-panel	Patch
@zag-js/hover-card	Patch
@zag-js/image-cropper	Patch
@zag-js/listbox	Patch
@zag-js/marquee	Patch
@zag-js/menu	Patch
@zag-js/navigation-menu	Patch
@zag-js/number-input	Patch
@zag-js/pagination	Patch
@zag-js/password-input	Patch
@zag-js/pin-input	Patch
@zag-js/popover	Patch
@zag-js/presence	Patch
@zag-js/progress	Patch
@zag-js/qr-code	Patch
@zag-js/radio-group	Patch
@zag-js/rating-group	Patch
@zag-js/scroll-area	Patch
@zag-js/select	Patch
@zag-js/signature-pad	Patch
@zag-js/slider	Patch
@zag-js/splitter	Patch
@zag-js/steps	Patch
@zag-js/switch	Patch
@zag-js/tabs	Patch
@zag-js/tags-input	Patch
@zag-js/timer	Patch
@zag-js/toast	Patch
@zag-js/toggle-group	Patch
@zag-js/toggle	Patch
@zag-js/tooltip	Patch
@zag-js/tour	Patch
@zag-js/tree-view	Patch
@zag-js/store	Patch
@zag-js/types	Patch
@zag-js/aria-hidden	Patch
@zag-js/auto-resize	Patch
@zag-js/collection	Patch
@zag-js/color-utils	Patch
@zag-js/utils	Patch
@zag-js/date-utils	Patch
@zag-js/dismissable	Patch
@zag-js/dom-query	Patch
@zag-js/file-utils	Patch
@zag-js/focus-trap	Patch
@zag-js/focus-visible	Patch
@zag-js/highlight-word	Patch
@zag-js/hotkeys	Patch
@zag-js/i18n-utils	Patch
@zag-js/interact-outside	Patch
@zag-js/json-tree-utils	Patch
@zag-js/live-region	Patch
@zag-js/popper	Patch
@zag-js/rect-utils	Patch
@zag-js/remove-scroll	Patch
@zag-js/scroll-snap	Patch
@zag-js/stringify-state	Patch
svelte-kit-starter	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

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
zag-nextjs	Ready	Preview	Feb 28, 2026 0:50am
zag-solid	Ready	Preview	Feb 28, 2026 0:50am
zag-svelte	Ready	Preview	Feb 28, 2026 0:50am
zag-vue	Ready	Preview	Feb 28, 2026 0:50am
zag-website	Ready	Preview	Feb 28, 2026 0:50am