@planningcenter/tapestry 3.8.0-qa-1049.1 → 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

@@ -75,28 +75,140 @@
 }
 
 .tds-data-table-wrapper{
+  --tds-data-table-background-color:var(--t-surface-color-canvas);
+  --tds-data-table-border-color:var(--t-border-color);
+  --tds-data-table-column-background-color:var(--t-fill-color-neutral-090);
+  --tds-data-table-cell-padding-inline:var(--t-spacing-2);
+  --tds-data-table-cell-padding-block:var(--t-spacing-1-half);
+  position:relative;
+  overflow:hidden;
+
+  background-color:var(--tds-data-table-column-background-color);
+  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;
 }
+@supports (timeline-scope: --tds){
+  .tds-data-table-wrapper{
+    --tds-data-table-scroll-shadow-size:var(--t-spacing-1);
+
+    timeline-scope:--tds-data-table-scroll-timeline;
+  }
+
+    .tds-data-table-wrapper::before,.tds-data-table-wrapper::after{
+      position:absolute;
+      inset-block:0;
+      z-index:1;
+      width:var(--tds-data-table-scroll-shadow-size);
+      pointer-events:none;
+      content:"";
+      opacity:0;
+      animation-duration:auto;
+      animation-timeline:--tds-data-table-scroll-timeline;
+      animation-timing-function:linear;
+      animation-fill-mode:both;
+    }
+
+    .tds-data-table-wrapper::before{
+      inset-inline-start:0;
+      background:linear-gradient(to right, var(--t-shadow-overflow-color), transparent);
+      animation-name:tds-data-table-scroll-shadow;
+      animation-range:0 var(--tds-data-table-scroll-shadow-size);
+    }
+
+    .tds-data-table-wrapper::after{
+      inset-inline-end:0;
+      background:linear-gradient(to left, var(--t-shadow-overflow-color), transparent);
+      animation-name:tds-data-table-scroll-shadow;
+      animation-direction:reverse;
+      animation-range:calc(100% - var(--tds-data-table-scroll-shadow-size)) 100%;
+    }
 
+  .tds-data-table-scroll{
+    scroll-timeline:--tds-data-table-scroll-timeline inline;
+  }
+
+  @keyframes tds-data-table-scroll-shadow{
+    from{ opacity:0; }
+    to{ opacity:1; }
+  }
+}
 .tds-data-table{
   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{
-    padding:var(--t-spacing-1);
-    text-align:start;
     white-space:nowrap;
-    border-bottom:1px solid var(--t-border-color);
   }
-
-.tds-data-table th{
-    font-weight:var(--t-font-weight-semibold);
+.tds-data-table-column{
+  padding:var(--tds-data-table-cell-padding-block);
+  padding-inline:var(--tds-data-table-cell-padding-inline);
+  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);
+    --_sort-icon-opacity:.5;
+    --_sort-icon-rotate:0;
+    cursor:pointer;
   }
-
-.tds-data-table-column-label--hidden{
+.tds-data-table-column[data-allows-sorting="true"][data-hovered]{
+      --_sort-icon-opacity:1;
+    }
+.tds-data-table-column[data-sort-direction]{
+    --_sort-icon-color:inherit;
+    --_sort-icon-opacity:1;
+  }
+.tds-data-table-column[data-sort-direction="descending"]{
+    --_sort-icon-rotate:.5turn;
+  }
+.tds-data-table-column-icon{
+  margin-inline-start:var(--t-spacing-1);
+}
+.tds-data-table-column-icon--sort{
+  color:var(--_sort-icon-color);
+  opacity:var(--_sort-icon-opacity);
+  transform:translateY(1px) rotate(var(--_sort-icon-rotate));
+  transition-timing-function:var(--t-ease-in-out);
+  transition-duration:var(--t-duration-300);
+  transition-property:color, opacity, transform;
+}
+.tds-data-table-column-label--hidden,
+.tds-data-table-cell-label--hidden{
   position:absolute;
   width:1px;
   height:1px;
@@ -104,6 +216,106 @@
   white-space:nowrap;
   clip-path:inset(50%);
 }
+.tds-data-table-cell{
+  padding:var(--tds-data-table-cell-padding-block);
+  padding-inline:var(--tds-data-table-cell-padding-inline);
+  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);
+  padding-inline:var(--tds-data-table-cell-padding-inline);
+  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;
 
@@ -2946,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);
@@ -5058,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;