svelte-multiselect 11.5.2 → 11.6.0

package/dist/Nav.svelte

@@ -1,12 +1,14 @@
 <script lang="ts">import { click_outside, tooltip } from './attachments';
 import Icon from './Icon.svelte';
+import { get_uuid } from './utils';
 let { routes = [], children, item, link, menu_props, link_props, page, labels, tooltips, tooltip_options, breakpoint = 767, onnavigate, onopen, onclose, ...rest } = $props();
 let is_open = $state(false);
 let hovered_dropdown = $state(null);
+let pinned_dropdown = $state(null);
 let focused_item_index = $state(-1);
 let is_touch_device = $state(false);
 let is_mobile = $state(false);
-const panel_id = `nav-menu-${crypto.randomUUID()}`;
+const panel_id = `nav-menu-${get_uuid()}`;
 // Track previous is_open state for callbacks
 let prev_is_open = $state(false);
 // Detect touch device and handle responsive breakpoint
@@ -35,19 +37,37 @@ $effect(() => {
 function close_menus() {
     is_open = false;
     hovered_dropdown = null;
+    pinned_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;
+    const is_opening = pinned_dropdown !== href;
+    pinned_dropdown = is_opening ? href : null;
+    hovered_dropdown = is_opening ? href : null;
     focused_item_index = is_opening && focus_first ? 0 : -1;
     // Focus management for keyboard users
     if (is_opening && focus_first) {
         setTimeout(() => {
-            document.querySelector(`.dropdown[data-href="${href}"] [role="menuitem"]`)?.focus();
+            document
+                .querySelector(`.dropdown[data-href="${CSS.escape(href)}"] [role="menuitem"]`)
+                ?.focus();
         }, 0);
     }
 }
+function handle_dropdown_mouseenter(href) {
+    if (is_touch_device)
+        return;
+    const is_this_pinned = pinned_dropdown === href;
+    if (pinned_dropdown && !is_this_pinned)
+        pinned_dropdown = null;
+    hovered_dropdown = href;
+}
+function handle_dropdown_focusin(href) {
+    const is_this_pinned = pinned_dropdown === href;
+    if (pinned_dropdown && !is_this_pinned)
+        pinned_dropdown = null;
+    hovered_dropdown = href;
+}
 function onkeydown(event) {
     if (event.key === `Escape`)
         close_menus();
@@ -59,15 +79,18 @@ function handle_dropdown_keydown(event, href, sub_routes) {
         toggle_dropdown(href, true);
         return;
     }
+    // Check if dropdown is open (either via hover or pinned)
+    const is_open = hovered_dropdown === href || pinned_dropdown === href;
     // Arrow key navigation within open dropdown
-    if (hovered_dropdown === href && (key === `ArrowDown` || key === `ArrowUp`)) {
+    if (is_open && (key === `ArrowDown` || key === `ArrowUp`)) {
         event.preventDefault();
         const direction = key === `ArrowDown` ? 1 : -1;
         focused_item_index = Math.max(0, Math.min(sub_routes.length - 1, focused_item_index + direction));
-        document.querySelectorAll(`.dropdown[data-href="${href}"] [role="menuitem"]`)?.[focused_item_index]?.focus();
+        document
+            .querySelectorAll(`.dropdown[data-href="${CSS.escape(href)}"] [role="menuitem"]`)?.[focused_item_index]?.focus();
     }
     // Open dropdown with ArrowDown when closed
-    if (hovered_dropdown !== href && key === `ArrowDown`) {
+    if (!is_open && key === `ArrowDown`) {
         event.preventDefault();
         toggle_dropdown(href, true);
     }
@@ -76,7 +99,9 @@ function handle_dropdown_item_keydown(event, href) {
     if (event.key === `Escape`) {
         event.preventDefault();
         close_menus();
-        document.querySelector(`.dropdown[data-href="${href}"] [data-dropdown-toggle]`)?.focus();
+        document
+            .querySelector(`.dropdown[data-href="${href}"] [data-dropdown-toggle]`)
+            ?.focus();
     }
 }
 function is_current(path) {
@@ -195,7 +220,7 @@ function get_external_attrs(route) {
   <button
     class="burger"
     type="button"
-    onclick={() => is_open = !is_open}
+    onclick={() => (is_open = !is_open)}
     aria-label="Toggle navigation menu"
     aria-expanded={is_open}
     aria-controls={panel_id}
@@ -222,7 +247,7 @@ function get_external_attrs(route) {
           ? route
           : Array.isArray(route)
           ? route[0]
-          : route.href ?? `sep-${route_idx}`
+          : (route.href ?? `sep-${route_idx}`)
       }`)
     }
       {@const parsed_route = parse_route(route)}
@@ -240,7 +265,11 @@ function get_external_attrs(route) {
         <!-- Dropdown menu item -->
         {@const child_is_active = is_child_current(sub_routes)}
         {@const parent_page_exists = sub_routes.includes(parsed_route.href)}
-        {@const filtered_sub_routes = sub_routes.filter((r) => r !== parsed_route.href)}
+        {@const filtered_sub_routes = sub_routes.filter(
+        (r) => r !== parsed_route.href,
+      )}
+        {@const is_pinned = pinned_dropdown === parsed_route.href}
+        {@const dropdown_open = hovered_dropdown === parsed_route.href || is_pinned}
         <div
           class="dropdown"
           class:active={child_is_active}
@@ -248,13 +277,15 @@ function get_external_attrs(route) {
           data-href={parsed_route.href}
           role="group"
           aria-current={child_is_active ? `true` : undefined}
-          onmouseenter={() => !is_touch_device && (hovered_dropdown = parsed_route.href)}
-          onmouseleave={() => !is_touch_device && (hovered_dropdown = null)}
-          onfocusin={() => (hovered_dropdown = parsed_route.href)}
+          onmouseenter={() => handle_dropdown_mouseenter(parsed_route.href)}
+          onmouseleave={() => {
+            if (!is_touch_device && !is_pinned) hovered_dropdown = null
+          }}
+          onfocusin={() => handle_dropdown_focusin(parsed_route.href)}
           onfocusout={(event) => {
             const next = event.relatedTarget as Node | null
             if (!next || !(event.currentTarget as HTMLElement).contains(next)) {
-              hovered_dropdown = null
+              if (!is_pinned) hovered_dropdown = null
             }
           }}
         >
@@ -287,9 +318,11 @@ function get_external_attrs(route) {
             {/if}
             <button
               type="button"
+              class="dropdown-toggle"
+              class:open={dropdown_open}
               data-dropdown-toggle
               aria-label="Toggle {formatted.label} submenu"
-              aria-expanded={hovered_dropdown === parsed_route.href}
+              aria-expanded={dropdown_open}
               aria-haspopup="true"
               onclick={() => toggle_dropdown(parsed_route.href, false)}
               onkeydown={(event) =>
@@ -299,24 +332,15 @@ function get_external_attrs(route) {
                 filtered_sub_routes,
               )}
             >
-              <Icon
-                icon="ChevronExpand"
-                style="width: 0.8em; height: 0.8em"
-              />
+              <Icon icon="ChevronDown" style="width: 0.7em; height: 0.7em" />
             </button>
           </div>
           <div
-            class:visible={hovered_dropdown === parsed_route.href}
+            class:visible={dropdown_open}
             role="menu"
             tabindex="-1"
-            onmouseenter={() => !is_touch_device && (hovered_dropdown = parsed_route.href)}
-            onmouseleave={() => !is_touch_device && (hovered_dropdown = null)}
-            onfocusin={() => (hovered_dropdown = parsed_route.href)}
-            onfocusout={(event) => {
-              const next = event.relatedTarget as Node | null
-              if (!next || !(event.currentTarget as HTMLElement).contains(next)) {
-                hovered_dropdown = null
-              }
+            onmouseenter={() => {
+              if (!is_touch_device) hovered_dropdown = parsed_route.href
             }}
           >
             {#each filtered_sub_routes as child_href (child_href)}
@@ -384,7 +408,10 @@ function get_external_attrs(route) {
     margin: -0.75em auto 1.25em;
     --nav-border-radius: 6pt;
     --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-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)
@@ -398,17 +425,21 @@ function get_external_attrs(route) {
     flex-wrap: wrap;
     padding: 0.5em;
   }
-  .menu > span,
+  .menu > span {
+    display: flex;
+    align-items: center;
+    border-radius: var(--nav-border-radius);
+    background-color: var(--nav-link-bg);
+    transition: background-color 0.2s;
+  }
+  .menu > span:hover {
+    background-color: var(--nav-link-bg-hover, rgba(0, 0, 0, 0.1));
+  }
   .menu > span > a {
     line-height: 1.3;
-    padding: 1pt 5pt;
-    border-radius: var(--nav-border-radius);
+    padding: var(--nav-item-padding);
     text-decoration: none;
     color: inherit;
-    transition: background-color 0.2s;
-  }
-  .menu > span > a:hover {
-    background-color: var(--nav-link-bg-hover);
   }
   .menu > span > a[aria-current='page'] {
     color: var(--nav-link-active-color);
@@ -450,24 +481,23 @@ function get_external_attrs(route) {
     content: '';
     position: absolute;
     top: 100%;
-    left: 0;
-    right: 0;
-    height: var(--nav-dropdown-margin, 3pt);
+    left: -5pt;
+    right: -5pt;
+    height: calc(var(--nav-dropdown-margin, 2pt) + 5pt);
   }
   .dropdown > div:first-child {
     display: flex;
     align-items: center;
-    gap: 0;
     border-radius: var(--nav-border-radius);
+    background-color: var(--nav-link-bg);
     transition: background-color 0.2s;
   }
   .dropdown > div:first-child:hover {
-    background-color: var(--nav-link-bg-hover);
+    background-color: var(--nav-link-bg-hover, rgba(0, 0, 0, 0.1));
   }
-  .dropdown > div:first-child > a,
-  .dropdown > div:first-child > span {
+  .dropdown > div:first-child > a, .dropdown > div:first-child > span {
     line-height: 1.3;
-    padding: 1pt 5pt;
+    padding: var(--nav-item-padding);
     text-decoration: none;
     color: inherit;
     border-radius: var(--nav-border-radius) 0 0 var(--nav-border-radius);
@@ -476,7 +506,7 @@ function get_external_attrs(route) {
     color: var(--nav-link-active-color);
   }
   .dropdown > div:first-child > button {
-    padding: 1pt 3pt;
+    padding: 2pt 4pt;
     border: none;
     background: transparent;
     color: inherit;
@@ -486,40 +516,49 @@ function get_external_attrs(route) {
     justify-content: center;
     border-radius: 0 var(--nav-border-radius) var(--nav-border-radius) 0;
     outline-offset: -1px;
+    opacity: 0.6;
+    transition: opacity 0.15s, transform 0.2s ease;
+  }
+  .dropdown > div:first-child > button:hover {
+    opacity: 1;
+  }
+  .dropdown > div:first-child > button.open {
+    opacity: 1;
+    transform: rotate(180deg);
   }
   .dropdown > div:first-child > button:focus-visible {
     outline: 2px solid currentColor;
     outline-offset: -2px;
+    opacity: 1;
   }
   .dropdown > div:last-child {
     position: absolute;
     top: 100%;
     left: 0;
-    margin: var(--nav-dropdown-margin, 3pt 0 0 0);
+    margin: var(--nav-dropdown-margin, 2pt) 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);
+    padding: var(--nav-dropdown-padding, 3pt 0);
     display: none;
     flex-direction: column;
-    gap: var(--nav-dropdown-gap, 5pt);
     z-index: var(--nav-dropdown-z-index, 100);
   }
   .dropdown > div:last-child.visible {
     display: flex;
   }
   .dropdown > div:last-child a {
-    padding: var(--nav-dropdown-link-padding, 1pt 4pt);
-    border-radius: var(--nav-border-radius);
+    padding: var(--nav-dropdown-link-padding, 2pt 6pt);
     text-decoration: none;
     color: inherit;
     white-space: nowrap;
-    transition: background-color 0.2s;
+    font-size: 0.92em;
+    transition: background-color 0.15s;
   }
   .dropdown > div:last-child a:hover {
-    background-color: var(--nav-link-bg-hover);
+    background-color: var(--nav-link-bg-hover, rgba(0, 0, 0, 0.1));
   }
   .dropdown > div:last-child a[aria-current='page'] {
     color: var(--nav-link-active-color);
@@ -610,15 +649,29 @@ function get_external_attrs(route) {
   nav.mobile .dropdown > div:first-child > button {
     padding: 4pt 8pt;
     border-radius: var(--nav-border-radius);
+    opacity: 0.6;
+  }
+  nav.mobile .dropdown > div:first-child > button.open {
+    opacity: 1;
   }
   nav.mobile .dropdown > div:last-child {
     position: static;
     border: none;
     box-shadow: none;
-    margin-top: 0.25em;
-    padding: 0 0 0 1em;
+    margin-top: 2pt;
+    padding: 0;
     background-color: transparent;
   }
+  nav.mobile .dropdown > div:last-child a {
+    padding: 4pt 8pt 4pt 6pt;
+    margin-left: 8pt;
+    border-left: 2px solid transparent;
+    font-size: 0.9em;
+  }
+  nav.mobile .dropdown > div:last-child a:hover,
+  nav.mobile .dropdown > div:last-child a[aria-current='page'] {
+    border-left-color: var(--nav-link-active-color, currentColor);
+  }
   /* Mobile right-aligned items stack normally */
   nav.mobile .menu > .align-right,
   nav.mobile .menu > .dropdown.align-right {

package/dist/Nav.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { Page } from '@sveltejs/kit';
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-import { type TooltipOptions } from './attachments';
+import type { TooltipOptions } from './attachments';
 import type { NavRoute, NavRouteObject } from './types';
 interface ItemSnippetParams {
     route: NavRouteObject;

package/dist/attachments.d.ts

@@ -1,4 +1,6 @@
 import { type Attachment } from 'svelte/attachments';
+import { get_uuid } from './utils';
+export { get_uuid };
 declare global {
     interface CSS {
         highlights: HighlightRegistry;

package/dist/attachments.js

@@ -1,4 +1,7 @@
 import {} from 'svelte/attachments';
+import { get_uuid } from './utils';
+// Re-export get_uuid for backwards compatibility
+export { get_uuid };
 // Svelte 5 attachment factory to make an element draggable
 // @param options - Configuration options for dragging behavior
 // @returns Attachment function that sets up dragging on an element
@@ -440,7 +443,7 @@ export const tooltip = (options = {}) => (node) => {
                 const placement = options.placement || `bottom`;
                 tooltip_el.setAttribute(`data-placement`, placement);
                 // Accessibility: link tooltip to trigger element
-                const tooltip_id = `tooltip-${crypto.randomUUID()}`;
+                const tooltip_id = `tooltip-${get_uuid()}`;
                 tooltip_el.id = tooltip_id;
                 tooltip_el.setAttribute(`role`, `tooltip`);
                 element.setAttribute(`aria-describedby`, tooltip_id);

package/dist/heading-anchors.js

@@ -6,8 +6,8 @@
 // Avoid matching inside src={...} attributes by requiring these specific contexts
 // Note: [^>]* for attributes won't match if an attribute value contains > (e.g., data-foo="a>b")
 // This edge case is rare in practice and would require significantly more complex parsing
-const heading_regex_line_start = /^(\s*)<(h[2-6])([^>]*)>([\s\S]*?)<\/\2>/gim;
-const heading_regex_after_tag = /(>)(\s*)<(h[2-6])([^>]*)>([\s\S]*?)<\/\3>/gi;
+const heading_regex_line_start = /^(\s*)<(h[1-6])([^>]*)>([\s\S]*?)<\/\2>/gim;
+const heading_regex_after_tag = /(>)(\s*)<(h[1-6])([^>]*)>([\s\S]*?)<\/\3>/gi;
 // Remove Svelte expressions handling nested braces (e.g., {fn({a: 1})})
 // Treats unmatched } as literal text to avoid dropping content
 function strip_svelte_expressions(str) {
@@ -94,25 +94,19 @@ function add_anchor_to_heading(heading, icon_svg = link_svg) {
 export const heading_anchors = (options = {}) => (node) => {
     if (typeof document === `undefined`)
         return;
-    const selector = options.selector ?? `h2, h3, h4, h5, h6`;
+    // :scope refers to the element on which querySelectorAll is called
+    // This works whether the attachment is on <main> or a parent element
+    const selector = options.selector ??
+        `:scope > :is(h1, h2, h3, h4, h5, h6), :scope > * > :is(h1, h2, h3, h4, h5, h6)`;
     const icon_svg = options.icon_svg ?? link_svg;
     // Process existing headings
     for (const heading of Array.from(node.querySelectorAll(selector))) {
         add_anchor_to_heading(heading, icon_svg);
     }
-    // Watch for new headings
-    const observer = new MutationObserver((mutations) => {
-        for (const { addedNodes } of mutations) {
-            for (const added of Array.from(addedNodes)) {
-                if (added.nodeType !== Node.ELEMENT_NODE)
-                    continue;
-                const el = added;
-                if (el.matches?.(selector))
-                    add_anchor_to_heading(el, icon_svg);
-                for (const hdn of Array.from(el.querySelectorAll(selector))) {
-                    add_anchor_to_heading(hdn, icon_svg);
-                }
-            }
+    // Watch for new headings - requery the container to respect nesting depth constraints
+    const observer = new MutationObserver(() => {
+        for (const heading of Array.from(node.querySelectorAll(selector))) {
+            add_anchor_to_heading(heading, icon_svg);
         }
     });
     observer.observe(node, { childList: true, subtree: true });

package/dist/live-examples/highlighter.js

@@ -0,0 +1,62 @@
+// Starry-night highlighter for mdsvex
+import { createStarryNight } from '@wooorm/starry-night';
+import source_css from '@wooorm/starry-night/source.css';
+import source_js from '@wooorm/starry-night/source.js';
+import source_json from '@wooorm/starry-night/source.json';
+import source_shell from '@wooorm/starry-night/source.shell';
+import source_svelte from '@wooorm/starry-night/source.svelte';
+import source_ts from '@wooorm/starry-night/source.ts';
+import text_html_basic from '@wooorm/starry-night/text.html.basic';
+// Escape HTML special characters in text content (not for attribute values)
+const escape_html_text = (str) => str.replace(/&/g, `&amp;`).replace(/</g, `&lt;`).replace(/>/g, `&gt;`);
+// Convert HAST to HTML string (simplified - only handles what starry-night outputs)
+export const hast_to_html = (node) => {
+    if (node.type === `text`)
+        return escape_html_text(node.value);
+    if (node.type === `root`)
+        return node.children?.map(hast_to_html).join(``) ?? ``;
+    const { tagName, properties, children } = node;
+    const cls = properties?.className?.join(` `);
+    const attrs = cls ? ` class="${cls}"` : ``;
+    const inner = children?.map(hast_to_html).join(``) ?? ``;
+    return `<${tagName}${attrs}>${inner}</${tagName}>`;
+};
+// Shared starry-night instance (grammars loaded once at build time)
+export const starry_night = await createStarryNight([
+    source_svelte,
+    source_js,
+    source_ts,
+    source_css,
+    source_json,
+    source_shell,
+    text_html_basic,
+]);
+// Map code fence language to starry-night grammar scope
+export const LANG_TO_SCOPE = {
+    svelte: `source.svelte`,
+    html: `text.html.basic`,
+    ts: `source.ts`,
+    typescript: `source.ts`,
+    js: `source.js`,
+    javascript: `source.js`,
+    css: `source.css`,
+    json: `source.json`,
+    shell: `source.shell`,
+    bash: `source.shell`,
+    sh: `source.shell`,
+};
+// Escape characters that would be interpreted as Svelte template syntax
+const escape_svelte = (html) => html.replace(/\{/g, `&#123;`).replace(/\}/g, `&#125;`);
+// mdsvex highlighter function
+export function starry_night_highlighter(code, lang) {
+    const lang_key = lang?.toLowerCase();
+    const scope = lang_key ? LANG_TO_SCOPE[lang_key] : undefined;
+    if (!scope) {
+        // Return escaped code if language not supported
+        const escaped = escape_svelte(escape_html_text(code));
+        return `<pre class="highlight"><code>${escaped}</code></pre>`;
+    }
+    const tree = starry_night.highlight(code, scope);
+    const html = escape_svelte(hast_to_html(tree));
+    return `<pre class="highlight highlight-${lang_key}"><code>${html}</code></pre>`;
+}

package/dist/live-examples/index.d.ts

@@ -0,0 +1,7 @@
+export { starry_night_highlighter } from './highlighter.js';
+export { default as mdsvex_transform, EXAMPLE_COMPONENT_PREFIX, EXAMPLE_MODULE_PREFIX, } from './mdsvex-transform.js';
+export { default as vite_plugin } from './vite-plugin.js';
+import { sveltePreprocess as _sveltePreprocess } from 'svelte-preprocess';
+type SveltePreprocessOptions = Parameters<typeof _sveltePreprocess>[0];
+type PreprocessorGroup = ReturnType<typeof _sveltePreprocess>;
+export declare function sveltePreprocess(opts?: SveltePreprocessOptions): PreprocessorGroup;

package/dist/live-examples/index.js

@@ -0,0 +1,23 @@
+// Live examples - transforms ```svelte example code blocks into rendered components
+// with syntax highlighting and live preview
+export { starry_night_highlighter } from './highlighter.js';
+export { default as mdsvex_transform, EXAMPLE_COMPONENT_PREFIX, EXAMPLE_MODULE_PREFIX, } from './mdsvex-transform.js';
+export { default as vite_plugin } from './vite-plugin.js';
+import { sveltePreprocess as _sveltePreprocess } from 'svelte-preprocess';
+// Wrap sveltePreprocess to skip markdown files - otherwise it transpiles code inside
+// markdown code fences, losing whitespace formatting
+const is_markdown = (filename) => /\.(md|mdx|svx)$/.test(filename ?? ``);
+export function sveltePreprocess(opts) {
+    const base = _sveltePreprocess(opts);
+    return {
+        markup: async (args) => is_markdown(args.filename)
+            ? { code: args.content }
+            : (await base.markup?.(args)) ?? { code: args.content },
+        script: async (args) => is_markdown(args.filename)
+            ? { code: args.content }
+            : (await base.script?.(args)) ?? { code: args.content },
+        style: async (args) => is_markdown(args.filename)
+            ? { code: args.content }
+            : (await base.style?.(args)) ?? { code: args.content },
+    };
+}

package/dist/live-examples/mdsvex-transform.d.ts

@@ -0,0 +1,32 @@
+export declare const EXAMPLE_MODULE_PREFIX = "___live_example___";
+export declare const EXAMPLE_COMPONENT_PREFIX = "LiveExample___";
+interface RemarkMeta {
+    Wrapper?: string | [string, string];
+    filename?: string;
+    csr?: boolean;
+    example?: boolean;
+    hideScript?: boolean;
+    hideStyle?: boolean;
+    [key: string]: unknown;
+}
+interface RemarkOptions {
+    defaults?: Partial<RemarkMeta>;
+}
+interface RemarkTree {
+    type: string;
+    children: RemarkNode[];
+}
+interface RemarkNode {
+    type: string;
+    lang?: string;
+    meta?: string;
+    value?: string;
+    children?: RemarkNode[];
+}
+interface RemarkFile {
+    filename: string;
+    cwd: string;
+}
+type RemarkTransformer = (tree: RemarkTree, file: RemarkFile) => void;
+declare function remark(options?: RemarkOptions): RemarkTransformer;
+export default remark;