diff --git a/eslint.config.js b/eslint.config.js
index dbc634f16..a164fc477 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -33,8 +33,17 @@ export default antfu(
     ],
     rules: {
       'import/first': 'off',
+      'sort-imports': 'off',
+      'import/no-duplicates': 'off',
       'import/order': 'off',
+      'vue/block-order': ['error', {
+        order: ['script', 'template', 'style'],
+      }],
       'vue/block-tag-newline': 'off',
+      'vue/component-api-style': ['error', ['script-setup']],
+      'vue/component-tags-order': ['error', {
+        order: ['script', 'template', 'style'],
+      }],
     },
   },
 )
diff --git a/packages/core/src/accordion/AccordionContent.ts b/packages/core/src/accordion/AccordionContent.ts
deleted file mode 100644
index cc842f4b1..000000000
--- a/packages/core/src/accordion/AccordionContent.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import type { Ref } from 'vue'
-import type { RadixPrimitiveGetAttrs, RadixPrimitiveReturns } from '../shared/index.ts'
-import { type CollapsibleContentProps, DEFAULT_COLLAPSIBLE_CONTENT_PROPS, useCollapsibleContent, type UseCollapsibleContentProps } from '../collapsible/index.ts'
-import { mergePrimitiveAttrs } from '../shared/index.ts'
-import { useAccordionItemContext } from './AccordionItem.ts'
-import { useAccordionContext } from './AccordionRoot.ts'
-
-export type AccordionContentProps = CollapsibleContentProps
-
-export const DEFAULT_ACCORDION_CONTENT_PROPS = DEFAULT_COLLAPSIBLE_CONTENT_PROPS
-
-export interface UseAccordionContentProps extends UseCollapsibleContentProps {}
-
-export function useAccordionContent(props: UseAccordionContentProps): RadixPrimitiveReturns<{
-  isOpen: Ref<boolean>
-  attrs: RadixPrimitiveGetAttrs
-}> {
-  const collapsibleContent = useCollapsibleContent(props)
-
-  const accordionContext = useAccordionContext('AccordionContent')
-  const itemContext = useAccordionItemContext('AccordionContent')
-
-  const style = {
-    '--radix-accordion-content-height': 'var(--radix-collapsible-content-height)',
-    '--radix-accordion-content-width': 'var(--radix-collapsible-content-width)',
-  }
-
-  return {
-    isOpen: collapsibleContent.isOpen,
-    attrs(extraAttrs = []) {
-      const attrs = {
-        'role': 'region',
-        'aria-labelledby': itemContext.triggerId,
-        'data-orientation': accordionContext.orientation,
-        'style': style,
-      }
-
-      mergePrimitiveAttrs(attrs, [collapsibleContent.attrs(), ...extraAttrs])
-
-      return attrs
-    },
-  }
-}
diff --git a/packages/core/src/accordion/AccordionContent.vue b/packages/core/src/accordion/AccordionContent.vue
index 127bd9324..a0cd7ff2c 100644
--- a/packages/core/src/accordion/AccordionContent.vue
+++ b/packages/core/src/accordion/AccordionContent.vue
@@ -1,7 +1,61 @@
+<script lang="ts">
+import type { Ref } from 'vue'
+import type { RadixPrimitiveGetAttrs, RadixPrimitiveReturns } from '../shared/index.ts'
+import {
+  type CollapsibleContentProps,
+  DEFAULT_COLLAPSIBLE_CONTENT_PROPS,
+  useCollapsibleContent,
+  type UseCollapsibleContentProps,
+} from '../collapsible/index.ts'
+import {
+  convertPropsToHookProps,
+  mergePrimitiveAttrs,
+  normalizeAttrs,
+} from '../shared/index.ts'
+import { useAccordionItemContext } from './AccordionItem.vue'
+import { useAccordionContext } from './AccordionRoot.vue'
+
+export type AccordionContentProps = CollapsibleContentProps
+
+export const DEFAULT_ACCORDION_CONTENT_PROPS = DEFAULT_COLLAPSIBLE_CONTENT_PROPS
+
+export interface UseAccordionContentProps extends UseCollapsibleContentProps {}
+
+export function useAccordionContent(props: UseAccordionContentProps): RadixPrimitiveReturns<{
+  isOpen: Ref<boolean>
+  attrs: RadixPrimitiveGetAttrs
+}> {
+  const collapsibleContent = useCollapsibleContent(props)
+
+  const accordionContext = useAccordionContext('AccordionContent')
+  const itemContext = useAccordionItemContext('AccordionContent')
+
+  const style = {
+    '--radix-accordion-content-height': 'var(--radix-collapsible-content-height)',
+    '--radix-accordion-content-width': 'var(--radix-collapsible-content-width)',
+  }
+
+  return {
+    isOpen: collapsibleContent.isOpen,
+    attrs(extraAttrs = []) {
+      const attrs = {
+        'role': 'region',
+        'aria-labelledby': itemContext.triggerId,
+        'data-orientation': accordionContext.orientation,
+        'style': style,
+      }
+
+      mergePrimitiveAttrs(attrs, [collapsibleContent.attrs(), ...extraAttrs])
+
+      return attrs
+    },
+  }
+}
+
+</script>
+
 <script setup lang="ts">
 import { Primitive } from '../primitive/index.ts'
