@planningcenter/tapestry 4.2.0-rc.0 → 4.2.0-rc.2

package/dist/unstable.css

@@ -136,46 +136,59 @@
     to{ transform:translateY(var(--_sticky-header-scroll-max, 0)); }
   }
 }
-
 @supports (timeline-scope: --tds){
   .tds-data-table-scroll-wrapper{
     --tds-data-table-scroll-shadow-size:var(--t-spacing-1);
 
     timeline-scope:--tds-data-table-scroll-timeline;
   }
-
-    .tds-data-table-scroll-wrapper::before,.tds-data-table-scroll-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-scroll-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-scroll-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-wrapper:has(.tds-data-table-column--actions)::after{
+      content:none;
     }
 
   .tds-data-table-scroll{
     scroll-timeline:--tds-data-table-scroll-timeline inline;
   }
+  .tds-data-table-scroll-wrapper::before,
+  .tds-data-table-scroll-wrapper::after,
+  .tds-data-table-column--actions::before,
+  .tds-data-table-cell--actions::before{
+    position:absolute;
+    inset-block:0;
+    z-index:1;
+    width:var(--tds-data-table-scroll-shadow-size);
+    pointer-events:none;
+    content:"";
+    opacity:0;
+    animation-name:tds-data-table-scroll-shadow;
+    animation-duration:auto;
+    animation-timeline:--tds-data-table-scroll-timeline;
+    animation-timing-function:linear;
+    animation-fill-mode:both;
+  }
+
+  .tds-data-table-scroll-wrapper::before{
+    inset-inline-start:0;
+    background:linear-gradient(to right, var(--t-shadow-overflow-color), transparent);
+    animation-range:0 var(--tds-data-table-scroll-shadow-size);
+  }
+
+  .tds-data-table-scroll-wrapper::after,
+  .tds-data-table-column--actions::before,
+  .tds-data-table-cell--actions::before{
+    background:linear-gradient(to left, var(--t-shadow-overflow-color), transparent);
+    animation-direction:reverse;
+    animation-range:calc(100% - var(--tds-data-table-scroll-shadow-size)) 100%;
+  }
+
+  .tds-data-table-scroll-wrapper::after{
+    inset-inline-end:0;
+  }
+
+  .tds-data-table-column--actions::before,
+  .tds-data-table-cell--actions::before{
+    inset-inline-start:calc(-1 * var(--tds-data-table-scroll-shadow-size));
+  }
 
   @keyframes tds-data-table-scroll-shadow{
     from{ opacity:0; }
@@ -254,7 +267,7 @@
   --tds-data-table-row-background-hover:var(--t-fill-color-neutral-090);
   cursor:default;
 }
-.tds-data-table-row--interactive[data-hovered]{
+.tds-data-table-row--interactive[data-hovered],.tds-data-table-row--interactive[data-hovered] .tds-data-table-cell--actions{
     background-color:var(--tds-data-table-row-background-hover);
   }
 .tds-data-table-row--interactive[data-focus-visible]{
@@ -338,6 +351,18 @@
   width:var(--t-element-size-md);
   text-align:center;
 }
+.tds-data-table-column--actions,
+.tds-data-table-cell--actions{
+  position:sticky;
+  inset-inline-end:0;
+  width:1%;
+  text-align:right;
+}
+
+.tds-data-table-cell--actions{
+  padding-inline:var(--tds-data-table-cell-padding-block);
+  background-color:var(--tds-data-table-background-color);
+}
 .tds-data-table-selectable-checkbox{
   --tds-data-table-selectable-checkbox-background-color:var(--t-form-background-color);
   --tds-data-table-selectable-checkbox-border-color:var(--t-form-border-color);
@@ -1058,6 +1083,153 @@
     border-color:var(--tds-btn-border-color-disabled);
   }
 
+.tds-dropdown-popover{
+  min-inline-size:10rem;
+  max-inline-size:24rem;
+  padding:var(--t-spacing-1);
+  overflow:auto;
+  overscroll-behavior:none;
+  -webkit-user-select:none;
+     -moz-user-select:none;
+          user-select:none;
+  outline:0;
+  scrollbar-color:#0004 var(--t-surface-color-card);
+  scrollbar-width:thin;
+  background:var(--t-surface-color-card);
+  background-clip:padding-box;
+  border:1px solid var(--t-border-color);
+  border-radius:var(--t-border-radius);
+  box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
+}
+.tds-dropdown-popover[data-entering]{
+    animation:tds-dropdown-popover var(--t-duration-300) var(--t-ease-out);
+  }
+.tds-dropdown-popover[data-exiting]{
+    animation:tds-dropdown-popover var(--t-duration-200) var(--t-ease-in) reverse;
+  }
+.tds-dropdown-popover[data-entering],.tds-dropdown-popover[data-exiting]{
+    will-change:opacity, transform;
+  }
+
+@keyframes tds-dropdown-popover{
+  from{
+    opacity:0;
+    transform:translateY(-8px);
+  }
+}
+
+@media (prefers-reduced-motion: reduce){
+    .tds-dropdown-popover[data-entering],.tds-dropdown-popover[data-exiting]{
+      animation:none;
+    }
+}
+
+.tds-dropdown-popover [role="menu"]{
+  outline:0;
+}
+.tds-dropdown-item{
+  --tds-dropdown-item-color:var(--t-text-color);
+  --tds-dropdown-item-row-gap:0;
+  --tds-dropdown-item-column-gap:var(--t-spacing-1);
+
+  display:flex;
+  row-gap:var(--tds-dropdown-item-row-gap);
+  -moz-column-gap:var(--tds-dropdown-item-column-gap);
+       column-gap:var(--tds-dropdown-item-column-gap);
+  align-items:center;
+  padding-block:var(--t-spacing-1);
+  padding-inline:var(--t-spacing-1-half);
+  font-size:1rem;
+  color:var(--tds-dropdown-item-color);
+  text-decoration:none;
+  cursor:default;
+  outline:0;
+  border-radius:var(--t-border-radius);
+}
+.tds-dropdown-item[data-hovered]:not([data-disabled]),.tds-dropdown-item[data-focus-visible]{
+    background:var(--t-fill-color-neutral-070);
+  }
+.tds-dropdown-item[data-pressed]:not([data-disabled]){
+    background:var(--t-fill-color-neutral-060);
+  }
+.tds-dropdown-item[data-disabled]{
+    --tds-dropdown-item-color:var(--t-form-color-disabled);
+
+    cursor:not-allowed;
+  }
+
+.tds-dropdown-item--destructive{
+  --tds-dropdown-item-color:var(--t-text-color-status-error);
+}
+
+.tds-dropdown-item--staff-only{
+  --tds-dropdown-item-color:var(--t-fill-color-product-staff);
+}
+a.tds-dropdown-item:is(:hover, :active){
+  color:var(--tds-dropdown-item-color);
+}
+.tds-dropdown-item [slot="prefix"],
+.tds-dropdown-item [slot="suffix"]{
+  flex-shrink:0;
+}
+
+.tds-dropdown-item [slot="label"]{
+  flex:1;
+  min-width:0;
+  overflow:hidden;
+  text-overflow:ellipsis;
+  white-space:nowrap;
+}
+
+.tds-dropdown-item [slot="description"]{
+  font-size:var(--t-font-size-sm);
+  color:var(--t-text-color-secondary);
+}
+
+.tds-dropdown-item:has([slot="description"]){
+  --tds-dropdown-item-row-gap:var(--t-spacing-half);
+  --tds-dropdown-item-column-gap:0;
+
+  display:grid;
+  grid-template-areas:"prefix label suffix" ". description .";
+  grid-template-columns:auto 1fr auto;
+}
+
+.tds-dropdown-item:has([slot="description"]) [slot="prefix"]{
+  grid-area:prefix;
+  margin-inline-end:var(--t-spacing-1);
+}
+
+.tds-dropdown-item:has([slot="description"]) [slot="label"]{
+  grid-area:label;
+}
+
+.tds-dropdown-item:has([slot="description"]) [slot="description"]{
+  grid-area:description;
+}
+
+.tds-dropdown-item:has([slot="description"]) [slot="suffix"]{
+  grid-area:suffix;
+  margin-inline-start:var(--t-spacing-1);
+}
+.tds-dropdown-section:not(:first-child){
+  margin-block-start:var(--t-spacing-half);
+}
+
+.tds-dropdown-section-label{
+  padding-block:var(--t-spacing-1);
+  padding-inline:var(--t-spacing-half);
+  font-size:var(--t-font-size-sm);
+  font-weight:var(--t-font-weight-semibold);
+  color:var(--t-text-color-secondary);
+}
+.tds-dropdown-separator{
+  margin-block:var(--t-spacing-half);
+  margin-inline:0;
+  border:0;
+  border-top:1px solid var(--t-border-color);
+}
+
 .tds-button-group{
   display:inline-flex;
 }
@@ -4309,153 +4481,6 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
   --tds-date-picker-popover-font-size:var(--t-font-size-lg);
 }
 
-.tds-dropdown-popover{
-  min-inline-size:10rem;
-  max-inline-size:24rem;
-  padding:var(--t-spacing-1);
-  overflow:auto;
-  overscroll-behavior:none;
-  -webkit-user-select:none;
-     -moz-user-select:none;
-          user-select:none;
-  outline:0;
-  scrollbar-color:#0004 var(--t-surface-color-card);
-  scrollbar-width:thin;
-  background:var(--t-surface-color-card);
-  background-clip:padding-box;
-  border:1px solid var(--t-border-color);
-  border-radius:var(--t-border-radius);
-  box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
-}
-.tds-dropdown-popover[data-entering]{
-    animation:tds-dropdown-popover var(--t-duration-300) var(--t-ease-out);
-  }
-.tds-dropdown-popover[data-exiting]{
-    animation:tds-dropdown-popover var(--t-duration-200) var(--t-ease-in) reverse;
-  }
-.tds-dropdown-popover[data-entering],.tds-dropdown-popover[data-exiting]{
-    will-change:opacity, transform;
-  }
-
-@keyframes tds-dropdown-popover{
-  from{
-    opacity:0;
-    transform:translateY(-8px);
-  }
-}
-
-@media (prefers-reduced-motion: reduce){
-    .tds-dropdown-popover[data-entering],.tds-dropdown-popover[data-exiting]{
-      animation:none;
-    }
-}
-
-.tds-dropdown-popover [role="menu"]{
-  outline:0;
-}
-.tds-dropdown-item{
-  --tds-dropdown-item-color:var(--t-text-color);
-  --tds-dropdown-item-row-gap:0;
-  --tds-dropdown-item-column-gap:var(--t-spacing-1);
-
-  display:flex;
-  row-gap:var(--tds-dropdown-item-row-gap);
-  -moz-column-gap:var(--tds-dropdown-item-column-gap);
-       column-gap:var(--tds-dropdown-item-column-gap);
-  align-items:center;
-  padding-block:var(--t-spacing-1);
-  padding-inline:var(--t-spacing-1-half);
-  font-size:1rem;
-  color:var(--tds-dropdown-item-color);
-  text-decoration:none;
-  cursor:default;
-  outline:0;
-  border-radius:var(--t-border-radius);
-}
-.tds-dropdown-item[data-hovered]:not([data-disabled]),.tds-dropdown-item[data-focus-visible]{
-    background:var(--t-fill-color-neutral-070);
-  }
-.tds-dropdown-item[data-pressed]:not([data-disabled]){
-    background:var(--t-fill-color-neutral-060);
-  }
-.tds-dropdown-item[data-disabled]{
-    --tds-dropdown-item-color:var(--t-form-color-disabled);
-
-    cursor:not-allowed;
-  }
-
-.tds-dropdown-item--destructive{
-  --tds-dropdown-item-color:var(--t-text-color-status-error);
-}
-
-.tds-dropdown-item--staff-only{
-  --tds-dropdown-item-color:var(--t-fill-color-product-staff);
-}
-a.tds-dropdown-item:is(:hover, :active){
-  color:var(--tds-dropdown-item-color);
-}
-.tds-dropdown-item [slot="prefix"],
-.tds-dropdown-item [slot="suffix"]{
-  flex-shrink:0;
-}
-
-.tds-dropdown-item [slot="label"]{
-  flex:1;
-  min-width:0;
-  overflow:hidden;
-  text-overflow:ellipsis;
-  white-space:nowrap;
-}
-
-.tds-dropdown-item [slot="description"]{
-  font-size:var(--t-font-size-sm);
-  color:var(--t-text-color-secondary);
-}
-
-.tds-dropdown-item:has([slot="description"]){
-  --tds-dropdown-item-row-gap:var(--t-spacing-half);
-  --tds-dropdown-item-column-gap:0;
-
-  display:grid;
-  grid-template-areas:"prefix label suffix" ". description .";
-  grid-template-columns:auto 1fr auto;
-}
-
-.tds-dropdown-item:has([slot="description"]) [slot="prefix"]{
-  grid-area:prefix;
-  margin-inline-end:var(--t-spacing-1);
-}
-
-.tds-dropdown-item:has([slot="description"]) [slot="label"]{
-  grid-area:label;
-}
-
-.tds-dropdown-item:has([slot="description"]) [slot="description"]{
-  grid-area:description;
-}
-
-.tds-dropdown-item:has([slot="description"]) [slot="suffix"]{
-  grid-area:suffix;
-  margin-inline-start:var(--t-spacing-1);
-}
-.tds-dropdown-section:not(:first-child){
-  margin-block-start:var(--t-spacing-half);
-}
-
-.tds-dropdown-section-label{
-  padding-block:var(--t-spacing-1);
-  padding-inline:var(--t-spacing-half);
-  font-size:var(--t-font-size-sm);
-  font-weight:var(--t-font-weight-semibold);
-  color:var(--t-text-color-secondary);
-}
-.tds-dropdown-separator{
-  margin-block:var(--t-spacing-half);
-  margin-inline:0;
-  border:0;
-  border-top:1px solid var(--t-border-color);
-}
-
 .tds-flex{ display:flex; }
 
 [data-flex-inline]{ display:inline-flex; }