@hkdigital/lib-sveltekit 0.1.89 → 0.1.91

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

@@ -86,9 +86,9 @@
   const dragState = createOrGetDragState(contextKey);
 
   let currentState = $state(READY);
-  let dropzoneElement; // Reference to the dropzone DOM element
+  let dropZoneElement; // Reference to the drop zone DOM element
 
-  // We'll use a flag to track if we're currently in the dropzone
+  // We'll use a flag to track if we're currently in the drop zone
   // without relying on a counter approach
   let isCurrentlyOver = $state(false);
 
@@ -191,7 +191,7 @@
     // If we're already in a drag-over state, don't reset anything
     if (isCurrentlyOver) return;
 
-    // Now we're over this dropzone
+    // Now we're over this drop zone
     isCurrentlyOver = true;
 
     // Get the drag data
@@ -216,7 +216,7 @@
     // Prevent default to allow drop
     event.preventDefault();
 
-    // If we're not currently over this dropzone (despite dragover firing),
+    // If we're not currently over this drop zone (despite dragover firing),
     // treat it as an enter event
     if (!isCurrentlyOver) {
       handleDragEnter(event);
@@ -247,15 +247,15 @@
    * @param {DragEvent} event
    */
   function handleDragLeave(event) {
-    // We need to check if we're actually leaving the dropzone or just
-    // entering a child element within the dropzone
+    // We need to check if we're actually leaving the drop zone or just
+    // entering a child element within the drop zone
 
     // relatedTarget is the element we're moving to
     const relatedTarget = event.relatedTarget;
 
-    // If relatedTarget is null or outside our dropzone, we're truly leaving
+    // If relatedTarget is null or outside our drop zone, we're truly leaving
     const isActuallyLeaving =
-      !relatedTarget || !dropzoneElement.contains(relatedTarget);
+      !relatedTarget || !dropZoneElement.contains(relatedTarget);
 
     if (isActuallyLeaving) {
       isCurrentlyOver = false;
@@ -296,24 +296,24 @@
         // Notify listener
         onDropStart?.({ event, zone, data: dragData });
 
-        const style = window.getComputedStyle(dropzoneElement);
+        const style = window.getComputedStyle(dropZoneElement);
 
         // Parse border widths from computed style
         const borderLeftWidth = parseInt(style.borderLeftWidth, 10) || 0;
         const borderTopWidth = parseInt(style.borderTopWidth, 10) || 0;
 
-        // Get dropzone rectangle
-        const dropzoneRect = dropzoneElement.getBoundingClientRect();
+        // Get drop zone rectangle
+        const dropZoneRect = dropZoneElement.getBoundingClientRect();
 
         // Calculate position with both dragData.offsetX/Y adjustment and border adjustment
         const dropOffsetX =
           event.clientX -
-          dropzoneRect.left -
+          dropZoneRect.left -
           borderLeftWidth;
 
         const dropOffsetY =
           event.clientY -
-          dropzoneRect.top -
+          dropZoneRect.top -
           borderTopWidth;
 
         const x = dropOffsetX - (dragData.offsetX ?? 0);
@@ -356,8 +356,8 @@
 </script>
 
 <div
-  data-component="dropzone"
-  bind:this={dropzoneElement}
+  data-component="drop-zone"
+  bind:this={dropZoneElement}
   ondragenter={handleDragEnter}
   ondragover={handleDragOver}
   ondragleave={handleDragLeave}

package/dist/themes/hkdev/components/drag-drop/{dropzone.css → drop-zone.css}

@@ -1,6 +1,6 @@
-@define-mixin component-dropzone {
+@define-mixin component-drop-zone {
   /* Visual styling and customizable aspects */
-  [data-component='dropzone'] {
+  [data-component='drop-zone'] {
     /*min-height: 100px;*/
     border: 1px dashed rgb(var(--color-surface-400));
     border-radius: var(--theme-rounded-container);

package/dist/themes/hkdev/components.css

@@ -12,7 +12,7 @@
 /*@import "./components/buttons/skip-button.css";*/
 
 @import './components/drag-drop/draggable.css';
-@import './components/drag-drop/dropzone.css';
+@import './components/drag-drop/drop-zone.css';
 
 /* Icons */
 @import './components/icons/icon-steeze.css';
@@ -40,7 +40,7 @@
   /*  @mixin buttons-skip-button;*/
 
   @mixin component-draggable;
-  @mixin component-dropzone;
+  @mixin component-drop-zone;
 
   @mixin component-icon-steeze;
 

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.89",
+	"version": "0.1.91",
 	"author": {
 		"name": "HKdigital",
 		"url": "https://hkdigital.nl"