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

package/src/components/scroller.css

@@ -0,0 +1,136 @@
+/* ─── Scroller ────────────────────────────────────────────────
+ * Лента произвольного содержимого в одну строку, которую двигают две кнопки.
+ * Прокрутка нативная (колесо, палец, трекпад), полосы не видно, шаг листания
+ * — страница, то есть видимая ширина вьюпорта.
+ *
+ *   .so-scroller              корень — ряд из трёх мест
+ *     .so-scroller__prev      кнопка «назад» (Button)
+ *     .so-scroller__viewport  вьюпорт — прокручиваемая область и строка содержимого
+ *     .so-scroller__next      кнопка «вперёд» (Button)
+ *
+ * Вьюпорт — одновременно прокручиваемый контейнер, строка содержимого и
+ * носитель роли от потребителя (например, `role="listbox"`), поэтому дорожки
+ * между ним и содержимым нет: лишний узел отрезал бы элементы от этой роли.
+ * По той же причине кнопки стоят снаружи вьюпорта.
+ *
+ * Есть ли куда листать, пишет на корень плагин ленты (`TScrollerViewportPlugin`)
+ * — `data-can-prev` и `data-can-next`. Листать нечего вовсе — кнопок нет: их
+ * место уходит содержимому. Гаснут обе разом и только вместе: кнопка на своём
+ * краю (`data-disabled` у неё пишет сам Button) остаётся на месте, исчезни она
+ * поодиночке, ряд на каждом доезде до края дёргался бы на её ширину. Замер от
+ * снятия не зацикливается: снятая кнопка вьюпорт расширяет, а в широком
+ * вьюпорте содержимое помещается тем более.
+ *
+ * Кнопки — во всю высоту ряда, а не размерной высоты Button: ленту ставят в
+ * строку поля ввода, в ряд мелких элементов, и своя высота кнопки свисала бы
+ * из неё. Ширина остаётся размерной — поле кнопки приходит с её классом
+ * `--size-*`. Зазор между кнопкой и лентой — по шкале Button
+ * (`components/button.css`), тем же числом, что зазор внутри строки кнопки
+ * этого размера.
+ *
+ * Вьюпорт — строка: содержимое стоит в линию и не сжимается, иначе флексбокс
+ * ужал бы ряд по месту и листать стало бы нечего. Поперёк строки он ничего не
+ * растягивает — лента двигает чужое содержимое, а не задаёт ему высоту.
+ * Прокрутка по строке — `auto`: колесо, палец и трекпад работают только у
+ * настоящей прокручиваемой области; поперёк — `clip`, а не `hidden`: тот завёл
+ * бы второй прокручиваемый контейнер. Полоса прокрутки не рисуется, а
+ * докрученная до края лента страницу за собой не тянет — иначе
+ * горизонтальный жест на краю уходит в навигацию «назад» браузера.
+ *
+ * Запас под кольцо фокуса содержимого — поле вьюпорта: прокручиваемая область
+ * режет всё, что вышло за её паддинг-бокс, а запаса за краем обрезки
+ * (`overflow-clip-margin`) у неё не бывает. Отрицательное поле по оси блока
+ * возвращает ленте прежний след: внешняя высота вьюпорта — высота содержимого.
+ *
+ * Шаг листания — страница, и снап доводит её до начала элемента, а не режет
+ * элемент посередине; действует он и на программную прокрутку, поэтому
+ * кнопке достаточно сдвинуть ленту на видимую ширину. `mandatory`:
+ * недоведённая страница — ровно тот обрезанный элемент, ради которого снап и
+ * взят. Точки снапа — прямые дети вьюпорта, то есть сами элементы ленты.
+ *
+ * Окно снапа — паддинг-бокс вьюпорта, вдвинутый отступом прокрутки на ширину
+ * подсказки у края, если её рисует тема (`--so-scroller-fade`, контракт), и не
+ * меньше чем на запас под кольцо фокуса. В это окно плагин ленты доводит
+ * элемент под фокусом с клавиатуры, и в нём встаёт страница: элемент в её
+ * начале виден целиком, а не под подсказкой. В покое лента стоит в начале
+ * прокрутки: начало первого элемента лежит на запасе под кольцо — не дальше
+ * края окна, — и его точка снапа — само начало прокрутки или раньше него.
+ *
+ * Запас под кольцо — переменная корня документа; умолчание — число темы oren,
+ * тема задаёт своё на корне документа.
+ *
+ * Облик — подсказка у края маской, кольцо фокуса ленты, вид кнопок и зеркало
+ * стрелок в RTL — рисует тема. */
+
+:root {
+	--so-scroller-bleed: 0.25rem;
+}
+
+/* `min-width: 0` — чтобы вьюпорт мог стать уже своего содержимого:
+ * автоматический минимум ширины, оставленный хоть одному звену цепочки,
+ * переполняет родителя вместо прокрутки. */
+.so-scroller {
+	display: flex;
+	align-items: stretch;
+	min-width: 0;
+	max-width: 100%;
+}
+
+.so-scroller[data-can-prev='false'][data-can-next='false'] > .so-scroller__prev,
+.so-scroller[data-can-prev='false'][data-can-next='false'] > .so-scroller__next {
+	display: none;
+}
+
+.so-scroller--size-sm {
+	gap: var(--so-button-gap-sm);
+}
+
+.so-scroller--size-normal {
+	gap: var(--so-button-gap-normal);
+}
+
+.so-scroller--size-lg {
+	gap: var(--so-button-gap-lg);
+}
+
+.so-scroller--size-xl {
+	gap: var(--so-button-gap-xl);
+}
+
+.so-scroller--size-2xl {
+	gap: var(--so-button-gap-2xl);
+}
+
+/* Высота — ряда: перекрывает размерную высоту Button той же специфичностью,
+ * поэтому файл подключён ниже `button.css`. */
+.so-scroller__prev,
+.so-scroller__next {
+	flex-shrink: 0;
+	align-self: stretch;
+	height: auto;
+}
+
+.so-scroller__viewport {
+	display: flex;
+	flex-grow: 1;
+	align-items: center;
+	min-width: 0;
+	overflow-x: auto;
+	overflow-y: clip;
+	padding: var(--so-scroller-bleed);
+	margin-block: calc(-1 * var(--so-scroller-bleed));
+	scroll-padding-inline: max(var(--so-scroller-bleed), var(--so-scroller-fade, 0px));
+	overscroll-behavior-inline: contain;
+	scrollbar-width: none;
+	scroll-snap-type: inline mandatory;
+}
+
+/* Полоса в движках WebKit: `scrollbar-width` там появился поздно. */
+.so-scroller__viewport::-webkit-scrollbar {
+	display: none;
+}
+
+.so-scroller__viewport > * {
+	flex-shrink: 0;
+	scroll-snap-align: start;
+}

