@planningcenter/tapestry 3.2.3-rc.2 → 3.2.3-rc.20

package/dist/unstable.css

@@ -912,7 +912,7 @@
     --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
     --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
     --tds-page-header-color:var(--t-text-color);
-    --tds-page-header-bottom-border-color:var(--t-surface-color-canvas);
+    --tds-page-header-bottom-border-color:transparent;
     --tds-page-header-headline-color:var(--t-text-color-headline);
     --tds-page-header-headline-font-size:var(--t-font-size-2xl);
     --tds-page-header-padding-x:var(--t-spacing-2);
@@ -927,7 +927,7 @@
     --tds-page-header-nav-item-border-width:1px;
 
     --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
-    --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
+    --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
 
     --tds-page-header-nav-item-color-hover:var(--t-text-color);
     --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
@@ -971,6 +971,7 @@
       --tds-page-header-nav-item-border-width:1px;
       --tds-page-header-nav-item-color:var(--t-text-color);
       --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
+      --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
       --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
       --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
       --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
@@ -1051,20 +1052,34 @@
           --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
           --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
           --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
+          --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
         }
 
 :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
           background-color:var(--tds-page-header-nav-item-background-color-active);
           border-color:var(--tds-page-header-nav-item-border-color-active);
+          border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
         }
 
 :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
+          --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
           color:var(--tds-page-header-nav-item-color-disabled);
           cursor:not-allowed;
           background-color:var(--tds-page-header-nav-item-background-color-disabled);
           opacity:1;
         }
 
+@media (min-width: 600px){
+          :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
+            position:absolute;
+            inset:auto -1px -1px;
+            height:1px;
+            pointer-events:none;
+            content:"";
+            background-color:var(--tds-page-header-bottom-border-color);
+          }
+        }
+
 :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
       position:relative;
     }
@@ -1849,6 +1864,7 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
   font-family:inherit;
   font-style:inherit;
   vertical-align:inherit;
+  text-align:inherit;
 }
 
 .tds-btn--inline-text:hover,.tds-btn--inline-text:focus-visible{
@@ -2669,12 +2685,11 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
   --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);
@@ -2872,11 +2887,10 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
 
 .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;
 }
   }
@@ -2917,6 +2931,7 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
     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;
   }
@@ -2939,6 +2954,7 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
   }
 
 .tds-select:has( > button) [popover]{
+    position-anchor:--tds-select-anchor;
     inset:auto;
     inline-size:-moz-max-content;
     inline-size:max-content;
@@ -2964,14 +2980,13 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
     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{
@@ -2983,7 +2998,7 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
 @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);
       }
     }
 
@@ -3011,8 +3026,7 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
 
     :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{
@@ -3060,8 +3074,8 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
       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{
@@ -3071,7 +3085,7 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
     @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);
       }
     }
 }
@@ -3573,7 +3587,8 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
   }
 
 .tds-combo-box-field:has([readonly]){
-    --tds-input-border-color:var(--t-form-border-color-readonly);
+    --tds-combo-box-border-color:var(--t-form-border-color-readonly);
+    --tds-combo-box-border-color-hover:var(--t-form-border-color-readonly);
     --tds-combo-box-background-color:var(--t-form-background-color-readonly);
   }
 
@@ -3581,6 +3596,10 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
       border-color:var(--t-form-border-color-hover);
     }
 
+.tds-combo-box-field:has([readonly]) .tds-combo-box-button{
+      display:none;
+    }
+
 .tds-combo-box-input{
   display:flex;
   flex:1;
@@ -3702,11 +3721,10 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
   color:var(--t-text-color);
   white-space:nowrap;
   cursor:default;
-  outline-offset:-1px;
   border-radius:var(--t-border-radius);
 }
 
-.tds-combo-box-list-item[data-hovered]:not([data-disabled]){
+.tds-combo-box-list-item[data-hovered]:not([data-disabled]),.tds-combo-box-list-item[data-focus-visible]{
     background:var(--t-fill-color-neutral-070);
   }
 
@@ -3714,11 +3732,6 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
     background:var(--t-fill-color-button-interaction-ghost-active);
   }
 
-.tds-combo-box-list-item[data-focus-visible]{
-    outline:var(--t-focus-ring-outline);
-    outline-offset:-1px;
-  }
-
 .tds-combo-box-list-item[data-disabled]{
     color:var(--t-form-color-disabled);
     cursor:not-allowed;
@@ -3728,6 +3741,26 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
       background:transparent;
     }
 
