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

Повзунок ціни

Тридцять три рядки, три власні класи, жодної медіа-умови - і жодного з цих класів немає в розмітці сторінки. uivPriceSlider() у design/_nav.js:752 знаходить .frange, дописує йому .uiv-slider і вкладає всередину доріжку, залив і два input[type=range]. Файл одягає розмітку, якої не існує, доки сторінка не відпрацювала.

рівень 3design/system/components/price-slider.css33 рядки13 селекторів62 оголошення13 екранів

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

Повзунок нічого не складає, і це рідкість у третьому рівні: у корені лише чотири елементи, і два з них - поля .uiv-rmin і .uiv-rmax, які не описані жодним файлом системи.

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

Анатомія

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

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

1Корінь .uiv-slider - position:relative, висота --size-20, поля 16 / 4 / 12. На 1280 заміряно 198x20

2Доріжка .uiv-track - абсолютна, 4px, --radius-4, --bg-track. Лежить на всю ширину і ніколи не рухається

3Залив .uiv-fill - та сама 4px смуга в --bg-action, але left і width їй пише JS у відсотках. Css каже, який вона має вигляд; де вона починається - каже значення

4Два повзунки в одному - два input[type=range] накладені один на один. Поле має pointer-events:none, а кнопка - auto, тож клік проходить крізь усе поле й ловиться самою лише кнопкою. Коли вони сходяться, JS піднімає нижній z-index з 3 на 6, щоб його не можна було втратити під верхнім

5Кнопка - 16x16, --radius-circle, --bg-action, обвід 2.5px --line-onaction, --elevation-knob. Написана двічі, для -webkit- і для -moz-: 6 із 13 селекторів файлу - це одна кнопка двома діалектами, і ще 2 - та сама доріжка, яку теж треба гасити в обох

6Дві копії на кожному екрані - у бічній рейці і в мобільному аркуші, обидві будуються на завантаженні. Видно не більш ніж одну: .frail до 860 це display:none, а .fsheet-ov без open теж. На 390 у спокої не видно жодної, і тому заміряний корінь там 0x0

Клас, який тримає контроль, не належить нікому

У розмітці корінь підписаний class="frange uiv-slider", і .frange - це не клас цього файлу й не клас жодного іншого. Він лишився від сірого прототипу, де був малюнком повзунка: доріжка 4px і дві крапки по 12, приколоті на 18% і 26%, і жодна з них не тягнулася. filter-group.css малював цю картинку і за чотири рядки нижче гасив її ж - .frange.uiv-slider{ background:none; border-radius:0 } плюс content:none на обидві крапки. Заміряно перед видаленням: двадцять два оголошення, з них нуль доходило до пікселя. На кроці 7.75 пішли обидві половини, і малюнок, і гумка. Лишилася назва в розмітці, за якою тепер немає файлу.

Стани

Стан	Що робить	Чому так
спокій	доріжка `--bg-track`, залив `--bg-action`, дві кнопки з `--elevation-knob`	єдиний акцент у бічній панелі: заливається тільки обраний відрізок
`:hover`	кнопка `scale(1.14)`, курсор `grab`	ціль виростає під курсором до того, як її схопили
`:active`	`scale(1.14)`, курсор `grabbing`, тінь міняється на `--elevation-knob-active`	тінь - єдине, що відрізняє «наведено» від «тримаю»
`:focus`	`outline:none` і нічого натомість	це справжній `input[type=range]`, у нього є табстоп і стрілки, і жодного знаку на екрані. Список із тринадцяти селекторів у `link-row.css`, які вмикають системне кільце, полів діапазону не містить
невидимий	0x0 - або рейка нижче за 860, або аркуш закритий	на 390 у спокої обидві копії нульові; мобільна проявляється тільки з відкритим аркушем фільтрів

Межі

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

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

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

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

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

Рух

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

Рух оголошений на вендорних псевдоелементах (::-webkit-slider-thumb, ::-moz-range-thumb), і getComputedStyle їх не читає взагалі. Прилад чесно каже «файл оголошує рух, на сторінці його не видно» замість того, щоб назвати компонент нерухомим.

Токени

Прочитані з price-slider.css: 5 семантичних ролей і 6 примітивів.

Семантичні ролі (5)	Примітиви (6)
`--bg-action` `--bg-track` `--elevation-knob` `--elevation-knob-active` `--line-onaction`	`--radius-4` `--radius-circle` `--size-20` `--space-12` `--space-16` `--space-4`
–	`--dur-fast` `--ease-standard`

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

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

Чисто тут не тому, що файл акуратний, а тому, що з ним більше ніхто не сперечається: чотири правила filter-group.css, які накладалися на цей контроль, пішли на кроці 7.75 разом зі своєю ж гумкою. Уся кнопка - шість селекторів у двох діалектах - вирішувачем не перевірена жодного разу, і це відкрите місце приладу, а не файлу.

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

Чого бракує

Фокус. outline:none без заміни на єдиному клавіатурному контролі панелі фільтрів. Найдорожча дірка файлу, і вона не про вигляд, а про доступність
.frange без власника - назва, яка тримає контроль у розмітці, не описана жодним файлом системи. Або перейменувати розмітку, або визнати назву тут
16px і 2.5px - літерали. --size-20 для поля є, для самої кнопки рунга немає
Немає стану «вимкнено» і немає стану «діапазон порожній»: коли в межах ціни немає жодного товару, повзунок виглядає так само
Обидві копії будуються на завантаженні, хоч видно максимум одну. Чи потрібна мобільна в DOM до відкриття аркуша - [?]
Рух не заміряний. На кнопці оголошено transition .12s; прилад цієї сесії анімації не читає - навіть контрольна анімація, створена в сторінці, показує paused. Тому це прочитано з файлу, а не побачено

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