/* ─── Breadcrumbs ───────────────────────────────────────────────────────────── Values: site/tokens.css Primary consumers: site/preview/breadcrumbs.html + src/components/Breadcrumbs/Breadcrumbs.tsx States: data-attributes only, но НЕ все на одном узле — поправлено стендом. · current — на пункте списка .ds-breadcrumbs__item[data-current]: текущая страница вообще не ссылка, она рендерится span'ом; · size — на корне .ds-breadcrumbs[data-size]; · наведение, посещённая, фокус — на вложенном .ds-link-text, и ПРАВИЛА их лежат в site/css/link-text.css, не здесь; этот файл добавляет к ним ровно одну поправку — посещённая под наведением. Первая редакция шапки говорила «ось состояния живёт на .ds-link-text» — это описывало одну строку из трёх; вторая читалась так, будто наведение и фокус реализованы здесь. Обе неточности назвал стенд. ГРУНТ. Снято Plugin API 2026-09-06 с файла Components isVYOT7tW0RTaIofg7FAqM, страница «↳ Breadcrumbs» 1183:10614. Мастеров три: · .Parts/Crumb 1183:10615 — COMPONENT_SET, 5 вариантов оси State · Breadcrumbs / Desktop 1185:2267 — COMPONENT со слотом Crumbs · Breadcrumbs / Mobile 1185:2304 — стрелка влево + ссылка (замена цепочки) ОСЬ РАЗМЕРА — В ТАБЛИЦЕ ПЕРЕМЕННЫХ, НЕ В ВАРИАНТАХ. Коллекция «❖ Breadcrumbs» с режимами MD и SM, десять переменных. На канве вариантов размера нет вовсе — тот же случай, что у Scrollbar (память feedback_figma_variables_hold_axes_canvas_lacks). Значения по режимам (MD / SM), снято резолвом valuesByMode с разворотом алиасов: Crumb/Gap 16 / 12 → --ds-space-4 / --ds-space-3 Crumb/Padding-right 16 / 12 → --ds-space-4 / --ds-space-3 Crumb/Core/Gap 6 / 4 → --ds-lnk-md-gap / --ds-lnk-sm-gap Link text/Size 16 / 14 → --ds-lnk-md-fs / --ds-lnk-sm-fs Link text/Line Height 20 / 16 → --ds-lnk-md-lh / --ds-lnk-sm-lh Icon/Width|Height 20 / 16 → --ds-lnk-md-icon / --ds-lnk-sm-icon Icon/Stroke 2 / 1.5 → --ds-lnk-md-stroke / --ds-lnk-sm-stroke Slash/Size 16 / 14 → --ds-lnk-md-fs / --ds-lnk-sm-fs Slash/Line Height 20 / 16 → --ds-lnk-md-lh / --ds-lnk-sm-lh НОВЫХ ТОКЕНОВ НЕТ НИ ОДНОГО. Размерный ряд ссылки совпадает с лестницей LinkText один в один, и это ТОЖДЕСТВО, а не совпадение значений: в макете обе цепочки идут через один ряд «↔ Control/Label» и «↔ Control/icon», у нас обе — через --ds-btn-*. Цвета сверены отпечатком по 4 темам против всех объявленных --ds-* (758 имён, 749 разрешились в четыре цвета, 265 уникальных отпечатков): Text/Info/Ghost/Default·Hover·Active-Hover #324abd·#afc4ff·#bbcdfd·#3f5ce6 → --ds-info-soft-text Text/Info/Ghost/Active (посещённая) #111c56·#e6edff·#dce4f9·#223487 → --ds-info-text-pressed Text/Disable/Neutral (Blue) — слэш #8f969b·#8f969b·#91989d·#91989d → --ds-disabled-text Static/Text|Icon/Neutral-Blue/Tertiary #6b7175·#d0d7de·#acb3bb·#5b6063 → --ds-text-tertiary / --ds-icon-tertiary ВЫСОТА НЕ ЗАДАЁТСЯ ЗДЕСЬ ВООБЩЕ — ОНА НАСЛЕДУЕТСЯ ОТ ДОЧЕРНЕГО LinkText. Слово владельца 2026-09-06, дословно: «Высота здесь специально не задается, поскольку высота задается величиной дочернего компонента LinkText. Ее не нужно специально задавать. Она просто наследуется.» Отсюда MD 20 и SM 16 — это интерлиньяж ссылки (--ds-lnk-md-lh / --ds-lnk-sm-lh), и ровно столько же дают разделитель и иконка, поэтому строка ровна при любом составе крошки. ЧИСЛА 24 И 20 К ЭТОМУ КОМПОНЕНТУ ОТНОШЕНИЯ НЕ ИМЕЮТ. Они стоят в спеке (Breadcrumbs.md:69, раздел про десктоп) и в её же разделе «Работа с компонентом (Pixso)», но собранная цепочка не должна быть громоздкой, и 24 сюда не берётся — слово владельца там же. Спека тут не источник истины: раздел размеров написан под Pixso, а работаем мы в Figma. ЗА ОДИН ДЕНЬ Я ОШИБСЯ ОБ ЭТУ ВЫСОТУ ДВАЖДЫ, И ОБА РАЗА ОДИНАКОВО — придумывал компоненту собственную величину там, где её нет. · Сначала прочитал 24/20 как интерлиньяж слэша: в коллекции лежат Slash/Size и Slash/Line Height ровно с 16/24 и 14/20, совпадение чисел заняло место доказательства. Перепривязал узел «/» в макете — откачено в тот же день. · Потом, отказавшись от первого, поставил min-height 24/20 на пункт списка. Это была та же ошибка с другой стороны: величина, которой у компонента нет, снова оказалась написана руками. Снято. Общий признак обеих: я искал, ЧЕМ задать высоту, вместо того чтобы проверить, задаётся ли она вообще. Композит наследует размер от ребёнка — искать надо было у ребёнка. ОСЬ РАЗМЕРА КОРОЧЕ, ЧЕМ У LinkText, И ЭТО НЕ УПУЩЕНИЕ. У ссылки три ступени (sm · md · lg, LinkText.tsx: LinkTextSize), у крошек две — SM и MD. Цепочка крупнее MD не собирается; LG в Breadcrumbs не заводить. ПОБОЧНО ЗАКРЫЛОСЬ РАСХОЖДЕНИЕ НА УЗКОМ ЭКРАНЕ. Пока разделитель стоял на --ds-type-body-*, он ниже 640px сжимался (тогда — typography.css:181,187; с 2026-09-17 тот же мод в site/tokens.css), а цепочка в макете держит свой интерлиньяж во всех четырёх вьюпортных модах. Ряд ссылки вьюпортной оси не несёт вообще: --ds-lnk-{sm,md}-{fs,lh} объявлены единожды в корне (tokens.css:391-398) и уходят в --ds-btn-* → --ds-l{1,2}-size и calc(--ds-comp-unit × 4|5), ни одного объявления под @media (проверено разбором вложенности, а не грепом строки). Расхождения больше нет. У СЛЭША ТЕПЕРЬ СВОЙ АДРЕС, НО ВЕЛИЧИНА ССЫЛКИ. Решение владельца 2026-09-06: «поменяй на Slash/Size и Slash/Line Height». Сделано в два шага, и порядок здесь существенный. Сначала сами переменные переведены на те же цели, куда смотрят переменные ссылки (↔ Control/Label/L1 и L2 — размер и line-height-compact), отчего их значения стали 16/20 и 14/16 вместо прежних 16/24 и 14/20. Только потом узел «/» во всех четырёх вариантах поставлен на них. Обратный порядок вернул бы высоту 24, которую владелец в этом компоненте отменил, — а замер после привязки показал крошку 20 и мастер Breadcrumbs / Desktop 20, то есть высота не сдвинулась. Смысл разделения: у разделителя своё имя в коллекции (он не ссылка), но величина у них общая, потому что высоту строки задаёт ребёнок. Мёртвых переменных в коллекции больше нет. ЧЕМ ОТЛИЧАЕТСЯ ОТ LinkText. LinkText — одиночная ссылка. Здесь цепочка: разделитель принадлежит КРОШКЕ (в макете «/» — сосед Core внутри одного варианта, а не отдельный элемент списка), поэтому разрядка и отступ живут на пункте списка, а не между ними. У варианта State=Active узла «/» нет вовсе — отсюда правило «у последней крошки разделителя и отступа справа нет», а не хак с :last-child в разметке. ─────────────────────────────────────────────────────────────────────────── */ /* ── Root ───────────────────────────────────────────────────────────────────── */ .ds-breadcrumbs { display: block; font-family: var(--ds-font); } .ds-breadcrumbs__list { display: flex; align-items: center; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; } /* Крошка = [Core] gap [/] padding-right. Оба размера — из ❖ Breadcrumbs. Высоты здесь нет намеренно — ни min-height, ни height, ни вертикальных паддингов. Её даёт дочерний LinkText, и она наследуется вверх сама (см. шапку). */ .ds-breadcrumbs__item { display: flex; align-items: center; } .ds-breadcrumbs[data-size='md'] .ds-breadcrumbs__item { gap: var(--ds-space-4); padding-right: var(--ds-space-4); } .ds-breadcrumbs[data-size='sm'] .ds-breadcrumbs__item { gap: var(--ds-space-3); padding-right: var(--ds-space-3); } /* Последняя крошка — текущая страница: ни разделителя, ни отступа справа (Figma State=Active 1183:10615 — у варианта нет узла «/»). Селектор ОБЯЗАН нести ось размера. Первая редакция была написана как `.ds-breadcrumbs__item[data-current]` — это (0,2,0), а правила размера выше (0,3,0), и они выигрывали: замер computed-стиля показал у текущей крошки отступ справа 16 вместо нуля. Правило существовало и выглядело работающим; поймало его ИЗМЕРЕНИЕ, а не чтение кода — глазом лишний отступ в конце строки не виден, потому что за ним ничего нет. */ .ds-breadcrumbs[data-size='md'] .ds-breadcrumbs__item[data-current], .ds-breadcrumbs[data-size='sm'] .ds-breadcrumbs__item[data-current] { padding-right: 0; gap: 0; } /* ── Разделитель ────────────────────────────────────────────────────────────── */ /* Составной селектор намеренно: в бандл проводника вкомпилированы копии чужого компонентного CSS, и одноклассовое правило проигрывает им при равной специфичности — ловили на Alert (крестик оставался в потоке). */ .ds-breadcrumbs .ds-breadcrumbs__sep { color: var(--ds-disabled-text); user-select: none; /* Вес ссылки, а не body: узел «/» в .Parts/Crumb 1183:10615 биндит ✦ Typography/Label/Weight (500), тот же, что Link text (Plugin API 2026-09-24). До этой правки разделитель наследовал 400 от страницы. */ font-weight: 500; } /* Ряд ССЫЛКИ, а не ряд body: разделитель принадлежит крошке, а кликабельная крошка собрана из LinkText — метрика у них общая, ровно как привязан узел «/» в мастерах. Ряд body стоял здесь до 2026-09-06 и делал две вещи разом: тянул высоту ряда за собой (см. шапку) и сжимался на узком экране, чего цепочка в макете не делает. */ .ds-breadcrumbs[data-size='md'] .ds-breadcrumbs__sep { font-size: var(--ds-lnk-md-fs); line-height: var(--ds-lnk-md-lh); } .ds-breadcrumbs[data-size='sm'] .ds-breadcrumbs__sep { font-size: var(--ds-lnk-sm-fs); line-height: var(--ds-lnk-sm-lh); } /* ── Текущая страница ───────────────────────────────────────────────────────── */ /* Не ссылка и не кнопка: некликабельна по спеке (Breadcrumbs.md:45). Цвет — тот же ряд Static/Neutral-Blue/Tertiary, что и у иконки в этом варианте. */ .ds-breadcrumbs .ds-breadcrumbs__current { color: var(--ds-text-tertiary); font-weight: 500; text-decoration: none; } .ds-breadcrumbs[data-size='md'] .ds-breadcrumbs__current { font-size: var(--ds-lnk-md-fs); line-height: var(--ds-lnk-md-lh); } .ds-breadcrumbs[data-size='sm'] .ds-breadcrumbs__current { font-size: var(--ds-lnk-sm-fs); line-height: var(--ds-lnk-sm-lh); } /* Иконка текущего звена — тот же слот, что у ссылки (.ds-link-text-icon в link-text.css): размер, толщина линии и зазор до подписи — те же токены --ds-lnk-*. Цвет — currentColor, то есть Static/Text/Neutral-Blue/Tertiary текста звена; в макете иконке здесь привязан Static/Icon/Neutral-Blue/Tertiary — значения по четырём модам совпадают. */ .ds-breadcrumbs .ds-breadcrumbs__current { display: inline-flex; align-items: center; } .ds-breadcrumbs[data-size='md'] .ds-breadcrumbs__current { gap: var(--ds-lnk-md-gap); } .ds-breadcrumbs[data-size='sm'] .ds-breadcrumbs__current { gap: var(--ds-lnk-sm-gap); } .ds-breadcrumbs__current-icon { display: inline-flex; align-items: center; flex-shrink: 0; } .ds-breadcrumbs__current-icon svg { width: 100%; height: 100%; } .ds-breadcrumbs[data-size='md'] .ds-breadcrumbs__current-icon { width: var(--ds-lnk-md-icon); height: var(--ds-lnk-md-icon); } .ds-breadcrumbs[data-size='sm'] .ds-breadcrumbs__current-icon { width: var(--ds-lnk-sm-icon); height: var(--ds-lnk-sm-icon); } .ds-breadcrumbs[data-size='md'] .ds-breadcrumbs__current-icon svg { stroke-width: var(--ds-lnk-md-stroke); } .ds-breadcrumbs[data-size='sm'] .ds-breadcrumbs__current-icon svg { stroke-width: var(--ds-lnk-sm-stroke); } /* ── Посещённая под наведением ──────────────────────────────────────────────── */ /* Figma Active-Hover возвращает цвет покоя (#324abd в Light), тогда как LinkText держит посещённую в цвете нажатия. Это единственное расхождение двух компонентов на оси цвета — правим здесь, в области крошек, не трогая LinkText: у одиночной ссылки своя матрица, и менять её ради соседа значило бы чинить не тот файл. */ .ds-breadcrumbs .ds-link-text[data-visited]:hover, .ds-breadcrumbs .ds-link-text[data-visited][data-hovered] { color: var(--ds-info-soft-text); } /* ── Многоточие ─────────────────────────────────────────────────────────────── */ /* Скрывает ссылки, когда их больше пяти (Breadcrumbs.md:15 «Отображайте от 3 до 5 ссылок», анатомия img/6_1.png пункт 3). Это кнопка, открывающая список: в макете она нарисована тем же рядом Text/Info/Ghost, что и обычная ссылка, поэтому здесь переиспользуется .ds-link-text и своего цвета не заводится. */ .ds-breadcrumbs .ds-breadcrumbs__ellipsis { letter-spacing: 0.04em; /* три точки подряд слипаются в один глиф без разрядки */ } /* ── Адаптивность ───────────────────────────────────────────────────────────── */ /* На узком экране цепочка не показывается вовсе — вместо неё кнопка «Назад» (Breadcrumbs.md:72, картинка img/3_3.png). Порог 639 — тот же, что у вьюпортной оси типографики (мобильный мод шкалы в site/tokens.css, @media max-width: 639px); второго порога в системе нет и заводить его здесь нельзя, иначе два соседних компонента переключатся в разных точках. Обе половины пары взаимоисключающие, поэтому прячем именно ту, что лишняя. */ .ds-breadcrumbs__mobile { display: none; } @media (max-width: 639px) { .ds-breadcrumbs[data-collapse='mobile'] .ds-breadcrumbs__list { display: none; } .ds-breadcrumbs[data-collapse='mobile'] .ds-breadcrumbs__mobile { display: flex; align-items: center; } }