@ibobbyts/svelte-ui-utils 0.4.4 → 0.4.6

package/README.md

@@ -357,18 +357,23 @@ light and dark defaults and expose `--suu-sortable-table-row-*-light` and
 />
 ```
 
-Dialog components are controlled by the consuming app. `Dialog` calls `onClose`
-from the close button, backdrop, or Escape key when dismissible; it does not
-mutate `open` internally. Set `dimBackdrop={false}` to disable background
-darkening, `blurBackdrop={true}` to blur content behind the dialog, and
-`showCountdown={true}` with `countdownDurationMs` to show a toast-style top
+Dialog components are controlled by the consuming app. `Dialog` renders a
+native `<dialog>` element and opens it with the browser top layer, so dialogs
+nest: with several dialogs open at once, Escape, Tab, and backdrop clicks only
+affect the topmost dialog and parent dialogs stay open. `Dialog` calls
+`onClose` from the close button, backdrop, or Escape key when dismissible; it
+does not mutate `open` internally. Set `dimBackdrop={false}` to disable
+background darkening, `blurBackdrop={true}` to blur content behind the dialog,
+and `showCountdown={true}` with `countdownDurationMs` to show a toast-style top
 countdown bar. The optional `padding` prop accepts a CSS padding shorthand and
 applies it consistently to the dialog header, body, and footer. The default
 section-specific spacing is preserved when `padding` is omitted, and the same
 prop is available on all dialog wrapper components. Set `restoreFocusSelector`
-when the opening control may be replaced while the dialog is open; after closing,
-`Dialog` focuses the latest matching element and otherwise falls back to the
-original connected element. `ConfirmDialog` forwards this prop to `Dialog`.
+when the opening control may be replaced while the dialog is open; after
+closing, `Dialog` focuses the latest matching element and otherwise falls back
+to the original connected element. `ConfirmDialog` renders its `message` once
+in the dialog body and forwards this prop, along with the dismiss, backdrop,
+countdown, and focus-restore lifecycle props, to `Dialog`.
 
 ## Dropdown
 
@@ -411,6 +416,14 @@ 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 `search={true}` with `loadOptions` to load remote options as the user
+types. The default `input_style="dropdown"` keeps the search field inside the
+expanded menu. Set `input_style="input"` to render a directly editable input;
+results appear while it is focused and hide on blur. In input style, the
+optional `getItemLabel` callback controls the displayed label while `value`
+and `onChange` continue to represent submitted option values. The input style
+is ignored when `search` is disabled.
+
 For keyboard typeahead, an option may provide `searchText` separately from its
 display `label`. Typeahead matches the beginning of `searchText` or `label`,
 while the label remains the only text shown in the trigger and menu:

package/dist/dialog/Dialog.svelte

@@ -1,5 +1,14 @@
 <svelte:options runes={false} />
 
+<script context="module" lang="ts">
+  // Mount order mirrors the native top layer: the last registered element is
+  // the topmost dialog, and only it reacts to Escape, Tab, and backdrop clicks.
+  const openDialogElements: HTMLDialogElement[] = [];
+
+  const focusableSelector =
+    'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+</script>
+
 <script lang="ts">
   import { tick } from 'svelte';
   import type { DialogSize } from './types.js';
@@ -26,29 +35,26 @@
   export let restoreFocusSelector: string | undefined = undefined;
   export let onClose: (() => void) | undefined = undefined;
 
-  let dialogElement: HTMLElement | undefined;
+  let dialogElement: HTMLDialogElement | undefined;
   let titleId = `suu-dialog-title-${Math.random().toString(36).slice(2)}`;
   let descriptionId = `suu-dialog-description-${Math.random().toString(36).slice(2)}`;
   let wasOpen = false;
   let previouslyFocusedElement: HTMLElement | null = null;
   let restoreFocusSelectorAtOpen: string | undefined;
 
+  // The dialog element is the full-viewport top layer surface; the visual
+  // backdrop and panel stay on their existing inner elements.
+  const dialogResetStyle =
+    'width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: none; background: transparent;';
+
   $: resolvedLabelledBy = labelledBy ?? (title ? titleId : undefined);
   $: resolvedDescribedBy =
     describedBy ?? (description ? descriptionId : undefined);
   $: backdropStyle =
     `--suu-dialog-backdrop-opacity: ${backdropOpacity}; --suu-dialog-backdrop-blur: ${backdropBlur};`;
-  $: dialogStyle = padding ? `--suu-dialog-padding: ${padding};` : '';
   $: countdownStyle = `--suu-dialog-countdown-duration: ${Math.max(0, countdownDurationMs)}ms;`;
   $: if (open && !wasOpen) {
     wasOpen = true;
-    void focusDialog();
-  } else if (!open && wasOpen) {
-    wasOpen = false;
-    restoreFocus();
-  }
-
-  async function focusDialog() {
     if (typeof document !== 'undefined') {
       previouslyFocusedElement =
         document.activeElement instanceof HTMLElement
@@ -56,7 +62,37 @@
           : null;
       restoreFocusSelectorAtOpen = restoreFocusSelector;
     }
+    void focusDialog();
+  } else if (!open && wasOpen) {
+    wasOpen = false;
+    void restoreFocus();
+  }
+
+  function presentDialog(element: HTMLDialogElement) {
+    if (!openDialogElements.includes(element)) {
+      openDialogElements.push(element);
+    }
+    if (typeof element.showModal === 'function') {
+      if (!element.open) {
+        element.showModal();
+      }
+    } else if (!element.hasAttribute('open')) {
+      // jsdom does not implement showModal; the attribute keeps the element
+      // rendered as an open dialog there.
+      element.setAttribute('open', '');
+    }
 
+    return {
+      destroy() {
+        const index = openDialogElements.indexOf(element);
+        if (index !== -1) {
+          openDialogElements.splice(index, 1);
+        }
+      },
+    };
+  }
+
+  async function focusDialog() {
     await tick();
     dialogElement?.focus();
   }
@@ -99,78 +135,115 @@
     requestClose();
   }
 
-  function handleKeydown(event: KeyboardEvent) {
-    if (open && event.key === 'Escape' && closeOnEscape) {
-      event.preventDefault();
+  function handleCancel(event: Event) {
+    // Prevent the browser's own Escape close so the open prop stays the only
+    // source of truth; only the topmost dialog receives this event natively.
+    event.preventDefault();
+    if (closeOnEscape) {
       requestClose();
     }
   }
-</script>
 
-<svelte:window on:keydown={handleKeydown} />
+  function handleKeydown(event: KeyboardEvent) {
+    if (event.key !== 'Tab' || !dialogElement) {
+      return;
+    }
+    if (openDialogElements[openDialogElements.length - 1] !== dialogElement) {
+      return;
+    }
+
+    event.preventDefault();
+    const focusables = Array.from(
+      dialogElement.querySelectorAll<HTMLElement>(focusableSelector),
+    );
+    if (focusables.length === 0) {
+      dialogElement.focus();
+      return;
+    }
+
+    const activeElement =
+      document.activeElement instanceof HTMLElement
+        ? document.activeElement
+        : undefined;
+    const currentIndex = activeElement
+      ? focusables.indexOf(activeElement)
+      : -1;
+    const nextIndex = event.shiftKey
+      ? currentIndex <= 0
+        ? focusables.length - 1
+        : currentIndex - 1
+      : currentIndex === -1 || currentIndex === focusables.length - 1
+        ? 0
+        : currentIndex + 1;
+    focusables[nextIndex].focus();
+  }
+</script>
 
 {#if open}
-  <div
-    class="suu-dialog-backdrop"
-    data-dimmed={dimBackdrop ? 'true' : 'false'}
-    data-blurred={blurBackdrop ? 'true' : 'false'}
-    style={backdropStyle}
-    role="presentation"
-    on:mousedown={handleBackdropMouseDown}
+  <dialog
+    bind:this={dialogElement}
+    class="suu-dialog-root"
+    style={dialogResetStyle}
+    aria-labelledby={resolvedLabelledBy}
+    aria-describedby={resolvedDescribedBy}
+    tabindex="-1"
+    use:presentDialog
+    on:cancel={handleCancel}
+    on:keydown={handleKeydown}
   >
     <div
-      bind:this={dialogElement}
-      class={`suu-dialog suu-dialog--${size}`}
-      style={dialogStyle}
-      role="dialog"
-      aria-modal="true"
-      aria-labelledby={resolvedLabelledBy}
-      aria-describedby={resolvedDescribedBy}
-      tabindex="-1"
+      class="suu-dialog-backdrop"
+      data-dimmed={dimBackdrop ? 'true' : 'false'}
+      data-blurred={blurBackdrop ? 'true' : 'false'}
+      style={backdropStyle}
+      role="presentation"
+      on:mousedown={handleBackdropMouseDown}
     >
-      {#if showCountdown && countdownDurationMs > 0}
-        <div
-          class="suu-dialog__countdown"
-          style={countdownStyle}
-          role="timer"
-          aria-label={countdownLabel}
-        ></div>
-      {/if}
-      <header class="suu-dialog__header">
-        <div class="suu-dialog__heading">
-          {#if title}
-            <h2 class="suu-dialog__title" id={titleId}>{title}</h2>
-          {/if}
-          {#if description}
-            <p class="suu-dialog__description" id={descriptionId}>
-              {description}
-            </p>
+      <div class={`suu-dialog suu-dialog--${size}`} style:--suu-dialog-padding={padding}>
+        {#if showCountdown && countdownDurationMs > 0}
+          <div
+            class="suu-dialog__countdown"
+            style={countdownStyle}
+            role="timer"
+            aria-label={countdownLabel}
+          ></div>
+        {/if}
+        <header class="suu-dialog__header">
+          <div class="suu-dialog__heading">
+            {#if title}
+              <h2 class="suu-dialog__title" id={titleId}>{title}</h2>
+            {/if}
+            {#if description}
+              <p class="suu-dialog__description" id={descriptionId}>
+                {description}
+              </p>
+            {/if}
+          </div>
+          {#if showCloseButton && dismissible}
+            <button
+              type="button"
+              class="suu-dialog__close"
+              aria-label={closeLabel}
+              title={closeLabel}
+              on:click={requestClose}
+            >
+              <svg viewBox="0 0 20 20" aria-hidden="true">
+                <path d="m6 6 8 8M14 6l-8 8"></path>
+              </svg>
+            </button>
           {/if}
+        </header>
+
+        <div class="suu-dialog__body">
+          <slot />
         </div>
-        {#if showCloseButton && dismissible}
-          <button
-            type="button"
-            class="suu-dialog__close"
-            aria-label={closeLabel}
-            title={closeLabel}
-            on:click={requestClose}
-          >
-            <svg viewBox="0 0 20 20" aria-hidden="true">
-              <path d="m6 6 8 8M14 6l-8 8"></path>
-            </svg>
-          </button>
-        {/if}
-      </header>
 
-      <div class="suu-dialog__body">
-        <slot />
+        {#if $$slots.footer}
+          <footer class="suu-dialog__footer">
+            <slot name="footer" />
+          </footer>
+        {/if}
       </div>
-
-      {#if $$slots.footer}
-        <footer class="suu-dialog__footer">
-          <slot name="footer" />
-        </footer>
-      {/if}
     </div>
-  </div>
+  </dialog>
 {/if}

package/dist/dialog/Dialog.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/dialog/Dialog.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AA0J7C,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;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId,QAAA,MAAM,MAAM;;;;;WAfksB,UAAU;cAAY,MAAM,GAAG,SAAS;;;;;;;sBAAsP,MAAM,GAAG,MAAM;;;;;iBAAmL,MAAM,GAAG,SAAS;kBAAgB,MAAM,GAAG,SAAS;2BAAyB,MAAM,GAAG,SAAS;cAAY,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS;;;;;;;;;cAehtC,CAAC;AAChF,KAAK,MAAM,GAAG,YAAY,CAAC,OAAO,MAAM,CAAC,CAAC;AAC5C,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Dialog.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/dialog/Dialog.svelte.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AA2N7C,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;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId,QAAA,MAAM,MAAM;;;;;WAfksB,UAAU;cAAY,MAAM,GAAG,SAAS;;;;;;;sBAAsP,MAAM,GAAG,MAAM;;;;;iBAAmL,MAAM,GAAG,SAAS;kBAAgB,MAAM,GAAG,SAAS;2BAAyB,MAAM,GAAG,SAAS;cAAY,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS;;;;;;;;;cAehtC,CAAC;AAChF,KAAK,MAAM,GAAG,YAAY,CAAC,OAAO,MAAM,CAAC,CAAC;AAC5C,eAAe,MAAM,CAAC"}

package/dist/dropdown/Dropdown.svelte

@@ -9,6 +9,8 @@
   import { getUiMessages, type UiLanguage } from '../i18n.js';
   import type {
     DropdownChangeHandler,
+    DropdownInputStyle,
+    DropdownItemLabelGetter,
     DropdownLoadOptions,
     DropdownLoadOptionsResult,
     DropdownLoadStatus,
@@ -19,6 +21,7 @@
     DropdownOptionGroup,
     DropdownPlacement,
     DropdownSelectionChangeHandler,
+    DropdownSearchChangeHandler,
     DropdownSelection,
     DropdownTriggerClickHandler,
     DropdownValue
@@ -33,10 +36,13 @@
   export let selectedOptions: DropdownOption[] = [];
   export let groupsCollapsedByDefault: 'true' | 'false' | 'auto' = 'false';
   export let search = false;
+  export let input_style: DropdownInputStyle = 'dropdown';
+  export let getItemLabel: DropdownItemLabelGetter = (option) => option.label;
   export let loadOptions: DropdownLoadOptions | undefined = undefined;
   export let searchDebounceMs = 300;
   export let searchLimit = 10;
   export let searchPlaceholder: string | undefined = undefined;
+  export let placeholder: string | undefined = undefined;
   export let language: UiLanguage = 'en_us';
   export let loadingText: string | undefined = undefined;
   export let noResultsText: string | undefined = undefined;
@@ -55,6 +61,7 @@
   export let className: string | undefined = undefined;
   export let portal = false;
   export let onChange: DropdownSelectionChangeHandler | undefined = undefined;
+  export let onSearchChange: DropdownSearchChangeHandler | undefined = undefined;
   export let onTriggerClick: DropdownTriggerClickHandler | undefined = undefined;
 
   const viewportMargin = 20;
@@ -82,6 +89,10 @@
   // from a search response; once true, the user's manual toggles own the set.
   let searchGroupsInitialized = false;
   let searchQuery = '';
+  // 在受控 value 尚未响应 onChange 时保留用户当前输入，避免
+  // selectedText 的旧值在同一轮更新中覆盖输入框内容。
+  let inputDraft: string | undefined;
+  let preserveInputDraftOnClose = false;
   let searchStatus: DropdownLoadStatus = 'idle';
   let searchOptions: DropdownOption[] = [];
   let searchOptionGroups: DropdownOptionGroup[] | undefined = undefined;
@@ -115,7 +126,11 @@
   $: selectedOption = Array.isArray(value) ? undefined : resolvedOptions.find((option) => option.value === value);
   $: selectedText = multiselect
     ? selectedLabelTexts(selectedValues).join(', ')
-    : labelForValue(Array.isArray(value) ? '' : value);
+    : displayLabelForValue(Array.isArray(value) ? '' : value);
+  $: inputMode = search && input_style === 'input';
+  $: inputDisplayValue = inputMode
+    ? (inputDraft ?? (searchQuery || (multiselect ? '' : selectedText)))
+    : '';
   $: if (!open) {
     activeValue = initialActiveValue();
   }
@@ -185,6 +200,12 @@
     return option?.label ?? knownLabels.get(nextValue) ?? String(nextValue);
   }
 
+  function displayLabelForValue(nextValue: DropdownValue): string {
+    const option = resolvedOptions.find((candidate) => candidate.value === nextValue) ??
+      selectedOptions.find((candidate) => candidate.value === nextValue);
+    return option ? getItemLabel(option) : labelForValue(nextValue);
+  }
+
   // Multiselect trigger text only lists values whose label is known; values
   // without one never render a raw fallback string into the trigger.
   function selectedLabelTexts(nextValues: DropdownMultiValue): string[] {
@@ -194,7 +215,9 @@
         resolvedOptions.find((candidate) => candidate.value === nextValue)?.label ??
         knownLabels.get(nextValue);
       if (label !== undefined) {
-        texts.push(label);
+        const option = resolvedOptions.find((candidate) => candidate.value === nextValue) ??
+          selectedOptions.find((candidate) => candidate.value === nextValue);
+        texts.push(option ? getItemLabel(option) : label);
       }
     }
     return texts;
@@ -332,6 +355,10 @@
       return;
     }
 
+    if (inputMode) {
+      inputDraft = getItemLabel(option);
+      preserveInputDraftOnClose = true;
+    }
     open = false;
     clearTypeaheadBuffer();
     void (onChange as DropdownChangeHandler | undefined)?.(option.value);
@@ -452,6 +479,11 @@
     clearSearchTimer();
     abortSearchController();
     searchQuery = '';
+    if (preserveInputDraftOnClose) {
+      preserveInputDraftOnClose = false;
+    } else {
+      inputDraft = undefined;
+    }
     searchOptions = [];
     searchOptionGroups = undefined;
     searchStatus = 'idle';
@@ -459,6 +491,7 @@
 
   function beginSearchOnOpen() {
     searchQuery = '';
+    inputDraft = undefined;
     searchOptions = [];
     searchOptionGroups = undefined;
     collapsedGroupIndexes = new Set();
@@ -482,7 +515,7 @@
     }
     open = true;
     activeValue = initialActiveValue();
-    if (search) {
+    if (search && !inputMode) {
       void tick().then(() => {
         searchInputElement?.focus();
       });
@@ -573,6 +606,7 @@
           openMenu();
         }
         searchQuery = wasOpen ? `${searchQuery}${normalizeTypeaheadKey(event.key)}` : normalizeTypeaheadKey(event.key);
+        void onSearchChange?.(searchQuery);
         scheduleSearch(searchQuery);
         return;
       }
@@ -591,10 +625,31 @@
   }
 
   function handleSearchInput(event: Event) {
-    searchQuery = (event.currentTarget as HTMLInputElement).value;
+    const nextQuery = (event.currentTarget as HTMLInputElement).value;
+    inputDraft = nextQuery;
+    if (inputMode && !multiselect && value !== '' && nextQuery !== selectedText) {
+      void (onChange as DropdownChangeHandler | undefined)?.('');
+    }
+    searchQuery = nextQuery;
+    if (inputMode) {
+      if (nextQuery.trim()) {
+        if (!open) {
+          updateResolvedPlacement();
+          open = true;
+          activeValue = initialActiveValue();
+        }
+      } else {
+        open = false;
+      }
+    }
+    void onSearchChange?.(searchQuery);
     scheduleSearch(searchQuery);
   }
 
+  function handleInputFocus() {
+    // 输入模式下聚焦只准备输入；用户输入有效搜索词后才展开结果。
+  }
+
   function handleSearchKeydown(event: KeyboardEvent) {
     if (event.key === 'Escape') {
       event.preventDefault();
@@ -716,11 +771,19 @@
   }
 
   function portalMenu(node: HTMLDivElement, enabled: boolean) {
+    let resizeObserver: ResizeObserver | undefined;
     if (enabled && typeof document !== 'undefined') {
       document.body.appendChild(node);
+      if (typeof ResizeObserver !== 'undefined') {
+        resizeObserver = new ResizeObserver(() => {
+          if (open) void updateViewportPanelMaxHeight();
+        });
+        resizeObserver.observe(node);
+      }
     }
     return {
       destroy() {
+        resizeObserver?.disconnect();
         if (node.parentNode) {
           node.parentNode.removeChild(node);
         }
@@ -806,6 +869,47 @@
   style:max-width={maxWidth}
   on:focusout={handleFocusout}
 >
+  {#if inputMode}
+    {#if multiselect && selectedValues.length > 0}
+      <div class="suu-dropdown__selected-items">
+        {#each selectedValues as selectedValue}
+          {@const selectedOption = resolvedOptions.find((option) => option.value === selectedValue) ?? selectedOptions.find((option) => option.value === selectedValue)}
+          {#if selectedOption}
+            <span class="suu-dropdown__selected-item">
+              <span>{getItemLabel(selectedOption)}</span>
+              <button
+                type="button"
+                class="suu-dropdown__selected-remove"
+                aria-label={`Remove ${getItemLabel(selectedOption)}`}
+                on:mousedown|preventDefault
+                on:click={() => selectOption(selectedOption)}
+              >×</button>
+            </span>
+          {/if}
+        {/each}
+      </div>
+    {/if}
+    <div class="suu-dropdown__input-field">
+      <input
+        bind:this={searchInputElement}
+        {id}
+        class="suu-dropdown__input"
+        type="text"
+        value={inputDisplayValue}
+        placeholder={searchPlaceholder ?? placeholder ?? ''}
+        aria-label={ariaLabel}
+        autocomplete="off"
+        role="combobox"
+        aria-expanded={open}
+        aria-autocomplete="list"
+        aria-controls={resolvedListboxId}
+        {disabled}
+        on:focus={handleInputFocus}
+        on:input={handleSearchInput}
+        on:keydown={handleSearchKeydown}
+      />
+    </div>
+  {:else}
   <button
     bind:this={buttonElement}
     {id}
@@ -819,9 +923,10 @@
     on:click={handleTriggerClick}
     on:keydown={handleKeydown}
   >
-    <span class="suu-dropdown__label">{selectedText}</span>
+    <span class="suu-dropdown__label">{selectedText || placeholder || ''}</span>
     <span class="suu-dropdown__chevron" aria-hidden="true"></span>
   </button>
+  {/if}
 
   {#if name !== undefined && !multiselect}
     <input
@@ -853,7 +958,7 @@
       style:--suu-dropdown-menu-width={portalMenuWidth}
       style:--suu-dropdown-panel-max-height={viewportPanelMaxHeight}
     >
-      {#if search}
+      {#if search && !inputMode}
         <div class="suu-dropdown__search">
           <svg class="suu-dropdown__search-icon" viewBox="0 0 24 24" aria-hidden="true">
             <circle cx="11" cy="11" r="7"></circle>

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

@@ -1,5 +1,5 @@
 import { type UiLanguage } from '../i18n.js';
-import type { DropdownLoadOptions, DropdownMenuAlign, DropdownOption, DropdownOptionGroup, DropdownPlacement, DropdownSelectionChangeHandler, DropdownSelection, DropdownTriggerClickHandler } from './types.js';
+import type { DropdownInputStyle, DropdownItemLabelGetter, DropdownLoadOptions, DropdownMenuAlign, DropdownOption, DropdownOptionGroup, DropdownPlacement, DropdownSelectionChangeHandler, DropdownSearchChangeHandler, 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;
@@ -22,10 +22,13 @@ declare const Dropdown: $$__sveltets_2_IsomorphicComponent<{
     /** Labels for controlled values that are not present in the current search result. */ selectedOptions?: DropdownOption[];
     groupsCollapsedByDefault?: "true" | "false" | "auto";
     search?: boolean;
+    input_style?: DropdownInputStyle;
+    getItemLabel?: DropdownItemLabelGetter;
     loadOptions?: DropdownLoadOptions | undefined;
     searchDebounceMs?: number;
     searchLimit?: number;
     searchPlaceholder?: string | undefined;
+    placeholder?: string | undefined;
     language?: UiLanguage;
     loadingText?: string | undefined;
     noResultsText?: string | undefined;
@@ -44,8 +47,11 @@ declare const Dropdown: $$__sveltets_2_IsomorphicComponent<{
     className?: string | undefined;
     portal?: boolean;
     onChange?: DropdownSelectionChangeHandler | undefined;
+    onSearchChange?: DropdownSearchChangeHandler | undefined;
     onTriggerClick?: DropdownTriggerClickHandler | undefined;
 }, {
+    mousedown: MouseEvent;
+} & {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
 type Dropdown = InstanceType<typeof Dropdown>;

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":"AAOA,OAAO,EAAiB,KAAK,UAAU,EAAE,MAAM,YAAY,CAAC;AAC5D,OAAO,KAAK,EAER,mBAAmB,EAGnB,iBAAiB,EAGjB,cAAc,EACd,mBAAmB,EACnB,iBAAiB,EACjB,8BAA8B,EAC9B,iBAAiB,EACjB,2BAA2B,EAE5B,MAAM,YAAY,CAAC;AA81BtB,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;SAXswB,MAAM,GAAG,SAAS;YAAU,iBAAiB;;cAA8C,cAAc,EAAE;mBAAiB,mBAAmB,EAAE,GAAG,SAAS;IACj7B,sFAAsF,mBAAkB,cAAc,EAAE;+BAA6B,MAAM,GAAG,OAAO,GAAG,MAAM;;kBAAwC,mBAAmB,GAAG,SAAS;;;wBAAoG,MAAM,GAAG,SAAS;eAAa,UAAU;kBAAgB,MAAM,GAAG,SAAS;oBAAkB,MAAM,GAAG,SAAS;gBAAc,MAAM,GAAG,SAAS;gBAAc,MAAM,GAAG,SAAS;gBAAc,iBAAiB;gBAAc,iBAAiB;;;;WAAuG,MAAM,GAAG,SAAS;;YAAsC,MAAM,GAAG,SAAS;eAAa,MAAM,GAAG,SAAS;eAAa,MAAM,GAAG,SAAS;gBAAc,MAAM,GAAG,SAAS;;eAAqC,8BAA8B,GAAG,SAAS;qBAAmB,2BAA2B,GAAG,SAAS;;;kBAUj4B,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":"AAOA,OAAO,EAAiB,KAAK,UAAU,EAAE,MAAM,YAAY,CAAC;AAC5D,OAAO,KAAK,EAER,kBAAkB,EAClB,uBAAuB,EACvB,mBAAmB,EAGnB,iBAAiB,EAGjB,cAAc,EACd,mBAAmB,EACnB,iBAAiB,EACjB,8BAA8B,EAC9B,2BAA2B,EAC3B,iBAAiB,EACjB,2BAA2B,EAE5B,MAAM,YAAY,CAAC;AA66BtB,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;SAX03B,MAAM,GAAG,SAAS;YAAU,iBAAiB;;cAA8C,cAAc,EAAE;mBAAiB,mBAAmB,EAAE,GAAG,SAAS;IACriC,sFAAsF,mBAAkB,cAAc,EAAE;+BAA6B,MAAM,GAAG,OAAO,GAAG,MAAM;;kBAAwC,kBAAkB;mBAAiB,uBAAuB;kBAAgB,mBAAmB,GAAG,SAAS;;;wBAAoG,MAAM,GAAG,SAAS;kBAAgB,MAAM,GAAG,SAAS;eAAa,UAAU;kBAAgB,MAAM,GAAG,SAAS;oBAAkB,MAAM,GAAG,SAAS;gBAAc,MAAM,GAAG,SAAS;gBAAc,MAAM,GAAG,SAAS;gBAAc,iBAAiB;gBAAc,iBAAiB;;;;WAAuG,MAAM,GAAG,SAAS;;YAAsC,MAAM,GAAG,SAAS;eAAa,MAAM,GAAG,SAAS;eAAa,MAAM,GAAG,SAAS;gBAAc,MAAM,GAAG,SAAS;;eAAqC,8BAA8B,GAAG,SAAS;qBAAmB,2BAA2B,GAAG,SAAS;qBAAmB,2BAA2B,GAAG,SAAS;;;;;kBAUviC,CAAC;AAC5E,KAAK,QAAQ,GAAG,YAAY,CAAC,OAAO,QAAQ,CAAC,CAAC;AAChD,eAAe,QAAQ,CAAC"}

package/dist/dropdown/index.d.ts

@@ -1,4 +1,4 @@
 export { default as Dropdown } from './Dropdown.svelte';
 export { default as DropdownMultiSelect } from './DropdownMultiSelect.svelte';
-export type { DropdownChangeHandler, DropdownLoadContext, DropdownLoadOptions, DropdownLoadOptionsResult, DropdownLoadStatus, DropdownMenuAlign, DropdownMultiChangeHandler, DropdownMultiValue, DropdownOption, DropdownOptionGroup, DropdownPlacement, DropdownSelectionChangeHandler, DropdownSelection, DropdownTriggerClickHandler, DropdownValue } from './types.js';
+export type { DropdownChangeHandler, DropdownInputStyle, DropdownItemLabelGetter, DropdownLoadContext, DropdownLoadOptions, DropdownLoadOptionsResult, DropdownLoadStatus, DropdownMenuAlign, DropdownMultiChangeHandler, DropdownMultiValue, DropdownOption, DropdownOptionGroup, DropdownPlacement, DropdownSelectionChangeHandler, DropdownSearchChangeHandler, 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,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAC9E,YAAY,EACV,qBAAqB,EACrB,mBAAmB,EACnB,mBAAmB,EACnB,yBAAyB,EACzB,kBAAkB,EAClB,iBAAiB,EACjB,0BAA0B,EAC1B,kBAAkB,EAClB,cAAc,EACd,mBAAmB,EACnB,iBAAiB,EACjB,8BAA8B,EAC9B,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,kBAAkB,EAClB,uBAAuB,EACvB,mBAAmB,EACnB,mBAAmB,EACnB,yBAAyB,EACzB,kBAAkB,EAClB,iBAAiB,EACjB,0BAA0B,EAC1B,kBAAkB,EAClB,cAAc,EACd,mBAAmB,EACnB,iBAAiB,EACjB,8BAA8B,EAC9B,2BAA2B,EAC3B,iBAAiB,EACjB,2BAA2B,EAC3B,aAAa,EACd,MAAM,YAAY,CAAC"}

package/dist/dropdown/types.d.ts

@@ -25,6 +25,9 @@ export type DropdownSelectionChangeHandler = {
     bivarianceHack(value: DropdownSelection): void | Promise<void>;
 }['bivarianceHack'];
 export type DropdownTriggerClickHandler = (event: MouseEvent) => void;
+export type DropdownSearchChangeHandler = (query: string) => void | Promise<void>;
+export type DropdownInputStyle = 'dropdown' | 'input';
+export type DropdownItemLabelGetter = (option: DropdownOption) => string;
 export type DropdownLoadStatus = 'idle' | 'loading' | 'success' | 'error';
 export interface DropdownLoadContext {
     limit: number;

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;;;;GAIG;AACH,MAAM,MAAM,aAAa,GAAG,MAAM,CAAC;AAEnC,MAAM,MAAM,kBAAkB,GAAG,MAAM,EAAE,CAAC;AAE1C,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,mGAAmG;IACnG,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,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;AAEtE,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAE1E,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,WAAW,CAAC;CACrB;AAED,MAAM,WAAW,yBAAyB;IACxC;;;OAGG;IACH,OAAO,CAAC,EAAE,cAAc,EAAE,CAAC;IAC3B,YAAY,CAAC,EAAE,mBAAmB,EAAE,CAAC;CACtC;AAED,MAAM,MAAM,mBAAmB,GAAG,CAChC,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,mBAAmB,KACzB,OAAO,CAAC,yBAAyB,CAAC,GAAG,yBAAyB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/lib/dropdown/types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,MAAM,MAAM,aAAa,GAAG,MAAM,CAAC;AAEnC,MAAM,MAAM,kBAAkB,GAAG,MAAM,EAAE,CAAC;AAE1C,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,mGAAmG;IACnG,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,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;AAEtE,MAAM,MAAM,2BAA2B,GAAG,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;AAElF,MAAM,MAAM,kBAAkB,GAAG,UAAU,GAAG,OAAO,CAAC;AACtD,MAAM,MAAM,uBAAuB,GAAG,CAAC,MAAM,EAAE,cAAc,KAAK,MAAM,CAAC;AAEzE,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAE1E,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,WAAW,CAAC;CACrB;AAED,MAAM,WAAW,yBAAyB;IACxC;;;OAGG;IACH,OAAO,CAAC,EAAE,cAAc,EAAE,CAAC;IAC3B,YAAY,CAAC,EAAE,mBAAmB,EAAE,CAAC;CACtC;AAED,MAAM,MAAM,mBAAmB,GAAG,CAChC,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,mBAAmB,KACzB,OAAO,CAAC,yBAAyB,CAAC,GAAG,yBAAyB,CAAC"}

package/dist/style.css

@@ -1209,6 +1209,59 @@
   opacity: 0.6;
 }
 
+.suu-dropdown__input-field {
+  position: relative;
+  width: 100%;
+}
+
+.suu-dropdown__input {
+  width: 100%;
+  min-height: 42px;
+  box-sizing: border-box;
+  border: 1px solid var(--suu-color-border);
+  border-radius: var(--suu-radius);
+  background: var(--suu-color-bg);
+  color: var(--suu-color-text);
+  padding: 9px 14px;
+  font: inherit;
+}
+
+.suu-dropdown__input:focus {
+  border-color: var(--suu-color-accent);
+  outline: 2px solid color-mix(in srgb, var(--suu-color-accent) 22%, transparent);
+  outline-offset: 1px;
+}
+
+.suu-dropdown__selected-items {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-bottom: 6px;
+}
+
+.suu-dropdown__selected-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  max-width: 100%;
+  padding: 3px 6px 3px 9px;
+  border: 1px solid color-mix(in srgb, var(--suu-color-accent) 34%, var(--suu-color-border));
+  border-radius: var(--suu-radius-pill);
+  background: color-mix(in srgb, var(--suu-color-accent) 9%, var(--suu-color-bg));
+  color: var(--suu-color-text);
+  font-size: 0.875rem;
+}
+
+.suu-dropdown__selected-remove {
+  border: 0;
+  padding: 0 2px;
+  background: transparent;
+  color: var(--suu-color-muted);
+  cursor: pointer;
+  font: inherit;
+  line-height: 1;
+}
+
 .suu-dropdown__chevron {
   flex: 0 0 auto;
   width: 0.58em;

package/package.json

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