rei-kit 3.1.0 → 3.2.1

package/dist/motion/index.d.ts

@@ -6,21 +6,65 @@
  * asked for less motion, keeps assistive tech to the finished value, and
  * stops when hovered or focused if it moves on its own. The utilities that go
  * with them are in `rei-kit/motion.css`, which both presets include.
+ *
+ * @example
+ * ```vue
+ * <NumberTicker :value="balance" :format="{ style: 'currency', currency: 'TRY' }" />
+ * ```
+ *
+ * @see {@link CountUp} — the near-neighbour this is mistaken for
  */
 export { default as NumberTicker } from './NumberTicker.vue';
-/** A number that counts up to its value once it scrolls into view. */
+/**
+ * A number that counts up to its value once it scrolls into view.
+ *
+ * @example
+ * ```vue
+ * <CountUp :value="12480" />
+ * ```
+ *
+ * @see {@link NumberTicker} — the near-neighbour this is mistaken for
+ */
 export { default as CountUp } from './CountUp.vue';
 /**
  * One word in a sentence that changes on its own: "Build it *glass*", then
  * *brutal*, then *soft*.
+ *
+ * @example
+ * ```vue
+ * <h1>Build it <TextRotate :words="['glass', 'brutal', 'soft']" /></h1>
+ * ```
  */
 export { default as TextRotate } from './TextRotate.vue';
 /**
  * Text that types itself out, and — given several lines — deletes each one
  * and types the next.
+ *
+ * @example
+ * ```vue
+ * <TypeWriter :text="['Write it once.', 'Change the look.', 'Ship it.']" />
+ * ```
  */
 export { default as TypeWriter } from './TypeWriter.vue';
-/** Content that fades or rises into place as it scrolls into view. */
+/**
+ * Content that fades or rises into place as it scrolls into view.
+ *
+ * @example
+ * ```vue
+ * <BaseReveal v-for="(item, i) in items" :key="item" :delay="i * 80">
+ *   <BaseCard>{{ item }}</BaseCard>
+ * </BaseReveal>
+ * ```
+ */
 export { default as BaseReveal } from './BaseReveal.vue';
-/** A row that scrolls sideways without end: logos, testimonials, a ticker. */
+/**
+ * A row that scrolls sideways without end: logos, testimonials, a ticker.
+ *
+ * @example
+ * ```vue
+ * <BaseMarquee :duration="40">
+ *   <BaseBadge v-for="name in names" :key="name">{{ name }}</BaseBadge>
+ * </BaseMarquee>
+ * ```
+ */
 export { default as BaseMarquee } from './BaseMarquee.vue';

package/dist/motion.css

@@ -31,6 +31,15 @@
     }
   }
 
+  /* The trough is 0.88 and not lower, because it is a contrast floor rather
+     than a taste. Opacity fades an element toward whatever is behind it, so
+     a pulsing element is a different contrast ratio every frame and the
+     worst frame is the one that has to pass. At 0.72 — where this started —
+     `ink` over `canvas` measured 3.28 in tokyo-night, 3.50 in rose-pine and
+     3.63 in catppuccin, all below AA, and the browser audit caught it about
+     once in thirty runs depending on which frame axe happened to sample.
+     `motion.spec.ts` now checks every palette at this number instead of
+     leaving it to chance. */
   @keyframes rk-pulse-soft {
     0%,
     100% {
@@ -38,7 +47,7 @@
       transform: scale(1);
     }
     50% {
-      opacity: 0.72;
+      opacity: 0.88;
       transform: scale(0.97);
     }
   }

package/dist/pwa/index.d.ts

@@ -14,9 +14,49 @@ export { useSnooze } from './use-snooze';
 /**
  * The card that offers to install the app, and remembers being turned
  * down.
+ *
+ * @example
+ * ```vue
+ * <InstallPrompt
+ *   storage-key="my-app-install"
+ *   title="Install My app"
+ *   body="Open it from your home screen, even offline."
+ *   action="Install"
+ *   later="Not now"
+ * />
+ * ```
  */
 export { default as InstallPrompt } from './InstallPrompt.vue';
