@keenmate/web-daterangepicker 1.0.0-rc01 → 1.0.0-rc08

package/src/scss/_header-navigation.scss

@@ -0,0 +1,164 @@
+// ==============================================================================
+// DATE RANGE PICKER - HEADER & NAVIGATION
+// ==============================================================================
+// Month/year header, navigation buttons, and rolling selector
+
+@use 'variables' as *;
+
+// ==============================================================================
+// CALENDAR HEADER
+// ==============================================================================
+
+.drp-date-picker__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--drp-spacing-md);
+  gap: var(--drp-spacing-sm);
+}
+
+// ==============================================================================
+// MONTH/YEAR DISPLAY (CLICKABLE TO OPEN ROLLING SELECTOR)
+// ==============================================================================
+
+.drp-date-picker__month-year {
+  flex: 1;
+  text-align: center;
+  font-weight: var(--drp-font-weight-semibold);
+  font-size: var(--drp-font-size-base);
+  color: var(--drp-text-primary);
+  padding: var(--drp-spacing-sm) var(--drp-spacing-md);
+  border-radius: var(--drp-border-radius);
+  cursor: pointer;
+  transition: background-color var(--drp-transition-fast) var(--drp-easing-snappy);
+
+  &:hover {
+    background-color: var(--drp-primary-bg);
+  }
+
+  &:active {
+    background-color: var(--drp-primary-bg-hover);
+  }
+}
+
+// ==============================================================================
+// NAVIGATION BUTTONS (PREVIOUS/NEXT MONTH)
+// ==============================================================================
+
+.drp-date-picker__nav {
+  width: $drp-nav-size;
+  height: $drp-nav-size;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: var(--drp-border-width-base) solid var(--drp-border-color);
+  border-radius: var(--drp-border-radius);
+  background: transparent;
+  cursor: pointer;
+  transition: all var(--drp-transition-fast) var(--drp-easing-snappy);
+  font-size: var(--drp-font-size-lg);
+  color: var(--drp-text-primary);
+
+  &:hover {
+    background-color: var(--drp-primary-bg);
+    border-color: var(--drp-accent-color);
+  }
+
+  &:active {
+    background-color: var(--drp-primary-bg-hover);
+  }
+
+  // Disabled state
+  &--disabled,
+  &[disabled] {
+    opacity: $drp-nav-opacity-disabled;
+    cursor: not-allowed;
+    pointer-events: none;
+
+    &:hover {
+      background-color: transparent;
+      border-color: var(--drp-border-color);
+    }
+  }
+
+  &--prev::before {
+    content: '‹';
+  }
+
+  &--next::before {
+    content: '›';
+  }
+}
+
+// ==============================================================================
+// ROLLING SELECTOR VIEW (MONTH/YEAR SELECTION)
+// ==============================================================================
+
+.drp-date-picker__rolling-selector {
+  display: none;
+
+  &.drp-date-picker__rolling-selector--visible {
+    display: flex;
+
+    // Hide calendar days when rolling selector is visible
+    ~ .drp-date-picker__weekdays,
+    ~ .drp-date-picker__days {
+      display: none;
+    }
+  }
+
+  gap: var(--drp-spacing-xs);
+  margin-bottom: var(--drp-spacing-md);
+  // Height is set dynamically via JavaScript to match calendar content
+}
+
+.drp-date-picker__rolling-list {
+  flex: 1;
+  height: 100%; // Fill parent height (set dynamically on parent)
+  overflow-y: auto;
+  border: var(--drp-border-width-base) solid var(--drp-border-color);
+  border-radius: var(--drp-border-radius);
+
+  // Smooth scrolling
+  scroll-behavior: smooth;
+
+  // Custom scrollbar
+  &::-webkit-scrollbar {
+    width: $drp-rolling-scrollbar-width;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: var(--drp-primary-bg);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: var(--drp-border-color);
+    border-radius: 3px;
+
+    &:hover {
+      background: var(--drp-accent-color);
+    }
+  }
+}
+
+.drp-date-picker__rolling-item {
+  padding: var(--drp-spacing-sm) var(--drp-spacing-md);
+  text-align: center;
+  cursor: pointer;
+  font-size: var(--drp-font-size-sm);
+  transition: background-color var(--drp-transition-fast) var(--drp-easing-snappy);
+
+  &:hover {
+    background-color: var(--drp-primary-bg);
+  }
+
+  &--selected {
+    background-color: var(--drp-accent-color);
+    color: var(--drp-accent-text-color);
+    font-weight: var(--drp-font-weight-semibold);
+
+    &:hover {
+      background-color: var(--drp-accent-color-hover);
+    }
+  }
+}

