@likable-hair/svelte 4.2.0 → 4.2.2

package/dist/components/composed/search/FilterEditor.svelte

@@ -139,19 +139,20 @@ function onclick(event) {
               minWidth={'100px'}
               height={'100%'}
               --button-padding="10px 12px"
-              --button-border='var(--dropdown-button-border, none)'
-              --button-background-color='var(--dropdown-button-background-color, rgb(var(--global-color-background-300), .6))'
-              --button-hover-background-color='var(--dropdown-button-hover-color, rgb(var(--global-color-background-300), .6))'
-              --button-focus-background-color='var(--dropdown-button-focus-color, rgb(var(--global-color-background-300), .6))'
-              --button-active-background-color='var(--dropdown-button-active-color, rgb(var(--global-color-background-300), .6))'
+              --button-border='var(--dropdown-button-border)'
+              --button-background-color='var(--dropdown-button-background-color)'
+              --button-hover-background-color='var(--dropdown-button-hover-color)'
+              --button-focus-background-color='var(--dropdown-button-focus-color)'
+              --button-active-background-color='var(--dropdown-button-active-color)'
+              --button-border-radius='var(--dropdown-button-border-radius)'
+              --button-default-height='var(--dropdown-button-height)'
+              --button-active-box-shadow='var(--dropdown-button-active-box-shadow)'
+              --button-focus-box-shadow='var(--dropdown-button-focus-box-shadow)'
+              --button-box-sizing='var(--dropdown-button-box-sizing)'
               --button-hover-color='rgb(var(--global-color-contrast-800))'
-              --button-border-radius='var(--dropdown-button-border-radius, 4px)'
-              --button-default-height='var(--dropdown-button-height, 20px)'
               --autocomplete-default-selected-item-background-color='rgb(var(--global-color-background-500), .5)'
               --autocomplete-default-selected-item-color='rgb(var(--global-color-contrast-800))'
               --autocomplete-default-hover-item-background-color='rgb(var(--global-color-background-300), .5)'
-              --button-active-box-shadow='var(--dropdown-button-active-box-shadow)'
-              --button-focus-box-shadow='var(--dropdown-button-focus-box-shadow)'
               ></Dropdown>
           </div>
         </div>

package/dist/components/simple/buttons/Button.css

@@ -22,4 +22,5 @@
   --button-default-icon-focus-color: rgb(var(--global-color-primary-500));
   --button-default-box-shadow: none;
   --button-default-text-font-weight: 600;
+  --button-default-box-sizing: content-box;
 }

package/dist/components/simple/buttons/Button.svelte

@@ -86,7 +86,10 @@ import CircularLoader from "../loaders/CircularLoader.svelte";
 
   .button {
     overflow: hidden;
-    box-sizing: content-box;
+    box-sizing: var(
+      --button-box-sizing,
+      var(--button-default-box-sizing)
+    );
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     width: var(
       --button-width,

package/dist/components/simple/common/Menu.svelte

@@ -7,24 +7,32 @@ let { _activatorGap = 5, _height = 'auto', _overflow = 'auto', _width = 'auto',
 }, open = $bindable(), outAnimation = fly, outAnimationConfig = {
     duration: 100,
     y: 10,
-}, refreshPosition = $bindable(false), stayInViewport = $bindable(false), _borderRadius = undefined, _boxShadow = undefined, _left = undefined, _maxHeight = undefined, _minWidth = undefined, _top = undefined, activator = $bindable(), menuElement = $bindable(), openingId = $bindable(), onkeydown, children, } = $props();
+}, refreshPosition = $bindable(false), stayInViewport = $bindable(false), _borderRadius = undefined, _boxShadow = undefined, _left = undefined, _maxHeight = undefined, _minWidth = undefined, _top = undefined, _offsetTop = 0, _offsetLeft = 0, activator = $bindable(), menuElement = $bindable(), openingId = $bindable(), onkeydown, children, } = $props();
 let zIndex = $state(50), currentUid = createId(), closeController;
