@abgov/react-components 4.3.0 → 4.5.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.
@@ -1067,7 +1067,6 @@
1067
1067
  }
1068
1068
  /* libs/web-components/src/components/app-header/AppHeader.svelte generated by Svelte v3.51.0 */
1069
1069
 
1070
-
1071
1070
  function create_else_block$4(ctx) {
1072
1071
  let div;
1073
1072
  let img0;
@@ -1125,7 +1124,7 @@
1125
1124
  } // (19:4) {#if url}
1126
1125
 
1127
1126
 
1128
- function create_if_block$h(ctx) {
1127
+ function create_if_block$i(ctx) {
1129
1128
  let a;
1130
1129
  let img0;
1131
1130
  let img0_src_value;
@@ -1192,7 +1191,7 @@
1192
1191
  };
1193
1192
  }
1194
1193
 
1195
- function create_fragment$F(ctx) {
1194
+ function create_fragment$G(ctx) {
1196
1195
  let div2;
1197
1196
  let div1;
1198
1197
  let t;
@@ -1202,7 +1201,7 @@
1202
1201
  function select_block_type(ctx, dirty) {
1203
1202
  if (
1204
1203
  /*url*/
1205
- ctx[1]) return create_if_block$h;
1204
+ ctx[1]) return create_if_block$i;
1206
1205
  return create_else_block$4;
1207
1206
  }
1208
1207
 
@@ -1276,7 +1275,7 @@
1276
1275
  };
1277
1276
  }
1278
1277
 
