@wpmoo/ui 1.0.0-rc.1 → 1.0.0-rc.3

package/dist/js/datepicker.min.js

@@ -0,0 +1,6 @@
+/*!
+ * Moo UI datepicker.min.js v1.0.0-rc.3 (https://ui.wpmoo.org/)
+ * Copyright 2026 WPMoo (https://wpmoo.org)
+ * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
+ */
+var x=new WeakMap,V=new WeakMap,M=new WeakMap,w="en",pt=1440*60*1e3,nt=new Date(2026,7,16),C=8;function H(i,t){return i?.nodeType===1&&!!i.matches?.(t)}function h(i,t,e,a,s){t&&(t.addEventListener(e,a,s),i.push({target:t,type:e,handler:a,options:s}))}function S(i){i.forEach(({target:t,type:e,handler:a,options:s})=>{t.removeEventListener(e,a,s)}),i.length=0}function d(i){if(!i)return null;if(i instanceof Date)return Number.isNaN(i.getTime())?null:new Date(i.getFullYear(),i.getMonth(),i.getDate());if(typeof i=="number")return d(new Date(i));let t=String(i).trim(),e=/^(\d{4})-(\d{2})-(\d{2})$/.exec(t);if(e){let a=new Date(Number(e[1]),Number(e[2])-1,Number(e[3]));return a.getFullYear()===Number(e[1])&&a.getMonth()===Number(e[2])-1&&a.getDate()===Number(e[3])?a:null}return null}function j(i){return String(i).padStart(2,"0")}function f(i){return`${i.getFullYear()}-${j(i.getMonth()+1)}-${j(i.getDate())}`}function g(i,t){return!i||!t?0:i.getTime()-t.getTime()}function k(i,t){return!!(i&&t&&f(i)===f(t))}function b(i,t){return new Date(i.getFullYear(),i.getMonth(),i.getDate()+t)}function q(i,t){let e=new Date(i.getFullYear(),i.getMonth()+t,1),a=Math.min(i.getDate(),$(e.getFullYear(),e.getMonth()));return new Date(e.getFullYear(),e.getMonth(),a)}function L(i=w){try{if(typeof Intl<"u"&&typeof Intl.Locale=="function"){let t=new Intl.Locale(i||w),e=t.weekInfo||t.getWeekInfo?.();if(Number.isInteger(e?.firstDay))return e.firstDay%7}}catch{}return 0}function rt(i=w){let t=L(i);return Array.from({length:7},(e,a)=>b(nt,(t+a)%7))}function y(i){return new Date(i.getFullYear(),i.getMonth(),1)}function $(i,t){return new Date(i,t+1,0).getDate()}function ot(i,t,e){return t&&g(i,t)<0?new Date(t):e&&g(i,e)>0?new Date(e):i}function lt(i){if(Array.isArray(i))return i.map(d).filter(Boolean).map(f);if(!i)return[];let t=String(i).trim();if(!t)return[];try{let e=JSON.parse(t);if(Array.isArray(e))return e.map(d).filter(Boolean).map(f)}catch{}return t.split(",").map(d).filter(Boolean).map(f)}function A(i,t=w){return i?new Intl.DateTimeFormat(t||w,{month:"short",day:"numeric",year:"numeric"}).format(i):""}function Q(i,t=w){return new Intl.DateTimeFormat(t||w,{month:"long",year:"numeric"}).format(i)}function R(i,t,e=w){if(i)return t==="yyyy-mm-dd"?f(i):t?A(i,e):new Date(i)}function z(i,t={}){let e=i.dataset||{},a=t.locale||e.datepickerLocale||e.calendarLocale||w,s=d(t.minDate||e.calendarMinDate||e.datepickerMinDate),n=d(t.maxDate||e.calendarMaxDate||e.datepickerMaxDate);return{locale:a,mode:t.mode||e.calendarMode||e.datepickerMode||"single",placeholder:t.placeholder||e.datepickerPlaceholder||"Pick a date",value:t.value||e.calendarValue||e.datepickerValue||"",startValue:t.startValue||e.calendarStartValue||e.datepickerStartValue||"",endValue:t.endValue||e.calendarEndValue||e.datepickerEndValue||"",minDate:s,maxDate:n,disabledDates:lt(t.disabledDates||e.calendarDisabledDates||e.datepickerDisabledDates),captionLayout:t.captionLayout||e.calendarCaptionLayout||"",showPresets:t.showPresets??(e.calendarShowPresets==="true"||e.datepickerShowPresets==="true")}}function m(i,t,e,a={},s=!1){return i.dispatchEvent(new t.CustomEvent(e,{bubbles:!0,cancelable:s,detail:a}))}function B(i,t){i&&(i.value=t||"")}function it(i,t){i&&(i.value=t||"")}function U(i,t,e){if(e){i.dataset.invalid="true",t.classList.add("is-invalid"),t.setAttribute("aria-invalid","true");return}delete i.dataset.invalid,t.classList.remove("is-invalid"),t.removeAttribute("aria-invalid")}function at(i,t,e){e?.required&&e.checkValidity()&&U(i,t,!1)}function X(i,t,e){return e<t?t:Math.min(Math.max(i,t),e)}function dt(i,t,e){let a=i?.ownerDocument?.defaultView||window,s=i?a.getComputedStyle(i).getPropertyValue(t).trim():"",n=Number.parseFloat(s);if(!Number.isFinite(n))return e;if(s.endsWith("rem")){let r=i.ownerDocument.documentElement,_=Number.parseFloat(a.getComputedStyle(r).fontSize);return Number.isFinite(_)?n*_:e}if(s.endsWith("em")){let r=Number.parseFloat(a.getComputedStyle(i).fontSize);return Number.isFinite(r)?n*r:e}return Number.isFinite(n)?n:e}function P(i,t){return!!(t&&(i._element.contains(t)||i._popover.contains(t)))}function Z(i){let t=i._element.closest("[data-bs-theme]")?.getAttribute("data-bs-theme")||i._document.documentElement.getAttribute("data-bs-theme"),e=getComputedStyle(i._trigger).direction;t&&i._popover.setAttribute("data-bs-theme",t),e==="rtl"&&i._popover.setAttribute("dir","rtl")}function ht(i){let t=i._popover;if(i._popoverPortal?.host?.parentElement===i._document.body){Z(i);return}let e=i._document.createElement("div");e.className="moo-ui",e.dataset.datepickerPortalHost="",i._popoverPortal={parent:t.parentNode,nextSibling:t.nextSibling,host:e,hadTheme:t.hasAttribute("data-bs-theme"),theme:t.getAttribute("data-bs-theme"),hadDirection:t.hasAttribute("dir"),direction:t.getAttribute("dir")},e.appendChild(t),i._document.body.appendChild(e),Z(i)}function K(i){let t=i._popoverPortal;if(!t)return;let e=i._popover;t.parent?.isConnected?t.nextSibling?.parentNode===t.parent?t.parent.insertBefore(e,t.nextSibling):t.parent.appendChild(e):e.remove(),t.host?.remove(),t.hadTheme?e.setAttribute("data-bs-theme",t.theme):e.removeAttribute("data-bs-theme"),t.hadDirection?e.setAttribute("dir",t.direction):e.removeAttribute("dir"),i._popoverPortal=null}function ct(i,t,e,a){let s=dt(e,"--moo-datepicker-popover-offset",6),n=getComputedStyle(i).direction;t.style.position="fixed",t.style.inset="auto",t.style.right="auto",t.style.bottom="auto",t.style.maxHeight="",t.style.overflowY="";let r=i.getBoundingClientRect(),_=t.getBoundingClientRect(),E=a.innerWidth,D=a.innerHeight,N=n==="rtl"?r.right-_.width:r.left,Y=X(N,C,E-_.width-C),I=r.bottom+s<=D?D-r.bottom-s-C:0,c=r.top-s-C,l=_.height>I&&c>I,u=l?"top":"bottom",o=Math.max(0,l?c:I),F=Math.min(_.height,o),v=l?r.top-s-F:r.bottom+s;t.style.left=`${Math.round(Y)}px`,t.style.top=`${Math.round(X(v,C,D-F-C))}px`,o>0&&(t.style.maxHeight=`${Math.floor(o)}px`,t.style.overflowY="auto"),t.dataset.datepickerPlacement=u}function ut(i){i.style.position="",i.style.inset="",i.style.right="",i.style.bottom="",i.style.left="",i.style.top="",i.style.maxHeight="",i.style.overflowY="",delete i.dataset.datepickerPlacement}function st(i){S(i._floatingListeners),ht(i);let t=()=>{i.isOpen()&&ct(i._trigger,i._popover,i._element,i._window)};i._positionPopover=t,t(),h(i._floatingListeners,i._window,"resize",t),h(i._floatingListeners,i._window,"scroll",t,!0),h(i._floatingListeners,i._document,"scroll",t,!0)}function O(i){S(i._floatingListeners),i._positionPopover=null,ut(i._popover),K(i)}function _t(i,t){return new Intl.DateTimeFormat(t||w,{month:"short"}).format(new Date(2026,i,1))}function ft(i,t,e){let a=i?i.getFullYear():e.getFullYear()-100,s=t?t.getFullYear():e.getFullYear()+20,n=[];for(let r=a;r<=s;r+=1)n.push(r);return n}function tt(i,t,e=""){let a=i.createElement("span");return a.className=e,a.setAttribute("aria-hidden","true"),a.textContent=t,a}var T=class i{static getInstance(t){return t?.nodeType===1&&V.get(t)||null}static getOrCreateInstance(t,e={}){return i.getInstance(t)||new i(t,e)}constructor(t,e={}){if(!H(t,"[data-calendar]"))throw new TypeError("MooCalendar requires a [data-calendar] root element.");let a=V.get(t);if(a)return a;this._element=t,this._document=t.ownerDocument,this._window=this._document.defaultView||window,this._listeners=[],this._disposed=!1,this._config=z(t,e),this._mode=this._config.mode==="range"?"range":"single",this._disabledDates=new Set(this._config.disabledDates),this._selectedDate=d(this._config.value),this._rangeStart=d(this._config.startValue),this._rangeEnd=d(this._config.endValue),this._activeDate=this._nearestEnabledDate(this._rangeStart||this._selectedDate||new Date),this._viewDate=y(this._activeDate),this._captionId=this._element.id?`${this._element.id}-caption`:`moo-calendar-caption-${Math.random().toString(36).slice(2)}`,this._labelId=this._element.id?`${this._element.id}-label`:`moo-calendar-label-${Math.random().toString(36).slice(2)}`,V.set(t,this),this._bindEvents(),this._render()}dispose(){this._disposed||(this._disposed=!0,S(this._listeners),this._element.replaceChildren(),V.get(this._element)===this&&V.delete(this._element))}getDate(t=void 0){return this._mode==="range"?this.getDates(t):R(this._selectedDate,t,this._config.locale)}getDates(t=void 0){return[R(this._rangeStart,t,this._config.locale),R(this._rangeEnd,t,this._config.locale)]}setDate(t,e={}){if(this._mode!=="single")return!1;let a=d(t);return!a||this._isDisabled(a)?!1:(this._selectedDate=a,this._activeDate=a,this._viewDate=y(a),this._render(),e.emit!==!1&&this._emitChange(!0),!0)}setDates(t,e,a={}){if(this._mode!=="range")return!1;let s=d(t),n=d(e);return s&&this._isDisabled(s)||n&&this._isDisabled(n)?!1:(this._rangeStart=s,this._rangeEnd=n,this._rangeStart&&this._rangeEnd&&g(this._rangeStart,this._rangeEnd)>0&&([this._rangeStart,this._rangeEnd]=[this._rangeEnd,this._rangeStart]),this._activeDate=this._rangeEnd||this._rangeStart||this._activeDate,this._viewDate=y(this._activeDate),this._render(),a.emit!==!1&&this._emitChange(!!(this._rangeStart&&this._rangeEnd)),!0)}clear(t={}){this._selectedDate=null,this._rangeStart=null,this._rangeEnd=null,this._render(),t.emit!==!1&&this._emitChange(!1)}focusActiveDay(){this._dayButton(this._activeDate)?.focus()}_bindEvents(){h(this._listeners,this._element,"click",t=>{let e=t.target,a=e.closest?.("[data-calendar-day]"),s=e.closest?.("[data-calendar-prev]"),n=e.closest?.("[data-calendar-next]"),r=e.closest?.("[data-calendar-preset]");s?this._changeMonth(-1,!0):n?this._changeMonth(1,!0):r?this._selectPreset(r.dataset.calendarPreset):a&&this._selectDate(d(a.dataset.calendarDay),!0)}),h(this._listeners,this._element,"keydown",t=>{t.target.closest?.("[data-calendar-day]")&&this._handleDayKeydown(t)}),h(this._listeners,this._element,"change",t=>{t.target.matches?.("[data-calendar-month]")&&this._setActiveMonth(this._viewDate.getFullYear(),Number(t.target.value),!0),t.target.matches?.("[data-calendar-year]")&&this._setActiveMonth(Number(t.target.value),this._viewDate.getMonth(),!0)})}_emitChange(t){m(this._element,this._window,"change.moo.calendar",{date:this._selectedDate?new Date(this._selectedDate):void 0,value:this._selectedDate?f(this._selectedDate):"",startDate:this._rangeStart?new Date(this._rangeStart):void 0,endDate:this._rangeEnd?new Date(this._rangeEnd):void 0,startValue:this._rangeStart?f(this._rangeStart):"",endValue:this._rangeEnd?f(this._rangeEnd):"",complete:t})}_changeMonth(t,e){let a=y(q(this._viewDate,t));this._setActiveMonth(a.getFullYear(),a.getMonth(),e)}_setActiveMonth(t,e,a=!1){let s=Math.min(this._activeDate.getDate(),$(t,e));this._activeDate=this._nearestEnabledDate(new Date(t,e,s)),this._viewDate=y(this._activeDate),this._render(),a&&this.focusActiveDay()}_selectPreset(t){if(!t)return;let e=new Date,a={today:0,tomorrow:1,"in-3-days":3,"in-a-week":7,"in-2-weeks":14};t in a&&this._selectDate(b(e,a[t]),!0)}_handleDayKeydown(t){let e=t.target.closest?.("[data-calendar-day]"),a=d(e?.dataset?.calendarDay);a&&g(a,this._activeDate)!==0&&(this._activeDate=a);let s={ArrowRight:1,ArrowLeft:-1,ArrowDown:7,ArrowUp:-7},n=null;if(t.key in s)n=b(this._activeDate,s[t.key]);else if(t.key==="Home"){let r=L(this._config.locale),_=(this._activeDate.getDay()-r+7)%7;n=b(this._activeDate,-_)}else if(t.key==="End"){let r=L(this._config.locale),_=(this._activeDate.getDay()-r+7)%7;n=b(this._activeDate,6-_)}else if(t.key==="PageUp")n=q(this._activeDate,-1);else if(t.key==="PageDown")n=q(this._activeDate,1);else if(t.key==="Enter"||t.key===" "||t.key==="Spacebar"){t.preventDefault(),this._selectDate(this._activeDate,!0);return}else return;t.preventDefault(),this._setActiveDate(n,!0,g(n,this._activeDate)<0?-1:1)}_setActiveDate(t,e=!1,a=0){let s=a===0?this._nearestEnabledDate(t):this._nextEnabledDate(t,a);this._activeDate=s,this._viewDate=y(s),this._render(),e&&this.focusActiveDay()}_nextEnabledDate(t,e){let a=d(t);if(!a)return this._activeDate;let s=e<0?-1:1;for(let n=0;n<366&&!(this._config.minDate&&g(a,this._config.minDate)<0||this._config.maxDate&&g(a,this._config.maxDate)>0);n+=1){if(!this._isDisabled(a))return a;a=b(a,s)}return this._activeDate}_nearestEnabledDate(t){let e=ot(d(t)||new Date,this._config.minDate,this._config.maxDate);if(!this._isDisabled(e))return e;let a=y(e),s=$(a.getFullYear(),a.getMonth());for(let n=1;n<=s;n+=1){let r=new Date(a.getFullYear(),a.getMonth(),n);if(!this._isDisabled(r))return r}return e}_selectDate(t,e){if(!(!t||this._isDisabled(t))){if(this._activeDate=t,this._viewDate=y(t),this._mode==="range"){!this._rangeStart||this._rangeEnd||g(t,this._rangeStart)<0?(this._rangeStart=t,this._rangeEnd=null):this._rangeEnd=t,this._render(),e&&this._emitChange(!!(this._rangeStart&&this._rangeEnd));return}this._selectedDate=t,this._render(),e&&this._emitChange(!0)}}_isDisabled(t){return!t||this._config.minDate&&g(t,this._config.minDate)<0||this._config.maxDate&&g(t,this._config.maxDate)>0?!0:this._disabledDates.has(f(t))}_isSelected(t){return this._mode==="range"?k(t,this._rangeStart)||k(t,this._rangeEnd):k(t,this._selectedDate)}_rangeState(t){return this._mode!=="range"||!this._rangeStart?"":k(t,this._rangeStart)?"start":k(t,this._rangeEnd)?"end":this._rangeStart&&this._rangeEnd&&g(t,this._rangeStart)>0&&g(t,this._rangeEnd)<0?"middle":""}_dayButton(t){return this._element.querySelector(`[data-calendar-day="${f(t)}"]`)}_render(){let t=this._document,e=t.createDocumentFragment(),a=t.createElement("div");a.className="moo-calendar__header";let s=t.createElement("button");s.className="btn btn-ghost btn-icon-sm moo-calendar__nav",s.type="button",s.dataset.calendarPrev="true",s.setAttribute("aria-label","Previous month"),s.appendChild(tt(t,"\u2039","moo-calendar__nav-icon"));let n=t.createElement("button");n.className="btn btn-ghost btn-icon-sm moo-calendar__nav",n.type="button",n.dataset.calendarNext="true",n.setAttribute("aria-label","Next month"),n.appendChild(tt(t,"\u203A","moo-calendar__nav-icon"));let r=t.createElement("div");if(r.className="moo-calendar__caption",r.id=this._captionId,r.setAttribute("aria-live","polite"),this._config.captionLayout==="dropdown"){let c=t.createElement("select");c.className="moo-calendar__select",c.dataset.calendarMonth="true",c.setAttribute("aria-label","Month");for(let u=0;u<12;u+=1){let o=t.createElement("option");o.value=String(u),o.textContent=_t(u,this._config.locale),o.selected=u===this._viewDate.getMonth(),c.appendChild(o)}let l=t.createElement("select");l.className="moo-calendar__select",l.dataset.calendarYear="true",l.setAttribute("aria-label","Year"),ft(this._config.minDate,this._config.maxDate,this._viewDate).forEach(u=>{let o=t.createElement("option");o.value=String(u),o.textContent=String(u),o.selected=u===this._viewDate.getFullYear(),l.appendChild(o)}),r.append(c,l)}else r.textContent=Q(this._viewDate,this._config.locale);a.append(s,r,n),e.appendChild(a);let _=t.createElement("div");_.id=this._labelId,_.className="visually-hidden",_.textContent=this._element.getAttribute("aria-label")||Q(this._viewDate,this._config.locale),e.appendChild(_);let E=t.createElement("div");E.className="moo-calendar__weekdays",E.setAttribute("role","row"),rt(this._config.locale).forEach(c=>{let l=t.createElement("span");l.className="moo-calendar__weekday",l.setAttribute("role","columnheader"),l.textContent=new Intl.DateTimeFormat(this._config.locale,{weekday:"narrow"}).format(c),E.appendChild(l)});let D=t.createElement("div");D.className="moo-calendar__grid",D.setAttribute("role","grid"),D.setAttribute("aria-labelledby",this._labelId),D.appendChild(E);let N=y(this._viewDate),Y=L(this._config.locale),I=b(N,-((N.getDay()-Y+7)%7));for(let c=0;c<6;c+=1){let l=t.createElement("div");l.className="moo-calendar__week",l.setAttribute("role","row");for(let u=0;u<7;u+=1){let o=b(I,c*7+u),F=f(o),v=t.createElement("div");v.className="moo-calendar__cell",v.setAttribute("role","gridcell");let p=t.createElement("button");p.className="moo-calendar__day",p.type="button",p.dataset.calendarDay=F,p.textContent=String(o.getDate()),p.tabIndex=k(o,this._activeDate)?0:-1,p.setAttribute("aria-label",A(o,this._config.locale));let G=this._isSelected(o);p.dataset.calendarSelected=String(G),v.setAttribute("aria-selected",G?"true":"false"),o.getMonth()!==this._viewDate.getMonth()&&(p.dataset.calendarOutside="true"),k(o,new Date)&&(p.dataset.calendarToday="true",p.setAttribute("aria-current","date"));let J=this._rangeState(o);J&&(p.dataset.calendarRange=J),this._isDisabled(o)&&(p.disabled=!0,p.setAttribute("aria-disabled","true")),v.appendChild(p),l.appendChild(v)}D.appendChild(l)}if(e.appendChild(D),this._config.showPresets){let c=t.createElement("div");c.className="moo-calendar__presets",[["today","Today"],["tomorrow","Tomorrow"],["in-3-days","In 3 days"],["in-a-week","In a week"],["in-2-weeks","In 2 weeks"]].forEach(([l,u])=>{let o=t.createElement("button");o.className="btn btn-outline-secondary btn-sm moo-calendar__preset",o.type="button",o.dataset.calendarPreset=l,o.textContent=u,c.appendChild(o)}),e.appendChild(c)}this._element.classList.add("moo-calendar"),this._element.dataset.calendar=this._element.dataset.calendar||"",this._element.dataset.calendarMode=this._mode,this._element.dataset.calendarActiveDate=f(this._activeDate),this._mode==="single"&&this._selectedDate?this._element.dataset.calendarValue=f(this._selectedDate):delete this._element.dataset.calendarValue,this._mode==="range"?(this._element.dataset.calendarStartValue=this._rangeStart?f(this._rangeStart):"",this._element.dataset.calendarEndValue=this._rangeEnd?f(this._rangeEnd):""):(delete this._element.dataset.calendarStartValue,delete this._element.dataset.calendarEndValue),this._element.replaceChildren(e)}},W=class i{static getInstance(t){return t?.nodeType===1&&x.get(t)||null}static getOrCreateInstance(t,e={}){return i.getInstance(t)||new i(t,e)}constructor(t,e={}){if(!H(t,"[data-datepicker]"))throw new TypeError("MooDatepicker requires a [data-datepicker] root element.");let a=x.get(t);if(a)return a;if(this._element=t,this._document=t.ownerDocument,this._window=this._document.defaultView||window,this._listeners=[],this._floatingListeners=[],this._disposed=!1,this._positionPopover=null,this._popoverPortal=null,this._trigger=t.querySelector("[data-datepicker-trigger]"),this._popover=t.querySelector("[data-datepicker-popover]"),this._label=t.querySelector("[data-datepicker-label]"),this._input=t.querySelector("[data-datepicker-input]")||t.querySelector('input[type="hidden"]'),this._validationInput=t.querySelector("[data-datepicker-validation]"),this._calendarRoot=t.querySelector("[data-calendar]"),!this._trigger||!this._popover||!this._label||!this._input||!this._calendarRoot)throw new TypeError("MooDatepicker requires a trigger, popover, calendar, and hidden input.");this._config=z(t,{...e,value:e.value||this._input.value||t.dataset.datepickerValue}),this._placeholder=this._config.placeholder,this._defaultValue=this._input.defaultValue||this._input.getAttribute("value")||"",this.calendar=T.getOrCreateInstance(this._calendarRoot,{...this._config,mode:"single",value:this._input.value||this._config.value}),x.set(t,this),this._syncFromCalendar(),this._bindEvents()}dispose(){this._disposed||(this._disposed=!0,S(this._listeners),this.hide(!1),O(this),K(this),S(this._floatingListeners),this.calendar?.dispose(),x.get(this._element)===this&&x.delete(this._element))}show(){this._trigger.disabled||this._element.dataset.datepickerDisabled==="true"||this.isOpen()||m(this._element,this._window,"show.moo.datepicker",{},!0)&&(this._popover.hidden=!1,this._popover.classList.add("show"),st(this),this._trigger.setAttribute("aria-expanded","true"),this.calendar.focusActiveDay(),m(this._element,this._window,"shown.moo.datepicker"))}hide(t=!0){this.isOpen()&&m(this._element,this._window,"hide.moo.datepicker",{},!0)&&(this._popover.hidden=!0,this._popover.classList.remove("show"),O(this),this._trigger.setAttribute("aria-expanded","false"),t&&this._trigger.focus(),m(this._element,this._window,"hidden.moo.datepicker"))}toggle(){this.isOpen()?this.hide():this.show()}isOpen(){return!this._popover.hidden}getDate(t=void 0){return this.calendar.getDate(t)}setDate(t,e={}){let a=this.calendar.setDate(t,{emit:!1});return a&&(this._syncFromCalendar(),e.emit!==!1&&this._emitChange()),a}clear(t={}){this.calendar.clear({emit:!1}),this._syncFromCalendar(),t.emit!==!1&&this._emitChange()}_bindEvents(){h(this._listeners,this._trigger,"click",()=>this.toggle()),h(this._listeners,this._popover,"keydown",e=>{e.key==="Escape"&&(e.preventDefault(),this.hide())}),h(this._listeners,this._document,"pointerdown",e=>{this.isOpen()&&!P(this,e.target)&&this._window.setTimeout(()=>{this.isOpen()&&!P(this,e.target)&&this.hide()},0)}),h(this._listeners,this._calendarRoot,"change.moo.calendar",e=>{this._syncFromCalendar(),this._emitChange(),e.detail.complete&&this.hide()});let t=this._input.form||this._element.closest("form");h(this._listeners,this._validationInput,"invalid",e=>{e.preventDefault(),U(this._element,this._trigger,!0),this._trigger.focus({preventScroll:!0})}),h(this._listeners,t,"reset",()=>{this._window.setTimeout(()=>{this._defaultValue?this.setDate(this._defaultValue,{emit:!1}):this.clear({emit:!1})},0)})}_syncFromCalendar(){let t=this.calendar.getDate("yyyy-mm-dd")||"";B(this._input,t),it(this._validationInput,t),at(this._element,this._trigger,this._validationInput),this._element.dataset.datepickerValue=t,this._label.textContent=t?A(d(t),this._config.locale):this._placeholder}_emitChange(){m(this._element,this._window,"change.moo.datepicker",{date:this.getDate(),value:this.getDate("yyyy-mm-dd")||""})}},et=class i{static getInstance(t){return t?.nodeType===1&&M.get(t)||null}static getOrCreateInstance(t,e={}){return i.getInstance(t)||new i(t,e)}constructor(t,e={}){if(!H(t,"[data-datepicker-range]"))throw new TypeError("MooDateRangePicker requires a [data-datepicker-range] root element.");let a=M.get(t);if(a)return a;if(this._element=t,this._document=t.ownerDocument,this._window=this._document.defaultView||window,this._listeners=[],this._floatingListeners=[],this._disposed=!1,this._positionPopover=null,this._popoverPortal=null,this._trigger=t.querySelector("[data-datepicker-trigger]"),this._popover=t.querySelector("[data-datepicker-popover]"),this._label=t.querySelector("[data-datepicker-label]"),this._startInput=t.querySelector("[data-datepicker-range-start]"),this._endInput=t.querySelector("[data-datepicker-range-end]"),this._validationInput=t.querySelector("[data-datepicker-validation]"),this._calendarRoot=t.querySelector("[data-calendar]"),!this._trigger||!this._popover||!this._label||!this._startInput||!this._endInput||!this._calendarRoot)throw new TypeError("MooDateRangePicker requires a trigger, popover, calendar, and start/end hidden inputs.");this._config=z(t,{...e,mode:"range",startValue:e.startValue||this._startInput.value||t.dataset.datepickerStartValue,endValue:e.endValue||this._endInput.value||t.dataset.datepickerEndValue}),this._placeholder=this._config.placeholder,this._defaultStartValue=this._startInput.defaultValue||this._startInput.getAttribute("value")||"",this._defaultEndValue=this._endInput.defaultValue||this._endInput.getAttribute("value")||"",this.calendar=T.getOrCreateInstance(this._calendarRoot,this._config),M.set(t,this),this._syncFromCalendar(),this._bindEvents()}dispose(){this._disposed||(this._disposed=!0,S(this._listeners),this.hide(!1),O(this),K(this),S(this._floatingListeners),this.calendar?.dispose(),M.get(this._element)===this&&M.delete(this._element))}show(){this._trigger.disabled||this._element.dataset.datepickerDisabled==="true"||this.isOpen()||m(this._element,this._window,"show.moo.datepicker",{},!0)&&(this._popover.hidden=!1,this._popover.classList.add("show"),st(this),this._trigger.setAttribute("aria-expanded","true"),this.calendar.focusActiveDay(),m(this._element,this._window,"shown.moo.datepicker"))}hide(t=!0){this.isOpen()&&m(this._element,this._window,"hide.moo.datepicker",{},!0)&&(this._popover.hidden=!0,this._popover.classList.remove("show"),O(this),this._trigger.setAttribute("aria-expanded","false"),t&&this._trigger.focus(),m(this._element,this._window,"hidden.moo.datepicker"))}toggle(){this.isOpen()?this.hide():this.show()}isOpen(){return!this._popover.hidden}getDates(t=void 0){return this.calendar.getDates(t)}setDates(t,e,a={}){let s=this.calendar.setDates(t,e,{emit:!1});return s&&(this._syncFromCalendar(),a.emit!==!1&&this._emitChange()),s}clear(t={}){this.calendar.clear({emit:!1}),this._syncFromCalendar(),t.emit!==!1&&this._emitChange()}_bindEvents(){h(this._listeners,this._trigger,"click",()=>this.toggle()),h(this._listeners,this._popover,"keydown",a=>{a.key==="Escape"&&(a.preventDefault(),this.hide())}),h(this._listeners,this._document,"pointerdown",a=>{this.isOpen()&&!P(this,a.target)&&this._window.setTimeout(()=>{this.isOpen()&&!P(this,a.target)&&this.hide()},0)});let t=()=>{this._window.setTimeout(()=>{this.isOpen()&&!P(this,this._document.activeElement)&&this.hide(!1)},0)};h(this._listeners,this._element,"focusout",t),h(this._listeners,this._popover,"focusout",t),h(this._listeners,this._calendarRoot,"change.moo.calendar",a=>{this._syncFromCalendar(),this._emitChange(),a.detail.complete?this.hide():this.calendar.focusActiveDay()});let e=this._startInput.form||this._element.closest("form");h(this._listeners,this._validationInput,"invalid",a=>{a.preventDefault(),U(this._element,this._trigger,!0),this._trigger.focus({preventScroll:!0})}),h(this._listeners,e,"reset",()=>{this._window.setTimeout(()=>{this.setDates(this._defaultStartValue,this._defaultEndValue,{emit:!1})},0)})}_syncFromCalendar(){let[t="",e=""]=this.calendar.getDates("yyyy-mm-dd");B(this._startInput,t||""),B(this._endInput,e||""),it(this._validationInput,t&&e?`${t} - ${e}`:""),at(this._element,this._trigger,this._validationInput),this._element.dataset.datepickerStartValue=t||"",this._element.dataset.datepickerEndValue=e||"",t&&e?this._label.textContent=`${A(d(t),this._config.locale)} - ${A(d(e),this._config.locale)}`:t?this._label.textContent=A(d(t),this._config.locale):this._label.textContent=this._placeholder}_emitChange(){let[t,e]=this.getDates(),[a="",s=""]=this.getDates("yyyy-mm-dd");m(this._element,this._window,"change.moo.datepicker",{startDate:t,endDate:e,startValue:a,endValue:s})}};export{T as MooCalendar,et as MooDateRangePicker,W as default};

