@hkdigital/lib-sveltekit 0.1.90 → 0.1.92

package/dist/components/drag-drop/DropZone.svelte

@@ -24,8 +24,9 @@
    *   accepts?: (item: any) => boolean,
    *   base?: string,
    *   classes?: string,
-   *   height?: string,
-   *   autoHeight?: boolean,
+   *   minHeight?: string,
+   *   maxHeight?: string,
+   *   heightMode?: 'fixed' | 'flexible' | 'fill',
    *   children?: import('svelte').Snippet,
    *   contextKey?: import('../../typedef').ContextKey,
    *   dropPreviewSnippet?: import('svelte').Snippet<[DragData]>,
@@ -67,8 +68,9 @@
     accepts = () => true,
     base = '',
     classes = '',
-    height = 'h-min',
-    autoHeight = false,
+    minHeight = '',
+    maxHeight = '',
+    heightMode = 'fixed',
     children,
     contextKey,
     dropPreviewSnippet,
@@ -83,15 +85,24 @@
     ...attrs
   } = $props();
 
+  // let debugEvents = [];
+
   const dragState = createOrGetDragState(contextKey);
 
   let currentState = $state(READY);
-  let dropZoneElement; // Reference to the drop zone DOM element
 
-  // We'll use a flag to track if we're currently in the drop zone
-  // without relying on a counter approach
+  let dropZoneElement = $state(null);
+
+  // $effect( () => {
+  //   if(dropZoneElement) {
+  //     console.debug(dropZoneElement);
+  //   }
+  // } )
+
   let isCurrentlyOver = $state(false);
 
+  // $inspect({ zone, isCurrentlyOver });
+
   // Cleanup function
   let cleanup;
 
@@ -104,13 +115,41 @@
 
     document.addEventListener('dragend', handleGlobalDragEnd);
 
+    // console.debug(`DropZone ${zone} mounted`);
+
     cleanup = () => {
       document.removeEventListener('dragend', handleGlobalDragEnd);
     };
+
+    return cleanup;
   });
 
