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

Рейка фільтрів

У цьому файлі дві різні речі. .frail - колонка фільтрів на семи екранах лістингу: заміряно 240x1871 при 1280, 164 елементи всередині, і 0x0 при 390. .hrail з флайаутом - рейка категорій на чотирьох екранах головної. Спільного екрана в них немає жодного. Плюс два !important, і обидва про ту саму межу.

рівень 3design/system/components/filter-rail.css89 рядків40 селекторів91 оголошення22 екрани

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

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

Файл	Класів	Які саме
`field.css`	4	`.field` `.field--mono` `.field--s` `.frow`
`price-slider.css`	3	`.uiv-fill` `.uiv-slider` `.uiv-track`
`filter-group.css`	2	`.fgroup` `.fmore`
`chip.css`	2	`.flink` `.flinks`
`checkbox.css`	1	`.cb`
`button.css`	1	`.btn--text`

4 класи всередині кореня мають більш ніж одного власника, тож із коду не видно, чий вони: .ct .fh .fopt .in

Анатомія

Розмітка тут - не переписана від руки. Її знято з design/listing.html у цій же сесії, обробники зняті, посилання підняті на рівень. Корінь тут fixed або sticky і в продукті видимий, тож open йому не додавали. Сцена потрібна тільки щоб він лишався всередині свого демо.

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

1Колонка фільтрів .frail - display:none, від 860 block; position:sticky з top:82px, рамка волосиною, радіус 12. На телефоні її роль бере нижній лист filter-sheet.css

2Рейка категорій .hrail - той самий вимикач на 860, але тінь --elevation-1 і падінг 8 зверху й знизу. Перший рядок a.lead - «За ціллю» у --fw-black, під ним роздільник .rsep

3Флайаут .hrail-fly.wfh-mega - бере клас панелі хедера й одразу його переписує: absolute від top:0 до bottom:0, left: calc(100% - 1px), 600px завширшки зі стелею calc(100vw - 249px), сітка з трьох колонок скасована на grid-template-columns:none. Це навмисне повторне вживання, а не збіг

4Шов .hrail-wrap:has(.hrail-fly.open) .hrail - поки флайаут відкритий, права пара кутів рейки випрямляється, а зверху лягає inset 0 1px 0 var(--line-action). Два прямокутники читаються як один

5Знак .hrail a .ic - коробка 18px у структурі, а всередині svg 17px. Емодзі сірого прототипу міняє на набір іконок uivIcons() у design/_nav.js: сірий шар володіє блоками, колірний - тільки заповнювачами

6Скрим флайаута .hrail-scrim - fixed inset:0, z-index 20, --scrim-overlay. Він нижчий за .hrail-wrap (25) і за сам флайаут (38), тож затемнює сторінку, не чіпаючи рейку

Обидва `!important` кажуть одне речення

@media (max-width: 859px){ .hrail-fly.wfh-mega{ display:none !important } } б'є .hrail-fly.wfh-mega.open{ display:block } - три класи проти двох. .hrail-scrim{ display:none !important } б'є .hrail-scrim.open - два проти одного. В обох випадках перебивають НЕ чужий файл, а власний стан: нижче 860 флайаута не існує, хоч би що JavaScript лишив на елементі.

У всьому шарі !important рівно п'ять, у чотирьох файлах, і всі п'ять однакові за змістом: display:none на межі 860. Два тут, одне в header.css (скрим мегапанелі), і ще два з протилежного боку - filter-sheet.css і nav-drawer.css вимикають мобільне вище 860. Це не п'ять недбалостей, а один брак механізму: системі нічим сказати «цього компонента на цій ширині не існує».

Демо порожнє, поки вікно вужче за 860. Це не помилка сторінки: .frail у продукті так само display:none нижче межі, і заміряно там 0x0. Розширте вікно - або подивіться filter-sheet.css, який робить цю роботу на телефоні.

Друга рейка того самого файлу, і в цьому в'юпорті її не існує

.hrail - не варіант .frail, а окремий організм: рейка категорій на головній, яка на наведення розкриває флайаут .hrail-fly праворуч і гасить решту сторінки підкладкою .hrail-scrim. Спільного в них тільки слово «рейка»: одна фільтрує список, друга веде в каталог.

Чому її тут не було видно, і це не недогляд сторінки. .hrail - display: none до 960, а флайаут і підкладка несуть display: none !important до 860. На ширині, де стоїть рейка фільтрів, уся ця сім'я не малює нічого, і жодне правило стенда цього не змінює - медіа-умова читає в'юпорт. Тому друга рамка, а не друге демо.

Розмітку пише wfHomeRail() - та сама функція, яку викликає design/index.html, - і відкриває флайаут її власний аргумент { open: true }, тобто hcFly('g'), те саме, що робить наведення. Ширина колонки рейки 249px - та, яку вона займає на головній; без неї флайаут не мав би до чого притулитись.

.rsep - волосяна лінія під «За ціллю»: єдиний розділювач рейки, і він відділяє ціль від решти каталогу, а не групує категорії

