@sableui/react 0.2.0 → 0.3.1

package/llms/components/sparkline.md

@@ -0,0 +1,80 @@
+# Sparkline
+
+**Status:** beta
+
+A word-sized trend with no axes — a line, a line over a soft fill, or columns — sized by its container, for stat cards, table cells and sentences. Draws on as it scrolls into view.
+
+**Keywords:** sparkline, trend, mini chart, inline chart, micro chart, kpi, stat
+
+## Usage
+
+Use Sparkline next to a number to show where it has been — a KPI's last 30 days in a stat card, a row's trend in a table. It has no axes, tooltip or values to read off; when the reader needs those, use AreaChart or LineChart.
+
+### Best practices
+
+- Do: Pair it with the current value and its change in text; the sparkline shows only the shape.
+- Do: Give it a label that names the measure and the period — the spoken summary adds the range and latest value.
+- Don't: Put two sparklines on one shared axis to compare them — each scales to its own data; use LineChart.
+- Don't: Use it as the only place a number appears; a shape without a value cannot be read off.
+
+## Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| data | number[] | — | The values, oldest first. |
+| label | string | — | What the line tracks ("Revenue, last 30 days"). The spoken summary adds the first and last values, low and high. |
+| variant | "line" \| "area" \| "bar" | "line" | A line, a line over a soft fill, or columns. |
+| tone | "edition" \| "collectible" \| "standard" \| "info" \| "warning" \| "primary" \| "neutral" \| "success" \| "destructive" | "primary" | Colour by role. |
+| className | string | "h-8 w-24" | Sizes it; the drawing stretches to fit. |
+| animate | boolean | true | Draw on (or rise) when it scrolls into view. |
+| locale | string | runtime locale | BCP 47 locale for default number and date formatting. |
+
+## Variants
+
+- **variant**: line, area, bar
+
+## Tokens used
+
+`primary`, `tone-edition`, `tone-collectible`, `tone-standard`, `tone-info`, `tone-warning`, `muted-foreground`, `success`, `destructive`
+
+## Motion
+
+- **arrival** · Line / bars · _custom (outside the recipe layer)_ — Once on screen the line draws on (or the bars rise, in sequence). On the motion tokens; reduced motion shows the finished drawing.
+- **response** · Sparkline · _no motion_ — Not interactive: it has no tooltip or focus.
+- **transition** · Sparkline · _no motion_ — New data redraws in place; a word-sized chart animating on every update would distract from the number beside it.
+- **activity** · Sparkline · _no motion_ — No indeterminate state.
+
+## Accessibility
+
+- Rendered role=img with an aria-label built from `label` and the data: "Revenue, last 30 days: from 120 to 184, low 96, high 190".
+- It is not focusable and has no tooltip, so the number it accompanies must be in text beside it.
+
+## Related
+
+- Components: AreaChart, LineChart, Card, Table
+
+## Examples
+
+### In a stat card
+
+```tsx
+import { Card, CardAction, CardDescription, CardHeader, CardTitle, Sparkline } from "@sableui/react"
+
+<Card>
+	<CardHeader>
+		<CardDescription>Revenue</CardDescription>
+		<CardTitle className="text-mono-xl">$18,240</CardTitle>
+		<CardAction>
+			<Sparkline label="Revenue, last 12 weeks" data={[12, 14, 13, 17, 16, 19, 18, 21, 20, 24, 23, 26]} variant="area" tone="success" />
+		</CardAction>
+	</CardHeader>
+</Card>
+```
+
+### Columns in a table cell
+
+```tsx
+import { Sparkline } from "@sableui/react"
+
+<Sparkline label="Daily signups, last 14 days" data={[4, 6, 3, 8, 7, 9, 5, 6, 10, 8, 7, 11, 9, 12]} variant="bar" className="h-6 w-20" />
+```

package/llms/components/table.md

@@ -17,7 +17,7 @@ Use Table for structured data with consistent columns and rows. Use DataTable wh
 - Do: Use the built-in horizontal frame for overflow instead of squeezing columns until content becomes unreadable.
 - Do: Put a table in a card with `<CardContent flush>`. The first and last columns then take the card's own padding (`--table-edge-px`), so they line up with the CardHeader at any density. Never hand-set `pl-6`/`pr-6` on edge cells.
 - Don't: Use Table for heterogeneous items with no stable columns. Use Card, Entity, or a list composition instead.
