Button
Canonical action and button-like navigation primitive.Finite prop projection
Action hierarchy
Destructive semantic tone
Size and icon ownership
Loading and skeleton parity
Click and focus contract
Divider
Shared horizontal or vertical separator with optional label ownership.Unlabeled separation
Neutral labels across surfaces
Dropdown
Default action-menu triggers use the regular registry ellipsis at 15px without hover scaling. Consumers may supply an explicit triggerContent for a contextual treatment. Portal-backed menus and selection. Bare icon triggers, inset rounded rows and scroll-owned padding. dividerBefore/dividerAfter accept full for major block boundaries or inset (also true) for action groups. Separators are independent Dividers, never borders on interactive rows. Geometry: 12px outer radius, 7px row radius, 4px list padding, 34px action rows and 2px row gaps. Opt-in compact density uses 28px action and control rows. Root-level control entries share list chrome and separators, use dialog/group semantics with native Tab navigation, and keep focused controls open on pointer leave. Action-only menus retain their collection navigation. Dividers have 4px clearance on each side and a dropdown-only foreground tint at 10% opacity.Contextual destructive action
Menu ordering, selection, and dismissal
Menu factories, semantic ordering, and composition
Selectable listbox
Independently controlled panel
Recursive portal cascade focus and dismissal
Recursive pointer and disabled-branch ownership
Field
Relationship owner for labels, descriptions, required state, inline messages, and matching skeletons.Label, description, and error relationships
Use a name teammates will recognize.
A project name is required.
Success and label action
Available
Skeleton parity
InlineError
A recoverable operational error beside its affected action. The default inline variant follows text flow; the card variant bounds an action-level failure in page content or beside a composer using shared Card chrome. Both retain one alert announcement and controlled presence.InputFrame
Borderless input chrome with 9px corners, subtle fill and shadow, a 34px default height and a 28px xs toolbar size and a 24px xxs compact-row size. The muted variant uses a softer neutral fill without resting shadow; tone independently owns validation. Composer presentation uses 25px corners and the same fill and shadow. Owns focus treatment, static chrome reuse, and matching skeletons; callers own native control semantics.Sizes and adornments
Focus and error state
Disabled and skeleton parity
Static chrome reuse
Listbox
Accessible option-list owner for active, selected, disabled, semantic, and recursive behavior.Selection and semantic states
Keyboard selection
Pointer and keyboard ownership
Recursive keyboard navigation
Section
Page-section owner for outer spacing, inner width, safe hero sizing, and background media.Width, padding, and alignment
Decorative background semantics
Interactive background opt-in
Safe hero height
Semantic surface contexts
Full-bleed background with capped foreground
StatusMessage
Persistent context or an operational notice while surrounding content remains usable.Semantic contextual tones
Controlled presence and removal
Content following the owned presence gap.
Text
Canonical typography, semantic tone, and text-skeleton primitive.Shared type scale
Semantic tone and theme contrast
Polymorphism and skeleton
Surfaces
Page hierarchy with unboxed ContentSection groups, persistent Panel chrome, self-contained Cards, and temporary Floats.Content hierarchy
Elevation ladder
Structure and elevation
Panel layout and semantic accent
Structured Card slots
Card spacing topology
Behavior-free Float
Persistent shell chrome
Reusable Card heading