svelte-multiselect 11.6.0 → 11.6.1

package/dist/MultiSelect.svelte

@@ -7,7 +7,7 @@ import CircleSpinner from './CircleSpinner.svelte';
 import Icon from './Icon.svelte';
 import * as utils from './utils';
 import Wiggle from './Wiggle.svelte';
-let { activeIndex = $bindable(null), activeOption = $bindable(null), createOptionMsg = `Create this option...`, allowUserOptions = false, allowEmpty = false, autocomplete = `off`, autoScroll = true, breakpoint = 800, defaultDisabledTitle = `This option is disabled`, disabled = false, disabledInputTitle = `This input is disabled`, duplicateOptionMsg = `This option is already selected`, duplicates = false, keepSelectedInDropdown = false, key = (opt) => `${utils.get_label(opt)}`.toLowerCase(), filterFunc = (opt, searchText) => {
+let { activeIndex = $bindable(null), activeOption = $bindable(null), createOptionMsg = `Create this option...`, allowUserOptions = false, allowEmpty = false, autocomplete = `off`, autoScroll = true, breakpoint = 800, defaultDisabledTitle = `This option is disabled`, disabled = false, disabledInputTitle = `This input is disabled`, duplicateOptionMsg = `This option is already selected`, duplicates = false, keepSelectedInDropdown = false, key = (opt) => utils.get_option_key(opt), filterFunc = (opt, searchText) => {
     if (!searchText)
         return true;
     const label = `${utils.get_label(opt)}`;
@@ -243,7 +243,16 @@ let selected_keys = $derived(selected.map(key));
 let selected_labels = $derived(selected.map(utils.get_label));
 // Sets for O(1) lookups (used in template, has_user_msg, group_header_state, batch operations)
 let selected_keys_set = $derived(new Set(selected_keys));
-let selected_labels_set = $derived(new Set(selected_labels));
+// String-normalized for consistent comparison (numeric labels like 123 match "123")
+let selected_labels_set = $derived(new Set(selected_labels.map((lbl) => `${lbl}`)));
+// Lowercase labels set for case-insensitive duplicate detection
+let selected_labels_lower_set = $derived(duplicates === `case-insensitive`
+    ? new Set(selected_labels.map((lbl) => `${lbl}`.toLowerCase()))
+    : null);
+// Helper to check if a label is already selected (respects case-insensitive mode)
+const is_label_selected = (label) => selected_labels_lower_set
+    ? selected_labels_lower_set.has(label.toLowerCase())
+    : selected_labels_set.has(label);
 // Memoized Set of disabled option keys for O(1) lookups in large option sets
 let disabled_option_keys = $derived(new Set(effective_options
     .filter((opt) => utils.is_object(opt) && opt.disabled)
@@ -482,18 +491,26 @@ function add(option_to_add, event) {
         typeof selected_labels[0] === `number`) {
         option_to_add = Number(option_to_add); // convert to number if possible
     }
-    const is_duplicate = selected_keys_set.has(key(option_to_add));
+    // Check for duplicates by key, plus label check for user-created options
+    // For duplicates=false (default), label check only applies to user-typed text
+    // For duplicates='case-insensitive', label check applies to all options
+    // Use key comparison instead of reference equality (more robust with Svelte proxies)
+    const option_key = key(option_to_add);
+    const is_from_options = effective_options.some((opt) => key(opt) === option_key);
+    const check_label = duplicates === `case-insensitive` || !is_from_options;
+    const is_duplicate = selected_keys_set.has(key(option_to_add)) ||
+        (check_label && is_label_selected(`${utils.get_label(option_to_add)}`));
     const max_reached = maxSelect !== null && maxSelect !== 1 &&
         selected.length >= maxSelect;
     // Fire events for blocked add attempts
     if (max_reached) {
         onmaxreached?.({ selected, maxSelect, attemptedOption: option_to_add });
     }
-    if (is_duplicate && !duplicates)
+    if (is_duplicate && duplicates !== true)
         onduplicate?.({ option: option_to_add });
     if ((maxSelect === null || maxSelect === 1 || selected.length < maxSelect) &&
-        (duplicates || !is_duplicate)) {
-        if (!effective_options.includes(option_to_add) && // first check if we find option in the options list
+        (duplicates === true || !is_duplicate)) {
+        if (!is_from_options && // first check if we find option in the options list
             // this has the side-effect of not allowing to user to add the same
             // custom option twice in append mode
             [true, `append`].includes(allowUserOptions) &&
@@ -606,7 +623,7 @@ function handle_dropdown_after_select(event) {
 // Check if a user message (create option, duplicate warning, no match) is visible
 const has_user_msg = $derived(searchText.length > 0 &&
     Boolean((allowUserOptions && createOptionMsg) ||
-        (!duplicates && selected_labels_set.has(searchText)) ||
+        (duplicates !== true && is_label_selected(searchText)) ||
         (navigable_options.length === 0 && noMatchingOptionsMsg)));
 // Handle arrow key navigation through options (uses navigable_options to skip collapsed groups)
 async function handle_arrow_navigation(direction) {
@@ -827,7 +844,7 @@ function toggle_group_selection(group_opts, group_collapsed, all_selected, event
     }
 }
 // O(1) lookup using pre-computed Set instead of O(n) array.includes()
-const is_selected = (label) => selected_labels_set.has(label);
+const is_selected = (label) => selected_labels_set.has(`${label}`);
 const if_enter_or_space = (handler) => (event) => {
     if (event.key === `Enter` || event.code === `Space`) {
         event.preventDefault();
@@ -1414,8 +1431,7 @@ function handle_options_scroll(event) {
         {/if}
       {/each}
       {#if searchText}
-        {@const text_input_is_duplicate = selected_labels.includes(searchText)}
-        {@const is_dupe = !duplicates && text_input_is_duplicate && `dupe`}
+        {@const is_dupe = duplicates !== true && is_label_selected(searchText) && `dupe`}
         {@const can_create = Boolean(allowUserOptions && createOptionMsg) && `create`}
         {@const no_match =
         Boolean(navigable_options?.length === 0 && noMatchingOptionsMsg) &&

package/dist/Nav.svelte

@@ -1,13 +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 { routes = [], children, item, link, menu_props, link_props, page, labels, tooltips, tooltip_options, breakpoint = 767, dropdown_cooldown = 150, 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);
+let hide_timeout = null;
 const panel_id = `nav-menu-${get_uuid()}`;
 // Track previous is_open state for callbacks
 let prev_is_open = $state(false);
@@ -34,7 +35,13 @@ $effect(() => {
     }
     prev_is_open = is_open;
 });
+$effect(() => () => {
+    if (hide_timeout)
+        clearTimeout(hide_timeout);
+}); // cleanup on destroy
 function close_menus() {
+    if (hide_timeout)
+        clearTimeout(hide_timeout);
     is_open = false;
     hovered_dropdown = null;
     pinned_dropdown = null;
@@ -45,7 +52,6 @@ function toggle_dropdown(href, focus_first = false) {
     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
@@ -54,19 +60,23 @@ function toggle_dropdown(href, focus_first = false) {
         }, 0);
     }
 }
-function handle_dropdown_mouseenter(href) {
-    if (is_touch_device)
+function open_dropdown(href, from_mouse = false) {
+    if (from_mouse && is_touch_device)
         return;
-    const is_this_pinned = pinned_dropdown === href;
-    if (pinned_dropdown && !is_this_pinned)
+    if (hide_timeout)
+        clearTimeout(hide_timeout);
+    if (pinned_dropdown && pinned_dropdown !== href)
         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 schedule_hide(href, is_pinned) {
+    if (is_touch_device || is_pinned)
+        return;
+    clearTimeout(hide_timeout);
+    hide_timeout = setTimeout(() => {
+        if (hovered_dropdown === href)
+            hovered_dropdown = null;
+    }, dropdown_cooldown);
 }
 function onkeydown(event) {
     if (event.key === `Escape`)
@@ -277,11 +287,9 @@ function get_external_attrs(route) {
           data-href={parsed_route.href}
           role="group"
           aria-current={child_is_active ? `true` : undefined}
-          onmouseenter={() => handle_dropdown_mouseenter(parsed_route.href)}
-          onmouseleave={() => {
-            if (!is_touch_device && !is_pinned) hovered_dropdown = null
-          }}
-          onfocusin={() => handle_dropdown_focusin(parsed_route.href)}
+          onmouseenter={() => open_dropdown(parsed_route.href, true)}
+          onmouseleave={() => schedule_hide(parsed_route.href, is_pinned)}
+          onfocusin={() => open_dropdown(parsed_route.href)}
           onfocusout={(event) => {
             const next = event.relatedTarget as Node | null
             if (!next || !(event.currentTarget as HTMLElement).contains(next)) {
@@ -339,9 +347,8 @@ function get_external_attrs(route) {
             class:visible={dropdown_open}
             role="menu"
             tabindex="-1"
-            onmouseenter={() => {
-              if (!is_touch_device) hovered_dropdown = parsed_route.href
-            }}
+            onmouseenter={() => open_dropdown(parsed_route.href, true)}
+            onmouseleave={() => schedule_hide(parsed_route.href, is_pinned)}
           >
             {#each filtered_sub_routes as child_href (child_href)}
               {@const child_formatted = format_label(child_href, true)}
@@ -406,7 +413,7 @@ function get_external_attrs(route) {
   nav {
     position: relative;
     margin: -0.75em auto 1.25em;
-    --nav-border-radius: 6pt;
+    --nav-border-radius: 3pt;
     --nav-surface-bg: light-dark(#fafafa, #1a1a1a);
     --nav-surface-border: light-dark(
       rgba(128, 128, 128, 0.25),
@@ -437,7 +444,7 @@ function get_external_attrs(route) {
   }
   .menu > span > a {
     line-height: 1.3;
-    padding: var(--nav-item-padding);
+    padding: var(--nav-item-padding, 1pt 4pt);
     text-decoration: none;
     color: inherit;
   }
@@ -497,7 +504,7 @@ function get_external_attrs(route) {
   }
   .dropdown > div:first-child > a, .dropdown > div:first-child > span {
     line-height: 1.3;
-    padding: var(--nav-item-padding);
+    padding: var(--nav-item-padding, 1pt 4pt);
     text-decoration: none;
     color: inherit;
     border-radius: var(--nav-border-radius) 0 0 var(--nav-border-radius);
@@ -534,9 +541,12 @@ function get_external_attrs(route) {
   .dropdown > div:last-child {
     position: absolute;
     top: 100%;
-    left: 0;
+    left: var(--nav-dropdown-left, 0);
+    right: var(--nav-dropdown-right, auto);
     margin: var(--nav-dropdown-margin, 2pt) 0 0 0;
-    min-width: max-content;
+    min-width: var(--nav-dropdown-min-width, 100%); /* at least as wide as parent */
+    max-width: var(--nav-dropdown-max-width, none);
+    width: var(--nav-dropdown-width, max-content); /* grow wider if content needs it */
     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);

package/dist/Nav.svelte.d.ts

@@ -30,6 +30,7 @@ type $$ComponentProps = {
     tooltips?: Record<string, string | Omit<TooltipOptions, `disabled`>>;
     tooltip_options?: Omit<TooltipOptions, `content`>;
     breakpoint?: number;
+    dropdown_cooldown?: number;
     onnavigate?: (data: {
         href: string;
         event: MouseEvent;

package/dist/attachments.d.ts

@@ -64,6 +64,7 @@ export interface TooltipOptions {
     show_arrow?: boolean;
     offset?: number;
     allow_html?: boolean;
+    sanitize_html?: (html: string) => string;
 }
 export declare const tooltip: (options?: TooltipOptions) => Attachment;
 export type ClickOutsideConfig<T extends HTMLElement> = {

package/dist/attachments.js

@@ -422,16 +422,141 @@ export const tooltip = (options = {}) => (node) => {
                 content = new_content;
                 // Only update tooltip if this element owns it
                 if (current_tooltip?._owner === element) {
-                    if (options.allow_html !== false) {
-                        current_tooltip.innerHTML = content.replace(/\r/g, `<br/>`);
-                    }
-                    else {
-                        current_tooltip.textContent = content;
+                    const content_el = current_tooltip.querySelector(`.tooltip-content`);
+                    if (content_el) {
+                        if (options.allow_html !== false) {
+                            let html = content.replace(/\r/g, `<br/>`);
+                            if (options.sanitize_html)
+                                html = options.sanitize_html(html);
+                            content_el.innerHTML = html;
+                        }
+                        else {
+                            content_el.textContent = content;
+                        }
+                        // Re-run sizing/positioning after content change
+                        resize_and_position_tooltip(current_tooltip, element);
                     }
                 }
             }
         });
         observer.observe(element, { attributes: true, attributeFilter: tooltip_attrs });
+        // Shrink tooltip to fit content, then position for correct centering
+        function resize_and_position_tooltip(tooltip_el, trigger) {
+            // Reset width to allow natural sizing before measuring
+            tooltip_el.style.width = ``;
+            requestAnimationFrame(() => {
+                if (!document.body.contains(tooltip_el))
+                    return;
+                const computed = getComputedStyle(tooltip_el);
+                const padding_h = parseFloat(computed.paddingLeft) +
+                    parseFloat(computed.paddingRight);
+                const border_h = parseFloat(computed.borderLeftWidth) +
+                    parseFloat(computed.borderRightWidth);
+                // Handle max-width: none as unbounded, fallback to 280 only for invalid values
+                const max_width_raw = computed.maxWidth;
+                const max_width_parsed = parseFloat(max_width_raw);
+                const max_width = max_width_raw === `none`
+                    ? Infinity
+                    : Number.isFinite(max_width_parsed)
+                        ? max_width_parsed
+                        : 280;
+                // With border-box, width includes padding+border; with content-box, subtract them
+                const box_adjust = computed.boxSizing === `border-box` ? 0 : padding_h + border_h;
+                const style = tooltip_el.style;
+                const placement = tooltip_el.getAttribute(`data-placement`) || `bottom`;
+                // Save styles, measure single-line width with wrapping disabled
+                const saved = {
+                    maxWidth: style.maxWidth,
+                    wordWrap: style.wordWrap,
+                    textWrap: style.textWrap,
+                    whiteSpace: style.whiteSpace,
+                };
+                Object.assign(style, {
+                    maxWidth: `none`,
+                    wordWrap: `normal`,
+                    textWrap: `nowrap`,
+                    whiteSpace: `nowrap`,
+                    width: `auto`,
+                });
+                const single_line_width = tooltip_el.offsetWidth;
+                Object.assign(style, saved);
+                // Convert offsetWidth to the value needed for style.width
+                const content_width = single_line_width - box_adjust;
+                if (content_width <= max_width) {
+                    // Single-line: set exact width and prevent wrapping
+                    style.width = `${Math.max(0, content_width)}px`;
+                    style.textWrap = `nowrap`;
+                }
+                else {
+                    // Multi-line: binary search for minimum width that doesn't add line breaks
+                    style.width = ``;
+                    const baseline_height = tooltip_el.offsetHeight;
+                    const initial_width = tooltip_el.offsetWidth;
+                    // Get min-content (longest word) as lower bound
+                    Object.assign(style, {
+                        maxWidth: `none`,
+                        wordWrap: `normal`,
+                        width: `min-content`,
+                    });
+                    const min_width = tooltip_el.offsetWidth;
+                    Object.assign(style, {
+                        maxWidth: saved.maxWidth,
+                        wordWrap: saved.wordWrap,
+                        width: `${initial_width - box_adjust}px`,
+                    });
+                    // If longest word exceeds wrapped width, use min_width (can't shrink further)
+                    if (min_width >= initial_width) {
+                        style.width = `${min_width - box_adjust}px`;
+                    }
+                    else {
+                        // Binary search for minimum width that maintains baseline height
+                        // Work in offsetWidth units, convert to style.width only when setting
+                        let low = min_width, high = initial_width, best = initial_width;
+                        while (high - low > 1) {
+                            const mid = Math.floor((low + high) / 2);
+                            style.width = `${mid - box_adjust}px`;
+                            if (tooltip_el.offsetHeight > baseline_height)
+                                low = mid;
+                            else {
+                                best = mid;
+                                high = mid;
+                            }
+                        }
+                        style.width = `${best - box_adjust}px`;
+                    }
+                }
+                // Position tooltip after width adjustment so centering uses final dimensions
+                const rect = trigger.getBoundingClientRect();
+                const tooltip_rect = tooltip_el.getBoundingClientRect();
+                const margin = options.offset ?? 12;
+                let top = 0, left = 0;
+                if (placement === `top`) {
+                    top = rect.top - tooltip_rect.height - margin;
+                    left = rect.left + rect.width / 2 - tooltip_rect.width / 2;
+                }
+                else if (placement === `left`) {
+                    top = rect.top + rect.height / 2 - tooltip_rect.height / 2;
+                    left = rect.left - tooltip_rect.width - margin;
+                }
+                else if (placement === `right`) {
+                    top = rect.top + rect.height / 2 - tooltip_rect.height / 2;
+                    left = rect.right + margin;
+                }
+                else { // bottom
+                    top = rect.bottom + margin;
+                    left = rect.left + rect.width / 2 - tooltip_rect.width / 2;
+                }
+                // Keep in viewport
+                const viewport_width = globalThis.innerWidth;
+                const viewport_height = globalThis.innerHeight;
+                left = Math.max(8, Math.min(left, viewport_width - tooltip_rect.width - 8));
+                top = Math.max(8, Math.min(top, viewport_height - tooltip_rect.height - 8));
+                style.left = `${left + globalThis.scrollX}px`;
+                style.top = `${top + globalThis.scrollY}px`;
+                style.opacity =
+                    getComputedStyle(trigger).getPropertyValue(`--tooltip-opacity`).trim() || `1`;
+            });
+        }
         function show_tooltip() {
             // Skip tooltip on touch input when 'touch-devices' option is set
             if (options.disabled === `touch-devices` && last_pointer_type === `touch`)
@@ -449,7 +574,7 @@ export const tooltip = (options = {}) => (node) => {
                 element.setAttribute(`aria-describedby`, tooltip_id);
                 // Apply base styles
                 tooltip_el.style.cssText = `
-          position: absolute; z-index: 9999; opacity: 0;
+          position: absolute; z-index: 9999; opacity: 0; display: inline-block;
           background: var(--tooltip-bg, #333); color: var(--text-color, white); border: var(--tooltip-border, none);
           padding: var(--tooltip-padding, 6px 10px); border-radius: var(--tooltip-radius, 6px); font-size: var(--tooltip-font-size, 13px); line-height: 1.4;
           max-width: var(--tooltip-max-width, 280px); word-wrap: break-word; text-wrap: balance; pointer-events: none;
@@ -465,13 +590,20 @@ export const tooltip = (options = {}) => (node) => {
                             tooltip_el.style.setProperty(property, value);
                     });
                 }
+                // Wrap content in a span for reactive content updates
+                const content_span = document.createElement(`span`);
+                content_span.className = `tooltip-content`;
                 // Security: allow_html defaults to true; set to false for plain text rendering
                 if (options.allow_html !== false) {
-                    tooltip_el.innerHTML = content?.replace(/\r/g, `<br/>`) ?? ``;
+                    let html = content?.replace(/\r/g, `<br/>`) ?? ``;
+                    if (options.sanitize_html)
+                        html = options.sanitize_html(html);
+                    content_span.innerHTML = html;
                 }
                 else {
-                    tooltip_el.textContent = content ?? ``;
+                    content_span.textContent = content ?? ``;
                 }
+                tooltip_el.appendChild(content_span);
                 // Mirror CSS custom properties from the trigger node onto the tooltip element
                 const trigger_styles = getComputedStyle(element);
                 [
@@ -578,34 +710,7 @@ export const tooltip = (options = {}) => (node) => {
                     append_border_arrow();
                     tooltip_el.appendChild(arrow);
                 }
-                // Position tooltip
-                const rect = element.getBoundingClientRect();
-                const tooltip_rect = tooltip_el.getBoundingClientRect();
-                const margin = options.offset ?? 12;
-                let top = 0, left = 0;
-                if (placement === `top`) {
-                    top = rect.top - tooltip_rect.height - margin;
-                    left = rect.left + rect.width / 2 - tooltip_rect.width / 2;
-                }
-                else if (placement === `left`) {
-                    top = rect.top + rect.height / 2 - tooltip_rect.height / 2;
-                    left = rect.left - tooltip_rect.width - margin;
-                }
-                else if (placement === `right`) {
-                    top = rect.top + rect.height / 2 - tooltip_rect.height / 2;
-                    left = rect.right + margin;
-                }
-                else { // bottom
-                    top = rect.bottom + margin;
-                    left = rect.left + rect.width / 2 - tooltip_rect.width / 2;
-                }
-                // Keep in viewport
-                left = Math.max(8, Math.min(left, globalThis.innerWidth - tooltip_rect.width - 8));
-                top = Math.max(8, Math.min(top, globalThis.innerHeight - tooltip_rect.height - 8));
-                tooltip_el.style.left = `${left + globalThis.scrollX}px`;
-                tooltip_el.style.top = `${top + globalThis.scrollY}px`;
-                const custom_opacity = trigger_styles.getPropertyValue(`--tooltip-opacity`).trim();
-                tooltip_el.style.opacity = custom_opacity || `1`;
+                resize_and_position_tooltip(tooltip_el, element);
                 current_tooltip = Object.assign(tooltip_el, { _owner: element });
             }, options.delay || 100);
         }

package/dist/live-examples/highlighter.js

@@ -1,12 +1,6 @@
 // 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 { common, createStarryNight } from '@wooorm/starry-night';
 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)
@@ -14,43 +8,22 @@ 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(``) ?? ``;
+        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;`);
+// Shared starry-night instance (grammars loaded once at build time)
+// Uses common bundle (34 grammars) + Svelte
+export const starry_night = await createStarryNight([...common, source_svelte]);
 // 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;
+    const scope = lang_key ? starry_night.flagToScope(lang_key) : undefined;
     if (!scope) {
         // Return escaped code if language not supported
         const escaped = escape_svelte(escape_html_text(code));

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

@@ -1,4 +1,4 @@
-export { starry_night_highlighter } from './highlighter.js';
+export { hast_to_html, starry_night, 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';

package/dist/live-examples/index.js

@@ -1,6 +1,6 @@
 // Live examples - transforms ```svelte example code blocks into rendered components
 // with syntax highlighting and live preview
-export { starry_night_highlighter } from './highlighter.js';
+export { hast_to_html, starry_night, 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';

package/dist/live-examples/mdsvex-transform.js

@@ -1,7 +1,7 @@
 // Remark plugin - transforms ```svelte example code blocks into rendered components
 import { Buffer } from 'node:buffer';
 import path from 'node:path';
-import { hast_to_html, LANG_TO_SCOPE, starry_night } from './highlighter.js';
+import { hast_to_html, starry_night } from './highlighter.js';
 // Base64 encode to prevent preprocessors from modifying the content
 const to_base64 = (src) => Buffer.from(src, `utf-8`).toString(`base64`);
 // Escape backticks and template literal syntax for embedding in template literals
@@ -19,8 +19,6 @@ export const EXAMPLE_MODULE_PREFIX = `___live_example___`;
 export const EXAMPLE_COMPONENT_PREFIX = `LiveExample___`;
 // Languages that render as live Svelte components (O(1) lookup)
 const LIVE_LANGUAGES = new Set([`svelte`, `html`]);
-// All languages that support the `example` meta (O(1) lookup)
-const EXAMPLE_LANGUAGES = new Set(Object.keys(LANG_TO_SCOPE));
 // Simple tree traversal - finds all nodes of a given type
 const visit = (tree, type, callback) => {
     const walk = (nodes) => {
@@ -64,7 +62,7 @@ function remark(options = {}) {
             };
             const { csr, example, Wrapper } = meta;
             // find code blocks with `example` meta in supported languages
-            if (example && node.lang && EXAMPLE_LANGUAGES.has(node.lang)) {
+            if (example && node.lang && starry_night.flagToScope(node.lang)) {
                 const is_live = LIVE_LANGUAGES.has(node.lang);
                 const wrapper_alias = is_live ? get_wrapper_alias(Wrapper ?? DEFAULT_WRAPPER) : ``;
                 const value = create_example_component(node.value || ``, meta, is_live ? examples.length : -1, // -1 for code-only (no component import needed)
@@ -144,7 +142,10 @@ function format_code(code, meta) {
 }
 function create_example_component(value, meta, index, lang, is_live, wrapper_alias) {
     const code = format_code(value, meta);
-    const tree = starry_night.highlight(code, LANG_TO_SCOPE[lang]);
+    const scope = starry_night.flagToScope(lang);
+    if (!scope)
+        throw new Error(`Unsupported language: ${lang}`);
+    const tree = starry_night.highlight(code, scope);
     // Convert newlines to 
 to prevent bundlers from stripping whitespace
     const highlighted = hast_to_html(tree).replace(/\n/g, `
`);
     // Code-only examples (ts, js, css, etc.) - just render highlighted code block

package/dist/types.d.ts

@@ -160,7 +160,7 @@ export interface MultiSelectProps<T extends Option = Option> extends MultiSelect
     disabled?: boolean;
     disabledInputTitle?: string;
     duplicateOptionMsg?: string;
-    duplicates?: boolean;
+    duplicates?: boolean | `case-insensitive`;
     keepSelectedInDropdown?: false | `plain` | `checkboxes`;
     key?: (opt: T) => unknown;
     filterFunc?: (opt: T, searchText: string) => boolean;

package/dist/utils.d.ts

@@ -5,5 +5,6 @@ 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 const get_option_key: (opt: Option) => unknown;
 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

@@ -25,6 +25,10 @@ export const get_label = (opt) => {
     }
     return `${opt}`;
 };
+// Generate a unique key for an option, preserving value identity
+// For object options: uses value if defined, otherwise label (no case normalization)
+// For primitives: the primitive itself
+export const get_option_key = (opt) => is_object(opt) ? opt.value ?? get_label(opt) : 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

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.6.0",
+  "version": "11.6.1",
   "type": "module",
   "scripts": {
     "dev": "vite dev",