From b9a85f3bc819ce5db90f8ea27d22bebd7ead5b38 Mon Sep 17 00:00:00 2001
From: khairulhaaziq <rhycoz@yahoo.com>
Date: Sun, 16 Jul 2023 03:33:58 +0800
Subject: [PATCH] tooltip style

---
 docs/content/components/dropdown-menu.md | 456 +++++++++++------------
 docs/content/components/tooltip.md       |  21 +-
 2 files changed, 238 insertions(+), 239 deletions(-)

diff --git a/docs/content/components/dropdown-menu.md b/docs/content/components/dropdown-menu.md
index b0d67c8b6..0e8d5cb24 100644
--- a/docs/content/components/dropdown-menu.md
+++ b/docs/content/components/dropdown-menu.md
@@ -70,40 +70,40 @@ Import all parts and piece them together.
 import * as DropdownMenu from 'radix-vue';
 
 export default () => (
-  <DropdownMenu.Root>
-    <DropdownMenu.Trigger />
-
-    <DropdownMenu.Portal>
-      <DropdownMenu.Content>
-        <DropdownMenu.Label />
-        <DropdownMenu.Item />
-
-        <DropdownMenu.Group>
-          <DropdownMenu.Item />
-        </DropdownMenu.Group>
-
-        <DropdownMenu.CheckboxItem>
-          <DropdownMenu.ItemIndicator />
-        </DropdownMenu.CheckboxItem>
-
-        <DropdownMenu.RadioGroup>
-          <DropdownMenu.RadioItem>
-            <DropdownMenu.ItemIndicator />
-          </DropdownMenu.RadioItem>
-        </DropdownMenu.RadioGroup>
-
-        <DropdownMenu.Sub>
-          <DropdownMenu.SubTrigger />
-          <DropdownMenu.Portal>
-            <DropdownMenu.SubContent />
-          </DropdownMenu.Portal>
-        </DropdownMenu.Sub>
-
-        <DropdownMenu.Separator />
-        <DropdownMenu.Arrow />
-      </DropdownMenu.Content>
-    </DropdownMenu.Portal>
-  </DropdownMenu.Root>
+  <DropdownMenuRoot>
+    <DropdownMenuTrigger />
+
+    <DropdownMenuPortal>
+      <DropdownMenuContent>
+        <DropdownMenuLabel />
+        <DropdownMenuItem />
+
+        <DropdownMenuGroup>
+          <DropdownMenuItem />
+        </DropdownMenuGroup>
+
+        <DropdownMenuCheckboxItem>
+          <DropdownMenuItemIndicator />
+        </DropdownMenuCheckboxItem>
+
+        <DropdownMenuRadioGroup>
+          <DropdownMenuRadioItem>
+            <DropdownMenuItemIndicator />
+          </DropdownMenuRadioItem>
+        </DropdownMenuRadioGroup>
+
+        <DropdownMenuSub>
+          <DropdownMenuSubTrigger />
+          <DropdownMenuPortal>
+            <DropdownMenuSubContent />
+          </DropdownMenuPortal>
+        </DropdownMenuSub>
+
+        <DropdownMenuSeparator />
+        <DropdownMenuArrow />
+      </DropdownMenuContent>
+    </DropdownMenuPortal>
+  </DropdownMenuRoot>
 );
 ```
 
@@ -114,7 +114,7 @@ export default () => (
 Contains all the parts of a dropdown menu.
 <!--
 <PropsTable
-  data={[
+  :data="[
     {
       name: 'defaultOpen',
       type: 'boolean',
@@ -171,15 +171,15 @@ Contains all the parts of a dropdown menu.
         </span>
       ),
     },
-  ]}
+  ]"
 />
 -->
 ### Trigger
 
-The button that toggles the dropdown menu. By default, the `DropdownMenu.Content` will position itself against the trigger.
+The button that toggles the dropdown menu. By default, the `DropdownMenuContent` will position itself against the trigger.
 <!--
 <PropsTable
-  data={[
+  :data="[
     {
       name: 'asChild',
       required: false,
@@ -187,11 +187,11 @@ The button that toggles the dropdown menu. By default, the `DropdownMenu.Content
       default: 'false',
       description: 'Change the default rendered element for the one passed as a child, merging their props and behavior.<br><br>Read our <a href=&quot;/guides/composition&quot;>Composition</a> guide for more details.',
     },
-  ]}
+  ]"
 />
 
 <DataAttributesTable
