From fd71ad98660fce3dd06c6dc2fa01e913ae7c3992 Mon Sep 17 00:00:00 2001
From: Segun Adebayo <joseshegs@gmail.com>
Date: Tue, 19 Sep 2023 10:17:03 +0100
Subject: [PATCH] refactor: ensure consistent *item naming convention (#882)

---
 .changeset/happy-starfishes-argue.md          | 40 +++++++++
 e2e/rating-group.e2e.ts                       |  2 +-
 e2e/tags-input.e2e.ts                         |  2 +-
 e2e/toggle-group.e2e.ts                       | 88 +++++++++++++++++++
 examples/next-ts/pages/accordion.tsx          |  4 +-
 examples/next-ts/pages/radio-group.tsx        |  8 +-
 examples/next-ts/pages/rating-group.tsx       |  4 +-
 examples/next-ts/pages/segment-control.tsx    |  6 +-
 examples/next-ts/pages/tags-input.tsx         |  6 +-
 examples/next-ts/pages/toggle-group.tsx       |  4 +-
 examples/nuxt-ts/components/HalfStar.vue      | 16 ++++
 examples/nuxt-ts/components/Star.vue          |  8 ++
 examples/nuxt-ts/pages/accordion.vue          |  4 +-
 examples/nuxt-ts/pages/radio-group.vue        |  8 +-
 examples/nuxt-ts/pages/rating-group.vue       | 42 +--------
 examples/nuxt-ts/pages/segment-control.vue    |  6 +-
 examples/nuxt-ts/pages/tags-input.vue         |  6 +-
 examples/nuxt-ts/pages/toggle-group.vue       |  2 +-
 examples/solid-ts/src/pages/accordion.tsx     |  4 +-
 examples/solid-ts/src/pages/radio-group.tsx   |  8 +-
 examples/solid-ts/src/pages/rating-group.tsx  |  4 +-
 examples/solid-ts/src/pages/tags-input.tsx    |  6 +-
 examples/solid-ts/src/pages/toggle-group.tsx  |  2 +-
 examples/vue-ts/src/pages/accordion.tsx       |  4 +-
 examples/vue-ts/src/pages/radio-group.tsx     |  8 +-
 examples/vue-ts/src/pages/rating-group.tsx    |  4 +-
 examples/vue-ts/src/pages/segment-control.tsx |  6 +-
 examples/vue-ts/src/pages/tags-input.tsx      |  6 +-
 examples/vue-ts/src/pages/toggle-group.tsx    |  2 +-
 .../accordion/src/accordion.anatomy.ts        |  2 +-
 .../accordion/src/accordion.connect.ts        | 28 ++++--
 .../machines/accordion/src/accordion.dom.ts   |  8 +-
 .../machines/accordion/src/accordion.types.ts |  5 +-
 .../machines/checkbox/src/checkbox.anatomy.ts |  2 +-
 .../machines/checkbox/src/checkbox.connect.ts |  6 ++
 .../machines/checkbox/src/checkbox.types.ts   |  1 +
 packages/machines/menu/src/menu.anatomy.ts    |  1 +
 packages/machines/menu/src/menu.connect.ts    |  5 ++
 packages/machines/menu/src/menu.types.ts      |  1 +
 .../machines/popover/src/popover.anatomy.ts   |  2 +
 .../machines/popover/src/popover.connect.ts   |  5 ++
 .../machines/popover/src/popover.types.ts     |  1 +
 packages/machines/radio-group/src/index.ts    |  7 +-
 .../radio-group/src/radio-group.anatomy.ts    |  7 +-
 .../radio-group/src/radio-group.connect.ts    | 60 ++++++-------
 .../radio-group/src/radio-group.dom.ts        | 22 ++---
 .../radio-group/src/radio-group.types.ts      | 23 +++--
 .../rating-group/src/rating-group.anatomy.ts  |  2 +-
 .../rating-group/src/rating-group.connect.ts  | 15 ++--
 .../rating-group/src/rating-group.dom.ts      |  2 +-
 .../rating-group/src/rating-group.types.ts    |  4 +-
 .../machines/select/src/select.anatomy.ts     |  1 +
 .../machines/select/src/select.connect.ts     |  6 ++
 packages/machines/select/src/select.types.ts  |  1 +
 .../tags-input/src/tags-input.anatomy.ts      |  7 +-
 .../tags-input/src/tags-input.connect.ts      | 66 ++++++++------
 .../machines/tags-input/src/tags-input.dom.ts | 18 ++--
 .../tags-input/src/tags-input.types.ts        | 19 ++--
 .../toggle-group/src/toggle-group.anatomy.ts  |  2 +-
 .../toggle-group/src/toggle-group.connect.ts  | 58 +++++++-----
 .../toggle-group/src/toggle-group.dom.ts      |  3 +-
 .../toggle-group/src/toggle-group.machine.ts  |  2 +-
 .../toggle-group/src/toggle-group.types.ts    | 15 +++-
 shared/src/style.css                          | 61 +++++--------
 website/components/machines/accordion.tsx     |  4 +-
 website/components/machines/combobox.tsx      | 18 ++--
 website/components/machines/radio.tsx         | 11 +--
 website/components/machines/rating.tsx        |  4 +-
 .../components/machines/segmented-control.tsx |  6 +-
 website/components/machines/tags-input.tsx    |  6 +-
 website/components/machines/toggle-group.tsx  |  6 +-
 website/data/components/accordion.mdx         | 16 ++--
 .../data/snippets/react/accordion/usage.mdx   |  4 +-
 .../data/snippets/react/radio-group/usage.mdx | 10 +--
 .../snippets/react/rating-group/usage.mdx     |  4 +-
 .../react/segmented-control/usage.mdx         |  6 +-
 .../data/snippets/react/tags-input/usage.mdx  |  6 +-
 .../snippets/react/toggle-group/usage.mdx     |  6 +-
 .../data/snippets/solid/accordion/usage.mdx   |  4 +-
 .../data/snippets/solid/radio-group/usage.mdx |  8 +-
 .../snippets/solid/rating-group/usage.mdx     |  4 +-
 .../solid/segmented-control/usage.mdx         |  6 +-
 .../data/snippets/solid/tags-input/usage.mdx  |  6 +-
 .../snippets/solid/toggle-group/usage.mdx     |  6 +-
 .../data/snippets/vue-jsx/accordion/usage.mdx |  4 +-
 .../snippets/vue-jsx/radio-group/usage.mdx    |  8 +-
 .../snippets/vue-jsx/rating-group/usage.mdx   |  4 +-
 .../vue-jsx/segmented-control/usage.mdx       |  6 +-
 .../snippets/vue-jsx/tags-input/usage.mdx     |  6 +-
 .../snippets/vue-jsx/toggle-group/usage.mdx   |  6 +-
 .../data/snippets/vue-sfc/accordion/usage.mdx |  4 +-
 .../snippets/vue-sfc/radio-group/usage.mdx    |  8 +-
 .../snippets/vue-sfc/rating-group/usage.mdx   |  4 +-
 .../vue-sfc/segmented-control/usage.mdx       |  6 +-
 .../snippets/vue-sfc/tags-input/usage.mdx     |  6 +-
 .../snippets/vue-sfc/toggle-group/usage.mdx   |  6 +-
 96 files changed, 583 insertions(+), 404 deletions(-)
 create mode 100644 .changeset/happy-starfishes-argue.md
 create mode 100644 e2e/toggle-group.e2e.ts
 create mode 100644 examples/nuxt-ts/components/HalfStar.vue
 create mode 100644 examples/nuxt-ts/components/Star.vue

diff --git a/.changeset/happy-starfishes-argue.md b/.changeset/happy-starfishes-argue.md
new file mode 100644
index 0000000000..dc49f2e6ba
--- /dev/null
+++ b/.changeset/happy-starfishes-argue.md
@@ -0,0 +1,40 @@
+---
+"@zag-js/rating-group": minor
+"@zag-js/toggle-group": minor
+"@zag-js/radio-group": minor
+"@zag-js/tags-input": minor
+"@zag-js/accordion": minor
+"@zag-js/checkbox": minor
+"@zag-js/popover": minor
+"@zag-js/select": minor
+"@zag-js/menu": minor
+---
+
+- Refactor component anatomy to use consistent naming convention across all machines.
+
+  - **Accordion**
+
+    - `getTriggerProps` => `getItemTriggerProps`
+    - `getContentProps` => `getItemContentProps`
+
+  - **Radio**
+
+    - `getRadioProps` => `getItemProps`
+    - `getRadioControlProps` => `getItemControlProps`
+    - `getRadioLabelProps` => `getItemTextProps`
+    - `getRatingState` => `getItemState`
+    - `getRatingProps` => `getItemProps`
+
+  - **TagsInput**
+
+    - `getTagProps` => `getItemProps`
+    - `getTagDeleteTriggerProps` => `getItemDeleteTriggerProps`
+    - `getTagInputProps` => `getItemInputProps`
+
+  - **Toggle Group**
+    - `getToggleProps` => `getItemProps`
+
+- **ToggleGroup**: Allow deselecting item when `multiple` is `false`.
+
+- Add indicator part to some components for ease of styling. Added `AccordionItemIndicator`, `SelectIndicator`,
+  `MenuIndicator`, `PopoverIndicator`
diff --git a/e2e/rating-group.e2e.ts b/e2e/rating-group.e2e.ts
index 02721a134b..244915564e 100644
--- a/e2e/rating-group.e2e.ts
+++ b/e2e/rating-group.e2e.ts
@@ -3,7 +3,7 @@ import { a11y, controls as testControls, part, testid } from "./__utils"
 
 const control = part("control")
 const hiddenInput = testid("hidden-input")
-const rating = part("rating")
+const rating = part("item")
 
 const getRating = (page: Page, value: number) => {
   return page.locator(rating).nth(value - 1)
diff --git a/e2e/tags-input.e2e.ts b/e2e/tags-input.e2e.ts
index 0539799c07..40e2930ad1 100644
--- a/e2e/tags-input.e2e.ts
+++ b/e2e/tags-input.e2e.ts
@@ -98,7 +98,7 @@ test.describe("tags-input", () => {
     await page.keyboard.press("ArrowLeft")
     await page.click("body", { force: true })
 
-    expect(await page.locator("[data-part=tag][data-selected]").count()).toBe(0)
+    expect(await page.locator("[data-part=item][data-selected]").count()).toBe(0)
   })
 
   test("removes tag on close button click", async ({ page }) => {
diff --git a/e2e/toggle-group.e2e.ts b/e2e/toggle-group.e2e.ts
new file mode 100644
index 0000000000..8c44e71e2d
--- /dev/null
+++ b/e2e/toggle-group.e2e.ts
@@ -0,0 +1,88 @@
+import { expect, type Page, test, type Locator } from "@playwright/test"
+import { a11y, controls, part } from "./__utils"
+
+class PageModel {
+  constructor(public readonly page: Page) {}
+  get bold() {
+    return this.page.locator(part("item")).nth(0)
+  }
+  get italic() {
+    return this.page.locator(part("item")).nth(1)
+  }
+  get underline() {
+    return this.page.locator(part("item")).nth(2)
+  }
+  expectToBeFocused(locator: Locator) {
+    return expect(locator).toHaveAttribute("data-highlighted", "")
+  }
+  expectNotToBeFocused(locator: Locator) {
+    return expect(locator).not.toHaveAttribute("data-highlighted", "")
+  }
+  expectToBeSelected(locator: Locator) {
+    return expect(locator).toHaveAttribute("data-state", "on")
+  }
+  expectNotToBeSelected(locator: Locator) {
+    return expect(locator).not.toHaveAttribute("data-state", "on")
+  }
+  setMultiple() {
+    return controls(this.page).bool("multiple")
+  }
+}
+
+test.describe("toggle-group", () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto("/toggle-group")
+  })
+
+  test("should have no accessibility violation", async ({ page }) => {
+    await a11y(page)
+  })
+
+  test("[single] should select on click", async ({ page }) => {
+    const screen = new PageModel(page)
+
+    await screen.bold.click()
+    await screen.expectToBeSelected(screen.bold)
+
+    await screen.italic.click()
+    await screen.expectToBeSelected(screen.italic)
+    await screen.expectNotToBeSelected(screen.bold)
+  })
+
+  test("[single] should select and deselect", async ({ page }) => {
+    const screen = new PageModel(page)
+
+    await screen.bold.click()
+    await screen.expectToBeSelected(screen.bold)
+
+    await screen.bold.click()
+    await screen.expectNotToBeSelected(screen.bold)
+  })
+
+  test("[multiple] should select multiple", async ({ page }) => {
+    const screen = new PageModel(page)
+    await screen.setMultiple()
+
+    await screen.bold.click()
+    await screen.italic.click()
+
+    await screen.expectToBeSelected(screen.bold)
+    await screen.expectToBeSelected(screen.italic)
+  })
+
+  test("[keyboard] when no toggle is selected, focus first toggle", async ({ page }) => {
+    const screen = new PageModel(page)
+
+    // focus on outside button
+    const outsideButton = page.getByRole("button", { name: "Outside" })
+    await outsideButton.focus()
+    await page.keyboard.press("Tab")
+
+    await expect(screen.bold).toBeFocused()
+
+    // shift tab back to outside button
+    await page.keyboard.press("Shift+Tab")
+    await expect(screen.bold).not.toBeFocused()
+    await expect(outsideButton).toBeFocused()
+  })
+})
diff --git a/examples/next-ts/pages/accordion.tsx b/examples/next-ts/pages/accordion.tsx
index 9e7ba7891a..efa57d910d 100644
--- a/examples/next-ts/pages/accordion.tsx
+++ b/examples/next-ts/pages/accordion.tsx
@@ -27,11 +27,11 @@ export default function Page() {
           {accordionData.map((item) => (
             <div key={item.id} {...api.getItemProps({ value: item.id })}>
               <h3>
-                <button data-testid={`${item.id}:trigger`} {...api.getTriggerProps({ value: item.id })}>
+                <button data-testid={`${item.id}:trigger`} {...api.getItemTriggerProps({ value: item.id })}>
                   {item.label}
                 </button>
               </h3>
-              <div data-testid={`${item.id}:content`} {...api.getContentProps({ value: item.id })}>
+              <div data-testid={`${item.id}:content`} {...api.getItemContentProps({ value: item.id })}>
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
                 dolore magna aliqua.
               </div>
diff --git a/examples/next-ts/pages/radio-group.tsx b/examples/next-ts/pages/radio-group.tsx
index 7313db72e8..580b81915d 100644
--- a/examples/next-ts/pages/radio-group.tsx
+++ b/examples/next-ts/pages/radio-group.tsx
@@ -29,12 +29,12 @@ export default function Page() {
             <div {...api.rootProps}>
               <h3 {...api.labelProps}>Fruits</h3>
               {radioData.map((opt) => (
-                <label key={opt.id} data-testid={`radio-${opt.id}`} {...api.getRadioProps({ value: opt.id })}>
-                  <div data-testid={`control-${opt.id}`} {...api.getRadioControlProps({ value: opt.id })} />
-                  <span data-testid={`label-${opt.id}`} {...api.getRadioLabelProps({ value: opt.id })}>
+                <label key={opt.id} data-testid={`radio-${opt.id}`} {...api.getItemProps({ value: opt.id })}>
+                  <div data-testid={`control-${opt.id}`} {...api.getItemControlProps({ value: opt.id })} />
+                  <span data-testid={`label-${opt.id}`} {...api.getItemTextProps({ value: opt.id })}>
                     {opt.label}
                   </span>
-                  <input data-testid={`input-${opt.id}`} {...api.getRadioHiddenInputProps({ value: opt.id })} />
+                  <input data-testid={`input-${opt.id}`} {...api.getItemHiddenInputProps({ value: opt.id })} />
                 </label>
               ))}
             </div>
diff --git a/examples/next-ts/pages/rating-group.tsx b/examples/next-ts/pages/rating-group.tsx
index 658a20f653..ab91aa64e8 100644
--- a/examples/next-ts/pages/rating-group.tsx
+++ b/examples/next-ts/pages/rating-group.tsx
@@ -59,9 +59,9 @@ export default function Page() {
             <label {...api.labelProps}>Rate:</label>
             <div {...api.controlProps}>
               {api.sizeArray.map((index) => {
-                const state = api.getRatingState({ index })
+                const state = api.getItemState({ index })
                 return (
-                  <span key={index} {...api.getRatingProps({ index })}>
+                  <span key={index} {...api.getItemProps({ index })}>
                     {state.isHalf ? <HalfStar /> : <Star />}
                   </span>
                 )
diff --git a/examples/next-ts/pages/segment-control.tsx b/examples/next-ts/pages/segment-control.tsx
index 82d3215c03..2c12048a63 100644
--- a/examples/next-ts/pages/segment-control.tsx
+++ b/examples/next-ts/pages/segment-control.tsx
@@ -21,11 +21,11 @@ export default function Page() {
         <div {...api.rootProps}>
           <div {...api.indicatorProps} />
           {radioData.map((opt) => (
-            <label key={opt.id} data-testid={`radio-${opt.id}`} {...api.getRadioProps({ value: opt.id })}>
-              <span data-testid={`label-${opt.id}`} {...api.getRadioLabelProps({ value: opt.id })}>
+            <label key={opt.id} data-testid={`radio-${opt.id}`} {...api.getItemProps({ value: opt.id })}>
+              <span data-testid={`label-${opt.id}`} {...api.getItemTextProps({ value: opt.id })}>
                 {opt.label}
               </span>
-              <input data-testid={`input-${opt.id}`} {...api.getRadioHiddenInputProps({ value: opt.id })} />
+              <input data-testid={`input-${opt.id}`} {...api.getItemHiddenInputProps({ value: opt.id })} />
             </label>
           ))}
         </div>
diff --git a/examples/next-ts/pages/tags-input.tsx b/examples/next-ts/pages/tags-input.tsx
index 40a61d00ed..3c804f8330 100644
--- a/examples/next-ts/pages/tags-input.tsx
+++ b/examples/next-ts/pages/tags-input.tsx
@@ -33,16 +33,16 @@ export default function Page() {
           <div {...api.controlProps}>
             {api.value.map((value, index) => (
               <span key={`${toDashCase(value)}-tag-${index}`}>
-                <div data-testid={`${toDashCase(value)}-tag`} {...api.getTagProps({ index, value })}>
+                <div data-testid={`${toDashCase(value)}-tag`} {...api.getItemProps({ index, value })}>
                   <span data-testid={`${toDashCase(value)}-valuetext`}>{value} </span>
                   <button
                     data-testid={`${toDashCase(value)}-close-button`}
-                    {...api.getTagDeleteTriggerProps({ index, value })}
+                    {...api.getItemDeleteTriggerProps({ index, value })}
                   >
                     &#x2715;
                   </button>
                 </div>
-                <input data-testid={`${toDashCase(value)}-input`} {...api.getTagInputProps({ index, value })} />
+                <input data-testid={`${toDashCase(value)}-input`} {...api.getItemInputProps({ index, value })} />
               </span>
             ))}
             <input data-testid="input" placeholder="add tag" {...api.inputProps} />
diff --git a/examples/next-ts/pages/toggle-group.tsx b/examples/next-ts/pages/toggle-group.tsx
index 450cd4bb78..5768df9a14 100644
--- a/examples/next-ts/pages/toggle-group.tsx
+++ b/examples/next-ts/pages/toggle-group.tsx
@@ -21,14 +21,14 @@ export default function Page() {
         <button>Outside</button>
         <div {...api.rootProps}>
           {toggleGroupData.map((item) => (
-            <button key={item.value} {...api.getToggleProps({ value: item.value })}>
+            <button key={item.value} {...api.getItemProps({ value: item.value })}>
               {item.label}
             </button>
           ))}
         </div>
       </main>
 
-      <Toolbar controls={controls.ui} viz>
+      <Toolbar controls={controls.ui}>
         <StateVisualizer state={state} />
       </Toolbar>
     </>
diff --git a/examples/nuxt-ts/components/HalfStar.vue b/examples/nuxt-ts/components/HalfStar.vue
new file mode 100644
index 0000000000..a8e3c613dc
--- /dev/null
+++ b/examples/nuxt-ts/components/HalfStar.vue
@@ -0,0 +1,16 @@
+<template>
+  <svg viewBox="0 0 273 260" data-part="star">
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M135.977 214.086L52.1294 259.594L69.6031 165.229L0 99.1561L95.1465 86.614L135.977 1.04785V214.086Z"
+      fill="currentColor"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M135.977 213.039L219.826 258.546L202.352 164.181L271.957 98.1082L176.808 85.5661L135.977 0V213.039Z"
+      fill="#bdbdbd"
+    />
+  </svg>
+</template>
diff --git a/examples/nuxt-ts/components/Star.vue b/examples/nuxt-ts/components/Star.vue
new file mode 100644
index 0000000000..0e6d473526
--- /dev/null
+++ b/examples/nuxt-ts/components/Star.vue
@@ -0,0 +1,8 @@
+<template>
+  <svg viewBox="0 0 273 260" data-part="star">
+    <path
+      d="M136.5 0L177.83 86.614L272.977 99.1561L203.374 165.229L220.847 259.594L136.5 213.815L52.1528 259.594L69.6265 165.229L0.0233917 99.1561L95.1699 86.614L136.5 0Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>
diff --git a/examples/nuxt-ts/pages/accordion.vue b/examples/nuxt-ts/pages/accordion.vue
index 22bf949374..c60e24414c 100644
--- a/examples/nuxt-ts/pages/accordion.vue
+++ b/examples/nuxt-ts/pages/accordion.vue
@@ -17,11 +17,11 @@ const api = computed(() => accordion.connect(state.value, send, normalizeProps))
     <div v-bind="api.rootProps">
       <div v-for="item in accordionData" v-bind="api.getItemProps({ value: item.id })">
         <h3>
-          <button :data-testid="`${item.id}:trigger`" v-bind="api.getTriggerProps({ value: item.id })">
+          <button :data-testid="`${item.id}:trigger`" v-bind="api.getItemTriggerProps({ value: item.id })">
             {{ item.label }}
           </button>
         </h3>
-        <div :data-testid="`${item.id}:content`" v-bind="api.getContentProps({ value: item.id })">
+        <div :data-testid="`${item.id}:content`" v-bind="api.getItemContentProps({ value: item.id })">
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
           magna aliqua.
         </div>
diff --git a/examples/nuxt-ts/pages/radio-group.vue b/examples/nuxt-ts/pages/radio-group.vue
index 7c27c476c3..9f62269921 100644
--- a/examples/nuxt-ts/pages/radio-group.vue
+++ b/examples/nuxt-ts/pages/radio-group.vue
@@ -31,13 +31,13 @@ const api = computed(() => radio.connect(state.value, send, normalizeProps))
             v-for="opt in radioData"
             :key="opt.id"
             :data-testid="`radio-${opt.id}`"
-            v-bind="api.getRadioProps({ value: opt.id })"
+            v-bind="api.getItemProps({ value: opt.id })"
           >
-            <div :data-testid="`control-${opt.id}`" v-bind="api.getRadioControlProps({ value: opt.id })" />
-            <span :data-testid="`label-${opt.id}`" v-bind="api.getRadioLabelProps({ value: opt.id })">
+            <div :data-testid="`control-${opt.id}`" v-bind="api.getItemControlProps({ value: opt.id })" />
+            <span :data-testid="`label-${opt.id}`" v-bind="api.getItemTextProps({ value: opt.id })">
               {{ opt.label }}
             </span>
-            <input :data-testid="`input-${opt.id}`" v-bind="api.getRadioHiddenInputProps({ value: opt.id })" />
+            <input :data-testid="`input-${opt.id}`" v-bind="api.getItemHiddenInputProps({ value: opt.id })" />
           </label>
         </div>
 
diff --git a/examples/nuxt-ts/pages/rating-group.vue b/examples/nuxt-ts/pages/rating-group.vue
index 7bedaf1210..5bd632c864 100644
--- a/examples/nuxt-ts/pages/rating-group.vue
+++ b/examples/nuxt-ts/pages/rating-group.vue
@@ -1,4 +1,4 @@
-<script setup lang="tsx">
+<script setup lang="ts">
 import * as rating from "@zag-js/rating-group"
 import { ratingControls } from "@zag-js/shared"
 import { normalizeProps, useMachine } from "@zag-js/vue"
@@ -17,52 +17,16 @@ const api = computed(() => rating.connect(state.value, send, normalizeProps))
 
 const items = computed(() =>
   api.value.sizeArray.map((index) => {
-    return [index, api.value.getRatingState({ index })] as const
+    return [index, api.value.getItemState({ index })] as const
   }),
 )
-
-const HalfStar = defineComponent({
-  name: "HalfStar",
-  setup() {
-    return () => (
-      <svg viewBox="0 0 273 260" data-part="star">
-        <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-          d="M135.977 214.086L52.1294 259.594L69.6031 165.229L0 99.1561L95.1465 86.614L135.977 1.04785V214.086Z"
-          fill="currentColor"
-        />
-        <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-          d="M135.977 213.039L219.826 258.546L202.352 164.181L271.957 98.1082L176.808 85.5661L135.977 0V213.039Z"
-          fill="#bdbdbd"
-        />
-      </svg>
-    )
-  },
-})
-
-const Star = defineComponent({
-  name: "Star",
-  setup() {
-    return () => (
-      <svg viewBox="0 0 273 260" data-part="star">
-        <path
-          d="M136.5 0L177.83 86.614L272.977 99.1561L203.374 165.229L220.847 259.594L136.5 213.815L52.1528 259.594L69.6265 165.229L0.0233917 99.1561L95.1699 86.614L136.5 0Z"
-          fill="currentColor"
-        />
-      </svg>
-    )
-  },
-})
 </script>
 
 <template>
   <main class="rating">
     <div v-bind="api.rootProps">
       <div v-bind="api.controlProps">
-        <span v-for="[index, state] in items" :key="index" v-bind="api.getRatingProps({ index })">
+        <span v-for="[index, state] in items" :key="index" v-bind="api.getItemProps({ index })">
           <HalfStar v-if="state.isHalf" />
           <Star v-else="" />
         </span>
diff --git a/examples/nuxt-ts/pages/segment-control.vue b/examples/nuxt-ts/pages/segment-control.vue
index bf65ea4335..0716a58c03 100644
--- a/examples/nuxt-ts/pages/segment-control.vue
+++ b/examples/nuxt-ts/pages/segment-control.vue
@@ -21,12 +21,12 @@ const api = computed(() => radio.connect(state.value, send, normalizeProps))
         v-for="opt in radioData"
         :key="opt.id"
         :data-testid="`radio-${opt.id}`"
-        v-bind="api.getRadioProps({ value: opt.id })"
+        v-bind="api.getItemProps({ value: opt.id })"
       >
-        <span :data-testid="`label-${opt.id}`" v-bind="api.getRadioLabelProps({ value: opt.id })">
+        <span :data-testid="`label-${opt.id}`" v-bind="api.getItemTextProps({ value: opt.id })">
           {{ opt.label }}
         </span>
-        <input :data-testid="`input-${opt.id}`" v-bind="api.getRadioHiddenInputProps({ value: opt.id })" />
+        <input :data-testid="`input-${opt.id}`" v-bind="api.getItemHiddenInputProps({ value: opt.id })" />
       </label>
     </div>
 
diff --git a/examples/nuxt-ts/pages/tags-input.vue b/examples/nuxt-ts/pages/tags-input.vue
index 3f6f258b63..65849cd535 100644
--- a/examples/nuxt-ts/pages/tags-input.vue
+++ b/examples/nuxt-ts/pages/tags-input.vue
@@ -26,16 +26,16 @@ const api = computed(() => tagsInput.connect(state.value, send, normalizeProps))
       <label v-bind="api.labelProps">Enter frameworks:</label>
       <div v-bind="api.controlProps">
         <span v-for="(value, index) in api.value" :key="`${toDashCase(value)}-tag-${index}`">
-          <div :data-testid="`${toDashCase(value)}-tag`" v-bind="api.getTagProps({ index, value })">
+          <div :data-testid="`${toDashCase(value)}-tag`" v-bind="api.getItemProps({ index, value })">
             <span>{{ value }} &nbsp;</span>
             <button
               :data-testid="`${toDashCase(value)}-close-button`"
-              v-bind="api.getTagDeleteTriggerProps({ index, value })"
+              v-bind="api.getItemDeleteTriggerProps({ index, value })"
             >
               &#x2715;
             </button>
           </div>
-          <input :data-testid="`${toDashCase(value)}-input`" v-bind="api.getTagInputProps({ index, value })" />
+          <input :data-testid="`${toDashCase(value)}-input`" v-bind="api.getItemInputProps({ index, value })" />
         </span>
 
         <input data-testid="input" placeholder="add tag" v-bind="api.inputProps" />
diff --git a/examples/nuxt-ts/pages/toggle-group.vue b/examples/nuxt-ts/pages/toggle-group.vue
index 34c8a49397..f5ade6fa2d 100644
--- a/examples/nuxt-ts/pages/toggle-group.vue
+++ b/examples/nuxt-ts/pages/toggle-group.vue
@@ -15,7 +15,7 @@ const api = computed(() => toggle.connect(state.value, send, normalizeProps))
   <main class="toggle-group">
     <button>Outside</button>
     <div v-bind="api.rootProps">
-      <button v-for="item in toggleGroupData" :key="item.value" v-bind="api.getToggleProps({ value: item.value })">
+      <button v-for="item in toggleGroupData" :key="item.value" v-bind="api.getItemProps({ value: item.value })">
         {{ item.label }}
       </button>
     </div>
diff --git a/examples/solid-ts/src/pages/accordion.tsx b/examples/solid-ts/src/pages/accordion.tsx
index 4b242c271a..22d8093671 100644
--- a/examples/solid-ts/src/pages/accordion.tsx
+++ b/examples/solid-ts/src/pages/accordion.tsx
@@ -23,11 +23,11 @@ export default function Page() {
             {(item) => (
               <div {...api().getItemProps({ value: item.id })}>
                 <h3>
-                  <button data-testid={`${item.id}:trigger`} {...api().getTriggerProps({ value: item.id })}>
+                  <button data-testid={`${item.id}:trigger`} {...api().getItemTriggerProps({ value: item.id })}>
                     {item.label}
                   </button>
                 </h3>
-                <div data-testid={`${item.id}:content`} {...api().getContentProps({ value: item.id })}>
+                <div data-testid={`${item.id}:content`} {...api().getItemContentProps({ value: item.id })}>
                   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
                   dolore magna aliqua.
                 </div>
diff --git a/examples/solid-ts/src/pages/radio-group.tsx b/examples/solid-ts/src/pages/radio-group.tsx
index 882527e667..f5e8c32c80 100644
--- a/examples/solid-ts/src/pages/radio-group.tsx
+++ b/examples/solid-ts/src/pages/radio-group.tsx
@@ -35,12 +35,12 @@ export default function Page() {
             <div {...api().rootProps}>
               <h3 {...api().labelProps}>Fruits</h3>
               {radioData.map((opt) => (
-                <label data-testid={`radio-${opt.id}`} {...api().getRadioProps({ value: opt.id })}>
-                  <div data-testid={`control-${opt.id}`} {...api().getRadioControlProps({ value: opt.id })} />
-                  <span data-testid={`label-${opt.id}`} {...api().getRadioLabelProps({ value: opt.id })}>
+                <label data-testid={`radio-${opt.id}`} {...api().getItemProps({ value: opt.id })}>
+                  <div data-testid={`control-${opt.id}`} {...api().getItemControlProps({ value: opt.id })} />
+                  <span data-testid={`label-${opt.id}`} {...api().getItemTextProps({ value: opt.id })}>
                     {opt.label}
                   </span>
-                  <input data-testid={`input-${opt.id}`} {...api().getRadioHiddenInputProps({ value: opt.id })} />
+                  <input data-testid={`input-${opt.id}`} {...api().getItemHiddenInputProps({ value: opt.id })} />
                 </label>
               ))}
             </div>
diff --git a/examples/solid-ts/src/pages/rating-group.tsx b/examples/solid-ts/src/pages/rating-group.tsx
index a172c35f64..cb24285a9a 100644
--- a/examples/solid-ts/src/pages/rating-group.tsx
+++ b/examples/solid-ts/src/pages/rating-group.tsx
@@ -60,8 +60,8 @@ export default function Page() {
             <div {...api().controlProps}>
               <For each={api().sizeArray}>
                 {(index) => {
-                  const state = createMemo(() => api().getRatingState({ index }))
-                  return <span {...api().getRatingProps({ index })}>{state().isHalf ? <HalfStar /> : <Star />}</span>
+                  const state = createMemo(() => api().getItemState({ index }))
+                  return <span {...api().getItemProps({ index })}>{state().isHalf ? <HalfStar /> : <Star />}</span>
                 }}
               </For>
             </div>
diff --git a/examples/solid-ts/src/pages/tags-input.tsx b/examples/solid-ts/src/pages/tags-input.tsx
index e49a1b98e8..9d46f04d06 100644
--- a/examples/solid-ts/src/pages/tags-input.tsx
+++ b/examples/solid-ts/src/pages/tags-input.tsx
@@ -32,18 +32,18 @@ export default function Page() {
             <For each={api().value}>
               {(value, index) => (
                 <span>
-                  <div data-testid={`${toDashCase(value)}-tag`} {...api().getTagProps({ index: index(), value })}>
+                  <div data-testid={`${toDashCase(value)}-tag`} {...api().getItemProps({ index: index(), value })}>
                     <span data-testid={`${toDashCase(value)}-valuetext`}>{value} </span>
                     <button
                       data-testid={`${toDashCase(value)}-close-button`}
-                      {...api().getTagDeleteTriggerProps({ index: index(), value })}
+                      {...api().getItemDeleteTriggerProps({ index: index(), value })}
                     >
                       &#x2715;
                     </button>
                   </div>
                   <input
                     data-testid={`${toDashCase(value)}-input`}
-                    {...api().getTagInputProps({ index: index(), value })}
+                    {...api().getItemInputProps({ index: index(), value })}
                   />
                 </span>
               )}
diff --git a/examples/solid-ts/src/pages/toggle-group.tsx b/examples/solid-ts/src/pages/toggle-group.tsx
index cc059f0f5c..9f278903a4 100644
--- a/examples/solid-ts/src/pages/toggle-group.tsx
+++ b/examples/solid-ts/src/pages/toggle-group.tsx
@@ -21,7 +21,7 @@ export default function Page() {
         <button>Outside</button>
         <div {...api().rootProps}>
           <For each={toggleGroupData}>
-            {(item) => <button {...api().getToggleProps({ value: item.value })}>{item.label}</button>}
+            {(item) => <button {...api().getItemProps({ value: item.value })}>{item.label}</button>}
           </For>
         </div>
       </main>
diff --git a/examples/vue-ts/src/pages/accordion.tsx b/examples/vue-ts/src/pages/accordion.tsx
index 8efad62ae9..129a892df7 100644
--- a/examples/vue-ts/src/pages/accordion.tsx
+++ b/examples/vue-ts/src/pages/accordion.tsx
@@ -27,11 +27,11 @@ export default defineComponent({
               {accordionData.map((item) => (
                 <div {...api.getItemProps({ value: item.id })}>
                   <h3>
-                    <button data-testid={`${item.id}:trigger`} {...api.getTriggerProps({ value: item.id })}>
+                    <button data-testid={`${item.id}:trigger`} {...api.getItemTriggerProps({ value: item.id })}>
                       {item.label}
                     </button>
                   </h3>
-                  <div data-testid={`${item.id}:content`} {...api.getContentProps({ value: item.id })}>
+                  <div data-testid={`${item.id}:content`} {...api.getItemContentProps({ value: item.id })}>
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
                     et dolore magna aliqua.
                   </div>
diff --git a/examples/vue-ts/src/pages/radio-group.tsx b/examples/vue-ts/src/pages/radio-group.tsx
index bfca8302ab..bb6da0fcfd 100644
--- a/examples/vue-ts/src/pages/radio-group.tsx
+++ b/examples/vue-ts/src/pages/radio-group.tsx
@@ -34,12 +34,12 @@ export default defineComponent({
                 <div {...api.rootProps}>
                   <h3 {...api.labelProps}>Fruits</h3>
                   {radioData.map((opt) => (
-                    <label key={opt.id} data-testid={`radio-${opt.id}`} {...api.getRadioProps({ value: opt.id })}>
-                      <div data-testid={`control-${opt.id}`} {...api.getRadioControlProps({ value: opt.id })} />
-                      <span data-testid={`label-${opt.id}`} {...api.getRadioLabelProps({ value: opt.id })}>
+                    <label key={opt.id} data-testid={`radio-${opt.id}`} {...api.getItemProps({ value: opt.id })}>
+                      <div data-testid={`control-${opt.id}`} {...api.getItemControlProps({ value: opt.id })} />
+                      <span data-testid={`label-${opt.id}`} {...api.getItemTextProps({ value: opt.id })}>
                         {opt.label}
                       </span>
-                      <input data-testid={`input-${opt.id}`} {...api.getRadioHiddenInputProps({ value: opt.id })} />
+                      <input data-testid={`input-${opt.id}`} {...api.getItemHiddenInputProps({ value: opt.id })} />
                     </label>
                   ))}
                 </div>
diff --git a/examples/vue-ts/src/pages/rating-group.tsx b/examples/vue-ts/src/pages/rating-group.tsx
index 78dfe971c0..34912b624d 100644
--- a/examples/vue-ts/src/pages/rating-group.tsx
+++ b/examples/vue-ts/src/pages/rating-group.tsx
@@ -68,9 +68,9 @@ export default defineComponent({
             <div {...api.rootProps}>
               <div {...api.controlProps}>
                 {api.sizeArray.map((index) => {
-                  const state = api.getRatingState({ index })
+                  const state = api.getItemState({ index })
                   return (
-                    <span key={index} {...api.getRatingProps({ index })}>
+                    <span key={index} {...api.getItemProps({ index })}>
                       {state.isHalf ? <HalfStar /> : <Star />}
                     </span>
                   )
diff --git a/examples/vue-ts/src/pages/segment-control.tsx b/examples/vue-ts/src/pages/segment-control.tsx
index 6a3b3d7987..2c8764a1bf 100644
--- a/examples/vue-ts/src/pages/segment-control.tsx
+++ b/examples/vue-ts/src/pages/segment-control.tsx
@@ -25,11 +25,11 @@ export default defineComponent({
             <div {...api.rootProps}>
               <div {...api.indicatorProps} />
               {radioData.map((opt) => (
-                <label key={opt.id} data-testid={`radio-${opt.id}`} {...api.getRadioProps({ value: opt.id })}>
-                  <span data-testid={`label-${opt.id}`} {...api.getRadioLabelProps({ value: opt.id })}>
+                <label key={opt.id} data-testid={`radio-${opt.id}`} {...api.getItemProps({ value: opt.id })}>
+                  <span data-testid={`label-${opt.id}`} {...api.getItemTextProps({ value: opt.id })}>
                     {opt.label}
                   </span>
-                  <input data-testid={`input-${opt.id}`} {...api.getRadioHiddenInputProps({ value: opt.id })} />
+                  <input data-testid={`input-${opt.id}`} {...api.getItemHiddenInputProps({ value: opt.id })} />
                 </label>
               ))}
             </div>
diff --git a/examples/vue-ts/src/pages/tags-input.tsx b/examples/vue-ts/src/pages/tags-input.tsx
index 3d1b6948fe..3bf0507281 100644
--- a/examples/vue-ts/src/pages/tags-input.tsx
+++ b/examples/vue-ts/src/pages/tags-input.tsx
@@ -39,16 +39,16 @@ export default defineComponent({
               <div {...api.controlProps}>
                 {api.value.map((value, index) => (
                   <span key={`${toDashCase(value)}-tag-${index}`}>
-                    <div data-testid={`${toDashCase(value)}-tag`} {...api.getTagProps({ index, value })}>
+                    <div data-testid={`${toDashCase(value)}-tag`} {...api.getItemProps({ index, value })}>
                       <span>{value} </span>
                       <button
                         data-testid={`${toDashCase(value)}-close-button`}
-                        {...api.getTagDeleteTriggerProps({ index, value })}
+                        {...api.getItemDeleteTriggerProps({ index, value })}
                       >
                         &#x2715;
                       </button>
                     </div>
-                    <input data-testid={`${toDashCase(value)}-input`} {...api.getTagInputProps({ index, value })} />
+                    <input data-testid={`${toDashCase(value)}-input`} {...api.getItemInputProps({ index, value })} />
                   </span>
                 ))}
                 <input data-testid="input" placeholder="add tag" {...api.inputProps} />
diff --git a/examples/vue-ts/src/pages/toggle-group.tsx b/examples/vue-ts/src/pages/toggle-group.tsx
index 468b9dccb4..b7c1956205 100644
--- a/examples/vue-ts/src/pages/toggle-group.tsx
+++ b/examples/vue-ts/src/pages/toggle-group.tsx
@@ -26,7 +26,7 @@ export default defineComponent({
             <button>Outside</button>
             <div {...api.rootProps}>
               {toggleGroupData.map((item) => (
-                <button key={item.value} {...api.getToggleProps({ value: item.value })}>
+                <button key={item.value} {...api.getItemProps({ value: item.value })}>
                   {item.label}
                 </button>
               ))}
diff --git a/packages/machines/accordion/src/accordion.anatomy.ts b/packages/machines/accordion/src/accordion.anatomy.ts
index 9624d75b17..d51f631acd 100644
--- a/packages/machines/accordion/src/accordion.anatomy.ts
+++ b/packages/machines/accordion/src/accordion.anatomy.ts
@@ -1,4 +1,4 @@
 import { createAnatomy } from "@zag-js/anatomy"
 
-export const anatomy = createAnatomy("accordion").parts("root", "item", "trigger", "content")
+export const anatomy = createAnatomy("accordion").parts("root", "item", "itemTrigger", "itemContent", "itemIndicator")
 export const parts = anatomy.build()
diff --git a/packages/machines/accordion/src/accordion.connect.ts b/packages/machines/accordion/src/accordion.connect.ts
index f8c58bc906..939c8c3706 100644
--- a/packages/machines/accordion/src/accordion.connect.ts
+++ b/packages/machines/accordion/src/accordion.connect.ts
@@ -50,13 +50,13 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
       })
     },
 
-    getContentProps(props: ItemProps) {
+    getItemContentProps(props: ItemProps) {
       const itemState = getItemState(props)
       return normalize.element({
-        ...parts.content.attrs,
+        ...parts.itemContent.attrs,
         role: "region",
-        id: dom.getContentId(state.context, props.value),
-        "aria-labelledby": dom.getTriggerId(state.context, props.value),
+        id: dom.getItemContentId(state.context, props.value),
+        "aria-labelledby": dom.getItemTriggerId(state.context, props.value),
         hidden: !itemState.isOpen,
         "data-state": itemState.isOpen ? "open" : "closed",
         "data-disabled": dataAttr(itemState.isDisabled),
@@ -65,15 +65,27 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
       })
     },
 
-    getTriggerProps(props: ItemProps) {
+    getItemIndicatorProps(props) {
+      const itemState = getItemState(props)
+      return normalize.element({
+        ...parts.itemIndicator.attrs,
+        "aria-hidden": true,
+        "data-state": itemState.isOpen ? "open" : "closed",
+        "data-disabled": dataAttr(itemState.isDisabled),
+        "data-focus": dataAttr(itemState.isFocused),
+        "data-orientation": state.context.orientation,
+      })
+    },
+
+    getItemTriggerProps(props: ItemProps) {
       const { value } = props
       const itemState = getItemState(props)
 
       return normalize.button({
-        ...parts.trigger.attrs,
+        ...parts.itemTrigger.attrs,
         type: "button",
-        id: dom.getTriggerId(state.context, value),
-        "aria-controls": dom.getContentId(state.context, value),
+        id: dom.getItemTriggerId(state.context, value),
+        "aria-controls": dom.getItemContentId(state.context, value),
         "aria-expanded": itemState.isOpen,
         disabled: itemState.isDisabled,
         "data-orientation": state.context.orientation,
diff --git a/packages/machines/accordion/src/accordion.dom.ts b/packages/machines/accordion/src/accordion.dom.ts
index 2705b7ec04..dcf6bf63f5 100644
--- a/packages/machines/accordion/src/accordion.dom.ts
+++ b/packages/machines/accordion/src/accordion.dom.ts
@@ -5,8 +5,8 @@ import type { MachineContext as Ctx } from "./accordion.types"
 export const dom = createScope({
   getRootId: (ctx: Ctx) => ctx.ids?.root ?? `accordion:${ctx.id}`,
   getItemId: (ctx: Ctx, value: string) => ctx.ids?.item?.(value) ?? `accordion:${ctx.id}:item:${value}`,
-  getContentId: (ctx: Ctx, value: string) => ctx.ids?.content?.(value) ?? `accordion:${ctx.id}:content:${value}`,
-  getTriggerId: (ctx: Ctx, value: string) => ctx.ids?.trigger?.(value) ?? `accordion:${ctx.id}:trigger:${value}`,
+  getItemContentId: (ctx: Ctx, value: string) => ctx.ids?.content?.(value) ?? `accordion:${ctx.id}:content:${value}`,
+  getItemTriggerId: (ctx: Ctx, value: string) => ctx.ids?.trigger?.(value) ?? `accordion:${ctx.id}:trigger:${value}`,
 
   getRootEl: (ctx: Ctx) => dom.getById(ctx, dom.getRootId(ctx)),
   getTriggers: (ctx: Ctx) => {
@@ -17,6 +17,6 @@ export const dom = createScope({
 
   getFirstTriggerEl: (ctx: Ctx) => first(dom.getTriggers(ctx)),
   getLastTriggerEl: (ctx: Ctx) => last(dom.getTriggers(ctx)),
-  getNextTriggerEl: (ctx: Ctx, id: string) => nextById(dom.getTriggers(ctx), dom.getTriggerId(ctx, id)),
-  getPrevTriggerEl: (ctx: Ctx, id: string) => prevById(dom.getTriggers(ctx), dom.getTriggerId(ctx, id)),
+  getNextTriggerEl: (ctx: Ctx, id: string) => nextById(dom.getTriggers(ctx), dom.getItemTriggerId(ctx, id)),
+  getPrevTriggerEl: (ctx: Ctx, id: string) => prevById(dom.getTriggers(ctx), dom.getItemTriggerId(ctx, id)),
 })
diff --git a/packages/machines/accordion/src/accordion.types.ts b/packages/machines/accordion/src/accordion.types.ts
index 15718f6298..1918d3e554 100644
--- a/packages/machines/accordion/src/accordion.types.ts
+++ b/packages/machines/accordion/src/accordion.types.ts
@@ -123,6 +123,7 @@ export interface MachineApi<T extends PropTypes = PropTypes> {
   getItemState: (props: ItemProps) => ItemState
   rootProps: T["element"]
   getItemProps(props: ItemProps): T["element"]
-  getContentProps(props: ItemProps): T["element"]
-  getTriggerProps(props: ItemProps): T["button"]
+  getItemContentProps(props: ItemProps): T["element"]
+  getItemTriggerProps(props: ItemProps): T["button"]
+  getItemIndicatorProps(props: ItemProps): T["element"]
 }
diff --git a/packages/machines/checkbox/src/checkbox.anatomy.ts b/packages/machines/checkbox/src/checkbox.anatomy.ts
index 53a5847baf..bd3f2ff81c 100644
--- a/packages/machines/checkbox/src/checkbox.anatomy.ts
+++ b/packages/machines/checkbox/src/checkbox.anatomy.ts
@@ -1,4 +1,4 @@
 import { createAnatomy } from "@zag-js/anatomy"
 
-export const anatomy = createAnatomy("checkbox").parts("root", "label", "control")
+export const anatomy = createAnatomy("checkbox").parts("root", "label", "control", "indicator")
 export const parts = anatomy.build()
diff --git a/packages/machines/checkbox/src/checkbox.connect.ts b/packages/machines/checkbox/src/checkbox.connect.ts
index 1a93266b00..3441d2a972 100644
--- a/packages/machines/checkbox/src/checkbox.connect.ts
+++ b/packages/machines/checkbox/src/checkbox.connect.ts
@@ -81,6 +81,12 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
       "aria-hidden": true,
     }),
 
+    indicatorProps: normalize.element({
+      ...parts.indicator.attrs,
+      ...dataAttrs,
+      hidden: !isIndeterminate && !state.context.checked,
+    }),
+
     hiddenInputProps: normalize.input({
       id: dom.getHiddenInputId(state.context),
       type: "checkbox",
diff --git a/packages/machines/checkbox/src/checkbox.types.ts b/packages/machines/checkbox/src/checkbox.types.ts
index 0e05514096..172779bdc6 100644
--- a/packages/machines/checkbox/src/checkbox.types.ts
+++ b/packages/machines/checkbox/src/checkbox.types.ts
@@ -149,4 +149,5 @@ export interface MachineApi<T extends PropTypes = PropTypes> {
   labelProps: T["element"]
   controlProps: T["element"]
   hiddenInputProps: T["input"]
+  indicatorProps: T["element"]
 }
diff --git a/packages/machines/menu/src/menu.anatomy.ts b/packages/machines/menu/src/menu.anatomy.ts
index fe446faf12..4661695c2a 100644
--- a/packages/machines/menu/src/menu.anatomy.ts
+++ b/packages/machines/menu/src/menu.anatomy.ts
@@ -4,6 +4,7 @@ export const anatomy = createAnatomy("menu").parts(
   "contextTrigger",
   "trigger",
   "triggerItem",
+  "indicator",
   "positioner",
   "arrow",
   "arrowTip",
diff --git a/packages/machines/menu/src/menu.connect.ts b/packages/machines/menu/src/menu.connect.ts
index cbff87fc05..87edd1810d 100644
--- a/packages/machines/menu/src/menu.connect.ts
+++ b/packages/machines/menu/src/menu.connect.ts
@@ -186,6 +186,11 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
       },
     }),
 
+    indicatorProps: normalize.element({
+      ...parts.indicator.attrs,
+      "data-state": isOpen ? "open" : "closed",
+    }),
+
     positionerProps: normalize.element({
       ...parts.positioner.attrs,
       id: dom.getPositionerId(state.context),
diff --git a/packages/machines/menu/src/menu.types.ts b/packages/machines/menu/src/menu.types.ts
index f213cb696f..454a985407 100644
--- a/packages/machines/menu/src/menu.types.ts
+++ b/packages/machines/menu/src/menu.types.ts
@@ -270,6 +270,7 @@ export interface MachineApi<T extends PropTypes = PropTypes> {
   contextTriggerProps: T["element"]
   getTriggerItemProps<A extends Api>(childApi: A): T["element"]
   triggerProps: T["button"]
+  indicatorProps: T["element"]
   positionerProps: T["element"]
   arrowProps: T["element"]
   arrowTipProps: T["element"]
diff --git a/packages/machines/popover/src/popover.anatomy.ts b/packages/machines/popover/src/popover.anatomy.ts
index e5434df91f..cd715f1b60 100644
--- a/packages/machines/popover/src/popover.anatomy.ts
+++ b/packages/machines/popover/src/popover.anatomy.ts
@@ -5,10 +5,12 @@ export const anatomy = createAnatomy("popover").parts(
   "arrowTip",
   "anchor",
   "trigger",
+  "indicator",
   "positioner",
   "content",
   "title",
   "description",
   "closeTrigger",
 )
+
 export const parts = anatomy.build()
diff --git a/packages/machines/popover/src/popover.connect.ts b/packages/machines/popover/src/popover.connect.ts
index 1aa8eb6843..8e3d4f2f55 100644
--- a/packages/machines/popover/src/popover.connect.ts
+++ b/packages/machines/popover/src/popover.connect.ts
@@ -67,6 +67,11 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
       },
     }),
 
+    indicatorProps: normalize.element({
+      ...parts.indicator.attrs,
+      "data-state": isOpen ? "open" : "closed",
+    }),
+
     positionerProps: normalize.element({
       id: dom.getPositionerId(state.context),
       ...parts.positioner.attrs,
diff --git a/packages/machines/popover/src/popover.types.ts b/packages/machines/popover/src/popover.types.ts
index f8f01ee633..a151e0064d 100644
--- a/packages/machines/popover/src/popover.types.ts
+++ b/packages/machines/popover/src/popover.types.ts
@@ -143,6 +143,7 @@ export interface MachineApi<T extends PropTypes = PropTypes> {
   arrowTipProps: T["element"]
   anchorProps: T["element"]
   triggerProps: T["button"]
+  indicatorProps: T["element"]
   positionerProps: T["element"]
   contentProps: T["element"]
   titleProps: T["element"]
diff --git a/packages/machines/radio-group/src/index.ts b/packages/machines/radio-group/src/index.ts
index 01fa0f7ba0..63ed08382b 100644
--- a/packages/machines/radio-group/src/index.ts
+++ b/packages/machines/radio-group/src/index.ts
@@ -1,4 +1,9 @@
 export { anatomy } from "./radio-group.anatomy"
 export { connect } from "./radio-group.connect"
 export { machine } from "./radio-group.machine"
-export type { UserDefinedContext as Context, MachineApi as Api, RadioProps, RadioState } from "./radio-group.types"
+export type {
+  UserDefinedContext as Context,
+  MachineApi as Api,
+  ItemProps as RadioProps,
+  ItemState as RadioState,
+} from "./radio-group.types"
diff --git a/packages/machines/radio-group/src/radio-group.anatomy.ts b/packages/machines/radio-group/src/radio-group.anatomy.ts
index 3371530498..47687eb9fc 100644
--- a/packages/machines/radio-group/src/radio-group.anatomy.ts
+++ b/packages/machines/radio-group/src/radio-group.anatomy.ts
@@ -3,9 +3,10 @@ import { createAnatomy } from "@zag-js/anatomy"
 export const anatomy = createAnatomy("radio-group").parts(
   "root",
   "label",
-  "radio",
-  "radioLabel",
-  "radioControl",
+  "item",
+  "itemText",
+  "itemControl",
   "indicator",
 )
+
 export const parts = anatomy.build()
diff --git a/packages/machines/radio-group/src/radio-group.connect.ts b/packages/machines/radio-group/src/radio-group.connect.ts
index 1d77e82f63..bc1279a320 100644
--- a/packages/machines/radio-group/src/radio-group.connect.ts
+++ b/packages/machines/radio-group/src/radio-group.connect.ts
@@ -3,13 +3,13 @@ import type { NormalizeProps, PropTypes } from "@zag-js/types"
 import { visuallyHiddenStyle } from "@zag-js/visually-hidden"
 import { parts } from "./radio-group.anatomy"
 import { dom } from "./radio-group.dom"
-import type { MachineApi, RadioProps, Send, State } from "./radio-group.types"
+import type { ItemProps, ItemState, MachineApi, Send, State } from "./radio-group.types"
 
 export function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> {
   const isGroupDisabled = state.context.isDisabled
 
-  function getRadioState<T extends RadioProps>(props: T) {
-    const radioState = {
+  function getItemState(props: ItemProps): ItemState {
+    return {
       isInvalid: !!props.invalid,
       isDisabled: !!props.disabled || isGroupDisabled,
       isChecked: state.context.value === props.value,
@@ -17,14 +17,10 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
       isHovered: state.context.hoveredId === props.value,
       isActive: state.context.activeId === props.value,
     }
-    return {
-      ...radioState,
-      isInteractive: !radioState.isDisabled,
-    }
   }
 
-  function getRadioDataAttrs<T extends RadioProps>(props: T) {
-    const radioState = getRadioState(props)
+  function getItemDataAttrs<T extends ItemProps>(props: T) {
+    const radioState = getItemState(props)
     return {
       "data-focus": dataAttr(radioState.isFocused),
       "data-disabled": dataAttr(radioState.isDisabled),
@@ -60,7 +56,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
 
     focus,
 
-    getRadioState,
+    getItemState,
 
     rootProps: normalize.element({
       ...parts.root.attrs,
@@ -81,25 +77,25 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
       onClick: focus,
     }),
 
-    getRadioProps(props: RadioProps) {
-      const rootState = getRadioState(props)
+    getItemProps(props: ItemProps) {
+      const rootState = getItemState(props)
 
       return normalize.label({
-        ...parts.radio.attrs,
-        id: dom.getRadioId(state.context, props.value),
-        htmlFor: dom.getRadioHiddenInputId(state.context, props.value),
-        ...getRadioDataAttrs(props),
+        ...parts.item.attrs,
+        id: dom.getItemId(state.context, props.value),
+        htmlFor: dom.getItemHiddenInputId(state.context, props.value),
+        ...getItemDataAttrs(props),
 
         onPointerMove() {
-          if (!rootState.isInteractive) return
+          if (rootState.isDisabled) return
           send({ type: "SET_HOVERED", value: props.value, hovered: true })
         },
         onPointerLeave() {
-          if (!rootState.isInteractive) return
+          if (rootState.isDisabled) return
           send({ type: "SET_HOVERED", value: null })
         },
         onPointerDown(event) {
-          if (!rootState.isInteractive) return
+          if (rootState.isDisabled) return
           // On pointerdown, the input blurs and returns focus to the `body`,
           // we need to prevent this.
           if (rootState.isFocused && event.pointerType === "mouse") {
@@ -108,38 +104,38 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
           send({ type: "SET_ACTIVE", value: props.value, active: true })
         },
         onPointerUp() {
-          if (!rootState.isInteractive) return
+          if (rootState.isDisabled) return
           send({ type: "SET_ACTIVE", value: null })
         },
       })
     },
 
-    getRadioLabelProps(props: RadioProps) {
+    getItemTextProps(props: ItemProps) {
       return normalize.element({
-        ...parts.radioLabel.attrs,
-        id: dom.getRadioLabelId(state.context, props.value),
-        ...getRadioDataAttrs(props),
+        ...parts.itemText.attrs,
+        id: dom.getItemLabelId(state.context, props.value),
+        ...getItemDataAttrs(props),
       })
     },
 
-    getRadioControlProps(props: RadioProps) {
-      const controlState = getRadioState(props)
+    getItemControlProps(props: ItemProps) {
+      const controlState = getItemState(props)
 
       return normalize.element({
-        ...parts.radioControl.attrs,
-        id: dom.getRadioControlId(state.context, props.value),
+        ...parts.itemControl.attrs,
+        id: dom.getItemControlId(state.context, props.value),
         "data-active": dataAttr(controlState.isActive),
         "aria-hidden": true,
-        ...getRadioDataAttrs(props),
+        ...getItemDataAttrs(props),
       })
     },
 
-    getRadioHiddenInputProps(props: RadioProps) {
-      const inputState = getRadioState(props)
+    getItemHiddenInputProps(props: ItemProps) {
+      const inputState = getItemState(props)
 
       return normalize.input({
         "data-ownedby": dom.getRootId(state.context),
-        id: dom.getRadioHiddenInputId(state.context, props.value),
+        id: dom.getItemHiddenInputId(state.context, props.value),
         type: "radio",
         name: state.context.name || state.context.id,
         form: state.context.form,
diff --git a/packages/machines/radio-group/src/radio-group.dom.ts b/packages/machines/radio-group/src/radio-group.dom.ts
index 2adb1712d3..fe64a0221b 100644
--- a/packages/machines/radio-group/src/radio-group.dom.ts
+++ b/packages/machines/radio-group/src/radio-group.dom.ts
@@ -4,18 +4,18 @@ import type { MachineContext as Ctx } from "./radio-group.types"
 export const dom = createScope({
   getRootId: (ctx: Ctx) => ctx.ids?.root ?? `radio-group:${ctx.id}`,
   getLabelId: (ctx: Ctx) => ctx.ids?.label ?? `radio-group:${ctx.id}:label`,
-  getRadioId: (ctx: Ctx, value: string) => ctx.ids?.radio?.(value) ?? `radio-group:${ctx.id}:radio:${value}`,
-  getRadioHiddenInputId: (ctx: Ctx, value: string) =>
-    ctx.ids?.radioHiddenInput?.(value) ?? `radio-group:${ctx.id}:radio:input:${value}`,
-  getRadioControlId: (ctx: Ctx, value: string) =>
-    ctx.ids?.radioControl?.(value) ?? `radio-group:${ctx.id}:radio:control:${value}`,
-  getRadioLabelId: (ctx: Ctx, value: string) =>
-    ctx.ids?.radioLabel?.(value) ?? `radio-group:${ctx.id}:radio:label:${value}`,
+  getItemId: (ctx: Ctx, value: string) => ctx.ids?.item?.(value) ?? `radio-group:${ctx.id}:radio:${value}`,
+  getItemHiddenInputId: (ctx: Ctx, value: string) =>
+    ctx.ids?.itemHiddenInput?.(value) ?? `radio-group:${ctx.id}:radio:input:${value}`,
+  getItemControlId: (ctx: Ctx, value: string) =>
+    ctx.ids?.itemControl?.(value) ?? `radio-group:${ctx.id}:radio:control:${value}`,
+  getItemLabelId: (ctx: Ctx, value: string) =>
+    ctx.ids?.itemLabel?.(value) ?? `radio-group:${ctx.id}:radio:label:${value}`,
   getIndicatorId: (ctx: Ctx) => ctx.ids?.indicator ?? `radio-group:${ctx.id}:indicator`,
 
   getRootEl: (ctx: Ctx) => dom.getById(ctx, dom.getRootId(ctx)),
-  getRadioHiddenInputEl: (ctx: Ctx, value: string) =>
-    dom.getById<HTMLInputElement>(ctx, dom.getRadioHiddenInputId(ctx, value)),
+  getItemHiddenInputEl: (ctx: Ctx, value: string) =>
+    dom.getById<HTMLInputElement>(ctx, dom.getItemHiddenInputId(ctx, value)),
   getIndicatorEl: (ctx: Ctx) => dom.getById(ctx, dom.getIndicatorId(ctx)),
 
   getFirstEnabledInputEl: (ctx: Ctx) => dom.getRootEl(ctx)?.querySelector<HTMLInputElement>("input:not(:disabled)"),
@@ -30,7 +30,7 @@ export const dom = createScope({
 
   getActiveRadioEl: (ctx: Ctx) => {
     if (!ctx.value) return
-    return dom.getById(ctx, dom.getRadioId(ctx, ctx.value))
+    return dom.getById(ctx, dom.getItemId(ctx, ctx.value))
   },
 
   getOffsetRect: (el: HTMLElement | undefined) => ({
@@ -41,7 +41,7 @@ export const dom = createScope({
   }),
 
   getRectById: (ctx: Ctx, id: string) => {
-    const radioEl = dom.getById(ctx, dom.getRadioId(ctx, id))
+    const radioEl = dom.getById(ctx, dom.getItemId(ctx, id))
     if (!radioEl) return
     return dom.resolveRect(dom.getOffsetRect(radioEl))
   },
diff --git a/packages/machines/radio-group/src/radio-group.types.ts b/packages/machines/radio-group/src/radio-group.types.ts
index 817a898775..7e55752746 100644
--- a/packages/machines/radio-group/src/radio-group.types.ts
+++ b/packages/machines/radio-group/src/radio-group.types.ts
@@ -13,10 +13,10 @@ type ElementIds = Partial<{
   root: string
   label: string
   indicator: string
-  radio(value: string): string
-  radioLabel(value: string): string
-  radioControl(value: string): string
-  radioHiddenInput(value: string): string
+  item(value: string): string
+  itemLabel(value: string): string
+  itemControl(value: string): string
+  itemHiddenInput(value: string): string
 }>
 
 interface PublicContext extends DirectionProperty, CommonProperties {
@@ -115,14 +115,13 @@ export type Send = S.Send<S.AnyEventObject>
  * Component API
  * -----------------------------------------------------------------------------*/
 
-export interface RadioProps {
+export interface ItemProps {
   value: string
   disabled?: boolean
   invalid?: boolean
 }
 
-export interface RadioState {
-  isInteractive: boolean
+export interface ItemState {
   isInvalid: boolean
   isDisabled: boolean
   isChecked: boolean
@@ -155,12 +154,12 @@ export interface MachineApi<T extends PropTypes = PropTypes> {
   /**
    * Returns the state details of a radio input
    */
-  getRadioState(props: RadioProps): RadioState
+  getItemState(props: ItemProps): ItemState
   rootProps: T["element"]
   labelProps: T["element"]
-  getRadioProps(props: RadioProps): T["label"]
-  getRadioLabelProps(props: RadioProps): T["element"]
-  getRadioControlProps(props: RadioProps): T["element"]
-  getRadioHiddenInputProps(props: RadioProps): T["input"]
+  getItemProps(props: ItemProps): T["label"]
+  getItemTextProps(props: ItemProps): T["element"]
+  getItemControlProps(props: ItemProps): T["element"]
+  getItemHiddenInputProps(props: ItemProps): T["input"]
   indicatorProps: T["element"]
 }
diff --git a/packages/machines/rating-group/src/rating-group.anatomy.ts b/packages/machines/rating-group/src/rating-group.anatomy.ts
index 1f8648fc26..5de4f054d3 100644
--- a/packages/machines/rating-group/src/rating-group.anatomy.ts
+++ b/packages/machines/rating-group/src/rating-group.anatomy.ts
@@ -1,4 +1,4 @@
 import { createAnatomy } from "@zag-js/anatomy"
 
-export const anatomy = createAnatomy("rating-group").parts("root", "label", "rating", "control")
+export const anatomy = createAnatomy("rating-group").parts("root", "label", "item", "control")
 export const parts = anatomy.build()
diff --git a/packages/machines/rating-group/src/rating-group.connect.ts b/packages/machines/rating-group/src/rating-group.connect.ts
index 062e7172f6..fb80172236 100644
--- a/packages/machines/rating-group/src/rating-group.connect.ts
+++ b/packages/machines/rating-group/src/rating-group.connect.ts
@@ -15,18 +15,15 @@ import type { ItemProps, ItemState, MachineApi, Send, State } from "./rating-gro
 export function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> {
   const isInteractive = state.context.isInteractive
   const isDisabled = state.context.isDisabled
-
   const value = state.context.value
   const hoveredValue = state.context.hoveredValue
   const translations = state.context.translations
 
-  function getRatingState(props: ItemProps): ItemState {
+  function getItemState(props: ItemProps): ItemState {
     const value = state.context.isHovering ? state.context.hoveredValue : state.context.value
     const isEqual = Math.ceil(value) === props.index
-
     const isHighlighted = props.index <= value || isEqual
     const isHalf = isEqual && Math.abs(value - props.index) === 0.5
-
     return {
       isEqual,
       isValueEmpty: state.context.value === -1,
@@ -50,7 +47,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
     hoveredValue,
     size: state.context.max,
     sizeArray: Array.from({ length: state.context.max }).map((_, index) => index + 1),
-    getRatingState,
+    getItemState,
 
     rootProps: normalize.element({
       dir: state.context.dir,
@@ -91,14 +88,14 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
       },
     }),
 
-    getRatingProps(props: ItemProps) {
+    getItemProps(props: ItemProps) {
       const { index } = props
-      const itemState = getRatingState(props)
+      const itemState = getItemState(props)
       const valueText = translations.ratingValueText(index)
 
       return normalize.element({
-        ...parts.rating.attrs,
-        id: dom.getRatingId(state.context, index.toString()),
+        ...parts.item.attrs,
+        id: dom.getItemId(state.context, index.toString()),
         role: "radio",
         tabIndex: isDisabled ? undefined : itemState.isChecked ? 0 : -1,
         "aria-roledescription": "rating",
diff --git a/packages/machines/rating-group/src/rating-group.dom.ts b/packages/machines/rating-group/src/rating-group.dom.ts
index 216c1c9b60..3aa8b3e4dc 100644
--- a/packages/machines/rating-group/src/rating-group.dom.ts
+++ b/packages/machines/rating-group/src/rating-group.dom.ts
@@ -7,7 +7,7 @@ export const dom = createScope({
   getLabelId: (ctx: Ctx) => ctx.ids?.label ?? `rating:${ctx.id}:label`,
   getHiddenInputId: (ctx: Ctx) => ctx.ids?.hiddenInput ?? `rating:${ctx.id}:input`,
   getControlId: (ctx: Ctx) => ctx.ids?.control ?? `rating:${ctx.id}:control`,
-  getRatingId: (ctx: Ctx, id: string) => ctx.ids?.rating?.(id) ?? `rating:${ctx.id}:star:${id}`,
+  getItemId: (ctx: Ctx, id: string) => ctx.ids?.rating?.(id) ?? `rating:${ctx.id}:star:${id}`,
 
   getRootEl: (ctx: Ctx) => dom.getById(ctx, dom.getRootId(ctx)),
   getControlEl: (ctx: Ctx) => dom.getById(ctx, dom.getControlId(ctx)),
diff --git a/packages/machines/rating-group/src/rating-group.types.ts b/packages/machines/rating-group/src/rating-group.types.ts
index bdb0e37960..b17389a2f5 100644
--- a/packages/machines/rating-group/src/rating-group.types.ts
+++ b/packages/machines/rating-group/src/rating-group.types.ts
@@ -169,11 +169,11 @@ export interface MachineApi<T extends PropTypes = PropTypes> {
   /**
    * Returns the state of a rating item
    */
-  getRatingState(props: ItemProps): ItemState
+  getItemState(props: ItemProps): ItemState
 
   rootProps: T["element"]
   hiddenInputProps: T["input"]
   labelProps: T["element"]
   controlProps: T["element"]
-  getRatingProps(props: ItemProps): T["element"]
+  getItemProps(props: ItemProps): T["element"]
 }
diff --git a/packages/machines/select/src/select.anatomy.ts b/packages/machines/select/src/select.anatomy.ts
index 769a5b3a9d..0c20ce0529 100644
--- a/packages/machines/select/src/select.anatomy.ts
+++ b/packages/machines/select/src/select.anatomy.ts
@@ -4,6 +4,7 @@ export const anatomy = createAnatomy("select").parts(
   "label",
   "positioner",
   "trigger",
+  "indicator",
   "clearTrigger",
   "item",
   "itemText",
diff --git a/packages/machines/select/src/select.connect.ts b/packages/machines/select/src/select.connect.ts
index abd948a862..6f4e336180 100644
--- a/packages/machines/select/src/select.connect.ts
+++ b/packages/machines/select/src/select.connect.ts
@@ -196,6 +196,12 @@ export function connect<T extends PropTypes, V extends CollectionItem = Collecti
       },
     }),
 
+    indicatorProps: normalize.element({
+      ...parts.indicator.attrs,
+      "aria-hidden": true,
+      "data-state": isOpen ? "open" : "closed",
+    }),
+
     getItemProps(props) {
       const itemState = getItemState(props)
 
diff --git a/packages/machines/select/src/select.types.ts b/packages/machines/select/src/select.types.ts
index b7a33198bb..b8a139108e 100644
--- a/packages/machines/select/src/select.types.ts
+++ b/packages/machines/select/src/select.types.ts
@@ -287,6 +287,7 @@ export interface MachineApi<T extends PropTypes = PropTypes, V extends Collectio
   labelProps: T["label"]
   controlProps: T["element"]
   triggerProps: T["button"]
+  indicatorProps: T["element"]
   clearTriggerProps: T["button"]
   positionerProps: T["element"]
   contentProps: T["element"]
diff --git a/packages/machines/tags-input/src/tags-input.anatomy.ts b/packages/machines/tags-input/src/tags-input.anatomy.ts
index 18d6a50351..6c74f29be4 100644
--- a/packages/machines/tags-input/src/tags-input.anatomy.ts
+++ b/packages/machines/tags-input/src/tags-input.anatomy.ts
@@ -6,9 +6,10 @@ export const anatomy = createAnatomy("tagsInput").parts(
   "control",
   "input",
   "clearTrigger",
-  "tag",
-  "tagInput",
-  "tagDeleteTrigger",
+  "item",
+  "itemInput",
+  "itemText",
+  "itemDeleteTrigger",
 )
 
 export const parts = anatomy.build()
diff --git a/packages/machines/tags-input/src/tags-input.connect.ts b/packages/machines/tags-input/src/tags-input.connect.ts
index 0d16b752ed..bd64dad851 100644
--- a/packages/machines/tags-input/src/tags-input.connect.ts
+++ b/packages/machines/tags-input/src/tags-input.connect.ts
@@ -3,7 +3,7 @@ import { ariaAttr, dataAttr } from "@zag-js/dom-query"
 import type { NormalizeProps, PropTypes } from "@zag-js/types"
 import { parts } from "./tags-input.anatomy"
 import { dom } from "./tags-input.dom"
-import type { MachineApi, Send, State, TagProps } from "./tags-input.types"
+import type { MachineApi, Send, State, ItemProps } from "./tags-input.types"
 
 export function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> {
   const isInteractive = state.context.isInteractive
@@ -17,8 +17,8 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
   const isEditingTag = state.matches("editing:tag")
   const isEmpty = state.context.count === 0
 
-  function getTagState(options: TagProps) {
-    const id = dom.getTagId(state.context, options)
+  function getItemState(options: ItemProps) {
+    const id = dom.getItemId(state.context, options)
     return {
       id,
       isEditing: isEditingTag && state.context.editedTagId === id,
@@ -67,7 +67,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
       dom.getInputEl(state.context)?.focus()
     },
 
-    getTagState,
+    getItemState,
 
     rootProps: normalize.element({
       dir: state.context.dir,
@@ -90,12 +90,14 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
       "data-invalid": dataAttr(isInvalid),
       "data-readonly": dataAttr(isReadOnly),
       id: dom.getLabelId(state.context),
+      dir: state.context.dir,
       htmlFor: dom.getInputId(state.context),
     }),
 
     controlProps: normalize.element({
       id: dom.getControlId(state.context),
       ...parts.control.attrs,
+      dir: state.context.dir,
       tabIndex: isReadOnly ? 0 : undefined,
       "data-disabled": dataAttr(isDisabled),
       "data-readonly": dataAttr(isReadOnly),
@@ -105,6 +107,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
 
     inputProps: normalize.input({
       ...parts.input.attrs,
+      dir: state.context.dir,
       "data-invalid": dataAttr(isInvalid),
       "aria-invalid": ariaAttr(isInvalid),
       "data-readonly": dataAttr(isReadOnly),
@@ -193,44 +196,55 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
       defaultValue: state.context.valueAsString,
     }),
 
-    getTagProps(props) {
-      const tagState = getTagState(props)
+    getItemProps(props) {
+      const itemState = getItemState(props)
       return normalize.element({
-        ...parts.tag.attrs,
-        id: tagState.id,
-        hidden: tagState.isEditing,
+        ...parts.item.attrs,
+        id: itemState.id,
+        dir: state.context.dir,
+        hidden: itemState.isEditing,
         "data-value": props.value,
         "data-disabled": dataAttr(isDisabled),
-        "data-highlighted": dataAttr(tagState.isHighlighted),
+        "data-highlighted": dataAttr(itemState.isHighlighted),
         onPointerDown(event) {
-          if (!isInteractive || tagState.isDisabled) return
+          if (!isInteractive || itemState.isDisabled) return
           event.preventDefault()
-          send({ type: "POINTER_DOWN_TAG", id: tagState.id })
+          send({ type: "POINTER_DOWN_TAG", id: itemState.id })
         },
         onDoubleClick() {
-          if (!isInteractive || tagState.isDisabled) return
-          send({ type: "DOUBLE_CLICK_TAG", id: tagState.id })
+          if (!isInteractive || itemState.isDisabled) return
+          send({ type: "DOUBLE_CLICK_TAG", id: itemState.id })
         },
       })
     },
 
-    getTagInputProps(props) {
-      const tagState = getTagState(props)
+    getItemTextProps(props) {
+      const itemState = getItemState(props)
+      return normalize.element({
+        ...parts.itemText.attrs,
+        dir: state.context.dir,
+        "data-disabled": dataAttr(isDisabled),
+        "data-highlighted": dataAttr(itemState.isHighlighted),
+      })
+    },
 
+    getItemInputProps(props) {
+      const itemState = getItemState(props)
       return normalize.input({
-        ...parts.tagInput.attrs,
+        ...parts.itemInput.attrs,
+        dir: state.context.dir,
         "aria-label": translations.tagEdited(props.value),
         "aria-hidden": true,
         disabled: isDisabled,
-        id: dom.getTagInputId(state.context, props),
+        id: dom.getItemInputId(state.context, props),
         tabIndex: -1,
-        hidden: !tagState.isEditing,
-        defaultValue: tagState.isEditing ? state.context.editedTagValue : "",
+        hidden: !itemState.isEditing,
+        defaultValue: itemState.isEditing ? state.context.editedTagValue : "",
         onChange(event) {
           send({ type: "TAG_INPUT_TYPE", value: event.target.value })
         },
         onBlur(event) {
-          send({ type: "TAG_INPUT_BLUR", target: event.relatedTarget, id: tagState.id })
+          send({ type: "TAG_INPUT_BLUR", target: event.relatedTarget, id: itemState.id })
         },
         onKeyDown(event) {
           const keyMap: EventKeyMap = {
@@ -252,11 +266,12 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
       })
     },
 
-    getTagDeleteTriggerProps(props) {
-      const id = dom.getTagId(state.context, props)
+    getItemDeleteTriggerProps(props) {
+      const id = dom.getItemId(state.context, props)
       return normalize.button({
-        ...parts.tagDeleteTrigger.attrs,
-        id: dom.getTagDeleteTriggerId(state.context, props),
+        ...parts.itemDeleteTrigger.attrs,
+        dir: state.context.dir,
+        id: dom.getItemDeleteTriggerId(state.context, props),
         type: "button",
         disabled: isDisabled,
         "aria-label": translations.deleteTagTriggerLabel(props.value),
@@ -283,6 +298,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
 
     clearTriggerProps: normalize.button({
       ...parts.clearTrigger.attrs,
+      dir: state.context.dir,
       id: dom.getClearTriggerId(state.context),
       type: "button",
       "data-readonly": dataAttr(isReadOnly),
diff --git a/packages/machines/tags-input/src/tags-input.dom.ts b/packages/machines/tags-input/src/tags-input.dom.ts
index 3c8f34d352..68a29d0762 100644
--- a/packages/machines/tags-input/src/tags-input.dom.ts
+++ b/packages/machines/tags-input/src/tags-input.dom.ts
@@ -1,6 +1,6 @@
 import { createScope, indexOfId, nextById, prevById, queryAll } from "@zag-js/dom-query"
 import { dispatchInputValueEvent } from "@zag-js/form-utils"
-import type { MachineContext as Ctx, TagProps } from "./tags-input.types"
+import type { MachineContext as Ctx, ItemProps } from "./tags-input.types"
 
 export const dom = createScope({
   getRootId: (ctx: Ctx) => ctx.ids?.root ?? `tags-input:${ctx.id}`,
@@ -9,18 +9,18 @@ export const dom = createScope({
   getHiddenInputId: (ctx: Ctx) => `tags-input:${ctx.id}:hidden-input`,
   getLabelId: (ctx: Ctx) => ctx.ids?.label ?? `tags-input:${ctx.id}:label`,
   getControlId: (ctx: Ctx) => ctx.ids?.control ?? `tags-input:${ctx.id}:control`,
-  getTagId: (ctx: Ctx, opt: TagProps) => ctx.ids?.tag?.(opt) ?? `tags-input:${ctx.id}:tag:${opt.value}:${opt.index}`,
-  getTagDeleteTriggerId: (ctx: Ctx, opt: TagProps) =>
-    ctx.ids?.tagDeleteTrigger?.(opt) ?? `${dom.getTagId(ctx, opt)}:delete-btn`,
-  getTagInputId: (ctx: Ctx, opt: TagProps) => ctx.ids?.tagInput?.(opt) ?? `${dom.getTagId(ctx, opt)}:input`,
+  getItemId: (ctx: Ctx, opt: ItemProps) => ctx.ids?.item?.(opt) ?? `tags-input:${ctx.id}:tag:${opt.value}:${opt.index}`,
+  getItemDeleteTriggerId: (ctx: Ctx, opt: ItemProps) =>
+    ctx.ids?.itemDeleteTrigger?.(opt) ?? `${dom.getItemId(ctx, opt)}:delete-btn`,
+  getItemInputId: (ctx: Ctx, opt: ItemProps) => ctx.ids?.itemInput?.(opt) ?? `${dom.getItemId(ctx, opt)}:input`,
   getEditInputId: (ctx: Ctx) => `${ctx.editedTagId}:input`,
 
-  getTagInputEl: (ctx: Ctx, opt: TagProps) => dom.getById<HTMLInputElement>(ctx, dom.getTagInputId(ctx, opt)),
+  getTagInputEl: (ctx: Ctx, opt: ItemProps) => dom.getById<HTMLInputElement>(ctx, dom.getItemInputId(ctx, opt)),
   getRootEl: (ctx: Ctx) => dom.getById(ctx, dom.getRootId(ctx)),
   getInputEl: (ctx: Ctx) => dom.getById<HTMLInputElement>(ctx, dom.getInputId(ctx)),
   getHiddenInputEl: (ctx: Ctx) => dom.getById<HTMLInputElement>(ctx, dom.getHiddenInputId(ctx)),
   getEditInputEl: (ctx: Ctx) => dom.getById<HTMLInputElement>(ctx, dom.getEditInputId(ctx)),
-  getTagElements: (ctx: Ctx) => queryAll(dom.getRootEl(ctx), `[data-part=tag]:not([data-disabled])`),
+  getTagElements: (ctx: Ctx) => queryAll(dom.getRootEl(ctx), `[data-part=item]:not([data-disabled])`),
   getFirstEl: (ctx: Ctx) => dom.getTagElements(ctx)[0],
   getLastEl: (ctx: Ctx) => dom.getTagElements(ctx)[dom.getTagElements(ctx).length - 1],
   getPrevEl: (ctx: Ctx, id: string) => prevById(dom.getTagElements(ctx), id, false),
@@ -36,12 +36,12 @@ export const dom = createScope({
     return tagEl?.dataset.value ?? null
   },
   setHoverIntent: (el: Element) => {
-    const tagEl = el.closest<HTMLElement>("[data-part=tag]")
+    const tagEl = el.closest<HTMLElement>("[data-part=item]")
     if (!tagEl) return
     tagEl.dataset.deleteIntent = ""
   },
   clearHoverIntent: (el: Element) => {
-    const tagEl = el.closest<HTMLElement>("[data-part=tag]")
+    const tagEl = el.closest<HTMLElement>("[data-part=item]")
     if (!tagEl) return
     delete tagEl.dataset.deleteIntent
   },
diff --git a/packages/machines/tags-input/src/tags-input.types.ts b/packages/machines/tags-input/src/tags-input.types.ts
index c686164b7d..e975cae76b 100644
--- a/packages/machines/tags-input/src/tags-input.types.ts
+++ b/packages/machines/tags-input/src/tags-input.types.ts
@@ -55,9 +55,9 @@ type ElementIds = Partial<{
   clearBtn: string
   label: string
   control: string
-  tag(opts: TagProps): string
-  tagDeleteTrigger(opts: TagProps): string
-  tagInput(opts: TagProps): string
+  item(opts: ItemProps): string
+  itemDeleteTrigger(opts: ItemProps): string
+  itemInput(opts: ItemProps): string
 }>
 
 interface PublicContext extends DirectionProperty, CommonProperties, InteractOutsideHandlers {
@@ -252,13 +252,13 @@ export type Send = S.Send<S.AnyEventObject>
  * Component API
  * -----------------------------------------------------------------------------*/
 
-export interface TagProps {
+export interface ItemProps {
   index: string | number
   value: string
   disabled?: boolean
 }
 
-export interface TagState {
+export interface ItemState {
   id: string
   isEditing: boolean
   isHighlighted: boolean
@@ -321,15 +321,16 @@ export interface MachineApi<T extends PropTypes = PropTypes> {
   /**
    * Returns the state of a tag
    */
-  getTagState(props: TagProps): TagState
+  getItemState(props: ItemProps): ItemState
 
   rootProps: T["element"]
   labelProps: T["label"]
   controlProps: T["element"]
   inputProps: T["input"]
   hiddenInputProps: T["input"]
-  getTagProps(options: TagProps): T["element"]
-  getTagInputProps(options: TagProps): T["input"]
-  getTagDeleteTriggerProps(options: TagProps): T["button"]
   clearTriggerProps: T["button"]
+  getItemProps(options: ItemProps): T["element"]
+  getItemTextProps(options: ItemProps): T["element"]
+  getItemInputProps(options: ItemProps): T["input"]
+  getItemDeleteTriggerProps(options: ItemProps): T["button"]
 }
diff --git a/packages/machines/toggle-group/src/toggle-group.anatomy.ts b/packages/machines/toggle-group/src/toggle-group.anatomy.ts
index 2ce1736012..3f749c0a1b 100644
--- a/packages/machines/toggle-group/src/toggle-group.anatomy.ts
+++ b/packages/machines/toggle-group/src/toggle-group.anatomy.ts
@@ -1,4 +1,4 @@
 import { createAnatomy } from "@zag-js/anatomy"
 
-export const anatomy = createAnatomy("toggle-group").parts("root", "toggle")
+export const anatomy = createAnatomy("toggle-group").parts("root", "item")
 export const parts = anatomy.build()
diff --git a/packages/machines/toggle-group/src/toggle-group.connect.ts b/packages/machines/toggle-group/src/toggle-group.connect.ts
index fadc6016e0..579b7d3f6f 100644
--- a/packages/machines/toggle-group/src/toggle-group.connect.ts
+++ b/packages/machines/toggle-group/src/toggle-group.connect.ts
@@ -3,19 +3,35 @@ import { dataAttr, isSafari, isSelfEvent } from "@zag-js/dom-query"
 import type { NormalizeProps, PropTypes } from "@zag-js/types"
 import { parts } from "./toggle-group.anatomy"
 import { dom } from "./toggle-group.dom"
-import type { MachineApi, Send, State } from "./toggle-group.types"
+import type { ItemProps, ItemState, MachineApi, Send, State } from "./toggle-group.types"
 
 export function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> {
   const value = state.context.value
   const disabled = state.context.disabled
   const isSingle = !state.context.multiple
   const rovingFocus = state.context.rovingFocus
+  const isHorizontal = state.context.orientation === "horizontal"
+
+  function getItemState(props: ItemProps): ItemState {
+    const isDisabled = !!props.disabled || !!disabled
+    const isPressed = value?.includes(props.value)
+    const id = dom.getItemId(state.context, props.value)
+    const isFocused = state.context.focusedId === id
+
+    return {
+      id,
+      isDisabled,
+      isPressed,
+      isFocused,
+    }
+  }
 
   return {
     value,
     setValue(value) {
       send({ type: "VALUE.SET", value })
     },
+    getItemState,
 
     rootProps: normalize.element({
       ...parts.root.attrs,
@@ -28,56 +44,54 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
       "data-focus": dataAttr(state.context.focusedId != null),
       style: { outline: "none" },
       onMouseDown() {
+        if (disabled) return
         send("ROOT.MOUSE_DOWN")
       },
       onFocus(event) {
+        if (disabled) return
         if (!isSelfEvent(event) || !!state.context.isClickFocus || state.context.isTabbingBackward) return
         send("ROOT.FOCUS")
       },
       onBlur() {
+        if (disabled) return
         send("ROOT.BLUR")
       },
     }),
 
-    getToggleProps(props) {
-      const isDisabled = props.disabled || disabled
-      const isPressed = value?.includes(props.value)
-
-      const id = dom.getToggleId(state.context, props.value)
-      const isFocused = state.context.focusedId === id
-      const rovingTabIndex = isFocused ? 0 : -1
+    getItemProps(props) {
+      const itemState = getItemState(props)
+      const rovingTabIndex = itemState.isFocused ? 0 : -1
 
       return normalize.button({
-        ...parts.toggle.attrs,
-        id,
+        ...parts.item.attrs,
+        id: itemState.id,
         type: "button",
         "data-ownedby": dom.getRootId(state.context),
-        "data-focus": dataAttr(isFocused),
-        disabled: isDisabled,
+        "data-focus": dataAttr(itemState.isFocused),
+        disabled: itemState.isDisabled,
         tabIndex: rovingFocus ? rovingTabIndex : undefined,
         // radio
         role: isSingle ? "radio" : undefined,
-        "aria-checked": isSingle ? isPressed : undefined,
-        "aria-pressed": isSingle ? undefined : isPressed,
+        "aria-checked": isSingle ? itemState.isPressed : undefined,
+        "aria-pressed": isSingle ? undefined : itemState.isPressed,
         //
-        "data-disabled": dataAttr(isDisabled),
+        "data-disabled": dataAttr(itemState.isDisabled),
         "data-orientation": state.context.orientation,
         dir: state.context.dir,
-        "data-state": isPressed ? "on" : "off",
+        "data-state": itemState.isPressed ? "on" : "off",
         onFocus() {
-          if (isDisabled) return
-          send({ type: "TOGGLE.FOCUS", id })
+          if (itemState.isDisabled) return
+          send({ type: "TOGGLE.FOCUS", id: itemState.id })
         },
         onClick(event) {
-          if (isDisabled) return
-          send({ type: "TOGGLE.CLICK", id, value: props.value })
+          if (itemState.isDisabled) return
+          send({ type: "TOGGLE.CLICK", id: itemState.id, value: props.value })
           if (isSafari()) {
             event.currentTarget.focus({ preventScroll: true })
           }
         },
         onKeyDown(event) {
-          if (isDisabled || !isSelfEvent(event)) return
-          const isHorizontal = state.context.orientation === "horizontal"
+          if (itemState.isDisabled || !isSelfEvent(event)) return
 
           const keyMap: EventKeyMap = {
             Tab(event) {
diff --git a/packages/machines/toggle-group/src/toggle-group.dom.ts b/packages/machines/toggle-group/src/toggle-group.dom.ts
index a868027428..ab8554d940 100644
--- a/packages/machines/toggle-group/src/toggle-group.dom.ts
+++ b/packages/machines/toggle-group/src/toggle-group.dom.ts
@@ -4,10 +4,9 @@ import { first, last } from "@zag-js/utils"
 
 export const dom = createScope({
   getRootId: (ctx: Ctx) => ctx.ids?.root ?? `toggle-group:${ctx.id}`,
-  getToggleId: (ctx: Ctx, value: string) => ctx.ids?.toggle?.(value) ?? `toggle-group:${ctx.id}:${value}`,
+  getItemId: (ctx: Ctx, value: string) => ctx.ids?.toggle?.(value) ?? `toggle-group:${ctx.id}:${value}`,
 
   getRootEl: (ctx: Ctx) => dom.getById(ctx, dom.getRootId(ctx)),
-
   getElements: (ctx: Ctx) => {
     const ownerId = CSS.escape(dom.getRootId(ctx))
     const selector = `[data-ownedby='${ownerId}']:not([data-disabled])`
diff --git a/packages/machines/toggle-group/src/toggle-group.machine.ts b/packages/machines/toggle-group/src/toggle-group.machine.ts
index bc194de0d4..999597cc06 100644
--- a/packages/machines/toggle-group/src/toggle-group.machine.ts
+++ b/packages/machines/toggle-group/src/toggle-group.machine.ts
@@ -126,7 +126,7 @@ export function machine(userContext: UserDefinedContext) {
           if (ctx.multiple) {
             next = next.includes(evt.value) ? remove(next, evt.value) : add(next, evt.value)
           } else {
-            next = [evt.value]
+            next = isEqual(ctx.value, [evt.value]) ? [] : [evt.value]
           }
           set.value(ctx, next)
         },
diff --git a/packages/machines/toggle-group/src/toggle-group.types.ts b/packages/machines/toggle-group/src/toggle-group.types.ts
index a890a94c14..615f8b60cb 100644
--- a/packages/machines/toggle-group/src/toggle-group.types.ts
+++ b/packages/machines/toggle-group/src/toggle-group.types.ts
@@ -102,11 +102,18 @@ export type Send = S.Send<S.AnyEventObject>
  * Component API
  * -----------------------------------------------------------------------------*/
 
-export interface ToggleProps {
+export interface ItemProps {
   value: string
   disabled?: boolean
 }
 
+export interface ItemState {
+  id: string
+  isDisabled: boolean
+  isPressed: boolean
+  isFocused: boolean
+}
+
 export interface MachineApi<T extends PropTypes = PropTypes> {
   /**
    * The value of the toggle group.
@@ -116,6 +123,10 @@ export interface MachineApi<T extends PropTypes = PropTypes> {
    * Function to set the value of the toggle group.
    */
   setValue: (values: string[]) => void
+  /**
+   * Returns the state of the toggle item.
+   */
+  getItemState(props: ItemProps): ItemState
   rootProps: T["element"]
-  getToggleProps(props: ToggleProps): T["button"]
+  getItemProps(props: ItemProps): T["button"]
 }
diff --git a/shared/src/style.css b/shared/src/style.css
index 694b971a22..2ed8e60625 100644
--- a/shared/src/style.css
+++ b/shared/src/style.css
@@ -454,13 +454,13 @@ main [data-testid="scrubber"] {
   display: inline-flex;
 }
 
-[data-scope="rating-group"][data-part="rating"] {
+[data-scope="rating-group"][data-part="item"] {
   width: 20px;
   height: 20px;
   padding: 1px;
 }
 
-[data-scope="rating-group"][data-part="rating"]:focus {
+[data-scope="rating-group"][data-part="item"]:focus {
   outline: 2px solid royalblue;
 }
 
@@ -468,11 +468,11 @@ main [data-testid="scrubber"] {
   color: #bdbdbd;
 }
 
-[data-scope="rating-group"][data-part="rating"][data-highlighted] [data-part="star"] {
+[data-scope="rating-group"][data-part="item"][data-highlighted] [data-part="star"] {
   color: #ffb400;
 }
 
-[data-scope="rating-group"][data-part="rating"][data-highlighted][data-disabled] [data-part="star"] {
+[data-scope="rating-group"][data-part="item"][data-highlighted][data-disabled] [data-part="star"] {
   color: #a1a1a1;
 }
 
@@ -797,7 +797,7 @@ main [data-testid="scrubber"] {
   outline-offset: 2px;
 }
 
-[data-scope="tags-input"][data-part="tag"] {
+[data-scope="tags-input"][data-part="item"] {
   background: #eee;
   color: #444;
   padding: 0 4px;
@@ -810,15 +810,15 @@ main [data-testid="scrubber"] {
   display: inline-block;
 }
 
-[data-scope="tags-input"][data-part="tag"][hidden] {
+[data-scope="tags-input"][data-part="item"][hidden] {
   display: none !important;
 }
-[data-scope="tags-input"][data-part="tag"][data-highlighted] {
+[data-scope="tags-input"][data-part="item"][data-highlighted] {
   background-color: #777;
   border-color: #777;
   color: #eee;
 }
-[data-scope="tags-input"][data-part="tag"][data-disabled] {
+[data-scope="tags-input"][data-part="item"][data-disabled] {
   opacity: 0.6;
   cursor: default;
 }
@@ -844,7 +844,7 @@ main [data-testid="scrubber"] {
   opacity: 0.6;
 }
 
-[data-scope="tags-input"][data-part="tag-delete-trigger"] {
+[data-scope="tags-input"][data-part="item-delete-trigger"] {
   all: unset;
 }
 
@@ -1027,27 +1027,6 @@ main [data-testid="scrubber"] {
   outline-offset: 2px;
 }
 
-/* -----------------------------------------------------------------------------
-* Toggle
-* -----------------------------------------------------------------------------*/
-
-[data-scope="toggle"][data-part="button"] {
-  background-color: white;
-  color: rgb(111, 110, 119);
-  height: 40px;
-  width: 40px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 4px;
-  font-size: 20px;
-}
-
-[data-scope="toggle"][data-part="button"][data-pressed] {
-  background-color: rgb(63, 139, 77);
-  color: white;
-}
-
 /* -----------------------------------------------------------------------------
 * Tooltip
 * -----------------------------------------------------------------------------*/
@@ -1191,7 +1170,7 @@ main [data-testid="scrubber"] {
 * Radio
 * -----------------------------------------------------------------------------*/
 
-[data-scope="radio-group"][data-part="radio-control"][data-focus] {
+[data-scope="radio-group"][data-part="item-control"][data-focus] {
   outline: 2px solid royalblue;
 }
 
@@ -1206,7 +1185,7 @@ main [data-testid="scrubber"] {
   gap: 16px;
 }
 
-[data-scope="radio-group"][data-part="radio"] {
+[data-scope="radio-group"][data-part="item"] {
   display: inline-flex;
   align-items: center;
   gap: 8px;
@@ -1214,11 +1193,11 @@ main [data-testid="scrubber"] {
   z-index: 2;
 }
 
-[data-scope="radio-group"][data-part="radio"][data-disabled] {
+[data-scope="radio-group"][data-part="item"][data-disabled] {
   cursor: not-allowed;
 }
 
-[data-scope="radio-group"][data-part="radio-control"] {
+[data-scope="radio-group"][data-part="item-control"] {
   height: 20px;
   width: 20px;
   background-color: #eee;
@@ -1229,20 +1208,20 @@ main [data-testid="scrubber"] {
   justify-content: center;
 }
 
-[data-scope="radio-group"][data-part="radio-control"][data-hover] {
+[data-scope="radio-group"][data-part="item-control"][data-hover] {
   background-color: #ccc;
 }
 
-[data-scope="radio-group"][data-part="radio-control"][data-state="checked"] {
+[data-scope="radio-group"][data-part="item-control"][data-state="checked"] {
   background-color: #2196f3;
   border-color: #2196f3;
 }
 
-[data-scope="radio-group"][data-part="radio-control"][data-state="checked"]::after {
+[data-scope="radio-group"][data-part="item-control"][data-state="checked"]::after {
   display: initial;
 }
 
-[data-scope="radio-group"][data-part="radio-control"]::after {
+[data-scope="radio-group"][data-part="item-control"]::after {
   content: "";
   display: none;
   width: 4px;
@@ -1277,7 +1256,7 @@ main [data-testid="scrubber"] {
   gap: 8px;
 }
 
-.segmented-control [data-part="radio"] {
+.segmented-control [data-part="item"] {
   padding-left: 0;
   padding: 8px;
   width: 100%;
@@ -1678,14 +1657,14 @@ main [data-testid="scrubber"] {
   display: flex;
 }
 
-[data-scope="toggle-group"][data-part="toggle"] {
+[data-scope="toggle-group"][data-part="item"] {
   border-radius: 0px;
   border: 0;
   width: 40px;
   height: 40px;
 }
 
-[data-scope="toggle-group"][data-part="toggle"][data-state="on"] {
+[data-scope="toggle-group"][data-part="item"][data-state="on"] {
   background-color: blue;
   color: white;
 }
diff --git a/website/components/machines/accordion.tsx b/website/components/machines/accordion.tsx
index 8c6bb57962..559b877e66 100644
--- a/website/components/machines/accordion.tsx
+++ b/website/components/machines/accordion.tsx
@@ -56,7 +56,7 @@ export function Accordion(props: AccordionProps) {
               px="3"
               textAlign="start"
               cursor="pointer"
-              {...api.getTriggerProps({ value: item.title })}
+              {...api.getItemTriggerProps({ value: item.title })}
               _focusVisible={{
                 outline: "2px solid #0070f3",
               }}
@@ -71,7 +71,7 @@ export function Accordion(props: AccordionProps) {
             width="full"
             py="2"
             px="3"
-            {...api.getContentProps({ value: item.title })}
+            {...api.getItemContentProps({ value: item.title })}
           >
             {item.content}
           </Box>
diff --git a/website/components/machines/combobox.tsx b/website/components/machines/combobox.tsx
index fac3e25929..8780045788 100644
--- a/website/components/machines/combobox.tsx
+++ b/website/components/machines/combobox.tsx
@@ -1,7 +1,7 @@
 import { chakra } from "@chakra-ui/system"
 import * as combobox from "@zag-js/combobox"
-import { normalizeProps, useMachine, Portal } from "@zag-js/react"
-import { useId, useState } from "react"
+import { Portal, normalizeProps, useMachine } from "@zag-js/react"
+import { useId, useMemo, useState } from "react"
 
 type ComboboxProps = {
   controls: {
@@ -62,11 +62,15 @@ const CaretIcon = () => (
 export function Combobox(props: ComboboxProps) {
   const [options, setOptions] = useState(comboboxData)
 
-  const collection = combobox.collection({
-    items: options,
-    itemToValue: (item) => item.code,
-    itemToString: (item) => item.label,
-  })
+  const collection = useMemo(
+    () =>
+      combobox.collection({
+        items: options,
+        itemToValue: (item) => item.code,
+        itemToString: (item) => item.label,
+      }),
+    [options],
+  )
 
   const [state, send] = useMachine(
     combobox.machine({
diff --git a/website/components/machines/radio.tsx b/website/components/machines/radio.tsx
index a1c92b1570..d5f81d2a0f 100644
--- a/website/components/machines/radio.tsx
+++ b/website/components/machines/radio.tsx
@@ -43,17 +43,14 @@ export function Radio(props: RadioProps) {
               opacity: 0.4,
             }}
             key={opt.id}
-            {...api.getRadioProps({ value: opt.id })}
+            {...api.getItemProps({ value: opt.id })}
           >
-            <chakra.span
-              order="2"
-              {...api.getRadioLabelProps({ value: opt.id })}
-            >
+            <chakra.span order="2" {...api.getItemTextProps({ value: opt.id })}>
               {opt.label}
             </chakra.span>
             <input
               data-peer
-              {...api.getRadioHiddenInputProps({ value: opt.id })}
+              {...api.getItemHiddenInputProps({ value: opt.id })}
             />
             <chakra.div
               order="1"
@@ -80,7 +77,7 @@ export function Radio(props: RadioProps) {
                   borderColor: "blue.500",
                 },
               }}
-              {...api.getRadioControlProps({ value: opt.id })}
+              {...api.getItemControlProps({ value: opt.id })}
             >
               {api.value === opt.id && (
                 <chakra.svg
diff --git a/website/components/machines/rating.tsx b/website/components/machines/rating.tsx
index 888b30c185..f1fcc3d71e 100644
--- a/website/components/machines/rating.tsx
+++ b/website/components/machines/rating.tsx
@@ -70,11 +70,11 @@ export function Rating(props: RadioProps) {
         <label {...api.labelProps}>Rate Us:</label>
         <chakra.div {...api.controlProps} display="inline-flex">
           {api.sizeArray.map((index) => {
-            const state = api.getRatingState({ index })
+            const state = api.getItemState({ index })
             return (
               <chakra.span
                 key={index}
-                {...api.getRatingProps({ index })}
+                {...api.getItemProps({ index })}
                 boxSize="8"
                 p="1"
                 sx={{
diff --git a/website/components/machines/segmented-control.tsx b/website/components/machines/segmented-control.tsx
index 18499eeb65..74b2f6e4f7 100644
--- a/website/components/machines/segmented-control.tsx
+++ b/website/components/machines/segmented-control.tsx
@@ -65,17 +65,17 @@ export function SegmentedControl(props: SegmentedControlProps) {
             cursor: "default",
           }}
           key={opt.value}
-          {...api.getRadioProps({ value: opt.value })}
+          {...api.getItemProps({ value: opt.value })}
         >
           <chakra.span
             order="2"
-            {...api.getRadioLabelProps({ value: opt.value })}
+            {...api.getItemTextProps({ value: opt.value })}
           >
             {opt.label}
           </chakra.span>
           <input
             data-peer
-            {...api.getRadioHiddenInputProps({ value: opt.value })}
+            {...api.getItemHiddenInputProps({ value: opt.value })}
           />
         </chakra.label>
       ))}
diff --git a/website/components/machines/tags-input.tsx b/website/components/machines/tags-input.tsx
index e1a48fffbb..bb4840e76e 100644
--- a/website/components/machines/tags-input.tsx
+++ b/website/components/machines/tags-input.tsx
@@ -38,10 +38,10 @@ export function TagsInput(props: any) {
                   margin="4px"
                   _highlighted={{ bg: "bg-primary-bold", color: "white" }}
                   _disabled={{ opacity: 0.6 }}
-                  {...api.getTagProps(opt)}
+                  {...api.getItemProps(opt)}
                 >
                   <span>{value}</span>
-                  <chakra.button ml="1" {...api.getTagDeleteTriggerProps(opt)}>
+                  <chakra.button ml="1" {...api.getItemDeleteTriggerProps(opt)}>
                     &#x2715;
                   </chakra.button>
                 </chakra.div>
@@ -49,7 +49,7 @@ export function TagsInput(props: any) {
                   px="2"
                   width="10"
                   outline="0"
-                  {...api.getTagInputProps(opt)}
+                  {...api.getItemInputProps(opt)}
                 />
               </span>
             )
diff --git a/website/components/machines/toggle-group.tsx b/website/components/machines/toggle-group.tsx
index 34818a0377..e14db461e7 100644
--- a/website/components/machines/toggle-group.tsx
+++ b/website/components/machines/toggle-group.tsx
@@ -43,13 +43,13 @@ export function ToggleGroup(props: Props) {
   return (
     <div>
       <HStack spacing="0" mt="10" {...api.rootProps}>
-        <Button {...api.getToggleProps({ value: "bold" })}>
+        <Button {...api.getItemProps({ value: "bold" })}>
           <RxFontBold />
         </Button>
-        <Button {...api.getToggleProps({ value: "italic" })}>
+        <Button {...api.getItemProps({ value: "italic" })}>
           <RxFontItalic />
         </Button>
-        <Button {...api.getToggleProps({ value: "underline" })}>
+        <Button {...api.getItemProps({ value: "underline" })}>
           <RxUnderline />
         </Button>
       </HStack>
diff --git a/website/data/components/accordion.mdx b/website/data/components/accordion.mdx
index 5b37ece7e7..4ba8cc29dd 100644
--- a/website/data/components/accordion.mdx
+++ b/website/data/components/accordion.mdx
@@ -145,7 +145,7 @@ const [state, send] = useMachine(
 ## Disabling specific accordion items
 
 To disable a specific accordion, pass the `disabled: true` property to the
-`getItemProps`, `getTriggerProps` and `getContentProps`.
+`getItemProps`, `getItemTriggerProps` and `getItemContentProps`.
 
 When an accordion item is disabled, it is skipped from keyboard navigation and
 can't be interacted with.
@@ -154,11 +154,13 @@ can't be interacted with.
 //...
 <div {...api.getItemProps({ value: "item", disabled: true })}>
   <h3>
-    <button {...api.getTriggerProps({ value: "item", disabled: true })}>
+    <button {...api.getItemTriggerProps({ value: "item", disabled: true })}>
       Trigger
     </button>
   </h3>
-  <div {...api.getContentProps({ value: "item", disabled: true })}>Content</div>
+  <div {...api.getItemContentProps({ value: "item", disabled: true })}>
+    Content
+  </div>
 </div>
 //...
 ```
@@ -190,11 +192,11 @@ closed.
   /* styles for the item is open or closed state */
 }
 
-[data-part="trigger"][data-state="open|closed"] {
+[data-part="item-trigger"][data-state="open|closed"] {
   /* styles for the item is open or closed state */
 }
 
-[data-part="content"][data-state="open|closed"] {
+[data-part="item-content"][data-state="open|closed"] {
   /* styles for the item is open or closed state */
 }
 ```
@@ -209,11 +211,11 @@ on the item and content.
   /* styles for the item's focus state */
 }
 
-[data-part="trigger"]:focus {
+[data-part="item-trigger"]:focus {
   /* styles for the trigger's focus state */
 }
 
-[data-part="content"][data-focus] {
+[data-part="item-content"][data-focus] {
   /* styles for the content's focus state */
 }
 ```
diff --git a/website/data/snippets/react/accordion/usage.mdx b/website/data/snippets/react/accordion/usage.mdx
index 09d91efa48..ca45bbffae 100644
--- a/website/data/snippets/react/accordion/usage.mdx
+++ b/website/data/snippets/react/accordion/usage.mdx
@@ -18,11 +18,11 @@ function Accordion() {
       {data.map((item) => (
         <div {...api.getItemProps({ value: item.title })}>
           <h3>
-            <button {...api.getTriggerProps({ value: item.title })}>
+            <button {...api.getItemTriggerProps({ value: item.title })}>
               {item.title}
             </button>
           </h3>
-          <div {...api.getContentProps({ value: item.title })}>
+          <div {...api.getItemContentProps({ value: item.title })}>
             {item.content}
           </div>
         </div>
diff --git a/website/data/snippets/react/radio-group/usage.mdx b/website/data/snippets/react/radio-group/usage.mdx
index f144d7d363..45395c4601 100644
--- a/website/data/snippets/react/radio-group/usage.mdx
+++ b/website/data/snippets/react/radio-group/usage.mdx
@@ -18,12 +18,10 @@ function Radio() {
     <div {...api.rootProps}>
       <h3 {...api.labelProps}>Fruits</h3>
       {items.map((opt) => (
-        <label key={opt.id} {...api.getRadioProps({ value: opt.id })}>
-          <span {...api.getRadioLabelProps({ value: opt.id })}>
-            {opt.label}
-          </span>
-          <input {...api.getRadioHiddenInputProps({ value: opt.id })} />
-          <div {...api.getRadioControlProps({ value: opt.id })} />
+        <label key={opt.id} {...api.getItemProps({ value: opt.id })}>
+          <span {...api.getItemTextProps({ value: opt.id })}>{opt.label}</span>
+          <input {...api.getItemHiddenInputProps({ value: opt.id })} />
+          <div {...api.getItemControlProps({ value: opt.id })} />
         </label>
       ))}
     </div>
diff --git a/website/data/snippets/react/rating-group/usage.mdx b/website/data/snippets/react/rating-group/usage.mdx
index 428aa4b12c..bb429b1785 100644
--- a/website/data/snippets/react/rating-group/usage.mdx
+++ b/website/data/snippets/react/rating-group/usage.mdx
@@ -13,9 +13,9 @@ function Rating() {
       <label {...api.labelProps}>Rate:</label>
       <div {...api.controlProps}>
         {api.sizeArray.map((index) => {
-          const state = api.getRatingState(index)
+          const state = api.getItemState({ index })
           return (
-            <span key={index} {...api.getRatingProps({ index })}>
+            <span key={index} {...api.getItemProps({ index })}>
               {state.isHalf ? <HalfStar /> : <Star />}
             </span>
           )
diff --git a/website/data/snippets/react/segmented-control/usage.mdx b/website/data/snippets/react/segmented-control/usage.mdx
index 9be7a8b952..435b1b30b2 100644
--- a/website/data/snippets/react/segmented-control/usage.mdx
+++ b/website/data/snippets/react/segmented-control/usage.mdx
@@ -18,11 +18,11 @@ function Radio() {
     <div {...api.rootProps}>
       <div {...api.indicatorProps} />
       {items.map((opt) => (
-        <label key={opt.value} {...api.getRadioProps({ value: opt.value })}>
-          <span {...api.getRadioLabelProps({ value: opt.value })}>
+        <label key={opt.value} {...api.getItemProps({ value: opt.value })}>
+          <span {...api.getItemTextProps({ value: opt.value })}>
             {opt.label}
           </span>
-          <input {...api.getRadioHiddenInputProps({ value: opt.value })} />
+          <input {...api.getItemHiddenInputProps({ value: opt.value })} />
         </label>
       ))}
     </div>
diff --git a/website/data/snippets/react/tags-input/usage.mdx b/website/data/snippets/react/tags-input/usage.mdx
index 94a0e13fab..886a7d5c5c 100644
--- a/website/data/snippets/react/tags-input/usage.mdx
+++ b/website/data/snippets/react/tags-input/usage.mdx
@@ -16,13 +16,13 @@ export function TagsInput() {
     <div {...api.rootProps}>
       {api.value.map((value, index) => (
         <span key={index}>
-          <div {...api.getTagProps({ index, value })}>
+          <div {...api.getItemProps({ index, value })}>
             <span>{value} </span>
-            <button {...api.getTagDeleteTriggerProps({ index, value })}>
+            <button {...api.getItemDeleteTriggerProps({ index, value })}>
               &#x2715;
             </button>
           </div>
-          <input {...api.getTagInputProps({ index, value })} />
+          <input {...api.getItemInputProps({ index, value })} />
         </span>
       ))}
       <input placeholder="Add tag..." {...api.inputProps} />
diff --git a/website/data/snippets/react/toggle-group/usage.mdx b/website/data/snippets/react/toggle-group/usage.mdx
index 112f336e78..9175ec47bd 100644
--- a/website/data/snippets/react/toggle-group/usage.mdx
+++ b/website/data/snippets/react/toggle-group/usage.mdx
@@ -9,9 +9,9 @@ export function ToggleGroup() {
 
   return (
     <div {...api.rootProps}>
-      <button {...api.getToggleProps({ value: "bold" })}>B</button>
-      <button {...api.getToggleProps({ value: "italic" })}>I</button>
-      <button {...api.getToggleProps({ value: "underline" })}>U</button>
+      <button {...api.getItemProps({ value: "bold" })}>B</button>
+      <button {...api.getItemProps({ value: "italic" })}>I</button>
+      <button {...api.getItemProps({ value: "underline" })}>U</button>
     </div>
   )
 }
diff --git a/website/data/snippets/solid/accordion/usage.mdx b/website/data/snippets/solid/accordion/usage.mdx
index c896bd6bae..0771b115fb 100644
--- a/website/data/snippets/solid/accordion/usage.mdx
+++ b/website/data/snippets/solid/accordion/usage.mdx
@@ -20,11 +20,11 @@ function Accordion() {
         {(item) => (
           <div {...api().getItemProps({ value: item.title })}>
             <h3>
-              <button {...api().getTriggerProps({ value: item.title })}>
+              <button {...api().getItemTriggerProps({ value: item.title })}>
                 {item.title}
               </button>
             </h3>
-            <div {...api().getContentProps({ value: item.title })}>
+            <div {...api().getItemContentProps({ value: item.title })}>
               {item.content}
             </div>
           </div>
diff --git a/website/data/snippets/solid/radio-group/usage.mdx b/website/data/snippets/solid/radio-group/usage.mdx
index 74a366167b..3a2b70286d 100644
--- a/website/data/snippets/solid/radio-group/usage.mdx
+++ b/website/data/snippets/solid/radio-group/usage.mdx
@@ -19,12 +19,12 @@ function Radio() {
     <div {...api().rootProps}>
       <h3 {...api().labelProps}>Fruits</h3>
       {items.map((opt) => (
-        <label {...api().getRadioProps({ value: opt.id })}>
-          <span {...api().getRadioLabelProps({ value: opt.id })}>
+        <label {...api().getItemProps({ value: opt.id })}>
+          <span {...api().getItemTextProps({ value: opt.id })}>
             {opt.label}
           </span>
-          <input {...api().getRadioHiddenInputProps({ value: opt.id })} />
-          <div {...api().getRadioControlProps({ value: opt.id })} />
+          <input {...api().getItemHiddenInputProps({ value: opt.id })} />
+          <div {...api().getItemControlProps({ value: opt.id })} />
         </label>
       ))}
     </div>
diff --git a/website/data/snippets/solid/rating-group/usage.mdx b/website/data/snippets/solid/rating-group/usage.mdx
index 32e9647b08..428ad0dba3 100644
--- a/website/data/snippets/solid/rating-group/usage.mdx
+++ b/website/data/snippets/solid/rating-group/usage.mdx
@@ -14,9 +14,9 @@ function Rating() {
       <label {...api().labelProps}>Rate:</label>
       <div {...api().controlProps}>
         {api().sizeArray.map((index) => {
-          const state = api().getRatingState(index)
+          const state = api().getItemState(index)
           return (
-            <span key={index} {...api().getRatingProps({ index })}>
+            <span key={index} {...api().getItemProps({ index })}>
               {state.isHalf ? <HalfStar /> : <Star />}
             </span>
           )
diff --git a/website/data/snippets/solid/segmented-control/usage.mdx b/website/data/snippets/solid/segmented-control/usage.mdx
index 364b6dd239..2ca4b45ffe 100644
--- a/website/data/snippets/solid/segmented-control/usage.mdx
+++ b/website/data/snippets/solid/segmented-control/usage.mdx
@@ -19,11 +19,11 @@ function Radio() {
     <div {...api().rootProps}>
       <div {...api().indicatorProps} />
       {items.map((opt) => (
-        <label key={opt.value} {...api().getRadioProps({ value: opt.value })}>
-          <span {...api().getRadioLabelProps({ value: opt.value })}>
+        <label key={opt.value} {...api().getItemProps({ value: opt.value })}>
+          <span {...api().getItemTextProps({ value: opt.value })}>
             {opt.label}
           </span>
-          <input {...api().getRadioHiddenInputProps({ value: opt.value })} />
+          <input {...api().getItemHiddenInputProps({ value: opt.value })} />
         </label>
       ))}
     </div>
diff --git a/website/data/snippets/solid/tags-input/usage.mdx b/website/data/snippets/solid/tags-input/usage.mdx
index a53858b41e..8f67103662 100644
--- a/website/data/snippets/solid/tags-input/usage.mdx
+++ b/website/data/snippets/solid/tags-input/usage.mdx
@@ -18,15 +18,15 @@ export function TagsInput() {
       <For each={api().value}>
         {(value, index) => (
           <span>
-            <div {...api().getTagProps({ index: index(), value })}>
+            <div {...api().getItemProps({ index: index(), value })}>
               <span>{value} </span>
               <button
-                {...api().getTagDeleteTriggerProps({ index: index(), value })}
+                {...api().getItemDeleteTriggerProps({ index: index(), value })}
               >
                 &#x2715;
               </button>
             </div>
-            <input {...api().getTagInputProps({ index: index(), value })} />
+            <input {...api().getItemInputProps({ index: index(), value })} />
           </span>
         )}
       </For>
diff --git a/website/data/snippets/solid/toggle-group/usage.mdx b/website/data/snippets/solid/toggle-group/usage.mdx
index f85766bd30..9b021b897b 100644
--- a/website/data/snippets/solid/toggle-group/usage.mdx
+++ b/website/data/snippets/solid/toggle-group/usage.mdx
@@ -9,9 +9,9 @@ export function ToggleGroup() {
 
   return (
     <div {...api().rootProps}>
-      <button {...api().getToggleProps({ value: "bold" })}>B</button>
-      <button {...api().getToggleProps({ value: "italic" })}>I</button>
-      <button {...api().getToggleProps({ value: "underline" })}>U</button>
+      <button {...api().getItemProps({ value: "bold" })}>B</button>
+      <button {...api().getItemProps({ value: "italic" })}>I</button>
+      <button {...api().getItemProps({ value: "underline" })}>U</button>
     </div>
   )
 }
diff --git a/website/data/snippets/vue-jsx/accordion/usage.mdx b/website/data/snippets/vue-jsx/accordion/usage.mdx
index b4d6017b50..e8d7e4c8c0 100644
--- a/website/data/snippets/vue-jsx/accordion/usage.mdx
+++ b/website/data/snippets/vue-jsx/accordion/usage.mdx
@@ -24,11 +24,11 @@ export default defineComponent({
           {data.map((item) => (
             <div {...api.getItemProps({ value: item.title })}>
               <h3>
-                <button {...api.getTriggerProps({ value: item.title })}>
+                <button {...api.getItemTriggerProps({ value: item.title })}>
                   {item.title}
                 </button>
               </h3>
-              <div {...api.getContentProps({ value: item.title })}>
+              <div {...api.getItemContentProps({ value: item.title })}>
                 {item.content}
               </div>
             </div>
diff --git a/website/data/snippets/vue-jsx/radio-group/usage.mdx b/website/data/snippets/vue-jsx/radio-group/usage.mdx
index 33af0f8189..2d709b8df1 100644
--- a/website/data/snippets/vue-jsx/radio-group/usage.mdx
+++ b/website/data/snippets/vue-jsx/radio-group/usage.mdx
@@ -24,12 +24,12 @@ export default defineComponent({
         <div {...api.rootProps}>
           <h3 {...api.labelProps}>Fruits</h3>
           {items.map((opt) => (
-            <label {...api.getRadioProps({ value: opt.id })}>
-              <span {...api.getRadioLabelProps({ value: opt.id })}>
+            <label {...api.getItemProps({ value: opt.id })}>
+              <span {...api.getItemTextProps({ value: opt.id })}>
                 {opt.label}
               </span>
-              <input {...api.getRadioHiddenInputProps({ value: opt.id })} />
-              <div {...api.getRadioControlProps({ value: opt.id })} />
+              <input {...api.getItemHiddenInputProps({ value: opt.id })} />
+              <div {...api.getItemControlProps({ value: opt.id })} />
             </label>
           ))}
         </div>
diff --git a/website/data/snippets/vue-jsx/rating-group/usage.mdx b/website/data/snippets/vue-jsx/rating-group/usage.mdx
index 929916333a..250e250bff 100644
--- a/website/data/snippets/vue-jsx/rating-group/usage.mdx
+++ b/website/data/snippets/vue-jsx/rating-group/usage.mdx
@@ -20,9 +20,9 @@ export default function defineComponent({
           <label {...api.labelProps}>Rate:</label>
           <div {...api.controlProps}>
             {api.sizeArray.map((index) => {
-              const state = api.getRatingState(index)
+              const state = api.getItemState({ index })
               return (
-                <span key={index} {...api.getRatingProps({ index })}>
+                <span key={index} {...api.getItemProps({ index })}>
                   {state.isHalf ? <HalfStar /> : <Star />}
                 </span>
               )
diff --git a/website/data/snippets/vue-jsx/segmented-control/usage.mdx b/website/data/snippets/vue-jsx/segmented-control/usage.mdx
index 12b25eb511..3a33c7878f 100644
--- a/website/data/snippets/vue-jsx/segmented-control/usage.mdx
+++ b/website/data/snippets/vue-jsx/segmented-control/usage.mdx
@@ -23,11 +23,11 @@ export default defineComponent({
       return (
         <div {...api.rootProps}>
           {items.map((opt) => (
-            <label {...api.getRadioProps({ value: opt.value })}>
-              <span {...api.getRadioLabelProps({ value: opt.value })}>
+            <label {...api.getItemProps({ value: opt.value })}>
+              <span {...api.getItemTextProps({ value: opt.value })}>
                 {opt.label}
               </span>
-              <input {...api.getRadioHiddenInputProps({ value: opt.value })} />
+              <input {...api.getItemHiddenInputProps({ value: opt.value })} />
             </label>
           ))}
         </div>
diff --git a/website/data/snippets/vue-jsx/tags-input/usage.mdx b/website/data/snippets/vue-jsx/tags-input/usage.mdx
index ef4aed4348..d494b1faff 100644
--- a/website/data/snippets/vue-jsx/tags-input/usage.mdx
+++ b/website/data/snippets/vue-jsx/tags-input/usage.mdx
@@ -24,13 +24,13 @@ export default defineComponent({
         <div {...api.rootProps}>
           {api.value.map((value, index) => (
             <span key={index}>
-              <div {...api.getTagProps({ index, value })}>
+              <div {...api.getItemProps({ index, value })}>
                 <span>{value} </span>
-                <button {...api.getTagDeleteTriggerProps({ index, value })}>
+                <button {...api.getItemDeleteTriggerProps({ index, value })}>
                   &#x2715;
                 </button>
               </div>
-              <input {...api.getTagInputProps({ index, value })} />
+              <input {...api.getItemInputProps({ index, value })} />
             </span>
           ))}
           <input placeholder="Add tag..." {...api.inputProps} />
diff --git a/website/data/snippets/vue-jsx/toggle-group/usage.mdx b/website/data/snippets/vue-jsx/toggle-group/usage.mdx
index e63947fddc..304b5adbff 100644
--- a/website/data/snippets/vue-jsx/toggle-group/usage.mdx
+++ b/website/data/snippets/vue-jsx/toggle-group/usage.mdx
@@ -16,9 +16,9 @@ export default defineComponent({
       const api = apiRef.value
       return (
         <div {...api.rootProps}>
-          <button {...api.getToggleProps({ value: "bold" })}>B</button>
-          <button {...api.getToggleProps({ value: "italic" })}>I</button>
-          <button {...api.getToggleProps({ value: "underline" })}>U</button>
+          <button {...api.getItemProps({ value: "bold" })}>B</button>
+          <button {...api.getItemProps({ value: "italic" })}>I</button>
+          <button {...api.getItemProps({ value: "underline" })}>U</button>
         </div>
       )
     }
diff --git a/website/data/snippets/vue-sfc/accordion/usage.mdx b/website/data/snippets/vue-sfc/accordion/usage.mdx
index b07a645778..c8a7e8c753 100644
--- a/website/data/snippets/vue-sfc/accordion/usage.mdx
+++ b/website/data/snippets/vue-sfc/accordion/usage.mdx
@@ -23,11 +23,11 @@ const api = computed(() => accordion.connect(state.value, send, normalizeProps))
       v-bind="api.getItemProps({ value: item.title })"
     >
       <h3>
-        <button v-bind="api.getTriggerProps({ value: item.title })">
+        <button v-bind="api.getItemTriggerProps({ value: item.title })">
           {{ item.title }}
         </button>
       </h3>
-      <div v-bind="api.getContentProps({ value: item.title })">
+      <div v-bind="api.getItemContentProps({ value: item.title })">
         {{ item.content }}
       </div>
     </div>
diff --git a/website/data/snippets/vue-sfc/radio-group/usage.mdx b/website/data/snippets/vue-sfc/radio-group/usage.mdx
index afc55cf0fc..e044d5ce1a 100644
--- a/website/data/snippets/vue-sfc/radio-group/usage.mdx
+++ b/website/data/snippets/vue-sfc/radio-group/usage.mdx
@@ -23,10 +23,10 @@ const api = computed(() => radio.connect(state.value, send, normalizeProps))
       v-for="opt in items"
       :key="opt.id"
     >
-      <label v-bind="api.getRadioProps({ value: opt.id })">
-        <span v-bind="api.getRadioLabelProps({ value: opt.id })">{{ opt.label }}</span>
-        <input v-bind="api.getRadioHiddenInputProps({ value: opt.id })" />
-        <div v-bind="api.getRadioControlProps({ value: opt.id })" />
+      <label v-bind="api.getItemProps({ value: opt.id })">
+        <span v-bind="api.getItemTextProps({ value: opt.id })">{{ opt.label }}</span>
+        <input v-bind="api.getItemHiddenInputProps({ value: opt.id })" />
+        <div v-bind="api.getItemControlProps({ value: opt.id })" />
       </label>
     </div>
   </div>
diff --git a/website/data/snippets/vue-sfc/rating-group/usage.mdx b/website/data/snippets/vue-sfc/rating-group/usage.mdx
index 819a4bdfe6..2c032677ab 100644
--- a/website/data/snippets/vue-sfc/rating-group/usage.mdx
+++ b/website/data/snippets/vue-sfc/rating-group/usage.mdx
@@ -17,9 +17,9 @@
       <span
         v-for="index in api.sizeArray"
         :key="index"
-        v-bind="api.getRatingProps({ index })"
+        v-bind="api.getItemProps({ index })"
       >
-        <HalfStar v-if="api.getRatingState(index).isHalf" />
+        <HalfStar v-if="api.getItemState({ index }).isHalf" />
         <Star v-else />
       </span>
     </div>
diff --git a/website/data/snippets/vue-sfc/segmented-control/usage.mdx b/website/data/snippets/vue-sfc/segmented-control/usage.mdx
index f9a0ba61d4..bef1906844 100644
--- a/website/data/snippets/vue-sfc/segmented-control/usage.mdx
+++ b/website/data/snippets/vue-sfc/segmented-control/usage.mdx
@@ -20,11 +20,11 @@ const api = computed(() => radio.connect(state.value, send, normalizeProps));
   <div v-bind="api.rootProps">
     <div v-bind="api.indicatorProps" />
     <div v-for="opt in items" :key="opt.value">
-      <label v-bind="api.getRadioProps({ value: opt.value })">
-        <span v-bind="api.getRadioLabelProps({ value: opt.value })">{{
+      <label v-bind="api.getItemProps({ value: opt.value })">
+        <span v-bind="api.getItemTextProps({ value: opt.value })">{{
           opt.label
         }}</span>
-        <input v-bind="api.getRadioHiddenInputProps({ value: opt.value })" />
+        <input v-bind="api.getItemHiddenInputProps({ value: opt.value })" />
       </label>
     </div>
   </div>
diff --git a/website/data/snippets/vue-sfc/tags-input/usage.mdx b/website/data/snippets/vue-sfc/tags-input/usage.mdx
index cb5d2945c4..db1c0f4b1d 100644
--- a/website/data/snippets/vue-sfc/tags-input/usage.mdx
+++ b/website/data/snippets/vue-sfc/tags-input/usage.mdx
@@ -18,13 +18,13 @@ const api = computed(() =>
 <template>
   <div ref="ref" v-bind="api.rootProps">
     <span v-for="(value, index) in api.value" :key="index">
-      <div v-bind="api.getTagProps({ index, value })">
+      <div v-bind="api.getItemProps({ index, value })">
         <span>{value} </span>
-        <button v-bind="api.getTagDeleteTriggerProps({ index, value })">
+        <button v-bind="api.getItemDeleteTriggerProps({ index, value })">
           &#x2715;
         </button>
       </div>
-      <input v-bind="api.getTagInputProps({ index, value })" />
+      <input v-bind="api.getItemInputProps({ index, value })" />
     </span>
     <input placeholder="Add tag..." v-bind="api.inputProps" />
   </div>
diff --git a/website/data/snippets/vue-sfc/toggle-group/usage.mdx b/website/data/snippets/vue-sfc/toggle-group/usage.mdx
index 5b2372bd26..4fa3eac7ca 100644
--- a/website/data/snippets/vue-sfc/toggle-group/usage.mdx
+++ b/website/data/snippets/vue-sfc/toggle-group/usage.mdx
@@ -10,9 +10,9 @@ const api = computed(() => toggle.connect(state.value, send, normalizeProps))
 
 <template>
   <div v-bind="api.rootProps">
-    <button v-bind="api.getToggleProps({ value: 'bold' })">B</button>
-    <button v-bind="api.getToggleProps({ value: 'italic' })">I</button>
-    <button v-bind="api.getToggleProps({ value: 'underline' })">U</button>
+    <button v-bind="api.getItemProps({ value: 'bold' })">B</button>
+    <button v-bind="api.getItemProps({ value: 'italic' })">I</button>
+    <button v-bind="api.getItemProps({ value: 'underline' })">U</button>
   </div>
 </template>
 ```