rei-kit 2.2.0 → 2.3.0

package/dist/styles.css

@@ -832,6 +832,160 @@ to {
   inherits: false
 }
 
+/* A line height of its own, so a column is exactly one digit tall without
+   depending on `lh` units or on whatever line height the parent set. */
+.rk-ticker[data-v-e2db153c] {
+  display: inline-flex;
+  line-height: 1.15;
+  font-variant-numeric: tabular-nums;
+}
+.rk-ticker-track[data-v-e2db153c] {
+  display: inline-flex;
+  white-space: pre;
+}
+.rk-ticker-digit[data-v-e2db153c] {
+  display: inline-block;
+  height: 1.15em;
+  overflow: hidden;
+}
+
+/* Twice the slowest token: a roll is read, not glanced at. The small delay
+   per column, units first, is what makes it feel mechanical rather than
+   swapped. Both are tokens, so reduced motion takes them to zero. */
+.rk-ticker-strip[data-v-e2db153c] {
+  display: flex;
+  flex-direction: column;
+  transition: transform calc(var(--duration-slower) * 2) var(--ease-standard);
+  transition-delay: calc(var(--duration-fast) / 5 * (var(--rk-ticker-order) - 1));
+}
+.rk-ticker-strip > span[data-v-e2db153c] {
+  height: 1.15em;
+}
+
+/* Tabular figures, so the number does not shake sideways as it counts. */
+.rk-count[data-v-3cefce6f] {
+  font-variant-numeric: tabular-nums;
+}
+
+.rk-rotate[data-v-2ca5182f] {
+  display: inline-block;
+  vertical-align: bottom;
+}
+.rk-rotate-word[data-v-2ca5182f] {
+  display: inline-block;
+}
+.rk-rotate-enter-active[data-v-2ca5182f],
+.rk-rotate-leave-active[data-v-2ca5182f] {
+  transition:
+    opacity var(--duration-base) var(--ease-standard),
+    transform var(--duration-base) var(--ease-standard),
+    filter var(--duration-base) var(--ease-standard);
+}
+.rk-rotate-enter-from[data-v-2ca5182f] {
+  opacity: 0;
+  transform: translateY(40%);
+  filter: blur(4px);
+}
+.rk-rotate-leave-to[data-v-2ca5182f] {
+  opacity: 0;
+  transform: translateY(-40%);
+  filter: blur(4px);
+}
+
+.rk-type[data-v-05f176ab] {
+  white-space: pre-wrap;
+}
+
+/* A bar the height of the text, in its colour. */
+.rk-type-cursor[data-v-05f176ab] {
+  display: inline-block;
+  width: 0.08em;
+  height: 1em;
+  margin-left: 0.06em;
+  vertical-align: -0.12em;
+  background: currentColor;
+  animation: rk-type-blink-05f176ab 1s steps(1) infinite;
+}
+@keyframes rk-type-blink-05f176ab {
+50% {
+    opacity: 0;
+}
+}
+@media (prefers-reduced-motion: reduce) {
+.rk-type-cursor[data-v-05f176ab] {
+    animation: none;
+}
+}
+
+.rk-reveal[data-v-c8b25508] {
+  transition:
+    opacity var(--duration-slower) var(--ease-standard),
+    transform var(--duration-slower) var(--ease-standard);
+  transition-delay: var(--rk-reveal-delay);
+}
+
+/* Hiding is instant; only arriving is animated. Otherwise an item leaving the
+   screen would fade out where nobody is looking and waste the frames. */
+.rk-reveal.is-hidden[data-v-c8b25508] {
+  opacity: 0;
+  transition-duration: 0s;
+  transition-delay: 0s;
+}
+.rk-reveal-rise.is-hidden[data-v-c8b25508] {
+  transform: translateY(1rem);
+}
+.rk-reveal-scale.is-hidden[data-v-c8b25508] {
+  transform: scale(0.96);
+}
+
+.rk-marquee[data-v-9a25b43d] {
+  display: flex;
+  overflow: hidden;
+}
+.rk-marquee.is-faded[data-v-9a25b43d] {
+  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
+}
+.rk-marquee-track[data-v-9a25b43d] {
+  display: flex;
+  width: max-content;
+  animation: rk-marquee-9a25b43d var(--rk-marquee-duration) linear infinite;
+}
+.rk-marquee.is-reverse .rk-marquee-track[data-v-9a25b43d] {
+  animation-direction: reverse;
+}
+.rk-marquee.is-paused .rk-marquee-track[data-v-9a25b43d],
+.rk-marquee:hover .rk-marquee-track[data-v-9a25b43d],
+.rk-marquee:focus-within .rk-marquee-track[data-v-9a25b43d] {
+  animation-play-state: paused;
+}
+
+/* Each group ends in the gap, so moving by exactly half the track lands the
+   second copy where the first began. */
+.rk-marquee-group[data-v-9a25b43d] {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: var(--rk-marquee-gap);
+  padding-inline-end: var(--rk-marquee-gap);
+}
+@keyframes rk-marquee-9a25b43d {
+to {
+    transform: translateX(-50%);
+}
+}
+@media (prefers-reduced-motion: reduce) {
+.rk-marquee[data-v-9a25b43d] {
+    overflow-x: auto;
+    mask-image: none;
+}
+.rk-marquee-track[data-v-9a25b43d] {
+    animation: none;
+}
+.rk-marquee-group[aria-hidden='true'][data-v-9a25b43d] {
+    display: none;
+}
+}
+
 .install-enter-active[data-v-552a4ac9],
 .install-leave-active[data-v-552a4ac9] {
   transition:

package/dist/utils/format.d.ts

@@ -22,3 +22,19 @@ export declare function setFormatLocale(next: string): void;
  * ```
  */
 export declare function formatDate(date: Date, options: Intl.DateTimeFormatOptions): string;
+/**
+ * Formats a number in the active locale, or in `tag` when one is given.
+ *
+ * The same cache and the same locale as `formatDate`, so a counter and the
+ * date beside it change language together.
+ *
+ * @param value - Number to format.
+ * @param options - Passed straight to `Intl.NumberFormat`: currency, percent, decimals.
+ * @param tag - A BCP 47 tag that overrides the active locale for this call.
+ *
+ * @example
+ * ```ts
+ * formatNumber(48200, { style: 'currency', currency: 'JPY' }) // '¥48,200'
+ * ```
+ */
+export declare function formatNumber(value: number, options?: Intl.NumberFormatOptions, tag?: string): string;

package/dist/web.css

@@ -22,6 +22,7 @@
 @import './shell/web.css';
 @import './materials.css';
 @import './palettes.css';
+@import './motion.css';
 @import './styles.css';
 
 @source './**/*.js';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "rei-kit",
-  "version": "2.2.0",
-  "description": "One kit, every look. 53 accessible Vue 3 + Tailwind 4 components, four materials (quiet, glass, brutal, soft) and ten WCAG-checked palettes, each switched with one attribute.",
+  "version": "2.3.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",
     "vue3",
@@ -58,6 +58,7 @@
     "./materials/brutal.css": "./dist/materials/brutal.css",
     "./materials/soft.css": "./dist/materials/soft.css",
     "./palettes.css": "./dist/palettes.css",
+    "./motion.css": "./dist/motion.css",
     "./app": {
       "types": "./dist/app/index.d.ts",
       "import": "./dist/app.js"
@@ -70,6 +71,10 @@
       "types": "./dist/pwa/index.d.ts",
       "import": "./dist/pwa.js"
     },
+    "./motion": {
+      "types": "./dist/motion/index.d.ts",
+      "import": "./dist/motion.js"
+    },
     "./supabase": {
       "types": "./dist/supabase/index.d.ts",
       "import": "./dist/supabase.js"