@leavepulse/ui 0.87.0 → 0.88.0

package/src/components/LpPopover.vue

@@ -7,7 +7,7 @@ import {
 } from "reka-ui"
 import { computed, useAttrs } from "vue"
 import { mergeClass } from "../composables/useMergedClass"
-import { POPOVER_PANEL } from "./dropdown"
+import { PANEL_FIT, POPOVER_PANEL } from "./dropdown"
 import { useOutsideGuard, usePortalTarget } from "../composables/useView"
 
 // The trigger owns its attributes through the slot; fallthrough tags the panel.
@@ -37,7 +37,7 @@ const open = defineModel<boolean>("open")
 // Merged rather than appended, so `panelClass="w-80 p-0"` replaces the default
 // width and padding instead of racing them in stylesheet order.
 const panel = computed(() =>
-  mergeClass(POPOVER_PANEL, "z-(--z-popover) w-64 rounded-card p-3 text-sm text-ink outline-none", props.panelClass),
+  mergeClass(POPOVER_PANEL, PANEL_FIT, "z-(--z-popover) w-64 rounded-card p-3 text-sm text-ink outline-none", props.panelClass),
 )
 
 /*

package/src/components/LpRadio.vue

@@ -32,7 +32,7 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(() =>
     <RadioGroupItem
       :value="value"
       :disabled="disabled"
-      class="flex size-[18px] shrink-0 items-center justify-center rounded-full border border-line-strong bg-surface-soft outline-none transition-[color,border-color,box-shadow,scale] duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] not-data-[state=checked]:group-hover/radio:border-brand active:scale-90 motion-reduce:active:scale-100 focus-visible:ring-2 focus-visible:ring-ring data-[state=checked]:border-brand disabled:cursor-not-allowed disabled:opacity-55"
+      class="lp-tap flex size-[18px] shrink-0 items-center justify-center rounded-full border border-line-strong bg-surface-soft outline-none transition-[color,border-color,box-shadow,scale] duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] not-data-[state=checked]:group-hover/radio:border-brand active:scale-90 motion-reduce:active:scale-100 focus-visible:ring-2 focus-visible:ring-ring data-[state=checked]:border-brand disabled:cursor-not-allowed disabled:opacity-55"
     >
       <RadioGroupIndicator
         class="flex data-[state=checked]:animate-[indicator-in_140ms_var(--ease-emphasized)]"

package/src/components/LpRadioGroup.vue

@@ -68,7 +68,7 @@ usePaletteControl({ disabled: () => field.value.disabled })
           :disabled="opt.disabled"
           :aria-describedby="opt.description ? `${uid}-${i}-desc` : undefined"
           :class="opt.description ? 'mt-px' : ''"
-          class="flex size-[18px] shrink-0 items-center justify-center rounded-full border border-line-strong bg-surface-soft outline-none transition-[color,border-color,box-shadow,scale] duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] not-data-[state=checked]:group-hover/radio:border-brand active:scale-90 motion-reduce:active:scale-100 focus-visible:ring-2 focus-visible:ring-ring data-[state=checked]:border-brand disabled:cursor-not-allowed disabled:opacity-55"
+          class="lp-tap flex size-[18px] shrink-0 items-center justify-center rounded-full border border-line-strong bg-surface-soft outline-none transition-[color,border-color,box-shadow,scale] duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] not-data-[state=checked]:group-hover/radio:border-brand active:scale-90 motion-reduce:active:scale-100 focus-visible:ring-2 focus-visible:ring-ring data-[state=checked]:border-brand disabled:cursor-not-allowed disabled:opacity-55"
         >
           <RadioGroupIndicator
             class="flex data-[state=checked]:animate-[indicator-in_140ms_var(--ease-emphasized)]"

package/src/components/LpRangeSlider.vue

@@ -64,7 +64,7 @@ function onCommit(v: number[] | undefined) {
 const { field, wrapper, ownAttrs } = useOwnField(() => ({ error: props.error, disabled: props.disabled }))
 
 const { class: rootClass, attrs: rest } = useMergedAttrs(
-  `relative flex h-5 w-full touch-none select-none items-center data-[disabled]:opacity-55 ${SLIDER_GLIDE}`, () => ownAttrs())
+  `lp-tap relative flex h-5 w-full touch-none select-none items-center data-[disabled]:opacity-55 ${SLIDER_GLIDE}`, () => ownAttrs())
 const { dragging, onPointerDown } = useSliderDrag()
 
 const thumbClass =

package/src/components/LpSection.vue

@@ -112,12 +112,15 @@ const classes = computed(() =>
          line of their own even when they would have fitted beside the title.
          With it the column takes the space that is left and shrinks first.
 
-         `break-words` covers the title AND the description in one place. Both
-         routinely carry something with no spaces in it (a hostname, a URL, a
-         container id), and an unbreakable run pushes straight out through the
-         side of whatever card the section sits in. min-w-0 lets the column
-         shrink; only this lets the text inside it give way. -->
-    <div class="min-w-0 flex-1 break-words">
+         `overflow-wrap: anywhere` covers the title AND the description in one
+         place. Both routinely carry something with no spaces in it (a
+         hostname, a URL, a container id), and an unbreakable run pushes
+         straight out through the side of whatever card the section sits in.
+         min-w-0 lets the column shrink; only this lets the text inside it give
+         way. `break-words` was not enough: the title is an item of a flex row,
+         and break-word leaves its minimum width at the whole run, so a hash
+         in a title widened a phone page until the browser zoomed it out. -->
+    <div class="min-w-0 flex-1 [overflow-wrap:anywhere]">
       <div class="flex flex-wrap items-center gap-2">
         <LpIcon v-if="icon" :name="icon" :size="16" class="shrink-0 text-muted" />
         <component :is="as" :class="classes.title()">

package/src/components/LpSegmented.vue

@@ -135,7 +135,7 @@ usePaletteControl({ disabled: () => field.value.disabled })
       :value="opt.value"
       :disabled="opt.disabled"
       :aria-label="opt.ariaLabel ?? (opt.label ? undefined : opt.value)"
-      class="relative inline-flex h-full items-center justify-center gap-1.5 rounded-inner font-medium outline-none transition-colors duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] focus-visible:ring-2 focus-visible:ring-ring data-[state=on]:text-ink data-[state=off]:text-muted data-[state=off]:hover:text-ink disabled:cursor-not-allowed disabled:opacity-55"
+      class="lp-tap relative inline-flex h-full items-center justify-center gap-1.5 rounded-inner font-medium outline-none transition-colors duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] focus-visible:ring-2 focus-visible:ring-ring data-[state=on]:text-ink data-[state=off]:text-muted data-[state=off]:hover:text-ink disabled:cursor-not-allowed disabled:opacity-55"
       :class="[block ? 'flex-1' : '', size === 'lg' ? 'px-4' : 'px-3', hovered === opt.value ? 'text-ink' : '']"
       @pointerenter="onEnter(opt)"
       @pointerup="releaseFocusAfterPointer"

package/src/components/LpSelect.vue

@@ -43,7 +43,7 @@ import FieldWrapper from "./FieldWrapper.vue"
 import { useFieldBlur, useOwnField, mergeDescribedBy } from "../composables/useField"
 import { useLabels } from "../composables/useLpConfig"
 import { useMergedAttrs } from "../composables/useMergedClass"
-import { OPTION_ITEM, optionStagger, POPOVER_PANEL } from "./dropdown"
+import { COMBOBOX_FIT, OPTION_ITEM, optionStagger, POPOVER_PANEL } from "./dropdown"
 import LpIcon from "./LpIcon.vue"
 import OptionContent from "./OptionContent.vue"
 import LpRollingText from "./LpRollingText.vue"
@@ -599,18 +599,18 @@ usePaletteControl({ disabled: () => field.value.disabled, invalid: () => field.v
         @escape-key-down="guardOutside"
         position="popper"
         :side-offset="6"
-        :class="[POPOVER_PANEL, 'z-(--z-popover) max-h-72 w-(--reka-combobox-trigger-width) overflow-hidden']"
+        :class="[POPOVER_PANEL, 'z-(--z-popover) w-(--reka-combobox-trigger-width) overflow-hidden', COMBOBOX_FIT]"
       >
         <div v-if="searchable || serverSide" class="border-b border-line p-2">
           <ComboboxInput
             v-model="query"
             :placeholder="searchPlaceholderText"
             :aria-label="labels.searchLabel"
-            class="h-(--size-control-sm) w-full rounded-md border border-line bg-surface-soft px-2.5 text-sm text-ink outline-none placeholder:text-muted focus:border-brand"
+            class="lp-entry h-(--size-control-sm) w-full rounded-md border border-line bg-surface-soft px-2.5 text-sm text-ink outline-none placeholder:text-muted focus:border-brand"
           />
         </div>
 
-        <ComboboxViewport class="max-h-56 overflow-y-auto p-1">
+        <ComboboxViewport class="max-h-56 min-h-0 flex-1 overflow-y-auto p-1">
           <div v-if="loading" class="px-3 py-4 text-center text-sm italic text-muted">
             {{ loadingLabel }}
           </div>

package/src/components/LpSlider.vue

@@ -51,7 +51,7 @@ const { field, wrapper, ownAttrs } = useOwnField(() => ({ error: props.error, di
 
 // A slider is full-width by default; putting one in a toolbar means constraining it, and a fixed h-5 has to yield to a denser row.
 const { class: rootClass, attrs: rest } = useMergedAttrs(
-  `relative flex h-5 w-full touch-none select-none items-center data-[disabled]:opacity-55 ${SLIDER_GLIDE}`, () => ownAttrs())
+  `lp-tap relative flex h-5 w-full touch-none select-none items-center data-[disabled]:opacity-55 ${SLIDER_GLIDE}`, () => ownAttrs())
 const { dragging, onPointerDown } = useSliderDrag()
 
 usePaletteControl({ disabled: () => field.value.disabled })

package/src/components/LpStat.vue

@@ -174,7 +174,7 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
            the same as a live server row elsewhere on the page. -->
       <LpStatus v-if="online" state="online" size="sm" hide-label />
       <LpIcon v-if="icon" :name="icon" :size="14" class="text-muted" />
-      <span class="text-[11px] font-semibold uppercase tracking-[0.08em] text-muted">
+      <span class="min-w-0 text-[11px] font-semibold uppercase tracking-[0.08em] text-muted [overflow-wrap:anywhere]">
         <Transition v-bind="FADE">
           <LpSkeleton v-if="loading && !label" class="inline-block h-[0.8em] w-20 align-middle" />
           <span v-else>{{ label }}</span>

package/src/components/LpSwitch.vue

@@ -58,7 +58,7 @@ const slots = useSlots()
 const labelled = computed(() => Boolean(props.label || props.description || slots.default))
 
 const TRACK =
-  "group/switch inline-flex h-5 w-9 shrink-0 items-center rounded-pill border border-line bg-surface-soft px-0.5 outline-none transition-colors duration-[var(--duration-fast)] focus-visible:ring-2 focus-visible:ring-ring data-[state=checked]:border-transparent data-[state=checked]:bg-brand disabled:cursor-not-allowed disabled:opacity-55"
+  "lp-tap group/switch inline-flex h-5 w-9 shrink-0 items-center rounded-pill border border-line bg-surface-soft px-0.5 outline-none transition-colors duration-[var(--duration-fast)] focus-visible:ring-2 focus-visible:ring-ring data-[state=checked]:border-transparent data-[state=checked]:bg-brand disabled:cursor-not-allowed disabled:opacity-55"
 const THUMB =
   "h-3.5 w-3.5 rounded-full bg-ink shadow transition-[translate,width,background-color] duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] group-active/switch:w-5 group-data-[state=checked]/switch:translate-x-4 group-data-[state=checked]/switch:bg-ink-inverse group-data-[state=checked]/switch:group-active/switch:translate-x-2.5 motion-reduce:group-active/switch:w-3.5"
 

package/src/components/LpTable.vue

@@ -1473,7 +1473,12 @@ const activeLayout = computed<TableLayout>(() =>
     ? "list"
     : chosenLayout.value,
 )
-const layoutChoices = computed(() => (props.layouts && props.layouts.length > 1 ? props.layouts : []))
+// While the width forces a list the switch would change nothing on screen, so
+// it steps aside until there is room for the choice again.
+const forcedList = computed(() => chosenLayout.value === "table" && activeLayout.value === "list")
+const layoutChoices = computed(() =>
+  props.layouts && props.layouts.length > 1 && !forcedList.value ? props.layouts : [],
+)
 const LAYOUT_ICONS: Record<TableLayout, string> = {
   table: "lucide:table-2",
   cards: "lucide:layout-grid",

package/src/components/LpTableFilter.vue

@@ -163,7 +163,7 @@ const action =
           <span v-if="option.count !== undefined" class="text-xs text-muted tabular-nums">{{ option.count }}</span>
           <button
             type="button"
-            class="rounded-control px-1.5 py-0.5 text-xs font-medium text-brand opacity-0 outline-none transition-opacity duration-fast group-hover/opt:opacity-100 hover:bg-brand-soft focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-ring"
+            class="rounded-control px-1.5 py-0.5 text-xs font-medium text-brand opacity-0 outline-none transition-opacity duration-fast group-hover/opt:opacity-100 [@media(hover:none)]:opacity-100 hover:bg-brand-soft focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-ring"
             @click="set(onlyValues(values, [option.value]))"
           >
             {{ labels.only }}

package/src/components/LpTagsInput.vue

@@ -513,7 +513,7 @@ usePaletteControl({ label: () => props.label, disabled: () => field.value.disabl
           :aria-expanded="options ? listOpen : undefined"
           :aria-controls="options ? listId : undefined"
           :aria-activedescendant="listOpen && activeIndex >= 0 ? optionId(activeIndex) : undefined"
-          class="min-w-24 flex-1 bg-transparent px-1 outline-none placeholder:text-muted"
+          class="lp-entry min-w-24 flex-1 bg-transparent px-1 outline-none placeholder:text-muted"
           @focus="onFocus"
           @keydown="onKeydown"
           @beforeinput="onBeforeInput"
@@ -535,7 +535,7 @@ usePaletteControl({ label: () => props.label, disabled: () => field.value.disabl
             align="start"
             :side-offset="6"
             :collision-padding="8"
-            :class="[POPOVER_PANEL, 'z-(--z-popover) max-h-72 w-(--reka-popper-anchor-width) overflow-y-auto p-1 outline-none']"
+            :class="[POPOVER_PANEL, 'z-(--z-popover) max-h-[min(18rem,var(--reka-popper-available-height,18rem))] w-(--reka-popper-anchor-width) overflow-y-auto p-1 outline-none']"
             @open-auto-focus.prevent
             @close-auto-focus.prevent
             @interact-outside="keepOpenInside"

package/src/components/LpTextarea.vue

@@ -82,7 +82,7 @@ defineExpose({ el: box, fit })
 const textareaClass = computed(() =>
   mergeClass(
     props.autosize ? "w-full resize-none" : "w-full resize-y",
-    "rounded-control border bg-surface-soft px-3 py-2 text-sm text-ink outline-none transition-colors duration-[var(--duration-fast)] placeholder:text-muted focus:border-brand focus:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-55",
+    "lp-entry rounded-control border bg-surface-soft px-3 py-2 text-sm text-ink outline-none transition-colors duration-[var(--duration-fast)] placeholder:text-muted focus:border-brand focus:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-55",
     field.value.invalid ? "border-danger focus:border-danger focus:ring-danger-soft" : "border-line",
     hasField.value ? "" : (attrs.class as string),
   ),

package/src/components/LpThemeSwitcher.vue

@@ -20,7 +20,7 @@ import { presets } from "../theme/presets"
 import { STUDIO_SYSTEM, useThemeStudio } from "../theme/studio"
 import type { TokenSet } from "../theme/tokens"
 import { useTheme } from "../theme/useTheme"
-import { POPOVER_PANEL } from "./dropdown"
+import { PANEL_FIT, POPOVER_PANEL } from "./dropdown"
 import LpContextMenu, { type ContextMenuItemDef } from "./LpContextMenu.vue"
 import LpIcon from "./LpIcon.vue"
 import LpRollingText from "./LpRollingText.vue"
@@ -374,7 +374,7 @@ usePaletteTheme(() => tuner ?? undefined, { hide: props.studioHide })
         align="end"
         :side-offset="6"
         :aria-label="text.studio"
-        :class="[POPOVER_PANEL, 'z-(--z-popover) w-96 max-w-[calc(100vw-24px)] rounded-card p-3 text-sm text-ink outline-none']"
+        :class="[POPOVER_PANEL, PANEL_FIT, 'z-(--z-popover) w-96 rounded-card p-3 text-sm text-ink outline-none']"
         data-lp-glide-position
         @interact-outside="keepForTrigger"
         @escape-key-down="guardOutside"

package/src/components/LpTimeField.vue

@@ -80,7 +80,7 @@ const shellSize = CONTROL_SIZE
 // `w-full` is the default, not a rule: a time column of `w-28` must win over it.
 const { class: rootClass, attrs: rest } = useMergedAttrs(() =>
   [
-    "flex w-full items-center gap-0.5 rounded-control border bg-surface-soft px-3 text-ink transition-colors duration-[var(--duration-fast)] focus-within:ring-2 focus-within:ring-ring data-[disabled]:cursor-not-allowed data-[disabled]:opacity-55",
+    "lp-entry flex w-full items-center gap-0.5 rounded-control border bg-surface-soft px-3 text-ink transition-colors duration-[var(--duration-fast)] focus-within:ring-2 focus-within:ring-ring data-[disabled]:cursor-not-allowed data-[disabled]:opacity-55",
     shellSize[props.size],
     field.value.invalid ? "border-danger focus-within:ring-danger-soft" : "border-line focus-within:border-brand",
   ].join(" "), () => ownAttrs())

package/src/components/LpToaster.vue

@@ -330,7 +330,7 @@ const portalTo = usePortalTarget()
     <Teleport :to="portalTo">
       <ToastViewport
         :data-lp-toasts="viewportId"
-        class="fixed bottom-0 right-0 z-(--z-toast) flex w-[min(92vw,22rem)] flex-col gap-2 p-4 outline-none"
+        class="fixed bottom-0 right-0 z-(--z-toast) flex w-[min(92vw,22rem)] flex-col gap-2 p-4 pr-[max(1rem,env(safe-area-inset-right))] pb-[max(1rem,env(safe-area-inset-bottom))] outline-none"
       />
     </Teleport>
   </ToastProvider>

package/src/components/LpTooltip.vue

@@ -36,13 +36,14 @@ import {
   TooltipRoot,
   TooltipTrigger,
 } from "reka-ui"
-import { onBeforeUnmount, ref, watch, type FunctionalComponent } from "vue"
+import { computed, mergeProps, onBeforeUnmount, ref, useAttrs, watch, type FunctionalComponent } from "vue"
 import {
   springSettled,
   springStep,
   type SpringState,
 } from "../composables/usePillTransition"
 import { PANEL_SURFACE, TOOLTIP_ANIM } from "./dropdown"
+import { useTouchHold } from "../composables/useTouchHold"
 import { prefersReducedMotion } from "../composables/easing"
 import { useOutsideGuard, usePortalTarget, useView, viewWindow } from "../composables/useView"
 
@@ -86,8 +87,16 @@ const props = withDefaults(
      * a scroll that should have dismissed it.
      */
     disabled?: boolean
