# Specimen cases

## Shell · layout

### Shell, desk

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Shell, desk | shell/desk/ | phoenix/shell/desk/ |

### Shell, desk-inert

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Shell, desk-inert | shell/desk-inert/ | phoenix/shell/desk-inert/ |

### Shell, desk current-in-view

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Shell, desk current-in-view | shell/desk/current-in-view/ | phoenix/shell/desk/current-in-view/ |
| The current destination is low but in view, so the rail stays put. | shell/desk/current-in-view/ |  |

### Shell, desk current-below-view

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Shell, desk current-below-view | shell/desk/current-below-view/ | phoenix/shell/desk/current-below-view/ |
| The current destination is below the view. The core alone leaves it there; a page that runs script scrolls it in. | shell/desk/current-below-view/ |  |

### Shell, desk one-context

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Shell, desk one-context | shell/desk/one-context/ | phoenix/shell/desk/one-context/ |

### Shell, desk context-groups

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Shell, desk context-groups | shell/desk/context-groups/ | phoenix/shell/desk/context-groups/ |

### Shell, desk no-account

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Shell, desk no-account | shell/desk/no-account/ | phoenix/shell/desk/no-account/ |

### Shell, desk no-contexts

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Shell, desk no-contexts | shell/desk/no-contexts/ | phoenix/shell/desk/no-contexts/ |

### Shell, desk no-navigation

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Shell, desk no-navigation | shell/desk/no-navigation/ | phoenix/shell/desk/no-navigation/ |

### Shell, desk no-navigation no-account

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Shell, desk no-navigation no-account | shell/desk/no-navigation/no-account/ | phoenix/shell/desk/no-navigation/no-account/ |

### Shell, desk standing

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Shell, desk standing | shell/desk/standing/ | phoenix/shell/desk/standing/ |

### Shell, desk side-panel

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Shell, desk side-panel | shell/desk/side-panel/ | phoenix/shell/desk/side-panel/ |

### Shell, desk side-panel work

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Shell, desk side-panel work | shell/desk/side-panel/work/ | phoenix/shell/desk/side-panel/work/ |

### Shell, desk side-panel rows

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Shell, desk side-panel rows | shell/desk/side-panel/rows/ | phoenix/shell/desk/side-panel/rows/ |

### Shell, desk side-panel unsaved

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Shell, desk side-panel unsaved | shell/desk/side-panel/unsaved/ | phoenix/shell/desk/side-panel/unsaved/ |

### Shell, desk side-panel inert

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Shell, desk side-panel inert | shell/desk/side-panel/inert/ | phoenix/shell/desk/side-panel/inert/ |

### Shell, desk collapsed

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Shell, desk collapsed | shell/desk/collapsed/ | phoenix/shell/desk/collapsed/ |

### Shell, desk collapsed leading-tenant

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Shell, desk collapsed leading-tenant | shell/desk/collapsed/leading-tenant/ | phoenix/shell/desk/collapsed/leading-tenant/ |

### Shell, desk like-names

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Shell, desk like-names | shell/desk/like-names/ | phoenix/shell/desk/like-names/ |

### Shell, desk find-field

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Shell, desk find-field | shell/desk/find-field/ | phoenix/shell/desk/find-field/ |

### Shell, desk find-field-palette

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Shell, desk find-field-palette | shell/desk/find-field-palette/ | phoenix/shell/desk/find-field-palette/ |

### Shell, desk profile-waiting

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Shell, desk profile-waiting | shell/desk/profile-waiting/ | phoenix/shell/desk/profile-waiting/ |

### Shell, field

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Shell, field | shell/field/ | phoenix/shell/field/ |

### Shell, field unsaved

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Shell, field unsaved | shell/field/unsaved/ | phoenix/shell/field/unsaved/ |

### Shell, field saved

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Shell, field saved | shell/field/saved/ | phoenix/shell/field/saved/ |

### Shell, field account-in-more

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Shell, field account-in-more | shell/field/account-in-more/ | phoenix/shell/field/account-in-more/ |

### Shell, field current-in-more

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Shell, field current-in-more | shell/field/current-in-more/ | phoenix/shell/field/current-in-more/ |

### Shell, field long-names

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Shell, field long-names | shell/field/long-names/ | phoenix/shell/field/long-names/ |

## Home · layout

### Home

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Home | home/ | phoenix/home/ |
| Empty regions | home/ | phoenix/home/ |
| A page notice beside an empty attention region | home/ | phoenix/home/ |
| A region's routes after its rows | home/ | phoenix/home/ |
| Steps done in a Dialog | home/ | phoenix/home/ |

### Home, new-tenant

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Home, new-tenant | home/new-tenant/ | phoenix/home/new-tenant/ |

### Home, loading

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Home, loading | home/loading/ | phoenix/home/loading/ |

### Home, assigned-upcoming-first

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Home, assigned-upcoming-first | home/assigned-upcoming-first/ | phoenix/home/assigned-upcoming-first/ |

## List · layout

### List

| Case | CSS core | Phoenix |
| --- | --- | --- |
| List | list/ | phoenix/list/ |
| Search with Scan | list/ | phoenix/list/ |
| Empty regions | list/ | phoenix/list/ |
| Selected invoice | list/ | phoenix/list/ |
| Nothing selected | list/ | phoenix/list/ |
| Cards | list/ | phoenix/list/ |
| Search beside Filters | list/ | phoenix/list/ |
| Search alone | list/ | phoenix/list/ |
| Toolbar at the narrowest desk width | list/ | phoenix/list/ |
| Records table wider than its region, with row actions | list/ | phoenix/list/ |
| Date filter on or after a day | list/ | phoenix/list/ |
| Date filter on or before a day | list/ | phoenix/list/ |
| Date filter between two days | list/ | phoenix/list/ |

### List, fitting-saved-views

| Case | CSS core | Phoenix |
| --- | --- | --- |
| List, fitting-saved-views | list/fitting-saved-views/ | phoenix/list/fitting-saved-views/ |

### List, history

| Case | CSS core | Phoenix |
| --- | --- | --- |
| List, history | list/history/ | phoenix/list/history/ |

### List, period

| Case | CSS core | Phoenix |
| --- | --- | --- |
| List, period | list/period/ | phoenix/list/period/ |

### List, grouped

| Case | CSS core | Phoenix |
| --- | --- | --- |
| List, grouped | list/grouped/ | phoenix/list/grouped/ |
| Grouped Rows | list/grouped/ | phoenix/list/grouped/ |
| Grouped by room | list/grouped/ | phoenix/list/grouped/ |

### List, desktop-only

| Case | CSS core | Phoenix |
| --- | --- | --- |
| List, desktop-only | list/desktop-only/ | phoenix/list/desktop-only/ |
| As a records table. | list/desktop-only/ | phoenix/list/desktop-only/ |

### List, new

| Case | CSS core | Phoenix |
| --- | --- | --- |
| List, new | list/new/ | phoenix/list/new/ |

### List, new record-picker

| Case | CSS core | Phoenix |
| --- | --- | --- |
| List, new record-picker | list/new/record-picker/ | phoenix/list/new/record-picker/ |

### List, new number-field

| Case | CSS core | Phoenix |
| --- | --- | --- |
| List, new number-field | list/new/number-field/ | phoenix/list/new/number-field/ |

### List, inbox

| Case | CSS core | Phoenix |
| --- | --- | --- |
| List, inbox | list/inbox/ | phoenix/list/inbox/ |

### List, refused-undo

| Case | CSS core | Phoenix |
| --- | --- | --- |
| List, refused-undo | list/refused-undo/ | phoenix/list/refused-undo/ |

### List, nested

| Case | CSS core | Phoenix |
| --- | --- | --- |
| List, nested | list/nested/ | phoenix/list/nested/ |

### List, unsaved

| Case | CSS core | Phoenix |
| --- | --- | --- |
| List, unsaved | list/unsaved/ | phoenix/list/unsaved/ |

### List, inert

| Case | CSS core | Phoenix |
| --- | --- | --- |
| List, inert | list/inert/ | phoenix/list/inert/ |

### List, inert more-filters

| Case | CSS core | Phoenix |
| --- | --- | --- |
| List, inert more-filters | list/inert/more-filters/ | phoenix/list/inert/more-filters/ |

### List, loaded

| Case | CSS core | Phoenix |
| --- | --- | --- |
| List, loaded | list/loaded/ | phoenix/list/loaded/ |

### List, loaded-at-a-view

| Case | CSS core | Phoenix |
| --- | --- | --- |
| List, loaded-at-a-view | list/loaded-at-a-view/ | phoenix/list/loaded-at-a-view/ |

### List, loaded-records

| Case | CSS core | Phoenix |
| --- | --- | --- |
| List, loaded-records | list/loaded-records/ | phoenix/list/loaded-records/ |

### List, loaded-cards

| Case | CSS core | Phoenix |
| --- | --- | --- |
| List, loaded-cards | list/loaded-cards/ | phoenix/list/loaded-cards/ |

### List, loaded-grouped

| Case | CSS core | Phoenix |
| --- | --- | --- |
| List, loaded-grouped | list/loaded-grouped/ | phoenix/list/loaded-grouped/ |

### List, loaded-more-filters

| Case | CSS core | Phoenix |
| --- | --- | --- |
| List, loaded-more-filters | list/loaded-more-filters/ | phoenix/list/loaded-more-filters/ |

### List, loaded-date-range

| Case | CSS core | Phoenix |
| --- | --- | --- |
| List, loaded-date-range | list/loaded-date-range/ | phoenix/list/loaded-date-range/ |

### List, loaded-record-picker

| Case | CSS core | Phoenix |
| --- | --- | --- |
| List, loaded-record-picker | list/loaded-record-picker/ | phoenix/list/loaded-record-picker/ |

### List, loaded-slider

| Case | CSS core | Phoenix |
| --- | --- | --- |
| List, loaded-slider | list/loaded-slider/ | phoenix/list/loaded-slider/ |

### List, loaded-search

| Case | CSS core | Phoenix |
| --- | --- | --- |
| List, loaded-search | list/loaded-search/ | phoenix/list/loaded-search/ |

### List, loaded-question

| Case | CSS core | Phoenix |
| --- | --- | --- |
| List, loaded-question | list/loaded-question/ | phoenix/list/loaded-question/ |

## Record · layout

### Record

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Record | record/ | phoenix/record/ |
| Empty regions | record/ | phoenix/record/ |

### Record, no-decision-or-work

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Record, no-decision-or-work | record/no-decision-or-work/ | phoenix/record/no-decision-or-work/ |

### Record, calendar-item

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Record, calendar-item | record/calendar-item/ | phoenix/record/calendar-item/ |

### Record, unsaved

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Record, unsaved | record/unsaved/ | phoenix/record/unsaved/ |

### Record, shared-columns

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Record, shared-columns | record/shared-columns/ | phoenix/record/shared-columns/ |

### Record, section-links

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Record, section-links | record/section-links/ | phoenix/record/section-links/ |

### Record, inert

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Record, inert | record/inert/ | phoenix/record/inert/ |

### Record, issued-document

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Record, issued-document | record/issued-document/ | phoenix/record/issued-document/ |

## Form · layout

### Form

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Form | form/ | phoenix/form/ |

### Form, standing-alone

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Form, standing-alone | form/standing-alone/ | phoenix/form/standing-alone/ |

### Form, standing-alone leading-tenant

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Form, standing-alone leading-tenant | form/standing-alone/leading-tenant/ | phoenix/form/standing-alone/leading-tenant/ |

### Form, standing-alone following-tenant

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Form, standing-alone following-tenant | form/standing-alone/following-tenant/ | phoenix/form/standing-alone/following-tenant/ |

### Form, no-task-context

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Form, no-task-context | form/no-task-context/ | phoenix/form/no-task-context/ |

### Form, refused-undo

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Form, refused-undo | form/refused-undo/ | phoenix/form/refused-undo/ |

### Form, unsaved

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Form, unsaved | form/unsaved/ | phoenix/form/unsaved/ |

### Form, inert

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Form, inert | form/inert/ | phoenix/form/inert/ |

## Stepped flow · layout

### Stepped flow

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Stepped flow | stepped-flow/ | phoenix/stepped-flow/ |
| Open step in summary | stepped-flow/ | phoenix/stepped-flow/ |
| Empty regions | stepped-flow/ | phoenix/stepped-flow/ |

### Stepped flow, no-summary

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Stepped flow, no-summary | stepped-flow/no-summary/ | phoenix/stepped-flow/no-summary/ |

### Stepped flow, preview

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Stepped flow, preview | stepped-flow/preview/ | phoenix/stepped-flow/preview/ |
| Check records before importing | stepped-flow/preview/ | phoenix/stepped-flow/preview/ |

### Stepped flow, result

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Stepped flow, result | stepped-flow/result/ | phoenix/stepped-flow/result/ |

