svelte-multiselect 11.5.1 → 11.5.2

package/dist/Nav.svelte.d.ts

@@ -1,42 +1,43 @@
 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[]]>(): {
-    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[]]> {
-    props(): ReturnType<typeof $$render<Route>>['props'];
-    events(): ReturnType<typeof $$render<Route>>['events'];
-    slots(): ReturnType<typeof $$render<Route>>['slots'];
-    bindings(): "";
-    exports(): {};
+import { type TooltipOptions } from './attachments';
+import type { NavRoute, NavRouteObject } from './types';
+interface ItemSnippetParams {
+    route: NavRouteObject;
+    href: string;
+    label: string;
+    is_active: boolean;
+    is_dropdown: boolean;
+    render_default: Snippet;
 }
-interface $$IsomorphicComponent {
-    new <Route extends 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[]]>(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[]]> = InstanceType<typeof Nav<Route>>;
+type $$ComponentProps = {
+    routes: NavRoute[];
+    children?: Snippet<[{
+        is_open: boolean;
+        panel_id: string;
+        routes: NavRoute[];
+    }]>;
+    item?: Snippet<[ItemSnippetParams]>;
+    link?: Snippet<[{
+        href: string;
+        label: string;
+    }]>;
+    menu_props?: HTMLAttributes<HTMLDivElement>;
+    link_props?: HTMLAttributes<HTMLAnchorElement>;
+    page?: Page;
+    labels?: Record<string, string>;
+    tooltips?: Record<string, string | Omit<TooltipOptions, `disabled`>>;
+    tooltip_options?: Omit<TooltipOptions, `content`>;
+    breakpoint?: number;
+    onnavigate?: (data: {
+        href: string;
+        event: MouseEvent;
+        route: NavRouteObject;
+    }) => void | false;
+    onopen?: () => void;
+    onclose?: () => void;
+} & Omit<HTMLAttributes<HTMLElementTagNameMap[`nav`]>, `children`>;
+declare const Nav: import("svelte").Component<$$ComponentProps, {}, "">;
+type Nav = ReturnType<typeof Nav>;
 export default Nav;

package/dist/Wiggle.svelte

@@ -1,6 +1,11 @@
 <script lang="ts">import { Spring } from 'svelte/motion';
-let { wiggle = $bindable(false), angle = 0, scale = 1, dx = 0, dy = 0, duration = 200, stiffness = 0.05, damping = 0.1, children, } = $props();
-const store = Spring.of(() => (wiggle ? { scale, angle, dx, dy } : { angle: 0, scale: 1, dx: 0, dy: 0 }), { stiffness, damping });
+let { wiggle = $bindable(false), angle = 0, scale = 1, dx = 0, dy = 0, duration = 200, spring_options = $bindable({ stiffness: 0.05, damping: 0.1 }), children, ...rest } = $props();
+const store = Spring.of(() => (wiggle ? { scale, angle, dx, dy } : { angle: 0, scale: 1, dx: 0, dy: 0 }), spring_options);
+// update spring physics when options change
+$effect(() => {
+    store.stiffness = spring_options.stiffness;
+    store.damping = spring_options.damping;
+});
 $effect.pre(() => {
     if (wiggle)
         setTimeout(() => (wiggle = false), duration);
@@ -8,6 +13,8 @@ $effect.pre(() => {
 </script>
 
 <span
+  {...rest}
+  style:display="inline-block"
   style:transform="rotate({store.current.angle}deg) scale({store.current.scale})
   translate({store.current.dx}px, {store.current.dy}px)"
 >

package/dist/Wiggle.svelte.d.ts

@@ -1,15 +1,18 @@
 import type { Snippet } from 'svelte';
-type $$ComponentProps = {
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = HTMLAttributes<HTMLSpanElement> & {
     wiggle?: boolean;
     angle?: number;
     scale?: number;
     dx?: number;
     dy?: number;
     duration?: number;
-    stiffness?: number;
-    damping?: number;
+    spring_options?: {
+        stiffness: number;
+        damping: number;
+    };
     children?: Snippet;
 };
-declare const Wiggle: import("svelte").Component<$$ComponentProps, {}, "wiggle">;
+declare const Wiggle: import("svelte").Component<$$ComponentProps, {}, "wiggle" | "spring_options">;
 type Wiggle = ReturnType<typeof Wiggle>;
 export default Wiggle;

package/dist/attachments.d.ts

@@ -56,8 +56,12 @@ export interface TooltipOptions {
     content?: string;
     placement?: `top` | `bottom` | `left` | `right`;
     delay?: number;
-    disabled?: boolean;
+    hide_delay?: number;
+    disabled?: boolean | `touch-devices`;
     style?: string;
+    show_arrow?: boolean;
+    offset?: number;
+    allow_html?: boolean;
 }
 export declare const tooltip: (options?: TooltipOptions) => Attachment;
 export type ClickOutsideConfig<T extends HTMLElement> = {

package/dist/attachments.js

@@ -358,35 +358,46 @@ function clear_tooltip() {
     if (hide_timeout)
         clearTimeout(hide_timeout);
     if (current_tooltip) {
+        // Remove aria-describedby from the trigger element
+        current_tooltip._owner?.removeAttribute(`aria-describedby`);
         current_tooltip.remove();
         current_tooltip = null;
     }
 }
 export const tooltip = (options = {}) => (node) => {
-    // Handle null/undefined elements
-    if (!node || !(node instanceof HTMLElement))
+    // SSR guard + element validation
+    if (typeof document === `undefined` || !(node instanceof HTMLElement))
         return;
-    // Handle null/undefined options
-    const safe_options = options || {};
     const cleanup_functions = [];
+    // Handle disabled option
+    if (options.disabled === true)
+        return;
+    // Track current input method for 'touch-devices' option (runtime detection, not capability sniffing)
+    // This allows tooltips on hybrid devices (Surface, iPad with mouse) when using mouse/stylus
+    let last_pointer_type = `mouse`;
+    const track_pointer = (event) => {
+        last_pointer_type = event.pointerType;
+    };
+    if (options.disabled === `touch-devices`) {
+        document.addEventListener(`pointerdown`, track_pointer, true);
+        cleanup_functions.push(() => document.removeEventListener(`pointerdown`, track_pointer, true));
+    }
     function setup_tooltip(element) {
-        if (!element || safe_options.disabled)
-            return;
         // Use let so content can be updated reactively
-        let content = safe_options.content || element.title ||
+        let content = options.content || element.title ||
             element.getAttribute(`aria-label`) || element.getAttribute(`data-title`);
         if (!content)
             return;
         // Store original title and remove it to prevent default tooltip
         // Only store title if we're not using custom content
-        if (element.title && !safe_options.content) {
+        if (element.title && !options.content) {
             element.setAttribute(`data-original-title`, element.title);
             element.removeAttribute(`title`);
         }
         // Reactively update content when tooltip attributes change
         const tooltip_attrs = [`title`, `aria-label`, `data-title`];
         const observer = new MutationObserver((mutations) => {
-            if (safe_options.content)
+            if (options.content)
                 return; // custom content takes precedence
             for (const { type, attributeName } of mutations) {
                 if (type !== `attributes` || !attributeName)
@@ -408,20 +419,33 @@ export const tooltip = (options = {}) => (node) => {
                 content = new_content;
                 // Only update tooltip if this element owns it
                 if (current_tooltip?._owner === element) {
-                    current_tooltip.innerHTML = content.replace(/\r/g, `<br/>`);
+                    if (options.allow_html !== false) {
+                        current_tooltip.innerHTML = content.replace(/\r/g, `<br/>`);
+                    }
+                    else {
+                        current_tooltip.textContent = content;
+                    }
                 }
             }
         });
         observer.observe(element, { attributes: true, attributeFilter: tooltip_attrs });
         function show_tooltip() {
+            // Skip tooltip on touch input when 'touch-devices' option is set
+            if (options.disabled === `touch-devices` && last_pointer_type === `touch`)
+                return;
             clear_tooltip();
             show_timeout = setTimeout(() => {
-                const tooltip = document.createElement(`div`);
-                tooltip.className = `custom-tooltip`;
-                const placement = safe_options.placement || `bottom`;
-                tooltip.setAttribute(`data-placement`, placement);
+                const tooltip_el = document.createElement(`div`);
+                tooltip_el.className = `custom-tooltip`;
+                const placement = options.placement || `bottom`;
+                tooltip_el.setAttribute(`data-placement`, placement);
+                // Accessibility: link tooltip to trigger element
+                const tooltip_id = `tooltip-${crypto.randomUUID()}`;
+                tooltip_el.id = tooltip_id;
+                tooltip_el.setAttribute(`role`, `tooltip`);
+                element.setAttribute(`aria-describedby`, tooltip_id);
                 // Apply base styles
-                tooltip.style.cssText = `
+                tooltip_el.style.cssText = `
           position: absolute; z-index: 9999; opacity: 0;
           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;
@@ -429,16 +453,22 @@ export const tooltip = (options = {}) => (node) => {
           filter: var(--tooltip-shadow, drop-shadow(0 2px 8px rgba(0,0,0,0.25))); transition: opacity 0.15s ease-out;
         `;
                 // Apply custom styles if provided (these will override base styles due to CSS specificity)
-                if (safe_options.style) {
+                if (options.style) {
                     // Parse and apply custom styles as individual properties for better control
-                    const custom_styles = safe_options.style.split(`;`).filter((style) => style.trim());
+                    const custom_styles = options.style.split(`;`).filter((style) => style.trim());
                     custom_styles.forEach((style) => {
                         const [property, value] = style.split(`:`).map((s) => s.trim());
                         if (property && value)
-                            tooltip.style.setProperty(property, value);
+                            tooltip_el.style.setProperty(property, value);
                     });
                 }
-                tooltip.innerHTML = content?.replace(/\r/g, `<br/>`) ?? ``;
+                // 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/>`) ?? ``;
+                }
+                else {
+                    tooltip_el.textContent = content ?? ``;
+                }
                 // Mirror CSS custom properties from the trigger node onto the tooltip element
                 const trigger_styles = getComputedStyle(element);
                 [
@@ -455,97 +485,100 @@ export const tooltip = (options = {}) => (node) => {
                 ].forEach((name) => {
                     const value = trigger_styles.getPropertyValue(name).trim();
                     if (value)
-                        tooltip.style.setProperty(name, value);
+                        tooltip_el.style.setProperty(name, value);
                 });
                 // Append early so we can read computed border styles for arrow border
-                document.body.appendChild(tooltip);
-                // Arrow elements: optional border triangle behind fill triangle
-                const tooltip_styles = getComputedStyle(tooltip);
-                const arrow = document.createElement(`div`);
-                arrow.className = `custom-tooltip-arrow`;
-                arrow.style.cssText =
-                    `position: absolute; width: 0; height: 0; pointer-events: none;`;
-                const arrow_size_raw = trigger_styles.getPropertyValue(`--tooltip-arrow-size`)
-                    .trim();
-                const arrow_size_num = Number.parseInt(arrow_size_raw || ``, 10);
-                const arrow_px = Number.isFinite(arrow_size_num) ? arrow_size_num : 6;
-                const border_color = tooltip_styles.borderTopColor;
-                const border_width_num = Number.parseFloat(tooltip_styles.borderTopWidth || `0`);
-                const has_border = !!border_color && border_color !== `rgba(0, 0, 0, 0)` &&
-                    border_width_num > 0;
-                const maybe_append_border_arrow = () => {
-                    if (!has_border)
-                        return;
-                    const border_arrow = document.createElement(`div`);
-                    border_arrow.className = `custom-tooltip-arrow-border`;
-                    border_arrow.style.cssText =
+                document.body.appendChild(tooltip_el);
+                // Create arrow elements only if show_arrow is not false
+                if (options.show_arrow !== false) {
+                    const tooltip_styles = getComputedStyle(tooltip_el);
+                    const arrow = document.createElement(`div`);
+                    arrow.className = `custom-tooltip-arrow`;
+                    arrow.style.cssText =
                         `position: absolute; width: 0; height: 0; pointer-events: none;`;
-                    const border_size = arrow_px + (border_width_num * 1.4);
+                    const arrow_size_raw = trigger_styles.getPropertyValue(`--tooltip-arrow-size`)
+                        .trim();
+                    const arrow_size_num = Number.parseInt(arrow_size_raw || ``, 10);
+                    const arrow_px = Number.isFinite(arrow_size_num) ? arrow_size_num : 6;
+                    const border_color = tooltip_styles.borderTopColor;
+                    const border_width_num = Number.parseFloat(tooltip_styles.borderTopWidth || `0`);
+                    const has_border = !!border_color && border_color !== `rgba(0, 0, 0, 0)` &&
+                        border_width_num > 0;
+                    // Helper to create border arrow behind fill arrow
+                    const append_border_arrow = () => {
+                        if (!has_border)
+                            return;
+                        const border_arrow = document.createElement(`div`);
+                        border_arrow.className = `custom-tooltip-arrow-border`;
+                        border_arrow.style.cssText =
+                            `position: absolute; width: 0; height: 0; pointer-events: none;`;
+                        const border_size = arrow_px + (border_width_num * 1.4);
+                        if (placement === `top`) {
+                            border_arrow.style.left = `calc(50% - ${border_size}px)`;
+                            border_arrow.style.bottom = `-${border_size}px`;
+                            border_arrow.style.borderLeft = `${border_size}px solid transparent`;
+                            border_arrow.style.borderRight = `${border_size}px solid transparent`;
+                            border_arrow.style.borderTop = `${border_size}px solid ${border_color}`;
+                        }
+                        else if (placement === `left`) {
+                            border_arrow.style.top = `calc(50% - ${border_size}px)`;
+                            border_arrow.style.right = `-${border_size}px`;
+                            border_arrow.style.borderTop = `${border_size}px solid transparent`;
+                            border_arrow.style.borderBottom = `${border_size}px solid transparent`;
+                            border_arrow.style.borderLeft = `${border_size}px solid ${border_color}`;
+                        }
+                        else if (placement === `right`) {
+                            border_arrow.style.top = `calc(50% - ${border_size}px)`;
+                            border_arrow.style.left = `-${border_size}px`;
+                            border_arrow.style.borderTop = `${border_size}px solid transparent`;
+                            border_arrow.style.borderBottom = `${border_size}px solid transparent`;
+                            border_arrow.style.borderRight = `${border_size}px solid ${border_color}`;
+                        }
+                        else { // bottom
+                            border_arrow.style.left = `calc(50% - ${border_size}px)`;
+                            border_arrow.style.top = `-${border_size}px`;
+                            border_arrow.style.borderLeft = `${border_size}px solid transparent`;
+                            border_arrow.style.borderRight = `${border_size}px solid transparent`;
+                            border_arrow.style.borderBottom = `${border_size}px solid ${border_color}`;
+                        }
+                        tooltip_el.appendChild(border_arrow);
+                    };
+                    // Style and position fill arrow
                     if (placement === `top`) {
-                        border_arrow.style.left = `calc(50% - ${border_size}px)`;
-                        border_arrow.style.bottom = `-${border_size}px`;
-                        border_arrow.style.borderLeft = `${border_size}px solid transparent`;
-                        border_arrow.style.borderRight = `${border_size}px solid transparent`;
-                        border_arrow.style.borderTop = `${border_size}px solid ${border_color}`;
+                        arrow.style.left = `calc(50% - ${arrow_px}px)`;
+                        arrow.style.bottom = `-${arrow_px}px`;
+                        arrow.style.borderLeft = `${arrow_px}px solid transparent`;
+                        arrow.style.borderRight = `${arrow_px}px solid transparent`;
+                        arrow.style.borderTop = `${arrow_px}px solid var(--tooltip-bg, #333)`;
                     }
                     else if (placement === `left`) {
-                        border_arrow.style.top = `calc(50% - ${border_size}px)`;
-                        border_arrow.style.right = `-${border_size}px`;
-                        border_arrow.style.borderTop = `${border_size}px solid transparent`;
-                        border_arrow.style.borderBottom = `${border_size}px solid transparent`;
-                        border_arrow.style.borderLeft = `${border_size}px solid ${border_color}`;
+                        arrow.style.top = `calc(50% - ${arrow_px}px)`;
+                        arrow.style.right = `-${arrow_px}px`;
+                        arrow.style.borderTop = `${arrow_px}px solid transparent`;
+                        arrow.style.borderBottom = `${arrow_px}px solid transparent`;
+                        arrow.style.borderLeft = `${arrow_px}px solid var(--tooltip-bg, #333)`;
                     }
                     else if (placement === `right`) {
-                        border_arrow.style.top = `calc(50% - ${border_size}px)`;
-                        border_arrow.style.left = `-${border_size}px`;
-                        border_arrow.style.borderTop = `${border_size}px solid transparent`;
-                        border_arrow.style.borderBottom = `${border_size}px solid transparent`;
-                        border_arrow.style.borderRight = `${border_size}px solid ${border_color}`;
+                        arrow.style.top = `calc(50% - ${arrow_px}px)`;
+                        arrow.style.left = `-${arrow_px}px`;
+                        arrow.style.borderTop = `${arrow_px}px solid transparent`;
+                        arrow.style.borderBottom = `${arrow_px}px solid transparent`;
+                        arrow.style.borderRight = `${arrow_px}px solid var(--tooltip-bg, #333)`;
                     }
                     else { // bottom
-                        border_arrow.style.left = `calc(50% - ${border_size}px)`;
-                        border_arrow.style.top = `-${border_size}px`;
-                        border_arrow.style.borderLeft = `${border_size}px solid transparent`;
-                        border_arrow.style.borderRight = `${border_size}px solid transparent`;
-                        border_arrow.style.borderBottom = `${border_size}px solid ${border_color}`;
+                        arrow.style.left = `calc(50% - ${arrow_px}px)`;
+                        arrow.style.top = `-${arrow_px}px`;
+                        arrow.style.borderLeft = `${arrow_px}px solid transparent`;
+                        arrow.style.borderRight = `${arrow_px}px solid transparent`;
+                        arrow.style.borderBottom = `${arrow_px}px solid var(--tooltip-bg, #333)`;
                     }
-                    tooltip.appendChild(border_arrow);
-                };
-                // Create the fill arrow on top
-                if (placement === `top`) {
-                    arrow.style.left = `calc(50% - ${arrow_px}px)`;
-                    arrow.style.bottom = `-${arrow_px}px`;
-                    arrow.style.borderLeft = `${arrow_px}px solid transparent`;
-                    arrow.style.borderRight = `${arrow_px}px solid transparent`;
-                    arrow.style.borderTop = `${arrow_px}px solid var(--tooltip-bg, #333)`;
+                    append_border_arrow();
+                    tooltip_el.appendChild(arrow);
                 }
-                else if (placement === `left`) {
-                    arrow.style.top = `calc(50% - ${arrow_px}px)`;
-                    arrow.style.right = `-${arrow_px}px`;
-                    arrow.style.borderTop = `${arrow_px}px solid transparent`;
-                    arrow.style.borderBottom = `${arrow_px}px solid transparent`;
-                    arrow.style.borderLeft = `${arrow_px}px solid var(--tooltip-bg, #333)`;
-                }
-                else if (placement === `right`) {
-                    arrow.style.top = `calc(50% - ${arrow_px}px)`;
-                    arrow.style.left = `-${arrow_px}px`;
-                    arrow.style.borderTop = `${arrow_px}px solid transparent`;
-                    arrow.style.borderBottom = `${arrow_px}px solid transparent`;
-                    arrow.style.borderRight = `${arrow_px}px solid var(--tooltip-bg, #333)`;
-                }
-                else { // bottom
-                    arrow.style.left = `calc(50% - ${arrow_px}px)`;
-                    arrow.style.top = `-${arrow_px}px`;
-                    arrow.style.borderLeft = `${arrow_px}px solid transparent`;
-                    arrow.style.borderRight = `${arrow_px}px solid transparent`;
-                    arrow.style.borderBottom = `${arrow_px}px solid var(--tooltip-bg, #333)`;
-                }
-                maybe_append_border_arrow();
-                tooltip.appendChild(arrow);
                 // Position tooltip
                 const rect = element.getBoundingClientRect();
-                const tooltip_rect = tooltip.getBoundingClientRect();
-                const margin = 12;
+                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;
@@ -566,22 +599,26 @@ export const tooltip = (options = {}) => (node) => {
                 // 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.style.left = `${left + globalThis.scrollX}px`;
-                tooltip.style.top = `${top + globalThis.scrollY}px`;
+                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.style.opacity = custom_opacity || `1`;
-                current_tooltip = Object.assign(tooltip, { _owner: element });
-            }, safe_options.delay || 100);
+                tooltip_el.style.opacity = custom_opacity || `1`;
+                current_tooltip = Object.assign(tooltip_el, { _owner: element });
+            }, options.delay || 100);
+        }
+        function handle_keydown(event) {
+            if (event.key === `Escape` && current_tooltip?._owner === element)
+                clear_tooltip();
         }
         function hide_tooltip() {
-            clear_tooltip();
-            if (current_tooltip) {
-                current_tooltip.style.opacity = `0`;
-                if (current_tooltip) {
-                    current_tooltip.remove();
-                    current_tooltip = null;
-                }
+            if (show_timeout)
+                clearTimeout(show_timeout);
+            const delay = options.hide_delay ?? 0;
+            if (delay > 0) {
+                hide_timeout = setTimeout(() => clear_tooltip(), delay);
             }
+            else
+                clear_tooltip();
         }
         function handle_scroll(event) {
             // Hide if document or any ancestor scrolls (would move element). Skip internal element scrolls.
@@ -595,10 +632,26 @@ export const tooltip = (options = {}) => (node) => {
         events.forEach((event, idx) => element.addEventListener(event, handlers[idx]));
         // Hide tooltip when user scrolls the page (not element-level scrolls like input fields)
         globalThis.addEventListener(`scroll`, handle_scroll, true);
+        // Add Escape key listener to dismiss tooltip
+        document.addEventListener(`keydown`, handle_keydown);
+        // Watch for element removal from DOM to prevent orphaned tooltips
+        const removal_observer = new MutationObserver((mutations) => {
+            const was_removed = mutations.some((mut) => Array.from(mut.removedNodes).some((node) => node === element || (node instanceof Element && node.contains(element))));
+            if (was_removed && current_tooltip?._owner === element)
+                clear_tooltip();
+        });
+        if (element.parentElement) {
+            removal_observer.observe(element.parentElement, { childList: true, subtree: true });
+        }
         return () => {
             observer.disconnect();
+            removal_observer.disconnect();
             events.forEach((event, idx) => element.removeEventListener(event, handlers[idx]));
             globalThis.removeEventListener(`scroll`, handle_scroll, true);
+            document.removeEventListener(`keydown`, handle_keydown);
+            // Clear tooltip if this element owns it (also removes aria-describedby)
+            if (current_tooltip?._owner === element)
+                clear_tooltip();
             const original_title = element.getAttribute(`data-original-title`);
             if (original_title) {
                 element.setAttribute(`title`, original_title);

package/dist/heading-anchors.d.ts

@@ -0,0 +1,14 @@
+/** @type {() => import('svelte/compiler').PreprocessorGroup} */
+export declare function heading_ids(): {
+    name: string;
+    markup({ content }: {
+        content: string;
+    }): {
+        code: string;
+    };
+};
+export interface HeadingAnchorsOptions {
+    selector?: string;
+    icon_svg?: string;
+}
+export declare const heading_anchors: (options?: HeadingAnchorsOptions) => (node: Element) => (() => void) | undefined;

package/dist/heading-anchors.js

@@ -0,0 +1,120 @@
+// Svelte preprocessor that adds IDs to headings at build time for SSR support
+// This ensures fragment navigation (#heading-id) works on initial page load
+// Match headings in two contexts:
+// 1. Start of line (for .svelte files with formatted HTML)
+// 2. After > (for mdsvex output where HTML is on single line, e.g., "</p> <h2>")
+// 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;
+// 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) {
+    let result = ``;
+    let depth = 0;
+    for (const char of str) {
+        if (char === `{`)
+            depth++;
+        else if (char === `}` && depth > 0)
+            depth--;
+        else if (depth === 0)
+            result += char;
+    }
+    return result;
+}
+// Generate URL-friendly slug from text
+const slugify = (text) => text
+    .toLowerCase()
+    .replace(/\s+/g, `-`)
+    .replace(/[^\w-]/g, ``)
+    .replace(/-+/g, `-`) // collapse multiple dashes
+    .replace(/^-|-$/g, ``); // trim leading/trailing dashes
+/** @type {() => import('svelte/compiler').PreprocessorGroup} */
+export function heading_ids() {
+    return {
+        name: `heading-ids`,
+        markup({ content }) {
+            const seen_ids = new Map();
+            let result = content;
+            const process_heading = (attrs, inner) => {
+                // Skip if already has an id (use ^|\s to avoid matching data-id, aria-id, etc.)
+                if (/(^|\s)id\s*=/.test(attrs))
+                    return null;
+                const text = strip_svelte_expressions(inner.replace(/<[^>]+>/g, ``)).trim();
+                if (!text)
+                    return null;
+                const base_id = slugify(text);
+                if (!base_id)
+                    return null;
+                // Handle duplicates within same file
+                const count = seen_ids.get(base_id) ?? 0;
+                seen_ids.set(base_id, count + 1);
+                return count ? `${base_id}-${count}` : base_id;
+            };
+            // Pass 1: Match headings at start of line (for .svelte files)
+            result = result.replace(heading_regex_line_start, (match, indent, tag, attrs, inner) => {
+                const id = process_heading(attrs, inner);
+                return id ? `${indent}<${tag} id="${id}"${attrs}>${inner}</${tag}>` : match;
+            });
+            // Pass 2: Match headings after closing tag (for mdsvex single-line output)
+            result = result.replace(heading_regex_after_tag, (match, gt, space, tag, attrs, inner) => {
+                const id = process_heading(attrs, inner);
+                return id ? `${gt}${space}<${tag} id="${id}"${attrs}>${inner}</${tag}>` : match;
+            });
+            return { code: result };
+        },
+    };
+}
+// SVG link icon for heading anchors
+const link_svg = `<svg width="16" height="16" viewBox="0 0 16 16" aria-label="Link to heading" role="img"><path d="M7.775 3.275a.75.75 0 0 0 1.06 1.06l1.25-1.25a2 2 0 1 1 2.83 2.83l-2.5 2.5a2 2 0 0 1-2.83 0 .75.75 0 0 0-1.06 1.06 3.5 3.5 0 0 0 4.95 0l2.5-2.5a3.5 3.5 0 0 0-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 0 1 0-2.83l2.5-2.5a2 2 0 0 1 2.83 0 .75.75 0 0 0 1.06-1.06 3.5 3.5 0 0 0-4.95 0l-2.5 2.5a3.5 3.5 0 0 0 4.95 4.95l1.25-1.25a.75.75 0 0 0-1.06-1.06l-1.25 1.25a2 2 0 0 1-2.83 0z" fill="currentColor"/></svg>`;
+// Add anchor link to a single heading element
+function add_anchor_to_heading(heading, icon_svg = link_svg) {
+    if (heading.querySelector(`a[aria-hidden="true"]`))
+        return;
+    if (!heading.id) {
+        // Generate ID from text content (fallback for dynamic headings)
+        const base_id = slugify((heading.textContent ?? ``).trim());
+        if (!base_id)
+            return;
+        // Ensure unique ID in document
+        let counter = 0;
+        while (document.getElementById(counter ? `${base_id}-${counter}` : base_id))
+            counter++;
+        heading.id = counter ? `${base_id}-${counter}` : base_id;
+    }
+    const anchor = document.createElement(`a`);
+    anchor.href = `#${heading.id}`;
+    anchor.setAttribute(`aria-hidden`, `true`);
+    anchor.innerHTML = icon_svg;
+    heading.appendChild(anchor);
+}
+// Svelte 5 attachment that adds anchor links to headings within a container
+// Uses MutationObserver to handle dynamically added headings
+export const heading_anchors = (options = {}) => (node) => {
+    if (typeof document === `undefined`)
+        return;
+    const selector = options.selector ?? `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);
+                }
+            }
+        }
+    });
+    observer.observe(node, { childList: true, subtree: true });
+    return () => observer.disconnect();
+};