rei-kit 2.1.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:
@@ -1237,32 +1391,32 @@ to {
   color: var(--color-ink-soft);
 }
 
-.rk-tabs[data-v-2a18b30e] {
+.rk-tabs[data-v-8135ecab] {
   display: flex;
   align-items: center;
   gap: 0.25rem;
   border-bottom: 1px solid color-mix(in srgb, var(--color-hair) 70%, transparent);
 }
-.rk-tab[data-v-2a18b30e] {
+.rk-tab[data-v-8135ecab] {
   position: relative;
   padding: 0.625rem 0.875rem;
   font-size: 0.875rem;
   color: var(--color-ink-soft);
   transition: color var(--duration-fast);
 }
-.rk-tab[data-v-2a18b30e]:hover {
+.rk-tab[data-v-8135ecab]:hover {
   color: var(--color-ink);
 }
-.rk-tab[data-v-2a18b30e]:focus-visible {
+.rk-tab[data-v-8135ecab]:focus-visible {
   outline: 2px solid var(--color-primary);
   outline-offset: -2px;
   border-radius: var(--radius-cell);
 }
-.rk-tab.is-active[data-v-2a18b30e] {
+.rk-tab.is-active[data-v-8135ecab] {
   color: var(--color-ink);
   font-weight: 500;
 }
-.rk-tab.is-active[data-v-2a18b30e]::after {
+.rk-tab.is-active[data-v-8135ecab]::after {
   content: '';
   position: absolute;
   inset-inline: 0.5rem;
@@ -1271,10 +1425,10 @@ to {
   border-radius: 9999px;
   background: var(--color-primary);
 }
-.rk-tabpanel[data-v-2a18b30e] {
+.rk-tabpanel[data-v-8135ecab] {
   padding-top: 1rem;
 }
-.rk-tabpanel[data-v-2a18b30e]:focus-visible {
+.rk-tabpanel[data-v-8135ecab]:focus-visible {
   outline: 2px solid var(--color-primary);
   outline-offset: 2px;
 }

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

@@ -0,0 +1,28 @@
+/* rei-kit, everything, for a wide site: a column with gutters and a page fade.
+ *
+ *   @import 'tailwindcss';
+ *   @import 'rei-kit/web.css';
+ *
+ * Two lines instead of seven, and the seven had a trap in them: Tailwind only
+ * builds classes it has seen, and it never looks in node_modules on its own,
+ * so every app had to write an `@source` with the right number of `../` for
+ * wherever its stylesheet happened to sit. Get it wrong and nothing fails —
+ * the components mount and render unstyled.
+ *
+ * Here the `@source` sits next to the files it points at, and Tailwind
+ * resolves it from this file, so it is right wherever the app is.
+ *
+ * Only the compiled JavaScript is scanned. The source maps and the type
+ * declarations mention classes too — in examples, in comments — and scanning
+ * them built rules no component uses.
+ *
+ * Want less? The parts are still importable one by one, and `mobile.css` is
+ * the same for a mobile app. Import one preset, never both. */
+@import './tokens.css';
+@import './shell/web.css';
+@import './materials.css';
+@import './palettes.css';
+@import './motion.css';
+@import './styles.css';
+
+@source './**/*.js';

package/dist/web.js

@@ -450,6 +450,7 @@ var BaseTabs_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 				onKeydown
 			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item) => {
 				return openBlock(), createElementBlock("button", {
+					id: tabId(item.key),
 					key: item.key,
 					ref_for: true,
 					ref_key: "tabs",
@@ -457,7 +458,6 @@ var BaseTabs_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 					type: "button",
 					role: "tab",
 					class: normalizeClass(["rk-tab", { "is-active": item.key === active.value }]),
-					id: tabId(item.key),
 					"aria-selected": item.key === active.value,
 					"aria-controls": panelId(item.key),
 					tabindex: item.key === active.value ? 0 : -1,
@@ -465,10 +465,10 @@ var BaseTabs_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 				}, toDisplayString(item.label), 11, _hoisted_2$2);
 			}), 128))], 40, _hoisted_1$2), (openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item) => {
 				return withDirectives((openBlock(), createElementBlock("div", {
+					id: panelId(item.key),
 					key: item.key,
 					role: "tabpanel",
 					class: "rk-tabpanel",
-					id: panelId(item.key),
 					"aria-labelledby": tabId(item.key),
 					tabindex: "0"
 				}, [renderSlot(_ctx.$slots, "default", {
@@ -478,7 +478,7 @@ var BaseTabs_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			}), 128))]);
 		};
 	}
-}), [["__scopeId", "data-v-2a18b30e"]]);
+}), [["__scopeId", "data-v-8135ecab"]]);
 //#endregion
 //#region src/web/BaseTooltip.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$1 = { class: "rk-tip" };