package/dist/js/sidebar.js

@@ -1,3 +1,8 @@
+/*!
+ * Moo UI sidebar.js v1.0.0-rc.3 (https://ui.wpmoo.org/)
+ * Copyright 2026 WPMoo (https://wpmoo.org)
+ * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
+ */
 const instances = new WeakMap();
 
 export default class Sidebar {
@@ -39,7 +44,8 @@ export default class Sidebar {
     instances.set(element, this);
     this._bindEvents();
     this._restoreState();
-    this._element.setAttribute("data-moo-sidebar-ready", "");
+    this._scrollActiveItemIntoView();
+    this._element.setAttribute("data-sidebar-ready", "");
     this._observeDirection();
   }
 
@@ -51,15 +57,15 @@ export default class Sidebar {
     this._directionObserver?.disconnect();
     this._closeFlyouts();
     this._element
-      .querySelectorAll("[data-moo-sidebar-dropdown-positioned]")
+      .querySelectorAll("[data-sidebar-dropdown-positioned]")
       .forEach((item) => this._clearDropdownPosition(item));
     this._element
-      .querySelectorAll("[data-moo-sidebar-tooltip]")
+      .querySelectorAll("[data-sidebar-tooltip]")
       .forEach((control) => this._disposeTooltip(control));
     this._offcanvas?.dispose();
     this._offcanvas = null;
     this._offcanvasTrigger = null;
-    this._element.removeAttribute("data-moo-sidebar-ready");
+    this._element.removeAttribute("data-sidebar-ready");
     instances.delete(this._element);
   }
 
@@ -79,7 +85,7 @@ export default class Sidebar {
   }
 
   _isCollapsed() {
-    return this._isDesktop() && this._element.dataset.mooSidebarState === "collapsed";
+    return this._isDesktop() && this._element.dataset.sidebarState === "collapsed";
   }
 
   _trigger(name, detail = {}) {
@@ -108,7 +114,7 @@ export default class Sidebar {
   }
 
   _restoreState() {
-    const key = this._element.dataset.mooSidebarKey;
+    const key = this._element.dataset.sidebarKey;
     let stored = null;
     if (key) {
       try {
@@ -120,19 +126,55 @@ export default class Sidebar {
     const initial =
       stored === "collapsed" || stored === "expanded"
         ? stored
-        : this._element.dataset.mooSidebarState === "collapsed"
+        : this._element.dataset.sidebarState === "collapsed"
           ? "collapsed"
           : "expanded";
     this._setState(initial, false, false);
   }
 
+  _scrollActiveItemIntoView() {
+    const activeRoute = this._element.querySelector(
+      '[data-slot="sidebar-content"] a[data-slot="sidebar-menu-button"][aria-current="page"], ' +
+        '[data-slot="sidebar-content"] a.sidebar-menu-button[aria-current="page"], ' +
+        '[data-slot="sidebar-content"] a.sidebar-menu-button.active'
+    );
+    const active = activeRoute || this._element.querySelector(
+      '[data-slot="sidebar-content"] [data-slot="sidebar-menu-button"][aria-current="page"], ' +
+        '[data-slot="sidebar-content"] .sidebar-menu-button[aria-current="page"], ' +
+        '[data-slot="sidebar-content"] .sidebar-menu-button.active'
+    );
+    const content = active?.closest?.('[data-slot="sidebar-content"]');
+    if (!active || !content || content.clientHeight <= 0) {
+      return;
+    }
+    const maxScrollTop = content.scrollHeight - content.clientHeight;
+    if (maxScrollTop <= 0) {
+      return;
+    }
+
+    const contentRect = content.getBoundingClientRect();
+    const activeRect = active.getBoundingClientRect();
+    if (contentRect.height <= 0 || activeRect.height <= 0) {
+      return;
+    }
+
+    const targetScrollTop =
+      content.scrollTop +
+      activeRect.top -
+      contentRect.top -
+      (content.clientHeight - activeRect.height) / 2;
+    content.scrollTop = Math.round(
+      Math.min(Math.max(targetScrollTop, 0), maxScrollTop)
+    );
+  }
+
   _setState(state, persist = true, emit = true) {
     const next = state === "collapsed" ? "collapsed" : "expanded";
-    const previous = this._element.dataset.mooSidebarState;
-    this._element.dataset.mooSidebarState = next;
-    const key = this._element.dataset.mooSidebarKey;
+    const previous = this._element.dataset.sidebarState;
+    this._element.dataset.sidebarState = next;
+    const key = this._element.dataset.sidebarKey;
     if (key === "catalog-shell") {
-      this._root.dataset.mooSidebarCatalogState = next;
+      this._root.dataset.sidebarCatalogState = next;
     }
     if (persist && key) {
       try {
@@ -155,16 +197,16 @@ export default class Sidebar {
 
   _toggle() {
     this._setState(
-      this._element.dataset.mooSidebarState === "collapsed" ? "expanded" : "collapsed"
+      this._element.dataset.sidebarState === "collapsed" ? "expanded" : "collapsed"
     );
   }
 
   _syncControls() {
     const expanded = this._isDesktop()
-      ? this._element.dataset.mooSidebarState === "expanded"
+      ? this._element.dataset.sidebarState === "expanded"
       : this._sidebar?.classList.contains("show") || false;
     this._element
-      .querySelectorAll("[data-moo-sidebar-trigger], [data-moo-sidebar-rail]")
+      .querySelectorAll("[data-sidebar-trigger], [data-sidebar-rail]")
       .forEach((control) => control.setAttribute("aria-expanded", String(expanded)));
   }
 
@@ -186,7 +228,7 @@ export default class Sidebar {
     if (!item) {
       return;
     }
-    delete item.dataset.mooSidebarDropdownPositioned;
+    delete item.dataset.sidebarDropdownPositioned;
     item.style.removeProperty("--moo-sidebar-dropdown-block-start");
     item.style.removeProperty("--moo-sidebar-dropdown-inline-start");
   }
@@ -237,7 +279,7 @@ export default class Sidebar {
       "--moo-sidebar-dropdown-inline-start",
       `${Math.round(inlineStart)}px`
     );
-    item.dataset.mooSidebarDropdownPositioned = "";
+    item.dataset.sidebarDropdownPositioned = "";
   }
 
   _removeFlyoutPortal() {
@@ -281,7 +323,7 @@ export default class Sidebar {
     flyout.removeAttribute("id");
     flyout.classList.remove("collapse", "show", "collapsing");
     flyout.classList.add("sidebar-menu-flyout");
-    flyout.dataset.mooSidebarFlyout = "";
+    flyout.dataset.sidebarFlyout = "";
     flyout.removeAttribute("style");
     flyout.style.setProperty("--moo-sidebar-flyout-block-start", `${Math.round(rect.top)}px`);
     flyout.style.setProperty(
@@ -328,7 +370,7 @@ export default class Sidebar {
     }
     const collapsed = this._isCollapsed();
     const placement = this._root.dir === "rtl" ? "left" : "right";
-    this._element.querySelectorAll("[data-moo-sidebar-tooltip]").forEach((control) => {
+    this._element.querySelectorAll("[data-sidebar-tooltip]").forEach((control) => {
       this._disposeTooltip(control);
       if (
         !collapsed ||
@@ -343,7 +385,7 @@ export default class Sidebar {
       // state-driven Sidebar tooltip instead.
       const anchor = this._tooltipAnchor(control);
       new Tooltip(anchor, {
-        title: control.getAttribute("data-moo-sidebar-tooltip"),
+        title: control.getAttribute("data-sidebar-tooltip"),
         placement,
         container: "body",
         trigger: "hover focus",
@@ -386,7 +428,7 @@ export default class Sidebar {
     this._listen(this._window, "resize", () => {
       this._closeFlyouts();
       this._element
-        .querySelectorAll("[data-moo-sidebar-dropdown-positioned]")
+        .querySelectorAll("[data-sidebar-dropdown-positioned]")
         .forEach((item) => this._clearDropdownPosition(item));
       this._syncControls();
       this._syncTooltips();
@@ -397,18 +439,18 @@ export default class Sidebar {
     if (!(target instanceof this._window.Element) || !this._element.contains(target)) {
       return null;
     }
-    if (target.matches('[data-bs-toggle="dropdown"][data-moo-sidebar-tooltip]')) {
+    if (target.matches('[data-bs-toggle="dropdown"][data-sidebar-tooltip]')) {
       return target;
     }
     return target.querySelector?.(
-      '[data-bs-toggle="dropdown"][data-moo-sidebar-tooltip]'
+      '[data-bs-toggle="dropdown"][data-sidebar-tooltip]'
     ) || null;
   }
 
   _handleControlClick(event) {
     const target = event.target;
     const control = target instanceof this._window.Element
-      ? target.closest("[data-moo-sidebar-trigger], [data-moo-sidebar-rail]")
+      ? target.closest("[data-sidebar-trigger], [data-sidebar-rail]")
       : null;
     if (!control || !this._element.contains(control)) {
       return;
@@ -419,7 +461,7 @@ export default class Sidebar {
       this._toggle();
       return;
     }
-    if (!control.matches("[data-moo-sidebar-trigger]")) {
+    if (!control.matches("[data-sidebar-trigger]")) {
       return;
     }
     const sidebar = this._document.getElementById(control.getAttribute("aria-controls"));
@@ -478,7 +520,7 @@ export default class Sidebar {
     }
     const preferred =
       this._document.querySelector(
-        '[data-slot="sidebar-wrapper"][data-moo-sidebar-key]'
+        '[data-slot="sidebar-wrapper"][data-sidebar-key]'
       ) || this._document.querySelector('[data-slot="sidebar-wrapper"]');
     if (preferred !== this._element) {
       return;

package/dist/js/slider.js

@@ -0,0 +1,324 @@
+/*!
+ * Moo UI slider.js v1.0.0-rc.3 (https://ui.wpmoo.org/)
+ * Copyright 2026 WPMoo (https://wpmoo.org)
+ * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
+ */
+const instances = new WeakMap();
+
+function asNumber(value, fallback) {
+  const number = Number(value);
+  return Number.isFinite(number) ? number : fallback;
+}
+
+function inputMinimum(input) {
+  return asNumber(input.min, 0);
+}
+
+function inputMaximum(input) {
+  return asNumber(input.max, 100);
+}
+
+function inputStep(input) {
+  if (!input.step || input.step === "any") {
+    return 1;
+  }
+  const step = Number(input.step);
+  return Number.isFinite(step) && step > 0 ? step : 1;
+}
+
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+
+function decimalPlaces(value) {
+  const text = String(value);
+  if (!text.includes(".")) {
+    return 0;
+  }
+  return text.split(".").at(-1).length;
+}
+
+function snapToStep(value, input) {
+  const min = inputMinimum(input);
+  const max = inputMaximum(input);
+  if (input.step === "any") {
+    return Number(clamp(value, min, max).toFixed(4));
+  }
+  const step = inputStep(input);
+  const snapped = min + Math.round((value - min) / step) * step;
+  const precision = Math.max(decimalPlaces(step), decimalPlaces(min));
+  return clamp(Number(snapped.toFixed(precision)), min, max);
+}
+
+function valuePercent(input) {
+  const min = inputMinimum(input);
+  const max = inputMaximum(input);
+  if (max <= min) {
+    return 0;
+  }
+  return ((asNumber(input.value, min) - min) / (max - min)) * 100;
+}
+
+function displayValue(input) {
+  return input.value || String(inputMinimum(input));
+}
+
+export default class MooSlider {
+  static getInstance(element) {
+    return element?.nodeType === 1 ? instances.get(element) || null : null;
+  }
+
+  static getOrCreateInstance(element, config = {}) {
+    return MooSlider.getInstance(element) || new MooSlider(element, config);
+  }
+
+  constructor(element, config = {}) {
+    if (element?.nodeType !== 1 || !element.matches("[data-slider]")) {
+      throw new TypeError("MooSlider requires a [data-slider] root element.");
+    }
+    const existing = instances.get(element);
+    if (existing) {
+      return existing;
+    }
+
+    this._element = element;
+    this._document = element.ownerDocument;
+    this._window = this._document.defaultView;
+    this._config = { ...config };
+    this._listeners = [];
+    this._dragListeners = [];
+    this._draggingInput = null;
+    this._disposed = false;
+    this._inputs = Array.from(
+      element.querySelectorAll(':scope input[type="range"][data-slider-input]')
+    );
+    this._track = element.querySelector("[data-slider-track]");
+    this._output = element.querySelector("[data-slider-output]");
+
+    if (this._inputs.length < 1 || this._inputs.length > 2) {
+      throw new TypeError("MooSlider requires one or two native range inputs.");
+    }
+    if (!this._track) {
+      throw new TypeError("MooSlider requires a [data-slider-track] element.");
+    }
+
+    instances.set(element, this);
+    this._bindEvents();
+    this._sync();
+  }
+
+  dispose() {
+    if (this._disposed) return;
+    this._disposed = true;
+    this._clearDragListeners();
+    this._clearPointerFocus();
+    this._listeners.forEach(({ target, type, handler, options }) => {
+      target.removeEventListener(type, handler, options);
+    });
+    this._listeners = [];
+    if (instances.get(this._element) === this) {
+      instances.delete(this._element);
+    }
+  }
+
+  _listen(target, type, handler, options) {
+    if (!target) {
+      return;
+    }
+    target.addEventListener(type, handler, options);
+    this._listeners.push({ target, type, handler, options });
+  }
+
+  _listenDuringDrag(target, type, handler, options) {
+    if (!target) {
+      return;
+    }
+    target.addEventListener(type, handler, options);
+    this._dragListeners.push({ target, type, handler, options });
+  }
+
+  _clearDragListeners() {
+    this._dragListeners.forEach(({ target, type, handler, options }) => {
+      target.removeEventListener(type, handler, options);
+    });
+    this._dragListeners = [];
+    this._draggingInput = null;
+    this._element.removeAttribute("data-slider-dragging");
+  }
+
+  _bindEvents() {
+    this._inputs.forEach((input) => {
+      this._listen(input, "input", () => this._sync(input));
+      this._listen(input, "change", () => {
+        this._sync(input);
+        this._trigger("change");
+      });
+      this._listen(input, "keydown", () => this._clearPointerFocus());
+      this._listen(input, "focusout", () => this._clearPointerFocus());
+    });
+    const forms = new Set(
+      this._inputs
+        .map((input) => input.form || input.closest?.("form"))
+        .filter(Boolean),
+    );
+    forms.forEach((form) => {
+      this._listen(form, "reset", () => {
+        this._window.setTimeout(() => this._sync(), 0);
+      });
+    });
+    this._listen(this._track, "pointerdown", (event) => this._handleTrackPointer(event));
+  }
+
+  _trigger(name) {
+    this._element.dispatchEvent(
+      new this._window.CustomEvent(`${name}.moo.slider`, {
+        bubbles: true,
+      })
+    );
+  }
+
+  _isRange() {
+    return this._inputs.length === 2;
+  }
+
+  _sync(changedInput = null) {
+    if (this._isRange()) {
+      const [startInput, endInput] = this._inputs;
+      const start = asNumber(startInput.value, inputMinimum(startInput));
+      const end = asNumber(endInput.value, inputMaximum(endInput));
+      if (start > end) {
+        if (changedInput === endInput) {
+          endInput.value = startInput.value;
+        } else {
+          startInput.value = endInput.value;
+        }
+      }
+      this._writeFill(valuePercent(startInput), valuePercent(endInput));
+      this._writeOutput(`${displayValue(startInput)} - ${displayValue(endInput)}`);
+      this._syncAria(startInput);
+      this._syncAria(endInput);
+      return;
+    }
+
+    const input = this._inputs[0];
+    this._writeFill(0, valuePercent(input));
+    this._writeOutput(displayValue(input));
+    this._syncAria(input);
+  }
+
+  _syncAria(input) {
+    input.setAttribute("aria-valuemin", String(inputMinimum(input)));
+    input.setAttribute("aria-valuemax", String(inputMaximum(input)));
+    input.setAttribute("aria-valuenow", displayValue(input));
+  }
+
+  _writeFill(start, end) {
+    const clampedStart = clamp(start, 0, 100);
+    const clampedEnd = clamp(end, 0, 100);
+    this._element.style.setProperty("--moo-slider-start", `${Math.min(clampedStart, clampedEnd)}%`);
+    this._element.style.setProperty("--moo-slider-end", `${Math.max(clampedStart, clampedEnd)}%`);
+  }
+
+  _writeOutput(value) {
+    if (this._output) {
+      this._output.textContent = value;
+    }
+  }
+
+  _handleTrackPointer(event) {
+    if (event.button !== undefined && event.button !== 0) {
+      return;
+    }
+    const enabledInputs = this._inputs.filter((input) => !input.disabled);
+    if (!enabledInputs.length) {
+      return;
+    }
+    event.preventDefault?.();
+    const percent = this._pointerPercent(event);
+    const target = this._nearestInput(percent * 100, enabledInputs);
+    this._setPointerFocus();
+    this._startDrag(target, event);
+    this._setInputFromPointer(target, event);
+  }
+
+  _setPointerFocus() {
+    this._element.setAttribute("data-slider-pointer-focus", "true");
+  }
+
+  _clearPointerFocus() {
+    this._element.removeAttribute("data-slider-pointer-focus");
+  }
+
+  _startDrag(input, event) {
+    this._clearDragListeners();
+    this._draggingInput = input;
+    this._element.setAttribute("data-slider-dragging", "true");
+    this._track.setPointerCapture?.(event.pointerId);
+
+    const pointerId = event.pointerId;
+    const samePointer = (nextEvent) => pointerId === undefined || nextEvent.pointerId === pointerId;
+    const onMove = (moveEvent) => {
+      if (!samePointer(moveEvent) || this._draggingInput !== input) {
+        return;
+      }
+      moveEvent.preventDefault?.();
+      this._setInputFromPointer(input, moveEvent);
+    };
+    const onEnd = (endEvent) => {
+      if (!samePointer(endEvent) || this._draggingInput !== input) {
+        return;
+      }
+      endEvent.preventDefault?.();
+      this._setInputFromPointer(input, endEvent, false);
+      input.dispatchEvent(new this._window.Event("change", { bubbles: true }));
+      this._track.releasePointerCapture?.(pointerId);
+      this._clearDragListeners();
+    };
+
+    this._listenDuringDrag(this._document, "pointermove", onMove);
+    this._listenDuringDrag(this._document, "pointerup", onEnd);
+    this._listenDuringDrag(this._document, "pointercancel", onEnd);
+  }
+
+  _setInputFromPointer(input, event, emitInput = true) {
+    const percent = this._pointerPercent(event);
+    const min = inputMinimum(input);
+    const max = inputMaximum(input);
+    input.value = String(snapToStep(min + percent * (max - min), input));
+    input.focus({ preventScroll: true });
+    this._sync(input);
+    if (emitInput) {
+      input.dispatchEvent(new this._window.Event("input", { bubbles: true }));
+    }
+  }
+
+  _pointerPercent(event) {
+    const rect = this._track.getBoundingClientRect();
+    const orientation = this._element.dataset.sliderOrientation || "horizontal";
+    if (orientation === "vertical") {
+      return clamp((rect.bottom - event.clientY) / (rect.height || 1), 0, 1);
+    }
+    return this._horizontalPointerPercent(event, rect);
+  }
+
+  _horizontalPointerPercent(event, rect) {
+    const direction = this._window.getComputedStyle?.(this._element).direction;
+    const offset = direction === "rtl" ? rect.right - event.clientX : event.clientX - rect.left;
+    return clamp(offset / (rect.width || 1), 0, 1);
+  }
+
+  _nearestInput(percent, inputs) {
+    if (inputs.length === 1) {
+      return inputs[0];
+    }
+    const [startInput, endInput] = inputs;
+    const startPercent = valuePercent(startInput);
+    const endPercent = valuePercent(endInput);
+    const startDistance = Math.abs(startPercent - percent);
+    const endDistance = Math.abs(endPercent - percent);
+    if (startDistance === endDistance) {
+      return percent >= startPercent ? endInput : startInput;
+    }
+    return endDistance < startDistance ? endInput : startInput;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wpmoo/ui",
-  "version": "1.0.0-rc.1",
+  "version": "1.0.0-rc.3",
   "description": "Bootstrap markup. shadcn feel. A frontend-framework-free component system for server-rendered apps.",
   "license": "MIT",
   "author": "WPMoo (https://wpmoo.org)",
@@ -31,7 +31,12 @@
     "./sidebar.js": "./dist/js/sidebar.js",
     "./context-menu.js": "./dist/js/context-menu.js",
     "./datatable.js": "./dist/js/datatable.js",
-    "./scss/facade-settings": "./scss/_facade-settings.scss",
+    "./slider.js": "./dist/js/slider.js",
+    "./chart.js": "./dist/js/chart.js",
+    "./chart.min.js": "./dist/js/chart.min.js",
+    "./datepicker.js": "./dist/js/datepicker.js",
+    "./datepicker.min.js": "./dist/js/datepicker.min.js",
+    "./scss/config": "./scss/_config.scss",
     "./certification.json": "./certification.json",
     "./package.json": "./package.json"
   },
@@ -44,12 +49,17 @@
     "dist/js/sidebar.js",
     "dist/js/context-menu.js",
     "dist/js/datatable.js",
-    "scss/_facade-settings.scss",
-    "scss/settings/_facade_public.scss",
+    "dist/js/slider.js",
+    "dist/js/chart.js",
+    "dist/js/chart.min.js",
+    "dist/js/datepicker.js",
+    "dist/js/datepicker.min.js",
+    "scss/_config.scss",
     "certification.json",
     "README.md",
     "LICENSE",
-    "ASSET_LICENSE.md"
+    "ASSET_LICENSE.md",
+    "THIRD_PARTY_NOTICES.md"
   ],
   "peerDependencies": {
     "bootstrap": ">=5.3.0 <5.4"
@@ -74,7 +84,9 @@
     "access": "public"
   },
   "devDependencies": {
-    "axe-core": "4.12.1",
-    "wrangler": "^4.119.0"
+    "axe-core": "4.13.0",
+    "chart.js": "4.5.1",
+    "esbuild": "0.28.1",
+    "wrangler": "^4.120.0"
   }
 }