1279
- function instance$z($$self, $$props, $$invalidate) {
1278
+ function instance$A($$self, $$props, $$invalidate) {
1280
1279
  let {
1281
1280
  heading = ""
1282
1281
  } = $$props;
@@ -1303,12 +1302,12 @@
1303
1302
  class AppHeader extends SvelteElement {
1304
1303
  constructor(options) {
1305
1304
  super();
1306
- this.shadowRoot.innerHTML = `<style>*{box-sizing:border-box;font-family:var(--font-family)}.app-header{margin:0 auto;background-color:var(--color-white);border-bottom:1px solid var(--color-gray-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>`;
1305
+ 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>`;
1307
1306
  init(this, {
1308
1307
  target: this.shadowRoot,
1309
1308
  props: attribute_to_object(this.attributes),
1310
1309
  customElement: true
1311
- }, instance$z, create_fragment$F, safe_not_equal, {
1310
+ }, instance$A, create_fragment$G, safe_not_equal, {
1312
1311
  heading: 0,
1313
1312
  url: 1,
1314
1313
  testid: 2,
@@ -1380,7 +1379,7 @@
1380
1379
  customElements.define("goa-app-header", AppHeader);
1381
1380
 
1382
1381
  function calculateMargin(mt, mr, mb, ml) {
1383
- return [mt && `margin-top:var(--goa-spacing-${mt});`, mr && `margin-right:var(--goa-spacing-${mr});`, mb && `margin-bottom:var(--goa-spacing-${mb});`, ml && `margin-left:var(--goa-spacing-${ml});`].join(" ");
1382
+ return [mt && `margin-top:var(--goa-space-${mt});`, mr && `margin-right:var(--goa-space-${mr});`, mb && `margin-bottom:var(--goa-space-${mb});`, ml && `margin-left:var(--goa-space-${ml});`].join(" ");
1384
1383
  }
1385
1384
 
1386
1385
  function injectCss(el, rootSelector, css, media) {
@@ -1493,7 +1492,7 @@
1493
1492
  } // (50:2) {#if content}
1494
1493
 
1495
1494
 
1496
- function create_if_block$g(ctx) {
1495
+ function create_if_block$h(ctx) {
1497
1496
  let div;
1498
1497
  let t;
1499
1498
  return {
@@ -1525,7 +1524,7 @@
1525
1524
  };
1526
1525
  }
1527
1526
 
1528
- function create_fragment$E(ctx) {
1527
+ function create_fragment$F(ctx) {
1529
1528
  let div;
1530
1529
  let t;
1531
1530
  let div_style_value;
@@ -1542,7 +1541,7 @@
1542
1541
  let if_block0 = current_block_type(ctx);
1543
1542
  let if_block1 =
1544
1543
  /*content*/
1545
- ctx[2] && create_if_block$g(ctx);
1544
+ ctx[2] && create_if_block$h(ctx);
1546
1545
  return {
1547
1546
  c() {
1548
1547
  div = element("div");
@@ -1599,7 +1598,7 @@
1599
1598
  if (if_block1) {
1600
1599
  if_block1.p(ctx, dirty);
1601
1600
  } else {
1602
- if_block1 = create_if_block$g(ctx);
1601
+ if_block1 = create_if_block$h(ctx);
1603
1602
  if_block1.c();
1604
1603
  if_block1.m(div, null);
1605
1604
  }
@@ -1661,7 +1660,7 @@
1661
1660
  };
1662
1661
  }
1663
1662
 
1664
- function instance$y($$self, $$props, $$invalidate) {
1663
+ function instance$z($$self, $$props, $$invalidate) {
1665
1664
  let showIcon;
1666
1665
  let iconType;
1667
1666
  const [Types, validateType] = typeValidator("Badge type", ["success", "important", "information", "emergency", "dark", "midtone", "light"], true);
@@ -1736,14 +1735,12 @@
1736
1735
  class Badge extends SvelteElement {
1737
1736
  constructor(options) {
1738
1737
  super();
1739
- this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.goa-badge{display:inline-flex;align-items:center;border-radius:0.25rem;padding:3px 0.5rem;gap:0.25rem;font-weight:var(--fw-regular)}.icon-only{padding:0.25rem}.goa-badge-content{text-transform:capitalize;font-size:var(--fs-sm);line-height:var(--lh-sm);padding-bottom:var(
1740
- --font-valign-fix
1741
- )}.goa-badge.badge-information{background-color:var(--color-gray-100);color:var(--goa-color-status-info)}.goa-badge.badge-success{background-color:var(--goa-color-status-success);color:var(--goa-color-text-light)}.goa-badge.badge-important{background-color:var(--goa-color-status-warning);color:var(--goa-color-text)}.goa-badge.badge-emergency{background-color:var(--goa-color-status-emergency);color:var(--goa-color-text-light)}.goa-badge.badge-dark{background-color:var(--color-black);color:var(--goa-color-text-light)}.goa-badge.badge-midtone{background-color:var(--color-gray-600);color:var(--goa-color-text-light)}.goa-badge.badge-light{background-color:var(--color-white);color:var(--goa-color-text)}</style>`;
1738
+ this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.goa-badge{display:inline-flex;align-items:center;border-radius:0.25rem;padding:3px 0.5rem;gap:0.25rem;font-weight:var(--goa-font-weight-regular)}.icon-only{padding:0.25rem}.goa-badge-content{text-transform:capitalize;font-size:var(--goa-font-size-2);line-height:var(--goa-line-height-1);padding-bottom:var(--font-valign-fix, 0)}.goa-badge.badge-information{background-color:var(--goa-color-greyscale-100);color:var(--goa-color-info-default)}.goa-badge.badge-success{background-color:var(--goa-color-success-default);color:var(--goa-color-text-light)}.goa-badge.badge-important{background-color:var(--goa-color-warning-default);color:var(--goa-color-text-default)}.goa-badge.badge-emergency{background-color:var(--goa-color-emergency-default);color:var(--goa-color-text-light)}.goa-badge.badge-dark{background-color:var(--goa-color-greyscale-black);color:var(--goa-color-text-light)}.goa-badge.badge-midtone{background-color:var(--goa-color-greyscale-700);color:var(--goa-color-text-light)}.goa-badge.badge-light{background-color:var(--goa-color-greyscale-white);color:var(--goa-color-text-default)}</style>`;
1742
1739
  init(this, {
1743
1740
  target: this.shadowRoot,
1744
1741
  props: attribute_to_object(this.attributes),
1745
1742
  customElement: true
1746
- }, instance$y, create_fragment$E, safe_not_equal, {
1743
+ }, instance$z, create_fragment$F, safe_not_equal, {
1747
1744
  type: 0,
1748
1745
  testid: 1,
1749
1746
  content: 2,
@@ -1863,7 +1860,7 @@
1863
1860
  customElements.define("goa-badge", Badge);
1864
1861
  /* libs/web-components/src/components/block/Block.svelte generated by Svelte v3.51.0 */
1865
1862
 
1866
- function create_fragment$D(ctx) {
1863
+ function create_fragment$E(ctx) {
1867
1864
  let div;
1868
1865
  let slot;
1869
1866
  let div_style_value;
@@ -1882,8 +1879,8 @@
1882
1879
  /*mb*/
1883
1880
  ctx[5],
1884
1881
  /*ml*/
1885
- ctx[6])}
1886
- --gap: var(--goa-spacing-${
1882
+ ctx[6])};
1883
+ --gap: var(--goa-space-${
1887
1884
  /*gap*/
1888
1885
  ctx[0]});
1889
1886
  --alignment: ${
@@ -1912,8 +1909,8 @@
1912
1909
  /*mb*/
1913
1910
  ctx[5],
1914
1911
  /*ml*/
1915
- ctx[6])}
1916
- --gap: var(--goa-spacing-${
1912
+ ctx[6])};
1913
+ --gap: var(--goa-space-${
1917
1914
  /*gap*/
1918
1915
  ctx[0]});
1919
1916
  --alignment: ${
@@ -1937,7 +1934,7 @@
1937
1934
  };
1938
1935
  }
1939
1936
 
1940
- function instance$x($$self, $$props, $$invalidate) {
1937
+ function instance$y($$self, $$props, $$invalidate) {
1941
1938
  let {
1942
1939
  gap = "m"
1943
1940
  } = $$props;
@@ -1981,7 +1978,7 @@
1981
1978
  target: this.shadowRoot,
1982
1979
  props: attribute_to_object(this.attributes),
1983
1980
  customElement: true
1984
- }, instance$x, create_fragment$D, safe_not_equal, {
1981
+ }, instance$y, create_fragment$E, safe_not_equal, {
1985
1982
  gap: 0,
1986
1983
  direction: 1,
1987
1984
  alignment: 2,
@@ -2091,7 +2088,7 @@
2091
2088
 
2092
2089
  function create_else_block$2(ctx) {
2093
2090
  let t0;
2094
- let slot;
2091
+ let span;
2095
2092
  let t1;
2096
2093
  let if_block1_anchor;
2097
2094
  let if_block0 =
@@ -2104,17 +2101,18 @@
2104
2101
  c() {
2105
2102
  if (if_block0) if_block0.c();
2106
2103
  t0 = space();
2107
- slot = element("slot");
2104
+ span = element("span");
2105
+ span.innerHTML = `<slot></slot>`;
2108
2106
  t1 = space();
2109
2107
  if (if_block1) if_block1.c();
2110
2108
  if_block1_anchor = empty();
2111
- attr(slot, "class", "text");
2109
+ attr(span, "class", "text");
2112
2110
  },
2113
2111
 
2114
2112
  m(target, anchor) {
2115
2113
  if (if_block0) if_block0.m(target, anchor);
2116
2114
  insert(target, t0, anchor);
2117
- insert(target, slot, anchor);
2115
+ insert(target, span, anchor);
2118
2116
  insert(target, t1, anchor);
2119
2117
  if (if_block1) if_block1.m(target, anchor);
2120
2118
  insert(target, if_block1_anchor, anchor);
@@ -2155,33 +2153,34 @@
2155
2153
  d(detaching) {
2156
2154
  if (if_block0) if_block0.d(detaching);
2157
2155
  if (detaching) detach(t0);
2158
- if (detaching) detach(slot);
2156
+ if (detaching) detach(span);
2159
2157
  if (detaching) detach(t1);
2160
2158
  if (if_block1) if_block1.d(detaching);
2161
2159
  if (detaching) detach(if_block1_anchor);
2162
2160
  }
2163
2161
 
2164
2162
  };
2165
- } // (45:2) {#if type === "start"}
2163
+ } // (46:2) {#if type === "start"}
2166
2164
 
2167
2165
 
2168
- function create_if_block$f(ctx) {
2169
- let slot;
2166
+ function create_if_block$g(ctx) {
2167
+ let span;
2170
2168
  let t;
2171
2169
  let goa_icon;
2172
2170
  return {
2173
2171
  c() {
2174
- slot = element("slot");
2172
+ span = element("span");
2173
+ span.innerHTML = `<slot></slot>`;
2175
2174
  t = space();
2176
2175
  goa_icon = element("goa-icon");
2177
- attr(slot, "class", "text");
2176
+ attr(span, "class", "text");
2178
2177
  set_custom_element_data(goa_icon, "id", "trailing-icon");
2179
2178
  set_custom_element_data(goa_icon, "type", "arrow-forward");
2180
2179
  set_custom_element_data(goa_icon, "inverted", "true");
2181
2180
  },
2182
2181
 
2183
2182
  m(target, anchor) {
2184
- insert(target, slot, anchor);
2183
+ insert(target, span, anchor);
2185
2184
  insert(target, t, anchor);
2186
2185
  insert(target, goa_icon, anchor);
2187
2186
  },
@@ -2189,13 +2188,13 @@
2189
2188
  p: noop,
2190
2189
 
2191
2190
  d(detaching) {
2192
- if (detaching) detach(slot);
2191
+ if (detaching) detach(span);
2193
2192
  if (detaching) detach(t);
2194
2193
  if (detaching) detach(goa_icon);
2195
2194
  }
2196
2195
 
2197
2196
  };
2198
- } // (49:4) {#if leadingicon}
2197
+ } // (52:4) {#if leadingicon}
2199
2198
 
2200
2199
 
2201
2200
  function create_if_block_2$6(ctx) {
@@ -2209,7 +2208,7 @@
2209
2208
  ctx[3]);
2210
2209
  set_custom_element_data(goa_icon, "inverted",
2211
2210
  /*isButtonDark*/
2212
- ctx[10]);
2211
+ ctx[11]);
2213
2212
  },
2214
2213
 
2215
2214
  m(target, anchor) {
@@ -2227,10 +2226,10 @@
2227
2226
 
2228
2227
  if (dirty &
2229
2228
  /*isButtonDark*/
2230
- 1024) {
2229
+ 2048) {
2231
2230
  set_custom_element_data(goa_icon, "inverted",
2232
2231
  /*isButtonDark*/
2233
- ctx[10]);
2232
+ ctx[11]);
2234
2233
  }
2235
2234
  },
2236
2235
 
@@ -2239,7 +2238,7 @@
2239
2238
  }
2240
2239
 
2241
2240
  };
2242
- } // (53:4) {#if trailingicon}
2241
+ } // (58:4) {#if trailingicon}
2243
2242
 
2244
2243
 
2245
2244
  function create_if_block_1$9(ctx) {
@@ -2253,7 +2252,7 @@
2253
2252
  ctx[4]);
2254
2253
  set_custom_element_data(goa_icon, "inverted",
2255
2254
  /*isButtonDark*/
2256
- ctx[10]);
2255
+ ctx[11]);
2257
2256
  },
2258
2257
 
2259
2258
  m(target, anchor) {
@@ -2271,10 +2270,10 @@
2271
2270
 
2272
2271
  if (dirty &
2273
2272
  /*isButtonDark*/
2274
- 1024) {
2273
+ 2048) {
2275
2274
  set_custom_element_data(goa_icon, "inverted",
2276
2275
  /*isButtonDark*/
2277
- ctx[10]);
2276
+ ctx[11]);
2278
2277
  }
2279
2278
  },
2280
2279
 
@@ -2285,7 +2284,7 @@
2285
2284
  };
2286
2285
  }
2287
2286
 
2288
- function create_fragment$C(ctx) {
2287
+ function create_fragment$D(ctx) {
2289
2288
  let button;
2290
2289
  let button_class_value;
2291
2290
  let button_style_value;
@@ -2295,7 +2294,7 @@
2295
2294
  function select_block_type(ctx, dirty) {
2296
2295
  if (
2297
2296
  /*type*/
2298
- ctx[0] === "start") return create_if_block$f;
2297
+ ctx[0] === "start") return create_if_block$g;
2299
2298
  return create_else_block$2;
2300
2299
  }
2301
2300
 
@@ -2324,7 +2323,7 @@
2324
2323
  ctx[9]));
2325
2324
  button.disabled =
2326
2325
  /*isDisabled*/
2327
- ctx[11];
2326
+ ctx[10];
2328
2327
  attr(button, "data-testid",
2329
2328
  /*testid*/
2330
2329
  ctx[5]);
@@ -2343,7 +2342,11 @@
2343
2342
  if_block.m(button, null);
2344
2343
 
2345
2344
  if (!mounted) {
2346
- dispose = [listen(button, "click", clickHandler), listen(button, "click", clickHandler)];
2345
+ dispose = [listen(button, "click",
2346
+ /*clickHandler*/
2347
+ ctx[12]), listen(button, "click",
2348
+ /*clickHandler*/
2349
+ ctx[12])];
2347
2350
  mounted = true;
2348
2351
  }
2349
2352
  },
@@ -2389,10 +2392,10 @@
2389
2392
 
2390
2393
  if (dirty &
2391
2394
  /*isDisabled*/
2392
- 2048) {
2395
+ 1024) {
2393
2396
  button.disabled =
2394
2397
  /*isDisabled*/
2395
- ctx[11];
2398
+ ctx[10];
2396
2399
  }
2397
2400
 
2398
2401
  if (dirty &
@@ -2435,15 +2438,7 @@
2435
2438
  };
2436
2439
  }
2437
2440
 
2438
- function clickHandler(e) {
2439
- this.dispatchEvent(new CustomEvent("_click", {
2440
- composed: true,
2441
- bubbles: true
2442
- }));
2443
- e.stopPropagation();
2444
- }
2445
-
2446
- function instance$w($$self, $$props, $$invalidate) {
2441
+ function instance$x($$self, $$props, $$invalidate) {
2447
2442
  let isDisabled;
2448
2443
  let isButtonDark;
2449
2444
  const [Types, validateType] = typeValidator("Button type", ["primary", "submit", "secondary", "tertiary", "start"], true);
@@ -2482,6 +2477,16 @@
2482
2477
  let {
2483
2478
  ml = null
2484
2479
  } = $$props;
2480
+
2481
+ function clickHandler(e) {
2482
+ if (!isDisabled) {
2483
+ this.dispatchEvent(new CustomEvent("_click", {
2484
+ composed: true,
2485
+ bubbles: true
2486
+ }));
2487
+ }
2488
+ }
2489
+
2485
2490
  onMount(() => {
2486
2491
  validateType(type);
2487
2492
  validateSize(size);
@@ -2492,7 +2497,7 @@
2492
2497
  if ('type' in $$props) $$invalidate(0, type = $$props.type);
2493
2498
  if ('size' in $$props) $$invalidate(1, size = $$props.size);
2494
2499
  if ('variant' in $$props) $$invalidate(2, variant = $$props.variant);
2495
- if ('disabled' in $$props) $$invalidate(12, disabled = $$props.disabled);
2500
+ if ('disabled' in $$props) $$invalidate(13, disabled = $$props.disabled);
2496
2501
  if ('leadingicon' in $$props) $$invalidate(3, leadingicon = $$props.leadingicon);
2497
2502
  if ('trailingicon' in $$props) $$invalidate(4, trailingicon = $$props.trailingicon);
2498
2503
  if ('testid' in $$props) $$invalidate(5, testid = $$props.testid);
@@ -2505,36 +2510,34 @@
2505
2510
  $$self.$$.update = () => {
2506
2511
  if ($$self.$$.dirty &
2507
2512
  /*disabled*/
2508
- 4096) {
2509
- $$invalidate(11, isDisabled = toBoolean(disabled));
2513
+ 8192) {
2514
+ $$invalidate(10, isDisabled = toBoolean(disabled));
2510
2515
  }
2511
2516
 
2512
2517
  if ($$self.$$.dirty &
2513
2518
  /*type*/
2514
2519
  1) {
2515
- $$invalidate(10, isButtonDark = type === "primary" || type === "start");
2520
+ $$invalidate(11, isButtonDark = type === "primary" || type === "start");
2516
2521
  }
2517
2522
  };
2518
2523
 
2519
- return [type, size, variant, leadingicon, trailingicon, testid, mt, mr, mb, ml, isButtonDark, isDisabled, disabled];
2524
+ return [type, size, variant, leadingicon, trailingicon, testid, mt, mr, mb, ml, isDisabled, isButtonDark, clickHandler, disabled];
2520
2525
  }
2521
2526
 
2522
2527
  class Button extends SvelteElement {
2523
2528
  constructor(options) {
2524
2529
  super();
2525
- this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}@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);box-sizing:border-box;cursor:pointer;font-family:var(--font-family);font-size:var(--fs-lg);font-weight:400;height:var(--button-height);letter-spacing:0.5px;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,
2526
- border-color 0.2s ease-in-out}.text{padding-bottom:var(
2527
- --font-valign-fix
2528
- )}button:disabled{pointer-events:none;opacity:0.5}button.compact{height:var(--button-height-compact);font-size:var(--fs-base)}button.start{height:var(--button-height-tall);font-weight:var(--fw-bold)}button.start,button.submit,button.primary{border:2px solid var(--goa-color-interactive);background-color:var(--goa-color-interactive);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--active);background-color:var(--goa-color-interactive--active);outline:none}button.secondary{border:2px solid var(--goa-color-interactive);background-color:var(--color-white);color:var(--goa-color-interactive)}button.secondary:hover{border-color:var(--goa-color-interactive--hover);color:var(--goa-color-interactive--hover);background-color:var(--color-gray-100)}button.secondary:focus,button.secondary:active{border-color:var(--goa-color-interactive--active);box-shadow:0 0 0 3px var(--goa-color-interactive--focus);background-color:var(--color-gray-100);outline:none}button.tertiary{border:1px solid transparent;background-color:transparent;color:var(--goa-color-interactive);text-decoration:underline}button.tertiary:hover{border-color:var(--color-gray-100);color:var(--goa-color-interactive--hover);background-color:var(--color-gray-100)}button.tertiary:focus,button.tertiary:active{border-color:var(--color-gray-100);background-color:var(--color-gray-100);color:var(--goa-color-interactive--active);box-shadow:0 0 0 3px var(--goa-color-interactive--focus);outline:none}.submit.destructive,.primary.destructive{color:var(--color-white);background-color:var(--goa-color-status-emergency);border-color:var(--goa-color-status-emergency)}.submit.destructive:hover,.primary.destructive:hover{background-color:var(--goa-color-status-emergency-dark);border-color:var(--goa-color-status-emergency-dark)}.submit.destructive:focus,.primary.destructive:focus,.primary.destructive:active{background-color:var(--goa-color-status-emergency-dark);border-color:var(--goa-color-status-emergency-dark)}.secondary.destructive{color:var(--goa-color-status-emergency);border-color:var(--goa-color-status-emergency);background-color:var(--color-white)}.secondary.destructive:hover{border-color:var(--goa-color-status-emergency-dark);color:var(--goa-color-status-emergency-dark);background-color:var(--color-white)}.secondary.destructive:focus,.secondary.destructive:active{color:var(--goa-color-status-emergency-dark);border-color:var(--goa-color-status-emergency-dark);background-color:var(--color-white)}.tertiary.destructive{color:var(--goa-color-status-emergency);border-color:var(--color-gray-200);background-color:var(--color-white)}.tertiary.destructive:hover{border-color:var(--goa-color-status-emergency-dark);color:var(--goa-color-status-emergency-dark);background-color:var(--color-white)}.tertiary.destructive:focus,.tertiary.destructive:active{color:var(--goa-color-status-emergency-dark);border-color:var(--goa-color-status-emergency-dark);background-color:var(--color-white)}</style>`;
2530
+ 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,
2531
+ 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:var(--goa-color-greyscale-200);background-color:var(--goa-color-greyscale-white)}.tertiary.destructive:hover{border-color:var(--goa-color-emergency-dark);color:var(--goa-color-emergency-dark);background-color:var(--goa-color-greyscale-white)}.tertiary.destructive:focus,.tertiary.destructive:active{color:var(--goa-color-emergency-dark);border-color:var(--goa-color-emergency-dark);background-color:var(--goa-color-greyscale-white)}</style>`;
2529
2532
  init(this, {
2530
2533
  target: this.shadowRoot,
2531
2534
  props: attribute_to_object(this.attributes),
2532
2535
  customElement: true
2533
- }, instance$w, create_fragment$C, safe_not_equal, {
2536
+ }, instance$x, create_fragment$D, safe_not_equal, {
2534
2537
  type: 0,
2535
2538
  size: 1,
2536
2539
  variant: 2,
2537
- disabled: 12,
2540
+ disabled: 13,
2538
2541
  leadingicon: 3,
2539
2542
  trailingicon: 4,
2540
2543
  testid: 5,
@@ -2594,7 +2597,7 @@
2594
2597
  }
2595
2598
 
2596
2599
  get disabled() {
2597
- return this.$$.ctx[12];
2600
+ return this.$$.ctx[13];
2598
2601
  }
2599
2602
 
2600
2603
  set disabled(disabled) {
@@ -2686,7 +2689,7 @@
2686
2689
  customElements.define("goa-button", Button);
2687
2690
  /* libs/web-components/src/components/button-group/ButtonGroup.svelte generated by Svelte v3.51.0 */
2688
2691
 
2689
- function create_fragment$B(ctx) {
2692
+ function create_fragment$C(ctx) {
2690
2693
  let div;
2691
2694
  let slot;
2692
2695
  let div_style_value;
@@ -2756,7 +2759,7 @@
2756
2759
  };
2757
2760
  }
2758
2761
 
2759
- function instance$v($$self, $$props, $$invalidate) {
2762
+ function instance$w($$self, $$props, $$invalidate) {
2760
2763
  let _alignment;
2761
2764
 
2762
2765
  let {
@@ -2815,12 +2818,12 @@
2815
2818
  class ButtonGroup extends SvelteElement {
2816
2819
  constructor(options) {
2817
2820
  super();
2818
- this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}div{display:flex;flex-direction:row;justify-content:var(--alignment);align-items:center;flex-wrap:wrap;gap:var(--gap-size);padding:3px 0}</style>`;
2821
+ this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}div{display:flex;flex-direction:row;justify-content:var(--alignment);align-items:center;flex-wrap:wrap;gap:var(--gap-size);padding:3px 0}</style>`;
2819
2822
  init(this, {
2820
2823
  target: this.shadowRoot,
2821
2824
  props: attribute_to_object(this.attributes),
2822
2825
  customElement: true
2823
- }, instance$v, create_fragment$B, safe_not_equal, {
2826
+ }, instance$w, create_fragment$C, safe_not_equal, {
2824
2827
  alignment: 7,
2825
2828
  gap: 0,
2826
2829
  testid: 1,
@@ -2928,7 +2931,7 @@
2928
2931
  customElements.define("goa-button-group", ButtonGroup);
2929
2932
  /* libs/web-components/src/components/callout/Callout.svelte generated by Svelte v3.51.0 */
2930
2933
 
2931
- function create_if_block$e(ctx) {
2934
+ function create_if_block$f(ctx) {
2932
2935
  let h3;
2933
2936
  let t;
2934
2937
  return {
@@ -2959,7 +2962,7 @@
2959
2962
  };
2960
2963
  }
2961
2964
 
2962
- function create_fragment$A(ctx) {
2965
+ function create_fragment$B(ctx) {
2963
2966
  let div;
2964
2967
  let span0;
2965
2968
  let goa_icon;
@@ -2972,7 +2975,7 @@
2972
2975
  let div_style_value;
2973
2976
  let if_block =
2974
2977
  /*heading*/
2975
- ctx[5] && create_if_block$e(ctx);
2978
+ ctx[5] && create_if_block$f(ctx);
2976
2979
  return {
2977
2980
  c() {
2978
2981
  div = element("div");
@@ -3051,7 +3054,7 @@
3051
3054
  if (if_block) {
3052
3055
  if_block.p(ctx, dirty);
3053
3056
  } else {
3054
- if_block = create_if_block$e(ctx);
3057
+ if_block = create_if_block$f(ctx);
3055
3058
  if_block.c();
3056
3059
  if_block.m(span1, t1);
3057
3060
  }
@@ -3094,7 +3097,7 @@
3094
3097
  };
3095
3098
  }
3096
3099
 
3097
- function instance$u($$self, $$props, $$invalidate) {
3100
+ function instance$v($$self, $$props, $$invalidate) {
3098
3101
  let iconType;
3099
3102
  const [Types, validateType] = typeValidator("Callout type", ["emergency", "important", "information", "event", "success"], true);
3100
3103
  let {
@@ -3146,12 +3149,12 @@
3146
3149
  class Callout extends SvelteElement {
3147
3150
  constructor(options) {
3148
3151
  super();
3149
- this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.notification{display:flex;align-items:stretch;border-radius:3px;overflow:hidden}h3{font-size:var(--fs-xl);line-height:var(--lh-base);font-weight:var(--fw-regular);margin-top:0}.emergency{background-color:var(--goa-color-status-emergency)}.important{background-color:var(--goa-color-status-warning)}.information{background-color:var(--goa-color-status-info)}.event{background-color:var(--goa-color-status-info)}.success{background-color:var(--goa-color-status-success)}.icon{flex:0 0 3rem;text-align:center;padding-top:1.75rem}.content{flex:1 1 auto;background-color:var(--color-gray-100);padding:1.75rem}</style>`;
3152
+ 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>`;
3150
3153
  init(this, {
3151
3154
  target: this.shadowRoot,
3152
3155
  props: attribute_to_object(this.attributes),
3153
3156
  customElement: true
3154
- }, instance$u, create_fragment$A, safe_not_equal, {
3157
+ }, instance$v, create_fragment$B, safe_not_equal, {
3155
3158
  mt: 0,
3156
3159
  mr: 1,
3157
3160
  mb: 2,
@@ -3259,7 +3262,7 @@
3259
3262
  customElements.define("goa-callout", Callout);
3260
3263
  /* libs/web-components/src/components/card-actions/CardActions.svelte generated by Svelte v3.51.0 */
3261
3264
 
3262
- function create_fragment$z(ctx) {
3265
+ function create_fragment$A(ctx) {
3263
3266
  let goa_card_content;
3264
3267
  return {
3265
3268
  c() {
@@ -3290,7 +3293,7 @@
3290
3293
  target: this.shadowRoot,
3291
3294
  props: attribute_to_object(this.attributes),
3292
3295
  customElement: true
3293
- }, null, create_fragment$z, safe_not_equal, {}, null);
3296
+ }, null, create_fragment$A, safe_not_equal, {}, null);
3294
3297
 
3295
3298
  if (options) {
3296
3299
  if (options.target) {
@@ -3304,7 +3307,7 @@
3304
3307
  customElements.define("goa-card-actions", CardActions);
3305
3308
  /* libs/web-components/src/components/card/Card.svelte generated by Svelte v3.51.0 */
3306
3309
 
3307
- function create_fragment$y(ctx) {
3310
+ function create_fragment$z(ctx) {
3308
3311
  let div;
3309
3312
  let slot;
3310
3313
  let div_style_value;
@@ -3331,7 +3334,7 @@
3331
3334
  /*ml*/
3332
3335
  ctx[6]) + " " + (
3333
3336
  /*elevation*/
3334
- ctx[0] === 0 ? `border: 1px solid var(--color-gray-200);` : `box-shadow: var(--shadow-${
3337
+ ctx[0] === 0 ? `border: 1px solid var(--goa-color-greyscale-200);` : `box-shadow: var(--shadow-${
3335
3338
  /*elevation*/
3336
3339
  ctx[0]});`) + "");
3337
3340
  },
@@ -3366,7 +3369,7 @@
3366
3369
  /*ml*/
3367
3370
  ctx[6]) + " " + (
3368
3371
  /*elevation*/
3369
- ctx[0] === 0 ? `border: 1px solid var(--color-gray-200);` : `box-shadow: var(--shadow-${
3372
+ ctx[0] === 0 ? `border: 1px solid var(--goa-color-greyscale-200);` : `box-shadow: var(--shadow-${
3370
3373
  /*elevation*/
3371
3374
  ctx[0]});`) + "")) {
3372
3375
  attr(div, "style", div_style_value);
@@ -3383,7 +3386,7 @@
3383
3386
  };
3384
3387
  }
3385
3388
 
3386
- function instance$t($$self, $$props, $$invalidate) {
3389
+ function instance$u($$self, $$props, $$invalidate) {
3387
3390
  let {
3388
3391
  elevation = 0
3389
3392
  } = $$props;
@@ -3426,12 +3429,12 @@
3426
3429
  class Card extends SvelteElement {
3427
3430
  constructor(options) {
3428
3431
  super();
3429
- this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.card{background-color:var(--color-white);border-radius:4px;overflow:hidden;height:var(--height)}@media(min-width: 320px){.card{margin:0 auto}}</style>`;
3432
+ this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.card{background-color:var(--goa-color-greyscale-white);border-radius:4px;overflow:hidden;height:var(--height)}@media(min-width: 320px){.card{margin:0 auto}}</style>`;
3430
3433
  init(this, {
3431
3434
  target: this.shadowRoot,
3432
3435
  props: attribute_to_object(this.attributes),
3433
3436
  customElement: true
3434
- }, instance$t, create_fragment$y, safe_not_equal, {
3437
+ }, instance$u, create_fragment$z, safe_not_equal, {
3435
3438
  elevation: 0,
3436
3439
  width: 1,
3437
3440
  height: 2,
@@ -3551,7 +3554,7 @@
3551
3554
  customElements.define("goa-card", Card);
3552
3555
  /* libs/web-components/src/components/card-content/CardContent.svelte generated by Svelte v3.51.0 */
3553
3556
 
3554
- function create_fragment$x(ctx) {
3557
+ function create_fragment$y(ctx) {
3555
3558
  let div;
3556
3559
  return {
3557
3560
  c() {
@@ -3579,12 +3582,12 @@
3579
3582
  class CardContent extends SvelteElement {
3580
3583
  constructor(options) {
3581
3584
  super();
3582
- this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.card-content{padding:1rem}</style>`;
3585
+ this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.card-content{padding:1rem}</style>`;
3583
3586
  init(this, {
3584
3587
  target: this.shadowRoot,
3585
3588
  props: attribute_to_object(this.attributes),
3586
3589
  customElement: true
3587
- }, null, create_fragment$x, safe_not_equal, {}, null);
3590
+ }, null, create_fragment$y, safe_not_equal, {}, null);
3588
3591
 
3589
3592
  if (options) {
3590
3593
  if (options.target) {
@@ -3598,7 +3601,7 @@
3598
3601
  customElements.define("goa-card-content", CardContent);
3599
3602
  /* libs/web-components/src/components/card-group/CardGroup.svelte generated by Svelte v3.51.0 */
3600
3603
 
3601
- function create_fragment$w(ctx) {
3604
+ function create_fragment$x(ctx) {
3602
3605
  let div;
3603
3606
  return {
3604
3607
  c() {
@@ -3626,12 +3629,12 @@
3626
3629
  class CardGroup extends SvelteElement {
3627
3630
  constructor(options) {
3628
3631
  super();
3629
- this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.card-group{display:flex;flex-wrap:wrap;justify-content:space-around;gap:1rem;width:100%}</style>`;
3632
+ this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.card-group{display:flex;flex-wrap:wrap;justify-content:space-around;gap:1rem;width:100%}</style>`;
3630
3633
  init(this, {
3631
3634
  target: this.shadowRoot,
3632
3635
  props: attribute_to_object(this.attributes),
3633
3636
  customElement: true
3634
- }, null, create_fragment$w, safe_not_equal, {}, null);
3637
+ }, null, create_fragment$x, safe_not_equal, {}, null);
3635
3638
 
3636
3639
  if (options) {
3637
3640
  if (options.target) {
@@ -3645,7 +3648,7 @@
3645
3648
  customElements.define("goa-card-group", CardGroup);
3646
3649
  /* libs/web-components/src/components/card-image/CardImage.svelte generated by Svelte v3.51.0 */
3647
3650
 
3648
- function create_fragment$v(ctx) {
3651
+ function create_fragment$w(ctx) {
3649
3652
  let div;
3650
3653
  return {
3651
3654
  c() {
@@ -3693,7 +3696,7 @@
3693
3696
  };
3694
3697
  }
3695
3698
 
3696
- function instance$s($$self, $$props, $$invalidate) {
3699
+ function instance$t($$self, $$props, $$invalidate) {
3697
3700
  let {
3698
3701
  src
3699
3702
  } = $$props;
@@ -3712,12 +3715,12 @@
3712
3715
  class CardImage extends SvelteElement {
3713
3716
  constructor(options) {
3714
3717
  super();
3715
- this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}</style>`;
3718
+ this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}</style>`;
3716
3719
  init(this, {
3717
3720
  target: this.shadowRoot,
3718
3721
  props: attribute_to_object(this.attributes),
3719
3722
  customElement: true
3720
- }, instance$s, create_fragment$v, safe_not_equal, {
3723
+ }, instance$t, create_fragment$w, safe_not_equal, {
3721
3724
  src: 0,
3722
3725
  height: 1
3723
3726
  }, null);
@@ -3792,7 +3795,7 @@
3792
3795
  } // (68:4) {#if isIndeterminate}
3793
3796
 
3794
3797
 
3795
- function create_if_block$d(ctx) {
3798
+ function create_if_block$e(ctx) {
3796
3799
  let svg;
3797
3800
  let rect;
3798
3801
  return {
@@ -3819,7 +3822,7 @@
3819
3822
  };
3820
3823
  }
3821
3824
 
3822
- function create_fragment$u(ctx) {
3825
+ function create_fragment$v(ctx) {
3823
3826
  let label;
3824
3827
  let div0;
3825
3828
  let input;
@@ -3837,7 +3840,7 @@
3837
3840
  function select_block_type(ctx, dirty) {
3838
3841
  if (
3839
3842
  /*isIndeterminate*/
3840
- ctx[10]) return create_if_block$d;
3843
+ ctx[10]) return create_if_block$e;
3841
3844
  if (
3842
3845
  /*isChecked*/
3843
3846
  ctx[9]) return create_if_block_1$8;
@@ -4068,7 +4071,7 @@
4068
4071
  };
4069
4072
  }
4070
4073
 
4071
- function instance$r($$self, $$props, $$invalidate) {
4074
+ function instance$s($$self, $$props, $$invalidate) {
4072
4075
  let isDisabled;
4073
4076
  let isError;
4074
4077
  let isChecked;
@@ -4178,12 +4181,12 @@
4178
4181
  class Checkbox extends SvelteElement {
4179
4182
  constructor(options) {
4180
4183
  super();
4181
- this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family);display:block}.goa-checkbox{display:inline-flex;align-items:center;min-height:calc(3rem - 4px);cursor:pointer}.goa-checkbox input[type="checkbox"]{opacity:0;position:absolute;cursor:pointer}.goa-checkbox--disabled{opacity:40%}.goa-checkbox-container{box-sizing:border-box;border:1px solid var(--color-gray-600);border-radius:2px;background-color:var(--color-white);height:1.5rem;width:1.5rem;display:flex;justify-content:center;padding:3px;flex:0 0 auto}.goa-checkbox-container svg{fill:var(--color-white)}.goa-checkbox-container.goa-checkbox--selected{background-color:var(--goa-color-interactive)}.goa-checkbox-container.goa-checkbox--selected:hover{background-color:var(--goa-color-interactive--hover)}.goa-checkbox-container:hover{border:1px solid var(--goa-color-interactive--hover)}.goa-checkbox-container:focus-within{box-shadow:0 0 0 3px var(--goa-color-interactive--focus);outline:none}.goa-checkbox-text{padding-left:0.5rem;user-select:none;font-weight:var(--fw-regular)}.goa-checkbox--disabled .goa-checkbox-container,.goa-checkbox--disabled .goa-checkbox-container:hover{border:1px solid var(--color-gray-400)}.goa-checkbox--error .goa-checkbox-container,.goa-checkbox--error .goa-checkbox-container:hover{border:1px solid var(--goa-color-status-emergency);box-shadow:inset 0 0 0 1px var(--goa-color-status-emergency);background-color:var(--color-white)}.goa-checkbox--error .goa-checkbox-container svg{fill:var(--goa-color-status-emergency)}</style>`;
4184
+ this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans);display:block}.goa-checkbox{display:inline-flex;align-items:center;min-height:calc(3rem - 4px);cursor:pointer}.goa-checkbox input[type="checkbox"]{opacity:0;position:absolute;cursor:pointer}.goa-checkbox--disabled .goa-checkbox-text{opacity:40%}.goa-checkbox--disabled:hover{cursor:default}.goa-checkbox-container{box-sizing:border-box;border:1px solid var(--goa-color-greyscale-700);border-radius:2px;background-color:var(--goa-color-greyscale-white);height:1.5rem;width:1.5rem;display:flex;justify-content:center;padding:3px;flex:0 0 auto}.goa-checkbox-container svg{fill:var(--goa-color-greyscale-white)}.goa-checkbox-container.goa-checkbox--selected{background-color:var(--goa-color-interactive-default)}.goa-checkbox-container.goa-checkbox--selected:hover{background-color:var(--goa-color-interactive-hover)}.goa-checkbox-container:hover{border:1px solid var(--goa-color-interactive-hover)}.goa-checkbox-container:focus-within{box-shadow:0 0 0 3px var(--goa-color-interactive-focus);outline:none}.goa-checkbox-text{padding-left:0.5rem;user-select:none;font-weight:var(--goa-font-weight-regular)}.goa-checkbox--disabled .goa-checkbox-container,.goa-checkbox--disabled .goa-checkbox-container:hover{border:1px solid var(--goa-color-greyscale-400)}.goa-checkbox--error .goa-checkbox-container,.goa-checkbox--error .goa-checkbox-container:hover{border:1px solid var(--goa-color-emergency-default);box-shadow:inset 0 0 0 1px var(--goa-color-emergency-default);background-color:var(--goa-color-greyscale-white)}.goa-checkbox--error .goa-checkbox-container svg{fill:var(--goa-color-emergency-default)}</style>`;
4182
4185
  init(this, {
4183
4186
  target: this.shadowRoot,
4184
4187
  props: attribute_to_object(this.attributes),
4185
4188
  customElement: true
4186
- }, instance$r, create_fragment$u, safe_not_equal, {
4189
+ }, instance$s, create_fragment$v, safe_not_equal, {
4187
4190
  name: 0,
4188
4191
  checked: 14,
4189
4192
  text: 1,
@@ -4385,7 +4388,7 @@
4385
4388
  } // (54:2) {#if _deletable}
4386
4389
 
4387
4390
 
4388
- function create_if_block$c(ctx) {
4391
+ function create_if_block$d(ctx) {
4389
4392
  let goa_icon;
4390
4393
  let goa_icon_fillcolor_value;
4391
4394
  let goa_icon_opacity_value;
@@ -4398,9 +4401,9 @@
4398
4401
  set_custom_element_data(goa_icon, "type", "close-circle");
4399
4402
  set_custom_element_data(goa_icon, "fillcolor", goa_icon_fillcolor_value =
4400
4403
  /*_error*/
4401
- ctx[10] ? "var(--goa-color-status-emergency)" :
4404
+ ctx[10] ? "var(--goa-color-emergency-default)" :
4402
4405
  /*_hovering*/
4403
- ctx[9] ? "var(--goa-color-interactive--hover)" : "var(--color-gray-600)");
4406
+ ctx[9] ? "var(--goa-color-interactive-hover)" : "var(--goa-color-greyscale-700)");
4404
4407
  set_custom_element_data(goa_icon, "opacity", goa_icon_opacity_value =
4405
4408
  /*_error*/
4406
4409
  ctx[10] ?
@@ -4417,9 +4420,9 @@
4417
4420
  /*_error, _hovering*/
4418
4421
  1536 && goa_icon_fillcolor_value !== (goa_icon_fillcolor_value =
4419
4422
  /*_error*/
4420
- ctx[10] ? "var(--goa-color-status-emergency)" :
4423
+ ctx[10] ? "var(--goa-color-emergency-default)" :
4421
4424
  /*_hovering*/
4422
- ctx[9] ? "var(--goa-color-interactive--hover)" : "var(--color-gray-600)")) {
4425
+ ctx[9] ? "var(--goa-color-interactive-hover)" : "var(--goa-color-greyscale-700)")) {
4423
4426
  set_custom_element_data(goa_icon, "fillcolor", goa_icon_fillcolor_value);
4424
4427
  }
4425
4428
 
@@ -4441,7 +4444,7 @@
4441
4444
  };
4442
4445
  }
4443
4446
 
4444
- function create_fragment$t(ctx) {
4447
+ function create_fragment$u(ctx) {
4445
4448
  let div1;
4446
4449
  let t0;
4447
4450
  let div0;
@@ -4455,7 +4458,7 @@
4455
4458
  ctx[4] && create_if_block_1$7(ctx);
4456
4459
  let if_block1 =
4457
4460
  /*_deletable*/
4458
- ctx[11] && create_if_block$c(ctx);
4461
+ ctx[11] && create_if_block$d(ctx);
4459
4462
  return {
4460
4463
  c() {
4461
4464
  div1 = element("div");
@@ -4550,7 +4553,7 @@
4550
4553
  if (if_block1) {
4551
4554
  if_block1.p(ctx, dirty);
4552
4555
  } else {
4553
- if_block1 = create_if_block$c(ctx);
4556
+ if_block1 = create_if_block$d(ctx);
4554
4557
  if_block1.c();
4555
4558
  if_block1.m(div1, null);
4556
4559
  }
@@ -4623,7 +4626,7 @@
4623
4626
  };
4624
4627
  }
4625
4628
 
4626
- function instance$q($$self, $$props, $$invalidate) {
4629
+ function instance$r($$self, $$props, $$invalidate) {
4627
4630
  let {
4628
4631
  mt = null
4629
4632
  } = $$props;
@@ -4719,12 +4722,12 @@
4719
4722
  class Chip extends SvelteElement {
4720
4723
  constructor(options) {
4721
4724
  super();
4722
- this.shadowRoot.innerHTML = `<style>.leading-icon{margin-left:-0.25rem}.chip{vertical-align:middle;align-items:center;background-color:var(--color-white);border-radius:99px;border:1px solid #949494;box-sizing:border-box;color:var(--goa-color-text);display:inline-flex;flex-direction:row;font-size:var(--chip-font-size);font-weight:var(--fw-regular);gap:0.25rem;height:2rem;justify-content:center;padding:0 0.75rem;cursor:default}.text{padding-bottom:var(--font-valign-fix)}.chip:focus{outline:2px solid var(--goa-color-interactive--focus);background-color:var(--color-white)}.chip:hover{background-color:var(--color-gray-200)}.deletable{cursor:pointer}.delete-icon{margin-right:-0.25rem}.error,.error:hover{background-color:var(--goa-color-status-emergency-light)}</style>`;
4725
+ this.shadowRoot.innerHTML = `<style>.leading-icon{margin-left:-0.25rem}.chip{vertical-align:middle;align-items:center;background-color:var(--goa-color-greyscale-white);border-radius:99px;border:1px solid #949494;box-sizing:border-box;color:var(--goa-color-text-default);display:inline-flex;flex-direction:row;font-size:var(--goa-font-size-3);font-weight:var(--goa-font-weight-regular);gap:0.25rem;height:2rem;justify-content:center;padding:0 0.75rem;cursor:default}.text{padding-bottom:var(--font-valign-fix, 0)}.chip:focus{outline:2px solid var(--goa-color-interactive-focus);background-color:var(--goa-color-greyscale-white)}.chip:hover{background-color:var(--goa-color-greyscale-200)}.deletable{cursor:pointer}.delete-icon{margin-right:-0.25rem}.error,.error:hover{background-color:var(--goa-color-emergency-light)}</style>`;
4723
4726
  init(this, {
4724
4727
  target: this.shadowRoot,
4725
4728
  props: attribute_to_object(this.attributes),
4726
4729
  customElement: true
4727
- }, instance$q, create_fragment$t, safe_not_equal, {
4730
+ }, instance$r, create_fragment$u, safe_not_equal, {
4728
4731
  mt: 0,
4729
4732
  mr: 1,
4730
4733
  mb: 2,
@@ -4981,7 +4984,7 @@
4981
4984
  /* libs/web-components/src/components/circular-progress/CircularProgress.svelte generated by Svelte v3.51.0 */
4982
4985
 
4983
4986
 
4984
- function create_if_block$b(ctx) {
4987
+ function create_if_block$c(ctx) {
4985
4988
  let current_block_type_index;
4986
4989
  let if_block;
4987
4990
  let if_block_anchor;
@@ -5352,12 +5355,12 @@
5352
5355
  };
5353
5356
  }
5354
5357
 
5355
- function create_fragment$s(ctx) {
5358
+ function create_fragment$t(ctx) {
5356
5359
  let if_block_anchor;
5357
5360
  let current;
5358
5361
  let if_block =
5359
5362
  /*isVisible*/
5360
- ctx[5] && create_if_block$b(ctx);
5363
+ ctx[5] && create_if_block$c(ctx);
5361
5364
  return {
5362
5365
  c() {
5363
5366
  if (if_block) if_block.c();
@@ -5384,7 +5387,7 @@
5384
5387
  transition_in(if_block, 1);
5385
5388
  }
5386
5389
  } else {
5387
- if_block = create_if_block$b(ctx);
5390
+ if_block = create_if_block$c(ctx);
5388
5391
  if_block.c();
5389
5392
  transition_in(if_block, 1);
5390
5393
  if_block.m(if_block_anchor.parentNode, if_block_anchor);
@@ -5417,7 +5420,7 @@
5417
5420
  };
5418
5421
  }
5419
5422
 
5420
- function instance$p($$self, $$props, $$invalidate) {
5423
+ function instance$q($$self, $$props, $$invalidate) {
5421
5424
  let isVisible;
5422
5425
  const [Variants, validateVariant] = typeValidator("Circular progress variant", ["fullscreen", "inline"]);
5423
5426
  const [Sizes, validateSize] = typeValidator("Button size", ["small", "large"]);
@@ -5470,12 +5473,12 @@
5470
5473
  class CircularProgress extends SvelteElement {
5471
5474
  constructor(options) {
5472
5475
  super();
5473
- this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.fullscreen{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;flex-direction:column;background-color:rgba(255, 255, 255, 0.9)}.inline{margin:3.5rem;display:inline-flex;flex-direction:column;align-items:center;justify-content:center}.spinner-large .message{margin-top:1.5rem;font-size:1.2rem}.spinner-xlarge .message{margin-top:2rem;font-size:1.5rem}</style>`;
5476
+ this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.fullscreen{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;flex-direction:column;background-color:rgba(255, 255, 255, 0.9)}.inline{margin:3.5rem;display:inline-flex;flex-direction:column;align-items:center;justify-content:center}.spinner-large .message{margin-top:1.5rem;font-size:1.2rem}.spinner-xlarge .message{margin-top:2rem;font-size:1.5rem}</style>`;
5474
5477
  init(this, {
5475
5478
  target: this.shadowRoot,
5476
5479
  props: attribute_to_object(this.attributes),
5477
5480
  customElement: true
5478
- }, instance$p, create_fragment$s, safe_not_equal, {
5481
+ }, instance$q, create_fragment$t, safe_not_equal, {
5479
5482
  variant: 6,
5480
5483
  size: 7,
5481
5484
  message: 0,
@@ -5559,7 +5562,7 @@
5559
5562
  customElements.define("goa-circular-progress", CircularProgress);
5560
5563
  /* libs/web-components/src/components/container/Container.svelte generated by Svelte v3.51.0 */
5561
5564
 
5562
- function create_fragment$r(ctx) {
5565
+ function create_fragment$s(ctx) {
5563
5566
  let div3;
5564
5567
  let header;
5565
5568
  let div0;
@@ -5684,7 +5687,7 @@
5684
5687
  };
5685
5688
  }
5686
5689
 
5687
- function instance$o($$self, $$props, $$invalidate) {
5690
+ function instance$p($$self, $$props, $$invalidate) {
5688
5691
  const [Types, validateType] = typeValidator("Container type", ["interactive", "info", "error", "success", "important", "non-interactive"]);
5689
5692
  const [Accents, validateAccent] = typeValidator("Container accent", ["thick", "thin", "filled"]);
5690
5693
  const [Paddings, validatePadding] = typeValidator("Container padding", ["relaxed", "compact"]);
@@ -5735,12 +5738,12 @@
5735
5738
  class Container extends SvelteElement {
5736
5739
  constructor(options) {
5737
5740
  super();
5738
- this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family);font-size:var(--fs-base)}.goa-container{box-sizing:border-box}.goa-container *{box-sizing:border-box}header{display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:var(--fs-base);border-width:1px;border-style:solid;border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius)}.content{border-bottom:1px solid var(--color-gray-200);border-left:1px solid var(--color-gray-200);border-right:1px solid var(--color-gray-200);border-bottom-left-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius)}.goa-container--non-interactive.accent--filled .content{border-color:var(--color-gray-200);background-color:var(--color-gray-100)}.goa-container--important.accent--filled .content{border-color:var(--goa-color-status-warning);background-color:var(--goa-color-status-warning-50)}.goa-container--error.accent--filled .content{border-color:var(--goa-color-status-emergency);background-color:var(--goa-color-status-emergency-50)}.goa-container--success.accent--filled .content{border-color:var(--goa-color-status-success);background-color:var(--goa-color-status-success-50)}.goa-container--info.accent--filled .content{border-color:var(--goa-color-status-info);background-color:var(--goa-color-status-info-50)}.title,.actions{padding:0.5rem 0}.padding--relaxed header{padding:0 1.5rem}.padding--relaxed .content{padding:1.5rem}.padding--compact header,.padding--compact .content{padding:0 1rem}.padding--compact header{padding:0 1rem}.padding--compact .content{padding:1rem}@media screen and (max-width: 480px){.padding--relaxed header{padding:0 1rem}.padding--relaxed .content{padding:1rem}}.goa-container--non-interactive header{background-color:var(--color-gray-100);border-color:var(--color-gray-200);color:var(--color-black)}.goa-container--interactive header{background-color:var(--goa-color-brand);border-color:var(--goa-color-brand);color:var(--color-white)}.goa-container--info header{background-color:var(--goa-color-status-info);border-color:var(--goa-color-status-info);color:var(--color-white)}.goa-container--error header{background-color:var(--goa-color-status-emergency);border-color:var(--goa-color-status-emergency);color:var(--color-white)}.goa-container--success header{background-color:var(--goa-color-status-success);border-color:var(--goa-color-status-success);color:var(--color-white)}.goa-container--important header{background-color:var(--goa-color-status-warning);border-color:var(--goa-color-status-warning);color:var(--color-white)}.heading--thick{padding:0.5rem 1.5rem;max-height:3rem;min-height:1rem}.heading--thick .title{line-height:2rem}.heading--thin{height:0.5rem}.heading--filled{display:none}.heading--filled~.content{border-top:1px solid var(--color-gray-200);border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius)}.heading--thin .title,.heading--thin .actions{display:none}.actions{display:flex;align-items:center}</style>`;
5741
+ this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans);font-size:var(--goa-font-size-4)}.goa-container{box-sizing:border-box}.goa-container *{box-sizing:border-box}header{display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:var(--goa-font-size-4);border-width:1px;border-style:solid;border-top-left-radius:var(--goa-border-radius-m);border-top-right-radius:var(--goa-border-radius-m)}.content{border-bottom:1px solid var(--goa-color-greyscale-200);border-left:1px solid var(--goa-color-greyscale-200);border-right:1px solid var(--goa-color-greyscale-200);border-bottom-left-radius:var(--goa-border-radius-m);border-bottom-right-radius:var(--goa-border-radius-m)}.goa-container--non-interactive.accent--filled .content{border-color:var(--goa-color-greyscale-200);background-color:var(--goa-color-greyscale-100)}.goa-container--important.accent--filled .content{border-color:var(--goa-color-warning-default);background-color:var(--goa-color-warning-background)}.goa-container--error.accent--filled .content{border-color:var(--goa-color-emergency-default);background-color:var(--goa-color-emergency-background)}.goa-container--success.accent--filled .content{border-color:var(--goa-color-success-default);background-color:var(--goa-color-success-background)}.goa-container--info.accent--filled .content{border-color:var(--goa-color-info-default);background-color:var(--goa-color-info-background)}.title,.actions{padding:0.5rem 0}.padding--relaxed header{padding:0 1.5rem}.padding--relaxed .content{padding:1.5rem}.padding--compact header,.padding--compact .content{padding:0 1rem}.padding--compact header{padding:0 1rem}.padding--compact .content{padding:1rem}@media screen and (max-width: 480px){.padding--relaxed header{padding:0 1rem}.padding--relaxed .content{padding:1rem}}.goa-container--non-interactive header{background-color:var(--goa-color-greyscale-100);border-color:var(--goa-color-greyscale-200);color:var(--goa-color-greyscale-black)}.goa-container--interactive header{background-color:var(--goa-color-brand-default);border-color:var(--goa-color-brand-default);color:var(--goa-color-greyscale-white)}.goa-container--info header{background-color:var(--goa-color-info-default);border-color:var(--goa-color-info-default);color:var(--goa-color-greyscale-white)}.goa-container--error header{background-color:var(--goa-color-emergency-default);border-color:var(--goa-color-emergency-default);color:var(--goa-color-greyscale-white)}.goa-container--success header{background-color:var(--goa-color-success-default);border-color:var(--goa-color-success-default);color:var(--goa-color-greyscale-white)}.goa-container--important header{background-color:var(--goa-color-warning-default);border-color:var(--goa-color-warning-default);color:var(--goa-color-greyscale-white)}.heading--thick{padding:0.5rem 1.5rem;max-height:3rem;min-height:1rem}.heading--thick .title{line-height:2rem}.heading--thin{height:0.5rem}.heading--filled{display:none}.heading--filled~.content{border-top:1px solid var(--goa-color-greyscale-200);border-top-left-radius:var(--goa-border-radius-m);border-top-right-radius:var(--goa-border-radius-m)}.heading--thin .title,.heading--thin .actions{display:none}.actions{display:flex;align-items:center}</style>`;
5739
5742
  init(this, {
5740
5743
  target: this.shadowRoot,
5741
5744
  props: attribute_to_object(this.attributes),
5742
5745
  customElement: true
5743
- }, instance$o, create_fragment$r, safe_not_equal, {
5746
+ }, instance$p, create_fragment$s, safe_not_equal, {
5744
5747
  type: 0,
5745
5748
  accent: 1,
5746
5749
  padding: 2,
@@ -5860,7 +5863,7 @@
5860
5863
  customElements.define("goa-container", Container);
5861
5864
  /* libs/web-components/src/components/divider/Divider.svelte generated by Svelte v3.51.0 */
5862
5865
 
5863
- function create_fragment$q(ctx) {
5866
+ function create_fragment$r(ctx) {
5864
5867
  let hr;
5865
5868
  let hr_style_value;
5866
5869
  return {
@@ -5919,7 +5922,7 @@
5919
5922
  };
5920
5923
  }
5921
5924
 
5922
- function instance$n($$self, $$props, $$invalidate) {
5925
+ function instance$o($$self, $$props, $$invalidate) {
5923
5926
  let {
5924
5927
  testid = ""
5925
5928
  } = $$props;
@@ -5950,12 +5953,12 @@
5950
5953
  class Divider extends SvelteElement {
5951
5954
  constructor(options) {
5952
5955
  super();
5953
- this.shadowRoot.innerHTML = `<style>hr{padding:0;margin:0;height:1px;background-color:var(--color-gray-200);border:none}</style>`;
5956
+ this.shadowRoot.innerHTML = `<style>hr{padding:0;margin:0;height:1px;background-color:var(--goa-color-greyscale-200);border:none}</style>`;
5954
5957
  init(this, {
5955
5958
  target: this.shadowRoot,
5956
5959
  props: attribute_to_object(this.attributes),
5957
5960
  customElement: true
5958
- }, instance$n, create_fragment$q, safe_not_equal, {
5961
+ }, instance$o, create_fragment$r, safe_not_equal, {
5959
5962
  testid: 0,
5960
5963
  mt: 1,
5961
5964
  mr: 2,
@@ -6041,25 +6044,25 @@
6041
6044
 
6042
6045
  function get_each_context_1(ctx, list, i) {
6043
6046
  const child_ctx = ctx.slice();
6044
- child_ctx[48] = list[i];
6045
- child_ctx[52] = i;
6047
+ child_ctx[49] = list[i];
6048
+ child_ctx[53] = i;
6046
6049
  return child_ctx;
6047
6050
  }
6048
6051
 
6049
6052
  function get_each_context$4(ctx, list, i) {
6050
6053
  const child_ctx = ctx.slice();
6051
- child_ctx[48] = list[i];
6054
+ child_ctx[49] = list[i];
6052
6055
  return child_ctx;
6053
- } // (244:2) {:else}
6056
+ } // (256:2) {:else}
6054
6057
 
6055
6058
 
6056
6059
  function create_else_block$1(ctx) {
6057
6060
  let t0;
6058
- let slot;
6059
- let t1;
6060
6061
  let goa_input;
6061
- let goa_input_aria_label_value;
6062
+ let goa_input_arialabel_value;
6062
6063
  let goa_input_data_testid_value;
6064
+ let t1;
6065
+ let slot;
6063
6066
  let t2;
6064
6067
  let ul;
6065
6068
  let each_blocks = [];
@@ -6076,7 +6079,7 @@
6076
6079
 
6077
6080
  const get_key = ctx =>
6078
6081
  /*index*/
6079
- ctx[52];
6082
+ ctx[53];
6080
6083
 
6081
6084
  for (let i = 0; i < each_value_1.length; i += 1) {
6082
6085
  let child_ctx = get_each_context_1(ctx, each_value_1, i);
@@ -6088,9 +6091,9 @@
6088
6091
  c() {
6089
6092
  if (if_block) if_block.c();
6090
6093
  t0 = space();
6091
- slot = element("slot");
6092
- t1 = space();
6093
6094
  goa_input = element("goa-input");
6095
+ t1 = space();
6096
+ slot = element("slot");
6094
6097
  t2 = space();
6095
6098
  ul = element("ul");
6096
6099
 
@@ -6114,7 +6117,7 @@
6114
6117
  set_custom_element_data(goa_input, "aria-expanded",
6115
6118
  /*_isMenuVisible*/
6116
6119
  ctx[15]);
6117
- set_custom_element_data(goa_input, "aria-label", goa_input_aria_label_value =
6120
+ set_custom_element_data(goa_input, "arialabel", goa_input_arialabel_value =
6118
6121
  /*arialabel*/
6119
6122
  ctx[1] ||
6120
6123
  /*name*/
@@ -6130,6 +6133,9 @@
6130
6133
  /*_selectedLabel*/
6131
6134
  ctx[14]);
6132
6135
  set_custom_element_data(goa_input, "width", "100%");
6136
+ set_custom_element_data(goa_input, "name",
6137
+ /*name*/
6138
+ ctx[0]);
6133
6139
  attr(ul, "id", "menu");
6134
6140
  attr(ul, "role", "listbox");
6135
6141
  attr(ul, "aria-activedescendant",
@@ -6149,9 +6155,9 @@
6149
6155
  m(target, anchor) {
6150
6156
  if (if_block) if_block.m(target, anchor);
6151
6157
  insert(target, t0, anchor);
6152
- insert(target, slot, anchor);
6153
- insert(target, t1, anchor);
6154
6158
  insert(target, goa_input, anchor);
6159
+ insert(target, t1, anchor);
6160
+ insert(target, slot, anchor);
6155
6161
  insert(target, t2, anchor);
6156
6162
  insert(target, ul, anchor);
6157
6163
 
@@ -6229,12 +6235,12 @@
6229
6235
 
6230
6236
  if (dirty[0] &
6231
6237
  /*arialabel, name*/
6232
- 3 && goa_input_aria_label_value !== (goa_input_aria_label_value =
6238
+ 3 && goa_input_arialabel_value !== (goa_input_arialabel_value =
6233
6239
  /*arialabel*/
6234
6240
  ctx[1] ||
6235
6241
  /*name*/
6236
6242
  ctx[0])) {
6237
- set_custom_element_data(goa_input, "aria-label", goa_input_aria_label_value);
6243
+ set_custom_element_data(goa_input, "arialabel", goa_input_arialabel_value);
6238
6244
  }
6239
6245
 
6240
6246
  if (dirty[0] &
@@ -6253,6 +6259,14 @@
6253
6259
  ctx[14]);
6254
6260
  }
6255
6261
 
6262
+ if (dirty[0] &
6263
+ /*name*/
6264
+ 1) {
6265
+ set_custom_element_data(goa_input, "name",
6266
+ /*name*/
6267
+ ctx[0]);
6268
+ }
6269
+
6256
6270
  if (dirty[0] &
6257
6271
  /*_options, _values, _highlightedIndex, onSelect*/
6258
6272
  67186688) {
@@ -6290,9 +6304,9 @@
6290
6304
  d(detaching) {
6291
6305
  if (if_block) if_block.d(detaching);
6292
6306
  if (detaching) detach(t0);
6293
- if (detaching) detach(slot);
6294
- if (detaching) detach(t1);
6295
6307
  if (detaching) detach(goa_input);
6308
+ if (detaching) detach(t1);
6309
+ if (detaching) detach(slot);
6296
6310
  if (detaching) detach(t2);
6297
6311
  if (detaching) detach(ul);
6298
6312
 
@@ -6308,10 +6322,10 @@
6308
6322
  }
6309
6323
 
6310
6324
  };
6311
- } // (225:2) {#if _native}
6325
+ } // (237:2) {#if _native}
6312
6326
 
6313
6327
 
6314
- function create_if_block$a(ctx) {
6328
+ function create_if_block$b(ctx) {
6315
6329
  let select;
6316
6330
  let slot;
6317
6331
  let select_aria_label_value;
@@ -6434,7 +6448,7 @@
6434
6448
  }
6435
6449
 
6436
6450
  };
6437
- } // (245:4) {#if _isMenuVisible}
6451
+ } // (257:4) {#if _isMenuVisible}
6438
6452
 
6439
6453
 
6440
6454
  function create_if_block_1$5(ctx) {
@@ -6479,16 +6493,16 @@
6479
6493
  }
6480
6494
 
6481
6495
  };
6482
- } // (287:6) {#each _options as option, index (index)}
6496
+ } // (300:6) {#each _options as option, index (index)}
6483
6497
 
6484
6498
 
6485
6499
  function create_each_block_1(key_1, ctx) {
6486
6500
  let li;
6487
6501
  let t0_value = (
6488
6502
  /*option*/
6489
- ctx[48].label ||
6503
+ ctx[49].label ||
6490
6504
  /*option*/
6491
- ctx[48].value) + "";
6505
+ ctx[49].value) + "";
6492
6506
  let t0;
6493
6507
  let t1;
6494
6508
  let li_id_value;
@@ -6506,7 +6520,7 @@
6506
6520
  /*click_handler*/
6507
6521
  ctx[32](
6508
6522
  /*option*/
6509
- ctx[48])
6523
+ ctx[49])
6510
6524
  );
6511
6525
  }
6512
6526
 
@@ -6520,40 +6534,40 @@
6520
6534
  t1 = space();
6521
6535
  attr(li, "id", li_id_value =
6522
6536
  /*option*/
6523
- ctx[48].label);
6537
+ ctx[49].label);
6524
6538
  attr(li, "role", "option");
6525
6539
  attr(li, "aria-label", li_aria_label_value =
6526
6540
  /*option*/
6527
- ctx[48].label ||
6541
+ ctx[49].label ||
6528
6542
  /*option*/
6529
- ctx[48].value);
6543
+ ctx[49].value);
6530
6544
  attr(li, "aria-selected", li_aria_selected_value =
6531
6545
  /*_values*/
6532
6546
  ctx[12].includes(
6533
6547
  /*option*/
6534
- ctx[48].value) ? "true" : "false");
6548
+ ctx[49].value) ? "true" : "false");
6535
6549
  attr(li, "class", "dropdown-item");
6536
6550
  attr(li, "data-testid", li_data_testid_value = `dropdown-item-${
6537
6551
  /*option*/
6538
- ctx[48].value}`);
6552
+ ctx[49].value}`);
6539
6553
  attr(li, "data-index", li_data_index_value =
6540
6554
  /*index*/
6541
- ctx[52]);
6555
+ ctx[53]);
6542
6556
  attr(li, "data-value", li_data_value_value =
6543
6557
  /*option*/
6544
- ctx[48].value);
6558
+ ctx[49].value);
6545
6559
  attr(li, "style", li_style_value = `display: ${"block"}`);
6546
6560
  toggle_class(li, "dropdown-item--disabled", false);
6547
6561
  toggle_class(li, "dropdown-item--tabbed",
6548
6562
  /*index*/
6549
- ctx[52] ===
6563
+ ctx[53] ===
6550
6564
  /*_highlightedIndex*/
6551
6565
  ctx[16]);
6552
6566
  toggle_class(li, "dropdown-item--selected",
6553
6567
  /*_values*/
6554
6568
  ctx[12].includes(
6555
6569
  /*option*/
6556
- ctx[48].value));
6570
+ ctx[49].value));
6557
6571
  this.first = li;
6558
6572
  },
6559
6573
 
@@ -6574,15 +6588,15 @@
6574
6588
  /*_options*/
6575
6589
  8192 && t0_value !== (t0_value = (
6576
6590
  /*option*/
6577
- ctx[48].label ||
6591
+ ctx[49].label ||
6578
6592
  /*option*/
6579
- ctx[48].value) + "")) set_data(t0, t0_value);
6593
+ ctx[49].value) + "")) set_data(t0, t0_value);
6580
6594
 
6581
6595
  if (dirty[0] &
6582
6596
  /*_options*/
6583
6597
  8192 && li_id_value !== (li_id_value =
6584
6598
  /*option*/
6585
- ctx[48].label)) {
6599
+ ctx[49].label)) {
6586
6600
  attr(li, "id", li_id_value);
6587
6601
  }
6588
6602
 
@@ -6590,9 +6604,9 @@
6590
6604
  /*_options*/
6591
6605
  8192 && li_aria_label_value !== (li_aria_label_value =
6592
6606
  /*option*/
6593
- ctx[48].label ||
6607
+ ctx[49].label ||
6594
6608
  /*option*/
6595
- ctx[48].value)) {
6609
+ ctx[49].value)) {
6596
6610
  attr(li, "aria-label", li_aria_label_value);
6597
6611
  }
6598
6612
 
@@ -6602,7 +6616,7 @@
6602
6616
  /*_values*/
6603
6617
  ctx[12].includes(
6604
6618
  /*option*/
6605
- ctx[48].value) ? "true" : "false")) {
6619
+ ctx[49].value) ? "true" : "false")) {
6606
6620
  attr(li, "aria-selected", li_aria_selected_value);
6607
6621
  }
6608
6622
 
@@ -6610,7 +6624,7 @@
6610
6624
  /*_options*/
6611
6625
  8192 && li_data_testid_value !== (li_data_testid_value = `dropdown-item-${
6612
6626
  /*option*/
6613
- ctx[48].value}`)) {
6627
+ ctx[49].value}`)) {
6614
6628
  attr(li, "data-testid", li_data_testid_value);
6615
6629
  }
6616
6630
 
@@ -6618,7 +6632,7 @@
6618
6632
  /*_options*/
6619
6633
  8192 && li_data_index_value !== (li_data_index_value =
6620
6634
  /*index*/
6621
- ctx[52])) {
6635
+ ctx[53])) {
6622
6636
  attr(li, "data-index", li_data_index_value);
6623
6637
  }
6624
6638
 
@@ -6626,7 +6640,7 @@
6626
6640
  /*_options*/
6627
6641
  8192 && li_data_value_value !== (li_data_value_value =
6628
6642
  /*option*/
6629
- ctx[48].value)) {
6643
+ ctx[49].value)) {
6630
6644
  attr(li, "data-value", li_data_value_value);
6631
6645
  }
6632
6646
 
@@ -6635,7 +6649,7 @@
6635
6649
  73728) {
6636
6650
  toggle_class(li, "dropdown-item--tabbed",
6637
6651
  /*index*/
6638
- ctx[52] ===
6652
+ ctx[53] ===
6639
6653
  /*_highlightedIndex*/
6640
6654
  ctx[16]);
6641
6655
  }
@@ -6647,7 +6661,7 @@
6647
6661
  /*_values*/
6648
6662
  ctx[12].includes(
6649
6663
  /*option*/
6650
- ctx[48].value));
6664
+ ctx[49].value));
6651
6665
  }
