rei-kit 2.1.0 → 2.3.0

package/dist/motion.js

@@ -0,0 +1,434 @@
+import { n as formatNumber } from "./format-BEvBK1SJ.js";
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BOaGB7Aw.js";
+import { Fragment, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, useTemplateRef, watch, withCtx } from "vue";
+//#region src/motion/environment.ts
+/**
+* What every moving part asks before it moves.
+*
+* Kept in one place so the answers cannot drift apart: a counter that honoured
+* reduced motion beside a marquee that did not would be worse than neither.
+* Each is safe to call on a server, where the answer is "do not move" — the
+* server renders the final state, and that is what a reader without
+* JavaScript should see.
+*/
+/** Whether the reader has asked the operating system for less motion. */
+function prefersReducedMotion() {
+	if (typeof window === "undefined" || typeof window.matchMedia !== "function") return true;
+	return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+/** One frame from now, or the nearest thing to it where frames do not exist. */
+function nextFrame(callback) {
+	if (typeof requestAnimationFrame === "function") {
+		const id = requestAnimationFrame(callback);
+		return () => cancelAnimationFrame(id);
+	}
+	const id = setTimeout(callback, 16);
+	return () => clearTimeout(id);
+}
+/**
+* Calls `callback` with whether `element` is on screen, each time that
+* changes. Returns the function that stops watching.
+*
+* Without `IntersectionObserver` the element counts as visible straight away:
+* an animation that never starts is a missing number, not a missing flourish.
+*/
+function watchVisibility(element, callback, threshold = .25) {
+	if (typeof IntersectionObserver === "undefined") {
+		callback(true);
+		return () => {};
+	}
+	const observer = new IntersectionObserver((entries) => {
+		for (const entry of entries) callback(entry.isIntersecting);
+	}, { threshold });
+	observer.observe(element);
+	return () => observer.disconnect();
+}
+//#endregion
+//#region src/motion/NumberTicker.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$3 = { class: "rk-ticker" };
+var _hoisted_2$3 = { class: "sr-only" };
+var _hoisted_3$2 = {
+	class: "rk-ticker-track",
+	"aria-hidden": "true"
+};
+var _hoisted_4 = {
+	key: 1,
+	class: "rk-ticker-char"
+};
+//#endregion
+//#region src/motion/NumberTicker.vue
+var NumberTicker_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "NumberTicker",
+	props: {
+		value: {},
+		from: { default: () => void 0 },
+		format: { default: () => void 0 },
+		locale: { default: () => void 0 }
+	},
+	setup(__props) {
+		const shown = ref(__props.from ?? __props.value);
+		const text = (n) => __props.locale === void 0 ? formatNumber(n, __props.format) : formatNumber(n, __props.format, __props.locale);
+		/** What a screen reader hears: the destination, never a digit mid-roll. */
+		const label = computed(() => text(__props.value));
+		const columns = computed(() => {
+			const chars = Array.from(text(shown.value));
+			return chars.map((char, index) => ({
+				key: chars.length - index,
+				char,
+				digit: /[0-9]/.test(char) ? Number(char) : null
+			}));
+		});
+		let cancel = null;
+		onMounted(() => {
+			if (__props.from === void 0) return;
+			cancel = nextFrame(() => {
+				cancel = nextFrame(() => shown.value = __props.value);
+			});
+		});
+		watch(() => __props.value, (next) => {
+			cancel?.();
+			shown.value = next;
+		});
+		onBeforeUnmount(() => cancel?.());
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("span", _hoisted_1$3, [createElementVNode("span", _hoisted_2$3, toDisplayString(label.value), 1), createElementVNode("span", _hoisted_3$2, [(openBlock(true), createElementBlock(Fragment, null, renderList(columns.value, (column) => {
+				return openBlock(), createElementBlock(Fragment, { key: column.key }, [column.digit !== null ? (openBlock(), createElementBlock("span", {
+					key: 0,
+					class: "rk-ticker-digit",
+					style: normalizeStyle({ "--rk-ticker-order": column.key })
+				}, [createElementVNode("span", {
+					class: "rk-ticker-strip",
+					style: normalizeStyle({ transform: `translateY(${column.digit * -10}%)` })
+				}, [(openBlock(), createElementBlock(Fragment, null, renderList(10, (n) => {
+					return createElementVNode("span", { key: n }, toDisplayString(n - 1), 1);
+				}), 64))], 4)], 4)) : (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(column.char), 1))], 64);
+			}), 128))])]);
+		};
+	}
+}), [["__scopeId", "data-v-e2db153c"]]);
+//#endregion
+//#region src/motion/CountUp.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$2 = { class: "sr-only" };
+var _hoisted_2$2 = { "aria-hidden": "true" };
+//#endregion
+//#region src/motion/CountUp.vue
+var CountUp_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "CountUp",
+	props: {
+		value: {},
+		from: { default: 0 },
+		duration: { default: 1600 },
+		format: { default: () => void 0 },
+		locale: { default: () => void 0 }
+	},
+	setup(__props) {
+		const root = useTemplateRef("root");
+		const shown = ref(__props.value);
+		const text = (n) => __props.locale === void 0 ? formatNumber(n, __props.format) : formatNumber(n, __props.format, __props.locale);
+		const display = computed(() => text(shown.value));
+		const label = computed(() => text(__props.value));
+		let cancelFrame = null;
+		let stopWatching = null;
+		let started = false;
+		const easeOut = (t) => 1 - (1 - t) ** 3;
+		function countTo(target) {
+			cancelFrame?.();
+			const start = shown.value;
+			const began = performance.now();
+			const step = () => {
+				const progress = Math.min(1, (performance.now() - began) / __props.duration);
+				shown.value = start + (target - start) * easeOut(progress);
+				cancelFrame = progress < 1 ? nextFrame(step) : null;
+			};
+			cancelFrame = nextFrame(step);
+		}
+		onMounted(() => {
+			if (prefersReducedMotion() || __props.duration <= 0 || !root.value) {
+				started = true;
+				return;
+			}
+			shown.value = __props.from;
+			stopWatching = watchVisibility(root.value, (visible) => {
+				if (!visible || started) return;
+				started = true;
+				stopWatching?.();
+				countTo(__props.value);
+			});
+		});
+		watch(() => __props.value, (next) => {
+			if (!started) return;
+			if (prefersReducedMotion() || __props.duration <= 0) shown.value = next;
+			else countTo(next);
+		});
+		onBeforeUnmount(() => {
+			cancelFrame?.();
+			stopWatching?.();
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("span", {
+				ref_key: "root",
+				ref: root,
+				class: "rk-count"
+			}, [createElementVNode("span", _hoisted_1$2, toDisplayString(label.value), 1), createElementVNode("span", _hoisted_2$2, toDisplayString(display.value), 1)], 512);
+		};
+	}
+}), [["__scopeId", "data-v-3cefce6f"]]);
+//#endregion
+//#region src/motion/TextRotate.vue
+var TextRotate_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "TextRotate",
+	props: {
+		words: {},
+		interval: { default: 2400 },
+		paused: {
+			type: Boolean,
+			default: false
+		}
+	},
+	setup(__props) {
+		const index = ref(0);
+		const held = ref(false);
+		const current = computed(() => __props.words[index.value % Math.max(__props.words.length, 1)] ?? "");
+		let timer = null;
+		function stop() {
+			if (timer !== null) clearInterval(timer);
+			timer = null;
+		}
+		function start() {
+			stop();
+			if (__props.paused || held.value || __props.words.length < 2 || prefersReducedMotion()) return;
+			timer = setInterval(() => {
+				index.value = (index.value + 1) % __props.words.length;
+			}, __props.interval);
+		}
+		onMounted(start);
+		onBeforeUnmount(stop);
+		watch([
+			() => __props.paused,
+			held,
+			() => __props.words.length,
+			() => __props.interval
+		], start);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("span", {
+				class: "rk-rotate",
+				onMouseenter: _cache[0] || (_cache[0] = ($event) => held.value = true),
+				onMouseleave: _cache[1] || (_cache[1] = ($event) => held.value = false),
+				onFocusin: _cache[2] || (_cache[2] = ($event) => held.value = true),
+				onFocusout: _cache[3] || (_cache[3] = ($event) => held.value = false)
+			}, [createVNode(Transition, {
+				name: "rk-rotate",
+				mode: "out-in"
+			}, {
+				default: withCtx(() => [(openBlock(), createElementBlock("span", {
+					key: current.value,
+					class: "rk-rotate-word"
+				}, toDisplayString(current.value), 1))]),
+				_: 1
+			})], 32);
+		};
+	}
+}), [["__scopeId", "data-v-2ca5182f"]]);
+//#endregion
+//#region src/motion/TypeWriter.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$1 = { class: "sr-only" };
+var _hoisted_2$1 = { "aria-hidden": "true" };
+var _hoisted_3$1 = {
+	key: 0,
+	class: "rk-type-cursor",
+	"aria-hidden": "true"
+};
+//#endregion
+//#region src/motion/TypeWriter.vue
+var TypeWriter_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "TypeWriter",
+	props: {
+		text: {},
+		speed: { default: 45 },
+		deleteSpeed: { default: 25 },
+		hold: { default: 1800 },
+		loop: {
+			type: Boolean,
+			default: true
+		},
+		cursor: {
+			type: Boolean,
+			default: true
+		},
+		paused: {
+			type: Boolean,
+			default: false
+		}
+	},
+	setup(__props) {
+		const lines = computed(() => typeof __props.text === "string" ? [__props.text] : [...__props.text]);
+		const line = ref(0);
+		const current = computed(() => lines.value[line.value % Math.max(lines.value.length, 1)] ?? "");
+		const typed = ref(current.value.length);
+		const deleting = ref(false);
+		const held = ref(false);
+		const visible = computed(() => current.value.slice(0, typed.value));
+		let timer = null;
+		function stop() {
+			if (timer !== null) clearTimeout(timer);
+			timer = null;
+		}
+		function tick() {
+			const full = current.value.length;
+			if (!deleting.value && typed.value < full) {
+				typed.value += 1;
+				return schedule(__props.speed);
+			}
+			if (!deleting.value) {
+				const last = line.value === lines.value.length - 1;
+				if (lines.value.length < 2 || last && !__props.loop) return;
+				deleting.value = true;
+				return schedule(__props.hold);
+			}
+			if (typed.value > 0) {
+				typed.value -= 1;
+				return schedule(__props.deleteSpeed);
+			}
+			deleting.value = false;
+			line.value = (line.value + 1) % lines.value.length;
+			schedule(__props.speed);
+		}
+		function schedule(delay) {
+			stop();
+			if (__props.paused || held.value) return;
+			timer = setTimeout(tick, delay);
+		}
+		onMounted(() => {
+			if (prefersReducedMotion()) return;
+			typed.value = 0;
+			schedule(__props.speed);
+		});
+		watch([() => __props.paused, held], () => {
+			if (prefersReducedMotion()) return;
+			schedule(__props.speed);
+		});
+		watch(lines, () => {
+			stop();
+			line.value = 0;
+			deleting.value = false;
+			typed.value = prefersReducedMotion() ? current.value.length : 0;
+			if (!prefersReducedMotion()) schedule(__props.speed);
+		});
+		onBeforeUnmount(stop);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("span", {
+				class: "rk-type",
+				onMouseenter: _cache[0] || (_cache[0] = ($event) => held.value = true),
+				onMouseleave: _cache[1] || (_cache[1] = ($event) => held.value = false),
+				onFocusin: _cache[2] || (_cache[2] = ($event) => held.value = true),
+				onFocusout: _cache[3] || (_cache[3] = ($event) => held.value = false)
+			}, [
+				createElementVNode("span", _hoisted_1$1, toDisplayString(current.value), 1),
+				createElementVNode("span", _hoisted_2$1, toDisplayString(visible.value), 1),
+				__props.cursor ? (openBlock(), createElementBlock("span", _hoisted_3$1)) : createCommentVNode("", true)
+			], 32);
+		};
+	}
+}), [["__scopeId", "data-v-05f176ab"]]);
+//#endregion
+//#region src/motion/BaseReveal.vue
+var BaseReveal_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "BaseReveal",
+	props: {
+		effect: { default: "rise" },
+		delay: { default: 0 },
+		once: {
+			type: Boolean,
+			default: true
+		},
+		as: { default: "div" }
+	},
+	setup(__props) {
+		const root = useTemplateRef("root");
+		const hidden = ref(false);
+		let stop = null;
+		onMounted(() => {
+			if (prefersReducedMotion() || !root.value) return;
+			stop = watchVisibility(root.value, (visible) => {
+				hidden.value = !visible;
+				if (visible && __props.once) {
+					stop?.();
+					stop = null;
+				}
+			});
+		});
+		onBeforeUnmount(() => stop?.());
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(resolveDynamicComponent(__props.as), {
+				ref_key: "root",
+				ref: root,
+				class: normalizeClass(["rk-reveal", [`rk-reveal-${__props.effect}`, { "is-hidden": hidden.value }]]),
+				style: normalizeStyle({ "--rk-reveal-delay": `${__props.delay}ms` })
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", {}, void 0, true)]),
+				_: 3
+			}, 8, ["class", "style"]);
+		};
+	}
+}), [["__scopeId", "data-v-c8b25508"]]);
+//#endregion
+//#region src/motion/BaseMarquee.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "rk-marquee-track" };
+var _hoisted_2 = { class: "rk-marquee-group" };
+var _hoisted_3 = {
+	class: "rk-marquee-group",
+	"aria-hidden": "true",
+	inert: ""
+};
+//#endregion
+//#region src/motion/BaseMarquee.vue
+var BaseMarquee_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "BaseMarquee",
+	props: {
+		duration: { default: 30 },
+		reverse: {
+			type: Boolean,
+			default: false
+		},
+		paused: {
+			type: Boolean,
+			default: false
+		},
+		fade: {
+			type: Boolean,
+			default: true
+		},
+		gap: { default: "2rem" }
+	},
+	setup(__props) {
+		/**
+		* A row that scrolls sideways without end: logos, testimonials, a ticker.
+		*
+		* The content is rendered twice and the track moves by exactly one copy, so
+		* the loop has no seam and no measuring. The second copy is `inert` and
+		* hidden from assistive tech — a keyboard or screen-reader user meets each
+		* item once.
+		*
+		* It stops while hovered or focused, and on `paused`. For a reader who asked
+		* for less motion it does not move at all: it becomes a row that scrolls by
+		* hand, so nothing in it is out of reach.
+		*/
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(["rk-marquee", {
+					"is-reverse": __props.reverse,
+					"is-paused": __props.paused,
+					"is-faded": __props.fade
+				}]),
+				style: normalizeStyle({
+					"--rk-marquee-duration": `${__props.duration}s`,
+					"--rk-marquee-gap": __props.gap
+				})
+			}, [createElementVNode("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, "default", {}, void 0, true)]), createElementVNode("div", _hoisted_3, [renderSlot(_ctx.$slots, "default", {}, void 0, true)])])], 6);
+		};
+	}
+}), [["__scopeId", "data-v-9a25b43d"]]);
+//#endregion
+export { BaseMarquee_default as BaseMarquee, BaseReveal_default as BaseReveal, CountUp_default as CountUp, NumberTicker_default as NumberTicker, TextRotate_default as TextRotate, TypeWriter_default as TypeWriter };
+
+//# sourceMappingURL=motion.js.map