-  data={[
+  :data="[
     {
       attribute: '[data-state]',
       values: ['open', 'closed'],
@@ -200,7 +200,7 @@ The button that toggles the dropdown menu. By default, the `DropdownMenu.Content
       attribute: '[data-disabled]',
       values: 'Present when disabled',
     },
-  ]}
+  ]"
 />
 -->
 ### Portal
@@ -208,7 +208,7 @@ The button that toggles the dropdown menu. By default, the `DropdownMenu.Content
 When used, portals the content part into the `body`.
 <!--
 <PropsTable
-  data={[
+  :data="[
     {
       name: 'forceMount',
       type: 'boolean',
@@ -216,8 +216,8 @@ When used, portals the content part into the `body`.
         <span>
           Used to force mounting when more control is needed. Useful when
           controlling animation with React animation libraries. If used on this
-          part, it will be inherited by <Code>DropdownMenu.Content</Code> and{' '}
-          <Code>DropdownMenu.SubContent</Code> respectively.
+          part, it will be inherited by <Code>DropdownMenuContent</Code> and{' '}
+          <Code>DropdownMenuSubContent</Code> respectively.
         </span>
       ),
     },
@@ -227,7 +227,7 @@ When used, portals the content part into the `body`.
       default: 'document.body',
       description: 'Specify a container element to portal the content into.',
     },
-  ]}
+  ]"
 />
 -->
 ### Content
@@ -235,7 +235,7 @@ When used, portals the content part into the `body`.
 The component that pops out when the dropdown menu is open.
 <!--
 <PropsTable
-  data={[
+  :data="[
     {
       name: 'asChild',
       required: false,
@@ -320,7 +320,7 @@ The component that pops out when the dropdown menu is open.
         <span>
           Used to force mounting when more control is needed. Useful when
           controlling animation with React animation libraries. It inherits from{' '}
-          <Code>DropdownMenu.Portal</Code>.
+          <Code>DropdownMenuPortal</Code>.
         </span>
       ),
     },
@@ -440,11 +440,11 @@ The component that pops out when the dropdown menu is open.
         </span>
       ),
     },
-  ]}
+  ]"
 />
 
 <DataAttributesTable
-  data={[
+  :data="[
     {
       attribute: '[data-state]',
       values: ['open', 'closed'],
@@ -461,11 +461,11 @@ The component that pops out when the dropdown menu is open.
       attribute: '[data-orientation]',
       values: ['vertical', 'horizontal'],
     },
-  ]}
+  ]"
 />
 
 <CssVariablesTable
-  data={[
+  :data="[
     {
       cssVariable: '--radix-dropdown-menu-content-transform-origin',
       description: (
@@ -495,15 +495,15 @@ The component that pops out when the dropdown menu is open.
       cssVariable: '--radix-dropdown-menu-trigger-height',
       description: <>The height of the trigger</>,
     },
-  ]}
+  ]"
 />
 -->
 ### Arrow
 
-An optional arrow element to render alongside the dropdown menu. This can be used to help visually link the trigger with the `DropdownMenu.Content`. Must be rendered inside `DropdownMenu.Content`.
+An optional arrow element to render alongside the dropdown menu. This can be used to help visually link the trigger with the `DropdownMenuContent`. Must be rendered inside `DropdownMenuContent`.
 <!--
 <PropsTable
-  data={[
+  :data="[
     {
       name: 'asChild',
       required: false,
@@ -523,7 +523,7 @@ An optional arrow element to render alongside the dropdown menu. This can be use
       default: 5,
       description: <span>The height of the arrow in pixels.</span>,
     },
-  ]}
+  ]"
 />
 -->
 ### Item
@@ -531,7 +531,7 @@ An optional arrow element to render alongside the dropdown menu. This can be use
 The component that contains the dropdown menu items.
 <!--
 <PropsTable
-  data={[
+  :data="[
     {
       name: 'asChild',
       required: false,
@@ -572,11 +572,11 @@ The component that contains the dropdown menu items.
         </span>
       ),
     },
-  ]}
+  ]"
 />
 
 <DataAttributesTable
-  data={[
+  :data="[
     {
       attribute: '[data-orientation]',
       values: ['vertical', 'horizontal'],
@@ -589,15 +589,15 @@ The component that contains the dropdown menu items.
       attribute: '[data-disabled]',
       values: 'Present when disabled',
     },
-  ]}
+  ]"
 />
 -->
 ### Group
 
-Used to group multiple `DropdownMenu.Item`s.
+Used to group multiple `DropdownMenuItem`s.
 <!--
 <PropsTable