6652
6666
  },
6653
6667
 
@@ -6658,14 +6672,14 @@
6658
6672
  }
6659
6673
 
6660
6674
  };
6661
- } // (234:6) {#each _options as option}
6675
+ } // (246:6) {#each _options as option}
6662
6676
 
6663
6677
 
6664
6678
  function create_each_block$4(ctx) {
6665
6679
  let option;
6666
6680
  let t0_value =
6667
6681
  /*option*/
6668
- ctx[48].label + "";
6682
+ ctx[49].label + "";
6669
6683
  let t0;
6670
6684
  let t1;
6671
6685
  let option_selected_value;
@@ -6678,14 +6692,14 @@
6678
6692
  t1 = space();
6679
6693
  option.selected = option_selected_value =
6680
6694
  /*option*/
6681
- ctx[48].selected;
6695
+ ctx[49].selected;
6682
6696
  option.__value = option_value_value =
6683
6697
  /*option*/
6684
- ctx[48].value;
6698
+ ctx[49].value;
6685
6699
  option.value = option.__value;
6686
6700
  attr(option, "aria-label", option_aria_label_value =
6687
6701
  /*option*/
6688
- ctx[48].label);
6702
+ ctx[49].label);
6689
6703
  },
6690
6704
 
6691
6705
  m(target, anchor) {
@@ -6699,13 +6713,13 @@
6699
6713
  /*_options*/
6700
6714
  8192 && t0_value !== (t0_value =
6701
6715
  /*option*/
6702
- ctx[48].label + "")) set_data(t0, t0_value);
6716
+ ctx[49].label + "")) set_data(t0, t0_value);
6703
6717
 
6704
6718
  if (dirty[0] &
6705
6719
  /*_options*/
6706
6720
  8192 && option_selected_value !== (option_selected_value =
6707
6721
  /*option*/
6708
- ctx[48].selected)) {
6722
+ ctx[49].selected)) {
6709
6723
  option.selected = option_selected_value;
6710
6724
  }
6711
6725
 
@@ -6713,7 +6727,7 @@
6713
6727
  /*_options*/
6714
6728
  8192 && option_value_value !== (option_value_value =
6715
6729
  /*option*/
6716
- ctx[48].value)) {
6730
+ ctx[49].value)) {
6717
6731
  option.__value = option_value_value;
6718
6732
  option.value = option.__value;
6719
6733
  }
@@ -6722,7 +6736,7 @@
6722
6736
  /*_options*/
6723
6737
  8192 && option_aria_label_value !== (option_aria_label_value =
6724
6738
  /*option*/
6725
- ctx[48].label)) {
6739
+ ctx[49].label)) {
6726
6740
  attr(option, "aria-label", option_aria_label_value);
6727
6741
  }
6728
6742
  },
@@ -6734,7 +6748,7 @@
6734
6748
  };
6735
6749
  }
6736
6750
 
6737
- function create_fragment$p(ctx) {
6751
+ function create_fragment$q(ctx) {
6738
6752
  let div;
6739
6753
  let div_data_testid_value;
6740
6754
  let div_style_value;
@@ -6742,7 +6756,7 @@
6742
6756
  function select_block_type(ctx, dirty) {
6743
6757
  if (
6744
6758
  /*_native*/
6745
- ctx[22]) return create_if_block$a;
6759
+ ctx[22]) return create_if_block$b;
6746
6760
  return create_else_block$1;
6747
6761
  }
6748
6762
 
@@ -6851,21 +6865,7 @@
6851
6865
  };
6852
6866
  }
6853
6867
 
6854
- function getCustomDropdownWidth(options) {
6855
- let width;
6856
- let maxCount = 0;
6857
- options.forEach(option => {
6858
- const label = option.label || option.value || "";
6859
-
6860
- if (!width && maxCount < label.length) {
6861
- maxCount = label.length;
6862
- width = `${Math.max(20, maxCount + 12)}ch`;
6863
- }
6864
- });
6865
- return width;
6866
- }
6867
-
6868
- function instance$m($$self, $$props, $$invalidate) {
6868
+ function instance$n($$self, $$props, $$invalidate) {
6869
6869
  const showMenu = _async(function () {
6870
6870
  if (_disabled || _isMenuVisible) {
6871
6871
  return;
@@ -6958,7 +6958,16 @@
6958
6958
  $$invalidate(17, _computedWidth = getCustomDropdownWidth(_options));
6959
6959
  addKeyboardEventListeners();
6960
6960
  setHighlightedIndexToSelected();
6961
- }
6961
+ } // watch for DOM changes within the slot => dynamic binding
6962
+
6963
+
6964
+ const slot = _el.querySelector("slot");
6965
+
6966
+ slot === null || slot === void 0 ? void 0 : slot.addEventListener("slotchange", _e => {
6967
+ $$invalidate(14, _selectedLabel = "");
6968
+ $$invalidate(12, _values = parseValues());
6969
+ $$invalidate(13, _options = getOptions());
6970
+ });
6962
6971
  });
6963
6972
  });
