Animation Smorgasbord (#15637)

Co-authored-by: Adam <2363879+adamdotdevin@users.noreply.github.com>

packages/ui/src/components/text-strikethrough.css

@@ -0,0 +1,27 @@
+/*
+ * TextStrikethrough — spring-animated strikethrough line
+ *
+ * Draws a line-through from left to right using clip-path on a
+ * transparent-text overlay that carries the text-decoration.
+ * Grid stacking (grid-area: 1/1) layers the overlay on the base text.
+ *
+ * Key trick: -webkit-text-fill-color hides the glyph paint while
+ * keeping `color` (and therefore `currentColor` / text-decoration-color)
+ * set to the real inherited text color.
+ */
+
+[data-component="text-strikethrough"] {
+  display: grid;
+}
+
+[data-slot="text-strikethrough-line"] {
+  -webkit-text-fill-color: transparent;
+  text-decoration-line: line-through;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-slot="text-strikethrough-line"] {
+    clip-path: none !important;
+  }
+}