svelte-multiselect 11.1.1 → 11.2.1

package/dist/RadioButtons.svelte.d.ts

@@ -0,0 +1,44 @@
+import type { Snippet } from 'svelte';
+type GenericOption = string | number | {
+    value: unknown;
+    label: string | number;
+};
+declare class __sveltets_Render<Option extends GenericOption> {
+    props(): {
+        [key: string]: unknown;
+        options: Option[];
+        selected?: string | number | null;
+        id?: string | null;
+        name?: string | null;
+        disabled?: boolean;
+        required?: boolean;
+        aria_label?: string | null;
+        onclick?: ((event: MouseEvent) => void) | undefined;
+        onchange?: ((event: Event) => void) | undefined;
+        oninput?: ((event: Event) => void) | undefined;
+        option_snippet?: Snippet<[{
+            option: Option;
+            selected: boolean;
+            active: boolean;
+        }]> | undefined;
+        children?: Snippet<[{
+            option: Option;
+            selected: boolean;
+            active: boolean;
+        }]> | undefined;
+    };
+    events(): {};
+    slots(): {};
+    bindings(): "selected";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Option extends GenericOption>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Option>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Option>['props']>, ReturnType<__sveltets_Render<Option>['events']>, ReturnType<__sveltets_Render<Option>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Option>['bindings']>;
+    } & ReturnType<__sveltets_Render<Option>['exports']>;
+    <Option extends GenericOption>(internal: unknown, props: ReturnType<__sveltets_Render<Option>['props']> & {}): ReturnType<__sveltets_Render<Option>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const RadioButtons: $$IsomorphicComponent;
+type RadioButtons<Option extends GenericOption> = InstanceType<typeof RadioButtons<Option>>;
+export default RadioButtons;

package/dist/Toggle.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">let { checked = $bindable(false), required = false, input_style = ``, id = null, onclick, onchange, onblur, onkeydown, children, ...rest } = $props();
+// normally input type=checkbox toggles on space bar, this handler also responds to enter
+function handle_keydown(event) {
+    onkeydown?.(event);
+    if (event.key === `Enter`) {
+        event.preventDefault();
+        checked = !checked;
+    }
+}
+export {};
+</script>
+
+<label {...rest}>
+  {@render children?.()}
+  <input
+    type="checkbox"
+    bind:checked
+    {id}
+    {required}
+    onkeydown={handle_keydown}
+    {onchange}
+    {onblur}
+    {onclick}
+    style={input_style}
+  />
+  <span></span>
+</label>
+
+<style>
+  label {
+    display: var(--toggle-label-display, inline-flex);
+    align-items: var(--toggle-label-align-items, center);
+    width: var(--toggle-label-width, max-content);
+    vertical-align: var(--toggle-label-vertical-align, middle);
+  }
+  span {
+    box-sizing: border-box;
+    height: var(--toggle-knob-height, 1.5em);
+    width: var(--toggle-knob-width, 3em);
+    padding: var(--toggle-knob-padding, 0.1em);
+    border: var(--toggle-knob-border, 1px solid lightgray);
+    border-radius: var(--toggle-knob-border-radius, 0.75em);
+    transition: var(--toggle-knob-transition, 0.3s);
+  }
+  input:checked + span {
+    background: var(--toggle-background, black);
+  }
+  input {
+    position: absolute;
+    opacity: 0;
+    width: var(--toggle-input-width, 1em);
+  }
+  input + span::after {
+    content: '';
+    display: var(--toggle-knob-after-display, block);
+    height: var(--toggle-knob-after-height, 1.2em);
+    width: var(--toggle-knob-after-width, 1.2em);
+    border-radius: var(--toggle-knob-after-border-radius, 50%);
+    background: var(--toggle-knob-after-background, gray);
+    transition: var(--toggle-knob-after-transition, 0.3s);
+  }
+  input:checked + span::after {
+    background: var(--toggle-knob-after-background, green);
+    transform: var(
+      --toggle-knob-after-transform,
+      translate(
+        calc(
+          var(--toggle-knob-width, 3em) - var(--toggle-knob-height, 1.5em)
+            + var(--toggle-knob-padding, 0.1em)
+            - var(--toggle-knob-border, 2px)
+        )
+      )
+    );
+  }
+  input:focus + span {
+    border: var(--toggle-knob-focus-border, 1px solid cornflowerblue);
+  }
+</style>

