@ibobbyts/svelte-ui-utils 0.3.0 → 0.3.4

package/README.md

@@ -10,19 +10,19 @@ Install from the public npm registry. No GitHub Packages token is required.
 With Bun:
 
 ```bash
-bun add @ibobbyts/svelte-ui-utils@0.3.0
+bun add @ibobbyts/svelte-ui-utils@0.3.1
 ```
 
 Canonical Bun pull address:
 
 ```text
-@ibobbyts/svelte-ui-utils@0.3.0
+@ibobbyts/svelte-ui-utils@0.3.1
 ```
 
 With npm:
 
 ```bash
-npm install @ibobbyts/svelte-ui-utils@0.3.0
+npm install @ibobbyts/svelte-ui-utils@0.3.1
 ```
 
 The repository does not track `dist/`; releases and local integration builds run
@@ -707,7 +707,7 @@ consumer project and installs the released npm version without registry-specific
 tokens:
 
 ```bash
-bun add @ibobbyts/svelte-ui-utils@0.3.0 svelte
+bun add @ibobbyts/svelte-ui-utils@0.3.1 svelte
 ```
 
 Use it after each release when a Bun-based project will consume the package.

package/dist/dropdown/Dropdown.svelte

@@ -26,6 +26,7 @@
   export let minWidth: string | undefined = undefined;
   export let maxWidth: string | undefined = undefined;
   export let className: string | undefined = undefined;
+  export let portal = false;
   export let onChange: DropdownChangeHandler | undefined = undefined;
   export let onTriggerClick: DropdownTriggerClickHandler | undefined = undefined;
 
@@ -36,8 +37,13 @@
   let activeValue: DropdownValue = value;
   let dropdownElement: HTMLSpanElement | undefined;
   let buttonElement: HTMLButtonElement | undefined;
+  let menuElement: HTMLDivElement | undefined;
   let resolvedPlacement: Exclude<DropdownPlacement, 'auto'> = placement === 'up' ? 'up' : 'down';
   let viewportPanelMaxHeight: string | undefined = undefined;
+  let portalMenuTop = '-9999px';
+  let portalMenuLeft: string | undefined = undefined;
+  let portalMenuRight: string | undefined = undefined;
+  let portalMenuWidth: string | undefined = undefined;
   let removeOpenViewportListeners: (() => void) | undefined = undefined;
 
   $: resolvedOptions = optionGroups === undefined ? options : optionGroups.flatMap((group) => group.options);
