Library — controls, overlays, states, forms

Behaviour (library section 2)

Pressed .97 scale / .92 dim, spring in {20, 400, .7}, out {15, 300, .7}, dim 80 ms in / 150 ms out, on the UI thread. Hover .85 + a pointer cursor (web). Focus ring 2px ink, offset 2; the ball button gets the same ink ring. Disabled .5, not-allowed, inert, aria-disabled. Loading: an ink spinner replaces the label at full opacity, the width is held (the label stays in flow, hidden), aria-busy, presses ignored. Reduced motion drops the settle and keeps the dim. Haptics belong to the mutation outcome, never the button. Size is independent of tone and of state: any tone at any size takes the same six states.

Replaces

ActionButton / Button (green, 56), ActionPill, the hand-drawn pressable pills.

Behaviour (library section 2)

Pressed .92 scale / .78 dim · hover .85 · focus ring 2px ink, offset 2, following the circle (ball on an ink block) · disabled .5 · aria-label required because the glyph is the only content · the target is the visual: nothing needs hit slop, the glyph centres in 44 · in a header the last glyph's right edge sits on the rail, the 44 target bleeding 10 into the margin.

Replaces

HeaderIconButton, ActionIconButton, RemoveIconButton, SaveButton.

Behaviour (library section 2)

Pressed .96 scale / .85 dim · hover .85 · focus ring 2px ink, offset 2 · disabled .5. A set is role radio with aria-checked, arrow keys move the selection on web; menu and range modes are buttons with aria-expanded; input mode's × is its own 44 target and removes only itself. Selection is ink fill + the check glyph, never colour alone. A set wraps left-aligned, gap 8, and never scrolls sideways. Hit slop = (44 − 36) / 2 = 4 above and below at 36; the 44 form size needs none.

Replaces

SelectionChip (56 files), DropdownChip, RangeChip, RemovableChip.

Behaviour (library section 2)

The indicator slides with the navSlide spring (the drawn mid-slide frame shows start and end as dashed outlines) · role radiogroup with aria-checked, arrow keys move the choice on web · press on a segment .96 / .85 · focus ring 2px ink, offset 2, around the track · disabled .5 · never used as scope tabs (those are the underline tabs) and never beyond four segments.

Replaces

PillNav (pill variant) inside forms.

Behaviour (library section 2)

role switch + aria-checked (this fixes the a11y hole of TogglePill); disabled .5 and inert; pressed: none, the thumb's 150 ms travel is the feedback (a mid-travel frame is drawn); hover .85; focus ring 2px ink, offset 2, around the track; haptics only through the mutation outcome; a toggle Cell presses the switch, so the whole 48 row is the target.

Replaces

TogglePill, Switch.

Behaviour (library section 2)

Focus = a 2px ink border, no ring: the padding drops by 1 so the text does not move. Error = danger border + danger helper, set when validation fails, never a toast. Disabled .5, not-allowed. The filled state is unchanged from rest. Inputs scroll above the keyboard (react-native-keyboard-controller, per screen, never a global pan → resize). The placeholder is secondary ink, never a substitute for the label. A trailing clear / reveal glyph is its own 44 target. Pressed and hover do not apply: an input is not a Pressable (the web cursor is text).

Replaces

StyledInput, LabeledField.

Behaviour (library section 2)

As Input. The box grows with its lines from 120 up to 200, then the text scrolls inside it (a thin indicator shows at the right) and the box stops growing; the counter sits 12 from the floor and 16 from the right edge on its own canvas patch so text never runs under it. Focus = 2px ink border; error = danger border + danger helper; the keyboard rules of Input apply (scroll the field above the keyboard, per screen).

Replaces

StyledInput multiline, the composer.

Behaviour (library section 2)

Focus keeps the field gray100 and turns the caret ink (no border change, no ring). Focus reveals 취소: the field shrinks, the cancel is a ghost button (44 target) and clears + blurs on press. The clear × appears once there is a character and is its own 44 target. The header takeover swaps the title for the field in place, the actions yield to 취소, and the keyboard opens with it; the back gesture closes it. Disabled .5.