+    /**
+     * Touch has no hover, and a tap is the control's own. With `hold` a
+     * press-and-hold shows the tip (and that press does not also press the
+     * control); the next touch anywhere, or Escape, hides it. `none` leaves
+     * touch to the trigger. A followed tip (`followCursor`) never holds: its
+     * trigger is a chart or canvas with its own touch reading.
+     */
+    touch?: "hold" | "none"
   }>(),
-  { side: "top" },
+  { side: "top", touch: "hold" },
 )
 
 /*
@@ -123,6 +132,9 @@ const target = { x: 0, y: 0 }
 const offset = ref({ x: 0, y: 0 })
 const tipBody = ref<HTMLElement | null>(null)
 
+/* How long a finger rests on the trigger before the tip shows. */
+const HOLD_MS = 450
+
 /* reka's own collision padding, which the follow offset would otherwise undo. */
 const EDGE = 8
 
@@ -241,7 +253,30 @@ const open = ref(false)
 /* What reka last asked for, regardless of whether it was allowed at the time. */
 const wanted = ref(false)
 
+/*
+ * A tip opened by a touch hold stays until the next touch or Escape. reka
+ * would close it as soon as the finger lifts (a touch leaves the trigger
+ * then), so while it is held its own requests to close are not taken.
+ */
+const heldOpen = ref(false)
+const hold = useTouchHold({
+  enabled: () => props.touch === "hold" && !props.followCursor && !props.disabled,
+  delay: () => HOLD_MS,
+  onHold: () => {
+    heldOpen.value = true
+    wanted.value = true
+    open.value = true
+  },
+})
+
+function release() {
+  heldOpen.value = false
+  wanted.value = false
+  open.value = false
+}
+
 const onOpenChange = (next: boolean) => {
+  if (!next && heldOpen.value) return
   // What reka wants, kept apart from what is currently allowed.
   wanted.value = next
   open.value = next && !props.disabled
@@ -265,8 +300,11 @@ const onOpenChange = (next: boolean) => {
 watch(
   () => props.disabled,
   (off) => {
-    if (off) open.value = false
-    else if (wanted.value) open.value = true
+    if (off) {
+      hold.cancel()
+      heldOpen.value = false
+      open.value = false
+    } else if (wanted.value) open.value = true
   },
 )
 
@@ -289,6 +327,18 @@ watch(
   },
 )
 
+watch(heldOpen, (held, _, onCleanup) => {
+  if (!held) return
+  const win = viewWindow(view.value)
+  const onKey = (event: KeyboardEvent) => event.key === "Escape" && release()
+  win.addEventListener("pointerdown", release, true)
+  win.addEventListener("keydown", onKey, true)
+  onCleanup(() => {
+    win.removeEventListener("pointerdown", release, true)
+    win.removeEventListener("keydown", onKey, true)
+  })
+})
+
 onBeforeUnmount(stopSpring)
 
 // Overlays open in the window this component renders in (an LpFrame's, inside one).
@@ -302,6 +352,9 @@ const guardOutside = useOutsideGuard()
 // LpPopover's, as-child) lost its id, ARIA state and click, and its popover
 // never opened. They go to the trigger, which merges them onto the slot's element.
 defineOptions({ inheritAttrs: false })
+// The caller's own listeners on the trigger run beside the hold's, not instead of them.
+const attrs = useAttrs()
+const triggerAttrs = computed(() => mergeProps(attrs, hold.handlers))
 </script>
 
 <template>
@@ -324,8 +377,9 @@ defineOptions({ inheritAttrs: false })
            lands on the real button rather than on a wrapper. -->
       <TooltipTrigger
         as-child
-        v-bind="$attrs"
+        v-bind="triggerAttrs"
         :aria-label="label ? content : undefined"
+        :class="touch === 'hold' && !followCursor ? '[-webkit-touch-callout:none]' : undefined"
         @pointermove="onPointerMove"
       >
         <slot />

package/src/components/badge.ts

@@ -5,4 +5,4 @@
  * keyboard handling), so it still looks like the badge's own.
  */
 export const BADGE_REMOVE =
