svelte-multiselect 11.5.2 → 11.6.1

package/dist/MultiSelect.svelte.d.ts

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

package/dist/Nav.svelte

@@ -1,12 +1,15 @@
 <script lang="ts">import { click_outside, tooltip } from './attachments';
 import Icon from './Icon.svelte';
-let { routes = [], children, item, link, menu_props, link_props, page, labels, tooltips, tooltip_options, breakpoint = 767, onnavigate, onopen, onclose, ...rest } = $props();
+import { get_uuid } from './utils';
+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);
-const panel_id = `nav-menu-${crypto.randomUUID()}`;
+let hide_timeout = null;
+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
@@ -32,22 +35,49 @@ $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;
     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 open_dropdown(href, from_mouse = false) {
+    if (from_mouse && is_touch_device)
+        return;
+    if (hide_timeout)
+        clearTimeout(hide_timeout);
+    if (pinned_dropdown && pinned_dropdown !== href)
+        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`)
         close_menus();
@@ -59,15 +89,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 +109,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 +230,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 +257,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 +275,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 +287,13 @@ 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={() => 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)) {
-              hovered_dropdown = null
+              if (!is_pinned) hovered_dropdown = null
             }
           }}
         >
@@ -287,9 +326,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,25 +340,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={() => 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)}
@@ -382,9 +413,12 @@ 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), 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 +432,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, 1pt 4pt);
     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 +488,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, 1pt 4pt);
     text-decoration: none;
     color: inherit;
     border-radius: var(--nav-border-radius) 0 0 var(--nav-border-radius);
@@ -476,7 +513,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 +523,52 @@ 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);
-    min-width: max-content;
+    left: var(--nav-dropdown-left, 0);
+    right: var(--nav-dropdown-right, auto);
+    margin: var(--nav-dropdown-margin, 2pt) 0 0 0;
+    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);
     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 +659,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;
@@ -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

@@ -1,4 +1,6 @@
 import { type Attachment } from 'svelte/attachments';
+import { get_uuid } from './utils';
+export { get_uuid };
 declare global {
     interface CSS {
         highlights: HighlightRegistry;
@@ -62,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

@@ -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
@@ -419,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`)
@@ -440,13 +568,13 @@ 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);
                 // 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;
@@ -462,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);
                 [
@@ -575,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);
         }