clio.css 0.9.2 → 0.12.0

package/dist/clio.min.js

@@ -0,0 +1,13 @@
+/*! clio.js — optional behaviour for clio.css | MIT | https://surfine.github.io/clio.css/
+ * Load after clio.css; nothing in clio.css needs it. It adds what CSS cannot do:
+ *   - a pressed control lets go while the pointer is off it and presses again on return
+ *   - Return/Enter clicks a dialog's default button, Esc or Cmd-. its cancel button,
+ *     each after flashing it pressed
+ *   - scroll bars with the era's fixed-size scroll box, arrows that repeat while held,
+ *     paging from the lane, and System 6/7's dragged outline (Mac OS 8/9 drag live)
+ *   - menus that track the pointer (drag and release, blink, submenus, keys) and
+ *     <select> opening as the era's pop-up menu
+ *   - window dragging with a grey outline, the collapse box, clio.zoomRects()
+ *   - the era's insertion point in text fields (XOR, measured blink)
+ *   - optional sounds you supply (clio.sounds, data-clio-sounds)
+ * Opt out per element with data-clio-js="off". */(()=>{"use strict";if(typeof document>"u"||window.clio)return;const C=1e3/60,gt="data-clio-off",L=t=>!!t.closest('[data-clio-js="off"]'),Ht=["button","input[type=button]","input[type=submit]","input[type=reset]","input[type=checkbox]","input[type=radio]",'[role="button"]','[role="tab"]',".title-bar > *",".bevel",".little-arrows > *",".control-strip-module",".control-strip-scroll"].join(",");document.addEventListener("pointerdown",t=>{if(t.button!==0||!(t.target instanceof Element))return;const e=t.target.closest(Ht);if(!e||e.disabled||L(e)||e.closest(".clio-sb-anchor, .menu-bar, [role=menubar], [role=menu-bar], .menu, [role=menu]"))return;const o=e.getBoundingClientRect(),n=r=>r.clientX>=o.left&&r.clientX<o.right&&r.clientY>=o.top&&r.clientY<o.bottom,s=r=>{r.pointerId===t.pointerId&&e.toggleAttribute(gt,!n(r))},i=r=>{r.pointerId===t.pointerId&&(e.removeAttribute(gt),document.removeEventListener("pointermove",s,!0),document.removeEventListener("pointerup",i,!0),document.removeEventListener("pointercancel",i,!0))};document.addEventListener("pointermove",s,!0),document.addEventListener("pointerup",i,!0),document.addEventListener("pointercancel",i,!0)},!0);const Kt=".modal-dialog, .alert-box, .standard-dialog, .modeless-dialog, .window.movable-modal, dialog, [role=dialog], [role=alertdialog]",Ut=".default:not(:disabled), .btn-default:not(:disabled), [data-clio-default]:not(:disabled)",jt="[data-clio-cancel]:not(:disabled), button[value=cancel]:not(:disabled), .cancel:not(:disabled)",Qt=t=>{const e=t.classList.contains("active");t.classList.add("active"),setTimeout(()=>{e||t.classList.remove("active"),t.click()},8*C)};document.addEventListener("keydown",t=>{if(t.defaultPrevented||t.isComposing||t.repeat)return;const e=t.key==="Enter"&&!t.shiftKey&&!t.altKey&&!t.ctrlKey&&!t.metaKey,o=t.key==="Escape"||t.key==="."&&(t.metaKey||t.ctrlKey);if(!e&&!o)return;const n=document.activeElement instanceof Element?document.activeElement:null,s=n&&n.closest(Kt)||[...document.querySelectorAll("dialog[open]")].pop();if(!s||L(s)||e&&n&&(n.matches("textarea, button, select, [role=button], [contenteditable], a[href], summary")||n.isContentEditable))return;const i=s.querySelector(e?Ut:jt);i&&(t.preventDefault(),Qt(i))});const S=".menu-bar, [role=menubar], [role=menu-bar]",k=".menu, [role=menu]",be=":scope > li > :is(button, a, span)",B="data-clio-blink",_t=9*C,vt=60*C,j=()=>matchMedia("(prefers-reduced-motion: reduce)").matches,yt=t=>getComputedStyle(t).getPropertyValue("--clio-menu-sticky").trim()==="1",Y=t=>t&&t.matches(`:is(${k}) > li`)&&!t.matches(".disabled, [aria-disabled=true], .separator, [role=separator], .scroll-up, .scroll-down")&&!t.querySelector(":scope > :is(a, button):is(:disabled, [aria-disabled=true])"),$=t=>t&&t.querySelector(`:scope > :is(${k})`),Q=t=>t.querySelector(":scope > :is(a, button)")||t;let l=null;function T(t){return t.querySelector(":scope > :is(button, a, span)")}function X(t,e){for(const n of t.querySelectorAll(":scope > li.open"))n!==e&&Et(n);e.classList.add("open");const o=T(e);o&&o.hasAttribute("aria-expanded")&&o.setAttribute("aria-expanded","true")}function Et(t){t.classList.remove("open");const e=T(t);e&&e.hasAttribute("aria-expanded")&&e.setAttribute("aria-expanded","false");for(const o of t.querySelectorAll("li.open, li.active"))o.classList.remove("open","active")}function P(){if(l){clearTimeout(l.timer),clearTimeout(l.hold);for(const t of l.bar.querySelectorAll(":scope > li.open"))Et(t);document.activeElement&&l.bar.contains(document.activeElement)&&document.activeElement.blur(),l=null}}function V(t){if(!l||l.hot===t)return;const e=t?t.parentElement:null;if(e)for(const o of e.children)o!==t&&(o.classList.remove("active"),o.classList.contains("open")&&xt(o));l.hot&&l.hot!==t&&(!t||!l.hot.contains(t))&&l.hot.classList.remove("active"),l.hot=t,clearTimeout(l.timer),!(!t||!Y(t))&&(t.classList.add("active"),$(t)&&(l.timer=setTimeout(()=>{t.classList.add("open")},_t)))}function xt(t){t.classList.remove("open","active");for(const e of t.querySelectorAll("li.open, li.active"))e.classList.remove("open","active")}const ot=(t,e)=>Math.round(Math.atan2(Math.abs(t),-e)*180/Math.PI);function Gt(t,e,o){const n=$(t);if(!n||!t.classList.contains("open"))return!1;const s=n.getBoundingClientRect(),i=s.left>=e.x,r=i?s.left:s.right;if(i?o.x<e.x:o.x>e.x)return!1;const c=ot(o.x-e.x,o.y-e.y);return c>=ot(r-e.x,s.top-e.y)&&c<=ot(r-e.x,s.bottom-e.y)}function Jt(t,e){const o=document.elementFromPoint(t,e);return o?o.closest(`:is(${k}) > li`):null}function wt(t,e){const o=()=>{t.removeAttribute(B);const r=Q(t);r.removeAttribute(B),P(),e&&e(),tt("menu"),r.click()};l.mode="blink";const n=Q(t);if(j())return o();let s=0;const i=()=>{const r=s%2===0;if(t.toggleAttribute(B,r),n.toggleAttribute(B,r),++s===7)return o();setTimeout(i,3*C)};i()}document.addEventListener("pointerdown",t=>{if(t.button!==0||!(t.target instanceof Element))return;const e=t.target;if(l&&l.mode==="sticky"){const s=e.closest(`:is(${k}) > li`),i=e.closest(`:is(${S}) > li`);if(s&&l.bar.contains(s)){l.mode="press",t.preventDefault();return}if(i&&i.parentElement===l.bar&&!s){if(t.preventDefault(),i.classList.contains("open")){P();return}X(l.bar,i),l.li=i,l.mode="press",l.fresh=!1;return}P(),t.preventDefault(),t.stopPropagation(),document.addEventListener("click",r=>{r.preventDefault(),r.stopPropagation()},{capture:!0,once:!0});return}const o=e.closest(`:is(${S}) > li`);if(!o||L(o)||e.closest(k))return;t.preventDefault();const n=o.parentElement;l={bar:n,li:o,mode:"press",hot:null,fresh:!0,last:{x:t.clientX,y:t.clientY}},X(n,o)},!0),document.addEventListener("pointermove",t=>{if(!l||l.mode==="blink")return;const e={x:t.clientX,y:t.clientY},o=l.last;l.last=e;const n=document.elementFromPoint(e.x,e.y);if(!n)return;const s=n.closest(`:is(${S}) > li`);if(s&&s.parentElement===l.bar&&!n.closest(k)&&s!==l.li&&(l.mode==="press"||l.mode==="sticky")){X(l.bar,s),l.li=s,l.fresh=!1,V(null);return}const i=n.closest(`:is(${k}) > li`);if(i&&!l.bar.contains(i))return;const r=l.hot&&$(l.hot)?l.hot:null;if(r&&i!==r&&!(i&&r.contains(i))&&r.classList.contains("open")){const c=performance.now();if(l.left==null&&(l.left=c,l.hold=setTimeout(()=>{l&&(l.left=null,V(Jt(l.last.x,l.last.y)))},vt)),c-l.left<vt&&Gt(r,l.anchor||o,e))return}clearTimeout(l.hold),l.left=null,i&&(l.anchor=e),i?V(i):l.hot&&!$(l.hot)&&V(null)},!0),document.addEventListener("pointerup",t=>{if(!l||l.mode!=="press"||t.button!==0)return;const e=document.elementFromPoint(t.clientX,t.clientY),o=e&&e.closest(`:is(${k}) > li`);if(o&&l.bar.contains(o)&&Y(o)&&!$(o)){document.addEventListener("click",s=>{s.isTrusted&&s.target instanceof Node&&o.contains(s.target)&&(s.preventDefault(),s.stopPropagation())},{capture:!0,once:!0}),t.preventDefault(),wt(o);return}if((e&&e.closest(`:is(${S}) > li`))===l.li&&l.fresh&&!e.closest(k)&&yt(l.bar)){l.mode="sticky";return}P()},!0),document.addEventListener("click",t=>{t.isTrusted&&t.target instanceof Element&&t.target.closest(`:is(${S}) > li > :is(button, a, span)`)&&!L(t.target)&&t.preventDefault()},!0);const nt=t=>[...t.children].filter(Y),W=t=>{const e=Q(t);e===t&&!t.hasAttribute("tabindex")&&(t.tabIndex=-1),e.focus(),l&&V(t)},st=t=>[...t.children].filter(e=>T(e)),Zt=t=>t.querySelector(`:scope > :is(${k})`);let it=!1;function rt(t,e){for(const o of st(t)){const n=T(o);n.tabIndex=o===e?0:-1}}function O(t,e,o={}){l&&P(),rt(t,e),it=!!o.quiet;const n=T(e);n&&n.focus({preventScroll:!0}),it=!1}function Lt(t,e,o){(!l||l.li!==e)&&(P(),l={bar:t,li:e,mode:"sticky",hot:null,last:{x:0,y:0}}),X(t,e);const n=Zt(e),s=n?nt(n):[];s.length&&W(s[o?s.length-1:0])}document.addEventListener("focusin",t=>{const e=t.target instanceof Element?t.target:null,o=e&&e.matches(`:is(${S}) > li > :is(button, a, span)`)?e.parentElement:null;if(!o||L(o)||it||t.relatedTarget instanceof Node&&o.contains(t.relatedTarget)||l&&l.mode!=="preview")return;const n=o.parentElement;l&&P(),rt(n,o),l={bar:n,li:o,mode:"preview",hot:null,last:{x:0,y:0}},X(n,o)}),document.addEventListener("focusout",t=>{if(!l||l.mode==="blink")return;const e=t.relatedTarget;e instanceof Node&&l.bar.contains(e)||(l.mode==="preview"||l.mode==="sticky")&&P()}),document.addEventListener("keydown",t=>{if(t.defaultPrevented||t.isComposing)return;const e=document.activeElement instanceof Element?document.activeElement:null;if(t.metaKey||t.ctrlKey)return te(t);if(!e)return;const o=e.closest(`:is(${S}) > li`);if(!o||L(o))return;const n=o.parentElement,s=st(n),i=e.closest(`:is(${k}) > li`),r=p=>{t.preventDefault(),t.stopPropagation(),p()},c=p=>s[(s.indexOf(o)+p+s.length)%s.length];if(!i)return["ArrowDown","Enter"," ","Home"].includes(t.key)?r(()=>Lt(n,o,!1)):t.key==="End"||t.key==="ArrowUp"?r(()=>Lt(n,o,!0)):t.key==="ArrowRight"||t.key==="ArrowLeft"?r(()=>O(n,c(t.key==="ArrowRight"?1:-1))):t.key==="Escape"&&l?r(()=>O(n,o,{quiet:!0})):void 0;l||(l={bar:n,li:o,mode:"sticky",hot:null,last:{x:0,y:0}}),l.mode=l.mode==="preview"?"sticky":l.mode;const b=i.parentElement,m=nt(b),f=m.indexOf(i),h=b.parentElement.closest(`:is(${k}) > li`);if(t.key==="ArrowDown"||t.key==="ArrowUp")return r(()=>W(m[(f+(t.key==="ArrowDown"?1:m.length-1))%m.length]));if(t.key==="Home"||t.key==="End")return r(()=>W(m[t.key==="Home"?0:m.length-1]));if(t.key==="ArrowRight"&&$(i))return r(()=>{i.classList.add("open");const p=nt($(i));p[0]&&W(p[0])});if(t.key==="ArrowRight")return r(()=>O(n,c(1)));if((t.key==="ArrowLeft"||t.key==="Escape")&&h)return r(()=>{xt(h),W(h)});if(t.key==="ArrowLeft")return r(()=>O(n,c(-1)));if(t.key==="Escape")return r(()=>O(n,o,{quiet:!0}));if((t.key==="Enter"||t.key===" ")&&Y(i)&&!$(i))return r(()=>wt(i,()=>O(n,o,{quiet:!0})))},!0);function te(t){if(t.altKey||t.key.length!==1)return;const e=t.key.toLowerCase();for(const o of document.querySelectorAll(`:is(${S})[data-clio-shortcuts]`))for(const n of o.querySelectorAll(`:is(${k}) > li kbd`)){const s=n.textContent.trim().match(/^(⇧?)\s*⌘\s*(.)$/u),i=n.closest(`:is(${k}) > li`);if(!s||s[2].toLowerCase()!==e||!!s[1]!==t.shiftKey||!Y(i))continue;t.preventDefault();const r=i.closest(`:is(${S}) > li`),c=T(r);c&&c.classList.add("active"),setTimeout(()=>{c&&c.classList.remove("active")},8*C),Q(i).click();return}}const lt="select:not([multiple]):not([size]), select[size='1']",kt=!!(window.CSS&&CSS.supports&&CSS.supports("appearance","base-select"))&&matchMedia("(pointer: fine)").matches;kt&&document.documentElement.setAttribute("data-clio-popups","");const At=t=>kt&&getComputedStyle(t).appearance==="base-select",St=t=>w(getComputedStyle(t).getPropertyValue("--clio-menu-item-height"))||16,Mt=t=>w(getComputedStyle(t).getPropertyValue("--clio-menu-border-top-width"))||1,ee=(t,e)=>{if(j())return e();let o=0;const n=()=>{if(t.toggleAttribute(B,o%2===0),++o===7)return t.removeAttribute(B),e();setTimeout(n,3*C)};n()},Ct=t=>{const e=St(t),o=t.getBoundingClientRect(),n=getComputedStyle(t).getPropertyValue("--clio-popup-menu-align").trim()==="top";t.style.setProperty("--clio-picker-shift",`${(n?0:Math.round((o.height-e)/2)-Mt(t))-Math.max(0,t.selectedIndex)*e}px`)};let d=null;function oe(t){const e=t.getBoundingClientRect(),o=St(t),n=document.createElement("ul");n.className="menu clio-popup-menu",n.setAttribute("role","menu");for(const h of t.options){const p=document.createElement("li");p.textContent=h.label||h.text;const v=h.closest("[lang]");v&&(p.lang=v.lang),p.dataset.index=h.index,(h.disabled||h.parentElement&&h.parentElement.disabled)&&p.classList.add("disabled"),h.selected&&p.classList.add("checked"),n.appendChild(p)}const s=t.closest("[data-era]")||document.body,i=getComputedStyle(t),r=w(i.getPropertyValue("--clio-popup-menu-trim")),b=i.getPropertyValue("--clio-popup-menu-align").trim()==="top"?Math.round(e.top):Math.round(e.top+(e.height-o)/2)-Mt(t);Object.assign(n.style,{position:"fixed",left:`${Math.round(e.left)}px`,top:`${b-Math.max(0,t.selectedIndex)*o}px`,minWidth:`${Math.round(e.width)-r}px`,zIndex:"2147483000"});const m=i.getPropertyValue("--clio-db-phase").trim();m&&n.style.setProperty("--clio-db-phase",m),s.appendChild(n),t.classList.add("clio-open");const f=n.getBoundingClientRect();f.top<0?n.style.top="0px":f.bottom>innerHeight&&(n.style.top=`${Math.max(0,innerHeight-f.height)}px`),d={sel:t,menu:n,mode:"press",hot:null,opened:performance.now(),moved:!1,x:0,y:0}}function F(){d&&(d.menu.remove(),d.sel.classList.remove("clio-open"),d=null)}function $t(t){!d||d.hot===t||(d.hot&&d.hot.classList.remove("active"),d.hot=t&&!t.classList.contains("disabled")?t:null,d.hot&&d.hot.classList.add("active"))}function ne(t){const{sel:e}=d;d.mode="blink",ee(t,()=>{F();const o=+t.dataset.index;e.selectedIndex!==o&&(e.selectedIndex=o,e.dispatchEvent(new Event("input",{bubbles:!0})),e.dispatchEvent(new Event("change",{bubbles:!0})))})}document.addEventListener("pointerdown",t=>{if(t.button!==0||!(t.target instanceof Element))return;if(d){const o=t.target.closest(".clio-popup-menu > li");if(t.preventDefault(),o&&d.menu.contains(o)&&d.mode==="sticky"){d.mode="press",d.moved=!0,$t(o);return}d.mode!=="blink"&&F();return}const e=t.target.closest(lt);if(!(!e||e.disabled||L(e))){if(At(e)){Ct(e);return}t.pointerType!=="touch"&&(t.preventDefault(),e.focus({preventScroll:!0}),oe(e),d.x=t.clientX,d.y=t.clientY)}},!0),document.addEventListener("keydown",t=>{const e=document.activeElement;e instanceof Element&&e.matches(lt)&&At(e)&&Ct(e),d&&t.key==="Escape"&&(t.preventDefault(),F())},!0),document.addEventListener("pointermove",t=>{if(!d||d.mode==="blink")return;const e=document.elementFromPoint(t.clientX,t.clientY),o=e&&e.closest(".clio-popup-menu > li");Math.abs(t.clientX-d.x)+Math.abs(t.clientY-d.y)>3&&(d.moved=!0),$t(o&&d.menu.contains(o)?o:null)},!0),document.addEventListener("pointerup",t=>{if(!d||d.mode!=="press")return;const e=document.elementFromPoint(t.clientX,t.clientY),o=e&&e.closest(".clio-popup-menu > li"),n=!d.moved;if(o&&d.menu.contains(o)&&!o.classList.contains("disabled")&&!n)return ne(o);if((e&&e.closest(lt)===d.sel||o&&n)&&yt(d.sel)){d.mode="sticky";return}F()},!0),addEventListener("blur",F),addEventListener("resize",F);const Tt=".window-pane, div.listbox, div[role=listbox], ul[role=listbox], .clio-scroll",Pt=16,qt=50,w=t=>parseFloat(t)||0,I=(t,e)=>{const o=document.createElement("div");return o.className=t,e.appendChild(o),o},H=new WeakMap,_=new Set;class se{constructor(e){this.host=e;const o=getComputedStyle(e);for(const[s,i]of[["pt","Top"],["pr","Right"],["pb","Bottom"],["pl","Left"]])e.style.setProperty(`--clio-sb-${s}`,o[`padding${i}`]);this.pad={t:w(o.paddingTop),l:w(o.paddingLeft)},this.overflow={x:o.overflowX,y:o.overflowY},e.classList.add("clio-sb-host");const n=this.anchor=document.createElement("div");n.className="clio-sb-anchor",n.setAttribute("aria-hidden","true"),this.v=this.bar("v"),this.h=this.bar("h"),this.corner=I("clio-sb-corner",n),e.prepend(n),this.need={x:!1,y:!1},this.queued=!1,this.update=()=>{this.queued=!1,this.layout()},this.schedule=()=>{this.queued||(this.queued=!0,requestAnimationFrame(this.update))},e.addEventListener("scroll",this.schedule,{passive:!0}),this.ro=new ResizeObserver(this.schedule),this.ro.observe(e),this.mo=new MutationObserver(this.schedule),this.mo.observe(e,{childList:!0,subtree:!0,characterData:!0}),this.layout()}bar(e){const o=I(`clio-sb clio-sb-${e}`,this.anchor),n={bar:o,axis:e,track:I("clio-sb-track",o),dec:I("clio-sb-button clio-sb-dec",o),inc:I("clio-sb-button clio-sb-inc",o),thumb:I("clio-sb-thumb",o),ghost:null};return o.addEventListener("pointerdown",s=>this.press(n,s)),n}read(){const e=this.host,o=getComputedStyle(e);let n;return{cw:e.clientWidth,ch:e.clientHeight,sw:e.scrollWidth,sh:e.scrollHeight,sl:e.scrollLeft,st:e.scrollTop,size:w(o.getPropertyValue("--clio-scrollbar-size"))||15,len:w(o.getPropertyValue("--clio-scrollbar-thumb-length"))||16,live:o.getPropertyValue("--clio-scrollbar-thumb-tracking").trim()==="live",delay:parseFloat(o.getPropertyValue("--clio-scrollbar-repeat-delay"))||0,smart:!!e.closest('[data-clio-scrolling="smart"]'),overlap:w(o.getPropertyValue("--clio-scrollbar-thumb-overlap")),ox:(n=e.getBoundingClientRect()).left+e.clientLeft+scrollX,oy:n.top+e.clientTop+scrollY}}layout(){let e=this.read();const o={y:this.overflow.y==="scroll"||this.overflow.y==="auto"&&e.sh>e.ch,x:this.overflow.x==="scroll"||this.overflow.x==="auto"&&e.sw>e.cw};(o.x!==this.need.x||o.y!==this.need.y)&&(this.need=o,this.host.classList.toggle("clio-sb-y",o.y),this.host.classList.toggle("clio-sb-x",o.x),e=this.read()),this.m=e;const{cw:n,ch:s,size:i}=e,r=e.smart&&e.live;this.place(this.v,this.need.y,n-i-this.pad.l,-this.pad.t,s-(this.need.x?i:0),e.st,e.sh-s,s/e.sh,r),this.place(this.h,this.need.x,-this.pad.l,s-i-this.pad.t,n-(this.need.y?i:0),e.sl,e.sw-n,n/e.sw,r);const c=this.corner.style;c.display=this.need.x&&this.need.y?"block":"none",c.left=`${n-i-this.pad.l}px`,c.top=`${s-i-this.pad.t}px`,c.width=c.height=`${i}px`}place(e,o,n,s,i,r,c,b,m){const f=e.bar.style,{size:h}=this.m,p=e.axis==="v";if(f.display=o?"block":"none",!o)return;f.left=`${n}px`,f.top=`${s}px`,f.width=`${p?h:i}px`,f.height=`${p?i:h}px`;const v=(he,bt)=>(Math.round(-he)%bt+bt)%bt,E=this.m.ox+this.pad.l+n+(p?1:h),u=this.m.oy+this.pad.t+s+(p?h:1);f.setProperty("--clio-sb-px",`${v(E,8)}px`),f.setProperty("--clio-sb-py",`${v(u,8)}px`),e.bar.classList.toggle("clio-sb-smart",m),e.bar.classList.toggle("clio-sb-off",c<=0);const g=this.m.overlap,a=i-2*h+2*g,y=Math.min(a,m?Math.max(this.m.len,Math.round(a*b)):this.m.len),x=Math.max(0,a-y),M=c>0?Math.round(x*Math.min(1,r/c)):0;Object.assign(e,{track:e.track,length:a,thumbLength:y,range:x,at:M,max:c}),e.thumb.style[p?"height":"width"]=`${y}px`,e.thumb.style[p?"minHeight":"minWidth"]="0",e.thumb.style[p?"top":"left"]=`${(m?0:h)-g}px`,e.thumb.style[p?"width":"height"]="",e.dragging||(e.thumb.style.transform=p?`translateY(${M}px)`:`translateX(${M}px)`)}scrollBy(e,o){this.host.scrollBy(e.axis==="v"?{top:o,behavior:"instant"}:{left:o,behavior:"instant"})}scrollToThumb(e,o){const n=e.range>0?Math.round(o/e.range*e.max):0;e.axis==="v"?this.host.scrollTop=n:this.host.scrollLeft=n}press(e,o){if(o.button!==0||e.bar.classList.contains("clio-sb-off"))return;o.preventDefault();const n=e.axis==="v",s=this.m;e.bar.setPointerCapture(o.pointerId);const i=e.bar.getBoundingClientRect(),r=u=>n?u.clientY-i.top:u.clientX-i.left,b=(e.bar.classList.contains("clio-sb-smart")?0:s.size)-s.overlap,m=o.target;let f=0,h;const p=(u,g)=>{u(),f=setTimeout(function a(){g()&&u(),f=setTimeout(a,qt)},s.delay||qt)};if(m===e.dec||m===e.inc){const u=m,g=u===e.dec?-1:1;let a=!0;u.classList.add("clio-held");const y=x=>{const M=u.getBoundingClientRect();return x.clientX>=M.left&&x.clientX<M.right&&x.clientY>=M.top&&x.clientY<M.bottom};e.onmove=x=>{a=y(x),u.classList.toggle("clio-held",a)},p(()=>this.scrollBy(e,g*Pt),()=>a),h=()=>u.classList.remove("clio-held")}else if(m===e.thumb){const u=r(o)-b-e.at,g=s.live;e.dragging=!0,g||(e.ghost=I("clio-sb-ghost",e.bar),e.ghost.style.cssText=n?`left:1px;right:0;top:${s.size}px;height:${e.thumbLength}px`:`top:1px;bottom:0;left:${s.size}px;width:${e.thumbLength}px`);let a=e.at;e.onmove=y=>{if(a=Math.max(0,Math.min(e.range,Math.round(r(y)-b-u))),g){this.scrollToThumb(e,a),e.thumb.style.transform=n?`translateY(${a}px)`:`translateX(${a}px)`;return}const x=`${-a}px`;e.ghost.style.transform=n?`translateY(${a}px)`:`translateX(${a}px)`,e.ghost.style.setProperty(n?"--clio-sb-gy":"--clio-sb-gx",x)},e.onmove(o),h=()=>{e.dragging=!1,e.ghost&&(e.ghost.remove(),e.ghost=null,this.scrollToThumb(e,a)),this.schedule()}}else{let u=r(o);const g=(n?s.ch:s.cw)-Pt;e.onmove=y=>{u=r(y)};const a=()=>{const y=b+e.at;return u<y?-1:u>=y+e.thumbLength?1:0};p(()=>{const y=a();y&&this.scrollBy(e,y*g)},()=>!!a())}const v=u=>{u.pointerId===o.pointerId&&(clearTimeout(f),e.bar.removeEventListener("pointermove",E),e.bar.removeEventListener("pointerup",v),e.bar.removeEventListener("pointercancel",v),e.onmove=null,h&&h())},E=u=>{u.pointerId===o.pointerId&&e.onmove&&e.onmove(u)};e.bar.addEventListener("pointermove",E),e.bar.addEventListener("pointerup",v),e.bar.addEventListener("pointercancel",v)}destroy(){this.ro.disconnect(),this.mo.disconnect(),this.host.removeEventListener("scroll",this.schedule),this.anchor.remove(),this.host.classList.remove("clio-sb-host","clio-sb-x","clio-sb-y");for(const e of["pt","pr","pb","pl"])this.host.style.removeProperty(`--clio-sb-${e}`)}}const ie=new Set(["block","flow-root","list-item"]);function ct(t=document){const e=[],o=t instanceof Element&&t.matches(Tt)?[t]:[];o.push(...t.querySelectorAll?t.querySelectorAll(Tt):[]);for(const n of o){if(H.has(n)||L(n)||n.closest("[data-clio-scrollbars=native]"))continue;const s=getComputedStyle(n);if(!ie.has(s.display)||![s.overflowX,s.overflowY].some(r=>r==="auto"||r==="scroll"))continue;const i=new se(n);H.set(n,i),_.add(i),e.push(n)}return e}const Rt=t=>{if(L(t)||t.hasAttribute("data-clio-menus"))return;t.setAttribute("data-clio-menus","");const e=st(t),o=e.find(n=>T(n).tabIndex===0&&T(n).hasAttribute("tabindex"))||e[0];o&&rt(t,o);for(const n of t.querySelectorAll(`:is(${k}) > li > :is(a, button)`))n.hasAttribute("tabindex")||(n.tabIndex=-1)},It=t=>{for(const e of t.querySelectorAll?t.querySelectorAll(S):[])Rt(e);t instanceof Element&&t.matches(S)&&Rt(t)};function Dt(){D=document.createElement("div"),D.className="clio-live",D.setAttribute("aria-live","polite"),document.body.appendChild(D),zt(document),ct(document),It(document),N(),new MutationObserver(t=>{for(const e of t)for(const o of e.addedNodes)o instanceof Element&&!o.classList.contains("clio-sb-anchor")&&!o.closest(".clio-sb-anchor")&&(ct(o),It(o),!o.classList.contains("clio-move-menu")&&!o.classList.contains("clio-outline")&&!o.classList.contains("clio-live")&&zt(o))}).observe(document.documentElement,{childList:!0,subtree:!0}),new MutationObserver(()=>{N();for(const t of _)t.host.isConnected&&t.schedule()}).observe(document.documentElement,{attributes:!0,subtree:!0,attributeFilter:["data-era","data-clio-scrolling"]})}const Bt=(t,e,o=0)=>{const n=document.createElement("div");return n.className="clio-outline",n.setAttribute("aria-hidden","true"),Object.assign(n.style,{left:`${Math.round(t.left)}px`,top:`${Math.round(t.top)}px`,width:`${Math.round(t.width)}px`,height:`${Math.round(t.height)}px`,padding:`${e+o}px`}),Ot(n,Math.round(t.left),Math.round(t.top)),n},Ot=(t,e,o)=>{t.style.backgroundPosition=`${Math.round(e+o+scrollX+scrollY)&1}px 0`},Ft=t=>w(getComputedStyle(t).getPropertyValue("--clio-drag-outline-width"))||1;document.addEventListener("pointerdown",t=>{if(t.button!==0||!(t.target instanceof Element))return;const e=t.target.closest(".window > .title-bar");if(!e||t.target.closest("button, a, input, select, .close, .close-box, .resize, .resize-box, .zoom, .shade, .shade-box, .collapse")||L(e))return;const o=e.parentElement,n=getComputedStyle(o);if(!(n.position==="absolute"||n.position==="fixed"||o.hasAttribute("data-clio-drag")))return;t.preventDefault();const s=getComputedStyle(o),i=w(s.getPropertyValue("--clio-drag-outline-extra")),r=w(s.getPropertyValue("--clio-drag-outline-margin")),c=s.getPropertyValue("--clio-drag-outline-extra-y").trim()?w(s.getPropertyValue("--clio-drag-outline-extra-y")):i,b=o.getBoundingClientRect(),m={left:b.left-r,top:b.top-r,width:b.width+i+2*r,height:b.height+c+2*r},f=Bt(m,Ft(o),r);(o.closest("[data-era]")||document.body).appendChild(f);const h=t.clientX,p=t.clientY;let v=0,E=0;const u=a=>{a.pointerId===t.pointerId&&(v=Math.round(a.clientX-h),E=Math.round(a.clientY-p),f.style.transform=`translate(${v}px, ${E}px)`,Ot(f,Math.round(m.left)+v,Math.round(m.top)+E))},g=a=>{a.pointerId===t.pointerId&&(document.removeEventListener("pointermove",u,!0),document.removeEventListener("pointerup",g,!0),document.removeEventListener("pointercancel",g,!0),f.remove(),!(a.type==="pointercancel"||!v&&!E)&&G(o,v,E))};document.addEventListener("pointermove",u,!0),document.addEventListener("pointerup",g,!0),document.addEventListener("pointercancel",g,!0)});function G(t,e,o,n){const s=getComputedStyle(t);let i=w(s.left)+e,r=w(s.top)+o;const c=t.offsetParent,b=s.position==="fixed"||!c||c===document.body||c===document.documentElement?{w:document.documentElement.clientWidth,h:innerHeight}:{w:c.clientWidth,h:c.clientHeight};i=Math.max(0,Math.min(i,b.w-t.offsetWidth)),r=Math.max(0,Math.min(r,b.h-t.offsetHeight)),t.style.left=`${Math.round(i)}px`,t.style.top=`${Math.round(r)}px`;for(const m of _)t.contains(m.host)&&m.schedule();n&&ut(`${at(t)} ${n}`),t.dispatchEvent(new CustomEvent("clio:move",{bubbles:!0,detail:{dx:e,dy:o}}))}const at=t=>{const e=t.querySelector(":scope > .title-bar :is(.title, h1, h2, h3)");return e&&e.textContent.trim()||"Window"};let D=null;function ut(t){D&&(D.textContent=t,clearTimeout(ut.t),ut.t=setTimeout(()=>{D.textContent=""},1e3))}const dt=16,re=[["Move left",-1,0,"moved left"],["Move right",1,0,"moved right"],["Move up",0,-1,"moved up"],["Move down",0,1,"moved down"]];function le(t){const e=t.querySelector(":scope > .title-bar");if(!e||e.querySelector(":scope > .clio-move"))return;e.classList.add("clio-drag-bar");const o=document.createElement("button");o.type="button",o.className="clio-move",o.setAttribute("aria-haspopup","menu"),o.setAttribute("aria-expanded","false"),o.setAttribute("aria-label",`Move ${at(t)}. Arrow keys move it.`),e.prepend(o)}const ce=t=>{const e=getComputedStyle(t).position;return e==="absolute"||e==="fixed"||t.hasAttribute("data-clio-drag")};function zt(t){const e=t instanceof Element&&t.matches(".window")?[t]:[];t.querySelectorAll&&e.push(...t.querySelectorAll(".window"));for(const o of e)!L(o)&&ce(o)&&le(o)}let q=null;function z(t){if(!q)return;const{menu:e,handle:o}=q;q=null,e.remove(),o.setAttribute("aria-expanded","false"),t&&o.focus({preventScroll:!0})}function Nt(t,e){z(!1);const o=t.querySelector(":scope > .title-bar > .clio-move"),n=document.createElement("ul");n.className="menu clio-move-menu",n.setAttribute("role","menu"),n.setAttribute("aria-label",`Move ${at(t)}`);for(const[i,r,c,b]of re){const m=document.createElement("li");m.setAttribute("role","none");const f=document.createElement("button");f.type="button",f.setAttribute("role","menuitem"),f.tabIndex=-1,f.textContent=i,f.addEventListener("click",()=>{z(!0),G(t,r*dt,c*dt,b)}),m.appendChild(f),n.appendChild(m)}const s=e||o.getBoundingClientRect();Object.assign(n.style,{position:"fixed",left:`${Math.round(s.left)}px`,top:`${Math.round(s.top+(s.height||0))}px`,zIndex:"2147483000"}),(t.closest("[data-era]")||document.body).appendChild(n),o.setAttribute("aria-expanded","true"),q={menu:n,handle:o,win:t},n.querySelector("button").focus({preventScroll:!0}),n.addEventListener("keydown",i=>{const r=[...n.querySelectorAll("button")],c=r.indexOf(document.activeElement);i.key==="ArrowDown"||i.key==="ArrowUp"?(i.preventDefault(),r[(c+(i.key==="ArrowDown"?1:r.length-1))%r.length].focus()):i.key==="Home"||i.key==="End"?(i.preventDefault(),r[i.key==="Home"?0:r.length-1].focus()):i.key==="Escape"?(i.preventDefault(),i.stopPropagation(),z(!0)):i.key==="Tab"&&z(!1)}),n.addEventListener("focusout",i=>{i.relatedTarget instanceof Node&&n.contains(i.relatedTarget)||setTimeout(()=>{q&&!q.menu.contains(document.activeElement)&&z(!1)})})}document.addEventListener("keydown",t=>{const e=t.target instanceof Element?t.target.closest(".clio-move"):null;if(!e||t.defaultPrevented)return;const o={ArrowLeft:[-1,0,"moved left"],ArrowRight:[1,0,"moved right"],ArrowUp:[0,-1,"moved up"],ArrowDown:[0,1,"moved down"]}[t.key];if(!o)return;t.preventDefault();const n=t.shiftKey?1:dt;G(e.closest(".window"),o[0]*n,o[1]*n,o[2])}),document.addEventListener("click",t=>{const e=t.target instanceof Element?t.target.closest(".clio-move"):null;e&&(q&&q.handle===e?z(!0):Nt(e.closest(".window")))}),document.addEventListener("contextmenu",t=>{const e=t.target instanceof Element?t.target.closest(".window > .title-bar"):null;!e||!e.querySelector(":scope > .clio-move")||t.target.closest("button:not(.clio-move)")||(t.preventDefault(),Nt(e.parentElement,{left:t.clientX,top:t.clientY,height:0}))}),addEventListener("resize",()=>requestAnimationFrame(()=>{for(const t of document.querySelectorAll(".clio-move")){const e=t.closest(".window");e&&G(e,0,0)}}));function ae(t,e,o={}){const n=u=>u instanceof Element?u.getBoundingClientRect():u,s=n(t),i=n(e);if(!s||!i||j())return Promise.resolve();const r=e instanceof Element&&e.closest("[data-era]")||t instanceof Element&&t.closest("[data-era]")||document.body,c=getComputedStyle(r),b=(u,g)=>{const a=parseFloat(c.getPropertyValue(u));return Number.isFinite(a)?a:g},m=b("--clio-zoom-count",8),f=b("--clio-zoom-steps",m),h=b("--clio-zoom-ratio",1.6),p=b("--clio-zoom-offset",1),v=b("--clio-zoom-keep",4)||1/0,E=[];for(let u=1;u<=m;u++){const g=(h**u-p)/(h**f-p),a=(x,M)=>x+(M-x)*g,y=Bt({left:a(s.left,i.left),top:a(s.top,i.top),width:a(s.width,i.width),height:a(s.height,i.height)},Ft(r));y.style.setProperty("--clio-drag-outline-extra","0px"),y.style.opacity="0",r.appendChild(y),E.push(y)}return o.closing&&E.reverse(),new Promise(u=>{let g=0;const a=()=>{E.forEach((y,x)=>{y.style.opacity=x<=g&&x>g-v?"1":"0"}),++g<m+(Number.isFinite(v)?v-1:0)?setTimeout(a,C):(E.forEach(y=>y.remove()),u())};a()})}function mt(t,e=!t.classList.contains("collapsed")){t.classList.toggle("collapsed",e);const o=t.querySelector(":scope > .title-bar > :is(.shade, .shade-box, .collapse)");o&&o.setAttribute("aria-expanded",String(!e)),tt(e?"collapse":"expand"),t.dispatchEvent(new CustomEvent("clio:collapse",{bubbles:!0,detail:{collapsed:e}}))}document.addEventListener("click",t=>{if(!(t.target instanceof Element))return;const e=t.target.closest(".window > .title-bar > :is(.shade, .shade-box, .collapse)");e&&!L(e)&&!t.defaultPrevented&&mt(e.closest(".window"))}),document.addEventListener("dblclick",t=>{if(!(t.target instanceof Element))return;const e=t.target.closest(".window > .title-bar");if(!e||t.target.closest("button")||L(e))return;const o=e.closest("[data-clio-shade]");o&&/\bdblclick\b/.test(o.getAttribute("data-clio-shade"))&&mt(e.parentElement)});const ue="button, .btn, .btn-default, .standard-button, .bevel, [role=tab], .title-bar > :is(.title, h1, h2, h3)",J=new Map,Yt=t=>t.matches(".title-bar > *");let ft=!1;function Xt(){ft=!1;for(const[e,o]of J)Yt(e)?e.style.marginRight=o:e.style.paddingRight=o;J.clear();const t=[];for(const e of document.querySelectorAll(ue)){if(L(e)||e.closest('[data-clio-centre="off"]')||!e.firstChild||!e.getClientRects().length)continue;const o=getComputedStyle(e);if(o.whiteSpace!=="nowrap"&&e.getClientRects().length>1)continue;const n=document.createRange();n.selectNodeContents(e);const s=n.getBoundingClientRect();if(!s.width)continue;const i=(s.left+scrollX)%1;Math.abs(i-.5)<.26&&t.push([e,o])}for(const[e,o]of t)Yt(e)?(J.set(e,e.style.marginRight),e.style.marginRight=`${(parseFloat(o.marginRight)||0)+1}px`):(J.set(e,e.style.paddingRight),e.style.paddingRight=`${(parseFloat(o.paddingRight)||0)+1}px`)}const N=()=>{ft||(ft=!0,requestAnimationFrame(Xt))};document.fonts&&document.fonts.ready.then(N),addEventListener("resize",N),new MutationObserver(t=>{for(const e of t)for(const o of e.addedNodes)if(o.nodeType===3||o instanceof Element&&!o.closest(".clio-sb-anchor, .clio-outline, .clio-popup-menu, .clio-live"))return N();for(const e of t)if(e.type==="characterData")return N()}).observe(document.documentElement,{childList:!0,subtree:!0,characterData:!0});const de="input:is([type=text], [type=search], [type=password], [type=email], [type=url], [type=tel], [type=number], :not([type])), textarea",me=["boxSizing","width","paddingTop","paddingRight","paddingBottom","paddingLeft","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","fontFamily","fontSize","fontWeight","fontStyle","fontStretch","letterSpacing","wordSpacing","lineHeight","textTransform","textIndent","tabSize"];let A=null,R=null,K=0,pt=!1,ht=!1;const Vt=t=>t instanceof HTMLElement&&t.matches(de)&&!!t.closest(".window")&&!L(t)&&!t.closest('[data-clio-caret="off"]')&&!t.readOnly&&!t.disabled;function Z(){clearInterval(K),K=0,A&&A.remove(),R&&R.classList.remove("clio-caret-field"),A=R=null}function fe(){ht=!1;const t=document.activeElement;if(!Vt(t)||pt||t.selectionStart==null||t.selectionStart!==t.selectionEnd)return Z();const e=getComputedStyle(t),o=t.getBoundingClientRect(),n=t.tagName==="TEXTAREA",s=document.createElement("div");for(const a of me)s.style[a]=e[a];Object.assign(s.style,{position:"absolute",visibility:"hidden",left:"-9999px",top:"0",borderStyle:"solid",whiteSpace:n?"pre-wrap":"pre",overflowWrap:n?"break-word":"normal",height:"auto"});const i=t.type==="password"?"\u2022".repeat(t.value.length):t.value;s.textContent=i.slice(0,t.selectionStart);const r=document.createElement("span");r.textContent="\u200B",s.appendChild(r),document.body.appendChild(s);const c=r.offsetLeft,b=r.offsetTop,m=r.offsetHeight;s.remove();const f=w(e.getPropertyValue("--clio-caret-height"))||Math.round(parseFloat(e.lineHeight))||m,h=parseFloat(e.borderTopWidth)||0,p=parseFloat(e.borderBottomWidth)||0,v=n?b-Math.round((f-m)/2)-t.scrollTop:h+Math.floor((o.height-h-p-f)/2),E=c-1-t.scrollLeft;if(!(E>=0&&E<=o.width&&v+f>0&&v<o.height)){A&&(A.hidden=!0);return}R!==t&&(Z(),R=t,t.classList.add("clio-caret-field")),A||(A=document.createElement("div"),A.className="clio-caret",A.setAttribute("aria-hidden","true"),document.body.appendChild(A)),A.hidden=!1,Object.assign(A.style,{left:`${Math.round(o.left+scrollX+E)}px`,top:`${Math.round(o.top+scrollY+v)}px`,height:`${f}px`}),A.classList.remove("clio-caret-off"),clearInterval(K),K=0;const g=w(e.getPropertyValue("--clio-caret-ticks"))||32;j()||(K=setInterval(()=>A&&A.classList.toggle("clio-caret-off"),g*C))}const U=()=>{ht||(ht=!0,requestAnimationFrame(fe))};for(const t of["focusin","selectionchange","input","keyup","pointerup","select"])document.addEventListener(t,U);matchMedia("(prefers-reduced-motion: reduce)").addEventListener("change",()=>{R&&U()}),document.addEventListener("focusout",()=>requestAnimationFrame(()=>{Vt(document.activeElement)||Z()})),document.addEventListener("compositionstart",()=>{pt=!0,Z()}),document.addEventListener("compositionend",()=>{pt=!1,U()}),addEventListener("scroll",()=>{R&&U()},{capture:!0,passive:!0}),addEventListener("resize",()=>{R&&U()});const Wt={};function tt(t){const e=Wt[t];if(!(!e||!document.documentElement.hasAttribute("data-clio-sounds")))try{new Audio(e).play().catch(()=>{})}catch{}}const et=".alert-box, [role=alertdialog]",pe=t=>t.isConnected&&t.getClientRects().length>0;new MutationObserver(t=>{if(document.documentElement.hasAttribute("data-clio-sounds"))for(const e of t){const o=e.type==="attributes"?[e.target]:[...e.addedNodes].filter(n=>n instanceof Element);for(const n of o)if((n.matches(et)||n.querySelector(et))&&pe(n.matches(et)?n:n.querySelector(et)))return tt("alert")}}).observe(document.documentElement,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["open","hidden"]}),window.clio={version:"0.12.0",zoomRects:ae,collapse:mt,sounds:Wt,play:tt,scrollbars:ct,unscroll(t){const e=H.get(t);e&&(e.destroy(),H.delete(t),_.delete(e))},refresh(t){const e=H.get(t);e&&e.layout()},centre:Xt},document.readyState==="loading"?document.addEventListener("DOMContentLoaded",Dt,{once:!0}):Dt()})();