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

Оверлей

16 рядків, 4 селектори, 16 оголошень, жодної семантичної ролі й один примітив. Це не компонент - це два затемнення, яким не знайшлося іншого файлу. .wf-ov лежить на 34 з 40 кольорових екранів, 37 екземплярів, і в нього нуль дітей: те, що він затемнює, ніколи не всередині нього. .ceov у тому ж файлі - протилежне: він затемнює і тримає діалог, і саме він несе role="dialog".

рівень 3design/system/components/overlay.css58 рядків12 селекторів24 оголошення134 екрани

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

Таблиця складу порожня, і це і є знахідка: всередині кореня немає класів чужих файлів, бо всередині кореня немає нічого.

Усередині кореня жодного класу іншого компонента, і дітей у нього 0. Це не «організм ні з чого не складений» - це корінь, який нічого не містить: затемнення або підкладка, а те, що вона затемнює, лежить не в ній.

Анатомія

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

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

Другий клас файлу стоїть окремо, і інакше не можна. Обидва position: fixed на inset: 0, тож в одному в'юпорті вони лягли б один на одного і сторінка показала б подвійне затемнення замість двох компонентів. .ceov - на сцені нижче: він тримає діалог, а не гасить порожнечу, тож усередині справжня дитина, .cedlg з client-dialog.css. Сам .ceov не малює нічого, крім фарби, центрування й padding: var(--space-24) - усе, що ви бачите всередині, належить дитині, і в цьому вся його робота.

Сцена - це трансформований предок, тож inset: 0 рахується від неї, а не від сторінки: .ceov не втрачає жодного свого оголошення й нічого не накриває

1Затемнення .wf-ov - position:fixed, inset:0, z-index:60, фон --scrim-overlay. Порожній <div>: 37 екземплярів на 34 екранах і 0 дітей

2Три різні панелі під одним класом - #city-ov закриває діалог міста, #pm-ov закриває модалки товару, #ckset-ov закриває налаштування cookie. Три екрани товару несуть по два .wf-ov одразу - через це 37, а не 34

3Контейнер .ceov - теж fixed і теж inset:0, але display:flex по центру, padding: var(--space-24), overflow-y:auto, z-index:55. Його дитина - .cemodal або .cedlg. 6 екземплярів на 2 екранах

4Сходинка 55 і 60 - діалог адреси (.ceov, 55) відкриває діалог міста (.wf-ov 60 плюс .wf-city 61) прямо зі свого поля міста. Порядок тримається саме тому, що ці числа різні

5Один токен на вісім затемнень - --scrim-overlay читають .ceov .wf-ov .auth-ov .cart-ov .fsheet-ov .wfh-scrim .hrail-scrim .menu-scrim - вісім класів у сімох файлах. Коментар біля токена в tokens.css пам'ятає сім колишніх значень (.25 .36 .44 .46 .50 .52 .52) і рахує сім ужитків. Їх вісім

6Єдиний примітив --space-24 - відступ .ceov. Семантичних ролей у файлі нуль, а токен, на якому він увесь стоїть, не належить до жодного з двох списків перепису: родина --scrim-* полиці не має

Що це таке і чим воно не є

.wf-ov не є компонентом, оболонкою чи предком чогось: він не має дітей ні на одному з 34 екранів. Він є одним прямокутником фарби, який ловить клік, - і навіть цей клік не в цьому файлі, а в атрибуті onclick розмітки. Файл затемнює, не знаючи, що саме, і закриває, не знаючи, що саме.

Решта шару так не робить: шість інших затемнень живуть у файлі того компонента, який вони гасять (header.css, cart-drawer.css, filter-sheet.css, filter-rail.css, menu.css, auth-dialog.css). Два лишилися тут, і причина в них різна: .wf-ov служить трьом панелям одразу, тож не належить жодній, а .ceov служить дев'ятьом діалогам, побудованим на льоту.

Стани

Стан	Що робить	Чому так
закрито	`.wf-ov{display:none}` і `.ceov{display:none}`	стан спокою на кожному екрані, де вони лежать
відкрито	`.wf-ov.open` - `block`, `.ceov.open` - `flex`	вирішувач: жоден із двох не збігся з елементом. Половина селекторів файлу існує лише в русі
клік	закриває те, що затемнює	через `onclick` у розмітці, а не через цей файл: `closeCity()`, `closePM()`, `closeCookieSettings()`
фокус	нічого	у затемнення немає фокусованих дітей, і пастка 7.85 навмисно лишає всі три скрими осторонь: fixed, але нуль фокусованих - це не панель
поява	без переходу	`display:none` на `display:block` перехід не бере, і файл цього не пробує. Чи читається це різко - не заміряно

Межі

У файлі жодної медіа-умови: одна редакція на всі ширини.

Те, що лишилось позаду

.behind - сторінка під оверлеєм на сторінках стенда: половина непрозорості, знята барва і жодних вказівників. Це не стан продукту, а спосіб показати оверлей у демо так, щоб було видно, ЩО він накриває.

Вміст сторінки, який лишається позаду оверлея.

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

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

Рух

Робота: ЗВ'ЯЗОК. Обидва це СКРИМИ: вони гасять те, що позаду, щоб поверхня спереду читалась як єдине живе. Скрим не подорожує - йому немає звідки прийти, - тож він лише проявляється, на тому самому --dur-slow, що й поверхня, яку супроводжує, інакше темрява сяде раніше за діалог. До кроку 4 обидва з'являлись перемиканням display і руху не мали взагалі.

Токени

Прочитані з overlay.css: 1 семантична роль і 1 примітив.

Семантичні ролі (1)	Примітиви (1)
`--scrim-overlay`	`--space-24`
–	`--dur-slow` `--ease-enter` `--ease-exit`

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

Чотири селектори. Жодного оголошення, яке б збігалося з елементом і не вигравало, і це не заслуга: у файлі просто нема чому з чим сперечатися. Зате два з чотирьох селекторів не збіглися ні з чим - обидва .open. За сорока кольоровими екранами в спокої жодне з двох затемнень не намальовано ввімкненим жодного разу.

З цього виходить головне питання файлу, і воно не про css. overlay.css - єдиний з 24 організмів, у якого немає ані власної розмітки, ані власного стану, ані ролі. Він тримає значення, яке належить восьми іншим файлам, і два імені, які належать різним речам. Питання етапу 09 звучить так: це компонент, чи це шар?

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

Чого бракує

.wf-ov і .ceov це різні речі під одним іменем файлу - одне гасить, друге тримає. Або два файли, або одне ім'я на обох
Затемнення шару розкидані по семи файлах, а тут лежать два «нічиї». Правило про те, де живе скрим, - рішення етапу 09
Коментар токена рахує сім ужитків, їх вісім - лічильник у коментарі відв'язаний від коду й дрейфує мовчки
--scrim-* не потрапляє в жоден із двох списків перепису: ані семантична роль, ані примітив. Третя родина без полиці
Немає переходу появи, і жодного заміру про те, чи він потрібен

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