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

Таб-бар

Сорок два рядки і рівно один власний клас, .wf-tabbar. Усе інше, що тут видно, належить сусідам: .wf-tab ділять із mega-menu.css, а .btn--stack, .ti, .tl і .tbadge - це stack-action.css. Він є на 34 екранах, і всередині нього не більше 39 елементів.

рівень 3design/system/components/tabbar.css80 рядків7 селекторів27 оголошень134 екрани

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

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

Файл	Класів	Які саме
`stack-action.css`	3	`.btn--stack` `.tbadge` `.ti`

1 клас усередині кореня має більш ніж одного власника, тож із коду не видно, чий вони: .uiv-ic

Анатомія

Розмітка тут - не переписана від руки. Її знято з design/index.html у цій же сесії, обробники зняті, посилання підняті на рівень. Корінь тут fixed або sticky і в продукті видимий, тож open йому не додавали. Сцена потрібна тільки щоб він лишався всередині свого демо.

Показано в рамці шириною 390, і ширина названа не для краси: вона в продукті ховається від 860, тож на широкому стенді малювала б порожнечу. Медіа-умова читає в'юпорт, а не контейнер, тож жодне правило самого стенда цього не вирішує - тільки справжній в'юпорт, а він є лише в рамки.

1Смуга .wf-tabbar - display:none, і ТІЛЬКИ всередині @media (max-width: 859px) вона стає fixed по низу з z-index 50 і тінню --elevation-bar-top. Заміряно: 59 у висоту при 390 і 0x0 при 1280

2Безпечна зона - нижній падінг це calc(var(--space-4) + env(safe-area-inset-bottom, 0px)). Смуга приклеєна до краю екрана, а не до краю сторінки, тож вона мусить знати про домашню лінію iPhone

3Вкладка .wf-tab - flex: 1 1 0 і min-width: 0: п'ять рівних часток, і жодна не розсуває сусідів довгим словом. Спокійний колір --text-secondary задає теж таб-бар, бо в атома фінішу немає

4Позначка поточної [aria-current="page"]::before - смужка --size-26 на 3px зверху по центру, заокруглена знизу, у --bg-action. Єдиний псевдоселектор файлу

5Підпис поточної .tl - --text-body і --fw-black. Це сказано тут навмисно й на вищій специфічності, ніж в атома: атом тримає підпис на --text-secondary, і після зведення всі п'ять підписів вийшли однакові, а поточна вкладка лишилась з самою смужкою

Демо порожнє, поки вікно ширше за 859

Це не помилка сторінки. Увесь компонент лежить в одній медіа-умові @media (max-width: 859px), і від 860 .wf-tabbar це display:none - так заміряно й у продукті. Щоб побачити демо, звузьте вікно.

Те саме пояснює й склад: .tbadge є в складі кореня за замірами, але в цьому файлі про нього немає жодного правила - лічильник цілком малює атом, і таб-бар ніде не каже, коли той лічильник з'являється.

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

Що робить: нижче --bp-shell-wide смуга це первинна навігація, від точки вона зникає повністю. Від якої точки: 860px, і це єдине число в цьому файлі - літерал із реєстру tokens.css, бо @media не вміє читати var(). Чому саме така форма: навігаційна модель етапу 03a має п'ять пунктів верхнього рівня, а п'ять або менше це форма A - пункти переїжджають у шапку, і другий носій на широкій ширині зайвий.

Зникає display: none, а не прозорістю чи виносом за екран, тож на широкій ширині смуга йде і з очей, і з дерева доступності. Заміряно tools/tab-walk.mjs, а не прочитано в css: на 1280 носій навігації рівно один (шапка, 17 пунктів), таб-бар дає нуль фокусованих, фокус на невидимому 0, tabindex > 0 ніде. Нижче 860 носіїв два за ролями - смуга це первинна навігація, верхня шапка це утиліти, - і два пункти стоять в обох: «Кошик» за рішенням IA («a slim top bar kept for logo, search and cart») і «Обране», якого специфікація не передбачає. Друге це знахідка про IA, а не про верстку.

Стани

Стан	Що робить	Чому так
до 859	flex, fixed по низу, z-index 50, тінь угору	на телефоні це головна навігація продукту
від 860	`display:none`; заміряно 0x0 при 1280	на десктопі ту саму роботу робить хедер, і дві навігації одночасно не потрібні
спокій	знак і підпис у `--text-secondary`	колір задає таб-бар, бо в складеної дії немає класу фінішу, як у кнопок хедера
поточна вкладка	смужка 26x3 у колір дії зверху плюс підпис `--text-body` / `--fw-black`	де ти є - це речення таб-бару, тому він каже його сам
наведення	немає	файл не оголошує жодного псевдокласу: єдиний псевдоселектор тут - `::before`. Це палець, а не курсор

