@widgetic/design-system 0.5.22 → 0.5.24

package/dist/components/navigation/Breadcrumbs.svelte

@@ -1,385 +1,429 @@
 <script lang="ts">
-  // Svelte Imports
-  import { onMount, onDestroy } from 'svelte';
-
-  // Components Imports
-  import * as Breadcrumb from "../ui/breadcrumb";
-  import * as DropdownMenu from "../ui/dropdown-menu";
-  import * as Tooltip from "../ui/tooltip";
-
-  // Icons Imports
-  // import { IconArrowLeft, IconArrowRight } from '@widgetic/design-system/icons';
-  import { IconArrowLeft, IconArrowRight } from '@tabler/icons-svelte';
-
-  // Types Import
-  import type { BreadcrumbsProps } from './types.js';
-  import { dirForUserText, useTextDirection } from '../textDirection.js';
-
-  // Environment Import
-  // import { browser } from '$app/environment';
-  const browser = typeof window !== 'undefined';
-
-  /***
-   * COMPONENT PROPS
-   **/
-  // class && style props
-  let className = '';
-  export { className as class };
-  export let style = '';
-  // Breadcrumbs
-  export let clientHeight: number = 0;
-  // path settings
-  export let currentPath: BreadcrumbsProps['currentPath'] = [];
-  export let currentPathNames: BreadcrumbsProps['currentPathNames'] = [];
-  // loading settings
-  export let isLoading: BreadcrumbsProps['isLoading'] = false;
-  // navigation settings
-  export let showNavigationButtons: BreadcrumbsProps['showNavigationButtons'] = true;  
-  export let canGoBack: BreadcrumbsProps['canGoBack'] = false;
-  export let canGoForward: BreadcrumbsProps['canGoForward'] = false;
-  // words (tooltips and screen readers): a page that shows this in another language passes its own
-  export let backLabel: string = 'Back';
-  export let forwardLabel: string = 'Forward';
-  export let rootLabel: string = 'Files';
-  export let breadcrumbLabel: string = 'breadcrumb';
-  // event handlers
-  export let onNavigate: BreadcrumbsProps['onNavigate'] = () => {};
-  export let onBack: BreadcrumbsProps['onBack'] = () => {};
-  export let onForward: BreadcrumbsProps['onForward'] = () => {};
-  // debug settings
-  export let showDebugVisualizer: boolean = false;
-
-  // A name a visitor wrote keeps a direction of its own on a right to left screen (a Latin folder name reads left to
-  // right inside it); on a left to right screen no attribute is written and nothing changes.
-  const textDirection = useTextDirection();
-  $: nameDirection = dirForUserText($textDirection);
-
-  /***
-   * COMPONENT STATE VARIABLES
-   **/
-  let navElement: HTMLElement;
-  let headerElement: HTMLElement | null = null;
-  let isDesktop = false;
-  let mediaQuery: MediaQueryList | null = null;
-  let shouldShowEllipsis = false;
-  let availableWidth = 0;
-  let itemsToShow = 0;
-  let breadcrumbsContainer: HTMLElement;
-  let breadcrumbsPositioned = false;
-  let showLogs = false;
-  let showBackTooltip = false;
-  let showForwardTooltip = false;
-  // Calculate how many items we can show based on available width
-  // Assuming each item takes roughly 150px on average (including separator)
-  $: if (availableWidth > 0) {
-    const averageItemWidth = 200; // Adjust this value based on actual measurements
-    const maxItems = Math.floor(availableWidth / averageItemWidth);
-    // Always show at least 2 items (first and last)
-    itemsToShow = Math.max(2, maxItems);
-    shouldShowEllipsis = currentPath?.length > itemsToShow;
-    
-    // Mark breadcrumbs as positioned once we have calculated the available width
-    breadcrumbsPositioned = true;
-  }
-
-  // Only log on mount and significant changes
-  $: if (browser && (currentPath?.length)) {
-    // if(showLogs) console.log('Breadcrumbs significant update:', {
-    //   currentPath,
-    //   currentPathNames,
-    //   shouldShowEllipsis,
-    //   availableWidth,
-    //   itemsToShow,
-    //   breadcrumbsPositioned
-    // });
-  }
-
-  /***
-   * COMPONENT METHODS
-   **/
-  function updateAvailableWidth() {
-    if (!browser || !navElement || !breadcrumbsContainer) return;
-
-    // First try to get the header from FileBrowser structure
-    const containerElement = navElement.closest('header') || navElement;
-    headerElement = containerElement;
-
-    // Get all the measurements we need
-    const measurements = {
-      container: containerElement.getBoundingClientRect(),
-      navButtons: showNavigationButtons 
-        ? navElement.querySelector('.nav-buttons')?.getBoundingClientRect() 
-        : null,
-      rightContent: containerElement.querySelector('.pe-5, .pr-5, .right-content')?.getBoundingClientRect(),
-      breadcrumbs: breadcrumbsContainer.getBoundingClientRect()
-    };
-
-    // Calculate fixed spaces
-    const leftOffset = measurements.navButtons ? measurements.navButtons.width : 0;
-    const rightOffset = measurements.rightContent ? measurements.rightContent.width : 24;
-    
-    // Calculate available width for breadcrumbs
-    availableWidth = measurements.container.width - leftOffset - rightOffset - 72; // 72px for padding
-  }
-
-  function handleMediaQuery(e: MediaQueryListEvent | MediaQueryList) {
-    isDesktop = e.matches;
-  }
-
-  $: showFullPath = isDesktop;
-
-  function handleClick(event: MouseEvent, index: number) {
-    event.preventDefault();
-    if (!isLoading) {
-      onNavigate(index);
-    }
-  }
-
-  function handleKeyDown(event: KeyboardEvent, index: number) {
-    if (event.key === 'Enter') {
-      event.preventDefault();
-      if (!isLoading) {
-        onNavigate(index);
-      }
-    }
-  }
-
-  /***
-   * COMPONENT LIFECYCLE METHODS
-   **/
-  onMount(() => {
-    if (!browser) return;
-
-    mediaQuery = window.matchMedia('(min-width: 768px)');
-    handleMediaQuery(mediaQuery);
-    mediaQuery.addEventListener('change', handleMediaQuery);
-
-    // Get the header from FileBrowser structure
-    if (navElement) {
-      const header = navElement.closest('header');
-      if (header) {
-        headerElement = header;
-      }
-    }
-
-    // Initial width calculation
-    updateAvailableWidth();
-
-    // Set up resize observer
-    const resizeObserver = new ResizeObserver(() => {
-      updateAvailableWidth();
-    });
-
-    resizeObserver.observe(navElement);
-    if (headerElement) {
-      resizeObserver.observe(headerElement);
-    }
-
-    return () => {
-      resizeObserver.disconnect();
-    };
-  });
-
-  onDestroy(() => {
-    if (browser && mediaQuery) {
-      mediaQuery.removeEventListener('change', handleMediaQuery);
-    }
-  });
+	// Svelte Imports
+	import { onMount, onDestroy } from 'svelte';
+
+	// Components Imports
+	import * as Breadcrumb from '../ui/breadcrumb';
+	import * as DropdownMenu from '../ui/dropdown-menu';
+	import * as Tooltip from '../ui/tooltip';
+	import { IconButton } from '../ui/icon-button';
+
+	// Icons Imports
+	// import { IconArrowLeft, IconArrowRight } from '@widgetic/design-system/icons';
+	import { IconArrowLeft, IconArrowRight } from '@tabler/icons-svelte';
+
+	// Types Import
+	import type { BreadcrumbsProps } from './types.js';
+	import { dirForUserText, useTextDirection } from '../textDirection.js';
+	import { breadcrumbsAvailableWidthPx } from './breadcrumbsAvailableWidth.js';
+
+	// Environment Import
+	// import { browser } from '$app/environment';
+	const browser = typeof window !== 'undefined';
+
+	/***
+	 * COMPONENT PROPS
+	 **/
+	// class && style props
+	let className = '';
+	export { className as class };
+	export let style = '';
+	// Breadcrumbs
+	export let clientHeight: number = 0;
+	// path settings
+	export let currentPath: BreadcrumbsProps['currentPath'] = [];
+	export let currentPathNames: BreadcrumbsProps['currentPathNames'] = [];
+	// loading settings
+	export let isLoading: BreadcrumbsProps['isLoading'] = false;
+	// navigation settings
+	export let showNavigationButtons: BreadcrumbsProps['showNavigationButtons'] = true;
+	export let canGoBack: BreadcrumbsProps['canGoBack'] = false;
+	export let canGoForward: BreadcrumbsProps['canGoForward'] = false;
+	// words (tooltips and screen readers): a page that shows this in another language passes its own
+	export let backLabel: string = 'Back';
+	export let forwardLabel: string = 'Forward';
+	export let rootLabel: string = 'Files';
+	export let breadcrumbLabel: string = 'breadcrumb';
+	// Figma Crumbs Size=Compact (a header under 700px wide): Heading/Section text and a 4px gap instead of Heading/Page and 6px
+	export let compact: boolean = false;
+	// event handlers
+	export let onNavigate: BreadcrumbsProps['onNavigate'] = () => {};
+	export let onBack: BreadcrumbsProps['onBack'] = () => {};
+	export let onForward: BreadcrumbsProps['onForward'] = () => {};
+	// debug settings
+	export let showDebugVisualizer: boolean = false;
+
+	// A name a visitor wrote keeps a direction of its own on a right to left screen (a Latin folder name reads left to
+	// right inside it); on a left to right screen no attribute is written and nothing changes.
+	const textDirection = useTextDirection();
+	$: nameDirection = dirForUserText($textDirection);
+
+	/***
+	 * COMPONENT STATE VARIABLES
+	 **/
+	let navElement: HTMLElement;
+	let headerElement: HTMLElement | null = null;
+	let isDesktop = false;
+	let mediaQuery: MediaQueryList | null = null;
+	let shouldShowEllipsis = false;
+	let availableWidth = 0;
+	let itemsToShow = 0;
+	let breadcrumbsContainer: HTMLElement;
+	let breadcrumbsPositioned = false;
+	let showLogs = false;
+	let showBackTooltip = false;
+	let showForwardTooltip = false;
+	// The text style and the gap between crumbs come from the Figma size of the crumbs
+	$: crumbTextClass = compact ? 'text-heading-section' : 'text-heading-page';
+	$: crumbGapClass = compact ? 'gap-1' : 'gap-1.5';
+	// Calculate how many items we can show based on available width
+	// Assuming each item takes roughly 150px on average (including separator)
+	$: if (availableWidth > 0) {
+		const averageItemWidth = 200; // Adjust this value based on actual measurements
+		const maxItems = Math.floor(availableWidth / averageItemWidth);
+		// Always show at least 2 items (first and last)
+		itemsToShow = Math.max(2, maxItems);
+		shouldShowEllipsis = currentPath?.length > itemsToShow;
+
+		// Mark breadcrumbs as positioned once we have calculated the available width
+		breadcrumbsPositioned = true;
+	}
+
+	// Only log on mount and significant changes
+	$: if (browser && currentPath?.length) {
+		// if(showLogs) console.log('Breadcrumbs significant update:', {
+		//   currentPath,
+		//   currentPathNames,
+		//   shouldShowEllipsis,
+		//   availableWidth,
+		//   itemsToShow,
+		//   breadcrumbsPositioned
+		// });
+	}
+
+	/***
+	 * COMPONENT METHODS
+	 **/
+	function updateAvailableWidth() {
+		if (!browser || !navElement || !breadcrumbsContainer) return;
+
+		const headerAncestor = navElement.closest('header');
+		const containerElement = headerAncestor || navElement;
+		headerElement = containerElement;
+
+		// Get all the measurements we need
+		const measurements = {
+			container: containerElement.getBoundingClientRect(),
+			navButtons: showNavigationButtons
+				? navElement.querySelector('.nav-buttons')?.getBoundingClientRect()
+				: null,
+			rightContent: containerElement
+				.querySelector('.pe-5, .pr-5, .right-content')
+				?.getBoundingClientRect(),
+			breadcrumbs: breadcrumbsContainer.getBoundingClientRect()
+		};
+
+		// Calculate fixed spaces
+		const leftOffset = measurements.navButtons ? measurements.navButtons.width : 0;
+		const rightOffset = measurements.rightContent ? measurements.rightContent.width : 24;
+
+		// Calculate available width for breadcrumbs
+		availableWidth = breadcrumbsAvailableWidthPx({
+			containerWidthPx: measurements.container.width,
+			leftOffsetPx: leftOffset,
+			rightOffsetPx: rightOffset,
+			headerAncestor
+		});
+	}
+
+	function handleMediaQuery(e: MediaQueryListEvent | MediaQueryList) {
+		isDesktop = e.matches;
+	}
+
+	$: showFullPath = isDesktop;
+
+	function handleClick(event: MouseEvent, index: number) {
+		event.preventDefault();
+		if (!isLoading) {
+			onNavigate(index);
+		}
+	}
+
+	function handleKeyDown(event: KeyboardEvent, index: number) {
+		if (event.key === 'Enter') {
+			event.preventDefault();
+			if (!isLoading) {
+				onNavigate(index);
+			}
+		}
+	}
+
+	/***
+	 * COMPONENT LIFECYCLE METHODS
+	 **/
+	onMount(() => {
+		if (!browser) return;
+
+		mediaQuery = window.matchMedia('(min-width: 768px)');
+		handleMediaQuery(mediaQuery);
+		mediaQuery.addEventListener('change', handleMediaQuery);
+
+		// First try to get the header from FileBrowser structure
+		if (navElement) {
+			const header = navElement.closest('header');
+			if (header) {
+				headerElement = header;
+			}
+		}
+
+		// Initial width calculation
+		updateAvailableWidth();
+
+		// Set up resize observer
+		const resizeObserver = new ResizeObserver(() => {
+			updateAvailableWidth();
+		});
+
+		resizeObserver.observe(navElement);
+		if (headerElement) {
+			resizeObserver.observe(headerElement);
+		}
+
+		return () => {
+			resizeObserver.disconnect();
+		};
+	});
+
+	onDestroy(() => {
+		if (browser && mediaQuery) {
+			mediaQuery.removeEventListener('change', handleMediaQuery);
+		}
+	});
 </script>
 
