@lyeve-labs/ui-kit 0.38.5 → 0.39.0

package/dist/components/AppShell.svelte

@@ -316,7 +316,7 @@
               aria-expanded={!collapsed}
               onclick={() => (collapsed = !collapsed)}
             >
-              {#if collapsed}<PanelLeft size={18} />{:else}<PanelLeftClose size={18} />{/if}
+              {#if collapsed}<PanelLeft size={20} />{:else}<PanelLeftClose size={20} />{/if}
             </button>
           {/if}
           {#if section}

package/dist/components/AuthShell.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
+  import { HIT_AREA } from '../internal/touch.js';
   import { cn } from '../utils/cn.js';
   import Card from './Card.svelte';
   import Logo from './Logo.svelte';
@@ -67,9 +68,12 @@
 
     <div class="mb-8 text-center">
       {#if href}
+        <!-- The lockup is 36px tall. Under a finger the link takes a 44px
+             hit box around it rather than growing, so a mouse sees the
+             heading where it was. -->
         <a
           {href}
-          class="mb-5 inline-flex rounded-lg outline-none focus-visible:ring-2 focus-visible:ring-brand"
+          class="{HIT_AREA} mb-5 inline-flex rounded-lg outline-none focus-visible:ring-2 focus-visible:ring-brand"
         >
           {#if lockup}
             {@render lockup()}

package/dist/components/CopyField.svelte

@@ -99,9 +99,14 @@
        inside it, so the caller's actions, the reveal and the copy all fit
        without the value running under them and without measuring anything.
        The frame takes the focus ring and the brand border from the input or
-       the textarea inside it. A focused button draws its own ring and not the frame's. -->
+       the textarea inside it. A focused button draws its own ring and not the frame's.
+       Under a finger each 27px button takes a 44px box centered on it, so the
+       row opens 17px between its items: neighboring boxes meet instead of
+       overlapping, and the first box stops short of the value. The buttons
+       hold their 27px around a 14px icon, the rung of the text beside it, so
+       those boxes stay where they are. -->
   <div
-    class="flex w-full gap-0.5 rounded-lg border bg-surface-2 pe-1 transition-colors border-line-strong {wrapped
+    class="flex w-full gap-0.5 coarse:gap-4.25 rounded-lg border bg-surface-2 pe-1 transition-colors border-line-strong {wrapped
       ? 'min-h-control items-start py-1 has-[textarea:focus]:border-brand has-[textarea:focus-visible]:ring-2 has-[textarea:focus-visible]:ring-inset has-[textarea:focus-visible]:ring-brand'
       : 'h-control items-center has-[input:focus]:border-brand has-[input:focus-visible]:ring-2 has-[input:focus-visible]:ring-inset has-[input:focus-visible]:ring-brand'}"
   >
@@ -154,12 +159,12 @@
         aria-pressed={revealed}
         aria-controls={fieldId}
         aria-label={revealed ? 'Hide value' : 'Show value'}
-        class="{HIT_AREA} flex shrink-0 items-center justify-center rounded-md p-1.5 text-faint outline-none transition-colors hover:text-fg focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand"
+        class="{HIT_AREA} flex size-6.75 shrink-0 items-center justify-center rounded-md p-1.5 text-faint outline-none transition-colors hover:text-fg focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand"
       >
         {#if revealed}
-          <EyeOff size={15} aria-hidden="true" />
+          <EyeOff size={14} aria-hidden="true" />
         {:else}
-          <Eye size={15} aria-hidden="true" />
+          <Eye size={14} aria-hidden="true" />
         {/if}
       </button>
     {/if}
@@ -167,9 +172,9 @@
       type="button"
       aria-label={buttonName}
       onclick={() => copier.copy(value)}
-      class="{HIT_AREA} flex shrink-0 items-center justify-center rounded-md p-1.5 text-faint outline-none transition-colors hover:text-fg focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand"
+      class="{HIT_AREA} flex size-6.75 shrink-0 items-center justify-center rounded-md p-1.5 text-faint outline-none transition-colors hover:text-fg focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand"
     >
-      <CopyGlyph copied={copier.status === 'copied'} size={15} />
+      <CopyGlyph copied={copier.status === 'copied'} size={14} />
     </button>
   </div>
 

package/dist/components/DatePicker.svelte

@@ -246,8 +246,8 @@
         the part of the scroll region nobody could reach and was cut below the
         weekday row. The width stays here, sized to seven columns. The region
         inside is capped by the room and not by the list token, which is shorter
-        than six weeks of days, so a short modal scrolls the calendar rather
-        than cutting it.
+        than six weeks of days, and never below the whole grid: in a modal body
+        too short for it on either side, placePanel makes room under the field.
 
         Under a finger each day keeps its 32px face and a 44px hit box, so the
         days have to sit 44px apart or each box covers a third of its

package/dist/components/Field.svelte

@@ -21,6 +21,11 @@
     describedBy: string | undefined;
     /** True while an error is showing, for the control's `aria-invalid`. */
     invalid: boolean;
+    /**
+     * The id of the caption, for a group's `aria-labelledby`. Set only when
+     * the field is a `group` with a label.
+     */
+    labelledBy: string | undefined;
   }
 </script>
 
@@ -40,6 +45,13 @@
     label?: string;
     /** Screen-reader-only label, for a control whose visible name is a table column header. */
     labelHidden?: boolean;
+    /**
+     * The control is a group, a `SegmentedControl`, `FilterChips` or a row of
+     * your own. A label's `for` reaches one form control and never a group, so
+     * the caption is drawn as text with an id instead, and the group takes its
+     * name from it through `labelledBy`.
+     */
+    group?: boolean;
     hint?: string;
     /** Replaces the hint while it is set, and marks the wiring invalid. */
     error?: string;
@@ -58,6 +70,7 @@
     id = undefined,
     label = undefined,
     labelHidden = false,
+    group = false,
     hint = undefined,
     error = undefined,
     required = false,
@@ -78,6 +91,7 @@
     id: fieldId,
     describedBy: describedBy(fieldId, error, hint),
     invalid: !!error,
+    labelledBy: group && label ? `${fieldId}-label` : undefined,
   });
 </script>
 
@@ -89,9 +103,15 @@
       the reading order, so a reader moving through a row of them would meet
       the controls with nothing ahead of them saying what each one is.
     -->
-    <label for={fieldId} class="{FIELD_LABEL} {labelHidden ? 'sr-only' : ''}">
-      {label}{#if required}<span class="ms-0.5 text-danger" aria-hidden="true">*</span>{/if}
-    </label>
+    {#if group}
+      <span id="{fieldId}-label" class="{FIELD_LABEL} {labelHidden ? 'sr-only' : ''}">
+        {label}{#if required}<span class="ms-0.5 text-danger" aria-hidden="true">*</span>{/if}
+      </span>
+    {:else}
+      <label for={fieldId} class="{FIELD_LABEL} {labelHidden ? 'sr-only' : ''}">
+        {label}{#if required}<span class="ms-0.5 text-danger" aria-hidden="true">*</span>{/if}
+      </label>
+    {/if}
   {/if}
 
   {@render children(wiring)}

package/dist/components/Field.svelte.d.ts

@@ -20,6 +20,11 @@ export interface FieldWiring {
     describedBy: string | undefined;
     /** True while an error is showing, for the control's `aria-invalid`. */
     invalid: boolean;
+    /**
+     * The id of the caption, for a group's `aria-labelledby`. Set only when
+     * the field is a `group` with a label.
+     */
+    labelledBy: string | undefined;
 }
 import type { Snippet } from 'svelte';
 interface Props {
@@ -28,6 +33,13 @@ interface Props {
     label?: string;
     /** Screen-reader-only label, for a control whose visible name is a table column header. */
     labelHidden?: boolean;
+    /**
+     * The control is a group, a `SegmentedControl`, `FilterChips` or a row of
+     * your own. A label's `for` reaches one form control and never a group, so
+     * the caption is drawn as text with an id instead, and the group takes its
+     * name from it through `labelledBy`.
+     */
+    group?: boolean;
     hint?: string;
     /** Replaces the hint while it is set, and marks the wiring invalid. */
     error?: string;

package/dist/components/Input.svelte

@@ -63,7 +63,11 @@
     ...rest
   }: Props = $props();
 
-  const fieldId = $derived(id ?? (label ? label.toLowerCase().replace(/\s+/g, '-') : undefined));
+  // $props.id() and not the label: two fields under one label on a page took
+  // one id, and both labels named the first control. It also matches between
+  // the server render and hydration, which a random string would not.
+  const uid = $props.id();
+  const fieldId = $derived(id ?? uid);
 </script>
 
 <div data-field class="{FIELD_WRAP} {klass}">
@@ -87,8 +91,8 @@
   />
 
   {#if error}
-    <p id={fieldId ? `${fieldId}-error` : undefined} class={FIELD_ERROR}>{error}</p>
+    <p id="{fieldId}-error" class={FIELD_ERROR}>{error}</p>
   {:else if hint}
-    <p id={fieldId ? `${fieldId}-hint` : undefined} class={FIELD_HINT}>{hint}</p>
+    <p id="{fieldId}-hint" class={FIELD_HINT}>{hint}</p>
   {/if}
 </div>

package/dist/components/MultiSelect.svelte

@@ -183,13 +183,15 @@
       reaches 12px above and below the chip and 8px past its end. The chips
       sit 8px apart there and their rows 24px apart, so no box covers the
       next chip or the row below, and a tap meant to open the list lands on
-      the field.
+      the field. The frame pads its chips 11px from its border there, so the
+      boxes of the top and bottom rows stay inside the field, and one row
+      still fills the 44px control height.
     -->
     <div
       role="presentation"
       onclick={onFrameClick}
       class="relative flex min-h-control w-full cursor-pointer flex-wrap items-center gap-1.5 coarse:gap-x-2 coarse:gap-y-6 rounded-lg
-        border bg-surface-2 py-1.5 ps-2.5 pe-7 text-start text-sm transition-colors
+        border bg-surface-2 py-1.5 coarse:py-2.75 ps-2.5 pe-7 text-start text-sm transition-colors
         has-[[role=combobox]:focus-visible]:ring-2 has-[[role=combobox]:focus-visible]:ring-inset
         has-[[role=combobox]:focus-visible]:ring-brand
         {disabled ? 'cursor-not-allowed opacity-50' : ''}

package/dist/components/NumberInput.svelte

@@ -41,7 +41,11 @@
     onchange = undefined,
   }: Props = $props();
 
-  const fieldId = $derived(id ?? (label ? label.toLowerCase().replace(/\s+/g, '-') : undefined));
+  // $props.id() and not the label: two fields under one label on a page took
+  // one id, and both labels named the first control. It also matches between
+  // the server render and hydration, which a random string would not.
+  const uid = $props.id();
+  const fieldId = $derived(id ?? uid);
 
   function dec() {
     const next = value - step;
@@ -75,11 +79,15 @@
   // Under a finger the control token grows to 44px, and steppers as wide as the
   // token left the number 40px inside a 128px field. They narrow instead and
   // take a hit box of the control size, so the number keeps its room and each
-  // stepper is still a 44px target.
+  // stepper is still a 44px target. A box centered on a 32px stepper reaches
+  // 6px past each side, into the number on one of them, so each box is pinned
+  // to the edge the stepper shares with the number and grows outward instead.
+  // The sides are logical, so a right-to-left page mirrors them.
   const step_ =
     `${HIT_AREA} flex w-control shrink-0 items-center justify-center border-line-strong bg-surface-2 text-muted coarse:w-8 ` +
     'transition-colors hover:bg-line hover:text-fg ' +
-    'disabled:opacity-50 disabled:cursor-not-allowed';
+    'disabled:opacity-50 disabled:cursor-not-allowed ' +
+    'coarse:before:translate-x-0 coarse:before:-translate-y-1/2';
 </script>
 
 <div data-field class="{FIELD_WRAP} {cls}">
@@ -95,7 +103,7 @@
       onclick={dec}
       disabled={!canDec}
       aria-label="Decrease"
-      class="{step_} rounded-s-lg border border-e-0"
+      class="{step_} rounded-s-lg border border-e-0 coarse:before:start-auto coarse:before:end-0"
     >
       <svg
         width="14"
@@ -139,7 +147,7 @@
       onclick={inc}
       disabled={!canInc}
       aria-label="Increase"
-      class="{step_} rounded-e-lg border border-s-0"
+      class="{step_} rounded-e-lg border border-s-0 coarse:before:start-0 coarse:before:end-auto"
     >
       <svg
         width="14"
@@ -157,8 +165,8 @@
   </div>
 
   {#if error}
-    <p id={fieldId ? `${fieldId}-error` : undefined} class={FIELD_ERROR}>{error}</p>
+    <p id="{fieldId}-error" class={FIELD_ERROR}>{error}</p>
   {:else if hint}
-    <p id={fieldId ? `${fieldId}-hint` : undefined} class={FIELD_HINT}>{hint}</p>
+    <p id="{fieldId}-hint" class={FIELD_HINT}>{hint}</p>
   {/if}
 </div>

package/dist/components/PasswordInput.svelte

@@ -117,19 +117,21 @@
     {#if showToggle}
       <!-- type="button" is load bearing. A button inside a form defaults to
            type="submit", so a reveal control on a login form posted the form
-           on the first click and the user never saw what they had typed. -->
+           on the first click and the user never saw what they had typed.
+           The button holds its 27px around a 14px icon, the rung of the
+           text it sits on, so its touch target stays where it was. -->
       <button
         type="button"
         onclick={() => (revealed = !revealed)}
         aria-pressed={revealed}
         aria-controls={fieldId}
         aria-label={revealed ? 'Hide password' : 'Show password'}
-        class="{HIT_AREA_POSITIONED} absolute top-1/2 end-1 flex -translate-y-1/2 items-center justify-center rounded-md p-1.5 text-faint outline-none transition-colors hover:text-fg focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand"
+        class="{HIT_AREA_POSITIONED} absolute top-1/2 end-1 flex size-6.75 -translate-y-1/2 items-center justify-center rounded-md p-1.5 text-faint outline-none transition-colors hover:text-fg focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand"
       >
         {#if revealed}
-          <EyeOff size={15} aria-hidden="true" />
+          <EyeOff size={14} aria-hidden="true" />
         {:else}
-          <Eye size={15} aria-hidden="true" />
+          <Eye size={14} aria-hidden="true" />
         {/if}
       </button>
     {/if}

package/dist/components/SearchInput.svelte

@@ -24,7 +24,11 @@
     oninput = undefined,
   }: Props = $props();
 
-  const fieldId = $derived(id ?? (label ? label.toLowerCase().replace(/\s+/g, '-') : undefined));
+  // $props.id() and not the label: two fields under one label on a page took
+  // one id, and both labels named the first control. It also matches between
+  // the server render and hydration, which a random string would not.
+  const uid = $props.id();
+  const fieldId = $derived(id ?? uid);
 
   // bind:value keeps what was typed before hydration. A one-way value
   // cleared it. The binding has updated value by the time this runs.

package/dist/components/SegmentedControl.svelte

@@ -64,6 +64,11 @@
      * own hint or error.
      */
     describedBy?: string;
+    /**
+     * The id of a caption drawn outside the row, a `Field` one for instance.
+     * The group takes its name from it in place of `label`.
+     */
+    labelledBy?: string;
     /** Submits the value with the surrounding form, through a hidden input. */
     name?: string;
     size?: Size;
@@ -82,6 +87,7 @@
     hint = undefined,
     error = undefined,
     describedBy: callerIds = undefined,
+    labelledBy = undefined,
     name = undefined,
     size = 'md',
     disabled = false,
@@ -222,9 +228,9 @@
 
 <div data-field class="{FIELD_WRAP} items-start {klass}">
   {#if !labelHidden}
-    <!-- A caption, not a label element. The group is named by aria-label, and a
-         label has nothing to point at here: role="radiogroup" is not a form
-         control that `for` can name. -->
+    <!-- A caption, not a label element. The group is named by aria-label, or
+         by the caption it is handed, and a label has nothing to point at
+         here: role="radiogroup" is not a form control that `for` can name. -->
     <span class={FIELD_LABEL}>{label}</span>
   {/if}
 
@@ -246,7 +252,8 @@
     bind:this={rootEl}
     {id}
     role={linked ? 'group' : 'radiogroup'}
-    aria-label={label}
+    aria-label={labelledBy ? undefined : label}
+    aria-labelledby={labelledBy}
     aria-invalid={error && !linked ? 'true' : undefined}
     aria-describedby={describedByIds}
     onfocusout={linked ? onGroupFocusOut : undefined}

package/dist/components/SegmentedControl.svelte.d.ts

@@ -50,6 +50,11 @@ declare function $$render<T extends string>(): {
          * own hint or error.
          */
         describedBy?: string;
+        /**
+         * The id of a caption drawn outside the row, a `Field` one for instance.
+         * The group takes its name from it in place of `label`.
+         */
+        labelledBy?: string;
         /** Submits the value with the surrounding form, through a hidden input. */
         name?: string;
         size?: "sm" | "md";

package/dist/components/Select.svelte

@@ -124,14 +124,11 @@
    * render and hydration, and both the label association and every idref the
    * listbox emits are built from this one.
    *
-   * The label-derived id stays for a control that has a label, because call
-   * sites point their own markup at it. The fallback used to be undefined,
-   * which left an error message with no id and the control with no
-   * aria-describedby, so an unlabeled field announced its value and never the
-   * reason it was rejected.
+   * The id is never made from the label: two fields under one label on a
+   * page took one id, and both labels named the first control.
    */
   const uid = $props.id();
-  const fieldId = $derived(id ?? (label ? label.toLowerCase().replace(/\s+/g, '-') : uid));
+  const fieldId = $derived(id ?? uid);
 
   let query = $state('');
   let triggerEl = $state<HTMLButtonElement | undefined>();

package/dist/components/Textarea.svelte

@@ -55,7 +55,11 @@
     onblur?: (e: FocusEvent & { currentTarget: TA }) => void;
   } = $props();
 
-  const fieldId = $derived(id ?? (label ? label.toLowerCase().replace(/\s+/g, '-') : undefined));
+  // $props.id() and not the label: two fields under one label on a page took
+  // one id, and both labels named the first control. It also matches between
+  // the server render and hydration, which a random string would not.
+  const uid = $props.id();
+  const fieldId = $derived(id ?? uid);
 </script>
 
 <div data-field class="{FIELD_WRAP} {cls}">
@@ -85,8 +89,8 @@
   ></textarea>
 
   {#if error}
-    <p id={fieldId ? `${fieldId}-error` : undefined} class={FIELD_ERROR}>{error}</p>
+    <p id="{fieldId}-error" class={FIELD_ERROR}>{error}</p>
   {:else if hint}
-    <p id={fieldId ? `${fieldId}-hint` : undefined} class={FIELD_HINT}>{hint}</p>
+    <p id="{fieldId}-hint" class={FIELD_HINT}>{hint}</p>
   {/if}
 </div>

package/dist/index.d.ts

@@ -103,4 +103,4 @@ export { cn, type ClassValue } from './utils/cn.js';
 export { getTheme, getThemePreference, nextThemePreference, resolveTheme, setTheme, setThemePreference, systemTheme, themeBootScript, watchThemePreference, toggleTheme, watchSystemTheme, THEME_PREFERENCES, type Theme, type ThemePreference, } from './utils/theme.js';
 export * as motion from './motion.js';
 export type { Rung as MotionRung, Curve as MotionCurve } from './motion.js';
-export declare const VERSION = "0.38.5";
+export declare const VERSION = "0.39.0";

package/dist/index.js

@@ -116,4 +116,4 @@ export * as motion from './motion.js';
 // ── Version ────────────────────────────────────────────────────────────────
 // Generated from package.json by `pnpm version:sync`. Bump package.json, never
 // this line. The build and the test suite fail when the two disagree.
-export const VERSION = '0.38.5';
+export const VERSION = '0.39.0';

package/dist/internal/panel.d.ts

@@ -131,8 +131,8 @@ export declare const PANEL_LIST_ATTR = "data-panel-list";
  *
  * The token cap is sized for a list of rows, and a calendar is not one: six
  * weeks of days stand taller than the token, so under it every month would
- * scroll by a few rows. Such a region still takes the room as its cap, so
- * inside a short modal it scrolls rather than being cut.
+ * scroll by a few rows. Such a region takes the room as its cap, and never
+ * less than its whole height: a calendar that scrolls is one nobody can read.
  */
 export declare const PANEL_LIST_UNCAPPED = "uncapped";
 /** The classes that put the surface under its anchor. */
@@ -158,6 +158,14 @@ export declare const PANEL_ABOVE = "bottom-full mb-1 origin-bottom";
  * the cap without this code knowing its value. A region marked uncapped takes
  * the room alone.
  *
+ * Neither side may hold even that: a one-field modal body is about 100px
+ * tall, and capped to it a calendar showed its month row and a list no whole
+ * row. When neither side has room for the region's least height, the panel
+ * opens below at its own height and the anchor takes a bottom margin of that
+ * height, so the container grows to hold it or scrolls to it, and the panel
+ * is brought into view. The room is kept until the panel closes, because the
+ * container it lengthened would otherwise read as room to spare.
+ *
  * A panel that would run past the left or the right edge of the clipping
  * ancestor or the viewport slides back inside both, and one wider than that
  * room shrinks to it.

package/dist/internal/panel.js

@@ -141,8 +141,8 @@ export const PANEL_LIST_ATTR = 'data-panel-list';
  *
  * The token cap is sized for a list of rows, and a calendar is not one: six
  * weeks of days stand taller than the token, so under it every month would
- * scroll by a few rows. Such a region still takes the room as its cap, so
- * inside a short modal it scrolls rather than being cut.
+ * scroll by a few rows. Such a region takes the room as its cap, and never
+ * less than its whole height: a calendar that scrolls is one nobody can read.
  */
 export const PANEL_LIST_UNCAPPED = 'uncapped';
 /** The classes that put the surface under its anchor. */
@@ -154,6 +154,27 @@ export const PANEL_ABOVE = 'bottom-full mb-1 origin-bottom';
  * panel that fits exactly does not sit on the edge of the window or the modal.
  */
 const PANEL_EDGE_GAP = 8;
+/** The gap PANEL_BELOW opens between the anchor and the surface, mt-1. */
+const PANEL_OFFSET = 4;
+/**
+ * The fewest rows a list keeps in view, or all of them when it has fewer.
+ * Below that a list is a slot that scrolls one row at a time.
+ */
+const PANEL_MIN_ROWS = 4;
+/**
+ * The least height a region is usable at: an uncapped region's whole height,
+ * a list's first few rows and its padding, or a short list whole.
+ */
+function leastHeight(list, capped) {
+    const rows = list.querySelectorAll('[role="option"], [role="menuitem"]');
+    if (!capped || rows.length <= PANEL_MIN_ROWS)
+        return list.scrollHeight;
+    const style = getComputedStyle(list);
+    let height = (parseFloat(style.paddingTop) || 0) + (parseFloat(style.paddingBottom) || 0);
+    for (let i = 0; i < PANEL_MIN_ROWS; i++)
+        height += rows[i].offsetHeight;
+    return height;
+}
 /**
  * The nearest ancestor that clips or scrolls its content.
  *
@@ -197,6 +218,14 @@ function swap(node, remove, add) {
  * the cap without this code knowing its value. A region marked uncapped takes
  * the room alone.
  *
+ * Neither side may hold even that: a one-field modal body is about 100px
+ * tall, and capped to it a calendar showed its month row and a list no whole
+ * row. When neither side has room for the region's least height, the panel
+ * opens below at its own height and the anchor takes a bottom margin of that
+ * height, so the container grows to hold it or scrolls to it, and the panel
+ * is brought into view. The room is kept until the panel closes, because the
+ * container it lengthened would otherwise read as room to spare.
+ *
  * A panel that would run past the left or the right edge of the clipping
  * ancestor or the viewport slides back inside both, and one wider than that
  * room shrinks to it.
@@ -212,6 +241,8 @@ export function placePanel(node) {
     const anchor = node.offsetParent instanceof HTMLElement ? node.offsetParent : node.parentElement;
     const clip = anchor === null ? null : clippingAncestor(anchor);
     const list = node.querySelector(`[${PANEL_LIST_ATTR}]`);
+    const capped = list?.getAttribute(PANEL_LIST_ATTR) !== PANEL_LIST_UNCAPPED;
+    let reserved = false;
     function measure() {
         if (anchor === null)
             return;
@@ -227,7 +258,11 @@ export function placePanel(node) {
         const below = clipBottom - rect.bottom - PANEL_EDGE_GAP;
         const above = rect.top - clipTop - PANEL_EDGE_GAP;
         const natural = node.scrollHeight;
-        const flip = natural > below && above > below;
+        // What the surface adds around the list, a search field for instance, is
+        // taken out of the room so the whole panel fits and not only its list.
+        const chrome = list === null ? 0 : Math.max(0, node.offsetHeight - list.offsetHeight);
+        const reserve = reserved || (list !== null && chrome + leastHeight(list, capped) > Math.max(above, below));
+        const flip = !reserve && natural > below && above > below;
         if (flip)
             swap(node, PANEL_BELOW, PANEL_ABOVE);
         else
@@ -260,15 +295,35 @@ export function placePanel(node) {
             shift = lo - left;
         }
         node.style.translate = shift === 0 ? '' : `${shift}px 0`;
-        if (list === null)
+        if (list === null || anchor === null)
             return;
-        // What the surface adds around the list, a search field for instance, is
-        // taken out of the room so the whole panel fits and not only its list.
-        const chrome = Math.max(0, node.offsetHeight - list.offsetHeight);
+        if (reserve) {
+            anchor.style.marginBottom = `${node.offsetHeight + PANEL_OFFSET}px`;
+            if (!reserved)
+                reveal();
+            reserved = true;
+            return;
+        }
         const room = Math.max(0, Math.round((flip ? above : below) - chrome));
-        const capped = list.getAttribute(PANEL_LIST_ATTR) !== PANEL_LIST_UNCAPPED;
         list.style.maxHeight = capped ? `min(var(--spacing-panel-max), ${room}px)` : `${room}px`;
     }
+    /**
+     * Scrolls the container down until the panel's bottom is in view, or its
+     * top when it is taller than the container. Down only: scrollIntoView also
+     * scrolls sideways, and a modal body on a 320px phone took a 20px sideways
+     * scroll from the room the panel's slide back had already made up.
+     */
+    function reveal() {
+        const target = clip ?? window;
+        if (typeof target.scrollBy !== 'function')
+            return;
+        const top = node.getBoundingClientRect().top;
+        const clipTop = clip === null ? 0 : clip.getBoundingClientRect().top;
+        const clipBottom = clip === null ? window.innerHeight : clip.getBoundingClientRect().bottom;
+        const by = Math.min(top + node.offsetHeight + PANEL_EDGE_GAP - clipBottom, top - clipTop);
+        if (by > 0)
+            target.scrollBy(0, by);
+    }
     measure();
     const scroller = clip ?? window;
     window.addEventListener('resize', measure, { passive: true });
@@ -277,6 +332,8 @@ export function placePanel(node) {
         destroy() {
             window.removeEventListener('resize', measure);
             scroller.removeEventListener('scroll', measure);
+            if (reserved && anchor !== null)
+                anchor.style.marginBottom = '';
         },
     };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lyeve-labs/ui-kit",
-  "version": "0.38.5",
+  "version": "0.39.0",
   "description": "A clean, accessible, palette-aware Svelte 5 component library. The design system behind LyEve.",
   "license": "MIT",
   "author": "LyEve Labs <hello@lyeve.com>",