7.92: вкладка «Каталог» відкривала накладку й не ставала поточною

Знайшов власник на телефоні: тап по «Каталог» відкриває мобільну накладку каталогу, а помаранчева смужка лишається на «Головній». Два різні збої, і лише один із них був у цьому файлі.

Перший - у скрипті. wfCatTabEl() шукав .wf-tab[href="../../wireframes/catalog-page.html"], тобто точний літерал. У кольоровому шарі посилання вкладки переписує uivFixLinks, селектор не збігався ні з чим, openCatOverlay() вішав catov-open на нічого. Це п'ятий випадок за цей прохід, коли «хто саме отримує X» відповіли списком або літералом, і все, що потім переїхало, лишилось поза ним. Тепер селектор читає форму: вкладка, яка відкриває накладку, це вкладка, що несе її обробник, - а цього жоден переписувач посилань не зрушить.

Другий - тут. .catov-open читав лише mega-menu.css, і лише для чорнила слова. Смужку цей файл давав тільки [aria-current="page"], тож вкладка, яка щойно стала поточною, не мала жодної позначки. Тепер обидва стани названі в одному рядку, а умова написана один раз: власна вкладка сторінки поточна, лише поки накладка не відкрита. Перевірено на трьох екранах: при відкритій накладці смужка рівно одна і вона на «Каталозі», після закриття вона повертається на вкладку сторінки.

І урок про прилад. Перше зчитування сказало, що правило зламане, а зламаним воно не було: заміряне в ту саму мить, коли скрипт додає клас, воно показувало нову смужку й нове накреслення при старому чорнилі. Атом двома файлами вище оголошує transition: color .15s на цьому підписі - навмисно й із власним поясненням, - тож на t=0 getComputedStyle повертає колір, ВІД якого йде перехід. На t=400 обидва підписи правильні. У властивості з переходом немає одного значення в мить зміни, і будь-який прохід, який знімає обчислений стиль одразу після зміни стану, читає старе.

Межі

У файлі 1 медіа-умова, і кожна з них - межа, якої стандартні ширини перепису (360 / 390 / 720 / 1280) не бачать зсередини смуги. Заміряти їх треба власними ширинами, по одній з кожного боку.

@media (max-width: 859px)

Обмеження

Правила вживання, які називають саме цей компонент: U1 · U2. Автор правил один, і це architecture.html, розділ I; тут - витяг.

Один таб-бар на екран, і він не показується у флоу оформлення замовлення та на службових сторінках.

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

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

Токени

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

Семантичні ролі (6)	Примітиви (6)
`--bg-action` `--bg-page` `--elevation-bar-top` `--line-hair` `--text-body` `--text-secondary`	`--fw-black` `--radius-4` `--size-26` `--space-2` `--space-4` `--space-8`

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

По всіх 4 селекторах: жодного мертвого оголошення і жодного селектора без елемента. З двадцяти чотирьох файлів шару таких лише три - tabbar.css, filter-sheet.css і price-slider.css. Малий розмір це не пояснює: у buy-bar.css оголошень більше всього на шість, і два з них мертві.

Ціна цієї чистоти видна в таблиці складу: файл чистий тому, що майже нічого не описує. Із п'яти імен, які він згадує, власне йому належить одне. Крок 7.18 забрав звідси колонку, проміжок, знак, підпис і лічильник - у кожного з них був двійник у header.css під іншим іменем частини (.ti там .g, .tl там .lbl), і саме тому дві редакції встигли розійтися на розмірі знака, 20 проти 21, і на кольорі підпису.

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

Чого бракує

Немає стану фокуса. Вкладка це посилання, а файл не оголошує :focus-visible: з клавіатури поточна позиція в головній навігації не видна
.wf-tab має двох власників - mega-menu.css каже про колір вкладки, tabbar.css про її підпис. Один контрол, два файли
Про .tbadge тут не сказано нічого, хоча лічильник рендериться всередині смуги: коли він з'являється і що буває при трьох цифрах - незаписано
Немає станів «недоступна» і «завантаження»: кошик під час перерахунку виглядає так само, як кошик у спокої
Межа 859 незаміряна власними ширинами, а тут вона вирішує, чи компонент існує взагалі

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