-<nav 
-  bind:this={navElement} 
-  bind:clientHeight
-  aria-label={breadcrumbLabel}
-  class="{className ? className + ' ' : ''}breadcrumbs-component flex items-center widgetic-colors h-[56px] bg-white border-b relative w-full"
-  style={style}
+<!--
+	Figma: Crumbs (component set 268:1008) with the back and forward buttons of Browser Header (268:1088).
+	Size=Page is `Heading/Page` with a 6px gap; Size=Compact (the `compact` prop) is `Heading/Section` with a 4px gap.
+	The last crumb is the page you are on (foreground); the ones before it are links (muted, foreground on hover).
+-->
+<nav
+	bind:this={navElement}
+	bind:clientHeight
+	aria-label={breadcrumbLabel}
+	class="{className
+		? className + ' '
+		: ''}breadcrumbs-component relative flex min-h-8 w-full items-center gap-2"
+	{style}
 >
-  <!-- NAVIGATION BUTTONS -->
-  {#if showNavigationButtons}
-    <Tooltip.Provider delayDuration={300}>
-      <div class="nav-buttons flex items-center shrink-0">
-        <Tooltip.Root open={showBackTooltip}>
-          <button
-            type="button"
-            class="breadcrumbs-nav-button inline-flex items-center justify-center w-6 h-6 border-0 bg-transparent p-0 focus:outline-none"
-            style="cursor: {canGoBack && !isLoading ? 'pointer' : 'default'}; opacity: {canGoBack && !isLoading ? 1 : 0.35};"
-            aria-label={backLabel}
-            aria-disabled={!canGoBack || isLoading}
-            on:mouseenter={() => { showBackTooltip = true; }}
-            on:mouseleave={() => { showBackTooltip = false; }}
-            on:click={() => { if (!isLoading) onBack(); }}
-          >
-            <IconArrowLeft
-              class="w-6 h-6 text-[hsl(var(--grey6))] rtl:-scale-x-100"
-              style="min-width: 24px; min-height: 24px;"
-            />
-          </button>
-          {#if showBackTooltip}
-            <!-- Portaled to <body>: the header row around this nav is overflow-hidden, which
+	<!-- NAVIGATION BUTTONS -->
+	{#if showNavigationButtons}
+		<Tooltip.Provider delayDuration={300}>
+			<div class="nav-buttons flex shrink-0 items-center gap-1">
+				<Tooltip.Root open={showBackTooltip}>
+					<!-- Figma Icon Button Ghost 32px: the disabled state is the 50% opacity of the Figma "Disabled" state. -->
+					<IconButton
+						variant="ghost"
+						label={backLabel}
+						disabled={!canGoBack || isLoading}
+						onmouseenter={() => {
+							showBackTooltip = true;
+						}}
+						onmouseleave={() => {
+							showBackTooltip = false;
+						}}
+						onclick={() => {
+							if (!isLoading) onBack();
+						}}
+					>
+						<IconArrowLeft aria-hidden="true" class="rtl:-scale-x-100" />
+					</IconButton>
+					{#if showBackTooltip}
+						<!-- Portaled to <body>: the header row around this nav is overflow-hidden, which
                  otherwise clips the tooltip at the header's bottom edge. -->
-            <Tooltip.Portal>
-              <Tooltip.Content side="bottom" sideOffset={6} class="bg-[hsl(var(--dark))] text-white caption px-2 py-1 rounded-md z-[200000]">
-                {backLabel}
-              </Tooltip.Content>
-            </Tooltip.Portal>
-          {/if}
-        </Tooltip.Root>
-
-        <Tooltip.Root open={showForwardTooltip}>
-          <button
-            type="button"
-            class="breadcrumbs-nav-button ms-4 inline-flex items-center justify-center w-6 h-6 border-0 bg-transparent p-0 focus:outline-none"
-            style="cursor: {canGoForward && !isLoading ? 'pointer' : 'default'}; opacity: {canGoForward && !isLoading ? 1 : 0.35};"
-            aria-label={forwardLabel}
-            aria-disabled={!canGoForward || isLoading}
-            on:mouseenter={() => { showForwardTooltip = true; }}
-            on:mouseleave={() => { showForwardTooltip = false; }}
-            on:click={() => { if (!isLoading) onForward(); }}
-          >
-            <IconArrowRight
-              class="w-6 h-6 text-[hsl(var(--grey6))] rtl:-scale-x-100"
-              style="min-width: 24px; min-height: 24px;"
-            />
-          </button>
-          {#if showForwardTooltip}
-            <Tooltip.Portal>
-              <Tooltip.Content side="bottom" sideOffset={6} class="bg-[hsl(var(--dark))] text-white caption px-2 py-1 rounded-md z-[200000]">
-                {forwardLabel}
-              </Tooltip.Content>
-            </Tooltip.Portal>
-          {/if}
-        </Tooltip.Root>
-      </div>
-    </Tooltip.Provider>
-  {/if}
-
-  <!-- BREADCRUMBS CONTAINER -->
-  <div bind:this={breadcrumbsContainer} class="flex-1 ps-[18px] overflow-hidden min-w-0">
-    <Breadcrumb.Root aria-label={breadcrumbLabel}>
-      <Breadcrumb.List class="inline-flex items-center min-w-0 breadcrumbs-list">
-        <div class="inline-flex items-center min-w-0 min-h-[24px]">
-          <!-- Root Breadcrumb Item -->
-          <Breadcrumb.Item class="shrink-0">
-            <!-- svelte-ignore a11y-click-events-have-key-events -->
-            <span 
-              role="link"
-              tabindex="0"
-              class="h5 text-[hsl(var(--grey6))] transition-colors hover:text-[hsl(var(--grey7))] hover:underline hover:decoration-[hsl(var(--grey7))] cursor-pointer whitespace-nowrap"
-              class:opacity-50={isLoading}
-              style="pointer-events: {isLoading ? 'none' : 'auto'};"
-              on:click={(e) => handleClick(e, -1)}
-              on:keydown={(e) => handleKeyDown(e, -1)}
-            >
-              {rootLabel}
-            </span>
-          </Breadcrumb.Item>
-
-          
-          {#if !isLoading && currentPath.length > 0 && breadcrumbsPositioned}
-            {#if shouldShowEllipsis && currentPath.length > itemsToShow}
-              <!-- Breadcrumb Separator -->
-              <Breadcrumb.Separator class="h5 text-[hsl(var(--grey6))] shrink-0">/</Breadcrumb.Separator>
-
-              <!-- Dropdown Menu for Ellipsis -->
-              <Breadcrumb.Item class="shrink-0">
-                <DropdownMenu.Root>
-                  <DropdownMenu.Trigger class="flex items-center gap-1 cursor-pointer">
-                    <span class="h5 text-[hsl(var(--grey6))]">...</span>
-                  </DropdownMenu.Trigger>
-                  <DropdownMenu.Content align="start" class="min-w-[200px]">
-                    {#each currentPath.slice(0, -itemsToShow + 1) as _, index}
-                      <DropdownMenu.Item>
-                        <!-- svelte-ignore a11y-click-events-have-key-events -->
-                        <span dir={nameDirection}
-                          role="link"
-                          tabindex="0"
-                          class="block w-full cursor-pointer"
-                          on:click={(e) => handleClick(e, index)}
-                        >
-                          {currentPathNames[index]}
-                        </span>
-                      </DropdownMenu.Item>
-                    {/each}
-                  </DropdownMenu.Content>
-                </DropdownMenu.Root>
-              </Breadcrumb.Item>
-
-              <!-- Always show last N segments based on available width -->
-              {#each currentPath.slice(-itemsToShow + 1) as _, index}
-                <Breadcrumb.Separator class="h5 text-[hsl(var(--grey6))] shrink-0">/</Breadcrumb.Separator>
-                <Breadcrumb.Item class="shrink-0">
-                  {#if index === itemsToShow - 2}
-                    <span dir={nameDirection} class="h5 text-[hsl(var(--grey3))]">
-                      {currentPathNames[currentPath.length - 1]}
-                    </span>
-                  {:else}
-                    <!-- svelte-ignore a11y-click-events-have-key-events -->
-                    <span dir={nameDirection}
-                      role="link"
-                      tabindex="0"
-                      class="h5 text-[hsl(var(--grey6))] transition-colors hover:text-[hsl(var(--grey7))] hover:underline hover:decoration-[hsl(var(--grey7))] cursor-pointer"
-                      class:opacity-50={isLoading}
-                      style="pointer-events: {isLoading ? 'none' : 'auto'};"
-                      on:click={(e) => handleClick(e, currentPath.length - itemsToShow + 1 + index)}
-                      on:keydown={(e) => handleKeyDown(e, currentPath.length - itemsToShow + 1 + index)}
-                    >
-                      {currentPathNames[currentPath.length - itemsToShow + 1 + index]}
-                    </span>
-                  {/if}
-                </Breadcrumb.Item>
-              {/each}
-            {:else}
-              {#each currentPath as _, index}
-                <Breadcrumb.Separator class="h5 text-[hsl(var(--grey6))] shrink-0">/</Breadcrumb.Separator>
-                <Breadcrumb.Item class="shrink-0">
-                  {#if index === currentPath.length - 1}
-                    <span dir={nameDirection} class="h5 text-[hsl(var(--grey3))]">
-                      {currentPathNames[index]}
-                    </span>
-                  {:else}
-                    <!-- svelte-ignore a11y-click-events-have-key-events -->
-                    <span dir={nameDirection}
-                      role="link"
-                      tabindex="0"
-                      class="h5 text-[hsl(var(--grey6))] transition-colors hover:text-[hsl(var(--grey7))] hover:underline hover:decoration-[hsl(var(--grey7))] cursor-pointer"
-                      class:opacity-50={isLoading}
-                      style="pointer-events: {isLoading ? 'none' : 'auto'};"
-                      on:click={(e) => handleClick(e, index)}
-                      on:keydown={(e) => handleKeyDown(e, index)}
-                    >
-                      {currentPathNames[index]}
-                    </span>
-                  {/if}
-                </Breadcrumb.Item>
-              {/each}
-            {/if}
-          {/if}
-        </div>
-      </Breadcrumb.List>
-    </Breadcrumb.Root>
-  </div>
-
-  {#if showDebugVisualizer}
-    <div class="absolute bottom-1 end-1 text-xs text-blue-600 bg-white px-1 rounded shadow-2xs">
-      Available width: {Math.round(availableWidth)}px
-      <br>
-      Items to show: {itemsToShow}
-      <br>
-      Should show ellipsis: {shouldShowEllipsis}
-      <br>
-      Positioned: {breadcrumbsPositioned}
-      <br>
-      Context: {navElement?.closest('header') ? 'FileBrowser' : 'Direct'}
-    </div>
-  {/if}
+						<Tooltip.Portal>
+							<Tooltip.Content
+								side="bottom"
+								sideOffset={6}
+								class="bg-inverse text-inverse-foreground text-caption z-[200000] rounded-lg px-2 py-1"
+							>
+								{backLabel}
+							</Tooltip.Content>
+						</Tooltip.Portal>
+					{/if}
+				</Tooltip.Root>
+
+				<Tooltip.Root open={showForwardTooltip}>
+					<IconButton
+						variant="ghost"
+						label={forwardLabel}
+						disabled={!canGoForward || isLoading}
+						onmouseenter={() => {
+							showForwardTooltip = true;
+						}}
+						onmouseleave={() => {
+							showForwardTooltip = false;
+						}}
+						onclick={() => {
+							if (!isLoading) onForward();
+						}}
+					>
+						<IconArrowRight aria-hidden="true" class="rtl:-scale-x-100" />
+					</IconButton>
+					{#if showForwardTooltip}
+						<Tooltip.Portal>
+							<Tooltip.Content
+								side="bottom"
+								sideOffset={6}
+								class="bg-inverse text-inverse-foreground text-caption z-[200000] rounded-lg px-2 py-1"
+							>
+								{forwardLabel}
+							</Tooltip.Content>
+						</Tooltip.Portal>
+					{/if}
+				</Tooltip.Root>
+			</div>
+		</Tooltip.Provider>
+	{/if}
+
+	<!-- BREADCRUMBS CONTAINER -->
+	<div bind:this={breadcrumbsContainer} class="min-w-0 flex-1 overflow-hidden">
+		<Breadcrumb.Root aria-label={breadcrumbLabel}>
+			<Breadcrumb.List class="breadcrumbs-list inline-flex min-w-0 items-center">
+				<div class="inline-flex min-h-5 min-w-0 items-center {crumbGapClass}">
+					<!-- Root Breadcrumb Item -->
+					<Breadcrumb.Item class="shrink-0">
+						{#if currentPath.length === 0}
+							<!-- At the root the root crumb is the page you are on (Figma Crumbs Depth=Root: foreground) -->
+							<span class="{crumbTextClass} text-foreground whitespace-nowrap" aria-current="page">
+								{rootLabel}
+							</span>
+						{:else}
+							<!-- svelte-ignore a11y-click-events-have-key-events -->
+							<span
+								role="link"
+								tabindex="0"
+								class="{crumbTextClass} text-muted-foreground hover:text-foreground cursor-pointer whitespace-nowrap transition-colors duration-fast hover:underline"
+								class:opacity-50={isLoading}
+								style="pointer-events: {isLoading ? 'none' : 'auto'};"
+								on:click={(e) => handleClick(e, -1)}
+								on:keydown={(e) => handleKeyDown(e, -1)}
+							>
+								{rootLabel}
+							</span>
+						{/if}
+					</Breadcrumb.Item>
+
+					{#if !isLoading && currentPath.length > 0 && breadcrumbsPositioned}
+						{#if shouldShowEllipsis && currentPath.length > itemsToShow}
+							<!-- Breadcrumb Separator -->
+							<Breadcrumb.Separator class="text-muted-foreground shrink-0 [&>svg]:size-4" />
+
+							<!-- Dropdown Menu for Ellipsis -->
+							<Breadcrumb.Item class="shrink-0">
+								<DropdownMenu.Root>
+									<DropdownMenu.Trigger class="flex cursor-pointer items-center gap-1">
+										<span class="{crumbTextClass} text-muted-foreground">...</span>
+									</DropdownMenu.Trigger>
+									<DropdownMenu.Content align="start" class="min-w-[200px]">
+										{#each currentPath.slice(0, -itemsToShow + 1) as _, index}
+											<DropdownMenu.Item>
+												<!-- svelte-ignore a11y-click-events-have-key-events -->
+												<span
+													dir={nameDirection}
+													role="link"
+													tabindex="0"
+													class="block w-full cursor-pointer"
+													on:click={(e) => handleClick(e, index)}
+												>
+													{currentPathNames[index]}
+												</span>
+											</DropdownMenu.Item>
+										{/each}
+									</DropdownMenu.Content>
+								</DropdownMenu.Root>
+							</Breadcrumb.Item>
+
+							<!-- Always show last N segments based on available width -->
+							{#each currentPath.slice(-itemsToShow + 1) as _, index}
+								<Breadcrumb.Separator class="text-muted-foreground shrink-0 [&>svg]:size-4" />
+								<Breadcrumb.Item class="shrink-0">
+									{#if index === itemsToShow - 2}
+										<span dir={nameDirection} class="{crumbTextClass} text-foreground" aria-current="page">
+											{currentPathNames[currentPath.length - 1]}
+										</span>
+									{:else}
+										<!-- svelte-ignore a11y-click-events-have-key-events -->
+										<span
+											dir={nameDirection}
+											role="link"
+											tabindex="0"
+											class="{crumbTextClass} text-muted-foreground hover:text-foreground cursor-pointer transition-colors duration-fast hover:underline"
+											class:opacity-50={isLoading}
+											style="pointer-events: {isLoading ? 'none' : 'auto'};"
+											on:click={(e) => handleClick(e, currentPath.length - itemsToShow + 1 + index)}
+											on:keydown={(e) =>
+												handleKeyDown(e, currentPath.length - itemsToShow + 1 + index)}
+										>
+											{currentPathNames[currentPath.length - itemsToShow + 1 + index]}
+										</span>
+									{/if}
+								</Breadcrumb.Item>
+							{/each}
+						{:else}
+							{#each currentPath as _, index}
+								<Breadcrumb.Separator class="text-muted-foreground shrink-0 [&>svg]:size-4" />
+								<Breadcrumb.Item class="shrink-0">
+									{#if index === currentPath.length - 1}
+										<span dir={nameDirection} class="{crumbTextClass} text-foreground" aria-current="page">
+											{currentPathNames[index]}
+										</span>
+									{:else}
+										<!-- svelte-ignore a11y-click-events-have-key-events -->
+										<span
+											dir={nameDirection}
+											role="link"
+											tabindex="0"
+											class="{crumbTextClass} text-muted-foreground hover:text-foreground cursor-pointer transition-colors duration-fast hover:underline"
+											class:opacity-50={isLoading}
+											style="pointer-events: {isLoading ? 'none' : 'auto'};"
+											on:click={(e) => handleClick(e, index)}
+											on:keydown={(e) => handleKeyDown(e, index)}
+										>
+											{currentPathNames[index]}
+										</span>
+									{/if}
+								</Breadcrumb.Item>
+							{/each}
+						{/if}
+					{/if}
+				</div>
+			</Breadcrumb.List>
+		</Breadcrumb.Root>
+	</div>
+
+	{#if showDebugVisualizer}
+		<div
+			class="bg-background text-caption text-brand absolute end-1 bottom-1 rounded-sm px-1 shadow-2xs"
+		>
+			Available width: {Math.round(availableWidth)}px
+			<br />
+			Items to show: {itemsToShow}
+			<br />
+			Should show ellipsis: {shouldShowEllipsis}
+			<br />
+			Positioned: {breadcrumbsPositioned}
+			<br />
+			Context: {navElement?.closest('header') ? 'FileBrowser' : 'Direct'}
+		</div>
+	{/if}
 </nav>
 
 <style>
-  :global(.breadcrumb-separator) {
-    margin: 0 0.5rem;
-  }
-
-  :global(.breadcrumbs-list) {
-    width: 100%;
-  }
-</style> 
+	:global(.breadcrumb-separator) {
+		margin: 0 0.5rem;
+	}
+
+	:global(.breadcrumbs-list) {
+		width: 100%;
+	}
+</style>