@abgov/web-components 1.4.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.
Files changed (4) hide show
  1. package/index.css +1 -0
  2. package/package.json +1 -1
  3. package/web-components.es.js +878 -403
  4. package/web-components.umd.js +53 -56
package/web-components.es.js CHANGED
@@ -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
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
 
@@ -4958,9 +4965,9 @@ function create_else_block$1(ctx) {
4958
4965
  m(target, anchor) {
4959
4966
  if (if_block) if_block.m(target, anchor);
4960
4967
  insert(target, t0, anchor);
4961
- insert(target, slot, anchor);
4962
- insert(target, t1, anchor);
4963
4968
  insert(target, goa_input, anchor);
4969
+ insert(target, t1, anchor);
4970
+ insert(target, slot, anchor);
4964
4971
  insert(target, t2, anchor);
4965
4972
  insert(target, ul, anchor);
4966
4973
 
@@ -5045,9 +5052,9 @@ function create_else_block$1(ctx) {
5045
5052
  d(detaching) {
5046
5053
  if (if_block) if_block.d(detaching);
5047
5054
  if (detaching) detach(t0);
5048
- if (detaching) detach(slot);
5049
- if (detaching) detach(t1);
5050
5055
  if (detaching) detach(goa_input);
5056
+ if (detaching) detach(t1);
5057
+ if (detaching) detach(slot);
5051
5058
  if (detaching) detach(t2);
5052
5059
  if (detaching) detach(ul);
5053
5060
 
@@ -5062,8 +5069,8 @@ function create_else_block$1(ctx) {
5062
5069
  };
5063
5070
  }
5064
5071
 
5065
- // (225:2) {#if _native}
5066
- function create_if_block$a(ctx) {
5072
+ // (237:2) {#if _native}
5073
+ function create_if_block$b(ctx) {
5067
5074
  let select;
5068
5075
  let slot;
5069
5076
  let select_aria_label_value;
@@ -5150,7 +5157,7 @@ function create_if_block$a(ctx) {
5150
5157
  };
5151
5158
  }
5152
5159
 
5153
- // (245:4) {#if _isMenuVisible}
5160
+ // (257:4) {#if _isMenuVisible}
5154
5161
  function create_if_block_1$5(ctx) {
5155
5162
  let div;
5156
5163
  let div_data_testid_value;
@@ -5184,10 +5191,10 @@ function create_if_block_1$5(ctx) {
5184
5191
  };
5185
5192
  }
5186
5193
 
5187
- // (288:6) {#each _options as option, index (index)}
5194
+ // (300:6) {#each _options as option, index (index)}
5188
5195
  function create_each_block_1(key_1, ctx) {
5189
5196
  let li;
5190
- let t0_value = (/*option*/ ctx[48].label || /*option*/ ctx[48].value) + "";
5197
+ let t0_value = (/*option*/ ctx[49].label || /*option*/ ctx[49].value) + "";
5191
5198
  let t0;
5192
5199
  let t1;
5193
5200
  let li_id_value;
@@ -5201,7 +5208,7 @@ function create_each_block_1(key_1, ctx) {
5201
5208
  let dispose;
5202
5209
 
5203
5210
  function click_handler() {
5204
- return /*click_handler*/ ctx[32](/*option*/ ctx[48]);
5211
+ return /*click_handler*/ ctx[32](/*option*/ ctx[49]);
5205
5212
  }
5206
5213
 
5207
5214
  return {
@@ -5211,22 +5218,22 @@ function create_each_block_1(key_1, ctx) {
5211
5218
  li = element("li");
5212
5219
  t0 = text(t0_value);
5213
5220
  t1 = space();
5214
- attr(li, "id", li_id_value = /*option*/ ctx[48].label);
5221
+ attr(li, "id", li_id_value = /*option*/ ctx[49].label);
5215
5222
  attr(li, "role", "option");
5216
- 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);
5217
5224
 
5218
- 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)
5219
5226
  ? "true"
5220
5227
  : "false");
5221
5228
 
5222
5229
  attr(li, "class", "dropdown-item");
5223
- attr(li, "data-testid", li_data_testid_value = `dropdown-item-${/*option*/ ctx[48].value}`);
5224
- attr(li, "data-index", li_data_index_value = /*index*/ ctx[52]);
5225
- 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);
5226
5233
  attr(li, "style", li_style_value = `display: ${"block"}`);
5227
5234
  toggle_class(li, "dropdown-item--disabled", false);
5228
- toggle_class(li, "dropdown-item--tabbed", /*index*/ ctx[52] === /*_highlightedIndex*/ ctx[16]);
5229
- 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));
5230
5237
  this.first = li;
5231
5238
  },
5232
5239
  m(target, anchor) {
@@ -5241,40 +5248,40 @@ function create_each_block_1(key_1, ctx) {
5241
5248
  },
5242
5249
  p(new_ctx, dirty) {
5243
5250
  ctx = new_ctx;
5244
- 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);
5245
5252
 
5246
- 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)) {
5247
5254
  attr(li, "id", li_id_value);
5248
5255
  }
5249
5256
 
5250
- 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)) {
5251
5258
  attr(li, "aria-label", li_aria_label_value);
5252
5259
  }
5253
5260
 
5254
- 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)
5255
5262
  ? "true"
5256
5263
  : "false")) {
5257
5264
  attr(li, "aria-selected", li_aria_selected_value);
5258
5265
  }
5259
5266
 
5260
- 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}`)) {
5261
5268
  attr(li, "data-testid", li_data_testid_value);
5262
5269
  }
5263
5270
 
5264
- 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])) {
5265
5272
  attr(li, "data-index", li_data_index_value);
5266
5273
  }
5267
5274
 
5268
- 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)) {
5269
5276
  attr(li, "data-value", li_data_value_value);
5270
5277
  }
5271
5278
 
5272
5279
  if (dirty[0] & /*_options, _highlightedIndex*/ 73728) {
5273
- 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]);
5274
5281
  }
5275
5282
 
5276
5283
  if (dirty[0] & /*_values, _options*/ 12288) {
5277
- 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));
5278
5285
  }
5279
5286
  },
5280
5287
  d(detaching) {
@@ -5285,10 +5292,10 @@ function create_each_block_1(key_1, ctx) {
5285
5292
  };
5286
5293
  }
5287
5294
 
5288
- // (234:6) {#each _options as option}
5295
+ // (246:6) {#each _options as option}
5289
5296
  function create_each_block$4(ctx) {
5290
5297
  let option;
5291
- let t0_value = /*option*/ ctx[48].label + "";
5298
+ let t0_value = /*option*/ ctx[49].label + "";
5292
5299
  let t0;
5293
5300
  let t1;
5294
5301
  let option_selected_value;
@@ -5300,10 +5307,10 @@ function create_each_block$4(ctx) {
5300
5307
  option = element("option");
5301
5308
  t0 = text(t0_value);
5302
5309
  t1 = space();
5303
- option.selected = option_selected_value = /*option*/ ctx[48].selected;
5304
- 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;
5305
5312
  option.value = option.__value;
5306
- 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);
5307
5314
  },
5308
5315
  m(target, anchor) {
5309
5316
  insert(target, option, anchor);
@@ -5311,18 +5318,18 @@ function create_each_block$4(ctx) {
5311
5318
  append(option, t1);
5312
5319
  },
5313
5320
  p(ctx, dirty) {
5314
- 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);
5315
5322
 
5316
- 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)) {
5317
5324
  option.selected = option_selected_value;
5318
5325
  }
5319
5326
 
5320
- 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)) {
5321
5328
  option.__value = option_value_value;
5322
5329
  option.value = option.__value;
5323
5330
  }
5324
5331
 
5325
- 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)) {
5326
5333
  attr(option, "aria-label", option_aria_label_value);
5327
5334
  }
5328
5335
  },
@@ -5332,13 +5339,13 @@ function create_each_block$4(ctx) {
5332
5339
  };
5333
5340
  }
5334
5341
 
5335
- function create_fragment$p(ctx) {
5342
+ function create_fragment$q(ctx) {
5336
5343
  let div;
5337
5344
  let div_data_testid_value;
5338
5345
  let div_style_value;
5339
5346
 
5340
5347
  function select_block_type(ctx, dirty) {
5341
- if (/*_native*/ ctx[22]) return create_if_block$a;
5348
+ if (/*_native*/ ctx[22]) return create_if_block$b;
5342
5349
  return create_else_block$1;
5343
5350
  }
5344
5351
 
@@ -5403,23 +5410,7 @@ function create_fragment$p(ctx) {
5403
5410
  };
5404
5411
  }
5405
5412
 
5406
- function getCustomDropdownWidth(options) {
5407
- let width;
5408
- let maxCount = 0;
5409
-
5410
- options.forEach(option => {
5411
- const label = option.label || option.value || "";
5412
-
5413
- if (!width && maxCount < label.length) {
5414
- maxCount = label.length;
5415
- width = `${Math.max(20, maxCount + 12)}ch`;
5416
- }
5417
- });
5418
-
5419
- return width;
5420
- }
5421
-
5422
- function instance$m($$self, $$props, $$invalidate) {
5413
+ function instance$n($$self, $$props, $$invalidate) {
5423
5414
  let _disabled;
5424
5415
  let _error;
5425
5416
  let _multiselect;
@@ -5462,6 +5453,17 @@ function instance$m($$self, $$props, $$invalidate) {
5462
5453
  addKeyboardEventListeners();
5463
5454
  setHighlightedIndexToSelected();
5464
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
+ });
5465
5467
  });
5466
5468
 
5467
5469
  onDestroy(() => {
@@ -5489,7 +5491,7 @@ function instance$m($$self, $$props, $$invalidate) {
5489
5491
  function getOptions() {
5490
5492
  const children = getChildren();
5491
5493
 
5492
- return children.map(el => {
5494
+ return children.filter(child => child.tagName === "GOA-DROPDOWN-ITEM").map(el => {
5493
5495
  const option = el;
5494
5496
  const value = el.getAttribute("value") || option.value;
5495
5497
  const label = el.getAttribute("label") || option.label || value;
@@ -5504,6 +5506,27 @@ function instance$m($$self, $$props, $$invalidate) {
5504
5506
  });
5505
5507
  }
5506
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
+
5507
5530
  function addKeyboardEventListeners() {
5508
5531
  _el.addEventListener("focus", onFocus, true);
5509
5532
  _el.addEventListener("blur", onBlur, true);
@@ -5746,7 +5769,7 @@ function instance$m($$self, $$props, $$invalidate) {
5746
5769
  class Dropdown extends SvelteElement {
5747
5770
  constructor(options) {
5748
5771
  super();
5749
- 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>`;
5750
5773
 
