@planningcenter/tapestry 3.8.0-rc.0 → 3.8.0

package/dist/reactRenderLegacy.js

@@ -1,4 +1,4 @@
 import './componentRegistration.js';
-export { mountElementLegacy, mountTapestryLegacy, unmountLegacy } from './tapestry-render/dist/legacy.js';
-export { register } from './tapestry-render/dist/registry.js';
+export { mountElementLegacy, mountTapestryLegacy, unmountLegacy } from './packages/tapestry-render/dist/legacy.js';
+export { register } from './packages/tapestry-render/dist/registry.js';
 //# sourceMappingURL=reactRenderLegacy.js.map

package/dist/unstable.css

@@ -87,6 +87,30 @@
   border:1px solid var(--tds-data-table-border-color);
   border-radius:var(--t-border-radius);
 }
+@supports (animation-timeline: scroll()){
+  .tds-data-table-wrapper--sticky-header{
+    overflow:clip;
+  }
+
+    .tds-data-table-wrapper--sticky-header .tds-data-table-scroll{
+      overflow-y:clip;
+    }
+
+    .tds-data-table-wrapper--sticky-header .tds-data-table-header{
+      z-index:1;
+      animation-name:tds-data-table-sticky-header;
+      animation-duration:auto;
+      animation-timing-function:linear;
+      animation-fill-mode:both;
+      animation-timeline:--_sticky-header-scroll;
+      animation-range:var(--_sticky-header-scroll-start, 0) calc(var(--_sticky-header-scroll-start, 0) + var(--_sticky-header-scroll-max, 0));
+    }
+
+  @keyframes tds-data-table-sticky-header{
+    from{ transform:translateY(0); }
+    to{ transform:translateY(var(--_sticky-header-scroll-max, 0)); }
+  }
+}
 .tds-data-table-scroll{
   overflow-x:auto;
   scrollbar-color:var(--t-fill-color-transparency-dark-030) transparent;
@@ -140,11 +164,11 @@
   width:100%;
   font-size:var(--t-font-size-md);
   color:var(--t-text-color);
-  border-collapse:collapse;
+  border-spacing:0;
+  border-collapse:separate;
   background-color:var(--tds-data-table-background-color);
 }
 .tds-data-table th,.tds-data-table td{
-    text-align:start;
     white-space:nowrap;
   }
 .tds-data-table-column{
@@ -153,6 +177,8 @@
   font-weight:var(--t-font-weight-medium);
   color:var(--t-text-color-secondary);
   background-color:var(--tds-data-table-column-background-color);
+  border-top:0;
+  border-bottom:1px solid var(--tds-data-table-border-color);
 }
 .tds-data-table-column[data-allows-sorting="true"]{
     --_sort-icon-color:var(--t-text-color-disabled);
@@ -181,7 +207,8 @@
   transition-duration:var(--t-duration-300);
   transition-property:color, opacity, transform;
 }
-.tds-data-table-column-label--hidden{
+.tds-data-table-column-label--hidden,
+.tds-data-table-cell-label--hidden{
   position:absolute;
   width:1px;
   height:1px;
@@ -192,7 +219,10 @@
 .tds-data-table-cell{
   padding:var(--tds-data-table-cell-padding-block);
   padding-inline:var(--tds-data-table-cell-padding-inline);
-  border-top:1px solid var(--tds-data-table-border-color);
+  border-bottom:1px solid var(--tds-data-table-border-color);
+}
+.tds-data-table-row:last-of-type .tds-data-table-cell{
+  border-bottom-width:0;
 }
 .tds-data-table-empty{
   padding:var(--tds-data-table-cell-padding-block);
@@ -200,6 +230,92 @@
   text-align:center;
   white-space:normal;
 }
+.tds-data-table-loading{
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  padding:var(--tds-data-table-cell-padding-block);
+  padding-inline:var(--tds-data-table-cell-padding-inline);
+}
+@keyframes tds-data-table-loading-fade-in{
+  from{
+    opacity:0;
+  }
+
+  to{
+    opacity:1;
+  }
+}
+.tds-data-table-loading-spinner{
+  --tds-loading-spinner-size:48px;
+  --tds-loading-spinner-track-width:6px;
+  --tds-loading-spinner-visibility:visible;
+  --tds-loading-spinner-animation-play-state:running;
+
+  position:relative;
+  display:block;
+  width:var(--tds-loading-spinner-size);
+  height:var(--tds-loading-spinner-size);
+  margin-block:min(calc(var(--tds-loading-spinner-size) * 1.25), 25vh);
+  opacity:0;
+  animation-name:tds-data-table-loading-fade-in;
+  animation-duration:1s;
+  animation-timing-function:ease-in-out;
+  animation-fill-mode:forwards;
+}
+.tds-data-table-loading-spinner .tds-loading-spinner{
+    inset:0;
+  }
+@media (prefers-reduced-motion: reduce){
+  .tds-data-table-loading-spinner{
+    --tds-loading-spinner-animation-play-state:paused;
+
+    opacity:1;
+    animation:none;
+  }
+}
+.tds-data-table-column,
+.tds-data-table-cell{
+  text-align:start;
+}
+.tds-data-table-column--align-center,
+.tds-data-table-cell--align-center{
+  text-align:center;
+}
+.tds-data-table-column--align-end,
+.tds-data-table-cell--align-end{
+  text-align:end;
+}
+.tds-data-table-cell--numeric{
+  font-variant-numeric:tabular-nums;
+}
+
+.tds-loading-spinner{
+  position:absolute;
+  right:0;
+  left:0;
+  visibility:var(--tds-loading-spinner-visibility, hidden);
+  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);
+  border-radius:50%;
+  animation:spinner-rotate 500ms infinite linear;
+  animation-play-state:var(--tds-loading-spinner-animation-play-state, paused);
+}
+
+@keyframes spinner-rotate{
+  to{
+    transform:rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce){
+  [class*="--loading"] .tds-loading-spinner{
+    --tds-loading-spinner-animation-play-state:paused;
+  }
+}
 
 @layer t-critical, t-component;
 
@@ -3042,34 +3158,32 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
     border-color:var(--tds-btn-border-color-disabled);
   }
 
-.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);
-  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);
-  border-radius:50%;
-  animation:spinner-rotate 500ms infinite linear;
-  animation-play-state:var(--tds-loading-spinner-animation-play-state, paused);
+.tds-button-group{
+  display:inline-flex;
 }
+.tds-button-group  > .tds-btn{
+    --tds-button-group-item-z-index:1;
 
-@keyframes spinner-rotate{
-  to{
-    transform:rotate(360deg);
+    z-index:var(--tds-button-group-item-z-index);
+    border-radius:0;
   }
-}
-
-@media (prefers-reduced-motion: reduce){
-  [class*="--loading"] .tds-loading-spinner{
-    --tds-loading-spinner-animation-play-state:paused;
+: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);
@@ -5154,6 +5268,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;