@editora/ui-core 0.1.13 → 0.1.15

package/dist/dialog.cjs.js

@@ -372,10 +372,10 @@
       box-shadow: none;
     }
   }
-`,W='button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';function g(n,t){if(n==null)return t;const i=n.trim().toLowerCase();return i!=="false"&&i!=="0"&&i!=="off"}function a(n){return n.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function S(){return typeof window<"u"&&typeof document<"u"}function C(n){return typeof requestAnimationFrame=="function"?requestAnimationFrame(()=>n()):window.setTimeout(n,16)}function p(n){if(n){if(typeof cancelAnimationFrame=="function"){cancelAnimationFrame(n);return}window.clearTimeout(n)}}const E=class l extends z.ElementBase{constructor(){super(),this._isActive=!1,this._uid=Math.random().toString(36).slice(2,10),this._dialogId=this._uid,this._lastFocused=null,this._terminalEmitted=!1,this._closeMeta=null,this._runtimeError="",this._config={},this._dismissableLayer=null,this._focusScope=null,this._disconnectCleanupFrame=0,this._restoreFocusFrame=0,this._onClick=this._onClick.bind(this),this._onKeyDown=this._onKeyDown.bind(this),this._onFocusIn=this._onFocusIn.bind(this),this._onSubmit=this._onSubmit.bind(this)}static get observedAttributes(){return["open","headless","title","description","closable","dismissible","close-on-overlay","close-on-backdrop","close-on-esc","lock-while-loading","size","state","role","initial-focus","submit-text","cancel-text","loading-text","error-message","aria-label","aria-labelledby","aria-describedby"]}connectedCallback(){this._disconnectCleanupFrame&&(p(this._disconnectCleanupFrame),this._disconnectCleanupFrame=0),super.connectedCallback(),this.root.addEventListener("click",this._onClick),this.root.addEventListener("keydown",this._onKeyDown),this.addEventListener("submit",this._onSubmit),this._syncFromAttributes(),this._syncOpenState()}disconnectedCallback(){this.root.removeEventListener("click",this._onClick),this.root.removeEventListener("keydown",this._onKeyDown),this.removeEventListener("submit",this._onSubmit),this._disconnectCleanupFrame&&p(this._disconnectCleanupFrame),this._restoreFocusFrame&&(p(this._restoreFocusFrame),this._restoreFocusFrame=0),this._disconnectCleanupFrame=C(()=>{this._disconnectCleanupFrame=0,!this.isConnected&&(this._isActive&&!this._terminalEmitted?this.close("dismiss","unmount"):(this._destroyRuntimeControllers(),this._deactivate()),super.disconnectedCallback())})}attributeChangedCallback(t,i,e){if(i!==e){if(t==="open"){this._syncOpenState();return}t==="state"&&e!=="error"&&(this._runtimeError=""),this._syncFromAttributes(),this.isConnected&&this.requestRender()}}get open(){return this.hasAttribute("open")}set open(t){t?this.setAttribute("open",""):this.close("dismiss","programmatic")}get dismissible(){return g(this.getAttribute("dismissible")??this.getAttribute("closable"),!0)}set dismissible(t){this.setAttribute("dismissible",String(t)),this.setAttribute("closable",String(t))}get closeOnOverlay(){return g(this.getAttribute("close-on-overlay")??this.getAttribute("close-on-backdrop"),!0)}set closeOnOverlay(t){this.setAttribute("close-on-overlay",String(t)),this.setAttribute("close-on-backdrop",String(t))}get closeOnEsc(){return g(this.getAttribute("close-on-esc"),!0)}set closeOnEsc(t){this.setAttribute("close-on-esc",String(t))}get lockWhileLoading(){return g(this.getAttribute("lock-while-loading"),!0)}set lockWhileLoading(t){this.setAttribute("lock-while-loading",String(t))}get state(){const t=this.getAttribute("state");return t==="loading"||t==="error"||t==="success"?t:"idle"}set state(t){if(t==="idle"){this.removeAttribute("state");return}this.setAttribute("state",t)}get dialogId(){return this._dialogId}set dialogId(t){this._dialogId=t||this._uid,this.requestRender()}get config(){return this._config}set config(t){this._config=t||{},this._config.id&&(this._dialogId=this._config.id),this._config.dismissible!=null&&(this.dismissible=!!this._config.dismissible),this._config.closeOnOverlay!=null&&(this.closeOnOverlay=!!this._config.closeOnOverlay),this._config.closeOnEsc!=null&&(this.closeOnEsc=!!this._config.closeOnEsc),this._config.lockWhileLoading!=null&&(this.lockWhileLoading=!!this._config.lockWhileLoading),this._config.size&&this.setAttribute("size",this._config.size),this._config.role&&this.setAttribute("role",this._config.role),this._config.initialFocus&&this.setAttribute("initial-focus",this._config.initialFocus),this._config.ariaLabel&&this.setAttribute("aria-label",this._config.ariaLabel),this._config.ariaLabelledby&&this.setAttribute("aria-labelledby",this._config.ariaLabelledby),this._config.ariaDescribedby&&this.setAttribute("aria-describedby",this._config.ariaDescribedby),this._config.errorMessage&&(this._runtimeError=this._config.errorMessage),this.requestRender()}openDialog(){this.setAttribute("open","")}closeDialog(t="programmatic"){if(!this.hasAttribute("open"))return;const i=new CustomEvent("request-close",{detail:{reason:t},bubbles:!0,cancelable:!0,composed:!0});this.dispatchEvent(i);const e=new CustomEvent("ui-request-close",{detail:{id:this.dialogId||this._uid,reason:t},bubbles:!0,cancelable:!0,composed:!0});if(this.dispatchEvent(e),!(i.defaultPrevented||e.defaultPrevented)){if(t==="submit"){this.close("submit");return}if(t==="cancel"){this.close("cancel");return}if(t==="overlay"){this.close("dismiss","overlay");return}if(t==="escape"){this.close("dismiss","esc");return}if(t==="button"){this.close("dismiss","close-icon");return}this.close("dismiss","programmatic")}}close(t="dismiss",i,e){this._terminalEmitted||(this._closeMeta={action:t,source:i,reason:e},this.hasAttribute("open")&&this.removeAttribute("open"),this._syncOpenState())}setError(t){this._runtimeError=t,this.state=t?"error":"idle",this.requestRender()}clearError(){this._runtimeError="",this.state==="error"&&(this.state="idle"),this.requestRender()}_syncFromAttributes(){!this.hasAttribute("dismissible")&&this.hasAttribute("closable")&&this.setAttribute("dismissible",this.getAttribute("closable")||"true"),!this.hasAttribute("closable")&&this.hasAttribute("dismissible")&&this.setAttribute("closable",this.getAttribute("dismissible")||"true"),!this.hasAttribute("close-on-overlay")&&this.hasAttribute("close-on-backdrop")&&this.setAttribute("close-on-overlay",this.getAttribute("close-on-backdrop")||"true"),!this.hasAttribute("close-on-backdrop")&&this.hasAttribute("close-on-overlay")&&this.setAttribute("close-on-backdrop",this.getAttribute("close-on-overlay")||"true"),this.hasAttribute("role")||this.setAttribute("role","dialog")}_syncOpenState(){const t=this.hasAttribute("open");t&&!this._isActive?this._activate():!t&&this._isActive&&this._deactivate(),this._syncOpenUi()}_activate(){this._isActive=!0,this._terminalEmitted=!1,this._closeMeta=null,l._openStack.includes(this)||l._openStack.push(this),this._lastFocused=document.activeElement||null,F.acquireBodyScrollLock();const t=this.dialogId||this._uid;this._dispatchWithLegacy("ui-open","open",{id:t}),this.dispatchEvent(new CustomEvent("show",{bubbles:!0,composed:!0})),this._syncOpenUi(),this._syncRuntimeControllers()}_deactivate(){if(!this._isActive)return;this._isActive=!1,this._destroyRuntimeControllers();const t=l._openStack.lastIndexOf(this);if(t>=0&&l._openStack.splice(t,1),F.releaseBodyScrollLock(),!this._terminalEmitted){const e=this._closeMeta||{action:"dismiss",source:"abort"},s=this.dialogId||this._uid;e.action==="cancel"?this._dispatchWithLegacy("ui-cancel","cancel",{id:s}):this._dispatchWithLegacy("ui-dismiss","dismiss",{id:s,source:e.source||"abort",reason:e.reason}),this._dispatchWithLegacy("ui-close","close",{id:s,action:e.action,source:e.source,reason:e.reason}),this.dispatchEvent(new CustomEvent("hide",{bubbles:!0,composed:!0})),this._terminalEmitted=!0,this._closeMeta=null}const i=this._lastFocused;this._lastFocused=null,i&&this._canRestoreFocus(i)&&(this._restoreFocusFrame&&p(this._restoreFocusFrame),this._restoreFocusFrame=C(()=>{this._restoreFocusFrame=0;try{this._canRestoreFocus(i)&&i.focus()}catch{}})),this._syncOpenUi()}_dispatchWithLegacy(t,i,e,s=!1){const o=new CustomEvent(t,{detail:e,bubbles:!0,composed:!0,cancelable:s});this.dispatchEvent(o);const r=new CustomEvent(i,{detail:e,bubbles:!0,composed:!0,cancelable:s});return this.dispatchEvent(r),o}_isTopMost(){if(!this._isActive)return!1;const t=l._openStack;return t.length>0&&t[t.length-1]===this}_queryPanel(){return this.root.querySelector(".panel")}_canRestoreFocus(t){if(!t||!t.isConnected||t.disabled||t.getAttribute("aria-hidden")==="true")return!1;if(!S())return!0;const i=window.getComputedStyle(t);return i.display!=="none"&&i.visibility!=="hidden"}_collectFocusable(t){return Array.from(t.querySelectorAll(W)).filter(i=>{if(i.disabled||i.getAttribute("aria-hidden")==="true")return!1;const s=S()?window.getComputedStyle(i):null;return!(s&&(s.display==="none"||s.visibility==="hidden"))})}_focusInitial(){if(!this.open)return;const t=this._queryPanel();if(!t)return;const i=this.getAttribute("initial-focus")||this._config.initialFocus||"";if(i){const r=t.querySelector(i);if(r&&typeof r.focus=="function"){r.focus();return}}const e=this._collectFocusable(t),o=e.find(r=>r.hasAttribute("autofocus"))||e[0]||t;!o.hasAttribute("tabindex")&&o===t&&o.setAttribute("tabindex","-1");try{o.focus()}catch{}}_onFocusIn(t){!this.open||this._isTopMost()}_handleTab(t){t.key}_destroyRuntimeControllers(){var t,i;(t=this._dismissableLayer)==null||t.destroy(),this._dismissableLayer=null,(i=this._focusScope)==null||i.destroy(),this._focusScope=null}_syncOpenUi(){const t=this.root.querySelector(".overlay"),i=this._queryPanel(),e=this.open;!t||!i||(t.hidden=!e,t.setAttribute("data-open",String(e)),t.setAttribute("aria-hidden",e?"false":"true"),i.setAttribute("aria-hidden",e?"false":"true"))}_syncRuntimeControllers(){if(this._destroyRuntimeControllers(),!this.open||!this._isTopMost())return;const t=this._queryPanel();t&&(this._dismissableLayer=M.createDismissableLayer({node:t,closeOnEscape:this.closeOnEsc,closeOnPointerOutside:this.closeOnOverlay,closeOnFocusOutside:!1,onBeforeDismiss:(i,e)=>this._isInteractionLocked()?!1:i==="escape-key"?(this.closeDialog("escape"),!1):(i==="outside-pointer"&&this.closeDialog("overlay"),!1)}),this._focusScope=R.createFocusScope({node:t,trapped:!0,loop:!0,restoreFocus:!1,autoFocus:"first",initialFocus:()=>{const i=this.getAttribute("initial-focus")||this._config.initialFocus||"";return i?t.querySelector(i):null}}))}_collectFormData(t){const i=this._queryPanel(),e=t||this.querySelector("form")||(i==null?void 0:i.querySelector("form"))||null;if(!(e instanceof HTMLFormElement)||typeof FormData>"u")return;const s=new FormData(e),o={};for(const[r,h]of s.entries()){const c=String(h);if(o[r]==null){o[r]=c;continue}const d=o[r];Array.isArray(d)?d.push(c):o[r]=[d,c]}return Object.keys(o).length?o:void 0}_resolveSubmitForm(t){var s;if(t){const o=t.closest("form");if(o instanceof HTMLFormElement&&this.contains(o))return o}const i=this.querySelector("form");if(i instanceof HTMLFormElement)return i;const e=(s=this._queryPanel())==null?void 0:s.querySelector("form");return e instanceof HTMLFormElement?e:null}_isInteractionLocked(){return this.state==="loading"&&this.lockWhileLoading}_requestDismiss(t,i){if(!this._isInteractionLocked()){if(t==="overlay"){this.closeDialog("overlay");return}if(t==="esc"){this.closeDialog("escape");return}if(t==="close-icon"){this.closeDialog("button");return}this.close("dismiss",t,i)}}_handleSubmit(t){if(this._isInteractionLocked())return;const i=t??this._resolveSubmitForm();if(i&&typeof i.reportValidity=="function"&&!i.reportValidity())return;const e={id:this.dialogId||this._uid,formData:this._collectFormData(i)};this._dispatchWithLegacy("ui-submit","submit",e,!0).defaultPrevented||this.closeDialog("submit")}_handleCancel(){this._isInteractionLocked()||this.closeDialog("cancel")}_onClick(t){if(!this.open||!this._isTopMost())return;const i=t.target;if(i){if(!i.closest(".panel")&&i.closest(".overlay")&&this.closeOnOverlay){this._requestDismiss("overlay");return}if(i.closest(".close")){this._requestDismiss("close-icon");return}if(i.closest(".btn-submit")){this._handleSubmit();return}i.closest(".btn-cancel")&&this._handleCancel()}}_onSubmit(t){if(!this.open||!this._isTopMost())return;const i=t.target;i&&i!==this&&this.contains(i)&&(t.preventDefault(),t.stopPropagation(),this._handleSubmit(i))}_onKeyDown(t){if(!(!this.open||!this._isTopMost())&&t.key==="Escape"){if(!this.closeOnEsc)return;t.preventDefault(),t.stopPropagation(),this._requestDismiss("esc");return}}render(){const t=this._config.title??this.getAttribute("title")??"",i=this._config.description??this.getAttribute("description")??"",e=this._config.submitText??this.getAttribute("submit-text")??"Submit",s=this._config.cancelText??this.getAttribute("cancel-text")??"Cancel",o=this._config.loadingText??this.getAttribute("loading-text")??"Working...",r=t.trim(),h=i.trim(),c=!!this.querySelector('[slot="title"]'),d=!!this.querySelector('[slot="description"]'),f=!!(r||c),m=!!(h||d),O=!!this.querySelector('[slot="content"]'),D=!!this.querySelector('[slot="footer"]'),q=this._config.showCancel??!0,$=this._config.showClose??this.dismissible,v=this._runtimeError||this._config.errorMessage||this.getAttribute("error-message")||"",b=this.state==="loading",y=`ui-dialog-title-${this._uid}`,x=`ui-dialog-description-${this._uid}`,A=`ui-dialog-error-${this._uid}`,T=this.getAttribute("aria-label")||"",I=this.getAttribute("aria-labelledby")||"",k=this.getAttribute("aria-describedby")||"",_=I||(f?y:""),w=T||(_?"":"Dialog"),u=[];k?u.push(k):(m&&u.push(x),v&&u.push(A));const B=f||m?`
+`,W='button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';function g(a,t){if(a==null)return t;const i=a.trim().toLowerCase();return i!=="false"&&i!=="0"&&i!=="off"}function n(a){return a.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function S(){return typeof window<"u"&&typeof document<"u"}function C(a){return window.setTimeout(a,16)}function p(a){a&&window.clearTimeout(a)}const E=class l extends z.ElementBase{constructor(){super(),this._isActive=!1,this._uid=Math.random().toString(36).slice(2,10),this._dialogId=this._uid,this._lastFocused=null,this._terminalEmitted=!1,this._closeMeta=null,this._runtimeError="",this._config={},this._dismissableLayer=null,this._focusScope=null,this._disconnectCleanupFrame=0,this._restoreFocusFrame=0,this._onClick=this._onClick.bind(this),this._onKeyDown=this._onKeyDown.bind(this),this._onFocusIn=this._onFocusIn.bind(this),this._onSubmit=this._onSubmit.bind(this)}static get observedAttributes(){return["open","headless","title","description","closable","dismissible","close-on-overlay","close-on-backdrop","close-on-esc","lock-while-loading","size","state","role","initial-focus","submit-text","cancel-text","loading-text","error-message","aria-label","aria-labelledby","aria-describedby"]}connectedCallback(){this._disconnectCleanupFrame&&(p(this._disconnectCleanupFrame),this._disconnectCleanupFrame=0),super.connectedCallback(),this.root.addEventListener("click",this._onClick),this.root.addEventListener("keydown",this._onKeyDown),this.addEventListener("submit",this._onSubmit),this._syncFromAttributes(),this._syncOpenState()}disconnectedCallback(){this.root.removeEventListener("click",this._onClick),this.root.removeEventListener("keydown",this._onKeyDown),this.removeEventListener("submit",this._onSubmit),this._disconnectCleanupFrame&&p(this._disconnectCleanupFrame),this._restoreFocusFrame&&(p(this._restoreFocusFrame),this._restoreFocusFrame=0),this._disconnectCleanupFrame=C(()=>{this._disconnectCleanupFrame=0,!this.isConnected&&(this._isActive&&!this._terminalEmitted?this.close("dismiss","unmount"):(this._destroyRuntimeControllers(),this._deactivate()),super.disconnectedCallback())})}attributeChangedCallback(t,i,e){if(i!==e){if(t==="open"){this._syncOpenState();return}t==="state"&&e!=="error"&&(this._runtimeError=""),this._syncFromAttributes(),this.isConnected&&this.requestRender()}}get open(){return this.hasAttribute("open")}set open(t){t?this.setAttribute("open",""):this.close("dismiss","programmatic")}get dismissible(){return g(this.getAttribute("dismissible")??this.getAttribute("closable"),!0)}set dismissible(t){this.setAttribute("dismissible",String(t)),this.setAttribute("closable",String(t))}get closeOnOverlay(){return g(this.getAttribute("close-on-overlay")??this.getAttribute("close-on-backdrop"),!0)}set closeOnOverlay(t){this.setAttribute("close-on-overlay",String(t)),this.setAttribute("close-on-backdrop",String(t))}get closeOnEsc(){return g(this.getAttribute("close-on-esc"),!0)}set closeOnEsc(t){this.setAttribute("close-on-esc",String(t))}get lockWhileLoading(){return g(this.getAttribute("lock-while-loading"),!0)}set lockWhileLoading(t){this.setAttribute("lock-while-loading",String(t))}get state(){const t=this.getAttribute("state");return t==="loading"||t==="error"||t==="success"?t:"idle"}set state(t){if(t==="idle"){this.removeAttribute("state");return}this.setAttribute("state",t)}get dialogId(){return this._dialogId}set dialogId(t){this._dialogId=t||this._uid,this.requestRender()}get config(){return this._config}set config(t){this._config=t||{},this._config.id&&(this._dialogId=this._config.id),this._config.dismissible!=null&&(this.dismissible=!!this._config.dismissible),this._config.closeOnOverlay!=null&&(this.closeOnOverlay=!!this._config.closeOnOverlay),this._config.closeOnEsc!=null&&(this.closeOnEsc=!!this._config.closeOnEsc),this._config.lockWhileLoading!=null&&(this.lockWhileLoading=!!this._config.lockWhileLoading),this._config.size&&this.setAttribute("size",this._config.size),this._config.role&&this.setAttribute("role",this._config.role),this._config.initialFocus&&this.setAttribute("initial-focus",this._config.initialFocus),this._config.ariaLabel&&this.setAttribute("aria-label",this._config.ariaLabel),this._config.ariaLabelledby&&this.setAttribute("aria-labelledby",this._config.ariaLabelledby),this._config.ariaDescribedby&&this.setAttribute("aria-describedby",this._config.ariaDescribedby),this._config.errorMessage&&(this._runtimeError=this._config.errorMessage),this.requestRender()}openDialog(){this.setAttribute("open","")}closeDialog(t="programmatic"){if(!this.hasAttribute("open"))return;const i=new CustomEvent("request-close",{detail:{reason:t},bubbles:!0,cancelable:!0,composed:!0});this.dispatchEvent(i);const e=new CustomEvent("ui-request-close",{detail:{id:this.dialogId||this._uid,reason:t},bubbles:!0,cancelable:!0,composed:!0});if(this.dispatchEvent(e),!(i.defaultPrevented||e.defaultPrevented)){if(t==="submit"){this.close("submit");return}if(t==="cancel"){this.close("cancel");return}if(t==="overlay"){this.close("dismiss","overlay");return}if(t==="escape"){this.close("dismiss","esc");return}if(t==="button"){this.close("dismiss","close-icon");return}this.close("dismiss","programmatic")}}close(t="dismiss",i,e){this._terminalEmitted||(this._closeMeta={action:t,source:i,reason:e},this.hasAttribute("open")&&this.removeAttribute("open"),this._syncOpenState())}setError(t){this._runtimeError=t,this.state=t?"error":"idle",this.requestRender()}clearError(){this._runtimeError="",this.state==="error"&&(this.state="idle"),this.requestRender()}_syncFromAttributes(){!this.hasAttribute("dismissible")&&this.hasAttribute("closable")&&this.setAttribute("dismissible",this.getAttribute("closable")||"true"),!this.hasAttribute("closable")&&this.hasAttribute("dismissible")&&this.setAttribute("closable",this.getAttribute("dismissible")||"true"),!this.hasAttribute("close-on-overlay")&&this.hasAttribute("close-on-backdrop")&&this.setAttribute("close-on-overlay",this.getAttribute("close-on-backdrop")||"true"),!this.hasAttribute("close-on-backdrop")&&this.hasAttribute("close-on-overlay")&&this.setAttribute("close-on-backdrop",this.getAttribute("close-on-overlay")||"true"),this.hasAttribute("role")||this.setAttribute("role","dialog")}_syncOpenState(){const t=this.hasAttribute("open");t&&!this._isActive?this._activate():!t&&this._isActive&&this._deactivate(),this._syncOpenUi()}_activate(){this._isActive=!0,this._terminalEmitted=!1,this._closeMeta=null,l._openStack.includes(this)||l._openStack.push(this),this._lastFocused=document.activeElement||null,F.acquireBodyScrollLock();const t=this.dialogId||this._uid;this._dispatchWithLegacy("ui-open","open",{id:t}),this.dispatchEvent(new CustomEvent("show",{bubbles:!0,composed:!0})),this._syncOpenUi(),this._syncRuntimeControllers()}_deactivate(){if(!this._isActive)return;this._isActive=!1,this._destroyRuntimeControllers();const t=l._openStack.lastIndexOf(this);if(t>=0&&l._openStack.splice(t,1),F.releaseBodyScrollLock(),!this._terminalEmitted){const e=this._closeMeta||{action:"dismiss",source:"abort"},o=this.dialogId||this._uid;e.action==="cancel"?this._dispatchWithLegacy("ui-cancel","cancel",{id:o}):this._dispatchWithLegacy("ui-dismiss","dismiss",{id:o,source:e.source||"abort",reason:e.reason}),this._dispatchWithLegacy("ui-close","close",{id:o,action:e.action,source:e.source,reason:e.reason}),this.dispatchEvent(new CustomEvent("hide",{bubbles:!0,composed:!0})),this._terminalEmitted=!0,this._closeMeta=null}const i=this._lastFocused;this._lastFocused=null,i&&this._canRestoreFocus(i)&&(this._restoreFocusFrame&&p(this._restoreFocusFrame),this._restoreFocusFrame=C(()=>{this._restoreFocusFrame=0;try{this._canRestoreFocus(i)&&i.focus()}catch{}})),this._syncOpenUi()}_dispatchWithLegacy(t,i,e,o=!1){const s=new CustomEvent(t,{detail:e,bubbles:!0,composed:!0,cancelable:o});this.dispatchEvent(s);const r=new CustomEvent(i,{detail:e,bubbles:!0,composed:!0,cancelable:o});return this.dispatchEvent(r),s}_isTopMost(){if(!this._isActive)return!1;const t=l._openStack;return t.length>0&&t[t.length-1]===this}_queryPanel(){return this.root.querySelector(".panel")}_canRestoreFocus(t){if(!t||!t.isConnected||t.disabled||t.getAttribute("aria-hidden")==="true")return!1;if(!S())return!0;const i=window.getComputedStyle(t);return i.display!=="none"&&i.visibility!=="hidden"}_collectFocusable(t){return Array.from(t.querySelectorAll(W)).filter(i=>{if(i.disabled||i.getAttribute("aria-hidden")==="true")return!1;const o=S()?window.getComputedStyle(i):null;return!(o&&(o.display==="none"||o.visibility==="hidden"))})}_focusInitial(){if(!this.open)return;const t=this._queryPanel();if(!t)return;const i=this.getAttribute("initial-focus")||this._config.initialFocus||"";if(i){const r=t.querySelector(i);if(r&&typeof r.focus=="function"){r.focus();return}}const e=this._collectFocusable(t),s=e.find(r=>r.hasAttribute("autofocus"))||e[0]||t;!s.hasAttribute("tabindex")&&s===t&&s.setAttribute("tabindex","-1");try{s.focus()}catch{}}_onFocusIn(t){!this.open||this._isTopMost()}_handleTab(t){t.key}_destroyRuntimeControllers(){var t,i;(t=this._dismissableLayer)==null||t.destroy(),this._dismissableLayer=null,(i=this._focusScope)==null||i.destroy(),this._focusScope=null}_syncOpenUi(){const t=this.root.querySelector(".overlay"),i=this._queryPanel(),e=this.open;!t||!i||(t.hidden=!e,t.setAttribute("data-open",String(e)),t.setAttribute("aria-hidden",e?"false":"true"),i.setAttribute("aria-hidden",e?"false":"true"))}_syncRuntimeControllers(){if(this._destroyRuntimeControllers(),!this.open||!this._isTopMost())return;const t=this._queryPanel();t&&(this._dismissableLayer=M.createDismissableLayer({node:t,closeOnEscape:this.closeOnEsc,closeOnPointerOutside:this.closeOnOverlay,closeOnFocusOutside:!1,onBeforeDismiss:(i,e)=>this._isInteractionLocked()?!1:i==="escape-key"?(this.closeDialog("escape"),!1):(i==="outside-pointer"&&this.closeDialog("overlay"),!1)}),this._focusScope=R.createFocusScope({node:t,trapped:!0,loop:!0,restoreFocus:!1,autoFocus:"first",initialFocus:()=>{const i=this.getAttribute("initial-focus")||this._config.initialFocus||"";return i?t.querySelector(i):null}}))}_collectFormData(t){const i=this._queryPanel(),e=t||this.querySelector("form")||(i==null?void 0:i.querySelector("form"))||null;if(!(e instanceof HTMLFormElement)||typeof FormData>"u")return;const o=new FormData(e),s={};for(const[r,h]of o.entries()){const c=String(h);if(s[r]==null){s[r]=c;continue}const d=s[r];Array.isArray(d)?d.push(c):s[r]=[d,c]}return Object.keys(s).length?s:void 0}_resolveSubmitForm(t){var o;if(t){const s=t.closest("form");if(s instanceof HTMLFormElement&&this.contains(s))return s}const i=this.querySelector("form");if(i instanceof HTMLFormElement)return i;const e=(o=this._queryPanel())==null?void 0:o.querySelector("form");return e instanceof HTMLFormElement?e:null}_isInteractionLocked(){return this.state==="loading"&&this.lockWhileLoading}_requestDismiss(t,i){if(!this._isInteractionLocked()){if(t==="overlay"){this.closeDialog("overlay");return}if(t==="esc"){this.closeDialog("escape");return}if(t==="close-icon"){this.closeDialog("button");return}this.close("dismiss",t,i)}}_handleSubmit(t){if(this._isInteractionLocked())return;const i=t??this._resolveSubmitForm();if(i&&typeof i.reportValidity=="function"&&!i.reportValidity())return;const e={id:this.dialogId||this._uid,formData:this._collectFormData(i)};this._dispatchWithLegacy("ui-submit","submit",e,!0).defaultPrevented||this.closeDialog("submit")}_handleCancel(){this._isInteractionLocked()||this.closeDialog("cancel")}_onClick(t){if(!this.open||!this._isTopMost())return;const i=t.target;if(i){if(!i.closest(".panel")&&i.closest(".overlay")&&this.closeOnOverlay){this._requestDismiss("overlay");return}if(i.closest(".close")){this._requestDismiss("close-icon");return}if(i.closest(".btn-submit")){this._handleSubmit();return}i.closest(".btn-cancel")&&this._handleCancel()}}_onSubmit(t){if(!this.open||!this._isTopMost())return;const i=t.target;i&&i!==this&&this.contains(i)&&(t.preventDefault(),t.stopPropagation(),this._handleSubmit(i))}_onKeyDown(t){if(!(!this.open||!this._isTopMost())&&t.key==="Escape"){if(!this.closeOnEsc)return;t.preventDefault(),t.stopPropagation(),this._requestDismiss("esc");return}}render(){const t=this._config.title??this.getAttribute("title")??"",i=this._config.description??this.getAttribute("description")??"",e=this._config.submitText??this.getAttribute("submit-text")??"Submit",o=this._config.cancelText??this.getAttribute("cancel-text")??"Cancel",s=this._config.loadingText??this.getAttribute("loading-text")??"Working...",r=t.trim(),h=i.trim(),c=!!this.querySelector('[slot="title"]'),d=!!this.querySelector('[slot="description"]'),f=!!(r||c),m=!!(h||d),O=!!this.querySelector('[slot="content"]'),D=!!this.querySelector('[slot="footer"]'),q=this._config.showCancel??!0,$=this._config.showClose??this.dismissible,v=this._runtimeError||this._config.errorMessage||this.getAttribute("error-message")||"",b=this.state==="loading",y=`ui-dialog-title-${this._uid}`,x=`ui-dialog-description-${this._uid}`,A=`ui-dialog-error-${this._uid}`,T=this.getAttribute("aria-label")||"",I=this.getAttribute("aria-labelledby")||"",k=this.getAttribute("aria-describedby")||"",_=I||(f?y:""),w=T||(_?"":"Dialog"),u=[];k?u.push(k):(m&&u.push(x),v&&u.push(A));const B=f||m?`
           <header class="header" part="header">
