fix(color-picker): preserve vertical slider orientation on pointer updates by myo-shi · Pull Request #3011 · chakra-ui/zag

myo-shi · 2026-03-06T04:44:36Z

📝 Description

Fixes vertical ColorPicker channel slider pointer interactions that could be computed using horizontal percentage.

⛳️ Current behavior (updates)

For orientation="vertical" channel sliders, pointer interactions could resolve as horizontal percentage (x) instead of vertical percentage (y) in some flows.

🚀 New behavior

setChannelColorFromPoint now prefers event.orientation before falling back to context/default.
trackPointerMove now forwards activeOrientation in pointer-move events.

These changes keep orientation-consistent value calculations during pointer down/move for vertical sliders.

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

No

📝 Additional Information

Verification run:

pnpm --filter @zag-js/color-picker lint
pnpm --filter @zag-js/color-picker typecheck

changeset-bot · 2026-03-06T04:44:40Z

🦋 Changeset detected

Latest commit: c115ce5

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

This PR includes changesets to release 85 packages

Name	Type
@zag-js/color-picker	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/carousel	Patch
@zag-js/cascade-select	Patch
@zag-js/checkbox	Patch
@zag-js/clipboard	Patch
@zag-js/collapsible	Patch
@zag-js/combobox	Patch
@zag-js/date-input	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 · 2026-03-06T04:44:43Z

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

Project	Deployment	Actions	Updated (UTC)
zag-nextjs	Ready	Preview	Mar 6, 2026 0:27am
zag-solid	Ready	Preview	Mar 6, 2026 0:27am
zag-svelte	Ready	Preview	Mar 6, 2026 0:27am
zag-vue	Ready	Preview	Mar 6, 2026 0:27am
zag-website	Ready	Preview	Mar 6, 2026 0:27am

