feat(components): [VisuallyHidden] implements

Author: teleskop150750

README.md

@@ -70,9 +70,9 @@ Enter the component you want most in the components, leave the emojis and follow
 | [FocusScope](https://vue-primitives.netlify.app/?path=/story/utilities-focusscope--basic)             | ✓      |
 | Menu                                                                                                  | 🚧      |
 | [Popper](https://vue-primitives.netlify.app/?path=/story/utilities-popper--styled)                    | ✓      |
-| Portal                                                                                                | 🚧      |
+| Portal                                                                                                | ✓      |
 | [Presence](https://vue-primitives.netlify.app/?path=/story/utilities-presence--basic)                 | ✓      |
 | Primitives                                                                                            | ✓      |
 | [RovingFocusGroup](https://vue-primitives.netlify.app/?path=/story/utilities-rovingfocusgroup--basic) | ✓      |
 | Slot                                                                                                  | ✓      |
-| VisuallyHidden                                                                                        | 🚧      |
+| [VisuallyHidden](https://vue-primitives.netlify.app/?path=/story/utilities-visuallyhidden--basic)     | ✓      |

packages/vue-primitives/src/visually-hidden/VisuallyHidden.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { Primitive } from '../primitive/index.ts'
+
+defineOptions({
+  name: 'VisuallyHidden',
+})
+</script>
+
+<template>
+  <Primitive style="position: absolute; border: 0; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;">
+    <slot />
+  </Primitive>
+</template>

packages/vue-primitives/src/visually-hidden/index.ts

@@ -0,0 +1 @@
+export { default as VisuallyHidden } from './VisuallyHidden.vue'

packages/vue-primitives/src/visually-hidden/stories/Basic.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import { VisuallyHidden } from '../index.ts'
+</script>
+
+<template>
+  <button>
+    <VisuallyHidden>Save the file</VisuallyHidden>
+    <span aria-hidden>💾</span>
+  </button>
+</template>

packages/vue-primitives/src/visually-hidden/stories/VisuallyHidden.stories.tsx

@@ -0,0 +1,7 @@
+import CBasic from './Basic.vue'
+
+export default { title: 'Utilities/VisuallyHidden' }
+
+export function Basic() {
+  return CBasic
+}