-  onDestroy(() => {
-    cleanup?.();
+  // Computed height classes based on mode
+  let heightClasses = $derived.by(() => {
+    const classes = [];
+
+    switch (heightMode) {
+      case 'flexible':
+        // Flexible height with optional min/max constraints
+        if (minHeight) classes.push(minHeight);
+        else classes.push('min-h-[100px]'); // Default minimum
+        if (maxHeight) {
+          classes.push(maxHeight);
+          classes.push('overflow-y-auto');
+        }
+        break;
+      case 'fill':
+        // Fill the parent container
+        classes.push('h-full');
+        break;
+      case 'fixed':
+      default:
+        // Fixed height (default to min-height if not filling)
+        classes.push('h-min');
+        break;
+    }
+
+    return classes.join(' ');
   });
 
   // Computed state object for CSS classes
@@ -185,13 +224,46 @@
    * @param {DragEvent} event
    */
   function handleDragEnter(event) {
+    // debugEvents.push({
+    //   event: 'dragEnter',
+    //   target: event.target,
+    //   currentTarget: event.currentTarget,
+    //   isCurrentlyOver
+    // });
+
+    // console.log('dragEnter:', { zone });
+
     // Prevent default to allow drop
     event.preventDefault();
 
-    // If we're already in a drag-over state, don't reset anything
-    if (isCurrentlyOver) return;
+    // Check if mouse is actually within drop zone boundaries
+    const rect = dropZoneElement.getBoundingClientRect();
+    const x = event.clientX;
+    const y = event.clientY;
+
+    const isWithinBounds =
+      x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom;
+
+    if (!isWithinBounds) {
+      // Don't enter if mouse is outside bounds
+      // console.debug('Mouse outside bounds', {
+      //   x,
+      //   y,
+      //   top: rect.top,
+      //   bottom: rect.bottom,
+      //   left: rect.left,
+      //   right: rect.right
+      // });
+
+      dropZoneElement.style.border = "solid 10px purple";
+      return;
+    }
+
+    if (isCurrentlyOver) {
+      // console.debug('Already over');
+      return;
+    }
 
-    // Now we're over this drop zone
     isCurrentlyOver = true;
 
     // Get the drag data
@@ -213,11 +285,56 @@
    * @param {DragEvent} event
    */
   function handleDragOver(event) {
+    // console.log('dragOver', {zone}, event );
+    // console.log('dragOver', {
+    //     zone,
+    //     eventTarget: event.target.closest('[data-zone]')?.dataset?.zone,
+    //     currentTarget: event.currentTarget.dataset?.zone,
+    //     path: event.composedPath().map(el => el.dataset?.zone || el.tagName)
+    // });
+
+    // debugEvents.push({
+    //   event: 'handleDragOver',
+    //   target: event.target,
+    //   currentTarget: event.currentTarget,
+    //   isCurrentlyOver,
+    //   contains: dropZoneElement.contains(event.target),
+    //   mouseX: event.clientX,
+    //   mouseY: event.clientY,
+    //   dropZoneBounds: dropZoneElement.getBoundingClientRect()
+    // });
+
+    // console.log('dragOver:', {
+    //   target: event.target,
+    //   currentTarget: event.currentTarget,
+    //   isCurrentlyOver,
+    //   contains: dropZoneElement.contains(event.target)
+    // });
+
+    // Check if mouse is actually within drop zone boundaries
+    const rect = dropZoneElement.getBoundingClientRect();
+    const x = event.clientX;
+    const y = event.clientY;
+
+    const isWithinBounds =
+      x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom;
+
+    if (!isWithinBounds) {
+      // Mouse is outside bounds, treat as leave
+      if (isCurrentlyOver) {
+        isCurrentlyOver = false;
+        currentState = READY;
+        onDragLeave?.({ event, zone });
+      }
+      return;
+    }
+
+    // console.log('dragOver (accepted)', {zone});
+
     // Prevent default to allow drop
     event.preventDefault();
 
-    // If we're not currently over this drop zone (despite dragover firing),
-    // treat it as an enter event
+    // If we're not currently over this drop zone, treat it as an enter
     if (!isCurrentlyOver) {
       handleDragEnter(event);
       return;
@@ -247,6 +364,23 @@
    * @param {DragEvent} event
    */
   function handleDragLeave(event) {
+    // debugEvents.push({
+    //   event: 'handleDragLeave',
+    //   target: event.target,
+    //   currentTarget: event.currentTarget,
+    //   relatedTarget: event.relatedTarget,
+    //   isCurrentlyOver,
+    //   isActuallyLeaving: !event.relatedTarget || !dropZoneElement.contains(event.relatedTarget)
+    // });
+
+    // console.log('dragLeave:', {
+    //   target: event.target,
+    //   currentTarget: event.currentTarget,
+    //   relatedTarget: event.relatedTarget,
+    //   isCurrentlyOver,
+    //   isActuallyLeaving: !event.relatedTarget || !dropZoneElement.contains(event.relatedTarget)
+    // });
+
     // We need to check if we're actually leaving the drop zone or just
     // entering a child element within the drop zone
 
@@ -269,9 +403,16 @@
    * @param {DragEvent} event
    */
   function handleDrop(event) {
+    // console.debug( JSON.stringify(debugEvents, null, 2));
+
     // Prevent default browser actions
     event.preventDefault();
 
+    if (!isCurrentlyOver) {
+      // Prevent drop if not currently over
+      return;
+    }
+
     // Reset our tracking state
     isCurrentlyOver = false;
 
@@ -306,15 +447,9 @@
         const dropZoneRect = dropZoneElement.getBoundingClientRect();
 
         // Calculate position with both dragData.offsetX/Y adjustment and border adjustment
-        const dropOffsetX =
-          event.clientX -
-          dropZoneRect.left -
-          borderLeftWidth;
+        const dropOffsetX = event.clientX - dropZoneRect.left - borderLeftWidth;
 
-        const dropOffsetY =
-          event.clientY -
-          dropZoneRect.top -
-          borderTopWidth;
+        const dropOffsetY = event.clientY - dropZoneRect.top - borderTopWidth;
 
         const x = dropOffsetX - (dragData.offsetX ?? 0);
         const y = dropOffsetY - (dragData.offsetY ?? 0);
@@ -353,8 +488,9 @@
       currentState = READY;
     }
   }
-</script>
 
+  // console.log(`DropZone ${zone} script run`);
+</script>
 <div
   data-component="drop-zone"
   bind:this={dropZoneElement}
@@ -362,13 +498,17 @@
   ondragover={handleDragOver}
   ondragleave={handleDragLeave}
   ondrop={handleDrop}
-  class="{base} {height} {classes} {stateClasses}"
+  class="{base} {heightClasses} {classes} {stateClasses}"
   data-zone={zone}
   {...attrs}
 >
-  <GridLayers heightFrom={autoHeight ? 'content' : null}>
+  <GridLayers heightFrom={heightMode === 'flexible' ? 'content' : null}>
     {#if children}
-      <div data-layer="content" class:auto-height={autoHeight}>
+      <div
+        data-layer="content"
+        class:relative={heightMode === 'flexible'}
+        class:w-full={heightMode === 'flexible'}
+      >
         {@render children()}
       </div>
     {/if}
@@ -382,7 +522,7 @@
 </div>
 
 <style>
-  [data-layer='content']:not(.auto-height) {
+  [data-layer='content']:not(.relative) {
     position: absolute;
     left: 0;
     right: 0;
@@ -390,7 +530,7 @@
     bottom: 0;
   }
 
-  [data-layer='content'].auto-height {
+  [data-layer='content'].relative {
     position: relative;
     width: 100%;
   }

package/dist/components/drag-drop/DropZone.svelte.d.ts

@@ -9,8 +9,9 @@ type DropZone = {
         accepts?: (item: any) => boolean;
         base?: string;
         classes?: string;
-        height?: string;
-        autoHeight?: boolean;
+        minHeight?: string;
+        maxHeight?: string;
+        heightMode?: "fill" | "fixed" | "flexible";
         children?: Snippet<[]>;
         contextKey?: ContextKey;
         dropPreviewSnippet?: Snippet<[DragData]>;
@@ -52,8 +53,9 @@ declare const DropZone: import("svelte").Component<{
     accepts?: (item: any) => boolean;
     base?: string;
     classes?: string;
-    height?: string;
-    autoHeight?: boolean;
+    minHeight?: string;
+    maxHeight?: string;
+    heightMode?: "fixed" | "flexible" | "fill";
     children?: import("svelte").Snippet;
     contextKey?: import("../../typedef").ContextKey;
     dropPreviewSnippet?: import("svelte").Snippet<[import("../../typedef").DragData]>;

package/dist/components/drag-drop/DropZoneArea.svelte

@@ -0,0 +1,119 @@
+<script>
+  import { DropZone } from './index.js';
+
+  /**
+   * @type {{
+   *   zone?: string,
+   *   group?: string,
+   *   disabled?: boolean,
+   *   accepts?: (item: any) => boolean,
+   *   fillContainer?: boolean,
+   *   aspectRatio?: string,
+   *   overflow?: 'auto' | 'hidden' | 'visible' | 'scroll',
+   *   base?: string,
+   *   classes?: string,
+   *   children?: import('svelte').Snippet,
+   *   contextKey?: import('../../typedef').ContextKey,
+   *   dropPreviewSnippet?: import('svelte').Snippet<[import('../../typedef').DragData]>,
+   *   isDragOver?: boolean,
+   *   canDrop?: boolean,
+   *   onDragEnter?: (detail: {
+   *     event: DragEvent,
+   *     zone: string,
+   *     canDrop: boolean
+   *   }) => void,
+   *   onDragOver?: (detail: {
+   *     event: DragEvent,
+   *     zone: string
+   *   }) => void,
+   *   onDragLeave?: (detail: {
+   *     event: DragEvent,
+   *     zone: string
+   *   }) => void,
+   *   onDrop?: (detail: import('../../typedef').DropData) => any | Promise<any>,
+   *   onDropStart?: (detail: {
+   *     event: DragEvent,
+   *     zone: string,
+   *     data: any
+   *   }) => void,
+   *   onDropEnd?: (detail: {
+   *     event: DragEvent,
+   *     zone: string,
+   *     data: any,
+   *     success: boolean,
+   *     error?: Error
+   *   }) => void,
+   *   [key: string]: any
+   * }}
+   */
+  let {
+    zone = 'default',
+    group = 'default',
+    disabled = false,
+    accepts = () => true,
+    fillContainer = true,
+    aspectRatio = '',
+    overflow = 'hidden',
+    base = '',
+    classes = '',
+    children,
+    contextKey,
+    dropPreviewSnippet,
+    isDragOver = $bindable(false),
+    canDrop = $bindable(false),
+    onDragEnter,
+    onDragOver,
+    onDragLeave,
+    onDrop,
+    onDropStart,
+    onDropEnd,
+    ...attrs
+  } = $props();
+
+  // Build overflow classes based on prop
+  let overflowClasses = $derived.by(() => {
+    switch (overflow) {
+      case 'auto':
+        return 'overflow-auto';
+      case 'scroll':
+        return 'overflow-scroll';
+      case 'visible':
+        return 'overflow-visible';
+      case 'hidden':
+      default:
+        return 'overflow-hidden';
+    }
+  });
+
+  // Combine all classes for the drop zone
+  let combinedClasses = $derived(
+    `${overflowClasses} ${aspectRatio} ${classes}`.trim()
+  );
+</script>
+
+<DropZone
+  data-component="drop-zone"
+  data-type="area"
+  {zone}
+  {group}
+  {disabled}
+  {accepts}
+  heightMode={fillContainer ? 'fill' : 'fixed'}
+  {base}
+  classes={combinedClasses}
+  {contextKey}
+  {dropPreviewSnippet}
+  bind:isDragOver
+  bind:canDrop
+  {onDragEnter}
+  {onDragOver}
+  {onDragLeave}
+  {onDrop}
+  {onDropStart}
+  {onDropEnd}
+  {...attrs}
+>
+  {#if children}
+    {@render children()}
+  {/if}
+</DropZone>

package/dist/components/drag-drop/DropZoneArea.svelte.d.ts

@@ -0,0 +1,90 @@
+export default DropZoneArea;
+type DropZoneArea = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<{
+        [key: string]: any;
+        zone?: string;
+        group?: string;
+        disabled?: boolean;
+        accepts?: (item: any) => boolean;
+        fillContainer?: boolean;
+        aspectRatio?: string;
+        overflow?: "scroll" | "auto" | "hidden" | "visible";
+        base?: string;
+        classes?: string;
+        children?: Snippet<[]>;
+        contextKey?: ContextKey;
+        dropPreviewSnippet?: Snippet<[DragData]>;
+        isDragOver?: boolean;
+        canDrop?: boolean;
+        onDragEnter?: (detail: {
+            event: DragEvent;
+            zone: string;
+            canDrop: boolean;
+        }) => void;
+        onDragOver?: (detail: {
+            event: DragEvent;
+            zone: string;
+        }) => void;
+        onDragLeave?: (detail: {
+            event: DragEvent;
+            zone: string;
+        }) => void;
+        onDrop?: (detail: DropData) => any;
+        onDropStart?: (detail: {
+            event: DragEvent;
+            zone: string;
+            data: any;
+        }) => void;
+        onDropEnd?: (detail: {
+            event: DragEvent;
+            zone: string;
+            data: any;
+            success: boolean;
+            error?: Error;
+        }) => void;
+    }>): void;
+};
+declare const DropZoneArea: import("svelte").Component<{
+    [key: string]: any;
+    zone?: string;
+    group?: string;
+    disabled?: boolean;
+    accepts?: (item: any) => boolean;
+    fillContainer?: boolean;
+    aspectRatio?: string;
+    overflow?: "auto" | "hidden" | "visible" | "scroll";
+    base?: string;
+    classes?: string;
+    children?: import("svelte").Snippet;
+    contextKey?: import("../../typedef").ContextKey;
+    dropPreviewSnippet?: import("svelte").Snippet<[import("../../typedef").DragData]>;
+    isDragOver?: boolean;
+    canDrop?: boolean;
+    onDragEnter?: (detail: {
+        event: DragEvent;
+        zone: string;
+        canDrop: boolean;
+    }) => void;
+    onDragOver?: (detail: {
+        event: DragEvent;
+        zone: string;
+    }) => void;
+    onDragLeave?: (detail: {
+        event: DragEvent;
+        zone: string;
+    }) => void;
+    onDrop?: (detail: import("../../typedef").DropData) => any | Promise<any>;
+    onDropStart?: (detail: {
+        event: DragEvent;
+        zone: string;
+        data: any;
+    }) => void;
+    onDropEnd?: (detail: {
+        event: DragEvent;
+        zone: string;
+        data: any;
+        success: boolean;
+        error?: Error;
+    }) => void;
+}, {}, "isDragOver" | "canDrop">;

package/dist/components/drag-drop/DropZoneList.svelte

@@ -0,0 +1,125 @@
+<script>
+  import { DropZone } from './index.js';
+
+  /**
+   * @type {{
+   *   zone?: string,
+   *   group?: string,
+   *   disabled?: boolean,
+   *   accepts?: (item: any) => boolean,
+   *   minHeight?: string,
+   *   maxHeight?: string,
+   *   gap?: string,
+   *   direction?: 'vertical' | 'horizontal',
+   *   base?: string,
+   *   classes?: string,
+   *   children?: import('svelte').Snippet,
+   *   contextKey?: import('../../typedef').ContextKey,
+   *   dropPreviewSnippet?: import('svelte').Snippet<[import('../../typedef').DragData]>,
+   *   isDragOver?: boolean,
+   *   canDrop?: boolean,
+   *   onDragEnter?: (detail: {
+   *     event: DragEvent,
+   *     zone: string,
+   *     canDrop: boolean
+   *   }) => void,
+   *   onDragOver?: (detail: {
+   *     event: DragEvent,
+   *     zone: string
+   *   }) => void,
+   *   onDragLeave?: (detail: {
+   *     event: DragEvent,
+   *     zone: string
+   *   }) => void,
+   *   onDrop?: (detail: import('../../typedef').DropData) => any | Promise<any>,
+   *   onDropStart?: (detail: {
+   *     event: DragEvent,
+   *     zone: string,
+   *     data: any
+   *   }) => void,
+   *   onDropEnd?: (detail: {
+   *     event: DragEvent,
+   *     zone: string,
+   *     data: any,
+   *     success: boolean,
+   *     error?: Error
+   *   }) => void,
+   *   [key: string]: any
+   * }}
+   */
+  let {
+    zone = 'default',
+    group = 'default',
+    disabled = false,
+    accepts = () => true,
+    minHeight = 'min-h-[200px]',
+    maxHeight = '',
+    gap = 'gap-2',
+    direction = 'vertical',
+    base = '',
+    classes = '',
+    children,
+    contextKey,
+    dropPreviewSnippet,
+    isDragOver = $bindable(false),
+    canDrop = $bindable(false),
+    onDragEnter,
+    onDragOver,
+    onDragLeave,
+    onDrop,
+    onDropStart,
+    onDropEnd,
+    ...attrs
+  } = $props();
+
+  // Build flex layout classes based on direction
+  let layoutClasses = $derived.by(() => {
+    const layoutParts = ['flex'];
+
+    if (direction === 'vertical') {
+      layoutParts.push('flex-col');
+    } else {
+      layoutParts.push('flex-row', 'flex-wrap');
+    }
+
+    if (gap) {
+      layoutParts.push(gap);
+    }
+
+    return layoutParts.join(' ');
+  });
+
+  // Combine all classes for the drop zone
+  let combinedClasses = $derived(
+    `${layoutClasses} ${classes}`.trim()
+  );
+</script>
+
+<DropZone
+  data-component="drop-zone"
+  data-type="list"
+  {zone}
+  {group}
+  {disabled}
+  {accepts}
+  {minHeight}
+  {maxHeight}
+  heightMode="flexible"
+  {base}
+  classes={combinedClasses}
+  {contextKey}
+  {dropPreviewSnippet}
+  bind:isDragOver
+  bind:canDrop
+  {onDragEnter}
+  {onDragOver}
+  {onDragLeave}
+  {onDrop}
+  {onDropStart}
+  {onDropEnd}
+  {...attrs}
+>
+  {#if children}
+    {@render children()}
+  {/if}
+</DropZone>

package/dist/components/drag-drop/DropZoneList.svelte.d.ts

@@ -0,0 +1,92 @@
+export default DropZoneList;
+type DropZoneList = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<{
+        [key: string]: any;
+        zone?: string;
+        group?: string;
+        disabled?: boolean;
+        accepts?: (item: any) => boolean;
+        minHeight?: string;
+        maxHeight?: string;
+        gap?: string;
+        direction?: "vertical" | "horizontal";
+        base?: string;
+        classes?: string;
+        children?: Snippet<[]>;
+        contextKey?: ContextKey;
+        dropPreviewSnippet?: Snippet<[DragData]>;
+        isDragOver?: boolean;
+        canDrop?: boolean;
+        onDragEnter?: (detail: {
+            event: DragEvent;
+            zone: string;
+            canDrop: boolean;
+        }) => void;
+        onDragOver?: (detail: {
+            event: DragEvent;
+            zone: string;
+        }) => void;
+        onDragLeave?: (detail: {
+            event: DragEvent;
+            zone: string;
+        }) => void;
+        onDrop?: (detail: DropData) => any;
+        onDropStart?: (detail: {
+            event: DragEvent;
+            zone: string;
+            data: any;
+        }) => void;
+        onDropEnd?: (detail: {
+            event: DragEvent;
+            zone: string;
+            data: any;
+            success: boolean;
+            error?: Error;
+        }) => void;
+    }>): void;
+};
+declare const DropZoneList: import("svelte").Component<{
+    [key: string]: any;
+    zone?: string;
+    group?: string;
+    disabled?: boolean;
+    accepts?: (item: any) => boolean;
+    minHeight?: string;
+    maxHeight?: string;
+    gap?: string;
+    direction?: "vertical" | "horizontal";
+    base?: string;
+    classes?: string;
+    children?: import("svelte").Snippet;
+    contextKey?: import("../../typedef").ContextKey;
+    dropPreviewSnippet?: import("svelte").Snippet<[import("../../typedef").DragData]>;
+    isDragOver?: boolean;
+    canDrop?: boolean;
+    onDragEnter?: (detail: {
+        event: DragEvent;
+        zone: string;
+        canDrop: boolean;
+    }) => void;
+    onDragOver?: (detail: {
+        event: DragEvent;
+        zone: string;
+    }) => void;
+    onDragLeave?: (detail: {
+        event: DragEvent;
+        zone: string;
+    }) => void;
+    onDrop?: (detail: import("../../typedef").DropData) => any | Promise<any>;
+    onDropStart?: (detail: {
+        event: DragEvent;
+        zone: string;
+        data: any;
+    }) => void;
+    onDropEnd?: (detail: {
+        event: DragEvent;
+        zone: string;
+        data: any;
+        success: boolean;
+        error?: Error;
+    }) => void;
+}, {}, "isDragOver" | "canDrop">;

package/dist/components/drag-drop/index.d.ts

@@ -1,4 +1,6 @@
 export { default as Draggable } from "./Draggable.svelte";
 export { default as DropZone } from "./DropZone.svelte";
+export { default as DropZoneList } from "./DropZoneList.svelte";
+export { default as DropZoneArea } from "./DropZoneArea.svelte";
 export { default as DragDropContext } from "./DragDropContext.svelte";
 export * from "./drag-state.svelte.js";

package/dist/components/drag-drop/index.js

@@ -1,5 +1,7 @@
 export { default as Draggable } from './Draggable.svelte';
 export { default as DropZone } from './DropZone.svelte';
+export { default as DropZoneList } from './DropZoneList.svelte';
+export { default as DropZoneArea } from './DropZoneArea.svelte';
 export { default as DragDropContext } from './DragDropContext.svelte';
 
 export * from './drag-state.svelte.js';

package/dist/themes/hkdev/components/drag-drop/drop-zone.css

@@ -23,7 +23,6 @@
     &.state-can-drop {
       border-color: rgb(var(--color-success-500));
       background-color: rgb(var(--color-success-500) / 0.08);
-      /*transform: scale(1.01);*/
       box-shadow: 0 0 0 3px rgb(var(--color-success-500) / 0.2);
     }
 

package/dist/util/design-system/css/root-design-vars.js

@@ -44,12 +44,14 @@ export function rootDesignVarsHTML(design, clamping) {
       --design-width: ${design.width};
       --design-height: ${design.height};
 
-      /* Base clamping units */
+      /* Scaling factors */
       --scale-w: 1;
       --scale-h: 1;
-      --scale-viewport: min(var(--scale-w), var(--scale-h));
 
-      /* Scaling factors with configurable clamping */
+      /* --scale-viewport: min(var(--scale-w), var(--scale-h)); */
+      --scale-viewport: 1;
+
+      /* Base clamping units */
       --scale-ui: clamp(${clamping.ui.min}, var(--scale-viewport), ${clamping.ui.max});
       --scale-text-base: clamp(${clamping.textBase.min}, var(--scale-viewport), ${clamping.textBase.max});
       --scale-text-heading: clamp(${clamping.textHeading.min}, var(--scale-viewport), ${clamping.textHeading.max});

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@hkdigital/lib-sveltekit",
-	"version": "0.1.90",
+	"version": "0.1.92",
 	"author": {
 		"name": "HKdigital",
 		"url": "https://hkdigital.nl"