@planningcenter/tapestry 3.1.0-rc.21 → 3.1.0-rc.23

package/dist/unstable.css

@@ -2672,6 +2672,7 @@ a[class="tds-btn"]{
 .tds-input :is(input,textarea){
     inline-size:100%;
     min-block-size:var(--tds-input-min-height);
+    block-size:auto;
     padding-block:var(--tds-input-padding-block);
     padding-inline:var(--tds-input-padding-inline);
     font-family:inherit;
@@ -2796,6 +2797,7 @@ a[class="tds-btn"]{
   --tds-select-background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMzQzYTQwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgZD0ibTIgNSA2IDYgNi02Ii8+PC9zdmc+");
   --tds-select-caret-size:.75em;
   --tds-select-caret-inline-offset:.75em;
+  --tds-select-caret-transition:transform 180ms ease-in-out;
 
   --tds-select-dropdown-background-color:var(--t-surface-color-card);
   --tds-select-dropdown-border:1px solid var(--t-border-color);
@@ -2891,13 +2893,6 @@ a[class="tds-btn"]{
       color:var(--tds-select-placeholder-color);
     }
 
-@media (prefers-reduced-motion: reduce){
-
-.tds-select :is(select,button){
-      --tds-select-transition-property:none;
-  }
-    }
-
 .tds-select:has(select:user-invalid,[aria-invalid="true"]),.tds-select.tds-select--invalid{
     --tds-select-border-color:var(--t-form-border-color-error);
     --tds-select-border-color-hover:var(--t-form-border-color-error-hover);
@@ -2935,6 +2930,80 @@ a[class="tds-btn"]{
     border-top:1px solid;
   }
 
+.tds-select :is(li[role="option"],option:not([hidden])){
+    display:block;
+    padding-block:var(--tds-select-option-padding-block);
+    padding-inline:var(--tds-select-option-padding-inline);
+    overflow:hidden;
+    text-overflow:ellipsis;
+    font-size:var(--tds-select-option-font-size);
+    color:var(--tds-select-option-color);
+    white-space:nowrap;
+    cursor:default;
+    outline-offset:var(--tds-select-option-outline-offset);
+    border-radius:var(--tds-select-option-border-radius);
+  }
+
+:is(.tds-select :is(li[role="option"],option:not([hidden]))):focus-visible{
+      outline:var(--t-focus-ring-outline);
+      outline-offset:var(--tds-select-option-outline-offset);
+    }
+
+:is(.tds-select :is(li[role="option"],option:not([hidden]))):is(:focus,:hover,.tds-select-option--active):not([disabled],[aria-disabled="true"]){
+      background:var(--tds-select-option-background-hover);
+    }
+
+:is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-selected="true"],:checked){
+      background:var(--tds-select-option-background-active);
+    }
+
+:is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-disabled="true"],:disabled){
+      color:var(--t-form-color-disabled);
+      cursor:not-allowed;
+    }
+
+:is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-disabled="true"],:disabled):is(:focus,:hover){
+        background:transparent;
+      }
+
+.tds-select :is(li[role="presentation"],legend){
+    position:sticky;
+    inset-block-start:calc(var(--tds-select-dropdown-padding) * -1);
+    z-index:1;
+    float:inline-start;
+    inline-size:100%;
+    padding-block:var(--tds-select-group-label-padding-block);
+    padding-inline:var(--tds-select-group-label-padding-inline);
+    container-type:scroll-state;
+    font-size:var(--tds-select-group-label-font-size);
+    font-weight:var(--tds-select-group-label-font-weight);
+    letter-spacing:var(--tds-select-group-label-letter-spacing);
+    background:var(--tds-select-group-label-background);
+    text-box:trim-both cap alphabetic;
+  }
+
+:is(.tds-select :is(li[role="presentation"],legend)) span{
+      display:inline-flex;
+      gap:var(--t-spacing-half);
+      align-items:center;
+      color:var(--tds-select-group-label-color);
+      transition:var(--tds-select-group-label-transition);
+    }
+
+@container scroll-state(stuck){
+
+:is(.tds-select :is(li[role="presentation"],legend)) span{
+        color:var(--tds-select-group-label-color-stuck);
+    }
+
+        @media (forced-colors: active){
+
+:is(.tds-select :is(li[role="presentation"],legend)) span{
+          color:var(--tds-select-group-label-color-stuck);
+    }
+        }
+      }
+
 .tds-select.tds-select--lg{
     --tds-select-min-height:var(--t-container-size-lg);
     --tds-select-font-size:var(--t-font-size-lg);
@@ -2943,8 +3012,12 @@ a[class="tds-btn"]{
 @media (prefers-reduced-motion: reduce){
 
 .tds-select{
+    --tds-select-transition-property: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-caret-transition:none;
 }
   }
 
@@ -2996,7 +3069,7 @@ a[class="tds-btn"]{
       pointer-events:none;
       content:var(--tds-select-background-image);
       transform:translateY(-50%) rotate(0);
-      transition:transform 180ms ease-in-out;
+      transition:var(--tds-select-caret-transition);
     }
 
 .tds-select:has( > button):has([role="option"][aria-selected="true"]) > button{
@@ -3021,13 +3094,14 @@ a[class="tds-btn"]{
        -moz-user-select:none;
             user-select:none;
     scroll-padding-top:calc(var(--tds-select-group-label-padding-block-start) + var(--tds-select-group-label-font-size) + var(--t-spacing-2));
-
     scrollbar-color:var(--tds-select-dropdown-scrollbar-color);
     scrollbar-width:var(--tds-select-dropdown-scrollbar-width);
     background:var(--tds-select-dropdown-background-color);
     border:var(--tds-select-dropdown-border);
     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);
   }
 
@@ -3036,98 +3110,12 @@ a[class="tds-btn"]{
       transform:var(--tds-select-dropdown-closed-transform);
     }
 
-:is(.tds-select:has( > button) [popover]):popover-open{
-      opacity:var(--tds-select-dropdown-open-opacity);
-      transform:var(--tds-select-dropdown-open-transform);
-    }
-
 :is(.tds-select:has( > button) [popover]) ul{
       padding:0;
       margin:0;
       list-style:none;
     }
 
-:is(.tds-select:has( > button) [popover]) li[role="option"]{
-      display:block;
-      padding-block:var(--tds-select-option-padding-block);
-      padding-inline:var(--tds-select-option-padding-inline);
-      overflow:hidden;
-      text-overflow:ellipsis;
-      font-size:var(--tds-select-option-font-size);
-      color:var(--tds-select-option-color);
-      white-space:nowrap;
-      cursor:default;
-      outline-offset:var(--tds-select-option-outline-offset);
-      border-radius:var(--tds-select-option-border-radius);
-    }
-
-:is(:is(.tds-select:has( > button) [popover]) li[role="option"]):focus-visible{
-        outline:var(--t-focus-ring-outline);
-        outline-offset:var(--tds-select-option-outline-offset);
-      }
-
-:is(:is(.tds-select:has( > button) [popover]) li[role="option"]):is(:focus,:hover),.tds-select-option--active:is(:is(.tds-select:has( > button) [popover]) li[role="option"]){
-        color:var(--tds-select-option-color);
-        background:var(--tds-select-option-background-hover);
-      }
-
-:is(:is(.tds-select:has( > button) [popover]) li[role="option"]):is([aria-selected="true"]){
-        color:var(--tds-select-option-color);
-        background:var(--tds-select-option-background-active);
-      }
-
-:is(:is(.tds-select:has( > button) [popover]) li[role="option"]):is([aria-selected="true"])::before{
-          visibility:visible;
-          opacity:1;
-        }
-
-[aria-disabled="true"]:is(:is(.tds-select:has( > button) [popover]) li[role="option"]){
-        color:var(--t-form-color-disabled);
-        cursor:not-allowed;
-      }
-
-[aria-disabled="true"]:is(:is(.tds-select:has( > button) [popover]) li[role="option"]):is(:focus,:hover){
-          background:transparent;
-        }
-
-:is(.tds-select:has( > button) [popover]) li[role="presentation"]{
-      position:sticky;
-      inset-block-start:calc(var(--tds-select-dropdown-padding) * -1);
-      z-index:1;
-      float:inline-start;
-      inline-size:100%;
-      padding-block:var(--tds-select-group-label-padding-block);
-      padding-inline:var(--tds-select-group-label-padding-inline);
-      container-type:scroll-state;
-      font-size:var(--tds-select-group-label-font-size);
-      font-weight:var(--tds-select-group-label-font-weight);
-      letter-spacing:var(--tds-select-group-label-letter-spacing);
-      background:var(--tds-select-group-label-background);
-      text-box:trim-both cap alphabetic;
-    }
-
-:is(:is(.tds-select:has( > button) [popover]) li[role="presentation"]) span{
-        display:inline-flex;
-        gap:var(--t-spacing-half);
-        align-items:center;
-        color:var(--tds-select-group-label-color);
-        transition:var(--tds-select-group-label-transition);
-      }
-
-@container scroll-state(stuck){
-
-:is(:is(.tds-select:has( > button) [popover]) li[role="presentation"]) span{
-          color:var(--tds-select-group-label-color-stuck);
-      }
-
-          @media (forced-colors: active){
-
-:is(:is(.tds-select:has( > button) [popover]) li[role="presentation"]) span{
-            color:var(--tds-select-group-label-color-stuck);
-      }
-          }
-        }
-
 @starting-style{
       :is(.tds-select:has( > button) [popover]):popover-open{
         opacity:var(--tds-select-dropdown-closed-opacity);
@@ -3153,16 +3141,13 @@ a[class="tds-btn"]{
       width:var(--tds-select-caret-size);
       margin-inline-end:var(--tds-select-caret-inline-offset);
       content:var(--tds-select-background-image);
-      transition:transform 180ms ease-in-out;
+      transition:var(--tds-select-caret-transition);
     }
+
     :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);
     }
-    :is(.tds-select select:has( > button))::picker(select):popover-open{
-      opacity:var(--tds-select-dropdown-open-opacity);
-      transform:var(--tds-select-dropdown-open-transform);
-    }
 
     :is(.tds-select select:has( > button)):open,:is(.tds-select select:has( > button)):focus-within{
       outline-color:var(--t-focus-ring-color);
@@ -3206,93 +3191,13 @@ a[class="tds-btn"]{
       border:var(--tds-select-dropdown-border);
       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);
     }
 
-    :is(.tds-select select:has( > button)) legend{
-      position:sticky;
-      inset-block-start:calc(var(--tds-select-dropdown-padding) * -1);
-      z-index:1;
-      float:inline-start;
-      inline-size:100%;
-      padding-block:var(--tds-select-group-label-padding-block);
-      padding-inline:var(--tds-select-group-label-padding-inline);
-      container-type:scroll-state;
-      font-size:var(--tds-select-group-label-font-size);
-      font-weight:var(--tds-select-group-label-font-weight);
-      letter-spacing:var(--tds-select-group-label-letter-spacing);
-      background:var(--tds-select-group-label-background);
-      text-box:trim-both cap alphabetic;
-    }
-
-      :is(:is(.tds-select select:has( > button)) legend) span{
-        display:inline-flex;
-        gap:var(--t-spacing-half);
-        align-items:center;
-        color:var(--tds-select-group-label-color);
-        transition:var(--tds-select-group-label-transition);
-      }
-
-        @container scroll-state(stuck){
-
-      :is(:is(.tds-select select:has( > button)) legend) span{
-          color:var(--tds-select-group-label-color-stuck);
-      }
-
-          @media (forced-colors: active){
-
-      :is(:is(.tds-select select:has( > button)) legend) span{
-            color:var(--tds-select-group-label-color-stuck);
-      }
-          }
-        }
-
-    :is(.tds-select select:has( > button)) option:not([hidden]){
-      display:block;
-      padding-block:var(--tds-select-option-padding-block);
-      padding-inline:var(--tds-select-option-padding-inline);
-      overflow:hidden;
-      text-overflow:ellipsis;
-      font-size:var(--tds-select-option-font-size);
-      color:var(--tds-select-option-color);
-      white-space:nowrap;
-      cursor:default;
-      outline-offset:var(--tds-select-option-outline-offset);
-      border-radius:var(--tds-select-option-border-radius);
-    }
-
-      :is(:is(.tds-select select:has( > button)) option:not([hidden]))::checkmark{
-        display:none;
-      }
-
-      :is(:is(.tds-select select:has( > button)) option:not([hidden])):focus-visible{
-        outline:var(--t-focus-ring-outline);
-        outline-offset:var(--tds-select-option-outline-offset);
-      }
-
-      :is(:is(.tds-select select:has( > button)) option:not([hidden])):is(:focus,:hover):where(:not([disabled])){
-        color:var(--tds-select-option-color);
-        background:var(--tds-select-option-background-hover);
-      }
-
-      :is(:is(.tds-select select:has( > button)) option:not([hidden])):is(:checked){
-        color:var(--tds-select-option-color);
-        background:var(--tds-select-option-background-active);
-      }
-
-    @media (prefers-reduced-motion: reduce){
-      :is(.tds-select select:has( > button))::picker(select){
-        scroll-behavior:auto;
-        transition:none;
-      }
-
-      :is(.tds-select select:has( > button))::picker-icon{
-        transition:none;
-      }
-
-      :is(.tds-select select:has( > button))::picker(select):not(:popover-open),:is(.tds-select select:has( > button))::picker(select):popover-open,:is(.tds-select select:has( > button)):open::picker-icon{
-        transform:none;
-      }
+    :is(.tds-select select:has( > button)) option::checkmark{
+      display:none;
     }
 
     @starting-style{