package/dist/Toggle.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    checked?: boolean;
+    required?: boolean;
+    input_style?: string;
+    id?: string | null;
+    onclick?: (event: MouseEvent) => void;
+    onchange?: (event: Event) => void;
+    onblur?: (event: FocusEvent) => void;
+    onkeydown?: (event: KeyboardEvent) => void;
+    children?: Snippet<[]>;
+    [key: string]: unknown;
+}
+declare const Toggle: import("svelte").Component<Props, {}, "checked">;
+type Toggle = ReturnType<typeof Toggle>;
+export default Toggle;

package/dist/icons.d.ts

@@ -0,0 +1,47 @@
+export declare const icon_data: {
+    readonly Alert: {
+        readonly viewBox: "0 0 16 16";
+        readonly path: "M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z";
+    };
+    readonly Check: {
+        readonly viewBox: "0 0 12 16";
+        readonly path: "M12 5l-8 8l-4-4l1.5-1.5L4 10l6.5-6.5L12 5z";
+    };
+    readonly ChevronExpand: {
+        readonly viewBox: "0 0 16 16";
+        readonly path: "M3.646 9.146a.5.5 0 0 1 .708 0L8 12.793l3.646-3.647a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 0-.708zm0-2.292a.5.5 0 0 0 .708 0L8 3.207l3.646 3.647a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 0 0 0 .708z";
+    };
+    readonly Collapse: {
+        readonly viewBox: "0 0 24 24";
+        readonly path: "M12 7.59L7.05 2.64L5.64 4.05L12 10.41l6.36-6.36l-1.41-1.41L12 7.59zM5.64 19.95l1.41 1.41L12 16.41l4.95 4.95l1.41-1.41L12 13.59l-6.36 6.36z";
+    };
+    readonly Copy: {
+        readonly viewBox: "0 0 16 16";
+        readonly path: "M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z";
+    };
+    readonly Cross: {
+        readonly viewBox: "0 0 24 24";
+        readonly path: "M18.3 5.71a.996.996 0 0 0-1.41 0L12 10.59L7.11 5.7A.996.996 0 1 0 5.7 7.11L10.59 12L5.7 16.89a.996.996 0 1 0 1.41 1.41L12 13.41l4.89 4.89a.996.996 0 1 0 1.41-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z";
+    };
+    readonly Disabled: {
+        readonly viewBox: "0 0 24 24";
+        readonly path: "M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2S2 6.477 2 12s4.477 10 10 10Zm-4.906-3.68L18.32 7.094A8 8 0 0 1 7.094 18.32ZM5.68 16.906A8 8 0 0 1 16.906 5.68L5.68 16.906Z";
+    };
+    readonly Expand: {
+        readonly viewBox: "0 0 24 24";
+        readonly path: "m12 19.24l-4.95-4.95l-1.41 1.42L12 22.07l6.36-6.36l-1.41-1.42L12 19.24zM5.64 8.29l1.41 1.42L12 4.76l4.95 4.95l1.41-1.42L12 1.93L5.64 8.29z";
+    };
+    readonly GitHub: {
+        readonly viewBox: "0 0 24 24";
+        readonly path: "M8.422 20.081c0 .896.01 1.753.016 2.285a.617.617 0 0 0 .422.58c2.078.686 4.317.718 6.414.091l.292-.087a.67.67 0 0 0 .478-.638c.005-.733.017-2.017.017-3.53c0-1.372-.477-2.25-1.031-2.707c3.399-.366 6.97-1.61 6.97-7.227c0-1.61-.592-2.91-1.566-3.934c.153-.366.688-1.866-.153-3.878c0 0-1.28-.403-4.201 1.5a14.76 14.76 0 0 0-3.82-.494c-1.298 0-2.597.165-3.819.494C5.52.65 4.24 1.036 4.24 1.036c-.84 2.012-.306 3.512-.153 3.878a5.565 5.565 0 0 0-1.566 3.934c0 5.598 3.552 6.86 6.951 7.227c-.439.366-.84 1.006-.973 1.957c-.879.384-3.075 1.006-4.45-1.207c-.286-.44-1.146-1.519-2.349-1.5c-1.28.018-.516.695.02.97c.648.347 1.393 1.646 1.565 2.067c.306.823 1.299 2.396 5.137 1.72Z";
+    };
+    readonly StackBlitz: {
+        readonly viewBox: "0 0 24 24";
+        readonly path: "M10.797 14.182H3.635L16.728 0l-3.525 9.818h7.162L7.272 24l3.524-9.818Z";
+    };
+    readonly Svelte: {
+        readonly viewBox: "0 0 24 24";
+        readonly path: "M10.354 21.125a4.44 4.44 0 0 1-4.765-1.767a4.109 4.109 0 0 1-.703-3.107a3.898 3.898 0 0 1 .134-.522l.105-.321l.287.21a7.21 7.21 0 0 0 2.186 1.092l.208.063l-.02.208a1.253 1.253 0 0 0 .226.83a1.337 1.337 0 0 0 1.435.533a1.231 1.231 0 0 0 .343-.15l5.59-3.562a1.164 1.164 0 0 0 .524-.778a1.242 1.242 0 0 0-.211-.937a1.338 1.338 0 0 0-1.435-.533a1.23 1.23 0 0 0-.343.15l-2.133 1.36a4.078 4.078 0 0 1-1.135.499a4.44 4.44 0 0 1-4.765-1.766a4.108 4.108 0 0 1-.702-3.108a3.855 3.855 0 0 1 1.742-2.582l5.589-3.563a4.072 4.072 0 0 1 1.135-.499a4.44 4.44 0 0 1 4.765 1.767a4.109 4.109 0 0 1 .703 3.107a3.943 3.943 0 0 1-.134.522l-.105.321l-.286-.21a7.204 7.204 0 0 0-2.187-1.093l-.208-.063l.02-.207a1.255 1.255 0 0 0-.226-.831a1.337 1.337 0 0 0-1.435-.532a1.231 1.231 0 0 0-.343.15L8.62 9.368a1.162 1.162 0 0 0-.524.778a1.24 1.24 0 0 0 .211.937a1.338 1.338 0 0 0 1.435.533a1.235 1.235 0 0 0 .344-.151l2.132-1.36a4.067 4.067 0 0 1 1.135-.498a4.44 4.44 0 0 1 4.765 1.766a4.108 4.108 0 0 1 .702 3.108a3.857 3.857 0 0 1-1.742 2.583l-5.589 3.562a4.072 4.072 0 0 1-1.135.499m10.358-17.95C18.484-.015 14.082-.96 10.9 1.068L5.31 4.63a6.412 6.412 0 0 0-2.896 4.295a6.753 6.753 0 0 0 .666 4.336a6.43 6.43 0 0 0-.96 2.396a6.833 6.833 0 0 0 1.168 5.167c2.229 3.19 6.63 4.135 9.812 2.108l5.59-3.562a6.41 6.41 0 0 0 2.896-4.295a6.756 6.756 0 0 0-.665-4.336a6.429 6.429 0 0 0 .958-2.396a6.831 6.831 0 0 0-1.167-5.168Z";
+    };
+};
+export type IconName = keyof typeof icon_data;

