@data-slot/dialog 0.2.123 → 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=`a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])`,n=[];let r=null;function i(){n.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 a(){if(r)return;let t=(0,e.on)(document,`keydown`,e=>{if(n.length===0)return;let t=n[n.length-1];!t||!t.isOpen||e.key===`Tab`&&t._handleKeydown&&t._handleKeydown(e)});r=()=>{t(),r=null}}function o(){n.length===0&&r&&r()}function s(r,s={}){let c=s.defaultOpen??(0,e.getDataBool)(r,`defaultOpen`)??!1,l=s.onOpenChange,u=s.closeOnClickOutside??(0,e.getDataBool)(r,`closeOnClickOutside`)??!0,d=s.closeOnEscape??(0,e.getDataBool)(r,`closeOnEscape`)??!0,f=s.lockScroll??(0,e.getDataBool)(r,`lockScroll`)??!0,p=s.alertDialog??(0,e.getDataBool)(r,`alertDialog`)??!1,m=(0,e.getPart)(r,`dialog-trigger`),h=(0,e.getPart)(r,`dialog-portal`),g=(0,e.getPart)(r,`dialog-overlay`),_=(0,e.getPart)(r,`dialog-content`),v=(0,e.getPart)(r,`dialog-title`),y=(0,e.getPart)(r,`dialog-description`);if(!_)throw Error(`Dialog requires dialog-content slot`);if(!g)throw Error(`Dialog requires dialog-overlay slot`);let b=!1,x=null,S=[],C=h?(0,e.createPortalLifecycle)({content:h,root:r}):null,w=!1;(0,e.ensureId)(_,`dialog-content`),_.setAttribute(`role`,p?`alertdialog`:`dialog`),(0,e.setAria)(_,`modal`,!0),(0,e.linkLabelledBy)(_,v,y),g.setAttribute(`role`,`presentation`),g.setAttribute(`aria-hidden`,`true`),g.tabIndex=-1,m&&(m.setAttribute(`aria-haspopup`,`dialog`),m.setAttribute(`aria-controls`,_.id),(0,e.setAria)(m,`expanded`,!1));let T=!1,E=()=>{_.hasAttribute(`tabindex`)||(_.tabIndex=-1,T=!0)},D=()=>{T&&=(_.removeAttribute(`tabindex`),!1)},O=()=>{let e=_.querySelector(`[autofocus]`);if(e)return e.focus();let n=_.querySelector(t);if(n)return n.focus();E(),_.focus()},k=()=>{C?.mount()},A=e=>{r.setAttribute(`data-state`,e),h&&h.setAttribute(`data-state`,e),g.setAttribute(`data-state`,e),_.setAttribute(`data-state`,e)},j=()=>{g.removeAttribute(`data-stack-index`),_.removeAttribute(`data-stack-index`),g.style.removeProperty(`--dialog-stack-index`),g.style.removeProperty(`--dialog-overlay-stack-index`),_.style.removeProperty(`--dialog-stack-index`),_.style.removeProperty(`--dialog-content-stack-index`)},M=(t,s=!1)=>{if(!(b===t&&!s)){if(t)k(),x=document.activeElement,n.push(P),a(),i(),f&&!w&&((0,e.lockScroll)(),w=!0);else{let t=n.indexOf(P);t!==-1&&n.splice(t,1),o(),j(),i(),w&&=((0,e.unlockScroll)(),!1),D();let r=x;x=null,requestAnimationFrame(()=>{r&&document.contains(r)&&typeof r.focus==`function`?(0,e.focusElement)(r):m&&document.contains(m)&&(0,e.focusElement)(m)})}b=t,_.hidden=!b,g.hidden=!b,m&&(0,e.setAria)(m,`expanded`,b),A(b?`open`:`closed`),(0,e.emit)(r,`dialog:change`,{open:b}),l?.(b),t&&requestAnimationFrame(O)}},N=e=>{if(e.key!==`Tab`)return;let n=_.querySelectorAll(t);if(n.length===0){e.preventDefault(),E(),_.focus();return}let r=n[0],i=n[n.length-1],a=document.activeElement;if(!_.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())};c?(k(),_.hidden=!1,g.hidden=!1,A(`open`),b=!0,m&&(0,e.setAria)(m,`expanded`,!0)):(_.hidden=!0,g.hidden=!0,A(`closed`)),m&&S.push((0,e.on)(m,`click`,()=>M(!b))),S.push((0,e.on)(_,`click`,e=>{let t=e.target;if(!t)return;let n=t.closest?.(`[data-slot="dialog-close"]`);n&&_.contains(n)&&M(!1)})),u&&S.push((0,e.on)(g,`click`,e=>{e.button===0&&e.target===g&&b&&M(!1)})),S.push((0,e.createDismissLayer)({root:r,isOpen:()=>b,onDismiss:()=>M(!1),closeOnClickOutside:!1,closeOnEscape:d}));let P={open:()=>M(!0),close:()=>M(!1),toggle:()=>M(!b),get isOpen(){return b},destroy:()=>{if(b)M(!1,!0);else{let e=n.indexOf(P);e!==-1&&(n.splice(e,1),i(),o())}D(),S.forEach(e=>e()),S.length=0,C?.cleanup()},_handleKeydown:N,_content:_,_overlay:g};return S.push((0,e.on)(r,`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`&&M(n)})),c&&(x=document.activeElement,n.push(P),a(),i(),f&&!w&&((0,e.lockScroll)(),w=!0),(0,e.emit)(r,`dialog:change`,{open:!0}),l?.(!0),requestAnimationFrame(O)),P}const c=new WeakSet;function l(t=document){let n=[];for(let r of(0,e.getRoots)(t,`dialog`))c.has(r)||(c.add(r),n.push(s(r)));return n}exports.create=l,exports.createDialog=s;
+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{createDismissLayer as e,createPortalLifecycle as t,emit as n,ensureId as r,focusElement as i,getDataBool as a,getPart as o,getRoots as s,linkLabelledBy as c,lockScroll as l,on as u,setAria as d,unlockScroll as f}from"@data-slot/core";const p=`a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])`,m=[];let h=null;function g(){m.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 _(){if(h)return;let e=u(document,`keydown`,e=>{if(m.length===0)return;let t=m[m.length-1];!t||!t.isOpen||e.key===`Tab`&&t._handleKeydown&&t._handleKeydown(e)});h=()=>{e(),h=null}}function v(){m.length===0&&h&&h()}function y(s,h={}){let y=h.defaultOpen??a(s,`defaultOpen`)??!1,b=h.onOpenChange,x=h.closeOnClickOutside??a(s,`closeOnClickOutside`)??!0,S=h.closeOnEscape??a(s,`closeOnEscape`)??!0,C=h.lockScroll??a(s,`lockScroll`)??!0,w=h.alertDialog??a(s,`alertDialog`)??!1,T=o(s,`dialog-trigger`),E=o(s,`dialog-portal`),D=o(s,`dialog-overlay`),O=o(s,`dialog-content`),k=o(s,`dialog-title`),A=o(s,`dialog-description`);if(!O)throw Error(`Dialog requires dialog-content slot`);if(!D)throw Error(`Dialog requires dialog-overlay slot`);let j=!1,M=null,N=[],P=E?t({content:E,root:s}):null,F=!1;r(O,`dialog-content`),O.setAttribute(`role`,w?`alertdialog`:`dialog`),d(O,`modal`,!0),c(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 I=!1,L=()=>{O.hasAttribute(`tabindex`)||(O.tabIndex=-1,I=!0)},R=()=>{I&&=(O.removeAttribute(`tabindex`),!1)},z=()=>{let e=O.querySelector(`[autofocus]`);if(e)return e.focus();let t=O.querySelector(p);if(t)return t.focus();L(),O.focus()},B=()=>{P?.mount()},V=e=>{s.setAttribute(`data-state`,e),E&&E.setAttribute(`data-state`,e),D.setAttribute(`data-state`,e),O.setAttribute(`data-state`,e)},H=()=>{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`)},U=(e,t=!1)=>{if(!(j===e&&!t)){if(e)B(),M=document.activeElement,m.push(G),_(),g(),C&&!F&&(l(),F=!0);else{let e=m.indexOf(G);e!==-1&&m.splice(e,1),v(),H(),g(),F&&=(f(),!1),R();let t=M;M=null,requestAnimationFrame(()=>{t&&document.contains(t)&&typeof t.focus==`function`?i(t):T&&document.contains(T)&&i(T)})}j=e,O.hidden=!j,D.hidden=!j,T&&d(T,`expanded`,j),V(j?`open`:`closed`),n(s,`dialog:change`,{open:j}),b?.(j),e&&requestAnimationFrame(z)}},W=e=>{if(e.key!==`Tab`)return;let t=O.querySelectorAll(p);if(t.length===0){e.preventDefault(),L(),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())};y?(B(),O.hidden=!1,D.hidden=!1,V(`open`),j=!0,T&&d(T,`expanded`,!0)):(O.hidden=!0,D.hidden=!0,V(`closed`)),T&&N.push(u(T,`click`,()=>U(!j))),N.push(u(O,`click`,e=>{let t=e.target;if(!t)return;let n=t.closest?.(`[data-slot="dialog-close"]`);n&&O.contains(n)&&U(!1)})),x&&N.push(u(D,`click`,e=>{e.button===0&&e.target===D&&j&&U(!1)})),N.push(e({root:s,isOpen:()=>j,onDismiss:()=>U(!1),closeOnClickOutside:!1,closeOnEscape:S}));let G={open:()=>U(!0),close:()=>U(!1),toggle:()=>U(!j),get isOpen(){return j},destroy:()=>{if(j)U(!1,!0);else{let e=m.indexOf(G);e!==-1&&(m.splice(e,1),g(),v())}R(),N.forEach(e=>e()),N.length=0,P?.cleanup()},_handleKeydown:W,_content:O,_overlay:D};return N.push(u(s,`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`&&U(n)})),y&&(M=document.activeElement,m.push(G),_(),g(),C&&!F&&(l(),F=!0),n(s,`dialog:change`,{open:!0}),b?.(!0),requestAnimationFrame(z)),G}const b=new WeakSet;function x(e=document){let t=[];for(let n of s(e,`dialog`))b.has(n)||(b.add(n),t.push(y(n)));return t}export{x as create,y 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.123",
+  "version": "0.2.125",
   "type": "module",
   "sideEffects": false,
   "main": "./dist/index.cjs",
@@ -35,6 +35,6 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@data-slot/core": "0.2.123"
+    "@data-slot/core": "0.2.125"
   }
 }