package/src/components/select.css

@@ -0,0 +1,233 @@
+/* ─── Select ──────────────────────────────────────────────────
+ * Поле выбора из списка. Поле — обычный Input (`components/input.css`): его
+ * коробка, слоты и кнопка очистки приходят оттуда, здесь — то, что добавляет
+ * Select.
+ *
+ *   .so-select                    корень — якорь панели
+ *     .so-select__field           поле — Input
+ *       .so-select__tags          теги выбранного в слоте `leading` (Tags)
+ *       .so-select__arrow         обёртка стрелки в слоте `trailing`
+ *   .so-select__panel             панель — Frame, телепортированный в `body`
+ *     .so-select__handle          полоса жеста, пока он включён
+ *     .so-select__list            список опций — прокручивается он
+ *       .so-select-item           опция — строка (Button)
+ *         .so-select-item__indicator  отметка выбранного
+ *       .so-select-group          группа — подпись и её опции
+ *       .so-select__separator     разделитель секций групп (`group.css`)
+ *       .so-select__filler        распорка окна `Virtual`
+ *
+ * Корень — флекс во всю ширину места, а не блок: поле внутри — `inline-flex`,
+ * и у блочного родителя строчный ребёнок попадает в строку текста — высота
+ * корня считалась бы по её метрикам, а не по высоте поля. Флекс строк не
+ * заводит, и корень ровно по полю. Минимум ширины — минимум поля
+ * (`--so-input-min-width`): процент считается от контейнера, а если тот сам
+ * сжимается по содержимому, круг замыкается, и поле схлопывается в полосу.
+ * Теги в минимум не входят: правило, которое зависит от того, сколько их и
+ * какие они, неверно по построению, — ряд берёт остаток строки, а лишнее
+ * обрезается.
+ *
+ * Курсор у поля зависит от режима: в select-only (`editable: false`) поле
+ * только для чтения — редактировать нечего, и курсора редактирования нет.
+ *
+ * Теги — второй компонент в слоте `leading`. В `wrap` поле растёт по строкам
+ * тегов: высота авто, сверху и снизу — просвет слота полем, а ввод, очистка и
+ * стрелка — на первой строке; одна строка тегов даёт ровно высоту размера.
+ * Признак — тег в ряду, а не сам ряд: в `multiple` контейнер тегов в разметке
+ * всегда. Строка ввода — строка слота, а слот растёт вместе со строками. В
+ * `scroll` ряд стоит одной строкой (`components/tags.css`), и поле — высоты
+ * размера. Само поле остаётся `nowrap`: перенос нужен только тегам в слоте. У
+ * слота с тегами снят автоматический минимум ширины — ввод рядом получает то,
+ * что тегам сейчас не нужно, — а что в слот не влезло, он обрезает по строке
+ * (`clip`: прокрутки в слоте быть не должно, а по вертикали там кольцо фокуса
+ * тега). Ряд `scroll` — по своим тегам, но не шире половины поля: ввод не
+ * садится на свой минимум, когда тегам тесно, а в этой половине ряд
+ * прокручивается. Ввод берёт остаток строки после слотов, а не всю ширину
+ * поля.
+ *
+ * Стрелка — обёртка слота, а не сама иконка: подменишь иконку слотом — тема
+ * повернёт и её. Обёртка — область нажатия: в `editable` по тексту поля панель
+ * не открывается, и стрелка — единственное место, которое её открывает, —
+ * поэтому она квадрат в строку слота, как очистка рядом, со значком по
+ * центру. Зона нажатия на мелком размере — `target.css`, и обёртка — её
+ * опора. Кегль обёртки — кегль поля по размеру (шкала поля): значок разметка
+ * рисует размером Select, в `em` от кегля места.
+ *
+ * Список — то же устройство, что у узла списка ListBox
+ * (`components/list-box.css`), с теми же полем и зазором, чтобы отступы до
+ * опций совпадали. Потолок высоты — по умолчанию, пока `maxRows` не задан:
+ * задали — `TListHeightPlugin` пишет списку инлайновый `max-height` по числу
+ * строк. Распорка окна и группы — как у ListBox. Опция — строка во всю ширину
+ * списка, содержимое у начала строки, курсор обычный; выключенная гасит
+ * строкой (её `data-disabled`), а обёртка — только указатель. Перенос (`wrap`)
+ * опция читает с себя: `data-content-fit` ей ставит `TSelectExtension`.
+ *
+ * Полоса жеста и закрытая панель — `anchored.css`.
+ *
+ * Потолок списка и поле строки опции — переменные корня документа;
+ * умолчания — числа темы oren, тема задаёт свои на корне документа.
+ *
+ * Облик — поверхность, кромка, тень и скругление панели, её проявление и
+ * жест, поворот стрелки открытой панели, рамка ошибки, вид опций — рисует
+ * тема. */
+
+:root {
+	--so-select-max-height: 16rem;
+	--so-select-item-padding: 0.5rem;
+}
+
+.so-select {
+	position: relative;
+	display: flex;
+	width: 100%;
+	min-width: var(--so-input-min-width);
+}
+
+.so-select__field {
+	width: 100%;
+}
+
+.so-select__field input:read-only {
+	cursor: default;
+	-webkit-user-select: none;
+	user-select: none;
+}
+
+.so-select__field:has(.so-tags[data-overflow='wrap'] .so-tags-item) {
+	align-items: flex-start;
+	height: auto;
+	padding-block: var(--so-input-slot-gap);
+}
+
+.so-select__field:has(.so-tags[data-overflow='wrap'] .so-tags-item) input {
+	line-height: var(--so-input-slot-row);
+}
+
+.so-select__field:has(.so-tags[data-overflow='wrap'] .so-tags-item) .so-input__leading {
+	height: auto;
+}
+
+.so-select__field .so-input__leading:has(.so-tags-item) {
+	flex-wrap: wrap;
+	align-items: center;
+	min-width: 0;
+	overflow-x: clip;
+}
+
+.so-select__field .so-input__leading:has(> .so-tags[data-overflow='scroll'] > .so-tags-item) {
+	max-width: 50%;
+}
+
+.so-select__field input {
+	flex: 1;
+}
+
+.so-select__arrow {
+	position: relative;
+	display: inline-flex;
+	flex-shrink: 0;
+	align-items: center;
+	justify-content: center;
+	inline-size: var(--so-input-slot-row);
+	block-size: var(--so-input-slot-row);
+}
+
+/* Кегля у `normal` в шкале поля нет, и правила тоже: значок берёт кегль
+ * места. */
+.so-select--size-sm .so-select__arrow {
+	font-size: var(--so-input-font-size-sm);
+	line-height: var(--so-input-line-height-sm);
+}
+
+.so-select--size-lg .so-select__arrow {
+	font-size: var(--so-input-font-size-lg);
+	line-height: var(--so-input-line-height-lg);
+}
+
+.so-select--size-xl .so-select__arrow {
+	font-size: var(--so-input-font-size-xl);
+	line-height: var(--so-input-line-height-xl);
+}
+
+.so-select--size-2xl .so-select__arrow {
+	font-size: var(--so-input-font-size-2xl);
+	line-height: var(--so-input-line-height-2xl);
+}
+
+.so-select__panel {
+	overflow: hidden;
+}
+
+.so-select__list {
+	display: flex;
+	flex-direction: column;
+	gap: var(--so-list-box-gap);
+	max-height: var(--so-select-max-height);
+	padding: var(--so-list-box-padding);
+	overflow-y: auto;
+}
+
+.so-select__filler {
+	flex-shrink: 0;
+	margin-block-end: calc(-1 * var(--so-list-box-gap));
+	block-size: var(--so-filler-height, 0);
+}
+
+.so-select-group {
+	display: flex;
+	flex-shrink: 0;
+	flex-direction: column;
+	gap: var(--so-list-box-gap);
+}
+
+.so-select-group__label {
+	padding-block: var(--so-list-box-group-label-padding);
+}
+
+/* Секции без разделителя — то же устройство, что у ListBox: секция
+ * отступает на зазор списка и место линии и встаёт там же, где стояла бы за
+ * разделителем (`group.css`). */
+:is(.so-select-group, .so-select-item) + .so-select-group,
+.so-select-group + .so-select-item {
+	margin-block-start: calc(var(--so-list-box-gap) + var(--so-group-separator-width, 0px));
+}
+
+.so-select-item > * {
+	justify-content: flex-start;
+	width: 100%;
+	padding-block: var(--so-select-item-padding);
+}
+
+.so-select-item > .so-button {
+	cursor: default;
+}
+
+.so-select-item > .so-button > .so-button__text {
+	min-width: 0;
+	text-align: start;
+}
+
+:where(.so-select-item > .so-button > .so-button__text > *) {
+	margin-inline: 0 auto;
+}
+
+.so-select-item__indicator {
+	display: inline-flex;
+	flex-shrink: 0;
+	align-items: center;
+	justify-content: center;
+	width: 1em;
+	height: 1em;
+}
+
+.so-select-item[data-content-fit='wrap'] > .so-button {
+	min-height: fit-content;
+}
+
+.so-select-item[data-content-fit='wrap'] > .so-button > .so-button__text {
+	white-space: normal;
+	overflow: visible;
+}
+
+.so-select-item[data-disabled='true'] {
+	pointer-events: none;
+}

