Перемикач вигляду

Розмітка взята з listing.html, не намальована для стенда: іконки приходять із набору через icons.js, як на екрані.

Пораховано в браузері на 40 кольорових екранах при 1280 і 390: 7 груп, 14 комірок.

Перше прочитання цього розколу було хибним, і воно виправлене тут. Виглядало, ніби екрани станів зібрані копіюванням, а виправлення - перетворити шість <span> на посилання. Перелік усіх тринадцяти екранів сірого шару з перемикачем, звірений із тим, скільки карток товару кожен тримає, каже інше.

Перемикач живий рівно тоді, коли на екрані є список, який можна перебудувати. На семи порожніх екранах пара інертна, бо перемикати нічого, - і це правильна поведінка, а не недбалість.

goal.html - це справжній дефект, і єдиний. 11 товарів, перемикач із готовими aria-label="Сіткою" і aria-label="Списком", і натиснути не можна ні на що, бо goal-list.html не існує. Це відсутній екран, і вирішувати це IA, а не цьому етапу.

Обрана комірка малювала біле чорнило на 10% помаранчевого. --text-oninverse - це білий, а земля обраної комірки - --bg-action-selected, тобто тінт. Сьогодні невидимого немає нічого, бо в комірці іконка й жодного слова (зміряно: нуль текстових вузлів), а іконку рятувала друга правка. Файл казав одне, латка під ним - інше.

А ховер не мав чого фарбувати. .vtoggle a:not(.on):hover вів чорнило комірки в акцент - але в комірці іконка, а іконку фарбував напряму той самий надто широкий селектор. Зміряно на HEAD: при наведенні земля йшла в #FAF9F7, а гліф лишався сірим. Стан наведення на 13 екранах, який не змінював нічого видимого.

Матриця осей, а не перелік входжень: кожен рядок це питання, на яке відповідає розмітка, і правило, за яким обирають.

Тільки в Тулбар каталогу і тільки на десктопі. Це не Чип: чип фільтрує що в списку, перемикач вигляду міняє як той самий список показано. І не Перемикач (.sw): той вмикає одну настройку, а тут два рівноправні варіанти, обидва видно завжди.

Три: .on, :hover на неактивній половині і :focus-visible. Останній з'явився на кроці 7.32: прохід по всіх завантажених таблицях стилів у пошуку outline або box-shadow на .vtoggle повертав порожній список, тож вісім досяжних комірок показували типовий синій контур Chrome - те саме, що крок 7.31 знайшов у чипа.

Тільки та половина, що не обрана. Натиск на половину, на яку ви вже дивитесь, ні про що не просить, а стану «нічого не змінилось» не буває. --bg-action-soft, а не --bg-surface наведення: натиск усюди в наборі тепліший за наведення, і на десктопі ці два стани мають розрізнятись, коли лягають на одну клітинку в одну секунду.

Шість інертних <span> сюди не входять. Стан натиску на контролі, який нікуди не веде, - це обіцянка, яку цей файл сорока рядками вище пояснив, що не може виконати.

Сторінка звіряє себе з файлом: 1 власний клас і 2 стани оголошено в view-toggle.css. Чужий контекст (.on, .uiv-ic) не рахується: у цих селекторах компонент не є підметом.

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

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

--bg-action-selected має рівно одне вживання на весь продукт - оцю обрану половину. Це навмисно: заливка суцільним акцентом зробила б перемикач гучнішим за головну дію екрана, а принцип 2 каже, що така дія рівно одна.

Ім'я комірки живе в aria-label, бо підпису немає: у комірці лише гліф. Це вже було в розмітці чотирьох робочих каталогів і чого немає на трьох екранах станів.

Якорі: .vtoggle

13 екранів у wireframes/: goal-empty, goal-error, goal-loading, goal, listing-empty, listing-error, listing-filtered, listing-list, listing-loading, listing-sheet, listing, search-loading, search. У кольорі з них зібрано 7.