@keenmate/web-daterangepicker 1.7.0-rc01 → 1.8.0

package/src/css/_variables.css

@@ -0,0 +1,331 @@
+/* ==============================================================================
+   CSS CUSTOM PROPERTIES (:host level)
+   ==============================================================================
+   This file defines all CSS custom properties at the :host level, making them:
+   - Inspectable in browser DevTools
+   - Overridable from outside Shadow DOM
+   - Self-documenting in compiled CSS
+
+   Usage from outside Shadow DOM:
+     web-daterangepicker {
+       --drp-accent-color: #10b981;
+       --drp-border-radius: 0.5rem;
+     }
+   ============================================================================== */
+
+:host,
+:root {
+  /* ==========================================================================
+     BASE REM UNIT
+     ==========================================================================
+     Internal 10px-based unit for clean math. Override to scale the component.
+     Default 10px produces same visual output as standard 16px rem.
+     Set to 1rem in Pure Admin (10px base) to scale with document.
+
+     IMPORTANT: For web components, set --drp-rem on the <web-daterangepicker>
+     element itself or on :root. Setting on wrapper divs won't work due to
+     shadow DOM encapsulation. */
+  --drp-rem: 10px;
+
+  /* ==========================================================================
+     FONT FAMILY (set at :host so all shadow DOM content inherits)
+     ========================================================================== */
+  font-family: var(--drp-font-family, var(--base-font-family, inherit));
+
+  /* ==========================================================================
+     SPACING SCALE
+     ========================================================================== */
+  --drp-spacing-xs: calc(0.4 * var(--drp-rem));   /* 4px */
+  --drp-spacing-sm: calc(0.8 * var(--drp-rem));   /* 8px */
+  --drp-spacing-md: calc(1.6 * var(--drp-rem));   /* 16px */
+  --drp-spacing-lg: calc(2.4 * var(--drp-rem));   /* 24px */
+  --drp-spacing-xl: calc(3.2 * var(--drp-rem));   /* 32px */
+
+  /* ==========================================================================
+     TYPOGRAPHY SCALE (with theme-designer integration)
+     ==========================================================================
+     Priority chain: --drp-* → --base-* → calc default
+     Theme-designer outputs unitless multipliers (e.g., --base-font-size-sm: 1.4)
+     Component computes: calc(1.4 * 10px) = 14px */
+
+  /* Font Sizes (unitless multipliers × --drp-rem) */
+  --drp-font-size-2xs: calc(var(--base-font-size-2xs, 1) * var(--drp-rem));     /* 10px */
+  --drp-font-size-xs: calc(var(--base-font-size-xs, 1.2) * var(--drp-rem));     /* 12px */
+  --drp-font-size-sm: calc(var(--base-font-size-sm, 1.4) * var(--drp-rem));     /* 14px */
+  --drp-font-size-base: calc(var(--base-font-size-base, 1.6) * var(--drp-rem)); /* 16px */
+  --drp-font-size-lg: calc(var(--base-font-size-lg, 1.8) * var(--drp-rem));     /* 18px */
+  --drp-font-size-xl: calc(var(--base-font-size-xl, 2) * var(--drp-rem));       /* 20px */
+  --drp-font-size-2xl: calc(var(--base-font-size-2xl, 2.4) * var(--drp-rem));   /* 24px */
+
+  /* Font Weights (reference theme-designer base variables) */
+  --drp-font-weight-normal: var(--base-font-weight-normal, 400);
+  --drp-font-weight-medium: var(--base-font-weight-medium, 500);
+  --drp-font-weight-semibold: var(--base-font-weight-semibold, 600);
+
+  /* Line Heights (reference theme-designer base variables) */
+  --drp-line-height-tight: var(--base-line-height-tight, 1.25);
+  --drp-line-height-normal: var(--base-line-height-normal, 1.5);
+  --drp-line-height-relaxed: var(--base-line-height-relaxed, 1.75);
+
+  /* ==========================================================================
+     COLORS & THEME
+     ==========================================================================
+     Color variables follow this priority chain:
+       1. External override: --drp-accent-color: #custom
+       2. Base theme value: var(--base-accent-color)
+       3. Hardcoded default fallback */
+
+  /* Core Colors */
+  --drp-dropdown-background: var(--base-dropdown-background, #ffffff);
+  --drp-border-color: var(--base-border-color, #e5e7eb);
+  --drp-primary-bg: var(--base-primary-bg, #f3f4f6);
+  --drp-primary-bg-hover: var(--base-primary-bg-hover, #e5e7eb);
+
+  /* Accent Colors */
+  --drp-accent-color: var(--base-accent-color, #3b82f6);
+  --drp-accent-color-hover: var(--base-accent-color-hover, #2563eb);
+
+  /* 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);
+
+  /* Tooltip Colors */
+  --drp-tooltip-background: var(--base-tooltip-background, #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-spinner-color: var(--drp-border-color);
+  --drp-loading-spinner-accent: var(--drp-accent-color);
+
+  /* ==========================================================================
+     BORDER & SHADOW
+     ========================================================================== */
+  --drp-border-width-base: 1px;
+
+  /* Border Radius (unitless multipliers from theme-designer, multiplied by --drp-rem) */
+  --drp-border-radius-sm: calc(var(--base-border-radius-sm, 0.4) * var(--drp-rem));  /* 4px */
+  --drp-border-radius-md: calc(var(--base-border-radius-md, 0.6) * var(--drp-rem));  /* 6px (base) */
+  --drp-border-radius-lg: calc(var(--base-border-radius-lg, 0.8) * var(--drp-rem));  /* 8px */
+  --drp-border-radius: var(--drp-border-radius-md);
+
+  --drp-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+
+  /* ==========================================================================
+     TRANSITIONS & ANIMATIONS
+     ========================================================================== */
+  --drp-transition-fast: 150ms;
+  --drp-easing-snappy: cubic-bezier(0.4, 0.0, 0.2, 1);
+
+  /* ==========================================================================
+     Z-INDEX LAYERS
+     ========================================================================== */
+  --drp-z-index-dropdown: 9500;
+  --drp-z-index-tooltip: 9999;
+
+  /* ==========================================================================
+     LAYOUT & DIMENSIONS
+     ========================================================================== */
+  --drp-input-padding-h: calc(1.2 * var(--drp-rem));  /* 12px */
+  --drp-grid-columns: 3;
+  --drp-grid-rows: 2;
+
+  /* ==========================================================================
+     OPACITY VALUES
+     ========================================================================== */
+  --drp-opacity-disabled: 0.6;
+  --drp-opacity-other-month: 0.5;
+  --drp-opacity-hover: 0.8;
+  --drp-opacity-dragging: 0.7;
+
+  /* ==========================================================================
+     INPUT FIELD SEMANTIC VARIABLES
+     ========================================================================== */
+  --drp-input-background: var(--base-input-background, var(--drp-dropdown-background));
+  --drp-input-color: var(--base-input-color, var(--drp-text-primary));
+  --drp-input-border-color: var(--base-input-border-color, var(--drp-border-color));
+  --drp-input-border-color-hover: var(--base-input-border-color-hover, var(--drp-accent-color));
+  --drp-input-border-color-focus: var(--base-input-border-color-focus, 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));
+
+  /* Input Focus State */
+  --drp-input-focus-shadow-color: rgba(59, 130, 246, 0.1);
+  --drp-input-focus-shadow-size: 3px;
+  --drp-input-icon-opacity: 0.6;
+
+  /* ==========================================================================
+     INPUT SIZE VARIANTS (BASE VALUES)
+     ==========================================================================
+     Five size variants for the input element (xs, sm, md, lg, xl) */
+
+  --drp-input-size-xs-font: var(--drp-font-size-xs);
+  --drp-input-size-xs-padding-v: var(--drp-spacing-xs);
+  --drp-input-size-xs-padding-h: calc(0.8 * var(--drp-rem));  /* 8px */
+  --drp-input-size-xs-height: calc(var(--base-input-size-xs-height, 3.1) * var(--drp-rem));  /* 31px */
+  --drp-input-size-xs-icon-size: 0.75em;
+
+  --drp-input-size-sm-font: calc(1.3 * var(--drp-rem));       /* 13px */
+  --drp-input-size-sm-padding-v: calc(0.5 * var(--drp-rem));  /* 5px */
+  --drp-input-size-sm-padding-h: var(--drp-spacing-sm);
+  --drp-input-size-sm-height: calc(var(--base-input-size-sm-height, 3.3) * var(--drp-rem));  /* 33px */
+  --drp-input-size-sm-icon-size: 0.875em;
+
+  --drp-input-size-md-font: calc(1.4 * var(--drp-rem));       /* 14px */
+  --drp-input-size-md-padding-v: var(--drp-spacing-sm);
+  --drp-input-size-md-padding-h: calc(1.2 * var(--drp-rem));  /* 12px */
+  --drp-input-size-md-height: calc(var(--base-input-size-md-height, 3.5) * var(--drp-rem));  /* 35px */
+  --drp-input-size-md-icon-size: 1em;
+
+  --drp-input-size-lg-font: calc(1.6 * var(--drp-rem));       /* 16px */
+  --drp-input-size-lg-padding-v: calc(1.0 * var(--drp-rem));  /* 10px */
+  --drp-input-size-lg-padding-h: calc(1.4 * var(--drp-rem));  /* 14px */
+  --drp-input-size-lg-height: calc(var(--base-input-size-lg-height, 3.8) * var(--drp-rem));  /* 38px */
+  --drp-input-size-lg-icon-size: 1.125em;
+
+  --drp-input-size-xl-font: calc(1.8 * var(--drp-rem));       /* 18px */
+  --drp-input-size-xl-padding-v: calc(1.2 * var(--drp-rem));  /* 12px */
+  --drp-input-size-xl-padding-h: calc(1.6 * var(--drp-rem));  /* 16px */
+  --drp-input-size-xl-height: calc(var(--base-input-size-xl-height, 4.1) * var(--drp-rem));  /* 41px */
+  --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);
+
+  /* Navigation Button Dimensions */
+  --drp-nav-size: calc(3.2 * var(--drp-rem));  /* 32px */
+
+  /* Rolling Selector */
+  --drp-rolling-bg: var(--drp-primary-bg);
+  --drp-rolling-border-color: var(--drp-border-color);
+  --drp-rolling-scrollbar-width: 6px;
+  --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-text-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 */
+  --drp-rolling-item-padding-v: var(--drp-spacing-xs);
+  --drp-rolling-item-padding-h: var(--drp-spacing-md);
+  --drp-rolling-item-font-size: var(--drp-font-size-sm);
+  --drp-rolling-item-font-weight-selected: var(--drp-font-weight-semibold);
+
+  /* ==========================================================================
+     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-text-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);
+
+  /* Day Cell Dimensions & Borders */
+  --drp-day-border-width: 2px;
+  --drp-day-border-color: transparent;
+  --drp-day-focused-outline-width: 2px;
+  --drp-day-focused-outline-offset: 2px;
+
+  /* Day Range Opacity Values */
+  --drp-day-in-range-bg-opacity: 0.15;
+  --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;
+
+  /* Day Disabled Pattern */
+  --drp-day-disabled-pattern-opacity: 0.1;
+
+  /* Day Dragging */
+  --drp-day-dragging-scale: 1.1;
+  --drp-day-drag-preview-border-style: dashed;
+  --drp-day-drag-invalid-bg: #ef4444;
+  --drp-day-drag-invalid-bg-opacity: 0.20;
+
+  /* Special Date Colors (examples) */
+  --drp-holiday-color: #ef4444;
+  --drp-holiday-bg-opacity: 0.10;
+  --drp-holiday-hover-bg-opacity: 0.20;
+  --drp-event-color: #10b981;
+  --drp-event-bg-opacity: 0.10;
+  --drp-event-hover-bg-opacity: 0.20;
+
+  /* ==========================================================================
+     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-font-size: var(--drp-font-size-2xs);
+  --drp-badge-padding-v: 1px;
+  --drp-badge-padding-h: 2px;
+  --drp-badge-border-radius: 2px;
+  --drp-badge-max-height: var(--drp-font-size-base);
+  --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-count-bg: #ef4444;
+  --drp-badge-count-color: #ffffff;
+  --drp-badge-text-bg: var(--drp-text-secondary);
+  --drp-badge-text-color: #ffffff;
+
+  /* ==========================================================================
+     UNIFIED NAV SEMANTIC VARIABLES (Multi-Month)
+     ========================================================================== */
+  --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);
+
+  /* ==========================================================================
+     TOOLTIP DIMENSIONS
+     ========================================================================== */
+  --drp-tooltip-line-height: 1.4;
+  --drp-tooltip-max-width: 200px;
+  --drp-tooltip-arrow-size: 8px;
+
+  /* ==========================================================================
+     CALENDAR DIMENSIONS
+     ========================================================================== */
+  --drp-month-min-width: 280px;
+  --drp-month-min-width-inline: 250px;
+  --drp-calendar-max-width: calc(100vw - 2rem);
+}

package/src/css/main.css

@@ -0,0 +1,29 @@
+/* ==============================================================================
+   DATE RANGE PICKER COMPONENT - MAIN ENTRY POINT
+   ==============================================================================
+
+   File structure:
+   ├── _variables.css          - CSS custom properties at :host level
+   ├── _base.css               - Base container, input field, calendar popup
+   ├── _header-navigation.css  - Header, month/year display, nav buttons, rolling selector
+   ├── _calendar-grid.css      - Weekdays, day cells, all day states
+   ├── _badges.css             - Badge system for events/markers
+   ├── _summary-actions.css    - Selection summary and action buttons
+   ├── _tooltips.css           - Floating UI tooltips
+   ├── _loading.css            - Loading overlay and spinner for async validation
+   ├── _modifiers.css          - Transitions, inline mode
+   └── main.css                - This file (imports all partials)
+
+   Import order matters - variables must be first, modifiers should be last
+
+   ============================================================================== */
+
+@import './_variables.css';
+@import './_base.css';
+@import './_header-navigation.css';
+@import './_calendar-grid.css';
+@import './_badges.css';
+@import './_summary-actions.css';
+@import './_tooltips.css';
+@import './_loading.css';
+@import './_modifiers.css';

package/src/scss/_badges.scss

@@ -1,70 +0,0 @@
-// ==============================================================================
-// DATE RANGE PICKER - BADGES
-// ==============================================================================
-// Badge system for displaying event markers, counts, and labels on calendar days
-
-@use 'variables' as *;
-
-// ==============================================================================
-// BADGE ROWS (GRID-BASED SYSTEM)
-// ==============================================================================
-
-.drp-date-picker__badge-row {
-  display: grid;
-  grid-template-columns: repeat(7, 1fr);
-  gap: var(--drp-spacing-xs);
-  max-height: var(--drp-badge-row-height);
-  min-height: var(--drp-badge-row-height);
-}
-
-.drp-date-picker__badge-cell {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: var(--drp-font-size-2xs);
-  padding: $drp-badge-padding-v $drp-badge-padding-h;
-  border-radius: $drp-badge-border-radius;
-  cursor: pointer;
-  height: 100%;
-  max-height: var(--drp-badge-row-height);
-
-  &:empty {
-    visibility: hidden;
-  }
-
-  &:hover:not(:empty) {
-    transform: scale(1.05);
-  }
-}
-
-// ==============================================================================
-// BADGE TYPE STYLES
-// ==============================================================================
-
-// Number Badge (e.g., day number, count)
-.drp-date-picker__badge-cell.badge-number {
-  background-color: var(--drp-badge-number-bg);
-  color: var(--drp-badge-number-color);
-  font-size: calc(1.12 * var(--drp-rem));   // 11.2px (was 0.7rem)
-  font-weight: 600;
-}
-
-// Count Badge (e.g., number of events)
-.drp-date-picker__badge-cell.badge-count {
-  background-color: var(--drp-badge-count-bg);
-  color: var(--drp-badge-count-color);
-  font-size: calc(1.12 * var(--drp-rem));   // 11.2px (was 0.7rem)
-  font-weight: 700;
-}
-
-// Text Badge (generic)
-// Note: Background colors for specific badge types (holiday, event, birthday, etc.)
-// 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: var(--drp-badge-text-bg);
-  color: var(--drp-badge-text-color);
-  font-size: calc(1.04 * var(--drp-rem));   // 10.4px (was 0.65rem)
-  font-weight: 700;
-  text-transform: uppercase;
-}