@planningcenter/tapestry 3.8.1-rc.3 → 4.0.0-rc.0

package/dist/unstable.css

@@ -5277,76 +5277,90 @@ a.tds-dropdown-item:is(:hover, :active){
     line-height:1.35;
   }
 
-.tds-modal{
-  --tds-modal-width:600px;
-  --tds-modal-opacity:0;
-  --tds-modal-backdrop-opacity:0;
-  --tds-modal-scale:.96;
-  --tds-modal-transition-duration:var(--t-duration-200);
-  --tds-modal-transition-timing-function:var(--t-ease-in);
-  --tds-modal-transition:opacity var(--tds-modal-transition-duration) var(--tds-modal-transition-timing-function), scale var(--tds-modal-transition-duration) var(--tds-modal-transition-timing-function);
-  --tds-modal-backdrop-transition:opacity var(--tds-modal-transition-duration) var(--tds-modal-transition-timing-function);
+.tds-modal-overlay{
+  position:fixed;
+  inset:0;
+  z-index:1000;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  background:hsl(0 0% 0% / 40%);
+}
 
-  flex-direction:column;
-  width:min(var(--tds-modal-width), calc(100% - 48px));
-  padding-block:var(--t-spacing-3);
-  padding-inline:0;
-  background:var(--t-surface-color-card);
+.tds-modal-overlay[data-entering]{
+    animation:tds-modal-overlay-fade var(--t-duration-300) var(--t-ease-out);
+  }
 
-  border:0;
-  border-radius:var(--t-border-radius-lg);
-  box-shadow:0 4px 18px 0 #0003;
+.tds-modal-overlay[data-exiting]{
+    animation:tds-modal-overlay-fade var(--t-duration-200) var(--t-ease-in) reverse;
+  }
 
-  opacity:var(--tds-modal-opacity);
-  scale:var(--tds-modal-scale);
-  transition:var(--tds-modal-transition);
+@keyframes tds-modal-overlay-fade{
+  from{
+    opacity:0;
+  }
 }
 
-.tds-modal[open]{
-    --tds-modal-opacity:1;
-    --tds-modal-backdrop-opacity:1;
-    --tds-modal-scale:1;
-    --tds-modal-transition-duration:var(--t-duration-300);
-    --tds-modal-transition-timing-function:var(--t-ease-out);
+.tds-modal-frame{
+  --tds-modal-width:600px;
 
-    display:flex;
-  }
+  display:flex;
+  justify-content:center;
+  width:min(var(--tds-modal-width), calc(100% - 48px));
+}
 
-.tds-modal::backdrop{
-    background:hsl(0 0% 0% / 40%);
-    opacity:var(--tds-modal-backdrop-opacity);
-    transition:var(--tds-modal-backdrop-transition);
+.tds-modal-frame[data-entering]{
+    animation:tds-modal-zoom var(--t-duration-300) var(--t-ease-out);
   }
 
-@starting-style{
-  .tds-modal[open]{
-    --tds-modal-opacity:0;
-    --tds-modal-scale:.96;
+.tds-modal-frame[data-exiting]{
+    animation:tds-modal-zoom var(--t-duration-200) var(--t-ease-in) reverse;
   }
 
-  .tds-modal[open]::backdrop{
-    --tds-modal-backdrop-opacity:0;
+.tds-modal-frame--sm{
+  --tds-modal-width:400px;
+}
+
+.tds-modal-frame--lg{
+  --tds-modal-width:800px;
+}
+
+.tds-modal-frame--xl{
+  --tds-modal-width:1000px;
+}
+
+@keyframes tds-modal-zoom{
+  from{
+    opacity:0;
+    scale:.96;
   }
 }
 
 @media (prefers-reduced-motion: reduce){
-  .tds-modal{
-    --tds-modal-transition:none;
-    --tds-modal-backdrop-transition:none;
+  .tds-modal-overlay[data-entering],
+  .tds-modal-overlay[data-exiting],
+  .tds-modal-frame[data-entering],
+  .tds-modal-frame[data-exiting]{
+    animation:none;
   }
 }
 
-.tds-modal--sm{
-  --tds-modal-width:400px;
-}
+.tds-modal{
+  display:flex;
+  flex-direction:column;
+  width:100%;
+  padding-block:var(--t-spacing-3);
+  padding-inline:0;
+  background:var(--t-surface-color-card);
 
-.tds-modal--lg{
-  --tds-modal-width:800px;
+  border:0;
+  border-radius:var(--t-border-radius-lg);
+  box-shadow:0 4px 18px 0 #0003;
 }
 
-.tds-modal--xl{
-  --tds-modal-width:1000px;
-}
+.tds-modal:focus{
+    outline:none;
+  }
 
 .tds-modal-header{
   display:grid;