### Stepped flow, refused-undo

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Stepped flow, refused-undo | stepped-flow/refused-undo/ | phoenix/stepped-flow/refused-undo/ |

### Stepped flow, unsaved

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Stepped flow, unsaved | stepped-flow/unsaved/ | phoenix/stepped-flow/unsaved/ |

### Stepped flow, signed

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Stepped flow, signed | stepped-flow/signed/ | phoenix/stepped-flow/signed/ |

### Stepped flow, inert

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Stepped flow, inert | stepped-flow/inert/ | phoenix/stepped-flow/inert/ |
| A commit that waits. | stepped-flow/inert/ | phoenix/stepped-flow/inert/ |
| A destructive commit that waits. | stepped-flow/inert/ | phoenix/stepped-flow/inert/ |

### Stepped flow, middle-step

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Stepped flow, middle-step | stepped-flow/middle-step/ | phoenix/stepped-flow/middle-step/ |

### Stepped flow, review-step

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Stepped flow, review-step | stepped-flow/review-step/ | phoenix/stepped-flow/review-step/ |

## Settings · layout

### Settings

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Settings | settings/ | phoenix/settings/ |
| Terms and waivers | settings/ | phoenix/settings/ |
| Actions under More | settings/ | phoenix/settings/ |
| Empty regions | settings/ | phoenix/settings/ |
| One section | settings/ | phoenix/settings/ |
| Fields only in a Form Row, a Form Row list or a Headed region | settings/ | phoenix/settings/ |
| Dialog in steps from a section | settings/ | phoenix/settings/ |
| Refused save | settings/ | phoenix/settings/ |
| Consequence of a draft | settings/ | phoenix/settings/ |

### Settings, refused-undo

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Settings, refused-undo | settings/refused-undo/ | phoenix/settings/refused-undo/ |

### Settings, import

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Settings, import | settings/import/ | phoenix/settings/import/ |

### Settings, inert

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Settings, inert | settings/inert/ | phoenix/settings/inert/ |

## Field result · layout

### Field result

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Field result | field-result/ | phoenix/field-result/ |

### Field result, no-navigation

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Field result, no-navigation | field-result/no-navigation/ | phoenix/field-result/no-navigation/ |

### Field result, no-supporting-standing

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Field result, no-supporting-standing | field-result/no-supporting-standing/ | phoenix/field-result/no-supporting-standing/ |

### Field result, refused-undo

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Field result, refused-undo | field-result/refused-undo/ | phoenix/field-result/refused-undo/ |

### Field result, loading

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Field result, loading | field-result/loading/ | phoenix/field-result/loading/ |

### Field result, failed

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Field result, failed | field-result/failed/ | phoenix/field-result/failed/ |

### Field result, processing

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Field result, processing | field-result/processing/ | phoenix/field-result/processing/ |

## Find · layout

### Find

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Find | find/ | phoenix/find/ |
| Search with Scan | find/ | phoenix/find/ |
| Empty regions | find/ | phoenix/find/ |
| Command waiting | find/ | phoenix/find/ |

### Find, refused-undo

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Find, refused-undo | find/refused-undo/ | phoenix/find/refused-undo/ |

## Reports · layout

### Reports

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Reports | reports/ | phoenix/reports/ |
| Empty regions | reports/ | phoenix/reports/ |

### Reports, filters-inert

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Reports, filters-inert | reports/filters-inert/ | phoenix/reports/filters-inert/ |
| On a phone, Filters waits for the report. | reports/filters-inert/ | phoenix/reports/filters-inert/ |
| Empty regions | reports/filters-inert/ | phoenix/reports/filters-inert/ |

## Calendar · layout

### Calendar

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Calendar | calendar/ | phoenix/calendar/ | react/calendar/ |

### Calendar, long-hours

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Calendar, long-hours | calendar/long-hours/ | phoenix/calendar/long-hours/ | react/calendar/long-hours/ |

### Calendar, early-now

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Calendar, early-now | calendar/early-now/ | phoenix/calendar/early-now/ | react/calendar/early-now/ |

### Calendar, bands

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Calendar, bands | calendar/bands/ | phoenix/calendar/bands/ | react/calendar/bands/ |

### Calendar, partial-day-closure

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Calendar, partial-day-closure | calendar/partial-day-closure/ | phoenix/calendar/partial-day-closure/ | react/calendar/partial-day-closure/ |

### Calendar, closure-under-block

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Calendar, closure-under-block | calendar/closure-under-block/ | phoenix/calendar/closure-under-block/ | react/calendar/closure-under-block/ |

### Calendar, whole-day-closure

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Calendar, whole-day-closure | calendar/whole-day-closure/ | phoenix/calendar/whole-day-closure/ | react/calendar/whole-day-closure/ |

### Calendar, overlap

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Calendar, overlap | calendar/overlap/ | phoenix/calendar/overlap/ | react/calendar/overlap/ |

### Calendar, contiguous-run

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Calendar, contiguous-run | calendar/contiguous-run/ | phoenix/calendar/contiguous-run/ | react/calendar/contiguous-run/ |

### Calendar, cancelled

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Calendar, cancelled | calendar/cancelled/ | phoenix/calendar/cancelled/ | react/calendar/cancelled/ |

### Calendar, uncovered

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Calendar, uncovered | calendar/uncovered/ | phoenix/calendar/uncovered/ | react/calendar/uncovered/ |

### Calendar, clashing

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Calendar, clashing | calendar/clashing/ | phoenix/calendar/clashing/ | react/calendar/clashing/ |

### Calendar, covered

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Calendar, covered | calendar/covered/ | phoenix/calendar/covered/ | react/calendar/covered/ |

### Calendar, preparation

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Calendar, preparation | calendar/preparation/ | phoenix/calendar/preparation/ | react/calendar/preparation/ |

### Calendar, day-rooms

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Calendar, day-rooms | calendar/day-rooms/ | phoenix/calendar/day-rooms/ | react/calendar/day-rooms/ |

### Calendar, day-one-column

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Calendar, day-one-column | calendar/day-one-column/ | phoenix/calendar/day-one-column/ | react/calendar/day-one-column/ |

### Calendar, month

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Calendar, month | calendar/month/ | phoenix/calendar/month/ | react/calendar/month/ |

### Calendar, empty

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Calendar, empty | calendar/empty/ | phoenix/calendar/empty/ | react/calendar/empty/ |

### Calendar, moving

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Calendar, moving | calendar/moving/ | phoenix/calendar/moving/ | react/calendar/moving/ |

### Calendar, accepting

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Calendar, accepting | calendar/accepting/ | phoenix/calendar/accepting/ | react/calendar/accepting/ |

### Calendar, refused

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Calendar, refused | calendar/refused/ | phoenix/calendar/refused/ | react/calendar/refused/ |

### Calendar, toolbar-form

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Calendar, toolbar-form | calendar/toolbar-form/ | phoenix/calendar/toolbar-form/ | react/calendar/toolbar-form/ |

### Calendar, at-place

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Calendar, at-place | calendar/at-place/ | phoenix/calendar/at-place/ | react/calendar/at-place/ |

### Calendar, stepping

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Calendar, stepping | calendar/stepping/ | phoenix/calendar/stepping/ | react/calendar/stepping/ |

### Calendar, stepped

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Calendar, stepped | calendar/stepped/ | phoenix/calendar/stepped/ | react/calendar/stepped/ |

### Calendar, saved-behind

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Calendar, saved-behind | calendar/saved-behind/ | phoenix/calendar/saved-behind/ | react/calendar/saved-behind/ |

### Calendar, kinds

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Calendar, kinds | calendar/kinds/ | phoenix/calendar/kinds/ | react/calendar/kinds/ |

### Calendar, kinds-inert

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Calendar, kinds-inert | calendar/kinds-inert/ | phoenix/calendar/kinds-inert/ | react/calendar/kinds-inert/ |

## Help · layout

### Help

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Help | help/ | phoenix/help/ |
| Support closed | help/ | phoenix/help/ |
| Empty regions | help/ | phoenix/help/ |

### Help, refused-undo

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Help, refused-undo | help/refused-undo/ | phoenix/help/refused-undo/ |

## Unavailable · layout

### Unavailable

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Unavailable | unavailable/ | phoenix/unavailable/ |

### Unavailable, standing-alone

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Unavailable, standing-alone | unavailable/standing-alone/ | phoenix/unavailable/standing-alone/ |

### Unavailable, withdrawn

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Unavailable, withdrawn | unavailable/withdrawn/ | phoenix/unavailable/withdrawn/ |

## Issued document · layout

### Issued document

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Issued document | issued-document/ | phoenix/issued-document/ |

### Issued document, paid

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Issued document, paid | issued-document/paid/ | phoenix/issued-document/paid/ |

### Issued document, settled-ended

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Issued document, settled-ended | issued-document/settled-ended/ | phoenix/issued-document/settled-ended/ |

### Issued document, no-wordmark

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Issued document, no-wordmark | issued-document/no-wordmark/ | phoenix/issued-document/no-wordmark/ |

### Issued document, letterhead-image

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Issued document, letterhead-image | issued-document/letterhead-image/ | phoenix/issued-document/letterhead-image/ |

### Issued document, no-particulars

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Issued document, no-particulars | issued-document/no-particulars/ | phoenix/issued-document/no-particulars/ |

### Issued document, register

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Issued document, register | issued-document/register/ | phoenix/issued-document/register/ |

## Showcase · layout

### Showcase

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Showcase | showcase/ | phoenix/showcase/ |

## Identity · role · People

### Identity

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Identity | role-identity/#role-identity | phoenix/role-identity/#role-identity | react/role-identity/#role-identity |

## Avatar · role · People

### Avatar

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| People at Avatar: a picture, initials, a picture whose address answers nothing, an address with no name, and a person no longer present. | role-avatar/#role-avatar | phoenix/role-avatar/#role-avatar | react/role-avatar/#role-avatar |
| The same people at Avatar small. | role-avatar/#role-avatar | phoenix/role-avatar/#role-avatar | react/role-avatar/#role-avatar |
| An Avatar alone, named for its person. | role-avatar/#role-avatar | phoenix/role-avatar/#role-avatar | react/role-avatar/#role-avatar |
| An Avatar alone with availability beside one without, at each size. | role-avatar/#role-avatar | phoenix/role-avatar/#role-avatar | react/role-avatar/#role-avatar |
| A group of five: three circles and the rest counted, opening the people. | role-avatar/#role-avatar | phoenix/role-avatar/#role-avatar | react/role-avatar/#role-avatar |
| A group of two, with no count, one of them away. | role-avatar/#role-avatar | phoenix/role-avatar/#role-avatar | react/role-avatar/#role-avatar |

## Presence · role · People

### Presence

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Others on the page, one of them editing, opening who each is and what they are doing. | role-presence/#role-presence | phoenix/role-presence/#role-presence |
| A heading with its editor, hidden at phone. | role-presence/#role-presence | phoenix/role-presence/#role-presence |

## Label panel · role · Facts and records

### Label panel

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Label panel | role-label-panel/#role-label-panel | phoenix/role-label-panel/#role-label-panel | react/role-label-panel/#role-label-panel |
| One Secondary action follows the words. | role-label-panel/#role-label-panel | phoenix/role-label-panel/#role-label-panel | react/role-label-panel/#role-label-panel |
| Each action is a form of its own. | role-label-panel/#role-label-panel | phoenix/role-label-panel/#role-label-panel | react/role-label-panel/#role-label-panel |
| Form groups stand before the Primary action. | role-label-panel/#role-label-panel | phoenix/role-label-panel/#role-label-panel | react/role-label-panel/#role-label-panel |
| One group of actions, stacking at Phone. | role-label-panel/#role-label-panel | phoenix/role-label-panel/#role-label-panel | react/role-label-panel/#role-label-panel |

### Label panel, unsaved

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| A form reopened holding the entry kept on this device. | role-label-panel/#role-label-panel-unsaved | phoenix/role-label-panel/#role-label-panel-unsaved | react/role-label-panel/#role-label-panel-unsaved |

## Stamp · role · Facts and records

### Stamp, attention

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Stamp, attention | role-stamp/#role-stamp-attention | phoenix/role-stamp/#role-stamp-attention | react/role-stamp/#role-stamp-attention |

### Stamp, alert

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Stamp, alert | role-stamp/#role-stamp-alert | phoenix/role-stamp/#role-stamp-alert | react/role-stamp/#role-stamp-alert |

### Stamp, settled

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Stamp, settled | role-stamp/#role-stamp-settled | phoenix/role-stamp/#role-stamp-settled | react/role-stamp/#role-stamp-settled |

### Stamp, settled-ended

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Stamp, settled-ended | role-stamp/#role-stamp-settled-ended | phoenix/role-stamp/#role-stamp-settled-ended | react/role-stamp/#role-stamp-settled-ended |

