Організм · рівень 3

Діалог міста

Найтиражніший діалог шару: він лежить на 34 з 40 кольорових екранів, і в ньому 816 кнопок міст плюс 272 бейджі популярних. При цьому вирішувач каже, що .wf-city.open не збігся з жодним елементом: у спокої його не намальовано розкритим ніде. 29 рядків, і колірного блоку немає взагалі - один із шести файлів організмів, де розділ етапу 08 лишив другу половину порожньою.

рівень 3design/system/components/city-dialog.css65 рядків19 селекторів73 оголошення134 екрани

З чого складається

Складає всього два файли - поле й кнопку. Решту, включно з сіткою міст і бейджами, малює сам.

Файл	Класів	Які саме
`field.css`	2	`.field` `.field--s`
`button.css`	2	`.btn--icon` `.btn--s`

2 класи всередині кореня мають більш ніж одного власника, тож із коду не видно, чий вони: .btn--ghost .uiv-ic

Анатомія

Розмітка тут - не переписана від руки. Її знято з design/index.html у цій же сесії, обробники зняті, посилання підняті на рівень. Цей організм у спокої не існує - він display: none, доки щось не додасть open, - тож стенд додає цей клас сам. Показано на сцені: трансформований предок стає для position: fixed тим блоком, від якого рахується його inset, тож панель не накриває сторінку й не втрачає жодного свого оголошення.

Показано в рамці шириною 390, і ширина названа не для краси: це ширина, на якій цей організм у продукті стоїть. Медіа-умова читає в'юпорт, а не контейнер, тож жодне правило самого стенда цього не вирішує - тільки справжній в'юпорт, а він є лише в рамки. Сам організм у рамці обмежено до 560px - це ширина, яку він займає в продукті на 1280. Витягнутий зі своєї колонки, він розтягнувся б на всю рамку, і кнопка на 294 стала б кнопкою на 1490.

1Корпус .wf-city - position:fixed, 560 завширшки, не більше 94vw і 86vh, z-index:61, --elevation-4, по центру через translate(-50%,-50%). Рівно один на екран, 34 на весь шар

2Шапка .wf-city-h і закриття .x - --fs-20. .x це один зі 126 неоднозначних імен: його називають п'ять файлів - chip, city-dialog, cookie-banner, filter-sheet, review-modal

3Пошук .city-search - розмітка бере .field .field--s, а цей файл поверх них удруге каже рамку, радіус, відступи й кегль. Організми в index.css підключені після атомів, тож виграє тут завжди він

4Популярні .city-pop .city-badge - гнучкий ряд пігулок, 8 на екран, 272 на шар. :hover міняє тільки рамку на --line-inverse

5Абетка .city-list .city-az - сітка в 3 колонки, до 479 у 2. 24 кнопки на екран, 816 на шар. :hover дає --text-primary і підкреслення

6Примітка .city-note - --fs-12, волосина зверху, --text-muted. Каже, що пошук знайде будь-яке місто, і це єдина відповідь файлу на «мого міста тут немає»

34 контроли, до яких не було як дійти

Крок 7.85 заміряв усі вісім панелей, що рендеряться на 390. Цей діалог має 34 фокусовані контроли, і жоден не досягався без миші: п'ять натискань Tab клали фокус на сторінку позаду. Він при цьому оголошує role="dialog" aria-modal="true" - тобто каже читачеві екрана, що решта сторінки інертна, поки клавіатура крізь неї спокійно ходить. Пастка, дописана в wireframes/_nav.js, тримається не на списку імен, а на формі: .open плюс position:fixed плюс ненульова висота плюс хоча б один видимий фокусований. Після неї 40 зупинок з 40 усередині, Escape закриває 8 з 8, фокус повертається на той самий контроль, що відкривав.

Стани

