@keenmate/web-daterangepicker 1.2.0 → 1.4.0

package/package.json

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

package/src/scss/_badges.scss

@@ -47,16 +47,16 @@
 
 // Number Badge (e.g., day number, count)
 .drp-date-picker__badge-cell.badge-number {
-  background-color: $drp-badge-number-bg;
-  color: $drp-badge-number-color;
+  background-color: var(--drp-badge-number-bg);
+  color: var(--drp-badge-number-color);
   font-size: 0.7rem;
   font-weight: 600;
 }
 
 // Count Badge (e.g., number of events)
 .drp-date-picker__badge-cell.badge-count {
-  background-color: $drp-badge-count-bg;
-  color: $drp-badge-count-color;
+  background-color: var(--drp-badge-count-bg);
+  color: var(--drp-badge-count-color);
   font-size: 0.7rem;
   font-weight: 700;
 }
@@ -66,8 +66,8 @@
 // should be defined by the application, not the component library.
 // See index.html examples for how to customize badge colors for your use case.
 .drp-date-picker__badge-cell.badge-text {
-  background-color: $drp-badge-text-bg;
-  color: $drp-badge-text-color;
+  background-color: var(--drp-badge-text-bg);
+  color: var(--drp-badge-text-color);
   font-size: 0.65rem;
   font-weight: 700;
   text-transform: uppercase;

package/src/scss/_base.scss

@@ -87,24 +87,256 @@
   --drp-input-padding-h: #{$drp-input-padding-h};
   --drp-grid-columns: #{$drp-grid-columns};
   --drp-grid-rows: #{$drp-grid-rows};
+
+  // ===========================================================================
+  // INPUT FIELD SEMANTIC VARIABLES
+  // ===========================================================================
+  // Semantic variables for input customization (loosely coupled)
+
+  // Input colors
+  --drp-input-background: var(--drp-card-bg);
+  --drp-input-color: var(--drp-text-primary);
+  --drp-input-border-color: var(--drp-border-color);
+  --drp-input-border-color-hover: var(--drp-accent-color);
+  --drp-input-border-color-focus: var(--drp-accent-color);
+  --drp-input-placeholder-color: var(--drp-text-secondary);
+  --drp-input-disabled-background: var(--drp-primary-bg);
+
+  // Input focus state
+  --drp-input-focus-shadow-color: rgba(59, 130, 246, 0.1);
+  --drp-input-focus-shadow-size: 3px;
+
+  // Input icon
+  --drp-input-icon-opacity: #{$drp-input-icon-opacity};
+
+  // ===========================================================================
+  // INPUT SIZE VARIANTS (BASE VALUES)
+  // ===========================================================================
+  // Five size variants for the input element (xs, sm, md, lg, xl)
+
+  --drp-input-size-xs-font: #{$font-size-xs};
+  --drp-input-size-xs-padding-v: #{$padding-xs};
+  --drp-input-size-xs-padding-h: #{$padding-xs};
+  --drp-input-size-xs-height: 1.5rem;
+  --drp-input-size-xs-icon-size: 0.75em;
+
+  --drp-input-size-sm-font: #{$drp-font-size-sm};
+  --drp-input-size-sm-padding-v: #{$drp-spacing-xs};
+  --drp-input-size-sm-padding-h: #{$drp-spacing-sm};
+  --drp-input-size-sm-height: 2rem;
+  --drp-input-size-sm-icon-size: 0.875em;
+
+  --drp-input-size-md-font: #{$drp-font-size-base};
+  --drp-input-size-md-padding-v: #{$drp-spacing-sm};
+  --drp-input-size-md-padding-h: #{$padding-base};
+  --drp-input-size-md-height: 2.5rem;
+  --drp-input-size-md-icon-size: 1em;
+
+  --drp-input-size-lg-font: #{$drp-font-size-lg};
+  --drp-input-size-lg-padding-v: #{$drp-spacing-md};
+  --drp-input-size-lg-padding-h: #{$drp-spacing-md};
+  --drp-input-size-lg-height: 3rem;
+  --drp-input-size-lg-icon-size: 1.125em;
+
+  --drp-input-size-xl-font: #{$font-size-xl};
+  --drp-input-size-xl-padding-v: #{$drp-spacing-md};
+  --drp-input-size-xl-padding-h: #{$drp-spacing-lg};
+  --drp-input-size-xl-height: 3.5rem;
+  --drp-input-size-xl-icon-size: 1.25em;
+
+  // ===========================================================================
+  // HEADER & NAVIGATION SEMANTIC VARIABLES
+  // ===========================================================================
+
+  --drp-header-text-color: var(--drp-text-primary);
+  --drp-header-bg-hover: var(--drp-primary-bg);
+  --drp-header-bg-active: var(--drp-primary-bg-hover);
+
+  --drp-nav-text-color: var(--drp-text-primary);
+  --drp-nav-border-color: var(--drp-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);
+
+  --drp-rolling-bg: var(--drp-primary-bg);
+  --drp-rolling-border-color: var(--drp-border-color);
+  --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-bg-selected: var(--drp-accent-color);
+  --drp-rolling-item-color-selected: var(--drp-accent-text-color);
+  --drp-rolling-item-bg-selected-hover: var(--drp-accent-color-hover);
+
+  // ===========================================================================
+  // CALENDAR GRID & DAY CELLS SEMANTIC VARIABLES
+  // ===========================================================================
+
+  --drp-weekday-color: var(--drp-text-secondary);
+
+  --drp-day-text-color: var(--drp-text-primary);
+  --drp-day-bg-hover: var(--drp-primary-bg);
+  --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-accent-text-color);
+  --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-accent-text-color);
+
+  // ===========================================================================
+  // SUMMARY & ACTIONS SEMANTIC VARIABLES
+  // ===========================================================================
+
+  --drp-summary-text-color: var(--drp-text-secondary);
+  --drp-summary-border-color: var(--drp-border-color);
+  --drp-summary-count-color: var(--drp-accent-color);
+
+  --drp-button-border-color: var(--drp-border-color);
+  --drp-button-bg-hover: var(--drp-primary-bg);
+  --drp-button-border-hover: var(--drp-accent-color);
+  --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-border: var(--drp-accent-color);
+  --drp-button-apply-bg-hover: var(--drp-accent-color-hover);
+
+  // ===========================================================================
+  // BADGE SYSTEM SEMANTIC VARIABLES
+  // ===========================================================================
+
+  --drp-badge-number-bg: var(--drp-accent-color);
+  --drp-badge-number-color: var(--drp-accent-text-color);
+  --drp-badge-count-bg: #{$drp-color-error};
+  --drp-badge-count-color: #{$drp-color-white};
+  --drp-badge-text-bg: var(--drp-text-secondary);
+  --drp-badge-text-color: #{$drp-color-white};
+
+  // ===========================================================================
+  // UNIFIED NAV SEMANTIC VARIABLES
+  // ===========================================================================
+
+  --drp-unified-range-text-color: var(--drp-text-primary);
+  --drp-unified-range-bg-hover: var(--drp-primary-bg);
+  --drp-unified-range-bg-active: var(--drp-primary-bg-hover);
+  --drp-unified-month-color: var(--drp-text-secondary);
+  --drp-unified-rolling-disabled-color: var(--drp-text-secondary);
 }
 
 // ==============================================================================
 // DATE PICKER INPUT FIELD
 // ==============================================================================
 