### Stamp, neutral

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Stamp, neutral | role-stamp/#role-stamp-neutral | phoenix/role-stamp/#role-stamp-neutral | react/role-stamp/#role-stamp-neutral |

## Row · role · Facts and records

### Row

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Two facts and the supporting line stay on desktop. | role-row/#role-row | phoenix/role-row/#role-row | react/role-row/#role-row |
| A closed question: Ava's answer is recorded and Ben has none. | role-row/#role-row | phoenix/role-row/#role-row | react/role-row/#role-row |
| Collection is closed. Clara has a recorded answer; Daniel has none. | role-row/#role-row | phoenix/role-row/#role-row | react/role-row/#role-row |
| A room whose name opens its details. | role-row/#role-row | phoenix/role-row/#role-row | react/role-row/#role-row |
| A Row of several separate facts that wrap as whole facts. | role-row/#role-row | phoenix/role-row/#role-row | react/role-row/#role-row |
| A supporting line of long words that ends in a time. | role-row/#role-row | phoenix/role-row/#role-row | react/role-row/#role-row |
| A run at the Desk width: one Row folds its actions into More, and one without More wraps them. | role-row/#role-row | phoenix/role-row/#role-row | react/role-row/#role-row |
| A run whose Rows each hold an inert action and its words. | role-row/#role-row | phoenix/role-row/#role-row | react/role-row/#role-row |
| A Row at the Desk width whose actions wrap where no fold remains. | role-row/#role-row | phoenix/role-row/#role-row | react/role-row/#role-row |
| A run at the Desk width whose Stamps wrap at their words where nothing else fits. | role-row/#role-row | phoenix/role-row/#role-row | react/role-row/#role-row |
| A question at the Desk width whose actions wrap where no fold remains. | role-row/#role-row | phoenix/role-row/#role-row | react/role-row/#role-row |
| A question whose label wraps. | role-row/#role-row | phoenix/role-row/#role-row | react/role-row/#role-row |
| A question whose act sends an email, its preview before the actions. | role-row/#role-row | phoenix/role-row/#role-row | react/role-row/#role-row |
| A question answered in a Dialog, with its whole Scope line. | role-row/#role-row | phoenix/role-row/#role-row | react/role-row/#role-row |
| An email as the subject. | role-row/#role-row | phoenix/role-row/#role-row | react/role-row/#role-row |
| A web address as the subject. | role-row/#role-row | phoenix/role-row/#role-row | react/role-row/#role-row |
| A person as the subject, with their availability. | role-row/#role-row | phoenix/role-row/#role-row | react/role-row/#role-row |
| An unread notification. | role-row/#role-row | phoenix/role-row/#role-row | react/role-row/#role-row |
| Show a row arriving | role-row/#role-row | phoenix/role-row/#role-row | react/role-row/#role-row |

### Row, selected

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Row, selected | role-row/#role-row-selected | phoenix/role-row/#role-row-selected | react/role-row/#role-row-selected |

### Row, expanded

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Row, expanded | role-row/#role-row-expanded | phoenix/role-row/#role-row-expanded | react/role-row/#role-row-expanded |

### Row, failed

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| On a Row. | role-row/#role-row-failed | phoenix/role-row/#role-row-failed | react/role-row/#role-row-failed |
| On a records row. | role-row/#role-row-failed | phoenix/role-row/#role-row-failed | react/role-row/#role-row-failed |
| On a Row with Try again unavailable. | role-row/#role-row-failed | phoenix/role-row/#role-row-failed | react/role-row/#role-row-failed |
| On a records row with Try again unavailable. | role-row/#role-row-failed | phoenix/role-row/#role-row-failed | react/role-row/#role-row-failed |

### Row, conflict

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| On a Row. | role-row/#role-row-conflict | phoenix/role-row/#role-row-conflict | react/role-row/#role-row-conflict |
| On a records row. | role-row/#role-row-conflict | phoenix/role-row/#role-row-conflict | react/role-row/#role-row-conflict |
| On a Row with the action unavailable. | role-row/#role-row-conflict | phoenix/role-row/#role-row-conflict | react/role-row/#role-row-conflict |
| On a records row with the action unavailable. | role-row/#role-row-conflict | phoenix/role-row/#role-row-conflict | react/role-row/#role-row-conflict |

### Row, processing

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| On a Row. | role-row/#role-row-processing | phoenix/role-row/#role-row-processing | react/role-row/#role-row-processing |
| On a records row. | role-row/#role-row-processing | phoenix/role-row/#role-row-processing | react/role-row/#role-row-processing |

### Row, unsaved

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| On a Row. | role-row/#role-row-unsaved | phoenix/role-row/#role-row-unsaved | react/role-row/#role-row-unsaved |
| On a records row. | role-row/#role-row-unsaved | phoenix/role-row/#role-row-unsaved | react/role-row/#role-row-unsaved |

## Reordering · role · Facts and records

### Reordering

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Rows in an order you set, one selected, and Main hall waiting for the order to be saved. | role-reordering/#role-reordering | phoenix/role-reordering/#role-reordering | react/role-reordering/#role-reordering |
| A List's records table with its handle column, one row selected, and Move in each row's actions. | role-reordering/#role-reordering | phoenix/role-reordering/#role-reordering |  |
| A table of records grouped by standing, the last group closed, whose Move dialog offers the groups, and one row whose move was refused. | role-reordering/#role-reordering | phoenix/role-reordering/#role-reordering | react/role-reordering/#role-reordering |
| Records with identifier subjects. | role-reordering/#role-reordering | phoenix/role-reordering/#role-reordering | react/role-reordering/#role-reordering |
| Identifier subjects in the rows print form. | role-reordering/#role-reordering | phoenix/role-reordering/#role-reordering | react/role-reordering/#role-reordering |
| A total without a supporting price. | role-reordering/#role-reordering | phoenix/role-reordering/#role-reordering | react/role-reordering/#role-reordering |
| A total with a credit card price underneath. | role-reordering/#role-reordering | phoenix/role-reordering/#role-reordering | react/role-reordering/#role-reordering |
| The same total, printed as labelled rows. | role-reordering/#role-reordering | phoenix/role-reordering/#role-reordering | react/role-reordering/#role-reordering |
| A total with a credit card price beneath its name. | role-reordering/#role-reordering | phoenix/role-reordering/#role-reordering | react/role-reordering/#role-reordering |
| The Move dialog, opened on its own. | role-reordering/#role-reordering | phoenix/role-reordering/#role-reordering | react/role-reordering/#role-reordering |

### Reordering, moving

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Reordering, moving | role-reordering/moving/ | phoenix/role-reordering/moving/ | react/role-reordering/moving/ |
| Rooms waiting for their order to be checked. | role-reordering/moving/ | phoenix/role-reordering/moving/ | react/role-reordering/moving/ |

## Card · role · Facts and records

### Card

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Card | role-card/#role-card | phoenix/role-card/#role-card |

### Card, failed

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Card, failed | role-card/#role-card-failed | phoenix/role-card/#role-card-failed |
| With Try again unavailable. | role-card/#role-card-failed | phoenix/role-card/#role-card-failed |

### Card, conflict

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Card, conflict | role-card/#role-card-conflict | phoenix/role-card/#role-card-conflict |
| With the action unavailable. | role-card/#role-card-conflict | phoenix/role-card/#role-card-conflict |

### Card, processing

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Card, processing | role-card/#role-card-processing | phoenix/role-card/#role-card-processing |

### Card, unsaved

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Card, unsaved | role-card/#role-card-unsaved | phoenix/role-card/#role-card-unsaved |

## Tag · role · Facts and records

### Tag

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| A run of three Tags in three colours. | role-tag/#role-tag | phoenix/role-tag/#role-tag | react/role-tag/#role-tag |
| A Tag linking to its List. | role-tag/#role-tag | phoenix/role-tag/#role-tag | react/role-tag/#role-tag |
| A long name cut at its end. | role-tag/#role-tag | phoenix/role-tag/#role-tag | react/role-tag/#role-tag |

### Tag, open

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| A run past its count of three, folding the rest into its count. | role-tag/#role-tag-open | phoenix/role-tag/#role-tag-open | react/role-tag/#role-tag-open |
| A run whose count waits for the booking. | role-tag/#role-tag-open | phoenix/role-tag/#role-tag-open | react/role-tag/#role-tag-open |

## Labelled fact · role · Facts and records

### Labelled fact

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Amount, Stamp, Tag and Image values keep their roles. | role-labelled-fact/#role-labelled-fact | phoenix/role-labelled-fact/#role-labelled-fact | react/role-labelled-fact/#role-labelled-fact |
| Billing email waiting to be edited. | role-labelled-fact/#role-labelled-fact | phoenix/role-labelled-fact/#role-labelled-fact | react/role-labelled-fact/#role-labelled-fact |
| A value in words carries its Amount within the sentence. | role-labelled-fact/#role-labelled-fact | phoenix/role-labelled-fact/#role-labelled-fact | react/role-labelled-fact/#role-labelled-fact |
| A value written across lines stands under its label, beside a sentence carrying an Amount. | role-labelled-fact/#role-labelled-fact | phoenix/role-labelled-fact/#role-labelled-fact | react/role-labelled-fact/#role-labelled-fact |
| A Labelled fact in a records table cell keeps its sentence. | role-labelled-fact/#role-labelled-fact | phoenix/role-labelled-fact/#role-labelled-fact |  |
| A value given an address stands inside a link named by its label; the current one is marked. | role-labelled-fact/#role-labelled-fact | phoenix/role-labelled-fact/#role-labelled-fact | react/role-labelled-fact/#role-labelled-fact |
| A Labelled fact in its div form holding a note. | role-labelled-fact/#role-labelled-fact | phoenix/role-labelled-fact/#role-labelled-fact | react/role-labelled-fact/#role-labelled-fact |

### Labelled fact, failed

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Labelled fact, failed | role-labelled-fact/#role-labelled-fact-failed | phoenix/role-labelled-fact/#role-labelled-fact-failed | react/role-labelled-fact/#role-labelled-fact-failed |
| With Try again unavailable. | role-labelled-fact/#role-labelled-fact-failed | phoenix/role-labelled-fact/#role-labelled-fact-failed | react/role-labelled-fact/#role-labelled-fact-failed |
| With the edit open. | role-labelled-fact/#role-labelled-fact-failed | phoenix/role-labelled-fact/#role-labelled-fact-failed | react/role-labelled-fact/#role-labelled-fact-failed |

### Labelled fact, conflict

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Labelled fact, conflict | role-labelled-fact/#role-labelled-fact-conflict | phoenix/role-labelled-fact/#role-labelled-fact-conflict | react/role-labelled-fact/#role-labelled-fact-conflict |
| With the action unavailable. | role-labelled-fact/#role-labelled-fact-conflict | phoenix/role-labelled-fact/#role-labelled-fact-conflict | react/role-labelled-fact/#role-labelled-fact-conflict |

### Labelled fact, processing

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Labelled fact, processing | role-labelled-fact/#role-labelled-fact-processing | phoenix/role-labelled-fact/#role-labelled-fact-processing | react/role-labelled-fact/#role-labelled-fact-processing |

## Fact group · role · Facts and records

### Fact group

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| A long date and time and a date range stay within four facts. | role-fact-group/#role-fact-group | phoenix/role-fact-group/#role-fact-group | react/role-fact-group/#role-fact-group |
| A lone fact stands in its group. | role-fact-group/#role-fact-group | phoenix/role-fact-group/#role-fact-group | react/role-fact-group/#role-fact-group |
| Amount and Stamp values pair at Phone; a value wider than its half takes its own line. | role-fact-group/#role-fact-group | phoenix/role-fact-group/#role-fact-group | react/role-fact-group/#role-fact-group |
| A plain-text value keeps one fact to a line at Phone, with a form following. | role-fact-group/#role-fact-group | phoenix/role-fact-group/#role-fact-group |  |
| A Fact group stands before Record rows. | role-fact-group/#role-fact-group | phoenix/role-fact-group/#role-fact-group |  |
| A Fact group stands before a List. | role-fact-group/#role-fact-group | phoenix/role-fact-group/#role-fact-group |  |
| A choice keeps Form groups before its action. | role-fact-group/#role-fact-group | phoenix/role-fact-group/#role-fact-group | react/role-fact-group/#role-fact-group |
| A choice has no Form group before its action. | role-fact-group/#role-fact-group | phoenix/role-fact-group/#role-fact-group | react/role-fact-group/#role-fact-group |

## Headed region · role · Facts and records

