@usgb/forms 1.0.3 → 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);
@@ -45,9 +57,10 @@
     --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-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: 2.75rem;
@@ -97,13 +110,11 @@
     --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%;
-
-    /* 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;
+    /* Lets the form shrink next to siblings when it is a flex/grid item. */
+    min-width: 0;
 }
 
 /* Landing-page heading steps up on desktop; sidebar and newsletter set
@@ -132,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. */
@@ -140,20 +151,15 @@
     margin-bottom: 0;
 }
 
-@container usgb-form (min-width: 20rem) {
-    .usgb-form[data-layout='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-layout='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 */
@@ -471,9 +477,7 @@
 
 /* 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;
@@ -481,10 +485,22 @@
     --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;
@@ -497,8 +513,6 @@
 .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;
@@ -527,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);
 }
 
@@ -547,8 +562,6 @@
    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: 2.75rem;