-            ${f?`<h2 id="${y}" class="title" part="title"><slot name="title">${a(r)}</slot></h2>`:""}
-            ${m?`<p id="${x}" class="description" part="description"><slot name="description">${a(h)}</slot></p>`:""}
+            ${f?`<h2 id="${y}" class="title" part="title"><slot name="title">${n(r)}</slot></h2>`:""}
+            ${m?`<p id="${x}" class="description" part="description"><slot name="description">${n(h)}</slot></p>`:""}
           </header>
         `:"";this._destroyRuntimeControllers(),this.setContent(`
       ${this.hasAttribute("headless")?"":`<style>${P}</style>`}
@@ -383,11 +383,11 @@
         <section
           class="panel"
           part="panel"
-          role="${a(this.getAttribute("role")||"dialog")}"
+          role="${n(this.getAttribute("role")||"dialog")}"
           aria-modal="true"
-          ${w?`aria-label="${a(w)}"`:""}
-          ${_?`aria-labelledby="${a(_)}"`:""}
-          ${u.length?`aria-describedby="${a(u.join(" "))}"`:""}
+          ${w?`aria-label="${n(w)}"`:""}
+          ${_?`aria-labelledby="${n(_)}"`:""}
+          ${u.length?`aria-describedby="${n(u.join(" "))}"`:""}
           aria-hidden="${this.open?"false":"true"}"
           tabindex="-1"
         >
