Чип

Це не здогад, а перепис у браузері: 17 кольорових екранів, 1280 і 390, кожен екземпляр зміряний через getComputedStyle.

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

Вибір зроблено за контрастом, а не за смаком. Виміряно на #FF5A00:

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

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

Фільтр - у рейці й шиті фільтрів, у мега-меню, на рейці категорій телефона. Сегмент - там, де з набору увімкнено рівно один. Job 2, новачок: чип це найдешевший спосіб почати не з каталогу, а з наміру - одне слово замість форми.

7.23 звів вигляд. Те, чого він не торкався, - чи можна цим користуватися. Переписано наново в браузері, 40 кольорових екранів × два в'юпорти: 503 екземпляри, і обидві сходинки тримаються без жодного відхилення. Розійшлось інше.

Кільце малював браузер. Прохід по всіх завантажених таблицях стилів у пошуку outline або box-shadow на будь-якому з восьми імен повернув порожній список. Тобто кожен чип, до якого клавіатура доходила, показував outline: rgb(0, 95, 204) auto 1px - типовий контур Chrome, на сайті, де --ring-focus-control є з кроку 6.2 і його вже читають кнопка, поле, радіо і посилання. Чип був останнім контролом, що позичав кільце в браузера.

Сегмент отримав клавіатуру - uivSegments() у design/_nav.js: role="tablist" / role="tab" / aria-selected і мандрівний tabindex, точно як у радіо. Набір бере один крок табуляції, стрілки ходять усередині з перекотом, Home і End стрибають у краї. Три фільтри, кожен зі своїм кроком, коштували б більше, ніж дають.

role="tablist", а не radiogroup: радіо обирає значення, яке піде в замовлення, вкладка перемикає, який зріз того самого списку ви бачите. Механіка та сама, обіцянка різна - і межа між ними та сама, яку chip.css проводить між фільтром і сегментом.

Три: :hover, :focus-visible і .on. Перші два в одній редакції на всі вісім імен; третій тримається на класі, тому він у списку класів, а не станів.

Стану «недоступний» немає, і це відповідь, а не прогалина. У продукті нуль чипів із disabled, .off чи .disabled - на жодному з 40 екранів, у жодному в'юпорті. Раніший запис «скопіювати .vopt.off» відкликано: .vopt.off існує тому, що смак справді буває розпроданий, а фільтр, який дасть нуль товарів, - випадок, якого в продукті поки немає. Намалювати його тут означало б вигадати стан. З'явиться випадок - форма для копіювання вже є.

7.31 дав чипу кільце фокуса. Те, чого він не торкався, - відповідь на палець. :hover вище рухає край і слово, і це правильна відповідь курсору й ніяка відповідь пальцю: жоден із двох станів ніколи не спрацює на пристрої, під який цей продукт зроблено першим. Чип - найчисленніший контрол сайту, 503 екземпляри, і до цього кроку він був також найчисленнішим контролом, що на натиск не відповідав нічим.

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

До партії 2 цей файл мав ТРИ приватні імені для ряду чипів - .dr-chips, .cegoals, .flinks - кожне у власності одного місця. Четверте приватне ім'я було б тим самим рядком, написаним учетверте, тож ряд став публічним: .chips.

.chips--center - та сама анатомія, змінена лише вісь. Ряд відновлення під центрованим блоком помилки: злівавирівняний ряд там читається як список, що загубив заголовок.

.chip--letter - літера покажчика А-Я, з мінімальною шириною, щоб двадцять шість літер стояли колоною. .chip.off - літера, за якою немає жодного бренду: файл сам записав цей випадок ще на етапі 08 («вимкненого чипа в продукті НЕМАЄ... коли випадок з'явиться, .vopt.off - та форма, яку копіювати»), і на brands чотирнадцять із двадцяти шести літер порожні.

.chip--fill - залитий ґрунт замість обведення, коли ряд стоїть на сторінці, а не в панелі. .chips--sticky - ряд, що липне під шапкою на довгій сторінці; ховає власну смугу гортання і не дає дітям стискатись.

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

Прочитані з chip.css, не переписані руками. Чотирнадцять ролей на десять примітивів - єдиний атом системи, де ролей більше, ніж примітивів, і причина проста: чип це найповніший набір станів у системі. Сім із чотирнадцяти ролей існують лише заради взаємодії.

--bg-action-pressed - це роль, яку завів натиск, і завела саме тому, що ховер уже витратив --bg-action-soft: коли обраний чип уже стоїть на помаранчевій заливці, посвітліти йому нема куди, тож натиск іде на крок ТЕМНІШЕ. Чотири стани, чотири ґрунти, жодного нового hex.

--text-onaction-ink існує через поверхню, а не через колір. Це чорнило НА дії, і поріг йому потрібен текстовий - 4.5:1, - а не той, за яким рахують заливку. Роль, оголошена як заливка й поставлена під дрібний жирний підпис, проходить перевірку поверхні й провалює текстову, і таблиця пар «текст/фон» цього не бачить, бо текстовою її ніхто не оголошував.

Сторінка звіряє себе з файлом: 16 власних класів і 2 псевдостани оголошено в chip.css. Обраний тримається на класі .on, тому він у списку класів, а не станів. Нижче - те, чого на цій сторінці немає ні в демо, ні в розмітці.

Імена не перейменовано: .dr-chip, .mgchip і .cegoals пише wireframes/_nav.js, який виконує й заморожений сірий шар. Додати chip у список селекторів безпечно в обидва боки, перейменувати - ні. Перейменування - пункт Кроку 6, як і в Лічильника кількості та Дії стовпчиком.

Якорі: .chip .dr-chip .flink .flinks .mgchip .hero-chips .ptab .ord-tab .cegoals .afilter

Каталог і лістинг, картка товару, кабінет і замовлення, головна, мега-меню, бічна шухляда, діалог клієнта тренера. .cegoals сьогодні рендериться лише в сірому шарі - тренерських екранів у design/ ще немає, тож перевірити його можна тільки тут, на стенді.