From 9dd2faf1772ed69a53416abdb86b49fbb31daf91 Mon Sep 17 00:00:00 2001
From: geoffreygarrett <geoffrey@apollo.xyz>
Date: Wed, 8 Jan 2025 16:39:43 +0200
Subject: [PATCH 1/2] Update Visually Hidden to Leptos 0.7

---
 .../primitives/utilities/visually-hidden.md   | 58 ++++++++----
 .../leptos/visually-hidden/Cargo.toml         |  3 +-
 .../leptos/visually-hidden/README.md          |  2 +-
 .../visually-hidden/src/visually_hidden.rs    | 88 +++++++++----------
 4 files changed, 88 insertions(+), 63 deletions(-)

diff --git a/book/src/primitives/utilities/visually-hidden.md b/book/src/primitives/utilities/visually-hidden.md
index f420d132..467d5eb4 100644
--- a/book/src/primitives/utilities/visually-hidden.md
+++ b/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 />
+        <VisuallyHidden>"Your hidden content here"</VisuallyHidden>
     }
 }
 ```
@@ -81,14 +81,19 @@ Anything you put inside this component will be hidden from the screen but will b
 {{#tabs global="framework" }}
 {{#tab name="Leptos" }}
 
-<i>No props.</i>
+| 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                                          |
 
 {{#endtab }}
 {{#tab name="Yew" }}
 
-| Prop       | Type                                               | Default |
-| ---------- | -------------------------------------------------- | ------- |
-| `as_child` | `Option<Callback<VisuallyHiddenChildProps, Html>>` | -       |
+| Prop       | Type                                               | Default | Description |
+|------------|----------------------------------------------------|---------|-------------|
+| `as_child` | `Option<Callback<VisuallyHiddenChildProps, Html>>` | -       | -           |
+| `children` | `TODO`                                             | -       | TODO        |
 
 {{#endtab }}
 {{#endtabs }}
@@ -124,9 +129,9 @@ use radix_yew_icons::GearIcon;
 use radix_yew_visually_hidden::*;
 use yew::prelude::*;
 
-#[component]
-fn Example() -> impl IntoView {
-    view! {
+#[function_component]
+fn Example() -> Html {
+    html! {
         <button>
             <GearIcon />
             <VisuallyHidden>{"Settings"}</VisuallyHidden>
@@ -142,6 +147,27 @@ fn Example() -> impl IntoView {
 
 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)
\ No newline at end of file
diff --git a/packages/primitives/leptos/visually-hidden/Cargo.toml b/packages/primitives/leptos/visually-hidden/Cargo.toml
index 77eadc99..930aa2d4 100644
--- a/packages/primitives/leptos/visually-hidden/Cargo.toml
+++ b/packages/primitives/leptos/visually-hidden/Cargo.toml
@@ -11,4 +11,5 @@ version.workspace = true
 
 [dependencies]
 leptos.workspace = true
-leptos-style.workspace = true
+radix-leptos-primitive.workspace = true
+leptos-node-ref.workspace = true
diff --git a/packages/primitives/leptos/visually-hidden/README.md b/packages/primitives/leptos/visually-hidden/README.md
index 4771a8d2..2e3da0b6 100644
--- a/packages/primitives/leptos/visually-hidden/README.md
+++ b/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 [Rust For Web](https://github.com/RustForWeb).
+The Rust Radix project is part of the [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.
diff --git a/packages/primitives/leptos/visually-hidden/src/visually_hidden.rs b/packages/primitives/leptos/visually-hidden/src/visually_hidden.rs
index 36a6635b..c3aeb31d 100644
--- a/packages/primitives/leptos/visually-hidden/src/visually_hidden.rs
+++ b/packages/primitives/leptos/visually-hidden/src/visually_hidden.rs
@@ -1,56 +1,54 @@
-use leptos::prelude::*;
-use leptos_style::Style;
+use leptos::{html, prelude::*};
+use leptos_node_ref::AnyNodeRef;
+use radix_leptos_primitive::Primitive;
 
-pub struct UseVisuallyHiddenProps {
-    style: Style,
-}
-
-pub struct UseVisuallyHiddenAttrs {
-    style: Style,
-}
-
-pub fn use_visually_hidden(props: UseVisuallyHiddenProps) -> UseVisuallyHiddenAttrs {
-    UseVisuallyHiddenAttrs {
-        style: props.style.with_defaults([
-            // See: https://github.com/twbs/bootstrap/blob/master/scss/mixins/_screen-reader.scss
-            ("position", "absolute"),
-            ("border", "0px"),
-            ("width", "1px"),
-            ("height", "1px"),
-            ("padding", "0px"),
-            ("margin", "-1px"),
-            ("overflow", "hidden"),
-            ("clip", "rect(0, 0, 0, 0)"),
-            ("white-space", "nowrap"),
-            ("word-wrap", "normal"),
-        ]),
-    }
-}
+/* -------------------------------------------------------------------------------------------------
+ * 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(
-    #[prop(into, optional)] style: Style,
-    #[prop(optional)] children: Option<Children>,
-) -> impl IntoView {
-    let UseVisuallyHiddenAttrs { style } = use_visually_hidden(UseVisuallyHiddenProps { style });
+    /// The content to be visually hidden but still accessible to screen readers.
+    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! {
-        <span style=style>
-            {children.map(|children| children())}
-        </span>
+        <Primitive
+            element=html::span
+            children=children
+            as_child=as_child
+            node_ref=node_ref
+
+            // visually hide this content but keep it available to assistive tech
+            style:position="absolute"
+            style:border="0px"
+            style:width="1px"
+            style:height="1px"
+            style:padding="0px"
+            style:margin="-1px"
+            style:overflow="hidden"
+            style:clip="rect(0, 0, 0, 0)"
+            style:white-space="nowrap"
+            style:word-wrap="normal"
+        />
     }
 }
 
-#[component]
-pub fn VisuallyHiddenAsChild<R, RV>(
-    #[prop(into, optional)] style: Style,
-    render: R,
-) -> impl IntoView
-where
-    R: Fn(UseVisuallyHiddenAttrs) -> RV,
-    RV: IntoView,
-{
-    let attrs = use_visually_hidden(UseVisuallyHiddenProps { style });
+/* -----------------------------------------------------------------------------------------------*/
 
-    render(attrs)
+pub mod primitive {
+    pub use super::*;
+    pub use VisuallyHidden as Root;
 }

From bd966d85af9826c33144de552ececedba6e5956c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dani=C3=ABlle=20Huisman?= <danielle@huisman.me>
Date: Sun, 11 May 2025 18:56:50 +0200
Subject: [PATCH 2/2] Cleanup

---
 Cargo.lock                                    |  3 +-
 .../primitives/utilities/visually-hidden.md   | 54 ++++++-------------
 .../leptos/visually-hidden/Cargo.toml         |  2 +-
 .../leptos/visually-hidden/README.md          |  2 +-
 .../visually-hidden/src/visually_hidden.rs    | 31 ++---------
 5 files changed, 23 insertions(+), 69 deletions(-)

diff --git a/Cargo.lock b/Cargo.lock
index b74d7be6..1a811806 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -3242,7 +3242,8 @@ name = "radix-leptos-visually-hidden"
 version = "0.0.2"
 dependencies = [
  "leptos",
- "leptos-style",
+ "leptos-node-ref",
+ "radix-leptos-primitive",
 ]
 
 [[package]]
diff --git a/book/src/primitives/utilities/visually-hidden.md b/book/src/primitives/utilities/visually-hidden.md
index 467d5eb4..b6c1b4ac 100644
--- a/book/src/primitives/utilities/visually-hidden.md
+++ b/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)
\ No newline at end of file
+-   [Radix documentation](https://www.radix-ui.com/primitives/docs/utilities/visually-hidden)
diff --git a/packages/primitives/leptos/visually-hidden/Cargo.toml b/packages/primitives/leptos/visually-hidden/Cargo.toml
index 930aa2d4..06f90ed2 100644
--- a/packages/primitives/leptos/visually-hidden/Cargo.toml
+++ b/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" }
diff --git a/packages/primitives/leptos/visually-hidden/README.md b/packages/primitives/leptos/visually-hidden/README.md
index 2e3da0b6..4771a8d2 100644
--- a/packages/primitives/leptos/visually-hidden/README.md
+++ b/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.
diff --git a/packages/primitives/leptos/visually-hidden/src/visually_hidden.rs b/packages/primitives/leptos/visually-hidden/src/visually_hidden.rs
index c3aeb31d..7db2e742 100644
--- a/packages/primitives/leptos/visually-hidden/src/visually_hidden.rs
+++ b/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;
-}