@classic-homes/theme-svelte 0.1.56 → 1.0.1

package/dist/lib/components/DataPanel.svelte

@@ -29,6 +29,7 @@
     getPinnedResizeHandle,
     constrainSize,
     constrainPosition,
+    constrainResize,
     constrainPinnedWidth,
     constrainPinnedHeight,
     detectEdgeSnap,
@@ -47,6 +48,8 @@
   import DataPanelContent from './DataPanelContent.svelte';
   import DataPanelFooter from './DataPanelFooter.svelte';
   import DataPanelTab from './DataPanelTab.svelte';
+  import { useFocusTrap } from '../composables/useFocusTrap.svelte.js';
+  import { useEscapeKey } from '../composables/useEscapeKey.svelte.js';
 
   interface Props {
     /** Panel visibility */
@@ -150,6 +153,8 @@
   let detachedPosition = $state<Position>(DEFAULT_PANEL_STATE.detachedPosition);
   let detachedSize = $state<Size>(DEFAULT_PANEL_STATE.detachedSize);
   let pinnedSize = $state<number>(DEFAULT_PANEL_STATE.pinnedSize);
+  // Offset of the collapsed pinned tab along its edge
+  let internalTabOffset = $state<number>(DEFAULT_PANEL_STATE.tabOffset);
 
   // Card position state (horizontal position for card mode)
   let cardHorizontalPosition = $state<number>(0);
@@ -211,6 +216,18 @@
   const edge = $derived(propEdge ?? internalEdge);
   const isExpanded = $derived(propExpanded ?? internalExpanded);
 
+  // Whether the panel is currently presented as a modal dialog (detached, or an
+  // expanded mobile card). In that state we trap focus for a11y parity with React.
+  // A desktop card is a non-modal floating sheet with no scrim, so it must not
+  // trap focus — gate the card branch on isMobile.
+  const isDialog = $derived(mode === 'detached' || (variant === 'card' && isExpanded && isMobile));
+
+  // Trap focus inside the panel while it acts as a dialog; return focus on close.
+  const { action: focusTrap } = useFocusTrap({ active: () => open && isDialog });
+
+  // Close on Escape (all modes, matching the previous behavior) unless disabled.
+  useEscapeKey(() => handleClose(), { enabled: () => open && !disableClose });
+
   // Save timeout for debounced persistence
   let saveTimeout: ReturnType<typeof setTimeout> | null = null;
 
@@ -233,6 +250,7 @@
         detachedSize,
         pinnedSize,
         cardSnapIndex: 0, // Legacy field
+        tabOffset: internalTabOffset,
       });
       saveTimeout = null;
     }, 300);
@@ -240,6 +258,13 @@
 
   onDestroy(() => {
     if (saveTimeout) clearTimeout(saveTimeout);
+    // If we unmount mid-drag/resize (e.g. Escape closes the panel), the *End
+    // handlers never run — reset the body styles they own so the page isn't
+    // left stuck at grabbing cursor / no user-select.
+    if (typeof document !== 'undefined') {
+      document.body.style.cursor = '';
+      document.body.style.userSelect = '';
+    }
   });
 
   // Initialize from persistence on mount
@@ -270,6 +295,7 @@
         if (persisted.detachedPosition) detachedPosition = persisted.detachedPosition;
         if (persisted.detachedSize) detachedSize = persisted.detachedSize;
         if (persisted.pinnedSize) pinnedSize = persisted.pinnedSize;
+        if (persisted.tabOffset !== undefined) internalTabOffset = persisted.tabOffset;
       }
     }
 
@@ -287,17 +313,10 @@
       }
     }
 
-    // Handle escape key to close
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'Escape' && !disableClose) {
-        handleClose();
-      }
-    };
-    window.addEventListener('keydown', handleKeyDown);
+    // Escape-to-close is handled by useEscapeKey; focus trapping by useFocusTrap.
 
     return () => {
       window.removeEventListener('resize', handleResize);
-      window.removeEventListener('keydown', handleKeyDown);
     };
   });
 