package/dist/icons.js

@@ -0,0 +1,46 @@
+export const icon_data = {
+    Alert: {
+        viewBox: `0 0 16 16`,
+        path: `M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z`,
+    },
+    Check: {
+        viewBox: `0 0 12 16`,
+        path: `M12 5l-8 8l-4-4l1.5-1.5L4 10l6.5-6.5L12 5z`,
+    },
+    ChevronExpand: {
+        viewBox: `0 0 16 16`,
+        path: `M3.646 9.146a.5.5 0 0 1 .708 0L8 12.793l3.646-3.647a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 0-.708zm0-2.292a.5.5 0 0 0 .708 0L8 3.207l3.646 3.647a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 0 0 0 .708z`,
+    },
+    Collapse: {
+        viewBox: `0 0 24 24`,
+        path: `M12 7.59L7.05 2.64L5.64 4.05L12 10.41l6.36-6.36l-1.41-1.41L12 7.59zM5.64 19.95l1.41 1.41L12 16.41l4.95 4.95l1.41-1.41L12 13.59l-6.36 6.36z`,
+    },
+    Copy: {
+        viewBox: `0 0 16 16`,
+        path: `M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z`,
+    },
+    Cross: {
+        viewBox: `0 0 24 24`,
+        path: `M18.3 5.71a.996.996 0 0 0-1.41 0L12 10.59L7.11 5.7A.996.996 0 1 0 5.7 7.11L10.59 12L5.7 16.89a.996.996 0 1 0 1.41 1.41L12 13.41l4.89 4.89a.996.996 0 1 0 1.41-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z`,
+    },
+    Disabled: {
+        viewBox: `0 0 24 24`,
+        path: `M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2S2 6.477 2 12s4.477 10 10 10Zm-4.906-3.68L18.32 7.094A8 8 0 0 1 7.094 18.32ZM5.68 16.906A8 8 0 0 1 16.906 5.68L5.68 16.906Z`,
+    },
+    Expand: {
+        viewBox: `0 0 24 24`,
+        path: `m12 19.24l-4.95-4.95l-1.41 1.42L12 22.07l6.36-6.36l-1.41-1.42L12 19.24zM5.64 8.29l1.41 1.42L12 4.76l4.95 4.95l1.41-1.42L12 1.93L5.64 8.29z`,
+    },
+    GitHub: {
+        viewBox: `0 0 24 24`,
+        path: `M8.422 20.081c0 .896.01 1.753.016 2.285a.617.617 0 0 0 .422.58c2.078.686 4.317.718 6.414.091l.292-.087a.67.67 0 0 0 .478-.638c.005-.733.017-2.017.017-3.53c0-1.372-.477-2.25-1.031-2.707c3.399-.366 6.97-1.61 6.97-7.227c0-1.61-.592-2.91-1.566-3.934c.153-.366.688-1.866-.153-3.878c0 0-1.28-.403-4.201 1.5a14.76 14.76 0 0 0-3.82-.494c-1.298 0-2.597.165-3.819.494C5.52.65 4.24 1.036 4.24 1.036c-.84 2.012-.306 3.512-.153 3.878a5.565 5.565 0 0 0-1.566 3.934c0 5.598 3.552 6.86 6.951 7.227c-.439.366-.84 1.006-.973 1.957c-.879.384-3.075 1.006-4.45-1.207c-.286-.44-1.146-1.519-2.349-1.5c-1.28.018-.516.695.02.97c.648.347 1.393 1.646 1.565 2.067c.306.823 1.299 2.396 5.137 1.72Z`,
+    },
+    StackBlitz: {
+        viewBox: `0 0 24 24`,
+        path: `M10.797 14.182H3.635L16.728 0l-3.525 9.818h7.162L7.272 24l3.524-9.818Z`,
+    },
+    Svelte: {
+        viewBox: `0 0 24 24`,
+        path: `M10.354 21.125a4.44 4.44 0 0 1-4.765-1.767a4.109 4.109 0 0 1-.703-3.107a3.898 3.898 0 0 1 .134-.522l.105-.321l.287.21a7.21 7.21 0 0 0 2.186 1.092l.208.063l-.02.208a1.253 1.253 0 0 0 .226.83a1.337 1.337 0 0 0 1.435.533a1.231 1.231 0 0 0 .343-.15l5.59-3.562a1.164 1.164 0 0 0 .524-.778a1.242 1.242 0 0 0-.211-.937a1.338 1.338 0 0 0-1.435-.533a1.23 1.23 0 0 0-.343.15l-2.133 1.36a4.078 4.078 0 0 1-1.135.499a4.44 4.44 0 0 1-4.765-1.766a4.108 4.108 0 0 1-.702-3.108a3.855 3.855 0 0 1 1.742-2.582l5.589-3.563a4.072 4.072 0 0 1 1.135-.499a4.44 4.44 0 0 1 4.765 1.767a4.109 4.109 0 0 1 .703 3.107a3.943 3.943 0 0 1-.134.522l-.105.321l-.286-.21a7.204 7.204 0 0 0-2.187-1.093l-.208-.063l.02-.207a1.255 1.255 0 0 0-.226-.831a1.337 1.337 0 0 0-1.435-.532a1.231 1.231 0 0 0-.343.15L8.62 9.368a1.162 1.162 0 0 0-.524.778a1.24 1.24 0 0 0 .211.937a1.338 1.338 0 0 0 1.435.533a1.235 1.235 0 0 0 .344-.151l2.132-1.36a4.067 4.067 0 0 1 1.135-.498a4.44 4.44 0 0 1 4.765 1.766a4.108 4.108 0 0 1 .702 3.108a3.857 3.857 0 0 1-1.742 2.583l-5.589 3.562a4.072 4.072 0 0 1-1.135.499m10.358-17.95C18.484-.015 14.082-.96 10.9 1.068L5.31 4.63a6.412 6.412 0 0 0-2.896 4.295a6.753 6.753 0 0 0 .666 4.336a6.43 6.43 0 0 0-.96 2.396a6.833 6.833 0 0 0 1.168 5.167c2.229 3.19 6.63 4.135 9.812 2.108l5.59-3.562a6.41 6.41 0 0 0 2.896-4.295a6.756 6.756 0 0 0-.665-4.336a6.429 6.429 0 0 0 .958-2.396a6.831 6.831 0 0 0-1.167-5.168Z`,
+    },
+};

