@soxa-ui/theme-base 0.0.0-stage → 0.3.0-beta.1

package/src/components/tabs.css

@@ -0,0 +1,166 @@
+/* Tabs structure: the bar and active content panel are children of the root.
+ *
+ *   .so-tabs                   root
+ *     .so-tabs__bar            tab list and slots at its edges
+ *       .so-tabs__leading      leading slot
+ *       .so-tabs__list         tab list, [role=tablist]
+ *         .so-tabs-item        tab row (Button) and sibling close button
+ *       .so-tabs__trailing     trailing slot
+ *     .so-tabs-content        active tab panel
+ *
+ * Slots sit beside the list: ARIA only allows tabs inside a tablist. The list
+ * fills the space between slots and aligns tabs within it: center centers them,
+ * end places them at the trailing edge, and stretch expands tabs without
+ * changing slot widths.
+ *
+ * Core sets root modifiers for orientation (--orientation-horizontal, --orientation-vertical), alignment
+ * (--alignment-center, --alignment-end, --alignment-stretch; start has no modifier), and vertical bar position
+ * (--position-end). A horizontal bar sits above the panel; a vertical bar sits
+ * at its inline start or end. Positions are logical, so inline start is right
+ * in RTL. Horizontal bar children form a row; vertical bar children form a column.
+ *
+ * Root-dependent rules use child combinators throughout: > .so-tabs__bar,
+ * > .so-tabs__bar > .so-tabs__list, and > .so-tabs-content. Descendant selectors
+ * would leak outer orientation and alignment into nested Tabs. Adapters keep
+ * bars and panels directly under the root, slots and lists under the bar, and
+ * tabs under the list.
+ *
+ * Document-root variables control gaps between tabs and slots, between a
+ * vertical bar and its panel, and margins above and below a horizontal panel.
+ * Defaults match oren; themes set their own values on the document root.
+ *
+ * Themes provide views (line, contained, outline), variants, text colors,
+ * inactive-tab dimming, focus rings, and part appearance. View lines, indicators,
+ * and containers belong to the bar, which anchors tab measurements. */
+
+:root {
+	--so-tabs-gap: 1rem;
+	--so-tabs-panel-gap: 1rem;
+	--so-tabs-panel-margin: 0.625rem;
+	--so-tabs-slot-padding: 0.375rem;
+	--so-tabs-row-padding: 0.25rem;
+	--so-tabs-close-padding: 0.25rem;
+}
+
+.so-tabs {
+	display: flex;
+	width: 100%;
+}
+
+.so-tabs--orientation-horizontal {
+	flex-direction: column;
+}
+
+.so-tabs--orientation-horizontal > .so-tabs__bar,
+.so-tabs--orientation-horizontal > .so-tabs__bar > .so-tabs__list {
+	flex-direction: row;
+}
+
+.so-tabs--orientation-vertical {
+	flex-direction: row;
+	gap: var(--so-tabs-panel-gap);
+}
+
+.so-tabs--orientation-vertical > .so-tabs__bar,
+.so-tabs--orientation-vertical > .so-tabs__bar > .so-tabs__list {
+	flex-direction: column;
+}
+
+/* Вертикальная панель — остаток строки рядом с рядом, без полей над и под
+ * собой: от ряда её отделяет зазор корня. */
+.so-tabs--orientation-vertical > .so-tabs-content {
+	flex: 1;
+	margin-block: 0;
+}
+
+.so-tabs--orientation-vertical.so-tabs--position-end {
+	flex-direction: row-reverse;
+}
+
+/* Ряд позиционирован: `offset*` табов считаются от ближайшего
+ * позиционированного предка, и место активного таба плагин раскладки
+ * (`TTabsViewPlugin`) пишет на ряд — отметку тема рисует от его же края.
+ * Список не позиционирован: `offset*` считались бы от него, а переменные
+ * лежат на ряду. */
+.so-tabs__bar {
+	position: relative;
+	display: flex;
+	gap: var(--so-tabs-gap);
+}
+
+/* Список забирает всё место ряда между слотами: слоты остаются у краёв ряда,
+ * а табы выравниваются внутри списка. */
+.so-tabs__list {
+	display: flex;
+	flex-grow: 1;
+	gap: var(--so-tabs-gap);
+}
+
+/* Слоты — у краёв ряда, своей ширины: стоят до списка и после него, и место
+ * между ними забирает список. Содержимое — по центру поперёк ряда. */
+.so-tabs__leading,
+.so-tabs__trailing {
+	display: flex;
+	align-items: center;
+	padding-inline: var(--so-tabs-slot-padding);
+}
+
+.so-tabs-content {
+	margin-block: var(--so-tabs-panel-margin);
+}
+
+.so-tabs--alignment-center > .so-tabs__bar > .so-tabs__list {
+	justify-content: center;
+}
+
+.so-tabs--alignment-end > .so-tabs__bar > .so-tabs__list {
+	justify-content: flex-end;
+}
+
+.so-tabs--alignment-stretch > .so-tabs__bar > .so-tabs__list > * {
+	flex: 1;
+	justify-content: center;
+}
+
+/* Выключенный набор гаснет корнем целиком — табы вместе с панелями
+ * (`disabled.css`): набор читается выключенным весь, а выключить поля в
+ * панелях — дело приложения. Нажатия гаснут у всего набора, в панелях тоже.
+ * Состояние — `data-disabled` корня: ядро пишет его на любом теге, а
+ * модификатора `--disabled` у блока нет. Табы выключены вместе с набором — их
+ * `disabled` распространяется от владельца — и под погасшим корнем второй раз
+ * не гаснут. */
+.so-tabs[data-disabled='true'] {
+	opacity: var(--so-disabled-opacity);
+	pointer-events: none;
+}
+
+.so-tabs[data-disabled='true'] > * {
+	--so-disabled-opacity: 1;
+}
+
+/* Строка таба и кнопка закрытия — соседи в одну линию. Внутри строки кнопке
+ * не место: строка — `<button role="tab">`, интерактивный потомок у кнопки
+ * запрещён, а подпись крестика вошла бы в имя таба. Поэтому всё, что
+ * покрывает таб целиком, стоит на обёртке или меряется по ней, и `relative`
+ * — опора для этого. */
+.so-tabs-item {
+	position: relative;
+	display: flex;
+	align-items: center;
+}
+
+/* Строка — всё в обёртке, кроме кнопки закрытия: она стоит рядом со строкой. */
+.so-tabs-item > :not(.so-tabs-item__close) {
+	width: 100%;
+	padding-block: var(--so-tabs-row-padding);
+}
+
+/* Крестик стоит сразу за строкой, без зазора, со своим узким полем. Высота —
+ * высота строки без её поля по оси блока, а не размерная высота Button. */
+.so-tabs-item > .so-tabs-item__close {
+	flex-shrink: 0;
+	align-self: stretch;
+	height: auto;
+	margin-block: var(--so-tabs-row-padding);
+	padding-inline: var(--so-tabs-close-padding);
+}

