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

Банер cookie

Жоден кольоровий екран цього не малює, і жоден не може: місце для банера - id="wf-cookie" - існує рівно в одному файлі всього репозиторію, wireframes/system.html, а wfCookie() пише розмітку тільки в нього. Тому вирішувач не знаходить для цього файлу жодного елемента: 291 оголошення не збігаються ні з чим - найбільший такий блок серед 24 організмів (для порівняння: system-page 210, cat-overlay 178). Демо нижче отримане штучно: у design/index.html вставили порожній div#wf-cookie і викликали будівника.

рівень 3design/system/components/cookie-banner.css84 рядки34 селектори130 оголошеньжодного кольорового екрана291 оголошення без елемента

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

Таблиці складу немає: кореня .wf-cookie зонд не знайшов на жодній сторінці. Будівник пише три речі одразу - смугу згоди, підкладку .wf-ov з overlay.css і діалог налаштувань .wf-ckset; у демо нижче лише перша з трьох, бо діалог з'являється після натискання «Налаштувати». У смузі 8 елементів, і всі вісім - свої.

Замір не відбувся. Кореня цього організму немає в спокої на жодному кольоровому екрані, тож обхід сорока екранів не мав що обійти. Склад читається з файлу й з розмітки, знятої після виклику будівника, а не з цієї таблиці.

Анатомія

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

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

1Смуга .wf-cookie - fixed знизу, z-index 55, рамка зверху 2px --line-inverse, --elevation-bar-top, flex-wrap. Від 620 падінги 16 -> 24, і це єдина медіа-умова файлу

2Текст .ck-txt - flex: 1 і min-width: 240px. Саме це число вирішує, коли три кнопки падають під текст, і воно поза шкалою

3Три дії .ck-btn - власна кнопка, а не фініш з button.css: своя рамка, свій радіус --radius-8, свій падінг, свій кегль, а .ck-btn.ghost робить третю тихішою. У підвалі діалогу поруч стоять уже .btn--outline і .btn--accent - дві системи кнопок в одному компоненті

4Діалог .wf-ckset - fixed по центру, 480 / 94vw / 88vh, --elevation-4, z-index 61: той самий поверх, що в .cart-drawer, .wf-city і .pm. Чотири панелі на одному числі, і жодного токена порядку в шарі немає

5Перемикач .ck-tog - 42x24 з кулькою i 18px, зсув на 20px, три сирі числа. Класи .on і .locked ставить wfCkTog(); .locked це opacity: .6 і cursor: not-allowed

6Категорії .ck-cat з назвою .ck-cat-t, поясненням .ck-cat-d (шириною до 300) і замком .ck-lock, під ними примітка .ck-note, а внизу .wf-ckset-h / .wf-ckset-b / .wf-ckset-f: три рядки - необхідні (замкнені), аналітика, маркетинг

Посилання у футері, яке нікуди не веде

Футер малюється на 31 кольоровому екрані, і в ньому є «Змінити згоду»: <a href="#" onclick="openCookieSettings()">, wireframes/_nav.js:1777. Далі за кодом: openCookieSettings() шукає #ckset, а не знайшовши - робить location.href = 'system.html'. #ckset пише тільки wfCookie(), тобто тільки там, де є id="wf-cookie". У теці design/ файлу system.html немає. Це прочитано по коду, а не натиснуто в браузері, і кожна ланка перевіряється одним грепом.

Інвентар каже інше

design/kit/kit.html:213 у таблиці компонентів пише про цей файл «вузол S, на всіх сторінках». У репозиторії - одна сіра сторінка й нуль кольорових. Одне з двох тверджень треба зняти, і це рішення власника, а не правка вітрини.

Діалог налаштувань, і в ньому десять із п'ятнадцяти класів файлу

wfCookie() пише три речі одразу - смугу, підкладку і діалог, - але діалог лишається закритим, доки хтось не натисне «Налаштувати». Тому у спокої смуги десяти класів не існує ніде: .wf-ckset з головою, тілом і підвалом, а всередині .ck-cat, .ck-cat-t, .ck-cat-d, .ck-lock, .ck-tog, .ck-note.

Рамка нижче нічого не набирає: порожній #wf-cookie, потім wfCookie() і openCookieSettings() - та сама функція, яку викликає третя кнопка смуги.

Три категорії, перша замкнена: .ck-tog.on.locked - opacity: .6 і cursor: not-allowed. У підвалі дві системні кнопки, .btn--outline і .btn--accent, тоді як на смузі стоять власні .ck-btn - дві системи кнопок в одному компоненті, і це вже записано вище

А відкрита панель привела знахідку, більшу за цей компонент

Контейнер панелі малює синє кільце фокусу Chrome - auto 1px rgb(0, 95, 204), синій, якого немає в палітрі. Причина не в цьому файлі: пастка фокусу з 7.85 ставить tabindex="-1" на кожну відкриту фіксовану панель і фокусує саме контейнер - навмисно, «щоб він оголосив власну назву й не вибирав дію за того, хто ще не прочитав панель». Кільце для цього контейнера ніхто не оголошував: у системі фокус описаний покомпонентно, для контролів.