+// Input element itself (actual <input> tag)
+.drp-input {
+  width: 100%;
+  font-family: inherit;
+  font-size: var(--drp-input-size-md-font);
+  line-height: 1.5;
+  color: var(--drp-input-color);
+  background-color: var(--drp-input-background);
+  border: var(--drp-border-width-base) solid var(--drp-input-border-color);
+  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
+  height: var(--drp-input-size-md-height);
+  box-sizing: border-box;
+  transition: border-color var(--drp-transition-fast) var(--drp-easing-snappy),
+              box-shadow var(--drp-transition-fast) var(--drp-easing-snappy);
+
+  &::placeholder {
+    color: var(--drp-input-placeholder-color);
+    opacity: 0.6;
+  }
+
+  &:hover:not(:disabled) {
+    border-color: var(--drp-input-border-color-hover);
+  }
+
+  &:focus {
+    outline: none;
+    border-color: var(--drp-input-border-color-focus);
+    box-shadow: 0 0 0 var(--drp-input-focus-shadow-size) var(--drp-input-focus-shadow-color);
+  }
+
+  &:disabled {
+    opacity: #{$drp-opacity-disabled};
+    cursor: not-allowed;
+    background-color: var(--drp-input-disabled-background);
+  }
+
+  // Size variants
+  &.drp-input--xs {
+    font-size: var(--drp-input-size-xs-font);
+    padding: var(--drp-input-size-xs-padding-v) var(--drp-input-size-xs-padding-h);
+    padding-right: calc(var(--drp-input-size-xs-padding-h) * 2.5);
+    height: var(--drp-input-size-xs-height);
+  }
+
+  &.drp-input--sm {
+    font-size: var(--drp-input-size-sm-font);
+    padding: var(--drp-input-size-sm-padding-v) var(--drp-input-size-sm-padding-h);
+    padding-right: calc(var(--drp-input-size-sm-padding-h) * 2.5);
+    height: var(--drp-input-size-sm-height);
+  }
+
+  &.drp-input--lg {
+    font-size: var(--drp-input-size-lg-font);
+    padding: var(--drp-input-size-lg-padding-v) var(--drp-input-size-lg-padding-h);
+    padding-right: calc(var(--drp-input-size-lg-padding-h) * 2.5);
+    height: var(--drp-input-size-lg-height);
+  }
+
+  &.drp-input--xl {
+    font-size: var(--drp-input-size-xl-font);
+    padding: var(--drp-input-size-xl-padding-v) var(--drp-input-size-xl-padding-h);
+    padding-right: calc(var(--drp-input-size-xl-padding-h) * 2.5);
+    height: var(--drp-input-size-xl-height);
+  }
+}
+
+// Input wrapper container (for positioning calendar icon)
 .drp-date-picker-input {
   position: relative;
   cursor: pointer;
+  display: inline-block;
+  width: 100%;
 
+  // Calendar icon
   &::after {
     content: '📅';
     position: absolute;
-    right: var(--drp-input-padding-h);
+    right: var(--drp-input-size-md-padding-h);
     top: 50%;
     transform: translateY(-50%);
     pointer-events: none;
-    opacity: $drp-input-icon-opacity;
+    opacity: var(--drp-input-icon-opacity);
+    font-size: var(--drp-input-size-md-icon-size);
+  }
+
+  // Size variant icon positioning
+  &.drp-date-picker-input--xs::after {
+    right: var(--drp-input-size-xs-padding-h);
+    font-size: var(--drp-input-size-xs-icon-size);
+  }
+
+  &.drp-date-picker-input--sm::after {
+    right: var(--drp-input-size-sm-padding-h);
+    font-size: var(--drp-input-size-sm-icon-size);
+  }
+
+  &.drp-date-picker-input--lg::after {
+    right: var(--drp-input-size-lg-padding-h);
+    font-size: var(--drp-input-size-lg-icon-size);
+  }
+
+  &.drp-date-picker-input--xl::after {
+    right: var(--drp-input-size-xl-padding-h);
+    font-size: var(--drp-input-size-xl-icon-size);
   }
 }
 

