@urbicon-ui/blocks 6.3.6 → 6.3.8

package/dist/i18n/index.d.ts

@@ -339,175 +339,7 @@ declare const blocksTranslations: {
         };
     };
 };
-export declare const blocksI18n: import("@urbicon-ui/i18n").PackageI18n<{
-    readonly accessibility: {
-        readonly avatar: "Avatar";
-        readonly clearInput: "Clear input";
-        readonly clearSearch: "Clear search";
-        readonly clearSelection: "Clear selection";
-        readonly closeDialog: "Close dialog";
-        readonly closeDrawer: "Close drawer";
-        readonly dismiss: "Dismiss";
-        readonly fileUpload: "File upload";
-        readonly loading: "Loading";
-        readonly maximum: "Maximum";
-        readonly minimum: "Minimum";
-        readonly pagination: "Page navigation";
-        readonly progress: "Progress";
-        readonly slider: "Slider";
-        readonly toggle: "Toggle";
-        readonly toggleOptions: "Toggle options";
-        readonly removableBadge: "Removable badge";
-        readonly removeBadge: "Remove badge";
-        readonly removeFile: "Remove {{name}}";
-    };
-    readonly button: {
-        readonly close: "Close";
-        readonly apply: "Apply";
-        readonly cancel: "Cancel";
-        readonly confirm: "Confirm";
-    };
-    readonly menu: {
-        readonly placeholder: "Select an option...";
-    };
-    readonly common: {
-        readonly loading: "Loading...";
-    };
-    readonly languages: {
-        readonly de: "Deutsch";
-        readonly en: "English";
-        readonly es: "Español";
-        readonly fr: "Français";
-        readonly it: "Italiano";
-        readonly nl: "Nederlands";
-    };
-    readonly localeSwitcher: {
-        readonly ariaLabel: "Language selection";
-        readonly placeholder: "Select language...";
-    };
-    readonly pagination: {
-        readonly next: "Next";
-        readonly first: "First";
-        readonly last: "Last";
-        readonly page: "Page";
-        readonly previous: "Previous";
-    };
-    readonly calendar: {
-        readonly recurring: "Recurring event";
-        readonly previousMonth: "Previous month";
-        readonly nextMonth: "Next month";
-        readonly previousWeek: "Previous week";
-        readonly nextWeek: "Next week";
-        readonly previousDay: "Previous day";
-        readonly nextDay: "Next day";
-        readonly previousYear: "Previous year";
-        readonly nextYear: "Next year";
-        readonly today: "Today";
-        readonly calendarGrid: "Calendar";
-        readonly weekdays: "Weekdays";
-        readonly weekNumber: "Week number";
-        readonly events: "Events";
-        readonly noEvents: "No events";
-        readonly showMore: "{{count}} more";
-        readonly legend: "Legend";
-        readonly yearView: "Year overview";
-        readonly weekView: "Week view";
-        readonly dayView: "Day view";
-        readonly monthView: "Month view";
-        readonly viewMonth: "Month";
-        readonly viewYear: "Year";
-        readonly viewWeek: "Week";
-        readonly viewDay: "Day";
-        readonly multiDayLabel: "Day {{current}} of {{total}}";
-        readonly agendaView: "Agenda view";
-        readonly viewAgenda: "Agenda";
-        readonly viewSwitcher: "View mode";
-    };
-    readonly planner: {
-        readonly previousWeek: "Previous week";
-        readonly nextWeek: "Next week";
-        readonly previousMonth: "Previous month";
-        readonly nextMonth: "Next month";
-        readonly previousRange: "Previous range";
-        readonly nextRange: "Next range";
-        readonly today: "Today";
-        readonly grid: "Planner";
-        readonly weekNumber: "Week number";
-        readonly itemCount: "{{count}} items";
-    };
-    readonly commandPalette: {
-        readonly noResults: "No results found.";
-        readonly search: "Search...";
-        readonly hints: {
-            readonly navigate: "Navigate";
-            readonly select: "Select";
-            readonly close: "Close";
-        };
-    };
-    readonly compositionBar: {
-        readonly total: "Total";
-        readonly summary: "Composition: {{total}} ({{count}} shares) — {{parts}}";
-        readonly share: "Share";
-        readonly value: "Value";
-        readonly percent: "Percent";
-        readonly remaining: "remaining";
-    };
-    readonly guide: {
-        readonly next: "Next";
-        readonly previous: "Back";
-        readonly skip: "Skip tour";
-        readonly done: "Done";
-        readonly step: "Step {{current}} of {{total}}";
-        readonly tour: "Guided tour";
-        readonly close: "Close";
-        readonly openHelp: "Help";
-        readonly backToList: "All topics";
-        readonly info: "More information";
-        readonly infoAbout: "More information about {{label}}";
-        readonly dismiss: "Dismiss hint";
-        readonly startTour: "Start the guided tour";
-        readonly actionRequired: "Complete the highlighted action to continue";
-    };
-    readonly datepicker: {
-        readonly placeholder: "Select a date...";
-        readonly rangePlaceholder: "Select a date range...";
-        readonly clear: "Clear selection";
-        readonly openCalendar: "Open calendar";
-        readonly invalidDate: "Invalid date";
-        readonly outOfRange: "Date is outside the allowed range";
-        readonly invalidRange: "Invalid date range";
-    };
-    readonly fileUpload: {
-        readonly exists: "File already added";
-        readonly invalidType: "File type {{type}} is not allowed";
-        readonly tooLarge: "File exceeds {{size}} limit";
-        readonly tooMany: "Maximum {{count}} files allowed";
-        readonly tooSmall: "File must be at least {{size}}";
-    };
-    readonly sankey: {
-        readonly summary: "Sankey diagram: {{nodes}} nodes, {{links}} links — {{flows}}";
-        readonly source: "Source";
-        readonly target: "Target";
-        readonly value: "Value";
-    };
-    readonly slider: {
-        readonly rangeStatus: {
-            readonly insideRecommended: "In recommended range";
-            readonly insideValid: "In valid range";
-            readonly insideValidOnly: "Outside recommended range, but valid";
-            readonly outsideValid: "Outside valid range";
-        };
-    };
-    readonly themeSwitcher: {
-        readonly lightMode: "Light mode";
-        readonly darkMode: "Dark mode";
-        readonly systemTheme: "System theme";
-    };
-    readonly time: {
-        readonly ago: "{{value}} {{unit}} ago";
-        readonly now: "now";
-    };
-}>;
+export declare const blocksI18n: import("@urbicon-ui/i18n").PackageI18n<import("@urbicon-ui/i18n").Translations>;
 /**
  * Context-scoped translation hook for the blocks package. Call during component
  * initialisation, then use the returned `t` (conventionally aliased `bt`):
@@ -520,175 +352,7 @@ export declare const blocksI18n: import("@urbicon-ui/i18n").PackageI18n<{
  * Resolves against the nearest `<I18nProvider>`'s locale (or the base locale
  * when none is mounted) and re-renders reactively on locale change.
  */
