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

package/dist/style.css

@@ -1 +1 @@
-@charset "UTF-8";:root{--drp-card-bg: #ffffff;--drp-border-color: #e5e7eb;--drp-primary-bg: #f3f4f6;--drp-primary-bg-hover: #e5e7eb;--drp-accent-color: #3b82f6;--drp-accent-color-hover: #2563eb;--drp-text-primary: #111827;--drp-text-secondary: #6b7280;--drp-spacing-xs: .25rem;--drp-spacing-sm: .5rem;--drp-spacing-md: 1rem;--drp-spacing-lg: 1.5rem;--drp-spacing-xl: 2rem;--drp-font-size-2xs: .625rem;--drp-font-size-xs: .75rem;--drp-font-size-sm: .875rem;--drp-font-size-base: 1rem;--drp-font-size-lg: 1.125rem;--drp-font-size-xl: 1.25rem;--drp-font-size-2xl: 1.5rem;--drp-font-weight-medium: 500;--drp-font-weight-semibold: 600;--drp-border-width-base: 1px;--drp-border-radius: .375rem;--drp-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--drp-transition-fast: .15s;--drp-easing-snappy: cubic-bezier(.4, 0, .2, 1);--drp-input-padding-h: .75rem}.pa-date-picker-input{position:relative;cursor:pointer}.pa-date-picker-input:after{content:"📅";position:absolute;right:var(--drp-input-padding-h);top:50%;transform:translateY(-50%);pointer-events:none;opacity:.6}.pa-date-picker{position:absolute;z-index:9500;background:var(--drp-card-bg);border:var(--drp-border-width-base) solid var(--drp-border-color);border-radius:var(--drp-border-radius);box-shadow:var(--drp-shadow-xl);padding:var(--drp-spacing-md);min-width:280px;-webkit-user-select:none;user-select:none}.pa-date-picker:not(.pa-date-picker--visible){display:none}.pa-date-picker__months{display:flex;gap:var(--drp-spacing-lg)}.pa-date-picker__month{flex:1;min-width:280px}.pa-date-picker__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--drp-spacing-md);gap:var(--drp-spacing-sm)}.pa-date-picker__month-year{flex:1;text-align:center;font-weight:var(--drp-font-weight-semibold);font-size:var(--drp-font-size-base);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)}.pa-date-picker__month-year:hover{background-color:var(--drp-primary-bg)}.pa-date-picker__month-year:active{background-color:var(--drp-primary-bg-hover)}.pa-date-picker__nav{width:2rem;height:2rem;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)}.pa-date-picker__nav:hover{background-color:var(--drp-primary-bg);border-color:var(--drp-accent-color)}.pa-date-picker__nav:active{background-color:var(--drp-primary-bg-hover)}.pa-date-picker__nav--prev:before{content:"‹"}.pa-date-picker__nav--next:before{content:"›"}.pa-date-picker__rolling-selector{display:none}.pa-date-picker__rolling-selector.pa-date-picker__rolling-selector--visible{display:flex}.pa-date-picker__rolling-selector.pa-date-picker__rolling-selector--visible~.pa-date-picker__weekdays,.pa-date-picker__rolling-selector.pa-date-picker__rolling-selector--visible~.pa-date-picker__days{display:none}.pa-date-picker__rolling-selector{gap:var(--drp-spacing-md);margin-bottom:var(--drp-spacing-md)}.pa-date-picker__rolling-list{flex:1;height:100%;overflow-y:auto;border:var(--drp-border-width-base) solid var(--drp-border-color);border-radius:var(--drp-border-radius);scroll-behavior:smooth}.pa-date-picker__rolling-list::-webkit-scrollbar{width:6px}.pa-date-picker__rolling-list::-webkit-scrollbar-track{background:var(--drp-primary-bg)}.pa-date-picker__rolling-list::-webkit-scrollbar-thumb{background:var(--drp-border-color);border-radius:3px}.pa-date-picker__rolling-list::-webkit-scrollbar-thumb:hover{background:var(--drp-accent-color)}.pa-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)}.pa-date-picker__rolling-item:hover{background-color:var(--drp-primary-bg)}.pa-date-picker__rolling-item--selected{background-color:var(--drp-accent-color);color:#fff;font-weight:var(--drp-font-weight-semibold)}.pa-date-picker__rolling-item--selected:hover{background-color:var(--drp-accent-color-hover)}.pa-date-picker__weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--drp-spacing-xs);margin-bottom:var(--drp-spacing-sm)}.pa-date-picker__weekday{text-align:center;font-size:var(--drp-font-size-xs);font-weight:var(--drp-font-weight-semibold);color:var(--drp-text-secondary);padding:var(--drp-spacing-xs);text-transform:uppercase}.pa-date-picker__days{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--drp-spacing-xs);margin-bottom:var(--drp-spacing-md)}.pa-date-picker__day{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:var(--drp-font-size-sm);border-radius:var(--drp-border-radius);cursor:pointer;transition:all var(--drp-transition-fast) var(--drp-easing-snappy);border:2px solid transparent}.pa-date-picker__day:hover:not(.pa-date-picker__day--disabled):not(.pa-date-picker__day--other-month){background-color:var(--drp-primary-bg);border-color:var(--drp-accent-color)}.pa-date-picker__day--today{border-color:var(--drp-accent-color);font-weight:var(--drp-font-weight-semibold)}.pa-date-picker__day--selected{background-color:var(--drp-accent-color);color:#fff;font-weight:var(--drp-font-weight-semibold)}.pa-date-picker__day--selected:hover{background-color:var(--drp-accent-color-hover)}.pa-date-picker__day--focused{outline:2px solid var(--drp-accent-color);outline-offset:2px}.pa-date-picker__day--disabled{color:var(--drp-text-secondary);opacity:.4;cursor:not-allowed}.pa-date-picker__day--disabled:hover{background-color:transparent;border-color:transparent}.pa-date-picker__day--other-month{color:var(--drp-text-secondary);opacity:.5}.pa-date-picker__day--other-month.pa-date-picker__day--range-start,.pa-date-picker__day--other-month.pa-date-picker__day--range-end,.pa-date-picker__day--other-month.pa-date-picker__day--in-range,.pa-date-picker__day--other-month.pa-date-picker__day--drag-preview{opacity:1}.pa-date-picker__day--range-start,.pa-date-picker__day--range-end{background-color:var(--drp-accent-color);color:#fff;font-weight:var(--drp-font-weight-semibold);cursor:grab;-webkit-user-select:none;user-select:none}.pa-date-picker__day--range-start:active,.pa-date-picker__day--range-end:active{cursor:grabbing}.pa-date-picker__day--in-range{background-color:color-mix(in srgb,var(--drp-accent-color) 15%,transparent)}.pa-date-picker__day--in-range:hover{background-color:color-mix(in srgb,var(--drp-accent-color) 25%,transparent)}.pa-date-picker__day--dragging{cursor:grabbing!important;opacity:.7;transform:scale(1.1);transition:transform var(--drp-transition-fast) var(--drp-easing-snappy)}.pa-date-picker__day--drag-preview{background-color:color-mix(in srgb,var(--drp-accent-color) 30%,transparent);border:2px dashed var(--drp-accent-color)}.pa-date-picker__day--drag-preview.pa-date-picker__day--range-start,.pa-date-picker__day--drag-preview.pa-date-picker__day--range-end{background-color:color-mix(in srgb,var(--drp-accent-color) 60%,transparent);color:#fff}.pa-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)}.pa-date-picker__summary--visible{display:block}.pa-date-picker__summary--hidden{display:none}.pa-date-picker__summary-count{font-weight:var(--drp-font-weight-semibold);color:var(--drp-accent-color);font-size:var(--drp-font-size-base)}.pa-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)}.pa-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)}.pa-date-picker__button:hover{background-color:var(--drp-primary-bg);border-color:var(--drp-accent-color)}.pa-date-picker__button--today{color:var(--drp-accent-color)}.pa-date-picker__button--clear{color:var(--drp-text-secondary)}.pa-date-picker__button--apply{background-color:var(--drp-accent-color);color:#fff;border-color:var(--drp-accent-color)}.pa-date-picker__button--apply:hover{background-color:var(--drp-accent-color-hover)}.pa-date-picker__button--cancel{color:var(--drp-text-secondary)}.pa-date-picker--xs{padding:var(--drp-spacing-sm);min-width:240px}.pa-date-picker--xs .pa-date-picker__month-year{font-size:var(--drp-font-size-xs);padding:var(--drp-spacing-xs) var(--drp-spacing-sm)}.pa-date-picker--xs .pa-date-picker__nav{width:1.5rem;height:1.5rem;font-size:var(--drp-font-size-sm)}.pa-date-picker--xs .pa-date-picker__weekday{font-size:var(--drp-font-size-2xs)}.pa-date-picker--xs .pa-date-picker__day{font-size:var(--drp-font-size-xs)}.pa-date-picker--sm{padding:var(--drp-spacing-sm);min-width:260px}.pa-date-picker--sm .pa-date-picker__month-year{font-size:var(--drp-font-size-sm);padding:var(--drp-spacing-xs) var(--drp-spacing-sm)}.pa-date-picker--sm .pa-date-picker__nav{width:1.75rem;height:1.75rem;font-size:var(--drp-font-size-base)}.pa-date-picker--sm .pa-date-picker__day{font-size:var(--drp-font-size-xs)}.pa-date-picker--lg{padding:var(--drp-spacing-lg);min-width:320px}.pa-date-picker--lg .pa-date-picker__month-year{font-size:var(--drp-font-size-lg);padding:var(--drp-spacing-md) var(--drp-spacing-lg)}.pa-date-picker--lg .pa-date-picker__nav{width:2.5rem;height:2.5rem;font-size:var(--drp-font-size-xl)}.pa-date-picker--lg .pa-date-picker__day{font-size:var(--drp-font-size-base)}.pa-date-picker--xl{padding:var(--drp-spacing-xl);min-width:360px}.pa-date-picker--xl .pa-date-picker__month-year{font-size:var(--drp-font-size-xl);padding:var(--drp-spacing-lg) var(--drp-spacing-xl)}.pa-date-picker--xl .pa-date-picker__nav{width:3rem;height:3rem;font-size:var(--drp-font-size-2xl)}.pa-date-picker--xl .pa-date-picker__day{font-size:var(--drp-font-size-lg)}.pa-date-picker--inline{position:static;display:block;box-shadow:none}
+@charset "UTF-8";:host{--drp-card-bg: #ffffff;--drp-border-color: #e5e7eb;--drp-primary-bg: #f3f4f6;--drp-primary-bg-hover: #e5e7eb;--drp-accent-color: #3b82f6;--drp-accent-color-hover: #2563eb;--drp-text-primary: #111827;--drp-text-secondary: #6b7280;--drp-accent-text-color: #ffffff;--drp-button-text-color: #ffffff;--drp-spacing-xs: .25rem;--drp-spacing-sm: .5rem;--drp-spacing-md: 1rem;--drp-spacing-lg: 1.5rem;--drp-spacing-xl: 2rem;--drp-font-size-2xs: .625rem;--drp-font-size-xs: .75rem;--drp-font-size-sm: .875rem;--drp-font-size-base: 1rem;--drp-font-size-lg: 1.125rem;--drp-font-size-xl: 1.25rem;--drp-font-size-2xl: 1.5rem;--drp-font-weight-medium: 500;--drp-font-weight-semibold: 600;--drp-border-width-base: 1px;--drp-border-radius: .375rem;--drp-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);--drp-transition-fast: .15s;--drp-easing-snappy: cubic-bezier(.4, 0, .2, 1);--drp-input-padding-h: .75rem;--drp-grid-columns: 3;--drp-grid-rows: 2}.drp-date-picker-input{position:relative;cursor:pointer}.drp-date-picker-input:after{content:"📅";position:absolute;right:var(--drp-input-padding-h);top:50%;transform:translateY(-50%);pointer-events:none;opacity:.6}.drp-date-picker{position:absolute;z-index:9500;background:var(--drp-card-bg);border:var(--drp-border-width-base) solid var(--drp-border-color);border-radius:var(--drp-border-radius);box-shadow:var(--drp-shadow-xl);padding:var(--drp-spacing-md);min-width:280px;max-width:calc(100vw - 2rem);box-sizing:border-box;-webkit-user-select:none;user-select:none}.drp-date-picker:not(.drp-date-picker--visible){display:none}.drp-date-picker--inline{position:relative!important;display:block!important;z-index:auto;min-width:0;max-width:100%;width:fit-content;box-sizing:border-box}.drp-date-picker__months{display:flex;gap:var(--drp-spacing-lg)}.drp-date-picker--inline .drp-date-picker__months{flex-wrap:wrap}.drp-date-picker__months--grid{display:grid;grid-template-columns:repeat(var(--drp-grid-columns, 3),minmax(0,1fr));grid-template-rows:repeat(var(--drp-grid-rows, 2),auto);gap:var(--drp-spacing-lg);width:100%}@media (max-width: 1200px){.drp-date-picker__months--grid{grid-template-columns:repeat(min(var(--drp-grid-columns, 3),3),minmax(0,1fr))}}@media (max-width: 768px){.drp-date-picker__months--grid{grid-template-columns:repeat(min(var(--drp-grid-columns, 3),2),minmax(0,1fr))}}@media (max-width: 480px){.drp-date-picker__months--grid{grid-template-columns:minmax(0,1fr)}}.drp-date-picker__month{flex:1;min-width:280px}.drp-date-picker--inline .drp-date-picker__month{min-width:250px}.drp-date-picker__months--grid .drp-date-picker__month{min-width:0;width:100%}.drp-date-picker__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--drp-spacing-md);gap:var(--drp-spacing-sm)}.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)}.drp-date-picker__month-year:hover{background-color:var(--drp-primary-bg)}.drp-date-picker__month-year:active{background-color:var(--drp-primary-bg-hover)}.drp-date-picker__nav{width:2rem;height:2rem;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)}.drp-date-picker__nav:hover{background-color:var(--drp-primary-bg);border-color:var(--drp-accent-color)}.drp-date-picker__nav:active{background-color:var(--drp-primary-bg-hover)}.drp-date-picker__nav--disabled,.drp-date-picker__nav[disabled]{opacity:.6;cursor:not-allowed;pointer-events:none}.drp-date-picker__nav--disabled:hover,.drp-date-picker__nav[disabled]:hover{background-color:transparent;border-color:var(--drp-border-color)}.drp-date-picker__nav--prev:before{content:"‹"}.drp-date-picker__nav--next:before{content:"›"}.drp-date-picker__rolling-selector{display:none}.drp-date-picker__rolling-selector.drp-date-picker__rolling-selector--visible{display:flex}.drp-date-picker__rolling-selector.drp-date-picker__rolling-selector--visible~.drp-date-picker__weekdays,.drp-date-picker__rolling-selector.drp-date-picker__rolling-selector--visible~.drp-date-picker__days{display:none}.drp-date-picker__rolling-selector{gap:var(--drp-spacing-md);margin-bottom:var(--drp-spacing-md)}.drp-date-picker__rolling-list{flex:1;height:100%;overflow-y:auto;border:var(--drp-border-width-base) solid var(--drp-border-color);border-radius:var(--drp-border-radius);scroll-behavior:smooth}.drp-date-picker__rolling-list::-webkit-scrollbar{width:6px}.drp-date-picker__rolling-list::-webkit-scrollbar-track{background:var(--drp-primary-bg)}.drp-date-picker__rolling-list::-webkit-scrollbar-thumb{background:var(--drp-border-color);border-radius:3px}.drp-date-picker__rolling-list::-webkit-scrollbar-thumb: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)}.drp-date-picker__rolling-item:hover{background-color:var(--drp-primary-bg)}.drp-date-picker__rolling-item--selected{background-color:var(--drp-accent-color);color:var(--drp-accent-text-color);font-weight:var(--drp-font-weight-semibold)}.drp-date-picker__rolling-item--selected:hover{background-color:var(--drp-accent-color-hover)}.drp-date-picker__weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--drp-spacing-xs);margin-bottom:var(--drp-spacing-sm)}.drp-date-picker__weekday{text-align:center;font-size:var(--drp-font-size-xs);font-weight:var(--drp-font-weight-semibold);color:var(--drp-text-secondary);padding:var(--drp-spacing-xs);text-transform:uppercase}.drp-date-picker__days{display:flex;flex-direction:column;gap:var(--drp-spacing-xs);margin-bottom:var(--drp-spacing-md)}.drp-date-picker__date-row{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--drp-spacing-xs)}.drp-date-picker__day{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:var(--drp-font-size-sm);color:var(--drp-text-primary);border-radius:var(--drp-border-radius);cursor:pointer;transition:all var(--drp-transition-fast) var(--drp-easing-snappy);border:2px solid transparent;position:relative}.drp-date-picker__day:hover:not(.drp-date-picker__day--disabled):not(.drp-date-picker__day--other-month){background-color:var(--drp-primary-bg);border-color:var(--drp-accent-color)}.drp-date-picker__day--today{border-color:var(--drp-accent-color);font-weight:var(--drp-font-weight-semibold)}.drp-date-picker__day--selected{background-color:var(--drp-accent-color);color:var(--drp-accent-text-color);font-weight:var(--drp-font-weight-semibold)}.drp-date-picker__day--selected:hover{background-color:var(--drp-accent-color-hover)}.drp-date-picker__day--focused{outline:2px solid var(--drp-accent-color);outline-offset:2px}.drp-date-picker__day--disabled{color:var(--drp-text-secondary);opacity:.6;cursor:not-allowed;position:relative}.drp-date-picker__day--disabled:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-image:repeating-linear-gradient(45deg,rgba(0,0,0,.1) 0px,rgba(0,0,0,.1) 1px,transparent 1px,transparent 6px);border-radius:var(--drp-border-radius);pointer-events:none}.drp-date-picker__day--disabled:hover{background-color:transparent;border-color:transparent}.drp-date-picker__day--other-month{color:var(--drp-text-secondary);opacity:.5}.drp-date-picker__day--other-month.drp-date-picker__day--range-start,.drp-date-picker__day--other-month.drp-date-picker__day--range-end,.drp-date-picker__day--other-month.drp-date-picker__day--in-range,.drp-date-picker__day--other-month.drp-date-picker__day--drag-preview{opacity:1}.drp-date-picker__day--range-start,.drp-date-picker__day--range-end{background-color:var(--drp-accent-color);color:var(--drp-accent-text-color);font-weight:var(--drp-font-weight-semibold);cursor:grab;-webkit-user-select:none;user-select:none}.drp-date-picker__day--range-start:active,.drp-date-picker__day--range-end:active{cursor:grabbing}.drp-date-picker__day--in-range{background-color:color-mix(in srgb,var(--drp-accent-color) 15%,transparent)}.drp-date-picker__day--in-range:hover{background-color:color-mix(in srgb,var(--drp-accent-color) 25%,transparent)}.drp-date-picker__day--dragging{cursor:grabbing!important;opacity:.7;transform:scale(1.1);transition:transform var(--drp-transition-fast) var(--drp-easing-snappy)}.drp-date-picker__day--drag-preview{background-color:color-mix(in srgb,var(--drp-accent-color) 30%,transparent);border:2px dashed var(--drp-accent-color)}.drp-date-picker__day--drag-preview.drp-date-picker__day--range-start,.drp-date-picker__day--drag-preview.drp-date-picker__day--range-end{background-color:color-mix(in srgb,var(--drp-accent-color) 60%,transparent);color:var(--drp-accent-text-color)}.drp-date-picker__day--drag-invalid{background-color:color-mix(in srgb,#ef4444 20%,transparent)!important;border-color:#ef4444!important;border-style:dashed!important}.drp-date-picker__day.holiday{background-color:color-mix(in srgb,#ef4444 10%,transparent)}.drp-date-picker__day.holiday:hover:not(.drp-date-picker__day--disabled){background-color:color-mix(in srgb,#ef4444 20%,transparent)}.drp-date-picker__day.event{background-color:color-mix(in srgb,#10b981 10%,transparent)}.drp-date-picker__day.event:hover:not(.drp-date-picker__day--disabled){background-color:color-mix(in srgb,#10b981 20%,transparent)}.drp-date-picker__badge-row{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--drp-spacing-xs);margin-bottom:var(--drp-spacing-xs);max-height:1rem;min-height:1rem}.drp-date-picker__badge-cell{display:flex;align-items:center;justify-content:center;font-size:var(--drp-font-size-2xs);padding:1px 2px;border-radius:2px;transition:all var(--drp-transition-fast) var(--drp-easing-snappy);cursor:pointer;height:100%;max-height:1rem}.drp-date-picker__badge-cell:empty{visibility:hidden}.drp-date-picker__badge-cell:hover:not(:empty){transform:scale(1.05)}.drp-date-picker__badge-cell.badge-number{background-color:#10b981;color:#fff;font-size:.7rem;font-weight:600}.drp-date-picker__badge-cell.badge-count{background-color:#ef4444;color:#fff;font-size:.7rem;font-weight:700}.drp-date-picker__badge-cell.badge-text{background-color:#6b7280;color:#fff;font-size:.65rem;font-weight:700;text-transform:uppercase}.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)}.drp-date-picker__summary--visible{display:block}.drp-date-picker__summary--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)}.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)}.drp-date-picker__button:hover{background-color:var(--drp-primary-bg);border-color:var(--drp-accent-color)}.drp-date-picker__button--today{color:var(--drp-accent-color)}.drp-date-picker__button--clear{color:var(--drp-text-secondary)}.drp-date-picker__button--apply{background-color:var(--drp-accent-color);color:var(--drp-button-text-color);border-color:var(--drp-accent-color)}.drp-date-picker__button--apply:hover{background-color:var(--drp-accent-color-hover)}.drp-date-picker__button--cancel{color:var(--drp-text-secondary)}.drp-date-picker__tooltip{position:absolute;z-index:9999;background-color:var(--drp-text-primary);color:#fff;padding:var(--drp-spacing-xs) var(--drp-spacing-sm);border-radius:var(--drp-border-radius);font-size:var(--drp-font-size-xs);line-height:1.4;max-width:200px;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}.drp-date-picker__tooltip-arrow{position:absolute;background-color:var(--drp-text-primary);width:8px;height:8px;transform:rotate(45deg)}.drp-date-picker__loading-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background-color:#fffc;display:flex;align-items:center;justify-content:center;z-index:9500;border-radius:.375rem}.drp-date-picker__loading-spinner{width:40px;height:40px;border:4px solid #e5e7eb;border-top-color:#3b82f6;border-radius:50%;animation:drp-spin .8s linear infinite}@keyframes drp-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.drp-font-xs{--drp-font-size-2xs: .4375rem;--drp-font-size-xs: .525rem;--drp-font-size-sm: .6125rem;--drp-font-size-base: .7rem;--drp-font-size-lg: .7875rem;--drp-font-size-xl: .875rem;--drp-font-size-2xl: 1.05rem}.drp-font-sm{--drp-font-size-2xs: .53125rem;--drp-font-size-xs: .6375rem;--drp-font-size-sm: .74375rem;--drp-font-size-base: .85rem;--drp-font-size-lg: .95625rem;--drp-font-size-xl: 1.0625rem;--drp-font-size-2xl: 1.275rem}.drp-font-lg{--drp-font-size-2xs: .75rem;--drp-font-size-xs: .9rem;--drp-font-size-sm: 1.05rem;--drp-font-size-base: 1.2rem;--drp-font-size-lg: 1.35rem;--drp-font-size-xl: 1.5rem;--drp-font-size-2xl: 1.8rem}.drp-font-xl{--drp-font-size-2xs: .875rem;--drp-font-size-xs: 1.05rem;--drp-font-size-sm: 1.225rem;--drp-font-size-base: 1.4rem;--drp-font-size-lg: 1.575rem;--drp-font-size-xl: 1.75rem;--drp-font-size-2xl: 2.1rem}.drp-spacing-xs{--drp-spacing-xs: .175rem;--drp-spacing-sm: .35rem;--drp-spacing-md: .7rem;--drp-spacing-lg: 1.05rem;--drp-spacing-xl: 1.4rem}.drp-spacing-xs .drp-date-picker__month{min-width:196px}.drp-spacing-sm{--drp-spacing-xs: .2125rem;--drp-spacing-sm: .425rem;--drp-spacing-md: .85rem;--drp-spacing-lg: 1.275rem;--drp-spacing-xl: 1.7rem}.drp-spacing-sm .drp-date-picker__month{min-width:238px}.drp-spacing-lg{--drp-spacing-xs: .3rem;--drp-spacing-sm: .6rem;--drp-spacing-md: 1.2rem;--drp-spacing-lg: 1.8rem;--drp-spacing-xl: 2.4rem}.drp-spacing-lg .drp-date-picker__month{min-width:336px}.drp-spacing-xl{--drp-spacing-xs: .35rem;--drp-spacing-sm: .7rem;--drp-spacing-md: 1.4rem;--drp-spacing-lg: 2.1rem;--drp-spacing-xl: 2.8rem}.drp-spacing-xl .drp-date-picker__month{min-width:392px}@media (max-width: 1200px){.drp-responsive.drp-font-xl{--drp-font-size-2xs: .75rem;--drp-font-size-xs: .9rem;--drp-font-size-sm: 1.05rem;--drp-font-size-base: 1.2rem;--drp-font-size-lg: 1.35rem;--drp-font-size-xl: 1.5rem;--drp-font-size-2xl: 1.8rem}}@media (max-width: 768px){.drp-responsive.drp-font-xl{--drp-font-size-2xs: .625rem;--drp-font-size-xs: .75rem;--drp-font-size-sm: .875rem;--drp-font-size-base: 1rem;--drp-font-size-lg: 1.125rem;--drp-font-size-xl: 1.25rem;--drp-font-size-2xl: 1.5rem}}@media (max-width: 1200px){.drp-responsive.drp-font-lg{--drp-font-size-2xs: .625rem;--drp-font-size-xs: .75rem;--drp-font-size-sm: .875rem;--drp-font-size-base: 1rem;--drp-font-size-lg: 1.125rem;--drp-font-size-xl: 1.25rem;--drp-font-size-2xl: 1.5rem}}@media (max-width: 768px){.drp-responsive.drp-font-lg{--drp-font-size-2xs: .53125rem;--drp-font-size-xs: .6375rem;--drp-font-size-sm: .74375rem;--drp-font-size-base: .85rem;--drp-font-size-lg: .95625rem;--drp-font-size-xl: 1.0625rem;--drp-font-size-2xl: 1.275rem}}@media (max-width: 768px){.drp-responsive.drp-font-md{--drp-font-size-2xs: .53125rem;--drp-font-size-xs: .6375rem;--drp-font-size-sm: .74375rem;--drp-font-size-base: .85rem;--drp-font-size-lg: .95625rem;--drp-font-size-xl: 1.0625rem;--drp-font-size-2xl: 1.275rem}}@media (max-width: 768px){.drp-responsive.drp-font-sm{--drp-font-size-2xs: .4375rem;--drp-font-size-xs: .525rem;--drp-font-size-sm: .6125rem;--drp-font-size-base: .7rem;--drp-font-size-lg: .7875rem;--drp-font-size-xl: .875rem;--drp-font-size-2xl: 1.05rem}}@media (max-width: 1200px){.drp-responsive.drp-spacing-xl{--drp-spacing-xs: .3rem;--drp-spacing-sm: .6rem;--drp-spacing-md: 1.2rem;--drp-spacing-lg: 1.8rem;--drp-spacing-xl: 2.4rem}.drp-responsive.drp-spacing-xl .drp-date-picker__month{min-width:336px}}@media (max-width: 768px){.drp-responsive.drp-spacing-xl{--drp-spacing-xs: .25rem;--drp-spacing-sm: .5rem;--drp-spacing-md: 1rem;--drp-spacing-lg: 1.5rem;--drp-spacing-xl: 2rem}.drp-responsive.drp-spacing-xl .drp-date-picker__month{min-width:280px}}@media (max-width: 1200px){.drp-responsive.drp-spacing-lg{--drp-spacing-xs: .25rem;--drp-spacing-sm: .5rem;--drp-spacing-md: 1rem;--drp-spacing-lg: 1.5rem;--drp-spacing-xl: 2rem}.drp-responsive.drp-spacing-lg .drp-date-picker__month{min-width:280px}}@media (max-width: 768px){.drp-responsive.drp-spacing-lg{--drp-spacing-xs: .2125rem;--drp-spacing-sm: .425rem;--drp-spacing-md: .85rem;--drp-spacing-lg: 1.275rem;--drp-spacing-xl: 1.7rem}.drp-responsive.drp-spacing-lg .drp-date-picker__month{min-width:238px}}@media (max-width: 768px){.drp-responsive.drp-spacing-md{--drp-spacing-xs: .2125rem;--drp-spacing-sm: .425rem;--drp-spacing-md: .85rem;--drp-spacing-lg: 1.275rem;--drp-spacing-xl: 1.7rem}.drp-responsive.drp-spacing-md .drp-date-picker__month{min-width:238px}}@media (max-width: 768px){.drp-responsive.drp-spacing-sm{--drp-spacing-xs: .175rem;--drp-spacing-sm: .35rem;--drp-spacing-md: .7rem;--drp-spacing-lg: 1.05rem;--drp-spacing-xl: 1.4rem}.drp-responsive.drp-spacing-sm .drp-date-picker__month{min-width:196px}}.drp-date-picker--xs{padding:var(--drp-spacing-sm);min-width:240px}.drp-date-picker--xs .drp-date-picker__month-year{font-size:var(--drp-font-size-xs);padding:var(--drp-spacing-xs) var(--drp-spacing-sm)}.drp-date-picker--xs .drp-date-picker__nav{width:1.5rem;height:1.5rem;font-size:var(--drp-font-size-sm)}.drp-date-picker--xs .drp-date-picker__weekday{font-size:var(--drp-font-size-2xs)}.drp-date-picker--xs .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--sm .drp-date-picker__month-year{font-size:var(--drp-font-size-sm);padding:var(--drp-spacing-xs) var(--drp-spacing-sm)}.drp-date-picker--sm .drp-date-picker__nav{width:1.75rem;height:1.75rem;font-size:var(--drp-font-size-base)}.drp-date-picker--sm .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--lg .drp-date-picker__month-year{font-size:var(--drp-font-size-lg);padding:var(--drp-spacing-md) var(--drp-spacing-lg)}.drp-date-picker--lg .drp-date-picker__nav{width:2.5rem;height:2.5rem;font-size:var(--drp-font-size-xl)}.drp-date-picker--lg .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--xl .drp-date-picker__month-year{font-size:var(--drp-font-size-xl);padding:var(--drp-spacing-lg) var(--drp-spacing-xl)}.drp-date-picker--xl .drp-date-picker__nav{width:3rem;height:3rem;font-size:var(--drp-font-size-2xl)}.drp-date-picker--xl .drp-date-picker__day{font-size:var(--drp-font-size-lg)}.drp-date-picker--inline{position:static;display:block;box-shadow:none}

package/package.json

@@ -1,19 +1,25 @@
 {
   "name": "@keenmate/web-daterangepicker",
-  "version": "1.0.0-rc01",
+  "version": "1.0.0-rc03",
   "description": "Lightweight date picker web component with excellent keyboard navigation and range selection",
   "type": "module",
   "main": "./dist/date-range-picker.umd.js",
   "module": "./dist/date-range-picker.js",
+  "types": "./dist/index.d.ts",
   "style": "./dist/style.css",
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "import": "./dist/date-range-picker.js",
       "require": "./dist/date-range-picker.umd.js",
       "default": "./dist/date-range-picker.js"
     },
     "./style.css": "./dist/style.css",
+    "./scss": "./src/scss/main.scss",
+    "./scss/variables": "./src/scss/_variables.scss",
+    "./scss/base": "./src/scss/_base.scss",
     "./dist/*": "./dist/*",
+    "./src/scss/*": "./src/scss/*",
     "./package.json": "./package.json"
   },
   "sideEffects": [
@@ -22,7 +28,8 @@
     "*.css"
   ],
   "files": [
-    "dist"
+    "dist",
+    "src/scss"
   ],
   "scripts": {
     "dev": "vite",
@@ -63,6 +70,8 @@
     "vite": "^5.0.8"
   },
   "dependencies": {
-    "@floating-ui/dom": "^1.5.3"
+    "@floating-ui/dom": "^1.5.3",
+    "loglevel": "^1.9.2",
+    "loglevel-plugin-prefix": "^0.8.4"
   }
 }