+.tds-combo-box-empty-state{
+  position:relative;
+  min-block-size:var(--t-spacing-3);
+  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-load-more{
+  position:relative;
+  min-block-size:calc(var(--t-spacing-3) + var(--t-spacing-1));
+}
+
+.tds-combo-box-empty-state,
+.tds-combo-box-load-more{
+  --tds-loading-spinner-visibility:visible;
+  --tds-loading-spinner-animation-play-state:running;
+}
+
 .tds-combo-box-list-section:not(:first-child){
     margin-block-start:var(--t-spacing-half);
   }
@@ -3751,12 +3784,13 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
   cursor:text;
 }
 
-.tds-combo-box-description-invalid-icon{
-  display:var(--tds-combo-box-description-invalid-icon-display, none);
-  flex-shrink:0;
-  margin-block-start:calc(.5lh - .5em);
-  line-height:1.35;
-}
+.tds-combo-box-description .tds-combo-box-description-invalid-icon{
+    display:var(--tds-combo-box-description-invalid-icon-display, none);
+    flex-shrink:0;
+    margin-block-start:calc(.5lh - .5em);
+    line-height:1.35;
+  }
+
 
 .tds-date-picker{
   --tds-date-picker-border-color:var(--t-form-border-color);
@@ -3841,28 +3875,27 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
     border-color:var(--tds-date-picker-border-color-hover);
   }
 
-.tds-date-picker-field[data-focus-within]{
+.tds-date-picker-field[data-focus-within]:not(:has(.tds-date-picker-button[data-focused])){
     outline-color:var(--t-focus-ring-color);
     outline-offset:var(--t-focus-ring-offset);
     border-color:var(--tds-date-picker-border-color-active);
   }
 
 .tds-date-picker-field:has(.tds-date-picker-input[data-readonly]){
+    --tds-date-picker-border-color:var(--t-form-border-color-readonly);
+    --tds-date-picker-border-color-hover:var(--t-form-border-color-readonly);
+    --tds-date-picker-background-color:var(--t-form-background-color-readonly);
     color:var(--t-form-color-readonly);
-    background-color:var(--t-form-background-color-readonly);
-    border-color:var(--t-form-border-color-readonly);
   }
 
-.tds-date-picker-field[data-hovered]:has(.tds-date-picker-input[data-readonly]){
-      border-color:var(--t-form-border-color-readonly);
-    }
-
 .tds-date-picker-field[data-focus-within]:has(.tds-date-picker-input[data-readonly]){
-      outline-color:var(--t-focus-ring-color);
-      outline-offset:var(--t-focus-ring-offset);
       border-color:var(--t-form-border-color-hover);
     }
 
+.tds-date-picker-field:has(.tds-date-picker-input[data-readonly]) .tds-date-picker-button{
+      display:none;
+    }
+
 .tds-date-picker-input{
   flex:1;
   padding-block:var(--tds-date-picker-padding-block);
@@ -3919,70 +3952,78 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
 }
 
 .tds-date-picker-popover{
+  --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-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;
+  --tds-date-picker-popover-closed-transform:translateY(-8px);
+  --tds-date-picker-popover-interactive-timing-function:var(--t-ease-in-out);
+  --tds-date-picker-popover-interactive-duration:var(--t-duration-200);
+  --tds-date-picker-popover-interactive-property:color, background-color, border-color;
 
   position:relative;
   overflow:hidden;
-  background:var(--t-surface-color-card);
-  border:1px solid var(--t-border-color);
+  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:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
+  box-shadow:hsl(0, 0%, 0%, .05) 0 10px 15px -3px, hsl(0, 0%, 0%, .05) 0 4px 6px -4px;
+  opacity:1;
+  transform:translateY(0);
+  transition:var(--tds-date-picker-popover-transition-enter);
 }
 
 .tds-date-picker-popover[data-entering]{
-    animation:tds-date-picker-popover-enter 160ms ease;
+    opacity:var(--tds-date-picker-popover-closed-opacity);
+    transform:var(--tds-date-picker-popover-closed-transform);
   }
 
 .tds-date-picker-popover[data-exiting]{
-    animation:tds-date-picker-popover-exit 130ms ease;
+    opacity:var(--tds-date-picker-popover-closed-opacity);
+    transform:var(--tds-date-picker-popover-closed-transform);
+    transition:var(--tds-date-picker-popover-transition-exit);
   }
 
-@keyframes tds-date-picker-popover-enter{
-  from{
-    opacity:0;
-    transform:translateY(-8px);
-  }
-}
-
-@keyframes tds-date-picker-popover-exit{
-  to{
-    opacity:0;
-    transform:translateY(-8px);
-  }
-}
-
 @media (prefers-reduced-motion: reduce){
-    .tds-date-picker-popover[data-entering],.tds-date-picker-popover[data-exiting]{
-      animation:none;
-    }
+
+.tds-date-picker-popover{
+    --tds-date-picker-popover-transition-enter:none;
+    --tds-date-picker-popover-transition-exit:none;
+    --tds-date-picker-popover-closed-opacity:1;
+    --tds-date-picker-popover-closed-transform:none;
 }
+  }
 
 .tds-date-picker-overlay{
   position:absolute;
   inset:0;
   z-index:1;
   display:flex;
-  background:var(--t-surface-color-card);
+  background-color:var(--tds-date-picker-popover-background-color);
 }
 
 .tds-date-picker-overlay-list{
   display:grid;
+  flex:1;
   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;
 }
 
 .tds-date-picker-overlay--month .tds-date-picker-overlay-list{
-  flex:1;
+  padding-bottom:var(--tds-date-picker-popover-padding);
   grid-template-rows:repeat(4, 1fr);
-  grid-template-columns:repeat(3, 1fr);
 }
 
 .tds-date-picker-overlay--year .tds-date-picker-overlay-list{
-  flex:1;
-  grid-template-columns:repeat(4, 1fr);
-  grid-auto-rows:3rem;
+  padding-right:var(--t-spacing-1);
+  grid-auto-rows:var(--t-container-size-xl);
   overflow-y:auto;
+  scroll-padding-block:calc(var(--t-focus-ring-width) + var(--t-focus-ring-offset));
 }
 
 .tds-date-picker-overlay-cell{
@@ -3990,26 +4031,37 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
   align-items:center;
   justify-content:center;
   font-family:inherit;
-  font-size:var(--t-font-size-md);
+  font-size:var(--tds-date-picker-popover-font-size);
   color:var(--t-text-color);
   cursor:default;
   outline:0;
   background:transparent;
   border:0;
-  border-radius:var(--t-border-radius-sm);
+  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-property:var(--tds-date-picker-popover-interactive-property);
 }
 
 .tds-date-picker-overlay-cell[data-hovered]{
-    background:var(--t-fill-color-neutral-070);
+    background:var(--t-fill-color-button-neutral-outline-hover);
+  }
+
+.tds-date-picker-overlay-cell[data-pressed]{
+    background: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);
   }
 
 .tds-date-picker-overlay-cell[data-focus-visible]{
     outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
+  }
+
+.tds-date-picker-overlay-cell[data-selected][data-focus-visible]{
     outline-offset:var(--t-focus-ring-offset);
   }
 