…dates (chakra-ui#3011) * fix(color-picker): prefer event orientation for channel slider updates * docs: changeset --------- Co-authored-by: Segun Adebayo <joseshegs@gmail.com>

* feat: implement segmets getter * feat: wip on segments * feat: implement placeholder * feat: fill in segments on value select * feat: working on key events * feat: replace local date formatter with global reference * chore: fix comments * feat: complete segment value increment/decrement functionality * chore: some fixes * feat: implement placeholderValue and reset segments on value clear * feat: fix markValid * feat: wip on backspace * chore: remove extra pages * feat: wip on segment delete * chore: remove console log * refactor(date-picker): simplify key handling and segment validation logic * feat: initial segment input support * feat: improve focus management * chore: updates * feat: fix input issures * feat: clear placeholder data * feat: implement home and end key actions * feat: prevent default behavior for paste events in date picker input * chore: export missing types * feat: add placeholder display to date picker outputs and introduce datePickerWithSegmentsControls * refactor: dedidcated package * chore: update deps * docs: add changeset * revert: remove date-picker machine and example changes * feat(date-field): integrate live region for segment announcements and add segment label utility * test: fix e2e * chore: compose * chore: :granularity display * fix: backspace delete * chore: rename to date-input * feat(-use-controls): add date support * chore: add px ui script * feat: add placeholder value display to date field component * fix: rename dateField to dateInput * feat: add test ArrowUp value starts from placeholder date * feat: use el.fill instead of el.evaluate( * feat: improve test * feat: fix moving to next range input * fix: improve "[input] Backspace clears day after clearing year" test * fix: typo * fix: implement clearValueIfAllSegmentsInvalid that fixes the flaky test * feat: add granularity tests * fix(date-input): prevent crash and stale segments when backspacing end date to empty * fix(date-input): maek ArrowUp/Down on empty segments now starts from placeholderValue prop * fix(date-input): use machine state for active segment in clearSegmentValue * feat: wip on cycle fixes * refactor(date-input): replace editingValue + validSegments with IncompleteDate * chore: show displayValues in input range * chore: update tests * chore: update tests * Version Packages (#2972) ci(changesets): version packages Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * chore: add `data-placeholder-shown` to cascade select (#2975) * fix(cascade-select): rename `data-focused` to `data-focus` for consistency (#2976) * fix(cascade-select): rename `data-focused` to `data-focus` for consistency * chore: update datepicker * feat(date-picker): add non-Gregorian calendar support * fix: docs tokens * fix(combobox): return correct items in onValueChange for controlled usage (#2980) * Initial plan * fix: combobox onValueChange returns empty items array with controlled value Co-authored-by: anubra266 <30869823+anubra266@users.noreply.github.com> * test(combobox): add e2e tests for onValueChange items callback Co-authored-by: anubra266 <30869823+anubra266@users.noreply.github.com> --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: anubra266 <30869823+anubra266@users.noreply.github.com> * chore(deps): lock file maintenance (#2982) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore: update pnpm * chore: refactor eslint * fix: toast types * chore: select example * chore: mv example * build: prefer per-file build * fix: popover sync layer-index * fix(vanilla): merge props (#2984) * fix(vanilla): styles prop with mergeProps * chore: changeset * chore(deps): update all non-major dependencies Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat(*): support nested states (#2985) * Initial plan * feat: support nested states Co-authored-by: segunadebayo <6916170+segunadebayo@users.noreply.github.com> * docs(core): document nested states Co-authored-by: segunadebayo <6916170+segunadebayo@users.noreply.github.com> * docs(core): remove unsupported features Co-authored-by: segunadebayo <6916170+segunadebayo@users.noreply.github.com> * test: isolate nested state specs Co-authored-by: segunadebayo <6916170+segunadebayo@users.noreply.github.com> * test: strengthen nested coverage Co-authored-by: segunadebayo <6916170+segunadebayo@users.noreply.github.com> * chore: add changeset for nested states Co-authored-by: segunadebayo <6916170+segunadebayo@users.noreply.github.com> * refactor: code * fix: typecheck and e2e * chore: add example * refactor: update * test: refactoe * test: setup vue tests * test: setup svelte * test: enrich * test: even more * refactor: use new nested state --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: segunadebayo <6916170+segunadebayo@users.noreply.github.com> Co-authored-by: Segun Adebayo <joseshegs@gmail.com> * docs: commuity page * fix(colorpicker): nested state regression * docs: next changelog * Version Packages (#2977) ci(changesets): version packages Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * docs: polish * docs: update agents * fix: color picker regression * fix: packages/docs * Version Packages (#2990) ci(changesets): version packages Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * docs: next changelog * fix: cjs build issues * Version Packages (#2991) ci(changesets): version packages Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * docs: changelog * chore(deps): update dependency svelte to v5.53.5 [security] (#2992) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * fix(carousel): improve reliability * fix(carousel): correct page count when rendered inside a Portal/Dialog (#2997) * Initial plan * fix(carousel): observe item-group container with ResizeObserver to fix page count in Portal/Dialog Co-authored-by: anubra266 <30869823+anubra266@users.noreply.github.com> --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: anubra266 <30869823+anubra266@users.noreply.github.com> * chore: use transformValue in controlls * chore: fix some tests * feat(date-input): convert placeholder to CalendarDateTime for time granularities * feat: update docs jsons * feat(date-input): add BC era support and shouldForceLeadingZeros prop * feat(date-input): add shouldForceLeadingZeros control and E2E tests * fix(date-input): preserve entered segments when placeholderValue or granularity changes * fix(date-input): preserve entered segments when granularity or placeholderValue changes * perf(date-input): memoize segments computation * docs(date-input): add component documentation and snippets * feat(website): implement date-input showcase component * feat(date-input): add groupCount API and improve reactivity * chore: add anatomy svg * docs: update * test: refactor * chore: update deps * chore(deps): lock file maintenance (#3001) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * docs: update guide * refactor: examples and detach submodules * chore: force redeploy * refactor: format time * refactor: rm match-sorter * Version Packages (#2995) ci(changesets): version packages Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * docs: changelog * fix: menu aria-expanded * fix: add missing translations prop for accessibility labels * feat: add allowDuplicates feature to tags input component * refactor: floating panel machine * chore: unify examples * fix: carousel + dialog issues * fix(color-picker): preserve vertical slider orientation on pointer updates (#3011) * fix(color-picker): prefer event orientation for channel slider updates * docs: changeset --------- Co-authored-by: Segun Adebayo <joseshegs@gmail.com> * fix(pin-input): skip INPUT.CHANGE when value is unchanged in native i… (#3007) fix(pin-input): skip INPUT.CHANGE when value is unchanged in native input event * feat: better focus management * Improve focus management in date-input --------- Co-authored-by: Segun Adebayo <joseshegs@gmail.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Abraham <anubra266@gmail.com> Co-authored-by: Copilot <198982749+Copilot@users.noreply.github.com> Co-authored-by: anubra266 <30869823+anubra266@users.noreply.github.com> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Joost <81250358+jramke@users.noreply.github.com> Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com> Co-authored-by: segunadebayo <6916170+segunadebayo@users.noreply.github.com> Co-authored-by: myo <aokage000@gmail.com>

fix(color-picker): prefer event orientation for channel slider updates

141c044

vercel bot deployed to Preview – zag-nextjs March 6, 2026 04:45 View deployment

vercel bot deployed to Preview – zag-vue March 6, 2026 04:45 View deployment

vercel bot deployed to Preview – zag-svelte March 6, 2026 04:45 View deployment

vercel bot deployed to Preview – zag-website March 6, 2026 04:46 View deployment

vercel bot deployed to Preview – zag-solid March 6, 2026 04:46 View deployment

Merge branch 'main' into fix/color-picker-vertical-orientation-pointer

90d74b1

vercel bot deployed to Preview – zag-nextjs March 6, 2026 04:47 View deployment

vercel bot deployed to Preview – zag-vue March 6, 2026 04:47 View deployment

vercel bot deployed to Preview – zag-svelte March 6, 2026 04:47 View deployment

vercel bot deployed to Preview – zag-website March 6, 2026 04:48 View deployment

vercel bot deployed to Preview – zag-solid March 6, 2026 04:48 View deployment

docs: changeset

c115ce5

segunadebayo merged commit d716995 into chakra-ui:main Mar 6, 2026
0 of 5 checks passed

vercel bot deployed to Preview – zag-nextjs March 6, 2026 12:26 View deployment

vercel bot deployed to Preview – zag-vue March 6, 2026 12:27 View deployment

vercel bot deployed to Preview – zag-svelte March 6, 2026 12:27 View deployment

vercel bot deployed to Preview – zag-website March 6, 2026 12:27 View deployment

vercel bot deployed to Preview – zag-solid March 6, 2026 12:27 View deployment

github-actions bot mentioned this pull request Mar 6, 2026

Version Packages #3003

Merged

myo-shi deleted the fix/color-picker-vertical-orientation-pointer branch March 9, 2026 05:56

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(color-picker): preserve vertical slider orientation on pointer updates#3011

fix(color-picker): preserve vertical slider orientation on pointer updates#3011
segunadebayo merged 3 commits intochakra-ui:mainfrom
myo-shi:fix/color-picker-vertical-orientation-pointer

myo-shi commented Mar 6, 2026 •

edited

Loading

Uh oh!

changeset-bot bot commented Mar 6, 2026 •

edited

Loading

Uh oh!

vercel bot commented Mar 6, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

myo-shi commented Mar 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📝 Description

⛳️ Current behavior (updates)

🚀 New behavior

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

📝 Additional Information

Uh oh!

changeset-bot bot commented Mar 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

vercel bot commented Mar 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

myo-shi commented Mar 6, 2026 •

edited

Loading

changeset-bot bot commented Mar 6, 2026 •

edited

Loading

vercel bot commented Mar 6, 2026 •

edited

Loading