@keenmate/web-daterangepicker 1.11.0 → 1.13.0

package/src/css/_base.css

@@ -1,232 +1,285 @@
-/* ==============================================================================
-   DATE RANGE PICKER - BASE STYLES
-   ==============================================================================
-   Base container styles, input field, and calendar popup */
-
-/* ==============================================================================
-   DATE PICKER INPUT FIELD
-   ============================================================================== */
-
-/* Input element itself (actual <input> tag) */
-.drp-input {
-  width: 100%;
-  font-family: var(--drp-font-family, var(--base-font-family, inherit));
-  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-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);
-  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);
-}
-
-.drp-input::placeholder {
-  color: var(--drp-input-placeholder-color);
-  opacity: 0.6;
-}
-
-.drp-input:hover:not(:disabled) {
-  border: var(--drp-input-border-hover);
-}
-
-.drp-input:focus {
-  outline: none;
-  border: var(--drp-input-border-focus);
-  box-shadow: 0 0 0 var(--drp-input-focus-shadow-size) var(--drp-input-focus-shadow-color);
-}
-
-.drp-input:disabled {
-  opacity: var(--drp-opacity-disabled);
-  cursor: not-allowed;
-  background-color: var(--drp-input-bg-disabled);
-}
-
-/* Input Size Variants */
-.drp-input.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.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.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.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 */
-.drp-date-picker-input::after {
-  content: '📅';
-  position: absolute;
-  right: var(--drp-input-size-md-padding-h);
-  top: 50%;
-  transform: translateY(-50%);
-  pointer-events: none;
-  opacity: var(--drp-input-icon-opacity);
-  font-size: var(--drp-input-size-md-icon-size);
-}
-
-/* Size variant icon positioning */
-.drp-date-picker-input.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.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.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.drp-date-picker-input--xl::after {
-  right: var(--drp-input-size-xl-padding-h);
-  font-size: var(--drp-input-size-xl-icon-size);
-}
-
-/* ==============================================================================
-   CALENDAR POPUP CONTAINER
-   ============================================================================== */
-
-.drp-date-picker {
-  position: absolute;
-  z-index: var(--drp-z-index-dropdown);
-  font-family: var(--drp-font-family, var(--base-font-family, inherit));
-  background: var(--drp-dropdown-bg);
-  border: var(--drp-border);
-  border-radius: var(--drp-border-radius-lg);
-  box-shadow: var(--drp-shadow-xl);
-  padding: var(--drp-spacing-md);
-  min-width: var(--drp-month-min-width);
-  max-width: var(--drp-calendar-max-width);
-  box-sizing: border-box;
-  user-select: none;
-}
-
-/* Hide by default */
-.drp-date-picker:not(.drp-date-picker--visible) {
-  display: none;
-}
-
-/* Inline mode modifier */
-.drp-date-picker--inline {
-  position: relative !important;
-  display: block !important;
-  z-index: auto;
-  min-width: 0;
-  max-width: 100%;
-  width: fit-content;
-  box-sizing: border-box;
-}
-
-/* ==============================================================================
-   MONTHS CONTAINER (MULTI-MONTH LAYOUT)
-   ============================================================================== */
-
-.drp-date-picker__months {
-  display: flex;
-  gap: var(--drp-spacing-lg);
-}
-
-/* Allow wrapping for inline mode on small screens */
-.drp-date-picker--inline .drp-date-picker__months {
-  flex-wrap: wrap;
-}
-
-/* Grid layout mode */
-.drp-date-picker__months--grid {
-  display: grid;
-  grid-template-columns: repeat(var(--drp-grid-columns, 3), minmax(0, 1fr));
-  grid-template-rows: repeat(var(--drp-grid-rows, 2), auto);
-  gap: var(--drp-spacing-lg);
-  width: 100%;
-}
-
-/* Responsive breakpoints for grid */
-@media (max-width: 1200px) {
-  .drp-date-picker__months--grid {
-    grid-template-columns: repeat(min(var(--drp-grid-columns, 3), 3), minmax(0, 1fr));
-  }
-}
-
-@media (max-width: 768px) {
-  .drp-date-picker__months--grid {
-    grid-template-columns: repeat(min(var(--drp-grid-columns, 3), 2), minmax(0, 1fr));
-  }
-}
-
-@media (max-width: 480px) {
-  .drp-date-picker__months--grid {
-    grid-template-columns: minmax(0, 1fr);
-  }
-}
-
-/* ==============================================================================
-   INDIVIDUAL MONTH CONTAINER
-   ============================================================================== */
-
-.drp-date-picker__month {
-  flex: 1;
-  min-width: var(--drp-month-min-width);
-  /* Make month a flex column container so calendar-container can fill vertical space */
-  display: flex;
-  flex-direction: column;
-}
-
-/* Allow shrinking for inline mode */
-.drp-date-picker--inline .drp-date-picker__month {
-  min-width: var(--drp-month-min-width-inline);
-}
-
-/* Grid layout: remove min-width to allow proper grid sizing */
-.drp-date-picker__months--grid .drp-date-picker__month {
-  min-width: 0;
-  width: 100%;
-}
-
-/* Calendar container for swapping between calendar grid and rolling selector */
-.drp-date-picker__calendar-container {
-  position: relative; /* Establishes containing block for absolute positioning */
-  /* Fill available vertical space in month container */
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  min-height: 0; /* Allow flex item to shrink below content size if needed */
-  /* Calendar grid (weekdays + days) determines minimum size
-     Rolling selector overlays absolutely and fills this expanded space */
-}
+/* ==============================================================================
+   DATE RANGE PICKER - BASE STYLES
+   ==============================================================================
+   Base container styles, input field, and calendar popup */
+
+/* ==============================================================================
+   DATE PICKER INPUT FIELD
+   ============================================================================== */
+
+/* Input element itself (actual <input> tag) */
+.drp-input {
+  width: 100%;
+  font-family: var(--drp-font-family, var(--base-font-family, inherit));
+  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-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);
+  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);
+}
+
+.drp-input::placeholder {
+  color: var(--drp-input-placeholder-color);
+  opacity: 0.6;
+}
+
+.drp-input:hover:not(:disabled) {
+  border: var(--drp-input-border-hover);
+}
+
+.drp-input:focus {
+  outline: none;
+  border: var(--drp-input-border-focus);
+  box-shadow: 0 0 0 var(--drp-input-focus-shadow-size) var(--drp-input-focus-shadow-color);
+}
+
+.drp-input:disabled {
+  opacity: var(--drp-opacity-disabled);
+  cursor: not-allowed;
+  background-color: var(--drp-input-bg-disabled);
+}
+
+/* Input Size Variants */
+.drp-input.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.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.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.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 */
+.drp-date-picker-input::after {
+  content: '📅';
+  position: absolute;
+  right: var(--drp-input-size-md-padding-h);
+  top: 50%;
+  transform: translateY(-50%);
+  pointer-events: none;
+  opacity: var(--drp-input-icon-opacity);
+  font-size: var(--drp-input-size-md-icon-size);
+}
+
+/* Size variant icon positioning */
+.drp-date-picker-input.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.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.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.drp-date-picker-input--xl::after {
+  right: var(--drp-input-size-xl-padding-h);
+  font-size: var(--drp-input-size-xl-icon-size);
+}
+
+/* ==============================================================================
+   CALENDAR POPUP CONTAINER
+   ============================================================================== */
+
+.drp-date-picker {
+  position: fixed;
+  z-index: var(--drp-z-index-dropdown);
+  font-family: var(--drp-font-family, var(--base-font-family, inherit));
+  background: var(--drp-dropdown-bg);
+  border: var(--drp-border);
+  border-radius: var(--drp-border-radius-lg);
+  box-shadow: var(--drp-shadow-xl);
+  padding: var(--drp-spacing-md);
+  min-width: var(--drp-month-min-width);
+  max-width: var(--drp-calendar-max-width);
+  box-sizing: border-box;
+  user-select: none;
+}
+
+/* Non-inline pickers (floating + modal) use a flex column layout so that
+   the months area is the only scrollable region — header, summary, and
+   action bar stay anchored at the top/bottom regardless of how tall the
+   multi-month content is. Without this, when the calendar is taller than
+   its constrained height (modal max-height, or Floating UI's size
+   middleware in floating mode), the action buttons scroll out of view.
+   `min-height: 0` on the months area is required so it can shrink below
+   its intrinsic content size — flex defaults to `min-height: auto` which
+   prevents shrinking and breaks the inner scroll. */
+.drp-date-picker:not(.drp-date-picker--inline) {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.drp-date-picker:not(.drp-date-picker--inline) > .drp-date-picker__months,
+.drp-date-picker:not(.drp-date-picker--inline) > .drp-date-picker__months--grid {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  /* Inline padding gives breathing room for visual decoration that
+     extends beyond the day-cell box: the focused-day outline (4px:
+     2px offset + 2px width) and the badge cell's hover scale(1.05).
+     Two reasons this matters:
+       1. Without the padding, first-column cells have their outline
+          clipped on the left.
+       2. `overflow-y: auto` silently coerces `overflow-x: visible` to
+          `auto`, so any pixel of horizontal overflow trips a scrollbar.
+          The badge scale on the rightmost cell would do exactly that. */
+  padding-inline: 4px;
+}
+
+.drp-date-picker:not(.drp-date-picker--inline) > .drp-date-picker__unified-header,
+.drp-date-picker:not(.drp-date-picker--inline) > .drp-date-picker__summary,
+.drp-date-picker:not(.drp-date-picker--inline) > .drp-date-picker__actions {
+  flex-shrink: 0;
+}
+
+/* Per-month headers (month name + prev/next nav, or static text in unified
+   mode) stick to the top of the scrolling months area so they stay visible
+   as the user scrolls through days. For multi-month layouts in a single row,
+   all headers stick simultaneously and look like a continuous header bar.
+   For grid layouts, each row's headers stick when that row is being scrolled
+   through, then unstick once the row is fully past. */
+.drp-date-picker:not(.drp-date-picker--inline) .drp-date-picker__month .drp-date-picker__header {
+  position: sticky;
+  top: 0;
+  background: var(--drp-dropdown-bg);
+  /* Above day cells (z-index: auto = 0) so the days scroll behind the header
+     instead of bleeding through it. */
+  z-index: 2;
+}
+
+/* Hide by default */
+.drp-date-picker:not(.drp-date-picker--visible) {
+  display: none;
+}
+
+/* Inline mode modifier */
+.drp-date-picker--inline {
+  position: relative !important;
+  display: block !important;
+  z-index: auto;
+  min-width: 0;
+  max-width: 100%;
+  width: fit-content;
+  box-sizing: border-box;
+}
+
+/* ==============================================================================
+   MONTHS CONTAINER (MULTI-MONTH LAYOUT)
+   ============================================================================== */
+
+.drp-date-picker__months {
+  display: flex;
+  gap: var(--drp-spacing-lg);
+}
+
+/* Allow wrapping for inline mode on small screens */
+.drp-date-picker--inline .drp-date-picker__months {
+  flex-wrap: wrap;
+}
+
+/* Grid layout mode */
+.drp-date-picker__months--grid {
+  display: grid;
+  grid-template-columns: repeat(var(--drp-grid-columns, 3), minmax(0, 1fr));
+  grid-template-rows: repeat(var(--drp-grid-rows, 2), auto);
+  gap: var(--drp-spacing-lg);
+  width: 100%;
+}
+
+/* Responsive breakpoints for grid */
+@media (max-width: 1200px) {
+  .drp-date-picker__months--grid {
+    grid-template-columns: repeat(min(var(--drp-grid-columns, 3), 3), minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 768px) {
+  .drp-date-picker__months--grid {
+    grid-template-columns: repeat(min(var(--drp-grid-columns, 3), 2), minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 480px) {
+  .drp-date-picker__months--grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
+/* ==============================================================================
+   INDIVIDUAL MONTH CONTAINER
+   ============================================================================== */
+
+.drp-date-picker__month {
+  flex: 1;
+  min-width: var(--drp-month-min-width);
+  /* Make month a flex column container so calendar-container can fill vertical space */
+  display: flex;
+  flex-direction: column;
+}
+
+/* Allow shrinking for inline mode */
+.drp-date-picker--inline .drp-date-picker__month {
+  min-width: var(--drp-month-min-width-inline);
+}
+
+/* Grid layout: remove min-width to allow proper grid sizing */
+.drp-date-picker__months--grid .drp-date-picker__month {
+  min-width: 0;
+  width: 100%;
+}
+
+/* Calendar container for swapping between calendar grid and rolling selector */
+.drp-date-picker__calendar-container {
+  position: relative; /* Establishes containing block for absolute positioning */
+  /* Fill available vertical space in month container */
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0; /* Allow flex item to shrink below content size if needed */
+  /* Calendar grid (weekdays + days) determines minimum size
+     Rolling selector overlays absolutely and fills this expanded space */
+}

package/src/css/_calendar-grid.css

@@ -206,6 +206,20 @@
   border-style: dashed !important;
 }
 
+/* --------------------------------------
+   Hover preview (range mode, half-selected state)
+   Paints the would-be range live as the user moves the mouse looking for an
+   end date. Quieter than drag-preview by design: this is exploratory, not
+   committed action.
+   -------------------------------------- */
+.drp-date-picker__day--hover-preview {
+  background-color: color-mix(in srgb, var(--drp-day-range-bg) calc(var(--drp-day-hover-preview-bg-opacity) * 100%), transparent);
+}
+
+.drp-date-picker__day--hover-preview-invalid {
+  background-color: color-mix(in srgb, var(--drp-day-drag-invalid-bg) calc(var(--drp-day-hover-preview-invalid-bg-opacity) * 100%), transparent);
+}
+
 /* --------------------------------------
    Invalid range states (showInvalidRange)
    Used when beforeDateSelectCallback returns { action: 'restore', showInvalidRange: true }

package/src/css/_header-navigation.css

@@ -127,7 +127,14 @@
   flex: 1;
   min-width: 0; /* Allow flex child to shrink below content size (enables ellipsis on items) */
   height: 100%; /* Fill parent height */
+  /* Without border-box, the 1px top+bottom border pushes the rendered height to
+     100% + 2px, overflowing the rolling-selector container and overlapping the
+     elements below it. */
+  box-sizing: border-box;
   overflow-y: auto;
+  /* Prevent scroll chaining: when the user reaches the top/bottom of this list,
+     the wheel/touch event would otherwise bubble up and scroll the page. */
+  overscroll-behavior: contain;
   border: var(--drp-rolling-border);
   border-radius: var(--drp-border-radius-lg);
   /* Flex layout to control child item sizing */