@urbicon-ui/blocks 6.3.3 → 6.3.7

package/dist/utils/floating.js

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

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@urbicon-ui/blocks",
-  "version": "6.3.3",
+  "version": "6.3.7",
   "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.7",
+    "@urbicon-ui/shared-types": "6.3.7",
     "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"
   }
 }