package/dist/index.d.ts

@@ -1,7 +1,14 @@
 export { default as CircleSpinner } from './CircleSpinner.svelte';
 export { default as CmdPalette } from './CmdPalette.svelte';
-export { default as MultiSelect, default } from './MultiSelect.svelte';
-export { default as Wiggle } from './Wiggle.svelte';
-export * from './props';
+export { default as CodeExample } from './CodeExample.svelte';
+export { default as CopyButton } from './CopyButton.svelte';
+export { default as FileDetails } from './FileDetails.svelte';
+export { default as GitHubCorner } from './GitHubCorner.svelte';
+export { default as Icon } from './Icon.svelte';
+export { default, default as MultiSelect } from './MultiSelect.svelte';
+export { default as PrevNext } from './PrevNext.svelte';
+export { default as RadioButtons } from './RadioButtons.svelte';
+export { default as Toggle } from './Toggle.svelte';
 export * from './types';
+export { default as Wiggle } from './Wiggle.svelte';
 export declare function scroll_into_view_if_needed_polyfill(element: Element, centerIfNeeded?: boolean): IntersectionObserver;

package/dist/index.js

@@ -1,9 +1,16 @@
 export { default as CircleSpinner } from './CircleSpinner.svelte';
 export { default as CmdPalette } from './CmdPalette.svelte';
