@keenmate/web-daterangepicker 1.8.1 → 1.9.1

package/package.json

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

package/src/css/_base.css

@@ -15,7 +15,7 @@
   line-height: var(--drp-line-height-normal);
   color: var(--drp-input-color);
   background-color: var(--drp-input-background);
-  border: var(--drp-border-width-base) solid var(--drp-input-border-color);
+  border: var(--drp-input-border);
   border-radius: var(--drp-border-radius);
   padding: var(--drp-input-size-md-padding-v) var(--drp-input-size-md-padding-h);
   padding-right: calc(var(--drp-input-size-md-padding-h) * 2.5); /* Extra space for calendar icon */
@@ -31,12 +31,12 @@
 }
 
 .drp-input:hover:not(:disabled) {
-  border-color: var(--drp-input-border-color-hover);
+  border: var(--drp-input-border-hover);
 }
 
 .drp-input:focus {
   outline: none;
-  border-color: var(--drp-input-border-color-focus);
+  border: var(--drp-input-border-focus);
   box-shadow: 0 0 0 var(--drp-input-focus-shadow-size) var(--drp-input-focus-shadow-color);
 }
 
@@ -128,7 +128,7 @@
   z-index: var(--drp-z-index-dropdown);
   font-family: var(--drp-font-family, var(--base-font-family, inherit));
   background: var(--drp-dropdown-background);
-  border: var(--drp-border-width-base) solid var(--drp-border-color);
+  border: var(--drp-border);
   border-radius: var(--drp-border-radius-lg);
   box-shadow: var(--drp-shadow-xl);
   padding: var(--drp-spacing-md);

package/src/css/_calendar-grid.css

@@ -53,7 +53,7 @@
   color: var(--drp-day-text-color);
   border-radius: var(--drp-border-radius-sm);
   cursor: pointer;
-  border: var(--drp-day-border-width) solid var(--drp-day-border-color);
+  border: var(--drp-day-border);
   position: relative; /* For absolute positioning of labels */
 }
 
@@ -183,7 +183,7 @@
 
 .drp-date-picker__day--drag-preview {
   background-color: color-mix(in srgb, var(--drp-day-range-bg) calc(var(--drp-day-drag-preview-bg-opacity) * 100%), transparent);
-  border: var(--drp-day-border-width) var(--drp-day-drag-preview-border-style) var(--drp-day-range-bg);
+  border: var(--drp-day-drag-border);
 }
 
 .drp-date-picker__day--drag-preview.drp-date-picker__day--range-start,

package/src/css/_header-navigation.css

@@ -61,7 +61,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  border: var(--drp-border-width-base) solid var(--drp-nav-border-color);
+  border: var(--drp-nav-border);
   border-radius: var(--drp-border-radius);
   background: transparent;
   cursor: pointer;
