@keenmate/web-daterangepicker 1.11.0 → 1.13.0

package/src/css/_modal.css

@@ -0,0 +1,191 @@
+/* ==============================================================================
+   DATE RANGE PICKER - MODAL MODE
+   ==============================================================================
+   Activated when the host element has `positioning-mode="modal"`.
+   Calendar centers in the viewport with a backdrop scrim — useful on small
+   screens where multi-month horizontal layouts overflow. */
+
+/* Modal-mode calendar — overrides the absolute popover positioning. */
+.drp-date-picker--modal {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  max-width: calc(100vw - 2 * var(--drp-modal-gap));
+  max-height: calc(100vh - 2 * var(--drp-modal-gap));
+  /* width: auto so the calendar sizes to its content (multi-month grid),
+     capped by max-width. On narrow viewports, the @media block below forces
+     a generous explicit width so the modal doesn't collapse to its intrinsic
+     min-content (which looks tiny — see --drp-modal-narrow-width). */
+  width: auto;
+  /* Flex-column scroll layout (header pinned top, months scroll, actions
+     pinned bottom) is shared with floating mode and lives in `_base.css`
+     under `.drp-date-picker:not(.drp-date-picker--inline)`. */
+  z-index: var(--drp-z-index-modal);
+  /* Make this a query container so the inner multi-month layout can collapse
+     to a single vertical column when the modal itself is narrower than the
+     side-by-side configuration would need. */
+  container-type: inline-size;
+  container-name: drp-modal;
+}
+
+
+/* Make the grid layout work inside an auto-sized modal.
+   The base CSS sets `width: 100%` on `.drp-date-picker__months--grid`. When
+   the parent modal is `width: auto` (or `max-content` / `fit-content`), that
+   100% has nothing to resolve against — and the grid's own `minmax(0, 1fr)`
+   columns let it collapse to 0. Result: the modal's max-content evaluates to
+   ~0 and the modal snaps to its `min-width: 280px` floor regardless of how
+   many columns you configured.
+
+   Two overrides fix this for modal mode:
+   1. `width: auto` so the grid sizes to its own content rather than fighting
+      the parent's auto width.
+   2. `minmax(var(--drp-month-min-width), 1fr)` so each column has a real
+      pixel floor — items can't squeeze below the configured month min-width,
+      which forces the grid (and therefore the modal) to expand to fit them.
+
+   The narrow-tier `@container` rule below uses `!important` to override
+   these back to single-column behavior on small viewports. */
+.drp-date-picker--modal .drp-date-picker__months--grid {
+  width: auto;
+  grid-template-columns: repeat(var(--drp-grid-columns, 3), minmax(var(--drp-month-min-width, 280px), 1fr));
+}
+
+/* Per-breakpoint modal width.
+   Without an explicit width, `width: auto` collapses the modal to whatever
+   min-content width the day grid needs — much narrower than viewport on
+   phones, which looks awkward and wastes space. We pin the width per
+   breakpoint via CSS variables (which can be overridden by the consumer),
+   while the breakpoints themselves are hardcoded since media queries can't
+   read CSS variables.
+
+   Aligned with the 480 / 768 / 1200 breakpoints already used by `_base.css`
+   (grid columns) and the Responsive Sizing demo (`--drp-rem` scaling).
+   See `_variables.css` for the default widths and a description of each
+   tier. */
+
+/* xs — small phones (≤ 480px) */
+@media (max-width: 480px) {
+  .drp-date-picker--modal {
+    width: var(--drp-modal-width-xs);
+  }
+}
+
+/* sm — large phones / small tablets (481–768px) */
+@media (min-width: 481px) and (max-width: 768px) {
+  .drp-date-picker--modal {
+    width: var(--drp-modal-width-sm);
+  }
+}
+
+/* md — tablets / small desktops (769–1200px) */
+@media (min-width: 769px) and (max-width: 1200px) {
+  .drp-date-picker--modal {
+    width: var(--drp-modal-width-md);
+  }
+}
+
+/* lg — desktops (≥ 1201px) */
+@media (min-width: 1201px) {
+  .drp-date-picker--modal {
+    width: var(--drp-modal-width-lg);
+  }
+}
+
+/* Progressive responsive layout — different behavior for flex vs grid:
+   - Flex layout (`.drp-date-picker__months` without `--grid`): the visible
+     month count is reduced to what fits in a single row at each tier;
+     hidden columns still update in lockstep via collision-resolve.
+   - Grid layout (`.drp-date-picker__months--grid`): all configured months
+     stay visible — we just reduce the column count so they wrap into more
+     rows. Hiding wouldn't make sense for grids since the user explicitly
+     configured a 2×3 / 3×2 / etc. layout.
+   - Both layouts collapse to a single visible month at ≤ 600px (phone
+     viewports), since stacking 6 months vertically is too tall.
+
+   Thresholds are roughly N × `--drp-month-min-width` (280px default) + gaps.
+   Container queries can't read CSS variables, so adjust here if your
+   `--drp-month-min-width` differs significantly. */
+
+/* ≤ 600px → single visible month for BOTH layouts (phone screens) */
+@container drp-modal (max-width: 600px) {
+  .drp-date-picker--modal .drp-date-picker__month {
+    min-width: 0;
+    width: 100%;
+  }
+  .drp-date-picker--modal .drp-date-picker__month:nth-child(n+2) {
+    display: none;
+  }
+  .drp-date-picker--modal .drp-date-picker__months--grid {
+    grid-template-columns: minmax(0, 1fr) !important;
+    grid-template-rows: auto !important;
+  }
+}
+
+/* 601–900px → 2 columns (flex hides extras, grid wraps into more rows) */
+@container drp-modal (min-width: 601px) and (max-width: 900px) {
+  /* Flex layout: hide months beyond column 2 so we don't horizontal-overflow.
+     `:not(--grid)` scoping is what keeps the rule from also hiding items in
+     grid layouts (where we want all 6 of a 2×3 to remain visible, just
+     re-flowed into more rows). */
+  .drp-date-picker--modal .drp-date-picker__months:not(.drp-date-picker__months--grid) > .drp-date-picker__month:nth-child(n+3) {
+    display: none;
+  }
+  /* Grid layout: cap columns at 2 so 6 items become 3 rows of 2 (etc). */
+  .drp-date-picker--modal .drp-date-picker__months--grid {
+    grid-template-columns: repeat(2, minmax(var(--drp-month-min-width, 280px), 1fr)) !important;
+    grid-template-rows: auto !important;
+  }
+}
+
+/* 901–1200px → 3 columns (flex hides extras, grid uses configured cols up to 3) */
+@container drp-modal (min-width: 901px) and (max-width: 1200px) {
+  .drp-date-picker--modal .drp-date-picker__months:not(.drp-date-picker__months--grid) > .drp-date-picker__month:nth-child(n+4) {
+    display: none;
+  }
+  /* Grid layout: respect configured grid-columns (capped at 3 for safety in
+     case configured is higher; users configuring >3 columns probably want
+     them at >1200px tier anyway). */
+  .drp-date-picker--modal .drp-date-picker__months--grid {
+    grid-template-columns: repeat(min(var(--drp-grid-columns, 3), 3), minmax(var(--drp-month-min-width, 280px), 1fr)) !important;
+    grid-template-rows: auto !important;
+  }
+}
+
+/* > 1200px → respect configured layout (no override needed; the base
+   `.drp-date-picker--modal .drp-date-picker__months--grid` rule above
+   handles N × `minmax(--drp-month-min-width, 1fr)`) */
+
+/* Note: the unified-navigation header stays visible — its prev/next buttons
+   are the only way to navigate when per-month headers are static (unified
+   mode). Its range display ("May 2026 - October 2026") will look slightly
+   off when only some of the configured months are visible, but navigation
+   works. */
+
+/* Backdrop scrim — full-viewport, click-to-dismiss. */
+.drp-date-picker__backdrop {
+  position: fixed;
+  inset: 0;
+  background: var(--drp-modal-backdrop-bg);
+  z-index: var(--drp-z-index-modal-backdrop);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--drp-modal-transition);
+}
+
+.drp-date-picker__backdrop--visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+/* Optional fade-in for the calendar itself when transitions are enabled.
+   When .drp-transitions-enabled is set on the calendar, modal mode also
+   fades the calendar in/out alongside the backdrop. */
+.drp-date-picker--modal.drp-transitions-enabled {
+  transition: opacity var(--drp-modal-transition);
+}
+
+.drp-date-picker--modal.drp-transitions-enabled:not(.drp-date-picker--visible) {
+  opacity: 0;
+}