package/src/components/tags.css

@@ -0,0 +1,371 @@
+/* ─── Tags ────────────────────────────────────────────────────
+ * Набор тегов — горизонтальный ряд, а не список: теги переносятся по
+ * строкам и держатся друг от друга на одинаковом зазоре.
+ *
+ *   .so-tags                     корень — ряд
+ *     .so-tags-item              тег — пилюля: строка (Button) и крестик рядом
+ *       .so-tags-item__close     кнопка закрытия — Button
+ *
+ * Что делать с тегами, которым не хватило ширины ряда, решает компонент, а
+ * сюда это приходит состоянием — `data-overflow`: `wrap` — перенос (база
+ * ряда), `scroll` — одна строка с прокруткой. Тег под фокусом с клавиатуры
+ * ряд `scroll` доводит до своего окна (`TTagsScrollPlugin`), а окно — паддинг
+ * ряда за вычетом отступа прокрутки (`scroll-padding-inline`).
+ *
+ * Шкала тега — переменные корня документа по размеру (`sm`…`2xl`): высота
+ * пилюли, кегль и интерлиньяж, поле строки и зазор между её частями. Своя, а
+ * не шкала Button: тег на ступень мельче кнопки того же размера — метка в
+ * ряду, а не действие. Зазор ряда, запас под кольцо фокуса и поле крестика —
+ * тоже переменные корня. Умолчания — числа темы oren; тема задаёт свои на
+ * корне документа.
+ *
+ * Облик — поверхность пилюли, виды и варианты набора и тега, цвет крестика,
+ * кольцо фокуса и подсказка у края ряда `scroll` в поле — рисует тема. */
+
+:root {
+	--so-tags-gap: 0.375rem;
+	--so-tags-field-gap: 0.25rem;
+	--so-tags-bleed: 0.25rem;
+	--so-tags-close-padding: 0.125rem;
+
+	--so-tags-item-height-sm: 1.5rem;
+	--so-tags-item-height-normal: 1.75rem;
+	--so-tags-item-height-lg: 2rem;
+	--so-tags-item-height-xl: 2.25rem;
+	--so-tags-item-height-2xl: 2.5rem;
+
+	/* Tags are a step smaller than the text next to them, and every step counts
+	 * from the font of the place: 4px smaller at `sm`, 2px at `normal`, the font
+	 * of the place at `lg`, 2px and 4px larger at `xl` and `2xl` — 12 / 14 / 16
+	 * / 18 / 20px at a 16px place, 10 / 12 / 14 / 16 / 18px at 14px. `em`
+	 * resolves where the variable is read: on the row and the close button of a
+	 * tag, against the tag, that is the place — a set or the field of a Select. */
+	--so-tags-item-font-size-sm: calc(1em - 0.25rem);
+	--so-tags-item-line-height-sm: calc(1 / 0.75);
+	--so-tags-item-font-size-normal: calc(1em - 0.125rem);
+	--so-tags-item-line-height-normal: calc(1.25 / 0.875);
+	--so-tags-item-font-size-lg: 1em;
+	--so-tags-item-line-height-lg: 1.5;
+	--so-tags-item-font-size-xl: calc(1em + 0.125rem);
+	--so-tags-item-line-height-xl: calc(1.75 / 1.125);
+	--so-tags-item-font-size-2xl: calc(1em + 0.25rem);
+	--so-tags-item-line-height-2xl: calc(1.75 / 1.25);
+
+	--so-tags-item-padding-sm: 0.375rem;
+	--so-tags-item-padding-normal: 0.375rem;
+	--so-tags-item-padding-lg: 0.5rem;
+	--so-tags-item-padding-xl: 0.625rem;
+	--so-tags-item-padding-2xl: 0.75rem;
+
+	--so-tags-item-gap-sm: 0.25rem;
+	--so-tags-item-gap-normal: 0.25rem;
+	--so-tags-item-gap-lg: 0.375rem;
+	--so-tags-item-gap-xl: 0.375rem;
+	--so-tags-item-gap-2xl: 0.5rem;
+}
+
+/* Зазор — переменной, а не числом на месте: своя раскладка в слоте `default`
+ * (лента, ряд с хвостом в панели) ставит теги не прямыми детьми набора, и то
+ * же число нужно уже ей. В поле оно своё (ниже). */
+.so-tags {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: var(--so-tags-gap);
+}
+
+/* Выключенный набор гаснет корнем целиком — ряд с тегами и содержимым слота
+ * (`disabled.css`). Состояние — `data-disabled` корня: ядро пишет его на любом
+ * теге, а модификатора `--disabled` у блока нет. Теги выключены вместе с
+ * набором — их `disabled` распространяется от владельца, нажатия они гасят
+ * сами — и под погасшим корнем второй раз не гаснут. */
+.so-tags[data-disabled='true'] {
+	opacity: var(--so-disabled-opacity);
+}
+
+.so-tags[data-disabled='true'] > * {
+	--so-disabled-opacity: 1;
+}
+
+/* Одна строка с нативной прокруткой: ряд листают колесом и пальцем.
+ *
+ * Тег не сжимается: ширина у него натуральная, а что не поместилось, уходит
+ * за край ряда и прокручивается. Сжимайся он по месту, флексбокс ужал бы ряд
+ * под ширину контейнера, и листать стало бы нечего.
+ *
+ * Запас под кольцо фокуса. Прокрутка по строке делает ряд прокручиваемой
+ * областью и по вертикали (`overflow-y` у него вычисляется в `auto`), а такая
+ * область режет всё, что вышло за её паддинг-бокс, — запаса за краем обрезки
+ * (`overflow-clip-margin`) у неё не бывает. Место кольцу даёт только паддинг.
+ * По вертикали отрицательное поле сверху возвращает тегам прежнее место;
+ * снизу поля нет: под паддингом стоит полоса прокрутки, и поле вынесло бы её
+ * на соседа под рядом. По строке поля нет вовсе: ряд, выступающий за свой
+ * контейнер, накрыл бы соседа и перехватывал бы у него указатель. Поэтому
+ * теги стоят на запас дальше от края ряда, чем в `wrap`.
+ *
+ * Тот же запас по строке — и отступом прокрутки. Паддинг даёт место кольцу
+ * только в начале и в конце прокрутки, а тег, который ряд докручивает до края
+ * посередине, встаёт к краю вплотную. Отступ прокрутки сужает на запас окно,
+ * до края которого ряд докручивают плагин ряда и сам браузер, и кольцо
+ * остаётся внутри ряда. */
+.so-tags[data-overflow='scroll'] {
+	flex-wrap: nowrap;
+	overflow-x: auto;
+	padding-block: var(--so-tags-bleed);
+	padding-inline: var(--so-tags-bleed);
+	margin-block-start: calc(-1 * var(--so-tags-bleed));
+	scroll-padding-inline: var(--so-tags-bleed);
+}
+
+.so-tags[data-overflow='scroll'] > .so-tags-item {
+	flex-shrink: 0;
+}
+
+/* Строка тега и кнопка закрытия — соседи в одну линию. Внутри строки кнопке
+ * не место: в режиме выбора строка — `role="option"`, её потомки для
+ * скринридера презентационны, и подпись крестика вошла бы в имя тега.
+ * Поэтому пилюлю рисует обёртка, и `relative` — опора для того, что встаёт
+ * поверх неё. Высота пилюли — переменной: её задают ступень (ниже) и строка
+ * слота в поле, а по ней же держит себя в пилюле зона нажатия крестика. */
+.so-tags-item {
+	position: relative;
+	display: flex;
+	align-items: center;
+	height: var(--so-tags-item-height);
+}
+
+/* Строка — во всю высоту пилюли изнутри, поэтому рамка вида тег не раздувает.
+ * Крестик — квадрат вокруг значка по центру пилюли: отступ от верха и низа —
+ * половина остатка высоты от значка без поля крестика. Тот же отступ — поле
+ * строки по оси блока: высота крестика — высота строки без него. `1em` —
+ * кегль того узла, на котором стоит отступ, а у строки и крестика он один:
+ * одна формула ставит крестик и в пилюлю своей ступени, и в строку слота
+ * поля, которая ниже пилюли. */
+.so-tags-item > :not(.so-tags-item__close) {
+	height: 100%;
+	padding-block: calc((var(--so-tags-item-height) - 1em) / 2 - var(--so-tags-close-padding));
+}
+
+/* Значок крестика — в кегль строки на любой ступени, а не по шкале иконок
+ * (`icon.css`): там с `lg` значок растёт быстрее кегля, и крестик рядом с
+ * подписью тега выходил бы жирнее её самой. Иконка из слота `close-icon` —
+ * тоже: размер ей здесь даёт крестик, а не её `size`. */
+.so-tags-item > .so-tags-item__close {
+	flex-shrink: 0;
+	align-self: stretch;
+	height: auto;
+	padding-inline: var(--so-tags-close-padding);
+	margin-block: calc((var(--so-tags-item-height) - 1em) / 2 - var(--so-tags-close-padding));
+}
+
+.so-tags-item > .so-tags-item__close .so-icon {
+	width: 1em;
+	height: 1em;
+}
+
+/* Зона нажатия крестика — невидимый квадрат по центру со стороной в минимум
+ * цели (`target.css`): сам крестик до `2xl` меньше, а в режиме выбора
+ * вплотную к нему стоит нажимаемая строка тега. Поверх строки зона лежит
+ * сама: строка и крестик позиционированы (`relative` у Button), и крестик в
+ * дереве позже.
+ *
+ * За пилюлю зона не выходит: снаружи она перехватывала бы нажатия у соседей,
+ * а ряду `scroll` добавила бы переполнение. По строке места хватает на любой
+ * ступени: от конца пилюли крестик отступает на поле строки, а к строке зона
+ * заходит на её концевое поле. По высоте зона — меньшее из минимума и высоты
+ * пилюли: крестик стоит по центру пилюли, и такая зона за неё не выходит. */
+.so-tags-item > .so-tags-item__close::before {
+	content: '';
+	position: absolute;
+	inset-inline: calc(50% - var(--so-target-size) / 2);
+	inset-block: calc(50% - min(var(--so-target-size), var(--so-tags-item-height)) / 2);
+}
+
+/* Размер тега — по его шкале. Строка и крестик — Button, и `size` тега
+ * доходит до них размерным классом Button; числа шкалы тега ложатся поверх
+ * него, на класс сильнее. Крестик встаёт на место последней части строки:
+ * перед ним — зазор строки, после — её поле. Строка, за которой он стоит,
+ * отдаёт ему своё концевое поле. */
+.so-tags-item--size-sm {
+	--so-tags-item-height: var(--so-tags-item-height-sm);
+}
+
+.so-tags-item--size-sm > .so-button {
+	font-size: var(--so-tags-item-font-size-sm);
+	line-height: var(--so-tags-item-line-height-sm);
+}
+
+.so-tags-item--size-sm > :not(.so-tags-item__close) {
+	gap: var(--so-tags-item-gap-sm);
+	padding-inline: var(--so-tags-item-padding-sm);
+}
+
+.so-tags-item--size-sm > :has(+ .so-tags-item__close) {
+	padding-inline-end: var(--so-tags-item-gap-sm);
+}
+
+.so-tags-item--size-sm > .so-tags-item__close {
+	margin-inline-end: var(--so-tags-item-padding-sm);
+}
+
+.so-tags-item--size-normal {
+	--so-tags-item-height: var(--so-tags-item-height-normal);
+}
+
+.so-tags-item--size-normal > .so-button {
+	font-size: var(--so-tags-item-font-size-normal);
+	line-height: var(--so-tags-item-line-height-normal);
+}
+
+.so-tags-item--size-normal > :not(.so-tags-item__close) {
+	gap: var(--so-tags-item-gap-normal);
+	padding-inline: var(--so-tags-item-padding-normal);
+}
+
+.so-tags-item--size-normal > :has(+ .so-tags-item__close) {
+	padding-inline-end: var(--so-tags-item-gap-normal);
+}
+
+.so-tags-item--size-normal > .so-tags-item__close {
+	margin-inline-end: var(--so-tags-item-padding-normal);
+}
+
+.so-tags-item--size-lg {
+	--so-tags-item-height: var(--so-tags-item-height-lg);
+}
+
+.so-tags-item--size-lg > .so-button {
+	font-size: var(--so-tags-item-font-size-lg);
+	line-height: var(--so-tags-item-line-height-lg);
+}
+
+.so-tags-item--size-lg > :not(.so-tags-item__close) {
+	gap: var(--so-tags-item-gap-lg);
+	padding-inline: var(--so-tags-item-padding-lg);
+}
+
+.so-tags-item--size-lg > :has(+ .so-tags-item__close) {
+	padding-inline-end: var(--so-tags-item-gap-lg);
+}
+
+.so-tags-item--size-lg > .so-tags-item__close {
+	margin-inline-end: var(--so-tags-item-padding-lg);
+}
+
+.so-tags-item--size-xl {
+	--so-tags-item-height: var(--so-tags-item-height-xl);
+}
+
+.so-tags-item--size-xl > .so-button {
+	font-size: var(--so-tags-item-font-size-xl);
+	line-height: var(--so-tags-item-line-height-xl);
+}
+
+.so-tags-item--size-xl > :not(.so-tags-item__close) {
+	gap: var(--so-tags-item-gap-xl);
+	padding-inline: var(--so-tags-item-padding-xl);
+}
+
+.so-tags-item--size-xl > :has(+ .so-tags-item__close) {
+	padding-inline-end: var(--so-tags-item-gap-xl);
+}
+
+.so-tags-item--size-xl > .so-tags-item__close {
+	margin-inline-end: var(--so-tags-item-padding-xl);
+}
+
+.so-tags-item--size-2xl {
+	--so-tags-item-height: var(--so-tags-item-height-2xl);
+}
+
+.so-tags-item--size-2xl > .so-button {
+	font-size: var(--so-tags-item-font-size-2xl);
+	line-height: var(--so-tags-item-line-height-2xl);
+}
+
+.so-tags-item--size-2xl > :not(.so-tags-item__close) {
+	gap: var(--so-tags-item-gap-2xl);
+	padding-inline: var(--so-tags-item-padding-2xl);
+}
+
+.so-tags-item--size-2xl > :has(+ .so-tags-item__close) {
+	padding-inline-end: var(--so-tags-item-gap-2xl);
+}
+
+.so-tags-item--size-2xl > .so-tags-item__close {
+	margin-inline-end: var(--so-tags-item-padding-2xl);
+}
+
+/* Выключенный тег гаснет целиком, с крестиком, и нажатий не ловит
+ * (`disabled.css`). Строка и крестик — Button со своим `data-disabled` и под
+ * погасшей пилюлей второй раз не гаснут. */
+.so-tags-item[data-disabled='true'] {
+	opacity: var(--so-disabled-opacity);
+	cursor: default;
+	pointer-events: none;
+}
+
+.so-tags-item[data-disabled='true'] > * {
+	--so-disabled-opacity: 1;
+}
+
+/* Теги внутри поля ввода: высоту задаёт строка слота поля (`input.css`) —
+ * высота размера поля без рамки и просветов, — ширину — слот, а не размерный
+ * класс. Кегль, поля и крестик — те же, что у тега вне поля: шкала тега и так
+ * мельче Button. Значение, а не процент от слота: поле Select растёт по
+ * строкам тегов, у растущего поля и слота высота авто, и процент от неё не
+ * разрешается.
+ *
+ * Ширину отдаёт слот. Ряд переносится по строкам, а один тег переносить
+ * некуда, поэтому тег шире слота сжимается сам: текст строки обрезается
+ * многоточием (у области текста Button оно уже есть), крестик не сжимается.
+ * Для этого автоматический минимум ширины — по всему тексту тега — снят у
+ * всей цепочки: у ряда, у тега и у строки. В `scroll` тег натуральной ширины:
+ * не поместившееся там прокручивается, а не сжимается (`flex-shrink` выше).
+ *
+ * Зазор в поле уже: строка поля коротка, и зазор ряда вне поля съедал бы
+ * ширину, которой не хватает вводу. */
+.so-input__leading > .so-tags,
+.so-input__trailing > .so-tags {
+	--so-tags-gap: var(--so-tags-field-gap);
+	min-width: 0;
+}
+
+.so-input__leading > .so-tags .so-tags-item,
+.so-input__trailing > .so-tags .so-tags-item {
+	--so-tags-item-height: var(--so-input-slot-row);
+	min-width: 0;
+}
+
+.so-input__leading > .so-tags .so-tags-item > :not(.so-tags-item__close),
+.so-input__trailing > .so-tags .so-tags-item > :not(.so-tags-item__close) {
+	min-width: 0;
+}
+
+/* Ряд `scroll` в поле — без полосы прокрутки. Классическая полоса (Windows,
+ * Linux) занимает место под тегами, а поле в `scroll` постоянной высоты: ряд
+ * вытягивался бы вниз мимо слота. Прокрутка остаётся: палец, трекпад, колесо
+ * с Shift.
+ *
+ * Запас под кольцо в поле — просвет слота: паддинг-бокс ряда с ним ровно до
+ * рамки поля. Полосы здесь нет, и низ ряд возвращает так же, как верх:
+ * внешняя высота ряда — строка слота, и поле не растёт. По строке запаса нет:
+ * у пилюли в поле остановки Tab нет, а крестик отступает от края пилюли
+ * дальше, чем выходит его кольцо. Отступ прокрутки по строке — ширина
+ * подсказки у края, если её рисует тема (`--so-tags-fade`, контракт): окно ряда
+ * — его чистая часть, и тег под фокусом докручивают туда, а не под подсказку.
+ * Без подсказки отступа нет, и тег встаёт вплотную к краю. */
+.so-input__leading > .so-tags[data-overflow='scroll'],
+.so-input__trailing > .so-tags[data-overflow='scroll'] {
+	--so-tags-bleed: var(--so-input-slot-gap);
+	margin-block-end: calc(-1 * var(--so-tags-bleed));
+	padding-inline: 0;
+	scroll-padding-inline: var(--so-tags-fade, 0px);
+	scrollbar-width: none;
+}
+
+/* Полоса в движках WebKit: `scrollbar-width` там появился поздно. */
+.so-input__leading > .so-tags[data-overflow='scroll']::-webkit-scrollbar,
+.so-input__trailing > .so-tags[data-overflow='scroll']::-webkit-scrollbar {
+	display: none;
+}