-import { convertPropsToHookProps, normalizeAttrs } from '../shared/index.ts'
-import { type AccordionContentProps, DEFAULT_ACCORDION_CONTENT_PROPS, useAccordionContent } from './AccordionContent.ts'
 
 defineOptions({
   name: 'AccordionContent',
diff --git a/packages/core/src/accordion/AccordionHeader.ts b/packages/core/src/accordion/AccordionHeader.ts
deleted file mode 100644
index a9629caa7..000000000
--- a/packages/core/src/accordion/AccordionHeader.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import type { PrimitiveProps } from '../primitive/index.ts'
-import type { RadixPrimitiveReturns } from '../shared/index.ts'
-import { mergePrimitiveAttrs } from '../shared/index.ts'
-import { useAccordionItemContext } from './AccordionItem.ts'
-import { useAccordionContext } from './AccordionRoot.ts'
-
-export interface AccordionHeaderProps {
-  as?: PrimitiveProps['as']
-}
-
-export function useAccordionHeader(): RadixPrimitiveReturns {
-  const accordionContext = useAccordionContext('AccordionHeader')
-  const itemContext = useAccordionItemContext('AccordionHeader')
-
-  return {
-    attrs(extraAttrs) {
-      const attrs = {
-        'data-orientation': accordionContext.orientation,
-        'data-state': itemContext.open.value ? 'open' : 'closed',
-        'data-disabled': itemContext.disabled.value ? '' : undefined,
-      }
-
-      if (extraAttrs && extraAttrs.length > 0) {
-        mergePrimitiveAttrs(attrs, extraAttrs)
-      }
-
-      return attrs
-    },
-  }
-}
diff --git a/packages/core/src/accordion/AccordionHeader.vue b/packages/core/src/accordion/AccordionHeader.vue
index d1d22d403..ae40fdfde 100644
--- a/packages/core/src/accordion/AccordionHeader.vue
+++ b/packages/core/src/accordion/AccordionHeader.vue
@@ -1,7 +1,39 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive/index.ts'
+import type { RadixPrimitiveReturns } from '../shared/index.ts'
+import { mergePrimitiveAttrs, normalizeAttrs } from '../shared/index.ts'
+import { useAccordionItemContext } from './AccordionItem.vue'
+import { useAccordionContext } from './AccordionRoot.vue'
+
+export interface AccordionHeaderProps {
+  as?: PrimitiveProps['as']
+}
+
+export function useAccordionHeader(): RadixPrimitiveReturns {
+  const accordionContext = useAccordionContext('AccordionHeader')
+  const itemContext = useAccordionItemContext('AccordionHeader')
+
+  return {
+    attrs(extraAttrs) {
+      const attrs = {
+        'data-orientation': accordionContext.orientation,
+        'data-state': itemContext.open.value ? 'open' : 'closed',
+        'data-disabled': itemContext.disabled.value ? '' : undefined,
+      }
+
+      if (extraAttrs && extraAttrs.length > 0) {
+        mergePrimitiveAttrs(attrs, extraAttrs)
+      }
+
+      return attrs
+    },
+  }
+}
+
+</script>
+
 <script setup lang="ts">
 import { Primitive } from '../primitive/index.ts'
-import { normalizeAttrs } from '../shared/index.ts'
-import { type AccordionHeaderProps, useAccordionHeader } from './AccordionHeader.ts'
 
 defineOptions({
   name: 'AccordionHeader',
diff --git a/packages/core/src/accordion/AccordionItem.ts b/packages/core/src/accordion/AccordionItem.ts
deleted file mode 100644
index 4cf227c7e..000000000
--- a/packages/core/src/accordion/AccordionItem.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-import type { PrimitiveDefaultProps, RadixPrimitiveReturns } from '../shared/index.ts'
-import { computed, type Ref } from 'vue'
-import { useCollapsibleRoot } from '../collapsible/index.ts'
-import { createContext, useId } from '../hooks/index.ts'
-import { useAccordionContext } from './AccordionRoot.ts'
-
-export interface AccordionItemProps {
-  /**
-   * Whether or not an accordion item is disabled from user interaction.
-   *
-   * @defaultValue false
-   */
-  disabled?: boolean
-  /**
-   * A string value for the accordion item. All items within an accordion should use a unique value.
-   */
-  value: string
-}
-
-export const DEFAULT_ACCORDION_ITEM_PROPS = {
-  disabled: undefined,
-} satisfies PrimitiveDefaultProps<AccordionItemProps>
-
-export interface AccordionItemContext {
-  open: Ref<boolean>
-  disabled: Ref<boolean | undefined>
-  triggerId: string
-}
-
-export const [provideAccordionItemContext, useAccordionItemContext] = createContext<AccordionItemContext>('AccordionItem')
-
-export interface UseAccordionItemProps {
-  value: () => string
-  disabled?: () => boolean | undefined
-}
-
-export function useAccordionItem(props: UseAccordionItemProps): RadixPrimitiveReturns {
-  const context = useAccordionContext('AccordionItem')
-  const open = computed(() => {
-    const value = props.value()
-    return (value && context.value.value.includes(value)) || false
-  })
-  const disabled = computed(() => context.disabled?.() || props.disabled?.())
-
-  function onUpdateOpen(open: boolean) {
-    if (open)
-      context.onItemOpen(props.value())
-    else
-      context.onItemClose(props.value())
-  }
-
-  provideAccordionItemContext({
-    open,
-    disabled,
-    triggerId: useId(),
-  })
-
-  const collapsibleRoot = useCollapsibleRoot({
-    open() {
-      return open.value
-    },
-    onUpdateOpen,
-    disabled() {
-      return disabled.value
-    },
-  })
-
-  return {
-    attrs(extraAttrs = []) {
-      const collapsibleRootAttrs = {
-        'data-orientation': context.orientation,
-      }
-
-      return collapsibleRoot.attrs([collapsibleRootAttrs, ...extraAttrs])
-    },
-  }
-}
diff --git a/packages/core/src/accordion/AccordionItem.vue b/packages/core/src/accordion/AccordionItem.vue
index 167f96e5a..fa1d98b2f 100644
--- a/packages/core/src/accordion/AccordionItem.vue
+++ b/packages/core/src/accordion/AccordionItem.vue
@@ -1,7 +1,87 @@
+<script lang="ts">
+import type { PrimitiveDefaultProps, RadixPrimitiveReturns } from '../shared/index.ts'
+import { computed, type Ref } from 'vue'
+import { useCollapsibleRoot } from '../collapsible/index.ts'
+import { createContext, useId } from '../hooks/index.ts'
+import { useAccordionContext } from './AccordionRoot.vue'
+
+export interface AccordionItemProps {
+  /**
+   * Whether or not an accordion item is disabled from user interaction.
+   *
+   * @defaultValue false
+   */
+  disabled?: boolean
+  /**
+   * A string value for the accordion item. All items within an accordion should use a unique value.
+   */
+  value: string
+}
+
+export const DEFAULT_ACCORDION_ITEM_PROPS = {
+  disabled: undefined,
+} satisfies PrimitiveDefaultProps<AccordionItemProps>
+
+export interface AccordionItemContext {
+  open: Ref<boolean>
+  disabled: Ref<boolean | undefined>
+  triggerId: string
+}
+
+export const [provideAccordionItemContext, useAccordionItemContext] = createContext<AccordionItemContext>('AccordionItem')
+
+export interface UseAccordionItemProps {
+  value: () => string
+  disabled?: () => boolean | undefined
+}
+
+export function useAccordionItem(props: UseAccordionItemProps): RadixPrimitiveReturns {
+  const context = useAccordionContext('AccordionItem')
+  const open = computed(() => {
+    const value = props.value()
+    return (value && context.value.value.includes(value)) || false
+  })
+  const disabled = computed(() => context.disabled?.() || props.disabled?.())
+
+  function onUpdateOpen(open: boolean) {
+    if (open)
+      context.onItemOpen(props.value())
+    else
+      context.onItemClose(props.value())
+  }
+
+  provideAccordionItemContext({
+    open,
+    disabled,
+    triggerId: useId(),
+  })
+
+  const collapsibleRoot = useCollapsibleRoot({
+    open() {
+      return open.value
+    },
+    onUpdateOpen,
+    disabled() {
+      return disabled.value
+    },
+  })
+
+  return {
+    attrs(extraAttrs = []) {
+      const collapsibleRootAttrs = {
+        'data-orientation': context.orientation,
+      }
+
+      return collapsibleRoot.attrs([collapsibleRootAttrs, ...extraAttrs])
+    },
+  }
+}
+
+</script>
+
 <script setup lang="ts">
 import { Primitive } from '../primitive/index.ts'
 import { convertPropsToHookProps, normalizeAttrs } from '../shared/index.ts'
-import { type AccordionItemProps, DEFAULT_ACCORDION_ITEM_PROPS, useAccordionItem } from './AccordionItem.ts'
 
 defineOptions({
   name: 'AccordionItem',
diff --git a/packages/core/src/accordion/AccordionRoot.ts b/packages/core/src/accordion/AccordionRoot.ts
deleted file mode 100644
index afedd1a59..000000000
--- a/packages/core/src/accordion/AccordionRoot.ts
+++ /dev/null
@@ -1,262 +0,0 @@
-import { type AriaAttributes, computed, type MaybeRefOrGetter, type Ref } from 'vue'
-import { createCollection } from '../collection/index.ts'
-import { type Direction, useDirection } from '../direction/index.ts'
-import { createContext, type MutableRefObject, useControllableStateV2, useId, useRef } from '../hooks/index.ts'
-import { type EmitsToHookProps, mergePrimitiveAttrs, type PrimitiveDefaultProps, type RadixPrimitiveReturns } from '../shared/index.ts'
-
-export type AccordionType = 'single' | 'multiple' | undefined
-export type IsSingle<T extends AccordionType> = T extends 'single' | undefined ? true : false
-
-export interface AccordionRootProps<T extends AccordionType> extends AccordionImplProps {
-  type?: T
-
-  value?: T extends 'multiple' ? AccordionMultipleProps['value'] : AccordionSingleProps['value']
-
-  defaultValue?: T extends 'multiple' ? AccordionMultipleProps['defaultValue'] : AccordionSingleProps['defaultValue']
-
-  collapsible?: AccordionSingleProps['collapsible']
-}
-
-type SingleValue = AccordionSingleProps['value']
-type MultipleValue = AccordionMultipleProps['value']
-type Value<T extends AccordionType> = T extends 'multiple' ? MultipleValue : SingleValue
-type DefValue<T extends AccordionType> = T extends 'multiple' ? Exclude<SingleValue, undefined> : MultipleValue
-type EmitValue<T> = T extends 'multiple' ? Exclude<AccordionMultipleProps['value'], undefined> : Exclude<AccordionSingleProps['value'], undefined>
-
-export const DEFAULT_ACCORDION_ROOT_PROPS = {
-  collapsible: undefined,
-  disabled: undefined,
-} satisfies PrimitiveDefaultProps<AccordionRootProps<AccordionType>>
-
-export type AccordionRootEmits<T extends AccordionType> = {
-  /**
-   * The callback that fires when the state of the toggle group changes.
-   */
-  'update:value': [value: EmitValue<T>]
-}
-
-interface AccordionSingleProps {
-  /**
-   * The controlled stateful value of the accordion item whose content is expanded.
-   */
-  value?: 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
-  /**
-   * Whether an accordion item can be collapsed after it has been opened.
-   * @default false
-   */
-  collapsible?: boolean
-}
-
-interface AccordionMultipleProps {
-  /**
-   * The controlled stateful value of the accordion items whose contents are expanded.
-   */
-  value?: 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[]
-}
-
-export interface AccordionImplProps {
-  /**
-   * Whether or not an accordion is disabled from user interaction.
-   *
-   * @defaultValue false
-   */
-  disabled?: boolean
-  /**
-   * The layout in which the Accordion operates.
-   * @default vertical
-   */
-  orientation?: AriaAttributes['aria-orientation']
-  /**
-   * The language read direction.
-   */
-  dir?: Direction
-}
-
-export const ACCORDION_KEYS = ['Home', 'End', 'ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight']
-
-export const [Collection, useCollection] = createCollection<HTMLButtonElement>('Accordion')
-
-export interface AccordionContext {
-  id: string
-  collapsible?: boolean
-
-  disabled?: () => boolean | undefined
-  direction: Ref<Direction>
-  orientation: Exclude<AccordionImplProps['orientation'], undefined>
-
-  value: Ref<string[]>
-  onItemOpen: (value: string) => void
-  onItemClose: (value: string) => void
-}
-
-export const [provideAccordionContext, useAccordionContext] = createContext<AccordionContext>('AccordionContext')
-
-export interface UseAccordionRootProps<T extends AccordionType> extends EmitsToHookProps<AccordionRootEmits<T>> {
-  elRef?: MutableRefObject<HTMLElement | undefined>
-
-  value?: () => T extends 'multiple' ? AccordionMultipleProps['value'] : AccordionSingleProps['value']
-  defaultValue?: T extends 'multiple' ? AccordionMultipleProps['defaultValue'] : AccordionSingleProps['defaultValue']
-
-  collapsible?: AccordionSingleProps['collapsible']
-
-  type?: T
-  disabled?: () => boolean | undefined
-  orientation?: AccordionImplProps['orientation']
-  dir?: MaybeRefOrGetter<Direction | undefined>
-}
-
-const TYPE_MULTIPLE = 'multiple' as const satisfies AccordionType
-
-export function useAccordionRoot<T extends AccordionType>(props: UseAccordionRootProps<T>): RadixPrimitiveReturns {
-  const isMultiple = props.type === TYPE_MULTIPLE
-  const {
-    orientation = 'vertical',
-    defaultValue = isMultiple ? [] : undefined,
-  } = props
-
-  const direction = useDirection(props.dir)
-  const value = useControllableStateV2<Value<T>, EmitValue<T>, DefValue<T>>(
-    props.value,
-    props.onUpdateValue,
-    defaultValue as DefValue<T>,
-  )
-
-  const elRef = props.elRef || useRef<HTMLElement>()
-  const setElRef = props.elRef ? undefined : (value: HTMLElement | undefined) => elRef.value = value
-
-  const getItems = useCollection(Collection.provideCollectionContext(elRef))
-
-  function onKeydown(event: KeyboardEvent) {
-    if (event.defaultPrevented)
-      return
-
-    if (!ACCORDION_KEYS.includes(event.key))
-      return
-    const target = event.target as HTMLElement
-    const triggerCollection = getItems().filter(item => !item.disabled)
-    const triggerIndex = triggerCollection.findIndex(item => item === target)
-    const triggerCount = triggerCollection.length
-
-    if (triggerIndex === -1)
-      return
-
-    // Prevents page scroll while user is navigating
-    event.preventDefault()
-
-    let nextIndex = triggerIndex
-    const homeIndex = 0
-    const endIndex = triggerCount - 1
-
-    const moveNext = () => {
-      nextIndex = triggerIndex + 1
-      if (nextIndex > endIndex) {
-        nextIndex = homeIndex
-      }
-    }
-
-    const movePrev = () => {
-      nextIndex = triggerIndex - 1
-      if (nextIndex < homeIndex) {
-        nextIndex = endIndex
-      }
-    }
-
-    switch (event.key) {
-      case 'Home':
-        nextIndex = homeIndex
-        break
-      case 'End':
-        nextIndex = endIndex
-        break
-      case 'ArrowRight':
-        if (orientation === 'horizontal') {
-          if (direction.value === 'ltr') {
-            moveNext()
-          }
-          else {
-            movePrev()
-          }
-        }
-        break
-      case 'ArrowDown':
-        if (orientation === 'vertical') {
-          moveNext()
-        }
-        break
-      case 'ArrowLeft':
-        if (orientation === 'horizontal') {
-          if (direction.value === 'ltr') {
-            movePrev()
-          }
-          else {
-            moveNext()
-          }
-        }
-        break
-      case 'ArrowUp':
-        if (orientation === 'vertical') {
-          movePrev()
-        }
-        break
-    }
-
-    const clampedIndex = nextIndex % triggerCount
-    triggerCollection[clampedIndex]?.focus()
-  }
-
-  provideAccordionContext({
-    id: useId(),
-    collapsible: props.collapsible,
-
-    disabled: props.disabled,
-    direction,
-    orientation: orientation ?? 'vertical',
-    value: isMultiple
-      ? value as Ref<string[]>
-      : computed<string[]>(() => value.value ? [value.value as string] : []),
-    onItemOpen: isMultiple
-      ? (itemValue) => {
-          value.value = [...value.value || [], itemValue] as DefValue<T>
-        }
-      : (itemValue) => {
-          value.value = itemValue as DefValue<T>
-        },
-    onItemClose: isMultiple
-      ? (itemValue) => {
-          value.value = ((value.value || []) as string[]).filter(value => value !== itemValue) as DefValue<T>
-        }
-      : () => {
-          if (props.collapsible) {
-            value.value = '' as DefValue<T>
-          }
-        },
-  })
-
-  return {
-    attrs(extraAttrs) {
-      const _disabled = props.disabled?.()
-      const attrs = {
-        'elRef': setElRef,
-        'data-disabled': _disabled ? '' : undefined,
-        'data-orientation': orientation,
-        'onKeydown': onKeydown,
-      }
-
-      if (extraAttrs && extraAttrs.length > 0) {
-        mergePrimitiveAttrs(attrs, extraAttrs)
-      }
-
-      return attrs
-    },
-  }
-}
diff --git a/packages/core/src/accordion/AccordionRoot.vue b/packages/core/src/accordion/AccordionRoot.vue
index eac514980..75624ea81 100644
--- a/packages/core/src/accordion/AccordionRoot.vue
+++ b/packages/core/src/accordion/AccordionRoot.vue
@@ -1,7 +1,294 @@
+<script lang="ts">
+import {
+  type AriaAttributes,
+  computed,
+  type MaybeRefOrGetter,
+  type Ref,
+} from 'vue'
+import {
+  createCollection,
+} from '../collection/index.ts'
+import {
+  type Direction,
+  useDirection,
+} from '../direction/index.ts'
+import {
+  createContext,
+  type MutableRefObject,
+  useControllableStateV2,
+  useId,
+  useRef,
+} from '../hooks/index.ts'
+import {
+  convertPropsToHookProps,
+  type EmitsToHookProps,
+  mergePrimitiveAttrs,
+  type PrimitiveDefaultProps,
+  type RadixPrimitiveReturns,
+} from '../shared/index.ts'
+
+export type AccordionType = 'single' | 'multiple' | undefined
+export type IsSingle<T extends AccordionType> = T extends 'single' | undefined ? true : false
+
+export interface AccordionRootProps<T extends AccordionType> extends AccordionImplProps {
+  type?: T
+
+  value?: T extends 'multiple' ? AccordionMultipleProps['value'] : AccordionSingleProps['value']
+
+  defaultValue?: T extends 'multiple' ? AccordionMultipleProps['defaultValue'] : AccordionSingleProps['defaultValue']
+
+  collapsible?: AccordionSingleProps['collapsible']
+}
+
+type SingleValue = AccordionSingleProps['value']
+type MultipleValue = AccordionMultipleProps['value']
+type Value<T extends AccordionType> = T extends 'multiple' ? MultipleValue : SingleValue
+type DefValue<T extends AccordionType> = T extends 'multiple' ? Exclude<SingleValue, undefined> : MultipleValue
+type EmitValue<T> = T extends 'multiple' ? Exclude<AccordionMultipleProps['value'], undefined> : Exclude<AccordionSingleProps['value'], undefined>
+
+export const DEFAULT_ACCORDION_ROOT_PROPS = {
+  collapsible: undefined,
+  disabled: undefined,
+} satisfies PrimitiveDefaultProps<AccordionRootProps<AccordionType>>
+
+export type AccordionRootEmits<T extends AccordionType> = {
+  /**
+   * The callback that fires when the state of the toggle group changes.
+   */
+  'update:value': [value: EmitValue<T>]
+}
+
+interface AccordionSingleProps {
+  /**
+   * The controlled stateful value of the accordion item whose content is expanded.
+   */
+  value?: 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
+  /**
+   * Whether an accordion item can be collapsed after it has been opened.
+   * @default false
+   */
+  collapsible?: boolean
+}
+
+interface AccordionMultipleProps {
+  /**
+   * The controlled stateful value of the accordion items whose contents are expanded.
+   */
+  value?: 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[]
+}
+
+export interface AccordionImplProps {
+  /**
+   * Whether or not an accordion is disabled from user interaction.
+   *
+   * @defaultValue false
+   */
+  disabled?: boolean
+  /**
+   * The layout in which the Accordion operates.
+   * @default vertical
+   */
+  orientation?: AriaAttributes['aria-orientation']
+  /**
+   * The language read direction.
+   */
+  dir?: Direction
+}
+
+export const ACCORDION_KEYS = ['Home', 'End', 'ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight']
+
+export const [Collection, useCollection] = createCollection<HTMLButtonElement>('Accordion')
+
+export interface AccordionContext {
+  id: string
+  collapsible?: boolean
+
+  disabled?: () => boolean | undefined
+  direction: Ref<Direction>
+  orientation: Exclude<AccordionImplProps['orientation'], undefined>
+
+  value: Ref<string[]>
+  onItemOpen: (value: string) => void
+  onItemClose: (value: string) => void
+}
+
+export const [provideAccordionContext, useAccordionContext] = createContext<AccordionContext>('AccordionContext')
+
+export interface UseAccordionRootProps<T extends AccordionType> extends EmitsToHookProps<AccordionRootEmits<T>> {
+  elRef?: MutableRefObject<HTMLElement | undefined>
+
+  value?: () => T extends 'multiple' ? AccordionMultipleProps['value'] : AccordionSingleProps['value']
+  defaultValue?: T extends 'multiple' ? AccordionMultipleProps['defaultValue'] : AccordionSingleProps['defaultValue']
+
+  collapsible?: AccordionSingleProps['collapsible']
+
+  type?: T
+  disabled?: () => boolean | undefined
+  orientation?: AccordionImplProps['orientation']
+  dir?: MaybeRefOrGetter<Direction | undefined>
+}
+
+const TYPE_MULTIPLE = 'multiple' as const satisfies AccordionType
+
+export function useAccordionRoot<T extends AccordionType>(props: UseAccordionRootProps<T>): RadixPrimitiveReturns {
+  const isMultiple = props.type === TYPE_MULTIPLE
+  const {
+    orientation = 'vertical',
+    defaultValue = isMultiple ? [] : undefined,
+  } = props
+
+  const direction = useDirection(props.dir)
+  const value = useControllableStateV2<Value<T>, EmitValue<T>, DefValue<T>>(
+    props.value,
+    props.onUpdateValue,
+    defaultValue as DefValue<T>,
+  )
+
+  const elRef = props.elRef || useRef<HTMLElement>()
+  const setElRef = props.elRef ? undefined : (value: HTMLElement | undefined) => elRef.value = value
+
+  const getItems = useCollection(Collection.provideCollectionContext(elRef))
+
+  function onKeydown(event: KeyboardEvent) {
+    if (event.defaultPrevented)
+      return
+
+    if (!ACCORDION_KEYS.includes(event.key))
+      return
+    const target = event.target as HTMLElement
+    const triggerCollection = getItems().filter(item => !item.disabled)
+    const triggerIndex = triggerCollection.findIndex(item => item === target)
+    const triggerCount = triggerCollection.length
+
+    if (triggerIndex === -1)
+      return
+
+    // Prevents page scroll while user is navigating
+    event.preventDefault()
+
+    let nextIndex = triggerIndex
+    const homeIndex = 0
+    const endIndex = triggerCount - 1
+
+    const moveNext = () => {
+      nextIndex = triggerIndex + 1
+      if (nextIndex > endIndex) {
+        nextIndex = homeIndex
+      }
+    }
+
+    const movePrev = () => {
+      nextIndex = triggerIndex - 1
+      if (nextIndex < homeIndex) {
+        nextIndex = endIndex
+      }
+    }
+
+    switch (event.key) {
+      case 'Home':
+        nextIndex = homeIndex
+        break
+      case 'End':
+        nextIndex = endIndex
+        break
+      case 'ArrowRight':
+        if (orientation === 'horizontal') {
+          if (direction.value === 'ltr') {
+            moveNext()
+          }
+          else {
+            movePrev()
+          }
+        }
+        break
+      case 'ArrowDown':
+        if (orientation === 'vertical') {
+          moveNext()
+        }
+        break
+      case 'ArrowLeft':
+        if (orientation === 'horizontal') {
+          if (direction.value === 'ltr') {
+            movePrev()
+          }
+          else {
+            moveNext()
+          }
+        }
+        break
+      case 'ArrowUp':
+        if (orientation === 'vertical') {
+          movePrev()
+        }
+        break
+    }
+
+    const clampedIndex = nextIndex % triggerCount
+    triggerCollection[clampedIndex]?.focus()
+  }
+
+  provideAccordionContext({
+    id: useId(),
+    collapsible: props.collapsible,
+
+    disabled: props.disabled,
+    direction,
+    orientation: orientation ?? 'vertical',
+    value: isMultiple
+      ? value as Ref<string[]>
+      : computed<string[]>(() => value.value ? [value.value as string] : []),
+    onItemOpen: isMultiple
+      ? (itemValue) => {
+          value.value = [...value.value || [], itemValue] as DefValue<T>
+        }
+      : (itemValue) => {
+          value.value = itemValue as DefValue<T>
+        },
+    onItemClose: isMultiple
+      ? (itemValue) => {
+          value.value = ((value.value || []) as string[]).filter(value => value !== itemValue) as DefValue<T>
+        }
+      : () => {
+          if (props.collapsible) {
+            value.value = '' as DefValue<T>
+          }
+        },
+  })
+
+  return {
+    attrs(extraAttrs) {
+      const _disabled = props.disabled?.()
+      const attrs = {
+        'elRef': setElRef,
+        'data-disabled': _disabled ? '' : undefined,
+        'data-orientation': orientation,
+        'onKeydown': onKeydown,
+      }
+
+      if (extraAttrs && extraAttrs.length > 0) {
+        mergePrimitiveAttrs(attrs, extraAttrs)
+      }
+
+      return attrs
+    },
+  }
+}
+
+</script>
+
 <script setup lang="ts" generic="T extends AccordionType = undefined">
 import { Primitive } from '../primitive/index.ts'
-import { convertPropsToHookProps, type EmitsToHookProps, normalizeAttrs } from '../shared/index.ts'
-import { type AccordionRootEmits, type AccordionRootProps, type AccordionType, DEFAULT_ACCORDION_ROOT_PROPS, useAccordionRoot } from './AccordionRoot.ts'
+import { normalizeAttrs } from '../shared/index.ts'
 
 defineOptions({
   name: 'AccordionRoot',
diff --git a/packages/core/src/accordion/AccordionTrigger.ts b/packages/core/src/accordion/AccordionTrigger.ts
deleted file mode 100644
index 02671b163..000000000
--- a/packages/core/src/accordion/AccordionTrigger.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import type { PrimitiveProps } from '../primitive/index.ts'
-import type { RadixPrimitiveReturns } from '../shared/index.ts'
-import { useCollapsibleTrigger } from '../collapsible/index.ts'
-import { DATA_COLLECTION_ITEM } from '../collection/index.ts'
-import { useAccordionItemContext } from './AccordionItem.ts'
-import { useAccordionContext } from './AccordionRoot.ts'
-
-export interface AccordionTriggerProps {
-  as?: PrimitiveProps['as']
-}
-
-export function useAccordionTrigger(): RadixPrimitiveReturns {
-  const collapsibleTrigger = useCollapsibleTrigger()
-
-  const accordionContext = useAccordionContext('AccordionTrigger')
-  const itemContext = useAccordionItemContext('AccordionHeader')
-
-  return {
-    attrs(extraAttrs = []) {
-      const collapsibleTriggerAttrs = {
-        'id': itemContext.triggerId,
-        'aria-disabled': (itemContext.open.value && !accordionContext.collapsible) || undefined,
-        'data-orientation': accordionContext.orientation,
-        [DATA_COLLECTION_ITEM]: true,
-      }
-
-      return collapsibleTrigger.attrs([collapsibleTriggerAttrs, ...extraAttrs])
-    },
-  }
-}
diff --git a/packages/core/src/accordion/AccordionTrigger.vue b/packages/core/src/accordion/AccordionTrigger.vue
index acd2c694b..64d49c277 100644
--- a/packages/core/src/accordion/AccordionTrigger.vue
+++ b/packages/core/src/accordion/AccordionTrigger.vue
@@ -1,7 +1,40 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive/index.ts'
+import type { RadixPrimitiveReturns } from '../shared/index.ts'
+import { useCollapsibleTrigger } from '../collapsible/index.ts'
+import { DATA_COLLECTION_ITEM } from '../collection/index.ts'
+import { useAccordionItemContext } from './AccordionItem.vue'
+import { useAccordionContext } from './AccordionRoot.vue'
+
+export interface AccordionTriggerProps {
+  as?: PrimitiveProps['as']
+}
+
+export function useAccordionTrigger(): RadixPrimitiveReturns {
+  const collapsibleTrigger = useCollapsibleTrigger()
+
+  const accordionContext = useAccordionContext('AccordionTrigger')
+  const itemContext = useAccordionItemContext('AccordionHeader')
+
+  return {
+    attrs(extraAttrs = []) {
+      const collapsibleTriggerAttrs = {
+        'id': itemContext.triggerId,
+        'aria-disabled': (itemContext.open.value && !accordionContext.collapsible) || undefined,
+        'data-orientation': accordionContext.orientation,
+        [DATA_COLLECTION_ITEM]: true,
+      }
+
+      return collapsibleTrigger.attrs([collapsibleTriggerAttrs, ...extraAttrs])
+    },
+  }
+}
+
+</script>
+
 <script setup lang="ts">
 import { Primitive } from '../primitive/index.ts'
 import { normalizeAttrs } from '../shared/index.ts'
-import { type AccordionTriggerProps, useAccordionTrigger } from './AccordionTrigger.ts'
 
 defineOptions({
   name: 'AccordionTrigger',
diff --git a/packages/core/src/accordion/index.ts b/packages/core/src/accordion/index.ts
index 469163b01..c77cafe23 100644
--- a/packages/core/src/accordion/index.ts
+++ b/packages/core/src/accordion/index.ts
@@ -3,9 +3,9 @@ export {
   DEFAULT_ACCORDION_CONTENT_PROPS,
   useAccordionContent,
   type UseAccordionContentProps,
-} from './AccordionContent.ts'
+} from './AccordionContent.vue'
 export { default as AccordionContent } from './AccordionContent.vue'
-export { type AccordionHeaderProps } from './AccordionHeader.ts'
+export { type AccordionHeaderProps } from './AccordionHeader.vue'
 export { default as AccordionHeader } from './AccordionHeader.vue'
 export {
   type AccordionItemContext,
@@ -13,7 +13,7 @@ export {
   DEFAULT_ACCORDION_ITEM_PROPS,
   provideAccordionItemContext,
   useAccordionItemContext,
-} from './AccordionItem.ts'
+} from './AccordionItem.vue'
 export { default as AccordionItem } from './AccordionItem.vue'
 export {
   type AccordionContext,
@@ -22,6 +22,6 @@ export {
   DEFAULT_ACCORDION_ROOT_PROPS,
   provideAccordionContext,
   useAccordionContext,
-} from './AccordionRoot.ts'
+} from './AccordionRoot.vue'
 export { default as AccordionRoot } from './AccordionRoot.vue'
 export { default as AccordionTrigger } from './AccordionTrigger.vue'