@classic-homes/theme-svelte 1.3.0 → 1.5.0

package/dist/lib/components/DataPanel.svelte

@@ -19,7 +19,6 @@
     DEFAULT_CARD_CONFIG,
     DEFAULT_TAB_WIDTH,
     CARD_HEADER_HEIGHT,
-    CARD_EXPANDED_RATIO,
     CARD_MIN_WIDTH,
     loadPanelState,
     savePanelState,
@@ -116,6 +115,12 @@
     snapThreshold?: number;
     /** Distance in pixels to drag before detaching from pinned mode (0 to disable) */
     detachThreshold?: number;
+    /**
+     * Viewport width (px) below which the panel uses mobile behaviors
+     * (card scrim, focus trap, card drag). Default 640. Pass 768 for apps
+     * that switch layouts at md.
+     */
+    mobileBreakpoint?: number;
     /** Custom header content (replaces title/subtitle) */
     header?: Snippet;
     /** Custom header actions */
@@ -155,6 +160,7 @@
     persistKey,
     snapThreshold = 20,
     detachThreshold = 40,
+    mobileBreakpoint = 640,
     header,
     headerActions,
     footer,
@@ -166,6 +172,20 @@
   const resolvedConstraints = $derived({ ...DEFAULT_CONSTRAINTS, ...constraints });
   const resolvedCardConfig = $derived({ ...DEFAULT_CARD_CONFIG, ...cardConfig });
 
+  /**
+   * Default left offset for the card sheet, honoring cardConfig.align.
+   * Drag/resize bounds derive from the same offset so existing
+   * interactions are unaffected by non-center alignment.
+   */
+  function cardDefaultLeftOffset(width: number): number {
+    const margin = resolvedCardConfig.horizontalMargin;
+    if (resolvedCardConfig.align === 'left') return margin;
+    if (resolvedCardConfig.align === 'right') {
+      return Math.max(margin, viewportWidth - width - margin);
+    }
+    return Math.max(margin, (viewportWidth - width) / 2);
+  }
+
   // Internal state - initialized from props or persistence
   let internalMode = $state<PanelMode>(DEFAULT_PANEL_STATE.mode);
   let internalVariant = $state<PanelVariant>(DEFAULT_PANEL_STATE.variant);
@@ -229,7 +249,7 @@
   let viewportHeight = $state(typeof window !== 'undefined' ? window.innerHeight : 768);
 
   // Detect mobile
-  let isMobile = $derived(viewportWidth < 640);
+  let isMobile = $derived(viewportWidth < mobileBreakpoint);
 
   // Derived state - use props if provided, otherwise internal state
   const mode = $derived(propMode ?? internalMode);
@@ -295,13 +315,13 @@
     viewportHeight = window.innerHeight;
 
     // Initialize card expanded height
-    cardExpandedHeight = viewportHeight * CARD_EXPANDED_RATIO;
+    cardExpandedHeight = viewportHeight * resolvedCardConfig.expandedRatio;
 
     // Listen for resize
     const handleResize = () => {
       viewportWidth = window.innerWidth;
       viewportHeight = window.innerHeight;
-      cardExpandedHeight = viewportHeight * CARD_EXPANDED_RATIO;
+      cardExpandedHeight = viewportHeight * resolvedCardConfig.expandedRatio;
     };
     window.addEventListener('resize', handleResize);
 
@@ -583,10 +603,7 @@
         viewportWidth - resolvedCardConfig.horizontalMargin * 2,
         resolvedCardConfig.maxWidth
       );
-      const defaultLeftOffset = Math.max(
-        resolvedCardConfig.horizontalMargin,
-        (viewportWidth - cardWidth) / 2
-      );
+      const defaultLeftOffset = cardDefaultLeftOffset(cardWidth);
       // Calculate bounds: can move from left margin to right margin
       const minOffset = -(defaultLeftOffset - resolvedCardConfig.horizontalMargin);
       const maxOffset =
@@ -898,10 +915,7 @@
     cardWidthResizeStartWidth = currentWidth;
 
     // Calculate current left position
-    const defaultLeftOffset = Math.max(
-      resolvedCardConfig.horizontalMargin,
-      (viewportWidth - defaultCardWidth) / 2
-    );
+    const defaultLeftOffset = cardDefaultLeftOffset(defaultCardWidth);
     cardWidthResizeStartLeft = defaultLeftOffset + cardHorizontalPosition;
 
     document.body.style.cursor = 'ew-resize';
@@ -940,10 +954,7 @@
           viewportWidth - resolvedCardConfig.horizontalMargin * 2,
           resolvedCardConfig.maxWidth
         );
-        const defaultLeftOffset = Math.max(
-          resolvedCardConfig.horizontalMargin,
-          (viewportWidth - defaultCardWidth) / 2
-        );
+        const defaultLeftOffset = cardDefaultLeftOffset(defaultCardWidth);
         cardHorizontalPosition = newLeft - defaultLeftOffset;
       }
     }
@@ -1087,10 +1098,7 @@
       );
       // Use custom cardWidth if set, otherwise use default
       const actualCardWidth = cardWidth ?? defaultCardWidth;
-      const defaultLeftOffset = Math.max(
-        resolvedCardConfig.horizontalMargin,
-        (viewportWidth - defaultCardWidth) / 2
-      );
+      const defaultLeftOffset = cardDefaultLeftOffset(defaultCardWidth);
 
       // Height based on expanded state or drag
       let height: number;

package/dist/lib/components/DataPanel.svelte.d.ts

@@ -64,6 +64,12 @@ interface Props {
     snapThreshold?: number;
     /** Distance in pixels to drag before detaching from pinned mode (0 to disable) */
     detachThreshold?: number;
+    /**
+     * Viewport width (px) below which the panel uses mobile behaviors
+     * (card scrim, focus trap, card drag). Default 640. Pass 768 for apps
+     * that switch layouts at md.
+     */
+    mobileBreakpoint?: number;
     /** Custom header content (replaces title/subtitle) */
     header?: Snippet;
     /** Custom header actions */

package/dist/lib/components/Dialog.svelte

@@ -117,7 +117,7 @@
             {/if}
             {#if showClose}
               <DialogPrimitive.Close
-                class="flex h-9 w-9 items-center justify-center rounded-md bg-transparent text-muted-foreground hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none"
+                class="flex h-9 w-9 items-center justify-center rounded-md bg-transparent text-muted-foreground hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none relative after:absolute after:-inset-1 after:content-['']"
                 aria-label="Close dialog"
               >
                 <svg

package/dist/lib/components/Slider.svelte

@@ -10,7 +10,7 @@
       root: 'relative flex w-full touch-none select-none items-center',
       range: 'absolute h-full bg-primary rounded-full',
       thumb:
-        'block rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+        "block rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 relative after:absolute after:left-1/2 after:top-1/2 after:h-11 after:w-11 after:-translate-x-1/2 after:-translate-y-1/2 after:rounded-full after:content-['']",
     },
     variants: {
       size: {

package/dist/lib/components/media/MediaCarousel.svelte

@@ -87,7 +87,7 @@
   const positionLabel = $derived(`${index + 1} of ${items.length}`);
 
   const buttonClass =
-    'inline-flex h-10 w-10 items-center justify-center rounded-full border border-border bg-background/90 text-foreground shadow-sm outline-none hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-40';
+    "inline-flex h-10 w-10 items-center justify-center rounded-full border border-border bg-background/90 text-foreground shadow-sm outline-none hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-40 relative after:absolute after:-inset-0.5 after:rounded-full after:content-['']";
 
   function goTo(next: number, smooth = true) {
     if (items.length === 0) return;

package/package.json

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