@wpmoo/ui 2.1.0 → 2.1.1

package/README.md

@@ -275,6 +275,10 @@ calm.
 
 ## Status And Support
 
+The `2.1.1` patch release improves Chart tooltips, DataTable sorting
+and selection, Combobox input, Context Menu disposal, Date Picker controls,
+and Sidebar keyboard navigation. Page titles follow their owner heading weight.
+
 The `2.1.0` minor release adds host-translated password feedback, the
 `--moo-heading-font-weight` owner token, and a document scrolling mode for
 website shells. The Layout catalog demonstrates the document mode with a live
@@ -303,7 +307,7 @@ paths live in the [Installation guide](https://ui.wpmoo.org/installation/).
 Moo UI source code is MIT licensed. License details live in
 [LICENSE](LICENSE) and the [License page](https://ui.wpmoo.org/license/).
 Third-party distribution details and notices are kept separately in
-[THIRD_PARTY_NOTICES.md](https://github.com/wpmoo-org/ui/blob/v2.1.0/THIRD_PARTY_NOTICES.md).
+[THIRD_PARTY_NOTICES.md](https://github.com/wpmoo-org/ui/blob/v2.1.1/THIRD_PARTY_NOTICES.md).
 Catalog visual assets and their license are repository-only and are not
 included in the npm package. Asset terms live in the
-[visual asset license](https://github.com/wpmoo-org/ui/blob/v2.1.0/ASSET_LICENSE.md).
+[visual asset license](https://github.com/wpmoo-org/ui/blob/v2.1.1/ASSET_LICENSE.md).

package/THIRD_PARTY_NOTICES.md

@@ -83,5 +83,5 @@ The catalog serves its native ESM file and unchanged license separately under
 WPMoo-generated visual assets, including image assets under `site/static/images/`,
 are original WPMoo work and are not licensed under MIT unless explicitly
 stated. See the
-[repository visual asset license](https://github.com/wpmoo-org/ui/blob/v2.1.0/ASSET_LICENSE.md).
+[repository visual asset license](https://github.com/wpmoo-org/ui/blob/v2.1.1/ASSET_LICENSE.md).
 These assets and their license file are not included in the npm package.

package/certification.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": "0.1",
   "status": "preview",
-  "coreVersion": "2.1.0",
+  "coreVersion": "2.1.1",
   "bootstrap": {
     "canonicalVersion": "5.3.3",
     "targetRange": ">=5.3.0 <5.4",

package/dist/assets/css/moo-ui.css

@@ -1,5 +1,5 @@
 /*!
- * Moo UI v2.1.0 (https://wpmoo.org/)
+ * Moo UI v2.1.1 (https://wpmoo.org/)
  * Copyright 2026 WPMoo Authors
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
  *

package/dist/assets/css/moo-ui.min.css

@@ -1,5 +1,5 @@
 /*!
- * Moo UI v2.1.0 (https://wpmoo.org/)
+ * Moo UI v2.1.1 (https://wpmoo.org/)
  * Copyright 2026 WPMoo Authors
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
  *

package/dist/assets/css/moo.css

@@ -1,5 +1,5 @@
 /*!
- * Moo UI v2.1.0 (https://wpmoo.org/)
+ * Moo UI v2.1.1 (https://wpmoo.org/)
  * Copyright 2026 WPMoo Authors
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
  *

package/dist/assets/css/moo.min.css

@@ -1,5 +1,5 @@
 /*!
- * Moo UI v2.1.0 (https://wpmoo.org/)
+ * Moo UI v2.1.1 (https://wpmoo.org/)
  * Copyright 2026 WPMoo Authors
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
  *

package/dist/js/chart.js

@@ -1,5 +1,5 @@
 /*!
- * Moo UI chart.js v2.1.0 (https://wpmoo.org/)
+ * Moo UI chart.js v2.1.1 (https://wpmoo.org/)
  * Copyright 2026 WPMoo Authors
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
  */
@@ -501,6 +501,14 @@ function tooltipLabel(context) {
   const parsed = context.parsed;
   const raw = context.raw;
   if (parsed !== null && typeof parsed === "object") {
+    const meta = context.chart?.getDatasetMeta?.(context.datasetIndex);
+    const valueAxis = meta?.iScale?.type === "category" ? meta.vScale?.axis : null;
+    const single = valueAxis ? parsed[valueAxis] : typeof parsed.r === "number" && parsed.x === void 0 ? parsed.r : void 0;
+    if (single !== void 0) {
+      const value2 = formatNumber(single);
+      if (!value2) return label;
+      return label ? `${label}: ${value2}` : value2;
+    }
     const values = [];
     if (typeof parsed.x === "number" && Number.isFinite(parsed.x)) {
       values.push(`X: ${formatNumber(parsed.x)}`);

package/dist/js/chart.min.js

@@ -1,7 +1,7 @@
 /*!
- * Moo UI chart.min.js v2.1.0 (https://wpmoo.org/)
+ * Moo UI chart.min.js v2.1.1 (https://wpmoo.org/)
  * Copyright 2026 WPMoo Authors
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
  */
 
-import L from"chart.js/auto";var y=new WeakMap,j=new Map([["area",{chartType:"line",family:"cartesian",fillByDefault:!0,pointRadiusDefault:0}],["line",{chartType:"line",family:"cartesian",fillByDefault:!0}],["bar",{chartType:"bar",family:"cartesian"}],["pie",{chartType:"pie",family:"arc"}],["doughnut",{chartType:"doughnut",family:"arc"}],["polarArea",{chartType:"polarArea",family:"radial"}],["radar",{chartType:"radar",family:"radial"}],["scatter",{chartType:"scatter",family:"point"}],["bubble",{chartType:"bubble",family:"point"}]]),v=Array.from(j.keys()),U=new Set(["__proto__","constructor","prototype"]),g=6,x=g/2,E=5,R=12,G=1.5,V=1.5,B=1,Z=E+B,K="circle",A=g*Math.SQRT2,Q=g+R/2-A-2,S=Symbol("mooChartThemeState"),X=["backgroundColor","borderColor","hoverBackgroundColor","hoverBorderColor","pointBackgroundColor","pointBorderColor","pointHoverBackgroundColor","pointHoverBorderColor"],rr=["--bs-body-color","--bs-body-bg","--bs-secondary-color","--bs-secondary-bg","--bs-tertiary-color","--bs-tertiary-bg","--bs-border-color","--bs-primary","--bs-success","--bs-info","--bs-warning","--bs-danger","--bs-emphasis-color","--bs-info-text-emphasis","--bs-success-text-emphasis","--bs-warning-text-emphasis","--bs-danger-text-emphasis","--moo-chart-1","--moo-chart-2","--moo-chart-3","--moo-chart-4","--moo-chart-5"],w=["primary","success","info","warning","danger"];function N(r,o){let e=o?.getComputedStyle?.(r),t={};return e&&rr.forEach(n=>{t[n]=e.getPropertyValue(n).trim()}),t}function or(r){let o=r?.closest?.("[data-bs-theme]");if(o)return o;let e=r?.ownerDocument?.body;return e?.hasAttribute?.("data-bs-theme")?e:r?.ownerDocument?.documentElement||null}function M(r){return(r?.getAttribute?.("data-bs-theme")||r?.dataset?.bsTheme)==="dark"}function I(r){return Math.min(255,Math.max(0,Math.round(r)))}function er(r){let o=String(r).trim();if(o.endsWith("%")){let t=Number.parseFloat(o.slice(0,-1));return Number.isFinite(t)?I(t/100*255):null}let e=Number.parseFloat(o);return Number.isFinite(e)?I(e*255):null}function tr(r){if(r===void 0)return 1;let o=String(r).trim();if(o.endsWith("%")){let t=Number.parseFloat(o.slice(0,-1));return Number.isFinite(t)?Math.min(1,Math.max(0,t/100)):null}let e=Number.parseFloat(o);return Number.isFinite(e)?Math.min(1,Math.max(0,e)):null}function nr(r){if(typeof r!="string")return null;let o=r.trim(),e=o.match(/^color\(\s*srgb\s+([^\s/]+)\s+([^\s/]+)\s+([^\s/]+)(?:\s*\/\s*([^\s)]+))?\s*\)$/i);if(!e)return o||null;let t=e.slice(1,4).map(er),n=tr(e[4]);return t.some(i=>i===null)||n===null?null:n>=1?"rgb(".concat(t.join(", "),")"):"rgba(".concat(t.join(", "),", ").concat(Number(n.toFixed(3)),")")}function H(r,o,e,t,n){let i=r?.createElement,a=o?.getComputedStyle,u=r?.documentElement;if(!i||!a||!u)return t;let c=i.call(r,"span");if(c.style.color=e,!c.style.color)return t;c.hidden=!0,(n?.appendChild?n:u).appendChild(c);try{let s=a.call(o,c).color;return nr(s)||t}finally{c.remove()}}function P(r,o=!1,e=t=>t){let t={primary:r["--moo-chart-1"]||r["--bs-info"]||r["--bs-info-text-emphasis"],success:r["--moo-chart-2"]||r["--bs-success"],info:r["--moo-chart-3"]||r["--bs-info"],warning:r["--moo-chart-4"]||r["--bs-warning"],danger:r["--moo-chart-5"]||r["--bs-danger"]},n={primary:r["--moo-chart-1"]||r["--bs-info-text-emphasis"]||r["--bs-info"],success:r["--moo-chart-2"]||r["--bs-success-text-emphasis"]||r["--bs-success"],info:r["--moo-chart-3"]||r["--bs-info-text-emphasis"]||r["--bs-info"],warning:r["--moo-chart-4"]||r["--bs-warning-text-emphasis"]||r["--bs-warning"],danger:r["--moo-chart-5"]||r["--bs-danger-text-emphasis"]||r["--bs-danger"]},i=o?n:t;return{color:r["--bs-body-color"],backgroundColor:r["--bs-body-bg"],borderColor:r["--bs-border-color"],gridColor:r["--bs-secondary-color"],tickColor:r["--bs-secondary-color"],textColor:r["--bs-body-color"],secondaryText:r["--bs-secondary-color"],resolveColor:e,...i}}function _(r,o,e=22){return r.resolveColor("color-mix(in srgb, ".concat(o," ").concat(e,"%, transparent)"),o)}function W(r,o){return r.resolveColor("color-mix(in srgb, ".concat(o," 92%, ").concat(r.color,")"),o)}function ir(r,o){return Array.from({length:Math.max(o,1)},(e,t)=>{let n=w[t%w.length];return r[n]})}function z(r){return new Set(X.filter(o=>Object.prototype.hasOwnProperty.call(r,o)))}function Y(r,o=null){return r[S]||Object.defineProperty(r,S,{value:{explicitColorFields:o||z(r)}}),r[S]}function l(r,o,e,t){t.explicitColorFields.has(o)||(r[o]=e)}function sr(){return{pointStyle:K,rotation:0}}function ar(r){let e=r.chart.getDatasetMeta(r.datasetIndex).controller.getStyle(r.dataIndex);return{borderColor:e.borderColor,backgroundColor:e.backgroundColor,borderWidth:B,borderDash:e.borderDash,borderDashOffset:e.borderDashOffset,borderRadius:0}}function lr(r){return L.defaults.plugins.legend.labels.generateLabels(r).map(o=>({...o,lineWidth:B}))}function q(r,o,e,t,n=null){let i=w[o%w.length],a=t[i],u=W(t,a),c=a,d=r.type||e.chartType,s=Y(r,n);if(d==="line")l(r,"borderColor",u,s),l(r,"backgroundColor",_(t,a),s),l(r,"pointBackgroundColor",c,s),l(r,"pointBorderColor",c,s),r.pointBorderWidth=0,r.borderWidth===void 0&&(r.borderWidth=G),r.clip===void 0&&(r.clip=Z),r.pointRadius===void 0&&(r.pointRadius=e.pointRadiusDefault??x),r.pointHoverRadius=E,l(r,"pointHoverBackgroundColor",c,s),l(r,"pointHoverBorderColor",c,s),r.pointHoverBorderWidth=0,r.tension===void 0&&(r.tension=.3),e.fillByDefault&&r.fill===void 0&&(r.fill=!0);else if(d==="bar")l(r,"backgroundColor",t.resolveColor("color-mix(in srgb, ".concat(a," 78%, transparent)"),a),s),l(r,"borderColor",u,s),r.borderWidth===void 0&&(r.borderWidth=1),l(r,"hoverBackgroundColor",a,s),l(r,"hoverBorderColor",a,s),r.borderRadius=4;else if(d==="pie"||d==="doughnut"||d==="polarArea"){let b=ir(t,r.data?.length||0);l(r,"backgroundColor",b.map(m=>_(t,m,78)),s),l(r,"borderColor",b.map(m=>W(t,m)),s),l(r,"hoverBackgroundColor",b,s),l(r,"hoverBorderColor",b,s),r.borderWidth===void 0&&(r.borderWidth=1)}else d==="radar"?(l(r,"borderColor",u,s),l(r,"backgroundColor",_(t,a,18),s),l(r,"pointBackgroundColor",c,s),l(r,"pointBorderColor",c,s),l(r,"pointHoverBackgroundColor",c,s),l(r,"pointHoverBorderColor",c,s),r.borderWidth===void 0&&(r.borderWidth=V),r.pointRadius===void 0&&(r.pointRadius=x),r.pointHoverRadius===void 0&&(r.pointHoverRadius=E),r.pointHoverBorderWidth===void 0&&(r.pointHoverBorderWidth=0),r.fill===void 0&&(r.fill=!0)):(d==="scatter"||d==="bubble")&&(l(r,"backgroundColor",_(t,a,72),s),l(r,"borderColor",u,s),l(r,"hoverBackgroundColor",a,s),l(r,"hoverBorderColor",a,s),r.borderWidth===void 0&&(r.borderWidth=1),d==="scatter"?(r.pointRadius===void 0&&(r.pointRadius=x),r.pointHoverRadius===void 0&&(r.pointHoverRadius=E),r.pointHoverBorderWidth===void 0&&(r.pointHoverBorderWidth=0)):r.pointHoverRadius===void 0&&(r.pointHoverRadius=7));return r}function cr(r,o,e,t=[]){r&&(r.data.datasets.forEach((n,i)=>{q(n,i,e,o,t[i])}),r.options.scales&&Object.values(r.options.scales).forEach(n=>{n.grid&&(n.grid.color=o.resolveColor("color-mix(in srgb, ".concat(o.gridColor," 35%, transparent)"),o.gridColor)),n.ticks&&(n.ticks.color=o.secondaryText),n.title&&(n.title.color=o.textColor),n.angleLines&&(n.angleLines.color=o.resolveColor("color-mix(in srgb, ".concat(o.gridColor," 35%, transparent)"),o.gridColor)),n.pointLabels&&(n.pointLabels.color=o.secondaryText)}),r.options.plugins?.legend?.labels&&(r.options.plugins.legend.labels.color=o.textColor),r.options.plugins?.tooltip&&(r.options.plugins.tooltip.backgroundColor=o.backgroundColor,r.options.plugins.tooltip.titleColor=o.textColor,r.options.plugins.tooltip.bodyColor=o.secondaryText,r.options.plugins.tooltip.borderColor=o.borderColor),r.update())}function O(r){return{color:r.resolveColor("color-mix(in srgb, ".concat(r.gridColor," 35%, transparent)"),r.gridColor)}}function D(r,o={}){return{color:r.secondaryText,padding:8,...o}}function ur(r,o){let e=o.family==="point"?"linear":void 0;return{x:{...e?{type:e}:{},grid:O(r),ticks:D(r),border:{display:!1}},y:{...e?{type:e}:{},grid:O(r),ticks:D(r),border:{display:!1}}}}function dr(r){return{r:{angleLines:{color:r.resolveColor("color-mix(in srgb, ".concat(r.gridColor," 35%, transparent)"),r.gridColor)},grid:O(r),pointLabels:{color:r.secondaryText},ticks:D(r,{backdropColor:"transparent"})}}}function pr(r){return r.family==="point"||r.family==="arc"||r.family==="radial"?{mode:"nearest",intersect:!0}:{mode:"index",intersect:!1}}function hr(r){return!!r?.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches}function T(r){return typeof r=="number"&&Number.isFinite(r)?r.toLocaleString():""}function br(r){let o=r.dataset.label||r.label||"",e=r.parsed,t=r.raw;if(e!==null&&typeof e=="object"){let i=[];return typeof e.x=="number"&&Number.isFinite(e.x)&&i.push("X: ".concat(T(e.x))),typeof e.y=="number"&&Number.isFinite(e.y)&&i.push("Y: ".concat(T(e.y))),t&&typeof t=="object"&&typeof t.r=="number"&&i.push("Radius: ".concat(T(t.r))),i.length?o?"".concat(o,": ").concat(i.join(", ")):i.join(", "):o}let n=T(e);return n?o?"".concat(o,": ").concat(n):n:o}function fr(r,o,e){let t={responsive:!0,maintainAspectRatio:!1,interaction:pr(o),plugins:{legend:{labels:{color:r.textColor,usePointStyle:!0,pointStyle:K,boxWidth:g,boxHeight:g,generateLabels:lr,font:{size:R},padding:20}},tooltip:{backgroundColor:r.backgroundColor,titleColor:r.textColor,bodyColor:r.secondaryText,borderColor:r.borderColor,borderWidth:1,padding:12,cornerRadius:8,titleFont:{size:13,weight:"600"},bodyFont:{size:R},bodySpacing:6,usePointStyle:!0,boxWidth:A,boxHeight:A,boxPadding:Q,callbacks:{label:br,labelColor:ar,labelPointStyle:sr}}},animation:{duration:600,easing:"easeOutQuart"},hover:{animationDuration:200}};return o.family==="cartesian"||o.family==="point"?t.scales=ur(r,o):o.family==="radial"&&(t.scales=dr(r)),hr(e)&&(t.animation=!1,t.hover.animationDuration=0),t}function mr(r,o){let e=r.getAttribute("data-chart-data"),t=null,n=!1;if(e!==null&&e.trim()!==""){n=!0;try{t=JSON.parse(e)}catch(u){throw new SyntaxError("MooChart could not parse data-chart-data as JSON: ".concat(u.message))}}let i=Object.prototype.hasOwnProperty.call(o,"data");if(!i&&!n)throw new TypeError("MooChart data-chart-data is required unless config.data is provided.");let a=i?o.data:t;if(a==null||typeof a!="object"||Array.isArray(a)||!Array.isArray(a.labels)||!Array.isArray(a.datasets)){let u=i?"config.data":"data-chart-data";throw new TypeError("MooChart ".concat(u," must contain labels and datasets arrays."))}return a}function yr(r){let o=r.getAttribute("data-chart-options");if(o===null||o.trim()==="")return{};try{let e=JSON.parse(o);if(e===null||typeof e!="object"||Array.isArray(e))throw new TypeError("MooChart data-chart-options must be a JSON object.");return e}catch(e){throw e instanceof SyntaxError?new SyntaxError("MooChart could not parse data-chart-options as JSON: ".concat(e.message)):e}}function $(r){return r!==null&&typeof r=="object"&&!Array.isArray(r)}function gr(r){return Object.entries(r||{}).filter(([o])=>!U.has(o))}function F(r={},o={}){let e={...r};return gr(o).forEach(([t,n])=>{e[t]=$(n)&&$(r[t])?F(r[t],n):n}),e}function Cr(){return v.slice(0,-1).join(", ")+", and "+v[v.length-1]}function _r(r,o){let e=o.type||r.getAttribute("data-chart")||"line",t=j.get(e);if(!t)throw new TypeError("MooChart supports ".concat(Cr(),' charts; received "').concat(e,'".'));return{publicType:e,...t}}var k=class r{static getInstance(o){return o?.nodeType===1&&y.get(o)||null}static getOrCreateInstance(o,e={}){return r.getInstance(o)||new r(o,e)}constructor(o,e={}){if(o?.nodeType!==1||!o.matches(".chart"))throw new TypeError("MooChart requires a .chart root element.");let t=y.get(o);if(t)return t;let n=o.querySelector(":scope > canvas");if(!n)throw new TypeError("MooChart requires a child <canvas> element inside the .chart root.");this._element=o,this._canvas=n,this._document=o.ownerDocument,this._window=this._document?.defaultView,this._config=e||{},this._themeElement=or(o);let i=_r(o,this._config),a=mr(o,this._config),u=yr(o);this._type=i.publicType,this._metadata=i,this._datasetExplicitColorFields=(a.datasets||[]).map(p=>z(p));let c=M(this._themeElement),d=N(this._themeElement,this._window),s=(p,h)=>H(this._document,this._window,p,h,this._themeElement);this._theme=P(d,c,s);let b=(a.datasets||[]).map((p,h)=>q({...p},h,i,this._theme,this._datasetExplicitColorFields[h])),m=F(F(fr(this._theme,i,this._window),u),this._config.options);if(this._chart=new L(n,{...this._config,type:i.chartType,data:{labels:a.labels||[],datasets:b},options:m}),this._chart.data.datasets.forEach((p,h)=>{Y(p,this._datasetExplicitColorFields[h])}),this._rethemeFrame=null,this._observer=null,this._themeElement&&this._window?.MutationObserver){this._observer=new this._window.MutationObserver(f=>{f.forEach(C=>{(C.attributeName==="data-bs-theme"||C.attributeName==="style")&&this._scheduleRetheme()})});let p={attributes:!0,attributeFilter:["data-bs-theme","style"]};[this._themeElement,this._document?.documentElement].filter((f,C,J)=>f&&J.indexOf(f)===C).forEach(f=>{this._observer.observe(f,p)})}y.set(o,this)}get chart(){return this._chart}get element(){return this._element}_scheduleRetheme(){if(this._rethemeFrame!==null)return;let o=this._window?.requestAnimationFrame;if(!o){this._applyTheme();return}this._rethemeFrame=o.call(this._window,()=>{this._rethemeFrame=null,this._applyTheme()})}_applyTheme(){if(!this._chart)return;let o=M(this._themeElement),e=N(this._themeElement,this._window),t=(n,i)=>H(this._document,this._window,n,i,this._themeElement);this._theme=P(e,o,t),cr(this._chart,this._theme,this._metadata,this._datasetExplicitColorFields)}dispose(){this._rethemeFrame!==null&&this._window?.cancelAnimationFrame&&this._window.cancelAnimationFrame(this._rethemeFrame),this._rethemeFrame=null,this._observer?.disconnect(),this._observer=null,this._chart?.destroy(),this._chart=null,y.get(this._element)===this&&y.delete(this._element)}};export{k as default};
+import L from"chart.js/auto";var y=new WeakMap,j=new Map([["area",{chartType:"line",family:"cartesian",fillByDefault:!0,pointRadiusDefault:0}],["line",{chartType:"line",family:"cartesian",fillByDefault:!0}],["bar",{chartType:"bar",family:"cartesian"}],["pie",{chartType:"pie",family:"arc"}],["doughnut",{chartType:"doughnut",family:"arc"}],["polarArea",{chartType:"polarArea",family:"radial"}],["radar",{chartType:"radar",family:"radial"}],["scatter",{chartType:"scatter",family:"point"}],["bubble",{chartType:"bubble",family:"point"}]]),v=Array.from(j.keys()),U=new Set(["__proto__","constructor","prototype"]),C=6,x=C/2,E=5,A=12,G=1.5,V=1.5,B=1,Z=E+B,K="circle",R=C*Math.SQRT2,Q=C+A/2-R-2,S=Symbol("mooChartThemeState"),X=["backgroundColor","borderColor","hoverBackgroundColor","hoverBorderColor","pointBackgroundColor","pointBorderColor","pointHoverBackgroundColor","pointHoverBorderColor"],rr=["--bs-body-color","--bs-body-bg","--bs-secondary-color","--bs-secondary-bg","--bs-tertiary-color","--bs-tertiary-bg","--bs-border-color","--bs-primary","--bs-success","--bs-info","--bs-warning","--bs-danger","--bs-emphasis-color","--bs-info-text-emphasis","--bs-success-text-emphasis","--bs-warning-text-emphasis","--bs-danger-text-emphasis","--moo-chart-1","--moo-chart-2","--moo-chart-3","--moo-chart-4","--moo-chart-5"],w=["primary","success","info","warning","danger"];function M(r,o){let e=o?.getComputedStyle?.(r),t={};return e&&rr.forEach(n=>{t[n]=e.getPropertyValue(n).trim()}),t}function or(r){let o=r?.closest?.("[data-bs-theme]");if(o)return o;let e=r?.ownerDocument?.body;return e?.hasAttribute?.("data-bs-theme")?e:r?.ownerDocument?.documentElement||null}function N(r){return(r?.getAttribute?.("data-bs-theme")||r?.dataset?.bsTheme)==="dark"}function I(r){return Math.min(255,Math.max(0,Math.round(r)))}function er(r){let o=String(r).trim();if(o.endsWith("%")){let t=Number.parseFloat(o.slice(0,-1));return Number.isFinite(t)?I(t/100*255):null}let e=Number.parseFloat(o);return Number.isFinite(e)?I(e*255):null}function tr(r){if(r===void 0)return 1;let o=String(r).trim();if(o.endsWith("%")){let t=Number.parseFloat(o.slice(0,-1));return Number.isFinite(t)?Math.min(1,Math.max(0,t/100)):null}let e=Number.parseFloat(o);return Number.isFinite(e)?Math.min(1,Math.max(0,e)):null}function nr(r){if(typeof r!="string")return null;let o=r.trim(),e=o.match(/^color\(\s*srgb\s+([^\s/]+)\s+([^\s/]+)\s+([^\s/]+)(?:\s*\/\s*([^\s)]+))?\s*\)$/i);if(!e)return o||null;let t=e.slice(1,4).map(er),n=tr(e[4]);return t.some(a=>a===null)||n===null?null:n>=1?"rgb(".concat(t.join(", "),")"):"rgba(".concat(t.join(", "),", ").concat(Number(n.toFixed(3)),")")}function H(r,o,e,t,n){let a=r?.createElement,i=o?.getComputedStyle,u=r?.documentElement;if(!a||!i||!u)return t;let l=a.call(r,"span");if(l.style.color=e,!l.style.color)return t;l.hidden=!0,(n?.appendChild?n:u).appendChild(l);try{let s=i.call(o,l).color;return nr(s)||t}finally{l.remove()}}function P(r,o=!1,e=t=>t){let t={primary:r["--moo-chart-1"]||r["--bs-info"]||r["--bs-info-text-emphasis"],success:r["--moo-chart-2"]||r["--bs-success"],info:r["--moo-chart-3"]||r["--bs-info"],warning:r["--moo-chart-4"]||r["--bs-warning"],danger:r["--moo-chart-5"]||r["--bs-danger"]},n={primary:r["--moo-chart-1"]||r["--bs-info-text-emphasis"]||r["--bs-info"],success:r["--moo-chart-2"]||r["--bs-success-text-emphasis"]||r["--bs-success"],info:r["--moo-chart-3"]||r["--bs-info-text-emphasis"]||r["--bs-info"],warning:r["--moo-chart-4"]||r["--bs-warning-text-emphasis"]||r["--bs-warning"],danger:r["--moo-chart-5"]||r["--bs-danger-text-emphasis"]||r["--bs-danger"]},a=o?n:t;return{color:r["--bs-body-color"],backgroundColor:r["--bs-body-bg"],borderColor:r["--bs-border-color"],gridColor:r["--bs-secondary-color"],tickColor:r["--bs-secondary-color"],textColor:r["--bs-body-color"],secondaryText:r["--bs-secondary-color"],resolveColor:e,...a}}function T(r,o,e=22){return r.resolveColor("color-mix(in srgb, ".concat(o," ").concat(e,"%, transparent)"),o)}function W(r,o){return r.resolveColor("color-mix(in srgb, ".concat(o," 92%, ").concat(r.color,")"),o)}function ir(r,o){return Array.from({length:Math.max(o,1)},(e,t)=>{let n=w[t%w.length];return r[n]})}function z(r){return new Set(X.filter(o=>Object.prototype.hasOwnProperty.call(r,o)))}function Y(r,o=null){return r[S]||Object.defineProperty(r,S,{value:{explicitColorFields:o||z(r)}}),r[S]}function c(r,o,e,t){t.explicitColorFields.has(o)||(r[o]=e)}function sr(){return{pointStyle:K,rotation:0}}function ar(r){let e=r.chart.getDatasetMeta(r.datasetIndex).controller.getStyle(r.dataIndex);return{borderColor:e.borderColor,backgroundColor:e.backgroundColor,borderWidth:B,borderDash:e.borderDash,borderDashOffset:e.borderDashOffset,borderRadius:0}}function lr(r){return L.defaults.plugins.legend.labels.generateLabels(r).map(o=>({...o,lineWidth:B}))}function q(r,o,e,t,n=null){let a=w[o%w.length],i=t[a],u=W(t,i),l=i,d=r.type||e.chartType,s=Y(r,n);if(d==="line")c(r,"borderColor",u,s),c(r,"backgroundColor",T(t,i),s),c(r,"pointBackgroundColor",l,s),c(r,"pointBorderColor",l,s),r.pointBorderWidth=0,r.borderWidth===void 0&&(r.borderWidth=G),r.clip===void 0&&(r.clip=Z),r.pointRadius===void 0&&(r.pointRadius=e.pointRadiusDefault??x),r.pointHoverRadius=E,c(r,"pointHoverBackgroundColor",l,s),c(r,"pointHoverBorderColor",l,s),r.pointHoverBorderWidth=0,r.tension===void 0&&(r.tension=.3),e.fillByDefault&&r.fill===void 0&&(r.fill=!0);else if(d==="bar")c(r,"backgroundColor",t.resolveColor("color-mix(in srgb, ".concat(i," 78%, transparent)"),i),s),c(r,"borderColor",u,s),r.borderWidth===void 0&&(r.borderWidth=1),c(r,"hoverBackgroundColor",i,s),c(r,"hoverBorderColor",i,s),r.borderRadius=4;else if(d==="pie"||d==="doughnut"||d==="polarArea"){let f=ir(t,r.data?.length||0);c(r,"backgroundColor",f.map(m=>T(t,m,78)),s),c(r,"borderColor",f.map(m=>W(t,m)),s),c(r,"hoverBackgroundColor",f,s),c(r,"hoverBorderColor",f,s),r.borderWidth===void 0&&(r.borderWidth=1)}else d==="radar"?(c(r,"borderColor",u,s),c(r,"backgroundColor",T(t,i,18),s),c(r,"pointBackgroundColor",l,s),c(r,"pointBorderColor",l,s),c(r,"pointHoverBackgroundColor",l,s),c(r,"pointHoverBorderColor",l,s),r.borderWidth===void 0&&(r.borderWidth=V),r.pointRadius===void 0&&(r.pointRadius=x),r.pointHoverRadius===void 0&&(r.pointHoverRadius=E),r.pointHoverBorderWidth===void 0&&(r.pointHoverBorderWidth=0),r.fill===void 0&&(r.fill=!0)):(d==="scatter"||d==="bubble")&&(c(r,"backgroundColor",T(t,i,72),s),c(r,"borderColor",u,s),c(r,"hoverBackgroundColor",i,s),c(r,"hoverBorderColor",i,s),r.borderWidth===void 0&&(r.borderWidth=1),d==="scatter"?(r.pointRadius===void 0&&(r.pointRadius=x),r.pointHoverRadius===void 0&&(r.pointHoverRadius=E),r.pointHoverBorderWidth===void 0&&(r.pointHoverBorderWidth=0)):r.pointHoverRadius===void 0&&(r.pointHoverRadius=7));return r}function cr(r,o,e,t=[]){r&&(r.data.datasets.forEach((n,a)=>{q(n,a,e,o,t[a])}),r.options.scales&&Object.values(r.options.scales).forEach(n=>{n.grid&&(n.grid.color=o.resolveColor("color-mix(in srgb, ".concat(o.gridColor," 35%, transparent)"),o.gridColor)),n.ticks&&(n.ticks.color=o.secondaryText),n.title&&(n.title.color=o.textColor),n.angleLines&&(n.angleLines.color=o.resolveColor("color-mix(in srgb, ".concat(o.gridColor," 35%, transparent)"),o.gridColor)),n.pointLabels&&(n.pointLabels.color=o.secondaryText)}),r.options.plugins?.legend?.labels&&(r.options.plugins.legend.labels.color=o.textColor),r.options.plugins?.tooltip&&(r.options.plugins.tooltip.backgroundColor=o.backgroundColor,r.options.plugins.tooltip.titleColor=o.textColor,r.options.plugins.tooltip.bodyColor=o.secondaryText,r.options.plugins.tooltip.borderColor=o.borderColor),r.update())}function O(r){return{color:r.resolveColor("color-mix(in srgb, ".concat(r.gridColor," 35%, transparent)"),r.gridColor)}}function D(r,o={}){return{color:r.secondaryText,padding:8,...o}}function ur(r,o){let e=o.family==="point"?"linear":void 0;return{x:{...e?{type:e}:{},grid:O(r),ticks:D(r),border:{display:!1}},y:{...e?{type:e}:{},grid:O(r),ticks:D(r),border:{display:!1}}}}function dr(r){return{r:{angleLines:{color:r.resolveColor("color-mix(in srgb, ".concat(r.gridColor," 35%, transparent)"),r.gridColor)},grid:O(r),pointLabels:{color:r.secondaryText},ticks:D(r,{backdropColor:"transparent"})}}}function pr(r){return r.family==="point"||r.family==="arc"||r.family==="radial"?{mode:"nearest",intersect:!0}:{mode:"index",intersect:!1}}function hr(r){return!!r?.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches}function g(r){return typeof r=="number"&&Number.isFinite(r)?r.toLocaleString():""}function fr(r){let o=r.dataset.label||r.label||"",e=r.parsed,t=r.raw;if(e!==null&&typeof e=="object"){let a=r.chart?.getDatasetMeta?.(r.datasetIndex),i=a?.iScale?.type==="category"?a.vScale?.axis:null,u=i?e[i]:typeof e.r=="number"&&e.x===void 0?e.r:void 0;if(u!==void 0){let d=g(u);return d?o?"".concat(o,": ").concat(d):d:o}let l=[];return typeof e.x=="number"&&Number.isFinite(e.x)&&l.push("X: ".concat(g(e.x))),typeof e.y=="number"&&Number.isFinite(e.y)&&l.push("Y: ".concat(g(e.y))),t&&typeof t=="object"&&typeof t.r=="number"&&l.push("Radius: ".concat(g(t.r))),l.length?o?"".concat(o,": ").concat(l.join(", ")):l.join(", "):o}let n=g(e);return n?o?"".concat(o,": ").concat(n):n:o}function br(r,o,e){let t={responsive:!0,maintainAspectRatio:!1,interaction:pr(o),plugins:{legend:{labels:{color:r.textColor,usePointStyle:!0,pointStyle:K,boxWidth:C,boxHeight:C,generateLabels:lr,font:{size:A},padding:20}},tooltip:{backgroundColor:r.backgroundColor,titleColor:r.textColor,bodyColor:r.secondaryText,borderColor:r.borderColor,borderWidth:1,padding:12,cornerRadius:8,titleFont:{size:13,weight:"600"},bodyFont:{size:A},bodySpacing:6,usePointStyle:!0,boxWidth:R,boxHeight:R,boxPadding:Q,callbacks:{label:fr,labelColor:ar,labelPointStyle:sr}}},animation:{duration:600,easing:"easeOutQuart"},hover:{animationDuration:200}};return o.family==="cartesian"||o.family==="point"?t.scales=ur(r,o):o.family==="radial"&&(t.scales=dr(r)),hr(e)&&(t.animation=!1,t.hover.animationDuration=0),t}function mr(r,o){let e=r.getAttribute("data-chart-data"),t=null,n=!1;if(e!==null&&e.trim()!==""){n=!0;try{t=JSON.parse(e)}catch(u){throw new SyntaxError("MooChart could not parse data-chart-data as JSON: ".concat(u.message))}}let a=Object.prototype.hasOwnProperty.call(o,"data");if(!a&&!n)throw new TypeError("MooChart data-chart-data is required unless config.data is provided.");let i=a?o.data:t;if(i==null||typeof i!="object"||Array.isArray(i)||!Array.isArray(i.labels)||!Array.isArray(i.datasets)){let u=a?"config.data":"data-chart-data";throw new TypeError("MooChart ".concat(u," must contain labels and datasets arrays."))}return i}function yr(r){let o=r.getAttribute("data-chart-options");if(o===null||o.trim()==="")return{};try{let e=JSON.parse(o);if(e===null||typeof e!="object"||Array.isArray(e))throw new TypeError("MooChart data-chart-options must be a JSON object.");return e}catch(e){throw e instanceof SyntaxError?new SyntaxError("MooChart could not parse data-chart-options as JSON: ".concat(e.message)):e}}function $(r){return r!==null&&typeof r=="object"&&!Array.isArray(r)}function gr(r){return Object.entries(r||{}).filter(([o])=>!U.has(o))}function F(r={},o={}){let e={...r};return gr(o).forEach(([t,n])=>{e[t]=$(n)&&$(r[t])?F(r[t],n):n}),e}function Cr(){return v.slice(0,-1).join(", ")+", and "+v[v.length-1]}function _r(r,o){let e=o.type||r.getAttribute("data-chart")||"line",t=j.get(e);if(!t)throw new TypeError("MooChart supports ".concat(Cr(),' charts; received "').concat(e,'".'));return{publicType:e,...t}}var k=class r{static getInstance(o){return o?.nodeType===1&&y.get(o)||null}static getOrCreateInstance(o,e={}){return r.getInstance(o)||new r(o,e)}constructor(o,e={}){if(o?.nodeType!==1||!o.matches(".chart"))throw new TypeError("MooChart requires a .chart root element.");let t=y.get(o);if(t)return t;let n=o.querySelector(":scope > canvas");if(!n)throw new TypeError("MooChart requires a child <canvas> element inside the .chart root.");this._element=o,this._canvas=n,this._document=o.ownerDocument,this._window=this._document?.defaultView,this._config=e||{},this._themeElement=or(o);let a=_r(o,this._config),i=mr(o,this._config),u=yr(o);this._type=a.publicType,this._metadata=a,this._datasetExplicitColorFields=(i.datasets||[]).map(p=>z(p));let l=N(this._themeElement),d=M(this._themeElement,this._window),s=(p,h)=>H(this._document,this._window,p,h,this._themeElement);this._theme=P(d,l,s);let f=(i.datasets||[]).map((p,h)=>q({...p},h,a,this._theme,this._datasetExplicitColorFields[h])),m=F(F(br(this._theme,a,this._window),u),this._config.options);if(this._chart=new L(n,{...this._config,type:a.chartType,data:{labels:i.labels||[],datasets:f},options:m}),this._chart.data.datasets.forEach((p,h)=>{Y(p,this._datasetExplicitColorFields[h])}),this._rethemeFrame=null,this._observer=null,this._themeElement&&this._window?.MutationObserver){this._observer=new this._window.MutationObserver(b=>{b.forEach(_=>{(_.attributeName==="data-bs-theme"||_.attributeName==="style")&&this._scheduleRetheme()})});let p={attributes:!0,attributeFilter:["data-bs-theme","style"]};[this._themeElement,this._document?.documentElement].filter((b,_,J)=>b&&J.indexOf(b)===_).forEach(b=>{this._observer.observe(b,p)})}y.set(o,this)}get chart(){return this._chart}get element(){return this._element}_scheduleRetheme(){if(this._rethemeFrame!==null)return;let o=this._window?.requestAnimationFrame;if(!o){this._applyTheme();return}this._rethemeFrame=o.call(this._window,()=>{this._rethemeFrame=null,this._applyTheme()})}_applyTheme(){if(!this._chart)return;let o=N(this._themeElement),e=M(this._themeElement,this._window),t=(n,a)=>H(this._document,this._window,n,a,this._themeElement);this._theme=P(e,o,t),cr(this._chart,this._theme,this._metadata,this._datasetExplicitColorFields)}dispose(){this._rethemeFrame!==null&&this._window?.cancelAnimationFrame&&this._window.cancelAnimationFrame(this._rethemeFrame),this._rethemeFrame=null,this._observer?.disconnect(),this._observer=null,this._chart?.destroy(),this._chart=null,y.get(this._element)===this&&y.delete(this._element)}};export{k as default};

package/dist/js/combobox.js

@@ -1,5 +1,5 @@
 /*!
- * Moo UI combobox.js v2.1.0 (https://wpmoo.org/)
+ * Moo UI combobox.js v2.1.1 (https://wpmoo.org/)
  * Copyright 2026 WPMoo Authors
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
  */
@@ -246,11 +246,7 @@ class Combobox {
   _clearStaleSelection() {
     if (this._isMultiple) {
       this._input.value = "";
-      this._options.forEach((option) => {
-        option.hidden = false;
-      });
-      this._syncGroupVisibility();
-      this._empty.hidden = true;
+      this._showAllOptions();
       return;
     }
     const selected = this._selectedOptions()[0] || null;
@@ -261,6 +257,14 @@ class Combobox {
     this._clearSelection();
     this._input.value = "";
   }
+  _showAllOptions() {
+    this._options.forEach((option) => {
+      option.hidden = false;
+    });
+    this._syncGroupVisibility();
+    this._empty.hidden = true;
+    this._liveRegion.textContent = "";
+  }
   _activeOption() {
     const activeId = this._input.getAttribute("aria-activedescendant");
     if (!activeId) {
@@ -347,6 +351,7 @@ class Combobox {
     if (this._hidden) {
       this._hidden.value = option.dataset.value || "";
     }
+    this._showAllOptions();
     this._toggleClear(true);
     this._setActiveOption(option);
     this._emitChange();
@@ -439,6 +444,12 @@ class Combobox {
     }
   }
   _handleKeydown(event) {
+    if (event.isComposing || event.keyCode === 229) {
+      if (event.key === "Tab") {
+        this._closeMenu();
+      }
+      return;
+    }
     const available = this._visibleOptions();
     const current = available.findIndex(
       (option) => option.id === this._input.getAttribute("aria-activedescendant")

package/dist/js/context-menu.js

@@ -1,5 +1,5 @@
 /*!
- * Moo UI context-menu.js v2.1.0 (https://wpmoo.org/)
+ * Moo UI context-menu.js v2.1.1 (https://wpmoo.org/)
  * Copyright 2026 WPMoo Authors
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
  */
@@ -67,12 +67,17 @@ class ContextMenu {
     this._bindEvents();
   }
   dispose() {
+    if (this._disposing) {
+      return;
+    }
+    this._disposing = true;
     this._listeners.forEach(({ target, type, handler, options }) => {
       target.removeEventListener(type, handler, options);
     });
     this._listeners = [];
-    this._dropdown.dispose();
     this._syncExpanded(false);
+    this._dropdown.hide();
+    this._dropdown.dispose();
     this._invoker = null;
     this._pointerRect = null;
     instances.delete(this._element);
@@ -184,7 +189,7 @@ class ContextMenu {
       event.preventDefault();
       event.stopPropagation();
       const group = radioButton.dataset.contextMenuRadioGroup;
-      this._menu.querySelectorAll(`[data-context-menu-radio-group="${group}"]`).forEach((button) => {
+      this._menu.querySelectorAll(`[data-context-menu-radio-group="${CSS.escape(String(group))}"]`).forEach((button) => {
         const checked = button === radioButton;
         button.classList.toggle("active", checked);
         button.setAttribute("aria-pressed", String(checked));

package/dist/js/datatable.js

@@ -1,5 +1,5 @@
 /*!
- * Moo UI datatable.js v2.1.0 (https://wpmoo.org/)
+ * Moo UI datatable.js v2.1.1 (https://wpmoo.org/)
  * Copyright 2026 WPMoo Authors
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
  */
@@ -45,10 +45,34 @@ __name(ownerPortalRoot, "ownerPortalRoot");
 
 // src/js/components/datatable.js
 var instances = /* @__PURE__ */ new WeakMap();
+var SORT_COLLATOR = new Intl.Collator(void 0, { numeric: true, sensitivity: "base" });
+var PLAIN_NUMBER = /^[-+]?(?:\d+\.?\d*|\.\d+)$/;
+function sortNumber(value) {
+  return PLAIN_NUMBER.test(value) ? Number(value) : null;
+}
+__name(sortNumber, "sortNumber");
+function compareSortValues(a, b) {
+  const aNumber = sortNumber(a);
+  const bNumber = sortNumber(b);
+  if (aNumber !== null && bNumber !== null) {
+    return Math.sign(aNumber - bNumber);
+  }
+  if (aNumber !== null || bNumber !== null) {
+    return aNumber !== null ? -1 : 1;
+  }
+  return SORT_COLLATOR.compare(a, b);
+}
+__name(compareSortValues, "compareSortValues");
 function normalize(value) {
   return (value ?? "").toString().trim().toLowerCase();
 }
 __name(normalize, "normalize");
+var ESCAPE_OWNER_SELECTOR = ".modal, .offcanvas, .dropdown-menu, .popover, [role='dialog'], [role='menu'], [role='listbox']";
+function escapeBelongsElsewhere(event) {
+  const target = event.target;
+  return typeof target?.closest === "function" && (Boolean(target.closest(ESCAPE_OWNER_SELECTOR)) || target.getAttribute("aria-expanded") === "true");
+}
+__name(escapeBelongsElsewhere, "escapeBelongsElsewhere");
 var _DataTable = class _DataTable {
   static getInstance(element) {
     return element?.nodeType === 1 ? instances.get(element) || null : null;
@@ -498,7 +522,7 @@ var _DataTable = class _DataTable {
     );
   }
   _sortValue(row, key) {
-    const cell = row.element.querySelector(`:scope > [data-datatable-column="${key}"]`);
+    const cell = row.element.querySelector(`:scope > [data-datatable-column="${CSS.escape(String(key))}"]`);
     if (!cell) {
       return "";
     }
@@ -525,10 +549,8 @@ var _DataTable = class _DataTable {
       filtered.sort((a, b) => {
         const aValue = this._sortValue(a, this._sortKey);
         const bValue = this._sortValue(b, this._sortKey);
-        if (aValue === bValue) {
-          return a.index - b.index;
-        }
-        return aValue > bValue ? direction : -direction;
+        const order = compareSortValues(aValue, bValue);
+        return order ? order * direction : a.index - b.index;
       });
     } else {
       filtered.sort((a, b) => a.index - b.index);
@@ -595,7 +617,7 @@ var _DataTable = class _DataTable {
           summary.appendChild(this._createFacetBadge(`${selected.size} selected`));
         } else {
           selected.forEach((value) => {
-            const option = facetRoot.querySelector(`[data-datatable-facet-option="${value}"]`);
+            const option = facetRoot.querySelector(`[data-datatable-facet-option="${CSS.escape(String(value))}"]`);
             const label = option?.querySelector("[data-datatable-facet-option-label]")?.textContent ?? value;
             summary.appendChild(this._createFacetBadge(label));
           });
@@ -824,17 +846,17 @@ var _DataTable = class _DataTable {
     return withEllipsis;
   }
   _isColumnFixed(key) {
-    return this._element.querySelector(`th[data-datatable-column="${key}"]`)?.hasAttribute("data-datatable-column-fixed") || false;
+    return this._element.querySelector(`th[data-datatable-column="${CSS.escape(String(key))}"]`)?.hasAttribute("data-datatable-column-fixed") || false;
   }
   _setColumnVisible(key, visible, { syncViewToggle = true } = {}) {
     if (!visible && this._isColumnFixed(key)) {
       return;
     }
-    this._element.querySelectorAll(`[data-datatable-column="${key}"], [data-datatable-detail-column="${key}"]`).forEach((cell) => {
+    this._element.querySelectorAll(`[data-datatable-column="${CSS.escape(String(key))}"], [data-datatable-detail-column="${CSS.escape(String(key))}"]`).forEach((cell) => {
       cell.classList.toggle("datatable-col-hidden", !visible);
     });
     if (syncViewToggle) {
-      this._element.querySelectorAll(`[data-datatable-column-toggle="${key}"]`).forEach((toggle) => {
+      this._element.querySelectorAll(`[data-datatable-column-toggle="${CSS.escape(String(key))}"]`).forEach((toggle) => {
         toggle.classList.toggle("active", visible);
         toggle.setAttribute("aria-pressed", String(visible));
       });
@@ -971,8 +993,8 @@ var _DataTable = class _DataTable {
     if (group) {
       const key = group.dataset.datatableFilterGroup;
       this._showFilterPickerPanel(key);
-      const search = this._element.querySelector(`[data-datatable-filter-option-search="${key}"]`);
-      const option = this._element.querySelector(`[data-datatable-filter-option-key="${key}"]`);
+      const search = this._element.querySelector(`[data-datatable-filter-option-search="${CSS.escape(String(key))}"]`);
+      const option = this._element.querySelector(`[data-datatable-filter-option-key="${CSS.escape(String(key))}"]`);
       (search || option)?.focus({ preventScroll: true });
       return;
     }
@@ -987,7 +1009,7 @@ var _DataTable = class _DataTable {
     }
     const key = search.dataset.datatableFilterOptionSearch;
     const query = normalize(search.value);
-    this._element.querySelectorAll(`[data-datatable-filter-option-key="${key}"]`).forEach((option) => {
+    this._element.querySelectorAll(`[data-datatable-filter-option-key="${CSS.escape(String(key))}"]`).forEach((option) => {
       const label = normalize(option.querySelector("[data-datatable-filter-option-label]")?.textContent || option.textContent);
       option.closest("li")?.classList.toggle("datatable-filter-option-search-hidden", query.length > 0 && !label.includes(query));
     });
@@ -1004,7 +1026,7 @@ var _DataTable = class _DataTable {
     }
     const key = search.dataset.datatableFilterOptionSearch;
     const options = Array.from(
-      this._element.querySelectorAll(`[data-datatable-filter-option-key="${key}"]`)
+      this._element.querySelectorAll(`[data-datatable-filter-option-key="${CSS.escape(String(key))}"]`)
     );
     const firstVisible = options.find(
       (option) => !option.closest("li")?.classList.contains("datatable-filter-option-search-hidden")
@@ -1129,7 +1151,7 @@ var _DataTable = class _DataTable {
       }
       row.element.setAttribute(`data-datatable-facet-${key}`, value);
       row.facets[key] = value;
-      const cell = row.element.querySelector(`[data-datatable-column="${key}"]`);
+      const cell = row.element.querySelector(`[data-datatable-column="${CSS.escape(String(key))}"]`);
       if (!cell) {
         return;
       }
@@ -1143,7 +1165,7 @@ var _DataTable = class _DataTable {
       if (currentIcon && icon) {
         currentIcon.replaceWith(icon.cloneNode(true));
       }
-      const cardValue = row.cardElement?.querySelector(`[data-datatable-detail-column="${key}"] .datatable-card-value`);
+      const cardValue = row.cardElement?.querySelector(`[data-datatable-detail-column="${CSS.escape(String(key))}"] .datatable-card-value`);
       if (cardValue) {
         cardValue.innerHTML = cell.innerHTML;
       }
@@ -1237,11 +1259,11 @@ var _DataTable = class _DataTable {
       }
     });
     this._listen(this._document, "click", (event) => this._handleSortAction(event));
-    this._listen(this._document, "keydown", (event) => {
-      if (event.key === "Escape" && this._selectedIds.size > 0) {
+    this._listen(this._window, "keydown", (event) => {
+      if (event.key === "Escape" && this._selectedIds.size > 0 && !escapeBelongsElsewhere(event)) {
         this._clearSelection();
       }
-    });
+    }, { capture: true });
     this._listen(this._element, "show.bs.dropdown", (event) => {
       this._reparentRowActionMenu(event.target);
       this._reparentSortMenu(event.target);

package/dist/js/datepicker.js

@@ -1,5 +1,5 @@
 /*!
- * Moo UI datepicker.js v2.1.0 (https://wpmoo.org/)
+ * Moo UI datepicker.js v2.1.1 (https://wpmoo.org/)
  * Copyright 2026 WPMoo Authors
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
  */
@@ -193,6 +193,15 @@ function dispatch(element, window2, name, detail = {}, cancelable = false) {
     })
   );
 }
+function formDefaultValue(input) {
+  if (!input) {
+    return "";
+  }
+  if (!("datepickerFormDefault" in input.dataset)) {
+    input.dataset.datepickerFormDefault = input.getAttribute("value") || "";
+  }
+  return input.dataset.datepickerFormDefault;
+}
 function setHiddenValue(input, value) {
   if (!input) return;
   input.value = value || "";
@@ -596,6 +605,7 @@ var MooCalendar = class _MooCalendar {
       ArrowUp: -7
     };
     let nextDate = null;
+    let stepTowardActive = false;
     if (event.key in keyMap) {
       nextDate = addDays(this._activeDate, keyMap[event.key]);
     } else if (event.key === "Home") {
@@ -606,10 +616,13 @@ var MooCalendar = class _MooCalendar {
       const weekStart = firstDayOfWeek(this._config.locale);
       const weekdayOffset = (this._activeDate.getDay() - weekStart + 7) % 7;
       nextDate = addDays(this._activeDate, 6 - weekdayOffset);
-    } else if (event.key === "PageUp") {
-      nextDate = addMonths(this._activeDate, -1);
-    } else if (event.key === "PageDown") {
-      nextDate = addMonths(this._activeDate, 1);
+    } else if (event.key === "PageUp" || event.key === "PageDown") {
+      const target = addMonths(this._activeDate, event.key === "PageUp" ? -1 : 1);
+      const { minDate, maxDate } = this._config;
+      nextDate = limitToRange(target, minDate, maxDate);
+      stepTowardActive = [minDate, maxDate].some(
+        (edge) => edge && compareDates(nextDate, edge) === 0
+      );
     } else if (event.key === "Enter" || event.key === " " || event.key === "Spacebar") {
       event.preventDefault();
       this._selectDate(this._activeDate, true);
@@ -618,7 +631,8 @@ var MooCalendar = class _MooCalendar {
       return;
     }
     event.preventDefault();
-    this._setActiveDate(nextDate, true, compareDates(nextDate, this._activeDate) < 0 ? -1 : 1);
+    const backward = compareDates(nextDate, this._activeDate) < 0;
+    this._setActiveDate(nextDate, true, backward !== stepTowardActive ? -1 : 1);
   }
   _setActiveDate(date, focus = false, step = 0) {
     const nextDate = step === 0 ? this._nearestEnabledDate(date) : this._nextEnabledDate(date, step);
@@ -884,7 +898,7 @@ var MooDatepicker = class _MooDatepicker {
       value: config.value || this._input.value || element.dataset.datepickerValue
     });
     this._placeholder = this._config.placeholder;
-    this._defaultValue = this._input.defaultValue || this._input.getAttribute("value") || "";
+    this._defaultValue = formDefaultValue(this._input);
     this.calendar = MooCalendar.getOrCreateInstance(this._calendarRoot, {
       ...this._config,
       mode: "single",
@@ -1049,8 +1063,8 @@ var MooDateRangePicker = class _MooDateRangePicker {
       endValue: config.endValue || this._endInput.value || element.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._defaultStartValue = formDefaultValue(this._startInput);
+    this._defaultEndValue = formDefaultValue(this._endInput);
     this.calendar = MooCalendar.getOrCreateInstance(this._calendarRoot, this._config);
     rangePickerInstances.set(element, this);
     this._syncFromCalendar();