package/src/css/_summary-actions.css

@@ -19,6 +19,10 @@
 
 .drp-date-picker__summary--visible {
   display: block;
+  /* Push the summary border away from the months area above so the rolling
+     selector overlay (which fills the months container via inset: 0) doesn't
+     visually touch the summary's border-top when opened. */
+  margin-top: var(--drp-spacing-sm);
 }
 
 .drp-date-picker__summary--hidden {
@@ -40,6 +44,14 @@
   gap: var(--drp-spacing-sm);
   justify-content: space-between;
   padding-top: var(--drp-spacing-sm);
+}
+
+/* The border-top is a "separator from the visible summary above". Only draw it
+   when a visible summary actually precedes the actions — single mode never
+   appends a summary, range mode marks it --hidden until a range is selected,
+   and the always-present .drp-date-picker__message sits between the summary
+   and actions, so an adjacent-sibling selector wouldn't reach back. */
+.drp-date-picker:has(.drp-date-picker__summary--visible) .drp-date-picker__actions {
   border-top: var(--drp-summary-border);
 }
 

package/src/css/_tooltips.css

@@ -1,37 +1,37 @@
-/* ==============================================================================
-   DATE RANGE PICKER - TOOLTIPS
-   ==============================================================================
-   Floating UI tooltips for badge hover information */
-
-/* ==============================================================================
-   FLOATING UI TOOLTIPS
-   ============================================================================== */
-
-.drp-date-picker__tooltip {
-  position: absolute;
-  z-index: var(--drp-z-index-tooltip);
-  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);
-  font-size: var(--drp-font-size-xs);
-  line-height: var(--drp-tooltip-line-height);
-  max-width: var(--drp-tooltip-max-width);
-  word-wrap: break-word;
-  pointer-events: none;
-  opacity: 0;
-  transition: opacity var(--drp-transition-fast) var(--drp-easing-snappy);
-}
-
-.drp-date-picker__tooltip--visible {
-  opacity: 1;
-}
-
-/* Tooltip arrow */
-.drp-date-picker__tooltip-arrow {
-  position: absolute;
-  background-color: var(--drp-tooltip-bg);
-  width: var(--drp-tooltip-arrow-size);
-  height: var(--drp-tooltip-arrow-size);
-  transform: rotate(45deg);
-}
+/* ==============================================================================
+   DATE RANGE PICKER - TOOLTIPS
+   ==============================================================================
+   Floating UI tooltips for badge hover information */
+
+/* ==============================================================================
+   FLOATING UI TOOLTIPS
+   ============================================================================== */
+
+.drp-date-picker__tooltip {
+  position: fixed;
+  z-index: var(--drp-z-index-tooltip);
+  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);
+  font-size: var(--drp-font-size-xs);
+  line-height: var(--drp-tooltip-line-height);
+  max-width: var(--drp-tooltip-max-width);
+  word-wrap: break-word;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity var(--drp-transition-fast) var(--drp-easing-snappy);
+}
+
+.drp-date-picker__tooltip--visible {
+  opacity: 1;
+}
+
+/* Tooltip arrow */
+.drp-date-picker__tooltip-arrow {
+  position: absolute;
+  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

@@ -127,8 +127,31 @@
      Z-INDEX LAYERS
      ========================================================================== */
   --drp-z-index-dropdown: 9500;
+  --drp-z-index-modal-backdrop: 9700;
+  --drp-z-index-modal: 9800;
   --drp-z-index-tooltip: 9999;
 
+  /* Modal mode (positioning-mode="modal") */
+  --drp-modal-gap: 16px;                              /* gap between calendar and viewport edges */
+  --drp-modal-backdrop-bg: rgba(0, 0, 0, 0.45);       /* scrim color */
+  --drp-modal-transition: 150ms ease-out;             /* fade-in/out timing for backdrop + calendar */
+
+  /* Modal widths per breakpoint. Aligned with the same 480/768/1200 viewport
+     breakpoints already used in `_base.css` (grid columns) and in the
+     Responsive Sizing demo (`--drp-rem` scaling). Override any of these to
+     retheme; see `_modal.css` for the breakpoint @media rules.
+     Note: media queries can't read CSS variables in CSS, so the breakpoints
+     themselves are hardcoded — to shift them, edit `_modal.css` directly.
+     Tiers:
+       xs: viewport ≤ 480px           (small phones)
+       sm: 481px ≤ viewport ≤ 768px   (large phones / small tablets)
+       md: 769px ≤ viewport ≤ 1200px  (tablets / small desktops)
+       lg: viewport ≥ 1201px          (desktops) */
+  --drp-modal-width-xs: calc(100vw - 2 * var(--drp-modal-gap));   /* fill the viewport minus gap */
+  --drp-modal-width-sm: calc(100vw - 2 * var(--drp-modal-gap));   /* same — small screens want the room */
+  --drp-modal-width-md: 900px;                                    /* desktop-ish: 2 columns comfortably, grid wraps to 2-col */
+  --drp-modal-width-lg: 1100px;                                   /* wide desktop: 3 month columns, 2×3 grid renders as configured */
+
   /* ==========================================================================
      LAYOUT & DIMENSIONS
      ========================================================================== */
@@ -267,6 +290,8 @@
   --drp-day-in-range-hover-bg-opacity: 0.25;
   --drp-day-drag-preview-bg-opacity: 0.30;
   --drp-day-drag-preview-edge-bg-opacity: 0.60;
+  --drp-day-hover-preview-bg-opacity: 0.18;
+  --drp-day-hover-preview-invalid-bg-opacity: 0.18;
 
   /* Invalid Range (showInvalidRange callback) */
   --drp-day-invalid-range-bg: var(--drp-message-error-border);

package/src/css/main.css

@@ -12,6 +12,7 @@
    ├── _tooltips.css           - Floating UI tooltips
    ├── _loading.css            - Loading overlay and spinner for async validation
    ├── _message.css            - Message area for validation feedback
+   ├── _modal.css              - Modal positioning mode (centered overlay + backdrop)
    ├── _modifiers.css          - Transitions, inline mode
    └── main.css                - This file (imports all partials)
 
@@ -28,4 +29,5 @@
 @import './_tooltips.css';
 @import './_loading.css';
 @import './_message.css';
+@import './_modal.css';
 @import './_modifiers.css';