@usgb/forms 1.0.2 → 1.0.4

package/dist/usgb-forms.css

@@ -2,6 +2,14 @@
    styles/variables.css. Hosts override semantic --usgb-* vars or classes
    on .usgb-form (see README). */
 
+/* Custom elements default to `display: inline`; the <usgb-form> host must
+   be a full-width block so the form fills the space the page gives it. */
+usgb-form {
+    display: block;
+    width: 100%;
+    min-width: 0;
+}
+
 .usgb-form {
     --usgb-primary: #ffffff;
     --usgb-secondary: #000000;
@@ -21,9 +29,13 @@
     --usgb-hover: #5caad6;
     --usgb-sidebar-field-text: #333333;
     --usgb-sidebar-link: #275582;
-    --usgb-font-primary: 'Montserrat', -apple-system, BlinkMacSystemFont,
-        'Helvetica Neue', Helvetica, sans-serif;
-    --usgb-font-secondary: 'Kameron', Georgia, 'Times New Roman', serif;
+    /* Body copy inherits the host font (see font-family below), so it follows
+       WordPress ("Montserrat") and the PWA (next/font's hashed
+       "__Montserrat_…") alike. Set --usgb-font-primary to opt into an
+       explicit stack instead. The heading cannot inherit: it prefers the
+       PWA's next/font variable and falls back to the WordPress family name. */
+    --usgb-font-secondary: var(--font-kameron, 'Kameron'), Georgia,
+        'Times New Roman', serif;
     --usgb-outline-focused: 2px solid var(--usgb-gold-1);
 
     --usgb-form-content: var(--usgb-text-base);
@@ -32,7 +44,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);
@@ -45,16 +57,18 @@
     --usgb-button-disabled-text: var(--usgb-primary);
     --usgb-newsletter-underline: var(--usgb-blue-1);
 
-    --usgb-group-gap: 1.5rem;
-    --usgb-grid-gap: 1rem;
-    --usgb-grid-margin-bottom: 0;
-    --usgb-heading-font-size: 1.75rem;
+    --usgb-group-gap: 1.25rem;
+    /* Column gap in the name row. Variants inherit the field rhythm and
+       override this only when the columns should sit tighter. */
+    --usgb-grid-gap: var(--usgb-group-gap);
+    --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 +100,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;
@@ -95,13 +110,20 @@
     --usgb-button-width: 100%;
 
     box-sizing: border-box;
-    font-family: var(--usgb-font-primary);
+    font-family: var(--usgb-font-primary, inherit);
     color: var(--usgb-form-content);
     width: 100%;
+    /* Lets the form shrink next to siblings when it is a flex/grid item. */
+    min-width: 0;
+}
 
-    /* Hosts drop this form into sidebars and multi-column blocks, so its own
-       width — not the viewport's — decides how many fields fit per row. */
-    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 *,
@@ -113,6 +135,7 @@
 /* Layout */
 
 .usgb-form .usgb-form-group {
+    position: relative;
     margin-bottom: var(--usgb-group-gap);
 }
 
@@ -120,7 +143,7 @@
     display: grid;
     grid-template-columns: 1fr;
     gap: var(--usgb-grid-gap);
-    margin-bottom: var(--usgb-grid-margin-bottom);
+    margin-bottom: var(--usgb-group-gap);
 }
 
 /* Name row only — do not stack form-group margin on top of grid gap. */
@@ -128,20 +151,15 @@
     margin-bottom: 0;
 }
 
-@container usgb-form (min-width: 20rem) {
-    .usgb-form[data-variant~='two-column'] .usgb-form-grid {
-        grid-template-columns: 1fr 1fr;
-    }
-}
-
-/* Safari < 16 / Firefox < 110 have no container queries; fall back to the
-   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 {
-            grid-template-columns: 1fr 1fr;
-        }
-    }
+/* Two-up when the row has room for two ~10rem fields, one column otherwise.
+   Sized from the grid's own width, so it works in sidebars and flex rows
+   without a container query (and the inline-size containment it imposes,
+   which would zero the form's natural width inside content-sized parents). */
+.usgb-form[data-layout='two-column'] .usgb-form-grid {
+    grid-template-columns: repeat(
+        auto-fit,
+        minmax(min(100%, var(--usgb-grid-column-min, 10rem)), 1fr)
+    );
 }
 
 /* Heading, subheading, status */
@@ -159,6 +177,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 +224,7 @@
     margin: -1px;
     overflow: hidden;
     clip: rect(0, 0, 0, 0);
+    clip-path: inset(50%);
     white-space: nowrap;
     border: 0;
 }
@@ -254,6 +274,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 +337,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 +371,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 +390,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 +414,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 +428,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,29 +467,52 @@
 /* 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-group-gap: 1.125rem;
+    --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;
+    /* The row's own margin would stack on the group margin. */
+    --usgb-consent-margin-bottom: 0;
+    --usgb-button-font-size: 1.125rem;
+    --usgb-button-line-height: 1.125rem;
+}
+
+/* 6px between consents. A trailing notice has no field-group margin of its
+   own, so it keeps the field gap above the button. */
+.usgb-form[data-variant~='dense'] .usgb-consent-notice {
+    margin-bottom: var(--usgb-group-gap);
+}
+
+.usgb-form[data-variant~='dense'] .usgb-consent:has(+ .usgb-consent) {
+    margin-bottom: 0.375rem;
+}
+
+@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. */
 .usgb-form[data-variant~='sidebar'] {
     --usgb-field-text: var(--usgb-sidebar-field-text);
     --usgb-group-gap: 0.625rem;
-    --usgb-grid-gap: 0.625rem;
-    --usgb-grid-margin-bottom: 0.625rem;
     --usgb-heading-font-size: 1.25rem;
     --usgb-heading-line-height: 1.25;
     --usgb-heading-margin: 0 0 0.5rem;
@@ -474,6 +541,7 @@
 
 .usgb-form[data-variant~='sidebar'][data-appearance='on-light'] {
     --usgb-field-border: var(--usgb-grey-4);
+    --usgb-checkbox-border: var(--usgb-grey-1);
     --usgb-link: var(--usgb-sidebar-link);
 }
 
@@ -488,22 +556,29 @@
     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 +589,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 +661,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);