@urbicon-ui/blocks 6.3.3 → 6.3.7

package/dist/components/CommandPalette/commandPalette.variants.js

@@ -8,7 +8,9 @@ export const commandPaletteVariants = tv({
         ],
         inputWrapper: ['flex items-center gap-3 border-b border-border-hairline px-4'],
         input: [
-            'w-full border-0 bg-transparent py-3 text-sm',
+            // `pointer-coarse:text-base` floors the search field to 16px on touch
+            // devices — below 16px iOS Safari auto-zooms on focus and never restores.
+            'w-full border-0 bg-transparent py-3 text-sm pointer-coarse:text-base',
             'text-text-primary placeholder:text-text-quaternary focus:outline-none'
         ],
         inputIcon: 'h-4 w-4 shrink-0 text-text-tertiary',

package/dist/i18n/index.d.ts

@@ -17,6 +17,7 @@ declare const blocksTranslations: {
             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}}";
@@ -185,6 +186,7 @@ declare const blocksTranslations: {
             readonly progress: "Fortschritt";
             readonly slider: "Schieberegler";
             readonly toggle: "Umschalter";
+            readonly toggleOptions: "Optionen umschalten";
             readonly removableBadge: "Entfernbarer Badge";
             readonly removeBadge: "Badge entfernen";
             readonly removeFile: "{{name}} entfernen";
@@ -337,174 +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 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`):
@@ -517,174 +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 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

@@ -66,6 +66,7 @@
   const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
 
   let inputEl = $state<HTMLInputElement>();
+  let wrapperEl = $state<HTMLElement>();
   let listboxEl = $state<HTMLElement>();
   let activeIndex = $state(-1);
 
@@ -135,6 +136,24 @@
     if (!disabled) open = true;
   }
 
+  // Chevron toggle. The input opens on focus but has no way to close itself
+  // (re-clicking a focused field is a no-op — the "trigger doesn't close it"
+  // report), so the chevron button is the explicit open/close affordance.
+  // Focus stays on the input throughout (the chevron's onmousedown calls
+  // preventDefault), so closing here doesn't blur-then-reopen via handleFocus.
+  function toggleOpen() {
+    if (disabled) return;
+    if (open) {
+      open = false;
+      // Restore the selected label if the query was left dangling (mirrors the
+      // click-outside path), so the field doesn't read as blank after closing.
+      if (!value && selectedOption) query = selectedOption.label;
+    } else {
+      open = true;
+      inputEl?.focus();
+    }
+  }
+
   function scrollToActive() {
     tick().then(() => {
       if (!listboxEl) return;
@@ -212,9 +231,12 @@
     }
   }
 
-  function handleClickOutside(event: MouseEvent) {
+  function handleClickOutside(event: PointerEvent) {
     const target = event.target as Node;
-    if (!inputEl?.contains(target) && !listboxEl?.contains(target)) {
+    // Exclude the whole input wrapper (input + chevron toggle + clear button),
+    // so clicking the chevron to close doesn't race this handler into a
+    // close-then-reopen. The listbox lives in the top layer (separate subtree).
+    if (!wrapperEl?.contains(target) && !listboxEl?.contains(target)) {
       if (!closeOnClickOutside) return;
       open = false;
       if (!value && selectedOption) {
@@ -226,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);
     }
   });
 
@@ -273,6 +299,7 @@
   {/if}
 
   <div
+    bind:this={wrapperEl}
     class={unstyled
       ? (slotClasses?.inputWrapper ?? '')
       : styles.inputWrapper({ class: slotClasses?.inputWrapper })}
@@ -309,11 +336,25 @@
         <CloseIcon class="h-3.5 w-3.5" />
       </button>
     {:else}
-      <ChevronDownIcon
+      <button
+        type="button"
+        tabindex={-1}
+        {disabled}
+        aria-label={bt('accessibility.toggleOptions')}
+        aria-controls={listboxId}
+        aria-expanded={open}
+        onmousedown={(e) => e.preventDefault()}
+        onclick={toggleOpen}
         class={unstyled
-          ? (slotClasses?.chevron ?? '')
-          : styles.chevron({ class: slotClasses?.chevron })}
-      />
+          ? (slotClasses?.chevronButton ?? '')
+          : styles.chevronButton({ class: slotClasses?.chevronButton })}
+      >
+        <ChevronDownIcon
+          class={unstyled
+            ? (slotClasses?.chevron ?? '')
+            : styles.chevron({ class: slotClasses?.chevron })}
+        />
+      </button>
     {/if}
 
     {#if name}