@keenmate/web-daterangepicker 1.9.1 → 1.9.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keenmate/web-daterangepicker",
-  "version": "1.9.1",
+  "version": "1.9.3",
   "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

@@ -14,7 +14,7 @@
   font-size: var(--drp-input-size-md-font);
   line-height: var(--drp-line-height-normal);
   color: var(--drp-input-color);
-  background-color: var(--drp-input-background);
+  background-color: var(--drp-input-bg);
   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);
@@ -43,7 +43,7 @@
 .drp-input:disabled {
   opacity: var(--drp-opacity-disabled);
   cursor: not-allowed;
-  background-color: var(--drp-input-background-disabled);
+  background-color: var(--drp-input-bg-disabled);
 }
 
 /* Input Size Variants */
@@ -127,7 +127,7 @@
   position: absolute;
   z-index: var(--drp-z-index-dropdown);
   font-family: var(--drp-font-family, var(--base-font-family, inherit));
-  background: var(--drp-dropdown-background);
+  background: var(--drp-dropdown-bg);
   border: var(--drp-border);
   border-radius: var(--drp-border-radius-lg);
   box-shadow: var(--drp-shadow-xl);

package/src/css/_header-navigation.css

@@ -253,7 +253,7 @@
   max-height: 350px;
   display: none;
   z-index: 100; /* Above everything */
-  background: var(--drp-dropdown-background); /* White background to cover calendar below */
+  background: var(--drp-dropdown-bg); /* White background to cover calendar below */
   gap: var(--drp-spacing-xs); /* Match normal rolling selector gap */
 }
 

package/src/css/_loading.css

@@ -9,7 +9,7 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: var(--drp-loading-overlay-background);
+  background-color: var(--drp-loading-overlay-bg);
   display: flex;
   align-items: center;
   justify-content: center;

package/src/css/_summary-actions.css

@@ -47,6 +47,7 @@
   border: var(--drp-button-border);
   border-radius: var(--drp-border-radius);
   background: var(--drp-button-bg);
+  color: var(--drp-button-color);
   cursor: pointer;
   font-family: inherit;
   font-size: var(--drp-font-size-sm);

package/src/css/_tooltips.css

@@ -10,7 +10,7 @@
 .drp-date-picker__tooltip {
   position: absolute;
   z-index: var(--drp-z-index-tooltip);
-  background-color: var(--drp-tooltip-background);
+  background-color: var(--drp-tooltip-bg);
   color: var(--drp-tooltip-text-color);
   padding: var(--drp-spacing-xs) var(--drp-spacing-sm);
   border-radius: var(--drp-border-radius-sm);
@@ -30,7 +30,7 @@
 /* Tooltip arrow */
 .drp-date-picker__tooltip-arrow {
   position: absolute;
-  background-color: var(--drp-tooltip-background);
+  background-color: var(--drp-tooltip-bg);
   width: var(--drp-tooltip-arrow-size);
   height: var(--drp-tooltip-arrow-size);
   transform: rotate(45deg);

package/src/css/_variables.css

@@ -76,7 +76,7 @@
        3. Hardcoded default fallback */
 
   /* Core Colors */
-  --drp-dropdown-background: var(--base-dropdown-background, #ffffff);
+  --drp-dropdown-bg: var(--base-dropdown-bg, #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));
@@ -90,15 +90,15 @@
   /* Text Colors */
   --drp-text-primary: var(--base-text-color-1, #111827);
   --drp-text-secondary: var(--base-text-color-3, #6b7280);
-  --drp-text-on-accent: var(--base-text-on-accent, #ffffff);
-  --drp-button-text-color: var(--drp-text-on-accent);
+  --drp-text-color-on-accent: var(--base-text-color-on-accent, #ffffff);
+  --drp-button-accent-text-color: var(--drp-text-color-on-accent);
 
   /* Tooltip Colors */
-  --drp-tooltip-background: var(--base-tooltip-background, #111827);
+  --drp-tooltip-bg: var(--base-tooltip-bg, #111827);
   --drp-tooltip-text-color: var(--base-tooltip-text-color, #ffffff);
 
   /* Loading Overlay */
-  --drp-loading-overlay-background: rgba(255, 255, 255, 0.8);
+  --drp-loading-overlay-bg: 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);
@@ -147,14 +147,14 @@
   /* ==========================================================================
      INPUT FIELD SEMANTIC VARIABLES
      ========================================================================== */
-  --drp-input-background: var(--base-input-background, var(--drp-dropdown-background));
+  --drp-input-bg: var(--base-input-bg, var(--drp-dropdown-bg));
   --drp-input-color: var(--base-input-color, var(--drp-text-primary));
   /* 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));
+  --drp-input-bg-disabled: var(--base-input-bg-disabled, var(--drp-primary-bg));
 
   /* Input Focus State */
   --drp-input-focus-shadow-color: rgba(59, 130, 246, 0.1);
@@ -224,7 +224,7 @@
   --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-color-selected: var(--drp-text-color-on-accent);
   --drp-rolling-item-bg-selected-hover: var(--drp-accent-color-hover);
   --drp-rolling-item-justify-content: center;
   --drp-rolling-item-min-height: calc(3.2 * var(--drp-rem));  /* 32px */
@@ -243,13 +243,13 @@
   --drp-day-border-hover: var(--drp-accent-color);
   --drp-day-today-border: var(--drp-accent-color);
   --drp-day-selected-bg: var(--drp-accent-color);
-  --drp-day-selected-color: var(--drp-text-on-accent);
+  --drp-day-selected-color: var(--drp-text-color-on-accent);
   --drp-day-selected-bg-hover: var(--drp-accent-color-hover);
   --drp-day-focused-outline: var(--drp-accent-color);
   --drp-day-disabled-color: var(--drp-text-secondary);
   --drp-day-other-month-color: var(--drp-text-secondary);
   --drp-day-range-bg: var(--drp-accent-color);
-  --drp-day-range-color: var(--drp-text-on-accent);
+  --drp-day-range-color: var(--drp-text-color-on-accent);
 
   /* Day Cell Dimensions & Borders */
   --drp-day-border-width: 2px;
@@ -294,13 +294,14 @@
   --drp-button-border: var(--drp-border);
   --drp-button-bg: transparent;
   --drp-button-bg-hover: var(--drp-primary-bg);
+  --drp-button-color: var(--drp-text-primary);
   --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);
   --drp-button-apply-bg: var(--drp-accent-color);
-  --drp-button-apply-color: var(--drp-button-text-color);
+  --drp-button-apply-color: var(--drp-button-accent-text-color);
   --drp-button-apply-border: var(--drp-accent-color);
   --drp-button-apply-bg-hover: var(--drp-accent-color-hover);
 
@@ -315,7 +316,7 @@
   --drp-badge-row-height: var(--drp-badge-max-height);
 
   --drp-badge-number-bg: var(--drp-accent-color);
-  --drp-badge-number-color: var(--drp-text-on-accent);
+  --drp-badge-number-color: var(--drp-text-color-on-accent);
   --drp-badge-count-bg: #ef4444;
   --drp-badge-count-color: #ffffff;
   --drp-badge-text-bg: var(--drp-text-secondary);