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

Смуга покупки

Телефонний двійник блоку покупки: .mbuybar прибитий до низу вікна position:fixed, z-index:40, і на 390 він 390x89 з шести елементів. На 1280 заміряно 0x0, і це не дефект: від 860 файл каже display:none. Він стоїть на трьох екранах товару і більше ніде.

рівень 3design/system/components/buy-bar.css96 рядків20 селекторів33 оголошення3 екрани

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

Найменший склад у наборі: три чужі файли на дві цифри і одну кнопку.

Файл	Класів	Які саме
`button.css`	1	`.btn--l`
`price.css`	1	`.uiv-cur`
`discount.css`	1	`.ttier`

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

Анатомія

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

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

1Корінь .mbuybar - fixed по лівому, правому і нижньому краю, flex, gap 12, підкладка --bg-page, волосина зверху і --elevation-bar-top. Від 860 його немає

2Підйом над таббаром - до 859 bottom: calc(61px + env(safe-area-inset-bottom, 0px)). 61 це висота таббара, набрана тут числом: tabbar.css своєї висоти не оголошує, вона складається з відступів

3Рядок цін .mbp - grid auto auto: стара ціна .mold і чип .mcut у першому рядку, жива ціна в <b> через обидві колонки в другому. Смуга каже тільки де вони стоять і якого розміру: чий колір і яке накреслення - це price.css і discount.css з кроку 7.36

4Кнопка .mba - flex:1, решту робить btn--accent btn--l. Це єдиний власний клас файлу: чотири інші імені він ділить із price.css і discount.css

5Правило про документ - body:has(.mbuybar){ padding-bottom:132px }. Єдине правило в наборі, яке пише не у свій корінь, а в сторінку навколо себе

Демо нижче порожнє, і це і є компонент

Розмітка тут справжня, знята з design/product.html. Ви її не бачите, бо цю сторінку ви читаєте ширше за 860. Звузьте вікно менше за 860 - смуга проявиться, але не в рамці демо: fixed рахує від вікна, тож вона ляже поверх цієї сторінки внизу. І body:has(.mbuybar) додасть цьому стенду 132px знизу. Компонент, який видно тільки тоді, коли він міняє документ навколо себе.

Стани

Стан	Що робить	Чому так
до 859	видно, прибито до низу, підняте на 61px плюс безпечна зона	над таббаром, а не під ним: обидва `fixed`, і хтось мусить поступитися
від 860	`display:none`	на цій ширині ціна і дія вже стоять у блоці покупки; дві однакові дії на одному екрані - це дві дії
є знижка	у першому рядку виступають `.mold` і `.mcut`	смуга дає їм клітинки сітки, розмір чипа - `discount.css`
тренер	`.mcut` отримує `.ttier` і стає словом «гурт», ціни міняються місцями за значенням	та сама сітка тримає інший зміст: тарифна ціна жива, роздрібна закреслена
наведення і фокус	жодного оголошення	єдиний псевдоклас у файлі це `:has`, і він про `body`. Стани кнопки належать `button.css`

Межі

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

@media (min-width: 860px)
@media (max-width: 859px)
@media (max-width:859px)

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

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

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

Від якого порогу: --bp-shell-wide, парою 859/860, уже реєстровою. Що саме міняється: липка смуга покупки існує лише нижче точки; вище її роботу робить бокс покупки в колонці. Раунд організмів нічого не складав.

Токени

Прочитані з buy-bar.css: 4 семантичні ролі і 6 примітивів.

Семантичні ролі (4)	Примітиви (6)
`--bg-page` `--elevation-bar-top` `--line-hair` `--text-body`	`--fs-12` `--fs-20` `--lh-flat` `--space-12` `--space-16` `--space-8`

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

Вирішувач по всіх 7 селекторах: 2 оголошення з 33 не виграють ніколи, і це рівно ті два рядки, які у файлі написані двічі. Блок @media (max-width: 859px) зі структурної половини - підйом над таббаром і padding-bottom на body - повторений слово в слово в колірній, і перша копія програє другій за порядком. Тому в переліку меж нижче два написання однієї смуги: (max-width: 859px) і (max-width:859px).

Це та сама вада, від якої сусідні файли вже вичищені й кажуть про це у своїх шапках: buy-box.css на кроці 7.71 прибрав звідти @media, що повторював уже сказане, і назвав родину - 7.3, 7.51, 7.69. Сюди та звірка не дійшла, і смуга покупки лишилася єдиним місцем у наборі, де вона видима вирішувачем.

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

Чого бракує

61 і 132 - числа таббара, набрані руками в чужому файлі. tabbar.css висоти не оголошує; змінити відступ таббара означає мовчки зламати цей розрахунок
Дубльований @media - прибирання механічне, але воно показує, що звірка 7.71 сюди не дійшла
Немає стану «вже в кошику»: смуга виглядає однаково до натискання і після
Межа 860 не заміряна зсередини - 720 і 1280 стоять надто далеко з обох боків

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