@abgov/web-components 1.3.0 → 1.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.
@@ -875,6 +875,14 @@ if (typeof HTMLElement === 'function') {
875
875
  };
876
876
  }
877
877
 
878
+ var reset = '';
879
+
880
+ var fonts = '';
881
+
882
+ var variables = '';
883
+
884
+ var tokens = '';
885
+
878
886
  /* libs/web-components/src/components/app-header/AppHeader.svelte generated by Svelte v3.51.0 */
879
887
 
880
888
  function create_else_block$4(ctx) {
@@ -925,7 +933,7 @@ function create_else_block$4(ctx) {
925
933
  }
926
934
 
927
935
  // (19:4) {#if url}
928
- function create_if_block$h(ctx) {
936
+ function create_if_block$i(ctx) {
929
937
  let a;
930
938
  let img0;
931
939
  let img0_src_value;
@@ -977,7 +985,7 @@ function create_if_block$h(ctx) {
977
985
  };
978
986
  }
979
987
 
980
- function create_fragment$F(ctx) {
988
+ function create_fragment$G(ctx) {
981
989
  let div2;
982
990
  let div1;
983
991
  let t;
@@ -985,7 +993,7 @@ function create_fragment$F(ctx) {
985
993
  let div2_style_value;
986
994
 
987
995
  function select_block_type(ctx, dirty) {
988
- if (/*url*/ ctx[1]) return create_if_block$h;
996
+ if (/*url*/ ctx[1]) return create_if_block$i;
989
997
  return create_else_block$4;
990
998
  }
991
999
 
@@ -1043,7 +1051,7 @@ function create_fragment$F(ctx) {
1043
1051
  };
1044
1052
  }
1045
1053
 
1046
- function instance$z($$self, $$props, $$invalidate) {
1054
+ function instance$A($$self, $$props, $$invalidate) {
1047
1055
  let { heading = "" } = $$props;
1048
1056
  let { url = "" } = $$props;
1049
1057
  let { testid = "" } = $$props;
@@ -1062,7 +1070,7 @@ function instance$z($$self, $$props, $$invalidate) {
1062
1070
  class AppHeader extends SvelteElement {
1063
1071
  constructor(options) {
1064
1072
  super();
1065
- 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>`;
1073
+ 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>`;
1066
1074
 
1067
1075
  init(
1068
1076
  this,
@@ -1071,8 +1079,8 @@ class AppHeader extends SvelteElement {
1071
1079
  props: attribute_to_object(this.attributes),
1072
1080
  customElement: true
1073
1081
  },
1074
- instance$z,
1075
- create_fragment$F,
1082
+ instance$A,
1083
+ create_fragment$G,
1076
1084
  safe_not_equal,
1077
1085
  {
1078
1086
  heading: 0,
@@ -1140,10 +1148,10 @@ customElements.define("goa-app-header", AppHeader);
1140
1148
 
1141
1149
  function calculateMargin(mt, mr, mb, ml) {
1142
1150
  return [
1143
- mt && `margin-top:var(--goa-spacing-${mt});`,
1144
- mr && `margin-right:var(--goa-spacing-${mr});`,
1145
- mb && `margin-bottom:var(--goa-spacing-${mb});`,
1146
- ml && `margin-left:var(--goa-spacing-${ml});`
1151
+ mt && `margin-top:var(--goa-space-${mt});`,
1152
+ mr && `margin-right:var(--goa-space-${mr});`,
1153
+ mb && `margin-bottom:var(--goa-space-${mb});`,
1154
+ ml && `margin-left:var(--goa-space-${ml});`
1147
1155
  ].join(" ");
1148
1156
  }
1149
1157
  function injectCss(el, rootSelector, css, media) {
@@ -1234,7 +1242,7 @@ function create_if_block_1$a(ctx) {
1234
1242
  }
1235
1243
 
1236
1244
  // (50:2) {#if content}
1237
- function create_if_block$g(ctx) {
1245
+ function create_if_block$h(ctx) {
1238
1246
  let div;
1239
1247
  let t;
1240
1248
 
@@ -1257,7 +1265,7 @@ function create_if_block$g(ctx) {
1257
1265
  };
1258
1266
  }
1259
1267
 
1260
- function create_fragment$E(ctx) {
1268
+ function create_fragment$F(ctx) {
1261
1269
  let div;
1262
1270
  let t;
1263
1271
  let div_style_value;
@@ -1270,7 +1278,7 @@ function create_fragment$E(ctx) {
1270
1278
 
1271
1279
  let current_block_type = select_block_type(ctx);
1272
1280
  let if_block0 = current_block_type(ctx);
1273
- let if_block1 = /*content*/ ctx[2] && create_if_block$g(ctx);
1281
+ let if_block1 = /*content*/ ctx[2] && create_if_block$h(ctx);
1274
1282
 
1275
1283
  return {
1276
1284
  c() {
@@ -1308,7 +1316,7 @@ function create_fragment$E(ctx) {
1308
1316
  if (if_block1) {
1309
1317
  if_block1.p(ctx, dirty);
1310
1318
  } else {
1311
- if_block1 = create_if_block$g(ctx);
1319
+ if_block1 = create_if_block$h(ctx);
1312
1320
  if_block1.c();
1313
1321
  if_block1.m(div, null);
1314
1322
  }
@@ -1343,7 +1351,7 @@ function create_fragment$E(ctx) {
1343
1351
  };
1344
1352
  }
1345
1353
 
1346
- function instance$y($$self, $$props, $$invalidate) {
1354
+ function instance$z($$self, $$props, $$invalidate) {
1347
1355
  let showIcon;
1348
1356
  let iconType;
1349
1357
  const [Types, validateType] = typeValidator("Badge type", ["success", "important", "information", "emergency", "dark", "midtone", "light"], true);
@@ -1399,10 +1407,7 @@ function instance$y($$self, $$props, $$invalidate) {
1399
1407
  class Badge extends SvelteElement {
1400
1408
  constructor(options) {
1401
1409
  super();
1402
-
1403
- 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(
1404
- --font-valign-fix
1405
- )}.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>`;
1410
+ 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>`;
1406
1411
 
1407
1412
  init(
1408
1413
  this,
@@ -1411,8 +1416,8 @@ class Badge extends SvelteElement {
1411
1416
  props: attribute_to_object(this.attributes),
1412
1417
  customElement: true
1413
1418
  },
1414
- instance$y,
1415
- create_fragment$E,
1419
+ instance$z,
1420
+ create_fragment$F,
1416
1421
  safe_not_equal,
1417
1422
  {
1418
1423
  type: 0,
@@ -1520,7 +1525,7 @@ customElements.define("goa-badge", Badge);
1520
1525
 
1521
1526
  /* libs/web-components/src/components/block/Block.svelte generated by Svelte v3.51.0 */
1522
1527
 
1523
- function create_fragment$D(ctx) {
1528
+ function create_fragment$E(ctx) {
1524
1529
  let div;
1525
1530
  let slot;
1526
1531
  let div_style_value;
@@ -1533,8 +1538,8 @@ function create_fragment$D(ctx) {
1533
1538
  attr(div, "class", "block");
1534
1539
 
1535
1540
  attr(div, "style", div_style_value = `
1536
- ${calculateMargin(/*mt*/ ctx[3], /*mr*/ ctx[4], /*mb*/ ctx[5], /*ml*/ ctx[6])}
1537
- --gap: var(--goa-spacing-${/*gap*/ ctx[0]});
1541
+ ${calculateMargin(/*mt*/ ctx[3], /*mr*/ ctx[4], /*mb*/ ctx[5], /*ml*/ ctx[6])};
1542
+ --gap: var(--goa-space-${/*gap*/ ctx[0]});
1538
1543
  --alignment: ${/*alignment*/ ctx[2]};
1539
1544
  --direction: ${/*direction*/ ctx[1]};
1540
1545
  `);
@@ -1545,8 +1550,8 @@ function create_fragment$D(ctx) {
1545
1550
  },
1546
1551
  p(ctx, [dirty]) {
1547
1552
  if (dirty & /*mt, mr, mb, ml, gap, alignment, direction*/ 127 && div_style_value !== (div_style_value = `
1548
- ${calculateMargin(/*mt*/ ctx[3], /*mr*/ ctx[4], /*mb*/ ctx[5], /*ml*/ ctx[6])}
1549
- --gap: var(--goa-spacing-${/*gap*/ ctx[0]});
1553
+ ${calculateMargin(/*mt*/ ctx[3], /*mr*/ ctx[4], /*mb*/ ctx[5], /*ml*/ ctx[6])};
1554
+ --gap: var(--goa-space-${/*gap*/ ctx[0]});
1550
1555
  --alignment: ${/*alignment*/ ctx[2]};
1551
1556
  --direction: ${/*direction*/ ctx[1]};
1552
1557
  `)) {
@@ -1561,7 +1566,7 @@ function create_fragment$D(ctx) {
1561
1566
  };
1562
1567
  }
1563
1568
 
1564
- function instance$x($$self, $$props, $$invalidate) {
1569
+ function instance$y($$self, $$props, $$invalidate) {
1565
1570
  let { gap = "m" } = $$props;
1566
1571
  let { direction = "row" } = $$props;
1567
1572
  let { alignment = "start" } = $$props;
@@ -1595,8 +1600,8 @@ class Block extends SvelteElement {
1595
1600
  props: attribute_to_object(this.attributes),
1596
1601
  customElement: true
1597
1602
  },
1598
- instance$x,
1599
- create_fragment$D,
1603
+ instance$y,
1604
+ create_fragment$E,
1600
1605
  safe_not_equal,
1601
1606
  {
1602
1607
  gap: 0,
@@ -1696,7 +1701,7 @@ customElements.define("goa-block", Block);
1696
1701
 
1697
1702
  function create_else_block$2(ctx) {
1698
1703
  let t0;
1699
- let slot;
1704
+ let span;
1700
1705
  let t1;
1701
1706
  let if_block1_anchor;
1702
1707
  let if_block0 = /*leadingicon*/ ctx[3] && create_if_block_2$6(ctx);
@@ -1706,16 +1711,17 @@ function create_else_block$2(ctx) {
1706
1711
  c() {
1707
1712
  if (if_block0) if_block0.c();
1708
1713
  t0 = space();
1709
- slot = element("slot");
1714
+ span = element("span");
1715
+ span.innerHTML = `<slot></slot>`;
1710
1716
  t1 = space();
1711
1717
  if (if_block1) if_block1.c();
1712
1718
  if_block1_anchor = empty();
1713
- attr(slot, "class", "text");
1719
+ attr(span, "class", "text");
1714
1720
  },
1715
1721
  m(target, anchor) {
1716
1722
  if (if_block0) if_block0.m(target, anchor);
1717
1723
  insert(target, t0, anchor);
1718
- insert(target, slot, anchor);
1724
+ insert(target, span, anchor);
1719
1725
  insert(target, t1, anchor);
1720
1726
  if (if_block1) if_block1.m(target, anchor);
1721
1727
  insert(target, if_block1_anchor, anchor);
@@ -1750,7 +1756,7 @@ function create_else_block$2(ctx) {
1750
1756
  d(detaching) {
1751
1757
  if (if_block0) if_block0.d(detaching);
1752
1758
  if (detaching) detach(t0);
1753
- if (detaching) detach(slot);
1759
+ if (detaching) detach(span);
1754
1760
  if (detaching) detach(t1);
1755
1761
  if (if_block1) if_block1.d(detaching);
1756
1762
  if (detaching) detach(if_block1_anchor);
@@ -1758,37 +1764,38 @@ function create_else_block$2(ctx) {
1758
1764
  };
1759
1765
  }
1760
1766
 
1761
- // (45:2) {#if type === "start"}
1762
- function create_if_block$f(ctx) {
1763
- let slot;
1767
+ // (46:2) {#if type === "start"}
1768
+ function create_if_block$g(ctx) {
1769
+ let span;
1764
1770
  let t;
1765
1771
  let goa_icon;
1766
1772
 
1767
1773
  return {
1768
1774
  c() {
1769
- slot = element("slot");
1775
+ span = element("span");
1776
+ span.innerHTML = `<slot></slot>`;
1770
1777
  t = space();
1771
1778
  goa_icon = element("goa-icon");
1772
- attr(slot, "class", "text");
1779
+ attr(span, "class", "text");
1773
1780
  set_custom_element_data(goa_icon, "id", "trailing-icon");
1774
1781
  set_custom_element_data(goa_icon, "type", "arrow-forward");
1775
1782
  set_custom_element_data(goa_icon, "inverted", "true");
1776
1783
  },
1777
1784
  m(target, anchor) {
1778
- insert(target, slot, anchor);
1785
+ insert(target, span, anchor);
1779
1786
  insert(target, t, anchor);
1780
1787
  insert(target, goa_icon, anchor);
1781
1788
  },
1782
1789
  p: noop,
1783
1790
  d(detaching) {
1784
- if (detaching) detach(slot);
1791
+ if (detaching) detach(span);
1785
1792
  if (detaching) detach(t);
1786
1793
  if (detaching) detach(goa_icon);
1787
1794
  }
1788
1795
  };
1789
1796
  }
1790
1797
 
1791
- // (49:4) {#if leadingicon}
1798
+ // (52:4) {#if leadingicon}
1792
1799
  function create_if_block_2$6(ctx) {
1793
1800
  let goa_icon;
1794
1801
 
@@ -1797,7 +1804,7 @@ function create_if_block_2$6(ctx) {
1797
1804
  goa_icon = element("goa-icon");
1798
1805
  set_custom_element_data(goa_icon, "id", "leading-icon");
1799
1806
  set_custom_element_data(goa_icon, "type", /*leadingicon*/ ctx[3]);
1800
- set_custom_element_data(goa_icon, "inverted", /*isButtonDark*/ ctx[10]);
1807
+ set_custom_element_data(goa_icon, "inverted", /*isButtonDark*/ ctx[11]);
1801
1808
  },
1802
1809
  m(target, anchor) {
1803
1810
  insert(target, goa_icon, anchor);
@@ -1807,8 +1814,8 @@ function create_if_block_2$6(ctx) {
1807
1814
  set_custom_element_data(goa_icon, "type", /*leadingicon*/ ctx[3]);
1808
1815
  }
1809
1816
 
1810
- if (dirty & /*isButtonDark*/ 1024) {
1811
- set_custom_element_data(goa_icon, "inverted", /*isButtonDark*/ ctx[10]);
1817
+ if (dirty & /*isButtonDark*/ 2048) {
1818
+ set_custom_element_data(goa_icon, "inverted", /*isButtonDark*/ ctx[11]);
1812
1819
  }
1813
1820
  },
1814
1821
  d(detaching) {
@@ -1817,7 +1824,7 @@ function create_if_block_2$6(ctx) {
1817
1824
  };
1818
1825
  }
1819
1826
 
1820
- // (53:4) {#if trailingicon}
1827
+ // (58:4) {#if trailingicon}
1821
1828
  function create_if_block_1$9(ctx) {
1822
1829
  let goa_icon;
1823
1830
 
@@ -1826,7 +1833,7 @@ function create_if_block_1$9(ctx) {
1826
1833
  goa_icon = element("goa-icon");
1827
1834
  set_custom_element_data(goa_icon, "id", "trailing-icon");
1828
1835
  set_custom_element_data(goa_icon, "type", /*trailingicon*/ ctx[4]);
1829
- set_custom_element_data(goa_icon, "inverted", /*isButtonDark*/ ctx[10]);
1836
+ set_custom_element_data(goa_icon, "inverted", /*isButtonDark*/ ctx[11]);
1830
1837
  },
1831
1838
  m(target, anchor) {
1832
1839
  insert(target, goa_icon, anchor);
@@ -1836,8 +1843,8 @@ function create_if_block_1$9(ctx) {
1836
1843
  set_custom_element_data(goa_icon, "type", /*trailingicon*/ ctx[4]);
1837
1844
  }
1838
1845
 
1839
- if (dirty & /*isButtonDark*/ 1024) {
1840
- set_custom_element_data(goa_icon, "inverted", /*isButtonDark*/ ctx[10]);
1846
+ if (dirty & /*isButtonDark*/ 2048) {
1847
+ set_custom_element_data(goa_icon, "inverted", /*isButtonDark*/ ctx[11]);
1841
1848
  }
1842
1849
  },
1843
1850
  d(detaching) {
@@ -1846,7 +1853,7 @@ function create_if_block_1$9(ctx) {
1846
1853
  };
1847
1854
  }
1848
1855
 
1849
- function create_fragment$C(ctx) {
1856
+ function create_fragment$D(ctx) {
1850
1857
  let button;
1851
1858
  let button_class_value;
1852
1859
  let button_style_value;
@@ -1854,7 +1861,7 @@ function create_fragment$C(ctx) {
1854
1861
  let dispose;
1855
1862
 
1856
1863
  function select_block_type(ctx, dirty) {
1857
- if (/*type*/ ctx[0] === "start") return create_if_block$f;
1864
+ if (/*type*/ ctx[0] === "start") return create_if_block$g;
1858
1865
  return create_else_block$2;
1859
1866
  }
1860
1867
 
@@ -1868,7 +1875,7 @@ function create_fragment$C(ctx) {
1868
1875
  this.c = noop;
1869
1876
  attr(button, "class", button_class_value = "" + (/*type*/ ctx[0] + " " + /*size*/ ctx[1] + " " + /*variant*/ ctx[2]));
1870
1877
  attr(button, "style", button_style_value = calculateMargin(/*mt*/ ctx[6], /*mr*/ ctx[7], /*mb*/ ctx[8], /*ml*/ ctx[9]));
1871
- button.disabled = /*isDisabled*/ ctx[11];
1878
+ button.disabled = /*isDisabled*/ ctx[10];
1872
1879
  attr(button, "data-testid", /*testid*/ ctx[5]);
1873
1880
  toggle_class(button, "leading", /*leadingicon*/ ctx[3]);
1874
1881
  toggle_class(button, "trailing", /*trailingicon*/ ctx[4] || /*type*/ ctx[0] === "start");
@@ -1879,8 +1886,8 @@ function create_fragment$C(ctx) {
1879
1886
 
1880
1887
  if (!mounted) {
1881
1888
  dispose = [
1882
- listen(button, "click", clickHandler),
1883
- listen(button, "click", clickHandler)
1889
+ listen(button, "click", /*clickHandler*/ ctx[12]),
1890
+ listen(button, "click", /*clickHandler*/ ctx[12])
1884
1891
  ];
1885
1892
 
1886
1893
  mounted = true;
@@ -1907,8 +1914,8 @@ function create_fragment$C(ctx) {
1907
1914
  attr(button, "style", button_style_value);
1908
1915
  }
1909
1916
 
1910
- if (dirty & /*isDisabled*/ 2048) {
1911
- button.disabled = /*isDisabled*/ ctx[11];
1917
+ if (dirty & /*isDisabled*/ 1024) {
1918
+ button.disabled = /*isDisabled*/ ctx[10];
1912
1919
  }
1913
1920
 
1914
1921
  if (dirty & /*testid*/ 32) {
@@ -1934,12 +1941,7 @@ function create_fragment$C(ctx) {
1934
1941
  };
1935
1942
  }
1936
1943
 
1937
- function clickHandler(e) {
1938
- this.dispatchEvent(new CustomEvent("_click", { composed: true, bubbles: true }));
1939
- e.stopPropagation();
1940
- }
1941
-
1942
- function instance$w($$self, $$props, $$invalidate) {
1944
+ function instance$x($$self, $$props, $$invalidate) {
1943
1945
  let isDisabled;
1944
1946
  let isButtonDark;
1945
1947
  const [Types, validateType] = typeValidator("Button type", ["primary", "submit", "secondary", "tertiary", "start"], true);
@@ -1957,6 +1959,12 @@ function instance$w($$self, $$props, $$invalidate) {
1957
1959
  let { mb = null } = $$props;
1958
1960
  let { ml = null } = $$props;
1959
1961
 
1962
+ function clickHandler(e) {
1963
+ if (!isDisabled) {
1964
+ this.dispatchEvent(new CustomEvent("_click", { composed: true, bubbles: true }));
1965
+ }
1966
+ }
1967
+
1960
1968
  onMount(() => {
1961
1969
  validateType(type);
1962
1970
  validateSize(size);
@@ -1967,7 +1975,7 @@ function instance$w($$self, $$props, $$invalidate) {
1967
1975
  if ('type' in $$props) $$invalidate(0, type = $$props.type);
1968
1976
  if ('size' in $$props) $$invalidate(1, size = $$props.size);
1969
1977
  if ('variant' in $$props) $$invalidate(2, variant = $$props.variant);
1970
- if ('disabled' in $$props) $$invalidate(12, disabled = $$props.disabled);
1978
+ if ('disabled' in $$props) $$invalidate(13, disabled = $$props.disabled);
1971
1979
  if ('leadingicon' in $$props) $$invalidate(3, leadingicon = $$props.leadingicon);
1972
1980
  if ('trailingicon' in $$props) $$invalidate(4, trailingicon = $$props.trailingicon);
1973
1981
  if ('testid' in $$props) $$invalidate(5, testid = $$props.testid);
@@ -1978,12 +1986,12 @@ function instance$w($$self, $$props, $$invalidate) {
1978
1986
  };
1979
1987
 
1980
1988
  $$self.$$.update = () => {
1981
- if ($$self.$$.dirty & /*disabled*/ 4096) {
1982
- $$invalidate(11, isDisabled = toBoolean(disabled));
1989
+ if ($$self.$$.dirty & /*disabled*/ 8192) {
1990
+ $$invalidate(10, isDisabled = toBoolean(disabled));
1983
1991
  }
1984
1992
 
1985
1993
  if ($$self.$$.dirty & /*type*/ 1) {
1986
- $$invalidate(10, isButtonDark = type === "primary" || type === "start");
1994
+ $$invalidate(11, isButtonDark = type === "primary" || type === "start");
1987
1995
  }
1988
1996
  };
1989
1997
 
@@ -1998,8 +2006,9 @@ function instance$w($$self, $$props, $$invalidate) {
1998
2006
  mr,
1999
2007
  mb,
2000
2008
  ml,
2001
- isButtonDark,
2002
2009
  isDisabled,
2010
+ isButtonDark,
2011
+ clickHandler,
2003
2012
  disabled
2004
2013
  ];
2005
2014
  }
@@ -2008,10 +2017,8 @@ class Button extends SvelteElement {
2008
2017
  constructor(options) {
2009
2018
  super();
2010
2019
 
2011
- 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,
2012
- border-color 0.2s ease-in-out}.text{padding-bottom:var(
2013
- --font-valign-fix
2014
- )}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>`;
2020
+ 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,
2021
+ 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>`;
2015
2022
 
2016
2023
  init(
2017
2024
  this,
@@ -2020,14 +2027,14 @@ class Button extends SvelteElement {
2020
2027
  props: attribute_to_object(this.attributes),
2021
2028
  customElement: true
2022
2029
  },
2023
- instance$w,
2024
- create_fragment$C,
2030
+ instance$x,
2031
+ create_fragment$D,
2025
2032
  safe_not_equal,
2026
2033
  {
2027
2034
  type: 0,
2028
2035
  size: 1,
2029
2036
  variant: 2,
2030
- disabled: 12,
2037
+ disabled: 13,
2031
2038
  leadingicon: 3,
2032
2039
  trailingicon: 4,
2033
2040
  testid: 5,
@@ -2095,7 +2102,7 @@ class Button extends SvelteElement {
2095
2102
  }
2096
2103
 
2097
2104
  get disabled() {
2098
- return this.$$.ctx[12];
2105
+ return this.$$.ctx[13];
2099
2106
  }
2100
2107
 
2101
2108
  set disabled(disabled) {
@@ -2171,7 +2178,7 @@ customElements.define("goa-button", Button);
2171
2178
 
2172
2179
  /* libs/web-components/src/components/button-group/ButtonGroup.svelte generated by Svelte v3.51.0 */
2173
2180
 
2174
- function create_fragment$B(ctx) {
2181
+ function create_fragment$C(ctx) {
2175
2182
  let div;
2176
2183
  let slot;
2177
2184
  let div_style_value;
@@ -2205,7 +2212,7 @@ function create_fragment$B(ctx) {
2205
2212
  };
2206
2213
  }
2207
2214
 
2208
- function instance$v($$self, $$props, $$invalidate) {
2215
+ function instance$w($$self, $$props, $$invalidate) {
2209
2216
  let _alignment;
2210
2217
  let { alignment = "start" } = $$props;
2211
2218
  let { gap = "relaxed" } = $$props;
@@ -2248,7 +2255,7 @@ function instance$v($$self, $$props, $$invalidate) {
2248
2255
  class ButtonGroup extends SvelteElement {
2249
2256
  constructor(options) {
2250
2257
  super();
2251
- 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>`;
2258
+ 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>`;
2252
2259
 
2253
2260
  init(
2254
2261
  this,
@@ -2257,8 +2264,8 @@ class ButtonGroup extends SvelteElement {
2257
2264
  props: attribute_to_object(this.attributes),
2258
2265
  customElement: true
2259
2266
  },
2260
- instance$v,
2261
- create_fragment$B,
2267
+ instance$w,
2268
+ create_fragment$C,
2262
2269
  safe_not_equal,
2263
2270
  {
2264
2271
  alignment: 7,
@@ -2356,7 +2363,7 @@ customElements.define("goa-button-group", ButtonGroup);
2356
2363
 
2357
2364
  /* libs/web-components/src/components/callout/Callout.svelte generated by Svelte v3.51.0 */
2358
2365
 
2359
- function create_if_block$e(ctx) {
2366
+ function create_if_block$f(ctx) {
2360
2367
  let h3;
2361
2368
  let t;
2362
2369
 
@@ -2378,7 +2385,7 @@ function create_if_block$e(ctx) {
2378
2385
  };
2379
2386
  }
2380
2387
 
2381
- function create_fragment$A(ctx) {
2388
+ function create_fragment$B(ctx) {
2382
2389
  let div;
2383
2390
  let span0;
2384
2391
  let goa_icon;
@@ -2389,7 +2396,7 @@ function create_fragment$A(ctx) {
2389
2396
  let t1;
2390
2397
  let slot;
2391
2398
  let div_style_value;
2392
- let if_block = /*heading*/ ctx[5] && create_if_block$e(ctx);
2399
+ let if_block = /*heading*/ ctx[5] && create_if_block$f(ctx);
2393
2400
 
2394
2401
  return {
2395
2402
  c() {
@@ -2437,7 +2444,7 @@ function create_fragment$A(ctx) {
2437
2444
  if (if_block) {
2438
2445
  if_block.p(ctx, dirty);
2439
2446
  } else {
2440
- if_block = create_if_block$e(ctx);
2447
+ if_block = create_if_block$f(ctx);
2441
2448
  if_block.c();
2442
2449
  if_block.m(span1, t1);
2443
2450
  }
@@ -2463,7 +2470,7 @@ function create_fragment$A(ctx) {
2463
2470
  };
2464
2471
  }
2465
2472
 
2466
- function instance$u($$self, $$props, $$invalidate) {
2473
+ function instance$v($$self, $$props, $$invalidate) {
2467
2474
  let iconType;
2468
2475
  const [Types, validateType] = typeValidator("Callout type", ["emergency", "important", "information", "event", "success"], true);
2469
2476
  let { mt = null } = $$props;
@@ -2508,7 +2515,7 @@ function instance$u($$self, $$props, $$invalidate) {
2508
2515
  class Callout extends SvelteElement {
2509
2516
  constructor(options) {
2510
2517
  super();
2511
- 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>`;
2518
+ 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>`;
2512
2519
 
2513
2520
  init(
2514
2521
  this,
@@ -2517,8 +2524,8 @@ class Callout extends SvelteElement {
2517
2524
  props: attribute_to_object(this.attributes),
2518
2525
  customElement: true
2519
2526
  },
2520
- instance$u,
2521
- create_fragment$A,
2527
+ instance$v,
2528
+ create_fragment$B,
2522
2529
  safe_not_equal,
2523
2530
  {
2524
2531
  mt: 0,
@@ -2616,7 +2623,7 @@ customElements.define("goa-callout", Callout);
2616
2623
 
2617
2624
  /* libs/web-components/src/components/card-actions/CardActions.svelte generated by Svelte v3.51.0 */
2618
2625
 
2619
- function create_fragment$z(ctx) {
2626
+ function create_fragment$A(ctx) {
2620
2627
  let goa_card_content;
2621
2628
 
2622
2629
  return {
@@ -2649,7 +2656,7 @@ class CardActions extends SvelteElement {
2649
2656
  customElement: true
2650
2657
  },
2651
2658
  null,
2652
- create_fragment$z,
2659
+ create_fragment$A,
2653
2660
  safe_not_equal,
2654
2661
  {},
2655
2662
  null
@@ -2667,7 +2674,7 @@ customElements.define("goa-card-actions", CardActions);
2667
2674
 
2668
2675
  /* libs/web-components/src/components/card/Card.svelte generated by Svelte v3.51.0 */
2669
2676
 
2670
- function create_fragment$y(ctx) {
2677
+ function create_fragment$z(ctx) {
2671
2678
  let div;
2672
2679
  let slot;
2673
2680
  let div_style_value;
@@ -2681,7 +2688,7 @@ function create_fragment$y(ctx) {
2681
2688
  attr(div, "class", "card");
2682
2689
 
2683
2690
  attr(div, "style", div_style_value = "--width: " + /*width*/ ctx[1] + "; --height: " + (/*height*/ ctx[2] === 'auto' ? 'auto' : '100%') + "; " + calculateMargin(/*mt*/ ctx[3], /*mr*/ ctx[4], /*mb*/ ctx[5], /*ml*/ ctx[6]) + " " + (/*elevation*/ ctx[0] === 0
2684
- ? `border: 1px solid var(--color-gray-200);`
2691
+ ? `border: 1px solid var(--goa-color-greyscale-200);`
2685
2692
  : `box-shadow: var(--shadow-${/*elevation*/ ctx[0]});`) + "");
2686
2693
  },
2687
2694
  m(target, anchor) {
@@ -2694,7 +2701,7 @@ function create_fragment$y(ctx) {
2694
2701
  }
2695
2702
 
2696
2703
  if (dirty & /*width, height, mt, mr, mb, ml, elevation*/ 127 && div_style_value !== (div_style_value = "--width: " + /*width*/ ctx[1] + "; --height: " + (/*height*/ ctx[2] === 'auto' ? 'auto' : '100%') + "; " + calculateMargin(/*mt*/ ctx[3], /*mr*/ ctx[4], /*mb*/ ctx[5], /*ml*/ ctx[6]) + " " + (/*elevation*/ ctx[0] === 0
2697
- ? `border: 1px solid var(--color-gray-200);`
2704
+ ? `border: 1px solid var(--goa-color-greyscale-200);`
2698
2705
  : `box-shadow: var(--shadow-${/*elevation*/ ctx[0]});`) + "")) {
2699
2706
  attr(div, "style", div_style_value);
2700
2707
  }
@@ -2707,7 +2714,7 @@ function create_fragment$y(ctx) {
2707
2714
  };
2708
2715
  }
2709
2716
 
2710
- function instance$t($$self, $$props, $$invalidate) {
2717
+ function instance$u($$self, $$props, $$invalidate) {
2711
2718
  let { elevation = 0 } = $$props;
2712
2719
  let { width = "100%" } = $$props;
2713
2720
  let { height = "auto" } = $$props;
@@ -2734,7 +2741,7 @@ function instance$t($$self, $$props, $$invalidate) {
2734
2741
  class Card extends SvelteElement {
2735
2742
  constructor(options) {
2736
2743
  super();
2737
- 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>`;
2744
+ 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>`;
2738
2745
 
2739
2746
  init(
2740
2747
  this,
@@ -2743,8 +2750,8 @@ class Card extends SvelteElement {
2743
2750
  props: attribute_to_object(this.attributes),
2744
2751
  customElement: true
2745
2752
  },
2746
- instance$t,
2747
- create_fragment$y,
2753
+ instance$u,
2754
+ create_fragment$z,
2748
2755
  safe_not_equal,
2749
2756
  {
2750
2757
  elevation: 0,
@@ -2852,7 +2859,7 @@ customElements.define("goa-card", Card);
2852
2859
 
2853
2860
  /* libs/web-components/src/components/card-content/CardContent.svelte generated by Svelte v3.51.0 */
2854
2861
 
2855
- function create_fragment$x(ctx) {
2862
+ function create_fragment$y(ctx) {
2856
2863
  let div;
2857
2864
 
2858
2865
  return {
@@ -2877,7 +2884,7 @@ function create_fragment$x(ctx) {
2877
2884
  class CardContent extends SvelteElement {
2878
2885
  constructor(options) {
2879
2886
  super();
2880
- this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.card-content{padding:1rem}</style>`;
2887
+ this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.card-content{padding:1rem}</style>`;
2881
2888
 
2882
2889
  init(
2883
2890
  this,
@@ -2887,7 +2894,7 @@ class CardContent extends SvelteElement {
2887
2894
  customElement: true
2888
2895
  },
2889
2896
  null,
2890
- create_fragment$x,
2897
+ create_fragment$y,
2891
2898
  safe_not_equal,
2892
2899
  {},
2893
2900
  null
@@ -2905,7 +2912,7 @@ customElements.define("goa-card-content", CardContent);
2905
2912
 
2906
2913
  /* libs/web-components/src/components/card-group/CardGroup.svelte generated by Svelte v3.51.0 */
2907
2914
 
2908
- function create_fragment$w(ctx) {
2915
+ function create_fragment$x(ctx) {
2909
2916
  let div;
2910
2917
 
2911
2918
  return {
@@ -2930,7 +2937,7 @@ function create_fragment$w(ctx) {
2930
2937
  class CardGroup extends SvelteElement {
2931
2938
  constructor(options) {
2932
2939
  super();
2933
- 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>`;
2940
+ 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>`;
2934
2941
 
2935
2942
  init(
2936
2943
  this,
@@ -2940,7 +2947,7 @@ class CardGroup extends SvelteElement {
2940
2947
  customElement: true
2941
2948
  },
2942
2949
  null,
2943
- create_fragment$w,
2950
+ create_fragment$x,
2944
2951
  safe_not_equal,
2945
2952
  {},
2946
2953
  null
@@ -2958,7 +2965,7 @@ customElements.define("goa-card-group", CardGroup);
2958
2965
 
2959
2966
  /* libs/web-components/src/components/card-image/CardImage.svelte generated by Svelte v3.51.0 */
2960
2967
 
2961
- function create_fragment$v(ctx) {
2968
+ function create_fragment$w(ctx) {
2962
2969
  let div;
2963
2970
 
2964
2971
  return {
@@ -2990,7 +2997,7 @@ function create_fragment$v(ctx) {
2990
2997
  };
2991
2998
  }
2992
2999
 
2993
- function instance$s($$self, $$props, $$invalidate) {
3000
+ function instance$t($$self, $$props, $$invalidate) {
2994
3001
  let { src } = $$props;
2995
3002
  let { height = "100%" } = $$props;
2996
3003
 
@@ -3005,7 +3012,7 @@ function instance$s($$self, $$props, $$invalidate) {
3005
3012
  class CardImage extends SvelteElement {
3006
3013
  constructor(options) {
3007
3014
  super();
3008
- this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}</style>`;
3015
+ this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}</style>`;
3009
3016
 
3010
3017
  init(
3011
3018
  this,
@@ -3014,8 +3021,8 @@ class CardImage extends SvelteElement {
3014
3021
  props: attribute_to_object(this.attributes),
3015
3022
  customElement: true
3016
3023
  },
3017
- instance$s,
3018
- create_fragment$v,
3024
+ instance$t,
3025
+ create_fragment$w,
3019
3026
  safe_not_equal,
3020
3027
  { src: 0, height: 1 },
3021
3028
  null
@@ -3085,7 +3092,7 @@ function create_if_block_1$8(ctx) {
3085
3092
  }
3086
3093
 
3087
3094
  // (68:4) {#if isIndeterminate}
3088
- function create_if_block$d(ctx) {
3095
+ function create_if_block$e(ctx) {
3089
3096
  let svg;
3090
3097
  let rect;
3091
3098
 
@@ -3110,7 +3117,7 @@ function create_if_block$d(ctx) {
3110
3117
  };
3111
3118
  }
3112
3119
 
3113
- function create_fragment$u(ctx) {
3120
+ function create_fragment$v(ctx) {
3114
3121
  let label;
3115
3122
  let div0;
3116
3123
  let input;
@@ -3126,7 +3133,7 @@ function create_fragment$u(ctx) {
3126
3133
  let dispose;
3127
3134
 
3128
3135
  function select_block_type(ctx, dirty) {
3129
- if (/*isIndeterminate*/ ctx[10]) return create_if_block$d;
3136
+ if (/*isIndeterminate*/ ctx[10]) return create_if_block$e;
3130
3137
  if (/*isChecked*/ ctx[9]) return create_if_block_1$8;
3131
3138
  }
3132
3139
 
@@ -3255,7 +3262,7 @@ function create_fragment$u(ctx) {
3255
3262
  };
3256
3263
  }
3257
3264
 
3258
- function instance$r($$self, $$props, $$invalidate) {
3265
+ function instance$s($$self, $$props, $$invalidate) {
3259
3266
  let isDisabled;
3260
3267
  let isError;
3261
3268
  let isChecked;
@@ -3358,7 +3365,7 @@ function instance$r($$self, $$props, $$invalidate) {
3358
3365
  class Checkbox extends SvelteElement {
3359
3366
  constructor(options) {
3360
3367
  super();
3361
- 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>`;
3368
+ 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>`;
3362
3369
 
3363
3370
  init(
3364
3371
  this,
@@ -3367,8 +3374,8 @@ class Checkbox extends SvelteElement {
3367
3374
  props: attribute_to_object(this.attributes),
3368
3375
  customElement: true
3369
3376
  },
3370
- instance$r,
3371
- create_fragment$u,
3377
+ instance$s,
3378
+ create_fragment$v,
3372
3379
  safe_not_equal,
3373
3380
  {
3374
3381
  name: 0,
@@ -3554,7 +3561,7 @@ function create_if_block_1$7(ctx) {
3554
3561
  }
3555
3562
 
3556
3563
  // (54:2) {#if _deletable}
3557
- function create_if_block$c(ctx) {
3564
+ function create_if_block$d(ctx) {
3558
3565
  let goa_icon;
3559
3566
  let goa_icon_fillcolor_value;
3560
3567
  let goa_icon_opacity_value;
@@ -3568,10 +3575,10 @@ function create_if_block$c(ctx) {
3568
3575
  set_custom_element_data(goa_icon, "type", "close-circle");
3569
3576
 
3570
3577
  set_custom_element_data(goa_icon, "fillcolor", goa_icon_fillcolor_value = /*_error*/ ctx[10]
3571
- ? "var(--goa-color-status-emergency)"
3578
+ ? "var(--goa-color-emergency-default)"
3572
3579
  : /*_hovering*/ ctx[9]
3573
- ? "var(--goa-color-interactive--hover)"
3574
- : "var(--color-gray-600)");
3580
+ ? "var(--goa-color-interactive-hover)"
3581
+ : "var(--goa-color-greyscale-700)");
3575
3582
 
3576
3583
  set_custom_element_data(goa_icon, "opacity", goa_icon_opacity_value = /*_error*/ ctx[10] ? /*_hovering*/ ctx[9] ? 1 : 0.5 : 1);
3577
3584
  },
@@ -3580,10 +3587,10 @@ function create_if_block$c(ctx) {
3580
3587
  },
3581
3588
  p(ctx, dirty) {
3582
3589
  if (dirty & /*_error, _hovering*/ 1536 && goa_icon_fillcolor_value !== (goa_icon_fillcolor_value = /*_error*/ ctx[10]
3583
- ? "var(--goa-color-status-emergency)"
3590
+ ? "var(--goa-color-emergency-default)"
3584
3591
  : /*_hovering*/ ctx[9]
3585
- ? "var(--goa-color-interactive--hover)"
3586
- : "var(--color-gray-600)")) {
3592
+ ? "var(--goa-color-interactive-hover)"
3593
+ : "var(--goa-color-greyscale-700)")) {
3587
3594
  set_custom_element_data(goa_icon, "fillcolor", goa_icon_fillcolor_value);
3588
3595
  }
3589
3596
 
@@ -3597,7 +3604,7 @@ function create_if_block$c(ctx) {
3597
3604
  };
3598
3605
  }
3599
3606
 
3600
- function create_fragment$t(ctx) {
3607
+ function create_fragment$u(ctx) {
3601
3608
  let div1;
3602
3609
  let t0;
3603
3610
  let div0;
@@ -3607,7 +3614,7 @@ function create_fragment$t(ctx) {
3607
3614
  let mounted;
3608
3615
  let dispose;
3609
3616
  let if_block0 = /*leadingicon*/ ctx[4] && create_if_block_1$7(ctx);
3610
- let if_block1 = /*_deletable*/ ctx[11] && create_if_block$c(ctx);
3617
+ let if_block1 = /*_deletable*/ ctx[11] && create_if_block$d(ctx);
3611
3618
 
3612
3619
  return {
3613
3620
  c() {
@@ -3670,7 +3677,7 @@ function create_fragment$t(ctx) {
3670
3677
  if (if_block1) {
3671
3678
  if_block1.p(ctx, dirty);
3672
3679
  } else {
3673
- if_block1 = create_if_block$c(ctx);
3680
+ if_block1 = create_if_block$d(ctx);
3674
3681
  if_block1.c();
3675
3682
  if_block1.m(div1, null);
3676
3683
  }
@@ -3712,7 +3719,7 @@ function create_fragment$t(ctx) {
3712
3719
  };
3713
3720
  }
3714
3721
 
3715
- function instance$q($$self, $$props, $$invalidate) {
3722
+ function instance$r($$self, $$props, $$invalidate) {
3716
3723
  let { mt = null } = $$props;
3717
3724
  let { mr = null } = $$props;
3718
3725
  let { mb = null } = $$props;
@@ -3800,7 +3807,7 @@ function instance$q($$self, $$props, $$invalidate) {
3800
3807
  class Chip extends SvelteElement {
3801
3808
  constructor(options) {
3802
3809
  super();
3803
- 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>`;
3810
+ 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>`;
3804
3811
 
3805
3812
  init(
3806
3813
  this,
@@ -3809,8 +3816,8 @@ class Chip extends SvelteElement {
3809
3816
  props: attribute_to_object(this.attributes),
3810
3817
  customElement: true
3811
3818
  },
3812
- instance$q,
3813
- create_fragment$t,
3819
+ instance$r,
3820
+ create_fragment$u,
3814
3821
  safe_not_equal,
3815
3822
  {
3816
3823
  mt: 0,
@@ -4036,7 +4043,7 @@ function noscroll(_node, opts) {
4036
4043
 
4037
4044
  /* libs/web-components/src/components/circular-progress/CircularProgress.svelte generated by Svelte v3.51.0 */
4038
4045
 
4039
- function create_if_block$b(ctx) {
4046
+ function create_if_block$c(ctx) {
4040
4047
  let current_block_type_index;
4041
4048
  let if_block;
4042
4049
  let if_block_anchor;
@@ -4318,10 +4325,10 @@ function create_if_block_2$5(ctx) {
4318
4325
  };
4319
4326
  }
4320
4327
 
4321
- function create_fragment$s(ctx) {
4328
+ function create_fragment$t(ctx) {
4322
4329
  let if_block_anchor;
4323
4330
  let current;
4324
- let if_block = /*isVisible*/ ctx[5] && create_if_block$b(ctx);
4331
+ let if_block = /*isVisible*/ ctx[5] && create_if_block$c(ctx);
4325
4332
 
4326
4333
  return {
4327
4334
  c() {
@@ -4343,7 +4350,7 @@ function create_fragment$s(ctx) {
4343
4350
  transition_in(if_block, 1);
4344
4351
  }
4345
4352
  } else {
4346
- if_block = create_if_block$b(ctx);
4353
+ if_block = create_if_block$c(ctx);
4347
4354
  if_block.c();
4348
4355
  transition_in(if_block, 1);
4349
4356
  if_block.m(if_block_anchor.parentNode, if_block_anchor);
@@ -4374,7 +4381,7 @@ function create_fragment$s(ctx) {
4374
4381
  };
4375
4382
  }
4376
4383
 
4377
- function instance$p($$self, $$props, $$invalidate) {
4384
+ function instance$q($$self, $$props, $$invalidate) {
4378
4385
  let isVisible;
4379
4386
  const [Variants, validateVariant] = typeValidator("Circular progress variant", ["fullscreen", "inline"]);
4380
4387
  const [Sizes, validateSize] = typeValidator("Button size", ["small", "large"]);
@@ -4425,7 +4432,7 @@ function instance$p($$self, $$props, $$invalidate) {
4425
4432
  class CircularProgress extends SvelteElement {
4426
4433
  constructor(options) {
4427
4434
  super();
4428
- 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>`;
4435
+ 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>`;
4429
4436
 
4430
4437
  init(
4431
4438
  this,
@@ -4434,8 +4441,8 @@ class CircularProgress extends SvelteElement {
4434
4441
  props: attribute_to_object(this.attributes),
4435
4442
  customElement: true
4436
4443
  },
4437
- instance$p,
4438
- create_fragment$s,
4444
+ instance$q,
4445
+ create_fragment$t,
4439
4446
  safe_not_equal,
4440
4447
  {
4441
4448
  variant: 6,
@@ -4513,7 +4520,7 @@ customElements.define("goa-circular-progress", CircularProgress);
4513
4520
 
4514
4521
  /* libs/web-components/src/components/container/Container.svelte generated by Svelte v3.51.0 */
4515
4522
 
4516
- function create_fragment$r(ctx) {
4523
+ function create_fragment$s(ctx) {
4517
4524
  let div3;
4518
4525
  let header;
4519
4526
  let div0;
@@ -4591,7 +4598,7 @@ function create_fragment$r(ctx) {
4591
4598
  };
4592
4599
  }
4593
4600
 
4594
- function instance$o($$self, $$props, $$invalidate) {
4601
+ function instance$p($$self, $$props, $$invalidate) {
4595
4602
  const [Types, validateType] = typeValidator("Container type", ["interactive", "info", "error", "success", "important", "non-interactive"]);
4596
4603
  const [Accents, validateAccent] = typeValidator("Container accent", ["thick", "thin", "filled"]);
4597
4604
  const [Paddings, validatePadding] = typeValidator("Container padding", ["relaxed", "compact"]);
@@ -4627,7 +4634,7 @@ function instance$o($$self, $$props, $$invalidate) {
4627
4634
  class Container extends SvelteElement {
4628
4635
  constructor(options) {
4629
4636
  super();
4630
- 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>`;
4637
+ 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>`;
4631
4638
 
4632
4639
  init(
4633
4640
  this,
@@ -4636,8 +4643,8 @@ class Container extends SvelteElement {
4636
4643
  props: attribute_to_object(this.attributes),
4637
4644
  customElement: true
4638
4645
  },
4639
- instance$o,
4640
- create_fragment$r,
4646
+ instance$p,
4647
+ create_fragment$s,
4641
4648
  safe_not_equal,
4642
4649
  {
4643
4650
  type: 0,
@@ -4745,7 +4752,7 @@ customElements.define("goa-container", Container);
4745
4752
 
4746
4753
  /* libs/web-components/src/components/divider/Divider.svelte generated by Svelte v3.51.0 */
4747
4754
 
4748
- function create_fragment$q(ctx) {
4755
+ function create_fragment$r(ctx) {
4749
4756
  let hr;
4750
4757
  let hr_style_value;
4751
4758
 
@@ -4776,7 +4783,7 @@ function create_fragment$q(ctx) {
4776
4783
  };
4777
4784
  }
4778
4785
 
4779
- function instance$n($$self, $$props, $$invalidate) {
4786
+ function instance$o($$self, $$props, $$invalidate) {
4780
4787
  let { testid = "" } = $$props;
4781
4788
  let { mt = null } = $$props;
4782
4789
  let { mr = null } = $$props;
@@ -4797,7 +4804,7 @@ function instance$n($$self, $$props, $$invalidate) {
4797
4804
  class Divider extends SvelteElement {
4798
4805
  constructor(options) {
4799
4806
  super();
4800
- this.shadowRoot.innerHTML = `<style>hr{padding:0;margin:0;height:1px;background-color:var(--color-gray-200);border:none}</style>`;
4807
+ this.shadowRoot.innerHTML = `<style>hr{padding:0;margin:0;height:1px;background-color:var(--goa-color-greyscale-200);border:none}</style>`;
4801
4808
 
4802
4809
  init(
4803
4810
  this,
@@ -4806,8 +4813,8 @@ class Divider extends SvelteElement {
4806
4813
  props: attribute_to_object(this.attributes),
4807
4814
  customElement: true
4808
4815
  },
4809
- instance$n,
4810
- create_fragment$q,
4816
+ instance$o,
4817
+ create_fragment$r,
4811
4818
  safe_not_equal,
4812
4819
  { testid: 0, mt: 1, mr: 2, mb: 3, ml: 4 },
4813
4820
  null
@@ -4881,25 +4888,25 @@ customElements.define("goa-divider", Divider);
4881
4888
 
4882
4889
  function get_each_context_1(ctx, list, i) {
4883
4890
  const child_ctx = ctx.slice();
4884
- child_ctx[48] = list[i];
4885
- child_ctx[52] = i;
4891
+ child_ctx[49] = list[i];
4892
+ child_ctx[53] = i;
4886
4893
  return child_ctx;
4887
4894
  }
4888
4895
 
4889
4896
  function get_each_context$4(ctx, list, i) {
4890
4897
  const child_ctx = ctx.slice();
4891
- child_ctx[48] = list[i];
4898
+ child_ctx[49] = list[i];
4892
4899
  return child_ctx;
4893
4900
  }
4894
4901
 
4895
- // (244:2) {:else}
4902
+ // (256:2) {:else}
4896
4903
  function create_else_block$1(ctx) {
4897
4904
  let t0;
4898
- let slot;
4899
- let t1;
4900
4905
  let goa_input;
4901
- let goa_input_aria_label_value;
4906
+ let goa_input_arialabel_value;
4902
4907
  let goa_input_data_testid_value;
4908
+ let t1;
4909
+ let slot;
4903
4910
  let t2;
4904
4911
  let ul;
4905
4912
  let each_blocks = [];
@@ -4909,7 +4916,7 @@ function create_else_block$1(ctx) {
4909
4916
  let dispose;
4910
4917
  let if_block = /*_isMenuVisible*/ ctx[15] && create_if_block_1$5(ctx);
4911
4918
  let each_value_1 = /*_options*/ ctx[13];
4912
- const get_key = ctx => /*index*/ ctx[52];
4919
+ const get_key = ctx => /*index*/ ctx[53];
4913
4920
 
4914
4921
  for (let i = 0; i < each_value_1.length; i += 1) {
4915
4922
  let child_ctx = get_each_context_1(ctx, each_value_1, i);
@@ -4921,9 +4928,9 @@ function create_else_block$1(ctx) {
4921
4928
  c() {
4922
4929
  if (if_block) if_block.c();
4923
4930
  t0 = space();
4924
- slot = element("slot");
4925
- t1 = space();
4926
4931
  goa_input = element("goa-input");
4932
+ t1 = space();
4933
+ slot = element("slot");
4927
4934
  t2 = space();
4928
4935
  ul = element("ul");
4929
4936
 
@@ -4937,7 +4944,7 @@ function create_else_block$1(ctx) {
4937
4944
  set_custom_element_data(goa_input, "placeholder", /*placeholder*/ ctx[4]);
4938
4945
  set_custom_element_data(goa_input, "aria-controls", "menu");
4939
4946
  set_custom_element_data(goa_input, "aria-expanded", /*_isMenuVisible*/ ctx[15]);
4940
- set_custom_element_data(goa_input, "aria-label", goa_input_aria_label_value = /*arialabel*/ ctx[1] || /*name*/ ctx[0]);
4947
+ set_custom_element_data(goa_input, "arialabel", goa_input_arialabel_value = /*arialabel*/ ctx[1] || /*name*/ ctx[0]);
4941
4948
  set_custom_element_data(goa_input, "data-testid", goa_input_data_testid_value = `${/*name*/ ctx[0]}-dropdown-input`);
4942
4949
  set_custom_element_data(goa_input, "readonly", "");
4943
4950
  set_custom_element_data(goa_input, "role", "combobox");
@@ -4945,6 +4952,7 @@ function create_else_block$1(ctx) {
4945
4952
  set_custom_element_data(goa_input, "type", "text");
4946
4953
  set_custom_element_data(goa_input, "value", /*_selectedLabel*/ ctx[14]);
4947
4954
  set_custom_element_data(goa_input, "width", "100%");
4955
+ set_custom_element_data(goa_input, "name", /*name*/ ctx[0]);
4948
4956
  attr(ul, "id", "menu");
4949
4957
  attr(ul, "role", "listbox");
4950
4958
  attr(ul, "aria-activedescendant", /*_selectedLabel*/ ctx[14]);
@@ -4957,9 +4965,9 @@ function create_else_block$1(ctx) {
4957
4965
  m(target, anchor) {
4958
4966
  if (if_block) if_block.m(target, anchor);
4959
4967
  insert(target, t0, anchor);
4960
- insert(target, slot, anchor);
4961
- insert(target, t1, anchor);
4962
4968
  insert(target, goa_input, anchor);
4969
+ insert(target, t1, anchor);
4970
+ insert(target, slot, anchor);
4963
4971
  insert(target, t2, anchor);
4964
4972
  insert(target, ul, anchor);
4965
4973
 
@@ -5008,8 +5016,8 @@ function create_else_block$1(ctx) {
5008
5016
  set_custom_element_data(goa_input, "aria-expanded", /*_isMenuVisible*/ ctx[15]);
5009
5017
  }
5010
5018
 
5011
- if (dirty[0] & /*arialabel, name*/ 3 && goa_input_aria_label_value !== (goa_input_aria_label_value = /*arialabel*/ ctx[1] || /*name*/ ctx[0])) {
5012
- set_custom_element_data(goa_input, "aria-label", goa_input_aria_label_value);
5019
+ if (dirty[0] & /*arialabel, name*/ 3 && goa_input_arialabel_value !== (goa_input_arialabel_value = /*arialabel*/ ctx[1] || /*name*/ ctx[0])) {
5020
+ set_custom_element_data(goa_input, "arialabel", goa_input_arialabel_value);
5013
5021
  }
5014
5022
 
5015
5023
  if (dirty[0] & /*name*/ 1 && goa_input_data_testid_value !== (goa_input_data_testid_value = `${/*name*/ ctx[0]}-dropdown-input`)) {
@@ -5020,6 +5028,10 @@ function create_else_block$1(ctx) {
5020
5028
  set_custom_element_data(goa_input, "value", /*_selectedLabel*/ ctx[14]);
5021
5029
  }
5022
5030
 
5031
+ if (dirty[0] & /*name*/ 1) {
5032
+ set_custom_element_data(goa_input, "name", /*name*/ ctx[0]);
5033
+ }
5034
+
5023
5035
  if (dirty[0] & /*_options, _values, _highlightedIndex, onSelect*/ 67186688) {
5024
5036
  each_value_1 = /*_options*/ ctx[13];
5025
5037
  each_blocks = update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value_1, each_1_lookup, ul, destroy_block, create_each_block_1, null, get_each_context_1);
@@ -5040,9 +5052,9 @@ function create_else_block$1(ctx) {
5040
5052
  d(detaching) {
5041
5053
  if (if_block) if_block.d(detaching);
5042
5054
  if (detaching) detach(t0);
5043
- if (detaching) detach(slot);
5044
- if (detaching) detach(t1);
5045
5055
  if (detaching) detach(goa_input);
5056
+ if (detaching) detach(t1);
5057
+ if (detaching) detach(slot);
5046
5058
  if (detaching) detach(t2);
5047
5059
  if (detaching) detach(ul);
5048
5060
 
@@ -5057,8 +5069,8 @@ function create_else_block$1(ctx) {
5057
5069
  };
5058
5070
  }
5059
5071
 
5060
- // (225:2) {#if _native}
5061
- function create_if_block$a(ctx) {
5072
+ // (237:2) {#if _native}
5073
+ function create_if_block$b(ctx) {
5062
5074
  let select;
5063
5075
  let slot;
5064
5076
  let select_aria_label_value;
@@ -5145,7 +5157,7 @@ function create_if_block$a(ctx) {
5145
5157
  };
5146
5158
  }
5147
5159
 
5148
- // (245:4) {#if _isMenuVisible}
5160
+ // (257:4) {#if _isMenuVisible}
5149
5161
  function create_if_block_1$5(ctx) {
5150
5162
  let div;
5151
5163
  let div_data_testid_value;
@@ -5179,10 +5191,10 @@ function create_if_block_1$5(ctx) {
5179
5191
  };
5180
5192
  }
5181
5193
 
5182
- // (287:6) {#each _options as option, index (index)}
5194
+ // (300:6) {#each _options as option, index (index)}
5183
5195
  function create_each_block_1(key_1, ctx) {
5184
5196
  let li;
5185
- let t0_value = (/*option*/ ctx[48].label || /*option*/ ctx[48].value) + "";
5197
+ let t0_value = (/*option*/ ctx[49].label || /*option*/ ctx[49].value) + "";
5186
5198
  let t0;
5187
5199
  let t1;
5188
5200
  let li_id_value;
@@ -5196,7 +5208,7 @@ function create_each_block_1(key_1, ctx) {
5196
5208
  let dispose;
5197
5209
 
5198
5210
  function click_handler() {
5199
- return /*click_handler*/ ctx[32](/*option*/ ctx[48]);
5211
+ return /*click_handler*/ ctx[32](/*option*/ ctx[49]);
5200
5212
  }
5201
5213
 
5202
5214
  return {
@@ -5206,22 +5218,22 @@ function create_each_block_1(key_1, ctx) {
5206
5218
  li = element("li");
5207
5219
  t0 = text(t0_value);
5208
5220
  t1 = space();
5209
- attr(li, "id", li_id_value = /*option*/ ctx[48].label);
5221
+ attr(li, "id", li_id_value = /*option*/ ctx[49].label);
5210
5222
  attr(li, "role", "option");
5211
- attr(li, "aria-label", li_aria_label_value = /*option*/ ctx[48].label || /*option*/ ctx[48].value);
5223
+ attr(li, "aria-label", li_aria_label_value = /*option*/ ctx[49].label || /*option*/ ctx[49].value);
5212
5224
 
5213
- attr(li, "aria-selected", li_aria_selected_value = /*_values*/ ctx[12].includes(/*option*/ ctx[48].value)
5225
+ attr(li, "aria-selected", li_aria_selected_value = /*_values*/ ctx[12].includes(/*option*/ ctx[49].value)
5214
5226
  ? "true"
5215
5227
  : "false");
5216
5228
 
5217
5229
  attr(li, "class", "dropdown-item");
5218
- attr(li, "data-testid", li_data_testid_value = `dropdown-item-${/*option*/ ctx[48].value}`);
5219
- attr(li, "data-index", li_data_index_value = /*index*/ ctx[52]);
5220
- attr(li, "data-value", li_data_value_value = /*option*/ ctx[48].value);
5230
+ attr(li, "data-testid", li_data_testid_value = `dropdown-item-${/*option*/ ctx[49].value}`);
5231
+ attr(li, "data-index", li_data_index_value = /*index*/ ctx[53]);
5232
+ attr(li, "data-value", li_data_value_value = /*option*/ ctx[49].value);
5221
5233
  attr(li, "style", li_style_value = `display: ${"block"}`);
5222
5234
  toggle_class(li, "dropdown-item--disabled", false);
5223
- toggle_class(li, "dropdown-item--tabbed", /*index*/ ctx[52] === /*_highlightedIndex*/ ctx[16]);
5224
- toggle_class(li, "dropdown-item--selected", /*_values*/ ctx[12].includes(/*option*/ ctx[48].value));
5235
+ toggle_class(li, "dropdown-item--tabbed", /*index*/ ctx[53] === /*_highlightedIndex*/ ctx[16]);
5236
+ toggle_class(li, "dropdown-item--selected", /*_values*/ ctx[12].includes(/*option*/ ctx[49].value));
5225
5237
  this.first = li;
5226
5238
  },
5227
5239
  m(target, anchor) {
@@ -5236,40 +5248,40 @@ function create_each_block_1(key_1, ctx) {
5236
5248
  },
5237
5249
  p(new_ctx, dirty) {
5238
5250
  ctx = new_ctx;
5239
- if (dirty[0] & /*_options*/ 8192 && t0_value !== (t0_value = (/*option*/ ctx[48].label || /*option*/ ctx[48].value) + "")) set_data(t0, t0_value);
5251
+ if (dirty[0] & /*_options*/ 8192 && t0_value !== (t0_value = (/*option*/ ctx[49].label || /*option*/ ctx[49].value) + "")) set_data(t0, t0_value);
5240
5252
 
5241
- if (dirty[0] & /*_options*/ 8192 && li_id_value !== (li_id_value = /*option*/ ctx[48].label)) {
5253
+ if (dirty[0] & /*_options*/ 8192 && li_id_value !== (li_id_value = /*option*/ ctx[49].label)) {
5242
5254
  attr(li, "id", li_id_value);
5243
5255
  }
5244
5256
 
5245
- if (dirty[0] & /*_options*/ 8192 && li_aria_label_value !== (li_aria_label_value = /*option*/ ctx[48].label || /*option*/ ctx[48].value)) {
5257
+ if (dirty[0] & /*_options*/ 8192 && li_aria_label_value !== (li_aria_label_value = /*option*/ ctx[49].label || /*option*/ ctx[49].value)) {
5246
5258
  attr(li, "aria-label", li_aria_label_value);
5247
5259
  }
5248
5260
 
5249
- if (dirty[0] & /*_values, _options*/ 12288 && li_aria_selected_value !== (li_aria_selected_value = /*_values*/ ctx[12].includes(/*option*/ ctx[48].value)
5261
+ if (dirty[0] & /*_values, _options*/ 12288 && li_aria_selected_value !== (li_aria_selected_value = /*_values*/ ctx[12].includes(/*option*/ ctx[49].value)
5250
5262
  ? "true"
5251
5263
  : "false")) {
5252
5264
  attr(li, "aria-selected", li_aria_selected_value);
5253
5265
  }
5254
5266
 
5255
- if (dirty[0] & /*_options*/ 8192 && li_data_testid_value !== (li_data_testid_value = `dropdown-item-${/*option*/ ctx[48].value}`)) {
5267
+ if (dirty[0] & /*_options*/ 8192 && li_data_testid_value !== (li_data_testid_value = `dropdown-item-${/*option*/ ctx[49].value}`)) {
5256
5268
  attr(li, "data-testid", li_data_testid_value);
5257
5269
  }
5258
5270
 
5259
- if (dirty[0] & /*_options*/ 8192 && li_data_index_value !== (li_data_index_value = /*index*/ ctx[52])) {
5271
+ if (dirty[0] & /*_options*/ 8192 && li_data_index_value !== (li_data_index_value = /*index*/ ctx[53])) {
5260
5272
  attr(li, "data-index", li_data_index_value);
5261
5273
  }
5262
5274
 
5263
- if (dirty[0] & /*_options*/ 8192 && li_data_value_value !== (li_data_value_value = /*option*/ ctx[48].value)) {
5275
+ if (dirty[0] & /*_options*/ 8192 && li_data_value_value !== (li_data_value_value = /*option*/ ctx[49].value)) {
5264
5276
  attr(li, "data-value", li_data_value_value);
5265
5277
  }
5266
5278
 
5267
5279
  if (dirty[0] & /*_options, _highlightedIndex*/ 73728) {
5268
- toggle_class(li, "dropdown-item--tabbed", /*index*/ ctx[52] === /*_highlightedIndex*/ ctx[16]);
5280
+ toggle_class(li, "dropdown-item--tabbed", /*index*/ ctx[53] === /*_highlightedIndex*/ ctx[16]);
5269
5281
  }
5270
5282
 
5271
5283
  if (dirty[0] & /*_values, _options*/ 12288) {
5272
- toggle_class(li, "dropdown-item--selected", /*_values*/ ctx[12].includes(/*option*/ ctx[48].value));
5284
+ toggle_class(li, "dropdown-item--selected", /*_values*/ ctx[12].includes(/*option*/ ctx[49].value));
5273
5285
  }
5274
5286
  },
5275
5287
  d(detaching) {
@@ -5280,10 +5292,10 @@ function create_each_block_1(key_1, ctx) {
5280
5292
  };
5281
5293
  }
5282
5294
 
5283
- // (234:6) {#each _options as option}
5295
+ // (246:6) {#each _options as option}
5284
5296
  function create_each_block$4(ctx) {
5285
5297
  let option;
5286
- let t0_value = /*option*/ ctx[48].label + "";
5298
+ let t0_value = /*option*/ ctx[49].label + "";
5287
5299
  let t0;
5288
5300
  let t1;
5289
5301
  let option_selected_value;
@@ -5295,10 +5307,10 @@ function create_each_block$4(ctx) {
5295
5307
  option = element("option");
5296
5308
  t0 = text(t0_value);
5297
5309
  t1 = space();
5298
- option.selected = option_selected_value = /*option*/ ctx[48].selected;
5299
- option.__value = option_value_value = /*option*/ ctx[48].value;
5310
+ option.selected = option_selected_value = /*option*/ ctx[49].selected;
5311
+ option.__value = option_value_value = /*option*/ ctx[49].value;
5300
5312
  option.value = option.__value;
5301
- attr(option, "aria-label", option_aria_label_value = /*option*/ ctx[48].label);
5313
+ attr(option, "aria-label", option_aria_label_value = /*option*/ ctx[49].label);
5302
5314
  },
5303
5315
  m(target, anchor) {
5304
5316
  insert(target, option, anchor);
@@ -5306,18 +5318,18 @@ function create_each_block$4(ctx) {
5306
5318
  append(option, t1);
5307
5319
  },
5308
5320
  p(ctx, dirty) {
5309
- if (dirty[0] & /*_options*/ 8192 && t0_value !== (t0_value = /*option*/ ctx[48].label + "")) set_data(t0, t0_value);
5321
+ if (dirty[0] & /*_options*/ 8192 && t0_value !== (t0_value = /*option*/ ctx[49].label + "")) set_data(t0, t0_value);
5310
5322
 
5311
- if (dirty[0] & /*_options*/ 8192 && option_selected_value !== (option_selected_value = /*option*/ ctx[48].selected)) {
5323
+ if (dirty[0] & /*_options*/ 8192 && option_selected_value !== (option_selected_value = /*option*/ ctx[49].selected)) {
5312
5324
  option.selected = option_selected_value;
5313
5325
  }
5314
5326
 
5315
- if (dirty[0] & /*_options*/ 8192 && option_value_value !== (option_value_value = /*option*/ ctx[48].value)) {
5327
+ if (dirty[0] & /*_options*/ 8192 && option_value_value !== (option_value_value = /*option*/ ctx[49].value)) {
5316
5328
  option.__value = option_value_value;
5317
5329
  option.value = option.__value;
5318
5330
  }
5319
5331
 
5320
- if (dirty[0] & /*_options*/ 8192 && option_aria_label_value !== (option_aria_label_value = /*option*/ ctx[48].label)) {
5332
+ if (dirty[0] & /*_options*/ 8192 && option_aria_label_value !== (option_aria_label_value = /*option*/ ctx[49].label)) {
5321
5333
  attr(option, "aria-label", option_aria_label_value);
5322
5334
  }
5323
5335
  },
@@ -5327,13 +5339,13 @@ function create_each_block$4(ctx) {
5327
5339
  };
5328
5340
  }
5329
5341
 
5330
- function create_fragment$p(ctx) {
5342
+ function create_fragment$q(ctx) {
5331
5343
  let div;
5332
5344
  let div_data_testid_value;
5333
5345
  let div_style_value;
5334
5346
 
5335
5347
  function select_block_type(ctx, dirty) {
5336
- if (/*_native*/ ctx[22]) return create_if_block$a;
5348
+ if (/*_native*/ ctx[22]) return create_if_block$b;
5337
5349
  return create_else_block$1;
5338
5350
  }
5339
5351
 
@@ -5398,23 +5410,7 @@ function create_fragment$p(ctx) {
5398
5410
  };
5399
5411
  }
5400
5412
 
5401
- function getCustomDropdownWidth(options) {
5402
- let width;
5403
- let maxCount = 0;
5404
-
5405
- options.forEach(option => {
5406
- const label = option.label || option.value || "";
5407
-
5408
- if (!width && maxCount < label.length) {
5409
- maxCount = label.length;
5410
- width = `${Math.max(20, maxCount + 12)}ch`;
5411
- }
5412
- });
5413
-
5414
- return width;
5415
- }
5416
-
5417
- function instance$m($$self, $$props, $$invalidate) {
5413
+ function instance$n($$self, $$props, $$invalidate) {
5418
5414
  let _disabled;
5419
5415
  let _error;
5420
5416
  let _multiselect;
@@ -5457,6 +5453,17 @@ function instance$m($$self, $$props, $$invalidate) {
5457
5453
  addKeyboardEventListeners();
5458
5454
  setHighlightedIndexToSelected();
5459
5455
  }
5456
+
5457
+ // watch for DOM changes within the slot => dynamic binding
5458
+ const slot = _el.querySelector("slot");
5459
+
5460
+ slot === null || slot === void 0
5461
+ ? void 0
5462
+ : slot.addEventListener("slotchange", _e => {
5463
+ $$invalidate(14, _selectedLabel = "");
5464
+ $$invalidate(12, _values = parseValues());
5465
+ $$invalidate(13, _options = getOptions());
5466
+ });
5460
5467
  });
5461
5468
 
5462
5469
  onDestroy(() => {
@@ -5484,7 +5491,7 @@ function instance$m($$self, $$props, $$invalidate) {
5484
5491
  function getOptions() {
5485
5492
  const children = getChildren();
5486
5493
 
5487
- return children.map(el => {
5494
+ return children.filter(child => child.tagName === "GOA-DROPDOWN-ITEM").map(el => {
5488
5495
  const option = el;
5489
5496
  const value = el.getAttribute("value") || option.value;
5490
5497
  const label = el.getAttribute("label") || option.label || value;
@@ -5499,6 +5506,27 @@ function instance$m($$self, $$props, $$invalidate) {
5499
5506
  });
5500
5507
  }
5501
5508
 
5509
+ // compute the required width to enure all children fit
5510
+ function getCustomDropdownWidth(options) {
5511
+ let width;
5512
+ let maxCount = 0;
5513
+
5514
+ if (options.length === 0 && placeholder !== "") {
5515
+ return `${placeholder.length + 12}ch`;
5516
+ }
5517
+
5518
+ options.forEach(option => {
5519
+ const label = option.label || option.value || "";
5520
+
5521
+ if (!width && maxCount < label.length) {
5522
+ maxCount = label.length;
5523
+ width = `${Math.max(20, maxCount + 12)}ch`;
5524
+ }
5525
+ });
5526
+
5527
+ return width;
5528
+ }
5529
+
5502
5530
  function addKeyboardEventListeners() {
5503
5531
  _el.addEventListener("focus", onFocus, true);
5504
5532
  _el.addEventListener("blur", onBlur, true);
@@ -5741,7 +5769,7 @@ function instance$m($$self, $$props, $$invalidate) {
5741
5769
  class Dropdown extends SvelteElement {
5742
5770
  constructor(options) {
5743
5771
  super();
5744
- 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>`;
5772
+ 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>`;
5745
5773
 
5746
5774
  init(
5747
5775
  this,
@@ -5750,8 +5778,8 @@ class Dropdown extends SvelteElement {
5750
5778
  props: attribute_to_object(this.attributes),
5751
5779
  customElement: true
5752
5780
  },
5753
- instance$m,
5754
- create_fragment$p,
5781
+ instance$n,
5782
+ create_fragment$q,
5755
5783
  safe_not_equal,
5756
5784
  {
5757
5785
  name: 0,
@@ -5946,7 +5974,7 @@ customElements.define("goa-dropdown", Dropdown);
5946
5974
 
5947
5975
  /* libs/web-components/src/components/dropdown/DropdownItem.svelte generated by Svelte v3.51.0 */
5948
5976
 
5949
- function create_fragment$o(ctx) {
5977
+ function create_fragment$p(ctx) {
5950
5978
  return {
5951
5979
  c() {
5952
5980
  this.c = noop;
@@ -5971,7 +5999,7 @@ class DropdownItem extends SvelteElement {
5971
5999
  customElement: true
5972
6000
  },
5973
6001
  null,
5974
- create_fragment$o,
6002
+ create_fragment$p,
5975
6003
  safe_not_equal,
5976
6004
  {},
5977
6005
  null
@@ -5989,7 +6017,7 @@ customElements.define("goa-dropdown-item", DropdownItem);
5989
6017
 
5990
6018
  /* libs/web-components/src/components/focus-trap/FocusTrap.svelte generated by Svelte v3.51.0 */
5991
6019
 
5992
- function create_fragment$n(ctx) {
6020
+ function create_fragment$o(ctx) {
5993
6021
  let div;
5994
6022
 
5995
6023
  return {
@@ -6042,7 +6070,7 @@ function isFocusable(element) {
6042
6070
  }
6043
6071
  }
6044
6072
 
6045
- function instance$l($$self, $$props, $$invalidate) {
6073
+ function instance$m($$self, $$props, $$invalidate) {
6046
6074
  let isActive;
6047
6075
  let { active } = $$props;
6048
6076
  let ignoreFocusChanges = false;
@@ -6219,8 +6247,8 @@ class FocusTrap extends SvelteElement {
6219
6247
  props: attribute_to_object(this.attributes),
6220
6248
  customElement: true
6221
6249
  },
6222
- instance$l,
6223
- create_fragment$n,
6250
+ instance$m,
6251
+ create_fragment$o,
6224
6252
  safe_not_equal,
6225
6253
  { active: 1 },
6226
6254
  null
@@ -6256,7 +6284,7 @@ customElements.define("goa-focus-trap", FocusTrap);
6256
6284
 
6257
6285
  /* libs/web-components/src/components/footer/Footer.svelte generated by Svelte v3.51.0 */
6258
6286
 
6259
- function create_if_block$9(ctx) {
6287
+ function create_if_block$a(ctx) {
6260
6288
  let goa_divider;
6261
6289
 
6262
6290
  return {
@@ -6273,7 +6301,7 @@ function create_if_block$9(ctx) {
6273
6301
  };
6274
6302
  }
6275
6303
 
6276
- function create_fragment$m(ctx) {
6304
+ function create_fragment$n(ctx) {
6277
6305
  let div5;
6278
6306
  let div4;
6279
6307
  let div0;
@@ -6287,7 +6315,7 @@ function create_fragment$m(ctx) {
6287
6315
  let t3;
6288
6316
  let a1;
6289
6317
  let div5_style_value;
6290
- let if_block = /*navLinks*/ ctx[2]?.length && create_if_block$9();
6318
+ let if_block = /*navLinks*/ ctx[2] && /*navLinks*/ ctx[2].length > 0 && create_if_block$a();
6291
6319
 
6292
6320
  return {
6293
6321
  c() {
@@ -6315,9 +6343,9 @@ function create_fragment$m(ctx) {
6315
6343
  attr(a1, "href", "https://alberta.ca");
6316
6344
  attr(a1, "class", "goa-copyright");
6317
6345
  attr(div2, "class", "abgov");
6318
- toggle_class(div2, "with-meta-links", /*metaLinks*/ ctx[3]?.length);
6346
+ toggle_class(div2, "with-meta-links", /*metaLinks*/ ctx[3] && /*metaLinks*/ ctx[3].length > 0);
6319
6347
  attr(div3, "class", "meta-section");
6320
- toggle_class(div3, "with-meta-links", /*metaLinks*/ ctx[3]?.length);
6348
+ toggle_class(div3, "with-meta-links", /*metaLinks*/ ctx[3] && /*metaLinks*/ ctx[3].length > 0);
6321
6349
  attr(div4, "class", "content");
6322
6350
  attr(div5, "class", "app-footer");
6323
6351
  attr(div5, "style", div5_style_value = `--max-content-width: ${/*maxcontentwidth*/ ctx[0] || "100%"}`);
@@ -6339,9 +6367,9 @@ function create_fragment$m(ctx) {
6339
6367
  /*div5_binding*/ ctx[5](div5);
6340
6368
  },
6341
6369
  p(ctx, [dirty]) {
6342
- if (/*navLinks*/ ctx[2]?.length) {
6370
+ if (/*navLinks*/ ctx[2] && /*navLinks*/ ctx[2].length > 0) {
6343
6371
  if (if_block) ; else {
6344
- if_block = create_if_block$9();
6372
+ if_block = create_if_block$a();
6345
6373
  if_block.c();
6346
6374
  if_block.m(div4, t1);
6347
6375
  }
@@ -6351,11 +6379,11 @@ function create_fragment$m(ctx) {
6351
6379
  }
6352
6380
 
6353
6381
  if (dirty & /*metaLinks*/ 8) {
6354
- toggle_class(div2, "with-meta-links", /*metaLinks*/ ctx[3]?.length);
6382
+ toggle_class(div2, "with-meta-links", /*metaLinks*/ ctx[3] && /*metaLinks*/ ctx[3].length > 0);
6355
6383
  }
6356
6384
 
6357
6385
  if (dirty & /*metaLinks*/ 8) {
6358
- toggle_class(div3, "with-meta-links", /*metaLinks*/ ctx[3]?.length);
6386
+ toggle_class(div3, "with-meta-links", /*metaLinks*/ ctx[3] && /*metaLinks*/ ctx[3].length > 0);
6359
6387
  }
6360
6388
 
6361
6389
  if (dirty & /*maxcontentwidth*/ 1 && div5_style_value !== (div5_style_value = `--max-content-width: ${/*maxcontentwidth*/ ctx[0] || "100%"}`)) {
@@ -6372,7 +6400,7 @@ function create_fragment$m(ctx) {
6372
6400
  };
6373
6401
  }
6374
6402
 
6375
- function instance$k($$self, $$props, $$invalidate) {
6403
+ function instance$l($$self, $$props, $$invalidate) {
6376
6404
  let { maxcontentwidth = "" } = $$props;
6377
6405
  let rootEl;
6378
6406
  let navLinks;
@@ -6404,7 +6432,7 @@ function instance$k($$self, $$props, $$invalidate) {
6404
6432
  class Footer extends SvelteElement {
6405
6433
  constructor(options) {
6406
6434
  super();
6407
- 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>`;
6435
+ 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>`;
6408
6436
 
6409
6437
  init(
6410
6438
  this,
@@ -6413,8 +6441,8 @@ class Footer extends SvelteElement {
6413
6441
  props: attribute_to_object(this.attributes),
6414
6442
  customElement: true
6415
6443
  },
6416
- instance$k,
6417
- create_fragment$m,
6444
+ instance$l,
6445
+ create_fragment$n,
6418
6446
  safe_not_equal,
6419
6447
  { maxcontentwidth: 0 },
6420
6448
  null
@@ -6489,7 +6517,7 @@ function create_each_block$3(ctx) {
6489
6517
  };
6490
6518
  }
6491
6519
 
6492
- function create_fragment$l(ctx) {
6520
+ function create_fragment$m(ctx) {
6493
6521
  let section;
6494
6522
  let div;
6495
6523
  let t;
@@ -6562,7 +6590,7 @@ function create_fragment$l(ctx) {
6562
6590
  };
6563
6591
  }
6564
6592
 
6565
- function instance$j($$self, $$props, $$invalidate) {
6593
+ function instance$k($$self, $$props, $$invalidate) {
6566
6594
  let rootEl;
6567
6595
  let children = [];
6568
6596
 
@@ -6597,7 +6625,7 @@ function instance$j($$self, $$props, $$invalidate) {
6597
6625
  class FooterMetaSection extends SvelteElement {
6598
6626
  constructor(options) {
6599
6627
  super();
6600
- 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>`;
6628
+ 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>`;
6601
6629
 
6602
6630
  init(
6603
6631
  this,
@@ -6606,8 +6634,8 @@ class FooterMetaSection extends SvelteElement {
6606
6634
  props: attribute_to_object(this.attributes),
6607
6635
  customElement: true
6608
6636
  },
6609
- instance$j,
6610
- create_fragment$l,
6637
+ instance$k,
6638
+ create_fragment$m,
6611
6639
  safe_not_equal,
6612
6640
  {},
6613
6641
  null
@@ -6632,7 +6660,7 @@ function get_each_context$2(ctx, list, i) {
6632
6660
  }
6633
6661
 
6634
6662
  // (31:2) {#if heading}
6635
- function create_if_block$8(ctx) {
6663
+ function create_if_block$9(ctx) {
6636
6664
  let div;
6637
6665
  let t0;
6638
6666
  let t1;
@@ -6697,14 +6725,14 @@ function create_each_block$2(ctx) {
6697
6725
  };
6698
6726
  }
6699
6727
 
6700
- function create_fragment$k(ctx) {
6728
+ function create_fragment$l(ctx) {
6701
6729
  let section;
6702
6730
  let t0;
6703
6731
  let div;
6704
6732
  let t1;
6705
6733
  let ul;
6706
6734
  let ul_style_value;
6707
- let if_block = /*heading*/ ctx[0] && create_if_block$8(ctx);
6735
+ let if_block = /*heading*/ ctx[0] && create_if_block$9(ctx);
6708
6736
  let each_value = /*children*/ ctx[3];
6709
6737
  let each_blocks = [];
6710
6738
 
@@ -6758,7 +6786,7 @@ function create_fragment$k(ctx) {
6758
6786
  if (if_block) {
6759
6787
  if_block.p(ctx, dirty);
6760
6788
  } else {
6761
- if_block = create_if_block$8(ctx);
6789
+ if_block = create_if_block$9(ctx);
6762
6790
  if_block.c();
6763
6791
  if_block.m(section, t0);
6764
6792
  }
@@ -6812,7 +6840,7 @@ function create_fragment$k(ctx) {
6812
6840
  };
6813
6841
  }
6814
6842
 
6815
- function instance$i($$self, $$props, $$invalidate) {
6843
+ function instance$j($$self, $$props, $$invalidate) {
6816
6844
  let { heading = "" } = $$props;
6817
6845
  let { maxcolumncount = 1 } = $$props;
6818
6846
  let rootEl;
@@ -6858,7 +6886,7 @@ function instance$i($$self, $$props, $$invalidate) {
6858
6886
  class FooterNavSection extends SvelteElement {
6859
6887
  constructor(options) {
6860
6888
  super();
6861
- 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>`;
6889
+ 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>`;
6862
6890
 
6863
6891
  init(
6864
6892
  this,
@@ -6867,8 +6895,8 @@ class FooterNavSection extends SvelteElement {
6867
6895
  props: attribute_to_object(this.attributes),
6868
6896
  customElement: true
6869
6897
  },
6870
- instance$i,
6871
- create_fragment$k,
6898
+ instance$j,
6899
+ create_fragment$l,
6872
6900
  safe_not_equal,
6873
6901
  { heading: 0, maxcolumncount: 1 },
6874
6902
  null
@@ -7022,7 +7050,7 @@ function create_if_block_1$4(ctx) {
7022
7050
  }
7023
7051
 
7024
7052
  // (48:2) {#if helptext}
7025
- function create_if_block$7(ctx) {
7053
+ function create_if_block$8(ctx) {
7026
7054
  let div;
7027
7055
  let t;
7028
7056
 
@@ -7045,7 +7073,7 @@ function create_if_block$7(ctx) {
7045
7073
  };
7046
7074
  }
7047
7075
 
7048
- function create_fragment$j(ctx) {
7076
+ function create_fragment$k(ctx) {
7049
7077
  let div1;
7050
7078
  let t0;
7051
7079
  let div0;
@@ -7054,7 +7082,7 @@ function create_fragment$j(ctx) {
7054
7082
  let div1_style_value;
7055
7083
  let if_block0 = /*label*/ ctx[5] && create_if_block_2$4(ctx);
7056
7084
  let if_block1 = /*error*/ ctx[7] && create_if_block_1$4(ctx);
7057
- let if_block2 = /*helptext*/ ctx[6] && create_if_block$7(ctx);
7085
+ let if_block2 = /*helptext*/ ctx[6] && create_if_block$8(ctx);
7058
7086
 
7059
7087
  return {
7060
7088
  c() {
@@ -7114,7 +7142,7 @@ function create_fragment$j(ctx) {
7114
7142
  if (if_block2) {
7115
7143
  if_block2.p(ctx, dirty);
7116
7144
  } else {
7117
- if_block2 = create_if_block$7(ctx);
7145
+ if_block2 = create_if_block$8(ctx);
7118
7146
  if_block2.c();
7119
7147
  if_block2.m(div1, null);
7120
7148
  }
@@ -7142,7 +7170,7 @@ function create_fragment$j(ctx) {
7142
7170
  };
7143
7171
  }
7144
7172
 
7145
- function instance$h($$self, $$props, $$invalidate) {
7173
+ function instance$i($$self, $$props, $$invalidate) {
7146
7174
  const [REQUIREMENT_TYPES, validateRequirementType] = typeValidator("Requirement type", ["optional", "required"], false);
7147
7175
  let { testid = "" } = $$props;
7148
7176
  let { mt = null } = $$props;
@@ -7176,7 +7204,7 @@ function instance$h($$self, $$props, $$invalidate) {
7176
7204
  class FormItem extends SvelteElement {
7177
7205
  constructor(options) {
7178
7206
  super();
7179
- 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>`;
7207
+ 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>`;
7180
7208
 
7181
7209
  init(
7182
7210
  this,
@@ -7185,8 +7213,8 @@ class FormItem extends SvelteElement {
7185
7213
  props: attribute_to_object(this.attributes),
7186
7214
  customElement: true
7187
7215
  },
7188
- instance$h,
7189
- create_fragment$j,
7216
+ instance$i,
7217
+ create_fragment$k,
7190
7218
  safe_not_equal,
7191
7219
  {
7192
7220
  testid: 0,
@@ -7314,7 +7342,7 @@ customElements.define("goa-form-item", FormItem);
7314
7342
 
7315
7343
  /* libs/web-components/src/components/grid/Grid.svelte generated by Svelte v3.51.0 */
7316
7344
 
7317
- function create_fragment$i(ctx) {
7345
+ function create_fragment$j(ctx) {
7318
7346
  let div;
7319
7347
  let slot;
7320
7348
  let div_style_value;
@@ -7329,7 +7357,7 @@ function create_fragment$i(ctx) {
7329
7357
  attr(div, "style", div_style_value = `
7330
7358
  ${calculateMargin(/*mt*/ ctx[2], /*mr*/ ctx[3], /*mb*/ ctx[4], /*ml*/ ctx[5])}
7331
7359
  --min-child-width: ${/*minchildwidth*/ ctx[1] || 0};
7332
- gap: var(--goa-spacing-${/*gap*/ ctx[0]})
7360
+ gap: var(--goa-space-${/*gap*/ ctx[0]})
7333
7361
  `);
7334
7362
  },
7335
7363
  m(target, anchor) {
@@ -7340,7 +7368,7 @@ function create_fragment$i(ctx) {
7340
7368
  if (dirty & /*mt, mr, mb, ml, minchildwidth, gap*/ 63 && div_style_value !== (div_style_value = `
7341
7369
  ${calculateMargin(/*mt*/ ctx[2], /*mr*/ ctx[3], /*mb*/ ctx[4], /*ml*/ ctx[5])}
7342
7370
  --min-child-width: ${/*minchildwidth*/ ctx[1] || 0};
7343
- gap: var(--goa-spacing-${/*gap*/ ctx[0]})
7371
+ gap: var(--goa-space-${/*gap*/ ctx[0]})
7344
7372
  `)) {
7345
7373
  attr(div, "style", div_style_value);
7346
7374
  }
@@ -7353,7 +7381,7 @@ function create_fragment$i(ctx) {
7353
7381
  };
7354
7382
  }
7355
7383
 
7356
- function instance$g($$self, $$props, $$invalidate) {
7384
+ function instance$h($$self, $$props, $$invalidate) {
7357
7385
  let { gap = "m" } = $$props;
7358
7386
  let { minchildwidth = "" } = $$props;
7359
7387
  let { mt = null } = $$props;
@@ -7380,7 +7408,7 @@ function instance$g($$self, $$props, $$invalidate) {
7380
7408
  class Grid extends SvelteElement {
7381
7409
  constructor(options) {
7382
7410
  super();
7383
- 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>`;
7411
+ 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>`;
7384
7412
 
7385
7413
  init(
7386
7414
  this,
@@ -7389,8 +7417,8 @@ class Grid extends SvelteElement {
7389
7417
  props: attribute_to_object(this.attributes),
7390
7418
  customElement: true
7391
7419
  },
7392
- instance$g,
7393
- create_fragment$i,
7420
+ instance$h,
7421
+ create_fragment$j,
7394
7422
  safe_not_equal,
7395
7423
  {
7396
7424
  gap: 0,
@@ -7478,7 +7506,7 @@ customElements.define("goa-grid", Grid);
7478
7506
 
7479
7507
  /* libs/web-components/src/components/hero-banner/HeroBanner.svelte generated by Svelte v3.51.0 */
7480
7508
 
7481
- function create_fragment$h(ctx) {
7509
+ function create_fragment$i(ctx) {
7482
7510
  let div1;
7483
7511
  let goa_page_block;
7484
7512
  let h1;
@@ -7541,7 +7569,7 @@ function create_fragment$h(ctx) {
7541
7569
  };
7542
7570
  }
7543
7571
 
7544
- function instance$f($$self, $$props, $$invalidate) {
7572
+ function instance$g($$self, $$props, $$invalidate) {
7545
7573
  let { heading } = $$props;
7546
7574
  let { backgroundurl } = $$props;
7547
7575
  let { minheight = "600px" } = $$props;
@@ -7558,7 +7586,7 @@ function instance$f($$self, $$props, $$invalidate) {
7558
7586
  class HeroBanner extends SvelteElement {
7559
7587
  constructor(options) {
7560
7588
  super();
7561
- 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>`;
7589
+ 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>`;
7562
7590
 
7563
7591
  init(
7564
7592
  this,
@@ -7567,8 +7595,8 @@ class HeroBanner extends SvelteElement {
7567
7595
  props: attribute_to_object(this.attributes),
7568
7596
  customElement: true
7569
7597
  },
7570
- instance$f,
7571
- create_fragment$h,
7598
+ instance$g,
7599
+ create_fragment$i,
7572
7600
  safe_not_equal,
7573
7601
  {
7574
7602
  heading: 0,
@@ -7626,7 +7654,7 @@ customElements.define("goa-hero-banner", HeroBanner);
7626
7654
 
7627
7655
  /* libs/web-components/src/components/icon-button/IconButton.svelte generated by Svelte v3.51.0 */
7628
7656
 
7629
- function create_fragment$g(ctx) {
7657
+ function create_fragment$h(ctx) {
7630
7658
  let button;
7631
7659
  let goa_icon;
7632
7660
  let button_style_value;
@@ -7713,7 +7741,7 @@ function handleClick(e) {
7713
7741
  e.target.dispatchEvent(new CustomEvent("_click", { composed: true, detail: { event: e } }));
7714
7742
  }
7715
7743
 
7716
- function instance$e($$self, $$props, $$invalidate) {
7744
+ function instance$f($$self, $$props, $$invalidate) {
7717
7745
  let css;
7718
7746
  let isDisabled;
7719
7747
  let isInverted;
@@ -7797,7 +7825,7 @@ function instance$e($$self, $$props, $$invalidate) {
7797
7825
  class IconButton extends SvelteElement {
7798
7826
  constructor(options) {
7799
7827
  super();
7800
- 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>`;
7828
+ 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>`;
7801
7829
 
7802
7830
  init(
7803
7831
  this,
@@ -7806,8 +7834,8 @@ class IconButton extends SvelteElement {
7806
7834
  props: attribute_to_object(this.attributes),
7807
7835
  customElement: true
7808
7836
  },
7809
- instance$e,
7810
- create_fragment$g,
7837
+ instance$f,
7838
+ create_fragment$h,
7811
7839
  safe_not_equal,
7812
7840
  {
7813
7841
  icon: 0,
@@ -7968,7 +7996,7 @@ customElements.define("goa-icon-button", IconButton);
7968
7996
 
7969
7997
  /* libs/web-components/src/components/icon/Icon.svelte generated by Svelte v3.51.0 */
7970
7998
 
7971
- function create_if_block$6(ctx) {
7999
+ function create_if_block$7(ctx) {
7972
8000
  let ion_icon;
7973
8001
  let ion_icon_name_value;
7974
8002
 
@@ -7996,10 +8024,10 @@ function create_if_block$6(ctx) {
7996
8024
  };
7997
8025
  }
7998
8026
 
7999
- function create_fragment$f(ctx) {
8027
+ function create_fragment$g(ctx) {
8000
8028
  let div;
8001
8029
  let div_style_value;
8002
- let if_block = /*type*/ ctx[4] && create_if_block$6(ctx);
8030
+ let if_block = /*type*/ ctx[4] && create_if_block$7(ctx);
8003
8031
 
8004
8032
  return {
8005
8033
  c() {
@@ -8029,7 +8057,7 @@ function create_fragment$f(ctx) {
8029
8057
  if (if_block) {
8030
8058
  if_block.p(ctx, dirty);
8031
8059
  } else {
8032
- if_block = create_if_block$6(ctx);
8060
+ if_block = create_if_block$7(ctx);
8033
8061
  if_block.c();
8034
8062
  if_block.m(div, null);
8035
8063
  }
@@ -8069,7 +8097,7 @@ function create_fragment$f(ctx) {
8069
8097
  };
8070
8098
  }
8071
8099
 
8072
- function instance$d($$self, $$props, $$invalidate) {
8100
+ function instance$e($$self, $$props, $$invalidate) {
8073
8101
  let isInverted;
8074
8102
  let _size;
8075
8103
  let { mt = null } = $$props;
@@ -8147,8 +8175,8 @@ class Icon extends SvelteElement {
8147
8175
  props: attribute_to_object(this.attributes),
8148
8176
  customElement: true
8149
8177
  },
8150
- instance$d,
8151
- create_fragment$f,
8178
+ instance$e,
8179
+ create_fragment$g,
8152
8180
  safe_not_equal,
8153
8181
  {
8154
8182
  mt: 0,
@@ -8343,7 +8371,7 @@ function create_if_block_4$1(ctx) {
8343
8371
  };
8344
8372
  }
8345
8373
 
8346
- // (100:4) {#if leadingicon}
8374
+ // (109:4) {#if leadingicon}
8347
8375
  function create_if_block_3$2(ctx) {
8348
8376
  let goa_icon;
8349
8377
 
@@ -8368,7 +8396,7 @@ function create_if_block_3$2(ctx) {
8368
8396
  };
8369
8397
  }
8370
8398
 
8371
- // (130:4) {#if trailingicon && !handlesTrailingIconClick}
8399
+ // (139:4) {#if trailingicon && !handlesTrailingIconClick}
8372
8400
  function create_if_block_2$3(ctx) {
8373
8401
  let goa_icon;
8374
8402
 
@@ -8394,7 +8422,7 @@ function create_if_block_2$3(ctx) {
8394
8422
  };
8395
8423
  }
8396
8424
 
8397
- // (140:4) {#if trailingicon && handlesTrailingIconClick}
8425
+ // (149:4) {#if trailingicon && handlesTrailingIconClick}
8398
8426
  function create_if_block_1$3(ctx) {
8399
8427
  let goa_icon_button;
8400
8428
  let mounted;
@@ -8434,8 +8462,8 @@ function create_if_block_1$3(ctx) {
8434
8462
  };
8435
8463
  }
8436
8464
 
8437
- // (152:4) {#if suffix}
8438
- function create_if_block$5(ctx) {
8465
+ // (161:4) {#if suffix}
8466
+ function create_if_block$6(ctx) {
8439
8467
  let span;
8440
8468
  let t;
8441
8469
 
@@ -8458,7 +8486,7 @@ function create_if_block$5(ctx) {
8458
8486
  };
8459
8487
  }
8460
8488
 
8461
- function create_fragment$e(ctx) {
8489
+ function create_fragment$f(ctx) {
8462
8490
  let div3;
8463
8491
  let div2;
8464
8492
  let t0;
@@ -8482,7 +8510,7 @@ function create_fragment$e(ctx) {
8482
8510
  let if_block1 = /*leadingicon*/ ctx[5] && create_if_block_3$2(ctx);
8483
8511
  let if_block2 = /*trailingicon*/ ctx[6] && !/*handlesTrailingIconClick*/ ctx[24] && create_if_block_2$3(ctx);
8484
8512
  let if_block3 = /*trailingicon*/ ctx[6] && /*handlesTrailingIconClick*/ ctx[24] && create_if_block_1$3(ctx);
8485
- let if_block4 = /*suffix*/ ctx[15] && create_if_block$5(ctx);
8513
+ let if_block4 = /*suffix*/ ctx[15] && create_if_block$6(ctx);
8486
8514
 
8487
8515
  return {
8488
8516
  c() {
@@ -8549,7 +8577,7 @@ function create_fragment$e(ctx) {
8549
8577
  if (if_block1) if_block1.m(div2, null);
8550
8578
  append(div2, t2);
8551
8579
  append(div2, input);
8552
- /*input_binding*/ ctx[32](input);
8580
+ /*input_binding*/ ctx[33](input);
8553
8581
  append(div2, t3);
8554
8582
  if (if_block2) if_block2.m(div2, null);
8555
8583
  append(div2, t4);
@@ -8681,7 +8709,7 @@ function create_fragment$e(ctx) {
8681
8709
  if (if_block4) {
8682
8710
  if_block4.p(ctx, dirty);
8683
8711
  } else {
8684
- if_block4 = create_if_block$5(ctx);
8712
+ if_block4 = create_if_block$6(ctx);
8685
8713
  if_block4.c();
8686
8714
  if_block4.m(div2, t6);
8687
8715
  }
@@ -8716,7 +8744,7 @@ function create_fragment$e(ctx) {
8716
8744
  if (detaching) detach(div3);
8717
8745
  if (if_block0) if_block0.d();
8718
8746
  if (if_block1) if_block1.d();
8719
- /*input_binding*/ ctx[32](null);
8747
+ /*input_binding*/ ctx[33](null);
8720
8748
  if (if_block2) if_block2.d();
8721
8749
  if (if_block3) if_block3.d();
8722
8750
  if (if_block4) if_block4.d();
@@ -8730,7 +8758,7 @@ function doClick() {
8730
8758
  this.dispatchEvent(new CustomEvent("_trailingIconClick", { composed: true }));
8731
8759
  }
8732
8760
 
8733
- function instance$c($$self, $$props, $$invalidate) {
8761
+ function instance$d($$self, $$props, $$invalidate) {
8734
8762
  let handlesTrailingIconClick;
8735
8763
  let isFocused;
8736
8764
  let isReadonly;
@@ -8770,29 +8798,41 @@ function instance$c($$self, $$props, $$invalidate) {
8770
8798
  let { testid = "" } = $$props;
8771
8799
  let { width = "30ch" } = $$props;
8772
8800
  let { arialabel = null } = $$props;
8773
- let { min = null } = $$props;
8774
- let { max = null } = $$props;
8775
- let { step = null } = $$props;
8801
+ let { min = "" } = $$props;
8802
+ let { max = "" } = $$props;
8803
+ let { step = 1 } = $$props;
8776
8804
  let { prefix = "" } = $$props;
8777
8805
  let { suffix = "" } = $$props;
8806
+ let { debounce = 0 } = $$props;
8778
8807
  let { mt = null } = $$props;
8779
8808
  let { mr = null } = $$props;
8780
8809
  let { mb = null } = $$props;
8781
8810
  let { ml = null } = $$props;
8782
8811
  let inputEl;
8812
+ let _debounceId = null;
8783
8813
 
8784
8814
  function onKeyUp(e) {
8785
- const ee = e.target;
8815
+ const input = e.target;
8816
+ if (!input) return;
8786
8817
 
8787
- e.target.dispatchEvent(new CustomEvent("_change",
8788
- {
8789
- composed: true,
8790
- bubbles: false,
8791
- cancelable: true,
8792
- detail: { name, value: ee.value }
8793
- }));
8818
+ if (_debounceId != null) {
8819
+ clearTimeout(_debounceId);
8820
+ }
8821
+
8822
+ _debounceId = setTimeout(
8823
+ () => {
8824
+ input.dispatchEvent(new CustomEvent("_change",
8825
+ {
8826
+ composed: true,
8827
+ bubbles: false,
8828
+ cancelable: true,
8829
+ detail: { name, value: input.value }
8830
+ }));
8831
+ },
8832
+ debounce
8833
+ );
8794
8834
 
8795
- $$invalidate(0, value = ee.value);
8835
+ $$invalidate(0, value = input.value);
8796
8836
  }
8797
8837
 
8798
8838
  onMount(() => {
@@ -8833,6 +8873,7 @@ function instance$c($$self, $$props, $$invalidate) {
8833
8873
  if ('step' in $$props) $$invalidate(13, step = $$props.step);
8834
8874
  if ('prefix' in $$props) $$invalidate(14, prefix = $$props.prefix);
8835
8875
  if ('suffix' in $$props) $$invalidate(15, suffix = $$props.suffix);
8876
+ if ('debounce' in $$props) $$invalidate(31, debounce = $$props.debounce);
8836
8877
  if ('mt' in $$props) $$invalidate(16, mt = $$props.mt);
8837
8878
  if ('mr' in $$props) $$invalidate(17, mr = $$props.mr);
8838
8879
  if ('mb' in $$props) $$invalidate(18, mb = $$props.mb);
@@ -8845,7 +8886,7 @@ function instance$c($$self, $$props, $$invalidate) {
8845
8886
  }
8846
8887
 
8847
8888
  if ($$self.$$.dirty[0] & /*focused*/ 268435456) {
8848
- $$invalidate(31, isFocused = toBoolean(focused));
8889
+ $$invalidate(32, isFocused = toBoolean(focused));
8849
8890
  }
8850
8891
 
8851
8892
  if ($$self.$$.dirty[0] & /*readonly*/ 536870912) {
@@ -8860,7 +8901,7 @@ function instance$c($$self, $$props, $$invalidate) {
8860
8901
  $$invalidate(21, isDisabled = toBoolean(disabled));
8861
8902
  }
8862
8903
 
8863
- if ($$self.$$.dirty[0] & /*inputEl*/ 1048576 | $$self.$$.dirty[1] & /*isFocused*/ 1) {
8904
+ if ($$self.$$.dirty[0] & /*inputEl*/ 1048576 | $$self.$$.dirty[1] & /*isFocused*/ 2) {
8864
8905
  if (isFocused && inputEl) {
8865
8906
  setTimeout(() => inputEl.focus(), 1);
8866
8907
  }
@@ -8907,6 +8948,7 @@ function instance$c($$self, $$props, $$invalidate) {
8907
8948
  focused,
8908
8949
  readonly,
8909
8950
  error,
8951
+ debounce,
8910
8952
  isFocused,
8911
8953
  input_binding
8912
8954
  ];
@@ -8916,7 +8958,7 @@ class Input extends SvelteElement {
8916
8958
  constructor(options) {
8917
8959
  super();
8918
8960
 
8919
- this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box}.container{position:relative;width:100%;display:inline-block}@media(min-width: 640px){.container{width:var(--width)}}.goa-input,.goa-input *{box-sizing:border-box}.goa-input{box-sizing:border-box;outline:none;transition:box-shadow 0.1s ease-in;border:1px solid var(--color-gray-600);border-radius:var(--input-border-radius);display:inline-flex;align-items:stretch;vertical-align:middle;min-width:100%}.goa-input:hover{border-color:var(--goa-color-interactive--hover)}.goa-input:active,.goa-input:focus,.goa-input:focus-within{box-shadow:0 0 0 3px var(--goa-color-interactive--focus)}.goa-input.type--range{border:none}.goa-input.type--range:active,.goa-input.type--range:focus,.goa-input.type--range:focus-within{box-shadow:none}.goa-input-leading-icon{margin-left:0.5rem}.goa-input-trailing-icon{margin-right:0.5rem}input{display:inline-block;color:var(--goa-color-text);font-size:var(--input-font-size);padding:var(--input-padding);line-height:calc(40px - calc(var(--input-padding) * 2));background-color:transparent;width:0;flex:1 1 auto}input[type="text"],input[type="date"],input[type="time"],input[type="datetime-local"],input[type="number"]{font-family:var(--font-family)}input[readonly]{cursor:pointer}.goa-input-leading-icon+input{padding-left:0.5rem}input,input:focus,input:hover,input:active{outline:none;border:none}.goa-input--disabled,.goa-input--disabled:hover,.goa-input--disabled:active,.goa-input--disabled:focus{background-color:var(--color-gray-100);border-color:var(--color-gray-200);cursor:default;box-shadow:none}.goa-input--disabled input,.goa-input--disabled input:hover,.goa-input--disabled input:active,.goa-input--disabled input:focus{color:var(--goa-color-text-secondary)}.goa-input--disabled input:hover{cursor:default !important}.prefix,.suffix,.leading-content ::slotted(div),.trailing-content ::slotted(div){background-color:var(--color-gray-100);padding:0 0.75rem;display:flex;align-items:center}.leading-content ::slotted(div),.trailing-content ::slotted(div){padding:0.5rem 0.75rem}.prefix,.leading-content ::slotted(div){border-top-left-radius:var(--input-border-radius);border-bottom-left-radius:var(--input-border-radius);border-right:1px solid var(--color-gray-600)}.suffix,.trailing-content ::slotted(div){border-top-right-radius:var(--input-border-radius);border-bottom-right-radius:var(--input-border-radius);border-left:1px solid var(--color-gray-600)}.goa-input--disabled .prefix,.goa-input--disabled .leading-content ::slotted(div){border-right:1px solid var(--color-gray-200)}.goa-input--disabled .suffix,.goa-input--disabled .trailing-content ::slotted(div){border-left:1px solid var(--color-gray-200)}input.input--goa{display:block;border:none;flex:1 1 auto}.variant--bare{border:none}.variant--bare:focus,.variant--bare:active,.variant--bare:focus-within{box-shadow:none}.error:hover,.error:focus,.error{border:2px solid var(--goa-color-interactive--error)}input[type="search" i]:enabled:read-write:-webkit-any(:focus, :hover)::-webkit-search-cancel-button{position:relative;right:var(--search-icon-offset);cursor:pointer;-webkit-appearance:none;height:1.2rem;width:1.2rem;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%23333" d="M405 136.798L375.202 107 256 226.202 136.798 107 107 136.798 226.202 256 107 375.202 136.798 405 256 285.798 375.202 405 405 375.202 285.798 256z"/></svg>')
8961
+ 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>')
8920
8962
  center center no-repeat}</style>`;
8921
8963
 
8922
8964
  init(
@@ -8926,8 +8968,8 @@ class Input extends SvelteElement {
8926
8968
  props: attribute_to_object(this.attributes),
8927
8969
  customElement: true
8928
8970
  },
8929
- instance$c,
8930
- create_fragment$e,
8971
+ instance$d,
8972
+ create_fragment$f,
8931
8973
  safe_not_equal,
8932
8974
  {
8933
8975
  type: 1,
@@ -8951,6 +8993,7 @@ class Input extends SvelteElement {
8951
8993
  step: 13,
8952
8994
  prefix: 14,
8953
8995
  suffix: 15,
8996
+ debounce: 31,
8954
8997
  mt: 16,
8955
8998
  mr: 17,
8956
8999
  mb: 18,
@@ -8995,6 +9038,7 @@ class Input extends SvelteElement {
8995
9038
  "step",
8996
9039
  "prefix",
8997
9040
  "suffix",
9041
+ "debounce",
8998
9042
  "mt",
8999
9043
  "mr",
9000
9044
  "mb",
@@ -9191,6 +9235,15 @@ class Input extends SvelteElement {
9191
9235
  flush();
9192
9236
  }
9193
9237
 
9238
+ get debounce() {
9239
+ return this.$$.ctx[31];
9240
+ }
9241
+
9242
+ set debounce(debounce) {
9243
+ this.$$set({ debounce });
9244
+ flush();
9245
+ }
9246
+
9194
9247
  get mt() {
9195
9248
  return this.$$.ctx[16];
9196
9249
  }
@@ -9364,7 +9417,7 @@ function create_if_block_2$2(ctx) {
9364
9417
  }
9365
9418
 
9366
9419
  // (56:2) {#if version}
9367
- function create_if_block$4(ctx) {
9420
+ function create_if_block$5(ctx) {
9368
9421
  let div;
9369
9422
  let t;
9370
9423
 
@@ -9388,7 +9441,7 @@ function create_if_block$4(ctx) {
9388
9441
  };
9389
9442
  }
9390
9443
 
9391
- function create_fragment$d(ctx) {
9444
+ function create_fragment$e(ctx) {
9392
9445
  let header;
9393
9446
  let t0;
9394
9447
  let show_if = ["alpha", "beta"].includes(/*type*/ ctx[0]);
@@ -9397,7 +9450,7 @@ function create_fragment$d(ctx) {
9397
9450
  let t2;
9398
9451
  let if_block0 = /*type*/ ctx[0] === "live" && create_if_block_3$1();
9399
9452
  let if_block1 = show_if && create_if_block_1$2(ctx);
9400
- let if_block2 = /*version*/ ctx[1] && create_if_block$4(ctx);
9453
+ let if_block2 = /*version*/ ctx[1] && create_if_block$5(ctx);
9401
9454
 
9402
9455
  return {
9403
9456
  c() {
@@ -9454,7 +9507,7 @@ function create_fragment$d(ctx) {
9454
9507
  if (if_block2) {
9455
9508
  if_block2.p(ctx, dirty);
9456
9509
  } else {
9457
- if_block2 = create_if_block$4(ctx);
9510
+ if_block2 = create_if_block$5(ctx);
9458
9511
  if_block2.c();
9459
9512
  if_block2.m(header, null);
9460
9513
  }
@@ -9479,7 +9532,7 @@ function capitalize(val) {
9479
9532
  return val[0].toUpperCase() + val.slice(1);
9480
9533
  }
9481
9534
 
9482
- function instance$b($$self, $$props, $$invalidate) {
9535
+ function instance$c($$self, $$props, $$invalidate) {
9483
9536
  const [Types, validateType] = typeValidator("Microsite header type", ["live", "alpha", "beta"], true);
9484
9537
  let { type } = $$props;
9485
9538
  let { version = "" } = $$props;
@@ -9501,7 +9554,7 @@ function instance$b($$self, $$props, $$invalidate) {
9501
9554
  class MicrositeHeader extends SvelteElement {
9502
9555
  constructor(options) {
9503
9556
  super();
9504
- 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>`;
9557
+ 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>`;
9505
9558
 
9506
9559
  init(
9507
9560
  this,
@@ -9510,8 +9563,8 @@ class MicrositeHeader extends SvelteElement {
9510
9563
  props: attribute_to_object(this.attributes),
9511
9564
  customElement: true
9512
9565
  },
9513
- instance$b,
9514
- create_fragment$d,
9566
+ instance$c,
9567
+ create_fragment$e,
9515
9568
  safe_not_equal,
9516
9569
  { type: 0, version: 1, feedbackurl: 2 },
9517
9570
  null
@@ -9565,7 +9618,7 @@ customElements.define("goa-microsite-header", MicrositeHeader);
9565
9618
 
9566
9619
  /* libs/web-components/src/components/modal/Modal.svelte generated by Svelte v3.51.0 */
9567
9620
 
9568
- function create_if_block$3(ctx) {
9621
+ function create_if_block$4(ctx) {
9569
9622
  let goa_focus_trap;
9570
9623
  let div5;
9571
9624
  let div0;
@@ -9893,10 +9946,10 @@ function create_if_block_1$1(ctx) {
9893
9946
  };
9894
9947
  }
9895
9948
 
9896
- function create_fragment$c(ctx) {
9949
+ function create_fragment$d(ctx) {
9897
9950
  let if_block_anchor;
9898
9951
  let current;
9899
- let if_block = /*isOpen*/ ctx[7] && create_if_block$3(ctx);
9952
+ let if_block = /*isOpen*/ ctx[7] && create_if_block$4(ctx);
9900
9953
 
9901
9954
  return {
9902
9955
  c() {
@@ -9918,7 +9971,7 @@ function create_fragment$c(ctx) {
9918
9971
  transition_in(if_block, 1);
9919
9972
  }
9920
9973
  } else {
9921
- if_block = create_if_block$3(ctx);
9974
+ if_block = create_if_block$4(ctx);
9922
9975
  if_block.c();
9923
9976
  transition_in(if_block, 1);
9924
9977
  if_block.m(if_block_anchor.parentNode, if_block_anchor);
@@ -9949,7 +10002,7 @@ function create_fragment$c(ctx) {
9949
10002
  };
9950
10003
  }
9951
10004
 
9952
- function instance$a($$self, $$props, $$invalidate) {
10005
+ function instance$b($$self, $$props, $$invalidate) {
9953
10006
  let isClosable;
9954
10007
  let isOpen;
9955
10008
  let _transitionTime;
@@ -10032,7 +10085,7 @@ function instance$a($$self, $$props, $$invalidate) {
10032
10085
  class Modal extends SvelteElement {
10033
10086
  constructor(options) {
10034
10087
  super();
10035
- 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>`;
10088
+ 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>`;
10036
10089
 
10037
10090
  init(
10038
10091
  this,
@@ -10041,8 +10094,8 @@ class Modal extends SvelteElement {
10041
10094
  props: attribute_to_object(this.attributes),
10042
10095
  customElement: true
10043
10096
  },
10044
- instance$a,
10045
- create_fragment$c,
10097
+ instance$b,
10098
+ create_fragment$d,
10046
10099
  safe_not_equal,
10047
10100
  {
10048
10101
  heading: 0,
@@ -10130,7 +10183,7 @@ customElements.define("goa-modal", Modal);
10130
10183
 
10131
10184
  /* libs/web-components/src/components/notification/Notification.svelte generated by Svelte v3.51.0 */
10132
10185
 
10133
- function create_if_block$2(ctx) {
10186
+ function create_if_block$3(ctx) {
10134
10187
  let div3;
10135
10188
  let div0;
10136
10189
  let goa_icon;
@@ -10225,10 +10278,10 @@ function create_if_block$2(ctx) {
10225
10278
  };
10226
10279
  }
10227
10280
 
10228
- function create_fragment$b(ctx) {
10281
+ function create_fragment$c(ctx) {
10229
10282
  let if_block_anchor;
10230
10283
  let current;
10231
- let if_block = /*show*/ ctx[1] && create_if_block$2(ctx);
10284
+ let if_block = /*show*/ ctx[1] && create_if_block$3(ctx);
10232
10285
 
10233
10286
  return {
10234
10287
  c() {
@@ -10250,7 +10303,7 @@ function create_fragment$b(ctx) {
10250
10303
  transition_in(if_block, 1);
10251
10304
  }
10252
10305
  } else {
10253
- if_block = create_if_block$2(ctx);
10306
+ if_block = create_if_block$3(ctx);
10254
10307
  if_block.c();
10255
10308
  transition_in(if_block, 1);
10256
10309
  if_block.m(if_block_anchor.parentNode, if_block_anchor);
@@ -10281,7 +10334,7 @@ function create_fragment$b(ctx) {
10281
10334
  };
10282
10335
  }
10283
10336
 
10284
- function instance$9($$self, $$props, $$invalidate) {
10337
+ function instance$a($$self, $$props, $$invalidate) {
10285
10338
  let iconType;
10286
10339
  const [Types, validateType] = typeValidator("Notification type", ["emergency", "important", "information", "event"], true);
10287
10340
  let { type = "" } = $$props;
@@ -10317,7 +10370,7 @@ function instance$9($$self, $$props, $$invalidate) {
10317
10370
  class Notification extends SvelteElement {
10318
10371
  constructor(options) {
10319
10372
  super();
10320
- 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>`;
10373
+ 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>`;
10321
10374
 
10322
10375
  init(
10323
10376
  this,
@@ -10326,8 +10379,8 @@ class Notification extends SvelteElement {
10326
10379
  props: attribute_to_object(this.attributes),
10327
10380
  customElement: true
10328
10381
  },
10329
- instance$9,
10330
- create_fragment$b,
10382
+ instance$a,
10383
+ create_fragment$c,
10331
10384
  safe_not_equal,
10332
10385
  { type: 0 },
10333
10386
  null
@@ -10368,7 +10421,7 @@ function isValidDimension(value) {
10368
10421
 
10369
10422
  /* libs/web-components/src/components/page-block/PageBlock.svelte generated by Svelte v3.51.0 */
10370
10423
 
10371
- function create_fragment$a(ctx) {
10424
+ function create_fragment$b(ctx) {
10372
10425
  let div;
10373
10426
  let slot;
10374
10427
  let div_style_value;
@@ -10398,7 +10451,7 @@ function create_fragment$a(ctx) {
10398
10451
  };
10399
10452
  }
10400
10453
 
10401
- function instance$8($$self, $$props, $$invalidate) {
10454
+ function instance$9($$self, $$props, $$invalidate) {
10402
10455
  const Sizes = { "full": "100%" };
10403
10456
  let { width } = $$props;
10404
10457
  let { _width } = $$props;
@@ -10428,7 +10481,7 @@ function instance$8($$self, $$props, $$invalidate) {
10428
10481
  class PageBlock extends SvelteElement {
10429
10482
  constructor(options) {
10430
10483
  super();
10431
- 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>`;
10484
+ 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>`;
10432
10485
 
10433
10486
  init(
10434
10487
  this,
@@ -10437,8 +10490,8 @@ class PageBlock extends SvelteElement {
10437
10490
  props: attribute_to_object(this.attributes),
10438
10491
  customElement: true
10439
10492
  },
10440
- instance$8,
10441
- create_fragment$a,
10493
+ instance$9,
10494
+ create_fragment$b,
10442
10495
  safe_not_equal,
10443
10496
  { width: 1, _width: 0 },
10444
10497
  null
@@ -10597,7 +10650,7 @@ function create_each_block$1(key_1, ctx) {
10597
10650
  };
10598
10651
  }
10599
10652
 
10600
- function create_fragment$9(ctx) {
10653
+ function create_fragment$a(ctx) {
10601
10654
  let div;
10602
10655
  let slot;
10603
10656
  let t;
@@ -10672,7 +10725,7 @@ function create_fragment$9(ctx) {
10672
10725
  };
10673
10726
  }
10674
10727
 
10675
- function instance$7($$self, $$props, $$invalidate) {
10728
+ function instance$8($$self, $$props, $$invalidate) {
10676
10729
  let isDisabled;
10677
10730
  let isError;
10678
10731
  const [Orientations, validateOrientation] = typeValidator("Radio group orientation", ["vertical", "horizontal"]);
@@ -10795,9 +10848,9 @@ class RadioGroup extends SvelteElement {
10795
10848
  constructor(options) {
10796
10849
  super();
10797
10850
 
10798
- 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
10799
- 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
10800
- 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>`;
10851
+ 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
10852
+ 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
10853
+ 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>`;
10801
10854
 
10802
10855
  init(
10803
10856
  this,
@@ -10806,8 +10859,8 @@ class RadioGroup extends SvelteElement {
10806
10859
  props: attribute_to_object(this.attributes),
10807
10860
  customElement: true
10808
10861
  },
10809
- instance$7,
10810
- create_fragment$9,
10862
+ instance$8,
10863
+ create_fragment$a,
10811
10864
  safe_not_equal,
10812
10865
  {
10813
10866
  name: 1,
@@ -10957,7 +11010,7 @@ customElements.define("goa-radio-group", RadioGroup);
10957
11010
 
10958
11011
  /* libs/web-components/src/components/scrollable/Scrollable.svelte generated by Svelte v3.51.0 */
10959
11012
 
10960
- function create_fragment$8(ctx) {
11013
+ function create_fragment$9(ctx) {
10961
11014
  let div;
10962
11015
  let slot;
10963
11016
  let div_style_value;
@@ -11004,7 +11057,7 @@ function create_fragment$8(ctx) {
11004
11057
  };
11005
11058
  }
11006
11059
 
11007
- function instance$6($$self, $$props, $$invalidate) {
11060
+ function instance$7($$self, $$props, $$invalidate) {
11008
11061
  let { direction = "vertical" } = $$props;
11009
11062
  let { hpadding = 0 } = $$props;
11010
11063
  let { vpadding = 0 } = $$props;
@@ -11032,8 +11085,8 @@ class Scrollable extends SvelteElement {
11032
11085
  props: attribute_to_object(this.attributes),
11033
11086
  customElement: true
11034
11087
  },
11035
- instance$6,
11036
- create_fragment$8,
11088
+ instance$7,
11089
+ create_fragment$9,
11037
11090
  safe_not_equal,
11038
11091
  {
11039
11092
  direction: 0,
@@ -11137,7 +11190,7 @@ function create_else_block(ctx) {
11137
11190
  function create_if_block_2(ctx) {
11138
11191
  let each_1_anchor;
11139
11192
  let current;
11140
- let each_value = Array(/*linecount*/ ctx[2]);
11193
+ let each_value = Array(Number.parseInt(/*linecount*/ ctx[2] + ""));
11141
11194
  let each_blocks = [];
11142
11195
 
11143
11196
  for (let i = 0; i < each_value.length; i += 1) {
@@ -11166,7 +11219,7 @@ function create_if_block_2(ctx) {
11166
11219
  },
11167
11220
  p(ctx, dirty) {
11168
11221
  if (dirty & /*size, linecount*/ 6) {
11169
- each_value = Array(/*linecount*/ ctx[2]);
11222
+ each_value = Array(Number.parseInt(/*linecount*/ ctx[2] + ""));
11170
11223
  let i;
11171
11224
 
11172
11225
  for (i = 0; i < each_value.length; i += 1) {
@@ -11308,7 +11361,7 @@ function create_if_block_1(ctx) {
11308
11361
  }
11309
11362
 
11310
11363
  // (30:2) {#if type === "card"}
11311
- function create_if_block$1(ctx) {
11364
+ function create_if_block$2(ctx) {
11312
11365
  let div1;
11313
11366
  let skeleton0;
11314
11367
  let t0;
@@ -11331,7 +11384,7 @@ function create_if_block$1(ctx) {
11331
11384
  props: {
11332
11385
  type: "lines",
11333
11386
  size: /*size*/ ctx[1],
11334
- linecount: 3
11387
+ linecount: /*linecount*/ ctx[2]
11335
11388
  }
11336
11389
  });
11337
11390
 
@@ -11367,6 +11420,7 @@ function create_if_block$1(ctx) {
11367
11420
  skeleton1.$set(skeleton1_changes);
11368
11421
  const skeleton2_changes = {};
11369
11422
  if (dirty & /*size*/ 2) skeleton2_changes.size = /*size*/ ctx[1];
11423
+ if (dirty & /*linecount*/ 4) skeleton2_changes.linecount = /*linecount*/ ctx[2];
11370
11424
  skeleton2.$set(skeleton2_changes);
11371
11425
 
11372
11426
  if (!current || dirty & /*size*/ 2 && div1_class_value !== (div1_class_value = "card card-" + /*size*/ ctx[1])) {
@@ -11399,7 +11453,7 @@ function create_if_block$1(ctx) {
11399
11453
  };
11400
11454
  }
11401
11455
 
11402
- // (52:4) {#each Array(linecount) as _item}
11456
+ // (52:4) {#each Array(Number.parseInt(linecount+"")) as _item}
11403
11457
  function create_each_block(ctx) {
11404
11458
  let skeleton;
11405
11459
  let current;
@@ -11441,13 +11495,13 @@ function create_each_block(ctx) {
11441
11495
  };
11442
11496
  }
11443
11497
 
11444
- function create_fragment$7(ctx) {
11498
+ function create_fragment$8(ctx) {
11445
11499
  let div;
11446
11500
  let current_block_type_index;
11447
11501
  let if_block;
11448
11502
  let div_style_value;
11449
11503
  let current;
11450
- const if_block_creators = [create_if_block$1, create_if_block_1, create_if_block_2, create_else_block];
11504
+ const if_block_creators = [create_if_block$2, create_if_block_1, create_if_block_2, create_else_block];
11451
11505
  const if_blocks = [];
11452
11506
 
11453
11507
  function select_block_type(ctx, dirty) {
@@ -11524,7 +11578,7 @@ function create_fragment$7(ctx) {
11524
11578
  };
11525
11579
  }
11526
11580
 
11527
- function instance$5($$self, $$props, $$invalidate) {
11581
+ function instance$6($$self, $$props, $$invalidate) {
11528
11582
  const [Types, validateType] = typeValidator(
11529
11583
  "Skeleton type",
11530
11584
  [
@@ -11577,7 +11631,7 @@ function instance$5($$self, $$props, $$invalidate) {
11577
11631
  class Skeleton extends SvelteElement {
11578
11632
  constructor(options) {
11579
11633
  super();
11580
- 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>`;
11634
+ 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>`;
11581
11635
 
11582
11636
  init(
11583
11637
  this,
@@ -11586,8 +11640,8 @@ class Skeleton extends SvelteElement {
11586
11640
  props: attribute_to_object(this.attributes),
11587
11641
  customElement: true
11588
11642
  },
11589
- instance$5,
11590
- create_fragment$7,
11643
+ instance$6,
11644
+ create_fragment$8,
11591
11645
  safe_not_equal,
11592
11646
  {
11593
11647
  maxwidth: 0,
@@ -11705,7 +11759,7 @@ customElements.define("goa-skeleton", Skeleton);
11705
11759
 
11706
11760
  /* libs/web-components/src/components/spacer/Spacer.svelte generated by Svelte v3.51.0 */
11707
11761
 
11708
- function create_fragment$6(ctx) {
11762
+ function create_fragment$7(ctx) {
11709
11763
  let div;
11710
11764
 
11711
11765
  return {
@@ -11727,15 +11781,15 @@ function create_fragment$6(ctx) {
11727
11781
  };
11728
11782
  }
11729
11783
 
11730
- function instance$4($$self, $$props, $$invalidate) {
11784
+ function instance$5($$self, $$props, $$invalidate) {
11731
11785
  let { hspacing = "none" } = $$props;
11732
11786
  let { vspacing = "none" } = $$props;
11733
11787
  let rootEl;
11734
11788
 
11735
11789
  onMount(() => {
11736
11790
  injectCss(rootEl, ":host", {
11737
- width: `var(--goa-spacing-${hspacing})`,
11738
- height: `var(--goa-spacing-${vspacing})`
11791
+ width: `var(--goa-space-${hspacing})`,
11792
+ height: `var(--goa-space-${vspacing})`
11739
11793
  });
11740
11794
  });
11741
11795
 
@@ -11765,8 +11819,8 @@ class Spacer extends SvelteElement {
11765
11819
  props: attribute_to_object(this.attributes),
11766
11820
  customElement: true
11767
11821
  },
11768
- instance$4,
11769
- create_fragment$6,
11822
+ instance$5,
11823
+ create_fragment$7,
11770
11824
  safe_not_equal,
11771
11825
  { hspacing: 1, vspacing: 2 },
11772
11826
  null
@@ -11958,7 +12012,7 @@ function tweened(value, defaults = {}) {
11958
12012
 
11959
12013
  /* libs/web-components/src/components/spinner/Spinner.svelte generated by Svelte v3.51.0 */
11960
12014
 
11961
- function create_if_block(ctx) {
12015
+ function create_if_block$1(ctx) {
11962
12016
  let svg;
11963
12017
  let circle;
11964
12018
  let circle_stroke_value;
@@ -11978,7 +12032,7 @@ function create_if_block(ctx) {
11978
12032
  attr(circle, "cy", /*radius*/ ctx[3]);
11979
12033
 
11980
12034
  attr(circle, "stroke", circle_stroke_value = /*invert*/ ctx[0]
11981
- ? "var(--goa-color-primary-dark)"
12035
+ ? "var(--goa-color-info-hover)"
11982
12036
  : "var(--goa-color-brand-light)");
11983
12037
 
11984
12038
  attr(circle, "stroke-width", /*strokewidth*/ ctx[4]);
@@ -11988,7 +12042,7 @@ function create_if_block(ctx) {
11988
12042
 
11989
12043
  attr(path, "stroke", path_stroke_value = /*invert*/ ctx[0]
11990
12044
  ? "var(--goa-color-brand-light)"
11991
- : "var(--goa-color-primary)");
12045
+ : "var(--goa-color-info-default)");
11992
12046
 
11993
12047
  attr(path, "stroke-linecap", "round");
11994
12048
  attr(svg, "class", svg_class_value = `spinner-${/*type*/ ctx[2]}`);
@@ -12014,7 +12068,7 @@ function create_if_block(ctx) {
12014
12068
  }
12015
12069
 
12016
12070
  if (dirty & /*invert*/ 1 && circle_stroke_value !== (circle_stroke_value = /*invert*/ ctx[0]
12017
- ? "var(--goa-color-primary-dark)"
12071
+ ? "var(--goa-color-info-hover)"
12018
12072
  : "var(--goa-color-brand-light)")) {
12019
12073
  attr(circle, "stroke", circle_stroke_value);
12020
12074
  }
@@ -12037,7 +12091,7 @@ function create_if_block(ctx) {
12037
12091
 
12038
12092
  if (dirty & /*invert*/ 1 && path_stroke_value !== (path_stroke_value = /*invert*/ ctx[0]
12039
12093
  ? "var(--goa-color-brand-light)"
12040
- : "var(--goa-color-primary)")) {
12094
+ : "var(--goa-color-info-default)")) {
12041
12095
  attr(path, "stroke", path_stroke_value);
12042
12096
  }
12043
12097
 
@@ -12067,9 +12121,9 @@ function create_if_block(ctx) {
12067
12121
  };
12068
12122
  }
12069
12123
 
12070
- function create_fragment$5(ctx) {
12124
+ function create_fragment$6(ctx) {
12071
12125
  let if_block_anchor;
12072
- let if_block = /*ready*/ ctx[6] && create_if_block(ctx);
12126
+ let if_block = /*ready*/ ctx[6] && create_if_block$1(ctx);
12073
12127
 
12074
12128
  return {
12075
12129
  c() {
@@ -12086,7 +12140,7 @@ function create_fragment$5(ctx) {
12086
12140
  if (if_block) {
12087
12141
  if_block.p(ctx, dirty);
12088
12142
  } else {
12089
- if_block = create_if_block(ctx);
12143
+ if_block = create_if_block$1(ctx);
12090
12144
  if_block.c();
12091
12145
  if_block.m(if_block_anchor.parentNode, if_block_anchor);
12092
12146
  }
@@ -12104,7 +12158,7 @@ function create_fragment$5(ctx) {
12104
12158
  };
12105
12159
  }
12106
12160
 
12107
- function instance$3($$self, $$props, $$invalidate) {
12161
+ function instance$4($$self, $$props, $$invalidate) {
12108
12162
  let diameter;
12109
12163
  let strokewidth;
12110
12164
  let radius;
@@ -12214,7 +12268,7 @@ function instance$3($$self, $$props, $$invalidate) {
12214
12268
  class Spinner extends SvelteElement {
12215
12269
  constructor(options) {
12216
12270
  super();
12217
- 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>`;
12271
+ 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>`;
12218
12272
 
12219
12273
  init(
12220
12274
  this,
@@ -12223,8 +12277,8 @@ class Spinner extends SvelteElement {
12223
12277
  props: attribute_to_object(this.attributes),
12224
12278
  customElement: true
12225
12279
  },
12226
- instance$3,
12227
- create_fragment$5,
12280
+ instance$4,
12281
+ create_fragment$6,
12228
12282
  safe_not_equal,
12229
12283
  {
12230
12284
  size: 10,
@@ -12292,7 +12346,7 @@ customElements.define("goa-spinner", Spinner);
12292
12346
 
12293
12347
  /* libs/web-components/src/components/table/Table.svelte generated by Svelte v3.51.0 */
12294
12348
 
12295
- function create_fragment$4(ctx) {
12349
+ function create_fragment$5(ctx) {
12296
12350
  let table;
12297
12351
  let slot;
12298
12352
  let t0;
@@ -12311,46 +12365,53 @@ function create_fragment$4(ctx) {
12311
12365
  <tfoot><tr><td></td></tr></tfoot>`;
12312
12366
 
12313
12367
  this.c = noop;
12368
+ attr(table, "class", /*variant*/ ctx[1]);
12314
12369
 
12315
12370
  attr(table, "style", table_style_value = `
12316
- width: ${/*width*/ ctx[0]};
12317
- ${calculateMargin(/*mt*/ ctx[1], /*mr*/ ctx[2], /*mb*/ ctx[3], /*ml*/ ctx[4])}
12371
+ ${/*width*/ ctx[0] ? `width: ${/*width*/ ctx[0]};` : ``}
12372
+ ${calculateMargin(/*mt*/ ctx[2], /*mr*/ ctx[3], /*mb*/ ctx[4], /*ml*/ ctx[5])}
12318
12373
  `);
12319
12374
 
12320
- toggle_class(table, "sticky", /*_stickyHeader*/ ctx[6]);
12375
+ toggle_class(table, "sticky", /*_stickyHeader*/ ctx[7]);
12321
12376
  },
12322
12377
  m(target, anchor) {
12323
12378
  insert(target, table, anchor);
12324
12379
  append(table, slot);
12325
12380
  append(table, t0);
12326
12381
  append(table, template);
12327
- /*table_binding*/ ctx[8](table);
12382
+ /*table_binding*/ ctx[9](table);
12328
12383
  },
12329
12384
  p(ctx, [dirty]) {
12330
- if (dirty & /*width, mt, mr, mb, ml*/ 31 && table_style_value !== (table_style_value = `
12331
- width: ${/*width*/ ctx[0]};
12332
- ${calculateMargin(/*mt*/ ctx[1], /*mr*/ ctx[2], /*mb*/ ctx[3], /*ml*/ ctx[4])}
12385
+ if (dirty & /*variant*/ 2) {
12386
+ attr(table, "class", /*variant*/ ctx[1]);
12387
+ }
12388
+
12389
+ if (dirty & /*width, mt, mr, mb, ml*/ 61 && table_style_value !== (table_style_value = `
12390
+ ${/*width*/ ctx[0] ? `width: ${/*width*/ ctx[0]};` : ``}
12391
+ ${calculateMargin(/*mt*/ ctx[2], /*mr*/ ctx[3], /*mb*/ ctx[4], /*ml*/ ctx[5])}
12333
12392
  `)) {
12334
12393
  attr(table, "style", table_style_value);
12335
12394
  }
12336
12395
 
12337
- if (dirty & /*_stickyHeader*/ 64) {
12338
- toggle_class(table, "sticky", /*_stickyHeader*/ ctx[6]);
12396
+ if (dirty & /*variant, _stickyHeader*/ 130) {
12397
+ toggle_class(table, "sticky", /*_stickyHeader*/ ctx[7]);
12339
12398
  }
12340
12399
  },
12341
12400
  i: noop,
12342
12401
  o: noop,
12343
12402
  d(detaching) {
12344
12403
  if (detaching) detach(table);
12345
- /*table_binding*/ ctx[8](null);
12404
+ /*table_binding*/ ctx[9](null);
12346
12405
  }
12347
12406
  };
12348
12407
  }
12349
12408
 
12350
- function instance$2($$self, $$props, $$invalidate) {
12409
+ function instance$3($$self, $$props, $$invalidate) {
12351
12410
  let _stickyHeader;
12411
+ const [Variants, validateVariant] = typeValidator("Table variant", ["normal", "relaxed"], true);
12352
12412
  let { width = "" } = $$props;
12353
12413
  let { stickyheader = "false" } = $$props;
12414
+ let { variant = "normal" } = $$props;
12354
12415
  let { mt = null } = $$props;
12355
12416
  let { mr = null } = $$props;
12356
12417
  let { mb = null } = $$props;
@@ -12360,6 +12421,7 @@ function instance$2($$self, $$props, $$invalidate) {
12360
12421
  let _rootEl;
12361
12422
 
12362
12423
  onMount(() => {
12424
+ validateVariant(variant);
12363
12425
  const slot = _rootEl.querySelector("slot");
12364
12426
 
12365
12427
  if (slot) {
@@ -12375,32 +12437,44 @@ function instance$2($$self, $$props, $$invalidate) {
12375
12437
  function table_binding($$value) {
12376
12438
  binding_callbacks[$$value ? 'unshift' : 'push'](() => {
12377
12439
  _rootEl = $$value;
12378
- $$invalidate(5, _rootEl);
12440
+ $$invalidate(6, _rootEl);
12379
12441
  });
12380
12442
  }
12381
12443
 
12382
12444
  $$self.$$set = $$props => {
12383
12445
  if ('width' in $$props) $$invalidate(0, width = $$props.width);
12384
- if ('stickyheader' in $$props) $$invalidate(7, stickyheader = $$props.stickyheader);
12385
- if ('mt' in $$props) $$invalidate(1, mt = $$props.mt);
12386
- if ('mr' in $$props) $$invalidate(2, mr = $$props.mr);
12387
- if ('mb' in $$props) $$invalidate(3, mb = $$props.mb);
12388
- if ('ml' in $$props) $$invalidate(4, ml = $$props.ml);
12446
+ if ('stickyheader' in $$props) $$invalidate(8, stickyheader = $$props.stickyheader);
12447
+ if ('variant' in $$props) $$invalidate(1, variant = $$props.variant);
12448
+ if ('mt' in $$props) $$invalidate(2, mt = $$props.mt);
12449
+ if ('mr' in $$props) $$invalidate(3, mr = $$props.mr);
12450
+ if ('mb' in $$props) $$invalidate(4, mb = $$props.mb);
12451
+ if ('ml' in $$props) $$invalidate(5, ml = $$props.ml);
12389
12452
  };
12390
12453
 
12391
12454
  $$self.$$.update = () => {
12392
- if ($$self.$$.dirty & /*stickyheader*/ 128) {
12393
- $$invalidate(6, _stickyHeader = toBoolean(stickyheader));
12455
+ if ($$self.$$.dirty & /*stickyheader*/ 256) {
12456
+ $$invalidate(7, _stickyHeader = toBoolean(stickyheader));
12394
12457
  }
12395
12458
  };
12396
12459
 
12397
- return [width, mt, mr, mb, ml, _rootEl, _stickyHeader, stickyheader, table_binding];
12460
+ return [
12461
+ width,
12462
+ variant,
12463
+ mt,
12464
+ mr,
12465
+ mb,
12466
+ ml,
12467
+ _rootEl,
12468
+ _stickyHeader,
12469
+ stickyheader,
12470
+ table_binding
12471
+ ];
12398
12472
  }
12399
12473
 
12400
12474
  class Table extends SvelteElement {
12401
12475
  constructor(options) {
12402
12476
  super();
12403
- this.shadowRoot.innerHTML = `<style>table{border-collapse:collapse}table.sticky{position:relative}table.sticky thead{position:sticky;top:0}td{padding:1rem 1.5rem;border-bottom:1px solid var(--color-gray-200);line-height:1rem}th{background-color:var(--color-white);color:var(--goa-color-text-secondary);padding:1rem;vertical-align:middle;text-align:left;border-bottom:2px solid var(--color-gray-600)}tfoot td{background-color:var(--color-gray-100)}tfoot tr:first-child td{border-top:2px solid var(--color-gray-200)}tfoot tr:last-child td{border-bottom:none}</style>`;
12477
+ 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>`;
12404
12478
 
12405
12479
  init(
12406
12480
  this,
@@ -12409,16 +12483,17 @@ class Table extends SvelteElement {
12409
12483
  props: attribute_to_object(this.attributes),
12410
12484
  customElement: true
12411
12485
  },
12412
- instance$2,
12413
- create_fragment$4,
12486
+ instance$3,
12487
+ create_fragment$5,
12414
12488
  safe_not_equal,
12415
12489
  {
12416
12490
  width: 0,
12417
- stickyheader: 7,
12418
- mt: 1,
12419
- mr: 2,
12420
- mb: 3,
12421
- ml: 4
12491
+ stickyheader: 8,
12492
+ variant: 1,
12493
+ mt: 2,
12494
+ mr: 3,
12495
+ mb: 4,
12496
+ ml: 5
12422
12497
  },
12423
12498
  null
12424
12499
  );
@@ -12436,7 +12511,7 @@ class Table extends SvelteElement {
12436
12511
  }
12437
12512
 
12438
12513
  static get observedAttributes() {
12439
- return ["width", "stickyheader", "mt", "mr", "mb", "ml"];
12514
+ return ["width", "stickyheader", "variant", "mt", "mr", "mb", "ml"];
12440
12515
  }
12441
12516
 
12442
12517
  get width() {
@@ -12449,7 +12524,7 @@ class Table extends SvelteElement {
12449
12524
  }
12450
12525
 
12451
12526
  get stickyheader() {
12452
- return this.$$.ctx[7];
12527
+ return this.$$.ctx[8];
12453
12528
  }
12454
12529
 
12455
12530
  set stickyheader(stickyheader) {
@@ -12457,17 +12532,26 @@ class Table extends SvelteElement {
12457
12532
  flush();
12458
12533
  }
12459
12534
 
12460
- get mt() {
12535
+ get variant() {
12461
12536
  return this.$$.ctx[1];
12462
12537
  }
12463
12538
 
12539
+ set variant(variant) {
12540
+ this.$$set({ variant });
12541
+ flush();
12542
+ }
12543
+
12544
+ get mt() {
12545
+ return this.$$.ctx[2];
12546
+ }
12547
+
12464
12548
  set mt(mt) {
12465
12549
  this.$$set({ mt });
12466
12550
  flush();
12467
12551
  }
12468
12552
 
12469
12553
  get mr() {
12470
- return this.$$.ctx[2];
12554
+ return this.$$.ctx[3];
12471
12555
  }
12472
12556
 
12473
12557
  set mr(mr) {
@@ -12476,7 +12560,7 @@ class Table extends SvelteElement {
12476
12560
  }
12477
12561
 
12478
12562
  get mb() {
12479
- return this.$$.ctx[3];
12563
+ return this.$$.ctx[4];
12480
12564
  }
12481
12565
 
12482
12566
  set mb(mb) {
@@ -12485,7 +12569,7 @@ class Table extends SvelteElement {
12485
12569
  }
12486
12570
 
12487
12571
  get ml() {
12488
- return this.$$.ctx[4];
12572
+ return this.$$.ctx[5];
12489
12573
  }
12490
12574
 
12491
12575
  set ml(ml) {
@@ -12498,7 +12582,7 @@ customElements.define("goa-table", Table);
12498
12582
 
12499
12583
  /* libs/web-components/src/components/text-area/TextArea.svelte generated by Svelte v3.51.0 */
12500
12584
 
12501
- function create_fragment$3(ctx) {
12585
+ function create_fragment$4(ctx) {
12502
12586
  let div;
12503
12587
  let textarea;
12504
12588
  let textarea_aria_label_value;
@@ -12594,7 +12678,7 @@ function create_fragment$3(ctx) {
12594
12678
  };
12595
12679
  }
12596
12680
 
12597
- function instance$1($$self, $$props, $$invalidate) {
12681
+ function instance$2($$self, $$props, $$invalidate) {
12598
12682
  let isError;
12599
12683
  let isDisabled;
12600
12684
  let isReadonly;
@@ -12690,8 +12774,8 @@ class TextArea extends SvelteElement {
12690
12774
  constructor(options) {
12691
12775
  super();
12692
12776
 
12693
- 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)
12694
- }.error:hover,.error:focus,.error{border:2px solid var(--goa-color-interactive--error)}</style>`;
12777
+ 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)
12778
+ }.error:hover,.error:focus,.error{border:2px solid var(--goa-color-interactive-error)}</style>`;
12695
12779
 
12696
12780
  init(
12697
12781
  this,
@@ -12700,8 +12784,8 @@ class TextArea extends SvelteElement {
12700
12784
  props: attribute_to_object(this.attributes),
12701
12785
  customElement: true
12702
12786
  },
12703
- instance$1,
12704
- create_fragment$3,
12787
+ instance$2,
12788
+ create_fragment$4,
12705
12789
  safe_not_equal,
12706
12790
  {
12707
12791
  name: 0,
@@ -12895,7 +12979,7 @@ customElements.define("goa-textarea", TextArea);
12895
12979
 
12896
12980
  /* libs/web-components/src/layouts/FullScreenNavbarLayout.svelte generated by Svelte v3.51.0 */
12897
12981
 
12898
- function create_fragment$2(ctx) {
12982
+ function create_fragment$3(ctx) {
12899
12983
  let div;
12900
12984
 
12901
12985
  return {
@@ -12929,12 +13013,12 @@ class FullScreenNavbarLayout extends SvelteElement {
12929
13013
  constructor(options) {
12930
13014
  super();
12931
13015
 
12932
- this.shadowRoot.innerHTML = `<style>.page{height:100vh;grid-template-columns:auto;grid-template-rows:min-content auto min-content;grid-template-areas:"header"
13016
+ this.shadowRoot.innerHTML = `<style>.page{height:100vh;grid-template-columns:auto;grid-template-rows:min-content auto min-content;grid-template-areas:"header"
12933
13017
  "content"
12934
13018
  "nav"
12935
- "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"
13019
+ "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"
12936
13020
  "nav content"
12937
- "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>`;
13021
+ "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>`;
12938
13022
 
12939
13023
  init(
12940
13024
  this,
@@ -12944,7 +13028,7 @@ class FullScreenNavbarLayout extends SvelteElement {
12944
13028
  customElement: true
12945
13029
  },
12946
13030
  null,
12947
- create_fragment$2,
13031
+ create_fragment$3,
12948
13032
  safe_not_equal,
12949
13033
  {},
12950
13034
  null
@@ -12962,7 +13046,7 @@ customElements.define("goa-layout-full-nav", FullScreenNavbarLayout);
12962
13046
 
12963
13047
  /* libs/web-components/src/layouts/one-column-layout/OneColumnLayout.svelte generated by Svelte v3.51.0 */
12964
13048
 
12965
- function create_fragment$1(ctx) {
13049
+ function create_fragment$2(ctx) {
12966
13050
  let div;
12967
13051
 
12968
13052
  return {
@@ -13003,7 +13087,7 @@ class OneColumnLayout extends SvelteElement {
13003
13087
  customElement: true
13004
13088
  },
13005
13089
  null,
13006
- create_fragment$1,
13090
+ create_fragment$2,
13007
13091
  safe_not_equal,
13008
13092
  {},
13009
13093
  null
@@ -13021,7 +13105,7 @@ customElements.define("goa-one-column-layout", OneColumnLayout);
13021
13105
 
13022
13106
  /* libs/web-components/src/layouts/two-column-layout/TwoColumnLayout.svelte generated by Svelte v3.51.0 */
13023
13107
 
13024
- function create_fragment(ctx) {
13108
+ function create_fragment$1(ctx) {
13025
13109
  let div;
13026
13110
  let header;
13027
13111
  let t0;
@@ -13053,7 +13137,7 @@ function create_fragment(ctx) {
13053
13137
 
13054
13138
  attr(div, "style", div_style_value = `
13055
13139
  --max-content-width: ${/*maxcontentwidth*/ ctx[1] || "100%"};
13056
- --nav-column-width: ${/*navcolumnwidth*/ ctx[0] || "var(--layout-nav-column-width)"};
13140
+ --nav-column-width: ${/*navcolumnwidth*/ ctx[0] || "256px"};
13057
13141
  `);
13058
13142
  },
13059
13143
  m(target, anchor) {
@@ -13067,7 +13151,7 @@ function create_fragment(ctx) {
13067
13151
  p(ctx, [dirty]) {
13068
13152
  if (dirty & /*maxcontentwidth, navcolumnwidth*/ 3 && div_style_value !== (div_style_value = `
13069
13153
  --max-content-width: ${/*maxcontentwidth*/ ctx[1] || "100%"};
13070
- --nav-column-width: ${/*navcolumnwidth*/ ctx[0] || "var(--layout-nav-column-width)"};
13154
+ --nav-column-width: ${/*navcolumnwidth*/ ctx[0] || "256px"};
13071
13155
  `)) {
13072
13156
  attr(div, "style", div_style_value);
13073
13157
  }
@@ -13080,7 +13164,7 @@ function create_fragment(ctx) {
13080
13164
  };
13081
13165
  }
13082
13166
 
13083
- function instance($$self, $$props, $$invalidate) {
13167
+ function instance$1($$self, $$props, $$invalidate) {
13084
13168
  let { navcolumnwidth = "" } = $$props;
13085
13169
  let { maxcontentwidth = "" } = $$props;
13086
13170
 
@@ -13095,7 +13179,7 @@ function instance($$self, $$props, $$invalidate) {
13095
13179
  class TwoColumnLayout extends SvelteElement {
13096
13180
  constructor(options) {
13097
13181
  super();
13098
- 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>`;
13182
+ 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>`;
13099
13183
 
13100
13184
  init(
13101
13185
  this,
@@ -13104,8 +13188,8 @@ class TwoColumnLayout extends SvelteElement {
13104
13188
  props: attribute_to_object(this.attributes),
13105
13189
  customElement: true
13106
13190
  },
13107
- instance,
13108
- create_fragment,
13191
+ instance$1,
13192
+ create_fragment$1,
13109
13193
  safe_not_equal,
13110
13194
  { navcolumnwidth: 0, maxcontentwidth: 1 },
13111
13195
  null
@@ -13147,3 +13231,429 @@ class TwoColumnLayout extends SvelteElement {
13147
13231
  }
13148
13232
 
13149
13233
  customElements.define("goa-two-column-layout", TwoColumnLayout);
13234
+
13235
+ /* libs/web-components/src/components/pagination/Pagination.svelte generated by Svelte v3.51.0 */
13236
+
13237
+ function create_if_block(ctx) {
13238
+ let goa_block;
13239
+ let span0;
13240
+ let t1;
13241
+ let input;
13242
+ let t2;
13243
+ let goa_input;
13244
+ let t3;
13245
+ let span1;
13246
+ let t4;
13247
+ let t5;
13248
+
13249
+ return {
13250
+ c() {
13251
+ goa_block = element("goa-block");
13252
+ span0 = element("span");
13253
+ span0.textContent = "Page";
13254
+ t1 = space();
13255
+ input = element("input");
13256
+ t2 = space();
13257
+ goa_input = element("goa-input");
13258
+ t3 = space();
13259
+ span1 = element("span");
13260
+ t4 = text("of ");
13261
+ t5 = text(/*_pageCount*/ ctx[8]);
13262
+ attr(input, "type", "hidden");
13263
+ set_custom_element_data(goa_input, "type", "number");
13264
+ set_custom_element_data(goa_input, "value", /*pagenumber*/ ctx[0]);
13265
+ set_custom_element_data(goa_input, "width", "8ch");
13266
+ set_custom_element_data(goa_input, "debounce", "500");
13267
+ set_custom_element_data(goa_input, "min", "1");
13268
+ set_custom_element_data(goa_input, "max", /*_pageCount*/ ctx[8]);
13269
+ set_custom_element_data(goa_block, "data-testid", "page-selector");
13270
+ set_custom_element_data(goa_block, "alignment", "center");
13271
+ set_custom_element_data(goa_block, "gap", "s");
13272
+ },
13273
+ m(target, anchor) {
13274
+ insert(target, goa_block, anchor);
13275
+ append(goa_block, span0);
13276
+ append(goa_block, t1);
13277
+ append(goa_block, input);
13278
+ /*input_binding*/ ctx[12](input);
13279
+ append(goa_block, t2);
13280
+ append(goa_block, goa_input);
13281
+ /*goa_input_binding*/ ctx[13](goa_input);
13282
+ append(goa_block, t3);
13283
+ append(goa_block, span1);
13284
+ append(span1, t4);
13285
+ append(span1, t5);
13286
+ },
13287
+ p(ctx, dirty) {
13288
+ if (dirty & /*pagenumber*/ 1) {
13289
+ set_custom_element_data(goa_input, "value", /*pagenumber*/ ctx[0]);
13290
+ }
13291
+
13292
+ if (dirty & /*_pageCount*/ 256) {
13293
+ set_custom_element_data(goa_input, "max", /*_pageCount*/ ctx[8]);
13294
+ }
13295
+
13296
+ if (dirty & /*_pageCount*/ 256) set_data(t5, /*_pageCount*/ ctx[8]);
13297
+ },
13298
+ d(detaching) {
13299
+ if (detaching) detach(goa_block);
13300
+ /*input_binding*/ ctx[12](null);
13301
+ /*goa_input_binding*/ ctx[13](null);
13302
+ }
13303
+ };
13304
+ }
13305
+
13306
+ function create_fragment(ctx) {
13307
+ let goa_block1;
13308
+ let div;
13309
+ let t0;
13310
+ let goa_block0;
13311
+ let goa_button0;
13312
+ let t1;
13313
+ let goa_button0_disabled_value;
13314
+ let t2;
13315
+ let goa_button1;
13316
+ let t3;
13317
+ let goa_button1_disabled_value;
13318
+ let mounted;
13319
+ let dispose;
13320
+ let if_block = /*variant*/ ctx[1] === "all" && create_if_block(ctx);
13321
+
13322
+ return {
13323
+ c() {
13324
+ goa_block1 = element("goa-block");
13325
+ div = element("div");
13326
+ if (if_block) if_block.c();
13327
+ t0 = space();
13328
+ goa_block0 = element("goa-block");
13329
+ goa_button0 = element("goa-button");
13330
+ t1 = text("Previous");
13331
+ t2 = space();
13332
+ goa_button1 = element("goa-button");
13333
+ t3 = text("Next");
13334
+ this.c = noop;
13335
+ set_custom_element_data(goa_button0, "type", "tertiary");
13336
+ set_custom_element_data(goa_button0, "leadingicon", "arrow-back");
13337
+ set_custom_element_data(goa_button0, "disabled", goa_button0_disabled_value = /*pagenumber*/ ctx[0] == 1 ? "true" : "false");
13338
+ set_custom_element_data(goa_button1, "type", "tertiary");
13339
+ set_custom_element_data(goa_button1, "trailingicon", "arrow-forward");
13340
+
13341
+ set_custom_element_data(goa_button1, "disabled", goa_button1_disabled_value = /*pagenumber*/ ctx[0] == /*_pageCount*/ ctx[8]
13342
+ ? "true"
13343
+ : "false");
13344
+
13345
+ set_custom_element_data(goa_block0, "alignment", "center");
13346
+ set_custom_element_data(goa_block0, "gap", "m");
13347
+ set_custom_element_data(goa_block0, "data-testid", "page-links");
13348
+ attr(div, "class", "controls");
13349
+ set_custom_element_data(goa_block1, "id", "root");
13350
+ set_custom_element_data(goa_block1, "ml", /*ml*/ ctx[5]);
13351
+ set_custom_element_data(goa_block1, "mr", /*mr*/ ctx[3]);
13352
+ set_custom_element_data(goa_block1, "mb", /*mb*/ ctx[4]);
13353
+ set_custom_element_data(goa_block1, "mt", /*mt*/ ctx[2]);
13354
+ },
13355
+ m(target, anchor) {
13356
+ insert(target, goa_block1, anchor);
13357
+ append(goa_block1, div);
13358
+ if (if_block) if_block.m(div, null);
13359
+ append(div, t0);
13360
+ append(div, goa_block0);
13361
+ append(goa_block0, goa_button0);
13362
+ append(goa_button0, t1);
13363
+ append(goa_block0, t2);
13364
+ append(goa_block0, goa_button1);
13365
+ append(goa_button1, t3);
13366
+
13367
+ if (!mounted) {
13368
+ dispose = [
13369
+ listen(goa_button0, "click", /*click_handler*/ ctx[14]),
13370
+ listen(goa_button1, "click", /*click_handler_1*/ ctx[15])
13371
+ ];
13372
+
13373
+ mounted = true;
13374
+ }
13375
+ },
13376
+ p(ctx, [dirty]) {
13377
+ if (/*variant*/ ctx[1] === "all") {
13378
+ if (if_block) {
13379
+ if_block.p(ctx, dirty);
13380
+ } else {
13381
+ if_block = create_if_block(ctx);
13382
+ if_block.c();
13383
+ if_block.m(div, t0);
13384
+ }
13385
+ } else if (if_block) {
13386
+ if_block.d(1);
13387
+ if_block = null;
13388
+ }
13389
+
13390
+ if (dirty & /*pagenumber*/ 1 && goa_button0_disabled_value !== (goa_button0_disabled_value = /*pagenumber*/ ctx[0] == 1 ? "true" : "false")) {
13391
+ set_custom_element_data(goa_button0, "disabled", goa_button0_disabled_value);
13392
+ }
13393
+
13394
+ if (dirty & /*pagenumber, _pageCount*/ 257 && goa_button1_disabled_value !== (goa_button1_disabled_value = /*pagenumber*/ ctx[0] == /*_pageCount*/ ctx[8]
13395
+ ? "true"
13396
+ : "false")) {
13397
+ set_custom_element_data(goa_button1, "disabled", goa_button1_disabled_value);
13398
+ }
13399
+
13400
+ if (dirty & /*ml*/ 32) {
13401
+ set_custom_element_data(goa_block1, "ml", /*ml*/ ctx[5]);
13402
+ }
13403
+
13404
+ if (dirty & /*mr*/ 8) {
13405
+ set_custom_element_data(goa_block1, "mr", /*mr*/ ctx[3]);
13406
+ }
13407
+
13408
+ if (dirty & /*mb*/ 16) {
13409
+ set_custom_element_data(goa_block1, "mb", /*mb*/ ctx[4]);
13410
+ }
13411
+
13412
+ if (dirty & /*mt*/ 4) {
13413
+ set_custom_element_data(goa_block1, "mt", /*mt*/ ctx[2]);
13414
+ }
13415
+ },
13416
+ i: noop,
13417
+ o: noop,
13418
+ d(detaching) {
13419
+ if (detaching) detach(goa_block1);
13420
+ if (if_block) if_block.d();
13421
+ mounted = false;
13422
+ run_all(dispose);
13423
+ }
13424
+ };
13425
+ }
13426
+
13427
+ function instance($$self, $$props, $$invalidate) {
13428
+ let _pageCount;
13429
+ const [Variants, validateVariant] = typeValidator("Pagination variant", ["all", "links-only"]);
13430
+ let { pagenumber } = $$props;
13431
+ let { itemcount } = $$props;
13432
+ let { perpagecount = 10 } = $$props;
13433
+ let { variant = "all" } = $$props;
13434
+ let { mt = null } = $$props;
13435
+ let { mr = null } = $$props;
13436
+ let { mb = "m" } = $$props;
13437
+ let { ml = null } = $$props;
13438
+
13439
+ // private
13440
+ let inputEl = null;
13441
+
13442
+ let hiddenEl = null; // needed to allow the inputEl's event to be cancelled
13443
+
13444
+ // hooks
13445
+ onMount(async () => {
13446
+ await tick();
13447
+ validateRequired("GoAPagination", { itemcount, pagenumber });
13448
+ validateVariant(variant);
13449
+
13450
+ // prevent event propagation if value is non-numeric
13451
+ // (input[type=number] returns blank for non-numeric numbers)
13452
+ inputEl && inputEl.addEventListener("_change", e => {
13453
+ const page = Number.parseInt(e.detail.value);
13454
+ e.stopPropagation();
13455
+
13456
+ if (isNaN(page)) {
13457
+ return;
13458
+ }
13459
+
13460
+ hiddenEl.dispatchEvent(new CustomEvent("_change",
13461
+ {
13462
+ composed: true,
13463
+ bubbles: true,
13464
+ detail: { page }
13465
+ }));
13466
+ });
13467
+ });
13468
+
13469
+ // functions
13470
+ function goto(e, offset) {
13471
+ const newPage = Number.parseInt(pagenumber + "") + offset;
13472
+
13473
+ if (newPage > 0 && newPage <= _pageCount) {
13474
+ e.target.dispatchEvent(new CustomEvent("_change",
13475
+ {
13476
+ composed: true,
13477
+ bubbles: true,
13478
+ detail: { page: newPage }
13479
+ }));
13480
+ }
13481
+
13482
+ e.preventDefault();
13483
+ }
13484
+
13485
+ function input_binding($$value) {
13486
+ binding_callbacks[$$value ? 'unshift' : 'push'](() => {
13487
+ hiddenEl = $$value;
13488
+ $$invalidate(7, hiddenEl);
13489
+ });
13490
+ }
13491
+
13492
+ function goa_input_binding($$value) {
13493
+ binding_callbacks[$$value ? 'unshift' : 'push'](() => {
13494
+ inputEl = $$value;
13495
+ $$invalidate(6, inputEl);
13496
+ });
13497
+ }
13498
+
13499
+ const click_handler = e => goto(e, -1);
13500
+ const click_handler_1 = e => goto(e, 1);
13501
+
13502
+ $$self.$$set = $$props => {
13503
+ if ('pagenumber' in $$props) $$invalidate(0, pagenumber = $$props.pagenumber);
13504
+ if ('itemcount' in $$props) $$invalidate(10, itemcount = $$props.itemcount);
13505
+ if ('perpagecount' in $$props) $$invalidate(11, perpagecount = $$props.perpagecount);
13506
+ if ('variant' in $$props) $$invalidate(1, variant = $$props.variant);
13507
+ if ('mt' in $$props) $$invalidate(2, mt = $$props.mt);
13508
+ if ('mr' in $$props) $$invalidate(3, mr = $$props.mr);
13509
+ if ('mb' in $$props) $$invalidate(4, mb = $$props.mb);
13510
+ if ('ml' in $$props) $$invalidate(5, ml = $$props.ml);
13511
+ };
13512
+
13513
+ $$self.$$.update = () => {
13514
+ if ($$self.$$.dirty & /*itemcount, perpagecount*/ 3072) {
13515
+ // reactive
13516
+ $$invalidate(8, _pageCount = Math.ceil(itemcount / perpagecount));
13517
+ }
13518
+ };
13519
+
13520
+ return [
13521
+ pagenumber,
13522
+ variant,
13523
+ mt,
13524
+ mr,
13525
+ mb,
13526
+ ml,
13527
+ inputEl,
13528
+ hiddenEl,
13529
+ _pageCount,
13530
+ goto,
13531
+ itemcount,
13532
+ perpagecount,
13533
+ input_binding,
13534
+ goa_input_binding,
13535
+ click_handler,
13536
+ click_handler_1
13537
+ ];
13538
+ }
13539
+
13540
+ class Pagination extends SvelteElement {
13541
+ constructor(options) {
13542
+ super();
13543
+ 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>`;
13544
+
13545
+ init(
13546
+ this,
13547
+ {
13548
+ target: this.shadowRoot,
13549
+ props: attribute_to_object(this.attributes),
13550
+ customElement: true
13551
+ },
13552
+ instance,
13553
+ create_fragment,
13554
+ safe_not_equal,
13555
+ {
13556
+ pagenumber: 0,
13557
+ itemcount: 10,
13558
+ perpagecount: 11,
13559
+ variant: 1,
13560
+ mt: 2,
13561
+ mr: 3,
13562
+ mb: 4,
13563
+ ml: 5
13564
+ },
13565
+ null
13566
+ );
13567
+
13568
+ if (options) {
13569
+ if (options.target) {
13570
+ insert(options.target, this, options.anchor);
13571
+ }
13572
+
13573
+ if (options.props) {
13574
+ this.$set(options.props);
13575
+ flush();
13576
+ }
13577
+ }
13578
+ }
13579
+
13580
+ static get observedAttributes() {
13581
+ return ["pagenumber", "itemcount", "perpagecount", "variant", "mt", "mr", "mb", "ml"];
13582
+ }
13583
+
13584
+ get pagenumber() {
13585
+ return this.$$.ctx[0];
13586
+ }
13587
+
13588
+ set pagenumber(pagenumber) {
13589
+ this.$$set({ pagenumber });
13590
+ flush();
13591
+ }
13592
+
13593
+ get itemcount() {
13594
+ return this.$$.ctx[10];
13595
+ }
13596
+
13597
+ set itemcount(itemcount) {
13598
+ this.$$set({ itemcount });
13599
+ flush();
13600
+ }
13601
+
13602
+ get perpagecount() {
13603
+ return this.$$.ctx[11];
13604
+ }
13605
+
13606
+ set perpagecount(perpagecount) {
13607
+ this.$$set({ perpagecount });
13608
+ flush();
13609
+ }
13610
+
13611
+ get variant() {
13612
+ return this.$$.ctx[1];
13613
+ }
13614
+
13615
+ set variant(variant) {
13616
+ this.$$set({ variant });
13617
+ flush();
13618
+ }
13619
+
13620
+ get mt() {
13621
+ return this.$$.ctx[2];
13622
+ }
13623
+
13624
+ set mt(mt) {
13625
+ this.$$set({ mt });
13626
+ flush();
13627
+ }
13628
+
13629
+ get mr() {
13630
+ return this.$$.ctx[3];
13631
+ }
13632
+
13633
+ set mr(mr) {
13634
+ this.$$set({ mr });
13635
+ flush();
13636
+ }
13637
+
13638
+ get mb() {
13639
+ return this.$$.ctx[4];
13640
+ }
13641
+
13642
+ set mb(mb) {
13643
+ this.$$set({ mb });
13644
+ flush();
13645
+ }
13646
+
13647
+ get ml() {
13648
+ return this.$$.ctx[5];
13649
+ }
13650
+
13651
+ set ml(ml) {
13652
+ this.$$set({ ml });
13653
+ flush();
13654
+ }
13655
+ }
13656
+
13657
+ customElements.define("goa-pagination", Pagination);
13658
+
13659
+ export { Pagination };