@planningcenter/tapestry 2.8.0-rc.0 → 2.8.0-rc.10

package/dist/reactRenderLegacy.css

@@ -106,7 +106,7 @@
   overflow-wrap:break-word;
 }
 
-.tds-page-header [slot="actions"]{
+.tds-page-header [slot="actions"], .tds-page-header .tds-page-header__actions{
   width:100%;
 }
 
@@ -235,7 +235,7 @@
     align-items:flex-start;
   }
 
-  .tds-page-header [slot="actions"]{
+  .tds-page-header [slot="actions"], .tds-page-header .tds-page-header__actions{
     width:auto;
   }
 
@@ -1206,8 +1206,8 @@ a[class="tds-btn"]{
   --t-fill-color-control-neutral-off:hsl(0, 0%, 58%);
   --t-fill-color-control-neutral-on:hsl(0, 0%, 24%);
   --t-fill-color-control:hsl(204, 100%, 40%);
-  --t-fill-color-control-secondary:hsl(97, 57%, 40%);
   --t-fill-color-control-error:hsl(8, 60%, 47%);
+  --t-fill-color-control-secondary:hsl(97, 57%, 40%);
   --t-fill-color-control-disabled:hsl(0, 0%, 81%);
   --t-fill-color-status-neutral:hsl(0, 0%, 42%);
   --t-fill-color-status-neutral-ghost:hsl(0, 0%, 93%);
@@ -2057,35 +2057,28 @@ a[class="tds-btn"]{
 }
 
 .tds-checkbox{
+  --tds-checkbox-font-size:var(--t-font-size-md);
   --tds-checkbox-column-gap:var(--t-spacing-1);
   --tds-checkbox-cursor:pointer;
   --tds-checkbox-line-height:1.4;
   --tds-checkbox-transition-property:background-color, border-color;
 
   --tds-checkbox-input-size:var(--t-element-size-md);
-  --tds-checkbox-input-border-radius:3px;
+  --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
   --tds-checkbox-input-border-color:var(--t-border-color-control-neutral);
   --tds-checkbox-input-background-color:transparent;
-  --tds-checkbox-input-border-color-hover:var(--t-border-color-button-info);
-  --tds-checkbox-input-background-color-hover:var(--t-fill-color-button-interaction-outline-hover);
-  --tds-checkbox-input-border-color-checked:var(--t-border-color-control-info);
-  --tds-checkbox-input-background-color-checked:var(--t-fill-color-control);
-  --tds-checkbox-input-border-color-disabled:var(--t-border-color-control-disabled);
-  --tds-checkbox-input-background-color-disabled:var(--t-fill-color-neutral-070);
 
   --tds-checkbox-input-icon:none;
   --tds-checkbox-input-icon-visibility:hidden;
   --tds-checkbox-input-icon-opacity:0;
   --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
-  --tds-checkbox-input-icon-checked:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
-  --tds-checkbox-input-icon-indeterminate:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
 
-  --tds-checkbox-font-size:var(--t-font-size-md);
   --tds-checkbox-label-color:var(--t-text-color);
 
   --tds-checkbox-description-font-size:var(--t-font-size-sm);
   --tds-checkbox-description-line-height:1.35;
   --tds-checkbox-description-color:var(--t-text-color-secondary);
+  --tds-checkbox-description-invalid-icon-display:none;
 
   position:relative;
   display:inline-grid;
@@ -2146,55 +2139,92 @@ a[class="tds-btn"]{
       transform:translate(-50%, -50%);
     }
 
-:is(.tds-checkbox input[type="checkbox"]):hover{
-      --tds-checkbox-input-background-color:var(--tds-checkbox-input-background-color-hover);
-      --tds-checkbox-input-border-color:var(--tds-checkbox-input-border-color-hover);
+:is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
+      --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
+      --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
     }
 
 :is(.tds-checkbox input[type="checkbox"]):focus-visible{
-      outline:solid 2px var(--t-border-color-status-info);
-      outline-offset:1px;
-    }
-
-:is(.tds-checkbox input[type="checkbox"]):checked,:is(.tds-checkbox input[type="checkbox"]):indeterminate{
-      --tds-checkbox-input-background-color:var(--tds-checkbox-input-background-color-checked);
-      --tds-checkbox-input-border-color:var(--tds-checkbox-input-border-color-checked);
-      --tds-checkbox-input-icon-visibility:visible;
-      --tds-checkbox-input-icon-opacity:1;
+      outline:solid var(--t-spacing-fourth) var(--t-border-color-status-info);
+      outline-offset:var(--t-spacing-fourth);
     }
 
 :is(.tds-checkbox input[type="checkbox"]):disabled{
-      --tds-checkbox-input-background-color:var(--tds-checkbox-input-background-color-disabled);
-      --tds-checkbox-input-border-color:var(--tds-checkbox-input-border-color-disabled);
-      --tds-checkbox-input-icon-fill:var(--t-icon-color-disabled);
       pointer-events:none;
     }
 
-.tds-checkbox:has(input:disabled){
-    --tds-checkbox-label-color:var(--t-text-color-disabled);
-    --tds-checkbox-description-color:var(--t-text-color-disabled);
-    --tds-checkbox-cursor:not-allowed;
-    --tds-checkbox-input-background-color-checked:var(--t-fill-color-control-disabled);
-    --tds-checkbox-input-border-color-checked:var(--tds-checkbox-input-border-color-disabled);
+@media (prefers-reduced-motion: reduce){
+
+.tds-checkbox input[type="checkbox"]{
+      --tds-checkbox-transition-property:none;
+  }
+    }
+
+.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
+    --tds-checkbox-input-background-color:var(--t-fill-color-control);
+    --tds-checkbox-input-border-color:var(--t-border-color-control-info);
+    --tds-checkbox-input-icon-visibility:visible;
+    --tds-checkbox-input-icon-opacity:1;
   }
 
+:is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
+      --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
+      --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
+    }
+
 .tds-checkbox:has(input:checked){
-    --tds-checkbox-input-icon:var(--tds-checkbox-input-icon-checked);
+    --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");;
   }
 
-.tds-checkbox .tds-checkbox--indeterminate,.tds-checkbox:has(input:indeterminate){
-    --tds-checkbox-input-icon:var(--tds-checkbox-input-icon-indeterminate);
+.tds-checkbox:has(input:indeterminate){
+    --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
   }
 
-@media (prefers-reduced-motion: reduce){
+.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
+    --tds-checkbox-input-border-color:var(--t-border-color-control-error);
+    --tds-checkbox-description-color:var(--t-text-color-status-error);
+    --tds-checkbox-description-invalid-icon-display:inline-block;
+  }
 
-.tds-checkbox{
-    --tds-checkbox-transition-property:none;
-}
+:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
+      --tds-checkbox-input-border-color:var(--t-border-color-control-error);
+      --tds-checkbox-input-background-color:var(--t-fill-color-status-error-dim);
+    }
+
+:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate{
+      --tds-checkbox-input-border-color:var(--t-fill-color-control-error);
+      --tds-checkbox-input-background-color:var(--t-fill-color-control-error);
+    }
+
+:is(:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate):hover:not(:disabled){
+        --tds-checkbox-input-border-color:hsl(9 60% 40%);
+        --tds-checkbox-input-background-color:hsl(9 60% 40%);
+      }
+
+.tds-checkbox:has(input:required) label::after{
+      margin-left:.25ch;
+      color:var(--t-text-color-status-error);
+      content:"*";
+    }
+
+.tds-checkbox:has(input:disabled){
+    --tds-checkbox-input-background-color:var(--t-fill-color-neutral-070);
+    --tds-checkbox-input-border-color:var(--t-border-color-control-disabled);
+
+    --tds-checkbox-label-color:var(--t-text-color-disabled);
+    --tds-checkbox-description-color:var(--t-text-color-disabled);
+    --tds-checkbox-cursor:not-allowed;
   }
 
+.tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
+      --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
+    }
+
 .tds-checkbox-description{
+  display:flex;
   grid-area:description;
+  gap:4px;
+  align-items:center;
   margin:0;
   margin-top:var(--t-spacing-fourth);
   font-size:var(--tds-checkbox-description-font-size);
@@ -2203,22 +2233,10 @@ a[class="tds-btn"]{
   cursor:text;
 }
 
-.tds-checkbox--invalid,
-.tds-checkbox:has(input:invalid){
-  --tds-checkbox-input-border-color:var(--t-border-color-button-delete);
-  --tds-checkbox-input-border-color-hover:var(--t-border-color-button-delete);
-  --tds-checkbox-input-background-color-hover:var(--t-fill-color-button-delete-outline-hover);
-  --tds-checkbox-input-border-color-checked:var(--t-fill-color-button-delete-solid);
-  --tds-checkbox-input-background-color-checked:var(--t-fill-color-button-delete-solid);
-  --tds-checkbox-description-color:var(--t-text-color-status-error);
+.tds-checkbox-description-invalid-icon{
+  display:var(--tds-checkbox-description-invalid-icon-display);
 }
 
-.tds-checkbox:has(input:required) label::after{
-    margin-left:.25ch;
-    color:var(--t-text-color-status-error);
-    content:"*";
-  }
-
 .tds-checkbox--sm{
   --tds-checkbox-column-gap:6px;
   --tds-checkbox-line-height:1.35;