### Headed region

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Headed region | role-headed-region/#role-headed-region | phoenix/role-headed-region/#role-headed-region | react/role-headed-region/#role-headed-region |
| A lone Fact group needs no Headed region. | role-headed-region/#role-headed-region | phoenix/role-headed-region/#role-headed-region | react/role-headed-region/#role-headed-region |
| A Headed region inside a Row, before its expansion. | role-headed-region/#role-headed-region | phoenix/role-headed-region/#role-headed-region | react/role-headed-region/#role-headed-region |
| A nested Headed region with nothing in it. | role-headed-region/#role-headed-region | phoenix/role-headed-region/#role-headed-region | react/role-headed-region/#role-headed-region |
| A nested Headed region holding a note as it was written. | role-headed-region/#role-headed-region | phoenix/role-headed-region/#role-headed-region | react/role-headed-region/#role-headed-region |
| A Headed region whose content is a note as it was written. | role-headed-region/#role-headed-region | phoenix/role-headed-region/#role-headed-region | react/role-headed-region/#role-headed-region |
| A nested heading names its week in dates. | role-headed-region/#role-headed-region | phoenix/role-headed-region/#role-headed-region | react/role-headed-region/#role-headed-region |
| A Headed region with a Notice at its head. | role-headed-region/#role-headed-region | phoenix/role-headed-region/#role-headed-region | react/role-headed-region/#role-headed-region |

### Headed region, inert

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| A region whose actions wait. | role-headed-region/#role-headed-region-inert | phoenix/role-headed-region/#role-headed-region-inert | react/role-headed-region/#role-headed-region-inert |
| A region inside another, its actions waiting. | role-headed-region/#role-headed-region-inert | phoenix/role-headed-region/#role-headed-region-inert | react/role-headed-region/#role-headed-region-inert |

## Scope line · role · Facts and records

### Scope line

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Scope line | role-scope-line/#role-scope-line | phoenix/role-scope-line/#role-scope-line |  |
| A Scope line beneath a section's standing facts, outside them. | role-scope-line/#role-scope-line | phoenix/role-scope-line/#role-scope-line |  |
| A Scope line in a Row, a Stack beneath its facts and a Stack above its question. | role-scope-line/#role-scope-line | phoenix/role-scope-line/#role-scope-line | react/role-scope-line/#role-scope-line |

## Tree · role · Facts and records

### Tree

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Tree | role-tree/#role-tree | phoenix/role-tree/#role-tree | react/role-tree/#role-tree |

## Disclosure · role · Facts and records

### Disclosure

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Disclosure | role-disclosure/#role-disclosure | phoenix/role-disclosure/#role-disclosure | react/role-disclosure/#role-disclosure |

### Disclosure, expanded

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Disclosure, expanded | role-disclosure/#role-disclosure-expanded | phoenix/role-disclosure/#role-disclosure-expanded | react/role-disclosure/#role-disclosure-expanded |

## Message entry · role · Facts and records

### Message entry

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Message entry | role-message-entry/#role-message-entry | phoenix/role-message-entry/#role-message-entry | react/role-message-entry/#role-message-entry |
| With one action unavailable among the others. | role-message-entry/#role-message-entry | phoenix/role-message-entry/#role-message-entry | react/role-message-entry/#role-message-entry |
| While a model’s turn saves, How this was made waits. | role-message-entry/#role-message-entry | phoenix/role-message-entry/#role-message-entry | react/role-message-entry/#role-message-entry |

### Message entry, failed

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Message entry, failed | role-message-entry/#role-message-entry-failed | phoenix/role-message-entry/#role-message-entry-failed | react/role-message-entry/#role-message-entry-failed |
| With Try again unavailable. | role-message-entry/#role-message-entry-failed | phoenix/role-message-entry/#role-message-entry-failed | react/role-message-entry/#role-message-entry-failed |

### Message entry, conflict

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Message entry, conflict | role-message-entry/#role-message-entry-conflict | phoenix/role-message-entry/#role-message-entry-conflict | react/role-message-entry/#role-message-entry-conflict |
| With the action unavailable. | role-message-entry/#role-message-entry-conflict | phoenix/role-message-entry/#role-message-entry-conflict | react/role-message-entry/#role-message-entry-conflict |

### Message entry, processing

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Message entry, processing | role-message-entry/#role-message-entry-processing | phoenix/role-message-entry/#role-message-entry-processing | react/role-message-entry/#role-message-entry-processing |

### Message entry, unsaved

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Message entry, unsaved | role-message-entry/#role-message-entry-unsaved | phoenix/role-message-entry/#role-message-entry-unsaved | react/role-message-entry/#role-message-entry-unsaved |

## Generated · role · Facts and records

### Generated

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| A reply, with its sources | role-generated/#role-generated | phoenix/role-generated/#role-generated | react/role-generated/#role-generated |
| A reply while its actions wait | role-generated/#role-generated | phoenix/role-generated/#role-generated | react/role-generated/#role-generated |
| A summary, with no sources | role-generated/#role-generated | phoenix/role-generated/#role-generated | react/role-generated/#role-generated |
| A field a model filled | role-generated/#role-generated | phoenix/role-generated/#role-generated | react/role-generated/#role-generated |
| A model’s turn | role-generated/#role-generated | phoenix/role-generated/#role-generated | react/role-generated/#role-generated |
| A fact a model wrote | role-generated/#role-generated | phoenix/role-generated/#role-generated | react/role-generated/#role-generated |
| An open expansion | role-generated/#role-generated | phoenix/role-generated/#role-generated | react/role-generated/#role-generated |

### Generated, streaming

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Generated, streaming | role-generated/#role-generated-streaming | phoenix/role-generated/#role-generated-streaming | react/role-generated/#role-generated-streaming |
| While the page loads, Stop and How this was made wait. | role-generated/#role-generated-streaming | phoenix/role-generated/#role-generated-streaming | react/role-generated/#role-generated-streaming |

## List line · role · Facts and records

### List line

| Case | CSS core | Phoenix |
| --- | --- | --- |
| List line | role-list-line/#role-list-line | phoenix/role-list-line/#role-list-line |

### List line, read

| Case | CSS core | Phoenix |
| --- | --- | --- |
| List line, read | role-list-line/#role-list-line-read | phoenix/role-list-line/#role-list-line-read |

## Amount · role · Facts and records

### Amount

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Amount | role-amount/#role-amount | phoenix/role-amount/#role-amount | react/role-amount/#role-amount |
| A measure carries its unit in the short form. | role-amount/#role-amount | phoenix/role-amount/#role-amount | react/role-amount/#role-amount |
| A number with no unit stands in its decimals. | role-amount/#role-amount | phoenix/role-amount/#role-amount | react/role-amount/#role-amount |
| A unit a studio names stands as written, at one as at many. | role-amount/#role-amount | phoenix/role-amount/#role-amount | react/role-amount/#role-amount |

## Time · role · Facts and records

### Time

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Time | role-time/#role-time | phoenix/role-time/#role-time | react/role-time/#role-time |
| A time at a place in another zone names that zone. | role-time/#role-time | phoenix/role-time/#role-time | react/role-time/#role-time |
| A place whose country keeps several zones is named by its zone, never a city. | role-time/#role-time | phoenix/role-time/#role-time | react/role-time/#role-time |
| An interval at a place names its zone once, after the interval. | role-time/#role-time | phoenix/role-time/#role-time | react/role-time/#role-time |
| A table at a place names its zone once, after its caption. | role-time/#role-time | phoenix/role-time/#role-time | react/role-time/#role-time |
| A range of times states only the parts that differ. | role-time/#role-time | phoenix/role-time/#role-time | react/role-time/#role-time |
| An interval with its day states the day once. | role-time/#role-time | phoenix/role-time/#role-time | react/role-time/#role-time |
| An interval carries the weekday where its role names it. | role-time/#role-time | phoenix/role-time/#role-time | react/role-time/#role-time |
| An interval with its day and weekday takes the reader's locale. | role-time/#role-time | phoenix/role-time/#role-time | react/role-time/#role-time |
| A moment in another locale reads whole in that locale's script. | role-time/#role-time | phoenix/role-time/#role-time | react/role-time/#role-time |
| A month states its month and year alone. | role-time/#role-time | phoenix/role-time/#role-time | react/role-time/#role-time |
| A long date and time and a date range wrap between their parts. | role-time/#role-time | phoenix/role-time/#role-time | react/role-time/#role-time |
| A duration states its hours and minutes, and a day or more stays in hours. | role-time/#role-time | phoenix/role-time/#role-time | react/role-time/#role-time |
| A duration in another locale takes that locale's own words. | role-time/#role-time | phoenix/role-time/#role-time | react/role-time/#role-time |

## Chart · role · Facts and records

### Chart

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Chart | role-chart/#role-chart | phoenix/role-chart/#role-chart | react/role-chart/#role-chart |

## Copyable · role · Facts and records

### Copyable

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Copyable | role-copyable/#role-copyable | phoenix/role-copyable/#role-copyable | react/role-copyable/#role-copyable |

### Copyable, copied

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Copyable, copied | role-copyable/#role-copyable-copied | phoenix/role-copyable/#role-copyable-copied | react/role-copyable/#role-copyable-copied |

### Copyable, inert

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Copyable, inert | role-copyable/#role-copyable-inert | phoenix/role-copyable/#role-copyable-inert | react/role-copyable/#role-copyable-inert |

## Scan code · role · Facts and records

### Scan code

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Scan code | role-scan-code/#role-scan-code | phoenix/role-scan-code/#role-scan-code |

## Redline · role · Facts and records

### Redline

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Redline | role-redline/#role-redline | phoenix/role-redline/#role-redline |
| Twelve changes, stepped through in order across prose, lists, blocks and tables. | role-redline/#role-redline | phoenix/role-redline/#role-redline |

## Form group · role · Fields

### Form group

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Form group | role-form-group/#role-form-group | phoenix/role-form-group/#role-form-group | react/role-form-group/#role-form-group |
| Room selection while bookings cannot be changed. | role-form-group/#role-form-group | phoenix/role-form-group/#role-form-group | react/role-form-group/#role-form-group |
| A field that may be left empty, empty and filled, beside a required field. | role-form-group/#role-form-group | phoenix/role-form-group/#role-form-group | react/role-form-group/#role-form-group |
| A search holding text, with Clear. | role-form-group/#role-form-group | phoenix/role-form-group/#role-form-group | react/role-form-group/#role-form-group |
| A search for booking references, with Clear and Scan. | role-form-group/#role-form-group | phoenix/role-form-group/#role-form-group | react/role-form-group/#role-form-group |
| A field that takes a paste of several lines. | role-form-group/#role-form-group | phoenix/role-form-group/#role-form-group | react/role-form-group/#role-form-group |
| A password that cannot be changed, with Show disabled. | role-form-group/#role-form-group | phoenix/role-form-group/#role-form-group | react/role-form-group/#role-form-group |
| A booking reference that cannot be changed, with Scan disabled. | role-form-group/#role-form-group | phoenix/role-form-group/#role-form-group | react/role-form-group/#role-form-group |
| A file that cannot be changed, with its selector disabled. | role-form-group/#role-form-group | phoenix/role-form-group/#role-form-group | react/role-form-group/#role-form-group |
| Files that cannot be changed, with their selector and Remove disabled. | role-form-group/#role-form-group | phoenix/role-form-group/#role-form-group | react/role-form-group/#role-form-group |
| A search that cannot be changed, with Clear disabled. | role-form-group/#role-form-group | phoenix/role-form-group/#role-form-group | react/role-form-group/#role-form-group |
| A note that can mention people and jobs. | role-form-group/#role-form-group | phoenix/role-form-group/#role-form-group | react/role-form-group/#role-form-group |
| A note that cannot be changed. | role-form-group/#role-form-group | phoenix/role-form-group/#role-form-group | react/role-form-group/#role-form-group |
| A description that takes headings, lists, checklists, quotes, code, mentions, dates and files. | role-form-group/#role-form-group | phoenix/role-form-group/#role-form-group | react/role-form-group/#role-form-group |

### Form group, error

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| The email control is described by its help, then its error, and is invalid. | role-form-group/#role-form-group-error | phoenix/role-form-group/#role-form-group-error | react/role-form-group/#role-form-group-error |

### Form group, shown

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Form group, shown | role-form-group/#role-form-group-shown | phoenix/role-form-group/#role-form-group-shown | react/role-form-group/#role-form-group-shown |
| A shown password that cannot be changed, with Hide disabled. | role-form-group/#role-form-group-shown | phoenix/role-form-group/#role-form-group-shown | react/role-form-group/#role-form-group-shown |

### Form group, chosen

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Form group, chosen | role-form-group/#role-form-group-chosen | phoenix/role-form-group/#role-form-group-chosen | react/role-form-group/#role-form-group-chosen |

### Form group, uploading

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Form group, uploading | role-form-group/#role-form-group-uploading | phoenix/role-form-group/#role-form-group-uploading | react/role-form-group/#role-form-group-uploading |