І саме тут знадобилась друга рамка на сторінці

До 8.34 механізм підгонки рамки брав querySelector('.kp-frame'), однину, тож сторінка могла тримати рівно одну: друга завантажилась би й лишилась не підігнаною, на типових 150px. Це не було рішенням - це була копія, повторена в 24 сторінках побайтно. Тепер один design/kit/_frame.js і querySelectorAll; більше в підгонці не змінилось нічого.

Стани

Стан	Що робить	Чому так
спокій	рядок рейки `--text-body` / 14, стрілка `.ar` у `--mark-faint`	рейка тихіша за товари поруч: вона орієнтир, а не заклик
наведення `:hover` і обрано `.on`	фон `--bg-surface`, слово `--text-action`, зліва `inset 2px 0 0 var(--line-action)`; знак і стрілка теж у колір дії	один малюнок на два стани, як у мегапанелі хедера: рейка відкривається наведенням, тож «під курсором» і «показано» - це те саме
флайаут відкрито	`.hrail-fly.open` і `.hrail-scrim.open` в `display:block`, кути рейки випрямляються, її верхня рамка йде в колір дії	`.on` ставить `hcFly()` на `mouseenter`; знімає його `hcClose()` - інакше остання наведена категорія лишалась би позначеною назавжди, бо рейка, на відміну від колонки мегапанелі, зі сторінки не зникає
до 859	колонка, рейка, флайаут і скрим - усі чотири `display:none`	фільтри на телефоні це нижній лист, категорії - накладка каталогу
фокус	немає	файл не оголошує жодного стану фокуса, хоча заголовки груп у розмітці мають `tabindex="0"` і `role="button"`

Межі

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

@media (min-width: 860px)
@media (max-width: 859px)

Обмеження

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

Одна рейка на екран, і вона десктопна половина пари: на 390 її не видно ніде в корпусі, там її роботу робить filter-sheet.

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

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

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

Від якого порогу: --bp-shell-wide, парою 859/860, уже реєстровою. Що саме міняється: нижче точки рейки фільтрів немає - її роботу робить шит. Раунд організмів нічого не складав.

Рух

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

Крок 4. Єдина поверхня продукту, у якої є БІК, звідки прийти. Флайаут стоїть впритул до рейки (left: calc(100% - 1px)), тож приїжджає З рейки: --move-md ліворуч і далі нічого. Це те місце, де правило напрямку робить свою єдину справжню роботу - решта поверхонь центровані, на всю ширину або приклеєні до тригера, і боку не мають. --dur-base, а не --dur-slow: це панель рейки, відкрита вказівником, який уже на рейці лежить, і третину секунди під рухомим курсором просто переганяють. Скрим отримав те саме число, щоб сідали разом.

Токени

Прочитані з filter-rail.css: 13 семантичних ролей і 11 примітивів.

Семантичні ролі (13)	Примітиви (11)
`--bg-page` `--bg-surface` `--elevation-1` `--elevation-3` `--line-action` `--line-hair` `--line-inverse` `--mark-faint` `--scrim-overlay` `--text-action` `--text-body` `--text-primary` `--text-secondary`	`--fs-14` `--fw-black` `--fw-bold` `--fw-semibold` `--radius-12` `--space-12` `--space-16` `--space-2` `--space-24` `--space-4` `--space-8`
–	`--dur-base` `--dur-fast` `--ease-enter` `--ease-exit` `--ease-standard` `--move-md`

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

По всіх 20 селекторах: одне мертве оголошення і двадцять незбіглих. Мертве очікуване - .hrail-fly.wfh-mega{ border-top-color } зі структурного блоку б'є колірний нижче в цьому ж файлі, і це саме той розділ етапу 08, де колір іде другим і виграє навмисне.

Двадцять з сімдесяти восьми оголошень не бачили нічого

І всі двадцять належать двом станам: .hrail a.on (одинадцять оголошень плюс стрілка й знак) і .hrail-fly.open / .hrail-scrim.open разом із швом :has(). Обидва стани ставить миша, а вирішувач читає сторінку в спокої. Отже заміряно рівно половину файлу: рейку в спокої. Флайаут - ні, і саме він тут найскладніша фігура.

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

Чого бракує

Флайаут не заміряний. Двадцять оголошень із сімдесяти восьми не бачило жодного елемента, бо їх вмикає наведення. Ширина 600px, стеля calc(100vw - 249px) і поведінка на вузькому десктопі - усе це поки не число, а намір
Дві фігури під одним іменем. .frail і .hrail не зустрічаються на жодному спільному екрані; чи це один компонент, файл не відповідає
top: 82px - сире число. Хедер заміряно 112 при 1280 і 73 при 390, і 82 не виводиться з жодного з них. Це рішення про значення: «змінна -> значення -> чому»
Немає стану фокуса, хоча рейка це список посилань, а групи фільтрів мають tabindex
Межа 859 / 860 незаміряна власними ширинами, а на ній компонент з'являється і зникає цілком