svelte-multiselect 11.5.1 → 11.6.0

package/dist/Nav.svelte

@@ -1,38 +1,73 @@
-<script
-  lang="ts"
-  generics="Route extends string | [string, string] | [string, string[]]"
->import { click_outside } from './attachments';
+<script lang="ts">import { click_outside, tooltip } from './attachments';
 import Icon from './Icon.svelte';
-let { routes = [], children, link, menu_props, link_props, page, labels, ...rest } = $props();
+import { get_uuid } from './utils';
+let { routes = [], children, item, link, menu_props, link_props, page, labels, tooltips, tooltip_options, breakpoint = 767, onnavigate, onopen, onclose, ...rest } = $props();
 let is_open = $state(false);
 let hovered_dropdown = $state(null);
+let pinned_dropdown = $state(null);
 let focused_item_index = $state(-1);
 let is_touch_device = $state(false);
-const panel_id = `nav-menu-${crypto.randomUUID()}`;
-// Detect touch device
+let is_mobile = $state(false);
+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
 $effect(() => {
-    if (typeof globalThis !== `undefined`) {
-        is_touch_device = `ontouchstart` in globalThis || navigator.maxTouchPoints > 0;
+    if (typeof globalThis === `undefined`)
+        return;
+    is_touch_device = `ontouchstart` in globalThis || navigator.maxTouchPoints > 0;
+    // Handle responsive breakpoint via JS since CSS variables don't work in media queries
+    const check_mobile = () => {
+        is_mobile = globalThis.innerWidth <= breakpoint;
+    };
+    check_mobile();
+    globalThis.addEventListener(`resize`, check_mobile);
+    return () => globalThis.removeEventListener(`resize`, check_mobile);
+});
+// Call onopen/onclose callbacks when menu state changes
+$effect(() => {
+    if (is_open && !prev_is_open) {
+        onopen?.();
     }
+    else if (!is_open && prev_is_open) {
+        onclose?.();
+    }
+    prev_is_open = is_open;
 });
 function close_menus() {
     is_open = false;
     hovered_dropdown = null;
+    pinned_dropdown = null;
     focused_item_index = -1;
 }
 function toggle_dropdown(href, focus_first = false) {
-    const is_opening = hovered_dropdown !== href;
-    hovered_dropdown = hovered_dropdown === href ? null : href;
+    const is_opening = pinned_dropdown !== href;
+    pinned_dropdown = is_opening ? href : null;
+    hovered_dropdown = is_opening ? href : null;
     focused_item_index = is_opening && focus_first ? 0 : -1;
     // Focus management for keyboard users
     if (is_opening && focus_first) {
         setTimeout(() => {
-            const dropdown = document.querySelector(`.dropdown[data-href="${href}"]`);
-            const first_link = dropdown?.querySelector(`[role="menuitem"]`);
-            first_link?.focus();
+            document
+                .querySelector(`.dropdown[data-href="${CSS.escape(href)}"] [role="menuitem"]`)
+                ?.focus();
         }, 0);
     }
 }
+function handle_dropdown_mouseenter(href) {
+    if (is_touch_device)
+        return;
+    const is_this_pinned = pinned_dropdown === href;
+    if (pinned_dropdown && !is_this_pinned)
+        pinned_dropdown = null;
+    hovered_dropdown = href;
+}
+function handle_dropdown_focusin(href) {
+    const is_this_pinned = pinned_dropdown === href;
+    if (pinned_dropdown && !is_this_pinned)
+        pinned_dropdown = null;
+    hovered_dropdown = href;
+}
 function onkeydown(event) {
     if (event.key === `Escape`)
         close_menus();
@@ -44,18 +79,18 @@ function handle_dropdown_keydown(event, href, sub_routes) {
         toggle_dropdown(href, true);
         return;
     }
+    // Check if dropdown is open (either via hover or pinned)
+    const is_open = hovered_dropdown === href || pinned_dropdown === href;
     // Arrow key navigation within open dropdown
-    if (hovered_dropdown === href && (key === `ArrowDown` || key === `ArrowUp`)) {
+    if (is_open && (key === `ArrowDown` || key === `ArrowUp`)) {
         event.preventDefault();
         const direction = key === `ArrowDown` ? 1 : -1;
-        const new_index = Math.max(0, Math.min(sub_routes.length - 1, focused_item_index + direction));
-        focused_item_index = new_index;
-        const dropdown = document.querySelector(`.dropdown[data-href="${href}"]`);
-        const links = dropdown?.querySelectorAll(`[role="menuitem"]`);
-        links?.[new_index]?.focus();
+        focused_item_index = Math.max(0, Math.min(sub_routes.length - 1, focused_item_index + direction));
+        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);
     }
@@ -64,14 +99,14 @@ function handle_dropdown_item_keydown(event, href) {
     if (event.key === `Escape`) {
         event.preventDefault();
         close_menus();
-        // Return focus to dropdown toggle button
         document
-            .querySelector(`.dropdown[data-href="${href}"]`)
-            ?.querySelector(`[data-dropdown-toggle]`)
+            .querySelector(`.dropdown[data-href="${href}"] [data-dropdown-toggle]`)
             ?.focus();
     }
 }
 function is_current(path) {
+    if (!path)
+        return undefined;
     if (path === `/`)
         return page?.url.pathname === `/` ? `page` : undefined;
     // Match exact path or path followed by / to avoid partial matches
@@ -83,34 +118,109 @@ function is_current(path) {
 }
 const is_child_current = (sub_routes) => sub_routes.some((child_path) => is_current(child_path) === `page`);
 function format_label(text, remove_parent = false) {
+    if (!text)
+        return { label: ``, style: `` };
     const custom_label = labels?.[text];
     if (custom_label)
         return { label: custom_label, style: `` };
     if (remove_parent)
         text = text.split(`/`).filter(Boolean).pop() ?? text;
-    const label = text.replace(/^\//, ``).replaceAll(`-`, ` `);
-    return { label, style: `text-transform: capitalize` };
+    let label = text.replace(/^\//, ``).replaceAll(`-`, ` `);
+    // Handle root path '/' which becomes empty after stripping
+    if (!label && text === `/`)
+        label = `Home`;
+    return { label, style: label ? `text-transform: capitalize` : `` };
 }
+// Normalize all route formats to NavRouteObject
 function parse_route(route) {
     if (typeof route === `string`)
-        return { href: route, label: route };
-    const [first, second] = route;
-    return Array.isArray(second)
-        ? { href: first, label: first, children: second }
-        : { href: first, label: second };
+        return { href: route };
+    if (Array.isArray(route)) {
+        const [href, second] = route;
+        return Array.isArray(second)
+            ? { href, children: second }
+            : { href, label: second };
+    }
+    return route;
+}
+function get_tooltip(route) {
+    // Priority: disabled message > route.tooltip > tooltips[href]
+    if (typeof route.disabled === `string`) {
+        return tooltip({ ...tooltip_options, content: route.disabled });
+    }
+    const content = route.tooltip ?? tooltips?.[route.href];
+    if (!content)
+        return undefined;
+    // Support both string (content only) and object (full options) formats
+    const opts = typeof content === `string` ? { content } : content;
+    return tooltip({ ...tooltip_options, ...opts });
+}
+// Handle link click with onnavigate callback
+function handle_link_click(event, route) {
+    if (route.disabled) {
+        event.preventDefault();
+        return;
+    }
+    if (onnavigate) {
+        const result = onnavigate({ href: route.href, event, route });
+        if (result === false) {
+            event.preventDefault();
+            return;
+        }
+    }
+    close_menus();
+}
+// Get external link attributes
+function get_external_attrs(route) {
+    if (!route.external)
+        return {};
+    return { target: `_blank`, rel: `noopener noreferrer` };
 }
 </script>
 
 <svelte:window {onkeydown} />
 
+<!-- Default item rendering snippet for escape hatch -->
+{#snippet default_item_render(
+  parsed_route: NavRouteObject,
+  formatted: { label: string; style: string },
+  item_tooltip: ReturnType<typeof tooltip> | undefined,
+)}
+  {@const is_disabled = Boolean(parsed_route.disabled)}
+  {#if is_disabled}
+    <span
+      class="disabled {parsed_route.class ?? ``}"
+      style={`${formatted.style}; ${parsed_route.style ?? ``}`}
+      aria-disabled="true"
+      {@attach item_tooltip}
+    >{@html formatted.label}</span>
+  {:else if link}
+    {@render link({ href: parsed_route.href, label: formatted.label })}
+  {:else}
+    <a
+      href={parsed_route.href}
+      aria-current={is_current(parsed_route.href)}
+      onclick={(event) => handle_link_click(event, parsed_route)}
+      class={parsed_route.class}
+      {...link_props}
+      {...get_external_attrs(parsed_route)}
+      style={`${formatted.style}; ${link_props?.style ?? ``}; ${parsed_route.style ?? ``}`}
+      {@attach item_tooltip}
+    >
+      {@html formatted.label}
+    </a>
+  {/if}
+{/snippet}
+
 <nav
   {...rest}
+  class:mobile={is_mobile}
   {@attach click_outside({ callback: close_menus })}
 >
   <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}
@@ -129,104 +239,161 @@ function parse_route(route) {
     {onkeydown}
     {...menu_props}
   >
-    {#each routes as route (JSON.stringify(route))}
-      {@const { href, label, children: sub_routes } = parse_route(route)}
+    {#each routes as
+      route,
+      route_idx
+      (`${route_idx}-${
+        typeof route === `string`
+          ? route
+          : Array.isArray(route)
+          ? route[0]
+          : (route.href ?? `sep-${route_idx}`)
+      }`)
+    }
+      {@const parsed_route = parse_route(route)}
+      {@const formatted = format_label(parsed_route.label ?? parsed_route.href)}
+      {@const sub_routes = parsed_route.children}
+      {@const is_active = is_current(parsed_route.href) === `page`}
+      {@const is_dropdown = Boolean(sub_routes)}
+      {@const is_right = parsed_route.align === `right`}
+      {@const item_tooltip = get_tooltip(parsed_route)}
 
-      {#if sub_routes}
+      <!-- Separator-only item -->
+      {#if parsed_route.separator && !parsed_route.href}
+        <div class="separator" role="separator"></div>
+      {:else if sub_routes}
         <!-- Dropdown menu item -->
-        {@const parent = format_label(label)}
         {@const child_is_active = is_child_current(sub_routes)}
-        {@const parent_page_exists = sub_routes.includes(href)}
-        {@const filtered_sub_routes = sub_routes.filter((route) => route !== href)}
+        {@const parent_page_exists = sub_routes.includes(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}
-          data-href={href}
+          class:align-right={is_right}
+          data-href={parsed_route.href}
           role="group"
           aria-current={child_is_active ? `true` : undefined}
-          onmouseenter={() => !is_touch_device && (hovered_dropdown = href)}
-          onmouseleave={() => !is_touch_device && (hovered_dropdown = null)}
-          onfocusin={() => (hovered_dropdown = href)}
+          onmouseenter={() => handle_dropdown_mouseenter(parsed_route.href)}
+          onmouseleave={() => {
+            if (!is_touch_device && !is_pinned) hovered_dropdown = null
+          }}
+          onfocusin={() => handle_dropdown_focusin(parsed_route.href)}
           onfocusout={(event) => {
             const next = event.relatedTarget as Node | null
             if (!next || !(event.currentTarget as HTMLElement).contains(next)) {
-              hovered_dropdown = null
+              if (!is_pinned) hovered_dropdown = null
             }
           }}
         >
           <div>
-            {#if parent_page_exists}
-              {@const { label, style } = parent}
-              <a {href} aria-current={is_current(href)} onclick={close_menus} {style}>
-                {@html label}
+            {#if parsed_route.disabled}
+              <span
+                class="disabled {parsed_route.class ?? ``}"
+                style={`${formatted.style}; ${parsed_route.style ?? ``}`}
+                aria-disabled="true"
+                {@attach item_tooltip}
+              >{@html formatted.label}</span>
+            {:else if parent_page_exists}
+              <a
+                href={parsed_route.href}
+                aria-current={is_current(parsed_route.href)}
+                onclick={(event) => handle_link_click(event, parsed_route)}
+                class={parsed_route.class}
+                style={`${formatted.style}; ${parsed_route.style ?? ``}`}
+                {...get_external_attrs(parsed_route)}
+                {@attach item_tooltip}
+              >
+                {@html formatted.label}
               </a>
             {:else}
-              <span style={parent.style}>{@html parent.label}</span>
+              <span
+                class={parsed_route.class}
+                style={`${formatted.style}; ${parsed_route.style ?? ``}`}
+                {@attach item_tooltip}
+              >{@html formatted.label}</span>
             {/if}
             <button
               type="button"
+              class="dropdown-toggle"
+              class:open={dropdown_open}
               data-dropdown-toggle
-              aria-label="Toggle {parent.label} submenu"
-              aria-expanded={hovered_dropdown === href}
+              aria-label="Toggle {formatted.label} submenu"
+              aria-expanded={dropdown_open}
               aria-haspopup="true"
-              onclick={() => toggle_dropdown(href, false)}
-              onkeydown={(event) => handle_dropdown_keydown(event, href, filtered_sub_routes)}
+              onclick={() => toggle_dropdown(parsed_route.href, false)}
+              onkeydown={(event) =>
+              handle_dropdown_keydown(
+                event,
+                parsed_route.href,
+                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 === href}
+            class:visible={dropdown_open}
             role="menu"
             tabindex="-1"
-            onmouseenter={() => !is_touch_device && (hovered_dropdown = href)}
-            onmouseleave={() => !is_touch_device && (hovered_dropdown = null)}
-            onfocusin={() => (hovered_dropdown = href)}
-            onfocusout={(event) => {
-              const next = event.relatedTarget as Node | null
-              if (!next || !(event.currentTarget as HTMLElement).contains(next)) {
-                hovered_dropdown = null
-              }
+            onmouseenter={() => {
+              if (!is_touch_device) hovered_dropdown = parsed_route.href
             }}
           >
             {#each filtered_sub_routes as child_href (child_href)}
-              {@const child = format_label(child_href, true)}
+              {@const child_formatted = format_label(child_href, true)}
+              {@const child_tooltip = get_tooltip({ href: child_href })}
               {#if link}
-                {@render link({ href: child_href, label: child.label })}
+                {@render link({ href: child_href, label: child_formatted.label })}
               {:else}
                 <a
                   href={child_href}
                   role="menuitem"
                   aria-current={is_current(child_href)}
-                  onclick={close_menus}
-                  onkeydown={(event) => handle_dropdown_item_keydown(event, href)}
+                  onclick={(event) => handle_link_click(event, { href: child_href })}
+                  onkeydown={(event) => handle_dropdown_item_keydown(event, parsed_route.href)}
                   {...link_props}
-                  style={`${child.style}; ${link_props?.style ?? ``}`}
+                  style={`${child_formatted.style}; ${link_props?.style ?? ``}`}
+                  {@attach child_tooltip}
                 >
-                  {@html child.label}
+                  {@html child_formatted.label}
                 </a>
               {/if}
             {/each}
           </div>
         </div>
+        <!-- Separator after dropdown if specified -->
+        {#if parsed_route.separator}
+          <div class="separator" role="separator"></div>
+        {/if}
       {:else}
         <!-- Regular link item -->
-        {@const regular = format_label(label)}
-        {#if link}
-          {@render link({ href, label })}
+        {#if item}
+          <!-- User-provided item snippet with render_default escape hatch -->
+          {#snippet render_default_snippet()}
+            {@render default_item_render(parsed_route, formatted, item_tooltip)}
+          {/snippet}
+          <span class:align-right={is_right}>
+            {@render item({
+          route: parsed_route,
+          href: parsed_route.href,
+          label: formatted.label,
+          is_active,
+          is_dropdown,
+          render_default: render_default_snippet,
+        })}
+          </span>
         {:else}
-          <a
-            {href}
-            aria-current={is_current(href)}
-            onclick={close_menus}
-            {...link_props}
-            style={`${regular.style}; ${link_props?.style ?? ``}`}
-          >
-            {@html regular.label}
-          </a>
+          <span class:align-right={is_right}>
+            {@render default_item_render(parsed_route, formatted, item_tooltip)}
+          </span>
+        {/if}
+        <!-- Separator after item if specified -->
+        {#if parsed_route.separator}
+          <div class="separator" role="separator"></div>
         {/if}
       {/if}
     {/each}
@@ -241,7 +408,10 @@ function parse_route(route) {
     margin: -0.75em auto 1.25em;
     --nav-border-radius: 6pt;
     --nav-surface-bg: light-dark(#fafafa, #1a1a1a);
-    --nav-surface-border: light-dark(rgba(128, 128, 128, 0.25), rgba(200, 200, 200, 0.2));
+    --nav-surface-border: light-dark(
+      rgba(128, 128, 128, 0.25),
+      rgba(200, 200, 200, 0.2)
+    );
     --nav-surface-shadow: light-dark(
       0 2px 8px rgba(0, 0, 0, 0.15),
       0 4px 12px rgba(0, 0, 0, 0.5)
@@ -255,21 +425,50 @@ function parse_route(route) {
     flex-wrap: wrap;
     padding: 0.5em;
   }
-  .menu > a {
-    line-height: 1.3;
-    padding: 1pt 5pt;
+  .menu > span {
+    display: flex;
+    align-items: center;
     border-radius: var(--nav-border-radius);
-    text-decoration: none;
-    color: inherit;
+    background-color: var(--nav-link-bg);
     transition: background-color 0.2s;
   }
-  .menu > a:hover {
-    background-color: var(--nav-link-bg-hover);
+  .menu > span:hover {
+    background-color: var(--nav-link-bg-hover, rgba(0, 0, 0, 0.1));
+  }
+  .menu > span > a {
+    line-height: 1.3;
+    padding: var(--nav-item-padding);
+    text-decoration: none;
+    color: inherit;
   }
-  .menu > a[aria-current='page'] {
+  .menu > span > a[aria-current='page'] {
     color: var(--nav-link-active-color);
   }
-
+  /* Disabled items */
+  .menu .disabled {
+    opacity: var(--nav-disabled-opacity, 0.5);
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+  /* Right-aligned items - only first one gets margin-left: auto */
+  .menu > .align-right,
+  .menu > .dropdown.align-right {
+    margin-left: auto;
+  }
+  .menu > .align-right + .align-right,
+  .menu > .align-right + .dropdown.align-right,
+  .menu > .dropdown.align-right + .align-right,
+  .menu > .dropdown.align-right + .dropdown.align-right {
+    margin-left: 0;
+  }
+  /* Separator */
+  .menu > .separator {
+    width: 1px;
+    height: 1.2em;
+    background-color: var(--nav-separator-color, currentColor);
+    opacity: 0.3;
+    margin: var(--nav-separator-margin, 0 0.25em);
+  }
   /* Dropdown styles */
   .dropdown {
     position: relative;
@@ -282,24 +481,23 @@ function parse_route(route) {
     content: '';
     position: absolute;
     top: 100%;
-    left: 0;
-    right: 0;
-    height: var(--nav-dropdown-margin, 3pt);
+    left: -5pt;
+    right: -5pt;
+    height: calc(var(--nav-dropdown-margin, 2pt) + 5pt);
   }
   .dropdown > div:first-child {
     display: flex;
     align-items: center;
-    gap: 0;
     border-radius: var(--nav-border-radius);
+    background-color: var(--nav-link-bg);
     transition: background-color 0.2s;
   }
   .dropdown > div:first-child:hover {
-    background-color: var(--nav-link-bg-hover);
+    background-color: var(--nav-link-bg-hover, rgba(0, 0, 0, 0.1));
   }
-  .dropdown > div:first-child > a,
-  .dropdown > div:first-child > span {
+  .dropdown > div:first-child > a, .dropdown > div:first-child > span {
     line-height: 1.3;
-    padding: 1pt 5pt;
+    padding: var(--nav-item-padding);
     text-decoration: none;
     color: inherit;
     border-radius: var(--nav-border-radius) 0 0 var(--nav-border-radius);
@@ -308,7 +506,7 @@ function parse_route(route) {
     color: var(--nav-link-active-color);
   }
   .dropdown > div:first-child > button {
-    padding: 1pt 3pt;
+    padding: 2pt 4pt;
     border: none;
     background: transparent;
     color: inherit;
@@ -317,36 +515,50 @@ function parse_route(route) {
     align-items: center;
     justify-content: center;
     border-radius: 0 var(--nav-border-radius) var(--nav-border-radius) 0;
+    outline-offset: -1px;
+    opacity: 0.6;
+    transition: opacity 0.15s, transform 0.2s ease;
+  }
+  .dropdown > div:first-child > button:hover {
+    opacity: 1;
+  }
+  .dropdown > div:first-child > button.open {
+    opacity: 1;
+    transform: rotate(180deg);
+  }
+  .dropdown > div:first-child > button:focus-visible {
+    outline: 2px solid currentColor;
+    outline-offset: -2px;
+    opacity: 1;
   }
   .dropdown > div:last-child {
     position: absolute;
     top: 100%;
     left: 0;
-    margin: var(--nav-dropdown-margin, 3pt 0 0 0);
+    margin: var(--nav-dropdown-margin, 2pt) 0 0 0;
     min-width: max-content;
     background-color: var(--nav-dropdown-bg, var(--nav-surface-bg));
     border: 1px solid var(--nav-dropdown-border-color, var(--nav-surface-border));
     border-radius: var(--nav-border-radius, 6pt);
     box-shadow: var(--nav-dropdown-shadow, var(--nav-surface-shadow));
-    padding: var(--nav-dropdown-padding, 2pt 3pt);
+    padding: var(--nav-dropdown-padding, 3pt 0);
     display: none;
     flex-direction: column;
-    gap: var(--nav-dropdown-gap, 5pt);
     z-index: var(--nav-dropdown-z-index, 100);
   }
   .dropdown > div:last-child.visible {
     display: flex;
   }
   .dropdown > div:last-child a {
-    padding: var(--nav-dropdown-link-padding, 1pt 4pt);
-    border-radius: var(--nav-border-radius);
+    padding: var(--nav-dropdown-link-padding, 2pt 6pt);
     text-decoration: none;
     color: inherit;
     white-space: nowrap;
-    transition: background-color 0.2s;
+    font-size: 0.92em;
+    transition: background-color 0.15s;
   }
   .dropdown > div:last-child a:hover {
-    background-color: var(--nav-link-bg-hover);
+    background-color: var(--nav-link-bg-hover, rgba(0, 0, 0, 0.1));
   }
   .dropdown > div:last-child a[aria-current='page'] {
     color: var(--nav-link-active-color);
@@ -366,79 +578,103 @@ function parse_route(route) {
     z-index: var(--nav-toggle-btn-z-index, 10);
   }
   .burger span {
+    width: 100%;
     height: 0.18rem;
-    background-color: var(--text-color);
+    background-color: var(--text);
     border-radius: 8px;
     transition: all 0.2s linear;
-    transform-origin: 1px;
+    transform-origin: center;
   }
   .burger[aria-expanded='true'] span:first-child {
-    transform: rotate(45deg);
+    transform: translateY(0.4rem) rotate(45deg);
   }
   .burger[aria-expanded='true'] span:nth-child(2) {
     opacity: 0;
   }
   .burger[aria-expanded='true'] span:nth-child(3) {
-    transform: rotate(-45deg);
+    transform: translateY(-0.4rem) rotate(-45deg);
   }
-  /* Mobile styles */
-  @media (max-width: 767px) {
-    .burger {
-      display: flex;
-    }
-    .menu {
-      position: fixed;
-      top: 3rem;
-      left: 1rem;
-      background-color: var(--nav-surface-bg);
-      border: 1px solid var(--nav-surface-border);
-      box-shadow: var(--nav-surface-shadow);
-      opacity: 0;
-      visibility: hidden;
-      transition: all 0.3s ease;
-      z-index: var(--nav-mobile-z-index, 2);
-      flex-direction: column;
-      align-items: stretch;
-      justify-content: start;
-      gap: 0.2em;
-      max-width: 90vw;
-      border-radius: 6px;
-    }
-    .menu.open {
-      opacity: 1;
-      visibility: visible;
-    }
-    .menu > a,
-    .dropdown {
-      padding: 2pt 8pt;
-    }
-
-    /* Mobile dropdown styles - show as expandable section */
-    .dropdown {
-      flex-direction: column;
-      align-items: stretch;
-    }
-    .dropdown > div:first-child {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-    }
-    .dropdown > div:first-child > a,
-    .dropdown > div:first-child > span {
-      flex: 1;
-      border-radius: var(--nav-border-radius);
-    }
-    .dropdown > div:first-child > button {
-      padding: 4pt 8pt;
-      border-radius: var(--nav-border-radius);
-    }
-    .dropdown > div:last-child {
-      position: static;
-      border: none;
-      box-shadow: none;
-      margin-top: 0.25em;
-      padding: 0 0 0 1em;
-      background-color: transparent;
-    }
+  /* Mobile styles - using .mobile class set via JS based on breakpoint prop */
+  nav.mobile .burger {
+    display: flex;
+  }
+  nav.mobile .menu {
+    position: fixed;
+    top: 3rem;
+    left: 1rem;
+    background-color: var(--nav-surface-bg);
+    border: 1px solid var(--nav-surface-border);
+    box-shadow: var(--nav-surface-shadow);
+    opacity: 0;
+    visibility: hidden;
+    transition: all 0.3s ease;
+    z-index: var(--nav-mobile-z-index, 2);
+    flex-direction: column;
+    align-items: stretch;
+    justify-content: start;
+    gap: 0.2em;
+    max-width: 90vw;
+    border-radius: 6px;
+  }
+  nav.mobile .menu.open {
+    opacity: 1;
+    visibility: visible;
+  }
+  nav.mobile .menu > span,
+  nav.mobile .menu > span > a,
+  nav.mobile .dropdown {
+    padding: 2pt 8pt;
+  }
+  /* Mobile separator */
+  nav.mobile .menu > .separator {
+    width: 100%;
+    height: 1px;
+    margin: var(--nav-separator-margin, 0.25em 0);
+  }
+  /* Mobile dropdown styles - show as expandable section */
+  nav.mobile .dropdown {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  nav.mobile .dropdown > div:first-child {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  nav.mobile .dropdown > div:first-child > a,
+  nav.mobile .dropdown > div:first-child > span {
+    flex: 1;
+    border-radius: var(--nav-border-radius);
+  }
+  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: 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 {
+    margin-left: 0;
   }
 </style>