@urbicon-ui/blocks 6.3.6 → 6.3.7

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,17 @@
 <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',
     separator,
+    maxItems,
+    itemsBeforeCollapse = 1,
+    itemsAfterCollapse = 1,
+    expandLabel = 'Show all breadcrumb items',
     'aria-label': ariaLabel = 'Breadcrumb',
     class: className = '',
     unstyled: unstyledProp = false,
@@ -25,9 +30,62 @@
   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 +93,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

@@ -45,6 +45,12 @@ export declare const breadcrumbVariants: (props?: import("../../utils/variants.j
         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;
+    } & {
+        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;
     } & {

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

@@ -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: {

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

@@ -41,6 +41,11 @@ 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) */
@@ -49,6 +54,19 @@ export interface BreadcrumbProps extends BreadcrumbVariants, Omit<HTMLAttributes
     size?: 'sm' | 'md' | 'lg';
     /** 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 */

package/dist/primitives/Combobox/Combobox.svelte

@@ -231,7 +231,7 @@
     }
   }
 
-  function handleClickOutside(event: MouseEvent) {
+  function handleClickOutside(event: PointerEvent) {
     const target = event.target as Node;
     // Exclude the whole input wrapper (input + chevron toggle + clear button),
     // so clicking the chevron to close doesn't race this handler into a
@@ -248,8 +248,12 @@
 
   $effect(() => {
     if (open) {
-      document.addEventListener('mousedown', handleClickOutside);
-      return () => document.removeEventListener('mousedown', handleClickOutside);
+      // `pointerdown` (not `mousedown`) for reliable outside-dismiss on touch:
+      // iOS fires `pointerdown` immediately on tap, whereas a synthetic
+      // `mousedown` can be delayed or dropped when the tapped element is the
+      // moving top-layer popover. Mirrors Popover's manual-mode dismiss.
+      document.addEventListener('pointerdown', handleClickOutside);
+      return () => document.removeEventListener('pointerdown', handleClickOutside);
     }
   });
 

package/dist/primitives/Combobox/combobox.variants.js

@@ -22,12 +22,16 @@ export const comboboxVariants = tv({
         // `position`, `width`, `overflow-y` are set inline in Combobox.svelte
         // so the native `popover="manual"` top-layer rendering works
         // correctly and the UA's `overflow: auto` doesn't render a duplicate
-        // scrollbar. Width is sized by Floating UI's `size` middleware.
+        // scrollbar. Width AND a keyboard-aware max-height come from Floating
+        // UI's `size` middleware: it sets `--blocks-overlay-available-height`
+        // to the room left in the visual viewport (e.g. above the iOS keyboard);
+        // the `max-h-[min(15rem,…)]` below keeps 15rem as the upper design cap
+        // via `min()` and falls back to it whenever the var is unset.
         // tier: contain — floating dropdown panel.
         listbox: [
             'rounded-contain border',
             'bg-surface-elevated border-border-subtle shadow-[var(--blocks-shadow-md)]',
-            'max-h-60 p-1 space-y-0.5'
+            'max-h-[min(15rem,var(--blocks-overlay-available-height,100dvh))] p-1 space-y-0.5'
         ],
         option: [
             'flex w-full items-center gap-2 rounded-modify px-3 py-2 text-left',

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

@@ -18,7 +18,7 @@ export interface SegmentGroupContext {
     readonly mint: MintProp;
 }
 /**
- * @description Inline segment control with animated sliding indicator for single-selection scenarios.
+ * @description Segment control with an animated sliding indicator for single selection; collapses to a vertical radio-style stack when its row can't fit the available width.
  * Compact mode/view switcher with smooth animation.
  *
  * @tag navigation

package/dist/primitives/Select/Select.svelte

@@ -373,7 +373,7 @@
     }
   }
 
-  function handleClickOutside(event: MouseEvent) {
+  function handleClickOutside(event: PointerEvent) {
     const target = event.target as Node;
     if (
       open &&
@@ -407,7 +407,7 @@
   const hasSelection = $derived(multiple ? selectedOptions.length > 0 : selectedOption !== null);
 </script>
 
-<svelte:window onclick={handleClickOutside} />
+<svelte:window onpointerdown={handleClickOutside} />
 
 <div
   class={unstyled

package/dist/primitives/Select/select.variants.js

@@ -26,12 +26,16 @@ export const selectVariants = tv({
         // `position`, `width`, `overflow-y` are set inline in Select.svelte
         // so the native `popover="manual"` top-layer rendering works
         // correctly and the UA's `overflow: auto` doesn't render a duplicate
-        // scrollbar. Width is sized by Floating UI's `size` middleware.
+        // scrollbar. Width AND a keyboard-aware max-height come from Floating
+        // UI's `size` middleware: it sets `--blocks-overlay-available-height`
+        // to the room left in the visual viewport (e.g. above the iOS keyboard);
+        // the `max-h-[min(15rem,…)]` below keeps 15rem as the upper design cap
+        // via `min()` and falls back to it whenever the var is unset.
         // tier: contain — floating dropdown panel.
         listbox: [
             'rounded-contain border',
             'bg-surface-elevated border-border-subtle shadow-[var(--blocks-shadow-md)]',
-            'max-h-60 p-1 space-y-0.5'
+            'max-h-[min(15rem,var(--blocks-overlay-available-height,100dvh))] p-1 space-y-0.5'
         ],
         option: [
             'flex w-full items-center gap-2 rounded-modify px-3 cursor-pointer select-none',

package/dist/utils/floating.js

@@ -240,8 +240,21 @@ export function size(options) {
         name: 'size',
         fn(state) {
             const overflow = detectOverflow(state);
-            const availableWidth = state.rects.floating.width - Math.max(0, overflow.left) - Math.max(0, overflow.right);
-            const availableHeight = state.rects.floating.height - Math.max(0, overflow.top) - Math.max(0, overflow.bottom);
+            const side = getSide(state.placement);
+            const vertical = side === 'top' || side === 'bottom';
+            // Room in the placement's MAIN axis is measured anchor → viewport edge:
+            // `dimension - overflow[side]` cancels the floating element's own
+            // dimension, so the value reflects true available room and grows back
+            // once space is restored. Subtracting the *clamped* overflow of both
+            // edges instead would only ever ratchet down — a one-way "latch" that
+            // keeps the panel short after the iOS keyboard closes. The CROSS axis
+            // keeps the "what currently fits between both edges" measure.
+            const availableWidth = vertical
+                ? state.rects.floating.width - Math.max(0, overflow.left) - Math.max(0, overflow.right)
+                : state.rects.floating.width - overflow[side];
+            const availableHeight = vertical
+                ? state.rects.floating.height - overflow[side]
+                : state.rects.floating.height - Math.max(0, overflow.top) - Math.max(0, overflow.bottom);
             options.apply({ ...state, availableWidth, availableHeight });
             const newW = state.elements.floating.offsetWidth;
             const newH = state.elements.floating.offsetHeight;
@@ -284,6 +297,21 @@ export function autoUpdate(reference, floating, callback) {
     }
     window.addEventListener('resize', callback);
     cleanups.push(() => window.removeEventListener('resize', callback));
+    // iOS Safari resizes and offsets the *visual* viewport when the on-screen
+    // keyboard opens (and during pinch-zoom / overscroll) WITHOUT firing a
+    // `window` 'resize' or 'scroll'. A `position: fixed` overlay would otherwise
+    // stay pinned to stale coordinates — visibly detaching from its anchor and
+    // drifting as the page settles. Tracking the visualViewport keeps anchored
+    // overlays glued to their reference on touch devices.
+    const vv = window.visualViewport;
+    if (vv) {
+        vv.addEventListener('resize', callback);
+        vv.addEventListener('scroll', callback, { passive: true });
+        cleanups.push(() => {
+            vv.removeEventListener('resize', callback);
+            vv.removeEventListener('scroll', callback);
+        });
+    }
     return () => {
         for (const fn of cleanups)
             fn();

package/dist/utils/use-floating-listbox.svelte.js

@@ -21,6 +21,9 @@ export function useFloatingListbox(opts) {
         if (!isOpen) {
             cleanupPosition?.();
             cleanupPosition = undefined;
+            // Drop the keyboard-aware height clamp so the next open re-measures from
+            // the full design cap instead of inheriting a stale value.
+            floating.style.removeProperty('--blocks-overlay-available-height');
             if (usePortal && floating.matches(':popover-open')) {
                 try {
                     floating.hidePopover();
@@ -50,15 +53,20 @@ export function useFloatingListbox(opts) {
                     offset(4),
                     flip(),
                     shift({ padding: 8 }),
-                    ...(syncWidth
-                        ? [
-                            floatingSize({
-                                apply({ rects }) {
-                                    floating.style.width = `${rects.reference.width}px`;
-                                }
-                            })
-                        ]
-                        : [])
+                    floatingSize({
+                        apply({ availableHeight, rects }) {
+                            // Cap the panel to the room actually left between the anchor and
+                            // the (visual) viewport edge — decisive on iOS, where the
+                            // keyboard shrinks the visualViewport. Exposed as a CSS var that
+                            // the variant feeds into `max-h-[min(15rem,var(--…))]`, so the
+                            // 15rem design token stays the upper bound while this tracks the
+                            // live available height (and recovers when room is restored).
+                            floating.style.setProperty('--blocks-overlay-available-height', `${Math.max(0, Math.round(availableHeight))}px`);
+                            if (syncWidth) {
+                                floating.style.width = `${rects.reference.width}px`;
+                            }
+                        }
+                    })
                 ]
             })
                 .then(({ x, y }) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@urbicon-ui/blocks",
-  "version": "6.3.6",
+  "version": "6.3.7",
   "description": "Svelte 5 UI component library with Tailwind CSS 4, OKLCH design tokens and zero runtime dependencies",
   "license": "MIT",
   "repository": {
@@ -91,8 +91,8 @@
     "@sveltejs/package": "^2.5.8",
     "@sveltejs/vite-plugin-svelte": "^7.0.0",
     "@tailwindcss/vite": "^4.3.1",
-    "@urbicon-ui/i18n": "6.3.6",
-    "@urbicon-ui/shared-types": "6.3.6",
+    "@urbicon-ui/i18n": "6.3.7",
+    "@urbicon-ui/shared-types": "6.3.7",
     "prettier": "^3.8.4",
     "prettier-plugin-svelte": "^4.1.1",
     "prettier-plugin-tailwindcss": "^0.8.0",