@@ -402,13 +402,13 @@
             ${O?'<slot name="content"></slot>':"<slot></slot>"}
           </div>
 
-          <div class="error" id="${A}" part="error" aria-live="polite" data-empty="${String(!v)}">${a(v)}</div>
+          <div class="error" id="${A}" part="error" aria-live="polite" data-empty="${String(!v)}">${n(v)}</div>
 
           <footer class="footer" part="footer">
-            ${b?`<span class="loading" part="loading"><span class="spinner" aria-hidden="true"></span><span>${a(o)}</span></span>`:'<span aria-hidden="true"></span>'}
+            ${b?`<span class="loading" part="loading"><span class="spinner" aria-hidden="true"></span><span>${n(s)}</span></span>`:'<span aria-hidden="true"></span>'}
 
-            ${D?'<slot name="footer"></slot>':`${q?`<button class="btn btn-cancel" part="cancel" type="button" ${b?"disabled":""}>${a(s)}</button>`:""}
-                 <button class="btn btn-submit" part="submit" type="button" ${b?"disabled":""}>${a(e)}</button>`}
+            ${D?'<slot name="footer"></slot>':`${q?`<button class="btn btn-cancel" part="cancel" type="button" ${b?"disabled":""}>${n(o)}</button>`:""}
+                 <button class="btn btn-submit" part="submit" type="button" ${b?"disabled":""}>${n(e)}</button>`}
           </footer>
         </section>
       </div>