-export { default as MultiSelect, default } from './MultiSelect.svelte';
-export { default as Wiggle } from './Wiggle.svelte';
-export * from './props';
+export { default as CodeExample } from './CodeExample.svelte';
+export { default as CopyButton } from './CopyButton.svelte';
+export { default as FileDetails } from './FileDetails.svelte';
+export { default as GitHubCorner } from './GitHubCorner.svelte';
+export { default as Icon } from './Icon.svelte';
+export { default, default as MultiSelect } from './MultiSelect.svelte';
+export { default as PrevNext } from './PrevNext.svelte';
+export { default as RadioButtons } from './RadioButtons.svelte';
+export { default as Toggle } from './Toggle.svelte';
 export * from './types';
+export { default as Wiggle } from './Wiggle.svelte';
 // Firefox lacks support for scrollIntoViewIfNeeded (https://caniuse.com/scrollintoviewifneeded).
 // See https://github.com/janosh/svelte-multiselect/issues/87
 // Polyfill copied from

package/dist/types.d.ts

@@ -1,3 +1,5 @@
+import type { Snippet } from 'svelte';
+import type { FocusEventHandler, HTMLInputAttributes, KeyboardEventHandler, MouseEventHandler, TouchEventHandler } from 'svelte/elements';
 export type Option = string | number | ObjectOption;
 export type OptionStyle = string | {
     option: string;
@@ -14,3 +16,142 @@ export type ObjectOption = {
     style?: OptionStyle;
     [key: string]: unknown;
 };
+export interface MultiSelectNativeEvents {
+    onblur?: FocusEventHandler<HTMLInputElement>;
+    onclick?: MouseEventHandler<HTMLInputElement>;
+    onfocus?: FocusEventHandler<HTMLInputElement>;
+    onkeydown?: KeyboardEventHandler<HTMLInputElement>;
+    onkeyup?: KeyboardEventHandler<HTMLInputElement>;
+    onmousedown?: MouseEventHandler<HTMLInputElement>;
+    onmouseenter?: MouseEventHandler<HTMLInputElement>;
+    onmouseleave?: MouseEventHandler<HTMLInputElement>;
+    ontouchcancel?: TouchEventHandler<HTMLInputElement>;
+    ontouchend?: TouchEventHandler<HTMLInputElement>;
+    ontouchmove?: TouchEventHandler<HTMLInputElement>;
+    ontouchstart?: TouchEventHandler<HTMLInputElement>;
+}
+export interface MultiSelectEvents<T extends Option = Option> {
+    onadd?: (data: {
+        option: T;
+    }) => unknown;
+    oncreate?: (data: {
+        option: T;
+    }) => unknown;
+    onremove?: (data: {
+        option: T;
+    }) => unknown;
+    onremoveAll?: (data: {
+        options: T[];
+    }) => unknown;
+    onchange?: (data: {
+        option?: T;
+        options?: T[];
+        type: `add` | `remove` | `removeAll`;
+    }) => unknown;
+    onopen?: (data: {
+        event: Event;
+    }) => unknown;
+    onclose?: (data: {
+        event: Event;
+    }) => unknown;
+}
+type AfterInputProps = Pick<MultiSelectParameters, `selected` | `disabled` | `invalid` | `id` | `placeholder` | `open` | `required`>;
+type UserMsgProps = {
+    searchText: string;
+    msgType: false | `dupe` | `create` | `no-match`;
+    msg: null | string;
+};
+export interface MultiSelectSnippets<T extends Option = Option> {
+    expandIcon?: Snippet<[{
+        open: boolean;
+    }]>;
+    selectedItem?: Snippet<[{
+        option: T;
+        idx: number;
+    }]>;
+    children?: Snippet<[{
+        option: T;
+        idx: number;
+    }]>;
+    removeIcon?: Snippet;
+    afterInput?: Snippet<[AfterInputProps]>;
+    spinner?: Snippet;
+    disabledIcon?: Snippet;
+    option?: Snippet<[{
+        option: T;
+        idx: number;
+    }]>;
+    userMsg?: Snippet<[UserMsgProps]>;
+}
+export interface PortalParams {
+    target_node?: HTMLElement | null;
+    active?: boolean;
+}
+export interface MultiSelectParameters<T extends Option = Option> {
+    activeIndex?: number | null;
+    activeOption?: T | null;
+    createOptionMsg?: string | null;
+    allowUserOptions?: boolean | `append`;
+    allowEmpty?: boolean;
+    autocomplete?: HTMLInputAttributes[`autocomplete`];
+    autoScroll?: boolean;
+    breakpoint?: number;
+    defaultDisabledTitle?: string;
+    disabled?: boolean;
+    disabledInputTitle?: string;
+    duplicateOptionMsg?: string;
+    duplicates?: boolean;
+    key?: (opt: T) => unknown;
+    filterFunc?: (opt: T, searchText: string) => boolean;
+    closeDropdownOnSelect?: boolean | `if-mobile` | `retain-focus`;
+    form_input?: HTMLInputElement | null;
+    highlightMatches?: boolean;
+    id?: string | null;
+    input?: HTMLInputElement | null;
+    inputClass?: string;
+    inputStyle?: string | null;
+    inputmode?: HTMLInputAttributes[`inputmode`] | null;
+    invalid?: boolean;
+    liActiveOptionClass?: string;
+    liActiveUserMsgClass?: string;
+    liOptionClass?: string;
+    liOptionStyle?: string | null;
+    liSelectedClass?: string;
+    liSelectedStyle?: string | null;
+    liUserMsgClass?: string;
+    loading?: boolean;
+    matchingOptions?: T[];
+    maxOptions?: number | undefined;
+    maxSelect?: number | null;
+    maxSelectMsg?: ((current: number, max: number) => string) | null;
+    maxSelectMsgClass?: string;
+    name?: string | null;
+    noMatchingOptionsMsg?: string;
+    open?: boolean;
+    options: T[];
+    outerDiv?: HTMLDivElement | null;
+    outerDivClass?: string;
+    parseLabelsAsHtml?: boolean;
+    pattern?: string | null;
+    placeholder?: string | null;
+    removeAllTitle?: string;
+    removeBtnTitle?: string;
+    minSelect?: number | null;
+    required?: boolean | number;
+    resetFilterOnAdd?: boolean;
+    searchText?: string;
+    selected?: T[];
+    sortSelected?: boolean | ((op1: T, op2: T) => number);
+    selectedOptionsDraggable?: boolean;
+    style?: string | null;
+    ulOptionsClass?: string;
+    ulSelectedClass?: string;
+    ulSelectedStyle?: string | null;
+    ulOptionsStyle?: string | null;
+    value?: T | T[] | null;
+    portal?: PortalParams;
+    [key: string]: unknown;
+}
+export interface MultiSelectProps<T extends Option = Option> extends MultiSelectNativeEvents, MultiSelectEvents<T>, MultiSelectSnippets<T>, MultiSelectParameters<T> {
+}
+export {};

package/dist/utils.d.ts

@@ -1,25 +1,9 @@
-import type { Option, OptionStyle } from '../types';
-/**
- * Get the label key from an option object or the option itself if it's a string or number
- * @param opt Option
- * @returns Label
- */
-export declare const get_label: (opt: Option) => any;
-/**
- * This function is used extract CSS strings from a {selected, option} style object to be used in the style attribute of the option.
- * If the style is a string, it will be returned as is
- * @param option Option
- * @param key
- * @returns CSS string
- */
+import type { Option, OptionStyle } from './types';
+export declare const get_label: (opt: Option) => string | number;
 export declare function get_style(option: {
     style?: OptionStyle;
     [key: string]: unknown;
-} | string | number, key?: `selected` | `option` | null): any;
-/**
- * Highlights text nodes that matching the string query
- * @param element Parent element
- * @param query Search query
- * @param noMatchingOptionsMsg Text for empty node
- */
-export declare function highlight_matching_nodes(element: HTMLElement, query?: string, noMatchingOptionsMsg?: string): void;
+} | string | number, key?: `selected` | `option` | null): string;
+export declare function highlight_matching_nodes(element: HTMLElement, // parent element
+query?: string, // search query
+noMatchingOptionsMsg?: string): void;