package/dist/motion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"motion.js","names":[],"sources":["../src/motion/environment.ts","../src/motion/NumberTicker.vue","../src/motion/NumberTicker.vue","../src/motion/CountUp.vue","../src/motion/CountUp.vue","../src/motion/TextRotate.vue","../src/motion/TextRotate.vue","../src/motion/TypeWriter.vue","../src/motion/TypeWriter.vue","../src/motion/BaseReveal.vue","../src/motion/BaseReveal.vue","../src/motion/BaseMarquee.vue","../src/motion/BaseMarquee.vue"],"sourcesContent":["/**\n * What every moving part asks before it moves.\n *\n * Kept in one place so the answers cannot drift apart: a counter that honoured\n * reduced motion beside a marquee that did not would be worse than neither.\n * Each is safe to call on a server, where the answer is \"do not move\" — the\n * server renders the final state, and that is what a reader without\n * JavaScript should see.\n */\n\n/** Whether the reader has asked the operating system for less motion. */\nexport function prefersReducedMotion(): boolean {\n  if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return true\n\n  return window.matchMedia('(prefers-reduced-motion: reduce)').matches\n}\n\n/** One frame from now, or the nearest thing to it where frames do not exist. */\nexport function nextFrame(callback: () => void): () => void {\n  if (typeof requestAnimationFrame === 'function') {\n    const id = requestAnimationFrame(callback)\n\n    return () => cancelAnimationFrame(id)\n  }\n\n  const id = setTimeout(callback, 16)\n\n  return () => clearTimeout(id)\n}\n\n/**\n * Calls `callback` with whether `element` is on screen, each time that\n * changes. Returns the function that stops watching.\n *\n * Without `IntersectionObserver` the element counts as visible straight away:\n * an animation that never starts is a missing number, not a missing flourish.\n */\nexport function watchVisibility(\n  element: Element,\n  callback: (visible: boolean) => void,\n  threshold = 0.25,\n): () => void {\n  if (typeof IntersectionObserver === 'undefined') {\n    callback(true)\n\n    return () => {}\n  }\n\n  const observer = new IntersectionObserver(\n    (entries) => {\n      for (const entry of entries) callback(entry.isIntersecting)\n    },\n    { threshold },\n  )\n  observer.observe(element)\n\n  return () => observer.disconnect()\n}\n","<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'\n\nimport { formatNumber } from '../utils/format'\nimport { nextFrame } from './environment'\n\n/**\n * A number whose digits roll to their new value, like an odometer or a note\n * counter.\n *\n * Each digit is a column of 0–9 moved into place, so going from 19 to 20\n * turns the tens over rather than redrawing the whole number — the eye\n * follows what changed. Positions are counted from the right, which keeps the\n * units column the units column when the number grows a digit, and keeps a\n * thousands separator where it was.\n *\n * Formatting is `Intl.NumberFormat`, so currency, percent, grouping and\n * decimals are the locale's, and change with it. A screen reader hears the\n * value once, as formatted text; the rolling columns are hidden from it.\n *\n * On a server, and for a reader who asked for less motion, it is the number\n * and nothing else.\n */\nconst {\n  value,\n  from = undefined,\n  format = undefined,\n  locale = undefined,\n} = defineProps<{\n  /** The number to show. Change it and the digits roll to the new one. */\n  value: number\n  /**\n   * Where the digits start when the component mounts, so a count can roll up\n   * as the page opens. Unset, the first frame is already the value.\n   */\n  from?: number | undefined\n  /** Passed to `Intl.NumberFormat`: `{ style: 'currency', currency: 'TRY' }`, decimals, grouping. */\n  format?: Intl.NumberFormatOptions | undefined\n  /** A BCP 47 tag. Unset, the kit's active formatting locale. */\n  locale?: string | undefined\n}>()\n\nconst shown = ref(from ?? value)\n\nconst text = (n: number) =>\n  locale === undefined ? formatNumber(n, format) : formatNumber(n, format, locale)\n\n/** What a screen reader hears: the destination, never a digit mid-roll. */\nconst label = computed(() => text(value))\n\nconst columns = computed(() => {\n  const chars = Array.from(text(shown.value))\n\n  return chars.map((char, index) => ({\n    // From the right: the units stay the units when a digit is added in front.\n    key: chars.length - index,\n    char,\n    digit: /[0-9]/.test(char) ? Number(char) : null,\n  }))\n})\n\nlet cancel: (() => void) | null = null\n\nonMounted(() => {\n  if (from === undefined) return\n  // Two frames: the first paints `from`, so the second has somewhere to roll from.\n  cancel = nextFrame(() => {\n    cancel = nextFrame(() => (shown.value = value))\n  })\n})\n\nwatch(\n  () => value,\n  (next) => {\n    cancel?.()\n    shown.value = next\n  },\n)\n\nonBeforeUnmount(() => cancel?.())\n</script>\n\n<template>\n  <span class=\"rk-ticker\">\n    <span class=\"sr-only\">{{ label }}</span>\n    <span class=\"rk-ticker-track\" aria-hidden=\"true\">\n      <template v-for=\"column in columns\" :key=\"column.key\">\n        <span\n          v-if=\"column.digit !== null\"\n          class=\"rk-ticker-digit\"\n          :style=\"{ '--rk-ticker-order': column.key }\"\n        >\n          <span\n            class=\"rk-ticker-strip\"\n            :style=\"{ transform: `translateY(${column.digit * -10}%)` }\"\n          >\n            <span v-for=\"n in 10\" :key=\"n\">{{ n - 1 }}</span>\n          </span>\n        </span>\n        <span v-else class=\"rk-ticker-char\">{{ column.char }}</span>\n      </template>\n    </span>\n  </span>\n</template>\n\n<style scoped>\n/* A line height of its own, so a column is exactly one digit tall without\n   depending on `lh` units or on whatever line height the parent set. */\n.rk-ticker {\n  display: inline-flex;\n  line-height: 1.15;\n  font-variant-numeric: tabular-nums;\n}\n\n.rk-ticker-track {\n  display: inline-flex;\n  white-space: pre;\n}\n\n.rk-ticker-digit {\n  display: inline-block;\n  height: 1.15em;\n  overflow: hidden;\n}\n\n/* Twice the slowest token: a roll is read, not glanced at. The small delay\n   per column, units first, is what makes it feel mechanical rather than\n   swapped. Both are tokens, so reduced motion takes them to zero. */\n.rk-ticker-strip {\n  display: flex;\n  flex-direction: column;\n  transition: transform calc(var(--duration-slower) * 2) var(--ease-standard);\n  transition-delay: calc(var(--duration-fast) / 5 * (var(--rk-ticker-order) - 1));\n}\n\n.rk-ticker-strip > span {\n  height: 1.15em;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'\n\nimport { formatNumber } from '../utils/format'\nimport { nextFrame } from './environment'\n\n/**\n * A number whose digits roll to their new value, like an odometer or a note\n * counter.\n *\n * Each digit is a column of 0–9 moved into place, so going from 19 to 20\n * turns the tens over rather than redrawing the whole number — the eye\n * follows what changed. Positions are counted from the right, which keeps the\n * units column the units column when the number grows a digit, and keeps a\n * thousands separator where it was.\n *\n * Formatting is `Intl.NumberFormat`, so currency, percent, grouping and\n * decimals are the locale's, and change with it. A screen reader hears the\n * value once, as formatted text; the rolling columns are hidden from it.\n *\n * On a server, and for a reader who asked for less motion, it is the number\n * and nothing else.\n */\nconst {\n  value,\n  from = undefined,\n  format = undefined,\n  locale = undefined,\n} = defineProps<{\n  /** The number to show. Change it and the digits roll to the new one. */\n  value: number\n  /**\n   * Where the digits start when the component mounts, so a count can roll up\n   * as the page opens. Unset, the first frame is already the value.\n   */\n  from?: number | undefined\n  /** Passed to `Intl.NumberFormat`: `{ style: 'currency', currency: 'TRY' }`, decimals, grouping. */\n  format?: Intl.NumberFormatOptions | undefined\n  /** A BCP 47 tag. Unset, the kit's active formatting locale. */\n  locale?: string | undefined\n}>()\n\nconst shown = ref(from ?? value)\n\nconst text = (n: number) =>\n  locale === undefined ? formatNumber(n, format) : formatNumber(n, format, locale)\n\n/** What a screen reader hears: the destination, never a digit mid-roll. */\nconst label = computed(() => text(value))\n\nconst columns = computed(() => {\n  const chars = Array.from(text(shown.value))\n\n  return chars.map((char, index) => ({\n    // From the right: the units stay the units when a digit is added in front.\n    key: chars.length - index,\n    char,\n    digit: /[0-9]/.test(char) ? Number(char) : null,\n  }))\n})\n\nlet cancel: (() => void) | null = null\n\nonMounted(() => {\n  if (from === undefined) return\n  // Two frames: the first paints `from`, so the second has somewhere to roll from.\n  cancel = nextFrame(() => {\n    cancel = nextFrame(() => (shown.value = value))\n  })\n})\n\nwatch(\n  () => value,\n  (next) => {\n    cancel?.()\n    shown.value = next\n  },\n)\n\nonBeforeUnmount(() => cancel?.())\n</script>\n\n<template>\n  <span class=\"rk-ticker\">\n    <span class=\"sr-only\">{{ label }}</span>\n    <span class=\"rk-ticker-track\" aria-hidden=\"true\">\n      <template v-for=\"column in columns\" :key=\"column.key\">\n        <span\n          v-if=\"column.digit !== null\"\n          class=\"rk-ticker-digit\"\n          :style=\"{ '--rk-ticker-order': column.key }\"\n        >\n          <span\n            class=\"rk-ticker-strip\"\n            :style=\"{ transform: `translateY(${column.digit * -10}%)` }\"\n          >\n            <span v-for=\"n in 10\" :key=\"n\">{{ n - 1 }}</span>\n          </span>\n        </span>\n        <span v-else class=\"rk-ticker-char\">{{ column.char }}</span>\n      </template>\n    </span>\n  </span>\n</template>\n\n<style scoped>\n/* A line height of its own, so a column is exactly one digit tall without\n   depending on `lh` units or on whatever line height the parent set. */\n.rk-ticker {\n  display: inline-flex;\n  line-height: 1.15;\n  font-variant-numeric: tabular-nums;\n}\n\n.rk-ticker-track {\n  display: inline-flex;\n  white-space: pre;\n}\n\n.rk-ticker-digit {\n  display: inline-block;\n  height: 1.15em;\n  overflow: hidden;\n}\n\n/* Twice the slowest token: a roll is read, not glanced at. The small delay\n   per column, units first, is what makes it feel mechanical rather than\n   swapped. Both are tokens, so reduced motion takes them to zero. */\n.rk-ticker-strip {\n  display: flex;\n  flex-direction: column;\n  transition: transform calc(var(--duration-slower) * 2) var(--ease-standard);\n  transition-delay: calc(var(--duration-fast) / 5 * (var(--rk-ticker-order) - 1));\n}\n\n.rk-ticker-strip > span {\n  height: 1.15em;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from 'vue'\n\nimport { formatNumber } from '../utils/format'\nimport { nextFrame, prefersReducedMotion, watchVisibility } from './environment'\n\n/**\n * A number that counts up to its value once it scrolls into view.\n *\n * Where `NumberTicker` rolls digits, this passes through every value on the\n * way — the right choice for a statistic a reader should watch grow, and for\n * decimals, where rolling columns would spin without meaning anything.\n *\n * It waits until it is on screen, so a count below the fold is not over\n * before anyone sees it. It eases out: fast at first, settling on the value,\n * which reads as arriving rather than stopping. A screen reader hears the\n * final value only. On a server, and for a reader who asked for less motion,\n * it is the value from the start.\n */\nconst {\n  value,\n  from = 0,\n  duration = 1600,\n  format = undefined,\n  locale = undefined,\n} = defineProps<{\n  /** The number to count to. Change it and it counts on from where it is. */\n  value: number\n  /** Where the first count starts. */\n  from?: number | undefined\n  /** How long a count takes, in milliseconds. */\n  duration?: number | undefined\n  /** Passed to `Intl.NumberFormat`. Set `maximumFractionDigits` to count in decimals. */\n  format?: Intl.NumberFormatOptions | undefined\n  /** A BCP 47 tag. Unset, the kit's active formatting locale. */\n  locale?: string | undefined\n}>()\n\nconst root = useTemplateRef<HTMLElement>('root')\n\n/* The value first, so a server render — and the frame before mount — shows\n   the real number rather than a zero that means nothing. */\nconst shown = ref(value)\n\nconst text = (n: number) =>\n  locale === undefined ? formatNumber(n, format) : formatNumber(n, format, locale)\n\nconst display = computed(() => text(shown.value))\nconst label = computed(() => text(value))\n\nlet cancelFrame: (() => void) | null = null\nlet stopWatching: (() => void) | null = null\nlet started = false\n\nconst easeOut = (t: number) => 1 - (1 - t) ** 3\n\nfunction countTo(target: number) {\n  cancelFrame?.()\n\n  const start = shown.value\n  const began = performance.now()\n\n  const step = () => {\n    const progress = Math.min(1, (performance.now() - began) / duration)\n    shown.value = start + (target - start) * easeOut(progress)\n    cancelFrame = progress < 1 ? nextFrame(step) : null\n  }\n\n  cancelFrame = nextFrame(step)\n}\n\nonMounted(() => {\n  if (prefersReducedMotion() || duration <= 0 || !root.value) {\n    started = true\n    return\n  }\n\n  shown.value = from\n  stopWatching = watchVisibility(root.value, (visible) => {\n    if (!visible || started) return\n    started = true\n    stopWatching?.()\n    countTo(value)\n  })\n})\n\nwatch(\n  () => value,\n  (next) => {\n    // Before the first count, the new value is simply where it will go.\n    if (!started) return\n    if (prefersReducedMotion() || duration <= 0) shown.value = next\n    else countTo(next)\n  },\n)\n\nonBeforeUnmount(() => {\n  cancelFrame?.()\n  stopWatching?.()\n})\n</script>\n\n<template>\n  <span ref=\"root\" class=\"rk-count\">\n    <span class=\"sr-only\">{{ label }}</span>\n    <span aria-hidden=\"true\">{{ display }}</span>\n  </span>\n</template>\n\n<style scoped>\n/* Tabular figures, so the number does not shake sideways as it counts. */\n.rk-count {\n  font-variant-numeric: tabular-nums;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from 'vue'\n\nimport { formatNumber } from '../utils/format'\nimport { nextFrame, prefersReducedMotion, watchVisibility } from './environment'\n\n/**\n * A number that counts up to its value once it scrolls into view.\n *\n * Where `NumberTicker` rolls digits, this passes through every value on the\n * way — the right choice for a statistic a reader should watch grow, and for\n * decimals, where rolling columns would spin without meaning anything.\n *\n * It waits until it is on screen, so a count below the fold is not over\n * before anyone sees it. It eases out: fast at first, settling on the value,\n * which reads as arriving rather than stopping. A screen reader hears the\n * final value only. On a server, and for a reader who asked for less motion,\n * it is the value from the start.\n */\nconst {\n  value,\n  from = 0,\n  duration = 1600,\n  format = undefined,\n  locale = undefined,\n} = defineProps<{\n  /** The number to count to. Change it and it counts on from where it is. */\n  value: number\n  /** Where the first count starts. */\n  from?: number | undefined\n  /** How long a count takes, in milliseconds. */\n  duration?: number | undefined\n  /** Passed to `Intl.NumberFormat`. Set `maximumFractionDigits` to count in decimals. */\n  format?: Intl.NumberFormatOptions | undefined\n  /** A BCP 47 tag. Unset, the kit's active formatting locale. */\n  locale?: string | undefined\n}>()\n\nconst root = useTemplateRef<HTMLElement>('root')\n\n/* The value first, so a server render — and the frame before mount — shows\n   the real number rather than a zero that means nothing. */\nconst shown = ref(value)\n\nconst text = (n: number) =>\n  locale === undefined ? formatNumber(n, format) : formatNumber(n, format, locale)\n\nconst display = computed(() => text(shown.value))\nconst label = computed(() => text(value))\n\nlet cancelFrame: (() => void) | null = null\nlet stopWatching: (() => void) | null = null\nlet started = false\n\nconst easeOut = (t: number) => 1 - (1 - t) ** 3\n\nfunction countTo(target: number) {\n  cancelFrame?.()\n\n  const start = shown.value\n  const began = performance.now()\n\n  const step = () => {\n    const progress = Math.min(1, (performance.now() - began) / duration)\n    shown.value = start + (target - start) * easeOut(progress)\n    cancelFrame = progress < 1 ? nextFrame(step) : null\n  }\n\n  cancelFrame = nextFrame(step)\n}\n\nonMounted(() => {\n  if (prefersReducedMotion() || duration <= 0 || !root.value) {\n    started = true\n    return\n  }\n\n  shown.value = from\n  stopWatching = watchVisibility(root.value, (visible) => {\n    if (!visible || started) return\n    started = true\n    stopWatching?.()\n    countTo(value)\n  })\n})\n\nwatch(\n  () => value,\n  (next) => {\n    // Before the first count, the new value is simply where it will go.\n    if (!started) return\n    if (prefersReducedMotion() || duration <= 0) shown.value = next\n    else countTo(next)\n  },\n)\n\nonBeforeUnmount(() => {\n  cancelFrame?.()\n  stopWatching?.()\n})\n</script>\n\n<template>\n  <span ref=\"root\" class=\"rk-count\">\n    <span class=\"sr-only\">{{ label }}</span>\n    <span aria-hidden=\"true\">{{ display }}</span>\n  </span>\n</template>\n\n<style scoped>\n/* Tabular figures, so the number does not shake sideways as it counts. */\n.rk-count {\n  font-variant-numeric: tabular-nums;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'\n\nimport { prefersReducedMotion } from './environment'\n\n/**\n * One word in a sentence that changes on its own: \"Build it *glass*\",\n * then *brutal*, then *soft*.\n *\n * It stops while the pointer rests on it or it holds focus, and an app can\n * stop it with `paused`. That is not a courtesy: content that moves on its\n * own for more than five seconds needs a way to stop it, and hovering is\n * where a reader's attention already is.\n *\n * For a reader who asked for less motion it does not rotate at all — the\n * first word stands, which is a complete sentence. On a server it is the\n * first word too.\n */\nconst {\n  words,\n  interval = 2400,\n  paused = false,\n} = defineProps<{\n  /** The words, in order. The first is the one a server and a still page show. */\n  words: readonly string[]\n  /** How long each word stays, in milliseconds. */\n  interval?: number | undefined\n  /** Holds the current word. For a pause button, or a section out of view. */\n  paused?: boolean | undefined\n}>()\n\nconst index = ref(0)\nconst held = ref(false)\nconst current = computed(() => words[index.value % Math.max(words.length, 1)] ?? '')\n\nlet timer: ReturnType<typeof setInterval> | null = null\n\nfunction stop() {\n  if (timer !== null) clearInterval(timer)\n  timer = null\n}\n\nfunction start() {\n  stop()\n  if (paused || held.value || words.length < 2 || prefersReducedMotion()) return\n\n  timer = setInterval(() => {\n    index.value = (index.value + 1) % words.length\n  }, interval)\n}\n\nonMounted(start)\nonBeforeUnmount(stop)\nwatch([() => paused, held, () => words.length, () => interval], start)\n</script>\n\n<template>\n  <span\n    class=\"rk-rotate\"\n    @mouseenter=\"held = true\"\n    @mouseleave=\"held = false\"\n    @focusin=\"held = true\"\n    @focusout=\"held = false\"\n  >\n    <Transition name=\"rk-rotate\" mode=\"out-in\">\n      <span :key=\"current\" class=\"rk-rotate-word\">{{ current }}</span>\n    </Transition>\n  </span>\n</template>\n\n<style scoped>\n.rk-rotate {\n  display: inline-block;\n  vertical-align: bottom;\n}\n\n.rk-rotate-word {\n  display: inline-block;\n}\n\n.rk-rotate-enter-active,\n.rk-rotate-leave-active {\n  transition:\n    opacity var(--duration-base) var(--ease-standard),\n    transform var(--duration-base) var(--ease-standard),\n    filter var(--duration-base) var(--ease-standard);\n}\n\n.rk-rotate-enter-from {\n  opacity: 0;\n  transform: translateY(40%);\n  filter: blur(4px);\n}\n\n.rk-rotate-leave-to {\n  opacity: 0;\n  transform: translateY(-40%);\n  filter: blur(4px);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'\n\nimport { prefersReducedMotion } from './environment'\n\n/**\n * One word in a sentence that changes on its own: \"Build it *glass*\",\n * then *brutal*, then *soft*.\n *\n * It stops while the pointer rests on it or it holds focus, and an app can\n * stop it with `paused`. That is not a courtesy: content that moves on its\n * own for more than five seconds needs a way to stop it, and hovering is\n * where a reader's attention already is.\n *\n * For a reader who asked for less motion it does not rotate at all — the\n * first word stands, which is a complete sentence. On a server it is the\n * first word too.\n */\nconst {\n  words,\n  interval = 2400,\n  paused = false,\n} = defineProps<{\n  /** The words, in order. The first is the one a server and a still page show. */\n  words: readonly string[]\n  /** How long each word stays, in milliseconds. */\n  interval?: number | undefined\n  /** Holds the current word. For a pause button, or a section out of view. */\n  paused?: boolean | undefined\n}>()\n\nconst index = ref(0)\nconst held = ref(false)\nconst current = computed(() => words[index.value % Math.max(words.length, 1)] ?? '')\n\nlet timer: ReturnType<typeof setInterval> | null = null\n\nfunction stop() {\n  if (timer !== null) clearInterval(timer)\n  timer = null\n}\n\nfunction start() {\n  stop()\n  if (paused || held.value || words.length < 2 || prefersReducedMotion()) return\n\n  timer = setInterval(() => {\n    index.value = (index.value + 1) % words.length\n  }, interval)\n}\n\nonMounted(start)\nonBeforeUnmount(stop)\nwatch([() => paused, held, () => words.length, () => interval], start)\n</script>\n\n<template>\n  <span\n    class=\"rk-rotate\"\n    @mouseenter=\"held = true\"\n    @mouseleave=\"held = false\"\n    @focusin=\"held = true\"\n    @focusout=\"held = false\"\n  >\n    <Transition name=\"rk-rotate\" mode=\"out-in\">\n      <span :key=\"current\" class=\"rk-rotate-word\">{{ current }}</span>\n    </Transition>\n  </span>\n</template>\n\n<style scoped>\n.rk-rotate {\n  display: inline-block;\n  vertical-align: bottom;\n}\n\n.rk-rotate-word {\n  display: inline-block;\n}\n\n.rk-rotate-enter-active,\n.rk-rotate-leave-active {\n  transition:\n    opacity var(--duration-base) var(--ease-standard),\n    transform var(--duration-base) var(--ease-standard),\n    filter var(--duration-base) var(--ease-standard);\n}\n\n.rk-rotate-enter-from {\n  opacity: 0;\n  transform: translateY(40%);\n  filter: blur(4px);\n}\n\n.rk-rotate-leave-to {\n  opacity: 0;\n  transform: translateY(-40%);\n  filter: blur(4px);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'\n\nimport { prefersReducedMotion } from './environment'\n\n/**\n * Text that types itself out, and — given several lines — deletes each one\n * and types the next.\n *\n * A screen reader hears the whole line, never a half-typed word: the typing\n * is hidden from it and the full text sits beside it. The server and a\n * reader who asked for less motion get the first line, complete.\n *\n * It stops while hovered or focused, and on `paused`, for the same reason\n * `TextRotate` does.\n */\nconst {\n  text,\n  speed = 45,\n  deleteSpeed = 25,\n  hold = 1800,\n  loop = true,\n  cursor = true,\n  paused = false,\n} = defineProps<{\n  /** One line to type, or several to type in turn. */\n  text: string | readonly string[]\n  /** Milliseconds per character typed. */\n  speed?: number | undefined\n  /** Milliseconds per character deleted. */\n  deleteSpeed?: number | undefined\n  /** How long a finished line stays before it is deleted, in milliseconds. */\n  hold?: number | undefined\n  /** With several lines, start again after the last. With one, it is typed once. */\n  loop?: boolean | undefined\n  /** Show a blinking caret after the text. */\n  cursor?: boolean | undefined\n  /** Stops where it is. */\n  paused?: boolean | undefined\n}>()\n\nconst lines = computed(() => (typeof text === 'string' ? [text] : [...text]))\n\nconst line = ref(0)\nconst current = computed(() => lines.value[line.value % Math.max(lines.value.length, 1)] ?? '')\n\n/* The whole first line until mount: that is what a server renders and what a\n   page without JavaScript keeps. */\nconst typed = ref(current.value.length)\nconst deleting = ref(false)\nconst held = ref(false)\n\nconst visible = computed(() => current.value.slice(0, typed.value))\n\nlet timer: ReturnType<typeof setTimeout> | null = null\n\nfunction stop() {\n  if (timer !== null) clearTimeout(timer)\n  timer = null\n}\n\nfunction tick() {\n  const full = current.value.length\n\n  if (!deleting.value && typed.value < full) {\n    typed.value += 1\n    return schedule(speed)\n  }\n\n  if (!deleting.value) {\n    // Finished a line. One line, or the last without loop: stay.\n    const last = line.value === lines.value.length - 1\n    if (lines.value.length < 2 || (last && !loop)) return\n    deleting.value = true\n    return schedule(hold)\n  }\n\n  if (typed.value > 0) {\n    typed.value -= 1\n    return schedule(deleteSpeed)\n  }\n\n  deleting.value = false\n  line.value = (line.value + 1) % lines.value.length\n  schedule(speed)\n}\n\nfunction schedule(delay: number) {\n  stop()\n  if (paused || held.value) return\n  timer = setTimeout(tick, delay)\n}\n\nonMounted(() => {\n  if (prefersReducedMotion()) return\n  typed.value = 0\n  schedule(speed)\n})\n\nwatch([() => paused, held], () => {\n  if (prefersReducedMotion()) return\n  schedule(speed)\n})\n\nwatch(lines, () => {\n  stop()\n  line.value = 0\n  deleting.value = false\n  typed.value = prefersReducedMotion() ? current.value.length : 0\n  if (!prefersReducedMotion()) schedule(speed)\n})\n\nonBeforeUnmount(stop)\n</script>\n\n<template>\n  <span\n    class=\"rk-type\"\n    @mouseenter=\"held = true\"\n    @mouseleave=\"held = false\"\n    @focusin=\"held = true\"\n    @focusout=\"held = false\"\n  >\n    <span class=\"sr-only\">{{ current }}</span>\n    <span aria-hidden=\"true\">{{ visible }}</span>\n    <span v-if=\"cursor\" class=\"rk-type-cursor\" aria-hidden=\"true\" />\n  </span>\n</template>\n\n<style scoped>\n.rk-type {\n  white-space: pre-wrap;\n}\n\n/* A bar the height of the text, in its colour. */\n.rk-type-cursor {\n  display: inline-block;\n  width: 0.08em;\n  height: 1em;\n  margin-left: 0.06em;\n  vertical-align: -0.12em;\n  background: currentColor;\n  animation: rk-type-blink 1s steps(1) infinite;\n}\n\n@keyframes rk-type-blink {\n  50% {\n    opacity: 0;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .rk-type-cursor {\n    animation: none;\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'\n\nimport { prefersReducedMotion } from './environment'\n\n/**\n * Text that types itself out, and — given several lines — deletes each one\n * and types the next.\n *\n * A screen reader hears the whole line, never a half-typed word: the typing\n * is hidden from it and the full text sits beside it. The server and a\n * reader who asked for less motion get the first line, complete.\n *\n * It stops while hovered or focused, and on `paused`, for the same reason\n * `TextRotate` does.\n */\nconst {\n  text,\n  speed = 45,\n  deleteSpeed = 25,\n  hold = 1800,\n  loop = true,\n  cursor = true,\n  paused = false,\n} = defineProps<{\n  /** One line to type, or several to type in turn. */\n  text: string | readonly string[]\n  /** Milliseconds per character typed. */\n  speed?: number | undefined\n  /** Milliseconds per character deleted. */\n  deleteSpeed?: number | undefined\n  /** How long a finished line stays before it is deleted, in milliseconds. */\n  hold?: number | undefined\n  /** With several lines, start again after the last. With one, it is typed once. */\n  loop?: boolean | undefined\n  /** Show a blinking caret after the text. */\n  cursor?: boolean | undefined\n  /** Stops where it is. */\n  paused?: boolean | undefined\n}>()\n\nconst lines = computed(() => (typeof text === 'string' ? [text] : [...text]))\n\nconst line = ref(0)\nconst current = computed(() => lines.value[line.value % Math.max(lines.value.length, 1)] ?? '')\n\n/* The whole first line until mount: that is what a server renders and what a\n   page without JavaScript keeps. */\nconst typed = ref(current.value.length)\nconst deleting = ref(false)\nconst held = ref(false)\n\nconst visible = computed(() => current.value.slice(0, typed.value))\n\nlet timer: ReturnType<typeof setTimeout> | null = null\n\nfunction stop() {\n  if (timer !== null) clearTimeout(timer)\n  timer = null\n}\n\nfunction tick() {\n  const full = current.value.length\n\n  if (!deleting.value && typed.value < full) {\n    typed.value += 1\n    return schedule(speed)\n  }\n\n  if (!deleting.value) {\n    // Finished a line. One line, or the last without loop: stay.\n    const last = line.value === lines.value.length - 1\n    if (lines.value.length < 2 || (last && !loop)) return\n    deleting.value = true\n    return schedule(hold)\n  }\n\n  if (typed.value > 0) {\n    typed.value -= 1\n    return schedule(deleteSpeed)\n  }\n\n  deleting.value = false\n  line.value = (line.value + 1) % lines.value.length\n  schedule(speed)\n}\n\nfunction schedule(delay: number) {\n  stop()\n  if (paused || held.value) return\n  timer = setTimeout(tick, delay)\n}\n\nonMounted(() => {\n  if (prefersReducedMotion()) return\n  typed.value = 0\n  schedule(speed)\n})\n\nwatch([() => paused, held], () => {\n  if (prefersReducedMotion()) return\n  schedule(speed)\n})\n\nwatch(lines, () => {\n  stop()\n  line.value = 0\n  deleting.value = false\n  typed.value = prefersReducedMotion() ? current.value.length : 0\n  if (!prefersReducedMotion()) schedule(speed)\n})\n\nonBeforeUnmount(stop)\n</script>\n\n<template>\n  <span\n    class=\"rk-type\"\n    @mouseenter=\"held = true\"\n    @mouseleave=\"held = false\"\n    @focusin=\"held = true\"\n    @focusout=\"held = false\"\n  >\n    <span class=\"sr-only\">{{ current }}</span>\n    <span aria-hidden=\"true\">{{ visible }}</span>\n    <span v-if=\"cursor\" class=\"rk-type-cursor\" aria-hidden=\"true\" />\n  </span>\n</template>\n\n<style scoped>\n.rk-type {\n  white-space: pre-wrap;\n}\n\n/* A bar the height of the text, in its colour. */\n.rk-type-cursor {\n  display: inline-block;\n  width: 0.08em;\n  height: 1em;\n  margin-left: 0.06em;\n  vertical-align: -0.12em;\n  background: currentColor;\n  animation: rk-type-blink 1s steps(1) infinite;\n}\n\n@keyframes rk-type-blink {\n  50% {\n    opacity: 0;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .rk-type-cursor {\n    animation: none;\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { onBeforeUnmount, onMounted, ref, useTemplateRef } from 'vue'\n\nimport { prefersReducedMotion, watchVisibility } from './environment'\n\n/**\n * Content that fades or rises into place as it scrolls into view.\n *\n * Visible by default and hidden only once it has mounted and found itself\n * below the fold, so a page rendered on a server, or read without\n * JavaScript, never has content stuck at zero opacity. For a reader who\n * asked for less motion it is never hidden at all.\n *\n * For a staggered list, give each item a growing `delay`:\n * `:delay=\"index * 60\"`.\n */\nconst {\n  effect = 'rise',\n  delay = 0,\n  once = true,\n  as = 'div',\n} = defineProps<{\n  /** How it arrives: fading in, rising a little as it does, or growing to size. */\n  effect?: 'fade' | 'rise' | 'scale' | undefined\n  /** Milliseconds to wait once it is in view — the stagger in a list. */\n  delay?: number | undefined\n  /** Reveal once and stay. Off, it hides again each time it leaves the screen. */\n  once?: boolean | undefined\n  /** The element to render. */\n  as?: string | undefined\n}>()\n\ndefineSlots<{\n  /** What is revealed. */\n  default: () => unknown\n}>()\n\nconst root = useTemplateRef<HTMLElement>('root')\nconst hidden = ref(false)\n\nlet stop: (() => void) | null = null\n\nonMounted(() => {\n  if (prefersReducedMotion() || !root.value) return\n\n  stop = watchVisibility(root.value, (visible) => {\n    hidden.value = !visible\n    if (visible && once) {\n      stop?.()\n      stop = null\n    }\n  })\n})\n\nonBeforeUnmount(() => stop?.())\n</script>\n\n<template>\n  <component\n    :is=\"as\"\n    ref=\"root\"\n    class=\"rk-reveal\"\n    :class=\"[`rk-reveal-${effect}`, { 'is-hidden': hidden }]\"\n    :style=\"{ '--rk-reveal-delay': `${delay}ms` }\"\n  >\n    <slot />\n  </component>\n</template>\n\n<style scoped>\n.rk-reveal {\n  transition:\n    opacity var(--duration-slower) var(--ease-standard),\n    transform var(--duration-slower) var(--ease-standard);\n  transition-delay: var(--rk-reveal-delay);\n}\n\n/* Hiding is instant; only arriving is animated. Otherwise an item leaving the\n   screen would fade out where nobody is looking and waste the frames. */\n.rk-reveal.is-hidden {\n  opacity: 0;\n  transition-duration: 0s;\n  transition-delay: 0s;\n}\n\n.rk-reveal-rise.is-hidden {\n  transform: translateY(1rem);\n}\n\n.rk-reveal-scale.is-hidden {\n  transform: scale(0.96);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { onBeforeUnmount, onMounted, ref, useTemplateRef } from 'vue'\n\nimport { prefersReducedMotion, watchVisibility } from './environment'\n\n/**\n * Content that fades or rises into place as it scrolls into view.\n *\n * Visible by default and hidden only once it has mounted and found itself\n * below the fold, so a page rendered on a server, or read without\n * JavaScript, never has content stuck at zero opacity. For a reader who\n * asked for less motion it is never hidden at all.\n *\n * For a staggered list, give each item a growing `delay`:\n * `:delay=\"index * 60\"`.\n */\nconst {\n  effect = 'rise',\n  delay = 0,\n  once = true,\n  as = 'div',\n} = defineProps<{\n  /** How it arrives: fading in, rising a little as it does, or growing to size. */\n  effect?: 'fade' | 'rise' | 'scale' | undefined\n  /** Milliseconds to wait once it is in view — the stagger in a list. */\n  delay?: number | undefined\n  /** Reveal once and stay. Off, it hides again each time it leaves the screen. */\n  once?: boolean | undefined\n  /** The element to render. */\n  as?: string | undefined\n}>()\n\ndefineSlots<{\n  /** What is revealed. */\n  default: () => unknown\n}>()\n\nconst root = useTemplateRef<HTMLElement>('root')\nconst hidden = ref(false)\n\nlet stop: (() => void) | null = null\n\nonMounted(() => {\n  if (prefersReducedMotion() || !root.value) return\n\n  stop = watchVisibility(root.value, (visible) => {\n    hidden.value = !visible\n    if (visible && once) {\n      stop?.()\n      stop = null\n    }\n  })\n})\n\nonBeforeUnmount(() => stop?.())\n</script>\n\n<template>\n  <component\n    :is=\"as\"\n    ref=\"root\"\n    class=\"rk-reveal\"\n    :class=\"[`rk-reveal-${effect}`, { 'is-hidden': hidden }]\"\n    :style=\"{ '--rk-reveal-delay': `${delay}ms` }\"\n  >\n    <slot />\n  </component>\n</template>\n\n<style scoped>\n.rk-reveal {\n  transition:\n    opacity var(--duration-slower) var(--ease-standard),\n    transform var(--duration-slower) var(--ease-standard);\n  transition-delay: var(--rk-reveal-delay);\n}\n\n/* Hiding is instant; only arriving is animated. Otherwise an item leaving the\n   screen would fade out where nobody is looking and waste the frames. */\n.rk-reveal.is-hidden {\n  opacity: 0;\n  transition-duration: 0s;\n  transition-delay: 0s;\n}\n\n.rk-reveal-rise.is-hidden {\n  transform: translateY(1rem);\n}\n\n.rk-reveal-scale.is-hidden {\n  transform: scale(0.96);\n}\n</style>\n","<script setup lang=\"ts\">\n/**\n * A row that scrolls sideways without end: logos, testimonials, a ticker.\n *\n * The content is rendered twice and the track moves by exactly one copy, so\n * the loop has no seam and no measuring. The second copy is `inert` and\n * hidden from assistive tech — a keyboard or screen-reader user meets each\n * item once.\n *\n * It stops while hovered or focused, and on `paused`. For a reader who asked\n * for less motion it does not move at all: it becomes a row that scrolls by\n * hand, so nothing in it is out of reach.\n */\nconst {\n  duration = 30,\n  reverse = false,\n  paused = false,\n  fade = true,\n  gap = '2rem',\n} = defineProps<{\n  /** Seconds for one full pass. Longer is slower; the speed does not change with the content's length. */\n  duration?: number | undefined\n  /** Move left to right instead. */\n  reverse?: boolean | undefined\n  /** Holds it still. */\n  paused?: boolean | undefined\n  /** Fade the content out at both edges instead of cutting it. */\n  fade?: boolean | undefined\n  /** Space between items, and between the end of one pass and the start of the next. Any CSS length. */\n  gap?: string | undefined\n}>()\n\ndefineSlots<{\n  /** The items. Rendered twice, the second copy inert. */\n  default: () => unknown\n}>()\n</script>\n\n<template>\n  <div\n    class=\"rk-marquee\"\n    :class=\"{ 'is-reverse': reverse, 'is-paused': paused, 'is-faded': fade }\"\n    :style=\"{ '--rk-marquee-duration': `${duration}s`, '--rk-marquee-gap': gap }\"\n  >\n    <div class=\"rk-marquee-track\">\n      <div class=\"rk-marquee-group\">\n        <slot />\n      </div>\n      <div class=\"rk-marquee-group\" aria-hidden=\"true\" inert>\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.rk-marquee {\n  display: flex;\n  overflow: hidden;\n}\n\n.rk-marquee.is-faded {\n  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);\n}\n\n.rk-marquee-track {\n  display: flex;\n  width: max-content;\n  animation: rk-marquee var(--rk-marquee-duration) linear infinite;\n}\n\n.rk-marquee.is-reverse .rk-marquee-track {\n  animation-direction: reverse;\n}\n\n.rk-marquee.is-paused .rk-marquee-track,\n.rk-marquee:hover .rk-marquee-track,\n.rk-marquee:focus-within .rk-marquee-track {\n  animation-play-state: paused;\n}\n\n/* Each group ends in the gap, so moving by exactly half the track lands the\n   second copy where the first began. */\n.rk-marquee-group {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: var(--rk-marquee-gap);\n  padding-inline-end: var(--rk-marquee-gap);\n}\n\n@keyframes rk-marquee {\n  to {\n    transform: translateX(-50%);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .rk-marquee {\n    overflow-x: auto;\n    mask-image: none;\n  }\n\n  .rk-marquee-track {\n    animation: none;\n  }\n\n  .rk-marquee-group[aria-hidden='true'] {\n    display: none;\n  }\n}\n</style>\n","<script setup lang=\"ts\">\n/**\n * A row that scrolls sideways without end: logos, testimonials, a ticker.\n *\n * The content is rendered twice and the track moves by exactly one copy, so\n * the loop has no seam and no measuring. The second copy is `inert` and\n * hidden from assistive tech — a keyboard or screen-reader user meets each\n * item once.\n *\n * It stops while hovered or focused, and on `paused`. For a reader who asked\n * for less motion it does not move at all: it becomes a row that scrolls by\n * hand, so nothing in it is out of reach.\n */\nconst {\n  duration = 30,\n  reverse = false,\n  paused = false,\n  fade = true,\n  gap = '2rem',\n} = defineProps<{\n  /** Seconds for one full pass. Longer is slower; the speed does not change with the content's length. */\n  duration?: number | undefined\n  /** Move left to right instead. */\n  reverse?: boolean | undefined\n  /** Holds it still. */\n  paused?: boolean | undefined\n  /** Fade the content out at both edges instead of cutting it. */\n  fade?: boolean | undefined\n  /** Space between items, and between the end of one pass and the start of the next. Any CSS length. */\n  gap?: string | undefined\n}>()\n\ndefineSlots<{\n  /** The items. Rendered twice, the second copy inert. */\n  default: () => unknown\n}>()\n</script>\n\n<template>\n  <div\n    class=\"rk-marquee\"\n    :class=\"{ 'is-reverse': reverse, 'is-paused': paused, 'is-faded': fade }\"\n    :style=\"{ '--rk-marquee-duration': `${duration}s`, '--rk-marquee-gap': gap }\"\n  >\n    <div class=\"rk-marquee-track\">\n      <div class=\"rk-marquee-group\">\n        <slot />\n      </div>\n      <div class=\"rk-marquee-group\" aria-hidden=\"true\" inert>\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.rk-marquee {\n  display: flex;\n  overflow: hidden;\n}\n\n.rk-marquee.is-faded {\n  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);\n}\n\n.rk-marquee-track {\n  display: flex;\n  width: max-content;\n  animation: rk-marquee var(--rk-marquee-duration) linear infinite;\n}\n\n.rk-marquee.is-reverse .rk-marquee-track {\n  animation-direction: reverse;\n}\n\n.rk-marquee.is-paused .rk-marquee-track,\n.rk-marquee:hover .rk-marquee-track,\n.rk-marquee:focus-within .rk-marquee-track {\n  animation-play-state: paused;\n}\n\n/* Each group ends in the gap, so moving by exactly half the track lands the\n   second copy where the first began. */\n.rk-marquee-group {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: var(--rk-marquee-gap);\n  padding-inline-end: var(--rk-marquee-gap);\n}\n\n@keyframes rk-marquee {\n  to {\n    transform: translateX(-50%);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .rk-marquee {\n    overflow-x: auto;\n    mask-image: none;\n  }\n\n  .rk-marquee-track {\n    animation: none;\n  }\n\n  .rk-marquee-group[aria-hidden='true'] {\n    display: none;\n  }\n}\n</style>\n"],"mappings":"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"}