Стан	Що робить	Чому так
закрито	`.wf-city{display:none}`	стан спокою на всіх 34 екранах, і єдиний, який бачив перепис
відкрито	`.wf-city.open` - `display:flex`	вирішувач: цей селектор не збігся з жодним елементом на 40 екранах
наведення на пігулку	`.city-badge:hover` - рамка в `--line-inverse`	єдина зміна, і вона не чіпає ні фон, ні текст
наведення на місто	`.city-az:hover` - `--text-primary` плюс `text-decoration:underline`	кнопка поводиться як посилання, бо в списку з 24 позицій рамка на кожній була б шумом
до 479	сітка міст із 3 колонок у 2	єдина медіа-умова файлу
вибране місто	немає	`wfPickCity()` переписує підпис у шапці й закриває діалог; ні бейдж, ні рядок списку не отримують нічого - відкривши діалог удруге, ви не побачите, де ви

Межі

У файлі 1 медіа-умова, і кожна з них - межа, якої стандартні ширини перепису (360 / 390 / 720 / 1280) не бачать зсередини смуги. Заміряти їх треба власними ширинами, по одній з кожного боку.

@media (max-width: 619px)

Обмеження

Правила вживання, які називають саме цей компонент: U1 · U2. Автор правил один, і це architecture.html, розділ I; тут - витяг.

Один діалог міста на екран; у флоу оформлення і на службових сторінках його немає.

Холостий контроль

Сторінка звіряє себе з файлом: 10 власних класів і 1 стан.

ПОВЕДІНКА НА ШИРИНІ - етап 10, крок 4

Від якого порогу: --bp-grid-2col дзеркалом 619. Що саме міняється: список міст іде з трьох колонок у дві. Було 479, поза реєстром: телефонна межа, яку продукт писав у шести файлах і жодного разу однаково.

Рух

Робота: ЗВ'ЯЗОК. Центрований діалог піднімається у власний центр: --move-md, --dur-slow, --ease-enter на вхід і --ease-exit на вихід. Рух вписано ВСЕРЕДИНУ центрувального transform - translate(-50%, calc(-50% + var(--move-md))) - бо другий transform замінив би центрування і викинув діалог у куток. При reduce токен дорівнює 0px, і вираз згортається в той самий центр.

Токени

Прочитані з city-dialog.css: 8 семантичних ролей і 16 примітивів.

Семантичні ролі (8)	Примітиви (16)
`--bg-page` `--elevation-4` `--line-hair` `--line-inverse` `--line-strong` `--text-body` `--text-muted` `--text-primary`	`--fs-12` `--fs-14` `--fs-18` `--fs-20` `--fw-black` `--fw-bold` `--lh-airy` `--ls-caps` `--radius-12` `--radius-8` `--radius-pill` `--space-12` `--space-16` `--space-24` `--space-4` `--space-8`
–	`--dur-slow` `--ease-enter` `--ease-exit` `--move-md`

Що знайшов вирішувач

15 селекторів, 65 оголошень, жодного, яке б збігалося з елементом і не вигравало. Не збігся з нічим рівно один - .wf-city.open { display }. Чисто, і причина проста: у файлі немає другої редакції. Там, де в auth-dialog колірний блок переписує структурний і б'є його 33 рази, тут колірного блоку немає, тож битися нема чому. Це найдешевший спосіб не мати конфлікту - і водночас означає, що кольоровий продукт малює цей діалог правилами сірого прототипу, у яких лише підмінено значення на токени.

Немає в коді -> етап 09

Чого бракує

Нічим не позначено поточне місто - ні в популярних, ні в абетці. Стан вибору потрібен там, де вибір зберігається
Немає стану порожнього пошуку - поле type="search" є, відповіді «нічого не знайдено» немає
Свого кільця фокуса немає на 816 кнопках: файл не називає жодного фокусного стану
Межу 479 не заміряно власними ширинами - потрібні 479 і 480

Не домальовано наперед і не замовчано: етап 09 стартує з цього списку, зведеного в design/kit/docs/architecture.md.