@@ -4022,20 +4074,27 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
 }
 
 .tds-date-picker-calendar-overlay-trigger{
-  padding:4px 8px;
+  padding:var(--t-spacing-half) var(--t-spacing-1);
   font-family:inherit;
-  font-size:var(--t-font-size-md);
+  font-size:var(--tds-date-picker-popover-font-size);
   font-weight:var(--t-font-weight-semibold);
   color:var(--t-text-color);
   cursor:default;
   outline:0;
   background:transparent;
   border:0;
-  border-radius:var(--t-border-radius-sm);
+  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-property:var(--tds-date-picker-popover-interactive-property);
 }
 
 .tds-date-picker-calendar-overlay-trigger[data-hovered]{
-    background:var(--t-fill-color-neutral-070);
+    background: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);
   }
 
 .tds-date-picker-calendar-overlay-trigger[data-focus-visible]{
@@ -4044,6 +4103,7 @@ 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;
 }
@@ -4062,8 +4122,8 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
 }
 
 .tds-date-picker-calendar-title{
-  padding:4px 8px;
-  font-size:var(--t-font-size-md);
+  padding:var(--t-spacing-half) var(--t-spacing-1);
+  font-size:var(--tds-date-picker-popover-font-size);
   font-weight:var(--t-font-weight-semibold);
 }
 
