@classic-homes/theme-svelte 1.41.0 → 1.42.1

package/dist/lib/components/DataPanel.svelte

@@ -356,6 +356,23 @@
     }
   });
 
+  /**
+   * Clamp a detached position so the panel (its header above all) stays inside
+   * the current viewport. The panel renders at `min(size, 100%)`, so clamp
+   * against that visible size: an oversized panel then pins to 0,0.
+   * Mirrors the React DataPanel's restore and window-resize clamping.
+   */
+  function clampDetachedPosition(position: Position, size: Size): Position {
+    const vw = layoutViewportWidth();
+    const vh = window.innerHeight;
+    return constrainPosition(
+      position,
+      { width: Math.min(size.width, vw), height: Math.min(size.height, vh) },
+      vw,
+      vh
+    );
+  }
+
   // Initialize from persistence on mount
   onMount(() => {
     // Update viewport dimensions
@@ -370,6 +387,13 @@
       viewportWidth = layoutViewportWidth();
       viewportHeight = window.innerHeight;
       cardExpandedHeight = viewportHeight * resolvedCardConfig.expandedRatio;
+      // Keep a detached panel reachable after the window shrinks
+      if (mode === 'detached') {
+        const clamped = clampDetachedPosition(detachedPosition, detachedSize);
+        if (clamped.x !== detachedPosition.x || clamped.y !== detachedPosition.y) {
+          detachedPosition = clamped;
+        }
+      }
     };
     window.addEventListener('resize', handleResize);
 
@@ -402,6 +426,11 @@
       }
     }
 
+    // A position restored from storage may have been saved on a larger screen
+    if (persistKey) {
+      detachedPosition = clampDetachedPosition(detachedPosition, detachedSize);
+    }
+
     // Escape-to-close is handled by useEscapeKey; focus trapping by useFocusTrap.
 
     return () => {

package/dist/lib/composables/useFocusTrap.svelte.js

@@ -15,13 +15,19 @@ function getFocusableElements(container) {
     const elements = container.querySelectorAll(FOCUSABLE_SELECTOR);
     return Array.from(elements).filter((el) => 
     // tabindex="-1" on a natively focusable element (roving-tabindex radios,
-    // toolbar buttons) takes it out of the Tab order, so it can't be the
-    // trap's first or last stop.
+    // toolbar buttons) takes it out of the Tab order, as do `inert`, `hidden`
+    // and a disabled <fieldset> ancestor, so none can be the trap's first or
+    // last stop.
     el.tabIndex >= 0 &&
-        !el.closest('[inert]') &&
+        !el.matches(':disabled') &&
+        !el.closest('[inert],[hidden]') &&
         el.offsetParent !== null &&
         getComputedStyle(el).visibility !== 'hidden');
 }
+/** True when `a` comes before `b` in document order. */
+function precedes(a, b) {
+    return Boolean(a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING);
+}
 /**
  * Creates a focus trap action for use with Svelte's use: directive.
  *
@@ -53,6 +59,7 @@ export function useFocusTrap(options = {}) {
     let container = $state(null);
     let previousActiveElement = null;
     let trapped = false;
+    let addedTabIndexTo = null;
     function isActive() {
         const active = currentOptions.active;
         return typeof active === 'function' ? active() : (active ?? true);
@@ -61,21 +68,39 @@ export function useFocusTrap(options = {}) {
         if (!trapped || event.key !== 'Tab' || !container)
             return;
         const preventScroll = currentOptions.preventScroll ?? false;
+        // Focus outside the container (e.g. a portaled nested popover) is not
+        // ours to move; the nested overlay manages its own Tab order.
+        const current = document.activeElement;
+        if (!current || !container.contains(current))
+            return;
         const focusableElements = getFocusableElements(container);
-        if (focusableElements.length === 0)
+        // Nothing tabbable: keep focus on the container instead of letting Tab
+        // walk out of the trap.
+        if (focusableElements.length === 0) {
+            event.preventDefault();
+            container.focus({ preventScroll });
             return;
+        }
         const firstElement = focusableElements[0];
         const lastElement = focusableElements[focusableElements.length - 1];
+        // Focus on the container itself: enter the tab sequence at the matching end.
+        if (current === container) {
+            event.preventDefault();
+            (event.shiftKey ? lastElement : firstElement).focus({ preventScroll });
+            return;
+        }
         if (event.shiftKey) {
-            // Shift + Tab: if on first element, move to last
-            if (document.activeElement === firstElement) {
+            // Shift + Tab from the first stop, or from a non-tabbable element before
+            // it (e.g. a clicked tabindex=-1 control), wraps to the last.
+            if (current === firstElement || precedes(current, firstElement)) {
                 event.preventDefault();
                 lastElement.focus({ preventScroll });
             }
         }
         else {
-            // Tab: if on last element, move to first
-            if (document.activeElement === lastElement) {
+            // Tab from the last stop, or from a non-tabbable element after it,
+            // wraps to the first.
+            if (current === lastElement || precedes(lastElement, current)) {
                 event.preventDefault();
                 firstElement.focus({ preventScroll });
             }
@@ -87,21 +112,27 @@ export function useFocusTrap(options = {}) {
         trapped = true;
         // Save current active element to return focus later
         previousActiveElement = document.activeElement;
-        // Focus initial element
+        // Focus initial element; an empty trap focuses the container itself,
+        // which needs a tabindex for that (removed again on deactivate).
         const preventScroll = currentOptions.preventScroll ?? false;
         const focusableElements = getFocusableElements(container);
-        if (focusableElements.length > 0) {
-            let elementToFocus = null;
-            if (currentOptions.initialFocus) {
-                elementToFocus = container.querySelector(currentOptions.initialFocus);
-            }
-            if (!elementToFocus) {
-                elementToFocus = focusableElements[0];
+        let elementToFocus = null;
+        if (currentOptions.initialFocus) {
+            elementToFocus = container.querySelector(currentOptions.initialFocus);
+        }
+        if (!elementToFocus) {
+            elementToFocus = focusableElements[0] ?? null;
+        }
+        if (!elementToFocus) {
+            if (!container.hasAttribute('tabindex')) {
+                container.setAttribute('tabindex', '-1');
+                addedTabIndexTo = container;
             }
-            requestAnimationFrame(() => {
-                elementToFocus?.focus({ preventScroll });
-            });
+            elementToFocus = container;
         }
+        requestAnimationFrame(() => {
+            elementToFocus?.focus({ preventScroll });
+        });
         document.addEventListener('keydown', handleKeyDown);
     }
     function deactivate() {
@@ -109,6 +140,8 @@ export function useFocusTrap(options = {}) {
             return;
         trapped = false;
         document.removeEventListener('keydown', handleKeyDown);
+        addedTabIndexTo?.removeAttribute('tabindex');
+        addedTabIndexTo = null;
         // Return focus when trap is deactivated
         const preventScroll = currentOptions.preventScroll ?? false;
         const elementToReturn = currentOptions.returnFocusTo ?? previousActiveElement;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@classic-homes/theme-svelte",
-  "version": "1.41.0",
+  "version": "1.42.1",
   "description": "Svelte components for the Classic theme system",
   "type": "module",
   "svelte": "./dist/lib/index.js",