@leavepulse/ui 0.87.1 → 0.89.1

package/src/components/LpModalNav.vue

@@ -18,6 +18,7 @@ import { useGlass } from "../composables/useGlass"
 import { useLabels } from "../composables/useLpConfig"
 import LpButton from "./LpButton.vue"
 import LpIcon from "./LpIcon.vue"
+import { MODAL_MAX_HEIGHT } from "./modalDepth"
 import LpModal from "./LpModal.vue"
 import LpSidebar from "./LpSidebar.vue"
 import type { SidebarItem, SidebarSection } from "./sidebar"
@@ -132,7 +133,7 @@ const triggerClass = computed(() => TRIGGER_VISIBILITY[props.mobileBreakpoint])
  * mirrors LpModal's max-height, which is not a class this file can put in the
  * consuming app's scan.
  */
-const railStyle = { maxHeight: "min(90vh, calc(100dvh - 2rem))" }
+const railStyle = { maxHeight: MODAL_MAX_HEIGHT }
 
 /*
  * The rail is part of the dialog, so it takes the same surface: a glass

package/src/components/LpNumberField.vue

@@ -177,7 +177,7 @@ usePaletteControl({ disabled: () => field.value.disabled, invalid: () => field.v
       :id="field.id"
       :aria-describedby="describedBy"
       :aria-invalid="field.invalid || undefined"
-      class="min-w-0 flex-1 bg-transparent text-ink outline-none placeholder:text-muted [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none"
+      class="lp-entry 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' : icon || $slots.leading ? 'pl-2 pr-3' : 'px-3'"
     />
     <!-- The unit sits between the value and the increment button, so a long one

package/src/components/LpPhoneInput.vue

@@ -55,7 +55,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, optionStagger, COMBOBOX_PANEL, POPOVER_PANEL } from "./dropdown"
+import { OPTION_ITEM, optionStagger, COMBOBOX_FIT, COMBOBOX_PANEL, POPOVER_PANEL } from "./dropdown"
 import LpFieldNotice from "./LpFieldNotice.vue"
 import LpIcon from "./LpIcon.vue"
 import {
@@ -403,7 +403,7 @@ const guardOutside = useOutsideGuard()
           @escape-key-down="guardOutside"
           v-bind="COMBOBOX_PANEL"
           align="start"
-          :class="[POPOVER_PANEL, 'z-(--z-popover) max-h-72 w-72 overflow-hidden']"
+          :class="[POPOVER_PANEL, 'z-(--z-popover) w-72 max-w-[calc(100vw-1rem)] overflow-hidden', COMBOBOX_FIT]"
         >
           <div class="border-b border-line p-2">
             <!--
@@ -417,11 +417,11 @@ const guardOutside = useOutsideGuard()
               :placeholder="searchPlaceholder ?? text.search"
               :aria-label="text.searchLabel"
               auto-focus
-              class="h-(--size-control-sm) w-full rounded-inner 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-inner border border-line bg-surface-soft px-2.5 text-sm text-ink outline-none placeholder:text-muted focus:border-brand"
               @input="query = ($event.target as HTMLInputElement).value"
             />
           </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">
             <ComboboxEmpty class="px-3 py-4 text-center text-sm italic text-muted">
               {{ emptyText ?? text.empty }}
             </ComboboxEmpty>
@@ -454,7 +454,7 @@ const guardOutside = useOutsideGuard()
       :required="field.required || undefined"
       :aria-invalid="field.invalid || undefined"
       :aria-describedby="mergeDescribedBy(rest['aria-describedby'], field.describedBy, notice.message.value ? noticeId : undefined)"
-      class="lp-autofill min-w-0 flex-1 self-stretch bg-transparent px-3 outline-none placeholder:text-muted"
+      class="lp-autofill lp-entry min-w-0 flex-1 self-stretch bg-transparent px-3 outline-none placeholder:text-muted"
       @beforeinput="onBeforeEdit"
       @paste="onPaste"
       @compositionend="onCompositionEnd"

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

@@ -2362,7 +2362,18 @@ usePaletteCommands(() => {
               </dl>
             </div>
           </slot>
+          <!-- `#line` is to a list line what `#card` is to a card: the inside
+               only. Without it the line is built from the columns: the first
+               names the row, the rest follow it in one muted line, which
+               reads well for words and badly for meters or several badges. -->
           <div v-else class="min-w-0 flex-1">
+            <slot
+              name="line"
+              :row="entry.row"
+              :selected="isSelected(keyFor(entry.row, entry.index))"
+              :toggle="() => toggleRow(keyFor(entry.row, entry.index), !isSelected(keyFor(entry.row, entry.index)))"
+              :open-menu="openRowMenu"
+            >
               <div v-if="titleColumn" class="min-w-0 truncate font-medium text-ink">
                 <slot :name="`cell-${titleColumn.key}`" :row="entry.row" :value="entry.row[titleColumn.key]" :open-menu="openRowMenu">{{ entry.row[titleColumn.key] }}</slot>
               </div>
@@ -2374,7 +2385,8 @@ usePaletteCommands(() => {
                   </span>
                 </template>
               </div>
-            </div>
+            </slot>
+          </div>
         </div>
       </template>
     </TransitionGroup>

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