@@ -347,6 +366,18 @@
     handleExpandedChange(!isExpanded);
   }
 
+  // Header collapse button. A detached full panel collapses by re-pinning to its
+  // last edge (edge always holds the previous pin, or the default) and showing the
+  // collapsed tab. Pinned/card just toggle expanded.
+  function handleCollapseToggle() {
+    if (variant === 'full' && mode === 'detached') {
+      handleModeChange('pinned');
+      handleExpandedChange(false);
+    } else {
+      handleToggleExpand();
+    }
+  }
+
   // Drag handlers for detached mode
   function handleDragStart(e: PointerEvent) {
     if (disableDrag) return;
@@ -632,13 +663,16 @@
         currentPos
       );
 
-      // Constrain size and position
-      const constrainedSize = constrainSize(result.size, resolvedConstraints);
-      const constrainedPosition = constrainPosition(
+      // Route through constrainResize so a left/top/corner resize that clamps to
+      // min/max compensates the position and keeps the anchored (right/bottom)
+      // edge fixed instead of drifting.
+      const { position: constrainedPosition, size: constrainedSize } = constrainResize(
         result.position,
-        constrainedSize,
+        result.size,
+        resolvedConstraints,
         window.innerWidth,
-        window.innerHeight
+        window.innerHeight,
+        resizeHandle
       );
 
       detachedSize = constrainedSize;
@@ -670,6 +704,130 @@
     debouncedSave();
   }
 
