Cleanup

book/src/primitives/utilities/visually-hidden.md

@@ -4,7 +4,7 @@ Hides content from the screen in an accessible way.
 
 ## Features
 
-- Visually hides content while preserving it for assistive technology.
+-   Visually hides content while preserving it for assistive technology.
 
 ## Installation
 
@@ -17,9 +17,9 @@ Install the component from your command line.
 cargo add radix-leptos-visually-hidden
 ```
 
-- [View on crates.io](https://crates.io/crates/radix-leptos-visually-hidden)
-- [View on docs.rs](https://docs.rs/radix-leptos-visually-hidden/latest/radix_leptos_visually_hidden/)
-- [View source](https://github.com/RustForWeb/radix/tree/main/packages/primitives/leptos/visually-hidden)
+-   [View on crates.io](https://crates.io/crates/radix-leptos-visually-hidden)
+-   [View on docs.rs](https://docs.rs/radix-leptos-visually-hidden/latest/radix_leptos_visually_hidden/)
+-   [View source](https://github.com/RustForWeb/radix/tree/main/packages/primitives/leptos/visually-hidden)
 
 {{#endtab }}
 {{#tab name="Yew" }}
@@ -28,9 +28,9 @@ cargo add radix-leptos-visually-hidden
 cargo add radix-yew-visually-hidden
 ```
 
-- [View on crates.io](https://crates.io/crates/radix-yew-visually-hidden)
-- [View on docs.rs](https://docs.rs/radix-yew-visually-hidden/latest/radix_yew_visually_hidden/)
-- [View source](https://github.com/RustForWeb/radix/tree/main/packages/primitives/yew/visually-hidden)
+-   [View on crates.io](https://crates.io/crates/radix-yew-visually-hidden)
+-   [View on docs.rs](https://docs.rs/radix-yew-visually-hidden/latest/radix_yew_visually_hidden/)
+-   [View source](https://github.com/RustForWeb/radix/tree/main/packages/primitives/yew/visually-hidden)
 
 {{#endtab }}
 {{#endtabs }}
@@ -49,7 +49,7 @@ use radix_leptos_visually_hidden::*;
 #[component]
 fn Anatomy() -> impl IntoView {
     view! {
-        <VisuallyHidden>"Your hidden content here"</VisuallyHidden>
+        <VisuallyHidden />
     }
 }
 ```
@@ -81,19 +81,16 @@ Anything you put inside this component will be hidden from the screen but will b
 {{#tabs global="framework" }}
 {{#tab name="Leptos" }}
 
-| Prop       | Type                                       | Default | Description                                                                     |
-|------------|--------------------------------------------|---------|---------------------------------------------------------------------------------|
-| `children` | `TypedChildrenFn<impl IntoView + 'static>` | -       | The content to be visually hidden but still accessible to screen readers        |
-| `as_child` | `MaybeProp<bool>`                          | `false` | If `true`, the `Primitive` is rendered as the child element rather than wrapped |
-| `node_ref` | `AnyNodeRef`                               | -       | A reference to the underlying DOM node                                          |
+| Prop       | Type              | Default |
+| ---------- | ----------------- | ------- |
+| `as_child` | `MaybeProp<bool>` | `false` |
 
 {{#endtab }}
 {{#tab name="Yew" }}
 
-| Prop       | Type                                               | Default | Description |
-|------------|----------------------------------------------------|---------|-------------|
-| `as_child` | `Option<Callback<VisuallyHiddenChildProps, Html>>` | -       | -           |
-| `children` | `TODO`                                             | -       | TODO        |
+| Prop       | Type                                               | Default |
+| ---------- | -------------------------------------------------- | ------- |
+| `as_child` | `Option<Callback<VisuallyHiddenChildProps, Html>>` | -       |
 
 {{#endtab }}
 {{#endtabs }}
@@ -147,27 +144,6 @@ fn Example() -> Html {
 
 This is useful in certain scenarios as an alternative to traditional labelling with `aria-label` or `aria-labelledby`.
 
-## Implementation Details
-
-The component uses the following CSS properties to hide content visually while keeping it accessible to screen readers:
-
-```css
-.visually-hidden {
-    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;
-}
-```
-
-These styles are based on Bootstrap's visually-hidden implementation.
-
 ## See Also
 
-- [Radix documentation](https://www.radix-ui.com/primitives/docs/utilities/visually-hidden)
+-   [Radix documentation](https://www.radix-ui.com/primitives/docs/utilities/visually-hidden)

packages/primitives/leptos/visually-hidden/Cargo.toml

@@ -11,5 +11,5 @@ version.workspace = true
 
 [dependencies]
 leptos.workspace = true
-radix-leptos-primitive.workspace = true
 leptos-node-ref.workspace = true
+radix-leptos-primitive = { path = "../primitive", version = "0.0.2" }

packages/primitives/leptos/visually-hidden/README.md

@@ -16,6 +16,6 @@ See [the Rust Radix book](https://radix.rustforweb.org/) for documentation.
 
 ## Rust For Web
 
-The Rust Radix project is part of the [Rust For Web](https://github.com/RustForWeb).
+The Rust Radix project is part of [Rust For Web](https://github.com/RustForWeb).
 
 [Rust For Web](https://github.com/RustForWeb) creates and ports web UI libraries for Rust. All projects are free and open source.

packages/primitives/leptos/visually-hidden/src/visually_hidden.rs

@@ -2,36 +2,20 @@ use leptos::{html, prelude::*};
 use leptos_node_ref::AnyNodeRef;
 use radix_leptos_primitive::Primitive;
 
-/* -------------------------------------------------------------------------------------------------
- * VisuallyHidden
- * -----------------------------------------------------------------------------------------------*/
-
-/// A component that visually hides its children while keeping them accessible
-/// to screen reader users. Matches the React `VisuallyHidden` component’s
-/// default styles and behavior.
 #[component]
-#[allow(non_snake_case)]
 pub fn VisuallyHidden(
-    /// The content to be visually hidden but still accessible to screen readers.
+    #[prop(into, optional)] as_child: MaybeProp<bool>,
+    #[prop(into, optional)] node_ref: AnyNodeRef,
     children: TypedChildrenFn<impl IntoView + 'static>,
-
-    /// If `true`, the `Primitive` is rendered as the child element rather than wrapped.
-    #[prop(into, optional)]
-    as_child: MaybeProp<bool>,
-
-    /// A reference to the underlying DOM node.
-    #[prop(into, optional)]
-    node_ref: AnyNodeRef,
 ) -> impl IntoView {
-    // See: https://github.com/twbs/bootstrap/blob/main/scss/mixins/_visually-hidden.scss
     view! {
         <Primitive
             element=html::span
-            children=children
             as_child=as_child
             node_ref=node_ref
+            children=children
 
-            // visually hide this content but keep it available to assistive tech
+            // See: https://github.com/twbs/bootstrap/blob/main/scss/mixins/_visually-hidden.scss
             style:position="absolute"
             style:border="0px"
             style:width="1px"
@@ -45,10 +29,3 @@ pub fn VisuallyHidden(
         />
     }
 }
-
-/* -----------------------------------------------------------------------------------------------*/
-
-pub mod primitive {
-    pub use super::*;
-    pub use VisuallyHidden as Root;
-}