-/** The way back to installing after the card has been dismissed. */
+/**
+ * The way back to installing after the card has been dismissed.
+ *
+ * @example
+ * ```vue
+ * <InstallSettings
+ *   title="App"
+ *   label="Install on this device"
+ *   installed-label="Installed"
+ *   body="Opens from your home screen, works offline."
+ *   ios-body="Tap Share, then Add to Home Screen."
+ *   action="Install"
+ * />
+ * ```
+ */
 export { default as InstallSettings } from './InstallSettings.vue';
-/** The card that says a new version is waiting. */
+/**
+ * The card that says a new version is waiting.
+ *
+ * @example
+ * ```vue
+ * <UpdatePrompt
+ *   :open="needRefresh"
+ *   title="A new version is ready"
+ *   body="Reload to get it."
+ *   action="Reload"
+ *   dismiss-label="Later"
+ *   @update="reload"
+ *   @dismiss="needRefresh = false"
+ * />
+ * ```
+ */
 export { default as UpdatePrompt } from './UpdatePrompt.vue';

package/dist/styles.css

@@ -209,12 +209,12 @@
    cannot reach slot content, which belongs to the caller's scope, so
    `.tour-forward-*` and `.tour-backward-*` ship unscoped in
    `rei-kit/shell/mobile.css` where the caller's slide can actually see them. */
