chakra-ui/zag @zag-js/tour@2.0.0-next.4 on GitHub

Major Changes

#3342
08ea850 Thanks
@github-actions! - Zag no longer sets a z-index on overlays. Set it in
CSS, using --layer-index for the overlay's place in the stack.
- Fix a z-index set on the positioner in CSS being overridden.
- Fix overlays dropping behind other layers while they animate out. --layer-index stays set after close.
Breaking: Move the z-index to the positioner (or the backdrop) and add --layer-index.
```
- [data-popover-content] {
+ [data-popover-positioner] {
-   z-index: 1400;
+   z-index: calc(1400 + var(--layer-index));
  }
```
- Popover, menu, select, combobox, hover card, tooltip, date picker, color picker and cascade select no longer copy
  the content's z-index onto the positioner or set --z-index.
- Dialog and drawer no longer set --z-index. Use --layer-index on the backdrop and positioner.
- The floating panel no longer sets a z-index. Style the positioner as above to bring the focused panel to the
  front.
- The tour no longer copies the content's z-index onto dialog steps. Style the positioner with --tour-layer.
- The toast group no longer sets an inline z-index. Set it on [data-toast-group] in CSS.
- Remove the zIndex and zIndexFallback options from getDismissableLayerStyle.

#3342
1e1f6da Thanks
@github-actions! - Breaking: Spell out "Prev" as "Previous" across the
API.

The prevTrigger part is now previousTrigger in carousel, date picker, pagination, scheduler and steps, including
its prop getter, data attribute, ids key and translation key.

- <button {...api.getPrevTriggerProps()} />
+ <button {...api.getPreviousTriggerProps()} />

- [data-carousel-prev-trigger] { ... }
+ [data-carousel-previous-trigger] { ... }

  carousel.machine({
-   ids: { prevTrigger: "prev" },
-   translations: { prevTrigger: "Previous slide" },
+   ids: { previousTrigger: "prev" },
+   translations: { previousTrigger: "Previous slide" },
  })

Pagination and scheduler rename translations.prevTriggerLabel to translations.previousTriggerLabel.

Component	Before	After
Carousel	`scrollPrev()`, `canScrollPrev`	`scrollPrevious()`, `canScrollPrevious`
Date picker, Scheduler	`goToPrev()`	`goToPrevious()`
Pagination	`goToPrevPage()`	`goToPreviousPage()`
Steps	`goToPrevStep()`, `hasPrevStep`	`goToPreviousStep()`, `hasPreviousStep`
Tabs	`selectPrev()`	`selectPrevious()`
Tour	`prev()`, `hasPrevStep`	`previous()`, `hasPreviousStep`

The tour's "prev" action is now "previous", and its trigger renders data-type="previous".

- actions: [{ label: "Prev", action: "prev" }],
+ actions: [{ label: "Previous", action: "previous" }],
- action: (actions) => actions.prev()
+ action: (actions) => actions.previous()
- translations: { prevStep: "Previous step" }
+ translations: { previousStep: "Previous step" }

Patch Changes

#3342
730ea29 Thanks
@github-actions! - - Fix focus, scroll and sync work scheduled for the next
frame running after the component unmounts.
#3632
f489493 Thanks
@Adebesin-Cell! - - Fix the target losing its highlight when consecutive steps
point at the same element.
- Restore the target's own inert and data-tour-highlighted state when the tour leaves it, instead of clearing
  them.
- Apply preventInteraction when the step changes from outside the tour, and when the prop changes while a step is
  open.
Updated dependencies [a87b07c,
cb8e73d,
a80b307,
4f28f36,
08ea850]:
- @zag-js/dismissable@2.0.0-next.4
- @zag-js/interact-outside@2.0.0-next.4
- @zag-js/dom-query@2.0.0-next.4
- @zag-js/popper@2.0.0-next.4
- @zag-js/core@2.0.0-next.4
- @zag-js/focus-trap@2.0.0-next.4
- @zag-js/anatomy@2.0.0-next.4
- @zag-js/types@2.0.0-next.4
- @zag-js/utils@2.0.0-next.4