package/src/components/skeleton.css

@@ -0,0 +1,33 @@
+/* ─── Skeleton ────────────────────────────────────────────────
+ * Заглушка — место будущего содержимого, пока оно грузится.
+ *
+ *   .so-skeleton                  корень — блок
+ *     .so-skeleton__placeholder   заглушка — поверх содержимого, во весь корень
+ *     …                           содержимое слота
+ *
+ * Пока заглушка показана, она лежит поверх содержимого во весь корень, а само
+ * содержимое скрыто прозрачностью: место за ним остаётся, и когда заглушку
+ * снимут, ничего не сдвинется.
+ *
+ * Размера по шкале у заглушки нет: `size` у Skeleton нет вовсе, а ширину и
+ * высоту из свойств `width` и `height` пишет на корень инлайном библиотека
+ * (по умолчанию `auto` — по месту и по содержимому).
+ *
+ * Облик — цвет заглушки, её формы (`--shape-*`) и анимации (`--animation-*`),
+ * вид в режиме принудительных цветов — рисует тема: формы и анимации —
+ * значения её наборов. */
+
+.so-skeleton {
+	position: relative;
+	display: block;
+}
+
+.so-skeleton:has(.so-skeleton__placeholder) > :not(.so-skeleton__placeholder) {
+	opacity: 0;
+}
+
+.so-skeleton__placeholder {
+	position: absolute;
+	inset: 0;
+	z-index: 10;
+}