@urbicon-ui/blocks 6.3.3 → 6.3.6

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";
@@ -354,6 +356,7 @@ export declare const blocksI18n: import("@urbicon-ui/i18n").PackageI18n<{
         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}}";
@@ -534,6 +537,7 @@ export declare const useBlocksI18n: () => import("@urbicon-ui/i18n").TypedTransl
         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/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;
@@ -214,7 +233,10 @@
 
   function handleClickOutside(event: MouseEvent) {
     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) {
@@ -273,6 +295,7 @@
   {/if}
 
   <div
+    bind:this={wrapperEl}
     class={unstyled
       ? (slotClasses?.inputWrapper ?? '')
       : styles.inputWrapper({ class: slotClasses?.inputWrapper })}
@@ -309,11 +332,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}

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

@@ -44,11 +44,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 +68,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

@@ -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,64 +304,71 @@
     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;
     }
   }
@@ -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/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}}'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@urbicon-ui/blocks",
-  "version": "6.3.3",
+  "version": "6.3.6",
   "description": "Svelte 5 UI component library with Tailwind CSS 4, OKLCH design tokens and zero runtime dependencies",
   "license": "MIT",
   "repository": {
@@ -80,27 +80,27 @@
     "./dist/i18n/index.d.ts"
   ],
   "peerDependencies": {
-    "svelte": "^5.56.3",
-    "@sveltejs/kit": "^2.65.2",
+    "svelte": "^5.56.4",
+    "@sveltejs/kit": "^2.67.0",
     "@urbicon-ui/i18n": "^6.0.0",
     "@urbicon-ui/shared-types": "^6.0.0"
   },
   "dependencies": {},
   "devDependencies": {
-    "@sveltejs/kit": "^2.65.2",
+    "@sveltejs/kit": "^2.67.0",
     "@sveltejs/package": "^2.5.8",
     "@sveltejs/vite-plugin-svelte": "^7.0.0",
     "@tailwindcss/vite": "^4.3.1",
-    "@urbicon-ui/i18n": "6.3.3",
-    "@urbicon-ui/shared-types": "6.3.3",
+    "@urbicon-ui/i18n": "6.3.6",
+    "@urbicon-ui/shared-types": "6.3.6",
     "prettier": "^3.8.4",
     "prettier-plugin-svelte": "^4.1.1",
     "prettier-plugin-tailwindcss": "^0.8.0",
-    "svelte": "^5.56.3",
-    "svelte-check": "^4.6.0",
+    "svelte": "^5.56.4",
+    "svelte-check": "^4.7.1",
     "tailwindcss": "^4.3.1",
     "typescript": "^6.0.3",
-    "vite": "^8.0.16",
+    "vite": "^8.1.0",
     "vitest": "^4.1.9"
   }
 }