Мініатюра товару

Обидві коробки вище - розмітка продукту, узята з account.html як є. Ліворуч смужка мініатюр останнього замовлення (.aord-thumbs .t, три штуки), праворуч плитка нотатки про поповнення (.rk-ph). Розкладка навколо них - order-row.css і restock-note.css; цей файл не знає ні про смужку, ні про рядок.

Кожен інший файл системи оголошує класи, яких не оголошує ніхто, - якорі, і саме за ними tools/inventory.mjs рахує, на скількох екранах компонент стоїть. У цього якорів нуль, тож у реєстрі його колонка «Screens» стоїть прочерком, і це не пропуск заміру.

Причина в тому, як компонент народився. architecture.md A6 зміряв дев'ять коробок у семи файлах на восьми розмірах і закрив їхню форму, лишивши розмір відкритим. Власник узяв зміряну половину: пара, яку A6 назвав доказово однією річчю, - .aord-thumbs .t в order-row.css і .rk-ph в restock-note.css, обидві 46, - виявилась не просто однакового розміру, а тими самими дев'ятьма оголошеннями, байт у байт, написаними двома різними днями.

Файл, а не рядок в одному з двох: жоден із власників не старший за іншого, і покласти форму в будь-який означало б, що правило одного файла тягнеться в компонент, якого він не має. Це рівно той дефект, який filter-group.css записує як «перефарбовує клас атома на ім'я». Але з цього ж і випливає, що нового імені компонент не отримав - обидва класи лишились у своїх розмітках, тож ім'я в системи є, а в розмітки немає.

Драбина A6 повністю, і сюди зведено рівно один її щабель. Решта - не пропуск, а рішення: розмір це значення, а значення рухається озвученим рішенням.

.oh-thumbs i названий окремим рядком навмисно: це та сама форма на іншому розмірі, і колірну лінію він уже ділить із .aord-thumbs .t усередині order-row.css. Того дня, коли власник згорне драбину, він приєднається сюди одним іменем у списку селекторів, і більше не зміниться нічого.

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

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

Станів не має, не інтерактивний. Це рамка навколо зображення: ні наведення, ні натиску, ні фокусу. Клікабельним буває рядок, у якому вона стоїть, і стан належить йому.

Сторінка звіряє себе з файлом: 3 власні класи і 0 станів оголошено в product-thumb.css. Нижче - ті, яких на цій сторінці немає ні в демо, ні в розмітці.

Прочитані з product-thumb.css, не переписані руками. Колір іде лише через роль, геометрія - напряму з примітива.

Дві заливки на одному класі й це навмисно: структурна половина ставить --bg-sunken, щоб порожній слот був западиною в сірому шарі, а колірна перекриває її на --bg-page з фотографією зверху. Скасувати перше не можна - без нього коробка без знімка зникає.

Слово «фото» лишається в html і не видно на екрані: у сірому шарі зображення немає, і там воно єдине, що каже, чим ця коробка буде. У кольорі його ховає color: transparent - не приховування вмісту, а та сама пара «запасний варіант і справжній», що й у .emptybox .ei.

Якорі: немає - див. розділ «Компонент без власного імені».

1 кольоровий екран: account.html, три мініатюри в смужці останнього замовлення і дві плитки в нотатці про поповнення. У wireframes/ - той самий account.html.