New in v1.4.0

The input-size attribute controls the input field dimensions independently from calendar sizing.

Available Sizes

• xs - 3.1rem / 31px (very compact)
• sm - 3.3rem / 33px (compact)
• md - 3.5rem / 35px (default)
• lg - 3.8rem / 38px (spacious)
• xl - 4.1rem / 41px (touch-friendly)

Use Cases

• Floating mode only - This attribute applies to the input field in floating/popup mode
• Coordinated sizing - Use same size for input and calendar for consistent UI
• Mixed sizing - Large touch-friendly input with compact popup calendar

CSS Variables

Each size has corresponding CSS variables:

• --drp-input-size-{size}-font
• --drp-input-size-{size}-padding-v
• --drp-input-size-{size}-padding-h
• --drp-input-size-{size}-height
• --drp-input-size-{size}-icon-size

Consistent UI

For consistent visual design, use the same size value across all four attributes.

Mixed Sizing Strategy

Sometimes you want different sizes for input and calendar:

• Large input + compact calendar - Touch-friendly input that opens a space-efficient popup
• Small input + large calendar - Compact form field with spacious date selection

Independence

Each system works independently - combine them any way you like!

• Font Size: font-size="xs|sm|md|lg|xl" - Text size only
• Spacing: spacing="xs|sm|md|lg|xl" - Gaps, padding, margins only
• Cell Size: cell-size="xs|sm|md|lg|xl" - Day cell dimensions only

Scale Values

• xs - 0.6× scale (60% of normal size)
• sm - 0.8× scale (80% of normal size)
• md - 1.0× scale (baseline, default)
• lg - 1.5× scale (150% of normal size)
• xl - 2.0× scale (200% of normal size)

When to Use Uniform Sizing

• xs - Dense dashboards, data tables, compact layouts
• sm - Mobile apps, modals, forms
• md - Default size, general use
• lg - Desktop applications, spacious layouts
• xl - Touch interfaces, accessibility, presentations

Balanced Proportions

Using the same size for all three systems creates balanced, proportional calendars.

Use Case

Extra Small (xs) - Perfect for dense dashboards with limited space

Grid Layout Requirements

visible-months-count must equal grid-rows × grid-columns

Example: 2 rows × 3 columns = 6 months

How CSS Variables Work

The component defines all variables with :host inside its Shadow DOM. You can override them from outside:

• Global - Target web-daterangepicker selector
• Scoped - Add a class and target web-daterangepicker.your-class
• Instance - Use inline styles (not recommended)

Benefits

• Scoped - Theme individual pickers differently
• Dynamic - Change themes at runtime with JavaScript
• Maintainable - No need to modify component source
• Performant - Browser-native CSS variable support

v1.3.0: Component Independence

The decoupled architecture means:

• Independent styling - Customize inputs without affecting calendar
• Component isolation - Change button colors without affecting day cells
• Flexible theming - Override base OR semantic variables
• Backwards compatible - All existing themes still work

Complete Documentation

See API.md - CSS Custom Properties for:

• Full list of all 90+ variables
• Default values for each variable
• Dark theme example
• Multiple theme switching