@keenmate/web-daterangepicker 1.9.5 → 1.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keenmate/web-daterangepicker",
-  "version": "1.9.5",
+  "version": "1.10.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/_calendar-grid.css

@@ -199,6 +199,21 @@
   border-style: dashed !important;
 }
 
+/* --------------------------------------
+   Invalid range states (showInvalidRange)
+   Used when beforeDateSelectCallback returns { action: 'restore', showInvalidRange: true }
+   -------------------------------------- */
+.drp-date-picker__day--invalid-range {
+  background-color: color-mix(in srgb, var(--drp-message-error-border) 20%, transparent);
+}
+
+.drp-date-picker__day--invalid-range-start,
+.drp-date-picker__day--invalid-range-end {
+  background-color: var(--drp-message-error-border);
+  color: white;
+  font-weight: var(--drp-font-weight-semibold);
+}
+
 /* ==============================================================================
    SPECIAL DATE HIGHLIGHTING (EXAMPLES)
    ==============================================================================

package/src/css/_message.css

@@ -0,0 +1,114 @@
+/* ==============================================================================
+   MESSAGE AREA
+   ==============================================================================
+   Displays feedback messages between the calendar months and summary section.
+   Used for validation errors, warnings, info messages, and success confirmations.
+   ============================================================================== */
+
+/* Message container - hidden by default */
+.drp-date-picker__message {
+  display: none;
+  align-items: center;
+  gap: var(--drp-spacing-sm);
+  padding: var(--drp-spacing-sm) var(--drp-spacing-md);
+  margin: 0 var(--drp-spacing-sm);
+  margin-bottom: var(--drp-spacing-sm);
+  border-radius: var(--drp-border-radius);
+  font-size: var(--drp-font-size-sm);
+  line-height: var(--drp-line-height-normal);
+}
+
+/* Visible state */
+.drp-date-picker__message--visible {
+  display: flex;
+}
+
+/* Message text - fills available space */
+.drp-date-picker__message-text {
+  flex: 1;
+}
+
+/* Close button */
+.drp-date-picker__message-close {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: calc(2 * var(--drp-rem));
+  height: calc(2 * var(--drp-rem));
+  padding: 0;
+  border: none;
+  background: transparent;
+  font-size: var(--drp-font-size-lg);
+  line-height: 1;
+  cursor: pointer;
+  opacity: 0.6;
+  transition: opacity var(--drp-transition-fast) var(--drp-easing-snappy);
+}
+
+.drp-date-picker__message-close:hover {
+  opacity: 1;
+}
+
+/* ==========================================================================
+   MESSAGE TYPE VARIANTS
+   ========================================================================== */
+
+/* Error - red */
+.drp-date-picker__message--error {
+  background-color: var(--drp-message-error-bg);
+  color: var(--drp-message-error-color);
+  border: 1px solid var(--drp-message-error-border);
+}
+
+.drp-date-picker__message--error .drp-date-picker__message-close {
+  color: var(--drp-message-error-color);
+}
+
+/* Warning - orange/amber */
+.drp-date-picker__message--warning {
+  background-color: var(--drp-message-warning-bg);
+  color: var(--drp-message-warning-color);
+  border: 1px solid var(--drp-message-warning-border);
+}
+
+.drp-date-picker__message--warning .drp-date-picker__message-close {
+  color: var(--drp-message-warning-color);
+}
+
+/* Info - blue */
+.drp-date-picker__message--info {
+  background-color: var(--drp-message-info-bg);
+  color: var(--drp-message-info-color);
+  border: 1px solid var(--drp-message-info-border);
+}
+
+.drp-date-picker__message--info .drp-date-picker__message-close {
+  color: var(--drp-message-info-color);
+}
+
+/* Success - green */
+.drp-date-picker__message--success {
+  background-color: var(--drp-message-success-bg);
+  color: var(--drp-message-success-color);
+  border: 1px solid var(--drp-message-success-border);
+}
+
+.drp-date-picker__message--success .drp-date-picker__message-close {
+  color: var(--drp-message-success-color);
+}
+
+/* Custom - no styling, full user control via HTML content */
+.drp-date-picker__message--custom {
+  /* No styling - programmer controls everything via HTML content */
+  background: transparent;
+  border: none;
+  padding: 0;
+  margin: 0;
+  margin-bottom: var(--drp-spacing-sm);
+}
+
+.drp-date-picker__message--custom .drp-date-picker__message-close {
+  /* Hide close button for custom messages - user controls everything */
+  display: none;
+}

package/src/css/_summary-actions.css

@@ -9,7 +9,9 @@
 
 .drp-date-picker__summary {
   text-align: center;
-  padding: var(--drp-spacing-md);
+  padding: 0;
+  margin: 0;
+  margin-bottom: var(--drp-spacing-sm);
   border-top: var(--drp-summary-border);
   font-size: var(--drp-font-size-sm);
   color: var(--drp-summary-text-color);

package/src/css/_variables.css

@@ -339,6 +339,31 @@
   --drp-tooltip-max-width: 200px;
   --drp-tooltip-arrow-size: 8px;
 
+  /* ==========================================================================
+     MESSAGE AREA COLORS
+     ==========================================================================
+     Four type variants for feedback messages: error, warning, info, success */
+
+  /* Error - red */
+  --drp-message-error-bg: #fef2f2;
+  --drp-message-error-color: #991b1b;
+  --drp-message-error-border: #fecaca;
+
+  /* Warning - orange/amber */
+  --drp-message-warning-bg: #fffbeb;
+  --drp-message-warning-color: #92400e;
+  --drp-message-warning-border: #fde68a;
+
+  /* Info - blue */
+  --drp-message-info-bg: #eff6ff;
+  --drp-message-info-color: #1e40af;
+  --drp-message-info-border: #bfdbfe;
+
+  /* Success - green */
+  --drp-message-success-bg: #f0fdf4;
+  --drp-message-success-color: #166534;
+  --drp-message-success-border: #bbf7d0;
+
   /* ==========================================================================
      CALENDAR DIMENSIONS
      ========================================================================== */

package/src/css/main.css

@@ -11,6 +11,7 @@
    ├── _summary-actions.css    - Selection summary and action buttons
    ├── _tooltips.css           - Floating UI tooltips
    ├── _loading.css            - Loading overlay and spinner for async validation
+   ├── _message.css            - Message area for validation feedback
    ├── _modifiers.css          - Transitions, inline mode
    └── main.css                - This file (imports all partials)
 
@@ -26,4 +27,5 @@
 @import './_summary-actions.css';
 @import './_tooltips.css';
 @import './_loading.css';
+@import './_message.css';
 @import './_modifiers.css';