@@ -4080,6 +4140,7 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
 }
 
 .tds-date-picker-calendar-nav{
+  font-size:var(--tds-date-picker-popover-font-size);
   display:flex;
   align-items:center;
   justify-content:center;
@@ -4089,15 +4150,18 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
   outline:0;
   background:transparent;
   border:0;
-  border-radius:var(--t-border-radius-sm);
+  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-property:var(--tds-date-picker-popover-interactive-property);
 }
 
 .tds-date-picker-calendar-nav[data-hovered]{
-    background:var(--t-fill-color-neutral-070);
+    background:var(--t-fill-color-button-neutral-outline-hover);
   }
 
 .tds-date-picker-calendar-nav[data-pressed]{
-    background:var(--t-fill-color-button-interaction-ghost-active);
+    background:var(--t-fill-color-button-neutral-outline-active);
   }
 
 .tds-date-picker-calendar-nav[data-focus-visible]{
@@ -4106,18 +4170,26 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
   }
 
 .tds-date-picker-calendar-nav[data-disabled]{
-    color:var(--t-form-color-disabled);
+    color:var(--t-text-color-disabled);
     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{
   border-collapse:collapse;
 }
 
 .tds-date-picker-calendar-header-cell{
   padding-block:var(--t-spacing-half);
-  font-size:var(--t-font-size-sm);
-  font-weight:var(--t-font-weight-normal);
+  font-size:0.875em;
+  font-weight:var(--t-font-weight-medium);
   color:var(--t-text-color-secondary);
   text-align:center;
 }
@@ -4126,48 +4198,67 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
   display:flex;
   align-items:center;
   justify-content:center;
-  inline-size:2.25rem;
-  block-size:2.25rem;
-  font-size:var(--t-font-size-md);
+  inline-size:2.25em;
+  block-size:2.25em;
   color:var(--t-text-color);
   cursor:default;
   outline:0;
-  border-radius:var(--t-border-radius-sm);
+  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]{
+    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[data-hovered]{
-    background:var(--t-fill-color-neutral-070);
+    background:var(--t-fill-color-button-neutral-outline-hover);
   }
 
 .tds-date-picker-calendar-cell[data-pressed]{
-    background:var(--t-fill-color-button-interaction-ghost-active);
+    background:var(--t-fill-color-button-neutral-outline-active);
   }
 
 .tds-date-picker-calendar-cell[data-selected]{
+    font-weight:var(--t-font-weight-semibold);
     color:var(--t-text-color-inverted);
     background:var(--t-fill-color-interaction);
-  }
-
-.tds-date-picker-calendar-cell[data-focus-visible]{
-    outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
-    outline-offset:var(--t-focus-ring-offset);
+    border-color:transparent;
   }
 
 .tds-date-picker-calendar-cell[data-unavailable]{
-    color:var(--t-text-color-secondary);
+    color:var(--t-text-color-disabled);
     text-decoration:line-through;
     cursor:not-allowed;
   }
 
 .tds-date-picker-calendar-cell[data-disabled]{
-    color:var(--t-form-color-disabled);
+    color:var(--t-text-color-disabled);
     cursor:not-allowed;
   }
 
-.tds-date-picker-calendar-cell[data-outside-month]{
-    color:var(--t-text-color-secondary);
+.tds-date-picker-calendar-cell[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]{
+    outline-offset:var(--t-focus-ring-offset);
   }
 
+.tds-date-picker-popover--lg{
+  --tds-date-picker-popover-font-size:var(--t-font-size-lg);
+}
+
 .tds-number-stepper{
   --tds-number-stepper-border-color:var(--t-form-border-color);
   --tds-number-stepper-border-color-hover:var(--t-form-border-color-hover);
@@ -4209,10 +4300,6 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
     --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;
     }
@@ -4263,6 +4350,8 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
   }
 
 .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);
   }
 
@@ -4270,6 +4359,10 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
       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;
@@ -4314,12 +4407,13 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
   cursor:text;
 }
 
-.tds-number-stepper-description-invalid-icon{
-  display:var(--tds-number-stepper-description-invalid-icon-display, none);
-  flex-shrink:0;
-  margin-block-start:calc(.5lh - .5em);
-  line-height:1.35;
-}
+.tds-number-stepper-description .tds-number-stepper-description-invalid-icon{
+    display:var(--tds-number-stepper-description-invalid-icon-display, none);
+    flex-shrink:0;
+    margin-block-start:calc(.5lh - .5em);
+    line-height:1.35;
+  }
+
 
 .tds-time-field{
   --tds-time-field-border-color:var(--t-form-border-color);