@planningcenter/tapestry 3.3.0-rc.1 → 3.3.0-rc.2

package/dist/unstable.css

@@ -3872,6 +3872,9 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
   background-color:var(--tds-date-picker-background-color);
   border:var(--t-form-border-width) solid var(--tds-date-picker-border-color);
   border-radius:var(--t-form-border-radius);
+  transition-timing-function:var(--t-ease-in-out);
+  transition-duration:var(--t-duration-200);
+  transition-property:background-color, border-color, outline-color, outline-offset;
 }
 
 .tds-date-picker-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
@@ -3903,11 +3906,16 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
   flex:1;
   padding-block:var(--tds-date-picker-padding-block);
   padding-inline-start:var(--t-spacing-1);
+  overflow-x:auto;
   font-variant-numeric:tabular-nums;
+  text-wrap:nowrap;
+  scrollbar-width:none;
 }
 
 .tds-date-picker-segment{
   padding-inline:2px;
+  text-align:end;
+  text-wrap:nowrap;
   caret-color:transparent;
   border-radius:var(--t-border-radius-sm);
 }
@@ -3919,7 +3927,7 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
 .tds-date-picker-segment[data-focused]{
     color:var(--t-text-color-inverted);
     outline:0;
-    background:var(--t-fill-color-interaction);
+    background-color:var(--t-fill-color-interaction);
   }
 
 .tds-date-picker-segment-separator{
@@ -3927,6 +3935,10 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
   color:var(--tds-date-picker-placeholder-color);
 }
 
+.tds-date-picker-segment:not([data-placeholder], [data-focused]) + .tds-date-picker-segment-separator{
+  color:var(--tds-date-picker-color);
+}
+
 .tds-date-picker-description{
   display:flex;
   gap:var(--t-spacing-half);
@@ -3951,6 +3963,7 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
   inline-size:calc(var(--tds-date-picker-min-height) - (var(--tds-date-picker-button-offset) * 2));
   block-size:calc(var(--tds-date-picker-min-height) - (var(--tds-date-picker-button-offset) * 2));
   padding:0;
+  margin-inline-start:var(--t-spacing-1);
   margin-inline-end:var(--tds-date-picker-button-offset);
 }
 
@@ -3958,6 +3971,7 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
   --tds-date-picker-popover-font-size:var(--t-font-size-md);
   --tds-date-picker-popover-padding:var(--t-spacing-1-half);
   --tds-date-picker-popover-background-color:var(--t-surface-color-card);
+  --tds-date-picker-popover-shadow:hsl(0, 0%, 0%, .05) 0 10px 15px -3px, hsl(0, 0%, 0%, .05) 0 4px 6px -4px;
   --tds-date-picker-popover-transition-enter:opacity var(--t-duration-300) var(--t-ease-out), transform var(--t-duration-300) var(--t-ease-out);
   --tds-date-picker-popover-transition-exit:opacity var(--t-duration-200) var(--t-ease-in), transform var(--t-duration-200) var(--t-ease-in);
   --tds-date-picker-popover-closed-opacity:0;
@@ -3971,7 +3985,7 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
   background-color:var(--tds-date-picker-popover-background-color);
   border:var(--t-border-width) solid var(--t-border-color);
   border-radius:var(--t-border-radius);
-  box-shadow:hsl(0, 0%, 0%, .05) 0 10px 15px -3px, hsl(0, 0%, 0%, .05) 0 4px 6px -4px;
+  box-shadow:var(--tds-date-picker-popover-shadow);
   opacity:1;
   transform:translateY(0);
   transition:var(--tds-date-picker-popover-transition-enter);
@@ -4009,22 +4023,22 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
 .tds-date-picker-overlay-list{
   display:grid;
   flex:1;
+  grid-template-columns:repeat(3, 1fr);
   gap:var(--t-spacing-half);
   padding-inline:var(--tds-date-picker-popover-padding);
   outline:0;
-  grid-template-columns:repeat(3, 1fr);
-  scrollbar-width:thin;
   scrollbar-color:var(--t-fill-color-transparency-dark-030) transparent;
+  scrollbar-width:thin;
 }
 
 .tds-date-picker-overlay--month .tds-date-picker-overlay-list{
-  padding-bottom:var(--tds-date-picker-popover-padding);
   grid-template-rows:repeat(4, 1fr);
+  padding-bottom:var(--tds-date-picker-popover-padding);
 }
 
 .tds-date-picker-overlay--year .tds-date-picker-overlay-list{
-  padding-right:var(--t-spacing-1);
   grid-auto-rows:var(--t-container-size-xl);
+  padding-right:var(--t-spacing-1);
   overflow-y:auto;
   scroll-padding-block:calc(var(--t-focus-ring-width) + var(--t-focus-ring-offset));
 }