-  data={[
+  :data="[
     {
       name: 'asChild',
       required: false,
@@ -605,7 +605,7 @@ Used to group multiple `DropdownMenu.Item`s.
       default: 'false',
       description: 'Change the default rendered element for the one passed as a child, merging their props and behavior.<br><br>Read our <a href=&quot;/guides/composition&quot;>Composition</a> guide for more details.',
     },
-  ]}
+  ]"
 />
 -->
 ### Label
@@ -613,7 +613,7 @@ Used to group multiple `DropdownMenu.Item`s.
 Used to render a label. It won't be focusable using arrow keys.
 <!--
 <PropsTable
-  data={[
+  :data="[
     {
       name: 'asChild',
       required: false,
@@ -621,7 +621,7 @@ Used to render a label. It won't be focusable using arrow keys.
       default: 'false',
       description: 'Change the default rendered element for the one passed as a child, merging their props and behavior.<br><br>Read our <a href=&quot;/guides/composition&quot;>Composition</a> guide for more details.',
     },
-  ]}
+  ]"
 />
 -->
 ### CheckboxItem
@@ -629,7 +629,7 @@ Used to render a label. It won't be focusable using arrow keys.
 An item that can be controlled and rendered like a checkbox.
 <!--
 <PropsTable
-  data={[
+  :data="[
     {
       name: 'asChild',
       required: false,
@@ -688,11 +688,11 @@ An item that can be controlled and rendered like a checkbox.
         </span>
       ),
     },
-  ]}
+  ]"
 />
 
 <DataAttributesTable
-  data={[
+  :data="[
     {
       attribute: '[data-state]',
       values: ['checked', 'unchecked', 'indeterminate'],
@@ -705,15 +705,15 @@ An item that can be controlled and rendered like a checkbox.
       attribute: '[data-disabled]',
       values: 'Present when disabled',
     },
-  ]}
+  ]"
 />
 -->
 ### RadioGroup
 
-Used to group multiple `DropdownMenu.RadioItem`s.
+Used to group multiple `DropdownMenuRadioItem`s.
 <!--
 <PropsTable
-  data={[
+  :data="[
     {
       name: 'asChild',
       required: false,
@@ -732,7 +732,7 @@ Used to group multiple `DropdownMenu.RadioItem`s.
       typeSimple: 'function',
       description: 'Event handler called when the value changes.',
     },
-  ]}
+  ]"
 />
 -->
 ### RadioItem
@@ -740,7 +740,7 @@ Used to group multiple `DropdownMenu.RadioItem`s.
 An item that can be controlled and rendered like a radio.
 <!--
 <PropsTable
-  data={[
+  :data="[
     {
       name: 'asChild',
       required: false,
@@ -787,11 +787,11 @@ An item that can be controlled and rendered like a radio.
         </span>
       ),
     },
-  ]}
+  ]"
 />
 
 <DataAttributesTable
-  data={[
+  :data="[
     {
       attribute: '[data-state]',
       values: ['checked', 'unchecked', 'indeterminate'],
@@ -804,15 +804,15 @@ An item that can be controlled and rendered like a radio.
       attribute: '[data-disabled]',
       values: 'Present when disabled',
     },
-  ]}
+  ]"
 />
 -->
 ### ItemIndicator
 
-Renders when the parent `DropdownMenu.CheckboxItem` or `DropdownMenu.RadioItem` is checked. You can style this element directly, or you can use it as a wrapper to put an icon into, or both.
+Renders when the parent `DropdownMenuCheckboxItem` or `DropdownMenuRadioItem` is checked. You can style this element directly, or you can use it as a wrapper to put an icon into, or both.
 <!--
 <PropsTable
-  data={[
+  :data="[
     {
       name: 'asChild',
       required: false,
@@ -830,16 +830,16 @@ Renders when the parent `DropdownMenu.CheckboxItem` or `DropdownMenu.RadioItem`
         </span>
       ),
     },
-  ]}
+  ]"
 />
 
 <DataAttributesTable
-  data={[
+  :data="[
     {
       attribute: '[data-state]',
       values: ['checked', 'unchecked', 'indeterminate'],
     },
-  ]}
+  ]"
 />
 -->
 ### Separator
@@ -847,7 +847,7 @@ Renders when the parent `DropdownMenu.CheckboxItem` or `DropdownMenu.RadioItem`
 Used to visually separate items in the dropdown menu.
 <!--
 <PropsTable
