@data-slot/dialog 0.2.124 → 0.2.125

package/README.md

@@ -128,31 +128,50 @@ Boolean attributes: present or `"true"` = true, `"false"` = false, absent = defa
 
 ## Styling
 
-Use `data-state` attributes for CSS styling:
+Dialog exposes both `data-state="open|closed"` and popup-style animation hooks:
+
+- `data-open` / `data-closed` on `dialog`, `dialog-portal`, `dialog-overlay`, and `dialog-content`
+- `data-starting-style` while opening
+- `data-ending-style` while closing
+
+Use `data-open` / `data-closed` with `data-starting-style` / `data-ending-style` for animations:
 
 ```css
-/* Backdrop/overlay */
-[data-slot="dialog-content"] {
+/* Backdrop */
+[data-slot="dialog-overlay"] {
   position: fixed;
   inset: 0;
-  display: grid;
-  place-items: center;
   background: rgba(0, 0, 0, 0.5);
+  opacity: 0;
+  transition: opacity 0.2s ease;
 }
 
-/* Closed state */
-[data-slot="dialog"][data-state="closed"] [data-slot="dialog-content"] {
-  display: none;
+[data-slot="dialog-overlay"][data-open] {
+  opacity: 1;
 }
 
-/* Animation */
 [data-slot="dialog-content"] {
   opacity: 0;
-  transition: opacity 0.2s;
+  transform: translate(-50%, -50%) scale(0.95);
+  transition:
+    opacity 0.2s ease,
+    transform 0.2s ease;
 }
 
-[data-slot="dialog"][data-state="open"] [data-slot="dialog-content"] {
+[data-slot="dialog-content"][data-open] {
   opacity: 1;
+  transform: translate(-50%, -50%) scale(1);
+}
+
+[data-slot="dialog-overlay"][data-starting-style],
+[data-slot="dialog-overlay"][data-ending-style] {
+  opacity: 0;
+}
+
+[data-slot="dialog-content"][data-starting-style],
+[data-slot="dialog-content"][data-ending-style] {
+  opacity: 0;
+  transform: translate(-50%, -50%) scale(0.95);
 }
 ```
 
@@ -167,10 +186,15 @@ When multiple dialogs are open, `data-stack-index` and CSS variables are exposed
 With Tailwind:
 
 ```html
-<div data-slot="dialog-content" class="fixed inset-0 grid place-items-center bg-black/50 data-[state=closed]:hidden">
-  <div class="bg-white rounded-lg p-6 max-w-md">
-    <!-- Dialog content -->
-  </div>
+<div
+  data-slot="dialog-overlay"
+  class="fixed inset-0 bg-black/50 opacity-0 transition-opacity duration-200 data-[open]:opacity-100 data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"
+></div>
+<div
+  data-slot="dialog-content"
+  class="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-lg bg-white p-6 opacity-0 scale-95 transition-all duration-200 data-[open]:opacity-100 data-[open]:scale-100 data-[starting-style]:opacity-0 data-[starting-style]:scale-95 data-[ending-style]:opacity-0 data-[ending-style]:scale-95"
+>
+  <!-- Dialog content -->
 </div>
 ```
 