package/src/scss/_badges.scss

@@ -0,0 +1,72 @@
+// ==============================================================================
+// 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);
+  margin-bottom: var(--drp-spacing-xs);
+  max-height: $drp-badge-max-height;
+  min-height: $drp-badge-max-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;
+  transition: all var(--drp-transition-fast) var(--drp-easing-snappy);
+  cursor: pointer;
+  height: 100%;
+  max-height: $drp-badge-max-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: $drp-badge-number-bg;
+  color: $drp-badge-number-color;
+  font-size: 0.7rem;
+  font-weight: 600;
+}
+
+// Count Badge (e.g., number of events)
+.drp-date-picker__badge-cell.badge-count {
+  background-color: $drp-badge-count-bg;
+  color: $drp-badge-count-color;
+  font-size: 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: $drp-badge-text-bg;
+  color: $drp-badge-text-color;
+  font-size: 0.65rem;
+  font-weight: 700;
+  text-transform: uppercase;
+}

package/src/scss/_base.scss

@@ -0,0 +1,171 @@
+// ==============================================================================
+// DATE RANGE PICKER - BASE STYLES
+// ==============================================================================
+// Base container styles, FOUC prevention, and root CSS custom properties
+
+@use 'variables' as *;
+
+// ==============================================================================
+// CSS CUSTOM PROPERTIES (CSS VARIABLES)
+// ==============================================================================
+// Define CSS custom properties with SCSS fallbacks for runtime customization
+// Using :host instead of :root for proper shadow DOM support
+
+:host {
+  // Colors
+  --drp-card-bg: #{$drp-calendar-bg};
+  --drp-border-color: #{$drp-border-color};
+  --drp-primary-bg: #{$drp-color-neutral-lighter};
+  --drp-primary-bg-hover: #{$drp-color-neutral-light};
+  --drp-accent-color: #{$drp-color-accent};
+  --drp-accent-color-hover: #{$drp-color-accent-dark};
+  --drp-text-primary: #{$drp-color-neutral-darkest};
+  --drp-text-secondary: #{$drp-color-neutral-dark};
+  --drp-accent-text-color: #{$drp-color-white};
+  --drp-button-text-color: #{$drp-color-white};
+
+  // Spacing
+  --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};
+
+  // Typography
+  --drp-font-size-2xs: #{$drp-font-size-2xs};
+  --drp-font-size-xs: #{$drp-font-size-xs};
+  --drp-font-size-sm: #{$drp-font-size-sm};
+  --drp-font-size-base: #{$drp-font-size-base};
+  --drp-font-size-lg: #{$drp-font-size-lg};
+  --drp-font-size-xl: #{$drp-font-size-xl};
+  --drp-font-size-2xl: #{$drp-font-size-2xl};
+  --drp-font-weight-medium: #{$drp-font-weight-medium};
+  --drp-font-weight-semibold: #{$drp-font-weight-semibold};
+
+  // Borders
+  --drp-border-width-base: #{$drp-border-width-base};
+  --drp-border-radius: #{$drp-border-radius};
+
+  // Shadows
+  --drp-shadow-xl: #{$drp-shadow-xl};
+
+  // Transitions
+  --drp-transition-fast: #{$drp-transition-fast};
+  --drp-easing-snappy: #{$drp-easing-snappy};
+
+  // Input
+  --drp-input-padding-h: #{$drp-input-padding-h};
+
+  // Grid
+  --drp-grid-columns: #{$drp-grid-columns};
+  --drp-grid-rows: #{$drp-grid-rows};
+}
+
+// ==============================================================================
+// DATE PICKER INPUT FIELD
+// ==============================================================================
+
+.drp-date-picker-input {
+  position: relative;
+  cursor: pointer;
+
+  &::after {
+    content: '📅';
+    position: absolute;
+    right: var(--drp-input-padding-h);
+    top: 50%;
+    transform: translateY(-50%);
+    pointer-events: none;
+    opacity: $drp-input-icon-opacity;
+  }
+}
+
+// ==============================================================================
+// CALENDAR POPUP CONTAINER
+// ==============================================================================
+
+.drp-date-picker {
+  position: absolute;
+  z-index: $drp-z-index-dropdown;
+  background: var(--drp-card-bg);
+  border: var(--drp-border-width-base) solid var(--drp-border-color);
+  border-radius: var(--drp-border-radius);
+  box-shadow: var(--drp-shadow-xl);
+  padding: var(--drp-spacing-md);
+  min-width: $drp-month-min-width;
+  max-width: $drp-calendar-max-width;
+  box-sizing: border-box;
+  user-select: none;
+
+  // Hide by default
+  &:not(.drp-date-picker--visible) {
+    display: none;
+  }
+
+  // Inline mode modifier
+  &--inline {
+    position: relative !important;
+    display: block !important;
+    z-index: auto;
+    min-width: 0;
+    max-width: 100%;
+    width: fit-content;
+    box-sizing: border-box;
+  }
+}
+
+// ==============================================================================
+// MONTHS CONTAINER (MULTI-MONTH LAYOUT)
+// ==============================================================================
+
+.drp-date-picker__months {
+  display: flex;
+  gap: var(--drp-spacing-lg);
+
+  // Allow wrapping for inline mode on small screens
+  .drp-date-picker--inline & {
+    flex-wrap: wrap;
+  }
+
+  // Grid layout mode
+  &--grid {
+    display: grid;
+    grid-template-columns: repeat(var(--drp-grid-columns, 3), minmax(0, 1fr));
+    grid-template-rows: repeat(var(--drp-grid-rows, 2), auto);
+    gap: var(--drp-spacing-lg);
+    width: 100%;
+
+    // Responsive breakpoints
+    @media (max-width: 1200px) {
+      grid-template-columns: repeat(min(var(--drp-grid-columns, 3), 3), minmax(0, 1fr));
+    }
+
+    @media (max-width: 768px) {
+      grid-template-columns: repeat(min(var(--drp-grid-columns, 3), 2), minmax(0, 1fr));
+    }
+
+    @media (max-width: 480px) {
+      grid-template-columns: minmax(0, 1fr);
+    }
+  }
+}
+
+// ==============================================================================
+// INDIVIDUAL MONTH CONTAINER
+// ==============================================================================
+
+.drp-date-picker__month {
+  flex: 1;
+  min-width: $drp-month-min-width;
+
+  // Allow shrinking for inline mode
+  .drp-date-picker--inline & {
+    min-width: $drp-month-min-width-inline;
+  }
+
+  // Grid layout: remove min-width to allow proper grid sizing
+  .drp-date-picker__months--grid & {
+    min-width: 0;
+    width: 100%;
+  }
+}

