@usgb/forms 1.0.0 → 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (25) hide show
  1. package/README.md +104 -46
  2. package/dist/forms-manifest.1.0.2.json +305 -0
  3. package/dist/forms-manifest.json +71 -15
  4. package/dist/index.js +609 -592
  5. package/dist/src/contract/types.d.ts +7 -11
  6. package/dist/src/contract/types.d.ts.map +1 -1
  7. package/dist/src/definitions/consents.d.ts +53 -20
  8. package/dist/src/definitions/consents.d.ts.map +1 -1
  9. package/dist/src/definitions/index.d.ts +3 -3
  10. package/dist/src/definitions/index.d.ts.map +1 -1
  11. package/dist/src/definitions/types.d.ts +15 -5
  12. package/dist/src/definitions/types.d.ts.map +1 -1
  13. package/dist/src/form/UsgbForm.d.ts +2 -2
  14. package/dist/src/form/UsgbForm.d.ts.map +1 -1
  15. package/dist/src/form/kinds/LeadKindForm.d.ts.map +1 -1
  16. package/dist/src/form/useUsgbFormSession.d.ts +5 -5
  17. package/dist/src/form/useUsgbFormSession.d.ts.map +1 -1
  18. package/dist/src/index.d.ts +2 -2
  19. package/dist/src/index.d.ts.map +1 -1
  20. package/dist/usgb-forms.1.0.2.js +44 -0
  21. package/dist/usgb-forms.css +46 -24
  22. package/dist/usgb-forms.js +11 -11
  23. package/forms-manifest.json +71 -15
  24. package/package.json +62 -62
  25. package/dist/usgb-forms.1.0.0.js +0 -44
package/dist/usgb-forms.css CHANGED
@@ -16,7 +16,6 @@
16
16
  "Greyscale/Grey 4" (--usgb-grey-4), which is a different value. */
17
17
  --usgb-disabled: #bdbdbd;
18
18
  --usgb-gold-1: #6d4b0f;
19
- --usgb-gold-2: #f4e08e;
20
19
  --usgb-alert-danger: #e61b1b;
21
20
  --usgb-blue-1: #001f3d;
22
21
  --usgb-hover: #5caad6;
@@ -27,7 +26,6 @@
27
26
  --usgb-font-secondary: 'Kameron', Georgia, 'Times New Roman', serif;
28
27
  --usgb-outline-focused: 2px solid var(--usgb-gold-1);
29
28
 
30
- --usgb-form-surface: transparent;
31
29
  --usgb-form-content: var(--usgb-text-base);
32
30
  --usgb-form-muted: var(--usgb-grey-1);
33
31
  --usgb-field-label: var(--usgb-grey-1);
@@ -56,9 +54,9 @@
56
54
  --usgb-heading-letter-spacing: 0;
57
55
  --usgb-heading-transform: none;
58
56
  --usgb-heading-margin: 0 0 0.75rem;
59
- --usgb-body-font-size: 0.875rem;
60
- --usgb-body-line-height: 1.5rem;
61
- --usgb-body-margin: 0 0 1.25rem;
57
+ --usgb-subheading-font-size: 0.875rem;
58
+ --usgb-subheading-line-height: 1.5rem;
59
+ --usgb-subheading-margin: 0 0 1.25rem;
62
60
  --usgb-label-margin-bottom: 0.375rem;
63
61
  --usgb-label-font-size: 0.75rem;
64
62
  --usgb-label-font-weight: 700;
@@ -84,7 +82,7 @@
84
82
  --usgb-checkbox-margin: 0.125rem 0.625rem 0 0;
85
83
  --usgb-consent-font-size: 0.875rem;
86
84
  --usgb-consent-font-weight: 400;
87
- --usgb-consent-line-height: 1.5rem;
85
+ --usgb-consent-line-height: 1rem;
88
86
  --usgb-consent-color: var(--usgb-form-content);
89
87
  --usgb-consent-transform: none;
90
88
  --usgb-button-padding: 0.625rem 1.875rem;
@@ -99,7 +97,6 @@
99
97
  box-sizing: border-box;
100
98
  font-family: var(--usgb-font-primary);
101
99
  color: var(--usgb-form-content);
102
- background: var(--usgb-form-surface);
103
100
  width: 100%;
104
101
 
105
102
  /* Hosts drop this form into sidebars and multi-column blocks, so its own
@@ -147,7 +144,7 @@
147
144
  }
148
145
  }
149
146
 
150
- /* Heading, body, status */
147
+ /* Heading, subheading, status */
151
148
 
152
149
  .usgb-form .usgb-form-heading {
153
150
  font-family: var(--usgb-font-secondary);
@@ -160,10 +157,10 @@
160
157
  color: var(--usgb-form-content);
161
158
  }
162
159
 
163
- .usgb-form .usgb-form-body {
164
- font-size: var(--usgb-body-font-size);
165
- line-height: var(--usgb-body-line-height);
166
- margin: var(--usgb-body-margin);
160
+ .usgb-form .usgb-form-subheading {
161
+ font-size: var(--usgb-subheading-font-size);
162
+ line-height: var(--usgb-subheading-line-height);
163
+ margin: var(--usgb-subheading-margin);
167
164
  color: var(--usgb-form-muted);
168
165
  }
169
166
 
@@ -403,10 +400,11 @@
403
400
  border-color: var(--usgb-button-disabled-background);
404
401
  }
405
402
 
406
- /* Appearances */
403
+ /* Appearances — recolor only for readability on a light or dark host
404
+ surface. Never set background, padding, or border-radius; the host
405
+ container owns those. */
407
406
 