@@ -147,6 +153,9 @@
 
   function handleFocusout(event: FocusEvent) {
     const nextTarget = event.relatedTarget;
+    if (portal && nextTarget instanceof Node && menuElement?.contains(nextTarget)) {
+      return;
+    }
     if (nextTarget instanceof Node && event.currentTarget instanceof Node && event.currentTarget.contains(nextTarget)) {
       return;
     }
@@ -204,6 +213,7 @@
 
     updateResolvedPlacement(rect);
     if (!fitViewport) {
+      updatePortalPosition(rect);
       return;
     }
 
@@ -212,6 +222,39 @@
         ? rect.top - viewportMargin - menuGap
         : window.innerHeight - rect.bottom - viewportMargin - menuGap;
     viewportPanelMaxHeight = `${Math.max(0, Math.floor(available))}px`;
+    updatePortalPosition(rect);
+  }
+
+  function updatePortalPosition(rect: DOMRect) {
+    if (!portal || typeof window === 'undefined') {
+      return;
+    }
+
+    const menuHeight = menuElement?.getBoundingClientRect().height ?? 0;
+    portalMenuTop = `${Math.round(
+      resolvedPlacement === 'up' ? rect.top - menuHeight - menuGap : rect.bottom + menuGap
+    )}px`;
+    if (menuAlign === 'right') {
+      portalMenuLeft = undefined;
+      portalMenuRight = `${Math.round(window.innerWidth - rect.right)}px`;
+    } else {
+      portalMenuLeft = `${Math.round(rect.left)}px`;
+      portalMenuRight = undefined;
+    }
+    portalMenuWidth = fitContent ? undefined : `${Math.round(rect.width)}px`;
+  }
+
+  function portalMenu(node: HTMLDivElement, enabled: boolean) {
+    if (enabled && typeof document !== 'undefined') {
+      document.body.appendChild(node);
+    }
+    return {
+      destroy() {
+        if (node.parentNode) {
+          node.parentNode.removeChild(node);
+        }
+      }
+    };
   }
 
   function enableOpenViewportTracking() {
@@ -267,18 +310,25 @@
     on:click={handleTriggerClick}
     on:keydown={handleKeydown}
   >
-    <span>{selectedText}</span>
+    <span class="suu-dropdown__label">{selectedText}</span>
     <span class="suu-dropdown__chevron" aria-hidden="true"></span>
   </button>
 
   {#if open}
     <div
+      bind:this={menuElement}
+      use:portalMenu={portal}
       class="suu-dropdown__menu"
+      class:suu-dropdown__menu--portal={portal}
       class:suu-dropdown__menu--up={resolvedPlacement === 'up'}
       class:suu-dropdown__menu--down={resolvedPlacement === 'down'}
       class:suu-dropdown__menu--left={menuAlign === 'left'}
       class:suu-dropdown__menu--right={menuAlign === 'right'}
       class:suu-dropdown__menu--fit-content={fitContent}
+      style:--suu-dropdown-menu-top={portalMenuTop}
+      style:--suu-dropdown-menu-left={portalMenuLeft}
+      style:--suu-dropdown-menu-right={portalMenuRight}
+      style:--suu-dropdown-menu-width={portalMenuWidth}
     >
       <div class="suu-dropdown__panel" role="listbox" aria-label={ariaLabel}>
         {#if optionGroups === undefined}
@@ -301,7 +351,7 @@
               }}
               on:click={() => selectOption(option)}
             >
-              {option.label}
+              <span class="suu-dropdown__label">{option.label}</span>
             </button>
           {/each}
         {:else}
@@ -329,7 +379,7 @@
                   }}
                   on:click={() => selectOption(option)}
                 >
-                  {option.label}
+                  <span class="suu-dropdown__label">{option.label}</span>
                 </button>
               {/each}
             </div>

package/dist/dropdown/Dropdown.svelte.d.ts

@@ -27,6 +27,7 @@ declare const Dropdown: $$__sveltets_2_IsomorphicComponent<{
     minWidth?: string | undefined;
     maxWidth?: string | undefined;
     className?: string | undefined;
+    portal?: boolean;
     onChange?: DropdownChangeHandler | undefined;
     onTriggerClick?: DropdownTriggerClickHandler | undefined;
 }, {

package/dist/dropdown/Dropdown.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/dropdown/Dropdown.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EACR,qBAAqB,EACrB,iBAAiB,EACjB,cAAc,EACd,mBAAmB,EACnB,iBAAiB,EACjB,2BAA2B,EAC3B,aAAa,EACd,MAAM,YAAY,CAAC;AA6RtB,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,QAAQ;SAVuW,MAAM,GAAG,SAAS;YAAU,aAAa;cAAY,cAAc,EAAE;mBAAiB,mBAAmB,EAAE,GAAG,SAAS;gBAAc,MAAM,GAAG,SAAS;gBAAc,iBAAiB;gBAAc,iBAAiB;;;;YAAwG,MAAM,GAAG,SAAS;eAAa,MAAM,GAAG,SAAS;eAAa,MAAM,GAAG,SAAS;gBAAc,MAAM,GAAG,SAAS;eAAa,qBAAqB,GAAG,SAAS;qBAAmB,2BAA2B,GAAG,SAAS;;;kBAU7yB,CAAC;AAC5E,KAAK,QAAQ,GAAG,YAAY,CAAC,OAAO,QAAQ,CAAC,CAAC;AAChD,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Dropdown.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/dropdown/Dropdown.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EACR,qBAAqB,EACrB,iBAAiB,EACjB,cAAc,EACd,mBAAmB,EACnB,iBAAiB,EACjB,2BAA2B,EAC3B,aAAa,EACd,MAAM,YAAY,CAAC;AAwUtB,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,QAAQ;SAVwX,MAAM,GAAG,SAAS;YAAU,aAAa;cAAY,cAAc,EAAE;mBAAiB,mBAAmB,EAAE,GAAG,SAAS;gBAAc,MAAM,GAAG,SAAS;gBAAc,iBAAiB;gBAAc,iBAAiB;;;;YAAwG,MAAM,GAAG,SAAS;eAAa,MAAM,GAAG,SAAS;eAAa,MAAM,GAAG,SAAS;gBAAc,MAAM,GAAG,SAAS;;eAAqC,qBAAqB,GAAG,SAAS;qBAAmB,2BAA2B,GAAG,SAAS;;;kBAUt1B,CAAC;AAC5E,KAAK,QAAQ,GAAG,YAAY,CAAC,OAAO,QAAQ,CAAC,CAAC;AAChD,eAAe,QAAQ,CAAC"}

package/dist/sortable-table/SortableTable.svelte

@@ -76,32 +76,35 @@
   }
 </script>
 
