Components

The one clickable action affordance, icon buttons included. Built from Pressable + Surface + Text + Icon.

Hover/focus description with a 300ms enter delay. Lives in a Layer[kind=tooltip]; the static host shown here is CSS-only.

Anchored floating surface with arbitrary content. Uses the native popover attribute for light-dismiss; only one InfoPopover is open at a time.

Search results carry one menu per result type: the items GWT's ActionRenderer shows for that type, grouped Open · Share · Sign · Related · Versions · Manage, with Delete last. Items the user can never have are hidden; items blocked for now (checked out by someone else) stay, disabled, with the reason in their tooltip.

Every large dismissible surface: modal, drawer, inline panel, full page. A native <dialog> supplies the scrim and focus trap. The header carries the chrome tokens, so it goes navy.

Confirm-before-act in three presentations: dialog (Overlay sm), popover, and button (a button that opens either). Never a raw dialog.

The control shell: label, helper/error text, adornments, sizing. Every input-like component (TextField, Select, DatePicker, InputFieldMapper) is a Field around a Control.

All twelve free-text variants are a type on the Control plus an optional adornment. Nothing else changes.

Binary or tri-state choice as checkbox, switch or radio. The native input stays in the DOM (visually hidden) so forms and assistive tech work unchanged.

Every option-picking control: plain select, combobox, async suggest, multi-select. The trigger is a Field control; the listbox is a Menu. Gated on useCombobox (P-14) for behavior; the visual contract is complete here.

A date the user already knows, such as a date of birth or the day a benefit started, typed into Month, Day and Year instead of picked from a calendar (USWDS Memorable date). A fieldset and legend around three Fields; for a date the user has to look up or choose, use DatePicker.

Choose a sprite icon and its color, as for a saved search's sidebar row (Change icon… on its row menu, in a dialog titled "Icon for <name>"): a search field, the color keys as a ColorPicker row, a label naming the chosen icon, then the sprite's icons as a scrolling, keyboard-navigable grid. The chosen icon is drawn in the chosen color.

A live checklist of what a Field's value must meet, such as a new password's rules, ticked off as the user types (USWDS Validation). Each requirement says in text whether it is met; one polite live region reports the count after the user pauses, never per keystroke. The input names the checklist in aria-describedby.

The stepper is no longer a Tabs variant: a fixed, ordered process is shown with StepIndicator (C-47), which marks the current step with aria-current="step" and says in text which steps are complete.

Native <details>/<summary>. Exclusive open uses the name attribute.

The path from the app's root to the current page, above the page title (USWDS Breadcrumb). Each level is a link but the last, which is the page itself. The shell's content header (.qf-page-header, App shell) puts it above the title; it was styled there and is cataloged here.

The app's rail of destinations, with nested levels the user opens and closes (USWDS Side navigation). The App shell places it in its nav column and adds the tree extensions (groups, row menus, organize mode); here it stands alone, as it would in a settings area or a help center. The site's own Contents rail is one too.

Where the user is in a fixed, ordered process, such as a multi-page application form: one segment per step, and a "Step 2 of 5" heading naming the current one. Modeled on the USWDS Step indicator. It shows status only; the pages themselves move the user on. It is the system's one stepper: the Tabs stepper variant (.qf-stepper) folded into it.

Lets the user read the app in another language (USWDS Language selector). A button naming the current language opens a Menu of languages, each written in its own language and script with its lang, and glossed in the page's language; an app with two languages uses a single link to the other one. UI only: choosing a language here changes the button, not the page.

The app's page footer: the product and its version, the accessibility statement and legal links, and the copyright line (USWDS Footer, slimmed to an app). It is not StatusBar (C-40), the editor's bar of live document facts and controls; a footer holds nothing that changes while the user works. The App shell has an optional slot for it under the content.

In the shell's footer slot (compact, on the chrome)

Inbox

Content. The footer below takes its own height; the content keeps the rest.

Measures children and collapses the tail into a +N that opens a Popover. The static contract is a clipped flex row with a trailing counter chip.

A Banner in a Toast shell, queued in a fixed region. Preserves the imperative toaster.* API. Five-second timer bar; dedupe by key.

The save indicator beside a document's name: Saving…, Saved, Offline, or Not saved while it retries, with Retry now. A save never makes a version, so the indicator never says one.

The body of the Publish version dialog: the version it will create (2.3 → 3.0), what happens to the previous published version, warnings, and a required comment. Opened from the document screen and from File → Publish version in the editor; both end in POST /api/v2/documents/{id}/publish.

