rei-kit 2.3.1 → 2.4.0

package/dist/motion.css

@@ -7,7 +7,7 @@
  *   animate-glow         a ring that swells and fades, in the primary colour
  *   animate-wiggle       a small shake — "look here", once in a while
  *   animate-pop          grows into place once — something that just arrived
- *   text-shimmer         light passing across text, in the palette's colours
+ *   text-shimmer         light passing across a headline, in the palette's colours
  *
  * Declared as theme animations, so Tailwind emits a keyframe only for the
  * utilities an app actually uses. Colours come from the roles, so every one
@@ -91,14 +91,19 @@
   }
 }
 
-/* Text painted with a band of light moving across it. The ink stays readable
-   the whole way: the band is the primary colour, not white. */
+/* A headline with a band of light moving across it. The text stays readable
+   the whole way: the band is a colour of the palette, not white.
+
+   Two knobs, so it suits a heading in ink as well as one in the brand:
+   `--shimmer-base` is the text, `--shimmer-band` the light. For a brand
+   headline: `text-shimmer [--shimmer-base:var(--color-primary)]
+   [--shimmer-band:var(--color-accent)]`. */
 @utility text-shimmer {
   background: linear-gradient(
       100deg,
-      var(--color-ink) 40%,
-      var(--color-primary) 50%,
-      var(--color-ink) 60%
+      var(--shimmer-base, var(--color-ink)) 40%,
+      var(--shimmer-band, var(--color-primary)) 50%,
+      var(--shimmer-base, var(--color-ink)) 60%
     )
     0 0 / 200% 100%;
   -webkit-background-clip: text;

package/dist/motion.js

@@ -124,7 +124,19 @@ var CountUp_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 	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 places = computed(() => {
+			if (__props.format?.maximumFractionDigits !== void 0) return __props.format.maximumFractionDigits;
+			const [, decimals = ""] = String(__props.value).split(".");
+			return decimals.length;
+		});
+		const text = (n) => {
+			const options = {
+				maximumFractionDigits: places.value,
+				...__props.format
+			};
+			const rounded = Number(n.toFixed(places.value));
+			return __props.locale === void 0 ? formatNumber(rounded, options) : formatNumber(rounded, options, __props.locale);
+		};
 		const display = computed(() => text(shown.value));
 		const label = computed(() => text(__props.value));
 		let cancelFrame = null;
@@ -172,7 +184,7 @@ var CountUp_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 			}, [createElementVNode("span", _hoisted_1$2, toDisplayString(label.value), 1), createElementVNode("span", _hoisted_2$2, toDisplayString(display.value), 1)], 512);
 		};
 	}
