ics-ui-kit 1.0.0 → 1.0.2

package/dist/scroll-fade-fix.css

@@ -0,0 +1,120 @@
+/**
+ * Исправление scroll-fade из shadcn/tailwind.css (UIK-306).
+ *
+ * Баг (Chrome): начальный край (верх у scroll-fade/-y/-t, начало строки у
+ * scroll-fade-x/-s/-l) остаётся погашенным, если элемент прокрутили дальше
+ * --scroll-fade-reveal, а потом переполнение пропало — контент стал короче
+ * или контейнер шире. Анимация проявления к этому моменту закончилась, и
+ * fill-mode: both держит её финальное значение; когда таймлайн прокрутки
+ * становится неактивным, Chrome это значение не сбрасывает. Если анимация
+ * не закончилась (прокрутили меньше reveal), сброс проходит нормально.
+ *
+ * Поэтому у начального края две анимации, и ни одна не держит значение после
+ * конца:
+ *   1. проявление на первых --scroll-fade-reveal px — только fill backwards;
+ *   2. удержание полного фейда до calc(100% + 1px) — конец за пределами
+ *      прокрутки, анимация никогда не заканчивается и пересчитывается.
+ * Конечный край (-b/-e/-r) не трогаем: его анимация заканчивается в нуле,
+ * а ноль совпадает со значением по умолчанию.
+ *
+ * Файл подключается в tailwind.css после shadcn/tailwind.css: одноимённые
+ * @utility Tailwind склеивает, более поздние объявления перекрывают ранние.
+ * Убрать, когда исправят в shadcn.
+ */
+
+@keyframes scroll-fade-hold-t {
+	from,
+	to {
+		--scroll-fade-t: var(--_scroll-fade-size-t, var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10))));
+	}
+}
+
+@keyframes scroll-fade-hold-s {
+	from,
+	to {
+		--scroll-fade-s: var(--_scroll-fade-size-s, var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10))));
+	}
+}
+
+/* Верх и низ */
+@utility scroll-fade {
+	@supports (animation-timeline: scroll()) {
+		animation:
+			scroll-fade-reveal-t 1ms ease-in-out backwards,
+			scroll-fade-hold-t 1ms linear,
+			scroll-fade-reveal-b 1ms ease-in-out both;
+		animation-timeline: scroll(self y), scroll(self y), scroll(self y);
+		animation-range:
+			0 var(--scroll-fade-reveal, calc(var(--spacing) * 24)),
+			var(--scroll-fade-reveal, calc(var(--spacing) * 24)) calc(100% + 1px),
+			calc(100% - var(--scroll-fade-reveal, calc(var(--spacing) * 24))) 100%;
+	}
+}
+
+@utility scroll-fade-y {
+	@supports (animation-timeline: scroll()) {
+		animation:
+			scroll-fade-reveal-t 1ms ease-in-out backwards,
+			scroll-fade-hold-t 1ms linear,
+			scroll-fade-reveal-b 1ms ease-in-out both;
+		animation-timeline: scroll(self y), scroll(self y), scroll(self y);
+		animation-range:
+			0 var(--scroll-fade-reveal, calc(var(--spacing) * 24)),
+			var(--scroll-fade-reveal, calc(var(--spacing) * 24)) calc(100% + 1px),
+			calc(100% - var(--scroll-fade-reveal, calc(var(--spacing) * 24))) 100%;
+	}
+}
+
+/* Только верх */
+@utility scroll-fade-t {
+	@supports (animation-timeline: scroll()) {
+		animation:
+			scroll-fade-reveal-t 1ms ease-in-out backwards,
+			scroll-fade-hold-t 1ms linear;
+		animation-timeline: scroll(self y), scroll(self y);
+		animation-range:
+			0 var(--scroll-fade-reveal, calc(var(--spacing) * 24)),
+			var(--scroll-fade-reveal, calc(var(--spacing) * 24)) calc(100% + 1px);
+	}
+}
+
+/* Начало и конец строки */
+@utility scroll-fade-x {
+	@supports (animation-timeline: scroll()) {
+		animation:
+			scroll-fade-reveal-s 1ms ease-in-out backwards,
+			scroll-fade-hold-s 1ms linear,
+			scroll-fade-reveal-e 1ms ease-in-out both;
+		animation-timeline: scroll(self inline), scroll(self inline), scroll(self inline);
+		animation-range:
+			0 var(--scroll-fade-reveal, calc(var(--spacing) * 24)),
+			var(--scroll-fade-reveal, calc(var(--spacing) * 24)) calc(100% + 1px),
+			calc(100% - var(--scroll-fade-reveal, calc(var(--spacing) * 24))) 100%;
+	}
+}
+
+/* Только начало строки */
+@utility scroll-fade-s {
+	@supports (animation-timeline: scroll()) {
+		animation:
+			scroll-fade-reveal-s 1ms ease-in-out backwards,
+			scroll-fade-hold-s 1ms linear;
+		animation-timeline: scroll(self inline), scroll(self inline);
+		animation-range:
+			0 var(--scroll-fade-reveal, calc(var(--spacing) * 24)),
+			var(--scroll-fade-reveal, calc(var(--spacing) * 24)) calc(100% + 1px);
+	}
+}
+
+/* Только левый край (физическая ось x) */
+@utility scroll-fade-l {
+	@supports (animation-timeline: scroll()) {
+		animation:
+			scroll-fade-reveal-s 1ms ease-in-out backwards,
+			scroll-fade-hold-s 1ms linear;
+		animation-timeline: scroll(self x), scroll(self x);
+		animation-range:
+			0 var(--scroll-fade-reveal, calc(var(--spacing) * 24)),
+			var(--scroll-fade-reveal, calc(var(--spacing) * 24)) calc(100% + 1px);
+	}
+}

package/dist/ssr.test.d.ts

@@ -0,0 +1 @@
+export {};