package/src/scss/_loading.scss

@@ -0,0 +1,39 @@
+/**
+ * Loading Overlay & Spinner Styles
+ *
+ * Used during async validation (e.g., when validateRangeCallback is processing).
+ */
+
+@use 'variables' as *;
+
+.drp-date-picker__loading-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(255, 255, 255, 0.8);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: $drp-z-index-dropdown;
+    border-radius: $drp-border-radius;
+}
+
+.drp-date-picker__loading-spinner {
+    width: 40px;
+    height: 40px;
+    border: 4px solid $drp-color-neutral-light;
+    border-top-color: $drp-color-accent;
+    border-radius: 50%;
+    animation: drp-spin 0.8s linear infinite;
+}
+
+@keyframes drp-spin {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}

package/src/scss/_modifiers.scss

@@ -0,0 +1,367 @@
+// ==============================================================================
+// DATE RANGE PICKER - MODIFIERS
+// ==============================================================================
+// Size variants, font scaling, spacing scaling, and responsive modifiers
+
+@use 'variables' as *;
+
+// ==============================================================================
+// FONT SIZE CLASSES
+// ==============================================================================
+// Control text sizing only, independent of spacing
+// Example: <div class="drp-font-lg"><date-range-picker ...></div>
+
+.drp-font-xs {
+  --drp-font-size-2xs: #{$font-size-2xs * $drp-size-xs-multiplier};
+  --drp-font-size-xs: #{$font-size-xs * $drp-size-xs-multiplier};
+  --drp-font-size-sm: #{$font-size-sm * $drp-size-xs-multiplier};
+  --drp-font-size-base: #{$font-size-base * $drp-size-xs-multiplier};
+  --drp-font-size-lg: #{$font-size-lg * $drp-size-xs-multiplier};
+  --drp-font-size-xl: #{$font-size-xl * $drp-size-xs-multiplier};
+  --drp-font-size-2xl: #{$font-size-2xl * $drp-size-xs-multiplier};
+}
+
+.drp-font-sm {
+  --drp-font-size-2xs: #{$font-size-2xs * $drp-size-sm-multiplier};
+  --drp-font-size-xs: #{$font-size-xs * $drp-size-sm-multiplier};
+  --drp-font-size-sm: #{$font-size-sm * $drp-size-sm-multiplier};
+  --drp-font-size-base: #{$font-size-base * $drp-size-sm-multiplier};
+  --drp-font-size-lg: #{$font-size-lg * $drp-size-sm-multiplier};
+  --drp-font-size-xl: #{$font-size-xl * $drp-size-sm-multiplier};
+  --drp-font-size-2xl: #{$font-size-2xl * $drp-size-sm-multiplier};
+}
+
+.drp-font-md {
+  // Uses default :host values
+}
+
+.drp-font-lg {
+  --drp-font-size-2xs: #{$font-size-2xs * $drp-size-lg-multiplier};
+  --drp-font-size-xs: #{$font-size-xs * $drp-size-lg-multiplier};
+  --drp-font-size-sm: #{$font-size-sm * $drp-size-lg-multiplier};
+  --drp-font-size-base: #{$font-size-base * $drp-size-lg-multiplier};
+  --drp-font-size-lg: #{$font-size-lg * $drp-size-lg-multiplier};
+  --drp-font-size-xl: #{$font-size-xl * $drp-size-lg-multiplier};
+  --drp-font-size-2xl: #{$font-size-2xl * $drp-size-lg-multiplier};
+}
+
+.drp-font-xl {
+  --drp-font-size-2xs: #{$font-size-2xs * $drp-size-xl-multiplier};
+  --drp-font-size-xs: #{$font-size-xs * $drp-size-xl-multiplier};
+  --drp-font-size-sm: #{$font-size-sm * $drp-size-xl-multiplier};
+  --drp-font-size-base: #{$font-size-base * $drp-size-xl-multiplier};
+  --drp-font-size-lg: #{$font-size-lg * $drp-size-xl-multiplier};
+  --drp-font-size-xl: #{$font-size-xl * $drp-size-xl-multiplier};
+  --drp-font-size-2xl: #{$font-size-2xl * $drp-size-xl-multiplier};
+}
+
+// ==============================================================================
+// SPACING/DENSITY CLASSES
+// ==============================================================================
+// Control gaps, padding, and calendar width only
+// Example: <div class="drp-spacing-sm"><date-range-picker ...></div>
+
+.drp-spacing-xs {
+  --drp-spacing-xs: #{$drp-spacing-xs * $drp-size-xs-multiplier};
+  --drp-spacing-sm: #{$drp-spacing-sm * $drp-size-xs-multiplier};
+  --drp-spacing-md: #{$drp-spacing-md * $drp-size-xs-multiplier};
+  --drp-spacing-lg: #{$drp-spacing-lg * $drp-size-xs-multiplier};
+  --drp-spacing-xl: #{$drp-spacing-xl * $drp-size-xs-multiplier};
+
+  .drp-date-picker__month {
+    min-width: #{$drp-month-min-width * $drp-size-xs-multiplier};
+  }
+}
+
+.drp-spacing-sm {
+  --drp-spacing-xs: #{$drp-spacing-xs * $drp-size-sm-multiplier};
+  --drp-spacing-sm: #{$drp-spacing-sm * $drp-size-sm-multiplier};
+  --drp-spacing-md: #{$drp-spacing-md * $drp-size-sm-multiplier};
+  --drp-spacing-lg: #{$drp-spacing-lg * $drp-size-sm-multiplier};
+  --drp-spacing-xl: #{$drp-spacing-xl * $drp-size-sm-multiplier};
+
+  .drp-date-picker__month {
+    min-width: #{$drp-month-min-width * $drp-size-sm-multiplier};
+  }
+}
+
+.drp-spacing-md {
+  // Uses default :host values
+}
+
+.drp-spacing-lg {
+  --drp-spacing-xs: #{$drp-spacing-xs * $drp-size-lg-multiplier};
+  --drp-spacing-sm: #{$drp-spacing-sm * $drp-size-lg-multiplier};
+  --drp-spacing-md: #{$drp-spacing-md * $drp-size-lg-multiplier};
+  --drp-spacing-lg: #{$drp-spacing-lg * $drp-size-lg-multiplier};
+  --drp-spacing-xl: #{$drp-spacing-xl * $drp-size-lg-multiplier};
+
+  .drp-date-picker__month {
+    min-width: #{$drp-month-min-width * $drp-size-lg-multiplier};
+  }
+}
+
+.drp-spacing-xl {
+  --drp-spacing-xs: #{$drp-spacing-xs * $drp-size-xl-multiplier};
+  --drp-spacing-sm: #{$drp-spacing-sm * $drp-size-xl-multiplier};
+  --drp-spacing-md: #{$drp-spacing-md * $drp-size-xl-multiplier};
+  --drp-spacing-lg: #{$drp-spacing-lg * $drp-size-xl-multiplier};
+  --drp-spacing-xl: #{$drp-spacing-xl * $drp-size-xl-multiplier};
+
+  .drp-date-picker__month {
+    min-width: #{$drp-month-min-width * $drp-size-xl-multiplier};
+  }
+}
+
+// ==============================================================================
+// RESPONSIVE SCALING
+// ==============================================================================
+// Scales font and spacing independently at breakpoints
+// Example: <div class="drp-font-lg drp-spacing-xl drp-responsive">
+
+.drp-responsive {
+  // Font XL: xl → lg @ 1200px → md @ 768px
+  &.drp-font-xl {
+    @media (max-width: 1200px) {
+      --drp-font-size-2xs: #{$font-size-2xs * $drp-size-lg-multiplier};
+      --drp-font-size-xs: #{$font-size-xs * $drp-size-lg-multiplier};
+      --drp-font-size-sm: #{$font-size-sm * $drp-size-lg-multiplier};
+      --drp-font-size-base: #{$font-size-base * $drp-size-lg-multiplier};
+      --drp-font-size-lg: #{$font-size-lg * $drp-size-lg-multiplier};
+      --drp-font-size-xl: #{$font-size-xl * $drp-size-lg-multiplier};
+      --drp-font-size-2xl: #{$font-size-2xl * $drp-size-lg-multiplier};
+    }
+    @media (max-width: 768px) {
+      --drp-font-size-2xs: #{$font-size-2xs};
+      --drp-font-size-xs: #{$font-size-xs};
+      --drp-font-size-sm: #{$font-size-sm};
+      --drp-font-size-base: #{$font-size-base};
+      --drp-font-size-lg: #{$font-size-lg};
+      --drp-font-size-xl: #{$font-size-xl};
+      --drp-font-size-2xl: #{$font-size-2xl};
+    }
+  }
+
+  // Font LG: lg → md @ 1200px → sm @ 768px
+  &.drp-font-lg {
+    @media (max-width: 1200px) {
+      --drp-font-size-2xs: #{$font-size-2xs};
+      --drp-font-size-xs: #{$font-size-xs};
+      --drp-font-size-sm: #{$font-size-sm};
+      --drp-font-size-base: #{$font-size-base};
+      --drp-font-size-lg: #{$font-size-lg};
+      --drp-font-size-xl: #{$font-size-xl};
+      --drp-font-size-2xl: #{$font-size-2xl};
+    }
+    @media (max-width: 768px) {
+      --drp-font-size-2xs: #{$font-size-2xs * $drp-size-sm-multiplier};
+      --drp-font-size-xs: #{$font-size-xs * $drp-size-sm-multiplier};
+      --drp-font-size-sm: #{$font-size-sm * $drp-size-sm-multiplier};
+      --drp-font-size-base: #{$font-size-base * $drp-size-sm-multiplier};
+      --drp-font-size-lg: #{$font-size-lg * $drp-size-sm-multiplier};
+      --drp-font-size-xl: #{$font-size-xl * $drp-size-sm-multiplier};
+      --drp-font-size-2xl: #{$font-size-2xl * $drp-size-sm-multiplier};
+    }
+  }
+
+  // Font MD: md → sm @ 768px
+  &.drp-font-md {
+    @media (max-width: 768px) {
+      --drp-font-size-2xs: #{$font-size-2xs * $drp-size-sm-multiplier};
+      --drp-font-size-xs: #{$font-size-xs * $drp-size-sm-multiplier};
+      --drp-font-size-sm: #{$font-size-sm * $drp-size-sm-multiplier};
+      --drp-font-size-base: #{$font-size-base * $drp-size-sm-multiplier};
+      --drp-font-size-lg: #{$font-size-lg * $drp-size-sm-multiplier};
+      --drp-font-size-xl: #{$font-size-xl * $drp-size-sm-multiplier};
+      --drp-font-size-2xl: #{$font-size-2xl * $drp-size-sm-multiplier};
+    }
+  }
+
+  // Font SM: sm → xs @ 768px
+  &.drp-font-sm {
+    @media (max-width: 768px) {
+      --drp-font-size-2xs: #{$font-size-2xs * $drp-size-xs-multiplier};
+      --drp-font-size-xs: #{$font-size-xs * $drp-size-xs-multiplier};
+      --drp-font-size-sm: #{$font-size-sm * $drp-size-xs-multiplier};
+      --drp-font-size-base: #{$font-size-base * $drp-size-xs-multiplier};
+      --drp-font-size-lg: #{$font-size-lg * $drp-size-xs-multiplier};
+      --drp-font-size-xl: #{$font-size-xl * $drp-size-xs-multiplier};
+      --drp-font-size-2xl: #{$font-size-2xl * $drp-size-xs-multiplier};
+    }
+  }
+
+  // Spacing XL: xl → lg @ 1200px → md @ 768px
+  &.drp-spacing-xl {
+    @media (max-width: 1200px) {
+      --drp-spacing-xs: #{$drp-spacing-xs * $drp-size-lg-multiplier};
+      --drp-spacing-sm: #{$drp-spacing-sm * $drp-size-lg-multiplier};
+      --drp-spacing-md: #{$drp-spacing-md * $drp-size-lg-multiplier};
+      --drp-spacing-lg: #{$drp-spacing-lg * $drp-size-lg-multiplier};
+      --drp-spacing-xl: #{$drp-spacing-xl * $drp-size-lg-multiplier};
+      .drp-date-picker__month {
+        min-width: #{$drp-month-min-width * $drp-size-lg-multiplier};
+      }
+    }
+    @media (max-width: 768px) {
+      --drp-spacing-xs: #{$drp-spacing-xs};
+      --drp-spacing-sm: #{$drp-spacing-sm};
+      --drp-spacing-md: #{$drp-spacing-md};
+      --drp-spacing-lg: #{$drp-spacing-lg};
+      --drp-spacing-xl: #{$drp-spacing-xl};
+      .drp-date-picker__month {
+        min-width: #{$drp-month-min-width};
+      }
+    }
+  }
+
+  // Spacing LG: lg → md @ 1200px → sm @ 768px
+  &.drp-spacing-lg {
+    @media (max-width: 1200px) {
+      --drp-spacing-xs: #{$drp-spacing-xs};
+      --drp-spacing-sm: #{$drp-spacing-sm};
+      --drp-spacing-md: #{$drp-spacing-md};
+      --drp-spacing-lg: #{$drp-spacing-lg};
+      --drp-spacing-xl: #{$drp-spacing-xl};
+      .drp-date-picker__month {
+        min-width: #{$drp-month-min-width};
+      }
+    }
+    @media (max-width: 768px) {
+      --drp-spacing-xs: #{$drp-spacing-xs * $drp-size-sm-multiplier};
+      --drp-spacing-sm: #{$drp-spacing-sm * $drp-size-sm-multiplier};
+      --drp-spacing-md: #{$drp-spacing-md * $drp-size-sm-multiplier};
+      --drp-spacing-lg: #{$drp-spacing-lg * $drp-size-sm-multiplier};
+      --drp-spacing-xl: #{$drp-spacing-xl * $drp-size-sm-multiplier};
+      .drp-date-picker__month {
+        min-width: #{$drp-month-min-width * $drp-size-sm-multiplier};
+      }
+    }
+  }
+
+  // Spacing MD: md → sm @ 768px
+  &.drp-spacing-md {
+    @media (max-width: 768px) {
+      --drp-spacing-xs: #{$drp-spacing-xs * $drp-size-sm-multiplier};
+      --drp-spacing-sm: #{$drp-spacing-sm * $drp-size-sm-multiplier};
+      --drp-spacing-md: #{$drp-spacing-md * $drp-size-sm-multiplier};
+      --drp-spacing-lg: #{$drp-spacing-lg * $drp-size-sm-multiplier};
+      --drp-spacing-xl: #{$drp-spacing-xl * $drp-size-sm-multiplier};
+      .drp-date-picker__month {
+        min-width: #{$drp-month-min-width * $drp-size-sm-multiplier};
+      }
+    }
+  }
+
+  // Spacing SM: sm → xs @ 768px
+  &.drp-spacing-sm {
+    @media (max-width: 768px) {
+      --drp-spacing-xs: #{$drp-spacing-xs * $drp-size-xs-multiplier};
+      --drp-spacing-sm: #{$drp-spacing-sm * $drp-size-xs-multiplier};
+      --drp-spacing-md: #{$drp-spacing-md * $drp-size-xs-multiplier};
+      --drp-spacing-lg: #{$drp-spacing-lg * $drp-size-xs-multiplier};
+      --drp-spacing-xl: #{$drp-spacing-xl * $drp-size-xs-multiplier};
+      .drp-date-picker__month {
+        min-width: #{$drp-month-min-width * $drp-size-xs-multiplier};
+      }
+    }
+  }
+}
+
+// ==============================================================================
+// SIZE VARIANT MODIFIERS (LEGACY - FOR BACKWARD COMPATIBILITY)
+// ==============================================================================
+// These provide complete size presets with both font and spacing adjustments
+
+.drp-date-picker--xs {
+  padding: var(--drp-spacing-sm);
+  min-width: 240px;
+
+  .drp-date-picker__month-year {
+    font-size: var(--drp-font-size-xs);
+    padding: var(--drp-spacing-xs) var(--drp-spacing-sm);
+  }
+
+  .drp-date-picker__nav {
+    width: 1.5rem;
+    height: 1.5rem;
+    font-size: var(--drp-font-size-sm);
+  }
+
+  .drp-date-picker__weekday {
+    font-size: var(--drp-font-size-2xs);
+  }
+
+  .drp-date-picker__day {
+    font-size: var(--drp-font-size-xs);
+  }
+}
+
+.drp-date-picker--sm {
+  padding: var(--drp-spacing-sm);
+  min-width: 260px;
+
+  .drp-date-picker__month-year {
+    font-size: var(--drp-font-size-sm);
+    padding: var(--drp-spacing-xs) var(--drp-spacing-sm);
+  }
+
+  .drp-date-picker__nav {
+    width: 1.75rem;
+    height: 1.75rem;
+    font-size: var(--drp-font-size-base);
+  }
+
+  .drp-date-picker__day {
+    font-size: var(--drp-font-size-xs);
+  }
+}
+
+.drp-date-picker--lg {
+  padding: var(--drp-spacing-lg);
+  min-width: 320px;
+
+  .drp-date-picker__month-year {
+    font-size: var(--drp-font-size-lg);
+    padding: var(--drp-spacing-md) var(--drp-spacing-lg);
+  }
+
+  .drp-date-picker__nav {
+    width: 2.5rem;
+    height: 2.5rem;
+    font-size: var(--drp-font-size-xl);
+  }
+
+  .drp-date-picker__day {
+    font-size: var(--drp-font-size-base);
+  }
+}
+
+.drp-date-picker--xl {
+  padding: var(--drp-spacing-xl);
+  min-width: 360px;
+
+  .drp-date-picker__month-year {
+    font-size: var(--drp-font-size-xl);
+    padding: var(--drp-spacing-lg) var(--drp-spacing-xl);
+  }
+
+  .drp-date-picker__nav {
+    width: 3rem;
+    height: 3rem;
+    font-size: var(--drp-font-size-2xl);
+  }
+
+  .drp-date-picker__day {
+    font-size: var(--drp-font-size-lg);
+  }
+}
+
+// ==============================================================================
+// INLINE MODE MODIFIER
+// ==============================================================================
+
+.drp-date-picker--inline {
+  position: static;
+  display: block;
+  box-shadow: none;
+}