package/src/scss/_calendar-grid.scss

@@ -20,7 +20,7 @@
   text-align: center;
   font-size: var(--drp-font-size-xs);
   font-weight: var(--drp-font-weight-semibold);
-  color: var(--drp-text-secondary);
+  color: var(--drp-weekday-color);
   padding: var(--drp-spacing-xs);
   text-transform: uppercase;
 }
@@ -52,7 +52,7 @@
   align-items: center;
   justify-content: center;
   font-size: var(--drp-font-size-sm);
-  color: var(--drp-text-primary);
+  color: var(--drp-day-text-color);
   border-radius: var(--drp-border-radius);
   cursor: pointer;
   // Scale border width with cell-scale
@@ -60,15 +60,15 @@
   position: relative; // For absolute positioning of labels
 
   &:hover:not(.drp-date-picker__day--disabled):not(.drp-date-picker__day--other-month) {
-    background-color: var(--drp-primary-bg);
-    border-color: var(--drp-accent-color);
+    background-color: var(--drp-day-bg-hover);
+    border-color: var(--drp-day-border-hover);
   }
 
   // --------------------------------------
   // Today
   // --------------------------------------
   &--today {
-    border-color: var(--drp-accent-color);
+    border-color: var(--drp-day-today-border);
     font-weight: var(--drp-font-weight-semibold);
   }
 