package/dist/index.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require(`@data-slot/core`);const t=`@data-slot/dialog`,n=`a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])`,r=[];let i=null;function a(){r.forEach((e,t)=>{let n=String(t);e._overlay&&(e._overlay.setAttribute(`data-stack-index`,n),e._overlay.style.setProperty(`--dialog-stack-index`,n),e._overlay.style.setProperty(`--dialog-overlay-stack-index`,n)),e._content&&(e._content.setAttribute(`data-stack-index`,n),e._content.style.setProperty(`--dialog-stack-index`,n),e._content.style.setProperty(`--dialog-content-stack-index`,n))})}function o(){if(i)return;let t=(0,e.on)(document,`keydown`,e=>{if(r.length===0)return;let t=r[r.length-1];!t||!t.isOpen||e.key===`Tab`&&t._handleKeydown&&t._handleKeydown(e)});i=()=>{t(),i=null}}function s(){r.length===0&&i&&i()}function c(i,c={}){let l=(0,e.reuseRootBinding)(i,t,`[@data-slot/dialog] createDialog() called more than once for the same root. Returning the existing controller. Destroy it before rebinding with new options.`);if(l)return l;let u=c.defaultOpen??(0,e.getDataBool)(i,`defaultOpen`)??!1,d=c.onOpenChange,f=c.closeOnClickOutside??(0,e.getDataBool)(i,`closeOnClickOutside`)??!0,p=c.closeOnEscape??(0,e.getDataBool)(i,`closeOnEscape`)??!0,m=c.lockScroll??(0,e.getDataBool)(i,`lockScroll`)??!0,h=c.alertDialog??(0,e.getDataBool)(i,`alertDialog`)??!1,g=(0,e.getPart)(i,`dialog-trigger`),_=(0,e.getPart)(i,`dialog-portal`),v=(0,e.getPart)(i,`dialog-overlay`),y=(0,e.getPart)(i,`dialog-content`),b=(0,e.getPart)(i,`dialog-title`),x=(0,e.getPart)(i,`dialog-description`);if(!y)throw Error(`Dialog requires dialog-content slot`);if(!v)throw Error(`Dialog requires dialog-overlay slot`);let S=!1,C=null,w=[],T=_?(0,e.createPortalLifecycle)({content:_,root:i}):null,E=!1;(0,e.ensureId)(y,`dialog-content`),y.setAttribute(`role`,h?`alertdialog`:`dialog`),(0,e.setAria)(y,`modal`,!0),(0,e.linkLabelledBy)(y,b,x),v.setAttribute(`role`,`presentation`),v.setAttribute(`aria-hidden`,`true`),v.tabIndex=-1,g&&(g.setAttribute(`aria-haspopup`,`dialog`),g.setAttribute(`aria-controls`,y.id),(0,e.setAria)(g,`expanded`,!1));let D=!1,O=()=>{y.hasAttribute(`tabindex`)||(y.tabIndex=-1,D=!0)},k=()=>{D&&=(y.removeAttribute(`tabindex`),!1)},A=()=>{let e=y.querySelector(`[autofocus]`);if(e)return e.focus();let t=y.querySelector(n);if(t)return t.focus();O(),y.focus()},j=()=>{T?.mount()},M=e=>{i.setAttribute(`data-state`,e),_&&_.setAttribute(`data-state`,e),v.setAttribute(`data-state`,e),y.setAttribute(`data-state`,e)},N=()=>{v.removeAttribute(`data-stack-index`),y.removeAttribute(`data-stack-index`),v.style.removeProperty(`--dialog-stack-index`),v.style.removeProperty(`--dialog-overlay-stack-index`),y.style.removeProperty(`--dialog-stack-index`),y.style.removeProperty(`--dialog-content-stack-index`)},P=(t,n=!1)=>{if(!(S===t&&!n)){if(t)j(),C=document.activeElement,r.push(I),o(),a(),m&&!E&&((0,e.lockScroll)(),E=!0);else{let t=r.indexOf(I);t!==-1&&r.splice(t,1),s(),N(),a(),E&&=((0,e.unlockScroll)(),!1),k();let n=C;C=null,requestAnimationFrame(()=>{n&&document.contains(n)&&typeof n.focus==`function`?(0,e.focusElement)(n):g&&document.contains(g)&&(0,e.focusElement)(g)})}S=t,y.hidden=!S,v.hidden=!S,g&&(0,e.setAria)(g,`expanded`,S),M(S?`open`:`closed`),(0,e.emit)(i,`dialog:change`,{open:S}),d?.(S),t&&requestAnimationFrame(A)}},F=e=>{if(e.key!==`Tab`)return;let t=y.querySelectorAll(n);if(t.length===0){e.preventDefault(),O(),y.focus();return}let r=t[0],i=t[t.length-1],a=document.activeElement;if(!y.contains(a)){e.preventDefault(),r.focus();return}if(r===i){e.preventDefault();return}e.shiftKey?a===r&&(e.preventDefault(),i.focus()):a===i&&(e.preventDefault(),r.focus())};u?(j(),y.hidden=!1,v.hidden=!1,M(`open`),S=!0,g&&(0,e.setAria)(g,`expanded`,!0)):(y.hidden=!0,v.hidden=!0,M(`closed`)),g&&w.push((0,e.on)(g,`click`,()=>P(!S))),w.push((0,e.on)(y,`click`,e=>{let t=e.target;if(!t)return;let n=t.closest?.(`[data-slot="dialog-close"]`);n&&y.contains(n)&&P(!1)})),f&&w.push((0,e.on)(v,`click`,e=>{e.button===0&&e.target===v&&S&&P(!1)})),w.push((0,e.createDismissLayer)({root:i,isOpen:()=>S,onDismiss:()=>P(!1),closeOnClickOutside:!1,closeOnEscape:p}));let I={open:()=>P(!0),close:()=>P(!1),toggle:()=>P(!S),get isOpen(){return S},destroy:()=>{if(S)P(!1,!0);else{let e=r.indexOf(I);e!==-1&&(r.splice(e,1),a(),s())}k(),w.forEach(e=>e()),w.length=0,T?.cleanup(),(0,e.clearRootBinding)(i,t,I)},_handleKeydown:F,_content:y,_overlay:v};return w.push((0,e.on)(i,`dialog:set`,e=>{let t=e.detail,n;t?.open===void 0?t?.value!==void 0&&(n=t.value):n=t.open,typeof n==`boolean`&&P(n)})),(0,e.setRootBinding)(i,t,I),u&&(C=document.activeElement,r.push(I),o(),a(),m&&!E&&((0,e.lockScroll)(),E=!0),(0,e.emit)(i,`dialog:change`,{open:!0}),d?.(!0),requestAnimationFrame(A)),I}function l(n=document){let r=[];for(let i of(0,e.getRoots)(n,`dialog`))(0,e.hasRootBinding)(i,t)||r.push(c(i));return r}exports.create=l,exports.createDialog=c;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require(`@data-slot/core`);const t=`@data-slot/dialog`,n=`a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])`,r=[];let i=null;function a(){r.forEach((e,t)=>{let n=String(t);e._overlay&&(e._overlay.setAttribute(`data-stack-index`,n),e._overlay.style.setProperty(`--dialog-stack-index`,n),e._overlay.style.setProperty(`--dialog-overlay-stack-index`,n)),e._content&&(e._content.setAttribute(`data-stack-index`,n),e._content.style.setProperty(`--dialog-stack-index`,n),e._content.style.setProperty(`--dialog-content-stack-index`,n))})}function o(){if(i)return;let t=(0,e.on)(document,`keydown`,e=>{if(r.length===0)return;let t=r[r.length-1];!t||!t.isOpen||e.key===`Tab`&&t._handleKeydown&&t._handleKeydown(e)});i=()=>{t(),i=null}}function s(){r.length===0&&i&&i()}function c(i,c={}){let l=(0,e.reuseRootBinding)(i,t,`[@data-slot/dialog] createDialog() called more than once for the same root. Returning the existing controller. Destroy it before rebinding with new options.`);if(l)return l;let u=c.defaultOpen??(0,e.getDataBool)(i,`defaultOpen`)??!1,d=c.onOpenChange,f=c.closeOnClickOutside??(0,e.getDataBool)(i,`closeOnClickOutside`)??!0,p=c.closeOnEscape??(0,e.getDataBool)(i,`closeOnEscape`)??!0,m=c.lockScroll??(0,e.getDataBool)(i,`lockScroll`)??!0,h=c.alertDialog??(0,e.getDataBool)(i,`alertDialog`)??!1,g=(0,e.getPart)(i,`dialog-trigger`),_=(0,e.getPart)(i,`dialog-portal`),v=(0,e.getPart)(i,`dialog-overlay`),y=(0,e.getPart)(i,`dialog-content`),b=(0,e.getPart)(i,`dialog-title`),x=(0,e.getPart)(i,`dialog-description`);if(!y)throw Error(`Dialog requires dialog-content slot`);if(!v)throw Error(`Dialog requires dialog-overlay slot`);let S=!1,C=!1,w=null,T=[],E=_?(0,e.createPortalLifecycle)({content:_,root:i}):null,D=!1;(0,e.ensureId)(y,`dialog-content`),y.setAttribute(`role`,h?`alertdialog`:`dialog`),(0,e.setAria)(y,`modal`,!0),(0,e.linkLabelledBy)(y,b,x),v.setAttribute(`role`,`presentation`),v.setAttribute(`aria-hidden`,`true`),v.tabIndex=-1,g&&(g.setAttribute(`aria-haspopup`,`dialog`),g.setAttribute(`aria-controls`,y.id),(0,e.setAria)(g,`expanded`,!1));let O=!1,k=()=>{y.hasAttribute(`tabindex`)||(y.tabIndex=-1,O=!0)},A=()=>{O&&=(y.removeAttribute(`tabindex`),!1)},j=()=>{let e=y.querySelector(`[autofocus]`);if(e)return e.focus();let t=y.querySelector(n);if(t)return t.focus();k(),y.focus()},M=()=>{E?.mount()},N=()=>{requestAnimationFrame(()=>{w&&document.contains(w)&&typeof w.focus==`function`?(0,e.focusElement)(w):g&&document.contains(g)&&(0,e.focusElement)(g),w=null})},P=e=>{if(i.setAttribute(`data-state`,e),_&&_.setAttribute(`data-state`,e),v.setAttribute(`data-state`,e),y.setAttribute(`data-state`,e),e===`open`){i.setAttribute(`data-open`,``),_?.setAttribute(`data-open`,``),v.setAttribute(`data-open`,``),y.setAttribute(`data-open`,``),i.removeAttribute(`data-closed`),_?.removeAttribute(`data-closed`),v.removeAttribute(`data-closed`),y.removeAttribute(`data-closed`);return}i.setAttribute(`data-closed`,``),_?.setAttribute(`data-closed`,``),v.setAttribute(`data-closed`,``),y.setAttribute(`data-closed`,``),i.removeAttribute(`data-open`),_?.removeAttribute(`data-open`),v.removeAttribute(`data-open`),y.removeAttribute(`data-open`)},F=()=>{v.removeAttribute(`data-stack-index`),y.removeAttribute(`data-stack-index`),v.style.removeProperty(`--dialog-stack-index`),v.style.removeProperty(`--dialog-overlay-stack-index`),y.style.removeProperty(`--dialog-stack-index`),y.style.removeProperty(`--dialog-content-stack-index`)},I=()=>{let e=r.indexOf(K);e!==-1&&r.splice(e,1),F(),a(),s()},L=0,R=0,z=0,B=0,V=(e,t)=>{C||S||t!==L||(e.hidden=!0,R=Math.max(0,R-1),R===0&&(A(),N()))},H=(0,e.createPresenceLifecycle)({element:v,onExitComplete:()=>V(v,z)}),U=(0,e.createPresenceLifecycle)({element:y,onExitComplete:()=>V(y,B)}),W=(t,n=!1)=>{S===t&&!n||(t?(L+=1,R=0,M(),w=document.activeElement,r.push(K),o(),a(),m&&!D&&((0,e.lockScroll)(),D=!0)):(L+=1,R=2,z=L,B=L,I(),D&&=((0,e.unlockScroll)(),!1)),S=t,g&&(0,e.setAria)(g,`expanded`,S),t?(v.hidden=!1,y.hidden=!1,P(`open`),H.enter(),U.enter()):(P(`closed`),H.exit(),U.exit()),(0,e.emit)(i,`dialog:change`,{open:S}),d?.(S),t&&requestAnimationFrame(j))},G=e=>{if(e.key!==`Tab`)return;let t=y.querySelectorAll(n);if(t.length===0){e.preventDefault(),k(),y.focus();return}let r=t[0],i=t[t.length-1],a=document.activeElement;if(!y.contains(a)){e.preventDefault(),r.focus();return}if(r===i){e.preventDefault();return}e.shiftKey?a===r&&(e.preventDefault(),i.focus()):a===i&&(e.preventDefault(),r.focus())};y.hidden=!0,v.hidden=!0,P(`closed`),g&&T.push((0,e.on)(g,`click`,()=>W(!S))),T.push((0,e.on)(y,`click`,e=>{let t=e.target;if(!t)return;let n=t.closest?.(`[data-slot="dialog-close"]`);n&&y.contains(n)&&W(!1)})),f&&T.push((0,e.on)(v,`click`,e=>{e.button===0&&e.target===v&&S&&W(!1)})),T.push((0,e.createDismissLayer)({root:i,isOpen:()=>S,onDismiss:()=>W(!1),closeOnClickOutside:!1,closeOnEscape:p}));let K={open:()=>W(!0),close:()=>W(!1),toggle:()=>W(!S),get isOpen(){return S},destroy:()=>{C=!0,I(),L+=1,R=0,H.cleanup(),U.cleanup(),S=!1,P(`closed`),v.hidden=!0,y.hidden=!0,g&&(0,e.setAria)(g,`expanded`,!1),D&&=((0,e.unlockScroll)(),!1),A(),w!==null&&N(),T.forEach(e=>e()),T.length=0,E?.cleanup(),(0,e.clearRootBinding)(i,t,K)},_handleKeydown:G,_content:y,_overlay:v};return T.push((0,e.on)(i,`dialog:set`,e=>{let t=e.detail,n;t?.open===void 0?t?.value!==void 0&&(n=t.value):n=t.open,typeof n==`boolean`&&W(n)})),(0,e.setRootBinding)(i,t,K),u&&W(!0),K}function l(n=document){let r=[];for(let i of(0,e.getRoots)(n,`dialog`))(0,e.hasRootBinding)(i,t)||r.push(c(i));return r}exports.create=l,exports.createDialog=c;