408
- .usgb-form[data-appearance='navy'] {
409
- --usgb-form-surface: var(--usgb-blue-1);
407
+ .usgb-form[data-appearance='on-dark'] {
410
408
  --usgb-form-content: var(--usgb-primary);
411
409
  --usgb-form-muted: var(--usgb-primary);
412
410
  --usgb-field-label: var(--usgb-primary);
@@ -414,15 +412,20 @@
414
412
  --usgb-link: var(--usgb-primary);
415
413
  --usgb-link-hover: var(--usgb-primary);
416
414
  --usgb-checkbox-border: var(--usgb-grey-4);
417
- --usgb-button-background: var(--usgb-gold-2);
415
+ --usgb-button-background: var(--usgb-primary);
418
416
  --usgb-button-text: var(--usgb-blue-1);
419
417
  --usgb-button-hover-background: var(--usgb-primary);
420
418
  --usgb-button-disabled-background: var(--usgb-grey-2);
421
419
  --usgb-button-disabled-text: var(--usgb-grey-6);
422
420
  --usgb-newsletter-underline: var(--usgb-primary);
421
+ }
423
422
 
424
- padding: 2rem;
425
- border-radius: 0.75rem;
423
+ /* Inverse hover keeps the white fill and gains a 3px ring. Two of those
424
+ pixels are an inset shadow over the 1px border so the button does not
425
+ change size between rest and hover. */
426
+ .usgb-form[data-appearance='on-dark'] .usgb-btn-primary:hover:not(:disabled) {
427
+ border-color: var(--usgb-hover);
428
+ box-shadow: inset 0 0 0 2px var(--usgb-hover);
426
429
  }
427
430
 
428
431
  /* Variants */
@@ -431,6 +434,10 @@
431
434
  --usgb-group-gap: 1.25rem;
432
435
  --usgb-grid-gap: 1rem;
433
436
  --usgb-grid-margin-bottom: 1.25rem;
437
+ --usgb-consent-font-size: 0.75rem;
438
+ --usgb-consent-font-weight: 400;
439
+ --usgb-consent-line-height: 1.4;
440
+ --usgb-consent-transform: none;
434
441
  }
435
442
 
436
443
  /* Compact blog/sidebar kit — match live HubSpot density, design-sheet tokens. */
@@ -442,9 +449,9 @@
442
449
  --usgb-heading-font-size: 1.25rem;
443
450
  --usgb-heading-line-height: 1.25;
444
451
  --usgb-heading-margin: 0 0 0.5rem;
445
- --usgb-body-font-size: 0.75rem;
446
- --usgb-body-line-height: 1.25rem;
447
- --usgb-body-margin: 0 0 0.625rem;
452
+ --usgb-subheading-font-size: 0.75rem;
453
+ --usgb-subheading-line-height: 1.25rem;
454
+ --usgb-subheading-margin: 0 0 0.625rem;
448
455
  --usgb-field-min-height: 1.875rem;
449
456
  --usgb-field-padding: 0.25rem 0.9375rem;
450
457
  --usgb-field-font-size: 0.8125rem;
@@ -460,22 +467,25 @@
460
467
  --usgb-checkbox-size: 1.125rem;
461
468
  --usgb-checkbox-margin: 0.125rem 0 0;
462
469
  --usgb-consent-font-size: 0.6875rem;
470
+ --usgb-consent-font-weight: 400;
463
471
  --usgb-consent-line-height: 1.4;
464
472
  --usgb-consent-color: var(--usgb-grey-1);
465
473
  }
466
474
 
467
- .usgb-form[data-variant~='sidebar'][data-appearance='light'] {
475
+ .usgb-form[data-variant~='sidebar'][data-appearance='on-light'] {
468
476
  --usgb-field-border: var(--usgb-grey-4);
469
477
  --usgb-link: var(--usgb-sidebar-link);
470
478
  }
471
479
 
472
- .usgb-form[data-variant~='sidebar'][data-appearance='navy'] {
480
+ .usgb-form[data-variant~='sidebar'][data-appearance='on-dark'] {
473
481
  --usgb-consent-color: var(--usgb-form-muted);
474
482
  }
475
483
 
484
+ .usgb-form[data-variant~='dense'] .usgb-consent-copy,
476
485
  .usgb-form[data-variant~='sidebar'] .usgb-consent-copy {
477
486
  flex: 1;
478
487
  min-width: 0;
488
+ float: none;
479
489
  }
480
490
 
481
491
  .usgb-form[data-variant~='large'] {
@@ -516,10 +526,22 @@
516
526
  --usgb-heading-line-height: 1.2;
517
527
  --usgb-heading-margin: 0 0 0.625rem;
518
528
  --usgb-heading-transform: none;
519
- --usgb-body-margin: 0 0 1.25rem;
529
+ --usgb-subheading-margin: 0 0 1.25rem;
520
530
  --usgb-error-margin-top: 0.5rem;
521
531
  }
522
532
 
533
+ .usgb-form[data-kind='newsletter'] form {
534
+ margin-top: 0.8125rem;
535
+ margin-bottom: 0.9375rem;
536
+ }
537
+
538
+ @media (min-width: 1024px) {
539
+ .usgb-form[data-kind='newsletter'] form {
540
+ margin-top: 2.5rem;
541
+ margin-bottom: 2.5rem;
542
+ }
543
+ }
544
+
523
545
  .usgb-form[data-kind='newsletter'] .usgb-form-inline {
524
546
  display: flex;
525
547
  align-items: center;