Components and application patterns
Guide index · Interaction · Layout · Terminal
These recipes are Oracle's component language. The linked topic pages own exact palette, geometry, type and state values. Application-owned content can vary without inventing a different visual language.
Each family lists its individual controls and reusable presentation components, with the contract each control honors across web, desktop, mobile, and terminal. Larger compositions are named separately so they never hide the controls within them.
Oracle's own design language is authoritative: graphite surfaces, chamfered frames, restrained gradients, dark blue buttons and tabs, cyan focus, violet navigation, and explicit semantic status.
Variants and states belong to their parent control unless they have different interaction contracts. Primary, secondary, danger, quiet, busy, and disabled buttons are not six separate components. A badge is informational; a filter chip is interactive. A select chooses a value, tabs choose a panel, and a menu invokes commands.
Buttons and text actions
Place persistent primary actions in the header's action section or a bottom action area, using the shared chamfered primary button and blue edge. A bottom action area supports thumb reach on tall touch screens and reserves space above safe-area and keyboard insets.
A standard button is at least 40px high, with 16px horizontal padding, an 8px cut, a 1px edge and a 16/24 control label. Use a 20px optional icon with an 8px gap. Primary and secondary buttons share the same dark blue control gradient; primary has the blue edge and weight 600, secondary an essential neutral edge and weight 500. Both remain as dark and translucent-looking as a selected tab.
Use one dominant primary action per local task. A group uses an 8px gap, with the primary at the trailing end in left-to-right layouts. Keep logical focus order. Full-width card actions are appropriate when the whole card presents one next step; do not give every activity row a full-width action.
Quiet actions use primary text at rest, a transparent face and no persistent frame. Navigation links use cyan and an underline in prose. Warning actions use the warning pair; danger actions use the danger pair rather than blue, and name the consequence. Disabled controls keep readable secondary labels and a visible reason nearby. Busy controls replace their label with operation-specific wording such as “Saving draft”, reserve width for both labels, and keep a reserved 20px indicator slot.
In a terminal, use [ Enter: open ] or a named shortcut, bold pale primary text in brackets on the containing background. Secondary actions use the essential edge color; focus recolors only the label cyan, preserving the value. A busy action keeps that bracketed label and reserves one cell for the terminal spinner: a single running-green quadrant block stepping clockwise (▘ ▝ ▗ ▖), the same role as the desktop and mobile four-segment spinner. Do not draw a mouse-style button around every hint.
Primary Secondary Quiet Danger Disabled Change the draft before saving. Busy Refresh Toggle
Controls in this family
| Control | Control contract |
|---|---|
| Button | Explicit action; primary, secondary, quiet, danger, disabled, and busy variants. Replace the label with operation-specific wording and preserve geometry while busy. |
| Icon button | Named compact actions such as Close, Clear, Copy, and Refresh, with a full target at the active density. |
| Link | Navigate to a resource or destination using link semantics, with external-link treatment where appropriate. |
| Toggle button | Persistent on/off command state, distinguishable from hover and focus. |
| Segmented control / content switcher | Joined square-profile, single-choice radio-style options. Arrow keys move and select immediately; a persistent check identifies the value. Reserve tabs for content navigation. |
| Toolbar | Named groups, predictable focus order, and narrow-width overflow. |
| Menu button | Reusable named command trigger outside the shell. |
| Menu / menu item | Command choices, shortcuts, disabled explanations, and keyboard traversal. Nested/checkable items extend the existing flat shell menus. |
| Overflow / context menu | Secondary row, card, or workspace commands, with a keyboard and visible-trigger path. |
| Split button | Frequent default action plus alternative commands from one control. |
| Command palette | Searchable workspace-wide commands and destinations. |
Single-choice segmented values use joined square profiles. Arrow keys select immediately; a check remains visible independently of focus. Filter chips reserve their check slot and retain the same resting face.
Tabs, menus and navigation
Tabs are attached panel selectors, not action buttons or filters. Use 40px minimum tab height, 16px horizontal padding, no external gaps, and a square profile with only a 10px top-right cutout. All other corners remain square; do not add the panel's hexagonal ornament. Tabs share the pane baseline. The selected tab has the control gradient and 3px blue top marker; inactive tabs have content material and secondary text. The selected bottom edge joins the content. Scroll the strip horizontally instead of wrapping it into multiple rows.
Tab focus and activation are separate as specified in interaction. Vertical navigation uses the muted violet navigation treatment, not the blue tab face. An app can have violet “Preferences” in its navigation and blue “Advanced” in a content tab strip; they identify different scopes.
Menu titles in the app bar are flat text with stable padding, not bright capsules. Menus are opaque chrome overlays, with an 8px internal inset, command rows with a minimum height of 40 / 32 / 28 / 48px for standard / dense / compact / touch density and a 1px essential edge. Keep 16px label text. Use the opaque neutral menu-row hover fill --menu-row-hover: #253247, preserving primary labels and existing glyph roles. Cyan belongs to focus; keep textual shortcut hints. Submenus must remain keyboard-reachable and stay within the viewport.
Terminal menus are explicit lists with a selected marker and shown activation keys. A selected tab keeps the containing background and uses a bold pale label with the square-profile endcap. Selection uses a persistent glyph on surface.content; focus recolors the label cyan without removing the glyph.
Tabs | Overview \ Activity
Menu > File
New window (Ctrl+N)
Controls in this family
| Control | Control contract |
|---|---|
| Tabs / tab / tab panel | Attached panel selection; separate focus from activation and scroll overflow instead of wrapping rows. |
| Navigation rail / navigation item | Destinations, selected state, labels, collapsed handling, and preserved context. |
| App bar / identity header | Stable application identity and top-level commands. |
| Breadcrumb trail | Hierarchical location and parent navigation, with accessible collapse when constrained. |
| Back control | Return to prior context with retained selection and reading position. |
| Pagination / load-more controls | Explicit refresh, append, restart, honest loaded counts, and availability reasons; numbered pages only when supported by the source. |
| Section navigation / anchor list | Jump within long pages without duplicating sticky headings or losing focus; scroll-section APIs alone do not supply this control. |
| Status bar | Persistent application/connection facts separate from record state. |
| Keyboard hint / shortcut bar | Discoverable applicable commands and active-pane hints. |
| Navigation drawer | Responsive destinations, distinguished from a generic side panel or sheet. |
| Bottom navigation bar | Replaces the desktop rail when portrait width cannot fit it beside readable content. Keep the same destinations and violet navigation role, with a persistent selection glyph and weight independent of focus. |
Cards, panels and headers
A card has the content gradient, 12px chamfer, 1px quiet frame and 16px insets. Include the subtle top-right hexagonal frame detail using the authoritative dimensions in shape: top-right frame embellishment. Use the recess by default and the popout alternate only with clearance. An optional cyan header accent is 48×4px at the top edge, 16px from the leading edge. Its heading begins at the invariant 16px top/leading inset; neither embellishment nor accent may cross the text.
A card's slots are header, body and optional footer. The header starts with the title and at most one optional trailing status chip; remaining chips, metadata, then any header actions follow below in that order on desktop, mobile and terminal, with 8px between related rows. The footer separates from the body with at least 16px space; add a quiet divider only when it clarifies grouping. A card is not automatically an activation control.
A panel uses the same visual vocabulary at a larger scale. Reuse its frame across header, body and footer rather than giving each slot another outline. Header/footer chrome is visually distinct from the reading body.
A terminal card has a one-cell chamfer border, one-column horizontal inset and one title row. Use fewer cards side by side; a list is preferable when cards would reduce readable line width.
Validation run
Inputs verified. Review the summary before submission.
Validation run
Inputs verified. Review the summary before submission.
🮣 Validation run ─────────────🮢 │ ✓ Ready Job 042 │ │ Inputs verified. │ 🮡─────────────────────────────🮠
Controls in this family
| Control | Control contract |
|---|---|
| Card | Heading, metadata/status, body, footer, and one frame; activation is an explicit additional behavior. |
| Panel | Coherent header/body/footer and deliberate scroll ownership. |
| Divider / separator | Quiet grouping, semantic where meaningful; distinct from an interactive resize handle. |
| Card grid | Adaptive cards with sensible reading order and minimum content width. |
Fields and editors
Fields use a persistent label above the control, 8px label gap and 4px hint/error gap. The face is flat input material, edge is essential neutral, corner radius is 4px and default minimum height is 40px. A textarea starts at 96px high and can grow or scroll in its own labeled region. Give a select the same field frame, with a stable trailing indicator slot.
Search has a 20px leading magnifier and sufficient leading padding (44px default); Clear is a separate named icon action with the active density minimum target: 40 / 32 / 28 / 48px for standard / dense / compact / touch. Search placeholders supplement a real label. Checkbox/radio inputs have 20px visual marks, 8px text gap and a full control target from the active density.
Guided and JSON editors share one task header and draft. JSON uses the code role, flat input material and no decorative grid. Keys can use cyan, strings violet, numbers/booleans amber, and punctuation primary text; the independent syntax system may reuse UI colors without inheriting their meanings and needs no dimmer or patterned substitutes. Syntax color is not validation status. Green “Valid object” is a separate explicit label.
Invalid JSON remains editable, with an associated error and last valid structured state retained. A revision conflict uses an amber notice above the editors, explains the retained draft and disables saving until explicitly resolved. Footer actions stay reachable while the editor scrolls. Unknown fields must not disappear merely because a guided form does not display them.
Terminal fields show label and current value in separate or clearly delimited cells. A focused edit region recolors its label cyan and shows the editing cursor, preserving the current value and selection glyph; valid/invalid status is textual. Do not use a focus prefix or cyan frame. A large advanced editor may be a separate mode rather than a squeezed second column.
"name": "north-gateway", "retries": 3
"name": "north-gateway", "retries": 3
Display name north-gateway (hint) Shown in activity lists. Notes Rotate credentials after cutover. Region us-west ▾ [x] Include logs (•) Safe mode Config "name": "north-gateway", "retries": 3 Search loaded rows > Filter… Auto-refresh Invalid JSON — Line 4: expected comma.
Controls in this family
| Control | Control contract |
|---|---|
| Field wrapper | Persistent label, required marker, hint, associated error, and stable input identity. The wrapper is not itself a text-input API. |
| Text input | Controlled single-line text with read-only, disabled, validation, and input-mode support. |
| Textarea | Multiline prose with a suitable initial height and labeled scroll region; separate from code editing. |
| Numeric input / spinbutton | Bounds, step, units, empty value, and invalid intermediate input without silent coercion. |
| Password / secret input | Masking, reveal, and appropriate copy behavior for credential entry; no secret values in diagnostics. |
| Search field | Persistent label, search icon, named Clear action, and explicit loaded-data versus remote-search scope. |
| Select | One bounded choice with explicit empty/unavailable state; a native select is not a custom combobox. |
| Combobox / autocomplete | Search and choose within one control, with popup, active option, committed value, loading, and no-result states. |
| Listbox | Visible single-/multi-option selection when a collapsed select is unsuitable. |
| Multiselect | Several values, visible selections, individual removal, clear-all, and bounded option search. |
| Checkbox | Independent boolean choice, indeterminate state, and full label target. |
| Checkbox group | Related independent choices under a group label, with group hints and errors. |
| Radio button / radio group | One choice from a small visible set, with group semantics and desktop arrow-key movement. |
| Switch | Immediately applied on/off setting with explicit state; distinguish from a deferred form checkbox. |
| Slider | Bounded approximate numeric adjustment with visible exact value and keyboard operation. |
| Range slider | Lower/upper interval with individually labeled thumbs and exact numeric alternatives. |
| Date picker | Calendar date entry for scheduling/filtering, with locale-aware display and unambiguous stored values. |
| Time picker | Time entry with an explicit timezone when interpretation depends on it. |
| Date/time range picker | Labeled endpoints and ordering validation for schedules or diagnostic windows. |
| File picker / uploader | Accepted types, limits, selection, transfer state, cancel, and errors. |
| File/path field | Path value, Browse action, and unavailable-path feedback; distinguish local paths from remote identifiers. |
| Fieldset / field group | Group label and preserved child identities. |
| Repeatable array editor | Add/remove structured items while retaining unknown fields, item identity, and declared bounds. |
| Reference picker | Stable identity, loaded-label search, explicit page loading, Clear, and retained unresolved selection. |
| Guided schema form | Supported schema projection, whole-schema validation, unknown-field preservation, and Advanced fallback. |
| JSON editor | Raw draft text, parse errors, last valid structured state, and explicit validation; invalid text remains editable. |
| Validation summary | Readable issues with navigation to represented fields or the nearest represented parent. |
| Draft / revision-conflict notice | Distinct dirty, invalid, stale, and conflicting states, with explicit resolution before saving. |
Badges, notices and feedback
Filter chips reserve a leading checkmark slot in both states. Selection reveals the check without moving the label or changing the resting content face; the 6px chamfer contour remains available for focus.
A badge is informational, not clickable by default: 6px cuts, 1px semantic edge, 8px horizontal/2px vertical padding and a 14/20 semibold label. A one-line badge is 24px high. Use a full-size target if the badge is also an explicit filter/action.
A notice is a shallow chamfered region with semantic face and edge, 12px internal padding and 8px content gaps. Its title and explanation can share a row separated by a 1px semantic rule when space permits; at compact widths put the explanation beneath. This is a notice-text arrangement, not permission to move a panel's anchored heading beside status chips.
Use green only for established positive facts. Use amber for “Needs review,” “Revision conflict,” and unresolved outcomes. Keep a neutral “Accepted” receipt next to a separately labeled “Outcome pending” state beneath the task title. An unchanged successful observation can remain readable after disconnect, alongside a stale warning.
A toast is supplementary and brief; default dismissal after 6 seconds. Pointer hover, click, or touch makes it persistent until explicitly dismissed. Keyboard focus pauses the remaining dismissal timer and resumes it on leaving, unless the toast has become persistent. Actionable toasts always require explicit dismissal; completing their action does not dismiss them. Errors or unresolved-action information that the user needs must remain in the page until resolved; a disappearing toast is insufficient. Announce important status politely without replaying every log event.
Terminal notices use a label such as [WARN] Draft retained, explanatory text and explicit actions. Toast overlays and timed disappearance are inappropriate for critical TUI information.
! Needs review
[WARN] Revision conflict
Server copy changed. Retain draft or reload.
[INFO] Saved · 6s; focus pauses timer
Pointer/touch keeps open · actionable always persists · [Dismiss]
Controls in this family
| Control | Control contract |
|---|---|
| Inline notice / alert banner | Persistent semantic explanation and optional recovery, with text beyond color alone. |
| Toast / snackbar | Supplementary transient feedback, paused on hover/focus; critical information remains in the page. |
| Linear progress | Observed completed/total values or explicit unknown progress, without invented percentages. |
| Busy / loading indicator | Named ongoing work with reduced-motion support and retained data during refresh. |
| Skeleton placeholder | Reserve initial-loading structure when useful, with an accessible loading description. |
| Inline / field error | Specific readable error associated with the affected control. |
| Recovery / retry action | Explain what is retried, retain original identity, and distinguish observation retries from repeat submissions. |
| Help / shortcut reference | Discoverable command/navigation reference for complex keyboard workflows. |
Collections and tables
Use a broad reading surface with a fixed header/toolbar, quiet row dividers and a separate detail inspector. Default rows are at least 48px; headers use the badge/table role. Keep 12px horizontal cell padding and a minimum 8px gap between meaningful columns. Do not frame every cell or give rows large rounded containers.
Selected rows use a neutral surface, persistent primary-text ▸ glyph, bold text and selected semantics. Cyan focus remains independent. Data text remains primary; record status sits in its own labeled column. Snapshot freshness belongs near the collection heading, separate from record readiness. Filter labels must say whether they search loaded rows or a remote source.
Retain rows during refresh/disconnect and disable unavailable pagination with a reason. “Five shown of six loaded” is a loaded-snapshot fact, not a claim about total remote records. Explicit refresh/restart must not silently erase useful retained data before a replacement succeeds.
At narrow widths show a single list or detail pane with Back, preserving selection and scroll position. Terminal tables prioritize label, state and essential metadata; optional columns move to details rather than truncating the identifying text to nothing.
| Name | State |
|---|---|
| north-gateway | Ready |
| west-relay | Idle |
| Name | State |
|---|---|
| north-gateway | Ready |
| west-relay | Idle |
Name State north-gateway ✓ Ready west-relay Idle Filter State: Ready [x Clear]
Controls in this family
| Control | Control contract |
|---|---|
| Collection view | Retained records, explicit loading intents, observation evidence, and separate item actions. |
| Record list / list item | Label, state, metadata, selection, and sibling actions with stable record identity. |
| Data table | Labeled columns, readable rows, overflow, explicit selection, sort intent, and useful compact representation. |
| Sort control / indicator | Active key/direction and explicit local-versus-remote sort scope. |
| Row selector / bulk selection | Separate activation from selection; tri-state select-all and explicit bulk scope. |
| Filter bar / group | Labeled controls, active count, reset, and clear query scope. |
| Filter chip / removable token | Filter toggle or selected-value removal, with visible selection and named removal where applicable. |
| Badge / status chip | Informational status with text and semantic color; no implied clickability. |
| Metadata / key-value list | Labeled facts, missing/unknown values, and trusted-content boundaries. |
| Freshness / observation indicator | Loading, stale, unavailable, frozen snapshot, revision, and observation time, separate from record readiness. |
| Empty / no-results state | Distinguish successful empty data, no matches, loading, unavailable data, and no permission; offer one useful next step. |
| Tree view | Hierarchical resources with expansion and independent selection. |
| Tree table / treegrid | Hierarchical records requiring aligned columns and grid navigation. |
| Read-only code viewport / snippet | Bounded code, optional Copy, and horizontal/vertical reading; distinct from editable JSON. |
| Copy control | Copy an identifier, path, or code block with precise naming and success/failure feedback. |
| Icon | Consistent decorative symbols; the owning interactive control supplies the accessible name. |
| Metric / bounded meter | Measured value, units, limits, and observation time; distinct from task completion. |
| Chart / data-graphic frame | Axes, units, legend, accessible summary, and stale/empty states; applications supply domain series. |
| Avatar / entity thumbnail | Useful person/resource recognition with text and icon/initial fallback. |
Shells, drawers and disclosure
Use the shell dimensions in layout. The drawer owns its toggle and retains the same material/frame when collapsed to a 36px rail, with the small-panel 8px cut and no decorative hex as defined on the shape page. A separate focusable resize handle exposes current width and limits; visual decoration does not supply its accessible name.
Disclosure title and its trailing toggle are separate from toolbar/tab controls. Right-pointing means collapsed and down-pointing means expanded. Collapsing preserves retained state and never cancels work. If focused content becomes hidden, return focus to the toggle.
Sticky sections contain a single composite header that hands off at section boundaries. Never clone a focused header or let headings accumulate. In terminals, prefer one fixed region heading and explicit section navigation; do not emulate scrolling pixel-sticky stacks with duplicate lines.
Diagnostics
Connection stable. Last sync 2m ago.
Diagnostics
Connection stable. Last sync 2m ago.
▾ Diagnostics Connection stable. Last sync 2m ago. 🮣── Details ───────────🮢 🮣─🮢 │ Queue: 4 │ │‹│ 🮡──────────────────────🮠 🮡─🮠
Controls in this family
| Control | Control contract |
|---|---|
| Disclosure | Named expand/collapse toggle, retained hidden state, and focus return on collapse. |
| Accordion | Coordinated sections with explicit single-/multi-open behavior and group keyboard conventions. |
| Side drawer | Auxiliary content, its own collapse control, and continuous frame into the collapsed rail. |
| Resize handle / window splitter | Pointer/keyboard resizing, name, current size, and limits; a controller export is not a standalone rendered handle. |
| Scroll region / viewport | Labeled constrained reading with deliberate focus and scroll ownership. |
| Scroll indicator | Position/extent feedback alongside keyboard scrolling. |
| Split / master-detail layout | Wide panes and compact single-pane navigation with retained state. |
| Page layout | Heading, tool area, body, and persistent action placement. |
| Sticky scroll sections | One section-bound composite header and normal-scroll fallback without duplicate headings. |
| Menu/content layout | Terminal commands beside the reading region with explicit pane focus. |
| Application frame / shell | Identity, navigation, workspace, diagnostics, status, and hints, with identifiable inner controls. |
| Navigation drawer | Responsive destinations, distinguished from a generic side panel or sheet. |
Inspection, workflow and diagnostics
Compose a task heading, status/metadata below, attached detail tabs, content and a persistent action/recovery area. Keep an activity timeline in a complementary pane only when sufficient width remains. Each timeline entry has a 12px marker, explicit label, optional timestamp and secondary description, with 24px minimum vertical separation.
Workflow nodes use the card recipe. Category color and status are distinct. Neutral dotted orthogonal connectors organize relationships; active edges may use directional flow animation per motion, but animation never stands in for status or success. Replace the graph with a stage list on compact screens and in terminals where connectors would be unreadable.
Known progress is a labeled count and running-green bar; unknown totals never show invented percentages. Unresolved originals keep recovery/inspection actions tied to the original identity and scope. Inspecting a request is not a new submission. A completed node or receipt cannot establish final external completion.
Logs use the code role, quiet separators and bounded retention. Cyan informational level tags, amber warnings and danger errors leave the message itself readable. Follow incoming lines only when the reader is already at the end; preserve their position when they scroll away.
- Accepted
- Validation running
[info] probe ok
[warn] retry scheduled- Accepted
- Validation running
[info] probe ok
[warn] retry scheduledRunning validation ▐▌▐▌▐▌ 3/8 observed
Timeline
• Accepted · 10:02
• Validation running
[info] probe ok
[warn] retry scheduled
Long-running operation status
Long-running operations have explanatory text in the app status bar. Show the earliest-initiated operation that is still active. When it finishes, advance to the next earliest active operation; a newer operation never displaces an earlier active one. Hover, click, or tap opens an expanded status dialog showing all operation statuses; keyboard activation also opens it. Every status-bar, secondary, and dialog progress bar stays paired with the text and count for its own operation.
Controls in this family
| Control | Control contract |
|---|---|
| Action status / receipt | Separate acceptance, pending/uncertain outcome, completion evidence, and original-request recovery. |
| Action bar | Reachable submission/recovery controls, validation, eligibility, and busy state. |
| Editor workspace | One draft across Guided/Advanced modes, retained invalid text, revisions, and stable footer actions. |
| Inspection workspace | Identity, observed state, metadata, tabs, activity, and actions; retain access on compact screens. |
| Activity timeline / entry | Ordered labeled events and optional timestamps/descriptions; history alone does not establish current final state. |
| Workflow node / stage card | Stage identity, category, observed state, inspection, and actions; category color remains distinct from status. |
| Workflow connector | Relationships using Oracle's connector language, without implying successful delivery from geometry. |
| Stage list / step indicator | Current stage and textual observed state; require evidence for completed stages. |
| Diagnostic / log viewer | Bounded retention, severity, truncation disclosure, filters, and reading-position preservation. |
| Diagnostic drawer | Collapsible diagnostic region with its own title/toggle and resize behavior where available. |
| Log follow / pause / jump-to-latest | Explicit live-follow state and deliberate return to latest without forcing readers away from earlier lines. |
| Health / connection panel | Connection, probes, stale retained facts, and recovery without presenting disconnected observations as current. |
Dialogs, tooltips and empty states
Dialogs use a major chamfer, chrome material, 24px content padding, an essential edge and modal scrim. Default width is 480px, bounded to the viewport minus 32px, with a readable maximum body height and internal scrolling. Put the title first and actions last. Focus enters the dialog, remains inside while modal, and returns to its trigger on dismissal.
A bottom sheet is the same dialog anchored to the bottom edge when a narrow portrait viewport cannot comfortably contain its centered desktop counterpart. Keep the chrome recipe, type roles and title-first header order, followed by remaining chips, metadata and actions. Use the same scrim, focus containment, restoration to the trigger and dismissal policy, including system Back. Keep the title and controls reachable above safe-area and software-keyboard insets while the body scrolls.
Tooltips use metadata type, 8px padding and a small quiet chrome plane. Show on focus as well as hover, with a 500ms pointer delay; do not hide an essential action reason inside a tooltip. Tooltip width is at most 280px.
Empty states use a plain heading, a short explanation and at most one primary next step. Loading, no results, unavailable data and no permission are separate messages. They are not interchangeable empty illustrations. Terminal equivalents are compact text, not large ASCII art.
Discard draft?
Discard draft?
🮣 Discard draft? ──────────────🮢 │ Unsaved edits will be lost. │ │ │ 🮡──────────────────────────────🮠 (hint) Copy identifier Empty: No records yet. [ Create first ]
Controls in this family
| Control | Control contract |
|---|---|
| Modal dialog | Named title/body/actions, bounded scrolling, focus containment, dismiss policy, and focus restoration. |
| Confirmation dialog | Consequence, confirm/cancel, and appropriate initial focus; avoid routine reversible confirmations. |
| Bottom / modal sheet | The desktop dialog anchored to the bottom edge when portrait width cannot comfortably contain a centered dialog. Preserve dialog chrome, type, title-first header order, scrim, focus containment and restoration; respect safe-area/keyboard insets and the same Back/Close dismissal policy. |
| Popover / interactive help | Anchored nonmodal content with operable controls, collision handling, dismissal, and predictable focus return. |
| Tooltip | Supplemental text on focus/hover; essential instructions remain visible elsewhere. |
Platform treatment and shared requirements
Every applicable interactive control needs visible focus, an accessible name, keyboard operation, relevant selected/expanded/checked semantics, and disabled/busy explanations. These are acceptance criteria, not separate controls. Use the existing interaction, accessibility, layout, and token contracts rather than adding competing dimensions or colors here.
- Web: use native element semantics first and add ARIA roles only where no native element expresses the control.
- Desktop and mobile: share intent and state across platforms. Desktop honors keyboard and pointer input; mobile honors touch targets, scaling, safe areas, and the system Back action.
- Terminal: preserve tasks and state through command choices, option lists, focus markers, text notices, and stage lists. GUI-only geometry does not require a matching terminal widget; provide keyboard-operable equivalents.
- All platforms: retain selection, drafts, observations, and reading position across layout/disclosure changes. Show unknown/unavailable values and distinguish acceptance from external completion.