@@ -4036,28 +4050,28 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
   font-family:inherit;
   font-size:var(--tds-date-picker-popover-font-size);
   color:var(--t-text-color);
-  cursor:default;
+  cursor:pointer;
   outline:0;
-  background:transparent;
+  background-color:transparent;
   border:0;
   border-radius:var(--t-border-radius-md);
   transition-timing-function:var(--tds-date-picker-popover-interactive-timing-function);
-  transition-duration:var(--tds-date-picker-popover-interactive-duration);
+  transition-duration:var(--t-duration-100);
   transition-property:var(--tds-date-picker-popover-interactive-property);
 }
 
 .tds-date-picker-overlay-cell[data-hovered]{
-    background:var(--t-fill-color-button-neutral-outline-hover);
+    background-color:var(--t-fill-color-button-neutral-outline-hover);
   }
 
 .tds-date-picker-overlay-cell[data-pressed]{
-    background:var(--t-fill-color-button-neutral-outline-active);
+    background-color:var(--t-fill-color-button-neutral-outline-active);
   }
 
 .tds-date-picker-overlay-cell[data-selected]{
     font-weight:var(--t-font-weight-semibold);
     color:var(--t-text-color-inverted);
-    background:var(--t-fill-color-interaction);
+    background-color:var(--t-fill-color-interaction);
   }
 
 .tds-date-picker-overlay-cell[data-focus-visible]{
@@ -4071,33 +4085,48 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
 .tds-date-picker-calendar-heading{
   display:flex;
   flex:1;
-  gap:var(--t-spacing-half);
+  gap:var(--t-spacing-1);
   align-items:center;
   justify-content:flex-start;
+  padding-inline-start:4px;
 }
 
 .tds-date-picker-calendar-overlay-trigger{
-  padding:var(--t-spacing-half) var(--t-spacing-1);
+  --_background-color:transparent;
+  position:relative;
+  padding:0;
   font-family:inherit;
   font-size:var(--tds-date-picker-popover-font-size);
   font-weight:var(--t-font-weight-semibold);
+  font-feature-settings:"ss01", "ss02";
   color:var(--t-text-color);
-  cursor:default;
+  cursor:pointer;
   outline:0;
-  background:transparent;
+  background-color:transparent;
   border:0;
   border-radius:var(--t-border-radius-md);
+  isolation:isolate;
   transition-timing-function:var(--tds-date-picker-popover-interactive-timing-function);
   transition-duration:var(--tds-date-picker-popover-interactive-duration);
   transition-property:var(--tds-date-picker-popover-interactive-property);
 }
 
+.tds-date-picker-calendar-overlay-trigger::before{
+    position:absolute;
+    inset:calc(var(--t-spacing-half) * -1);
+    z-index:-1;
+    pointer-events:inherit;
+    content:"";
+    background-color:var(--_background-color);
+    border-radius:inherit;
+  }
+
 .tds-date-picker-calendar-overlay-trigger[data-hovered]{
-    background:var(--t-fill-color-button-neutral-outline-hover);
+    --_background-color:var(--t-fill-color-button-neutral-outline-hover);
   }
 
 .tds-date-picker-calendar-overlay-trigger[data-pressed]{
-    background:var(--t-fill-color-button-neutral-outline-active);
+    --_background-color:var(--t-fill-color-button-neutral-outline-active);
   }
 
 .tds-date-picker-calendar-overlay-trigger[data-focus-visible]{
@@ -4106,9 +4135,9 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
   }
 
 .tds-date-picker-calendar{
-  font-size:var(--tds-date-picker-popover-font-size);
   inline-size:-moz-fit-content;
   inline-size:fit-content;
+  font-size:var(--tds-date-picker-popover-font-size);
 }
 
 .tds-date-picker-calendar-body{
@@ -4130,28 +4159,16 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
   font-weight:var(--t-font-weight-semibold);
 }
 
-.tds-date-picker-calendar-title--visually-hidden{
-  position:absolute;
-  inline-size:1px;
-  block-size:1px;
-  padding:0;
-  margin:-1px;
-  overflow:hidden;
-  white-space:nowrap;
-  border:0;
-  clip-path:inset(50%);
-}
-
 .tds-date-picker-calendar-nav{
-  font-size:var(--tds-date-picker-popover-font-size);
   display:flex;
   align-items:center;
   justify-content:center;
   padding:var(--t-spacing-half);
+  font-size:.875em;
   color:var(--t-text-color);
-  cursor:default;
+  cursor:pointer;
   outline:0;
-  background:transparent;
+  background-color:transparent;
   border:0;
   border-radius:var(--t-border-radius-md);
   transition-timing-function:var(--tds-date-picker-popover-interactive-timing-function);
@@ -4160,11 +4177,11 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
 }
 
 .tds-date-picker-calendar-nav[data-hovered]{
-    background:var(--t-fill-color-button-neutral-outline-hover);
+    background-color:var(--t-fill-color-button-neutral-outline-hover);
   }
 
 .tds-date-picker-calendar-nav[data-pressed]{
-    background:var(--t-fill-color-button-neutral-outline-active);
+    background-color:var(--t-fill-color-button-neutral-outline-active);
   }
 
 .tds-date-picker-calendar-nav[data-focus-visible]{
@@ -4177,84 +4194,90 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
     cursor:not-allowed;
   }
 
-.tds-date-picker-calendar-nav svg{
-  transform:scale(0.875);
-}
-
-.tds-date-picker-calendar-nav--lg svg{
-  transform:scale(1);
-}
-
 .tds-date-picker-calendar-grid{
+  font-feature-settings:"ss01", "ss02";
   border-collapse:collapse;
 }
 
+.tds-date-picker-calendar-grid :where(thead,tbody,tr,td,th){
+    padding:0;
+    border:0;
+  }
+
 .tds-date-picker-calendar-header-cell{
-  padding-block:var(--t-spacing-half);
-  font-size:0.875em;
+  padding-block-end:var(--t-spacing-1);
+  font-size:.875em;
   font-weight:var(--t-font-weight-medium);
   color:var(--t-text-color-secondary);
   text-align:center;
+  -webkit-user-select:none;
+     -moz-user-select:none;
+          user-select:none;
 }
 
-.tds-date-picker-calendar-cell{
+.tds-date-picker-calendar-cell-button{
+  position:relative;
   display:flex;
   align-items:center;
   justify-content:center;
   inline-size:2.25em;
   block-size:2.25em;
   color:var(--t-text-color);
-  cursor:default;
+  cursor:pointer;
+  -webkit-user-select:none;
+     -moz-user-select:none;
+          user-select:none;
   outline:0;
-  border:2px solid transparent;
-  border-radius:var(--t-border-radius-md);
-  position:relative;
-  transition-timing-function:var(--tds-date-picker-popover-interactive-timing-function);
-  transition-duration:var(--tds-date-picker-popover-interactive-duration);
-  transition-property:var(--tds-date-picker-popover-interactive-property);
 }
 
-.tds-date-picker-calendar-cell[data-today]{
+.tds-date-picker-calendar-cell-button::before{
+    position:absolute;
+    inset:0;
+    z-index:-1;
+    content:"";
+    background-color:var(--_background-color);
     border-radius:50%;
-    border-color:var(--t-border-color);
   }
 
-.tds-date-picker-calendar-cell[data-outside-month]{
-    color:var(--t-text-color-secondary);
+.tds-date-picker-calendar-cell-button[data-today]::before{
+      box-shadow:inset 0 0 0 1.5px var(--t-border-color);
+    }
+
+.tds-date-picker-calendar-cell-button[data-outside-month]{
+    display:none;
   }
 
-.tds-date-picker-calendar-cell[data-hovered]{
-    background:var(--t-fill-color-button-neutral-outline-hover);
+.tds-date-picker-calendar-cell-button[data-hovered]{
+    --_background-color:var(--t-fill-color-button-neutral-outline-hover);
   }
 
-.tds-date-picker-calendar-cell[data-pressed]{
-    background:var(--t-fill-color-button-neutral-outline-active);
+.tds-date-picker-calendar-cell-button[data-pressed]{
+    --_background-color:var(--t-fill-color-button-neutral-outline-active);
   }
 
-.tds-date-picker-calendar-cell[data-selected]{
+.tds-date-picker-calendar-cell-button[data-selected]{
+    --_background-color:var(--t-fill-color-interaction);
     font-weight:var(--t-font-weight-semibold);
     color:var(--t-text-color-inverted);
-    background:var(--t-fill-color-interaction);
     border-color:transparent;
   }
 
-.tds-date-picker-calendar-cell[data-unavailable]{
+.tds-date-picker-calendar-cell-button[data-unavailable]{
     color:var(--t-text-color-disabled);
     text-decoration:line-through;
     cursor:not-allowed;
   }
 
-.tds-date-picker-calendar-cell[data-disabled]{
+.tds-date-picker-calendar-cell-button[data-disabled]{
     color:var(--t-text-color-disabled);
-    cursor:not-allowed;
   }
 
-.tds-date-picker-calendar-cell[data-focus-visible]{
+.tds-date-picker-calendar-cell-button[data-focus-visible]{
     outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
     outline-offset:-2px;
   }
 
-.tds-date-picker-calendar-cell[data-focus-visible][data-selected]{
+.tds-date-picker-calendar-cell-button[data-focus-visible][data-selected]{
     outline-offset:var(--t-focus-ring-offset);
   }