Save the Dogs Design System — Surfaces

Temporary

Transient surfaces that appear on top of the page in response to an action and dismiss again — sheets, action lists, a floating speed-dial, and a quick peek. Each is a thin composition over the <Surface> primitive and/or a DS overlay, so focus-trapping, Esc / backdrop dismissal, anchoring and theme all come from one place. Flip the theme in the top bar to confirm every surface tracks it.

BottomSheet: A sheet docked to the bottom edge with a grabber handle that snaps to its content height (caps at 85vh, then scrolls). Keeps the Drawer's Dialog for focus-trap / Esc / backdrop and composes the panel as a Surface (modal elevation, rounded top).
ActionSheet: An iOS-style bottom action list — a Surface card of choices (one can be prominent, one destructive) with a separated Cancel card below. Built on the same Dialog overlay; each action fires then auto-dismisses.
FabMenu: The @phauna/ds FAB that expands into a small stacked speed-dial of actions, each with a Surface label pill. A roving-tabindex menu (ArrowUp/Down, Home/End, Esc) that closes on outside press and returns focus to the FAB.
DropdownMenu: An anchored action list (the kebab / row-actions / context menu) — a real role=menu with roving-tabindex menuitems (↑/↓/Home/End/Enter/Space/Esc), focus trap + return-to-trigger, outside-click/Esc close — composed over the same Popover overlay as Flyout. Items are declarative ({label, icon?, onSelect? | href?, destructive?, disabled?, visible?}); on mobile it degrades to an ActionSheet from the same list. Ships with KebabButton + a RowActionsMenu preset.
PeekPreview: A quick preview card revealed by press-and-hold (touch) or hover (mouse) via the Popover overlay — anchoring, Esc / outside-press dismissal and keyboard toggle come from the Popover; PeekPreview drives open state from pointer intent and lays out the preview.

BottomSheet

A bottom-docked sheet for a secondary flow on small screens — a filter panel, a quick form, a set of details. The grabber signals draggable intent; the panel snaps to its content and scrolls once it hits 85vh.

BottomSheet (controlled) — grabber + title/description + scrollable body + footer; snaps to content, caps at 85vh

ActionSheet

An iOS-style list of contextual actions docked to the bottom. The action card and the Cancel card are visually separate; destructive actions read in the bad ink and a primary action can be made prominent.

Last action: —

ActionSheet (controlled) — title + action rows (one prominent, one destructive) + separated Cancel card

A floating action button that expands a small speed-dial of related actions. Open it and arrow through the stack — it's a roving-tabindex menu that closes on Esc / outside press and restores focus to the FAB.

In real use you'd wrap FabMenu in a fixed bottom-6 right-6 shell — here it anchors itself inside the frame.

Last action: —

FabMenu — the @phauna/ds FAB expands a roving-tabindex speed-dial stack (ArrowUp/Down, Home/End, Esc); anchored bottom-right of the frame

An anchored action list — the kebab / row-actions / context menu. Open it and arrow through the items: it's a real role=menu with roving-tabindex (↑/↓/Home/End/Enter/Space), traps focus while open, returns focus to the trigger on Esc/select, and dismisses on outside-click. onSelect items render a button, href items a styled link. On mobile it degrades to an ActionSheet from the same item list.

Last action: —

DropdownMenu (via RowActionsMenu) — kebab opens a role=menu with roving-tabindex (↑/↓/Home/End/Enter/Space/Esc), focus trap + return-to-trigger, outside-click/Esc close; href item + disabled item + destructive item; degrades to ActionSheet on mobile

PeekPreview

A quick preview you reveal without navigating — hover the chip with a mouse, or press-and-hold on touch. Keyboard users focus it and toggle with Enter/Space; Esc closes.

Assigned to@jane— peek for details.

PeekPreview — hover (mouse) or press-and-hold (touch) the chip to peek; Enter/Space toggles, Esc closes