@zag-js/toggle@2.0.0-next.1

Minor Changes

• #3167
  d2b9972 Thanks
  @github-actions! - Add get<Part>State() getters (e.g. getTriggerState,
  getContentState, getRootState), extending the existing getItemState convention to every part with derived state.

  const triggerState = dialog.getTriggerState({ value: "confirm" })
  // { value: "confirm", current: true, open: true }

Patch Changes

• #3167
  d9084a6 Thanks
  @github-actions! - Breaking: Removed data-focus from toggle group and
  toolbar parts. Use native CSS selectors like :focus-visible to style the focused item and :focus-within to style
  the root while focus is inside.

  Migration

  - [data-toggle-group-root][data-focus] { ... }
  + [data-toggle-group-root]:focus-within { ... }
  
  - [data-toggle-group-item][data-focus] { ... }
  + [data-toggle-group-item]:focus-visible { ... }
  
  - [data-toolbar-root][data-focus] { ... }
  + [data-toolbar-root]:focus-within { ... }
  
  - [data-toolbar-item][data-focus] { ... }
  + [data-toolbar-item]:focus-visible { ... }

  Breaking: Updated toggle group to use toggle-button semantics in all selection modes. The root now renders
  role="group", items expose aria-pressed, and single-select mode no longer renders radio roles or aria-checked.

  Migration

  If you query toggle group items by radio semantics, update those checks to use button semantics.

  - screen.getByRole("radiogroup")
  + screen.getByRole("group")
  
  - screen.getByRole("radio", { checked: true })
  + screen.getByRole("button", { pressed: true })

  If you style or query checked state, use aria-pressed instead of aria-checked.

  - [data-toggle-group-item][aria-checked="true"] { ... }
  + [data-toggle-group-item][aria-pressed="true"] { ... }

  Breaking: Removed data-state="on|off" from toggle and toggle group pressed parts. Use data-pressed to style
  pressed toggles.

  Migration

  - [data-toggle-root][data-state="on"] { ... }
  + [data-toggle-root][data-pressed] { ... }
  
  - [data-toggle-indicator][data-state="on"] { ... }
  + [data-toggle-indicator][data-pressed] { ... }
  
  - [data-toggle-group-item][data-state="on"] { ... }
  + [data-toggle-group-item][data-pressed] { ... }

• Updated dependencies []:

  • @zag-js/anatomy@2.0.0-next.1
  • @zag-js/core@2.0.0-next.1
  • @zag-js/types@2.0.0-next.1
  • @zag-js/utils@2.0.0-next.1
  • @zag-js/dom-query@2.0.0-next.1