### Form group, uploaded

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Form group, uploaded | role-form-group/#role-form-group-uploaded | phoenix/role-form-group/#role-form-group-uploaded | react/role-form-group/#role-form-group-uploaded |
| An uploaded file whose name opens it. | role-form-group/#role-form-group-uploaded | phoenix/role-form-group/#role-form-group-uploaded | react/role-form-group/#role-form-group-uploaded |

### Form group, refused

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Form group, refused | role-form-group/#role-form-group-refused | phoenix/role-form-group/#role-form-group-refused | react/role-form-group/#role-form-group-refused |

## Ways in · role · Fields

### Ways in

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Ways in | role-ways-in/#role-ways-in | phoenix/role-ways-in/#role-ways-in | react/role-ways-in/#role-ways-in |
| Email opened | role-ways-in/#role-ways-in | phoenix/role-ways-in/#role-ways-in | react/role-ways-in/#role-ways-in |
| Mobile number leads | role-ways-in/#role-ways-in | phoenix/role-ways-in/#role-ways-in | react/role-ways-in/#role-ways-in |
| Google refused | role-ways-in/#role-ways-in | phoenix/role-ways-in/#role-ways-in | react/role-ways-in/#role-ways-in |
| Without a way | role-ways-in/#role-ways-in | phoenix/role-ways-in/#role-ways-in | react/role-ways-in/#role-ways-in |
| Without a surrounding form | role-ways-in/#role-ways-in | phoenix/role-ways-in/#role-ways-in | react/role-ways-in/#role-ways-in |

### Ways in, inert

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Ways in, inert | role-ways-in/#role-ways-in-inert | phoenix/role-ways-in/#role-ways-in-inert | react/role-ways-in/#role-ways-in-inert |

## Selection control · role · Fields

### Selection control

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Selection control | role-selection-control/#role-selection-control | phoenix/role-selection-control/#role-selection-control | react/role-selection-control/#role-selection-control |

### Selection control, checked

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Selection control, checked | role-selection-control/#role-selection-control-checked | phoenix/role-selection-control/#role-selection-control-checked | react/role-selection-control/#role-selection-control-checked |

### Selection control, mixed

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Selection control, mixed | role-selection-control/#role-selection-control-mixed | phoenix/role-selection-control/#role-selection-control-mixed | react/role-selection-control/#role-selection-control-mixed |

### Selection control, disabled

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Selection control, disabled | role-selection-control/#role-selection-control-disabled | phoenix/role-selection-control/#role-selection-control-disabled | react/role-selection-control/#role-selection-control-disabled |

### Selection control, group

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Selection control, group | role-selection-control/#role-selection-control-group | phoenix/role-selection-control/#role-selection-control-group | react/role-selection-control/#role-selection-control-group |

### Selection control, group error

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Selection control, group error | role-selection-control/#role-selection-control-group-error | phoenix/role-selection-control/#role-selection-control-group-error | react/role-selection-control/#role-selection-control-group-error |

## Record picker · role · Fields

### Record picker

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Record picker | role-record-picker/#role-record-picker | phoenix/role-record-picker/#role-record-picker | react/role-record-picker/#role-record-picker |
| Cannot be changed | role-record-picker/#role-record-picker | phoenix/role-record-picker/#role-record-picker | react/role-record-picker/#role-record-picker |

### Record picker, open

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Record picker, open | role-record-picker/open/ | phoenix/role-record-picker/open/ | react/role-record-picker/open/ |

### Record picker, more

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Record picker, more | role-record-picker/more/ | phoenix/role-record-picker/more/ | react/role-record-picker/more/ |

### Record picker, none

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Record picker, none | role-record-picker/none/ | phoenix/role-record-picker/none/ | react/role-record-picker/none/ |

### Record picker, loading

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Record picker, loading | role-record-picker/loading/ | phoenix/role-record-picker/loading/ | react/role-record-picker/loading/ |

## Multi-value picker · role · Fields

### Multi-value picker

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Multi-value picker | role-multi-value-picker/#role-multi-value-picker | phoenix/role-multi-value-picker/#role-multi-value-picker | react/role-multi-value-picker/#role-multi-value-picker |
| Cannot be changed | role-multi-value-picker/#role-multi-value-picker | phoenix/role-multi-value-picker/#role-multi-value-picker | react/role-multi-value-picker/#role-multi-value-picker |

### Multi-value picker, open

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Multi-value picker, open | role-multi-value-picker/open/ | phoenix/role-multi-value-picker/open/ | react/role-multi-value-picker/open/ |

### Multi-value picker, matches

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Multi-value picker, matches | role-multi-value-picker/matches/ | phoenix/role-multi-value-picker/matches/ | react/role-multi-value-picker/matches/ |

### Multi-value picker, tags

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Multi-value picker, tags | role-multi-value-picker/#role-multi-value-picker-tags | phoenix/role-multi-value-picker/#role-multi-value-picker-tags | react/role-multi-value-picker/#role-multi-value-picker-tags |

## Date field · role · Fields

### Date field

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Date field | role-date-field/#role-date-field | phoenix/role-date-field/#role-date-field | react/role-date-field/#role-date-field |
| Month grain on Date field | role-date-field/#role-date-field | phoenix/role-date-field/#role-date-field | react/role-date-field/#role-date-field |
| First and last billing month on Date field | role-date-field/#role-date-field | phoenix/role-date-field/#role-date-field | react/role-date-field/#role-date-field |
| Cannot be changed | role-date-field/#role-date-field | phoenix/role-date-field/#role-date-field | react/role-date-field/#role-date-field |

### Date field, open

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Date field, open | role-date-field/open/ | phoenix/role-date-field/open/ | react/role-date-field/open/ |

## Date range · role · Fields

### Date range

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Date range | role-date-range/#role-date-range | phoenix/role-date-range/#role-date-range | react/role-date-range/#role-date-range |
| Required range with Until left open | role-date-range/#role-date-range | phoenix/role-date-range/#role-date-range | react/role-date-range/#role-date-range |
| Required range with From left open | role-date-range/#role-date-range | phoenix/role-date-range/#role-date-range | react/role-date-range/#role-date-range |
| Required range with either end left open | role-date-range/#role-date-range | phoenix/role-date-range/#role-date-range | react/role-date-range/#role-date-range |
| Comparing seasons | role-date-range/#role-date-range | phoenix/role-date-range/#role-date-range | react/role-date-range/#role-date-range |
| Month grain on Date range | role-date-range/#role-date-range | phoenix/role-date-range/#role-date-range | react/role-date-range/#role-date-range |
| Date filter on or after a day | role-date-range/#role-date-range | phoenix/role-date-range/#role-date-range | react/role-date-range/#role-date-range |
| Date filter on or before a day | role-date-range/#role-date-range | phoenix/role-date-range/#role-date-range | react/role-date-range/#role-date-range |
| Date filter between two days | role-date-range/#role-date-range | phoenix/role-date-range/#role-date-range | react/role-date-range/#role-date-range |
| Cannot be changed | role-date-range/#role-date-range | phoenix/role-date-range/#role-date-range | react/role-date-range/#role-date-range |

### Date range, open

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Date range, open | role-date-range/open/ | phoenix/role-date-range/open/ | react/role-date-range/open/ |

## Time field · role · Fields

### Time field

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Time field | role-time-field/#role-time-field | phoenix/role-time-field/#role-time-field | react/role-time-field/#role-time-field |
| Cannot be changed | role-time-field/#role-time-field | phoenix/role-time-field/#role-time-field | react/role-time-field/#role-time-field |

### Time field, open

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Time field, open | role-time-field/open/ | phoenix/role-time-field/open/ | react/role-time-field/open/ |

## Number field · role · Fields

### Number field

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Number field | role-number-field/#role-number-field | phoenix/role-number-field/#role-number-field | react/role-number-field/#role-number-field |
| Cannot be changed | role-number-field/#role-number-field | phoenix/role-number-field/#role-number-field | react/role-number-field/#role-number-field |

## Switch · role · Fields

### Switch

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Switch | role-switch/#role-switch | phoenix/role-switch/#role-switch | react/role-switch/#role-switch |

### Switch, processing

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Switch, processing | role-switch/#role-switch-processing | phoenix/role-switch/#role-switch-processing | react/role-switch/#role-switch-processing |

## Slider · role · Fields

### Slider

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Slider | role-slider/#role-slider | phoenix/role-slider/#role-slider | react/role-slider/#role-slider |
| Cannot be changed | role-slider/#role-slider | phoenix/role-slider/#role-slider | react/role-slider/#role-slider |

## Segmented control · role · Fields

### Segmented control

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Segmented control | role-segmented-control/#role-segmented-control | phoenix/role-segmented-control/#role-segmented-control | react/role-segmented-control/#role-segmented-control |
| Charge by while bookings cannot be changed. | role-segmented-control/#role-segmented-control | phoenix/role-segmented-control/#role-segmented-control | react/role-segmented-control/#role-segmented-control |

## Rating · role · Fields

### Rating

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Rating | role-rating/#role-rating | phoenix/role-rating/#role-rating | react/role-rating/#role-rating |
| Your rating while bookings cannot be changed. | role-rating/#role-rating | phoenix/role-rating/#role-rating | react/role-rating/#role-rating |

## Colour picker · role · Fields

### Colour picker

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Colour picker | role-colour-picker/#role-colour-picker | phoenix/role-colour-picker/#role-colour-picker | react/role-colour-picker/#role-colour-picker |
| Cannot be changed | role-colour-picker/#role-colour-picker | phoenix/role-colour-picker/#role-colour-picker | react/role-colour-picker/#role-colour-picker |

### Colour picker, open

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Colour picker, open | role-colour-picker/open/ | phoenix/role-colour-picker/open/ | react/role-colour-picker/open/ |

## One-time code · role · Fields

### One-time code

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| One-time code | role-one-time-code/#role-one-time-code | phoenix/role-one-time-code/#role-one-time-code | react/role-one-time-code/#role-one-time-code |

## Conditions builder · role · Fields

### Conditions builder

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Conditions builder | role-conditions-builder/#role-conditions-builder | phoenix/role-conditions-builder/#role-conditions-builder | react/role-conditions-builder/#role-conditions-builder |

## Action group · role · Actions

### Action group

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Action group | role-action-group/#role-action-group | phoenix/role-action-group/#role-action-group | react/role-action-group/#role-action-group |
| Send invoice is waiting, and More stands before the way back. | role-action-group/#role-action-group | phoenix/role-action-group/#role-action-group | react/role-action-group/#role-action-group |
| Invoice actions with resending waiting on an email address. | role-action-group/#role-action-group | phoenix/role-action-group/#role-action-group | react/role-action-group/#role-action-group |
| Continue is waiting on a field and a choice in its form. | role-action-group/#role-action-group | phoenix/role-action-group/#role-action-group | react/role-action-group/#role-action-group |
| Invoice actions with a refused step held above them | role-action-group/#role-action-group | phoenix/role-action-group/#role-action-group | react/role-action-group/#role-action-group |

## Primary action · role · Actions

### Primary action

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Primary action | role-primary-action/#role-primary-action | phoenix/role-primary-action/#role-primary-action | react/role-primary-action/#role-primary-action |

### Primary action, submitting

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Primary action, submitting | role-primary-action/#role-primary-action-submitting | phoenix/role-primary-action/#role-primary-action-submitting | react/role-primary-action/#role-primary-action-submitting |

## Secondary action · role · Actions

### Secondary action

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Secondary action | role-secondary-action/#role-secondary-action | phoenix/role-secondary-action/#role-secondary-action | react/role-secondary-action/#role-secondary-action |

### Secondary action, submitting

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Secondary action, submitting | role-secondary-action/#role-secondary-action-submitting | phoenix/role-secondary-action/#role-secondary-action-submitting | react/role-secondary-action/#role-secondary-action-submitting |

## Subtle action · role · Actions

### Subtle action

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Subtle action | role-subtle-action/#role-subtle-action | phoenix/role-subtle-action/#role-subtle-action | react/role-subtle-action/#role-subtle-action |
| Subtle actions in a Row's actions. | role-subtle-action/#role-subtle-action | phoenix/role-subtle-action/#role-subtle-action | react/role-subtle-action/#role-subtle-action |
| A Subtle action in an Action group beside a Secondary action. | role-subtle-action/#role-subtle-action | phoenix/role-subtle-action/#role-subtle-action | react/role-subtle-action/#role-subtle-action |

### Subtle action, submitting

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Subtle action, submitting | role-subtle-action/#role-subtle-action-submitting | phoenix/role-subtle-action/#role-subtle-action-submitting | react/role-subtle-action/#role-subtle-action-submitting |

## Icon action · role · Actions