@@ -71,7 +71,7 @@
 
 .drp-date-picker__nav:hover {
   background-color: var(--drp-nav-bg-hover);
-  border-color: var(--drp-nav-border-hover);
+  border: var(--drp-nav-border-hover-full);
 }
 
 .drp-date-picker__nav:active {
@@ -89,7 +89,7 @@
 .drp-date-picker__nav--disabled:hover,
 .drp-date-picker__nav[disabled]:hover {
   background-color: transparent;
-  border-color: var(--drp-nav-border-color);
+  border: var(--drp-nav-border);
 }
 
 .drp-date-picker__nav--prev::before {
@@ -128,7 +128,7 @@
   min-width: 0; /* Allow flex child to shrink below content size (enables ellipsis on items) */
   height: 100%; /* Fill parent height */
   overflow-y: auto;
-  border: var(--drp-border-width-base) solid var(--drp-rolling-border-color);
+  border: var(--drp-rolling-border);
   border-radius: var(--drp-border-radius-lg);
   /* Flex layout to control child item sizing */
   display: flex;
@@ -159,6 +159,7 @@
   padding: var(--drp-rolling-item-padding-v) var(--drp-rolling-item-padding-h);
   cursor: pointer;
   font-size: var(--drp-rolling-item-font-size);
+  color: var(--drp-rolling-item-color);
   min-height: var(--drp-rolling-item-min-height);
   flex-shrink: 0;
   /* Flexbox for vertical and horizontal centering */
@@ -266,7 +267,7 @@
   min-width: 0;
   height: 100%;
   overflow-y: auto;
-  border: var(--drp-border-width-base) solid var(--drp-rolling-border-color);
+  border: var(--drp-rolling-border);
   border-radius: var(--drp-border-radius-lg);
   display: flex;
   flex-direction: column;

package/src/css/_loading.css

@@ -18,9 +18,9 @@
 }
 
 .drp-date-picker__loading-spinner {
-  width: 40px;
-  height: 40px;
-  border: 4px solid var(--drp-loading-spinner-color);
+  width: var(--drp-loading-spinner-size);
+  height: var(--drp-loading-spinner-size);
+  border: var(--drp-loading-spinner-border-width) solid var(--drp-loading-spinner-color);
   border-top-color: var(--drp-loading-spinner-accent);
   border-radius: 50%;
   animation: drp-spin 0.8s linear infinite;

package/src/css/_summary-actions.css

@@ -10,7 +10,7 @@
 .drp-date-picker__summary {
   text-align: center;
   padding: var(--drp-spacing-md);
-  border-top: var(--drp-border-width-base) solid var(--drp-summary-border-color);
+  border-top: var(--drp-summary-border);
   font-size: var(--drp-font-size-sm);
   color: var(--drp-summary-text-color);
 }
@@ -38,15 +38,15 @@
   gap: var(--drp-spacing-sm);
   justify-content: space-between;
   padding-top: var(--drp-spacing-sm);
-  border-top: var(--drp-border-width-base) solid var(--drp-summary-border-color);
+  border-top: var(--drp-summary-border);
 }
 
 .drp-date-picker__button {
   flex: 1;
   padding: var(--drp-spacing-sm) var(--drp-spacing-md);
-  border: var(--drp-border-width-base) solid var(--drp-button-border-color);
+  border: var(--drp-button-border);
   border-radius: var(--drp-border-radius);
-  background: transparent;
+  background: var(--drp-button-bg);
   cursor: pointer;
   font-family: inherit;
   font-size: var(--drp-font-size-sm);
@@ -55,7 +55,7 @@
 
 .drp-date-picker__button:hover {
   background-color: var(--drp-button-bg-hover);
-  border-color: var(--drp-button-border-hover);
+  border: var(--drp-button-border-hover-full);
 }
 
 /* Disabled state */
@@ -68,8 +68,8 @@
 
 .drp-date-picker__button:disabled:hover,
 .drp-date-picker__button[disabled]:hover {
-  background-color: transparent;
-  border-color: var(--drp-button-border-color);
+  background-color: var(--drp-button-bg);
+  border: var(--drp-button-border);
 }
 
 /* Today Button */

package/src/css/_variables.css

@@ -78,6 +78,8 @@
   /* Core Colors */
   --drp-dropdown-background: var(--base-dropdown-background, #ffffff);
   --drp-border-color: var(--base-border-color, #e5e7eb);
+  /* Full border string - inherits from theme-designer --base-border */
+  --drp-border: var(--base-border, var(--drp-border-width-base) solid var(--drp-border-color));
   --drp-primary-bg: var(--base-primary-bg, #f3f4f6);
   --drp-primary-bg-hover: var(--base-primary-bg-hover, #e5e7eb);
 
@@ -97,6 +99,8 @@
 
   /* Loading Overlay */
   --drp-loading-overlay-background: rgba(255, 255, 255, 0.8);
+  --drp-loading-spinner-size: 40px;
+  --drp-loading-spinner-border-width: 4px;
   --drp-loading-spinner-color: var(--drp-border-color);
   --drp-loading-spinner-accent: var(--drp-accent-color);
 
@@ -145,9 +149,10 @@
      ========================================================================== */
   --drp-input-background: var(--base-input-background, var(--drp-dropdown-background));
   --drp-input-color: var(--base-input-color, var(--drp-text-primary));
-  --drp-input-border-color: var(--base-input-border-color, var(--drp-border-color));
-  --drp-input-border-color-hover: var(--base-input-border-color-hover, var(--drp-accent-color));
-  --drp-input-border-color-focus: var(--base-input-border-color-focus, var(--drp-accent-color));
+  /* Input field borders - uses theme-designer --base-input-border (full border) */
+  --drp-input-border: var(--base-input-border, var(--drp-border));
+  --drp-input-border-hover: var(--base-input-border-hover, var(--drp-border-width-base) solid var(--drp-accent-color));
+  --drp-input-border-focus: var(--base-input-border-focus, var(--drp-border-width-base) solid var(--drp-accent-color));
   --drp-input-placeholder-color: var(--base-input-placeholder-color, var(--drp-text-secondary));
   --drp-input-background-disabled: var(--base-input-background-disabled, var(--drp-primary-bg));
 
@@ -200,9 +205,11 @@
 
   --drp-nav-text-color: var(--drp-text-primary);
   --drp-nav-border-color: var(--drp-border-color);
+  --drp-nav-border: var(--drp-border);
   --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);
+  --drp-nav-border-hover-full: var(--drp-border-width-base) solid var(--drp-nav-border-hover);
 
   /* Navigation Button Dimensions */
   --drp-nav-size: calc(3.2 * var(--drp-rem));  /* 32px */
@@ -210,10 +217,12 @@
   /* 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-scrollbar-width: 6px;
   --drp-rolling-scrollbar-thumb: var(--drp-border-color);
   --drp-rolling-scrollbar-thumb-hover: var(--drp-accent-color);
   --drp-rolling-item-bg-hover: var(--drp-primary-bg);
+  --drp-rolling-item-color: var(--drp-text-primary);
   --drp-rolling-item-bg-selected: var(--drp-accent-color);
   --drp-rolling-item-color-selected: var(--drp-text-on-accent);
   --drp-rolling-item-bg-selected-hover: var(--drp-accent-color-hover);
@@ -245,6 +254,7 @@
   /* Day Cell Dimensions & Borders */
   --drp-day-border-width: 2px;
   --drp-day-border-color: transparent;
+  --drp-day-border: var(--drp-day-border-width) solid var(--drp-day-border-color);
   --drp-day-focused-outline-width: 2px;
   --drp-day-focused-outline-offset: 2px;
 
@@ -260,6 +270,7 @@
   /* Day Dragging */
   --drp-day-dragging-scale: 1.1;
   --drp-day-drag-preview-border-style: dashed;
+  --drp-day-drag-border: var(--drp-day-border-width) var(--drp-day-drag-preview-border-style) var(--drp-day-range-bg);
   --drp-day-drag-invalid-bg: #ef4444;
   --drp-day-drag-invalid-bg-opacity: 0.20;
 
@@ -276,11 +287,15 @@
      ========================================================================== */
   --drp-summary-text-color: var(--drp-text-secondary);
   --drp-summary-border-color: var(--drp-border-color);
+  --drp-summary-border: var(--drp-border);
   --drp-summary-count-color: var(--drp-accent-color);
 
   --drp-button-border-color: var(--drp-border-color);
+  --drp-button-border: var(--drp-border);
+  --drp-button-bg: transparent;
   --drp-button-bg-hover: var(--drp-primary-bg);
   --drp-button-border-hover: var(--drp-accent-color);
+  --drp-button-border-hover-full: var(--drp-border-width-base) solid var(--drp-button-border-hover);
   --drp-button-today-color: var(--drp-accent-color);
   --drp-button-clear-color: var(--drp-text-secondary);
   --drp-button-cancel-color: var(--drp-text-secondary);