package/src/scss/_calendar-grid.scss

@@ -0,0 +1,219 @@
+// ==============================================================================
+// DATE RANGE PICKER - CALENDAR GRID
+// ==============================================================================
+// Weekday labels, days grid, and individual day cells with all states
+
+@use 'variables' as *;
+
+// ==============================================================================
+// WEEKDAY LABELS
+// ==============================================================================
+
+.drp-date-picker__weekdays {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: var(--drp-spacing-xs);
+  margin-bottom: var(--drp-spacing-sm);
+}
+
+.drp-date-picker__weekday {
+  text-align: center;
+  font-size: var(--drp-font-size-xs);
+  font-weight: var(--drp-font-weight-semibold);
+  color: var(--drp-text-secondary);
+  padding: var(--drp-spacing-xs);
+  text-transform: uppercase;
+}
+
+// ==============================================================================
+// DAYS GRID
+// ==============================================================================
+
+.drp-date-picker__days {
+  display: flex;
+  flex-direction: column;
+  gap: var(--drp-spacing-xs);
+  margin-bottom: var(--drp-spacing-md);
+}
+
+.drp-date-picker__date-row {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: var(--drp-spacing-xs);
+}
+
+// ==============================================================================
+// DAY CELLS
+// ==============================================================================
+
+.drp-date-picker__day {
+  aspect-ratio: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--drp-font-size-sm);
+  color: var(--drp-text-primary);
+  border-radius: var(--drp-border-radius);
+  cursor: pointer;
+  transition: all var(--drp-transition-fast) var(--drp-easing-snappy);
+  border: $drp-day-border-width solid $drp-day-border-color;
+  position: relative; // For absolute positioning of labels
+
+  &:hover:not(.drp-date-picker__day--disabled):not(.drp-date-picker__day--other-month) {
+    background-color: var(--drp-primary-bg);
+    border-color: var(--drp-accent-color);
+  }
+
+  // --------------------------------------
+  // Today
+  // --------------------------------------
+  &--today {
+    border-color: var(--drp-accent-color);
+    font-weight: var(--drp-font-weight-semibold);
+  }
+
+  // --------------------------------------
+  // Selected
+  // --------------------------------------
+  &--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);
+    }
+  }
+
+  // --------------------------------------
+  // Focused (keyboard navigation)
+  // --------------------------------------
+  &--focused {
+    outline: $drp-day-focused-outline-width solid var(--drp-accent-color);
+    outline-offset: $drp-day-focused-outline-offset;
+  }
+
+  // --------------------------------------
+  // Disabled
+  // --------------------------------------
+  &--disabled {
+    color: var(--drp-text-secondary);
+    opacity: $drp-day-disabled-opacity;
+    cursor: not-allowed;
+    position: relative;
+
+    // Diagonal hatched pattern overlay
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-image: repeating-linear-gradient(
+        45deg,
+        rgba(0, 0, 0, $drp-day-disabled-pattern-opacity) 0px,
+        rgba(0, 0, 0, $drp-day-disabled-pattern-opacity) 1px,
+        transparent 1px,
+        transparent 6px
+      );
+      border-radius: var(--drp-border-radius);
+      pointer-events: none;
+    }
+
+    &:hover {
+      background-color: transparent;
+      border-color: transparent;
+    }
+  }
+
+  // --------------------------------------
+  // Other month days (previous/next month)
+  // --------------------------------------
+  &--other-month {
+    color: var(--drp-text-secondary);
+    opacity: $drp-day-other-month-opacity;
+
+    // Reset opacity when other-month days are part of range selection
+    &.drp-date-picker__day--range-start,
+    &.drp-date-picker__day--range-end,
+    &.drp-date-picker__day--in-range,
+    &.drp-date-picker__day--drag-preview {
+      opacity: 1;
+    }
+  }
+
+  // --------------------------------------
+  // Range selection states
+  // --------------------------------------
+  &--range-start,
+  &--range-end {
+    background-color: var(--drp-accent-color);
+    color: var(--drp-accent-text-color);
+    font-weight: var(--drp-font-weight-semibold);
+    cursor: grab;
+    user-select: none;
+
+    &:active {
+      cursor: grabbing;
+    }
+  }
+
+  &--in-range {
+    background-color: color-mix(in srgb, var(--drp-accent-color) $drp-day-in-range-bg-opacity * 100%, transparent);
+
+    &:hover {
+      background-color: color-mix(in srgb, var(--drp-accent-color) $drp-day-in-range-hover-bg-opacity * 100%, transparent);
+    }
+  }
+
+  // --------------------------------------
+  // Dragging states
+  // --------------------------------------
+  &--dragging {
+    cursor: grabbing !important;
+    opacity: $drp-day-dragging-opacity;
+    transform: scale($drp-day-dragging-scale);
+    transition: transform var(--drp-transition-fast) var(--drp-easing-snappy);
+  }
+
+  &--drag-preview {
+    background-color: color-mix(in srgb, var(--drp-accent-color) $drp-day-drag-preview-bg-opacity * 100%, transparent);
+    border: $drp-day-border-width $drp-day-drag-preview-border-style var(--drp-accent-color);
+
+    &.drp-date-picker__day--range-start,
+    &.drp-date-picker__day--range-end {
+      background-color: color-mix(in srgb, var(--drp-accent-color) $drp-day-drag-preview-edge-bg-opacity * 100%, transparent);
+      color: var(--drp-accent-text-color);
+    }
+  }
+
+  &--drag-invalid {
+    background-color: color-mix(in srgb, $drp-day-drag-invalid-bg $drp-day-drag-invalid-bg-opacity * 100%, transparent) !important;
+    border-color: $drp-day-drag-invalid-bg !important;
+    border-style: dashed !important;
+  }
+}
+
+// ==============================================================================
+// SPECIAL DATE HIGHLIGHTING (EXAMPLES)
+// ==============================================================================
+// These are example classes showing how to highlight special dates.
+// Applications should define their own classes with appropriate colors.
+// The .holiday and .event classes here use component colors as examples only.
+
+.drp-date-picker__day.holiday {
+  background-color: color-mix(in srgb, $drp-color-error $drp-holiday-bg-opacity * 100%, transparent);
+
+  &:hover:not(.drp-date-picker__day--disabled) {
+    background-color: color-mix(in srgb, $drp-color-error $drp-holiday-hover-bg-opacity * 100%, transparent);
+  }
+}
+
+.drp-date-picker__day.event {
+  background-color: color-mix(in srgb, $drp-color-success $drp-event-bg-opacity * 100%, transparent);
+
+  &:hover:not(.drp-date-picker__day--disabled) {
+    background-color: color-mix(in srgb, $drp-color-success $drp-event-hover-bg-opacity * 100%, transparent);
+  }
+}