Built version of Form Field Error Alerting + Click To Expand

Author: StoneMoney

dist/engrid.css

@@ -19,7 +19,7 @@
  *
  *  ENGRID PAGE TEMPLATE ASSETS
  *
- *  Date: Wednesday, May 13, 2026 @ 17:45:15 ET
+ *  Date: Thursday, May 21, 2026 @ 15:49:27 ET
  *  By: nick
  *  ENGrid styles: v0.25.0
  *  ENGrid scripts: v0.25.1
@@ -2557,6 +2557,19 @@ input[disabled],input[readonly],select[disabled],textarea[disabled],textarea[rea
 body[data-engrid-live-currency=active] .en__field--donationAmt .en__field__item:not([data-engrid-currency-symbol-updated=true]) label{
   color:#0000 !important;
 }
+.en__field__error__alert{
+  color:var(--error__color);
+  font-family:var(--p_font-family);
+  font-size:max(75%, 10px);
+  font-weight:var(--p_font-weight);
+  line-height:var(--p_line-height);
+  order:3;
+}
+
+.en__field__error--hidden-by-a11y{
+  display:none !important;
+}
+
 @supports (-webkit-appearance:-apple-pay-button){
   .apple-pay-button{
     -apple-pay-button-type:donate;
@@ -2844,10 +2857,18 @@ a.button,a.button.active,a.button:active,a.button:focus,a.button:hover{
   --click-to-expand__cta-image_height:16px;
 }
 
+body#en__pagebuilder .click-to-expand-screenreader-tip{
+  background-color:#f8a8091a !important;
+}
+
 body:not(#en__pagebuilder) .click-to-expand .click-to-expand-text-wrapper>:first-child{
   margin-top:0;
 }
 
+body:not(#en__pagebuilder) .click-to-expand .click-to-expand-screenreader-tip{
+  display:none;
+}
+
 body:not(#en__pagebuilder) .click-to-expand:not(.expanded){
   cursor:pointer;
   max-height:var(--click-to-expand__copy-area_height);
@@ -2859,21 +2880,29 @@ body:not(#en__pagebuilder) .click-to-expand:not(.expanded) .click-to-expand-text
 }
 body:not(#en__pagebuilder) .click-to-expand:not(.expanded) .click-to-expand-cta{
   background:var(--click-to-expand__cta-image_url);
+  background-color:initial;
   background-position:bottom;
   background-repeat:no-repeat;
   background-size:var(--click-to-expand__cta-image_width) var(--click-to-expand__cta-image_height);
+  border:none;
   bottom:0;
+  cursor:pointer;
   height:var(--click-to-expand__cta-image_height);
   left:0;
   margin-left:auto;
   margin-right:auto;
+  padding:0;
   position:absolute;
   right:0;
   width:var(--click-to-expand__cta-image_width);
 }
+body:not(#en__pagebuilder) .click-to-expand:not(.expanded) .click-to-expand-cta:focus-visible{
+  outline:2px solid currentColor;
+  outline-offset:2px;
+}
 
-body:not(#en__pagebuilder) .click-to-expand.expanded .click-to-expand-text-wrapper{
-  outline:none;
+body:not(#en__pagebuilder) .click-to-expand.expanded .click-to-expand-cta{
+  display:none;
 }
 
 [data-engrid-theme]{
@@ -4264,6 +4293,68 @@ button.en__eventOccurrence__select>label{
   justify-self:end;
 }
 
+.en__overlay--waitlist .en__overlay__popup{
+  top:15vh;
+  width:100%;
+}
+.en__overlay--waitlist .en__overlay__header{
+  background:var(--engrid__page_background-color);
+  border-bottom:unset;
+  border-radius:unset;
+}
+.en__overlay--waitlist .en__overlay__content{
+  background:var(--engrid__page_background-color);
+  padding:10px 20px;
+}
+.en__overlay--waitlist .en__overlay__content .en__button--confirm{
+  --button_background-color:var(--submit__button_background-color);
+  --button_border-color:var(--submit__button_border-color);
+  --button_color:var(--submit__button_color);
+  --button_background-color_hover:var(--submit__button_background-color_hover);
+  --button_border-color_hover:var(--submit__button_border-color_hover);
+  --button_color_hover:var(--submit__button_color_hover);
+  margin:auto;
+  min-width:100px;
+  padding:var(--button_padding);
+}
+.en__overlay--waitlist .en__waitlistCopy{
+  font-size:var(--h2_font-size);
+  font-weight:var(--h2_font-weight);
+  line-height:var(--h2_line-height);
+  margin-left:auto;
+  margin-right:auto;
+  max-width:400px;
+}
+.en__overlay--waitlist .en__waitlistForm{
+  margin-left:auto;
+  margin-right:auto;
+  max-width:475px;
+}
+.en__overlay--waitlist .en__field{
+  display:grid;
+  gap:8px;
+}
+.en__overlay--waitlist .en__overlay__actions{
+  display:flex;
+  flex-direction:row-reverse;
+  justify-content:space-between;
+  margin:16px auto;
+  max-width:450px;
+}
+.en__overlay--waitlist .en__overlay__actions .en__button{
+  min-width:120px;
+  padding:var(--button_padding);
+  text-transform:uppercase;
+}
+.en__overlay--waitlist .en__overlay__actions .en__button--submit{
+  --button_background-color:var(--submit__button_background-color);
+  --button_border-color:var(--submit__button_border-color);
+  --button_color:var(--submit__button_color);
+  --button_background-color_hover:var(--submit__button_background-color_hover);
+  --button_border-color_hover:var(--submit__button_border-color_hover);
+  --button_color_hover:var(--submit__button_color_hover);
+}
+
 @media screen and (max-width:600px){
   .en__ticket{
     display:flex;
@@ -4318,6 +4409,9 @@ button.en__eventOccurrence__select>label{
     margin-right:2rem;
   }
 }
+#engrid:has(.en__overlay--open) .content-footer,#engrid:has(.en__overlay--open) .content-footerSpacer,#engrid:has(.en__overlay--open) .content-header,#engrid:has(.en__overlay--open) .content-preFooter{
+  z-index:unset;
+}
 [data-engrid-errors=fancy] .en__field__error{
   background-color:var(--error__color);
   border-radius:var(--input_border-radius);
@@ -8256,7 +8350,7 @@ body[data-engrid-debug]:before{
   border-radius:0;
   box-shadow:none;
   color:#0000;
-  content:".";
+  content:"​";
   display:block;
   height:auto;
   margin-right:.5rem;