### Icon action

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Icon action | role-icon-action/#role-icon-action | phoenix/role-icon-action/#role-icon-action | react/role-icon-action/#role-icon-action |
| Icon actions in a Row's actions, named with the row's subject. | role-icon-action/#role-icon-action | phoenix/role-icon-action/#role-icon-action | react/role-icon-action/#role-icon-action |
| An Icon action in an Action group beside a Secondary action. | role-icon-action/#role-icon-action | phoenix/role-icon-action/#role-icon-action | react/role-icon-action/#role-icon-action |
| Icon actions in the page header's actions. | role-icon-action/#role-icon-action | phoenix/role-icon-action/#role-icon-action |  |

## Destructive action · role · Actions

### Destructive action

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Destructive action | role-destructive-action/#role-destructive-action | phoenix/role-destructive-action/#role-destructive-action | react/role-destructive-action/#role-destructive-action |
| A Destructive action confirming an Inline consequence. | role-destructive-action/#role-destructive-action | phoenix/role-destructive-action/#role-destructive-action | react/role-destructive-action/#role-destructive-action |
| A Destructive action last in an Action group. | role-destructive-action/#role-destructive-action | phoenix/role-destructive-action/#role-destructive-action | react/role-destructive-action/#role-destructive-action |
| A Destructive action that waits. | role-destructive-action/#role-destructive-action | phoenix/role-destructive-action/#role-destructive-action | react/role-destructive-action/#role-destructive-action |
| A Destructive action leading a Dialog. | role-destructive-action/#role-destructive-action | phoenix/role-destructive-action/#role-destructive-action | react/role-destructive-action/#role-destructive-action |
| Delete the booking | role-destructive-action/#role-destructive-action | phoenix/role-destructive-action/#role-destructive-action | react/role-destructive-action/#role-destructive-action |
| A Dialog that asks for the name of work others share before deleting it. | role-destructive-action/#role-destructive-action | phoenix/role-destructive-action/#role-destructive-action | react/role-destructive-action/#role-destructive-action |
| Delete the workspace | role-destructive-action/#role-destructive-action | phoenix/role-destructive-action/#role-destructive-action | react/role-destructive-action/#role-destructive-action |
| A Destructive action committing a Stepped flow. | role-destructive-action/#role-destructive-action | phoenix/role-destructive-action/#role-destructive-action |  |

### Destructive action, submitting

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Destructive action, submitting | role-destructive-action/#role-destructive-action-submitting | phoenix/role-destructive-action/#role-destructive-action-submitting | react/role-destructive-action/#role-destructive-action-submitting |

## Split action · role · Actions

### Split action

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| A draft invoice's actions | role-split-action/#role-split-action | phoenix/role-split-action/#role-split-action | react/role-split-action/#role-split-action |

### Split action, submitting

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| An invoice being sent | role-split-action/#role-split-action-submitting | phoenix/role-split-action/#role-split-action-submitting | react/role-split-action/#role-split-action-submitting |

## Action menu · role · Actions

### Action menu

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| An invoice's actions | role-action-menu/#role-action-menu | phoenix/role-action-menu/#role-action-menu | react/role-action-menu/#role-action-menu |

### Action menu, inert

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| An Action menu in a Row's actions, its trigger inert with its words. | role-action-menu/#role-action-menu-inert | phoenix/role-action-menu/#role-action-menu-inert | react/role-action-menu/#role-action-menu-inert |
| An Action menu alone, its trigger inert with its words directly after it. | role-action-menu/#role-action-menu-inert | phoenix/role-action-menu/#role-action-menu-inert | react/role-action-menu/#role-action-menu-inert |

## Context menu · role · Actions

### Context menu

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| An invoice and a room | role-context-menu/#role-context-menu | phoenix/role-context-menu/#role-context-menu |  |
| An invoice | role-context-menu/#role-context-menu | phoenix/role-context-menu/#role-context-menu | react/role-context-menu/#role-context-menu |

## Inert control · role · Actions

### Inert control, inert

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| An inert action's own words, one line after its Action group. | role-inert-control/#role-inert-control-inert | phoenix/role-inert-control/#role-inert-control-inert | react/role-inert-control/#role-inert-control-inert |
| Two actions inert for one reason share one line. | role-inert-control/#role-inert-control-inert | phoenix/role-inert-control/#role-inert-control-inert | react/role-inert-control/#role-inert-control-inert |
| A region's standing describes the actions it makes inert; an action outside it keeps its own words. | role-inert-control/#role-inert-control-inert | phoenix/role-inert-control/#role-inert-control-inert | react/role-inert-control/#role-inert-control-inert |
| A page's standing describes every action it makes inert, wherever it stands. | role-inert-control/#role-inert-control-inert | phoenix/role-inert-control/#role-inert-control-inert | react/role-inert-control/#role-inert-control-inert |

## Emphasised next action · role · Actions

### Emphasised next action

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Emphasised next action | role-emphasised-next-action/#role-emphasised-next-action | phoenix/role-emphasised-next-action/#role-emphasised-next-action | react/role-emphasised-next-action/#role-emphasised-next-action |

### Emphasised next action, submitting

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Emphasised next action, submitting | role-emphasised-next-action/#role-emphasised-next-action-submitting | phoenix/role-emphasised-next-action/#role-emphasised-next-action-submitting | react/role-emphasised-next-action/#role-emphasised-next-action-submitting |

## Local tabs · role · Navigation

### Local tabs, current

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Local tabs, current | role-local-tabs/#role-local-tabs-current | phoenix/role-local-tabs/#role-local-tabs-current | react/role-local-tabs/#role-local-tabs-current |
| A saved view with changes to save. | role-local-tabs/#role-local-tabs-current | phoenix/role-local-tabs/#role-local-tabs-current | react/role-local-tabs/#role-local-tabs-current |
| More waits for the enquiries. | role-local-tabs/#role-local-tabs-current | phoenix/role-local-tabs/#role-local-tabs-current | react/role-local-tabs/#role-local-tabs-current |

## Destination · role · Navigation

### Destination

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Destination | role-destination/#role-destination | phoenix/role-destination/#role-destination |

### Destination, current

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Destination, current | role-destination/#role-destination-current | phoenix/role-destination/#role-destination-current |

## Count · role · Navigation

### Count

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Count | role-count/#role-count | phoenix/role-count/#role-count |

### Count, attention

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Count, attention | role-count/#role-count-attention | phoenix/role-count/#role-count-attention |

## Trail · role · Navigation

### Trail

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Trail | role-trail/#role-trail | phoenix/role-trail/#role-trail | react/role-trail/#role-trail |
| On a wide screen, the fold and the school switcher wait for the page. | role-trail/#role-trail | phoenix/role-trail/#role-trail | react/role-trail/#role-trail |

## Way back · role · Navigation

### Way back

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Way back | role-way-back/#role-way-back | phoenix/role-way-back/#role-way-back | react/role-way-back/#role-way-back |

## Progress · role · Navigation

### Progress

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Progress | role-progress/#role-progress | phoenix/role-progress/#role-progress |

### Progress, current

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Progress, current | role-progress/#role-progress-current | phoenix/role-progress/#role-progress-current |

## Pager · role · Navigation

### Pager

| Case | CSS core | Phoenix |
| --- | --- | --- |
| First page | role-pager/#role-pager | phoenix/role-pager/#role-pager |
| Go to page | role-pager/#role-pager | phoenix/role-pager/#role-pager |
| Go to page refused | role-pager/#role-pager | phoenix/role-pager/#role-pager |
| Last page | role-pager/#role-pager | phoenix/role-pager/#role-pager |
| One page | role-pager/#role-pager | phoenix/role-pager/#role-pager |

## Status line · role · Standing and feedback

### Status line

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Status line | role-status-line/#role-status-line | phoenix/role-status-line/#role-status-line | react/role-status-line/#role-status-line |

## Progress bar · role · Standing and feedback

### Progress bar

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Progress bar | role-progress-bar/#role-progress-bar | phoenix/role-progress-bar/#role-progress-bar | react/role-progress-bar/#role-progress-bar |

### Progress bar, running

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Progress bar, running | role-progress-bar/#role-progress-bar-running | phoenix/role-progress-bar/#role-progress-bar-running | react/role-progress-bar/#role-progress-bar-running |
| An action that cannot be taken. | role-progress-bar/#role-progress-bar-running | phoenix/role-progress-bar/#role-progress-bar-running | react/role-progress-bar/#role-progress-bar-running |

### Progress bar, done

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Progress bar, done | role-progress-bar/#role-progress-bar-done | phoenix/role-progress-bar/#role-progress-bar-done | react/role-progress-bar/#role-progress-bar-done |

### Progress bar, failed

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Progress bar, failed | role-progress-bar/#role-progress-bar-failed | phoenix/role-progress-bar/#role-progress-bar-failed | react/role-progress-bar/#role-progress-bar-failed |
| An action that cannot be taken. | role-progress-bar/#role-progress-bar-failed | phoenix/role-progress-bar/#role-progress-bar-failed | react/role-progress-bar/#role-progress-bar-failed |

## Meter · role · Standing and feedback

### Meter

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Meter | role-meter/#role-meter | phoenix/role-meter/#role-meter |

### Meter, near

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Meter, near | role-meter/#role-meter-near | phoenix/role-meter/#role-meter-near |

### Meter, over

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Meter, over | role-meter/#role-meter-over | phoenix/role-meter/#role-meter-over |

## Inline consequence · role · Standing and feedback

### Inline consequence

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Inline consequence | role-inline-consequence/#role-inline-consequence | phoenix/role-inline-consequence/#role-inline-consequence | react/role-inline-consequence/#role-inline-consequence |
| A consequence whose action cannot be taken yet. | role-inline-consequence/#role-inline-consequence | phoenix/role-inline-consequence/#role-inline-consequence | react/role-inline-consequence/#role-inline-consequence |
| A consequence that sends an email shows it as its recipient will get it. | role-inline-consequence/#role-inline-consequence | phoenix/role-inline-consequence/#role-inline-consequence | react/role-inline-consequence/#role-inline-consequence |
| A consequence that sends a text shows it as a phone shows it. | role-inline-consequence/#role-inline-consequence | phoenix/role-inline-consequence/#role-inline-consequence | react/role-inline-consequence/#role-inline-consequence |
| A consequence that changes amounts holds each, before and after. | role-inline-consequence/#role-inline-consequence | phoenix/role-inline-consequence/#role-inline-consequence | react/role-inline-consequence/#role-inline-consequence |
| A consequence that changes amounts and sends a text holds the amounts, then the text. | role-inline-consequence/#role-inline-consequence | phoenix/role-inline-consequence/#role-inline-consequence | react/role-inline-consequence/#role-inline-consequence |

## Outbound preview · role · Standing and feedback

### Outbound preview

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Outbound preview | role-outbound-preview/#role-outbound-preview | phoenix/role-outbound-preview/#role-outbound-preview | react/role-outbound-preview/#role-outbound-preview |
| A text stands as a phone shows it. | role-outbound-preview/#role-outbound-preview | phoenix/role-outbound-preview/#role-outbound-preview | react/role-outbound-preview/#role-outbound-preview |
| Email and web addresses in a heading wrap with its words. | role-outbound-preview/#role-outbound-preview | phoenix/role-outbound-preview/#role-outbound-preview | react/role-outbound-preview/#role-outbound-preview |

## Attention item · role · Standing and feedback

### Attention item

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Attention item | role-attention-item/#role-attention-item | phoenix/role-attention-item/#role-attention-item |

## Agreement · role · Standing and feedback

### Agreement

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Agreement | role-agreement/#role-agreement | phoenix/role-agreement/#role-agreement | react/role-agreement/#role-agreement |
| Change card | role-agreement/#role-agreement | phoenix/role-agreement/#role-agreement | react/role-agreement/#role-agreement |
| Change card while the current card is being checked | role-agreement/#role-agreement | phoenix/role-agreement/#role-agreement | react/role-agreement/#role-agreement |

## Refusal · role · Standing and feedback

### Refusal

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Refusal | role-refusal/#role-refusal | phoenix/role-refusal/#role-refusal | react/role-refusal/#role-refusal |
| The remedy first shows the field it moves to. | role-refusal/#role-refusal | phoenix/role-refusal/#role-refusal | react/role-refusal/#role-refusal |
| Two causes, each a Row further down the page. | role-refusal/#role-refusal | phoenix/role-refusal/#role-refusal |  |
| A Refusal beneath a Stepped flow's step. | role-refusal/#role-refusal | phoenix/role-refusal/#role-refusal |  |
| A Refusal inside a Dialog, its causes on the page behind it. | role-refusal/#role-refusal | phoenix/role-refusal/#role-refusal | react/role-refusal/#role-refusal |
| Remove Main Hall | role-refusal/#role-refusal | phoenix/role-refusal/#role-refusal | react/role-refusal/#role-refusal |
| A Refusal on its line alone, with no cause to go to. | role-refusal/#role-refusal | phoenix/role-refusal/#role-refusal | react/role-refusal/#role-refusal |
| A submit refused by two fields, each cause going to its field. | role-refusal/#role-refusal | phoenix/role-refusal/#role-refusal | react/role-refusal/#role-refusal |

