@planningcenter/tapestry 3.2.2-rc.8 → 3.2.2

package/dist/unstable.css

@@ -3920,7 +3920,9 @@ a[class="tds-btn"]{
 }
 
 .tds-date-picker-popover{
+  position:relative;
   padding:var(--t-spacing-2);
+  overflow:hidden;
   background:var(--t-surface-color-card);
   border:1px solid var(--t-border-color);
   border-radius:var(--t-border-radius);
@@ -3955,6 +3957,128 @@ a[class="tds-btn"]{
     }
 }
 
+.tds-date-picker-overlay{
+  position:absolute;
+  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{
+  display:grid;
+  gap:var(--t-spacing-half);
+}
+
+.tds-date-picker-overlay--month .tds-date-picker-overlay-grid{
+  flex:1;
+  grid-template-rows:repeat(4, 1fr);
+  grid-template-columns:repeat(3, 1fr);
+}
+
+.tds-date-picker-overlay--year .tds-date-picker-overlay-grid{
+  flex:1;
+  grid-template-columns:repeat(4, 1fr);
+  grid-auto-rows:3rem;
+  overflow-y:auto;
+}
+
+.tds-date-picker-overlay-cell{
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  font-family:inherit;
+  font-size:var(--t-font-size-md);
+  color:var(--t-text-color);
+  cursor:default;
+  outline:0;
+  background:transparent;
+  border:0;
+  border-radius:var(--t-border-radius-sm);
+}
+
+.tds-date-picker-overlay-cell:hover{
+    background:var(--t-fill-color-neutral-070);
+  }
+
+.tds-date-picker-overlay-cell[aria-selected="true"]{
+    color:var(--t-text-color-inverted);
+    background:var(--t-fill-color-interaction);
+  }
+
+.tds-date-picker-overlay-cell:focus-visible{
+    outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
+    outline-offset:var(--t-focus-ring-offset);
+  }
+
+.tds-date-picker-calendar-heading{
+  display:flex;
+  flex:1;
+  gap:var(--t-spacing-half);
+  align-items:center;
+  justify-content:center;
+}
+
+.tds-date-picker-calendar-overlay-trigger{
+  padding:4px 8px;
+  font-family:inherit;
+  font-size:var(--t-font-size-md);
+  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);
+}
+
+.tds-date-picker-calendar-overlay-trigger[data-hovered]{
+    background:var(--t-fill-color-neutral-070);
+  }
+
+.tds-date-picker-calendar-overlay-trigger[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-calendar{
   inline-size:-moz-fit-content;
   inline-size:fit-content;
@@ -3968,11 +4092,21 @@ a[class="tds-btn"]{
 }
 
 .tds-date-picker-calendar-title{
-  flex:1;
-  margin:0;
+  padding:4px 8px;
   font-size:var(--t-font-size-md);
   font-weight:var(--t-font-weight-semibold);
-  text-align:center;
+}
+
+.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{