-}), [["__scopeId", "data-v-3cefce6f"]]);
+}), [["__scopeId", "data-v-8f5f0547"]]);
 //#endregion
 //#region src/motion/TextRotate.vue
 var TextRotate_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({

package/dist/motion.js.map

@@ -1 +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":";;;;;;;;;;;;;;AAWA,SAAgB,uBAAgC;CAC9C,IAAI,OAAO,WAAW,eAAe,OAAO,OAAO,eAAe,YAAY,OAAO;CAErF,OAAO,OAAO,WAAW,kCAAkC,CAAC,CAAC;AAC/D;;AAGA,SAAgB,UAAU,UAAkC;CAC1D,IAAI,OAAO,0BAA0B,YAAY;EAC/C,MAAM,KAAK,sBAAsB,QAAQ;EAEzC,aAAa,qBAAqB,EAAE;CACtC;CAEA,MAAM,KAAK,WAAW,UAAU,EAAE;CAElC,aAAa,aAAa,EAAE;AAC9B;;;;;;;;AASA,SAAgB,gBACd,SACA,UACA,YAAY,KACA;CACZ,IAAI,OAAO,yBAAyB,aAAa;EAC/C,SAAS,IAAI;EAEb,aAAa,CAAC;CAChB;CAEA,MAAM,WAAW,IAAI,sBAClB,YAAY;EACX,KAAK,MAAM,SAAS,SAAS,SAAS,MAAM,cAAc;CAC5D,GACA,EAAE,UAAU,CACd;CACA,SAAS,QAAQ,OAAO;CAExB,aAAa,SAAS,WAAW;AACnC;;;;;;;;;;;;;;;;;;;;;;;;ECfA,MAAM,QAAQ,IAAI,QAAA,QAAQ,QAAA,KAAK;EAE/B,MAAM,QAAQ,MACZ,QAAA,WAAW,KAAA,IAAY,aAAa,GAAG,QAAA,MAAM,IAAI,aAAa,GAAG,QAAA,QAAQ,QAAA,MAAM;;EAGjF,MAAM,QAAQ,eAAe,KAAK,QAAA,KAAK,CAAC;EAExC,MAAM,UAAU,eAAe;GAC7B,MAAM,QAAQ,MAAM,KAAK,KAAK,MAAM,KAAK,CAAC;GAE1C,OAAO,MAAM,KAAK,MAAM,WAAW;IAEjC,KAAK,MAAM,SAAS;IACpB;IACA,OAAO,QAAQ,KAAK,IAAI,IAAI,OAAO,IAAI,IAAI;GAC7C,EAAE;EACJ,CAAC;EAED,IAAI,SAA8B;EAElC,gBAAgB;GACd,IAAI,QAAA,SAAS,KAAA,GAAW;GAExB,SAAS,gBAAgB;IACvB,SAAS,gBAAiB,MAAM,QAAQ,QAAA,KAAM;GAChD,CAAC;EACH,CAAC;EAED,YACQ,QAAA,QACL,SAAS;GACR,SAAS;GACT,MAAM,QAAQ;EAChB,CACF;EAEA,sBAAsB,SAAS,CAAC;;GAI9B,OAAA,UAAA,GAAA,mBAmBO,QAnBP,cAmBO,CAlBL,mBAAwC,QAAxC,cAAwC,gBAAf,MAAA,KAAK,GAAA,CAAA,GAC9B,mBAgBO,QAhBP,cAgBO,EAfL,UAAA,IAAA,GAAA,mBAcW,UAAA,MAAA,WAdgB,QAAA,QAAV,WAAM;IAAmB,OAAA,UAAA,GAAA,mBAAA,UAAA,EAAA,KAAA,OAAO,IAAA,GAAA,CAEvC,OAAO,UAAK,QADpB,UAAA,GAAA,mBAWO,QAAA;;KATL,OAAM;KACL,OAAK,eAAA,EAAA,qBAAyB,OAAO,IAAG,CAAA;IAEzC,GAAA,CAAA,mBAKO,QAAA;KAJL,OAAM;KACL,OAAK,eAAA,EAAA,WAAA,cAA6B,OAAO,QAAK,IAAA,IAAA,CAAA;IAE/C,GAAA,EAAA,UAAA,GAAA,mBAAiD,UAAA,MAAA,WAA/B,KAAL,MAAC;KAAd,OAAA,mBAAiD,QAAA,EAA1B,KAAK,EAAC,GAAA,gBAAK,IAAC,CAAA,GAAA,CAAA;IAGvC,CAAA,GAAA,EAAA,EAAA,GAAA,CAAA,CAAA,GAAA,CAAA,MAAA,UAAA,GAAA,mBAA4D,QAA5D,YAA4D,gBAArB,OAAO,IAAI,GAAA,CAAA,EAAA,GAAA,EAAA;;;;;;;;;;;;;;;;;;;;;EE7D1D,MAAM,OAAO,eAA4B,MAAM;EAI/C,MAAM,QAAQ,IAAI,QAAA,KAAK;EAEvB,MAAM,QAAQ,MACZ,QAAA,WAAW,KAAA,IAAY,aAAa,GAAG,QAAA,MAAM,IAAI,aAAa,GAAG,QAAA,QAAQ,QAAA,MAAM;EAEjF,MAAM,UAAU,eAAe,KAAK,MAAM,KAAK,CAAC;EAChD,MAAM,QAAQ,eAAe,KAAK,QAAA,KAAK,CAAC;EAExC,IAAI,cAAmC;EACvC,IAAI,eAAoC;EACxC,IAAI,UAAU;EAEd,MAAM,WAAW,MAAc,KAAK,IAAI,MAAM;EAE9C,SAAS,QAAQ,QAAgB;GAC/B,cAAc;GAEd,MAAM,QAAQ,MAAM;GACpB,MAAM,QAAQ,YAAY,IAAI;GAE9B,MAAM,aAAa;IACjB,MAAM,WAAW,KAAK,IAAI,IAAI,YAAY,IAAI,IAAI,SAAS,QAAA,QAAQ;IACnE,MAAM,QAAQ,SAAS,SAAS,SAAS,QAAQ,QAAQ;IACzD,cAAc,WAAW,IAAI,UAAU,IAAI,IAAI;GACjD;GAEA,cAAc,UAAU,IAAI;EAC9B;EAEA,gBAAgB;GACd,IAAI,qBAAqB,KAAK,QAAA,YAAY,KAAK,CAAC,KAAK,OAAO;IAC1D,UAAU;IACV;GACF;GAEA,MAAM,QAAQ,QAAA;GACd,eAAe,gBAAgB,KAAK,QAAQ,YAAY;IACtD,IAAI,CAAC,WAAW,SAAS;IACzB,UAAU;IACV,eAAe;IACf,QAAQ,QAAA,KAAK;GACf,CAAC;EACH,CAAC;EAED,YACQ,QAAA,QACL,SAAS;GAER,IAAI,CAAC,SAAS;GACd,IAAI,qBAAqB,KAAK,QAAA,YAAY,GAAG,MAAM,QAAQ;QACtD,QAAQ,IAAI;EACnB,CACF;EAEA,sBAAsB;GACpB,cAAc;GACd,eAAe;EACjB,CAAC;;GAIC,OAAA,UAAA,GAAA,mBAGO,QAAA;IAHG,SAAA;IAAJ,KAAI;IAAO,OAAM;GACrB,GAAA,CAAA,mBAAwC,QAAxC,cAAwC,gBAAf,MAAA,KAAK,GAAA,CAAA,GAC9B,mBAA6C,QAA7C,cAA6C,gBAAjB,QAAA,KAAO,GAAA,CAAA,CAAA,GAAA,GAAA;;;;;;;;;;;;;;;;;EE1EvC,MAAM,QAAQ,IAAI,CAAC;EACnB,MAAM,OAAO,IAAI,KAAK;EACtB,MAAM,UAAU,eAAe,QAAA,MAAM,MAAM,QAAQ,KAAK,IAAI,QAAA,MAAM,QAAQ,CAAC,MAAM,EAAE;EAEnF,IAAI,QAA+C;EAEnD,SAAS,OAAO;GACd,IAAI,UAAU,MAAM,cAAc,KAAK;GACvC,QAAQ;EACV;EAEA,SAAS,QAAQ;GACf,KAAK;GACL,IAAI,QAAA,UAAU,KAAK,SAAS,QAAA,MAAM,SAAS,KAAK,qBAAqB,GAAG;GAExE,QAAQ,kBAAkB;IACxB,MAAM,SAAS,MAAM,QAAQ,KAAK,QAAA,MAAM;GAC1C,GAAG,QAAA,QAAQ;EACb;EAEA,UAAU,KAAK;EACf,gBAAgB,IAAI;EACpB,MAAM;SAAO,QAAA;GAAQ;SAAY,QAAA,MAAM;SAAc,QAAA;EAAQ,GAAG,KAAK;;GAInE,OAAA,UAAA,GAAA,mBAUO,QAAA;IATL,OAAM;IACL,cAAU,OAAA,OAAA,OAAA,MAAA,WAAE,KAAA,QAAI;IAChB,cAAU,OAAA,OAAA,OAAA,MAAA,WAAE,KAAA,QAAI;IAChB,WAAO,OAAA,OAAA,OAAA,MAAA,WAAE,KAAA,QAAI;IACb,YAAQ,OAAA,OAAA,OAAA,MAAA,WAAE,KAAA,QAAI;GAEf,GAAA,CAAA,YAEa,YAAA;IAFD,MAAK;IAAY,MAAK;;IAChC,SAAA,cAAgE,EAAhE,UAAA,GAAA,mBAAgE,QAAA;KAAzD,KAAK,QAAA;KAAS,OAAM;IAAoB,GAAA,gBAAA,QAAA,KAAO,GAAA,CAAA,EAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EExB5D,MAAM,QAAQ,eAAgB,OAAO,QAAA,SAAS,WAAW,CAAC,QAAA,IAAI,IAAI,CAAC,GAAG,QAAA,IAAI,CAAE;EAE5E,MAAM,OAAO,IAAI,CAAC;EAClB,MAAM,UAAU,eAAe,MAAM,MAAM,KAAK,QAAQ,KAAK,IAAI,MAAM,MAAM,QAAQ,CAAC,MAAM,EAAE;EAI9F,MAAM,QAAQ,IAAI,QAAQ,MAAM,MAAM;EACtC,MAAM,WAAW,IAAI,KAAK;EAC1B,MAAM,OAAO,IAAI,KAAK;EAEtB,MAAM,UAAU,eAAe,QAAQ,MAAM,MAAM,GAAG,MAAM,KAAK,CAAC;EAElE,IAAI,QAA8C;EAElD,SAAS,OAAO;GACd,IAAI,UAAU,MAAM,aAAa,KAAK;GACtC,QAAQ;EACV;EAEA,SAAS,OAAO;GACd,MAAM,OAAO,QAAQ,MAAM;GAE3B,IAAI,CAAC,SAAS,SAAS,MAAM,QAAQ,MAAM;IACzC,MAAM,SAAS;IACf,OAAO,SAAS,QAAA,KAAK;GACvB;GAEA,IAAI,CAAC,SAAS,OAAO;IAEnB,MAAM,OAAO,KAAK,UAAU,MAAM,MAAM,SAAS;IACjD,IAAI,MAAM,MAAM,SAAS,KAAM,QAAQ,CAAC,QAAA,MAAO;IAC/C,SAAS,QAAQ;IACjB,OAAO,SAAS,QAAA,IAAI;GACtB;GAEA,IAAI,MAAM,QAAQ,GAAG;IACnB,MAAM,SAAS;IACf,OAAO,SAAS,QAAA,WAAW;GAC7B;GAEA,SAAS,QAAQ;GACjB,KAAK,SAAS,KAAK,QAAQ,KAAK,MAAM,MAAM;GAC5C,SAAS,QAAA,KAAK;EAChB;EAEA,SAAS,SAAS,OAAe;GAC/B,KAAK;GACL,IAAI,QAAA,UAAU,KAAK,OAAO;GAC1B,QAAQ,WAAW,MAAM,KAAK;EAChC;EAEA,gBAAgB;GACd,IAAI,qBAAqB,GAAG;GAC5B,MAAM,QAAQ;GACd,SAAS,QAAA,KAAK;EAChB,CAAC;EAED,MAAM,OAAO,QAAA,QAAQ,IAAI,SAAS;GAChC,IAAI,qBAAqB,GAAG;GAC5B,SAAS,QAAA,KAAK;EAChB,CAAC;EAED,MAAM,aAAa;GACjB,KAAK;GACL,KAAK,QAAQ;GACb,SAAS,QAAQ;GACjB,MAAM,QAAQ,qBAAqB,IAAI,QAAQ,MAAM,SAAS;GAC9D,IAAI,CAAC,qBAAqB,GAAG,SAAS,QAAA,KAAK;EAC7C,CAAC;EAED,gBAAgB,IAAI;;GAIlB,OAAA,UAAA,GAAA,mBAUO,QAAA;IATL,OAAM;IACL,cAAU,OAAA,OAAA,OAAA,MAAA,WAAE,KAAA,QAAI;IAChB,cAAU,OAAA,OAAA,OAAA,MAAA,WAAE,KAAA,QAAI;IAChB,WAAO,OAAA,OAAA,OAAA,MAAA,WAAE,KAAA,QAAI;IACb,YAAQ,OAAA,OAAA,OAAA,MAAA,WAAE,KAAA,QAAI;;IAEf,mBAA0C,QAA1C,cAA0C,gBAAjB,QAAA,KAAO,GAAA,CAAA;IAChC,mBAA6C,QAA7C,cAA6C,gBAAjB,QAAA,KAAO,GAAA,CAAA;IACvB,QAAA,UAAZ,UAAA,GAAA,mBAAgE,QAAhE,YAAgE,KAAA,mBAAA,IAAA,IAAA;;;;;;;;;;;;;;;;;;;EExFpE,MAAM,OAAO,eAA4B,MAAM;EAC/C,MAAM,SAAS,IAAI,KAAK;EAExB,IAAI,OAA4B;EAEhC,gBAAgB;GACd,IAAI,qBAAqB,KAAK,CAAC,KAAK,OAAO;GAE3C,OAAO,gBAAgB,KAAK,QAAQ,YAAY;IAC9C,OAAO,QAAQ,CAAC;IAChB,IAAI,WAAW,QAAA,MAAM;KACnB,OAAO;KACP,OAAO;IACT;GACF,CAAC;EACH,CAAC;EAED,sBAAsB,OAAO,CAAC;;GAI5B,OAAA,UAAA,GAAA,YAQY,wBAPL,QAAA,EAAE,GAAA;IACH,SAAA;IAAJ,KAAI;IACJ,OAAK,eAAA,CAAC,aAAW,CAAA,aACK,QAAA,UAAM,EAAA,aAAmB,OAAA,MAAM,CAAA,CAAA,CAAA;IACpD,OAAK,eAAA,EAAA,qBAAA,GAA4B,QAAA,MAAK,IAAA,CAAA;;IAEvC,SAAA,cAAQ,CAAR,WAAQ,KAAA,QAAA,WAAA,CAAA,GAAA,KAAA,GAAA,IAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GE1BV,OAAA,UAAA,GAAA,mBAaM,OAAA;IAZJ,OAAK,eAAA,CAAC,cAAY;KAAA,cACM,QAAA;KAAO,aAAe,QAAA;KAAM,YAAc,QAAA;IAAI,CAAA,CAAA;IACrE,OAAK,eAAA;KAAA,yBAAA,GAAgC,QAAA,SAAQ;KAAA,oBAAyB,QAAA;IAAG,CAAA;GAE1E,GAAA,CAAA,mBAOM,OAPN,YAOM,CANJ,mBAEM,OAFN,YAEM,CADJ,WAAQ,KAAA,QAAA,WAAA,CAAA,GAAA,KAAA,GAAA,IAAA,CAAA,CAAA,GAEV,mBAEM,OAFN,YAEM,CADJ,WAAQ,KAAA,QAAA,WAAA,CAAA,GAAA,KAAA,GAAA,IAAA,CAAA,CAAA,CAAA,CAAA,CAAA,GAAA,CAAA"}
+{"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\n/* As many decimals as the value itself has, unless `format` says otherwise.\n   Without this a count to 12480 passes through \"12,478.245\": Intl's default\n   is up to three places, and every frame in between is a fraction. */\nconst places = computed(() => {\n  if (format?.maximumFractionDigits !== undefined) return format.maximumFractionDigits\n  const [, decimals = ''] = String(value).split('.')\n  return decimals.length\n})\n\nconst text = (n: number) => {\n  const options = { maximumFractionDigits: places.value, ...format }\n  const rounded = Number(n.toFixed(places.value))\n\n  return locale === undefined\n    ? formatNumber(rounded, options)\n    : formatNumber(rounded, options, locale)\n}\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\n/* As many decimals as the value itself has, unless `format` says otherwise.\n   Without this a count to 12480 passes through \"12,478.245\": Intl's default\n   is up to three places, and every frame in between is a fraction. */\nconst places = computed(() => {\n  if (format?.maximumFractionDigits !== undefined) return format.maximumFractionDigits\n  const [, decimals = ''] = String(value).split('.')\n  return decimals.length\n})\n\nconst text = (n: number) => {\n  const options = { maximumFractionDigits: places.value, ...format }\n  const rounded = Number(n.toFixed(places.value))\n\n  return locale === undefined\n    ? formatNumber(rounded, options)\n    : formatNumber(rounded, options, locale)\n}\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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"}

package/dist/styles.css

@@ -863,7 +863,7 @@ to {
 }
 
 /* Tabular figures, so the number does not shake sideways as it counts. */
-.rk-count[data-v-3cefce6f] {
+.rk-count[data-v-8f5f0547] {
   font-variant-numeric: tabular-nums;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rei-kit",
-  "version": "2.3.1",
+  "version": "2.4.0",
   "description": "One kit, every look. 59 accessible Vue 3 + Tailwind 4 components, four materials (quiet, glass, brutal, soft) and ten WCAG-checked palettes, each switched with one attribute.",
   "keywords": [
     "vue",
@@ -96,7 +96,7 @@
     "lint": "run-s \"lint:*\"",
     "lint:oxlint": "oxlint . --fix",
     "lint:eslint": "eslint . --fix --cache",
-    "check": "run-s check:format check:lint type-check type-check:showcase test:ci build-only size",
+    "check": "run-s check:format check:lint type-check type-check:showcase type-check:strict test:ci build-only size",
     "check:format": "prettier --check src/ showcase/",
     "check:lint": "run-s check:lint:*",
     "check:lint:oxlint": "oxlint .",
@@ -106,7 +106,8 @@
     "palettes": "node scripts/build-palettes.mjs",
     "size": "node scripts/size.mjs",
     "palettes:check": "node scripts/build-palettes.mjs --check",
-    "type-check:showcase": "vue-tsc -p tsconfig.showcase.json --noEmit"
+    "type-check:showcase": "vue-tsc -p tsconfig.showcase.json --noEmit",
+    "type-check:strict": "vue-tsc -p tsconfig.strict.json --noEmit"
   },
   "peerDependencies": {
     "@supabase/supabase-js": "^2.0.0",

package/dist/GoogleButton-D82EoXSQ.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"GoogleButton-D82EoXSQ.js","names":["$slots","$attrs"],"sources":["../src/utils/sheet-root.ts","../src/utils/redirect.ts","../src/utils/haptics.ts","../src/composables/use-theme.ts","../src/composables/use-online.ts","../src/composables/use-visual-viewport.ts","../src/composables/use-toast.ts","../src/components/BaseAlert.vue","../src/components/BaseAlert.vue","../src/components/FormField.vue","../src/components/FormField.vue","../src/components/BaseInput.vue","../src/components/BaseInput.vue","../src/components/BaseSheet.vue","../src/components/BaseSheet.vue","../src/components/BaseCheckbox.vue","../src/components/BaseCheckbox.vue","../src/components/GoogleButton.vue","../src/components/GoogleButton.vue"],"sourcesContent":["/** The node every sheet teleports into. */\nexport const SHEET_ROOT_ID = 'sheet-root'\n\n/**\n * Returns the sheet root, creating it if the page has none.\n *\n * `BaseSheet` teleports out of the app's tree so the app behind it can be\n * marked `inert` — a sheet inside the element it is disabling would disable\n * itself. That means it needs a mount point outside `#app`.\n *\n * It used to need the consuming app to put `<div id=\"sheet-root\">` in its\n * `index.html`, and nothing said so. A page without it got a sheet that opened,\n * blocked the page, and rendered nothing: Vue warns to the console about a\n * missing teleport target and carries on, so the build is green, the types are\n * fine, and the screen is wrong. The kit's own showcase had exactly that bug,\n * which is how it was found.\n *\n * So the node is made on demand. An app that already declares one keeps it —\n * this only fills a gap, it never replaces.\n */\nexport function ensureSheetRoot(): string {\n  const selector = `#${SHEET_ROOT_ID}`\n\n  // Server-rendered: there is no document, and Teleport is skipped anyway.\n  if (typeof document === 'undefined') return selector\n  if (document.getElementById(SHEET_ROOT_ID)) return selector\n\n  const root = document.createElement('div')\n  root.id = SHEET_ROOT_ID\n  document.body.appendChild(root)\n\n  return selector\n}\n","/**\n * What a router hands back for one query key.\n *\n * Inlined rather than imported from vue-router: the shape is `string | null`\n * either way, and a helper this small should not drag a router into the\n * package's dependencies.\n */\nexport type QueryValue = string | null\n\n/**\n * Resolves a `?redirect=` query value into a safe in-app path.\n *\n * Only same-origin paths are accepted. Anything else falls back to `/`,\n * so a crafted link cannot bounce a user from the real login page to a\n * phishing clone.\n *\n * Pure: takes the query value instead of reading the router, so it also\n * works inside navigation guards and can be unit tested.\n *\n * @param target - Raw `route.query.redirect` value. May be a string, an\n *   array (repeated query key), `null`, or `undefined`.\n * @returns A path starting with a single `/`. Defaults to `/`.\n *\n * @example\n * ```ts\n * // in a view\n * await router.push(safeRedirect(route.query.redirect))\n *\n * // in a guard\n * return safeRedirect(to.query.redirect)\n * ```\n *\n * @example\n * ```ts\n * safeRedirect('/week')              // '/week'\n * safeRedirect('https://evil.com')   // '/'\n * safeRedirect('//evil.com')         // '/'  (protocol-relative URL)\n * safeRedirect(['/a', '/b'])         // '/'\n * safeRedirect(undefined)            // '/'\n * ```\n */\nexport function safeRedirect(target: QueryValue | QueryValue[] | undefined): string {\n  if (typeof target === 'string' && target.startsWith('/') && !target.startsWith('//')) {\n    return target\n  }\n\n  return '/'\n}\n\n/**\n * Where to send somebody back to after signing in, without the fragment.\n *\n * Supabase's implicit OAuth flow hands the browser back with the access and\n * refresh tokens in the URL fragment. A fragment is client-side only — it is\n * never sent to a server. Copied into a query parameter it stops being one:\n * `/login?redirect=/%23access_token=…` is sent on the very next request and\n * lands in the host's access logs, in `Referer` headers and in browser history.\n *\n * So the redirect keeps the path and the query and drops everything from the\n * `#`. There is nothing after it worth returning to anyway.\n *\n * One of the two phone apps had this and the other was passing `fullPath`\n * straight through, which is the leak above with nothing in the way of it. That\n * is the shape of bug a shared kit exists to end: it was fixed once, in the app\n * whose author happened to think of it.\n *\n * @example\n * ```ts\n * toRedirectPath('/ledger?direction=out')  // '/ledger?direction=out'\n * toRedirectPath('/#access_token=abc')     // '/'\n * ```\n */\nexport function toRedirectPath(fullPath: string): string {\n  const [path] = fullPath.split('#')\n\n  return path === undefined || path === '' ? '/' : path\n}\n","/**\n * A short vibration for a confirmed tap.\n *\n * Optional chaining is not decoration: iOS Safari has no `vibrate` at all, and\n * calling it unguarded would throw on every marked day.\n *\n * @param duration - Milliseconds. Keep it under ~15ms; longer reads as an alert.\n */\nexport function tapFeedback(duration = 10): void {\n  navigator.vibrate?.(duration)\n}\n","import { ref, watch } from 'vue'\nimport type { Ref } from 'vue'\n\n/** What the user asked for; `system` follows the OS. */\nexport type ThemePreference = 'system' | 'light' | 'dark'\n\n/**\n * Namespaced by the app, not by this package.\n *\n * Two rei-kit apps served from the same origin would otherwise share one theme\n * setting — and during development on localhost, they will be.\n */\nlet storageKey = 'rei-theme'\n\nexport function isThemePreference(value: unknown): value is ThemePreference {\n  return value === 'system' || value === 'light' || value === 'dark'\n}\n\n/** Reads the stored preference, falling back to `system`. */\nexport function readStoredTheme(): ThemePreference {\n  try {\n    const stored = localStorage.getItem(storageKey)\n\n    return isThemePreference(stored) ? stored : 'system'\n  } catch {\n    return 'system'\n  }\n}\n\nfunction storeTheme(preference: ThemePreference): void {\n  try {\n    localStorage.setItem(storageKey, preference)\n  } catch {\n    // Private mode or blocked storage: the choice just will not persist.\n  }\n}\n\n/**\n * Does the environment prefer a dark scheme?\n *\n * `matchMedia` is checked for on its own rather than inferred from `document`.\n * Having one does not imply having the other: jsdom supplies a document and no\n * `matchMedia`, so a consumer's component test that so much as mounts something\n * calling `useTheme` threw — and some embedded webviews are the same. Where\n * there is nothing to ask, the answer is no rather than an exception.\n */\nfunction prefersDarkScheme(): boolean {\n  return typeof window !== 'undefined' && typeof window.matchMedia === 'function'\n    ? window.matchMedia('(prefers-color-scheme: dark)').matches\n    : false\n}\n\n/**\n * Adds or removes `.dark` on `<html>`, resolving `system` against the OS.\n *\n * A no-op without a document. There is no OS preference to read on a server and\n * no `<html>` to write to, so a prerender leaves the class off and the app\n * decides the theme before hydration — see the note in the README.\n */\nexport function applyTheme(preference: ThemePreference): void {\n  if (typeof document === 'undefined') return\n\n  const isDark = preference === 'dark' || (preference === 'system' && prefersDarkScheme())\n\n  document.documentElement.classList.toggle('dark', isDark)\n}\n\n/**\n * The shared preference, created on first use rather than at import.\n *\n * Lazy on purpose: reading storage at import time would lock in the default key\n * before an app had a chance to set its own, leaving the controller reading one\n * key and writing another.\n */\nlet preference: Ref<ThemePreference> | null = null\n\nfunction controller(): Ref<ThemePreference> {\n  if (preference) return preference\n\n  preference = ref<ThemePreference>(readStoredTheme())\n\n  watch(\n    preference,\n    (next) => {\n      storeTheme(next)\n      applyTheme(next)\n    },\n    { immediate: true },\n  )\n\n  // While on `system`, follow the OS if the user flips it at night. Only where\n  // there is something to listen to; see `prefersDarkScheme`.\n  if (typeof window !== 'undefined' && typeof window.matchMedia === 'function') {\n    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {\n      if (preference?.value === 'system') applyTheme('system')\n    })\n  }\n\n  return preference\n}\n\n/**\n * Sets where the preference is stored.\n *\n * Safe in either order: called before the first `useTheme()` it simply changes\n * the key, and called after it re-reads under the new one, so the controller\n * never reads from one key while writing to another.\n *\n * @example\n * ```ts\n * setThemeStorageKey('hibi-theme')   // once, at startup\n * ```\n */\nexport function setThemeStorageKey(key: string): void {\n  storageKey = key\n  if (preference) preference.value = readStoredTheme()\n}\n\n/** @returns The shared preference ref; assigning to it stores and applies it. */\nexport function useTheme(): Ref<ThemePreference> {\n  return controller()\n}\n","import { onMounted, onUnmounted, readonly, ref } from 'vue'\n\n/**\n * Tracks whether the browser thinks it has a network connection.\n *\n * Note the limit: `navigator.onLine` only reports whether a network interface\n * is up, not whether requests actually succeed. Treat it as a hint for the UI,\n * never as a reason to skip error handling.\n *\n * Listeners are removed on unmount, so the composable is safe to call per view.\n *\n * @returns A readonly ref that flips with the browser's online/offline events.\n *\n * @example\n * ```ts\n * const isOnline = useOnline()\n * // <p v-if=\"!isOnline\">You're offline.</p>\n * ```\n */\nexport function useOnline() {\n  const isOnline = ref(true)\n\n  function update() {\n    isOnline.value = navigator.onLine\n  }\n\n  onMounted(() => {\n    update()\n    window.addEventListener('online', update)\n    window.addEventListener('offline', update)\n  })\n\n  onUnmounted(() => {\n    window.removeEventListener('online', update)\n    window.removeEventListener('offline', update)\n  })\n\n  return readonly(isOnline)\n}\n","import { onScopeDispose, readonly, ref } from 'vue'\n\n/** The visible area, once the on-screen keyboard has taken its share. */\nexport interface VisualViewportRect {\n  height: number\n  offsetTop: number\n}\n\n/**\n * Tracks the visual viewport.\n *\n * Chrome and Android browsers honour `interactive-widget=resizes-content`, so\n * the layout viewport already shrinks for the keyboard there. Safari on iOS\n * does not implement it: it shrinks only the *visual* viewport, leaving a sheet\n * sized in `dvh` sitting partly underneath the keyboard.\n *\n * `null` means the API is unavailable, which callers should read as \"trust the\n * layout viewport\" rather than as zero. A server has no viewport at all, so it\n * gets that same `null` — this runs during `setup`, and a component using it\n * has to survive being rendered there.\n *\n * @example\n * ```ts\n * const viewport = useVisualViewport()\n * // :style=\"viewport ? { height: `${viewport.height}px` } : undefined\"\n * ```\n */\nexport function useVisualViewport() {\n  const rect = ref<VisualViewportRect | null>(null)\n\n  const viewport = typeof window === 'undefined' ? undefined : window.visualViewport\n  if (!viewport) return readonly(rect)\n\n  function read() {\n    if (!viewport) return\n\n    rect.value = { height: viewport.height, offsetTop: viewport.offsetTop }\n  }\n\n  read()\n\n  // `scroll` matters as much as `resize`: iOS shifts the visual viewport up to\n  // keep the focused field visible, without changing its height.\n  viewport.addEventListener('resize', read)\n  viewport.addEventListener('scroll', read)\n\n  onScopeDispose(() => {\n    viewport.removeEventListener('resize', read)\n    viewport.removeEventListener('scroll', read)\n  })\n\n  return readonly(rect)\n}\n","import { readonly, ref } from 'vue'\n\n/**\n * Saying that something happened.\n *\n * The reason this exists is a measurement rather than a preference: the word\n * \"toast\" appeared **zero times** across all three consuming apps. Not because\n * they had decided against it — because there was no mechanism, so every save,\n * every delete and every export finished in silence and the only way to know\n * it had worked was that nothing had visibly broken.\n *\n * ── What is deliberately not here ──\n *\n * **No text.** The kit never knows a sentence. Callers pass the message; a\n * component that called a translator would force one on the app.\n *\n * **Not for form errors.** A field that was rejected says so beside itself,\n * where the reader's eye already is and where it stays until fixed. A toast\n * that disappears after four seconds is the wrong place for something the\n * reader has to act on. Use `BaseAlert` and `FormField` for those; use this\n * for what has already happened.\n *\n * **A singleton, on purpose.** Two hosts would mean two stacks racing for the\n * same corner. The store lives at module scope and `ToastHost` renders it.\n */\nexport type ToastTone = 'info' | 'success' | 'warning' | 'danger'\n\nexport interface Toast {\n  readonly id: number\n  readonly message: string\n  readonly tone: ToastTone\n  /** Milliseconds on screen. `0` stays until dismissed. */\n  readonly duration: number\n}\n\nexport interface ToastOptions {\n  /** Milliseconds on screen; `0` stays until dismissed. */\n  duration?: number | undefined\n}\n\n/**\n * Four seconds: long enough to read a short sentence twice, short enough that\n * a second action does not queue behind it.\n */\nconst DEFAULT_DURATION = 4000\n\n/**\n * A failure is read more slowly than a confirmation, and more often twice.\n */\nconst DANGER_DURATION = 7000\n\n/**\n * Three at once. A fourth pushes the oldest out rather than growing the stack\n * off the top of the screen — an action that produces ten toasts is a loop,\n * and a loop should not be able to cover the app it is running in.\n */\nconst MAX_VISIBLE = 3\n\nconst items = ref<Toast[]>([])\n\nlet nextId = 0\n\ninterface Countdown {\n  handle: ReturnType<typeof setTimeout>\n  remaining: number\n  startedAt: number\n}\n\nconst countdowns = new Map<number, Countdown>()\n\nfunction clearCountdown(id: number): void {\n  const countdown = countdowns.get(id)\n  if (countdown === undefined) return\n\n  clearTimeout(countdown.handle)\n  countdowns.delete(id)\n}\n\n/** Removes a toast, whether it timed out or was dismissed. */\nfunction dismiss(id: number): void {\n  clearCountdown(id)\n  items.value = items.value.filter((item) => item.id !== id)\n}\n\n/** Removes everything on screen. For a route change, or a sign-out. */\nfunction dismissAll(): void {\n  for (const id of countdowns.keys()) clearCountdown(id)\n  items.value = []\n}\n\nfunction arm(id: number, remaining: number): void {\n  // A timer is a browser thing. On a server there is nothing to time and\n  // nothing to see, and arming one would keep the process alive past the last\n  // page — which is how a prerender build hangs instead of finishing.\n  if (typeof window === 'undefined' || remaining <= 0) return\n\n  countdowns.set(id, {\n    handle: setTimeout(() => dismiss(id), remaining),\n    remaining,\n    startedAt: Date.now(),\n  })\n}\n\n/**\n * Stops the clock on a toast the reader is pointing at.\n *\n * Somebody who has moved the pointer onto it is reading it, and taking it away\n * mid-sentence is the one thing a notification must not do.\n */\nfunction pause(id: number): void {\n  const countdown = countdowns.get(id)\n  if (countdown === undefined) return\n\n  clearTimeout(countdown.handle)\n  countdowns.set(id, {\n    ...countdown,\n    remaining: Math.max(0, countdown.remaining - (Date.now() - countdown.startedAt)),\n  })\n}\n\n/** Starts it again, from where it stopped rather than from the beginning. */\nfunction resume(id: number): void {\n  const countdown = countdowns.get(id)\n  if (countdown === undefined) return\n\n  arm(id, countdown.remaining)\n}\n\nfunction push(tone: ToastTone, message: string, options: ToastOptions = {}): number {\n  const id = ++nextId\n  const duration = options.duration ?? (tone === 'danger' ? DANGER_DURATION : DEFAULT_DURATION)\n\n  const next = [...items.value, { id, message, tone, duration }]\n\n  while (next.length > MAX_VISIBLE) {\n    const oldest = next.shift()\n    if (oldest !== undefined) clearCountdown(oldest.id)\n  }\n\n  items.value = next\n  arm(id, duration)\n\n  return id\n}\n\n/**\n * The stack, and the four ways to add to it.\n *\n * @example\n * ```ts\n * const toast = useToast()\n *\n * toast.success(t('habit.saved'))\n * toast.danger(t('common.failed'), { duration: 0 })  // stays until dismissed\n *\n * const id = toast.info(t('export.preparing'), { duration: 0 })\n * toast.dismiss(id)\n * ```\n */\nexport function useToast() {\n  return {\n    /** Every toast on screen, oldest first. `ToastHost` renders this. */\n    toasts: readonly(items),\n    info: (message: string, options?: ToastOptions) => push('info', message, options),\n    success: (message: string, options?: ToastOptions) => push('success', message, options),\n    warning: (message: string, options?: ToastOptions) => push('warning', message, options),\n    danger: (message: string, options?: ToastOptions) => push('danger', message, options),\n    dismiss,\n    dismissAll,\n    pause,\n    resume,\n  }\n}\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\n/**\n * A message the reader has to take in before carrying on.\n *\n * Roles rather than colours, like everything else here: `info` is neutral,\n * `success` confirms, `warning` is a condition to know about, `danger` is\n * something that went wrong or is about to. A component that took a hex would\n * be a component that ignores the theme, and the theme is the whole reason the\n * kit exists.\n *\n * `assertive` decides how a screen reader treats it: a failed save interrupts,\n * a note about a form field waits its turn. Getting this wrong is invisible on\n * screen and rude in a screen reader, which is why it is a prop and not a\n * guess.\n */\nconst { tone = 'info', assertive = false } = defineProps<{\n  tone?: 'info' | 'success' | 'warning' | 'danger' | undefined\n  /** Announce immediately, interrupting. For failures the reader must act on. */\n  assertive?: boolean | undefined\n}>()\n\nconst TONES = {\n  info: 'border-hair bg-muted/40 text-ink',\n  success: 'border-positive/35 bg-positive/8 text-ink',\n  warning: 'border-warning/40 bg-warning/8 text-ink',\n  danger: 'border-negative/35 bg-negative/8 text-ink',\n} as const\n\nconst MARKS = {\n  info: 'bg-ink-soft/15 text-ink-soft',\n  success: 'bg-positive/15 text-positive',\n  warning: 'bg-warning/15 text-warning',\n  danger: 'bg-negative/15 text-negative',\n} as const\n\nconst skin = computed(() => TONES[tone])\nconst mark = computed(() => MARKS[tone])\n</script>\n\n<template>\n  <div\n    class=\"rounded-card flex items-start gap-3 border px-4 py-3.5 text-sm leading-relaxed\"\n    :class=\"skin\"\n    :role=\"assertive ? 'alert' : 'status'\"\n    :aria-live=\"assertive ? 'assertive' : 'polite'\"\n  >\n    <span\n      v-if=\"$slots.mark\"\n      class=\"mt-px grid size-6 shrink-0 place-items-center rounded-full text-xs font-semibold\"\n      :class=\"mark\"\n      aria-hidden=\"true\"\n    >\n      <slot name=\"mark\" />\n    </span>\n\n    <div class=\"min-w-0 flex-1\">\n      <p v-if=\"$slots.title\" class=\"text-ink font-semibold\">\n        <slot name=\"title\" />\n      </p>\n      <div :class=\"$slots.title ? 'mt-1' : ''\"><slot /></div>\n    </div>\n\n    <slot name=\"action\" />\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\n/**\n * A message the reader has to take in before carrying on.\n *\n * Roles rather than colours, like everything else here: `info` is neutral,\n * `success` confirms, `warning` is a condition to know about, `danger` is\n * something that went wrong or is about to. A component that took a hex would\n * be a component that ignores the theme, and the theme is the whole reason the\n * kit exists.\n *\n * `assertive` decides how a screen reader treats it: a failed save interrupts,\n * a note about a form field waits its turn. Getting this wrong is invisible on\n * screen and rude in a screen reader, which is why it is a prop and not a\n * guess.\n */\nconst { tone = 'info', assertive = false } = defineProps<{\n  tone?: 'info' | 'success' | 'warning' | 'danger' | undefined\n  /** Announce immediately, interrupting. For failures the reader must act on. */\n  assertive?: boolean | undefined\n}>()\n\nconst TONES = {\n  info: 'border-hair bg-muted/40 text-ink',\n  success: 'border-positive/35 bg-positive/8 text-ink',\n  warning: 'border-warning/40 bg-warning/8 text-ink',\n  danger: 'border-negative/35 bg-negative/8 text-ink',\n} as const\n\nconst MARKS = {\n  info: 'bg-ink-soft/15 text-ink-soft',\n  success: 'bg-positive/15 text-positive',\n  warning: 'bg-warning/15 text-warning',\n  danger: 'bg-negative/15 text-negative',\n} as const\n\nconst skin = computed(() => TONES[tone])\nconst mark = computed(() => MARKS[tone])\n</script>\n\n<template>\n  <div\n    class=\"rounded-card flex items-start gap-3 border px-4 py-3.5 text-sm leading-relaxed\"\n    :class=\"skin\"\n    :role=\"assertive ? 'alert' : 'status'\"\n    :aria-live=\"assertive ? 'assertive' : 'polite'\"\n  >\n    <span\n      v-if=\"$slots.mark\"\n      class=\"mt-px grid size-6 shrink-0 place-items-center rounded-full text-xs font-semibold\"\n      :class=\"mark\"\n      aria-hidden=\"true\"\n    >\n      <slot name=\"mark\" />\n    </span>\n\n    <div class=\"min-w-0 flex-1\">\n      <p v-if=\"$slots.title\" class=\"text-ink font-semibold\">\n        <slot name=\"title\" />\n      </p>\n      <div :class=\"$slots.title ? 'mt-1' : ''\"><slot /></div>\n    </div>\n\n    <slot name=\"action\" />\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, useId } from 'vue'\n\n/**\n * A label, a hint, an error, and the wiring between them.\n *\n * This was inside `BaseInput`, which is why the kit had one form control\n * instead of five. The hard part of a field is not the `<input>` — it is\n * generating an id, pointing the label at it, deciding whether the description\n * is the hint or the error, and telling assistive tech which one to read. That\n * is identical for a select, a textarea and an input, and every app that\n * needed one of the other two wrote the whole thing again.\n *\n * The control comes in through the slot and is handed what it needs to be\n * described. It is a slot rather than a prop so the field never has to know\n * what it is wrapping.\n *\n * @example\n * ```vue\n * <FormField :label=\"t('profile.name')\" :error=\"errors.name\">\n *   <template #default=\"{ id, describedBy, invalid }\">\n *     <input :id=\"id\" :aria-describedby=\"describedBy\" :aria-invalid=\"invalid\" />\n *   </template>\n * </FormField>\n * ```\n */\nconst {\n  label,\n  error = '',\n  hint = '',\n  labelHidden = false,\n  size = 'md',\n} = defineProps<{\n  label: string\n  error?: string | undefined\n  hint?: string | undefined\n  /**\n   * `sm` for a control that sits inside something else — a toolbar, a filter\n   * row, a settings line — rather than in a form of its own.\n   *\n   * It exists because every hand-written select in all three apps was the\n   * small one, and the kit only had the large one. A part is not reusable if\n   * reaching for it costs a size somebody chose on purpose.\n   */\n  size?: 'sm' | 'md' | undefined\n  /**\n   * Hides the label visually but keeps it for assistive tech. For fields whose\n   * surrounding row already names them — dropping the label entirely would\n   * leave the control with no accessible name at all.\n   */\n  labelHidden?: boolean | undefined\n}>()\n\nconst id = useId()\nconst errorId = `${id}-error`\nconst hintId = `${id}-hint`\n\n/* One description at a time, and the error wins. Announcing the hint as well\n   buries the reason the field was rejected under advice the reader has already\n   had. */\nconst describedBy = computed(() => {\n  if (error) return errorId\n  if (hint) return hintId\n  return undefined\n})\n</script>\n\n<template>\n  <div class=\"flex flex-col\" :class=\"size === 'sm' ? 'gap-1' : 'gap-1.5'\">\n    <label\n      :for=\"id\"\n      class=\"font-medium\"\n      :class=\"[\n        labelHidden ? 'sr-only' : '',\n        size === 'sm' ? 'text-ink-soft text-xs' : 'text-ink text-sm',\n      ]\"\n    >\n      {{ label }}\n    </label>\n\n    <slot :id=\"id\" :described-by=\"describedBy\" :invalid=\"Boolean(error)\" :size=\"size\" />\n\n    <p v-if=\"error\" :id=\"errorId\" class=\"text-negative text-xs\">{{ error }}</p>\n    <p v-else-if=\"hint\" :id=\"hintId\" class=\"text-ink-soft text-xs\">{{ hint }}</p>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, useId } from 'vue'\n\n/**\n * A label, a hint, an error, and the wiring between them.\n *\n * This was inside `BaseInput`, which is why the kit had one form control\n * instead of five. The hard part of a field is not the `<input>` — it is\n * generating an id, pointing the label at it, deciding whether the description\n * is the hint or the error, and telling assistive tech which one to read. That\n * is identical for a select, a textarea and an input, and every app that\n * needed one of the other two wrote the whole thing again.\n *\n * The control comes in through the slot and is handed what it needs to be\n * described. It is a slot rather than a prop so the field never has to know\n * what it is wrapping.\n *\n * @example\n * ```vue\n * <FormField :label=\"t('profile.name')\" :error=\"errors.name\">\n *   <template #default=\"{ id, describedBy, invalid }\">\n *     <input :id=\"id\" :aria-describedby=\"describedBy\" :aria-invalid=\"invalid\" />\n *   </template>\n * </FormField>\n * ```\n */\nconst {\n  label,\n  error = '',\n  hint = '',\n  labelHidden = false,\n  size = 'md',\n} = defineProps<{\n  label: string\n  error?: string | undefined\n  hint?: string | undefined\n  /**\n   * `sm` for a control that sits inside something else — a toolbar, a filter\n   * row, a settings line — rather than in a form of its own.\n   *\n   * It exists because every hand-written select in all three apps was the\n   * small one, and the kit only had the large one. A part is not reusable if\n   * reaching for it costs a size somebody chose on purpose.\n   */\n  size?: 'sm' | 'md' | undefined\n  /**\n   * Hides the label visually but keeps it for assistive tech. For fields whose\n   * surrounding row already names them — dropping the label entirely would\n   * leave the control with no accessible name at all.\n   */\n  labelHidden?: boolean | undefined\n}>()\n\nconst id = useId()\nconst errorId = `${id}-error`\nconst hintId = `${id}-hint`\n\n/* One description at a time, and the error wins. Announcing the hint as well\n   buries the reason the field was rejected under advice the reader has already\n   had. */\nconst describedBy = computed(() => {\n  if (error) return errorId\n  if (hint) return hintId\n  return undefined\n})\n</script>\n\n<template>\n  <div class=\"flex flex-col\" :class=\"size === 'sm' ? 'gap-1' : 'gap-1.5'\">\n    <label\n      :for=\"id\"\n      class=\"font-medium\"\n      :class=\"[\n        labelHidden ? 'sr-only' : '',\n        size === 'sm' ? 'text-ink-soft text-xs' : 'text-ink text-sm',\n      ]\"\n    >\n      {{ label }}\n    </label>\n\n    <slot :id=\"id\" :described-by=\"describedBy\" :invalid=\"Boolean(error)\" :size=\"size\" />\n\n    <p v-if=\"error\" :id=\"errorId\" class=\"text-negative text-xs\">{{ error }}</p>\n    <p v-else-if=\"hint\" :id=\"hintId\" class=\"text-ink-soft text-xs\">{{ hint }}</p>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport FormField from './FormField.vue'\n\ndefineOptions({ inheritAttrs: false })\n\nconst {\n  label,\n  error = '',\n  hint = '',\n  type = 'text',\n  labelHidden = false,\n  size = 'md',\n  variant = 'default',\n} = defineProps<{\n  label: string\n  error?: string | undefined\n  hint?: string | undefined\n  /**\n   * Hides the label visually but keeps it for assistive tech. For fields whose\n   * surrounding row already names them — dropping the label entirely would\n   * leave the input with no accessible name at all.\n   */\n  labelHidden?: boolean | undefined\n  /**\n   * Every type a text field can be, because the ones missing were the ones\n   * apps needed: `date` and `search` were hand-written three times each and\n   * `url` twice, in files that already imported this component.\n   */\n  type?:\n    | 'text'\n    | 'email'\n    | 'password'\n    | 'number'\n    | 'search'\n    | 'tel'\n    | 'url'\n    | 'date'\n    | 'time'\n    | 'datetime-local'\n    | undefined\n  /** `sm` for a field inside a row rather than in a form of its own. */\n  size?: 'sm' | 'md' | undefined\n  /**\n   * `unstyled` keeps the wiring and drops the surface.\n   *\n   * The label, the generated id, `aria-describedby` and the error are what a\n   * field is; the border and the height are what it looks like. A search box\n   * inside a bordered row, a url field in an editor popover — those places\n   * were hand-writing the whole thing to avoid the appearance, and losing the\n   * wiring with it.\n   *\n   * The same reasoning as `BaseButton`'s `unstyled`, and the same test: a\n   * primitive is finished when the app can take its behaviour without its\n   * paint.\n   */\n  variant?: 'default' | 'unstyled' | undefined\n}>()\n\n/* The control keeps 16px at every size, and that is not a rounding of the\n   scale — it is the rule. iOS zooms the viewport when a text field it is\n   focusing has a font-size under 16px, and the page never zooms back. Both\n   phone consumers had written `input { font-size: 16px }` into their base\n   layer to stop exactly this, and a `text-sm` utility from here would have\n   overridden it in every app at once.\n\n   So `size` reaches the label and the spacing, through FormField, and leaves\n   the typing target alone. `BaseSelect` is free to shrink: a select opens a\n   native picker rather than a caret, and does not trigger the zoom. */\nconst CONTROL_CLASS = 'h-11 text-base'\n\n/**\n * A number field's value is a number.\n *\n * Typed to `string` alone, `type=\"number\"` forced the caller to keep a string\n * ref and convert on both sides of it — and a component you have to wrap in\n * order to use is one you write yourself instead, which is exactly what the\n * first numeric field tried to reach for it did.\n */\nconst model = defineModel<string | number | undefined>()\n</script>\n\n<template>\n  <FormField :label=\"label\" :error=\"error\" :hint=\"hint\" :label-hidden=\"labelHidden\" :size=\"size\">\n    <template #default=\"{ id, describedBy, invalid }\">\n      <input\n        :id=\"id\"\n        v-model=\"model\"\n        :type=\"type\"\n        :aria-invalid=\"invalid\"\n        :aria-describedby=\"describedBy\"\n        v-bind=\"$attrs\"\n        :class=\"[\n          variant === 'unstyled'\n            ? ''\n            : 'control text-ink rounded-card focus-visible:outline-primary px-3 focus-visible:outline-2 focus-visible:outline-offset-1',\n          variant === 'unstyled' ? 'text-base' : CONTROL_CLASS,\n          variant !== 'unstyled' && invalid ? 'border-negative' : '',\n        ]\"\n      />\n    </template>\n  </FormField>\n</template>\n","<script setup lang=\"ts\">\nimport FormField from './FormField.vue'\n\ndefineOptions({ inheritAttrs: false })\n\nconst {\n  label,\n  error = '',\n  hint = '',\n  type = 'text',\n  labelHidden = false,\n  size = 'md',\n  variant = 'default',\n} = defineProps<{\n  label: string\n  error?: string | undefined\n  hint?: string | undefined\n  /**\n   * Hides the label visually but keeps it for assistive tech. For fields whose\n   * surrounding row already names them — dropping the label entirely would\n   * leave the input with no accessible name at all.\n   */\n  labelHidden?: boolean | undefined\n  /**\n   * Every type a text field can be, because the ones missing were the ones\n   * apps needed: `date` and `search` were hand-written three times each and\n   * `url` twice, in files that already imported this component.\n   */\n  type?:\n    | 'text'\n    | 'email'\n    | 'password'\n    | 'number'\n    | 'search'\n    | 'tel'\n    | 'url'\n    | 'date'\n    | 'time'\n    | 'datetime-local'\n    | undefined\n  /** `sm` for a field inside a row rather than in a form of its own. */\n  size?: 'sm' | 'md' | undefined\n  /**\n   * `unstyled` keeps the wiring and drops the surface.\n   *\n   * The label, the generated id, `aria-describedby` and the error are what a\n   * field is; the border and the height are what it looks like. A search box\n   * inside a bordered row, a url field in an editor popover — those places\n   * were hand-writing the whole thing to avoid the appearance, and losing the\n   * wiring with it.\n   *\n   * The same reasoning as `BaseButton`'s `unstyled`, and the same test: a\n   * primitive is finished when the app can take its behaviour without its\n   * paint.\n   */\n  variant?: 'default' | 'unstyled' | undefined\n}>()\n\n/* The control keeps 16px at every size, and that is not a rounding of the\n   scale — it is the rule. iOS zooms the viewport when a text field it is\n   focusing has a font-size under 16px, and the page never zooms back. Both\n   phone consumers had written `input { font-size: 16px }` into their base\n   layer to stop exactly this, and a `text-sm` utility from here would have\n   overridden it in every app at once.\n\n   So `size` reaches the label and the spacing, through FormField, and leaves\n   the typing target alone. `BaseSelect` is free to shrink: a select opens a\n   native picker rather than a caret, and does not trigger the zoom. */\nconst CONTROL_CLASS = 'h-11 text-base'\n\n/**\n * A number field's value is a number.\n *\n * Typed to `string` alone, `type=\"number\"` forced the caller to keep a string\n * ref and convert on both sides of it — and a component you have to wrap in\n * order to use is one you write yourself instead, which is exactly what the\n * first numeric field tried to reach for it did.\n */\nconst model = defineModel<string | number | undefined>()\n</script>\n\n<template>\n  <FormField :label=\"label\" :error=\"error\" :hint=\"hint\" :label-hidden=\"labelHidden\" :size=\"size\">\n    <template #default=\"{ id, describedBy, invalid }\">\n      <input\n        :id=\"id\"\n        v-model=\"model\"\n        :type=\"type\"\n        :aria-invalid=\"invalid\"\n        :aria-describedby=\"describedBy\"\n        v-bind=\"$attrs\"\n        :class=\"[\n          variant === 'unstyled'\n            ? ''\n            : 'control text-ink rounded-card focus-visible:outline-primary px-3 focus-visible:outline-2 focus-visible:outline-offset-1',\n          variant === 'unstyled' ? 'text-base' : CONTROL_CLASS,\n          variant !== 'unstyled' && invalid ? 'border-negative' : '',\n        ]\"\n      />\n    </template>\n  </FormField>\n</template>\n","<script setup lang=\"ts\">\nimport BaseButton from './BaseButton.vue'\nimport { computed, nextTick, onUnmounted, ref, watch } from 'vue'\nimport { X } from 'lucide-vue-next'\n\nimport { useVisualViewport } from '../composables/use-visual-viewport'\nimport { inertOutside } from '../utils/inert'\nimport { ensureSheetRoot } from '../utils/sheet-root'\n\nconst open = defineModel<boolean>({ required: true })\nconst {\n  title,\n  subtitle = '',\n  closeLabel = 'Close',\n} = defineProps<{\n  title: string\n  subtitle?: string | undefined\n  /**\n   * Accessible name for the close button.\n   *\n   * A prop rather than a translation: a component that calls t() forces every\n   * consumer onto one i18n setup, and this is the package's only visible string.\n   */\n  closeLabel?: string | undefined\n}>()\n\n/* Resolved in setup, before the first render, so the Teleport always has a\n   target to find. */\nconst sheetRoot = ensureSheetRoot()\n\nconst viewport = useVisualViewport()\n\n/**\n * Pins the sheet to the area the keyboard has left visible.\n *\n * Only needed where the layout viewport does not shrink on its own — iOS. On\n * Android the numbers already agree, so this is a no-op there rather than a\n * second, competing adjustment.\n */\nconst viewportStyle = computed(() =>\n  viewport.value\n    ? { height: `${viewport.value.height}px`, top: `${viewport.value.offsetTop}px` }\n    : undefined,\n)\n\nconst panel = ref<HTMLElement | null>(null)\nlet lastFocused: HTMLElement | null = null\n\nfunction close() {\n  open.value = false\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n  if (event.key === 'Escape') close()\n}\n\nwatch(open, async (isOpen) => {\n  if (isOpen) {\n    setBackgroundInert(true)\n    lastFocused = document.activeElement instanceof HTMLElement ? document.activeElement : null\n    window.addEventListener('keydown', onKeydown)\n    await nextTick()\n    panel.value?.focus()\n  } else {\n    window.removeEventListener('keydown', onKeydown)\n    // Released before focus is handed back: an inert element cannot take\n    // focus, so the other order quietly dropped it on the body.\n    setBackgroundInert(false)\n    lastFocused?.focus()\n    lastFocused = null\n  }\n})\n\n/* The whole page but the sheet root goes inert while this is open. Held per\n   sheet, so the unmount below can only release what this sheet took. */\nlet releaseInert: (() => void) | null = null\n\nfunction setBackgroundInert(isInert: boolean) {\n  releaseInert?.()\n  releaseInert = null\n\n  const root = isInert ? document.querySelector(sheetRoot) : null\n  if (root) releaseInert = inertOutside(root)\n}\n\nonUnmounted(() => {\n  window.removeEventListener('keydown', onKeydown)\n  // Unmounting while open would otherwise leave the whole app inert forever.\n  setBackgroundInert(false)\n})\n</script>\n\n<template>\n  <Teleport :to=\"sheetRoot\">\n    <Transition name=\"sheet\">\n      <div\n        v-if=\"open\"\n        class=\"fixed inset-x-0 top-0 bottom-0 z-50 flex items-center justify-center\"\n        :style=\"viewportStyle\"\n      >\n        <div\n          class=\"shell-frame md:rounded-shell relative flex max-h-full flex-col justify-end overflow-hidden\"\n        >\n          <div class=\"bg-ink/45 absolute inset-0 backdrop-blur-[2px]\" @click=\"close\" />\n\n          <!-- Header and footer stay put; only the slot scrolls. Sized in dvh so\n               the on-screen keyboard shrinks the sheet instead of pushing its\n               content out of reach. -->\n          <section\n            ref=\"panel\"\n            role=\"dialog\"\n            aria-modal=\"true\"\n            :aria-label=\"title\"\n            tabindex=\"-1\"\n            class=\"sheet-panel surface-overlay relative flex max-h-[94%] min-h-[56dvh] flex-col rounded-t-[28px] outline-none\"\n          >\n            <div class=\"flex shrink-0 justify-center pt-3\" aria-hidden=\"true\">\n              <span class=\"bg-hair h-1.5 w-10 rounded-full\" />\n            </div>\n\n            <header class=\"flex shrink-0 items-start gap-3 px-6 pt-4 pb-5\">\n              <div class=\"min-w-0 flex-1\">\n                <h2 class=\"text-ink text-xl leading-tight font-semibold\">{{ title }}</h2>\n                <p v-if=\"subtitle\" class=\"text-ink-soft mt-1 text-sm leading-snug\">\n                  {{ subtitle }}\n                </p>\n              </div>\n\n              <!-- `unstyled`, so the sheet keeps the exact button it had. What it\n                   gains is the focus ring it never had: this was a raw\n                   `<button>` with no `focus-visible` rule, so closing a sheet\n                   from the keyboard was invisible. -->\n              <BaseButton\n                variant=\"unstyled\"\n                class=\"text-ink-soft hover:bg-muted hover:text-ink -mt-1 flex size-10 shrink-0 items-center justify-center rounded-full transition-colors active:scale-90\"\n                :aria-label=\"closeLabel\"\n                @click=\"close\"\n              >\n                <X class=\"size-5\" />\n              </BaseButton>\n            </header>\n\n            <div\n              class=\"min-h-0 flex-1 overflow-y-auto px-6 pb-[calc(2rem+env(safe-area-inset-bottom,0px))]\"\n            >\n              <slot />\n            </div>\n          </section>\n        </div>\n      </div>\n    </Transition>\n  </Teleport>\n</template>\n\n<style scoped>\n.sheet-enter-active,\n.sheet-leave-active {\n  transition: opacity var(--duration-base) ease;\n}\n.sheet-enter-from,\n.sheet-leave-to {\n  opacity: 0;\n}\n\n/* The panel travels further than the scrim fades, which is what makes the\n   sheet read as rising rather than appearing. */\n.sheet-enter-active .sheet-panel,\n.sheet-leave-active .sheet-panel {\n  transition: transform var(--duration-slow) var(--ease-sheet);\n}\n.sheet-enter-from .sheet-panel,\n.sheet-leave-to .sheet-panel {\n  transform: translateY(6%);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .sheet-enter-from .sheet-panel,\n  .sheet-leave-to .sheet-panel {\n    transform: none;\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nimport BaseButton from './BaseButton.vue'\nimport { computed, nextTick, onUnmounted, ref, watch } from 'vue'\nimport { X } from 'lucide-vue-next'\n\nimport { useVisualViewport } from '../composables/use-visual-viewport'\nimport { inertOutside } from '../utils/inert'\nimport { ensureSheetRoot } from '../utils/sheet-root'\n\nconst open = defineModel<boolean>({ required: true })\nconst {\n  title,\n  subtitle = '',\n  closeLabel = 'Close',\n} = defineProps<{\n  title: string\n  subtitle?: string | undefined\n  /**\n   * Accessible name for the close button.\n   *\n   * A prop rather than a translation: a component that calls t() forces every\n   * consumer onto one i18n setup, and this is the package's only visible string.\n   */\n  closeLabel?: string | undefined\n}>()\n\n/* Resolved in setup, before the first render, so the Teleport always has a\n   target to find. */\nconst sheetRoot = ensureSheetRoot()\n\nconst viewport = useVisualViewport()\n\n/**\n * Pins the sheet to the area the keyboard has left visible.\n *\n * Only needed where the layout viewport does not shrink on its own — iOS. On\n * Android the numbers already agree, so this is a no-op there rather than a\n * second, competing adjustment.\n */\nconst viewportStyle = computed(() =>\n  viewport.value\n    ? { height: `${viewport.value.height}px`, top: `${viewport.value.offsetTop}px` }\n    : undefined,\n)\n\nconst panel = ref<HTMLElement | null>(null)\nlet lastFocused: HTMLElement | null = null\n\nfunction close() {\n  open.value = false\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n  if (event.key === 'Escape') close()\n}\n\nwatch(open, async (isOpen) => {\n  if (isOpen) {\n    setBackgroundInert(true)\n    lastFocused = document.activeElement instanceof HTMLElement ? document.activeElement : null\n    window.addEventListener('keydown', onKeydown)\n    await nextTick()\n    panel.value?.focus()\n  } else {\n    window.removeEventListener('keydown', onKeydown)\n    // Released before focus is handed back: an inert element cannot take\n    // focus, so the other order quietly dropped it on the body.\n    setBackgroundInert(false)\n    lastFocused?.focus()\n    lastFocused = null\n  }\n})\n\n/* The whole page but the sheet root goes inert while this is open. Held per\n   sheet, so the unmount below can only release what this sheet took. */\nlet releaseInert: (() => void) | null = null\n\nfunction setBackgroundInert(isInert: boolean) {\n  releaseInert?.()\n  releaseInert = null\n\n  const root = isInert ? document.querySelector(sheetRoot) : null\n  if (root) releaseInert = inertOutside(root)\n}\n\nonUnmounted(() => {\n  window.removeEventListener('keydown', onKeydown)\n  // Unmounting while open would otherwise leave the whole app inert forever.\n  setBackgroundInert(false)\n})\n</script>\n\n<template>\n  <Teleport :to=\"sheetRoot\">\n    <Transition name=\"sheet\">\n      <div\n        v-if=\"open\"\n        class=\"fixed inset-x-0 top-0 bottom-0 z-50 flex items-center justify-center\"\n        :style=\"viewportStyle\"\n      >\n        <div\n          class=\"shell-frame md:rounded-shell relative flex max-h-full flex-col justify-end overflow-hidden\"\n        >\n          <div class=\"bg-ink/45 absolute inset-0 backdrop-blur-[2px]\" @click=\"close\" />\n\n          <!-- Header and footer stay put; only the slot scrolls. Sized in dvh so\n               the on-screen keyboard shrinks the sheet instead of pushing its\n               content out of reach. -->\n          <section\n            ref=\"panel\"\n            role=\"dialog\"\n            aria-modal=\"true\"\n            :aria-label=\"title\"\n            tabindex=\"-1\"\n            class=\"sheet-panel surface-overlay relative flex max-h-[94%] min-h-[56dvh] flex-col rounded-t-[28px] outline-none\"\n          >\n            <div class=\"flex shrink-0 justify-center pt-3\" aria-hidden=\"true\">\n              <span class=\"bg-hair h-1.5 w-10 rounded-full\" />\n            </div>\n\n            <header class=\"flex shrink-0 items-start gap-3 px-6 pt-4 pb-5\">\n              <div class=\"min-w-0 flex-1\">\n                <h2 class=\"text-ink text-xl leading-tight font-semibold\">{{ title }}</h2>\n                <p v-if=\"subtitle\" class=\"text-ink-soft mt-1 text-sm leading-snug\">\n                  {{ subtitle }}\n                </p>\n              </div>\n\n              <!-- `unstyled`, so the sheet keeps the exact button it had. What it\n                   gains is the focus ring it never had: this was a raw\n                   `<button>` with no `focus-visible` rule, so closing a sheet\n                   from the keyboard was invisible. -->\n              <BaseButton\n                variant=\"unstyled\"\n                class=\"text-ink-soft hover:bg-muted hover:text-ink -mt-1 flex size-10 shrink-0 items-center justify-center rounded-full transition-colors active:scale-90\"\n                :aria-label=\"closeLabel\"\n                @click=\"close\"\n              >\n                <X class=\"size-5\" />\n              </BaseButton>\n            </header>\n\n            <div\n              class=\"min-h-0 flex-1 overflow-y-auto px-6 pb-[calc(2rem+env(safe-area-inset-bottom,0px))]\"\n            >\n              <slot />\n            </div>\n          </section>\n        </div>\n      </div>\n    </Transition>\n  </Teleport>\n</template>\n\n<style scoped>\n.sheet-enter-active,\n.sheet-leave-active {\n  transition: opacity var(--duration-base) ease;\n}\n.sheet-enter-from,\n.sheet-leave-to {\n  opacity: 0;\n}\n\n/* The panel travels further than the scrim fades, which is what makes the\n   sheet read as rising rather than appearing. */\n.sheet-enter-active .sheet-panel,\n.sheet-leave-active .sheet-panel {\n  transition: transform var(--duration-slow) var(--ease-sheet);\n}\n.sheet-enter-from .sheet-panel,\n.sheet-leave-to .sheet-panel {\n  transform: translateY(6%);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .sheet-enter-from .sheet-panel,\n  .sheet-leave-to .sheet-panel {\n    transform: none;\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, useId } from 'vue'\n\n/**\n * A single checkbox, with its label beside it.\n *\n * Deliberately not built on `FormField`. That component stacks a label above\n * its control, which is right for every field where the control is a box you\n * type into and wrong here: a checkbox is read as one sentence with a mark in\n * front of it, and putting the words above the box breaks the association a\n * sighted reader makes before they get to the accessible name.\n *\n * The whole row is the label, so the words are part of the hit target. On a\n * phone that is the difference between a control and a coin toss.\n */\nconst {\n  label,\n  error = '',\n  hint = '',\n  disabled = false,\n  size = 'md',\n} = defineProps<{\n  label: string\n  error?: string | undefined\n  hint?: string | undefined\n  disabled?: boolean | undefined\n  /**\n   * `md` is a setting: a line the reader came here to change, in ink.\n   * `sm` is an aside — \"remember me\" under a sign-in form, \"show the ones I\n   * have learned\" above a list — quieter and tighter.\n   *\n   * The two are not a guess. Of the five hand-written checkboxes across the\n   * three consuming apps, four were the aside and one was the setting, and\n   * they differed in exactly these two ways.\n   */\n  size?: 'sm' | 'md' | undefined\n}>()\n\nconst model = defineModel<boolean>({ default: false })\n\nconst id = useId()\nconst errorId = `${id}-error`\nconst hintId = `${id}-hint`\n\nconst describedBy = computed(() => {\n  if (error) return errorId\n  if (hint) return hintId\n  return undefined\n})\n</script>\n\n<template>\n  <div class=\"flex flex-col gap-1.5\">\n    <label\n      :for=\"id\"\n      class=\"flex items-center\"\n      :class=\"[size === 'sm' ? 'gap-2' : 'gap-3', disabled ? 'opacity-50' : 'cursor-pointer']\"\n    >\n      <input\n        :id=\"id\"\n        v-model=\"model\"\n        type=\"checkbox\"\n        :disabled=\"disabled\"\n        :aria-invalid=\"Boolean(error)\"\n        :aria-describedby=\"describedBy\"\n        class=\"accent-primary focus-visible:outline-primary size-4 shrink-0 focus-visible:outline-2 focus-visible:outline-offset-2\"\n      />\n      <span class=\"text-sm\" :class=\"size === 'sm' ? 'text-ink-soft' : 'text-ink'\">\n        {{ label }}\n      </span>\n    </label>\n\n    <p v-if=\"error\" :id=\"errorId\" class=\"text-negative text-xs\">{{ error }}</p>\n    <p v-else-if=\"hint\" :id=\"hintId\" class=\"text-ink-soft text-xs\">{{ hint }}</p>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, useId } from 'vue'\n\n/**\n * A single checkbox, with its label beside it.\n *\n * Deliberately not built on `FormField`. That component stacks a label above\n * its control, which is right for every field where the control is a box you\n * type into and wrong here: a checkbox is read as one sentence with a mark in\n * front of it, and putting the words above the box breaks the association a\n * sighted reader makes before they get to the accessible name.\n *\n * The whole row is the label, so the words are part of the hit target. On a\n * phone that is the difference between a control and a coin toss.\n */\nconst {\n  label,\n  error = '',\n  hint = '',\n  disabled = false,\n  size = 'md',\n} = defineProps<{\n  label: string\n  error?: string | undefined\n  hint?: string | undefined\n  disabled?: boolean | undefined\n  /**\n   * `md` is a setting: a line the reader came here to change, in ink.\n   * `sm` is an aside — \"remember me\" under a sign-in form, \"show the ones I\n   * have learned\" above a list — quieter and tighter.\n   *\n   * The two are not a guess. Of the five hand-written checkboxes across the\n   * three consuming apps, four were the aside and one was the setting, and\n   * they differed in exactly these two ways.\n   */\n  size?: 'sm' | 'md' | undefined\n}>()\n\nconst model = defineModel<boolean>({ default: false })\n\nconst id = useId()\nconst errorId = `${id}-error`\nconst hintId = `${id}-hint`\n\nconst describedBy = computed(() => {\n  if (error) return errorId\n  if (hint) return hintId\n  return undefined\n})\n</script>\n\n<template>\n  <div class=\"flex flex-col gap-1.5\">\n    <label\n      :for=\"id\"\n      class=\"flex items-center\"\n      :class=\"[size === 'sm' ? 'gap-2' : 'gap-3', disabled ? 'opacity-50' : 'cursor-pointer']\"\n    >\n      <input\n        :id=\"id\"\n        v-model=\"model\"\n        type=\"checkbox\"\n        :disabled=\"disabled\"\n        :aria-invalid=\"Boolean(error)\"\n        :aria-describedby=\"describedBy\"\n        class=\"accent-primary focus-visible:outline-primary size-4 shrink-0 focus-visible:outline-2 focus-visible:outline-offset-2\"\n      />\n      <span class=\"text-sm\" :class=\"size === 'sm' ? 'text-ink-soft' : 'text-ink'\">\n        {{ label }}\n      </span>\n    </label>\n\n    <p v-if=\"error\" :id=\"errorId\" class=\"text-negative text-xs\">{{ error }}</p>\n    <p v-else-if=\"hint\" :id=\"hintId\" class=\"text-ink-soft text-xs\">{{ hint }}</p>\n  </div>\n</template>\n","<script setup lang=\"ts\">\n/**\n * Sign in with Google, in Google's own clothes.\n *\n * The mark is inlined rather than themed, and that is not an oversight: Google's\n * brand guidelines require their colours, and a reader scanning for the button\n * they already know is scanning for those exact four. It is the one component\n * here that carries a colour value, and the reason is written on the path.\n */\nconst { label, disabled = false } = defineProps<{\n  label: string\n  /**\n   * Greyed out and unclickable while a sign-in is already in flight.\n   *\n   * A real prop rather than a fallthrough attribute: the button needs to look\n   * disabled as well as be it, and a bare `disabled` landing on the element by\n   * itself gets the second half only.\n   */\n  disabled?: boolean | undefined\n}>()\n\nconst emit = defineEmits<{ click: [] }>()\n</script>\n\n<template>\n  <button\n    type=\"button\"\n    :disabled=\"disabled\"\n    class=\"control text-ink rounded-card hover:bg-muted focus-ring flex h-11 w-full items-center justify-center gap-2 text-sm font-medium transition-colors duration-(--duration-fast) active:scale-(--press-scale) disabled:pointer-events-none disabled:opacity-50\"\n    @click=\"emit('click')\"\n  >\n    <!-- Google asks for its own mark, so it is inlined rather than themed. -->\n    <svg class=\"size-4\" viewBox=\"0 0 48 48\" aria-hidden=\"true\">\n      <path\n        fill=\"#EA4335\"\n        d=\"M24 9.5c3.5 0 6.6 1.2 9 3.6l6.7-6.7C35.6 2.7 30.2.5 24 .5 14.6.5 6.5 5.9 2.6 13.7l7.8 6.1C12.3 13.7 17.7 9.5 24 9.5z\"\n      />\n      <path\n        fill=\"#4285F4\"\n        d=\"M46.5 24.5c0-1.6-.1-3.1-.4-4.5H24v9h12.7c-.6 3-2.3 5.6-4.9 7.3l7.6 5.9c4.4-4.1 7.1-10.2 7.1-17.7z\"\n      />\n      <path\n        fill=\"#FBBC05\"\n        d=\"M10.4 28.2a14.6 14.6 0 0 1 0-8.4l-7.8-6.1a24 24 0 0 0 0 20.6l7.8-6.1z\"\n      />\n      <path\n        fill=\"#34A853\"\n        d=\"M24 47.5c6.2 0 11.5-2 15.4-5.6l-7.6-5.9c-2.1 1.4-4.8 2.3-7.8 2.3-6.3 0-11.7-4.2-13.6-10l-7.8 6.1C6.5 42.1 14.6 47.5 24 47.5z\"\n      />\n    </svg>\n    {{ label }}\n  </button>\n</template>\n","<script setup lang=\"ts\">\n/**\n * Sign in with Google, in Google's own clothes.\n *\n * The mark is inlined rather than themed, and that is not an oversight: Google's\n * brand guidelines require their colours, and a reader scanning for the button\n * they already know is scanning for those exact four. It is the one component\n * here that carries a colour value, and the reason is written on the path.\n */\nconst { label, disabled = false } = defineProps<{\n  label: string\n  /**\n   * Greyed out and unclickable while a sign-in is already in flight.\n   *\n   * A real prop rather than a fallthrough attribute: the button needs to look\n   * disabled as well as be it, and a bare `disabled` landing on the element by\n   * itself gets the second half only.\n   */\n  disabled?: boolean | undefined\n}>()\n\nconst emit = defineEmits<{ click: [] }>()\n</script>\n\n<template>\n  <button\n    type=\"button\"\n    :disabled=\"disabled\"\n    class=\"control text-ink rounded-card hover:bg-muted focus-ring flex h-11 w-full items-center justify-center gap-2 text-sm font-medium transition-colors duration-(--duration-fast) active:scale-(--press-scale) disabled:pointer-events-none disabled:opacity-50\"\n    @click=\"emit('click')\"\n  >\n    <!-- Google asks for its own mark, so it is inlined rather than themed. -->\n    <svg class=\"size-4\" viewBox=\"0 0 48 48\" aria-hidden=\"true\">\n      <path\n        fill=\"#EA4335\"\n        d=\"M24 9.5c3.5 0 6.6 1.2 9 3.6l6.7-6.7C35.6 2.7 30.2.5 24 .5 14.6.5 6.5 5.9 2.6 13.7l7.8 6.1C12.3 13.7 17.7 9.5 24 9.5z\"\n      />\n      <path\n        fill=\"#4285F4\"\n        d=\"M46.5 24.5c0-1.6-.1-3.1-.4-4.5H24v9h12.7c-.6 3-2.3 5.6-4.9 7.3l7.6 5.9c4.4-4.1 7.1-10.2 7.1-17.7z\"\n      />\n      <path\n        fill=\"#FBBC05\"\n        d=\"M10.4 28.2a14.6 14.6 0 0 1 0-8.4l-7.8-6.1a24 24 0 0 0 0 20.6l7.8-6.1z\"\n      />\n      <path\n        fill=\"#34A853\"\n        d=\"M24 47.5c6.2 0 11.5-2 15.4-5.6l-7.6-5.9c-2.1 1.4-4.8 2.3-7.8 2.3-6.3 0-11.7-4.2-13.6-10l-7.8 6.1C6.5 42.1 14.6 47.5 24 47.5z\"\n      />\n    </svg>\n    {{ label }}\n  </button>\n</template>\n"],"mappings":"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"}