svelte-multiselect 11.4.0 → 11.5.1

package/dist/MultiSelect.svelte.d.ts

@@ -2,7 +2,7 @@ import type { MultiSelectProps } from './types';
 declare function $$render<Option extends import('./types').Option>(): {
     props: MultiSelectProps<Option>;
     exports: {};
-    bindings: "input" | "invalid" | "value" | "selected" | "open" | "activeIndex" | "activeOption" | "form_input" | "matchingOptions" | "maxSelect" | "options" | "outerDiv" | "searchText";
+    bindings: "input" | "invalid" | "value" | "selected" | "open" | "activeIndex" | "activeOption" | "form_input" | "matchingOptions" | "maxSelect" | "options" | "outerDiv" | "searchText" | "collapsedGroups" | "collapseAllGroups" | "expandAllGroups";
     slots: {};
     events: {};
 };
@@ -10,7 +10,7 @@ declare class __sveltets_Render<Option extends import('./types').Option> {
     props(): ReturnType<typeof $$render<Option>>['props'];
     events(): ReturnType<typeof $$render<Option>>['events'];
     slots(): ReturnType<typeof $$render<Option>>['slots'];
-    bindings(): "input" | "invalid" | "value" | "selected" | "open" | "activeIndex" | "activeOption" | "form_input" | "matchingOptions" | "maxSelect" | "options" | "outerDiv" | "searchText";
+    bindings(): "input" | "invalid" | "value" | "selected" | "open" | "activeIndex" | "activeOption" | "form_input" | "matchingOptions" | "maxSelect" | "options" | "outerDiv" | "searchText" | "collapsedGroups" | "collapseAllGroups" | "expandAllGroups";
     exports(): {};
 }
 interface $$IsomorphicComponent {

package/dist/Nav.svelte

@@ -240,7 +240,7 @@ function parse_route(route) {
     position: relative;
     margin: -0.75em auto 1.25em;
     --nav-border-radius: 6pt;
-    --nav-surface-bg: light-dark(#fff, #1a1a1a);
+    --nav-surface-bg: light-dark(#fafafa, #1a1a1a);
     --nav-surface-border: light-dark(rgba(128, 128, 128, 0.25), rgba(200, 200, 200, 0.2));
     --nav-surface-shadow: light-dark(
       0 2px 8px rgba(0, 0, 0, 0.15),
@@ -399,7 +399,7 @@ function parse_route(route) {
       z-index: var(--nav-mobile-z-index, 2);
       flex-direction: column;
       align-items: stretch;
-      justify-content: flex-start;
+      justify-content: start;
       gap: 0.2em;
       max-width: 90vw;
       border-radius: 6px;

package/dist/PrevNext.svelte

@@ -56,7 +56,9 @@ export {};
       {:else}
         <div>
           {#if titles.prev}<span>{@html titles.prev}</span>{/if}
-          <a {...link_props} href={prev[0]}>{prev[0]}</a>
+          <a data-sveltekit-preload-data="hover" {...link_props} href={prev[0]}>{
+            prev[0]
+          }</a>
         </div>
       {/if}
     {/if}
@@ -69,7 +71,9 @@ export {};
       {:else}
         <div>
           {#if titles.next}<span>{@html titles.next}</span>{/if}
-          <a {...link_props} href={next[0]}>{next[0]}</a>
+          <a data-sveltekit-preload-data="hover" {...link_props} href={next[0]}>{
+            next[0]
+          }</a>
         </div>
       {/if}
     {/if}

package/dist/Toggle.svelte

@@ -34,12 +34,12 @@ export {};
     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: var(--toggle-knob-border, 1px solid light-dark(lightgray, #555));
     border-radius: var(--toggle-knob-border-radius, 0.75em);
     transition: var(--toggle-knob-transition, 0.3s);
   }
   input:checked + span {
-    background: var(--toggle-background, black);
+    background: var(--toggle-background, light-dark(#222, #555));
   }
   input {
     position: absolute;
@@ -52,11 +52,11 @@ export {};
     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);
+    background: var(--toggle-knob-after-background, light-dark(gray, #888));
     transition: var(--toggle-knob-after-transition, 0.3s);
   }
   input:checked + span::after {
-    background: var(--toggle-knob-after-background, green);
+    background: var(--toggle-knob-after-background, light-dark(green, #4ade80));
     transform: var(
       --toggle-knob-after-transform,
       translate(
@@ -69,6 +69,9 @@ export {};
     );
   }
   input:focus + span {
-    border: var(--toggle-knob-focus-border, 1px solid cornflowerblue);
+    border: var(
+      --toggle-knob-focus-border,
+      1px solid light-dark(cornflowerblue, #6495ed)
+    );
   }
 </style>

package/dist/attachments.d.ts

@@ -16,7 +16,25 @@ export interface DraggableOptions {
     on_drag?: (event: MouseEvent) => void;
     on_drag_end?: (event: MouseEvent) => void;
 }
+export type Dimensions = {
+    width: number;
+    height: number;
+};
+export type ResizeCallback = (event: MouseEvent, dimensions: Dimensions) => void;
+export interface ResizableOptions {
+    edges?: (`top` | `right` | `bottom` | `left`)[];
+    min_width?: number;
+    min_height?: number;
+    max_width?: number;
+    max_height?: number;
+    handle_size?: number;
+    disabled?: boolean;
+    on_resize_start?: ResizeCallback;
+    on_resize?: ResizeCallback;
+    on_resize_end?: ResizeCallback;
+}
 export declare const draggable: (options?: DraggableOptions) => Attachment;
+export declare const resizable: (options?: ResizableOptions) => Attachment;
 export declare function get_html_sort_value(element: HTMLElement): string;
 export interface SortableOptions {
     header_selector?: string;
@@ -34,13 +52,6 @@ export type HighlightOptions = {
     css_class?: string;
 };
 export declare const highlight_matches: (ops: HighlightOptions) => (node: HTMLElement) => (() => boolean) | undefined;
-/**
- * Options for the tooltip attachment.
- *
- * @security Tooltip content is rendered as HTML. If you allow user-provided content
- * to be set via `title`, `aria-label`, or `data-title` attributes, you MUST sanitize
- * it first to prevent XSS attacks. This attachment does not perform any sanitization.
- */
 export interface TooltipOptions {
     content?: string;
     placement?: `top` | `bottom` | `left` | `right`;

package/dist/attachments.js

@@ -83,6 +83,104 @@ export const draggable = (options = {}) => (element) => {
         }
     };
 };
+// Automatically sets `position: relative` on elements with `position: static`
+// to enable proper positioning during resize. This may affect existing layouts.
+export const resizable = (options = {}) => (element) => {
+    if (options.disabled)
+        return;
+    const node = element;
+    const { edges = [`right`, `bottom`], min_width = 50, min_height = 50, max_width = Infinity, max_height = Infinity, handle_size = 8, on_resize_start, on_resize, on_resize_end, } = options;
+    if (min_width > max_width || min_height > max_height) {
+        console.warn(`resizable: min dimensions exceed max dimensions (min_width=${min_width}, max_width=${max_width}, min_height=${min_height}, max_height=${max_height})`);
+        return; // Invalid config would cause clamp() to produce inconsistent results
+    }
+    let active_edge = null;
+    let start = { x: 0, y: 0 };
+    let initial = { width: 0, height: 0, left: 0, top: 0 };
+    const clamp = (val, min, max) => Math.max(min, Math.min(max, val));
+    if (getComputedStyle(node).position === `static`)
+        node.style.position = `relative`;
+    const get_edge = ({ clientX: cx, clientY: cy }) => {
+        const { left, right, top, bottom } = node.getBoundingClientRect();
+        if (edges.includes(`right`) && cx >= right - handle_size && cx <= right) {
+            return `right`;
+        }
+        if (edges.includes(`bottom`) && cy >= bottom - handle_size && cy <= bottom) {
+            return `bottom`;
+        }
+        if (edges.includes(`left`) && cx >= left && cx <= left + handle_size)
+            return `left`;
+        if (edges.includes(`top`) && cy >= top && cy <= top + handle_size)
+            return `top`;
+        return null;
+    };
+    function on_mousedown(event) {
+        active_edge = get_edge(event);
+        if (!active_edge)
+            return;
+        start = { x: event.clientX, y: event.clientY };
+        initial = {
+            width: node.offsetWidth,
+            height: node.offsetHeight,
+            left: node.offsetLeft,
+            top: node.offsetTop,
+        };
+        document.body.style.userSelect = `none`;
+        on_resize_start?.(event, { width: initial.width, height: initial.height });
+        globalThis.addEventListener(`mousemove`, on_mousemove);
+        globalThis.addEventListener(`mouseup`, on_mouseup);
+    }
+    function on_mousemove(event) {
+        if (!active_edge)
+            return;
+        const dx = event.clientX - start.x, dy = event.clientY - start.y;
+        let { width, height } = initial;
+        if (active_edge === `right`)
+            width = clamp(initial.width + dx, min_width, max_width);
+        else if (active_edge === `left`) {
+            const clamped = clamp(initial.width - dx, min_width, max_width);
+            node.style.left = `${initial.left - (clamped - initial.width)}px`;
+            width = clamped;
+        }
+        if (active_edge === `bottom`) {
+            height = clamp(initial.height + dy, min_height, max_height);
+        }
+        else if (active_edge === `top`) {
+            const clamped = clamp(initial.height - dy, min_height, max_height);
+            node.style.top = `${initial.top - (clamped - initial.height)}px`;
+            height = clamped;
+        }
+        node.style.width = `${width}px`;
+        node.style.height = `${height}px`;
+        on_resize?.(event, { width, height });
+    }
+    function on_mouseup(event) {
+        if (!active_edge)
+            return;
+        document.body.style.userSelect = ``;
+        on_resize_end?.(event, { width: node.offsetWidth, height: node.offsetHeight });
+        globalThis.removeEventListener(`mousemove`, on_mousemove);
+        globalThis.removeEventListener(`mouseup`, on_mouseup);
+        active_edge = null;
+    }
+    function on_hover(event) {
+        const edge = get_edge(event);
+        node.style.cursor = edge === `right` || edge === `left`
+            ? `ew-resize`
+            : edge === `top` || edge === `bottom`
+                ? `ns-resize`
+                : ``;
+    }
+    node.addEventListener(`mousedown`, on_mousedown);
+    node.addEventListener(`mousemove`, on_hover);
+    return () => {
+        node.removeEventListener(`mousedown`, on_mousedown);
+        node.removeEventListener(`mousemove`, on_hover);
+        globalThis.removeEventListener(`mousemove`, on_mousemove);
+        globalThis.removeEventListener(`mouseup`, on_mouseup);
+        node.style.cursor = ``;
+    };
+};
 export function get_html_sort_value(element) {
     if (element.dataset.sortValue !== undefined) {
         return element.dataset.sortValue;

package/dist/icons.d.ts

@@ -11,6 +11,14 @@ export declare const icon_data: {
         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 ChevronRight: {
+        readonly viewBox: "0 0 16 16";
+        readonly path: "M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8L4.646 2.354a.5.5 0 0 1 0-.708z";
+    };
+    readonly ChevronDown: {
+        readonly viewBox: "0 0 16 16";
+        readonly path: "M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 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";

package/dist/icons.js

@@ -11,6 +11,14 @@ export const icon_data = {
         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`,
     },
+    ChevronRight: {
+        viewBox: `0 0 16 16`,
+        path: `M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8L4.646 2.354a.5.5 0 0 1 0-.708z`,
+    },
+    ChevronDown: {
+        viewBox: `0 0 16 16`,
+        path: `M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 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`,

package/dist/types.d.ts

@@ -1,5 +1,5 @@
-import type { FlipParams } from 'svelte/animate';
 import type { Snippet } from 'svelte';
+import type { FlipParams } from 'svelte/animate';
 import type { HTMLAttributes, HTMLInputAttributes } from 'svelte/elements';
 export type Option = string | number | ObjectOption;
 export type OptionStyle = string | {
@@ -15,6 +15,7 @@ export type ObjectOption = {
     disabledTitle?: string;
     selectedTitle?: string;
     style?: OptionStyle;
+    group?: string;
     [key: string]: unknown;
 };
 export type PlaceholderConfig = {
@@ -37,10 +38,13 @@ export interface MultiSelectEvents<T extends Option = Option> {
     onselectAll?: (data: {
         options: T[];
     }) => unknown;
+    onreorder?: (data: {
+        options: T[];
+    }) => unknown;
     onchange?: (data: {
         option?: T;
         options?: T[];
-        type: `add` | `remove` | `removeAll` | `selectAll`;
+        type: `add` | `remove` | `removeAll` | `selectAll` | `reorder`;
     }) => unknown;
     onopen?: (data: {
         event: Event;
@@ -48,6 +52,16 @@ export interface MultiSelectEvents<T extends Option = Option> {
     onclose?: (data: {
         event: Event;
     }) => unknown;
+    ongroupToggle?: (data: {
+        group: string;
+        collapsed: boolean;
+    }) => unknown;
+    oncollapseAll?: (data: {
+        groups: string[];
+    }) => unknown;
+    onexpandAll?: (data: {
+        groups: string[];
+    }) => unknown;
 }
 export interface LoadOptionsParams {
     search: string;
@@ -72,6 +86,16 @@ type UserMsgProps = {
     msgType: false | `dupe` | `create` | `no-match`;
     msg: null | string;
 };
+export type GroupHeaderProps<T extends Option = Option> = {
+    group: string;
+    options: T[];
+    collapsed: boolean;
+};
+export type GroupedOptions<T extends Option = Option> = {
+    group: string | null;
+    options: T[];
+    collapsed: boolean;
+};
 export interface MultiSelectSnippets<T extends Option = Option> {
     expandIcon?: Snippet<[{
         open: boolean;
@@ -93,6 +117,7 @@ export interface MultiSelectSnippets<T extends Option = Option> {
         idx: number;
     }]>;
     userMsg?: Snippet<[UserMsgProps]>;
+    groupHeader?: Snippet<[GroupHeaderProps<T>]>;
 }
 export interface PortalParams {
     target_node?: HTMLElement | null;
@@ -167,5 +192,25 @@ export interface MultiSelectProps<T extends Option = Option> extends MultiSelect
     liSelectAllClass?: string;
     loadOptions?: LoadOptions<T>;
     selectedFlipParams?: FlipParams;
+    collapsibleGroups?: boolean;
+    collapsedGroups?: Set<string>;
+    groupSelectAll?: boolean;
+    ungroupedPosition?: `first` | `last`;
+    groupSortOrder?: `none` | `asc` | `desc` | ((a: string, b: string) => number);
+    searchExpandsCollapsedGroups?: boolean;
+    searchMatchesGroups?: boolean;
+    keyboardExpandsCollapsedGroups?: boolean;
+    stickyGroupHeaders?: boolean;
+    liGroupHeaderClass?: string;
+    liGroupHeaderStyle?: string | null;
+    collapseAllGroups?: () => void;
+    expandAllGroups?: () => void;
+    shortcuts?: Partial<KeyboardShortcuts>;
+}
+export interface KeyboardShortcuts {
+    select_all?: string | null;
+    clear_all?: string | null;
+    open?: string | null;
+    close?: string | null;
 }
 export {};

package/dist/utils.d.ts

@@ -1,5 +1,8 @@
 import type { Option } from './types';
 export declare const is_object: (val: unknown) => val is Record<string, unknown>;
+export declare const has_group: <T extends Option>(opt: T) => opt is T & {
+    group: string;
+};
 export declare const get_label: (opt: Option) => string | number;
 export declare function get_style(option: Option, key?: `selected` | `option` | null | undefined): string;
 export declare function fuzzy_match(search_text: string, target_text: string): boolean;

package/dist/utils.js

@@ -1,5 +1,7 @@
 // Type guard for checking if a value is a non-null object
 export const is_object = (val) => typeof val === `object` && val !== null;
+// Type guard for checking if an option has a group key
+export const has_group = (opt) => is_object(opt) && typeof opt.group === `string`;
 // Get the label key from an option object or the option itself
 // if it's a string or number
 export const get_label = (opt) => {

package/package.json

@@ -5,14 +5,16 @@
   "homepage": "https://janosh.github.io/svelte-multiselect",
   "repository": "https://github.com/janosh/svelte-multiselect",
   "license": "MIT",
-  "version": "11.4.0",
+  "version": "11.5.1",
   "type": "module",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build",
     "preview": "vite preview",
     "test": "vitest --run && playwright test",
-    "check": "svelte-check"
+    "check": "svelte-check",
+    "package": "svelte-package",
+    "prepublishOnly": "svelte-package && test -d dist"
   },
   "svelte": "./dist/index.js",
   "bugs": "https://github.com/janosh/svelte-multiselect/issues",
@@ -23,12 +25,12 @@
     "@playwright/test": "^1.57.0",
     "@stylistic/eslint-plugin": "^5.6.1",
     "@sveltejs/adapter-static": "^3.0.10",
-    "@sveltejs/kit": "^2.49.1",
+    "@sveltejs/kit": "^2.49.2",
     "@sveltejs/package": "2.5.7",
     "@sveltejs/vite-plugin-svelte": "^6.2.1",
-    "@types/node": "^24.10.1",
-    "@vitest/coverage-v8": "^4.0.15",
-    "eslint": "^9.39.1",
+    "@types/node": "^25.0.3",
+    "@vitest/coverage-v8": "^4.0.16",
+    "eslint": "^9.39.2",
     "eslint-plugin-svelte": "^3.13.1",
     "happy-dom": "^20.0.11",
     "hastscript": "^9.0.1",
@@ -36,15 +38,15 @@
     "mdsvexamples": "^0.5.0",
     "rehype-autolink-headings": "^7.1.0",
     "rehype-slug": "^6.0.0",
-    "svelte": "^5.45.6",
-    "svelte-check": "^4.3.4",
+    "svelte": "^5.46.1",
+    "svelte-check": "^4.3.5",
     "svelte-preprocess": "^6.0.3",
     "svelte-toc": "^0.6.2",
-    "svelte2tsx": "^0.7.45",
+    "svelte2tsx": "^0.7.46",
     "typescript": "5.9.3",
-    "typescript-eslint": "^8.48.1",
-    "vite": "^7.2.7",
-    "vitest": "^4.0.15"
+    "typescript-eslint": "^8.51.0",
+    "vite": "^7.3.0",
+    "vitest": "^4.0.16"
   },
   "keywords": [
     "svelte",