@keenmate/web-daterangepicker 1.10.0 → 1.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keenmate/web-daterangepicker",
-  "version": "1.10.0",
+  "version": "1.11.0",
   "description": "Lightweight date picker web component with excellent keyboard navigation and range selection",
   "type": "module",
   "main": "./dist/web-daterangepicker.umd.js",

package/src/css/_calendar-grid.css

@@ -79,8 +79,9 @@
   font-weight: var(--drp-font-weight-semibold);
 }
 
-.drp-date-picker__day--selected:hover {
+.drp-date-picker__day--selected:hover:not(.drp-date-picker__day--disabled):not(.drp-date-picker__day--other-month) {
   background-color: var(--drp-day-selected-bg-hover);
+  color: var(--drp-day-selected-color-hover);
 }
 
 /* --------------------------------------
@@ -159,6 +160,12 @@
   user-select: none;
 }
 
+.drp-date-picker__day--range-start:hover:not(.drp-date-picker__day--disabled):not(.drp-date-picker__day--other-month),
+.drp-date-picker__day--range-end:hover:not(.drp-date-picker__day--disabled):not(.drp-date-picker__day--other-month) {
+  background-color: var(--drp-day-range-bg-hover);
+  color: var(--drp-day-range-color-hover);
+}
+
 .drp-date-picker__day--range-start:active,
 .drp-date-picker__day--range-end:active {
   cursor: grabbing;
@@ -168,7 +175,7 @@
   background-color: color-mix(in srgb, var(--drp-day-range-bg) calc(var(--drp-day-in-range-bg-opacity) * 100%), transparent);
 }
 
-.drp-date-picker__day--in-range:hover {
+.drp-date-picker__day--in-range:hover:not(.drp-date-picker__day--disabled):not(.drp-date-picker__day--other-month) {
   background-color: color-mix(in srgb, var(--drp-day-range-bg) calc(var(--drp-day-in-range-hover-bg-opacity) * 100%), transparent);
 }
 
@@ -209,8 +216,8 @@
 
 .drp-date-picker__day--invalid-range-start,
 .drp-date-picker__day--invalid-range-end {
-  background-color: var(--drp-message-error-border);
-  color: white;
+  background-color: var(--drp-day-invalid-range-bg);
+  color: var(--drp-day-invalid-range-color);
   font-weight: var(--drp-font-weight-semibold);
 }
 

package/src/css/_message.css

@@ -11,7 +11,7 @@
   align-items: center;
   gap: var(--drp-spacing-sm);
   padding: var(--drp-spacing-sm) var(--drp-spacing-md);
-  margin: 0 var(--drp-spacing-sm);
+  margin: 0;
   margin-bottom: var(--drp-spacing-sm);
   border-radius: var(--drp-border-radius);
   font-size: var(--drp-font-size-sm);

package/src/css/_variables.css

@@ -205,7 +205,7 @@
 
   --drp-nav-text-color: var(--drp-text-primary);
   --drp-nav-border-color: var(--drp-border-color);
-  --drp-nav-border: var(--drp-border);
+  --drp-nav-border: var(--drp-border-width-base) solid var(--drp-nav-border-color);
   --drp-nav-bg-hover: var(--drp-primary-bg);
   --drp-nav-bg-active: var(--drp-primary-bg-hover);
   --drp-nav-border-hover: var(--drp-accent-color);
@@ -217,7 +217,7 @@
   /* Rolling Selector */
   --drp-rolling-bg: var(--drp-primary-bg);
   --drp-rolling-border-color: var(--drp-border-color);
-  --drp-rolling-border: var(--drp-border);
+  --drp-rolling-border: var(--drp-border-width-base) solid var(--drp-rolling-border-color);
   --drp-rolling-scrollbar-width: 6px;
   --drp-rolling-scrollbar-thumb: var(--drp-border-color);
   --drp-rolling-scrollbar-thumb-hover: var(--drp-accent-color);
@@ -245,12 +245,15 @@
   --drp-day-selected-bg: var(--drp-accent-color);
   --drp-day-selected-color: var(--drp-text-color-on-accent);
   --drp-day-selected-bg-hover: var(--drp-accent-color-hover);
+  --drp-day-selected-color-hover: var(--drp-day-selected-color);
   --drp-day-focused-outline: var(--drp-accent-color);
   --drp-day-disabled-color: var(--drp-text-secondary);
   --drp-day-disabled-bg: var(--base-disabled-bg, transparent);
   --drp-day-other-month-color: var(--drp-text-secondary);
   --drp-day-range-bg: var(--drp-accent-color);
+  --drp-day-range-bg-hover: var(--drp-accent-color-hover);
   --drp-day-range-color: var(--drp-text-color-on-accent);
+  --drp-day-range-color-hover: var(--drp-day-range-color);
 
   /* Day Cell Dimensions & Borders */
   --drp-day-border-width: 2px;
@@ -265,6 +268,10 @@
   --drp-day-drag-preview-bg-opacity: 0.30;
   --drp-day-drag-preview-edge-bg-opacity: 0.60;
 
+  /* Invalid Range (showInvalidRange callback) */
+  --drp-day-invalid-range-bg: var(--drp-message-error-border);
+  --drp-day-invalid-range-color: var(--drp-text-color-on-accent);
+
   /* Day Disabled Pattern */
   --drp-day-disabled-pattern-opacity: 0.1;
 
@@ -288,11 +295,11 @@
      ========================================================================== */
   --drp-summary-text-color: var(--drp-text-secondary);
   --drp-summary-border-color: var(--drp-border-color);
-  --drp-summary-border: var(--drp-border);
+  --drp-summary-border: var(--drp-border-width-base) solid var(--drp-summary-border-color);
   --drp-summary-count-color: var(--drp-accent-color);
 
   --drp-button-border-color: var(--drp-border-color);
-  --drp-button-border: var(--drp-border);
+  --drp-button-border: var(--drp-border-width-base) solid var(--drp-button-border-color);
   --drp-button-bg: transparent;
   --drp-button-bg-hover: var(--drp-primary-bg);
   --drp-button-color: var(--drp-text-primary);