Prompts

Back, title and action — the title appears once the heading scrolls away

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

The greeting follows the clock, and the balance can be hidden

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Transparent over the cover, gaining a surface once it scrolls past

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

The large title collapses into a compact one on scroll

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Progress computed from the scrollable height, not from scroll position alone

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Search lives in the bar, with a cancel button that appears on focus

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

A segment that swaps content and recomputes the visible total

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Remaining amount and expected date derived from the monthly rate

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Streak and rate computed from the day log, never stored

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

A draggable scrubber, with time-left adjusted for playback speed

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

A dashed ring built from the segment count; seen stories dim

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

A swipe reveals two actions and springs back below the threshold

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Side notches, a generated barcode, and a countdown from the event date

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

A vertical timeline with an ETA derived from the current stage

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Two faces, with a masked number revealed briefly then re-hidden

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

The curve is generated from the values, scaled to their own min and max

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

A primary and a secondary action at different sizes and weights

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Drags freely, snaps to the nearest edge, and never leaves the screen

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Starts with a label and collapses to an icon on scroll

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Expands from a circle into a form and returns on close

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

An SVG ring computed from its own circumference, not a fixed width

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Appears after enough distance and returns smoothly — or instantly when motion is reduced

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Opens named actions in sequence, closing on Escape and on the scrim

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Completed items sink to the bottom; percentage and remaining are computed

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

An intersection observer loads the next batch and states clearly when it ends

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Increasing resistance, a release threshold, and a spinner that announces state

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Drag by the handle, with an arrow-key path as the alternative

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Sticky headers and a letter index that jumps to its section

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Titled groups with several working row types

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

The skeleton matches the real content’s size so nothing shifts on arrival

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Grouped actions with the destructive one separated and marked

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Requires typing a confirmation word before the button activates

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Third, half and full — it settles at the nearest detent on release

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Changes stay pending until Apply — Reset restores the last applied state

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Each method carries its fee, and the total recomputes on switch

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Wheels snap on scroll and the value is read from the position

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

A row of people, a row of actions, and a copy-link that actually copies

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

A small icon opens a full bar and closes it on Escape

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Horizontally scrolling chips narrow the result, with a counter that follows

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Sticks to the top of the list on scroll and reports the match count

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Floats above the map with results sliding out beneath it

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Type, scan a code, or use location — three ways into one result

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Tapping the bar opens a search screen with history and trending

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Live suggestions navigable with arrows and accepted with Enter

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

The badge caps at 99+ and the total is summed from the conversations

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Four tabs with one raised primary action in the middle

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Follows the horizontal swipe and jumps when a dot is pressed

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Five items maximum, each with an accessible name and a sliding indicator

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

No icons — plain labels with a moving underline

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

The active item expands to reveal its label; the rest stay icons

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Floats above content and hides when scrolling down

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Numbers align left inside a table that reads right

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Official Gulf names have four parts, not two

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output
• Important

Forms

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

A multi-field form validating on blur, with an error summary

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

One field, one button, and validation only after the field is left

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

An accordion built on native details — works with JavaScript off

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Three cards of equal height regardless of copy length

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Link columns, a newsletter, and a copyright year computed rather than typed

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Headline, promise, two actions and one trust signal in a single visual order

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

An endless strip that stops completely when motion is reduced

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

The annual saving is computed from both prices, never hand-written

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Numbers count up on entry — and appear complete when motion is reduced

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

A horizontal path whose connector stops at the last step instead of overshooting

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

People cards with roles and links, on an equal-height grid

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Auto-advances, and pauses on hover and on focus

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Actually copies, with a fallback when clipboard permission is unavailable

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

The delete completes after a sustained press and aborts on release

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Each has an accessible name, and the tooltip shows on focus, not hover alone

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Blocks the double click and holds its width while pending

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Leans toward the pointer within range, and stops when motion is reduced

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Progress lives inside the button, and the upload can be cancelled mid-flight

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Single choice with a sliding indicator measured from the active segment

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

One button expands into options, with a counter that actually increments

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Four levels of emphasis, five states each

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

The default action is one click; its alternatives sit behind an arrow

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Respects stock and minimum, recomputing the line total instantly

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

State announced to screen readers, with computed dependency between switches

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Booked ratio and open slots computed from the schedule

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Percentage and time left derived from the lesson list

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Duration computed from both times including the timezone offset

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Subtotal, VAT and total all computed from the line items

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Aspect ratio preserved, duration formatted from raw seconds

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Progress derived from the current stage within the stage list

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

The discount is computed from both prices, never hand-written

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Tenure computed from the hire date

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Price per square metre derived from price and area

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

The average is computed from the star distribution, not stored

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Days left and delay computed from the dates themselves

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Overflow count and capacity load both computed

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

The gap to free shipping is computed, never hand-written

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Three gated steps with the order summary always visible

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Percentage, fixed amount or free shipping — each with its own cap

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Validated with the Luhn algorithm; the network is inferred from its prefix

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Sequential number, VAT and a verification code — shaped like a real receipt

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

The refunded amount computed after restocking and non-refundable shipping

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Arrival computed in business days, skipping Friday and Saturday

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

VAT is rounded once at the total, not per line

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

A vertical trail with real timestamps; what is ahead is estimated, not asserted

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