-.tour-enter-active[data-v-8c293eec],
-.tour-leave-active[data-v-8c293eec] {
+.tour-enter-active[data-v-8daef303],
+.tour-leave-active[data-v-8daef303] {
   transition: opacity var(--duration-base) ease;
 }
-.tour-enter-from[data-v-8c293eec],
-.tour-leave-to[data-v-8c293eec] {
+.tour-enter-from[data-v-8daef303],
+.tour-leave-to[data-v-8daef303] {
   opacity: 0;
 }
 
@@ -763,24 +763,24 @@
 /* The buttons are out of the Tab order: the keyboard already has the arrows,
    and three stops for one number is two too many. They stay reachable by
    pointer and by touch, which is who they are for. */
-.rk-number[data-v-082bd3d7] {
+.rk-number[data-v-d8a8fb7e] {
   display: flex;
   align-items: center;
   height: 2.75rem;
   border-radius: var(--radius-card);
   padding: 0 0.25rem;
 }
-.rk-number[data-v-082bd3d7]:focus-within {
+.rk-number[data-v-d8a8fb7e]:focus-within {
   outline: 2px solid var(--color-primary);
   outline-offset: 1px;
 }
-.rk-number.is-invalid[data-v-082bd3d7] {
+.rk-number.is-invalid[data-v-d8a8fb7e] {
   --surface-border-color: var(--color-negative);
 }
-.rk-number.is-disabled[data-v-082bd3d7] {
+.rk-number.is-disabled[data-v-d8a8fb7e] {
   opacity: 0.5;
 }
-.rk-number-field[data-v-082bd3d7] {
+.rk-number-field[data-v-d8a8fb7e] {
   min-width: 0;
   flex: 1;
   background: transparent;
@@ -790,7 +790,7 @@
   color: var(--color-ink);
   outline: none;
 }
-.rk-number-step[data-v-082bd3d7] {
+.rk-number-step[data-v-d8a8fb7e] {
   display: grid;
   width: 2.25rem;
   height: 2.25rem;
@@ -800,10 +800,10 @@
   color: var(--color-ink);
   transition: background-color var(--duration-fast) var(--ease-standard);
 }
-.rk-number-step[data-v-082bd3d7]:hover:not(:disabled) {
+.rk-number-step[data-v-d8a8fb7e]:hover:not(:disabled) {
   background: var(--color-muted);
 }
-.rk-number-step[data-v-082bd3d7]:disabled {
+.rk-number-step[data-v-d8a8fb7e]:disabled {
   opacity: 0.35;
 }
 
@@ -1769,7 +1769,7 @@ to {
   color: var(--color-ink-soft);
 }
 
-.rk-color-row[data-v-5ca23aa9] {
+.rk-color-row[data-v-721fcae8] {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
@@ -1779,7 +1779,7 @@ to {
 /* The well is what is seen; the input inside it is the whole target. A
    native colour input cannot be styled past its swatch in every browser, so
    it is stretched over a box that can be. */
-.rk-color-well[data-v-5ca23aa9] {
+.rk-color-well[data-v-721fcae8] {
   position: relative;
   display: block;
   width: 2.75rem;
@@ -1789,7 +1789,7 @@ to {
   border: 1px solid var(--color-hair);
   background: var(--rk-color);
 }
-.rk-color-native[data-v-5ca23aa9] {
+.rk-color-native[data-v-721fcae8] {
   position: absolute;
   inset: 0;
   width: 100%;
@@ -1799,14 +1799,14 @@ to {
 }
 
 /* The ring goes on the well, since the input it belongs to is invisible. */
-.rk-color-well[data-v-5ca23aa9]:has(.rk-color-native:focus-visible) {
+.rk-color-well[data-v-721fcae8]:has(.rk-color-native:focus-visible) {
   outline: 2px solid var(--color-primary);
   outline-offset: 2px;
 }
-.rk-color-native[data-v-5ca23aa9]:disabled {
+.rk-color-native[data-v-721fcae8]:disabled {
   cursor: not-allowed;
 }
-.rk-color-hex[data-v-5ca23aa9] {
+.rk-color-hex[data-v-721fcae8] {
   width: 7.5rem;
   height: 2.75rem;
   border-radius: var(--radius-card);
@@ -1817,19 +1817,19 @@ to {
   font-size: 1rem;
   color: var(--color-ink);
 }
-.rk-color-hex[data-v-5ca23aa9]:focus-visible {
+.rk-color-hex[data-v-721fcae8]:focus-visible {
   outline: 2px solid var(--color-primary);
   outline-offset: -1px;
 }
-.rk-color-hex[data-v-5ca23aa9]:disabled {
+.rk-color-hex[data-v-721fcae8]:disabled {
   opacity: 0.5;
 }
-.rk-color-swatches[data-v-5ca23aa9] {
+.rk-color-swatches[data-v-721fcae8] {
   display: flex;
   flex-wrap: wrap;
   gap: 0.375rem;
 }
-.rk-color-swatch[data-v-5ca23aa9] {
+.rk-color-swatch[data-v-721fcae8] {
   display: block;
   width: 1.75rem;
   height: 1.75rem;
@@ -1838,25 +1838,25 @@ to {
   background: var(--rk-color);
   transition: transform var(--duration-fast) var(--ease-standard);
 }
-.rk-color-swatch[data-v-5ca23aa9]:hover:not(:disabled) {
+.rk-color-swatch[data-v-721fcae8]:hover:not(:disabled) {
   transform: scale(1.1);
 }
 
 /* A ring around the chosen one rather than a tick: a tick has to be dark or
    light to be seen, and the swatch beneath it is whatever the app chose. */
-.rk-color-swatch.is-chosen[data-v-5ca23aa9] {
+.rk-color-swatch.is-chosen[data-v-721fcae8] {
   box-shadow:
     0 0 0 2px var(--color-surface),
     0 0 0 4px var(--color-primary);
 }
-.rk-color-swatch[data-v-5ca23aa9]:disabled {
+.rk-color-swatch[data-v-721fcae8]:disabled {
   opacity: 0.5;
 }
 @media (prefers-reduced-motion: reduce) {
-.rk-color-swatch[data-v-5ca23aa9] {
+.rk-color-swatch[data-v-721fcae8] {
     transition: none;
 }
-.rk-color-swatch[data-v-5ca23aa9]:hover:not(:disabled) {
+.rk-color-swatch[data-v-721fcae8]:hover:not(:disabled) {
     transform: none;
 }
 }
@@ -2054,7 +2054,7 @@ to {
   color: var(--color-ink);
 }
 
-.rk-tags[data-v-1fd08921] {
+.rk-tags[data-v-572364bd] {
   display: flex;
   min-height: 2.75rem;
   cursor: text;
@@ -2067,18 +2067,18 @@ to {
 
 /* `:has(input:focus-visible)` rather than `:focus-within`: the ring belongs
    to the field, not to the chips' remove buttons, which carry their own. */
-.rk-tags[data-v-1fd08921]:has(.rk-tags-field:focus-visible) {
+.rk-tags[data-v-572364bd]:has(.rk-tags-field:focus-visible) {
   outline: 2px solid var(--color-primary);
   outline-offset: 1px;
 }
-.rk-tags.is-invalid[data-v-1fd08921] {
+.rk-tags.is-invalid[data-v-572364bd] {
   --surface-border-color: var(--color-negative);
 }
-.rk-tags.is-disabled[data-v-1fd08921] {
+.rk-tags.is-disabled[data-v-572364bd] {
   cursor: not-allowed;
   opacity: 0.5;
 }
-.rk-tags-field[data-v-1fd08921] {
+.rk-tags-field[data-v-572364bd] {
   min-width: 6rem;
   flex: 1;
   background: transparent;
@@ -2138,10 +2138,10 @@ to {
   transform: translateY(4px) scale(0.98);
 }
 
-.rk-time[data-v-ad58b4f3] {
+.rk-time[data-v-2ae98769] {
   display: block;
 }
-.rk-time-field[data-v-ad58b4f3] {
+.rk-time-field[data-v-2ae98769] {
   display: flex;
   width: 100%;
   height: 2.75rem;
@@ -2154,16 +2154,16 @@ to {
   font-variant-numeric: tabular-nums;
   color: var(--color-ink);
 }
-.rk-time-field.is-empty[data-v-ad58b4f3] {
+.rk-time-field.is-empty[data-v-2ae98769] {
   color: var(--color-ink-soft);
 }
-.rk-time-field.is-invalid[data-v-ad58b4f3] {
+.rk-time-field.is-invalid[data-v-2ae98769] {
   --surface-border-color: var(--color-negative);
 }
-.rk-time-field[data-v-ad58b4f3]:disabled {
+.rk-time-field[data-v-2ae98769]:disabled {
   opacity: 0.5;
 }
-.rk-time-columns[data-v-ad58b4f3] {
+.rk-time-columns[data-v-2ae98769] {
   display: grid;
   grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
   gap: 0.5rem;
@@ -2232,16 +2232,16 @@ to {
   margin-top: 0.5rem;
 }
 
-.rk-date[data-v-42390973] {
+.rk-date[data-v-2c91e3bb] {
   display: block;
 }
 
 /* Wider than a popover's default: a calendar and a column of presets side by
    side do not fit in 24rem, and the month title wraps in two. */
-.rk-date[data-v-42390973] .rk-popover-panel {
+.rk-date[data-v-2c91e3bb] .rk-popover-panel {
   max-width: min(34rem, calc(100vw - 1rem));
 }
-.rk-date-wrap[data-v-42390973] {
+.rk-date-wrap[data-v-2c91e3bb] {
   display: flex;
   width: 100%;
   height: 2.75rem;
@@ -2249,7 +2249,7 @@ to {
   border-radius: var(--radius-card);
   padding-inline-end: 0.375rem;
 }
-.rk-date-field[data-v-42390973] {
+.rk-date-field[data-v-2c91e3bb] {
   display: flex;
   min-width: 0;
   flex: 1;
@@ -2262,16 +2262,16 @@ to {
   font-size: 1rem;
   color: var(--color-ink);
 }
-.rk-date-field.is-empty[data-v-42390973] {
+.rk-date-field.is-empty[data-v-2c91e3bb] {
   color: var(--color-ink-soft);
 }
-.rk-date-wrap.is-invalid[data-v-42390973] {
+.rk-date-wrap.is-invalid[data-v-2c91e3bb] {
   --surface-border-color: var(--color-negative);
 }
-.rk-date-field[data-v-42390973]:disabled {
+.rk-date-field[data-v-2c91e3bb]:disabled {
   opacity: 0.5;
 }
-.rk-date-clear[data-v-42390973] {
+.rk-date-clear[data-v-2c91e3bb] {
   display: grid;
   width: 1.375rem;
   height: 1.375rem;
@@ -2280,27 +2280,27 @@ to {
   border-radius: 9999px;
   color: var(--color-ink-soft);
 }
-.rk-date-clear[data-v-42390973]:hover {
+.rk-date-clear[data-v-2c91e3bb]:hover {
   background: var(--color-muted);
   color: var(--color-ink);
 }
-.rk-date-clear[data-v-42390973]:focus-visible {
+.rk-date-clear[data-v-2c91e3bb]:focus-visible {
   outline: 2px solid var(--color-primary);
   outline-offset: 1px;
 }
 
 /* As wide as its contents rather than as narrow as they will go: in a flex
    panel the calendar shrinks, and a squeezed month title wraps in two. */
-.rk-date-panel[data-v-42390973] {
+.rk-date-panel[data-v-2c91e3bb] {
   display: flex;
   width: max-content;
   max-width: 100%;
   gap: 0.75rem;
 }
-.rk-date-panel[data-v-42390973] .rk-cal {
+.rk-date-panel[data-v-2c91e3bb] .rk-cal {
   width: 17rem;
 }
-.rk-date-presets[data-v-42390973] {
+.rk-date-presets[data-v-2c91e3bb] {
   display: flex;
   min-width: 8rem;
   flex-direction: column;
@@ -2308,7 +2308,7 @@ to {
   border-inline-end: 1px solid var(--surface-border-color);
   padding-inline-end: 0.75rem;
 }
-.rk-date-preset[data-v-42390973] {
+.rk-date-preset[data-v-2c91e3bb] {
   width: 100%;
   border-radius: var(--radius-cell);
   padding: 0.375rem 0.5rem;
@@ -2317,14 +2317,14 @@ to {
   color: var(--color-ink);
   transition: background-color var(--duration-fast) var(--ease-standard);
 }
-.rk-date-preset[data-v-42390973]:hover {
+.rk-date-preset[data-v-2c91e3bb]:hover {
   background: var(--color-muted);
 }
 @media (max-width: 30rem) {
-.rk-date-panel[data-v-42390973] {
+.rk-date-panel[data-v-2c91e3bb] {
     flex-direction: column;
 }
-.rk-date-presets[data-v-42390973] {
+.rk-date-presets[data-v-2c91e3bb] {
     flex-direction: row;
     flex-wrap: wrap;
     border-inline-end: 0;
@@ -2332,7 +2332,7 @@ to {
     padding-inline-end: 0;
     padding-bottom: 0.5rem;
 }
-.rk-date-preset[data-v-42390973] {
+.rk-date-preset[data-v-2c91e3bb] {
     width: auto;
 }
 }

package/dist/{use-announce-QN44Whqc.js → use-announce-D8SKsiqn.js}

@@ -489,7 +489,8 @@ var BaseInput_default = /* @__PURE__ */ defineComponent({
 		},
 		type: { default: "text" },
 		size: { default: "md" },
-		variant: { default: "default" }
+		variant: { default: "default" },
+		fieldId: { default: () => void 0 }
 	},
 	emits: ["update:modelValue"],
 	setup(__props, { emit: __emit }) {
@@ -538,6 +539,7 @@ var BaseInput_default = /* @__PURE__ */ defineComponent({
 		const model = useBoundValue(() => __props.modelValue, (value) => emit("update:modelValue", value));
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(FormField_default, {
+				"field-id": __props.fieldId,
 				class: normalizeClass(unref(fieldClass)),
 				style: normalizeStyle(unref(fieldStyle)),
 				label: __props.label,
@@ -573,6 +575,7 @@ var BaseInput_default = /* @__PURE__ */ defineComponent({
 				] }), null, 16, _hoisted_4)), [[vModelDynamic, unref(model)]])]),
 				_: 3
 			}, 8, [
+				"field-id",
 				"class",
 				"style",
 				"label",
@@ -655,4 +658,4 @@ function useAnnounce() {
 //#endregion
 export { toRedirectPath as _, useFieldAttrs as a, useToast as c, isThemePreference as d, readStoredTheme as f, safeRedirect as g, tapFeedback as h, BaseInput_default as i, useOnline as l, useTheme as m, useAnnounce as n, FormField_default as o, setThemeStorageKey as p, GoogleButton_default as r, BaseAlert_default as s, announce as t, applyTheme as u };
 
-//# sourceMappingURL=use-announce-QN44Whqc.js.map
+//# sourceMappingURL=use-announce-D8SKsiqn.js.map