@abgov/web-components 1.27.0 → 1.28.0

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 (7) hide show
  1. package/components/drawer/Drawer.svelte.d.ts +1 -0
  2. package/experimental/ExperimentalFormStep.svelte.d.ts +1 -0
  3. package/experimental/ExperimentalFormStepper.svelte.d.ts +1 -0
  4. package/index.css +209 -92
  5. package/index.js +3099 -1014
  6. package/index.js.map +1 -1
  7. package/package.json +1 -1
package/components/drawer/Drawer.svelte.d.ts ADDED
@@ -0,0 +1 @@
1
+ export { SvelteComponentTyped as default } from 'svelte';
package/experimental/ExperimentalFormStep.svelte.d.ts ADDED
@@ -0,0 +1 @@
1
+ export { SvelteComponentTyped as default } from 'svelte';
package/experimental/ExperimentalFormStepper.svelte.d.ts ADDED
@@ -0,0 +1 @@
1
+ export { SvelteComponentTyped as default } from 'svelte';
package/index.css CHANGED
@@ -267,10 +267,10 @@ goa-table[variant="relaxed"] td {
267
267
 
268
268
  goa-table thead th {
269
269
  background-color: var(--goa-color-greyscale-white);
270
- color: var(--goa-color-text-secondary);
270
+ color: var(--goa-table-color-heading);
271
271
  padding: var(--goa-space-s) var(--goa-table-header-padding, var(--goa-space-m)) var(--goa-space-xs) var(--goa-table-header-padding, var(--goa-space-m));
272
272
  text-align: left;
273
- border-bottom: 2px solid var(--goa-color-greyscale-600);
273
+ border-bottom: 2px solid var(--goa-table-color-border-heading);
274
274
  vertical-align: bottom;
275
275
  }
276
276
 
@@ -300,102 +300,219 @@ goa-table tfoot tr:last-child td {
300
300
  }
301
301
  /**
302
302
  * Do not edit directly
303
- * Generated on Tue, 11 Jun 2024 15:00:35 GMT
303
+ * Generated on Tue, 29 Oct 2024 18:32:11 GMT
304
304
  */
305
305
 
306
306
  :root {
307
- --goa-color-brand-default: #0081a2;
308
- --goa-color-brand-dark: #005072;
309
- --goa-color-brand-light: #c8eefa;
310
- --goa-color-interactive-default: #0070c4;
311
- --goa-color-interactive-hover: #004f84;
312
- --goa-color-interactive-error: #ec040b;
313
- --goa-color-interactive-focus: #feba35;
314
- --goa-color-interactive-disabled: #80b7e1;
315
- --goa-color-text-default: #333333;
316
- --goa-color-text-secondary: #666666;
317
- --goa-color-text-light: #ffffff;
318
- --goa-color-text-disabled: #666666;
319
- --goa-color-info-default: #004a8f;
320
- --goa-color-info-light: #aac9e7;
321
- --goa-color-info-dark: #003b70;
322
- --goa-color-info-background: #eff8ff;
323
- --goa-color-warning-default: #f9ce2d;
324
- --goa-color-warning-light: #ffeab6;
325
- --goa-color-warning-dark: #bf8d23;
326
- --goa-color-warning-background: #fff6e5;
327
- --goa-color-emergency-default: #da291c;
328
- --goa-color-emergency-light: #fbd1ce;
329
- --goa-color-emergency-dark: #a91a10;
330
- --goa-color-emergency-background: #fff1f2;
331
- --goa-color-success-default: #006f4c;
332
- --goa-color-success-light: #cce4dc;
333
- --goa-color-success-dark: #00563a;
334
- --goa-color-success-background: #eef9f3;
335
- --goa-color-greyscale-50: #f8f8f8;
336
- --goa-color-greyscale-100: #f1f1f1;
337
- --goa-color-greyscale-200: #dcdcdc;
338
- --goa-color-greyscale-400: #adadad;
339
- --goa-color-greyscale-500: #949494;
340
- --goa-color-greyscale-600: #858585;
341
- --goa-color-greyscale-700: #666666;
342
- --goa-color-greyscale-black: #333333;
343
- --goa-color-greyscale-white: #ffffff;
344
- --goa-font-weight-regular: 400;
345
- --goa-font-weight-medium: 500;
307
+ --goa-letter-spacing-button: 0.0125rem;
346
308
  --goa-font-weight-bold: 700;
347
- --goa-font-size-1: 0.75rem;
348
- --goa-font-size-2: 0.875rem;
349
- --goa-font-size-3: 1rem;
350
- --goa-font-size-4: 1.125rem;
351
- --goa-font-size-5: 1.25rem;
352
- --goa-font-size-6: 1.375rem;
353
- --goa-font-size-7: 1.5rem;
354
- --goa-font-size-8: 2rem;
355
- --goa-font-size-9: 2.25rem;
309
+ --goa-font-weight-medium: 500;
310
+ --goa-font-weight-regular: 400;
356
311
  --goa-font-size-10: 3rem;
357
- --goa-space-none: 0rem;
358
- --goa-space-3xs: 0.125rem;
359
- --goa-space-2xs: 0.25rem;
360
- --goa-space-xs: 0.5rem;
361
- --goa-space-s: 0.75rem;
362
- --goa-space-m: 1rem;
363
- --goa-space-l: 1.5rem;
364
- --goa-space-xl: 2rem;
365
- --goa-space-2xl: 3rem;
366
- --goa-space-3xl: 4rem;
312
+ --goa-font-size-9: 2.25rem;
313
+ --goa-font-size-8: 2rem;
314
+ --goa-font-size-7: 1.5rem;
315
+ --goa-font-size-6: 1.375rem;
316
+ --goa-font-size-5: 1.25rem;
317
+ --goa-font-size-4: 1.125rem;
318
+ --goa-font-size-3: 1rem;
319
+ --goa-font-size-2: 0.875rem;
320
+ --goa-font-size-1: 0.75rem;
321
+ --goa-font-family-number: roboto-mono, monospace;
322
+ --goa-font-family-sans: acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif;
323
+ --goa-line-height-05: 1.125rem;
324
+ --goa-line-height-7: 3.5rem;
325
+ --goa-line-height-6: 2.75rem;
326
+ --goa-line-height-5: 2.5rem;
327
+ --goa-line-height-4: 2rem;
328
+ --goa-line-height-3: 1.75rem;
329
+ --goa-line-height-2: 1.5rem;
330
+ --goa-line-height-1: 1.25rem;
331
+ --goa-shadow-modal: 6px 6px 6px 0px rgba(0,0,0,0.16);
332
+ --goa-shadow-600: 0px 20px 20px -8px #1a1a1a47;
333
+ --goa-shadow-500: 0px 12px 20px -8px #1a1a1a3D;
334
+ --goa-shadow-400: 0px 8px 16px -4px #1a1a1a38;
335
+ --goa-shadow-300: 0px 4px 6px -2px #1a1a1a33;
336
+ --goa-shadow-200: 0px 3px 1px -1px #1a1a1a12;
337
+ --goa-shadow-150: 0px 1px 0px 0px #1a1a1a40;
338
+ --goa-shadow-100: 0px 1px 0px 0px #1A1A1A12;
339
+ --goa-icon-size-l: 1.5rem;
340
+ --goa-icon-size-m: 1.25rem;
341
+ --goa-icon-size-s: 1rem;
367
342
  --goa-space-4xl: 8rem;
368
- --goa-border-radius-none: 0rem;
343
+ --goa-space-3xl: 4rem;
344
+ --goa-space-2xl: 3rem;
345
+ --goa-space-xl: 2rem;
346
+ --goa-space-l: 1.5rem;
347
+ --goa-space-m: 1rem;
348
+ --goa-space-s: 0.75rem;
349
+ --goa-space-xs: 0.5rem;
350
+ --goa-space-2xs: 0.25rem;
351
+ --goa-space-3xs: 0.125rem;
352
+ --goa-space-none: 0rem;
353
+ --goa-border-width-l: 3px;
354
+ --goa-border-width-m: 2px;
355
+ --goa-border-width-s: 1px;
356
+ --goa-border-width-xs: 0.7px;
357
+ --goa-border-width-2xs: 0.5px;
358
+ --goa-border-radius-3xl: 0.75rem;
359
+ --goa-border-radius-2xl: 0.625rem;
360
+ --goa-border-radius-xl: 0.5rem;
361
+ --goa-border-radius-l: 0.375rem;
369
362
  --goa-border-radius-m: 0.25rem;
370
- --goa-opacity-background-modal: 50%;
363
+ --goa-border-radius-none: 0;
371
364
  --goa-opacity-background-loading: 90%;
372
- --goa-line-height-1: 1.25rem;
373
- --goa-line-height-2: 1.5rem;
374
- --goa-line-height-3: 1.75rem;
375
- --goa-line-height-4: 2rem;
376
- --goa-line-height-5: 2.5rem;
377
- --goa-line-height-6: 2.75rem;
378
- --goa-line-height-7: 3.5rem;
379
- --goa-line-height-05: 1.125rem;
380
- --goa-font-family-sans: acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif;
381
- --goa-font-family-number: roboto-mono, monospace;
382
- --goa-typography-heading-xs: 700 1rem/1.5rem acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif;
383
- --goa-typography-heading-s: 700 1.125rem/1.75rem acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif;
384
- --goa-typography-heading-m: 400 1.5rem/2rem acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif;
385
- --goa-typography-heading-l: 400 2.25rem/2.75rem acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif;
386
- --goa-typography-heading-xl: 700 3rem/3.5rem acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif;
387
- --goa-typography-body-xs: 400 0.875rem/1.25rem acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif;
388
- --goa-typography-body-s: 400 1rem/1.5rem acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif;
389
- --goa-typography-body-m: 400 1.125rem/1.75rem acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif;
390
- --goa-typography-body-l: 400 1.5rem/2rem acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif;
391
- --goa-typography-button-default: 400 1.125rem/1.25rem acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif;
392
- --goa-typography-number-m: 500 1.125rem/1.75rem roboto-mono, monospace;
393
- --goa-border-width-s: 1px;
394
- --goa-border-width-m: 2px;
395
- --goa-border-width-l: 3px;
396
- --goa-letter-spacing-button: 0.0125rem;
397
- --goa-icon-size-s: 1rem;
398
- --goa-icon-size-m: 1.25rem;
399
- --goa-icon-size-l: 1.5rem;
400
- --goa-shadow-modal: 6px 6px 6px 0px rgba(0,0,0,0.16);
365
+ --goa-opacity-background-modal: 50%;
366
+ --goa-color-extended-yellow: #fce796;
367
+ --goa-color-extended-violet: #d4c2ff;
368
+ --goa-color-extended-red: #ed948d;
369
+ --goa-color-extended-pink: #ff8fc5;
370
+ --goa-color-extended-orange: #ffc76d;
371
+ --goa-color-extended-green: #bbfcb4;
372
+ --goa-color-extended-blue: #aac9e7;
373
+ --goa-color-extended-aqua: #7febe6;
374
+ --goa-color-extended-light-yellow: #fff7bf;
375
+ --goa-color-extended-light-violet: #efe2fb;
376
+ --goa-color-extended-light-red: #f4cdc6;
377
+ --goa-color-extended-light-pink: #f9e1eb;
378
+ --goa-color-extended-light-orange: #fcd6c3;
379
+ --goa-color-extended-light-green: #cce2d9;
380
+ --goa-color-extended-light-blue: #ddefff;
381
+ --goa-color-extended-light-aqua: #dcfbf8;
382
+ --goa-color-greyscale-white: #ffffff;
383
+ --goa-color-greyscale-black: #333333;
384
+ --goa-color-greyscale-900: #474747;
385
+ --goa-color-greyscale-800: #5c5c5c;
386
+ --goa-color-greyscale-700: #666666;
387
+ --goa-color-greyscale-600: #858585;
388
+ --goa-color-greyscale-500: #949494;
389
+ --goa-color-greyscale-400: #adadad;
390
+ --goa-color-greyscale-300: #c2c2c2;
391
+ --goa-color-greyscale-200: #dcdcdc;
392
+ --goa-color-greyscale-150: #e7e7e7;
393
+ --goa-color-greyscale-100: #f1f1f1;
394
+ --goa-color-greyscale-50: #f8f8f8;
395
+ --goa-color-critical-default: #171d23;
396
+ --goa-color-success-background: #eef9f3;
397
+ --goa-color-success-dark: #00563a;
398
+ --goa-color-success-light: #cce4dc;
399
+ --goa-color-success-default: #006f4c;
400
+ --goa-color-emergency-background: #fff1f2;
401
+ --goa-color-emergency-dark: #a91a10;
402
+ --goa-color-emergency-light: #fbd1ce;
403
+ --goa-color-emergency-default: #da291c;
404
+ --goa-color-warning-background: #fff6e5;
405
+ --goa-color-warning-dark: #bf8d23;
406
+ --goa-color-warning-light: #ffeab6;
407
+ --goa-color-warning-default: #f9ce2d;
408
+ --goa-color-info-background: #eff8ff;
409
+ --goa-color-info-dark: #003b70;
410
+ --goa-color-info-light: #aac9e7;
411
+ --goa-color-info-default: #004a8f;
412
+ --goa-color-brand-light: #c8eefa;
413
+ --goa-color-brand-dark: #005072;
414
+ --goa-color-brand-default: #0081a2;
415
+ --goa-color-interactive-visited: #756693;
416
+ --goa-color-interactive-focus-black: #000000;
417
+ --goa-color-interactive-focus: #feba35;
418
+ --goa-color-interactive-error-disabled: #f58185;
419
+ --goa-color-interactive-error-hover: #ba0000;
420
+ --goa-color-interactive-error: #ec040b;
421
+ --goa-color-interactive-disabled: #80b7e1;
422
+ --goa-color-interactive-hover: #004f84;
423
+ --goa-color-interactive-default: #0070c4;
424
+ --goa-side-menu-parent-color-bg-hover: #CEDFEE;
425
+ --goa-side-menu-child-border-width: 4px;
426
+ --goa-drawer-transition-time: 200ms;
427
+ --goa-drawer-right-shadow: -4px 0px 12px 0px rgba(0,0,0,0.2);
428
+ --goa-drawer-left-shadow: 4px 0px 12px 0px rgba(0,0,0,0.2);
429
+ --goa-drawer-bottom-shadow: 0px -4px 12px 0px rgba(0,0,0,0.2);
430
+ --goa-drawer-overlay-color: rgba(0,0,0,0.3);
431
+ --goa-callout-emergency-border-color: none;
432
+ --goa-callout-success-border-color: none;
433
+ --goa-callout-warning-border-color: none;
434
+ --goa-callout-info-border-color: none;
435
+ --goa-callout-l-border-width: 0px;
436
+ --goa-callout-m-border-width: 0px;
437
+ --goa-button-height-compact: 32px;
438
+ --goa-button-height: 42px;
439
+ --goa-accordion-shadow: 0px 0px 0px 0px #000000;
440
+ --goa-typography-number-l: var(--goa-font-weight-medium) var(--goa-font-size-7)/var(--goa-line-height-4) var(--goa-font-family-number);
441
+ --goa-typography-number-m: var(--goa-font-weight-medium) var(--goa-font-size-4)/var(--goa-line-height-3) var(--goa-font-family-number);
442
+ --goa-typography-number-s: var(--goa-font-weight-medium) var(--goa-font-size-3)/var(--goa-line-height-2) var(--goa-font-family-number);
443
+ --goa-typography-button-default: var(--goa-font-weight-regular) var(--goa-font-size-4)/var(--goa-line-height-1) var(--goa-font-family-sans);
444
+ --goa-typography-body-l: var(--goa-font-weight-regular) var(--goa-font-size-7)/var(--goa-line-height-4) var(--goa-font-family-sans);
445
+ --goa-typography-body-m: var(--goa-font-weight-regular) var(--goa-font-size-4)/var(--goa-line-height-3) var(--goa-font-family-sans);
446
+ --goa-typography-body-s: var(--goa-font-weight-regular) var(--goa-font-size-3)/var(--goa-line-height-2) var(--goa-font-family-sans);
447
+ --goa-typography-body-xs: var(--goa-font-weight-regular) var(--goa-font-size-2)/var(--goa-line-height-1) var(--goa-font-family-sans);
448
+ --goa-typography-heading-xl: var(--goa-font-weight-bold) var(--goa-font-size-10)/var(--goa-line-height-7) var(--goa-font-family-sans);
449
+ --goa-typography-heading-l: var(--goa-font-weight-regular) var(--goa-font-size-9)/var(--goa-line-height-6) var(--goa-font-family-sans);
450
+ --goa-typography-heading-m: var(--goa-font-weight-regular) var(--goa-font-size-7)/var(--goa-line-height-4) var(--goa-font-family-sans);
451
+ --goa-typography-heading-s: var(--goa-font-weight-bold) var(--goa-font-size-4)/var(--goa-line-height-3) var(--goa-font-family-sans);
452
+ --goa-typography-heading-xs: var(--goa-font-weight-bold) var(--goa-font-size-3)/var(--goa-line-height-2) var(--goa-font-family-sans);
453
+ --goa-color-text-disabled: var(--goa-color-greyscale-700);
454
+ --goa-color-text-light: var(--goa-color-greyscale-white);
455
+ --goa-color-text-secondary: var(--goa-color-greyscale-700);
456
+ --goa-color-text-default: var(--goa-color-greyscale-black);
457
+ --goa-table-color-border-heading: var(--goa-color-greyscale-600);
458
+ --goa-side-menu-child-color-bg-selected: var(--goa-color-info-background);
459
+ --goa-side-menu-child-color-bg-hover: var(--goa-color-info-background);
460
+ --goa-side-menu-group-border-radius: var(--goa-border-radius-none);
461
+ --goa-side-menu-parent-padding: var(--goa-space-xs) var(--goa-space-m) var(--goa-space-xs) var(--goa-space-xl);
462
+ --goa-side-menu-sub-group-padding: var(--goa-space-none) var(--goa-space-none) var(--goa-space-none) var(--goa-space-none);
463
+ --goa-side-menu-group-padding: var(--goa-space-none);
464
+ --goa-side-menu-group-color-bg: var(--goa-color-greyscale-white);
465
+ --goa-drawer-padding: var(--goa-space-m);
466
+ --goa-container-padding: var(--goa-space-l);
467
+ --goa-container-border: var(--goa-border-width-s) solid var(--goa-color-greyscale-200);
468
+ --goa-container-border-radius: var(--goa-border-radius-m);
469
+ --goa-callout-event-icon-color: var(--goa-color-greyscale-white);
470
+ --goa-callout-emergency-icon-color: var(--goa-color-greyscale-white);
471
+ --goa-callout-emergency-color-bg-statusbar: var(--goa-color-emergency-default);
472
+ --goa-callout-emergency-color-bg-content: var(--goa-color-greyscale-100);
473
+ --goa-callout-success-icon-color: var(--goa-color-greyscale-white);
474
+ --goa-callout-success-color-bg-statusbar: var(--goa-color-success-default);
475
+ --goa-callout-success-color-bg-content: var(--goa-color-greyscale-100);
476
+ --goa-callout-warning-icon-color: var(--goa-color-greyscale-black);
477
+ --goa-callout-warning-color-bg-statusbar: var(--goa-color-warning-default);
478
+ --goa-callout-warning-color-bg-content: var(--goa-color-greyscale-100);
479
+ --goa-callout-info-icon-color: var(--goa-color-greyscale-white);
480
+ --goa-callout-info-color-bg-statusbar: var(--goa-color-info-default);
481
+ --goa-callout-info-color-bg-content: var(--goa-color-greyscale-100);
482
+ --goa-callout-m-statusbar-padding: var(--goa-space-s) var(--goa-space-2xs);
483
+ --goa-callout-m-content-gap: var(--goa-space-2xs);
484
+ --goa-callout-m-content-padding: var(--goa-space-s);
485
+ --goa-callout-m-icon-size: var(--goa-icon-size-s);
486
+ --goa-callout-l-statusbar-padding: var(--goa-space-l) var(--goa-space-s);
487
+ --goa-callout-l-content-gap: var(--goa-space-m);
488
+ --goa-callout-l-content-padding: var(--goa-space-l);
489
+ --goa-callout-l-icon-size: var(--goa-icon-size-m);
490
+ --goa-callout-border-radius: var(--goa-border-radius-none);
491
+ --goa-button-padding-lr-compact: var(--goa-space-xs);
492
+ --goa-button-padding-lr: var(--goa-space-s);
493
+ --goa-button-border-radius: var(--goa-border-radius-m);
494
+ --goa-accordion-color-bg-heading-hover: var(--goa-color-greyscale-200);
495
+ --goa-accordion-padding-content-narrow: var(--goa-space-l);
496
+ --goa-accordion-padding-content-wide: var(--goa-space-l) var(--goa-space-l) var(--goa-space-xl) 56px;
497
+ --goa-accordion-padding-heading-icon-right: var(--goa-space-s) 0 var(--goa-space-s) var(--goa-space-m);
498
+ --goa-accordion-padding-heading-icon-left: var(--goa-space-s) var(--goa-space-m) var(--goa-space-s) 0;
499
+ --goa-accordion-border-radius: var(--goa-border-radius-m);
500
+ --goa-accordion-divider: var(--goa-border-width-s) solid var(--goa-color-greyscale-200);
501
+ --goa-accordion-border: var(--goa-border-width-s) solid var(--goa-color-greyscale-200);
502
+ --goa-accordion-color-bg-content: var(--goa-color-greyscale-white);
503
+ --goa-accordion-color-bg-heading: var(--goa-color-greyscale-100);
504
+ --goa-table-color-heading: var(--goa-color-text-secondary);
505
+ --goa-side-menu-parent-text-active: var(--goa-typography-body-m);
506
+ --goa-side-menu-parent-text: var(--goa-typography-body-m);
507
+ --goa-side-menu-child-color-text-selected: var(--goa-color-text-default);
508
+ --goa-callout-m-text-size: var(--goa-typography-body-s);
509
+ --goa-callout-l-heading-size: var(--goa-typography-heading-m);
510
+ --goa-callout-m-heading-size: var(--goa-typography-heading-xs);
511
+ --goa-callout-l-text-size: var(--goa-typography-body-m);
512
+ --goa-callout-l-heading: var(--goa-typography-heading-m);
513
+ --goa-button-text: var(--goa-typography-button-default);
514
+ --goa-accordion-heading-m: var(--goa-typography-heading-m);
515
+ --goa-accordion-heading-s: var(--goa-typography-heading-s);
516
+ --goa-accordion-color-heading-hover: var(--goa-color-text-default);
517
+ --goa-accordion-color-heading: var(--goa-color-text-default);
401
518
  }