-  "grid size-4 shrink-0 place-items-center rounded-pill text-muted outline-none transition-colors duration-fast hover:bg-ink/10 hover:text-ink focus-visible:ring-2 focus-visible:ring-ring"
+  "lp-tap grid size-4 shrink-0 place-items-center rounded-pill text-muted outline-none transition-colors duration-fast hover:bg-ink/10 hover:text-ink focus-visible:ring-2 focus-visible:ring-ring"

package/src/components/dropdown.ts

@@ -45,6 +45,21 @@ export const PANEL_SURFACE =
  */
 export const POPOVER_PANEL = PANEL_SURFACE + " " + POPOVER_ANIM
 
+/**
+ * Keeps a free-form panel (popover, menu, hover card) inside the window. Its
+ * width stops 0.5rem short of each edge, so a w-96 panel or a long menu label
+ * no longer runs off a phone; its height stops at the room reka measured on the
+ * side it opened, and the rest scrolls. A date picker opened in landscape used
+ * to hang off the top of the screen with its first weeks out of reach.
+ */
+export const PANEL_FIT = "max-w-[calc(100vw-1rem)] max-h-(--reka-popper-available-height) overflow-y-auto"
+
+/**
+ * A list row on a touch screen: 2.5rem tall instead of 2, so a thumb picks the
+ * row it is on and not its neighbour. A mouse keeps the compact row.
+ */
+export const TOUCH_ROW = "[@media(hover:none)_and_(pointer:coarse)]:py-2.5"
+
 /**
  * A selectable option row: layout, highlight state, and the staggered cascade.
  * Cascades downward by default and upward when the panel is flipped above the
@@ -53,6 +68,7 @@ export const POPOVER_PANEL = PANEL_SURFACE + " " + POPOVER_ANIM
  */
 export const OPTION_ITEM =
   "flex cursor-pointer items-center gap-2 rounded-inner px-2.5 py-1.5 text-sm text-ink outline-none " +
