diff --git a/packages/components/arrow/src/arrow.ts b/packages/components/arrow/src/arrow.ts
index cdc881f91..747603b93 100644
--- a/packages/components/arrow/src/arrow.ts
+++ b/packages/components/arrow/src/arrow.ts
@@ -1,10 +1,10 @@
 import type { PropType } from 'vue'
 import { cloneVNode, defineComponent, h, toRefs } from 'vue'
-import type { ElementType, PrimitiveProps } from '@oku-ui/primitive'
+import type { OkuElement, PrimitiveProps } from '@oku-ui/primitive'
 import { Primitive, primitiveProps } from '@oku-ui/primitive'
 import { useForwardRef } from '@oku-ui/use-composable'
 
-export type ArrowIntrinsicElement = ElementType<'svg'>
+export type ArrowNaviteElement = OkuElement<'svg'>
 export type ArrowElement = Omit<SVGSVGElement, 'width' | 'height'> & {
   width: number
   height: number
@@ -77,5 +77,5 @@ const arrow = defineComponent({
 // TODO: https://github.com/vuejs/core/pull/7444 after delete
 export const OkuArrow = arrow as typeof arrow
 & (new () => {
-  $props: Partial<ArrowIntrinsicElement>
+  $props: ArrowNaviteElement
 })
diff --git a/packages/components/arrow/src/index.ts b/packages/components/arrow/src/index.ts
index ea44a0a3b..60a914ff9 100644
--- a/packages/components/arrow/src/index.ts
+++ b/packages/components/arrow/src/index.ts
@@ -6,5 +6,5 @@ export {
 export type {
   ArrowProps,
   ArrowElement,
-  ArrowIntrinsicElement,
+  ArrowNaviteElement,
 } from './arrow'
diff --git a/packages/components/aspect-ratio/src/aspect-ratio.ts b/packages/components/aspect-ratio/src/aspect-ratio.ts
index e475ba012..fd761d3ee 100644
--- a/packages/components/aspect-ratio/src/aspect-ratio.ts
+++ b/packages/components/aspect-ratio/src/aspect-ratio.ts
@@ -1,10 +1,10 @@
-import type { CSSProperties, PropType } from 'vue'
+import type { PropType } from 'vue'
 import { defineComponent, h, toRef } from 'vue'
-import type { ElementType, PrimitiveProps } from '@oku-ui/primitive'
+import type { OkuElement, PrimitiveProps } from '@oku-ui/primitive'
 import { Primitive, primitiveProps } from '@oku-ui/primitive'
 import { useForwardRef } from '@oku-ui/use-composable'
 
-export type AspectRatioIntrinsicElement = ElementType<'div'>
+export type AspectRatioNaviteElement = OkuElement<'div'>
 export type AspectRatioElement = HTMLDivElement
 
 const NAME = 'OkuAspectRatio'
@@ -23,7 +23,7 @@ export const aspectRatioProps = {
   emits: {},
 }
 
-const AspectRatio = defineComponent({
+const aspectRatio = defineComponent({
   name: NAME,
   inheritAttrs: false,
   props: {
@@ -32,7 +32,6 @@ const AspectRatio = defineComponent({
   },
   setup(props, { attrs, slots }) {
     const ratio = toRef(props, 'ratio')
-    const { style, ...aspectRatioAttrs } = attrs as AspectRatioIntrinsicElement
 
     const forwardedRef = useForwardRef()
     const originalReturn = () => h(
@@ -41,7 +40,7 @@ const AspectRatio = defineComponent({
           position: 'relative',
           width: '100%',
           paddingBottom: `${100 / ratio.value}%`,
-        } as CSSProperties,
+        },
         'data-oku-aspect-ratio-wrapper': '',
       },
       [
@@ -49,10 +48,10 @@ const AspectRatio = defineComponent({
           Primitive.div,
           {
             asChild: props.asChild,
-            ...aspectRatioAttrs,
+            ...attrs,
             ref: forwardedRef,
             style: {
-              ...(style as any),
+              ...attrs.style as any,
               position: 'absolute',
               top: '0px',
               right: '0px',
@@ -72,7 +71,7 @@ const AspectRatio = defineComponent({
 })
 
 // TODO: https://github.com/vuejs/core/pull/7444 after delete
-export const OkuAspectRatio = AspectRatio as typeof AspectRatio &
+export const OkuAspectRatio = aspectRatio as typeof aspectRatio &
 (new () => {
-  $props: Partial<AspectRatioElement>
+  $props: AspectRatioNaviteElement
 })
diff --git a/packages/components/aspect-ratio/src/index.ts b/packages/components/aspect-ratio/src/index.ts
index b682ddf78..da5e42d91 100644
--- a/packages/components/aspect-ratio/src/index.ts
+++ b/packages/components/aspect-ratio/src/index.ts
@@ -6,5 +6,5 @@ export {
 export type {
   AspectRatioProps,
   AspectRatioElement,
-  AspectRatioIntrinsicElement,
+  AspectRatioNaviteElement,
 } from './aspect-ratio'
diff --git a/packages/components/aspect-ratio/src/stories/AspectRatioDemo.vue b/packages/components/aspect-ratio/src/stories/AspectRatioDemo.vue
index 5da56f476..b3060cd79 100644
--- a/packages/components/aspect-ratio/src/stories/AspectRatioDemo.vue
+++ b/packages/components/aspect-ratio/src/stories/AspectRatioDemo.vue
@@ -5,13 +5,13 @@ import { onMounted, ref } from 'vue'
 export interface IAspectRatioProps {
   template?: '#1' | '#2' | '#3' | '#4' | '#5'
   imageurl?: string
-  allShow?: boolean
+  allshow?: boolean
 }
 
 withDefaults(defineProps<IAspectRatioProps>(), {
   ratio: 16 / 9,
   template: '#1',
-  allShow: false,
+  allshow: false,
 })
 
 const root = ref()
@@ -22,12 +22,12 @@ onMounted(() => {
 
 <template>
   <div class="cursor-default inline-block gap-6">
-    <div v-if="template === '#1' || allShow" class="w-[300px] rounded-sm overflow-hidden">
+    <div v-if="template === '#1' || allshow" class="w-[300px] rounded-sm overflow-hidden">
       <OkuAspectRatio ref="root" class="bg-cyan-500 flex items-center justify-center text-white font-bold">
         <h1>Default ratio (1/1)</h1>
       </OkuAspectRatio>
     </div>
-    <div v-if="template === '#2' || allShow" class="flex gap-6">
+    <div v-if="template === '#2' || allshow" class="flex gap-6">
       <div class="w-[150px] rounded-sm overflow-hidden">
         <OkuAspectRatio :ratio="1 / 2">
           <img
diff --git a/packages/components/aspect-ratio/src/stories/aspect-ratio.stories.ts b/packages/components/aspect-ratio/src/stories/aspect-ratio.stories.ts
index be209ae0c..ce4e812a5 100644
--- a/packages/components/aspect-ratio/src/stories/aspect-ratio.stories.ts
+++ b/packages/components/aspect-ratio/src/stories/aspect-ratio.stories.ts
@@ -32,7 +32,7 @@ export const Styled: Story = {
     ratio: 1,
     template: '#1',
     imageurl: 'https://images.unsplash.com/photo-1682923875240-3ef0a52a9e7e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80',
-    allShow: true,
+    allshow: true,
   },
   render: (args: any) => ({
     components: { OkuAspectRatioComponent },
diff --git a/packages/components/avatar/src/avatar.ts b/packages/components/avatar/src/avatar.ts
index 613fc074c..df58d2e59 100644
--- a/packages/components/avatar/src/avatar.ts
+++ b/packages/components/avatar/src/avatar.ts
@@ -1,6 +1,6 @@
 import type { Ref } from 'vue'
 import { defineComponent, h, ref } from 'vue'
-import type { ElementType, PrimitiveProps } from '@oku-ui/primitive'
+import type { OkuElement, PrimitiveProps } from '@oku-ui/primitive'
 import { Primitive, primitiveProps } from '@oku-ui/primitive'
 import { createProvideScope } from '@oku-ui/provide'
 import { useForwardRef } from '@oku-ui/use-composable'
@@ -18,7 +18,7 @@ type AvatarProvideValue = {
 
 export const [avatarProvider, useAvatarInject] = createAvatarProvide<AvatarProvideValue>(AVATAR_NAME)
 
-export type AvatarIntrinsicElement = ElementType<'span'>
+export type AvatarNaviteElement = OkuElement<'span'>
 export type AvatarElement = HTMLSpanElement
 
 export interface AvatarProps extends PrimitiveProps {
@@ -68,5 +68,5 @@ const avatar = defineComponent({
 // TODO: https://github.com/vuejs/core/pull/7444 after delete
 export const OkuAvatar = avatar as typeof avatar &
 (new () => {
-  $props: Partial<AvatarElement>
+  $props: AvatarNaviteElement
 })
diff --git a/packages/components/avatar/src/avatarFallback.ts b/packages/components/avatar/src/avatarFallback.ts
index 1bbfd3849..92022a0f0 100644
--- a/packages/components/avatar/src/avatarFallback.ts
+++ b/packages/components/avatar/src/avatarFallback.ts
@@ -1,15 +1,14 @@
 import type { PropType } from 'vue'
 import { defineComponent, h, onBeforeUnmount, onMounted, ref } from 'vue'
-import type { ElementType, PrimitiveProps } from '@oku-ui/primitive'
+import type { OkuElement, PrimitiveProps } from '@oku-ui/primitive'
 import { Primitive, primitiveProps } from '@oku-ui/primitive'
 import { useForwardRef } from '@oku-ui/use-composable'
 import { useAvatarInject } from './avatar'
-import type { ScopeAvatar } from './utils'
 import { scopeAvatarProps } from './utils'
 
 const FALLBACK_NAME = 'OkuAvatarFallback'
 
-export type AvatarFallbackIntrinsicElement = ElementType<'span'>
+export type AvatarFallbackNaviteElement = OkuElement<'span'>
 export type AvatarFalbackElement = HTMLSpanElement
 
 export interface AvatarFallbackProps extends PrimitiveProps {
@@ -86,5 +85,5 @@ const avatarFallback = defineComponent({
 // TODO: https://github.com/vuejs/core/pull/7444 after delete
 export const OkuAvatarFallback = avatarFallback as typeof avatarFallback &
 (new () => {
-  $props: ScopeAvatar<Partial<AvatarFalbackElement>>
+  $props: AvatarFallbackNaviteElement
 })
diff --git a/packages/components/avatar/src/avatarImage.ts b/packages/components/avatar/src/avatarImage.ts
index dd380eba0..04f9e95b0 100644
--- a/packages/components/avatar/src/avatarImage.ts
+++ b/packages/components/avatar/src/avatarImage.ts
@@ -1,5 +1,5 @@
 import { defineComponent, h, toRef, watchEffect } from 'vue'
-import type { ElementType, PrimitiveProps } from '@oku-ui/primitive'
+import type { OkuElement, PrimitiveProps } from '@oku-ui/primitive'
 import { Primitive, primitiveProps } from '@oku-ui/primitive'
 import type { Scope } from '@oku-ui/provide'
 import { useCallbackRef, useForwardRef } from '@oku-ui/use-composable'
@@ -9,7 +9,7 @@ import { useAvatarInject } from './avatar'
 
 const IMAGE_NAME = 'OkuAvatarImage'
 
-export type AvatarImageIntrinsicElement = ElementType<'img'>
+export type AvatarImageNaviteElement = OkuElement<'img'>
 export type AvatarImageElement = HTMLImageElement
 
 export interface AvatarImageProps extends PrimitiveProps {
@@ -81,5 +81,5 @@ const avatarImage = defineComponent({
 // TODO: https://github.com/vuejs/core/pull/7444 after delete
 export const OkuAvatarImage = avatarImage as typeof avatarImage &
 (new () => {
-  $props: Partial<AvatarImageElement>
+  $props: AvatarImageNaviteElement
 })
diff --git a/packages/components/avatar/src/index.ts b/packages/components/avatar/src/index.ts
index 16e4a7ab6..879ec2670 100644
--- a/packages/components/avatar/src/index.ts
+++ b/packages/components/avatar/src/index.ts
@@ -17,18 +17,18 @@ export {
 export type {
   AvatarImageProps,
   AvatarImageElement,
-  AvatarImageIntrinsicElement,
+  AvatarImageNaviteElement,
   AvatarEmits,
 } from './avatarImage'
 
 export type {
   AvatarProps,
   AvatarElement,
-  AvatarIntrinsicElement,
+  AvatarNaviteElement,
 } from './avatar'
 
 export type {
   AvatarFallbackProps,
   AvatarFalbackElement,
-  AvatarFallbackIntrinsicElement,
+  AvatarFallbackNaviteElement,
 } from './avatarFallback'
diff --git a/packages/components/checkbox/src/bubbleInput.ts b/packages/components/checkbox/src/bubbleInput.ts
index b89489f8c..8c0f198bb 100644
--- a/packages/components/checkbox/src/bubbleInput.ts
+++ b/packages/components/checkbox/src/bubbleInput.ts
@@ -3,15 +3,13 @@ import { computed, defineComponent, h, ref, toRefs, watchEffect } from 'vue'
 
 import { usePrevious, useSize } from '@oku-ui/use-composable'
 
-import type { ElementType } from '@oku-ui/primitive'
+import type { OkuElement } from '@oku-ui/primitive'
 
 import { type CheckedState, isIndeterminate } from './utils'
 
-type BubbleInputIntrinsicElement = ElementType<'input'>
+export type BubbleInputNaviteElement = Omit<OkuElement<'input', true>, 'checked'>
 
-type BubbleInputElement = Partial<Omit<HTMLInputElement, 'checked'>>
-
-interface BubbleInputProps {
+export interface BubbleInputProps {
   checked: CheckedState
   control: HTMLElement | null
   bubbles: boolean
@@ -43,7 +41,6 @@ const bubbleInput = defineComponent({
     ...bubbleInputProps.props,
   },
   setup(props, { attrs }) {
-    const { ...inputAttrs } = attrs as BubbleInputIntrinsicElement
     const { checked, bubbles, control } = toRefs(props)
     const _ref = ref<HTMLInputElement>()
 
@@ -69,11 +66,11 @@ const bubbleInput = defineComponent({
         'type': 'checkbox',
         'aria-hidden': true,
         'defaultChecked': computed(() => isIndeterminate(checked.value) ? false : checked.value).value,
-        ...inputAttrs,
+        ...attrs,
         'tabindex': -1,
         'ref': _ref,
         'style': {
-          ...inputAttrs.style as any,
+          ...attrs.style as any,
           ...controlSize.value,
           position: 'absolute',
           pointerEvents: 'none',
@@ -86,9 +83,5 @@ const bubbleInput = defineComponent({
 
 export const OkuBubbleInput = bubbleInput as typeof bubbleInput
 & (new () => {
-  $props: Partial<BubbleInputElement>
+  $props: BubbleInputNaviteElement
 })
-
-export type {
-  BubbleInputProps,
-}
diff --git a/packages/components/checkbox/src/checkbox.ts b/packages/components/checkbox/src/checkbox.ts
index 695c43e0f..38fc2989f 100644
--- a/packages/components/checkbox/src/checkbox.ts
+++ b/packages/components/checkbox/src/checkbox.ts
@@ -6,11 +6,11 @@ import { composeEventHandlers } from '@oku-ui/utils'
 import { useComposedRefs, useControllable, useForwardRef } from '@oku-ui/use-composable'
 import { Primitive, primitiveProps } from '@oku-ui/primitive'
 
-import type { ElementType, PrimitiveProps } from '@oku-ui/primitive'
+import type { OkuElement, PrimitiveProps } from '@oku-ui/primitive'
 
 import type { Scope } from '@oku-ui/provide'
 import { getState, isIndeterminate, scopeCheckboxProps } from './utils'
-import type { CheckedState, ScopeCheckbox } from './utils'
+import type { CheckedState } from './utils'
 import { OkuBubbleInput } from './bubbleInput'
 
 const CHECKBOX_NAME = 'OkuCheckbox'
@@ -25,7 +25,7 @@ type CheckboxInjectValue = {
 export const [CheckboxProvider, useCheckboxInject]
   = createCheckboxProvider<CheckboxInjectValue>(CHECKBOX_NAME)
 
-export type CheckboxIntrinsicElement = ElementType<'button'>
+export type CheckboxNaviteElement = Omit<OkuElement<'button', true>, 'checked' | 'defaultChecked'>
 export type CheckboxElement = HTMLButtonElement
 
 export interface CheckboxProps extends PrimitiveProps {
@@ -117,7 +117,7 @@ const Checkbox = defineComponent({
 
     const {
       ...checkboxAttrs
-    } = attrs as CheckboxIntrinsicElement
+    } = attrs as CheckboxNaviteElement
 
     const hasConsumerStoppedPropagationRef = ref(false)
 
@@ -210,7 +210,7 @@ const Checkbox = defineComponent({
           // We transform because the input is absolutely positioned but we have
           // rendered it **after** the button. This pulls it back to sit on top
           // of the button.
-          style: { transform: 'translateX(-100%)' } as CSSStyleDeclaration,
+          style: { transform: 'translateX(-100%)' },
         },
       ),
       ]
@@ -222,7 +222,7 @@ const Checkbox = defineComponent({
 // TODO: https://github.com/vuejs/core/pull/7444 after delete
 export const OkuCheckbox = Checkbox as typeof Checkbox &
 (new () => {
-  $props: ScopeCheckbox<Partial<CheckboxElement>>
+  $props: CheckboxNaviteElement
 })
 
 export {
diff --git a/packages/components/checkbox/src/checkboxIndicator.ts b/packages/components/checkbox/src/checkboxIndicator.ts
index dfd548d21..ac5289334 100644
--- a/packages/components/checkbox/src/checkboxIndicator.ts
+++ b/packages/components/checkbox/src/checkboxIndicator.ts
@@ -4,15 +4,14 @@ import { computed, defineComponent, h, toRefs } from 'vue'
 import { useForwardRef } from '@oku-ui/use-composable'
 import { Primitive, primitiveProps } from '@oku-ui/primitive'
 
-import type { ElementType, PrimitiveProps } from '@oku-ui/primitive'
+import type { OkuElement, PrimitiveProps } from '@oku-ui/primitive'
 
 import { OkuPresence } from '@oku-ui/presence'
-import type { ScopeCheckbox } from './utils'
 import { getState, isIndeterminate, scopeCheckboxProps } from './utils'
 import { useCheckboxInject } from './checkbox'
 
-export type CheckboxIndicatorIntrinsicElement = ElementType<'span'>
-export type CheckboxIndicatorElement = HTMLSpanElement
+export type CheckboxIndicatorNaviteElement = OkuElement<'span'>
+export type CheckboxElement = HTMLSpanElement
 
 export interface CheckboxIndicatorProps extends PrimitiveProps {
   forceMount?: true
@@ -39,7 +38,7 @@ const checkboxIndicator = defineComponent({
   },
   setup(props, { attrs, slots }) {
     const { forceMount } = toRefs(props)
-    const { ...indicatorAttrs } = attrs as CheckboxIndicatorIntrinsicElement
+    const { ...indicatorAttrs } = attrs as CheckboxIndicatorNaviteElement
 
     const forwardedRef = useForwardRef()
 
@@ -68,5 +67,5 @@ const checkboxIndicator = defineComponent({
 // TODO: https://github.com/vuejs/core/pull/7444 after delete
 export const OkuCheckboxIndicator = checkboxIndicator as typeof checkboxIndicator &
 (new () => {
-  $props: ScopeCheckbox<Partial<CheckboxIndicatorElement>>
+  $props: CheckboxIndicatorNaviteElement
 })
diff --git a/packages/components/checkbox/src/index.ts b/packages/components/checkbox/src/index.ts
index e532cfc4f..3a72cde5a 100644
--- a/packages/components/checkbox/src/index.ts
+++ b/packages/components/checkbox/src/index.ts
@@ -7,7 +7,7 @@ export {
 export type {
   CheckboxProps,
   CheckboxElement,
-  CheckboxIntrinsicElement,
+  CheckboxNaviteElement,
   CheckboxEmits,
 } from './checkbox'
 
@@ -17,7 +17,6 @@ export {
 } from './checkboxIndicator'
 
 export type {
-  CheckboxIndicatorElement,
   CheckboxIndicatorProps,
-  CheckboxIndicatorIntrinsicElement,
+  CheckboxIndicatorNaviteElement,
 } from './checkboxIndicator'
diff --git a/packages/components/collapsible/src/collapsible.ts b/packages/components/collapsible/src/collapsible.ts
index 0dee63586..26edb5076 100644
--- a/packages/components/collapsible/src/collapsible.ts
+++ b/packages/components/collapsible/src/collapsible.ts
@@ -1,14 +1,13 @@
 import type { PropType, Ref } from 'vue'
 import { computed, defineComponent, h, toRefs, useModel } from 'vue'
-import type { ElementType, PrimitiveProps } from '@oku-ui/primitive'
+import type { OkuElement, PrimitiveProps } from '@oku-ui/primitive'
 import { createProvideScope } from '@oku-ui/provide'
 import { Primitive, primitiveProps } from '@oku-ui/primitive'
 
 import { useControllable, useForwardRef, useId } from '@oku-ui/use-composable'
-import type { ScopeCollapsible } from './utils'
 import { getState, scopeCollapsibleProps } from './utils'
 
-export type CollapsibleIntrinsicElement = ElementType<'div'>
+export type CollapsibleNaviteElement = OkuElement<'div'>
 export type CollapsibleElement = HTMLDivElement
 
 export type CollapsibleProvideValue = {
@@ -75,7 +74,7 @@ const collapsible = defineComponent({
   },
   emits: collapsibleProps.emits,
   setup(props, { attrs, slots, emit }) {
-    const { ...collapsibleAttr } = attrs as CollapsibleIntrinsicElement
+    const { ...collapsibleAttr } = attrs as CollapsibleNaviteElement
     const { disabled, open, defaultOpen } = toRefs(props)
 
     const modelValue = useModel(props, 'modelValue')
@@ -130,5 +129,5 @@ const collapsible = defineComponent({
 // TODO: https://github.com/vuejs/core/pull/7444 after delete
 export const OkuCollapsible = collapsible as typeof collapsible &
 (new () => {
-  $props: ScopeCollapsible<Partial<CollapsibleElement>>
+  $props: CollapsibleNaviteElement
 })
diff --git a/packages/components/collapsible/src/collapsibleContent.ts b/packages/components/collapsible/src/collapsibleContent.ts
index 601ffe9a7..9c36c1508 100644
--- a/packages/components/collapsible/src/collapsibleContent.ts
+++ b/packages/components/collapsible/src/collapsibleContent.ts
@@ -3,17 +3,16 @@ import { Transition, defineComponent, h, toRefs } from 'vue'
 
 import { useForwardRef } from '@oku-ui/use-composable'
 import { primitiveProps } from '@oku-ui/primitive'
-import type { ElementType, PrimitiveProps } from '@oku-ui/primitive'
+import type { OkuElement, PrimitiveProps } from '@oku-ui/primitive'
 import type { isPresent } from '@oku-ui/presence'
 import { OkuPresence } from '@oku-ui/presence'
 import { OkuCollapsibleContentImpl } from './collapsibleContentImpl'
 import { useCollapsibleInject } from './collapsible'
-import type { ScopeCollapsible } from './utils'
 import { scopeCollapsibleProps } from './utils'
 
 export const CONTENT_NAME = 'OkuCollapsibleContent'
 
-export type CollapsibleContentIntrinsicElement = ElementType<'div'>
+export type CollapsibleContentNaviteElement = OkuElement<'div'>
 export type CollapsibleContentElement = HTMLDivElement
 
 export interface CollapsibleContentProps extends PrimitiveProps {
@@ -51,7 +50,7 @@ const collapsibleContent = defineComponent({
   },
   setup(props, { attrs, slots }) {
     const { scopeOkuCollapsible, forceMount } = toRefs(props)
-    const { ...contentAttrs } = attrs as CollapsibleContentIntrinsicElement
+    const { ...contentAttrs } = attrs as CollapsibleContentNaviteElement
 
     const context = useCollapsibleInject(CONTENT_NAME, scopeOkuCollapsible.value)
 
@@ -87,5 +86,5 @@ const collapsibleContent = defineComponent({
 // TODO: https://github.com/vuejs/core/pull/7444 after delete
 export const OkuCollapsibleContent = collapsibleContent as typeof collapsibleContent &
 (new () => {
-  $props: ScopeCollapsible<Partial<CollapsibleContentElement>>
+  $props: CollapsibleContentNaviteElement
 })
diff --git a/packages/components/collapsible/src/collapsibleContentImpl.ts b/packages/components/collapsible/src/collapsibleContentImpl.ts
index e7fd790b3..3fda52cdc 100644
--- a/packages/components/collapsible/src/collapsibleContentImpl.ts
+++ b/packages/components/collapsible/src/collapsibleContentImpl.ts
@@ -1,15 +1,14 @@
 import type { PropType, Ref } from 'vue'
-import { computed, defineComponent, h, nextTick, onMounted, ref, toRef, watch, watchEffect } from 'vue'
-import type { ComponentPublicInstanceRef, ElementType, PrimitiveProps } from '@oku-ui/primitive'
+import { computed, defineComponent, h, nextTick, onBeforeUnmount, onMounted, ref, toRef, watch } from 'vue'
+import type { OkuElement, PrimitiveProps } from '@oku-ui/primitive'
 import { Primitive, primitiveProps } from '@oku-ui/primitive'
 
 import { useComposedRefs, useForwardRef } from '@oku-ui/use-composable'
 import { useCollapsibleInject } from './collapsible'
-import type { ScopeCollapsible } from './utils'
 import { getState, scopeCollapsibleProps } from './utils'
 import { CONTENT_NAME } from './collapsibleContent'
 
-export type CollapsibleContentImplIntrinsicElement = ElementType<'div'>
+export type CollapsibleContentImplNaviteElement = OkuElement<'div'>
 export type CollapsibleContentImplElement = HTMLDivElement
 
 export interface CollapsibleContentImplProps extends PrimitiveProps {
@@ -34,10 +33,10 @@ const collapsibleContentImpl = defineComponent({
   },
   setup(props, { attrs, slots }) {
     const present = toRef(props, 'present')
-    const { ...contentAttrs } = attrs as CollapsibleContentImplIntrinsicElement
+    const { ...contentAttrs } = attrs as CollapsibleContentImplNaviteElement
     const context = useCollapsibleInject(CONTENT_NAME, props.scopeOkuCollapsible)
 
-    const _ref = ref<ComponentPublicInstanceRef<HTMLDivElement> | undefined>(undefined)
+    const _ref = ref<HTMLDivElement | undefined>(undefined)
     const forwardedRef = useForwardRef()
     const composedRefs = useComposedRefs(_ref, forwardedRef)
 
@@ -51,16 +50,19 @@ const collapsibleContentImpl = defineComponent({
     const isMountAnimationPreventedRef = ref(isOpen.value)
     const originalStylesRef = ref<Record<string, string>>()
 
+    const rAf = ref()
+
     onMounted(() => {
-      watchEffect(async (onCleanup) => {
-        const rAF = requestAnimationFrame(() => (isMountAnimationPreventedRef.value = false))
-        onCleanup(() => cancelAnimationFrame(rAF))
-      })
+      rAf.value = requestAnimationFrame(() => (isMountAnimationPreventedRef.value = false))
+    })
+
+    onBeforeUnmount(() => {
+      cancelAnimationFrame(rAf.value)
     })
 
     watch([isOpen, isPresent], async () => {
       await nextTick()
-      const node = _ref.value?.$el
+      const node = _ref.value
       if (node) {
         originalStylesRef.value = originalStylesRef.value || {
           transitionDuration: node.style.transitionDuration,
@@ -115,5 +117,5 @@ const collapsibleContentImpl = defineComponent({
 // TODO: https://github.com/vuejs/core/pull/7444 after delete
 export const OkuCollapsibleContentImpl = collapsibleContentImpl as typeof collapsibleContentImpl &
 (new () => {
-  $props: ScopeCollapsible<Partial<CollapsibleContentImplElement>>
+  $props: CollapsibleContentImplNaviteElement
 })
diff --git a/packages/components/collapsible/src/collapsibleTrigger.ts b/packages/components/collapsible/src/collapsibleTrigger.ts
index a1bb99f8a..85cf79d6f 100644
--- a/packages/components/collapsible/src/collapsibleTrigger.ts
+++ b/packages/components/collapsible/src/collapsibleTrigger.ts
@@ -1,16 +1,15 @@
 import { defineComponent, h } from 'vue'
-import type { ElementType, PrimitiveProps } from '@oku-ui/primitive'
+import type { OkuElement, PrimitiveProps } from '@oku-ui/primitive'
 import { Primitive, primitiveProps } from '@oku-ui/primitive'
 import { composeEventHandlers } from '@oku-ui/utils'
 
 import { useForwardRef } from '@oku-ui/use-composable'
 import { useCollapsibleInject } from './collapsible'
-import type { ScopeCollapsible } from './utils'
 import { getState, scopeCollapsibleProps } from './utils'
 
 const TRIGGER_NAME = 'OkuCollapsibleTrigger'
 
-export type CollapsibleTriggerIntrinsicElement = ElementType<'button'>
+export type CollapsibleTriggerNaviteElement = OkuElement<'button'>
 export type CollapsibleTriggerElement = HTMLButtonElement
 
 export interface CollapsibleTriggerProps extends PrimitiveProps { }
@@ -37,7 +36,7 @@ const collapsibleTrigger = defineComponent({
   },
   emits: collapsibleTriggerProps.emits,
   setup(props, { attrs, slots, emit }) {
-    const { ...triggerAttrs } = attrs as CollapsibleTriggerIntrinsicElement
+    const { ...triggerAttrs } = attrs as CollapsibleTriggerNaviteElement
     const context = useCollapsibleInject(TRIGGER_NAME, props.scopeOkuCollapsible)
 
     const forwardedRef = useForwardRef()
@@ -69,5 +68,5 @@ const collapsibleTrigger = defineComponent({
 // TODO: https://github.com/vuejs/core/pull/7444 after delete
 export const OkuCollapsibleTrigger = collapsibleTrigger as typeof collapsibleTrigger &
 (new () => {
-  $props: ScopeCollapsible<Partial<CollapsibleTriggerElement>>
+  $props: CollapsibleTriggerNaviteElement
 })
diff --git a/packages/components/collapsible/src/index.ts b/packages/components/collapsible/src/index.ts
index e20f55802..ff23bda48 100644
--- a/packages/components/collapsible/src/index.ts
+++ b/packages/components/collapsible/src/index.ts
@@ -1,7 +1,7 @@
 export type {
   CollapsibleElement,
   CollapsibleProps,
-  CollapsibleIntrinsicElement,
+  CollapsibleNaviteElement,
   CollapsibleEmits,
 } from './collapsible'
 
@@ -19,7 +19,7 @@ export {
 export type {
   CollapsibleContentElement,
   CollapsibleContentProps,
-  CollapsibleContentIntrinsicElement,
+  CollapsibleContentNaviteElement,
 } from './collapsibleContent'
 
 export {
@@ -30,7 +30,7 @@ export {
 export type {
   CollapsibleContentImplElement,
   CollapsibleContentImplProps,
-  CollapsibleContentImplIntrinsicElement,
+  CollapsibleContentImplNaviteElement,
 } from './collapsibleContentImpl'
 
 export {
@@ -41,6 +41,6 @@ export {
 export type {
   CollapsibleTriggerElement,
   CollapsibleTriggerProps,
-  CollapsibleTriggerIntrinsicElement,
+  CollapsibleTriggerNaviteElement,
   CollapsibleTriggerEmits,
 } from './collapsibleTrigger'
diff --git a/packages/components/dismissable-layer/src/DismissableLayer.ts b/packages/components/dismissable-layer/src/DismissableLayer.ts
index 438a80c18..a2232b7be 100644
--- a/packages/components/dismissable-layer/src/DismissableLayer.ts
+++ b/packages/components/dismissable-layer/src/DismissableLayer.ts
@@ -3,7 +3,7 @@ import {
   useEscapeKeydown,
   useForwardRef,
 } from '@oku-ui/use-composable'
-import type { ElementType, PrimitiveProps } from '@oku-ui/primitive'
+import type { OkuElement, PrimitiveProps } from '@oku-ui/primitive'
 import { Primitive, primitiveProps } from '@oku-ui/primitive'
 import type { Ref } from 'vue'
 import {
@@ -11,15 +11,14 @@ import {
   defineComponent,
   h,
   nextTick,
+  onBeforeUnmount,
   onMounted,
-  onUnmounted,
   provide,
   ref,
   toRefs,
   watchEffect,
 } from 'vue'
 import { composeEventHandlers } from '@oku-ui/utils'
-import type { ScopeDismissableLayer } from './util'
 import {
   dispatchUpdate,
   scopeDismissableLayerProps,
@@ -39,7 +38,7 @@ let originalBodyPointerEvents: string
 export const DISMISSABLE_NAME = 'OkuDismissableLayer'
 export const DismissableLayerProvideKey = Symbol('DismissableLayerProvide')
 
-export type DismissableLayerIntrinsicElement = ElementType<'div'>
+export type DismissableLayerNaviteElement = OkuElement<'div'>
 export type DismissableLayerElement = HTMLDivElement
 
 export type DismissableLayerProvideValue = {
@@ -272,9 +271,10 @@ const DismissableLayer = defineComponent({
       document.addEventListener(INJECT_UPDATE, handleUpdate)
     })
 
-    onUnmounted(() => {
+    onBeforeUnmount(() => {
       document.removeEventListener(INJECT_UPDATE, handleUpdate)
     })
+
     const originalReturn = () =>
       h(
         Primitive.div,
@@ -311,5 +311,5 @@ const DismissableLayer = defineComponent({
 
 export const OkuDismissableLayer = DismissableLayer as typeof DismissableLayer &
 (new () => {
-  $props: ScopeDismissableLayer<Partial<DismissableLayerElement>>
+  $props: DismissableLayerNaviteElement
 })
diff --git a/packages/components/dismissable-layer/src/DismissableLayerBranch.ts b/packages/components/dismissable-layer/src/DismissableLayerBranch.ts
index ba9fe5253..51e60c1cc 100644
--- a/packages/components/dismissable-layer/src/DismissableLayerBranch.ts
+++ b/packages/components/dismissable-layer/src/DismissableLayerBranch.ts
@@ -1,6 +1,6 @@
 import { Primitive, primitiveProps } from '@oku-ui/primitive'
 import type {
-  ElementType,
+  OkuElement,
   PrimitiveProps,
 } from '@oku-ui/primitive'
 import { defineComponent, h, inject, ref, watchEffect } from 'vue'
@@ -13,7 +13,7 @@ import { DismissableLayerProvideKey } from './DismissableLayer'
  * ----------------------------------------------------------------------------------------------- */
 
 const BRANCH_NAME = 'OkuDismissableLayerBranch'
-export type DismissableLayerBranchIntrinsicElement = ElementType<'div'>
+export type DismissableLayerBranchNaviteElement = OkuElement<'div'>
 export type DismissableLayerBranchElement = HTMLDivElement
 
 export interface DismissableLayerBranchProps extends PrimitiveProps {}
@@ -58,5 +58,5 @@ const DismissableLayerBranch = defineComponent({
 export const OkuDismissableLayerBranch
 = DismissableLayerBranch as typeof DismissableLayerBranch &
 (new () => {
-  $props: Partial<DismissableLayerBranchElement>
+  $props: DismissableLayerBranchNaviteElement
 })
diff --git a/packages/components/dismissable-layer/src/stories/DismissableLayer.stories.ts b/packages/components/dismissable-layer/src/stories/DismissableLayer.stories.ts
index 42323611a..4c25bbf2d 100644
--- a/packages/components/dismissable-layer/src/stories/DismissableLayer.stories.ts
+++ b/packages/components/dismissable-layer/src/stories/DismissableLayer.stories.ts
@@ -28,7 +28,7 @@ type Story = StoryObj<typeof meta> & {
 export const Basic: Story = {
   args: {
     template: '#1',
-    // allShow: true,
+    // allshow: true,
   },
 
   render: (args: any) => ({
diff --git a/packages/components/focus-scope/src/focus-scope.ts b/packages/components/focus-scope/src/focus-scope.ts
index ba3ebf1e5..936ec33ae 100644
--- a/packages/components/focus-scope/src/focus-scope.ts
+++ b/packages/components/focus-scope/src/focus-scope.ts
@@ -1,5 +1,5 @@
 import { Primitive, primitiveProps } from '@oku-ui/primitive'
-import type { ElementType, PrimitiveProps } from '@oku-ui/primitive'
+import type { OkuElement, PrimitiveProps } from '@oku-ui/primitive'
 
 import { useComposedRefs, useForwardRef } from '@oku-ui/use-composable'
 
@@ -31,8 +31,8 @@ const EVENT_OPTIONS = { bubbles: false, cancelable: true }
 
 const FOCUS_SCOPE_NAME = 'OkuFocusScope'
 
-export type FocusScopeElement = ElementType<'div'>
-export type FocusIntrinsicElement = HTMLDivElement
+export type FocusScopeNativeElement = OkuElement<'div'>
+export type FocusNaviteElement = HTMLDivElement
 
 export interface FocusScopeProps extends PrimitiveProps {
   /**
@@ -93,7 +93,7 @@ const focusScope = defineComponent({
   },
   emits: focusScopeProps.emits,
   setup(props, { slots, attrs, emit }) {
-    const { ...focusScopeAttrs } = attrs as FocusScopeElement
+    const { ...focusScopeAttrs } = attrs as FocusScopeNativeElement
 
     const { loop, trapped, asChild } = toRefs(props)
 
@@ -304,4 +304,6 @@ const focusScope = defineComponent({
 })
 
 export const OkuFocusScope = focusScope as typeof focusScope &
-(new () => { $props: Partial<FocusScopeElement> })
+(new () => {
+  $props: FocusScopeNativeElement
+})
diff --git a/packages/components/focus-scope/src/stories/FocusScopeDemo.vue b/packages/components/focus-scope/src/stories/FocusScopeDemo.vue
index 6f0fab5c1..578270e81 100644
--- a/packages/components/focus-scope/src/stories/FocusScopeDemo.vue
+++ b/packages/components/focus-scope/src/stories/FocusScopeDemo.vue
@@ -5,7 +5,7 @@ import { OkuFocusScope } from '@oku-ui/focus-scope'
 
 export interface IFocusScopeProps extends FocusScopeProps {
   template?: '#1' | '#2' | '#3'
-  allShow?: boolean
+  allshow?: boolean
 }
 
 withDefaults(defineProps<IFocusScopeProps>(), {})
@@ -61,7 +61,7 @@ function onUnmountAutoFocus(event: Event) {
 <template>
   <div>
     <!-- #1 -->
-    <template v-if="template === '#1' || allShow">
+    <template v-if="template === '#1' || allshow">
       <div>
         <button type="button" class="px-4 py-2 bg-gray-200 hover:bg-gray-300 text-gray-800 text-sm font-medium rounded-md" @click="trapped = true">
           Trap
@@ -115,7 +115,7 @@ function onUnmountAutoFocus(event: Event) {
       </div>
     </template>
     <!-- #2 -->
-    <template v-if="template === '#2' || allShow">
+    <template v-if="template === '#2' || allshow">
       <div class="inline-flex flex-col gap-[10px]">
         <div>
           <button type="button" class="px-4 py-2 bg-gray-200 hover:bg-gray-300 text-gray-800 text-sm font-medium rounded-md" @click="trapped1 = true">
@@ -180,7 +180,7 @@ function onUnmountAutoFocus(event: Event) {
       </div>
     </template>
     <!-- #3 -->
-    <template v-if="template === '#3' || allShow">
+    <template v-if="template === '#3' || allshow">
       <div class="font-sans text-center">
         <h1>OkuFocusScope</h1>
 
diff --git a/packages/components/label/src/index.ts b/packages/components/label/src/index.ts
index 829306b82..8d5693c53 100644
--- a/packages/components/label/src/index.ts
+++ b/packages/components/label/src/index.ts
@@ -4,5 +4,5 @@ export {
 export type {
   LabelProps,
   LabelElement,
-  LabelIntrinsicElement,
+  LabelNaviteElement,
 } from './label'
diff --git a/packages/components/label/src/label.ts b/packages/components/label/src/label.ts
index 51178b4bb..a2fe95925 100644
--- a/packages/components/label/src/label.ts
+++ b/packages/components/label/src/label.ts
@@ -1,9 +1,9 @@
 import { defineComponent, h } from 'vue'
-import type { ElementType, PrimitiveProps } from '@oku-ui/primitive'
+import type { OkuElement, PrimitiveProps } from '@oku-ui/primitive'
 import { Primitive, primitiveProps } from '@oku-ui/primitive'
 import { useForwardRef } from '@oku-ui/use-composable'
 
-export type LabelIntrinsicElement = ElementType<'label'>
+export type LabelNaviteElement = OkuElement<'label'>
 export type LabelElement = HTMLLabelElement
 
 export interface LabelProps extends PrimitiveProps {}
@@ -17,7 +17,7 @@ const label = defineComponent({
     ...primitiveProps,
   },
   setup(props, { attrs, slots }) {
-    const { ...restAttrs } = attrs as LabelIntrinsicElement
+    const { ...restAttrs } = attrs as LabelNaviteElement
 
     const forwardedRef = useForwardRef()
 
@@ -42,5 +42,5 @@ const label = defineComponent({
 // TODO: https://github.com/vuejs/core/pull/7444 after delete
 export const OkuLabel = label as typeof label &
 (new () => {
-  $props: Partial<LabelElement>
+  $props: LabelNaviteElement
 })
diff --git a/packages/components/popover/src/index.ts b/packages/components/popover/src/index.ts
index 4a59a75fc..12d3ba3d2 100644
--- a/packages/components/popover/src/index.ts
+++ b/packages/components/popover/src/index.ts
@@ -16,7 +16,7 @@ export {
 
 export type {
   PopoverAnchorElement,
-  PopoverAnchorIntrinsicElement,
+  PopoverAnchorNaviteElement,
   PopoverAnchorProps,
 } from './popoverAnchor'
 
@@ -26,7 +26,7 @@ export {
 } from './popoverTrigger'
 
 export type {
-  PopoverTriggerIntrinsicElement,
+  PopoverTriggerNaviteElement,
   PopoverTriggerEmits,
   PopoverTriggerProps,
 } from './popoverTrigger'
@@ -54,7 +54,7 @@ export {
 } from './popoverClose'
 
 export type {
-  PopoverCloseIntrinsicElement,
+  PopoverCloseNaviteElement,
   PopoverCloseElement,
   PopoverCloseEmits,
 } from './popoverClose'
@@ -67,5 +67,5 @@ export {
 export type {
   PopoverArrowProps,
   PopoverArrowElement,
-  PopoverArrowIntrinsicElement,
+  PopoverArrowNaviteElement,
 } from './popoverArrow'
diff --git a/packages/components/popover/src/popoverAnchor.ts b/packages/components/popover/src/popoverAnchor.ts
index a1a296276..5d82c9afd 100644
--- a/packages/components/popover/src/popoverAnchor.ts
+++ b/packages/components/popover/src/popoverAnchor.ts
@@ -1,11 +1,12 @@
 import { defineComponent, h, toRefs, watchEffect } from 'vue'
 import { primitiveProps } from '@oku-ui/primitive'
 import { useForwardRef } from '@oku-ui/use-composable'
-import { OkuPopperAnchor, type PopperAnchorElement, type PopperAnchorIntrinsicElement, type PopperAnchorProps, popperAnchorProps } from '@oku-ui/popper'
+import { OkuPopperAnchor, popperAnchorProps } from '@oku-ui/popper'
+import type { PopperAnchorElement, PopperAnchorNaviteElement, PopperAnchorProps } from '@oku-ui/popper'
 import { scopePopoverProps } from './utils'
 import { usePopoverInject, usePopperScope } from './popover'
 
-export type PopoverAnchorIntrinsicElement = PopperAnchorIntrinsicElement
+export type PopoverAnchorNaviteElement = PopperAnchorNaviteElement
 export type PopoverAnchorElement = PopperAnchorElement
 
 export interface PopoverAnchorProps extends PopperAnchorProps { }
@@ -60,5 +61,5 @@ const popoverAnchor = defineComponent({
 // TODO: https://github.com/vuejs/core/pull/7444 after delete
 export const OkuPopoverAnchor = popoverAnchor as typeof popoverAnchor &
 (new () => {
-  $props: Partial<PopoverAnchorElement>
+  $props: PopoverAnchorNaviteElement
 })
diff --git a/packages/components/popover/src/popoverArrow.ts b/packages/components/popover/src/popoverArrow.ts
index 5ccb68f12..b69faad71 100644
--- a/packages/components/popover/src/popoverArrow.ts
+++ b/packages/components/popover/src/popoverArrow.ts
@@ -1,11 +1,11 @@
 import { defineComponent, h } from 'vue'
 import { primitiveProps } from '@oku-ui/primitive'
 import { useForwardRef } from '@oku-ui/use-composable'
-import { OkuPopperArrow, type PopperArrowElement, type PopperArrowIntrinsicElement, type PopperArrowProps, popperAnchorProps } from '@oku-ui/popper'
+import { OkuPopperArrow, type PopperArrowElement, type PopperArrowNaviteElement, type PopperArrowProps, popperAnchorProps } from '@oku-ui/popper'
 import { scopePopoverProps } from './utils'
 import { usePopperScope } from './popover'
 
-export type PopoverArrowIntrinsicElement = PopperArrowIntrinsicElement
+export type PopoverArrowNaviteElement = PopperArrowNaviteElement
 export type PopoverArrowElement = PopperArrowElement
 
 export interface PopoverArrowProps extends PopperArrowProps { }
@@ -49,5 +49,5 @@ const popoverArrow = defineComponent({
 // TODO: https://github.com/vuejs/core/pull/7444 after delete
 export const OkuPopoverArrow = popoverArrow as typeof popoverArrow &
 (new () => {
-  $props: Partial<PopoverArrowElement>
+  $props: PopoverArrowNaviteElement
 })
diff --git a/packages/components/popover/src/popoverClose.ts b/packages/components/popover/src/popoverClose.ts
index bc5804b87..617c19cdc 100644
--- a/packages/components/popover/src/popoverClose.ts
+++ b/packages/components/popover/src/popoverClose.ts
@@ -1,12 +1,12 @@
 import { defineComponent, h } from 'vue'
-import type { ElementType, PrimitiveProps } from '@oku-ui/primitive'
+import type { OkuElement, PrimitiveProps } from '@oku-ui/primitive'
 import { Primitive, primitiveProps } from '@oku-ui/primitive'
 import { useForwardRef } from '@oku-ui/use-composable'
 import { composeEventHandlers } from '@oku-ui/utils'
 import { scopePopoverProps } from './utils'
 import { usePopoverInject } from './popover'
 
-export type PopoverCloseIntrinsicElement = ElementType<'button'>
+export type PopoverCloseNaviteElement = OkuElement<'button'>
 export type PopoverCloseElement = HTMLButtonElement
 
 export interface PopoverCloseProps extends PrimitiveProps { }
@@ -53,5 +53,5 @@ const popoverClose = defineComponent({
 // TODO: https://github.com/vuejs/core/pull/7444 after delete
 export const OkuPopoverClose = popoverClose as typeof popoverClose &
 (new () => {
-  $props: Partial<PopoverCloseElement>
+  $props: PopoverCloseNaviteElement
 })
diff --git a/packages/components/popover/src/popoverContentImpl.ts b/packages/components/popover/src/popoverContentImpl.ts
index 28aafcf08..1862bdbfc 100644
--- a/packages/components/popover/src/popoverContentImpl.ts
+++ b/packages/components/popover/src/popoverContentImpl.ts
@@ -1,6 +1,6 @@
 import type { PropType } from 'vue'
 import { defineComponent, h, toRefs } from 'vue'
-import type { ElementType } from '@oku-ui/primitive'
+import type { OkuElement } from '@oku-ui/primitive'
 import { primitiveProps } from '@oku-ui/primitive'
 import { useForwardRef } from '@oku-ui/use-composable'
 import { OkuPopperContent, type PopperContentEmits, type PopperContentProps, popperContentProps } from '@oku-ui/popper'
@@ -10,7 +10,7 @@ import { useFocusGuards } from '@oku-ui/focus-guards'
 import { getState, scopePopoverProps } from './utils'
 import { usePopoverInject, usePopperScope } from './popover'
 
-export type PopoverContentImplIntrinsicElement = ElementType<'label'>
+export type PopoverContentImplNaviteElement = OkuElement<'label'>
 export type PopoverContentImplElement = HTMLLabelElement
 
 export interface PopoverContentImplProps
@@ -139,5 +139,5 @@ const popoverContentImpl = defineComponent({
 // TODO: https://github.com/vuejs/core/pull/7444 after delete
 export const OkuPopoverContentImpl = popoverContentImpl as typeof popoverContentImpl &
 (new () => {
-  $props: Partial<PopoverContentImplElement>
+  $props: PopoverContentImplNaviteElement
 })
diff --git a/packages/components/popover/src/popoverContentModal.ts b/packages/components/popover/src/popoverContentModal.ts
index fd0edf783..97e4adc63 100644
--- a/packages/components/popover/src/popoverContentModal.ts
+++ b/packages/components/popover/src/popoverContentModal.ts
@@ -5,12 +5,12 @@ import { hideOthers } from 'aria-hidden'
 import { OkuSlot } from '@oku-ui/slot'
 import { composeEventHandlers } from '@oku-ui/utils'
 import { OkuPopoverContentImpl, popoverContentImplProps } from './popoverContentImpl'
-import type { PopoverContentImplElement, PopoverContentImplEmits, PopoverContentImplIntrinsicElement, PopoverContentImplProps } from './popoverContentImpl'
+import type { PopoverContentImplElement, PopoverContentImplEmits, PopoverContentImplNaviteElement, PopoverContentImplProps } from './popoverContentImpl'
 import { scopePopoverProps } from './utils'
 import { usePopoverInject } from './popover'
 import { CONTENT_NAME } from './popoverContent'
 
-export type PopoverContentTypeIntrinsicElement = PopoverContentImplIntrinsicElement
+export type PopoverContentTypeNaviteElement = PopoverContentImplNaviteElement
 export type PopoverContentTypeElement = PopoverContentImplElement
 
 export interface PopoverContentTypeProps
@@ -93,5 +93,5 @@ const popoverContentModal = defineComponent({
 // TODO: https://github.com/vuejs/core/pull/7444 after delete
 export const OkuPopoverContentModal = popoverContentModal as typeof popoverContentModal &
 (new () => {
-  $props: Partial<PopoverContentTypeElement>
+  $props: PopoverContentTypeNaviteElement
 })
diff --git a/packages/components/popover/src/popoverContentNonModal.ts b/packages/components/popover/src/popoverContentNonModal.ts
index 603962209..385f2f055 100644
--- a/packages/components/popover/src/popoverContentNonModal.ts
+++ b/packages/components/popover/src/popoverContentNonModal.ts
@@ -7,7 +7,7 @@ import { OkuPopoverContentImpl } from './popoverContentImpl'
 import { scopePopoverProps } from './utils'
 import { usePopoverInject } from './popover'
 import { CONTENT_NAME } from './popoverContent'
-import type { PopoverContentTypeElement, PopoverContentTypeEmits } from './popoverContentModal'
+import type { PopoverContentTypeEmits, PopoverContentTypeNaviteElement } from './popoverContentModal'
 import { popoverContentTypeProps } from './popoverContentModal'
 
 const NAME = 'OkuPopoverContentNonModal'
@@ -82,5 +82,5 @@ const popoverContentNonModal = defineComponent({
 // TODO: https://github.com/vuejs/core/pull/7444 after delete
 export const OkuPopoverContentNonModal = popoverContentNonModal as typeof popoverContentNonModal &
 (new () => {
-  $props: Partial<PopoverContentTypeElement>
+  $props: PopoverContentTypeNaviteElement
 })
diff --git a/packages/components/popover/src/popoverPortal.ts b/packages/components/popover/src/popoverPortal.ts
index 1ea9272ff..0191b9fdf 100644
--- a/packages/components/popover/src/popoverPortal.ts
+++ b/packages/components/popover/src/popoverPortal.ts
@@ -67,5 +67,4 @@ const popoverPortal = defineComponent({
   },
 })
 
-// TODO: https://github.com/vuejs/core/pull/7444 after delete
 export const OkuPopoverPortal = popoverPortal
diff --git a/packages/components/popover/src/popoverTrigger.ts b/packages/components/popover/src/popoverTrigger.ts
index 403f402cf..36f034be4 100644
--- a/packages/components/popover/src/popoverTrigger.ts
+++ b/packages/components/popover/src/popoverTrigger.ts
@@ -1,5 +1,5 @@
 import { defineComponent, h, toRefs } from 'vue'
-import type { ElementType, PrimitiveProps } from '@oku-ui/primitive'
+import type { OkuElement, PrimitiveProps } from '@oku-ui/primitive'
 import { Primitive, primitiveProps } from '@oku-ui/primitive'
 import { useComposedRefs, useForwardRef } from '@oku-ui/use-composable'
 import { composeEventHandlers } from '@oku-ui/utils'
@@ -7,7 +7,7 @@ import { OkuPopperAnchor } from '@oku-ui/popper'
 import { getState, scopePopoverProps } from './utils'
 import { usePopoverInject, usePopperScope } from './popover'
 
-export type PopoverTriggerIntrinsicElement = ElementType<'button'>
+export type PopoverTriggerNaviteElement = OkuElement<'button'>
 export type PopoverTriggerElement = HTMLButtonElement
 
 export interface PopoverTriggerProps extends PrimitiveProps {}
@@ -82,5 +82,5 @@ const popoverTrigger = defineComponent({
 // TODO: https://github.com/vuejs/core/pull/7444 after delete
 export const OkuPopoverTrigger = popoverTrigger as typeof popoverTrigger &
 (new () => {
-  $props: Partial<PopoverTriggerElement>
+  $props: PopoverTriggerNaviteElement
 })
diff --git a/packages/components/popper/src/index.ts b/packages/components/popper/src/index.ts
index 3573ee87d..b9a426a2b 100644
--- a/packages/components/popper/src/index.ts
+++ b/packages/components/popper/src/index.ts
@@ -15,7 +15,7 @@ export {
 export type {
   PopperAnchorProps,
   PopperAnchorElement,
-  PopperAnchorIntrinsicElement,
+  PopperAnchorNaviteElement,
 } from './popperAnchor'
 
 export {
@@ -26,7 +26,7 @@ export {
 export type {
   PopperContentProps,
   PopperContentElement,
-  PopperContentIntrinsicElement,
+  PopperContentNaviteElement,
   PopperContentEmits,
 } from './popperContent'
 
@@ -38,5 +38,5 @@ export {
 export type {
   PopperArrowProps,
   PopperArrowElement,
-  PopperArrowIntrinsicElement,
+  PopperArrowNaviteElement,
 } from './popperArrow'
diff --git a/packages/components/popper/src/popperAnchor.ts b/packages/components/popper/src/popperAnchor.ts
index 7214b87ac..5a5eceb50 100644
--- a/packages/components/popper/src/popperAnchor.ts
+++ b/packages/components/popper/src/popperAnchor.ts
@@ -2,19 +2,18 @@ import type { PropType, Ref } from 'vue'
 import { defineComponent, h, ref, toRefs, watch } from 'vue'
 
 import type {
-  ElementType,
+  OkuElement,
   PrimitiveProps,
 } from '@oku-ui/primitive'
 import type { Measurable } from '@oku-ui/utils'
 import { Primitive, primitiveProps } from '@oku-ui/primitive'
 import { useComposedRefs, useForwardRef } from '@oku-ui/use-composable'
 import { usePopperInject } from './popper'
-import type { ScopePopper } from './utils'
 import { scopePopperProps } from './utils'
 
 const ANCHOR_NAME = 'OkuPopperAnchor'
 
-export type PopperAnchorIntrinsicElement = ElementType<'div'>
+export type PopperAnchorNaviteElement = OkuElement<'div'>
 export type PopperAnchorElement = HTMLDivElement
 
 export interface PopperAnchorProps extends PrimitiveProps {
@@ -42,7 +41,7 @@ const popperAnchor = defineComponent({
   },
   setup(props, { attrs, slots }) {
     const { virtualRef } = toRefs(props)
-    const { ...attrsAnchor } = attrs as PopperAnchorIntrinsicElement
+    const { ...attrsAnchor } = attrs as PopperAnchorNaviteElement
     const inject = usePopperInject(ANCHOR_NAME, props.scopeOkuPopper)
 
     const _ref = ref<HTMLDivElement | null>(null)
@@ -77,5 +76,5 @@ const popperAnchor = defineComponent({
 
 export const OkuPopperAnchor = popperAnchor as typeof popperAnchor &
 (new () => {
-  $props: ScopePopper<Partial<PopperAnchorElement>>
+  $props: PopperAnchorNaviteElement
 })
diff --git a/packages/components/popper/src/popperArrow.ts b/packages/components/popper/src/popperArrow.ts
index 2cf25db07..2f61bcc99 100644
--- a/packages/components/popper/src/popperArrow.ts
+++ b/packages/components/popper/src/popperArrow.ts
@@ -1,13 +1,13 @@
 import { computed, defineComponent, h, toRefs } from 'vue'
 
 import {
-  type ElementType,
+  type OkuElement,
 } from '@oku-ui/primitive'
 import type { ArrowElement, ArrowProps } from '@oku-ui/arrow'
 import { OkuArrow, arrowProps } from '@oku-ui/arrow'
 
 import { useForwardRef } from '@oku-ui/use-composable'
-import { type ScopePopper, type Side, scopePopperProps } from './utils'
+import { type Side, scopePopperProps } from './utils'
 import { usePopperContentInject } from './popperContent'
 
 const ARROW_NAME = 'OkuPopperArrow'
@@ -19,7 +19,7 @@ const OPPOSITE_SIDE: Record<Side, Side> = {
   left: 'right',
 }
 
-export type PopperArrowIntrinsicElement = ElementType<'svg'>
+export type PopperArrowNaviteElement = OkuElement<'svg'>
 export type PopperArrowElement = ArrowElement
 
 export interface PopperArrowProps extends ArrowProps {
@@ -79,13 +79,13 @@ const popperArrow = defineComponent({
         },
         [
           h(OkuArrow, {
-            ...attrs,
+            ...attrs as any,
             asChild: asChild.value,
             ref: forwardedRef,
             width: width.value,
             height: height.value,
             style: {
-              ...(attrs.style as any),
+              ...attrs.style as any,
               display: 'block',
             },
           }),
@@ -98,5 +98,5 @@ const popperArrow = defineComponent({
 // TODO: https://github.com/vuejs/core/pull/7444 after delete
 export const OkuPopperArrow = popperArrow as typeof popperArrow
 & (new () => {
-  $props: ScopePopper<Partial<PopperArrowIntrinsicElement>>
+  $props: PopperArrowNaviteElement
 })
diff --git a/packages/components/popper/src/popperContent.ts b/packages/components/popper/src/popperContent.ts
index e2706185d..f08cebca7 100644
--- a/packages/components/popper/src/popperContent.ts
+++ b/packages/components/popper/src/popperContent.ts
@@ -2,7 +2,7 @@ import type { PropType, Ref, StyleValue } from 'vue'
 import { computed, defineComponent, h, onMounted, ref, toRefs, watch, watchEffect } from 'vue'
 
 import { Primitive, primitiveProps } from '@oku-ui/primitive'
-import type { ElementType, PrimitiveProps } from '@oku-ui/primitive'
+import type { OkuElement, PrimitiveProps } from '@oku-ui/primitive'
 import { useComposedRefs, useForwardRef, useSize } from '@oku-ui/use-composable'
 import { autoUpdate, flip, arrow as floatingUIarrow, hide, limitShift, offset, shift, size, useFloating } from '@floating-ui/vue'
 import type {
@@ -11,7 +11,7 @@ import type {
   Padding,
   Placement,
 } from '@floating-ui/vue'
-import type { Align, ScopePopper, Side } from './utils'
+import type { Align, Side } from './utils'
 import { ALIGN_OPTIONS, SIDE_OPTIONS, getSideAndAlignFromPlacement, isNotNull, scopePopperProps, transformOrigin } from './utils'
 import { createPopperProvider, usePopperInject } from './popper'
 
@@ -29,7 +29,7 @@ export const [popperContentProvider, usePopperContentInject] = createPopperProvi
 
 type Boundary = Element | null
 
-export type PopperContentIntrinsicElement = ElementType<'div'>
+export type PopperContentNaviteElement = OkuElement<'div'>
 export type PopperContentElement = HTMLDivElement
 
 export interface PopperContentProps extends PrimitiveProps {
@@ -139,7 +139,7 @@ const PopperContent = defineComponent({
       updatePositionStrategy,
     } = toRefs(props)
 
-    const { ...attrsElement } = attrs as PopperContentIntrinsicElement
+    const { ...attrsElement } = attrs as PopperContentNaviteElement
 
     const inject = usePopperInject(CONTENT_NAME, props.scopeOkuPopper)
 
@@ -313,5 +313,5 @@ const PopperContent = defineComponent({
 // TODO: https://github.com/vuejs/core/pull/7444 after delete
 export const OkuPopperContent = PopperContent as typeof PopperContent
 & (new () => {
-  $props: ScopePopper<Partial<PopperContentIntrinsicElement>>
+  $props: PopperContentNaviteElement
 })
diff --git a/packages/components/popper/src/stories/PopperDemo.vue b/packages/components/popper/src/stories/PopperDemo.vue
index ee93dec17..917775765 100644
--- a/packages/components/popper/src/stories/PopperDemo.vue
+++ b/packages/components/popper/src/stories/PopperDemo.vue
@@ -10,7 +10,7 @@ import { ref } from 'vue'
 
 export interface IPopperProps {
   template?: '#1' | '#2' | '#3'
-  allShow?: boolean
+  allshow?: boolean
 }
 
 withDefaults(defineProps<IPopperProps>(), {})
diff --git a/packages/components/popper/src/stories/popper.stories.ts b/packages/components/popper/src/stories/popper.stories.ts
index 33c463b1e..252dd1e9f 100644
--- a/packages/components/popper/src/stories/popper.stories.ts
+++ b/packages/components/popper/src/stories/popper.stories.ts
@@ -27,7 +27,7 @@ type Story = StoryObj<typeof meta> & {
 export const Styled: Story = {
   args: {
     template: '#1',
-    allShow: true,
+    allshow: true,
   },
 
   render: (args: any) => ({
diff --git a/packages/components/portal/src/Portal.ts b/packages/components/portal/src/Portal.ts
index b26f54b3e..077c6d264 100644
--- a/packages/components/portal/src/Portal.ts
+++ b/packages/components/portal/src/Portal.ts
@@ -1,6 +1,6 @@
 import { Primitive, primitiveProps } from '@oku-ui/primitive'
 import type {
-  ElementType,
+  OkuElement,
   PrimitiveProps,
 
 } from '@oku-ui/primitive'
@@ -10,7 +10,7 @@ import { Teleport, defineComponent, h, toRefs } from 'vue'
 
 const PORTAL_NAME = 'OkuPortal'
 
-export type PortalElementIntrinsicElement = ElementType<'div'>
+export type PortalElementNaviteElement = OkuElement<'div'>
 export type PortalElement = HTMLDivElement
 
 export interface PortalProps extends PrimitiveProps {
@@ -59,5 +59,5 @@ const portal = defineComponent({
 
 export const OkuPortal = portal as typeof portal &
 (new () => {
-  $props: Partial<PortalElementIntrinsicElement>
+  $props: PortalElementNaviteElement
 })
diff --git a/packages/components/portal/src/index.ts b/packages/components/portal/src/index.ts
index 2b7a2843b..0ac75cbf4 100644
--- a/packages/components/portal/src/index.ts
+++ b/packages/components/portal/src/index.ts
@@ -5,5 +5,5 @@ export {
 export type {
   PortalProps,
   PortalElement,
-  PortalElementIntrinsicElement,
+  PortalElementNaviteElement,
 } from './Portal'
diff --git a/packages/components/portal/src/stories/PortalDemo.vue b/packages/components/portal/src/stories/PortalDemo.vue
index 6ac89598c..292603ed3 100644
--- a/packages/components/portal/src/stories/PortalDemo.vue
+++ b/packages/components/portal/src/stories/PortalDemo.vue
@@ -8,8 +8,6 @@ export interface IPortalProps extends PortalProps {
   allshow?: boolean
 }
 
-// const container = computed(() => getCurrentInstance()?.proxy?.$el);
-
 defineProps<IPortalProps>()
 
 const portalContainer = ref<HTMLDivElement | null>(null)
diff --git a/packages/components/progress/src/progress.ts b/packages/components/progress/src/progress.ts
index 72c7003d8..1200e4a14 100644
--- a/packages/components/progress/src/progress.ts
+++ b/packages/components/progress/src/progress.ts
@@ -1,11 +1,10 @@
-import type { ElementType } from '@oku-ui/primitive'
+import type { OkuElement } from '@oku-ui/primitive'
 import { Primitive, primitiveProps } from '@oku-ui/primitive'
 import type { Scope } from '@oku-ui/provide'
 import { createProvideScope } from '@oku-ui/provide'
 import type { PropType, Ref } from 'vue'
 import { computed, defineComponent, h, toRefs } from 'vue'
 import { useForwardRef } from '@oku-ui/use-composable'
-import type { ScopeProgress } from './utils'
 import {
   defaultGetValueLabel,
   getInvalidMaxError,
@@ -23,7 +22,7 @@ type ProgressInjectValue = {
   max: Ref<number>
 }
 
-export type ProgressIntrinsicElement = ElementType<'div'>
+export type ProgressNaviteElement = OkuElement<'div'>
 export type ProgressElement = HTMLDivElement
 
 export interface ProgressProps {
@@ -65,7 +64,7 @@ const progress = defineComponent({
   },
   setup(props, { attrs, slots }) {
     const { value, max, getValueLabel, scopeOkuProgress } = toRefs(props)
-    const { ...progressAttrs } = attrs as ProgressIntrinsicElement
+    const { ...progressAttrs } = attrs as ProgressNaviteElement
 
     const forwardedRef = useForwardRef()
 
@@ -126,5 +125,5 @@ const progress = defineComponent({
 // TODO: https://github.com/vuejs/core/pull/7444 after delete
 export const OkuProgress = progress as typeof progress &
 (new () => {
-  $props: ScopeProgress<Partial<ProgressElement>>
+  $props: ProgressNaviteElement
 })
diff --git a/packages/components/progress/src/progressIndicator.ts b/packages/components/progress/src/progressIndicator.ts
index 52309295f..393b068e6 100644
--- a/packages/components/progress/src/progressIndicator.ts
+++ b/packages/components/progress/src/progressIndicator.ts
@@ -1,17 +1,16 @@
 import { defineComponent, h } from 'vue'
 import {
-  type ElementType,
+  type OkuElement,
   type PrimitiveProps,
   primitiveProps,
 } from '@oku-ui/primitive'
 import { type Scope } from '@oku-ui/provide'
 import { useForwardRef } from '@oku-ui/use-composable'
-import type { ScopeProgress } from './utils'
 import { getProgressState, scopeProgressProps } from './utils'
 import { useProgressInject } from './progress'
 import { INDICATOR_NAME } from './constants'
 
-type ProgressIndicatorElementIntrinsicElement = ElementType<'div'>
+type ProgressIndicatorElementNaviteElement = OkuElement<'div'>
 export type ProgressIndicatorElement = HTMLDivElement
 
 export interface ProgressIndicatorProps extends PrimitiveProps {
@@ -32,7 +31,7 @@ const progressIndicator = defineComponent({
     ...scopeProgressProps,
   },
   setup(props, { attrs, slots }) {
-    const { ...indicatorAttrs } = attrs as ProgressIndicatorElementIntrinsicElement
+    const { ...indicatorAttrs } = attrs as ProgressIndicatorElementNaviteElement
 
     const forwardedRef = useForwardRef()
 
@@ -63,5 +62,5 @@ const progressIndicator = defineComponent({
 // TODO: https://github.com/vuejs/core/pull/7444 after delete
 export const OkuProgressIndicator = progressIndicator as typeof progressIndicator &
 (new () => {
-  $props: ScopeProgress<Partial<ProgressIndicatorElement>>
+  $props: ProgressIndicatorElementNaviteElement
 })
diff --git a/packages/components/radio-group/src/BubbleInput.ts b/packages/components/radio-group/src/BubbleInput.ts
index d3972364a..f69ed6a90 100644
--- a/packages/components/radio-group/src/BubbleInput.ts
+++ b/packages/components/radio-group/src/BubbleInput.ts
@@ -1,11 +1,11 @@
-import type { ElementType } from '@oku-ui/primitive'
+import type { OkuElement } from '@oku-ui/primitive'
 import { usePrevious, useSize } from '@oku-ui/use-composable'
 import { computed, defineComponent, h, ref, toRefs, watchEffect } from 'vue'
 import type { PropType } from 'vue'
 
 const BUBBLE_INPUT_NAME = 'OkuBubbleInput'
 
-export type BubbleInputIntrinsicElement = ElementType<'button'>
+export type BubbleInputNaviteElement = OkuElement<'button'>
 export type BubbleInputElement = Omit<HTMLButtonElement, 'checked'>
 
 export interface BubbleInputProps {
@@ -77,5 +77,5 @@ const bubbleInput = defineComponent({
 
 export const OkuBubbleInput = bubbleInput as typeof bubbleInput &
 (new () => {
-  $props: Partial<BubbleInputElement>
+  $props: BubbleInputNaviteElement
 })
diff --git a/packages/components/radio-group/src/Radio.ts b/packages/components/radio-group/src/Radio.ts
index 5499a1349..b152905a9 100644
--- a/packages/components/radio-group/src/Radio.ts
+++ b/packages/components/radio-group/src/Radio.ts
@@ -1,11 +1,10 @@
 import { Primitive, primitiveProps } from '@oku-ui/primitive'
-import type { ElementType } from '@oku-ui/primitive'
+import type { OkuElement } from '@oku-ui/primitive'
 import { createProvideScope } from '@oku-ui/provide'
 import { useComposedRefs, useForwardRef } from '@oku-ui/use-composable'
 import { computed, defineComponent, h, mergeProps, ref, toRefs, unref } from 'vue'
 import type { PropType, Ref } from 'vue'
 import { composeEventHandlers } from '@oku-ui/utils'
-import type { ScopeRadio } from './utils'
 import { getState, scopeRadioProps } from './utils'
 import { OkuBubbleInput } from './BubbleInput'
 
@@ -22,7 +21,7 @@ export const useRadioScope = createRadioScope()
 
 export const [radioProvider, useRadioInject] = createRadioProvide<RadioProvideValue>(RADIO_NAME)
 
-export type RadioIntrinsicIntrinsicElement = ElementType<'button'>
+export type RadioIntrinsicNaviteElement = OkuElement<'button'>
 export type RadioElement = HTMLButtonElement
 
 export interface RadioProps {
@@ -89,7 +88,7 @@ const Radio = defineComponent({
       ...radioProps
     } = toRefs(props)
 
-    const radioAttrs = attrs as RadioIntrinsicIntrinsicElement
+    const radioAttrs = attrs as RadioIntrinsicNaviteElement
 
     const hasConsumerStoppedPropagationRef = ref(false)
     const buttonRef = ref<HTMLButtonElement | null>(null)
@@ -149,7 +148,7 @@ const Radio = defineComponent({
         // of the button.
         style: {
           transform: 'translateX(-100%)',
-        } as CSSStyleDeclaration,
+        },
       }),
     ]
   },
@@ -157,5 +156,5 @@ const Radio = defineComponent({
 
 export const OkuRadio = Radio as typeof Radio &
 (new () => {
-  $props: ScopeRadio<Partial<RadioElement>>
+  $props: RadioIntrinsicNaviteElement
 })
diff --git a/packages/components/radio-group/src/RadioGroup.ts b/packages/components/radio-group/src/RadioGroup.ts
index 1835e8bab..29f9cdc9a 100644
--- a/packages/components/radio-group/src/RadioGroup.ts
+++ b/packages/components/radio-group/src/RadioGroup.ts
@@ -1,4 +1,4 @@
-import type { ElementType, PrimitiveProps } from '@oku-ui/primitive'
+import type { OkuElement, PrimitiveProps } from '@oku-ui/primitive'
 import { Primitive, primitiveProps } from '@oku-ui/primitive'
 import { computed, defineComponent, h, mergeProps, toRefs, useModel } from 'vue'
 import type { ComputedRef, PropType, Ref } from 'vue'
@@ -9,7 +9,6 @@ import { useDirection } from '@oku-ui/direction'
 import type { RovingFocusGroupProps } from '@oku-ui/roving-focus'
 
 import { type RadioProps, createRadioScope } from './Radio'
-import type { ScopeRadioGroup } from './utils'
 import { scopeRadioGroupProps } from './utils'
 
 const RADIO_GROUP_NAME = 'OkuRadioGroup'
@@ -24,7 +23,7 @@ export const [RadioGroupProvider, useRadioGroupInject]
 
 export const useRovingFocusGroupScope = createRovingFocusGroupScope()
 
-export type RadioGroupIntrinsicElement = ElementType<'div'>
+export type RadioGroupNaviteElement = OkuElement<'div'>
 export type RadioElement = HTMLDivElement
 
 export interface RadioGroupProvideValue {
@@ -179,5 +178,5 @@ const RadioGroup = defineComponent({
 
 export const OkuRadioGroup = RadioGroup as typeof RadioGroup &
 (new () => {
-  $props: ScopeRadioGroup<Partial<RadioElement>>
+  $props: RadioGroupNaviteElement
 })
diff --git a/packages/components/radio-group/src/RadioGroupIndicator.ts b/packages/components/radio-group/src/RadioGroupIndicator.ts
index 0c4867406..c03b59bde 100644
--- a/packages/components/radio-group/src/RadioGroupIndicator.ts
+++ b/packages/components/radio-group/src/RadioGroupIndicator.ts
@@ -3,13 +3,12 @@ import { useForwardRef } from '@oku-ui/use-composable'
 import type { RadioElement } from './Radio'
 import { useRadioScope } from './Radio'
 import { OkuRadioIndicator, type RadioIndicatorElement, type RadioIndicatorProps } from './RadioIndicator'
-import type { ScopeRadioGroup } from './utils'
 import { scopeRadioGroupProps } from './utils'
 import { radioGroupProps } from './RadioGroup'
 
 const INDICATOR_NAME = 'OkuRadioGroupIndicator'
 
-export type RadioGroupIndicatorIntrinsicElement = RadioIndicatorElement
+export type RadioGroupIndicatorNaviteElement = RadioIndicatorElement
 export type RadioGroupIndicatorElement = RadioElement
 
 export interface RadioGroupIndicatorProps extends RadioIndicatorProps {}
@@ -40,5 +39,5 @@ const RadioGroupIndicator = defineComponent({
 
 export const OkuRadioGroupIndicator = RadioGroupIndicator as typeof RadioGroupIndicator &
 (new () => {
-  $props: ScopeRadioGroup<Partial<RadioGroupIndicatorElement>>
+  $props: RadioGroupIndicatorNaviteElement
 })
diff --git a/packages/components/radio-group/src/RadioGroupItem.ts b/packages/components/radio-group/src/RadioGroupItem.ts
index f35458ceb..0af2205e4 100644
--- a/packages/components/radio-group/src/RadioGroupItem.ts
+++ b/packages/components/radio-group/src/RadioGroupItem.ts
@@ -1,19 +1,18 @@
-import { computed, defineComponent, h, mergeProps, onMounted, onUnmounted, ref, toRefs } from 'vue'
+import { computed, defineComponent, h, mergeProps, onBeforeUnmount, onMounted, ref, toRefs } from 'vue'
 import { useComposedRefs, useForwardRef } from '@oku-ui/use-composable'
 
 import { OkuRovingFocusGroupItem } from '@oku-ui/roving-focus'
 import { composeEventHandlers } from '@oku-ui/utils'
 import { propsOmit } from '@oku-ui/primitive'
 import { useRadioGroupInject, useRovingFocusGroupScope } from './RadioGroup'
-import type { RadioGroupIntrinsicElement } from './RadioGroup'
+import type { RadioGroupNaviteElement } from './RadioGroup'
 import type { RadioElement, RadioEmits, RadioProps } from './Radio'
 import { OkuRadio, radioProps, useRadioScope } from './Radio'
-import type { ScopeRadioGroup } from './utils'
 import { ARROW_KEYS, scopeRadioGroupProps } from './utils'
 
 const ITEM_NAME = 'OkuRadioGroupItem'
 
-export type RadioGroupItemIntrinsicElement = RadioGroupIntrinsicElement
+export type RadioGroupItemNaviteElement = RadioGroupNaviteElement
 export type RadioGroupItemElement = HTMLDivElement
 
 export interface RadioGroupItemProps extends Omit<RadioProps, | 'name'> {
@@ -79,7 +78,7 @@ const RadioGroupItem = defineComponent({
       document.addEventListener('keyup', handleKeyUp)
     })
 
-    onUnmounted(() => {
+    onBeforeUnmount(() => {
       document.removeEventListener('keydown', handleKeyDown)
       document.removeEventListener('keyup', handleKeyUp)
     })
@@ -133,5 +132,5 @@ const RadioGroupItem = defineComponent({
 
 export const OkuRadioGroupItem = RadioGroupItem as typeof RadioGroupItem &
 (new () => {
-  $props: ScopeRadioGroup<Partial<RadioGroupItemIntrinsicElement>>
+  $props: RadioGroupItemNaviteElement
 })
diff --git a/packages/components/radio-group/src/RadioIndicator.ts b/packages/components/radio-group/src/RadioIndicator.ts
index 555de2763..3a6cc964f 100644
--- a/packages/components/radio-group/src/RadioIndicator.ts
+++ b/packages/components/radio-group/src/RadioIndicator.ts
@@ -1,16 +1,15 @@
 import { Primitive, primitiveProps } from '@oku-ui/primitive'
-import type { ElementType, PrimitiveProps } from '@oku-ui/primitive'
+import type { OkuElement, PrimitiveProps } from '@oku-ui/primitive'
 import { computed, defineComponent, h, toRefs } from 'vue'
 import type { PropType } from 'vue'
 import { OkuPresence } from '@oku-ui/presence'
 import { useForwardRef } from '@oku-ui/use-composable'
 import { useRadioInject } from './Radio'
-import type { ScopeRadio } from './utils'
 import { getState, scopeRadioProps } from './utils'
 
 const INDICATOR_NAME = 'OkuRadioIndicator'
 
-export type RadioIndicatorIntrinsicElement = ElementType<'span'>
+export type RadioIndicatorNaviteElement = OkuElement<'span'>
 export type RadioIndicatorElement = HTMLSpanElement
 
 export interface RadioIndicatorProps extends PrimitiveProps {
@@ -62,5 +61,5 @@ const RadioIndicator = defineComponent({
 
 export const OkuRadioIndicator = RadioIndicator as typeof RadioIndicator &
 (new () => {
-  $props: ScopeRadio<Partial<RadioIndicatorIntrinsicElement>>
+  $props: RadioIndicatorNaviteElement
 })
diff --git a/packages/components/radio-group/src/index.ts b/packages/components/radio-group/src/index.ts
index 8b002831e..524fe119f 100644
--- a/packages/components/radio-group/src/index.ts
+++ b/packages/components/radio-group/src/index.ts
@@ -6,7 +6,7 @@ export {
 
 export type {
   RadioElement,
-  RadioGroupIntrinsicElement,
+  RadioGroupNaviteElement,
   RadioGroupProps,
   RadioGroupEmits,
 } from './RadioGroup'
@@ -30,7 +30,7 @@ export {
 export type {
   RadioGroupIndicatorElement,
   RadioGroupIndicatorProps,
-  RadioGroupIndicatorIntrinsicElement,
+  RadioGroupIndicatorNaviteElement,
 } from './RadioGroupIndicator'
 
 export {
diff --git a/packages/components/radio-group/src/stories/tabs.stories.ts b/packages/components/radio-group/src/stories/tabs.stories.ts
index cf2bb29f6..efe8c7d23 100644
--- a/packages/components/radio-group/src/stories/tabs.stories.ts
+++ b/packages/components/radio-group/src/stories/tabs.stories.ts
@@ -22,7 +22,7 @@ type Story = StoryObj<typeof meta>
 export const Styled: Story = {
   args: {
     template: '#1',
-    // allShow: true,
+    // allshow: true,
   },
   render: (args: any) => ({
     components: { OkuTabsComponent },
diff --git a/packages/components/roving-focus/src/RovingFocusGroup.ts b/packages/components/roving-focus/src/RovingFocusGroup.ts
index 0c0bef370..56d879286 100644
--- a/packages/components/roving-focus/src/RovingFocusGroup.ts
+++ b/packages/components/roving-focus/src/RovingFocusGroup.ts
@@ -6,7 +6,7 @@ import { defineComponent, h, mergeProps, toRefs } from 'vue'
 import { useForwardRef } from '@oku-ui/use-composable'
 import { primitiveProps } from '@oku-ui/primitive'
 import { OkuRovingFocusGroupImpl, rovingFocusGroupImplProps } from './RovingFocusGroupImpl'
-import type { RovingFocusGroupImplElement, RovingFocusGroupImplIntrinsicElement, RovingFocusGroupImplProps } from './RovingFocusGroupImpl'
+import type { RovingFocusGroupImplElement, RovingFocusGroupImplNaviteElement, RovingFocusGroupImplProps } from './RovingFocusGroupImpl'
 import { scopedProps } from './types'
 import type { Direction, Orientation } from './utils'
 
@@ -65,7 +65,7 @@ type RovingProvideValue = {
 export const [rovingFocusProvider, useRovingFocusInject]
   = createRovingFocusGroupProvide<RovingProvideValue>(GROUP_NAME)
 
-export type RovingFocusGroupIntrinsicElement = RovingFocusGroupImplIntrinsicElement
+export type RovingFocusGroupNaviteElement = RovingFocusGroupImplNaviteElement
 export type RovingFocusGroupElement = RovingFocusGroupImplElement
 
 export interface RovingFocusGroupProps extends RovingFocusGroupImplProps { }
@@ -127,7 +127,7 @@ const rovingFocusGroup = defineComponent({
 // TODO: https://github.com/vuejs/core/pull/7444 after delete
 const OkuRovingFocusGroup = rovingFocusGroup as typeof rovingFocusGroup &
 (new () => {
-  $props: Partial<RovingFocusGroupElement>
+  $props: RovingFocusGroupNaviteElement
 })
 
 export {
diff --git a/packages/components/roving-focus/src/RovingFocusGroupImpl.ts b/packages/components/roving-focus/src/RovingFocusGroupImpl.ts
index af1a0363f..f1ba38488 100644
--- a/packages/components/roving-focus/src/RovingFocusGroupImpl.ts
+++ b/packages/components/roving-focus/src/RovingFocusGroupImpl.ts
@@ -2,11 +2,11 @@ import type { ComputedRef, PropType } from 'vue'
 import { computed, defineComponent, h, mergeProps, ref, toRefs, unref, watchEffect } from 'vue'
 import { useCallbackRef, useComposedRefs, useControllable, useForwardRef } from '@oku-ui/use-composable'
 
-import type { ElementType } from '@oku-ui/primitive'
+import type { OkuElement } from '@oku-ui/primitive'
 
 import { Primitive, primitiveProps } from '@oku-ui/primitive'
 import { composeEventHandlers } from '@oku-ui/utils'
-import type { RovingFocusGroupOptions, ScopeRovingFocus } from './utils'
+import type { RovingFocusGroupOptions } from './utils'
 import { focusFirst, rovingFocusGroupOptionsProps } from './utils'
 import { rovingFocusProvider, useCollection } from './RovingFocusGroup'
 import { scopedProps } from './types'
@@ -14,7 +14,7 @@ import { scopedProps } from './types'
 const ENTRY_FOCUS = 'rovingFocusGroup.onEntryFocus'
 const EVENT_OPTIONS = { bubbles: false, cancelable: true }
 
-export type RovingFocusGroupImplIntrinsicElement = ElementType<'div'>
+export type RovingFocusGroupImplNaviteElement = OkuElement<'div'>
 export type RovingFocusGroupImplElement = HTMLDivElement
 
 export interface RovingFocusGroupImplProps extends RovingFocusGroupOptions {
@@ -60,7 +60,7 @@ const RovingFocusGroupImpl = defineComponent({
   },
   emits: rovingFocusGroupImplProps.emits,
   setup(props, { attrs, slots, emit }) {
-    const _attrs = attrs as Omit<RovingFocusGroupImplIntrinsicElement, 'dir'>
+    const _attrs = attrs as Omit<RovingFocusGroupImplNaviteElement, 'dir'>
     const {
       orientation,
       loop,
@@ -175,5 +175,5 @@ const RovingFocusGroupImpl = defineComponent({
 // TODO: https://github.com/vuejs/core/pull/7444 after delete
 export const OkuRovingFocusGroupImpl = RovingFocusGroupImpl as typeof RovingFocusGroupImpl &
 (new () => {
-  $props: ScopeRovingFocus<Partial<RovingFocusGroupImplElement>>
+  $props: RovingFocusGroupImplNaviteElement
 })
diff --git a/packages/components/roving-focus/src/RovingFocusGroupItem.ts b/packages/components/roving-focus/src/RovingFocusGroupItem.ts
index bf03dcbf6..e697a6983 100644
--- a/packages/components/roving-focus/src/RovingFocusGroupItem.ts
+++ b/packages/components/roving-focus/src/RovingFocusGroupItem.ts
@@ -2,15 +2,14 @@ import { computed, defineComponent, h, nextTick, toRefs, watchEffect } from 'vue
 import { useForwardRef, useId } from '@oku-ui/use-composable'
 
 import { Primitive, primitiveProps } from '@oku-ui/primitive'
-import type { ElementType, PrimitiveProps } from '@oku-ui/primitive'
+import type { OkuElement, PrimitiveProps } from '@oku-ui/primitive'
 
 import { composeEventHandlers } from '@oku-ui/utils'
 import { CollectionItemSlot, useCollection, useRovingFocusInject } from './RovingFocusGroup'
-import type { ScopeRovingFocus } from './utils'
 import { focusFirst, getFocusIntent, wrapArray } from './utils'
 import { scopedProps } from './types'
 
-export type RovingFocusGroupItemIntrinsicElement = ElementType<'span'>
+export type RovingFocusGroupItemNaviteElement = OkuElement<'span'>
 export type RovingFocusGroupItemElement = HTMLSpanElement
 
 export interface RovingFocusItemProps extends PrimitiveProps {
@@ -170,5 +169,5 @@ const rovingFocusGroupItem = defineComponent({
 // TODO: https://github.com/vuejs/core/pull/7444 after delete
 export const OkuRovingFocusGroupItem = rovingFocusGroupItem as typeof rovingFocusGroupItem &
 (new () => {
-  $props: ScopeRovingFocus<Partial<RovingFocusGroupItemElement>>
+  $props: RovingFocusGroupItemNaviteElement
 })
diff --git a/packages/components/roving-focus/src/index.ts b/packages/components/roving-focus/src/index.ts
index 963c5308d..074e9553e 100644
--- a/packages/components/roving-focus/src/index.ts
+++ b/packages/components/roving-focus/src/index.ts
@@ -12,7 +12,7 @@ export {
 export type {
   RovingFocusGroupItemElement,
   RovingFocusGroupItemEmits,
-  RovingFocusGroupItemIntrinsicElement,
+  RovingFocusGroupItemNaviteElement,
   RovingFocusItemProps,
 } from './RovingFocusGroupItem'
 
diff --git a/packages/components/separator/src/index.ts b/packages/components/separator/src/index.ts
index 0fa0b9108..424d4b9ef 100644
--- a/packages/components/separator/src/index.ts
+++ b/packages/components/separator/src/index.ts
@@ -6,5 +6,5 @@ export {
 export type {
   SeparatorProps,
   SeparatorElement,
-  SeparatorIntrinsicElement,
+  SeparatorNaviteElement,
 } from './separator'
diff --git a/packages/components/separator/src/separator.ts b/packages/components/separator/src/separator.ts
index 25f19d502..5bc34f997 100644
--- a/packages/components/separator/src/separator.ts
+++ b/packages/components/separator/src/separator.ts
@@ -1,6 +1,6 @@
 import type { PropType } from 'vue'
 import { computed, defineComponent, h } from 'vue'
-import type { ElementType, PrimitiveProps } from '@oku-ui/primitive'
+import type { OkuElement, PrimitiveProps } from '@oku-ui/primitive'
 import { Primitive, primitiveProps } from '@oku-ui/primitive'
 import { useForwardRef } from '@oku-ui/use-composable'
 
@@ -10,7 +10,7 @@ const ORIENTATIONS = ['horizontal', 'vertical'] as const
 
 type Orientation = typeof ORIENTATIONS[number]
 
-export type SeparatorIntrinsicElement = ElementType<'div'>
+export type SeparatorNaviteElement = OkuElement<'div'>
 export type SeparatorElement = HTMLDivElement
 
 export interface SeparatorProps extends PrimitiveProps {
@@ -53,7 +53,7 @@ const separator = defineComponent({
     ...separatorProps.props,
   },
   setup(props, { attrs, slots }) {
-    const { ...separatorAttrs } = attrs as SeparatorIntrinsicElement
+    const { ...separatorAttrs } = attrs as SeparatorNaviteElement
     const orientation = computed(() => ORIENTATIONS.includes(props.orientation!) ? props.orientation : DEFAULT_ORIENTATION)
     // `aria-orientation` defaults to `horizontal` so we only need it if `orientation` is vertical
     const ariaOrientation = orientation.value === 'vertical' ? orientation : undefined
@@ -87,5 +87,5 @@ const separator = defineComponent({
 // TODO: https://github.com/vuejs/core/pull/7444 after delete
 export const OkuSeparator = separator as typeof separator &
 (new () => {
-  $props: Partial<SeparatorElement>
+  $props: SeparatorNaviteElement
 })
diff --git a/packages/components/slider/src/bubbleInput.ts b/packages/components/slider/src/bubbleInput.ts
index d923b123b..e19fc3702 100644
--- a/packages/components/slider/src/bubbleInput.ts
+++ b/packages/components/slider/src/bubbleInput.ts
@@ -2,9 +2,9 @@ import { defineComponent, h, ref, toRefs, watchEffect } from 'vue'
 
 import { usePrevious } from '@oku-ui/use-composable'
 
-import type { ElementType, PrimitiveProps } from '@oku-ui/primitive'
+import type { OkuElement, PrimitiveProps } from '@oku-ui/primitive'
 
-export type BubbleInputIntrinsicElement = ElementType<'input'>
+export type BubbleInputNaviteElement = OkuElement<'input'>
 
 export type BubbleInputElement = Partial<Omit<HTMLInputElement, 'checked'>>
 
@@ -57,5 +57,5 @@ const bubbleInput = defineComponent({
 
 export const OkuBubbleInput = bubbleInput as typeof bubbleInput
 & (new () => {
-  $props: Partial<BubbleInputElement>
+  $props: BubbleInputNaviteElement
 })
diff --git a/packages/components/slider/src/index.ts b/packages/components/slider/src/index.ts
index fd6182b87..45c7ce00c 100644
--- a/packages/components/slider/src/index.ts
+++ b/packages/components/slider/src/index.ts
@@ -4,7 +4,7 @@ export {
 } from './slider'
 
 export type {
-  SliderIntrinsicElement,
+  SliderNaviteElement,
   SliderPropsEmits,
   SliderProps,
 } from './slider'
@@ -16,7 +16,7 @@ export {
 
 export type {
   SliderTrackElement,
-  SliderTrackIntrinsicElement,
+  SliderTrackNaviteElement,
   SliderTrackProps,
 } from './sliderTrack'
 
@@ -27,7 +27,7 @@ export {
 
 export type {
   SliderRangeElement,
-  SliderRangeIntrinsicElement,
+  SliderRangeNaviteElement,
   SliderRangeProps,
 } from './sliderRange'
 
@@ -38,6 +38,6 @@ export {
 
 export type {
   SliderThumbElement,
-  SliderThumbIntrinsicElement,
+  SliderThumbNaviteElement,
   SliderThumbProps,
 } from './sliderThumb'
diff --git a/packages/components/slider/src/slider.ts b/packages/components/slider/src/slider.ts
index 82463b6fb..81d9fb6e2 100644
--- a/packages/components/slider/src/slider.ts
+++ b/packages/components/slider/src/slider.ts
@@ -6,8 +6,8 @@ import { useComposedRefs, useControllable, useForwardRef } from '@oku-ui/use-com
 import { clamp } from '@oku-ui/utils'
 import { ARROW_KEYS, CollectionProvider, CollectionSlot, type Direction, PAGE_KEYS, SLIDER_NAME, getClosestValueIndex, getDecimalCount, getNextSortedValues, hasMinStepsBetweenValues, roundValue, scopeSliderProps, sliderProvider } from './utils'
 import type { SliderThumbElement } from './sliderThumb'
-import { OkuSliderHorizontal, type SliderHorizontalElement, type SliderHorizontalIntrinsicElement, type SliderOrientationPrivateProps, sliderHorizontalProps } from './sliderHorizontal'
-import type { SliderVerticalElement, SliderVerticalIntrinsicElement, SliderVerticalProps } from './sliderVertical'
+import { OkuSliderHorizontal, type SliderHorizontalElement, type SliderHorizontalNaviteElement, type SliderOrientationPrivateProps, sliderHorizontalProps } from './sliderHorizontal'
+import type { SliderVerticalElement, SliderVerticalNaviteElement, SliderVerticalProps } from './sliderVertical'
 import { OkuSliderVertical, sliderVerticalProps } from './sliderVertical'
 import { OkuBubbleInput } from './bubbleInput'
 
@@ -15,7 +15,7 @@ interface SliderHorizontalProps extends SliderOrientationPrivateProps {
   dir?: Direction
 }
 
-export type SliderIntrinsicElement = SliderHorizontalIntrinsicElement | SliderVerticalIntrinsicElement
+export type SliderNaviteElement = SliderHorizontalNaviteElement | SliderVerticalNaviteElement
 export type SliderElement = SliderHorizontalElement | SliderVerticalElement
 
 export interface SliderProps extends Omit<
@@ -303,5 +303,5 @@ const slider = defineComponent({
 // TODO: https://github.com/vuejs/core/pull/7444 after delete
 export const OkuSlider = slider as typeof slider &
 (new () => {
-  $props: Partial<SliderElement>
+  $props: SliderNaviteElement
 })
diff --git a/packages/components/slider/src/sliderHorizontal.ts b/packages/components/slider/src/sliderHorizontal.ts
index ed017b474..6ee3f0bcc 100644
--- a/packages/components/slider/src/sliderHorizontal.ts
+++ b/packages/components/slider/src/sliderHorizontal.ts
@@ -3,11 +3,11 @@ import { computed, defineComponent, h, ref, toRefs } from 'vue'
 import { propsOmit } from '@oku-ui/primitive'
 import { useComposedRefs, useForwardRef } from '@oku-ui/use-composable'
 import { useDirection } from '@oku-ui/direction'
-import { OkuSliderImpl, type SliderImplElement, type SliderImplEmits, type SliderImplIntrinsicElement, type SliderImplProps, sliderImplProps } from './sliderImpl'
+import { OkuSliderImpl, type SliderImplElement, type SliderImplEmits, type SliderImplNaviteElement, type SliderImplProps, sliderImplProps } from './sliderImpl'
 import type { Direction } from './utils'
 import { BACK_KEYS, linearScale, scopeSliderProps, sliderOrientationProvider } from './utils'
 
-export type SliderHorizontalIntrinsicElement = SliderImplIntrinsicElement
+export type SliderHorizontalNaviteElement = SliderImplNaviteElement
 export type SliderHorizontalElement = SliderImplElement
 
 const NAME = 'OkuSliderHorizontal'
@@ -174,5 +174,5 @@ const sliderHorizontal = defineComponent({
 // TODO: https://github.com/vuejs/core/pull/7444 after delete
 export const OkuSliderHorizontal = sliderHorizontal as typeof sliderHorizontal &
 (new () => {
-  $props: Partial<SliderHorizontalElement>
+  $props: SliderHorizontalNaviteElement
 })
diff --git a/packages/components/slider/src/sliderImpl.ts b/packages/components/slider/src/sliderImpl.ts
index f217db302..dc9d11cf3 100644
--- a/packages/components/slider/src/sliderImpl.ts
+++ b/packages/components/slider/src/sliderImpl.ts
@@ -1,12 +1,11 @@
 import { defineComponent, h, toRefs } from 'vue'
-import type { ElementType, PrimitiveProps } from '@oku-ui/primitive'
+import type { OkuElement, PrimitiveProps } from '@oku-ui/primitive'
 import { Primitive, primitiveProps } from '@oku-ui/primitive'
 import { useForwardRef } from '@oku-ui/use-composable'
 import { composeEventHandlers } from '@oku-ui/utils'
-import type { ScopeSlider } from './utils'
 import { ARROW_KEYS, PAGE_KEYS, SLIDER_NAME, scopeSliderProps, useSliderInject } from './utils'
 
-export type SliderImplIntrinsicElement = ElementType<'span'>
+export type SliderImplNaviteElement = OkuElement<'span'>
 export type SliderImplElement = HTMLSpanElement
 
 export type SliderImplPrivateEmits = {
@@ -139,5 +138,5 @@ const sliderImpl = defineComponent({
 // TODO: https://github.com/vuejs/core/pull/7444 after delete
 export const OkuSliderImpl = sliderImpl as typeof sliderImpl &
 (new () => {
-  $props: ScopeSlider<Partial<SliderImplElement>>
+  $props: SliderImplNaviteElement
 })
diff --git a/packages/components/slider/src/sliderRange.ts b/packages/components/slider/src/sliderRange.ts
index 9c0b591eb..05240f78c 100644
--- a/packages/components/slider/src/sliderRange.ts
+++ b/packages/components/slider/src/sliderRange.ts
@@ -1,12 +1,12 @@
 import { computed, defineComponent, h, ref, toRefs } from 'vue'
-import type { ElementType, PrimitiveProps } from '@oku-ui/primitive'
+import type { OkuElement, PrimitiveProps } from '@oku-ui/primitive'
 import { Primitive, primitiveProps } from '@oku-ui/primitive'
 import { useComposedRefs, useForwardRef } from '@oku-ui/use-composable'
 import { convertValueToPercentage, scopeSliderProps, useSliderInject, useSliderOrientationInject } from './utils'
 
 const RANGE_NAME = 'OkuSliderRange'
 
-export type SliderRangeIntrinsicElement = ElementType<'span'>
+export type SliderRangeNaviteElement = OkuElement<'span'>
 
 export type SliderRangeElement = HTMLSpanElement
 
@@ -66,5 +66,5 @@ const sliderRange = defineComponent({
 // TODO: https://github.com/vuejs/core/pull/7444 after delete
 export const OkuSliderRange = sliderRange as typeof sliderRange &
 (new () => {
-  $props: Partial<SliderRangeElement>
+  $props: SliderRangeNaviteElement
 })
diff --git a/packages/components/slider/src/sliderThumb.ts b/packages/components/slider/src/sliderThumb.ts
index 6a65f5736..22dc4d01f 100644
--- a/packages/components/slider/src/sliderThumb.ts
+++ b/packages/components/slider/src/sliderThumb.ts
@@ -1,12 +1,12 @@
 import { computed, defineComponent, h, ref } from 'vue'
 import { propsOmit } from '@oku-ui/primitive'
 import { useComposedRefs, useForwardRef } from '@oku-ui/use-composable'
-import { OkuSliderThumbImpl, type SliderThumbImplElement, type SliderThumbImplIntrinsicElement, type SliderThumbImplProps, sliderThumbImplProps } from './sliderThumbImpl'
+import { OkuSliderThumbImpl, type SliderThumbImplElement, type SliderThumbImplNaviteElement, type SliderThumbImplProps, sliderThumbImplProps } from './sliderThumbImpl'
 import { scopeSliderProps, useCollection } from './utils'
 
 export const THUMB_NAME = 'OkuSliderThumb'
 
-export type SliderThumbIntrinsicElement = SliderThumbImplIntrinsicElement
+export type SliderThumbNaviteElement = SliderThumbImplNaviteElement
 export type SliderThumbElement = SliderThumbImplElement
 
 export interface SliderThumbProps extends Omit<SliderThumbImplProps, 'index'> {}
@@ -50,5 +50,5 @@ const sliderThumb = defineComponent({
 // TODO: https://github.com/vuejs/core/pull/7444 after delete
 export const OkuSliderThumb = sliderThumb as typeof sliderThumb &
 (new () => {
-  $props: Partial<SliderThumbElement>
+  $props: SliderThumbNaviteElement
 })
diff --git a/packages/components/slider/src/sliderThumbImpl.ts b/packages/components/slider/src/sliderThumbImpl.ts
index 94b1bd10f..a8603bfe1 100644
--- a/packages/components/slider/src/sliderThumbImpl.ts
+++ b/packages/components/slider/src/sliderThumbImpl.ts
@@ -1,12 +1,12 @@
 import { computed, defineComponent, h, ref, toRef, watchEffect } from 'vue'
-import type { ElementType, PrimitiveProps } from '@oku-ui/primitive'
+import type { OkuElement, PrimitiveProps } from '@oku-ui/primitive'
 import { Primitive, primitiveProps } from '@oku-ui/primitive'
 import { useComposedRefs, useForwardRef, useSize } from '@oku-ui/use-composable'
 import { composeEventHandlers } from '@oku-ui/utils'
 import { CollectionItemSlot, convertValueToPercentage, getLabel, getThumbInBoundsOffset, scopeSliderProps, useSliderInject, useSliderOrientationInject } from './utils'
 import { THUMB_NAME } from './sliderThumb'
 
-export type SliderThumbImplIntrinsicElement = ElementType<'span'>
+export type SliderThumbImplNaviteElement = OkuElement<'span'>
 export type SliderThumbImplElement = HTMLSpanElement
 
 export interface SliderThumbImplProps extends PrimitiveProps {
@@ -122,5 +122,5 @@ const sliderThumbImpl = defineComponent({
 // TODO: https://github.com/vuejs/core/pull/7444 after delete
 export const OkuSliderThumbImpl = sliderThumbImpl as typeof sliderThumbImpl &
 (new () => {
-  $props: Partial<SliderThumbImplElement>
+  $props: SliderThumbImplNaviteElement
 })
diff --git a/packages/components/slider/src/sliderTrack.ts b/packages/components/slider/src/sliderTrack.ts
index 42925097f..a123e169c 100644
--- a/packages/components/slider/src/sliderTrack.ts
+++ b/packages/components/slider/src/sliderTrack.ts
@@ -1,12 +1,12 @@
 import { defineComponent, h, toRefs } from 'vue'
-import type { ElementType, PrimitiveProps } from '@oku-ui/primitive'
+import type { OkuElement, PrimitiveProps } from '@oku-ui/primitive'
 import { Primitive, primitiveProps } from '@oku-ui/primitive'
 import { useForwardRef } from '@oku-ui/use-composable'
 import { scopeSliderProps, useSliderInject } from './utils'
 
 const TRACK_NAME = 'OkuSliderTrack'
 
-export type SliderTrackIntrinsicElement = ElementType<'span'>
+export type SliderTrackNaviteElement = OkuElement<'span'>
 
 export type SliderTrackElement = HTMLSpanElement
 
@@ -51,5 +51,5 @@ const sliderTrack = defineComponent({
 // TODO: https://github.com/vuejs/core/pull/7444 after delete
 export const OkuSliderTrack = sliderTrack as typeof sliderTrack &
 (new () => {
-  $props: Partial<SliderTrackElement>
+  $props: SliderTrackNaviteElement
 })
diff --git a/packages/components/slider/src/sliderVertical.ts b/packages/components/slider/src/sliderVertical.ts
index 5688f34f9..2f7beba87 100644
--- a/packages/components/slider/src/sliderVertical.ts
+++ b/packages/components/slider/src/sliderVertical.ts
@@ -1,11 +1,11 @@
 import { computed, defineComponent, h, ref, toRefs } from 'vue'
 import { useComposedRefs, useForwardRef } from '@oku-ui/use-composable'
-import { OkuSliderImpl, type SliderImplElement, type SliderImplIntrinsicElement } from './sliderImpl'
+import { OkuSliderImpl, type SliderImplElement, type SliderImplNaviteElement } from './sliderImpl'
 import { BACK_KEYS, linearScale, scopeSliderProps, sliderOrientationProvider } from './utils'
 import type { SliderOrientationProps } from './sliderHorizontal'
 import { sliderOrientationProps } from './sliderHorizontal'
 
-export type SliderVerticalIntrinsicElement = SliderImplIntrinsicElement
+export type SliderVerticalNaviteElement = SliderImplNaviteElement
 export type SliderVerticalElement = SliderImplElement
 
 const NAME = 'OkuSliderVertical'
@@ -107,5 +107,5 @@ const SliderVertical = defineComponent({
 // TODO: https://github.com/vuejs/core/pull/7444 after delete
 export const OkuSliderVertical = SliderVertical as typeof SliderVertical &
 (new () => {
-  $props: Partial<SliderVerticalElement>
+  $props: SliderVerticalNaviteElement
 })
diff --git a/packages/components/slot/src/stories/SlotDemo.vue b/packages/components/slot/src/stories/SlotDemo.vue
index e253db002..a5da0e99a 100644
--- a/packages/components/slot/src/stories/SlotDemo.vue
+++ b/packages/components/slot/src/stories/SlotDemo.vue
@@ -15,7 +15,7 @@ withDefaults(defineProps<OkuLabelProps>(), {
 
 const slot = ref()
 onMounted(() => {
-  console.log(slot.value.$el, 'slot.value.$el')
+  console.log(slot.value, 'slot.value')
   console.log(slot.value, 'slot.value')
 })
 const alert = () => console.log('alert')
diff --git a/packages/components/switch/src/BubbleInput.ts b/packages/components/switch/src/BubbleInput.ts
index c5a41f1ba..0ca94a45c 100644
--- a/packages/components/switch/src/BubbleInput.ts
+++ b/packages/components/switch/src/BubbleInput.ts
@@ -1,7 +1,6 @@
-import type { ElementType } from '@oku-ui/primitive'
+import type { OkuElement } from '@oku-ui/primitive'
 import { usePrevious, useSize } from '@oku-ui/use-composable'
 import type {
-  CSSProperties,
   PropType,
   Ref,
 } from 'vue'
@@ -15,10 +14,10 @@ import {
 
 const BUBBLE_INPUT = 'OkuBubbleInput'
 
-export type BubbleInputIntrinsicElement = ElementType<'input'>
+export type BubbleInputNaviteElement = OkuElement<'input'>
 export type BubbleInputElement = HTMLInputElement
 
-interface BubbleInputProps extends Omit<BubbleInputElement, 'checked'> {
+export interface BubbleInputProps extends Omit<BubbleInputElement, 'checked'> {
   checked: boolean
   control: HTMLElement | null
   bubbles: boolean
@@ -49,7 +48,6 @@ export const BubbleInput = defineComponent({
   },
   setup(props, { attrs }) {
     const { control, checked, bubbles } = toRefs(props)
-    const { ...inputAttrs } = attrs as BubbleInputIntrinsicElement
     const inputRef = ref<HTMLInputElement | null>(null)
     const prevChecked = usePrevious(checked)
     const controlSize = useSize(control as Ref<HTMLElement>)
@@ -75,11 +73,11 @@ export const BubbleInput = defineComponent({
         'type': 'checkbox',
         'aria-hidden': true,
         'defaultChecked': checked.value,
-        ...inputAttrs,
+        ...attrs,
         'tabindex': -1,
         'ref': inputRef,
         'style': {
-          ...((inputAttrs.style as CSSProperties) || {}),
+          ...attrs.style as any,
           ...controlSize.value,
           position: 'absolute',
           pointerEvents: 'none',
@@ -94,7 +92,5 @@ export const BubbleInput = defineComponent({
 
 export const OkuBubbleInput = BubbleInput as typeof BubbleInput &
 (new () => {
-  $props: Partial<BubbleInputElement>
+  $props: BubbleInputNaviteElement
 })
-
-export type { BubbleInputProps }
diff --git a/packages/components/switch/src/Switch.ts b/packages/components/switch/src/Switch.ts
index 35c9a0136..84ae502ce 100644
--- a/packages/components/switch/src/Switch.ts
+++ b/packages/components/switch/src/Switch.ts
@@ -14,17 +14,16 @@ import {
   useControllable,
   useForwardRef,
 } from '@oku-ui/use-composable'
-import type { ElementType, PrimitiveProps } from '@oku-ui/primitive'
+import type { OkuElement, PrimitiveProps } from '@oku-ui/primitive'
 import { Primitive, primitiveProps } from '@oku-ui/primitive'
 import { createProvideScope } from '@oku-ui/provide'
 import { composeEventHandlers } from '@oku-ui/utils'
-import type { ScopeSwitch } from './util'
 import { getState, scopeSwitchProps } from './util'
 import { BubbleInput } from './BubbleInput'
 
 const SWITCH_NAME = 'OkuSwitch'
 
-export type SwitchIntrinsicElement = ElementType<'button'>
+export type SwitchNaviteElement = OkuElement<'button'>
 export type SwitchElement = HTMLButtonElement
 
 type SwitchProvideValue = {
@@ -116,7 +115,7 @@ const Switch = defineComponent({
       name,
     } = toRefs(props)
 
-    const { ...switchAttrs } = attrs as SwitchIntrinsicElement
+    const { ...switchAttrs } = attrs as SwitchNaviteElement
 
     const buttonRef = ref<HTMLButtonElement | null>(null)
 
@@ -218,7 +217,7 @@ const Switch = defineComponent({
 
 export const OkuSwitch = Switch as typeof Switch &
 (new () => {
-  $props: ScopeSwitch<Partial<SwitchIntrinsicElement>>
+  $props: SwitchNaviteElement
 })
 
 export { useSwitchInject, createSwitchScope }
diff --git a/packages/components/switch/src/SwitchThumb.ts b/packages/components/switch/src/SwitchThumb.ts
index e0de09304..f8aa6f74a 100644
--- a/packages/components/switch/src/SwitchThumb.ts
+++ b/packages/components/switch/src/SwitchThumb.ts
@@ -1,16 +1,15 @@
 import type {
-  ElementType, PrimitiveProps,
+  OkuElement, PrimitiveProps,
 } from '@oku-ui/primitive'
 import { Primitive, primitiveProps } from '@oku-ui/primitive'
 import { useForwardRef } from '@oku-ui/use-composable'
 import { defineComponent, h, toValue } from 'vue'
 import { useSwitchInject } from './Switch'
-import type { ScopeSwitch } from './util'
 import { getState, scopeSwitchProps } from './util'
 
 const THUMB_NAME = 'OkuSwitchThumb'
 
-export type SwitchThumbIntrinsicElement = ElementType<'span'>
+export type SwitchThumbNaviteElement = OkuElement<'span'>
 export type SwitchThumbElement = HTMLSpanElement
 
 export interface SwitchThumbProps extends PrimitiveProps { }
@@ -29,7 +28,7 @@ const SwitchThumb = defineComponent({
     ...switchThumbProps.props,
   },
   setup(props, { attrs, slots }) {
-    const { ...thumbAttrs } = attrs as SwitchThumbIntrinsicElement
+    const { ...thumbAttrs } = attrs as SwitchThumbNaviteElement
 
     const forwardedRef = useForwardRef()
 
@@ -56,5 +55,5 @@ const SwitchThumb = defineComponent({
 
 export const OkuSwitchThumb = SwitchThumb as typeof SwitchThumb &
 (new () =>
-{ $props: ScopeSwitch<Partial<SwitchThumbElement>>
+{ $props: SwitchThumbNaviteElement
 })
diff --git a/packages/components/switch/src/index.ts b/packages/components/switch/src/index.ts
index 6ac037c01..c9d924c8f 100644
--- a/packages/components/switch/src/index.ts
+++ b/packages/components/switch/src/index.ts
@@ -6,7 +6,7 @@ export {
 
 export type {
   SwitchProps,
-  SwitchIntrinsicElement,
+  SwitchNaviteElement,
   SwitchElement,
 } from './Switch'
 
@@ -18,5 +18,5 @@ export {
 export type {
   SwitchThumbProps,
   SwitchThumbElement,
-  SwitchThumbIntrinsicElement,
+  SwitchThumbNaviteElement,
 } from './SwitchThumb'
diff --git a/packages/components/switch/src/stories/Switch.stories.ts b/packages/components/switch/src/stories/Switch.stories.ts
index f7118d77c..ac6f15c8a 100644
--- a/packages/components/switch/src/stories/Switch.stories.ts
+++ b/packages/components/switch/src/stories/Switch.stories.ts
@@ -23,7 +23,7 @@ type Story = StoryObj<typeof meta> & {
 export const Styled: Story = {
   args: {
     template: '#1',
-    // allShow: true,
+    // allshow: true,
   },
 
   render: (args: any) => ({
@@ -40,7 +40,7 @@ export const Styled: Story = {
 export const Form: Story = {
   args: {
     template: '#3',
-    // allShow: true,
+    // allshow: true,
   },
 
   render: (args: any) => ({
diff --git a/packages/components/tabs/src/index.ts b/packages/components/tabs/src/index.ts
index 5a8040fe2..745a461f8 100644
--- a/packages/components/tabs/src/index.ts
+++ b/packages/components/tabs/src/index.ts
@@ -5,41 +5,41 @@ export {
 } from './tabs'
 
 export {
-  OkuTabList,
-  tabListProps,
-} from './tabList'
+  OkuTabsList,
+  tabsListProps,
+} from './tabsList'
 
 export {
-  OkuTabTrigger,
+  OkuTabsTrigger,
   tabsTriggerProps,
-} from './tabTrigger'
+} from './tabsTrigger'
 
 export {
-  OkuTabContent,
+  OkuTabsContent,
   tabsContentProps,
-} from './tabContent'
+} from './tabsContent'
 
 export type {
   TabsProps,
   TabsElement,
-  TabsIntrinsicElement,
+  TabsNaviteElement,
 } from './tabs'
 
 export type {
-  TabListProps,
-  TabListElement,
-  TabListElementIntrinsicElement,
-} from './tabList'
+  TabsListProps,
+  TabsListElement,
+  TabsListElementNaviteElement,
+} from './tabsList'
 
 export type {
   TabsTriggerProps,
   TabsTriggerElement,
-  TabsTriggerElementIntrinsicElement,
+  TabsTriggerElementNaviteElement,
   TabsTriggerEmits,
-} from './tabTrigger'
+} from './tabsTrigger'
 
 export type {
   TabsContentProps,
   TabsContentElement,
-  TabsContentIntrinsicElement,
-} from './tabContent'
+  TabsContentNaviteElement,
+} from './tabsContent'
diff --git a/packages/components/tabs/src/stories/TabsDemo.vue b/packages/components/tabs/src/stories/TabsDemo.vue
index fbc73563d..f2f6fc7c2 100644
--- a/packages/components/tabs/src/stories/TabsDemo.vue
+++ b/packages/components/tabs/src/stories/TabsDemo.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import {
-  OkuTabContent,
-  OkuTabList,
-  OkuTabTrigger,
   OkuTabs,
+  OkuTabsContent,
+  OkuTabsList,
+  OkuTabsTrigger,
 } from '@oku-ui/tabs'
 
 export interface ITabsProps {
@@ -18,29 +18,29 @@ defineProps<ITabsProps>()
   <div v-if="template === '#1' || allshow">
     <h1>Horizontal (automatic activation)</h1>
     <OkuTabs default-value="tab1" class="root-class">
-      <OkuTabList aria-label="tabs example" class="list-class">
-        <OkuTabTrigger value="tab1" class="trigger-class">
+      <OkuTabsList aria-label="tabs example" class="list-class">
+        <OkuTabsTrigger value="tab1" class="trigger-class">
           Tab 1
-        </OkuTabTrigger>
-        <OkuTabTrigger value="tab2" disabled class="trigger-class">
+        </OkuTabsTrigger>
+        <OkuTabsTrigger value="tab2" disabled class="trigger-class">
           Tab 2
-        </OkuTabTrigger>
-        <OkuTabTrigger value="tab3" class="trigger-class">
+        </OkuTabsTrigger>
+        <OkuTabsTrigger value="tab3" class="trigger-class">
           Tab 3
-        </OkuTabTrigger>
-      </OkuTabList>
-      <OkuTabContent value="tab1" class="content-class">
+        </OkuTabsTrigger>
+      </OkuTabsList>
+      <OkuTabsContent value="tab1" class="content-class">
         Dis metus rhoncus sit convallis sollicitudin vel cum, hac purus tincidunt eros sem himenaeos
         integer, faucibus varius nullam nostra bibendum consectetur mollis, gravida elementum
         pellentesque volutpat dictum ipsum.
-      </OkuTabContent>
-      <OkuTabContent value="tab2" class="content-class">
+      </OkuTabsContent>
+      <OkuTabsContent value="tab2" class="content-class">
         You'll never find me!
-      </OkuTabContent>
-      <OkuTabContent value="tab3" class="content-class">
+      </OkuTabsContent>
+      <OkuTabsContent value="tab3" class="content-class">
         Ut nisi elementum metus semper mauris dui fames accumsan aenean, maecenas ac sociis dolor
         quam tempus pretium.
-      </OkuTabContent>
+      </OkuTabsContent>
     </OkuTabs>
   </div>
   <div v-if="template === '#3' || allshow">
@@ -51,25 +51,25 @@ defineProps<ITabsProps>()
       orientation="horizontal"
       class="flex flex-col w-[300px] shadow-[0_2px_10px] shadow-black/10"
     >
-      <OkuTabList
+      <OkuTabsList
         class="shrink-0 flex border-b border-red-500"
         aria-label="Manage your account"
         :loop="false"
       >
-        <OkuTabTrigger
+        <OkuTabsTrigger
           class="bg-white px-5 h-[45px] flex-1 flex items-center justify-center text-[15px] leading-none text-red-500 select-none first:rounded-tl-md last:rounded-tr-md hover:text-violet11 data-[state=active]:text-violet11 data-[state=active]:shadow-[inset_0_-1px_0_0,0_1px_0_0] data-[state=active]:shadow-current data-[state=active]:focus:relative data-[state=active]:focus:shadow-[0_0_0_2px] data-[state=active]:focus:shadow-black outline-none cursor-default"
           value="tab1"
         >
           Account
-        </OkuTabTrigger>
-        <OkuTabTrigger
+        </OkuTabsTrigger>
+        <OkuTabsTrigger
           class="bg-white px-5 h-[45px] flex-1 flex items-center justify-center text-[15px] leading-none text-red-500 select-none first:rounded-tl-md last:rounded-tr-md hover:text-violet11 data-[state=active]:text-violet11 data-[state=active]:shadow-[inset_0_-1px_0_0,0_1px_0_0] data-[state=active]:shadow-current data-[state=active]:focus:relative data-[state=active]:focus:shadow-[0_0_0_2px] data-[state=active]:focus:shadow-black outline-none cursor-default"
           value="tab2"
         >
           Password
-        </OkuTabTrigger>
-      </OkuTabList>
-      <OkuTabContent
+        </OkuTabsTrigger>
+      </OkuTabsList>
+      <OkuTabsContent
         class="grow p-5 bg-white rounded-b-md outline-none focus:shadow-[0_0_0_2px] focus:shadow-black"
         value="tab1"
       >
@@ -111,8 +111,8 @@ defineProps<ITabsProps>()
             Save changes
           </button>
         </div>
-      </OkuTabContent>
-      <OkuTabContent
+      </OkuTabsContent>
+      <OkuTabsContent
         class="grow p-5 bg-white rounded-b-md outline-none focus:shadow-[0_0_0_2px] focus:shadow-black"
         value="tab2"
       >
@@ -170,7 +170,7 @@ defineProps<ITabsProps>()
             </button>
           </div>
         </form>
-      </OkuTabContent>
+      </OkuTabsContent>
     </OkuTabs>
   </div>
 </template>
diff --git a/packages/components/tabs/src/stories/tabs.stories.ts b/packages/components/tabs/src/stories/tabs.stories.ts
index 6aa681837..baa57d0b9 100644
--- a/packages/components/tabs/src/stories/tabs.stories.ts
+++ b/packages/components/tabs/src/stories/tabs.stories.ts
@@ -22,7 +22,7 @@ type Story = StoryObj<typeof meta>
 export const Styled: Story = {
   args: {
     template: '#1',
-    // allShow: true,
+    // allshow: true,
   },
   render: (args: any) => ({
     components: { OkuTabsComponent },
@@ -38,7 +38,7 @@ export const Styled: Story = {
 export const Indeterminate: Story = {
   args: {
     template: '#2',
-    // allShow: true,
+    // allshow: true,
   },
 
   render: (args: any) => ({
@@ -55,7 +55,7 @@ export const Indeterminate: Story = {
 export const Form: Story = {
   args: {
     template: '#3',
-    // allShow: true,
+    // allshow: true,
   },
 
   render: (args: any) => ({
diff --git a/packages/components/tabs/src/tabs.ts b/packages/components/tabs/src/tabs.ts
index 6d35d1324..5e4896ed9 100644
--- a/packages/components/tabs/src/tabs.ts
+++ b/packages/components/tabs/src/tabs.ts
@@ -1,4 +1,4 @@
-import type { ElementType, PrimitiveProps } from '@oku-ui/primitive'
+import type { OkuElement, PrimitiveProps } from '@oku-ui/primitive'
 import { Primitive, primitiveProps } from '@oku-ui/primitive'
 import { computed, defineComponent, h, toRefs, useModel } from 'vue'
 import type { PropType, Ref } from 'vue'
@@ -7,12 +7,11 @@ import type { RovingFocusGroupProps } from '@oku-ui/roving-focus'
 import { createRovingFocusGroupScope } from '@oku-ui/roving-focus'
 import { useControllable, useForwardRef, useId } from '@oku-ui/use-composable'
 import { useDirection } from '@oku-ui/direction'
-import type { ScopeTabs } from './utils'
 import { scopeTabsProps } from './utils'
 
-const TAB_NAME = 'OkuTab'
+const TAB_NAME = 'OkuTabs'
 
-export type TabsIntrinsicElement = ElementType<'div'>
+export type TabsNaviteElement = OkuElement<'div'>
 export type TabsElement = HTMLDivElement
 
 type Orientation = 'horizontal' | 'vertical'
@@ -166,5 +165,5 @@ const tabs = defineComponent({
 
 export const OkuTabs = tabs as typeof tabs &
 (new () => {
-  $props: ScopeTabs<Partial<TabsElement>>
+  $props: TabsNaviteElement
 })
diff --git a/packages/components/tabs/src/tabContent.ts b/packages/components/tabs/src/tabsContent.ts
similarity index 76%
rename from packages/components/tabs/src/tabContent.ts
rename to packages/components/tabs/src/tabsContent.ts
index 391e03aba..7d798b593 100644
--- a/packages/components/tabs/src/tabContent.ts
+++ b/packages/components/tabs/src/tabsContent.ts
@@ -1,16 +1,15 @@
 import { Primitive, primitiveProps } from '@oku-ui/primitive'
-import type { ElementType, PrimitiveProps } from '@oku-ui/primitive'
-import { computed, defineComponent, h, ref, toRefs, watchEffect } from 'vue'
+import type { OkuElement, PrimitiveProps } from '@oku-ui/primitive'
+import { computed, defineComponent, h, onBeforeUnmount, onMounted, ref, toRefs } from 'vue'
 import type { ComputedRef, PropType } from 'vue'
 import { OkuPresence } from '@oku-ui/presence'
 import { useForwardRef } from '@oku-ui/use-composable'
 import { useTabsInject } from './tabs'
-import type { ScopeTabs } from './utils'
 import { makeContentId, makeTriggerId, scopeTabsProps } from './utils'
 
-const TAB_CONTENT_NAME = 'OkuTabContent' as const
+const TAB_CONTENT_NAME = 'OkuTabsContent' as const
 
-export type TabsContentIntrinsicElement = ElementType<'div'>
+export type TabsContentNaviteElement = OkuElement<'div'>
 export type TabsContentElement = HTMLDivElement
 
 export interface TabsContentProps extends PrimitiveProps {
@@ -37,7 +36,7 @@ export const tabsContentProps = {
   },
 }
 
-const TabContent = defineComponent({
+const tabsContent = defineComponent({
   name: TAB_CONTENT_NAME,
   inheritAttrs: false,
   props: {
@@ -46,7 +45,6 @@ const TabContent = defineComponent({
   },
   setup(props, { slots, attrs }) {
     const { value } = toRefs(props)
-    const { ...ContentAttrs } = attrs
     const injectTabs = useTabsInject(TAB_CONTENT_NAME, props.scopeOkuTabs)
 
     const triggerId = makeTriggerId(injectTabs.baseId.value, value.value!)
@@ -56,9 +54,14 @@ const TabContent = defineComponent({
     const forwardedRef = useForwardRef()
     const isMountAnimationPreventedRef = ref(isSelected.value)
 
-    watchEffect((onClean) => {
-      const rAF = requestAnimationFrame(() => (isMountAnimationPreventedRef.value = false))
-      onClean(() => cancelAnimationFrame(rAF))
+    const rAf = ref()
+
+    onMounted(() => {
+      rAf.value = requestAnimationFrame(() => (isMountAnimationPreventedRef.value = false))
+    })
+
+    onBeforeUnmount(() => {
+      cancelAnimationFrame(rAf.value)
     })
 
     return () => h(OkuPresence, {
@@ -72,10 +75,10 @@ const TabContent = defineComponent({
         'hidden': !isPresent,
         'id': contentId,
         'tabindex': '0',
-        ...ContentAttrs,
+        ...attrs,
         'ref': forwardedRef,
         'style': {
-          ...ContentAttrs.style ?? {} as any,
+          ...attrs.style ?? {} as any,
           animationDuration: isMountAnimationPreventedRef.value ? '0s' : undefined,
         },
       }, {
@@ -85,7 +88,7 @@ const TabContent = defineComponent({
   },
 })
 
-export const OkuTabContent = TabContent as typeof TabContent &
+export const OkuTabsContent = tabsContent as typeof tabsContent &
 (new () => {
-  $props: ScopeTabs<Partial<TabsContentElement>>
+  $props: TabsContentNaviteElement
 })
diff --git a/packages/components/tabs/src/tabList.ts b/packages/components/tabs/src/tabsList.ts
similarity index 78%
rename from packages/components/tabs/src/tabList.ts
rename to packages/components/tabs/src/tabsList.ts
index b7ef8a574..6e6e309d0 100644
--- a/packages/components/tabs/src/tabList.ts
+++ b/packages/components/tabs/src/tabsList.ts
@@ -1,6 +1,6 @@
 import { Primitive, primitiveProps } from '@oku-ui/primitive'
 import type {
-  ElementType,
+  OkuElement,
   PrimitiveProps,
 } from '@oku-ui/primitive'
 import type { PropType } from 'vue'
@@ -8,19 +8,18 @@ import { defineComponent, h, toRefs } from 'vue'
 import { useForwardRef } from '@oku-ui/use-composable'
 import { OkuRovingFocusGroup, createRovingFocusGroupScope } from '@oku-ui/roving-focus'
 import { useTabsInject } from './tabs'
-import type { ScopeTabs } from './utils'
 import { scopeTabsProps } from './utils'
 
-export type TabListElementIntrinsicElement = ElementType<'div'>
-export type TabListElement = HTMLDivElement
+export type TabsListElementNaviteElement = OkuElement<'div'>
+export type TabsListElement = HTMLDivElement
 
-const TAB_LIST_NAME = 'OkuTabList' as const
+const TAB_LIST_NAME = 'OkuTabsList' as const
 
-export interface TabListProps extends PrimitiveProps {
+export interface TabsListProps extends PrimitiveProps {
   loop?: boolean
 }
 
-export const tabListProps = {
+export const tabsListProps = {
   props: {
     loop: {
       type: Boolean as PropType<boolean>,
@@ -31,11 +30,11 @@ export const tabListProps = {
 }
 const useRovingFocusGroupScope = createRovingFocusGroupScope()
 
-const TabList = defineComponent({
+const tabsList = defineComponent({
   name: TAB_LIST_NAME,
   inheritAttrs: false,
   props: {
-    ...tabListProps.props,
+    ...tabsListProps.props,
     ...scopeTabsProps,
   },
   setup(props, { slots, attrs }) {
@@ -72,7 +71,7 @@ const TabList = defineComponent({
   },
 })
 
-export const OkuTabList = TabList as typeof TabList &
+export const OkuTabsList = tabsList as typeof tabsList &
 (new () => {
-  $props: ScopeTabs<Partial<TabListElement>>
+  $props: TabsListElementNaviteElement
 })
diff --git a/packages/components/tabs/src/tabTrigger.ts b/packages/components/tabs/src/tabsTrigger.ts
similarity index 90%
rename from packages/components/tabs/src/tabTrigger.ts
rename to packages/components/tabs/src/tabsTrigger.ts
index 5e1b540dc..967763635 100644
--- a/packages/components/tabs/src/tabTrigger.ts
+++ b/packages/components/tabs/src/tabsTrigger.ts
@@ -1,17 +1,17 @@
 import { Primitive, primitiveProps } from '@oku-ui/primitive'
-import type { ElementType, PrimitiveProps } from '@oku-ui/primitive'
-import { type PropType, computed, defineComponent, h, toRefs } from 'vue'
+import type { OkuElement, PrimitiveProps } from '@oku-ui/primitive'
+import { computed, defineComponent, h, toRefs } from 'vue'
+import type { PropType } from 'vue'
 import { useForwardRef } from '@oku-ui/use-composable'
 import { OkuRovingFocusGroupItem } from '@oku-ui/roving-focus'
 import { composeEventHandlers } from '@oku-ui/utils'
 import { useRovingFocusGroupScope, useTabsInject } from './tabs'
-import type { ScopeTabs } from './utils'
 import { makeContentId, makeTriggerId, scopeTabsProps } from './utils'
 
-export type TabsTriggerElementIntrinsicElement = ElementType<'button'>
+export type TabsTriggerElementNaviteElement = OkuElement<'button'>
 export type TabsTriggerElement = HTMLButtonElement
 
-const TAB_TRIGGER_NAME = 'OkuTabTrigger' as const
+const TAB_TRIGGER_NAME = 'OkuTabsTrigger' as const
 
 export interface TabsTriggerProps extends PrimitiveProps {
   value: string
@@ -46,7 +46,7 @@ export const tabsTriggerProps = {
   },
 }
 
-const TabTrigger = defineComponent({
+const tabsTrigger = defineComponent({
   name: TAB_TRIGGER_NAME,
   inheritAttrs: false,
   props: {
@@ -123,7 +123,7 @@ const TabTrigger = defineComponent({
   },
 })
 
-export const OkuTabTrigger = TabTrigger as typeof TabTrigger &
+export const OkuTabsTrigger = tabsTrigger as typeof tabsTrigger &
 (new () => {
-  $props: ScopeTabs<Partial<TabsTriggerElement>>
+  $props: TabsTriggerElementNaviteElement
 })
diff --git a/packages/components/toggle-group/src/ToggleGroup.ts b/packages/components/toggle-group/src/ToggleGroup.ts
index 9a42eaa1e..15fa35c63 100644
--- a/packages/components/toggle-group/src/ToggleGroup.ts
+++ b/packages/components/toggle-group/src/ToggleGroup.ts
@@ -8,7 +8,7 @@ import { createRovingFocusGroupScope } from '@oku-ui/roving-focus'
 
 import { scopeToggleGroupProps } from './utils'
 
-import type { ToggleGroupImplElement, ToggleGroupImplIntrinsicElement } from './ToggleGroupImpl'
+import type { ToggleGroupImplElement, ToggleGroupImplNaviteElement } from './ToggleGroupImpl'
 import type { ToggleGroupVariantEmits, ToggleGroupVariantProps } from './ToggleGroupVariant'
 import { OkuToggleGroupVariant, toggleGroupVariantProps } from './ToggleGroupVariant'
 
@@ -42,7 +42,7 @@ export type ToggleGroupProps = ToggleGroupVariantProps
 export type ToggleGroupEmits = ToggleGroupVariantEmits
 
 export type ToggleGroupElement = ToggleGroupImplElement
-export type ToggleGroupIntrinsicElement = ToggleGroupImplIntrinsicElement
+export type ToggleGroupNaviteElement = ToggleGroupImplNaviteElement
 
 export const toggleGroupProps = {
   props: {
@@ -75,5 +75,5 @@ const toggleGroup = defineComponent({
 
 export const OkuToggleGroup = toggleGroup as typeof toggleGroup &
 (new () => {
-  $props: Partial<ToggleGroupElement>
+  $props: ToggleGroupNaviteElement
 })
diff --git a/packages/components/toggle-group/src/ToggleGroupImpl.ts b/packages/components/toggle-group/src/ToggleGroupImpl.ts
index 20c05432c..6eeb03ef5 100644
--- a/packages/components/toggle-group/src/ToggleGroupImpl.ts
+++ b/packages/components/toggle-group/src/ToggleGroupImpl.ts
@@ -1,4 +1,4 @@
-import type { ElementType, PrimitiveProps } from '@oku-ui/primitive'
+import type { OkuElement, PrimitiveProps } from '@oku-ui/primitive'
 import { Primitive, primitiveProps } from '@oku-ui/primitive'
 import { defineComponent, h, toRefs } from 'vue'
 import type { PropType } from 'vue'
@@ -10,7 +10,7 @@ import { toggleGroupProvide, useRovingFocusGroupScope } from './ToggleGroup'
 
 const TOGGLE_GROUP_IMPL_NAME = 'OkuToggleGroupImpl'
 
-export type ToggleGroupImplIntrinsicElement = ElementType<'div'>
+export type ToggleGroupImplNaviteElement = OkuElement<'div'>
 export type ToggleGroupImplElement = HTMLDivElement
 
 export interface ToggleGroupImplProps extends PrimitiveProps {
@@ -116,5 +116,5 @@ const toggleGroupImpl = defineComponent({
 
 export const OkuToggleGroupImpl = toggleGroupImpl as typeof toggleGroupImpl &
 (new () => {
-  $props: Partial<ToggleGroupImplElement>
+  $props: ToggleGroupImplNaviteElement
 })
diff --git a/packages/components/toggle-group/src/ToggleGroupItem.ts b/packages/components/toggle-group/src/ToggleGroupItem.ts
index 9ebbaf099..f32b52c2d 100644
--- a/packages/components/toggle-group/src/ToggleGroupItem.ts
+++ b/packages/components/toggle-group/src/ToggleGroupItem.ts
@@ -4,12 +4,12 @@ import { useForwardRef } from '@oku-ui/use-composable'
 
 import { OkuRovingFocusGroupItem } from '@oku-ui/roving-focus'
 import { scopeToggleGroupProps } from './utils'
-import { OkuToggleGroupItemImpl, type ToggleGroupItemImplElement, type ToggleGroupItemImplIntrinsicElement, type ToggleGroupItemImplProps, toggleGroupItemImplProps } from './ToggleGroupItemImpl'
+import { OkuToggleGroupItemImpl, type ToggleGroupItemImplElement, type ToggleGroupItemImplNaviteElement, type ToggleGroupItemImplProps, toggleGroupItemImplProps } from './ToggleGroupItemImpl'
 import { useRovingFocusGroupScope, useToggleGroupInject, useToggleGroupValueInject } from './ToggleGroup'
 
 export const TOGGLE_ITEM_NAME = 'OkuToggleGroupItem'
 
-export type ToggleGroupItemIntrinsicElement = ToggleGroupItemImplIntrinsicElement
+export type ToggleGroupItemNaviteElement = ToggleGroupItemImplNaviteElement
 export type ToggleGroupItemElement = ToggleGroupItemImplElement
 
 export interface ToggleGroupItemProps extends Omit<ToggleGroupItemImplProps, 'pressed'> {
@@ -75,5 +75,5 @@ const toggleGroupItem = defineComponent({
 
 export const OkuToggleGroupItem = toggleGroupItem as typeof toggleGroupItem &
 (new () => {
-  $props: Partial<ToggleGroupItemElement>
+  $props: ToggleGroupItemNaviteElement
 })
diff --git a/packages/components/toggle-group/src/ToggleGroupItemImpl.ts b/packages/components/toggle-group/src/ToggleGroupItemImpl.ts
index afb594ea3..899d543d1 100644
--- a/packages/components/toggle-group/src/ToggleGroupItemImpl.ts
+++ b/packages/components/toggle-group/src/ToggleGroupItemImpl.ts
@@ -3,7 +3,7 @@ import { computed, defineComponent, h, toRefs } from 'vue'
 import type { PropType } from 'vue'
 import { useForwardRef } from '@oku-ui/use-composable'
 import { OkuToggle, toggleProps } from '@oku-ui/toggle'
-import type { ToggleElement, ToggleElementIntrinsicElement, ToggleEmits, ToggleProps } from '@oku-ui/toggle'
+import type { ToggleElement, ToggleElementNaviteElement, ToggleEmits, ToggleProps } from '@oku-ui/toggle'
 
 import { scopeToggleGroupProps } from './utils'
 import { useToggleGroupValueInject } from './ToggleGroup'
@@ -11,7 +11,7 @@ import { TOGGLE_ITEM_NAME } from './ToggleGroupItem'
 
 const TOGGLE_GROUP_NAME = 'OkuToggleGroupItemImpl'
 
-export type ToggleGroupItemImplIntrinsicElement = ToggleElementIntrinsicElement
+export type ToggleGroupItemImplNaviteElement = ToggleElementNaviteElement
 export type ToggleGroupItemImplElement = ToggleElement
 
 interface ToggleGroupItemImplProps extends Omit<ToggleProps, 'defaultPressed' | 'onPressedChange'> {
@@ -52,7 +52,7 @@ const toggleGroupItemImpl = defineComponent({
     const { pressed, disabled, value, scopeOkuToggleGroup, asChild } = toRefs(props)
     const valueInject = useToggleGroupValueInject(TOGGLE_ITEM_NAME, scopeOkuToggleGroup.value)
     const singleProps = computed(() => {
-      return { 'role': 'radio', 'ariaChecked': pressed.value, 'aria-pressed': undefined }
+      return { 'role': 'radio', 'ariaChecked': pressed.value, 'aria-pressed': undefined } as ToggleElementNaviteElement
     })
     const typeProps = computed(() => valueInject.type.value === 'single' ? singleProps.value : undefined)
 
@@ -60,12 +60,12 @@ const toggleGroupItemImpl = defineComponent({
 
     return () => h(OkuToggle, {
       ...attrs,
-      ...typeProps.value,
+      ...typeProps.value as any,
       pressed: pressed.value,
       disabled: disabled.value,
       asChild: asChild.value,
       ref: forwardedRef,
-      onClick: (e) => {
+      onClick: (e: ToggleEmits['click'][0]) => {
         emit('click', e)
       },
       onPressedChange: (pressed: boolean) => {
@@ -81,7 +81,7 @@ const toggleGroupItemImpl = defineComponent({
 
 export const OkuToggleGroupItemImpl = toggleGroupItemImpl as typeof toggleGroupItemImpl &
 (new () => {
-  $props: Partial<ToggleGroupItemImplElement>
+  $props: ToggleGroupItemImplNaviteElement
 })
 
 export type { ToggleGroupItemImplProps }
diff --git a/packages/components/toggle-group/src/ToggleGroupVariant.ts b/packages/components/toggle-group/src/ToggleGroupVariant.ts
index 3661d4759..6c8f128dc 100644
--- a/packages/components/toggle-group/src/ToggleGroupVariant.ts
+++ b/packages/components/toggle-group/src/ToggleGroupVariant.ts
@@ -3,12 +3,12 @@ import type { PropType } from 'vue'
 import { useControllable, useForwardRef } from '@oku-ui/use-composable'
 
 import { scopeToggleGroupProps } from './utils'
-import { OkuToggleGroupImpl, type ToggleGroupImplElement, type ToggleGroupImplIntrinsicElement, type ToggleGroupImplProps, toggleGroupImplProps } from './ToggleGroupImpl'
+import { OkuToggleGroupImpl, type ToggleGroupImplElement, type ToggleGroupImplNaviteElement, type ToggleGroupImplProps, toggleGroupImplProps } from './ToggleGroupImpl'
 import { toggleGroupValueProvider } from './ToggleGroup'
 
 const TOGGLE_GROUP_NAME = 'OkuToggleGroupImplSingle'
 
-export type ToggleGroupVariantIntrinsicElement = ToggleGroupImplIntrinsicElement
+export type ToggleGroupVariantNaviteElement = ToggleGroupImplNaviteElement
 export type ToggleGroupVariantElement = ToggleGroupImplElement
 
 export interface ToggleGroupVariantProps extends ToggleGroupImplProps {
@@ -153,5 +153,5 @@ const toggleGroupVariant = defineComponent({
 
 export const OkuToggleGroupVariant = toggleGroupVariant as typeof toggleGroupVariant &
 (new () => {
-  $props: Partial<ToggleGroupVariantElement>
+  $props: ToggleGroupVariantNaviteElement
 })
diff --git a/packages/components/toggle-group/src/index.ts b/packages/components/toggle-group/src/index.ts
index e8e595a10..26fd87016 100644
--- a/packages/components/toggle-group/src/index.ts
+++ b/packages/components/toggle-group/src/index.ts
@@ -6,7 +6,7 @@ export {
 
 export type {
   ToggleGroupProps,
-  ToggleGroupIntrinsicElement,
+  ToggleGroupNaviteElement,
   ToggleGroupElement,
 } from './ToggleGroup'
 
@@ -17,7 +17,7 @@ export {
 
 export type {
   ToggleGroupItemElement,
-  ToggleGroupItemIntrinsicElement,
+  ToggleGroupItemNaviteElement,
   ToggleGroupItemProps,
 } from './ToggleGroupItem'
 
@@ -29,6 +29,6 @@ export {
 export type {
   ToggleGroupVariantElement,
   ToggleGroupVariantEmits,
-  ToggleGroupVariantIntrinsicElement,
+  ToggleGroupVariantNaviteElement,
   ToggleGroupVariantProps,
 } from './ToggleGroupVariant'
diff --git a/packages/components/toggle-group/src/stories/ToggleGroup.stories.ts b/packages/components/toggle-group/src/stories/ToggleGroup.stories.ts
index 10f36c157..c378774ca 100644
--- a/packages/components/toggle-group/src/stories/ToggleGroup.stories.ts
+++ b/packages/components/toggle-group/src/stories/ToggleGroup.stories.ts
@@ -22,7 +22,7 @@ type Story = StoryObj<typeof meta>
 export const Styled: Story = {
   args: {
     template: '#1',
-    // allShow: true,
+    // allshow: true,
   },
   render: (args: any) => ({
     components: { OkuToggleGroupComponent },
diff --git a/packages/components/toggle/src/index.ts b/packages/components/toggle/src/index.ts
index 753f6fb69..f17f1a8d5 100644
--- a/packages/components/toggle/src/index.ts
+++ b/packages/components/toggle/src/index.ts
@@ -6,6 +6,6 @@ export {
 export type {
   ToggleProps,
   ToggleElement,
-  ToggleElementIntrinsicElement,
+  ToggleElementNaviteElement,
   ToggleEmits,
 } from './toggle'
diff --git a/packages/components/toggle/src/stories/ToggleDemo.vue b/packages/components/toggle/src/stories/ToggleDemo.vue
index ac06c7f59..73da4b15a 100644
--- a/packages/components/toggle/src/stories/ToggleDemo.vue
+++ b/packages/components/toggle/src/stories/ToggleDemo.vue
@@ -5,7 +5,7 @@ import { ref } from 'vue'
 
 export interface IToggleProps {
   template?: '#1' | '#2' | '#3'
-  allShow?: boolean
+  allshow?: boolean
 }
 
 withDefaults(defineProps<IToggleProps>(), {
@@ -23,7 +23,7 @@ function setPressed(value: boolean) {
   <div>
     {{ _setPressed }}
     {{ pressed }}
-    <div v-if="template === '#1' || allShow" class="w-[300px]">
+    <div v-if="template === '#1' || allshow" class="w-[300px]">
       <div>
         <h1>Oku Default toggle</h1>
         <div class="max-w-xl mx-auto h-full items-center justify-center">
diff --git a/packages/components/toggle/src/stories/toggle.stories.ts b/packages/components/toggle/src/stories/toggle.stories.ts
index cdcfa5c5f..3920a175d 100644
--- a/packages/components/toggle/src/stories/toggle.stories.ts
+++ b/packages/components/toggle/src/stories/toggle.stories.ts
@@ -27,7 +27,7 @@ type Story = StoryObj<typeof meta> & {
 export const Styled: Story = {
   args: {
     template: '#1',
-    allShow: true,
+    allshow: true,
   },
 
   render: (args: any) => ({
diff --git a/packages/components/toggle/src/toggle.ts b/packages/components/toggle/src/toggle.ts
index 23afd4548..08226333d 100644
--- a/packages/components/toggle/src/toggle.ts
+++ b/packages/components/toggle/src/toggle.ts
@@ -1,13 +1,13 @@
 import type { PropType } from 'vue'
 import { computed, defineComponent, h, mergeProps, toRefs, useModel } from 'vue'
 import { Primitive, primitiveProps } from '@oku-ui/primitive'
-import type { ElementType, PrimitiveProps } from '@oku-ui/primitive'
+import type { OkuElement, PrimitiveProps } from '@oku-ui/primitive'
 import { composeEventHandlers } from '@oku-ui/utils'
 import { useControllable, useForwardRef } from '@oku-ui/use-composable'
 
 const TOGGLE_NAME = 'OkuToggle'
 
-export type ToggleElementIntrinsicElement = ElementType<'button'>
+export type ToggleElementNaviteElement = OkuElement<'button'>
 export type ToggleElement = Omit<HTMLButtonElement, 'aria-checked' | 'aria-pressed' | 'ariaChecked'>
 
 export interface ToggleProps extends PrimitiveProps {
@@ -102,7 +102,7 @@ const toggle = defineComponent({
       initialValue: false,
     })
 
-    const { ...toggleAttrs } = attrs as ToggleElementIntrinsicElement
+    const { ...toggleAttrs } = attrs as ToggleElementNaviteElement
 
     const originalReturn = () => h(
       Primitive.button, {
@@ -132,5 +132,5 @@ const toggle = defineComponent({
 
 export const OkuToggle = toggle as typeof toggle &
 (new () => {
-  $props: Partial<ToggleElement>
+  $props: ToggleElementNaviteElement
 })
diff --git a/packages/components/toolbar/src/index.ts b/packages/components/toolbar/src/index.ts
index 5ac00196d..140c219da 100644
--- a/packages/components/toolbar/src/index.ts
+++ b/packages/components/toolbar/src/index.ts
@@ -5,7 +5,7 @@ export {
 export type {
   ToolbarProps,
   ToolbarElement,
-  ToolbarIntrinsicElement,
+  ToolbarNaviteElement,
 } from './toolbar'
 
 export {
@@ -15,7 +15,7 @@ export {
 
 export type {
   ToolbarButtonElement,
-  ToolbarButtonIntrinsicElement,
+  ToolbarButtonNaviteElement,
   ToolbarButtonProps,
 } from './toolbarButton'
 
@@ -35,7 +35,7 @@ export {
 } from './toolbarSeparator'
 
 export type {
-  ToolbarSeparatorIntrinsicElement,
+  ToolbarSeparatorNaviteElement,
   ToolbarSeparatorElement,
   ToolbarSeparatorProps,
 } from './toolbarSeparator'
@@ -55,6 +55,6 @@ export {
 } from './toolbarToggleItem'
 
 export type {
-  ToolbarToggleItemIntrinsicElement,
+  ToolbarToggleItemNaviteElement,
   ToolbarToggleItemProps,
 } from './toolbarToggleItem'
diff --git a/packages/components/toolbar/src/toolbar.ts b/packages/components/toolbar/src/toolbar.ts
index 4b4097f9b..f5f1d57d9 100644
--- a/packages/components/toolbar/src/toolbar.ts
+++ b/packages/components/toolbar/src/toolbar.ts
@@ -1,6 +1,6 @@
 import type { PropType, Ref } from 'vue'
 import { defineComponent, h, toRefs } from 'vue'
-import type { ElementType, PrimitiveProps } from '@oku-ui/primitive'
+import type { OkuElement, PrimitiveProps } from '@oku-ui/primitive'
 import { Primitive, primitiveProps } from '@oku-ui/primitive'
 import { useForwardRef } from '@oku-ui/use-composable'
 import { createProvideScope } from '@oku-ui/provide'
@@ -29,7 +29,7 @@ type ToolbarProvideValue = {
 export const [toolbarProvider, useToolbarInject]
   = createToolbarProvider<ToolbarProvideValue>(TOOLBAR_NAME)
 
-export type ToolbarIntrinsicElement = ElementType<'div'>
+export type ToolbarNaviteElement = OkuElement<'div'>
 export type ToolbarElement = HTMLDivElement
 
 export interface ToolbarProps extends PrimitiveProps {
@@ -102,7 +102,7 @@ const toolbar = defineComponent({
 // TODO: https://github.com/vuejs/core/pull/7444 after delete
 export const OkuToolbar = toolbar as typeof toolbar &
 (new () => {
-  $props: Partial<ToolbarElement>
+  $props: ToolbarNaviteElement
 })
 
 export {
diff --git a/packages/components/toolbar/src/toolbarButton.ts b/packages/components/toolbar/src/toolbarButton.ts
index f59454915..e0e552339 100644
--- a/packages/components/toolbar/src/toolbarButton.ts
+++ b/packages/components/toolbar/src/toolbarButton.ts
@@ -1,5 +1,5 @@
 import { defineComponent, h, toRefs } from 'vue'
-import type { ElementType, PrimitiveProps } from '@oku-ui/primitive'
+import type { OkuElement, PrimitiveProps } from '@oku-ui/primitive'
 import { Primitive, primitiveProps } from '@oku-ui/primitive'
 import { useForwardRef } from '@oku-ui/use-composable'
 import { OkuRovingFocusGroupItem } from '@oku-ui/roving-focus'
@@ -8,7 +8,7 @@ import { useRovingFocusGroupScope } from './toolbar'
 
 const BUTTON_NAME = 'OkuToolbarButton'
 
-export type ToolbarButtonIntrinsicElement = ElementType<'button'>
+export type ToolbarButtonNaviteElement = OkuElement<'button'>
 export type ToolbarButtonElement = HTMLButtonElement
 
 export interface ToolbarButtonProps extends PrimitiveProps {
@@ -58,5 +58,5 @@ const toolbarButton = defineComponent({
 // TODO: https://github.com/vuejs/core/pull/7444 after delete
 export const OkuToolbarButton = toolbarButton as typeof toolbarButton &
 (new () => {
-  $props: Partial<ToolbarButtonElement>
+  $props: ToolbarButtonNaviteElement
 })
diff --git a/packages/components/toolbar/src/toolbarLink.ts b/packages/components/toolbar/src/toolbarLink.ts
index ae33553f2..9011aa112 100644
--- a/packages/components/toolbar/src/toolbarLink.ts
+++ b/packages/components/toolbar/src/toolbarLink.ts
@@ -1,16 +1,15 @@
 import { defineComponent, h } from 'vue'
-import type { ElementType, PrimitiveProps } from '@oku-ui/primitive'
+import type { OkuElement, PrimitiveProps } from '@oku-ui/primitive'
 import { Primitive, primitiveProps } from '@oku-ui/primitive'
 import { useForwardRef } from '@oku-ui/use-composable'
 import { OkuRovingFocusGroupItem } from '@oku-ui/roving-focus'
 import { composeEventHandlers } from '@oku-ui/utils'
-import type { ScopeToolbar } from './utils'
 import { scopeToolbarProps } from './utils'
 import { useRovingFocusGroupScope } from './toolbar'
 
 const LINK_NAME = 'OkuToolbarLink'
 
-export type ToolbarLinkIntrinsicElement = ElementType<'a'>
+export type ToolbarLinkNaviteElement = OkuElement<'a'>
 export type ToolbarLinkElement = HTMLAnchorElement
 
 export interface ToolbarLinkProps extends PrimitiveProps {
@@ -68,5 +67,5 @@ const toolbarLink = defineComponent({
 // TODO: https://github.com/vuejs/core/pull/7444 after delete
 export const OkuToolbarLink = toolbarLink as typeof toolbarLink &
 (new () => {
-  $props: ScopeToolbar<Partial<ToolbarLinkElement>>
+  $props: ToolbarLinkNaviteElement
 })
diff --git a/packages/components/toolbar/src/toolbarSeparator.ts b/packages/components/toolbar/src/toolbarSeparator.ts
index 24f9a4bf9..56ae3cd86 100644
--- a/packages/components/toolbar/src/toolbarSeparator.ts
+++ b/packages/components/toolbar/src/toolbarSeparator.ts
@@ -1,13 +1,13 @@
 import { defineComponent, h } from 'vue'
 import { useForwardRef } from '@oku-ui/use-composable'
-import type { SeparatorElement, SeparatorIntrinsicElement, SeparatorProps } from '@oku-ui/separator'
+import type { SeparatorElement, SeparatorNaviteElement, SeparatorProps } from '@oku-ui/separator'
 import { OkuSeparator, separatorProps } from '@oku-ui/separator'
 import { scopeToolbarProps } from './utils'
 import { useToolbarInject } from './toolbar'
 
 const SEPARATOR_NAME = 'OkuToolbarSeparator'
 
-export type ToolbarSeparatorIntrinsicElement = SeparatorIntrinsicElement
+export type ToolbarSeparatorNaviteElement = SeparatorNaviteElement
 export type ToolbarSeparatorElement = SeparatorElement
 
 export interface ToolbarSeparatorProps extends SeparatorProps {}
@@ -44,5 +44,5 @@ const toolbarSeparator = defineComponent({
 // TODO: https://github.com/vuejs/core/pull/7444 after delete
 export const OkuToolbarSeparator = toolbarSeparator as typeof toolbarSeparator &
 (new () => {
-  $props: Partial<ToolbarSeparatorElement>
+  $props: ToolbarSeparatorNaviteElement
 })
diff --git a/packages/components/toolbar/src/toolbarToggleGroup.ts b/packages/components/toolbar/src/toolbarToggleGroup.ts
index 2b54b4767..14b006d2a 100644
--- a/packages/components/toolbar/src/toolbarToggleGroup.ts
+++ b/packages/components/toolbar/src/toolbarToggleGroup.ts
@@ -1,7 +1,7 @@
 import { defineComponent, h } from 'vue'
 import { primitiveProps } from '@oku-ui/primitive'
 import { useForwardRef } from '@oku-ui/use-composable'
-import type { ToggleGroupVariantElement, ToggleGroupVariantProps } from '@oku-ui/toggle-group'
+import type { ToggleGroupVariantProps } from '@oku-ui/toggle-group'
 import { OkuToggleGroup, toggleGroupVariantProps } from '@oku-ui/toggle-group'
 import { scopeToolbarProps } from './utils'
 import { useToggleGroupScope, useToolbarInject } from './toolbar'
@@ -52,5 +52,5 @@ const toolbarToggleGroup = defineComponent({
 // TODO: https://github.com/vuejs/core/pull/7444 after delete
 export const OkuToolbarToggleGroup = toolbarToggleGroup as typeof toolbarToggleGroup &
 (new () => {
-  $props: Partial<ToggleGroupVariantElement>
+  $props: ToolbarToggleGroupProps
 })
diff --git a/packages/components/toolbar/src/toolbarToggleItem.ts b/packages/components/toolbar/src/toolbarToggleItem.ts
index 7d1a0a2ea..c85cf9ae1 100644
--- a/packages/components/toolbar/src/toolbarToggleItem.ts
+++ b/packages/components/toolbar/src/toolbarToggleItem.ts
@@ -1,5 +1,5 @@
 import { defineComponent, h, mergeProps } from 'vue'
-import type { ElementType } from '@oku-ui/primitive'
+import type { OkuElement } from '@oku-ui/primitive'
 import { primitiveProps } from '@oku-ui/primitive'
 import { useForwardRef } from '@oku-ui/use-composable'
 import type { ToggleGroupItemProps } from '@oku-ui/toggle-group'
@@ -10,7 +10,7 @@ import { OkuToolbarButton } from './toolbarButton'
 
 const TOGGLE_ITEM_NAME = 'OkuToolbarToggleItem'
 
-export type ToolbarToggleItemIntrinsicElement = ElementType<'div'>
+export type ToolbarToggleItemNaviteElement = OkuElement<'div'>
 export type ToggleItemElement = HTMLDivElement
 export interface ToolbarToggleItemProps extends ToggleGroupItemProps {}
 
@@ -55,5 +55,5 @@ const toolbarToggleItem = defineComponent({
 // TODO: https://github.com/vuejs/core/pull/7444 after delete
 export const OkuToolbarToggleItem = toolbarToggleItem as typeof toolbarToggleItem &
 (new () => {
-  $props: Partial<ToggleItemElement>
+  $props: ToolbarToggleItemNaviteElement
 })
diff --git a/packages/components/tooltip/src/index.ts b/packages/components/tooltip/src/index.ts
index 9b8c2593f..5defa92e0 100644
--- a/packages/components/tooltip/src/index.ts
+++ b/packages/components/tooltip/src/index.ts
@@ -24,7 +24,7 @@ export {
 
 export type {
   TooltipTriggerElement,
-  TooltipTriggerIntrinsicElement,
+  TooltipTriggerNaviteElement,
   TooltipTriggerProps,
 } from './tooltipTrigger'
 
@@ -45,7 +45,7 @@ export {
 
 export type {
   TooltipContentElement,
-  TooltipContentIntrinsicElement,
+  TooltipContentNaviteElement,
   TooltipContentProps,
   TooltipContentEmits,
 } from './tooltipContent'
@@ -57,6 +57,6 @@ export {
 
 export type {
   TooltipArrowElement,
-  TooltipArrowIntrinsicElement,
+  TooltipArrowNaviteElement,
   TooltipArrowProps,
 } from './tooltipArrow'
diff --git a/packages/components/tooltip/src/tooltip.ts b/packages/components/tooltip/src/tooltip.ts
index 8940cdb3c..927e8793c 100644
--- a/packages/components/tooltip/src/tooltip.ts
+++ b/packages/components/tooltip/src/tooltip.ts
@@ -1,6 +1,5 @@
 import type { PropType, Ref } from 'vue'
 import { computed, defineComponent, h, onUnmounted, ref, toRefs, useModel } from 'vue'
-import type { ElementType } from '@oku-ui/primitive'
 import { primitiveProps } from '@oku-ui/primitive'
 import { useControllable, useId } from '@oku-ui/use-composable'
 import { OkuPopper } from '@oku-ui/popper'
@@ -11,9 +10,6 @@ import { scopeTooltipProps } from './types'
 
 export const TOOLTIP_NAME = 'OkuTooltip'
 
-export type LabelIntrinsicElement = ElementType<'label'>
-export type LabelElement = HTMLLabelElement
-
 type TooltipInjectValue = {
   contentId: Ref<string>
   open: Ref<boolean | undefined>
diff --git a/packages/components/tooltip/src/tooltipArrow.ts b/packages/components/tooltip/src/tooltipArrow.ts
index 0c6838bbf..8936819c9 100644
--- a/packages/components/tooltip/src/tooltipArrow.ts
+++ b/packages/components/tooltip/src/tooltipArrow.ts
@@ -1,11 +1,11 @@
 import { defineComponent, h, mergeProps } from 'vue'
 import { useForwardRef } from '@oku-ui/use-composable'
-import { OkuPopperArrow, type PopperArrowElement, type PopperArrowIntrinsicElement, type PopperArrowProps, popperArrowProps } from '@oku-ui/popper'
-import { type ScopeTooltip, scopeTooltipProps } from './types'
+import { OkuPopperArrow, type PopperArrowElement, type PopperArrowNaviteElement, type PopperArrowProps, popperArrowProps } from '@oku-ui/popper'
+import { scopeTooltipProps } from './types'
 import { usePopperScope } from './utils'
 import { useVisuallyHiddenContentInject } from './tooltipContentImpl'
 
-export type TooltipArrowIntrinsicElement = PopperArrowIntrinsicElement
+export type TooltipArrowNaviteElement = PopperArrowNaviteElement
 export type TooltipArrowElement = PopperArrowElement
 
 export interface TooltipArrowProps extends PopperArrowProps { }
@@ -53,5 +53,5 @@ const tooltipArrow = defineComponent({
 // TODO: https://github.com/vuejs/core/pull/7444 after delete
 export const OkuTooltipArrow = tooltipArrow as typeof tooltipArrow &
 (new () => {
-  $props: ScopeTooltip<Partial<PopperArrowElement>>
+  $props: TooltipArrowNaviteElement
 })
diff --git a/packages/components/tooltip/src/tooltipContent.ts b/packages/components/tooltip/src/tooltipContent.ts
index e13b61307..2a061c2f0 100644
--- a/packages/components/tooltip/src/tooltipContent.ts
+++ b/packages/components/tooltip/src/tooltipContent.ts
@@ -5,14 +5,13 @@ import { primitiveProps } from '@oku-ui/primitive'
 import { useForwardRef } from '@oku-ui/use-composable'
 import { OkuPresence } from '@oku-ui/presence'
 import { OkuTooltipContentImpl, tooltipContentImplProps } from './tooltipContentImpl'
-import type { TooltipContentImplElement, TooltipContentImplEmits, TooltipContentImplIntrinsicElement, TooltipContentImplProps } from './tooltipContentImpl'
+import type { TooltipContentImplElement, TooltipContentImplEmits, TooltipContentImplNaviteElement, TooltipContentImplProps } from './tooltipContentImpl'
 import { usePortalInject } from './tooltipPortal'
-import type { ScopeTooltip } from './types'
 import { scopeTooltipProps } from './types'
 import { useTooltipInject } from './tooltip'
 import { OkuTooltipContentHoverable } from './tooltipContentHoverable'
 
-export type TooltipContentIntrinsicElement = TooltipContentImplIntrinsicElement
+export type TooltipContentNaviteElement = TooltipContentImplNaviteElement
 export type TooltipContentElement = TooltipContentImplElement
 
 export interface TooltipContentProps extends PrimitiveProps, TooltipContentImplProps {
@@ -82,5 +81,5 @@ const tooltipContent = defineComponent({
 // TODO: https://github.com/vuejs/core/pull/7444 after delete
 export const OkuTooltipContent = tooltipContent as typeof tooltipContent &
 (new () => {
-  $props: ScopeTooltip<Partial<TooltipContentElement>>
+  $props: TooltipContentNaviteElement
 })
diff --git a/packages/components/tooltip/src/tooltipContentHoverable.ts b/packages/components/tooltip/src/tooltipContentHoverable.ts
index 9aea621ee..ed9c9d320 100644
--- a/packages/components/tooltip/src/tooltipContentHoverable.ts
+++ b/packages/components/tooltip/src/tooltipContentHoverable.ts
@@ -1,15 +1,15 @@
 import { defineComponent, h, mergeProps, ref, watchEffect } from 'vue'
 import { primitiveProps } from '@oku-ui/primitive'
 import { useComposedRefs, useForwardRef } from '@oku-ui/use-composable'
-import { OkuTooltipContentImpl, type TooltipContentImplElement, type TooltipContentImplIntrinsicElement, type TooltipContentImplProps, tooltipContentImplProps } from './tooltipContentImpl'
+import { OkuTooltipContentImpl, type TooltipContentImplElement, type TooltipContentImplNaviteElement, type TooltipContentImplProps, tooltipContentImplProps } from './tooltipContentImpl'
 import { scopeTooltipProps } from './types'
-import type { Polygon, ScopeTooltip } from './types'
+import type { Polygon } from './types'
 import { useTooltipInject } from './tooltip'
 import { CONTENT_NAME } from './tooltipContent'
 import { useTooltipProviderInject } from './tooltipProvider'
 import { getExitSideFromRect, getHull, getPaddedExitPoints, getPointsFromRect, isPointInPolygon } from './utils'
 
-export type TooltipContentHoverableElementIntrinsicElement = TooltipContentImplIntrinsicElement
+export type TooltipContentHoverableElementNaviteElement = TooltipContentImplNaviteElement
 export type TooltipContentHoverableElement = TooltipContentImplElement
 
 export interface TooltipContentHoverableProps extends TooltipContentImplProps {
@@ -131,5 +131,5 @@ const tooltipContentHoverable = defineComponent({
 // TODO: https://github.com/vuejs/core/pull/7444 after delete
 export const OkuTooltipContentHoverable = tooltipContentHoverable as typeof tooltipContentHoverable &
 (new () => {
-  $props: ScopeTooltip<Partial<TooltipContentHoverableElement>>
+  $props: TooltipContentHoverableElementNaviteElement
 })
diff --git a/packages/components/tooltip/src/tooltipContentImpl.ts b/packages/components/tooltip/src/tooltipContentImpl.ts
index e0706dfd6..ee3da234a 100644
--- a/packages/components/tooltip/src/tooltipContentImpl.ts
+++ b/packages/components/tooltip/src/tooltipContentImpl.ts
@@ -3,11 +3,11 @@ import { primitiveProps, propsOmit } from '@oku-ui/primitive'
 import { useForwardRef } from '@oku-ui/use-composable'
 import { type DismissableLayerEmits, OkuDismissableLayer, type DismissableLayerProps as OkuDismissableLayerProps } from '@oku-ui/dismissable-layer'
 import { OkuPopperContent, popperContentProps } from '@oku-ui/popper'
-import type { PopperContentProps as OkuPopperContentProps, PopperContentElement, PopperContentEmits, PopperContentIntrinsicElement } from '@oku-ui/popper'
+import type { PopperContentProps as OkuPopperContentProps, PopperContentElement, PopperContentEmits, PopperContentNaviteElement } from '@oku-ui/popper'
 import { OkuSlottable } from '@oku-ui/slot'
 import { OkuVisuallyHidden } from '@oku-ui/visually-hidden'
 import { TOOLTIP_OPEN, createTooltipProvide, usePopperScope } from './utils'
-import { type ScopeTooltip, scopeTooltipProps } from './types'
+import { scopeTooltipProps } from './types'
 import { TOOLTIP_NAME, useTooltipInject } from './tooltip'
 
 const CONTENT_NAME = 'OkuTooltipContentImpl'
@@ -19,7 +19,7 @@ export {
   useVisuallyHiddenContentInject,
 }
 
-export type TooltipContentImplIntrinsicElement = PopperContentIntrinsicElement
+export type TooltipContentImplNaviteElement = PopperContentNaviteElement
 export type TooltipContentImplElement = PopperContentElement
 
 export type DismissableLayerProps = OkuDismissableLayerProps
@@ -89,7 +89,7 @@ const tooltipContentImpl = defineComponent({
       scopeOkuTooltip,
       ...contentProps
     } = props
-    const { ...restAttrs } = attrs as TooltipContentImplIntrinsicElement
+    const { ...restAttrs } = attrs as TooltipContentImplNaviteElement
     const inject = useTooltipInject(CONTENT_NAME, props.scopeOkuTooltip)
     const popperScope = usePopperScope(props.scopeOkuTooltip)
     const forwardedRef = useForwardRef()
@@ -189,5 +189,5 @@ const tooltipContentImpl = defineComponent({
 // TODO: https://github.com/vuejs/core/pull/7444 after delete
 export const OkuTooltipContentImpl = tooltipContentImpl as typeof tooltipContentImpl &
 (new () => {
-  $props: ScopeTooltip<Partial<TooltipContentImplElement>>
+  $props: TooltipContentImplNaviteElement
 })
diff --git a/packages/components/tooltip/src/tooltipPortal.ts b/packages/components/tooltip/src/tooltipPortal.ts
index 1f80c0745..466dff9f5 100644
--- a/packages/components/tooltip/src/tooltipPortal.ts
+++ b/packages/components/tooltip/src/tooltipPortal.ts
@@ -1,16 +1,17 @@
 import type { PropType, Ref } from 'vue'
 import { computed, defineComponent, h, toRefs } from 'vue'
 import { primitiveProps } from '@oku-ui/primitive'
-import { OkuPortal, type PortalProps as OkuPortalProps, type PortalElement } from '@oku-ui/portal'
+import { OkuPortal } from '@oku-ui/portal'
+import type { PortalProps as OkuPortalProps, PortalElement, PortalElementNaviteElement } from '@oku-ui/portal'
 import { OkuPresence } from '@oku-ui/presence'
 import { createTooltipProvide } from './utils'
-import type { ScopeTooltip } from './types'
 import { scopeTooltipProps } from './types'
 import { useTooltipInject } from './tooltip'
 
 const PORTAL_NAME = 'OkuTooltipPortal'
 
 export type TooltipPortalElement = PortalElement
+export type TooltipPortalNaviteElement = PortalElementNaviteElement
 
 type PortalProvide = {
   forceMount?: Ref<true | undefined>
@@ -80,5 +81,5 @@ const tooltipPortal = defineComponent({
 // TODO: https://github.com/vuejs/core/pull/7444 after delete
 export const OkuTooltipPortal = tooltipPortal as typeof tooltipPortal &
 (new () => {
-  $props: ScopeTooltip<Partial<TooltipPortalElement>>
+  $props: TooltipPortalNaviteElement
 })
diff --git a/packages/components/tooltip/src/tooltipTrigger.ts b/packages/components/tooltip/src/tooltipTrigger.ts
index e3ea4611b..c1c0cfc6f 100644
--- a/packages/components/tooltip/src/tooltipTrigger.ts
+++ b/packages/components/tooltip/src/tooltipTrigger.ts
@@ -1,18 +1,17 @@
 import { defineComponent, h, ref, watchEffect } from 'vue'
-import type { ElementType } from '@oku-ui/primitive'
+import type { OkuElement } from '@oku-ui/primitive'
 import { Primitive, primitiveProps } from '@oku-ui/primitive'
 import { useComposedRefs, useForwardRef } from '@oku-ui/use-composable'
 import { OkuPopperAnchor } from '@oku-ui/popper'
 import { composeEventHandlers } from '@oku-ui/utils'
 import { usePopperScope } from './utils'
-import type { ScopeTooltip } from './types'
 import { scopeTooltipProps } from './types'
 import { useTooltipProviderInject } from './tooltipProvider'
 import { useTooltipInject } from './tooltip'
 
 const TRIGGER_NAME = 'OkuTooltipTrigger'
 
-export type TooltipTriggerIntrinsicElement = ElementType<'button'>
+export type TooltipTriggerNaviteElement = OkuElement<'button'>
 export type TooltipTriggerElement = HTMLButtonElement
 
 export interface TooltipTriggerProps { }
@@ -128,5 +127,5 @@ const tooltipTrigger = defineComponent({
 // TODO: https://github.com/vuejs/core/pull/7444 after delete
 export const OkuTooltipTrigger = tooltipTrigger as typeof tooltipTrigger &
 (new () => {
-  $props: ScopeTooltip<Partial<TooltipTriggerElement>>
+  $props: TooltipTriggerNaviteElement
 })
diff --git a/packages/components/visually-hidden/src/VisuallyHidden.ts b/packages/components/visually-hidden/src/VisuallyHidden.ts
index 848825f3d..28513b216 100644
--- a/packages/components/visually-hidden/src/VisuallyHidden.ts
+++ b/packages/components/visually-hidden/src/VisuallyHidden.ts
@@ -1,16 +1,15 @@
 import { Primitive, primitiveProps } from '@oku-ui/primitive'
 import type {
-  ElementType,
+  OkuElement,
   PrimitiveProps,
 
 } from '@oku-ui/primitive'
 import { useForwardRef } from '@oku-ui/use-composable'
-import type { CSSProperties } from 'vue'
 import { defineComponent, h } from 'vue'
 
 const NAME = 'OkuVisuallyHidden'
 
-export type VisuallyHiddenIntrinsicElement = ElementType<'button'>
+export type VisuallyHiddenNaviteElement = OkuElement<'button'>
 export type VisuallyHiddenElement = HTMLButtonElement
 
 export interface VisuallyHiddenProps extends PrimitiveProps {}
@@ -22,15 +21,13 @@ const visuallyHidden = defineComponent({
     ...primitiveProps,
   },
   setup(props, { attrs, slots }) {
-    const { ...visuallyHiddenAttrs } = attrs as VisuallyHiddenIntrinsicElement
-
     const forwardedRef = useForwardRef()
 
     const originalReturn = () =>
       h(Primitive.span, {
         ref: forwardedRef,
         asChild: props.asChild,
-        ...visuallyHiddenAttrs,
+        ...attrs,
         style: {
           position: 'absolute',
           border: '0px',
@@ -42,7 +39,7 @@ const visuallyHidden = defineComponent({
           clip: 'rect(0px, 0px, 0px, 0px)',
           whiteSpace: 'nowrap',
           wordWrap: 'normal',
-          ...(visuallyHiddenAttrs.style as CSSProperties),
+          ...attrs.style as any,
         },
       }, slots)
 
@@ -53,5 +50,5 @@ const visuallyHidden = defineComponent({
 // TODO: https://github.com/vuejs/core/pull/7444 after delete
 export const OkuVisuallyHidden = visuallyHidden as typeof visuallyHidden &
 (new () => {
-  $props: Partial<VisuallyHiddenElement>
+  $props: VisuallyHiddenNaviteElement
 })
diff --git a/packages/components/visually-hidden/src/stories/VisuallyHidden.stories.ts b/packages/components/visually-hidden/src/stories/VisuallyHidden.stories.ts
index d1e1b8cb1..9fe6b005d 100644
--- a/packages/components/visually-hidden/src/stories/VisuallyHidden.stories.ts
+++ b/packages/components/visually-hidden/src/stories/VisuallyHidden.stories.ts
@@ -28,7 +28,7 @@ type Story = StoryObj<typeof meta> & {
 export const Styled: Story = {
   args: {
     template: '#1',
-    // allShow: true,
+    // allshow: true,
   },
 
   render: (args: any) => ({
diff --git a/packages/core/focus-guards/src/utils.ts b/packages/core/focus-guards/src/utils.ts
index 14001585b..fbc0ba8d2 100644
--- a/packages/core/focus-guards/src/utils.ts
+++ b/packages/core/focus-guards/src/utils.ts
@@ -1,4 +1,4 @@
-import { onMounted, onUnmounted } from 'vue'
+import { onBeforeUnmount, onMounted } from 'vue'
 
 /** Number of components which have requested interest to have focus guards */
 let count = 0
@@ -15,7 +15,7 @@ export function useFocusGuards() {
     count++
   })
 
-  onUnmounted(() => {
+  onBeforeUnmount(() => {
     if (count === 1)
       document.querySelectorAll('[data-oku-focus-guard]').forEach(node => node.remove())
 
diff --git a/packages/core/primitive/src/index.ts b/packages/core/primitive/src/index.ts
index c5fc38084..3f115fadd 100644
--- a/packages/core/primitive/src/index.ts
+++ b/packages/core/primitive/src/index.ts
@@ -3,17 +3,16 @@ export type {
   ComponentProps,
   RefElement,
   MergeProps,
-  ElementType,
-  // ComponentPropsWithoutRef,
+  OkuElement,
   InstanceTypeRef,
   ComponentPublicInstanceRef,
   PrimitiveProps,
+  StyleOmit,
+  AriaAttributes,
 } from './types'
 
 export { primitiveProps, renderSlotFragments } from './utils'
 
 export { dispatchDiscreteCustomEvent } from './utils'
 
-export type { AriaAttributes } from './types'
-
 export { omit as propsOmit, pick as propsPick } from 'filter-anything'
diff --git a/packages/core/primitive/src/primitive.ts b/packages/core/primitive/src/primitive.ts
index f897e1c8f..164ece7d2 100644
--- a/packages/core/primitive/src/primitive.ts
+++ b/packages/core/primitive/src/primitive.ts
@@ -8,10 +8,11 @@ import {
 
 import { OkuSlot } from '@oku-ui/slot'
 import { useComposedRefs, useForwardRef } from '@oku-ui/use-composable'
-import { NODES, type Primitives } from './types'
+import { NODES } from './types'
+import type { OkuElement, Primitives } from './types'
 
 const Primitive = NODES.reduce((primitive, node) => {
-  const Node = defineComponent({
+  const selectNode = defineComponent({
     name: `Primitive${node}`,
     inheritAttrs: false,
     props: {
@@ -37,7 +38,12 @@ const Primitive = NODES.reduce((primitive, node) => {
     },
   })
 
-  return { ...primitive, [node]: Node }
+  const NodeProps = selectNode as typeof selectNode
+  & (new () => {
+    $props: OkuElement<typeof node, true>
+  })
+
+  return { ...primitive, [node]: NodeProps }
 }, {} as Primitives)
 
 const OkuPrimitive = Primitive
diff --git a/packages/core/primitive/src/types.ts b/packages/core/primitive/src/types.ts
index def1cce6f..2b1dac945 100644
--- a/packages/core/primitive/src/types.ts
+++ b/packages/core/primitive/src/types.ts
@@ -1,8 +1,11 @@
 import type {
   ComponentPublicInstance,
   DefineComponent,
+  Events,
   FunctionalComponent,
   IntrinsicElementAttributes,
+  ReservedProps,
+  StyleValue,
 } from 'vue'
 
 export const NODES = [
@@ -47,7 +50,7 @@ export type ElementConstructor<P> =
   | (new () => { $props: P })
   | ((props: P, ...args: any) => FunctionalComponent<any, any>)
 
-//  extends keyof JSX.IntrinsicElements | ElementConstructor<any>
+//  extends keyof JSX.NaviteElements | ElementConstructor<any>
 export type ComponentProps<
   T extends keyof JSX.IntrinsicElements | ElementConstructor<any>,
 > = T extends ElementConstructor<infer P>
@@ -95,6 +98,16 @@ export type ElementType<T extends keyof IntrinsicElementAttributes> = Partial<
   IntrinsicElementAttributes[T]
 >
 
+export type StyleOmit<T extends HTMLElement> = Partial<Omit<T, 'style'> & {
+  style?: StyleValue
+}> & AriaAttributes
+
+type OmitElementEvents<T extends keyof NodeElementTagNameMap> = Omit<NodeElementTagNameMap[T], Lowercase<keyof Events> | 'style'>
+
+export type OkuElement<T extends keyof NodeElementTagNameMap, TA extends boolean = false> = {
+  [K in keyof OmitElementEvents<T>]?: OmitElementEvents<T>[K]
+} & Partial<IntrinsicElementAttributes[T]> & (TA extends true ? ReservedProps : object) & Partial<AriaAttributes>
+
 /**
  * Wraps an array around itself at a given start index
  * Example: `wrapArray(['a', 'b', 'c', 'd'], 2) === ['c', 'd', 'a', 'b']`