Дія стовпчиком

Перші три - як у шапці (.g / .lbl / .hb), четвертий і п'ятий - як у таб-барі (.ti / .tl / .tbadge). Одне правило, два словники, і зовні їх не відрізнити - у цьому й був сенс кроку.

П'ятий - активна вкладка, і це єдине, чим таб-бар відрізняється на екрані: акцентна смуга зверху й підпис чорнильний / 800. Смугу малює .wf-tab[aria-current="page"]::before, чорнило - .wf-tab[aria-current] .tl, обидва в tabbar.css, а не тут. Атом дає position:relative, від якого смуга рахує свій верх - решта організмова. У шапці такого стану немає: дія шапки нікуди не «поточна».

Це розмітка продукту з wireframes/_nav.js. Клас btn--stack доданий до старих імен, а не замість них: .g, .lbl, .ti, .tl живуть і в wireframes/, замороженому з етапу 05. Додати клас безпечно в обидва боки, перейменувати - ні, тож атом сьогодні відгукується на обидва словники. Перейменування - пункт Кроку 6.

Виміряно на живих екранах після зведення. Однакове - те, що атом оголошує. Різне - те, що належить організму, який контрол ставить.

Коли контрол має бути вузьким і впізнаваним з відстані: ряд дій у шапці на десктопі й таб-бар на телефоні. Мітка тримає впізнавання, підпис знімає загадку - принцип 5, «звичайні слова в підписах». Якщо місця вистачає на рядок, беріть звичайну Кнопку: стовпчик коштує висоти.

Атом має один стан, і рівно той, що належить йому: :hover знімає з підпису пришпильку. Усе інше дає той, хто контрол поставив - у шапці ґрунт і чорнило приходять з фінішу btn--ghost, у таб-барі активність каже [aria-current]. Стан «де ти є» знає організм, а не контрол.

Де не відбувається нічого - теж правильно. У таб-бара фінішу немає й ховерного чорнила він не оголошує, тож inherit повертає колір спокою і вкладка не рухається. Це смуга телефона: ховер там - це стан, який жоден телефон не намалює. Активна вкладка під курсором тримає свій чорнильний підпис, бо .wf-tab[aria-current] .tl в'яже це правило за специфічністю і вантажиться пізніше.

Розділ вище закінчується тим, що таббар не оголошує наведення, і що наведення там - стан, який жоден телефон не намалює. Обидва твердження правильні, і разом вони лишили власну навігацію телефона зовсім без відповіді. Зміряно на listing.html: .wf-tab у спокої, під :hover і під :active тричі повернув однаковий computed style. П'ять вкладок на 34 екранах - контрол, якого торкаються частіше за будь-який інший у цьому продукті, - не підтверджував, що до нього торкнулись.

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

Радіус оголошено, а не підсунуто. Вкладка - п'ята частина екрана без власного кута, тож земля натиску лягла б прямокутником упритул до сусідів. --radius-8 - кут контрола цього набору. A/B на 108 994 елементах показав рівно 340 розбіжностей у спокої, і всі 340 - це він: 5 вкладок x 34 екрани x 2 в'юпорти.

Кільце зовнішнє, а не всередині: бар не ставить overflow, а вкладка досить широка, щоб внутрішнє кільце читалось як рамка навколо підпису.

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

Прочитані з stack-action.css, не переписані руками. Шість ролей на десять примітивів, і в цьому наборі два кільця фокусу - єдиний компонент системи, який читає обидва.

Два кільця, бо той самий контрол стоїть на двох різних ґрунтах. На сторінці працює --ring-focus-control. На темній смузі шапки кільце тієї самої ролі зникло б у власному тлі, тож там працює --ring-onink - біле гало, викарбуване саме для цього випадку. Це і є той поділ за ПОВЕРХНЕЮ, який етап оголосив третьою віссю: роль каже не лише «яким кольором», а й «на чому».

Пари ґрунту рівно дві - --bg-action і --bg-action-soft, - і другий це ховер. Жодного власного токена стану компонент не заводить: усе, що йому було потрібно, семантичний рівень уже мав.

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

Два словники частин - це борг, а не задум. Одне правило їх обслуговує, як .ci-qty, .co-qty у Лічильнику кількості; звести імена можна буде тоді ж, коли розморозиться сірий шар.

Якорі: .btn--stack

Шапка - «Увійти» / «Кабінет ▾» і «Обране», на кожному екрані від 1024. Таб-бар - п\'ять вкладок, на кожному екрані до 859. Обидва будує wireframes/_nav.js, тож у розмітці сторінок їх немає - рахувати треба в браузері.