From dc9fcc96a7554a689fa40cdf06f99ca98af4c1f0 Mon Sep 17 00:00:00 2001
From: Max <maximo@nimiq.com>
Date: Sun, 23 Jul 2023 17:33:07 +0700
Subject: [PATCH] [Accordion]feat: 2/3 (#211)

* [Accordion]feat: 2/3

* Added useSingleOrMultipleValue

* [Accordion]fix: Check if item is disabled onClick

* [useSingleOrMultipleValue] fix: use defaultValue from props

* [AccordionStory] fix: Use collapsible for single type

* [Accordion] fix: Remove unnecessary type in inject
---
 README.md                                     |   2 +-
 .../src/Accordion/AccordionContent.vue        |  41 ++--
 .../src/Accordion/AccordionHeader.vue         |  28 +--
 .../radix-vue/src/Accordion/AccordionImpl.vue |  77 -------
 .../src/Accordion/AccordionImplMultiple.vue   |  76 -------
 .../src/Accordion/AccordionImplSingle.vue     |  79 -------
 .../radix-vue/src/Accordion/AccordionItem.vue | 194 ++++++------------
 .../radix-vue/src/Accordion/AccordionRoot.vue | 113 ++++++++--
 .../src/Accordion/AccordionTrigger.vue        |  52 ++---
 packages/radix-vue/src/Accordion/index.ts     |  21 --
 packages/radix-vue/src/Tabs/TabsTrigger.vue   |  14 +-
 packages/radix-vue/src/shared/types.ts        |   3 +-
 .../src/shared/useArrowNavigation.test.ts     |  67 +++---
 .../src/shared/useArrowNavigation.ts          |  43 +++-
 .../src/shared/useSingleOrMultipleValue.ts    | 115 +++++++++++
 .../src/components/Demo/AccordionDemo.vue     |  43 ++--
 pnpm-lock.yaml                                |  88 +-------
 17 files changed, 443 insertions(+), 613 deletions(-)
 delete mode 100644 packages/radix-vue/src/Accordion/AccordionImpl.vue
 delete mode 100644 packages/radix-vue/src/Accordion/AccordionImplMultiple.vue
 delete mode 100644 packages/radix-vue/src/Accordion/AccordionImplSingle.vue
 create mode 100644 packages/radix-vue/src/shared/useSingleOrMultipleValue.ts

diff --git a/README.md b/README.md
index 5fe1f2063..8d89d22db 100644
--- a/README.md
+++ b/README.md
@@ -23,7 +23,7 @@ For changelog, visit [radix-vue.com/overview/releases](https://radix-vue.com/ove
 
 | Component                                                           | Usable | Complete API | Complete Accessibility |
 | :------------------------------------------------------------------ | :----: | ------------ | ---------------------- |
-| [Accordion](https://radix-vue.com/components/accordion)             |   ✅   |              |                        |
+| [Accordion](https://radix-vue.com/components/accordion)             |   ✅   | ✅           | ✅                     |
 | [Alert Dialog](https://radix-vue.com/components/alert-dialog)       |   ✅   | ✅           |                        |
 | [Aspect Ratio](https://radix-vue.com/components/aspect-ratio)       |   ✅   | ✅           |                        |
 | [Avatar](https://radix-vue.com/components/avatar)                   |   ✅   | ✅           |                        |
diff --git a/packages/radix-vue/src/Accordion/AccordionContent.vue b/packages/radix-vue/src/Accordion/AccordionContent.vue
index 550bae0fe..34eb7e71d 100644
--- a/packages/radix-vue/src/Accordion/AccordionContent.vue
+++ b/packages/radix-vue/src/Accordion/AccordionContent.vue
@@ -1,32 +1,33 @@
 <script setup lang="ts">
+import type { PrimitiveProps } from "@/Primitive";
 import { inject } from "vue";
 import { CollapsibleContent } from "../Collapsible";
-import {
-  ACCORDION_IMPL_INJECTION_KEY,
-  type AccordionImplProvideValue,
-} from "./AccordionImpl.vue";
-import {
-  ACCORDION_ITEM_INJECTION_KEY,
-  type AccordionItemProvideValue,
-} from "./AccordionItem.vue";
+import { ACCORDION_ITEM_INJECTION_KEY } from "./AccordionItem.vue";
+import { ACCORDION_INJECTION_KEY } from "./AccordionRoot.vue";
 
-const accordionImplInjectedValue = inject<AccordionImplProvideValue>(
-  ACCORDION_IMPL_INJECTION_KEY
-);
-const accordionItemInjectedValue = inject<AccordionItemProvideValue>(
-  ACCORDION_ITEM_INJECTION_KEY
-);
+interface AccordionContentProps extends PrimitiveProps {}
+
+const props = defineProps<AccordionContentProps>();
+
+const injectedRoot = inject(ACCORDION_INJECTION_KEY);
+const injectedItem = inject(ACCORDION_ITEM_INJECTION_KEY);
 </script>
 
 <template>
   <CollapsibleContent
     role="region"
-    :aria-labelledby="accordionItemInjectedValue?.triggerId"
-    :data-orientation="accordionImplInjectedValue?.orientation"
-    :style="{
-      ['--radix-accordion-content-height' as any]: 'var(--radix-collapsible-content-height)',
-      ['--radix-accordion-content-width' as any]: 'var(--radix-collapsible-content-width)',
-    }"
+    :id="injectedItem?.triggerId"
+    :open="injectedItem?.open.value"
+    :hidden="!injectedItem?.open.value"
+    :as-child="props.asChild"
+    :aria-labelledby="injectedItem?.triggerId"
+    :data-state="injectedItem?.dataState.value"
+    :data-disabled="injectedItem?.dataDisabled.value"
+    :data-orientation="injectedRoot?.orientation"
+    :style="`
+      --radix-accordion-content-width: var(--radix-collapsible-content-width);
+      --radix-accordion-content-height: var(--radix-collapsible-content-height);
+    `"
   >
     <slot />
   </CollapsibleContent>
diff --git a/packages/radix-vue/src/Accordion/AccordionHeader.vue b/packages/radix-vue/src/Accordion/AccordionHeader.vue
index 25b393dae..febf98b24 100644
--- a/packages/radix-vue/src/Accordion/AccordionHeader.vue
+++ b/packages/radix-vue/src/Accordion/AccordionHeader.vue
@@ -1,33 +1,23 @@
 <script setup lang="ts">
-import { inject } from "vue";
 import { PrimitiveH3, type PrimitiveProps } from "@/Primitive";
+import { inject } from "vue";
+import { ACCORDION_ITEM_INJECTION_KEY } from "./AccordionItem.vue";
+import { ACCORDION_INJECTION_KEY } from "./AccordionRoot.vue";
 
 interface AccordionHeaderProps extends PrimitiveProps {}
-const props = defineProps<AccordionHeaderProps>();
 
-import {
-  ACCORDION_IMPL_INJECTION_KEY,
-  type AccordionImplProvideValue,
-} from "./AccordionImpl.vue";
-import {
-  ACCORDION_ITEM_INJECTION_KEY,
-  type AccordionItemProvideValue,
-} from "./AccordionItem.vue";
+const props = defineProps<AccordionHeaderProps>();
 
-const accordionImplInjectedValue = inject<AccordionImplProvideValue>(
-  ACCORDION_IMPL_INJECTION_KEY
-);
-const accordionItemInjectedValue = inject<AccordionItemProvideValue>(
-  ACCORDION_ITEM_INJECTION_KEY
-);
+const injectedRoot = inject(ACCORDION_INJECTION_KEY);
+const injectedItem = inject(ACCORDION_ITEM_INJECTION_KEY);
 </script>
 
 <template>
   <PrimitiveH3
-    :data-orientation="accordionImplInjectedValue?.orientation"
-    :data-state="accordionItemInjectedValue?.open ? 'open' : 'closed'"
-    :data-disabled="accordionItemInjectedValue?.disabled ? '' : undefined"
     :as-child="props.asChild"
+    :data-orientation="injectedRoot?.orientation"
+    :data-state="injectedItem?.dataState.value"
+    :data-disabled="injectedItem?.dataDisabled.value"
   >
     <slot />
   </PrimitiveH3>
diff --git a/packages/radix-vue/src/Accordion/AccordionImpl.vue b/packages/radix-vue/src/Accordion/AccordionImpl.vue
deleted file mode 100644
index 722310af0..000000000
--- a/packages/radix-vue/src/Accordion/AccordionImpl.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<script lang="ts">
-import type { InjectionKey, Ref } from "vue";
-export type Direction = "ltr" | "rtl";
-
-export interface AccordionImplProps extends PrimitiveProps {
-  /**
-   * Whether or not an accordion is disabled from user interaction.
-   *
-   * @defaultValue false
-   */
-  disabled?: boolean;
-  /**
-   * The layout in which the Accordion operates.
-   * @default vertical
-   */
-  orientation?: "horizontal" | "vertical";
-  /**
-   * The language read direction.
-   */
-  dir?: Direction;
-}
-
-export interface AccordionValueProvideValue {
-  modelValue: Ref<string | string[]>;
-  onItemOpen(value: string): void;
-  onItemClose(value: string): void;
-}
-
-export const ACCORDION_VALUE_INJECTION_KEY =
-  Symbol() as InjectionKey<AccordionValueProvideValue>;
-
-export interface AccordionCollapsibleProvideValue {
-  collapsible: boolean;
-}
-
-export const ACCORDION_COLLAPSIBLE_INJECTION_KEY =
-  Symbol() as InjectionKey<AccordionCollapsibleProvideValue>;
-
-export interface AccordionImplProvideValue {
-  disabled?: boolean;
-  direction: AccordionImplProps["dir"];
-  orientation: AccordionImplProps["orientation"];
-  parentElement: Ref<HTMLElement | undefined>;
-}
-
-export const ACCORDION_IMPL_INJECTION_KEY =
-  Symbol() as InjectionKey<AccordionImplProvideValue>;
-</script>
-
-<script setup lang="ts">
-import { provide } from "vue";
-import {
-  PrimitiveDiv,
-  usePrimitiveElement,
-  type PrimitiveProps,
-} from "@/Primitive";
-
-const props = withDefaults(defineProps<AccordionImplProps>(), {
-  orientation: "vertical",
-});
-
-const { primitiveElement, currentElement: parentElement } =
-  usePrimitiveElement();
-
-provide<AccordionImplProvideValue>(ACCORDION_IMPL_INJECTION_KEY, {
-  disabled: props.disabled,
-  direction: props.dir,
-  orientation: props.orientation,
-  parentElement,
-});
-</script>
-
-<template>
-  <PrimitiveDiv ref="primitiveElement">
-    <slot />
-  </PrimitiveDiv>
-</template>
diff --git a/packages/radix-vue/src/Accordion/AccordionImplMultiple.vue b/packages/radix-vue/src/Accordion/AccordionImplMultiple.vue
deleted file mode 100644
index f11422d5b..000000000
--- a/packages/radix-vue/src/Accordion/AccordionImplMultiple.vue
+++ /dev/null
@@ -1,76 +0,0 @@
-<script lang="ts">
-import type {
-  AccordionCollapsibleProvideValue,
-  AccordionImplProps,
-  AccordionValueProvideValue,
-} from "./AccordionImpl.vue";
-import { useVModel } from "@vueuse/core";
-
-export interface AccordionImplMultipleProps extends AccordionImplProps {
-  /**
-   * The controlled stateful value of the accordion items whose contents are expanded.
-   */
-  modelValue?: string[];
-  /**
-   * The value of the items whose contents are expanded when the accordion is initially rendered. Use
-   * `defaultValue` if you do not need to control the state of an accordion.
-   */
-  defaultValue?: string[];
-  /**
-   * The callback that fires when the state of the accordion changes.
-   */
-  onValueChange?(value: string[]): void;
-}
-
-export interface AccordionMultipleProps extends AccordionImplMultipleProps {
-  type: "multiple";
-}
-</script>
-
-<script setup lang="ts">
-import { provide } from "vue";
-import AccordionImpl, {
-  ACCORDION_COLLAPSIBLE_INJECTION_KEY,
-  ACCORDION_VALUE_INJECTION_KEY,
-} from "./AccordionImpl.vue";
-
-const props = withDefaults(defineProps<AccordionMultipleProps>(), {
-  // @ts-expect-error
-  defaultValue: [],
-});
-
-const emit = defineEmits<{
-  (e: "update:modelValue", value: string[] | undefined): void;
-}>();
-
-const modelValue = useVModel(props, "modelValue", emit, {
-  defaultValue: props.defaultValue,
-  passive: true,
-});
-
-const handleItemOpen = (itemValue: string) => {
-  modelValue.value = [...modelValue.value, itemValue];
-};
-
-const handleItemClose = (itemValue: string) => {
-  modelValue.value = [...modelValue.value].filter(
-    (value) => value !== itemValue
-  );
-};
-
-provide<AccordionValueProvideValue>(ACCORDION_VALUE_INJECTION_KEY, {
-  modelValue,
-  onItemOpen: handleItemOpen,
-  onItemClose: handleItemClose,
-});
-
-provide<AccordionCollapsibleProvideValue>(ACCORDION_COLLAPSIBLE_INJECTION_KEY, {
-  collapsible: false,
-});
-</script>
-
-<template>
-  <AccordionImpl v-bind="props">
-    <slot />
-  </AccordionImpl>
-</template>
diff --git a/packages/radix-vue/src/Accordion/AccordionImplSingle.vue b/packages/radix-vue/src/Accordion/AccordionImplSingle.vue
deleted file mode 100644
index 856b59993..000000000
--- a/packages/radix-vue/src/Accordion/AccordionImplSingle.vue
+++ /dev/null
@@ -1,79 +0,0 @@
-<script lang="ts">
-import type {
-  AccordionCollapsibleProvideValue,
-  AccordionImplProps,
-} from "./AccordionImpl.vue";
-import {
-  ACCORDION_VALUE_INJECTION_KEY,
-  type AccordionValueProvideValue,
-} from "./AccordionImpl.vue";
-import { useVModel } from "@vueuse/core";
-
-export interface AccordionImplSingleProps extends AccordionImplProps {
-  /**
-   * The controlled stateful value of the accordion item whose content is expanded.
-   */
-  modelValue?: string;
-  /**
-   * The value of the item whose content is expanded when the accordion is initially rendered. Use
-   * `defaultValue` if you do not need to control the state of an accordion.
-   */
-  defaultValue?: string;
-  /**
-   * The callback that fires when the state of the accordion changes.
-   */
-  onValueChange?(value: string): void;
-  /**
-   * Whether an accordion item can be collapsed after it has been opened.
-   * @default false
-   */
-  collapsible?: boolean;
-}
-
-export interface AccordionSingleProps extends AccordionImplSingleProps {
-  type: "single";
-}
-</script>
-
-<script setup lang="ts">
-import { provide, type Ref } from "vue";
-import AccordionImpl, {
-  ACCORDION_COLLAPSIBLE_INJECTION_KEY,
-} from "./AccordionImpl.vue";
-
-const props = withDefaults(defineProps<AccordionSingleProps>(), {
-  onValueChange: () => {},
-  collapsible: false,
-});
-
-const emit = defineEmits<{
-  (e: "update:modelValue", value: string | undefined): void;
-}>();
-
-const modelValue = useVModel(props, "modelValue", emit, {
-  defaultValue: props.defaultValue ?? "",
-  passive: true,
-}) as Ref<string>;
-
-provide<AccordionValueProvideValue>(ACCORDION_VALUE_INJECTION_KEY, {
-  modelValue,
-  onItemOpen: (val) => {
-    modelValue.value = val;
-  },
-  onItemClose: (val) => {
-    if (props.collapsible) {
-      modelValue.value = "";
-    }
-  },
-});
-
-provide<AccordionCollapsibleProvideValue>(ACCORDION_COLLAPSIBLE_INJECTION_KEY, {
-  collapsible: props.collapsible,
-});
-</script>
-
-<template>
-  <AccordionImpl v-bind="props">
-    <slot />
-  </AccordionImpl>
-</template>
diff --git a/packages/radix-vue/src/Accordion/AccordionItem.vue b/packages/radix-vue/src/Accordion/AccordionItem.vue
index a76b77191..090dd80dd 100644
--- a/packages/radix-vue/src/Accordion/AccordionItem.vue
+++ b/packages/radix-vue/src/Accordion/AccordionItem.vue
@@ -1,11 +1,18 @@
 <script lang="ts" context="module">
-import type { InjectionKey } from "vue";
+import type { ComputedRef, InjectionKey, Ref } from "vue";
 import type { CollapsibleRootProps } from "../Collapsible";
+import { ACCORDION_INJECTION_KEY } from "./AccordionRoot.vue";
+
+enum AccordionItemState {
+  Open = "open",
+  Closed = "closed",
+}
 
 export interface AccordionItemProps
   extends Omit<CollapsibleRootProps, "open" | "defaultOpen" | "onOpenChange"> {
   /**
    * Whether or not an accordion item is disabled from user interaction.
+   * When true, prevents the user from interacting with the item.
    *
    * @defaultValue false
    */
@@ -17,165 +24,88 @@ export interface AccordionItemProps
 }
 
 export interface AccordionItemProvideValue {
-  open?: boolean;
-  disabled?: boolean;
+  open: ComputedRef<boolean>;
+  dataState: ComputedRef<AccordionItemState>;
+  disabled: ComputedRef<boolean>;
+  dataDisabled: ComputedRef<"" | undefined>;
   triggerId: string;
+  primitiveElement: Ref<HTMLElement | undefined>;
+  currentElement: ComputedRef<HTMLElement | undefined>;
+  value: ComputedRef<string>;
 }
 
 export const ACCORDION_ITEM_INJECTION_KEY =
   Symbol() as InjectionKey<AccordionItemProvideValue>;
-
-export const ACCORDION_KEYS = [
-  "Home",
-  "End",
-  "ArrowDown",
-  "ArrowUp",
-  "ArrowLeft",
-  "ArrowRight",
-];
 </script>
 
 <script setup lang="ts">
+import { CollapsibleRoot } from "@/Collapsible";
+import { usePrimitiveElement } from "@/Primitive";
+import { useArrowNavigation, useId } from "@/shared";
 import { computed, inject, provide } from "vue";
-import { CollapsibleRoot } from "../Collapsible";
-import {
-  ACCORDION_IMPL_INJECTION_KEY,
-  type AccordionImplProvideValue,
-  ACCORDION_VALUE_INJECTION_KEY,
-  type AccordionValueProvideValue,
-} from "./AccordionImpl.vue";
 
 const props = defineProps<AccordionItemProps>();
 
-const accordionImplInjectedValue = inject<AccordionImplProvideValue>(
-  ACCORDION_IMPL_INJECTION_KEY
-);
-const accordionValueInjectedValue = inject<AccordionValueProvideValue>(
-  ACCORDION_VALUE_INJECTION_KEY
-);
+const injectedRoot = inject(ACCORDION_INJECTION_KEY);
 
-const open = computed({
-  get: () =>
-    (props.value &&
-      accordionValueInjectedValue?.modelValue.value.includes(props.value)) ||
-    false,
-  set: (open) => {
-    if (open) {
-      accordionValueInjectedValue?.onItemOpen(props.value);
-    } else {
-      accordionValueInjectedValue?.onItemClose(props.value);
-    }
-  },
-});
-const disabled = computed(
-  () => accordionImplInjectedValue?.disabled || props.disabled
+const open = computed(() =>
+  injectedRoot?.isSingle.value
+    ? props.value === injectedRoot.modelValue.value
+    : Array.isArray(injectedRoot?.modelValue.value) &&
+      !!injectedRoot?.modelValue.value.includes(props.value)
 );
 
-provide<AccordionItemProvideValue>(ACCORDION_ITEM_INJECTION_KEY, {
-  open: open.value,
-  disabled: disabled.value,
-  triggerId: "1", // TODO
-});
-
-function getItems() {
-  const collectionNode = accordionImplInjectedValue?.parentElement.value;
-  if (!collectionNode) return [];
-  const orderedNodes = Array.from(
-    collectionNode.querySelectorAll("[data-radix-vue-collection-item]")
-  );
-
-  return orderedNodes as HTMLElement[];
-}
-
-const handleKeyDown = (event: KeyboardEvent) => {
-  if (!ACCORDION_KEYS.includes(event.key)) return;
-
-  const isDirectionLTR = accordionImplInjectedValue?.direction === "ltr";
-  const target = event.target as HTMLElement;
-  const triggerCollection = getItems().filter(
-    // (item) => !item.ref.current?.disabled
-    // (item) => !item.disabled
-    (item) => item
-  );
-  const triggerIndex = triggerCollection.findIndex(
-    // (item) => item.ref.current === target
-    (item) => item === target
+const disabled = computed(() => {
+  return (
+    injectedRoot?.disabled ||
+    props.disabled ||
+    (!!injectedRoot?.isSingle.value && open.value && !injectedRoot?.collapsible)
   );
-  const triggerCount = triggerCollection.length;
+});
 
-  if (triggerIndex === -1) return;
+const dataDisabled = computed(() => (disabled.value ? "" : undefined));
 
-  // Prevents page scroll while user is navigating
-  event.preventDefault();
+const dataState = computed(() =>
+  open.value ? AccordionItemState.Open : AccordionItemState.Closed
+);
 
-  let nextIndex = triggerIndex;
-  const homeIndex = 0;
-  const endIndex = triggerCount - 1;
+const { primitiveElement, currentElement } = usePrimitiveElement();
 
-  const moveNext = () => {
-    nextIndex = triggerIndex + 1;
-    if (nextIndex > endIndex) {
-      nextIndex = homeIndex;
-    }
-  };
+provide<AccordionItemProvideValue>(ACCORDION_ITEM_INJECTION_KEY, {
+  open,
+  dataState,
+  disabled,
+  dataDisabled,
+  triggerId: useId(),
+  primitiveElement,
+  currentElement,
+  value: computed(() => props.value),
+});
 
-  const movePrev = () => {
-    nextIndex = triggerIndex - 1;
-    if (nextIndex < homeIndex) {
-      nextIndex = endIndex;
+function handleArrowKey(e: KeyboardEvent) {
+  useArrowNavigation(
+    e,
+    currentElement.value!,
+    injectedRoot?.parentElement.value!,
+    {
+      arrowKeyOptions: injectedRoot?.orientation,
+      dir: injectedRoot?.direction,
+      focus: true,
     }
-  };
-
-  switch (event.key) {
-    case "Home":
-      nextIndex = homeIndex;
-      break;
-    case "End":
-      nextIndex = endIndex;
-      break;
-    case "ArrowRight":
-      if (accordionImplInjectedValue?.orientation === "horizontal") {
-        if (isDirectionLTR) {
-          moveNext();
-        } else {
-          movePrev();
-        }
-      }
-      break;
-    case "ArrowDown":
-      if (accordionImplInjectedValue?.orientation === "vertical") {
-        moveNext();
-      }
-      break;
-    case "ArrowLeft":
-      if (accordionImplInjectedValue?.orientation === "horizontal") {
-        if (isDirectionLTR) {
-          movePrev();
-        } else {
-          moveNext();
-        }
-      }
-      break;
-    case "ArrowUp":
-      if (accordionImplInjectedValue?.orientation === "vertical") {
-        movePrev();
-      }
-      break;
-  }
-
-  const clampedIndex = nextIndex % triggerCount;
-  triggerCollection[clampedIndex].focus();
-};
+  );
+}
 </script>
 
 <template>
   <CollapsibleRoot
-    :data-orientation="accordionImplInjectedValue?.orientation"
-    :data-state="open ? 'open' : 'closed'"
+    :data-orientation="injectedRoot?.orientation"
+    :data-disabled="dataDisabled"
+    :data-state="dataState"
     :disabled="disabled"
     v-model:open="open"
-    @keydown="handleKeyDown"
+    @keydown.up.down.left.right.home.end="handleArrowKey"
+    :as-child="props.asChild"
   >
-    <slot />
+    <slot :open="open" />
   </CollapsibleRoot>
 </template>
diff --git a/packages/radix-vue/src/Accordion/AccordionRoot.vue b/packages/radix-vue/src/Accordion/AccordionRoot.vue
index 00fc81c4b..1d4481b0a 100644
--- a/packages/radix-vue/src/Accordion/AccordionRoot.vue
+++ b/packages/radix-vue/src/Accordion/AccordionRoot.vue
@@ -1,34 +1,107 @@
 <script lang="ts">
-import type { AccordionMultipleProps } from "./AccordionImplMultiple.vue";
-import type { AccordionSingleProps } from "./AccordionImplSingle.vue";
+import type { DataOrientation, Direction, Type } from "@/shared/types";
+import type { ComputedRef, InjectionKey, Ref } from "vue";
 
-export type AccordionRootProps = AccordionSingleProps | AccordionMultipleProps;
+export type AccordionRootProps = {
+  asChild?: boolean;
+
+  /**
+   * Determines whether one or multiple items can be opened at the same time.
+   */
+  type: Type;
+
+  /**
+   * The controlled value of the item to expand when type is "single" or the controlled values of the items to expand when type is "multiple".
+   */
+  modelValue?: string | string[];
+
+  /**
+   * The default value of the item to expand when type is "single" or the default values of the items to expand when type is "multiple".
+   * Use when you do not need to control the state of the item(s).
+   */
+  defaultValue?: string | string[];
+
+  /**
+   * When type is "single", allows closing content when clicking trigger for an open item.
+   * When type is "multiple", this prop has no effect.
+   *
+   * @default false
+   */
+  collapsible?: boolean;
+
+  /**
+   * When true, prevents the user from interacting with the accordion and all its items
+   *
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * The reading direction of the accordion when applicable. If omitted, assumes LTR (left-to-right) reading mode.
+   *
+   * @default "ltr"
+   */
+  dir?: Direction;
+
+  /**
+   * The orientation of the accordion.
+   *
+   * @default "vertical"
+   */
+  orientation?: DataOrientation;
+};
+
+export const ACCORDION_INJECTION_KEY =
+  Symbol() as InjectionKey<AccordionProvideValue>;
+
+export type AccordionProvideValue = {
+  disabled?: AccordionRootProps["disabled"];
+  direction: AccordionRootProps["dir"];
+  orientation: AccordionRootProps["orientation"];
+  parentElement: Ref<HTMLElement | undefined>;
+  changeModelValue(value: string): void;
+  isSingle: ComputedRef<boolean>;
+  modelValue: Ref<string | undefined | string[]>;
+  collapsible: boolean;
+};
 </script>
 
 <script setup lang="ts">
-import AccordionImplMultiple from "./AccordionImplMultiple.vue";
-import AccordionImplSingle from "./AccordionImplSingle.vue";
+import { PrimitiveDiv, usePrimitiveElement } from "@/Primitive";
+import { useSingleOrMultipleValue } from "@/shared/useSingleOrMultipleValue";
+import { computed, provide } from "vue";
 
-const props = defineProps<AccordionRootProps>();
+const props = withDefaults(defineProps<AccordionRootProps>(), {
+  asChild: false,
+  dir: "ltr",
+  disabled: false,
+  orientation: "vertical",
+  collapsible: false,
+});
 
-const emit = defineEmits<{
+const emits = defineEmits<{
   (e: "update:modelValue", value: string | string[] | undefined): void;
 }>();
+
+const { modelValue, changeModelValue } = useSingleOrMultipleValue(props, emits);
+
+const { primitiveElement, currentElement: parentElement } =
+  usePrimitiveElement();
+
+provide<AccordionProvideValue>(ACCORDION_INJECTION_KEY, {
+  disabled: props.disabled,
+  direction: props.dir,
+  orientation: props.orientation,
+  parentElement,
+  isSingle: computed(() => props.type === "single"),
+  collapsible: props.collapsible,
+  modelValue,
+  changeModelValue,
+});
 </script>
 
 <template>
-  <AccordionImplMultiple
-    v-if="props.type === 'multiple'"
-    v-bind="props"
-    @update:modelValue="emit('update:modelValue', $event)"
-  >
-    <slot />
-  </AccordionImplMultiple>
-  <AccordionImplSingle
-    v-else
-    v-bind="props"
-    @update:modelValue="emit('update:modelValue', $event)"
-  >
+  <PrimitiveDiv ref="primitiveElement" :as-child="props.asChild">
     <slot />
-  </AccordionImplSingle>
+  </PrimitiveDiv>
 </template>
diff --git a/packages/radix-vue/src/Accordion/AccordionTrigger.vue b/packages/radix-vue/src/Accordion/AccordionTrigger.vue
index 62be946f1..884f64968 100644
--- a/packages/radix-vue/src/Accordion/AccordionTrigger.vue
+++ b/packages/radix-vue/src/Accordion/AccordionTrigger.vue
@@ -1,37 +1,37 @@
 <script setup lang="ts">
+import { CollapsibleTrigger } from "@/Collapsible";
+import { type PrimitiveProps } from "@/Primitive";
 import { inject } from "vue";
-import { CollapsibleTrigger } from "../Collapsible/";
-import {
-  ACCORDION_IMPL_INJECTION_KEY,
-  type AccordionImplProvideValue,
-  ACCORDION_COLLAPSIBLE_INJECTION_KEY,
-  type AccordionCollapsibleProvideValue,
-} from "./AccordionImpl.vue";
-import {
-  ACCORDION_ITEM_INJECTION_KEY,
-  type AccordionItemProvideValue,
-} from "./AccordionItem.vue";
+import { ACCORDION_ITEM_INJECTION_KEY } from "./AccordionItem.vue";
+import { ACCORDION_INJECTION_KEY } from "./AccordionRoot.vue";
 
-const accordionImplInjectedValue = inject<AccordionImplProvideValue>(
-  ACCORDION_IMPL_INJECTION_KEY
-);
-const accordionItemInjectedValue = inject<AccordionItemProvideValue>(
-  ACCORDION_ITEM_INJECTION_KEY
-);
-const accordionCollapsibleInjectedValue =
-  inject<AccordionCollapsibleProvideValue>(ACCORDION_COLLAPSIBLE_INJECTION_KEY);
+interface AccordionTriggerProps extends PrimitiveProps {}
+
+const props = defineProps<AccordionTriggerProps>();
+
+const injectedRoot = inject(ACCORDION_INJECTION_KEY);
+const injectedItem = inject(ACCORDION_ITEM_INJECTION_KEY);
+
+function changeItem() {
+  if (injectedItem?.disabled.value) return;
+  injectedItem && injectedRoot?.changeModelValue(injectedItem.value.value);
+}
 </script>
 
 <template>
   <CollapsibleTrigger
+    :ref="injectedItem?.primitiveElement"
     data-radix-vue-collection-item
-    :aria-disabled="
-      (accordionItemInjectedValue?.open &&
-        !accordionCollapsibleInjectedValue?.collapsible) ||
-      undefined
-    "
-    :data-orientation="accordionImplInjectedValue?.orientation"
-    :id="accordionItemInjectedValue?.triggerId"
+    :as-child="props.asChild"
+    :aria-controls="injectedItem?.triggerId"
+    :aria-disabled="injectedItem?.disabled.value || undefined"
+    :aria-expanded="injectedItem?.open.value || false"
+    :data-disabled="injectedItem?.dataDisabled.value"
+    :data-orientation="injectedRoot?.orientation"
+    :data-state="injectedItem?.dataState.value"
+    :disabled="injectedItem?.disabled?.value"
+    @click="changeItem"
+    :id="injectedItem?.triggerId"
   >
     <slot />
   </CollapsibleTrigger>
diff --git a/packages/radix-vue/src/Accordion/index.ts b/packages/radix-vue/src/Accordion/index.ts
index 98b40bd0b..263f83712 100644
--- a/packages/radix-vue/src/Accordion/index.ts
+++ b/packages/radix-vue/src/Accordion/index.ts
@@ -1,31 +1,10 @@
 export { default as AccordionContent } from "./AccordionContent.vue";
 export { default as AccordionHeader } from "./AccordionHeader.vue";
-export {
-  default as AccordionImpl,
-  type AccordionImplProps,
-  type AccordionImplProvideValue,
-  ACCORDION_IMPL_INJECTION_KEY,
-  type AccordionValueProvideValue,
-  type AccordionCollapsibleProvideValue,
-  ACCORDION_VALUE_INJECTION_KEY,
-  ACCORDION_COLLAPSIBLE_INJECTION_KEY,
-} from "./AccordionImpl.vue";
-export {
-  default as AccordionImplMultiple,
-  type AccordionImplMultipleProps,
-  type AccordionMultipleProps,
-} from "./AccordionImplMultiple.vue";
-export {
-  default as AccordionImplSingle,
-  type AccordionImplSingleProps,
-  type AccordionSingleProps,
-} from "./AccordionImplSingle.vue";
 export {
   default as AccordionItem,
   type AccordionItemProps,
   type AccordionItemProvideValue,
   ACCORDION_ITEM_INJECTION_KEY,
-  ACCORDION_KEYS,
 } from "./AccordionItem.vue";
 export {
   default as AccordionRoot,
diff --git a/packages/radix-vue/src/Tabs/TabsTrigger.vue b/packages/radix-vue/src/Tabs/TabsTrigger.vue
index 1b0b64f6f..998a15c02 100644
--- a/packages/radix-vue/src/Tabs/TabsTrigger.vue
+++ b/packages/radix-vue/src/Tabs/TabsTrigger.vue
@@ -35,16 +35,16 @@ function handleKeydown(e: KeyboardEvent) {
     {
       arrowKeyOptions: injectedValue?.orientation,
       loop: injectedValue?.loop,
+      focus: true,
     }
   );
 
-  if (newSelectedElement) {
-    newSelectedElement.focus();
-    injectedValue!.currentFocusedElement!.value = newSelectedElement;
+  if (!newSelectedElement) return;
 
-    if (injectedValue?.activationMode === "automatic") {
-      changeTab(newSelectedElement?.getAttribute("data-radix-vue-tab-value")!);
-    }
+  injectedValue!.currentFocusedElement!.value = newSelectedElement;
+
+  if (injectedValue?.activationMode === "automatic") {
+    changeTab(newSelectedElement?.getAttribute("data-radix-vue-tab-value")!);
   }
 }
 
@@ -77,7 +77,7 @@ const getTabIndex = computed(() => {
     data-radix-vue-collection-item
     :data-radix-vue-tab-value="props.value"
     @click="changeTab(props.value!)"
-    @keydown="handleKeydown"
+    @keydown.up.down.left.right.home.end="handleKeydown"
   >
     <slot />
   </PrimitiveButton>
diff --git a/packages/radix-vue/src/shared/types.ts b/packages/radix-vue/src/shared/types.ts
index f6ffd6e04..b19df92b1 100644
--- a/packages/radix-vue/src/shared/types.ts
+++ b/packages/radix-vue/src/shared/types.ts
@@ -1,4 +1,5 @@
 type DataOrientation = "vertical" | "horizontal";
 type Direction = "ltr" | "rtl";
+type Type = "single" | "multiple";
 
-export type { DataOrientation, Direction };
+export type { DataOrientation, Direction, Type };
diff --git a/packages/radix-vue/src/shared/useArrowNavigation.test.ts b/packages/radix-vue/src/shared/useArrowNavigation.test.ts
index 33135caa8..83b349055 100644
--- a/packages/radix-vue/src/shared/useArrowNavigation.test.ts
+++ b/packages/radix-vue/src/shared/useArrowNavigation.test.ts
@@ -2,46 +2,47 @@ import { beforeEach, describe, expect, test } from "vitest";
 import { useArrowNavigation } from "./useArrowNavigation";
 
 describe("useArrowNavigation", () => {
-  let currentElement: HTMLElement;
   let parentElement: HTMLElement;
-  let childElement1: HTMLElement;
-  let childElement2: HTMLElement;
+  let child1: HTMLElement;
+  let child2: HTMLElement;
+  let child3: HTMLElement;
 
   beforeEach(() => {
     parentElement = document.createElement("div");
-    currentElement = document.createElement("div");
-    childElement1 = document.createElement("div");
-    childElement2 = document.createElement("div");
+    child1 = document.createElement("div");
+    child2 = document.createElement("div");
+    child3 = document.createElement("div");
 
-    currentElement.setAttribute("data-radix-vue-collection-item", "");
-    childElement1.setAttribute("data-radix-vue-collection-item", "");
-    childElement2.setAttribute("data-radix-vue-collection-item", "");
+    child1.setAttribute("data-radix-vue-collection-item", "");
+    child2.setAttribute("data-radix-vue-collection-item", "");
+    child3.setAttribute("data-radix-vue-collection-item", "");
 
-    parentElement.appendChild(currentElement);
-    parentElement.appendChild(childElement1);
-    parentElement.appendChild(childElement2);
+    parentElement.appendChild(child1);
+    parentElement.appendChild(child2);
+    parentElement.appendChild(child3);
   });
 
   test("should navigate horizontally", () => {
     const e = new KeyboardEvent("keydown", { key: "ArrowRight" });
-    const nextElement = useArrowNavigation(e, currentElement, parentElement, {
+    const nextElement = useArrowNavigation(e, child1, parentElement, {
       arrowKeyOptions: "horizontal",
     });
-    expect(nextElement).toBe(childElement1);
+    console.log(nextElement);
+    expect(nextElement).toStrictEqual(child2);
   });
 
   test("should navigate vertically", () => {
     const e = new KeyboardEvent("keydown", { key: "ArrowDown" });
-    const nextElement = useArrowNavigation(e, currentElement, parentElement, {
+    const nextElement = useArrowNavigation(e, child1, parentElement, {
       arrowKeyOptions: "vertical",
     });
-    expect(nextElement).toBe(childElement1);
+    expect(nextElement).toStrictEqual(child2);
   });
 
   test("should not navigate with arrow keys when arrowKeyOptions is not set to both", () => {
     const nextElementHorizontal = useArrowNavigation(
       new KeyboardEvent("keydown", { key: "ArrowDown" }),
-      currentElement,
+      child1,
       parentElement,
       {
         arrowKeyOptions: "horizontal",
@@ -50,7 +51,7 @@ describe("useArrowNavigation", () => {
     expect(nextElementHorizontal).toBeNull();
     const nextElementVertical = useArrowNavigation(
       new KeyboardEvent("keydown", { key: "ArrowLeft" }),
-      currentElement,
+      child1,
       parentElement,
       {
         arrowKeyOptions: "vertical",
@@ -63,7 +64,7 @@ describe("useArrowNavigation", () => {
     const e = new KeyboardEvent("keydown", { key: "ArrowRight" });
     const nextElement = useArrowNavigation(
       e,
-      currentElement,
+      child1,
       document.createElement("div")
     );
     expect(nextElement).toBeNull();
@@ -71,33 +72,45 @@ describe("useArrowNavigation", () => {
 
   test("should loop through items if loop is set to true", () => {
     const e = new KeyboardEvent("keydown", { key: "ArrowLeft" });
-    const nextElement = useArrowNavigation(e, childElement2, parentElement, {
+    const nextElement = useArrowNavigation(e, child3, parentElement, {
       loop: true,
     });
-    expect(nextElement).toStrictEqual(currentElement);
+    expect(nextElement).toStrictEqual(child1);
   });
 
   test("should not loop through items if loop is set to false", () => {
     const e = new KeyboardEvent("keydown", { key: "ArrowLeft" });
-    const nextElement = useArrowNavigation(e, currentElement, parentElement, {
+    const nextElement = useArrowNavigation(e, child1, parentElement, {
       loop: false,
     });
     expect(nextElement).toBeNull();
   });
 
   test("should skip disabled items", () => {
-    childElement1.setAttribute("disabled", "true");
-    childElement2.setAttribute("disabled", "true");
+    child2.setAttribute("disabled", "true");
+    child3.setAttribute("disabled", "true");
     const e = new KeyboardEvent("keydown", { key: "ArrowRight" });
-    const nextElement = useArrowNavigation(e, currentElement, parentElement);
+    const nextElement = useArrowNavigation(e, child1, parentElement);
     expect(nextElement).toBeNull();
   });
 
   test("should navigate correctly in rtl", () => {
     const e = new KeyboardEvent("keydown", { key: "ArrowRight" });
-    const nextElement = useArrowNavigation(e, currentElement, parentElement, {
+    const nextElement = useArrowNavigation(e, child1, parentElement, {
       dir: "rtl",
     });
-    expect(nextElement).toBe(childElement2);
+    expect(nextElement).toStrictEqual(child3);
+  });
+
+  test("should navigate to the first item", () => {
+    const e = new KeyboardEvent("keydown", { key: "Home" });
+    const nextElement = useArrowNavigation(e, child1, parentElement);
+    expect(nextElement).toStrictEqual(child3);
+  });
+
+  test("should navigate to the last item", () => {
+    const e = new KeyboardEvent("keydown", { key: "End" });
+    const nextElement = useArrowNavigation(e, child2, parentElement);
+    expect(nextElement).toStrictEqual(child1);
   });
 });
diff --git a/packages/radix-vue/src/shared/useArrowNavigation.ts b/packages/radix-vue/src/shared/useArrowNavigation.ts
index a1592c62c..b3aac6065 100644
--- a/packages/radix-vue/src/shared/useArrowNavigation.ts
+++ b/packages/radix-vue/src/shared/useArrowNavigation.ts
@@ -46,6 +46,13 @@ interface ArrowNavigationOptions {
    * @default true
    */
   preventScroll?: boolean;
+
+  /**
+   * Focus the element after navigation
+   *
+   * @default false
+   */
+  focus?: boolean;
 }
 
 /**
@@ -63,6 +70,8 @@ export function useArrowNavigation(
   parentElement: HTMLElement | undefined,
   options: ArrowNavigationOptions = {}
 ): HTMLElement | null {
+  if (!currentElement) return null;
+
   const {
     arrowKeyOptions = "both",
     attributeName = "data-radix-vue-collection-item",
@@ -70,20 +79,25 @@ export function useArrowNavigation(
     loop = true,
     dir = "ltr",
     preventScroll = true,
+    focus = false,
   } = options;
 
-  const [right, left, up, down] = [
+  const [right, left, up, down, home, end] = [
     e.key === "ArrowRight",
     e.key === "ArrowLeft",
     e.key === "ArrowUp",
     e.key === "ArrowDown",
+    e.key === "Home",
+    e.key === "End",
   ];
   const goingVertical = up || down;
   const goingHorizontal = right || left;
   if (
-    (!goingVertical && !goingHorizontal) ||
-    (arrowKeyOptions === "vertical" && goingHorizontal) ||
-    (arrowKeyOptions === "horizontal" && goingVertical)
+    !home &&
+    !end &&
+    ((!goingVertical && !goingHorizontal) ||
+      (arrowKeyOptions === "vertical" && goingHorizontal) ||
+      (arrowKeyOptions === "horizontal" && goingVertical))
   ) {
     return null;
   }
@@ -98,12 +112,23 @@ export function useArrowNavigation(
     e.preventDefault();
   }
 
-  const goForward = goingVertical ? down : dir === "ltr" ? right : left;
+  let item: HTMLElement | null = null;
+
+  if (goingHorizontal || goingVertical) {
+    const goForward = goingVertical ? down : dir === "ltr" ? right : left;
+    item = findNextFocusableElement(allCollectionItems, currentElement, {
+      goForward,
+      loop,
+    });
+  } else if (home) {
+    item = allCollectionItems.at(0) || null;
+  } else if (end) {
+    item = allCollectionItems.at(-1) || null;
+  }
+
+  if (focus) item?.focus();
 
-  return findNextFocusableElement(allCollectionItems, currentElement, {
-    goForward,
-    loop,
-  });
+  return item;
 }
 
 /**
diff --git a/packages/radix-vue/src/shared/useSingleOrMultipleValue.ts b/packages/radix-vue/src/shared/useSingleOrMultipleValue.ts
new file mode 100644
index 000000000..6500fba24
--- /dev/null
+++ b/packages/radix-vue/src/shared/useSingleOrMultipleValue.ts
@@ -0,0 +1,115 @@
+import { useVModel } from "@vueuse/core";
+import type { Type } from "./types";
+import { watch, type Ref } from "vue";
+
+function validateModelValue(
+  type: Type,
+  modelValue?: string | string[] | undefined
+) {
+  if (type === "single") {
+    if (Array.isArray(modelValue)) {
+      console.error(`Invalid prop \`value\` of value \`${modelValue}\` supplied to \`AccordionRoot\`, which type is \`single\`. The \`value\` prop must be:
+  - a string
+  - \`undefined\`
+
+If you want to use multiple values, use the \`AccordionRoot\` with type \`multiple\`.
+
+Defaulting to \`undefined\`.`);
+      return undefined;
+    }
+  } else if (type === "multiple") {
+    if (typeof modelValue === "string" || typeof modelValue === "undefined") {
+      console.error(`Invalid prop \`value\` of value \`${modelValue}\` supplied to \`AccordionRoot\`, which type is \`multiple\`. The \`value\` prop must be:
+- an array of strings
+- empty array (\`[]\`)
+
+If you want to use just one value, use the \`AccordionRoot\` with type \`single\`.
+
+Defaulting to empty array (\`[]\`).`);
+      return [];
+    }
+  }
+  return modelValue;
+}
+
+function getDefaultValue({ type, defaultValue }: Props) {
+  if (type === "multiple") {
+    if (Array.isArray(defaultValue)) {
+      return defaultValue;
+    } else if (defaultValue === undefined) {
+      return [];
+    } else {
+      console.error(
+        `Invalid prop \`defaultValue\` of value \`${defaultValue}\` supplied to \`AccordionRoot\`, which type is \`multiple\`. The \`defaultValue\` prop must be:
+  - an array of strings
+  - empty array (\`[]\`)
+
+If you want to use just one value, use the \`AccordionRoot\` with type \`single\`.
+
+Defaulting to empty array (\`[]\`).`
+      );
+      return [];
+    }
+  } else if (type === "single") {
+    if (typeof defaultValue === "string") {
+      return defaultValue;
+    } else if (defaultValue === undefined) {
+      return undefined;
+    } else {
+      console.error(
+        `Invalid prop \`defaultValue\` of value \`${defaultValue}\` supplied to \`AccordionRoot\`, which type is \`single\`. The \`defaultValue\` prop must be:
+  - a string
+  - \`undefined\`
+
+Defaulting to \`undefined\`.`
+      );
+      return undefined;
+    }
+  }
+}
+
+type Props = {
+  modelValue?: string | string[];
+  type: Type;
+  defaultValue?: string | string[];
+};
+export function useSingleOrMultipleValue<P extends Props, Name extends string>(
+  props: P,
+  emits: (name: Name, ...args: any[]) => void
+) {
+  const modelValue = useVModel(props, "modelValue", emits, {
+    defaultValue: getDefaultValue(props),
+    passive: true,
+  }) as Ref<string | string[] | undefined>;
+
+  watch(
+    [props.type, props.modelValue],
+    () => {
+      const validatedValue = validateModelValue(props.type, modelValue.value);
+      if (modelValue.value !== validatedValue) {
+        modelValue.value = validatedValue;
+      }
+    },
+    { immediate: true }
+  );
+
+  function changeModelValue(value: string) {
+    if (props.type === "single") {
+      modelValue.value = value;
+    } else {
+      const modelValueArray = (modelValue.value as string[]) || [];
+      if (modelValueArray.includes(value)) {
+        const index = modelValueArray.findIndex((i) => i === value);
+        modelValueArray.splice(index, 1);
+      } else {
+        modelValueArray.push(value);
+      }
+      modelValue.value = modelValueArray;
+    }
+  }
+
+  return {
+    modelValue,
+    changeModelValue,
+  };
+}
diff --git a/playground/vue3/src/components/Demo/AccordionDemo.vue b/playground/vue3/src/components/Demo/AccordionDemo.vue
index 84c0738b3..2848ab187 100644
--- a/playground/vue3/src/components/Demo/AccordionDemo.vue
+++ b/playground/vue3/src/components/Demo/AccordionDemo.vue
@@ -1,55 +1,68 @@
 <script setup lang="ts">
-import { AccordionContent, AccordionHeader, AccordionItem, AccordionRoot, AccordionTrigger } from "@/Accordion";
-import { ref } from "vue";
+import { ref } from 'vue'
+import { AccordionContent, AccordionHeader, AccordionItem, AccordionRoot, AccordionTrigger } from '../../../../../packages/radix-vue/src/Accordion'
 
-const tabValue = ref("item-1");
-const rootDisabled = false;
+const itemValue = ref(['item-1'])
+const rootDisabled = false
 </script>
 
 <template>
-  <div class="absolute left-4 top-3 text-sm">
-    <p>Tab value: {{ tabValue }}</p>
+  <div class="absolute text-sm left-4 top-3">
+    <p>Item value: {{ itemValue }}</p>
   </div>
   <AccordionRoot
+    v-model="itemValue"
     class="w-[300px] rounded-md bg-[--line-color] shadow-lg"
-    default-value="item-2"
-    type="single"
+    :default-value="[]"
+    type="multiple"
     :disabled="rootDisabled"
     :collapsible="true"
   >
-    <AccordionItem class="accordion-item" value="item-1">
+    <AccordionItem class="accordion-item" value="item-1" disabled>
       <AccordionHeader class="flex">
         <AccordionTrigger class="accordion-trigger" as-child>
-          <button class="custom-trigger">Is it accessible?</button>
+          <button class="custom-trigger">
+            Is it accessible?
+          </button>
         </AccordionTrigger>
       </AccordionHeader>
       <AccordionContent
         class="accordion-content data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp"
       >
-        <div class="px-5 py-4">Yes. It adheres to the WAI-ARIA design pattern.</div>
+        <div class="px-5 py-4">
+          Yes. It adheres to the WAI-ARIA design pattern.
+        </div>
       </AccordionContent>
     </AccordionItem>
 
     <AccordionItem class="accordion-item" value="item-2">
       <AccordionHeader class="flex">
-        <AccordionTrigger class="accordion-trigger"> Is it unstyled? </AccordionTrigger>
+        <AccordionTrigger class="accordion-trigger">
+          Is it unstyled?
+        </AccordionTrigger>
       </AccordionHeader>
       <AccordionContent
         class="accordion-content data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp"
       >
-        <div class="px-5 py-4">Yes. It's unstyled by default, giving you freedom over the look and feel.</div>
+        <div class="px-5 py-4">
+          Yes. It's unstyled by default, giving you freedom over the look and feel.
+        </div>
       </AccordionContent>
     </AccordionItem>
 
     <AccordionItem class="accordion-item" value="item-3">
       <AccordionHeader class="flex">
-        <AccordionTrigger class="accordion-trigger"> Can it be animated? </AccordionTrigger>
+        <AccordionTrigger class="accordion-trigger">
+          Can it be animated?
+        </AccordionTrigger>
       </AccordionHeader>
       <AccordionContent
         class="accordion-content data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp"
       >
         <div>
-          <div class="px-5 py-4">Yes! You can use the transition prop to configure the animation.</div>
+          <div class="px-5 py-4">
+            Yes! You can use the transition prop to configure the animation.
+          </div>
         </div>
       </AccordionContent>
     </AccordionItem>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a99fa1db0..bacd35d92 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,9 +1,5 @@
 lockfileVersion: '6.0'
 
-settings:
-  autoInstallPeers: true
-  excludeLinksFromLockfile: false
-
 importers:
 
   .: {}
@@ -150,52 +146,6 @@ importers:
         specifier: ^1.8.1
         version: 1.8.1(typescript@5.1.3)
 
-  playground/vue3:
-    dependencies:
-      radix-vue:
-        specifier: link:../../packages/radix-vue
-        version: link:../../packages/radix-vue
-      vue:
-        specifier: ^3.2.47
-        version: 3.3.4
-    devDependencies:
-      '@antfu/eslint-config':
-        specifier: ^0.39.7
-        version: 0.39.7(eslint@8.43.0)(typescript@5.1.3)
-      '@iconify/vue':
-        specifier: ^4.1.1
-        version: 4.1.1(vue@3.3.4)
-      '@radix-ui/colors':
-        specifier: ^1.0.0
-        version: 1.0.0
-      '@rollup/plugin-alias':
-        specifier: ^5.0.0
-        version: 5.0.0
-      '@vitejs/plugin-vue':
-        specifier: ^4.1.0
-        version: 4.2.3(vite@4.3.9)(vue@3.3.4)
-      autoprefixer:
-        specifier: ^10.4.14
-        version: 10.4.14(postcss@8.4.26)
-      eslint:
-        specifier: ^8.43.0
-        version: 8.43.0
-      postcss:
-        specifier: ^8.4.24
-        version: 8.4.26
-      tailwindcss:
-        specifier: ^3.3.2
-        version: 3.3.3
-      typescript:
-        specifier: ^5.0.2
-        version: 5.1.3
-      vite:
-        specifier: ^4.3.9
-        version: 4.3.9
-      vue-tsc:
-        specifier: ^1.4.2
-        version: 1.8.1(typescript@5.1.3)
-
 packages:
 
   /@aashutoshrathi/word-wrap@1.2.6:
@@ -1536,7 +1486,7 @@ packages:
       vite: ^4.0.0
       vue: ^3.2.25
     dependencies:
-      vite: 4.3.9
+      vite: 4.3.9(@types/node@18.16.18)
       vue: 3.3.4
     dev: true
 
@@ -5933,38 +5883,6 @@ packages:
       - supports-color
     dev: true
 
-  /vite@4.3.9:
-    resolution: {integrity: sha512-qsTNZjO9NoJNW7KnOrgYwczm0WctJ8m/yqYAMAK9Lxt4SoySUfS5S8ia9K7JHpa3KEeMfyF8LoJ3c5NeBJy6pg==}
-    engines: {node: ^14.18.0 || >=16.0.0}
-    hasBin: true
-    peerDependencies:
-      '@types/node': '>= 14'
-      less: '*'
-      sass: '*'
-      stylus: '*'
-      sugarss: '*'
-      terser: ^5.4.0
-    peerDependenciesMeta:
-      '@types/node':
-        optional: true
-      less:
-        optional: true
-      sass:
-        optional: true
-      stylus:
-        optional: true
-      sugarss:
-        optional: true
-      terser:
-        optional: true
-    dependencies:
-      esbuild: 0.17.19
-      postcss: 8.4.26
-      rollup: 3.26.2
-    optionalDependencies:
-      fsevents: 2.3.2
-    dev: true
-
   /vite@4.3.9(@types/node@18.16.18):
     resolution: {integrity: sha512-qsTNZjO9NoJNW7KnOrgYwczm0WctJ8m/yqYAMAK9Lxt4SoySUfS5S8ia9K7JHpa3KEeMfyF8LoJ3c5NeBJy6pg==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -6317,3 +6235,7 @@ packages:
     optionalDependencies:
       commander: 9.5.0
     dev: true
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false