@usgb/forms 1.0.1 → 1.0.3

package/dist/usgb-forms.css

@@ -32,7 +32,7 @@
     --usgb-field-background: var(--usgb-primary);
     --usgb-field-border: var(--usgb-secondary);
     --usgb-field-text: var(--usgb-secondary);
-    --usgb-field-placeholder: var(--usgb-grey-3);
+    --usgb-field-placeholder: var(--usgb-grey-2);
     --usgb-link: var(--usgb-blue-1);
     --usgb-link-hover: var(--usgb-hover);
     --usgb-checkbox-background: var(--usgb-primary);
@@ -48,13 +48,14 @@
     --usgb-group-gap: 1.5rem;
     --usgb-grid-gap: 1rem;
     --usgb-grid-margin-bottom: 0;
-    --usgb-heading-font-size: 1.75rem;
+    --usgb-heading-font-size: 2rem;
     --usgb-heading-font-weight: 700;
-    --usgb-heading-line-height: 1.2;
+    --usgb-heading-line-height: 2.75rem;
     --usgb-heading-letter-spacing: 0;
     --usgb-heading-transform: none;
     --usgb-heading-margin: 0 0 0.75rem;
     --usgb-subheading-font-size: 0.875rem;
+    --usgb-subheading-font-weight: 400;
     --usgb-subheading-line-height: 1.5rem;
     --usgb-subheading-margin: 0 0 1.25rem;
     --usgb-label-margin-bottom: 0.375rem;
@@ -86,6 +87,7 @@
     --usgb-consent-color: var(--usgb-form-content);
     --usgb-consent-transform: none;
     --usgb-button-padding: 0.625rem 1.875rem;
+    --usgb-button-margin-top: 0;
     --usgb-button-min-height: 2.1875rem;
     --usgb-button-radius: 3.125rem;
     --usgb-button-font-size: 0.75rem;
@@ -104,6 +106,15 @@
     container: usgb-form / inline-size;
 }
 