package/dist/dialog.esm.js

@@ -390,16 +390,10 @@ function F() {
   return typeof window < "u" && typeof document < "u";
 }
 function S(n) {
-  return typeof requestAnimationFrame == "function" ? requestAnimationFrame(() => n()) : window.setTimeout(n, 16);
+  return window.setTimeout(n, 16);
 }
 function p(n) {
-  if (n) {
-    if (typeof cancelAnimationFrame == "function") {
-      cancelAnimationFrame(n);
-      return;
-    }
-    window.clearTimeout(n);
-  }
+  n && window.clearTimeout(n);
 }
 const C = class l extends I {
   constructor() {

package/dist/floating-toolbar.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const p=require("./ElementBase-1b301e7f.js"),_=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const b=require("./ElementBase-1b301e7f.js"),f=require("./positioner-33529bb8.js"),p=`
   :host {
     position: fixed;
     inset: 0;
@@ -200,8 +200,8 @@
       transition: none !important;
     }
   }
-`;function m(i,t){if(i==null||i==="")return t;const e=Number(i);return Number.isFinite(e)?e:t}function c(i,t){if(i==null)return t;const e=i.trim().toLowerCase();return e!=="false"&&e!=="0"&&e!=="off"}function b(i,t,e){return Math.min(e,Math.max(t,i))}function v(i){if(!document.body.contains(i))return!1;const t=window.getComputedStyle(i);return!(t.display==="none"||t.visibility==="hidden"||Number.parseFloat(t.opacity||"1")<=0)}function w(i){return i==="top"||i==="bottom"?i:"auto"}function y(i){return i==="start"||i==="end"?i:"center"}function x(i){const t='button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])',e=[];return i.forEach(o=>{o instanceof HTMLElement&&(o.matches(t)&&e.push(o),e.push(...Array.from(o.querySelectorAll(t))))}),Array.from(new Set(e))}class f extends p.ElementBase{constructor(){super(...arguments),this._anchor=null,this._panel=null,this._toolbarSlot=null,this._defaultSlot=null,this._raf=null,this._resizeObserver=null,this._mutationObserver=null,this._globalListenersBound=!1,this._isOpen=!1,this._closeReason="programmatic",this._onWindowChangeBound=this._onWindowChange.bind(this),this._onDocumentPointerDownBound=this._onDocumentPointerDown.bind(this),this._onDocumentKeyDownBound=this._onDocumentKeyDown.bind(this),this._onPanelKeyDownBound=this._onPanelKeyDown.bind(this),this._onSlotChangeBound=this._onSlotChange.bind(this)}static get observedAttributes(){return["open","anchor-id","headless","disabled","placement","align","offset","close-on-outside","close-on-escape","aria-label","aria-labelledby","variant","density","shape","elevation","tone"]}connectedCallback(){super.connectedCallback(),this._syncAnchorFromAttribute(),this._syncOpenState(),this._schedulePosition()}disconnectedCallback(){this._unbindGlobalListeners(),this._teardownObservers(),this._raf!=null&&(cancelAnimationFrame(this._raf),this._raf=null),super.disconnectedCallback()}attributeChangedCallback(t,e,o){if(e!==o){if(t==="anchor-id"){this._syncAnchorFromAttribute(),this.hasAttribute("open")&&!this._anchor&&this._requestClose("anchor-missing"),this._schedulePosition();return}if(t==="open"){this._syncOpenState(),this._schedulePosition();return}if(t==="disabled"){this.hasAttribute("disabled")&&this.hasAttribute("open")&&this._requestClose("disabled");return}if(t==="headless"){this._syncOpenState(),this._schedulePosition();return}if(t==="aria-label"||t==="aria-labelledby"){this._syncPanelA11y();return}(t==="placement"||t==="align"||t==="offset")&&this._schedulePosition()}}showForAnchorId(t){if(this.hasAttribute("disabled")||!t)return;const e=document.getElementById(t);if(!e){this._requestClose("anchor-missing");return}this._anchor=e,this.setAttribute("anchor-id",t),this.openToolbar()}hide(){this.closeToolbar("programmatic")}openToolbar(){this.hasAttribute("disabled")||(this.hasAttribute("open")||this.setAttribute("open",""),this._schedulePosition())}closeToolbar(t="programmatic"){this.hasAttribute("open")&&(this._closeReason=t,this.removeAttribute("open"))}_syncOpenState(){const t=this.hasAttribute("open")&&!this.hasAttribute("headless")&&!this.hasAttribute("disabled");if(t===this._isOpen){t&&this._schedulePosition();return}if(this._isOpen=t,t){this._bindGlobalListeners(),this._ensureObservers(),this._dispatchOpenEvents(),this._schedulePosition();return}this._unbindGlobalListeners(),this._teardownObservers(),this._raf!=null&&(cancelAnimationFrame(this._raf),this._raf=null),this._dispatchCloseEvents(this._closeReason),this._closeReason="programmatic"}_dispatchOpenEvents(){this.dispatchEvent(new CustomEvent("open",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{open:!0}}))}_dispatchCloseEvents(t){this.dispatchEvent(new CustomEvent("close",{bubbles:!0,composed:!0,detail:{reason:t}})),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{open:!1,reason:t}}))}_requestClose(t){if(!this.hasAttribute("open"))return;const e=new CustomEvent("request-close",{detail:{reason:t},bubbles:!0,composed:!0,cancelable:!0});this.dispatchEvent(e);const o=new CustomEvent("ui-request-close",{detail:{reason:t},bubbles:!0,composed:!0,cancelable:!0});this.dispatchEvent(o),!(e.defaultPrevented||o.defaultPrevented)&&this.closeToolbar(t)}_syncAnchorFromAttribute(){const t=this.getAttribute("anchor-id");if(!t){this._anchor=null;return}this._anchor=document.getElementById(t)}_schedulePosition(){!this.hasAttribute("open")||this.hasAttribute("headless")||this.hasAttribute("disabled")||(this._raf!=null&&cancelAnimationFrame(this._raf),this._raf=requestAnimationFrame(()=>{this._raf=null,this._position()}))}_ensureObservers(){if(!(this._resizeObserver&&this._mutationObserver)){if(typeof ResizeObserver<"u"){if(this._resizeObserver=new ResizeObserver(()=>this._schedulePosition()),this._panel)try{this._resizeObserver.observe(this._panel)}catch{}if(this._anchor)try{this._resizeObserver.observe(this._anchor)}catch{}}if(typeof MutationObserver<"u"&&this._anchor){this._mutationObserver=new MutationObserver(()=>this._schedulePosition());try{this._mutationObserver.observe(this._anchor,{attributes:!0,childList:!1,subtree:!1})}catch{}}}}_teardownObservers(){this._resizeObserver&&(this._resizeObserver.disconnect(),this._resizeObserver=null),this._mutationObserver&&(this._mutationObserver.disconnect(),this._mutationObserver=null)}_refreshObservers(){this._isOpen&&(this._teardownObservers(),this._ensureObservers())}_bindGlobalListeners(){this._globalListenersBound||(window.addEventListener("scroll",this._onWindowChangeBound,{passive:!0,capture:!0}),window.addEventListener("resize",this._onWindowChangeBound),document.addEventListener("pointerdown",this._onDocumentPointerDownBound,!0),document.addEventListener("keydown",this._onDocumentKeyDownBound,!0),this._globalListenersBound=!0)}_unbindGlobalListeners(){this._globalListenersBound&&(window.removeEventListener("scroll",this._onWindowChangeBound,!0),window.removeEventListener("resize",this._onWindowChangeBound),document.removeEventListener("pointerdown",this._onDocumentPointerDownBound,!0),document.removeEventListener("keydown",this._onDocumentKeyDownBound,!0),this._globalListenersBound=!1)}_position(){if(!this.hasAttribute("open")||this.hasAttribute("headless")||this.hasAttribute("disabled"))return;if(!this._anchor){this._requestClose("anchor-missing");return}if(!v(this._anchor)){this._requestClose("anchor-hidden");return}if(!this._panel)return;const t=this._anchor.getBoundingClientRect(),e=this._panel.getBoundingClientRect(),o=8,n=Math.max(0,m(this.getAttribute("offset"),8)),r=w(this.getAttribute("placement")),s=y(this.getAttribute("align")),a=t.top-o,l=window.innerHeight-t.bottom-o,d=r==="bottom"||r==="auto"&&l>a&&a<e.height+n,g=d?"bottom":"top";let h=d?t.bottom+n:t.top-e.height-n;h=b(h,o,window.innerHeight-e.height-o);let u=t.left+t.width/2-e.width/2;s==="start"&&(u=t.left),s==="end"&&(u=t.right-e.width),u=b(u,o,window.innerWidth-e.width-o),this._panel.style.left=`${Math.round(u)}px`,this._panel.style.top=`${Math.round(h)}px`,this.style.setProperty("--ui-floating-toolbar-origin-x",s==="start"?"0%":s==="end"?"100%":"50%"),this._panel.setAttribute("data-side",g)}_onWindowChange(){this.hasAttribute("open")&&this._schedulePosition()}_onDocumentPointerDown(t){if(!this.hasAttribute("open")||!c(this.getAttribute("close-on-outside"),!0))return;const e=t.composedPath();e.includes(this)||this._anchor&&e.includes(this._anchor)||this._requestClose("outside")}_onDocumentKeyDown(t){this.hasAttribute("open")&&t.key==="Escape"&&c(this.getAttribute("close-on-escape"),!0)&&(t.preventDefault(),this._requestClose("escape"))}_onPanelKeyDown(t){if(!this._panel||!["ArrowRight","ArrowLeft","Home","End"].includes(t.key))return;const e=this._getFocusableItems();if(e.length===0)return;const o=document.activeElement,n=o?e.indexOf(o):-1;let r=n;t.key==="Home"?r=0:t.key==="End"?r=e.length-1:t.key==="ArrowRight"?r=n<0?0:(n+1)%e.length:t.key==="ArrowLeft"&&(r=n<0?e.length-1:(n-1+e.length)%e.length);const s=e[r];s&&(t.preventDefault(),s.focus())}_getFocusableItems(){var o,n;const t=((o=this._toolbarSlot)==null?void 0:o.assignedElements({flatten:!0}))||[],e=((n=this._defaultSlot)==null?void 0:n.assignedElements({flatten:!0}))||[];return x([...t,...e])}_onSlotChange(){this._syncRowVisibility(),this._schedulePosition()}_syncRowVisibility(){var r,s;const t=this.root.querySelector(".row-toolbar"),e=this.root.querySelector(".row-default");if(!t||!e)return;const o=(((r=this._toolbarSlot)==null?void 0:r.assignedNodes({flatten:!0}))||[]).some(a=>{var l;return a.nodeType===Node.TEXT_NODE?!!((l=a.textContent)!=null&&l.trim()):a.nodeType===Node.ELEMENT_NODE}),n=(((s=this._defaultSlot)==null?void 0:s.assignedNodes({flatten:!0}))||[]).some(a=>{var l;return a.nodeType===Node.TEXT_NODE?!!((l=a.textContent)!=null&&l.trim()):a.nodeType===Node.ELEMENT_NODE});o?t.removeAttribute("hidden"):t.setAttribute("hidden",""),n?e.removeAttribute("hidden"):e.setAttribute("hidden","")}_syncPanelA11y(){if(!this._panel)return;const t=this.getAttribute("aria-labelledby"),e=this.getAttribute("aria-label")||(t?null:"Floating toolbar");t?this._panel.setAttribute("aria-labelledby",t):this._panel.removeAttribute("aria-labelledby"),e?this._panel.setAttribute("aria-label",e):this._panel.removeAttribute("aria-label")}render(){var t,e,o,n,r,s;this.setContent(`
-      <style>${_}</style>
+`;function g(i,t){if(i==null||i==="")return t;const e=Number(i);return Number.isFinite(e)?e:t}function h(i,t){if(i==null)return t;const e=i.trim().toLowerCase();return e!=="false"&&e!=="0"&&e!=="off"}function _(i){if(!document.body.contains(i))return!1;const t=window.getComputedStyle(i);return!(t.display==="none"||t.visibility==="hidden"||Number.parseFloat(t.opacity||"1")<=0)}function m(i){return i==="top"||i==="bottom"?i:"auto"}function v(i){return i==="start"||i==="end"?i:"center"}function y(i,t){const e=i==="top"?"top":"bottom";return t==="start"?`${e}-start`:t==="end"?`${e}-end`:e}function w(i){const t='button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])',e=[];return i.forEach(o=>{o instanceof HTMLElement&&(o.matches(t)&&e.push(o),e.push(...Array.from(o.querySelectorAll(t))))}),Array.from(new Set(e))}class d extends b.ElementBase{constructor(){super(...arguments),this._anchor=null,this._panel=null,this._toolbarSlot=null,this._defaultSlot=null,this._raf=null,this._resizeObserver=null,this._mutationObserver=null,this._positioner=null,this._positionerPlacement=null,this._positionerOffset=0,this._globalListenersBound=!1,this._isOpen=!1,this._closeReason="programmatic",this._onWindowChangeBound=this._onWindowChange.bind(this),this._onDocumentPointerDownBound=this._onDocumentPointerDown.bind(this),this._onDocumentKeyDownBound=this._onDocumentKeyDown.bind(this),this._onPanelKeyDownBound=this._onPanelKeyDown.bind(this),this._onSlotChangeBound=this._onSlotChange.bind(this)}static get observedAttributes(){return["open","anchor-id","headless","disabled","placement","align","offset","close-on-outside","close-on-escape","aria-label","aria-labelledby","variant","density","shape","elevation","tone"]}connectedCallback(){super.connectedCallback(),this._syncAnchorFromAttribute(),this._syncOpenState(),this._schedulePosition()}disconnectedCallback(){var t;this._unbindGlobalListeners(),this._teardownObservers(),(t=this._positioner)==null||t.destroy(),this._positioner=null,this._raf!=null&&(cancelAnimationFrame(this._raf),this._raf=null),super.disconnectedCallback()}attributeChangedCallback(t,e,o){if(e!==o){if(t==="anchor-id"){this._syncAnchorFromAttribute(),this.hasAttribute("open")&&!this._anchor&&this._requestClose("anchor-missing"),this._schedulePosition();return}if(t==="open"){this._syncOpenState(),this._schedulePosition();return}if(t==="disabled"){this.hasAttribute("disabled")&&this.hasAttribute("open")&&this._requestClose("disabled");return}if(t==="headless"){this._syncOpenState(),this._schedulePosition();return}if(t==="aria-label"||t==="aria-labelledby"){this._syncPanelA11y();return}(t==="placement"||t==="align"||t==="offset")&&this._schedulePosition()}}showForAnchorId(t){if(this.hasAttribute("disabled")||!t)return;const e=document.getElementById(t);if(!e){this._requestClose("anchor-missing");return}this._anchor=e,this.setAttribute("anchor-id",t),this.openToolbar()}hide(){this.closeToolbar("programmatic")}openToolbar(){this.hasAttribute("disabled")||(this.hasAttribute("open")||this.setAttribute("open",""),this._schedulePosition())}closeToolbar(t="programmatic"){this.hasAttribute("open")&&(this._closeReason=t,this.removeAttribute("open"))}_syncOpenState(){var e;const t=this.hasAttribute("open")&&!this.hasAttribute("headless")&&!this.hasAttribute("disabled");if(t===this._isOpen){t&&this._schedulePosition();return}if(this._isOpen=t,t){this._bindGlobalListeners(),this._ensureObservers(),this._dispatchOpenEvents(),this._schedulePosition();return}this._unbindGlobalListeners(),this._teardownObservers(),(e=this._positioner)==null||e.destroy(),this._positioner=null,this._positionerPlacement=null,this._positionerOffset=0,this._raf!=null&&(cancelAnimationFrame(this._raf),this._raf=null),this._dispatchCloseEvents(this._closeReason),this._closeReason="programmatic"}_dispatchOpenEvents(){this.dispatchEvent(new CustomEvent("open",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{open:!0}}))}_dispatchCloseEvents(t){this.dispatchEvent(new CustomEvent("close",{bubbles:!0,composed:!0,detail:{reason:t}})),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{open:!1,reason:t}}))}_requestClose(t){if(!this.hasAttribute("open"))return;const e=new CustomEvent("request-close",{detail:{reason:t},bubbles:!0,composed:!0,cancelable:!0});this.dispatchEvent(e);const o=new CustomEvent("ui-request-close",{detail:{reason:t},bubbles:!0,composed:!0,cancelable:!0});this.dispatchEvent(o),!(e.defaultPrevented||o.defaultPrevented)&&this.closeToolbar(t)}_syncAnchorFromAttribute(){const t=this.getAttribute("anchor-id");if(!t){this._anchor=null;return}this._anchor=document.getElementById(t)}_schedulePosition(){!this.hasAttribute("open")||this.hasAttribute("headless")||this.hasAttribute("disabled")||(this._raf!=null&&cancelAnimationFrame(this._raf),this._raf=requestAnimationFrame(()=>{this._raf=null,this._position()}))}_ensureObservers(){if(!(this._resizeObserver&&this._mutationObserver)){if(typeof ResizeObserver<"u"){if(this._resizeObserver=new ResizeObserver(()=>this._schedulePosition()),this._panel)try{this._resizeObserver.observe(this._panel)}catch{}if(this._anchor)try{this._resizeObserver.observe(this._anchor)}catch{}}if(typeof MutationObserver<"u"&&this._anchor){this._mutationObserver=new MutationObserver(()=>this._schedulePosition());try{this._mutationObserver.observe(this._anchor,{attributes:!0,childList:!1,subtree:!1})}catch{}}}}_teardownObservers(){this._resizeObserver&&(this._resizeObserver.disconnect(),this._resizeObserver=null),this._mutationObserver&&(this._mutationObserver.disconnect(),this._mutationObserver=null)}_refreshObservers(){this._isOpen&&(this._teardownObservers(),this._ensureObservers())}_bindGlobalListeners(){this._globalListenersBound||(window.addEventListener("scroll",this._onWindowChangeBound,{passive:!0,capture:!0}),window.addEventListener("resize",this._onWindowChangeBound),document.addEventListener("pointerdown",this._onDocumentPointerDownBound,!0),document.addEventListener("keydown",this._onDocumentKeyDownBound,!0),this._globalListenersBound=!0)}_unbindGlobalListeners(){this._globalListenersBound&&(window.removeEventListener("scroll",this._onWindowChangeBound,!0),window.removeEventListener("resize",this._onWindowChangeBound),document.removeEventListener("pointerdown",this._onDocumentPointerDownBound,!0),document.removeEventListener("keydown",this._onDocumentKeyDownBound,!0),this._globalListenersBound=!1)}_position(){var s,a;if(!this.hasAttribute("open")||this.hasAttribute("headless")||this.hasAttribute("disabled"))return;if(!this._anchor){this._requestClose("anchor-missing");return}if(!_(this._anchor)){this._requestClose("anchor-hidden");return}if(!this._panel)return;const t=Math.max(0,g(this.getAttribute("offset"),8)),e=m(this.getAttribute("placement")),o=v(this.getAttribute("align")),n=y(e,o);if(!this._positioner||this._positionerPlacement!==n||this._positionerOffset!==t){(s=this._positioner)==null||s.destroy(),this._positioner=f.createPositioner({anchor:this._anchor,floating:this._panel,placement:n,strategy:"fixed",offset:t,flip:!0,shift:!0,boundaryPadding:8,observeWindowResize:!1,observeScroll:!1,observeAncestorScroll:!1,observeAncestorResize:!1,observeLayoutShift:!1,observeAnchorResize:!1,observeFloatingResize:!1,onUpdate:l=>{var u;const c=l.placement.startsWith("top")?"top":"bottom";this.style.setProperty("--ui-floating-toolbar-origin-x",o==="start"?"0%":o==="end"?"100%":"50%"),(u=this._panel)==null||u.setAttribute("data-side",c)}}),this._positionerPlacement=n,this._positionerOffset=t;return}(a=this._positioner)==null||a.update()}_onWindowChange(){this.hasAttribute("open")&&this._schedulePosition()}_onDocumentPointerDown(t){if(!this.hasAttribute("open")||!h(this.getAttribute("close-on-outside"),!0))return;const e=t.composedPath();e.includes(this)||this._anchor&&e.includes(this._anchor)||this._requestClose("outside")}_onDocumentKeyDown(t){this.hasAttribute("open")&&t.key==="Escape"&&h(this.getAttribute("close-on-escape"),!0)&&(t.preventDefault(),this._requestClose("escape"))}_onPanelKeyDown(t){if(!this._panel||!["ArrowRight","ArrowLeft","Home","End"].includes(t.key))return;const e=this._getFocusableItems();if(e.length===0)return;const o=document.activeElement,n=o?e.indexOf(o):-1;let r=n;t.key==="Home"?r=0:t.key==="End"?r=e.length-1:t.key==="ArrowRight"?r=n<0?0:(n+1)%e.length:t.key==="ArrowLeft"&&(r=n<0?e.length-1:(n-1+e.length)%e.length);const s=e[r];s&&(t.preventDefault(),s.focus())}_getFocusableItems(){var o,n;const t=((o=this._toolbarSlot)==null?void 0:o.assignedElements({flatten:!0}))||[],e=((n=this._defaultSlot)==null?void 0:n.assignedElements({flatten:!0}))||[];return w([...t,...e])}_onSlotChange(){this._syncRowVisibility(),this._schedulePosition()}_syncRowVisibility(){var r,s;const t=this.root.querySelector(".row-toolbar"),e=this.root.querySelector(".row-default");if(!t||!e)return;const o=(((r=this._toolbarSlot)==null?void 0:r.assignedNodes({flatten:!0}))||[]).some(a=>{var l;return a.nodeType===Node.TEXT_NODE?!!((l=a.textContent)!=null&&l.trim()):a.nodeType===Node.ELEMENT_NODE}),n=(((s=this._defaultSlot)==null?void 0:s.assignedNodes({flatten:!0}))||[]).some(a=>{var l;return a.nodeType===Node.TEXT_NODE?!!((l=a.textContent)!=null&&l.trim()):a.nodeType===Node.ELEMENT_NODE});o?t.removeAttribute("hidden"):t.setAttribute("hidden",""),n?e.removeAttribute("hidden"):e.setAttribute("hidden","")}_syncPanelA11y(){if(!this._panel)return;const t=this.getAttribute("aria-labelledby"),e=this.getAttribute("aria-label")||(t?null:"Floating toolbar");t?this._panel.setAttribute("aria-labelledby",t):this._panel.removeAttribute("aria-labelledby"),e?this._panel.setAttribute("aria-label",e):this._panel.removeAttribute("aria-label")}render(){var t,e,o,n,r,s;this.setContent(`
+      <style>${p}</style>
       <section class="panel" part="panel" role="toolbar" aria-orientation="horizontal" tabindex="-1">
         <div class="row row-toolbar" part="row-toolbar">
           <slot name="toolbar"></slot>
@@ -210,4 +210,4 @@
           <slot></slot>
         </div>
       </section>
-    `),this._panel=this.root.querySelector(".panel"),this._toolbarSlot=this.root.querySelector('slot[name="toolbar"]'),this._defaultSlot=this.root.querySelector("slot:not([name])"),(t=this._panel)==null||t.removeEventListener("keydown",this._onPanelKeyDownBound),(e=this._panel)==null||e.addEventListener("keydown",this._onPanelKeyDownBound),(o=this._toolbarSlot)==null||o.removeEventListener("slotchange",this._onSlotChangeBound),(n=this._defaultSlot)==null||n.removeEventListener("slotchange",this._onSlotChangeBound),(r=this._toolbarSlot)==null||r.addEventListener("slotchange",this._onSlotChangeBound),(s=this._defaultSlot)==null||s.addEventListener("slotchange",this._onSlotChangeBound),this._syncPanelA11y(),this._syncRowVisibility(),this._refreshObservers(),this._schedulePosition()}}typeof customElements<"u"&&!customElements.get("ui-floating-toolbar")&&customElements.define("ui-floating-toolbar",f);exports.UIFloatingToolbar=f;
+    `),this._panel=this.root.querySelector(".panel"),this._toolbarSlot=this.root.querySelector('slot[name="toolbar"]'),this._defaultSlot=this.root.querySelector("slot:not([name])"),(t=this._panel)==null||t.removeEventListener("keydown",this._onPanelKeyDownBound),(e=this._panel)==null||e.addEventListener("keydown",this._onPanelKeyDownBound),(o=this._toolbarSlot)==null||o.removeEventListener("slotchange",this._onSlotChangeBound),(n=this._defaultSlot)==null||n.removeEventListener("slotchange",this._onSlotChangeBound),(r=this._toolbarSlot)==null||r.addEventListener("slotchange",this._onSlotChangeBound),(s=this._defaultSlot)==null||s.addEventListener("slotchange",this._onSlotChangeBound),this._syncPanelA11y(),this._syncRowVisibility(),this._refreshObservers(),this._schedulePosition()}}typeof customElements<"u"&&!customElements.get("ui-floating-toolbar")&&customElements.define("ui-floating-toolbar",d);exports.UIFloatingToolbar=d;

package/dist/floating-toolbar.esm.js

@@ -1,5 +1,6 @@
-import { E as p } from "./ElementBase-909688f3.mjs";
-const g = `
+import { E as c } from "./ElementBase-909688f3.mjs";
+import { l as b } from "./positioner-e9770c66.mjs";
+const f = `
   :host {
     position: fixed;
     inset: 0;
@@ -202,42 +203,43 @@ const g = `
     }
   }
 `;
-function _(i, t) {
+function p(i, t) {
   if (i == null || i === "")
     return t;
   const e = Number(i);
   return Number.isFinite(e) ? e : t;
 }
-function c(i, t) {
+function h(i, t) {
   if (i == null)
     return t;
   const e = i.trim().toLowerCase();
   return e !== "false" && e !== "0" && e !== "off";
 }
-function b(i, t, e) {
-  return Math.min(e, Math.max(t, i));
-}
-function m(i) {
+function g(i) {
   if (!document.body.contains(i))
     return !1;
   const t = window.getComputedStyle(i);
   return !(t.display === "none" || t.visibility === "hidden" || Number.parseFloat(t.opacity || "1") <= 0);
 }
-function v(i) {
+function _(i) {
   return i === "top" || i === "bottom" ? i : "auto";
 }
-function w(i) {
+function m(i) {
   return i === "start" || i === "end" ? i : "center";
 }
+function v(i, t) {
+  const e = i === "top" ? "top" : "bottom";
+  return t === "start" ? `${e}-start` : t === "end" ? `${e}-end` : e;
+}
 function y(i) {
   const t = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])', e = [];
   return i.forEach((o) => {
     o instanceof HTMLElement && (o.matches(t) && e.push(o), e.push(...Array.from(o.querySelectorAll(t))));
   }), Array.from(new Set(e));
 }
-class x extends p {
+class w extends c {
   constructor() {
-    super(...arguments), this._anchor = null, this._panel = null, this._toolbarSlot = null, this._defaultSlot = null, this._raf = null, this._resizeObserver = null, this._mutationObserver = null, this._globalListenersBound = !1, this._isOpen = !1, this._closeReason = "programmatic", this._onWindowChangeBound = this._onWindowChange.bind(this), this._onDocumentPointerDownBound = this._onDocumentPointerDown.bind(this), this._onDocumentKeyDownBound = this._onDocumentKeyDown.bind(this), this._onPanelKeyDownBound = this._onPanelKeyDown.bind(this), this._onSlotChangeBound = this._onSlotChange.bind(this);
+    super(...arguments), this._anchor = null, this._panel = null, this._toolbarSlot = null, this._defaultSlot = null, this._raf = null, this._resizeObserver = null, this._mutationObserver = null, this._positioner = null, this._positionerPlacement = null, this._positionerOffset = 0, this._globalListenersBound = !1, this._isOpen = !1, this._closeReason = "programmatic", this._onWindowChangeBound = this._onWindowChange.bind(this), this._onDocumentPointerDownBound = this._onDocumentPointerDown.bind(this), this._onDocumentKeyDownBound = this._onDocumentKeyDown.bind(this), this._onPanelKeyDownBound = this._onPanelKeyDown.bind(this), this._onSlotChangeBound = this._onSlotChange.bind(this);
   }
   static get observedAttributes() {
     return [
@@ -263,7 +265,8 @@ class x extends p {
     super.connectedCallback(), this._syncAnchorFromAttribute(), this._syncOpenState(), this._schedulePosition();
   }
   disconnectedCallback() {
-    this._unbindGlobalListeners(), this._teardownObservers(), this._raf != null && (cancelAnimationFrame(this._raf), this._raf = null), super.disconnectedCallback();
+    var t;
+    this._unbindGlobalListeners(), this._teardownObservers(), (t = this._positioner) == null || t.destroy(), this._positioner = null, this._raf != null && (cancelAnimationFrame(this._raf), this._raf = null), super.disconnectedCallback();
   }
   attributeChangedCallback(t, e, o) {
     if (e !== o) {
@@ -310,6 +313,7 @@ class x extends p {
     this.hasAttribute("open") && (this._closeReason = t, this.removeAttribute("open"));
   }
   _syncOpenState() {
+    var e;
     const t = this.hasAttribute("open") && !this.hasAttribute("headless") && !this.hasAttribute("disabled");
     if (t === this._isOpen) {
       t && this._schedulePosition();
@@ -319,7 +323,7 @@ class x extends p {
       this._bindGlobalListeners(), this._ensureObservers(), this._dispatchOpenEvents(), this._schedulePosition();
       return;
     }
-    this._unbindGlobalListeners(), this._teardownObservers(), this._raf != null && (cancelAnimationFrame(this._raf), this._raf = null), this._dispatchCloseEvents(this._closeReason), this._closeReason = "programmatic";
+    this._unbindGlobalListeners(), this._teardownObservers(), (e = this._positioner) == null || e.destroy(), this._positioner = null, this._positionerPlacement = null, this._positionerOffset = 0, this._raf != null && (cancelAnimationFrame(this._raf), this._raf = null), this._dispatchCloseEvents(this._closeReason), this._closeReason = "programmatic";
   }
   _dispatchOpenEvents() {
     this.dispatchEvent(new CustomEvent("open", { bubbles: !0, composed: !0 })), this.dispatchEvent(
@@ -412,35 +416,58 @@ class x extends p {
     this._globalListenersBound && (window.removeEventListener("scroll", this._onWindowChangeBound, !0), window.removeEventListener("resize", this._onWindowChangeBound), document.removeEventListener("pointerdown", this._onDocumentPointerDownBound, !0), document.removeEventListener("keydown", this._onDocumentKeyDownBound, !0), this._globalListenersBound = !1);
   }
   _position() {
+    var s, a;
     if (!this.hasAttribute("open") || this.hasAttribute("headless") || this.hasAttribute("disabled"))
       return;
     if (!this._anchor) {
       this._requestClose("anchor-missing");
       return;
     }
-    if (!m(this._anchor)) {
+    if (!g(this._anchor)) {
       this._requestClose("anchor-hidden");
       return;
     }
     if (!this._panel)
       return;
-    const t = this._anchor.getBoundingClientRect(), e = this._panel.getBoundingClientRect(), o = 8, n = Math.max(0, _(this.getAttribute("offset"), 8)), r = v(this.getAttribute("placement")), s = w(this.getAttribute("align")), a = t.top - o, l = window.innerHeight - t.bottom - o, d = r === "bottom" || r === "auto" && l > a && a < e.height + n, f = d ? "bottom" : "top";
-    let h = d ? t.bottom + n : t.top - e.height - n;
-    h = b(h, o, window.innerHeight - e.height - o);
-    let u = t.left + t.width / 2 - e.width / 2;
-    s === "start" && (u = t.left), s === "end" && (u = t.right - e.width), u = b(u, o, window.innerWidth - e.width - o), this._panel.style.left = `${Math.round(u)}px`, this._panel.style.top = `${Math.round(h)}px`, this.style.setProperty("--ui-floating-toolbar-origin-x", s === "start" ? "0%" : s === "end" ? "100%" : "50%"), this._panel.setAttribute("data-side", f);
+    const t = Math.max(0, p(this.getAttribute("offset"), 8)), e = _(this.getAttribute("placement")), o = m(this.getAttribute("align")), n = v(e, o);
+    if (!this._positioner || this._positionerPlacement !== n || this._positionerOffset !== t) {
+      (s = this._positioner) == null || s.destroy(), this._positioner = b({
+        anchor: this._anchor,
+        floating: this._panel,
+        placement: n,
+        strategy: "fixed",
+        offset: t,
+        flip: !0,
+        shift: !0,
+        boundaryPadding: 8,
+        observeWindowResize: !1,
+        observeScroll: !1,
+        observeAncestorScroll: !1,
+        observeAncestorResize: !1,
+        observeLayoutShift: !1,
+        observeAnchorResize: !1,
+        observeFloatingResize: !1,
+        onUpdate: (l) => {
+          var u;
+          const d = l.placement.startsWith("top") ? "top" : "bottom";
+          this.style.setProperty("--ui-floating-toolbar-origin-x", o === "start" ? "0%" : o === "end" ? "100%" : "50%"), (u = this._panel) == null || u.setAttribute("data-side", d);
+        }
+      }), this._positionerPlacement = n, this._positionerOffset = t;
+      return;
+    }
+    (a = this._positioner) == null || a.update();
   }
   _onWindowChange() {
     this.hasAttribute("open") && this._schedulePosition();
   }
   _onDocumentPointerDown(t) {
-    if (!this.hasAttribute("open") || !c(this.getAttribute("close-on-outside"), !0))
+    if (!this.hasAttribute("open") || !h(this.getAttribute("close-on-outside"), !0))
       return;
     const e = t.composedPath();
     e.includes(this) || this._anchor && e.includes(this._anchor) || this._requestClose("outside");
   }
   _onDocumentKeyDown(t) {
-    this.hasAttribute("open") && t.key === "Escape" && c(this.getAttribute("close-on-escape"), !0) && (t.preventDefault(), this._requestClose("escape"));
+    this.hasAttribute("open") && t.key === "Escape" && h(this.getAttribute("close-on-escape"), !0) && (t.preventDefault(), this._requestClose("escape"));
   }
   _onPanelKeyDown(t) {
     if (!this._panel || !["ArrowRight", "ArrowLeft", "Home", "End"].includes(t.key))
@@ -485,7 +512,7 @@ class x extends p {
   render() {
     var t, e, o, n, r, s;
     this.setContent(`
