@planningcenter/tapestry 3.2.2 → 3.2.3-qa-839.0

package/dist/unstable.css

@@ -1830,8 +1830,7 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
   --tds-btn-loading-spinner-track-color:var(--t-fill-color-status-error-ghost);
 }
 
-.tds-btn--inline-text,
-a[class="tds-btn"]{
+.tds-btn--inline-text{
   --tds-btn-color:var(--t-text-color-interaction);
   --tds-btn-color-hover:var(--t-text-color-interaction-hover);
   --tds-btn-color-active:var(--t-text-color-interaction-active);
@@ -1850,9 +1849,10 @@ a[class="tds-btn"]{
   font-family:inherit;
   font-style:inherit;
   vertical-align:inherit;
+  text-align:inherit;
 }
 
-:is(.tds-btn--inline-text,a[class="tds-btn"]):hover,:is(.tds-btn--inline-text,a[class="tds-btn"]):focus-visible{
+.tds-btn--inline-text:hover,.tds-btn--inline-text:focus-visible{
     --tds-btn-text-decoration:none;
   }
 
@@ -2670,12 +2670,11 @@ a[class="tds-btn"]{
   --tds-select-dropdown-border-radius:var(--t-border-radius);
   --tds-select-dropdown-box-shadow:hsl(0, 0%, 0%, .05) 0 10px 15px -3px, hsl(0, 0%, 0%, .05) 0 4px 6px -4px;
   --tds-select-dropdown-scroll-behavior:smooth;
-  --tds-select-dropdown-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-select-dropdown-transition-exit:opacity var(--t-duration-200) var(--t-ease-in), transform var(--t-duration-200) var(--t-ease-in), display var(--t-duration-200) allow-discrete, overlay var(--t-duration-200) allow-discrete;
+  --tds-select-dropdown-transition:opacity var(--t-duration-300) var(--t-ease-out), translate var(--t-duration-300) var(--t-ease-out), display var(--t-duration-300) allow-discrete, overlay var(--t-duration-300) allow-discrete;
   --tds-select-dropdown-closed-opacity:0;
   --tds-select-dropdown-open-opacity:1;
-  --tds-select-dropdown-closed-transform:translateY(-8px);
-  --tds-select-dropdown-open-transform:translateY(0);
+  --tds-select-dropdown-closed-translate:0 -8px;
+  --tds-select-dropdown-open-translate:0 0;
 
   --tds-select-option-gap:var(--t-spacing-1);
   --tds-select-option-padding-block:var(--t-spacing-1);
@@ -2873,11 +2872,10 @@ a[class="tds-btn"]{
 
 .tds-select{
     --tds-select-transition-property:none;
-    --tds-select-dropdown-transition-enter:none;
-    --tds-select-dropdown-transition-exit:none;
+    --tds-select-dropdown-transition:none;
     --tds-select-dropdown-scroll-behavior:auto;
-    --tds-select-dropdown-closed-transform:none;
-    --tds-select-dropdown-open-transform:none;
+    --tds-select-dropdown-closed-translate:none;
+    --tds-select-dropdown-open-translate:none;
     --tds-select-caret-transition:none;
 }
   }
@@ -2918,6 +2916,7 @@ a[class="tds-btn"]{
     color:var(--tds-select-placeholder-color);
     white-space:nowrap;
     background-image:none;
+    anchor-name:--tds-select-anchor;
     transition:background-color var(--t-duration-300) var(--t-ease-in-out), border-color var(--t-duration-300) var(--t-ease-in-out), outline-color var(--t-duration-300) var(--t-ease-in-out), outline-offset var(--t-duration-300) var(--t-ease-in-out), transform var(--t-duration-100) var(--t-ease-in-out);
     -webkit-tap-highlight-color:transparent;
   }
@@ -2940,6 +2939,7 @@ a[class="tds-btn"]{
   }
 
 .tds-select:has( > button) [popover]{
+    position-anchor:--tds-select-anchor;
     inset:auto;
     inline-size:-moz-max-content;
     inline-size:max-content;
@@ -2965,14 +2965,13 @@ a[class="tds-btn"]{
     border-radius:var(--tds-select-dropdown-border-radius);
     box-shadow:var(--tds-select-dropdown-box-shadow);
     opacity:var(--tds-select-dropdown-open-opacity);
-    transform:var(--tds-select-dropdown-open-transform);
-    transition:var(--tds-select-dropdown-transition-enter);
+    translate:var(--tds-select-dropdown-open-translate);
+    transition:var(--tds-select-dropdown-transition);
   }
 
 :is(.tds-select:has( > button) [popover]):not(:popover-open){
       opacity:var(--tds-select-dropdown-closed-opacity);
-      transform:var(--tds-select-dropdown-closed-transform);
-      transition:var(--tds-select-dropdown-transition-exit);
+      translate:var(--tds-select-dropdown-closed-translate);
     }
 
 :is(.tds-select:has( > button) [popover]) ul{
@@ -2984,7 +2983,7 @@ a[class="tds-btn"]{
 @starting-style{
       :is(.tds-select:has( > button) [popover]):popover-open{
         opacity:var(--tds-select-dropdown-closed-opacity);
-        transform:var(--tds-select-dropdown-closed-transform);
+        translate:var(--tds-select-dropdown-closed-translate);
       }
     }
 
@@ -3012,8 +3011,7 @@ a[class="tds-btn"]{
 
     :is(.tds-select select:has( > button))::picker(select):not(:popover-open){
       opacity:var(--tds-select-dropdown-closed-opacity);
-      transform:var(--tds-select-dropdown-closed-transform);
-      transition:var(--tds-select-dropdown-transition-exit);
+      translate:var(--tds-select-dropdown-closed-translate);
     }
 
     :is(.tds-select select:has( > button)):open,:is(.tds-select select:has( > button)):focus-within{
@@ -3061,8 +3059,8 @@ a[class="tds-btn"]{
       border-radius:var(--tds-select-dropdown-border-radius);
       box-shadow:var(--tds-select-dropdown-box-shadow);
       opacity:var(--tds-select-dropdown-open-opacity);
-      transform:var(--tds-select-dropdown-open-transform);
-      transition:var(--tds-select-dropdown-transition-enter);
+      translate:var(--tds-select-dropdown-open-translate);
+      transition:var(--tds-select-dropdown-transition);
     }
 
     :is(.tds-select select:has( > button)) option::checkmark{
@@ -3072,7 +3070,7 @@ a[class="tds-btn"]{
     @starting-style{
       :is(.tds-select select:has( > button))::picker(select):popover-open{
         opacity:var(--tds-select-dropdown-closed-opacity);
-        transform:var(--tds-select-dropdown-closed-transform);
+        translate:var(--tds-select-dropdown-closed-translate);
       }
     }
 }
@@ -3729,6 +3727,13 @@ a[class="tds-btn"]{
       background:transparent;
     }
 
+.tds-combo-box-empty-state{
+  padding-block:var(--t-spacing-1);
+  padding-inline:var(--t-spacing-2);
+  font-size:var(--t-font-size-md);
+  color:var(--t-text-color-secondary);
+}
+
 .tds-combo-box-list-section:not(:first-child){
     margin-block-start:var(--t-spacing-half);
   }
@@ -3920,8 +3925,9 @@ a[class="tds-btn"]{
 }
 
 .tds-date-picker-popover{
+  --tds-date-picker-popover-padding:var(--t-spacing-1-half);
+
   position:relative;
-  padding:var(--t-spacing-2);
   overflow:hidden;
   background:var(--t-surface-color-card);
   border:1px solid var(--t-border-color);
@@ -3962,59 +3968,23 @@ a[class="tds-btn"]{
   inset:0;
   z-index:1;
   display:flex;
-  flex-direction:column;
-  row-gap:var(--t-spacing-1);
-  padding:var(--t-spacing-2);
   background:var(--t-surface-color-card);
 }
 
-.tds-date-picker-overlay-header{
-  display:flex;
-  align-items:center;
-  justify-content:center;
-  margin-block-end:var(--t-spacing-half);
-}
-
-.tds-date-picker-overlay-close{
-  position:absolute;
-  right:var(--t-spacing-2);
-  display:flex;
-  align-items:center;
-  justify-content:center;
-  inline-size:1.5rem;
-  block-size:1.5rem;
-  padding:0;
-  font-size:1.25rem;
-  line-height:1;
-  color:var(--t-text-color);
-  cursor:default;
-  outline:0;
-  background:transparent;
-  border:0;
-  border-radius:var(--t-border-radius-sm);
-}
-
-.tds-date-picker-overlay-close[data-hovered]{
-    background:var(--t-fill-color-neutral-070);
-  }
-
-.tds-date-picker-overlay-close[data-focus-visible]{
-    outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
-    outline-offset:var(--t-focus-ring-offset);
-  }
-
-.tds-date-picker-overlay-grid{
+.tds-date-picker-overlay-list{
   display:grid;
   gap:var(--t-spacing-half);
+  padding-inline:var(--tds-date-picker-popover-padding);
+  outline:0;
 }
 
-.tds-date-picker-overlay--month .tds-date-picker-overlay-grid{
+.tds-date-picker-overlay--month .tds-date-picker-overlay-list{
   flex:1;
   grid-template-rows:repeat(4, 1fr);
   grid-template-columns:repeat(3, 1fr);
 }
 
-.tds-date-picker-overlay--year .tds-date-picker-overlay-grid{
+.tds-date-picker-overlay--year .tds-date-picker-overlay-list{
   flex:1;
   grid-template-columns:repeat(4, 1fr);
   grid-auto-rows:3rem;
@@ -4035,16 +4005,16 @@ a[class="tds-btn"]{
   border-radius:var(--t-border-radius-sm);
 }
 
-.tds-date-picker-overlay-cell:hover{
+.tds-date-picker-overlay-cell[data-hovered]{
     background:var(--t-fill-color-neutral-070);
   }
 
-.tds-date-picker-overlay-cell[aria-selected="true"]{
+.tds-date-picker-overlay-cell[data-selected]{
     color:var(--t-text-color-inverted);
     background:var(--t-fill-color-interaction);
   }
 
-.tds-date-picker-overlay-cell:focus-visible{
+.tds-date-picker-overlay-cell[data-focus-visible]{
     outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
     outline-offset:var(--t-focus-ring-offset);
   }
@@ -4054,7 +4024,7 @@ a[class="tds-btn"]{
   flex:1;
   gap:var(--t-spacing-half);
   align-items:center;
-  justify-content:center;
+  justify-content:flex-start;
 }
 
 .tds-date-picker-calendar-overlay-trigger{
@@ -4084,11 +4054,17 @@ a[class="tds-btn"]{
   inline-size:fit-content;
 }
 
+.tds-date-picker-calendar-body{
+  position:relative;
+  padding:var(--tds-date-picker-popover-padding);
+  padding-block-start:0;
+}
+
 .tds-date-picker-calendar-header{
   display:flex;
   align-items:center;
   justify-content:space-between;
-  padding-block-end:var(--t-spacing-1);
+  padding:var(--tds-date-picker-popover-padding);
 }
 
 .tds-date-picker-calendar-title{
@@ -4239,10 +4215,6 @@ a[class="tds-btn"]{
     --tds-number-stepper-color:var(--t-form-color-disabled);
   }
 
-.tds-number-stepper[data-disabled] .tds-number-stepper-label{
-      color:var(--t-form-color-disabled);
-    }
-
 .tds-number-stepper[data-disabled] .tds-number-stepper-field{
       cursor:not-allowed;
     }
@@ -4293,6 +4265,8 @@ a[class="tds-btn"]{
   }
 
 .tds-number-stepper-field:has([readonly]){
+    --tds-number-stepper-border-color:var(--t-form-border-color-readonly);
+    --tds-number-stepper-border-color-hover:var(--t-form-border-color-readonly);
     --tds-number-stepper-background-color:var(--t-form-background-color-readonly);
   }
 
@@ -4300,6 +4274,10 @@ a[class="tds-btn"]{
       border-color:var(--t-form-border-color-hover);
     }
 
+.tds-number-stepper-field:has([readonly]) .tds-number-stepper-button{
+      display:none;
+    }
+
 .tds-number-stepper-input{
   display:flex;
   flex:1;