+let calculatedTop = $state(undefined);
+let calculatedLeft = $state(undefined);
+let finalTop = $derived(_top !== undefined ? _top : (calculatedTop !== undefined ? calculatedTop + _offsetTop : undefined));
+let finalLeft = $derived(_left !== undefined ? _left : (calculatedLeft !== undefined ? calculatedLeft + _offsetLeft : undefined));
 function calculateMenuPosition(params) {
+    if (_top !== undefined && _left !== undefined)
+        return;
+    let tempTop = 0;
+    let tempLeft = 0;
     if (params.menuElement) {
         if (params.activator) {
             if (anchor == "bottom") {
                 let { left: activatorLeft, top: activatorTop } = params.activator.getBoundingClientRect();
                 let activatorHeight = params.activator.offsetHeight;
-                _top = activatorTop + activatorHeight + _activatorGap;
-                _left = activatorLeft;
+                tempTop = activatorTop + activatorHeight + _activatorGap;
+                tempLeft = activatorLeft;
                 let { top: fixedParentTop, left: fixedParentLeft, fixedParent, validStickyParent } = getParentInstanceFromViewport(activator?.parentElement);
                 if (!!fixedParent) {
-                    _top = _top - fixedParentTop;
-                    _left = _left - fixedParentLeft;
+                    tempTop = tempTop - fixedParentTop;
+                    tempLeft = tempLeft - fixedParentLeft;
                 }
                 else if (!validStickyParent && !fixedParent) {
-                    _top = _top + window.scrollY;
-                    _left = _left + window.scrollX;
+                    tempTop = tempTop + window.scrollY;
+                    tempLeft = tempLeft + window.scrollX;
                 }
             }
             else if (anchor == "bottom-center") {
@@ -32,22 +40,22 @@ function calculateMenuPosition(params) {
                 let activatorHeight = params.activator.offsetHeight;
                 let activatorWidth = params.activator.offsetWidth;
                 let menuWidth = params.menuElement.offsetWidth;
-                _top = activatorTop + activatorHeight + _activatorGap;
-                _left = activatorLeft;
+                tempTop = activatorTop + activatorHeight + _activatorGap;
+                tempLeft = activatorLeft;
                 let { top: fixedParentTop, left: fixedParentLeft, fixedParent, validStickyParent } = getParentInstanceFromViewport(activator?.parentElement);
                 if (!!fixedParent) {
-                    _top = _top - fixedParentTop;
-                    _left = _left - fixedParentLeft;
+                    tempTop = tempTop - fixedParentTop;
+                    tempLeft = tempLeft - fixedParentLeft;
                 }
                 else if (!validStickyParent && !fixedParent) {
-                    _top = _top + window.scrollY;
-                    _left = _left + window.scrollX;
+                    tempTop = tempTop + window.scrollY;
+                    tempLeft = tempLeft + window.scrollX;
                 }
                 if (menuWidth > activatorWidth) {
-                    _left = _left - (menuWidth - activatorWidth) / 2;
+                    tempLeft = tempLeft - (menuWidth - activatorWidth) / 2;
                 }
                 else {
-                    _left = _left + (activatorWidth - menuWidth) / 2;
+                    tempLeft = tempLeft + (activatorWidth - menuWidth) / 2;
                 }
             }
             else if (anchor == 'right-center') {
@@ -56,8 +64,8 @@ function calculateMenuPosition(params) {
                 let activatorWidth = params.activator.offsetWidth;
                 let menuHeight = params.menuElement.offsetHeight;
                 let { top: fixedParentTop, left: fixedParentLeft } = getParentInstanceFromViewport(activator?.parentElement);
-                _top = activatorTop + window.scrollY + (activatorHeight / 2) - (menuHeight / 2) - fixedParentTop;
-                _left = activatorLeft + window.scrollX + activatorWidth + _activatorGap - fixedParentLeft;
+                tempTop = activatorTop + window.scrollY + (activatorHeight / 2) - (menuHeight / 2) - fixedParentTop;
+                tempLeft = activatorLeft + window.scrollX + activatorWidth + _activatorGap - fixedParentLeft;
             }
             else if (anchor == 'left-center') {
                 let { left: activatorLeft, top: activatorTop } = params.activator.getBoundingClientRect();
@@ -65,60 +73,60 @@ function calculateMenuPosition(params) {
                 let menuHeight = params.menuElement.offsetHeight;
                 let menuWidth = params.menuElement.offsetWidth;
                 let { top: fixedParentTop, left: fixedParentLeft, fixedParent, validStickyParent } = getParentInstanceFromViewport(activator?.parentElement);
-                _top = activatorTop + (activatorHeight / 2) - (menuHeight / 2);
-                _left = activatorLeft - menuWidth - _activatorGap;
+                tempTop = activatorTop + (activatorHeight / 2) - (menuHeight / 2);
+                tempLeft = activatorLeft - menuWidth - _activatorGap;
                 if (!!fixedParent) {
-                    _top = _top - fixedParentTop;
-                    _left = _left - fixedParentLeft;
+                    tempTop = tempTop - fixedParentTop;
+                    tempLeft = tempLeft - fixedParentLeft;
                 }
                 else if (!validStickyParent && !fixedParent) {
-                    _top = _top + window.scrollY;
-                    _left = _left + window.scrollX;
+                    tempTop = tempTop + window.scrollY;
+                    tempLeft = tempLeft + window.scrollX;
                 }
             }
-            else if (anchor == 'up') {
+            else if (anchor == 'left') {
                 let { left: activatorLeft, top: activatorTop } = params.activator.getBoundingClientRect();
-                let menuHeight = params.menuElement.offsetHeight;
-                _top = activatorTop - menuHeight - _activatorGap;
-                _left = activatorLeft;
+                let menuWidth = params.menuElement.offsetWidth;
+                tempTop = activatorTop;
+                tempLeft = activatorLeft - menuWidth - _activatorGap;
                 let { top: fixedParentTop, left: fixedParentLeft, fixedParent, validStickyParent } = getParentInstanceFromViewport(activator?.parentElement);
                 if (!!fixedParent) {
-                    _top = _top - fixedParentTop;
-                    _left = _left - fixedParentLeft;
+                    tempTop = tempTop - fixedParentTop;
+                    tempLeft = tempLeft - fixedParentLeft;
                 }
                 else if (!validStickyParent && !fixedParent) {
-                    _top = _top + window.scrollY;
-                    _left = _left + window.scrollX;
+                    tempTop = tempTop + window.scrollY;
+                    tempLeft = tempLeft + window.scrollX;
                 }
             }
-            else if (anchor == 'left') {
+            else if (anchor == 'right') {
                 let { left: activatorLeft, top: activatorTop } = params.activator.getBoundingClientRect();
-                let menuWidth = params.menuElement.offsetWidth;
-                _top = activatorTop;
-                _left = activatorLeft - menuWidth - _activatorGap;
+                let activatorWidth = params.activator.offsetWidth;
+                tempTop = activatorTop;
+                tempLeft = activatorLeft + activatorWidth + _activatorGap;
                 let { top: fixedParentTop, left: fixedParentLeft, fixedParent, validStickyParent } = getParentInstanceFromViewport(activator?.parentElement);
                 if (!!fixedParent) {
-                    _top = _top - fixedParentTop;
-                    _left = _left - fixedParentLeft;
+                    tempTop = tempTop - fixedParentTop;
+                    tempLeft = tempLeft - fixedParentLeft;
                 }
                 else if (!validStickyParent && !fixedParent) {
-                    _top = _top + window.scrollY;
-                    _left = _left + window.scrollX;
+                    tempTop = tempTop + window.scrollY;
+                    tempLeft = tempLeft + window.scrollX;
                 }
             }
-            else if (anchor == 'right') {
+            else if (anchor == 'up') {
                 let { left: activatorLeft, top: activatorTop } = params.activator.getBoundingClientRect();
-                let activatorWidth = params.activator.offsetWidth;
-                _top = activatorTop;
-                _left = activatorLeft + activatorWidth + _activatorGap;
+                let menuHeight = params.menuElement.offsetHeight;
+                tempTop = activatorTop - menuHeight - _activatorGap;
+                tempLeft = activatorLeft;
                 let { top: fixedParentTop, left: fixedParentLeft, fixedParent, validStickyParent } = getParentInstanceFromViewport(activator?.parentElement);
                 if (!!fixedParent) {
-                    _top = _top - fixedParentTop;
-                    _left = _left - fixedParentLeft;
+                    tempTop = tempTop - fixedParentTop;
+                    tempLeft = tempLeft - fixedParentLeft;
                 }
                 else if (!validStickyParent && !fixedParent) {
-                    _top = _top + window.scrollY;
-                    _left = _left + window.scrollX;
+                    tempTop = tempTop + window.scrollY;
+                    tempLeft = tempLeft + window.scrollX;
                 }
             }
             else if (anchor == 'up-center') {
@@ -126,93 +134,91 @@ function calculateMenuPosition(params) {
                 let activatorWidth = params.activator.offsetWidth;
                 let menuHeight = params.menuElement.offsetHeight;
                 let menuWidth = params.menuElement.offsetWidth;
-                _top = activatorTop - menuHeight - _activatorGap;
-                _left = activatorLeft;
+                tempTop = activatorTop - menuHeight - _activatorGap;
+                tempLeft = activatorLeft;
                 let { top: fixedParentTop, left: fixedParentLeft, fixedParent, validStickyParent } = getParentInstanceFromViewport(activator?.parentElement);
                 if (!!fixedParent) {
-                    _top = _top - fixedParentTop;
-                    _left = _left - fixedParentLeft;
+                    tempTop = tempTop - fixedParentTop;
+                    tempLeft = tempLeft - fixedParentLeft;
                 }
                 else if (!validStickyParent && !fixedParent) {
-                    _top = _top + window.scrollY;
-                    _left = _left + window.scrollX;
+                    tempTop = tempTop + window.scrollY;
+                    tempLeft = tempLeft + window.scrollX;
                 }
                 if (menuWidth > activatorWidth) {
-                    _left = _left - (menuWidth - activatorWidth) / 2;
+                    tempLeft = tempLeft - (menuWidth - activatorWidth) / 2;
                 }
                 else {
-                    _left = _left + (activatorWidth - menuWidth) / 2;
+                    tempLeft = tempLeft + (activatorWidth - menuWidth) / 2;
                 }
             }
         }
         if (flipOnOverflow && !!params.activator) {
             let { top: activatorTopDistance } = params.activator.getBoundingClientRect();
             if (window.innerHeight < activatorTopDistance + (menuElement?.offsetHeight || 0) + ((menuElement?.offsetHeight || 0) * 0.1)) {
-                _top = getTopDistance(params.activator) - _activatorGap - (menuElement?.offsetHeight || 0);
+                tempTop = getTopDistance(params.activator) - _activatorGap - (menuElement?.offsetHeight || 0);
             }
             if (anchor == 'right-center' &&
                 window.innerWidth + window.scrollX <
-                    (_left || 0) + (menuElement?.offsetWidth || 0)) {
+                    tempLeft + (menuElement?.offsetWidth || 0)) {
                 let { left: activatorLeft } = params.activator.getBoundingClientRect();
-                _left = activatorLeft + window.scrollX - _activatorGap - (menuElement?.offsetWidth || 0);
+                tempLeft = activatorLeft + window.scrollX - _activatorGap - (menuElement?.offsetWidth || 0);
             }
             if (anchor == 'left-center' &&
-                (_left || 0) < 0) {
+                tempLeft < 0) {
                 let { left: activatorLeft } = params.activator.getBoundingClientRect();
                 let activatorWidth = params.activator.offsetWidth;
-                _left = activatorLeft + window.scrollX + activatorWidth + _activatorGap;
+                tempLeft = activatorLeft + window.scrollX + activatorWidth + _activatorGap;
             }
             if (anchor == 'left' &&
-                (_left || 0) < 0) {
+                tempLeft < 0) {
                 let { left: activatorLeft } = params.activator.getBoundingClientRect();
                 let activatorWidth = params.activator.offsetWidth;
-                _left = activatorLeft + window.scrollX + activatorWidth + _activatorGap;
+                tempLeft = activatorLeft + window.scrollX + activatorWidth + _activatorGap;
             }
             if (anchor == 'right' &&
                 window.innerWidth + window.scrollX <
-                    (_left || 0) + (menuElement?.offsetWidth || 0)) {
+                    tempLeft + (menuElement?.offsetWidth || 0)) {
                 let { left: activatorLeft } = params.activator.getBoundingClientRect();
                 let menuWidth = params.menuElement.offsetWidth;
-                _left = activatorLeft + window.scrollX - menuWidth - _activatorGap;
+                tempLeft = activatorLeft + window.scrollX - menuWidth - _activatorGap;
             }
             if (anchor == 'up' &&
-                (_top || 0) < window.scrollY) {
+                tempTop < window.scrollY) {
                 let { top: activatorTop } = params.activator.getBoundingClientRect();
                 let activatorHeight = params.activator.offsetHeight;
-                _top = activatorTop + window.scrollY + activatorHeight + _activatorGap;
+                tempTop = activatorTop + window.scrollY + activatorHeight + _activatorGap;
             }
             if (anchor == 'up-center' &&
-                (_top || 0) < window.scrollY) {
+                tempTop < window.scrollY) {
                 let { top: activatorTop } = params.activator.getBoundingClientRect();
                 let activatorHeight = params.activator.offsetHeight;
-                _top = activatorTop + window.scrollY + activatorHeight + _activatorGap;
+                tempTop = activatorTop + window.scrollY + activatorHeight + _activatorGap;
             }
         }
         if (stayInViewport) {
             if (window.innerWidth + window.scrollX <
-                (_left || 0) + (menuElement?.offsetWidth || 0)) {
-                _left = Math.max(window.innerWidth + window.scrollX - (menuElement?.offsetWidth || 0), 0);
+                tempLeft + (menuElement?.offsetWidth || 0)) {
+                tempLeft = Math.max(window.innerWidth + window.scrollX - (menuElement?.offsetWidth || 0), 0);
             }
-            if ((_left || 0) < window.scrollX) {
-                _left = window.scrollX;
+            if (tempLeft < window.scrollX) {
+                tempLeft = window.scrollX;
             }
         }
         if (!!positionedAncestor) {
             let { left: positionedAncestorLeft, top: positionedAncestorTop } = positionedAncestor.getBoundingClientRect();
-            if (!_left)
-                _left = 0;
-            if (!_top)
-                _top = 0;
-            _left = _left - (positionedAncestorLeft + window.scrollX - positionedAncestor.scrollLeft);
-            _top = _top - (positionedAncestorTop + window.scrollY - positionedAncestor.scrollTop);
+            tempLeft = tempLeft - (positionedAncestorLeft + window.scrollX - positionedAncestor.scrollLeft);
+            tempTop = tempTop - (positionedAncestorTop + window.scrollY - positionedAncestor.scrollTop);
             if (!!activator) {
                 let { validStickyParent, fixedParent } = getParentInstanceFromViewport(activator?.parentElement);
                 if (!!validStickyParent || !!fixedParent) {
-                    _left = _left + window.scrollX;
-                    _top = _top + window.scrollY;
+                    tempLeft = tempLeft + window.scrollX;
+                    tempTop = tempTop + window.scrollY;
                 }
             }
         }
+        calculatedTop = tempTop;
+        calculatedLeft = tempLeft;
     }
 }
 function getTopDistance(elem) {
@@ -306,30 +312,43 @@ $effect(() => {
         refreshPosition = false;
     }
 });
-$effect(() => {
-    if (closeOnClickOutside && !!menuElement) {
-        window.addEventListener("mousedown", () => {
-            open = false;
-        });
-        window.addEventListener("touchstart", () => {
-            open = false;
-        });
-        if (activator) {
-            activator.addEventListener("mousedown", (event) => {
-                event.stopPropagation();
-            });
-            activator.addEventListener("touchstart", (event) => {
-                event.stopPropagation();
-            });
+function handleOutsideClick(node, params) {
+    const handleWindowClick = () => {
+        open = false;
+    };
+    const handleStopPropagation = (event) => {
+        event.stopPropagation();
+    };
+    function updateListeners(currentParams) {
+        window.removeEventListener("mousedown", handleWindowClick);
+        window.removeEventListener("touchstart", handleWindowClick);
+        node.removeEventListener("mousedown", handleStopPropagation);
+        node.removeEventListener("touchstart", handleStopPropagation);
+        if (currentParams.activator) {
+            currentParams.activator.removeEventListener("mousedown", handleStopPropagation);
+            currentParams.activator.removeEventListener("touchstart", handleStopPropagation);
+        }
+        if (currentParams.enabled) {
+            window.addEventListener("mousedown", handleWindowClick);
+            window.addEventListener("touchstart", handleWindowClick);
+            node.addEventListener("mousedown", handleStopPropagation);
+            node.addEventListener("touchstart", handleStopPropagation);
+            if (currentParams.activator) {
+                currentParams.activator.addEventListener("mousedown", handleStopPropagation);
+                currentParams.activator.addEventListener("touchstart", handleStopPropagation);
+            }
         }
-        menuElement.addEventListener("mousedown", (event) => {
-            event.stopPropagation();
-        });
-        menuElement.addEventListener("touchstart", (event) => {
-            event.stopPropagation();
-        });
     }
-});
+    updateListeners(params);
+    return {
+        update(newParams) {
+            updateListeners(newParams);
+        },
+        destroy() {
+            updateListeners({ enabled: false, activator: params.activator });
+        }
+    };
+}
 function getPositionedAncestor(elem, positions = ['fixed', 'absolute', 'sticky', 'relative']) {
     if (!elem)
         return null;
@@ -414,14 +433,15 @@ $effect(() => {
   <div
     role="presentation"
     bind:this={menuElement}
+    use:handleOutsideClick={{ enabled: closeOnClickOutside, activator }}
     data-menu
     data-uid={currentUid}
     style:z-index={zIndex}
     style:position="absolute"
-    style:top={_top + "px"}
+    style:top={finalTop + "px"}
     style:box-shadow={_boxShadow}
     style:border-radius={_borderRadius}
-    style:left={_left + "px"}
+    style:left={finalLeft + "px"}
     style:height={_height}
     style:max-height={_maxHeight}
     style:width={_width}

package/dist/components/simple/common/Menu.svelte.d.ts

@@ -3,6 +3,8 @@ import type { Snippet } from 'svelte';
 interface Props {
     _top?: number;
     _left?: number;
+    _offsetTop?: number;
+    _offsetLeft?: number;
     _width?: string;
     _height?: string;
     _maxHeight?: string;

package/dist/components/simple/dates/Calendar.css

@@ -5,14 +5,14 @@
   --calendar-default-day-height: 100%;
   --calendar-default-day-border-radius: 0px;
   --calendar-default-day-hover-background-color: rgb(var(--global-color-primary-600), .3);
+  --calendar-default-day-hover-border-radius: 4px;
   --calendar-default-selected-day-background-color: rgb(var(--global-color-primary-600));
   --calendar-default-selected-day-color: rgb(var(--global-color-grey-50));
   --calendar-default-selected-day-border-radius: 4px;
   --calendar-default-today-background-color: rgb(var(--global-color-error-200), .7);
   --calendar-default-today-color: rgb(var(--global-color-contrast-800));
   --calendar-default-today-border-radius: 9999px;
-  --calendar-default-today-height: 30px;
-  --calendar-default-today-width: 30px;
+  --calendar-default-today-height: min(90%,30px);
   --calendar-default-between-range-background-color: rgb(var(--global-color-primary-400), .4);
   --calendar-default-between-range-color: rgb(var(--global-color-contrast-800));
   --calendar-default-grid-gap: 0px;

package/dist/components/simple/dates/Calendar.svelte

@@ -2,7 +2,7 @@
 import './Calendar.css';
 import { fly } from "svelte/transition";
 import { dateToDateStat, getDateRowsStats, getDaysNames } from "./utils";
-let { selectedDate = $bindable(undefined), selectedDateTo = $bindable(undefined), visibleMonth = $bindable(new Date().getMonth()), visibleYear = $bindable(new Date().getFullYear()), locale = "it", showExtraMonthDays = true, showHeader = true, animationDuration = 200, disabled = false, type = 'singleDate', class: clazz = {}, ondayClick, weekHeaderSnippet, daySnippet, } = $props();
+let { selectedDate = $bindable(undefined), selectedDateTo = $bindable(undefined), visibleMonth = $bindable(new Date().getMonth()), visibleYear = $bindable(new Date().getFullYear()), locale = "it", showExtraMonthDays = true, showHeader = true, animationDuration = 200, disabled = false, type = 'singleDate', fillOpenRange = false, class: clazz = {}, ondayClick, weekHeaderSnippet, daySnippet, } = $props();
 const today = new Date();
 let hoveredDateStat = $state();
 function handleDayClick(dateStat, extraMonth) {
@@ -46,25 +46,43 @@ function hoverDateStat(dateStat) {
     hoveredDateStat = dateStat;
 }
 function isBetweenRange(dateStat) {
-    if (type == 'dateRange') {
-        let rangeDate = !!selectedDateTo
-            ? dateToDateStat(selectedDateTo)
-            : hoveredDateStat;
-        if (!!rangeDate && !!selectedDate) {
-            const date = new Date(dateStat.year, dateStat.month, dateStat.dayOfMonth);
-            const selected = new Date(selectedDate.getFullYear(), selectedDate.getMonth(), selectedDate.getDate());
-            const hovered = new Date(rangeDate.year, rangeDate.month, rangeDate.dayOfMonth);
-            const minDate = selected < hovered ? selected : hovered;
-            const maxDate = selected < hovered ? hovered : selected;
-            return date > minDate && date < maxDate;
-        }
-        else {
-            return false;
+    if (type !== 'dateRange')
+        return false;
+    const current = new Date(dateStat.year, dateStat.month, dateStat.dayOfMonth);
+    const start = selectedDate
+        ? new Date(selectedDate.getFullYear(), selectedDate.getMonth(), selectedDate.getDate())
+        : undefined;
+    const end = selectedDateTo
+        ? new Date(selectedDateTo.getFullYear(), selectedDateTo.getMonth(), selectedDateTo.getDate())
+        : undefined;
+    let limitA;
+    let limitB;
+    if (start && end) {
+        limitA = start;
+        limitB = end;
+    }
+    else if (start && hoveredDateStat) {
+        limitA = start;
+        limitB = new Date(hoveredDateStat.year, hoveredDateStat.month, hoveredDateStat.dayOfMonth);
+    }
+    else if (end && hoveredDateStat) {
+        limitA = new Date(hoveredDateStat.year, hoveredDateStat.month, hoveredDateStat.dayOfMonth);
+        limitB = end;
+    }
+    if (limitA && limitB) {
+        if (limitA.getTime() !== limitB.getTime()) {
+            const min = limitA < limitB ? limitA : limitB;
+            const max = limitA < limitB ? limitB : limitA;
+            return current > min && current < max;
         }
     }
-    else {
-        return false;
+    if (fillOpenRange) {
+        if (start && !end)
+            return current > start;
+        if (!start && end)
+            return current < end;
     }
+    return false;
 }
 </script>
 
@@ -96,22 +114,30 @@ function isBetweenRange(dateStat) {
           selectedDateTo.getMonth() == day.month &&
           selectedDateTo.getFullYear() == day.year}
         {@const extraMonth = day.month != visibleMonth}
+        {@const isBetween = isBetweenRange(day)}
         {@const isToday = 
           day.dayOfMonth == today.getDate() &&
           day.month == today.getMonth() &&
           day.year == today.getFullYear()}
+        {@const hovered =
+          !(type == 'dateRange') &&
+          !!hoveredDateStat &&
+          hoveredDateStat.dayOfMonth == day.dayOfMonth &&
+          hoveredDateStat.month == day.month &&
+          hoveredDateStat.year == day.year}
         <div 
           onmouseenter={() => hoverDateStat(day)}
           onmouseleave={() => hoverDateStat()}
           role='presentation'
           class="day-slot {clazz.day || ''}"
           class:extra-month={extraMonth}
-          class:today={isToday}
+          class:today={isToday && !(firstDaySelected || lastDaySelected) && !isBetween}
           class:selected={firstDaySelected || lastDaySelected}
-          class:between-range={isBetweenRange(day)}
+          class:between-range={isBetween}
           class:not-selected={!(firstDaySelected || lastDaySelected)}
           class:range-start={type == 'dateRange' && firstDaySelected}
           class:range-end={type == 'dateRange' && lastDaySelected}
+          class:hovered={hovered}
           onclick={() => handleDayClick(day, extraMonth)}
           onkeydown={() => handleDayClick(day, extraMonth)}
           >
@@ -142,7 +168,7 @@ function isBetweenRange(dateStat) {
 
   .grid-layout {
     display: grid;
-    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+    grid-template-columns: repeat(7, 1fr);
     height: 100%;
     gap: var(
       --calendar-grid-gap,
@@ -151,6 +177,8 @@ function isBetweenRange(dateStat) {
   }
 
   .day-slot {
+    position: relative;
+    z-index: 1;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -184,27 +212,39 @@ function isBetweenRange(dateStat) {
   }
 
   .today {
-    background-color: var(
-      --calendar-today-background-color,
-      var(--calendar-default-today-background-color)
-    );
     color: var(
       --calendar-today-color,
       var(--calendar-default-today-color)
     );
+  }
+
+  .today::before {
+    content: '';
+    position: absolute;
+    z-index: -1;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+
     height: var(
       --calendar-today-height,
       var(--calendar-default-today-height)
     );
+    width: auto;
+    aspect-ratio: 1 / 1;
     border-radius: var(
       --calendar-today-border-radius,
       var(--calendar-default-today-border-radius)
     );
-    width: var(
-      --calendar-today-width,
-      var(--calendar-default-today-width)
+    background-color: var(
+      --calendar-today-background-color,
+      var(--calendar-default-today-background-color)
     );
   }
+  
+  .today:hover::before {
+    background-color: transparent;
+  }
 
   .between-range {
     background-color: var(
@@ -227,6 +267,7 @@ function isBetweenRange(dateStat) {
       --calendar-day-width,
       var(--calendar-default-day-width)
     );
+    aspect-ratio: auto;
   }
 
   .selected {
@@ -263,6 +304,14 @@ function isBetweenRange(dateStat) {
       --calendar-day-hover-background-color,
       var(--calendar-default-day-hover-background-color)
     );
+    border-radius: var(
+      --calendar-day-hover-border-radius,
+      var(--calendar-default-day-hover-border-radius)
+    );
+  }
+
+  .day-slot.not-selected:hover:not(.hovered) {
+    border-radius: 0px;
   }
 
   .week-header-slot {