package/src/scss/_summary-actions.scss

@@ -0,0 +1,87 @@
+// ==============================================================================
+// DATE RANGE PICKER - SUMMARY & ACTIONS
+// ==============================================================================
+// Selection summary (days/nights count) and action buttons (Today, Clear, Apply)
+
+@use 'variables' as *;
+
+// ==============================================================================
+// SELECTION SUMMARY (DAYS/NIGHTS COUNT)
+// ==============================================================================
+
+.drp-date-picker__summary {
+  text-align: center;
+  padding: var(--drp-spacing-md);
+  border-top: var(--drp-border-width-base) solid var(--drp-border-color);
+  font-size: var(--drp-font-size-sm);
+  color: var(--drp-text-secondary);
+
+  &--visible {
+    display: block;
+  }
+
+  &--hidden {
+    display: none;
+  }
+}
+
+.drp-date-picker__summary-count {
+  font-weight: var(--drp-font-weight-semibold);
+  color: var(--drp-accent-color);
+  font-size: var(--drp-font-size-base);
+}
+
+// ==============================================================================
+// ACTION BUTTONS
+// ==============================================================================
+
+.drp-date-picker__actions {
+  display: flex;
+  gap: var(--drp-spacing-sm);
+  justify-content: space-between;
+  padding-top: var(--drp-spacing-sm);
+  border-top: var(--drp-border-width-base) solid var(--drp-border-color);
+}
+
+.drp-date-picker__button {
+  flex: 1;
+  padding: var(--drp-spacing-sm) var(--drp-spacing-md);
+  border: var(--drp-border-width-base) solid var(--drp-border-color);
+  border-radius: var(--drp-border-radius);
+  background: transparent;
+  cursor: pointer;
+  font-size: var(--drp-font-size-sm);
+  font-weight: var(--drp-font-weight-medium);
+  transition: all var(--drp-transition-fast) var(--drp-easing-snappy);
+
+  &:hover {
+    background-color: var(--drp-primary-bg);
+    border-color: var(--drp-accent-color);
+  }
+
+  // Today Button
+  &--today {
+    color: var(--drp-accent-color);
+  }
+
+  // Clear Button
+  &--clear {
+    color: var(--drp-text-secondary);
+  }
+
+  // Apply Button (primary action)
+  &--apply {
+    background-color: var(--drp-accent-color);
+    color: var(--drp-button-text-color);
+    border-color: var(--drp-accent-color);
+
+    &:hover {
+      background-color: var(--drp-accent-color-hover);
+    }
+  }
+
+  // Cancel Button
+  &--cancel {
+    color: var(--drp-text-secondary);
+  }
+}