package/dist/index.js

@@ -1 +1 @@
-import{clearRootBinding as e,createDismissLayer as t,createPortalLifecycle as n,emit as r,ensureId as i,focusElement as a,getDataBool as o,getPart as s,getRoots as c,hasRootBinding as l,linkLabelledBy as u,lockScroll as d,on as f,reuseRootBinding as p,setAria as m,setRootBinding as h,unlockScroll as g}from"@data-slot/core";const _=`@data-slot/dialog`,v=`a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])`,y=[];let b=null;function x(){y.forEach((e,t)=>{let n=String(t);e._overlay&&(e._overlay.setAttribute(`data-stack-index`,n),e._overlay.style.setProperty(`--dialog-stack-index`,n),e._overlay.style.setProperty(`--dialog-overlay-stack-index`,n)),e._content&&(e._content.setAttribute(`data-stack-index`,n),e._content.style.setProperty(`--dialog-stack-index`,n),e._content.style.setProperty(`--dialog-content-stack-index`,n))})}function S(){if(b)return;let e=f(document,`keydown`,e=>{if(y.length===0)return;let t=y[y.length-1];!t||!t.isOpen||e.key===`Tab`&&t._handleKeydown&&t._handleKeydown(e)});b=()=>{e(),b=null}}function C(){y.length===0&&b&&b()}function w(c,l={}){let b=p(c,_,`[@data-slot/dialog] createDialog() called more than once for the same root. Returning the existing controller. Destroy it before rebinding with new options.`);if(b)return b;let w=l.defaultOpen??o(c,`defaultOpen`)??!1,T=l.onOpenChange,E=l.closeOnClickOutside??o(c,`closeOnClickOutside`)??!0,D=l.closeOnEscape??o(c,`closeOnEscape`)??!0,O=l.lockScroll??o(c,`lockScroll`)??!0,k=l.alertDialog??o(c,`alertDialog`)??!1,A=s(c,`dialog-trigger`),j=s(c,`dialog-portal`),M=s(c,`dialog-overlay`),N=s(c,`dialog-content`),P=s(c,`dialog-title`),F=s(c,`dialog-description`);if(!N)throw Error(`Dialog requires dialog-content slot`);if(!M)throw Error(`Dialog requires dialog-overlay slot`);let I=!1,L=null,R=[],z=j?n({content:j,root:c}):null,B=!1;i(N,`dialog-content`),N.setAttribute(`role`,k?`alertdialog`:`dialog`),m(N,`modal`,!0),u(N,P,F),M.setAttribute(`role`,`presentation`),M.setAttribute(`aria-hidden`,`true`),M.tabIndex=-1,A&&(A.setAttribute(`aria-haspopup`,`dialog`),A.setAttribute(`aria-controls`,N.id),m(A,`expanded`,!1));let V=!1,H=()=>{N.hasAttribute(`tabindex`)||(N.tabIndex=-1,V=!0)},U=()=>{V&&=(N.removeAttribute(`tabindex`),!1)},W=()=>{let e=N.querySelector(`[autofocus]`);if(e)return e.focus();let t=N.querySelector(v);if(t)return t.focus();H(),N.focus()},G=()=>{z?.mount()},K=e=>{c.setAttribute(`data-state`,e),j&&j.setAttribute(`data-state`,e),M.setAttribute(`data-state`,e),N.setAttribute(`data-state`,e)},q=()=>{M.removeAttribute(`data-stack-index`),N.removeAttribute(`data-stack-index`),M.style.removeProperty(`--dialog-stack-index`),M.style.removeProperty(`--dialog-overlay-stack-index`),N.style.removeProperty(`--dialog-stack-index`),N.style.removeProperty(`--dialog-content-stack-index`)},J=(e,t=!1)=>{if(!(I===e&&!t)){if(e)G(),L=document.activeElement,y.push(X),S(),x(),O&&!B&&(d(),B=!0);else{let e=y.indexOf(X);e!==-1&&y.splice(e,1),C(),q(),x(),B&&=(g(),!1),U();let t=L;L=null,requestAnimationFrame(()=>{t&&document.contains(t)&&typeof t.focus==`function`?a(t):A&&document.contains(A)&&a(A)})}I=e,N.hidden=!I,M.hidden=!I,A&&m(A,`expanded`,I),K(I?`open`:`closed`),r(c,`dialog:change`,{open:I}),T?.(I),e&&requestAnimationFrame(W)}},Y=e=>{if(e.key!==`Tab`)return;let t=N.querySelectorAll(v);if(t.length===0){e.preventDefault(),H(),N.focus();return}let n=t[0],r=t[t.length-1],i=document.activeElement;if(!N.contains(i)){e.preventDefault(),n.focus();return}if(n===r){e.preventDefault();return}e.shiftKey?i===n&&(e.preventDefault(),r.focus()):i===r&&(e.preventDefault(),n.focus())};w?(G(),N.hidden=!1,M.hidden=!1,K(`open`),I=!0,A&&m(A,`expanded`,!0)):(N.hidden=!0,M.hidden=!0,K(`closed`)),A&&R.push(f(A,`click`,()=>J(!I))),R.push(f(N,`click`,e=>{let t=e.target;if(!t)return;let n=t.closest?.(`[data-slot="dialog-close"]`);n&&N.contains(n)&&J(!1)})),E&&R.push(f(M,`click`,e=>{e.button===0&&e.target===M&&I&&J(!1)})),R.push(t({root:c,isOpen:()=>I,onDismiss:()=>J(!1),closeOnClickOutside:!1,closeOnEscape:D}));let X={open:()=>J(!0),close:()=>J(!1),toggle:()=>J(!I),get isOpen(){return I},destroy:()=>{if(I)J(!1,!0);else{let e=y.indexOf(X);e!==-1&&(y.splice(e,1),x(),C())}U(),R.forEach(e=>e()),R.length=0,z?.cleanup(),e(c,_,X)},_handleKeydown:Y,_content:N,_overlay:M};return R.push(f(c,`dialog:set`,e=>{let t=e.detail,n;t?.open===void 0?t?.value!==void 0&&(n=t.value):n=t.open,typeof n==`boolean`&&J(n)})),h(c,_,X),w&&(L=document.activeElement,y.push(X),S(),x(),O&&!B&&(d(),B=!0),r(c,`dialog:change`,{open:!0}),T?.(!0),requestAnimationFrame(W)),X}function T(e=document){let t=[];for(let n of c(e,`dialog`))l(n,_)||t.push(w(n));return t}export{T as create,w as createDialog};
+import{clearRootBinding as e,createDismissLayer as t,createPortalLifecycle as n,createPresenceLifecycle as r,emit as i,ensureId as ee,focusElement as a,getDataBool as o,getPart as s,getRoots as c,hasRootBinding as l,linkLabelledBy as te,lockScroll as ne,on as u,reuseRootBinding as re,setAria as d,setRootBinding as f,unlockScroll as p}from"@data-slot/core";const m=`@data-slot/dialog`,h=`a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])`,g=[];let _=null;function v(){g.forEach((e,t)=>{let n=String(t);e._overlay&&(e._overlay.setAttribute(`data-stack-index`,n),e._overlay.style.setProperty(`--dialog-stack-index`,n),e._overlay.style.setProperty(`--dialog-overlay-stack-index`,n)),e._content&&(e._content.setAttribute(`data-stack-index`,n),e._content.style.setProperty(`--dialog-stack-index`,n),e._content.style.setProperty(`--dialog-content-stack-index`,n))})}function y(){if(_)return;let e=u(document,`keydown`,e=>{if(g.length===0)return;let t=g[g.length-1];!t||!t.isOpen||e.key===`Tab`&&t._handleKeydown&&t._handleKeydown(e)});_=()=>{e(),_=null}}function b(){g.length===0&&_&&_()}function x(c,l={}){let _=re(c,m,`[@data-slot/dialog] createDialog() called more than once for the same root. Returning the existing controller. Destroy it before rebinding with new options.`);if(_)return _;let x=l.defaultOpen??o(c,`defaultOpen`)??!1,S=l.onOpenChange,C=l.closeOnClickOutside??o(c,`closeOnClickOutside`)??!0,w=l.closeOnEscape??o(c,`closeOnEscape`)??!0,ie=l.lockScroll??o(c,`lockScroll`)??!0,ae=l.alertDialog??o(c,`alertDialog`)??!1,T=s(c,`dialog-trigger`),E=s(c,`dialog-portal`),D=s(c,`dialog-overlay`),O=s(c,`dialog-content`),k=s(c,`dialog-title`),A=s(c,`dialog-description`);if(!O)throw Error(`Dialog requires dialog-content slot`);if(!D)throw Error(`Dialog requires dialog-overlay slot`);let j=!1,M=!1,N=null,P=[],F=E?n({content:E,root:c}):null,I=!1;ee(O,`dialog-content`),O.setAttribute(`role`,ae?`alertdialog`:`dialog`),d(O,`modal`,!0),te(O,k,A),D.setAttribute(`role`,`presentation`),D.setAttribute(`aria-hidden`,`true`),D.tabIndex=-1,T&&(T.setAttribute(`aria-haspopup`,`dialog`),T.setAttribute(`aria-controls`,O.id),d(T,`expanded`,!1));let L=!1,R=()=>{O.hasAttribute(`tabindex`)||(O.tabIndex=-1,L=!0)},z=()=>{L&&=(O.removeAttribute(`tabindex`),!1)},oe=()=>{let e=O.querySelector(`[autofocus]`);if(e)return e.focus();let t=O.querySelector(h);if(t)return t.focus();R(),O.focus()},B=()=>{F?.mount()},V=()=>{requestAnimationFrame(()=>{N&&document.contains(N)&&typeof N.focus==`function`?a(N):T&&document.contains(T)&&a(T),N=null})},H=e=>{if(c.setAttribute(`data-state`,e),E&&E.setAttribute(`data-state`,e),D.setAttribute(`data-state`,e),O.setAttribute(`data-state`,e),e===`open`){c.setAttribute(`data-open`,``),E?.setAttribute(`data-open`,``),D.setAttribute(`data-open`,``),O.setAttribute(`data-open`,``),c.removeAttribute(`data-closed`),E?.removeAttribute(`data-closed`),D.removeAttribute(`data-closed`),O.removeAttribute(`data-closed`);return}c.setAttribute(`data-closed`,``),E?.setAttribute(`data-closed`,``),D.setAttribute(`data-closed`,``),O.setAttribute(`data-closed`,``),c.removeAttribute(`data-open`),E?.removeAttribute(`data-open`),D.removeAttribute(`data-open`),O.removeAttribute(`data-open`)},U=()=>{D.removeAttribute(`data-stack-index`),O.removeAttribute(`data-stack-index`),D.style.removeProperty(`--dialog-stack-index`),D.style.removeProperty(`--dialog-overlay-stack-index`),O.style.removeProperty(`--dialog-stack-index`),O.style.removeProperty(`--dialog-content-stack-index`)},W=()=>{let e=g.indexOf($);e!==-1&&g.splice(e,1),U(),v(),b()},G=0,K=0,q=0,J=0,Y=(e,t)=>{M||j||t!==G||(e.hidden=!0,K=Math.max(0,K-1),K===0&&(z(),V()))},X=r({element:D,onExitComplete:()=>Y(D,q)}),Z=r({element:O,onExitComplete:()=>Y(O,J)}),Q=(e,t=!1)=>{j===e&&!t||(e?(G+=1,K=0,B(),N=document.activeElement,g.push($),y(),v(),ie&&!I&&(ne(),I=!0)):(G+=1,K=2,q=G,J=G,W(),I&&=(p(),!1)),j=e,T&&d(T,`expanded`,j),e?(D.hidden=!1,O.hidden=!1,H(`open`),X.enter(),Z.enter()):(H(`closed`),X.exit(),Z.exit()),i(c,`dialog:change`,{open:j}),S?.(j),e&&requestAnimationFrame(oe))},se=e=>{if(e.key!==`Tab`)return;let t=O.querySelectorAll(h);if(t.length===0){e.preventDefault(),R(),O.focus();return}let n=t[0],r=t[t.length-1],i=document.activeElement;if(!O.contains(i)){e.preventDefault(),n.focus();return}if(n===r){e.preventDefault();return}e.shiftKey?i===n&&(e.preventDefault(),r.focus()):i===r&&(e.preventDefault(),n.focus())};O.hidden=!0,D.hidden=!0,H(`closed`),T&&P.push(u(T,`click`,()=>Q(!j))),P.push(u(O,`click`,e=>{let t=e.target;if(!t)return;let n=t.closest?.(`[data-slot="dialog-close"]`);n&&O.contains(n)&&Q(!1)})),C&&P.push(u(D,`click`,e=>{e.button===0&&e.target===D&&j&&Q(!1)})),P.push(t({root:c,isOpen:()=>j,onDismiss:()=>Q(!1),closeOnClickOutside:!1,closeOnEscape:w}));let $={open:()=>Q(!0),close:()=>Q(!1),toggle:()=>Q(!j),get isOpen(){return j},destroy:()=>{M=!0,W(),G+=1,K=0,X.cleanup(),Z.cleanup(),j=!1,H(`closed`),D.hidden=!0,O.hidden=!0,T&&d(T,`expanded`,!1),I&&=(p(),!1),z(),N!==null&&V(),P.forEach(e=>e()),P.length=0,F?.cleanup(),e(c,m,$)},_handleKeydown:se,_content:O,_overlay:D};return P.push(u(c,`dialog:set`,e=>{let t=e.detail,n;t?.open===void 0?t?.value!==void 0&&(n=t.value):n=t.open,typeof n==`boolean`&&Q(n)})),f(c,m,$),x&&Q(!0),$}function S(e=document){let t=[];for(let n of c(e,`dialog`))l(n,m)||t.push(x(n));return t}export{S as create,x as createDialog};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@data-slot/dialog",
-  "version": "0.2.124",
+  "version": "0.2.125",
   "type": "module",
   "sideEffects": false,
   "main": "./dist/index.cjs",
@@ -35,6 +35,6 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@data-slot/core": "0.2.124"
+    "@data-slot/core": "0.2.125"
   }
 }