@keenmate/web-daterangepicker 1.8.1 → 1.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keenmate/web-daterangepicker",
-  "version": "1.8.1",
+  "version": "1.9.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/_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);
 }
 

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/_summary-actions.css

@@ -44,7 +44,7 @@
 .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;
   cursor: pointer;
@@ -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 */
@@ -69,7 +69,7 @@
 .drp-date-picker__button:disabled:hover,
 .drp-date-picker__button[disabled]:hover {
   background-color: transparent;
-  border-color: var(--drp-button-border-color);
+  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);
 
@@ -145,9 +147,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 +203,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 +215,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);
@@ -276,11 +283,14 @@
      ========================================================================== */
   --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-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);