-export declare const useBlocksI18n: () => import("@urbicon-ui/i18n").TypedTranslationFunction<{
-    readonly accessibility: {
-        readonly avatar: "Avatar";
-        readonly clearInput: "Clear input";
-        readonly clearSearch: "Clear search";
-        readonly clearSelection: "Clear selection";
-        readonly closeDialog: "Close dialog";
-        readonly closeDrawer: "Close drawer";
-        readonly dismiss: "Dismiss";
-        readonly fileUpload: "File upload";
-        readonly loading: "Loading";
-        readonly maximum: "Maximum";
-        readonly minimum: "Minimum";
-        readonly pagination: "Page navigation";
-        readonly progress: "Progress";
-        readonly slider: "Slider";
-        readonly toggle: "Toggle";
-        readonly toggleOptions: "Toggle options";
-        readonly removableBadge: "Removable badge";
-        readonly removeBadge: "Remove badge";
-        readonly removeFile: "Remove {{name}}";
-    };
-    readonly button: {
-        readonly close: "Close";
-        readonly apply: "Apply";
-        readonly cancel: "Cancel";
-        readonly confirm: "Confirm";
-    };
-    readonly menu: {
-        readonly placeholder: "Select an option...";
-    };
-    readonly common: {
-        readonly loading: "Loading...";
-    };
-    readonly languages: {
-        readonly de: "Deutsch";
-        readonly en: "English";
-        readonly es: "Español";
-        readonly fr: "Français";
-        readonly it: "Italiano";
-        readonly nl: "Nederlands";
-    };
-    readonly localeSwitcher: {
-        readonly ariaLabel: "Language selection";
-        readonly placeholder: "Select language...";
-    };
-    readonly pagination: {
-        readonly next: "Next";
-        readonly first: "First";
-        readonly last: "Last";
-        readonly page: "Page";
-        readonly previous: "Previous";
-    };
-    readonly calendar: {
-        readonly recurring: "Recurring event";
-        readonly previousMonth: "Previous month";
-        readonly nextMonth: "Next month";
-        readonly previousWeek: "Previous week";
-        readonly nextWeek: "Next week";
-        readonly previousDay: "Previous day";
-        readonly nextDay: "Next day";
-        readonly previousYear: "Previous year";
-        readonly nextYear: "Next year";
-        readonly today: "Today";
-        readonly calendarGrid: "Calendar";
-        readonly weekdays: "Weekdays";
-        readonly weekNumber: "Week number";
-        readonly events: "Events";
-        readonly noEvents: "No events";
-        readonly showMore: "{{count}} more";
-        readonly legend: "Legend";
-        readonly yearView: "Year overview";
-        readonly weekView: "Week view";
-        readonly dayView: "Day view";
-        readonly monthView: "Month view";
-        readonly viewMonth: "Month";
-        readonly viewYear: "Year";
-        readonly viewWeek: "Week";
-        readonly viewDay: "Day";
-        readonly multiDayLabel: "Day {{current}} of {{total}}";
-        readonly agendaView: "Agenda view";
-        readonly viewAgenda: "Agenda";
-        readonly viewSwitcher: "View mode";
-    };
-    readonly planner: {
-        readonly previousWeek: "Previous week";
-        readonly nextWeek: "Next week";
-        readonly previousMonth: "Previous month";
-        readonly nextMonth: "Next month";
-        readonly previousRange: "Previous range";
-        readonly nextRange: "Next range";
-        readonly today: "Today";
-        readonly grid: "Planner";
-        readonly weekNumber: "Week number";
-        readonly itemCount: "{{count}} items";
-    };
-    readonly commandPalette: {
-        readonly noResults: "No results found.";
-        readonly search: "Search...";
-        readonly hints: {
-            readonly navigate: "Navigate";
-            readonly select: "Select";
-            readonly close: "Close";
-        };
-    };
-    readonly compositionBar: {
-        readonly total: "Total";
-        readonly summary: "Composition: {{total}} ({{count}} shares) — {{parts}}";
-        readonly share: "Share";
-        readonly value: "Value";
-        readonly percent: "Percent";
-        readonly remaining: "remaining";
-    };
-    readonly guide: {
-        readonly next: "Next";
-        readonly previous: "Back";
-        readonly skip: "Skip tour";
-        readonly done: "Done";
-        readonly step: "Step {{current}} of {{total}}";
-        readonly tour: "Guided tour";
-        readonly close: "Close";
-        readonly openHelp: "Help";
-        readonly backToList: "All topics";
-        readonly info: "More information";
-        readonly infoAbout: "More information about {{label}}";
-        readonly dismiss: "Dismiss hint";
-        readonly startTour: "Start the guided tour";
-        readonly actionRequired: "Complete the highlighted action to continue";
-    };
-    readonly datepicker: {
-        readonly placeholder: "Select a date...";
-        readonly rangePlaceholder: "Select a date range...";
-        readonly clear: "Clear selection";
-        readonly openCalendar: "Open calendar";
-        readonly invalidDate: "Invalid date";
-        readonly outOfRange: "Date is outside the allowed range";
-        readonly invalidRange: "Invalid date range";
-    };
-    readonly fileUpload: {
-        readonly exists: "File already added";
-        readonly invalidType: "File type {{type}} is not allowed";
-        readonly tooLarge: "File exceeds {{size}} limit";
-        readonly tooMany: "Maximum {{count}} files allowed";
-        readonly tooSmall: "File must be at least {{size}}";
-    };
-    readonly sankey: {
-        readonly summary: "Sankey diagram: {{nodes}} nodes, {{links}} links — {{flows}}";
-        readonly source: "Source";
-        readonly target: "Target";
-        readonly value: "Value";
-    };
-    readonly slider: {
-        readonly rangeStatus: {
-            readonly insideRecommended: "In recommended range";
-            readonly insideValid: "In valid range";
-            readonly insideValidOnly: "Outside recommended range, but valid";
-            readonly outsideValid: "Outside valid range";
-        };
-    };
-    readonly themeSwitcher: {
-        readonly lightMode: "Light mode";
-        readonly darkMode: "Dark mode";
-        readonly systemTheme: "System theme";
-    };
-    readonly time: {
-        readonly ago: "{{value}} {{unit}} ago";
-        readonly now: "now";
-    };
-}>;
+export declare const useBlocksI18n: any;
 export declare const hasBlocksTranslation: (key: string) => boolean, getBlocksLocales: () => import("@urbicon-ui/i18n").Locale[];
 export type BlocksTranslationKey = keyof typeof enTranslations;
 export { blocksTranslations };

