@planningcenter/tapestry 3.1.1-rc.2 → 3.1.1-rc.4

package/dist/components/page-header/index.js

@@ -1,4 +1,4 @@
-import '../../tapestry-wc/dist/components/p-CGNxbMWC.js';
+import '../../tapestry-wc/dist/components/p-BG_lBFhW.js';
 import { defineCustomElement } from '../../tapestry-wc/dist/components/tds-page-header.js';
 import { defineCustomElement as defineCustomElement$1 } from '../../tapestry-wc/dist/components/tds-page-header-nav.js';
 

package/dist/components/sidenav/index.js

@@ -1,4 +1,4 @@
-import '../../tapestry-wc/dist/components/p-CGNxbMWC.js';
+import '../../tapestry-wc/dist/components/p-BG_lBFhW.js';
 import { defineCustomElement } from '../../tapestry-wc/dist/components/tds-sidenav.js';
 import { defineCustomElement as defineCustomElement$1 } from '../../tapestry-wc/dist/components/tds-sidenav-item.js';
 import { defineCustomElement as defineCustomElement$3 } from '../../tapestry-wc/dist/components/tds-sidenav-responsive-header.js';

package/dist/index.css

@@ -1174,11 +1174,18 @@
 
 @layer tds-component{
   tds-sidenav,
- .tds-sidenav{
+  .tds-sidenav{
     --tds-sidenav-indent:12px;
     --tds-sidenav-item-depth:0;
 
-    --tds-sidenav-item-transition:background-color .2s cubic-bezier(.19, .91, .38, 1);
+    --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
+
+    --tds-sidenav-collapse-transition-enter:opacity var(--t-duration-300) var(--t-ease-out), transform var(--t-duration-300) var(--t-ease-out), display var(--t-duration-300) allow-discrete, overlay var(--t-duration-300) allow-discrete;
+    --tds-sidenav-collapse-transition-exit:opacity var(--t-duration-200) var(--t-ease-in), display var(--t-duration-200) allow-discrete, overlay var(--t-duration-200) allow-discrete;
+    --tds-sidenav-collapse-closed-opacity:0;
+    --tds-sidenav-collapse-open-opacity:1;
+    --tds-sidenav-collapse-closed-transform:translateY(-8px);
+    --tds-sidenav-collapse-open-transform:translateY(0);
 
     --tds-sidenav-item-icon-size:var(--t-element-size-md);
     --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
@@ -1197,6 +1204,16 @@
     --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
   }
 
+    @media (prefers-reduced-motion: reduce){
+  tds-sidenav,
+  .tds-sidenav{
+      --tds-sidenav-collapse-transition-enter:none;
+      --tds-sidenav-collapse-transition-exit:none;
+      --tds-sidenav-collapse-closed-transform:none;
+      --tds-sidenav-collapse-open-transform:none;
+  }
+    }
+
   .tds-sidenav--theme-gray{
     --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
     --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
@@ -1351,7 +1368,7 @@
       block-size:0;
       overflow-y:clip;
       opacity:0;
-      transition:content-visibility .2s allow-discrete, opacity .2s, block-size .2s;
+      transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
     }
 
 :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
@@ -1435,14 +1452,17 @@
     max-width:min(448px, calc(100vw - 48px));
     padding:0;
     margin:12px 0;
+    position-area:bottom span-right;
     overflow:hidden;
     outline:0;
     background:var(--t-surface-color-card);
     border:0;
     border-radius:6px;
     box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
+    opacity:var(--tds-sidenav-collapse-open-opacity);
+    transform:var(--tds-sidenav-collapse-open-transform);
+    transition:var(--tds-sidenav-collapse-transition-enter);
     will-change:transform;
-    position-area:bottom span-right;
   }
 
   .tds-sidenav-scroll-container{
@@ -1462,11 +1482,28 @@
     .tds-sidenav-collapse:popover-open{
       display:flex;
     }
+
+    .tds-sidenav-collapse:not(:popover-open){
+      opacity:var(--tds-sidenav-collapse-closed-opacity);
+      transition:var(--tds-sidenav-collapse-transition-exit);
+    }
+
+    @starting-style{
+      .tds-sidenav-collapse:popover-open{
+        opacity:var(--tds-sidenav-collapse-closed-opacity);
+        transform:var(--tds-sidenav-collapse-closed-transform);
+      }
+    }
   }
   @supports not selector(:popover-open){
     .tds-sidenav-collapse.\:popover-open{
       display:flex;
     }
+
+    .tds-sidenav-collapse:not(.\:popover-open){
+      opacity:var(--tds-sidenav-collapse-closed-opacity);
+      transition:var(--tds-sidenav-collapse-transition-exit);
+    }
   }
 }