-      <style>${g}</style>
+      <style>${f}</style>
       <section class="panel" part="panel" role="toolbar" aria-orientation="horizontal" tabindex="-1">
         <div class="row row-toolbar" part="row-toolbar">
           <slot name="toolbar"></slot>
@@ -497,7 +524,7 @@ class x extends p {
     `), this._panel = this.root.querySelector(".panel"), this._toolbarSlot = this.root.querySelector('slot[name="toolbar"]'), this._defaultSlot = this.root.querySelector("slot:not([name])"), (t = this._panel) == null || t.removeEventListener("keydown", this._onPanelKeyDownBound), (e = this._panel) == null || e.addEventListener("keydown", this._onPanelKeyDownBound), (o = this._toolbarSlot) == null || o.removeEventListener("slotchange", this._onSlotChangeBound), (n = this._defaultSlot) == null || n.removeEventListener("slotchange", this._onSlotChangeBound), (r = this._toolbarSlot) == null || r.addEventListener("slotchange", this._onSlotChangeBound), (s = this._defaultSlot) == null || s.addEventListener("slotchange", this._onSlotChangeBound), this._syncPanelA11y(), this._syncRowVisibility(), this._refreshObservers(), this._schedulePosition();
   }
 }
-typeof customElements < "u" && !customElements.get("ui-floating-toolbar") && customElements.define("ui-floating-toolbar", x);
+typeof customElements < "u" && !customElements.get("ui-floating-toolbar") && customElements.define("ui-floating-toolbar", w);
 export {
-  x as UIFloatingToolbar
+  w as UIFloatingToolbar
 };