package/dist/primitives/Breadcrumb/Breadcrumb.svelte

@@ -1,12 +1,18 @@
 <script lang="ts">
+  import { tick } from 'svelte';
   import { getBlocksConfig, resolveSlotClasses } from '../../provider';
   import { breadcrumbVariants, type BreadcrumbVariants } from './breadcrumb.variants';
-  import type { BreadcrumbProps } from './index';
+  import type { BreadcrumbProps, BreadcrumbItem } from './index';
 
   let {
     items,
     size = 'md',
+    wrap = true,
     separator,
+    maxItems,
+    itemsBeforeCollapse = 1,
+    itemsAfterCollapse = 1,
+    expandLabel = 'Show all breadcrumb items',
     'aria-label': ariaLabel = 'Breadcrumb',
     class: className = '',
     unstyled: unstyledProp = false,
@@ -18,16 +24,69 @@
   const blocksConfig = getBlocksConfig();
   const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
 
-  const variantProps: BreadcrumbVariants = $derived({ size });
+  const variantProps: BreadcrumbVariants = $derived({ size, wrap });
 
   const styles = $derived(breadcrumbVariants(variantProps));
 
   const slotClasses = $derived(
     resolveSlotClasses(blocksConfig, 'Breadcrumb', preset, variantProps, slotClassesProp)
   );
+
+  // Long trails collapse their middle into a single "…" affordance. Clicking
+  // it expands the full trail for the rest of the component's life — the
+  // established expandable-breadcrumb pattern. `before`/`after` clamp to sane
+  // bounds and the current page (last item) is always kept visible.
+  let expanded = $state(false);
+  let navEl = $state<HTMLElement>();
+
+  const before = $derived(Math.max(0, itemsBeforeCollapse));
+  const after = $derived(Math.max(1, itemsAfterCollapse));
+
+  type BreadcrumbEntry =
+    | { kind: 'item'; item: BreadcrumbItem; current: boolean }
+    | { kind: 'ellipsis' };
+
+  const entries = $derived.by((): BreadcrumbEntry[] => {
+    const last = items.length - 1;
+    const collapse =
+      maxItems != null &&
+      maxItems > 0 &&
+      !expanded &&
+      items.length > maxItems &&
+      // Only worth it when "…" actually replaces ≥2 items — folding a single
+      // hidden item saves no space and just adds an interaction.
+      items.length - before - after >= 2;
+
+    if (!collapse) {
+      return items.map((item, i) => ({ kind: 'item' as const, item, current: i === last }));
+    }
+
+    const result: BreadcrumbEntry[] = [];
+    for (let i = 0; i < before; i++) {
+      result.push({ kind: 'item', item: items[i], current: false });
+    }
+    result.push({ kind: 'ellipsis' });
+    for (let i = items.length - after; i < items.length; i++) {
+      result.push({ kind: 'item', item: items[i], current: i === last });
+    }
+    return result;
+  });
+
+  function expand() {
+    expanded = true;
+    // Keep keyboard focus inside the trail: land on the first item that was
+    // hidden (now revealed) rather than dropping to the top of the page when
+    // the "…" button unmounts. Head items are links 0…before-1, so the first
+    // revealed item is link index `before`.
+    const target = before;
+    tick().then(() => {
+      navEl?.querySelectorAll<HTMLAnchorElement>('a')[target]?.focus();
+    });
+  }
 </script>
 
 <nav
+  bind:this={navEl}
   class={unstyled
     ? [slotClasses?.nav, className].filter(Boolean).join(' ')
     : styles.nav({ class: [slotClasses?.nav, className] })}
@@ -35,26 +94,39 @@
   {...restProps}
 >
   <ol class={unstyled ? (slotClasses?.list ?? '') : styles.list({ class: slotClasses?.list })}>
-    {#each items as item, i (`${item.label}-${i}`)}
+    {#each entries as entry, i (entry.kind === 'ellipsis' ? 'ellipsis' : `${entry.item.label}-${i}`)}
       <li class={unstyled ? (slotClasses?.item ?? '') : styles.item({ class: slotClasses?.item })}>
-        {#if i === items.length - 1}
+        {#if entry.kind === 'ellipsis'}
+          <button
+            type="button"
+            class={unstyled
+              ? (slotClasses?.ellipsis ?? '')
+              : styles.ellipsis({ class: slotClasses?.ellipsis })}
+            aria-label={expandLabel}
+            onclick={expand}
+          >
+            …
+          </button>
+        {:else if entry.current}
           <span
             class={unstyled
               ? (slotClasses?.currentPage ?? '')
               : styles.currentPage({ class: slotClasses?.currentPage })}
-            aria-current="page">{item.label}</span
+            aria-current="page">{entry.item.label}</span
           >
         {:else}
           <!-- eslint-disable svelte/no-navigation-without-resolve -- BreadcrumbItem.href is opaque to the library -->
           <a
-            href={item.href}
+            href={entry.item.href}
             class={unstyled ? (slotClasses?.link ?? '') : styles.link({ class: slotClasses?.link })}
-            aria-label={item['aria-label']}
-            onclick={item.onclick}
+            aria-label={entry.item['aria-label']}
+            onclick={entry.item.onclick}
           >
-            {item.label}
+            {entry.item.label}
           </a>
           <!-- eslint-enable svelte/no-navigation-without-resolve -->
+        {/if}
+        {#if i < entries.length - 1}
           <span
             class={unstyled
               ? (slotClasses?.separator ?? '')

package/dist/primitives/Breadcrumb/breadcrumb.variants.d.ts

@@ -14,39 +14,62 @@ export declare const breadcrumbVariants: (props?: import("../../utils/variants.j
             separator: string;
         };
     };
+    wrap: {
+        true: {
+            list: string;
+        };
+        false: {
+            nav: string;
+            list: string;
+            currentPage: string;
+        };
+    };
 }> | undefined) => {
     nav: (props?: ({
         size?: "sm" | "md" | "lg" | undefined;
+        wrap?: boolean | undefined;
     } & {
         class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
         className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
     }) | undefined) => string;
     list: (props?: ({
         size?: "sm" | "md" | "lg" | undefined;
+        wrap?: boolean | undefined;
     } & {
         class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
         className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
     }) | undefined) => string;
     item: (props?: ({
         size?: "sm" | "md" | "lg" | undefined;
+        wrap?: boolean | undefined;
     } & {
         class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
         className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
     }) | undefined) => string;
     link: (props?: ({
         size?: "sm" | "md" | "lg" | undefined;
+        wrap?: boolean | undefined;
     } & {
         class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
         className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
     }) | undefined) => string;
     currentPage: (props?: ({
         size?: "sm" | "md" | "lg" | undefined;
+        wrap?: boolean | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    ellipsis: (props?: ({
+        size?: "sm" | "md" | "lg" | undefined;
+        wrap?: boolean | undefined;
     } & {
         class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
         className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
     }) | undefined) => string;
     separator: (props?: ({
         size?: "sm" | "md" | "lg" | undefined;
+        wrap?: boolean | undefined;
     } & {
         class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
         className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;

package/dist/primitives/Breadcrumb/breadcrumb.variants.js

@@ -2,7 +2,7 @@ import { tv } from '../../utils/variants.js';
 export const breadcrumbVariants = tv({
     slots: {
         nav: 'flex items-center',
-        list: 'flex items-center flex-wrap',
+        list: 'flex items-center',
         item: 'inline-flex items-center',
         link: [
             'text-text-secondary hover:text-text-primary',
@@ -11,6 +11,14 @@ export const breadcrumbVariants = tv({
             'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:rounded-sm'
         ],
         currentPage: 'font-medium text-text-primary truncate max-w-48',
+        // Collapse affordance: the "…" button shown in place of the folded middle
+        // items. Styled as a quiet link; expands the full trail on click.
+        ellipsis: [
+            'inline-flex items-center justify-center rounded-sm px-1',
+            'text-text-tertiary hover:text-text-primary cursor-pointer',
+            'transition-colors duration-[var(--blocks-duration-fast)]',
+            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50'
+        ],
         separator: 'mx-2 text-text-tertiary select-none'
     },
     variants: {
@@ -27,9 +35,29 @@ export const breadcrumbVariants = tv({
                 list: 'text-base gap-1',
                 separator: 'mx-2'
             }
+        },
+        // Overflow strategy when the trail runs out of horizontal room.
+        // `wrap` (default): the trail wraps to multiple lines — the standard
+        // free-flowing breadcrumb. `false`: the trail stays on one line and the
+        // current page (always the last item) truncates while the ancestor links
+        // hold their width — for tight single-line bars (sticky headers, toolbars)
+        // where the page name is the part worth shortening. Pair with `maxItems`
+        // to fold the middle into a "…" before the current page has to truncate.
+        wrap: {
+            true: {
+                list: 'flex-wrap'
+            },
+            false: {
+                nav: 'min-w-0',
+                list: 'flex-nowrap min-w-0 [&>li:not(:last-child)]:shrink-0 [&>li:last-child]:min-w-0 [&>li:last-child]:shrink',
+                // Let the current page consume the available width and truncate, rather
+                // than capping at the wrap-mode max-width.
+                currentPage: 'max-w-none'
+            }
         }
     },
     defaultVariants: {
-        size: 'md'
+        size: 'md',
+        wrap: true
     }
 });

package/dist/primitives/Breadcrumb/index.d.ts

@@ -41,14 +41,39 @@ export interface BreadcrumbItem {
  *   {#snippet separator()}<ChevronRight size={14} />{/snippet}
  * </Breadcrumb>
  * ```
+ *
+ * @example Collapse a long trail — middle items fold into an expandable "…"
+ * ```svelte
+ * <Breadcrumb items={deepTrail} maxItems={4} />
+ * ```
  */
 export interface BreadcrumbProps extends BreadcrumbVariants, Omit<HTMLAttributes<HTMLElement>, 'children'> {
     /** Ordered breadcrumb items (last item is current page) */
     items: BreadcrumbItem[];
     /** Size @default 'md' */
     size?: 'sm' | 'md' | 'lg';
+    /**
+     * Let the trail wrap onto multiple lines (`true`, default) or keep it on a
+     * single line where the current page truncates and the ancestor links hold
+     * their width (`false`). Use `false` for tight single-line bars such as a
+     * sticky header or toolbar. @default true
+     */
+    wrap?: boolean;
     /** Custom separator snippet (default: "/") */
     separator?: Snippet;
+    /**
+     * Collapse the trail when it has more than this many items: the middle items
+     * fold into a single "…" button that expands the full trail on click. The
+     * first `itemsBeforeCollapse` and last `itemsAfterCollapse` items stay
+     * visible (the current page is always kept). Omit to never collapse.
+     */
+    maxItems?: number;
+    /** Leading items kept visible when collapsed. @default 1 */
+    itemsBeforeCollapse?: number;
+    /** Trailing items kept visible when collapsed; the current page is always included. @default 1 */
+    itemsAfterCollapse?: number;
+    /** Accessible label for the "…" button that expands a collapsed trail. @default 'Show all breadcrumb items' */
+    expandLabel?: string;
     /** Accessible label for the nav element @default 'Breadcrumb' */
     'aria-label'?: string;
     /** Custom CSS class */