+  // Keyboard resize (arrow keys) — parity with the React ResizeHandles slider.
+  const KEYBOARD_RESIZE_STEP = 10; // pixels per key press
+  const KEYBOARD_RESIZE_STEP_LARGE = 50; // pixels per shift+key press
+
+  function handleResizeKeyDown(e: KeyboardEvent, handle: ResizeHandle) {
+    if (disableResize) return;
+    const step = e.shiftKey ? KEYBOARD_RESIZE_STEP_LARGE : KEYBOARD_RESIZE_STEP;
+
+    if (mode === 'detached') {
+      let width = detachedSize.width;
+      let height = detachedSize.height;
+      let handled = false;
+
+      switch (e.key) {
+        case 'ArrowUp':
+          if (handle.includes('top')) ((height += step), (handled = true));
+          else if (handle.includes('bottom')) ((height -= step), (handled = true));
+          break;
+        case 'ArrowDown':
+          if (handle.includes('top')) ((height -= step), (handled = true));
+          else if (handle.includes('bottom')) ((height += step), (handled = true));
+          break;
+        case 'ArrowLeft':
+          if (handle.includes('left')) ((width += step), (handled = true));
+          else if (handle.includes('right')) ((width -= step), (handled = true));
+          break;
+        case 'ArrowRight':
+          if (handle.includes('left')) ((width -= step), (handled = true));
+          else if (handle.includes('right')) ((width += step), (handled = true));
+          break;
+      }
+
+      if (handled) {
+        e.preventDefault();
+        // Left/top handles move the panel so the anchored (right/bottom) edge
+        // stays put as the size changes; right/bottom handles keep position.
+        // constrainResize then clamps size and compensates the position on clamp.
+        const candidatePosition = {
+          x: handle.includes('left')
+            ? detachedPosition.x + (detachedSize.width - width)
+            : detachedPosition.x,
+          y: handle.includes('top')
+            ? detachedPosition.y + (detachedSize.height - height)
+            : detachedPosition.y,
+        };
+        const { position, size } = constrainResize(
+          candidatePosition,
+          { width, height },
+          resolvedConstraints,
+          window.innerWidth,
+          window.innerHeight,
+          handle
+        );
+        detachedSize = size;
+        detachedPosition = position;
+        debouncedSave();
+      }
+    } else {
+      // Pinned mode - single handle grows/shrinks perpendicular to the edge.
+      const horizontal = isHorizontalEdge(edge);
+      let newSize = pinnedSize;
+      let handled = false;
+
+      if (horizontal) {
+        if (
+          (e.key === 'ArrowLeft' && edge === 'right') ||
+          (e.key === 'ArrowRight' && edge === 'left')
+        )
+          ((newSize += step), (handled = true));
+        else if (
+          (e.key === 'ArrowRight' && edge === 'right') ||
+          (e.key === 'ArrowLeft' && edge === 'left')
+        )
+          ((newSize -= step), (handled = true));
+      } else {
+        if ((e.key === 'ArrowUp' && edge === 'bottom') || (e.key === 'ArrowDown' && edge === 'top'))
+          ((newSize += step), (handled = true));
+        else if (
+          (e.key === 'ArrowDown' && edge === 'bottom') ||
+          (e.key === 'ArrowUp' && edge === 'top')
+        )
+          ((newSize -= step), (handled = true));
+      }
+
+      if (handled) {
+        e.preventDefault();
+        pinnedSize = horizontal
+          ? constrainPinnedWidth(newSize, resolvedConstraints, window.innerWidth)
+          : constrainPinnedHeight(newSize, resolvedConstraints, window.innerHeight);
+        debouncedSave();
+      }
+    }
+  }
+
+  // aria-value* for the resize sliders.
+  function resizeAriaNow(handle: ResizeHandle): number {
+    const isWidth = handle.includes('left') || handle.includes('right');
+    if (mode === 'detached') return isWidth ? detachedSize.width : detachedSize.height;
+    return pinnedSize;
+  }
+  function resizeAriaMin(handle: ResizeHandle): number {
+    const isWidth = handle.includes('left') || handle.includes('right');
+    return isWidth ? resolvedConstraints.minWidth : resolvedConstraints.minHeight;
+  }
+  function resizeAriaMax(handle: ResizeHandle): number {
+    const isWidth = handle.includes('left') || handle.includes('right');
+    return isWidth ? resolvedConstraints.maxWidth : resolvedConstraints.maxHeight;
+  }
+
+  // The eight detached resize handles, driving the {#each} in the template.
+  const detachedResizeHandles: {
+    handle: ResizeHandle;
+    orientation: 'horizontal' | 'vertical' | null;
+  }[] = [
+    { handle: 'top', orientation: 'horizontal' },
+    { handle: 'bottom', orientation: 'horizontal' },
+    { handle: 'left', orientation: 'vertical' },
+    { handle: 'right', orientation: 'vertical' },
+    { handle: 'top-left', orientation: null },
+    { handle: 'top-right', orientation: null },
+    { handle: 'bottom-left', orientation: null },
+    { handle: 'bottom-right', orientation: null },
+  ];
+
   // Card resize (top edge only when expanded)
   function handleCardResizeStart(e: PointerEvent) {
     if (variant !== 'card' || !isExpanded || disableResize) return;
@@ -780,6 +938,63 @@
     debouncedSave();
   }
 