## Toast · role · Standing and feedback

### Toast

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Show the toast | role-toast/#role-toast | phoenix/role-toast/#role-toast | react/role-toast/#role-toast |
| Show the toast after Undo | role-toast/#role-toast | phoenix/role-toast/#role-toast | react/role-toast/#role-toast |

### Toast, confirmation

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Show the toast | role-toast/#role-toast-confirmation | phoenix/role-toast/#role-toast-confirmation | react/role-toast/#role-toast-confirmation |

### Toast, inert

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Toast, inert | role-toast/#role-toast-inert | phoenix/role-toast/#role-toast-inert | react/role-toast/#role-toast-inert |
| Show the toast while the move saves | role-toast/#role-toast-inert | phoenix/role-toast/#role-toast-inert | react/role-toast/#role-toast-inert |
| Show the toast while the undo saves | role-toast/#role-toast-inert | phoenix/role-toast/#role-toast-inert | react/role-toast/#role-toast-inert |

## Notice · role · Standing and feedback

### Notice, attention

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Notice, attention | role-notice/#role-notice-attention | phoenix/role-notice/#role-notice-attention | react/role-notice/#role-notice-attention |
| Inside a Panel. | role-notice/#role-notice-attention | phoenix/role-notice/#role-notice-attention | react/role-notice/#role-notice-attention |

### Notice, settled

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Notice, settled | role-notice/#role-notice-settled | phoenix/role-notice/#role-notice-settled | react/role-notice/#role-notice-settled |
| Inside a Panel. | role-notice/#role-notice-settled | phoenix/role-notice/#role-notice-settled | react/role-notice/#role-notice-settled |

### Notice, inert

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| A Notice whose action waits. | role-notice/#role-notice-inert | phoenix/role-notice/#role-notice-inert | react/role-notice/#role-notice-inert |
| A settled Notice whose actions wait. | role-notice/#role-notice-inert | phoenix/role-notice/#role-notice-inert | react/role-notice/#role-notice-inert |
| A settled Notice whose Dismiss waits. | role-notice/#role-notice-inert | phoenix/role-notice/#role-notice-inert | react/role-notice/#role-notice-inert |

## Field result · role · Standing and feedback

### Field result, accepted

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Field result, accepted | role-field-result/#role-field-result-accepted | phoenix/role-field-result/#role-field-result-accepted |
| A result whose next action cannot be taken yet. | role-field-result/#role-field-result-accepted | phoenix/role-field-result/#role-field-result-accepted |
| Show a new result | role-field-result/#role-field-result-accepted | phoenix/role-field-result/#role-field-result-accepted |

### Field result, refused

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Field result, refused | role-field-result/#role-field-result-refused | phoenix/role-field-result/#role-field-result-refused |

### Field result, conflict

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Field result, conflict | role-field-result/#role-field-result-conflict | phoenix/role-field-result/#role-field-result-conflict |

### Field result, processing

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Field result, processing | role-field-result/#role-field-result-processing | phoenix/role-field-result/#role-field-result-processing |

## Dialog · role · Layers

### Dialog, open

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| A form that arrives after the task opens. | role-dialog/#role-dialog-open | phoenix/role-dialog/#role-dialog-open | react/role-dialog/#role-dialog-open |
| Edit a name while it loads | role-dialog/#role-dialog-open | phoenix/role-dialog/#role-dialog-open | react/role-dialog/#role-dialog-open |
| A name that is ready to save with nothing to wait for. | role-dialog/#role-dialog-open | phoenix/role-dialog/#role-dialog-open | react/role-dialog/#role-dialog-open |
| Save a name that is already loaded | role-dialog/#role-dialog-open | phoenix/role-dialog/#role-dialog-open | react/role-dialog/#role-dialog-open |
| Decisions opened from their page. | role-dialog/#role-dialog-open | phoenix/role-dialog/#role-dialog-open |  |
| Cancel bookings | role-dialog/#role-dialog-open | phoenix/role-dialog/#role-dialog-open |  |
| Cancel booking | role-dialog/#role-dialog-open | phoenix/role-dialog/#role-dialog-open |  |
| Close the hall | role-dialog/#role-dialog-open | phoenix/role-dialog/#role-dialog-open |  |
| Show the open attribute alone | role-dialog/#role-dialog-open | phoenix/role-dialog/#role-dialog-open |  |
| A Dialog over the page's own work, its lead a Primary action. | role-dialog/#role-dialog-open | phoenix/role-dialog/#role-dialog-open | react/role-dialog/#role-dialog-open |
| Send the invoice | role-dialog/#role-dialog-open | phoenix/role-dialog/#role-dialog-open | react/role-dialog/#role-dialog-open |
| A task that sends an email, its preview after the form. | role-dialog/#role-dialog-open | phoenix/role-dialog/#role-dialog-open | react/role-dialog/#role-dialog-open |
| Invite a volunteer | role-dialog/#role-dialog-open | phoenix/role-dialog/#role-dialog-open | react/role-dialog/#role-dialog-open |
| A refund and what it returns, before its amount and reason. | role-dialog/#role-dialog-open | phoenix/role-dialog/#role-dialog-open | react/role-dialog/#role-dialog-open |
| Refund the deposit | role-dialog/#role-dialog-open | phoenix/role-dialog/#role-dialog-open | react/role-dialog/#role-dialog-open |
| A task that publishes a page, its preview before the actions. | role-dialog/#role-dialog-open | phoenix/role-dialog/#role-dialog-open | react/role-dialog/#role-dialog-open |
| Publish the autumn programme | role-dialog/#role-dialog-open | phoenix/role-dialog/#role-dialog-open | react/role-dialog/#role-dialog-open |
| A creation in steps, at its first step and at its last. | role-dialog/#role-dialog-open | phoenix/role-dialog/#role-dialog-open | react/role-dialog/#role-dialog-open |
| New event | role-dialog/#role-dialog-open | phoenix/role-dialog/#role-dialog-open | react/role-dialog/#role-dialog-open |
| New event at its last step | role-dialog/#role-dialog-open | phoenix/role-dialog/#role-dialog-open | react/role-dialog/#role-dialog-open |
| A task with the subject it acts on, its consequence holding each amount it changes. | role-dialog/#role-dialog-open | phoenix/role-dialog/#role-dialog-open | react/role-dialog/#role-dialog-open |
| Split the charge | role-dialog/#role-dialog-open | phoenix/role-dialog/#role-dialog-open | react/role-dialog/#role-dialog-open |
| The same task while its form loads, the subject standing. | role-dialog/#role-dialog-open | phoenix/role-dialog/#role-dialog-open | react/role-dialog/#role-dialog-open |
| Split the charge while it loads | role-dialog/#role-dialog-open | phoenix/role-dialog/#role-dialog-open | react/role-dialog/#role-dialog-open |
| A decision whose consequence holds each amount it changes. | role-dialog/#role-dialog-open | phoenix/role-dialog/#role-dialog-open | react/role-dialog/#role-dialog-open |
| Cancel the charge | role-dialog/#role-dialog-open | phoenix/role-dialog/#role-dialog-open | react/role-dialog/#role-dialog-open |
| A task whose agreement is signed with the actor’s full name. | role-dialog/#role-dialog-open | phoenix/role-dialog/#role-dialog-open | react/role-dialog/#role-dialog-open |
| Save a card to charge later | role-dialog/#role-dialog-open | phoenix/role-dialog/#role-dialog-open | react/role-dialog/#role-dialog-open |
| A step whose Number fields answer one question, with the set's help. | role-dialog/#role-dialog-open | phoenix/role-dialog/#role-dialog-open |  |
| How many of each size | role-dialog/#role-dialog-open | phoenix/role-dialog/#role-dialog-open |  |
| The same step with the set's error, its help kept. | role-dialog/#role-dialog-open | phoenix/role-dialog/#role-dialog-open |  |
| How many of each size with an error | role-dialog/#role-dialog-open | phoenix/role-dialog/#role-dialog-open |  |

### Dialog, unsaved

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Add a room | role-dialog/#role-dialog-unsaved | phoenix/role-dialog/#role-dialog-unsaved | react/role-dialog/#role-dialog-unsaved |
| A long room form with changes not yet saved. | role-dialog/#role-dialog-unsaved | phoenix/role-dialog/#role-dialog-unsaved | react/role-dialog/#role-dialog-unsaved |
| Add a room with more details | role-dialog/#role-dialog-unsaved | phoenix/role-dialog/#role-dialog-unsaved | react/role-dialog/#role-dialog-unsaved |
| A long room form whose last submission was refused. | role-dialog/#role-dialog-unsaved | phoenix/role-dialog/#role-dialog-unsaved | react/role-dialog/#role-dialog-unsaved |
| Add a room after a refusal | role-dialog/#role-dialog-unsaved | phoenix/role-dialog/#role-dialog-unsaved | react/role-dialog/#role-dialog-unsaved |
| A long room form with its entry saved and its actions in place. | role-dialog/#role-dialog-unsaved | phoenix/role-dialog/#role-dialog-unsaved | react/role-dialog/#role-dialog-unsaved |
| Add a room with its entry saved | role-dialog/#role-dialog-unsaved | phoenix/role-dialog/#role-dialog-unsaved | react/role-dialog/#role-dialog-unsaved |

### Dialog, inert

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| A Dialog whose Primary lead waits. | role-dialog/#role-dialog-inert | phoenix/role-dialog/#role-dialog-inert | react/role-dialog/#role-dialog-inert |
| Send the invoice | role-dialog/#role-dialog-inert | phoenix/role-dialog/#role-dialog-inert | react/role-dialog/#role-dialog-inert |
| A Dialog whose Destructive lead waits. | role-dialog/#role-dialog-inert | phoenix/role-dialog/#role-dialog-inert | react/role-dialog/#role-dialog-inert |
| Delete the booking | role-dialog/#role-dialog-inert | phoenix/role-dialog/#role-dialog-inert | react/role-dialog/#role-dialog-inert |
| A creation in steps whose Continue waits. | role-dialog/#role-dialog-inert | phoenix/role-dialog/#role-dialog-inert | react/role-dialog/#role-dialog-inert |
| New event | role-dialog/#role-dialog-inert | phoenix/role-dialog/#role-dialog-inert | react/role-dialog/#role-dialog-inert |

## Keyboard sheet · role · Layers

### Keyboard sheet, open

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Keyboard sheet, open | role-keyboard-sheet/#role-keyboard-sheet-open | phoenix/role-keyboard-sheet/#role-keyboard-sheet-open | react/role-keyboard-sheet/#role-keyboard-sheet-open |
| Show the open keyboard sheet | role-keyboard-sheet/#role-keyboard-sheet-open | phoenix/role-keyboard-sheet/#role-keyboard-sheet-open | react/role-keyboard-sheet/#role-keyboard-sheet-open |

### Keyboard sheet, inert

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Show the keyboard sheet while it loads | role-keyboard-sheet/#role-keyboard-sheet-inert | phoenix/role-keyboard-sheet/#role-keyboard-sheet-inert | react/role-keyboard-sheet/#role-keyboard-sheet-inert |

## Phone sheet · role · Layers

### Phone sheet, open

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Shell with More and the account menu | role-phone-sheet/#role-phone-sheet-open | phoenix/role-phone-sheet/#role-phone-sheet-open |  |
| List with Filters | role-phone-sheet/#role-phone-sheet-open | phoenix/role-phone-sheet/#role-phone-sheet-open |  |
| Calendar with Filters | role-phone-sheet/#role-phone-sheet-open | phoenix/role-phone-sheet/#role-phone-sheet-open | react/role-phone-sheet/#role-phone-sheet-open |

## Side panel · role · Layers

### Side panel, open

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Shell with work beside the List | role-side-panel/#role-side-panel-open | phoenix/role-side-panel/#role-side-panel-open |

## Pane divider · role · Layers

### Pane divider

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Pane divider | role-pane-divider/#role-pane-divider | phoenix/role-pane-divider/#role-pane-divider |

## Popover · role · Layers

### Popover

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Words beside a fact | role-popover/#role-popover | phoenix/role-popover/#role-popover | react/role-popover/#role-popover |
| Controls | role-popover/#role-popover | phoenix/role-popover/#role-popover | react/role-popover/#role-popover |

## Guide · role · Layers

### Guide

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| First step | role-guide/#role-guide | phoenix/role-guide/#role-guide | react/role-guide/#role-guide |
| Last step | role-guide/#role-guide | phoenix/role-guide/#role-guide | react/role-guide/#role-guide |