Replaces

SearchBar.

Behaviour (library section 2)

Each end's glyph (20) presses .92 / .78; the pill itself does not move. At a bound the end that cannot go further dims to .5 and goes inert; the value cell is a fixed 48 so the digits do not jitter. The 44 × 44 hit area is the visual 36 plus 4 above and below (hit slop (44 − 36) / 2). Role group with a spin value (min, max, now, text) for screen readers; focus ring 2px ink, offset 2, around the focused end.

Replaces

Stepper (32 circle buttons).

Behaviour (library section 2)

The tag rides above the thumb and always reads the live value (a band's tag centres over the band). A band has three grab surfaces: left thumb, right thumb and the band body (drag moves both); each is a 44 target, the thumbs centred on the 24 visual. The drag does not share an axis with a scroll: fit the domain, snap, and show the live label for precision. The thumb's 150 ms settle is dropped under reduced motion. Focus ring 2px ink, offset 2, around the thumb; arrow keys step on web.

Replaces

TimeBandSlider, RangeBandSlider, ValueSlider (retire).

Behaviour (library section 2)

aria-checked on the row (role radio for single, checkbox for multi). The whole row is the target: pressed .98 scale / .80 dim, hover .85, focus ring 2px ink inside the row, disabled .5. The chosen single row turns its label 600 and shows the 20 check in ink (no fill, no tint); multi rows keep the label and fill the square ink with a white check 16. An unchecked square is a 2px #4F5851 edge — resolved 2026-10-09 (library section 13, K2): #4F5851 on white is 7.4:1, WCAG 1.4.11 asks 3:1 for a control boundary, the 1px #D4D4D4 hairline is 1.48:1 and an empty square has no text to carry it; Material 3 draws a 2dp outline.

Replaces

SelectionCard lists.

Behaviour (library section 2)

The sheet slides 200 ms (`quick`), backdrop ink α0.4, tap-outside dismisses without applying; 완료 commits the wheel's value and closes. The wheel itself is the platform control (UIDatePicker wheel on iOS, the Material spinner on Android), so its row height and haptics are the platform's; the 5 × 40 drawn here is the proportion on a 390 phone. One CTA only: no 취소 beside it, the close × and the scrim cancel. The wheel is not an input: no typing.

Replaces

Raw react-native-modal-datetime-picker (6 files).

Behaviour (library section 2)

RN Modal: the root fades 150 ms and the sheet slides up 200 ms (`quick`, from y +48), backdrop ink α0.4. A tap on the scrim dismisses; the close × (24 in a 44 target) does the same; there is no grabber and no drag (bottom-sheet libraries are retired). The keyboard lifts the sheet through the KeyboardAvoidingView. The sheet is auto-height, capped at 88%, its body a ScrollView that shrinks and scrolls past the cap; a footer CTA is a normal sibling, never absolute. Reduced motion drops the slide.

Replaces

ModalPanel (bottom placement).

Behaviour (library section 2)

Fades 150 ms over ink α0.4. The backdrop does not dismiss and the system back gesture is the same as 취소: a confirm needs a choice. The pair is tonal flex 1 + primary or danger flex 2, gap 12, so the committing button is the larger one and is on the right (thumb side). Destructive wording names the object (일정 취소, 클럽 삭제), never 확인. Role alertdialog; focus lands on the tonal button when the action is destructive, so Enter does not delete.

Replaces

ModalPanel (centre placement) as a confirm.

Behaviour (library section 2)

Fades 100 ms, no shadow (the edge hairline separates it from the page). Right-aligned to the rail under the action, 4 below the header. A tap outside or on a row closes it; each row is a Pressable (pressed .98 scale / .80 dim). Role menu / menuitem; arrow keys move on web. More than five actions is a sheet, not a menu. The destructive row never sits first and always asks a Dialog.

Replaces

HeaderActionsMenu (shadowed).

Behaviour (library section 2)

One at a time (a new toast replaces the old). 2800 ms, the timer pauses while a finger is down. It floats 16 above the tab bar, the wizard footer or the keyboard, whichever is tallest (the code's 8, TOAST_CHROME_GAP, becomes 16 — resolved 2026-10-09, library section 13, K1: it matches the FAB's own 16 offset, one seam), and 16 above a FAB when one is on screen. Swipe down: it follows the finger 1:1 (upward is resisted to 15%), past 40 px or 500 px/s it dismisses with a 150 ms fade, otherwise it springs back. The action is a tap target of the whole pill; reduced motion snaps instead of springing. Role status, announced politely. Errors that belong to a field are never toasts.

Replaces

ToastHost (shadowed, r24).

Behaviour (library section 2)

The spotlight and its order are unchanged from the code: a backdrop with a hole around the target, the card placed on the side with room, the arrow centred on the target. One step at a time with a quiet `1 / 3`; 다음 advances, the last step reads 확인. Tapping the backdrop does nothing (it is a guided tour, not a dismissible tip); there is always a way out through the screen's own back. Shown once per user and per step, and never over a screen the user has not opened.

Replaces

CoachmarkTooltip.

Behaviour (library section 2)

Offline trumps error: a failed query while the device is offline shows the offline variant (the same rule the code applies in QueryErrorState). The button is the only interactive thing (md tonal 44, hit area the box). Reads as one unit for screen readers: glyph hidden, title then body then the button. No card, no illustration, no mint: the disc is the neutral gray100. Compact placement (inside a section) drops the 64 top to 24 and the disc to 64; the full variant owns the screen.

Replaces

EmptyState (mint disc), QueryErrorState, OfflineEmptyState, NotFoundState.

Behaviour (library section 2)

One shared pulse: opacity .6 ↔ .9 with an 800 ms half-cycle, on the UI thread (the same value drives every skeleton on screen, so they breathe together); under reduced motion it pins at .75. A skeleton is the loading state of its own component: same box, same pitch, bars at the height of the type's cap line, never a spinner on a list. Not announced: the container sets aria-busy and the real content replaces it. The shapes are in the gray100 neutral on both themes (dark: the fill).

Replaces

Skeleton, SkeletonCard, SkeletonHero.

Behaviour (library section 2)

The platform's own indicator rotates (the four frames show a quarter turn each); the board draws a 270 degree arc in a 2px stroke. It replaces a button's label at full opacity and the button keeps its width. It never stands alone on a list or a screen (that is a skeleton). Pull-to-refresh uses the native control with an ink tint and shows only for a user pull. On a danger button the arc takes the label colour (white), because ink on #B8332E does not hold contrast.

Replaces

Raw ActivityIndicators (8 files).

Behaviour (library section 2)

Pinned under the header and above the content, so nothing under it moves except by its own 48. It appears the moment the device reports no route and goes the moment one returns (it retries on its own; 다시 시도 forces it). The strip is the screen's only offline message: lists keep their cached rows, and the empty variant of EmptyState appears only when there is nothing cached. Role status; neutral fill, never danger (the user has done nothing wrong).

Replaces

NetworkBanner.

Behaviour (library section 2)

Back is a gray100 square button (a 40 square in a 44 target) and skip an sm tonal Button, both in the header and never ghost text or a bare glyph: the owner's wizard-navigation LAW (2026-08-15, re-ruled in library section 21.1) and the footer holds a single CTA and nothing else. Hardware back mirrors the header back (useWizardBackHandler). Required controls carry the one asterisk and start unset (the required-marker LAW), so 다음 is disabled until they are answered. The progress line is a stepper, not a loader: it moves with the step and carries no animation but a 150 ms colour change. It carries information, so it needs 3:1 non-text contrast (WCAG 1.4.11): ink for done + current, #E5E5E5 for remaining — resolved 2026-10-09 (library section 13, K6); non-text contrast: ball on white is 1.2:1 (1.28 computed), so there is no ball segment. Sequential reveal and the live-draft model are unchanged (RevealStack keeps its 250 ms reveal); a field that is not yet reached is not drawn. Validation is inline under the field. The CTA edge hairline appears only while fields scroll under the band. The keyboard lifts the band; the toast host reads the band's height, which the band reports itself.

Replaces

WizardShell (the card-grammar header, footer 56 button, brand-tinted progress).

Behaviour (library section 2)

The label is a real label for the control (htmlFor / accessibilityLabelledBy); the helper is announced with the control and turns danger text on error (the same node, so the swap never shifts layout by more than the 18 it already holds). A Field with no helper is 70 (18 + 4 + 48) and does not reserve the helper's space; a wizard still keeps 32 between fields either way. The control is any of Input, TextArea, a Choice set, a PickerRow, a Stepper. A required control's label carries the one asterisk (owner LAW, library section 10 corrected 2026-10-10): `$error`, the size of the label, inside the label's own text; the field starts genuinely unset (no default value, an empty Choice set), and a required Field left empty on leaving it shows the danger helper naming what is missing. An optional field has no marker and no 선택 suffix.

Replaces

LabeledField (the label + input + hint stack).

Behaviour (library section 2)

Single choice = role radiogroup (arrow keys move, one selected at all times after the first pick); several = a group of toggle buttons with aria-pressed (selected chips show the check). The set wraps by itself at 350, so two to nine short options fit; more than that is a PickerRow into a sheet. The set keeps its own validation: none chosen on a required field shows the danger helper under it (never a toast). Disabled .5 on the whole set.

Replaces

SelectionChip groups in wizards.

Behaviour (library section 2)

The whole 56 is the target and it carries a label, never a bare glyph. It lives in the content, not the footer (the footer is the one CTA). Pressed .98 scale / .80 dim (row physics), hover .85, focus ring 2px ink offset 2, disabled .5 (a maximum was reached: the label says so in the helper under it). Activating opens the add flow in a sheet or appends an empty row and focuses it, whichever the wizard defines; the row then sits 12 below the new item.

Replaces

AddCard (brand-coloured dashed tile).

Behaviour (library section 2)

It replaces AttachedPanel, the bordered panel that used to hang off a field. Neutral only: a warning or an error is the Field's own helper, never a toned Notice (the form carries no tone but danger text). It is static, not dismissible, and read after the control (aria-describedby). One line is 48 (min), a title + body is 68; it never carries an action in a wizard (the CTA is the action).

Replaces

AttachedPanel.

Behaviour (library section 2)

The whole 48 is the target and opens the ModalPanel sheet with the options as check rows (8.1). Pressed .98 scale / .80 dim, hover .85, focus ring 2px ink inside the row, disabled .5 An empty value shows `선택` in secondary ink; a required empty one adds the danger helper 4 under the row, never a toast. Role button with the current value in its accessibility label (`지역, 서울 강남구`).

Replaces

PickerRow (bordered field row), the Cell-with-chevron lists in wizards.

Behaviour (library section 2)

Not a new component: IconButton with tone danger and `aria-label` naming the item (`1번 코트 삭제`). Pressed .92 / .78, focus ring ink. Removing an item still in the draft is immediate and offers 실행 취소 in a toast; removing a saved object opens a Dialog (8.2) with the destructive pair. Never the only way to remove: the same action is in the row's menu on web.

Replaces

RemoveIconButton.

Behaviour (library section 2)

The helper swaps in for the field's normal helper in the same 18 line, so the form does not jump. It names the fix (`2자 이상 입력해주세요`), not the failure. Colour is never the only signal: the text is. Timing (on blur, on the CTA) follows the wizard's live-draft model, unchanged. The first field in error takes focus when the CTA is pressed with errors; the error clears the moment the value is valid. A choice set or a PickerRow carries the same helper with no border change (it has none to tint).

Replaces

Toast-and-banner validation, hand-drawn red hints.

Behaviour (library section 2)

Only the confirm step shows the pair; every other step is the single primary (the wizard-nav law). The tonal button goes back one step (it is not 취소: leaving is the header's back). The primary names the commit (`클럽 만들기`, never 확인) and shows its loading state (the width is held) while the mutation runs; both buttons are inert during it. The edge hairline #D4D4D4 draws on the band's top only while content lies below it (scroll).

Replaces

BottomCtaBand (16 sides, permanent hairline) and WizardShell's two-button footer.