@planningcenter/tapestry 3.3.1 → 3.3.2-qa-891.0

package/dist/unstable.css

@@ -74,6 +74,131 @@
   --t-banner-spacing:calc(var(--t-spacing-half) + var(--t-spacing-1));
 }
 
+.tds-dropdown-popover{
+  min-inline-size:10rem;
+  max-inline-size:24rem;
+  padding:var(--t-spacing-1);
+  overflow:auto;
+  overscroll-behavior:none;
+  -webkit-user-select:none;
+     -moz-user-select:none;
+          user-select:none;
+  outline:0;
+  scrollbar-color:#0004 var(--t-surface-color-card);
+  scrollbar-width:thin;
+  background:var(--t-surface-color-card);
+  background-clip:padding-box;
+  border:1px 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);
+}
+.tds-dropdown-popover[data-entering]{
+    animation:tds-dropdown-popover var(--t-duration-300) var(--t-ease-out);
+  }
+.tds-dropdown-popover[data-exiting]{
+    animation:tds-dropdown-popover var(--t-duration-200) var(--t-ease-in) reverse;
+  }
+.tds-dropdown-popover[data-entering],.tds-dropdown-popover[data-exiting]{
+    will-change:opacity, transform;
+  }
+@keyframes tds-dropdown-popover{
+  from{
+    opacity:0;
+    transform:translateY(-8px);
+  }
+}
+@media (prefers-reduced-motion: reduce){
+    .tds-dropdown-popover[data-entering],.tds-dropdown-popover[data-exiting]{
+      animation:none;
+    }
+}
+.tds-dropdown-popover [role="menu"]{
+  outline:0;
+}
+.tds-dropdown-item{
+  --tds-dropdown-item-color:var(--t-text-color);
+
+  display:flex;
+  gap:var(--t-spacing-1);
+  align-items:center;
+  padding-block:var(--t-spacing-1);
+  padding-inline:var(--t-spacing-2);
+  font-size:1rem;
+  color:var(--tds-dropdown-item-color);
+  text-decoration:none;
+  cursor:default;
+  outline:0;
+  border-radius:var(--t-border-radius);
+}
+.tds-dropdown-item[data-hovered]:not([data-disabled]),.tds-dropdown-item[data-focus-visible]{
+    background:var(--t-fill-color-neutral-070);
+  }
+.tds-dropdown-item[data-pressed]:not([data-disabled]){
+    background:var(--t-fill-color-neutral-060);
+  }
+.tds-dropdown-item[data-disabled]{
+    --tds-dropdown-item-color:var(--t-form-color-disabled);
+
+    cursor:not-allowed;
+  }
+.tds-dropdown-item--destructive{
+  --tds-dropdown-item-color:var(--t-text-color-status-error);
+}
+.tds-dropdown-item--staff-only{
+  --tds-dropdown-item-color:var(--t-fill-color-product-staff);
+}
+a.tds-dropdown-item:is(:hover, :active){
+  color:var(--tds-dropdown-item-color);
+}
+.tds-dropdown-item [slot="prefix"],
+.tds-dropdown-item [slot="suffix"]{
+  flex-shrink:0;
+}
+.tds-dropdown-item [slot="label"]{
+  flex:1;
+  min-width:0;
+  overflow:hidden;
+  text-overflow:ellipsis;
+  white-space:nowrap;
+}
+.tds-dropdown-item [slot="description"]{
+  font-size:var(--t-font-size-sm);
+  color:var(--t-text-color-secondary);
+}
+.tds-dropdown-item:has([slot="description"]){
+  display:grid;
+  grid-template-areas:"prefix label suffix" "prefix description suffix";
+  grid-template-columns:auto 1fr auto;
+}
+.tds-dropdown-item:has([slot="description"]) [slot="prefix"]{
+  grid-area:prefix;
+}
+.tds-dropdown-item:has([slot="description"]) [slot="label"]{
+  grid-area:label;
+}
+.tds-dropdown-item:has([slot="description"]) [slot="description"]{
+  grid-area:description;
+}
+.tds-dropdown-item:has([slot="description"]) [slot="suffix"]{
+  grid-area:suffix;
+}
+.tds-dropdown-section:not(:first-child){
+  margin-block-start:var(--t-spacing-half);
+}
+.tds-dropdown-section-label{
+  padding-block:var(--t-spacing-1);
+  padding-inline:var(--t-spacing-1);
+  font-size:var(--t-font-size-sm);
+  font-weight:var(--t-font-weight-semibold);
+  color:var(--t-text-color-secondary);
+}
+.tds-dropdown-separator{
+  margin-block:var(--t-spacing-half);
+  margin-inline:0;
+  border:0;
+  border-top:1px solid var(--t-border-color);
+}
+
 @layer t-critical, t-component;
 
 :root{
@@ -2130,7 +2255,8 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
 
 .tds-btn--infield[data-disabled]{
     color:var(--tds-btn-color-disabled);
-    pointer-events:none;
+    pointer-events:auto;
+    cursor:default;
     background-color:var(--tds-btn-bg-disabled);
     border-color:var(--tds-btn-border-color-disabled);
   }
@@ -2173,7 +2299,7 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
   --tds-checkbox-input-size:var(--t-element-size-md);
   --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
   --tds-checkbox-input-border-color:var(--t-form-border-color);
-  --tds-checkbox-input-background-color:transparent;
+  --tds-checkbox-input-background-color:var(--t-form-background-color);
 
   --tds-checkbox-input-icon:none;
   --tds-checkbox-input-icon-visibility:hidden;
@@ -2509,7 +2635,7 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
      -moz-user-select:none;
           user-select:none;
   outline:0;
-  scrollbar-color:#0004 #0000;
+  scrollbar-color:#0004 var(--t-surface-color-card);
   scrollbar-width:thin;
   background:var(--t-surface-color-card);
   background-clip:padding-box;
@@ -3342,7 +3468,7 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
   --tds-radio-input-border-radius:var(--t-border-radius-round);
   --tds-radio-input-border-color:var(--t-form-border-color);
   --tds-radio-input-border-width:var(--t-form-border-width);
-  --tds-radio-input-background-color:transparent;
+  --tds-radio-input-background-color:var(--t-form-background-color);
 
   --tds-radio-label-color:var(--t-form-color);
 
@@ -3816,15 +3942,19 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
   opacity:0;
 }
 
+.tds-select:has(> button){
+  anchor-scope:--tds-select-anchor;
+}
+
 .tds-select:has( > button)  > button{
     display:block;
     padding-inline-end:calc(var(--tds-select-caret-size) + var(--tds-select-caret-inline-offset) + .75ch);
+    anchor-name:--tds-select-anchor;
     overflow:hidden;
     text-overflow:ellipsis;
     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;
   }
@@ -3847,7 +3977,6 @@ 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;
@@ -3857,6 +3986,7 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
     padding:var(--tds-select-dropdown-padding);
     margin-block:var(--tds-select-dropdown-margin-block);
     position-area:block-end span-inline-start;
+    position-anchor:--tds-select-anchor;
     position-try-fallbacks:flip-block, flip-inline;
     overflow:auto;
     overflow-x:hidden;