adoyle0 · adoyle0 · Jan 30, 2026 · Jan 30, 2026 · Jan 30, 2026 · Jan 30, 2026
diff --git a/Cargo.lock b/Cargo.lock
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,10 +148,66 @@ 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."
 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
@@ -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
@@ -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
@@ -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>
+    }
+}