package/dist/utils.js

@@ -1,34 +1,28 @@
-/**
- * Get the label key from an option object or the option itself if it's a string or number
- * @param opt Option
- * @returns Label
- */
+// Get the label key from an option object or the option itself
+// if it's a string or number
 export const get_label = (opt) => {
     if (opt instanceof Object) {
         if (opt.label === undefined) {
-            console.error(`MultiSelect option ${JSON.stringify(opt)} is an object but has no label key`);
+            const opt_str = JSON.stringify(opt);
+            console.error(`MultiSelect option ${opt_str} is an object but has no label key`);
         }
         return opt.label;
     }
     return `${opt}`;
 };
-/**
- * This function is used extract CSS strings from a {selected, option} style object to be used in the style attribute of the option.
- * If the style is a string, it will be returned as is
- * @param option Option
- * @param key
- * @returns CSS string
- */
+// This function is used extract CSS strings from a {selected, option} style
+// object to be used in the style attribute of the option.
+// If the style is a string, it will be returned as is
 export function get_style(option, key = null) {
     let css_str = ``;
     if (![`selected`, `option`, null].includes(key)) {
         console.error(`MultiSelect: Invalid key=${key} for get_style`);
     }
-    if (typeof option == `object` && option.style) {
-        if (typeof option.style == `string`) {
+    if (typeof option === `object` && option.style) {
+        if (typeof option.style === `string`) {
             css_str = option.style;
         }
-        if (typeof option.style == `object`) {
+        if (typeof option.style === `object`) {
             if (key && key in option.style)
                 return option.style[key] ?? ``;
             else {
@@ -41,22 +35,20 @@ export function get_style(option, key = null) {
         css_str += `;`;
     return css_str;
 }
-/**
- * Highlights text nodes that matching the string query
- * @param element Parent element
- * @param query Search query
- * @param noMatchingOptionsMsg Text for empty node
- */
-export function highlight_matching_nodes(element, query, noMatchingOptionsMsg) {
-    if (typeof CSS == `undefined` || !CSS.highlights || !query)
+// Highlights text nodes that matching the string query
+export function highlight_matching_nodes(element, // parent element
+query, // search query
+noMatchingOptionsMsg) {
+    if (typeof CSS === `undefined` || !CSS.highlights || !query)
         return; // abort if CSS highlight API not supported
     // clear previous ranges from HighlightRegistry
     CSS.highlights.clear();
     const tree_walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT, {
         acceptNode: (node) => {
             // don't highlight text in the "no matching options" message
-            if (node?.textContent === noMatchingOptionsMsg)
+            if (node?.textContent === noMatchingOptionsMsg) {
                 return NodeFilter.FILTER_REJECT;
+            }
             return NodeFilter.FILTER_ACCEPT;
         },
     });

package/package.json

@@ -5,58 +5,39 @@
   "homepage": "https://janosh.github.io/svelte-multiselect",
   "repository": "https://github.com/janosh/svelte-multiselect",
   "license": "MIT",
-  "version": "11.1.1",
+  "version": "11.2.1",
   "type": "module",
   "svelte": "./dist/index.js",
   "bugs": "https://github.com/janosh/svelte-multiselect/issues",
-  "scripts": {
-    "dev": "vite dev",
-    "build": "vite build",
-    "preview": "vite preview",
-    "package": "svelte-package",
-    "serve": "vite build && vite preview",
-    "check": "svelte-check src",
-    "test": "vitest run && playwright test",
-    "test:unit": "vitest tests/unit/*.ts",
-    "test:e2e": "playwright test tests/*.test.ts",
-    "changelog": "npx auto-changelog --package --output changelog.md --hide-empty-releases --hide-credit --commit-limit false",
-    "update-coverage": "vitest tests/unit --run --coverage && npx istanbul-badges-readme"
-  },
   "peerDependencies": {
-    "svelte": "^5.8.0"
+    "svelte": "^5.35.6"
   },
   "devDependencies": {
-    "@iconify/svelte": "^5.0.0",
-    "@playwright/test": "^1.52.0",
-    "@stylistic/eslint-plugin": "^4.2.0",
+    "@playwright/test": "^1.54.0",
+    "@stylistic/eslint-plugin": "^5.1.0",
     "@sveltejs/adapter-static": "^3.0.8",
-    "@sveltejs/kit": "^2.21.1",
-    "@sveltejs/package": "2.3.11",
-    "@sveltejs/vite-plugin-svelte": "^5.0.3",
-    "@types/node": "^22.15.20",
-    "@vitest/coverage-v8": "^3.1.4",
-    "eslint": "^9.27.0",
-    "eslint-plugin-svelte": "^3.8.2",
-    "globals": "^16.1.0",
+    "@sveltejs/kit": "^2.22.5",
+    "@sveltejs/package": "2.3.12",
+    "@sveltejs/vite-plugin-svelte": "^6.0.0",
+    "@types/node": "^24.0.13",
+    "@vitest/coverage-v8": "^3.2.4",
+    "eslint": "^9.30.1",
+    "eslint-plugin-svelte": "^3.10.1",
     "hastscript": "^9.0.1",
-    "highlight.js": "^11.11.1",
     "jsdom": "^26.1.0",
     "mdsvex": "^0.12.6",
     "mdsvexamples": "^0.5.0",
-    "prettier": "^3.5.3",
-    "prettier-plugin-svelte": "^3.4.0",
     "rehype-autolink-headings": "^7.1.0",
     "rehype-slug": "^6.0.0",
-    "svelte": "^5.32.1",
-    "svelte-check": "^4.2.1",
+    "svelte": "^5.35.6",
+    "svelte-check": "^4.2.2",
     "svelte-preprocess": "^6.0.3",
     "svelte-toc": "^0.6.1",
-    "svelte-zoo": "^0.4.18",
-    "svelte2tsx": "^0.7.39",
+    "svelte2tsx": "^0.7.40",
     "typescript": "5.8.3",
-    "typescript-eslint": "^8.32.1",
-    "vite": "^6.3.5",
-    "vitest": "^3.1.4"
+    "typescript-eslint": "^8.36.0",
+    "vite": "^7.0.4",
+    "vitest": "^3.2.4"
   },
   "keywords": [
     "svelte",