-<table class={`suu-sortable-table ${tableClass}`.trim()}>
-  <thead><tr><th class="suu-sortable-table__drag-column" aria-hidden="true"></th>{@render header()}<th class="suu-sortable-table__remove-column" aria-hidden="true"></th></tr></thead>
-  <tbody>
-    {#each items as item, index (getId(item))}
-      {@const id = getId(item)}
-      {@const dragLabel = getDragLabel(item, index)}
-      {@const removeLabel = getRemoveLabel(item, index)}
-      <tr class={rowClass(item, index)} data-sortable-id={id} ondragover={(event) => dragOver(event, id)} ondrop={(event) => drop(event, id)}>
-        <td class="suu-sortable-table__drag-cell">
-          <button type="button" class="suu-sortable-table__drag-handle" disabled={disabled} draggable={!disabled} aria-label={dragLabel} title={dragLabel} ondragstart={(event) => startDrag(event, id)} ondragend={finishDrag}>⋮⋮</button>
-          {#if dragAccessory}{@render dragAccessory(item, index)}{/if}
-        </td>
-        {@render children(item, index)}
-        <td class="suu-sortable-table__remove-cell">
-          {#if onRemove}
-            <button type="button" class="suu-sortable-table__remove" disabled={disabled || (!allowRemoveLast && items.length === 1)} aria-label={removeLabel} title={removeLabel} onclick={() => onRemove?.(item)}>
-              <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 3h6l1 2h4v2H4V5h4l1-2Zm-2 6h2v9H7V9Zm4 0h2v9h-2V9Zm4 0h2v9h-2V9ZM6 21V8h12v13H6Z" fill="currentColor"/></svg>
-            </button>
-          {/if}
-        </td>
-      </tr>
-    {/each}
-  </tbody>
-</table>
+<div class="suu-sortable-table-wrap">
+  <table class={`suu-sortable-table ${tableClass}`.trim()}>
+    <thead><tr><th class="suu-sortable-table__drag-column" aria-hidden="true"></th>{@render header()}<th class="suu-sortable-table__remove-column" aria-hidden="true"></th></tr></thead>
+    <tbody>
+      {#each items as item, index (getId(item))}
+        {@const id = getId(item)}
+        {@const dragLabel = getDragLabel(item, index)}
+        {@const removeLabel = getRemoveLabel(item, index)}
+        <tr class={rowClass(item, index)} data-sortable-id={id} ondragover={(event) => dragOver(event, id)} ondrop={(event) => drop(event, id)}>
+          <td class="suu-sortable-table__drag-cell">
+            <button type="button" class="suu-sortable-table__drag-handle" disabled={disabled} draggable={!disabled} aria-label={dragLabel} title={dragLabel} ondragstart={(event) => startDrag(event, id)} ondragend={finishDrag}>⋮⋮</button>
+            {#if dragAccessory}{@render dragAccessory(item, index)}{/if}
+          </td>
+          {@render children(item, index)}
+          <td class="suu-sortable-table__remove-cell">
+            {#if onRemove}
+              <button type="button" class="suu-sortable-table__remove" disabled={disabled || (!allowRemoveLast && items.length === 1)} aria-label={removeLabel} title={removeLabel} onclick={() => onRemove?.(item)}>
+                <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 3h6l1 2h4v2H4V5h4l1-2Zm-2 6h2v9H7V9Zm4 0h2v9h-2V9Zm4 0h2v9h-2V9ZM6 21V8h12v13H6Z" fill="currentColor"/></svg>
+              </button>
+            {/if}
+          </td>
+        </tr>
+      {/each}
+    </tbody>
+  </table>
+</div>
 
 <style>
+  .suu-sortable-table-wrap { overflow: auto; border: 1px solid var(--suu-color-border, #d1d5db); border-radius: var(--suu-radius, 8px); }
   .suu-sortable-table { width: 100%; border-collapse: collapse; }
   .suu-sortable-table__drag-column, .suu-sortable-table__remove-column { width: 38px; }
   .suu-sortable-table__drag-cell, .suu-sortable-table__remove-cell { width: 38px; padding: 6px; text-align: center; vertical-align: middle; }
@@ -111,6 +114,7 @@
   .suu-sortable-table__drag-handle:active { cursor: grabbing; }
   .suu-sortable-table__drag-handle:disabled, .suu-sortable-table__remove:disabled { cursor: default; opacity: .35; }
   .suu-sortable-table__row { position: relative; border-bottom: 1px solid var(--suu-color-border, #d1d5db); }
+  .suu-sortable-table__row:last-child { border-bottom: 0; }
   .suu-sortable-table :global(td) { border-bottom: 0; }
   .suu-sortable-table__row--dragging { opacity: .55; }
   .suu-sortable-table__row--drop-before :global(td) { box-shadow: inset 0 3px 0 var(--suu-color-accent, #2563eb); }

package/dist/sortable-table/SortableTable.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SortableTable.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/sortable-table/SortableTable.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,OAAO,KAAK,EAAE,iBAAiB,EAAE,0BAA0B,EAAE,MAAM,YAAY,CAAC;AAChF,iBAAS,QAAQ,CAAC,IAAI,SAAS,iBAAiB;;gBAKpC,IAAI,EAAE;gBACN,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM;mBACnB,OAAO;0BACA,OAAO;qBACZ,MAAM;sBACL,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,GAAG,IAAI;uBACvD,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM;yBACnC,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM;oBAC1C,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE,MAAM,EAAE,0BAA0B,KAAK,IAAI;mBAC5D,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI;wBACf,OAAO,CAAC,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;gBAC/B,OAAO;kBACL,OAAO,CAAC,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;;;;;;EA0FoF;AACzH,cAAM,iBAAiB,CAAC,IAAI,SAAS,iBAAiB;IAClD,KAAK,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC;IACnD,MAAM,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC;IACrD,KAAK,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC;IACnD,QAAQ;IACR,OAAO;CACV;AAED,UAAU,qBAAqB;IAC3B,KAAK,IAAI,SAAS,iBAAiB,EAAE,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,UAAU,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,UAAU,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC,CAAC,CAAA;KAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IAC3a,CAAC,IAAI,SAAS,iBAAiB,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IAC9J,YAAY,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC;CACjE;AACD,QAAA,MAAM,aAAa,EAAE,qBAAmC,CAAC;AACvC,KAAK,aAAa,CAAC,IAAI,SAAS,iBAAiB,IAAI,YAAY,CAAC,OAAO,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC;AAChG,eAAe,aAAa,CAAC"}
+{"version":3,"file":"SortableTable.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/sortable-table/SortableTable.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,OAAO,KAAK,EAAE,iBAAiB,EAAE,0BAA0B,EAAE,MAAM,YAAY,CAAC;AAChF,iBAAS,QAAQ,CAAC,IAAI,SAAS,iBAAiB;;gBAKpC,IAAI,EAAE;gBACN,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM;mBACnB,OAAO;0BACA,OAAO;qBACZ,MAAM;sBACL,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,GAAG,IAAI;uBACvD,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM;yBACnC,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM;oBAC1C,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE,MAAM,EAAE,0BAA0B,KAAK,IAAI;mBAC5D,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI;wBACf,OAAO,CAAC,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;gBAC/B,OAAO;kBACL,OAAO,CAAC,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;;;;;;EA4FoF;AACzH,cAAM,iBAAiB,CAAC,IAAI,SAAS,iBAAiB;IAClD,KAAK,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC;IACnD,MAAM,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC;IACrD,KAAK,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC;IACnD,QAAQ;IACR,OAAO;CACV;AAED,UAAU,qBAAqB;IAC3B,KAAK,IAAI,SAAS,iBAAiB,EAAE,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,UAAU,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,UAAU,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC,CAAC,CAAA;KAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IAC3a,CAAC,IAAI,SAAS,iBAAiB,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IAC9J,YAAY,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC;CACjE;AACD,QAAA,MAAM,aAAa,EAAE,qBAAmC,CAAC;AACvC,KAAK,aAAa,CAAC,IAAI,SAAS,iBAAiB,IAAI,YAAY,CAAC,OAAO,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC;AAChG,eAAe,aAAa,CAAC"}

package/dist/style.css

@@ -1128,7 +1128,8 @@
   gap: var(--suu-dropdown-space);
   align-items: center;
   justify-content: space-between;
-  height: 42px;
+  min-height: 42px;
+  height: auto;
   padding: 0 var(--suu-dropdown-space);
   border: 1px solid var(--suu-color-border);
   border-radius: var(--suu-radius);
@@ -1137,6 +1138,21 @@
   cursor: pointer;
   font: inherit;
   line-height: 1;
+  text-align: left;
+}
+
+.suu-dropdown__label {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  white-space: normal;
+  overflow-wrap: break-word;
+  line-height: 1.2;
 }
 
 .suu-dropdown--sized .suu-dropdown__button {
@@ -1155,6 +1171,7 @@
 }
 
 .suu-dropdown__chevron {
+  flex: 0 0 auto;
   width: 0.58em;
   height: 0.58em;
   border-right: 2px solid currentcolor;
@@ -1176,17 +1193,26 @@
   box-shadow: 0 18px 42px rgb(15 23 42 / 0.16);
 }
 
-.suu-dropdown__menu--left {
+.suu-dropdown__menu--portal {
+  position: fixed;
+  top: var(--suu-dropdown-menu-top);
+  right: var(--suu-dropdown-menu-right, auto);
+  left: var(--suu-dropdown-menu-left, auto);
+  width: var(--suu-dropdown-menu-width, max-content);
+  z-index: 1200;
+}
+
+.suu-dropdown__menu--left:not(.suu-dropdown__menu--portal) {
   right: auto;
   left: 0;
 }
 
-.suu-dropdown__menu--right {
+.suu-dropdown__menu--right:not(.suu-dropdown__menu--portal) {
   right: 0;
   left: auto;
 }
 
-.suu-dropdown__menu--up {
+.suu-dropdown__menu--up:not(.suu-dropdown__menu--portal) {
   top: auto;
   bottom: calc(100% + 6px);
 }
@@ -1205,6 +1231,16 @@
   white-space: nowrap;
 }
 
+.suu-dropdown__menu--fit-content .suu-dropdown__option .suu-dropdown__label {
+  overflow: visible;
+  text-overflow: clip;
+  display: block;
+  -webkit-line-clamp: unset;
+  line-clamp: unset;
+  white-space: nowrap;
+  overflow-wrap: normal;
+}
+
 .suu-dropdown__panel {
   max-height: var(--suu-dropdown-panel-max-height, 100vh);
   overflow-y: auto;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ibobbyts/svelte-ui-utils",
-  "version": "0.3.0",
+  "version": "0.3.4",
   "description": "Reusable Svelte 5 UI utilities for dialogs, toast notifications, dropdown search, and data tables.",
   "type": "module",
   "license": "MIT",