### Guide, inert

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| First step while the room saves | role-guide/#role-guide-inert | phoenix/role-guide/#role-guide-inert | react/role-guide/#role-guide-inert |
| Last step while the invitation sends | role-guide/#role-guide-inert | phoenix/role-guide/#role-guide-inert | react/role-guide/#role-guide-inert |

## Tooltip · role · Layers

### Tooltip

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Icon actions | role-tooltip/#role-tooltip | phoenix/role-tooltip/#role-tooltip | react/role-tooltip/#role-tooltip |
| A labelled action's shortcut | role-tooltip/#role-tooltip | phoenix/role-tooltip/#role-tooltip | react/role-tooltip/#role-tooltip |

## Palette · role · Layers

### Palette, open

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Palette, open | role-palette/#role-palette-open | phoenix/role-palette/#role-palette-open | react/role-palette/#role-palette-open |
| A query, with its matches marked and Search for last. | role-palette/#role-palette-open | phoenix/role-palette/#role-palette-open | react/role-palette/#role-palette-open |
| A line waiting on its answer. | role-palette/#role-palette-open | phoenix/role-palette/#role-palette-open | react/role-palette/#role-palette-open |

## Image · role · Media

### Image

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Image | role-image/#role-image | phoenix/role-image/#role-image | react/role-image/#role-image |

## Image overlay · role · Media

### Image overlay

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Image overlay | role-image-overlay/#role-image-overlay | phoenix/role-image-overlay/#role-image-overlay | react/role-image-overlay/#role-image-overlay |

### Image overlay, open

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Image overlay, open | role-image-overlay/#role-image-overlay-open | phoenix/role-image-overlay/#role-image-overlay-open | react/role-image-overlay/#role-image-overlay-open |

### Image overlay, inert

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Photo while the upload finishes | role-image-overlay/#role-image-overlay-inert | phoenix/role-image-overlay/#role-image-overlay-inert | react/role-image-overlay/#role-image-overlay-inert |

## Media · role · Media

### Media

| Case | CSS core | Phoenix |
| --- | --- | --- |
| Media | role-media/#role-media | phoenix/role-media/#role-media |

## Carousel · role · Media

### Carousel

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| Carousel | role-carousel/#role-carousel | phoenix/role-carousel/#role-carousel | react/role-carousel/#role-carousel |

## loading · state

### loading

| Case | CSS core | Phoenix |
| --- | --- | --- |
| loading | state-loading/#state-loading | phoenix/state-loading/#state-loading |
| Embed: a card form arrives after the page. | state-loading/#state-loading | phoenix/state-loading/#state-loading |
| A Help answer loading. | state-loading/#state-loading | phoenix/state-loading/#state-loading |
| Calendar bands, columns and days loading. | state-loading/#state-loading | phoenix/state-loading/#state-loading |
| A Calendar whose whole week is loading. | state-loading/#state-loading | phoenix/state-loading/#state-loading |
| A Calendar whose whole month is loading. | state-loading/#state-loading | phoenix/state-loading/#state-loading |
| Each List region loading. | state-loading/#state-loading | phoenix/state-loading/#state-loading |

## empty · state

### empty

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| empty | state-empty/#state-empty | phoenix/state-empty/#state-empty |  |
| A List filtered to nothing, its words naming the filter. | state-empty/#state-empty | phoenix/state-empty/#state-empty |  |
| A Settings section whose list is empty, its Scope line kept. | state-empty/#state-empty | phoenix/state-empty/#state-empty |  |
| A Settings section with several lists under its heading, one empty beside a full one. | state-empty/#state-empty | phoenix/state-empty/#state-empty |  |
| An empty Record, its local tabs kept. | state-empty/#state-empty | phoenix/state-empty/#state-empty |  |
| An empty Reports, its controls and count kept. | state-empty/#state-empty | phoenix/state-empty/#state-empty |  |
| An empty Calendar week with an inert action and disabled More, its hours kept. | state-empty/#state-empty | phoenix/state-empty/#state-empty | react/state-empty/#state-empty |
| An empty Calendar day by Room, one Room's name long. | state-empty/#state-empty | phoenix/state-empty/#state-empty |  |
| An empty Calendar month. | state-empty/#state-empty | phoenix/state-empty/#state-empty | react/state-empty/#state-empty |
| An empty Field result. | state-empty/#state-empty | phoenix/state-empty/#state-empty |  |
| A Home whose every region is empty. | state-empty/#state-empty | phoenix/state-empty/#state-empty |  |
| A Home whose assigned work stands in two groups, one of them empty. | state-empty/#state-empty | phoenix/state-empty/#state-empty |  |
| A Record whose bookings and history are empty. | state-empty/#state-empty | phoenix/state-empty/#state-empty |  |
| An empty region whose next action waits, its words beneath it. | state-empty/#state-empty | phoenix/state-empty/#state-empty | react/state-empty/#state-empty |
| An empty region with a disabled action and inert More, their words together. | state-empty/#state-empty | phoenix/state-empty/#state-empty | react/state-empty/#state-empty |
| A Headed region standing alone with nothing in it yet. | state-empty/#state-empty | phoenix/state-empty/#state-empty | react/state-empty/#state-empty |

## processing · state

### processing

| Case | CSS core | Phoenix |
| --- | --- | --- |
| processing | state-processing/#state-processing | phoenix/state-processing/#state-processing |

## offline · state

### offline

| Case | CSS core | Phoenix |
| --- | --- | --- |
| offline | state-offline/#state-offline | phoenix/state-offline/#state-offline |

## stale · state

### stale

| Case | CSS core | Phoenix |
| --- | --- | --- |
| stale | state-stale/#state-stale | phoenix/state-stale/#state-stale |

## failed · state

### failed

| Case | CSS core | Phoenix | React |
| --- | --- | --- | --- |
| failed | state-failed/#state-failed | phoenix/state-failed/#state-failed |  |
| A Calendar week that could not be read, its hours kept. | state-failed/#state-failed | phoenix/state-failed/#state-failed | react/state-failed/#state-failed |

## conflict · state

### conflict

| Case | CSS core | Phoenix |
| --- | --- | --- |
| conflict | state-conflict/#state-conflict | phoenix/state-conflict/#state-conflict |

## unsaved · state

### unsaved

| Case | CSS core | Phoenix |
| --- | --- | --- |
| unsaved | state-unsaved/#state-unsaved | phoenix/state-unsaved/#state-unsaved |

## saved · state

### saved

| Case | CSS core | Phoenix |
| --- | --- | --- |
| saved | state-saved/#state-saved | phoenix/state-saved/#state-saved |

## corrected · state

### corrected

| Case | CSS core | Phoenix |
| --- | --- | --- |
| corrected | state-corrected/#state-corrected | phoenix/state-corrected/#state-corrected |

## partial · state

### partial

| Case | CSS core | Phoenix |
| --- | --- | --- |
| partial | state-partial/#state-partial | phoenix/state-partial/#state-partial |

## Ground · token

### Ground

| Case | CSS core |
| --- | --- |
| Ground | token-ground/#token-ground |

## Surface · token

### Surface

| Case | CSS core |
| --- | --- |
| Surface | token-surface/#token-surface |

## Public surface · token

### Public surface

| Case | CSS core |
| --- | --- |
| Public surface | token-public-surface/#token-public-surface |

## Panel · token

### Panel

| Case | CSS core |
| --- | --- |
| Panel | token-panel/#token-panel |

## Rule · token

### Rule

| Case | CSS core |
| --- | --- |
| Rule | token-rule/#token-rule |

## Edge · token

### Edge

| Case | CSS core |
| --- | --- |
| Edge | token-edge/#token-edge |

## Ink · token

### Ink

| Case | CSS core |
| --- | --- |
| Ink | token-ink/#token-ink |

## Muted · token

### Muted

| Case | CSS core |
| --- | --- |
| Muted | token-muted/#token-muted |

## Accent · token

### Accent

| Case | CSS core |
| --- | --- |
| Accent | token-accent/#token-accent |

## Focus · token

### Focus

| Case | CSS core |
| --- | --- |
| Focus | token-focus/#token-focus |

## Reversed · token

### Reversed

| Case | CSS core |
| --- | --- |
| Reversed | token-reversed/#token-reversed |

## On ground · token

### On ground

| Case | CSS core |
| --- | --- |
| On ground | token-on-ground/#token-on-ground |

## Lift · token

### Lift

| Case | CSS core |
| --- | --- |
| Lift | token-lift/#token-lift |

## Display type · token

### Display type

| Case | CSS core |
| --- | --- |
| Display type | token-display-type/#token-display-type |
| Body and fact names, on one line and wrapped. | token-display-type/#token-display-type |
| Mono runs in prose, a fact, a Copyable, a table cell and a block, then a key. | token-display-type/#token-display-type |
| Latin and its script companions. | token-display-type/#token-display-type |
| Devanagari | token-display-type/#token-display-type |
| Tamil | token-display-type/#token-display-type |
| Telugu | token-display-type/#token-display-type |
| Kannada | token-display-type/#token-display-type |
| Malayalam | token-display-type/#token-display-type |
| Gujarati | token-display-type/#token-display-type |
| Bengali | token-display-type/#token-display-type |

## Radii · token

### Radii

| Case | CSS core |
| --- | --- |
| Radii | token-radii/#token-radii |

## Display · site

### Display

| Case | CSS core |
| --- | --- |
| Display | site/display/ |
| Devanagari | site/display/ |
| Tamil | site/display/ |
| Telugu | site/display/ |
| Kannada | site/display/ |
| Malayalam | site/display/ |
| Gujarati | site/display/ |
| Bengali | site/display/ |

## Heading · site

### Heading

| Case | CSS core |
| --- | --- |
| Heading | site/heading/ |

## Sub-heading · site

### Sub-heading

| Case | CSS core |
| --- | --- |
| Sub-heading | site/sub-heading/ |

## Lead · site

### Lead

| Case | CSS core |
| --- | --- |
| Lead | site/lead/ |

## Body · site

### Body

| Case | CSS core |
| --- | --- |
| Body | site/body/ |

## Small · site

### Small

| Case | CSS core |
| --- | --- |
| Small | site/small/ |

## Price · site

### Price

| Case | CSS core |
| --- | --- |
| Price | site/price/ |

## Action height · site

### Action height

| Case | CSS core |
| --- | --- |
| Action height | site/action-height/ |

## Header height · site

### Header height

| Case | CSS core |
| --- | --- |
| Header height | site/header-height/ |

## First screen · site

### First screen

| Case | CSS core |
| --- | --- |
| First screen | site/first-screen/ |

## Content width · site

### Content width

| Case | CSS core |
| --- | --- |
| Content width | site/content-width/ |

## Reading width · site

### Reading width

| Case | CSS core |
| --- | --- |
| Reading width | site/reading-width/ |

## Section space · site

### Section space

| Case | CSS core |
| --- | --- |
| Section space | site/section-space/ |

## Frame stroke · site

### Frame stroke

| Case | CSS core |
| --- | --- |
| Frame stroke | site/frame-stroke/ |

## Frame radius · site

### Frame radius

| Case | CSS core |
| --- | --- |
| Frame radius | site/frame-radius/ |

## Phone frame width · site

### Phone frame width

| Case | CSS core |
| --- | --- |
| Phone frame width | site/phone-frame-width/ |

## Share size · site

### Share size

| Case | CSS core |
| --- | --- |
| Share size | site/share-size/ |

## Header · site

### Header

| Case | CSS core |
| --- | --- |
| Header | site/header/ |

## Opening · site

### Opening

| Case | CSS core |
| --- | --- |
| Opening | site/opening/ |

## Opening centred · site

### Opening centred

| Case | CSS core |
| --- | --- |
| Opening centred | site/opening-centred/ |

## Feature · site

### Feature

| Case | CSS core |
| --- | --- |
| Feature | site/feature/ |

## Area · site

### Area

| Case | CSS core |
| --- | --- |
| Area | site/area/ |

## Promises · site

### Promises

| Case | CSS core |
| --- | --- |
| Promises | site/promises/ |

## Breadth · site

### Breadth

| Case | CSS core |
| --- | --- |
| Breadth | site/breadth/ |

## Offer · site

### Offer

| Case | CSS core |
| --- | --- |
| Offer | site/offer/ |

## Questions · site

### Questions

| Case | CSS core |
| --- | --- |
| Questions | site/questions/ |

## Action · site

### Action

| Case | CSS core |
| --- | --- |
| Action | site/action/ |

## Footer · site

### Footer

| Case | CSS core |
| --- | --- |
| Footer | site/footer/ |

## Plans · site

### Plans

| Case | CSS core |
| --- | --- |
| Plans | site/plans/ |

## Steps · site

### Steps

| Case | CSS core |
| --- | --- |
| Steps | site/steps/ |