@lyeve-labs/ui-kit 0.23.2 → 0.23.3

package/dist/components/Autocomplete.svelte

@@ -42,7 +42,13 @@
   } from '../internal/field.js';
   import { applyFilter, type FilterInput } from '../internal/filter.js';
   import { createListbox } from '../internal/listbox.svelte.js';
-  import { PANEL_EMPTY, PANEL_LIST, PANEL_SURFACE, panelOption } from '../internal/panel.js';
+  import {
+    PANEL_EMPTY,
+    PANEL_LIST,
+    PANEL_SURFACE,
+    panelOption,
+    placePanel,
+  } from '../internal/panel.js';
 
   interface Props {
     /** The chosen option's value. Empty for none. */
@@ -228,8 +234,8 @@
     {/if}
 
     {#if box.open}
-      <div class="{PANEL_SURFACE} w-full">
-        <div class={PANEL_LIST} use:panel {...box.listAttrs}>
+      <div use:placePanel class="{PANEL_SURFACE} w-full">
+        <div class={PANEL_LIST} data-panel-list use:panel {...box.listAttrs}>
           {#each rows as option, index (option.value)}
             {@const isSelected = option.value === value}
             <!--

package/dist/components/Dropdown.svelte

@@ -12,6 +12,7 @@
    * and Escape and Tab both close and hand focus back to the trigger.
    */
   import type { Component, Snippet } from 'svelte';
+  import { PANEL_LIST, PANEL_SURFACE, placePanel } from '../internal/panel.js';
 
   interface DropdownItem {
     label: string;
@@ -242,33 +243,40 @@
   {@render trigger({ open, toggle })}
 
   {#if open}
+    <!--
+      The surface and the list come from the shared panel module, so a menu of
+      eighty items scrolls inside the same cap as a listbox and opens upward
+      when the room under the trigger has run out. The rows keep their own
+      classes: a danger row hovers in its own tint, which the shared option
+      row has no state for.
+    -->
     <div
       bind:this={menuEl}
       role="menu"
-      class="absolute z-dropdown mt-1 py-1 min-w-36 rounded-xl border border-line
-        bg-surface shadow-2xl
-        {align === 'right' ? 'end-0' : 'start-0'}"
+      use:placePanel
+      class="{PANEL_SURFACE} min-w-36 {align === 'right' ? 'end-0' : 'start-0'}"
     >
-      {#each items as item, index}
-        <button
-          type="button"
-          role="menuitem"
-          disabled={item.disabled}
-          tabindex={index === active ? 0 : -1}
-          onclick={() => handleItemClick(item)}
-          class="w-full flex items-center gap-2.5 px-3 py-2 text-sm transition-colors duration-150
-            disabled:opacity-40 disabled:cursor-not-allowed
-            {item.variant === 'danger'
-            ? 'text-danger hover:bg-danger/10'
-            : 'text-fg hover:bg-surface-2'}"
-        >
-          {#if item.icon}
-            {@const Icon = item.icon}
-            <Icon size={14} class="shrink-0" />
-          {/if}
-          {item.label}
-        </button>
-      {/each}
+      <div class={PANEL_LIST} data-panel-list>
+        {#each items as item, index}
+          <button
+            type="button"
+            role="menuitem"
+            disabled={item.disabled}
+            tabindex={index === active ? 0 : -1}
+            onclick={() => handleItemClick(item)}
+            class="flex w-full items-center gap-2.5 rounded-lg px-2 py-2 text-sm transition-colors
+              duration-150 outline-none focus-visible:ring-2 focus-visible:ring-inset
+              focus-visible:ring-brand disabled:cursor-not-allowed disabled:opacity-40
+              {item.variant === 'danger' ? 'text-danger hover:bg-danger/10' : 'hover:bg-surface-2'}"
+          >
+            {#if item.icon}
+              {@const Icon = item.icon}
+              <Icon size={14} class="shrink-0" />
+            {/if}
+            {item.label}
+          </button>
+        {/each}
+      </div>
     </div>
   {/if}
 </div>

package/dist/components/MultiSelect.svelte

@@ -18,7 +18,13 @@
     describedBy,
   } from '../internal/field.js';
   import { createListbox } from '../internal/listbox.svelte.js';
-  import { PANEL_EMPTY, PANEL_LIST, PANEL_SURFACE, panelOption } from '../internal/panel.js';
+  import {
+    PANEL_EMPTY,
+    PANEL_LIST,
+    PANEL_SURFACE,
+    panelOption,
+    placePanel,
+  } from '../internal/panel.js';
   import type { ListOption } from './Autocomplete.svelte';
 
   interface Props {
@@ -246,7 +252,7 @@
     </div>
 
     {#if box.open}
-      <div class="{PANEL_SURFACE} w-full">
+      <div use:placePanel class="{PANEL_SURFACE} w-full">
         {#if searchable}
           <div class="border-b border-line p-2">
             <input
@@ -268,7 +274,13 @@
           </div>
         {/if}
 
-        <div class={PANEL_LIST} use:panel {...box.listAttrs} aria-multiselectable="true">
+        <div
+          class={PANEL_LIST}
+          data-panel-list
+          use:panel
+          {...box.listAttrs}
+          aria-multiselectable="true"
+        >
           {#each rows as option, index (option.value)}
             {@const isSelected = chosen.has(option.value)}
             <!--

package/dist/components/Select.svelte

@@ -82,6 +82,7 @@
     PANEL_LIST,
     PANEL_SURFACE,
     panelOption,
+    placePanel,
   } from '../internal/panel.js';
 
   interface Props {
@@ -407,7 +408,7 @@
       <input type="hidden" {name} {disabled} value={value ?? ''} />
 
       {#if box.open}
-        <div class="{PANEL_SURFACE} w-full">
+        <div use:placePanel class="{PANEL_SURFACE} w-full">
           {#if searchable}
             <div class="border-b border-line p-2">
               <!--
@@ -437,7 +438,7 @@
             </div>
           {/if}
 
-          <div class={PANEL_LIST} use:panel {...box.listAttrs}>
+          <div class={PANEL_LIST} data-panel-list use:panel {...box.listAttrs}>
             {#each blocks as block, position (position)}
               {#if block.group !== undefined}
                 <!-- Named once, on the group. The heading repeats it on screen. -->

package/dist/index.d.ts

@@ -89,4 +89,4 @@ export type { ConfirmOptions } from './components/dialog/dialog-manager.svelte.j
 export type { DialogOptions, DialogEntry, DialogSize } from './components/dialog/types.js';
 export { cn, type ClassValue } from './utils/cn.js';
 export { getTheme, getThemePreference, nextThemePreference, resolveTheme, setTheme, setThemePreference, systemTheme, themeBootScript, toggleTheme, watchSystemTheme, THEME_PREFERENCES, type Theme, type ThemePreference, } from './utils/theme.js';
-export declare const VERSION = "0.23.2";
+export declare const VERSION = "0.23.3";

package/dist/index.js

@@ -96,4 +96,4 @@ export { getTheme, getThemePreference, nextThemePreference, resolveTheme, setThe
 // ── 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.23.2';
+export const VERSION = '0.23.3';

package/dist/internal/panel.d.ts

@@ -26,10 +26,15 @@
  * Width stays at the call site: a menu sized to its trigger and a calendar
  * sized to seven columns are different requirements. Everything else is here.
  *
- * One rule holds these together. No row carries two utilities for the same
+ * Two rules hold these together. No row carries two utilities for the same
  * property. Colour and background sit on the surface, and a row states only
  * the override its state earns, because two utilities for one property resolve
  * in the order Tailwind emits them and not in the order they were written.
+ * And a row is inset and rounded, never square and full width: the surface is
+ * rounded-xl, so a ring or tint that reaches its edge is cut at the corners on
+ * the first and last row. The list pads the rows in by px-1 and each row takes
+ * rounded-lg, so what a row paints stays inside the frame with corners of its
+ * own.
  *
  * Not exported from the package entry point - this is an implementation detail.
  */
@@ -40,24 +45,32 @@
  * needs a boundary that clears 3:1, which line does not. It carries the
  * resting text colour so a row can override it with a single utility.
  *
- * overflow-hidden, because the rows are square and the panel is not: the
- * active ring on the first or last row drew its corners past the panel's
- * rounded ones, a box poking out of the box that holds it.
+ * overflow-hidden is a backstop, not the shape: the rows sit inset with
+ * corners of their own, so nothing they paint reaches the rounded frame. It
+ * still clips a caller's stray full-width child, and it keeps the search
+ * field's corners inside the surface's.
+ *
+ * No vertical offset and no side. Both belong to placePanel, which measures
+ * the room and puts the panel above the anchor when there is none below.
  */
-export declare const PANEL_SURFACE = "absolute z-dropdown mt-1 overflow-hidden rounded-xl border border-line-strong bg-surface text-fg shadow-2xl";
+export declare const PANEL_SURFACE = "absolute z-dropdown overflow-hidden rounded-xl border border-line-strong bg-surface text-fg shadow-2xl";
 /**
  * The scrolling region inside it.
  *
  * The cap is a token, not max-h-60, so a fifth panel cannot pick a different
  * one. overscroll-contain stops a wheel that has reached the end of the list
- * from carrying on into the page behind the open panel.
+ * from carrying on into the page behind the open panel. px-1 insets the rows
+ * from the frame, so a row's ring and hover tint sit inside the surface's
+ * rounded corners instead of being cut by them on the first and last row.
  */
-export declare const PANEL_LIST = "max-h-panel-max overflow-y-auto overscroll-contain py-1";
+export declare const PANEL_LIST = "max-h-panel-max overflow-y-auto overscroll-contain px-1 py-1";
 /**
  * One row at rest.
  *
  * No background and no text colour of its own: it inherits both from the
  * surface, which leaves each state below a single utility to override.
+ * rounded-lg, one step inside the surface's rounded-xl, so the hover tint and
+ * the active ring follow the row's own corners.
  */
 export declare const PANEL_OPTION: string;
 /**
@@ -65,7 +78,7 @@ export declare const PANEL_OPTION: string;
  *
  * A tint alone reads 1.09:1 against the panel, which is not a visible state,
  * so the active row also carries an inset brand ring. Inset because the row
- * spans the full width of the panel and an outset ring is clipped by it.
+ * fills the list's inner width and an outset ring would run into the frame.
  */
 export declare const PANEL_OPTION_ACTIVE = "bg-surface-2 ring-1 ring-inset ring-brand";
 /**
@@ -83,10 +96,18 @@ export declare const PANEL_OPTION_SELECTED = "font-medium text-brand";
  * by emitted order, so the row could take the tint and read as choosable.
  */
 export declare const PANEL_OPTION_DISABLED = "pointer-events-none opacity-40";
-/** The line shown when a filter matched nothing. */
-export declare const PANEL_EMPTY = "px-3 py-2 text-sm text-faint";
-/** A group heading inside the list. Not focusable, so it takes no row classes. */
-export declare const PANEL_GROUP_LABEL = "px-3 pb-1 pt-3 text-xs font-medium uppercase text-faint";
+/**
+ * The line shown when a filter matched nothing.
+ *
+ * px-2, the same as a row: the list's px-1 supplies the rest, so the text
+ * stays flush with row text.
+ */
+export declare const PANEL_EMPTY = "px-2 py-2 text-sm text-faint";
+/**
+ * A group heading inside the list. Not focusable, so it takes no row classes,
+ * only the row's horizontal padding so it lines up with the labels below it.
+ */
+export declare const PANEL_GROUP_LABEL = "px-2 pb-1 pt-3 text-xs font-medium uppercase text-faint";
 /**
  * Composes the option classes for a row's state.
  *
@@ -102,3 +123,35 @@ export declare function panelOption(state: {
     selected: boolean;
     disabled: boolean;
 }): string;
+/** Marks the scrolling region inside a surface, so placePanel can find it. */
+export declare const PANEL_LIST_ATTR = "data-panel-list";
+/** The classes that put the surface under its anchor. */
+export declare const PANEL_BELOW = "top-full mt-1";
+/** The classes that put the surface over its anchor. */
+export declare const PANEL_ABOVE = "bottom-full mb-1";
+/**
+ * Svelte action for a panel surface. Puts it on the side of its anchor that
+ * has room, and stops its list running past whatever clips it.
+ *
+ *     <div use:placePanel class="{PANEL_SURFACE} w-full">
+ *       <div class={PANEL_LIST} data-panel-list>
+ *
+ * The anchor is the surface's offset parent, the relative wrapper every
+ * control puts around its trigger; a DOM without layout has no offset parent,
+ * so the parent element stands in. Below is the default, because a list under
+ * its field is where a native select puts one. The panel goes above only when
+ * its natural height does not fit below and there is more room above, so a
+ * long list near the bottom of a modal opens upward instead of into the space
+ * under the modal's scroll edge that nobody can reach without scrolling
+ * first. Whichever side wins, the list's max-height is the smaller of the
+ * token cap and the room on that side, written as a CSS min so the token stays
+ * the cap without this code knowing its value.
+ *
+ * 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
+ * list's own scrolling never re-measures. A server render has no window and
+ * does nothing.
+ */
+export declare function placePanel(node: HTMLElement): {
+    destroy(): void;
+};

package/dist/internal/panel.js

@@ -26,10 +26,15 @@
  * Width stays at the call site: a menu sized to its trigger and a calendar
  * sized to seven columns are different requirements. Everything else is here.
  *
- * One rule holds these together. No row carries two utilities for the same
+ * Two rules hold these together. No row carries two utilities for the same
  * property. Colour and background sit on the surface, and a row states only
  * the override its state earns, because two utilities for one property resolve
  * in the order Tailwind emits them and not in the order they were written.
+ * And a row is inset and rounded, never square and full width: the surface is
+ * rounded-xl, so a ring or tint that reaches its edge is cut at the corners on
+ * the first and last row. The list pads the rows in by px-1 and each row takes
+ * rounded-lg, so what a row paints stays inside the frame with corners of its
+ * own.
  *
  * Not exported from the package entry point - this is an implementation detail.
  */
@@ -40,26 +45,34 @@
  * needs a boundary that clears 3:1, which line does not. It carries the
  * resting text colour so a row can override it with a single utility.
  *
- * overflow-hidden, because the rows are square and the panel is not: the
- * active ring on the first or last row drew its corners past the panel's
- * rounded ones, a box poking out of the box that holds it.
+ * overflow-hidden is a backstop, not the shape: the rows sit inset with
+ * corners of their own, so nothing they paint reaches the rounded frame. It
+ * still clips a caller's stray full-width child, and it keeps the search
+ * field's corners inside the surface's.
+ *
+ * No vertical offset and no side. Both belong to placePanel, which measures
+ * the room and puts the panel above the anchor when there is none below.
  */
-export const PANEL_SURFACE = 'absolute z-dropdown mt-1 overflow-hidden rounded-xl border border-line-strong bg-surface text-fg shadow-2xl';
+export const PANEL_SURFACE = 'absolute z-dropdown overflow-hidden rounded-xl border border-line-strong bg-surface text-fg shadow-2xl';
 /**
  * The scrolling region inside it.
  *
  * The cap is a token, not max-h-60, so a fifth panel cannot pick a different
  * one. overscroll-contain stops a wheel that has reached the end of the list
- * from carrying on into the page behind the open panel.
+ * from carrying on into the page behind the open panel. px-1 insets the rows
+ * from the frame, so a row's ring and hover tint sit inside the surface's
+ * rounded corners instead of being cut by them on the first and last row.
  */
-export const PANEL_LIST = 'max-h-panel-max overflow-y-auto overscroll-contain py-1';
+export const PANEL_LIST = 'max-h-panel-max overflow-y-auto overscroll-contain px-1 py-1';
 /**
  * One row at rest.
  *
  * No background and no text colour of its own: it inherits both from the
  * surface, which leaves each state below a single utility to override.
+ * rounded-lg, one step inside the surface's rounded-xl, so the hover tint and
+ * the active ring follow the row's own corners.
  */
-export const PANEL_OPTION = 'flex w-full items-center gap-2.5 px-3 py-2 text-start text-sm ' +
+export const PANEL_OPTION = 'flex w-full items-center gap-2.5 rounded-lg px-2 py-2 text-start text-sm ' +
     'transition-colors duration-150 outline-none hover:bg-surface-2 ' +
     'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand';
 /**
@@ -67,7 +80,7 @@ export const PANEL_OPTION = 'flex w-full items-center gap-2.5 px-3 py-2 text-sta
  *
  * A tint alone reads 1.09:1 against the panel, which is not a visible state,
  * so the active row also carries an inset brand ring. Inset because the row
- * spans the full width of the panel and an outset ring is clipped by it.
+ * fills the list's inner width and an outset ring would run into the frame.
  */
 export const PANEL_OPTION_ACTIVE = 'bg-surface-2 ring-1 ring-inset ring-brand';
 /**
@@ -85,10 +98,18 @@ export const PANEL_OPTION_SELECTED = 'font-medium text-brand';
  * by emitted order, so the row could take the tint and read as choosable.
  */
 export const PANEL_OPTION_DISABLED = 'pointer-events-none opacity-40';
-/** The line shown when a filter matched nothing. */
-export const PANEL_EMPTY = 'px-3 py-2 text-sm text-faint';
-/** A group heading inside the list. Not focusable, so it takes no row classes. */
-export const PANEL_GROUP_LABEL = 'px-3 pb-1 pt-3 text-xs font-medium uppercase text-faint';
+/**
+ * The line shown when a filter matched nothing.
+ *
+ * px-2, the same as a row: the list's px-1 supplies the rest, so the text
+ * stays flush with row text.
+ */
+export const PANEL_EMPTY = 'px-2 py-2 text-sm text-faint';
+/**
+ * A group heading inside the list. Not focusable, so it takes no row classes,
+ * only the row's horizontal padding so it lines up with the labels below it.
+ */
+export const PANEL_GROUP_LABEL = 'px-2 pb-1 pt-3 text-xs font-medium uppercase text-faint';
 /**
  * Composes the option classes for a row's state.
  *
@@ -111,3 +132,105 @@ export function panelOption(state) {
     }
     return parts.join(' ');
 }
+/** Marks the scrolling region inside a surface, so placePanel can find it. */
+export const PANEL_LIST_ATTR = 'data-panel-list';
+/** The classes that put the surface under its anchor. */
+export const PANEL_BELOW = 'top-full mt-1';
+/** The classes that put the surface over its anchor. */
+export const PANEL_ABOVE = 'bottom-full mb-1';
+/**
+ * Breathing room between the panel and the edge it is measured against, so a
+ * panel that fits exactly does not sit on the edge of the window or the modal.
+ */
+const PANEL_EDGE_GAP = 8;
+/**
+ * The nearest ancestor that clips or scrolls its content.
+ *
+ * A modal body, a drawer body and a scrolling card all crop what floats past
+ * them, so the room a panel has is the room inside that ancestor and not the
+ * room in the window. The walk stops short of body and html: an open overlay
+ * sets overflow hidden on the body to lock the page, and the body's rect is
+ * the document's, not the viewport's. A DOM that computes no style reports an
+ * empty string, and an overflow nobody stated is visible.
+ */
+function clippingAncestor(node) {
+    let cursor = node.parentElement;
+    while (cursor !== null && cursor !== document.body && cursor !== document.documentElement) {
+        const overflow = getComputedStyle(cursor).overflowY;
+        if (overflow !== '' && overflow !== 'visible')
+            return cursor;
+        cursor = cursor.parentElement;
+    }
+    return null;
+}
+function swap(node, remove, add) {
+    node.classList.remove(...remove.split(' '));
+    node.classList.add(...add.split(' '));
+}
+/**
+ * Svelte action for a panel surface. Puts it on the side of its anchor that
+ * has room, and stops its list running past whatever clips it.
+ *
+ *     <div use:placePanel class="{PANEL_SURFACE} w-full">
+ *       <div class={PANEL_LIST} data-panel-list>
+ *
+ * The anchor is the surface's offset parent, the relative wrapper every
+ * control puts around its trigger; a DOM without layout has no offset parent,
+ * so the parent element stands in. Below is the default, because a list under
+ * its field is where a native select puts one. The panel goes above only when
+ * its natural height does not fit below and there is more room above, so a
+ * long list near the bottom of a modal opens upward instead of into the space
+ * under the modal's scroll edge that nobody can reach without scrolling
+ * first. Whichever side wins, the list's max-height is the smaller of the
+ * token cap and the room on that side, written as a CSS min so the token stays
+ * the cap without this code knowing its value.
+ *
+ * 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
+ * list's own scrolling never re-measures. A server render has no window and
+ * does nothing.
+ */
+export function placePanel(node) {
+    if (typeof window === 'undefined')
+        return { destroy() { } };
+    const anchor = node.offsetParent instanceof HTMLElement ? node.offsetParent : node.parentElement;
+    const clip = anchor === null ? null : clippingAncestor(anchor);
+    const list = node.querySelector(`[${PANEL_LIST_ATTR}]`);
+    function measure() {
+        if (anchor === null)
+            return;
+        // The list is read at its class-capped height, not at whatever an earlier
+        // measurement pinned it to, or a panel shrunk to fit a small room would
+        // read as fitting anywhere.
+        if (list !== null)
+            list.style.maxHeight = '';
+        const rect = anchor.getBoundingClientRect();
+        const clipTop = clip === null ? 0 : clip.getBoundingClientRect().top;
+        const clipBottom = clip === null ? window.innerHeight : clip.getBoundingClientRect().bottom;
+        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;
+        if (flip)
+            swap(node, PANEL_BELOW, PANEL_ABOVE);
+        else
+            swap(node, PANEL_ABOVE, PANEL_BELOW);
+        if (list === 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);
+        const room = Math.max(0, Math.round((flip ? above : below) - chrome));
+        list.style.maxHeight = `min(var(--spacing-panel-max), ${room}px)`;
+    }
+    measure();
+    const scroller = clip ?? window;
+    window.addEventListener('resize', measure, { passive: true });
+    scroller.addEventListener('scroll', measure, { passive: true });
+    return {
+        destroy() {
+            window.removeEventListener('resize', measure);
+            scroller.removeEventListener('scroll', measure);
+        },
+    };
+}

package/package.json

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