svelte-multiselect 11.2.4 → 11.3.0

package/dist/CircleSpinner.svelte.d.ts

@@ -1,8 +1,8 @@
-interface Props {
+type $$ComponentProps = {
     color?: string;
     duration?: string;
     size?: string;
-}
-declare const CircleSpinner: import("svelte").Component<Props, {}, "">;
+};
+declare const CircleSpinner: import("svelte").Component<$$ComponentProps, {}, "">;
 type CircleSpinner = ReturnType<typeof CircleSpinner>;
 export default CircleSpinner;

package/dist/CmdPalette.svelte

@@ -1,6 +1,9 @@
-<script lang="ts">import { fade } from 'svelte/transition';
+<script
+  lang="ts"
+  generics="Action extends { label: string; action: (label: string) => void } & Record<string, unknown> = { label: string; action: (label: string) => void }"
+>import { fade } from 'svelte/transition';
 import MultiSelect from './MultiSelect.svelte';
-let { actions, triggers = [`k`], close_keys = [`Escape`], fade_duration = 200, dialog_style = ``, open = $bindable(false), dialog = $bindable(null), input = $bindable(null), placeholder = `Filter actions...`, ...rest } = $props();
+let { actions, triggers = [`k`], close_keys = [`Escape`], fade_duration = 200, dialog_style = ``, open = $bindable(false), dialog = $bindable(null), input = $bindable(null), placeholder = `Filter actions...`, dialog_props, ...rest } = $props();
 $effect(() => {
     if (open && input && document.activeElement !== input)
         input.focus();
@@ -22,10 +25,9 @@ function close_if_outside(event) {
     }
 }
 function trigger_action_and_close({ option }) {
-    const { action, label } = (option ?? {});
-    if (!action)
+    if (!option?.action)
         return;
-    action(label);
+    option.action(option.label);
     open = false;
 }
 </script>
@@ -38,6 +40,7 @@ function trigger_action_and_close({ option }) {
     bind:this={dialog}
     transition:fade={{ duration: fade_duration }}
     style={dialog_style}
+    {...dialog_props}
   >
     <MultiSelect
       options={actions}

package/dist/CmdPalette.svelte.d.ts

@@ -1,21 +1,66 @@
-import type { ComponentProps } from 'svelte';
-import MultiSelect from './MultiSelect.svelte';
-import type { ObjectOption } from './types';
-interface Action extends ObjectOption {
+import type { HTMLAttributes } from 'svelte/elements';
+declare function $$render<Action extends {
     label: string;
     action: (label: string) => void;
+} & Record<string, unknown> = {
+    label: string;
+    action: (label: string) => void;
+}>(): {
+    props: Omit<import("./types").MultiSelectProps<Action>, "options"> & {
+        actions: Action[];
+        triggers?: string[];
+        close_keys?: string[];
+        fade_duration?: number;
+        dialog_style?: string;
+        open?: boolean;
+        dialog?: HTMLDialogElement | null;
+        input?: HTMLInputElement | null;
+        placeholder?: string;
+        dialog_props?: HTMLAttributes<HTMLDialogElement>;
+    };
+    exports: {};
+    bindings: "dialog" | "input" | "open";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Action extends {
+    label: string;
+    action: (label: string) => void;
+} & Record<string, unknown> = {
+    label: string;
+    action: (label: string) => void;
+}> {
+    props(): ReturnType<typeof $$render<Action>>['props'];
+    events(): ReturnType<typeof $$render<Action>>['events'];
+    slots(): ReturnType<typeof $$render<Action>>['slots'];
+    bindings(): "dialog" | "input" | "open";
+    exports(): {};
 }
-interface Props extends Omit<ComponentProps<typeof MultiSelect<Action>>, `options`> {
-    actions: Action[];
-    triggers?: string[];
-    close_keys?: string[];
-    fade_duration?: number;
-    dialog_style?: string;
-    open?: boolean;
-    dialog?: HTMLDialogElement | null;
-    input?: HTMLInputElement | null;
-    placeholder?: string;
+interface $$IsomorphicComponent {
+    new <Action extends {
+        label: string;
+        action: (label: string) => void;
+    } & Record<string, unknown> = {
+        label: string;
+        action: (label: string) => void;
+    }>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Action>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Action>['props']>, ReturnType<__sveltets_Render<Action>['events']>, ReturnType<__sveltets_Render<Action>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Action>['bindings']>;
+    } & ReturnType<__sveltets_Render<Action>['exports']>;
+    <Action extends {
+        label: string;
+        action: (label: string) => void;
+    } & Record<string, unknown> = {
+        label: string;
+        action: (label: string) => void;
+    }>(internal: unknown, props: ReturnType<__sveltets_Render<Action>['props']> & {}): ReturnType<__sveltets_Render<Action>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
-declare const CmdPalette: import("svelte").Component<Props, {}, "dialog" | "input" | "open">;
-type CmdPalette = ReturnType<typeof CmdPalette>;
+declare const CmdPalette: $$IsomorphicComponent;
+type CmdPalette<Action extends {
+    label: string;
+    action: (label: string) => void;
+} & Record<string, unknown> = {
+    label: string;
+    action: (label: string) => void;
+}> = InstanceType<typeof CmdPalette<Action>>;
 export default CmdPalette;

package/dist/CodeExample.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">// see svelte.config.js where this component is passed to mdsvexamples
 import { Icon } from './';
-let { src = ``, meta = {}, open = $bindable(!meta.collapsible), title, example, code, } = $props();
+let { src = ``, meta = {}, open = $bindable(!meta.collapsible), title, example, code, link_props, // Applied after computed attributes (href, title, etc.), allowing override
+button_props, } = $props();
 let { id, collapsible, code_above, repl, github, repo, file } = $derived(meta);
 const links = { target: `_blank`, rel: `noreferrer` };
 </script>
@@ -17,13 +18,19 @@ const links = { target: `_blank`, rel: `noreferrer` };
     { cond, href, icon }
     (icon)
   }
-    <a {href} {...links} title={icon} style:display={cond ? `inline-block` : `none`}>
+    <a
+      {href}
+      {...links}
+      title={icon}
+      style:display={cond ? `inline-block` : `none`}
+      {...link_props}
+    >
       <Icon {icon} />
     </a>
   {/each}
   {#if collapsible}
     {@render title?.()}
-    <button onclick={() => (open = !open)}>
+    <button onclick={() => (open = !open)} {...button_props}>
       <Icon icon={open ? `Collapse` : `Expand`} />
       {open ? `Close` : `View code`}
     </button>

package/dist/CodeExample.svelte.d.ts

@@ -1,5 +1,6 @@
 import type { Snippet } from 'svelte';
-interface Props {
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = {
     src?: string;
     meta?: {
         collapsible?: boolean;
@@ -16,7 +17,9 @@ interface Props {
     title?: Snippet<[]>;
     example?: Snippet<[]>;
     code?: Snippet<[]>;
-}
-declare const CodeExample: import("svelte").Component<Props, {}, "open">;
+    link_props?: HTMLAttributes<HTMLAnchorElement>;
+    button_props?: HTMLAttributes<HTMLButtonElement>;
+};
+declare const CodeExample: import("svelte").Component<$$ComponentProps, {}, "open">;
 type CodeExample = ReturnType<typeof CodeExample>;
 export default CodeExample;

package/dist/CopyButton.svelte

@@ -9,7 +9,7 @@ $effect(() => {
     if (!global && !global_selector)
         return;
     const apply_copy_buttons = () => {
-        const btn_style = `position: absolute; top: 9pt; right: 9pt; ${rest.style ?? ``}`;
+        const btn_style = `position: absolute; top: 6pt; right: 6pt; ${rest.style ?? ``}`;
         const skip_sel = skip_selector ?? as;
         for (const code of document.querySelectorAll(global_selector ?? `pre > code`)) {
             const pre = code.parentElement;

package/dist/CopyButton.svelte.d.ts

@@ -3,7 +3,7 @@ import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 import type { IconName } from './icons';
 type State = `ready` | `success` | `error`;
-interface Props extends Omit<HTMLAttributes<HTMLButtonElement>, `children`> {
+type $$ComponentProps = Omit<HTMLAttributes<HTMLButtonElement>, `children`> & {
     content?: string;
     state?: State;
     global_selector?: string | null;
@@ -19,7 +19,7 @@ interface Props extends Omit<HTMLAttributes<HTMLButtonElement>, `children`> {
         icon: IconName;
         text: string;
     }]>;
-}
-declare const CopyButton: import("svelte").Component<Props, {}, "state">;
+};
+declare const CopyButton: import("svelte").Component<$$ComponentProps, {}, "state">;
 type CopyButton = ReturnType<typeof CopyButton>;
 export default CopyButton;

package/dist/FileDetails.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">let { files = $bindable([]), toggle_all_btn_title = `Toggle all`, default_lang = `typescript`, as = `ol`, style = null, title_snippet, } = $props();
+<script lang="ts">let { files = $bindable([]), toggle_all_btn_title = `Toggle all`, default_lang = `typescript`, as = `ol`, style = null, title_snippet, button_props, details_props, } = $props();
 function toggle_all() {
     const any_open = files.some((file) => file.node?.open);
     for (const file of files) {
@@ -11,7 +11,7 @@ export {};
 </script>
 
 {#if files?.length > 1}
-  <button onclick={toggle_all} title={toggle_all_btn_title}>
+  <button onclick={toggle_all} title={toggle_all_btn_title} {...button_props}>
     {files.some((file) => file.node?.open) ? `Close` : `Open`} all
   </button>
 {/if}
@@ -21,7 +21,7 @@ export {};
     {@const { title, content, language = default_lang } = file ?? {}}
     <li>
       <!-- https://github.com/sveltejs/svelte/issues/12721#issuecomment-2269544690 -->
-      <details bind:this={file.node}>
+      <details bind:this={file.node} {...details_props}>
         {#if title || title_snippet}
           <summary>
             {#if title_snippet}

package/dist/FileDetails.svelte.d.ts

@@ -1,11 +1,12 @@
 import type { Snippet } from 'svelte';
+import type { HTMLAttributes, HTMLDetailsAttributes } from 'svelte/elements';
 type File = {
     title: string;
     content: string;
     language?: string;
     node?: HTMLDetailsElement | null;
 };
-interface Props {
+type $$ComponentProps = {
     files?: File[];
     toggle_all_btn_title?: string;
     default_lang?: string;
@@ -14,7 +15,9 @@ interface Props {
     title_snippet?: Snippet<[{
         idx: number;
     } & File]>;
-}
-declare const FileDetails: import("svelte").Component<Props, {}, "files">;
+    button_props?: HTMLAttributes<HTMLButtonElement>;
+    details_props?: HTMLDetailsAttributes;
+};
+declare const FileDetails: import("svelte").Component<$$ComponentProps, {}, "files">;
 type FileDetails = ReturnType<typeof FileDetails>;
 export default FileDetails;

package/dist/GitHubCorner.svelte.d.ts

@@ -1,4 +1,4 @@
-interface Props {
+type $$ComponentProps = {
     href: string;
     title?: string;
     aria_label?: string;
@@ -7,7 +7,7 @@ interface Props {
     fill?: string | null;
     corner?: `top-left` | `top-right` | `bottom-left` | `bottom-right`;
     style?: string;
-}
-declare const GitHubCorner: import("svelte").Component<Props, {}, "">;
+};
+declare const GitHubCorner: import("svelte").Component<$$ComponentProps, {}, "">;
 type GitHubCorner = ReturnType<typeof GitHubCorner>;
 export default GitHubCorner;

package/dist/Icon.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { HTMLAttributes } from 'svelte/elements';
 import { type IconName } from './icons';
-interface Props extends HTMLAttributes<SVGSVGElement> {
+type $$ComponentProps = HTMLAttributes<SVGSVGElement> & {
     icon: IconName;
-}
-declare const Icon: import("svelte").Component<Props, {}, "">;
+};
+declare const Icon: import("svelte").Component<$$ComponentProps, {}, "">;
 type Icon = ReturnType<typeof Icon>;
 export default Icon;

package/dist/MultiSelect.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">import { tick } from 'svelte';
+<script lang="ts" generics="Option extends import('./types').Option">import { tick } from 'svelte';
 import { flip } from 'svelte/animate';
 import { highlight_matches } from './attachments';
 import CircleSpinner from './CircleSpinner.svelte';
@@ -12,9 +12,11 @@ let { activeIndex = $bindable(null), activeOption = $bindable(null), createOptio
     return fuzzy
         ? fuzzy_match(searchText, label)
         : label.toLowerCase().includes(searchText.toLowerCase());
-}, fuzzy = true, closeDropdownOnSelect = `if-mobile`, form_input = $bindable(null), highlightMatches = true, id = null, input = $bindable(null), inputClass = ``, inputStyle = null, inputmode = null, invalid = $bindable(false), liActiveOptionClass = ``, liActiveUserMsgClass = ``, liOptionClass = ``, liOptionStyle = null, liSelectedClass = ``, liSelectedStyle = null, liUserMsgClass = ``, loading = false, matchingOptions = $bindable([]), maxOptions = undefined, maxSelect = null, maxSelectMsg = (current, max) => (max > 1 ? `${current}/${max}` : ``), maxSelectMsgClass = ``, name = null, noMatchingOptionsMsg = `No matching options`, open = $bindable(false), options = $bindable(), outerDiv = $bindable(null), outerDivClass = ``, parseLabelsAsHtml = false, pattern = null, placeholder = null, removeAllTitle = `Remove all`, removeBtnTitle = `Remove`, minSelect = null, required = false, resetFilterOnAdd = true, searchText = $bindable(``), selected = $bindable(options
-    ?.filter((opt) => opt instanceof Object && opt?.preselected)
-    .slice(0, maxSelect ?? undefined) ?? []), sortSelected = false, selectedOptionsDraggable = !sortSelected, style = null, ulOptionsClass = ``, ulSelectedClass = ``, ulSelectedStyle = null, ulOptionsStyle = null, value = $bindable(null), expandIcon, selectedItem, children, removeIcon, afterInput, spinner, disabledIcon, option, userMsg, onblur, onclick, onfocus, onkeydown, onkeyup, onmousedown, onmouseenter, onmouseleave, ontouchcancel, ontouchend, ontouchmove, ontouchstart, onadd, oncreate, onremove, onremoveAll, onchange, onopen, onclose, portal: portal_params = {}, ...rest } = $props();
+}, fuzzy = true, closeDropdownOnSelect = `if-mobile`, form_input = $bindable(null), highlightMatches = true, id = null, input = $bindable(null), inputClass = ``, inputStyle = null, inputmode = null, invalid = $bindable(false), liActiveOptionClass = ``, liActiveUserMsgClass = ``, liOptionClass = ``, liOptionStyle = null, liSelectedClass = ``, liSelectedStyle = null, liUserMsgClass = ``, loading = false, matchingOptions = $bindable([]), maxOptions = undefined, maxSelect = null, maxSelectMsg = (current, max) => (max > 1 ? `${current}/${max}` : ``), maxSelectMsgClass = ``, name = null, noMatchingOptionsMsg = `No matching options`, open = $bindable(false), options = $bindable(), outerDiv = $bindable(null), outerDivClass = ``, parseLabelsAsHtml = false, pattern = null, placeholder = null, removeAllTitle = `Remove all`, removeBtnTitle = `Remove`, minSelect = null, required = false, resetFilterOnAdd = true, searchText = $bindable(``), value = $bindable(null), selected = $bindable(value !== null && value !== undefined
+    ? (Array.isArray(value) ? value : [value])
+    : (options
+        ?.filter((opt) => opt instanceof Object && opt?.preselected)
+        .slice(0, maxSelect ?? undefined) ?? [])), sortSelected = false, selectedOptionsDraggable = !sortSelected, style = null, ulOptionsClass = ``, ulSelectedClass = ``, ulSelectedStyle = null, ulOptionsStyle = null, expandIcon, selectedItem, children, removeIcon, afterInput, spinner, disabledIcon, option, userMsg, onblur, onclick, onfocus, onkeydown, onkeyup, onmousedown, onmouseenter, onmouseleave, ontouchcancel, ontouchend, ontouchmove, ontouchstart, onadd, oncreate, onremove, onremoveAll, onchange, onopen, onclose, portal: portal_params = {}, ...rest } = $props();
 $effect.pre(() => {
     // if maxSelect=1, value is the single item in selected (or null if selected is empty)
     // this solves both https://github.com/janosh/svelte-multiselect/issues/86 and

package/dist/MultiSelect.svelte.d.ts

@@ -1,12 +1,12 @@
-import type { MultiSelectProps, Option as T } from './types';
-declare function $$render<Option extends T>(): {
-    props: MultiSelectProps;
+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" | "options" | "outerDiv" | "searchText";
     slots: {};
     events: {};
 };
-declare class __sveltets_Render<Option extends T> {
+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'];
@@ -14,12 +14,12 @@ declare class __sveltets_Render<Option extends T> {
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <Option extends T>(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']>> & {
+    new <Option extends import('./types').Option>(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 T>(internal: unknown, props: ReturnType<__sveltets_Render<Option>['props']> & {}): ReturnType<__sveltets_Render<Option>['exports']>;
+    <Option extends import('./types').Option>(internal: unknown, props: ReturnType<__sveltets_Render<Option>['props']> & {}): ReturnType<__sveltets_Render<Option>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
 declare const MultiSelect: $$IsomorphicComponent;
-type MultiSelect<Option extends T> = InstanceType<typeof MultiSelect<Option>>;
+type MultiSelect<Option extends import('./types').Option> = InstanceType<typeof MultiSelect<Option>>;
 export default MultiSelect;

package/dist/Nav.svelte

@@ -0,0 +1,447 @@
+<script
+  lang="ts"
+  generics="Route extends string | [string, string] | [string, string[]] = string | [string, string] | [string, string[]]"
+>import { Icon } from './';
+import { click_outside } from './';
+let { routes = [], children, link, menu_props, link_props, page, labels, ...rest } = $props();
+let is_open = $state(false);
+let hovered_dropdown = $state(null);
+let focused_item_index = $state(-1);
+let is_touch_device = $state(false);
+const panel_id = `nav-menu-${crypto.randomUUID()}`;
+// Detect touch device
+$effect(() => {
+    if (typeof globalThis !== `undefined`) {
+        is_touch_device = `ontouchstart` in globalThis || navigator.maxTouchPoints > 0;
+    }
+});
+function close_menus() {
+    is_open = false;
+    hovered_dropdown = null;
+    focused_item_index = -1;
+}
+function toggle_dropdown(href, focus_first = false) {
+    const is_opening = hovered_dropdown !== href;
+    hovered_dropdown = hovered_dropdown === href ? null : href;
+    focused_item_index = is_opening && focus_first ? 0 : -1;
+    // Focus management for keyboard users
+    if (is_opening && focus_first) {
+        setTimeout(() => {
+            const dropdown = document.querySelector(`.dropdown-wrapper[data-href="${href}"]`);
+            const first_link = dropdown?.querySelector(`.dropdown a`);
+            if (first_link instanceof HTMLElement) {
+                first_link.focus();
+            }
+        }, 0);
+    }
+}
+function onkeydown(event) {
+    if (event.key === `Escape`)
+        close_menus();
+}
+function handle_dropdown_keydown(event, href, sub_routes) {
+    const { key } = event;
+    if (key === `Enter` || key === ` `) {
+        event.preventDefault();
+        toggle_dropdown(href, true);
+        return;
+    }
+    // Arrow key navigation within open dropdown
+    if (hovered_dropdown === href && (key === `ArrowDown` || key === `ArrowUp`)) {
+        event.preventDefault();
+        const direction = key === `ArrowDown` ? 1 : -1;
+        const new_index = Math.max(0, Math.min(sub_routes.length - 1, focused_item_index + direction));
+        focused_item_index = new_index;
+        const dropdown = document.querySelector(`.dropdown-wrapper[data-href="${href}"]`);
+        const links = dropdown?.querySelectorAll(`.dropdown a`);
+        if (links?.[new_index] instanceof HTMLElement) {
+            links[new_index].focus();
+        }
+    }
+    // Open dropdown with ArrowDown when closed
+    if (hovered_dropdown !== href && key === `ArrowDown`) {
+        event.preventDefault();
+        toggle_dropdown(href, true);
+    }
+}
+function handle_dropdown_item_keydown(event, href) {
+    if (event.key === `Escape`) {
+        event.preventDefault();
+        close_menus();
+        // Return focus to dropdown toggle button
+        document
+            .querySelector(`.dropdown-wrapper[data-href="${href}"]`)
+            ?.querySelector(`.dropdown-toggle`)
+            ?.focus();
+    }
+}
+function is_current(path) {
+    if (path === `/`)
+        return page?.url.pathname === `/` ? `page` : undefined;
+    // Match exact path or path followed by / to avoid partial matches
+    // e.g. /tc-periodic-v2 should not match /tc-periodic
+    const pathname = page?.url.pathname;
+    const exact_match = pathname === path;
+    const prefix_match = pathname?.startsWith(path + `/`);
+    return exact_match || prefix_match ? `page` : undefined;
+}
+const is_child_current = (sub_routes) => sub_routes.some((child_path) => is_current(child_path) === `page`);
+function format_label(text, remove_parent = false) {
+    const custom_label = labels?.[text];
+    if (custom_label)
+        return { label: custom_label, style: `` };
+    if (remove_parent)
+        text = text.split(`/`).filter(Boolean).pop() ?? text;
+    const label = text.replace(/^\//, ``).replaceAll(`-`, ` `);
+    return { label, style: `text-transform: capitalize` };
+}
+function parse_route(route) {
+    if (typeof route === `string`)
+        return { href: route, label: route };
+    const [first, second] = route;
+    return Array.isArray(second)
+        ? { href: first, label: first, children: second }
+        : { href: first, label: second };
+}
+</script>
+
+<svelte:window {onkeydown} />
+
+<nav
+  {...rest}
+  {@attach click_outside({ callback: close_menus })}
+  class="bleed-1400 {rest.class ?? ``}"
+>
+  <button
+    class="burger-button"
+    onclick={() => is_open = !is_open}
+    aria-label="Toggle navigation menu"
+    aria-expanded={is_open}
+    aria-controls={panel_id}
+  >
+    <span class="burger-line"></span>
+    <span class="burger-line"></span>
+    <span class="burger-line"></span>
+  </button>
+
+  <div
+    id={panel_id}
+    class="menu"
+    class:open={is_open}
+    tabindex="0"
+    role="menu"
+    {onkeydown}
+    {...menu_props}
+  >
+    {#each routes as route (JSON.stringify(route))}
+      {@const { href, label, children: sub_routes } = parse_route(route)}
+
+      {#if sub_routes}
+        <!-- Dropdown menu item -->
+        {@const parent = format_label(label)}
+        {@const child_is_active = is_child_current(sub_routes)}
+        {@const parent_page_exists = sub_routes.includes(href)}
+        {@const filtered_sub_routes = sub_routes.filter((route) => route !== href)}
+        <div
+          class="dropdown-wrapper"
+          class:active={child_is_active}
+          data-href={href}
+          role="group"
+          aria-current={child_is_active ? `true` : undefined}
+          onmouseenter={() => !is_touch_device && (hovered_dropdown = href)}
+          onmouseleave={() => !is_touch_device && (hovered_dropdown = null)}
+          onfocusin={() => (hovered_dropdown = href)}
+          onfocusout={(event) => {
+            const next = event.relatedTarget as Node | null
+            if (!next || !(event.currentTarget as HTMLElement).contains(next)) {
+              hovered_dropdown = null
+            }
+          }}
+        >
+          <div class="dropdown-trigger-wrapper">
+            <svelte:element
+              this={parent_page_exists ? `a` : `span`}
+              href={parent_page_exists ? href : undefined}
+              class="dropdown-trigger"
+              aria-current={is_current(href)}
+              onclick={close_menus}
+              role={parent_page_exists ? undefined : `button`}
+              style={parent.style}
+            >
+              {@html parent.label}
+            </svelte:element>
+            <button
+              class="dropdown-toggle"
+              aria-label="Toggle {parent.label} submenu"
+              aria-expanded={hovered_dropdown === href}
+              aria-haspopup="true"
+              onclick={() => toggle_dropdown(href, false)}
+              onkeydown={(event) => handle_dropdown_keydown(event, href, filtered_sub_routes)}
+            >
+              <Icon
+                icon="ChevronExpand"
+                style="width: 0.8em; height: 0.8em"
+              />
+            </button>
+          </div>
+          <div
+            class="dropdown"
+            class:visible={hovered_dropdown === href}
+            role="menu"
+            tabindex="-1"
+            onmouseenter={() => !is_touch_device && (hovered_dropdown = href)}
+            onmouseleave={() => !is_touch_device && (hovered_dropdown = null)}
+            onfocusin={() => (hovered_dropdown = href)}
+            onfocusout={(event) => {
+              const next = event.relatedTarget as Node | null
+              if (!next || !(event.currentTarget as HTMLElement).contains(next)) {
+                hovered_dropdown = null
+              }
+            }}
+          >
+            {#each filtered_sub_routes as child_href (child_href)}
+              {@const child = format_label(child_href, true)}
+              {#if link}
+                {@render link({ href: child_href, label: child.label })}
+              {:else}
+                <a
+                  href={child_href}
+                  role="menuitem"
+                  aria-current={is_current(child_href)}
+                  onclick={close_menus}
+                  onkeydown={(event) => handle_dropdown_item_keydown(event, href)}
+                  {...link_props}
+                  style={`${child.style}; ${link_props?.style ?? ``}`}
+                >
+                  {@html child.label}
+                </a>
+              {/if}
+            {/each}
+          </div>
+        </div>
+      {:else}
+        <!-- Regular link item -->
+        {@const regular = format_label(label)}
+        {#if link}
+          {@render link({ href, label })}
+        {:else}
+          <a
+            {href}
+            aria-current={is_current(href)}
+            onclick={close_menus}
+            {...link_props}
+            style={`${regular.style}; ${link_props?.style ?? ``}`}
+          >
+            {@html regular.label}
+          </a>
+        {/if}
+      {/if}
+    {/each}
+
+    {@render children?.({ is_open, panel_id, routes })}
+  </div>
+</nav>
+
+<style>
+  nav {
+    position: relative;
+    margin: -0.75em auto 1.25em;
+    --nav-border-radius: 6pt;
+    --nav-surface-bg: light-dark(#fff, #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),
+      0 4px 12px rgba(0, 0, 0, 0.5)
+    );
+  }
+  .menu {
+    display: flex;
+    gap: 1em;
+    place-content: center;
+    flex-wrap: wrap;
+    padding: 0.5em;
+  }
+  .menu > a {
+    line-height: 1.3;
+    padding: 1pt 5pt;
+    border-radius: var(--nav-border-radius);
+    text-decoration: none;
+    color: inherit;
+    transition: background-color 0.2s;
+  }
+  .menu > a:hover {
+    background-color: var(--nav-link-bg-hover);
+  }
+  .menu > a[aria-current='page'] {
+    color: var(--nav-link-active-color);
+  }
+
+  /* Dropdown styles */
+  .dropdown-wrapper {
+    position: relative;
+  }
+  .dropdown-wrapper.active .dropdown-trigger {
+    color: var(--nav-link-active-color);
+  }
+  .dropdown-wrapper::after {
+    content: '';
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    height: var(--nav-dropdown-margin, 3pt);
+  }
+  .dropdown-trigger-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 0;
+    border-radius: var(--nav-border-radius);
+    transition: background-color 0.2s;
+  }
+  .dropdown-trigger-wrapper:hover {
+    background-color: var(--nav-link-bg-hover);
+  }
+  .dropdown-trigger {
+    line-height: 1.3;
+    padding: 1pt 5pt;
+    text-decoration: none;
+    color: inherit;
+    border-radius: var(--nav-border-radius) 0 0 var(--nav-border-radius);
+  }
+  .dropdown-trigger[aria-current='page'] {
+    color: var(--nav-link-active-color);
+  }
+  .dropdown-toggle {
+    padding: 1pt 3pt;
+    border: none;
+    background: transparent;
+    color: inherit;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 0 var(--nav-border-radius) var(--nav-border-radius) 0;
+  }
+  .dropdown {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    margin: var(--nav-dropdown-margin, 3pt 0 0 0);
+    min-width: max-content;
+    background-color: var(--nav-dropdown-bg, var(--nav-surface-bg));
+    border: 1px solid var(--nav-dropdown-border-color, var(--nav-surface-border));
+    border-radius: var(--nav-border-radius, 6pt);
+    box-shadow: var(--nav-dropdown-shadow, var(--nav-surface-shadow));
+    padding: var(--nav-dropdown-padding, 2pt 3pt);
+    display: none;
+    flex-direction: column;
+    gap: var(--nav-dropdown-gap, 5pt);
+    z-index: var(--nav-dropdown-z-index, 100);
+  }
+  .dropdown.visible {
+    display: flex;
+  }
+  .dropdown a {
+    padding: var(--nav-dropdown-link-padding, 1pt 4pt);
+    border-radius: var(--nav-border-radius);
+    text-decoration: none;
+    color: inherit;
+    white-space: nowrap;
+    transition: background-color 0.2s;
+  }
+  .dropdown a:hover {
+    background-color: var(--nav-link-bg-hover);
+  }
+  .dropdown a[aria-current='page'] {
+    color: var(--nav-link-active-color);
+  }
+  /* Mobile burger button */
+  .burger-button {
+    display: none;
+    position: fixed;
+    top: 1rem;
+    left: 1rem;
+    flex-direction: column;
+    justify-content: space-around;
+    width: 1.4rem;
+    height: 1.4rem;
+    background: transparent;
+    padding: 0;
+    z-index: var(--nav-toggle-btn-z-index, 10);
+  }
+  .burger-line {
+    height: 0.18rem;
+    background-color: var(--text-color);
+    border-radius: 8px;
+    transition: all 0.2s linear;
+    transform-origin: 1px;
+  }
+  .burger-button[aria-expanded='true'] .burger-line:first-child {
+    transform: rotate(45deg);
+  }
+  .burger-button[aria-expanded='true'] .burger-line:nth-child(2) {
+    opacity: 0;
+  }
+  .burger-button[aria-expanded='true'] .burger-line:nth-child(3) {
+    transform: rotate(-45deg);
+  }
+  /* Mobile styles */
+  @media (max-width: 767px) {
+    .burger-button {
+      display: flex;
+    }
+    .menu {
+      position: fixed;
+      top: 3rem;
+      left: 1rem;
+      background-color: var(--nav-surface-bg);
+      border: 1px solid var(--nav-surface-border);
+      box-shadow: var(--nav-surface-shadow);
+      opacity: 0;
+      visibility: hidden;
+      transition: all 0.3s ease;
+      z-index: var(--nav-mobile-z-index, 2);
+      flex-direction: column;
+      align-items: stretch;
+      justify-content: flex-start;
+      gap: 0.2em;
+      max-width: 90vw;
+      border-radius: 6px;
+    }
+    .menu.open {
+      opacity: 1;
+      visibility: visible;
+    }
+    .menu > a,
+    .dropdown-wrapper {
+      padding: 2pt 8pt;
+    }
+
+    /* Mobile dropdown styles - show as expandable section */
+    .dropdown-wrapper {
+      flex-direction: column;
+      align-items: stretch;
+    }
+    .dropdown-trigger-wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+    .dropdown-trigger {
+      flex: 1;
+      border-radius: var(--nav-border-radius);
+    }
+    .dropdown-toggle {
+      padding: 4pt 8pt;
+      border-radius: var(--nav-border-radius);
+    }
+    .dropdown {
+      position: static;
+      border: none;
+      box-shadow: none;
+      margin-top: 0.25em;
+      padding: 0 0 0 1em;
+      background-color: transparent;
+    }
+  }
+</style>

package/dist/Nav.svelte.d.ts

@@ -0,0 +1,42 @@
+import type { Page } from '@sveltejs/kit';
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+declare function $$render<Route extends string | [string, string] | [string, string[]] = string | [string, string] | [string, string[]]>(): {
+    props: {
+        routes: Route[];
+        children?: Snippet<[{
+            is_open: boolean;
+            panel_id: string;
+            routes: Route[];
+        }]>;
+        link?: Snippet<[{
+            href: string;
+            label: string;
+        }]>;
+        menu_props?: HTMLAttributes<HTMLDivElement>;
+        link_props?: HTMLAttributes<HTMLAnchorElement>;
+        page?: Page;
+        labels?: Record<string, string>;
+    } & Omit<HTMLAttributes<HTMLElement>, "children">;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Route extends string | [string, string] | [string, string[]] = string | [string, string] | [string, string[]]> {
+    props(): ReturnType<typeof $$render<Route>>['props'];
+    events(): ReturnType<typeof $$render<Route>>['events'];
+    slots(): ReturnType<typeof $$render<Route>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Route extends string | [string, string] | [string, string[]] = string | [string, string] | [string, string[]]>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Route>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Route>['props']>, ReturnType<__sveltets_Render<Route>['events']>, ReturnType<__sveltets_Render<Route>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Route>['bindings']>;
+    } & ReturnType<__sveltets_Render<Route>['exports']>;
+    <Route extends string | [string, string] | [string, string[]] = string | [string, string] | [string, string[]]>(internal: unknown, props: ReturnType<__sveltets_Render<Route>['props']> & {}): ReturnType<__sveltets_Render<Route>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Nav: $$IsomorphicComponent;
+type Nav<Route extends string | [string, string] | [string, string[]] = string | [string, string] | [string, string[]]> = InstanceType<typeof Nav<Route>>;
+export default Nav;

package/dist/PrevNext.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">let { items = [], node = `nav`, current = ``, log = `errors`, nav_options = { replace_state: true, no_scroll: true }, titles = { prev: `&larr; Previous`, next: `Next &rarr;` }, onkeyup = ({ prev, next }) => ({ ArrowLeft: prev[0], ArrowRight: next[0] }), prev_snippet, children, between, next_snippet, min_items = 3, ...rest } = $props();
+<script lang="ts" generics="Item extends [string, unknown] = [string, unknown]">let { items = [], node = `nav`, current = ``, log = `errors`, nav_options = { replace_state: true, no_scroll: true }, titles = { prev: `&larr; Previous`, next: `Next &rarr;` }, onkeyup = ({ prev, next }) => ({ ArrowLeft: prev[0], ArrowRight: next[0] }), prev_snippet, children, between, next_snippet, min_items = 3, link_props, ...rest } = $props();
 // Convert items to consistent [key, value] format
 let items_arr = $derived((items ?? []).map((itm) => (typeof itm === `string` ? [itm, itm] : itm)));
 // Calculate prev/next items with wraparound
@@ -56,7 +56,7 @@ export {};
       {:else}
         <div>
           {#if titles.prev}<span>{@html titles.prev}</span>{/if}
-          <a href={prev[0]}>{prev[0]}</a>
+          <a {...link_props} href={prev[0]}>{prev[0]}</a>
         </div>
       {/if}
     {/if}
@@ -69,7 +69,7 @@ export {};
       {:else}
         <div>
           {#if titles.next}<span>{@html titles.next}</span>{/if}
-          <a href={next[0]}>{next[0]}</a>
+          <a {...link_props} href={next[0]}>{next[0]}</a>
         </div>
       {/if}
     {/if}

package/dist/PrevNext.svelte.d.ts

@@ -1,36 +1,56 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-export type Item = [string, unknown];
-interface Props extends Omit<HTMLAttributes<HTMLElement>, `children` | `onkeyup`> {
-    items?: (string | Item)[];
-    node?: string;
-    current?: string;
-    log?: `verbose` | `errors` | `silent`;
-    nav_options?: {
-        replace_state: boolean;
-        no_scroll: boolean;
+declare function $$render<Item extends [string, unknown] = [string, unknown]>(): {
+    props: Omit<HTMLAttributes<HTMLElement>, "children" | "onkeyup"> & {
+        items?: (string | Item)[];
+        node?: string;
+        current?: string;
+        log?: `verbose` | `errors` | `silent`;
+        nav_options?: {
+            replace_state: boolean;
+            no_scroll: boolean;
+        };
+        titles?: {
+            prev: string;
+            next: string;
+        };
+        onkeyup?: ((obj: {
+            prev: Item;
+            next: Item;
+        }) => Record<string, string | undefined>) | null;
+        prev_snippet?: Snippet<[{
+            item: Item;
+        }]>;
+        children?: Snippet<[{
+            kind: `prev` | `next`;
+            item: Item;
+        }]>;
+        between?: Snippet<[]>;
+        next_snippet?: Snippet<[{
+            item: Item;
+        }]>;
+        min_items?: number;
+        link_props?: HTMLAttributes<HTMLAnchorElement>;
     };
-    titles?: {
-        prev: string;
-        next: string;
-    };
-    onkeyup?: ((obj: {
-        prev: Item;
-        next: Item;
-    }) => Record<string, string | undefined>) | null;
-    prev_snippet?: Snippet<[{
-        item: Item;
-    }]>;
-    children?: Snippet<[{
-        kind: `prev` | `next`;
-        item: Item;
-    }]>;
-    between?: Snippet<[]>;
-    next_snippet?: Snippet<[{
-        item: Item;
-    }]>;
-    min_items?: number;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Item extends [string, unknown] = [string, unknown]> {
+    props(): ReturnType<typeof $$render<Item>>['props'];
+    events(): ReturnType<typeof $$render<Item>>['events'];
+    slots(): ReturnType<typeof $$render<Item>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Item extends [string, unknown] = [string, unknown]>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Item>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Item>['props']>, ReturnType<__sveltets_Render<Item>['events']>, ReturnType<__sveltets_Render<Item>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Item>['bindings']>;
+    } & ReturnType<__sveltets_Render<Item>['exports']>;
+    <Item extends [string, unknown] = [string, unknown]>(internal: unknown, props: ReturnType<__sveltets_Render<Item>['props']> & {}): ReturnType<__sveltets_Render<Item>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
-declare const PrevNext: import("svelte").Component<Props, {}, "">;
-type PrevNext = ReturnType<typeof PrevNext>;
+declare const PrevNext: $$IsomorphicComponent;
+type PrevNext<Item extends [string, unknown] = [string, unknown]> = InstanceType<typeof PrevNext<Item>>;
 export default PrevNext;

package/dist/Toggle.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">let { checked = $bindable(false), required = false, input_style = ``, id = null, onclick, onchange, onblur, onkeydown, children, ...rest } = $props();
+<script lang="ts">let { checked = $bindable(false), onkeydown, children, input_props, ...rest } = $props();
 // normally input type=checkbox toggles on space bar, this handler also responds to enter
 function handle_keydown(event) {
     onkeydown?.(event);
@@ -16,13 +16,8 @@ export {};
   <input
     type="checkbox"
     bind:checked
-    {id}
-    {required}
+    {...input_props}
     onkeydown={handle_keydown}
-    {onchange}
-    {onblur}
-    {onclick}
-    style={input_style}
   />
   <span></span>
 </label>

package/dist/Toggle.svelte.d.ts

@@ -1,16 +1,11 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-interface Props extends HTMLAttributes<HTMLLabelElement> {
+type $$ComponentProps = HTMLAttributes<HTMLLabelElement> & {
     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<[]>;
-}
-declare const Toggle: import("svelte").Component<Props, {}, "checked">;
+    input_props?: HTMLAttributes<HTMLInputElement>;
+};
+declare const Toggle: import("svelte").Component<$$ComponentProps, {}, "checked">;
 type Toggle = ReturnType<typeof Toggle>;
 export default Toggle;

package/dist/Wiggle.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { Snippet } from 'svelte';
-interface Props {
+type $$ComponentProps = {
     wiggle?: boolean;
     angle?: number;
     scale?: number;
@@ -9,7 +9,7 @@ interface Props {
     stiffness?: number;
     damping?: number;
     children?: Snippet;
-}
-declare const Wiggle: import("svelte").Component<Props, {}, "wiggle">;
+};
+declare const Wiggle: import("svelte").Component<$$ComponentProps, {}, "wiggle">;
 type Wiggle = ReturnType<typeof Wiggle>;
 export default Wiggle;

package/dist/index.d.ts

@@ -7,6 +7,7 @@ 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 Nav } from './Nav.svelte';
 export { default as PrevNext } from './PrevNext.svelte';
 export { default as Toggle } from './Toggle.svelte';
 export * from './types';

package/dist/index.js

@@ -7,6 +7,7 @@ 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 Nav } from './Nav.svelte';
 export { default as PrevNext } from './PrevNext.svelte';
 export { default as Toggle } from './Toggle.svelte';
 export * from './types';

package/package.json

@@ -5,7 +5,7 @@
   "homepage": "https://janosh.github.io/svelte-multiselect",
   "repository": "https://github.com/janosh/svelte-multiselect",
   "license": "MIT",
-  "version": "11.2.4",
+  "version": "11.3.0",
   "type": "module",
   "svelte": "./dist/index.js",
   "bugs": "https://github.com/janosh/svelte-multiselect/issues",
@@ -13,31 +13,31 @@
     "svelte": "^5.35.6"
   },
   "devDependencies": {
-    "@playwright/test": "^1.55.1",
-    "@stylistic/eslint-plugin": "^5.4.0",
+    "@playwright/test": "^1.56.1",
+    "@stylistic/eslint-plugin": "^5.5.0",
     "@sveltejs/adapter-static": "^3.0.10",
-    "@sveltejs/kit": "^2.43.8",
+    "@sveltejs/kit": "^2.48.4",
     "@sveltejs/package": "2.5.4",
     "@sveltejs/vite-plugin-svelte": "^6.2.1",
-    "@types/node": "^24.6.2",
-    "@vitest/coverage-v8": "^3.2.4",
-    "eslint": "^9.37.0",
-    "eslint-plugin-svelte": "^3.12.4",
-    "happy-dom": "^19.0.2",
+    "@types/node": "^24.10.0",
+    "@vitest/coverage-v8": "^4.0.8",
+    "eslint": "^9.39.1",
+    "eslint-plugin-svelte": "^3.13.0",
+    "happy-dom": "^20.0.10",
     "hastscript": "^9.0.1",
     "mdsvex": "^0.12.6",
     "mdsvexamples": "^0.5.0",
     "rehype-autolink-headings": "^7.1.0",
     "rehype-slug": "^6.0.0",
-    "svelte": "^5.39.8",
-    "svelte-check": "^4.3.2",
+    "svelte": "^5.43.5",
+    "svelte-check": "^4.3.3",
     "svelte-preprocess": "^6.0.3",
     "svelte-toc": "^0.6.2",
-    "svelte2tsx": "^0.7.44",
+    "svelte2tsx": "^0.7.45",
     "typescript": "5.9.3",
-    "typescript-eslint": "^8.45.0",
-    "vite": "^7.1.9",
-    "vitest": "^3.2.4"
+    "typescript-eslint": "^8.46.3",
+    "vite": "^7.2.2",
+    "vitest": "^4.0.8"
   },
   "keywords": [
     "svelte",

package/readme.md

@@ -32,8 +32,6 @@
 - **Single / multiple select:** pass `maxSelect={1, 2, 3, ...}` prop to restrict the number of selectable options
 - **Configurable:** see props
 
-<slot name="nav" />
-
 ## 🧪 &thinsp; Coverage
 
 | Statements                                                                                 | Branches                                                                          | Lines                                                                            |