@abgov/react-components 4.4.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.
@@ -1026,7 +1026,6 @@ if (typeof HTMLElement === 'function') {
1026
1026
  }
1027
1027
  /* libs/web-components/src/components/app-header/AppHeader.svelte generated by Svelte v3.51.0 */
1028
1028
 
1029
-
1030
1029
  function create_else_block$4(ctx) {
1031
1030
  let div;
1032
1031
  let img0;
@@ -1084,7 +1083,7 @@ function create_else_block$4(ctx) {
1084
1083
  } // (19:4) {#if url}
1085
1084
 
1086
1085
 
1087
- function create_if_block$h(ctx) {
1086
+ function create_if_block$i(ctx) {
1088
1087
  let a;
1089
1088
  let img0;
1090
1089
  let img0_src_value;
@@ -1151,7 +1150,7 @@ function create_if_block$h(ctx) {
1151
1150
  };
1152
1151
  }
1153
1152
 
1154
- function create_fragment$F(ctx) {
1153
+ function create_fragment$G(ctx) {
1155
1154
  let div2;
1156
1155
  let div1;
1157
1156
  let t;
@@ -1161,7 +1160,7 @@ function create_fragment$F(ctx) {
1161
1160
  function select_block_type(ctx, dirty) {
1162
1161
  if (
1163
1162
  /*url*/
1164
- ctx[1]) return create_if_block$h;
1163
+ ctx[1]) return create_if_block$i;
1165
1164
  return create_else_block$4;
1166
1165
  }
1167
1166
 
@@ -1235,7 +1234,7 @@ function create_fragment$F(ctx) {
1235
1234
  };
1236
1235
  }
1237
1236
 
1238
- function instance$z($$self, $$props, $$invalidate) {
1237
+ function instance$A($$self, $$props, $$invalidate) {
1239
1238
  let {
1240
1239
  heading = ""
1241
1240
  } = $$props;
@@ -1262,12 +1261,12 @@ function instance$z($$self, $$props, $$invalidate) {
1262
1261
  class AppHeader extends SvelteElement {
1263
1262
  constructor(options) {
1264
1263
  super();
1265
- 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>`;
1264
+ 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>`;
1266
1265
  init(this, {
1267
1266
  target: this.shadowRoot,
1268
1267
  props: attribute_to_object(this.attributes),
1269
1268
  customElement: true
1270
- }, instance$z, create_fragment$F, safe_not_equal, {
1269
+ }, instance$A, create_fragment$G, safe_not_equal, {
1271
1270
  heading: 0,
1272
1271
  url: 1,
1273
1272
  testid: 2,
@@ -1339,7 +1338,7 @@ class AppHeader extends SvelteElement {
1339
1338
  customElements.define("goa-app-header", AppHeader);
1340
1339
 
1341
1340
  function calculateMargin(mt, mr, mb, ml) {
1342
- 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(" ");
1341
+ 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(" ");
1343
1342
  }
1344
1343
 
1345
1344
  function injectCss(el, rootSelector, css, media) {
@@ -1452,7 +1451,7 @@ function create_if_block_1$a(ctx) {
1452
1451
  } // (50:2) {#if content}
1453
1452
 
1454
1453
 
1455
- function create_if_block$g(ctx) {
1454
+ function create_if_block$h(ctx) {
1456
1455
  let div;
1457
1456
  let t;
1458
1457
  return {
@@ -1484,7 +1483,7 @@ function create_if_block$g(ctx) {
1484
1483
  };
1485
1484
  }
1486
1485
 
1487
- function create_fragment$E(ctx) {
1486
+ function create_fragment$F(ctx) {
1488
1487
  let div;
1489
1488
  let t;
1490
1489
  let div_style_value;
@@ -1501,7 +1500,7 @@ function create_fragment$E(ctx) {
1501
1500
  let if_block0 = current_block_type(ctx);
1502
1501
  let if_block1 =
1503
1502
  /*content*/
1504
- ctx[2] && create_if_block$g(ctx);
1503
+ ctx[2] && create_if_block$h(ctx);
1505
1504
  return {
1506
1505
  c() {
1507
1506
  div = element("div");
@@ -1558,7 +1557,7 @@ function create_fragment$E(ctx) {
1558
1557
  if (if_block1) {
1559
1558
  if_block1.p(ctx, dirty);
1560
1559
  } else {
1561
- if_block1 = create_if_block$g(ctx);
1560
+ if_block1 = create_if_block$h(ctx);
1562
1561
  if_block1.c();
1563
1562
  if_block1.m(div, null);
1564
1563
  }
@@ -1620,7 +1619,7 @@ function create_fragment$E(ctx) {
1620
1619
  };
1621
1620
  }
1622
1621
 
1623
- function instance$y($$self, $$props, $$invalidate) {
1622
+ function instance$z($$self, $$props, $$invalidate) {
1624
1623
  let showIcon;
1625
1624
  let iconType;
1626
1625
  const [Types, validateType] = typeValidator("Badge type", ["success", "important", "information", "emergency", "dark", "midtone", "light"], true);
@@ -1695,14 +1694,12 @@ function instance$y($$self, $$props, $$invalidate) {
1695
1694
  class Badge extends SvelteElement {
1696
1695
  constructor(options) {
1697
1696
  super();
1698
- 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(
1699
- --font-valign-fix
1700
- )}.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>`;
1697
+ 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>`;
1701
1698
  init(this, {
1702
1699
  target: this.shadowRoot,
1703
1700
  props: attribute_to_object(this.attributes),
1704
1701
  customElement: true
1705
- }, instance$y, create_fragment$E, safe_not_equal, {
1702
+ }, instance$z, create_fragment$F, safe_not_equal, {
1706
1703
  type: 0,
1707
1704
  testid: 1,
1708
1705
  content: 2,
@@ -1822,7 +1819,7 @@ class Badge extends SvelteElement {
1822
1819
  customElements.define("goa-badge", Badge);
1823
1820
  /* libs/web-components/src/components/block/Block.svelte generated by Svelte v3.51.0 */
1824
1821
 
1825
- function create_fragment$D(ctx) {
1822
+ function create_fragment$E(ctx) {
1826
1823
  let div;
1827
1824
  let slot;
1828
1825
  let div_style_value;
@@ -1841,8 +1838,8 @@ function create_fragment$D(ctx) {
1841
1838
  /*mb*/
1842
1839
  ctx[5],
1843
1840
  /*ml*/
1844
- ctx[6])}
1845
- --gap: var(--goa-spacing-${
1841
+ ctx[6])};
1842
+ --gap: var(--goa-space-${
1846
1843
  /*gap*/
1847
1844
  ctx[0]});
1848
1845
  --alignment: ${
@@ -1871,8 +1868,8 @@ function create_fragment$D(ctx) {
1871
1868
  /*mb*/
1872
1869
  ctx[5],
1873
1870
  /*ml*/
1874
- ctx[6])}
1875
- --gap: var(--goa-spacing-${
1871
+ ctx[6])};
1872
+ --gap: var(--goa-space-${
1876
1873
  /*gap*/
1877
1874
  ctx[0]});
1878
1875
  --alignment: ${
@@ -1896,7 +1893,7 @@ function create_fragment$D(ctx) {
1896
1893
  };
1897
1894
  }
1898
1895
 
1899
- function instance$x($$self, $$props, $$invalidate) {
1896
+ function instance$y($$self, $$props, $$invalidate) {
1900
1897
  let {
1901
1898
  gap = "m"
1902
1899
  } = $$props;
@@ -1940,7 +1937,7 @@ class Block extends SvelteElement {
1940
1937
  target: this.shadowRoot,
1941
1938
  props: attribute_to_object(this.attributes),
1942
1939
  customElement: true
1943
- }, instance$x, create_fragment$D, safe_not_equal, {
1940
+ }, instance$y, create_fragment$E, safe_not_equal, {
1944
1941
  gap: 0,
1945
1942
  direction: 1,
1946
1943
  alignment: 2,
@@ -2050,7 +2047,7 @@ customElements.define("goa-block", Block);
2050
2047
 
2051
2048
  function create_else_block$2(ctx) {
2052
2049
  let t0;
2053
- let slot;
2050
+ let span;
2054
2051
  let t1;
2055
2052
  let if_block1_anchor;
2056
2053
  let if_block0 =
@@ -2063,17 +2060,18 @@ function create_else_block$2(ctx) {
2063
2060
  c() {
2064
2061
  if (if_block0) if_block0.c();
2065
2062
  t0 = space();
2066
- slot = element("slot");
2063
+ span = element("span");
2064
+ span.innerHTML = `<slot></slot>`;
2067
2065
  t1 = space();
2068
2066
  if (if_block1) if_block1.c();
2069
2067
  if_block1_anchor = empty();
2070
- attr(slot, "class", "text");
2068
+ attr(span, "class", "text");
2071
2069
  },
2072
2070
 
2073
2071
  m(target, anchor) {
2074
2072
  if (if_block0) if_block0.m(target, anchor);
2075
2073
  insert(target, t0, anchor);
2076
- insert(target, slot, anchor);
2074
+ insert(target, span, anchor);
2077
2075
  insert(target, t1, anchor);
2078
2076
  if (if_block1) if_block1.m(target, anchor);
2079
2077
  insert(target, if_block1_anchor, anchor);
@@ -2114,33 +2112,34 @@ function create_else_block$2(ctx) {
2114
2112
  d(detaching) {
2115
2113
  if (if_block0) if_block0.d(detaching);
2116
2114
  if (detaching) detach(t0);
2117
- if (detaching) detach(slot);
2115
+ if (detaching) detach(span);
2118
2116
  if (detaching) detach(t1);
2119
2117
  if (if_block1) if_block1.d(detaching);
2120
2118
  if (detaching) detach(if_block1_anchor);
2121
2119
  }
2122
2120
 
2123
2121
  };
2124
- } // (45:2) {#if type === "start"}
2122
+ } // (46:2) {#if type === "start"}
2125
2123
 
2126
2124
 
2127
- function create_if_block$f(ctx) {
2128
- let slot;
2125
+ function create_if_block$g(ctx) {
2126
+ let span;
2129
2127
  let t;
2130
2128
  let goa_icon;
2131
2129
  return {
2132
2130
  c() {
2133
- slot = element("slot");
2131
+ span = element("span");
2132
+ span.innerHTML = `<slot></slot>`;
2134
2133
  t = space();
2135
2134
  goa_icon = element("goa-icon");
2136
- attr(slot, "class", "text");
2135
+ attr(span, "class", "text");
2137
2136
  set_custom_element_data(goa_icon, "id", "trailing-icon");
2138
2137
  set_custom_element_data(goa_icon, "type", "arrow-forward");
2139
2138
  set_custom_element_data(goa_icon, "inverted", "true");
2140
2139
  },
2141
2140
 
2142
2141
  m(target, anchor) {
2143
- insert(target, slot, anchor);
2142
+ insert(target, span, anchor);
2144
2143
  insert(target, t, anchor);
2145
2144
  insert(target, goa_icon, anchor);
2146
2145
  },
@@ -2148,13 +2147,13 @@ function create_if_block$f(ctx) {
2148
2147
  p: noop,
2149
2148
 
2150
2149
  d(detaching) {
2151
- if (detaching) detach(slot);
2150
+ if (detaching) detach(span);
2152
2151
  if (detaching) detach(t);
2153
2152
  if (detaching) detach(goa_icon);
2154
2153
  }
2155
2154
 
2156
2155
  };
2157
- } // (49:4) {#if leadingicon}
2156
+ } // (52:4) {#if leadingicon}
2158
2157
 
2159
2158
 
2160
2159
  function create_if_block_2$6(ctx) {
@@ -2168,7 +2167,7 @@ function create_if_block_2$6(ctx) {
2168
2167
  ctx[3]);
2169
2168
  set_custom_element_data(goa_icon, "inverted",
2170
2169
  /*isButtonDark*/
2171
- ctx[10]);
2170
+ ctx[11]);
2172
2171
  },
2173
2172
 
2174
2173
  m(target, anchor) {
@@ -2186,10 +2185,10 @@ function create_if_block_2$6(ctx) {
2186
2185
 
2187
2186
  if (dirty &
2188
2187
  /*isButtonDark*/
2189
- 1024) {
2188
+ 2048) {
2190
2189
  set_custom_element_data(goa_icon, "inverted",
2191
2190
  /*isButtonDark*/
2192
- ctx[10]);
2191
+ ctx[11]);
2193
2192
  }
2194
2193
  },
2195
2194
 
@@ -2198,7 +2197,7 @@ function create_if_block_2$6(ctx) {
2198
2197
  }
2199
2198
 
2200
2199
  };
2201
- } // (53:4) {#if trailingicon}
2200
+ } // (58:4) {#if trailingicon}
2202
2201
 
2203
2202
 
2204
2203
  function create_if_block_1$9(ctx) {
@@ -2212,7 +2211,7 @@ function create_if_block_1$9(ctx) {
2212
2211
  ctx[4]);
2213
2212
  set_custom_element_data(goa_icon, "inverted",
2214
2213
  /*isButtonDark*/
2215
- ctx[10]);
2214
+ ctx[11]);
2216
2215
  },
2217
2216
 
2218
2217
  m(target, anchor) {
@@ -2230,10 +2229,10 @@ function create_if_block_1$9(ctx) {
2230
2229
 
2231
2230
  if (dirty &
2232
2231
  /*isButtonDark*/
2233
- 1024) {
2232
+ 2048) {
2234
2233
  set_custom_element_data(goa_icon, "inverted",
2235
2234
  /*isButtonDark*/
2236
- ctx[10]);
2235
+ ctx[11]);
2237
2236
  }
2238
2237
  },
2239
2238
 
@@ -2244,7 +2243,7 @@ function create_if_block_1$9(ctx) {
2244
2243
  };
2245
2244
  }
2246
2245
 
2247
- function create_fragment$C(ctx) {
2246
+ function create_fragment$D(ctx) {
2248
2247
  let button;
2249
2248
  let button_class_value;
2250
2249
  let button_style_value;
@@ -2254,7 +2253,7 @@ function create_fragment$C(ctx) {
2254
2253
  function select_block_type(ctx, dirty) {
2255
2254
  if (
2256
2255
  /*type*/
2257
- ctx[0] === "start") return create_if_block$f;
2256
+ ctx[0] === "start") return create_if_block$g;
2258
2257
  return create_else_block$2;
2259
2258
  }
2260
2259
 
@@ -2283,7 +2282,7 @@ function create_fragment$C(ctx) {
2283
2282
  ctx[9]));
2284
2283
  button.disabled =
2285
2284
  /*isDisabled*/
2286
- ctx[11];
2285
+ ctx[10];
2287
2286
  attr(button, "data-testid",
2288
2287
  /*testid*/
2289
2288
  ctx[5]);
@@ -2302,7 +2301,11 @@ function create_fragment$C(ctx) {
2302
2301
  if_block.m(button, null);
2303
2302
 
2304
2303
  if (!mounted) {
2305
- dispose = [listen(button, "click", clickHandler), listen(button, "click", clickHandler)];
2304
+ dispose = [listen(button, "click",
2305
+ /*clickHandler*/
2306
+ ctx[12]), listen(button, "click",
2307
+ /*clickHandler*/
2308
+ ctx[12])];
2306
2309
  mounted = true;
2307
2310
  }
2308
2311
  },
@@ -2348,10 +2351,10 @@ function create_fragment$C(ctx) {
2348
2351
 
2349
2352
  if (dirty &
2350
2353
  /*isDisabled*/
2351
- 2048) {
2354
+ 1024) {
2352
2355
  button.disabled =
2353
2356
  /*isDisabled*/
2354
- ctx[11];
2357
+ ctx[10];
2355
2358
  }
2356
2359
 
2357
2360
  if (dirty &
@@ -2394,15 +2397,7 @@ function create_fragment$C(ctx) {
2394
2397
  };
2395
2398
  }
2396
2399
 
2397
- function clickHandler(e) {
2398
- this.dispatchEvent(new CustomEvent("_click", {
2399
- composed: true,
2400
- bubbles: true
2401
- }));
2402
- e.stopPropagation();
2403
- }
2404
-
2405
- function instance$w($$self, $$props, $$invalidate) {
2400
+ function instance$x($$self, $$props, $$invalidate) {
2406
2401
  let isDisabled;
2407
2402
  let isButtonDark;
2408
2403
  const [Types, validateType] = typeValidator("Button type", ["primary", "submit", "secondary", "tertiary", "start"], true);
@@ -2441,6 +2436,16 @@ function instance$w($$self, $$props, $$invalidate) {
2441
2436
  let {
2442
2437
  ml = null
2443
2438
  } = $$props;
2439
+
2440
+ function clickHandler(e) {
2441
+ if (!isDisabled) {
2442
+ this.dispatchEvent(new CustomEvent("_click", {
2443
+ composed: true,
2444
+ bubbles: true
2445
+ }));
2446
+ }
2447
+ }
2448
+
2444
2449
  onMount(() => {
2445
2450
  validateType(type);
2446
2451
  validateSize(size);
@@ -2451,7 +2456,7 @@ function instance$w($$self, $$props, $$invalidate) {
2451
2456
  if ('type' in $$props) $$invalidate(0, type = $$props.type);
2452
2457
  if ('size' in $$props) $$invalidate(1, size = $$props.size);
2453
2458
  if ('variant' in $$props) $$invalidate(2, variant = $$props.variant);
2454
- if ('disabled' in $$props) $$invalidate(12, disabled = $$props.disabled);
2459
+ if ('disabled' in $$props) $$invalidate(13, disabled = $$props.disabled);
2455
2460
  if ('leadingicon' in $$props) $$invalidate(3, leadingicon = $$props.leadingicon);
2456
2461
  if ('trailingicon' in $$props) $$invalidate(4, trailingicon = $$props.trailingicon);
2457
2462
  if ('testid' in $$props) $$invalidate(5, testid = $$props.testid);
@@ -2464,36 +2469,34 @@ function instance$w($$self, $$props, $$invalidate) {
2464
2469
  $$self.$$.update = () => {
2465
2470
  if ($$self.$$.dirty &
2466
2471
  /*disabled*/
2467
- 4096) {
2468
- $$invalidate(11, isDisabled = toBoolean(disabled));
2472
+ 8192) {
2473
+ $$invalidate(10, isDisabled = toBoolean(disabled));
2469
2474
  }
2470
2475
 
2471
2476
  if ($$self.$$.dirty &
2472
2477
  /*type*/
2473
2478
  1) {
2474
- $$invalidate(10, isButtonDark = type === "primary" || type === "start");
2479
+ $$invalidate(11, isButtonDark = type === "primary" || type === "start");
2475
2480
  }
2476
2481
  };
2477
2482
 
2478
- return [type, size, variant, leadingicon, trailingicon, testid, mt, mr, mb, ml, isButtonDark, isDisabled, disabled];
2483
+ return [type, size, variant, leadingicon, trailingicon, testid, mt, mr, mb, ml, isDisabled, isButtonDark, clickHandler, disabled];
2479
2484
  }
2480
2485
 
2481
2486
  class Button extends SvelteElement {
2482
2487
  constructor(options) {
2483
2488
  super();
2484
- 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,
2485
- border-color 0.2s ease-in-out}.text{padding-bottom:var(
2486
- --font-valign-fix
2487
- )}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>`;
2489
+ 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,
2490
+ 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>`;
2488
2491
  init(this, {
2489
2492
  target: this.shadowRoot,
2490
2493
  props: attribute_to_object(this.attributes),
2491
2494
  customElement: true
2492
- }, instance$w, create_fragment$C, safe_not_equal, {
2495
+ }, instance$x, create_fragment$D, safe_not_equal, {
2493
2496
  type: 0,
2494
2497
  size: 1,
2495
2498
  variant: 2,
2496
- disabled: 12,
2499
+ disabled: 13,
2497
2500
  leadingicon: 3,
2498
2501
  trailingicon: 4,
2499
2502
  testid: 5,
@@ -2553,7 +2556,7 @@ class Button extends SvelteElement {
2553
2556
  }
2554
2557
 
2555
2558
  get disabled() {
2556
- return this.$$.ctx[12];
2559
+ return this.$$.ctx[13];
2557
2560
  }
2558
2561
 
2559
2562
  set disabled(disabled) {
@@ -2645,7 +2648,7 @@ class Button extends SvelteElement {
2645
2648
  customElements.define("goa-button", Button);
2646
2649
  /* libs/web-components/src/components/button-group/ButtonGroup.svelte generated by Svelte v3.51.0 */
2647
2650
 
2648
- function create_fragment$B(ctx) {
2651
+ function create_fragment$C(ctx) {
2649
2652
  let div;
2650
2653
  let slot;
2651
2654
  let div_style_value;
@@ -2715,7 +2718,7 @@ function create_fragment$B(ctx) {
2715
2718
  };
2716
2719
  }
2717
2720
 
2718
- function instance$v($$self, $$props, $$invalidate) {
2721
+ function instance$w($$self, $$props, $$invalidate) {
2719
2722
  let _alignment;
2720
2723
 
2721
2724
  let {
@@ -2774,12 +2777,12 @@ function instance$v($$self, $$props, $$invalidate) {
2774
2777
  class ButtonGroup extends SvelteElement {
2775
2778
  constructor(options) {
2776
2779
  super();
2777
- 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>`;
2780
+ 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>`;
2778
2781
  init(this, {
2779
2782
  target: this.shadowRoot,
2780
2783
  props: attribute_to_object(this.attributes),
2781
2784
  customElement: true
2782
- }, instance$v, create_fragment$B, safe_not_equal, {
2785
+ }, instance$w, create_fragment$C, safe_not_equal, {
2783
2786
  alignment: 7,
2784
2787
  gap: 0,
2785
2788
  testid: 1,
@@ -2887,7 +2890,7 @@ class ButtonGroup extends SvelteElement {
2887
2890
  customElements.define("goa-button-group", ButtonGroup);
2888
2891
  /* libs/web-components/src/components/callout/Callout.svelte generated by Svelte v3.51.0 */
2889
2892
 
2890
- function create_if_block$e(ctx) {
2893
+ function create_if_block$f(ctx) {
2891
2894
  let h3;
2892
2895
  let t;
2893
2896
  return {
@@ -2918,7 +2921,7 @@ function create_if_block$e(ctx) {
2918
2921
  };
2919
2922
  }
2920
2923
 
2921
- function create_fragment$A(ctx) {
2924
+ function create_fragment$B(ctx) {
2922
2925
  let div;
2923
2926
  let span0;
2924
2927
  let goa_icon;
@@ -2931,7 +2934,7 @@ function create_fragment$A(ctx) {
2931
2934
  let div_style_value;
2932
2935
  let if_block =
2933
2936
  /*heading*/
2934
- ctx[5] && create_if_block$e(ctx);
2937
+ ctx[5] && create_if_block$f(ctx);
2935
2938
  return {
2936
2939
  c() {
2937
2940
  div = element("div");
@@ -3010,7 +3013,7 @@ function create_fragment$A(ctx) {
3010
3013
  if (if_block) {
3011
3014
  if_block.p(ctx, dirty);
3012
3015
  } else {
3013
- if_block = create_if_block$e(ctx);
3016
+ if_block = create_if_block$f(ctx);
3014
3017
  if_block.c();
3015
3018
  if_block.m(span1, t1);
3016
3019
  }
@@ -3053,7 +3056,7 @@ function create_fragment$A(ctx) {
3053
3056
  };
3054
3057
  }
3055
3058
 
3056
- function instance$u($$self, $$props, $$invalidate) {
3059
+ function instance$v($$self, $$props, $$invalidate) {
3057
3060
  let iconType;
3058
3061
  const [Types, validateType] = typeValidator("Callout type", ["emergency", "important", "information", "event", "success"], true);
3059
3062
  let {
@@ -3105,12 +3108,12 @@ function instance$u($$self, $$props, $$invalidate) {
3105
3108
  class Callout extends SvelteElement {
3106
3109
  constructor(options) {
3107
3110
  super();
3108
- 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>`;
3111
+ 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>`;
3109
3112
  init(this, {
3110
3113
  target: this.shadowRoot,
3111
3114
  props: attribute_to_object(this.attributes),
3112
3115
  customElement: true
3113
- }, instance$u, create_fragment$A, safe_not_equal, {
3116
+ }, instance$v, create_fragment$B, safe_not_equal, {
3114
3117
  mt: 0,
3115
3118
  mr: 1,
3116
3119
  mb: 2,
@@ -3218,7 +3221,7 @@ class Callout extends SvelteElement {
3218
3221
  customElements.define("goa-callout", Callout);
3219
3222
  /* libs/web-components/src/components/card-actions/CardActions.svelte generated by Svelte v3.51.0 */
3220
3223
 
3221
- function create_fragment$z(ctx) {
3224
+ function create_fragment$A(ctx) {
3222
3225
  let goa_card_content;
3223
3226
  return {
3224
3227
  c() {
@@ -3249,7 +3252,7 @@ class CardActions extends SvelteElement {
3249
3252
  target: this.shadowRoot,
3250
3253
  props: attribute_to_object(this.attributes),
3251
3254
  customElement: true
3252
- }, null, create_fragment$z, safe_not_equal, {}, null);
3255
+ }, null, create_fragment$A, safe_not_equal, {}, null);
3253
3256
 
3254
3257
  if (options) {
3255
3258
  if (options.target) {
@@ -3263,7 +3266,7 @@ class CardActions extends SvelteElement {
3263
3266
  customElements.define("goa-card-actions", CardActions);
3264
3267
  /* libs/web-components/src/components/card/Card.svelte generated by Svelte v3.51.0 */
3265
3268
 
3266
- function create_fragment$y(ctx) {
3269
+ function create_fragment$z(ctx) {
3267
3270
  let div;
3268
3271
  let slot;
3269
3272
  let div_style_value;
@@ -3290,7 +3293,7 @@ function create_fragment$y(ctx) {
3290
3293
  /*ml*/
3291
3294
  ctx[6]) + " " + (
3292
3295
  /*elevation*/
3293
- ctx[0] === 0 ? `border: 1px solid var(--color-gray-200);` : `box-shadow: var(--shadow-${
3296
+ ctx[0] === 0 ? `border: 1px solid var(--goa-color-greyscale-200);` : `box-shadow: var(--shadow-${
3294
3297
  /*elevation*/
3295
3298
  ctx[0]});`) + "");
3296
3299
  },
@@ -3325,7 +3328,7 @@ function create_fragment$y(ctx) {
3325
3328
  /*ml*/
3326
3329
  ctx[6]) + " " + (
3327
3330
  /*elevation*/
3328
- ctx[0] === 0 ? `border: 1px solid var(--color-gray-200);` : `box-shadow: var(--shadow-${
3331
+ ctx[0] === 0 ? `border: 1px solid var(--goa-color-greyscale-200);` : `box-shadow: var(--shadow-${
3329
3332
  /*elevation*/
3330
3333
  ctx[0]});`) + "")) {
3331
3334
  attr(div, "style", div_style_value);
@@ -3342,7 +3345,7 @@ function create_fragment$y(ctx) {
3342
3345
  };
3343
3346
  }
3344
3347
 
3345
- function instance$t($$self, $$props, $$invalidate) {
3348
+ function instance$u($$self, $$props, $$invalidate) {
3346
3349
  let {
3347
3350
  elevation = 0
3348
3351
  } = $$props;
@@ -3385,12 +3388,12 @@ function instance$t($$self, $$props, $$invalidate) {
3385
3388
  class Card extends SvelteElement {
3386
3389
  constructor(options) {
3387
3390
  super();
3388
- 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>`;
3391
+ 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>`;
3389
3392
  init(this, {
3390
3393
  target: this.shadowRoot,
3391
3394
  props: attribute_to_object(this.attributes),
3392
3395
  customElement: true
3393
- }, instance$t, create_fragment$y, safe_not_equal, {
3396
+ }, instance$u, create_fragment$z, safe_not_equal, {
3394
3397
  elevation: 0,
3395
3398
  width: 1,
3396
3399
  height: 2,
@@ -3510,7 +3513,7 @@ class Card extends SvelteElement {
3510
3513
  customElements.define("goa-card", Card);
3511
3514
  /* libs/web-components/src/components/card-content/CardContent.svelte generated by Svelte v3.51.0 */
3512
3515
 
3513
- function create_fragment$x(ctx) {
3516
+ function create_fragment$y(ctx) {
3514
3517
  let div;
3515
3518
  return {
3516
3519
  c() {
@@ -3538,12 +3541,12 @@ function create_fragment$x(ctx) {
3538
3541
  class CardContent extends SvelteElement {
3539
3542
  constructor(options) {
3540
3543
  super();
3541
- this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.card-content{padding:1rem}</style>`;
3544
+ this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.card-content{padding:1rem}</style>`;
3542
3545
  init(this, {
3543
3546
  target: this.shadowRoot,
3544
3547
  props: attribute_to_object(this.attributes),
3545
3548
  customElement: true
3546
- }, null, create_fragment$x, safe_not_equal, {}, null);
3549
+ }, null, create_fragment$y, safe_not_equal, {}, null);
3547
3550
 
3548
3551
  if (options) {
3549
3552
  if (options.target) {
@@ -3557,7 +3560,7 @@ class CardContent extends SvelteElement {
3557
3560
  customElements.define("goa-card-content", CardContent);
3558
3561
  /* libs/web-components/src/components/card-group/CardGroup.svelte generated by Svelte v3.51.0 */
3559
3562
 
3560
- function create_fragment$w(ctx) {
3563
+ function create_fragment$x(ctx) {
3561
3564
  let div;
3562
3565
  return {
3563
3566
  c() {
@@ -3585,12 +3588,12 @@ function create_fragment$w(ctx) {
3585
3588
  class CardGroup extends SvelteElement {
3586
3589
  constructor(options) {
3587
3590
  super();
3588
- 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>`;
3591
+ 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>`;
3589
3592
  init(this, {
3590
3593
  target: this.shadowRoot,
3591
3594
  props: attribute_to_object(this.attributes),
3592
3595
  customElement: true
3593
- }, null, create_fragment$w, safe_not_equal, {}, null);
3596
+ }, null, create_fragment$x, safe_not_equal, {}, null);
3594
3597
 
3595
3598
  if (options) {
3596
3599
  if (options.target) {
@@ -3604,7 +3607,7 @@ class CardGroup extends SvelteElement {
3604
3607
  customElements.define("goa-card-group", CardGroup);
3605
3608
  /* libs/web-components/src/components/card-image/CardImage.svelte generated by Svelte v3.51.0 */
3606
3609
 
3607
- function create_fragment$v(ctx) {
3610
+ function create_fragment$w(ctx) {
3608
3611
  let div;
3609
3612
  return {
3610
3613
  c() {
@@ -3652,7 +3655,7 @@ function create_fragment$v(ctx) {
3652
3655
  };
3653
3656
  }
3654
3657
 
3655
- function instance$s($$self, $$props, $$invalidate) {
3658
+ function instance$t($$self, $$props, $$invalidate) {
3656
3659
  let {
3657
3660
  src
3658
3661
  } = $$props;
@@ -3671,12 +3674,12 @@ function instance$s($$self, $$props, $$invalidate) {
3671
3674
  class CardImage extends SvelteElement {
3672
3675
  constructor(options) {
3673
3676
  super();
3674
- this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}</style>`;
3677
+ this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}</style>`;
3675
3678
  init(this, {
3676
3679
  target: this.shadowRoot,
3677
3680
  props: attribute_to_object(this.attributes),
3678
3681
  customElement: true
3679
- }, instance$s, create_fragment$v, safe_not_equal, {
3682
+ }, instance$t, create_fragment$w, safe_not_equal, {
3680
3683
  src: 0,
3681
3684
  height: 1
3682
3685
  }, null);
@@ -3751,7 +3754,7 @@ function create_if_block_1$8(ctx) {
3751
3754
  } // (68:4) {#if isIndeterminate}
3752
3755
 
3753
3756
 
3754
- function create_if_block$d(ctx) {
3757
+ function create_if_block$e(ctx) {
3755
3758
  let svg;
3756
3759
  let rect;
3757
3760
  return {
@@ -3778,7 +3781,7 @@ function create_if_block$d(ctx) {
3778
3781
  };
3779
3782
  }
3780
3783
 
3781
- function create_fragment$u(ctx) {
3784
+ function create_fragment$v(ctx) {
3782
3785
  let label;
3783
3786
  let div0;
3784
3787
  let input;
@@ -3796,7 +3799,7 @@ function create_fragment$u(ctx) {
3796
3799
  function select_block_type(ctx, dirty) {
3797
3800
  if (
3798
3801
  /*isIndeterminate*/
3799
- ctx[10]) return create_if_block$d;
3802
+ ctx[10]) return create_if_block$e;
3800
3803
  if (
3801
3804
  /*isChecked*/
3802
3805
  ctx[9]) return create_if_block_1$8;
@@ -4027,7 +4030,7 @@ function create_fragment$u(ctx) {
4027
4030
  };
4028
4031
  }
4029
4032
 
4030
- function instance$r($$self, $$props, $$invalidate) {
4033
+ function instance$s($$self, $$props, $$invalidate) {
4031
4034
  let isDisabled;
4032
4035
  let isError;
4033
4036
  let isChecked;
@@ -4137,12 +4140,12 @@ function instance$r($$self, $$props, $$invalidate) {
4137
4140
  class Checkbox extends SvelteElement {
4138
4141
  constructor(options) {
4139
4142
  super();
4140
- 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>`;
4143
+ 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>`;
4141
4144
  init(this, {
4142
4145
  target: this.shadowRoot,
4143
4146
  props: attribute_to_object(this.attributes),
4144
4147
  customElement: true
4145
- }, instance$r, create_fragment$u, safe_not_equal, {
4148
+ }, instance$s, create_fragment$v, safe_not_equal, {
4146
4149
  name: 0,
4147
4150
  checked: 14,
4148
4151
  text: 1,
@@ -4344,7 +4347,7 @@ function create_if_block_1$7(ctx) {
4344
4347
  } // (54:2) {#if _deletable}
4345
4348
 
4346
4349
 
4347
- function create_if_block$c(ctx) {
4350
+ function create_if_block$d(ctx) {
4348
4351
  let goa_icon;
4349
4352
  let goa_icon_fillcolor_value;
4350
4353
  let goa_icon_opacity_value;
@@ -4357,9 +4360,9 @@ function create_if_block$c(ctx) {
4357
4360
  set_custom_element_data(goa_icon, "type", "close-circle");
4358
4361
  set_custom_element_data(goa_icon, "fillcolor", goa_icon_fillcolor_value =
4359
4362
  /*_error*/
4360
- ctx[10] ? "var(--goa-color-status-emergency)" :
4363
+ ctx[10] ? "var(--goa-color-emergency-default)" :
4361
4364
  /*_hovering*/
4362
- ctx[9] ? "var(--goa-color-interactive--hover)" : "var(--color-gray-600)");
4365
+ ctx[9] ? "var(--goa-color-interactive-hover)" : "var(--goa-color-greyscale-700)");
4363
4366
  set_custom_element_data(goa_icon, "opacity", goa_icon_opacity_value =
4364
4367
  /*_error*/
4365
4368
  ctx[10] ?
@@ -4376,9 +4379,9 @@ function create_if_block$c(ctx) {
4376
4379
  /*_error, _hovering*/
4377
4380
  1536 && goa_icon_fillcolor_value !== (goa_icon_fillcolor_value =
4378
4381
  /*_error*/
4379
- ctx[10] ? "var(--goa-color-status-emergency)" :
4382
+ ctx[10] ? "var(--goa-color-emergency-default)" :
4380
4383
  /*_hovering*/
4381
- ctx[9] ? "var(--goa-color-interactive--hover)" : "var(--color-gray-600)")) {
4384
+ ctx[9] ? "var(--goa-color-interactive-hover)" : "var(--goa-color-greyscale-700)")) {
4382
4385
  set_custom_element_data(goa_icon, "fillcolor", goa_icon_fillcolor_value);
4383
4386
  }
4384
4387
 
@@ -4400,7 +4403,7 @@ function create_if_block$c(ctx) {
4400
4403
  };
4401
4404
  }
4402
4405
 
4403
- function create_fragment$t(ctx) {
4406
+ function create_fragment$u(ctx) {
4404
4407
  let div1;
4405
4408
  let t0;
4406
4409
  let div0;
@@ -4414,7 +4417,7 @@ function create_fragment$t(ctx) {
4414
4417
  ctx[4] && create_if_block_1$7(ctx);
4415
4418
  let if_block1 =
4416
4419
  /*_deletable*/
4417
- ctx[11] && create_if_block$c(ctx);
4420
+ ctx[11] && create_if_block$d(ctx);
4418
4421
  return {
4419
4422
  c() {
4420
4423
  div1 = element("div");
@@ -4509,7 +4512,7 @@ function create_fragment$t(ctx) {
4509
4512
  if (if_block1) {
4510
4513
  if_block1.p(ctx, dirty);
4511
4514
  } else {
4512
- if_block1 = create_if_block$c(ctx);
4515
+ if_block1 = create_if_block$d(ctx);
4513
4516
  if_block1.c();
4514
4517
  if_block1.m(div1, null);
4515
4518
  }
@@ -4582,7 +4585,7 @@ function create_fragment$t(ctx) {
4582
4585
  };
4583
4586
  }
4584
4587
 
4585
- function instance$q($$self, $$props, $$invalidate) {
4588
+ function instance$r($$self, $$props, $$invalidate) {
4586
4589
  let {
4587
4590
  mt = null
4588
4591
  } = $$props;
@@ -4678,12 +4681,12 @@ function instance$q($$self, $$props, $$invalidate) {
4678
4681
  class Chip extends SvelteElement {
4679
4682
  constructor(options) {
4680
4683
  super();
4681
- 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>`;
4684
+ 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>`;
4682
4685
  init(this, {
4683
4686
  target: this.shadowRoot,
4684
4687
  props: attribute_to_object(this.attributes),
4685
4688
  customElement: true
4686
- }, instance$q, create_fragment$t, safe_not_equal, {
4689
+ }, instance$r, create_fragment$u, safe_not_equal, {
4687
4690
  mt: 0,
4688
4691
  mr: 1,
4689
4692
  mb: 2,
@@ -4940,7 +4943,7 @@ function noscroll(_node, opts) {
4940
4943
  /* libs/web-components/src/components/circular-progress/CircularProgress.svelte generated by Svelte v3.51.0 */
4941
4944
 
4942
4945
 
4943
- function create_if_block$b(ctx) {
4946
+ function create_if_block$c(ctx) {
4944
4947
  let current_block_type_index;
4945
4948
  let if_block;
4946
4949
  let if_block_anchor;
@@ -5311,12 +5314,12 @@ function create_if_block_2$5(ctx) {
5311
5314
  };
5312
5315
  }
5313
5316
 
5314
- function create_fragment$s(ctx) {
5317
+ function create_fragment$t(ctx) {
5315
5318
  let if_block_anchor;
5316
5319
  let current;
5317
5320
  let if_block =
5318
5321
  /*isVisible*/
5319
- ctx[5] && create_if_block$b(ctx);
5322
+ ctx[5] && create_if_block$c(ctx);
5320
5323
  return {
5321
5324
  c() {
5322
5325
  if (if_block) if_block.c();
@@ -5343,7 +5346,7 @@ function create_fragment$s(ctx) {
5343
5346
  transition_in(if_block, 1);
5344
5347
  }
5345
5348
  } else {
5346
- if_block = create_if_block$b(ctx);
5349
+ if_block = create_if_block$c(ctx);
5347
5350
  if_block.c();
5348
5351
  transition_in(if_block, 1);
5349
5352
  if_block.m(if_block_anchor.parentNode, if_block_anchor);
@@ -5376,7 +5379,7 @@ function create_fragment$s(ctx) {
5376
5379
  };
5377
5380
  }
5378
5381
 
5379
- function instance$p($$self, $$props, $$invalidate) {
5382
+ function instance$q($$self, $$props, $$invalidate) {
5380
5383
  let isVisible;
5381
5384
  const [Variants, validateVariant] = typeValidator("Circular progress variant", ["fullscreen", "inline"]);
5382
5385
  const [Sizes, validateSize] = typeValidator("Button size", ["small", "large"]);
@@ -5428,12 +5431,12 @@ function instance$p($$self, $$props, $$invalidate) {
5428
5431
  class CircularProgress extends SvelteElement {
5429
5432
  constructor(options) {
5430
5433
  super();
5431
- 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>`;
5434
+ 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>`;
5432
5435
  init(this, {
5433
5436
  target: this.shadowRoot,
5434
5437
  props: attribute_to_object(this.attributes),
5435
5438
  customElement: true
5436
- }, instance$p, create_fragment$s, safe_not_equal, {
5439
+ }, instance$q, create_fragment$t, safe_not_equal, {
5437
5440
  variant: 6,
5438
5441
  size: 7,
5439
5442
  message: 0,
@@ -5517,7 +5520,7 @@ class CircularProgress extends SvelteElement {
5517
5520
  customElements.define("goa-circular-progress", CircularProgress);
5518
5521
  /* libs/web-components/src/components/container/Container.svelte generated by Svelte v3.51.0 */
5519
5522
 
5520
- function create_fragment$r(ctx) {
5523
+ function create_fragment$s(ctx) {
5521
5524
  let div3;
5522
5525
  let header;
5523
5526
  let div0;
@@ -5642,7 +5645,7 @@ function create_fragment$r(ctx) {
5642
5645
  };
5643
5646
  }
5644
5647
 
5645
- function instance$o($$self, $$props, $$invalidate) {
5648
+ function instance$p($$self, $$props, $$invalidate) {
5646
5649
  const [Types, validateType] = typeValidator("Container type", ["interactive", "info", "error", "success", "important", "non-interactive"]);
5647
5650
  const [Accents, validateAccent] = typeValidator("Container accent", ["thick", "thin", "filled"]);
5648
5651
  const [Paddings, validatePadding] = typeValidator("Container padding", ["relaxed", "compact"]);
@@ -5693,12 +5696,12 @@ function instance$o($$self, $$props, $$invalidate) {
5693
5696
  class Container extends SvelteElement {
5694
5697
  constructor(options) {
5695
5698
  super();
5696
- 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>`;
5699
+ 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>`;
5697
5700
  init(this, {
5698
5701
  target: this.shadowRoot,
5699
5702
  props: attribute_to_object(this.attributes),
5700
5703
  customElement: true
5701
- }, instance$o, create_fragment$r, safe_not_equal, {
5704
+ }, instance$p, create_fragment$s, safe_not_equal, {
5702
5705
  type: 0,
5703
5706
  accent: 1,
5704
5707
  padding: 2,
@@ -5818,7 +5821,7 @@ class Container extends SvelteElement {
5818
5821
  customElements.define("goa-container", Container);
5819
5822
  /* libs/web-components/src/components/divider/Divider.svelte generated by Svelte v3.51.0 */
5820
5823
 
5821
- function create_fragment$q(ctx) {
5824
+ function create_fragment$r(ctx) {
5822
5825
  let hr;
5823
5826
  let hr_style_value;
5824
5827
  return {
@@ -5877,7 +5880,7 @@ function create_fragment$q(ctx) {
5877
5880
  };
5878
5881
  }
5879
5882
 
5880
- function instance$n($$self, $$props, $$invalidate) {
5883
+ function instance$o($$self, $$props, $$invalidate) {
5881
5884
  let {
5882
5885
  testid = ""
5883
5886
  } = $$props;
@@ -5908,12 +5911,12 @@ function instance$n($$self, $$props, $$invalidate) {
5908
5911
  class Divider extends SvelteElement {
5909
5912
  constructor(options) {
5910
5913
  super();
5911
- this.shadowRoot.innerHTML = `<style>hr{padding:0;margin:0;height:1px;background-color:var(--color-gray-200);border:none}</style>`;
5914
+ this.shadowRoot.innerHTML = `<style>hr{padding:0;margin:0;height:1px;background-color:var(--goa-color-greyscale-200);border:none}</style>`;
5912
5915
  init(this, {
5913
5916
  target: this.shadowRoot,
5914
5917
  props: attribute_to_object(this.attributes),
5915
5918
  customElement: true
5916
- }, instance$n, create_fragment$q, safe_not_equal, {
5919
+ }, instance$o, create_fragment$r, safe_not_equal, {
5917
5920
  testid: 0,
5918
5921
  mt: 1,
5919
5922
  mr: 2,
@@ -5999,25 +6002,25 @@ customElements.define("goa-divider", Divider);
5999
6002
 
6000
6003
  function get_each_context_1(ctx, list, i) {
6001
6004
  const child_ctx = ctx.slice();
6002
- child_ctx[48] = list[i];
6003
- child_ctx[52] = i;
6005
+ child_ctx[49] = list[i];
6006
+ child_ctx[53] = i;
6004
6007
  return child_ctx;
6005
6008
  }
6006
6009
 
6007
6010
  function get_each_context$4(ctx, list, i) {
6008
6011
  const child_ctx = ctx.slice();
6009
- child_ctx[48] = list[i];
6012
+ child_ctx[49] = list[i];
6010
6013
  return child_ctx;
6011
- } // (244:2) {:else}
6014
+ } // (256:2) {:else}
6012
6015
 
6013
6016
 
6014
6017
  function create_else_block$1(ctx) {
6015
6018
  let t0;
6016
- let slot;
6017
- let t1;
6018
6019
  let goa_input;
6019
6020
  let goa_input_arialabel_value;
6020
6021
  let goa_input_data_testid_value;
6022
+ let t1;
6023
+ let slot;
6021
6024
  let t2;
6022
6025
  let ul;
6023
6026
  let each_blocks = [];
@@ -6034,7 +6037,7 @@ function create_else_block$1(ctx) {
6034
6037
 
6035
6038
  const get_key = ctx =>
6036
6039
  /*index*/
6037
- ctx[52];
6040
+ ctx[53];
6038
6041
 
6039
6042
  for (let i = 0; i < each_value_1.length; i += 1) {
6040
6043
  let child_ctx = get_each_context_1(ctx, each_value_1, i);
@@ -6046,9 +6049,9 @@ function create_else_block$1(ctx) {
6046
6049
  c() {
6047
6050
  if (if_block) if_block.c();
6048
6051
  t0 = space();
6049
- slot = element("slot");
6050
- t1 = space();
6051
6052
  goa_input = element("goa-input");
6053
+ t1 = space();
6054
+ slot = element("slot");
6052
6055
  t2 = space();
6053
6056
  ul = element("ul");
6054
6057
 
@@ -6110,9 +6113,9 @@ function create_else_block$1(ctx) {
6110
6113
  m(target, anchor) {
6111
6114
  if (if_block) if_block.m(target, anchor);
6112
6115
  insert(target, t0, anchor);
6113
- insert(target, slot, anchor);
6114
- insert(target, t1, anchor);
6115
6116
  insert(target, goa_input, anchor);
6117
+ insert(target, t1, anchor);
6118
+ insert(target, slot, anchor);
6116
6119
  insert(target, t2, anchor);
6117
6120
  insert(target, ul, anchor);
6118
6121
 
@@ -6259,9 +6262,9 @@ function create_else_block$1(ctx) {
6259
6262
  d(detaching) {
6260
6263
  if (if_block) if_block.d(detaching);
6261
6264
  if (detaching) detach(t0);
6262
- if (detaching) detach(slot);
6263
- if (detaching) detach(t1);
6264
6265
  if (detaching) detach(goa_input);
6266
+ if (detaching) detach(t1);
6267
+ if (detaching) detach(slot);
6265
6268
  if (detaching) detach(t2);
6266
6269
  if (detaching) detach(ul);
6267
6270
 
@@ -6277,10 +6280,10 @@ function create_else_block$1(ctx) {
6277
6280
  }
6278
6281
 
6279
6282
  };
6280
- } // (225:2) {#if _native}
6283
+ } // (237:2) {#if _native}
6281
6284
 
6282
6285
 
6283
- function create_if_block$a(ctx) {
6286
+ function create_if_block$b(ctx) {
6284
6287
  let select;
6285
6288
  let slot;
6286
6289
  let select_aria_label_value;
@@ -6403,7 +6406,7 @@ function create_if_block$a(ctx) {
6403
6406
  }
6404
6407
 
6405
6408
  };
6406
- } // (245:4) {#if _isMenuVisible}
6409
+ } // (257:4) {#if _isMenuVisible}
6407
6410
 
6408
6411
 
6409
6412
  function create_if_block_1$5(ctx) {
@@ -6448,16 +6451,16 @@ function create_if_block_1$5(ctx) {
6448
6451
  }
6449
6452
 
6450
6453
  };
6451
- } // (288:6) {#each _options as option, index (index)}
6454
+ } // (300:6) {#each _options as option, index (index)}
6452
6455
 
6453
6456
 
6454
6457
  function create_each_block_1(key_1, ctx) {
6455
6458
  let li;
6456
6459
  let t0_value = (
6457
6460
  /*option*/
6458
- ctx[48].label ||
6461
+ ctx[49].label ||
6459
6462
  /*option*/
6460
- ctx[48].value) + "";
6463
+ ctx[49].value) + "";
6461
6464
  let t0;
6462
6465
  let t1;
6463
6466
  let li_id_value;
@@ -6475,7 +6478,7 @@ function create_each_block_1(key_1, ctx) {
6475
6478
  /*click_handler*/
6476
6479
  ctx[32](
6477
6480
  /*option*/
6478
- ctx[48])
6481
+ ctx[49])
6479
6482
  );
6480
6483
  }
6481
6484
 
@@ -6489,40 +6492,40 @@ function create_each_block_1(key_1, ctx) {
6489
6492
  t1 = space();
6490
6493
  attr(li, "id", li_id_value =
6491
6494
  /*option*/
6492
- ctx[48].label);
6495
+ ctx[49].label);
6493
6496
  attr(li, "role", "option");
6494
6497
  attr(li, "aria-label", li_aria_label_value =
6495
6498
  /*option*/
6496
- ctx[48].label ||
6499
+ ctx[49].label ||
6497
6500
  /*option*/
6498
- ctx[48].value);
6501
+ ctx[49].value);
6499
6502
  attr(li, "aria-selected", li_aria_selected_value =
6500
6503
  /*_values*/
6501
6504
  ctx[12].includes(
6502
6505
  /*option*/
6503
- ctx[48].value) ? "true" : "false");
6506
+ ctx[49].value) ? "true" : "false");
6504
6507
  attr(li, "class", "dropdown-item");
6505
6508
  attr(li, "data-testid", li_data_testid_value = `dropdown-item-${
6506
6509
  /*option*/
6507
- ctx[48].value}`);
6510
+ ctx[49].value}`);
6508
6511
  attr(li, "data-index", li_data_index_value =
6509
6512
  /*index*/
6510
- ctx[52]);
6513
+ ctx[53]);
6511
6514
  attr(li, "data-value", li_data_value_value =
6512
6515
  /*option*/
6513
- ctx[48].value);
6516
+ ctx[49].value);
6514
6517
  attr(li, "style", li_style_value = `display: ${"block"}`);
6515
6518
  toggle_class(li, "dropdown-item--disabled", false);
6516
6519
  toggle_class(li, "dropdown-item--tabbed",
6517
6520
  /*index*/
6518
- ctx[52] ===
6521
+ ctx[53] ===
6519
6522
  /*_highlightedIndex*/
6520
6523
  ctx[16]);
6521
6524
  toggle_class(li, "dropdown-item--selected",
6522
6525
  /*_values*/
6523
6526
  ctx[12].includes(
6524
6527
  /*option*/
6525
- ctx[48].value));
6528
+ ctx[49].value));
6526
6529
  this.first = li;
6527
6530
  },
6528
6531
 
@@ -6543,15 +6546,15 @@ function create_each_block_1(key_1, ctx) {
6543
6546
  /*_options*/
6544
6547
  8192 && t0_value !== (t0_value = (
6545
6548
  /*option*/
6546
- ctx[48].label ||
6549
+ ctx[49].label ||
6547
6550
  /*option*/
6548
- ctx[48].value) + "")) set_data(t0, t0_value);
6551
+ ctx[49].value) + "")) set_data(t0, t0_value);
6549
6552
 
6550
6553
  if (dirty[0] &
6551
6554
  /*_options*/
6552
6555
  8192 && li_id_value !== (li_id_value =
6553
6556
  /*option*/
6554
- ctx[48].label)) {
6557
+ ctx[49].label)) {
6555
6558
  attr(li, "id", li_id_value);
6556
6559
  }
6557
6560
 
@@ -6559,9 +6562,9 @@ function create_each_block_1(key_1, ctx) {
6559
6562
  /*_options*/
6560
6563
  8192 && li_aria_label_value !== (li_aria_label_value =
6561
6564
  /*option*/
6562
- ctx[48].label ||
6565
+ ctx[49].label ||
6563
6566
  /*option*/
6564
- ctx[48].value)) {
6567
+ ctx[49].value)) {
6565
6568
  attr(li, "aria-label", li_aria_label_value);
6566
6569
  }
6567
6570
 
@@ -6571,7 +6574,7 @@ function create_each_block_1(key_1, ctx) {
6571
6574
  /*_values*/
6572
6575
  ctx[12].includes(
6573
6576
  /*option*/
6574
- ctx[48].value) ? "true" : "false")) {
6577
+ ctx[49].value) ? "true" : "false")) {
6575
6578
  attr(li, "aria-selected", li_aria_selected_value);
6576
6579
  }
6577
6580
 
@@ -6579,7 +6582,7 @@ function create_each_block_1(key_1, ctx) {
6579
6582
  /*_options*/
6580
6583
  8192 && li_data_testid_value !== (li_data_testid_value = `dropdown-item-${
6581
6584
  /*option*/
6582
- ctx[48].value}`)) {
6585
+ ctx[49].value}`)) {
6583
6586
  attr(li, "data-testid", li_data_testid_value);
6584
6587
  }
6585
6588
 
@@ -6587,7 +6590,7 @@ function create_each_block_1(key_1, ctx) {
6587
6590
  /*_options*/
6588
6591
  8192 && li_data_index_value !== (li_data_index_value =
6589
6592
  /*index*/
6590
- ctx[52])) {
6593
+ ctx[53])) {
6591
6594
  attr(li, "data-index", li_data_index_value);
6592
6595
  }
6593
6596
 
@@ -6595,7 +6598,7 @@ function create_each_block_1(key_1, ctx) {
6595
6598
  /*_options*/
6596
6599
  8192 && li_data_value_value !== (li_data_value_value =
6597
6600
  /*option*/
6598
- ctx[48].value)) {
6601
+ ctx[49].value)) {
6599
6602
  attr(li, "data-value", li_data_value_value);
6600
6603
  }
6601
6604
 
@@ -6604,7 +6607,7 @@ function create_each_block_1(key_1, ctx) {
6604
6607
  73728) {
6605
6608
  toggle_class(li, "dropdown-item--tabbed",
6606
6609
  /*index*/
6607
- ctx[52] ===
6610
+ ctx[53] ===
6608
6611
  /*_highlightedIndex*/
6609
6612
  ctx[16]);
6610
6613
  }
@@ -6616,7 +6619,7 @@ function create_each_block_1(key_1, ctx) {
6616
6619
  /*_values*/
6617
6620
  ctx[12].includes(
6618
6621
  /*option*/
6619
- ctx[48].value));
6622
+ ctx[49].value));
6620
6623
  }
6621
6624
  },
6622
6625
 
@@ -6627,14 +6630,14 @@ function create_each_block_1(key_1, ctx) {
6627
6630
  }
6628
6631
 
6629
6632
  };
6630
- } // (234:6) {#each _options as option}
6633
+ } // (246:6) {#each _options as option}
6631
6634
 
6632
6635
 
6633
6636
  function create_each_block$4(ctx) {
6634
6637
  let option;
6635
6638
  let t0_value =
6636
6639
  /*option*/
6637
- ctx[48].label + "";
6640
+ ctx[49].label + "";
6638
6641
  let t0;
6639
6642
  let t1;
6640
6643
  let option_selected_value;
@@ -6647,14 +6650,14 @@ function create_each_block$4(ctx) {
6647
6650
  t1 = space();
6648
6651
  option.selected = option_selected_value =
6649
6652
  /*option*/
6650
- ctx[48].selected;
6653
+ ctx[49].selected;
6651
6654
  option.__value = option_value_value =
6652
6655
  /*option*/
6653
- ctx[48].value;
6656
+ ctx[49].value;
6654
6657
  option.value = option.__value;
6655
6658
  attr(option, "aria-label", option_aria_label_value =
6656
6659
  /*option*/
6657
- ctx[48].label);
6660
+ ctx[49].label);
6658
6661
  },
6659
6662
 
6660
6663
  m(target, anchor) {
@@ -6668,13 +6671,13 @@ function create_each_block$4(ctx) {
6668
6671
  /*_options*/
6669
6672
  8192 && t0_value !== (t0_value =
6670
6673
  /*option*/
6671
- ctx[48].label + "")) set_data(t0, t0_value);
6674
+ ctx[49].label + "")) set_data(t0, t0_value);
6672
6675
 
6673
6676
  if (dirty[0] &
6674
6677
  /*_options*/
6675
6678
  8192 && option_selected_value !== (option_selected_value =
6676
6679
  /*option*/
6677
- ctx[48].selected)) {
6680
+ ctx[49].selected)) {
6678
6681
  option.selected = option_selected_value;
6679
6682
  }
6680
6683
 
@@ -6682,7 +6685,7 @@ function create_each_block$4(ctx) {
6682
6685
  /*_options*/
6683
6686
  8192 && option_value_value !== (option_value_value =
6684
6687
  /*option*/
6685
- ctx[48].value)) {
6688
+ ctx[49].value)) {
6686
6689
  option.__value = option_value_value;
6687
6690
  option.value = option.__value;
6688
6691
  }
@@ -6691,7 +6694,7 @@ function create_each_block$4(ctx) {
6691
6694
  /*_options*/
6692
6695
  8192 && option_aria_label_value !== (option_aria_label_value =
6693
6696
  /*option*/
6694
- ctx[48].label)) {
6697
+ ctx[49].label)) {
6695
6698
  attr(option, "aria-label", option_aria_label_value);
6696
6699
  }
6697
6700
  },
@@ -6703,7 +6706,7 @@ function create_each_block$4(ctx) {
6703
6706
  };
6704
6707
  }
6705
6708
 
6706
- function create_fragment$p(ctx) {
6709
+ function create_fragment$q(ctx) {
6707
6710
  let div;
6708
6711
  let div_data_testid_value;
6709
6712
  let div_style_value;
@@ -6711,7 +6714,7 @@ function create_fragment$p(ctx) {
6711
6714
  function select_block_type(ctx, dirty) {
6712
6715
  if (
6713
6716
  /*_native*/
6714
- ctx[22]) return create_if_block$a;
6717
+ ctx[22]) return create_if_block$b;
6715
6718
  return create_else_block$1;
6716
6719
  }
6717
6720
 
@@ -6820,21 +6823,7 @@ function create_fragment$p(ctx) {
6820
6823
  };
6821
6824
  }
6822
6825
 
6823
- function getCustomDropdownWidth(options) {
6824
- let width;
6825
- let maxCount = 0;
6826
- options.forEach(option => {
6827
- const label = option.label || option.value || "";
6828
-
6829
- if (!width && maxCount < label.length) {
6830
- maxCount = label.length;
6831
- width = `${Math.max(20, maxCount + 12)}ch`;
6832
- }
6833
- });
6834
- return width;
6835
- }
6836
-
6837
- function instance$m($$self, $$props, $$invalidate) {
6826
+ function instance$n($$self, $$props, $$invalidate) {
6838
6827
  let _disabled;
6839
6828
 
6840
6829
  let _error;
@@ -6912,7 +6901,16 @@ function instance$m($$self, $$props, $$invalidate) {
6912
6901
  $$invalidate(17, _computedWidth = getCustomDropdownWidth(_options));
6913
6902
  addKeyboardEventListeners();
6914
6903
  setHighlightedIndexToSelected();
6915
- }
6904
+ } // watch for DOM changes within the slot => dynamic binding
6905
+
6906
+
6907
+ const slot = _el.querySelector("slot");
6908
+
6909
+ slot === null || slot === void 0 ? void 0 : slot.addEventListener("slotchange", _e => {
6910
+ $$invalidate(14, _selectedLabel = "");
6911
+ $$invalidate(12, _values = parseValues());
6912
+ $$invalidate(13, _options = getOptions());
6913
+ });
6916
6914
  });
6917
6915
  onDestroy(() => {
6918
6916
  removeKeyboardEventListeners();
@@ -6936,7 +6934,7 @@ function instance$m($$self, $$props, $$invalidate) {
6936
6934
 
6937
6935
  function getOptions() {
6938
6936
  const children = getChildren();
6939
- return children.map(el => {
6937
+ return children.filter(child => child.tagName === "GOA-DROPDOWN-ITEM").map(el => {
6940
6938
  const option = el;
6941
6939
  const value = el.getAttribute("value") || option.value;
6942
6940
  const label = el.getAttribute("label") || option.label || value;
@@ -6954,6 +6952,26 @@ function instance$m($$self, $$props, $$invalidate) {
6954
6952
  label
6955
6953
  };
6956
6954
  });
6955
+ } // compute the required width to enure all children fit
6956
+
6957
+
6958
+ function getCustomDropdownWidth(options) {
6959
+ let width;
6960
+ let maxCount = 0;
6961
+
6962
+ if (options.length === 0 && placeholder !== "") {
6963
+ return `${placeholder.length + 12}ch`;
6964
+ }
6965
+
6966
+ options.forEach(option => {
6967
+ const label = option.label || option.value || "";
6968
+
6969
+ if (!width && maxCount < label.length) {
6970
+ maxCount = label.length;
6971
+ width = `${Math.max(20, maxCount + 12)}ch`;
6972
+ }
6973
+ });
6974
+ return width;
6957
6975
  }
6958
6976
 
6959
6977
  function addKeyboardEventListeners() {
@@ -7190,12 +7208,12 @@ function instance$m($$self, $$props, $$invalidate) {
7190
7208
  class Dropdown extends SvelteElement {
7191
7209
  constructor(options) {
7192
7210
  super();
7193
- 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>`;
7211
+ 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>`;
7194
7212
  init(this, {
7195
7213
  target: this.shadowRoot,
7196
7214
  props: attribute_to_object(this.attributes),
7197
7215
  customElement: true
7198
- }, instance$m, create_fragment$p, safe_not_equal, {
7216
+ }, instance$n, create_fragment$q, safe_not_equal, {
7199
7217
  name: 0,
7200
7218
  arialabel: 1,
7201
7219
  value: 28,
@@ -7399,7 +7417,7 @@ class Dropdown extends SvelteElement {
7399
7417
  customElements.define("goa-dropdown", Dropdown);
7400
7418
  /* libs/web-components/src/components/dropdown/DropdownItem.svelte generated by Svelte v3.51.0 */
7401
7419
 
7402
- function create_fragment$o(ctx) {
7420
+ function create_fragment$p(ctx) {
7403
7421
  return {
7404
7422
  c() {
7405
7423
  this.c = noop;
@@ -7420,7 +7438,7 @@ class DropdownItem extends SvelteElement {
7420
7438
  target: this.shadowRoot,
7421
7439
  props: attribute_to_object(this.attributes),
7422
7440
  customElement: true
7423
- }, null, create_fragment$o, safe_not_equal, {}, null);
7441
+ }, null, create_fragment$p, safe_not_equal, {}, null);
7424
7442
 
7425
7443
  if (options) {
7426
7444
  if (options.target) {
@@ -7434,7 +7452,7 @@ class DropdownItem extends SvelteElement {
7434
7452
  customElements.define("goa-dropdown-item", DropdownItem);
7435
7453
  /* libs/web-components/src/components/focus-trap/FocusTrap.svelte generated by Svelte v3.51.0 */
7436
7454
 
7437
- function create_fragment$n(ctx) {
7455
+ function create_fragment$o(ctx) {
7438
7456
  let div;
7439
7457
  return {
7440
7458
  c() {
@@ -7495,7 +7513,7 @@ function isFocusable(element) {
7495
7513
  }
7496
7514
  }
7497
7515
 
7498
- function instance$l($$self, $$props, $$invalidate) {
7516
+ function instance$m($$self, $$props, $$invalidate) {
7499
7517
  let isActive;
7500
7518
  let {
7501
7519
  active
@@ -7664,7 +7682,7 @@ class FocusTrap extends SvelteElement {
7664
7682
  target: this.shadowRoot,
7665
7683
  props: attribute_to_object(this.attributes),
7666
7684
  customElement: true
7667
- }, instance$l, create_fragment$n, safe_not_equal, {
7685
+ }, instance$m, create_fragment$o, safe_not_equal, {
7668
7686
  active: 1
7669
7687
  }, null);
7670
7688
 
@@ -7700,7 +7718,7 @@ class FocusTrap extends SvelteElement {
7700
7718
  customElements.define("goa-focus-trap", FocusTrap);
7701
7719
  /* libs/web-components/src/components/footer/Footer.svelte generated by Svelte v3.51.0 */
7702
7720
 
7703
- function create_if_block$9(ctx) {
7721
+ function create_if_block$a(ctx) {
7704
7722
  let goa_divider;
7705
7723
  return {
7706
7724
  c() {
@@ -7719,9 +7737,7 @@ function create_if_block$9(ctx) {
7719
7737
  };
7720
7738
  }
7721
7739
 
7722
- function create_fragment$m(ctx) {
7723
- var _ctx$;
7724
-
7740
+ function create_fragment$n(ctx) {
7725
7741
  let div5;
7726
7742
  let div4;
7727
7743
  let div0;
@@ -7737,11 +7753,11 @@ function create_fragment$m(ctx) {
7737
7753
  let div5_style_value;
7738
7754
  let if_block =
7739
7755
  /*navLinks*/
7740
- ((_ctx$ = ctx[2]) === null || _ctx$ === void 0 ? void 0 : _ctx$.length) && create_if_block$9();
7756
+ ctx[2] &&
7757
+ /*navLinks*/
7758
+ ctx[2].length > 0 && create_if_block$a();
7741
7759
  return {
7742
7760
  c() {
7743
- var _ctx$2, _ctx$3;
7744
-
7745
7761
  div5 = element("div");
7746
7762
  div4 = element("div");
7747
7763
  div0 = element("div");
@@ -7770,11 +7786,15 @@ function create_fragment$m(ctx) {
7770
7786
  attr(div2, "class", "abgov");
7771
7787
  toggle_class(div2, "with-meta-links",
7772
7788
  /*metaLinks*/
7773
- (_ctx$2 = ctx[3]) === null || _ctx$2 === void 0 ? void 0 : _ctx$2.length);
7789
+ ctx[3] &&
7790
+ /*metaLinks*/
7791
+ ctx[3].length > 0);
7774
7792
  attr(div3, "class", "meta-section");
7775
7793
  toggle_class(div3, "with-meta-links",
7776
7794
  /*metaLinks*/
7777
- (_ctx$3 = ctx[3]) === null || _ctx$3 === void 0 ? void 0 : _ctx$3.length);
7795
+ ctx[3] &&
7796
+ /*metaLinks*/
7797
+ ctx[3].length > 0);
7778
7798
  attr(div4, "class", "content");
7779
7799
  attr(div5, "class", "app-footer");
7780
7800
  attr(div5, "style", div5_style_value = `--max-content-width: ${
@@ -7802,13 +7822,13 @@ function create_fragment$m(ctx) {
7802
7822
  },
7803
7823
 
7804
7824
  p(ctx, [dirty]) {
7805
- var _ctx$4;
7806
-
7807
7825
  if (
7808
7826
  /*navLinks*/
7809
- (_ctx$4 = ctx[2]) !== null && _ctx$4 !== void 0 && _ctx$4.length) {
7827
+ ctx[2] &&
7828
+ /*navLinks*/
7829
+ ctx[2].length > 0) {
7810
7830
  if (if_block) ;else {
7811
- if_block = create_if_block$9();
7831
+ if_block = create_if_block$a();
7812
7832
  if_block.c();
7813
7833
  if_block.m(div4, t1);
7814
7834
  }
@@ -7820,21 +7840,21 @@ function create_fragment$m(ctx) {
7820
7840
  if (dirty &
7821
7841
  /*metaLinks*/
7822
7842
  8) {
7823
- var _ctx$5;
7824
-
7825
7843
  toggle_class(div2, "with-meta-links",
7826
7844
  /*metaLinks*/
7827
- (_ctx$5 = ctx[3]) === null || _ctx$5 === void 0 ? void 0 : _ctx$5.length);
7845
+ ctx[3] &&
7846
+ /*metaLinks*/
7847
+ ctx[3].length > 0);
7828
7848
  }
7829
7849
 
7830
7850
  if (dirty &
7831
7851
  /*metaLinks*/
7832
7852
  8) {
7833
- var _ctx$6;
7834
-
7835
7853
  toggle_class(div3, "with-meta-links",
7836
7854
  /*metaLinks*/
7837
- (_ctx$6 = ctx[3]) === null || _ctx$6 === void 0 ? void 0 : _ctx$6.length);
7855
+ ctx[3] &&
7856
+ /*metaLinks*/
7857
+ ctx[3].length > 0);
7838
7858
  }
7839
7859
 
7840
7860
  if (dirty &
@@ -7860,7 +7880,7 @@ function create_fragment$m(ctx) {
7860
7880
  };
7861
7881
  }
7862
7882
 
7863
- function instance$k($$self, $$props, $$invalidate) {
7883
+ function instance$l($$self, $$props, $$invalidate) {
7864
7884
  let {
7865
7885
  maxcontentwidth = ""
7866
7886
  } = $$props;
@@ -7893,12 +7913,12 @@ function instance$k($$self, $$props, $$invalidate) {
7893
7913
  class Footer extends SvelteElement {
7894
7914
  constructor(options) {
7895
7915
  super();
7896
- 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>`;
7916
+ 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>`;
7897
7917
  init(this, {
7898
7918
  target: this.shadowRoot,
7899
7919
  props: attribute_to_object(this.attributes),
7900
7920
  customElement: true
7901
- }, instance$k, create_fragment$m, safe_not_equal, {
7921
+ }, instance$l, create_fragment$n, safe_not_equal, {
7902
7922
  maxcontentwidth: 0
7903
7923
  }, null);
7904
7924
 
@@ -7988,7 +8008,7 @@ function create_each_block$3(ctx) {
7988
8008
  };
7989
8009
  }
7990
8010
 
7991
- function create_fragment$l(ctx) {
8011
+ function create_fragment$m(ctx) {
7992
8012
  let section;
7993
8013
  let div;
7994
8014
  let t;
@@ -8076,7 +8096,7 @@ function create_fragment$l(ctx) {
8076
8096
  };
8077
8097
  }
8078
8098
 
8079
- function instance$j($$self, $$props, $$invalidate) {
8099
+ function instance$k($$self, $$props, $$invalidate) {
8080
8100
  let rootEl;
8081
8101
  let children = [];
8082
8102
  onMount(async () => {
@@ -8106,12 +8126,12 @@ function instance$j($$self, $$props, $$invalidate) {
8106
8126
  class FooterMetaSection extends SvelteElement {
8107
8127
  constructor(options) {
8108
8128
  super();
8109
- 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>`;
8129
+ 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>`;
8110
8130
  init(this, {
8111
8131
  target: this.shadowRoot,
8112
8132
  props: attribute_to_object(this.attributes),
8113
8133
  customElement: true
8114
- }, instance$j, create_fragment$l, safe_not_equal, {}, null);
8134
+ }, instance$k, create_fragment$m, safe_not_equal, {}, null);
8115
8135
 
8116
8136
  if (options) {
8117
8137
  if (options.target) {
@@ -8132,7 +8152,7 @@ function get_each_context$2(ctx, list, i) {
8132
8152
  } // (31:2) {#if heading}
8133
8153
 
8134
8154
 
8135
- function create_if_block$8(ctx) {
8155
+ function create_if_block$9(ctx) {
8136
8156
  let div;
8137
8157
  let t0;
8138
8158
  let t1;
@@ -8221,7 +8241,7 @@ function create_each_block$2(ctx) {
8221
8241
  };
8222
8242
  }
8223
8243
 
8224
- function create_fragment$k(ctx) {
8244
+ function create_fragment$l(ctx) {
8225
8245
  let section;
8226
8246
  let t0;
8227
8247
  let div;
@@ -8230,7 +8250,7 @@ function create_fragment$k(ctx) {
8230
8250
  let ul_style_value;
8231
8251
  let if_block =
8232
8252
  /*heading*/
8233
- ctx[0] && create_if_block$8(ctx);
8253
+ ctx[0] && create_if_block$9(ctx);
8234
8254
  let each_value =
8235
8255
  /*children*/
8236
8256
  ctx[3];
@@ -8297,7 +8317,7 @@ function create_fragment$k(ctx) {
8297
8317
  if (if_block) {
8298
8318
  if_block.p(ctx, dirty);
8299
8319
  } else {
8300
- if_block = create_if_block$8(ctx);
8320
+ if_block = create_if_block$9(ctx);
8301
8321
  if_block.c();
8302
8322
  if_block.m(section, t0);
8303
8323
  }
@@ -8368,7 +8388,7 @@ function create_fragment$k(ctx) {
8368
8388
  };
8369
8389
  }
8370
8390
 
8371
- function instance$i($$self, $$props, $$invalidate) {
8391
+ function instance$j($$self, $$props, $$invalidate) {
8372
8392
  let {
8373
8393
  heading = ""
8374
8394
  } = $$props;
@@ -8414,12 +8434,12 @@ function instance$i($$self, $$props, $$invalidate) {
8414
8434
  class FooterNavSection extends SvelteElement {
8415
8435
  constructor(options) {
8416
8436
  super();
8417
- 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>`;
8437
+ 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>`;
8418
8438
  init(this, {
8419
8439
  target: this.shadowRoot,
8420
8440
  props: attribute_to_object(this.attributes),
8421
8441
  customElement: true
8422
- }, instance$i, create_fragment$k, safe_not_equal, {
8442
+ }, instance$j, create_fragment$l, safe_not_equal, {
8423
8443
  heading: 0,
8424
8444
  maxcolumncount: 1
8425
8445
  }, null);
@@ -8617,7 +8637,7 @@ function create_if_block_1$4(ctx) {
8617
8637
  } // (48:2) {#if helptext}
8618
8638
 
8619
8639
 
8620
- function create_if_block$7(ctx) {
8640
+ function create_if_block$8(ctx) {
8621
8641
  let div;
8622
8642
  let t;
8623
8643
  return {
@@ -8649,7 +8669,7 @@ function create_if_block$7(ctx) {
8649
8669
  };
8650
8670
  }
8651
8671
 
8652
- function create_fragment$j(ctx) {
8672
+ function create_fragment$k(ctx) {
8653
8673
  let div1;
8654
8674
  let t0;
8655
8675
  let div0;
@@ -8664,7 +8684,7 @@ function create_fragment$j(ctx) {
8664
8684
  ctx[7] && create_if_block_1$4(ctx);
8665
8685
  let if_block2 =
8666
8686
  /*helptext*/
8667
- ctx[6] && create_if_block$7(ctx);
8687
+ ctx[6] && create_if_block$8(ctx);
8668
8688
  return {
8669
8689
  c() {
8670
8690
  div1 = element("div");
@@ -8741,7 +8761,7 @@ function create_fragment$j(ctx) {
8741
8761
  if (if_block2) {
8742
8762
  if_block2.p(ctx, dirty);
8743
8763
  } else {
8744
- if_block2 = create_if_block$7(ctx);
8764
+ if_block2 = create_if_block$8(ctx);
8745
8765
  if_block2.c();
8746
8766
  if_block2.m(div1, null);
8747
8767
  }
@@ -8786,7 +8806,7 @@ function create_fragment$j(ctx) {
8786
8806
  };
8787
8807
  }
8788
8808
 
8789
- function instance$h($$self, $$props, $$invalidate) {
8809
+ function instance$i($$self, $$props, $$invalidate) {
8790
8810
  const [REQUIREMENT_TYPES, validateRequirementType] = typeValidator("Requirement type", ["optional", "required"], false);
8791
8811
  let {
8792
8812
  testid = ""
@@ -8837,12 +8857,12 @@ function instance$h($$self, $$props, $$invalidate) {
8837
8857
  class FormItem extends SvelteElement {
8838
8858
  constructor(options) {
8839
8859
  super();
8840
- 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>`;
8860
+ 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>`;
8841
8861
  init(this, {
8842
8862
  target: this.shadowRoot,
8843
8863
  props: attribute_to_object(this.attributes),
8844
8864
  customElement: true
8845
- }, instance$h, create_fragment$j, safe_not_equal, {
8865
+ }, instance$i, create_fragment$k, safe_not_equal, {
8846
8866
  testid: 0,
8847
8867
  mt: 1,
8848
8868
  mr: 2,
@@ -8974,7 +8994,7 @@ class FormItem extends SvelteElement {
8974
8994
  customElements.define("goa-form-item", FormItem);
8975
8995
  /* libs/web-components/src/components/grid/Grid.svelte generated by Svelte v3.51.0 */
8976
8996
 
8977
- function create_fragment$i(ctx) {
8997
+ function create_fragment$j(ctx) {
8978
8998
  let div;
8979
8999
  let slot;
8980
9000
  let div_style_value;
@@ -8997,7 +9017,7 @@ function create_fragment$i(ctx) {
8997
9017
  --min-child-width: ${
8998
9018
  /*minchildwidth*/
8999
9019
  ctx[1] || 0};
9000
- gap: var(--goa-spacing-${
9020
+ gap: var(--goa-space-${
9001
9021
  /*gap*/
9002
9022
  ctx[0]})
9003
9023
  `);
@@ -9024,7 +9044,7 @@ function create_fragment$i(ctx) {
9024
9044
  --min-child-width: ${
9025
9045
  /*minchildwidth*/
9026
9046
  ctx[1] || 0};
9027
- gap: var(--goa-spacing-${
9047
+ gap: var(--goa-space-${
9028
9048
  /*gap*/
9029
9049
  ctx[0]})
9030
9050
  `)) {
@@ -9042,7 +9062,7 @@ function create_fragment$i(ctx) {
9042
9062
  };
9043
9063
  }
9044
9064
 
9045
- function instance$g($$self, $$props, $$invalidate) {
9065
+ function instance$h($$self, $$props, $$invalidate) {
9046
9066
  let {
9047
9067
  gap = "m"
9048
9068
  } = $$props;
@@ -9082,12 +9102,12 @@ function instance$g($$self, $$props, $$invalidate) {
9082
9102
  class Grid extends SvelteElement {
9083
9103
  constructor(options) {
9084
9104
  super();
9085
- 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>`;
9105
+ 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>`;
9086
9106
  init(this, {
9087
9107
  target: this.shadowRoot,
9088
9108
  props: attribute_to_object(this.attributes),
9089
9109
  customElement: true
9090
- }, instance$g, create_fragment$i, safe_not_equal, {
9110
+ }, instance$h, create_fragment$j, safe_not_equal, {
9091
9111
  gap: 0,
9092
9112
  minchildwidth: 1,
9093
9113
  mt: 2,
@@ -9183,7 +9203,7 @@ class Grid extends SvelteElement {
9183
9203
  customElements.define("goa-grid", Grid);
9184
9204
  /* libs/web-components/src/components/hero-banner/HeroBanner.svelte generated by Svelte v3.51.0 */
9185
9205
 
9186
- function create_fragment$h(ctx) {
9206
+ function create_fragment$i(ctx) {
9187
9207
  let div1;
9188
9208
  let goa_page_block;
9189
9209
  let h1;
@@ -9268,7 +9288,7 @@ function create_fragment$h(ctx) {
9268
9288
  };
9269
9289
  }
9270
9290
 
9271
- function instance$f($$self, $$props, $$invalidate) {
9291
+ function instance$g($$self, $$props, $$invalidate) {
9272
9292
  let {
9273
9293
  heading
9274
9294
  } = $$props;
@@ -9291,12 +9311,12 @@ function instance$f($$self, $$props, $$invalidate) {
9291
9311
  class HeroBanner extends SvelteElement {
9292
9312
  constructor(options) {
9293
9313
  super();
9294
- 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>`;
9314
+ 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>`;
9295
9315
  init(this, {
9296
9316
  target: this.shadowRoot,
9297
9317
  props: attribute_to_object(this.attributes),
9298
9318
  customElement: true
9299
- }, instance$f, create_fragment$h, safe_not_equal, {
9319
+ }, instance$g, create_fragment$i, safe_not_equal, {
9300
9320
  heading: 0,
9301
9321
  backgroundurl: 1,
9302
9322
  minheight: 2
@@ -9356,7 +9376,7 @@ class HeroBanner extends SvelteElement {
9356
9376
  customElements.define("goa-hero-banner", HeroBanner);
9357
9377
  /* libs/web-components/src/components/icon-button/IconButton.svelte generated by Svelte v3.51.0 */
9358
9378
 
9359
- function create_fragment$g(ctx) {
9379
+ function create_fragment$h(ctx) {
9360
9380
  let button;
9361
9381
  let goa_icon;
9362
9382
  let button_style_value;
@@ -9528,7 +9548,7 @@ function handleClick(e) {
9528
9548
  }));
9529
9549
  }
9530
9550
 
9531
- function instance$e($$self, $$props, $$invalidate) {
9551
+ function instance$f($$self, $$props, $$invalidate) {
9532
9552
  let css;
9533
9553
  let isDisabled;
9534
9554
  let isInverted;
@@ -9628,12 +9648,12 @@ function instance$e($$self, $$props, $$invalidate) {
9628
9648
  class IconButton extends SvelteElement {
9629
9649
  constructor(options) {
9630
9650
  super();
9631
- 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>`;
9651
+ 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>`;
9632
9652
  init(this, {
9633
9653
  target: this.shadowRoot,
9634
9654
  props: attribute_to_object(this.attributes),
9635
9655
  customElement: true
9636
- }, instance$e, create_fragment$g, safe_not_equal, {
9656
+ }, instance$f, create_fragment$h, safe_not_equal, {
9637
9657
  icon: 0,
9638
9658
  size: 1,
9639
9659
  theme: 2,
@@ -9801,7 +9821,7 @@ class IconButton extends SvelteElement {
9801
9821
  customElements.define("goa-icon-button", IconButton);
9802
9822
  /* libs/web-components/src/components/icon/Icon.svelte generated by Svelte v3.51.0 */
9803
9823
 
9804
- function create_if_block$6(ctx) {
9824
+ function create_if_block$7(ctx) {
9805
9825
  let ion_icon;
9806
9826
  let ion_icon_name_value;
9807
9827
  return {
@@ -9849,12 +9869,12 @@ function create_if_block$6(ctx) {
9849
9869
  };
9850
9870
  }
9851
9871
 
9852
- function create_fragment$f(ctx) {
9872
+ function create_fragment$g(ctx) {
9853
9873
  let div;
9854
9874
  let div_style_value;
9855
9875
  let if_block =
9856
9876
  /*type*/
9857
- ctx[4] && create_if_block$6(ctx);
9877
+ ctx[4] && create_if_block$7(ctx);
9858
9878
  return {
9859
9879
  c() {
9860
9880
  div = element("div");
@@ -9907,7 +9927,7 @@ function create_fragment$f(ctx) {
9907
9927
  if (if_block) {
9908
9928
  if_block.p(ctx, dirty);
9909
9929
  } else {
9910
- if_block = create_if_block$6(ctx);
9930
+ if_block = create_if_block$7(ctx);
9911
9931
  if_block.c();
9912
9932
  if_block.m(div, null);
9913
9933
  }
@@ -9980,7 +10000,7 @@ function create_fragment$f(ctx) {
9980
10000
  };
9981
10001
  }
9982
10002
 
9983
- function instance$d($$self, $$props, $$invalidate) {
10003
+ function instance$e($$self, $$props, $$invalidate) {
9984
10004
  let isInverted;
9985
10005
 
9986
10006
  let _size;
@@ -10070,7 +10090,7 @@ class Icon extends SvelteElement {
10070
10090
  target: this.shadowRoot,
10071
10091
  props: attribute_to_object(this.attributes),
10072
10092
  customElement: true
10073
- }, instance$d, create_fragment$f, safe_not_equal, {
10093
+ }, instance$e, create_fragment$g, safe_not_equal, {
10074
10094
  mt: 0,
10075
10095
  mr: 1,
10076
10096
  mb: 2,
@@ -10280,7 +10300,7 @@ function create_if_block_4$1(ctx) {
10280
10300
  }
10281
10301
 
10282
10302
  };
10283
- } // (100:4) {#if leadingicon}
10303
+ } // (109:4) {#if leadingicon}
10284
10304
 
10285
10305
 
10286
10306
  function create_if_block_3$2(ctx) {
@@ -10314,7 +10334,7 @@ function create_if_block_3$2(ctx) {
10314
10334
  }
10315
10335
 
10316
10336
  };
10317
- } // (130:4) {#if trailingicon && !handlesTrailingIconClick}
10337
+ } // (139:4) {#if trailingicon && !handlesTrailingIconClick}
10318
10338
 
10319
10339
 
10320
10340
  function create_if_block_2$3(ctx) {
@@ -10349,7 +10369,7 @@ function create_if_block_2$3(ctx) {
10349
10369
  }
10350
10370
 
10351
10371
  };
10352
- } // (140:4) {#if trailingicon && handlesTrailingIconClick}
10372
+ } // (149:4) {#if trailingicon && handlesTrailingIconClick}
10353
10373
 
10354
10374
 
10355
10375
  function create_if_block_1$3(ctx) {
@@ -10404,10 +10424,10 @@ function create_if_block_1$3(ctx) {
10404
10424
  }
10405
10425
 
10406
10426
  };
10407
- } // (152:4) {#if suffix}
10427
+ } // (161:4) {#if suffix}
10408
10428
 
10409
10429
 
10410
- function create_if_block$5(ctx) {
10430
+ function create_if_block$6(ctx) {
10411
10431
  let span;
10412
10432
  let t;
10413
10433
  return {
@@ -10439,7 +10459,7 @@ function create_if_block$5(ctx) {
10439
10459
  };
10440
10460
  }
10441
10461
 
10442
- function create_fragment$e(ctx) {
10462
+ function create_fragment$f(ctx) {
10443
10463
  let div3;
10444
10464
  let div2;
10445
10465
  let t0;
@@ -10477,7 +10497,7 @@ function create_fragment$e(ctx) {
10477
10497
  ctx[24] && create_if_block_1$3(ctx);
10478
10498
  let if_block4 =
10479
10499
  /*suffix*/
10480
- ctx[15] && create_if_block$5(ctx);
10500
+ ctx[15] && create_if_block$6(ctx);
10481
10501
  return {
10482
10502
  c() {
10483
10503
  div3 = element("div");
@@ -10591,7 +10611,7 @@ function create_fragment$e(ctx) {
10591
10611
  append(div2, input);
10592
10612
  /*input_binding*/
10593
10613
 
10594
- ctx[32](input);
10614
+ ctx[33](input);
10595
10615
  append(div2, t3);
10596
10616
  if (if_block2) if_block2.m(div2, null);
10597
10617
  append(div2, t4);
@@ -10798,7 +10818,7 @@ function create_fragment$e(ctx) {
10798
10818
  if (if_block4) {
10799
10819
  if_block4.p(ctx, dirty);
10800
10820
  } else {
10801
- if_block4 = create_if_block$5(ctx);
10821
+ if_block4 = create_if_block$6(ctx);
10802
10822
  if_block4.c();
10803
10823
  if_block4.m(div2, t6);
10804
10824
  }
@@ -10861,7 +10881,7 @@ function create_fragment$e(ctx) {
10861
10881
  if (if_block1) if_block1.d();
10862
10882
  /*input_binding*/
10863
10883
 
10864
- ctx[32](null);
10884
+ ctx[33](null);
10865
10885
  if (if_block2) if_block2.d();
10866
10886
  if (if_block3) if_block3.d();
10867
10887
  if (if_block4) if_block4.d();
@@ -10878,7 +10898,7 @@ function doClick() {
10878
10898
  }));
10879
10899
  }
10880
10900
 
10881
- function instance$c($$self, $$props, $$invalidate) {
10901
+ function instance$d($$self, $$props, $$invalidate) {
10882
10902
  let handlesTrailingIconClick;
10883
10903
  let isFocused;
10884
10904
  let isReadonly;
@@ -10935,13 +10955,13 @@ function instance$c($$self, $$props, $$invalidate) {
10935
10955
  arialabel = null
10936
10956
  } = $$props;
10937
10957
  let {
10938
- min = null
10958
+ min = ""
10939
10959
  } = $$props;
10940
10960
  let {
10941
- max = null
10961
+ max = ""
10942
10962
  } = $$props;
10943
10963
  let {
10944
- step = null
10964
+ step = 1
10945
10965
  } = $$props;
10946
10966
  let {
10947
10967
  prefix = ""
@@ -10949,6 +10969,9 @@ function instance$c($$self, $$props, $$invalidate) {
10949
10969
  let {
10950
10970
  suffix = ""
10951
10971
  } = $$props;
10972
+ let {
10973
+ debounce = 0
10974
+ } = $$props;
10952
10975
  let {
10953
10976
  mt = null
10954
10977
  } = $$props;
@@ -10962,19 +10985,28 @@ function instance$c($$self, $$props, $$invalidate) {
10962
10985
  ml = null
10963
10986
  } = $$props;
10964
10987
  let inputEl;
10988
+ let _debounceId = null;
10965
10989
 
10966
10990
  function onKeyUp(e) {
10967
- const ee = e.target;
10968
- e.target.dispatchEvent(new CustomEvent("_change", {
10969
- composed: true,
10970
- bubbles: false,
10971
- cancelable: true,
10972
- detail: {
10973
- name,
10974
- value: ee.value
10975
- }
10976
- }));
10977
- $$invalidate(0, value = ee.value);
10991
+ const input = e.target;
10992
+ if (!input) return;
10993
+
10994
+ if (_debounceId != null) {
10995
+ clearTimeout(_debounceId);
10996
+ }
10997
+
10998
+ _debounceId = setTimeout(() => {
10999
+ input.dispatchEvent(new CustomEvent("_change", {
11000
+ composed: true,
11001
+ bubbles: false,
11002
+ cancelable: true,
11003
+ detail: {
11004
+ name,
11005
+ value: input.value
11006
+ }
11007
+ }));
11008
+ }, debounce);
11009
+ $$invalidate(0, value = input.value);
10978
11010
  }
10979
11011
 
10980
11012
  onMount(() => {
@@ -11015,6 +11047,7 @@ function instance$c($$self, $$props, $$invalidate) {
11015
11047
  if ('step' in $$props) $$invalidate(13, step = $$props.step);
11016
11048
  if ('prefix' in $$props) $$invalidate(14, prefix = $$props.prefix);
11017
11049
  if ('suffix' in $$props) $$invalidate(15, suffix = $$props.suffix);
11050
+ if ('debounce' in $$props) $$invalidate(31, debounce = $$props.debounce);
11018
11051
  if ('mt' in $$props) $$invalidate(16, mt = $$props.mt);
11019
11052
  if ('mr' in $$props) $$invalidate(17, mr = $$props.mr);
11020
11053
  if ('mb' in $$props) $$invalidate(18, mb = $$props.mb);
@@ -11031,7 +11064,7 @@ function instance$c($$self, $$props, $$invalidate) {
11031
11064
  if ($$self.$$.dirty[0] &
11032
11065
  /*focused*/
11033
11066
  268435456) {
11034
- $$invalidate(31, isFocused = toBoolean(focused));
11067
+ $$invalidate(32, isFocused = toBoolean(focused));
11035
11068
  }
11036
11069
 
11037
11070
  if ($$self.$$.dirty[0] &
@@ -11056,7 +11089,7 @@ function instance$c($$self, $$props, $$invalidate) {
11056
11089
  /*inputEl*/
11057
11090
  1048576 | $$self.$$.dirty[1] &
11058
11091
  /*isFocused*/
11059
- 1) {
11092
+ 2) {
11060
11093
  if (isFocused && inputEl) {
11061
11094
  setTimeout(() => inputEl.focus(), 1);
11062
11095
  }
@@ -11073,19 +11106,19 @@ function instance$c($$self, $$props, $$invalidate) {
11073
11106
  }
11074
11107
  };
11075
11108
 
11076
- 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];
11109
+ 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];
11077
11110
  }
11078
11111
 
11079
11112
  class Input extends SvelteElement {
11080
11113
  constructor(options) {
11081
11114
  super();
11082
- 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;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>')
11115
+ 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>')
11083
11116
  center center no-repeat}</style>`;
11084
11117
  init(this, {
11085
11118
  target: this.shadowRoot,
11086
11119
  props: attribute_to_object(this.attributes),
11087
11120
  customElement: true
11088
- }, instance$c, create_fragment$e, safe_not_equal, {
11121
+ }, instance$d, create_fragment$f, safe_not_equal, {
11089
11122
  type: 1,
11090
11123
  name: 2,
11091
11124
  value: 0,
@@ -11107,6 +11140,7 @@ class Input extends SvelteElement {
11107
11140
  step: 13,
11108
11141
  prefix: 14,
11109
11142
  suffix: 15,
11143
+ debounce: 31,
11110
11144
  mt: 16,
11111
11145
  mr: 17,
11112
11146
  mb: 18,
@@ -11126,7 +11160,7 @@ class Input extends SvelteElement {
11126
11160
  }
11127
11161
 
11128
11162
  static get observedAttributes() {
11129
- 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"];
11163
+ 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"];
11130
11164
  }
11131
11165
 
11132
11166
  get type() {
@@ -11360,6 +11394,17 @@ class Input extends SvelteElement {
11360
11394
  flush();
11361
11395
  }
11362
11396
 
11397
+ get debounce() {
11398
+ return this.$$.ctx[31];
11399
+ }
11400
+
11401
+ set debounce(debounce) {
11402
+ this.$$set({
11403
+ debounce
11404
+ });
11405
+ flush();
11406
+ }
11407
+
11363
11408
  get mt() {
11364
11409
  return this.$$.ctx[16];
11365
11410
  }
@@ -11571,7 +11616,7 @@ function create_if_block_2$2(ctx) {
11571
11616
  } // (56:2) {#if version}
11572
11617
 
11573
11618
 
11574
- function create_if_block$4(ctx) {
11619
+ function create_if_block$5(ctx) {
11575
11620
  let div;
11576
11621
  let t;
11577
11622
  return {
@@ -11604,7 +11649,7 @@ function create_if_block$4(ctx) {
11604
11649
  };
11605
11650
  }
11606
11651
 
11607
- function create_fragment$d(ctx) {
11652
+ function create_fragment$e(ctx) {
11608
11653
  let header;
11609
11654
  let t0;
11610
11655
  let show_if = ["alpha", "beta"].includes(
@@ -11619,7 +11664,7 @@ function create_fragment$d(ctx) {
11619
11664
  let if_block1 = show_if && create_if_block_1$2(ctx);
11620
11665
  let if_block2 =
11621
11666
  /*version*/
11622
- ctx[1] && create_if_block$4(ctx);
11667
+ ctx[1] && create_if_block$5(ctx);
11623
11668
  return {
11624
11669
  c() {
11625
11670
  header = element("header");
@@ -11685,7 +11730,7 @@ function create_fragment$d(ctx) {
11685
11730
  if (if_block2) {
11686
11731
  if_block2.p(ctx, dirty);
11687
11732
  } else {
11688
- if_block2 = create_if_block$4(ctx);
11733
+ if_block2 = create_if_block$5(ctx);
11689
11734
  if_block2.c();
11690
11735
  if_block2.m(header, null);
11691
11736
  }
@@ -11713,7 +11758,7 @@ function capitalize(val) {
11713
11758
  return val[0].toUpperCase() + val.slice(1);
11714
11759
  }
11715
11760
 
11716
- function instance$b($$self, $$props, $$invalidate) {
11761
+ function instance$c($$self, $$props, $$invalidate) {
11717
11762
  const [Types, validateType] = typeValidator("Microsite header type", ["live", "alpha", "beta"], true);
11718
11763
  let {
11719
11764
  type
@@ -11740,12 +11785,12 @@ function instance$b($$self, $$props, $$invalidate) {
11740
11785
  class MicrositeHeader extends SvelteElement {
11741
11786
  constructor(options) {
11742
11787
  super();
11743
- 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>`;
11788
+ 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>`;
11744
11789
  init(this, {
11745
11790
  target: this.shadowRoot,
11746
11791
  props: attribute_to_object(this.attributes),
11747
11792
  customElement: true
11748
- }, instance$b, create_fragment$d, safe_not_equal, {
11793
+ }, instance$c, create_fragment$e, safe_not_equal, {
11749
11794
  type: 0,
11750
11795
  version: 1,
11751
11796
  feedbackurl: 2
@@ -11805,7 +11850,7 @@ class MicrositeHeader extends SvelteElement {
11805
11850
  customElements.define("goa-microsite-header", MicrositeHeader);
11806
11851
  /* libs/web-components/src/components/modal/Modal.svelte generated by Svelte v3.51.0 */
11807
11852
 
11808
- function create_if_block$3(ctx) {
11853
+ function create_if_block$4(ctx) {
11809
11854
  let goa_focus_trap;
11810
11855
  let div5;
11811
11856
  let div0;
@@ -12210,12 +12255,12 @@ function create_if_block_1$1(ctx) {
12210
12255
  };
12211
12256
  }
12212
12257
 
12213
- function create_fragment$c(ctx) {
12258
+ function create_fragment$d(ctx) {
12214
12259
  let if_block_anchor;
12215
12260
  let current;
12216
12261
  let if_block =
12217
12262
  /*isOpen*/
12218
- ctx[7] && create_if_block$3(ctx);
12263
+ ctx[7] && create_if_block$4(ctx);
12219
12264
  return {
12220
12265
  c() {
12221
12266
  if (if_block) if_block.c();
@@ -12242,7 +12287,7 @@ function create_fragment$c(ctx) {
12242
12287
  transition_in(if_block, 1);
12243
12288
  }
12244
12289
  } else {
12245
- if_block = create_if_block$3(ctx);
12290
+ if_block = create_if_block$4(ctx);
12246
12291
  if_block.c();
12247
12292
  transition_in(if_block, 1);
12248
12293
  if_block.m(if_block_anchor.parentNode, if_block_anchor);
@@ -12275,7 +12320,7 @@ function create_fragment$c(ctx) {
12275
12320
  };
12276
12321
  }
12277
12322
 
12278
- function instance$a($$self, $$props, $$invalidate) {
12323
+ function instance$b($$self, $$props, $$invalidate) {
12279
12324
  let isClosable;
12280
12325
  let isOpen;
12281
12326
 
@@ -12360,12 +12405,12 @@ function instance$a($$self, $$props, $$invalidate) {
12360
12405
  class Modal extends SvelteElement {
12361
12406
  constructor(options) {
12362
12407
  super();
12363
- 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>`;
12408
+ 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>`;
12364
12409
  init(this, {
12365
12410
  target: this.shadowRoot,
12366
12411
  props: attribute_to_object(this.attributes),
12367
12412
  customElement: true
12368
- }, instance$a, create_fragment$c, safe_not_equal, {
12413
+ }, instance$b, create_fragment$d, safe_not_equal, {
12369
12414
  heading: 0,
12370
12415
  closable: 9,
12371
12416
  open: 1,
@@ -12461,7 +12506,7 @@ class Modal extends SvelteElement {
12461
12506
  customElements.define("goa-modal", Modal);
12462
12507
  /* libs/web-components/src/components/notification/Notification.svelte generated by Svelte v3.51.0 */
12463
12508
 
12464
- function create_if_block$2(ctx) {
12509
+ function create_if_block$3(ctx) {
12465
12510
  let div3;
12466
12511
  let div0;
12467
12512
  let goa_icon;
@@ -12585,12 +12630,12 @@ function create_if_block$2(ctx) {
12585
12630
  };
12586
12631
  }
12587
12632
 
12588
- function create_fragment$b(ctx) {
12633
+ function create_fragment$c(ctx) {
12589
12634
  let if_block_anchor;
12590
12635
  let current;
12591
12636
  let if_block =
12592
12637
  /*show*/
12593
- ctx[1] && create_if_block$2(ctx);
12638
+ ctx[1] && create_if_block$3(ctx);
12594
12639
  return {
12595
12640
  c() {
12596
12641
  if (if_block) if_block.c();
@@ -12617,7 +12662,7 @@ function create_fragment$b(ctx) {
12617
12662
  transition_in(if_block, 1);
12618
12663
  }
12619
12664
  } else {
12620
- if_block = create_if_block$2(ctx);
12665
+ if_block = create_if_block$3(ctx);
12621
12666
  if_block.c();
12622
12667
  transition_in(if_block, 1);
12623
12668
  if_block.m(if_block_anchor.parentNode, if_block_anchor);
@@ -12650,7 +12695,7 @@ function create_fragment$b(ctx) {
12650
12695
  };
12651
12696
  }
12652
12697
 
12653
- function instance$9($$self, $$props, $$invalidate) {
12698
+ function instance$a($$self, $$props, $$invalidate) {
12654
12699
  let iconType;
12655
12700
  const [Types, validateType] = typeValidator("Notification type", ["emergency", "important", "information", "event"], true);
12656
12701
  let {
@@ -12683,12 +12728,12 @@ function instance$9($$self, $$props, $$invalidate) {
12683
12728
  class Notification extends SvelteElement {
12684
12729
  constructor(options) {
12685
12730
  super();
12686
- 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>`;
12731
+ 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>`;
12687
12732
  init(this, {
12688
12733
  target: this.shadowRoot,
12689
12734
  props: attribute_to_object(this.attributes),
12690
12735
  customElement: true
12691
- }, instance$9, create_fragment$b, safe_not_equal, {
12736
+ }, instance$a, create_fragment$c, safe_not_equal, {
12692
12737
  type: 0
12693
12738
  }, null);
12694
12739
 
@@ -12730,7 +12775,7 @@ function isValidDimension(value) {
12730
12775
  /* libs/web-components/src/components/page-block/PageBlock.svelte generated by Svelte v3.51.0 */
12731
12776
 
12732
12777
 
12733
- function create_fragment$a(ctx) {
12778
+ function create_fragment$b(ctx) {
12734
12779
  let div;
12735
12780
  let slot;
12736
12781
  let div_style_value;
@@ -12770,7 +12815,7 @@ function create_fragment$a(ctx) {
12770
12815
  };
12771
12816
  }
12772
12817
 
12773
- function instance$8($$self, $$props, $$invalidate) {
12818
+ function instance$9($$self, $$props, $$invalidate) {
12774
12819
  const Sizes = {
12775
12820
  "full": "100%"
12776
12821
  };
@@ -12806,12 +12851,12 @@ function instance$8($$self, $$props, $$invalidate) {
12806
12851
  class PageBlock extends SvelteElement {
12807
12852
  constructor(options) {
12808
12853
  super();
12809
- 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>`;
12854
+ 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>`;
12810
12855
  init(this, {
12811
12856
  target: this.shadowRoot,
12812
12857
  props: attribute_to_object(this.attributes),
12813
12858
  customElement: true
12814
- }, instance$8, create_fragment$a, safe_not_equal, {
12859
+ }, instance$9, create_fragment$b, safe_not_equal, {
12815
12860
  width: 1,
12816
12861
  _width: 0
12817
12862
  }, null);
@@ -13049,7 +13094,7 @@ function create_each_block$1(key_1, ctx) {
13049
13094
  };
13050
13095
  }
13051
13096
 
13052
- function create_fragment$9(ctx) {
13097
+ function create_fragment$a(ctx) {
13053
13098
  let div;
13054
13099
  let slot;
13055
13100
  let t;
@@ -13172,7 +13217,7 @@ function create_fragment$9(ctx) {
13172
13217
  };
13173
13218
  }
13174
13219
 
13175
- function instance$7($$self, $$props, $$invalidate) {
13220
+ function instance$8($$self, $$props, $$invalidate) {
13176
13221
  let isDisabled;
13177
13222
  let isError;
13178
13223
  const [Orientations, validateOrientation] = typeValidator("Radio group orientation", ["vertical", "horizontal"]);
@@ -13309,14 +13354,14 @@ function instance$7($$self, $$props, $$invalidate) {
13309
13354
  class RadioGroup extends SvelteElement {
13310
13355
  constructor(options) {
13311
13356
  super();
13312
- 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
13313
- 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
13314
- 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>`;
13357
+ 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
13358
+ 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
13359
+ 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>`;
13315
13360
  init(this, {
13316
13361
  target: this.shadowRoot,
13317
13362
  props: attribute_to_object(this.attributes),
13318
13363
  customElement: true
13319
- }, instance$7, create_fragment$9, safe_not_equal, {
13364
+ }, instance$8, create_fragment$a, safe_not_equal, {
13320
13365
  name: 1,
13321
13366
  value: 0,
13322
13367
  orientation: 2,
@@ -13472,7 +13517,7 @@ class RadioGroup extends SvelteElement {
13472
13517
  customElements.define("goa-radio-group", RadioGroup);
13473
13518
  /* libs/web-components/src/components/scrollable/Scrollable.svelte generated by Svelte v3.51.0 */
13474
13519
 
13475
- function create_fragment$8(ctx) {
13520
+ function create_fragment$9(ctx) {
13476
13521
  let div;
13477
13522
  let slot;
13478
13523
  let div_style_value;
@@ -13540,7 +13585,7 @@ function create_fragment$8(ctx) {
13540
13585
  };
13541
13586
  }
13542
13587
 
13543
- function instance$6($$self, $$props, $$invalidate) {
13588
+ function instance$7($$self, $$props, $$invalidate) {
13544
13589
  let {
13545
13590
  direction = "vertical"
13546
13591
  } = $$props;
@@ -13572,7 +13617,7 @@ class Scrollable extends SvelteElement {
13572
13617
  target: this.shadowRoot,
13573
13618
  props: attribute_to_object(this.attributes),
13574
13619
  customElement: true
13575
- }, instance$6, create_fragment$8, safe_not_equal, {
13620
+ }, instance$7, create_fragment$9, safe_not_equal, {
13576
13621
  direction: 0,
13577
13622
  hpadding: 1,
13578
13623
  vpadding: 2,
@@ -13698,9 +13743,9 @@ function create_else_block(ctx) {
13698
13743
  function create_if_block_2(ctx) {
13699
13744
  let each_1_anchor;
13700
13745
  let current;
13701
- let each_value = Array(
13746
+ let each_value = Array(Number.parseInt(
13702
13747
  /*linecount*/
13703
- ctx[2]);
13748
+ ctx[2] + ""));
13704
13749
  let each_blocks = [];
13705
13750
 
13706
13751
  for (let i = 0; i < each_value.length; i += 1) {
@@ -13733,9 +13778,9 @@ function create_if_block_2(ctx) {
13733
13778
  if (dirty &
13734
13779
  /*size, linecount*/
13735
13780
  6) {
13736
- each_value = Array(
13781
+ each_value = Array(Number.parseInt(
13737
13782
  /*linecount*/
13738
- ctx[2]);
13783
+ ctx[2] + ""));
13739
13784
  let i;
13740
13785
 
13741
13786
  for (i = 0; i < each_value.length; i += 1) {
@@ -13913,7 +13958,7 @@ function create_if_block_1(ctx) {
13913
13958
  } // (30:2) {#if type === "card"}
13914
13959
 
13915
13960
 
13916
- function create_if_block$1(ctx) {
13961
+ function create_if_block$2(ctx) {
13917
13962
  let div1;
13918
13963
  let skeleton0;
13919
13964
  let t0;
@@ -13945,7 +13990,9 @@ function create_if_block$1(ctx) {
13945
13990
  size:
13946
13991
  /*size*/
13947
13992
  ctx[1],
13948
- linecount: 3
13993
+ linecount:
13994
+ /*linecount*/
13995
+ ctx[2]
13949
13996
  }
13950
13997
  });
13951
13998
  return {
@@ -13998,6 +14045,11 @@ function create_if_block$1(ctx) {
13998
14045
  2) skeleton2_changes.size =
13999
14046
  /*size*/
14000
14047
  ctx[1];
14048
+ if (dirty &
14049
+ /*linecount*/
14050
+ 4) skeleton2_changes.linecount =
14051
+ /*linecount*/
14052
+ ctx[2];
14001
14053
  skeleton2.$set(skeleton2_changes);
14002
14054
 
14003
14055
  if (!current || dirty &
@@ -14040,7 +14092,7 @@ function create_if_block$1(ctx) {
14040
14092
  }
14041
14093
 
14042
14094
  };
14043
- } // (52:4) {#each Array(linecount) as _item}
14095
+ } // (52:4) {#each Array(Number.parseInt(linecount+"")) as _item}
14044
14096
 
14045
14097
 
14046
14098
  function create_each_block(ctx) {
@@ -14100,13 +14152,13 @@ function create_each_block(ctx) {
14100
14152
  };
14101
14153
  }
14102
14154
 
14103
- function create_fragment$7(ctx) {
14155
+ function create_fragment$8(ctx) {
14104
14156
  let div;
14105
14157
  let current_block_type_index;
14106
14158
  let if_block;
14107
14159
  let div_style_value;
14108
14160
  let current;
14109
- const if_block_creators = [create_if_block$1, create_if_block_1, create_if_block_2, create_else_block];
14161
+ const if_block_creators = [create_if_block$2, create_if_block_1, create_if_block_2, create_else_block];
14110
14162
  const if_blocks = [];
14111
14163
 
14112
14164
  function select_block_type(ctx, dirty) {
@@ -14216,7 +14268,7 @@ function create_fragment$7(ctx) {
14216
14268
  };
14217
14269
  }
14218
14270
 
14219
- function instance$5($$self, $$props, $$invalidate) {
14271
+ function instance$6($$self, $$props, $$invalidate) {
14220
14272
  const [Types, validateType] = typeValidator("Skeleton type", ["image", "text", "title", "text-small", "avatar", "header", "paragraph", "thumbnail", "card", "profile", "lines"], true);
14221
14273
  const [Sizes, validateSize] = typeValidator("Skeleton size", ["1", "2", "3", "4"]);
14222
14274
  let {
@@ -14269,12 +14321,12 @@ function instance$5($$self, $$props, $$invalidate) {
14269
14321
  class Skeleton extends SvelteElement {
14270
14322
  constructor(options) {
14271
14323
  super();
14272
- 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>`;
14324
+ 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>`;
14273
14325
  init(this, {
14274
14326
  target: this.shadowRoot,
14275
14327
  props: attribute_to_object(this.attributes),
14276
14328
  customElement: true
14277
- }, instance$5, create_fragment$7, safe_not_equal, {
14329
+ }, instance$6, create_fragment$8, safe_not_equal, {
14278
14330
  maxwidth: 0,
14279
14331
  size: 1,
14280
14332
  linecount: 2,
@@ -14406,7 +14458,7 @@ class Skeleton extends SvelteElement {
14406
14458
  customElements.define("goa-skeleton", Skeleton);
14407
14459
  /* libs/web-components/src/components/spacer/Spacer.svelte generated by Svelte v3.51.0 */
14408
14460
 
14409
- function create_fragment$6(ctx) {
14461
+ function create_fragment$7(ctx) {
14410
14462
  let div;
14411
14463
  return {
14412
14464
  c() {
@@ -14435,7 +14487,7 @@ function create_fragment$6(ctx) {
14435
14487
  };
14436
14488
  }
14437
14489
 
14438
- function instance$4($$self, $$props, $$invalidate) {
14490
+ function instance$5($$self, $$props, $$invalidate) {
14439
14491
  let {
14440
14492
  hspacing = "none"
14441
14493
  } = $$props;
@@ -14445,8 +14497,8 @@ function instance$4($$self, $$props, $$invalidate) {
14445
14497
  let rootEl;
14446
14498
  onMount(() => {
14447
14499
  injectCss(rootEl, ":host", {
14448
- width: `var(--goa-spacing-${hspacing})`,
14449
- height: `var(--goa-spacing-${vspacing})`
14500
+ width: `var(--goa-space-${hspacing})`,
14501
+ height: `var(--goa-space-${vspacing})`
14450
14502
  });
14451
14503
  });
14452
14504
 
@@ -14472,7 +14524,7 @@ class Spacer extends SvelteElement {
14472
14524
  target: this.shadowRoot,
14473
14525
  props: attribute_to_object(this.attributes),
14474
14526
  customElement: true
14475
- }, instance$4, create_fragment$6, safe_not_equal, {
14527
+ }, instance$5, create_fragment$7, safe_not_equal, {
14476
14528
  hspacing: 1,
14477
14529
  vspacing: 2
14478
14530
  }, null);
@@ -14704,7 +14756,7 @@ function tweened(value, defaults = {}) {
14704
14756
  /* libs/web-components/src/components/spinner/Spinner.svelte generated by Svelte v3.51.0 */
14705
14757
 
14706
14758
 
14707
- function create_if_block(ctx) {
14759
+ function create_if_block$1(ctx) {
14708
14760
  let svg;
14709
14761
  let circle;
14710
14762
  let circle_stroke_value;
@@ -14727,7 +14779,7 @@ function create_if_block(ctx) {
14727
14779
  ctx[3]);
14728
14780
  attr(circle, "stroke", circle_stroke_value =
14729
14781
  /*invert*/
14730
- ctx[0] ? "var(--goa-color-primary-dark)" : "var(--goa-color-brand-light)");
14782
+ ctx[0] ? "var(--goa-color-info-hover)" : "var(--goa-color-brand-light)");
14731
14783
  attr(circle, "stroke-width",
14732
14784
  /*strokewidth*/
14733
14785
  ctx[4]);
@@ -14746,7 +14798,7 @@ function create_if_block(ctx) {
14746
14798
  ctx[4]);
14747
14799
  attr(path, "stroke", path_stroke_value =
14748
14800
  /*invert*/
14749
- ctx[0] ? "var(--goa-color-brand-light)" : "var(--goa-color-primary)");
14801
+ ctx[0] ? "var(--goa-color-brand-light)" : "var(--goa-color-info-default)");
14750
14802
  attr(path, "stroke-linecap", "round");
14751
14803
  attr(svg, "class", svg_class_value = `spinner-${
14752
14804
  /*type*/
@@ -14796,7 +14848,7 @@ function create_if_block(ctx) {
14796
14848
  /*invert*/
14797
14849
  1 && circle_stroke_value !== (circle_stroke_value =
14798
14850
  /*invert*/
14799
- ctx[0] ? "var(--goa-color-primary-dark)" : "var(--goa-color-brand-light)")) {
14851
+ ctx[0] ? "var(--goa-color-info-hover)" : "var(--goa-color-brand-light)")) {
14800
14852
  attr(circle, "stroke", circle_stroke_value);
14801
14853
  }
14802
14854
 
@@ -14840,7 +14892,7 @@ function create_if_block(ctx) {
14840
14892
  /*invert*/
14841
14893
  1 && path_stroke_value !== (path_stroke_value =
14842
14894
  /*invert*/
14843
- ctx[0] ? "var(--goa-color-brand-light)" : "var(--goa-color-primary)")) {
14895
+ ctx[0] ? "var(--goa-color-brand-light)" : "var(--goa-color-info-default)")) {
14844
14896
  attr(path, "stroke", path_stroke_value);
14845
14897
  }
14846
14898
 
@@ -14894,11 +14946,11 @@ function create_if_block(ctx) {
14894
14946
  };
14895
14947
  }
14896
14948
 
14897
- function create_fragment$5(ctx) {
14949
+ function create_fragment$6(ctx) {
14898
14950
  let if_block_anchor;
14899
14951
  let if_block =
14900
14952
  /*ready*/
14901
- ctx[6] && create_if_block(ctx);
14953
+ ctx[6] && create_if_block$1(ctx);
14902
14954
  return {
14903
14955
  c() {
14904
14956
  if (if_block) if_block.c();
@@ -14918,7 +14970,7 @@ function create_fragment$5(ctx) {
14918
14970
  if (if_block) {
14919
14971
  if_block.p(ctx, dirty);
14920
14972
  } else {
14921
- if_block = create_if_block(ctx);
14973
+ if_block = create_if_block$1(ctx);
14922
14974
  if_block.c();
14923
14975
  if_block.m(if_block_anchor.parentNode, if_block_anchor);
14924
14976
  }
@@ -14939,7 +14991,7 @@ function create_fragment$5(ctx) {
14939
14991
  };
14940
14992
  }
14941
14993
 
14942
- function instance$3($$self, $$props, $$invalidate) {
14994
+ function instance$4($$self, $$props, $$invalidate) {
14943
14995
  let diameter;
14944
14996
  let strokewidth;
14945
14997
  let radius;
@@ -15065,12 +15117,12 @@ function instance$3($$self, $$props, $$invalidate) {
15065
15117
  class Spinner extends SvelteElement {
15066
15118
  constructor(options) {
15067
15119
  super();
15068
- 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>`;
15120
+ 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>`;
15069
15121
  init(this, {
15070
15122
  target: this.shadowRoot,
15071
15123
  props: attribute_to_object(this.attributes),
15072
15124
  customElement: true
15073
- }, instance$3, create_fragment$5, safe_not_equal, {
15125
+ }, instance$4, create_fragment$6, safe_not_equal, {
15074
15126
  size: 10,
15075
15127
  invert: 0,
15076
15128
  progress: 11,
@@ -15142,7 +15194,7 @@ class Spinner extends SvelteElement {
15142
15194
  customElements.define("goa-spinner", Spinner);
15143
15195
  /* libs/web-components/src/components/table/Table.svelte generated by Svelte v3.51.0 */
15144
15196
 
15145
- function create_fragment$4(ctx) {
15197
+ function create_fragment$5(ctx) {
15146
15198
  let table;
15147
15199
  let slot;
15148
15200
  let t0;
@@ -15244,7 +15296,7 @@ function create_fragment$4(ctx) {
15244
15296
  };
15245
15297
  }
15246
15298
 
15247
- function instance$2($$self, $$props, $$invalidate) {
15299
+ function instance$3($$self, $$props, $$invalidate) {
15248
15300
  let _stickyHeader;
15249
15301
 
15250
15302
  const [Variants, validateVariant] = typeValidator("Table variant", ["normal", "relaxed"], true);
@@ -15318,12 +15370,12 @@ function instance$2($$self, $$props, $$invalidate) {
15318
15370
  class Table extends SvelteElement {
15319
15371
  constructor(options) {
15320
15372
  super();
15321
- 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(--color-gray-200);line-height:1rem}table.relaxed td{padding:1.25rem 1rem 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>`;
15373
+ 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>`;
15322
15374
  init(this, {
15323
15375
  target: this.shadowRoot,
15324
15376
  props: attribute_to_object(this.attributes),
15325
15377
  customElement: true
15326
- }, instance$2, create_fragment$4, safe_not_equal, {
15378
+ }, instance$3, create_fragment$5, safe_not_equal, {
15327
15379
  width: 0,
15328
15380
  stickyheader: 8,
15329
15381
  variant: 1,
@@ -15431,7 +15483,7 @@ class Table extends SvelteElement {
15431
15483
  customElements.define("goa-table", Table);
15432
15484
  /* libs/web-components/src/components/text-area/TextArea.svelte generated by Svelte v3.51.0 */
15433
15485
 
15434
- function create_fragment$3(ctx) {
15486
+ function create_fragment$4(ctx) {
15435
15487
  let div;
15436
15488
  let textarea;
15437
15489
  let textarea_aria_label_value;
@@ -15612,7 +15664,7 @@ function create_fragment$3(ctx) {
15612
15664
  };
15613
15665
  }
15614
15666
 
15615
- function instance$1($$self, $$props, $$invalidate) {
15667
+ function instance$2($$self, $$props, $$invalidate) {
15616
15668
  let isError;
15617
15669
  let isDisabled;
15618
15670
  let isReadonly;
@@ -15723,13 +15775,13 @@ function instance$1($$self, $$props, $$invalidate) {
15723
15775
  class TextArea extends SvelteElement {
15724
15776
  constructor(options) {
15725
15777
  super();
15726
- 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)
15727
- }.error:hover,.error:focus,.error{border:2px solid var(--goa-color-interactive--error)}</style>`;
15778
+ 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)
15779
+ }.error:hover,.error:focus,.error{border:2px solid var(--goa-color-interactive-error)}</style>`;
15728
15780
  init(this, {
15729
15781
  target: this.shadowRoot,
15730
15782
  props: attribute_to_object(this.attributes),
15731
15783
  customElement: true
15732
- }, instance$1, create_fragment$3, safe_not_equal, {
15784
+ }, instance$2, create_fragment$4, safe_not_equal, {
15733
15785
  name: 0,
15734
15786
  value: 1,
15735
15787
  placeholder: 2,
@@ -15933,7 +15985,7 @@ class TextArea extends SvelteElement {
15933
15985
  customElements.define("goa-textarea", TextArea);
15934
15986
  /* libs/web-components/src/layouts/FullScreenNavbarLayout.svelte generated by Svelte v3.51.0 */
15935
15987
 
15936
- function create_fragment$2(ctx) {
15988
+ function create_fragment$3(ctx) {
15937
15989
  let div;
15938
15990
  return {
15939
15991
  c() {
@@ -15967,17 +16019,17 @@ function create_fragment$2(ctx) {
15967
16019
  class FullScreenNavbarLayout extends SvelteElement {
15968
16020
  constructor(options) {
15969
16021
  super();
15970
- this.shadowRoot.innerHTML = `<style>.page{height:100vh;grid-template-columns:auto;grid-template-rows:min-content auto min-content;grid-template-areas:"header"
16022
+ this.shadowRoot.innerHTML = `<style>.page{height:100vh;grid-template-columns:auto;grid-template-rows:min-content auto min-content;grid-template-areas:"header"
15971
16023
  "content"
15972
16024
  "nav"
15973
- "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"
16025
+ "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"
15974
16026
  "nav content"
15975
- "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>`;
16027
+ "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>`;
15976
16028
  init(this, {
15977
16029
  target: this.shadowRoot,
15978
16030
  props: attribute_to_object(this.attributes),
15979
16031
  customElement: true
15980
- }, null, create_fragment$2, safe_not_equal, {}, null);
16032
+ }, null, create_fragment$3, safe_not_equal, {}, null);
15981
16033
 
15982
16034
  if (options) {
15983
16035
  if (options.target) {
@@ -15991,7 +16043,7 @@ class FullScreenNavbarLayout extends SvelteElement {
15991
16043
  customElements.define("goa-layout-full-nav", FullScreenNavbarLayout);
15992
16044
  /* libs/web-components/src/layouts/one-column-layout/OneColumnLayout.svelte generated by Svelte v3.51.0 */
15993
16045
 
15994
- function create_fragment$1(ctx) {
16046
+ function create_fragment$2(ctx) {
15995
16047
  let div;
15996
16048
  return {
15997
16049
  c() {
@@ -16028,7 +16080,7 @@ class OneColumnLayout extends SvelteElement {
16028
16080
  target: this.shadowRoot,
16029
16081
  props: attribute_to_object(this.attributes),
16030
16082
  customElement: true
16031
- }, null, create_fragment$1, safe_not_equal, {}, null);
16083
+ }, null, create_fragment$2, safe_not_equal, {}, null);
16032
16084
 
16033
16085
  if (options) {
16034
16086
  if (options.target) {
@@ -16042,7 +16094,7 @@ class OneColumnLayout extends SvelteElement {
16042
16094
  customElements.define("goa-one-column-layout", OneColumnLayout);
16043
16095
  /* libs/web-components/src/layouts/two-column-layout/TwoColumnLayout.svelte generated by Svelte v3.51.0 */
16044
16096
 
16045
- function create_fragment(ctx) {
16097
+ function create_fragment$1(ctx) {
16046
16098
  let div;
16047
16099
  let header;
16048
16100
  let t0;
@@ -16074,7 +16126,7 @@ function create_fragment(ctx) {
16074
16126
  ctx[1] || "100%"};
16075
16127
  --nav-column-width: ${
16076
16128
  /*navcolumnwidth*/
16077
- ctx[0] || "var(--layout-nav-column-width)"};
16129
+ ctx[0] || "256px"};
16078
16130
  `);
16079
16131
  },
16080
16132
 
@@ -16096,7 +16148,7 @@ function create_fragment(ctx) {
16096
16148
  ctx[1] || "100%"};
16097
16149
  --nav-column-width: ${
16098
16150
  /*navcolumnwidth*/
16099
- ctx[0] || "var(--layout-nav-column-width)"};
16151
+ ctx[0] || "256px"};
16100
16152
  `)) {
16101
16153
  attr(div, "style", div_style_value);
16102
16154
  }
@@ -16112,7 +16164,7 @@ function create_fragment(ctx) {
16112
16164
  };
16113
16165
  }
16114
16166
 
16115
- function instance($$self, $$props, $$invalidate) {
16167
+ function instance$1($$self, $$props, $$invalidate) {
16116
16168
  let {
16117
16169
  navcolumnwidth = ""
16118
16170
  } = $$props;
@@ -16131,12 +16183,12 @@ function instance($$self, $$props, $$invalidate) {
16131
16183
  class TwoColumnLayout extends SvelteElement {
16132
16184
  constructor(options) {
16133
16185
  super();
16134
- 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>`;
16186
+ 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>`;
16135
16187
  init(this, {
16136
16188
  target: this.shadowRoot,
16137
16189
  props: attribute_to_object(this.attributes),
16138
16190
  customElement: true
16139
- }, instance, create_fragment, safe_not_equal, {
16191
+ }, instance$1, create_fragment$1, safe_not_equal, {
16140
16192
  navcolumnwidth: 0,
16141
16193
  maxcontentwidth: 1
16142
16194
  }, null);
@@ -16182,6 +16234,512 @@ class TwoColumnLayout extends SvelteElement {
16182
16234
  }
16183
16235
 
16184
16236
  customElements.define("goa-two-column-layout", TwoColumnLayout);
16237
+ /* libs/web-components/src/components/pagination/Pagination.svelte generated by Svelte v3.51.0 */
16238
+
16239
+ function create_if_block(ctx) {
16240
+ let goa_block;
16241
+ let span0;
16242
+ let t1;
16243
+ let input;
16244
+ let t2;
16245
+ let goa_input;
16246
+ let t3;
16247
+ let span1;
16248
+ let t4;
16249
+ let t5;
16250
+ return {
16251
+ c() {
16252
+ goa_block = element("goa-block");
16253
+ span0 = element("span");
16254
+ span0.textContent = "Page";
16255
+ t1 = space();
16256
+ input = element("input");
16257
+ t2 = space();
16258
+ goa_input = element("goa-input");
16259
+ t3 = space();
16260
+ span1 = element("span");
16261
+ t4 = text("of ");
16262
+ t5 = text(
16263
+ /*_pageCount*/
16264
+ ctx[8]);
16265
+ attr(input, "type", "hidden");
16266
+ set_custom_element_data(goa_input, "type", "number");
16267
+ set_custom_element_data(goa_input, "value",
16268
+ /*pagenumber*/
16269
+ ctx[0]);
16270
+ set_custom_element_data(goa_input, "width", "8ch");
16271
+ set_custom_element_data(goa_input, "debounce", "500");
16272
+ set_custom_element_data(goa_input, "min", "1");
16273
+ set_custom_element_data(goa_input, "max",
16274
+ /*_pageCount*/
16275
+ ctx[8]);
16276
+ set_custom_element_data(goa_block, "data-testid", "page-selector");
16277
+ set_custom_element_data(goa_block, "alignment", "center");
16278
+ set_custom_element_data(goa_block, "gap", "s");
16279
+ },
16280
+
16281
+ m(target, anchor) {
16282
+ insert(target, goa_block, anchor);
16283
+ append(goa_block, span0);
16284
+ append(goa_block, t1);
16285
+ append(goa_block, input);
16286
+ /*input_binding*/
16287
+
16288
+ ctx[12](input);
16289
+ append(goa_block, t2);
16290
+ append(goa_block, goa_input);
16291
+ /*goa_input_binding*/
16292
+
16293
+ ctx[13](goa_input);
16294
+ append(goa_block, t3);
16295
+ append(goa_block, span1);
16296
+ append(span1, t4);
16297
+ append(span1, t5);
16298
+ },
16299
+
16300
+ p(ctx, dirty) {
16301
+ if (dirty &
16302
+ /*pagenumber*/
16303
+ 1) {
16304
+ set_custom_element_data(goa_input, "value",
16305
+ /*pagenumber*/
16306
+ ctx[0]);
16307
+ }
16308
+
16309
+ if (dirty &
16310
+ /*_pageCount*/
16311
+ 256) {
16312
+ set_custom_element_data(goa_input, "max",
16313
+ /*_pageCount*/
16314
+ ctx[8]);
16315
+ }
16316
+
16317
+ if (dirty &
16318
+ /*_pageCount*/
16319
+ 256) set_data(t5,
16320
+ /*_pageCount*/
16321
+ ctx[8]);
16322
+ },
16323
+
16324
+ d(detaching) {
16325
+ if (detaching) detach(goa_block);
16326
+ /*input_binding*/
16327
+
16328
+ ctx[12](null);
16329
+ /*goa_input_binding*/
16330
+
16331
+ ctx[13](null);
16332
+ }
16333
+
16334
+ };
16335
+ }
16336
+
16337
+ function create_fragment(ctx) {
16338
+ let goa_block1;
16339
+ let div;
16340
+ let t0;
16341
+ let goa_block0;
16342
+ let goa_button0;
16343
+ let t1;
16344
+ let goa_button0_disabled_value;
16345
+ let t2;
16346
+ let goa_button1;
16347
+ let t3;
16348
+ let goa_button1_disabled_value;
16349
+ let mounted;
16350
+ let dispose;
16351
+ let if_block =
16352
+ /*variant*/
16353
+ ctx[1] === "all" && create_if_block(ctx);
16354
+ return {
16355
+ c() {
16356
+ goa_block1 = element("goa-block");
16357
+ div = element("div");
16358
+ if (if_block) if_block.c();
16359
+ t0 = space();
16360
+ goa_block0 = element("goa-block");
16361
+ goa_button0 = element("goa-button");
16362
+ t1 = text("Previous");
16363
+ t2 = space();
16364
+ goa_button1 = element("goa-button");
16365
+ t3 = text("Next");
16366
+ this.c = noop;
16367
+ set_custom_element_data(goa_button0, "type", "tertiary");
16368
+ set_custom_element_data(goa_button0, "leadingicon", "arrow-back");
16369
+ set_custom_element_data(goa_button0, "disabled", goa_button0_disabled_value =
16370
+ /*pagenumber*/
16371
+ ctx[0] == 1 ? "true" : "false");
16372
+ set_custom_element_data(goa_button1, "type", "tertiary");
16373
+ set_custom_element_data(goa_button1, "trailingicon", "arrow-forward");
16374
+ set_custom_element_data(goa_button1, "disabled", goa_button1_disabled_value =
16375
+ /*pagenumber*/
16376
+ ctx[0] ==
16377
+ /*_pageCount*/
16378
+ ctx[8] ? "true" : "false");
16379
+ set_custom_element_data(goa_block0, "alignment", "center");
16380
+ set_custom_element_data(goa_block0, "gap", "m");
16381
+ set_custom_element_data(goa_block0, "data-testid", "page-links");
16382
+ attr(div, "class", "controls");
16383
+ set_custom_element_data(goa_block1, "id", "root");
16384
+ set_custom_element_data(goa_block1, "ml",
16385
+ /*ml*/
16386
+ ctx[5]);
16387
+ set_custom_element_data(goa_block1, "mr",
16388
+ /*mr*/
16389
+ ctx[3]);
16390
+ set_custom_element_data(goa_block1, "mb",
16391
+ /*mb*/
16392
+ ctx[4]);
16393
+ set_custom_element_data(goa_block1, "mt",
16394
+ /*mt*/
16395
+ ctx[2]);
16396
+ },
16397
+
16398
+ m(target, anchor) {
16399
+ insert(target, goa_block1, anchor);
16400
+ append(goa_block1, div);
16401
+ if (if_block) if_block.m(div, null);
16402
+ append(div, t0);
16403
+ append(div, goa_block0);
16404
+ append(goa_block0, goa_button0);
16405
+ append(goa_button0, t1);
16406
+ append(goa_block0, t2);
16407
+ append(goa_block0, goa_button1);
16408
+ append(goa_button1, t3);
16409
+
16410
+ if (!mounted) {
16411
+ dispose = [listen(goa_button0, "click",
16412
+ /*click_handler*/
16413
+ ctx[14]), listen(goa_button1, "click",
16414
+ /*click_handler_1*/
16415
+ ctx[15])];
16416
+ mounted = true;
16417
+ }
16418
+ },
16419
+
16420
+ p(ctx, [dirty]) {
16421
+ if (
16422
+ /*variant*/
16423
+ ctx[1] === "all") {
16424
+ if (if_block) {
16425
+ if_block.p(ctx, dirty);
16426
+ } else {
16427
+ if_block = create_if_block(ctx);
16428
+ if_block.c();
16429
+ if_block.m(div, t0);
16430
+ }
16431
+ } else if (if_block) {
16432
+ if_block.d(1);
16433
+ if_block = null;
16434
+ }
16435
+
16436
+ if (dirty &
16437
+ /*pagenumber*/
16438
+ 1 && goa_button0_disabled_value !== (goa_button0_disabled_value =
16439
+ /*pagenumber*/
16440
+ ctx[0] == 1 ? "true" : "false")) {
16441
+ set_custom_element_data(goa_button0, "disabled", goa_button0_disabled_value);
16442
+ }
16443
+
16444
+ if (dirty &
16445
+ /*pagenumber, _pageCount*/
16446
+ 257 && goa_button1_disabled_value !== (goa_button1_disabled_value =
16447
+ /*pagenumber*/
16448
+ ctx[0] ==
16449
+ /*_pageCount*/
16450
+ ctx[8] ? "true" : "false")) {
16451
+ set_custom_element_data(goa_button1, "disabled", goa_button1_disabled_value);
16452
+ }
16453
+
16454
+ if (dirty &
16455
+ /*ml*/
16456
+ 32) {
16457
+ set_custom_element_data(goa_block1, "ml",
16458
+ /*ml*/
16459
+ ctx[5]);
16460
+ }
16461
+
16462
+ if (dirty &
16463
+ /*mr*/
16464
+ 8) {
16465
+ set_custom_element_data(goa_block1, "mr",
16466
+ /*mr*/
16467
+ ctx[3]);
16468
+ }
16469
+
16470
+ if (dirty &
16471
+ /*mb*/
16472
+ 16) {
16473
+ set_custom_element_data(goa_block1, "mb",
16474
+ /*mb*/
16475
+ ctx[4]);
16476
+ }
16477
+
16478
+ if (dirty &
16479
+ /*mt*/
16480
+ 4) {
16481
+ set_custom_element_data(goa_block1, "mt",
16482
+ /*mt*/
16483
+ ctx[2]);
16484
+ }
16485
+ },
16486
+
16487
+ i: noop,
16488
+ o: noop,
16489
+
16490
+ d(detaching) {
16491
+ if (detaching) detach(goa_block1);
16492
+ if (if_block) if_block.d();
16493
+ mounted = false;
16494
+ run_all(dispose);
16495
+ }
16496
+
16497
+ };
16498
+ }
16499
+
16500
+ function instance($$self, $$props, $$invalidate) {
16501
+ let _pageCount;
16502
+
16503
+ const [Variants, validateVariant] = typeValidator("Pagination variant", ["all", "links-only"]);
16504
+ let {
16505
+ pagenumber
16506
+ } = $$props;
16507
+ let {
16508
+ itemcount
16509
+ } = $$props;
16510
+ let {
16511
+ perpagecount = 10
16512
+ } = $$props;
16513
+ let {
16514
+ variant = "all"
16515
+ } = $$props;
16516
+ let {
16517
+ mt = null
16518
+ } = $$props;
16519
+ let {
16520
+ mr = null
16521
+ } = $$props;
16522
+ let {
16523
+ mb = "m"
16524
+ } = $$props;
16525
+ let {
16526
+ ml = null
16527
+ } = $$props; // private
16528
+
16529
+ let inputEl = null;
16530
+ let hiddenEl = null; // needed to allow the inputEl's event to be cancelled
16531
+ // hooks
16532
+
16533
+ onMount(async () => {
16534
+ await tick();
16535
+ validateRequired("GoAPagination", {
16536
+ itemcount,
16537
+ pagenumber
16538
+ });
16539
+ validateVariant(variant); // prevent event propagation if value is non-numeric
16540
+ // (input[type=number] returns blank for non-numeric numbers)
16541
+
16542
+ inputEl && inputEl.addEventListener("_change", e => {
16543
+ const page = Number.parseInt(e.detail.value);
16544
+ e.stopPropagation();
16545
+
16546
+ if (isNaN(page)) {
16547
+ return;
16548
+ }
16549
+
16550
+ hiddenEl.dispatchEvent(new CustomEvent("_change", {
16551
+ composed: true,
16552
+ bubbles: true,
16553
+ detail: {
16554
+ page
16555
+ }
16556
+ }));
16557
+ });
16558
+ }); // functions
16559
+
16560
+ function goto(e, offset) {
16561
+ const newPage = Number.parseInt(pagenumber + "") + offset;
16562
+
16563
+ if (newPage > 0 && newPage <= _pageCount) {
16564
+ e.target.dispatchEvent(new CustomEvent("_change", {
16565
+ composed: true,
16566
+ bubbles: true,
16567
+ detail: {
16568
+ page: newPage
16569
+ }
16570
+ }));
16571
+ }
16572
+
16573
+ e.preventDefault();
16574
+ }
16575
+
16576
+ function input_binding($$value) {
16577
+ binding_callbacks[$$value ? 'unshift' : 'push'](() => {
16578
+ hiddenEl = $$value;
16579
+ $$invalidate(7, hiddenEl);
16580
+ });
16581
+ }
16582
+
16583
+ function goa_input_binding($$value) {
16584
+ binding_callbacks[$$value ? 'unshift' : 'push'](() => {
16585
+ inputEl = $$value;
16586
+ $$invalidate(6, inputEl);
16587
+ });
16588
+ }
16589
+
16590
+ const click_handler = e => goto(e, -1);
16591
+
16592
+ const click_handler_1 = e => goto(e, 1);
16593
+
16594
+ $$self.$$set = $$props => {
16595
+ if ('pagenumber' in $$props) $$invalidate(0, pagenumber = $$props.pagenumber);
16596
+ if ('itemcount' in $$props) $$invalidate(10, itemcount = $$props.itemcount);
16597
+ if ('perpagecount' in $$props) $$invalidate(11, perpagecount = $$props.perpagecount);
16598
+ if ('variant' in $$props) $$invalidate(1, variant = $$props.variant);
16599
+ if ('mt' in $$props) $$invalidate(2, mt = $$props.mt);
16600
+ if ('mr' in $$props) $$invalidate(3, mr = $$props.mr);
16601
+ if ('mb' in $$props) $$invalidate(4, mb = $$props.mb);
16602
+ if ('ml' in $$props) $$invalidate(5, ml = $$props.ml);
16603
+ };
16604
+
16605
+ $$self.$$.update = () => {
16606
+ if ($$self.$$.dirty &
16607
+ /*itemcount, perpagecount*/
16608
+ 3072) {
16609
+ // reactive
16610
+ $$invalidate(8, _pageCount = Math.ceil(itemcount / perpagecount));
16611
+ }
16612
+ };
16613
+
16614
+ return [pagenumber, variant, mt, mr, mb, ml, inputEl, hiddenEl, _pageCount, goto, itemcount, perpagecount, input_binding, goa_input_binding, click_handler, click_handler_1];
16615
+ }
16616
+
16617
+ class Pagination extends SvelteElement {
16618
+ constructor(options) {
16619
+ super();
16620
+ 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>`;
16621
+ init(this, {
16622
+ target: this.shadowRoot,
16623
+ props: attribute_to_object(this.attributes),
16624
+ customElement: true
16625
+ }, instance, create_fragment, safe_not_equal, {
16626
+ pagenumber: 0,
16627
+ itemcount: 10,
16628
+ perpagecount: 11,
16629
+ variant: 1,
16630
+ mt: 2,
16631
+ mr: 3,
16632
+ mb: 4,
16633
+ ml: 5
16634
+ }, null);
16635
+
16636
+ if (options) {
16637
+ if (options.target) {
16638
+ insert(options.target, this, options.anchor);
16639
+ }
16640
+
16641
+ if (options.props) {
16642
+ this.$set(options.props);
16643
+ flush();
16644
+ }
16645
+ }
16646
+ }
16647
+
16648
+ static get observedAttributes() {
16649
+ return ["pagenumber", "itemcount", "perpagecount", "variant", "mt", "mr", "mb", "ml"];
16650
+ }
16651
+
16652
+ get pagenumber() {
16653
+ return this.$$.ctx[0];
16654
+ }
16655
+
16656
+ set pagenumber(pagenumber) {
16657
+ this.$$set({
16658
+ pagenumber
16659
+ });
16660
+ flush();
16661
+ }
16662
+
16663
+ get itemcount() {
16664
+ return this.$$.ctx[10];
16665
+ }
16666
+
16667
+ set itemcount(itemcount) {
16668
+ this.$$set({
16669
+ itemcount
16670
+ });
16671
+ flush();
16672
+ }
16673
+
16674
+ get perpagecount() {
16675
+ return this.$$.ctx[11];
16676
+ }
16677
+
16678
+ set perpagecount(perpagecount) {
16679
+ this.$$set({
16680
+ perpagecount
16681
+ });
16682
+ flush();
16683
+ }
16684
+
16685
+ get variant() {
16686
+ return this.$$.ctx[1];
16687
+ }
16688
+
16689
+ set variant(variant) {
16690
+ this.$$set({
16691
+ variant
16692
+ });
16693
+ flush();
16694
+ }
16695
+
16696
+ get mt() {
16697
+ return this.$$.ctx[2];
16698
+ }
16699
+
16700
+ set mt(mt) {
16701
+ this.$$set({
16702
+ mt
16703
+ });
16704
+ flush();
16705
+ }
16706
+
16707
+ get mr() {
16708
+ return this.$$.ctx[3];
16709
+ }
16710
+
16711
+ set mr(mr) {
16712
+ this.$$set({
16713
+ mr
16714
+ });
16715
+ flush();
16716
+ }
16717
+
16718
+ get mb() {
16719
+ return this.$$.ctx[4];
16720
+ }
16721
+
16722
+ set mb(mb) {
16723
+ this.$$set({
16724
+ mb
16725
+ });
16726
+ flush();
16727
+ }
16728
+
16729
+ get ml() {
16730
+ return this.$$.ctx[5];
16731
+ }
16732
+
16733
+ set ml(ml) {
16734
+ this.$$set({
16735
+ ml
16736
+ });
16737
+ flush();
16738
+ }
16739
+
16740
+ }
16741
+
16742
+ customElements.define("goa-pagination", Pagination);
16185
16743
 
16186
16744
  const GoAAppHeader = ({
16187
16745
  heading,
@@ -16862,6 +17420,7 @@ function __rest(s, e) {
16862
17420
 
16863
17421
  const GoAInput = ({
16864
17422
  id,
17423
+ debounce,
16865
17424
  name,
16866
17425
  type,
16867
17426
  autoCapitalize,
@@ -16920,6 +17479,7 @@ const GoAInput = ({
16920
17479
  }, [ref, onChange, onTrailingIconClick]);
16921
17480
  return jsxs("goa-input", Object.assign({
16922
17481
  ref: ref,
17482
+ debounce: debounce,
16923
17483
  focused: focused,
16924
17484
  type: type,
16925
17485
  name: name,
@@ -17279,6 +17839,40 @@ const GoARadioGroup = ({
17279
17839
  }), void 0);
17280
17840
  };
17281
17841
 
17842
+ function GoAPagination(props) {
17843
+ const ref = useRef();
17844
+ useEffect(() => {
17845
+ if (!ref.current) {
17846
+ return;
17847
+ }
17848
+
17849
+ const current = ref.current;
17850
+
17851
+ const changeListener = e => {
17852
+ const {
17853
+ page
17854
+ } = e.detail;
17855
+ props.onChange(page);
17856
+ };
17857
+
17858
+ current.addEventListener("_change", changeListener);
17859
+ return () => {
17860
+ current.removeEventListener("_change", changeListener);
17861
+ };
17862
+ }, [ref, props.onChange]);
17863
+ return jsx("goa-pagination", {
17864
+ ref: ref,
17865
+ itemcount: props.itemCount,
17866
+ perpagecount: props.perPageCount,
17867
+ pagenumber: props.pageNumber,
17868
+ variant: props.variant,
17869
+ mt: props.mt,
17870
+ mb: props.mb,
17871
+ ml: props.ml,
17872
+ mr: props.mr
17873
+ }, void 0);
17874
+ }
17875
+
17282
17876
  const GoASkeleton = ({
17283
17877
  maxWidth,
17284
17878
  size,
@@ -17328,7 +17922,10 @@ function GoATable(props) {
17328
17922
  return jsx("goa-table", Object.assign({
17329
17923
  width: props.width,
17330
17924
  stickyheader: false,
17331
- variant: props.variant
17925
+ mt: props.mt,
17926
+ mb: props.mb,
17927
+ ml: props.ml,
17928
+ mr: props.mr
17332
17929
  }, {
17333
17930
  children: jsx("template", {
17334
17931
  children: jsx("table", {
@@ -17418,4 +18015,4 @@ function GoATwoColumnLayout(props) {
17418
18015
  }), void 0);
17419
18016
  }
17420
18017
 
17421
- export { GoAAppFooter, GoAAppFooterMetaSection, GoAAppFooterNavSection, GoAAppHeader, GoABadge, GoABlock, GoAButton, GoAButtonGroup, GoACallout, GoACheckbox, GoAChip, GoACircularProgress, GoAContainer, GoADivider, GoADropdown, GoADropdownItem, GoADropdownOption, GoAEmergencyBadge, GoAFormItem, GoAGrid, GoAHeroBanner, GoAHeroBannerActions, GoAIcon, GoAIconButton, GoAImportantBadge, GoAInfoBadge, GoAInput, GoAInputDate, GoAInputDateTime, GoAInputEmail, GoAInputFile, GoAInputMonth, GoAInputNumber, GoAInputPassword, GoAInputRange, GoAInputSearch, GoAInputTel, GoAInputText, GoAInputTime, GoAInputUrl, GoAMicrositeHeader, GoAModal, GoANotification, GoAOneColumnLayout, GoAPageBlock, GoARadioGroup, GoARadioItem, GoASkeleton, GoASpacer, GoASpinner, GoASuccessBadge, GoATable, GoATextArea, GoATwoColumnLayout };
18018
+ export { GoAAppFooter, GoAAppFooterMetaSection, GoAAppFooterNavSection, GoAAppHeader, GoABadge, GoABlock, GoAButton, GoAButtonGroup, GoACallout, GoACheckbox, GoAChip, GoACircularProgress, GoAContainer, GoADivider, GoADropdown, GoADropdownItem, GoADropdownOption, GoAEmergencyBadge, GoAFormItem, GoAGrid, GoAHeroBanner, GoAHeroBannerActions, GoAIcon, GoAIconButton, GoAImportantBadge, GoAInfoBadge, GoAInput, GoAInputDate, GoAInputDateTime, GoAInputEmail, GoAInputFile, GoAInputMonth, GoAInputNumber, GoAInputPassword, GoAInputRange, GoAInputSearch, GoAInputTel, GoAInputText, GoAInputTime, GoAInputUrl, GoAMicrositeHeader, GoAModal, GoANotification, GoAOneColumnLayout, GoAPageBlock, GoAPagination, GoARadioGroup, GoARadioItem, GoASkeleton, GoASpacer, GoASpinner, GoASuccessBadge, GoATable, GoATextArea, GoATwoColumnLayout };