-  data={[
+  :data="[
     {
       name: 'asChild',
       required: false,
@@ -855,7 +855,7 @@ Used to visually separate items in the dropdown menu.
       default: 'false',
       description: 'Change the default rendered element for the one passed as a child, merging their props and behavior.<br><br>Read our <a href=&quot;/guides/composition&quot;>Composition</a> guide for more details.',
     },
-  ]}
+  ]"
 />
 -->
 ### Sub
@@ -863,7 +863,7 @@ Used to visually separate items in the dropdown menu.
 Contains all the parts of a submenu.
 <!--
 <PropsTable
-  data={[
+  :data="[
     {
       name: 'defaultOpen',
       type: 'boolean',
@@ -894,15 +894,15 @@ Contains all the parts of a submenu.
         </span>
       ),
     },
-  ]}
+  ]"
 />
 -->
 ### SubTrigger
 
-An item that opens a submenu. Must be rendered inside `DropdownMenu.Sub`.
+An item that opens a submenu. Must be rendered inside `DropdownMenuSub`.
 <!--
 <PropsTable
-  data={[
+  :data="[
     {
       name: 'asChild',
       required: false,
@@ -931,11 +931,11 @@ An item that opens a submenu. Must be rendered inside `DropdownMenu.Sub`.
         </span>
       ),
     },
-  ]}
+  ]"
 />
 
 <DataAttributesTable
-  data={[
+  :data="[
     {
       attribute: '[data-state]',
       values: ['open', 'closed'],
@@ -948,11 +948,11 @@ An item that opens a submenu. Must be rendered inside `DropdownMenu.Sub`.
       attribute: '[data-disabled]',
       values: 'Present when disabled',
     },
-  ]}
+  ]"
 />
 
 <CssVariablesTable
-  data={[
+  :data="[
     {
       cssVariable: '--radix-dropdown-menu-content-transform-origin',
       description: (
@@ -982,15 +982,15 @@ An item that opens a submenu. Must be rendered inside `DropdownMenu.Sub`.
       cssVariable: '--radix-dropdown-menu-trigger-height',
       description: <>The height of the trigger</>,
     },
-  ]}
+  ]"
 />
 -->
 ### SubContent
 
-The component that pops out when a submenu is open. Must be rendered inside `DropdownMenu.Sub`.
+The component that pops out when a submenu is open. Must be rendered inside `DropdownMenuSub`.
 <!--
 <PropsTable
-  data={[
+  :data="[
     {
       name: 'asChild',
       required: false,
@@ -1064,7 +1064,7 @@ The component that pops out when a submenu is open. Must be rendered inside `Dro
         <span>
           Used to force mounting when more control is needed. Useful when
           controlling animation with React animation libraries. It inherits from{' '}
-          <Code>DropdownMenu.Portal</Code>.
+          <Code>DropdownMenuPortal</Code>.
         </span>
       ),
     },
@@ -1159,11 +1159,11 @@ The component that pops out when a submenu is open. Must be rendered inside `Dro
         </span>
       ),
     },
-  ]}
+  ]"
 />
 
 <DataAttributesTable