The saving is computed from the price difference and updates with each pick

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Tables

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Colour never carries the meaning alone — each level has an icon and a role

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

The button unlocks only when the resource name is typed exactly

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

A deliberate blank: explains the value and offers one step

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

The wait doubles with each attempt, and it is capped

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

An error bound to its field via aria-describedby, announced exactly once

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Shows the filters that narrowed the result and lets you drop them one by one

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Holds what could not be sent and flushes it when the network returns

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

An overall percentage weighted by size, not by file count

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Reserves the real content’s box so the page does not jump when it arrives

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Does not stop at “done” — it gives the reference and what comes next

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

An arc whose angle comes from the ratio and whose length comes from the radius

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

High, low, open and close on one computed scale

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Computes the gap from a real date, so it never drifts

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Bars that grow out of zero in both directions by the sign of the gap

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Each stage carries two ratios: from the previous stage and from the first

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Colour derived from the actual range — not from hardcoded thresholds

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Hijri and Gregorian together, one tap to switch

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output
• Important

Dashboard

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Tells citizen from resident by the first digit, and validates the checksum

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output
• Important

Two separate menus — opening one closes the other

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

A promo strip above with a real timer that stays dismissed

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

The slimmest size, with a project switcher and a command key

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

A hierarchical trail whose separators mirror with direction

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Logo in the centre with links balanced on both sides

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Logo, links and one action — the baseline that always works

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

A multi-column panel that closes on Escape and outside click

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

A hamburger that opens a full sheet and traps focus

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

The search expands on focus without shifting the layout

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Starts tall, shrinks on scroll, and restores at the top

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Two rows: identity above, tabs below with a sliding indicator

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Transparent over the hero, gains a background on scroll

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

An observer that fetches near the edge and stops with an announcement instead of spinning forever

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

It announces what remains — not what loaded — and retires at the end instead of staying a dead button

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

A page-number window whose width never changes as the reader moves

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Pricing

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Suggests, navigates by arrows, and remembers your last searches

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output
• Important

A term plus conditions — each filter shown as a chip you can remove

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output
• Important

Finds the match despite a typo, and suggests “did you mean?”

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output
• Important

Distance computed with haversine, not raw coordinate differences

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output
• Important

Results from several sources, each under its own heading

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output
• Important

Filters as you type and highlights the match in the original text

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output
• Important

Pages computed from the result count, resetting on every new query

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output
• Important

Two handles that cannot cross, with results recomputed instantly

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output
• Important

Stores recent searches locally and offers them before you type

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output
• Important

Restricts the query to one field instead of every field

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output
• Important

Highlights inside cells, counts rows and sums only what is visible

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output
• Important

Each tag is a condition — results are their intersection, not their union

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output
• Important

Progress follows reading order

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Counters that change and announce themselves to screen readers

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Folds into an icon rail and remembers your choice

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Ctrl+K opens a search that jumps anywhere by keyboard alone

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Slides from the start edge and traps focus inside

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Group headings separate sections without collapsing

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

As narrow as it gets — the label appears on hover and focus

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Groups that expand and collapse — one open at a time

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Pin what you use daily to the top — and it stays pinned

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

A menu that closes on outside click and on Escape

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Each section carries a computed meter, announced to screen readers

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Arabic-normalized search filters items instantly

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

An icon column that swaps the contents of the panel beside it

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Switching the client swaps the whole navigation

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Postal code, building number and additional number — each with its correct length

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output
• Important

Age computed from the full date difference, not by subtracting years

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Validates the commercial registration and the VAT number together

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output
• Important

Required and optional consents, with a genuinely tri-state “select all”

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

IBAN verified with the full mod-97 checksum, not just its length

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output
• Important

The invite code resolves both the team and the role

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Accepts a pasted code, moves back on delete, and re-sends on a timer

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Strength computed from variety and length together — not length alone

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Accepts Saudi and Jordanian numbers and normalises the international form

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output
• Important

Provider buttons, a divider and an email fallback — in correct focus order

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

No step advances before the previous one is valid — progress is computed

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Checks after typing stops and suggests alternatives on collision

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Sorts itself and scales each bar against the largest

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Current against previous — the delta computed both ways

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Four numbers at a glance — every delta computed, not typed

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Animates between values smoothly and honours reduced motion

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

A share of a target — the ring’s circumference computed from its radius

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

The curve is drawn from the data itself — not a static image

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Bubbles swap sides

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Each feature row is a header, and the highlighted column is announced, not just coloured

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Three densities and hideable columns, with the choice remembered

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Saves on Enter, reverts on Escape, and recomputes immediately

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Details open under their own row, correctly wired with aria

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Text search plus two selects — intersected, with a total that follows

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Subtotals and the grand total computed from the rows, never typed

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

On narrow screens it becomes cards, each field carrying its own label

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

A genuinely tri-state “select all”, with actions that state their count

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Numbers compare numerically and Arabic by its own collation — never as plain text

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Header sticks vertically, first column horizontally, and the corner above both

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Slide from the correct side

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output

Arabic tax-invoice layout with line items and 15% VAT

• Role
• Goal
• Direction
• Typography
• Numerals
• Colors
• Language
• States
• Accessibility
• Output
• Important