+  TOUCH_ROW + " " +
   "animate-[rise-in_180ms_var(--ease-emphasized)_both] [--rise:-6px] group-data-[side=top]:[--rise:6px] " +
   "data-[highlighted]:bg-brand-soft data-[highlighted]:text-brand"
 
@@ -74,6 +90,14 @@ export const optionStagger = (index: number): { animationDelay: string } => ({
 /* Where a combobox list sits under its field. */
 export const COMBOBOX_PANEL = { collisionPadding: 8, position: "popper", sideOffset: 6 } as const
 
+/*
+ * A combobox list's height: 18rem, or less where reka measured less room on the
+ * side it opened (a phone in landscape has about 170px under a field). The
+ * panel is a column so its option list, which carries `min-h-0 flex-1`, is what
+ * shrinks and scrolls; the search field above it stays.
+ */
+export const COMBOBOX_FIT = "flex flex-col max-h-[min(18rem,var(--reka-popper-available-height,18rem))]"
+
 export const CLOSE_ICON =
   "transition-transform duration-medium ease-[var(--ease-emphasized)] " +
   "group-hover:rotate-90 group-active:scale-90 motion-reduce:group-hover:rotate-0"

package/src/components/modalDepth.ts

@@ -2,6 +2,12 @@ import { computed, ref, type ComputedRef, type Ref } from "vue"
 
 const STEP = 20
 
+/*
+ * A dialog's ceiling: 90% of the window, and never closer than 1rem to its
+ * edges or to a notch or home indicator on a phone that draws under them.
+ */
+export const MODAL_MAX_HEIGHT = "min(90vh, calc(100dvh - 2rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)))"
+
 /*
  * One opening-order stack for every modal surface. Pinned to a global symbol
  * like the toast queue: a barrel import and a deep import can load this module

package/src/composables/useReveal.ts

@@ -69,9 +69,12 @@ export function useReveal(options: UseRevealOptions = {}): UseReveal {
   const { threshold = 0.25, rootMargin = "0px" } = options
 
   const el = ref<Element | null>(null)
-  // SSR has no viewport to intersect with, and no animation runs there either;
-  // the client takes over on hydration and gates it properly then.
-  const revealed = ref(typeof window === "undefined")
+  // The same starting value on the server and on the hydrating client, or every
+  // component with an entrance hydrated with a mismatch (the server said
+  // revealed, the client said waiting). Only an explicit `immediate` starts
+  // revealed; the observer, and reduced motion, decide on the client once
+  // mounted, the way useMediaQuery does.
+  const revealed = ref(!!toValue(options.immediate))
 
   let observer: IntersectionObserver | null = null
 
@@ -88,7 +91,7 @@ export function useReveal(options: UseRevealOptions = {}): UseReveal {
   watch(
     [el, () => toValue(options.immediate)],
     ([node, immediate]) => {
-      if (revealed.value) return
+      if (revealed.value || typeof window === "undefined") return
       if (immediate || prefersReducedMotion()) {
         reveal()
         return

package/src/composables/useTouchHold.ts

@@ -0,0 +1,92 @@
+import { onBeforeUnmount } from "vue"
+
+/*
+ * Press-and-hold on a touch screen, for things a pointer reaches by hovering
+ * (a hover card, a tooltip). A hold that drifts is a scroll, not a hold, so
+ * moving past a few pixels cancels it. Once it has fired, the click the finger
+ * produces on lifting is swallowed: the reader asked for the preview, not for
+ * the link or button under it. A mouse or pen is left alone.
+ *
+ * The handlers go on the trigger: pointerdown, pointermove, pointerup,
+ * pointercancel, click (capture) and contextmenu.
+ */
+const SLOP = 8
+/* A long press may produce no click at all; past this the next click is the user's own. */
+const CLICK_AFTER_RELEASE_MS = 350
+
+export interface TouchHoldOptions {
+  /** Whether a touch press may start a hold now. */
+  enabled: () => boolean
+  /** How long the finger must stay, in ms. */
+  delay: () => number
+  onHold: () => void
+}
+
+export function useTouchHold(options: TouchHoldOptions) {
+  let timer = 0
+  /* The finger the hold belongs to: a second one must not move or end it. */
+  let finger: number | null = null
+  let start = { x: 0, y: 0 }
+  let held = false
+
+  function stop() {
+    window.clearTimeout(timer)
+    timer = 0
+  }
+
+  function onPointerDown(event: PointerEvent) {
+    // Any new press starts over: on a hybrid laptop the mouse click after a
+    // hold must not be taken for that hold's own click.
+    if (timer && event.pointerId !== finger) return
+    held = false
+    if (event.pointerType !== "touch" || !options.enabled()) return
+    finger = event.pointerId
+    start = { x: event.clientX, y: event.clientY }
+    stop()
+    timer = window.setTimeout(() => {
+      timer = 0
+      held = true
+      options.onHold()
+    }, options.delay())
+  }
+
+  function onPointerMove(event: PointerEvent) {
+    if (!timer || event.pointerId !== finger) return
+    if (Math.hypot(event.clientX - start.x, event.clientY - start.y) > SLOP) stop()
+  }
+
+  function onPointerUp(event: PointerEvent) {
+    if (finger !== null && event.pointerId !== finger) return
+    finger = null
+    stop()
+    if (held) window.setTimeout(() => (held = false), CLICK_AFTER_RELEASE_MS)
+  }
+
+  // A cancelled press produces no click, so there is nothing left to swallow.
+  function onPointerCancel(event?: PointerEvent) {
+    if (event && finger !== null && event.pointerId !== finger) return
+    finger = null
+    stop()
+    held = false
+  }
+
+  function onClickCapture(event: MouseEvent) {
+    if (!held) return
+    held = false
+    event.preventDefault()
+    event.stopImmediatePropagation()
+  }
+
+  // A long press would otherwise also bring up the system's own menu.
+  function onContextMenu(event: Event) {
+    if (timer || held) event.preventDefault()
+  }
+
+  onBeforeUnmount(stop)
+
+  return {
+    /** Drops a hold in progress, as if the finger had been lifted off the screen. */
+    cancel: () => onPointerCancel(),
+    handlers: { onPointerdown: onPointerDown, onPointermove: onPointerMove, onPointerup: onPointerUp, onPointercancel: onPointerCancel, onClickCapture, onContextmenu: onContextMenu },
+  }
+}

package/src/locales/uk.ts

@@ -447,6 +447,7 @@ export const uk: KitLabels = {
     running: "Виконується…",
     select: "вибрати",
     close: "закрити",
+    dismiss: "Закрити",
     back: "назад",
     searching: "Пошук…",
     searchFailed: "Пошук зараз недоступний.",

package/src/tokens/utilities.css

@@ -171,3 +171,37 @@
     animation: none;
   }
 }
+
+/*
+ * Text entry on a touch screen. iOS Safari zooms the page in when a field whose
+ * text is smaller than 16px takes focus, and leaves it zoomed after the field
+ * loses it. Every kit field that takes typing carries this class, so on a
+ * coarse pointer its text is 16px; a mouse keeps the size it was drawn at.
+ * Unlayered on purpose: it has to win over the field's own `text-sm`.
+ */
+@media (hover: none) and (pointer: coarse) {
+  .lp-entry {
+    font-size: 16px;
+  }
+}
+
+/*
+ * A control drawn smaller than a fingertip: a checkbox, a switch, an icon or a
+ * small button, a chip's remove. On a coarse pointer an invisible ::after
+ * grows what it answers to to 40px on each axis, centred on the control, so it
+ * keeps its look and a thumb still lands on it. Bigger controls are left as
+ * they are. Both rules sit in the components layer, so a control placed with
+ * `absolute`, or one that draws its own ::after, keeps what its classes say.
+ */
+@layer components {
+  @media (hover: none) and (pointer: coarse) {
+    .lp-tap {
+      position: relative;
+    }
+    .lp-tap::after {
+      content: "";
+      position: absolute;
+      inset: min(0px, calc((100% - 40px) / 2));
+    }
+  }
+}