diff --git a/Cargo.lock b/Cargo.lock
index dcebf221..f5697180 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -39,7 +39,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "1384d3fe1eecb464229fcf6eebb72306591c56bf27b373561489458a7c73027d"
 dependencies = [
  "futures",
- "thiserror 2.0.17",
+ "thiserror 2.0.18",
  "tokio",
  "wasm-bindgen-futures",
 ]
@@ -52,13 +52,12 @@ checksum = "a23eb6b1614318a8071c9b2521f36b424b2c83db5eb3a0fead4a6c0809af6e61"
 
 [[package]]
 name = "async-compression"
-version = "0.4.36"
+version = "0.4.37"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "98ec5f6c2f8bc326c994cb9e241cc257ddaba9afa8555a43cffbb5dd86efaa37"
+checksum = "d10e4f991a553474232bc0a31799f6d24b034a84c0971d80d2e2f78b2e576e40"
 dependencies = [
  "compression-codecs",
  "compression-core",
- "futures-core",
  "pin-project-lite",
  "tokio",
 ]
@@ -260,9 +259,9 @@ checksum = "e629a66d692cb9ff1a1c664e41771b3dcaf961985a9774c0eb0bd1b51cf60a48"
 
 [[package]]
 name = "cc"
-version = "1.2.52"
+version = "1.2.55"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "cd4932aefd12402b36c60956a4fe0035421f544799057659ff86f923657aada3"
+checksum = "47b26a0954ae34af09b50f0de26458fa95369a0d478d8236d3f93082b219bd29"
 dependencies = [
  "find-msvc-tools",
  "jobserver",
@@ -284,7 +283,7 @@ checksum = "a9dbbdc4b4d349732bc6690de10a9de952bd39ba6a065c586e26600b6b0b91f5"
 dependencies = [
  "serde",
  "serde_json",
- "thiserror 2.0.17",
+ "thiserror 2.0.18",
 ]
 
 [[package]]
@@ -295,9 +294,9 @@ checksum = "2550f75b8cfac212855f6b1885455df8eaee8fe8e246b647d69146142e016084"
 
 [[package]]
 name = "compression-codecs"
-version = "0.4.35"
+version = "0.4.36"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "b0f7ac3e5b97fdce45e8922fb05cae2c37f7bbd63d30dd94821dacfd8f3f2bf2"
+checksum = "00828ba6fd27b45a448e57dbfe84f1029d4c9f26b368157e9a448a5f49a2ec2a"
 dependencies = [
  "brotli",
  "compression-core",
@@ -470,9 +469,9 @@ dependencies = [
 
 [[package]]
 name = "data-encoding"
-version = "2.9.0"
+version = "2.10.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "2a2330da5de22e8a3cb63252ce2abb30116bf5265e89c0e01bc17015ce30a476"
+checksum = "d7a1e2f27636f116493b8b860f5546edb47c8d8f8ea73e1d2a20be88e28d1fea"
 
 [[package]]
 name = "deranged"
@@ -517,7 +516,7 @@ dependencies = [
 
 [[package]]
 name = "docs_macro"
-version = "0.4.0"
+version = "0.5.0"
 dependencies = [
  "serde",
  "syntect",
@@ -606,15 +605,15 @@ checksum = "37909eebbb50d72f9059c3b6d82c0463f2ff062c9e95845c43a6c9c0355411be"
 
 [[package]]
 name = "find-msvc-tools"
-version = "0.1.7"
+version = "0.1.9"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f449e6c6c08c865631d4890cfacf252b3d396c9bcc83adb6623cdb02a8336c41"
+checksum = "5baebc0774151f905a1a2cc41989300b1e6fbb29aff0ceffa1064fdd3088d582"
 
 [[package]]
 name = "flate2"
-version = "1.1.5"
+version = "1.1.8"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "bfe33edd8e85a12a67454e37f8c75e730830d83e313556ab9ebf9ee7fbeb3bfb"
+checksum = "b375d6465b98090a5f25b1c7703f3859783755aa9a80433b36e0379a3ec2f369"
 dependencies = [
  "crc32fast",
  "miniz_oxide",
@@ -752,9 +751,9 @@ dependencies = [
 
 [[package]]
 name = "getrandom"
-version = "0.2.16"
+version = "0.2.17"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "335ff9f135e4384c8150d6f27c6daed433577f86b4750418338c01a1a2528592"
+checksum = "ff2abc00be7fca6ebc474524697ae276ad847ad0a6b3faa4bcb027e9a4614ad0"
 dependencies = [
  "cfg-if",
  "libc",
@@ -1390,9 +1389,9 @@ dependencies = [
 
 [[package]]
 name = "js-sys"
-version = "0.3.83"
+version = "0.3.85"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "464a3709c7f55f1f721e5389aa6ea4e3bc6aba669353300af094b29ffbdde1d8"
+checksum = "8c942ebf8e95485ca0d52d97da7c5a2c387d0e7f0ba4c35e93bfcaee045955b3"
 dependencies = [
  "once_cell",
  "wasm-bindgen",
@@ -1430,7 +1429,7 @@ dependencies = [
  "server_fn",
  "slotmap",
  "tachys",
- "thiserror 2.0.17",
+ "thiserror 2.0.18",
  "throw_error",
  "typed-builder 0.23.2",
  "typed-builder-macro 0.23.2",
@@ -1473,7 +1472,7 @@ dependencies = [
  "config",
  "regex",
  "serde",
- "thiserror 2.0.17",
+ "thiserror 2.0.18",
  "typed-builder 0.21.2",
 ]
 
@@ -1582,7 +1581,7 @@ dependencies = [
  "rustc_version",
  "send_wrapper",
  "tachys",
- "thiserror 2.0.17",
+ "thiserror 2.0.18",
  "url",
  "wasm-bindgen",
  "web-sys",
@@ -1779,9 +1778,9 @@ checksum = "60993920e071b0c9b66f14e2b32740a4e27ffc82854dcd72035887f336a09a28"
 
 [[package]]
 name = "num-conv"
-version = "0.1.0"
+version = "0.2.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "51d515d32fb182ee37cda2ccdcb92950d6a3c2893aa280e540671c2cd0f3b1d9"
+checksum = "cf97ec579c3c42f953ef76dbf8d55ac91fb219dde70e49aa4a6b7d74e9919050"
 
 [[package]]
 name = "num_cpus"
@@ -1800,7 +1799,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "ed0423ff9973dea4d6bd075934fdda86ebb8c05bdf9d6b0507067d4a1226371d"
 dependencies = [
  "serde",
- "thiserror 2.0.17",
+ "thiserror 2.0.18",
 ]
 
 [[package]]
@@ -2048,9 +2047,9 @@ dependencies = [
 
 [[package]]
 name = "proc-macro2"
-version = "1.0.105"
+version = "1.0.106"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "535d180e0ecab6268a3e718bb9fd44db66bbbc256257165fc699dadf70d16fe7"
+checksum = "8fd00f0bb2e90d81d1044c2b32617f68fcb9fa3bb7640c23e9c748e53fb30934"
 dependencies = [
  "unicode-ident",
 ]
@@ -2079,9 +2078,9 @@ dependencies = [
 
 [[package]]
 name = "quote"
-version = "1.0.43"
+version = "1.0.44"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "dc74d9a594b72ae6656596548f56f667211f8a97b3d4c3d467150794690dc40a"
+checksum = "21b2ebcf727b7760c461f091f9f0f539b77b8e87f2fd88131e7f1b433b3cece4"
 dependencies = [
  "proc-macro2",
 ]
@@ -2136,9 +2135,9 @@ dependencies = [
 
 [[package]]
 name = "rand_core"
-version = "0.9.3"
+version = "0.9.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "99d9a13982dcf210057a8a78572b2217b667c3beacbf3a0d8b454f6f82837d38"
+checksum = "76afc826de14238e6e8c374ddcc1fa19e374fd8dd986b0d2af0d02377261d83c"
 dependencies = [
  "getrandom 0.3.4",
 ]
@@ -2163,7 +2162,7 @@ dependencies = [
  "send_wrapper",
  "serde",
  "slotmap",
- "thiserror 2.0.17",
+ "thiserror 2.0.18",
  "web-sys",
 ]
 
@@ -2285,7 +2284,7 @@ checksum = "a4689e6c2294d81e88dc6261c768b63bc4fcdb852be6d1352498b114f61383b7"
 dependencies = [
  "cc",
  "cfg-if",
- "getrandom 0.2.16",
+ "getrandom 0.2.17",
  "libc",
  "untrusted",
  "windows-sys 0.52.0",
@@ -2303,7 +2302,7 @@ dependencies = [
  "quote",
  "syn",
  "syn_derive",
- "thiserror 2.0.17",
+ "thiserror 2.0.18",
 ]
 
 [[package]]
@@ -2349,18 +2348,18 @@ dependencies = [
 
 [[package]]
 name = "rustls-pki-types"
-version = "1.13.2"
+version = "1.14.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "21e6f2ab2928ca4291b86736a8bd920a277a399bba1589409d72154ff87c1282"
+checksum = "be040f8b0a225e40375822a563fa9524378b9d63112f53e19ffff34df5d33fdd"
 dependencies = [
  "zeroize",
 ]
 
 [[package]]
 name = "rustls-webpki"
-version = "0.103.8"
+version = "0.103.9"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "2ffdfa2f5286e2247234e03f680868ac2815974dc39e00ea15adc445d0aafe52"
+checksum = "d7df23109aa6c1567d1c575b9952556388da57401e4ace1d15f79eedad0d8f53"
 dependencies = [
  "ring",
  "rustls-pki-types",
@@ -2503,7 +2502,7 @@ checksum = "f3faaf9e727533a19351a43cc5a8de957372163c7d35cc48c90b75cdda13c352"
 dependencies = [
  "percent-encoding",
  "serde",
- "thiserror 2.0.17",
+ "thiserror 2.0.18",
 ]
 
 [[package]]
@@ -2554,7 +2553,7 @@ dependencies = [
  "serde_json",
  "serde_qs",
  "server_fn_macro_default",
- "thiserror 2.0.17",
+ "thiserror 2.0.18",
  "throw_error",
  "tokio",
  "tower",
@@ -2641,7 +2640,7 @@ checksum = "e320a6c5ad31d271ad523dcf3ad13e2767ad8b1cb8f047f75a8aeaf8da139da2"
 
 [[package]]
 name = "singlestage"
-version = "0.4.0"
+version = "0.5.0"
 dependencies = [
  "leptos",
  "leptos_meta",
@@ -2655,7 +2654,7 @@ dependencies = [
 
 [[package]]
 name = "singlestage_docs"
-version = "0.4.0"
+version = "0.5.0"
 dependencies = [
  "axum",
  "console_error_panic_hook",
@@ -2714,9 +2713,9 @@ checksum = "67b1b7a3b5fe4f1376887184045fcf45c69e92af734b7aaddc05fb777b6fbd03"
 
 [[package]]
 name = "socket2"
-version = "0.6.1"
+version = "0.6.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "17129e116933cf371d018bb80ae557e889637989d8638274fb25622827b03881"
+checksum = "86f4aa3ad99f2088c990dfa82d367e19cb29268ed67c574d10d0a4bfe71f07e0"
 dependencies = [
  "libc",
  "windows-sys 0.60.2",
@@ -2799,7 +2798,7 @@ dependencies = [
  "serde",
  "serde_derive",
  "serde_json",
- "thiserror 2.0.17",
+ "thiserror 2.0.18",
  "walkdir",
  "yaml-rust",
 ]
@@ -2883,11 +2882,11 @@ dependencies = [
 
 [[package]]
 name = "thiserror"
-version = "2.0.17"
+version = "2.0.18"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f63587ca0f12b72a0600bcba1d40081f830876000bb46dd2337a3051618f4fc8"
+checksum = "4288b5bcbc7920c07a1149a35cf9590a2aa808e0bc1eafaade0b80947865fbc4"
 dependencies = [
- "thiserror-impl 2.0.17",
+ "thiserror-impl 2.0.18",
 ]
 
 [[package]]
@@ -2903,9 +2902,9 @@ dependencies = [
 
 [[package]]
 name = "thiserror-impl"
-version = "2.0.17"
+version = "2.0.18"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "3ff15c8ecd7de3849db632e14d18d2571fa09dfc5ed93479bc4485c7a517c913"
+checksum = "ebc4ee7f67670e9b64d05fa4253e753e016c6c95ff35b89b7941d6b856dec1d5"
 dependencies = [
  "proc-macro2",
  "quote",
@@ -2923,30 +2922,30 @@ dependencies = [
 
 [[package]]
 name = "time"
-version = "0.3.44"
+version = "0.3.46"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "91e7d9e3bb61134e77bde20dd4825b97c010155709965fedf0f49bb138e52a9d"
+checksum = "9da98b7d9b7dad93488a84b8248efc35352b0b2657397d4167e7ad67e5d535e5"
 dependencies = [
  "deranged",
  "itoa",
  "num-conv",
  "powerfmt",
- "serde",
+ "serde_core",
  "time-core",
  "time-macros",
 ]
 
 [[package]]
 name = "time-core"
-version = "0.1.6"
+version = "0.1.8"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "40868e7c1d2f0b8d73e4a8c7f0ff63af4f6d19be117e90bd73eb1d62cf831c6b"
+checksum = "7694e1cfe791f8d31026952abf09c69ca6f6fa4e1a1229e18988f06a04a12dca"
 
 [[package]]
 name = "time-macros"
-version = "0.2.24"
+version = "0.2.26"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "30cfb0125f12d9c277f35663a0a33f8c30190f4e4574868a330595412d34ebf3"
+checksum = "78cc610bac2dcee56805c99642447d4c5dbde4d01f752ffea0199aee1f601dc4"
 dependencies = [
  "num-conv",
  "time-core",
@@ -3074,9 +3073,9 @@ checksum = "ab16f14aed21ee8bfd8ec22513f7287cd4a91aa92e44edfe2c17ddd004e92607"
 
 [[package]]
 name = "tower"
-version = "0.5.2"
+version = "0.5.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d039ad9159c98b70ecfd540b2573b97f7f52c3e8d9f8ad57a24b916a536975f9"
+checksum = "ebe5ef63511595f1344e2d5cfa636d973292adc0eec1f0ad45fae9f0851ab1d4"
 dependencies = [
  "futures-core",
  "futures-util",
@@ -3168,7 +3167,7 @@ dependencies = [
  "log",
  "rand",
  "sha1",
- "thiserror 2.0.17",
+ "thiserror 2.0.18",
  "utf-8",
 ]
 
@@ -3280,9 +3279,9 @@ checksum = "b6c140620e7ffbb22c2dee59cafe6084a59b5ffc27a8859a5f0d494b5d52b6be"
 
 [[package]]
 name = "uuid"
-version = "1.19.0"
+version = "1.20.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "e2e054861b4bd027cd373e18e8d8d8e6548085000e41290d95ce0c373a654b4a"
+checksum = "ee48d38b119b0cd71fe4141b30f5ba9c7c5d9f4e7a3a8b4a674e4b6ef789976f"
 dependencies = [
  "getrandom 0.3.4",
  "js-sys",
@@ -3328,18 +3327,18 @@ checksum = "ccf3ec651a847eb01de73ccad15eb7d99f80485de043efb2f370cd654f4ea44b"
 
 [[package]]
 name = "wasip2"
-version = "1.0.1+wasi-0.2.4"
+version = "1.0.2+wasi-0.2.9"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "0562428422c63773dad2c345a1882263bbf4d65cf3f42e90921f787ef5ad58e7"
+checksum = "9517f9239f02c069db75e65f174b3da828fe5f5b945c4dd26bd25d89c03ebcf5"
 dependencies = [
  "wit-bindgen",
 ]
 
 [[package]]
 name = "wasm-bindgen"
-version = "0.2.106"
+version = "0.2.108"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "0d759f433fa64a2d763d1340820e46e111a7a5ab75f993d1852d70b03dbb80fd"
+checksum = "64024a30ec1e37399cf85a7ffefebdb72205ca1c972291c51512360d90bd8566"
 dependencies = [
  "cfg-if",
  "once_cell",
@@ -3350,11 +3349,12 @@ dependencies = [
 
 [[package]]
 name = "wasm-bindgen-futures"
-version = "0.4.56"
+version = "0.4.58"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "836d9622d604feee9e5de25ac10e3ea5f2d65b41eac0d9ce72eb5deae707ce7c"
+checksum = "70a6e77fd0ae8029c9ea0063f87c46fde723e7d887703d74ad2616d792e51e6f"
 dependencies = [
  "cfg-if",
+ "futures-util",
  "js-sys",
  "once_cell",
  "wasm-bindgen",
@@ -3363,9 +3363,9 @@ dependencies = [
 
 [[package]]
 name = "wasm-bindgen-macro"
-version = "0.2.106"
+version = "0.2.108"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "48cb0d2638f8baedbc542ed444afc0644a29166f1595371af4fecf8ce1e7eeb3"
+checksum = "008b239d9c740232e71bd39e8ef6429d27097518b6b30bdf9086833bd5b6d608"
 dependencies = [
  "quote",
  "wasm-bindgen-macro-support",
@@ -3373,9 +3373,9 @@ dependencies = [
 
 [[package]]
 name = "wasm-bindgen-macro-support"
-version = "0.2.106"
+version = "0.2.108"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "cefb59d5cd5f92d9dcf80e4683949f15ca4b511f4ac0a6e14d4e1ac60c6ecd40"
+checksum = "5256bae2d58f54820e6490f9839c49780dff84c65aeab9e772f15d5f0e913a55"
 dependencies = [
  "bumpalo",
  "proc-macro2",
@@ -3386,9 +3386,9 @@ dependencies = [
 
 [[package]]
 name = "wasm-bindgen-shared"
-version = "0.2.106"
+version = "0.2.108"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "cbc538057e648b67f72a982e708d485b2efa771e1ac05fec311f9f63e5800db4"
+checksum = "1f01b580c9ac74c8d8f0c0e4afb04eeef2acf145458e52c03845ee9cd23e3d12"
 dependencies = [
  "unicode-ident",
 ]
@@ -3430,9 +3430,9 @@ dependencies = [
 
 [[package]]
 name = "web-sys"
-version = "0.3.83"
+version = "0.3.85"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9b32828d774c412041098d182a8b38b16ea816958e07cf40eec2bc080ae137ac"
+checksum = "312e32e551d92129218ea9a2452120f4aabc03529ef03e4d0d82fb2780608598"
 dependencies = [
  "js-sys",
  "wasm-bindgen",
@@ -3649,9 +3649,9 @@ dependencies = [
 
 [[package]]
 name = "wit-bindgen"
-version = "0.46.0"
+version = "0.51.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f17a85883d4e6d00e8a97c586de764dabcc06133f7f1d55dce5cdc070ad7fe59"
+checksum = "d7249219f66ced02969388cf2bb044a09756a083d0fab1e566056b04d9fbcaa5"
 
 [[package]]
 name = "writeable"
@@ -3705,18 +3705,18 @@ dependencies = [
 
 [[package]]
 name = "zerocopy"
-version = "0.8.33"
+version = "0.8.37"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "668f5168d10b9ee831de31933dc111a459c97ec93225beb307aed970d1372dfd"
+checksum = "7456cf00f0685ad319c5b1693f291a650eaf345e941d082fc4e03df8a03996ac"
 dependencies = [
  "zerocopy-derive",
 ]
 
 [[package]]
 name = "zerocopy-derive"
-version = "0.8.33"
+version = "0.8.37"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "2c7962b26b0a8685668b671ee4b54d007a67d4eaf05fda79ac0ecf41e32270f1"
+checksum = "1328722bbf2115db7e19d69ebcc15e795719e2d66b60827c6a69a117365e37a0"
 dependencies = [
  "proc-macro2",
  "quote",
@@ -3785,9 +3785,9 @@ dependencies = [
 
 [[package]]
 name = "zmij"
-version = "1.0.12"
+version = "1.0.17"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "2fc5a66a20078bf1251bde995aa2fdcc4b800c70b5d92dd2c62abc5c60f679f8"
+checksum = "02aae0f83f69aafc94776e879363e9771d7ecbffe2c7fbb6c14c5e00dfe88439"
 
 [[package]]
 name = "zstd"
diff --git a/Cargo.toml b/Cargo.toml
index 55e9639c..487e1e69 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -3,7 +3,7 @@ resolver = "2"
 members = ["singlestage", "docs", "singlestage_macro", "docs_macro"]
 
 [workspace.package]
-version = "0.4.0"
+version = "0.5.0"
 authors = ["Adam Doyle <adam@doordesk.net>"]
 edition = "2024"
 rust-version = "1.88"
diff --git a/README.md b/README.md
index 10f8780f..9e042169 100644
--- a/README.md
+++ b/README.md
@@ -41,7 +41,7 @@ Or add singlestage to your Cargo.toml:
 [dependencies]
 leptos = "0.8"
 ...
-singlestage = "0.4"
+singlestage = "0.5"
 ```
 
 ### Nightly
@@ -51,7 +51,7 @@ singlestage = "0.4"
 [dependencies]
 leptos = { version = "0.8", features = ["nightly"] }
 ...
-singlestage = { version = "0.4", features = ["nightly"] }
+singlestage = { version = "0.5", features = ["nightly"] }
 ```
 
 Add the nightly feature to singlestage just as you do with Leptos, if using nightly.
@@ -66,7 +66,7 @@ Add the islands feature to singlestage just as you do with Leptos, if using isla
 [dependencies]
 leptos = { version = "0.8", features = ["islands"] }
 ...
-singlestage = { version = "0.4", features = ["islands"] }
+singlestage = { version = "0.5", features = ["islands"] }
 ```
 
 ### SSR
@@ -85,7 +85,7 @@ Add the stores feature to singlestage if you're using reactive stores. This will
 leptos = "0.8"
 ...
 reactive_stores = "0.3"
-singlestage = { version = "0.4", features = ["stores"] }
+singlestage = { version = "0.5", features = ["stores"] }
 ```
 
 ### Tailwind BYOB
diff --git a/docs/src/routes/components/breadcrumb/examples/breadcrumb.rs b/docs/src/routes/components/breadcrumb/examples/breadcrumb.rs
index 3456a36a..8aa31099 100644
--- a/docs/src/routes/components/breadcrumb/examples/breadcrumb.rs
+++ b/docs/src/routes/components/breadcrumb/examples/breadcrumb.rs
@@ -14,10 +14,7 @@ pub fn BreadcrumbExample() -> impl IntoView {
             <BreadcrumbItem>
                 <DropdownMenu>
                     <DropdownMenuTrigger>
-                        <Button
-                            class="flex size-9 items-center justify-center h-4 w-4 hover:text-(--foreground) cursor-pointer"
-                            variant="ghost"
-                        >
+                        <Button size="icon-sm" variant="ghost">
                             {icon!(icondata::VsEllipsis)}
                         </Button>
                     </DropdownMenuTrigger>
diff --git a/docs/src/routes/components/button_group/examples/button_group.rs b/docs/src/routes/components/button_group/examples/button_group.rs
index 287bc6ed..74193d0a 100644
--- a/docs/src/routes/components/button_group/examples/button_group.rs
+++ b/docs/src/routes/components/button_group/examples/button_group.rs
@@ -22,7 +22,7 @@ pub fn ButtonGroupExample() -> impl IntoView {
                             {icon!(icondata::FiMoreHorizontal)}
                         </Button>
                     </DropdownMenuTrigger>
-                    <DropdownMenuContent class="w-52">
+                    <DropdownMenuContent align="end" class="w-52">
                         <DropdownMenuGroup>
                             <DropdownMenuItem>
                                 {icon!(icondata::LuMailCheck)} "Mark as Read"
diff --git a/docs/src/routes/components/button_group/examples/button_group_dropdown.rs b/docs/src/routes/components/button_group/examples/button_group_dropdown.rs
index e6af1936..07bdc154 100644
--- a/docs/src/routes/components/button_group/examples/button_group_dropdown.rs
+++ b/docs/src/routes/components/button_group/examples/button_group_dropdown.rs
@@ -8,11 +8,9 @@ pub fn ButtonGroupDropdownExample() -> impl IntoView {
             <Button variant="outline">"Follow"</Button>
             <DropdownMenu>
                 <DropdownMenuTrigger>
-                    <Button variant="outline" class="!pl-2">
-                        {icon!(icondata::LuChevronDown)}
-                    </Button>
+                    <Button variant="outline">{icon!(icondata::LuChevronDown)}</Button>
                 </DropdownMenuTrigger>
-                <DropdownMenuContent class="[--radius:1rem]">
+                <DropdownMenuContent align="end" class="[--radius:1rem]">
                     <DropdownMenuGroup>
                         <DropdownMenuItem>
                             {icon!(icondata::BiVolumeMuteRegular)} "Mute Conversation"
diff --git a/docs/src/routes/components/button_group/examples/button_group_popover.rs b/docs/src/routes/components/button_group/examples/button_group_popover.rs
index af5899cc..9e3454ff 100644
--- a/docs/src/routes/components/button_group/examples/button_group_popover.rs
+++ b/docs/src/routes/components/button_group/examples/button_group_popover.rs
@@ -12,20 +12,22 @@ pub fn ButtonGroupPopoverExample() -> impl IntoView {
                         {icon!(icondata::LuChevronDown)}
                     </Button>
                 </PopoverTrigger>
-                <PopoverContent class="rounded-xl p-0 text-sm max-w-72">
-                    <p class="px-4 pt-3 text-sm font-medium">"Agent Tasks"</p>
-                    <Separator />
-                    <div class="p-4 pt-0 text-sm *:[p:not(:last-child)]:mb-2">
-                        <Textarea
-                            placeholder="Describe your task in natural language."
-                            class="mb-4 resize-none"
-                        />
-                        <p class="font-medium">"Start a new task with Copilot"</p>
-                        <p class="text-(--muted-foreground)">
-                            "Describe your task in natural language. Copilot will work in the
-                            background and open a pull request for your review."
-                        </p>
-                    </div>
+                <PopoverContent align="end">
+                    <PopoverHeader>
+                        <PopoverTitle>"Start a new task with Copilot"</PopoverTitle>
+                        <PopoverDescription>
+                            "Describe your task in natural language."
+                        </PopoverDescription>
+                    </PopoverHeader>
+                    <Field>
+                        <FieldLabel label_for="task" class="sr-only">
+                            "Task Description"
+                        </FieldLabel>
+                        <Textarea id="task" placeholder="I need to..." class="resize-none" />
+                        <FieldDescription>
+                            "Copilot will open a pull request for review."
+                        </FieldDescription>
+                    </Field>
                 </PopoverContent>
             </Popover>
         </ButtonGroup>
diff --git a/docs/src/routes/components/context_menu/anatomy.rs b/docs/src/routes/components/context_menu/anatomy.rs
index dacb8377..aec1d416 100644
--- a/docs/src/routes/components/context_menu/anatomy.rs
+++ b/docs/src/routes/components/context_menu/anatomy.rs
@@ -1,5 +1,5 @@
 use leptos::prelude::*;
-use singlestage::context_menu::*;
+use singlestage::*;
 
 #[component]
 pub fn ContextMenuAnatomy() -> impl IntoView {
@@ -14,6 +14,23 @@ pub fn ContextMenuAnatomy() -> impl IntoView {
                     </ContextMenuItem>
                 </ContextMenuGroup>
                 <ContextMenuSeparator />
+                <ContextMenuSub>
+                    <ContextMenuSubTrigger />
+                    <ContextMenuSubContent>
+                        <ContextMenuGroup>
+                            <CheckboxItem />
+                            <CheckboxItem />
+                        </ContextMenuGroup>
+                        <ContextMenuSeparator />
+                        <ContextMenuGroup>
+                            <RadioGroup>
+                                <RadioItem />
+                                <RadioItem />
+                                <RadioItem />
+                            </RadioGroup>
+                        </ContextMenuGroup>
+                    </ContextMenuSubContent>
+                </ContextMenuSub>
             </ContextMenuContent>
         </ContextMenu>
     }
diff --git a/docs/src/routes/components/context_menu/component.toml b/docs/src/routes/components/context_menu/component.toml
index 771d18b8..c196a449 100644
--- a/docs/src/routes/components/context_menu/component.toml
+++ b/docs/src/routes/components/context_menu/component.toml
@@ -2,16 +2,89 @@ name = "Context Menu"
 description = """Displays a menu to the user — such as a set of actions or functions — triggered \
 by a button."""
 
+[info]
+title = "This component uses newly available browser features"
+description = """"<p>"This component uses CSS Anchor Positioning which has only been widely \
+supported since January 2026. If you're targeting older or less mainstream browsers then maybe \
+this component isn't for you, yet. "</p><p>" Alternatively you can use Singlestage 0.4 which \
+positions the component correctly but with limited flexibility for alignment, or roll your own \
+using Singlestage CSS classes for consistent styling. "</p><singlestage::Link style="color: \
+var(--foreground)" href="https://caniuse.com/css-anchor-positioning"> "More Info" \
+</singlestage::Link>""""
+
 [[examples]]
 name = "Context Menu"
 
+[[examples]]
+name = "Context Basic"
+title = "Basic"
+description = "A simple context menu with a few actions."
+
+[[examples]]
+name = "Context Sub"
+title = "Submenu"
+description = "Use ContextMenuSub to nest secondary actions."
+
+[[examples]]
+name = "Context Shortcuts"
+title = "Shortcuts"
+description = "Add ContextMenuShortcut to show keyboard hints."
+
+[[examples]]
+name = "Context Groups"
+title = "Groups"
+description = "Group related actions and separate them with dividers."
+
+[[examples]]
+name = "Context Icons"
+title = "Icons"
+description = "Combine icons with labels for quick scanning."
+
+[[examples]]
+name = "Context Checkboxes"
+title = "Checkboxes"
+description = "Checkboxes can be used in context menus."
+
+[[examples]]
+name = "Context Radio"
+title = "Radio"
+description = "Radio buttons can be used in context menus."
+
+[[examples]]
+name = "Context Destructive"
+title = "Destructive"
+description = "Use the destructive variant for irreversible actions."
+
+[[references]]
+name = "CheckboxItem"
+description = "A checkbox item for popover menus."
+extra = """Implements <a class="singlestage-link" \
+href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes">global</a> \
+and <a class="singlestage-link" \
+href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/li#attributes">li</a> \
+attributes."""
+attrs = [
+  { attr = "disabled", attr_type = "bool", default = "false", description = """Controls \
+    whether the item appears disabled or not.""" },
+  { attr = "dismiss", attr_type = "bool", default = "true", description = """Toggle whether \
+    clicking this item dismisses the parent menu.""" },
+  { attr = "inset", attr_type = "bool", default = "false", description = """Set whether or not \
+    this element should display inset from its normal position.""" },
+  { attr = "variant", attr_type = "String", default = """""""", description = """Set the display \
+    variant of the item. Accepted values: \"destructive\".""" },
+]
+
 [[references]]
 name = "ContextMenu"
 description = "Contains all the parts of a context menu."
 extra = """Implements <a class="singlestage-link" \
 href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes">global</a> \
 attributes."""
-attrs = []
+attrs = [
+  { attr = "open", attr_type = "bool", default = "false", description = """Reactive signal that \
+    can remotely control the open state of the popover but is not coupled to the actual state of \
+    the popover.""" },
+]
 
 [[references]]
 name = "ContextMenuContent"
@@ -40,6 +113,10 @@ attributes."""
 attrs = [
   { attr = "disabled", attr_type = "bool", default = "false", description = """Controls \
     whether the item appears disabled or not.""" },
+  { attr = "dismiss", attr_type = "bool", default = "true", description = """Toggle whether \
+    clicking this item dismisses the parent menu.""" },
+  { attr = "inset", attr_type = "bool", default = "false", description = """Set whether or not \
+    this element should display inset from its normal position.""" },
   { attr = "variant", attr_type = "String", default = """""""", description = """Set the display \
     variant of the item. Accepted values: \"destructive\".""" },
 ]
@@ -50,7 +127,10 @@ description = "Labels groups."
 extra = """Implements <a class="singlestage-link" \
 href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes">global</a> \
 attributes."""
-attrs = []
+attrs = [
+  { attr = "inset", attr_type = "bool", default = "false", description = """Set whether or not \
+    this element should display inset from its normal position.""" },
+]
 
 [[references]]
 name = "ContextMenuSeparator"
@@ -68,6 +148,43 @@ href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attribu
 attributes."""
 attrs = []
 
+[[references]]
+name = "ContextSubMenu"
+description = "Contains all the parts of a sub menu."
+extra = """Implements <a class="singlestage-link" \
+href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes">global</a> \
+attributes."""
+attrs = [
+  { attr = "open", attr_type = "bool", default = "false", description = """Reactive signal that \
+    can remotely control the open state of the popover but is not coupled to the actual state of \
+    the popover.""" },
+]
+
+[[references]]
+name = "ContextMenuSubContent"
+description = "The component that pops out when the sub trigger is triggered."
+extra = """Implements <a class="singlestage-link" \
+href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes">global</a> \
+attributes."""
+attrs = []
+
+[[references]]
+name = "ContextMenuSubTrigger"
+description = "Defines the area where a sub menu can be triggered."
+extra = """Implements <a class="singlestage-link" \
+href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes">global</a> \
+and <a class="singlestage-link" \
+href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/li#attributes">li</a> \
+attributes."""
+attrs = [
+  { attr = "disabled", attr_type = "bool", default = "false", description = """Controls \
+    whether the item appears disabled or not.""" },
+  { attr = "inset", attr_type = "bool", default = "false", description = """Set whether or not \
+    this element should display inset from its normal position.""" },
+  { attr = "variant", attr_type = "String", default = """""""", description = """Set the display \
+    variant of the item. Accepted values: \"destructive\".""" },
+]
+
 [[references]]
 name = "ContextMenuTrigger"
 description = "Defines the area where the context menu can be triggered."
@@ -75,3 +192,22 @@ extra = """Implements <a class="singlestage-link" \
 href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes">global</a> \
 attributes."""
 attrs = []
+
+[[references]]
+name = "RadioItem"
+description = "A radio item for popover menus."
+extra = """Implements <a class="singlestage-link" \
+href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes">global</a> \
+and <a class="singlestage-link" \
+href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/li#attributes">li</a> \
+attributes."""
+attrs = [
+  { attr = "disabled", attr_type = "bool", default = "false", description = """Controls \
+    whether the item appears disabled or not.""" },
+  { attr = "dismiss", attr_type = "bool", default = "true", description = """Toggle whether \
+    clicking this item dismisses the parent menu.""" },
+  { attr = "inset", attr_type = "bool", default = "false", description = """Set whether or not \
+    this element should display inset from its normal position.""" },
+  { attr = "variant", attr_type = "String", default = """""""", description = """Set the display \
+    variant of the item. Accepted values: \"destructive\".""" },
+]
diff --git a/docs/src/routes/components/context_menu/examples/context_basic.rs b/docs/src/routes/components/context_menu/examples/context_basic.rs
new file mode 100644
index 00000000..8644dc9d
--- /dev/null
+++ b/docs/src/routes/components/context_menu/examples/context_basic.rs
@@ -0,0 +1,21 @@
+use leptos::prelude::*;
+use singlestage::*;
+
+#[component]
+pub fn ContextBasicExample() -> impl IntoView {
+    view! {
+        <ContextMenu>
+            <ContextMenuTrigger class="flex h-[150px] w-[300px] items-center justify-center rounded-xl border border-dashed text-sm">
+                <span class="pointer-fine:hidden">"Long press here"</span>
+                <span class="pointer-coarse:hidden">"Right click here"</span>
+            </ContextMenuTrigger>
+            <ContextMenuContent>
+                <ContextMenuGroup>
+                    <ContextMenuItem>"Back"</ContextMenuItem>
+                    <ContextMenuItem disabled=true>"Forward"</ContextMenuItem>
+                    <ContextMenuItem>"Reload"</ContextMenuItem>
+                </ContextMenuGroup>
+            </ContextMenuContent>
+        </ContextMenu>
+    }
+}
diff --git a/docs/src/routes/components/context_menu/examples/context_checkboxes.rs b/docs/src/routes/components/context_menu/examples/context_checkboxes.rs
new file mode 100644
index 00000000..28e734c3
--- /dev/null
+++ b/docs/src/routes/components/context_menu/examples/context_checkboxes.rs
@@ -0,0 +1,21 @@
+use leptos::prelude::*;
+use singlestage::*;
+
+#[component]
+pub fn ContextCheckboxesExample() -> impl IntoView {
+    view! {
+        <ContextMenu>
+            <ContextMenuTrigger class="flex h-[150px] w-[300px] items-center justify-center rounded-xl border border-dashed text-sm">
+                <span class="pointer-fine:hidden">"Long press here"</span>
+                <span class="pointer-coarse:hidden">"Right click here"</span>
+            </ContextMenuTrigger>
+            <ContextMenuContent>
+                <ContextMenuGroup>
+                    <CheckboxItem checked=true>"Show Bookmarks Bar"</CheckboxItem>
+                    <CheckboxItem>"Show Full URLs"</CheckboxItem>
+                    <CheckboxItem checked=true>"Show Developer Tools"</CheckboxItem>
+                </ContextMenuGroup>
+            </ContextMenuContent>
+        </ContextMenu>
+    }
+}
diff --git a/docs/src/routes/components/context_menu/examples/context_destructive.rs b/docs/src/routes/components/context_menu/examples/context_destructive.rs
new file mode 100644
index 00000000..0a7986fe
--- /dev/null
+++ b/docs/src/routes/components/context_menu/examples/context_destructive.rs
@@ -0,0 +1,26 @@
+use leptos::prelude::*;
+use singlestage::*;
+
+#[component]
+pub fn ContextDestructiveExample() -> impl IntoView {
+    view! {
+        <ContextMenu>
+            <ContextMenuTrigger class="flex h-[150px] w-[300px] items-center justify-center rounded-xl border border-dashed text-sm">
+                <span class="pointer-fine:hidden">"Long press here"</span>
+                <span class="pointer-coarse:hidden">"Right click here"</span>
+            </ContextMenuTrigger>
+            <ContextMenuContent>
+                <ContextMenuGroup>
+                    <ContextMenuItem>{icon!(icondata::LuPencil)} "Edit"</ContextMenuItem>
+                    <ContextMenuItem>{icon!(icondata::LuShare)} "Share"</ContextMenuItem>
+                </ContextMenuGroup>
+                <ContextMenuSeparator />
+                <ContextMenuGroup>
+                    <ContextMenuItem variant="destructive">
+                        {icon!(icondata::LuTrash)} "Delete"
+                    </ContextMenuItem>
+                </ContextMenuGroup>
+            </ContextMenuContent>
+        </ContextMenu>
+    }
+}
diff --git a/docs/src/routes/components/context_menu/examples/context_groups.rs b/docs/src/routes/components/context_menu/examples/context_groups.rs
new file mode 100644
index 00000000..ee745ed7
--- /dev/null
+++ b/docs/src/routes/components/context_menu/examples/context_groups.rs
@@ -0,0 +1,56 @@
+use leptos::prelude::*;
+use singlestage::*;
+
+#[component]
+pub fn ContextGroupsExample() -> impl IntoView {
+    view! {
+        <ContextMenu>
+            <ContextMenuTrigger class="flex h-[150px] w-[300px] items-center justify-center rounded-xl border border-dashed text-sm">
+                <span class="pointer-fine:hidden">"Long press here"</span>
+                <span class="pointer-coarse:hidden">"Right click here"</span>
+            </ContextMenuTrigger>
+            <ContextMenuContent>
+                <ContextMenuGroup>
+                    <ContextMenuLabel>"File"</ContextMenuLabel>
+                    <ContextMenuItem>
+                        "New File" <ContextMenuShortcut>"⌘N"</ContextMenuShortcut>
+                    </ContextMenuItem>
+                    <ContextMenuItem>
+                        "Open File" <ContextMenuShortcut>"⌘O"</ContextMenuShortcut>
+                    </ContextMenuItem>
+                    <ContextMenuItem>
+                        "Save" <ContextMenuShortcut>"⌘S"</ContextMenuShortcut>
+                    </ContextMenuItem>
+                </ContextMenuGroup>
+                <ContextMenuSeparator />
+                <ContextMenuGroup>
+                    <ContextMenuLabel>"Edit"</ContextMenuLabel>
+                    <ContextMenuItem>
+                        "Undo" <ContextMenuShortcut>"⌘Z"</ContextMenuShortcut>
+                    </ContextMenuItem>
+                    <ContextMenuItem>
+                        "Redo" <ContextMenuShortcut>"⇧⌘Z"</ContextMenuShortcut>
+                    </ContextMenuItem>
+                </ContextMenuGroup>
+                <ContextMenuSeparator />
+                <ContextMenuGroup>
+                    <ContextMenuItem>
+                        "Cut" <ContextMenuShortcut>"⌘X"</ContextMenuShortcut>
+                    </ContextMenuItem>
+                    <ContextMenuItem>
+                        "Copy" <ContextMenuShortcut>"⌘C"</ContextMenuShortcut>
+                    </ContextMenuItem>
+                    <ContextMenuItem>
+                        "Paste" <ContextMenuShortcut>"⌘V"</ContextMenuShortcut>
+                    </ContextMenuItem>
+                </ContextMenuGroup>
+                <ContextMenuSeparator />
+                <ContextMenuGroup>
+                    <ContextMenuItem variant="destructive">
+                        "Delete" <ContextMenuShortcut>"⌫"</ContextMenuShortcut>
+                    </ContextMenuItem>
+                </ContextMenuGroup>
+            </ContextMenuContent>
+        </ContextMenu>
+    }
+}
diff --git a/docs/src/routes/components/context_menu/examples/context_icons.rs b/docs/src/routes/components/context_menu/examples/context_icons.rs
new file mode 100644
index 00000000..5a0b5244
--- /dev/null
+++ b/docs/src/routes/components/context_menu/examples/context_icons.rs
@@ -0,0 +1,27 @@
+use leptos::prelude::*;
+use singlestage::*;
+
+#[component]
+pub fn ContextIconsExample() -> impl IntoView {
+    view! {
+        <ContextMenu>
+            <ContextMenuTrigger class="flex h-[150px] w-[300px] items-center justify-center rounded-xl border border-dashed text-sm">
+                <span class="pointer-fine:hidden">"Long press here"</span>
+                <span class="pointer-coarse:hidden">"Right click here"</span>
+            </ContextMenuTrigger>
+            <ContextMenuContent>
+                <ContextMenuGroup>
+                    <ContextMenuItem>{icon!(icondata::LuCopy)} "Copy"</ContextMenuItem>
+                    <ContextMenuItem>{icon!(icondata::LuScissors)} "Cut"</ContextMenuItem>
+                    <ContextMenuItem>{icon!(icondata::LuClipboardPaste)} "Paste"</ContextMenuItem>
+                </ContextMenuGroup>
+                <ContextMenuSeparator />
+                <ContextMenuGroup>
+                    <ContextMenuItem variant="destructive">
+                        {icon!(icondata::LuTrash)} "Delete"
+                    </ContextMenuItem>
+                </ContextMenuGroup>
+            </ContextMenuContent>
+        </ContextMenu>
+    }
+}
diff --git a/docs/src/routes/components/context_menu/examples/context_menu.rs b/docs/src/routes/components/context_menu/examples/context_menu.rs
index 06dd05f1..bc65ace0 100644
--- a/docs/src/routes/components/context_menu/examples/context_menu.rs
+++ b/docs/src/routes/components/context_menu/examples/context_menu.rs
@@ -5,40 +5,52 @@ use singlestage::*;
 pub fn ContextMenuExample() -> impl IntoView {
     view! {
         <ContextMenu>
-            <ContextMenuTrigger class="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">
-                "Right click here"
+            <ContextMenuTrigger class="flex h-[150px] w-[300px] items-center justify-center rounded-xl border border-dashed text-sm">
+                <span class="pointer-fine:hidden">"Long press here"</span>
+                <span class="pointer-coarse:hidden">"Right click here"</span>
             </ContextMenuTrigger>
-            <ContextMenuContent>
+            <ContextMenuContent class="w-48">
                 <ContextMenuGroup>
-                    <ContextMenuLabel>"My Account"</ContextMenuLabel>
                     <ContextMenuItem>
-                        "Profile" <ContextMenuShortcut>"⇧⌘P"</ContextMenuShortcut>
+                        "Back" <ContextMenuShortcut>"⌘["</ContextMenuShortcut>
                     </ContextMenuItem>
-                    <ContextMenuItem>
-                        "Billing" <ContextMenuShortcut>"⌘B"</ContextMenuShortcut>
-                    </ContextMenuItem>
-                    <ContextMenuItem>
-                        "Settings" <ContextMenuShortcut>"⌘S"</ContextMenuShortcut>
+                    <ContextMenuItem disabled=true>
+                        "Forward" <ContextMenuShortcut>"⌘]"</ContextMenuShortcut>
                     </ContextMenuItem>
                     <ContextMenuItem>
-                        "Keyboard shortcuts" <ContextMenuShortcut>"⌘K"</ContextMenuShortcut>
+                        "Reload" <ContextMenuShortcut>"⌘R"</ContextMenuShortcut>
                     </ContextMenuItem>
+                    <ContextMenuSub>
+                        <ContextMenuSubTrigger>"More Tools"</ContextMenuSubTrigger>
+                        <ContextMenuSubContent class="w-44">
+                            <ContextMenuGroup>
+                                <ContextMenuItem>"Save Page..."</ContextMenuItem>
+                                <ContextMenuItem>"Create Shortcut..."</ContextMenuItem>
+                                <ContextMenuItem>"Name Window..."</ContextMenuItem>
+                            </ContextMenuGroup>
+                            <ContextMenuSeparator />
+                            <ContextMenuGroup>
+                                <ContextMenuItem>"Developer Tools"</ContextMenuItem>
+                            </ContextMenuGroup>
+                            <ContextMenuSeparator />
+                            <ContextMenuGroup>
+                                <ContextMenuItem variant="destructive">"Delete"</ContextMenuItem>
+                            </ContextMenuGroup>
+                        </ContextMenuSubContent>
+                    </ContextMenuSub>
                 </ContextMenuGroup>
                 <ContextMenuSeparator />
                 <ContextMenuGroup>
-                    <ContextMenuItem>"GitHub"</ContextMenuItem>
-                    <ContextMenuItem>"Support"</ContextMenuItem>
-                    <ContextMenuItem disabled=true>"API"</ContextMenuItem>
+                    <CheckboxItem checked=true>"Show Bookmarks"</CheckboxItem>
+                    <CheckboxItem>"Show Full URLs"</CheckboxItem>
                 </ContextMenuGroup>
                 <ContextMenuSeparator />
                 <ContextMenuGroup>
-                    <ContextMenuItem variant="destructive">
-                        {icon!(icondata::LuTrash2)} "Delete Account"
-                    </ContextMenuItem>
-                    <ContextMenuItem>
-                        {icon!(icondata::LuLogOut)} "Logout"
-                        <ContextMenuShortcut>"⇧⌘Q"</ContextMenuShortcut>
-                    </ContextMenuItem>
+                    <RadioGroup value="pedro">
+                        <ContextMenuLabel>"People"</ContextMenuLabel>
+                        <RadioItem value="pedro">"Pedro Duarte"</RadioItem>
+                        <RadioItem value="colm">"Colm Tuite"</RadioItem>
+                    </RadioGroup>
                 </ContextMenuGroup>
             </ContextMenuContent>
         </ContextMenu>
diff --git a/docs/src/routes/components/context_menu/examples/context_radio.rs b/docs/src/routes/components/context_menu/examples/context_radio.rs
new file mode 100644
index 00000000..660dc617
--- /dev/null
+++ b/docs/src/routes/components/context_menu/examples/context_radio.rs
@@ -0,0 +1,35 @@
+use leptos::prelude::*;
+use singlestage::*;
+
+#[component]
+pub fn ContextRadioExample() -> impl IntoView {
+    let user = RwSignal::new("pedro".to_string());
+    let theme = RwSignal::new("light".to_string());
+
+    view! {
+        <ContextMenu>
+            <ContextMenuTrigger class="flex h-[150px] w-[300px] items-center justify-center rounded-xl border border-dashed text-sm">
+                <span class="pointer-fine:hidden">"Long press here"</span>
+                <span class="pointer-coarse:hidden">"Right click here"</span>
+            </ContextMenuTrigger>
+            <ContextMenuContent>
+                <ContextMenuGroup>
+                    <ContextMenuLabel>"People"</ContextMenuLabel>
+                    <RadioGroup value=user>
+                        <RadioItem value="pedro">"Pedro Duarte"</RadioItem>
+                        <RadioItem value="colm">"Colm Tuite"</RadioItem>
+                    </RadioGroup>
+                </ContextMenuGroup>
+                <ContextMenuSeparator />
+                <ContextMenuGroup>
+                    <ContextMenuLabel>"Theme"</ContextMenuLabel>
+                    <RadioGroup value=theme>
+                        <RadioItem value="light">"Light"</RadioItem>
+                        <RadioItem value="dark">"Dark"</RadioItem>
+                        <RadioItem value="system">"System"</RadioItem>
+                    </RadioGroup>
+                </ContextMenuGroup>
+            </ContextMenuContent>
+        </ContextMenu>
+    }
+}
diff --git a/docs/src/routes/components/context_menu/examples/context_shortcuts.rs b/docs/src/routes/components/context_menu/examples/context_shortcuts.rs
new file mode 100644
index 00000000..597568be
--- /dev/null
+++ b/docs/src/routes/components/context_menu/examples/context_shortcuts.rs
@@ -0,0 +1,36 @@
+use leptos::prelude::*;
+use singlestage::*;
+
+#[component]
+pub fn ContextShortcutsExample() -> impl IntoView {
+    view! {
+        <ContextMenu>
+            <ContextMenuTrigger class="flex h-[150px] w-[300px] items-center justify-center rounded-xl border border-dashed text-sm">
+                <span class="pointer-fine:hidden">"Long press here"</span>
+                <span class="pointer-coarse:hidden">"Right click here"</span>
+            </ContextMenuTrigger>
+            <ContextMenuContent>
+                <ContextMenuGroup>
+                    <ContextMenuItem>
+                        "Back" <ContextMenuShortcut>"⌘["</ContextMenuShortcut>
+                    </ContextMenuItem>
+                    <ContextMenuItem disabled=true>
+                        "Forward" <ContextMenuShortcut>"⌘]"</ContextMenuShortcut>
+                    </ContextMenuItem>
+                    <ContextMenuItem>
+                        "Reload" <ContextMenuShortcut>"⌘R"</ContextMenuShortcut>
+                    </ContextMenuItem>
+                </ContextMenuGroup>
+                <ContextMenuSeparator />
+                <ContextMenuGroup>
+                    <ContextMenuItem>
+                        "Save" <ContextMenuShortcut>"⌘S"</ContextMenuShortcut>
+                    </ContextMenuItem>
+                    <ContextMenuItem>
+                        "Save As..." <ContextMenuShortcut>"⇧⌘S"</ContextMenuShortcut>
+                    </ContextMenuItem>
+                </ContextMenuGroup>
+            </ContextMenuContent>
+        </ContextMenu>
+    }
+}
diff --git a/docs/src/routes/components/context_menu/examples/context_sub.rs b/docs/src/routes/components/context_menu/examples/context_sub.rs
new file mode 100644
index 00000000..7dece94b
--- /dev/null
+++ b/docs/src/routes/components/context_menu/examples/context_sub.rs
@@ -0,0 +1,42 @@
+use leptos::prelude::*;
+use singlestage::*;
+
+#[component]
+pub fn ContextSubExample() -> impl IntoView {
+    view! {
+        <ContextMenu>
+            <ContextMenuTrigger class="flex h-[150px] w-[300px] items-center justify-center rounded-xl border border-dashed text-sm">
+                <span class="pointer-fine:hidden">"Long press here"</span>
+                <span class="pointer-coarse:hidden">"Right click here"</span>
+            </ContextMenuTrigger>
+            <ContextMenuContent>
+                <ContextMenuGroup>
+                    <ContextMenuItem>
+                        "Copy" <ContextMenuShortcut>"⌘C"</ContextMenuShortcut>
+                    </ContextMenuItem>
+                    <ContextMenuItem>
+                        "Cut" <ContextMenuShortcut>"⌘X"</ContextMenuShortcut>
+                    </ContextMenuItem>
+                </ContextMenuGroup>
+                <ContextMenuSub>
+                    <ContextMenuSubTrigger>"More Tools"</ContextMenuSubTrigger>
+                    <ContextMenuSubContent>
+                        <ContextMenuGroup>
+                            <ContextMenuItem>"Save Page..."</ContextMenuItem>
+                            <ContextMenuItem>"Create Shortcut..."</ContextMenuItem>
+                            <ContextMenuItem>"Name Window..."</ContextMenuItem>
+                        </ContextMenuGroup>
+                        <ContextMenuSeparator />
+                        <ContextMenuGroup>
+                            <ContextMenuItem>"Developer Tools"</ContextMenuItem>
+                        </ContextMenuGroup>
+                        <ContextMenuSeparator />
+                        <ContextMenuGroup>
+                            <ContextMenuItem variant="destructive">"Delete"</ContextMenuItem>
+                        </ContextMenuGroup>
+                    </ContextMenuSubContent>
+                </ContextMenuSub>
+            </ContextMenuContent>
+        </ContextMenu>
+    }
+}
diff --git a/docs/src/routes/components/context_menu/examples/mod.rs b/docs/src/routes/components/context_menu/examples/mod.rs
index bcfcfd04..a4d82079 100644
--- a/docs/src/routes/components/context_menu/examples/mod.rs
+++ b/docs/src/routes/components/context_menu/examples/mod.rs
@@ -1,3 +1,19 @@
+mod context_basic;
+mod context_checkboxes;
+mod context_destructive;
+mod context_groups;
+mod context_icons;
 mod context_menu;
+mod context_radio;
+mod context_shortcuts;
+mod context_sub;
 
+pub use context_basic::*;
+pub use context_checkboxes::*;
+pub use context_destructive::*;
+pub use context_groups::*;
+pub use context_icons::*;
 pub use context_menu::*;
+pub use context_radio::*;
+pub use context_shortcuts::*;
+pub use context_sub::*;
diff --git a/docs/src/routes/components/dropdown/anatomy.rs b/docs/src/routes/components/dropdown/anatomy.rs
index d9d237be..96947423 100644
--- a/docs/src/routes/components/dropdown/anatomy.rs
+++ b/docs/src/routes/components/dropdown/anatomy.rs
@@ -16,6 +16,23 @@ pub fn DropdownMenuAnatomy() -> impl IntoView {
                     </DropdownMenuItem>
                 </DropdownMenuGroup>
                 <DropdownMenuSeparator />
+                <DropdownMenuSub>
+                    <DropdownMenuSubTrigger />
+                    <DropdownMenuSubContent>
+                        <DropdownMenuGroup>
+                            <CheckboxItem />
+                            <CheckboxItem />
+                        </DropdownMenuGroup>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuGroup>
+                            <RadioGroup>
+                                <RadioItem />
+                                <RadioItem />
+                                <RadioItem />
+                            </RadioGroup>
+                        </DropdownMenuGroup>
+                    </DropdownMenuSubContent>
+                </DropdownMenuSub>
             </DropdownMenuContent>
         </DropdownMenu>
     }
diff --git a/docs/src/routes/components/dropdown/component.toml b/docs/src/routes/components/dropdown/component.toml
index b1cfc2e3..d43e62e8 100644
--- a/docs/src/routes/components/dropdown/component.toml
+++ b/docs/src/routes/components/dropdown/component.toml
@@ -3,25 +3,106 @@ description = """Displays a menu to the user — such as a set of actions or fun
 by a button."""
 
 [info]
-title = "This component could use some work"
-description = """While this component does make use of the new popover browser API, proper \
-positioning is still not widely supported. There are hacks in place to try to work around this \
-issue while still taking advantage of the rest of the API. Until this is implemented (hopefully \
-soon - Aug 03, 2025) that puts this component in only a 'Good Enough' state. "<singlestage::Link \
-style="color: var(--foreground)" \
-href="https://developer.mozilla.org/en-US/docs/Web/CSS/anchor#browser_compatibility"> "More \
-Info"</singlestage::Link>""""
+title = "This component uses newly available browser features"
+description = """"<p>"This component uses CSS Anchor Positioning which has only been widely \
+supported since January 2026. If you're targeting older or less mainstream browsers then maybe \
+this component isn't for you, yet. "</p><p>" Alternatively you can use Singlestage 0.4 which \
+positions the component correctly but with limited flexibility for alignment, or roll your own \
+using Singlestage CSS classes for consistent styling. "</p><singlestage::Link style="color: \
+var(--foreground)" href="https://caniuse.com/css-anchor-positioning"> "More Info" \
+</singlestage::Link>""""
 
 [[examples]]
 name = "Dropdown Menu"
 
+[[examples]]
+name = "Dropdown Basic"
+title = "Basic"
+description = "A basic dropdown menu with labels and separators."
+
+[[examples]]
+name = "Dropdown Sub"
+title = "Submenu"
+description = "Use DropdownMenuSub to nest secondary actions."
+
+[[examples]]
+name = "Dropdown Shortcuts"
+title = "Shortcuts"
+description = "Add DropdownMenuShortcut to show keyboard hints."
+
+[[examples]]
+name = "Dropdown Icons"
+title = "Icons"
+description = "Combine icons with labels for quick scanning."
+
+[[examples]]
+name = "Dropdown Checkboxes"
+title = "Checkboxes"
+description = "Dropdown menus can use Checkboxes."
+
+[[examples]]
+name = "Dropdown Checkbox Icons"
+title = "Checkbox Icons"
+description = "Icons can be added to checkbox items."
+
+[[examples]]
+name = "Dropdown Radio Group"
+title = "Radio Group"
+description = "Dropdown menus can use RadioGroups."
+
+[[examples]]
+name = "Dropdown Radio Icons"
+title = "Radio Icons"
+description = "Icons can be added to radio items.."
+
+[[examples]]
+name = "Dropdown Destructive"
+title = "Destructive"
+description = "Use the destructive variant for irreversible actions."
+
+[[examples]]
+name = "Dropdown Avatar"
+title = "Avatar"
+description = "An account switcher dropdown triggered by an avatar."
+
+[[examples]]
+name = "Dropdown Complex"
+title = "Complex"
+description = "A richer example combining groups, icons, and submenus."
+
+[[references]]
+name = "CheckboxItem"
+description = "A checkbox item for popover menus."
+extra = """Implements <a class="singlestage-link" \
+href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes">global</a> \
+and <a class="singlestage-link" \
+href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/li#attributes">li</a> \
+attributes."""
+attrs = [
+  { attr = "disabled", attr_type = "bool", default = "false", description = """Controls \
+    whether the item appears disabled or not.""" },
+  { attr = "dismiss", attr_type = "bool", default = "true", description = """Toggle whether \
+    clicking this item dismisses the parent menu.""" },
+  { attr = "inset", attr_type = "bool", default = "false", description = """Set whether or not \
+    this element should display inset from its normal position.""" },
+  { attr = "variant", attr_type = "String", default = """""""", description = """Set the display \
+    variant of the item. Accepted values: \"destructive\".""" },
+]
+
 [[references]]
 name = "DropdownMenu"
 description = "Contains all the parts of a dropdown menu."
 extra = """Implements <a class="singlestage-link" \
 href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes">global</a> \
 attributes."""
-attrs = []
+attrs = [
+  { attr = "dismissable", attr_type = "bool", default = "true", description = """Set whether or \
+    not this popover can be light dismissed. Use this with the `open` signal for a manually \
+    managed popover.""" },
+  { attr = "open", attr_type = "bool", default = "false", description = """Reactive signal that \
+    can remotely control the open state of the popover but is not coupled to the actual state of \
+    the popover.""" },
+]
 
 [[references]]
 name = "DropdownMenuContent"
@@ -29,7 +110,13 @@ description = "The component that pops out when the dropdown menu is open."
 extra = """Implements <a class="singlestage-link" \
 href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes">global</a> \
 attributes."""
-attrs = []
+attrs = [
+  { attr = "align", attr_type = "String", default = """"start"""", description = """Set how to \
+    align the popover. Accepted values are "start" | "center" | "end"""" },
+  { attr = "side", attr_type = "String", default = """"bottom"""", description = """Set which \
+    side the popover opens relative to the trigger. Accepted values are "top" | "right" | \
+    "bottom" | "left". """ },
+]
 
 [[references]]
 name = "DropdownMenuGroup"
@@ -50,8 +137,12 @@ attributes."""
 attrs = [
   { attr = "disabled", attr_type = "bool", default = "false", description = """Controls \
     whether the item appears disabled or not.""" },
+  { attr = "dismiss", attr_type = "bool", default = "true", description = """Toggle whether \
+    clicking this item dismisses the parent menu.""" },
+  { attr = "inset", attr_type = "bool", default = "false", description = """Set whether or not \
+    this element should display inset from its normal position.""" },
   { attr = "variant", attr_type = "String", default = """""""", description = """Set the display \
-    variant of the item.""" },
+    variant of the item. Accepted values are "destructive"""" },
 ]
 
 [[references]]
@@ -60,7 +151,10 @@ description = "Labels groups."
 extra = """Implements <a class="singlestage-link" \
 href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes">global</a> \
 attributes."""
-attrs = []
+attrs = [
+  { attr = "inset", attr_type = "bool", default = "false", description = """Set whether or not \
+    this element should display inset from its normal position.""" },
+]
 
 [[references]]
 name = "DropdownMenuSeparator"
@@ -78,6 +172,39 @@ href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attribu
 attributes."""
 attrs = []
 
+[[references]]
+name = "DropdownMenuSub"
+description = "Contains all the parts of a sub menu."
+extra = """Implements <a class="singlestage-link" \
+href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes">global</a> \
+attributes."""
+attrs = []
+
+[[references]]
+name = "DropdownMenuSubContent"
+description = "The component that pops out when the sub trigger is triggered."
+extra = """Implements <a class="singlestage-link" \
+href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes">global</a> \
+attributes."""
+attrs = []
+
+[[references]]
+name = "DropdownMenuSubTrigger"
+description = "Defines the area where a sub menu can be triggered."
+extra = """Implements <a class="singlestage-link" \
+href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes">global</a> \
+and <a class="singlestage-link" \
+href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/li#attributes">li</a> \
+attributes."""
+attrs = [
+  { attr = "disabled", attr_type = "bool", default = "false", description = """Controls \
+    whether the item appears disabled or not.""" },
+  { attr = "inset", attr_type = "bool", default = "false", description = """Set whether or not \
+    this element should display inset from its normal position.""" },
+  { attr = "variant", attr_type = "String", default = """""""", description = """Set the display \
+    variant of the item. Accepted values: \"destructive\".""" },
+]
+
 [[references]]
 name = "DropdownMenuTrigger"
 description = "Provides context to a Button that triggers a DropdownMenu."
@@ -85,3 +212,22 @@ extra = """Implements <a class="singlestage-link" \
 href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes">global</a> \
 attributes."""
 attrs = []
+
+[[references]]
+name = "RadioItem"
+description = "A radio item for popover menus."
+extra = """Implements <a class="singlestage-link" \
+href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes">global</a> \
+and <a class="singlestage-link" \
+href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/li#attributes">li</a> \
+attributes."""
+attrs = [
+  { attr = "disabled", attr_type = "bool", default = "false", description = """Controls \
+    whether the item appears disabled or not.""" },
+  { attr = "dismiss", attr_type = "bool", default = "true", description = """Toggle whether \
+    clicking this item dismisses the parent menu.""" },
+  { attr = "inset", attr_type = "bool", default = "false", description = """Set whether or not \
+    this element should display inset from its normal position.""" },
+  { attr = "variant", attr_type = "String", default = """""""", description = """Set the display \
+    variant of the item. Accepted values: \"destructive\".""" },
+]
diff --git a/docs/src/routes/components/dropdown/examples/dropdown_avatar.rs b/docs/src/routes/components/dropdown/examples/dropdown_avatar.rs
new file mode 100644
index 00000000..9b0140e4
--- /dev/null
+++ b/docs/src/routes/components/dropdown/examples/dropdown_avatar.rs
@@ -0,0 +1,27 @@
+use leptos::prelude::*;
+use singlestage::*;
+
+#[component]
+pub fn DropdownAvatarExample() -> impl IntoView {
+    view! {
+        <DropdownMenu>
+            <DropdownMenuTrigger>
+                <Button variant="ghost" size="icon" class="rounded-full">
+                    <Avatar>
+                        <AvatarImage src="https://github.com/shadcn.png" alt="shadcn" />
+                        <AvatarFallback>"LR"</AvatarFallback>
+                    </Avatar>
+                </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+                <DropdownMenuGroup>
+                    <DropdownMenuItem>{icon!(icondata::LuBadgeCheck)} "Account"</DropdownMenuItem>
+                    <DropdownMenuItem>{icon!(icondata::LuCreditCard)} "Billing"</DropdownMenuItem>
+                    <DropdownMenuItem>{icon!(icondata::LuBell)} "Notifications"</DropdownMenuItem>
+                </DropdownMenuGroup>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem>{icon!(icondata::LuLogOut)} "Sign Out"</DropdownMenuItem>
+            </DropdownMenuContent>
+        </DropdownMenu>
+    }
+}
diff --git a/docs/src/routes/components/dropdown/examples/dropdown_basic.rs b/docs/src/routes/components/dropdown/examples/dropdown_basic.rs
new file mode 100644
index 00000000..a37baeb8
--- /dev/null
+++ b/docs/src/routes/components/dropdown/examples/dropdown_basic.rs
@@ -0,0 +1,25 @@
+use leptos::prelude::*;
+use singlestage::{Button, dropdown::*};
+
+#[component]
+pub fn DropdownBasicExample() -> impl IntoView {
+    view! {
+        <DropdownMenu>
+            <DropdownMenuTrigger>
+                <Button variant="outline">"Open"</Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+                <DropdownMenuGroup>
+                    <DropdownMenuLabel>"My Account"</DropdownMenuLabel>
+                    <DropdownMenuItem>"Profile"</DropdownMenuItem>
+                    <DropdownMenuItem>"Billing"</DropdownMenuItem>
+                    <DropdownMenuItem>"Settings"</DropdownMenuItem>
+                </DropdownMenuGroup>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem>"GitHub"</DropdownMenuItem>
+                <DropdownMenuItem>"Support"</DropdownMenuItem>
+                <DropdownMenuItem disabled=true>"API"</DropdownMenuItem>
+            </DropdownMenuContent>
+        </DropdownMenu>
+    }
+}
diff --git a/docs/src/routes/components/dropdown/examples/dropdown_checkbox_icons.rs b/docs/src/routes/components/dropdown/examples/dropdown_checkbox_icons.rs
new file mode 100644
index 00000000..ae2b3e9e
--- /dev/null
+++ b/docs/src/routes/components/dropdown/examples/dropdown_checkbox_icons.rs
@@ -0,0 +1,36 @@
+use leptos::prelude::*;
+use singlestage::*;
+
+#[component]
+pub fn DropdownCheckboxIconsExample() -> impl IntoView {
+    struct Notifications {
+        email: RwSignal<bool>,
+        sms: RwSignal<bool>,
+        push: RwSignal<bool>,
+    }
+
+    let notifications = Notifications {
+        email: RwSignal::new(true),
+        sms: RwSignal::new(false),
+        push: RwSignal::new(true),
+    };
+
+    view! {
+        <DropdownMenu>
+            <DropdownMenuTrigger>
+                <Button variant="outline">"Notifications"</Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent class="w-48">
+                <DropdownMenuGroup>
+                    <DropdownMenuLabel>"Notification Preferences"</DropdownMenuLabel>
+                    <CheckboxItem checked=notifications
+                        .email>{icon!(icondata::LuMail)} "Email notifications"</CheckboxItem>
+                    <CheckboxItem checked=notifications
+                        .sms>{icon!(icondata::LuMessageSquare)} "SMS notifications"</CheckboxItem>
+                    <CheckboxItem checked=notifications
+                        .push>{icon!(icondata::LuBell)} "Push notifications"</CheckboxItem>
+                </DropdownMenuGroup>
+            </DropdownMenuContent>
+        </DropdownMenu>
+    }
+}
diff --git a/docs/src/routes/components/dropdown/examples/dropdown_checkboxes.rs b/docs/src/routes/components/dropdown/examples/dropdown_checkboxes.rs
new file mode 100644
index 00000000..d63f5704
--- /dev/null
+++ b/docs/src/routes/components/dropdown/examples/dropdown_checkboxes.rs
@@ -0,0 +1,27 @@
+use leptos::prelude::*;
+use singlestage::*;
+
+#[component]
+pub fn DropdownCheckboxesExample() -> impl IntoView {
+    let show_status_bar = RwSignal::new(false);
+    let show_activity_bar = RwSignal::new(false);
+    let show_panel = RwSignal::new(false);
+
+    view! {
+        <DropdownMenu>
+            <DropdownMenuTrigger>
+                <Button variant="outline">Open</Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent class="w-40">
+                <DropdownMenuGroup>
+                    <DropdownMenuLabel>"Appearance"</DropdownMenuLabel>
+                    <CheckboxItem checked=show_status_bar>"Status Bar"</CheckboxItem>
+                    <CheckboxItem checked=show_activity_bar disabled=true>
+                        "Activity Bar"
+                    </CheckboxItem>
+                    <CheckboxItem checked=show_panel>"Panel"</CheckboxItem>
+                </DropdownMenuGroup>
+            </DropdownMenuContent>
+        </DropdownMenu>
+    }
+}
diff --git a/docs/src/routes/components/dropdown/examples/dropdown_complex.rs b/docs/src/routes/components/dropdown/examples/dropdown_complex.rs
new file mode 100644
index 00000000..7f015c52
--- /dev/null
+++ b/docs/src/routes/components/dropdown/examples/dropdown_complex.rs
@@ -0,0 +1,176 @@
+use leptos::prelude::*;
+use singlestage::*;
+
+#[component]
+pub fn DropdownComplexExample() -> impl IntoView {
+    let theme = RwSignal::new("light".to_string());
+
+    struct Notifications {
+        email: RwSignal<bool>,
+        push: RwSignal<bool>,
+    }
+
+    let notifications = Notifications {
+        email: RwSignal::new(true),
+        push: RwSignal::new(true),
+    };
+
+    view! {
+        <DropdownMenu>
+            <DropdownMenuTrigger>
+                <Button variant="outline">"Complex Menu"</Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent class="w-44">
+                <DropdownMenuGroup>
+                    <DropdownMenuLabel>"File"</DropdownMenuLabel>
+                    <DropdownMenuItem>
+                        {icon!(icondata::LuFile)} "New File"
+                        <DropdownMenuShortcut>"⌘N"</DropdownMenuShortcut>
+                    </DropdownMenuItem>
+                    <DropdownMenuItem>
+                        {icon!(icondata::LuFolder)} "New Folder"
+                        <DropdownMenuShortcut>"⇧⌘N"</DropdownMenuShortcut>
+                    </DropdownMenuItem>
+                    <DropdownMenuSub>
+                        <DropdownMenuSubTrigger>
+                            {icon!(icondata::LuFolderOpen)} "Open Recent"
+                        </DropdownMenuSubTrigger>
+                        <DropdownMenuSubContent>
+                            <DropdownMenuGroup>
+                                <DropdownMenuLabel>"Recent Projects"</DropdownMenuLabel>
+                                <DropdownMenuItem>
+                                    {icon!(icondata::LuFileCode)} "Project Alpha"
+                                </DropdownMenuItem>
+                                <DropdownMenuItem>
+                                    {icon!(icondata::LuFileCode)} "Project Beta"
+                                </DropdownMenuItem>
+                                <DropdownMenuSub>
+                                    <DropdownMenuSubTrigger>
+                                        {icon!(icondata::FiMoreHorizontal)} "More Projects"
+                                    </DropdownMenuSubTrigger>
+                                    <DropdownMenuSubContent>
+                                        <DropdownMenuItem>
+                                            {icon!(icondata::LuFileCode)} "Project Gamma"
+                                        </DropdownMenuItem>
+                                        <DropdownMenuItem>
+                                            {icon!(icondata::LuFileCode)} "Project Delta"
+                                        </DropdownMenuItem>
+                                    </DropdownMenuSubContent>
+                                </DropdownMenuSub>
+                            </DropdownMenuGroup>
+                            <DropdownMenuSeparator />
+                            <DropdownMenuGroup>
+                                <DropdownMenuItem>
+                                    {icon!(icondata::LuFolderSearch)} "Browse..."
+                                </DropdownMenuItem>
+                            </DropdownMenuGroup>
+                        </DropdownMenuSubContent>
+                    </DropdownMenuSub>
+                    <DropdownMenuSeparator />
+                    <DropdownMenuItem>
+                        {icon!(icondata::LuSave)} "Save"
+                        <DropdownMenuShortcut>"⌘S"</DropdownMenuShortcut>
+                    </DropdownMenuItem>
+                    <DropdownMenuItem>
+                        {icon!(icondata::LuDownload)} "Export"
+                        <DropdownMenuShortcut>"⇧⌘E"</DropdownMenuShortcut>
+                    </DropdownMenuItem>
+                </DropdownMenuGroup>
+                <DropdownMenuSeparator />
+                <DropdownMenuGroup>
+                    <DropdownMenuLabel>"View"</DropdownMenuLabel>
+                    <CheckboxItem checked=true>
+                        {icon!(icondata::LuEye)} "Show Sidebar"
+                    </CheckboxItem>
+                    <CheckboxItem>{icon!(icondata::FiLayout)} "Show Status Bar"</CheckboxItem>
+                    <DropdownMenuSub>
+                        <DropdownMenuSubTrigger>
+                            {icon!(icondata::LuPalette)} "Theme"
+                        </DropdownMenuSubTrigger>
+                        <DropdownMenuSubContent>
+                            <DropdownMenuGroup>
+                                <DropdownMenuLabel>"Appearance"</DropdownMenuLabel>
+                                <RadioGroup value=theme>
+                                    <RadioItem value="light">
+                                        {icon!(icondata::LuSun)} "Light"
+                                    </RadioItem>
+                                    <RadioItem value="dark">
+                                        {icon!(icondata::LuMoon)} "Dark"
+                                    </RadioItem>
+                                    <RadioItem value="system">
+                                        {icon!(icondata::LuMonitor)} "System"
+                                    </RadioItem>
+                                </RadioGroup>
+                            </DropdownMenuGroup>
+                        </DropdownMenuSubContent>
+                    </DropdownMenuSub>
+                </DropdownMenuGroup>
+                <DropdownMenuSeparator />
+                <DropdownMenuGroup>
+                    <DropdownMenuLabel>"Account"</DropdownMenuLabel>
+                    <DropdownMenuItem>
+                        {icon!(icondata::LuUser)} "Profile"
+                        <DropdownMenuShortcut>"⇧⌘P"</DropdownMenuShortcut>
+                    </DropdownMenuItem>
+                    <DropdownMenuItem>{icon!(icondata::LuCreditCard)} "Billing"</DropdownMenuItem>
+                    <DropdownMenuSub>
+                        <DropdownMenuSubTrigger>
+                            {icon!(icondata::LuSettings)} "Settings"
+                        </DropdownMenuSubTrigger>
+                        <DropdownMenuSubContent>
+                            <DropdownMenuGroup>
+                                <DropdownMenuLabel>"Preferences"</DropdownMenuLabel>
+                                <DropdownMenuItem>
+                                    {icon!(icondata::LuKeyboard)} "Keyboard Shortcuts"
+                                </DropdownMenuItem>
+                                <DropdownMenuItem>
+                                    {icon!(icondata::LuLanguages)} "Language"
+                                </DropdownMenuItem>
+                                <DropdownMenuSub>
+                                    <DropdownMenuSubTrigger>
+                                        {icon!(icondata::LuBell)} "Notifications"
+                                    </DropdownMenuSubTrigger>
+                                    <DropdownMenuSubContent>
+                                        <DropdownMenuGroup>
+                                            <DropdownMenuLabel>"Notification Types"</DropdownMenuLabel>
+                                            <CheckboxItem checked=notifications
+                                                .push>
+                                                {icon!(icondata::LuBell)} "Push Notifications"
+                                            </CheckboxItem>
+                                            <CheckboxItem checked=notifications
+                                                .email>
+                                                {icon!(icondata::LuMail)} "Email Notifications"
+                                            </CheckboxItem>
+                                        </DropdownMenuGroup>
+                                    </DropdownMenuSubContent>
+                                </DropdownMenuSub>
+                            </DropdownMenuGroup>
+                            <DropdownMenuSeparator />
+                            <DropdownMenuGroup>
+                                <DropdownMenuItem>
+                                    {icon!(icondata::LuShield)} "Privacy & Security"
+                                </DropdownMenuItem>
+                            </DropdownMenuGroup>
+                        </DropdownMenuSubContent>
+                    </DropdownMenuSub>
+                </DropdownMenuGroup>
+                <DropdownMenuSeparator />
+                <DropdownMenuGroup>
+                    <DropdownMenuItem>
+                        {icon!(icondata::FiHelpCircle)} "Help & Support"
+                    </DropdownMenuItem>
+                    <DropdownMenuItem>
+                        {icon!(icondata::LuFileText)} "Documentation"
+                    </DropdownMenuItem>
+                </DropdownMenuGroup>
+                <DropdownMenuSeparator />
+                <DropdownMenuGroup>
+                    <DropdownMenuItem variant="destructive">
+                        {icon!(icondata::LuLogOut)} "Sign Out"
+                        <DropdownMenuShortcut>"⇧⌘Q"</DropdownMenuShortcut>
+                    </DropdownMenuItem>
+                </DropdownMenuGroup>
+            </DropdownMenuContent>
+        </DropdownMenu>
+    }
+}
diff --git a/docs/src/routes/components/dropdown/examples/dropdown_destructive.rs b/docs/src/routes/components/dropdown/examples/dropdown_destructive.rs
new file mode 100644
index 00000000..b28beda4
--- /dev/null
+++ b/docs/src/routes/components/dropdown/examples/dropdown_destructive.rs
@@ -0,0 +1,25 @@
+use leptos::prelude::*;
+use singlestage::*;
+
+#[component]
+pub fn DropdownDestructiveExample() -> impl IntoView {
+    view! {
+        <DropdownMenu>
+            <DropdownMenuTrigger>
+                <Button variant="outline">"Actions"</Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+                <DropdownMenuGroup>
+                    <DropdownMenuItem>{icon!(icondata::LuPencil)} "Edit"</DropdownMenuItem>
+                    <DropdownMenuItem>{icon!(icondata::LuShare)} "Share"</DropdownMenuItem>
+                </DropdownMenuGroup>
+                <DropdownMenuSeparator />
+                <DropdownMenuGroup>
+                    <DropdownMenuItem variant="destructive">
+                        {icon!(icondata::LuTrash)} "Delete"
+                    </DropdownMenuItem>
+                </DropdownMenuGroup>
+            </DropdownMenuContent>
+        </DropdownMenu>
+    }
+}
diff --git a/docs/src/routes/components/dropdown/examples/dropdown_icons.rs b/docs/src/routes/components/dropdown/examples/dropdown_icons.rs
new file mode 100644
index 00000000..bc5f1382
--- /dev/null
+++ b/docs/src/routes/components/dropdown/examples/dropdown_icons.rs
@@ -0,0 +1,22 @@
+use leptos::prelude::*;
+use singlestage::*;
+
+#[component]
+pub fn DropdownIconsExample() -> impl IntoView {
+    view! {
+        <DropdownMenu>
+            <DropdownMenuTrigger>
+                <Button variant="outline">"Open"</Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+                <DropdownMenuItem>{icon!(icondata::LuUser)} "Profile"</DropdownMenuItem>
+                <DropdownMenuItem>{icon!(icondata::LuCreditCard)} "Billing"</DropdownMenuItem>
+                <DropdownMenuItem>{icon!(icondata::LuSettings)} "Settings"</DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem variant="destructive">
+                    {icon!(icondata::LuLogOut)} "Log out"
+                </DropdownMenuItem>
+            </DropdownMenuContent>
+        </DropdownMenu>
+    }
+}
diff --git a/docs/src/routes/components/dropdown/examples/dropdown_menu.rs b/docs/src/routes/components/dropdown/examples/dropdown_menu.rs
index f3bdc72c..d64aea68 100644
--- a/docs/src/routes/components/dropdown/examples/dropdown_menu.rs
+++ b/docs/src/routes/components/dropdown/examples/dropdown_menu.rs
@@ -1,5 +1,5 @@
 use leptos::prelude::*;
-use singlestage::{Button, dropdown::*, icon};
+use singlestage::{Button, dropdown::*};
 
 #[component]
 pub fn DropdownMenuExample() -> impl IntoView {
@@ -8,7 +8,7 @@ pub fn DropdownMenuExample() -> impl IntoView {
             <DropdownMenuTrigger>
                 <Button variant="outline">"Open"</Button>
             </DropdownMenuTrigger>
-            <DropdownMenuContent>
+            <DropdownMenuContent class="w-40" align="start">
                 <DropdownMenuGroup>
                     <DropdownMenuLabel>"My Account"</DropdownMenuLabel>
                     <DropdownMenuItem>
@@ -20,8 +20,21 @@ pub fn DropdownMenuExample() -> impl IntoView {
                     <DropdownMenuItem>
                         "Settings" <DropdownMenuShortcut>"⌘S"</DropdownMenuShortcut>
                     </DropdownMenuItem>
+                </DropdownMenuGroup>
+                <DropdownMenuSeparator />
+                <DropdownMenuGroup>
+                    <DropdownMenuItem>"Team"</DropdownMenuItem>
+                    <DropdownMenuSub>
+                        <DropdownMenuSubTrigger>"Invite users"</DropdownMenuSubTrigger>
+                        <DropdownMenuSubContent>
+                            <DropdownMenuItem>"Email"</DropdownMenuItem>
+                            <DropdownMenuItem>"Message"</DropdownMenuItem>
+                            <DropdownMenuSeparator />
+                            <DropdownMenuItem>"More..."</DropdownMenuItem>
+                        </DropdownMenuSubContent>
+                    </DropdownMenuSub>
                     <DropdownMenuItem>
-                        "Keyboard shortcuts" <DropdownMenuShortcut>"⌘K"</DropdownMenuShortcut>
+                        "New Team" <DropdownMenuShortcut>"⌘+T"</DropdownMenuShortcut>
                     </DropdownMenuItem>
                 </DropdownMenuGroup>
                 <DropdownMenuSeparator />
@@ -32,12 +45,8 @@ pub fn DropdownMenuExample() -> impl IntoView {
                 </DropdownMenuGroup>
                 <DropdownMenuSeparator />
                 <DropdownMenuGroup>
-                    <DropdownMenuItem variant="destructive">
-                        {icon!(icondata::LuTrash2)} "Delete Account"
-                    </DropdownMenuItem>
                     <DropdownMenuItem>
-                        {icon!(icondata::LuLogOut)} "Logout"
-                        <DropdownMenuShortcut>"⇧⌘Q"</DropdownMenuShortcut>
+                        "Log out" <DropdownMenuShortcut>"⇧⌘Q"</DropdownMenuShortcut>
                     </DropdownMenuItem>
                 </DropdownMenuGroup>
             </DropdownMenuContent>
diff --git a/docs/src/routes/components/dropdown/examples/dropdown_radio_group.rs b/docs/src/routes/components/dropdown/examples/dropdown_radio_group.rs
new file mode 100644
index 00000000..1a086ab9
--- /dev/null
+++ b/docs/src/routes/components/dropdown/examples/dropdown_radio_group.rs
@@ -0,0 +1,25 @@
+use leptos::prelude::*;
+use singlestage::*;
+
+#[component]
+pub fn DropdownRadioGroupExample() -> impl IntoView {
+    let position = RwSignal::new("bottom".to_string());
+
+    view! {
+        <DropdownMenu>
+            <DropdownMenuTrigger>
+                <Button variant="outline">"Open"</Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent class="w-32">
+                <DropdownMenuGroup>
+                    <DropdownMenuLabel>"Panel Position"</DropdownMenuLabel>
+                    <RadioGroup value=position>
+                        <RadioItem value="top">"Top"</RadioItem>
+                        <RadioItem value="bottom">"Bottom"</RadioItem>
+                        <RadioItem value="right">"Right"</RadioItem>
+                    </RadioGroup>
+                </DropdownMenuGroup>
+            </DropdownMenuContent>
+        </DropdownMenu>
+    }
+}
diff --git a/docs/src/routes/components/dropdown/examples/dropdown_radio_icons.rs b/docs/src/routes/components/dropdown/examples/dropdown_radio_icons.rs
new file mode 100644
index 00000000..d32ee210
--- /dev/null
+++ b/docs/src/routes/components/dropdown/examples/dropdown_radio_icons.rs
@@ -0,0 +1,28 @@
+use leptos::prelude::*;
+use singlestage::*;
+
+#[component]
+pub fn DropdownRadioIconsExample() -> impl IntoView {
+    let payment_method = RwSignal::new("card".to_string());
+    view! {
+        <DropdownMenu>
+            <DropdownMenuTrigger>
+                <Button variant="outline">"Payment Method"</Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent class="min-w-56">
+                <DropdownMenuGroup>
+                    <DropdownMenuLabel>"Select Payment Method"</DropdownMenuLabel>
+                    <RadioGroup value=payment_method>
+                        <RadioItem value="card">
+                            {icon!(icondata::LuCreditCard)} "Credit Card"
+                        </RadioItem>
+                        <RadioItem value="paypal">{icon!(icondata::LuWallet)} "PayPal"</RadioItem>
+                        <RadioItem value="bank">
+                            {icon!(icondata::LuBuilding2)} "Bank Transfer"
+                        </RadioItem>
+                    </RadioGroup>
+                </DropdownMenuGroup>
+            </DropdownMenuContent>
+        </DropdownMenu>
+    }
+}
diff --git a/docs/src/routes/components/dropdown/examples/dropdown_shortcuts.rs b/docs/src/routes/components/dropdown/examples/dropdown_shortcuts.rs
new file mode 100644
index 00000000..05b4ceec
--- /dev/null
+++ b/docs/src/routes/components/dropdown/examples/dropdown_shortcuts.rs
@@ -0,0 +1,31 @@
+use leptos::prelude::*;
+use singlestage::*;
+
+#[component]
+pub fn DropdownShortcutsExample() -> impl IntoView {
+    view! {
+        <DropdownMenu>
+            <DropdownMenuTrigger>
+                <Button variant="outline">"Open"</Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+                <DropdownMenuGroup>
+                    <DropdownMenuLabel>"My Account"</DropdownMenuLabel>
+                    <DropdownMenuItem>
+                        "Profile" <DropdownMenuShortcut>"⇧⌘P"</DropdownMenuShortcut>
+                    </DropdownMenuItem>
+                    <DropdownMenuItem>
+                        "Billing" <DropdownMenuShortcut>"⌘B"</DropdownMenuShortcut>
+                    </DropdownMenuItem>
+                    <DropdownMenuItem>
+                        "Settings" <DropdownMenuShortcut>"⌘S"</DropdownMenuShortcut>
+                    </DropdownMenuItem>
+                </DropdownMenuGroup>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem>
+                    "Log out" <DropdownMenuShortcut>"⇧⌘Q"</DropdownMenuShortcut>
+                </DropdownMenuItem>
+            </DropdownMenuContent>
+        </DropdownMenu>
+    }
+}
diff --git a/docs/src/routes/components/dropdown/examples/dropdown_sub.rs b/docs/src/routes/components/dropdown/examples/dropdown_sub.rs
new file mode 100644
index 00000000..d8321838
--- /dev/null
+++ b/docs/src/routes/components/dropdown/examples/dropdown_sub.rs
@@ -0,0 +1,39 @@
+use leptos::prelude::*;
+use singlestage::{Button, dropdown::*};
+
+#[component]
+pub fn DropdownSubExample() -> impl IntoView {
+    view! {
+        <DropdownMenu>
+            <DropdownMenuTrigger>
+                <Button variant="outline">"Open"</Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+                <DropdownMenuGroup>
+                    <DropdownMenuItem>"Team"</DropdownMenuItem>
+                    <DropdownMenuSub>
+                        <DropdownMenuSubTrigger>"Invite users"</DropdownMenuSubTrigger>
+                        <DropdownMenuSubContent>
+                            <DropdownMenuItem>"Email"</DropdownMenuItem>
+                            <DropdownMenuItem>"Message"</DropdownMenuItem>
+                            <DropdownMenuSub>
+                                <DropdownMenuSubTrigger>"More options"</DropdownMenuSubTrigger>
+                                <DropdownMenuSubContent>
+                                    <DropdownMenuItem>"Calendly"</DropdownMenuItem>
+                                    <DropdownMenuItem>"Slack"</DropdownMenuItem>
+                                    <DropdownMenuSeparator />
+                                    <DropdownMenuItem>"Webhook"</DropdownMenuItem>
+                                </DropdownMenuSubContent>
+                            </DropdownMenuSub>
+                            <DropdownMenuSeparator />
+                            <DropdownMenuItem>"Advanced..."</DropdownMenuItem>
+                        </DropdownMenuSubContent>
+                    </DropdownMenuSub>
+                    <DropdownMenuItem>
+                        "New Team" <DropdownMenuShortcut>"⌘+T"</DropdownMenuShortcut>
+                    </DropdownMenuItem>
+                </DropdownMenuGroup>
+            </DropdownMenuContent>
+        </DropdownMenu>
+    }
+}
diff --git a/docs/src/routes/components/dropdown/examples/mod.rs b/docs/src/routes/components/dropdown/examples/mod.rs
index e00de10b..2ab01805 100644
--- a/docs/src/routes/components/dropdown/examples/mod.rs
+++ b/docs/src/routes/components/dropdown/examples/mod.rs
@@ -1,3 +1,25 @@
+mod dropdown_avatar;
+mod dropdown_basic;
+mod dropdown_checkbox_icons;
+mod dropdown_checkboxes;
+mod dropdown_complex;
+mod dropdown_destructive;
+mod dropdown_icons;
 mod dropdown_menu;
+mod dropdown_radio_group;
+mod dropdown_radio_icons;
+mod dropdown_shortcuts;
+mod dropdown_sub;
 
+pub use dropdown_avatar::*;
+pub use dropdown_basic::*;
+pub use dropdown_checkbox_icons::*;
+pub use dropdown_checkboxes::*;
+pub use dropdown_complex::*;
+pub use dropdown_destructive::*;
+pub use dropdown_icons::*;
 pub use dropdown_menu::*;
+pub use dropdown_radio_group::*;
+pub use dropdown_radio_icons::*;
+pub use dropdown_shortcuts::*;
+pub use dropdown_sub::*;
diff --git a/docs/src/routes/components/field/examples/field_responsive_layout.rs b/docs/src/routes/components/field/examples/field_responsive_layout.rs
index 31de8d78..415e5dd9 100644
--- a/docs/src/routes/components/field/examples/field_responsive_layout.rs
+++ b/docs/src/routes/components/field/examples/field_responsive_layout.rs
@@ -18,7 +18,7 @@ pub fn FieldResponsiveLayoutExample() -> impl IntoView {
                                     "Provide your full name for identification"
                                 </FieldDescription>
                             </FieldContent>
-                            <Input placeholder="Evil Rabbit" />
+                            <Input class="sm:min-w-[300px]" placeholder="Evil Rabbit" />
                         </Field>
                         <FieldSeparator />
                         <Field orientation="responsive">
diff --git a/docs/src/routes/components/input_group/examples/input_group_dropdown.rs b/docs/src/routes/components/input_group/examples/input_group_dropdown.rs
index 88cbd402..3b0ee758 100644
--- a/docs/src/routes/components/input_group/examples/input_group_dropdown.rs
+++ b/docs/src/routes/components/input_group/examples/input_group_dropdown.rs
@@ -14,7 +14,7 @@ pub fn InputGroupDropdownExample() -> impl IntoView {
                                 {icon!(icondata::FiMoreHorizontal)}
                             </Button>
                         </DropdownMenuTrigger>
-                        <DropdownMenuContent>
+                        <DropdownMenuContent align="end">
                             <DropdownMenuItem>"Settings"</DropdownMenuItem>
                             <DropdownMenuItem>"Copy path"</DropdownMenuItem>
                             <DropdownMenuItem>"Open location"</DropdownMenuItem>
@@ -31,7 +31,7 @@ pub fn InputGroupDropdownExample() -> impl IntoView {
                                 "Search In..." {icon!(icondata::LuChevronDown, class="size-3")}
                             </Button>
                         </DropdownMenuTrigger>
-                        <DropdownMenuContent class="[--radius:0.95rem]">
+                        <DropdownMenuContent align="end" class="[--radius:0.95rem]">
                             <DropdownMenuItem>"Documentation"</DropdownMenuItem>
                             <DropdownMenuItem>"Blog Posts"</DropdownMenuItem>
                             <DropdownMenuItem>"Changelog"</DropdownMenuItem>
diff --git a/docs/src/routes/components/popover/anatomy.rs b/docs/src/routes/components/popover/anatomy.rs
index 8892b3ba..dc52921a 100644
--- a/docs/src/routes/components/popover/anatomy.rs
+++ b/docs/src/routes/components/popover/anatomy.rs
@@ -8,7 +8,12 @@ pub fn PopoverAnatomy() -> impl IntoView {
             <PopoverTrigger>
                 <Button />
             </PopoverTrigger>
-            <PopoverContent />
+            <PopoverContent>
+                <PopoverHeader>
+                    <PopoverTitle />
+                    <PopoverDescription />
+                </PopoverHeader>
+            </PopoverContent>
         </Popover>
     }
 }
diff --git a/docs/src/routes/components/popover/component.toml b/docs/src/routes/components/popover/component.toml
index 3a006026..817585ae 100644
--- a/docs/src/routes/components/popover/component.toml
+++ b/docs/src/routes/components/popover/component.toml
@@ -2,25 +2,47 @@ name = "Popover"
 description = "Displays rich content in a portal, triggered by a button."
 
 [info]
-title = "This component could use some work"
-description = """While this component does make use of the new popover browser API, proper \
-positioning is still not widely supported. There are hacks in place to try to work around this \
-issue while still taking advantage of the rest of the API. Until this is implemented (hopefully \
-soon - Aug 03, 2025) that puts this component in only a 'Good Enough' state. "<singlestage::Link \
-style="color: var(--foreground)" \
-href="https://developer.mozilla.org/en-US/docs/Web/CSS/anchor#browser_compatibility"> "More \
-Info"</singlestage::Link>""""
+title = "This component uses newly available browser features"
+description = """"<p>"This component uses CSS Anchor Positioning which has only been widely \
+supported since January 2026. If you're targeting older or less mainstream browsers then maybe \
+this component isn't for you, yet. "</p><p>" Alternatively you can use Singlestage 0.4 which \
+positions the component correctly but with limited flexibility for alignment, or roll your own \
+using Singlestage CSS classes for consistent styling. "</p><singlestage::Link style="color: \
+var(--foreground)" href="https://caniuse.com/css-anchor-positioning"> "More Info" \
+</singlestage::Link>""""
 
 [[examples]]
 name = "popover"
 
+[[examples]]
+name = "popover basic"
+title = "Basic"
+description = "A simple popover with a header, title, and description."
+
+[[examples]]
+name = "popover align"
+title = "Align"
+description = "Use the align prop on PopoverContent to control the horizontal alignment."
+
+[[examples]]
+name = "popover form"
+title = "With Form"
+description = "A popover with form fields inside."
+
 [[references]]
 name = "Popover"
 description = "Contains all the parts of a popover."
 extra = """Implements <a class="singlestage-link" \
 href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes">global</a> \
 attributes."""
-attrs = []
+attrs = [
+  { attr = "dismissable", attr_type = "bool", default = "true", description = """Set whether or \
+    not this popover can be light dismissed. Use this with the `open` signal for a manually \
+    managed popover.""" },
+  { attr = "open", attr_type = "bool", default = "false", description = """Reactive signal that \
+    can remotely control the open state of the popover but is not coupled to the actual state of \
+    the popover.""" },
+]
 
 [[references]]
 name = "PopoverContent"
@@ -28,6 +50,36 @@ description = "The component that pops out when the popover is open."
 extra = """Implements <a class="singlestage-link" \
 href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes">global</a> \
 attributes."""
+attrs = [
+  { attr = "align", attr_type = "String", default = """"start"""", description = """Set how to \
+    align the popover. Accepted values are "start" | "center" | "end"""" },
+  { attr = "side", attr_type = "String", default = """"bottom"""", description = """Set which \
+    side the popover opens relative to the trigger. Accepted values are "top" | "right" | \
+    "bottom" | "left". """ },
+]
+
+[[references]]
+name = "PopoverDescription"
+description = "Displays a description of popover content"
+extra = """Implements <a class="singlestage-link" \
+href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes">global</a> \
+attributes."""
+attrs = []
+
+[[references]]
+name = "PopoverHeader"
+description = "A styled header container for use inside a PopoverContent."
+extra = """Implements <a class="singlestage-link" \
+href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes">global</a> \
+attributes."""
+attrs = []
+
+[[references]]
+name = "PopoverTitle"
+description = "Contains the title of the popover."
+extra = """Implements <a class="singlestage-link" \
+href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes">global</a> \
+attributes."""
 attrs = []
 
 [[references]]
diff --git a/docs/src/routes/components/popover/examples/mod.rs b/docs/src/routes/components/popover/examples/mod.rs
index 5d061cc1..e0e6b1e0 100644
--- a/docs/src/routes/components/popover/examples/mod.rs
+++ b/docs/src/routes/components/popover/examples/mod.rs
@@ -1,2 +1,9 @@
 mod popover;
+mod popover_align;
+mod popover_basic;
+mod popover_form;
+
 pub use popover::*;
+pub use popover_align::*;
+pub use popover_basic::*;
+pub use popover_form::*;
diff --git a/docs/src/routes/components/popover/examples/popover.rs b/docs/src/routes/components/popover/examples/popover.rs
index 1427b781..d3a0b2a4 100644
--- a/docs/src/routes/components/popover/examples/popover.rs
+++ b/docs/src/routes/components/popover/examples/popover.rs
@@ -10,23 +10,25 @@ pub fn PopoverExample() -> impl IntoView {
             </PopoverTrigger>
             <PopoverContent class="w-80">
                 <form>
-                    <FieldSet>
-                        <FieldLegend>"Dimensions"</FieldLegend>
+                    <FieldSet class="gap-4">
+                        <FieldLegend variant="label">"Dimensions"</FieldLegend>
                         <FieldDescription>"Set the dimensions for the layer."</FieldDescription>
-                        <FieldGroup class="[&_input]:w-48 gap-2">
+                        <FieldGroup class="gap-2 [&_input]:max-w-48 [&_input]:h-8">
                             <Field orientation="horizontal">
-                                <Input value="100%" autofocus=true>
-                                    "Width"
-                                </Input>
+                                <FieldLabel>"Width"</FieldLabel>
+                                <Input value="100%" autofocus=true />
                             </Field>
                             <Field orientation="horizontal">
-                                <Input value="300px">"Max. width"</Input>
+                                <FieldLabel>"Max. width"</FieldLabel>
+                                <Input value="300px" />
                             </Field>
                             <Field orientation="horizontal">
-                                <Input value="25px">"Height"</Input>
+                                <FieldLabel>"Height"</FieldLabel>
+                                <Input value="25px" />
                             </Field>
                             <Field orientation="horizontal">
-                                <Input value="none">"Max. height"</Input>
+                                <FieldLabel>"Max. height"</FieldLabel>
+                                <Input value="none" />
                             </Field>
                         </FieldGroup>
                     </FieldSet>
diff --git a/docs/src/routes/components/popover/examples/popover_align.rs b/docs/src/routes/components/popover/examples/popover_align.rs
new file mode 100644
index 00000000..5a9c486e
--- /dev/null
+++ b/docs/src/routes/components/popover/examples/popover_align.rs
@@ -0,0 +1,40 @@
+use leptos::prelude::*;
+use singlestage::*;
+
+#[component]
+pub fn PopoverAlignExample() -> impl IntoView {
+    view! {
+        <div class="flex gap-6">
+            <Popover>
+                <PopoverTrigger>
+                    <Button variant="outline" size="sm">
+                        "Start"
+                    </Button>
+                </PopoverTrigger>
+                <PopoverContent align="start" class="w-40">
+                    "Aligned to start"
+                </PopoverContent>
+            </Popover>
+            <Popover>
+                <PopoverTrigger>
+                    <Button variant="outline" size="sm">
+                        "Center"
+                    </Button>
+                </PopoverTrigger>
+                <PopoverContent align="center" class="w-40">
+                    "Aligned to center"
+                </PopoverContent>
+            </Popover>
+            <Popover>
+                <PopoverTrigger>
+                    <Button variant="outline" size="sm">
+                        "End"
+                    </Button>
+                </PopoverTrigger>
+                <PopoverContent align="end" class="w-40">
+                    "Aligned to end"
+                </PopoverContent>
+            </Popover>
+        </div>
+    }
+}
diff --git a/docs/src/routes/components/popover/examples/popover_basic.rs b/docs/src/routes/components/popover/examples/popover_basic.rs
new file mode 100644
index 00000000..baab0978
--- /dev/null
+++ b/docs/src/routes/components/popover/examples/popover_basic.rs
@@ -0,0 +1,19 @@
+use leptos::prelude::*;
+use singlestage::*;
+
+#[component]
+pub fn PopoverBasicExample() -> impl IntoView {
+    view! {
+        <Popover>
+            <PopoverTrigger>
+                <Button variant="outline">"Open Popover"</Button>
+            </PopoverTrigger>
+            <PopoverContent align="start">
+                <PopoverHeader>
+                    <PopoverTitle>"Dimensions"</PopoverTitle>
+                    <PopoverDescription>"Set the dimensions for the layer."</PopoverDescription>
+                </PopoverHeader>
+            </PopoverContent>
+        </Popover>
+    }
+}
diff --git a/docs/src/routes/components/popover/examples/popover_form.rs b/docs/src/routes/components/popover/examples/popover_form.rs
new file mode 100644
index 00000000..16835ff8
--- /dev/null
+++ b/docs/src/routes/components/popover/examples/popover_form.rs
@@ -0,0 +1,33 @@
+use leptos::prelude::*;
+use singlestage::*;
+
+#[component]
+pub fn PopoverFormExample() -> impl IntoView {
+    view! {
+        <Popover>
+            <PopoverTrigger>
+                <Button variant="outline">"Open Popover"</Button>
+            </PopoverTrigger>
+            <PopoverContent class="w-64" align="start">
+                <PopoverHeader>
+                    <PopoverTitle>"Dimensions"</PopoverTitle>
+                    <PopoverDescription>"Set the dimensions for the layer."</PopoverDescription>
+                </PopoverHeader>
+                <FieldGroup class="gap-4">
+                    <Field orientation="horizontal">
+                        <FieldLabel label_for="width" class="w-1/2">
+                            "Width"
+                        </FieldLabel>
+                        <Input id="width" value="100%" />
+                    </Field>
+                    <Field orientation="horizontal">
+                        <FieldLabel label_for="height" class="w-1/2">
+                            "Height"
+                        </FieldLabel>
+                        <Input id="height" value="25px" />
+                    </Field>
+                </FieldGroup>
+            </PopoverContent>
+        </Popover>
+    }
+}
diff --git a/docs/src/routes/debug/dropdown.rs b/docs/src/routes/debug/dropdown.rs
index 4b39780e..15200bef 100644
--- a/docs/src/routes/debug/dropdown.rs
+++ b/docs/src/routes/debug/dropdown.rs
@@ -1,8 +1,19 @@
 use leptos::prelude::*;
 use singlestage::*;
 
+#[component]
+fn Item() -> impl IntoView {
+    view! {
+        <DropdownMenuItem on:click=move |_| {
+            leptos::logging::log!("hey")
+        }>"Click me"</DropdownMenuItem>
+    }
+}
+
 #[component]
 pub fn DebugDropdown() -> impl IntoView {
+    let open = RwSignal::new(false);
+
     view! {
         <h1 class="text-4xl font-semibold">"Dropdown Menu"</h1>
         <ul class="singlestage-ulist text-(--muted-foreground)">
@@ -14,14 +25,139 @@ pub fn DebugDropdown() -> impl IntoView {
             </li>
         </ul>
 
+        <Switch checked=open />
+
+        <DropdownMenu open dismissable=false>
+            <DropdownMenuTrigger>
+                <Button>"Signal"</Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+                <Item />
+            </DropdownMenuContent>
+        </DropdownMenu>
+
+        <DropdownMenu>
+            <DropdownMenuTrigger>
+                <Button>"No dismiss"</Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+                <DropdownMenuItem dismiss=false>"no dismiss"</DropdownMenuItem>
+            </DropdownMenuContent>
+        </DropdownMenu>
+
+        // top
+
+        <DropdownMenu>
+            <DropdownMenuTrigger>
+                <Button>"Top Start"</Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent side="top">
+                <Item />
+            </DropdownMenuContent>
+        </DropdownMenu>
+
+        <DropdownMenu>
+            <DropdownMenuTrigger>
+                <Button>"Top Center"</Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="center" side="top">
+                <Item />
+            </DropdownMenuContent>
+        </DropdownMenu>
+
+        <DropdownMenu>
+            <DropdownMenuTrigger>
+                <Button>"Top End"</Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" side="top">
+                <Item />
+            </DropdownMenuContent>
+        </DropdownMenu>
+
+        // right
+
+        <DropdownMenu>
+            <DropdownMenuTrigger>
+                <Button>"Right Start"</Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent side="right">
+                <Item />
+            </DropdownMenuContent>
+        </DropdownMenu>
+
+        <DropdownMenu>
+            <DropdownMenuTrigger>
+                <Button>"Right Center"</Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="center" side="right">
+                <Item />
+            </DropdownMenuContent>
+        </DropdownMenu>
+
         <DropdownMenu>
             <DropdownMenuTrigger>
-                <Button>"Open"</Button>
+                <Button>"Right End"</Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" side="right">
+                <Item />
+            </DropdownMenuContent>
+        </DropdownMenu>
+
+        // bottom
+
+        <DropdownMenu>
+            <DropdownMenuTrigger>
+                <Button>"Bottom Start"</Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent>
-                <DropdownMenuItem on:click=move |_| {
-                    leptos::logging::log!("hey")
-                }>"Click me"</DropdownMenuItem>
+                <Item />
+            </DropdownMenuContent>
+        </DropdownMenu>
+
+        <DropdownMenu>
+            <DropdownMenuTrigger>
+                <Button size="sm">"Bottom Center"</Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="center">
+                <Item />
+            </DropdownMenuContent>
+        </DropdownMenu>
+
+        <DropdownMenu>
+            <DropdownMenuTrigger>
+                <Button>"Bottom End"</Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+                <Item />
+            </DropdownMenuContent>
+        </DropdownMenu>
+
+        // left
+
+        <DropdownMenu>
+            <DropdownMenuTrigger>
+                <Button>"Left Start"</Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent side="left">
+                <Item />
+            </DropdownMenuContent>
+        </DropdownMenu>
+
+        <DropdownMenu>
+            <DropdownMenuTrigger>
+                <Button>"Left Center"</Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="center" side="left">
+                <Item />
+            </DropdownMenuContent>
+        </DropdownMenu>
+
+        <DropdownMenu>
+            <DropdownMenuTrigger>
+                <Button>"Left End"</Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" side="left">
+                <Item />
             </DropdownMenuContent>
         </DropdownMenu>
     }
diff --git a/docs/src/routes/getting_started/installation.rs b/docs/src/routes/getting_started/installation.rs
index c0d0c429..3946db6c 100644
--- a/docs/src/routes/getting_started/installation.rs
+++ b/docs/src/routes/getting_started/installation.rs
@@ -16,7 +16,7 @@ pub fn Installation() -> impl IntoView {
 <span>[dependencies]</span>
 <span>leptos = "0.8"</span>
 <span>...</span>
-<span>singlestage = "0.4"</span>
+<span>singlestage = "0.5"</span>
 </pre>"#
             .to_string() />
 
@@ -30,7 +30,7 @@ pub fn Installation() -> impl IntoView {
 <span>[dependencies]</span>
 <span>leptos = { version = "0.8", features = ["nightly"] }</span>
 <span>...</span>
-<span>singlestage = { version = "0.4", features = ["nightly"] }</span>
+<span>singlestage = { version = "0.5", features = ["nightly"] }</span>
 </pre>"#
             .to_string() />
 
@@ -44,7 +44,7 @@ pub fn Installation() -> impl IntoView {
 <span>[dependencies]</span>
 <span>leptos = { version = "0.8", features = ["islands"] }</span>
 <span>...</span>
-<span>singlestage = { version = "0.4", features = ["islands"] }</span>
+<span>singlestage = { version = "0.5", features = ["islands"] }</span>
 </pre>"#
             .to_string() />
 
@@ -82,7 +82,7 @@ pub fn Installation() -> impl IntoView {
 <span>leptos = "0.8"</span>
 <span>...</span>
 <span>reactive_stores = "0.3"</span>
-<span>singlestage = { version = "0.4", features = ["stores"] }</span>
+<span>singlestage = { version = "0.5", features = ["stores"] }</span>
 </pre>"#
             .to_string() />
     }
diff --git a/singlestage/Cargo.toml b/singlestage/Cargo.toml
index 275f1a60..1de4e1f8 100644
--- a/singlestage/Cargo.toml
+++ b/singlestage/Cargo.toml
@@ -81,15 +81,15 @@ alert = []
 aspect_ratio = []
 avatar = []
 badge = []
-breadcrumb = ["dropdown"]
+breadcrumb = []
 button = ["input_group"]
 button_group = []
 card = []
 carousel = []
 checkbox = ["field", "label"]
-context_menu = []
+context_menu = ["dropdown"]
 dialog = []
-dropdown = ["button"]
+dropdown = ["popover"]
 empty = []
 icon = ["macro"]
 field = []
diff --git a/singlestage/build.rs b/singlestage/build.rs
index 7f9e899e..c32f734d 100644
--- a/singlestage/build.rs
+++ b/singlestage/build.rs
@@ -130,7 +130,6 @@ fn main() {
         "card",
         "carousel",
         "checkbox",
-        "context_menu",
         "dialog",
         "dropdown",
         "empty",
diff --git a/singlestage/src/components/accordion/trigger.rs b/singlestage/src/components/accordion/trigger.rs
index f4d14e56..ae44d0c4 100644
--- a/singlestage/src/components/accordion/trigger.rs
+++ b/singlestage/src/components/accordion/trigger.rs
@@ -164,8 +164,8 @@ pub fn AccordionTrigger(
         <summary>
             <h3 {..global_attrs_1} {..global_attrs_2}>
                 {children()}
-                {if accordion_icon.is_some() {
-                    (accordion_icon.unwrap().children)().into_any()
+                {if let Some(accordion_icon) = accordion_icon {
+                    (accordion_icon.children)().into_any()
                 } else {
                     view! {
                         <svg
diff --git a/singlestage/src/components/badge/mod.rs b/singlestage/src/components/badge/mod.rs
index d2a003b0..a545d618 100644
--- a/singlestage/src/components/badge/mod.rs
+++ b/singlestage/src/components/badge/mod.rs
@@ -1,3 +1,4 @@
+use crate::Reactive;
 use leptos::prelude::*;
 
 /// Contains arbitrary badge content.
@@ -7,7 +8,7 @@ pub fn Badge(
 
     /// Toggle whether or not this badge appears invalid.
     #[prop(optional, into)]
-    invalid: MaybeProp<bool>,
+    invalid: Reactive<bool>,
     /// Define the badge variant. Defaults to `"primary"`.
     /// Variants: "primary" | "secondary" | "destructive" | "outline"
     #[prop(optional, into)]
@@ -160,7 +161,7 @@ pub fn Badge(
 
     view! {
         <span
-            aria_invalid=move || if invalid.get().unwrap_or_default() { Some("true") } else { None }
+            aria_invalid=move || if invalid.get() { Some("true") } else { None }
             class=move || {
                 format!(
                     "{} {}",
diff --git a/singlestage/src/components/button/mod.rs b/singlestage/src/components/button/mod.rs
index 14a137ac..cf8bbb68 100644
--- a/singlestage/src/components/button/mod.rs
+++ b/singlestage/src/components/button/mod.rs
@@ -1,6 +1,6 @@
 use crate::{
     DropdownMenuContext, DropdownTriggerContext, InputGroupContext, PopoverContext,
-    PopoverTriggerContext,
+    PopoverTriggerContext, Reactive,
 };
 use leptos::prelude::*;
 
@@ -35,7 +35,7 @@ pub fn Button(
     commandfor: MaybeProp<String>,
     /// Toggle whether or not the input is disabled.
     #[prop(optional, into)]
-    disabled: MaybeProp<bool>,
+    disabled: Reactive<bool>,
     /// Associate this element with a form element that may not be its parent by its `id`.
     #[prop(optional, into)]
     form: MaybeProp<String>,
@@ -252,7 +252,9 @@ pub fn Button(
                 if button_is_trigger {
                     if let Some(dropdown) = use_context::<DropdownMenuContext>() {
                         Some(dropdown.menu_id.get())
-                    } else { use_context::<PopoverContext>().map(|popover| popover.menu_id.get()) }
+                    } else {
+                        use_context::<PopoverContext>().map(|popover| popover.menu_id.get())
+                    }
                 } else {
                     None
                 }
@@ -322,6 +324,20 @@ pub fn Button(
                     id.get()
                 }
             }
+            on:click=move |ev| {
+                if button_is_trigger {
+                    if let Some(dropdown) = use_context::<DropdownMenuContext>() {
+                        if !dropdown.dismissable.get_untracked() {
+                            ev.prevent_default();
+                            dropdown.open.set(!dropdown.open.get_untracked());
+                        }
+                    } else if let Some(popover) = use_context::<PopoverContext>()
+                        && !popover.dismissable.get_untracked() {
+                            ev.prevent_default();
+                            popover.open.set(!popover.open.get_untracked());
+                        }
+                }
+            }
             popovertarget=move || {
                 if button_is_trigger {
                     let mut target_id = None;
@@ -345,6 +361,15 @@ pub fn Button(
                 }
             }
             prop:disabled=move || disabled.get()
+            style:anchor-name=move || {
+                if button_is_trigger {
+                    if let Some(dropdown) = use_context::<DropdownMenuContext>() {
+                        Some(format!("--{}", dropdown.trigger_id.get()))
+                    } else { use_context::<PopoverContext>().map(|popover| format!("--{}", popover.trigger_id.get())) }
+                } else {
+                    None
+                }
+            }
             type=move || {
                 if let Some(button_type) = button_type.get() {
                     Some(button_type)
diff --git a/singlestage/src/components/carousel/next.rs b/singlestage/src/components/carousel/next.rs
index f90727dc..e0c924ba 100644
--- a/singlestage/src/components/carousel/next.rs
+++ b/singlestage/src/components/carousel/next.rs
@@ -1,4 +1,5 @@
 use super::CarouselContext;
+use crate::Reactive;
 use leptos::prelude::*;
 
 /// A button that triggers the change to the next available carousel item.
@@ -22,7 +23,7 @@ pub fn CarouselNext(
     commandfor: MaybeProp<String>,
     /// Toggle whether or not the input is disabled.
     #[prop(optional, into)]
-    disabled: MaybeProp<bool>,
+    disabled: Reactive<bool>,
     /// Associate this element with a form element that may not be its parent by its `id`.
     #[prop(optional, into)]
     form: MaybeProp<String>,
diff --git a/singlestage/src/components/carousel/previous.rs b/singlestage/src/components/carousel/previous.rs
index 9739254a..ce2620e4 100644
--- a/singlestage/src/components/carousel/previous.rs
+++ b/singlestage/src/components/carousel/previous.rs
@@ -1,5 +1,5 @@
 use super::CarouselContext;
-
+use crate::Reactive;
 use leptos::prelude::*;
 
 /// A button that triggers the change to the previous available carousel item.
@@ -23,7 +23,7 @@ pub fn CarouselPrevious(
     commandfor: MaybeProp<String>,
     /// Toggle whether or not the input is disabled.
     #[prop(optional, into)]
-    disabled: MaybeProp<bool>,
+    disabled: Reactive<bool>,
     /// Associate this element with a form element that may not be its parent by its `id`.
     #[prop(optional, into)]
     form: MaybeProp<String>,
diff --git a/singlestage/src/components/checkbox/checkbox.css b/singlestage/src/components/checkbox/checkbox.css
index 8349df7c..48375c00 100644
--- a/singlestage/src/components/checkbox/checkbox.css
+++ b/singlestage/src/components/checkbox/checkbox.css
@@ -1,7 +1,5 @@
 @layer components {
-  .singlestage-checkbox.singlestage-input[type="checkbox"]:not(
-      [role="switch"]
-    ) {
+  .singlestage-checkbox:not(.singlestage-checkbox-item) {
     @apply appearance-none
     aria-invalid:border-destructive
     aria-invalid:ring-destructive/20
@@ -34,7 +32,7 @@
     }
   }
 
-  .singlestage-checkbox-group {
+  .singlestage-checkbox-group:not(:has(.singlestage-checkbox-item)) {
     @apply flex
     flex-col
     font-normal
diff --git a/singlestage/src/components/checkbox/checkbox.rs b/singlestage/src/components/checkbox/checkbox.rs
index 93692f51..38a92291 100644
--- a/singlestage/src/components/checkbox/checkbox.rs
+++ b/singlestage/src/components/checkbox/checkbox.rs
@@ -26,7 +26,7 @@ pub fn Checkbox(
     required: MaybeProp<bool>,
     /// Whether the form control is disabled
     #[prop(optional, into)]
-    disabled: MaybeProp<bool>,
+    disabled: Reactive<bool>,
     /// The value of the control. When specified in the HTML, corresponds to the initial value
     #[prop(optional, into)]
     value: MaybeProp<String>,
@@ -198,7 +198,7 @@ pub fn Checkbox(
 
     Effect::new(move || {
         if let Some(checkbox) = checkbox_ref.get_untracked() {
-            checkbox.set_disabled(disabled.get().unwrap_or_default());
+            checkbox.set_disabled(disabled.get());
         }
     });
 
@@ -252,7 +252,7 @@ pub fn Checkbox(
                     None
                 }
             }
-            aria-invalid=move || {
+            aria_invalid=move || {
                 if let Some(checkbox_group) = use_context::<CheckboxGroupContext>() {
                     checkbox_group.invalid.get().to_string()
                 } else {
diff --git a/singlestage/src/components/checkbox/group.rs b/singlestage/src/components/checkbox/group.rs
index bd10abf5..5022de88 100644
--- a/singlestage/src/components/checkbox/group.rs
+++ b/singlestage/src/components/checkbox/group.rs
@@ -17,7 +17,7 @@ pub fn CheckboxGroup(
     //
     /// Toggle whether or not the input is disabled.
     #[prop(optional, into)]
-    disabled: MaybeProp<bool>,
+    disabled: Reactive<bool>,
     /// Associate this element with a form element that may not be its parent by its `id`.
     #[prop(optional, into)]
     form: MaybeProp<String>,
diff --git a/singlestage/src/components/context_menu/content.rs b/singlestage/src/components/context_menu/content.rs
index 0d5b85eb..6029bea6 100644
--- a/singlestage/src/components/context_menu/content.rs
+++ b/singlestage/src/components/context_menu/content.rs
@@ -47,6 +47,9 @@ pub fn ContextMenuContent(
     /// Controls hidden status of the element.
     #[prop(optional, into)]
     hidden: MaybeProp<String>,
+    /// Set the id of this element.
+    #[prop(optional, into)]
+    id: MaybeProp<String>,
     /// Toggle if the browser reacts to input events from this element.
     #[prop(optional, into)]
     inert: MaybeProp<bool>,
@@ -104,10 +107,12 @@ pub fn ContextMenuContent(
 ) -> impl IntoView {
     let menu = expect_context::<ContextMenuContext>();
     let menu_ref = NodeRef::<leptos::html::Menu>::new();
-    let uuid = uuid::Uuid::new_v4().to_string();
 
-    menu.menu_id.set(uuid.clone());
-    menu.menu_ref.set(Some(menu_ref));
+    Effect::new(move || {
+        if let Some(popover) = menu_ref.get_untracked() {
+            let _ = popover.toggle_popover_with_force(menu.open.get());
+        }
+    });
 
     let global_attrs_1 = view! {
         <{..}
@@ -148,16 +153,24 @@ pub fn ContextMenuContent(
     view! {
         <menu
             class=move || {
-                format!("singlestage-context-menu-content {}", class.get().unwrap_or_default())
+                format!(
+                    "singlestage-dropdown-menu-content singlestage-popover {}",
+                    class.get().unwrap_or_default(),
+                )
+            }
+            id={
+                let menu_id = id.get().unwrap_or(uuid::Uuid::new_v4().to_string());
+                menu.menu_id.set(menu_id.clone());
+                menu_id
             }
-            id=uuid
             node_ref=menu_ref
             on:contextmenu=move |ev| {
                 ev.prevent_default();
             }
             popover="auto"
             role="menu"
-            style=move || { format!("left: {}px; top: {}px", menu.x.get(), menu.y.get()) }
+            style:left=move || format!("{}px", menu.x.get())
+            style:top=move || format!("{}px", menu.y.get())
 
             {..global_attrs_1}
             {..global_attrs_2}
diff --git a/singlestage/src/components/context_menu/context_menu.css b/singlestage/src/components/context_menu/context_menu.css
deleted file mode 100644
index bd227068..00000000
--- a/singlestage/src/components/context_menu/context_menu.css
+++ /dev/null
@@ -1,116 +0,0 @@
-@layer components {
-  .singlestage-context-menu {
-    @apply transition-all;
-
-    [popover] {
-      @apply fixed
-      bg-transparent;
-    }
-
-    .singlestage-context-menu-content {
-      @apply bg-popover
-      border
-      min-w-[8rem]
-      overflow-x-hidden
-      overflow-y-auto
-      p-1
-      rounded-md
-      shadow-md
-      text-nowrap
-      text-popover-foreground
-      z-50;
-
-      .singlestage-radio-group {
-        @appply block
-        gap-0;
-      }
-    }
-
-    .singlestage-context-menu-item {
-      > button {
-        @apply [&_svg:not([class*='size-'])]:size-4
-        [&_svg:not([class*='text-'])]:text-muted-foreground
-        [&_svg]:pointer-events-none
-        [&_svg]:shrink-0
-        content-center
-        cursor-default
-        data-[disabled]:opacity-50
-        data-[disabled]:pointer-events-none
-        data-[inset]:pl-8
-        data-[variant=destructive]:*:[svg]:!text-destructive
-        data-[variant=destructive]:focus:bg-destructive/10
-        data-[variant=destructive]:focus:text-destructive
-        data-[variant=destructive]:text-destructive
-        focus:bg-accent
-        focus:text-accent-foreground
-        flex
-        gap-2
-        h-full
-        hover:bg-accent
-        hover:text-accent-foreground
-        items-center
-        outline-hidden
-        px-2
-        py-1.5
-        relative
-        rounded-sm
-        select-none
-        text-sm
-        w-full;
-      }
-
-      > .singlestage-label {
-        @apply h-full
-        w-full;
-      }
-    }
-
-    .singlestage-context-menu-label {
-      @apply data-[inset]:pl-8
-      font-medium
-      px-2
-      py-1.5
-      text-sm;
-    }
-
-    .singlestage-context-menu-separator {
-      @apply -mx-1
-      bg-border
-      h-px
-      my-1;
-    }
-
-    .singlestage-context-menu-shortcut {
-      @apply ml-auto
-      text-muted-foreground
-      text-xs
-      tracking-widest;
-    }
-
-    .singlestage-context-menu-sub-trigger {
-      @apply cursor-default
-      flex
-      focus:bg-accent
-      focus:text-accent-foreground
-      items-center
-      outline-hidden
-      px-2
-      py-1.5
-      rounded-sm
-      select-none
-      text-sm;
-    }
-
-    .singlestage-context-menu-sub-content {
-      @apply bg-popover
-      border
-      min-w-[8rem]
-      overflow-hidden
-      p-1
-      rounded-md
-      shadow-lg
-      text-popover-foreground
-      z-50;
-    }
-  }
-}
diff --git a/singlestage/src/components/context_menu/group.rs b/singlestage/src/components/context_menu/group.rs
index 4df04ab9..a8735d87 100644
--- a/singlestage/src/components/context_menu/group.rs
+++ b/singlestage/src/components/context_menu/group.rs
@@ -152,9 +152,9 @@ pub fn ContextMenuGroup(
 
     view! {
         <div
-            aria-labelledby=move || heading_id.get()
+            aria_labelledby=move || heading_id.get()
             class=move || {
-                format!("singlestage-context-menu-group {}", class.get().unwrap_or_default())
+                format!("singlestage-dropdown-menu-group {}", class.get().unwrap_or_default())
             }
             role="group"
 
diff --git a/singlestage/src/components/context_menu/item.rs b/singlestage/src/components/context_menu/item.rs
index 8008bbb1..2b0eeca1 100644
--- a/singlestage/src/components/context_menu/item.rs
+++ b/singlestage/src/components/context_menu/item.rs
@@ -1,4 +1,4 @@
-use crate::ContextMenuContext;
+use crate::{ContextMenuContext, Reactive};
 use leptos::prelude::*;
 
 /// Contains a menu item.
@@ -8,7 +8,13 @@ pub fn ContextMenuItem(
 
     /// Controls whether the item appears disabled and is clickable.
     #[prop(optional, into)]
-    disabled: MaybeProp<bool>,
+    disabled: Reactive<bool>,
+    /// Toggle whether clicking this item dismisses its parent menu
+    #[prop(optional, into, default = Reactive::new(true))]
+    dismiss: Reactive<bool>,
+    /// Set whether or not this element should display inset from its normal position.
+    #[prop(optional, into)]
+    inset: MaybeProp<bool>,
     /// Set the display variant of the item.
     ///
     /// Accepted values: "destructive"
@@ -166,7 +172,20 @@ pub fn ContextMenuItem(
     view! {
         <li
             class=move || {
-                format!("singlestage-context-menu-item {}", class.get().unwrap_or_default())
+                format!(
+                    "singlestage-dropdown-menu-item{}{}{} {}",
+                    if disabled.get() { " singlestage-dropdown-menu-item-disabled" } else { "" },
+                    if inset.get().unwrap_or_default() {
+                        " singlestage-dropdown-menu-inset"
+                    } else {
+                        ""
+                    },
+                    match variant.get().unwrap_or_default().as_str() {
+                        "destructive" => " singlestage-dropdown-menu-item-destructive",
+                        _ => "",
+                    },
+                    class.get().unwrap_or_default(),
+                )
             }
             role="menuitem"
             value=move || value.get()
@@ -175,12 +194,10 @@ pub fn ContextMenuItem(
             {..global_attrs_2}
         >
             <button
-                aria-controls=move || menu.menu_id.get()
-                aria-haspopup="menu"
-                data-disabled=move || disabled.get().unwrap_or_default()
-                data-variant=move || variant.get().unwrap_or_default()
-                popovertarget=move || menu.menu_id.get()
-                popovertargetaction="toggle"
+                aria_controls=move || if dismiss.get() { Some(menu.menu_id.get()) } else { None }
+                aria_haspopup=move || if dismiss.get() { Some("menu") } else { None }
+                popovertarget=move || if dismiss.get() { Some(menu.menu_id.get()) } else { None }
+                popovertargetaction=move || if dismiss.get() { Some("toggle") } else { None }
                 type="button"
             >
                 {children()}
diff --git a/singlestage/src/components/context_menu/label.rs b/singlestage/src/components/context_menu/label.rs
index afbf9880..107a1d08 100644
--- a/singlestage/src/components/context_menu/label.rs
+++ b/singlestage/src/components/context_menu/label.rs
@@ -6,6 +6,10 @@ use leptos::prelude::*;
 pub fn ContextMenuLabel(
     children: Children,
 
+    /// Set whether or not this element should display inset from its normal position.
+    #[prop(optional, into)]
+    inset: MaybeProp<bool>,
+
     // GLOBAL ATTRIBUTES
     //
     /// A space separated list of keys to focus this element. The first key available on the user's
@@ -151,7 +155,15 @@ pub fn ContextMenuLabel(
         <h6
             id=uuid
             class=move || {
-                format!("singlestage-context-menu-label {}", class.get().unwrap_or_default())
+                format!(
+                    "singlestage-dropdown-menu-label{} {}",
+                    if inset.get().unwrap_or_default() {
+                        " singlestage-dropdown-menu-inset"
+                    } else {
+                        ""
+                    },
+                    class.get().unwrap_or_default(),
+                )
             }
 
             {..global_attrs_1}
diff --git a/singlestage/src/components/context_menu/menu.rs b/singlestage/src/components/context_menu/menu.rs
index a17abaed..f60e31cd 100644
--- a/singlestage/src/components/context_menu/menu.rs
+++ b/singlestage/src/components/context_menu/menu.rs
@@ -1,4 +1,4 @@
-use crate::ContextMenuContext;
+use crate::{ContextMenuContext, Reactive};
 use leptos::{context::Provider, prelude::*};
 
 /// Contains all the parts of a context menu.
@@ -6,6 +6,11 @@ use leptos::{context::Provider, prelude::*};
 pub fn ContextMenu(
     children: Children,
 
+    /// Reactive signal that can remotely control the open state of the popover **but is not
+    /// coupled to the actual open state of the popover**
+    #[prop(optional, into)]
+    open: Reactive<bool>,
+
     // GLOBAL ATTRIBUTES
     //
     /// A space separated list of keys to focus this element. The first key available on the user's
@@ -115,7 +120,7 @@ pub fn ContextMenu(
 
     let context = ContextMenuContext {
         menu_id,
-        menu_ref: RwSignal::new(None),
+        open,
         x: RwSignal::new(i32::default()),
         y: RwSignal::new(i32::default()),
     };
@@ -161,9 +166,7 @@ pub fn ContextMenu(
 
     view! {
         <div
-            class=move || {
-                format!("singlestage-context-menu {}", class.get().unwrap_or_default())
-            }
+            class=move || format!("singlestage-context-menu {}", class.get().unwrap_or_default())
 
             {..global_attrs_1}
             {..global_attrs_2}
diff --git a/singlestage/src/components/context_menu/mod.rs b/singlestage/src/components/context_menu/mod.rs
index 178ba7e4..2664dcce 100644
--- a/singlestage/src/components/context_menu/mod.rs
+++ b/singlestage/src/components/context_menu/mod.rs
@@ -5,6 +5,7 @@ mod label;
 mod menu;
 mod separator;
 mod shortcut;
+mod sub;
 mod trigger;
 
 pub use content::*;
@@ -14,14 +15,16 @@ pub use label::*;
 pub use menu::*;
 pub use separator::*;
 pub use shortcut::*;
+pub use sub::*;
 pub use trigger::*;
 
-use leptos::{html::Menu, prelude::*};
+use crate::Reactive;
+use leptos::prelude::*;
 
 #[derive(Clone)]
 pub struct ContextMenuContext {
     menu_id: RwSignal<String>,
-    menu_ref: RwSignal<Option<NodeRef<Menu>>>,
+    pub open: Reactive<bool>,
     x: RwSignal<i32>,
     y: RwSignal<i32>,
 }
diff --git a/singlestage/src/components/context_menu/separator.rs b/singlestage/src/components/context_menu/separator.rs
index ecf0e214..21ae821d 100644
--- a/singlestage/src/components/context_menu/separator.rs
+++ b/singlestage/src/components/context_menu/separator.rs
@@ -146,7 +146,7 @@ pub fn ContextMenuSeparator(
     view! {
         <hr
             class=move || {
-                format!("singlestage-context-menu-separator {}", class.get().unwrap_or_default())
+                format!("singlestage-dropdown-menu-separator {}", class.get().unwrap_or_default())
             }
             role="separator"
 
diff --git a/singlestage/src/components/context_menu/shortcut.rs b/singlestage/src/components/context_menu/shortcut.rs
index ef148a54..4813972e 100644
--- a/singlestage/src/components/context_menu/shortcut.rs
+++ b/singlestage/src/components/context_menu/shortcut.rs
@@ -152,7 +152,7 @@ pub fn ContextMenuShortcut(
     view! {
         <span
             class=move || {
-                format!("singlestage-context-menu-shortcut {}", class.get().unwrap_or_default())
+                format!("singlestage-dropdown-menu-shortcut {}", class.get().unwrap_or_default())
             }
 
             {..global_attrs_1}
diff --git a/singlestage/src/components/context_menu/sub/content.rs b/singlestage/src/components/context_menu/sub/content.rs
new file mode 100644
index 00000000..6fa37f8a
--- /dev/null
+++ b/singlestage/src/components/context_menu/sub/content.rs
@@ -0,0 +1,173 @@
+use crate::ContextMenuSubContext;
+use leptos::prelude::*;
+
+/// The component that pops out when the sub trigger is triggered.
+#[component]
+pub fn ContextMenuSubContent(
+    children: Children,
+
+    // GLOBAL ATTRIBUTES
+    //
+    /// A space separated list of keys to focus this element. The first key available on the user's
+    /// keyboard layout is used.
+    #[prop(optional, into)]
+    accesskey: MaybeProp<String>,
+    /// Sets whether the input value should be capitalized and how. If a parent `<form>` has
+    /// `autocapitalize` rules set, it will override any rules set here.
+    ///
+    /// Accepted values: "none" or "off" | "sentences" or "on" | "words" | "characters".
+    #[prop(optional, into)]
+    autocapitalize: MaybeProp<String>,
+    /// Grabs focus once the page has finished loading. Only one element on the page can be focused
+    /// at a time.
+    #[prop(optional, into)]
+    autofocus: MaybeProp<bool>,
+    /// Apply classes to the element.
+    #[prop(optional, into)]
+    class: MaybeProp<String>,
+    /// Allows client-side editing of the element by the user.
+    ///
+    /// Accepted values: "true" | "false" | "plaintext-only"
+    #[prop(optional, into)]
+    contenteditable: MaybeProp<String>,
+    /// Indicate directionality of the element's text.
+    ///
+    /// Accepted values: "ltr" | "rtl" | "auto"
+    #[prop(optional, into)]
+    dir: MaybeProp<String>,
+    /// Toggle whether the element can be dragged.
+    #[prop(optional, into)]
+    draggable: MaybeProp<bool>,
+    /// Modifies the appearance of the enter key on virtual keyboards.
+    #[prop(optional, into)]
+    enterkeyhint: MaybeProp<String>,
+    /// Expose elements in the shadow DOM to be manipulated by the DOM.
+    #[prop(optional, into)]
+    exportparts: MaybeProp<String>,
+    /// Controls hidden status of the element.
+    #[prop(optional, into)]
+    hidden: MaybeProp<String>,
+    /// Toggle if the browser reacts to input events from this element.
+    #[prop(optional, into)]
+    inert: MaybeProp<bool>,
+    /// Hints to the browser of what type of virtual keyboard to display when editing this element
+    /// or its children.
+    #[prop(optional, into)]
+    inputmode: MaybeProp<String>,
+    /// Used to render a standard element as a custom element.
+    #[prop(optional, into)]
+    is: MaybeProp<String>,
+    /// Unique global identifier of an item.
+    #[prop(optional, into)]
+    itemid: MaybeProp<String>,
+    /// Used to add properties to an item.
+    #[prop(optional, into)]
+    itemprop: MaybeProp<String>,
+    /// Used to associate an item with a related non-parent element that's using `itemscope`.
+    #[prop(optional, into)]
+    itemref: MaybeProp<String>,
+    /// Used to declare that children elements are related to a particular item.
+    #[prop(optional, into)]
+    itemscope: MaybeProp<String>,
+    /// URL of data used to define `itemprops`.
+    #[prop(optional, into)]
+    itemtype: MaybeProp<String>,
+    /// Defines the language of an element.
+    #[prop(optional, into)]
+    lang: MaybeProp<String>,
+    /// Cryptographic "number used once".
+    #[prop(optional, into)]
+    nonce: MaybeProp<String>,
+    /// List of the part names of the element.
+    #[prop(optional, into)]
+    part: MaybeProp<String>,
+    /// Assigns a slot to an element.
+    #[prop(optional, into)]
+    slot: MaybeProp<String>,
+    /// Toggle spellcheck for this input.
+    ///
+    /// Accepted values: "default" | "true" | "false".
+    #[prop(optional, into)]
+    spellcheck: MaybeProp<String>,
+    /// Define CSS to be applied to the element.
+    #[prop(optional, into)]
+    style: MaybeProp<String>,
+    /// Controls how an element behaves when a user navigates using the tab key.
+    #[prop(optional, into)]
+    tabindex: MaybeProp<usize>,
+    /// Describes the content of the element to screen readers.
+    #[prop(optional, into)]
+    title: MaybeProp<String>,
+    /// Defines localization behavior for the element.
+    #[prop(optional, into)]
+    translate: MaybeProp<String>,
+) -> impl IntoView {
+    let sub = expect_context::<ContextMenuSubContext>();
+    let menu_ref = NodeRef::<leptos::html::Menu>::new();
+
+    let uuid = uuid::Uuid::new_v4();
+    sub.menu_id.set(uuid.to_string());
+
+    Effect::new(move || {
+        if let Some(popover) = menu_ref.get_untracked() {
+            let _ = popover.toggle_popover_with_force(sub.open.get());
+        }
+    });
+
+    let global_attrs_1 = view! {
+        <{..}
+            accesskey=move || accesskey.get()
+            autocapitalize=move || autocapitalize.get()
+            autofocus=move || autofocus.get()
+            contenteditable=move || contenteditable.get()
+            dir=move || dir.get()
+            draggable=move || draggable.get()
+            enterkeyhint=move || enterkeyhint.get()
+            exportparts=move || exportparts.get()
+            hidden=move || hidden.get()
+            inert=move || inert.get()
+            inputmode=move || inputmode.get()
+            is=move || is.get()
+            itemid=move || itemid.get()
+        />
+    };
+
+    let global_attrs_2 = view! {
+        <{..}
+            itemprop=move || itemprop.get()
+            itemref=move || itemref.get()
+            itemscope=move || itemscope.get()
+            itemtype=move || itemtype.get()
+            lang=move || lang.get()
+            nonce=move || nonce.get()
+            part=move || part.get()
+            slot=move || slot.get()
+            spellcheck=move || spellcheck.get()
+            style=move || style.get()
+            tabindex=move || tabindex.get()
+            title=move || title.get()
+            translate=move || translate.get()
+        />
+    };
+
+    view! {
+        <menu
+            class=move || {
+                format!(
+                    "singlestage-dropdown-menu-content singlestage-popover singlestage-popover-right singlestage-popover-animations {}",
+                    class.get().unwrap_or_default(),
+                )
+            }
+            id=move || uuid.to_string()
+            node_ref=menu_ref
+            popover="auto"
+            role="menu"
+            style:position-anchor=move || { format!("--{}", sub.trigger_id.get()) }
+
+            {..global_attrs_1}
+            {..global_attrs_2}
+        >
+            {children()}
+        </menu>
+    }
+}
diff --git a/singlestage/src/components/context_menu/sub/mod.rs b/singlestage/src/components/context_menu/sub/mod.rs
new file mode 100644
index 00000000..b8b9704e
--- /dev/null
+++ b/singlestage/src/components/context_menu/sub/mod.rs
@@ -0,0 +1,192 @@
+mod content;
+mod trigger;
+
+pub use content::*;
+pub use trigger::*;
+
+use crate::Reactive;
+use leptos::{context::Provider, prelude::*};
+
+#[derive(Clone)]
+pub struct ContextMenuSubContext {
+    pub menu_id: RwSignal<String>,
+    pub open: Reactive<bool>,
+    pub trigger_id: RwSignal<String>,
+}
+
+/// Contains all the parts of a sub menu.
+#[component]
+pub fn ContextMenuSub(
+    children: Children,
+
+    /// Reactive signal that can remotely control the open state of the popover **but is not
+    /// coupled to the actual open state of the popover**
+    #[prop(optional, into)]
+    open: Reactive<bool>,
+
+    // GLOBAL ATTRIBUTES
+    //
+    /// A space separated list of keys to focus this element. The first key available on the user's
+    /// keyboard layout is used.
+    #[prop(optional, into)]
+    accesskey: MaybeProp<String>,
+    /// Sets whether the input value should be capitalized and how. If a parent `<form>` has
+    /// `autocapitalize` rules set, it will override any rules set here.
+    ///
+    /// Accepted values: "none" or "off" | "sentences" or "on" | "words" | "characters".
+    #[prop(optional, into)]
+    autocapitalize: MaybeProp<String>,
+    /// Grabs focus once the page has finished loading. Only one element on the page can be focused
+    /// at a time.
+    #[prop(optional, into)]
+    autofocus: MaybeProp<bool>,
+    /// Apply classes to the element.
+    #[prop(optional, into)]
+    class: MaybeProp<String>,
+    /// Allows client-side editing of the element by the user.
+    ///
+    /// Accepted values: "true" | "false" | "plaintext-only"
+    #[prop(optional, into)]
+    contenteditable: MaybeProp<String>,
+    /// Indicate directionality of the element's text.
+    ///
+    /// Accepted values: "ltr" | "rtl" | "auto"
+    #[prop(optional, into)]
+    dir: MaybeProp<String>,
+    /// Toggle whether the element can be dragged.
+    #[prop(optional, into)]
+    draggable: MaybeProp<bool>,
+    /// Modifies the appearance of the enter key on virtual keyboards.
+    #[prop(optional, into)]
+    enterkeyhint: MaybeProp<String>,
+    /// Expose elements in the shadow DOM to be manipulated by the DOM.
+    #[prop(optional, into)]
+    exportparts: MaybeProp<String>,
+    /// Controls hidden status of the element.
+    #[prop(optional, into)]
+    hidden: MaybeProp<String>,
+    /// Set the id of this element.
+    #[prop(optional, into)]
+    id: MaybeProp<String>,
+    /// Toggle if the browser reacts to input events from this element.
+    #[prop(optional, into)]
+    inert: MaybeProp<bool>,
+    /// Hints to the browser of what type of virtual keyboard to display when editing this element
+    /// or its children.
+    #[prop(optional, into)]
+    inputmode: MaybeProp<String>,
+    /// Used to render a standard element as a custom element.
+    #[prop(optional, into)]
+    is: MaybeProp<String>,
+    /// Unique global identifier of an item.
+    #[prop(optional, into)]
+    itemid: MaybeProp<String>,
+    /// Used to add properties to an item.
+    #[prop(optional, into)]
+    itemprop: MaybeProp<String>,
+    /// Used to associate an item with a related non-parent element that's using `itemscope`.
+    #[prop(optional, into)]
+    itemref: MaybeProp<String>,
+    /// Used to declare that children elements are related to a particular item.
+    #[prop(optional, into)]
+    itemscope: MaybeProp<String>,
+    /// URL of data used to define `itemprops`.
+    #[prop(optional, into)]
+    itemtype: MaybeProp<String>,
+    /// Defines the language of an element.
+    #[prop(optional, into)]
+    lang: MaybeProp<String>,
+    /// Cryptographic "number used once".
+    #[prop(optional, into)]
+    nonce: MaybeProp<String>,
+    /// List of the part names of the element.
+    #[prop(optional, into)]
+    part: MaybeProp<String>,
+    /// Designate an element as a popover element.
+    #[prop(optional, into)]
+    popover: MaybeProp<String>,
+    /// Define the semantic meaning of content.
+    #[prop(optional, into)]
+    role: MaybeProp<String>,
+    /// Assigns a slot to an element.
+    #[prop(optional, into)]
+    slot: MaybeProp<String>,
+    /// Toggle spellcheck for this input.
+    ///
+    /// Accepted values: "default" | "true" | "false".
+    #[prop(optional, into)]
+    spellcheck: MaybeProp<String>,
+    /// Define CSS to be applied to the element.
+    #[prop(optional, into)]
+    style: MaybeProp<String>,
+    /// Controls how an element behaves when a user navigates using the tab key.
+    #[prop(optional, into)]
+    tabindex: MaybeProp<usize>,
+    /// Describes the content of the element to screen readers.
+    #[prop(optional, into)]
+    title: MaybeProp<String>,
+    /// Defines localization behavior for the element.
+    #[prop(optional, into)]
+    translate: MaybeProp<String>,
+) -> impl IntoView {
+    let menu_id = RwSignal::new(String::new());
+    let trigger_id = RwSignal::new(String::new());
+
+    let context = ContextMenuSubContext {
+        menu_id,
+        open,
+        trigger_id,
+    };
+
+    let global_attrs_1 = view! {
+        <{..}
+            accesskey=move || accesskey.get()
+            autocapitalize=move || autocapitalize.get()
+            autofocus=move || autofocus.get()
+            class=move || class.get()
+            contenteditable=move || contenteditable.get()
+            dir=move || dir.get()
+            draggable=move || draggable.get()
+            enterkeyhint=move || enterkeyhint.get()
+            exportparts=move || exportparts.get()
+            hidden=move || hidden.get()
+            id=move || id.get()
+            inert=move || inert.get()
+            inputmode=move || inputmode.get()
+            is=move || is.get()
+            itemid=move || itemid.get()
+        />
+    };
+
+    let global_attrs_2 = view! {
+        <{..}
+            itemprop=move || itemprop.get()
+            itemref=move || itemref.get()
+            itemscope=move || itemscope.get()
+            itemtype=move || itemtype.get()
+            lang=move || lang.get()
+            nonce=move || nonce.get()
+            part=move || part.get()
+            popover=move || popover.get()
+            role=move || role.get()
+            slot=move || slot.get()
+            spellcheck=move || spellcheck.get()
+            style=move || style.get()
+            tabindex=move || tabindex.get()
+            title=move || title.get()
+            translate=move || translate.get()
+        />
+    };
+
+    view! {
+        <div
+            on:mouseenter=move |_| { open.set(true) }
+            on:mouseleave=move |_| { open.set(false) }
+
+            {..global_attrs_1}
+            {..global_attrs_2}
+        >
+            <Provider value=context>{children()}</Provider>
+        </div>
+    }
+}
diff --git a/singlestage/src/components/context_menu/sub/trigger.rs b/singlestage/src/components/context_menu/sub/trigger.rs
new file mode 100644
index 00000000..ec45af06
--- /dev/null
+++ b/singlestage/src/components/context_menu/sub/trigger.rs
@@ -0,0 +1,228 @@
+use crate::ContextMenuSubContext;
+use leptos::prelude::*;
+
+/// Defines the area where a sub menu can be triggered.
+#[component]
+pub fn ContextMenuSubTrigger(
+    children: Children,
+
+    /// Controls whether the item appears disabled and is clickable.
+    #[prop(optional, into)]
+    disabled: MaybeProp<bool>,
+    /// Set whether or not this element should display inset from its normal position.
+    #[prop(optional, into)]
+    inset: MaybeProp<bool>,
+    /// Set the display variant of the item.
+    ///
+    /// Accepted values: "destructive"
+    #[prop(optional, into)]
+    variant: MaybeProp<String>,
+
+    // LI ATTRIBRUTES
+    //
+    /// The current ordinal value of the item.
+    #[prop(optional, into)]
+    value: MaybeProp<String>,
+
+    // GLOBAL ATTRIBUTES
+    //
+    /// A space separated list of keys to focus this element. The first key available on the user's
+    /// keyboard layout is used.
+    #[prop(optional, into)]
+    accesskey: MaybeProp<String>,
+    /// Sets whether the input value should be capitalized and how. If a parent `<form>` has
+    /// `autocapitalize` rules set, it will override any rules set here.
+    ///
+    /// Accepted values: "none" or "off" | "sentences" or "on" | "words" | "characters".
+    #[prop(optional, into)]
+    autocapitalize: MaybeProp<String>,
+    /// Grabs focus once the page has finished loading. Only one element on the page can be focused
+    /// at a time.
+    #[prop(optional, into)]
+    autofocus: MaybeProp<bool>,
+    /// Apply classes to the element.
+    #[prop(optional, into)]
+    class: MaybeProp<String>,
+    /// Allows client-side editing of the element by the user.
+    ///
+    /// Accepted values: "true" | "false" | "plaintext-only"
+    #[prop(optional, into)]
+    contenteditable: MaybeProp<String>,
+    /// Indicate directionality of the element's text.
+    ///
+    /// Accepted values: "ltr" | "rtl" | "auto"
+    #[prop(optional, into)]
+    dir: MaybeProp<String>,
+    /// Toggle whether the element can be dragged.
+    #[prop(optional, into)]
+    draggable: MaybeProp<bool>,
+    /// Modifies the appearance of the enter key on virtual keyboards.
+    #[prop(optional, into)]
+    enterkeyhint: MaybeProp<String>,
+    /// Expose elements in the shadow DOM to be manipulated by the DOM.
+    #[prop(optional, into)]
+    exportparts: MaybeProp<String>,
+    /// Controls hidden status of the element.
+    #[prop(optional, into)]
+    hidden: MaybeProp<String>,
+    /// Set the id of this element.
+    #[prop(optional, into)]
+    id: MaybeProp<String>,
+    /// Toggle if the browser reacts to input events from this element.
+    #[prop(optional, into)]
+    inert: MaybeProp<bool>,
+    /// Hints to the browser of what type of virtual keyboard to display when editing this element
+    /// or its children.
+    #[prop(optional, into)]
+    inputmode: MaybeProp<String>,
+    /// Used to render a standard element as a custom element.
+    #[prop(optional, into)]
+    is: MaybeProp<String>,
+    /// Unique global identifier of an item.
+    #[prop(optional, into)]
+    itemid: MaybeProp<String>,
+    /// Used to add properties to an item.
+    #[prop(optional, into)]
+    itemprop: MaybeProp<String>,
+    /// Used to associate an item with a related non-parent element that's using `itemscope`.
+    #[prop(optional, into)]
+    itemref: MaybeProp<String>,
+    /// Used to declare that children elements are related to a particular item.
+    #[prop(optional, into)]
+    itemscope: MaybeProp<String>,
+    /// URL of data used to define `itemprops`.
+    #[prop(optional, into)]
+    itemtype: MaybeProp<String>,
+    /// Defines the language of an element.
+    #[prop(optional, into)]
+    lang: MaybeProp<String>,
+    /// Cryptographic "number used once".
+    #[prop(optional, into)]
+    nonce: MaybeProp<String>,
+    /// List of the part names of the element.
+    #[prop(optional, into)]
+    part: MaybeProp<String>,
+    /// Designate an element as a popover element.
+    #[prop(optional, into)]
+    popover: MaybeProp<String>,
+    /// Assigns a slot to an element.
+    #[prop(optional, into)]
+    slot: MaybeProp<String>,
+    /// Toggle spellcheck for this input.
+    ///
+    /// Accepted values: "default" | "true" | "false".
+    #[prop(optional, into)]
+    spellcheck: MaybeProp<String>,
+    /// Define CSS to be applied to the element.
+    #[prop(optional, into)]
+    style: MaybeProp<String>,
+    /// Controls how an element behaves when a user navigates using the tab key.
+    #[prop(optional, into)]
+    tabindex: MaybeProp<usize>,
+    /// Describes the content of the element to screen readers.
+    #[prop(optional, into)]
+    title: MaybeProp<String>,
+    /// Defines localization behavior for the element.
+    #[prop(optional, into)]
+    translate: MaybeProp<String>,
+) -> impl IntoView {
+    let sub = expect_context::<ContextMenuSubContext>();
+
+    let global_attrs_1 = view! {
+        <{..}
+            accesskey=move || accesskey.get()
+            autocapitalize=move || autocapitalize.get()
+            autofocus=move || autofocus.get()
+            contenteditable=move || contenteditable.get()
+            dir=move || dir.get()
+            draggable=move || draggable.get()
+            enterkeyhint=move || enterkeyhint.get()
+            exportparts=move || exportparts.get()
+            hidden=move || hidden.get()
+            inert=move || inert.get()
+            inputmode=move || inputmode.get()
+            is=move || is.get()
+            itemid=move || itemid.get()
+        />
+    };
+
+    let global_attrs_2 = view! {
+        <{..}
+            itemprop=move || itemprop.get()
+            itemref=move || itemref.get()
+            itemscope=move || itemscope.get()
+            itemtype=move || itemtype.get()
+            lang=move || lang.get()
+            nonce=move || nonce.get()
+            part=move || part.get()
+            popover=move || popover.get()
+            slot=move || slot.get()
+            spellcheck=move || spellcheck.get()
+            style=move || style.get()
+            tabindex=move || tabindex.get()
+            title=move || title.get()
+            translate=move || translate.get()
+        />
+    };
+
+    view! {
+        <li
+            class=move || {
+                format!(
+                    "singlestage-dropdown-menu-item{}{}{} {}",
+                    if disabled.get().unwrap_or_default() {
+                        " singlestage-dropdown-menu-item-disabled"
+                    } else {
+                        ""
+                    },
+                    if inset.get().unwrap_or_default() {
+                        " singlestage-dropdown-menu-inset"
+                    } else {
+                        ""
+                    },
+                    match variant.get().unwrap_or_default().as_str() {
+                        "destructive" => " singlestage-dropdown-menu-item-destructive",
+                        _ => "",
+                    },
+                    class.get().unwrap_or_default(),
+                )
+            }
+            role="menuitem"
+            value=move || value.get()
+
+            {..global_attrs_1}
+            {..global_attrs_2}
+        >
+            <button
+                aria_controls=move || sub.menu_id.get()
+                aria_haspopup="menu"
+                id={
+                    let trigger_id = id.get().unwrap_or(uuid::Uuid::new_v4().to_string());
+                    sub.trigger_id.set(trigger_id.clone());
+                    trigger_id
+                }
+                popovertarget=move || sub.menu_id.get()
+                popovertargetaction="toggle"
+                style:anchor-name=move || format!("--{}", sub.trigger_id.get())
+                type="button"
+            >
+
+                {children()}
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="24"
+                    height="24"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    class="ml-auto"
+                >
+                    <path d="m9 18 6-6-6-6" />
+                </svg>
+            </button>
+        </li>
+    }
+}
diff --git a/singlestage/src/components/context_menu/trigger.rs b/singlestage/src/components/context_menu/trigger.rs
index efcdb819..19cb43fc 100644
--- a/singlestage/src/components/context_menu/trigger.rs
+++ b/singlestage/src/components/context_menu/trigger.rs
@@ -151,24 +151,17 @@ pub fn ContextMenuTrigger(
                 ev.prevent_default();
                 menu.x.set(ev.x());
                 menu.y.set(ev.y());
-                if let Some(menu) = menu.menu_ref.get_untracked()
-                    && let Some(menu) = menu.get_untracked() {
-                        let _ = menu.show_popover();
-                    }
+                menu.open.set(true);
             }
             on:mousedown=move |_ev| {
-                if let Some(menu) = menu.menu_ref.get_untracked()
-                    && let Some(menu) = menu.get_untracked() {
-                        let _ = menu.hide_popover();
-                    }
+                menu.open.set(false);
             }
             on:mouseup=move |ev| {
-                if ev.button() == 2
-                    && let Some(menu) = menu.menu_ref.get_untracked()
-                        && let Some(menu) = menu.get_untracked() {
-                            let _ = menu.show_popover();
-                        }
+                if ev.button() == 2 {
+                    menu.open.set(true);
+                }
             }
+
             {..global_attrs_1}
             {..global_attrs_2}
         >
diff --git a/singlestage/src/components/dialog/close.rs b/singlestage/src/components/dialog/close.rs
index 5de37110..bcddd54f 100644
--- a/singlestage/src/components/dialog/close.rs
+++ b/singlestage/src/components/dialog/close.rs
@@ -1,3 +1,4 @@
+use crate::Reactive;
 use leptos::prelude::*;
 
 /// An optional button that renders in the top-right corner and closes the dialog when clicked.
@@ -21,7 +22,7 @@ pub fn DialogClose(
     commandfor: MaybeProp<String>,
     /// Toggle whether or not the input is disabled.
     #[prop(optional, into)]
-    disabled: MaybeProp<bool>,
+    disabled: Reactive<bool>,
     /// Associate this element with a form element that may not be its parent by its `id`.
     #[prop(optional, into)]
     form: MaybeProp<String>,
diff --git a/singlestage/src/components/dropdown/checkbox.rs b/singlestage/src/components/dropdown/checkbox.rs
new file mode 100644
index 00000000..15060a13
--- /dev/null
+++ b/singlestage/src/components/dropdown/checkbox.rs
@@ -0,0 +1,212 @@
+use crate::{Checkbox, ContextMenuContext, DropdownMenuContext, Reactive};
+use leptos::prelude::*;
+
+/// Contains a menu item.
+#[component]
+pub fn CheckboxItem(
+    children: Children,
+
+    #[prop(optional, into)] checked: Reactive<bool>,
+
+    /// Controls whether the item appears disabled and is clickable.
+    #[prop(optional, into)]
+    disabled: Reactive<bool>,
+    /// Toggle whether clicking this item dismisses its parent menu
+    #[prop(optional, into, default = Reactive::new(true))]
+    dismiss: Reactive<bool>,
+    /// Set whether or not this element should display inset from its normal position.
+    #[prop(optional, into)]
+    inset: MaybeProp<bool>,
+    /// Set the display variant of the item.
+    ///
+    /// Accepted values: "destructive"
+    #[prop(optional, into)]
+    variant: MaybeProp<String>,
+
+    // LI ATTRIBRUTES
+    //
+    /// The current ordinal value of the item.
+    #[prop(optional, into)]
+    value: MaybeProp<String>,
+
+    // GLOBAL ATTRIBUTES
+    //
+    /// A space separated list of keys to focus this element. The first key available on the user's
+    /// keyboard layout is used.
+    #[prop(optional, into)]
+    accesskey: MaybeProp<String>,
+    /// Sets whether the input value should be capitalized and how. If a parent `<form>` has
+    /// `autocapitalize` rules set, it will override any rules set here.
+    ///
+    /// Accepted values: "none" or "off" | "sentences" or "on" | "words" | "characters".
+    #[prop(optional, into)]
+    autocapitalize: MaybeProp<String>,
+    /// Grabs focus once the page has finished loading. Only one element on the page can be focused
+    /// at a time.
+    #[prop(optional, into)]
+    autofocus: MaybeProp<bool>,
+    /// Apply classes to the element.
+    #[prop(optional, into)]
+    class: MaybeProp<String>,
+    /// Allows client-side editing of the element by the user.
+    ///
+    /// Accepted values: "true" | "false" | "plaintext-only"
+    #[prop(optional, into)]
+    contenteditable: MaybeProp<String>,
+    /// Indicate directionality of the element's text.
+    ///
+    /// Accepted values: "ltr" | "rtl" | "auto"
+    #[prop(optional, into)]
+    dir: MaybeProp<String>,
+    /// Toggle whether the element can be dragged.
+    #[prop(optional, into)]
+    draggable: MaybeProp<bool>,
+    /// Modifies the appearance of the enter key on virtual keyboards.
+    #[prop(optional, into)]
+    enterkeyhint: MaybeProp<String>,
+    /// Expose elements in the shadow DOM to be manipulated by the DOM.
+    #[prop(optional, into)]
+    exportparts: MaybeProp<String>,
+    /// Controls hidden status of the element.
+    #[prop(optional, into)]
+    hidden: MaybeProp<String>,
+    /// Set the id of this element.
+    #[prop(optional, into)]
+    id: MaybeProp<String>,
+    /// Toggle if the browser reacts to input events from this element.
+    #[prop(optional, into)]
+    inert: MaybeProp<bool>,
+    /// Hints to the browser of what type of virtual keyboard to display when editing this element
+    /// or its children.
+    #[prop(optional, into)]
+    inputmode: MaybeProp<String>,
+    /// Used to render a standard element as a custom element.
+    #[prop(optional, into)]
+    is: MaybeProp<String>,
+    /// Unique global identifier of an item.
+    #[prop(optional, into)]
+    itemid: MaybeProp<String>,
+    /// Used to add properties to an item.
+    #[prop(optional, into)]
+    itemprop: MaybeProp<String>,
+    /// Used to associate an item with a related non-parent element that's using `itemscope`.
+    #[prop(optional, into)]
+    itemref: MaybeProp<String>,
+    /// Used to declare that children elements are related to a particular item.
+    #[prop(optional, into)]
+    itemscope: MaybeProp<String>,
+    /// URL of data used to define `itemprops`.
+    #[prop(optional, into)]
+    itemtype: MaybeProp<String>,
+    /// Defines the language of an element.
+    #[prop(optional, into)]
+    lang: MaybeProp<String>,
+    /// Cryptographic "number used once".
+    #[prop(optional, into)]
+    nonce: MaybeProp<String>,
+    /// List of the part names of the element.
+    #[prop(optional, into)]
+    part: MaybeProp<String>,
+    /// Designate an element as a popover element.
+    #[prop(optional, into)]
+    popover: MaybeProp<String>,
+    /// Assigns a slot to an element.
+    #[prop(optional, into)]
+    slot: MaybeProp<String>,
+    /// Toggle spellcheck for this input.
+    ///
+    /// Accepted values: "default" | "true" | "false".
+    #[prop(optional, into)]
+    spellcheck: MaybeProp<String>,
+    /// Define CSS to be applied to the element.
+    #[prop(optional, into)]
+    style: MaybeProp<String>,
+    /// Controls how an element behaves when a user navigates using the tab key.
+    #[prop(optional, into)]
+    tabindex: MaybeProp<usize>,
+    /// Describes the content of the element to screen readers.
+    #[prop(optional, into)]
+    title: MaybeProp<String>,
+    /// Defines localization behavior for the element.
+    #[prop(optional, into)]
+    translate: MaybeProp<String>,
+) -> impl IntoView {
+    let global_attrs_1 = view! {
+        <{..}
+            accesskey=move || accesskey.get()
+            autocapitalize=move || autocapitalize.get()
+            autofocus=move || autofocus.get()
+            contenteditable=move || contenteditable.get()
+            dir=move || dir.get()
+            draggable=move || draggable.get()
+            enterkeyhint=move || enterkeyhint.get()
+            exportparts=move || exportparts.get()
+            hidden=move || hidden.get()
+            id=move || id.get()
+            inert=move || inert.get()
+            inputmode=move || inputmode.get()
+            is=move || is.get()
+            itemid=move || itemid.get()
+        />
+    };
+
+    let global_attrs_2 = view! {
+        <{..}
+            itemprop=move || itemprop.get()
+            itemref=move || itemref.get()
+            itemscope=move || itemscope.get()
+            itemtype=move || itemtype.get()
+            lang=move || lang.get()
+            nonce=move || nonce.get()
+            part=move || part.get()
+            popover=move || popover.get()
+            slot=move || slot.get()
+            spellcheck=move || spellcheck.get()
+            style=move || style.get()
+            tabindex=move || tabindex.get()
+            title=move || title.get()
+            translate=move || translate.get()
+        />
+    };
+
+    view! {
+        <li
+            class=move || {
+                format!(
+                    "singlestage-dropdown-menu-item{}{}{} {}",
+                    if disabled.get() { " singlestage-dropdown-menu-item-disabled" } else { "" },
+                    if inset.get().unwrap_or_default() {
+                        " singlestage-dropdown-menu-inset"
+                    } else {
+                        ""
+                    },
+                    match variant.get().unwrap_or_default().as_str() {
+                        "destructive" => " singlestage-dropdown-menu-item-destructive",
+                        _ => "",
+                    },
+                    class.get().unwrap_or_default(),
+                )
+            }
+            on:click=move |_| {
+                if dismiss.get() {
+                    if let Some(menu) = use_context::<DropdownMenuContext>() {
+                        if menu.dismissable.get() {
+                            menu.open.set(false);
+                        }
+                    } else if let Some(menu) = use_context::<ContextMenuContext>() {
+                        menu.open.set(false);
+                    }
+                }
+            }
+            role="menuitem"
+            value=move || value.get()
+
+            {..global_attrs_1}
+            {..global_attrs_2}
+        >
+            <label>
+                {children()} <Checkbox class="singlestage-checkbox-item" checked disabled />
+            </label>
+        </li>
+    }
+}
diff --git a/singlestage/src/components/dropdown/content.rs b/singlestage/src/components/dropdown/content.rs
index 47dd9051..6029bf9a 100644
--- a/singlestage/src/components/dropdown/content.rs
+++ b/singlestage/src/components/dropdown/content.rs
@@ -6,6 +6,19 @@ use leptos::prelude::*;
 pub fn DropdownMenuContent(
     children: Children,
 
+    /// Set how to align the popover
+    ///
+    /// Accepted values: "start" | "center" | "end"
+    /// Default is "start"
+    #[prop(optional, into)]
+    align: MaybeProp<String>,
+    /// Set which side the popover opens relative to the trigger
+    ///
+    /// Accepted values: "top" | "right" | "bottom" | "left"
+    /// Default is "bottom"
+    #[prop(optional, into)]
+    side: MaybeProp<String>,
+
     // GLOBAL ATTRIBUTES
     //
     /// A space separated list of keys to focus this element. The first key available on the user's
@@ -106,6 +119,13 @@ pub fn DropdownMenuContent(
     translate: MaybeProp<String>,
 ) -> impl IntoView {
     let menu = expect_context::<DropdownMenuContext>();
+    let menu_ref = NodeRef::<leptos::html::Menu>::new();
+
+    Effect::new(move || {
+        if let Some(popover) = menu_ref.get_untracked() {
+            let _ = popover.toggle_popover_with_force(menu.open.get());
+        }
+    });
 
     let global_attrs_1 = view! {
         <{..}
@@ -146,14 +166,30 @@ pub fn DropdownMenuContent(
     view! {
         <menu
             class=move || {
-                format!("singlestage-dropdown-menu {}", class.get().unwrap_or_default())
+                format!(
+                    "singlestage-dropdown-menu-content singlestage-popover singlestage-popover-animations {} {} {}",
+                    match side.get().unwrap_or_default().as_str() {
+                        "top" => "singlestage-popover-top",
+                        "right" => "singlestage-popover-right",
+                        "left" => "singlestage-popover-left",
+                        _ => "singlestage-popover-bottom",
+                    },
+                    match align.get().unwrap_or_default().as_str() {
+                        "center" => "singlestage-popover-center",
+                        "end" => "singlestage-popover-end",
+                        _ => "singlestage-popover-start",
+                    },
+                    class.get().unwrap_or_default(),
+                )
             }
+            node_ref=menu_ref
             id={
                 let menu_id = id.get().unwrap_or(uuid::Uuid::new_v4().to_string());
                 menu.menu_id.set(menu_id.clone());
                 menu_id
             }
-            popover="auto"
+            popover=move || if menu.dismissable.get() { "auto" } else { "manual" }
+            style:position-anchor=move || { format!("--{}", menu.trigger_id.get()) }
             role="menu"
 
             {..global_attrs_1}
diff --git a/singlestage/src/components/dropdown/dropdown.css b/singlestage/src/components/dropdown/dropdown.css
index 25f6895e..2afb3ffe 100644
--- a/singlestage/src/components/dropdown/dropdown.css
+++ b/singlestage/src/components/dropdown/dropdown.css
@@ -1,75 +1,52 @@
 @layer components {
-  /* Hacks to render properly until anchor support
-      https://developer.mozilla.org/en-US/docs/Web/CSS/anchor#browser_compatibility
-    */
-  /* Webkit -- HAS TO BE FIRST */
-  @media screen and (-webkit-min-device-pixel-ratio: 0) {
-    .singlestage-dropdown-menu {
-      @apply relative
-      bg-transparent;
-      position-area: bottom span-right;
-      inset: unset;
-    }
-  }
+  .singlestage-checkbox-item,
+  .singlestage-radio-item {
+    @apply appearance-none
+    outline-none
+    shrink-0
+    size-4
+    transition-shadow;
 
-  /* Firefox */
-  @-moz-document url-prefix() {
-    .singlestage-dropdown-menu {
-      @apply relative
-      bg-transparent;
-      inset: unset;
+    &:checked:after {
+      @apply bg-accent-foreground
+      block
+      content-['']
+      mask-[image:var(--check-icon)]
+      mask-center
+      mask-no-repeat
+      mask-size-[calc(4*var(--spacing))]
+      size-4;
     }
   }
-  /* End hacks */
 
-  .singlestage-dropdown-menu {
-    @apply bg-popover
-    border
-    min-w-[8rem]
-    overflow-x-hidden
-    overflow-y-auto
-    p-1
-    rounded-md
-    shadow-md
-    text-nowrap
-    text-popover-foreground
-    z-50;
+  .singlestage-dropdown-menu-content {
+    @apply min-w-32
+    p-1;
+  }
 
-    .singlestage-radio-group {
-      @appply block
-      gap-0;
-    }
+  .singlestage-dropdown-menu-inset {
+    @apply !pl-8;
   }
 
   .singlestage-dropdown-menu-item {
+    > label,
     > button {
-      @apply [&_svg:not([class*='size-'])]:size-4
-      [&_svg:not([class*='text-'])]:text-muted-foreground
-      [&_svg]:pointer-events-none
-      [&_svg]:shrink-0
-      content-center
+      @apply content-center
       cursor-default
-      data-[disabled]:opacity-50
-      data-[disabled]:pointer-events-none
-      data-[inset]:pl-8
-      data-[variant=destructive]:*:[svg]:!text-destructive
-      data-[variant=destructive]:focus:bg-destructive/10
-      data-[variant=destructive]:focus:text-destructive
-      data-[variant=destructive]:text-destructive
       focus:bg-accent
       focus:text-accent-foreground
       flex
-      gap-2
+      gap-1.5
       h-full
       hover:bg-accent
       hover:text-accent-foreground
       items-center
       outline-hidden
-      px-2
-      py-1.5
-      relative
-      rounded-sm
+      px-1.5
+      py-1
+      rounded-md
       select-none
+      text-nowrap
       text-sm
       w-full;
     }
@@ -78,14 +55,49 @@
       @apply h-full
       w-full;
     }
+
+    svg {
+      @apply pointer-events-none
+        shrink-0;
+
+      &:not([class*="size-"]) {
+        @apply size-4;
+      }
+    }
+
+    .singlestage-checkbox,
+    .singlestage-radio {
+      @apply ml-auto;
+    }
+  }
+
+  .singlestage-dropdown-menu-item-destructive {
+    > button {
+      @apply !text-destructive
+      focus:!bg-destructive/10
+      focus:!text-destructive
+      hover:!bg-destructive/10
+      hover:!text-destructive;
+    }
+
+    svg {
+      @apply !text-destructive;
+    }
+  }
+
+  .singlestage-dropdown-menu-item-disabled {
+    * {
+      @apply opacity-50
+      pointer-events-none;
+    }
   }
 
   .singlestage-dropdown-menu-label {
-    @apply data-[inset]:pl-8
-    font-medium
-    px-2
-    py-1.5
-    text-sm;
+    @apply font-medium
+    px-1.5
+    py-1
+    text-muted-foreground
+    text-xs;
   }
 
   .singlestage-dropdown-menu-separator {
@@ -102,20 +114,6 @@
     tracking-widest;
   }
 
-  .singlestage-dropdown-menu-sub-trigger {
-    @apply cursor-default
-    flex
-    focus:bg-accent
-    focus:text-accent-foreground
-    items-center
-    outline-hidden
-    px-2
-    py-1.5
-    rounded-sm
-    select-none
-    text-sm;
-  }
-
   .singlestage-dropdown-menu-sub-content {
     @apply bg-popover
     border
diff --git a/singlestage/src/components/dropdown/group.rs b/singlestage/src/components/dropdown/group.rs
index 83bd8827..dea07e4e 100644
--- a/singlestage/src/components/dropdown/group.rs
+++ b/singlestage/src/components/dropdown/group.rs
@@ -152,7 +152,7 @@ pub fn DropdownMenuGroup(
 
     view! {
         <div
-            aria-labelledby=move || heading_id.get()
+            aria_labelledby=move || heading_id.get()
             class=move || {
                 format!("singlestage-dropdown-menu-group {}", class.get().unwrap_or_default())
             }
diff --git a/singlestage/src/components/dropdown/item.rs b/singlestage/src/components/dropdown/item.rs
index de47dc9d..64c606cc 100644
--- a/singlestage/src/components/dropdown/item.rs
+++ b/singlestage/src/components/dropdown/item.rs
@@ -1,4 +1,4 @@
-use crate::DropdownMenuContext;
+use crate::{DropdownMenuContext, Reactive};
 use leptos::prelude::*;
 
 /// Contains a menu item.
@@ -8,7 +8,13 @@ pub fn DropdownMenuItem(
 
     /// Controls whether the item appears disabled and is clickable.
     #[prop(optional, into)]
-    disabled: MaybeProp<bool>,
+    disabled: Reactive<bool>,
+    /// Toggle whether clicking this item dismisses its parent menu
+    #[prop(optional, into, default = Reactive::new(true))]
+    dismiss: Reactive<bool>,
+    /// Set whether or not this element should display inset from its normal position.
+    #[prop(optional, into)]
+    inset: MaybeProp<bool>,
     /// Set the display variant of the item.
     ///
     /// Accepted values: "destructive"
@@ -166,7 +172,20 @@ pub fn DropdownMenuItem(
     view! {
         <li
             class=move || {
-                format!("singlestage-dropdown-menu-item {}", class.get().unwrap_or_default())
+                format!(
+                    "singlestage-dropdown-menu-item{}{}{} {}",
+                    if disabled.get() { " singlestage-dropdown-menu-item-disabled" } else { "" },
+                    if inset.get().unwrap_or_default() {
+                        " singlestage-dropdown-menu-inset"
+                    } else {
+                        ""
+                    },
+                    match variant.get().unwrap_or_default().as_str() {
+                        "destructive" => " singlestage-dropdown-menu-item-destructive",
+                        _ => "",
+                    },
+                    class.get().unwrap_or_default(),
+                )
             }
             role="menuitem"
             value=move || value.get()
@@ -175,12 +194,16 @@ pub fn DropdownMenuItem(
             {..global_attrs_2}
         >
             <button
-                aria-controls=move || menu.menu_id.get()
-                aria-haspopup="menu"
-                data-disabled=move || disabled.get().unwrap_or_default()
-                data-variant=move || variant.get().unwrap_or_default()
-                popovertarget=move || menu.menu_id.get()
-                popovertargetaction="toggle"
+                aria_controls=move || if dismiss.get() { Some(menu.menu_id.get()) } else { None }
+                aria_haspopup=move || if dismiss.get() { Some("menu") } else { None }
+                on:click=move |ev| {
+                    if !menu.dismissable.get() && dismiss.get() {
+                        ev.prevent_default();
+                        menu.open.set(false);
+                    }
+                }
+                popovertarget=move || if dismiss.get() { Some(menu.menu_id.get()) } else { None }
+                popovertargetaction=move || if dismiss.get() { Some("toggle") } else { None }
                 type="button"
             >
                 {children()}
diff --git a/singlestage/src/components/dropdown/label.rs b/singlestage/src/components/dropdown/label.rs
index 8fbca94b..a012ad9e 100644
--- a/singlestage/src/components/dropdown/label.rs
+++ b/singlestage/src/components/dropdown/label.rs
@@ -6,6 +6,10 @@ use leptos::prelude::*;
 pub fn DropdownMenuLabel(
     children: Children,
 
+    /// Set whether or not this element should display inset from its normal position.
+    #[prop(optional, into)]
+    inset: MaybeProp<bool>,
+
     // GLOBAL ATTRIBUTES
     //
     /// A space separated list of keys to focus this element. The first key available on the user's
@@ -151,7 +155,15 @@ pub fn DropdownMenuLabel(
         <h6
             id=uuid
             class=move || {
-                format!("singlestage-dropdown-menu-label {}", class.get().unwrap_or_default())
+                format!(
+                    "singlestage-dropdown-menu-label{} {}",
+                    if inset.get().unwrap_or_default() {
+                        " singlestage-dropdown-menu-inset"
+                    } else {
+                        ""
+                    },
+                    class.get().unwrap_or_default(),
+                )
             }
 
             {..global_attrs_1}
diff --git a/singlestage/src/components/dropdown/menu.rs b/singlestage/src/components/dropdown/menu.rs
index 9637a81a..815480b3 100644
--- a/singlestage/src/components/dropdown/menu.rs
+++ b/singlestage/src/components/dropdown/menu.rs
@@ -1,4 +1,4 @@
-use crate::DropdownMenuContext;
+use crate::{DropdownMenuContext, Reactive};
 use leptos::{context::Provider, prelude::*};
 
 /// Contains all the parts of a dropdown menu.
@@ -6,6 +6,15 @@ use leptos::{context::Provider, prelude::*};
 pub fn DropdownMenu(
     children: Children,
 
+    /// Set whether or not this popover can be light dismissed. Use this with the `open` signal for
+    /// a manually managed popover
+    #[prop(optional, into, default = Reactive::new(true))]
+    dismissable: Reactive<bool>,
+    /// Reactive signal that can remotely control the open state of the popover **but is not
+    /// coupled to the actual open state of the popover**
+    #[prop(optional, into)]
+    open: Reactive<bool>,
+
     // GLOBAL ATTRIBUTES
     //
     /// A space separated list of keys to focus this element. The first key available on the user's
@@ -115,7 +124,9 @@ pub fn DropdownMenu(
     let trigger_id = RwSignal::new(String::new());
 
     let context = DropdownMenuContext {
+        dismissable,
         menu_id,
+        open,
         trigger_id,
     };
 
diff --git a/singlestage/src/components/dropdown/mod.rs b/singlestage/src/components/dropdown/mod.rs
index e419ae7a..fa19e54b 100644
--- a/singlestage/src/components/dropdown/mod.rs
+++ b/singlestage/src/components/dropdown/mod.rs
@@ -1,26 +1,35 @@
+mod checkbox;
 mod content;
 mod group;
 mod item;
 mod label;
 mod menu;
+mod radio;
 mod separator;
 mod shortcut;
+mod sub;
 mod trigger;
 
+pub use checkbox::*;
 pub use content::*;
 pub use group::*;
 pub use item::*;
 pub use label::*;
 pub use menu::*;
+pub use radio::*;
 pub use separator::*;
 pub use shortcut::*;
+pub use sub::*;
 pub use trigger::*;
 
+use crate::Reactive;
 use leptos::prelude::*;
 
 #[derive(Clone)]
 pub struct DropdownMenuContext {
+    pub dismissable: Reactive<bool>,
     pub menu_id: RwSignal<String>,
+    pub open: Reactive<bool>,
     pub trigger_id: RwSignal<String>,
 }
 
diff --git a/singlestage/src/components/dropdown/radio.rs b/singlestage/src/components/dropdown/radio.rs
new file mode 100644
index 00000000..81e75707
--- /dev/null
+++ b/singlestage/src/components/dropdown/radio.rs
@@ -0,0 +1,212 @@
+use crate::{ContextMenuContext, DropdownMenuContext, Radio, Reactive};
+use leptos::prelude::*;
+
+/// Contains a menu item.
+#[component]
+pub fn RadioItem(
+    children: Children,
+
+    #[prop(optional, into)] checked: Reactive<bool>,
+
+    /// Controls whether the item appears disabled and is clickable.
+    #[prop(optional, into)]
+    disabled: Reactive<bool>,
+    /// Toggle whether clicking this item dismisses its parent menu
+    #[prop(optional, into, default = Reactive::new(true))]
+    dismiss: Reactive<bool>,
+    /// Set whether or not this element should display inset from its normal position.
+    #[prop(optional, into)]
+    inset: MaybeProp<bool>,
+    /// Set the display variant of the item.
+    ///
+    /// Accepted values: "destructive"
+    #[prop(optional, into)]
+    variant: MaybeProp<String>,
+
+    // LI ATTRIBRUTES
+    //
+    /// The current ordinal value of the item.
+    #[prop(optional, into)]
+    value: MaybeProp<String>,
+
+    // GLOBAL ATTRIBUTES
+    //
+    /// A space separated list of keys to focus this element. The first key available on the user's
+    /// keyboard layout is used.
+    #[prop(optional, into)]
+    accesskey: MaybeProp<String>,
+    /// Sets whether the input value should be capitalized and how. If a parent `<form>` has
+    /// `autocapitalize` rules set, it will override any rules set here.
+    ///
+    /// Accepted values: "none" or "off" | "sentences" or "on" | "words" | "characters".
+    #[prop(optional, into)]
+    autocapitalize: MaybeProp<String>,
+    /// Grabs focus once the page has finished loading. Only one element on the page can be focused
+    /// at a time.
+    #[prop(optional, into)]
+    autofocus: MaybeProp<bool>,
+    /// Apply classes to the element.
+    #[prop(optional, into)]
+    class: MaybeProp<String>,
+    /// Allows client-side editing of the element by the user.
+    ///
+    /// Accepted values: "true" | "false" | "plaintext-only"
+    #[prop(optional, into)]
+    contenteditable: MaybeProp<String>,
+    /// Indicate directionality of the element's text.
+    ///
+    /// Accepted values: "ltr" | "rtl" | "auto"
+    #[prop(optional, into)]
+    dir: MaybeProp<String>,
+    /// Toggle whether the element can be dragged.
+    #[prop(optional, into)]
+    draggable: MaybeProp<bool>,
+    /// Modifies the appearance of the enter key on virtual keyboards.
+    #[prop(optional, into)]
+    enterkeyhint: MaybeProp<String>,
+    /// Expose elements in the shadow DOM to be manipulated by the DOM.
+    #[prop(optional, into)]
+    exportparts: MaybeProp<String>,
+    /// Controls hidden status of the element.
+    #[prop(optional, into)]
+    hidden: MaybeProp<String>,
+    /// Set the id of this element.
+    #[prop(optional, into)]
+    id: MaybeProp<String>,
+    /// Toggle if the browser reacts to input events from this element.
+    #[prop(optional, into)]
+    inert: MaybeProp<bool>,
+    /// Hints to the browser of what type of virtual keyboard to display when editing this element
+    /// or its children.
+    #[prop(optional, into)]
+    inputmode: MaybeProp<String>,
+    /// Used to render a standard element as a custom element.
+    #[prop(optional, into)]
+    is: MaybeProp<String>,
+    /// Unique global identifier of an item.
+    #[prop(optional, into)]
+    itemid: MaybeProp<String>,
+    /// Used to add properties to an item.
+    #[prop(optional, into)]
+    itemprop: MaybeProp<String>,
+    /// Used to associate an item with a related non-parent element that's using `itemscope`.
+    #[prop(optional, into)]
+    itemref: MaybeProp<String>,
+    /// Used to declare that children elements are related to a particular item.
+    #[prop(optional, into)]
+    itemscope: MaybeProp<String>,
+    /// URL of data used to define `itemprops`.
+    #[prop(optional, into)]
+    itemtype: MaybeProp<String>,
+    /// Defines the language of an element.
+    #[prop(optional, into)]
+    lang: MaybeProp<String>,
+    /// Cryptographic "number used once".
+    #[prop(optional, into)]
+    nonce: MaybeProp<String>,
+    /// List of the part names of the element.
+    #[prop(optional, into)]
+    part: MaybeProp<String>,
+    /// Designate an element as a popover element.
+    #[prop(optional, into)]
+    popover: MaybeProp<String>,
+    /// Assigns a slot to an element.
+    #[prop(optional, into)]
+    slot: MaybeProp<String>,
+    /// Toggle spellcheck for this input.
+    ///
+    /// Accepted values: "default" | "true" | "false".
+    #[prop(optional, into)]
+    spellcheck: MaybeProp<String>,
+    /// Define CSS to be applied to the element.
+    #[prop(optional, into)]
+    style: MaybeProp<String>,
+    /// Controls how an element behaves when a user navigates using the tab key.
+    #[prop(optional, into)]
+    tabindex: MaybeProp<usize>,
+    /// Describes the content of the element to screen readers.
+    #[prop(optional, into)]
+    title: MaybeProp<String>,
+    /// Defines localization behavior for the element.
+    #[prop(optional, into)]
+    translate: MaybeProp<String>,
+) -> impl IntoView {
+    let global_attrs_1 = view! {
+        <{..}
+            accesskey=move || accesskey.get()
+            autocapitalize=move || autocapitalize.get()
+            autofocus=move || autofocus.get()
+            contenteditable=move || contenteditable.get()
+            dir=move || dir.get()
+            draggable=move || draggable.get()
+            enterkeyhint=move || enterkeyhint.get()
+            exportparts=move || exportparts.get()
+            hidden=move || hidden.get()
+            id=move || id.get()
+            inert=move || inert.get()
+            inputmode=move || inputmode.get()
+            is=move || is.get()
+            itemid=move || itemid.get()
+        />
+    };
+
+    let global_attrs_2 = view! {
+        <{..}
+            itemprop=move || itemprop.get()
+            itemref=move || itemref.get()
+            itemscope=move || itemscope.get()
+            itemtype=move || itemtype.get()
+            lang=move || lang.get()
+            nonce=move || nonce.get()
+            part=move || part.get()
+            popover=move || popover.get()
+            slot=move || slot.get()
+            spellcheck=move || spellcheck.get()
+            style=move || style.get()
+            tabindex=move || tabindex.get()
+            title=move || title.get()
+            translate=move || translate.get()
+        />
+    };
+
+    view! {
+        <li
+            class=move || {
+                format!(
+                    "singlestage-dropdown-menu-item{}{}{} {}",
+                    if disabled.get() { " singlestage-dropdown-menu-item-disabled" } else { "" },
+                    if inset.get().unwrap_or_default() {
+                        " singlestage-dropdown-menu-inset"
+                    } else {
+                        ""
+                    },
+                    match variant.get().unwrap_or_default().as_str() {
+                        "destructive" => " singlestage-dropdown-menu-item-destructive",
+                        _ => "",
+                    },
+                    class.get().unwrap_or_default(),
+                )
+            }
+            on:click=move |_| {
+                if dismiss.get() {
+                    if let Some(menu) = use_context::<DropdownMenuContext>() {
+                        if menu.dismissable.get() {
+                            menu.open.set(false);
+                        }
+                    } else if let Some(menu) = use_context::<ContextMenuContext>() {
+                        menu.open.set(false);
+                    }
+                }
+            }
+            role="menuitem"
+            value=move || value.get()
+
+            {..global_attrs_1}
+            {..global_attrs_2}
+        >
+            <label>
+                {children()} <Radio class="singlestage-radio-item" checked disabled value />
+            </label>
+        </li>
+    }
+}
diff --git a/singlestage/src/components/dropdown/sub/content.rs b/singlestage/src/components/dropdown/sub/content.rs
new file mode 100644
index 00000000..fadadddc
--- /dev/null
+++ b/singlestage/src/components/dropdown/sub/content.rs
@@ -0,0 +1,177 @@
+use crate::DropdownMenuSubContext;
+use leptos::prelude::*;
+
+/// The component that pops out when the sub trigger is triggered.
+#[component]
+pub fn DropdownMenuSubContent(
+    children: Children,
+
+    // GLOBAL ATTRIBUTES
+    //
+    /// A space separated list of keys to focus this element. The first key available on the user's
+    /// keyboard layout is used.
+    #[prop(optional, into)]
+    accesskey: MaybeProp<String>,
+    /// Sets whether the input value should be capitalized and how. If a parent `<form>` has
+    /// `autocapitalize` rules set, it will override any rules set here.
+    ///
+    /// Accepted values: "none" or "off" | "sentences" or "on" | "words" | "characters".
+    #[prop(optional, into)]
+    autocapitalize: MaybeProp<String>,
+    /// Grabs focus once the page has finished loading. Only one element on the page can be focused
+    /// at a time.
+    #[prop(optional, into)]
+    autofocus: MaybeProp<bool>,
+    /// Apply classes to the element.
+    #[prop(optional, into)]
+    class: MaybeProp<String>,
+    /// Allows client-side editing of the element by the user.
+    ///
+    /// Accepted values: "true" | "false" | "plaintext-only"
+    #[prop(optional, into)]
+    contenteditable: MaybeProp<String>,
+    /// Indicate directionality of the element's text.
+    ///
+    /// Accepted values: "ltr" | "rtl" | "auto"
+    #[prop(optional, into)]
+    dir: MaybeProp<String>,
+    /// Toggle whether the element can be dragged.
+    #[prop(optional, into)]
+    draggable: MaybeProp<bool>,
+    /// Modifies the appearance of the enter key on virtual keyboards.
+    #[prop(optional, into)]
+    enterkeyhint: MaybeProp<String>,
+    /// Expose elements in the shadow DOM to be manipulated by the DOM.
+    #[prop(optional, into)]
+    exportparts: MaybeProp<String>,
+    /// Controls hidden status of the element.
+    #[prop(optional, into)]
+    hidden: MaybeProp<String>,
+    /// Set the id of this element.
+    #[prop(optional, into)]
+    id: MaybeProp<String>,
+    /// Toggle if the browser reacts to input events from this element.
+    #[prop(optional, into)]
+    inert: MaybeProp<bool>,
+    /// Hints to the browser of what type of virtual keyboard to display when editing this element
+    /// or its children.
+    #[prop(optional, into)]
+    inputmode: MaybeProp<String>,
+    /// Used to render a standard element as a custom element.
+    #[prop(optional, into)]
+    is: MaybeProp<String>,
+    /// Unique global identifier of an item.
+    #[prop(optional, into)]
+    itemid: MaybeProp<String>,
+    /// Used to add properties to an item.
+    #[prop(optional, into)]
+    itemprop: MaybeProp<String>,
+    /// Used to associate an item with a related non-parent element that's using `itemscope`.
+    #[prop(optional, into)]
+    itemref: MaybeProp<String>,
+    /// Used to declare that children elements are related to a particular item.
+    #[prop(optional, into)]
+    itemscope: MaybeProp<String>,
+    /// URL of data used to define `itemprops`.
+    #[prop(optional, into)]
+    itemtype: MaybeProp<String>,
+    /// Defines the language of an element.
+    #[prop(optional, into)]
+    lang: MaybeProp<String>,
+    /// Cryptographic "number used once".
+    #[prop(optional, into)]
+    nonce: MaybeProp<String>,
+    /// List of the part names of the element.
+    #[prop(optional, into)]
+    part: MaybeProp<String>,
+    /// Assigns a slot to an element.
+    #[prop(optional, into)]
+    slot: MaybeProp<String>,
+    /// Toggle spellcheck for this input.
+    ///
+    /// Accepted values: "default" | "true" | "false".
+    #[prop(optional, into)]
+    spellcheck: MaybeProp<String>,
+    /// Define CSS to be applied to the element.
+    #[prop(optional, into)]
+    style: MaybeProp<String>,
+    /// Controls how an element behaves when a user navigates using the tab key.
+    #[prop(optional, into)]
+    tabindex: MaybeProp<usize>,
+    /// Describes the content of the element to screen readers.
+    #[prop(optional, into)]
+    title: MaybeProp<String>,
+    /// Defines localization behavior for the element.
+    #[prop(optional, into)]
+    translate: MaybeProp<String>,
+) -> impl IntoView {
+    let sub = expect_context::<DropdownMenuSubContext>();
+    let menu_ref = NodeRef::<leptos::html::Menu>::new();
+
+    Effect::new(move || {
+        if let Some(popover) = menu_ref.get_untracked() {
+            let _ = popover.toggle_popover_with_force(sub.open.get());
+        }
+    });
+
+    let global_attrs_1 = view! {
+        <{..}
+            accesskey=move || accesskey.get()
+            autocapitalize=move || autocapitalize.get()
+            autofocus=move || autofocus.get()
+            contenteditable=move || contenteditable.get()
+            dir=move || dir.get()
+            draggable=move || draggable.get()
+            enterkeyhint=move || enterkeyhint.get()
+            exportparts=move || exportparts.get()
+            hidden=move || hidden.get()
+            inert=move || inert.get()
+            inputmode=move || inputmode.get()
+            is=move || is.get()
+            itemid=move || itemid.get()
+        />
+    };
+
+    let global_attrs_2 = view! {
+        <{..}
+            itemprop=move || itemprop.get()
+            itemref=move || itemref.get()
+            itemscope=move || itemscope.get()
+            itemtype=move || itemtype.get()
+            lang=move || lang.get()
+            nonce=move || nonce.get()
+            part=move || part.get()
+            slot=move || slot.get()
+            spellcheck=move || spellcheck.get()
+            style=move || style.get()
+            tabindex=move || tabindex.get()
+            title=move || title.get()
+            translate=move || translate.get()
+        />
+    };
+
+    view! {
+        <menu
+            class=move || {
+                format!(
+                    "singlestage-dropdown-menu-content singlestage-popover singlestage-popover-right singlestage-popover-animations {}",
+                    class.get().unwrap_or_default(),
+                )
+            }
+            id={
+                let menu_id = id.get().unwrap_or(uuid::Uuid::new_v4().to_string());
+                sub.menu_id.set(menu_id.clone());
+                menu_id
+            }
+            node_ref=menu_ref
+            style:position-anchor=move || { format!("--{}", sub.trigger_id.get()) }
+            popover="auto"
+            role="menu"
+
+            {..global_attrs_1}
+            {..global_attrs_2}
+        >
+            {children()}
+        </menu>
+    }
+}
diff --git a/singlestage/src/components/dropdown/sub/mod.rs b/singlestage/src/components/dropdown/sub/mod.rs
new file mode 100644
index 00000000..fde6b438
--- /dev/null
+++ b/singlestage/src/components/dropdown/sub/mod.rs
@@ -0,0 +1,192 @@
+mod content;
+mod trigger;
+
+pub use content::*;
+pub use trigger::*;
+
+use crate::Reactive;
+use leptos::{context::Provider, prelude::*};
+
+#[derive(Clone)]
+pub struct DropdownMenuSubContext {
+    pub menu_id: RwSignal<String>,
+    pub open: Reactive<bool>,
+    pub trigger_id: RwSignal<String>,
+}
+
+/// Contains all the parts of a sub menu.
+#[component]
+pub fn DropdownMenuSub(
+    children: Children,
+
+    /// Reactive signal that can remotely control the open state of the popover **but is not
+    /// coupled to the actual open state of the popover**
+    #[prop(optional, into)]
+    open: Reactive<bool>,
+
+    // GLOBAL ATTRIBUTES
+    //
+    /// A space separated list of keys to focus this element. The first key available on the user's
+    /// keyboard layout is used.
+    #[prop(optional, into)]
+    accesskey: MaybeProp<String>,
+    /// Sets whether the input value should be capitalized and how. If a parent `<form>` has
+    /// `autocapitalize` rules set, it will override any rules set here.
+    ///
+    /// Accepted values: "none" or "off" | "sentences" or "on" | "words" | "characters".
+    #[prop(optional, into)]
+    autocapitalize: MaybeProp<String>,
+    /// Grabs focus once the page has finished loading. Only one element on the page can be focused
+    /// at a time.
+    #[prop(optional, into)]
+    autofocus: MaybeProp<bool>,
+    /// Apply classes to the element.
+    #[prop(optional, into)]
+    class: MaybeProp<String>,
+    /// Allows client-side editing of the element by the user.
+    ///
+    /// Accepted values: "true" | "false" | "plaintext-only"
+    #[prop(optional, into)]
+    contenteditable: MaybeProp<String>,
+    /// Indicate directionality of the element's text.
+    ///
+    /// Accepted values: "ltr" | "rtl" | "auto"
+    #[prop(optional, into)]
+    dir: MaybeProp<String>,
+    /// Toggle whether the element can be dragged.
+    #[prop(optional, into)]
+    draggable: MaybeProp<bool>,
+    /// Modifies the appearance of the enter key on virtual keyboards.
+    #[prop(optional, into)]
+    enterkeyhint: MaybeProp<String>,
+    /// Expose elements in the shadow DOM to be manipulated by the DOM.
+    #[prop(optional, into)]
+    exportparts: MaybeProp<String>,
+    /// Controls hidden status of the element.
+    #[prop(optional, into)]
+    hidden: MaybeProp<String>,
+    /// Set the id of this element.
+    #[prop(optional, into)]
+    id: MaybeProp<String>,
+    /// Toggle if the browser reacts to input events from this element.
+    #[prop(optional, into)]
+    inert: MaybeProp<bool>,
+    /// Hints to the browser of what type of virtual keyboard to display when editing this element
+    /// or its children.
+    #[prop(optional, into)]
+    inputmode: MaybeProp<String>,
+    /// Used to render a standard element as a custom element.
+    #[prop(optional, into)]
+    is: MaybeProp<String>,
+    /// Unique global identifier of an item.
+    #[prop(optional, into)]
+    itemid: MaybeProp<String>,
+    /// Used to add properties to an item.
+    #[prop(optional, into)]
+    itemprop: MaybeProp<String>,
+    /// Used to associate an item with a related non-parent element that's using `itemscope`.
+    #[prop(optional, into)]
+    itemref: MaybeProp<String>,
+    /// Used to declare that children elements are related to a particular item.
+    #[prop(optional, into)]
+    itemscope: MaybeProp<String>,
+    /// URL of data used to define `itemprops`.
+    #[prop(optional, into)]
+    itemtype: MaybeProp<String>,
+    /// Defines the language of an element.
+    #[prop(optional, into)]
+    lang: MaybeProp<String>,
+    /// Cryptographic "number used once".
+    #[prop(optional, into)]
+    nonce: MaybeProp<String>,
+    /// List of the part names of the element.
+    #[prop(optional, into)]
+    part: MaybeProp<String>,
+    /// Designate an element as a popover element.
+    #[prop(optional, into)]
+    popover: MaybeProp<String>,
+    /// Define the semantic meaning of content.
+    #[prop(optional, into)]
+    role: MaybeProp<String>,
+    /// Assigns a slot to an element.
+    #[prop(optional, into)]
+    slot: MaybeProp<String>,
+    /// Toggle spellcheck for this input.
+    ///
+    /// Accepted values: "default" | "true" | "false".
+    #[prop(optional, into)]
+    spellcheck: MaybeProp<String>,
+    /// Define CSS to be applied to the element.
+    #[prop(optional, into)]
+    style: MaybeProp<String>,
+    /// Controls how an element behaves when a user navigates using the tab key.
+    #[prop(optional, into)]
+    tabindex: MaybeProp<usize>,
+    /// Describes the content of the element to screen readers.
+    #[prop(optional, into)]
+    title: MaybeProp<String>,
+    /// Defines localization behavior for the element.
+    #[prop(optional, into)]
+    translate: MaybeProp<String>,
+) -> impl IntoView {
+    let menu_id = RwSignal::new(String::new());
+    let trigger_id = RwSignal::new(String::new());
+
+    let context = DropdownMenuSubContext {
+        menu_id,
+        open,
+        trigger_id,
+    };
+
+    let global_attrs_1 = view! {
+        <{..}
+            accesskey=move || accesskey.get()
+            autocapitalize=move || autocapitalize.get()
+            autofocus=move || autofocus.get()
+            class=move || class.get()
+            contenteditable=move || contenteditable.get()
+            dir=move || dir.get()
+            draggable=move || draggable.get()
+            enterkeyhint=move || enterkeyhint.get()
+            exportparts=move || exportparts.get()
+            hidden=move || hidden.get()
+            id=move || id.get()
+            inert=move || inert.get()
+            inputmode=move || inputmode.get()
+            is=move || is.get()
+            itemid=move || itemid.get()
+        />
+    };
+
+    let global_attrs_2 = view! {
+        <{..}
+            itemprop=move || itemprop.get()
+            itemref=move || itemref.get()
+            itemscope=move || itemscope.get()
+            itemtype=move || itemtype.get()
+            lang=move || lang.get()
+            nonce=move || nonce.get()
+            part=move || part.get()
+            popover=move || popover.get()
+            role=move || role.get()
+            slot=move || slot.get()
+            spellcheck=move || spellcheck.get()
+            style=move || style.get()
+            tabindex=move || tabindex.get()
+            title=move || title.get()
+            translate=move || translate.get()
+        />
+    };
+
+    view! {
+        <div
+            on:mouseenter=move |_| { open.set(true) }
+            on:mouseleave=move |_| { open.set(false) }
+
+            {..global_attrs_1}
+            {..global_attrs_2}
+        >
+            <Provider value=context>{children()}</Provider>
+        </div>
+    }
+}
diff --git a/singlestage/src/components/dropdown/sub/trigger.rs b/singlestage/src/components/dropdown/sub/trigger.rs
new file mode 100644
index 00000000..13a296da
--- /dev/null
+++ b/singlestage/src/components/dropdown/sub/trigger.rs
@@ -0,0 +1,227 @@
+use crate::DropdownMenuSubContext;
+use leptos::prelude::*;
+
+#[component]
+pub fn DropdownMenuSubTrigger(
+    children: Children,
+
+    /// Controls whether the item appears disabled and is clickable.
+    #[prop(optional, into)]
+    disabled: MaybeProp<bool>,
+    /// Set whether or not this element should display inset from its normal position.
+    #[prop(optional, into)]
+    inset: MaybeProp<bool>,
+    /// Set the display variant of the item.
+    ///
+    /// Accepted values: "destructive"
+    #[prop(optional, into)]
+    variant: MaybeProp<String>,
+
+    // LI ATTRIBRUTES
+    //
+    /// The current ordinal value of the item.
+    #[prop(optional, into)]
+    value: MaybeProp<String>,
+
+    // GLOBAL ATTRIBUTES
+    //
+    /// A space separated list of keys to focus this element. The first key available on the user's
+    /// keyboard layout is used.
+    #[prop(optional, into)]
+    accesskey: MaybeProp<String>,
+    /// Sets whether the input value should be capitalized and how. If a parent `<form>` has
+    /// `autocapitalize` rules set, it will override any rules set here.
+    ///
+    /// Accepted values: "none" or "off" | "sentences" or "on" | "words" | "characters".
+    #[prop(optional, into)]
+    autocapitalize: MaybeProp<String>,
+    /// Grabs focus once the page has finished loading. Only one element on the page can be focused
+    /// at a time.
+    #[prop(optional, into)]
+    autofocus: MaybeProp<bool>,
+    /// Apply classes to the element.
+    #[prop(optional, into)]
+    class: MaybeProp<String>,
+    /// Allows client-side editing of the element by the user.
+    ///
+    /// Accepted values: "true" | "false" | "plaintext-only"
+    #[prop(optional, into)]
+    contenteditable: MaybeProp<String>,
+    /// Indicate directionality of the element's text.
+    ///
+    /// Accepted values: "ltr" | "rtl" | "auto"
+    #[prop(optional, into)]
+    dir: MaybeProp<String>,
+    /// Toggle whether the element can be dragged.
+    #[prop(optional, into)]
+    draggable: MaybeProp<bool>,
+    /// Modifies the appearance of the enter key on virtual keyboards.
+    #[prop(optional, into)]
+    enterkeyhint: MaybeProp<String>,
+    /// Expose elements in the shadow DOM to be manipulated by the DOM.
+    #[prop(optional, into)]
+    exportparts: MaybeProp<String>,
+    /// Controls hidden status of the element.
+    #[prop(optional, into)]
+    hidden: MaybeProp<String>,
+    /// Set the id of this element.
+    #[prop(optional, into)]
+    id: MaybeProp<String>,
+    /// Toggle if the browser reacts to input events from this element.
+    #[prop(optional, into)]
+    inert: MaybeProp<bool>,
+    /// Hints to the browser of what type of virtual keyboard to display when editing this element
+    /// or its children.
+    #[prop(optional, into)]
+    inputmode: MaybeProp<String>,
+    /// Used to render a standard element as a custom element.
+    #[prop(optional, into)]
+    is: MaybeProp<String>,
+    /// Unique global identifier of an item.
+    #[prop(optional, into)]
+    itemid: MaybeProp<String>,
+    /// Used to add properties to an item.
+    #[prop(optional, into)]
+    itemprop: MaybeProp<String>,
+    /// Used to associate an item with a related non-parent element that's using `itemscope`.
+    #[prop(optional, into)]
+    itemref: MaybeProp<String>,
+    /// Used to declare that children elements are related to a particular item.
+    #[prop(optional, into)]
+    itemscope: MaybeProp<String>,
+    /// URL of data used to define `itemprops`.
+    #[prop(optional, into)]
+    itemtype: MaybeProp<String>,
+    /// Defines the language of an element.
+    #[prop(optional, into)]
+    lang: MaybeProp<String>,
+    /// Cryptographic "number used once".
+    #[prop(optional, into)]
+    nonce: MaybeProp<String>,
+    /// List of the part names of the element.
+    #[prop(optional, into)]
+    part: MaybeProp<String>,
+    /// Designate an element as a popover element.
+    #[prop(optional, into)]
+    popover: MaybeProp<String>,
+    /// Assigns a slot to an element.
+    #[prop(optional, into)]
+    slot: MaybeProp<String>,
+    /// Toggle spellcheck for this input.
+    ///
+    /// Accepted values: "default" | "true" | "false".
+    #[prop(optional, into)]
+    spellcheck: MaybeProp<String>,
+    /// Define CSS to be applied to the element.
+    #[prop(optional, into)]
+    style: MaybeProp<String>,
+    /// Controls how an element behaves when a user navigates using the tab key.
+    #[prop(optional, into)]
+    tabindex: MaybeProp<usize>,
+    /// Describes the content of the element to screen readers.
+    #[prop(optional, into)]
+    title: MaybeProp<String>,
+    /// Defines localization behavior for the element.
+    #[prop(optional, into)]
+    translate: MaybeProp<String>,
+) -> impl IntoView {
+    let sub = expect_context::<DropdownMenuSubContext>();
+
+    let global_attrs_1 = view! {
+        <{..}
+            accesskey=move || accesskey.get()
+            autocapitalize=move || autocapitalize.get()
+            autofocus=move || autofocus.get()
+            contenteditable=move || contenteditable.get()
+            dir=move || dir.get()
+            draggable=move || draggable.get()
+            enterkeyhint=move || enterkeyhint.get()
+            exportparts=move || exportparts.get()
+            hidden=move || hidden.get()
+            inert=move || inert.get()
+            inputmode=move || inputmode.get()
+            is=move || is.get()
+            itemid=move || itemid.get()
+        />
+    };
+
+    let global_attrs_2 = view! {
+        <{..}
+            itemprop=move || itemprop.get()
+            itemref=move || itemref.get()
+            itemscope=move || itemscope.get()
+            itemtype=move || itemtype.get()
+            lang=move || lang.get()
+            nonce=move || nonce.get()
+            part=move || part.get()
+            popover=move || popover.get()
+            slot=move || slot.get()
+            spellcheck=move || spellcheck.get()
+            style=move || style.get()
+            tabindex=move || tabindex.get()
+            title=move || title.get()
+            translate=move || translate.get()
+            value=move || value.get()
+        />
+    };
+
+    view! {
+        <li
+            class=move || {
+                format!(
+                    "singlestage-dropdown-menu-item{}{}{} {}",
+                    if disabled.get().unwrap_or_default() {
+                        " singlestage-dropdown-menu-item-disabled"
+                    } else {
+                        ""
+                    },
+                    if inset.get().unwrap_or_default() {
+                        " singlestage-dropdown-menu-inset"
+                    } else {
+                        ""
+                    },
+                    match variant.get().unwrap_or_default().as_str() {
+                        "destructive" => " singlestage-dropdown-menu-item-destructive",
+                        _ => "",
+                    },
+                    class.get().unwrap_or_default(),
+                )
+            }
+            role="menuitem"
+
+            {..global_attrs_1}
+            {..global_attrs_2}
+        >
+            <button
+                aria_controls=move || sub.menu_id.get()
+                aria_haspopup="menu"
+                id={
+                    let trigger_id = id.get().unwrap_or(uuid::Uuid::new_v4().to_string());
+                    sub.trigger_id.set(trigger_id.clone());
+                    trigger_id
+                }
+                popovertarget=move || sub.menu_id.get()
+                popovertargetaction="toggle"
+                style:anchor-name=move || format!("--{}", sub.trigger_id.get())
+                type="button"
+            >
+
+                {children()}
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="24"
+                    height="24"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    class="ml-auto"
+                >
+                    <path d="m9 18 6-6-6-6" />
+                </svg>
+            </button>
+        </li>
+    }
+}
diff --git a/singlestage/src/components/field/set.rs b/singlestage/src/components/field/set.rs
index 90354298..56228247 100644
--- a/singlestage/src/components/field/set.rs
+++ b/singlestage/src/components/field/set.rs
@@ -1,3 +1,4 @@
+use crate::Reactive;
 use leptos::prelude::*;
 
 /// Container that renders a semantic fieldset with spacing presets.
@@ -9,7 +10,7 @@ pub fn FieldSet(
     //
     /// Toggle whether or not the input is disabled.
     #[prop(optional, into)]
-    disabled: MaybeProp<bool>,
+    disabled: Reactive<bool>,
     /// Associate this element with a form element that may not be its parent by its `id`.
     #[prop(optional, into)]
     form: MaybeProp<String>,
diff --git a/singlestage/src/components/input/mod.rs b/singlestage/src/components/input/mod.rs
index 5137eeeb..61d7e453 100644
--- a/singlestage/src/components/input/mod.rs
+++ b/singlestage/src/components/input/mod.rs
@@ -17,7 +17,7 @@ pub fn Input(
     input_type: MaybeProp<String>,
     /// Toggle invalid appearance.
     #[prop(optional, into)]
-    invalid: MaybeProp<bool>,
+    invalid: Reactive<bool>,
     /// The reactive value signal of this input. Also sets initial `default` value, but doesn't
     /// update it.
     #[prop(optional, into)]
@@ -58,7 +58,7 @@ pub fn Input(
     dirname: MaybeProp<String>,
     /// Toggle whether or not the input is disabled.
     #[prop(optional, into)]
-    disabled: MaybeProp<bool>,
+    disabled: Reactive<bool>,
     /// Associate this element with a form element that may not be its parent by its `id`.
     #[prop(optional, into)]
     form: MaybeProp<String>,
@@ -278,10 +278,8 @@ pub fn Input(
     });
 
     Effect::new(move || {
-        if let Some(input) = input_ref.get_untracked()
-            && let Some(disabled) = disabled.get()
-        {
-            input.set_disabled(disabled);
+        if let Some(input) = input_ref.get_untracked() {
+            input.set_disabled(disabled.get());
         }
     });
 
@@ -397,7 +395,7 @@ pub fn Input(
             }
             aria_invalid=move || {
                 match invalid.get() {
-                    Some(true) => Some("true"),
+                    true => Some("true"),
                     _ => None,
                 }
             }
diff --git a/singlestage/src/components/input_group/group.rs b/singlestage/src/components/input_group/group.rs
index e3ba835e..c33d6800 100644
--- a/singlestage/src/components/input_group/group.rs
+++ b/singlestage/src/components/input_group/group.rs
@@ -1,4 +1,4 @@
-use crate::InputGroupContext;
+use crate::{InputGroupContext, Reactive};
 use leptos::{context::Provider, prelude::*};
 
 /// The main component that wraps inputs and addons.
@@ -8,7 +8,7 @@ pub fn InputGroup(
 
     /// Toggle whether or not this input group should appear disabled.
     #[prop(optional, into)]
-    disabled: MaybeProp<bool>,
+    disabled: Reactive<bool>,
 
     // GLOBAL ATTRIBUTES
     //
@@ -155,9 +155,7 @@ pub fn InputGroup(
     view! {
         <div
             class=move || { format!("singlestage-input-group {}", class.get().unwrap_or_default()) }
-            data-disabled=move || {
-                if disabled.get().unwrap_or_default() { Some("true".to_string()) } else { None }
-            }
+            data-disabled=move || { if disabled.get() { Some("true".to_string()) } else { None } }
             role="group"
 
             {..global_attrs_1}
diff --git a/singlestage/src/components/popover/content.rs b/singlestage/src/components/popover/content.rs
index 57c438ae..be455ef1 100644
--- a/singlestage/src/components/popover/content.rs
+++ b/singlestage/src/components/popover/content.rs
@@ -6,6 +6,19 @@ use leptos::prelude::*;
 pub fn PopoverContent(
     children: Children,
 
+    /// Set how to align the popover
+    ///
+    /// Accepted values: "start" | "center" | "end"
+    /// Default is "start"
+    #[prop(optional, into)]
+    align: MaybeProp<String>,
+    /// Set which side the popover opens relative to the trigger
+    ///
+    /// Accepted values: "top" | "right" | "bottom" | "left"
+    /// Default is "bottom"
+    #[prop(optional, into)]
+    side: MaybeProp<String>,
+
     // GLOBAL ATTRIBUTES
     //
     /// A space separated list of keys to focus this element. The first key available on the user's
@@ -106,6 +119,13 @@ pub fn PopoverContent(
     translate: MaybeProp<String>,
 ) -> impl IntoView {
     let menu = expect_context::<PopoverContext>();
+    let menu_ref = NodeRef::<leptos::html::Menu>::new();
+
+    Effect::new(move || {
+        if let Some(popover) = menu_ref.get_untracked() {
+            let _ = popover.toggle_popover_with_force(menu.open.get());
+        }
+    });
 
     let global_attrs_1 = view! {
         <{..}
@@ -145,13 +165,31 @@ pub fn PopoverContent(
 
     view! {
         <menu
-            class=move || { format!("singlestage-popover {}", class.get().unwrap_or_default()) }
+            class=move || {
+                format!(
+                    "singlestage-popover-content singlestage-popover singlestage-popover-animations {} {} {}",
+                    match side.get().unwrap_or_default().as_str() {
+                        "top" => "singlestage-popover-top",
+                        "right" => "singlestage-popover-right",
+                        "left" => "singlestage-popover-left",
+                        _ => "singlestage-popover-bottom",
+                    },
+                    match align.get().unwrap_or_default().as_str() {
+                        "center" => "singlestage-popover-center",
+                        "end" => "singlestage-popover-end",
+                        _ => "singlestage-popover-start",
+                    },
+                    class.get().unwrap_or_default(),
+                )
+            }
+            node_ref=menu_ref
             id={
                 let menu_id = id.get().unwrap_or(uuid::Uuid::new_v4().to_string());
                 menu.menu_id.set(menu_id.clone());
                 menu_id
             }
-            popover="auto"
+            popover=move || if menu.dismissable.get() { "auto" } else { "manual" }
+            style:position-anchor=move || { format!("--{}", menu.trigger_id.get()) }
             role="menu"
 
             {..global_attrs_1}
diff --git a/singlestage/src/components/popover/description.rs b/singlestage/src/components/popover/description.rs
new file mode 100644
index 00000000..9b2849f2
--- /dev/null
+++ b/singlestage/src/components/popover/description.rs
@@ -0,0 +1,165 @@
+use leptos::prelude::*;
+
+/// Displays a description of popover content.
+#[component]
+pub fn PopoverDescription(
+    children: Children,
+
+    // GLOBAL ATTRIBUTES
+    //
+    /// A space separated list of keys to focus this element. The first key available on the user's
+    /// keyboard layout is used.
+    #[prop(optional, into)]
+    accesskey: MaybeProp<String>,
+    /// Sets whether the input value should be capitalized and how. If a parent `<form>` has
+    /// `autocapitalize` rules set, it will override any rules set here.
+    ///
+    /// Accepted values: "none" or "off" | "sentences" or "on" | "words" | "characters".
+    #[prop(optional, into)]
+    autocapitalize: MaybeProp<String>,
+    /// Grabs focus once the page has finished loading. Only one element on the page can be focused
+    /// at a time.
+    #[prop(optional, into)]
+    autofocus: MaybeProp<bool>,
+    /// Apply classes to the element.
+    #[prop(optional, into)]
+    class: MaybeProp<String>,
+    /// Allows client-side editing of the element by the user.
+    ///
+    /// Accepted values: "true" | "false" | "plaintext-only"
+    #[prop(optional, into)]
+    contenteditable: MaybeProp<String>,
+    /// Indicate directionality of the element's text.
+    ///
+    /// Accepted values: "ltr" | "rtl" | "auto"
+    #[prop(optional, into)]
+    dir: MaybeProp<String>,
+    /// Toggle whether the element can be dragged.
+    #[prop(optional, into)]
+    draggable: MaybeProp<bool>,
+    /// Modifies the appearance of the enter key on virtual keyboards.
+    #[prop(optional, into)]
+    enterkeyhint: MaybeProp<String>,
+    /// Expose elements in the shadow DOM to be manipulated by the DOM.
+    #[prop(optional, into)]
+    exportparts: MaybeProp<String>,
+    /// Controls hidden status of the element.
+    #[prop(optional, into)]
+    hidden: MaybeProp<String>,
+    /// Set the id of this element.
+    #[prop(optional, into)]
+    id: MaybeProp<String>,
+    /// Toggle if the browser reacts to input events from this element.
+    #[prop(optional, into)]
+    inert: MaybeProp<bool>,
+    /// Hints to the browser of what type of virtual keyboard to display when editing this element
+    /// or its children.
+    #[prop(optional, into)]
+    inputmode: MaybeProp<String>,
+    /// Used to render a standard element as a custom element.
+    #[prop(optional, into)]
+    is: MaybeProp<String>,
+    /// Unique global identifier of an item.
+    #[prop(optional, into)]
+    itemid: MaybeProp<String>,
+    /// Used to add properties to an item.
+    #[prop(optional, into)]
+    itemprop: MaybeProp<String>,
+    /// Used to associate an item with a related non-parent element that's using `itemscope`.
+    #[prop(optional, into)]
+    itemref: MaybeProp<String>,
+    /// Used to declare that children elements are related to a particular item.
+    #[prop(optional, into)]
+    itemscope: MaybeProp<String>,
+    /// URL of data used to define `itemprops`.
+    #[prop(optional, into)]
+    itemtype: MaybeProp<String>,
+    /// Defines the language of an element.
+    #[prop(optional, into)]
+    lang: MaybeProp<String>,
+    /// Cryptographic "number used once".
+    #[prop(optional, into)]
+    nonce: MaybeProp<String>,
+    /// List of the part names of the element.
+    #[prop(optional, into)]
+    part: MaybeProp<String>,
+    /// Designate an element as a popover element.
+    #[prop(optional, into)]
+    popover: MaybeProp<String>,
+    /// Define the semantic meaning of content.
+    #[prop(optional, into)]
+    role: MaybeProp<String>,
+    /// Assigns a slot to an element.
+    #[prop(optional, into)]
+    slot: MaybeProp<String>,
+    /// Toggle spellcheck for this input.
+    ///
+    /// Accepted values: "default" | "true" | "false".
+    #[prop(optional, into)]
+    spellcheck: MaybeProp<String>,
+    /// Define CSS to be applied to the element.
+    #[prop(optional, into)]
+    style: MaybeProp<String>,
+    /// Controls how an element behaves when a user navigates using the tab key.
+    #[prop(optional, into)]
+    tabindex: MaybeProp<usize>,
+    /// Describes the content of the element to screen readers.
+    #[prop(optional, into)]
+    title: MaybeProp<String>,
+    /// Defines localization behavior for the element.
+    #[prop(optional, into)]
+    translate: MaybeProp<String>,
+) -> impl IntoView {
+    let global_attrs_1 = view! {
+        <{..}
+            accesskey=move || accesskey.get()
+            autocapitalize=move || autocapitalize.get()
+            autofocus=move || autofocus.get()
+            class=move || class.get()
+            contenteditable=move || contenteditable.get()
+            dir=move || dir.get()
+            draggable=move || draggable.get()
+            enterkeyhint=move || enterkeyhint.get()
+            exportparts=move || exportparts.get()
+            hidden=move || hidden.get()
+            id=move || id.get()
+            inert=move || inert.get()
+            inputmode=move || inputmode.get()
+            is=move || is.get()
+            itemid=move || itemid.get()
+        />
+    };
+
+    let global_attrs_2 = view! {
+        <{..}
+            itemprop=move || itemprop.get()
+            itemref=move || itemref.get()
+            itemscope=move || itemscope.get()
+            itemtype=move || itemtype.get()
+            lang=move || lang.get()
+            nonce=move || nonce.get()
+            part=move || part.get()
+            popover=move || popover.get()
+            role=move || role.get()
+            slot=move || slot.get()
+            spellcheck=move || spellcheck.get()
+            style=move || style.get()
+            tabindex=move || tabindex.get()
+            title=move || title.get()
+            translate=move || translate.get()
+        />
+    };
+
+    view! {
+        <p
+            class=move || {
+                format!("singlestage-popover-description {}", class.get().unwrap_or_default())
+            }
+
+            {..global_attrs_1}
+            {..global_attrs_2}
+        >
+            {children()}
+        </p>
+    }
+}
diff --git a/singlestage/src/components/popover/header.rs b/singlestage/src/components/popover/header.rs
new file mode 100644
index 00000000..19702f79
--- /dev/null
+++ b/singlestage/src/components/popover/header.rs
@@ -0,0 +1,163 @@
+use leptos::prelude::*;
+
+/// A styled header container for use within PopoverContent.
+#[component]
+pub fn PopoverHeader(
+    children: Children,
+
+    // GLOBAL ATTRIBUTES
+    //
+    /// A space separated list of keys to focus this element. The first key available on the user's
+    /// keyboard layout is used.
+    #[prop(optional, into)]
+    accesskey: MaybeProp<String>,
+    /// Sets whether the input value should be capitalized and how. If a parent `<form>` has
+    /// `autocapitalize` rules set, it will override any rules set here.
+    ///
+    /// Accepted values: "none" or "off" | "sentences" or "on" | "words" | "characters".
+    #[prop(optional, into)]
+    autocapitalize: MaybeProp<String>,
+    /// Grabs focus once the page has finished loading. Only one element on the page can be focused
+    /// at a time.
+    #[prop(optional, into)]
+    autofocus: MaybeProp<bool>,
+    /// Apply classes to the element.
+    #[prop(optional, into)]
+    class: MaybeProp<String>,
+    /// Allows client-side editing of the element by the user.
+    ///
+    /// Accepted values: "true" | "false" | "plaintext-only"
+    #[prop(optional, into)]
+    contenteditable: MaybeProp<String>,
+    /// Indicate directionality of the element's text.
+    ///
+    /// Accepted values: "ltr" | "rtl" | "auto"
+    #[prop(optional, into)]
+    dir: MaybeProp<String>,
+    /// Toggle whether the element can be dragged.
+    #[prop(optional, into)]
+    draggable: MaybeProp<bool>,
+    /// Modifies the appearance of the enter key on virtual keyboards.
+    #[prop(optional, into)]
+    enterkeyhint: MaybeProp<String>,
+    /// Expose elements in the shadow DOM to be manipulated by the DOM.
+    #[prop(optional, into)]
+    exportparts: MaybeProp<String>,
+    /// Controls hidden status of the element.
+    #[prop(optional, into)]
+    hidden: MaybeProp<String>,
+    /// Set the id of this element.
+    #[prop(optional, into)]
+    id: MaybeProp<String>,
+    /// Toggle if the browser reacts to input events from this element.
+    #[prop(optional, into)]
+    inert: MaybeProp<bool>,
+    /// Hints to the browser of what type of virtual keyboard to display when editing this element
+    /// or its children.
+    #[prop(optional, into)]
+    inputmode: MaybeProp<String>,
+    /// Used to render a standard element as a custom element.
+    #[prop(optional, into)]
+    is: MaybeProp<String>,
+    /// Unique global identifier of an item.
+    #[prop(optional, into)]
+    itemid: MaybeProp<String>,
+    /// Used to add properties to an item.
+    #[prop(optional, into)]
+    itemprop: MaybeProp<String>,
+    /// Used to associate an item with a related non-parent element that's using `itemscope`.
+    #[prop(optional, into)]
+    itemref: MaybeProp<String>,
+    /// Used to declare that children elements are related to a particular item.
+    #[prop(optional, into)]
+    itemscope: MaybeProp<String>,
+    /// URL of data used to define `itemprops`.
+    #[prop(optional, into)]
+    itemtype: MaybeProp<String>,
+    /// Defines the language of an element.
+    #[prop(optional, into)]
+    lang: MaybeProp<String>,
+    /// Cryptographic "number used once".
+    #[prop(optional, into)]
+    nonce: MaybeProp<String>,
+    /// List of the part names of the element.
+    #[prop(optional, into)]
+    part: MaybeProp<String>,
+    /// Designate an element as a popover element.
+    #[prop(optional, into)]
+    popover: MaybeProp<String>,
+    /// Define the semantic meaning of content.
+    #[prop(optional, into)]
+    role: MaybeProp<String>,
+    /// Assigns a slot to an element.
+    #[prop(optional, into)]
+    slot: MaybeProp<String>,
+    /// Toggle spellcheck for this input.
+    ///
+    /// Accepted values: "default" | "true" | "false".
+    #[prop(optional, into)]
+    spellcheck: MaybeProp<String>,
+    /// Define CSS to be applied to the element.
+    #[prop(optional, into)]
+    style: MaybeProp<String>,
+    /// Controls how an element behaves when a user navigates using the tab key.
+    #[prop(optional, into)]
+    tabindex: MaybeProp<usize>,
+    /// Describes the content of the element to screen readers.
+    #[prop(optional, into)]
+    title: MaybeProp<String>,
+    /// Defines localization behavior for the element.
+    #[prop(optional, into)]
+    translate: MaybeProp<String>,
+) -> impl IntoView {
+    let global_attrs_1 = view! {
+        <{..}
+            accesskey=move || accesskey.get()
+            autocapitalize=move || autocapitalize.get()
+            autofocus=move || autofocus.get()
+            class=move || class.get()
+            contenteditable=move || contenteditable.get()
+            dir=move || dir.get()
+            draggable=move || draggable.get()
+            enterkeyhint=move || enterkeyhint.get()
+            exportparts=move || exportparts.get()
+            hidden=move || hidden.get()
+            id=move || id.get()
+            inert=move || inert.get()
+            inputmode=move || inputmode.get()
+            is=move || is.get()
+            itemid=move || itemid.get()
+        />
+    };
+
+    let global_attrs_2 = view! {
+        <{..}
+            itemprop=move || itemprop.get()
+            itemref=move || itemref.get()
+            itemscope=move || itemscope.get()
+            itemtype=move || itemtype.get()
+            lang=move || lang.get()
+            nonce=move || nonce.get()
+            part=move || part.get()
+            popover=move || popover.get()
+            role=move || role.get()
+            slot=move || slot.get()
+            spellcheck=move || spellcheck.get()
+            style=move || style.get()
+            tabindex=move || tabindex.get()
+            title=move || title.get()
+            translate=move || translate.get()
+        />
+    };
+
+    view! {
+        <hgroup
+            class=move || format!("singlestage-popover-header {}", class.get().unwrap_or_default())
+
+            {..global_attrs_1}
+            {..global_attrs_2}
+        >
+            {children()}
+        </hgroup>
+    }
+}
diff --git a/singlestage/src/components/popover/mod.rs b/singlestage/src/components/popover/mod.rs
index e0058970..043d5ecc 100644
--- a/singlestage/src/components/popover/mod.rs
+++ b/singlestage/src/components/popover/mod.rs
@@ -1,16 +1,25 @@
 mod content;
+mod description;
+mod header;
 mod popover;
+mod title;
 mod trigger;
 
 pub use content::*;
+pub use description::*;
+pub use header::*;
 pub use popover::*;
+pub use title::*;
 pub use trigger::*;
 
+use crate::Reactive;
 use leptos::prelude::*;
 
 #[derive(Clone)]
 pub struct PopoverContext {
+    pub dismissable: Reactive<bool>,
     pub menu_id: RwSignal<String>,
+    pub open: Reactive<bool>,
     pub trigger_id: RwSignal<String>,
 }
 
diff --git a/singlestage/src/components/popover/popover.css b/singlestage/src/components/popover/popover.css
index 1e0b83bd..155017c3 100644
--- a/singlestage/src/components/popover/popover.css
+++ b/singlestage/src/components/popover/popover.css
@@ -1,36 +1,173 @@
 @layer components {
-  /* Hacks to render properly until anchor support
-      https://developer.mozilla.org/en-US/docs/Web/CSS/anchor#browser_compatibility
-    */
-  /* Webkit -- HAS TO BE FIRST */
-  @media screen and (-webkit-min-device-pixel-ratio: 0) {
-    .singlestage-popover {
-      @apply relative
-      bg-transparent;
-      position-area: bottom span-right;
-      inset: unset;
+  :root {
+    --transform-origin: 0% 339px;
+    --transform-scale: scale3d(0.95, 0.95, 0.95);
+    --transform-translate-step: 0.25rem;
+    --transition-duration: 0.15s;
+    --transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .singlestage-popover-animations {
+      opacity: 0;
+      transform-origin: var(--transform-origin);
+      transform: var(--transform-scale);
+      transition-timing-function: var(--transition-timing-function);
+      transition: all var(--transition-duration) allow-discrete;
+
+      &:popover-open {
+        opacity: 1;
+        transform: scale3d(1, 1, 1);
+        transform: translateY(0);
+        transform: translateX(0);
+        transform: none;
+      }
+
+      @starting-style {
+        &:popover-open {
+          opacity: 0;
+          transform: var(--transform-scale);
+        }
+      }
+    }
+
+    .singlestage-popover-top {
+      transform: translateY(calc(2 * var(--transform-translate-step)));
+
+      @starting-style {
+        &:popover-open {
+          transform: translateY(calc(2 * var(--transform-translate-step)));
+        }
+      }
+    }
+
+    .singlestage-popover-right {
+      transform: translateX(calc(-2 * var(--transform-translate-step)));
+
+      @starting-style {
+        &:popover-open {
+          transform: translateX(calc(-2 * var(--transform-translate-step)));
+        }
+      }
+    }
+
+    .singlestage-popover-bottom {
+      transform: translateY(calc(-2 * var(--transform-translate-step)));
+
+      @starting-style {
+        &:popover-open {
+          transform: translateY(calc(-2 * var(--transform-translate-step)));
+        }
+      }
+    }
+
+    .singlestage-popover-left {
+      transform: translateX(calc(2 * var(--transform-translate-step)));
+
+      @starting-style {
+        &:popover-open {
+          transform: translateX(calc(2 * var(--transform-translate-step)));
+        }
+      }
     }
   }
 
-  /* Firefox */
-  @-moz-document url-prefix() {
+  html:has(.singlestage-context-menu > [popover]:popover-open) {
+    overflow: hidden;
+  }
+
+  .singlestage-context-menu {
     .singlestage-popover {
-      @apply relative
-      bg-transparent;
-      inset: unset;
+      position: fixed;
     }
   }
-  /* End hacks */
 
   .singlestage-popover {
+    inset: unset;
+    position: absolute;
+    margin: 0;
+    position-try-fallbacks: flip-block, flip-inline;
+
+    &:popover-open {
+      @apply flex
+      overflow-x-hidden
+      overflow-y-auto;
+    }
+
+    [popover] {
+      top: anchor(top);
+    }
+
     @apply bg-popover
-    border
-    overflow-x-hidden
-    overflow-y-auto
-    p-4
-    rounded-md
+    flex-col
+    outline-hidden
+    ring-1
+    ring-foreground/10
+    rounded-lg
     shadow-md
     text-popover-foreground
     z-50;
   }
+
+  .singlestage-popover-content {
+    @apply gap-2.5
+    p-2.5
+    text-sm
+    w-72;
+  }
+
+  .singlestage-popover-description {
+    @apply text-muted-foreground;
+  }
+
+  .singlestage-popover-header {
+    @apply flex
+    flex-col
+    gap-0.5
+    text-sm;
+  }
+
+  .singlestage-popover-title {
+    @apply font-medium;
+  }
+
+  .singlestage-popover-top,
+  .singlestage-popover-left.singlestage-popover-start,
+  .singlestage-popover-right.singlestage-popover-start {
+    bottom: anchor(top);
+  }
+
+  .singlestage-popover-right {
+    left: anchor(right);
+  }
+
+  .singlestage-popover-bottom,
+  .singlestage-popover-right.singlestage-popover-end,
+  .singlestage-popover-left.singlestage-popover-end {
+    top: anchor(bottom);
+  }
+
+  .singlestage-popover-left {
+    right: anchor(left);
+  }
+
+  .singlestage-popover-top.singlestage-popover-start,
+  .singlestage-popover-bottom.singlestage-popover-start {
+    left: anchor(left);
+  }
+
+  .singlestage-popover-top.singlestage-popover-end,
+  .singlestage-popover-bottom.singlestage-popover-end {
+    right: anchor(right);
+  }
+
+  .singlestage-popover-left.singlestage-popover-center,
+  .singlestage-popover-right.singlestage-popover-center {
+    align-self: anchor-center;
+  }
+
+  .singlestage-popover-top.singlestage-popover-center,
+  .singlestage-popover-bottom.singlestage-popover-center {
+    justify-self: anchor-center;
+  }
 }
diff --git a/singlestage/src/components/popover/popover.rs b/singlestage/src/components/popover/popover.rs
index 97ca8d78..1409d61d 100644
--- a/singlestage/src/components/popover/popover.rs
+++ b/singlestage/src/components/popover/popover.rs
@@ -1,4 +1,4 @@
-use crate::PopoverContext;
+use crate::{PopoverContext, Reactive};
 use leptos::{context::Provider, prelude::*};
 
 /// Contains all the parts of a popover.
@@ -6,6 +6,15 @@ use leptos::{context::Provider, prelude::*};
 pub fn Popover(
     children: Children,
 
+    /// Set whether or not this popover can be light dismissed. Use this with the `open` signal for
+    /// a manually managed popover
+    #[prop(optional, into, default = Reactive::new(true))]
+    dismissable: Reactive<bool>,
+    /// Reactive signal that can remotely control the open state of the popover **but is not
+    /// coupled to the actual open state of the popover**
+    #[prop(optional, into)]
+    open: Reactive<bool>,
+
     // GLOBAL ATTRIBUTES
     //
     /// A space separated list of keys to focus this element. The first key available on the user's
@@ -115,7 +124,9 @@ pub fn Popover(
     let trigger_id = RwSignal::new(String::new());
 
     let context = PopoverContext {
+        dismissable,
         menu_id,
+        open,
         trigger_id,
     };
 
diff --git a/singlestage/src/components/popover/title.rs b/singlestage/src/components/popover/title.rs
new file mode 100644
index 00000000..3260f531
--- /dev/null
+++ b/singlestage/src/components/popover/title.rs
@@ -0,0 +1,165 @@
+use leptos::prelude::*;
+
+/// Contains the title of the popover.
+#[component]
+pub fn PopoverTitle(
+    children: Children,
+
+    // GLOBAL ATTRIBUTES
+    //
+    /// A space separated list of keys to focus this element. The first key available on the user's
+    /// keyboard layout is used.
+    #[prop(optional, into)]
+    accesskey: MaybeProp<String>,
+    /// Sets whether the input value should be capitalized and how. If a parent `<form>` has
+    /// `autocapitalize` rules set, it will override any rules set here.
+    ///
+    /// Accepted values: "none" or "off" | "sentences" or "on" | "words" | "characters".
+    #[prop(optional, into)]
+    autocapitalize: MaybeProp<String>,
+    /// Grabs focus once the page has finished loading. Only one element on the page can be focused
+    /// at a time.
+    #[prop(optional, into)]
+    autofocus: MaybeProp<bool>,
+    /// Apply classes to the element.
+    #[prop(optional, into)]
+    class: MaybeProp<String>,
+    /// Allows client-side editing of the element by the user.
+    ///
+    /// Accepted values: "true" | "false" | "plaintext-only"
+    #[prop(optional, into)]
+    contenteditable: MaybeProp<String>,
+    /// Indicate directionality of the element's text.
+    ///
+    /// Accepted values: "ltr" | "rtl" | "auto"
+    #[prop(optional, into)]
+    dir: MaybeProp<String>,
+    /// Toggle whether the element can be dragged.
+    #[prop(optional, into)]
+    draggable: MaybeProp<bool>,
+    /// Modifies the appearance of the enter key on virtual keyboards.
+    #[prop(optional, into)]
+    enterkeyhint: MaybeProp<String>,
+    /// Expose elements in the shadow DOM to be manipulated by the DOM.
+    #[prop(optional, into)]
+    exportparts: MaybeProp<String>,
+    /// Controls hidden status of the element.
+    #[prop(optional, into)]
+    hidden: MaybeProp<String>,
+    /// Set the id of this element.
+    #[prop(optional, into)]
+    id: MaybeProp<String>,
+    /// Toggle if the browser reacts to input events from this element.
+    #[prop(optional, into)]
+    inert: MaybeProp<bool>,
+    /// Hints to the browser of what type of virtual keyboard to display when editing this element
+    /// or its children.
+    #[prop(optional, into)]
+    inputmode: MaybeProp<String>,
+    /// Used to render a standard element as a custom element.
+    #[prop(optional, into)]
+    is: MaybeProp<String>,
+    /// Unique global identifier of an item.
+    #[prop(optional, into)]
+    itemid: MaybeProp<String>,
+    /// Used to add properties to an item.
+    #[prop(optional, into)]
+    itemprop: MaybeProp<String>,
+    /// Used to associate an item with a related non-parent element that's using `itemscope`.
+    #[prop(optional, into)]
+    itemref: MaybeProp<String>,
+    /// Used to declare that children elements are related to a particular item.
+    #[prop(optional, into)]
+    itemscope: MaybeProp<String>,
+    /// URL of data used to define `itemprops`.
+    #[prop(optional, into)]
+    itemtype: MaybeProp<String>,
+    /// Defines the language of an element.
+    #[prop(optional, into)]
+    lang: MaybeProp<String>,
+    /// Cryptographic "number used once".
+    #[prop(optional, into)]
+    nonce: MaybeProp<String>,
+    /// List of the part names of the element.
+    #[prop(optional, into)]
+    part: MaybeProp<String>,
+    /// Designate an element as a popover element.
+    #[prop(optional, into)]
+    popover: MaybeProp<String>,
+    /// Define the semantic meaning of content.
+    #[prop(optional, into)]
+    role: MaybeProp<String>,
+    /// Assigns a slot to an element.
+    #[prop(optional, into)]
+    slot: MaybeProp<String>,
+    /// Toggle spellcheck for this input.
+    ///
+    /// Accepted values: "default" | "true" | "false".
+    #[prop(optional, into)]
+    spellcheck: MaybeProp<String>,
+    /// Define CSS to be applied to the element.
+    #[prop(optional, into)]
+    style: MaybeProp<String>,
+    /// Controls how an element behaves when a user navigates using the tab key.
+    #[prop(optional, into)]
+    tabindex: MaybeProp<usize>,
+    /// Describes the content of the element to screen readers.
+    #[prop(optional, into)]
+    title: MaybeProp<String>,
+    /// Defines localization behavior for the element.
+    #[prop(optional, into)]
+    translate: MaybeProp<String>,
+) -> impl IntoView {
+    let global_attrs_1 = view! {
+        <{..}
+            accesskey=move || accesskey.get()
+            autocapitalize=move || autocapitalize.get()
+            autofocus=move || autofocus.get()
+            class=move || class.get()
+            contenteditable=move || contenteditable.get()
+            dir=move || dir.get()
+            draggable=move || draggable.get()
+            enterkeyhint=move || enterkeyhint.get()
+            exportparts=move || exportparts.get()
+            hidden=move || hidden.get()
+            id=move || id.get()
+            inert=move || inert.get()
+            inputmode=move || inputmode.get()
+            is=move || is.get()
+            itemid=move || itemid.get()
+        />
+    };
+
+    let global_attrs_2 = view! {
+        <{..}
+            itemprop=move || itemprop.get()
+            itemref=move || itemref.get()
+            itemscope=move || itemscope.get()
+            itemtype=move || itemtype.get()
+            lang=move || lang.get()
+            nonce=move || nonce.get()
+            part=move || part.get()
+            popover=move || popover.get()
+            role=move || role.get()
+            slot=move || slot.get()
+            spellcheck=move || spellcheck.get()
+            style=move || style.get()
+            tabindex=move || tabindex.get()
+            title=move || title.get()
+            translate=move || translate.get()
+        />
+    };
+
+    view! {
+        <h1
+            class=move || {
+                format!("singlestage-popover-title {}", class.get().unwrap_or_default())
+            }
+
+            {..global_attrs_1}
+            {..global_attrs_2}
+        >
+            {children()}
+        </h1>
+    }
+}
diff --git a/singlestage/src/components/radio/group.rs b/singlestage/src/components/radio/group.rs
index d7fd0d8a..641ad5a9 100644
--- a/singlestage/src/components/radio/group.rs
+++ b/singlestage/src/components/radio/group.rs
@@ -20,7 +20,7 @@ pub fn RadioGroup(
     //
     /// Toggle whether or not the input is disabled.
     #[prop(optional, into)]
-    disabled: MaybeProp<bool>,
+    disabled: Reactive<bool>,
     /// Associate this element with a form element that may not be its parent by its `id`.
     #[prop(optional, into)]
     form: MaybeProp<String>,
diff --git a/singlestage/src/components/radio/radio.css b/singlestage/src/components/radio/radio.css
index ae9d96d7..86be3541 100644
--- a/singlestage/src/components/radio/radio.css
+++ b/singlestage/src/components/radio/radio.css
@@ -1,5 +1,5 @@
 @layer components {
-  .singlestage-input[type="radio"] {
+  .singlestage-radio:not(.singlestage-radio-item) {
     @apply appearance-none
     aria-invalid:border-destructive
     aria-invalid:ring-destructive/20
@@ -33,7 +33,7 @@
     }
   }
 
-  .singlestage-radio-group {
+  .singlestage-radio-group:not(:has(.singlestage-radio-item)) {
     @apply gap-3
     grid;
 
diff --git a/singlestage/src/components/radio/radio.rs b/singlestage/src/components/radio/radio.rs
index 9bd3c593..ddb9cb4e 100644
--- a/singlestage/src/components/radio/radio.rs
+++ b/singlestage/src/components/radio/radio.rs
@@ -25,7 +25,7 @@ pub fn Radio(
     required: MaybeProp<bool>,
     /// Whether the form control is disabled
     #[prop(optional, into)]
-    disabled: MaybeProp<bool>,
+    disabled: Reactive<bool>,
     /// The value of the control. When specified in the HTML, corresponds to the initial value
     #[prop(optional, into)]
     value: MaybeProp<String>,
@@ -179,7 +179,7 @@ pub fn Radio(
 
     Effect::new(move || {
         if let Some(radio) = radio_ref.get_untracked() {
-            radio.set_disabled(disabled.get().unwrap_or_default());
+            radio.set_disabled(disabled.get());
         }
     });
 
@@ -254,7 +254,9 @@ pub fn Radio(
                 }
             }
             checked=move || checked.get_untracked()
-            class=move || { format!("singlestage-input {}", class.get().unwrap_or_default()) }
+            class=move || {
+                format!("singlestage-input singlestage-radio {}", class.get().unwrap_or_default())
+            }
             disabled=disabled.get_untracked()
             form=move || form.get()
             name=radio_group.name.clone()
diff --git a/singlestage/src/components/select/content.rs b/singlestage/src/components/select/content.rs
index 33c3cdb7..88ae4023 100644
--- a/singlestage/src/components/select/content.rs
+++ b/singlestage/src/components/select/content.rs
@@ -1,4 +1,4 @@
-use crate::SelectContext;
+use crate::{Reactive, SelectContext};
 use leptos::prelude::*;
 
 /// Contains a group of items for the Select.
@@ -8,7 +8,7 @@ pub fn SelectContent(
 
     /// Set whether or not the items in the group are appear as disabled and can be selected.
     #[prop(optional, into)]
-    disabled: MaybeProp<bool>,
+    disabled: Reactive<bool>,
     /// Label this group of content.
     #[prop(optional, into)]
     label: MaybeProp<String>,
diff --git a/singlestage/src/components/select/item.rs b/singlestage/src/components/select/item.rs
index d39c6986..72f0992f 100644
--- a/singlestage/src/components/select/item.rs
+++ b/singlestage/src/components/select/item.rs
@@ -9,7 +9,7 @@ pub fn SelectItem(
 
     /// Set whether or not this item appears disabled and is checkable.
     #[prop(optional, into)]
-    disabled: MaybeProp<bool>,
+    disabled: Reactive<bool>,
     /// Set a label describing the meaning of this item.
     #[prop(optional, into)]
     label: MaybeProp<String>,
diff --git a/singlestage/src/components/select/select.rs b/singlestage/src/components/select/select.rs
index f4df070e..e5fd55cd 100644
--- a/singlestage/src/components/select/select.rs
+++ b/singlestage/src/components/select/select.rs
@@ -12,7 +12,7 @@ pub fn Select(
     default: MaybeProp<String>,
     /// Toggle invalid appearance.
     #[prop(optional, into)]
-    invalid: MaybeProp<bool>,
+    invalid: Reactive<bool>,
     /// The placeholder value for the select.
     #[prop(optional, into)]
     placeholder: MaybeProp<String>,
@@ -32,7 +32,7 @@ pub fn Select(
     autocomplete: MaybeProp<String>,
     /// Toggle whether or not the input is disabled.
     #[prop(optional, into)]
-    disabled: MaybeProp<bool>,
+    disabled: Reactive<bool>,
     /// Associate this element with a form element that may not be its parent by its `id`.
     #[prop(optional, into)]
     form: MaybeProp<String>,
@@ -184,7 +184,7 @@ pub fn Select(
 
     Effect::new(move || {
         if let Some(select) = select_ref.get_untracked() {
-            select.set_disabled(disabled.get().unwrap_or_default());
+            select.set_disabled(disabled.get());
         }
     });
 
@@ -262,7 +262,7 @@ pub fn Select(
             }
             aria-invalid=move || {
                 match invalid.get() {
-                    Some(true) => Some("true"),
+                    true => Some("true"),
                     _ => None,
                 }
             }
diff --git a/singlestage/src/components/slider/mod.rs b/singlestage/src/components/slider/mod.rs
index 6325f727..ac2822dc 100644
--- a/singlestage/src/components/slider/mod.rs
+++ b/singlestage/src/components/slider/mod.rs
@@ -30,7 +30,7 @@ pub fn Slider(
     autocomplete: MaybeProp<String>,
     /// Toggle whether or not the input is disabled.
     #[prop(optional, into)]
-    disabled: MaybeProp<bool>,
+    disabled: Reactive<bool>,
     /// Associate this element with a form element that may not be its parent by its `id`.
     #[prop(optional, into)]
     form: MaybeProp<String>,
@@ -204,7 +204,7 @@ pub fn Slider(
     // On disabled
     Effect::new(move || {
         if let Some(slider) = slider_ref.get_untracked() {
-            slider.set_disabled(disabled.get().unwrap_or_default());
+            slider.set_disabled(disabled.get());
         }
     });
 
diff --git a/singlestage/src/components/switch/mod.rs b/singlestage/src/components/switch/mod.rs
index 96591a0b..2a2041db 100644
--- a/singlestage/src/components/switch/mod.rs
+++ b/singlestage/src/components/switch/mod.rs
@@ -25,7 +25,7 @@ pub fn Switch(
     required: MaybeProp<bool>,
     /// Whether the form control is disabled
     #[prop(optional, into)]
-    disabled: MaybeProp<bool>,
+    disabled: Reactive<bool>,
     /// The value of the control. When specified in the HTML, corresponds to the initial value
     #[prop(optional, into)]
     value: MaybeProp<String>,
@@ -196,10 +196,8 @@ pub fn Switch(
     });
 
     Effect::new(move || {
-        if let Some(switch) = switch_ref.get_untracked()
-            && let Some(disabled) = disabled.get()
-        {
-            switch.set_disabled(disabled);
+        if let Some(switch) = switch_ref.get_untracked() {
+            switch.set_disabled(disabled.get());
         }
     });
 
diff --git a/singlestage/src/components/tabs/trigger.rs b/singlestage/src/components/tabs/trigger.rs
index ce38a61e..20c2812c 100644
--- a/singlestage/src/components/tabs/trigger.rs
+++ b/singlestage/src/components/tabs/trigger.rs
@@ -1,4 +1,5 @@
 use super::TabsContext;
+use crate::Reactive;
 use leptos::prelude::*;
 
 /// The button that activates its associated content.
@@ -23,7 +24,7 @@ pub fn TabsTrigger(
     commandfor: MaybeProp<String>,
     /// Toggle whether or not the input is disabled.
     #[prop(optional, into)]
-    disabled: MaybeProp<bool>,
+    disabled: Reactive<bool>,
     /// Associate this element with a form element that may not be its parent by its `id`.
     #[prop(optional, into)]
     form: MaybeProp<String>,
diff --git a/singlestage/src/components/textarea/mod.rs b/singlestage/src/components/textarea/mod.rs
index 56036896..f827b4d4 100644
--- a/singlestage/src/components/textarea/mod.rs
+++ b/singlestage/src/components/textarea/mod.rs
@@ -12,10 +12,10 @@ pub fn Textarea(
     default: MaybeProp<String>,
     /// Toggle whether or not the input is disabled.
     #[prop(optional, into)]
-    disabled: MaybeProp<bool>,
+    disabled: Reactive<bool>,
     /// Toggle invalid appearance.
     #[prop(optional, into)]
-    invalid: MaybeProp<bool>,
+    invalid: Reactive<bool>,
     /// The reactive value signal of this input. Also sets initial `default` value, but doesn't
     /// update it.
     #[prop(optional, into)]
@@ -198,10 +198,8 @@ pub fn Textarea(
     });
 
     Effect::new(move || {
-        if let Some(textarea) = textarea_ref.get_untracked()
-            && let Some(disabled) = disabled.get()
-        {
-            textarea.set_disabled(disabled)
+        if let Some(textarea) = textarea_ref.get_untracked() {
+            textarea.set_disabled(disabled.get())
         }
     });
 
@@ -265,7 +263,7 @@ pub fn Textarea(
             }
             aria-invalid=move || {
                 match invalid.get() {
-                    Some(true) => Some("true"),
+                    true => Some("true"),
                     _ => None,
                 }
             }
diff --git a/singlestage/src/components/theme_provider/mod.rs b/singlestage/src/components/theme_provider/mod.rs
index f46a81f2..fec8ec52 100644
--- a/singlestage/src/components/theme_provider/mod.rs
+++ b/singlestage/src/components/theme_provider/mod.rs
@@ -55,6 +55,13 @@ static DARK_COMMON: &str = r#"
 // TODO: This code is dead and here for future reference
 static _DARK_OVERRIDES_TW: &str = r#"
 @layer components {
+  .singlestage-dropdown-menu-item-destructive {
+    > button {
+      @apply focus:!bg-destructive/20
+      hover:!bg-destructive/20
+    }
+  }
+
   .singlestage-input-group {
     @apply dark:bg-input/30;
 
@@ -97,7 +104,7 @@ static _DARK_OVERRIDES_TW: &str = r#"
     hover:bg-input/50;
   }
 
-  .singlestage-input[type="radio"] {
+    .singlestage-radio:not(.singlestage-radio-item) {
     @apply aria-invalid:ring-destructive/40
     bg-input/30;
   }
@@ -120,7 +127,7 @@ static _DARK_OVERRIDES_TW: &str = r#"
     aria-invalid:ring-destructive/40;
   }
 
-  .singlestage-input[type="checkbox"]:not([role="switch"]) {
+  .singlestage-checkbox:not(.singlestage-checkbox-item) {
     @apply aria-invalid:ring-destructive/40
     bg-input/30
     checked:bg-primary;
@@ -139,7 +146,7 @@ static _DARK_OVERRIDES_TW: &str = r#"
     }
   }
 
-  .singlestage-input[type="checkbox"][role="switch"] {
+  .singlestage-checkbox:not(.singlestage-checkbox-item) {
     @apply before:bg-foreground
     bg-input/80
     checked:before:bg-primary-foreground
@@ -196,6 +203,19 @@ static _DARK_OVERRIDES_TW: &str = r#"
 }"#;
 
 static DARK_OVERRIDES: &str = r#"@layer components {
+  .singlestage-dropdown-menu-item-destructive {
+    > button {
+      &:hover {
+        @media (hover: hover) {
+          background-color: color-mix(in oklab, oklch(0.704 0.191 22.216) 20%, transparent)!important;
+        }
+      }
+      &:focus {
+        background-color: color-mix(in oklab, oklch(0.704 0.191 22.216) 20%, transparent)!important;
+      }
+    }
+  }
+
   .singlestage-input-group {
     @supports (color: color-mix(in lab, red, red)) {
       background-color: color-mix(in oklab, var(--input) 30%, transparent);
@@ -247,8 +267,8 @@ static DARK_OVERRIDES: &str = r#"@layer components {
   }
 
   .singlestage-btn-primary {
-    .singlestage-input[type="checkbox"],
-    .singlestage-input[type="radio"] {
+    .singlestage-checkbox:not(.singlestage-checkbox-item),
+    .singlestage-radio:not(.singlestage-radio-item) {
       @supports (color: color-mix(in lab, red, red)) {
         border-color: color-mix(in oklab, var(--primary-foreground) 30%, transparent) !important;
       }
@@ -295,7 +315,7 @@ static DARK_OVERRIDES: &str = r#"@layer components {
       }
     }
   }
-  .singlestage-input[type="radio"] {
+    .singlestage-radio:not(.singlestage-radio-item) {
     background-color: var(--input);
     @supports (color: color-mix(in lab, red, red)) {
       background-color: color-mix(in oklab, var(--input) 30%, transparent);
@@ -340,7 +360,7 @@ static DARK_OVERRIDES: &str = r#"@layer components {
       }
     }
   }
-  .singlestage-input[type="checkbox"]:not([role="switch"]) {
+  .singlestage-checkbox:not(.singlestage-checkbox-item) {
     background-color: var(--input);
     @supports (color: color-mix(in lab, red, red)) {
       background-color: color-mix(in oklab, var(--input) 30%, transparent);
@@ -378,7 +398,7 @@ static DARK_OVERRIDES: &str = r#"@layer components {
       }
     }
   }
-  .singlestage-input[type="checkbox"][role="switch"] {
+  .singlestage-checkbox:not(.singlestage-checkbox-item) {
     background-color: var(--input);
     @supports (color: color-mix(in lab, red, red)) {
       background-color: color-mix(in oklab, var(--input) 80%, transparent);
diff --git a/singlestage/src/components/toggle/mod.rs b/singlestage/src/components/toggle/mod.rs
index 18a56287..50efcc63 100644
--- a/singlestage/src/components/toggle/mod.rs
+++ b/singlestage/src/components/toggle/mod.rs
@@ -33,7 +33,7 @@ pub fn Toggle(
     commandfor: MaybeProp<String>,
     /// Toggle whether or not the input is disabled.
     #[prop(optional, into)]
-    disabled: MaybeProp<bool>,
+    disabled: Reactive<bool>,
     /// Associate this element with a form element that may not be its parent by its `id`.
     #[prop(optional, into)]
     form: MaybeProp<String>,