Соглашения именования дизайн-токенов: практическое руководство. Стюарт Робсон рассказывает, как называть токены, которые масштабируются между командами и продуктами. Он разбирает три уровня токенов (примитивы, семантические и компонентные) и пять подходов к именованию, от категория-свойство-модификатор до многоуровневых структур. Ключевые принципы: единообразие важнее идеала, ясность важнее краткости, смысл важнее визуального описания. #design #component

https://www.alwaystwisted.com/articles/design-token-naming-conventions

Выражения от контейнера со style() и продвинутый attr(): новый способ связывать компоненты в CSS. Брехт Де Рюйте превращает HTML-атрибуты в типизированные значения CSS: data-gap="2" на гриде становится attr(data-gap cqi, 2cqi) вместо утилитарного класса. Родитель задаёт data-density="compact", а выражения @​container style() пересчитывают отступы, аватарки и типографику через один множитель --density-scale. Без классов-модификаторов, пропсов и JavaScript. #css #component

https://utilitybend.com/blog/container-style-queries-and-advanced-attr-rethinking-how-to-wire-up-my-components-in-css/

Делаем меню с фильтром, удобное для всех. Дженна Смит и Джеймс Нельсон объясняют, почему такое меню в Base UI — это диалог с полем поиска, а не комбобокс. Стрелки подсвечивают пункты через aria-activedescendant, а фокус остаётся в поле. Home и End работают по-разному в зависимости от того, есть ли текст, а у каждого подменю своё поле. Для поля выбрали type="text" с role="searchbox", чтобы обойтись без нативной кнопки очистки, а из меню можно уйти табом. #a11y #component

https://base-ui.com/blog/building-a-filterable-menu

Представляем библиотеку доступных компонентов. Крейг Эбботт рассказывает об открытой библиотеке TetraLogical из восьми компонентов, включая аккордеон, диалог, вкладки и текстовое поле, с кодом и документацией. Каждый компонент привязан к критериям WCAG 2.2, описанным как сценарии на Gherkin, которые проверяются в браузере через Cucumber и Playwright с клавиатуры и мышью. Около 97% сценариев автоматизированы, остальные — чек-лист для ручной проверки. #a11y #component

https://tetralogical.com/blog/2026/10/14/accessible-components-library/