Заміряно на трьох справжніх кольорових екранах, не тут: #fsheet на listing.html, #city-dlg на index.html, #wf-catov на product.html - усі три auto 1px rgb(0, 95, 204). Не полагоджено: «зняти кільце з контейнера» і «дати контейнеру системне --color-focus» - це різні відповіді про те, чи людина з клавіатурою має бачити, що фокус переїхав. Рішення власника.

Стани

Стан	Що робить	Чому так
смуга у спокої	три дії однакової ваги: «Прийняти всі», «Тільки необхідні», «Налаштувати»	згода за українським правилом дається до, а не після, і відмова не має бути важчою за згоду
згоду збережено	`.wf-cookie.hidden` -> `display: none`	клас додає `saveCookiePrefs()`; це єдиний стан файлу, який вмикається в рантаймі
діалог відкрито	`.wf-ckset.open` -> `display: flex`, під ним `.wf-ov.open`	підкладка чужа - з `overlay.css`, - і саме тому цей файл не має власного затемнювача
перемикач увімкнено	`.ck-tog.on` -> фон `--bg-inverse`, кулька їде на 20px	єдиний рух у файлі: `transition` на фоні й на `left`
перемикач замкнено	`.ck-tog.locked` -> `opacity: .6`, `cursor: not-allowed`, і `wfCkTog()` виходить першим рядком	необхідні cookie не вимикаються, і це сказано двічі: виглядом і кодом
фокус	перемикач це `<span role="switch">` без `tabindex`	з клавіатури до нього не дійти; у файлі немає жодного псевдокласу стану, тож і кільця фокуса він не описує

Межі

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

@media (min-width: 620px)

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

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

.hidden стоїть у станах, а не в класах: його дописує classList.add на смугу в мить, коли вибір збережено, і знімає showCookieBar(). Це відсутність компонента, а не його вигляд - відрендерити її означало б показати порожнє місце й назвати це демонстрацією.

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

Від якого порогу: --bp-grid-2col, уже реєстрове. Раунд організмів нічого не складав. І окремо про нуль: лічильник показує нуль екранів з тієї самої причини, що й в оверлея каталогу - банер ставиться скриптом на подію, а не лежить у розмітці.

Рух

Робота: ВІДПОВІДЬ. Рухається: фон і позиція перемикача згоди. Тривалість --dur-fast (150ms), крива --ease-standard. Значення читаються через var(): підміна токена в браузері веде за собою кожне з них. При prefers-reduced-motion рух зникає, а стан лишається.

Позиція повзунка їде через left - РОЗКЛАДКА, третє з чотирьох таких місць. Перегляд на кроці 5.

Крок 4, і банер це ДЗЕРКАЛО решти дев'ятнадцяти поверхонь. Він увімкнений за замовчуванням, а клас його ЗАБИРАЄ, тож єдиний рух у нього - на вихід: --ease-exit, --move-md униз. Прилад motion.mjs --surfaces не бачив його, поки читав лише «видиму» сторону, - тобто поверхню, яку зустрічає КОЖЕН відвідувач, і саме її не було в списку. Діалог налаштувань отримав те саме, що city-dialog.

Токени

Прочитані з cookie-banner.css: 11 семантичних ролей і 18 примітивів.

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

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

Усі 28 правил файлу лежать у списку «не збігається ні з чим», разом 291 оголошення - найбільший такий блок серед 24 файлів організмів. Списку «збігається й не виграє» тут бути не може: щоб програти, треба спершу зустріти елемент.

І одна цифра з того ж перепису, якій не можна вірити

Перепис приписав цьому файлу «1 кольоровий екран». Це .locked: серед 24 організмів його називає лише cookie-banner.css, тож зонд узяв його за корінь файлу. Два елементи, які він знайшов на account-empty.html, - це .lrung.locked, сходинки лояльності з loyalty-rung.css. Банера там немає. Через це в шапці цієї сторінки написано «жодного кольорового екрана», а не «1».

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

Чого бракує

Четвертий розмір кнопки, якого в наборі немає. Заміряно на 390: .ck-btn це 48px заввишки, 14/700, поля 12/16, радіус 8, край 1. У button.css розмірів три - S це 40 при 14, M це 52 при 16, L це 64 при 16. Банер узяв кегль від S, поля від M і висоту, якої немає ні в кого, тобто намалював свою кнопку замість набору. Три штуки, і всі три на екрані, якого в кольорі не існує - тому це й не спливло раніше
Рішення про місце - або id="wf-cookie" лягає в оболонку кольорового шару (і тоді 42 рядки нарешті мають де існувати), або файл чекає далі; третього немає, а мовчати про це не можна, бо згода на cookie це вимога закону, а не оздоблення
«Змінити згоду» на 31 екрані веде в system.html, якого в design/ немає
.ck-btn - кнопка поза button.css: у тому самому компоненті нижче стоять справжні фініші, тож або смуга переходить на них, або в системи два визначення кнопки
Перемикач недосяжний з клавіатури - role="switch" без tabindex і без стану фокуса
Інвентар суперечить репозиторію - kit.html:213 каже «на всіх сторінках»

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