-  data={[
+  :data="[
     {
       attribute: '[data-state]',
       values: ['open', 'closed'],
@@ -1180,38 +1180,38 @@ The component that pops out when a submenu is open. Must be rendered inside `Dro
       attribute: '[data-orientation]',
       values: ['vertical', 'horizontal'],
     },
-  ]}
+  ]"
 />
 -->
 ## Examples
 
 ### With submenus
 
-You can create submenus by using `DropdownMenu.Sub` in combination with its parts.
+You can create submenus by using `DropdownMenuSub` in combination with its parts.
 
 ```jsx line=8-17
-<DropdownMenu.Root>
-  <DropdownMenu.Trigger>…</DropdownMenu.Trigger>
-  <DropdownMenu.Portal>
-    <DropdownMenu.Content>
-      <DropdownMenu.Item>…</DropdownMenu.Item>
-      <DropdownMenu.Item>…</DropdownMenu.Item>
-      <DropdownMenu.Separator />
-      <DropdownMenu.Sub>
-        <DropdownMenu.SubTrigger>Sub menu →</DropdownMenu.SubTrigger>
-        <DropdownMenu.Portal>
-          <DropdownMenu.SubContent>
-            <DropdownMenu.Item>Sub menu item</DropdownMenu.Item>
-            <DropdownMenu.Item>Sub menu item</DropdownMenu.Item>
-            <DropdownMenu.Arrow />
-          </DropdownMenu.SubContent>
-        </DropdownMenu.Portal>
-      </DropdownMenu.Sub>
-      <DropdownMenu.Separator />
-      <DropdownMenu.Item>…</DropdownMenu.Item>
-    </DropdownMenu.Content>
-  </DropdownMenu.Portal>
-</DropdownMenu.Root>
+<DropdownMenuRoot>
+  <DropdownMenuTrigger>…</DropdownMenuTrigger>
+  <DropdownMenuPortal>
+    <DropdownMenuContent>
+      <DropdownMenuItem>…</DropdownMenuItem>
+      <DropdownMenuItem>…</DropdownMenuItem>
+      <DropdownMenuSeparator />
+      <DropdownMenuSub>
+        <DropdownMenuSubTrigger>Sub menu →</DropdownMenuSubTrigger>
+        <DropdownMenuPortal>
+          <DropdownMenuSubContent>
+            <DropdownMenuItem>Sub menu item</DropdownMenuItem>
+            <DropdownMenuItem>Sub menu item</DropdownMenuItem>
+            <DropdownMenuArrow />
+          </DropdownMenuSubContent>
+        </DropdownMenuPortal>
+      </DropdownMenuSub>
+      <DropdownMenuSeparator />
+      <DropdownMenuItem>…</DropdownMenuItem>
+    </DropdownMenuContent>
+  </DropdownMenuPortal>
+</DropdownMenuRoot>
 ```
 
 ### With disabled items
@@ -1224,17 +1224,17 @@ import * as DropdownMenu from 'radix-vue';
 import './styles.css';
 
 export default () => (
-  <DropdownMenu.Root>
-    <DropdownMenu.Trigger>…</DropdownMenu.Trigger>
-    <DropdownMenu.Portal>
-      <DropdownMenu.Content>
-        <DropdownMenu.Item __className__="DropdownMenuItem" __disabled__>
+  <DropdownMenuRoot>
+    <DropdownMenuTrigger>…</DropdownMenuTrigger>
+    <DropdownMenuPortal>
+      <DropdownMenuContent>
+        <DropdownMenuItem __className__="DropdownMenuItem" __disabled__>
           …
-        </DropdownMenu.Item>
-        <DropdownMenu.Item className="DropdownMenuItem">…</DropdownMenu.Item>
-      </DropdownMenu.Content>
-    </DropdownMenu.Portal>
-  </DropdownMenu.Root>
+        </DropdownMenuItem>
+        <DropdownMenuItem className="DropdownMenuItem">…</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenuPortal>
+  </DropdownMenuRoot>
 );
 ```
 
@@ -1250,18 +1250,18 @@ export default () => (
 Use the `Separator` part to add a separator between items.
 
 ```jsx line=6,8
-<DropdownMenu.Root>
-  <DropdownMenu.Trigger>…</DropdownMenu.Trigger>
-  <DropdownMenu.Portal>
-    <DropdownMenu.Content>
-      <DropdownMenu.Item>…</DropdownMenu.Item>
-      <DropdownMenu.Separator />
-      <DropdownMenu.Item>…</DropdownMenu.Item>
-      <DropdownMenu.Separator />
-      <DropdownMenu.Item>…</DropdownMenu.Item>
-    </DropdownMenu.Content>
-  </DropdownMenu.Portal>
-</DropdownMenu.Root>
+<DropdownMenuRoot>
+  <DropdownMenuTrigger>…</DropdownMenuTrigger>
+  <DropdownMenuPortal>
+    <DropdownMenuContent>
+      <DropdownMenuItem>…</DropdownMenuItem>
+      <DropdownMenuSeparator />
+      <DropdownMenuItem>…</DropdownMenuItem>
+      <DropdownMenuSeparator />
+      <DropdownMenuItem>…</DropdownMenuItem>
+    </DropdownMenuContent>
+  </DropdownMenuPortal>
+</DropdownMenuRoot>
 ```
 
 ### With labels
@@ -1269,17 +1269,17 @@ Use the `Separator` part to add a separator between items.
 Use the `Label` part to help label a section.
 
 ```jsx line=5
-<DropdownMenu.Root>
-  <DropdownMenu.Trigger>…</DropdownMenu.Trigger>
-  <DropdownMenu.Portal>
-    <DropdownMenu.Content>
-      <DropdownMenu.Label>Label</DropdownMenu.Label>
-      <DropdownMenu.Item>…</DropdownMenu.Item>
-      <DropdownMenu.Item>…</DropdownMenu.Item>
-      <DropdownMenu.Item>…</DropdownMenu.Item>
-    </DropdownMenu.Content>
-  </DropdownMenu.Portal>
-</DropdownMenu.Root>
+<DropdownMenuRoot>
+  <DropdownMenuTrigger>…</DropdownMenuTrigger>
+  <DropdownMenuPortal>
+    <DropdownMenuContent>
+      <DropdownMenuLabel>Label</DropdownMenuLabel>
+      <DropdownMenuItem>…</DropdownMenuItem>
+      <DropdownMenuItem>…</DropdownMenuItem>
+      <DropdownMenuItem>…</DropdownMenuItem>
+    </DropdownMenuContent>
+  </DropdownMenuPortal>
+</DropdownMenuRoot>
 ```
 
 ### With checkbox items
@@ -1295,25 +1295,25 @@ export default () => {
   const [checked, setChecked] = React.useState(true);
 
   return (
-    <DropdownMenu.Root>
-      <DropdownMenu.Trigger>…</DropdownMenu.Trigger>
-      <DropdownMenu.Portal>
-        <DropdownMenu.Content>
-          <DropdownMenu.Item>…</DropdownMenu.Item>
-          <DropdownMenu.Item>…</DropdownMenu.Item>
-          <DropdownMenu.Separator />
-          <DropdownMenu.CheckboxItem
+    <DropdownMenuRoot>
+      <DropdownMenuTrigger>…</DropdownMenuTrigger>
+      <DropdownMenuPortal>
+        <DropdownMenuContent>
+          <DropdownMenuItem>…</DropdownMenuItem>
+          <DropdownMenuItem>…</DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuCheckboxItem
             checked={checked}
             onCheckedChange={setChecked}
           >
-            <DropdownMenu.ItemIndicator>
+            <DropdownMenuItemIndicator>
               <CheckIcon />
-            </DropdownMenu.ItemIndicator>
+            </DropdownMenuItemIndicator>
             Checkbox item
-          </DropdownMenu.CheckboxItem>
-        </DropdownMenu.Content>
-      </DropdownMenu.Portal>
-    </DropdownMenu.Root>
+          </DropdownMenuCheckboxItem>
+        </DropdownMenuContent>
+      </DropdownMenuPortal>
+    </DropdownMenuRoot>
   );
 };
 ```
@@ -1331,33 +1331,33 @@ export default () => {
   const [color, setColor] = React.useState('blue');
 
   return (
-    <DropdownMenu.Root>
-      <DropdownMenu.Trigger>…</DropdownMenu.Trigger>
-      <DropdownMenu.Portal>
-        <DropdownMenu.Content>
-          <DropdownMenu.RadioGroup value={color} onValueChange={setColor}>
-            <DropdownMenu.RadioItem value="red">
-              <DropdownMenu.ItemIndicator>
+    <DropdownMenuRoot>
+      <DropdownMenuTrigger>…</DropdownMenuTrigger>
+      <DropdownMenuPortal>
+        <DropdownMenuContent>
+          <DropdownMenuRadioGroup value={color} onValueChange={setColor}>
+            <DropdownMenuRadioItem value="red">
+              <DropdownMenuItemIndicator>
                 <CheckIcon />
-              </DropdownMenu.ItemIndicator>
+              </DropdownMenuItemIndicator>
               Red
-            </DropdownMenu.RadioItem>
-            <DropdownMenu.RadioItem value="blue">
-              <DropdownMenu.ItemIndicator>
+            </DropdownMenuRadioItem>
+            <DropdownMenuRadioItem value="blue">
+              <DropdownMenuItemIndicator>
                 <CheckIcon />
-              </DropdownMenu.ItemIndicator>
+              </DropdownMenuItemIndicator>
               Blue
-            </DropdownMenu.RadioItem>
-            <DropdownMenu.RadioItem value="green">
-              <DropdownMenu.ItemIndicator>
+            </DropdownMenuRadioItem>
+            <DropdownMenuRadioItem value="green">
+              <DropdownMenuItemIndicator>
                 <CheckIcon />
-              </DropdownMenu.ItemIndicator>
+              </DropdownMenuItemIndicator>
               Green
-            </DropdownMenu.RadioItem>
-          </DropdownMenu.RadioGroup>
-        </DropdownMenu.Content>
-      </DropdownMenu.Portal>
-    </DropdownMenu.Root>
+            </DropdownMenuRadioItem>
+          </DropdownMenuRadioGroup>
+        </DropdownMenuContent>
+      </DropdownMenuPortal>
+    </DropdownMenuRoot>
   );
 };
 ```
@@ -1370,21 +1370,21 @@ You can add extra decorative elements in the `Item` parts, such as images.
 import * as DropdownMenu from 'radix-vue';
 
 export default () => (
-  <DropdownMenu.Root>
-    <DropdownMenu.Trigger>…</DropdownMenu.Trigger>
-    <DropdownMenu.Portal>
-      <DropdownMenu.Content>
-        <DropdownMenu.Item>
+  <DropdownMenuRoot>
+    <DropdownMenuTrigger>…</DropdownMenuTrigger>
+    <DropdownMenuPortal>
+      <DropdownMenuContent>
+        <DropdownMenuItem>
           <img src="…" />
           Adolfo Hess
-        </DropdownMenu.Item>
-        <DropdownMenu.Item>
+        </DropdownMenuItem>
+        <DropdownMenuItem>
           <img src="…" />
           Miyah Myles
-        </DropdownMenu.Item>
-      </DropdownMenu.Content>
-    </DropdownMenu.Portal>
-  </DropdownMenu.Root>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenuPortal>
+  </DropdownMenuRoot>
 );
 ```
 
@@ -1400,14 +1400,14 @@ import * as DropdownMenu from 'radix-vue';
 import './styles.css';
 
 export default () => (
-  <DropdownMenu.Root>
-    <DropdownMenu.Trigger>…</DropdownMenu.Trigger>
-    <DropdownMenu.Portal>
-      <DropdownMenu.Content __className__="DropdownMenuContent" sideOffset={5}>
+  <DropdownMenuRoot>
+    <DropdownMenuTrigger>…</DropdownMenuTrigger>
+    <DropdownMenuPortal>
+      <DropdownMenuContent __className__="DropdownMenuContent" sideOffset={5}>
         …
-      </DropdownMenu.Content>
-    </DropdownMenu.Portal>
-  </DropdownMenu.Root>
+      </DropdownMenuContent>
+    </DropdownMenuPortal>
+  </DropdownMenuRoot>
 );
 ```
 
@@ -1429,14 +1429,14 @@ import * as DropdownMenu from 'radix-vue';
 import './styles.css';
 
 export default () => (
-  <DropdownMenu.Root>
-    <DropdownMenu.Trigger>…</DropdownMenu.Trigger>
-    <DropdownMenu.Portal>
-      <DropdownMenu.Content __className__="DropdownMenuContent">
+  <DropdownMenuRoot>
+    <DropdownMenuTrigger>…</DropdownMenuTrigger>
+    <DropdownMenuPortal>
+      <DropdownMenuContent __className__="DropdownMenuContent">
         …
-      </DropdownMenu.Content>
-    </DropdownMenu.Portal>
-  </DropdownMenu.Root>
+      </DropdownMenuContent>
+    </DropdownMenuPortal>
+  </DropdownMenuRoot>
 );
 ```
 
@@ -1469,14 +1469,14 @@ import * as DropdownMenu from 'radix-vue';
 import './styles.css';
 
 export default () => (
-  <DropdownMenu.Root>
-    <DropdownMenu.Trigger>…</DropdownMenu.Trigger>
-    <DropdownMenu.Portal>
-      <DropdownMenu.Content __className__="DropdownMenuContent">
+  <DropdownMenuRoot>
+    <DropdownMenuTrigger>…</DropdownMenuTrigger>
+    <DropdownMenuPortal>
+      <DropdownMenuContent __className__="DropdownMenuContent">
         …
-      </DropdownMenu.Content>
-    </DropdownMenu.Portal>
-  </DropdownMenu.Root>
+      </DropdownMenuContent>
+    </DropdownMenuPortal>
+  </DropdownMenuRoot>
 );
 ```
 
@@ -1523,12 +1523,12 @@ Adheres to the [Menu Button WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA
 ### Keyboard Interactions
 <!--
 <KeyboardTable
-  data={[
+  :data="[
     {
       keys: ['Space'],
       description: (
         <span>
-          When focus is on <Code>DropdownMenu.Trigger</Code>, opens the dropdown
+          When focus is on <Code>DropdownMenuTrigger</Code>, opens the dropdown
           menu and focuses the first item.
           <br />
           When focus is on an item, activates the focused item.
@@ -1539,7 +1539,7 @@ Adheres to the [Menu Button WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA
       keys: ['Enter'],
       description: (
         <span>
-          When focus is on <Code>DropdownMenu.Trigger</Code>, opens the dropdown
+          When focus is on <Code>DropdownMenuTrigger</Code>, opens the dropdown
           menu and focuses the first item.
           <br />
           When focus is on an item, activates the focused item.
@@ -1550,7 +1550,7 @@ Adheres to the [Menu Button WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA
       keys: ['ArrowDown'],
       description: (
         <span>
-          When focus is on <Code>DropdownMenu.Trigger</Code>, opens the dropdown
+          When focus is on <Code>DropdownMenuTrigger</Code>, opens the dropdown
           menu.
           <br />
           When focus is on an item, moves focus to the next item.
@@ -1567,7 +1567,7 @@ Adheres to the [Menu Button WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA
       keys: ['ArrowRight', 'ArrowLeft'],
       description: (
         <span>
-          When focus is on <Code>DropdownMenu.SubTrigger</Code>, opens or closes
+          When focus is on <Code>DropdownMenuSubTrigger</Code>, opens or closes
           the submenu depending on reading direction.
         </span>
       ),
@@ -1577,11 +1577,11 @@ Adheres to the [Menu Button WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA
       description: (
         <span>
           Closes the dropdown menu and moves focus to{' '}
-          <Code>DropdownMenu.Trigger</Code>.
+          <Code>DropdownMenuTrigger</Code>.
         </span>
       ),
     },
-  ]}
+  ]"
 />
 -->
 ## Custom APIs
@@ -1590,7 +1590,7 @@ Create your own API by abstracting the primitive parts into your own component.
 
 ### Abstract the arrow and item indicators
 
-This example abstracts the `DropdownMenu.Arrow` and `DropdownMenu.ItemIndicator` parts. It also wraps implementation details for `CheckboxItem` and `RadioItem`.
+This example abstracts the `DropdownMenuArrow` and `DropdownMenuItemIndicator` parts. It also wraps implementation details for `CheckboxItem` and `RadioItem`.
 
 #### Usage
 
diff --git a/docs/content/components/tooltip.md b/docs/content/components/tooltip.md
index c7c7c378b..0080fa31d 100644
--- a/docs/content/components/tooltip.md
+++ b/docs/content/components/tooltip.md
@@ -382,7 +382,7 @@ import {
 </script>
 
 <template>
-<TooltipProvider :delayDuration="800" :skipDelayDuration="500">
+	<TooltipProvider :delayDuration="800" :skipDelayDuration="500">
 		<TooltipRoot>
 			<TooltipTrigger>…</TooltipTrigger>
 			<TooltipContent>…</TooltipContent>
@@ -410,7 +410,7 @@ import {
 </script>
 
 <template>
-<TooltipRoot :delayDuration="0">
+	<TooltipRoot :delayDuration="0">
 		<TooltipTrigger>…</TooltipTrigger>
 		<TooltipContent>…</TooltipContent>
 	</TooltipRoot>
@@ -435,17 +435,16 @@ import {
 </script>
 
 <template>
-<TooltipRoot>
+	<TooltipRoot>
 		<TooltipTrigger asChild>
-			<span tabIndex=0>
-				<button disabled style={{ pointerEvents: "none" }}>
-					…
-				</button>
+			<span tabindex="0">
+				<button disabled style="{ pointerEvents: 'none' }">…</button>
 			</span>
 		</TooltipTrigger>
 		<TooltipContent>…</TooltipContent>
 	</TooltipRoot>
-<template>
+	<template></template>
+</template>
 ```
 
 ### Constrain the content size
@@ -467,7 +466,7 @@ import "./styles.css";
 </script>
 
 <template>
-<TooltipRoot>
+	<TooltipRoot>
 		<TooltipTrigger>…</TooltipTrigger>
 		<TooltipPortal>
 			<TooltipContent class="TooltipContent" :sideOffset="5">
@@ -503,7 +502,7 @@ import "./styles.css";
 </script>
 
 <template>
-<TooltipRoot>
+	<TooltipRoot>
 		<TooltipTrigger>…</TooltipTrigger>
 		<TooltipContent class="TooltipContent">…</TooltipContent>
 	</TooltipRoot>
@@ -546,7 +545,7 @@ import "./styles.css";
 </script>
 
 <template>
-<TooltipRoot>
+	<TooltipRoot>
 		<TooltipTrigger>…</TooltipTrigger>
 		<TooltipContent class="TooltipContent">…</TooltipContent>
 	</TooltipRoot>