+  // The current desktop card width (falls back to the computed default).
+  const cardDefaultWidth = $derived(
+    Math.min(viewportWidth - resolvedCardConfig.horizontalMargin * 2, resolvedCardConfig.maxWidth)
+  );
+  const cardCurrentWidth = $derived(cardWidth ?? cardDefaultWidth);
+  const cardHeightMin = $derived(CARD_HEADER_HEIGHT * 2);
+  const cardHeightMax = $derived(Math.round(viewportHeight * 0.95));
+
+  // Keyboard resize for the desktop card handles (parity with the full-variant
+  // sliders). Top edge steps height; left/right edges step width, with the left
+  // edge shifting position so the opposite edge stays anchored.
+  function handleCardResizeKeyDown(
+    e: KeyboardEvent,
+    kind: 'height' | 'width-left' | 'width-right'
+  ) {
+    if (disableResize) return;
+    const step = e.shiftKey ? KEYBOARD_RESIZE_STEP_LARGE : KEYBOARD_RESIZE_STEP;
+
+    if (kind === 'height') {
+      let delta = 0;
+      if (e.key === 'ArrowUp') delta = step;
+      else if (e.key === 'ArrowDown') delta = -step;
+      else return;
+      e.preventDefault();
+      cardExpandedHeight = Math.max(
+        cardHeightMin,
+        Math.min(cardHeightMax, cardExpandedHeight + delta)
+      );
+      debouncedSave();
+      return;
+    }
+
+    // Width handles.
+    let widthDelta = 0;
+    if (kind === 'width-right') {
+      if (e.key === 'ArrowRight') widthDelta = step;
+      else if (e.key === 'ArrowLeft') widthDelta = -step;
+    } else {
+      // Left edge: ArrowLeft grows leftward, ArrowRight shrinks.
+      if (e.key === 'ArrowLeft') widthDelta = step;
+      else if (e.key === 'ArrowRight') widthDelta = -step;
+    }
+    if (widthDelta === 0) return;
+    e.preventDefault();
+
+    const maxWidth = Math.min(
+      resolvedCardConfig.maxWidth,
+      viewportWidth - resolvedCardConfig.horizontalMargin * 2
+    );
+    const nextWidth = Math.max(CARD_MIN_WIDTH, Math.min(maxWidth, cardCurrentWidth + widthDelta));
+    const appliedDelta = nextWidth - cardCurrentWidth;
+    cardWidth = nextWidth;
+    // Left edge keeps its right edge fixed: growing width moves the panel left.
+    if (kind === 'width-left') cardHorizontalPosition -= appliedDelta;
+    debouncedSave();
+  }
+
   // Global event listeners
   function handlePointerMove(e: PointerEvent) {
     if (isDragging) handleDragMove(e);
@@ -810,9 +1025,13 @@
     ) {
       window.addEventListener('pointermove', handlePointerMove);
       window.addEventListener('pointerup', handlePointerUp);
+      // Treat a canceled pointer (OS gesture, scroll) like pointerup so we don't
+      // get stuck mid-interaction with body styles applied.
+      window.addEventListener('pointercancel', handlePointerUp);
       return () => {
         window.removeEventListener('pointermove', handlePointerMove);
         window.removeEventListener('pointerup', handlePointerUp);
+        window.removeEventListener('pointercancel', handlePointerUp);
       };
     }
   });
@@ -838,7 +1057,7 @@
   });
 
   // Calculate panel styles