Every version of a document, newest first, grouped by Published version with its Draft checkpoints beneath. Published rows are solid with a green edge, Superseded rows sunken and muted, Draft rows indented with a dashed edge; each also says its status in a badge. Published only hides the drafts. In the editor's side pane and on the qaction document screen.

How long Draft checkpoints are kept after the next Published version, for one classification and document type pair: inherit the rule, a number of days, or keep all. Shows the effective rule and where it comes from (this pair, the classification, or the product default). Records managers edit it; everyone else sees it read only.

The transparent command button of ribbons, menus bars, panes and status bars (QEditor spec §2.3 C11). sm is the Full small row (1.5rem), md the Compact row (2rem), lg stacked the Full large button.

A primary action and a menu half sharing one hover outline (Fluent v9 pattern): two buttons in the roving order; the menu half is named "More options for …". A toggle split carries aria-pressed on the primary; a color split shows its current color in __swatch.

An access-key badge at the bottom centre of its target, shown by the KeyTips primitive (P-16) on Alt+Windows or Ctrl+Option. Badges are aria-hidden; the same keys are on the control as aria-keyshortcuts.

The floating formatting bar over a selection or above a context menu: role="toolbar", two rows at most, and never the only path to a command (every one is also in the ribbon).

One DOM for both modes (spec §1.2): every control is written once with data-priority and its label; data-mode picks Compact (the default: one row, labels visually hidden, priorities 3–4 in the ⋯ menu) or Full (three small rows or a large button per group, group labels, launchers). As the width shrinks, both modes shed labels, then move controls into the ⋯ menu by priority (last group first), then fold whole groups into dropdowns; groups never overlap or clip, and horizontal scrolling is only the last resort (P-20). The tab row takes the app accent and the panel stays flat.

Inline in the ribbon as a one-row role="listbox" with ▲ ▼ scroll buttons (out of the tab order) and an expand button; expanded as a role="grid" with labeled row groups and footer commands. Thumbnails are rendered by the engine from the document (spec §3.3).

Popover content for font, highlight, fill and outline colors: Automatic, the theme grid (10 × 6 tints and shades), the standard row, More colors…. Each cell is labeled ("Blue, Lighter 40%"); swatches keep their true color in forced colors with a CanvasText border.

The Insert table size picker (10 × 8): arrows grow the selection, the live label names it, Enter inserts. The label is the grid's aria-describedby.

A numeric field with ▲▼ steps and a unit: role="spinbutton" with aria-valuetext ("1.27 centimeters"). ↑/↓ step, PageUp/PageDown take a large step.

The zoom slider (a detent marks 100%), transparency and brightness: role="slider" with aria-valuetext. The value is a 0–1 fraction in --_value.

A complementary landmark (<aside aria-labelledby>) docked at the end (or the start: navigation, thumbnails, the PDF left pane). Opening moves focus to the title; closing returns it. Two end panes share a dock with a tab strip; under 48rem a pane becomes a drawer.

A footer region holding one role="toolbar": items are buttons when they open something (page → Go to, words → Word count), text otherwise; values are not live. The end holds the view radio set and the zoom control. It is not the app's page footer, which holds the version and legal links: that is Footer (C-51).

A comment thread: the anchor quote, the author header (avatar, name, time, actions), the body, nested replies, the composer and the actions. In the pane, in the page margin next to its anchor, or as a popup over the page (PDF sticky notes).

Collaborators carry a ring in their presence color (--qf-presence-1…8) and a badge for viewing or editing; the name is always shown beside the avatar or in its tooltip, so hue never identifies a user on its own.

The "super tooltip" of ribbon commands: title, shortcut, a one-paragraph description and, on a disabled command, the reason it is unavailable.

Office menus add a check column (menuitemcheckbox, menuitemradio), an icon column, submenu chevrons, two-line items, section headers and the Paste options icon row (a role="group" of menu items).

The editable combobox of the ribbon and the formula bar: a text input with role="combobox" plus a chevron that opens the list. The roving toolbar yields ←/→ to the caret inside it.

Icon-only tabs with tooltips for the Format panes (Fill & Line, Effects, Size & Properties, Picture).

The PDF tool rail on narrow widths (data-orientation="vertical") and the annotation toolbar inside a popover (data-floating). Both are one tab stop with roving arrows (P-15).