@abgov/react-components 4.9.0 → 4.10.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.
@@ -1127,7 +1127,7 @@ function cssVar(name, value) {
1127
1127
  /* libs/web-components/src/components/accordion/Accordion.svelte generated by Svelte v3.51.0 */
1128
1128
 
1129
1129
 
1130
- function create_fragment$P(ctx) {
1130
+ function create_fragment$Q(ctx) {
1131
1131
  let div3;
1132
1132
  let details;
1133
1133
  let summary;
@@ -1330,7 +1330,7 @@ function create_fragment$P(ctx) {
1330
1330
  };
1331
1331
  }
1332
1332
 
1333
- function instance$J($$self, $$props, $$invalidate) {
1333
+ function instance$K($$self, $$props, $$invalidate) {
1334
1334
  let isOpen;
1335
1335
  const [HeadingSizes, validateHeadingSize] = typeValidator("Accordion heading size", ["small", "medium"]);
1336
1336
  let {
@@ -1408,7 +1408,7 @@ class Accordion extends SvelteElement {
1408
1408
  target: this.shadowRoot,
1409
1409
  props: attribute_to_object(this.attributes),
1410
1410
  customElement: true
1411
- }, instance$J, create_fragment$P, safe_not_equal, {
1411
+ }, instance$K, create_fragment$Q, safe_not_equal, {
1412
1412
  open: 10,
1413
1413
  heading: 0,
1414
1414
  secondarytext: 1,
@@ -1664,7 +1664,7 @@ function create_if_block$o(ctx) {
1664
1664
  };
1665
1665
  }
1666
1666
 
1667
- function create_fragment$O(ctx) {
1667
+ function create_fragment$P(ctx) {
1668
1668
  let div2;
1669
1669
  let div1;
1670
1670
  let t;
@@ -1748,7 +1748,7 @@ function create_fragment$O(ctx) {
1748
1748
  };
1749
1749
  }
1750
1750
 
1751
- function instance$I($$self, $$props, $$invalidate) {
1751
+ function instance$J($$self, $$props, $$invalidate) {
1752
1752
  let {
1753
1753
  heading = ""
1754
1754
  } = $$props;
@@ -1775,12 +1775,12 @@ function instance$I($$self, $$props, $$invalidate) {
1775
1775
  class AppHeader extends SvelteElement {
1776
1776
  constructor(options) {
1777
1777
  super();
1778
- this.shadowRoot.innerHTML = `<style>*{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.app-header{margin:0 auto;background-color:var(--goa-color-greyscale-white);border-bottom:1px solid var(--goa-color-greyscale-100)}@media(max-width: 640px){.app-header{padding:1rem 1rem}}.content{margin:0 auto;width:min(var(--max-content-width), 100%);display:flex;align-items:center;justify-content:space-between}@media(min-width: 640px){.content{padding:1.5rem 1.125rem}}.app-link{display:flex;align-items:center;text-decoration:none;color:inherit}.title{margin-left:0.5rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.image-desktop{display:none}.image-mobile{display:block}@media(min-width: 640px){.image-desktop{display:block}.image-mobile{display:none}.title{margin-left:1.75rem}.image-desktop{display:block}.image-mobile{display:none}}</style>`;
1778
+ this.shadowRoot.innerHTML = `<style>*{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.app-header{margin:0 auto;background-color:var(--goa-color-greyscale-white);border-bottom:1px solid var(--goa-color-greyscale-100);padding:1rem 1rem}.content{margin:0 auto;width:min(var(--max-content-width), 100%);display:flex;align-items:center;justify-content:space-between}@media(min-width: 640px){.app-header{padding:1.5rem 2rem}}@media(min-width: 1024px){.app-header{padding:1.5rem 4.5rem}}.app-link{display:flex;align-items:center;text-decoration:none;color:inherit}.title{margin-left:0.5rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.image-desktop{display:none}.image-mobile{display:block}@media(min-width: 640px){.image-desktop{display:block}.image-mobile{display:none}.title{margin-left:1.75rem}.image-desktop{display:block}.image-mobile{display:none}}</style>`;
1779
1779
  init(this, {
1780
1780
  target: this.shadowRoot,
1781
1781
  props: attribute_to_object(this.attributes),
1782
1782
  customElement: true
1783
- }, instance$I, create_fragment$O, safe_not_equal, {
1783
+ }, instance$J, create_fragment$P, safe_not_equal, {
1784
1784
  heading: 0,
1785
1785
  url: 1,
1786
1786
  testid: 2,
@@ -1940,7 +1940,7 @@ function create_if_block$n(ctx) {
1940
1940
  };
1941
1941
  }
1942
1942
 
1943
- function create_fragment$N(ctx) {
1943
+ function create_fragment$O(ctx) {
1944
1944
  let div;
1945
1945
  let t;
1946
1946
  let div_style_value;
@@ -2076,7 +2076,7 @@ function create_fragment$N(ctx) {
2076
2076
  };
2077
2077
  }
2078
2078
 
2079
- function instance$H($$self, $$props, $$invalidate) {
2079
+ function instance$I($$self, $$props, $$invalidate) {
2080
2080
  let showIcon;
2081
2081
  let iconType;
2082
2082
  const [Types, validateType] = typeValidator("Badge type", ["success", "important", "information", "emergency", "dark", "midtone", "light"], true);
@@ -2156,7 +2156,7 @@ class Badge extends SvelteElement {
2156
2156
  target: this.shadowRoot,
2157
2157
  props: attribute_to_object(this.attributes),
2158
2158
  customElement: true
2159
- }, instance$H, create_fragment$N, safe_not_equal, {
2159
+ }, instance$I, create_fragment$O, safe_not_equal, {
2160
2160
  type: 0,
2161
2161
  testid: 1,
2162
2162
  content: 2,
@@ -2276,7 +2276,7 @@ class Badge extends SvelteElement {
2276
2276
  customElements.define("goa-badge", Badge);
2277
2277
  /* libs/web-components/src/components/block/Block.svelte generated by Svelte v3.51.0 */
2278
2278
 
2279
- function create_fragment$M(ctx) {
2279
+ function create_fragment$N(ctx) {
2280
2280
  let div;
2281
2281
  let slot;
2282
2282
  let div_style_value;
@@ -2350,7 +2350,7 @@ function create_fragment$M(ctx) {
2350
2350
  };
2351
2351
  }
2352
2352
 
2353
- function instance$G($$self, $$props, $$invalidate) {
2353
+ function instance$H($$self, $$props, $$invalidate) {
2354
2354
  let {
2355
2355
  gap = "m"
2356
2356
  } = $$props;
@@ -2394,7 +2394,7 @@ class Block extends SvelteElement {
2394
2394
  target: this.shadowRoot,
2395
2395
  props: attribute_to_object(this.attributes),
2396
2396
  customElement: true
2397
- }, instance$G, create_fragment$M, safe_not_equal, {
2397
+ }, instance$H, create_fragment$N, safe_not_equal, {
2398
2398
  gap: 0,
2399
2399
  direction: 1,
2400
2400
  alignment: 2,
@@ -2700,7 +2700,7 @@ function create_if_block_1$d(ctx) {
2700
2700
  };
2701
2701
  }
2702
2702
 
2703
- function create_fragment$L(ctx) {
2703
+ function create_fragment$M(ctx) {
2704
2704
  let button;
2705
2705
  let button_class_value;
2706
2706
  let button_style_value;
@@ -2854,7 +2854,7 @@ function create_fragment$L(ctx) {
2854
2854
  };
2855
2855
  }
2856
2856
 
2857
- function instance$F($$self, $$props, $$invalidate) {
2857
+ function instance$G($$self, $$props, $$invalidate) {
2858
2858
  let isDisabled;
2859
2859
  let isButtonDark;
2860
2860
  const [Types, validateType] = typeValidator("Button type", ["primary", "submit", "secondary", "tertiary", "start"], true);
@@ -2944,12 +2944,12 @@ class Button extends SvelteElement {
2944
2944
  constructor(options) {
2945
2945
  super();
2946
2946
  this.shadowRoot.innerHTML = `<style>:host{--button-height:2.625rem;--button-height-compact:2rem;--button-height-tall:3.25rem;box-sizing:border-box;font-family:var(--goa-font-family-sans)}@media(max-width: 480px){:host{width:100%}button{width:100%}}button{display:inline-flex;box-sizing:border-box;border-radius:0.25rem;border:2px solid var(--goa-color-interactive-default);box-sizing:border-box;cursor:pointer;font-family:var(--goa-font-family-sans);font-size:var(--goa-font-size-5);font-weight:400;height:var(--button-height);letter-spacing:var(--goa-letter-spacing-button);line-height:100%;padding:0 0.75rem;gap:0.5rem;align-items:center;justify-content:center;transition:transform 0.1s ease-in-out, background-color 0.2s ease-in-out,
2947
- border-color 0.2s ease-in-out}.text{padding-bottom:var(--font-valign-fix, 0)}button:disabled{pointer-events:none;opacity:0.5}button.compact{height:var(--button-height-compact);font-size:var(--goa-font-size-4)}button.start{height:var(--button-height-tall);font-weight:var(--goa-font-weight-bold)}button.start,button.submit,button.primary{border:2px solid var(--goa-color-interactive-default);background-color:var(--goa-color-interactive-default);color:var(--goa-color-text-light)}button.start:hover,button.submit:hover,button.primary:hover{border-color:var(--goa-color-interactive-hover);background-color:var(--goa-color-interactive-hover)}button.start:focus,button.start:active,button.submit:focus,button.submit:active,button.primary:focus,button.primary:active{box-shadow:0 0 0 3px var(--goa-color-interactive-focus);border-color:var(--goa-color-interactive-hover);background-color:var(--goa-color-interactive-hover);outline:none}button.secondary{border:2px solid var(--goa-color-interactive-default);background-color:var(--goa-color-greyscale-white);color:var(--goa-color-interactive-default)}button.secondary:hover{border-color:var(--goa-color-interactive-hover);color:var(--goa-color-interactive-hover);background-color:var(--goa-color-greyscale-100)}button.secondary:focus,button.secondary:active{border-color:var(--goa-color-interactive-hover);box-shadow:0 0 0 3px var(--goa-color-interactive-focus);background-color:var(--goa-color-greyscale-100);outline:none}button.tertiary{border:1px solid transparent;background-color:transparent;color:var(--goa-color-interactive-default);text-decoration:underline}button.tertiary:hover{border-color:var(--goa-color-greyscale-100);color:var(--goa-color-interactive-hover);background-color:var(--goa-color-greyscale-100)}button.tertiary:focus,button.tertiary:active{border-color:var(--goa-color-greyscale-100);background-color:var(--goa-color-greyscale-100);color:var(--goa-color-interactive-hover);box-shadow:0 0 0 3px var(--goa-color-interactive-focus);outline:none}.submit.destructive,.primary.destructive{color:var(--goa-color-greyscale-white);background-color:var(--goa-color-emergency-default);border-color:var(--goa-color-emergency-default)}.submit.destructive:hover,.primary.destructive:hover{background-color:var(--goa-color-emergency-dark);border-color:var(--goa-color-emergency-dark)}.submit.destructive:focus,.primary.destructive:focus,.primary.destructive:active{background-color:var(--goa-color-emergency-dark);border-color:var(--goa-color-emergency-dark)}.secondary.destructive{color:var(--goa-color-emergency-default);border-color:var(--goa-color-emergency-default);background-color:var(--goa-color-greyscale-white)}.secondary.destructive:hover{border-color:var(--goa-color-emergency-dark);color:var(--goa-color-emergency-dark);background-color:var(--goa-color-greyscale-white)}.secondary.destructive:focus,.secondary.destructive:active{color:var(--goa-color-emergency-dark);border-color:var(--goa-color-emergency-dark);background-color:var(--goa-color-greyscale-white)}.tertiary.destructive{color:var(--goa-color-emergency-default);border-color:transparent}.tertiary.destructive:hover{color:var(--goa-color-emergency-dark)}.tertiary.destructive:focus,.tertiary.destructive:active{color:var(--goa-color-emergency-dark)}</style>`;
2947
+ border-color 0.2s ease-in-out}.text{padding-bottom:var(--font-valign-fix, 0)}button:disabled{pointer-events:none;opacity:0.5}button.compact{height:var(--button-height-compact);font-size:var(--goa-font-size-4);padding-left:var(--goa-space-xs);padding-right:var(--goa-space-xs)}button.start{height:var(--button-height-tall);font-weight:var(--goa-font-weight-bold)}button.start,button.submit,button.primary{border:2px solid var(--goa-color-interactive-default);background-color:var(--goa-color-interactive-default);color:var(--goa-color-text-light)}button.start:hover,button.submit:hover,button.primary:hover{border-color:var(--goa-color-interactive-hover);background-color:var(--goa-color-interactive-hover)}button.start:focus,button.start:active,button.submit:focus,button.submit:active,button.primary:focus,button.primary:active{box-shadow:0 0 0 3px var(--goa-color-interactive-focus);border-color:var(--goa-color-interactive-hover);background-color:var(--goa-color-interactive-hover);outline:none}button.secondary{border:2px solid var(--goa-color-interactive-default);background-color:var(--goa-color-greyscale-white);color:var(--goa-color-interactive-default)}button.secondary:hover{border-color:var(--goa-color-interactive-hover);color:var(--goa-color-interactive-hover);background-color:var(--goa-color-greyscale-100)}button.secondary:focus,button.secondary:active{border-color:var(--goa-color-interactive-hover);box-shadow:0 0 0 3px var(--goa-color-interactive-focus);background-color:var(--goa-color-greyscale-100);outline:none}button.tertiary{border:1px solid transparent;background-color:transparent;color:var(--goa-color-interactive-default);text-decoration:underline}button.tertiary:hover{border-color:var(--goa-color-greyscale-100);color:var(--goa-color-interactive-hover);background-color:var(--goa-color-greyscale-100)}button.tertiary:focus,button.tertiary:active{border-color:var(--goa-color-greyscale-100);background-color:var(--goa-color-greyscale-100);color:var(--goa-color-interactive-hover);box-shadow:0 0 0 3px var(--goa-color-interactive-focus);outline:none}.submit.destructive,.primary.destructive{color:var(--goa-color-greyscale-white);background-color:var(--goa-color-emergency-default);border-color:var(--goa-color-emergency-default)}.submit.destructive:hover,.primary.destructive:hover{background-color:var(--goa-color-emergency-dark);border-color:var(--goa-color-emergency-dark)}.submit.destructive:focus,.primary.destructive:focus,.primary.destructive:active{background-color:var(--goa-color-emergency-dark);border-color:var(--goa-color-emergency-dark)}.secondary.destructive{color:var(--goa-color-emergency-default);border-color:var(--goa-color-emergency-default);background-color:var(--goa-color-greyscale-white)}.secondary.destructive:hover{border-color:var(--goa-color-emergency-dark);color:var(--goa-color-emergency-dark);background-color:var(--goa-color-greyscale-white)}.secondary.destructive:focus,.secondary.destructive:active{color:var(--goa-color-emergency-dark);border-color:var(--goa-color-emergency-dark);background-color:var(--goa-color-greyscale-white)}.tertiary.destructive{color:var(--goa-color-emergency-default);border-color:transparent}.tertiary.destructive:hover{color:var(--goa-color-emergency-dark)}.tertiary.destructive:focus,.tertiary.destructive:active{color:var(--goa-color-emergency-dark)}</style>`;
2948
2948
  init(this, {
2949
2949
  target: this.shadowRoot,
2950
2950
  props: attribute_to_object(this.attributes),
2951
2951
  customElement: true
2952
- }, instance$F, create_fragment$L, safe_not_equal, {
2952
+ }, instance$G, create_fragment$M, safe_not_equal, {
2953
2953
  type: 0,
2954
2954
  size: 1,
2955
2955
  variant: 2,
@@ -3105,7 +3105,7 @@ class Button extends SvelteElement {
3105
3105
  customElements.define("goa-button", Button);
3106
3106
  /* libs/web-components/src/components/button-group/ButtonGroup.svelte generated by Svelte v3.51.0 */
3107
3107
 
3108
- function create_fragment$K(ctx) {
3108
+ function create_fragment$L(ctx) {
3109
3109
  let div;
3110
3110
  let slot;
3111
3111
  let div_style_value;
@@ -3175,7 +3175,7 @@ function create_fragment$K(ctx) {
3175
3175
  };
3176
3176
  }
3177
3177
 
3178
- function instance$E($$self, $$props, $$invalidate) {
3178
+ function instance$F($$self, $$props, $$invalidate) {
3179
3179
  let _alignment;
3180
3180
 
3181
3181
  let {
@@ -3239,7 +3239,7 @@ class ButtonGroup extends SvelteElement {
3239
3239
  target: this.shadowRoot,
3240
3240
  props: attribute_to_object(this.attributes),
3241
3241
  customElement: true
3242
- }, instance$E, create_fragment$K, safe_not_equal, {
3242
+ }, instance$F, create_fragment$L, safe_not_equal, {
3243
3243
  alignment: 7,
3244
3244
  gap: 0,
3245
3245
  testid: 1,
@@ -3356,6 +3356,9 @@ function create_if_block$l(ctx) {
3356
3356
  t = text(
3357
3357
  /*heading*/
3358
3358
  ctx[5]);
3359
+ toggle_class(h3, "medium",
3360
+ /*isMediumCallout*/
3361
+ ctx[9]);
3359
3362
  },
3360
3363
 
3361
3364
  m(target, anchor) {
@@ -3369,6 +3372,14 @@ function create_if_block$l(ctx) {
3369
3372
  32) set_data(t,
3370
3373
  /*heading*/
3371
3374
  ctx[5]);
3375
+
3376
+ if (dirty &
3377
+ /*isMediumCallout*/
3378
+ 512) {
3379
+ toggle_class(h3, "medium",
3380
+ /*isMediumCallout*/
3381
+ ctx[9]);
3382
+ }
3372
3383
  },
3373
3384
 
3374
3385
  d(detaching) {
@@ -3378,7 +3389,7 @@ function create_if_block$l(ctx) {
3378
3389
  };
3379
3390
  }
3380
3391
 
3381
- function create_fragment$J(ctx) {
3392
+ function create_fragment$K(ctx) {
3382
3393
  let div;
3383
3394
  let span0;
3384
3395
  let goa_icon;
@@ -3389,6 +3400,11 @@ function create_fragment$J(ctx) {
3389
3400
  let t1;
3390
3401
  let slot;
3391
3402
  let div_style_value;
3403
+ let mounted;
3404
+ let dispose;
3405
+ add_render_callback(
3406
+ /*onwindowresize*/
3407
+ ctx[12]);
3392
3408
  let if_block =
3393
3409
  /*heading*/
3394
3410
  ctx[5] && create_if_block$l(ctx);
@@ -3405,7 +3421,10 @@ function create_fragment$J(ctx) {
3405
3421
  this.c = noop;
3406
3422
  set_custom_element_data(goa_icon, "type",
3407
3423
  /*iconType*/
3408
- ctx[7]);
3424
+ ctx[10]);
3425
+ set_custom_element_data(goa_icon, "size",
3426
+ /*iconSize*/
3427
+ ctx[8]);
3409
3428
  set_custom_element_data(goa_icon, "inverted", goa_icon_inverted_value =
3410
3429
  /*type*/
3411
3430
  ctx[4] === "important" ? "false" : "true");
@@ -3426,6 +3445,9 @@ function create_fragment$J(ctx) {
3426
3445
  attr(div, "data-testid",
3427
3446
  /*testid*/
3428
3447
  ctx[6]);
3448
+ toggle_class(div, "medium",
3449
+ /*isMediumCallout*/
3450
+ ctx[9]);
3429
3451
  },
3430
3452
 
3431
3453
  m(target, anchor) {
@@ -3437,15 +3459,30 @@ function create_fragment$J(ctx) {
3437
3459
  if (if_block) if_block.m(span1, null);
3438
3460
  append(span1, t1);
3439
3461
  append(span1, slot);
3462
+
3463
+ if (!mounted) {
3464
+ dispose = listen(window, "resize",
3465
+ /*onwindowresize*/
3466
+ ctx[12]);
3467
+ mounted = true;
3468
+ }
3440
3469
  },
3441
3470
 
3442
3471
  p(ctx, [dirty]) {
3443
3472
  if (dirty &
3444
3473
  /*iconType*/
3445
- 128) {
3474
+ 1024) {
3446
3475
  set_custom_element_data(goa_icon, "type",
3447
3476
  /*iconType*/
3448
- ctx[7]);
3477
+ ctx[10]);
3478
+ }
3479
+
3480
+ if (dirty &
3481
+ /*iconSize*/
3482
+ 256) {
3483
+ set_custom_element_data(goa_icon, "size",
3484
+ /*iconSize*/
3485
+ ctx[8]);
3449
3486
  }
3450
3487
 
3451
3488
  if (dirty &
@@ -3500,6 +3537,14 @@ function create_fragment$J(ctx) {
3500
3537
  /*testid*/
3501
3538
  ctx[6]);
3502
3539
  }
3540
+
3541
+ if (dirty &
3542
+ /*isMediumCallout*/
3543
+ 512) {
3544
+ toggle_class(div, "medium",
3545
+ /*isMediumCallout*/
3546
+ ctx[9]);
3547
+ }
3503
3548
  },
3504
3549
 
3505
3550
  i: noop,
@@ -3508,14 +3553,18 @@ function create_fragment$J(ctx) {
3508
3553
  d(detaching) {
3509
3554
  if (detaching) detach(div);
3510
3555
  if (if_block) if_block.d();
3556
+ mounted = false;
3557
+ dispose();
3511
3558
  }
3512
3559
 
3513
3560
  };
3514
3561
  }
3515
3562
 
3516
- function instance$D($$self, $$props, $$invalidate) {
3563
+ function instance$E($$self, $$props, $$invalidate) {
3564
+ let isMediumCallout;
3517
3565
  let iconType;
3518
3566
  const [Types, validateType] = typeValidator("Callout type", ["emergency", "important", "information", "event", "success"], true);
3567
+ const [CalloutSizes, validateCalloutSize] = typeValidator("Callout size", ["medium", "large"]);
3519
3568
  let {
3520
3569
  mt = null
3521
3570
  } = $$props;
@@ -3528,6 +3577,9 @@ function instance$D($$self, $$props, $$invalidate) {
3528
3577
  let {
3529
3578
  ml = null
3530
3579
  } = $$props;
3580
+ let {
3581
+ size = "large"
3582
+ } = $$props;
3531
3583
  let {
3532
3584
  type
3533
3585
  } = $$props;
@@ -3537,44 +3589,62 @@ function instance$D($$self, $$props, $$invalidate) {
3537
3589
  let {
3538
3590
  testid = ""
3539
3591
  } = $$props;
3592
+ let screenSize = 0;
3593
+ let iconSize = "medium";
3540
3594
  onMount(() => {
3541
- setTimeout(() => validateType(type), 1);
3595
+ validateCalloutSize(size);
3596
+ setTimeout(() => {
3597
+ validateType(type);
3598
+ $$invalidate(8, iconSize = isMediumCallout ? "small" : "medium");
3599
+ });
3542
3600
  });
3543
3601
 
3602
+ function onwindowresize() {
3603
+ $$invalidate(7, screenSize = window.innerWidth);
3604
+ }
3605
+
3544
3606
  $$self.$$set = $$props => {
3545
3607
  if ('mt' in $$props) $$invalidate(0, mt = $$props.mt);
3546
3608
  if ('mr' in $$props) $$invalidate(1, mr = $$props.mr);
3547
3609
  if ('mb' in $$props) $$invalidate(2, mb = $$props.mb);
3548
3610
  if ('ml' in $$props) $$invalidate(3, ml = $$props.ml);
3611
+ if ('size' in $$props) $$invalidate(11, size = $$props.size);
3549
3612
  if ('type' in $$props) $$invalidate(4, type = $$props.type);
3550
3613
  if ('heading' in $$props) $$invalidate(5, heading = $$props.heading);
3551
3614
  if ('testid' in $$props) $$invalidate(6, testid = $$props.testid);
3552
3615
  };
3553
3616
 
3554
3617
  $$self.$$.update = () => {
3618
+ if ($$self.$$.dirty &
3619
+ /*screenSize, size*/
3620
+ 2176) {
3621
+ $$invalidate(9, isMediumCallout = screenSize < 640 || size === "medium");
3622
+ }
3623
+
3555
3624
  if ($$self.$$.dirty &
3556
3625
  /*type*/
3557
3626
  16) {
3558
- $$invalidate(7, iconType = type === "emergency" ? "warning" : type === "important" ? "alert-circle" : type === "information" ? "information-circle" : type === "success" ? "checkmark-circle" : type === "event" ? "calendar" : "");
3627
+ $$invalidate(10, iconType = type === "emergency" ? "warning" : type === "important" ? "alert-circle" : type === "information" ? "information-circle" : type === "success" ? "checkmark-circle" : type === "event" ? "calendar" : "");
3559
3628
  }
3560
3629
  };
3561
3630
 
3562
- return [mt, mr, mb, ml, type, heading, testid, iconType];
3631
+ return [mt, mr, mb, ml, type, heading, testid, screenSize, iconSize, isMediumCallout, iconType, size, onwindowresize];
3563
3632
  }
3564
3633
 
3565
3634
  class Callout extends SvelteElement {
3566
3635
  constructor(options) {
3567
3636
  super();
3568
- this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.notification{display:flex;align-items:stretch;border-radius:3px;overflow:hidden}h3{font-size:var(--goa-font-size-7);line-height:var(--goa-line-height-2);font-weight:var(--goa-font-weight-regular);margin-top:0}.emergency{background-color:var(--goa-color-emergency-default)}.important{background-color:var(--goa-color-warning-default)}.information{background-color:var(--goa-color-info-default)}.event{background-color:var(--goa-color-info-default)}.success{background-color:var(--goa-color-success-default)}.icon{flex:0 0 3rem;text-align:center;padding-top:1.75rem}.content{flex:1 1 auto;background-color:var(--goa-color-greyscale-100);padding:1.75rem}</style>`;
3637
+ this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.notification{display:flex;align-items:stretch;overflow:hidden;font:var(--goa-typography-body-m)}h3{font-size:var(--goa-font-size-7);line-height:var(--goa-line-height-2);font-weight:var(--goa-font-weight-regular);margin-top:var(--goa-space-none);margin-bottom:var(--goa-space-m)}.emergency{background-color:var(--goa-color-emergency-default)}.important{background-color:var(--goa-color-warning-default)}.information{background-color:var(--goa-color-info-default)}.event{background-color:var(--goa-color-info-default)}.success{background-color:var(--goa-color-success-default)}.icon{text-align:center;padding-top:var(--goa-space-l);padding-left:var(--goa-space-s);padding-right:var(--goa-space-s)}.content{flex:1 1 auto;background-color:var(--goa-color-greyscale-100);padding:var(--goa-space-l)}.notification.medium{font:var(--goa-typography-body-s);max-width:22rem}h3.medium{font:var(--goa-typography-heading-xs);margin-bottom:var(--goa-space-2xs)}.notification.medium .content{padding:var(--goa-space-s);margin-top:calc(-1 * var(--goa-space-3xs))}.notification.medium .icon{padding-top:var(--goa-space-s);padding-left:var(--goa-space-2xs);padding-right:var(--goa-space-2xs)}</style>`;
3569
3638
  init(this, {
3570
3639
  target: this.shadowRoot,
3571
3640
  props: attribute_to_object(this.attributes),
3572
3641
  customElement: true
3573
- }, instance$D, create_fragment$J, safe_not_equal, {
3642
+ }, instance$E, create_fragment$K, safe_not_equal, {
3574
3643
  mt: 0,
3575
3644
  mr: 1,
3576
3645
  mb: 2,
3577
3646
  ml: 3,
3647
+ size: 11,
3578
3648
  type: 4,
3579
3649
  heading: 5,
3580
3650
  testid: 6
@@ -3593,7 +3663,7 @@ class Callout extends SvelteElement {
3593
3663
  }
3594
3664
 
3595
3665
  static get observedAttributes() {
3596
- return ["mt", "mr", "mb", "ml", "type", "heading", "testid"];
3666
+ return ["mt", "mr", "mb", "ml", "size", "type", "heading", "testid"];
3597
3667
  }
3598
3668
 
3599
3669
  get mt() {
@@ -3640,6 +3710,17 @@ class Callout extends SvelteElement {
3640
3710
  flush();
3641
3711
  }
3642
3712
 
3713
+ get size() {
3714
+ return this.$$.ctx[11];
3715
+ }
3716
+
3717
+ set size(size) {
3718
+ this.$$set({
3719
+ size
3720
+ });
3721
+ flush();
3722
+ }
3723
+
3643
3724
  get type() {
3644
3725
  return this.$$.ctx[4];
3645
3726
  }
@@ -3678,7 +3759,7 @@ class Callout extends SvelteElement {
3678
3759
  customElements.define("goa-callout", Callout);
3679
3760
  /* libs/web-components/src/components/card-actions/CardActions.svelte generated by Svelte v3.51.0 */
3680
3761
 
3681
- function create_fragment$I(ctx) {
3762
+ function create_fragment$J(ctx) {
3682
3763
  let goa_card_content;
3683
3764
  return {
3684
3765
  c() {
@@ -3709,7 +3790,7 @@ class CardActions extends SvelteElement {
3709
3790
  target: this.shadowRoot,
3710
3791
  props: attribute_to_object(this.attributes),
3711
3792
  customElement: true
3712
- }, null, create_fragment$I, safe_not_equal, {}, null);
3793
+ }, null, create_fragment$J, safe_not_equal, {}, null);
3713
3794
 
3714
3795
  if (options) {
3715
3796
  if (options.target) {
@@ -3723,7 +3804,7 @@ class CardActions extends SvelteElement {
3723
3804
  customElements.define("goa-card-actions", CardActions);
3724
3805
  /* libs/web-components/src/components/card/Card.svelte generated by Svelte v3.51.0 */
3725
3806
 
3726
- function create_fragment$H(ctx) {
3807
+ function create_fragment$I(ctx) {
3727
3808
  let div;
3728
3809
  let slot;
3729
3810
  let div_style_value;
@@ -3802,7 +3883,7 @@ function create_fragment$H(ctx) {
3802
3883
  };
3803
3884
  }
3804
3885
 
3805
- function instance$C($$self, $$props, $$invalidate) {
3886
+ function instance$D($$self, $$props, $$invalidate) {
3806
3887
  let {
3807
3888
  elevation = 0
3808
3889
  } = $$props;
@@ -3850,7 +3931,7 @@ class Card extends SvelteElement {
3850
3931
  target: this.shadowRoot,
3851
3932
  props: attribute_to_object(this.attributes),
3852
3933
  customElement: true
3853
- }, instance$C, create_fragment$H, safe_not_equal, {
3934
+ }, instance$D, create_fragment$I, safe_not_equal, {
3854
3935
  elevation: 0,
3855
3936
  width: 1,
3856
3937
  height: 2,
@@ -3970,7 +4051,7 @@ class Card extends SvelteElement {
3970
4051
  customElements.define("goa-card", Card);
3971
4052
  /* libs/web-components/src/components/card-content/CardContent.svelte generated by Svelte v3.51.0 */
3972
4053
 
3973
- function create_fragment$G(ctx) {
4054
+ function create_fragment$H(ctx) {
3974
4055
  let div;
3975
4056
  return {
3976
4057
  c() {
@@ -4003,7 +4084,7 @@ class CardContent extends SvelteElement {
4003
4084
  target: this.shadowRoot,
4004
4085
  props: attribute_to_object(this.attributes),
4005
4086
  customElement: true
4006
- }, null, create_fragment$G, safe_not_equal, {}, null);
4087
+ }, null, create_fragment$H, safe_not_equal, {}, null);
4007
4088
 
4008
4089
  if (options) {
4009
4090
  if (options.target) {
@@ -4017,7 +4098,7 @@ class CardContent extends SvelteElement {
4017
4098
  customElements.define("goa-card-content", CardContent);
4018
4099
  /* libs/web-components/src/components/card-group/CardGroup.svelte generated by Svelte v3.51.0 */
4019
4100
 
4020
- function create_fragment$F(ctx) {
4101
+ function create_fragment$G(ctx) {
4021
4102
  let div;
4022
4103
  return {
4023
4104
  c() {
@@ -4050,7 +4131,7 @@ class CardGroup extends SvelteElement {
4050
4131
  target: this.shadowRoot,
4051
4132
  props: attribute_to_object(this.attributes),
4052
4133
  customElement: true
4053
- }, null, create_fragment$F, safe_not_equal, {}, null);
4134
+ }, null, create_fragment$G, safe_not_equal, {}, null);
4054
4135
 
4055
4136
  if (options) {
4056
4137
  if (options.target) {
@@ -4064,7 +4145,7 @@ class CardGroup extends SvelteElement {
4064
4145
  customElements.define("goa-card-group", CardGroup);
4065
4146
  /* libs/web-components/src/components/card-image/CardImage.svelte generated by Svelte v3.51.0 */
4066
4147
 
4067
- function create_fragment$E(ctx) {
4148
+ function create_fragment$F(ctx) {
4068
4149
  let div;
4069
4150
  return {
4070
4151
  c() {
@@ -4112,7 +4193,7 @@ function create_fragment$E(ctx) {
4112
4193
  };
4113
4194
  }
4114
4195
 
4115
- function instance$B($$self, $$props, $$invalidate) {
4196
+ function instance$C($$self, $$props, $$invalidate) {
4116
4197
  let {
4117
4198
  src
4118
4199
  } = $$props;
@@ -4136,7 +4217,7 @@ class CardImage extends SvelteElement {
4136
4217
  target: this.shadowRoot,
4137
4218
  props: attribute_to_object(this.attributes),
4138
4219
  customElement: true
4139
- }, instance$B, create_fragment$E, safe_not_equal, {
4220
+ }, instance$C, create_fragment$F, safe_not_equal, {
4140
4221
  src: 0,
4141
4222
  height: 1
4142
4223
  }, null);
@@ -4238,7 +4319,7 @@ function create_if_block$k(ctx) {
4238
4319
  };
4239
4320
  }
4240
4321
 
4241
- function create_fragment$D(ctx) {
4322
+ function create_fragment$E(ctx) {
4242
4323
  let label;
4243
4324
  let div0;
4244
4325
  let input;
@@ -4487,7 +4568,7 @@ function create_fragment$D(ctx) {
4487
4568
  };
4488
4569
  }
4489
4570
 
4490
- function instance$A($$self, $$props, $$invalidate) {
4571
+ function instance$B($$self, $$props, $$invalidate) {
4491
4572
  let isDisabled;
4492
4573
  let isError;
4493
4574
  let isChecked;
@@ -4602,7 +4683,7 @@ class Checkbox extends SvelteElement {
4602
4683
  target: this.shadowRoot,
4603
4684
  props: attribute_to_object(this.attributes),
4604
4685
  customElement: true
4605
- }, instance$A, create_fragment$D, safe_not_equal, {
4686
+ }, instance$B, create_fragment$E, safe_not_equal, {
4606
4687
  name: 0,
4607
4688
  checked: 14,
4608
4689
  text: 1,
@@ -4860,7 +4941,7 @@ function create_if_block$j(ctx) {
4860
4941
  };
4861
4942
  }
4862
4943
 
4863
- function create_fragment$C(ctx) {
4944
+ function create_fragment$D(ctx) {
4864
4945
  let div1;
4865
4946
  let t0;
4866
4947
  let div0;
@@ -5042,7 +5123,7 @@ function create_fragment$C(ctx) {
5042
5123
  };
5043
5124
  }
5044
5125
 
5045
- function instance$z($$self, $$props, $$invalidate) {
5126
+ function instance$A($$self, $$props, $$invalidate) {
5046
5127
  let {
5047
5128
  mt = null
5048
5129
  } = $$props;
@@ -5143,7 +5224,7 @@ class Chip extends SvelteElement {
5143
5224
  target: this.shadowRoot,
5144
5225
  props: attribute_to_object(this.attributes),
5145
5226
  customElement: true
5146
- }, instance$z, create_fragment$C, safe_not_equal, {
5227
+ }, instance$A, create_fragment$D, safe_not_equal, {
5147
5228
  mt: 0,
5148
5229
  mr: 1,
5149
5230
  mb: 2,
@@ -5768,7 +5849,7 @@ function create_if_block_2$8(ctx) {
5768
5849
  };
5769
5850
  }
5770
5851
 
5771
- function create_fragment$B(ctx) {
5852
+ function create_fragment$C(ctx) {
5772
5853
  let if_block_anchor;
5773
5854
  let current;
5774
5855
  let if_block =
@@ -5833,7 +5914,7 @@ function create_fragment$B(ctx) {
5833
5914
  };
5834
5915
  }
5835
5916
 
5836
- function instance$y($$self, $$props, $$invalidate) {
5917
+ function instance$z($$self, $$props, $$invalidate) {
5837
5918
  let isVisible;
5838
5919
  const [Variants, validateVariant] = typeValidator("Circular progress variant", ["fullscreen", "inline"]);
5839
5920
  const [Sizes, validateSize] = typeValidator("Button size", ["small", "large"]);
@@ -5890,7 +5971,7 @@ class CircularProgress extends SvelteElement {
5890
5971
  target: this.shadowRoot,
5891
5972
  props: attribute_to_object(this.attributes),
5892
5973
  customElement: true
5893
- }, instance$y, create_fragment$B, safe_not_equal, {
5974
+ }, instance$z, create_fragment$C, safe_not_equal, {
5894
5975
  variant: 6,
5895
5976
  size: 7,
5896
5977
  message: 0,
@@ -5974,7 +6055,7 @@ class CircularProgress extends SvelteElement {
5974
6055
  customElements.define("goa-circular-progress", CircularProgress);
5975
6056
  /* libs/web-components/src/components/container/Container.svelte generated by Svelte v3.51.0 */
5976
6057
 
5977
- function create_fragment$A(ctx) {
6058
+ function create_fragment$B(ctx) {
5978
6059
  let div3;
5979
6060
  let header;
5980
6061
  let div0;
@@ -6099,7 +6180,7 @@ function create_fragment$A(ctx) {
6099
6180
  };
6100
6181
  }
6101
6182
 
6102
- function instance$x($$self, $$props, $$invalidate) {
6183
+ function instance$y($$self, $$props, $$invalidate) {
6103
6184
  const [Types, validateType] = typeValidator("Container type", ["interactive", "info", "error", "success", "important", "non-interactive"]);
6104
6185
  const [Accents, validateAccent] = typeValidator("Container accent", ["thick", "thin", "filled"]);
6105
6186
  const [Paddings, validatePadding] = typeValidator("Container padding", ["relaxed", "compact"]);
@@ -6155,7 +6236,7 @@ class Container extends SvelteElement {
6155
6236
  target: this.shadowRoot,
6156
6237
  props: attribute_to_object(this.attributes),
6157
6238
  customElement: true
6158
- }, instance$x, create_fragment$A, safe_not_equal, {
6239
+ }, instance$y, create_fragment$B, safe_not_equal, {
6159
6240
  type: 0,
6160
6241
  accent: 1,
6161
6242
  padding: 2,
@@ -6275,7 +6356,7 @@ class Container extends SvelteElement {
6275
6356
  customElements.define("goa-container", Container);
6276
6357
  /* libs/web-components/src/components/details/Details.svelte generated by Svelte v3.51.0 */
6277
6358
 
6278
- function create_fragment$z(ctx) {
6359
+ function create_fragment$A(ctx) {
6279
6360
  let details;
6280
6361
  let summary;
6281
6362
  let goa_icon;
@@ -6375,7 +6456,7 @@ function create_fragment$z(ctx) {
6375
6456
  };
6376
6457
  }
6377
6458
 
6378
- function instance$w($$self, $$props, $$invalidate) {
6459
+ function instance$x($$self, $$props, $$invalidate) {
6379
6460
  let {
6380
6461
  heading
6381
6462
  } = $$props;
@@ -6435,7 +6516,7 @@ class Details extends SvelteElement {
6435
6516
  target: this.shadowRoot,
6436
6517
  props: attribute_to_object(this.attributes),
6437
6518
  customElement: true
6438
- }, instance$w, create_fragment$z, safe_not_equal, {
6519
+ }, instance$x, create_fragment$A, safe_not_equal, {
6439
6520
  heading: 0,
6440
6521
  mt: 1,
6441
6522
  mr: 2,
@@ -6519,7 +6600,7 @@ class Details extends SvelteElement {
6519
6600
  customElements.define("goa-details", Details);
6520
6601
  /* libs/web-components/src/components/divider/Divider.svelte generated by Svelte v3.51.0 */
6521
6602
 
6522
- function create_fragment$y(ctx) {
6603
+ function create_fragment$z(ctx) {
6523
6604
  let hr;
6524
6605
  let hr_style_value;
6525
6606
  return {
@@ -6578,7 +6659,7 @@ function create_fragment$y(ctx) {
6578
6659
  };
6579
6660
  }
6580
6661
 
6581
- function instance$v($$self, $$props, $$invalidate) {
6662
+ function instance$w($$self, $$props, $$invalidate) {
6582
6663
  let {
6583
6664
  testid = ""
6584
6665
  } = $$props;
@@ -6614,7 +6695,7 @@ class Divider extends SvelteElement {
6614
6695
  target: this.shadowRoot,
6615
6696
  props: attribute_to_object(this.attributes),
6616
6697
  customElement: true
6617
- }, instance$v, create_fragment$y, safe_not_equal, {
6698
+ }, instance$w, create_fragment$z, safe_not_equal, {
6618
6699
  testid: 0,
6619
6700
  mt: 1,
6620
6701
  mr: 2,
@@ -7429,7 +7510,7 @@ function create_each_block$6(ctx) {
7429
7510
  };
7430
7511
  }
7431
7512
 
7432
- function create_fragment$x(ctx) {
7513
+ function create_fragment$y(ctx) {
7433
7514
  let div;
7434
7515
  let div_data_testid_value;
7435
7516
  let div_style_value;
@@ -7560,7 +7641,7 @@ function parseValues(selectedValue) {
7560
7641
  return rawValues.map(val => `${val}`);
7561
7642
  }
7562
7643
 
7563
- function instance$u($$self, $$props, $$invalidate) {
7644
+ function instance$v($$self, $$props, $$invalidate) {
7564
7645
  let _disabled;
7565
7646
 
7566
7647
  let _error;
@@ -7957,7 +8038,7 @@ class Dropdown extends SvelteElement {
7957
8038
  target: this.shadowRoot,
7958
8039
  props: attribute_to_object(this.attributes),
7959
8040
  customElement: true
7960
- }, instance$u, create_fragment$x, safe_not_equal, {
8041
+ }, instance$v, create_fragment$y, safe_not_equal, {
7961
8042
  name: 0,
7962
8043
  arialabel: 1,
7963
8044
  value: 29,
@@ -8161,7 +8242,7 @@ class Dropdown extends SvelteElement {
8161
8242
  customElements.define("goa-dropdown", Dropdown);
8162
8243
  /* libs/web-components/src/components/dropdown/DropdownItem.svelte generated by Svelte v3.51.0 */
8163
8244
 
8164
- function create_fragment$w(ctx) {
8245
+ function create_fragment$x(ctx) {
8165
8246
  return {
8166
8247
  c() {
8167
8248
  this.c = noop;
@@ -8182,7 +8263,7 @@ class DropdownItem extends SvelteElement {
8182
8263
  target: this.shadowRoot,
8183
8264
  props: attribute_to_object(this.attributes),
8184
8265
  customElement: true
8185
- }, null, create_fragment$w, safe_not_equal, {}, null);
8266
+ }, null, create_fragment$x, safe_not_equal, {}, null);
8186
8267
 
8187
8268
  if (options) {
8188
8269
  if (options.target) {
@@ -8196,7 +8277,7 @@ class DropdownItem extends SvelteElement {
8196
8277
  customElements.define("goa-dropdown-item", DropdownItem);
8197
8278
  /* libs/web-components/src/components/focus-trap/FocusTrap.svelte generated by Svelte v3.51.0 */
8198
8279
 
8199
- function create_fragment$v(ctx) {
8280
+ function create_fragment$w(ctx) {
8200
8281
  let div;
8201
8282
  return {
8202
8283
  c() {
@@ -8256,7 +8337,7 @@ function isFocusable(element) {
8256
8337
  }
8257
8338
  }
8258
8339
 
8259
- function instance$t($$self, $$props, $$invalidate) {
8340
+ function instance$u($$self, $$props, $$invalidate) {
8260
8341
  let isActive;
8261
8342
  let {
8262
8343
  active
@@ -8425,7 +8506,7 @@ class FocusTrap extends SvelteElement {
8425
8506
  target: this.shadowRoot,
8426
8507
  props: attribute_to_object(this.attributes),
8427
8508
  customElement: true
8428
- }, instance$t, create_fragment$v, safe_not_equal, {
8509
+ }, instance$u, create_fragment$w, safe_not_equal, {
8429
8510
  active: 1
8430
8511
  }, null);
8431
8512
 
@@ -8480,7 +8561,7 @@ function create_if_block$g(ctx) {
8480
8561
  };
8481
8562
  }
8482
8563
 
8483
- function create_fragment$u(ctx) {
8564
+ function create_fragment$v(ctx) {
8484
8565
  let div5;
8485
8566
  let div4;
8486
8567
  let div0;
@@ -8623,7 +8704,7 @@ function create_fragment$u(ctx) {
8623
8704
  };
8624
8705
  }
8625
8706
 
8626
- function instance$s($$self, $$props, $$invalidate) {
8707
+ function instance$t($$self, $$props, $$invalidate) {
8627
8708
  let {
8628
8709
  maxcontentwidth = ""
8629
8710
  } = $$props;
@@ -8656,12 +8737,12 @@ function instance$s($$self, $$props, $$invalidate) {
8656
8737
  class Footer extends SvelteElement {
8657
8738
  constructor(options) {
8658
8739
  super();
8659
- this.shadowRoot.innerHTML = `<style>*{box-sizing:border-box}.app-footer{background-color:var(--goa-color-greyscale-100);border-top:2px solid var(--goa-color-greyscale-200);border-bottom:1rem solid var(--goa-color-brand-default)}.content{padding:2rem 1rem;margin:0 auto;width:min(var(--max-content-width), 100%)}@media(min-width: 640px){.content{padding:2rem 1.5rem}}.meta-section{display:flex;flex-direction:column;padding:1rem 0}.meta-section.with-meta-links{gap:2rem;justify-content:space-between}.meta-links{display:none}.with-meta-links .meta-links{display:block}.nav-links{display:flex;flex-direction:column;gap:2rem}.abgov{display:flex;flex-direction:column;justify-content:space-between;width:100%}@media(min-width: 640px){.meta-section{flex-direction:row;gap:2rem}.nav-links{flex-direction:row}.abgov{align-items:center;flex-direction:row-reverse}}.abgov.with-meta-links{gap:1rem;flex-direction:column;width:unset}@media(min-width: 640px){.abgov.with-meta-links{align-items:flex-end}}.goa-copyright{white-space:nowrap}a{color:var(--goa-color-text-secondary)}</style>`;
8740
+ this.shadowRoot.innerHTML = `<style>*{box-sizing:border-box}.app-footer{background-color:var(--goa-color-greyscale-100);border-top:2px solid var(--goa-color-greyscale-200);border-bottom:1rem solid var(--goa-color-brand-default)}.content{padding:2rem 1rem;margin:0 auto;width:min(var(--max-content-width), 100%)}@media(min-width: 640px){.content{padding:2rem 2rem}}@media(min-width: 1024px){.content{padding:2rem 4.5rem}}.meta-section{display:flex;flex-direction:column;padding:1rem 0}.meta-section.with-meta-links{gap:2rem;justify-content:space-between}.meta-links{display:none}.with-meta-links .meta-links{display:block}.nav-links{display:flex;flex-direction:column;gap:2rem}.abgov{display:flex;flex-direction:column;justify-content:space-between;width:100%}@media(min-width: 640px){.meta-section{flex-direction:row;gap:2rem}.nav-links{flex-direction:row}.abgov{align-items:center;flex-direction:row-reverse}}.abgov.with-meta-links{gap:1rem;flex-direction:column;width:unset}@media(min-width: 640px){.abgov.with-meta-links{align-items:flex-end}}.goa-copyright{white-space:nowrap}a{color:var(--goa-color-text-secondary)}</style>`;
8660
8741
  init(this, {
8661
8742
  target: this.shadowRoot,
8662
8743
  props: attribute_to_object(this.attributes),
8663
8744
  customElement: true
8664
- }, instance$s, create_fragment$u, safe_not_equal, {
8745
+ }, instance$t, create_fragment$v, safe_not_equal, {
8665
8746
  maxcontentwidth: 0
8666
8747
  }, null);
8667
8748
 
@@ -8751,7 +8832,7 @@ function create_each_block$5(ctx) {
8751
8832
  };
8752
8833
  }
8753
8834
 
8754
- function create_fragment$t(ctx) {
8835
+ function create_fragment$u(ctx) {
8755
8836
  let section;
8756
8837
  let div;
8757
8838
  let t;
@@ -8839,7 +8920,7 @@ function create_fragment$t(ctx) {
8839
8920
  };
8840
8921
  }
8841
8922
 
8842
- function instance$r($$self, $$props, $$invalidate) {
8923
+ function instance$s($$self, $$props, $$invalidate) {
8843
8924
  let rootEl;
8844
8925
  let children = [];
8845
8926
  onMount(async () => {
@@ -8874,7 +8955,7 @@ class FooterMetaSection extends SvelteElement {
8874
8955
  target: this.shadowRoot,
8875
8956
  props: attribute_to_object(this.attributes),
8876
8957
  customElement: true
8877
- }, instance$r, create_fragment$t, safe_not_equal, {}, null);
8958
+ }, instance$s, create_fragment$u, safe_not_equal, {}, null);
8878
8959
 
8879
8960
  if (options) {
8880
8961
  if (options.target) {
@@ -8984,7 +9065,7 @@ function create_each_block$4(ctx) {
8984
9065
  };
8985
9066
  }
8986
9067
 
8987
- function create_fragment$s(ctx) {
9068
+ function create_fragment$t(ctx) {
8988
9069
  let section;
8989
9070
  let t0;
8990
9071
  let div;
@@ -9131,7 +9212,7 @@ function create_fragment$s(ctx) {
9131
9212
  };
9132
9213
  }
9133
9214
 
9134
- function instance$q($$self, $$props, $$invalidate) {
9215
+ function instance$r($$self, $$props, $$invalidate) {
9135
9216
  let {
9136
9217
  heading = ""
9137
9218
  } = $$props;
@@ -9177,12 +9258,12 @@ function instance$q($$self, $$props, $$invalidate) {
9177
9258
  class FooterNavSection extends SvelteElement {
9178
9259
  constructor(options) {
9179
9260
  super();
9180
- this.shadowRoot.innerHTML = `<style>:host{flex:auto}.title{font-size:var(--goa-font-size-7);line-height:var(--goa-line-height-4)}.hidden{display:none}.links{display:block;list-style-type:none;padding-left:0}@media(min-width: 720px){.links{display:var(--narrow-display-type);list-style-type:none;padding-left:0;flex-direction:column;column-count:var(--narrow-column-count)}}@media(min-width: 1024px){.links{display:var(--wide-display-type);list-style-type:none;padding-left:0;flex-direction:column;column-count:var(--wide-column-count)}}li{padding:0.75rem 0}a{color:var(--goa-color-text-default)}</style>`;
9261
+ this.shadowRoot.innerHTML = `<style>:host{flex:auto}.title{font-size:var(--goa-font-size-7);line-height:var(--goa-line-height-4);padding-bottom:var(--goa-space-l)}.hidden{display:none}.links{display:block;list-style-type:none;padding-left:0}@media(min-width: 720px){.links{display:var(--narrow-display-type);list-style-type:none;padding-left:0;flex-direction:column;column-count:var(--narrow-column-count)}}@media(min-width: 1024px){.links{display:var(--wide-display-type);list-style-type:none;padding-left:0;flex-direction:column;column-count:var(--wide-column-count)}}li{padding:0.75rem 0}a{color:var(--goa-color-text-default)}</style>`;
9181
9262
  init(this, {
9182
9263
  target: this.shadowRoot,
9183
9264
  props: attribute_to_object(this.attributes),
9184
9265
  customElement: true
9185
- }, instance$q, create_fragment$s, safe_not_equal, {
9266
+ }, instance$r, create_fragment$t, safe_not_equal, {
9186
9267
  heading: 0,
9187
9268
  maxcolumncount: 1
9188
9269
  }, null);
@@ -9412,7 +9493,7 @@ function create_if_block$e(ctx) {
9412
9493
  };
9413
9494
  }
9414
9495
 
9415
- function create_fragment$r(ctx) {
9496
+ function create_fragment$s(ctx) {
9416
9497
  let div1;
9417
9498
  let t0;
9418
9499
  let div0;
@@ -9549,7 +9630,7 @@ function create_fragment$r(ctx) {
9549
9630
  };
9550
9631
  }
9551
9632
 
9552
- function instance$p($$self, $$props, $$invalidate) {
9633
+ function instance$q($$self, $$props, $$invalidate) {
9553
9634
  const [REQUIREMENT_TYPES, validateRequirementType] = typeValidator("Requirement type", ["optional", "required"], false);
9554
9635
  let {
9555
9636
  testid = ""
@@ -9605,7 +9686,7 @@ class FormItem extends SvelteElement {
9605
9686
  target: this.shadowRoot,
9606
9687
  props: attribute_to_object(this.attributes),
9607
9688
  customElement: true
9608
- }, instance$p, create_fragment$r, safe_not_equal, {
9689
+ }, instance$q, create_fragment$s, safe_not_equal, {
9609
9690
  testid: 0,
9610
9691
  mt: 1,
9611
9692
  mr: 2,
@@ -9737,7 +9818,7 @@ class FormItem extends SvelteElement {
9737
9818
  customElements.define("goa-form-item", FormItem);
9738
9819
  /* libs/web-components/src/components/grid/Grid.svelte generated by Svelte v3.51.0 */
9739
9820
 
9740
- function create_fragment$q(ctx) {
9821
+ function create_fragment$r(ctx) {
9741
9822
  let div;
9742
9823
  let slot;
9743
9824
  let div_style_value;
@@ -9805,7 +9886,7 @@ function create_fragment$q(ctx) {
9805
9886
  };
9806
9887
  }
9807
9888
 
9808
- function instance$o($$self, $$props, $$invalidate) {
9889
+ function instance$p($$self, $$props, $$invalidate) {
9809
9890
  let {
9810
9891
  gap = "m"
9811
9892
  } = $$props;
@@ -9850,7 +9931,7 @@ class Grid extends SvelteElement {
9850
9931
  target: this.shadowRoot,
9851
9932
  props: attribute_to_object(this.attributes),
9852
9933
  customElement: true
9853
- }, instance$o, create_fragment$q, safe_not_equal, {
9934
+ }, instance$p, create_fragment$r, safe_not_equal, {
9854
9935
  gap: 0,
9855
9936
  minchildwidth: 1,
9856
9937
  mt: 2,
@@ -9946,7 +10027,7 @@ class Grid extends SvelteElement {
9946
10027
  customElements.define("goa-grid", Grid);
9947
10028
  /* libs/web-components/src/components/hero-banner/HeroBanner.svelte generated by Svelte v3.51.0 */
9948
10029
 
9949
- function create_fragment$p(ctx) {
10030
+ function create_fragment$q(ctx) {
9950
10031
  let div1;
9951
10032
  let goa_page_block;
9952
10033
  let h1;
@@ -9955,6 +10036,7 @@ function create_fragment$p(ctx) {
9955
10036
  let div0;
9956
10037
  let t2;
9957
10038
  let slot1;
10039
+ let goa_page_block_width_value;
9958
10040
  return {
9959
10041
  c() {
9960
10042
  div1 = element("div");
@@ -9972,7 +10054,9 @@ function create_fragment$p(ctx) {
9972
10054
  attr(div0, "class", "goa-hero-banner-content");
9973
10055
  attr(div0, "role", "note");
9974
10056
  attr(slot1, "name", "actions");
9975
- set_custom_element_data(goa_page_block, "width", "full");
10057
+ set_custom_element_data(goa_page_block, "width", goa_page_block_width_value =
10058
+ /*maxcontentwidth*/
10059
+ ctx[3] || "full");
9976
10060
  attr(div1, "class", "goa-hero");
9977
10061
  attr(div1, "data-testid", "background");
9978
10062
  set_style(div1, "background-image", "linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.40) 40%, rgba(0, 0, 0, 0.6) 100%), url(" +
@@ -10004,6 +10088,14 @@ function create_fragment$p(ctx) {
10004
10088
  /*heading*/
10005
10089
  ctx[0]);
10006
10090
 
10091
+ if (dirty &
10092
+ /*maxcontentwidth*/
10093
+ 8 && goa_page_block_width_value !== (goa_page_block_width_value =
10094
+ /*maxcontentwidth*/
10095
+ ctx[3] || "full")) {
10096
+ set_custom_element_data(goa_page_block, "width", goa_page_block_width_value);
10097
+ }
10098
+
10007
10099
  if (dirty &
10008
10100
  /*backgroundurl*/
10009
10101
  2) {
@@ -10031,7 +10123,7 @@ function create_fragment$p(ctx) {
10031
10123
  };
10032
10124
  }
10033
10125
 
10034
- function instance$n($$self, $$props, $$invalidate) {
10126
+ function instance$o($$self, $$props, $$invalidate) {
10035
10127
  let {
10036
10128
  heading
10037
10129
  } = $$props;
@@ -10041,14 +10133,18 @@ function instance$n($$self, $$props, $$invalidate) {
10041
10133
  let {
10042
10134
  minheight = "600px"
10043
10135
  } = $$props;
10136
+ let {
10137
+ maxcontentwidth = "100%"
10138
+ } = $$props;
10044
10139
 
10045
10140
  $$self.$$set = $$props => {
10046
10141
  if ('heading' in $$props) $$invalidate(0, heading = $$props.heading);
10047
10142
  if ('backgroundurl' in $$props) $$invalidate(1, backgroundurl = $$props.backgroundurl);
10048
10143
  if ('minheight' in $$props) $$invalidate(2, minheight = $$props.minheight);
10144
+ if ('maxcontentwidth' in $$props) $$invalidate(3, maxcontentwidth = $$props.maxcontentwidth);
10049
10145
  };
10050
10146
 
10051
- return [heading, backgroundurl, minheight];
10147
+ return [heading, backgroundurl, minheight, maxcontentwidth];
10052
10148
  }
10053
10149
 
10054
10150
  class HeroBanner extends SvelteElement {
@@ -10059,10 +10155,11 @@ class HeroBanner extends SvelteElement {
10059
10155
  target: this.shadowRoot,
10060
10156
  props: attribute_to_object(this.attributes),
10061
10157
  customElement: true
10062
- }, instance$n, create_fragment$p, safe_not_equal, {
10158
+ }, instance$o, create_fragment$q, safe_not_equal, {
10063
10159
  heading: 0,
10064
10160
  backgroundurl: 1,
10065
- minheight: 2
10161
+ minheight: 2,
10162
+ maxcontentwidth: 3
10066
10163
  }, null);
10067
10164
 
10068
10165
  if (options) {
@@ -10078,7 +10175,7 @@ class HeroBanner extends SvelteElement {
10078
10175
  }
10079
10176
 
10080
10177
  static get observedAttributes() {
10081
- return ["heading", "backgroundurl", "minheight"];
10178
+ return ["heading", "backgroundurl", "minheight", "maxcontentwidth"];
10082
10179
  }
10083
10180
 
10084
10181
  get heading() {
@@ -10114,12 +10211,23 @@ class HeroBanner extends SvelteElement {
10114
10211
  flush();
10115
10212
  }
10116
10213
 
10214
+ get maxcontentwidth() {
10215
+ return this.$$.ctx[3];
10216
+ }
10217
+
10218
+ set maxcontentwidth(maxcontentwidth) {
10219
+ this.$$set({
10220
+ maxcontentwidth
10221
+ });
10222
+ flush();
10223
+ }
10224
+
10117
10225
  }
10118
10226
 
10119
10227
  customElements.define("goa-hero-banner", HeroBanner);
10120
10228
  /* libs/web-components/src/components/icon-button/IconButton.svelte generated by Svelte v3.51.0 */
10121
10229
 
10122
- function create_fragment$o(ctx) {
10230
+ function create_fragment$p(ctx) {
10123
10231
  let button;
10124
10232
  let goa_icon;
10125
10233
  let button_style_value;
@@ -10291,7 +10399,7 @@ function handleClick(e) {
10291
10399
  }));
10292
10400
  }
10293
10401
 
10294
- function instance$m($$self, $$props, $$invalidate) {
10402
+ function instance$n($$self, $$props, $$invalidate) {
10295
10403
  let css;
10296
10404
  let isDisabled;
10297
10405
  let isInverted;
@@ -10396,7 +10504,7 @@ class IconButton extends SvelteElement {
10396
10504
  target: this.shadowRoot,
10397
10505
  props: attribute_to_object(this.attributes),
10398
10506
  customElement: true
10399
- }, instance$m, create_fragment$o, safe_not_equal, {
10507
+ }, instance$n, create_fragment$p, safe_not_equal, {
10400
10508
  icon: 0,
10401
10509
  size: 1,
10402
10510
  theme: 2,
@@ -10701,7 +10809,7 @@ function create_if_block_1$7(ctx) {
10701
10809
  };
10702
10810
  }
10703
10811
 
10704
- function create_fragment$n(ctx) {
10812
+ function create_fragment$o(ctx) {
10705
10813
  let div;
10706
10814
  let div_class_value;
10707
10815
  let div_style_value;
@@ -10837,7 +10945,7 @@ function create_fragment$n(ctx) {
10837
10945
  };
10838
10946
  }
10839
10947
 
10840
- function instance$l($$self, $$props, $$invalidate) {
10948
+ function instance$m($$self, $$props, $$invalidate) {
10841
10949
  let isInverted;
10842
10950
  let {
10843
10951
  mt = null
@@ -10881,7 +10989,7 @@ function instance$l($$self, $$props, $$invalidate) {
10881
10989
 
10882
10990
  const _iconOverrides = {
10883
10991
  pencil: `<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M16.1442 5.47956L12.5355 1.87088L13.7196 0.686776C14.0391 0.367257 14.4385 0.212197 14.9178 0.221594C15.3971 0.230992 15.7965 0.39545 16.116 0.714969L17.3283 1.92726C17.6478 2.24678 17.8076 2.64148 17.8076 3.11136C17.8076 3.58124 17.6478 3.97594 17.3283 4.29546L16.1442 5.47956ZM1.03951 17.8424C0.795173 17.8424 0.593125 17.7626 0.433365 17.6028C0.273605 17.443 0.193726 17.241 0.193726 16.9966V14.5721C0.193726 14.4593 0.212521 14.356 0.250112 14.262C0.287702 14.168 0.353485 14.074 0.447461 13.9801L11.4689 2.93435L15.0776 6.54303L4.05615 17.5887C3.96217 17.6827 3.8682 17.7485 3.77422 17.7861C3.68024 17.8236 3.57687 17.8424 3.4641 17.8424H1.03951Z" fill="currentcolor"/> </svg>`,
10884
- checkmark: `<svg width="18" height="14" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M6.20129 11.5368L15.9974 0.341265C16.3611 -0.0743717 16.9929 -0.116489 17.4085 0.247193C17.8241 0.610875 17.8663 1.24264 17.5026 1.65827L7.00258 13.6583C6.82032 13.8666 6.5599 13.99 6.28328 13.9992C6.00666 14.0084 5.7386 13.9026 5.54289 13.7069L1.04289 9.20688C0.652369 8.81635 0.652369 8.18319 1.04289 7.79266C1.43342 7.40214 2.06658 7.40214 2.45711 7.79266L6.20129 11.5368Z" fill="#333333"/> </svg>`,
10992
+ checkmark: `<svg width="18" height="14" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M6.20129 11.5368L15.9974 0.341265C16.3611 -0.0743717 16.9929 -0.116489 17.4085 0.247193C17.8241 0.610875 17.8663 1.24264 17.5026 1.65827L7.00258 13.6583C6.82032 13.8666 6.5599 13.99 6.28328 13.9992C6.00666 14.0084 5.7386 13.9026 5.54289 13.7069L1.04289 9.20688C0.652369 8.81635 0.652369 8.18319 1.04289 7.79266C1.43342 7.40214 2.06658 7.40214 2.45711 7.79266L6.20129 11.5368Z" fill="currentcolor"/> </svg>`,
10885
10993
  remove: `<svg width="16" height="20" viewBox="0 0 16 1" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M1.5 -0.000244141C0.947715 -0.000244141 0.5 0.447471 0.5 0.999756C0.5 1.55204 0.947715 1.99976 1.5 1.99976H15C15.5523 1.99976 16 1.55204 16 0.999756C16 0.447471 15.5523 -0.000244141 15 -0.000244141H1.5Z" fill="currentcolor"/> </svg>`,
10886
10994
  "goa-file": `<svg width="39" height="48" viewBox="0 0 39 48" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_1357_108691)"> <path d="M38.741 14C38.541 13.07 38.081 12.22 37.401 11.54L36.861 11L27.861 2L27.321 1.46C26.641 0.78 25.781 0.32 24.861 0.12C24.511 0.04 24.151 0 23.791 0H5.86096C3.10096 0 0.860962 2.24 0.860962 5V43C0.860962 45.76 3.10096 48 5.86096 48H33.861C36.621 48 38.861 45.76 38.861 43V15.07C38.861 14.71 38.811 14.35 38.741 14ZM35.041 12H29.871C28.221 12 26.871 10.65 26.871 9V3.83L35.041 12ZM36.871 43C36.871 44.65 35.521 46 33.871 46H5.87097C4.22097 46 2.87097 44.65 2.87097 43V5C2.87097 3.35 4.22097 2 5.87097 2H23.801C24.171 2 24.531 2.07 24.871 2.2V9C24.871 11.76 27.111 14 29.871 14H36.671C36.801 14.34 36.871 14.7 36.871 15.07V43Z" fill="currentcolor"/> </g> <defs> <clipPath id="clip0_1357_108691"><rect width="38" height="48" fill="white" transform="translate(0.861328)"/></clipPath></defs></svg>`,
10887
10995
  "goa-text": `<svg width="39" height="48" viewBox="0 0 39 48" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M38.7953 14C38.5953 13.07 38.1353 12.22 37.4553 11.54L36.9153 11L27.9153 2L27.3753 1.46C26.6953 0.78 25.8353 0.32 24.9153 0.12C24.5653 0.04 24.2053 0 23.8453 0H5.91528C3.15528 0 0.915283 2.24 0.915283 5V43C0.915283 45.76 3.15528 48 5.91528 48H33.9153C36.6753 48 38.9153 45.76 38.9153 43V15.07C38.9153 14.71 38.8653 14.35 38.7953 14ZM35.0953 12H29.9253C28.2753 12 26.9253 10.65 26.9253 9V3.83L35.0953 12ZM36.9253 43C36.9253 44.65 35.5753 46 33.9253 46H5.91528C4.26528 46 2.91528 44.65 2.91528 43V5C2.91528 3.35 4.26528 2 5.91528 2H23.8453C24.2153 2 24.5753 2.07 24.9153 2.2V9C24.9153 11.76 27.1553 14 29.9153 14H36.7153C36.8453 14.34 36.9153 14.7 36.9153 15.07V43H36.9253Z" fill="currentcolor"/> <path d="M27.9153 34H11.9153C11.363 34 10.9153 34.4477 10.9153 35C10.9153 35.5523 11.363 36 11.9153 36H27.9153C28.4676 36 28.9153 35.5523 28.9153 35C28.9153 34.4477 28.4676 34 27.9153 34Z" fill="currentcolor"/> <path d="M27.9153 26H11.9153C11.363 26 10.9153 26.4477 10.9153 27C10.9153 27.5523 11.363 28 11.9153 28H27.9153C28.4676 28 28.9153 27.5523 28.9153 27C28.9153 26.4477 28.4676 26 27.9153 26Z" fill="currentcolor"/> </svg>`,
@@ -10925,12 +11033,12 @@ function instance$l($$self, $$props, $$invalidate) {
10925
11033
  class Icon extends SvelteElement {
10926
11034
  constructor(options) {
10927
11035
  super();
10928
- this.shadowRoot.innerHTML = `<style>:host{display:inline-flex;align-items:center}ion-icon{pointer-events:none;width:100%;height:100%}.goa-icon{fill:var(--fill-color);color:var(--fill-color);opacity:var(--opacity);display:inline-flex;align-items:center;justify-content:center}.goa-icon:hover ion-icon{fill:var(--hover-color);color:var(--hover-color)}.goa-icon--small{width:1.25rem;height:1.25rem}.goa-icon--medium{width:1.5rem;height:1.5rem}.goa-icon--large{width:2rem;height:2rem}.goa-icon--xlarge{width:2.5rem;height:2.5rem}.goa-icon:has(.icon-override){height:fit-content}.icon-override{display:flex;flex-direction:column;align-items:center}.icon-override>*{fill:var(--fill-color, var(--goa-color-interactive-default));color:var(--fill-color, var(--goa-color-interactive-default))}.inverted *{color:#fff;fill:#fff}</style>`;
11036
+ this.shadowRoot.innerHTML = `<style>:host{display:inline-flex;align-items:center}ion-icon{pointer-events:none;width:100%;height:100%}.goa-icon{fill:var(--fill-color);color:var(--fill-color);opacity:var(--opacity);display:inline-flex;align-items:center;justify-content:center}.goa-icon:hover ion-icon{fill:var(--hover-color);color:var(--hover-color)}.goa-icon--small{width:1.25rem;height:1.25rem}.goa-icon--medium{width:1.5rem;height:1.5rem}.goa-icon--large{width:2rem;height:2rem}.goa-icon--xlarge{width:2.5rem;height:2.5rem}.goa-icon:has(.icon-override){height:fit-content}.icon-override{display:flex;flex-direction:column;align-items:center}.inverted *{color:#fff;fill:#fff}</style>`;
10929
11037
  init(this, {
10930
11038
  target: this.shadowRoot,
10931
11039
  props: attribute_to_object(this.attributes),
10932
11040
  customElement: true
10933
- }, instance$l, create_fragment$n, safe_not_equal, {
11041
+ }, instance$m, create_fragment$o, safe_not_equal, {
10934
11042
  mt: 0,
10935
11043
  mr: 1,
10936
11044
  mb: 2,
@@ -11299,7 +11407,7 @@ function create_if_block$c(ctx) {
11299
11407
  };
11300
11408
  }
11301
11409
 
11302
- function create_fragment$m(ctx) {
11410
+ function create_fragment$n(ctx) {
11303
11411
  let div3;
11304
11412
  let div2;
11305
11413
  let t0;
@@ -11780,7 +11888,7 @@ function doClick() {
11780
11888
  }));
11781
11889
  }
11782
11890
 
11783
- function instance$k($$self, $$props, $$invalidate) {
11891
+ function instance$l($$self, $$props, $$invalidate) {
11784
11892
  let handlesTrailingIconClick;
11785
11893
  let isFocused;
11786
11894
  let isReadonly;
@@ -12024,7 +12132,7 @@ class Input extends SvelteElement {
12024
12132
  target: this.shadowRoot,
12025
12133
  props: attribute_to_object(this.attributes),
12026
12134
  customElement: true
12027
- }, instance$k, create_fragment$m, safe_not_equal, {
12135
+ }, instance$l, create_fragment$n, safe_not_equal, {
12028
12136
  type: 1,
12029
12137
  name: 2,
12030
12138
  value: 0,
@@ -12361,35 +12469,25 @@ customElements.define("goa-input", Input);
12361
12469
  /* libs/web-components/src/components/microsite-header/MicrositeHeader.svelte generated by Svelte v3.51.0 */
12362
12470
 
12363
12471
  function create_if_block_3$5(ctx) {
12364
- let div0;
12365
- let t0;
12366
- let div1;
12472
+ let div;
12367
12473
  return {
12368
12474
  c() {
12369
- div0 = element("div");
12370
- div0.innerHTML = `<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 26C20.1797 26 26 20.1797 26 13C26 5.8203 20.1797 0 13 0C5.8203 0 0 5.8203 0 13C0 20.1797 5.8203 26 13 26Z" fill="#00AAD2"></path><path d="M16.9764 17.7174C15.942 17.3358 14.9325 16.8896 13.9539 16.3817C14.8446 16.0551 15.7131 15.6708 16.5539 15.2312C16.6398 16.0688 16.7831 16.8995 16.9829 17.7174H16.9764ZM22.5339 7.42143C22.1016 7.36618 22.3259 7.56931 22.2089 8.13968C21.863 9.3075 21.2806 10.3917 20.4978 11.3248C19.7151 12.258 18.7487 13.0201 17.6589 13.5639C17.3972 10.9368 17.5336 8.28529 18.0635 5.69893C18.5104 4.07393 19.0385 4.3778 18.3885 4.03818C17.6946 3.68068 16.9471 4.15356 16.3443 5.35931C14.4174 9.81946 11.7695 13.932 8.50689 17.5322C7.96404 18.2422 7.16875 18.7161 6.28592 18.8556C5.40309 18.9951 4.50044 18.7894 3.76514 18.2813C3.43039 17.9986 3.30689 18.4357 3.72289 18.8826C4.47366 19.5882 5.47211 19.9699 6.50216 19.945C7.53222 19.92 8.51102 19.4905 9.22677 18.7493C12.0405 15.3939 14.429 11.7038 16.3378 7.76268C16.1901 9.91268 16.2243 12.0713 16.4401 14.2156C15.4158 14.7181 14.3475 15.1256 13.2486 15.4327C12.6181 15.5952 12.2281 15.8552 12.2168 16.1461C12.2054 16.4711 12.6279 16.7359 13.2405 17.0252C14.3293 17.5419 17.5191 19.0499 18.3056 19.5066C18.9784 19.8966 19.3066 19.5927 19.5065 19.1702C19.7665 18.6209 19.0531 18.3041 18.369 18.0961C18.0632 16.9353 17.8555 15.7508 17.7483 14.5552C19.4404 13.5939 20.8636 12.2226 21.8871 10.5674C22.1817 9.98406 22.4001 9.36529 22.5371 8.7263C22.6338 8.3321 22.6602 7.92393 22.6151 7.52056C22.6151 7.52056 22.6038 7.43281 22.5371 7.42468" fill="white"></path></svg>`;
12371
- t0 = space();
12372
- div1 = element("div");
12373
- div1.innerHTML = `An official site of the <a href="https://www.alberta.ca/index.aspx">Alberta Government</a>`;
12374
- attr(div0, "class", "service-type service-type--live");
12375
- attr(div1, "data-testid", "type");
12376
- attr(div1, "class", "site-text");
12475
+ div = element("div");
12476
+ div.innerHTML = `An official site of the <a href="https://www.alberta.ca/index.aspx">Alberta Government</a>`;
12477
+ attr(div, "data-testid", "type");
12478
+ attr(div, "class", "site-text");
12377
12479
  },
12378
12480
 
12379
12481
  m(target, anchor) {
12380
- insert(target, div0, anchor);
12381
- insert(target, t0, anchor);
12382
- insert(target, div1, anchor);
12482
+ insert(target, div, anchor);
12383
12483
  },
12384
12484
 
12385
12485
  d(detaching) {
12386
- if (detaching) detach(div0);
12387
- if (detaching) detach(t0);
12388
- if (detaching) detach(div1);
12486
+ if (detaching) detach(div);
12389
12487
  }
12390
12488
 
12391
12489
  };
12392
- } // (41:2) {#if ["alpha", "beta"].includes(type)}
12490
+ } // (31:4) {#if ["alpha", "beta"].includes(type)}
12393
12491
 
12394
12492
 
12395
12493
  function create_if_block_1$5(ctx) {
@@ -12416,7 +12514,7 @@ function create_if_block_1$5(ctx) {
12416
12514
  t2 = text("This is a new ");
12417
12515
  a = element("a");
12418
12516
  a.textContent = "Alberta Government";
12419
- t4 = text(" service\n ");
12517
+ t4 = text(" service\n ");
12420
12518
  if (if_block) if_block.c();
12421
12519
  attr(div0, "data-testid", "type");
12422
12520
  attr(div0, "class", div0_class_value = "service-type service-type--" +
@@ -12477,7 +12575,7 @@ function create_if_block_1$5(ctx) {
12477
12575
  }
12478
12576
 
12479
12577
  };
12480
- } // (50:6) {#if feedbackurl}
12578
+ } // (40:8) {#if feedbackurl}
12481
12579
 
12482
12580
 
12483
12581
  function create_if_block_2$5(ctx) {
@@ -12519,7 +12617,7 @@ function create_if_block_2$5(ctx) {
12519
12617
  }
12520
12618
 
12521
12619
  };
12522
- } // (56:2) {#if version}
12620
+ } // (46:4) {#if version}
12523
12621
 
12524
12622
 
12525
12623
  function create_if_block$b(ctx) {
@@ -12555,15 +12653,17 @@ function create_if_block$b(ctx) {
12555
12653
  };
12556
12654
  }
12557
12655
 
12558
- function create_fragment$l(ctx) {
12656
+ function create_fragment$m(ctx) {
12559
12657
  let header;
12658
+ let div1;
12560
12659
  let t0;
12561
12660
  let show_if = ["alpha", "beta"].includes(
12562
12661
  /*type*/
12563
12662
  ctx[0]);
12564
12663
  let t1;
12565
- let div;
12664
+ let div0;
12566
12665
  let t2;
12666
+ let header_style_value;
12567
12667
  let if_block0 =
12568
12668
  /*type*/
12569
12669
  ctx[0] === "live" && create_if_block_3$5();
@@ -12574,27 +12674,33 @@ function create_fragment$l(ctx) {
12574
12674
  return {
12575
12675
  c() {
12576
12676
  header = element("header");
12677
+ div1 = element("div");
12577
12678
  if (if_block0) if_block0.c();
12578
12679
  t0 = space();
12579
12680
  if (if_block1) if_block1.c();
12580
12681
  t1 = space();
12581
- div = element("div");
12682
+ div0 = element("div");
12582
12683
  t2 = space();
12583
12684
  if (if_block2) if_block2.c();
12584
12685
  this.c = noop;
12585
- attr(div, "class", "spacer");
12686
+ attr(div0, "class", "spacer");
12687
+ attr(div1, "class", "content-container");
12586
12688
  attr(header, "class", "goa-official-site-header");
12689
+ attr(header, "style", header_style_value = `--max-content-width: ${
12690
+ /*maxcontentwidth*/
12691
+ ctx[3]}`);
12587
12692
  },
12588
12693
 
12589
12694
  m(target, anchor) {
12590
12695
  insert(target, header, anchor);
12591
- if (if_block0) if_block0.m(header, null);
12592
- append(header, t0);
12593
- if (if_block1) if_block1.m(header, null);
12594
- append(header, t1);
12595
- append(header, div);
12596
- append(header, t2);
12597
- if (if_block2) if_block2.m(header, null);
12696
+ append(header, div1);
12697
+ if (if_block0) if_block0.m(div1, null);
12698
+ append(div1, t0);
12699
+ if (if_block1) if_block1.m(div1, null);
12700
+ append(div1, t1);
12701
+ append(div1, div0);
12702
+ append(div1, t2);
12703
+ if (if_block2) if_block2.m(div1, null);
12598
12704
  },
12599
12705
 
12600
12706
  p(ctx, [dirty]) {
@@ -12604,7 +12710,7 @@ function create_fragment$l(ctx) {
12604
12710
  if (if_block0) ;else {
12605
12711
  if_block0 = create_if_block_3$5();
12606
12712
  if_block0.c();
12607
- if_block0.m(header, t0);
12713
+ if_block0.m(div1, t0);
12608
12714
  }
12609
12715
  } else if (if_block0) {
12610
12716
  if_block0.d(1);
@@ -12623,7 +12729,7 @@ function create_fragment$l(ctx) {
12623
12729
  } else {
12624
12730
  if_block1 = create_if_block_1$5(ctx);
12625
12731
  if_block1.c();
12626
- if_block1.m(header, t1);
12732
+ if_block1.m(div1, t1);
12627
12733
  }
12628
12734
  } else if (if_block1) {
12629
12735
  if_block1.d(1);
@@ -12638,12 +12744,20 @@ function create_fragment$l(ctx) {
12638
12744
  } else {
12639
12745
  if_block2 = create_if_block$b(ctx);
12640
12746
  if_block2.c();
12641
- if_block2.m(header, null);
12747
+ if_block2.m(div1, null);
12642
12748
  }
12643
12749
  } else if (if_block2) {
12644
12750
  if_block2.d(1);
12645
12751
  if_block2 = null;
12646
12752
  }
12753
+
12754
+ if (dirty &
12755
+ /*maxcontentwidth*/
12756
+ 8 && header_style_value !== (header_style_value = `--max-content-width: ${
12757
+ /*maxcontentwidth*/
12758
+ ctx[3]}`)) {
12759
+ attr(header, "style", header_style_value);
12760
+ }
12647
12761
  },
12648
12762
 
12649
12763
  i: noop,
@@ -12664,7 +12778,7 @@ function capitalize(val) {
12664
12778
  return val[0].toUpperCase() + val.slice(1);
12665
12779
  }
12666
12780
 
12667
- function instance$j($$self, $$props, $$invalidate) {
12781
+ function instance$k($$self, $$props, $$invalidate) {
12668
12782
  const [Types, validateType] = typeValidator("Microsite header type", ["live", "alpha", "beta"], true);
12669
12783
  let {
12670
12784
  type
@@ -12675,6 +12789,9 @@ function instance$j($$self, $$props, $$invalidate) {
12675
12789
  let {
12676
12790
  feedbackurl = ""
12677
12791
  } = $$props;
12792
+ let {
12793
+ maxcontentwidth = "100%"
12794
+ } = $$props;
12678
12795
  onMount(() => {
12679
12796
  setTimeout(() => validateType(type), 1);
12680
12797
  });
@@ -12683,23 +12800,25 @@ function instance$j($$self, $$props, $$invalidate) {
12683
12800
  if ('type' in $$props) $$invalidate(0, type = $$props.type);
12684
12801
  if ('version' in $$props) $$invalidate(1, version = $$props.version);
12685
12802
  if ('feedbackurl' in $$props) $$invalidate(2, feedbackurl = $$props.feedbackurl);
12803
+ if ('maxcontentwidth' in $$props) $$invalidate(3, maxcontentwidth = $$props.maxcontentwidth);
12686
12804
  };
12687
12805
 
12688
- return [type, version, feedbackurl];
12806
+ return [type, version, feedbackurl, maxcontentwidth];
12689
12807
  }
12690
12808
 
12691
12809
  class MicrositeHeader extends SvelteElement {
12692
12810
  constructor(options) {
12693
12811
  super();
12694
- this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}a{color:var(--goa-color-interactive-default);cursor:pointer}a:hover{color:var(--goa-color-interactive-hover)}a:focus{outline-width:thin;outline-style:solid;outline-color:var(--goa-color-interactive-hover);outline-offset:0px}.goa-official-site-header{display:flex;font-size:var(--goa-font-size-2);background-color:var(--goa-color-greyscale-100);align-items:center;justify-content:space-between;padding:0.25rem 1.5rem}@media(max-width: 640px){.goa-official-site-header{padding:0.5rem 1rem;align-items:start}}.spacer{flex:1 1 auto}.version{color:var(--goa-color-text-secondary);padding-left:1rem;line-height:1.25rem}.service-type{font-weight:bold;padding:0.125rem 0.25rem;display:flex;margin-right:1rem;line-height:initial}.service-type--alpha{background-color:var(--goa-color-warning-default);color:var(--goa-color-text-default)}.service-type--beta{background-color:var(--goa-color-brand-default);color:var(--goa-color-text-light)}.service-type--live{padding:0}.site-text{color:var(--goa-color-text-default);line-height:1.25rem}</style>`;
12812
+ this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}a{color:var(--goa-color-interactive-default);cursor:pointer}a:hover{color:var(--goa-color-interactive-hover)}a:focus{outline-width:thin;outline-style:solid;outline-color:var(--goa-color-interactive-hover);outline-offset:0px}.goa-official-site-header{font-size:var(--goa-font-size-2);background-color:var(--goa-color-greyscale-100);padding:0.5rem 1rem}.content-container{display:flex;align-items:start;justify-content:space-between;max-width:min(var(--max-content-width), 100%);margin:0 auto}@media(min-width: 640px){.goa-official-site-header{padding:0.25rem 2rem}.content-container{align-items:center}}@media(min-width: 1024px){.goa-official-site-header{padding:0.25rem 4.5rem}}.spacer{flex:1 1 auto}.version{color:var(--goa-color-text-secondary);padding-left:1rem;line-height:1.25rem}.service-type{font-weight:bold;padding:0.125rem 0.25rem;display:flex;margin-right:1rem;line-height:initial}.service-type--alpha{background-color:var(--goa-color-warning-default);color:var(--goa-color-text-default)}.service-type--beta{background-color:var(--goa-color-brand-default);color:var(--goa-color-text-light)}.site-text{color:var(--goa-color-text-default);line-height:1.25rem}</style>`;
12695
12813
  init(this, {
12696
12814
  target: this.shadowRoot,
12697
12815
  props: attribute_to_object(this.attributes),
12698
12816
  customElement: true
12699
- }, instance$j, create_fragment$l, safe_not_equal, {
12817
+ }, instance$k, create_fragment$m, safe_not_equal, {
12700
12818
  type: 0,
12701
12819
  version: 1,
12702
- feedbackurl: 2
12820
+ feedbackurl: 2,
12821
+ maxcontentwidth: 3
12703
12822
  }, null);
12704
12823
 
12705
12824
  if (options) {
@@ -12715,7 +12834,7 @@ class MicrositeHeader extends SvelteElement {
12715
12834
  }
12716
12835
 
12717
12836
  static get observedAttributes() {
12718
- return ["type", "version", "feedbackurl"];
12837
+ return ["type", "version", "feedbackurl", "maxcontentwidth"];
12719
12838
  }
12720
12839
 
12721
12840
  get type() {
@@ -12751,6 +12870,17 @@ class MicrositeHeader extends SvelteElement {
12751
12870
  flush();
12752
12871
  }
12753
12872
 
12873
+ get maxcontentwidth() {
12874
+ return this.$$.ctx[3];
12875
+ }
12876
+
12877
+ set maxcontentwidth(maxcontentwidth) {
12878
+ this.$$set({
12879
+ maxcontentwidth
12880
+ });
12881
+ flush();
12882
+ }
12883
+
12754
12884
  }
12755
12885
 
12756
12886
  customElements.define("goa-microsite-header", MicrositeHeader);
@@ -13034,7 +13164,7 @@ function create_if_block$a(ctx) {
13034
13164
  }
13035
13165
 
13036
13166
  };
13037
- } // (132:8) {#if calloutvariant !== null}
13167
+ } // (137:8) {#if calloutvariant !== null}
13038
13168
 
13039
13169
 
13040
13170
  function create_if_block_3$4(ctx) {
@@ -13093,7 +13223,7 @@ function create_if_block_3$4(ctx) {
13093
13223
  }
13094
13224
 
13095
13225
  };
13096
- } // (145:14) {:else}
13226
+ } // (150:14) {:else}
13097
13227
 
13098
13228
 
13099
13229
  function create_else_block$4(ctx) {
@@ -13115,7 +13245,7 @@ function create_else_block$4(ctx) {
13115
13245
  }
13116
13246
 
13117
13247
  };
13118
- } // (143:14) {#if heading}
13248
+ } // (148:14) {#if heading}
13119
13249
 
13120
13250
 
13121
13251
  function create_if_block_2$4(ctx) {
@@ -13144,7 +13274,7 @@ function create_if_block_2$4(ctx) {
13144
13274
  }
13145
13275
 
13146
13276
  };
13147
- } // (149:12) {#if _isClosable}
13277
+ } // (154:12) {#if _isClosable}
13148
13278
 
13149
13279
 
13150
13280
  function create_if_block_1$4(ctx) {
@@ -13185,7 +13315,7 @@ function create_if_block_1$4(ctx) {
13185
13315
  };
13186
13316
  }
13187
13317
 
13188
- function create_fragment$k(ctx) {
13318
+ function create_fragment$l(ctx) {
13189
13319
  let if_block_anchor;
13190
13320
  let current;
13191
13321
  let if_block =
@@ -13250,11 +13380,9 @@ function create_fragment$k(ctx) {
13250
13380
  };
13251
13381
  }
13252
13382
 
13253
- function instance$i($$self, $$props, $$invalidate) {
13383
+ function instance$j($$self, $$props, $$invalidate) {
13254
13384
  let _isClosable;
13255
13385
 
13256
- let _isOpen;
13257
-
13258
13386
  let _transitionTime;
13259
13387
 
13260
13388
  let _iconType;
@@ -13284,9 +13412,14 @@ function instance$i($$self, $$props, $$invalidate) {
13284
13412
  let _headerEl = null; // Type verification
13285
13413
 
13286
13414
  const [CALLOUT_VARIANT, validateCalloutVariant] = typeValidator("Callout variant", ["emergency", "important", "information", "success", "event"]);
13287
- const [Transitions, validateTransition] = typeValidator("Modal transition", ["fast", "slow", "none"]); // Hooks
13415
+ const [Transitions, validateTransition] = typeValidator("Modal transition", ["fast", "slow", "none"]); // Moving the reactive var into a timeout prevents accessing null stylesheet
13416
+ // reference to allow for creation of the @keyframes for the in:fade and out:fade transitions.
13417
+ // DDIDS-1288
13288
13418
 
13289
- onMount(() => {
13419
+ let _isOpen = false; // Hooks
13420
+
13421
+ onMount(async () => {
13422
+ await tick();
13290
13423
  validateCalloutVariant(calloutvariant);
13291
13424
  validateTransition(transition);
13292
13425
  }); // Functions
@@ -13388,7 +13521,7 @@ function instance$i($$self, $$props, $$invalidate) {
13388
13521
  if ($$self.$$.dirty &
13389
13522
  /*open*/
13390
13523
  2) {
13391
- $$invalidate(7, _isOpen = toBoolean(open));
13524
+ setTimeout(() => $$invalidate(7, _isOpen = toBoolean(open)), 1);
13392
13525
  }
13393
13526
 
13394
13527
  if ($$self.$$.dirty &
@@ -13450,7 +13583,7 @@ class Modal extends SvelteElement {
13450
13583
  target: this.shadowRoot,
13451
13584
  props: attribute_to_object(this.attributes),
13452
13585
  customElement: true
13453
- }, instance$i, create_fragment$k, safe_not_equal, {
13586
+ }, instance$j, create_fragment$l, safe_not_equal, {
13454
13587
  heading: 0,
13455
13588
  closable: 14,
13456
13589
  open: 1,
@@ -13547,6 +13680,7 @@ customElements.define("goa-modal", Modal);
13547
13680
  /* libs/web-components/src/components/notification/Notification.svelte generated by Svelte v3.51.0 */
13548
13681
 
13549
13682
  function create_if_block$9(ctx) {
13683
+ let div4;
13550
13684
  let div3;
13551
13685
  let div0;
13552
13686
  let goa_icon;
@@ -13557,13 +13691,15 @@ function create_if_block$9(ctx) {
13557
13691
  let div2;
13558
13692
  let goa_icon_button;
13559
13693
  let goa_icon_button_inverted_value;
13560
- let div3_class_value;
13561
- let div3_transition;
13694
+ let div4_class_value;
13695
+ let div4_style_value;
13696
+ let div4_transition;
13562
13697
  let current;
13563
13698
  let mounted;
13564
13699
  let dispose;
13565
13700
  return {
13566
13701
  c() {
13702
+ div4 = element("div");
13567
13703
  div3 = element("div");
13568
13704
  div0 = element("div");
13569
13705
  goa_icon = element("goa-icon");
@@ -13575,7 +13711,7 @@ function create_if_block$9(ctx) {
13575
13711
  goa_icon_button = element("goa-icon-button");
13576
13712
  set_custom_element_data(goa_icon, "type",
13577
13713
  /*iconType*/
13578
- ctx[2]);
13714
+ ctx[3]);
13579
13715
  set_custom_element_data(goa_icon, "inverted", goa_icon_inverted_value =
13580
13716
  /*type*/
13581
13717
  ctx[0] === "important" ? "false" : "true");
@@ -13587,13 +13723,18 @@ function create_if_block$9(ctx) {
13587
13723
  /*type*/
13588
13724
  ctx[0] === "important" ? "false" : "true");
13589
13725
  attr(div2, "class", "close");
13590
- attr(div3, "class", div3_class_value = "notification " +
13726
+ attr(div3, "class", "content-container");
13727
+ attr(div4, "class", div4_class_value = "notification " +
13591
13728
  /*type*/
13592
13729
  ctx[0]);
13730
+ attr(div4, "style", div4_style_value = `--max-content-width: ${
13731
+ /*maxcontentwidth*/
13732
+ ctx[1]}`);
13593
13733
  },
13594
13734
 
13595
13735
  m(target, anchor) {
13596
- insert(target, div3, anchor);
13736
+ insert(target, div4, anchor);
13737
+ append(div4, div3);
13597
13738
  append(div3, div0);
13598
13739
  append(div0, goa_icon);
13599
13740
  append(div3, t0);
@@ -13606,7 +13747,7 @@ function create_if_block$9(ctx) {
13606
13747
  if (!mounted) {
13607
13748
  dispose = listen(goa_icon_button, "click",
13608
13749
  /*close*/
13609
- ctx[3]);
13750
+ ctx[4]);
13610
13751
  mounted = true;
13611
13752
  }
13612
13753
  },
@@ -13614,10 +13755,10 @@ function create_if_block$9(ctx) {
13614
13755
  p(ctx, dirty) {
13615
13756
  if (!current || dirty &
13616
13757
  /*iconType*/
13617
- 4) {
13758
+ 8) {
13618
13759
  set_custom_element_data(goa_icon, "type",
13619
13760
  /*iconType*/
13620
- ctx[2]);
13761
+ ctx[3]);
13621
13762
  }
13622
13763
 
13623
13764
  if (!current || dirty &
@@ -13638,31 +13779,39 @@ function create_if_block$9(ctx) {
13638
13779
 
13639
13780
  if (!current || dirty &
13640
13781
  /*type*/
13641
- 1 && div3_class_value !== (div3_class_value = "notification " +
13782
+ 1 && div4_class_value !== (div4_class_value = "notification " +
13642
13783
  /*type*/
13643
13784
  ctx[0])) {
13644
- attr(div3, "class", div3_class_value);
13785
+ attr(div4, "class", div4_class_value);
13786
+ }
13787
+
13788
+ if (!current || dirty &
13789
+ /*maxcontentwidth*/
13790
+ 2 && div4_style_value !== (div4_style_value = `--max-content-width: ${
13791
+ /*maxcontentwidth*/
13792
+ ctx[1]}`)) {
13793
+ attr(div4, "style", div4_style_value);
13645
13794
  }
13646
13795
  },
13647
13796
 
13648
13797
  i(local) {
13649
13798
  if (current) return;
13650
13799
  add_render_callback(() => {
13651
- if (!div3_transition) div3_transition = create_bidirectional_transition(div3, fade, {}, true);
13652
- div3_transition.run(1);
13800
+ if (!div4_transition) div4_transition = create_bidirectional_transition(div4, fade, {}, true);
13801
+ div4_transition.run(1);
13653
13802
  });
13654
13803
  current = true;
13655
13804
  },
13656
13805
 
13657
13806
  o(local) {
13658
- if (!div3_transition) div3_transition = create_bidirectional_transition(div3, fade, {}, false);
13659
- div3_transition.run(0);
13807
+ if (!div4_transition) div4_transition = create_bidirectional_transition(div4, fade, {}, false);
13808
+ div4_transition.run(0);
13660
13809
  current = false;
13661
13810
  },
13662
13811
 
13663
13812
  d(detaching) {
13664
- if (detaching) detach(div3);
13665
- if (detaching && div3_transition) div3_transition.end();
13813
+ if (detaching) detach(div4);
13814
+ if (detaching && div4_transition) div4_transition.end();
13666
13815
  mounted = false;
13667
13816
  dispose();
13668
13817
  }
@@ -13670,12 +13819,12 @@ function create_if_block$9(ctx) {
13670
13819
  };
13671
13820
  }
13672
13821
 
13673
- function create_fragment$j(ctx) {
13822
+ function create_fragment$k(ctx) {
13674
13823
  let if_block_anchor;
13675
13824
  let current;
13676
13825
  let if_block =
13677
13826
  /*show*/
13678
- ctx[1] && create_if_block$9(ctx);
13827
+ ctx[2] && create_if_block$9(ctx);
13679
13828
  return {
13680
13829
  c() {
13681
13830
  if (if_block) if_block.c();
@@ -13692,13 +13841,13 @@ function create_fragment$j(ctx) {
13692
13841
  p(ctx, [dirty]) {
13693
13842
  if (
13694
13843
  /*show*/
13695
- ctx[1]) {
13844
+ ctx[2]) {
13696
13845
  if (if_block) {
13697
13846
  if_block.p(ctx, dirty);
13698
13847
 
13699
13848
  if (dirty &
13700
13849
  /*show*/
13701
- 2) {
13850
+ 4) {
13702
13851
  transition_in(if_block, 1);
13703
13852
  }
13704
13853
  } else {
@@ -13735,19 +13884,22 @@ function create_fragment$j(ctx) {
13735
13884
  };
13736
13885
  }
13737
13886
 
13738
- function instance$h($$self, $$props, $$invalidate) {
13887
+ function instance$i($$self, $$props, $$invalidate) {
13739
13888
  let iconType;
13740
13889
  const [Types, validateType] = typeValidator("Notification type", ["emergency", "important", "information", "event"], true);
13741
13890
  let {
13742
13891
  type = ""
13743
13892
  } = $$props;
13893
+ let {
13894
+ maxcontentwidth = "100%"
13895
+ } = $$props;
13744
13896
  let show = true;
13745
13897
  onMount(() => {
13746
13898
  setTimeout(() => validateType(type), 1);
13747
13899
  });
13748
13900
 
13749
13901
  function close(e) {
13750
- $$invalidate(1, show = false);
13902
+ $$invalidate(2, show = false);
13751
13903
  e.target.dispatchEvent(new CustomEvent("_dismiss", {
13752
13904
  composed: true
13753
13905
  }));
@@ -13756,29 +13908,31 @@ function instance$h($$self, $$props, $$invalidate) {
13756
13908
 
13757
13909
  $$self.$$set = $$props => {
13758
13910
  if ('type' in $$props) $$invalidate(0, type = $$props.type);
13911
+ if ('maxcontentwidth' in $$props) $$invalidate(1, maxcontentwidth = $$props.maxcontentwidth);
13759
13912
  };
13760
13913
 
13761
13914
  $$self.$$.update = () => {
13762
13915
  if ($$self.$$.dirty &
13763
13916
  /*type*/
13764
13917
  1) {
13765
- $$invalidate(2, iconType = type === "emergency" ? "warning" : type === "important" ? "alert-circle" : type === "information" ? "information-circle" : type === "event" ? "calendar" : "");
13918
+ $$invalidate(3, iconType = type === "emergency" ? "warning" : type === "important" ? "alert-circle" : type === "information" ? "information-circle" : type === "event" ? "calendar" : "");
13766
13919
  }
13767
13920
  };
13768
13921
 
13769
- return [type, show, iconType, close];
13922
+ return [type, maxcontentwidth, show, iconType, close];
13770
13923
  }
13771
13924
 
13772
13925
  class Notification extends SvelteElement {
13773
13926
  constructor(options) {
13774
13927
  super();
13775
- this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.notification{padding:1.5rem;display:flex;gap:1rem}.emergency{background-color:var(--goa-color-emergency-default);color:var(--goa-color-greyscale-white)}.important{background-color:var(--goa-color-warning-default)}.information{background-color:var(--goa-color-info-default);color:var(--goa-color-greyscale-white)}.event{background-color:var(--goa-color-success-default);color:var(--goa-color-greyscale-white)}.icon{flex:0 0 auto}.content{flex:1 1 auto}::slotted(a){color:unset !important;outline:unset !important}.close{flex:0 0 auto}</style>`;
13928
+ this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.notification{padding:1.5rem 1rem;display:flex}@media(min-width: 640px){.notification{padding:1.5rem 2rem}}@media(min-width: 1024px){.notification{padding:1.5rem 4.5rem}}.emergency{background-color:var(--goa-color-emergency-default);color:var(--goa-color-greyscale-white)}.important{background-color:var(--goa-color-warning-default)}.information{background-color:var(--goa-color-info-default);color:var(--goa-color-greyscale-white)}.event{background-color:var(--goa-color-success-default);color:var(--goa-color-greyscale-white)}.icon{flex:0 0 auto}.content-container{display:flex;flex-direction:row;flex:1 1 auto;gap:1rem;margin:0 auto;max-width:min(var(--max-content-width), 100%)}.content{flex:1 1 auto}::slotted(a){color:unset !important;outline:unset !important}.close{flex:0 0 auto}</style>`;
13776
13929
  init(this, {
13777
13930
  target: this.shadowRoot,
13778
13931
  props: attribute_to_object(this.attributes),
13779
13932
  customElement: true
13780
- }, instance$h, create_fragment$j, safe_not_equal, {
13781
- type: 0
13933
+ }, instance$i, create_fragment$k, safe_not_equal, {
13934
+ type: 0,
13935
+ maxcontentwidth: 1
13782
13936
  }, null);
13783
13937
 
13784
13938
  if (options) {
@@ -13794,7 +13948,7 @@ class Notification extends SvelteElement {
13794
13948
  }
13795
13949
 
13796
13950
  static get observedAttributes() {
13797
- return ["type"];
13951
+ return ["type", "maxcontentwidth"];
13798
13952
  }
13799
13953
 
13800
13954
  get type() {
@@ -13808,6 +13962,17 @@ class Notification extends SvelteElement {
13808
13962
  flush();
13809
13963
  }
13810
13964
 
13965
+ get maxcontentwidth() {
13966
+ return this.$$.ctx[1];
13967
+ }
13968
+
13969
+ set maxcontentwidth(maxcontentwidth) {
13970
+ this.$$set({
13971
+ maxcontentwidth
13972
+ });
13973
+ flush();
13974
+ }
13975
+
13811
13976
  }
13812
13977
 
13813
13978
  customElements.define("goa-notification", Notification);
@@ -13819,7 +13984,7 @@ function isValidDimension(value) {
13819
13984
  /* libs/web-components/src/components/page-block/PageBlock.svelte generated by Svelte v3.51.0 */
13820
13985
 
13821
13986
 
13822
- function create_fragment$i(ctx) {
13987
+ function create_fragment$j(ctx) {
13823
13988
  let div;
13824
13989
  let slot;
13825
13990
  let div_style_value;
@@ -13859,7 +14024,7 @@ function create_fragment$i(ctx) {
13859
14024
  };
13860
14025
  }
13861
14026
 
13862
- function instance$g($$self, $$props, $$invalidate) {
14027
+ function instance$h($$self, $$props, $$invalidate) {
13863
14028
  const Sizes = {
13864
14029
  "full": "100%"
13865
14030
  };
@@ -13895,12 +14060,12 @@ function instance$g($$self, $$props, $$invalidate) {
13895
14060
  class PageBlock extends SvelteElement {
13896
14061
  constructor(options) {
13897
14062
  super();
13898
- this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.page-content{max-width:var(--max-width);margin:0 auto;padding:0 1.75rem}</style>`;
14063
+ this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.page-content{max-width:var(--max-width);margin:0 auto;padding:0 1rem}@media(min-width: 640px){.page-content{padding:0 2rem}}@media(min-width: 1024px){.page-content{padding:0 4.5rem}}</style>`;
13899
14064
  init(this, {
13900
14065
  target: this.shadowRoot,
13901
14066
  props: attribute_to_object(this.attributes),
13902
14067
  customElement: true
13903
- }, instance$g, create_fragment$i, safe_not_equal, {
14068
+ }, instance$h, create_fragment$j, safe_not_equal, {
13904
14069
  width: 1,
13905
14070
  _width: 0
13906
14071
  }, null);
@@ -14118,7 +14283,7 @@ function create_each_block$3(ctx) {
14118
14283
  };
14119
14284
  }
14120
14285
 
14121
- function create_fragment$h(ctx) {
14286
+ function create_fragment$i(ctx) {
14122
14287
  let goa_block1;
14123
14288
  let div;
14124
14289
  let t0;
@@ -14281,7 +14446,7 @@ function create_fragment$h(ctx) {
14281
14446
  };
14282
14447
  }
14283
14448
 
14284
- function instance$f($$self, $$props, $$invalidate) {
14449
+ function instance$g($$self, $$props, $$invalidate) {
14285
14450
  let _pageCount;
14286
14451
 
14287
14452
  const [Variants, validateVariant] = typeValidator("Pagination variant", ["all", "links-only"]);
@@ -14400,7 +14565,7 @@ class Pagination extends SvelteElement {
14400
14565
  target: this.shadowRoot,
14401
14566
  props: attribute_to_object(this.attributes),
14402
14567
  customElement: true
14403
- }, instance$f, create_fragment$h, safe_not_equal, {
14568
+ }, instance$g, create_fragment$i, safe_not_equal, {
14404
14569
  pagenumber: 0,
14405
14570
  itemcount: 10,
14406
14571
  perpagecount: 11,
@@ -14546,11 +14711,11 @@ function create_if_block$7(ctx) {
14546
14711
  ctx[1]);
14547
14712
  set_style(section, "padding",
14548
14713
  /*paddedContent*/
14549
- ctx[4] ? 'var(--goa-space-m)' : '0');
14714
+ ctx[9] ? 'var(--goa-space-m)' : '0');
14550
14715
  attr(div1, "class", "popover-container");
14551
14716
  set_custom_element_data(goa_focus_trap, "active",
14552
14717
  /*_isContentVisible*/
14553
- ctx[2]);
14718
+ ctx[6]);
14554
14719
  },
14555
14720
 
14556
14721
  m(target, anchor) {
@@ -14560,11 +14725,14 @@ function create_if_block$7(ctx) {
14560
14725
  append(goa_focus_trap, div1);
14561
14726
  append(div1, section);
14562
14727
  append(section, slot);
14728
+ /*section_binding*/
14729
+
14730
+ ctx[14](section);
14563
14731
 
14564
14732
  if (!mounted) {
14565
14733
  dispose = listen(div0, "click",
14566
14734
  /*closePopover*/
14567
- ctx[6]);
14735
+ ctx[11]);
14568
14736
  mounted = true;
14569
14737
  }
14570
14738
  },
@@ -14580,23 +14748,26 @@ function create_if_block$7(ctx) {
14580
14748
 
14581
14749
  if (dirty &
14582
14750
  /*paddedContent*/
14583
- 16) {
14751
+ 512) {
14584
14752
  set_style(section, "padding",
14585
14753
  /*paddedContent*/
14586
- ctx[4] ? 'var(--goa-space-m)' : '0');
14754
+ ctx[9] ? 'var(--goa-space-m)' : '0');
14587
14755
  }
14588
14756
 
14589
14757
  if (dirty &
14590
14758
  /*_isContentVisible*/
14591
- 4) {
14759
+ 64) {
14592
14760
  set_custom_element_data(goa_focus_trap, "active",
14593
14761
  /*_isContentVisible*/
14594
- ctx[2]);
14762
+ ctx[6]);
14595
14763
  }
14596
14764
  },
14597
14765
 
14598
14766
  d(detaching) {
14599
14767
  if (detaching) detach(goa_focus_trap);
14768
+ /*section_binding*/
14769
+
14770
+ ctx[14](null);
14600
14771
  mounted = false;
14601
14772
  dispose();
14602
14773
  }
@@ -14604,15 +14775,16 @@ function create_if_block$7(ctx) {
14604
14775
  };
14605
14776
  }
14606
14777
 
14607
- function create_fragment$g(ctx) {
14778
+ function create_fragment$h(ctx) {
14608
14779
  let div1;
14609
14780
  let div0;
14610
14781
  let t;
14782
+ let div1_style_value;
14611
14783
  let mounted;
14612
14784
  let dispose;
14613
14785
  let if_block =
14614
14786
  /*_isContentVisible*/
14615
- ctx[2] && create_if_block$7(ctx);
14787
+ ctx[6] && create_if_block$7(ctx);
14616
14788
  return {
14617
14789
  c() {
14618
14790
  div1 = element("div");
@@ -14627,6 +14799,15 @@ function create_fragment$g(ctx) {
14627
14799
  attr(div1, "data-testid",
14628
14800
  /*testid*/
14629
14801
  ctx[0]);
14802
+ attr(div1, "style", div1_style_value = calculateMargin(
14803
+ /*mt*/
14804
+ ctx[2],
14805
+ /*mr*/
14806
+ ctx[3],
14807
+ /*mb*/
14808
+ ctx[4],
14809
+ /*ml*/
14810
+ ctx[5]));
14630
14811
  },
14631
14812
 
14632
14813
  m(target, anchor) {
@@ -14634,14 +14815,14 @@ function create_fragment$g(ctx) {
14634
14815
  append(div1, div0);
14635
14816
  /*div0_binding*/
14636
14817
 
14637
- ctx[8](div0);
14818
+ ctx[13](div0);
14638
14819
  append(div1, t);
14639
14820
  if (if_block) if_block.m(div1, null);
14640
14821
 
14641
14822
  if (!mounted) {
14642
14823
  dispose = listen(div0, "click",
14643
14824
  /*showPopover*/
14644
- ctx[5]);
14825
+ ctx[10]);
14645
14826
  mounted = true;
14646
14827
  }
14647
14828
  },
@@ -14649,7 +14830,7 @@ function create_fragment$g(ctx) {
14649
14830
  p(ctx, [dirty]) {
14650
14831
  if (
14651
14832
  /*_isContentVisible*/
14652
- ctx[2]) {
14833
+ ctx[6]) {
14653
14834
  if (if_block) {
14654
14835
  if_block.p(ctx, dirty);
14655
14836
  } else {
@@ -14669,6 +14850,20 @@ function create_fragment$g(ctx) {
14669
14850
  /*testid*/
14670
14851
  ctx[0]);
14671
14852
  }
14853
+
14854
+ if (dirty &
14855
+ /*mt, mr, mb, ml*/
14856
+ 60 && div1_style_value !== (div1_style_value = calculateMargin(
14857
+ /*mt*/
14858
+ ctx[2],
14859
+ /*mr*/
14860
+ ctx[3],
14861
+ /*mb*/
14862
+ ctx[4],
14863
+ /*ml*/
14864
+ ctx[5]))) {
14865
+ attr(div1, "style", div1_style_value);
14866
+ }
14672
14867
  },
14673
14868
 
14674
14869
  i: noop,
@@ -14678,7 +14873,7 @@ function create_fragment$g(ctx) {
14678
14873
  if (detaching) detach(div1);
14679
14874
  /*div0_binding*/
14680
14875
 
14681
- ctx[8](null);
14876
+ ctx[13](null);
14682
14877
  if (if_block) if_block.d();
14683
14878
  mounted = false;
14684
14879
  dispose();
@@ -14687,7 +14882,26 @@ function create_fragment$g(ctx) {
14687
14882
  };
14688
14883
  }
14689
14884
 
14690
- function instance$e($$self, $$props, $$invalidate) {
14885
+ function getBoundingClientRectWithMargins(el) {
14886
+ const rect = el.getBoundingClientRect();
14887
+ const style = window.getComputedStyle(el);
14888
+ const mTop = parseInt(style.marginTop, 10) || 0;
14889
+ const mRight = parseInt(style.marginRight, 10) || 0;
14890
+ const mBottom = parseInt(style.marginBottom, 10) || 0;
14891
+ const mLeft = parseInt(style.marginLeft, 10) || 0;
14892
+ return {
14893
+ top: rect.top - mTop,
14894
+ right: rect.right + mRight,
14895
+ bottom: rect.bottom + mBottom,
14896
+ left: rect.left - mLeft,
14897
+ width: rect.width + mLeft + mRight,
14898
+ height: rect.height + mTop + mBottom,
14899
+ x: rect.x - mLeft,
14900
+ y: rect.y - mTop
14901
+ };
14902
+ }
14903
+
14904
+ function instance$f($$self, $$props, $$invalidate) {
14691
14905
  let paddedContent;
14692
14906
  let {
14693
14907
  testid = ""
@@ -14702,6 +14916,20 @@ function instance$e($$self, $$props, $$invalidate) {
14702
14916
 
14703
14917
  let _targetEl;
14704
14918
 
14919
+ let _popoverEl;
14920
+
14921
+ let {
14922
+ mt = null
14923
+ } = $$props;
14924
+ let {
14925
+ mr = null
14926
+ } = $$props;
14927
+ let {
14928
+ mb = null
14929
+ } = $$props;
14930
+ let {
14931
+ ml = null
14932
+ } = $$props;
14705
14933
  onMount(async () => {
14706
14934
  await tick();
14707
14935
  addFocusEventListener();
@@ -14710,12 +14938,14 @@ function instance$e($$self, $$props, $$invalidate) {
14710
14938
  removeEventListeners();
14711
14939
  });
14712
14940
 
14713
- function showPopover() {
14714
- $$invalidate(2, _isContentVisible = true);
14941
+ async function showPopover() {
14942
+ $$invalidate(6, _isContentVisible = true);
14943
+ await tick();
14944
+ setPopoverPosition();
14715
14945
  }
14716
14946
 
14717
14947
  function closePopover() {
14718
- $$invalidate(2, _isContentVisible = false);
14948
+ $$invalidate(6, _isContentVisible = false);
14719
14949
  }
14720
14950
 
14721
14951
  const onInputKeyDown = e => {
@@ -14733,6 +14963,30 @@ function instance$e($$self, $$props, $$invalidate) {
14733
14963
  }
14734
14964
  };
14735
14965
 
14966
+ function setPopoverPosition() {
14967
+ // Get target and content rectangles
14968
+ const targetRect = getBoundingClientRectWithMargins(_targetEl);
14969
+ const contentRect = getBoundingClientRectWithMargins(_popoverEl); // Calculate available space above and below the target element
14970
+
14971
+ const spaceAbove = targetRect.top;
14972
+ const spaceBelow = window.innerHeight - targetRect.bottom; // Determine if there's more space above or below the target element
14973
+
14974
+ const displayAbove = spaceAbove > contentRect.height && spaceAbove > spaceBelow && spaceBelow < contentRect.height; // If there's more space above, display the popover above the target element
14975
+
14976
+ if (displayAbove) {
14977
+ $$invalidate(8, _popoverEl.style.top = `${-contentRect.height - targetRect.height - 4}px`, _popoverEl);
14978
+ } else {
14979
+ $$invalidate(8, _popoverEl.style.top = '0px', _popoverEl);
14980
+ } // Move the popover to the left if it is too far to the right and only if there is space to the left
14981
+
14982
+
14983
+ if (window.innerWidth - targetRect.right < contentRect.width && targetRect.left > contentRect.width) {
14984
+ $$invalidate(8, _popoverEl.style.left = `-${contentRect.width - targetRect.width}px`, _popoverEl);
14985
+ } else {
14986
+ $$invalidate(8, _popoverEl.style.left = '0px', _popoverEl);
14987
+ }
14988
+ }
14989
+
14736
14990
  function addFocusEventListener() {
14737
14991
  _targetEl.addEventListener("focus", onFocus, true);
14738
14992
  }
@@ -14751,39 +15005,54 @@ function instance$e($$self, $$props, $$invalidate) {
14751
15005
  function div0_binding($$value) {
14752
15006
  binding_callbacks[$$value ? 'unshift' : 'push'](() => {
14753
15007
  _targetEl = $$value;
14754
- $$invalidate(3, _targetEl);
15008
+ $$invalidate(7, _targetEl);
15009
+ });
15010
+ }
15011
+
15012
+ function section_binding($$value) {
15013
+ binding_callbacks[$$value ? 'unshift' : 'push'](() => {
15014
+ _popoverEl = $$value;
15015
+ $$invalidate(8, _popoverEl);
14755
15016
  });
14756
15017
  }
14757
15018
 
14758
15019
  $$self.$$set = $$props => {
14759
15020
  if ('testid' in $$props) $$invalidate(0, testid = $$props.testid);
14760
15021
  if ('maxwidth' in $$props) $$invalidate(1, maxwidth = $$props.maxwidth);
14761
- if ('padded' in $$props) $$invalidate(7, padded = $$props.padded);
15022
+ if ('padded' in $$props) $$invalidate(12, padded = $$props.padded);
15023
+ if ('mt' in $$props) $$invalidate(2, mt = $$props.mt);
15024
+ if ('mr' in $$props) $$invalidate(3, mr = $$props.mr);
15025
+ if ('mb' in $$props) $$invalidate(4, mb = $$props.mb);
15026
+ if ('ml' in $$props) $$invalidate(5, ml = $$props.ml);
14762
15027
  };
14763
15028
 
14764
15029
  $$self.$$.update = () => {
14765
15030
  if ($$self.$$.dirty &
14766
15031
  /*padded*/
14767
- 128) {
14768
- $$invalidate(4, paddedContent = toBoolean(padded));
15032
+ 4096) {
15033
+ $$invalidate(9, paddedContent = toBoolean(padded));
14769
15034
  }
14770
15035
  };
14771
15036
 
14772
- return [testid, maxwidth, _isContentVisible, _targetEl, paddedContent, showPopover, closePopover, padded, div0_binding];
15037
+ return [testid, maxwidth, mt, mr, mb, ml, _isContentVisible, _targetEl, _popoverEl, paddedContent, showPopover, closePopover, padded, div0_binding, section_binding];
14773
15038
  }
14774
15039
 
14775
15040
  class Popover extends SvelteElement {
14776
15041
  constructor(options) {
14777
15042
  super();
14778
- this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans);font-size:var(--goa-font-size-4)}.popover-target{width:fit-content;cursor:pointer}.popover-target:focus{outline:var(--goa-border-width-l) solid var(--goa-color-interactive-focus)}.popover-content{position:absolute;left:0;right:0;margin-top:3px;list-style-type:none;background:var(--goa-color-greyscale-white);border-radius:var(--goa-border-radius-m);outline:none;box-shadow:var(--shadow-1);z-index:99}.popover-background{cursor:default;position:fixed;z-index:98;inset:0}.popover-container{position:relative}</style>`;
15043
+ this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans);font-size:var(--goa-font-size-4)}.popover-target{width:fit-content;cursor:pointer}.popover-target:focus{outline:var(--goa-border-width-l) solid var(--goa-color-interactive-focus)}.popover-content{position:absolute;left:0;right:0;margin-top:3px;list-style-type:none;background:var(--goa-color-greyscale-white);outline:none;filter:drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.2));z-index:99;width:max-content}.popover-background{cursor:default;position:fixed;z-index:98;inset:0}.popover-container{position:relative}</style>`;
14779
15044
  init(this, {
14780
15045
  target: this.shadowRoot,
14781
15046
  props: attribute_to_object(this.attributes),
14782
15047
  customElement: true
14783
- }, instance$e, create_fragment$g, safe_not_equal, {
15048
+ }, instance$f, create_fragment$h, safe_not_equal, {
14784
15049
  testid: 0,
14785
15050
  maxwidth: 1,
14786
- padded: 7
15051
+ padded: 12,
15052
+ mt: 2,
15053
+ mr: 3,
15054
+ mb: 4,
15055
+ ml: 5
14787
15056
  }, null);
14788
15057
 
14789
15058
  if (options) {
@@ -14799,7 +15068,7 @@ class Popover extends SvelteElement {
14799
15068
  }
14800
15069
 
14801
15070
  static get observedAttributes() {
14802
- return ["testid", "maxwidth", "padded"];
15071
+ return ["testid", "maxwidth", "padded", "mt", "mr", "mb", "ml"];
14803
15072
  }
14804
15073
 
14805
15074
  get testid() {
@@ -14825,7 +15094,7 @@ class Popover extends SvelteElement {
14825
15094
  }
14826
15095
 
14827
15096
  get padded() {
14828
- return this.$$.ctx[7];
15097
+ return this.$$.ctx[12];
14829
15098
  }
14830
15099
 
14831
15100
  set padded(padded) {
@@ -14835,6 +15104,50 @@ class Popover extends SvelteElement {
14835
15104
  flush();
14836
15105
  }
14837
15106
 
15107
+ get mt() {
15108
+ return this.$$.ctx[2];
15109
+ }
15110
+
15111
+ set mt(mt) {
15112
+ this.$$set({
15113
+ mt
15114
+ });
15115
+ flush();
15116
+ }
15117
+
15118
+ get mr() {
15119
+ return this.$$.ctx[3];
15120
+ }
15121
+
15122
+ set mr(mr) {
15123
+ this.$$set({
15124
+ mr
15125
+ });
15126
+ flush();
15127
+ }
15128
+
15129
+ get mb() {
15130
+ return this.$$.ctx[4];
15131
+ }
15132
+
15133
+ set mb(mb) {
15134
+ this.$$set({
15135
+ mb
15136
+ });
15137
+ flush();
15138
+ }
15139
+
15140
+ get ml() {
15141
+ return this.$$.ctx[5];
15142
+ }
15143
+
15144
+ set ml(ml) {
15145
+ this.$$set({
15146
+ ml
15147
+ });
15148
+ flush();
15149
+ }
15150
+
14838
15151
  }
14839
15152
 
14840
15153
  customElements.define("goa-popover", Popover);
@@ -15030,7 +15343,7 @@ function create_each_block$2(key_1, ctx) {
15030
15343
  };
15031
15344
  }
15032
15345
 
15033
- function create_fragment$f(ctx) {
15346
+ function create_fragment$g(ctx) {
15034
15347
  let div;
15035
15348
  let slot;
15036
15349
  let t;
@@ -15153,7 +15466,7 @@ function create_fragment$f(ctx) {
15153
15466
  };
15154
15467
  }
15155
15468
 
15156
- function instance$d($$self, $$props, $$invalidate) {
15469
+ function instance$e($$self, $$props, $$invalidate) {
15157
15470
  let isDisabled;
15158
15471
  let isError;
15159
15472
  const [Orientations, validateOrientation] = typeValidator("Radio group orientation", ["vertical", "horizontal"]);
@@ -15296,7 +15609,7 @@ class RadioGroup extends SvelteElement {
15296
15609
  target: this.shadowRoot,
15297
15610
  props: attribute_to_object(this.attributes),
15298
15611
  customElement: true
15299
- }, instance$d, create_fragment$f, safe_not_equal, {
15612
+ }, instance$e, create_fragment$g, safe_not_equal, {
15300
15613
  name: 1,
15301
15614
  value: 0,
15302
15615
  orientation: 2,
@@ -15452,7 +15765,7 @@ class RadioGroup extends SvelteElement {
15452
15765
  customElements.define("goa-radio-group", RadioGroup);
15453
15766
  /* libs/web-components/src/components/scrollable/Scrollable.svelte generated by Svelte v3.51.0 */
15454
15767
 
15455
- function create_fragment$e(ctx) {
15768
+ function create_fragment$f(ctx) {
15456
15769
  let div;
15457
15770
  let slot;
15458
15771
  let div_style_value;
@@ -15537,7 +15850,7 @@ function create_fragment$e(ctx) {
15537
15850
  };
15538
15851
  }
15539
15852
 
15540
- function instance$c($$self, $$props, $$invalidate) {
15853
+ function instance$d($$self, $$props, $$invalidate) {
15541
15854
  let {
15542
15855
  direction = "vertical"
15543
15856
  } = $$props;
@@ -15603,7 +15916,7 @@ class Scrollable extends SvelteElement {
15603
15916
  target: this.shadowRoot,
15604
15917
  props: attribute_to_object(this.attributes),
15605
15918
  customElement: true
15606
- }, instance$c, create_fragment$e, safe_not_equal, {
15919
+ }, instance$d, create_fragment$f, safe_not_equal, {
15607
15920
  direction: 0,
15608
15921
  hpadding: 1,
15609
15922
  vpadding: 2,
@@ -16283,7 +16596,7 @@ function create_each_block$1(ctx) {
16283
16596
  };
16284
16597
  }
16285
16598
 
16286
- function create_fragment$d(ctx) {
16599
+ function create_fragment$e(ctx) {
16287
16600
  let div;
16288
16601
  let current_block_type_index;
16289
16602
  let if_block;
@@ -16402,7 +16715,7 @@ function create_fragment$d(ctx) {
16402
16715
  };
16403
16716
  }
16404
16717
 
16405
- function instance$b($$self, $$props, $$invalidate) {
16718
+ function instance$c($$self, $$props, $$invalidate) {
16406
16719
  const [Types, validateType] = typeValidator("Skeleton type", ["image", "text", "title", "text-small", "avatar", "header", "paragraph", "thumbnail", "card", "lines", "profile", "article"], true);
16407
16720
  const [Sizes, validateSize] = typeValidator("Skeleton size", ["1", "2", "3", "4"]);
16408
16721
  let {
@@ -16460,7 +16773,7 @@ class Skeleton extends SvelteElement {
16460
16773
  target: this.shadowRoot,
16461
16774
  props: attribute_to_object(this.attributes),
16462
16775
  customElement: true
16463
- }, instance$b, create_fragment$d, safe_not_equal, {
16776
+ }, instance$c, create_fragment$e, safe_not_equal, {
16464
16777
  maxwidth: 0,
16465
16778
  size: 1,
16466
16779
  linecount: 2,
@@ -16592,7 +16905,7 @@ class Skeleton extends SvelteElement {
16592
16905
  customElements.define("goa-skeleton", Skeleton);
16593
16906
  /* libs/web-components/src/components/spacer/Spacer.svelte generated by Svelte v3.51.0 */
16594
16907
 
16595
- function create_fragment$c(ctx) {
16908
+ function create_fragment$d(ctx) {
16596
16909
  let div;
16597
16910
  return {
16598
16911
  c() {
@@ -16621,7 +16934,7 @@ function create_fragment$c(ctx) {
16621
16934
  };
16622
16935
  }
16623
16936
 
16624
- function instance$a($$self, $$props, $$invalidate) {
16937
+ function instance$b($$self, $$props, $$invalidate) {
16625
16938
  let {
16626
16939
  hspacing = "none"
16627
16940
  } = $$props;
@@ -16659,7 +16972,7 @@ class Spacer extends SvelteElement {
16659
16972
  target: this.shadowRoot,
16660
16973
  props: attribute_to_object(this.attributes),
16661
16974
  customElement: true
16662
- }, instance$a, create_fragment$c, safe_not_equal, {
16975
+ }, instance$b, create_fragment$d, safe_not_equal, {
16663
16976
  hspacing: 1,
16664
16977
  vspacing: 2
16665
16978
  }, null);
@@ -17081,7 +17394,7 @@ function create_if_block$5(ctx) {
17081
17394
  };
17082
17395
  }
17083
17396
 
17084
- function create_fragment$b(ctx) {
17397
+ function create_fragment$c(ctx) {
17085
17398
  let if_block_anchor;
17086
17399
  let if_block =
17087
17400
  /*ready*/
@@ -17126,7 +17439,7 @@ function create_fragment$b(ctx) {
17126
17439
  };
17127
17440
  }
17128
17441
 
17129
- function instance$9($$self, $$props, $$invalidate) {
17442
+ function instance$a($$self, $$props, $$invalidate) {
17130
17443
  let diameter;
17131
17444
  let strokewidth;
17132
17445
  let radius;
@@ -17257,7 +17570,7 @@ class Spinner extends SvelteElement {
17257
17570
  target: this.shadowRoot,
17258
17571
  props: attribute_to_object(this.attributes),
17259
17572
  customElement: true
17260
- }, instance$9, create_fragment$b, safe_not_equal, {
17573
+ }, instance$a, create_fragment$c, safe_not_equal, {
17261
17574
  size: 10,
17262
17575
  invert: 0,
17263
17576
  progress: 11,
@@ -17329,7 +17642,7 @@ class Spinner extends SvelteElement {
17329
17642
  customElements.define("goa-spinner", Spinner);
17330
17643
  /* libs/web-components/src/components/table/Table.svelte generated by Svelte v3.51.0 */
17331
17644
 
17332
- function create_fragment$a(ctx) {
17645
+ function create_fragment$b(ctx) {
17333
17646
  let table;
17334
17647
  let slot;
17335
17648
  let t0;
@@ -17431,7 +17744,7 @@ function create_fragment$a(ctx) {
17431
17744
  };
17432
17745
  }
17433
17746
 
17434
- function instance$8($$self, $$props, $$invalidate) {
17747
+ function instance$9($$self, $$props, $$invalidate) {
17435
17748
  let _stickyHeader;
17436
17749
 
17437
17750
  const [Variants, validateVariant] = typeValidator("Table variant", ["normal", "relaxed"], true);
@@ -17540,12 +17853,12 @@ function instance$8($$self, $$props, $$invalidate) {
17540
17853
  class Table extends SvelteElement {
17541
17854
  constructor(options) {
17542
17855
  super();
17543
- this.shadowRoot.innerHTML = `<style>:host{overflow-x:auto}table{border-collapse:collapse}table.sticky{position:relative}table.sticky thead{position:sticky;top:0}td{font:var(--goa-typography-body-m);padding:0.75rem 1rem;border-bottom:1px solid var(--goa-color-greyscale-200)}table .goa-table-number-column{font:var(--goa-typography-number-m);text-align:right}table.relaxed td{padding:1rem}th{background-color:var(--goa-color-greyscale-white);color:var(--goa-color-text-secondary);padding:1rem;text-align:left;border-bottom:2px solid var(--goa-color-greyscale-700);vertical-align:bottom}th:has(goa-table-sort-header){padding:0}tfoot td{background-color:var(--goa-color-greyscale-100)}tfoot tr:first-child td{border-top:2px solid var(--goa-color-greyscale-200)}tfoot tr:last-child td{border-bottom:none}</style>`;
17856
+ this.shadowRoot.innerHTML = `<style>:host{overflow-x:auto}table{border-collapse:collapse}table.sticky{position:relative}table.sticky thead{position:sticky;top:0}td{font:var(--goa-typography-body-m);padding:0.75rem 1rem;border-bottom:1px solid var(--goa-color-greyscale-200)}table .goa-table-number-column{font:var(--goa-typography-number-m);text-align:right}table.relaxed td{padding:1rem}th{background-color:var(--goa-color-greyscale-white);color:var(--goa-color-text-secondary);padding:1rem;text-align:left;border-bottom:2px solid var(--goa-color-greyscale-600);vertical-align:bottom}th:has(goa-table-sort-header){padding:0}tfoot td{background-color:var(--goa-color-greyscale-100)}tfoot tr:first-child td{border-top:2px solid var(--goa-color-greyscale-200)}tfoot tr:last-child td{border-bottom:none}</style>`;
17544
17857
  init(this, {
17545
17858
  target: this.shadowRoot,
17546
17859
  props: attribute_to_object(this.attributes),
17547
17860
  customElement: true
17548
- }, instance$8, create_fragment$a, safe_not_equal, {
17861
+ }, instance$9, create_fragment$b, safe_not_equal, {
17549
17862
  width: 0,
17550
17863
  stickyheader: 8,
17551
17864
  variant: 1,
@@ -17721,7 +18034,7 @@ function create_if_block$4(ctx) {
17721
18034
  };
17722
18035
  }
17723
18036
 
17724
- function create_fragment$9(ctx) {
18037
+ function create_fragment$a(ctx) {
17725
18038
  let button;
17726
18039
  let slot;
17727
18040
  let t;
@@ -17776,7 +18089,7 @@ function create_fragment$9(ctx) {
17776
18089
  };
17777
18090
  }
17778
18091
 
17779
- function instance$7($$self, $$props, $$invalidate) {
18092
+ function instance$8($$self, $$props, $$invalidate) {
17780
18093
  let {
17781
18094
  direction = "none"
17782
18095
  } = $$props;
@@ -17796,7 +18109,7 @@ class TableSortHeader extends SvelteElement {
17796
18109
  target: this.shadowRoot,
17797
18110
  props: attribute_to_object(this.attributes),
17798
18111
  customElement: true
17799
- }, instance$7, create_fragment$9, safe_not_equal, {
18112
+ }, instance$8, create_fragment$a, safe_not_equal, {
17800
18113
  direction: 0
17801
18114
  }, null);
17802
18115
 
@@ -17832,7 +18145,7 @@ class TableSortHeader extends SvelteElement {
17832
18145
  customElements.define("goa-table-sort-header", TableSortHeader);
17833
18146
  /* libs/web-components/src/components/text-area/TextArea.svelte generated by Svelte v3.51.0 */
17834
18147
 
17835
- function create_fragment$8(ctx) {
18148
+ function create_fragment$9(ctx) {
17836
18149
  let div;
17837
18150
  let textarea;
17838
18151
  let textarea_aria_label_value;
@@ -18013,7 +18326,7 @@ function create_fragment$8(ctx) {
18013
18326
  };
18014
18327
  }
18015
18328
 
18016
- function instance$6($$self, $$props, $$invalidate) {
18329
+ function instance$7($$self, $$props, $$invalidate) {
18017
18330
  let isError;
18018
18331
  let isDisabled;
18019
18332
  let isReadonly;
@@ -18130,7 +18443,7 @@ class TextArea extends SvelteElement {
18130
18443
  target: this.shadowRoot,
18131
18444
  props: attribute_to_object(this.attributes),
18132
18445
  customElement: true
18133
- }, instance$6, create_fragment$8, safe_not_equal, {
18446
+ }, instance$7, create_fragment$9, safe_not_equal, {
18134
18447
  name: 0,
18135
18448
  value: 1,
18136
18449
  placeholder: 2,
@@ -18334,7 +18647,7 @@ class TextArea extends SvelteElement {
18334
18647
  customElements.define("goa-textarea", TextArea);
18335
18648
  /* libs/web-components/src/layouts/FullScreenNavbarLayout.svelte generated by Svelte v3.51.0 */
18336
18649
 
18337
- function create_fragment$7(ctx) {
18650
+ function create_fragment$8(ctx) {
18338
18651
  let div;
18339
18652
  return {
18340
18653
  c() {
@@ -18378,7 +18691,7 @@ class FullScreenNavbarLayout extends SvelteElement {
18378
18691
  target: this.shadowRoot,
18379
18692
  props: attribute_to_object(this.attributes),
18380
18693
  customElement: true
18381
- }, null, create_fragment$7, safe_not_equal, {}, null);
18694
+ }, null, create_fragment$8, safe_not_equal, {}, null);
18382
18695
 
18383
18696
  if (options) {
18384
18697
  if (options.target) {
@@ -18392,7 +18705,7 @@ class FullScreenNavbarLayout extends SvelteElement {
18392
18705
  customElements.define("goa-layout-full-nav", FullScreenNavbarLayout);
18393
18706
  /* libs/web-components/src/layouts/one-column-layout/OneColumnLayout.svelte generated by Svelte v3.51.0 */
18394
18707
 
18395
- function create_fragment$6(ctx) {
18708
+ function create_fragment$7(ctx) {
18396
18709
  let div;
18397
18710
  return {
18398
18711
  c() {
@@ -18429,7 +18742,7 @@ class OneColumnLayout extends SvelteElement {
18429
18742
  target: this.shadowRoot,
18430
18743
  props: attribute_to_object(this.attributes),
18431
18744
  customElement: true
18432
- }, null, create_fragment$6, safe_not_equal, {}, null);
18745
+ }, null, create_fragment$7, safe_not_equal, {}, null);
18433
18746
 
18434
18747
  if (options) {
18435
18748
  if (options.target) {
@@ -18443,7 +18756,7 @@ class OneColumnLayout extends SvelteElement {
18443
18756
  customElements.define("goa-one-column-layout", OneColumnLayout);
18444
18757
  /* libs/web-components/src/layouts/two-column-layout/TwoColumnLayout.svelte generated by Svelte v3.51.0 */
18445
18758
 
18446
- function create_fragment$5(ctx) {
18759
+ function create_fragment$6(ctx) {
18447
18760
  let div;
18448
18761
  let header;
18449
18762
  let t0;
@@ -18513,7 +18826,7 @@ function create_fragment$5(ctx) {
18513
18826
  };
18514
18827
  }
18515
18828
 
18516
- function instance$5($$self, $$props, $$invalidate) {
18829
+ function instance$6($$self, $$props, $$invalidate) {
18517
18830
  let {
18518
18831
  navcolumnwidth = ""
18519
18832
  } = $$props;
@@ -18537,7 +18850,7 @@ class TwoColumnLayout extends SvelteElement {
18537
18850
  target: this.shadowRoot,
18538
18851
  props: attribute_to_object(this.attributes),
18539
18852
  customElement: true
18540
- }, instance$5, create_fragment$5, safe_not_equal, {
18853
+ }, instance$6, create_fragment$6, safe_not_equal, {
18541
18854
  navcolumnwidth: 0,
18542
18855
  maxcontentwidth: 1
18543
18856
  }, null);
@@ -18583,6 +18896,172 @@ class TwoColumnLayout extends SvelteElement {
18583
18896
  }
18584
18897
 
18585
18898
  customElements.define("goa-two-column-layout", TwoColumnLayout);
18899
+ /* libs/web-components/src/layouts/three-column-layout/ThreeColumnLayout.svelte generated by Svelte v3.51.0 */
18900
+
18901
+ function create_fragment$5(ctx) {
18902
+ let div;
18903
+ let header;
18904
+ let t0;
18905
+ let section;
18906
+ let t3;
18907
+ let footer;
18908
+ let div_style_value;
18909
+ return {
18910
+ c() {
18911
+ div = element("div");
18912
+ header = element("header");
18913
+ header.innerHTML = `<slot name="header"></slot>`;
18914
+ t0 = space();
18915
+ section = element("section");
18916
+ section.innerHTML = `<nav class="nav"><slot name="nav"></slot></nav>
18917
+
18918
+ <main><slot></slot></main>
18919
+
18920
+ <nav class="nav sidebar"><slot name="sidebar"></slot></nav>`;
18921
+ t3 = space();
18922
+ footer = element("footer");
18923
+ footer.innerHTML = `<slot name="footer"></slot>`;
18924
+ this.c = noop;
18925
+ attr(header, "class", "header");
18926
+ attr(section, "class", "content");
18927
+ attr(footer, "class", "footer");
18928
+ attr(div, "class", "page");
18929
+ attr(div, "style", div_style_value = `
18930
+ --max-content-width: ${
18931
+ /*maxcontentwidth*/
18932
+ ctx[2] || "100%"};
18933
+ --nav-column-width: ${
18934
+ /*leftcolumnwidth*/
18935
+ ctx[0] || "256px"};
18936
+ --sidebar-column-width: ${
18937
+ /*rightcolumnwidth*/
18938
+ ctx[1] || "256px"}
18939
+ `);
18940
+ },
18941
+
18942
+ m(target, anchor) {
18943
+ insert(target, div, anchor);
18944
+ append(div, header);
18945
+ append(div, t0);
18946
+ append(div, section);
18947
+ append(div, t3);
18948
+ append(div, footer);
18949
+ },
18950
+
18951
+ p(ctx, [dirty]) {
18952
+ if (dirty &
18953
+ /*maxcontentwidth, leftcolumnwidth, rightcolumnwidth*/
18954
+ 7 && div_style_value !== (div_style_value = `
18955
+ --max-content-width: ${
18956
+ /*maxcontentwidth*/
18957
+ ctx[2] || "100%"};
18958
+ --nav-column-width: ${
18959
+ /*leftcolumnwidth*/
18960
+ ctx[0] || "256px"};
18961
+ --sidebar-column-width: ${
18962
+ /*rightcolumnwidth*/
18963
+ ctx[1] || "256px"}
18964
+ `)) {
18965
+ attr(div, "style", div_style_value);
18966
+ }
18967
+ },
18968
+
18969
+ i: noop,
18970
+ o: noop,
18971
+
18972
+ d(detaching) {
18973
+ if (detaching) detach(div);
18974
+ }
18975
+
18976
+ };
18977
+ }
18978
+
18979
+ function instance$5($$self, $$props, $$invalidate) {
18980
+ let {
18981
+ leftcolumnwidth
18982
+ } = $$props;
18983
+ let {
18984
+ rightcolumnwidth
18985
+ } = $$props;
18986
+ let {
18987
+ maxcontentwidth
18988
+ } = $$props;
18989
+
18990
+ $$self.$$set = $$props => {
18991
+ if ('leftcolumnwidth' in $$props) $$invalidate(0, leftcolumnwidth = $$props.leftcolumnwidth);
18992
+ if ('rightcolumnwidth' in $$props) $$invalidate(1, rightcolumnwidth = $$props.rightcolumnwidth);
18993
+ if ('maxcontentwidth' in $$props) $$invalidate(2, maxcontentwidth = $$props.maxcontentwidth);
18994
+ };
18995
+
18996
+ return [leftcolumnwidth, rightcolumnwidth, maxcontentwidth];
18997
+ }
18998
+
18999
+ class ThreeColumnLayout extends SvelteElement {
19000
+ constructor(options) {
19001
+ super();
19002
+ this.shadowRoot.innerHTML = `<style>*{box-sizing:border-box}.page{min-height:100vh;display:flex;flex-direction:column;position:relative}.content{flex:1 1 auto;position:relative;display:flex;flex-direction:column;gap:2rem}.header,.footer{flex:0 0 auto}main{flex:1 1 auto;padding:0 1rem}.nav{padding:0 1rem;transition:transform 200ms ease-in-out;background-color:var(--goa-color-greyscale-white)}.nav>*{display:block;padding:0.5rem 0}@media(min-width: 640px){.page{gap:2rem}.content{display:flex;flex-direction:row;justify-content:center;width:min(var(--max-content-width), 100vw);margin:0 auto}.nav{padding:0 2rem;transform:translateX(0)}.nav:not(.sidebar){flex:0 0 var(--nav-column-width)}.nav.sidebar{flex:0 0 var(--sidebar-column-width)}main{padding-right:2rem}}@media(min-width: 1300px){main{padding-right:4.5rem}}</style>`;
19003
+ init(this, {
19004
+ target: this.shadowRoot,
19005
+ props: attribute_to_object(this.attributes),
19006
+ customElement: true
19007
+ }, instance$5, create_fragment$5, safe_not_equal, {
19008
+ leftcolumnwidth: 0,
19009
+ rightcolumnwidth: 1,
19010
+ maxcontentwidth: 2
19011
+ }, null);
19012
+
19013
+ if (options) {
19014
+ if (options.target) {
19015
+ insert(options.target, this, options.anchor);
19016
+ }
19017
+
19018
+ if (options.props) {
19019
+ this.$set(options.props);
19020
+ flush();
19021
+ }
19022
+ }
19023
+ }
19024
+
19025
+ static get observedAttributes() {
19026
+ return ["leftcolumnwidth", "rightcolumnwidth", "maxcontentwidth"];
19027
+ }
19028
+
19029
+ get leftcolumnwidth() {
19030
+ return this.$$.ctx[0];
19031
+ }
19032
+
19033
+ set leftcolumnwidth(leftcolumnwidth) {
19034
+ this.$$set({
19035
+ leftcolumnwidth
19036
+ });
19037
+ flush();
19038
+ }
19039
+
19040
+ get rightcolumnwidth() {
19041
+ return this.$$.ctx[1];
19042
+ }
19043
+
19044
+ set rightcolumnwidth(rightcolumnwidth) {
19045
+ this.$$set({
19046
+ rightcolumnwidth
19047
+ });
19048
+ flush();
19049
+ }
19050
+
19051
+ get maxcontentwidth() {
19052
+ return this.$$.ctx[2];
19053
+ }
19054
+
19055
+ set maxcontentwidth(maxcontentwidth) {
19056
+ this.$$set({
19057
+ maxcontentwidth
19058
+ });
19059
+ flush();
19060
+ }
19061
+
19062
+ }
19063
+
19064
+ customElements.define("goa-three-column-layout", ThreeColumnLayout);
18586
19065
  /* libs/web-components/src/components/form-stepper/FormStepper.svelte generated by Svelte v3.51.0 */
18587
19066
 
18588
19067
  function create_if_block$3(ctx) {
@@ -19069,7 +19548,7 @@ function create_else_block$1(ctx) {
19069
19548
  }
19070
19549
 
19071
19550
  };
19072
- } // (152:38)
19551
+ } // (158:38)
19073
19552
 
19074
19553
 
19075
19554
  function create_if_block_3$2(ctx) {
@@ -19091,7 +19570,7 @@ function create_if_block_3$2(ctx) {
19091
19570
  }
19092
19571
 
19093
19572
  };
19094
- } // (150:36)
19573
+ } // (156:36)
19095
19574
 
19096
19575
 
19097
19576
  function create_if_block_2$2(ctx) {
@@ -19114,7 +19593,7 @@ function create_if_block_2$2(ctx) {
19114
19593
  }
19115
19594
 
19116
19595
  };
19117
- } // (148:4) {#if _isCurrent}
19596
+ } // (154:4) {#if _isCurrent}
19118
19597
 
19119
19598
 
19120
19599
  function create_if_block_1$2(ctx) {
@@ -19136,7 +19615,7 @@ function create_if_block_1$2(ctx) {
19136
19615
  }
19137
19616
 
19138
19617
  };
19139
- } // (160:4) {#if status === "incomplete"}
19618
+ } // (166:4) {#if status === "incomplete"}
19140
19619
 
19141
19620
 
19142
19621
  function create_if_block$2(ctx) {
@@ -19163,7 +19642,7 @@ function create_if_block$2(ctx) {
19163
19642
  function create_fragment$3(ctx) {
19164
19643
  let label;
19165
19644
  let input;
19166
- let input_disabled_value;
19645
+ let input_aria_disabled_value;
19167
19646
  let t0;
19168
19647
  let div0;
19169
19648
  let t1;
@@ -19216,9 +19695,9 @@ function create_fragment$3(ctx) {
19216
19695
  input.checked =
19217
19696
  /*_isCurrent*/
19218
19697
  ctx[7];
19219
- input.disabled = input_disabled_value = !
19698
+ attr(input, "aria-disabled", input_aria_disabled_value = !
19220
19699
  /*_isEnabled*/
19221
- ctx[6];
19700
+ ctx[6]);
19222
19701
  attr(div0, "data-testid", "status");
19223
19702
  attr(div0, "class", "status");
19224
19703
  attr(div1, "class", "text");
@@ -19289,10 +19768,10 @@ function create_fragment$3(ctx) {
19289
19768
 
19290
19769
  if (dirty &
19291
19770
  /*_isEnabled*/
19292
- 64 && input_disabled_value !== (input_disabled_value = !
19771
+ 64 && input_aria_disabled_value !== (input_aria_disabled_value = !
19293
19772
  /*_isEnabled*/
19294
19773
  ctx[6])) {
19295
- input.disabled = input_disabled_value;
19774
+ attr(input, "aria-disabled", input_aria_disabled_value);
19296
19775
  }
19297
19776
 
19298
19777
  if (current_block_type === (current_block_type = select_block_type(ctx)) && if_block0) {
@@ -19487,7 +19966,7 @@ function instance$3($$self, $$props, $$invalidate) {
19487
19966
  class FormStep extends SvelteElement {
19488
19967
  constructor(options) {
19489
19968
  super();
19490
- this.shadowRoot.innerHTML = `<style>input[type=checkbox]{position:absolute;left:-9999px}[role="listitem"]{display:flex;box-sizing:border-box;height:100%;text-align:center;flex-direction:column;align-items:center;padding:var(--goa-space-l)}[role="listitem"]:not([aria-disabled="true"]):focus-within,[role="listitem"]:not([aria-disabled="true"]):focus,[role="listitem"]:not([aria-disabled="true"]):active{outline:var(--goa-color-interactive-focus) solid var(--goa-border-width-l)}[role="listitem"]:not([aria-disabled="true"]):hover{background-color:rgba(0,0,0,0.05);cursor:pointer}.status{flex:0 0 auto;display:flex;align-items:center;justify-content:center;box-sizing:border-box;border-radius:999px;border:4px solid var(--goa-color-interactive-default);background:var(--goa-color-greyscale-white);height:2.5rem;width:2.5rem}[aria-current="step"] .text{font-weight:var(--goa-font-weight-bold)
19969
+ this.shadowRoot.innerHTML = `<style>input[type=checkbox]{position:absolute;left:-9999px}[role="listitem"]{display:flex;box-sizing:border-box;height:100%;text-align:center;flex-direction:column;align-items:center;padding:var(--goa-space-l)}[role="listitem"]:not([aria-disabled="true"]):not([aria-current="step"]):focus-within,[role="listitem"]:not([aria-disabled="true"]):not([aria-current="step"]):focus,[role="listitem"]:not([aria-disabled="true"]):not([aria-current="step"]):active{outline:var(--goa-color-interactive-focus) solid var(--goa-border-width-l)}[role="listitem"]:not([aria-disabled="true"]):not([aria-current="step"]):hover{background-color:rgba(0,0,0,0.05);cursor:pointer}.status{flex:0 0 auto;display:flex;align-items:center;justify-content:center;box-sizing:border-box;border-radius:999px;border:4px solid var(--goa-color-interactive-default);background:var(--goa-color-greyscale-white);height:2.5rem;width:2.5rem}.status>*{fill:var(--fill-color, var(--goa-color-interactive-default));color:var(--fill-color, var(--goa-color-interactive-default))}[aria-current="step"] .text{font-weight:var(--goa-font-weight-bold)
19491
19970
  }[data-status=complete] .status{background:var(--goa-color-interactive-default)}[aria-current="step"][data-status=complete] .status{background:var(--goa-color-greyscale-white)}.step-number{margin-bottom:var(--font-valign-fix);font-weight:var(--goa-font-weight-bold);color:var(--goa-color-text-secondary)}[role="listitem"]:not(
19492
19971
  [data-status=complete],
19493
19972
  [data-status=incomplete],
@@ -21712,6 +22191,7 @@ const GoAButton = ({
21712
22191
  const GoACallout = ({
21713
22192
  heading,
21714
22193
  type: _type = "information",
22194
+ size: _size = "large",
21715
22195
  testId,
21716
22196
  children,
21717
22197
  mt,
@@ -21722,6 +22202,7 @@ const GoACallout = ({
21722
22202
  return jsx("goa-callout", Object.assign({
21723
22203
  heading: heading,
21724
22204
  type: _type,
22205
+ size: _size,
21725
22206
  mt: mt,
21726
22207
  mr: mr,
21727
22208
  mb: mb,
@@ -22079,6 +22560,7 @@ const GoAHeroBanner = ({
22079
22560
  heading,
22080
22561
  backgroundUrl,
22081
22562
  minHeight,
22563
+ maxContentWidth,
22082
22564
  children,
22083
22565
  testId
22084
22566
  }) => {
@@ -22086,6 +22568,7 @@ const GoAHeroBanner = ({
22086
22568
  heading: heading,
22087
22569
  backgroundurl: backgroundUrl,
22088
22570
  minheight: minHeight,
22571
+ maxcontentwidth: maxContentWidth,
22089
22572
  "data-testid": testId
22090
22573
  }, {
22091
22574
  children: children
@@ -22463,13 +22946,15 @@ const GoAMicrositeHeader = ({
22463
22946
  type,
22464
22947
  version,
22465
22948
  feedbackUrl,
22949
+ maxContentWidth,
22466
22950
  testId
22467
22951
  }) => {
22468
22952
  return jsx("goa-microsite-header", {
22469
22953
  type: type,
22470
22954
  version: version,
22471
22955
  feedbackurl: feedbackUrl,
22472
- "data-testid": testId
22956
+ "data-testid": testId,
22957
+ maxcontentwidth: maxContentWidth
22473
22958
  }, void 0);
22474
22959
  };
22475
22960
 
@@ -22531,6 +23016,7 @@ const GoAModal = ({
22531
23016
 
22532
23017
  const GoANotification = ({
22533
23018
  type: _type = "information",
23019
+ maxContentWidth,
22534
23020
  children,
22535
23021
  testId,
22536
23022
  onDismiss
@@ -22555,7 +23041,8 @@ const GoANotification = ({
22555
23041
  return jsx("goa-notification", Object.assign({
22556
23042
  ref: el,
22557
23043
  type: _type,
22558
- "data-testid": testId
23044
+ "data-testid": testId,
23045
+ maxcontentwidth: maxContentWidth
22559
23046
  }, {
22560
23047
  children: children
22561
23048
  }), void 0);
@@ -22693,12 +23180,20 @@ const GoAPopover = ({
22693
23180
  testId,
22694
23181
  maxWidth,
22695
23182
  padded,
22696
- children
23183
+ children,
23184
+ mt,
23185
+ mr,
23186
+ mb,
23187
+ ml
22697
23188
  }) => {
22698
23189
  return jsxs("goa-popover", Object.assign({
22699
23190
  "data-testid": testId,
22700
23191
  maxwidth: maxWidth,
22701
- padded: padded
23192
+ padded: padded,
23193
+ mt: mt,
23194
+ mr: mr,
23195
+ mb: mb,
23196
+ ml: ml
22702
23197
  }, {
22703
23198
  children: [children, target && jsx("div", Object.assign({
22704
23199
  slot: "target"
@@ -22879,4 +23374,30 @@ function GoATwoColumnLayout(props) {
22879
23374
  }), void 0);
22880
23375
  }
22881
23376
 
22882
- export { GoAAccordion, GoAAppFooter, GoAAppFooterMetaSection, GoAAppFooterNavSection, GoAAppHeader, GoABadge, GoABlock, GoAButton, GoAButtonGroup, GoACallout, GoACheckbox, GoAChip, GoACircularProgress, GoAContainer, GoADetails, GoADivider, GoADropdown, GoADropdownItem, GoADropdownOption, GoAEmergencyBadge, GoAFileUploadCard, GoAFileUploadInput, GoAFormItem, GoAFormStep, GoAFormStepper, GoAGrid, GoAHeroBanner, GoAHeroBannerActions, GoAIcon, GoAIconButton, GoAImportantBadge, GoAInfoBadge, GoAInput, GoAInputDate, GoAInputDateTime, GoAInputEmail, GoAInputFile, GoAInputMonth, GoAInputNumber, GoAInputPassword, GoAInputRange, GoAInputSearch, GoAInputTel, GoAInputText, GoAInputTime, GoAInputUrl, GoAMicrositeHeader, GoAModal, GoANotification, GoAOneColumnLayout, GoAPageBlock, GoAPages, GoAPagination, GoAPopover, GoARadioGroup, GoARadioItem, GoASkeleton, GoASpacer, GoASpinner, GoASuccessBadge, GoATable, GoATextArea, GoATwoColumnLayout };
23377
+ function GoAThreeColumnLayout(props) {
23378
+ return jsxs("goa-three-column-layout", Object.assign({
23379
+ leftcolumnwidth: props.leftColumnWidth,
23380
+ rightcolumnwidth: props.rightColumnWidth,
23381
+ maxcontentwidth: props.maxContentWidth
23382
+ }, {
23383
+ children: [props.header && jsx("div", Object.assign({
23384
+ slot: "header"
23385
+ }, {
23386
+ children: props.header
23387
+ }), void 0), props.nav && jsx("div", Object.assign({
23388
+ slot: "nav"
23389
+ }, {
23390
+ children: props.nav
23391
+ }), void 0), props.sidebar && jsx("div", Object.assign({
23392
+ slot: "sidebar"
23393
+ }, {
23394
+ children: props.sidebar
23395
+ }), void 0), props.children, props.footer && jsx("div", Object.assign({
23396
+ slot: "footer"
23397
+ }, {
23398
+ children: props.footer
23399
+ }), void 0)]
23400
+ }), void 0);
23401
+ }
23402
+
23403
+ export { GoAAccordion, GoAAppFooter, GoAAppFooterMetaSection, GoAAppFooterNavSection, GoAAppHeader, GoABadge, GoABlock, GoAButton, GoAButtonGroup, GoACallout, GoACheckbox, GoAChip, GoACircularProgress, GoAContainer, GoADetails, GoADivider, GoADropdown, GoADropdownItem, GoADropdownOption, GoAEmergencyBadge, GoAFileUploadCard, GoAFileUploadInput, GoAFormItem, GoAFormStep, GoAFormStepper, GoAGrid, GoAHeroBanner, GoAHeroBannerActions, GoAIcon, GoAIconButton, GoAImportantBadge, GoAInfoBadge, GoAInput, GoAInputDate, GoAInputDateTime, GoAInputEmail, GoAInputFile, GoAInputMonth, GoAInputNumber, GoAInputPassword, GoAInputRange, GoAInputSearch, GoAInputTel, GoAInputText, GoAInputTime, GoAInputUrl, GoAMicrositeHeader, GoAModal, GoANotification, GoAOneColumnLayout, GoAPageBlock, GoAPages, GoAPagination, GoAPopover, GoARadioGroup, GoARadioItem, GoASkeleton, GoASpacer, GoASpinner, GoASuccessBadge, GoATable, GoATextArea, GoAThreeColumnLayout, GoATwoColumnLayout };