@planningcenter/tapestry 3.8.0-rc.0 → 3.8.0

package/dist/index.css

@@ -2840,14 +2840,12 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
   }
 
 .tds-loading-spinner{
-  --tds-loading-spinner-size:1.25em;
-
   position:absolute;
   right:0;
   left:0;
   visibility:var(--tds-loading-spinner-visibility, hidden);
-  width:var(--tds-loading-spinner-size);
-  height:var(--tds-loading-spinner-size);
+  width:var(--tds-loading-spinner-size, 1.25em);
+  height:var(--tds-loading-spinner-size, 1.25em);
   margin:auto;
   border:var(--tds-loading-spinner-track-width, 4px) solid var(--tds-loading-spinner-track-color, var(--t-fill-color-transparency-dark-020));
   border-top-color:var(--tds-loading-spinner-color, currentcolor);
@@ -2868,6 +2866,33 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
   }
 }
 
+.tds-button-group{
+  display:inline-flex;
+}
+.tds-button-group  > .tds-btn{
+    --tds-button-group-item-z-index:1;
+
+    z-index:var(--tds-button-group-item-z-index);
+    border-radius:0;
+  }
+:is(.tds-button-group > .tds-btn):not(:first-child){
+      margin-inline-start:calc(var(--tds-btn-border-width) * -1);
+    }
+:is(.tds-button-group > .tds-btn):hover{
+      --tds-button-group-item-z-index:2;
+    }
+:is(.tds-button-group > .tds-btn):focus-visible{
+      --tds-button-group-item-z-index:5;
+    }
+.tds-button-group  > .tds-btn:first-child{
+    border-start-start-radius:var(--tds-btn-border-radius);
+    border-end-start-radius:var(--tds-btn-border-radius);
+  }
+.tds-button-group  > .tds-btn:last-child{
+    border-start-end-radius:var(--tds-btn-border-radius);
+    border-end-end-radius:var(--tds-btn-border-radius);
+  }
+
 .tds-checkbox{
   --tds-checkbox-font-size:var(--t-font-size-md);
   --tds-checkbox-cursor:pointer;
@@ -4951,6 +4976,136 @@ 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);
+
+  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);
+
+  border:0;
+  border-radius:var(--t-border-radius-lg);
+  box-shadow:0 4px 18px 0 #0003;
+
+  opacity:var(--tds-modal-opacity);
+  scale:var(--tds-modal-scale);
+  transition:var(--tds-modal-transition);
+}
+
+.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);
+
+    display:flex;
+  }
+
+.tds-modal::backdrop{
+    background:hsl(0 0% 0% / 40%);
+    opacity:var(--tds-modal-backdrop-opacity);
+    transition:var(--tds-modal-backdrop-transition);
+  }
+
+@starting-style{
+  .tds-modal[open]{
+    --tds-modal-opacity:0;
+    --tds-modal-scale:.96;
+  }
+
+  .tds-modal[open]::backdrop{
+    --tds-modal-backdrop-opacity:0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce){
+  .tds-modal{
+    --tds-modal-transition:none;
+    --tds-modal-backdrop-transition:none;
+  }
+}
+
+.tds-modal--sm{
+  --tds-modal-width:400px;
+}
+
+.tds-modal--lg{
+  --tds-modal-width:800px;
+}
+
+.tds-modal--xl{
+  --tds-modal-width:1000px;
+}
+
+.tds-modal-header{
+  display:grid;
+  grid-template-columns:1fr auto;
+  -moz-column-gap:var(--t-spacing-2);
+       column-gap:var(--t-spacing-2);
+  padding-block:0;
+  padding-inline:var(--t-spacing-4);
+}
+
+.tds-modal-title{
+  grid-row:1;
+  grid-column:1;
+  margin:0;
+  font-size:var(--t-font-size-2xl);
+  font-weight:var(--t-font-weight-medium);
+  line-height:140%;
+  color:var(--t-text-color-headline);
+}
+
+.tds-modal-subtitle{
+  grid-row:2;
+  grid-column:1;
+  margin:0;
+  font-size:var(--t-font-size-md);
+  font-weight:var(--t-font-weight-medium);
+  line-height:140%;
+  color:var(--t-text-color-secondary);
+}
+
+.tds-modal-close{
+  grid-row:1;
+  grid-column:2;
+  align-self:center;
+  color:var(--t-icon-color-dim);
+}
+
+.tds-modal-body{
+  padding-block:var(--t-spacing-3);
+  padding-inline:var(--t-spacing-4);
+}
+
+.tds-modal-body--full-width{
+  padding-inline:0;
+}
+
+.tds-modal-footer{
+  display:flex;
+  gap:var(--t-spacing-2);
+  align-items:center;
+  justify-content:flex-end;
+  padding-block-start:var(--t-spacing-3);
+  padding-inline:var(--t-spacing-4);
+  border-top:1px solid var(--t-border-color);
+}
+
+.tds-modal-footer > [slot="start"]{
+  margin-inline-end:auto;
+}
+
 .tds-number-stepper{
   --tds-number-stepper-button-offset:4px;
   --tds-number-stepper-button-gap:2px;