-- Don't: Put every possible action in every row. Use one primary row action, a DotsMenu, or row detail navigation.
+- Don't: Put every possible action in every row. Use one primary row action, an OverflowMenu, or row detail navigation.
 
 ### Anatomy
 

package/llms/patterns/auth-page.md

@@ -99,10 +99,10 @@ export function AuthPage() {
 						<Separator label="or" />
 
 						<Stack gap={1.5}>
-							<Button variant="outline" size="cta" className="w-full">
+							<Button variant="outline" size="cta" className="w-full" iconStart={<Icon name="key" />}>
 								Sign in with a passkey
 							</Button>
-							<Button variant="outline" size="cta" className="w-full">
+							<Button variant="outline" size="cta" className="w-full" iconStart={<Icon name="wallet" />}>
 								Connect a wallet
 							</Button>
 						</Stack>

package/llms/patterns/dashboard-page.md

@@ -13,7 +13,7 @@ App-shell creator dashboard: a branded Sidebar with an account footer (AppHeader
 - The table runs flush to the card edges with `<CardContent flush>`, which hands the card's padding to the table (`--table-edge-px`), so the first and last columns line up with the CardHeader at any card density — never hand-set pl-6/pr-6. Numeric columns align end in mono; Table scrolls horizontally inside the card on narrow screens.
 - Sold / supply is a `Meter` (how full a known range is), not `Progress` (task progress). Status is `Badge appearance="plain" dot`, with the app's own states mapped to tones once at the top of the file.
 - Lists are Entity rows in CardList, inset to the card padding and divided by hairlines — never CardContent with hand-tuned px. A card that shares a grid row with a taller one becomes `flex flex-col` and pins its CardFooter with `mt-auto`.
-- Brand and account live in the Sidebar: SidebarHeader holds the mark + wordmark, SidebarFooter holds the signed-in Entity with a DotsMenu. The footer rebinds `--foreground` to `--sidebar-foreground`, because Entity's title and the ghost trigger ink with page tokens and a theme may paint the rail dark on a light page; it keeps to a title line, since there is no sidebar-muted ink for a subtitle.
+- Brand and account live in the Sidebar: SidebarHeader holds the mark + wordmark, SidebarFooter holds the signed-in Entity with an OverflowMenu. Sidebar rebinds the page ink tokens to its own, so the Entity and OverflowMenu read correctly even when a theme paints the rail dark on a light page.
 - The page has exactly one heading-1 (PageHeader); card titles are Title tier, not headings.
 - Chrome (Sidebar) is outside the content grid; the Page region caps only content.
 - Sidebar hides below lg, so the shell's header carries an AppHeader (brand + account) and its footer a BottomNav with the same destinations — never strand mobile users without navigation.
@@ -29,7 +29,7 @@ App-shell creator dashboard: a branded Sidebar with an account footer (AppHeader
 ## Source
 
 ```tsx
-import { AppHeader, AppShell, Avatar, Badge, BottomNav, BottomNavItem, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardList, CardTitle, DataTable, DotsMenu, Entity, Grid, Icon, MenuItem, MenuSeparator, Meter, NotificationBadge, Page, PageHeader, RelativeTime, Row, Sidebar, SidebarFooter, SidebarHeader, SidebarItem, SidebarNav, Stack } from "@sableui/react"
+import { AppHeader, AppShell, Avatar, Badge, BottomNav, BottomNavItem, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardList, CardTitle, DataTable, Entity, Grid, Icon, MenuItem, MenuSeparator, Meter, NotificationBadge, OverflowMenu, Page, PageHeader, RelativeTime, Row, Sidebar, SidebarFooter, SidebarHeader, SidebarItem, SidebarNav, Stack } from "@sableui/react"
 
 // Edition status → Badge tone. Sable has no status vocabulary of its own;
 // an app maps ITS states onto tones once, here, and every badge follows.
@@ -143,20 +143,19 @@ export function DashboardPage() {
 						/>
 						<SidebarItem icon={<Icon name="gear" />} label="Settings" render={<a href="/settings" />} />
 					</SidebarNav>
-					{/* Entity and DotsMenu ink with page tokens; a theme can paint the rail
-					    dark on a light page, so this subtree reads the rail's ink instead. */}
-					<SidebarFooter className="[--foreground:var(--sidebar-foreground)]">
+					<SidebarFooter>
 						<Entity
 							className="[--entity-py:0]"
 							leading={<Avatar size="sm" fallback="AL" alt="" />}
 							title="Ada Lovelace"
+							subtitle="@ada"
 							action={
-								<DotsMenu label="Account" size="icon-sm">
+								<OverflowMenu label="Account" size="icon-sm">
 									<MenuItem render={<a href="/@ada" />}>View profile</MenuItem>
 									<MenuItem render={<a href="/settings" />}>Settings</MenuItem>
 									<MenuSeparator />
 									<MenuItem>Sign out</MenuItem>
-								</DotsMenu>
+								</OverflowMenu>
 							}
 						/>
 					</SidebarFooter>

package/llms/patterns/feed-page.md

@@ -9,7 +9,7 @@ Social reading feed with a side rail: a feed-width main column (composer, For yo
 - The main column is capped at `--region-feed` (640px) inside a `wide` page, so posts keep a reading measure while the rail fills the desktop width. The rail is a fixed `w-80` aside, `sticky` at lg and `hidden` below it — its content is supplementary, so nothing is lost on mobile.
 - Feed scope is `Tabs` (underline, stretched to the column with `flex`): peer views of the same feed. The composer sits above them because posting applies to both.
 - The composer is a Card holding `Textarea autoResize` plus ghost icon Buttons and a secondary `Post` — not ChatComposer, which submits on Enter and is for conversations.
-- Each post is a Card: an Entity byline in a CardList (with a DotsMenu for post actions), body copy, then media in an AspectBox at the asset's own ratio, inset with `rounded-concentric-lg/6` so its corners follow the card's in every theme.
+- Each post is a Card: an Entity byline in a CardList (with an OverflowMenu for post actions), body copy, then media in an AspectBox at the asset's own ratio, inset with `rounded-concentric-lg/6` so its corners follow the card's in every theme.
 - An edition drop adds a `Badge appearance="overlay"` on the artwork, title and price, the one primary Button on the page (`Collect`), and a `Meter` for supply — collected against a known maximum is a level, not task progress.
 - Actions are ghost sm Buttons (icon + count) in a Row pulled out by the button's own padding (`-ms-3`) so the first icon sits on the text edge.
 - Loading the next page shows a Skeleton post in the shape the post will land in, above the explicit load-more Button in its `loading` state — predictable for keyboard and AT users, unlike infinite scroll.
@@ -17,7 +17,7 @@ Social reading feed with a side rail: a feed-width main column (composer, For yo
 ## Accessibility
 
 - Each post is an <article>, so AT users can jump between posts; the rail is a labelled <aside> landmark.
-- Rail card titles carry role="heading" aria-level=2 under the page's one h1.
+- Rail card titles render as h2 (CardTitle `render={<h2 />}`) under the page's one h1.
 - Icon-only buttons and every Follow / Remind button carry aria-labels naming their target; counts stay in the accessible name.
 - The supply Meter is role=meter with a getAriaValueText reading ("62 of 100 collected").
 - The Skeleton card is aria-busy; the loading Button keeps its label ("Loading posts").
@@ -25,7 +25,7 @@ Social reading feed with a side rail: a feed-width main column (composer, For yo
 ## Source
 
 ```tsx
-import { AspectBox, Avatar, Badge, Button, Card, CardContent, CardHeader, CardList, CardTitle, DotsMenu, Entity, Icon, MenuItem, MenuSeparator, Meter, MeterLabel, MeterTrack, MeterValue, Page, PageHeader, Row, Skeleton, Stack, Tabs, TabsList, TabsPanel, TabsTrigger, Textarea } from "@sableui/react"
+import { AspectBox, Avatar, Badge, Button, Card, CardContent, CardHeader, CardList, CardTitle, Entity, Icon, MenuItem, MenuSeparator, Meter, MeterLabel, MeterTrack, MeterValue, OverflowMenu, Page, PageHeader, Row, Skeleton, Stack, Tabs, TabsList, TabsPanel, TabsTrigger, Textarea } from "@sableui/react"
 
 type Post = {
 	id: string
@@ -99,12 +99,12 @@ const renderPost = (post: Post) => (
 					title={post.author}
 					subtitle={`${post.handle} · ${post.time}`}
 					action={
-						<DotsMenu label={`Post options for ${post.author}`} size="icon-sm">
+						<OverflowMenu label={`Post options for ${post.author}`} size="icon-sm">
 							<MenuItem>Copy link</MenuItem>
 							<MenuItem>Mute {post.handle}</MenuItem>
 							<MenuSeparator />
 							<MenuItem variant="destructive">Report post</MenuItem>
-						</DotsMenu>
+						</OverflowMenu>
 					}
 				/>
 			</CardList>
@@ -237,7 +237,7 @@ export function FeedPage() {
 					<Stack gap={3}>
 						<Card>
 							<CardHeader>
-								<CardTitle role="heading" aria-level={2}>Who to follow</CardTitle>
+								<CardTitle render={<h2 />}>Who to follow</CardTitle>
 							</CardHeader>
 							<CardList>
 								{suggestions.map((person) => (
@@ -257,7 +257,7 @@ export function FeedPage() {
 						</Card>
 						<Card>
 							<CardHeader>
-								<CardTitle role="heading" aria-level={2}>Upcoming drops</CardTitle>
+								<CardTitle render={<h2 />}>Upcoming drops</CardTitle>
 							</CardHeader>
 							<CardList>
 								{upcoming.map((drop) => (

package/llms/patterns/list-detail-page.md

@@ -7,7 +7,7 @@ Searchable list beside the selected record's detail: interactive Entity rows in
 ## Notes
 
 - Region cap is `wide`; Columns 12 → Col 5 (list) + Col 7 (detail). Below lg the list and detail share one column as a drill-in: selecting a row shows the detail with an `All members` back button (lg:hidden), and the back button returns to the list. The panes swap with `max-lg:hidden`, so desktop always shows both.
-- Rows are interactive Entity inside one Card + CardList. Selection is `data-selected` on the row painted by `sable-surface-interactive`; `sable-surface` on the list card makes that step 12% ink off the card, so a selected row stays distinct from its muted avatar.
+- Rows are interactive Entity inside one Card + CardList. Selection is Entity `selected`; `sable-surface` on the list card makes its selected step 12% ink off the card, so a selected row stays distinct from its muted avatar.
 - Search filters the list in place (name, email, role). No matches swap the CardList for an EmptyState with a Clear search action; the selected detail stays open.
 - A pending invite lives in the same list: a mail glyph in the Avatar, an `Invited` Badge, and an invite-specific detail (role on joining, sent, expires, invited by; Resend and Revoke actions).
 - The role Select edits the record in place; its Field description states what the role can do. The owner's role is read-only and the owner has no remove action.
@@ -17,14 +17,14 @@ Searchable list beside the selected record's detail: interactive Entity rows in
 
 ## Accessibility
 
-- Each row is a real button (Entity `interactive` + `onSelect`): Tab moves through rows, Enter/Space selects. The selected row carries visually hidden `(selected)` text in its name; list avatars are aria-hidden so initials are not read before the name.
+- Each row is a real button (Entity `interactive` + `onSelect`): Tab moves through rows, Enter/Space selects. The selected row is Entity `selected`, which paints the selected fill and sets aria-current; list avatars are aria-hidden so initials are not read before the name.
 - The detail pane is a labelled region (`Member details`) whose title is a level-2 heading.
 - On a phone, drilling in moves focus to the back button; going back returns focus to the row that was open. After a remove, focus lands on the newly selected row; after Clear search, on the search field.
 
 ## Source
 
 ```tsx
-import { useState, useEffect } from "react"
+import { useState, useEffect, useRef } from "react"
 import { Avatar, Badge, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardList, CardTitle, Col, Columns, DestructiveActionModal, EmptyState, Entity, Field, Icon, Page, PageHeader, Row, SearchInput, Select, SelectContent, SelectItem, SelectTrigger, Stack, StatusDot } from "@sableui/react"
 
 type Role = "owner" | "admin" | "editor" | "viewer"
@@ -208,11 +208,8 @@ export function ListDetailPage() {
 											<Entity
 												key={m.id}
 												data-member-id={m.id}
-												data-selected={isSelected ? "" : undefined}
-												// No selected variant on Entity yet: the relative-surface recipe paints
-												// data-selected one step off the card.
-												className="sable-surface-interactive"
 												interactive
+												selected={isSelected}
 												onSelect={() => select(m.id)}
 												leading={
 													<Avatar
@@ -222,12 +219,7 @@ export function ListDetailPage() {
 														aria-hidden
 													/>
 												}
-												title={
-													<>
-														{m.name}
-														{isSelected ? <span className="sr-only"> (selected)</span> : null}
-													</>
-												}
+												title={m.name}
 												subtitle={
 													m.pending
 														? `${roleLabel[m.role]} · invite sent ${m.sent?.toLowerCase()}`
@@ -289,7 +281,7 @@ export function ListDetailPage() {
 												alt={selected.pending ? "Pending invite" : selected.name}
 											/>
 											<Stack gap={0} className="min-w-0">
-												<CardTitle role="heading" aria-level={2} className="truncate">
+												<CardTitle render={<h2 />} className="truncate">
 													{selected.name}
 												</CardTitle>
 												<CardDescription className="truncate">
@@ -378,7 +370,7 @@ export function ListDetailPage() {
 								{selected.activity.length > 0 ? (
 									<Card>
 										<CardHeader>
-											<CardTitle role="heading" aria-level={3}>
+											<CardTitle render={<h3 />}>
 												Recent activity
 											</CardTitle>
 										</CardHeader>

package/llms/patterns/settings-page.md

@@ -28,7 +28,7 @@ Account settings inside the app shell: a sticky SideNav section rail beside a co
 
 ```tsx
 import { useState } from "react"
-import { AppHeader, AppShell, Avatar, BottomNav, BottomNavItem, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardList, CardTitle, Col, Columns, DestructiveActionModal, DotsMenu, Entity, Field, Form, Grid, Icon, Input, MenuItem, MenuSeparator, NotificationBadge, Page, PageHeader, Row, Select, SelectContent, SelectItem, SelectTrigger, Sidebar, SidebarFooter, SidebarHeader, SidebarItem, SidebarNav, SideNav, SideNavItem, Stack, Switch, Textarea } from "@sableui/react"
+import { AppHeader, AppShell, Avatar, BottomNav, BottomNavItem, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardList, CardTitle, Col, Columns, DestructiveActionModal, Entity, Field, Form, Grid, Icon, Input, MenuItem, MenuSeparator, NotificationBadge, OverflowMenu, Page, PageHeader, Row, Select, SelectContent, SelectItem, SelectTrigger, Sidebar, SidebarFooter, SidebarHeader, SidebarItem, SidebarNav, SideNav, SideNavItem, Stack, Switch, Textarea } from "@sableui/react"
 
 const sections = [
 	{ id: "profile", label: "Profile" },
@@ -107,20 +107,19 @@ export function SettingsPage() {
 						/>
 						<SidebarItem icon={<Icon name="gear" />} label="Settings" active render={<a href="/settings" />} />
 					</SidebarNav>
-					{/* Entity and DotsMenu ink with page tokens; a theme can paint the rail
-					    dark on a light page, so this subtree reads the rail's ink instead. */}
-					<SidebarFooter className="[--foreground:var(--sidebar-foreground)]">
+					<SidebarFooter>
 						<Entity
 							className="[--entity-py:0]"
 							leading={<Avatar size="sm" fallback="AL" alt="" />}
 							title="Ada Lovelace"
+							subtitle="@ada"
 							action={
-								<DotsMenu label="Account" size="icon-sm">
+								<OverflowMenu label="Account" size="icon-sm">
 									<MenuItem render={<a href="/@ada" />}>View profile</MenuItem>
 									<MenuItem render={<a href="/settings" />}>Settings</MenuItem>
 									<MenuSeparator />
 									<MenuItem>Sign out</MenuItem>
-								</DotsMenu>
+								</OverflowMenu>
 							}
 						/>
 					</SidebarFooter>
@@ -152,9 +151,7 @@ export function SettingsPage() {
 						<Stack gap={3}>
 							<Card id="profile" className="scroll-mt-6">
 								<CardHeader>
-									<CardTitle>
-										<h2>Profile</h2>
-									</CardTitle>
+									<CardTitle render={<h2 />}>Profile</CardTitle>
 									<CardDescription>How collectors see you on Atelier.</CardDescription>
 								</CardHeader>
 								{/* The one explicit save on the page: profile text is drafted, then
@@ -216,9 +213,7 @@ export function SettingsPage() {
 
 							<Card id="notifications" className="scroll-mt-6">
 								<CardHeader>
-									<CardTitle>
-										<h2>Notifications</h2>
-									</CardTitle>
+									<CardTitle render={<h2 />}>Notifications</CardTitle>
 									<CardDescription>
 										Email updates about your editions. Changes save automatically.
 									</CardDescription>
@@ -243,9 +238,7 @@ export function SettingsPage() {
 
 							<Card id="payouts" className="scroll-mt-6">
 								<CardHeader>
-									<CardTitle>
-										<h2>Payouts</h2>
-									</CardTitle>
+									<CardTitle render={<h2 />}>Payouts</CardTitle>
 									<CardDescription>Paid in USD every Friday to Chase checking ••4821.</CardDescription>
 									<CardAction>
 										<Button variant="outline" size="sm" render={<a href="/settings/payouts" />}>
@@ -268,9 +261,7 @@ export function SettingsPage() {
 
 							<Card id="account" className="scroll-mt-6">
 								<CardHeader>
-									<CardTitle>
-										<h2>Account</h2>
-									</CardTitle>
+									<CardTitle render={<h2 />}>Account</CardTitle>
 									<CardDescription>Sign-in details and your data.</CardDescription>
 								</CardHeader>
 								<CardList>
@@ -299,9 +290,7 @@ export function SettingsPage() {
 
 							<Card>
 								<CardHeader>
-									<CardTitle>
-										<h2>Delete account</h2>
-									</CardTitle>
+									<CardTitle render={<h2 />}>Delete account</CardTitle>
 									<CardDescription>
 										Permanently remove your profile, editions, and sales history. Collectors keep
 										the editions they own.

package/llms/tasks/building-an-ios-prototype.md

@@ -74,7 +74,10 @@ Entity rows in a Card) or `redesign` (desktop workspace tools).
    Keep the app's `IconProvider`.
 4. Frame it on a host page with `PhoneFrame` from `@sableui/react/ios/preview`
    and `@sableui/react/ios/frame.css` (Sable's Phone around an iframe at
-   402×874, scaled as a whole device). To follow a host's live look, call
+   402×874, scaled as a whole device). `fit="contain"` with a height in
+   `className` keeps the whole device on screen. Shown on a real phone with no
+   frame, pass `systemChrome={false}` to `NativeApp`: the device draws its own
+   status bar and home indicator, and the safe areas come from it. To follow a host's live look, call
    `useIosPreviewBridge(frameRef, { mode })` on the host and
    `useIosPreviewTheme()` in the prototype.
 5. Verify light and dark, keyboard focus, reduced motion, back and edge swipe,

package/llms/tasks/choosing-a-component.md

@@ -28,8 +28,8 @@ The question to ask is always **what the user is doing**, not what it looks like
 | The user is… | Use | Not |
 |---|---|---|
 | Choosing one action from a list under a button | `Menu` | `Select` (that picks a *value*) |
-| Reaching secondary actions for a row or card | `DotsMenu` | a bare `Menu` with a hand-made icon trigger |
-| Acting on the thing under the pointer (right-click or long press) | `ContextMenu`, always mirrored in a visible `DotsMenu` | `ContextMenu` alone: it is undiscoverable |
+| Reaching secondary actions for a row or card | `OverflowMenu` | a bare `Menu` with a hand-made icon trigger |
+| Acting on the thing under the pointer (right-click or long press) | `ContextMenu`, always mirrored in a visible `OverflowMenu` | `ContextMenu` alone: it is undiscoverable |
 | Changing a few settings that each show their current value | `SettingsMenu` | a `Menu` of toggles that hides each current state |
 | Running a main action that has close variations | a `Button` beside an icon `Button` that opens a `Menu` | a hand-fused split control |