+/* Landing-page heading steps up on desktop; sidebar and newsletter set
+   their own sizes and are unaffected. */
+@media (min-width: 768px) {
+    .usgb-form {
+        --usgb-heading-font-size: 2.5rem;
+        --usgb-heading-line-height: 3.25rem;
+    }
+}
+
 .usgb-form *,
 .usgb-form *::before,
 .usgb-form *::after {
@@ -113,6 +124,7 @@
 /* Layout */
 
 .usgb-form .usgb-form-group {
+    position: relative;
     margin-bottom: var(--usgb-group-gap);
 }
 
@@ -129,7 +141,7 @@
 }
 
 @container usgb-form (min-width: 20rem) {
-    .usgb-form[data-variant~='two-column'] .usgb-form-grid {
+    .usgb-form[data-layout='two-column'] .usgb-form-grid {
         grid-template-columns: 1fr 1fr;
     }
 }
@@ -138,7 +150,7 @@
    viewport so those browsers still get a two-up name row on desktop. */
 @supports not (container-type: inline-size) {
     @media (min-width: 768px) {
-        .usgb-form[data-variant~='two-column'] .usgb-form-grid {
+        .usgb-form[data-layout='two-column'] .usgb-form-grid {
             grid-template-columns: 1fr 1fr;
         }
     }
@@ -159,6 +171,7 @@
 
 .usgb-form .usgb-form-subheading {
     font-size: var(--usgb-subheading-font-size);
+    font-weight: var(--usgb-subheading-font-weight);
     line-height: var(--usgb-subheading-line-height);
     margin: var(--usgb-subheading-margin);
     color: var(--usgb-form-muted);
@@ -205,6 +218,7 @@
     margin: -1px;
     overflow: hidden;
     clip: rect(0, 0, 0, 0);
+    clip-path: inset(50%);
     white-space: nowrap;
     border: 0;
 }
@@ -254,6 +268,13 @@
     outline: none;
 }
 
+/* Focus must stay visible when the field is also invalid (2.4.7). */
+.usgb-form .usgb-field-control.usgb-field-invalid:focus {
+    border-color: var(--usgb-alert-danger);
+    box-shadow: inset 0 0 0 1px var(--usgb-gold-1);
+    outline: none;
+}
+
 .usgb-form .usgb-field-control:disabled {
     outline: none;
     border-color: var(--usgb-grey-9);
@@ -310,6 +331,15 @@
     flex-shrink: 0;
 }
 
+.usgb-form .usgb-form-checkbox:focus {
+    outline: none;
+}
+
+.usgb-form .usgb-form-checkbox:focus-visible {
+    outline: var(--usgb-outline-focused);
+    outline-offset: 2px;
+}
+
 .usgb-form .usgb-form-checkbox-mark {
     position: absolute;
     inset: 0;
@@ -335,10 +365,12 @@
 
 .usgb-form .usgb-consent-notice {
     margin: 0 0 var(--usgb-consent-margin-bottom);
+    cursor: default;
 }
 
 .usgb-form .usgb-consent-copy a {
     color: var(--usgb-link);
+    font-weight: var(--usgb-consent-link-font-weight, inherit);
     text-decoration: underline;
 }
 
@@ -352,6 +384,7 @@
     cursor: pointer;
     display: inline-flex;
     padding: var(--usgb-button-padding);
+    margin-top: var(--usgb-button-margin-top);
     min-height: var(--usgb-button-min-height);
     border-radius: var(--usgb-button-radius);
     line-height: var(--usgb-button-line-height);
@@ -375,7 +408,7 @@
     border-color: var(--usgb-button-background);
 }
 
-.usgb-form .usgb-btn-primary:hover:not(:disabled) {
+.usgb-form .usgb-btn-primary:hover:not(:disabled):not([aria-disabled='true']) {
     background: var(--usgb-button-hover-background);
     color: var(--usgb-button-text);
     border-color: var(--usgb-button-hover-background);
@@ -389,12 +422,17 @@
     outline: var(--usgb-outline-focused);
 }
 
-.usgb-form .usgb-btn:disabled {
+.usgb-form .usgb-btn:disabled,
+.usgb-form .usgb-btn[aria-disabled='true'] {
     cursor: not-allowed;
+}
+
+.usgb-form .usgb-btn:disabled {
     pointer-events: none;
 }
 
-.usgb-form .usgb-btn-primary:disabled {
+.usgb-form .usgb-btn-primary:disabled,
+.usgb-form .usgb-btn-primary[aria-disabled='true'] {
     background: var(--usgb-button-disabled-background);
     color: var(--usgb-button-disabled-text);
     border-color: var(--usgb-button-disabled-background);
@@ -423,21 +461,36 @@
 /* Inverse hover keeps the white fill and gains a 3px ring. Two of those
    pixels are an inset shadow over the 1px border so the button does not
    change size between rest and hover. */
-.usgb-form[data-appearance='on-dark'] .usgb-btn-primary:hover:not(:disabled) {
+.usgb-form[data-appearance='on-dark']
+    .usgb-btn-primary:hover:not(:disabled):not([aria-disabled='true']) {
     border-color: var(--usgb-hover);
     box-shadow: inset 0 0 0 2px var(--usgb-hover);
 }
 
 /* Variants */
 
+/* Dense shares the landing-page type scale with large; spacing stays dense. */
 .usgb-form[data-variant~='dense'] {
     --usgb-group-gap: 1.25rem;
     --usgb-grid-gap: 1rem;
     --usgb-grid-margin-bottom: 1.25rem;
+    --usgb-subheading-font-size: 1.125rem;
+    --usgb-subheading-font-weight: 500;
+    --usgb-subheading-line-height: 1.75rem;
     --usgb-consent-font-size: 0.75rem;
     --usgb-consent-font-weight: 400;
     --usgb-consent-line-height: 1.4;
     --usgb-consent-transform: none;
+    --usgb-button-font-size: 1.125rem;
+    --usgb-button-line-height: 1.125rem;
+}
+
+@media (min-width: 768px) {
+    .usgb-form[data-variant~='dense'] {
+        --usgb-subheading-line-height: 1.8125rem;
+        --usgb-button-font-size: 1.25rem;
+        --usgb-button-line-height: 0.875rem;
+    }
 }
 
 /* Compact blog/sidebar kit — match live HubSpot density, design-sheet tokens. */
@@ -488,22 +541,31 @@
     float: none;
 }
 
+/* Large: landing-page form. Figma draws the 1px field and button strokes
+   inside the box, so paddings below are the design values minus 1px and
+   the rendered boxes land on the designed 53px field / 50px (62px desktop)
+   button. */
 .usgb-form[data-variant~='large'] {
     --usgb-group-gap: 1.25rem;
     --usgb-grid-gap: 1.25rem;
     --usgb-grid-margin-bottom: 1.25rem;
     --usgb-heading-font-size: 2rem;
     --usgb-heading-font-weight: 700;
-    --usgb-heading-line-height: 3rem;
+    --usgb-heading-line-height: 2.75rem;
     --usgb-heading-letter-spacing: -0.03125rem;
     --usgb-heading-transform: uppercase;
+    --usgb-heading-margin: 0 0 0.875rem;
+    --usgb-subheading-font-size: 1.125rem;
+    --usgb-subheading-font-weight: 500;
+    --usgb-subheading-line-height: 1.75rem;
+    --usgb-subheading-margin: 0 0 1.5rem;
     --usgb-label-margin-bottom: 0.125rem;
     --usgb-label-font-size: 1rem;
     --usgb-label-font-weight: 400;
     --usgb-label-letter-spacing: 0;
     --usgb-label-line-height: 1.32;
     --usgb-label-transform: none;
-    --usgb-field-padding: 1rem 1.25rem;
+    --usgb-field-padding: 0.9375rem 1.0625rem 0.9375rem 1.1875rem;
     --usgb-field-font-size: 1rem;
     --usgb-field-font-weight: 400;
     --usgb-field-line-height: 1.32;
@@ -514,8 +576,29 @@
     --usgb-checkbox-margin: 0;
     --usgb-consent-font-size: 1.125rem;
     --usgb-consent-line-height: 1.75rem;
-    --usgb-button-min-height: 3.4375rem;
-    --usgb-button-font-size: 1rem;
+    --usgb-consent-link-font-weight: 600;
+    /* Preceding field already contributes the 20px group gap; this tops it
+       up to the designed 24px (32px desktop) between last field and CTA. */
+    --usgb-button-margin-top: 0.25rem;
+    --usgb-button-padding: 0.9375rem 3.4375rem;
+    --usgb-button-min-height: 3.125rem;
+    --usgb-button-font-size: 1.125rem;
+    --usgb-button-line-height: 1.125rem;
+}
+
+@media (min-width: 768px) {
+    .usgb-form[data-variant~='large'] {
+        --usgb-heading-font-size: 2.5rem;
+        --usgb-heading-line-height: 3.25rem;
+        --usgb-subheading-line-height: 1.8125rem;
+        --usgb-subheading-margin: 0 0 1.6875rem;
+        --usgb-button-margin-top: 0.75rem;
+        --usgb-button-padding: 1.4375rem 3.4375rem;
+        --usgb-button-min-height: 3.875rem;
+        --usgb-button-font-size: 1.25rem;
+        --usgb-button-line-height: 0.875rem;
+        --usgb-button-width: auto;
+    }
 }
 
 /* Newsletter kind: underline email + side CTA */
@@ -565,13 +648,13 @@
     margin-bottom: 0;
     box-shadow: none;
 }
-
+/* 
 .usgb-form[data-kind='newsletter']
     .usgb-form-inline
     .usgb-field-control::placeholder {
     color: var(--usgb-grey-9);
     text-transform: none;
-}
+} */
 
 .usgb-form[data-kind='newsletter'] .usgb-form-inline .usgb-field-control:focus {
     border-color: var(--usgb-gold-1);