6964
6973
  onDestroy(() => {
@@ -6983,7 +6992,7 @@
6983
6992
 
6984
6993
  function getOptions() {
6985
6994
  const children = getChildren();
6986
- return children.map(el => {
6995
+ return children.filter(child => child.tagName === "GOA-DROPDOWN-ITEM").map(el => {
6987
6996
  const option = el;
6988
6997
  const value = el.getAttribute("value") || option.value;
6989
6998
  const label = el.getAttribute("label") || option.label || value;
@@ -7001,6 +7010,26 @@
7001
7010
  label
7002
7011
  };
7003
7012
  });
7013
+ } // compute the required width to enure all children fit
7014
+
7015
+
7016
+ function getCustomDropdownWidth(options) {
7017
+ let width;
7018
+ let maxCount = 0;
7019
+
7020
+ if (options.length === 0 && placeholder !== "") {
7021
+ return `${placeholder.length + 12}ch`;
7022
+ }
7023
+
7024
+ options.forEach(option => {
7025
+ const label = option.label || option.value || "";
7026
+
7027
+ if (!width && maxCount < label.length) {
7028
+ maxCount = label.length;
7029
+ width = `${Math.max(20, maxCount + 12)}ch`;
7030
+ }
7031
+ });
7032
+ return width;
7004
7033
  }
7005
7034
 
7006
7035
  function addKeyboardEventListeners() {
@@ -7223,12 +7252,12 @@
7223
7252
  class Dropdown extends SvelteElement {
7224
7253
  constructor(options) {
7225
7254
  super();
7226
- this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.dropdown{position:relative;cursor:pointer;display:inline-block;width:100%}@media(min-width: 640px){.dropdown{width:var(--width)}}.dropdown-background{cursor:default;position:fixed;z-index:98;inset:0}.dropdown-list{position:absolute;left:0;right:0;padding:0;margin:0;margin-top:3px;list-style-type:none;background:var(--color-white);border-radius:var(--input-border-radius);outline:none;box-shadow:var(--shadow-1);z-index:99;scroll-behavior:smooth;scrollbar-width:thin;display:none}.dropdown-active{display:block}.dropdown-list::-webkit-scrollbar{width:6px}.dropdown-list::-webkit-scrollbar-track{background:#f1f1f1}.dropdown-list::-webkit-scrollbar-thumb{background:#888}.dropdown-list::-webkit-scrollbar-thumb:hover{background:#555}.dropdown-item{margin:0;padding:0.5rem;cursor:pointer;color:var(--color-black);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dropdown-item--tabbed{background:var(--color-gray-100);color:var(--goa-color-interactive--hover)}.dropdown-item--disabled{opacity:0.5;cursor:default}.dropdown-item--disabled:hover{cursor:default;color:var(--color-gray-600)}.dropdown-item--selected{background:var(--goa-color-interactive);color:var(--color-white)}.dropdown-item--tabbed.dropdown-item--selected,.dropdown-item--selected:hover{background:var(--goa-color-interactive--hover);color:var(--color-white)}.dropdown-native{border:1px solid var(--color-gray-600);border-radius:var(--input-border-radius);background-color:var(--color-white)}.dropdown-native:has(select:disabled){background-color:var(--color-gray-100);border-color:var(--color-gray-200);box-shadow:none;color:var(--goa-color-text-secondary);cursor:default}.dropdown-native:has(select.error){border:2px solid var(--goa-color-interactive--error)}select{border:none;background-color:transparent;color:var(--goa-color-text);font-size:var(--input-font-size);appearance:none;padding:calc(var(--input-padding) + 2px);padding-left:0.5rem;padding-right:3rem;outline:none;width:100%}.dropdown-native::after{content:"";position:absolute;right:0.6rem;top:0.6rem;pointer-events:none;width:1.5rem;height:1.5rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='none' stroke='%23333333' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M112 184l144 144 144-144' /%3E%3C/svg%3E");background-repeat:none}.dropdown-native:focus-within{box-shadow:0 0 0 3px var(--goa-color-interactive--focus)}</style>`;
7255
+ this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.dropdown{position:relative;cursor:pointer;display:inline-block;width:100%}@media(min-width: 640px){.dropdown{width:var(--width)}}.dropdown-background{cursor:default;position:fixed;z-index:98;inset:0}.dropdown-list{position:absolute;left:0;right:0;padding:0;margin: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;scroll-behavior:smooth;scrollbar-width:thin;display:none}.dropdown-active{display:block}.dropdown-list::-webkit-scrollbar{width:6px}.dropdown-list::-webkit-scrollbar-track{background:#f1f1f1}.dropdown-list::-webkit-scrollbar-thumb{background:#888}.dropdown-list::-webkit-scrollbar-thumb:hover{background:#555}.dropdown-item{margin:0;padding:0.5rem;cursor:pointer;color:var(--goa-color-greyscale-black);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dropdown-item--tabbed{background:var(--goa-color-greyscale-100);color:var(--goa-color-interactive-hover)}.dropdown-item--disabled{opacity:0.5;cursor:default}.dropdown-item--disabled:hover{cursor:default;color:var(--goa-color-greyscale-700)}.dropdown-item--selected{background:var(--goa-color-interactive-default);color:var(--goa-color-greyscale-white)}.dropdown-item--tabbed.dropdown-item--selected,.dropdown-item--selected:hover{background:var(--goa-color-interactive-hover);color:var(--goa-color-greyscale-white)}.dropdown-native{border:1px solid var(--goa-color-greyscale-700);border-radius:var(--goa-border-radius-m);background-color:var(--goa-color-greyscale-white)}.dropdown-native:has(select:disabled){background-color:var(--goa-color-greyscale-100);border-color:var(--goa-color-greyscale-200);box-shadow:none;color:var(--goa-color-text-secondary);cursor:default}.dropdown-native:has(select.error){border:2px solid var(--goa-color-interactive-error)}select{border:none;background-color:transparent;color:var(--goa-color-text-default);font-size:var(--goa-font-size-4);appearance:none;padding:calc(var(--goa-space-xs) + 2px);padding-left:0.5rem;padding-right:3rem;outline:none;width:100%}.dropdown-native::after{content:"";position:absolute;right:0.6rem;top:0.6rem;pointer-events:none;width:1.5rem;height:1.5rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='none' stroke='%23333333' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M112 184l144 144 144-144' /%3E%3C/svg%3E");background-repeat:none}.dropdown-native:focus-within{box-shadow:0 0 0 3px var(--goa-color-interactive-focus)}</style>`;
7227
7256
  init(this, {
7228
7257
  target: this.shadowRoot,
7229
7258
  props: attribute_to_object(this.attributes),
7230
7259
  customElement: true
7231
- }, instance$m, create_fragment$p, safe_not_equal, {
7260
+ }, instance$n, create_fragment$q, safe_not_equal, {
7232
7261
  name: 0,
7233
7262
  arialabel: 1,
7234
7263
  value: 28,
@@ -7432,7 +7461,7 @@
7432
7461
  customElements.define("goa-dropdown", Dropdown);
7433
7462
  /* libs/web-components/src/components/dropdown/DropdownItem.svelte generated by Svelte v3.51.0 */
7434
7463
 
7435
- function create_fragment$o(ctx) {
7464
+ function create_fragment$p(ctx) {
7436
7465
  return {
7437
7466
  c() {
7438
7467
  this.c = noop;
@@ -7453,7 +7482,7 @@
7453
7482
  target: this.shadowRoot,
7454
7483
  props: attribute_to_object(this.attributes),
7455
7484
  customElement: true
7456
- }, null, create_fragment$o, safe_not_equal, {}, null);
7485
+ }, null, create_fragment$p, safe_not_equal, {}, null);
7457
7486
 
7458
7487
  if (options) {
7459
7488
  if (options.target) {
@@ -7467,7 +7496,7 @@
7467
7496
  customElements.define("goa-dropdown-item", DropdownItem);
7468
7497
  /* libs/web-components/src/components/focus-trap/FocusTrap.svelte generated by Svelte v3.51.0 */
7469
7498
 
7470
- function create_fragment$n(ctx) {
7499
+ function create_fragment$o(ctx) {
7471
7500
  let div;
7472
7501
  return {
7473
7502
  c() {
@@ -7528,7 +7557,7 @@
7528
7557
  }
7529
7558
  }
7530
7559
 
7531
- function instance$l($$self, $$props, $$invalidate) {
7560
+ function instance$m($$self, $$props, $$invalidate) {
7532
7561
  let isActive;
7533
7562
  let {
7534
7563
  active
@@ -7697,7 +7726,7 @@
7697
7726
  target: this.shadowRoot,
7698
7727
  props: attribute_to_object(this.attributes),
7699
7728
  customElement: true
7700
- }, instance$l, create_fragment$n, safe_not_equal, {
7729
+ }, instance$m, create_fragment$o, safe_not_equal, {
7701
7730
  active: 1
7702
7731
  }, null);
7703
7732
 
@@ -7733,7 +7762,7 @@
7733
7762
  customElements.define("goa-focus-trap", FocusTrap);
7734
7763
  /* libs/web-components/src/components/footer/Footer.svelte generated by Svelte v3.51.0 */
7735
7764
 
7736
- function create_if_block$9(ctx) {
7765
+ function create_if_block$a(ctx) {
7737
7766
  let goa_divider;
7738
7767
  return {
7739
7768
  c() {
@@ -7752,9 +7781,7 @@
7752
7781
  };
7753
7782
  }
7754
7783
 
7755
- function create_fragment$m(ctx) {
7756
- var _ctx$;
7757
-
7784
+ function create_fragment$n(ctx) {
7758
7785
  let div5;
7759
7786
  let div4;
7760
7787
  let div0;
@@ -7770,11 +7797,11 @@
7770
7797
  let div5_style_value;
7771
7798
  let if_block =
7772
7799
  /*navLinks*/
7773
- ((_ctx$ = ctx[2]) === null || _ctx$ === void 0 ? void 0 : _ctx$.length) && create_if_block$9();
7800
+ ctx[2] &&
7801
+ /*navLinks*/
7802
+ ctx[2].length > 0 && create_if_block$a();
7774
7803
  return {
7775
7804
  c() {
7776
- var _ctx$2, _ctx$3;
7777
-
7778
7805
  div5 = element("div");
7779
7806
  div4 = element("div");
7780
7807
  div0 = element("div");
@@ -7803,11 +7830,15 @@
7803
7830
  attr(div2, "class", "abgov");
7804
7831
  toggle_class(div2, "with-meta-links",
7805
7832
  /*metaLinks*/
7806
- (_ctx$2 = ctx[3]) === null || _ctx$2 === void 0 ? void 0 : _ctx$2.length);
7833
+ ctx[3] &&
7834
+ /*metaLinks*/
7835
+ ctx[3].length > 0);
7807
7836
  attr(div3, "class", "meta-section");
7808
7837
  toggle_class(div3, "with-meta-links",
7809
7838
  /*metaLinks*/
7810
- (_ctx$3 = ctx[3]) === null || _ctx$3 === void 0 ? void 0 : _ctx$3.length);
7839
+ ctx[3] &&
7840
+ /*metaLinks*/
7841
+ ctx[3].length > 0);
7811
7842
  attr(div4, "class", "content");
7812
7843
  attr(div5, "class", "app-footer");
7813
7844
  attr(div5, "style", div5_style_value = `--max-content-width: ${
@@ -7835,13 +7866,13 @@
7835
7866
  },
7836
7867
 
7837
7868
  p(ctx, [dirty]) {
7838
- var _ctx$4;
7839
-
7840
7869
  if (
7841
7870
  /*navLinks*/
7842
- (_ctx$4 = ctx[2]) !== null && _ctx$4 !== void 0 && _ctx$4.length) {
7871
+ ctx[2] &&
7872
+ /*navLinks*/
7873
+ ctx[2].length > 0) {
7843
7874
  if (if_block) ;else {
7844
- if_block = create_if_block$9();
7875
+ if_block = create_if_block$a();
7845
7876
  if_block.c();
7846
7877
  if_block.m(div4, t1);
7847
7878
  }
@@ -7853,21 +7884,21 @@
7853
7884
  if (dirty &
7854
7885
  /*metaLinks*/
7855
7886
  8) {
7856
- var _ctx$5;
7857
-
7858
7887
  toggle_class(div2, "with-meta-links",
7859
7888
  /*metaLinks*/
7860
- (_ctx$5 = ctx[3]) === null || _ctx$5 === void 0 ? void 0 : _ctx$5.length);
7889
+ ctx[3] &&
7890
+ /*metaLinks*/
7891
+ ctx[3].length > 0);
7861
7892
  }
7862
7893
 
7863
7894
  if (dirty &
7864
7895
  /*metaLinks*/
7865
7896
  8) {
7866
- var _ctx$6;
7867
-
7868
7897
  toggle_class(div3, "with-meta-links",
7869
7898
  /*metaLinks*/
7870
- (_ctx$6 = ctx[3]) === null || _ctx$6 === void 0 ? void 0 : _ctx$6.length);
7899
+ ctx[3] &&
7900
+ /*metaLinks*/
7901
+ ctx[3].length > 0);
7871
7902
  }
7872
7903
 
7873
7904
  if (dirty &
@@ -7893,7 +7924,7 @@
7893
7924
  };
7894
7925
  }
7895
7926
 
7896
- function instance$k($$self, $$props, $$invalidate) {
7927
+ function instance$l($$self, $$props, $$invalidate) {
7897
7928
  let {
7898
7929
  maxcontentwidth = ""
7899
7930
  } = $$props;
@@ -7927,12 +7958,12 @@
7927
7958
  class Footer extends SvelteElement {
7928
7959
  constructor(options) {
7929
7960
  super();
7930
- this.shadowRoot.innerHTML = `<style>*{box-sizing:border-box}.app-footer{background-color:var(--color-gray-100);border-top:2px solid var(--color-gray-200);border-bottom:1rem solid var(--goa-color-brand)}.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>`;
7961
+ 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>`;
7931
7962
  init(this, {
7932
7963
  target: this.shadowRoot,
7933
7964
  props: attribute_to_object(this.attributes),
7934
7965
  customElement: true
7935
- }, instance$k, create_fragment$m, safe_not_equal, {
7966
+ }, instance$l, create_fragment$n, safe_not_equal, {
7936
7967
  maxcontentwidth: 0
7937
7968
  }, null);
7938
7969
 
@@ -8022,7 +8053,7 @@
8022
8053
  };
8023
8054
  }
8024
8055
 
8025
- function create_fragment$l(ctx) {
8056
+ function create_fragment$m(ctx) {
8026
8057
  let section;
8027
8058
  let div;
8028
8059
  let t;
@@ -8110,7 +8141,7 @@
8110
8141
  };
8111
8142
  }
8112
8143
 
8113
- function instance$j($$self, $$props, $$invalidate) {
8144
+ function instance$k($$self, $$props, $$invalidate) {
8114
8145
  let rootEl;
8115
8146
  let children = [];
8116
8147
  onMount(function () {
@@ -8140,12 +8171,12 @@
8140
8171
  class FooterMetaSection extends SvelteElement {
8141
8172
  constructor(options) {
8142
8173
  super();
8143
- this.shadowRoot.innerHTML = `<style>.hidden{display:none}ul{display:flex;flex-wrap:wrap;gap:1rem;padding-left:0}li{list-style-type:none}a{color:var(--goa-color-text);white-space:nowrap}</style>`;
8174
+ this.shadowRoot.innerHTML = `<style>.hidden{display:none}ul{display:flex;flex-wrap:wrap;gap:1rem;padding-left:0}li{list-style-type:none}a{color:var(--goa-color-text-default);white-space:nowrap}</style>`;
8144
8175
  init(this, {
8145
8176
  target: this.shadowRoot,
8146
8177
  props: attribute_to_object(this.attributes),
8147
8178
  customElement: true
8148
- }, instance$j, create_fragment$l, safe_not_equal, {}, null);
8179
+ }, instance$k, create_fragment$m, safe_not_equal, {}, null);
8149
8180
 
8150
8181
  if (options) {
8151
8182
  if (options.target) {
@@ -8166,7 +8197,7 @@
8166
8197
  } // (31:2) {#if heading}
8167
8198
 
8168
8199
 
8169
- function create_if_block$8(ctx) {
8200
+ function create_if_block$9(ctx) {
8170
8201
  let div;
8171
8202
  let t0;
8172
8203
  let t1;
@@ -8255,7 +8286,7 @@
8255
8286
  };
8256
8287
  }
8257
8288
 
8258
- function create_fragment$k(ctx) {
8289
+ function create_fragment$l(ctx) {
8259
8290
  let section;
8260
8291
  let t0;
8261
8292
  let div;
@@ -8264,7 +8295,7 @@
8264
8295
  let ul_style_value;
8265
8296
  let if_block =
8266
8297
  /*heading*/
8267
- ctx[0] && create_if_block$8(ctx);
8298
+ ctx[0] && create_if_block$9(ctx);
8268
8299
  let each_value =
8269
8300
  /*children*/
8270
8301
  ctx[3];
@@ -8331,7 +8362,7 @@
8331
8362
  if (if_block) {
8332
8363
  if_block.p(ctx, dirty);
8333
8364
  } else {
8334
- if_block = create_if_block$8(ctx);
8365
+ if_block = create_if_block$9(ctx);
8335
8366
  if_block.c();
8336
8367
  if_block.m(section, t0);
8337
8368
  }
@@ -8402,7 +8433,7 @@
8402
8433
  };
8403
8434
  }
8404
8435
 
8405
- function instance$i($$self, $$props, $$invalidate) {
8436
+ function instance$j($$self, $$props, $$invalidate) {
8406
8437
  let {
8407
8438
  heading = ""
8408
8439
  } = $$props;
@@ -8449,12 +8480,12 @@
8449
8480
  class FooterNavSection extends SvelteElement {
8450
8481
  constructor(options) {
8451
8482
  super();
8452
- this.shadowRoot.innerHTML = `<style>:host{flex:auto}.title{font-size:var(--fs-xl);line-height:var(--lh-lg)}.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)}</style>`;
8483
+ 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>`;
8453
8484
  init(this, {
8454
8485
  target: this.shadowRoot,
8455
8486
  props: attribute_to_object(this.attributes),
8456
8487
  customElement: true
8457
- }, instance$i, create_fragment$k, safe_not_equal, {
8488
+ }, instance$j, create_fragment$l, safe_not_equal, {
8458
8489
  heading: 0,
8459
8490
  maxcolumncount: 1
8460
8491
  }, null);
@@ -8652,7 +8683,7 @@
8652
8683
  } // (48:2) {#if helptext}
8653
8684
 
8654
8685
 
8655
- function create_if_block$7(ctx) {
8686
+ function create_if_block$8(ctx) {
8656
8687
  let div;
8657
8688
  let t;
8658
8689
  return {
@@ -8684,7 +8715,7 @@
8684
8715
  };
8685
8716
  }
8686
8717
 
8687
- function create_fragment$j(ctx) {
8718
+ function create_fragment$k(ctx) {
8688
8719
  let div1;
8689
8720
  let t0;
8690
8721
  let div0;
@@ -8699,7 +8730,7 @@
8699
8730
  ctx[7] && create_if_block_1$4(ctx);
8700
8731
  let if_block2 =
8701
8732
  /*helptext*/
8702
- ctx[6] && create_if_block$7(ctx);
8733
+ ctx[6] && create_if_block$8(ctx);
8703
8734
  return {
8704
8735
  c() {
8705
8736
  div1 = element("div");
@@ -8776,7 +8807,7 @@
8776
8807
  if (if_block2) {
8777
8808
  if_block2.p(ctx, dirty);
8778
8809
  } else {
8779
- if_block2 = create_if_block$7(ctx);
8810
+ if_block2 = create_if_block$8(ctx);
8780
8811
  if_block2.c();
8781
8812
  if_block2.m(div1, null);
8782
8813
  }
@@ -8821,7 +8852,7 @@
8821
8852
  };
8822
8853
  }
8823
8854
 
8824
- function instance$h($$self, $$props, $$invalidate) {
8855
+ function instance$i($$self, $$props, $$invalidate) {
8825
8856
  const [REQUIREMENT_TYPES, validateRequirementType] = typeValidator("Requirement type", ["optional", "required"], false);
8826
8857
  let {
8827
8858
  testid = ""
@@ -8872,12 +8903,12 @@
8872
8903
  class FormItem extends SvelteElement {
8873
8904
  constructor(options) {
8874
8905
  super();
8875
- this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}*{box-sizing:border-box}.label{display:block;font-weight:var(--fw-bold);color:var(--goa-color-text);font-size:var(--fs-base);padding:0.5rem 0}.label em{color:var(--color-gray-600);font-weight:var(--fw-regular);font-size:var(--fs-sm);line-height:var(--lh-sm);font-style:normal}.form-item-input{margin-bottom:0.25rem}.help-msg{font-size:var(--fs-sm);color:var(--goa-color-text);margin-right:56px}.error-msg{display:inline-flex;gap:0.25rem;font-size:var(--fs-sm);color:var(--goa-color-interactive--error);margin-bottom:0.25rem}</style>`;
8906
+ this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}*{box-sizing:border-box}.label{display:block;font-weight:var(--goa-font-weight-bold);color:var(--goa-color-text-default);font-size:var(--goa-font-size-4);padding:0.5rem 0}.label em{color:var(--goa-color-greyscale-700);font-weight:var(--goa-font-weight-regular);font-size:var(--goa-font-size-2);line-height:var(--goa-line-height-1);font-style:normal}.form-item-input{margin-bottom:0.25rem}.help-msg{font-size:var(--goa-font-size-2);color:var(--goa-color-text-default);margin-right:56px}.error-msg{display:inline-flex;gap:0.25rem;font-size:var(--goa-font-size-2);color:var(--goa-color-interactive-error);margin-bottom:0.25rem}</style>`;
8876
8907
  init(this, {
8877
8908
  target: this.shadowRoot,
8878
8909
  props: attribute_to_object(this.attributes),
8879
8910
  customElement: true
8880
- }, instance$h, create_fragment$j, safe_not_equal, {
8911
+ }, instance$i, create_fragment$k, safe_not_equal, {
8881
8912
  testid: 0,
8882
8913
  mt: 1,
8883
8914
  mr: 2,
@@ -9009,7 +9040,7 @@
9009
9040
  customElements.define("goa-form-item", FormItem);
9010
9041
  /* libs/web-components/src/components/grid/Grid.svelte generated by Svelte v3.51.0 */
9011
9042
 
9012
- function create_fragment$i(ctx) {
9043
+ function create_fragment$j(ctx) {
9013
9044
  let div;
9014
9045
  let slot;
9015
9046
  let div_style_value;
@@ -9032,7 +9063,7 @@
9032
9063
  --min-child-width: ${
9033
9064
  /*minchildwidth*/
9034
9065
  ctx[1] || 0};
9035
- gap: var(--goa-spacing-${
9066
+ gap: var(--goa-space-${
9036
9067
  /*gap*/
9037
9068
  ctx[0]})
9038
9069
  `);
@@ -9059,7 +9090,7 @@
9059
9090
  --min-child-width: ${
9060
9091
  /*minchildwidth*/
9061
9092
  ctx[1] || 0};
9062
- gap: var(--goa-spacing-${
9093
+ gap: var(--goa-space-${
9063
9094
  /*gap*/
9064
9095
  ctx[0]})
9065
9096
  `)) {
@@ -9077,7 +9108,7 @@
9077
9108
  };
9078
9109
  }
9079
9110
 
9080
- function instance$g($$self, $$props, $$invalidate) {
9111
+ function instance$h($$self, $$props, $$invalidate) {
9081
9112
  let {
9082
9113
  gap = "m"
9083
9114
  } = $$props;
@@ -9117,12 +9148,12 @@
9117
9148
  class Grid extends SvelteElement {
9118
9149
  constructor(options) {
9119
9150
  super();
9120
- this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.goa-grid{display:flex;flex-direction:column;gap:var(--gap)}@media(min-width: 640px){.goa-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(var(--min-child-width), 1fr))}}</style>`;
9151
+ this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.goa-grid{display:flex;flex-direction:column;gap:var(--gap)}@media(min-width: 640px){.goa-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(var(--min-child-width), 1fr))}}</style>`;
9121
9152
  init(this, {
9122
9153
  target: this.shadowRoot,
9123
9154
  props: attribute_to_object(this.attributes),
9124
9155
  customElement: true
9125
- }, instance$g, create_fragment$i, safe_not_equal, {
9156
+ }, instance$h, create_fragment$j, safe_not_equal, {
9126
9157
  gap: 0,
9127
9158
  minchildwidth: 1,
9128
9159
  mt: 2,
@@ -9218,7 +9249,7 @@
9218
9249
  customElements.define("goa-grid", Grid);
9219
9250
  /* libs/web-components/src/components/hero-banner/HeroBanner.svelte generated by Svelte v3.51.0 */
9220
9251
 
9221
- function create_fragment$h(ctx) {
9252
+ function create_fragment$i(ctx) {
9222
9253
  let div1;
9223
9254
  let goa_page_block;
9224
9255
  let h1;
@@ -9303,7 +9334,7 @@
9303
9334
  };
9304
9335
  }
9305
9336
 
9306
- function instance$f($$self, $$props, $$invalidate) {
9337
+ function instance$g($$self, $$props, $$invalidate) {
9307
9338
  let {
9308
9339
  heading
9309
9340
  } = $$props;
@@ -9326,12 +9357,12 @@
9326
9357
  class HeroBanner extends SvelteElement {
9327
9358
  constructor(options) {
9328
9359
  super();
9329
- this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.goa-hero{box-sizing:border-box;display:flex;justify-content:flex-end;flex-direction:column;border-bottom:8px solid var(--goa-color-brand);color:var(--color-white);background-position:center center;width:100%;padding:3.5rem 0}h1{margin:0 0 1.75rem;padding:0;color:var(--color-white);font-size:var(--fs-3xl);line-height:var(--lh-2xl);font-weight:var(--fw-bold)}.goa-hero-banner-content{font-size:1.5rem;line-height:2rem;margin-bottom:1.75rem;color:#fff}</style>`;
9360
+ this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.goa-hero{box-sizing:border-box;display:flex;justify-content:flex-end;flex-direction:column;border-bottom:8px solid var(--goa-color-brand-default);color:var(--goa-color-greyscale-white);background-position:center center;width:100%;padding:3.5rem 0}h1{margin:0 0 1.75rem;padding:0;color:var(--goa-color-greyscale-white);font-size:var(--goa-font-size-10);line-height:var(--goa-line-height-7);font-weight:var(--goa-font-weight-bold)}.goa-hero-banner-content{font-size:1.5rem;line-height:2rem;margin-bottom:1.75rem;color:#fff}</style>`;
9330
9361
  init(this, {
9331
9362
  target: this.shadowRoot,
9332
9363
  props: attribute_to_object(this.attributes),
9333
9364
  customElement: true
9334
- }, instance$f, create_fragment$h, safe_not_equal, {
9365
+ }, instance$g, create_fragment$i, safe_not_equal, {
9335
9366
  heading: 0,
9336
9367
  backgroundurl: 1,
9337
9368
  minheight: 2
@@ -9391,7 +9422,7 @@
9391
9422
  customElements.define("goa-hero-banner", HeroBanner);
9392
9423
  /* libs/web-components/src/components/icon-button/IconButton.svelte generated by Svelte v3.51.0 */
9393
9424
 
9394
- function create_fragment$g(ctx) {
9425
+ function create_fragment$h(ctx) {
9395
9426
  let button;
9396
9427
  let goa_icon;
9397
9428
  let button_style_value;
@@ -9563,7 +9594,7 @@
9563
9594
  }));
9564
9595
  }
9565
9596
 
9566
- function instance$e($$self, $$props, $$invalidate) {
9597
+ function instance$f($$self, $$props, $$invalidate) {
9567
9598
  let css;
9568
9599
  let isDisabled;
9569
9600
  let isInverted;
@@ -9663,12 +9694,12 @@
9663
9694
  class IconButton extends SvelteElement {
9664
9695
  constructor(options) {
9665
9696
  super();
9666
- this.shadowRoot.innerHTML = `<style>:host{display:inline-flex;align-items:center;box-sizing:border-box;font-family:var(--font-family)}button,button *{box-sizing:border-box}button{display:inline-flex;align-items:center;box-sizing:border-box;justify-content:center;background:transparent;cursor:pointer;border:none;border-radius:0.5rem;padding:var(--pading-size)}.color,.dark{color:var(--goa-color-interactive);fill:var(--goa-color-interactive);cursor:pointer;transition:background-color 100ms ease-in, transform 100ms ease-in}.dark:not(.inverted){color:unset}button:hover{background-color:var(--color-gray-100);border-color:var(--color-gray-100);color:var(--goa-color-interactive--hover);outline:none}button:focus,button:active{background-color:var(--color-gray-100);border-color:var(--goa-color-interactive--active);color:var(--goa-color-interactive--active);box-shadow:0 0 0 3px var(--goa-color-interactive--focus);outline:none}.color.inverted:hover{background-color:var(--goa-color-primary-dark)}button:disabled{pointer-events:none;opacity:0.5;transform:none;cursor:default}button:disabled:hover{background-color:transparent}button.dark:hover{background-color:rgba(0, 0, 0, 0.3)}button.dark:focus,button.dark:active{background-color:rgba(0, 0, 0, 0.3);box-shadow:0 0 0 3px var(--color-white)}</style>`;
9697
+ this.shadowRoot.innerHTML = `<style>:host{display:inline-flex;align-items:center;box-sizing:border-box;font-family:var(--goa-font-family-sans)}button,button *{box-sizing:border-box}button{display:inline-flex;align-items:center;box-sizing:border-box;justify-content:center;background:transparent;cursor:pointer;border:none;border-radius:0.5rem;padding:var(--pading-size)}.color,.dark{color:var(--goa-color-interactive-default);fill:var(--goa-color-interactive-default);cursor:pointer;transition:background-color 100ms ease-in, transform 100ms ease-in}.dark:not(.inverted){color:unset}button:hover{background-color:var(--goa-color-greyscale-100);border-color:var(--goa-color-greyscale-100);color:var(--goa-color-interactive-hover);outline:none}button:focus,button:active{background-color:var(--goa-color-greyscale-100);border-color:var(--goa-color-interactive-focus);color:var(--goa-color-interactive-focus);box-shadow:0 0 0 3px var(--goa-color-interactive-focus);outline:none}.color.inverted:hover{background-color:var(--goa-color-interactive-hover)}button:disabled{pointer-events:none;opacity:0.5;transform:none;cursor:default}button:disabled:hover{background-color:transparent}button.dark:hover{background-color:rgba(0, 0, 0, 0.3)}button.dark:focus,button.dark:active{background-color:rgba(0, 0, 0, 0.3);box-shadow:0 0 0 3px var(--goa-color-greyscale-white)}</style>`;
9667
9698
  init(this, {
9668
9699
  target: this.shadowRoot,
9669
9700
  props: attribute_to_object(this.attributes),
9670
9701
  customElement: true
9671
- }, instance$e, create_fragment$g, safe_not_equal, {
9702
+ }, instance$f, create_fragment$h, safe_not_equal, {
9672
9703
  icon: 0,
9673
9704
  size: 1,
9674
9705
  theme: 2,
@@ -9836,7 +9867,7 @@
9836
9867
  customElements.define("goa-icon-button", IconButton);
9837
9868
  /* libs/web-components/src/components/icon/Icon.svelte generated by Svelte v3.51.0 */
9838
9869
 
9839
- function create_if_block$6(ctx) {
9870
+ function create_if_block$7(ctx) {
9840
9871
  let ion_icon;
9841
9872
  let ion_icon_name_value;
9842
9873
  return {
@@ -9884,12 +9915,12 @@
9884
9915
  };
9885
9916
  }
9886
9917
 
9887
- function create_fragment$f(ctx) {
9918
+ function create_fragment$g(ctx) {
9888
9919
  let div;
9889
9920
  let div_style_value;
9890
9921
  let if_block =
9891
9922
  /*type*/
9892
- ctx[4] && create_if_block$6(ctx);
9923
+ ctx[4] && create_if_block$7(ctx);
9893
9924
  return {
9894
9925
  c() {
9895
9926
  div = element("div");
@@ -9942,7 +9973,7 @@
9942
9973
  if (if_block) {
9943
9974
  if_block.p(ctx, dirty);
9944
9975
  } else {
9945
- if_block = create_if_block$6(ctx);
9976
+ if_block = create_if_block$7(ctx);
9946
9977
  if_block.c();
9947
9978
  if_block.m(div, null);
9948
9979
  }
@@ -10015,7 +10046,7 @@
10015
10046
  };
10016
10047
  }
10017
10048
 
10018
- function instance$d($$self, $$props, $$invalidate) {
10049
+ function instance$e($$self, $$props, $$invalidate) {
10019
10050
  let isInverted;
10020
10051
 
10021
10052
  let _size;
@@ -10105,7 +10136,7 @@
10105
10136
  target: this.shadowRoot,
10106
10137
  props: attribute_to_object(this.attributes),
10107
10138
  customElement: true
10108
- }, instance$d, create_fragment$f, safe_not_equal, {
10139
+ }, instance$e, create_fragment$g, safe_not_equal, {
10109
10140
  mt: 0,
10110
10141
  mr: 1,
10111
10142
  mb: 2,
@@ -10315,7 +10346,7 @@
10315
10346
  }
10316
10347
 
10317
10348
  };
10318
- } // (100:4) {#if leadingicon}
10349
+ } // (109:4) {#if leadingicon}
10319
10350
 
10320
10351
 
10321
10352
  function create_if_block_3$2(ctx) {
@@ -10349,7 +10380,7 @@
10349
10380
  }
10350
10381
 
10351
10382
  };
10352
- } // (130:4) {#if trailingicon && !handlesTrailingIconClick}
10383
+ } // (139:4) {#if trailingicon && !handlesTrailingIconClick}
10353
10384
 
10354
10385
 
10355
10386
  function create_if_block_2$3(ctx) {
@@ -10384,7 +10415,7 @@
10384
10415
  }
10385
10416
 
10386
10417
  };
10387
- } // (140:4) {#if trailingicon && handlesTrailingIconClick}
10418
+ } // (149:4) {#if trailingicon && handlesTrailingIconClick}
10388
10419
 
10389
10420
 
10390
10421
  function create_if_block_1$3(ctx) {
@@ -10439,10 +10470,10 @@
10439
10470
  }
10440
10471
 
10441
10472
  };
10442
- } // (152:4) {#if suffix}
10473
+ } // (161:4) {#if suffix}
10443
10474
 
10444
10475
 
10445
- function create_if_block$5(ctx) {
10476
+ function create_if_block$6(ctx) {
10446
10477
  let span;
10447
10478
  let t;
10448
10479
  return {
@@ -10474,7 +10505,7 @@
10474
10505
  };
10475
10506
  }
10476
10507
 
10477
- function create_fragment$e(ctx) {
10508
+ function create_fragment$f(ctx) {
10478
10509
  let div3;
10479
10510
  let div2;
10480
10511
  let t0;
@@ -10512,7 +10543,7 @@
10512
10543
  ctx[24] && create_if_block_1$3(ctx);
10513
10544
  let if_block4 =
10514
10545
  /*suffix*/
10515
- ctx[15] && create_if_block$5(ctx);
10546
+ ctx[15] && create_if_block$6(ctx);
10516
10547
  return {
10517
10548
  c() {
10518
10549
  div3 = element("div");
@@ -10626,7 +10657,7 @@
10626
10657
  append(div2, input);
10627
10658
  /*input_binding*/
10628
10659
 
10629
- ctx[32](input);
10660
+ ctx[33](input);
10630
10661
  append(div2, t3);
10631
10662
  if (if_block2) if_block2.m(div2, null);
10632
10663
  append(div2, t4);
@@ -10833,7 +10864,7 @@
10833
10864
  if (if_block4) {
10834
10865
  if_block4.p(ctx, dirty);
10835
10866
  } else {
10836
- if_block4 = create_if_block$5(ctx);
10867
+ if_block4 = create_if_block$6(ctx);
10837
10868
  if_block4.c();
10838
10869
  if_block4.m(div2, t6);
10839
10870
  }
@@ -10896,7 +10927,7 @@
10896
10927
  if (if_block1) if_block1.d();
10897
10928
  /*input_binding*/
10898
10929
 
10899
- ctx[32](null);
10930
+ ctx[33](null);
10900
10931
  if (if_block2) if_block2.d();
10901
10932
  if (if_block3) if_block3.d();
10902
10933
  if (if_block4) if_block4.d();
@@ -10913,7 +10944,7 @@
10913
10944
  }));
10914
10945
  }
10915
10946
 
10916
- function instance$c($$self, $$props, $$invalidate) {
10947
+ function instance$d($$self, $$props, $$invalidate) {
10917
10948
  let handlesTrailingIconClick;
10918
10949
  let isFocused;
10919
10950
  let isReadonly;
@@ -10970,13 +11001,13 @@
10970
11001
  arialabel = null
10971
11002
  } = $$props;
10972
11003
  let {
10973
- min = null
11004
+ min = ""
10974
11005
  } = $$props;
10975
11006
  let {
10976
- max = null
11007
+ max = ""
10977
11008
  } = $$props;
10978
11009
  let {
10979
- step = null
11010
+ step = 1
10980
11011
  } = $$props;
10981
11012
  let {
10982
11013
  prefix = ""
@@ -10984,6 +11015,9 @@
10984
11015
  let {
10985
11016
  suffix = ""
10986
11017
  } = $$props;
11018
+ let {
11019
+ debounce = 0
11020
+ } = $$props;
10987
11021
  let {
10988
11022
  mt = null
10989
11023
  } = $$props;
@@ -10997,19 +11031,28 @@
10997
11031
  ml = null
10998
11032
  } = $$props;
10999
11033
  let inputEl;
11034
+ let _debounceId = null;
11000
11035
 
11001
11036
  function onKeyUp(e) {
11002
- const ee = e.target;
11003
- e.target.dispatchEvent(new CustomEvent("_change", {
11004
- composed: true,
11005
- bubbles: false,
11006
- cancelable: true,
11007
- detail: {
11008
- name,
11009
- value: ee.value
11010
- }
11011
- }));
11012
- $$invalidate(0, value = ee.value);
11037
+ const input = e.target;
11038
+ if (!input) return;
11039
+
11040
+ if (_debounceId != null) {
11041
+ clearTimeout(_debounceId);
11042
+ }
11043
+
11044
+ _debounceId = setTimeout(() => {
11045
+ input.dispatchEvent(new CustomEvent("_change", {
11046
+ composed: true,
11047
+ bubbles: false,
11048
+ cancelable: true,
11049
+ detail: {
11050
+ name,
11051
+ value: input.value
11052
+ }
11053
+ }));
11054
+ }, debounce);
11055
+ $$invalidate(0, value = input.value);
11013
11056
  }
11014
11057
 
11015
11058
  onMount(() => {
@@ -11050,6 +11093,7 @@
11050
11093
  if ('step' in $$props) $$invalidate(13, step = $$props.step);
11051
11094
  if ('prefix' in $$props) $$invalidate(14, prefix = $$props.prefix);
11052
11095
  if ('suffix' in $$props) $$invalidate(15, suffix = $$props.suffix);
11096
+ if ('debounce' in $$props) $$invalidate(31, debounce = $$props.debounce);
11053
11097
  if ('mt' in $$props) $$invalidate(16, mt = $$props.mt);
11054
11098
  if ('mr' in $$props) $$invalidate(17, mr = $$props.mr);
11055
11099
  if ('mb' in $$props) $$invalidate(18, mb = $$props.mb);
@@ -11066,7 +11110,7 @@
11066
11110
  if ($$self.$$.dirty[0] &
11067
11111
  /*focused*/
11068
11112
  268435456) {
11069
- $$invalidate(31, isFocused = toBoolean(focused));
11113
+ $$invalidate(32, isFocused = toBoolean(focused));
11070
11114
  }
11071
11115
 
11072
11116
  if ($$self.$$.dirty[0] &
@@ -11091,7 +11135,7 @@
11091
11135
  /*inputEl*/
11092
11136
  1048576 | $$self.$$.dirty[1] &
11093
11137
  /*isFocused*/
11094
- 1) {
11138
+ 2) {
11095
11139
  if (isFocused && inputEl) {
11096
11140
  setTimeout(() => inputEl.focus(), 1);
11097
11141
  }
@@ -11108,19 +11152,19 @@
11108
11152
  }
11109
11153
  };
11110
11154
 
11111
- return [value, type, name, autocapitalize, placeholder, leadingicon, trailingicon, variant, testid, width, arialabel, min, max, step, prefix, suffix, mt, mr, mb, ml, inputEl, isDisabled, isError, isReadonly, handlesTrailingIconClick, onKeyUp, disabled, handletrailingiconclick, focused, readonly, error, isFocused, input_binding];
11155
+ return [value, type, name, autocapitalize, placeholder, leadingicon, trailingicon, variant, testid, width, arialabel, min, max, step, prefix, suffix, mt, mr, mb, ml, inputEl, isDisabled, isError, isReadonly, handlesTrailingIconClick, onKeyUp, disabled, handletrailingiconclick, focused, readonly, error, debounce, isFocused, input_binding];
11112
11156
  }
11113
11157
 
11114
11158
  class Input extends SvelteElement {
11115
11159
  constructor(options) {
11116
11160
  super();
11117
- this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box}.container{position:relative;width:100%;display:inline-block}@media(min-width: 640px){.container{width:var(--width)}}.goa-input,.goa-input *{box-sizing:border-box}.goa-input{box-sizing:border-box;outline:none;transition:box-shadow 0.1s ease-in;border:1px solid var(--color-gray-600);border-radius:var(--input-border-radius);display:inline-flex;align-items:stretch;vertical-align:middle;min-width:100%}.goa-input:hover{border-color:var(--goa-color-interactive--hover)}.goa-input:active,.goa-input:focus,.goa-input:focus-within{box-shadow:0 0 0 3px var(--goa-color-interactive--focus)}.goa-input.type--range{border:none}.goa-input.type--range:active,.goa-input.type--range:focus,.goa-input.type--range:focus-within{box-shadow:none}.goa-input-leading-icon{margin-left:0.5rem}.goa-input-trailing-icon{margin-right:0.5rem}input{display:inline-block;color:var(--goa-color-text);font-size:var(--input-font-size);padding:var(--input-padding);line-height:calc(40px - calc(var(--input-padding) * 2));background-color:transparent;width:0;flex:1 1 auto}input[type="text"],input[type="date"],input[type="time"],input[type="datetime-local"],input[type="number"]{font-family:var(--font-family)}input[readonly]{cursor:pointer}.goa-input-leading-icon+input{padding-left:0.5rem}input,input:focus,input:hover,input:active{outline:none;border:none}.goa-input--disabled,.goa-input--disabled:hover,.goa-input--disabled:active,.goa-input--disabled:focus{background-color:var(--color-gray-100);border-color:var(--color-gray-200);cursor:default;box-shadow:none}.goa-input--disabled input,.goa-input--disabled input:hover,.goa-input--disabled input:active,.goa-input--disabled input:focus{color:var(--goa-color-text-secondary)}.goa-input--disabled input:hover{cursor:default !important}.prefix,.suffix,.leading-content ::slotted(div),.trailing-content ::slotted(div){background-color:var(--color-gray-100);padding:0 0.75rem;display:flex;align-items:center}.leading-content ::slotted(div),.trailing-content ::slotted(div){padding:0.5rem 0.75rem}.prefix,.leading-content ::slotted(div){border-top-left-radius:var(--input-border-radius);border-bottom-left-radius:var(--input-border-radius);border-right:1px solid var(--color-gray-600)}.suffix,.trailing-content ::slotted(div){border-top-right-radius:var(--input-border-radius);border-bottom-right-radius:var(--input-border-radius);border-left:1px solid var(--color-gray-600)}.goa-input--disabled .prefix,.goa-input--disabled .leading-content ::slotted(div){border-right:1px solid var(--color-gray-200)}.goa-input--disabled .suffix,.goa-input--disabled .trailing-content ::slotted(div){border-left:1px solid var(--color-gray-200)}input.input--goa{display:block;border:none;flex:1 1 auto}.variant--bare{border:none}.variant--bare:focus,.variant--bare:active,.variant--bare:focus-within{box-shadow:none}.error:hover,.error:focus,.error{border:2px solid var(--goa-color-interactive--error)}input[type="search" i]:enabled:read-write:-webkit-any(:focus, :hover)::-webkit-search-cancel-button{position:relative;right:var(--search-icon-offset);cursor:pointer;-webkit-appearance:none;height:1.2rem;width:1.2rem;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%23333" d="M405 136.798L375.202 107 256 226.202 136.798 107 107 136.798 226.202 256 107 375.202 136.798 405 256 285.798 375.202 405 405 375.202 285.798 256z"/></svg>')
11161
+ this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box}.container{position:relative;width:100%;display:inline-block}@media(min-width: 640px){.container{width:var(--width)}}.goa-input,.goa-input *{box-sizing:border-box;line-height:normal}.goa-input{box-sizing:border-box;outline:none;transition:box-shadow 0.1s ease-in;border:1px solid var(--goa-color-greyscale-700);border-radius:var(--goa-border-radius-m);display:inline-flex;align-items:stretch;vertical-align:middle;min-width:100%;background-color:var(--goa-color-greyscale-white)}.goa-input:hover{border-color:var(--goa-color-interactive-hover)}.goa-input:active,.goa-input:focus,.goa-input:focus-within{box-shadow:0 0 0 3px var(--goa-color-interactive-focus)}.goa-input.type--range{border:none}.goa-input.type--range:active,.goa-input.type--range:focus,.goa-input.type--range:focus-within{box-shadow:none}.goa-input-leading-icon{margin-left:0.5rem}.goa-input-trailing-icon{margin-right:0.5rem}input{display:inline-block;color:var(--goa-color-text-default);font-size:var(--goa-font-size-4);padding:var(--goa-space-xs);line-height:calc(40px - calc(var(--goa-space-xs) * 2));background-color:transparent;width:100%;flex:1 1 auto;font-family:var(--goa-font-family-sans)}input[readonly]{cursor:pointer}.goa-input-leading-icon+input{padding-left:0.5rem}input,input:focus,input:hover,input:active{outline:none;border:none}.goa-input--disabled,.goa-input--disabled:hover,.goa-input--disabled:active,.goa-input--disabled:focus{background-color:var(--goa-color-greyscale-100);border-color:var(--goa-color-greyscale-200);cursor:default;box-shadow:none}.goa-input--disabled input,.goa-input--disabled input:hover,.goa-input--disabled input:active,.goa-input--disabled input:focus{color:var(--goa-color-text-secondary)}.goa-input--disabled input:hover{cursor:default !important}.prefix,.suffix,.leading-content ::slotted(div),.trailing-content ::slotted(div){background-color:var(--goa-color-greyscale-100);padding:0 0.75rem;display:flex;align-items:center}.leading-content ::slotted(div),.trailing-content ::slotted(div){padding:0.5rem 0.75rem}.prefix,.leading-content ::slotted(div){border-top-left-radius:var(--goa-border-radius-m);border-bottom-left-radius:var(--goa-border-radius-m);border-right:1px solid var(--goa-color-greyscale-700)}.suffix,.trailing-content ::slotted(div){border-top-right-radius:var(--goa-border-radius-m);border-bottom-right-radius:var(--goa-border-radius-m);border-left:1px solid var(--goa-color-greyscale-700)}.goa-input--disabled .prefix,.goa-input--disabled .leading-content ::slotted(div){border-right:1px solid var(--goa-color-greyscale-200)}.goa-input--disabled .suffix,.goa-input--disabled .trailing-content ::slotted(div){border-left:1px solid var(--goa-color-greyscale-200)}input.input--goa{display:block;border:none;flex:1 1 auto}.variant--bare{border:none}.variant--bare:focus,.variant--bare:active,.variant--bare:focus-within{box-shadow:none}.error:hover,.error:focus,.error{border:2px solid var(--goa-color-interactive-error)}input[type="search" i]:enabled:read-write:-webkit-any(:focus, :hover)::-webkit-search-cancel-button{position:relative;right:var(--search-icon-offset);cursor:pointer;-webkit-appearance:none;height:1.2rem;width:1.2rem;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%23333" d="M405 136.798L375.202 107 256 226.202 136.798 107 107 136.798 226.202 256 107 375.202 136.798 405 256 285.798 375.202 405 405 375.202 285.798 256z"/></svg>')
11118
11162
  center center no-repeat}</style>`;
11119
11163
  init(this, {
11120
11164
  target: this.shadowRoot,
11121
11165
  props: attribute_to_object(this.attributes),
11122
11166
  customElement: true
11123
- }, instance$c, create_fragment$e, safe_not_equal, {
11167
+ }, instance$d, create_fragment$f, safe_not_equal, {
11124
11168
  type: 1,
11125
11169
  name: 2,
11126
11170
  value: 0,
@@ -11142,6 +11186,7 @@
11142
11186
  step: 13,
11143
11187
  prefix: 14,
11144
11188
  suffix: 15,
11189
+ debounce: 31,
11145
11190
  mt: 16,
11146
11191
  mr: 17,
11147
11192
  mb: 18,
@@ -11161,7 +11206,7 @@
11161
11206
  }
11162
11207
 
11163
11208
  static get observedAttributes() {
11164
- return ["type", "name", "value", "autocapitalize", "placeholder", "leadingicon", "trailingicon", "variant", "disabled", "handletrailingiconclick", "focused", "readonly", "error", "testid", "width", "arialabel", "min", "max", "step", "prefix", "suffix", "mt", "mr", "mb", "ml"];
11209
+ return ["type", "name", "value", "autocapitalize", "placeholder", "leadingicon", "trailingicon", "variant", "disabled", "handletrailingiconclick", "focused", "readonly", "error", "testid", "width", "arialabel", "min", "max", "step", "prefix", "suffix", "debounce", "mt", "mr", "mb", "ml"];
11165
11210
  }
11166
11211
 
11167
11212
  get type() {
@@ -11395,6 +11440,17 @@
11395
11440
  flush();
11396
11441
  }
11397
11442
 
11443
+ get debounce() {
11444
+ return this.$$.ctx[31];
11445
+ }
11446
+
11447
+ set debounce(debounce) {
11448
+ this.$$set({
11449
+ debounce
11450
+ });
11451
+ flush();
11452
+ }
11453
+
11398
11454
  get mt() {
11399
11455
  return this.$$.ctx[16];
11400
11456
  }
@@ -11606,7 +11662,7 @@
11606
11662
  } // (56:2) {#if version}
11607
11663
 
11608
11664
 
11609
- function create_if_block$4(ctx) {
11665
+ function create_if_block$5(ctx) {
11610
11666
  let div;
11611
11667
  let t;
11612
11668
  return {
@@ -11639,7 +11695,7 @@
11639
11695
  };
11640
11696
  }
11641
11697
 
11642
- function create_fragment$d(ctx) {
11698
+ function create_fragment$e(ctx) {
11643
11699
  let header;
11644
11700
  let t0;
11645
11701
  let show_if = ["alpha", "beta"].includes(
@@ -11654,7 +11710,7 @@
11654
11710
  let if_block1 = show_if && create_if_block_1$2(ctx);
11655
11711
  let if_block2 =
11656
11712
  /*version*/
11657
- ctx[1] && create_if_block$4(ctx);
11713
+ ctx[1] && create_if_block$5(ctx);
11658
11714
  return {
11659
11715
  c() {
11660
11716
  header = element("header");
@@ -11720,7 +11776,7 @@
11720
11776
  if (if_block2) {
11721
11777
  if_block2.p(ctx, dirty);
11722
11778
  } else {
11723
- if_block2 = create_if_block$4(ctx);
11779
+ if_block2 = create_if_block$5(ctx);
11724
11780
  if_block2.c();
11725
11781
  if_block2.m(header, null);
11726
11782
  }
@@ -11748,7 +11804,7 @@
11748
11804
  return val[0].toUpperCase() + val.slice(1);
11749
11805
  }
11750
11806
 
11751
- function instance$b($$self, $$props, $$invalidate) {
11807
+ function instance$c($$self, $$props, $$invalidate) {
11752
11808
  const [Types, validateType] = typeValidator("Microsite header type", ["live", "alpha", "beta"], true);
11753
11809
  let {
11754
11810
  type
@@ -11775,12 +11831,12 @@
11775
11831
  class MicrositeHeader extends SvelteElement {
11776
11832
  constructor(options) {
11777
11833
  super();
11778
- this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}a{color:var(--goa-color-interactive);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(--fs-sm);background-color:var(--color-gray-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-status-warning);color:var(--goa-color-text)}.service-type--beta{background-color:var(--goa-color-brand);color:var(--goa-color-text-light)}.service-type--live{padding:0}.site-text{color:var(--goa-color-text);line-height:1.25rem}</style>`;
11834
+ 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>`;
11779
11835
  init(this, {
11780
11836
  target: this.shadowRoot,
11781
11837
  props: attribute_to_object(this.attributes),
11782
11838
  customElement: true
11783
- }, instance$b, create_fragment$d, safe_not_equal, {
11839
+ }, instance$c, create_fragment$e, safe_not_equal, {
11784
11840
  type: 0,
11785
11841
  version: 1,
11786
11842
  feedbackurl: 2
@@ -11840,7 +11896,7 @@
11840
11896
  customElements.define("goa-microsite-header", MicrositeHeader);
11841
11897
  /* libs/web-components/src/components/modal/Modal.svelte generated by Svelte v3.51.0 */
11842
11898
 
11843
- function create_if_block$3(ctx) {
11899
+ function create_if_block$4(ctx) {
11844
11900
  let goa_focus_trap;
11845
11901
  let div5;
11846
11902
  let div0;
@@ -12245,12 +12301,12 @@
12245
12301
  };
12246
12302
  }
12247
12303
 
12248
- function create_fragment$c(ctx) {
12304
+ function create_fragment$d(ctx) {
12249
12305
  let if_block_anchor;
12250
12306
  let current;
12251
12307
  let if_block =
12252
12308
  /*isOpen*/
12253
- ctx[7] && create_if_block$3(ctx);
12309
+ ctx[7] && create_if_block$4(ctx);
12254
12310
  return {
12255
12311
  c() {
12256
12312
  if (if_block) if_block.c();
@@ -12277,7 +12333,7 @@
12277
12333
  transition_in(if_block, 1);
12278
12334
  }
12279
12335
  } else {
12280
- if_block = create_if_block$3(ctx);
12336
+ if_block = create_if_block$4(ctx);
12281
12337
  if_block.c();
12282
12338
  transition_in(if_block, 1);
12283
12339
  if_block.m(if_block_anchor.parentNode, if_block_anchor);
@@ -12310,7 +12366,7 @@
12310
12366
  };
12311
12367
  }
12312
12368
 
12313
- function instance$a($$self, $$props, $$invalidate) {
12369
+ function instance$b($$self, $$props, $$invalidate) {
12314
12370
  let isClosable;
12315
12371
  let isOpen;
12316
12372
 
@@ -12395,12 +12451,12 @@
12395
12451
  class Modal extends SvelteElement {
12396
12452
  constructor(options) {
12397
12453
  super();
12398
- this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.modal{font-family:var(--font-family);position:fixed;inset:0;display:flex;align-items:center;justify-content:center;height:100vh;width:100%;z-index:100}.modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.2);z-index:1000}.emergency{background-color:var(--goa-color-status-emergency)}.important{background-color:var(--goa-color-status-warning)}.information{background-color:var(--goa-color-status-info)}.event{background-color:var(--goa-color-status-info)}.success{background-color:var(--goa-color-status-success)}.callout-bar{flex:0 0 3rem;text-align:center;padding-top:2rem;border-radius:4px 0px 0px 4px}.content{flex:1 1 auto;width:100%;margin:2rem 2rem}.modal-pane{position:relative;background-color:#fff;z-index:1001;width:90%;display:flex;margin:1rem;box-shadow:6px 6px 6px rgba(0, 0, 0, 0.16);border-radius:4px;max-height:90%;border:1px solid var(--color-gray-600)}@media(min-width: 640px){.modal-pane{width:var(--width, 60ch);max-height:80%}}.modal-actions ::slotted(div){margin:1.5rem 0 0}.modal-content ::slotted(:last-child){margin-bottom:0 !important}.modal-close{position:absolute;top:2rem;right:2rem}.modal-title{font-size:var(--fs-xl);margin:0 0 1.5rem;margin-right:40px;flex:0 0 auto}.modal-content{line-height:1.75rem}</style>`;
12454
+ this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.modal{font-family:var(--goa-font-family-sans);position:fixed;inset:0;display:flex;align-items:center;justify-content:center;height:100vh;width:100%;z-index:100}.modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.2);z-index:1000}.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)}.callout-bar{flex:0 0 3rem;text-align:center;padding-top:2rem;border-radius:4px 0px 0px 4px}.content{flex:1 1 auto;width:100%;margin:2rem 2rem}.modal-pane{position:relative;background-color:#fff;z-index:1001;width:90%;display:flex;margin:1rem;box-shadow:var(--goa-shadow-modal);border-radius:4px;max-height:90%;border:1px solid var(--goa-color-greyscale-700)}@media(min-width: 640px){.modal-pane{width:var(--width, 60ch);max-height:80%}}.modal-actions ::slotted(div){margin:1.5rem 0 0}.modal-content ::slotted(:last-child){margin-bottom:0 !important}.modal-close{position:absolute;top:2rem;right:2rem}.modal-title{font-size:var(--goa-font-size-7);margin:0 0 1.5rem;margin-right:40px;flex:0 0 auto}.modal-content{line-height:1.75rem}</style>`;
12399
12455
  init(this, {
12400
12456
  target: this.shadowRoot,
12401
12457
  props: attribute_to_object(this.attributes),
12402
12458
  customElement: true
12403
- }, instance$a, create_fragment$c, safe_not_equal, {
12459
+ }, instance$b, create_fragment$d, safe_not_equal, {
12404
12460
  heading: 0,
12405
12461
  closable: 9,
12406
12462
  open: 1,
@@ -12496,7 +12552,7 @@
12496
12552
  customElements.define("goa-modal", Modal);
12497
12553
  /* libs/web-components/src/components/notification/Notification.svelte generated by Svelte v3.51.0 */
12498
12554
 
12499
- function create_if_block$2(ctx) {
12555
+ function create_if_block$3(ctx) {
12500
12556
  let div3;
12501
12557
  let div0;
12502
12558
  let goa_icon;
@@ -12620,12 +12676,12 @@
12620
12676
  };
12621
12677
  }
12622
12678
 
12623
- function create_fragment$b(ctx) {
12679
+ function create_fragment$c(ctx) {
12624
12680
  let if_block_anchor;
12625
12681
  let current;
12626
12682
  let if_block =
12627
12683
  /*show*/
12628
- ctx[1] && create_if_block$2(ctx);
12684
+ ctx[1] && create_if_block$3(ctx);
12629
12685
  return {
12630
12686
  c() {
12631
12687
  if (if_block) if_block.c();
@@ -12652,7 +12708,7 @@
12652
12708
  transition_in(if_block, 1);
12653
12709
  }
12654
12710
  } else {
12655
- if_block = create_if_block$2(ctx);
12711
+ if_block = create_if_block$3(ctx);
12656
12712
  if_block.c();
12657
12713
  transition_in(if_block, 1);
12658
12714
  if_block.m(if_block_anchor.parentNode, if_block_anchor);
@@ -12685,7 +12741,7 @@
12685
12741
  };
12686
12742
  }
12687
12743
 
12688
- function instance$9($$self, $$props, $$invalidate) {
12744
+ function instance$a($$self, $$props, $$invalidate) {
12689
12745
  let iconType;
12690
12746
  const [Types, validateType] = typeValidator("Notification type", ["emergency", "important", "information", "event"], true);
12691
12747
  let {
@@ -12718,12 +12774,12 @@
12718
12774
  class Notification extends SvelteElement {
12719
12775
  constructor(options) {
12720
12776
  super();
12721
- this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.notification{padding:1.5rem;display:flex;gap:1rem}.emergency{background-color:var(--goa-color-status-emergency);color:var(--color-white)}.important{background-color:var(--goa-color-status-warning)}.information{background-color:var(--goa-color-status-info);color:var(--color-white)}.event{background-color:var(--goa-color-status-success);color:var(--color-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>`;
12777
+ 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>`;
12722
12778
  init(this, {
12723
12779
  target: this.shadowRoot,
12724
12780
  props: attribute_to_object(this.attributes),
12725
12781
  customElement: true
12726
- }, instance$9, create_fragment$b, safe_not_equal, {
12782
+ }, instance$a, create_fragment$c, safe_not_equal, {
12727
12783
  type: 0
12728
12784
  }, null);
12729
12785
 
@@ -12765,7 +12821,7 @@
12765
12821
  /* libs/web-components/src/components/page-block/PageBlock.svelte generated by Svelte v3.51.0 */
12766
12822
 
12767
12823
 
12768
- function create_fragment$a(ctx) {
12824
+ function create_fragment$b(ctx) {
12769
12825
  let div;
12770
12826
  let slot;
12771
12827
  let div_style_value;
@@ -12805,7 +12861,7 @@
12805
12861
  };
12806
12862
  }
12807
12863
 
12808
- function instance$8($$self, $$props, $$invalidate) {
12864
+ function instance$9($$self, $$props, $$invalidate) {
12809
12865
  const Sizes = {
12810
12866
  "full": "100%"
12811
12867
  };
@@ -12841,12 +12897,12 @@
12841
12897
  class PageBlock extends SvelteElement {
12842
12898
  constructor(options) {
12843
12899
  super();
12844
- this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.page-content{max-width:var(--max-width);margin:0 auto;padding:0 1.75rem}</style>`;
12900
+ 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>`;
12845
12901
  init(this, {
12846
12902
  target: this.shadowRoot,
12847
12903
  props: attribute_to_object(this.attributes),
12848
12904
  customElement: true
12849
- }, instance$8, create_fragment$a, safe_not_equal, {
12905
+ }, instance$9, create_fragment$b, safe_not_equal, {
12850
12906
  width: 1,
12851
12907
  _width: 0
12852
12908
  }, null);
@@ -13084,7 +13140,7 @@
13084
13140
  };
13085
13141
  }
13086
13142
 
13087
- function create_fragment$9(ctx) {
13143
+ function create_fragment$a(ctx) {
13088
13144
  let div;
13089
13145
  let slot;
13090
13146
  let t;
@@ -13207,7 +13263,7 @@
13207
13263
  };
13208
13264
  }
13209
13265
 
13210
- function instance$7($$self, $$props, $$invalidate) {
13266
+ function instance$8($$self, $$props, $$invalidate) {
13211
13267
  let isDisabled;
13212
13268
  let isError;
13213
13269
  const [Orientations, validateOrientation] = typeValidator("Radio group orientation", ["vertical", "horizontal"]);
@@ -13345,14 +13401,14 @@
13345
13401
  class RadioGroup extends SvelteElement {
13346
13402
  constructor(options) {
13347
13403
  super();
13348
- this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.goa-radio-group--horizontal{display:flex;flex-direction:row}.goa-radio-group--vertical{display:inline-block}label.goa-radio{--goa-radio-outline-width:3px;--goa-radio-diameter:1.5rem;--goa-radio-border-width:1px;--goa-radio-border-width--checked:7px;display:inline-block;box-sizing:border-box;display:flex;align-items:center;min-height:3rem}.goa-radio:hover{cursor:pointer}.goa-radio *,.goa-radio *:before,.goa-radio *:after{box-sizing:border-box}.goa-radio input[type="radio"]{width:0;height:0;margin:0;opacity:0}input[type="radio"]:hover~.goa-radio-icon{border-color:var(--goa-color-interactive--hover)}input[type="radio"]:focus~.goa-radio-icon{box-shadow:0 0 0 var(--goa-radio-outline-width) var(--goa-color-interactive--focus)}.goa-radio-label{padding:0.5rem;font-weight:var(--fw-regular)}.goa-radio-icon{display:inline-block;height:var(--goa-radio-diameter);width:var(--goa-radio-diameter);border-radius:50%;background-color:#fff;transition:box-shadow 100ms ease-in-out;flex:0 0 auto}.goa-radio:focus>input:not(:disabled)~.goa-radio-icon{box-shadow:0 0 0 var(--goa-radio-outline-width) var(--goa-color-interactive--focus)}.goa-radio--disabled{opacity:0.4}.goa-radio--disabled:hover{cursor:default}input[type="radio"]:checked~.goa-radio-icon{border:var(--goa-radio-border-width--checked) solid
13349
- var(--goa-color-interactive--active)}input[type="radio"]:not(:checked)~.goa-radio-icon{border:var(--goa-radio-border-width) solid var(--color-gray-600)}input[type="radio"]:disabled~.goa-radio-icon{border:var(--goa-radio-border-width) solid var(--color-gray-600)}input[type="radio"]:disabled:checked~.goa-radio-icon{border:var(--goa-radio-border-width--checked) solid
13350
- var(--goa-color-interactive--active)}.goa-radio--error input[type="radio"]:checked~.goa-radio-icon{border:7px solid var(--goa-color-status-emergency)}.goa-radio--error input[type="radio"]:not(:checked)~.goa-radio-icon{border:2px solid var(--goa-color-status-emergency)}</style>`;
13404
+ this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.goa-radio-group--horizontal{display:flex;flex-direction:row}.goa-radio-group--vertical{display:inline-block}label.goa-radio{--goa-radio-outline-width:3px;--goa-radio-diameter:1.5rem;--goa-radio-border-width:1px;--goa-radio-border-width--checked:7px;display:inline-block;box-sizing:border-box;display:flex;align-items:center;min-height:3rem}.goa-radio:hover{cursor:pointer}.goa-radio *,.goa-radio *:before,.goa-radio *:after{box-sizing:border-box}.goa-radio input[type="radio"]{width:0;height:0;margin:0;opacity:0}input[type="radio"]:hover~.goa-radio-icon{border-color:var(--goa-color-interactive-hover)}input[type="radio"]:focus~.goa-radio-icon{box-shadow:0 0 0 var(--goa-radio-outline-width) var(--goa-color-interactive-focus)}.goa-radio-label{padding:0.5rem;font-weight:var(--goa-font-weight-regular)}.goa-radio-icon{display:inline-block;height:var(--goa-radio-diameter);width:var(--goa-radio-diameter);border-radius:50%;background-color:#fff;transition:box-shadow 100ms ease-in-out;flex:0 0 auto}.goa-radio:focus>input:not(:disabled)~.goa-radio-icon{box-shadow:0 0 0 var(--goa-radio-outline-width) var(--goa-color-interactive-focus)}.goa-radio--disabled .goa-radio-label{opacity:0.4}.goa-radio--disabled:hover{cursor:default}input[type="radio"]:checked~.goa-radio-icon{border:var(--goa-radio-border-width--checked) solid
13405
+ var(--goa-color-interactive-hover)}input[type="radio"]:not(:checked)~.goa-radio-icon{border:var(--goa-radio-border-width) solid var(--goa-color-greyscale-700)}input[type="radio"]:disabled~.goa-radio-icon{border:var(--goa-radio-border-width) solid var(--goa-color-greyscale-700)}input[type="radio"]:disabled:checked~.goa-radio-icon{border:var(--goa-radio-border-width--checked) solid
13406
+ var(--goa-color-interactive-hover)}.goa-radio--error input[type="radio"]:checked~.goa-radio-icon{border:7px solid var(--goa-color-emergency-default)}.goa-radio--error input[type="radio"]:not(:checked)~.goa-radio-icon{border:2px solid var(--goa-color-emergency-default)}</style>`;
13351
13407
  init(this, {
13352
13408
  target: this.shadowRoot,
13353
13409
  props: attribute_to_object(this.attributes),
13354
13410
  customElement: true
13355
- }, instance$7, create_fragment$9, safe_not_equal, {
13411
+ }, instance$8, create_fragment$a, safe_not_equal, {
13356
13412
  name: 1,
13357
13413
  value: 0,
13358
13414
  orientation: 2,
@@ -13508,7 +13564,7 @@
13508
13564
  customElements.define("goa-radio-group", RadioGroup);
13509
13565
  /* libs/web-components/src/components/scrollable/Scrollable.svelte generated by Svelte v3.51.0 */
13510
13566
 
13511
- function create_fragment$8(ctx) {
13567
+ function create_fragment$9(ctx) {
13512
13568
  let div;
13513
13569
  let slot;
13514
13570
  let div_style_value;
@@ -13576,7 +13632,7 @@
13576
13632
  };
13577
13633
  }
13578
13634
 
13579
- function instance$6($$self, $$props, $$invalidate) {
13635
+ function instance$7($$self, $$props, $$invalidate) {
13580
13636
  let {
13581
13637
  direction = "vertical"
13582
13638
  } = $$props;
@@ -13608,7 +13664,7 @@
13608
13664
  target: this.shadowRoot,
13609
13665
  props: attribute_to_object(this.attributes),
13610
13666
  customElement: true
13611
- }, instance$6, create_fragment$8, safe_not_equal, {
13667
+ }, instance$7, create_fragment$9, safe_not_equal, {
13612
13668
  direction: 0,
13613
13669
  hpadding: 1,
13614
13670
  vpadding: 2,
@@ -13734,9 +13790,9 @@
13734
13790
  function create_if_block_2(ctx) {
13735
13791
  let each_1_anchor;
13736
13792
  let current;
13737
- let each_value = Array(
13793
+ let each_value = Array(Number.parseInt(
13738
13794
  /*linecount*/
13739
- ctx[2]);
13795
+ ctx[2] + ""));
13740
13796
  let each_blocks = [];
13741
13797
 
13742
13798
  for (let i = 0; i < each_value.length; i += 1) {
@@ -13769,9 +13825,9 @@
13769
13825
  if (dirty &
13770
13826
  /*size, linecount*/
13771
13827
  6) {
13772
- each_value = Array(
13828
+ each_value = Array(Number.parseInt(
13773
13829
  /*linecount*/
13774
- ctx[2]);
13830
+ ctx[2] + ""));
13775
13831
  let i;
13776
13832
 
13777
13833
  for (i = 0; i < each_value.length; i += 1) {
@@ -13949,7 +14005,7 @@
13949
14005
  } // (30:2) {#if type === "card"}
13950
14006
 
13951
14007
 
13952
- function create_if_block$1(ctx) {
14008
+ function create_if_block$2(ctx) {
13953
14009
  let div1;
13954
14010
  let skeleton0;
13955
14011
  let t0;
@@ -13981,7 +14037,9 @@
13981
14037
  size:
13982
14038
  /*size*/
13983
14039
  ctx[1],
13984
- linecount: 3
14040
+ linecount:
14041
+ /*linecount*/
14042
+ ctx[2]
13985
14043
  }
13986
14044
  });
13987
14045
  return {
@@ -14034,6 +14092,11 @@
14034
14092
  2) skeleton2_changes.size =
14035
14093
  /*size*/
14036
14094
  ctx[1];
14095
+ if (dirty &
14096
+ /*linecount*/
14097
+ 4) skeleton2_changes.linecount =
14098
+ /*linecount*/
14099
+ ctx[2];
14037
14100
  skeleton2.$set(skeleton2_changes);
14038
14101
 
14039
14102
  if (!current || dirty &
@@ -14076,7 +14139,7 @@
14076
14139
  }
14077
14140
 
14078
14141
  };
14079
- } // (52:4) {#each Array(linecount) as _item}
14142
+ } // (52:4) {#each Array(Number.parseInt(linecount+"")) as _item}
14080
14143
 
14081
14144
 
14082
14145
  function create_each_block(ctx) {
@@ -14136,13 +14199,13 @@
14136
14199
  };
14137
14200
  }
14138
14201
 
14139
- function create_fragment$7(ctx) {
14202
+ function create_fragment$8(ctx) {
14140
14203
  let div;
14141
14204
  let current_block_type_index;
14142
14205
  let if_block;
14143
14206
  let div_style_value;
14144
14207
  let current;
14145
- const if_block_creators = [create_if_block$1, create_if_block_1, create_if_block_2, create_else_block];
14208
+ const if_block_creators = [create_if_block$2, create_if_block_1, create_if_block_2, create_else_block];
14146
14209
  const if_blocks = [];
14147
14210
 
14148
14211
  function select_block_type(ctx, dirty) {
@@ -14252,7 +14315,7 @@
14252
14315
  };
14253
14316
  }
14254
14317
 
14255
- function instance$5($$self, $$props, $$invalidate) {
14318
+ function instance$6($$self, $$props, $$invalidate) {
14256
14319
  const [Types, validateType] = typeValidator("Skeleton type", ["image", "text", "title", "text-small", "avatar", "header", "paragraph", "thumbnail", "card", "profile", "lines"], true);
14257
14320
  const [Sizes, validateSize] = typeValidator("Skeleton size", ["1", "2", "3", "4"]);
14258
14321
  let {
@@ -14305,12 +14368,12 @@
14305
14368
  class Skeleton extends SvelteElement {
14306
14369
  constructor(options) {
14307
14370
  super();
14308
- this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}@keyframes pulse{0%{opacity:0.5}50%{opacity:1}100%{opacity:0.5}}.skeleton{background-color:var(--color-gray-100);animation:pulse 2s infinite ease-in-out;overflow:hidden;margin:10px 0}.image,.image-1{background-color:var(--color-gray-100);flex:1 1 100px;height:100px;margin:0}.image-2{height:140px}.image-3{height:200px}.image-4{height:300px}.text,.text-1,.text-2,.text-3,.text-4{width:100%;height:.75rem;border-radius:0.25rem;margin:6px 0}.title,.title-1,.title-2{width:100%;height:.75rem;border-radius:0.25rem}.title-3{height:.8rem}.title-4{height:1rem}.text-small,.text-small-1{width:30%;height:6px;border-radius:2px}.text-small-2{width:40%;height:8px;border-radius:2px}.text-small-3{width:50%;height:10px;border-radius:3px}.text-small-4{width:70%;height:12px;border-radius:4px}.paragraph{width:100%;height:70px;border-radius:4px}.header,.header-1{width:50%;height:18px;margin:12px 0;border-radius:0.25rem}.header-2{width:60%;height:20px;margin:14px 0;border-radius:0.25rem}.header-3{width:70%;height:22px;margin:16px 0;border-radius:0.25rem}.header-4{width:80%;height:24px;margin:18px 0;border-radius:0.3rem}.avatar{display:inline-block}.avatar,.avatar-1{width:40px;height:40px;border-radius:50%}.avatar-2{width:60px;height:60px;border-radius:50%}.avatar-3{width:80px;height:80px;border-radius:50%}.avatar-4{width:120px;height:120px;border-radius:50%}.thumbnail{display:inline-block}.thumbnail,.thumbnail-1{width:40px;height:40px;border-radius:4px}.thumbnail-2{width:60px;height:60px;border-radius:4px}.thumbnail-3{width:80px;height:80px;border-radius:4px}.thumbnail-4{width:120px;height:120px;border-radius:4px}.card{display:inline-block}.card,.card-1,.card-2,.card-3,.card-4{border:1px solid var(--color-gray-100);border-radius:4px}.card{width:100%}@media(min-width: 480px){.card{max-width:var(--max-width)}}.card-content{flex:1 1 auto;padding:1rem}.profile{display:flex;flex-direction:row;align-items:center}.profile-1{max-width:280px;gap:1rem}.profile-2{max-width:360px;gap:1rem}.profile-3{max-width:480px;gap:1rem}.profile-4{max-width:560px;gap:1rem}.profile .profile-avatar{flex-shrink:0}.profile .profile-name{flex:1 1 auto}</style>`;
14371
+ this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}@keyframes pulse{0%{opacity:0.5}50%{opacity:1}100%{opacity:0.5}}.skeleton{background-color:var(--goa-color-greyscale-100);animation:pulse 2s infinite ease-in-out;overflow:hidden;margin:10px 0}.image,.image-1{background-color:var(--goa-color-greyscale-100);flex:1 1 100px;height:100px;margin:0}.image-2{height:140px}.image-3{height:200px}.image-4{height:300px}.text,.text-1,.text-2,.text-3,.text-4{width:100%;height:.75rem;border-radius:0.25rem;margin:6px 0}.title,.title-1,.title-2{width:100%;height:.75rem;border-radius:0.25rem}.title-3{height:.8rem}.title-4{height:1rem}.text-small,.text-small-1{width:30%;height:6px;border-radius:2px}.text-small-2{width:40%;height:8px;border-radius:2px}.text-small-3{width:50%;height:10px;border-radius:3px}.text-small-4{width:70%;height:12px;border-radius:4px}.paragraph{width:100%;height:70px;border-radius:4px}.header,.header-1{width:50%;height:18px;margin:12px 0;border-radius:0.25rem}.header-2{width:60%;height:20px;margin:14px 0;border-radius:0.25rem}.header-3{width:70%;height:22px;margin:16px 0;border-radius:0.25rem}.header-4{width:80%;height:24px;margin:18px 0;border-radius:0.3rem}.avatar{display:inline-block}.avatar,.avatar-1{width:40px;height:40px;border-radius:50%}.avatar-2{width:60px;height:60px;border-radius:50%}.avatar-3{width:80px;height:80px;border-radius:50%}.avatar-4{width:120px;height:120px;border-radius:50%}.thumbnail{display:inline-block}.thumbnail,.thumbnail-1{width:40px;height:40px;border-radius:4px}.thumbnail-2{width:60px;height:60px;border-radius:4px}.thumbnail-3{width:80px;height:80px;border-radius:4px}.thumbnail-4{width:120px;height:120px;border-radius:4px}.card{display:inline-block}.card,.card-1,.card-2,.card-3,.card-4{border:1px solid var(--goa-color-greyscale-100);border-radius:4px}.card{width:100%}@media(min-width: 480px){.card{max-width:var(--max-width)}}.card-content{flex:1 1 auto;padding:1rem}.profile{display:flex;flex-direction:row;align-items:center}.profile-1{max-width:280px;gap:1rem}.profile-2{max-width:360px;gap:1rem}.profile-3{max-width:480px;gap:1rem}.profile-4{max-width:560px;gap:1rem}.profile .profile-avatar{flex-shrink:0}.profile .profile-name{flex:1 1 auto}</style>`;
14309
14372
  init(this, {
14310
14373
  target: this.shadowRoot,
14311
14374
  props: attribute_to_object(this.attributes),
14312
14375
  customElement: true
14313
- }, instance$5, create_fragment$7, safe_not_equal, {
14376
+ }, instance$6, create_fragment$8, safe_not_equal, {
14314
14377
  maxwidth: 0,
14315
14378
  size: 1,
14316
14379
  linecount: 2,
@@ -14442,7 +14505,7 @@
14442
14505
  customElements.define("goa-skeleton", Skeleton);
14443
14506
  /* libs/web-components/src/components/spacer/Spacer.svelte generated by Svelte v3.51.0 */
14444
14507
 
14445
- function create_fragment$6(ctx) {
14508
+ function create_fragment$7(ctx) {
14446
14509
  let div;
14447
14510
  return {
14448
14511
  c() {
@@ -14471,7 +14534,7 @@
14471
14534
  };
14472
14535
  }
14473
14536
 
14474
- function instance$4($$self, $$props, $$invalidate) {
14537
+ function instance$5($$self, $$props, $$invalidate) {
14475
14538
  let {
14476
14539
  hspacing = "none"
14477
14540
  } = $$props;
@@ -14481,8 +14544,8 @@
14481
14544
  let rootEl;
14482
14545
  onMount(() => {
14483
14546
  injectCss(rootEl, ":host", {
14484
- width: `var(--goa-spacing-${hspacing})`,
14485
- height: `var(--goa-spacing-${vspacing})`
14547
+ width: `var(--goa-space-${hspacing})`,
14548
+ height: `var(--goa-space-${vspacing})`
14486
14549
  });
14487
14550
  });
14488
14551
 
@@ -14508,7 +14571,7 @@
14508
14571
  target: this.shadowRoot,
14509
14572
  props: attribute_to_object(this.attributes),
14510
14573
  customElement: true
14511
- }, instance$4, create_fragment$6, safe_not_equal, {
14574
+ }, instance$5, create_fragment$7, safe_not_equal, {
14512
14575
  hspacing: 1,
14513
14576
  vspacing: 2
14514
14577
  }, null);
@@ -14740,7 +14803,7 @@
14740
14803
  /* libs/web-components/src/components/spinner/Spinner.svelte generated by Svelte v3.51.0 */
14741
14804
 
14742
14805
 
14743
- function create_if_block(ctx) {
14806
+ function create_if_block$1(ctx) {
14744
14807
  let svg;
14745
14808
  let circle;
14746
14809
  let circle_stroke_value;
@@ -14763,7 +14826,7 @@
14763
14826
  ctx[3]);
14764
14827
  attr(circle, "stroke", circle_stroke_value =
14765
14828
  /*invert*/
14766
- ctx[0] ? "var(--goa-color-primary-dark)" : "var(--goa-color-brand-light)");
14829
+ ctx[0] ? "var(--goa-color-info-hover)" : "var(--goa-color-brand-light)");
14767
14830
  attr(circle, "stroke-width",
14768
14831
  /*strokewidth*/
14769
14832
  ctx[4]);
@@ -14782,7 +14845,7 @@
14782
14845
  ctx[4]);
14783
14846
  attr(path, "stroke", path_stroke_value =
14784
14847
  /*invert*/
14785
- ctx[0] ? "var(--goa-color-brand-light)" : "var(--goa-color-primary)");
14848
+ ctx[0] ? "var(--goa-color-brand-light)" : "var(--goa-color-info-default)");
14786
14849
  attr(path, "stroke-linecap", "round");
14787
14850
  attr(svg, "class", svg_class_value = `spinner-${
14788
14851
  /*type*/
@@ -14832,7 +14895,7 @@
14832
14895
  /*invert*/
14833
14896
  1 && circle_stroke_value !== (circle_stroke_value =
14834
14897
  /*invert*/
14835
- ctx[0] ? "var(--goa-color-primary-dark)" : "var(--goa-color-brand-light)")) {
14898
+ ctx[0] ? "var(--goa-color-info-hover)" : "var(--goa-color-brand-light)")) {
14836
14899
  attr(circle, "stroke", circle_stroke_value);
14837
14900
  }
14838
14901
 
@@ -14876,7 +14939,7 @@
14876
14939
  /*invert*/
14877
14940
  1 && path_stroke_value !== (path_stroke_value =
14878
14941
  /*invert*/
14879
- ctx[0] ? "var(--goa-color-brand-light)" : "var(--goa-color-primary)")) {
14942
+ ctx[0] ? "var(--goa-color-brand-light)" : "var(--goa-color-info-default)")) {
14880
14943
  attr(path, "stroke", path_stroke_value);
14881
14944
  }
14882
14945
 
@@ -14930,11 +14993,11 @@
14930
14993
  };
14931
14994
  }
14932
14995
 
14933
- function create_fragment$5(ctx) {
14996
+ function create_fragment$6(ctx) {
14934
14997
  let if_block_anchor;
14935
14998
  let if_block =
14936
14999
  /*ready*/
14937
- ctx[6] && create_if_block(ctx);
15000
+ ctx[6] && create_if_block$1(ctx);
14938
15001
  return {
14939
15002
  c() {
14940
15003
  if (if_block) if_block.c();
@@ -14954,7 +15017,7 @@
14954
15017
  if (if_block) {
14955
15018
  if_block.p(ctx, dirty);
14956
15019
  } else {
14957
- if_block = create_if_block(ctx);
15020
+ if_block = create_if_block$1(ctx);
14958
15021
  if_block.c();
14959
15022
  if_block.m(if_block_anchor.parentNode, if_block_anchor);
14960
15023
  }
@@ -14975,7 +15038,7 @@
14975
15038
  };
14976
15039
  }
14977
15040
 
14978
- function instance$3($$self, $$props, $$invalidate) {
15041
+ function instance$4($$self, $$props, $$invalidate) {
14979
15042
  let diameter;
14980
15043
  let strokewidth;
14981
15044
  let radius;
@@ -15101,12 +15164,12 @@
15101
15164
  class Spinner extends SvelteElement {
15102
15165
  constructor(options) {
15103
15166
  super();
15104
- this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}@keyframes rotate{100%{transform:rotate(360deg)}}.spinner-infinite{animation:rotate 2s linear infinite}</style>`;
15167
+ this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}@keyframes rotate{100%{transform:rotate(360deg)}}.spinner-infinite{animation:rotate 2s linear infinite}</style>`;
15105
15168
  init(this, {
15106
15169
  target: this.shadowRoot,
15107
15170
  props: attribute_to_object(this.attributes),
15108
15171
  customElement: true
15109
- }, instance$3, create_fragment$5, safe_not_equal, {
15172
+ }, instance$4, create_fragment$6, safe_not_equal, {
15110
15173
  size: 10,
15111
15174
  invert: 0,
15112
15175
  progress: 11,
@@ -15178,7 +15241,7 @@
15178
15241
  customElements.define("goa-spinner", Spinner);
15179
15242
  /* libs/web-components/src/components/table/Table.svelte generated by Svelte v3.51.0 */
15180
15243
 
15181
- function create_fragment$4(ctx) {
15244
+ function create_fragment$5(ctx) {
15182
15245
  let table;
15183
15246
  let slot;
15184
15247
  let t0;
@@ -15194,23 +15257,28 @@
15194
15257
  <tbody><tr><td></td></tr></tbody>
15195
15258
  <tfoot><tr><td></td></tr></tfoot>`;
15196
15259
  this.c = noop;
15260
+ attr(table, "class",
15261
+ /*variant*/
15262
+ ctx[1]);
15197
15263
  attr(table, "style", table_style_value = `
15198
- width: ${
15264
+ ${
15265
+ /*width*/
15266
+ ctx[0] ? `width: ${
15199
15267
  /*width*/
15200
- ctx[0]};
15268
+ ctx[0]};` : ``}
15201
15269
  ${calculateMargin(
15202
15270
  /*mt*/
15203
- ctx[1],
15204
- /*mr*/
15205
15271
  ctx[2],
15206
- /*mb*/
15272
+ /*mr*/
15207
15273
  ctx[3],
15274
+ /*mb*/
15275
+ ctx[4],
15208
15276
  /*ml*/
15209
- ctx[4])}
15277
+ ctx[5])}
15210
15278
  `);
15211
15279
  toggle_class(table, "sticky",
15212
15280
  /*_stickyHeader*/
15213
- ctx[6]);
15281
+ ctx[7]);
15214
15282
  },
15215
15283
 
15216
15284
  m(target, anchor) {
@@ -15220,35 +15288,45 @@
15220
15288
  append(table, template);
15221
15289
  /*table_binding*/
15222
15290
 
15223
- ctx[8](table);
15291
+ ctx[9](table);
15224
15292
  },
15225
15293
 
15226
15294
  p(ctx, [dirty]) {
15295
+ if (dirty &
15296
+ /*variant*/
15297
+ 2) {
15298
+ attr(table, "class",
15299
+ /*variant*/
15300
+ ctx[1]);
15301
+ }
15302
+
15227
15303
  if (dirty &
15228
15304
  /*width, mt, mr, mb, ml*/
15229
- 31 && table_style_value !== (table_style_value = `
15230
- width: ${
15305
+ 61 && table_style_value !== (table_style_value = `
15306
+ ${
15231
15307
  /*width*/
15232
- ctx[0]};
15308
+ ctx[0] ? `width: ${
15309
+ /*width*/
15310
+ ctx[0]};` : ``}
15233
15311
  ${calculateMargin(
15234
15312
  /*mt*/
15235
- ctx[1],
15236
- /*mr*/
15237
15313
  ctx[2],
15238
- /*mb*/
15314
+ /*mr*/
15239
15315
  ctx[3],
15316
+ /*mb*/
15317
+ ctx[4],
15240
15318
  /*ml*/
15241
- ctx[4])}
15319
+ ctx[5])}
15242
15320
  `)) {
15243
15321
  attr(table, "style", table_style_value);
15244
15322
  }
15245
15323
 
15246
15324
  if (dirty &
15247
- /*_stickyHeader*/
15248
- 64) {
15325
+ /*variant, _stickyHeader*/
15326
+ 130) {
15249
15327
  toggle_class(table, "sticky",
15250
15328
  /*_stickyHeader*/
15251
- ctx[6]);
15329
+ ctx[7]);
15252
15330
  }
15253
15331
  },
15254
15332
 
@@ -15259,21 +15337,25 @@
15259
15337
  if (detaching) detach(table);
15260
15338
  /*table_binding*/
15261
15339
 
15262
- ctx[8](null);
15340
+ ctx[9](null);
15263
15341
  }
15264
15342
 
15265
15343
  };
15266
15344
  }
15267
15345
 
15268
- function instance$2($$self, $$props, $$invalidate) {
15346
+ function instance$3($$self, $$props, $$invalidate) {
15269
15347
  let _stickyHeader;
15270
15348
 
15349
+ const [Variants, validateVariant] = typeValidator("Table variant", ["normal", "relaxed"], true);
15271
15350
  let {
15272
15351
  width = ""
15273
15352
  } = $$props;
15274
15353
  let {
15275
15354
  stickyheader = "false"
15276
15355
  } = $$props;
15356
+ let {
15357
+ variant = "normal"
15358
+ } = $$props;
15277
15359
  let {
15278
15360
  mt = null
15279
15361
  } = $$props;
@@ -15290,6 +15372,8 @@
15290
15372
  let _rootEl;
15291
15373
 
15292
15374
  onMount(() => {
15375
+ validateVariant(variant);
15376
+
15293
15377
  const slot = _rootEl.querySelector("slot");
15294
15378
 
15295
15379
  if (slot) {
@@ -15305,45 +15389,47 @@
15305
15389
  function table_binding($$value) {
15306
15390
  binding_callbacks[$$value ? 'unshift' : 'push'](() => {
15307
15391
  _rootEl = $$value;
15308
- $$invalidate(5, _rootEl);
15392
+ $$invalidate(6, _rootEl);
15309
15393
  });
15310
15394
  }
15311
15395
 
15312
15396
  $$self.$$set = $$props => {
15313
15397
  if ('width' in $$props) $$invalidate(0, width = $$props.width);
15314
- if ('stickyheader' in $$props) $$invalidate(7, stickyheader = $$props.stickyheader);
15315
- if ('mt' in $$props) $$invalidate(1, mt = $$props.mt);
15316
- if ('mr' in $$props) $$invalidate(2, mr = $$props.mr);
15317
- if ('mb' in $$props) $$invalidate(3, mb = $$props.mb);
15318
- if ('ml' in $$props) $$invalidate(4, ml = $$props.ml);
15398
+ if ('stickyheader' in $$props) $$invalidate(8, stickyheader = $$props.stickyheader);
15399
+ if ('variant' in $$props) $$invalidate(1, variant = $$props.variant);
15400
+ if ('mt' in $$props) $$invalidate(2, mt = $$props.mt);
15401
+ if ('mr' in $$props) $$invalidate(3, mr = $$props.mr);
15402
+ if ('mb' in $$props) $$invalidate(4, mb = $$props.mb);
15403
+ if ('ml' in $$props) $$invalidate(5, ml = $$props.ml);
15319
15404
  };
15320
15405
 
15321
15406
  $$self.$$.update = () => {
15322
15407
  if ($$self.$$.dirty &
15323
15408
  /*stickyheader*/
15324
- 128) {
15325
- $$invalidate(6, _stickyHeader = toBoolean(stickyheader));
15409
+ 256) {
15410
+ $$invalidate(7, _stickyHeader = toBoolean(stickyheader));
15326
15411
  }
15327
15412
  };
15328
15413
 
15329
- return [width, mt, mr, mb, ml, _rootEl, _stickyHeader, stickyheader, table_binding];
15414
+ return [width, variant, mt, mr, mb, ml, _rootEl, _stickyHeader, stickyheader, table_binding];
15330
15415
  }
15331
15416
 
15332
15417
  class Table extends SvelteElement {
15333
15418
  constructor(options) {
15334
15419
  super();
15335
- this.shadowRoot.innerHTML = `<style>table{border-collapse:collapse}table.sticky{position:relative}table.sticky thead{position:sticky;top:0}td{padding:1rem 1.5rem;border-bottom:1px solid var(--color-gray-200);line-height:1rem}th{background-color:var(--color-white);color:var(--goa-color-text-secondary);padding:1rem;vertical-align:middle;text-align:left;border-bottom:2px solid var(--color-gray-600)}tfoot td{background-color:var(--color-gray-100)}tfoot tr:first-child td{border-top:2px solid var(--color-gray-200)}tfoot tr:last-child td{border-bottom:none}</style>`;
15420
+ this.shadowRoot.innerHTML = `<style>table{border-collapse:collapse}table.sticky{position:relative}table.sticky thead{position:sticky;top:0}td{padding:0.75rem 1rem 0.5rem;border-bottom:1px solid var(--goa-color-greyscale-200);line-height:1rem}table.relaxed td{padding:1.25rem 1rem 1rem}th{background-color:var(--goa-color-greyscale-white);color:var(--goa-color-text-secondary);padding:1rem;vertical-align:middle;text-align:left;border-bottom:2px solid var(--goa-color-greyscale-700)}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>`;
15336
15421
  init(this, {
15337
15422
  target: this.shadowRoot,
15338
15423
  props: attribute_to_object(this.attributes),
15339
15424
  customElement: true
15340
- }, instance$2, create_fragment$4, safe_not_equal, {
15425
+ }, instance$3, create_fragment$5, safe_not_equal, {
15341
15426
  width: 0,
15342
- stickyheader: 7,
15343
- mt: 1,
15344
- mr: 2,
15345
- mb: 3,
15346
- ml: 4
15427
+ stickyheader: 8,
15428
+ variant: 1,
15429
+ mt: 2,
15430
+ mr: 3,
15431
+ mb: 4,
15432
+ ml: 5
15347
15433
  }, null);
15348
15434
 
15349
15435
  if (options) {
@@ -15359,7 +15445,7 @@
15359
15445
  }
15360
15446
 
15361
15447
  static get observedAttributes() {
15362
- return ["width", "stickyheader", "mt", "mr", "mb", "ml"];
15448
+ return ["width", "stickyheader", "variant", "mt", "mr", "mb", "ml"];
15363
15449
  }
15364
15450
 
15365
15451
  get width() {
@@ -15374,7 +15460,7 @@
15374
15460
  }
15375
15461
 
15376
15462
  get stickyheader() {
15377
- return this.$$.ctx[7];
15463
+ return this.$$.ctx[8];
15378
15464
  }
15379
15465
 
15380
15466
  set stickyheader(stickyheader) {
@@ -15384,10 +15470,21 @@
15384
15470
  flush();
15385
15471
  }
15386
15472
 
15387
- get mt() {
15473
+ get variant() {
15388
15474
  return this.$$.ctx[1];
15389
15475
  }
15390
15476
 
15477
+ set variant(variant) {
15478
+ this.$$set({
15479
+ variant
15480
+ });
15481
+ flush();
15482
+ }
15483
+
15484
+ get mt() {
15485
+ return this.$$.ctx[2];
15486
+ }
15487
+
15391
15488
  set mt(mt) {
15392
15489
  this.$$set({
15393
15490
  mt
@@ -15396,7 +15493,7 @@
15396
15493
  }
15397
15494
 
15398
15495
  get mr() {
15399
- return this.$$.ctx[2];
15496
+ return this.$$.ctx[3];
15400
15497
  }
15401
15498
 
15402
15499
  set mr(mr) {
@@ -15407,7 +15504,7 @@
15407
15504
  }
15408
15505
 
15409
15506
  get mb() {
15410
- return this.$$.ctx[3];
15507
+ return this.$$.ctx[4];
15411
15508
  }
15412
15509
 
15413
15510
  set mb(mb) {
@@ -15418,7 +15515,7 @@
15418
15515
  }
15419
15516
 
15420
15517
  get ml() {
15421
- return this.$$.ctx[4];
15518
+ return this.$$.ctx[5];
15422
15519
  }
15423
15520
 
15424
15521
  set ml(ml) {
@@ -15433,7 +15530,7 @@
15433
15530
  customElements.define("goa-table", Table);
15434
15531
  /* libs/web-components/src/components/text-area/TextArea.svelte generated by Svelte v3.51.0 */
15435
15532
 
15436
- function create_fragment$3(ctx) {
15533
+ function create_fragment$4(ctx) {
15437
15534
  let div;
15438
15535
  let textarea;
15439
15536
  let textarea_aria_label_value;
@@ -15614,7 +15711,7 @@
15614
15711
  };
15615
15712
  }
15616
15713
 
15617
- function instance$1($$self, $$props, $$invalidate) {
15714
+ function instance$2($$self, $$props, $$invalidate) {
15618
15715
  let isError;
15619
15716
  let isDisabled;
15620
15717
  let isReadonly;
@@ -15725,13 +15822,13 @@
15725
15822
  class TextArea extends SvelteElement {
15726
15823
  constructor(options) {
15727
15824
  super();
15728
- this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.container{position:relative;width:100%}@media(min-width: 640px){.container{max-width:var(--width)}}.goa-textarea{display:block;width:100%;box-sizing:border-box;outline:none;transition:box-shadow 0.1s ease-in;border:1px solid var(--color-gray-600);border-radius:3px;color:var(--color-black, #ccc);padding:var(--textarea-padding-vertical, 0.5rem) var(--textarea-padding-horizontal, 0.5rem);font-size:var(--input-font-size);font-family:var(--font-family);min-width:100%}@media(min-width: 640px){.goa-textarea{min-width:0;width:var(--width)}}.goa-textarea[readonly]{cursor:pointer}.goa-textarea:hover{border-color:var(--goa-color-interactive--hover)}.goa-textarea:active,.goa-textarea:focus,.goa-textarea:focus-within{box-shadow:0 0 0 3px var(--goa-color-interactive--focus)}.goa-textarea:disabled,.goa-textarea:disabled:hover,.goa-textarea:disabled:active,.goa-textarea:disabled:focus{background-color:var(--color-gray-100);border-color:var(--color-gray-200);cursor:default;box-shadow:none}.counter{position:absolute;right:0;padding-top:0.25rem;font-size:var(--fs-sm)}.counter-error{color:var(--goa-color-interactive--error)
15729
- }.error:hover,.error:focus,.error{border:2px solid var(--goa-color-interactive--error)}</style>`;
15825
+ this.shadowRoot.innerHTML = `<style>:host{--textarea-padding-vertical:0.625rem;--textarea-padding-horizontal:0.75rem;box-sizing:border-box;font-family:var(--goa-font-family-sans)}.container{position:relative;width:100%}@media(min-width: 640px){.container{max-width:var(--width)}}.goa-textarea{display:block;width:100%;box-sizing:border-box;outline:none;transition:box-shadow 0.1s ease-in;border:1px solid var(--goa-color-greyscale-700);border-radius:3px;color:var(--goa-color-greyscale-black, #ccc);padding:var(--textarea-padding-vertical) var(--textarea-padding-horizontal);font-size:var(--goa-font-size-4);font-family:var(--goa-font-family-sans);min-width:100%}@media(min-width: 640px){.goa-textarea{min-width:0;width:var(--width)}}.goa-textarea[readonly]{cursor:pointer}.goa-textarea:hover{border-color:var(--goa-color-interactive-hover)}.goa-textarea:active,.goa-textarea:focus,.goa-textarea:focus-within{box-shadow:0 0 0 3px var(--goa-color-interactive-focus)}.goa-textarea:disabled,.goa-textarea:disabled:hover,.goa-textarea:disabled:active,.goa-textarea:disabled:focus{background-color:var(--goa-color-greyscale-100);border-color:var(--goa-color-greyscale-200);cursor:default;box-shadow:none}.counter{position:absolute;right:0;padding-top:0.25rem;font-size:var(--goa-font-size-2)}.counter-error{color:var(--goa-color-interactive-error)
15826
+ }.error:hover,.error:focus,.error{border:2px solid var(--goa-color-interactive-error)}</style>`;
15730
15827
  init(this, {
15731
15828
  target: this.shadowRoot,
15732
15829
  props: attribute_to_object(this.attributes),
15733
15830
  customElement: true
15734
- }, instance$1, create_fragment$3, safe_not_equal, {
15831
+ }, instance$2, create_fragment$4, safe_not_equal, {
15735
15832
  name: 0,
15736
15833
  value: 1,
15737
15834
  placeholder: 2,
@@ -15935,7 +16032,7 @@
15935
16032
  customElements.define("goa-textarea", TextArea);
15936
16033
  /* libs/web-components/src/layouts/FullScreenNavbarLayout.svelte generated by Svelte v3.51.0 */
15937
16034
 
15938
- function create_fragment$2(ctx) {
16035
+ function create_fragment$3(ctx) {
15939
16036
  let div;
15940
16037
  return {
15941
16038
  c() {
@@ -15969,17 +16066,17 @@
15969
16066
  class FullScreenNavbarLayout extends SvelteElement {
15970
16067
  constructor(options) {
15971
16068
  super();
15972
- this.shadowRoot.innerHTML = `<style>.page{height:100vh;grid-template-columns:auto;grid-template-rows:min-content auto min-content;grid-template-areas:"header"
16069
+ this.shadowRoot.innerHTML = `<style>.page{height:100vh;grid-template-columns:auto;grid-template-rows:min-content auto min-content;grid-template-areas:"header"
15973
16070
  "content"
15974
16071
  "nav"
15975
- "footer";display:grid;place-content:stretch stretch;gap:0 0}@media(min-width: 640px){.page{grid-template-columns:300px auto;grid-template-rows:min-content auto min-content;grid-template-areas:"header header"
16072
+ "footer";display:grid;place-content:stretch stretch;gap:0 0}@media(min-width: 640px){.page{grid-template-columns:300px auto;grid-template-rows:min-content auto min-content;grid-template-areas:"header header"
15976
16073
  "nav content"
15977
- "footer footer"}}.header{grid-area:header}.footer{grid-area:footer}main{grid-area:content;justify-self:stretch;padding:1rem}.nav{grid-area:nav;padding:1rem;background-color:var(--color-gray-100)}</style>`;
16074
+ "footer footer"}}.header{grid-area:header}.footer{grid-area:footer}main{grid-area:content;justify-self:stretch;padding:1rem}.nav{grid-area:nav;padding:1rem;background-color:var(--goa-color-greyscale-100)}</style>`;
15978
16075
  init(this, {
15979
16076
  target: this.shadowRoot,
15980
16077
  props: attribute_to_object(this.attributes),
15981
16078
  customElement: true
15982
- }, null, create_fragment$2, safe_not_equal, {}, null);
16079
+ }, null, create_fragment$3, safe_not_equal, {}, null);
15983
16080
 
15984
16081
  if (options) {
15985
16082
  if (options.target) {
@@ -15993,7 +16090,7 @@
15993
16090
  customElements.define("goa-layout-full-nav", FullScreenNavbarLayout);
15994
16091
  /* libs/web-components/src/layouts/one-column-layout/OneColumnLayout.svelte generated by Svelte v3.51.0 */
15995
16092
 
15996
- function create_fragment$1(ctx) {
16093
+ function create_fragment$2(ctx) {
15997
16094
  let div;
15998
16095
  return {
15999
16096
  c() {
@@ -16030,7 +16127,7 @@
16030
16127
  target: this.shadowRoot,
16031
16128
  props: attribute_to_object(this.attributes),
16032
16129
  customElement: true
16033
- }, null, create_fragment$1, safe_not_equal, {}, null);
16130
+ }, null, create_fragment$2, safe_not_equal, {}, null);
16034
16131
 
16035
16132
  if (options) {
16036
16133
  if (options.target) {
@@ -16044,7 +16141,7 @@
16044
16141
  customElements.define("goa-one-column-layout", OneColumnLayout);
16045
16142
  /* libs/web-components/src/layouts/two-column-layout/TwoColumnLayout.svelte generated by Svelte v3.51.0 */
16046
16143
 
16047
- function create_fragment(ctx) {
16144
+ function create_fragment$1(ctx) {
16048
16145
  let div;
16049
16146
  let header;
16050
16147
  let t0;
@@ -16076,7 +16173,7 @@
16076
16173
  ctx[1] || "100%"};
16077
16174
  --nav-column-width: ${
16078
16175
  /*navcolumnwidth*/
16079
- ctx[0] || "var(--layout-nav-column-width)"};
16176
+ ctx[0] || "256px"};
16080
16177
  `);
16081
16178
  },
16082
16179
 
@@ -16098,7 +16195,7 @@
16098
16195
  ctx[1] || "100%"};
16099
16196
  --nav-column-width: ${
16100
16197
  /*navcolumnwidth*/
16101
- ctx[0] || "var(--layout-nav-column-width)"};
16198
+ ctx[0] || "256px"};
16102
16199
  `)) {
16103
16200
  attr(div, "style", div_style_value);
16104
16201
  }
@@ -16114,7 +16211,7 @@
16114
16211
  };
16115
16212
  }
16116
16213
 
16117
- function instance($$self, $$props, $$invalidate) {
16214
+ function instance$1($$self, $$props, $$invalidate) {
16118
16215
  let {
16119
16216
  navcolumnwidth = ""
16120
16217
  } = $$props;
@@ -16133,12 +16230,12 @@
16133
16230
  class TwoColumnLayout extends SvelteElement {
16134
16231
  constructor(options) {
16135
16232
  super();
16136
- 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(--color-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}main{padding-right:2rem}}@media(min-width: 1300px){main{padding-right:4.5rem}}@media(min-width: 640px){.nav{transform:translateX(0);flex:0 0 var(--nav-column-width)}}</style>`;
16233
+ 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}main{padding-right:2rem}}@media(min-width: 1300px){main{padding-right:4.5rem}}@media(min-width: 640px){.nav{transform:translateX(0);flex:0 0 var(--nav-column-width)}}</style>`;
16137
16234
  init(this, {
16138
16235
  target: this.shadowRoot,
16139
16236
  props: attribute_to_object(this.attributes),
16140
16237
  customElement: true
16141
- }, instance, create_fragment, safe_not_equal, {
16238
+ }, instance$1, create_fragment$1, safe_not_equal, {
16142
16239
  navcolumnwidth: 0,
16143
16240
  maxcontentwidth: 1
16144
16241
  }, null);
@@ -16184,57 +16281,564 @@
16184
16281
  }
16185
16282
 
16186
16283
  customElements.define("goa-two-column-layout", TwoColumnLayout);
16284
+ /* libs/web-components/src/components/pagination/Pagination.svelte generated by Svelte v3.51.0 */
16187
16285
 
16188
- /*! *****************************************************************************
16189
- Copyright (c) Microsoft Corporation.
16190
-
16191
- Permission to use, copy, modify, and/or distribute this software for any
16192
- purpose with or without fee is hereby granted.
16193
-
16194
- THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
16195
- REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
16196
- AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
16197
- INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
16198
- LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
16199
- OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
16200
- PERFORMANCE OF THIS SOFTWARE.
16201
- ***************************************************************************** */
16202
-
16203
- var __assign = function() {
16204
- __assign = Object.assign || function __assign(t) {
16205
- for (var s, i = 1, n = arguments.length; i < n; i++) {
16206
- s = arguments[i];
16207
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
16208
- }
16209
- return t;
16210
- };
16211
- return __assign.apply(this, arguments);
16212
- };
16213
-
16214
- function __rest(s, e) {
16215
- var t = {};
16216
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
16217
- t[p] = s[p];
16218
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
16219
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
16220
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
16221
- t[p[i]] = s[p[i]];
16222
- }
16223
- return t;
16224
- }
16225
-
16226
- var GoAAppHeader = function GoAAppHeader(_a) {
16227
- var heading = _a.heading,
16228
- url = _a.url,
16229
- maxContentWidth = _a.maxContentWidth,
16230
- children = _a.children;
16231
- return jsxRuntime.jsx("goa-app-header", __assign({
16232
- heading: heading,
16233
- url: url,
16234
- maxcontentwidth: maxContentWidth
16235
- }, {
16236
- children: children
16237
- }), void 0);
16286
+ function create_if_block(ctx) {
16287
+ let goa_block;
16288
+ let span0;
16289
+ let t1;
16290
+ let input;
16291
+ let t2;
16292
+ let goa_input;
16293
+ let t3;
16294
+ let span1;
16295
+ let t4;
16296
+ let t5;
16297
+ return {
16298
+ c() {
16299
+ goa_block = element("goa-block");
16300
+ span0 = element("span");
16301
+ span0.textContent = "Page";
16302
+ t1 = space();
16303
+ input = element("input");
16304
+ t2 = space();
16305
+ goa_input = element("goa-input");
16306
+ t3 = space();
16307
+ span1 = element("span");
16308
+ t4 = text("of ");
16309
+ t5 = text(
16310
+ /*_pageCount*/
16311
+ ctx[8]);
16312
+ attr(input, "type", "hidden");
16313
+ set_custom_element_data(goa_input, "type", "number");
16314
+ set_custom_element_data(goa_input, "value",
16315
+ /*pagenumber*/
16316
+ ctx[0]);
16317
+ set_custom_element_data(goa_input, "width", "8ch");
16318
+ set_custom_element_data(goa_input, "debounce", "500");
16319
+ set_custom_element_data(goa_input, "min", "1");
16320
+ set_custom_element_data(goa_input, "max",
16321
+ /*_pageCount*/
16322
+ ctx[8]);
16323
+ set_custom_element_data(goa_block, "data-testid", "page-selector");
16324
+ set_custom_element_data(goa_block, "alignment", "center");
16325
+ set_custom_element_data(goa_block, "gap", "s");
16326
+ },
16327
+
16328
+ m(target, anchor) {
16329
+ insert(target, goa_block, anchor);
16330
+ append(goa_block, span0);
16331
+ append(goa_block, t1);
16332
+ append(goa_block, input);
16333
+ /*input_binding*/
16334
+
16335
+ ctx[12](input);
16336
+ append(goa_block, t2);
16337
+ append(goa_block, goa_input);
16338
+ /*goa_input_binding*/
16339
+
16340
+ ctx[13](goa_input);
16341
+ append(goa_block, t3);
16342
+ append(goa_block, span1);
16343
+ append(span1, t4);
16344
+ append(span1, t5);
16345
+ },
16346
+
16347
+ p(ctx, dirty) {
16348
+ if (dirty &
16349
+ /*pagenumber*/
16350
+ 1) {
16351
+ set_custom_element_data(goa_input, "value",
16352
+ /*pagenumber*/
16353
+ ctx[0]);
16354
+ }
16355
+
16356
+ if (dirty &
16357
+ /*_pageCount*/
16358
+ 256) {
16359
+ set_custom_element_data(goa_input, "max",
16360
+ /*_pageCount*/
16361
+ ctx[8]);
16362
+ }
16363
+
16364
+ if (dirty &
16365
+ /*_pageCount*/
16366
+ 256) set_data(t5,
16367
+ /*_pageCount*/
16368
+ ctx[8]);
16369
+ },
16370
+
16371
+ d(detaching) {
16372
+ if (detaching) detach(goa_block);
16373
+ /*input_binding*/
16374
+
16375
+ ctx[12](null);
16376
+ /*goa_input_binding*/
16377
+
16378
+ ctx[13](null);
16379
+ }
16380
+
16381
+ };
16382
+ }
16383
+
16384
+ function create_fragment(ctx) {
16385
+ let goa_block1;
16386
+ let div;
16387
+ let t0;
16388
+ let goa_block0;
16389
+ let goa_button0;
16390
+ let t1;
16391
+ let goa_button0_disabled_value;
16392
+ let t2;
16393
+ let goa_button1;
16394
+ let t3;
16395
+ let goa_button1_disabled_value;
16396
+ let mounted;
16397
+ let dispose;
16398
+ let if_block =
16399
+ /*variant*/
16400
+ ctx[1] === "all" && create_if_block(ctx);
16401
+ return {
16402
+ c() {
16403
+ goa_block1 = element("goa-block");
16404
+ div = element("div");
16405
+ if (if_block) if_block.c();
16406
+ t0 = space();
16407
+ goa_block0 = element("goa-block");
16408
+ goa_button0 = element("goa-button");
16409
+ t1 = text("Previous");
16410
+ t2 = space();
16411
+ goa_button1 = element("goa-button");
16412
+ t3 = text("Next");
16413
+ this.c = noop;
16414
+ set_custom_element_data(goa_button0, "type", "tertiary");
16415
+ set_custom_element_data(goa_button0, "leadingicon", "arrow-back");
16416
+ set_custom_element_data(goa_button0, "disabled", goa_button0_disabled_value =
16417
+ /*pagenumber*/
16418
+ ctx[0] == 1 ? "true" : "false");
16419
+ set_custom_element_data(goa_button1, "type", "tertiary");
16420
+ set_custom_element_data(goa_button1, "trailingicon", "arrow-forward");
16421
+ set_custom_element_data(goa_button1, "disabled", goa_button1_disabled_value =
16422
+ /*pagenumber*/
16423
+ ctx[0] ==
16424
+ /*_pageCount*/
16425
+ ctx[8] ? "true" : "false");
16426
+ set_custom_element_data(goa_block0, "alignment", "center");
16427
+ set_custom_element_data(goa_block0, "gap", "m");
16428
+ set_custom_element_data(goa_block0, "data-testid", "page-links");
16429
+ attr(div, "class", "controls");
16430
+ set_custom_element_data(goa_block1, "id", "root");
16431
+ set_custom_element_data(goa_block1, "ml",
16432
+ /*ml*/
16433
+ ctx[5]);
16434
+ set_custom_element_data(goa_block1, "mr",
16435
+ /*mr*/
16436
+ ctx[3]);
16437
+ set_custom_element_data(goa_block1, "mb",
16438
+ /*mb*/
16439
+ ctx[4]);
16440
+ set_custom_element_data(goa_block1, "mt",
16441
+ /*mt*/
16442
+ ctx[2]);
16443
+ },
16444
+
16445
+ m(target, anchor) {
16446
+ insert(target, goa_block1, anchor);
16447
+ append(goa_block1, div);
16448
+ if (if_block) if_block.m(div, null);
16449
+ append(div, t0);
16450
+ append(div, goa_block0);
16451
+ append(goa_block0, goa_button0);
16452
+ append(goa_button0, t1);
16453
+ append(goa_block0, t2);
16454
+ append(goa_block0, goa_button1);
16455
+ append(goa_button1, t3);
16456
+
16457
+ if (!mounted) {
16458
+ dispose = [listen(goa_button0, "click",
16459
+ /*click_handler*/
16460
+ ctx[14]), listen(goa_button1, "click",
16461
+ /*click_handler_1*/
16462
+ ctx[15])];
16463
+ mounted = true;
16464
+ }
16465
+ },
16466
+
16467
+ p(ctx, [dirty]) {
16468
+ if (
16469
+ /*variant*/
16470
+ ctx[1] === "all") {
16471
+ if (if_block) {
16472
+ if_block.p(ctx, dirty);
16473
+ } else {
16474
+ if_block = create_if_block(ctx);
16475
+ if_block.c();
16476
+ if_block.m(div, t0);
16477
+ }
16478
+ } else if (if_block) {
16479
+ if_block.d(1);
16480
+ if_block = null;
16481
+ }
16482
+
16483
+ if (dirty &
16484
+ /*pagenumber*/
16485
+ 1 && goa_button0_disabled_value !== (goa_button0_disabled_value =
16486
+ /*pagenumber*/
16487
+ ctx[0] == 1 ? "true" : "false")) {
16488
+ set_custom_element_data(goa_button0, "disabled", goa_button0_disabled_value);
16489
+ }
16490
+
16491
+ if (dirty &
16492
+ /*pagenumber, _pageCount*/
16493
+ 257 && goa_button1_disabled_value !== (goa_button1_disabled_value =
16494
+ /*pagenumber*/
16495
+ ctx[0] ==
16496
+ /*_pageCount*/
16497
+ ctx[8] ? "true" : "false")) {
16498
+ set_custom_element_data(goa_button1, "disabled", goa_button1_disabled_value);
16499
+ }
16500
+
16501
+ if (dirty &
16502
+ /*ml*/
16503
+ 32) {
16504
+ set_custom_element_data(goa_block1, "ml",
16505
+ /*ml*/
16506
+ ctx[5]);
16507
+ }
16508
+
16509
+ if (dirty &
16510
+ /*mr*/
16511
+ 8) {
16512
+ set_custom_element_data(goa_block1, "mr",
16513
+ /*mr*/
16514
+ ctx[3]);
16515
+ }
16516
+
16517
+ if (dirty &
16518
+ /*mb*/
16519
+ 16) {
16520
+ set_custom_element_data(goa_block1, "mb",
16521
+ /*mb*/
16522
+ ctx[4]);
16523
+ }
16524
+
16525
+ if (dirty &
16526
+ /*mt*/
16527
+ 4) {
16528
+ set_custom_element_data(goa_block1, "mt",
16529
+ /*mt*/
16530
+ ctx[2]);
16531
+ }
16532
+ },
16533
+
16534
+ i: noop,
16535
+ o: noop,
16536
+
16537
+ d(detaching) {
16538
+ if (detaching) detach(goa_block1);
16539
+ if (if_block) if_block.d();
16540
+ mounted = false;
16541
+ run_all(dispose);
16542
+ }
16543
+
16544
+ };
16545
+ }
16546
+
16547
+ function instance($$self, $$props, $$invalidate) {
16548
+ let _pageCount;
16549
+
16550
+ const [Variants, validateVariant] = typeValidator("Pagination variant", ["all", "links-only"]);
16551
+ let {
16552
+ pagenumber
16553
+ } = $$props;
16554
+ let {
16555
+ itemcount
16556
+ } = $$props;
16557
+ let {
16558
+ perpagecount = 10
16559
+ } = $$props;
16560
+ let {
16561
+ variant = "all"
16562
+ } = $$props;
16563
+ let {
16564
+ mt = null
16565
+ } = $$props;
16566
+ let {
16567
+ mr = null
16568
+ } = $$props;
16569
+ let {
16570
+ mb = "m"
16571
+ } = $$props;
16572
+ let {
16573
+ ml = null
16574
+ } = $$props; // private
16575
+
16576
+ let inputEl = null;
16577
+ let hiddenEl = null; // needed to allow the inputEl's event to be cancelled
16578
+ // hooks
16579
+
16580
+ onMount(function () {
16581
+ return _call(tick, function () {
16582
+ validateRequired("GoAPagination", {
16583
+ itemcount,
16584
+ pagenumber
16585
+ });
16586
+ validateVariant(variant); // prevent event propagation if value is non-numeric
16587
+ // (input[type=number] returns blank for non-numeric numbers)
16588
+
16589
+ inputEl && inputEl.addEventListener("_change", e => {
16590
+ const page = Number.parseInt(e.detail.value);
16591
+ e.stopPropagation();
16592
+
16593
+ if (isNaN(page)) {
16594
+ return;
16595
+ }
16596
+
16597
+ hiddenEl.dispatchEvent(new CustomEvent("_change", {
16598
+ composed: true,
16599
+ bubbles: true,
16600
+ detail: {
16601
+ page
16602
+ }
16603
+ }));
16604
+ });
16605
+ });
16606
+ }); // functions
16607
+
16608
+ function goto(e, offset) {
16609
+ const newPage = Number.parseInt(pagenumber + "") + offset;
16610
+
16611
+ if (newPage > 0 && newPage <= _pageCount) {
16612
+ e.target.dispatchEvent(new CustomEvent("_change", {
16613
+ composed: true,
16614
+ bubbles: true,
16615
+ detail: {
16616
+ page: newPage
16617
+ }
16618
+ }));
16619
+ }
16620
+
16621
+ e.preventDefault();
16622
+ }
16623
+
16624
+ function input_binding($$value) {
16625
+ binding_callbacks[$$value ? 'unshift' : 'push'](() => {
16626
+ hiddenEl = $$value;
16627
+ $$invalidate(7, hiddenEl);
16628
+ });
16629
+ }
16630
+
16631
+ function goa_input_binding($$value) {
16632
+ binding_callbacks[$$value ? 'unshift' : 'push'](() => {
16633
+ inputEl = $$value;
16634
+ $$invalidate(6, inputEl);
16635
+ });
16636
+ }
16637
+
16638
+ const click_handler = e => goto(e, -1);
16639
+
16640
+ const click_handler_1 = e => goto(e, 1);
16641
+
16642
+ $$self.$$set = $$props => {
16643
+ if ('pagenumber' in $$props) $$invalidate(0, pagenumber = $$props.pagenumber);
16644
+ if ('itemcount' in $$props) $$invalidate(10, itemcount = $$props.itemcount);
16645
+ if ('perpagecount' in $$props) $$invalidate(11, perpagecount = $$props.perpagecount);
16646
+ if ('variant' in $$props) $$invalidate(1, variant = $$props.variant);
16647
+ if ('mt' in $$props) $$invalidate(2, mt = $$props.mt);
16648
+ if ('mr' in $$props) $$invalidate(3, mr = $$props.mr);
16649
+ if ('mb' in $$props) $$invalidate(4, mb = $$props.mb);
16650
+ if ('ml' in $$props) $$invalidate(5, ml = $$props.ml);
16651
+ };
16652
+
16653
+ $$self.$$.update = () => {
16654
+ if ($$self.$$.dirty &
16655
+ /*itemcount, perpagecount*/
16656
+ 3072) {
16657
+ // reactive
16658
+ $$invalidate(8, _pageCount = Math.ceil(itemcount / perpagecount));
16659
+ }
16660
+ };
16661
+
16662
+ return [pagenumber, variant, mt, mr, mb, ml, inputEl, hiddenEl, _pageCount, goto, itemcount, perpagecount, input_binding, goa_input_binding, click_handler, click_handler_1];
16663
+ }
16664
+
16665
+ class Pagination extends SvelteElement {
16666
+ constructor(options) {
16667
+ super();
16668
+ this.shadowRoot.innerHTML = `<style>span{white-space:nowrap}.controls{display:flex;gap:1rem;flex-direction:column;align-items:center;width:100%}@media(min-width: 480px){.controls{flex-direction:row;justify-content:space-between}}</style>`;
16669
+ init(this, {
16670
+ target: this.shadowRoot,
16671
+ props: attribute_to_object(this.attributes),
16672
+ customElement: true
16673
+ }, instance, create_fragment, safe_not_equal, {
16674
+ pagenumber: 0,
16675
+ itemcount: 10,
16676
+ perpagecount: 11,
16677
+ variant: 1,
16678
+ mt: 2,
16679
+ mr: 3,
16680
+ mb: 4,
16681
+ ml: 5
16682
+ }, null);
16683
+
16684
+ if (options) {
16685
+ if (options.target) {
16686
+ insert(options.target, this, options.anchor);
16687
+ }
16688
+
16689
+ if (options.props) {
16690
+ this.$set(options.props);
16691
+ flush();
16692
+ }
16693
+ }
16694
+ }
16695
+
16696
+ static get observedAttributes() {
16697
+ return ["pagenumber", "itemcount", "perpagecount", "variant", "mt", "mr", "mb", "ml"];
16698
+ }
16699
+
16700
+ get pagenumber() {
16701
+ return this.$$.ctx[0];
16702
+ }
16703
+
16704
+ set pagenumber(pagenumber) {
16705
+ this.$$set({
16706
+ pagenumber
16707
+ });
16708
+ flush();
16709
+ }
16710
+
16711
+ get itemcount() {
16712
+ return this.$$.ctx[10];
16713
+ }
16714
+
16715
+ set itemcount(itemcount) {
16716
+ this.$$set({
16717
+ itemcount
16718
+ });
16719
+ flush();
16720
+ }
16721
+
16722
+ get perpagecount() {
16723
+ return this.$$.ctx[11];
16724
+ }
16725
+
16726
+ set perpagecount(perpagecount) {
16727
+ this.$$set({
16728
+ perpagecount
16729
+ });
16730
+ flush();
16731
+ }
16732
+
16733
+ get variant() {
16734
+ return this.$$.ctx[1];
16735
+ }
16736
+
16737
+ set variant(variant) {
16738
+ this.$$set({
16739
+ variant
16740
+ });
16741
+ flush();
16742
+ }
16743
+
16744
+ get mt() {
16745
+ return this.$$.ctx[2];
16746
+ }
16747
+
16748
+ set mt(mt) {
16749
+ this.$$set({
16750
+ mt
16751
+ });
16752
+ flush();
16753
+ }
16754
+
16755
+ get mr() {
16756
+ return this.$$.ctx[3];
16757
+ }
16758
+
16759
+ set mr(mr) {
16760
+ this.$$set({
16761
+ mr
16762
+ });
16763
+ flush();
16764
+ }
16765
+
16766
+ get mb() {
16767
+ return this.$$.ctx[4];
16768
+ }
16769
+
16770
+ set mb(mb) {
16771
+ this.$$set({
16772
+ mb
16773
+ });
16774
+ flush();
16775
+ }
16776
+
16777
+ get ml() {
16778
+ return this.$$.ctx[5];
16779
+ }
16780
+
16781
+ set ml(ml) {
16782
+ this.$$set({
16783
+ ml
16784
+ });
16785
+ flush();
16786
+ }
16787
+
16788
+ }
16789
+
16790
+ customElements.define("goa-pagination", Pagination);
16791
+
16792
+ /*! *****************************************************************************
16793
+ Copyright (c) Microsoft Corporation.
16794
+
16795
+ Permission to use, copy, modify, and/or distribute this software for any
16796
+ purpose with or without fee is hereby granted.
16797
+
16798
+ THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
16799
+ REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
16800
+ AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
16801
+ INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
16802
+ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
16803
+ OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
16804
+ PERFORMANCE OF THIS SOFTWARE.
16805
+ ***************************************************************************** */
16806
+
16807
+ var __assign = function() {
16808
+ __assign = Object.assign || function __assign(t) {
16809
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
16810
+ s = arguments[i];
16811
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
16812
+ }
16813
+ return t;
16814
+ };
16815
+ return __assign.apply(this, arguments);
16816
+ };
16817
+
16818
+ function __rest(s, e) {
16819
+ var t = {};
16820
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
16821
+ t[p] = s[p];
16822
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
16823
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
16824
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
16825
+ t[p[i]] = s[p[i]];
16826
+ }
16827
+ return t;
16828
+ }
16829
+
16830
+ var GoAAppHeader = function GoAAppHeader(_a) {
16831
+ var heading = _a.heading,
16832
+ url = _a.url,
16833
+ maxContentWidth = _a.maxContentWidth,
16834
+ children = _a.children;
16835
+ return jsxRuntime.jsx("goa-app-header", __assign({
16836
+ heading: heading,
16837
+ url: url,
16838
+ maxcontentwidth: maxContentWidth
16839
+ }, {
16840
+ children: children
16841
+ }), void 0);
16238
16842
  };
16239
16843
 
16240
16844
  var GoABadge = function GoABadge(_a) {
@@ -16860,6 +17464,7 @@
16860
17464
 
16861
17465
  var GoAInput = function GoAInput(_a) {
16862
17466
  var id = _a.id,
17467
+ debounce = _a.debounce,
16863
17468
  name = _a.name,
16864
17469
  type = _a.type,
16865
17470
  autoCapitalize = _a.autoCapitalize,
@@ -16917,6 +17522,7 @@
16917
17522
  }, [ref, onChange, onTrailingIconClick]);
16918
17523
  return jsxRuntime.jsxs("goa-input", __assign({
16919
17524
  ref: ref,
17525
+ debounce: debounce,
16920
17526
  focused: focused,
16921
17527
  type: type,
16922
17528
  name: name,
@@ -17277,6 +17883,38 @@
17277
17883
  }), void 0);
17278
17884
  };
17279
17885
 
17886
+ function GoAPagination(props) {
17887
+ var ref = react.useRef();
17888
+ react.useEffect(function () {
17889
+ if (!ref.current) {
17890
+ return;
17891
+ }
17892
+
17893
+ var current = ref.current;
17894
+
17895
+ var changeListener = function changeListener(e) {
17896
+ var page = e.detail.page;
17897
+ props.onChange(page);
17898
+ };
17899
+
17900
+ current.addEventListener("_change", changeListener);
17901
+ return function () {
17902
+ current.removeEventListener("_change", changeListener);
17903
+ };
17904
+ }, [ref, props.onChange]);
17905
+ return jsxRuntime.jsx("goa-pagination", {
17906
+ ref: ref,
17907
+ itemcount: props.itemCount,
17908
+ perpagecount: props.perPageCount,
17909
+ pagenumber: props.pageNumber,
17910
+ variant: props.variant,
17911
+ mt: props.mt,
17912
+ mb: props.mb,
17913
+ ml: props.ml,
17914
+ mr: props.mr
17915
+ }, void 0);
17916
+ }
17917
+
17280
17918
  var GoASkeleton = function GoASkeleton(_a) {
17281
17919
  var maxWidth = _a.maxWidth,
17282
17920
  size = _a.size,
@@ -17323,7 +17961,11 @@
17323
17961
  function GoATable(props) {
17324
17962
  return jsxRuntime.jsx("goa-table", __assign({
17325
17963
  width: props.width,
17326
- stickyheader: false
17964
+ stickyheader: false,
17965
+ mt: props.mt,
17966
+ mb: props.mb,
17967
+ ml: props.ml,
17968
+ mr: props.mr
17327
17969
  }, {
17328
17970
  children: jsxRuntime.jsx("template", {
17329
17971
  children: jsxRuntime.jsx("table", {
@@ -17456,6 +18098,7 @@
17456
18098
  exports.GoANotification = GoANotification;
17457
18099
  exports.GoAOneColumnLayout = GoAOneColumnLayout;
17458
18100
  exports.GoAPageBlock = GoAPageBlock;
18101
+ exports.GoAPagination = GoAPagination;
17459
18102
  exports.GoARadioGroup = GoARadioGroup;
17460
18103
  exports.GoARadioItem = GoARadioItem;
17461
18104
  exports.GoASkeleton = GoASkeleton;