@rolldate/mcp 1.0.0 → 1.3.1

package/vendor/rolldate/rolldate.js

@@ -6,9 +6,6 @@
 var RollDate = (function () {
     'use strict';
 
-    function getTranslation(text) {
-        return text
-    }
     function getDecade(year) {
         return Math.floor(year / 10) * 10
     }
@@ -453,50 +450,59 @@ var RollDate = (function () {
             this.startWeekFromMonday = options.startWeekFromMonday;
             this.monthsNames = options.monthsNames;
             this.monthsShortNames = options.monthsShortNames;
+            this.weekDays = Array.isArray(options.weekDays) && options.weekDays.length === 7
+                ? options.weekDays
+                : ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
             this.enableTime = Boolean(options.enableTime);
-            this.hasFooter = Boolean(options.enableTime || (options.footerButtons && options.footerButtons.length));
+            this.hasFooter = Boolean(options.footerButtons && options.footerButtons.length);
 
             this.init();
         }
 
         init() {
+            const timePanelHtml = this.enableTime
+                ? '<div class="RollDate__time-separator" aria-hidden="true"></div><div class="RollDate__time-panel"><div class="RollDate__time"></div></div>'
+                : '';
+
             const footerHtml = this.hasFooter ? `
             <div class="RollDate__footer">
-                ${this.enableTime ? '<div class="RollDate__time"></div>' : ''}
                 <div class="RollDate__footer__buttons"></div>
             </div>
         ` : '';
 
             this.$container.innerHTML = `
-            <div class="RollDate__header">
-                <div class="RollDate__calendar__switcher">
-                    <div class="RollDate__header__year"></div>
-                    <div class="RollDate__header__month"></div>
+            <div class="RollDate__content">
+              <div class="RollDate__calendar">
+                <div class="RollDate__header">
+                    <div class="RollDate__calendar__switcher">
+                        <div class="RollDate__header__year"></div>
+                        <div class="RollDate__header__month"></div>
+                    </div>
+                    <div class="RollDate__calendar__buttons">
+                        <button class="RollDate__calendar__button" data-direction="prev">
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 61 55" width="55" height="50">
+                                <path id="Форма 2" fill-rule="evenodd" class="s0" d="m52.76 54.67l-44.73 0.12c-6.16 0.02-10.02-6.64-6.96-11.98l22.26-38.79c3.07-5.35 10.76-5.37 13.86-0.04l22.47 38.67c3.09 5.33-0.74 12.01-6.9 12.02z"/>
+                            </svg>
+                        </button>
+                        <button class="RollDate__calendar__button" data-direction="next">
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 61 55" width="55" height="50">
+                                <path id="Форма 2" fill-rule="evenodd" class="s0" d="m52.76 54.67l-44.73 0.12c-6.16 0.02-10.02-6.64-6.96-11.98l22.26-38.79c3.07-5.35 10.76-5.37 13.86-0.04l22.47 38.67c3.09 5.33-0.74 12.01-6.9 12.02z" />
+                            </svg>
+                        </button>
+                    </div>
                 </div>
-                <div class="RollDate__calendar__buttons">
-                    <button class="RollDate__calendar__button" data-direction="prev">
-                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 61 55" width="55" height="50">
-                            <path id="Форма 2" fill-rule="evenodd" class="s0" d="m52.76 54.67l-44.73 0.12c-6.16 0.02-10.02-6.64-6.96-11.98l22.26-38.79c3.07-5.35 10.76-5.37 13.86-0.04l22.47 38.67c3.09 5.33-0.74 12.01-6.9 12.02z"/>
-                        </svg>
-                    </button>
-                    <button class="RollDate__calendar__button" data-direction="next">
-                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 61 55" width="55" height="50">
-                            <path id="Форма 2" fill-rule="evenodd" class="s0" d="m52.76 54.67l-44.73 0.12c-6.16 0.02-10.02-6.64-6.96-11.98l22.26-38.79c3.07-5.35 10.76-5.37 13.86-0.04l22.47 38.67c3.09 5.33-0.74 12.01-6.9 12.02z" />
-                        </svg>
-                    </button>
+                <div class="RollDate__calendar__header">
+                  ${this.#dayHeaders()}
                 </div>
-            </div>
-            <div class="RollDate__calendar">
-              <div class="RollDate__calendar__header">
-                ${this.#dayHeaders()}
-              </div>
-              <div class="RollDate__calendar__body">
-                <div class="RollDate__calendar__scrollblock">
-                    <div class="RollDate__calendar__days"></div>
-                    <div class="RollDate__calendar__months"></div>
-                    <div class="RollDate__calendar__years"></div>
+                <div class="RollDate__calendar__body">
+                  <div class="RollDate__calendar__scrollblock">
+                      <div class="RollDate__calendar__days"></div>
+                      <div class="RollDate__calendar__months"></div>
+                      <div class="RollDate__calendar__years"></div>
+                  </div>
                 </div>
               </div>
+              ${timePanelHtml}
             </div>
             ${footerHtml}
         `;
@@ -509,48 +515,77 @@ var RollDate = (function () {
         }
 
         #dayHeaders() {
-            const weekDays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+            const weekDays = this.weekDays;
             let header = '';
             const startIndex = Number(this.startWeekFromMonday);
             for (let i = startIndex; i < 7 + startIndex; i++) {
-                header += `<div class="RollDate__calendar__header__weekday">${getTranslation(weekDays[i % 7])}</div>`;
+                header += `<div class="RollDate__calendar__header__weekday">${weekDays[i % 7]}</div>`;
             }
             return header
         }
 
-        dates(array, selectedDates = [], selectType = 'single') {
+        #highlightDots(colors = [], maxVisible = 5) {
+            if (!colors.length) return ''
+
+            const visible = colors.slice(0, maxVisible);
+            const extra = colors.length - maxVisible;
+            const many = visible.length > 3;
+            const dotClass = many
+                ? 'RollDate__calendar__day-dot RollDate__calendar__day-dot--compact'
+                : 'RollDate__calendar__day-dot';
+
+            const dots = visible.map(color => {
+                if (color) {
+                    return `<span class="${dotClass} RollDate__calendar__day-dot--custom" style="--rd-highlight-dot:${color}"></span>`
+                }
+                return `<span class="${dotClass}"></span>`
+            }).join('');
+
+            const more = extra > 0
+                ? `<span class="RollDate__calendar__day-dot RollDate__calendar__day-dot--more">+${extra}</span>`
+                : '';
+
+            return `<span class="RollDate__calendar__day-dots" aria-hidden="true">${dots}${more}</span>`
+        }
+
+        dates(array, selectedDates = [], selectType = 'single', getHighlight = () => null) {
             let datesHtml = '';
             const today = new Date();
 
             for (let i = 0; i < array.length; i++) {
                 const date = array[i].date;
                 const disabledClass = array[i].disabled ? 'RollDate__calendar__day--disabled' : '';
+                const highlight = getHighlight(date);
+                const highlightDots = highlight ? this.#highlightDots(highlight.colors) : '';
                 const isToday = date.toDateString() === today.toDateString();
 
                 // Resolve selection class for current date cell.
                 let selectionClass = '';
                 if (selectType === 'single' || selectType === 'multi') {
+                    const dayStamp = date.getTime();
                     const isSelected = selectedDates.some(
-                        d => d.getTime() === date.getTime()
+                        d => new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime() === dayStamp
                     );
                     if (isSelected) selectionClass = 'RollDate__calendar__day--selected';
                 } else if (selectType === 'range' && selectedDates.length === 2) {
                     const [start, end] = selectedDates;
                     const time = date.getTime();
-                    if (time === start.getTime()) {
+                    const startStamp = new Date(start.getFullYear(), start.getMonth(), start.getDate()).getTime();
+                    const endStamp = new Date(end.getFullYear(), end.getMonth(), end.getDate()).getTime();
+                    if (time === startStamp) {
                         selectionClass = 'RollDate__calendar__day--range-first';
-                    } else if (time === end.getTime()) {
+                    } else if (time === endStamp) {
                         selectionClass = 'RollDate__calendar__day--range-last';
-                    } else if (time > start.getTime() && time < end.getTime()) {
+                    } else if (time > startStamp && time < endStamp) {
                         selectionClass = 'RollDate__calendar__day--range-selected';
                     }
                 }
 
-                datesHtml += `<div class="RollDate__calendar__day ${disabledClass} ${isToday ? 'RollDate__calendar__day--today' : ''} ${selectionClass}" 
+                datesHtml += `<div class="RollDate__calendar__day ${disabledClass} ${isToday ? 'RollDate__calendar__day--today' : ''} ${selectionClass}"
                             data-bind='["year", "month"]'
                             data-year="${date.getFullYear()}"
                             data-month="${date.getMonth()}"  
-                            data-day="${date.getDate()}">${date.getDate()}</div>`;
+                            data-day="${date.getDate()}">${date.getDate()}${highlightDots}</div>`;
             }
 
             return datesHtml
@@ -610,502 +645,531 @@ var RollDate = (function () {
         }
     }
 
-    class Scroll {
-        #minScroll = null
-        #EDGE_TOP = 25
-        #EDGE_BOTTOM = 75
-        #offset
-        #baseOffset = 0
-        #blocked
-        #boundWheelHandler
-        #boundTouchStartHandler
-        #boundTouchMoveHandler
-        #boundTouchEndHandler
-        #isWheelAnimating = false
-        #edgeTriggeredInCurrentWheel = false
-        #lastEdgeTriggerAt = 0
-        #isTouchDragging = false
-        #touchLastY = 0
-        #touchLastTime = 0
-        #touchVelocityY = 0
-        #touchMomentumId = null
-        
-        constructor(body, methods = {
-            dominant: () => console.error('Function "dominant" is not found'),
-            updatePeriod: () => console.error('Function "updatePeriod" is not found')
-        }) {
-
-            this.$body = body;
-            this.$scroll_block = this.$body.querySelector('.RollDate__calendar__scrollblock');
-            this.dominant = methods.dominant;
-            this.updatePeriod = methods.updatePeriod;
-            this.offset = 0;
-            this.init();
-        }
-
-        init() {
-            this.#boundWheelHandler = this.wheelHandler.bind(this);
-            this.$body.addEventListener('wheel', this.#boundWheelHandler, { passive: false });
-            this.#boundTouchStartHandler = this.touchStartHandler.bind(this);
-            this.#boundTouchMoveHandler = this.touchMoveHandler.bind(this);
-            this.#boundTouchEndHandler = this.touchEndHandler.bind(this);
-            this.$body.addEventListener('touchstart', this.#boundTouchStartHandler, { passive: true });
-            this.$body.addEventListener('touchmove', this.#boundTouchMoveHandler, { passive: false });
-            this.$body.addEventListener('touchend', this.#boundTouchEndHandler, { passive: true });
-            this.$body.addEventListener('touchcancel', this.#boundTouchEndHandler, { passive: true });
-        }
-
-        wheelHandler(e) {
-            e.preventDefault();
-            e.stopPropagation();
-
-            const rawDelta = e.deltaY * 0.85;
-            const steps = Math.abs(rawDelta) > 50 ? 20 : 1;
-            const stepSize = rawDelta / steps;
-            const currentWheelDirection = rawDelta > 0 ? 'down' : 'up';
-            this.#isWheelAnimating = true;
-            this.#edgeTriggeredInCurrentWheel = false;
-
-            let i = 0;
-            const animate = () => {
-                if (i >= steps) {
-                    this.#isWheelAnimating = false;
-                    this.#edgeTriggeredInCurrentWheel = false;
-                    return
-                }
-
-                this.offset -= stepSize;
-
-                requestAnimationFrame(() => {
-                    this.dominant();
-                    this.checkEdge(currentWheelDirection);
-                    i++;
-                    animate();
-                });
-            };
-
-            animate();
-        }
-
-        touchStartHandler(e) {
-            if (!e.touches || e.touches.length !== 1) return
-            this.#cancelTouchMomentum();
-            this.#isTouchDragging = true;
-            this.#touchLastY = e.touches[0].clientY;
-            this.#touchLastTime = performance.now();
-            this.#touchVelocityY = 0;
-            this.#edgeTriggeredInCurrentWheel = false;
-        }
-
-        touchMoveHandler(e) {
-            if (!this.#isTouchDragging || !e.touches || e.touches.length !== 1) return
-            e.preventDefault();
-
-            const currentY = e.touches[0].clientY;
-            const deltaY = currentY - this.#touchLastY;
-            const now = performance.now();
-            const dt = now - this.#touchLastTime;
-
-            if (dt > 0 && dt < 120) {
-                const instantVelocity = deltaY / dt;
-                this.#touchVelocityY = this.#touchVelocityY * 0.65 + instantVelocity * 0.35;
-            }
-
-            this.#touchLastY = currentY;
-            this.#touchLastTime = now;
-
-            if (Math.abs(deltaY) < 1) return
-
-            this.offset += deltaY;
-            this.dominant();
-
-            const direction = deltaY < 0 ? 'down' : 'up';
-            this.checkEdge(direction);
-        }
-
-        touchEndHandler() {
-            this.#isTouchDragging = false;
-            this.#edgeTriggeredInCurrentWheel = false;
-
-            const velocityPerFrame = this.#touchVelocityY * 16;
-            if (Math.abs(velocityPerFrame) >= 0.4) {
-                this.#runTouchMomentum(velocityPerFrame);
-            }
-        }
-
-        #cancelTouchMomentum() {
-            if (this.#touchMomentumId !== null) {
-                cancelAnimationFrame(this.#touchMomentumId);
-                this.#touchMomentumId = null;
-            }
-        }
-
-        #runTouchMomentum(velocity) {
-            this.#cancelTouchMomentum();
-
-            const step = () => {
-                if (Math.abs(velocity) < 0.35 || this.blocked) {
-                    this.#touchMomentumId = null;
-                    this.#edgeTriggeredInCurrentWheel = false;
-                    return
-                }
-
-                this.offset += velocity;
-                velocity *= 0.92;
-                this.dominant();
-
-                const direction = velocity < 0 ? 'down' : 'up';
-                this.checkEdge(direction);
-
-                if (this.blocked) {
-                    this.#touchMomentumId = null;
-                    this.#edgeTriggeredInCurrentWheel = false;
-                    return
-                }
-
-                this.#touchMomentumId = requestAnimationFrame(step);
-            };
-
-            this.#touchMomentumId = requestAnimationFrame(step);
-        }
-
-        apply() {
-            this.$scroll_block.style.transform = `translateY(${this.offset + this.#baseOffset}px)`;
-        }
-
-        get offset() { return this.#offset }
-        set offset(value) {
-
-            this.#offset = value;
-
-            if ( this.#minScroll !== null ) {
-                if (value >= 0) this.#offset = 0;
-                else if (value <= this.#minScroll) this.#offset = this.#minScroll;
-            }
-            this.apply();
-        }
-
-        get blocked() { return this.#blocked }
-        set blocked(value) { this.#blocked = value; }
-        get minScroll() {
-            if (this.#minScroll === null) this.checkMinScroll();
-            return this.#minScroll ?? 0
-        }
-
-        checkEdge(direction) {
-            if (this.#minScroll === null) {
-                this.checkMinScroll();
-            }
-
-            if (this.#minScroll === 0 || this.blocked) return
-            if (this.#isWheelAnimating && this.#edgeTriggeredInCurrentWheel) return
-
-            const percent = Math.abs(this.offset / this.#minScroll) * 100;
-            const now = Date.now();
-            const EDGE_COOLDOWN_MS = 60;
-
-            if (now - this.#lastEdgeTriggerAt < EDGE_COOLDOWN_MS) return
-
-            if (percent < this.#EDGE_TOP) {
-                if (direction !== 'up') return
-                this.#lastEdgeTriggerAt = now;
-                this.#edgeTriggeredInCurrentWheel = true;
-                this.blocked = true;
-                this.updatePeriod('up');
-            } else if (percent > this.#EDGE_BOTTOM) {
-                if (direction !== 'down') return
-                this.#lastEdgeTriggerAt = now;
-                this.#edgeTriggeredInCurrentWheel = true;
-                this.blocked = true;
-                this.updatePeriod('down');
-            }
-        }
-
-        checkMinScroll() {
-            const scrollHeight = this.$scroll_block.clientHeight;
-            const bodyHeight = this.$body.clientHeight;
-            this.#minScroll = scrollHeight > bodyHeight ? -(scrollHeight - bodyHeight) : 0;
-        }
-
-        setBaseOffset(value = 0) {
-            this.#baseOffset = value;
-            this.apply();
-        }
-
-        resetMinScroll() {
-            this.#minScroll = null;
-        }
-
-        destroy() {
-            this.#cancelTouchMomentum();
-            if (this.#boundWheelHandler) {
-                this.$body.removeEventListener('wheel', this.#boundWheelHandler);
-            }
-            if (this.#boundTouchStartHandler) {
-                this.$body.removeEventListener('touchstart', this.#boundTouchStartHandler);
-            }
-            if (this.#boundTouchMoveHandler) {
-                this.$body.removeEventListener('touchmove', this.#boundTouchMoveHandler);
-            }
-            if (this.#boundTouchEndHandler) {
-                this.$body.removeEventListener('touchend', this.#boundTouchEndHandler);
-                this.$body.removeEventListener('touchcancel', this.#boundTouchEndHandler);
-            }
-        }
+    class Scroll {
+        #minScroll = null
+        #EDGE_TOP = 25
+        #EDGE_BOTTOM = 75
+        #offset
+        #baseOffset = 0
+        #blocked
+        #boundWheelHandler
+        #boundTouchStartHandler
+        #boundTouchMoveHandler
+        #boundTouchEndHandler
+        #isWheelAnimating = false
+        #edgeTriggeredInCurrentWheel = false
+        #lastEdgeTriggerAt = 0
+        #isTouchDragging = false
+        #touchLastY = 0
+        #touchLastTime = 0
+        #touchVelocity = 0
+        #momentumId = 0
+        #animId = 0
+        
+        constructor(body, methods = {
+            dominant: () => console.error('Function "dominant" is not found'),
+            updatePeriod: () => console.error('Function "updatePeriod" is not found')
+        }) {
+
+            this.$body = body;
+            this.$scroll_block = this.$body.querySelector('.RollDate__calendar__scrollblock');
+            this.dominant = methods.dominant;
+            this.updatePeriod = methods.updatePeriod;
+            this.offset = 0;
+            this.init();
+        }
+
+        init() {
+            this.#boundWheelHandler = this.wheelHandler.bind(this);
+            this.$body.addEventListener('wheel', this.#boundWheelHandler, { passive: false });
+            this.#boundTouchStartHandler = this.touchStartHandler.bind(this);
+            this.#boundTouchMoveHandler = this.touchMoveHandler.bind(this);
+            this.#boundTouchEndHandler = this.touchEndHandler.bind(this);
+            this.$body.addEventListener('touchstart', this.#boundTouchStartHandler, { passive: true });
+            this.$body.addEventListener('touchmove', this.#boundTouchMoveHandler, { passive: false });
+            this.$body.addEventListener('touchend', this.#boundTouchEndHandler, { passive: true });
+            this.$body.addEventListener('touchcancel', this.#boundTouchEndHandler, { passive: true });
+        }
+
+        wheelHandler(e) {
+            e.preventDefault();
+            e.stopPropagation();
+            this.#cancelMomentum();
+
+            const rawDelta = e.deltaY * 0.85;
+            const steps = Math.abs(rawDelta) > 50 ? 20 : 1;
+            const stepSize = rawDelta / steps;
+            const currentWheelDirection = rawDelta > 0 ? 'down' : 'up';
+            this.#isWheelAnimating = true;
+            this.#edgeTriggeredInCurrentWheel = false;
+
+            let i = 0;
+            const animate = () => {
+                if (i >= steps) {
+                    this.#isWheelAnimating = false;
+                    this.#edgeTriggeredInCurrentWheel = false;
+                    return
+                }
+
+                this.offset -= stepSize;
+
+                requestAnimationFrame(() => {
+                    this.dominant();
+                    this.checkEdge(currentWheelDirection);
+                    i++;
+                    animate();
+                });
+            };
+
+            animate();
+        }
+
+        touchStartHandler(e) {
+            if (!e.touches || e.touches.length !== 1) return
+            this.#cancelMomentum();
+            this.#isTouchDragging = true;
+            this.#touchLastY = e.touches[0].clientY;
+            this.#touchLastTime = performance.now();
+            this.#touchVelocity = 0;
+            this.#edgeTriggeredInCurrentWheel = false;
+        }
+
+        touchMoveHandler(e) {
+            if (!this.#isTouchDragging || !e.touches || e.touches.length !== 1) return
+            e.preventDefault();
+
+            const currentY = e.touches[0].clientY;
+            const deltaY = currentY - this.#touchLastY;
+            const now = performance.now();
+            const dt = now - this.#touchLastTime;
+            if (dt > 0 && dt < 120) {
+                this.#touchVelocity = this.#touchVelocity * 0.65 + (deltaY / dt) * 0.35;
+            }
+            this.#touchLastY = currentY;
+            this.#touchLastTime = now;
+
+            if (Math.abs(deltaY) < 1) return
+
+            this.offset += deltaY;
+            this.dominant();
+
+            const direction = deltaY < 0 ? 'down' : 'up';
+            this.checkEdge(direction);
+        }
+
+        touchEndHandler() {
+            this.#isTouchDragging = false;
+            this.#edgeTriggeredInCurrentWheel = false;
+
+            const v = this.#touchVelocity * 16;
+            if (Math.abs(v) < 0.4) return
+
+            let velocity = v;
+            const step = () => {
+                if (Math.abs(velocity) < 0.35) {
+                    this.#momentumId = 0;
+                    return
+                }
+
+                const prevOffset = this.#offset;
+                this.offset += velocity;
+                if (this.#offset === prevOffset) {
+                    this.#momentumId = 0;
+                    return
+                }
+
+                this.dominant();
+                const direction = velocity < 0 ? 'down' : 'up';
+                this.checkEdge(direction);
+
+                velocity *= 0.92;
+                this.#momentumId = requestAnimationFrame(step);
+            };
+            this.#momentumId = requestAnimationFrame(step);
+        }
+
+        #cancelMomentum() {
+            if (!this.#momentumId) return
+            cancelAnimationFrame(this.#momentumId);
+            this.#momentumId = 0;
+        }
+
+        #cancelAnimate() {
+            if (!this.#animId) return
+            cancelAnimationFrame(this.#animId);
+            this.#animId = 0;
+            this.blocked = false;
+        }
+
+        animateTo(targetOffset, opts = {}) {
+            this.#cancelMomentum();
+            this.#cancelAnimate();
+
+            const duration = opts.duration ?? 220;
+            const start = this.#offset;
+            const min = this.minScroll;
+            const target = Math.max(Math.min(targetOffset, 0), min);
+
+            if (Math.abs(target - start) < 1) {
+                this.offset = target;
+                this.dominant();
+                opts.onComplete?.();
+                return Promise.resolve()
+            }
+
+            this.blocked = true;
+            const startTime = performance.now();
+
+            return new Promise(resolve => {
+                const step = (now) => {
+                    const t = Math.min(1, (now - startTime) / duration);
+                    const eased = 1 - Math.pow(1 - t, 3);
+                    this.offset = start + (target - start) * eased;
+
+                    if (t < 1) {
+                        this.#animId = requestAnimationFrame(step);
+                        return
+                    }
+
+                    this.offset = target;
+                    this.blocked = false;
+                    this.dominant();
+                    this.#animId = 0;
+                    opts.onComplete?.();
+                    resolve();
+                };
+                this.#animId = requestAnimationFrame(step);
+            })
+        }
+
+        apply() {
+            this.$scroll_block.style.transform = `translateY(${this.offset + this.#baseOffset}px)`;
+        }
+
+        get offset() { return this.#offset }
+        set offset(value) {
+
+            this.#offset = value;
+
+            if ( this.#minScroll !== null ) {
+                if (value >= 0) this.#offset = 0;
+                else if (value <= this.#minScroll) this.#offset = this.#minScroll;
+            }
+            this.apply();
+        }
+
+        get blocked() { return this.#blocked }
+        set blocked(value) { this.#blocked = value; }
+        get minScroll() {
+            if (this.#minScroll === null) this.checkMinScroll();
+            return this.#minScroll ?? 0
+        }
+
+        checkEdge(direction) {
+            if (this.#minScroll === null) {
+                this.checkMinScroll();
+            }
+
+            if (this.#minScroll === 0 || this.blocked) return
+            if (this.#isWheelAnimating && this.#edgeTriggeredInCurrentWheel) return
+
+            const percent = Math.abs(this.offset / this.#minScroll) * 100;
+            const now = Date.now();
+            const EDGE_COOLDOWN_MS = 60;
+
+            if (now - this.#lastEdgeTriggerAt < EDGE_COOLDOWN_MS) return
+
+            if (percent < this.#EDGE_TOP) {
+                if (direction !== 'up') return
+                this.#lastEdgeTriggerAt = now;
+                this.#edgeTriggeredInCurrentWheel = true;
+                this.blocked = true;
+                this.updatePeriod('up');
+            } else if (percent > this.#EDGE_BOTTOM) {
+                if (direction !== 'down') return
+                this.#lastEdgeTriggerAt = now;
+                this.#edgeTriggeredInCurrentWheel = true;
+                this.blocked = true;
+                this.updatePeriod('down');
+            }
+        }
+
+        checkMinScroll() {
+            const scrollHeight = this.$scroll_block.clientHeight;
+            const bodyHeight = this.$body.clientHeight;
+            this.#minScroll = scrollHeight > bodyHeight ? -(scrollHeight - bodyHeight) : 0;
+        }
+
+        setBaseOffset(value = 0) {
+            this.#baseOffset = value;
+            this.apply();
+        }
+
+        resetMinScroll() {
+            this.#minScroll = null;
+        }
+
+        destroy() {
+            this.#cancelMomentum();
+            this.#cancelAnimate();
+            if (this.#boundWheelHandler) {
+                this.$body.removeEventListener('wheel', this.#boundWheelHandler);
+            }
+            if (this.#boundTouchStartHandler) {
+                this.$body.removeEventListener('touchstart', this.#boundTouchStartHandler);
+            }
+            if (this.#boundTouchMoveHandler) {
+                this.$body.removeEventListener('touchmove', this.#boundTouchMoveHandler);
+            }
+            if (this.#boundTouchEndHandler) {
+                this.$body.removeEventListener('touchend', this.#boundTouchEndHandler);
+                this.$body.removeEventListener('touchcancel', this.#boundTouchEndHandler);
+            }
+        }
     }
 
-    class Virtualizer {
-        constructor(context) {
-            this.ctx = context;
-        }
-
-        #isDayDisabled(date) {
-            const d = date instanceof Date ? date : new Date(date);
-            if (this.ctx.options.minDate && d < this.ctx.options.minDate) return true
-            if (this.ctx.options.maxDate && d > this.ctx.options.maxDate) return true
-            return typeof this.ctx.isDateDisabled === 'function' && this.ctx.isDateDisabled(d)
-        }
-
-        update(direction) {
-            const period = this.ctx.period;
-            const isUp = direction === 'up';
-
-            // Strict boundary checks to stop loading beyond min/max limits.
-            if (isUp) {
-                if (period === 'year') {
-                    if (this.ctx.data.up_date.getFullYear() <= this.ctx.options.minDate.getFullYear()) {
-                        this.ctx.scroll.blocked = false;
-                        return
-                    }
-                } else {
-                    if (this.ctx.data.up_date <= this.ctx.options.minDate) {
-                        this.ctx.scroll.blocked = false;
-                        return
-                    }
-                }
-            } else {
-                if (period === 'year') {
-                    if (this.ctx.data.down_date.getFullYear() >= this.ctx.options.maxDate.getFullYear()) {
-                        this.ctx.scroll.blocked = false;
-                        return
-                    }
-                } else {
-                    if (this.ctx.data.down_date >= this.ctx.options.maxDate) {
-                        this.ctx.scroll.blocked = false;
-                        return
-                    }
-                }
-            }
-
-            const config = {
-                day: {
-                    count: 35,
-                    getNewItems: (upDate, downDate) => {
-                        const newDates = [];
-                        if (isUp) {
-                            let newFirst = new Date(upDate);
-                            newFirst.setDate(upDate.getDate() - 35);
-                            if (newFirst < this.ctx.options.minDate) {
-                                const minDate = this.ctx.options.minDate;
-                                newFirst = adjustToWeekStart(
-                                    new Date(minDate.getFullYear(), minDate.getMonth(), 1),
-                                    this.ctx.options.startWeekFromMonday
-                                );
-                            }
-                            for (let d = new Date(newFirst); d < upDate; d.setDate(d.getDate() + 1)) {
-                                newDates.push({
-                                    date: new Date(d),
-                                    disabled: this.#isDayDisabled(d)
-                                });
-                            }
-                            return { items: newDates, newBound: newFirst }
-                        } else {
-                            let newLast = new Date(downDate);
-                            newLast.setDate(downDate.getDate() + 35);
-                            const firstNew = new Date(downDate);
-                            firstNew.setDate(downDate.getDate() + 1);
-
-                            if (newLast > this.ctx.options.maxDate) {
-                                const maxDate = this.ctx.options.maxDate;
-                                newLast = adjustToWeekEnd(
-                                    new Date(maxDate.getFullYear(), maxDate.getMonth() + 1, 0),
-                                    this.ctx.options.startWeekFromMonday
-                                );
-                            }
-
-                            for (let d = firstNew; d <= newLast; d.setDate(d.getDate() + 1)) {
-                                newDates.push({
-                                    date: new Date(d),
-                                    disabled: this.#isDayDisabled(d)
-                                });
-                            }
-                            return { items: newDates, newBound: newLast }
-                        }
-                    },
-                    render: dates => this.ctx.render.dates(
-                        dates,
-                        this.ctx.selectedDates,
-                        this.ctx.options.selectType
-                    ),
-                    block: this.ctx.dom.$days_block
-                },
-                month: {
-                    count: 36,
-                    ctx: this.ctx,
-                    getNewItems: function (upDate, downDate) {
-                        const newDates = [];
-                        const isMonthDisabled = (year, month) => {
-                            const date = new Date(year, month, 1);
-                            const monthEnd = new Date(year, month + 1, 0);
-                            if (this.ctx.options.minDate && monthEnd < this.ctx.options.minDate) return true
-                            if (this.ctx.options.maxDate && date > this.ctx.options.maxDate) return true
-                            return false
-                        };
-
-                        if (isUp) {
-                            // Generate full-year chunks (multiple of 12) so Jan always starts grid rows.
-                            let curr = new Date(upDate);
-                            for (let i = 0; i < this.count; i++) {
-                                curr.setMonth(curr.getMonth() - 1);
-                                newDates.unshift({
-                                    date: new Date(curr.getFullYear(), curr.getMonth(), 1),
-                                    disabled: isMonthDisabled(curr.getFullYear(), curr.getMonth())
-                                });
-                            }
-                            const newBound = newDates.length
-                                ? newDates[0].date
-                                : upDate;
-                            return { items: newDates, newBound }
-                        } else {
-                            // Generate full-year chunks to keep row structure stable while scrolling.
-                            let curr = new Date(downDate);
-                            curr.setMonth(curr.getMonth() + 1);
-                            for (let i = 0; i < this.count; i++) {
-                                newDates.push({
-                                    date: new Date(curr.getFullYear(), curr.getMonth(), 1),
-                                    disabled: isMonthDisabled(curr.getFullYear(), curr.getMonth())
-                                });
-                                curr.setMonth(curr.getMonth() + 1);
-                            }
-                            const newBound = newDates.length
-                                ? newDates[newDates.length - 1].date
-                                : downDate;
-                            return { items: newDates, newBound }
-                        }
-                    },
-                    render: months => this.ctx.render.months(months),
-                    block: this.ctx.dom.$months_block
-                },
-                year: {
-                    count: 16,
-                    ctx: this.ctx,
-                    getNewItems: function (upDate, downDate) {
-                        const newDates = [];
-                        if (isUp) {
-                            // Generate strictly before upDate year.
-                            const startYear = upDate.getFullYear() - this.count;
-                            for (let y = startYear; y < upDate.getFullYear(); y++) {
-                                if (y < this.ctx.options.minDate.getFullYear()) continue
-                                newDates.push({
-                                    date: new Date(y, 0, 1),
-                                    disabled: this.ctx.options.minDate.getFullYear() > y
-                                });
-                            }
-                            const newBound = newDates.length
-                                ? newDates[0].date
-                                : upDate;
-                            return { items: newDates, newBound }
-                        } else {
-                            // Generate strictly after downDate year.
-                            const startYear = downDate.getFullYear() + 1;
-                            for (let y = startYear; y < startYear + this.count; y++) {
-                                if (y > this.ctx.options.maxDate.getFullYear()) break
-                                newDates.push({
-                                    date: new Date(y, 0, 1),
-                                    disabled: this.ctx.options.maxDate.getFullYear() < y
-                                });
-                            }
-                            const newBound = newDates.length
-                                ? newDates[newDates.length - 1].date
-                                : downDate;
-                            return { items: newDates, newBound }
-                        }
-                    },
-                    render: years => this.ctx.render.years(years),
-                    block: this.ctx.dom.$years_block
-                }
-            }[period];
-
-            if (!config) return
-
-            const { items, newBound } = config.getNewItems(this.ctx.data.up_date, this.ctx.data.down_date);
-
-            if (items.length) {
-                config.block.insertAdjacentHTML(
-                    isUp ? 'afterbegin' : 'beforeend',
-                    config.render(items)
-                );
-            }
-
-            this.ctx.data[`${direction}_date`] = newBound;
-            this.ctx.observe.un();
-            const trimSize = period === 'year'
-                ? Math.min(4, items.length)
-                : items.length;
-            this.trim(direction, trimSize);
-            this.ctx.observe.on(period);
-            this.ctx.scroll.blocked = false;
-        }
-
-        trim(direction, remove) {
-            const period = this.ctx.period;
-            const block = this.ctx.dom[`$${period}s_block`];
-            const isUp = direction === 'up';
-            const minItemsInDom = period === 'year' ? 28 : 0;
-
-            const oldHeight = block.scrollHeight;
-            const items = Array.from(block.querySelectorAll(`.RollDate__calendar__${period}`));
-
-            if (!remove || items.length <= remove * 2) return
-            if (minItemsInDom && (items.length - remove) < minItemsInDom) return
-
-            if (isUp) {
-                items.slice(-remove).forEach(item => item.remove());
-            } else {
-                items.slice(0, remove).forEach(item => item.remove());
-            }
-
-            // Recalculate bounds from current DOM after trim to avoid flicker and endless refill loops.
-            const currentItems = Array.from(block.querySelectorAll(`.RollDate__calendar__${period}`));
-            const firstItem = currentItems[0];
-            const lastItem = currentItems[currentItems.length - 1];
-            const toDate = (el) => {
-                if (!el) return null
-                const year = Number(el.dataset.year);
-                const month = Number(el.dataset.month) || 0;
-                const day = period === 'day' ? Number(el.dataset.day) : 1;
-                return new Date(year, month, day)
-            };
-
-            const newUpDate = toDate(firstItem);
-            const newDownDate = toDate(lastItem);
-            if (newUpDate) this.ctx.data.up_date = newUpDate;
-            if (newDownDate) this.ctx.data.down_date = newDownDate;
-
-            const newHeight = block.scrollHeight;
-            const heightDelta = oldHeight - newHeight;
-            this.ctx.scroll.checkMinScroll();
-
-            if (isUp) this.ctx.scroll.offset -= heightDelta;
-            else this.ctx.scroll.offset += heightDelta;
-        }
+    class Virtualizer {
+        constructor(context) {
+            this.ctx = context;
+        }
+
+        update(direction) {
+            const period = this.ctx.period;
+            const isUp = direction === 'up';
+
+            // 🔑 Точна перевірка меж
+            if (isUp) {
+                if (period === 'year') {
+                    if (this.ctx.data.up_date.getFullYear() <= this.ctx.options.minDate.getFullYear()) {
+                        this.ctx.scroll.blocked = false;
+                        return
+                    }
+                } else {
+                    if (this.ctx.data.up_date <= this.ctx.options.minDate) {
+                        this.ctx.scroll.blocked = false;
+                        return
+                    }
+                }
+            } else {
+                if (period === 'year') {
+                    if (this.ctx.data.down_date.getFullYear() >= this.ctx.options.maxDate.getFullYear()) {
+                        this.ctx.scroll.blocked = false;
+                        return
+                    }
+                } else {
+                    if (this.ctx.data.down_date >= this.ctx.options.maxDate) {
+                        this.ctx.scroll.blocked = false;
+                        return
+                    }
+                }
+            }
+
+            const config = {
+                day: {
+                    count: 35,
+                    getNewItems: (upDate, downDate) => {
+                        const newDates = [];
+                        if (isUp) {
+                            let newFirst = new Date(upDate);
+                            newFirst.setDate(upDate.getDate() - 35);
+                            if (newFirst < this.ctx.options.minDate) {
+                                const minDate = this.ctx.options.minDate;
+                                newFirst = adjustToWeekStart(
+                                    new Date(minDate.getFullYear(), minDate.getMonth(), 1),
+                                    this.ctx.options.startWeekFromMonday
+                                );
+                            }
+                            for (let d = new Date(newFirst); d < upDate; d.setDate(d.getDate() + 1)) {
+                                newDates.push({
+                                    date: new Date(d),
+                                    disabled: this.ctx?.options?.minDate > new Date(d) || false
+                                });
+                            }
+                            return { items: newDates, newBound: newFirst }
+                        } else {
+                            let newLast = new Date(downDate);
+                            newLast.setDate(downDate.getDate() + 35);
+                            const firstNew = new Date(downDate);
+                            firstNew.setDate(downDate.getDate() + 1);
+
+                            if (newLast > this.ctx.options.maxDate) {
+                                const maxDate = this.ctx.options.maxDate;
+                                newLast = adjustToWeekEnd(
+                                    new Date(maxDate.getFullYear(), maxDate.getMonth() + 1, 0),
+                                    this.ctx.options.startWeekFromMonday
+                                );
+                            }
+
+                            for (let d = firstNew; d <= newLast; d.setDate(d.getDate() + 1)) {
+                                newDates.push({
+                                    date: new Date(d),
+                                    disabled: this.ctx?.options?.maxDate < new Date(d) || false
+                                });
+                            }
+                            return { items: newDates, newBound: newLast }
+                        }
+                    },
+                    render: dates => this.ctx.render.dates(
+                        dates,
+                        this.ctx.selectedDates,
+                        this.ctx.options.selectType
+                    ),
+                    block: this.ctx.dom.$days_block
+                },
+                month: {
+                    count: 36,
+                    ctx: this.ctx,
+                    getNewItems: function (upDate, downDate) {
+                        const newDates = [];
+                        const isMonthDisabled = (year, month) => {
+                            const date = new Date(year, month, 1);
+                            const monthEnd = new Date(year, month + 1, 0);
+                            if (this.ctx.options.minDate && monthEnd < this.ctx.options.minDate) return true
+                            if (this.ctx.options.maxDate && date > this.ctx.options.maxDate) return true
+                            return false
+                        };
+
+                        if (isUp) {
+                            // Генеруємо повними роками (кратно 12), щоб Jan завжди був ліворуч у сітці.
+                            let curr = new Date(upDate);
+                            for (let i = 0; i < this.count; i++) {
+                                curr.setMonth(curr.getMonth() - 1);
+                                newDates.unshift({
+                                    date: new Date(curr.getFullYear(), curr.getMonth(), 1),
+                                    disabled: isMonthDisabled(curr.getFullYear(), curr.getMonth())
+                                });
+                            }
+                            const newBound = newDates.length
+                                ? newDates[0].date
+                                : upDate;
+                            return { items: newDates, newBound }
+                        } else {
+                            // Генеруємо повними роками (кратно 12), щоб структура рядків не "плавала".
+                            let curr = new Date(downDate);
+                            curr.setMonth(curr.getMonth() + 1);
+                            for (let i = 0; i < this.count; i++) {
+                                newDates.push({
+                                    date: new Date(curr.getFullYear(), curr.getMonth(), 1),
+                                    disabled: isMonthDisabled(curr.getFullYear(), curr.getMonth())
+                                });
+                                curr.setMonth(curr.getMonth() + 1);
+                            }
+                            const newBound = newDates.length
+                                ? newDates[newDates.length - 1].date
+                                : downDate;
+                            return { items: newDates, newBound }
+                        }
+                    },
+                    render: months => this.ctx.render.months(months),
+                    block: this.ctx.dom.$months_block
+                },
+                year: {
+                    count: 16,
+                    ctx: this.ctx,
+                    getNewItems: function (upDate, downDate) {
+                        const newDates = [];
+                        if (isUp) {
+                            // 🔑 Генерація СТРОГО перед upDate.getFullYear()
+                            const startYear = upDate.getFullYear() - this.count;
+                            for (let y = startYear; y < upDate.getFullYear(); y++) {
+                                if (y < this.ctx.options.minDate.getFullYear()) continue
+                                newDates.push({
+                                    date: new Date(y, 0, 1),
+                                    disabled: this.ctx.options.minDate.getFullYear() > y
+                                });
+                            }
+                            const newBound = newDates.length
+                                ? newDates[0].date
+                                : upDate;
+                            return { items: newDates, newBound }
+                        } else {
+                            // 🔑 Генерація СТРОГО після downDate.getFullYear()
+                            const startYear = downDate.getFullYear() + 1;
+                            for (let y = startYear; y < startYear + this.count; y++) {
+                                if (y > this.ctx.options.maxDate.getFullYear()) break
+                                newDates.push({
+                                    date: new Date(y, 0, 1),
+                                    disabled: this.ctx.options.maxDate.getFullYear() < y
+                                });
+                            }
+                            const newBound = newDates.length
+                                ? newDates[newDates.length - 1].date
+                                : downDate;
+                            return { items: newDates, newBound }
+                        }
+                    },
+                    render: years => this.ctx.render.years(years),
+                    block: this.ctx.dom.$years_block
+                }
+            }[period];
+
+            if (!config) return
+
+            const { items, newBound } = config.getNewItems(this.ctx.data.up_date, this.ctx.data.down_date);
+
+            if (items.length) {
+                config.block.insertAdjacentHTML(
+                    isUp ? 'afterbegin' : 'beforeend',
+                    config.render(items)
+                );
+            }
+
+            this.ctx.data[`${direction}_date`] = newBound;
+            this.ctx.observe.un();
+            const trimSize = period === 'year'
+                ? Math.min(4, items.length)
+                : items.length;
+            this.trim(direction, trimSize);
+            this.ctx.observe.on(period);
+            this.ctx.scroll.blocked = false;
+        }
+
+        trim(direction, remove) {
+            const period = this.ctx.period;
+            const block = this.ctx.dom[`$${period}s_block`];
+            const isUp = direction === 'up';
+            const minItemsInDom = period === 'year' ? 28 : 0;
+
+            const oldHeight = block.scrollHeight;
+            const items = Array.from(block.querySelectorAll(`.RollDate__calendar__${period}`));
+
+            if (!remove || items.length <= remove * 2) return
+            if (minItemsInDom && (items.length - remove) < minItemsInDom) return
+
+            if (isUp) {
+                items.slice(-remove).forEach(item => item.remove());
+            } else {
+                items.slice(0, remove).forEach(item => item.remove());
+            }
+
+            // Перераховуємо межі тільки з поточного DOM після trim, щоб уникнути "миготіння" і зациклення дозагрузки.
+            const currentItems = Array.from(block.querySelectorAll(`.RollDate__calendar__${period}`));
+            const firstItem = currentItems[0];
+            const lastItem = currentItems[currentItems.length - 1];
+            const toDate = (el) => {
+                if (!el) return null
+                const year = Number(el.dataset.year);
+                const month = Number(el.dataset.month) || 0;
+                const day = period === 'day' ? Number(el.dataset.day) : 1;
+                return new Date(year, month, day)
+            };
+
+            const newUpDate = toDate(firstItem);
+            const newDownDate = toDate(lastItem);
+            if (newUpDate) this.ctx.data.up_date = newUpDate;
+            if (newDownDate) this.ctx.data.down_date = newDownDate;
+
+            const newHeight = block.scrollHeight;
+            const heightDelta = oldHeight - newHeight;
+            this.ctx.scroll.checkMinScroll();
+
+            if (isUp) this.ctx.scroll.offset -= heightDelta;
+            else this.ctx.scroll.offset += heightDelta;
+        }
     }
 
-    const ITEM_HEIGHT = 28;
-
-    const ARROW_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 61 55" width="55" height="50" aria-hidden="true">
-    <path fill-rule="evenodd" d="m52.76 54.67l-44.73 0.12c-6.16 0.02-10.02-6.64-6.96-11.98l22.26-38.79c3.07-5.35 10.76-5.37 13.86-0.04l22.47 38.67c3.09 5.33-0.74 12.01-6.9 12.02z"/>
-</svg>`;
+    const DEFAULT_ITEM_HEIGHT = 28;
+    const DEFAULT_VISIBLE = 3;
 
     class TimePicker {
         #hours = 0
@@ -1114,7 +1178,6 @@ var RollDate = (function () {
         #period = 'AM'
         #minuteStep = 1
         #columns = []
-        #displayEl = null
 
         constructor(root, options = {}) {
             this.root = root;
@@ -1142,13 +1205,89 @@ var RollDate = (function () {
             return h === 0 ? 12 : h
         }
 
-        #normalizeMinute(value) {
-            const step = this.#minuteStep;
-            const m = Math.round(Number(value) / step) * step;
-            return Math.min(59, Math.max(0, Number.isNaN(m) ? 0 : m))
+        #normalizeMinute(value) {
+            const step = this.#minuteStep;
+            const m = Math.round(Number(value) / step) * step;
+            return Math.min(59, Math.max(0, Number.isNaN(m) ? 0 : m))
+        }
+
+        #readMetrics(viewport) {
+            const container = viewport.closest('.RollDate__container');
+            const cs = container ? getComputedStyle(container) : getComputedStyle(viewport);
+            const itemH = parseFloat(cs.getPropertyValue('--rd-time-item-h')) || DEFAULT_ITEM_HEIGHT;
+            const visible = parseInt(cs.getPropertyValue('--rd-time-visible'), 10) || DEFAULT_VISIBLE;
+            const pad = Math.floor((visible - 1) / 2) * itemH;
+            return { itemH, visible, pad }
+        }
+
+        #build() {
+            this.root.innerHTML = `
+            <div class="RollDate__time__picker"></div>
+            <div class="RollDate__time__period">
+                <div class="RollDate__time__segmented RollDate__time__segmented--period" data-role="period">
+                    <button type="button" class="RollDate__time__segment-btn" data-period="AM">AM</button>
+                    <button type="button" class="RollDate__time__segment-btn" data-period="PM">PM</button>
+                </div>
+            </div>
+        `;
+
+            if (this.#use12Hour) {
+                this.root.classList.add('RollDate__time--12h');
+            }
+            this.#bindToolbar();
+            this.#buildPickerColumns();
+            this.#syncToolbar();
+        }
+
+        #bindToolbar() {
+            this.root.querySelector('[data-role="period"]')?.addEventListener('click', (e) => {
+                const btn = e.target.closest('[data-period]');
+                if (!btn || !this.#use12Hour) return
+                this.#setPeriod(btn.dataset.period);
+            });
+        }
+
+        #setPeriod(period) {
+            if (period !== 'AM' && period !== 'PM') return
+            if (this.#period === period) return
+
+            this.#readColumns();
+            const was = this.#period;
+            this.#period = period;
+
+            if (was === 'AM' && period === 'PM' && this.#hours < 12) {
+                this.#hours += 12;
+            } else if (was === 'PM' && period === 'AM' && this.#hours >= 12) {
+                this.#hours -= 12;
+            }
+
+            this.#columns.find(c => c.unit === 'hour')?.scrollToValue(this.#displayHour(), true);
+            this.#syncToolbar();
+            hapticTick(this.hapticFeedback);
+            this.#commitTime();
+        }
+
+        #syncToolbar() {
+            this.root.classList.toggle('RollDate__time--12h', this.#use12Hour);
+
+            this.root.querySelectorAll('[data-period]').forEach((btn) => {
+                const active = btn.dataset.period === this.#period;
+                btn.classList.toggle('RollDate__time__segment-btn--active', active);
+                btn.setAttribute('aria-pressed', active ? 'true' : 'false');
+            });
+        }
+
+        #destroyColumns() {
+            this.#columns.forEach((column) => column._resizeObserver?.disconnect());
+            this.#columns = [];
         }
 
-        #build() {
+        #buildPickerColumns() {
+            this.#destroyColumns();
+
+            const picker = this.root.querySelector('.RollDate__time__picker');
+            if (!picker) return
+
             const hourValues = this.#use12Hour
                 ? Array.from({ length: 12 }, (_, i) => i + 1)
                 : Array.from({ length: 24 }, (_, i) => i);
@@ -1158,68 +1297,36 @@ var RollDate = (function () {
                 minuteValues.push(m);
             }
 
-            this.root.innerHTML = `
-            <div class="RollDate__time__picker">
+            picker.innerHTML = `
             <div class="RollDate__time__field" data-unit="hour">
                 <div class="RollDate__time__column">
-                    <button type="button" class="RollDate__time__arrow RollDate__time__arrow--prev" data-dir="prev" aria-label="Earlier hour">${ARROW_SVG}</button>
                     <div class="RollDate__time__viewport">
                         <div class="RollDate__time__list"></div>
                     </div>
-                    <button type="button" class="RollDate__time__arrow RollDate__time__arrow--next" data-dir="next" aria-label="Later hour">${ARROW_SVG}</button>
                 </div>
             </div>
             <span class="RollDate__time__sep">:</span>
             <div class="RollDate__time__field" data-unit="minute">
                 <div class="RollDate__time__column">
-                    <button type="button" class="RollDate__time__arrow RollDate__time__arrow--prev" data-dir="prev" aria-label="Earlier minute">${ARROW_SVG}</button>
-                    <div class="RollDate__time__viewport">
-                        <div class="RollDate__time__list"></div>
-                    </div>
-                    <button type="button" class="RollDate__time__arrow RollDate__time__arrow--next" data-dir="next" aria-label="Later minute">${ARROW_SVG}</button>
-                </div>
-            </div>
-            ${this.#use12Hour ? `
-            <div class="RollDate__time__field RollDate__time__field--period" data-unit="period">
-                <div class="RollDate__time__column">
-                    <button type="button" class="RollDate__time__arrow RollDate__time__arrow--prev" data-dir="prev" aria-label="Earlier period">${ARROW_SVG}</button>
                     <div class="RollDate__time__viewport">
                         <div class="RollDate__time__list"></div>
                     </div>
-                    <button type="button" class="RollDate__time__arrow RollDate__time__arrow--next" data-dir="next" aria-label="Later period">${ARROW_SVG}</button>
                 </div>
-            </div>` : ''}
             </div>
-            <div class="RollDate__time__display" aria-live="polite"></div>
         `;
 
-            this.#displayEl = this.root.querySelector('.RollDate__time__display');
-            if (this.#use12Hour) {
-                this.root.classList.add('RollDate__time--12h');
-            }
-
-            this.#columns.push(this.#createColumn('hour', hourValues, this.#displayHour()));
+            this.#columns.push(this.#createColumn('hour', hourValues, this.#use12Hour ? this.#displayHour() : this.#hours));
             this.#columns.push(this.#createColumn('minute', minuteValues, this.#minutes));
-            if (this.#use12Hour) {
-                this.#columns.push(this.#createColumn('period', ['AM', 'PM'], this.#period));
-            }
-
-            this.#updateDisplay();
         }
 
-        #formatDisplay() {
-            const hours = String(this.#hours).padStart(2, '0');
-            const minutes = String(this.#minutes).padStart(2, '0');
-            if (this.#use12Hour) {
-                return `${String(this.#displayHour()).padStart(2, '0')}:${minutes} ${this.#period}`
-            }
-            return `${hours}:${minutes}`
+        #commitTime() {
+            this.#readColumns();
+            this.onChange(this.getTime());
         }
 
-        #updateDisplay() {
-            if (this.#displayEl) {
-                this.#displayEl.textContent = this.#formatDisplay();
-            }
+        #parseItemValue(unit, raw) {
+            if (unit === 'period') return raw
+            return Number(raw)
         }
 
         #createColumn(unit, values, initial) {
@@ -1234,22 +1341,28 @@ var RollDate = (function () {
                 return `<div class="RollDate__time__item" data-value="${value}">${label}</div>`
             }).join('');
 
-            list.style.paddingTop = `${ITEM_HEIGHT}px`;
-            list.style.paddingBottom = `${ITEM_HEIGHT}px`;
-
             const column = {
                 unit,
                 viewport,
                 list,
                 values,
-                offset: 0
+                offset: 0,
+                getMetrics: () => this.#readMetrics(viewport)
             };
 
+            const applyPadding = () => {
+                const { pad } = column.getMetrics();
+                list.style.paddingTop = `${pad}px`;
+                list.style.paddingBottom = `${pad}px`;
+            };
+            applyPadding();
+
             column.updateActive = () => {
                 const index = column.indexFromOffset();
                 if (column._lastIndex !== index) {
                     if (column._lastIndex !== undefined) {
                         hapticTick(this.hapticFeedback);
+                        this.#commitTime();
                     }
                     column._lastIndex = index;
                 }
@@ -1259,7 +1372,8 @@ var RollDate = (function () {
             };
 
             column.indexFromOffset = () => {
-                const raw = Math.round(-column.offset / ITEM_HEIGHT);
+                const { itemH } = column.getMetrics();
+                const raw = Math.round(-column.offset / itemH);
                 return Math.min(values.length - 1, Math.max(0, raw))
             };
 
@@ -1272,46 +1386,51 @@ var RollDate = (function () {
             };
 
             column.snap = () => {
+                const { itemH } = column.getMetrics();
                 const index = column.indexFromOffset();
-                column.offset = -index * ITEM_HEIGHT;
+                column.offset = -index * itemH;
+                column._lastIndex = index;
                 column.apply(true);
-                this.#readColumns();
-                this.#updateDisplay();
-                this.onChange(this.getTime());
+                this.#commitTime();
             };
 
             column.scrollToValue = (value, animate = true) => {
+                const { itemH } = column.getMetrics();
                 const index = values.indexOf(value);
                 if (index < 0) return
-                column.offset = -index * ITEM_HEIGHT;
+                column.offset = -index * itemH;
+                column._lastIndex = index;
                 column.apply(animate);
             };
 
-            column.stepBy = (delta) => {
-                const index = Math.min(values.length - 1, Math.max(0, column.indexFromOffset() + delta));
-                column.offset = -index * ITEM_HEIGHT;
-                column.apply(true);
-                this.#readColumns();
-                this.#updateDisplay();
-                this.onChange(this.getTime());
+            column.scrollToIndex = (index, animate = true) => {
+                const { itemH } = column.getMetrics();
+                const clamped = Math.min(values.length - 1, Math.max(0, index));
+                column.offset = -clamped * itemH;
+                column._lastIndex = clamped;
+                column.apply(animate);
             };
 
             column.scrollToValue(initial, false);
             this.#bindWheel(column);
             this.#bindTouch(column);
-            this.#bindArrows(field, column);
+            this.#bindItemClick(column);
+            column._resizeObserver = new ResizeObserver(() => {
+                applyPadding();
+                column.scrollToIndex(column.indexFromOffset(), false);
+            });
+            column._resizeObserver.observe(viewport);
 
             return column
         }
 
-        #bindArrows(field, column) {
-            field.querySelector('[data-dir="prev"]')?.addEventListener('click', (e) => {
-                e.preventDefault();
-                column.stepBy(-1);
-            });
-            field.querySelector('[data-dir="next"]')?.addEventListener('click', (e) => {
-                e.preventDefault();
-                column.stepBy(1);
+        #bindItemClick(column) {
+            column.list.addEventListener('click', (e) => {
+                const item = e.target.closest('.RollDate__time__item');
+                if (!item) return
+                const value = this.#parseItemValue(column.unit, item.dataset.value);
+                column.scrollToValue(value, true);
+                this.#commitTime();
             });
         }
 
@@ -1319,9 +1438,10 @@ var RollDate = (function () {
             column.viewport.addEventListener('wheel', (e) => {
                 e.preventDefault();
                 e.stopPropagation();
+                const { itemH } = column.getMetrics();
                 column.list.style.transition = 'none';
                 column.offset -= e.deltaY * 0.35;
-                const min = -(column.values.length - 1) * ITEM_HEIGHT;
+                const min = -(column.values.length - 1) * itemH;
                 column.offset = Math.max(min, Math.min(0, column.offset));
                 column.list.style.transform = `translateY(${column.offset}px)`;
                 column.updateActive();
@@ -1344,8 +1464,9 @@ var RollDate = (function () {
             column.viewport.addEventListener('touchmove', (e) => {
                 if (!e.touches || e.touches.length !== 1) return
                 e.preventDefault();
+                const { itemH } = column.getMetrics();
                 column.offset = startOffset + (e.touches[0].clientY - startY);
-                const min = -(column.values.length - 1) * ITEM_HEIGHT;
+                const min = -(column.values.length - 1) * itemH;
                 column.offset = Math.max(min, Math.min(0, column.offset));
                 column.list.style.transform = `translateY(${column.offset}px)`;
                 column.updateActive();
@@ -1357,13 +1478,12 @@ var RollDate = (function () {
         #readColumns() {
             const hourCol = this.#columns.find(c => c.unit === 'hour');
             const minuteCol = this.#columns.find(c => c.unit === 'minute');
-            const periodCol = this.#columns.find(c => c.unit === 'period');
+            if (!hourCol || !minuteCol) return
 
             const hourValue = hourCol.getValue();
             this.#minutes = minuteCol.getValue();
 
-            if (this.#use12Hour && periodCol) {
-                this.#period = periodCol.getValue();
+            if (this.#use12Hour) {
                 if (this.#period === 'AM') {
                     this.#hours = hourValue === 12 ? 0 : hourValue;
                 } else {
@@ -1384,16 +1504,15 @@ var RollDate = (function () {
             if (this.#use12Hour) {
                 this.#period = this.#hours >= 12 ? 'PM' : 'AM';
                 this.#columns.find(c => c.unit === 'hour')?.scrollToValue(this.#displayHour());
-                this.#columns.find(c => c.unit === 'period')?.scrollToValue(this.#period);
             } else {
                 this.#columns.find(c => c.unit === 'hour')?.scrollToValue(this.#hours);
             }
             this.#columns.find(c => c.unit === 'minute')?.scrollToValue(this.#minutes);
-            this.#updateDisplay();
+            this.#syncToolbar();
         }
 
         destroy() {
-            this.#columns = [];
+            this.#destroyColumns();
             this.root.innerHTML = '';
         }
     }
@@ -1403,10 +1522,12 @@ var RollDate = (function () {
 
         #wheelHandler
         #viewNumber = 0
+        #arrowAnimating = false
         #viewPeriodNames = ['day', 'month', 'year']
         #selectedDates = []
         #firstOpen = true
         #disabledDateStamps = new Set()
+        #highlightDateMap = new Map()
         #docClickHandler = null
         #openTriggers = []
 
@@ -1422,12 +1543,36 @@ var RollDate = (function () {
         }
 
         #normalizeDateInput(dateLike) {
+            if (dateLike instanceof Date && !Number.isNaN(dateLike.getTime())) {
+                return new Date(dateLike.getFullYear(), dateLike.getMonth(), dateLike.getDate())
+            }
+
+            if (typeof dateLike === 'string') {
+                const clean = dateLike.trim();
+                if (!clean) return null
+
+                const valueSep = clean.match(/[-/.]/)?.[0];
+                const formatSep = this.options.dateFormat.match(/[-/.]/)?.[0];
+                const format = valueSep && formatSep && valueSep !== formatSep
+                    ? 'auto'
+                    : this.options.dateFormat;
+
+                const date = parseDate(clean, format);
+                if (!(date instanceof Date) || Number.isNaN(date.getTime())) {
+                    const fallback = parseDate(clean, 'auto');
+                    if (!(fallback instanceof Date) || Number.isNaN(fallback.getTime())) return null
+                    return new Date(fallback.getFullYear(), fallback.getMonth(), fallback.getDate())
+                }
+
+                return new Date(date.getFullYear(), date.getMonth(), date.getDate())
+            }
+
             const date = checkDateFormat(dateLike, this.options.dateFormat);
             if (!(date instanceof Date) || Number.isNaN(date.getTime())) return null
             return new Date(date.getFullYear(), date.getMonth(), date.getDate())
         }
 
-        #buildDisabledDateSet(dates = []) {
+        #buildDateStampSet(dates = []) {
             const set = new Set();
             dates.forEach(dateLike => {
                 const normalized = this.#normalizeDateInput(dateLike);
@@ -1436,6 +1581,85 @@ var RollDate = (function () {
             return set
         }
 
+        #buildDisabledDateSet(dates = []) {
+            return this.#buildDateStampSet(dates)
+        }
+
+        #buildHighlightDateMap(dates = []) {
+            const map = new Map();
+            if (!Array.isArray(dates)) return map
+
+            dates.forEach(entry => {
+                const item = this.#normalizeHighlightEntry(entry);
+                if (!item) return
+
+                const existing = map.get(item.stamp) || [];
+                map.set(item.stamp, existing.concat(item.colors));
+            });
+
+            return map
+        }
+
+        #normalizeHighlightEntry(entry) {
+            if (entry == null) return null
+
+            if (typeof entry === 'string' || entry instanceof Date) {
+                const normalized = this.#normalizeDateInput(entry);
+                if (!normalized) return null
+                return {
+                    stamp: this.#toDateStamp(normalized),
+                    colors: [null]
+                }
+            }
+
+            if (typeof entry === 'object' && entry.date != null) {
+                const normalized = this.#normalizeDateInput(entry.date);
+                if (!normalized) return null
+                const stamp = this.#toDateStamp(normalized);
+
+                if (Array.isArray(entry.colors)) {
+                    const colors = entry.colors.map(color => {
+                        if (color == null || color === '') return null
+                        return this.#sanitizeHighlightColor(color)
+                    }).filter(color => color !== undefined);
+
+                    if (colors.length) return { stamp, colors }
+                }
+
+                if (entry.color != null && entry.color !== '') {
+                    const color = this.#sanitizeHighlightColor(entry.color);
+                    if (color) return { stamp, colors: [color] }
+                }
+
+                return { stamp, colors: [null] }
+            }
+
+            return null
+        }
+
+        #sanitizeHighlightColor(color) {
+            if (typeof color !== 'string') return null
+            const value = color.trim();
+            if (!value) return null
+
+            if (/^#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(value)) return value
+            if (/^(rgb|rgba|hsl|hsla)\([^)]+\)$/i.test(value)) return value
+            if (/^var\(--[\w-]+\)$/.test(value)) return value
+
+            return null
+        }
+
+        #highlightMapToOptionsArray() {
+            return [...this.#highlightDateMap.entries()].map(([stamp, colors]) => {
+                const date = new Date(stamp);
+
+                if (colors.length === 1 && colors[0] === null) return date
+                if (colors.length === 1 && colors[0]) return { date, color: colors[0] }
+
+                return { date, colors }
+            })
+        }
+
         #disableInputAssist(input) {
             if (!input || input.tagName !== 'INPUT') return
             input.setAttribute('autocomplete', 'off');
@@ -1448,6 +1672,16 @@ var RollDate = (function () {
             return this.#disabledDateStamps.has(this.#toDateStamp(date))
         }
 
+        #isDateHighlighted(date) {
+            return this.#highlightDateMap.has(this.#toDateStamp(date))
+        }
+
+        #getHighlightMeta(date) {
+            const colors = this.#highlightDateMap.get(this.#toDateStamp(date));
+            if (!colors?.length) return null
+            return { colors }
+        }
+
         #notifySelectionChange() {
             if (this.options.selectType === 'single') {
                 this.options.selectDate(this.#selectedDates[0] || null);
@@ -1499,6 +1733,11 @@ var RollDate = (function () {
                 const btn = document.createElement('button');
                 btn.type = 'button';
                 btn.className = 'RollDate__footer__button';
+                if (cfg.variant === 'primary') {
+                    btn.classList.add('RollDate__footer__button--primary');
+                } else if (cfg.variant === 'secondary') {
+                    btn.classList.add('RollDate__footer__button--secondary');
+                }
                 btn.textContent = cfg.text;
                 btn.addEventListener('click', (e) => {
                     e.preventDefault();
@@ -1523,6 +1762,69 @@ var RollDate = (function () {
             }
         }
 
+        #mountRangePresets() {
+            const presets = Array.isArray(this.options.rangePresets)
+                ? this.options.rangePresets
+                : [];
+
+            if (this.options.selectType !== 'range' || !presets.length) return
+
+            let bar = this.$container.querySelector('.RollDate__presets');
+            if (!bar) {
+                bar = document.createElement('div');
+                bar.className = 'RollDate__presets';
+                const footer = this.$container.querySelector('.RollDate__footer');
+                const calendar = this.$container.querySelector('.RollDate__calendar');
+                if (footer) footer.before(bar);
+                else if (calendar) calendar.after(bar);
+            }
+
+            bar.innerHTML = '';
+            presets.forEach(preset => {
+                if (!preset?.label || typeof preset.getRange !== 'function') return
+
+                const btn = document.createElement('button');
+                btn.type = 'button';
+                btn.className = 'RollDate__presets__button';
+                btn.textContent = preset.label;
+                btn.addEventListener('click', (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    this.#applyRangePreset(preset);
+                });
+                bar.append(btn);
+            });
+
+            if (bar.childElementCount) {
+                this.$container.classList.add('RollDate__has-presets');
+            }
+        }
+
+        #applyRangePreset(preset) {
+            const result = preset.getRange(this);
+            if (!Array.isArray(result) || result.length < 2) return
+
+            const normalized = result
+                .slice(0, 2)
+                .map(dateLike => this.#normalizeDateInput(dateLike))
+                .filter(Boolean)
+                .map(date => this.#clampDateToRange(date, this.options.minDate, this.options.maxDate))
+                .filter(date => !this.#isDateDisabled(date));
+
+            if (normalized.length < 2) return
+
+            let [start, end] = normalized;
+            if (start > end) [start, end] = [end, start];
+
+            this.#selectedDates = [
+                this.#applyTimeToDate(start),
+                this.#applyTimeToDate(end)
+            ];
+            this.#notifySelectionChange();
+            this.#updateInputValue();
+            this.#paintRangeSelection();
+        }
+
         #initTimePicker() {
             const start = this.options.startDate;
             this.timePicker = new TimePicker(this.dom.$time, {
@@ -1567,7 +1869,7 @@ var RollDate = (function () {
 
             const baseOptions = {
                 mode: 'auto',
-                theme: 'dark',
+                theme: 'main',
                 startWeekFromMonday: true,
                 selectType: 'single',
                 monthsNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
@@ -1579,17 +1881,20 @@ var RollDate = (function () {
                 onViewChange: () => {},
                 onHoverDate: () => {},
                 disabledDates: [],
+                highlightDates: [],
                 closeOnSelect: true,
                 enableTime: false,
                 use12Hour: false,
                 timeStep: 1,
+                timePosition: 'right',
                 footerButtons: [],
+                rangePresets: [],
                 hapticFeedback: true,
                 ...options
             };
 
             if (baseOptions.theme === 'default') {
-                baseOptions.theme = 'dark';
+                baseOptions.theme = 'main';
             }
 
             const resolvedLocale = baseOptions.locale ||
@@ -1626,6 +1931,7 @@ var RollDate = (function () {
                 this.options.maxDate
             );
             this.#disabledDateStamps = this.#buildDisabledDateSet(this.options.disabledDates);
+            this.#highlightDateMap = this.#buildHighlightDateMap(this.options.highlightDates);
             if (this.#isDateDisabled(this.options.startDate)) {
                 this.options.startDate = new Date(this.options.minDate);
             }
@@ -1668,8 +1974,10 @@ var RollDate = (function () {
 
             if (this.options.enableTime) {
                 this.$container.classList.add('RollDate__has-time');
+                const timePosition = this.options.timePosition === 'bottom' ? 'bottom' : 'right';
+                this.$container.classList.add(`RollDate__time-position_${timePosition}`);
             }
-            if (this.options.footerButtons?.length || this.options.enableTime) {
+            if (this.options.footerButtons?.length) {
                 this.$container.classList.add('RollDate__has-footer');
             }
 
@@ -1698,6 +2006,7 @@ var RollDate = (function () {
             };
 
             this.#initFooterButtons();
+            this.#mountRangePresets();
             if (this.options.enableTime && this.dom.$time) {
                 this.#initTimePicker();
             }
@@ -1758,7 +2067,30 @@ var RollDate = (function () {
             this.$container.style.zIndex = '10000';
         }
 
-        #updateView() {
+        #updateView(viewNumberOrOptions, maybeOptions) {
+            let options = {};
+
+            if (typeof viewNumberOrOptions === 'object' && viewNumberOrOptions !== null) {
+                options = viewNumberOrOptions;
+            } else {
+                if (typeof viewNumberOrOptions === 'number') {
+                    this.#viewNumber = viewNumberOrOptions;
+                }
+                if (typeof maybeOptions === 'object' && maybeOptions !== null) {
+                    options = maybeOptions;
+                }
+            }
+
+            const preserveScroll = options.preserveScroll === true;
+            const savedOffset = preserveScroll ? this.scroll.offset : null;
+            const animateScroll = options.animate === true && Number(options.shift);
+            const onScrollComplete = typeof options.onScrollComplete === 'function'
+                ? options.onScrollComplete
+                : null;
+            const finishScroll = () => {
+                onScrollComplete?.();
+            };
+
             this.#updateHeader();
             this.scroll.blocked = false;
             this.observe.un(this.period);
@@ -1770,7 +2102,8 @@ var RollDate = (function () {
                     this.dom.$days_block.innerHTML = this.render.dates(
                         days,
                         this.#selectedDates,
-                        this.options.selectType
+                        this.options.selectType,
+                        date => this.#getHighlightMeta(date)
                     );
                     break
 
@@ -1779,41 +2112,68 @@ var RollDate = (function () {
                     this.dom[`$${this.period}s_block`].innerHTML = this.render[`${this.period}s`](dates);
             }
 
-            const selectors = {
-                day: `.RollDate__calendar__day[data-year="${this.data.current_year}"][data-month="${this.data.current_month}"]`,
-                month: `.RollDate__calendar__month[data-year="${this.data.current_year}"][data-month="0"]`,
-                year: `.RollDate__calendar__year[data-decade="${this.data.current_decade}"][data-year="${this.data.current_year}"]`
-            };
-            let $firstEl = this.$container.querySelector(selectors[this.period]);
-            if (!$firstEl) {
-                const fallbacks = {
-                    day: `.RollDate__calendar__day[data-year="${this.data.current_year}"]`,
-                    month: `.RollDate__calendar__month[data-year="${this.data.current_year}"]`,
-                    year: `.RollDate__calendar__year[data-decade="${this.data.current_decade}"]`
+            const applyScroll = () => {
+                const $scrollBlock = this.dom.$body.querySelector('.RollDate__calendar__scrollblock');
+                const bodyHeight = this.dom.$body.clientHeight;
+                const blockHeight = $scrollBlock.clientHeight;
+
+                if (blockHeight <= bodyHeight) {
+                    this.scroll.setBaseOffset(bodyHeight - blockHeight);
+                    this.scroll.offset = 0;
+                    finishScroll();
+                    return
+                }
+
+                this.scroll.setBaseOffset(0);
+                this.scroll.resetMinScroll();
+
+                if (preserveScroll && savedOffset != null) {
+                    this.scroll.offset = Math.max(savedOffset, this.scroll.minScroll);
+                    finishScroll();
+                    return
+                }
+
+                const selectors = {
+                    day: `.RollDate__calendar__day[data-year="${this.data.current_year}"][data-month="${this.data.current_month}"]`,
+                    month: `.RollDate__calendar__month[data-year="${this.data.current_year}"][data-month="0"]`,
+                    year: `.RollDate__calendar__year[data-decade="${this.data.current_decade}"][data-year="${this.data.current_year}"]`
                 };
-                $firstEl = this.$container.querySelector(fallbacks[this.period]);
-            }
+                let $firstEl = this.$container.querySelector(selectors[this.period]);
+                if (!$firstEl) {
+                    const fallbacks = {
+                        day: `.RollDate__calendar__day[data-year="${this.data.current_year}"]`,
+                        month: `.RollDate__calendar__month[data-year="${this.data.current_year}"]`,
+                        year: `.RollDate__calendar__year[data-decade="${this.data.current_decade}"]`
+                    };
+                    $firstEl = this.$container.querySelector(fallbacks[this.period]);
+                }
 
-            if ($firstEl) {
-                setTimeout(() => {
-                    const $scrollBlock = this.dom.$body.querySelector('.RollDate__calendar__scrollblock');
-                    const bodyHeight = this.dom.$body.clientHeight;
-                    const blockHeight = $scrollBlock.clientHeight;
+                if (!$firstEl) {
+                    finishScroll();
+                    return
+                }
 
-                    if (blockHeight <= bodyHeight) {
-                        this.scroll.setBaseOffset(bodyHeight - blockHeight);
-                        this.scroll.offset = 0;
-                        return
-                    }
+                const containerRect = $scrollBlock.getBoundingClientRect();
+                const firstRect = $firstEl.getBoundingClientRect();
+                const firstRectOffset = -(firstRect.top - containerRect.top);
+                const targetOffset = Math.max(firstRectOffset, this.scroll.minScroll);
 
-                    this.scroll.setBaseOffset(0);
-                    const containerRect = $scrollBlock.getBoundingClientRect();
-                    const firstRect = $firstEl.getBoundingClientRect();
-                    const firstRectOffset = -(firstRect.top - containerRect.top);
-                    const minScroll = this.scroll.minScroll;
-                    this.scroll.offset = Math.max(firstRectOffset, minScroll);
-                }, 0);
-            }
+                if (animateScroll) {
+                    const slide = Math.min(bodyHeight * 0.38, 140);
+                    const startOffset = Math.max(
+                        Math.min(targetOffset + (options.shift > 0 ? slide : -slide), 0),
+                        this.scroll.minScroll
+                    );
+                    this.scroll.offset = startOffset;
+                    this.scroll.animateTo(targetOffset, { onComplete: finishScroll });
+                    return
+                }
+
+                this.scroll.offset = targetOffset;
+                finishScroll();
+            };
+
+            setTimeout(applyScroll, 0);
 
             this.observe.on(this.period, item => {
                 const cond = JSON.parse(item.dataset.bind).every(data => Number(item.dataset[data]) === this.data[`current_${data}`]);
@@ -1967,9 +2327,10 @@ var RollDate = (function () {
                     }
 
                     if (this.options.selectType === 'range') {
+                        const clickStamp = this.#toDateStamp(date);
                         const isClickInRange = this.#selectedDates.length === 2 &&
-                            date.getTime() >= this.#selectedDates[0].getTime() &&
-                            date.getTime() <= this.#selectedDates[1].getTime();
+                            clickStamp >= this.#toDateStamp(this.#selectedDates[0]) &&
+                            clickStamp <= this.#toDateStamp(this.#selectedDates[1]);
 
                         if (this.#selectedDates.length === 2 && !isClickInRange) {
                             this.#clearRangeSelection();
@@ -1980,7 +2341,8 @@ var RollDate = (function () {
                             $day.classList.add('RollDate__calendar__day--range-first');
                         } else {
                             const firstDate = this.#selectedDates[0];
-                            if (date.getTime() > firstDate.getTime()) {
+                            const firstStamp = this.#toDateStamp(firstDate);
+                            if (clickStamp > firstStamp) {
                                 this.#selectedDates = [firstDate, date];
 
                                 this.$container.querySelectorAll('[data-day]').forEach(dayEl => {
@@ -1989,17 +2351,17 @@ var RollDate = (function () {
                                         Number(dayEl.dataset.month),
                                         Number(dayEl.dataset.day)
                                     );
-                                    const time = dayDate.getTime();
+                                    const stamp = this.#toDateStamp(dayDate);
 
-                                    if (time === firstDate.getTime()) {
+                                    if (stamp === firstStamp) {
                                         dayEl.classList.add('RollDate__calendar__day--range-first');
-                                    } else if (time === date.getTime()) {
+                                    } else if (stamp === clickStamp) {
                                         dayEl.classList.add('RollDate__calendar__day--range-last');
-                                    } else if (time > firstDate.getTime() && time < date.getTime()) {
+                                    } else if (stamp > firstStamp && stamp < clickStamp) {
                                         dayEl.classList.add('RollDate__calendar__day--range-selected');
                                     }
                                 });
-                            } else if (date.getTime() < firstDate.getTime()) {
+                            } else if (clickStamp < firstStamp) {
                                 this.#selectedDates = [date];
                                 $day.classList.add('RollDate__calendar__day--range-first');
 
@@ -2017,12 +2379,13 @@ var RollDate = (function () {
                     }
 
                     if (this.options.selectType === 'multi') {
+                        const clickStamp = this.#toDateStamp(date);
                         const isSelected = this.#selectedDates.some(
-                            d => d.getTime() === date.getTime()
+                            d => this.#toDateStamp(d) === clickStamp
                         );
                         if (isSelected) {
                             this.#selectedDates = this.#selectedDates.filter(
-                                d => d.getTime() !== date.getTime()
+                                d => this.#toDateStamp(d) !== clickStamp
                             );
                             $day.classList.remove('RollDate__calendar__day--selected');
                         } else {
@@ -2068,6 +2431,8 @@ var RollDate = (function () {
                     e.preventDefault();
                     e.stopPropagation();
 
+                    if (this.#arrowAnimating) return
+
                     const direction = e.currentTarget?.dataset?.direction;
                     if (direction !== 'prev' && direction !== 'next') return
                     const shift = direction === 'prev' ? -1 : 1;
@@ -2104,8 +2469,15 @@ var RollDate = (function () {
                         this.data.current_decade = targetDecade;
                     }
 
+                    this.#arrowAnimating = true;
                     hapticTick(this.options.hapticFeedback !== false);
-                    this.#updateView(this.#viewNumber);
+                    this.#updateView(this.#viewNumber, {
+                        animate: true,
+                        shift,
+                        onScrollComplete: () => {
+                            this.#arrowAnimating = false;
+                        }
+                    });
                 });
             });
         }
@@ -2172,6 +2544,20 @@ var RollDate = (function () {
             return this.#selectedDates
         }
 
+        /** Visible calendar month (updates while scrolling). Month is 0–11. */
+        getViewMonth() {
+            return {
+                year: this.data.current_year,
+                month: this.data.current_month
+            }
+        }
+
+        /** First day of the month currently shown in the calendar. */
+        getViewDate() {
+            const { year, month } = this.getViewMonth();
+            return new Date(year, month, 1)
+        }
+
         setDisabledDates(dates = []) {
             this.options.disabledDates = Array.isArray(dates) ? dates : [];
             this.#disabledDateStamps = this.#buildDisabledDateSet(this.options.disabledDates);
@@ -2201,6 +2587,251 @@ var RollDate = (function () {
             return normalized ? this.#isDateDisabled(normalized) : false
         }
 
+        setHighlightDates(dates = []) {
+            this.options.highlightDates = Array.isArray(dates) ? dates : [];
+            this.#highlightDateMap = this.#buildHighlightDateMap(this.options.highlightDates);
+            this.#updateView(this.#viewNumber);
+        }
+
+        highlightDate(dateLike, color) {
+            const normalized = this.#normalizeDateInput(dateLike);
+            if (!normalized) return
+
+            const stamp = this.#toDateStamp(normalized);
+            const existing = this.#highlightDateMap.get(stamp) || [];
+            const nextColor = color == null || color === ''
+                ? null
+                : this.#sanitizeHighlightColor(color);
+
+            if (color != null && color !== '' && nextColor === undefined) return
+
+            existing.push(nextColor ?? null);
+            this.#highlightDateMap.set(stamp, existing);
+            this.options.highlightDates = this.#highlightMapToOptionsArray();
+            this.#updateView(this.#viewNumber);
+        }
+
+        unhighlightDate(dateLike, color) {
+            const normalized = this.#normalizeDateInput(dateLike);
+            if (!normalized) return
+
+            const stamp = this.#toDateStamp(normalized);
+            const existing = this.#highlightDateMap.get(stamp);
+            if (!existing?.length) return
+
+            if (color === undefined) {
+                this.#highlightDateMap.delete(stamp);
+            } else {
+                const target = color == null || color === ''
+                    ? null
+                    : this.#sanitizeHighlightColor(color);
+
+                const index = existing.findIndex(item => item === target);
+                if (index === -1) return
+
+                existing.splice(index, 1);
+                if (existing.length) {
+                    this.#highlightDateMap.set(stamp, existing);
+                } else {
+                    this.#highlightDateMap.delete(stamp);
+                }
+            }
+
+            this.options.highlightDates = this.#highlightMapToOptionsArray();
+            this.#updateView(this.#viewNumber);
+        }
+
+        isDateHighlighted(dateLike) {
+            const normalized = this.#normalizeDateInput(dateLike);
+            return normalized ? this.#isDateHighlighted(normalized) : false
+        }
+
+        getHighlightColors(dateLike) {
+            const normalized = this.#normalizeDateInput(dateLike);
+            if (!normalized) return []
+            return [...(this.#highlightDateMap.get(this.#toDateStamp(normalized)) || [])]
+        }
+
+        getHighlightColor(dateLike) {
+            return this.getHighlightColors(dateLike).find(color => color != null) ?? null
+        }
+
+        goToDate(dateLike) {
+            const normalized = this.#normalizeDateInput(dateLike);
+            if (!normalized) return false
+
+            const clamped = this.#clampDateToRange(
+                normalized,
+                this.options.minDate,
+                this.options.maxDate
+            );
+
+            this.data.current_year = clamped.getFullYear();
+            this.data.current_month = clamped.getMonth();
+            this.data.current_decade = getDecade(clamped.getFullYear());
+
+            if (this.#viewNumber !== 0) {
+                this.#viewNumber = 0;
+                for (const period of this.#viewPeriodNames) {
+                    this.$container.classList.remove('RollDate__calendar__type--' + period + 's');
+                }
+                this.$container.classList.add('RollDate__calendar__type--days');
+            }
+
+            this.#updateView(0);
+            return true
+        }
+
+        getValue() {
+            if (this.options.selectType === 'single') {
+                const date = this.#selectedDates[0];
+                return date ? new Date(date.getTime()) : null
+            }
+
+            return this.#selectedDates.map(date => new Date(date.getTime()))
+        }
+
+        setValue(value) {
+            if (value == null || value === '') {
+                this.clearSelection();
+                return true
+            }
+
+            if (this.options.selectType === 'single') {
+                const normalized = this.#normalizeDateInput(value);
+                if (!normalized || this.#isDateDisabled(normalized)) return false
+                this.#selectedDates = [this.#applyTimeToDate(normalized)];
+            } else if (this.options.selectType === 'range') {
+                const raw = Array.isArray(value) ? value : [value];
+                const parsed = raw
+                    .map(item => this.#normalizeDateInput(item))
+                    .filter(Boolean)
+                    .map(date => this.#clampDateToRange(date, this.options.minDate, this.options.maxDate))
+                    .filter(date => !this.#isDateDisabled(date));
+
+                if (!parsed.length) return false
+
+                let start = parsed[0];
+                let end = parsed.length > 1 ? parsed[1] : parsed[0];
+                if (start > end) [start, end] = [end, start];
+
+                this.#selectedDates = parsed.length > 1
+                    ? [this.#applyTimeToDate(start), this.#applyTimeToDate(end)]
+                    : [this.#applyTimeToDate(start)];
+            } else {
+                const raw = Array.isArray(value) ? value : [value];
+                const parsed = raw
+                    .map(item => this.#normalizeDateInput(item))
+                    .filter(Boolean)
+                    .map(date => this.#clampDateToRange(date, this.options.minDate, this.options.maxDate))
+                    .filter(date => !this.#isDateDisabled(date))
+                    .map(date => this.#applyTimeToDate(date));
+
+                if (!parsed.length) return false
+
+                const unique = [];
+                const seen = new Set();
+                parsed.forEach(date => {
+                    const stamp = this.#toDateStamp(date);
+                    if (seen.has(stamp)) return
+                    seen.add(stamp);
+                    unique.push(date);
+                });
+                this.#selectedDates = unique;
+            }
+
+            this.#paintSelection();
+            this.#notifySelectionChange();
+            this.#updateInputValue();
+            return true
+        }
+
+        #dayElementStamp(dayEl) {
+            return this.#toDateStamp(new Date(
+                Number(dayEl.dataset.year),
+                Number(dayEl.dataset.month),
+                Number(dayEl.dataset.day)
+            ))
+        }
+
+        #findDayElement(date) {
+            if (!(date instanceof Date)) return null
+            return this.$container.querySelector(
+                `.RollDate__calendar__day[data-year="${date.getFullYear()}"][data-month="${date.getMonth()}"][data-day="${date.getDate()}"]`
+            )
+        }
+
+        #paintRangeSelection() {
+            this.$container.querySelectorAll('[data-day]').forEach(dayEl => {
+                dayEl.classList.remove(
+                    'RollDate__calendar__day--range-first',
+                    'RollDate__calendar__day--range-last',
+                    'RollDate__calendar__day--range-selected'
+                );
+            });
+
+            if (!this.#selectedDates.length) return
+
+            const firstStamp = this.#toDateStamp(this.#selectedDates[0]);
+
+            if (this.#selectedDates.length === 1) {
+                this.#findDayElement(this.#selectedDates[0])
+                    ?.classList.add('RollDate__calendar__day--range-first');
+                return
+            }
+
+            const endStamp = this.#toDateStamp(this.#selectedDates[1]);
+
+            this.$container.querySelectorAll('[data-day]').forEach(dayEl => {
+                const stamp = this.#dayElementStamp(dayEl);
+
+                if (stamp === firstStamp) {
+                    dayEl.classList.add('RollDate__calendar__day--range-first');
+                } else if (stamp === endStamp) {
+                    dayEl.classList.add('RollDate__calendar__day--range-last');
+                } else if (stamp > firstStamp && stamp < endStamp) {
+                    dayEl.classList.add('RollDate__calendar__day--range-selected');
+                }
+            });
+        }
+
+        #paintSingleSelection() {
+            this.$container.querySelectorAll('[data-day]').forEach(dayEl => {
+                dayEl.classList.remove('RollDate__calendar__day--selected');
+            });
+
+            const selected = this.#selectedDates[0];
+            if (selected) {
+                this.#findDayElement(selected)?.classList.add('RollDate__calendar__day--selected');
+            }
+        }
+
+        #paintMultiSelection() {
+            const selectedStamps = new Set(this.#selectedDates.map(date => this.#toDateStamp(date)));
+
+            this.$container.querySelectorAll('[data-day]').forEach(dayEl => {
+                if (selectedStamps.has(this.#dayElementStamp(dayEl))) {
+                    dayEl.classList.add('RollDate__calendar__day--selected');
+                } else {
+                    dayEl.classList.remove('RollDate__calendar__day--selected');
+                }
+            });
+        }
+
+        #paintSelection() {
+            if (this.options.selectType === 'range') {
+                this.#paintRangeSelection();
+                return
+            }
+
+            if (this.options.selectType === 'multi') {
+                this.#paintMultiSelection();
+                return
+            }
+
+            this.#paintSingleSelection();
+        }
+
         #clearRangeSelection() {
             this.#selectedDates = [];
             this.$container.querySelectorAll('[data-day]').forEach(item => {
@@ -2371,6 +3002,10 @@ var RollDate = (function () {
             this.data.current_month = now.getMonth();
             this.data.current_decade = getDecade(now.getFullYear());
 
+            if (this.options.enableTime && this.timePicker) {
+                this.timePicker.setTime(now.getHours(), now.getMinutes());
+            }
+
             const selected = this.#applyTimeToDate(now);
 
             if (this.options.selectType === 'single') {
@@ -2378,7 +3013,8 @@ var RollDate = (function () {
             } else if (this.options.selectType === 'range') {
                 this.#selectedDates = [selected];
             } else if (this.options.selectType === 'multi') {
-                const exists = this.#selectedDates.some(d => d.getTime() === selected.getTime());
+                const selectedStamp = this.#toDateStamp(selected);
+                const exists = this.#selectedDates.some(d => this.#toDateStamp(d) === selectedStamp);
                 if (!exists) this.#selectedDates.push(selected);
             }
 
@@ -2398,9 +3034,10 @@ var RollDate = (function () {
                 this.#clearMultiSelection();
             } else {
                 this.#selectedDates = [];
+                this.$container.querySelectorAll('[data-day].RollDate__calendar__day--selected')
+                    .forEach(el => el.classList.remove('RollDate__calendar__day--selected'));
             }
 
-            this.#updateView(this.#viewNumber);
             this.#notifySelectionChange();
             this.#updateInputValue();
         }