@ibobbyts/svelte-ui-utils 0.3.1 → 0.3.5

package/README.md

@@ -241,6 +241,8 @@ controls need caller-owned accessible labels. Each label is applied to both
 `SortableTableEnhanced` composes the same table and adds a controlled current
 radio immediately after each drag handle. `currentId` is read-only input;
 `onCurrentChange` asks the caller to persist a new current item. Use
+`showCurrentControl={false}` to omit the radios while retaining the table's
+drag, remove, reorder, and row-color behavior. Use
 `getCurrentDisabled` for per-row eligibility and `getRowColorPreset` to select
 the package-owned `red`, `yellow`, or `green` background. The presets include
 light and dark defaults and expose `--suu-sortable-table-row-*-light` and
@@ -348,7 +350,12 @@ prop is available on all dialog wrapper components.
 
 ```svelte
 <script lang="ts">
-  import { Dropdown, type DropdownOption, type DropdownValue } from '@ibobbyts/svelte-ui-utils/dropdown';
+  import {
+    Dropdown,
+    DropdownMultiSelect,
+    type DropdownOption,
+    type DropdownValue
+  } from '@ibobbyts/svelte-ui-utils/dropdown';
 
   const pageSizeOptions: DropdownOption[] = [
     { label: '10', value: 10 },
@@ -377,6 +384,36 @@ use `menuAlign="right"` to align their right edges instead. `fitContent` sizes
 the menu to its longest option while keeping the selected edge aligned.
 `DataTable` uses this same component for its page-size picker.
 
+Set `multiselect={true}` to control the component with a `DropdownValue[]`.
+Each option then shows a checkbox, selecting or deselecting an option keeps the
+menu open, and `onChange` receives the complete selected-value array in option
+display order. `DropdownMultiSelect` is the convenience wrapper for this mode:
+
+```svelte
+<script lang="ts">
+  import { DropdownMultiSelect, type DropdownMultiValue } from '@ibobbyts/svelte-ui-utils/dropdown';
+
+  let selectedRoles: DropdownMultiValue = ['editor'];
+</script>
+
+<DropdownMultiSelect
+  value={selectedRoles}
+  options={[
+    { label: 'Editor', value: 'editor' },
+    { label: 'Reviewer', value: 'reviewer' }
+  ]}
+  ariaLabel="Roles"
+  maxWidth="18rem"
+  onChange={(next) => {
+    selectedRoles = next;
+  }}
+/>
+```
+
+The collapsed trigger joins selected labels with `", "` and truncates the
+single line when it exceeds the existing `width` or `maxWidth` constraint.
+Grouped and disabled options retain the same behavior as single-select mode.
+
 The dropdown panel is constrained by default to the space available above or
 below the trigger and remains scrollable when its contents exceed that height.
 Set `fitViewport={false}` to fall back to the stylesheet's viewport-height

package/dist/dropdown/Dropdown.svelte

@@ -5,15 +5,20 @@
   import type {
     DropdownChangeHandler,
     DropdownMenuAlign,
+    DropdownMultiChangeHandler,
+    DropdownMultiValue,
     DropdownOption,
     DropdownOptionGroup,
     DropdownPlacement,
+    DropdownSelectionChangeHandler,
+    DropdownSelection,
     DropdownTriggerClickHandler,
     DropdownValue
   } from './types.js';
 
   export let id: string | undefined = undefined;
-  export let value: DropdownValue = '';
+  export let value: DropdownSelection = '';
+  export let multiselect = false;
   export let options: DropdownOption[] = [];
   export let optionGroups: DropdownOptionGroup[] | undefined = undefined;
   export let ariaLabel: string | undefined = undefined;
@@ -26,33 +31,50 @@
   export let minWidth: string | undefined = undefined;
   export let maxWidth: string | undefined = undefined;
   export let className: string | undefined = undefined;
-  export let onChange: DropdownChangeHandler | undefined = undefined;
+  export let portal = false;
+  export let onChange: DropdownSelectionChangeHandler | undefined = undefined;
   export let onTriggerClick: DropdownTriggerClickHandler | undefined = undefined;
 
   const viewportMargin = 20;
   const menuGap = 6;
 
   let open = false;
-  let activeValue: DropdownValue = value;
+  let activeValue: DropdownValue = '';
   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;
+  let removeOutsidePointerListener: (() => void) | undefined = undefined;
 
   $: resolvedOptions = optionGroups === undefined ? options : optionGroups.flatMap((group) => group.options);
-  $: selectedOption = resolvedOptions.find((option) => option.value === value);
-  $: selectedText = selectedOption?.label ?? String(value);
+  $: selectedValues = normalizeSelectedValues(multiselect && Array.isArray(value) ? value : []);
+  $: selectedOption = Array.isArray(value) ? undefined : resolvedOptions.find((option) => option.value === value);
+  $: selectedText = multiselect
+    ? resolvedOptions
+        .filter((option) => selectedValues.includes(option.value))
+        .map((option) => option.label)
+        .join(', ')
+    : selectedOption?.label ?? String(value);
   $: if (!open) {
-    activeValue = selectedOption?.value ?? firstEnabledOption()?.value ?? value;
+    activeValue = initialActiveValue();
   }
   $: {
     placement;
     if (open) {
       enableOpenViewportTracking();
+      if (multiselect) {
+        enableOutsidePointerDismissal();
+      }
       void updateViewportPanelMaxHeight();
     } else {
       disableOpenViewportTracking();
+      disableOutsidePointerDismissal();
       resolvedPlacement = placement === 'up' ? 'up' : 'down';
       viewportPanelMaxHeight = undefined;
     }
@@ -62,12 +84,36 @@
     return resolvedOptions.find((option) => !option.disabled);
   }
 
+  function normalizeSelectedValues(nextValues: DropdownMultiValue): DropdownMultiValue {
+    const incoming = new Set(nextValues);
+    const normalized: DropdownMultiValue = [];
+    for (const option of resolvedOptions) {
+      if (incoming.has(option.value) && !normalized.includes(option.value)) {
+        normalized.push(option.value);
+      }
+    }
+    return normalized;
+  }
+
+  function initialActiveValue(): DropdownValue {
+    const firstSelectedEnabled = resolvedOptions.find(
+      (option) => selectedValues.includes(option.value) && !option.disabled
+    );
+    return firstSelectedEnabled?.value ?? selectedOption?.value ?? firstEnabledOption()?.value ?? '';
+  }
+
+  function isOptionSelected(option: DropdownOption): boolean {
+    return multiselect ? selectedValues.includes(option.value) : option.value === value;
+  }
+
   function activeOptionIndex(nextActiveValue: DropdownValue): number {
     const index = resolvedOptions.findIndex((option) => option.value === nextActiveValue && !option.disabled);
     if (index >= 0) {
       return index;
     }
-    const fallbackIndex = resolvedOptions.findIndex((option) => option.value === value && !option.disabled);
+    const fallbackIndex = resolvedOptions.findIndex(
+      (option) => isOptionSelected(option) && !option.disabled
+    );
     if (fallbackIndex >= 0) {
       return fallbackIndex;
     }
@@ -89,9 +135,21 @@
     if (option.disabled) {
       return;
     }
-    open = false;
     activeValue = option.value;
-    void onChange?.(option.value);
+    if (multiselect) {
+      const nextSelected = new Set(selectedValues);
+      if (nextSelected.has(option.value)) {
+        nextSelected.delete(option.value);
+      } else {
+        nextSelected.add(option.value);
+      }
+      const nextValues = normalizeSelectedValues([...nextSelected]);
+      void (onChange as DropdownMultiChangeHandler | undefined)?.(nextValues);
+      return;
+    }
+
+    open = false;
+    void (onChange as DropdownChangeHandler | undefined)?.(option.value);
     buttonElement?.focus();
   }
 
@@ -103,7 +161,7 @@
       updateResolvedPlacement();
     }
     open = !open;
-    activeValue = selectedOption?.value ?? firstEnabledOption()?.value ?? value;
+    activeValue = initialActiveValue();
   }
 
   function handleTriggerClick(event: MouseEvent) {
@@ -129,7 +187,7 @@
       if (!open) {
         updateResolvedPlacement();
         open = true;
-        activeValue = selectedOption?.value ?? firstEnabledOption()?.value ?? value;
+        activeValue = initialActiveValue();
       }
       moveActiveOption(event.key === 'ArrowDown' ? 1 : -1);
       return;
@@ -147,6 +205,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 +265,7 @@
 
     updateResolvedPlacement(rect);
     if (!fitViewport) {
+      updatePortalPosition(rect);
       return;
     }
 
@@ -212,6 +274,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() {
@@ -236,13 +331,44 @@
     removeOpenViewportListeners?.();
   }
 
-  onDestroy(disableOpenViewportTracking);
+  function enableOutsidePointerDismissal() {
+    if (removeOutsidePointerListener || typeof document === 'undefined') {
+      return;
+    }
+
+    const handleOutsidePointer = (event: PointerEvent) => {
+      const target = event.target;
+      if (!(target instanceof Node)) {
+        return;
+      }
+      if (dropdownElement?.contains(target) || menuElement?.contains(target)) {
+        return;
+      }
+      open = false;
+    };
+
+    document.addEventListener('pointerdown', handleOutsidePointer, true);
+    removeOutsidePointerListener = () => {
+      document.removeEventListener('pointerdown', handleOutsidePointer, true);
+      removeOutsidePointerListener = undefined;
+    };
+  }
+
+  function disableOutsidePointerDismissal() {
+    removeOutsidePointerListener?.();
+  }
+
+  onDestroy(() => {
+    disableOpenViewportTracking();
+    disableOutsidePointerDismissal();
+  });
 </script>
 
 <span
   bind:this={dropdownElement}
   class={[
     'suu-dropdown',
+    multiselect ? 'suu-dropdown--multiselect' : '',
     width !== undefined || minWidth !== undefined || maxWidth !== undefined
       ? 'suu-dropdown--sized'
       : '',
@@ -263,24 +389,36 @@
     aria-label={ariaLabel}
     aria-haspopup="listbox"
     aria-expanded={open}
-    data-value={String(value)}
+    data-value={Array.isArray(value) ? value.map(String).join(',') : String(value)}
     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}>
+      <div
+        class="suu-dropdown__panel"
+        role="listbox"
+        aria-label={ariaLabel}
+        aria-multiselectable={multiselect || undefined}
+      >
         {#if optionGroups === undefined}
           {#each options as option}
             <button
@@ -289,7 +427,7 @@
               class:suu-dropdown__option--active={option.value === activeValue}
               class:suu-dropdown__option--disabled={option.disabled}
               role="option"
-              aria-selected={option.value === value}
+              aria-selected={multiselect ? selectedValues.includes(option.value) : option.value === value}
               aria-disabled={option.disabled}
               disabled={option.disabled}
               data-value={String(option.value)}
@@ -301,7 +439,14 @@
               }}
               on:click={() => selectOption(option)}
             >
-              {option.label}
+              {#if multiselect}
+                <span
+                  class="suu-dropdown__checkbox"
+                  data-checked={multiselect ? selectedValues.includes(option.value) : option.value === value}
+                  aria-hidden="true"
+                ></span>
+              {/if}
+              <span class="suu-dropdown__label">{option.label}</span>
             </button>
           {/each}
         {:else}
@@ -317,7 +462,7 @@
                   class:suu-dropdown__option--active={option.value === activeValue}
                   class:suu-dropdown__option--disabled={option.disabled}
                   role="option"
-                  aria-selected={option.value === value}
+                  aria-selected={multiselect ? selectedValues.includes(option.value) : option.value === value}
                   aria-disabled={option.disabled}
                   disabled={option.disabled}
                   data-value={String(option.value)}
@@ -329,7 +474,14 @@
                   }}
                   on:click={() => selectOption(option)}
                 >
-                  {option.label}
+                  {#if multiselect}
+                    <span
+                      class="suu-dropdown__checkbox"
+                      data-checked={multiselect ? selectedValues.includes(option.value) : option.value === value}
+                      aria-hidden="true"
+                    ></span>
+                  {/if}
+                  <span class="suu-dropdown__label">{option.label}</span>
                 </button>
               {/each}
             </div>

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

@@ -1,4 +1,4 @@
-import type { DropdownChangeHandler, DropdownMenuAlign, DropdownOption, DropdownOptionGroup, DropdownPlacement, DropdownTriggerClickHandler, DropdownValue } from './types.js';
+import type { DropdownMenuAlign, DropdownOption, DropdownOptionGroup, DropdownPlacement, DropdownSelectionChangeHandler, DropdownSelection, DropdownTriggerClickHandler } from './types.js';
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -14,7 +14,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const Dropdown: $$__sveltets_2_IsomorphicComponent<{
     id?: string | undefined;
-    value?: DropdownValue;
+    value?: DropdownSelection;
+    multiselect?: boolean;
     options?: DropdownOption[];
     optionGroups?: DropdownOptionGroup[] | undefined;
     ariaLabel?: string | undefined;
@@ -27,7 +28,8 @@ declare const Dropdown: $$__sveltets_2_IsomorphicComponent<{
     minWidth?: string | undefined;
     maxWidth?: string | undefined;
     className?: string | undefined;
-    onChange?: DropdownChangeHandler | undefined;
+    portal?: boolean;
+    onChange?: DropdownSelectionChangeHandler | undefined;
     onTriggerClick?: DropdownTriggerClickHandler | undefined;
 }, {
     [evt: string]: CustomEvent<any>;

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,EAER,iBAAiB,EAGjB,cAAc,EACd,mBAAmB,EACnB,iBAAiB,EACjB,8BAA8B,EAC9B,iBAAiB,EACjB,2BAA2B,EAE5B,MAAM,YAAY,CAAC;AA6ZtB,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;SAVmZ,MAAM,GAAG,SAAS;YAAU,iBAAiB;;cAA8C,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,8BAA8B,GAAG,SAAS;qBAAmB,2BAA2B,GAAG,SAAS;;;kBAUh6B,CAAC;AAC5E,KAAK,QAAQ,GAAG,YAAY,CAAC,OAAO,QAAQ,CAAC,CAAC;AAChD,eAAe,QAAQ,CAAC"}

package/dist/dropdown/DropdownMultiSelect.svelte

@@ -0,0 +1,53 @@
+<svelte:options runes={false} />
+
+<script lang="ts">
+  import Dropdown from './Dropdown.svelte';
+  import type {
+    DropdownMenuAlign,
+    DropdownMultiChangeHandler,
+    DropdownMultiValue,
+    DropdownOption,
+    DropdownOptionGroup,
+    DropdownPlacement,
+    DropdownTriggerClickHandler
+  } from './types.js';
+
+  export let id: string | undefined = undefined;
+  export let value: DropdownMultiValue = [];
+  export let options: DropdownOption[] = [];
+  export let optionGroups: DropdownOptionGroup[] | undefined = undefined;
+  export let ariaLabel: string | undefined = undefined;
+  export let placement: DropdownPlacement = 'auto';
+  export let menuAlign: DropdownMenuAlign = 'left';
+  export let fitViewport = true;
+  export let fitContent = false;
+  export let disabled = false;
+  export let width: string | undefined = undefined;
+  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: DropdownMultiChangeHandler | undefined = undefined;
+  export let onTriggerClick: DropdownTriggerClickHandler | undefined = undefined;
+</script>
+
+<Dropdown
+  {id}
+  {value}
+  multiselect={true}
+  {options}
+  {optionGroups}
+  {ariaLabel}
+  {placement}
+  {menuAlign}
+  {fitViewport}
+  {fitContent}
+  {disabled}
+  {width}
+  {minWidth}
+  {maxWidth}
+  {className}
+  {portal}
+  {onChange}
+  {onTriggerClick}
+/>

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

@@ -0,0 +1,38 @@
+import type { DropdownMenuAlign, DropdownMultiChangeHandler, DropdownMultiValue, DropdownOption, DropdownOptionGroup, DropdownPlacement, DropdownTriggerClickHandler } from './types.js';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const DropdownMultiSelect: $$__sveltets_2_IsomorphicComponent<{
+    id?: string | undefined;
+    value?: DropdownMultiValue;
+    options?: DropdownOption[];
+    optionGroups?: DropdownOptionGroup[] | undefined;
+    ariaLabel?: string | undefined;
+    placement?: DropdownPlacement;
+    menuAlign?: DropdownMenuAlign;
+    fitViewport?: boolean;
+    fitContent?: boolean;
+    disabled?: boolean;
+    width?: string | undefined;
+    minWidth?: string | undefined;
+    maxWidth?: string | undefined;
+    className?: string | undefined;
+    portal?: boolean;
+    onChange?: DropdownMultiChangeHandler | undefined;
+    onTriggerClick?: DropdownTriggerClickHandler | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type DropdownMultiSelect = InstanceType<typeof DropdownMultiSelect>;
+export default DropdownMultiSelect;
+//# sourceMappingURL=DropdownMultiSelect.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownMultiSelect.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/dropdown/DropdownMultiSelect.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EACR,iBAAiB,EACjB,0BAA0B,EAC1B,kBAAkB,EAClB,cAAc,EACd,mBAAmB,EACnB,iBAAiB,EACjB,2BAA2B,EAC5B,MAAM,YAAY,CAAC;AA+BtB,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,mBAAmB;SAV6W,MAAM,GAAG,SAAS;YAAU,kBAAkB;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,0BAA0B,GAAG,SAAS;qBAAmB,2BAA2B,GAAG,SAAS;;;kBAUr1B,CAAC;AACvF,KAAK,mBAAmB,GAAG,YAAY,CAAC,OAAO,mBAAmB,CAAC,CAAC;AACtE,eAAe,mBAAmB,CAAC"}

package/dist/dropdown/index.d.ts

@@ -1,3 +1,4 @@
 export { default as Dropdown } from './Dropdown.svelte';
-export type { DropdownChangeHandler, DropdownMenuAlign, DropdownOption, DropdownOptionGroup, DropdownPlacement, DropdownTriggerClickHandler, DropdownValue } from './types.js';
+export { default as DropdownMultiSelect } from './DropdownMultiSelect.svelte';
+export type { DropdownChangeHandler, DropdownMenuAlign, DropdownMultiChangeHandler, DropdownMultiValue, DropdownOption, DropdownOptionGroup, DropdownPlacement, DropdownSelectionChangeHandler, DropdownSelection, DropdownTriggerClickHandler, DropdownValue } from './types.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/dropdown/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/dropdown/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,YAAY,EACV,qBAAqB,EACrB,iBAAiB,EACjB,cAAc,EACd,mBAAmB,EACnB,iBAAiB,EACjB,2BAA2B,EAC3B,aAAa,EACd,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/dropdown/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAC9E,YAAY,EACV,qBAAqB,EACrB,iBAAiB,EACjB,0BAA0B,EAC1B,kBAAkB,EAClB,cAAc,EACd,mBAAmB,EACnB,iBAAiB,EACjB,8BAA8B,EAC9B,iBAAiB,EACjB,2BAA2B,EAC3B,aAAa,EACd,MAAM,YAAY,CAAC"}

package/dist/dropdown/index.js

@@ -1 +1,2 @@
 export { default as Dropdown } from './Dropdown.svelte';
+export { default as DropdownMultiSelect } from './DropdownMultiSelect.svelte';

package/dist/dropdown/types.d.ts

@@ -1,4 +1,6 @@
 export type DropdownValue = string | number;
+export type DropdownMultiValue = DropdownValue[];
+export type DropdownSelection = DropdownValue | DropdownMultiValue;
 export type DropdownPlacement = 'auto' | 'up' | 'down';
 export type DropdownMenuAlign = 'left' | 'right';
 export interface DropdownOption {
@@ -11,5 +13,9 @@ export interface DropdownOptionGroup {
     options: DropdownOption[];
 }
 export type DropdownChangeHandler = (value: DropdownValue) => void | Promise<void>;
+export type DropdownMultiChangeHandler = (value: DropdownMultiValue) => void | Promise<void>;
+export type DropdownSelectionChangeHandler = {
+    bivarianceHack(value: DropdownSelection): void | Promise<void>;
+}['bivarianceHack'];
 export type DropdownTriggerClickHandler = (event: MouseEvent) => void;
 //# sourceMappingURL=types.d.ts.map

package/dist/dropdown/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/lib/dropdown/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,MAAM,CAAC;AAE5C,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,IAAI,GAAG,MAAM,CAAC;AAEvD,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,OAAO,CAAC;AAEjD,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,aAAa,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,cAAc,EAAE,CAAC;CAC3B;AAED,MAAM,MAAM,qBAAqB,GAAG,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;AAEnF,MAAM,MAAM,2BAA2B,GAAG,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/lib/dropdown/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,MAAM,CAAC;AAE5C,MAAM,MAAM,kBAAkB,GAAG,aAAa,EAAE,CAAC;AAEjD,MAAM,MAAM,iBAAiB,GAAG,aAAa,GAAG,kBAAkB,CAAC;AAEnE,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,IAAI,GAAG,MAAM,CAAC;AAEvD,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,OAAO,CAAC;AAEjD,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,aAAa,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,cAAc,EAAE,CAAC;CAC3B;AAED,MAAM,MAAM,qBAAqB,GAAG,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;AAEnF,MAAM,MAAM,0BAA0B,GAAG,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;AAE7F,MAAM,MAAM,8BAA8B,GAAG;IAC5C,cAAc,CAAC,KAAK,EAAE,iBAAiB,GAAG,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CAC/D,CAAC,gBAAgB,CAAC,CAAC;AAEpB,MAAM,MAAM,2BAA2B,GAAG,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC"}

package/dist/sortable-table/SortableTable.svelte

@@ -106,8 +106,10 @@
 <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; }
+  .suu-sortable-table__drag-column { width: 1%; }
+  .suu-sortable-table__remove-column { width: 38px; }
+  .suu-sortable-table__drag-cell { width: 1%; padding: 6px; text-align: center; vertical-align: middle; white-space: nowrap; }
+  .suu-sortable-table__remove-cell { width: 38px; padding: 6px; text-align: center; vertical-align: middle; }
   .suu-sortable-table__drag-handle, .suu-sortable-table__remove { display: inline-grid; place-items: center; border: 0; background: transparent; cursor: grab; color: var(--suu-color-text-dim, #6b7280); padding: 4px; font: inherit; }
   .suu-sortable-table__remove { width: 30px; height: 30px; cursor: pointer; color: var(--suu-color-danger, #dc2626); }
   .suu-sortable-table__remove svg { width: 16px; height: 16px; }

package/dist/sortable-table/SortableTableEnhanced.svelte

@@ -13,6 +13,7 @@
     disabled = false,
     allowRemoveLast = false,
     tableClass = '',
+    showCurrentControl = true,
     currentId = null,
     getCurrentDisabled = () => false,
     getCurrentLabel = (item: Item) => `Set ${getId(item)} as current`,
@@ -30,6 +31,7 @@
     disabled?: boolean;
     allowRemoveLast?: boolean;
     tableClass?: string;
+    showCurrentControl?: boolean;
     currentId?: string | null;
     getCurrentDisabled?: (item: Item, index: number) => boolean;
     getCurrentLabel?: (item: Item, index: number) => string;
@@ -80,19 +82,12 @@
   {getRemoveLabel}
   {onReorder}
   {onRemove}
-  dragAccessory={currentControl}
+  dragAccessory={showCurrentControl ? currentControl : undefined}
   {header}
   {children}
 />
 
 <style>
-  :global(.suu-sortable-table-enhanced .suu-sortable-table__drag-column),
-  :global(.suu-sortable-table-enhanced .suu-sortable-table__drag-cell) {
-    width: 68px;
-  }
-  :global(.suu-sortable-table-enhanced .suu-sortable-table__drag-cell) {
-    white-space: nowrap;
-  }
   .suu-sortable-table-enhanced__current {
     width: 16px;
     height: 16px;

package/dist/sortable-table/SortableTableEnhanced.svelte.d.ts

@@ -7,6 +7,7 @@ declare function $$render<Item extends SortableTableItem>(): {
         disabled?: boolean;
         allowRemoveLast?: boolean;
         tableClass?: string;
+        showCurrentControl?: boolean;
         currentId?: string | null;
         getCurrentDisabled?: (item: Item, index: number) => boolean;
         getCurrentLabel?: (item: Item, index: number) => string;

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

@@ -1 +1 @@
-{"version":3,"file":"SortableTableEnhanced.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/sortable-table/SortableTableEnhanced.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,OAAO,KAAK,EACR,iBAAiB,EACjB,0BAA0B,EAC1B,2BAA2B,EAC5B,MAAM,YAAY,CAAC;AACtB,iBAAS,QAAQ,CAAC,IAAI,SAAS,iBAAiB;;gBAOpC,IAAI,EAAE;gBACN,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM;mBACnB,OAAO;0BACA,OAAO;qBACZ,MAAM;oBACP,MAAM,GAAG,IAAI;6BACJ,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO;0BACzC,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM;4BACnC,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,KAAK,2BAA2B,GAAG,SAAS,GAAG,IAAI;uBAClF,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;0BACb,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC;gBAC9C,OAAO;kBACL,OAAO,CAAC,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;;;;;;EA0CoF;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,qBAAqB,EAAE,qBAAmC,CAAC;AAC/C,KAAK,qBAAqB,CAAC,IAAI,SAAS,iBAAiB,IAAI,YAAY,CAAC,OAAO,qBAAqB,CAAC,IAAI,CAAC,CAAC,CAAC;AAChH,eAAe,qBAAqB,CAAC"}
+{"version":3,"file":"SortableTableEnhanced.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/sortable-table/SortableTableEnhanced.svelte.ts"],"names":[],"mappings":"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"}

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,29 @@
   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--multiselect .suu-dropdown__button .suu-dropdown__label {
+  display: block;
+  white-space: nowrap;
+  overflow-wrap: normal;
+  -webkit-line-clamp: unset;
+  line-clamp: unset;
 }
 
 .suu-dropdown--sized .suu-dropdown__button {
@@ -1155,6 +1179,7 @@
 }
 
 .suu-dropdown__chevron {
+  flex: 0 0 auto;
   width: 0.58em;
   height: 0.58em;
   border-right: 2px solid currentcolor;
@@ -1176,17 +1201,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 +1239,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;
@@ -1238,6 +1282,39 @@
   text-align: left;
 }
 
+.suu-dropdown--multiselect .suu-dropdown__option {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+
+.suu-dropdown__checkbox {
+  position: relative;
+  flex: 0 0 auto;
+  width: 1em;
+  height: 1em;
+  border: 1px solid var(--suu-color-border);
+  border-radius: 0.2em;
+  background: var(--suu-color-bg);
+}
+
+.suu-dropdown__checkbox[data-checked='true'] {
+  border-color: var(--suu-color-accent);
+  background: var(--suu-color-accent);
+}
+
+.suu-dropdown__checkbox[data-checked='true']::after {
+  position: absolute;
+  top: 0.08em;
+  left: 0.3em;
+  width: 0.26em;
+  height: 0.52em;
+  border-right: 0.13em solid var(--suu-color-bg);
+  border-bottom: 0.13em solid var(--suu-color-bg);
+  content: '';
+  transform: rotate(45deg);
+}
+
 .suu-dropdown__option:last-child {
   border-bottom: 0;
 }

package/package.json

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