5751
5774
  init(
5752
5775
  this,
@@ -5755,8 +5778,8 @@ class Dropdown extends SvelteElement {
5755
5778
  props: attribute_to_object(this.attributes),
5756
5779
  customElement: true
5757
5780
  },
5758
- instance$m,
5759
- create_fragment$p,
5781
+ instance$n,
5782
+ create_fragment$q,
5760
5783
  safe_not_equal,
5761
5784
  {
5762
5785
  name: 0,
@@ -5951,7 +5974,7 @@ customElements.define("goa-dropdown", Dropdown);
5951
5974
 
5952
5975
  /* libs/web-components/src/components/dropdown/DropdownItem.svelte generated by Svelte v3.51.0 */
5953
5976
 
5954
- function create_fragment$o(ctx) {
5977
+ function create_fragment$p(ctx) {
5955
5978
  return {
5956
5979
  c() {
5957
5980
  this.c = noop;
@@ -5976,7 +5999,7 @@ class DropdownItem extends SvelteElement {
5976
5999
  customElement: true
5977
6000
  },
5978
6001
  null,
5979
- create_fragment$o,
6002
+ create_fragment$p,
5980
6003
  safe_not_equal,
5981
6004
  {},
5982
6005
  null
@@ -5994,7 +6017,7 @@ customElements.define("goa-dropdown-item", DropdownItem);
5994
6017
 
5995
6018
  /* libs/web-components/src/components/focus-trap/FocusTrap.svelte generated by Svelte v3.51.0 */
5996
6019
 
5997
- function create_fragment$n(ctx) {
6020
+ function create_fragment$o(ctx) {
5998
6021
  let div;
5999
6022
 
6000
6023
  return {
@@ -6047,7 +6070,7 @@ function isFocusable(element) {
6047
6070
  }
6048
6071
  }
6049
6072
 
6050
- function instance$l($$self, $$props, $$invalidate) {
6073
+ function instance$m($$self, $$props, $$invalidate) {
6051
6074
  let isActive;
6052
6075
  let { active } = $$props;
6053
6076
  let ignoreFocusChanges = false;
@@ -6224,8 +6247,8 @@ class FocusTrap extends SvelteElement {
6224
6247
  props: attribute_to_object(this.attributes),
6225
6248
  customElement: true
6226
6249
  },
6227
- instance$l,
6228
- create_fragment$n,
6250
+ instance$m,
6251
+ create_fragment$o,
6229
6252
  safe_not_equal,
6230
6253
  { active: 1 },
6231
6254
  null
@@ -6261,7 +6284,7 @@ customElements.define("goa-focus-trap", FocusTrap);
6261
6284
 
6262
6285
  /* libs/web-components/src/components/footer/Footer.svelte generated by Svelte v3.51.0 */
6263
6286
 
6264
- function create_if_block$9(ctx) {
6287
+ function create_if_block$a(ctx) {
6265
6288
  let goa_divider;
6266
6289
 
6267
6290
  return {
@@ -6278,7 +6301,7 @@ function create_if_block$9(ctx) {
6278
6301
  };
6279
6302
  }
6280
6303
 
6281
- function create_fragment$m(ctx) {
6304
+ function create_fragment$n(ctx) {
6282
6305
  let div5;
6283
6306
  let div4;
6284
6307
  let div0;
@@ -6292,7 +6315,7 @@ function create_fragment$m(ctx) {
6292
6315
  let t3;
6293
6316
  let a1;
6294
6317
  let div5_style_value;
6295
- 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();
6296
6319
 
6297
6320
  return {
6298
6321
  c() {
@@ -6320,9 +6343,9 @@ function create_fragment$m(ctx) {
6320
6343
  attr(a1, "href", "https://alberta.ca");
6321
6344
  attr(a1, "class", "goa-copyright");
6322
6345
  attr(div2, "class", "abgov");
6323
- 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);
6324
6347
  attr(div3, "class", "meta-section");
6325
- 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);
6326
6349
  attr(div4, "class", "content");
6327
6350
  attr(div5, "class", "app-footer");
6328
6351
  attr(div5, "style", div5_style_value = `--max-content-width: ${/*maxcontentwidth*/ ctx[0] || "100%"}`);
@@ -6344,9 +6367,9 @@ function create_fragment$m(ctx) {
6344
6367
  /*div5_binding*/ ctx[5](div5);
6345
6368
  },
6346
6369
  p(ctx, [dirty]) {
6347
- if (/*navLinks*/ ctx[2]?.length) {
6370
+ if (/*navLinks*/ ctx[2] && /*navLinks*/ ctx[2].length > 0) {
6348
6371
  if (if_block) ; else {
6349
- if_block = create_if_block$9();
6372
+ if_block = create_if_block$a();
6350
6373
  if_block.c();
6351
6374
  if_block.m(div4, t1);
6352
6375
  }
@@ -6356,11 +6379,11 @@ function create_fragment$m(ctx) {
6356
6379
  }
6357
6380
 
6358
6381
  if (dirty & /*metaLinks*/ 8) {
6359
- 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);
6360
6383
  }
6361
6384
 
6362
6385
  if (dirty & /*metaLinks*/ 8) {
6363
- 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);
6364
6387
  }
6365
6388
 
6366
6389
  if (dirty & /*maxcontentwidth*/ 1 && div5_style_value !== (div5_style_value = `--max-content-width: ${/*maxcontentwidth*/ ctx[0] || "100%"}`)) {
@@ -6377,7 +6400,7 @@ function create_fragment$m(ctx) {
6377
6400
  };
6378
6401
  }
6379
6402
 
6380
- function instance$k($$self, $$props, $$invalidate) {
6403
+ function instance$l($$self, $$props, $$invalidate) {
6381
6404
  let { maxcontentwidth = "" } = $$props;
6382
6405
  let rootEl;
6383
6406
  let navLinks;
@@ -6409,7 +6432,7 @@ function instance$k($$self, $$props, $$invalidate) {
6409
6432
  class Footer extends SvelteElement {
6410
6433
  constructor(options) {
6411
6434
  super();
6412
- 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>`;
6413
6436
 
6414
6437
  init(
6415
6438
  this,
@@ -6418,8 +6441,8 @@ class Footer extends SvelteElement {
6418
6441
  props: attribute_to_object(this.attributes),
6419
6442
  customElement: true
6420
6443
  },
6421
- instance$k,
6422
- create_fragment$m,
6444
+ instance$l,
6445
+ create_fragment$n,
6423
6446
  safe_not_equal,
6424
6447
  { maxcontentwidth: 0 },
6425
6448
  null
@@ -6494,7 +6517,7 @@ function create_each_block$3(ctx) {
6494
6517
  };
6495
6518
  }
6496
6519
 
6497
- function create_fragment$l(ctx) {
6520
+ function create_fragment$m(ctx) {
6498
6521
  let section;
6499
6522
  let div;
6500
6523
  let t;
@@ -6567,7 +6590,7 @@ function create_fragment$l(ctx) {
6567
6590
  };
6568
6591
  }
6569
6592
 
6570
- function instance$j($$self, $$props, $$invalidate) {
6593
+ function instance$k($$self, $$props, $$invalidate) {
6571
6594
  let rootEl;
6572
6595
  let children = [];
6573
6596
 
@@ -6602,7 +6625,7 @@ function instance$j($$self, $$props, $$invalidate) {
6602
6625
  class FooterMetaSection extends SvelteElement {
6603
6626
  constructor(options) {
6604
6627
  super();
6605
- 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>`;
6606
6629
 
6607
6630
  init(
6608
6631
  this,
@@ -6611,8 +6634,8 @@ class FooterMetaSection extends SvelteElement {
6611
6634
  props: attribute_to_object(this.attributes),
6612
6635
  customElement: true
6613
6636
  },
6614
- instance$j,
6615
- create_fragment$l,
6637
+ instance$k,
6638
+ create_fragment$m,
6616
6639
  safe_not_equal,
6617
6640
  {},
6618
6641
  null
@@ -6637,7 +6660,7 @@ function get_each_context$2(ctx, list, i) {
6637
6660
  }
6638
6661
 
6639
6662
  // (31:2) {#if heading}
6640
- function create_if_block$8(ctx) {
6663
+ function create_if_block$9(ctx) {
6641
6664
  let div;
6642
6665
  let t0;
6643
6666
  let t1;
@@ -6702,14 +6725,14 @@ function create_each_block$2(ctx) {
6702
6725
  };
6703
6726
  }
6704
6727
 
6705
- function create_fragment$k(ctx) {
6728
+ function create_fragment$l(ctx) {
6706
6729
  let section;
6707
6730
  let t0;
6708
6731
  let div;
6709
6732
  let t1;
6710
6733
  let ul;
6711
6734
  let ul_style_value;
6712
- let if_block = /*heading*/ ctx[0] && create_if_block$8(ctx);
6735
+ let if_block = /*heading*/ ctx[0] && create_if_block$9(ctx);
6713
6736
  let each_value = /*children*/ ctx[3];
6714
6737
  let each_blocks = [];
6715
6738
 
@@ -6763,7 +6786,7 @@ function create_fragment$k(ctx) {
6763
6786
  if (if_block) {
6764
6787
  if_block.p(ctx, dirty);
6765
6788
  } else {
6766
- if_block = create_if_block$8(ctx);
6789
+ if_block = create_if_block$9(ctx);
6767
6790
  if_block.c();
6768
6791
  if_block.m(section, t0);
6769
6792
  }
@@ -6817,7 +6840,7 @@ function create_fragment$k(ctx) {
6817
6840
  };
6818
6841
  }
6819
6842
 
6820
- function instance$i($$self, $$props, $$invalidate) {
6843
+ function instance$j($$self, $$props, $$invalidate) {
6821
6844
  let { heading = "" } = $$props;
6822
6845
  let { maxcolumncount = 1 } = $$props;
6823
6846
  let rootEl;
@@ -6863,7 +6886,7 @@ function instance$i($$self, $$props, $$invalidate) {
6863
6886
  class FooterNavSection extends SvelteElement {
6864
6887
  constructor(options) {
6865
6888
  super();
6866
- 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>`;
6867
6890
 
6868
6891
  init(
6869
6892
  this,
@@ -6872,8 +6895,8 @@ class FooterNavSection extends SvelteElement {
6872
6895
  props: attribute_to_object(this.attributes),
6873
6896
  customElement: true
6874
6897
  },
6875
- instance$i,
6876
- create_fragment$k,
6898
+ instance$j,
6899
+ create_fragment$l,
6877
6900
  safe_not_equal,
6878
6901
  { heading: 0, maxcolumncount: 1 },
6879
6902
  null
@@ -7027,7 +7050,7 @@ function create_if_block_1$4(ctx) {
7027
7050
  }
7028
7051
 
7029
7052
  // (48:2) {#if helptext}
7030
- function create_if_block$7(ctx) {
7053
+ function create_if_block$8(ctx) {
7031
7054
  let div;
7032
7055
  let t;
7033
7056
 
@@ -7050,7 +7073,7 @@ function create_if_block$7(ctx) {
7050
7073
  };
7051
7074
  }
7052
7075
 
7053
- function create_fragment$j(ctx) {
7076
+ function create_fragment$k(ctx) {
7054
7077
  let div1;
7055
7078
  let t0;
7056
7079
  let div0;
@@ -7059,7 +7082,7 @@ function create_fragment$j(ctx) {
7059
7082
  let div1_style_value;
7060
7083
  let if_block0 = /*label*/ ctx[5] && create_if_block_2$4(ctx);
7061
7084
  let if_block1 = /*error*/ ctx[7] && create_if_block_1$4(ctx);
7062
- let if_block2 = /*helptext*/ ctx[6] && create_if_block$7(ctx);
7085
+ let if_block2 = /*helptext*/ ctx[6] && create_if_block$8(ctx);
7063
7086
 
7064
7087
  return {
7065
7088
  c() {
@@ -7119,7 +7142,7 @@ function create_fragment$j(ctx) {
7119
7142
  if (if_block2) {
7120
7143
  if_block2.p(ctx, dirty);
7121
7144
  } else {
7122
- if_block2 = create_if_block$7(ctx);
7145
+ if_block2 = create_if_block$8(ctx);
7123
7146
  if_block2.c();
7124
7147
  if_block2.m(div1, null);
7125
7148
  }
@@ -7147,7 +7170,7 @@ function create_fragment$j(ctx) {
7147
7170
  };
7148
7171
  }
7149
7172
 
7150
- function instance$h($$self, $$props, $$invalidate) {
7173
+ function instance$i($$self, $$props, $$invalidate) {
7151
7174
  const [REQUIREMENT_TYPES, validateRequirementType] = typeValidator("Requirement type", ["optional", "required"], false);
7152
7175
  let { testid = "" } = $$props;
7153
7176
  let { mt = null } = $$props;
@@ -7181,7 +7204,7 @@ function instance$h($$self, $$props, $$invalidate) {
7181
7204
  class FormItem extends SvelteElement {
7182
7205
  constructor(options) {
7183
7206
  super();
7184
- 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>`;
7185
7208
 
7186
7209
  init(
7187
7210
  this,
@@ -7190,9 +7213,9 @@ class FormItem extends SvelteElement {
7190
7213
  props: attribute_to_object(this.attributes),
7191
7214
  customElement: true
7192
7215
  },
7193
- instance$h,
7194
- create_fragment$j,
7195
- safe_not_equal,
7216
+ instance$i,
7217
+ create_fragment$k,
7218
+ safe_not_equal,
7196
7219
  {
7197
7220
  testid: 0,
7198
7221
  mt: 1,
@@ -7319,7 +7342,7 @@ customElements.define("goa-form-item", FormItem);
7319
7342
 
7320
7343
  /* libs/web-components/src/components/grid/Grid.svelte generated by Svelte v3.51.0 */
7321
7344
 
7322
- function create_fragment$i(ctx) {
7345
+ function create_fragment$j(ctx) {
7323
7346
  let div;
7324
7347
  let slot;
7325
7348
  let div_style_value;
@@ -7334,7 +7357,7 @@ function create_fragment$i(ctx) {
7334
7357
  attr(div, "style", div_style_value = `
7335
7358
  ${calculateMargin(/*mt*/ ctx[2], /*mr*/ ctx[3], /*mb*/ ctx[4], /*ml*/ ctx[5])}
7336
7359
  --min-child-width: ${/*minchildwidth*/ ctx[1] || 0};
7337
- gap: var(--goa-spacing-${/*gap*/ ctx[0]})
7360
+ gap: var(--goa-space-${/*gap*/ ctx[0]})
7338
7361
  `);
7339
7362
  },
7340
7363
  m(target, anchor) {
@@ -7345,7 +7368,7 @@ function create_fragment$i(ctx) {
7345
7368
  if (dirty & /*mt, mr, mb, ml, minchildwidth, gap*/ 63 && div_style_value !== (div_style_value = `
7346
7369
  ${calculateMargin(/*mt*/ ctx[2], /*mr*/ ctx[3], /*mb*/ ctx[4], /*ml*/ ctx[5])}
7347
7370
  --min-child-width: ${/*minchildwidth*/ ctx[1] || 0};
7348
- gap: var(--goa-spacing-${/*gap*/ ctx[0]})
7371
+ gap: var(--goa-space-${/*gap*/ ctx[0]})
7349
7372
  `)) {
7350
7373
  attr(div, "style", div_style_value);
7351
7374
  }
@@ -7358,7 +7381,7 @@ function create_fragment$i(ctx) {
7358
7381
  };
7359
7382
  }
7360
7383
 
7361
- function instance$g($$self, $$props, $$invalidate) {
7384
+ function instance$h($$self, $$props, $$invalidate) {
7362
7385
  let { gap = "m" } = $$props;
7363
7386
  let { minchildwidth = "" } = $$props;
7364
7387
  let { mt = null } = $$props;
@@ -7385,7 +7408,7 @@ function instance$g($$self, $$props, $$invalidate) {
7385
7408
  class Grid extends SvelteElement {
7386
7409
  constructor(options) {
7387
7410
  super();
7388
- 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>`;
7389
7412
 
7390
7413
  init(
7391
7414
  this,
@@ -7394,8 +7417,8 @@ class Grid extends SvelteElement {
7394
7417
  props: attribute_to_object(this.attributes),
7395
7418
  customElement: true
7396
7419
  },
7397
- instance$g,
7398
- create_fragment$i,
7420
+ instance$h,
7421
+ create_fragment$j,
7399
7422
  safe_not_equal,
7400
7423
  {
7401
7424
  gap: 0,
@@ -7483,7 +7506,7 @@ customElements.define("goa-grid", Grid);
7483
7506
 
7484
7507
  /* libs/web-components/src/components/hero-banner/HeroBanner.svelte generated by Svelte v3.51.0 */
7485
7508
 
7486
- function create_fragment$h(ctx) {
7509
+ function create_fragment$i(ctx) {
7487
7510
  let div1;
7488
7511
  let goa_page_block;
7489
7512
  let h1;
@@ -7546,7 +7569,7 @@ function create_fragment$h(ctx) {
7546
7569
  };
7547
7570
  }
7548
7571
 
7549
- function instance$f($$self, $$props, $$invalidate) {
7572
+ function instance$g($$self, $$props, $$invalidate) {
7550
7573
  let { heading } = $$props;
7551
7574
  let { backgroundurl } = $$props;
7552
7575
  let { minheight = "600px" } = $$props;
@@ -7563,7 +7586,7 @@ function instance$f($$self, $$props, $$invalidate) {
7563
7586
  class HeroBanner extends SvelteElement {
7564
7587
  constructor(options) {
7565
7588
  super();
7566
- 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>`;
7567
7590
 
7568
7591
  init(
7569
7592
  this,
@@ -7572,8 +7595,8 @@ class HeroBanner extends SvelteElement {
7572
7595
  props: attribute_to_object(this.attributes),
7573
7596
  customElement: true
7574
7597
  },
7575
- instance$f,
7576
- create_fragment$h,
7598
+ instance$g,
7599
+ create_fragment$i,
7577
7600
  safe_not_equal,
7578
7601
  {
7579
7602
  heading: 0,
@@ -7631,7 +7654,7 @@ customElements.define("goa-hero-banner", HeroBanner);
7631
7654
 
7632
7655
  /* libs/web-components/src/components/icon-button/IconButton.svelte generated by Svelte v3.51.0 */
7633
7656
 
7634
- function create_fragment$g(ctx) {
7657
+ function create_fragment$h(ctx) {
7635
7658
  let button;
7636
7659
  let goa_icon;
7637
7660
  let button_style_value;
@@ -7718,7 +7741,7 @@ function handleClick(e) {
7718
7741
  e.target.dispatchEvent(new CustomEvent("_click", { composed: true, detail: { event: e } }));
7719
7742
  }
7720
7743
 
7721
- function instance$e($$self, $$props, $$invalidate) {
7744
+ function instance$f($$self, $$props, $$invalidate) {
7722
7745
  let css;
7723
7746
  let isDisabled;
7724
7747
  let isInverted;
@@ -7802,7 +7825,7 @@ function instance$e($$self, $$props, $$invalidate) {
7802
7825
  class IconButton extends SvelteElement {
7803
7826
  constructor(options) {
7804
7827
  super();
7805
- 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>`;
7806
7829
 
7807
7830
  init(
7808
7831
  this,
@@ -7811,8 +7834,8 @@ class IconButton extends SvelteElement {
7811
7834
  props: attribute_to_object(this.attributes),
7812
7835
  customElement: true
7813
7836
  },
7814
- instance$e,
7815
- create_fragment$g,
7837
+ instance$f,
7838
+ create_fragment$h,
7816
7839
  safe_not_equal,
7817
7840
  {
7818
7841
  icon: 0,
@@ -7973,7 +7996,7 @@ customElements.define("goa-icon-button", IconButton);
7973
7996
 
7974
7997
  /* libs/web-components/src/components/icon/Icon.svelte generated by Svelte v3.51.0 */
7975
7998
 
7976
- function create_if_block$6(ctx) {
7999
+ function create_if_block$7(ctx) {
7977
8000
  let ion_icon;
7978
8001
  let ion_icon_name_value;
7979
8002
 
@@ -8001,10 +8024,10 @@ function create_if_block$6(ctx) {
8001
8024
  };
8002
8025
  }
8003
8026
 
8004
- function create_fragment$f(ctx) {
8027
+ function create_fragment$g(ctx) {
8005
8028
  let div;
8006
8029
  let div_style_value;
8007
- let if_block = /*type*/ ctx[4] && create_if_block$6(ctx);
8030
+ let if_block = /*type*/ ctx[4] && create_if_block$7(ctx);
8008
8031
 
8009
8032
  return {
8010
8033
  c() {
@@ -8034,7 +8057,7 @@ function create_fragment$f(ctx) {
8034
8057
  if (if_block) {
8035
8058
  if_block.p(ctx, dirty);
8036
8059
  } else {
8037
- if_block = create_if_block$6(ctx);
8060
+ if_block = create_if_block$7(ctx);
8038
8061
  if_block.c();
8039
8062
  if_block.m(div, null);
8040
8063
  }
@@ -8074,7 +8097,7 @@ function create_fragment$f(ctx) {
8074
8097
  };
8075
8098
  }
8076
8099
 
8077
- function instance$d($$self, $$props, $$invalidate) {
8100
+ function instance$e($$self, $$props, $$invalidate) {
8078
8101
  let isInverted;
8079
8102
  let _size;
8080
8103
  let { mt = null } = $$props;
@@ -8152,8 +8175,8 @@ class Icon extends SvelteElement {
8152
8175
  props: attribute_to_object(this.attributes),
8153
8176
  customElement: true
8154
8177
  },
8155
- instance$d,
8156
- create_fragment$f,
8178
+ instance$e,
8179
+ create_fragment$g,
8157
8180
  safe_not_equal,
8158
8181
  {
8159
8182
  mt: 0,
@@ -8348,7 +8371,7 @@ function create_if_block_4$1(ctx) {
8348
8371
  };
8349
8372
  }
8350
8373
 
8351
- // (100:4) {#if leadingicon}
8374
+ // (109:4) {#if leadingicon}
8352
8375
  function create_if_block_3$2(ctx) {
8353
8376
  let goa_icon;
8354
8377
 
@@ -8373,7 +8396,7 @@ function create_if_block_3$2(ctx) {
8373
8396
  };
8374
8397
  }
8375
8398
 
8376
- // (130:4) {#if trailingicon && !handlesTrailingIconClick}
8399
+ // (139:4) {#if trailingicon && !handlesTrailingIconClick}
8377
8400
  function create_if_block_2$3(ctx) {
8378
8401
  let goa_icon;
8379
8402
 
@@ -8399,7 +8422,7 @@ function create_if_block_2$3(ctx) {
8399
8422
  };
8400
8423
  }
8401
8424
 
8402
- // (140:4) {#if trailingicon && handlesTrailingIconClick}
8425
+ // (149:4) {#if trailingicon && handlesTrailingIconClick}
8403
8426
  function create_if_block_1$3(ctx) {
8404
8427
  let goa_icon_button;
8405
8428
  let mounted;
@@ -8439,8 +8462,8 @@ function create_if_block_1$3(ctx) {
8439
8462
  };
8440
8463
  }
8441
8464
 
8442
- // (152:4) {#if suffix}
8443
- function create_if_block$5(ctx) {
8465
+ // (161:4) {#if suffix}
8466
+ function create_if_block$6(ctx) {
8444
8467
  let span;
8445
8468
  let t;
8446
8469
 
@@ -8463,7 +8486,7 @@ function create_if_block$5(ctx) {
8463
8486
  };
8464
8487
  }
8465
8488
 
8466
- function create_fragment$e(ctx) {
8489
+ function create_fragment$f(ctx) {
8467
8490
  let div3;
8468
8491
  let div2;
8469
8492
  let t0;
@@ -8487,7 +8510,7 @@ function create_fragment$e(ctx) {
8487
8510
  let if_block1 = /*leadingicon*/ ctx[5] && create_if_block_3$2(ctx);
8488
8511
  let if_block2 = /*trailingicon*/ ctx[6] && !/*handlesTrailingIconClick*/ ctx[24] && create_if_block_2$3(ctx);
8489
8512
  let if_block3 = /*trailingicon*/ ctx[6] && /*handlesTrailingIconClick*/ ctx[24] && create_if_block_1$3(ctx);
8490
- let if_block4 = /*suffix*/ ctx[15] && create_if_block$5(ctx);
8513
+ let if_block4 = /*suffix*/ ctx[15] && create_if_block$6(ctx);
8491
8514
 
8492
8515
  return {
8493
8516
  c() {
@@ -8554,7 +8577,7 @@ function create_fragment$e(ctx) {
8554
8577
  if (if_block1) if_block1.m(div2, null);
8555
8578
  append(div2, t2);
8556
8579
  append(div2, input);
8557
- /*input_binding*/ ctx[32](input);
8580
+ /*input_binding*/ ctx[33](input);
8558
8581
  append(div2, t3);
8559
8582
  if (if_block2) if_block2.m(div2, null);
8560
8583
  append(div2, t4);
@@ -8686,7 +8709,7 @@ function create_fragment$e(ctx) {
8686
8709
  if (if_block4) {
8687
8710
  if_block4.p(ctx, dirty);
8688
8711
  } else {
8689
- if_block4 = create_if_block$5(ctx);
8712
+ if_block4 = create_if_block$6(ctx);
8690
8713
  if_block4.c();
8691
8714
  if_block4.m(div2, t6);
8692
8715
  }
@@ -8721,7 +8744,7 @@ function create_fragment$e(ctx) {
8721
8744
  if (detaching) detach(div3);
8722
8745
  if (if_block0) if_block0.d();
8723
8746
  if (if_block1) if_block1.d();
8724
- /*input_binding*/ ctx[32](null);
8747
+ /*input_binding*/ ctx[33](null);
8725
8748
  if (if_block2) if_block2.d();
8726
8749
  if (if_block3) if_block3.d();
8727
8750
  if (if_block4) if_block4.d();
@@ -8735,7 +8758,7 @@ function doClick() {
8735
8758
  this.dispatchEvent(new CustomEvent("_trailingIconClick", { composed: true }));
8736
8759
  }
8737
8760
 
8738
- function instance$c($$self, $$props, $$invalidate) {
8761
+ function instance$d($$self, $$props, $$invalidate) {
8739
8762
  let handlesTrailingIconClick;
8740
8763
  let isFocused;
8741
8764
  let isReadonly;
@@ -8775,29 +8798,41 @@ function instance$c($$self, $$props, $$invalidate) {
8775
8798
  let { testid = "" } = $$props;
8776
8799
  let { width = "30ch" } = $$props;
8777
8800
  let { arialabel = null } = $$props;
8778
- let { min = null } = $$props;
8779
- let { max = null } = $$props;
8780
- let { step = null } = $$props;
8801
+ let { min = "" } = $$props;
8802
+ let { max = "" } = $$props;
8803
+ let { step = 1 } = $$props;
8781
8804
  let { prefix = "" } = $$props;
8782
8805
  let { suffix = "" } = $$props;
8806
+ let { debounce = 0 } = $$props;
8783
8807
  let { mt = null } = $$props;
8784
8808
  let { mr = null } = $$props;
8785
8809
  let { mb = null } = $$props;
8786
8810
  let { ml = null } = $$props;
8787
8811
  let inputEl;
8812
+ let _debounceId = null;
8788
8813
 
8789
8814
  function onKeyUp(e) {
8790
- const ee = e.target;
8815
+ const input = e.target;
8816
+ if (!input) return;
8791
8817
 
8792
- e.target.dispatchEvent(new CustomEvent("_change",
8793
- {
8794
- composed: true,
8795
- bubbles: false,
8796
- cancelable: true,
8797
- detail: { name, value: ee.value }
8798
- }));
8818
+ if (_debounceId != null) {
8819
+ clearTimeout(_debounceId);
8820
+ }
8799
8821
 
8800
- $$invalidate(0, value = ee.value);
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
+ );
8834
+
8835
+ $$invalidate(0, value = input.value);
8801
8836
  }
8802
8837
 
8803
8838
  onMount(() => {
@@ -8838,6 +8873,7 @@ function instance$c($$self, $$props, $$invalidate) {
8838
8873
  if ('step' in $$props) $$invalidate(13, step = $$props.step);
8839
8874
  if ('prefix' in $$props) $$invalidate(14, prefix = $$props.prefix);
8840
8875
  if ('suffix' in $$props) $$invalidate(15, suffix = $$props.suffix);
8876
+ if ('debounce' in $$props) $$invalidate(31, debounce = $$props.debounce);
8841
8877
  if ('mt' in $$props) $$invalidate(16, mt = $$props.mt);
8842
8878
  if ('mr' in $$props) $$invalidate(17, mr = $$props.mr);
8843
8879
  if ('mb' in $$props) $$invalidate(18, mb = $$props.mb);
@@ -8850,7 +8886,7 @@ function instance$c($$self, $$props, $$invalidate) {
8850
8886
  }
8851
8887
 
8852
8888
  if ($$self.$$.dirty[0] & /*focused*/ 268435456) {
8853
- $$invalidate(31, isFocused = toBoolean(focused));
8889
+ $$invalidate(32, isFocused = toBoolean(focused));
8854
8890
  }
8855
8891
 
8856
8892
  if ($$self.$$.dirty[0] & /*readonly*/ 536870912) {
@@ -8865,7 +8901,7 @@ function instance$c($$self, $$props, $$invalidate) {
8865
8901
  $$invalidate(21, isDisabled = toBoolean(disabled));
8866
8902
  }
8867
8903
 
8868
- if ($$self.$$.dirty[0] & /*inputEl*/ 1048576 | $$self.$$.dirty[1] & /*isFocused*/ 1) {
8904
+ if ($$self.$$.dirty[0] & /*inputEl*/ 1048576 | $$self.$$.dirty[1] & /*isFocused*/ 2) {
8869
8905
  if (isFocused && inputEl) {
8870
8906
  setTimeout(() => inputEl.focus(), 1);
8871
8907
  }
@@ -8912,6 +8948,7 @@ function instance$c($$self, $$props, $$invalidate) {
8912
8948
  focused,
8913
8949
  readonly,
8914
8950
  error,
8951
+ debounce,
8915
8952
  isFocused,
8916
8953
  input_binding
8917
8954
  ];
@@ -8921,7 +8958,7 @@ class Input extends SvelteElement {
8921
8958
  constructor(options) {
8922
8959
  super();
8923
8960
 
8924
- this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box}.container{position:relative;width:100%;display:inline-block}@media(min-width: 640px){.container{width:var(--width)}}.goa-input,.goa-input *{box-sizing:border-box}.goa-input{box-sizing:border-box;outline:none;transition:box-shadow 0.1s ease-in;border:1px solid var(--color-gray-600);border-radius:var(--input-border-radius);display:inline-flex;align-items:stretch;vertical-align:middle;min-width:100%}.goa-input:hover{border-color:var(--goa-color-interactive--hover)}.goa-input:active,.goa-input:focus,.goa-input:focus-within{box-shadow:0 0 0 3px var(--goa-color-interactive--focus)}.goa-input.type--range{border:none}.goa-input.type--range:active,.goa-input.type--range:focus,.goa-input.type--range:focus-within{box-shadow:none}.goa-input-leading-icon{margin-left:0.5rem}.goa-input-trailing-icon{margin-right:0.5rem}input{display:inline-block;color:var(--goa-color-text);font-size:var(--input-font-size);padding:var(--input-padding);line-height:calc(40px - calc(var(--input-padding) * 2));background-color:transparent;width:0;flex:1 1 auto;font-family:var(--font-family)}input[readonly]{cursor:pointer}.goa-input-leading-icon+input{padding-left:0.5rem}input,input:focus,input:hover,input:active{outline:none;border:none}.goa-input--disabled,.goa-input--disabled:hover,.goa-input--disabled:active,.goa-input--disabled:focus{background-color:var(--color-gray-100);border-color:var(--color-gray-200);cursor:default;box-shadow:none}.goa-input--disabled input,.goa-input--disabled input:hover,.goa-input--disabled input:active,.goa-input--disabled input:focus{color:var(--goa-color-text-secondary)}.goa-input--disabled input:hover{cursor:default !important}.prefix,.suffix,.leading-content ::slotted(div),.trailing-content ::slotted(div){background-color:var(--color-gray-100);padding:0 0.75rem;display:flex;align-items:center}.leading-content ::slotted(div),.trailing-content ::slotted(div){padding:0.5rem 0.75rem}.prefix,.leading-content ::slotted(div){border-top-left-radius:var(--input-border-radius);border-bottom-left-radius:var(--input-border-radius);border-right:1px solid var(--color-gray-600)}.suffix,.trailing-content ::slotted(div){border-top-right-radius:var(--input-border-radius);border-bottom-right-radius:var(--input-border-radius);border-left:1px solid var(--color-gray-600)}.goa-input--disabled .prefix,.goa-input--disabled .leading-content ::slotted(div){border-right:1px solid var(--color-gray-200)}.goa-input--disabled .suffix,.goa-input--disabled .trailing-content ::slotted(div){border-left:1px solid var(--color-gray-200)}input.input--goa{display:block;border:none;flex:1 1 auto}.variant--bare{border:none}.variant--bare:focus,.variant--bare:active,.variant--bare:focus-within{box-shadow:none}.error:hover,.error:focus,.error{border:2px solid var(--goa-color-interactive--error)}input[type="search" i]:enabled:read-write:-webkit-any(:focus, :hover)::-webkit-search-cancel-button{position:relative;right:var(--search-icon-offset);cursor:pointer;-webkit-appearance:none;height:1.2rem;width:1.2rem;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%23333" d="M405 136.798L375.202 107 256 226.202 136.798 107 107 136.798 226.202 256 107 375.202 136.798 405 256 285.798 375.202 405 405 375.202 285.798 256z"/></svg>')
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>')
8925
8962
  center center no-repeat}</style>`;
8926
8963
 
8927
8964
  init(
@@ -8931,8 +8968,8 @@ class Input extends SvelteElement {
8931
8968
  props: attribute_to_object(this.attributes),
8932
8969
  customElement: true
8933
8970
  },
8934
- instance$c,
8935
- create_fragment$e,
8971
+ instance$d,
8972
+ create_fragment$f,
8936
8973
  safe_not_equal,
8937
8974
  {
8938
8975
  type: 1,
@@ -8956,6 +8993,7 @@ class Input extends SvelteElement {
8956
8993
  step: 13,
8957
8994
  prefix: 14,
8958
8995
  suffix: 15,
8996
+ debounce: 31,
8959
8997
  mt: 16,
8960
8998
  mr: 17,
8961
8999
  mb: 18,
@@ -9000,6 +9038,7 @@ class Input extends SvelteElement {
9000
9038
  "step",
9001
9039
  "prefix",
9002
9040
  "suffix",
9041
+ "debounce",
9003
9042
  "mt",
9004
9043
  "mr",
9005
9044
  "mb",
@@ -9196,6 +9235,15 @@ class Input extends SvelteElement {
9196
9235
  flush();
9197
9236
  }
9198
9237
 
9238
+ get debounce() {
9239
+ return this.$$.ctx[31];
9240
+ }
9241
+
9242
+ set debounce(debounce) {
9243
+ this.$$set({ debounce });
9244
+ flush();
9245
+ }
9246
+
9199
9247
  get mt() {
9200
9248
  return this.$$.ctx[16];
9201
9249
  }
@@ -9369,7 +9417,7 @@ function create_if_block_2$2(ctx) {
9369
9417
  }
9370
9418
 
9371
9419
  // (56:2) {#if version}
9372
- function create_if_block$4(ctx) {
9420
+ function create_if_block$5(ctx) {
9373
9421
  let div;
9374
9422
  let t;
9375
9423
 
@@ -9393,7 +9441,7 @@ function create_if_block$4(ctx) {
9393
9441
  };
9394
9442
  }
9395
9443
 
9396
- function create_fragment$d(ctx) {
9444
+ function create_fragment$e(ctx) {
9397
9445
  let header;
9398
9446
  let t0;
9399
9447
  let show_if = ["alpha", "beta"].includes(/*type*/ ctx[0]);
@@ -9402,7 +9450,7 @@ function create_fragment$d(ctx) {
9402
9450
  let t2;
9403
9451
  let if_block0 = /*type*/ ctx[0] === "live" && create_if_block_3$1();
9404
9452
  let if_block1 = show_if && create_if_block_1$2(ctx);
9405
- let if_block2 = /*version*/ ctx[1] && create_if_block$4(ctx);
9453
+ let if_block2 = /*version*/ ctx[1] && create_if_block$5(ctx);
9406
9454
 
9407
9455
  return {
9408
9456
  c() {
@@ -9459,7 +9507,7 @@ function create_fragment$d(ctx) {
9459
9507
  if (if_block2) {
9460
9508
  if_block2.p(ctx, dirty);
9461
9509
  } else {
9462
- if_block2 = create_if_block$4(ctx);
9510
+ if_block2 = create_if_block$5(ctx);
9463
9511
  if_block2.c();
9464
9512
  if_block2.m(header, null);
9465
9513
  }
@@ -9484,7 +9532,7 @@ function capitalize(val) {
9484
9532
  return val[0].toUpperCase() + val.slice(1);
9485
9533
  }
9486
9534
 
9487
- function instance$b($$self, $$props, $$invalidate) {
9535
+ function instance$c($$self, $$props, $$invalidate) {
9488
9536
  const [Types, validateType] = typeValidator("Microsite header type", ["live", "alpha", "beta"], true);
9489
9537
  let { type } = $$props;
9490
9538
  let { version = "" } = $$props;
@@ -9506,7 +9554,7 @@ function instance$b($$self, $$props, $$invalidate) {
9506
9554
  class MicrositeHeader extends SvelteElement {
9507
9555
  constructor(options) {
9508
9556
  super();
9509
- 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>`;
9510
9558
 
9511
9559
  init(
9512
9560
  this,
@@ -9515,8 +9563,8 @@ class MicrositeHeader extends SvelteElement {
9515
9563
  props: attribute_to_object(this.attributes),
9516
9564
  customElement: true
9517
9565
  },
9518
- instance$b,
9519
- create_fragment$d,
9566
+ instance$c,
9567
+ create_fragment$e,
9520
9568
  safe_not_equal,
9521
9569
  { type: 0, version: 1, feedbackurl: 2 },
9522
9570
  null
@@ -9570,7 +9618,7 @@ customElements.define("goa-microsite-header", MicrositeHeader);
9570
9618
 
9571
9619
  /* libs/web-components/src/components/modal/Modal.svelte generated by Svelte v3.51.0 */
9572
9620
 
9573
- function create_if_block$3(ctx) {
9621
+ function create_if_block$4(ctx) {
9574
9622
  let goa_focus_trap;
9575
9623
  let div5;
9576
9624
  let div0;
@@ -9898,10 +9946,10 @@ function create_if_block_1$1(ctx) {
9898
9946
  };
9899
9947
  }
9900
9948
 
9901
- function create_fragment$c(ctx) {
9949
+ function create_fragment$d(ctx) {
9902
9950
  let if_block_anchor;
9903
9951
  let current;
9904
- let if_block = /*isOpen*/ ctx[7] && create_if_block$3(ctx);
9952
+ let if_block = /*isOpen*/ ctx[7] && create_if_block$4(ctx);
9905
9953
 
9906
9954
  return {
9907
9955
  c() {
@@ -9923,7 +9971,7 @@ function create_fragment$c(ctx) {
9923
9971
  transition_in(if_block, 1);
9924
9972
  }
9925
9973
  } else {
9926
- if_block = create_if_block$3(ctx);
9974
+ if_block = create_if_block$4(ctx);
9927
9975
  if_block.c();
9928
9976
  transition_in(if_block, 1);
9929
9977
  if_block.m(if_block_anchor.parentNode, if_block_anchor);
@@ -9954,7 +10002,7 @@ function create_fragment$c(ctx) {
9954
10002
  };
9955
10003
  }
9956
10004
 
9957
- function instance$a($$self, $$props, $$invalidate) {
10005
+ function instance$b($$self, $$props, $$invalidate) {
9958
10006
  let isClosable;
9959
10007
  let isOpen;
9960
10008
  let _transitionTime;
@@ -10037,7 +10085,7 @@ function instance$a($$self, $$props, $$invalidate) {
10037
10085
  class Modal extends SvelteElement {
10038
10086
  constructor(options) {
10039
10087
  super();
10040
- 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>`;
10041
10089
 
10042
10090
  init(
10043
10091
  this,
@@ -10046,8 +10094,8 @@ class Modal extends SvelteElement {
10046
10094
  props: attribute_to_object(this.attributes),
10047
10095
  customElement: true
10048
10096
  },
10049
- instance$a,
10050
- create_fragment$c,
10097
+ instance$b,
10098
+ create_fragment$d,
10051
10099
  safe_not_equal,
10052
10100
  {
10053
10101
  heading: 0,
@@ -10135,7 +10183,7 @@ customElements.define("goa-modal", Modal);
10135
10183
 
10136
10184
  /* libs/web-components/src/components/notification/Notification.svelte generated by Svelte v3.51.0 */
10137
10185
 
10138
- function create_if_block$2(ctx) {
10186
+ function create_if_block$3(ctx) {
10139
10187
  let div3;
10140
10188
  let div0;
10141
10189
  let goa_icon;
@@ -10230,10 +10278,10 @@ function create_if_block$2(ctx) {
10230
10278
  };
10231
10279
  }
10232
10280
 
10233
- function create_fragment$b(ctx) {
10281
+ function create_fragment$c(ctx) {
10234
10282
  let if_block_anchor;
10235
10283
  let current;
10236
- let if_block = /*show*/ ctx[1] && create_if_block$2(ctx);
10284
+ let if_block = /*show*/ ctx[1] && create_if_block$3(ctx);
10237
10285
 
10238
10286
  return {
10239
10287
  c() {
@@ -10255,7 +10303,7 @@ function create_fragment$b(ctx) {
10255
10303
  transition_in(if_block, 1);
10256
10304
  }
10257
10305
  } else {
10258
- if_block = create_if_block$2(ctx);
10306
+ if_block = create_if_block$3(ctx);
10259
10307
  if_block.c();
10260
10308
  transition_in(if_block, 1);
10261
10309
  if_block.m(if_block_anchor.parentNode, if_block_anchor);
@@ -10286,7 +10334,7 @@ function create_fragment$b(ctx) {
10286
10334
  };
10287
10335
  }
10288
10336
 
10289
- function instance$9($$self, $$props, $$invalidate) {
10337
+ function instance$a($$self, $$props, $$invalidate) {
10290
10338
  let iconType;
10291
10339
  const [Types, validateType] = typeValidator("Notification type", ["emergency", "important", "information", "event"], true);
10292
10340
  let { type = "" } = $$props;
@@ -10322,7 +10370,7 @@ function instance$9($$self, $$props, $$invalidate) {
10322
10370
  class Notification extends SvelteElement {
10323
10371
  constructor(options) {
10324
10372
  super();
10325
- 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>`;
10326
10374
 
10327
10375
  init(
10328
10376
  this,
@@ -10331,8 +10379,8 @@ class Notification extends SvelteElement {
10331
10379
  props: attribute_to_object(this.attributes),
10332
10380
  customElement: true
10333
10381
  },
10334
- instance$9,
10335
- create_fragment$b,
10382
+ instance$a,
10383
+ create_fragment$c,
10336
10384
  safe_not_equal,
10337
10385
  { type: 0 },
10338
10386
  null
@@ -10373,7 +10421,7 @@ function isValidDimension(value) {
10373
10421
 
10374
10422
  /* libs/web-components/src/components/page-block/PageBlock.svelte generated by Svelte v3.51.0 */
10375
10423
 
10376
- function create_fragment$a(ctx) {
10424
+ function create_fragment$b(ctx) {
10377
10425
  let div;
10378
10426
  let slot;
10379
10427
  let div_style_value;
@@ -10403,7 +10451,7 @@ function create_fragment$a(ctx) {
10403
10451
  };
10404
10452
  }
10405
10453
 
10406
- function instance$8($$self, $$props, $$invalidate) {
10454
+ function instance$9($$self, $$props, $$invalidate) {
10407
10455
  const Sizes = { "full": "100%" };
10408
10456
  let { width } = $$props;
10409
10457
  let { _width } = $$props;
@@ -10433,7 +10481,7 @@ function instance$8($$self, $$props, $$invalidate) {
10433
10481
  class PageBlock extends SvelteElement {
10434
10482
  constructor(options) {
10435
10483
  super();
10436
- 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>`;
10437
10485
 
10438
10486
  init(
10439
10487
  this,
@@ -10442,8 +10490,8 @@ class PageBlock extends SvelteElement {
10442
10490
  props: attribute_to_object(this.attributes),
10443
10491
  customElement: true
10444
10492
  },
10445
- instance$8,
10446
- create_fragment$a,
10493
+ instance$9,
10494
+ create_fragment$b,
10447
10495
  safe_not_equal,
10448
10496
  { width: 1, _width: 0 },
10449
10497
  null
@@ -10602,7 +10650,7 @@ function create_each_block$1(key_1, ctx) {
10602
10650
  };
10603
10651
  }
10604
10652
 
10605
- function create_fragment$9(ctx) {
10653
+ function create_fragment$a(ctx) {
10606
10654
  let div;
10607
10655
  let slot;
10608
10656
  let t;
@@ -10677,7 +10725,7 @@ function create_fragment$9(ctx) {
10677
10725
  };
10678
10726
  }
10679
10727
 
10680
- function instance$7($$self, $$props, $$invalidate) {
10728
+ function instance$8($$self, $$props, $$invalidate) {
10681
10729
  let isDisabled;
10682
10730
  let isError;
10683
10731
  const [Orientations, validateOrientation] = typeValidator("Radio group orientation", ["vertical", "horizontal"]);
@@ -10800,9 +10848,9 @@ class RadioGroup extends SvelteElement {
10800
10848
  constructor(options) {
10801
10849
  super();
10802
10850
 
10803
- 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
10804
- 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
10805
- 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>`;
10806
10854
 
10807
10855
  init(
10808
10856
  this,
@@ -10811,8 +10859,8 @@ class RadioGroup extends SvelteElement {
10811
10859
  props: attribute_to_object(this.attributes),
10812
10860
  customElement: true
10813
10861
  },
10814
- instance$7,
10815
- create_fragment$9,
10862
+ instance$8,
10863
+ create_fragment$a,
10816
10864
  safe_not_equal,
10817
10865
  {
10818
10866
  name: 1,
@@ -10962,7 +11010,7 @@ customElements.define("goa-radio-group", RadioGroup);
10962
11010
 
10963
11011
  /* libs/web-components/src/components/scrollable/Scrollable.svelte generated by Svelte v3.51.0 */
10964
11012
 
10965
- function create_fragment$8(ctx) {
11013
+ function create_fragment$9(ctx) {
10966
11014
  let div;
10967
11015
  let slot;
10968
11016
  let div_style_value;
@@ -11009,7 +11057,7 @@ function create_fragment$8(ctx) {
11009
11057
  };
11010
11058
  }
11011
11059
 
11012
- function instance$6($$self, $$props, $$invalidate) {
11060
+ function instance$7($$self, $$props, $$invalidate) {
11013
11061
  let { direction = "vertical" } = $$props;
11014
11062
  let { hpadding = 0 } = $$props;
11015
11063
  let { vpadding = 0 } = $$props;
@@ -11037,8 +11085,8 @@ class Scrollable extends SvelteElement {
11037
11085
  props: attribute_to_object(this.attributes),
11038
11086
  customElement: true
11039
11087
  },
11040
- instance$6,
11041
- create_fragment$8,
11088
+ instance$7,
11089
+ create_fragment$9,
11042
11090
  safe_not_equal,
11043
11091
  {
11044
11092
  direction: 0,
@@ -11142,7 +11190,7 @@ function create_else_block(ctx) {
11142
11190
  function create_if_block_2(ctx) {
11143
11191
  let each_1_anchor;
11144
11192
  let current;
11145
- let each_value = Array(/*linecount*/ ctx[2]);
11193
+ let each_value = Array(Number.parseInt(/*linecount*/ ctx[2] + ""));
11146
11194
  let each_blocks = [];
11147
11195
 
11148
11196
  for (let i = 0; i < each_value.length; i += 1) {
@@ -11171,7 +11219,7 @@ function create_if_block_2(ctx) {
11171
11219
  },
11172
11220
  p(ctx, dirty) {
11173
11221
  if (dirty & /*size, linecount*/ 6) {
11174
- each_value = Array(/*linecount*/ ctx[2]);
11222
+ each_value = Array(Number.parseInt(/*linecount*/ ctx[2] + ""));
11175
11223
  let i;
11176
11224
 
11177
11225
  for (i = 0; i < each_value.length; i += 1) {
@@ -11313,7 +11361,7 @@ function create_if_block_1(ctx) {
11313
11361
  }
11314
11362
 
11315
11363
  // (30:2) {#if type === "card"}
11316
- function create_if_block$1(ctx) {
11364
+ function create_if_block$2(ctx) {
11317
11365
  let div1;
11318
11366
  let skeleton0;
11319
11367
  let t0;
@@ -11336,7 +11384,7 @@ function create_if_block$1(ctx) {
11336
11384
  props: {
11337
11385
  type: "lines",
11338
11386
  size: /*size*/ ctx[1],
11339
- linecount: 3
11387
+ linecount: /*linecount*/ ctx[2]
11340
11388
  }
11341
11389
  });
11342
11390
 
@@ -11372,6 +11420,7 @@ function create_if_block$1(ctx) {
11372
11420
  skeleton1.$set(skeleton1_changes);
11373
11421
  const skeleton2_changes = {};
11374
11422
  if (dirty & /*size*/ 2) skeleton2_changes.size = /*size*/ ctx[1];
11423
+ if (dirty & /*linecount*/ 4) skeleton2_changes.linecount = /*linecount*/ ctx[2];
11375
11424
  skeleton2.$set(skeleton2_changes);
11376
11425
 
11377
11426
  if (!current || dirty & /*size*/ 2 && div1_class_value !== (div1_class_value = "card card-" + /*size*/ ctx[1])) {
@@ -11404,7 +11453,7 @@ function create_if_block$1(ctx) {
11404
11453
  };
11405
11454
  }
11406
11455
 
11407
- // (52:4) {#each Array(linecount) as _item}
11456
+ // (52:4) {#each Array(Number.parseInt(linecount+"")) as _item}
11408
11457
  function create_each_block(ctx) {
11409
11458
  let skeleton;
11410
11459
  let current;
@@ -11446,13 +11495,13 @@ function create_each_block(ctx) {
11446
11495
  };
11447
11496
  }
11448
11497
 
11449
- function create_fragment$7(ctx) {
11498
+ function create_fragment$8(ctx) {
11450
11499
  let div;
11451
11500
  let current_block_type_index;
11452
11501
  let if_block;
11453
11502
  let div_style_value;
11454
11503
  let current;
11455
- 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];
11456
11505
  const if_blocks = [];
11457
11506
 
11458
11507
  function select_block_type(ctx, dirty) {
@@ -11529,7 +11578,7 @@ function create_fragment$7(ctx) {
11529
11578
  };
11530
11579
  }
11531
11580
 
11532
- function instance$5($$self, $$props, $$invalidate) {
11581
+ function instance$6($$self, $$props, $$invalidate) {
11533
11582
  const [Types, validateType] = typeValidator(
11534
11583
  "Skeleton type",
11535
11584
  [
@@ -11582,7 +11631,7 @@ function instance$5($$self, $$props, $$invalidate) {
11582
11631
  class Skeleton extends SvelteElement {
11583
11632
  constructor(options) {
11584
11633
  super();
11585
- 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>`;
11586
11635
 
11587
11636
  init(
11588
11637
  this,
@@ -11591,8 +11640,8 @@ class Skeleton extends SvelteElement {
11591
11640
  props: attribute_to_object(this.attributes),
11592
11641
  customElement: true
11593
11642
  },
11594
- instance$5,
11595
- create_fragment$7,
11643
+ instance$6,
11644
+ create_fragment$8,
11596
11645
  safe_not_equal,
11597
11646
  {
11598
11647
  maxwidth: 0,
@@ -11710,7 +11759,7 @@ customElements.define("goa-skeleton", Skeleton);
11710
11759
 
11711
11760
  /* libs/web-components/src/components/spacer/Spacer.svelte generated by Svelte v3.51.0 */
11712
11761
 
11713
- function create_fragment$6(ctx) {
11762
+ function create_fragment$7(ctx) {
11714
11763
  let div;
11715
11764
 
11716
11765
  return {
@@ -11732,15 +11781,15 @@ function create_fragment$6(ctx) {
11732
11781
  };
11733
11782
  }
11734
11783
 
11735
- function instance$4($$self, $$props, $$invalidate) {
11784
+ function instance$5($$self, $$props, $$invalidate) {
11736
11785
  let { hspacing = "none" } = $$props;
11737
11786
  let { vspacing = "none" } = $$props;
11738
11787
  let rootEl;
11739
11788
 
11740
11789
  onMount(() => {
11741
11790
  injectCss(rootEl, ":host", {
11742
- width: `var(--goa-spacing-${hspacing})`,
11743
- height: `var(--goa-spacing-${vspacing})`
11791
+ width: `var(--goa-space-${hspacing})`,
11792
+ height: `var(--goa-space-${vspacing})`
11744
11793
  });
11745
11794
  });
11746
11795
 
@@ -11770,8 +11819,8 @@ class Spacer extends SvelteElement {
11770
11819
  props: attribute_to_object(this.attributes),
11771
11820
  customElement: true
11772
11821
  },
11773
- instance$4,
11774
- create_fragment$6,
11822
+ instance$5,
11823
+ create_fragment$7,
11775
11824
  safe_not_equal,
11776
11825
  { hspacing: 1, vspacing: 2 },
11777
11826
  null
@@ -11963,7 +12012,7 @@ function tweened(value, defaults = {}) {
11963
12012
 
11964
12013
  /* libs/web-components/src/components/spinner/Spinner.svelte generated by Svelte v3.51.0 */
11965
12014
 
11966
- function create_if_block(ctx) {
12015
+ function create_if_block$1(ctx) {
11967
12016
  let svg;
11968
12017
  let circle;
11969
12018
  let circle_stroke_value;
@@ -11983,7 +12032,7 @@ function create_if_block(ctx) {
11983
12032
  attr(circle, "cy", /*radius*/ ctx[3]);
11984
12033
 
11985
12034
  attr(circle, "stroke", circle_stroke_value = /*invert*/ ctx[0]
11986
- ? "var(--goa-color-primary-dark)"
12035
+ ? "var(--goa-color-info-hover)"
11987
12036
  : "var(--goa-color-brand-light)");
11988
12037
 
11989
12038
  attr(circle, "stroke-width", /*strokewidth*/ ctx[4]);
@@ -11993,7 +12042,7 @@ function create_if_block(ctx) {
11993
12042
 
11994
12043
  attr(path, "stroke", path_stroke_value = /*invert*/ ctx[0]
11995
12044
  ? "var(--goa-color-brand-light)"
11996
- : "var(--goa-color-primary)");
12045
+ : "var(--goa-color-info-default)");
11997
12046
 
11998
12047
  attr(path, "stroke-linecap", "round");
11999
12048
  attr(svg, "class", svg_class_value = `spinner-${/*type*/ ctx[2]}`);
@@ -12019,7 +12068,7 @@ function create_if_block(ctx) {
12019
12068
  }
12020
12069
 
12021
12070
  if (dirty & /*invert*/ 1 && circle_stroke_value !== (circle_stroke_value = /*invert*/ ctx[0]
12022
- ? "var(--goa-color-primary-dark)"
12071
+ ? "var(--goa-color-info-hover)"
12023
12072
  : "var(--goa-color-brand-light)")) {
12024
12073
  attr(circle, "stroke", circle_stroke_value);
12025
12074
  }
@@ -12042,7 +12091,7 @@ function create_if_block(ctx) {
12042
12091
 
12043
12092
  if (dirty & /*invert*/ 1 && path_stroke_value !== (path_stroke_value = /*invert*/ ctx[0]
12044
12093
  ? "var(--goa-color-brand-light)"
12045
- : "var(--goa-color-primary)")) {
12094
+ : "var(--goa-color-info-default)")) {
12046
12095
  attr(path, "stroke", path_stroke_value);
12047
12096
  }
12048
12097
 
@@ -12072,9 +12121,9 @@ function create_if_block(ctx) {
12072
12121
  };
12073
12122
  }
12074
12123
 
12075
- function create_fragment$5(ctx) {
12124
+ function create_fragment$6(ctx) {
12076
12125
  let if_block_anchor;
12077
- let if_block = /*ready*/ ctx[6] && create_if_block(ctx);
12126
+ let if_block = /*ready*/ ctx[6] && create_if_block$1(ctx);
12078
12127
 
12079
12128
  return {
12080
12129
  c() {
@@ -12091,7 +12140,7 @@ function create_fragment$5(ctx) {
12091
12140
  if (if_block) {
12092
12141
  if_block.p(ctx, dirty);
12093
12142
  } else {
12094
- if_block = create_if_block(ctx);
12143
+ if_block = create_if_block$1(ctx);
12095
12144
  if_block.c();
12096
12145
  if_block.m(if_block_anchor.parentNode, if_block_anchor);
12097
12146
  }
@@ -12109,7 +12158,7 @@ function create_fragment$5(ctx) {
12109
12158
  };
12110
12159
  }
12111
12160
 
12112
- function instance$3($$self, $$props, $$invalidate) {
12161
+ function instance$4($$self, $$props, $$invalidate) {
12113
12162
  let diameter;
12114
12163
  let strokewidth;
12115
12164
  let radius;
@@ -12219,7 +12268,7 @@ function instance$3($$self, $$props, $$invalidate) {
12219
12268
  class Spinner extends SvelteElement {
12220
12269
  constructor(options) {
12221
12270
  super();
12222
- 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>`;
12223
12272
 
12224
12273
  init(
12225
12274
  this,
@@ -12228,8 +12277,8 @@ class Spinner extends SvelteElement {
12228
12277
  props: attribute_to_object(this.attributes),
12229
12278
  customElement: true
12230
12279
  },
12231
- instance$3,
12232
- create_fragment$5,
12280
+ instance$4,
12281
+ create_fragment$6,
12233
12282
  safe_not_equal,
12234
12283
  {
12235
12284
  size: 10,
@@ -12297,7 +12346,7 @@ customElements.define("goa-spinner", Spinner);
12297
12346
 
12298
12347
  /* libs/web-components/src/components/table/Table.svelte generated by Svelte v3.51.0 */
12299
12348
 
12300
- function create_fragment$4(ctx) {
12349
+ function create_fragment$5(ctx) {
12301
12350
  let table;
12302
12351
  let slot;
12303
12352
  let t0;
@@ -12357,7 +12406,7 @@ function create_fragment$4(ctx) {
12357
12406
  };
12358
12407
  }
12359
12408
 
12360
- function instance$2($$self, $$props, $$invalidate) {
12409
+ function instance$3($$self, $$props, $$invalidate) {
12361
12410
  let _stickyHeader;
12362
12411
  const [Variants, validateVariant] = typeValidator("Table variant", ["normal", "relaxed"], true);
12363
12412
  let { width = "" } = $$props;
@@ -12425,7 +12474,7 @@ function instance$2($$self, $$props, $$invalidate) {
12425
12474
  class Table extends SvelteElement {
12426
12475
  constructor(options) {
12427
12476
  super();
12428
- this.shadowRoot.innerHTML = `<style>table{border-collapse:collapse}table.sticky{position:relative}table.sticky thead{position:sticky;top:0}td{padding:0.75rem 1rem 0.5rem;border-bottom:1px solid var(--color-gray-200);line-height:1rem}table.relaxed td{padding:1.25rem 1rem 1rem}th{background-color:var(--color-white);color:var(--goa-color-text-secondary);padding:1rem;vertical-align:middle;text-align:left;border-bottom:2px solid var(--color-gray-600)}tfoot td{background-color:var(--color-gray-100)}tfoot tr:first-child td{border-top:2px solid var(--color-gray-200)}tfoot tr:last-child td{border-bottom:none}</style>`;
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>`;
12429
12478
 
12430
12479
  init(
12431
12480
  this,
@@ -12434,8 +12483,8 @@ class Table extends SvelteElement {
12434
12483
  props: attribute_to_object(this.attributes),
12435
12484
  customElement: true
12436
12485
  },
12437
- instance$2,
12438
- create_fragment$4,
12486
+ instance$3,
12487
+ create_fragment$5,
12439
12488
  safe_not_equal,
12440
12489
  {
12441
12490
  width: 0,
@@ -12533,7 +12582,7 @@ customElements.define("goa-table", Table);
12533
12582
 
12534
12583
  /* libs/web-components/src/components/text-area/TextArea.svelte generated by Svelte v3.51.0 */
12535
12584
 
12536
- function create_fragment$3(ctx) {
12585
+ function create_fragment$4(ctx) {
12537
12586
  let div;
12538
12587
  let textarea;
12539
12588
  let textarea_aria_label_value;
@@ -12629,7 +12678,7 @@ function create_fragment$3(ctx) {
12629
12678
  };
12630
12679
  }
12631
12680
 
12632
- function instance$1($$self, $$props, $$invalidate) {
12681
+ function instance$2($$self, $$props, $$invalidate) {
12633
12682
  let isError;
12634
12683
  let isDisabled;
12635
12684
  let isReadonly;
@@ -12725,8 +12774,8 @@ class TextArea extends SvelteElement {
12725
12774
  constructor(options) {
12726
12775
  super();
12727
12776
 
12728
- 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)
12729
- }.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>`;
12730
12779
 
12731
12780
  init(
12732
12781
  this,
@@ -12735,8 +12784,8 @@ class TextArea extends SvelteElement {
12735
12784
  props: attribute_to_object(this.attributes),
12736
12785
  customElement: true
12737
12786
  },
12738
- instance$1,
12739
- create_fragment$3,
12787
+ instance$2,
12788
+ create_fragment$4,
12740
12789
  safe_not_equal,
12741
12790
  {
12742
12791
  name: 0,
@@ -12930,7 +12979,7 @@ customElements.define("goa-textarea", TextArea);
12930
12979
 
12931
12980
  /* libs/web-components/src/layouts/FullScreenNavbarLayout.svelte generated by Svelte v3.51.0 */
12932
12981
 
12933
- function create_fragment$2(ctx) {
12982
+ function create_fragment$3(ctx) {
12934
12983
  let div;
12935
12984
 
12936
12985
  return {
@@ -12964,12 +13013,12 @@ class FullScreenNavbarLayout extends SvelteElement {
12964
13013
  constructor(options) {
12965
13014
  super();
12966
13015
 
12967
- 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"
12968
13017
  "content"
12969
13018
  "nav"
12970
- "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"
12971
13020
  "nav content"
12972
- "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>`;
12973
13022
 
12974
13023
  init(
12975
13024
  this,
@@ -12979,7 +13028,7 @@ class FullScreenNavbarLayout extends SvelteElement {
12979
13028
  customElement: true
12980
13029
  },
12981
13030
  null,
12982
- create_fragment$2,
13031
+ create_fragment$3,
12983
13032
  safe_not_equal,
12984
13033
  {},
12985
13034
  null
@@ -12997,7 +13046,7 @@ customElements.define("goa-layout-full-nav", FullScreenNavbarLayout);
12997
13046
 
12998
13047
  /* libs/web-components/src/layouts/one-column-layout/OneColumnLayout.svelte generated by Svelte v3.51.0 */
12999
13048
 
13000
- function create_fragment$1(ctx) {
13049
+ function create_fragment$2(ctx) {
13001
13050
  let div;
13002
13051
 
13003
13052
  return {
@@ -13038,7 +13087,7 @@ class OneColumnLayout extends SvelteElement {
13038
13087
  customElement: true
13039
13088
  },
13040
13089
  null,
13041
- create_fragment$1,
13090
+ create_fragment$2,
13042
13091
  safe_not_equal,
13043
13092
  {},
13044
13093
  null
@@ -13056,7 +13105,7 @@ customElements.define("goa-one-column-layout", OneColumnLayout);
13056
13105
 
13057
13106
  /* libs/web-components/src/layouts/two-column-layout/TwoColumnLayout.svelte generated by Svelte v3.51.0 */
13058
13107
 
13059
- function create_fragment(ctx) {
13108
+ function create_fragment$1(ctx) {
13060
13109
  let div;
13061
13110
  let header;
13062
13111
  let t0;
@@ -13088,7 +13137,7 @@ function create_fragment(ctx) {
13088
13137
 
13089
13138
  attr(div, "style", div_style_value = `
13090
13139
  --max-content-width: ${/*maxcontentwidth*/ ctx[1] || "100%"};
13091
- --nav-column-width: ${/*navcolumnwidth*/ ctx[0] || "var(--layout-nav-column-width)"};
13140
+ --nav-column-width: ${/*navcolumnwidth*/ ctx[0] || "256px"};
13092
13141
  `);
13093
13142
  },
13094
13143
  m(target, anchor) {
@@ -13102,7 +13151,7 @@ function create_fragment(ctx) {
13102
13151
  p(ctx, [dirty]) {
13103
13152
  if (dirty & /*maxcontentwidth, navcolumnwidth*/ 3 && div_style_value !== (div_style_value = `
13104
13153
  --max-content-width: ${/*maxcontentwidth*/ ctx[1] || "100%"};
13105
- --nav-column-width: ${/*navcolumnwidth*/ ctx[0] || "var(--layout-nav-column-width)"};
13154
+ --nav-column-width: ${/*navcolumnwidth*/ ctx[0] || "256px"};
13106
13155
  `)) {
13107
13156
  attr(div, "style", div_style_value);
13108
13157
  }
@@ -13115,7 +13164,7 @@ function create_fragment(ctx) {
13115
13164
  };
13116
13165
  }
13117
13166
 
13118
- function instance($$self, $$props, $$invalidate) {
13167
+ function instance$1($$self, $$props, $$invalidate) {
13119
13168
  let { navcolumnwidth = "" } = $$props;
13120
13169
  let { maxcontentwidth = "" } = $$props;
13121
13170
 
@@ -13130,7 +13179,7 @@ function instance($$self, $$props, $$invalidate) {
13130
13179
  class TwoColumnLayout extends SvelteElement {
13131
13180
  constructor(options) {
13132
13181
  super();
13133
- 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>`;
13134
13183
 
13135
13184
  init(
13136
13185
  this,
@@ -13139,8 +13188,8 @@ class TwoColumnLayout extends SvelteElement {
13139
13188
  props: attribute_to_object(this.attributes),
13140
13189
  customElement: true
13141
13190
  },
13142
- instance,
13143
- create_fragment,
13191
+ instance$1,
13192
+ create_fragment$1,
13144
13193
  safe_not_equal,
13145
13194
  { navcolumnwidth: 0, maxcontentwidth: 1 },
13146
13195
  null
@@ -13182,3 +13231,429 @@ class TwoColumnLayout extends SvelteElement {
13182
13231
  }
13183
13232
 
13184
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 };