@@ -76,12 +76,12 @@
   // Selected
   // --------------------------------------
   &--selected {
-    background-color: var(--drp-accent-color);
-    color: var(--drp-accent-text-color);
+    background-color: var(--drp-day-selected-bg);
+    color: var(--drp-day-selected-color);
     font-weight: var(--drp-font-weight-semibold);
 
     &:hover {
-      background-color: var(--drp-accent-color-hover);
+      background-color: var(--drp-day-selected-bg-hover);
     }
   }
 
@@ -90,7 +90,7 @@
   // --------------------------------------
   &--focused {
     // Scale outline with cell-scale
-    outline: calc(#{$drp-day-focused-outline-width} * var(--drp-cell-scale)) solid var(--drp-accent-color);
+    outline: calc(#{$drp-day-focused-outline-width} * var(--drp-cell-scale)) solid var(--drp-day-focused-outline);
     outline-offset: calc(#{$drp-day-focused-outline-offset} * var(--drp-cell-scale));
   }
 
@@ -98,7 +98,7 @@
   // Disabled
   // --------------------------------------
   &--disabled {
-    color: var(--drp-text-secondary);
+    color: var(--drp-day-disabled-color);
     opacity: $drp-day-disabled-opacity;
     cursor: not-allowed;
     position: relative;
@@ -132,7 +132,7 @@
   // Other month days (previous/next month)
   // --------------------------------------
   &--other-month {
-    color: var(--drp-text-secondary);
+    color: var(--drp-day-other-month-color);
     opacity: $drp-day-other-month-opacity;
 
     // Reset opacity when other-month days are part of range selection
@@ -149,8 +149,8 @@
   // --------------------------------------
   &--range-start,
   &--range-end {
-    background-color: var(--drp-accent-color);
-    color: var(--drp-accent-text-color);
+    background-color: var(--drp-day-range-bg);
+    color: var(--drp-day-range-color);
     font-weight: var(--drp-font-weight-semibold);
     cursor: grab;
     user-select: none;
@@ -161,10 +161,10 @@
   }
 
   &--in-range {
-    background-color: color-mix(in srgb, var(--drp-accent-color) $drp-day-in-range-bg-opacity * 100%, transparent);
+    background-color: color-mix(in srgb, var(--drp-day-range-bg) $drp-day-in-range-bg-opacity * 100%, transparent);
 
     &:hover {
-      background-color: color-mix(in srgb, var(--drp-accent-color) $drp-day-in-range-hover-bg-opacity * 100%, transparent);
+      background-color: color-mix(in srgb, var(--drp-day-range-bg) $drp-day-in-range-hover-bg-opacity * 100%, transparent);
     }
   }
 
@@ -179,14 +179,14 @@
   }
 
   &--drag-preview {
-    background-color: color-mix(in srgb, var(--drp-accent-color) $drp-day-drag-preview-bg-opacity * 100%, transparent);
+    background-color: color-mix(in srgb, var(--drp-day-range-bg) $drp-day-drag-preview-bg-opacity * 100%, transparent);
     // Scale border width with cell-scale
-    border: calc(#{$drp-day-border-width} * var(--drp-cell-scale)) $drp-day-drag-preview-border-style var(--drp-accent-color);
+    border: calc(#{$drp-day-border-width} * var(--drp-cell-scale)) $drp-day-drag-preview-border-style var(--drp-day-range-bg);
 
     &.drp-date-picker__day--range-start,
     &.drp-date-picker__day--range-end {
-      background-color: color-mix(in srgb, var(--drp-accent-color) $drp-day-drag-preview-edge-bg-opacity * 100%, transparent);
-      color: var(--drp-accent-text-color);
+      background-color: color-mix(in srgb, var(--drp-day-range-bg) $drp-day-drag-preview-edge-bg-opacity * 100%, transparent);
+      color: var(--drp-day-range-color);
     }
   }
 
@@ -227,7 +227,7 @@
 // (e.g., when outside rollingYearRange/rollingMonthRange or minDate/maxDate)
 
 .drp-date-picker__rolling-item--disabled {
-  color: var(--drp-text-secondary);
+  color: var(--drp-unified-rolling-disabled-color);
   opacity: 0.4;
   cursor: not-allowed;
   pointer-events: none; // Prevent clicking

package/src/scss/_header-navigation.scss

@@ -39,17 +39,17 @@
   text-align: center;
   font-weight: var(--drp-font-weight-semibold);
   font-size: var(--drp-font-size-base);
-  color: var(--drp-text-primary);
+  color: var(--drp-header-text-color);
   padding: var(--drp-spacing-sm) var(--drp-spacing-md);
   border-radius: var(--drp-border-radius);
   cursor: pointer;
 
   &:hover {
-    background-color: var(--drp-primary-bg);
+    background-color: var(--drp-header-bg-hover);
   }
 
   &:active {
-    background-color: var(--drp-primary-bg-hover);
+    background-color: var(--drp-header-bg-active);
   }
 }
 
@@ -64,20 +64,20 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  border: var(--drp-border-width-base) solid var(--drp-border-color);
+  border: var(--drp-border-width-base) solid var(--drp-nav-border-color);
   border-radius: var(--drp-border-radius);
   background: transparent;
   cursor: pointer;
   font-size: var(--drp-font-size-lg);
-  color: var(--drp-text-primary);
+  color: var(--drp-nav-text-color);
 
   &:hover {
-    background-color: var(--drp-primary-bg);
-    border-color: var(--drp-accent-color);
+    background-color: var(--drp-nav-bg-hover);
+    border-color: var(--drp-nav-border-hover);
   }
 
   &:active {
-    background-color: var(--drp-primary-bg-hover);
+    background-color: var(--drp-nav-bg-active);
   }
 
   // Disabled state
@@ -89,7 +89,7 @@
 
     &:hover {
       background-color: transparent;
-      border-color: var(--drp-border-color);
+      border-color: var(--drp-nav-border-color);
     }
   }
 
@@ -131,7 +131,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-border-color);
+  border: var(--drp-border-width-base) solid var(--drp-rolling-border-color);
   border-radius: var(--drp-border-radius);
 
   // Flex layout to control child item sizing
@@ -147,15 +147,15 @@
   }
 
   &::-webkit-scrollbar-track {
-    background: var(--drp-primary-bg);
+    background: var(--drp-rolling-bg);
   }
 
   &::-webkit-scrollbar-thumb {
-    background: var(--drp-border-color);
+    background: var(--drp-rolling-scrollbar-thumb);
     border-radius: 3px;
 
     &:hover {
-      background: var(--drp-accent-color);
+      background: var(--drp-rolling-scrollbar-thumb-hover);
     }
   }
 }
@@ -175,16 +175,16 @@
   justify-content: var(--drp-rolling-item-justify-content, #{$drp-rolling-item-justify-content});
 
   &:hover {
-    background-color: $drp-rolling-item-bg-hover;
+    background-color: var(--drp-rolling-item-bg-hover);
   }
 
   &--selected {
-    background-color: $drp-rolling-item-bg-selected;
-    color: $drp-rolling-item-color-selected;
+    background-color: var(--drp-rolling-item-bg-selected);
+    color: var(--drp-rolling-item-color-selected);
     font-weight: $drp-rolling-item-font-weight-selected;
 
     &:hover {
-      background-color: var(--drp-accent-color-hover);
+      background-color: var(--drp-rolling-item-bg-selected-hover);
     }
   }
 }
@@ -219,17 +219,17 @@
   text-align: center;
   font-weight: var(--drp-font-weight-semibold);
   font-size: var(--drp-font-size-lg);
-  color: var(--drp-text-primary);
+  color: var(--drp-unified-range-text-color);
   padding: var(--drp-spacing-sm) var(--drp-spacing-md);
   border-radius: var(--drp-border-radius);
   cursor: pointer;
 
   &:hover {
-    background-color: var(--drp-primary-bg);
+    background-color: var(--drp-unified-range-bg-hover);
   }
 
   &:active {
-    background-color: var(--drp-primary-bg-hover);
+    background-color: var(--drp-unified-range-bg-active);
   }
 
   // Non-interactive state (when unifiedHeaderInteractive is false)
@@ -275,7 +275,7 @@
     min-width: 0;
     height: 100%;
     overflow-y: auto;
-    border: var(--drp-border-width-base) solid var(--drp-border-color);
+    border: var(--drp-border-width-base) solid var(--drp-rolling-border-color);
     border-radius: var(--drp-border-radius);
     display: flex;
     flex-direction: column;
@@ -287,15 +287,15 @@
     }
 
     &::-webkit-scrollbar-track {
-      background: var(--drp-primary-bg);
+      background: var(--drp-rolling-bg);
     }
 
     &::-webkit-scrollbar-thumb {
-      background: var(--drp-border-color);
+      background: var(--drp-rolling-scrollbar-thumb);
       border-radius: 3px;
 
       &:hover {
-        background: var(--drp-accent-color);
+        background: var(--drp-rolling-scrollbar-thumb-hover);
       }
     }
   }
@@ -312,21 +312,21 @@
     justify-content: var(--drp-rolling-item-justify-content, #{$drp-rolling-item-justify-content});
 
     &:hover {
-      background-color: $drp-rolling-item-bg-hover;
+      background-color: var(--drp-rolling-item-bg-hover);
     }
 
     &--selected {
-      background-color: $drp-rolling-item-bg-selected;
-      color: $drp-rolling-item-color-selected;
+      background-color: var(--drp-rolling-item-bg-selected);
+      color: var(--drp-rolling-item-color-selected);
       font-weight: $drp-rolling-item-font-weight-selected;
 
       &:hover {
-        background-color: var(--drp-accent-color-hover);
+        background-color: var(--drp-rolling-item-bg-selected-hover);
       }
     }
 
     &--disabled {
-      color: var(--drp-text-secondary);
+      color: var(--drp-unified-rolling-disabled-color);
       opacity: 0.4;
       cursor: not-allowed;
     }
@@ -357,7 +357,7 @@
         cursor: default;
         font-size: var(--drp-font-size-base);
         font-weight: var(--drp-font-weight-normal);
-        color: var(--drp-text-secondary);
+        color: var(--drp-unified-month-color);
 
         &:hover {
           background-color: transparent;