@livenetworks/ashlar 1.3.2

package/scss/utilities/_animations.scss

@@ -0,0 +1,83 @@
+@use '../config/mixins' as *;
+
+// ─── Keyframes ────────────────────────────────────────────
+
+@keyframes ln-slide-in {
+	from { opacity: 0; transform: translateY(-10px); }
+	to   { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes ln-slide-out {
+	from { opacity: 1; transform: translateX(0); }
+	to   { opacity: 0; transform: translateX(20px); }
+}
+
+@keyframes loader-spin {
+	0% {
+		box-shadow: 0 -0.83em 0 -0.4em,
+			0 -0.83em 0 -0.42em,
+			0 -0.83em 0 -0.44em,
+			0 -0.83em 0 -0.46em,
+			0 -0.83em 0 -0.477em;
+	}
+	5%,
+	95% {
+		box-shadow: 0 -0.83em 0 -0.4em,
+			0 -0.83em 0 -0.42em,
+			0 -0.83em 0 -0.44em,
+			0 -0.83em 0 -0.46em,
+			0 -0.83em 0 -0.477em;
+	}
+	10%,
+	59% {
+		box-shadow: 0 -0.83em 0 -0.4em,
+			-0.087em -0.825em 0 -0.42em,
+			-0.173em -0.812em 0 -0.44em,
+			-0.256em -0.789em 0 -0.46em,
+			-0.297em -0.775em 0 -0.477em;
+	}
+	20% {
+		box-shadow: 0 -0.83em 0 -0.4em,
+			-0.338em -0.758em 0 -0.42em,
+			-0.555em -0.617em 0 -0.44em,
+			-0.671em -0.488em 0 -0.46em,
+			-0.749em -0.34em 0 -0.477em;
+	}
+	38% {
+		box-shadow: 0 -0.83em 0 -0.4em,
+			-0.377em -0.74em 0 -0.42em,
+			-0.645em -0.522em 0 -0.44em,
+			-0.775em -0.297em 0 -0.46em,
+			-0.82em -0.09em 0 -0.477em;
+	}
+	100% {
+		box-shadow: 0 -0.83em 0 -0.4em,
+			0 -0.83em 0 -0.42em,
+			0 -0.83em 0 -0.44em,
+			0 -0.83em 0 -0.46em,
+			0 -0.83em 0 -0.477em;
+	}
+}
+
+@keyframes loader-round {
+	0% {
+		transform: rotate(0deg);
+	}
+	100% {
+		transform: rotate(360deg);
+	}
+}
+
+// ─── Utility classes ──────────────────────────────────────
+
+.is-new {
+	@include motion-safe {
+		animation: ln-slide-in var(--transition-base) backwards;
+	}
+}
+
+.is-removing {
+	@include motion-safe {
+		animation: ln-slide-out var(--transition-base) forwards;
+	}
+}

package/scss/utilities/_utilities.scss

@@ -0,0 +1,49 @@
+@use '../config/mixins' as *;
+@use '../config/breakpoints' as *;
+
+.sr-only {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	white-space: nowrap;
+	border-width: 0;
+}
+
+.hidden { @include hidden; }
+
+.container {
+	@include w-full;
+	max-width: 80rem;
+	@include mx(auto);
+	padding-inline: var(--size-md);
+
+	@include mq-up(md) {
+		padding-inline: var(--size-lg);
+	}
+
+	@include mq-up(lg) {
+		padding-inline: var(--size-xl);
+	}
+}
+
+.container-sm {
+	@include w-full;
+	max-width: 56rem;
+	@include mx(auto);
+	padding-inline: var(--size-md);
+}
+
+// Semantic color overrides — re-bind --color-primary family to a
+// status family. See @mixin semantic-color in
+// scss/config/mixins/_colors.scss.
+.success   { @include semantic-color(success); }
+.warning   { @include semantic-color(warning); }
+.error     { @include semantic-color(error); }
+.info      { @include semantic-color(info); }
+.secondary { @include semantic-color(secondary); }
+
+.neutral { --color-primary: var(--color-neutral-400); }