package/src/scss/_tooltips.scss

@@ -0,0 +1,39 @@
+// ==============================================================================
+// DATE RANGE PICKER - TOOLTIPS
+// ==============================================================================
+// Floating UI tooltips for badge hover information
+
+@use 'variables' as *;
+
+// ==============================================================================
+// FLOATING UI TOOLTIPS
+// ==============================================================================
+
+.drp-date-picker__tooltip {
+  position: absolute;
+  z-index: $drp-z-index-tooltip;
+  background-color: var(--drp-text-primary);
+  color: $drp-tooltip-color;
+  padding: var(--drp-spacing-xs) var(--drp-spacing-sm);
+  border-radius: var(--drp-border-radius);
+  font-size: var(--drp-font-size-xs);
+  line-height: $drp-tooltip-line-height;
+  max-width: $drp-tooltip-max-width;
+  word-wrap: break-word;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity var(--drp-transition-fast) var(--drp-easing-snappy);
+
+  &--visible {
+    opacity: 1;
+  }
+
+  // Tooltip arrow
+  &-arrow {
+    position: absolute;
+    background-color: var(--drp-text-primary);
+    width: $drp-tooltip-arrow-size;
+    height: $drp-tooltip-arrow-size;
+    transform: rotate(45deg);
+  }
+}