@urbicon-ui/blocks 6.3.3 → 6.3.7

package/dist/primitives/Combobox/combobox.variants.d.ts

@@ -150,6 +150,15 @@ export declare const comboboxVariants: (props?: import("../../utils/variants.js"
         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;
+    chevronButton: (props?: ({
+        tier?: "commit" | "modify" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        open?: boolean | undefined;
+        disabled?: 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;
     chevron: (props?: ({
         tier?: "commit" | "modify" | undefined;
         size?: "sm" | "md" | "lg" | undefined;

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',
@@ -44,11 +48,20 @@ export const comboboxVariants = tv({
             'transition-colors duration-[var(--blocks-duration-fast)]',
             'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50'
         ],
-        chevron: [
-            'absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none',
-            'text-text-tertiary w-4 h-4',
-            'transition-transform duration-[var(--blocks-duration-fast)]'
-        ]
+        // Chevron toggle button. The input opens on focus and can't "toggle
+        // closed" (re-clicking a focused field is a no-op), so the chevron is the
+        // discoverable open/close affordance. `tabindex={-1}` keeps it out of the
+        // tab order — the input is the single combobox tab stop — and an
+        // `onmousedown` preventDefault keeps focus on the input when it's clicked.
+        chevronButton: [
+            'absolute right-1.5 top-1/2 -translate-y-1/2',
+            'inline-flex items-center justify-center rounded-modify p-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',
+            'disabled:cursor-not-allowed disabled:hover:text-text-tertiary'
+        ],
+        chevron: ['w-4 h-4', 'transition-transform duration-[var(--blocks-duration-fast)]']
     },
     variants: {
         // 3-tier semantic radius for the Combobox input. Default `modify`.
@@ -59,7 +72,9 @@ export const comboboxVariants = tv({
         },
         size: {
             sm: {
-                input: 'h-8 px-3 pr-8 text-sm',
+                // `pointer-coarse:text-base` floors the input to 16px on touch-primary
+                // devices so iOS Safari doesn't auto-zoom (and never un-zoom) on focus.
+                input: 'h-8 px-3 pr-8 text-sm pointer-coarse:text-base',
                 option: 'px-2 py-1.5 text-sm min-h-[2rem]'
             },
             md: {

package/dist/primitives/Input/input.variants.js

@@ -54,13 +54,17 @@ export const inputVariants = tv({
         },
         size: {
             xs: {
-                base: 'h-7 px-2 text-xs',
+                // `pointer-coarse:text-base` floors the font to 16px on touch-primary
+                // devices (iPhone/iPad) — below 16px iOS Safari auto-zooms the field on
+                // focus and never restores the zoom. Desktop keeps the designed 12px.
+                base: 'h-7 px-2 text-xs pointer-coarse:text-base',
                 iconContainer: 'w-7',
                 iconButton: 'p-0.5 [&_svg]:w-3 [&_svg]:h-3',
                 iconDecoration: '[&_svg]:w-3 [&_svg]:h-3'
             },
             sm: {
-                base: 'h-8 px-3 text-sm',
+                // See `xs` — floor to 16px on touch to avoid iOS Safari focus-zoom.
+                base: 'h-8 px-3 text-sm pointer-coarse:text-base',
                 iconContainer: 'w-8',
                 iconButton: 'p-0.5 [&_svg]:w-3.5 [&_svg]:h-3.5',
                 iconDecoration: '[&_svg]:w-3.5 [&_svg]:h-3.5'

package/dist/primitives/Menu/Menu.svelte

@@ -62,6 +62,10 @@
   const tierCtx = getTierContext();
   const effectiveTier = $derived(tier ?? tierCtx?.tier ?? 'commit');
 
+  // The element that had focus when the menu opened (normally the trigger
+  // button) — captured in the open effect below and refocused by `dismiss()`
+  // on Escape / selection. Not bound to Popover's `triggerElement`; Popover
+  // anchors + excludes via its own internal trigger-wrapper.
   let triggerRef = $state<HTMLElement>();
   let panelRef = $state<HTMLElement>();
   let openSubMenus = $state<Set<string>>(new Set());
@@ -207,12 +211,31 @@
     items[items.length - 1]?.focus();
   }
 
-  // When the menu opens, move focus into it (W3C menu pattern: focus on
-  // the first item). Skipping this step would leave focus on the trigger
-  // and arrow-key navigation would not work until the user clicked.
+  // When the menu opens, move focus into it (W3C menu pattern) so arrow-key
+  // navigation works immediately — otherwise focus would stay on the trigger
+  // and the panel keydown handler would never receive keys.
+  //
+  // BUT focusing the first *item* paints a `:focus-visible` ring on it. That
+  // ring is desirable for keyboard users (they navigated here) and jarring
+  // for pointer users (a tap shouldn't pre-highlight an entry as if selected
+  // — the stray green ring report). So we branch on the opener's modality:
+  //   • keyboard-open (trigger matches `:focus-visible`) → focus first item
+  //   • pointer-open                                     → focus the ring-less
+  //     panel container; arrows still work (handlePanelKeydown falls back to
+  //     focusFirstItem / focusLastItem when no item is focused yet).
+  //
+  // We also capture the opener element here so `dismiss()` can restore focus
+  // to the trigger on Escape / selection (the previous `triggerRef` was never
+  // assigned, so that restore was a silent no-op).
   $effect(() => {
     if (!open) return;
-    queueMicrotask(() => focusFirstItem());
+    const opener = document.activeElement as HTMLElement | null;
+    if (opener && opener !== document.body) triggerRef = opener;
+    const openedViaKeyboard = opener?.matches?.(':focus-visible') ?? false;
+    queueMicrotask(() => {
+      if (openedViaKeyboard) focusFirstItem();
+      else panelRef?.focus();
+    });
   });
 
   function itemSizeForDepth(_depth: number): 'sm' | 'md' | 'lg' {
@@ -289,20 +312,26 @@
   // keys to here via their own onkeydown handler.
   function handlePanelKeydown(e: KeyboardEvent) {
     const target = e.target as HTMLElement | null;
-    const focused =
+    const active = document.activeElement as HTMLElement | null;
+    // Only treat a real menuitem as the navigation anchor. When focus is on
+    // the panel container itself (pointer-open), `focusedItem` is null and
+    // ArrowDown/Up fall back to focusing the first/last item.
+    const focusedItem =
       target?.getAttribute('role') === 'menuitem'
         ? target
-        : (document.activeElement as HTMLElement | null);
+        : active?.getAttribute('role') === 'menuitem'
+          ? active
+          : null;
 
     switch (e.key) {
       case 'ArrowDown':
         e.preventDefault();
-        if (focused) focusNextItem(focused);
+        if (focusedItem) focusNextItem(focusedItem);
         else focusFirstItem();
         break;
       case 'ArrowUp':
         e.preventDefault();
-        if (focused) focusPrevItem(focused);
+        if (focusedItem) focusPrevItem(focusedItem);
         else focusLastItem();
         break;
       case 'Home':
@@ -386,7 +415,6 @@
   <Popover
     bind:open
     placement={placement as import('../../utils/floating').Placement}
-    bind:triggerElement={triggerRef}
     {usePortal}
     autoTrigger={false}
     unstyled
@@ -399,9 +427,12 @@
       role="menu"
       tabindex={-1}
       onkeydown={handlePanelKeydown}
-      class={unstyled
-        ? (slotClasses?.content ?? '')
-        : styles.content({ class: slotClasses?.content })}
+      class={[
+        unstyled ? (slotClasses?.content ?? '') : styles.content({ class: slotClasses?.content }),
+        // Panel is programmatically focused on pointer-open as the ring-less
+        // anchor for arrow-key nav — suppress any UA outline on the container.
+        'focus:outline-none'
+      ]}
     >
       {#if customHeader}
         <div

package/dist/primitives/Popover/Popover.svelte

@@ -104,8 +104,21 @@
   // Manual mode disables the browser's automatic dismiss entirely, which
   // is the only way to veto Escape or outside-click selectively — the
   // `beforetoggle` event is intentionally not cancelable when closing.
+  //
+  // `autoTrigger=false` (external trigger) ALSO forces manual mode. Native
+  // `popover="auto"` light-dismiss treats the external trigger as "outside"
+  // (the browser only exempts a real `popovertarget` invoker, which we do
+  // not wire through Floating UI). So a tap on an open external trigger
+  // light-dismisses the popover on `pointerdown`, then the consumer's own
+  // `onclick` toggle re-opens it — the close-then-reopen flicker seen on
+  // mobile. Manual mode's outside-pointerdown handler instead excludes the
+  // trigger via `contains`, so the consumer's toggle is the single source
+  // of truth. Deterministic across browsers; no reliance on light-dismiss
+  // timing. Consumers with an external CLICK trigger (Menu, DatePicker)
+  // get a clean toggle; hover-driven external triggers (Calendar event
+  // popovers) are unaffected since they never relied on light-dismiss.
   const popoverMode = $derived<'auto' | 'manual'>(
-    closeOnEscape && closeOnClickOutside ? 'auto' : 'manual'
+    autoTrigger && closeOnEscape && closeOnClickOutside ? 'auto' : 'manual'
   );
 
   // ── Native popover state sync (popover="auto" mode only) ──
@@ -127,17 +140,6 @@
     return () => document.removeEventListener('keydown', handleEscape, true);
   });
 
-  // For external triggers (autoTrigger=false), track pointerdown to coordinate
-  // with light dismiss — prevents toggle-on-click when the trigger click causes dismiss.
-  $effect(() => {
-    if (!effectiveTriggerElement || autoTrigger) return;
-    function handlePointerDown() {
-      if (open) dismissedByTrigger = true;
-    }
-    effectiveTriggerElement.addEventListener('pointerdown', handlePointerDown);
-    return () => effectiveTriggerElement.removeEventListener('pointerdown', handlePointerDown);
-  });
-
   // Listen for native popover toggle events (light dismiss, Escape, programmatic).
   // Only relevant in `auto` mode — in manual mode the browser doesn't fire
   // toggle events for outside clicks or Escape, so the dismiss callbacks

package/dist/primitives/SegmentGroup/SegmentGroup.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { untrack } from 'svelte';
   import { SvelteMap } from 'svelte/reactivity';
   import { getBlocksConfig, resolveSlotClasses } from '../../provider';
   import { getTierContext } from '../../utils';
@@ -21,6 +22,7 @@
     slotClasses: slotClassesProp = {},
     preset,
     ariaLabel,
+    collapseOnOverflow = true,
     ...restProps
   }: SegmentGroupProps = $props();
 
@@ -35,6 +37,15 @@
 
   let containerElement = $state<HTMLDivElement>();
   let indicatorStyle = $state('opacity: 0;');
+  // Content-aware overflow degradation: when the horizontal track can't fit its
+  // available width, collapse to a vertical radio-style stack. `collapsed`
+  // drives the `data-collapsed` attribute (CSS does the layout switch).
+  let collapsed = $state(false);
+  // Horizontal content width recorded at the moment we collapse, used as the
+  // hysteresis threshold to expand back. Without it the check would oscillate:
+  // once vertical the track no longer overflows horizontally, so a naive
+  // re-measure would immediately switch back to horizontal and overflow again.
+  let naturalWidth = 0;
   // SvelteMap instead of `$state(new Map())` — `.set()`/`.delete()` must be
   // reactive so the indicator updates when new items register.
   const registeredItems = new SvelteMap<string, HTMLElement>();
@@ -121,9 +132,63 @@
 
   $effect(() => {
     void value;
+    // Reposition the indicator when the layout flips orientation — the active
+    // item's box moves from a horizontal slot to a full-width row.
+    void collapsed;
     requestAnimationFrame(updateIndicator);
   });
 
+  // Detects whether the horizontal track fits its available width. Reads
+  // layout, so it runs from the ResizeObserver callback rather than a reactive
+  // effect. The +1 tolerance + recorded `naturalWidth` give it hysteresis so it
+  // settles instead of flip-flopping at the boundary.
+  //
+  // We measure the items' own geometry rather than `el.scrollWidth`: the track
+  // is `overflow-x-clip`, which is NOT a scroll container, and Chromium/WebKit
+  // clamp `scrollWidth` to `clientWidth` for clip boxes (so the old scrollWidth
+  // check silently never fired off Firefox). `getBoundingClientRect()` reports
+  // true layout positions regardless of clipping.
+  function measureOverflow() {
+    const el = containerElement;
+    if (!el || el.clientWidth === 0 || registeredItems.size === 0) return;
+    if (!collapsed) {
+      let minLeft = Infinity;
+      let maxRight = -Infinity;
+      for (const item of registeredItems.values()) {
+        const r = item.getBoundingClientRect();
+        if (r.width === 0 && r.height === 0) continue; // not laid out yet
+        minLeft = Math.min(minLeft, r.left);
+        maxRight = Math.max(maxRight, r.right);
+      }
+      if (maxRight === -Infinity) return;
+      const cs = getComputedStyle(el);
+      const padX = (parseFloat(cs.paddingLeft) || 0) + (parseFloat(cs.paddingRight) || 0);
+      const contentWidth = maxRight - minLeft;
+      // Overflow when the items can't fit the content box (clientWidth − padding).
+      if (contentWidth > el.clientWidth - padX + 1) {
+        // Min box width that fits the horizontal track again (used as the
+        // expand-back threshold while collapsed, where the items are stacked
+        // and can no longer be measured horizontally).
+        naturalWidth = contentWidth + padX;
+        collapsed = true;
+      }
+    } else if (naturalWidth > 0 && el.clientWidth >= naturalWidth) {
+      collapsed = false;
+    }
+  }
+
+  $effect(() => {
+    if (!collapseOnOverflow || !containerElement) return;
+    const el = containerElement;
+    const ro = new ResizeObserver(() => measureOverflow());
+    ro.observe(el);
+    // `untrack` so the synchronous first measure doesn't make `collapsed` a
+    // dependency of this effect (which would tear down + rebuild the observer
+    // on every collapse toggle).
+    untrack(() => measureOverflow());
+    return () => ro.disconnect();
+  });
+
   function handleKeyDown(event: KeyboardEvent) {
     if (disabled) return;
 
@@ -165,6 +230,8 @@
 <div
   bind:this={containerElement}
   role="radiogroup"
+  data-collapsed={collapsed || undefined}
+  aria-orientation={collapsed ? 'vertical' : 'horizontal'}
   class={unstyled
     ? [slotClasses?.base, className].filter(Boolean).join(' ')
     : styles.base({ class: [slotClasses?.base, className] })}

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
@@ -59,6 +59,16 @@ export interface SegmentGroupProps extends SegmentGroupVariants, Omit<HTMLAttrib
     preset?: string;
     /** Accessible label for the segment group. */
     ariaLabel?: string;
+    /**
+     * When the segments can't fit their available width, collapse the horizontal
+     * track to a vertical radio-style stack (all options stay visible) instead of
+     * overflowing. Triggered by real measured overflow (ResizeObserver), not a
+     * viewport breakpoint, so it only engages when an instance genuinely doesn't
+     * fit — a 2-segment switcher that fits stays horizontal. Set `false` to keep
+     * the track horizontal (it still won't push the page wider than its parent).
+     * @default true
+     */
+    collapseOnOverflow?: boolean;
     /**
      * Micro-interaction effect applied to each segment item (per-item, not the container).
      * Accepts a preset name, an array of names, or configured mint objects.

package/dist/primitives/SegmentGroup/segmentgroup.variants.js

@@ -6,7 +6,18 @@ export const segmentGroupVariants = tv({
         // `commit` mirrors that. `modify` softens the track + indicator into a
         // compact rectangle for inline-toolbar contexts.
         base: [
-            'relative inline-flex items-center',
+            // `group` + `data-[collapsed]` drive the content-aware degradation below.
+            // `min-w-0 max-w-full` let the track shrink inside a flex/narrow parent
+            // instead of pushing the page wide; `overflow-x-clip` (with a clip-margin
+            // so focus rings aren't cut) contains any horizontal overflow until the
+            // ResizeObserver flips to the vertical stack.
+            'group relative inline-flex items-center',
+            'min-w-0 max-w-full overflow-x-clip [overflow-clip-margin:0.5rem]',
+            // Collapsed = real horizontal overflow detected → vertical radio-style
+            // stack (all options visible, large tap targets). SegmentGroup is already
+            // role=radiogroup, so this is layout-only; the 2D indicator follows the
+            // active row.
+            'data-[collapsed]:flex-col data-[collapsed]:items-stretch data-[collapsed]:w-full data-[collapsed]:overflow-visible',
             'bg-surface-interactive p-1',
             'transition-colors duration-[var(--blocks-duration-fast)]'
         ],
@@ -17,6 +28,9 @@ export const segmentGroupVariants = tv({
         ],
         item: [
             'relative z-10 flex items-center justify-center',
+            // In the collapsed (vertical) layout each item becomes a full-width,
+            // left-aligned row — see the `data-[collapsed]` block on `base`.
+            'group-data-[collapsed]:w-full group-data-[collapsed]:justify-start',
             'font-medium whitespace-nowrap cursor-pointer select-none',
             // `border-0` (not `border-none`) — keeps `border-style: solid` so the
             // text-appearance can add `border-b-[1.5px]` without a style conflict.

package/dist/primitives/Select/Select.svelte

@@ -109,6 +109,10 @@
   }));
 
   let activeIndex = $state(-1);
+  // Tracks whether the most recent open was keyboard-driven, so the initial
+  // active-option highlight only defaults to the first row for keyboard users.
+  // Plain `let`: read in the open effect, intentionally not a reactive dep.
+  let openedViaKeyboard = false;
   let triggerRef = $state<HTMLElement>();
   let listboxRef = $state<HTMLDivElement>();
 
@@ -205,15 +209,23 @@
     }
   });
 
+  // Initial active-option highlight when the listbox opens. Where the virtual
+  // cursor starts:
+  //   • the selected option, if any — shows the user where they are
+  //   • else the first option ONLY on keyboard-open — gives arrows a starting
+  //     point and matches the keyboard expectation of a focused first row
+  //   • else nothing (-1) on pointer-open — avoids the "first element always
+  //     marked" phantom highlight; the first ArrowDown then moves to row 0.
+  // The `activeIndex >= 0` guard preserves an in-progress cursor so multi-
+  // select (listbox stays open across picks) doesn't reset on every toggle.
   $effect(() => {
-    if (open && listboxRef) {
-      if (multiple) {
-        activeIndex = activeIndex >= 0 ? activeIndex : 0;
-      } else {
-        const selectedIdx = enabledOptions.findIndex((o) => o.value === value);
-        activeIndex = selectedIdx >= 0 ? selectedIdx : 0;
-      }
-    }
+    if (!open || !listboxRef) return;
+    if (activeIndex >= 0) return;
+    let next = -1;
+    const selectedIdx = multiple ? -1 : enabledOptions.findIndex((o) => o.value === value);
+    if (selectedIdx >= 0) next = selectedIdx;
+    else if (openedViaKeyboard) next = 0;
+    activeIndex = next;
   });
 
   useFloatingListbox({
@@ -226,6 +238,9 @@
 
   function toggle() {
     if (disabled) return;
+    // Pointer-driven open (trigger onclick). Mark modality so the open effect
+    // doesn't pre-highlight the first row for a mouse/touch user.
+    if (!open) openedViaKeyboard = false;
     open = !open;
     if (!open) activeIndex = -1;
   }
@@ -277,7 +292,7 @@
 
   // Focus-restoration policy follows the ARIA Listbox/Button pattern:
   //   • selection → focus returns to the trigger button (`selectOption`)
-  //   • Escape    → focus returns to the trigger button (handleListboxKeydown)
+  //   • Escape    → focus returns to the trigger button (handleTriggerKeydown)
   //   • Tab       → focus moves naturally to the next tab stop (no restore)
   //   • outside   → focus stays where the user clicked (no restore — user
   //                  explicitly intent to focus elsewhere)
@@ -289,69 +304,76 @@
     return true;
   }
 
+  // Single keyboard model, attached to the trigger (the focused element). The
+  // ARIA listbox pattern keeps DOM focus on the trigger and moves a virtual
+  // cursor via `aria-activedescendant`, so the listbox element never receives
+  // key events — every key is handled here, branching on `open`.
+  //
+  // (Previously a second handler lived on the listbox `div`; since focus never
+  // entered it, arrows were preventDefault'd but never advanced the cursor —
+  // the "keyboard does nothing / fights the page" report. Consolidated here.)
   function handleTriggerKeydown(event: KeyboardEvent) {
     if (disabled) return;
 
     switch (event.key) {
-      case 'Enter':
-      case ' ':
       case 'ArrowDown':
         event.preventDefault();
-        if (!open) open = true;
-        break;
-      case 'ArrowUp':
-        event.preventDefault();
-        if (!open) open = true;
-        break;
-      case 'Escape':
-        if (open && dismissByEscape()) {
-          event.preventDefault();
+        if (!open) {
+          openedViaKeyboard = true;
+          open = true;
+        } else {
+          activeIndex = activeIndex < enabledOptions.length - 1 ? activeIndex + 1 : 0;
         }
         break;
-    }
-  }
-
-  function handleListboxKeydown(event: KeyboardEvent) {
-    switch (event.key) {
-      case 'ArrowDown':
-        event.preventDefault();
-        activeIndex = activeIndex < enabledOptions.length - 1 ? activeIndex + 1 : 0;
-        break;
       case 'ArrowUp':
         event.preventDefault();
-        activeIndex = activeIndex > 0 ? activeIndex - 1 : enabledOptions.length - 1;
+        if (!open) {
+          openedViaKeyboard = true;
+          open = true;
+        } else {
+          activeIndex = activeIndex > 0 ? activeIndex - 1 : enabledOptions.length - 1;
+        }
         break;
       case 'Enter':
       case ' ':
         event.preventDefault();
-        if (activeIndex >= 0 && activeIndex < enabledOptions.length) {
+        if (!open) {
+          openedViaKeyboard = true;
+          open = true;
+        } else if (activeIndex >= 0 && activeIndex < enabledOptions.length) {
           selectOption(enabledOptions[activeIndex]);
         }
         break;
       case 'Escape':
-        if (dismissByEscape()) {
+        if (open && dismissByEscape()) {
           event.preventDefault();
           focusTrigger();
         }
         break;
       case 'Tab':
-        // Tab always closes (focus is leaving the widget regardless),
+        // Tab leaves the widget — close (focus moves on via the default tab),
         // independent of closeOnEscape/closeOnClickOutside.
-        open = false;
-        activeIndex = -1;
+        if (open) {
+          open = false;
+          activeIndex = -1;
+        }
         break;
       case 'Home':
-        event.preventDefault();
-        activeIndex = 0;
+        if (open) {
+          event.preventDefault();
+          activeIndex = 0;
+        }
         break;
       case 'End':
-        event.preventDefault();
-        activeIndex = enabledOptions.length - 1;
+        if (open) {
+          event.preventDefault();
+          activeIndex = enabledOptions.length - 1;
+        }
         break;
     }
   }
 
-  function handleClickOutside(event: MouseEvent) {
+  function handleClickOutside(event: PointerEvent) {
     const target = event.target as Node;
     if (
       open &&
@@ -385,7 +407,7 @@
   const hasSelection = $derived(multiple ? selectedOptions.length > 0 : selectedOption !== null);
 </script>
 
-<svelte:window onclick={handleClickOutside} />
+<svelte:window onpointerdown={handleClickOutside} />
 
 <div
   class={unstyled
@@ -512,7 +534,6 @@
           ? 'position: absolute; overflow-y: auto;'
           : 'display: none; position: absolute; overflow-y: auto;'}
       aria-labelledby={labelId}
-      onkeydown={handleListboxKeydown}
     >
       {#if open}
         {#if groups}

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/primitives/Textarea/textarea.variants.js

@@ -39,7 +39,9 @@ export const textareaVariants = tv({
             }
         },
         size: {
-            sm: { base: 'px-3 py-2 text-sm min-h-[5rem]' },
+            // `pointer-coarse:text-base` floors the font to 16px on touch so iOS
+            // Safari doesn't auto-zoom the field on focus. Desktop keeps 14px.
+            sm: { base: 'px-3 py-2 text-sm pointer-coarse:text-base min-h-[5rem]' },
             md: { base: 'px-4 py-3 text-base min-h-[7rem]' },
             lg: { base: 'px-6 py-4 text-lg min-h-[9rem]' }
         },

package/dist/translations/de.d.ts

@@ -15,6 +15,7 @@ declare const _default: {
         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";

package/dist/translations/de.js

@@ -15,6 +15,7 @@ export default {
         progress: 'Fortschritt',
         slider: 'Schieberegler',
         toggle: 'Umschalter',
+        toggleOptions: 'Optionen umschalten',
         removableBadge: 'Entfernbarer Badge',
         removeBadge: 'Badge entfernen',
         removeFile: '{{name}} entfernen'

package/dist/translations/en.d.ts

@@ -15,6 +15,7 @@ declare const _default: {
         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}}";

package/dist/translations/en.js

@@ -15,6 +15,7 @@ export default {
         progress: 'Progress',
         slider: 'Slider',
         toggle: 'Toggle',
+        toggleOptions: 'Toggle options',
         removableBadge: 'Removable badge',
         removeBadge: 'Remove badge',
         removeFile: 'Remove {{name}}'