-  const panelStyles = $derived(() => {
+  const panelStyles = $derived.by(() => {
     if (variant === 'card') {
       // Card mode - bottom sheet style
       const defaultCardWidth = Math.min(
@@ -895,7 +1114,7 @@
   );
 
   // Animation classes
-  const animationClass = $derived(() => {
+  const animationClass = $derived.by(() => {
     if (variant === 'card') {
       return 'animate-panel-slide-in-bottom';
     }
@@ -912,12 +1131,36 @@
 
   // Whether to show content (collapsed card only shows header)
   const showContent = $derived(variant !== 'card' || isExpanded || isCardVerticalDragging);
+
+  // Rotation for the header collapse chevron (base points up). For the full
+  // variant it points toward the edge the panel collapses to — the pinned edge,
+  // or, when detached, the edge it will re-pin to. The card toggles up (expand) /
+  // down (collapse).
+  const collapseChevronRotation = $derived<string>(
+    variant === 'full'
+      ? { top: '', bottom: 'rotate-180', left: '-rotate-90', right: 'rotate-90' }[edge]
+      : isExpanded
+        ? 'rotate-180'
+        : ''
+  );
 </script>
 
 {#if open}
   {#if variant === 'full' && !isExpanded && mode === 'pinned'}
     <!-- Collapsed tab (full variant only) -->
-    <DataPanelTab {title} {edge} onclick={handleTabClick} />
+    <DataPanelTab
+      {title}
+      {subtitle}
+      {edge}
+      {disableClose}
+      onclick={handleTabClick}
+      onClose={handleClose}
+      offset={internalTabOffset}
+      onOffsetChange={(o) => {
+        internalTabOffset = o;
+        debouncedSave();
+      }}
+    />
   {:else}
     <!-- Snap preview indicator (detached mode only) -->
     {#if snapPreview}
@@ -932,21 +1175,21 @@
       ></div>
     {/if}
 
-    <!-- Overlay for expanded card on mobile -->
+    <!-- Presentational scrim for the expanded mobile card. Keyboard users dismiss
+         via Escape (useEscapeKey); the backdrop is click-to-dismiss only. -->
     {#if variant === 'card' && isExpanded && isMobile}
+      <!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
       <div
         class="fixed inset-0 z-40 bg-black/50 transition-opacity"
         onclick={handleToggleExpand}
-        onkeydown={(e) => e.key === 'Enter' && handleToggleExpand()}
-        role="button"
-        tabindex="-1"
-        aria-label="Close panel"
+        aria-hidden="true"
       ></div>
     {/if}
 
     <!-- Panel -->
     <div
       bind:this={panelRef}
+      use:focusTrap
       class={cn(
         'fixed z-50 flex flex-col bg-background border border-border shadow-lg overflow-hidden',
         variant === 'full' && mode === 'pinned' && pinnedClasses,
@@ -960,14 +1203,14 @@
           !isResizing &&
           !isCardWidthResizing &&
           'transition-[height,left,width,transform] duration-300 ease-out',
-        animationClass(),
+        animationClass,
         className
       )}
-      style={Object.entries(panelStyles())
+      style={Object.entries(panelStyles)
         .map(([k, v]) => `${k}:${v}`)
         .join(';')}
       role={mode === 'detached' || variant === 'card' ? 'dialog' : 'complementary'}
-      aria-modal={mode === 'detached' || (variant === 'card' && isExpanded) ? 'true' : undefined}
+      aria-modal={isDialog ? 'true' : undefined}
       aria-labelledby={title ? 'data-panel-title' : undefined}
       aria-expanded={variant === 'card' ? isExpanded : undefined}
       tabindex="-1"
@@ -1052,18 +1295,13 @@
               title="Drag to move"
               onpointerdown={handleCardHeaderPointerDown}
             >
-              <svg
-                class="w-4 h-4 text-muted-foreground"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M4 8h16M4 16h16"
-                />
+              <svg class="w-4 h-4 text-muted-foreground" viewBox="0 0 24 24" fill="currentColor">
+                <circle cx="9" cy="6" r="1.5" />
+                <circle cx="15" cy="6" r="1.5" />
+                <circle cx="9" cy="12" r="1.5" />
+                <circle cx="15" cy="12" r="1.5" />
+                <circle cx="9" cy="18" r="1.5" />
+                <circle cx="15" cy="18" r="1.5" />
               </svg>
             </button>
           {/if}
@@ -1073,30 +1311,27 @@
             <button
               type="button"
               class="p-1.5 rounded hover:bg-muted"
-              onclick={handleToggleExpand}
+              onclick={handleCollapseToggle}
               aria-expanded={isExpanded}
               aria-label={isExpanded ? 'Collapse panel' : 'Expand panel'}
               title={isExpanded ? 'Collapse' : 'Expand'}
             >
-              {#if isExpanded}
-                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M19 9l-7 7-7-7"
-                  />
-                </svg>
-              {:else}
-                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M5 15l7-7 7 7"
-                  />
-                </svg>
-              {/if}
+              <!-- Base chevron points up; rotate it so that when pinned it points
+                   toward the pinned edge (the collapse direction), and for the card
+                   it toggles the usual up (expand) / down (collapse). -->
+              <svg
+                class={cn('w-4 h-4 transition-transform', collapseChevronRotation)}
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M5 15l7-7 7 7"
+                />
+              </svg>
             </button>
           {/if}
 
@@ -1148,52 +1383,30 @@
       <!-- Resize handles (full variant only) -->
       {#if variant === 'full' && !disableResize}
         {#if mode === 'detached'}
-          <!-- Edge handles -->
-          <div
-            class="resize-handle resize-handle--horizontal resize-handle--top"
-            role="separator"
-            aria-orientation="horizontal"
-            onpointerdown={(e) => handleResizeStart(e, 'top')}
-          ></div>
-          <div
-            class="resize-handle resize-handle--horizontal resize-handle--bottom"
-            role="separator"
-            aria-orientation="horizontal"
-            onpointerdown={(e) => handleResizeStart(e, 'bottom')}
-          ></div>
-          <div
-            class="resize-handle resize-handle--vertical resize-handle--left"
-            role="separator"
-            aria-orientation="vertical"
-            onpointerdown={(e) => handleResizeStart(e, 'left')}
-          ></div>
-          <div
-            class="resize-handle resize-handle--vertical resize-handle--right"
-            role="separator"
-            aria-orientation="vertical"
-            onpointerdown={(e) => handleResizeStart(e, 'right')}
-          ></div>
-          <!-- Corner handles (6px radius = 8px panel radius minus 2px offset) -->
-          <div
-            class="resize-handle resize-handle--corner resize-handle--top-left"
-            role="separator"
-            onpointerdown={(e) => handleResizeStart(e, 'top-left')}
-          ></div>
-          <div
-            class="resize-handle resize-handle--corner resize-handle--top-right"
-            role="separator"
-            onpointerdown={(e) => handleResizeStart(e, 'top-right')}
-          ></div>
-          <div
-            class="resize-handle resize-handle--corner resize-handle--bottom-left"
-            role="separator"
-            onpointerdown={(e) => handleResizeStart(e, 'bottom-left')}
-          ></div>
-          <div
-            class="resize-handle resize-handle--corner resize-handle--bottom-right"
-            role="separator"
-            onpointerdown={(e) => handleResizeStart(e, 'bottom-right')}
-          ></div>
+          <!-- Edge + corner handles: keyboard-resizable sliders (arrow keys, shift for large steps) -->
+          {#each detachedResizeHandles as { handle, orientation } (handle)}
+            <div
+              class={cn(
+                'resize-handle',
+                orientation === 'horizontal' && 'resize-handle--horizontal',
+                orientation === 'vertical' && 'resize-handle--vertical',
+                orientation === null && 'resize-handle--corner',
+                `resize-handle--${handle}`
+              )}
+              role="slider"
+              tabindex="0"
+              aria-orientation={orientation === 'vertical' ? 'vertical' : 'horizontal'}
+              aria-label={`Resize panel from ${handle.replace('-', ' ')} ${
+                handle.includes('-') ? 'corner' : 'edge'
+              }`}
+              aria-valuenow={resizeAriaNow(handle)}
+              aria-valuemin={resizeAriaMin(handle)}
+              aria-valuemax={resizeAriaMax(handle)}
+              aria-valuetext={`${resizeAriaNow(handle)} pixels`}
+              onpointerdown={(e) => handleResizeStart(e, handle)}
+              onkeydown={(e) => handleResizeKeyDown(e, handle)}
+            ></div>
+          {/each}
         {:else}
           <!-- Single resize handle for pinned mode -->
           {@const pinnedHandle = getPinnedResizeHandle(edge)}
@@ -1205,9 +1418,16 @@
               edge === 'top' && 'resize-handle--horizontal resize-handle--bottom',
               edge === 'bottom' && 'resize-handle--horizontal resize-handle--top'
             )}
-            role="separator"
-            aria-orientation={isHorizontalEdge(edge) ? 'vertical' : 'horizontal'}
+            role="slider"
+            tabindex="0"
+            aria-orientation={isHorizontalEdge(edge) ? 'horizontal' : 'vertical'}
+            aria-label={`Resize panel from ${edge} edge`}
+            aria-valuenow={pinnedSize}
+            aria-valuemin={resizeAriaMin(pinnedHandle)}
+            aria-valuemax={resizeAriaMax(pinnedHandle)}
+            aria-valuetext={`${pinnedSize} pixels`}
             onpointerdown={(e) => handleResizeStart(e, pinnedHandle)}
+            onkeydown={(e) => handleResizeKeyDown(e, pinnedHandle)}
           ></div>
         {/if}
       {/if}
@@ -1217,23 +1437,44 @@
         <!-- Top edge for height resize -->
         <div
           class="resize-handle resize-handle--horizontal resize-handle--top"
-          role="separator"
-          aria-orientation="horizontal"
+          role="slider"
+          tabindex="0"
+          aria-orientation="vertical"
+          aria-label="Resize card height"
+          aria-valuenow={Math.round(cardExpandedHeight)}
+          aria-valuemin={cardHeightMin}
+          aria-valuemax={cardHeightMax}
+          aria-valuetext={`${Math.round(cardExpandedHeight)} pixels`}
           onpointerdown={handleCardResizeStart}
+          onkeydown={(e) => handleCardResizeKeyDown(e, 'height')}
         ></div>
         <!-- Left edge for width resize -->
         <div
           class="resize-handle resize-handle--vertical resize-handle--left resize-handle--card-edge"
-          role="separator"
-          aria-orientation="vertical"
+          role="slider"
+          tabindex="0"
+          aria-orientation="horizontal"
+          aria-label="Resize card width from left edge"
+          aria-valuenow={Math.round(cardCurrentWidth)}
+          aria-valuemin={CARD_MIN_WIDTH}
+          aria-valuemax={resolvedCardConfig.maxWidth}
+          aria-valuetext={`${Math.round(cardCurrentWidth)} pixels`}
           onpointerdown={(e) => handleCardWidthResizeStart(e, 'left')}
+          onkeydown={(e) => handleCardResizeKeyDown(e, 'width-left')}
         ></div>
         <!-- Right edge for width resize -->
         <div
           class="resize-handle resize-handle--vertical resize-handle--right resize-handle--card-edge"
-          role="separator"
-          aria-orientation="vertical"
+          role="slider"
+          tabindex="0"
+          aria-orientation="horizontal"
+          aria-label="Resize card width from right edge"
+          aria-valuenow={Math.round(cardCurrentWidth)}
+          aria-valuemin={CARD_MIN_WIDTH}
+          aria-valuemax={resolvedCardConfig.maxWidth}
+          aria-valuetext={`${Math.round(cardCurrentWidth)} pixels`}
           onpointerdown={(e) => handleCardWidthResizeStart(e, 'right')}
+          onkeydown={(e) => handleCardResizeKeyDown(e, 'width-right')}
         ></div>
       {/if}
     </div>
@@ -1249,7 +1490,8 @@
     background: transparent;
   }
 
-  /* Edge handles - horizontal (top/bottom) */
+  /* Edge handles - invisible hit strip inset from the corners, with a 2px line
+     inset 2px from the panel edge so it aligns with the corner arcs' gap. */
   .resize-handle--horizontal {
     left: 14px;
     right: 14px;
@@ -1317,10 +1559,16 @@
     right: 0;
   }
 
-  /* Hover state for edge handles */
+  /* Hover / keyboard-focus state for edge handles */
   .resize-handle--horizontal:hover::after,
-  .resize-handle--vertical:hover::after {
-    background: hsl(var(--border));
+  .resize-handle--vertical:hover::after,
+  .resize-handle--horizontal:focus-visible::after,
+  .resize-handle--vertical:focus-visible::after {
+    background: hsl(var(--ring));
+  }
+
+  .resize-handle:focus-visible {
+    outline: none;
   }
 
   /* Card edge handles - extend to bottom edge (no bottom corners) */
@@ -1423,4 +1671,25 @@
     border-bottom-color: hsl(var(--border)) !important;
     border-right-color: hsl(var(--border)) !important;
   }
+
+  /* Keyboard-focus state for corner handles */
+  .resize-handle--top-left:focus-visible::after {
+    border-top-color: hsl(var(--ring)) !important;
+    border-left-color: hsl(var(--ring)) !important;
+  }
+
+  .resize-handle--top-right:focus-visible::after {
+    border-top-color: hsl(var(--ring)) !important;
+    border-right-color: hsl(var(--ring)) !important;
+  }
+
+  .resize-handle--bottom-left:focus-visible::after {
+    border-bottom-color: hsl(var(--ring)) !important;
+    border-left-color: hsl(var(--ring)) !important;
+  }
+
+  .resize-handle--bottom-right:focus-visible::after {
+    border-bottom-color: hsl(var(--ring)) !important;
+    border-right-color: hsl(var(--ring)) !important;
+  }
 </style>