Skip to content

feat(meter): implement machine logic and anatomy#3072

Open
EasyCodie wants to merge 6 commits intochakra-ui:mainfrom
EasyCodie:main
Open

feat(meter): implement machine logic and anatomy#3072
EasyCodie wants to merge 6 commits intochakra-ui:mainfrom
EasyCodie:main

Conversation

@EasyCodie
Copy link
Copy Markdown

Adds connection logic, types, basic examples and detailed E2E documentation.

📝 Description

This PR introduces the @zag-js/meter state machine, a headless component designed for scalar measurements within a known range.

⛳️ Current behavior (updates)

Previously, Zag.js provided a progress machine, which is semantically intended for "progress towards completion." There was no dedicated machine for the ARIA meter role, which is used for static scalar values (like disk space, battery capacity, or relevance scores) that don't represent progress.

🚀 New behavior

Adds a new package @zag-js/meter which includes:

  • Core Machine Logic: Handles value clamping and threshold-based state calculation (low, normal, high, optimal).
  • Connection API: Provides WAI-ARIA compliant attributes (role="meter", aria-valuenow, etc.) and semantic parts for styling.
  • Anatomy: Standardized parts (root, track, indicator, label, valueText).
  • Framework Integration: Added a Next.js basic example for interactive testing.
  • E2E Tests: Comprehensive Playwright tests verifying ARIA attributes and threshold state transitions.

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

No

📝 Additional Information

The implementation follows the established Zag v1 architecture and uses only existing internal workspace dependencies. Tested with pnpm build, typecheck, and e2e-react.

Adds connection logic, types, basic examples and detailed E2E documentation.
@changeset-bot
Copy link
Copy Markdown

changeset-bot bot commented Apr 10, 2026

⚠️ No Changeset found

Latest commit: fa9c625

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

@vercel
Copy link
Copy Markdown

vercel bot commented Apr 10, 2026

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

Project Deployment Actions Updated (UTC)
zag-nextjs Ready Ready Preview Apr 11, 2026 6:23pm
zag-solid Ready Ready Preview Apr 11, 2026 6:23pm
zag-svelte Ready Ready Preview Apr 11, 2026 6:23pm
zag-vue Ready Ready Preview Apr 11, 2026 6:23pm
zag-website Ready Ready Preview Apr 11, 2026 6:23pm

Request Review

Accidentally added the meter feature documentation to the workspace root folder
@EasyCodie EasyCodie marked this pull request as ready for review April 11, 2026 07:23
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant