@lyeve-labs/ui-kit 0.38.4 → 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,15 +246,18 @@
         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
         neighbors'. Seven 44px columns are 308px. Inside a 1px border and 6px
         of padding that is a 320px panel, the width of the narrowest phone,
-        and placePanel slides it back on screen from the page gutter. The rows
-        open a 12px gap for the same reason.
+        and placePanel slides it back on screen from the page gutter. In a
+        modal body narrower than that, placePanel shrinks it to the body and
+        the columns close up, but never below the grid: seven 32px days, six
+        2px gaps, the padding and the border, or the days would overflow and
+        the calendar scroll sideways inside itself. The rows open a 12px gap for the same reason.
       -->
       <div
         id={calendarId}
@@ -262,14 +265,17 @@
         aria-label="Choose date"
         use:placePanel
         transition:motion.popover|global
-        class="{PANEL_SURFACE} w-68 coarse:w-80"
+        class="{PANEL_SURFACE} w-68 min-w-65.5 coarse:w-80 coarse:min-w-62.5"
       >
         <div
           class="overflow-y-auto overscroll-contain p-3 coarse:p-1.5"
           data-panel-list={PANEL_LIST_UNCAPPED}
         >
-          <!-- Header -->
-          <div class="flex items-center justify-between mb-2">
+          <!-- Header. Under a finger each 26px month step takes a 44px box,
+               9px past it, and the region's padding is 6px, so the header
+               insets itself by the other 3px at the sides and the top. The
+               boxes stay whole inside the calendar, which no longer pans. -->
+          <div class="flex items-center justify-between mb-2 coarse:px-0.75 coarse:pt-0.75">
             <button
               type="button"
               aria-label="Previous month"
@@ -313,7 +319,17 @@
           </div>
 
           <!-- Day grid -->
-          <div class="grid grid-cols-7 gap-0.5 coarse:gap-y-3" data-day-grid>
+          <!--
+            Shrunk into a narrow modal, the columns close below 44px and the
+            day boxes would overlap. The grid is a container, so each box
+            takes the smaller of the control size and one column's pitch, the
+            grid's width and one gap over seven, and keeps its height. The
+            boxes meet at any width.
+          -->
+          <div
+            class="@container grid grid-cols-7 gap-0.5 coarse:gap-y-3 coarse:[--hit-width:min(var(--spacing-control),calc((100cqw_+_0.125rem)_/_7))]"
+            data-day-grid
+          >
             {#each cells as d}
               {#if d === null}
                 <span></span>

package/dist/components/Drawer.svelte

@@ -66,6 +66,19 @@
 
   const rung = $derived(size === 'auto' ? fitOverlay(fields) : size);
 
+  let frameEl = $state<HTMLDivElement | undefined>();
+
+  /**
+   * The edge the panel slides from. It docks by the start and end of the
+   * line, so `right` sits at the left edge of a right-to-left page, and a
+   * slide from the right would cross the whole screen to get there. Read when
+   * the panel moves, as AppShell reads its own drawer's.
+   */
+  function edge(): Side {
+    const rtl = frameEl !== undefined && getComputedStyle(frameEl).direction === 'rtl';
+    return (side === 'right') !== rtl ? 'right' : 'left';
+  }
+
   const headingId = $props.id();
   const descriptionId = `${headingId}-description`;
 
@@ -86,6 +99,7 @@
 
 {#if open}
   <div
+    bind:this={frameEl}
     data-print="hide"
     class="fixed inset-0 z-drawer flex {side === 'right' ? 'justify-end' : 'justify-start'}"
   >
@@ -100,7 +114,7 @@
 
     <div
       use:overlay
-      transition:motion.drawer|global={{ side }}
+      transition:motion.drawer|global={{ side: edge() }}
       class="relative flex h-full w-full flex-col {OVERLAY_WIDTH[rung]} bg-surface shadow-2xl
         {side === 'right' ? 'border-s' : 'border-e'} border-line"
       role="dialog"

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

@@ -178,12 +178,20 @@
       which a screen reader reads as one widget and a keyboard cannot sort
       out. A press anywhere on the frame that is not a remove button opens the
       list from the combobox, as a press on the field always did.
+
+      Under a finger each remove cross takes a 44px box on a 20px chip, which
+      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 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="flex min-h-control w-full cursor-pointer flex-wrap items-center gap-1.5 rounded-lg
-        border bg-surface-2 px-2.5 py-1.5 text-start text-sm transition-colors
+      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 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' : ''}
@@ -193,8 +201,11 @@
         A div and not an input: there is nothing to type here. The labels of
         the chosen values are its text, so focusing it reads the label and
         then what is chosen, as a select reads its value. It comes first in
-        the markup, so Tab reaches the field before any remove button, and
-        order-last draws it after the chips.
+        the markup, so Tab reaches the field before any remove button, and it
+        spans the frame as the field itself, so it comes first on screen too.
+        A press on a chip lands on it. The remove buttons are positioned and
+        later in the markup, so they sit above it and take their own presses.
+        The frame keeps room at its end for the chevron.
       -->
       <div
         bind:this={triggerEl}
@@ -207,10 +218,10 @@
         aria-describedby={describedBy(fieldId, error, hint)}
         onkeydown={onTriggerKeydown}
         {...box.triggerAttrs}
-        class="order-last flex min-w-12 flex-1 items-center gap-1.5 self-stretch outline-none"
+        class="absolute inset-0 flex items-center gap-1.5 rounded-lg px-2.5 outline-none"
       >
         {#if selected.length === 0}
-          <span class="px-0.5 text-faint">{placeholder}</span>
+          <span class="min-w-0 truncate px-0.5 text-faint">{placeholder}</span>
         {:else}
           <span class="sr-only">{selected.map((option) => option.label).join(', ')}</span>
         {/if}

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/Tag.svelte

@@ -28,9 +28,18 @@
   };
 </script>
 
+<!--
+  Under a finger the remove cross takes a 44px box on a 22px tag, which
+  reaches 11px above and below the tag and 8px past its end. A removable tag
+  claims that room as margin there, so the boxes in a row of tags meet
+  without overlapping, wrapped or not, whatever gap the row sets. That
+  margin makes a removable tag 44px tall in a row, so every tag centers
+  itself, and a plain tag beside it neither stretches to 44px nor sits at
+  the top of the line, whatever the row aligns.
+-->
 <span
-  class="inline-flex items-center gap-1 rounded-md border px-2 py-0.5
-    text-xs font-medium {tones[tone]} {cls}"
+  class="inline-flex items-center self-center gap-1 rounded-md border px-2 py-0.5
+    text-xs font-medium {removable ? 'coarse:my-2.75 coarse:me-2' : ''} {tones[tone]} {cls}"
 >
   {label}
   {#if removable}

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/components/TreeView.svelte

@@ -45,10 +45,10 @@
   const expandedSet = $derived(new Set(expanded));
 
   /**
-   * Branches whose children have been shown once. They stay mounted after a
-   * collapse so the collapse can animate. A branch nobody opened mounts
-   * nothing, so a tree of thousands of nodes renders what a reader opened and
-   * not the whole tree.
+   * Branches whose children are mounted. A branch stays mounted after a
+   * collapse until the collapse has played, and then unmounts. A branch nobody
+   * opened mounts nothing, so a tree of thousands of nodes renders the rows a
+   * reader has open and not the whole tree, nor every row it ever showed.
    */
   const shown = $state<Record<string, boolean>>({});
   $effect.pre(() => {
@@ -347,10 +347,16 @@
         A branch opens and shuts on grid-template-rows, the AccordionItem
         collapse, so its children slide rather than appear in one frame. Shut,
         they are inert: out of the tab order and the accessibility tree while
-        they stay mounted for the collapse to play.
+        they stay mounted for the collapse to play, and they unmount when it
+        ends. A nested branch's transition bubbles up here, so only this
+        wrapper's own counts.
       -->
       {#if isBranch(node)}
         <div
+          ontransitionend={(event) => {
+            if (event.target !== event.currentTarget || open) return;
+            if (event.propertyName === 'grid-template-rows') shown[node.id] = false;
+          }}
           class="grid transition-[grid-template-rows] duration-base {open
             ? 'grid-rows-[1fr]'
             : 'grid-rows-[0fr]'}"

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.4";
+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.4';
+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,9 +158,17 @@ 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 keeps its start edge in view.
+ * room shrinks to it.
  *
  * Measured on mount, on resize and on scroll of the clipping ancestor, since
  * each moves the anchor relative to the edge. Scroll does not bubble, so the

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,9 +218,17 @@ 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 keeps its start edge in view.
+ * room shrinks to it.
  *
  * Measured on mount, on resize and on scroll of the clipping ancestor, since
  * each moves the anchor relative to the edge. Scroll does not bubble, so the
@@ -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
@@ -235,12 +270,18 @@ export function placePanel(node) {
         // A panel wider than the room beside its anchor slides back inside what
         // the reader can see, which is the clip and the viewport both: the
         // calendar under a finger is as wide as a 320px phone, and its field
-        // starts at the page gutter or inside a modal body's padding. Where it is
-        // wider than that room it keeps its start edge in view. Read from the
-        // layout box, which the entrance preset's scale does not shrink.
+        // starts at the page gutter or inside a modal body's padding. A panel
+        // wider than that room shrinks to it, since a modal body on a 320px phone
+        // is narrower than the calendar and scrolled sideways around it. Should
+        // it still be wider, it keeps its start edge in view. Read from the
+        // layout box, which the entrance preset's scale does not shrink, and from
+        // the width the class gives, not one an earlier measurement capped.
+        node.style.maxWidth = '';
         const viewport = document.documentElement.clientWidth || window.innerWidth;
         const lo = Math.max(0, clipBox?.left ?? 0);
         const hi = Math.min(viewport, clipBox?.right ?? viewport);
+        if (node.offsetWidth > hi - lo)
+            node.style.maxWidth = `${hi - lo}px`;
         const left = rect.left + node.offsetLeft;
         const right = left + node.offsetWidth;
         let shift = 0;
@@ -254,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 });
@@ -271,6 +332,8 @@ export function placePanel(node) {
         destroy() {
             window.removeEventListener('resize', measure);
             scroller.removeEventListener('scroll', measure);
+            if (reserved && anchor !== null)
+                anchor.style.marginBottom = '';
         },
     };
 }

package/dist/styles/theme.css

@@ -358,7 +358,10 @@
  * position it set would fight the `absolute` an input's clear button relies
  * on. Neighbors are spaced so their boxes meet rather than overlap: the
  * later one in document order takes an overlap, so a tap near the edge of
- * one control lands on the next.
+ * one control lands on the next. Where the room cannot hold that spacing, a
+ * calendar shrunk into a narrow modal for instance, the row sets
+ * `--hit-width` to the width each target has, and the boxes take that width
+ * and keep the control height.
  */
 @custom-variant coarse (@media (pointer: coarse));
 
@@ -377,7 +380,7 @@
       top: 50%;
       width: 100%;
       height: 100%;
-      min-width: var(--spacing-control);
+      min-width: var(--hit-width, var(--spacing-control));
       min-height: var(--spacing-control);
       translate: -50% -50%;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lyeve-labs/ui-kit",
-  "version": "0.38.4",
+  "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>",

package/src/lib/styles/theme.css

@@ -358,7 +358,10 @@
  * position it set would fight the `absolute` an input's clear button relies
  * on. Neighbors are spaced so their boxes meet rather than overlap: the
  * later one in document order takes an overlap, so a tap near the edge of
- * one control lands on the next.
+ * one control lands on the next. Where the room cannot hold that spacing, a
+ * calendar shrunk into a narrow modal for instance, the row sets
+ * `--hit-width` to the width each target has, and the boxes take that width
+ * and keep the control height.
  */
 @custom-variant coarse (@media (pointer: coarse));
 
@@ -377,7 +380,7 @@
       top: 50%;
       width: 100%;
       height: 100%;
-      min-width: var(--spacing-control);
+      min-width: var(--hit-width, var(--spacing-control));
       min-height: var(--spacing-control);
       translate: -50% -50%;
     }