@leavepulse/ui 0.69.0 → 0.70.0

package/src/components/LpNumberField.vue

@@ -13,11 +13,11 @@ import {
   NumberFieldInput,
   NumberFieldRoot,
 } from "reka-ui"
-import { computed, useId } from "vue"
+import { computed, useAttrs, useId } from "vue"
 import LpIcon from "./LpIcon.vue"
-import { useFieldControl } from "../composables/useField"
+import { focusLeft, useFieldControl } from "../composables/useField"
 import { useLabels } from "../composables/useLpConfig"
-import { useMergedAttrs } from "../composables/useMergedClass"
+import { useMergedClass } from "../composables/useMergedClass"
 
 export interface NumberFieldLabels extends Record<string, string> {
   increase: string
@@ -30,7 +30,33 @@ const props = withDefaults(defineProps<{
   modelValue?: number | null
   min?: number
   max?: number
+  /**
+   * What the steppers and arrow keys add. A typed value is snapped to the
+   * nearest step from `min` (or 0) when it is committed, unless `stepSnapping`
+   * is false: then 0.37 stays 0.37 in a field that steps by 0.5.
+   */
   step?: number
+  stepSnapping?: boolean
+  /**
+   * How the value is shown and, with it, how far it is rounded: the field
+   * commits the number it displays, so `{ maximumFractionDigits: 0 }` makes it
+   * an integer field. Intl options, read in `locale` (the document's by default).
+   */
+  formatOptions?: Intl.NumberFormatOptions
+  locale?: string
+  /** Shown and focusable, not changed: typing, the steppers, arrows and the wheel all stop. */
+  readonly?: boolean
+  /** The wheel over a focused field steps the value unless this is set. */
+  disableWheelChange?: boolean
+  invertWheelChange?: boolean
+  /** A step from the buttons moves focus to the input (reka's default); false keeps it on the button. */
+  focusOnChange?: boolean
+  /**
+   * The − and + buttons. Off, the field is a plain numeric input; arrow keys
+   * still step. A field narrower than 8.5rem drops them by itself: two 32 px
+   * buttons left a 100 px column eleven pixels for the digits.
+   */
+  steppers?: boolean
   disabled?: boolean
   // The unit the number is in ("mm", "W", "mA"). It sits inside the field
   // rather than in the label, because a grid of bare boxes labelled "Width",
@@ -41,9 +67,15 @@ const props = withDefaults(defineProps<{
   /** Control height, matching LpInput. */
   size?: "sm" | "md" | "lg"
   labels?: Partial<NumberFieldLabels>
-}>(), { size: "md" })
+}>(), { size: "md", stepSnapping: true, steppers: true, focusOnChange: true })
 
-defineEmits<{ (e: "update:modelValue", value: number | null): void }>()
+// The value is committed when the field loses focus or Enter is pressed, and on
+// every step, not on each keystroke: "1." or "-" is not a number yet, and a
+// model that followed the keys would flicker through them.
+const emit = defineEmits<{
+  (e: "update:modelValue", value: number | null): void
+  (e: "blur", event: FocusEvent): void
+}>()
 
 // The unit is described to the input rather than merely placed beside it: on
 // screen the two read as one field, and without this a reader announces "380"
@@ -64,15 +96,35 @@ const SIZE = {
   lg: "h-(--size-control-lg) text-sm",
 }
 
-const field = useFieldControl(() => ({ wrapped: false, invalid: props.invalid, disabled: props.disabled }))
+const attrs = useAttrs()
+const field = useFieldControl(() => ({
+  wrapped: false,
+  id: typeof attrs.id === "string" ? attrs.id : undefined,
+  invalid: props.invalid,
+  disabled: props.disabled,
+}))
 const describedBy = computed(
   () => [field.value.describedBy, props.unit ? unitId : undefined].filter(Boolean).join(" ") || undefined,
 )
 
+// The frame takes the consumer's class and style, and `name` goes to reka's
+// hidden input, which submits the number itself rather than its formatted
+// text and carries `required` for the form's own check; every other attribute
+// (placeholder, name, aria-label, inputmode, listeners) belongs to the input,
+// which is what a form, a reader and a test reach for.
+const inputAttrs = computed(() => {
+  const { class: _c, style: _s, id: _i, name: _n, ...rest } = attrs
+  return rest
+})
+
+function onFocusOut(event: FocusEvent) {
+  if (focusLeft(event)) emit("blur", event)
+}
+
 // The field is full-width with its own control frame — the two things a consumer laying out a compact numeric column needs to change.
-const { class: rootClass, attrs: rest } = useMergedAttrs(() =>
+const rootClass = useMergedClass(() =>
   [
-    "flex w-full items-center rounded-control border bg-surface-soft transition-colors duration-[var(--duration-fast)] focus-within:ring-2 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-55",
+    "@container flex w-full items-center rounded-control border bg-surface-soft transition-colors duration-[var(--duration-fast)] focus-within:ring-2 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-55",
     SIZE[props.size],
     field.value.invalid
       ? "border-danger focus-within:border-danger focus-within:ring-danger-soft"
@@ -87,16 +139,26 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(() =>
     :min="min"
     :max="max"
     :step="step"
+    :step-snapping="stepSnapping"
+    :readonly="readonly"
+    :disable-wheel-change="disableWheelChange"
+    :invert-wheel-change="invertWheelChange"
+    :focus-on-change="focusOnChange"
+    :format-options="formatOptions"
+    :locale="locale"
     :disabled="field.disabled"
     :required="field.required"
     data-lp-ring-owner
     :class="rootClass"
-    v-bind="rest"
-    @update:model-value="(v) => $emit('update:modelValue', v ?? null)"
+    :style="attrs.style"
+    :name="typeof attrs.name === 'string' ? attrs.name : undefined"
+    @update:model-value="(v) => emit('update:modelValue', Number.isNaN(v) ? null : (v ?? null))"
+    @focusout="onFocusOut"
   >
     <NumberFieldDecrement
+      v-if="steppers"
       :aria-label="text.decrease"
-      class="group grid h-full w-8 place-items-center text-muted transition-colors duration-[var(--duration-fast)] hover:text-ink disabled:opacity-40"
+      class="group grid h-full w-8 shrink-0 place-items-center @max-[8.5rem]:hidden text-muted transition-colors duration-[var(--duration-fast)] hover:text-ink disabled:opacity-40"
     >
       <LpIcon
         name="lucide:minus"
@@ -105,18 +167,21 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(() =>
       />
     </NumberFieldDecrement>
     <NumberFieldInput
+      v-bind="inputAttrs"
       :id="field.id"
       :aria-describedby="describedBy"
       :aria-invalid="field.invalid || undefined"
-      class="min-w-0 flex-1 bg-transparent text-center text-ink outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none"
+      class="min-w-0 flex-1 bg-transparent text-ink outline-none placeholder:text-muted [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none"
+      :class="steppers ? 'text-center @max-[8.5rem]:px-3 @max-[8.5rem]:text-left' : 'px-3'"
     />
     <!-- The unit sits between the value and the increment button, so a long one
          narrows the field rather than covering the digits. Not focusable and
          not part of the value: it is read, never typed. -->
-    <span v-if="unit" :id="unitId" class="shrink-0 pr-1 text-xs text-muted">{{ unit }}</span>
+    <span v-if="unit" :id="unitId" class="shrink-0 pr-1 text-xs text-muted" :class="!steppers && 'pr-3'">{{ unit }}</span>
     <NumberFieldIncrement
+      v-if="steppers"
       :aria-label="text.increase"
-      class="group grid h-full w-8 place-items-center text-muted transition-colors duration-[var(--duration-fast)] hover:text-ink disabled:opacity-40"
+      class="group grid h-full w-8 shrink-0 place-items-center @max-[8.5rem]:hidden text-muted transition-colors duration-[var(--duration-fast)] hover:text-ink disabled:opacity-40"
     >
       <LpIcon
         name="lucide:plus"

package/src/components/LpNumberFlow.vue

@@ -28,7 +28,8 @@
  */
 import { computed, onBeforeUnmount, ref, watch } from "vue"
 import { easeOut, prefersReducedMotion } from "../composables/easing"
-import { useReveal } from "../composables/useReveal"
+import { useRevealedValue } from "../composables/useRevealedValue"
+import { compactNumber } from "./format"
 
 const props = withDefaults(
   defineProps<{
@@ -213,40 +214,14 @@ const travel = (to: number) => {
  * page is news, and it should roll whether or not it is in view — the reveal
  * governs the FIRST reading only.
  */
-const { el: revealAnchor, revealed } = useReveal({ immediate: () => !props.animateOnMount })
-
-watch(revealed, (visible) => {
-  if (visible && props.animateOnMount) travel(props.value)
-}, { immediate: true })
+const { el: revealAnchor, target } = useRevealedValue(() => props.value, {
+  animateOnMount: () => props.animateOnMount,
+  holdChanges: false,
+})
 
-watch(() => props.value, travel)
+watch(target, travel)
 onBeforeUnmount(stop)
 
-const UNITS = [
-  { limit: 1e9, suffix: "B" },
-  { limit: 1e6, suffix: "M" },
-  { limit: 1e3, suffix: "k" },
-] as const
-
-const scaleFor = (v: number) => {
-  const abs = Math.abs(v)
-  let at = UNITS.findIndex((u) => abs >= u.limit)
-  // 999 950 at one place reads "1000.0k"; that is the next unit up.
-  if (at > 0 && Math.abs(Number((v / UNITS[at].limit).toFixed(1))) >= 1000) at--
-  if (at === -1 && abs >= 999.5) at = UNITS.length - 1
-  const unit = UNITS[at]
-  if (!unit) return { divisor: 1, suffix: "", decimals: 0 }
-  // One decimal is what makes 1.2k readable; a value that lands exactly on the
-  // unit (5M) keeps none, matching how these are written by hand.
-  const scaled = v / unit.limit
-  return {
-    divisor: unit.limit,
-    suffix: unit.suffix,
-    decimals: Number.isInteger(scaled) ? 0 : 1,
-  }
-}
-
-
 const formatted = computed(() => formatAt(round(displayed.value), !settled.value))
 
 // Rounded first by the caller: every branch should render the shape the
@@ -264,10 +239,10 @@ function formatAt(v: number, padded: boolean): string {
      *
      * The decimal count is what stays fixed: one place whenever a unit is in
      * play, so the row's shape only changes at a rollover, not on every frame.
+     * No locale here: the cells below find the fraction by its ".", and a
+     * locale's "," would turn the fraction's columns into integer ones.
      */
-    const { divisor, suffix } = scaleFor(v)
-    const places = divisor === 1 ? 0 : 1
-    return `${(v / divisor).toFixed(places)}${suffix}`
+    return compactNumber(v, { plainDecimals: 0, fixed: true })
   }
   const pad = padded ? Math.max(1, padTo.value) : 1
   if (props.grouped)

package/src/components/LpOtpInput.vue

@@ -42,8 +42,12 @@ const props = withDefaults(
      * compared without regard to case; pass `false` for a case-sensitive code.
      */
     uppercase?: boolean
-    /** Draw a separator after every `group` cells (e.g. 3 for "123-456"). */
-    group?: number
+    /**
+     * Draw a separator after every `group` cells (e.g. 3 for "123-456"), or
+     * after blocks of the exact sizes given (`[4, 6, 5]`), as LpCodeDisplay's
+     * `groups` splits the printed code.
+     */
+    group?: number | number[]
     /** Error state — tints the cells red (e.g. wrong code). */
     invalid?: boolean
     size?: "sm" | "md" | "lg"
@@ -151,6 +155,7 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
     :type="alphanumeric ? 'text' : 'number'"
     :mask="mask"
     :disabled="field.disabled"
+    :required="field.required"
     otp
     :class="rootClass"
     v-bind="rest"

package/src/components/LpPagination.vue

@@ -18,11 +18,12 @@ export default { inheritAttrs: false }
  * motion-v's shared layoutId with zero list-animation conflicts.
  */
 import { Motion } from "motion-v"
-import { computed, useId } from "vue"
+import { computed, ref, useId } from "vue"
 import { usePillTransition } from "../composables/usePillTransition"
 import LpIcon from "./LpIcon.vue"
 import { useMergedAttrs } from "../composables/useMergedClass"
 import { useLabels } from "../composables/useLpConfig"
+import { useResizeObserver } from "../composables/useResizeObserver"
 
 const props = withDefaults(
   defineProps<{
@@ -73,10 +74,42 @@ const current = computed(() =>
 // stable as the user pages through.
 type Slot = { kind: "page"; page: number } | { kind: "gap" }
 
+// The row gives up siblings, down to none, when the room it is given is too
+// narrow for them: on a phone nine slots and two arrows ran past the screen.
+// The room is the parent's width, not the row's own, so dropping siblings
+// cannot make the row look wide enough to bring them back.
+const root = ref<HTMLElement | null>(null)
+const room = ref(Infinity)
+const slotWidth = ref(32)
+const gap = ref(6)
+function measure() {
+  const nav = root.value
+  if (!nav || !nav.children.length) return
+  gap.value = parseFloat(getComputedStyle(nav).columnGap) || 0
+  const items = nav.children.length
+  const used = [...nav.children].reduce((sum, el) => sum + (el as HTMLElement).offsetWidth, 0)
+  slotWidth.value = used / items
+}
+useResizeObserver(
+  () => root.value?.parentElement,
+  (entry) => {
+    measure()
+    if (entry) room.value = entry.contentRect.width
+  },
+)
+
+const siblings = computed(() => {
+  for (let n = props.siblings; n > 0; n--) {
+    const items = Math.min(n * 2 + 1 + 4, count.value) + 2
+    if (items * slotWidth.value + (items - 1) * gap.value <= room.value) return n
+  }
+  return 0
+})
+
 const slots = computed<Slot[]>(() => {
   const c = count.value
   const cur = current.value
-  const inner = props.siblings * 2 + 1 // pages shown around (and including) current
+  const inner = siblings.value * 2 + 1 // pages shown around (and including) current
   // Total = first + leftGap + inner + rightGap + last. Constant for a given
   // count, so the row width never changes as you page through.
   const total = inner + 4
@@ -88,8 +121,8 @@ const slots = computed<Slot[]>(() => {
 
   // Inner window [lo..hi] of length `inner`, clamped into [3 .. c-2] so there's
   // always a slot for first(1)+page 2 on the left and page c-1+last(c) on right.
-  let lo = cur - props.siblings
-  let hi = cur + props.siblings
+  let lo = cur - siblings.value
+  let hi = cur + siblings.value
   if (lo < 3) {
     hi += 3 - lo
     lo = 3
@@ -137,6 +170,7 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
 
 <template>
   <nav
+    ref="root"
     :class="rootClass"
     v-bind="rest" :aria-label="text.nav">
     <button

package/src/components/LpPalettePreview.vue

@@ -49,7 +49,8 @@ withDefaults(
 }
 .lp-palette-preview > * {
   min-width: 0;
-  animation: lp-palette-in 260ms var(--ease-emphasized, ease-out) both;
+  --rise: 4px;
+  animation: rise-in 260ms var(--ease-emphasized, ease-out) both;
 }
 .lp-palette-preview > :nth-child(2) {
   animation-delay: 40ms;
@@ -63,12 +64,6 @@ withDefaults(
 .lp-palette-preview > :nth-child(n + 5) {
   animation-delay: 160ms;
 }
-@keyframes lp-palette-in {
-  from {
-    opacity: 0;
-    transform: translateY(4px);
-  }
-}
 @media (prefers-reduced-motion: reduce) {
   .lp-palette-preview > * {
     animation: none;

package/src/components/LpPasswordInput.vue

@@ -10,10 +10,12 @@ export interface PasswordInputLabels extends Record<string, string> {
 <script setup lang="ts">
 // Password field = LpInput + a show/hide toggle in its trailing slot.
 // No duplicated field styling — the shell lives in LpInput.
+// LpSecretField's input form is this same field: it drives `visible` (to hide
+// again on a timer) and puts its copy button in `actions`.
 import { ref } from "vue"
 import { useLabels } from "../composables/useLpConfig"
-import LpIcon from "./LpIcon.vue"
 import LpInput from "./LpInput.vue"
+import RevealToggle from "./RevealToggle.vue"
 
 const props = defineProps<{
   modelValue?: string
@@ -31,13 +33,14 @@ const props = defineProps<{
   labels?: Partial<PasswordInputLabels>
 }>()
 defineEmits<{ (e: "update:modelValue", value: string): void }>()
+/** Whether the text shows; bind it to reveal or hide from outside. */
+const visible = defineModel<boolean>("visible", { default: false })
 
 const text = useLabels<PasswordInputLabels>(
   "passwordInput",
   { show: "Show password", hide: "Hide password" },
   () => props.labels,
 )
-const visible = ref(false)
 const inner = ref<InstanceType<typeof LpInput> | null>(null)
 defineExpose({
   focus: (options?: FocusOptions) => inner.value?.focus(options),
@@ -64,18 +67,17 @@ defineExpose({
   >
     <template v-if="$slots.leading" #leading><slot name="leading" /></template>
     <template #trailing>
-      <button
-        type="button"
-        class="group rounded-inner p-1 text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink focus-visible:text-ink"
-        :aria-label="visible ? text.hide : text.show"
-        @click="visible = !visible"
-      >
-        <LpIcon
-          :name="visible ? 'lucide:eye-off' : 'lucide:eye'"
-          :size="size === 'sm' ? 14 : 16"
-          class="transition-transform duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] group-active:scale-90 motion-reduce:group-active:scale-100"
-        />
-      </button>
+      <slot name="actions" />
+      <!-- Sized to the icon with a hair of padding, as the field's other
+           trailing controls are, rather than to a full square button. -->
+      <RevealToggle
+        v-model="visible"
+        :icon-size="size === 'sm' ? 14 : 16"
+        :show-label="text.show"
+        :hide-label="text.hide"
+        :disabled="disabled"
+        class="size-auto rounded-inner p-1 hover:bg-transparent"
+      />
     </template>
   </LpInput>
 </template>

package/src/components/LpPhoneInput.vue

@@ -53,7 +53,7 @@ import { useFieldNotice, type FieldNoticeOptions } from "../composables/useField
 import { useInputFilter } from "../composables/useInputFilter"
 import { useLabels } from "../composables/useLpConfig"
 import { type Country, filterCountries, flagEmoji, loadCountries, matchCountryByValue } from "./countries"
-import { OPTION_ITEM, POPOVER_PANEL } from "./dropdown"
+import { OPTION_ITEM, optionStagger, POPOVER_PANEL } from "./dropdown"
 import LpFieldNotice from "./LpFieldNotice.vue"
 import LpIcon from "./LpIcon.vue"
 import {
@@ -66,6 +66,7 @@ import {
   type PhoneLib,
 } from "./phone"
 import { useMergedAttrs } from "../composables/useMergedClass"
+import { useOutsideGuard, usePortalTarget } from "../composables/useView"
 
 export interface PhoneDetail {
   /** Matched country, or undefined when the prefix matches none. */
@@ -359,6 +360,12 @@ const inputAttrs = computed(() => {
   const { style: _s, ...others } = rest.value
   return others
 })
+
+// Overlays open in the window this component renders in (an LpFrame's, inside one).
+const portalTo = usePortalTarget()
+// What happens in another document (the page around a frame, or a frame in
+// the page) is not "outside" for this layer.
+const guardOutside = useOutsideGuard()
 </script>
 
 <template>
@@ -395,8 +402,10 @@ const inputAttrs = computed(() => {
         </ComboboxTrigger>
       </ComboboxAnchor>
 
-      <ComboboxPortal>
+      <ComboboxPortal :to="portalTo">
         <ComboboxContent
+          @interact-outside="guardOutside"
+          @escape-key-down="guardOutside"
           :collision-padding="8"
           position="popper"
           align="start"
@@ -427,7 +436,7 @@ const inputAttrs = computed(() => {
               v-for="(c, i) in filtered"
               :key="c.iso2"
               :value="c.iso2"
-              :style="{ animationDelay: `${Math.min(i, 12) * 22}ms` }"
+              :style="optionStagger(i)"
               :class="[OPTION_ITEM, 'gap-2.5']"
               @select.prevent="chooseCountry(c)"
             >