@abgov/web-components 1.0.0-alpha.143 → 1.0.0-alpha.144

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -875,6 +875,14 @@ if (typeof HTMLElement === 'function') {
875
875
  };
876
876
  }
877
877
 
878
+ var reset = '';
879
+
880
+ var fonts = '';
881
+
882
+ var variables = '';
883
+
884
+ var tokens = '';
885
+
878
886
  /* libs/web-components/src/components/app-header/AppHeader.svelte generated by Svelte v3.51.0 */
879
887
 
880
888
  function create_else_block$4(ctx) {
@@ -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,
@@ -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) {
@@ -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,
@@ -1534,7 +1539,7 @@ function create_fragment$D(ctx) {
1534
1539
 
1535
1540
  attr(div, "style", div_style_value = `
1536
1541
  ${calculateMargin(/*mt*/ ctx[3], /*mr*/ ctx[4], /*mb*/ ctx[5], /*ml*/ ctx[6])}
1537
- --gap: var(--goa-spacing-${/*gap*/ ctx[0]});
1542
+ --gap: var(--goa-space-${/*gap*/ ctx[0]});
1538
1543
  --alignment: ${/*alignment*/ ctx[2]};
1539
1544
  --direction: ${/*direction*/ ctx[1]};
1540
1545
  `);
@@ -1546,7 +1551,7 @@ function create_fragment$D(ctx) {
1546
1551
  p(ctx, [dirty]) {
1547
1552
  if (dirty & /*mt, mr, mb, ml, gap, alignment, direction*/ 127 && div_style_value !== (div_style_value = `
1548
1553
  ${calculateMargin(/*mt*/ ctx[3], /*mr*/ ctx[4], /*mb*/ ctx[5], /*ml*/ ctx[6])}
1549
- --gap: var(--goa-spacing-${/*gap*/ ctx[0]});
1554
+ --gap: var(--goa-space-${/*gap*/ ctx[0]});
1550
1555
  --alignment: ${/*alignment*/ ctx[2]};
1551
1556
  --direction: ${/*direction*/ ctx[1]};
1552
1557
  `)) {
@@ -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);
@@ -1760,35 +1766,36 @@ function create_else_block$2(ctx) {
1760
1766
 
1761
1767
  // (45:2) {#if type === "start"}
1762
1768
  function create_if_block$f(ctx) {
1763
- let slot;
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
+ // (51:4) {#if leadingicon}
1792
1799
  function create_if_block_2$6(ctx) {
1793
1800
  let goa_icon;
1794
1801
 
@@ -1817,7 +1824,7 @@ function create_if_block_2$6(ctx) {
1817
1824
  };
1818
1825
  }
1819
1826
 
1820
- // (53:4) {#if trailingicon}
1827
+ // (57:4) {#if trailingicon}
1821
1828
  function create_if_block_1$9(ctx) {
1822
1829
  let goa_icon;
1823
1830
 
@@ -2008,10 +2015,8 @@ class Button extends SvelteElement {
2008
2015
  constructor(options) {
2009
2016
  super();
2010
2017
 
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>`;
2018
+ 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,
2019
+ 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
2020
 
2016
2021
  init(
2017
2022
  this,
@@ -2248,7 +2253,7 @@ function instance$v($$self, $$props, $$invalidate) {
2248
2253
  class ButtonGroup extends SvelteElement {
2249
2254
  constructor(options) {
2250
2255
  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>`;
2256
+ 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
2257
 
2253
2258
  init(
2254
2259
  this,
@@ -2508,7 +2513,7 @@ function instance$u($$self, $$props, $$invalidate) {
2508
2513
  class Callout extends SvelteElement {
2509
2514
  constructor(options) {
2510
2515
  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>`;
2516
+ 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
2517
 
2513
2518
  init(
2514
2519
  this,
@@ -2681,7 +2686,7 @@ function create_fragment$y(ctx) {
2681
2686
  attr(div, "class", "card");
2682
2687
 
2683
2688
  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);`
2689
+ ? `border: 1px solid var(--goa-color-greyscale-200);`
2685
2690
  : `box-shadow: var(--shadow-${/*elevation*/ ctx[0]});`) + "");
2686
2691
  },
2687
2692
  m(target, anchor) {
@@ -2694,7 +2699,7 @@ function create_fragment$y(ctx) {
2694
2699
  }
2695
2700
 
2696
2701
  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);`
2702
+ ? `border: 1px solid var(--goa-color-greyscale-200);`
2698
2703
  : `box-shadow: var(--shadow-${/*elevation*/ ctx[0]});`) + "")) {
2699
2704
  attr(div, "style", div_style_value);
2700
2705
  }
@@ -2734,7 +2739,7 @@ function instance$t($$self, $$props, $$invalidate) {
2734
2739
  class Card extends SvelteElement {
2735
2740
  constructor(options) {
2736
2741
  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>`;
2742
+ 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
2743
 
2739
2744
  init(
2740
2745
  this,
@@ -2877,7 +2882,7 @@ function create_fragment$x(ctx) {
2877
2882
  class CardContent extends SvelteElement {
2878
2883
  constructor(options) {
2879
2884
  super();
2880
- this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.card-content{padding:1rem}</style>`;
2885
+ this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.card-content{padding:1rem}</style>`;
2881
2886
 
2882
2887
  init(
2883
2888
  this,
@@ -2930,7 +2935,7 @@ function create_fragment$w(ctx) {
2930
2935
  class CardGroup extends SvelteElement {
2931
2936
  constructor(options) {
2932
2937
  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>`;
2938
+ 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
2939
 
2935
2940
  init(
2936
2941
  this,
@@ -3005,7 +3010,7 @@ function instance$s($$self, $$props, $$invalidate) {
3005
3010
  class CardImage extends SvelteElement {
3006
3011
  constructor(options) {
3007
3012
  super();
3008
- this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}</style>`;
3013
+ this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}</style>`;
3009
3014
 
3010
3015
  init(
3011
3016
  this,
@@ -3358,7 +3363,7 @@ function instance$r($$self, $$props, $$invalidate) {
3358
3363
  class Checkbox extends SvelteElement {
3359
3364
  constructor(options) {
3360
3365
  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>`;
3366
+ 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
3367
 
3363
3368
  init(
3364
3369
  this,
@@ -3568,10 +3573,10 @@ function create_if_block$c(ctx) {
3568
3573
  set_custom_element_data(goa_icon, "type", "close-circle");
3569
3574
 
3570
3575
  set_custom_element_data(goa_icon, "fillcolor", goa_icon_fillcolor_value = /*_error*/ ctx[10]
3571
- ? "var(--goa-color-status-emergency)"
3576
+ ? "var(--goa-color-emergency-default)"
3572
3577
  : /*_hovering*/ ctx[9]
3573
- ? "var(--goa-color-interactive--hover)"
3574
- : "var(--color-gray-600)");
3578
+ ? "var(--goa-color-interactive-hover)"
3579
+ : "var(--goa-color-greyscale-700)");
3575
3580
 
3576
3581
  set_custom_element_data(goa_icon, "opacity", goa_icon_opacity_value = /*_error*/ ctx[10] ? /*_hovering*/ ctx[9] ? 1 : 0.5 : 1);
3577
3582
  },
@@ -3580,10 +3585,10 @@ function create_if_block$c(ctx) {
3580
3585
  },
3581
3586
  p(ctx, dirty) {
3582
3587
  if (dirty & /*_error, _hovering*/ 1536 && goa_icon_fillcolor_value !== (goa_icon_fillcolor_value = /*_error*/ ctx[10]
3583
- ? "var(--goa-color-status-emergency)"
3588
+ ? "var(--goa-color-emergency-default)"
3584
3589
  : /*_hovering*/ ctx[9]
3585
- ? "var(--goa-color-interactive--hover)"
3586
- : "var(--color-gray-600)")) {
3590
+ ? "var(--goa-color-interactive-hover)"
3591
+ : "var(--goa-color-greyscale-700)")) {
3587
3592
  set_custom_element_data(goa_icon, "fillcolor", goa_icon_fillcolor_value);
3588
3593
  }
3589
3594
 
@@ -3800,7 +3805,7 @@ function instance$q($$self, $$props, $$invalidate) {
3800
3805
  class Chip extends SvelteElement {
3801
3806
  constructor(options) {
3802
3807
  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>`;
3808
+ 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
3809
 
3805
3810
  init(
3806
3811
  this,
@@ -4425,7 +4430,7 @@ function instance$p($$self, $$props, $$invalidate) {
4425
4430
  class CircularProgress extends SvelteElement {
4426
4431
  constructor(options) {
4427
4432
  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>`;
4433
+ 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
4434
 
4430
4435
  init(
4431
4436
  this,
@@ -4627,7 +4632,7 @@ function instance$o($$self, $$props, $$invalidate) {
4627
4632
  class Container extends SvelteElement {
4628
4633
  constructor(options) {
4629
4634
  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>`;
4635
+ 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
4636
 
4632
4637
  init(
4633
4638
  this,
@@ -4797,7 +4802,7 @@ function instance$n($$self, $$props, $$invalidate) {
4797
4802
  class Divider extends SvelteElement {
4798
4803
  constructor(options) {
4799
4804
  super();
4800
- this.shadowRoot.innerHTML = `<style>hr{padding:0;margin:0;height:1px;background-color:var(--color-gray-200);border:none}</style>`;
4805
+ this.shadowRoot.innerHTML = `<style>hr{padding:0;margin:0;height:1px;background-color:var(--goa-color-greyscale-200);border:none}</style>`;
4801
4806
 
4802
4807
  init(
4803
4808
  this,
@@ -4881,25 +4886,25 @@ customElements.define("goa-divider", Divider);
4881
4886
 
4882
4887
  function get_each_context_1(ctx, list, i) {
4883
4888
  const child_ctx = ctx.slice();
4884
- child_ctx[48] = list[i];
4885
- child_ctx[52] = i;
4889
+ child_ctx[49] = list[i];
4890
+ child_ctx[53] = i;
4886
4891
  return child_ctx;
4887
4892
  }
4888
4893
 
4889
4894
  function get_each_context$4(ctx, list, i) {
4890
4895
  const child_ctx = ctx.slice();
4891
- child_ctx[48] = list[i];
4896
+ child_ctx[49] = list[i];
4892
4897
  return child_ctx;
4893
4898
  }
4894
4899
 
4895
- // (244:2) {:else}
4900
+ // (256:2) {:else}
4896
4901
  function create_else_block$1(ctx) {
4897
4902
  let t0;
4898
- let slot;
4899
- let t1;
4900
4903
  let goa_input;
4901
- let goa_input_aria_label_value;
4904
+ let goa_input_arialabel_value;
4902
4905
  let goa_input_data_testid_value;
4906
+ let t1;
4907
+ let slot;
4903
4908
  let t2;
4904
4909
  let ul;
4905
4910
  let each_blocks = [];
@@ -4909,7 +4914,7 @@ function create_else_block$1(ctx) {
4909
4914
  let dispose;
4910
4915
  let if_block = /*_isMenuVisible*/ ctx[15] && create_if_block_1$5(ctx);
4911
4916
  let each_value_1 = /*_options*/ ctx[13];
4912
- const get_key = ctx => /*index*/ ctx[52];
4917
+ const get_key = ctx => /*index*/ ctx[53];
4913
4918
 
4914
4919
  for (let i = 0; i < each_value_1.length; i += 1) {
4915
4920
  let child_ctx = get_each_context_1(ctx, each_value_1, i);
@@ -4921,9 +4926,9 @@ function create_else_block$1(ctx) {
4921
4926
  c() {
4922
4927
  if (if_block) if_block.c();
4923
4928
  t0 = space();
4924
- slot = element("slot");
4925
- t1 = space();
4926
4929
  goa_input = element("goa-input");
4930
+ t1 = space();
4931
+ slot = element("slot");
4927
4932
  t2 = space();
4928
4933
  ul = element("ul");
4929
4934
 
@@ -4937,7 +4942,7 @@ function create_else_block$1(ctx) {
4937
4942
  set_custom_element_data(goa_input, "placeholder", /*placeholder*/ ctx[4]);
4938
4943
  set_custom_element_data(goa_input, "aria-controls", "menu");
4939
4944
  set_custom_element_data(goa_input, "aria-expanded", /*_isMenuVisible*/ ctx[15]);
4940
- set_custom_element_data(goa_input, "aria-label", goa_input_aria_label_value = /*arialabel*/ ctx[1] || /*name*/ ctx[0]);
4945
+ set_custom_element_data(goa_input, "arialabel", goa_input_arialabel_value = /*arialabel*/ ctx[1] || /*name*/ ctx[0]);
4941
4946
  set_custom_element_data(goa_input, "data-testid", goa_input_data_testid_value = `${/*name*/ ctx[0]}-dropdown-input`);
4942
4947
  set_custom_element_data(goa_input, "readonly", "");
4943
4948
  set_custom_element_data(goa_input, "role", "combobox");
@@ -4945,6 +4950,7 @@ function create_else_block$1(ctx) {
4945
4950
  set_custom_element_data(goa_input, "type", "text");
4946
4951
  set_custom_element_data(goa_input, "value", /*_selectedLabel*/ ctx[14]);
4947
4952
  set_custom_element_data(goa_input, "width", "100%");
4953
+ set_custom_element_data(goa_input, "name", /*name*/ ctx[0]);
4948
4954
  attr(ul, "id", "menu");
4949
4955
  attr(ul, "role", "listbox");
4950
4956
  attr(ul, "aria-activedescendant", /*_selectedLabel*/ ctx[14]);
@@ -4957,9 +4963,9 @@ function create_else_block$1(ctx) {
4957
4963
  m(target, anchor) {
4958
4964
  if (if_block) if_block.m(target, anchor);
4959
4965
  insert(target, t0, anchor);
4960
- insert(target, slot, anchor);
4961
- insert(target, t1, anchor);
4962
4966
  insert(target, goa_input, anchor);
4967
+ insert(target, t1, anchor);
4968
+ insert(target, slot, anchor);
4963
4969
  insert(target, t2, anchor);
4964
4970
  insert(target, ul, anchor);
4965
4971
 
@@ -5008,8 +5014,8 @@ function create_else_block$1(ctx) {
5008
5014
  set_custom_element_data(goa_input, "aria-expanded", /*_isMenuVisible*/ ctx[15]);
5009
5015
  }
5010
5016
 
5011
- if (dirty[0] & /*arialabel, name*/ 3 && goa_input_aria_label_value !== (goa_input_aria_label_value = /*arialabel*/ ctx[1] || /*name*/ ctx[0])) {
5012
- set_custom_element_data(goa_input, "aria-label", goa_input_aria_label_value);
5017
+ if (dirty[0] & /*arialabel, name*/ 3 && goa_input_arialabel_value !== (goa_input_arialabel_value = /*arialabel*/ ctx[1] || /*name*/ ctx[0])) {
5018
+ set_custom_element_data(goa_input, "arialabel", goa_input_arialabel_value);
5013
5019
  }
5014
5020
 
5015
5021
  if (dirty[0] & /*name*/ 1 && goa_input_data_testid_value !== (goa_input_data_testid_value = `${/*name*/ ctx[0]}-dropdown-input`)) {
@@ -5020,6 +5026,10 @@ function create_else_block$1(ctx) {
5020
5026
  set_custom_element_data(goa_input, "value", /*_selectedLabel*/ ctx[14]);
5021
5027
  }
5022
5028
 
5029
+ if (dirty[0] & /*name*/ 1) {
5030
+ set_custom_element_data(goa_input, "name", /*name*/ ctx[0]);
5031
+ }
5032
+
5023
5033
  if (dirty[0] & /*_options, _values, _highlightedIndex, onSelect*/ 67186688) {
5024
5034
  each_value_1 = /*_options*/ ctx[13];
5025
5035
  each_blocks = update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value_1, each_1_lookup, ul, destroy_block, create_each_block_1, null, get_each_context_1);
@@ -5040,9 +5050,9 @@ function create_else_block$1(ctx) {
5040
5050
  d(detaching) {
5041
5051
  if (if_block) if_block.d(detaching);
5042
5052
  if (detaching) detach(t0);
5043
- if (detaching) detach(slot);
5044
- if (detaching) detach(t1);
5045
5053
  if (detaching) detach(goa_input);
5054
+ if (detaching) detach(t1);
5055
+ if (detaching) detach(slot);
5046
5056
  if (detaching) detach(t2);
5047
5057
  if (detaching) detach(ul);
5048
5058
 
@@ -5057,7 +5067,7 @@ function create_else_block$1(ctx) {
5057
5067
  };
5058
5068
  }
5059
5069
 
5060
- // (225:2) {#if _native}
5070
+ // (237:2) {#if _native}
5061
5071
  function create_if_block$a(ctx) {
5062
5072
  let select;
5063
5073
  let slot;
@@ -5145,7 +5155,7 @@ function create_if_block$a(ctx) {
5145
5155
  };
5146
5156
  }
5147
5157
 
5148
- // (245:4) {#if _isMenuVisible}
5158
+ // (257:4) {#if _isMenuVisible}
5149
5159
  function create_if_block_1$5(ctx) {
5150
5160
  let div;
5151
5161
  let div_data_testid_value;
@@ -5179,10 +5189,10 @@ function create_if_block_1$5(ctx) {
5179
5189
  };
5180
5190
  }
5181
5191
 
5182
- // (287:6) {#each _options as option, index (index)}
5192
+ // (300:6) {#each _options as option, index (index)}
5183
5193
  function create_each_block_1(key_1, ctx) {
5184
5194
  let li;
5185
- let t0_value = (/*option*/ ctx[48].label || /*option*/ ctx[48].value) + "";
5195
+ let t0_value = (/*option*/ ctx[49].label || /*option*/ ctx[49].value) + "";
5186
5196
  let t0;
5187
5197
  let t1;
5188
5198
  let li_id_value;
@@ -5196,7 +5206,7 @@ function create_each_block_1(key_1, ctx) {
5196
5206
  let dispose;
5197
5207
 
5198
5208
  function click_handler() {
5199
- return /*click_handler*/ ctx[32](/*option*/ ctx[48]);
5209
+ return /*click_handler*/ ctx[32](/*option*/ ctx[49]);
5200
5210
  }
5201
5211
 
5202
5212
  return {
@@ -5206,22 +5216,22 @@ function create_each_block_1(key_1, ctx) {
5206
5216
  li = element("li");
5207
5217
  t0 = text(t0_value);
5208
5218
  t1 = space();
5209
- attr(li, "id", li_id_value = /*option*/ ctx[48].label);
5219
+ attr(li, "id", li_id_value = /*option*/ ctx[49].label);
5210
5220
  attr(li, "role", "option");
5211
- attr(li, "aria-label", li_aria_label_value = /*option*/ ctx[48].label || /*option*/ ctx[48].value);
5221
+ attr(li, "aria-label", li_aria_label_value = /*option*/ ctx[49].label || /*option*/ ctx[49].value);
5212
5222
 
5213
- attr(li, "aria-selected", li_aria_selected_value = /*_values*/ ctx[12].includes(/*option*/ ctx[48].value)
5223
+ attr(li, "aria-selected", li_aria_selected_value = /*_values*/ ctx[12].includes(/*option*/ ctx[49].value)
5214
5224
  ? "true"
5215
5225
  : "false");
5216
5226
 
5217
5227
  attr(li, "class", "dropdown-item");
5218
- attr(li, "data-testid", li_data_testid_value = `dropdown-item-${/*option*/ ctx[48].value}`);
5219
- attr(li, "data-index", li_data_index_value = /*index*/ ctx[52]);
5220
- attr(li, "data-value", li_data_value_value = /*option*/ ctx[48].value);
5228
+ attr(li, "data-testid", li_data_testid_value = `dropdown-item-${/*option*/ ctx[49].value}`);
5229
+ attr(li, "data-index", li_data_index_value = /*index*/ ctx[53]);
5230
+ attr(li, "data-value", li_data_value_value = /*option*/ ctx[49].value);
5221
5231
  attr(li, "style", li_style_value = `display: ${"block"}`);
5222
5232
  toggle_class(li, "dropdown-item--disabled", false);
5223
- toggle_class(li, "dropdown-item--tabbed", /*index*/ ctx[52] === /*_highlightedIndex*/ ctx[16]);
5224
- toggle_class(li, "dropdown-item--selected", /*_values*/ ctx[12].includes(/*option*/ ctx[48].value));
5233
+ toggle_class(li, "dropdown-item--tabbed", /*index*/ ctx[53] === /*_highlightedIndex*/ ctx[16]);
5234
+ toggle_class(li, "dropdown-item--selected", /*_values*/ ctx[12].includes(/*option*/ ctx[49].value));
5225
5235
  this.first = li;
5226
5236
  },
5227
5237
  m(target, anchor) {
@@ -5236,40 +5246,40 @@ function create_each_block_1(key_1, ctx) {
5236
5246
  },
5237
5247
  p(new_ctx, dirty) {
5238
5248
  ctx = new_ctx;
5239
- if (dirty[0] & /*_options*/ 8192 && t0_value !== (t0_value = (/*option*/ ctx[48].label || /*option*/ ctx[48].value) + "")) set_data(t0, t0_value);
5249
+ if (dirty[0] & /*_options*/ 8192 && t0_value !== (t0_value = (/*option*/ ctx[49].label || /*option*/ ctx[49].value) + "")) set_data(t0, t0_value);
5240
5250
 
5241
- if (dirty[0] & /*_options*/ 8192 && li_id_value !== (li_id_value = /*option*/ ctx[48].label)) {
5251
+ if (dirty[0] & /*_options*/ 8192 && li_id_value !== (li_id_value = /*option*/ ctx[49].label)) {
5242
5252
  attr(li, "id", li_id_value);
5243
5253
  }
5244
5254
 
5245
- if (dirty[0] & /*_options*/ 8192 && li_aria_label_value !== (li_aria_label_value = /*option*/ ctx[48].label || /*option*/ ctx[48].value)) {
5255
+ if (dirty[0] & /*_options*/ 8192 && li_aria_label_value !== (li_aria_label_value = /*option*/ ctx[49].label || /*option*/ ctx[49].value)) {
5246
5256
  attr(li, "aria-label", li_aria_label_value);
5247
5257
  }
5248
5258
 
5249
- if (dirty[0] & /*_values, _options*/ 12288 && li_aria_selected_value !== (li_aria_selected_value = /*_values*/ ctx[12].includes(/*option*/ ctx[48].value)
5259
+ if (dirty[0] & /*_values, _options*/ 12288 && li_aria_selected_value !== (li_aria_selected_value = /*_values*/ ctx[12].includes(/*option*/ ctx[49].value)
5250
5260
  ? "true"
5251
5261
  : "false")) {
5252
5262
  attr(li, "aria-selected", li_aria_selected_value);
5253
5263
  }
5254
5264
 
5255
- if (dirty[0] & /*_options*/ 8192 && li_data_testid_value !== (li_data_testid_value = `dropdown-item-${/*option*/ ctx[48].value}`)) {
5265
+ if (dirty[0] & /*_options*/ 8192 && li_data_testid_value !== (li_data_testid_value = `dropdown-item-${/*option*/ ctx[49].value}`)) {
5256
5266
  attr(li, "data-testid", li_data_testid_value);
5257
5267
  }
5258
5268
 
5259
- if (dirty[0] & /*_options*/ 8192 && li_data_index_value !== (li_data_index_value = /*index*/ ctx[52])) {
5269
+ if (dirty[0] & /*_options*/ 8192 && li_data_index_value !== (li_data_index_value = /*index*/ ctx[53])) {
5260
5270
  attr(li, "data-index", li_data_index_value);
5261
5271
  }
5262
5272
 
5263
- if (dirty[0] & /*_options*/ 8192 && li_data_value_value !== (li_data_value_value = /*option*/ ctx[48].value)) {
5273
+ if (dirty[0] & /*_options*/ 8192 && li_data_value_value !== (li_data_value_value = /*option*/ ctx[49].value)) {
5264
5274
  attr(li, "data-value", li_data_value_value);
5265
5275
  }
5266
5276
 
5267
5277
  if (dirty[0] & /*_options, _highlightedIndex*/ 73728) {
5268
- toggle_class(li, "dropdown-item--tabbed", /*index*/ ctx[52] === /*_highlightedIndex*/ ctx[16]);
5278
+ toggle_class(li, "dropdown-item--tabbed", /*index*/ ctx[53] === /*_highlightedIndex*/ ctx[16]);
5269
5279
  }
5270
5280
 
5271
5281
  if (dirty[0] & /*_values, _options*/ 12288) {
5272
- toggle_class(li, "dropdown-item--selected", /*_values*/ ctx[12].includes(/*option*/ ctx[48].value));
5282
+ toggle_class(li, "dropdown-item--selected", /*_values*/ ctx[12].includes(/*option*/ ctx[49].value));
5273
5283
  }
5274
5284
  },
5275
5285
  d(detaching) {
@@ -5280,10 +5290,10 @@ function create_each_block_1(key_1, ctx) {
5280
5290
  };
5281
5291
  }
5282
5292
 
5283
- // (234:6) {#each _options as option}
5293
+ // (246:6) {#each _options as option}
5284
5294
  function create_each_block$4(ctx) {
5285
5295
  let option;
5286
- let t0_value = /*option*/ ctx[48].label + "";
5296
+ let t0_value = /*option*/ ctx[49].label + "";
5287
5297
  let t0;
5288
5298
  let t1;
5289
5299
  let option_selected_value;
@@ -5295,10 +5305,10 @@ function create_each_block$4(ctx) {
5295
5305
  option = element("option");
5296
5306
  t0 = text(t0_value);
5297
5307
  t1 = space();
5298
- option.selected = option_selected_value = /*option*/ ctx[48].selected;
5299
- option.__value = option_value_value = /*option*/ ctx[48].value;
5308
+ option.selected = option_selected_value = /*option*/ ctx[49].selected;
5309
+ option.__value = option_value_value = /*option*/ ctx[49].value;
5300
5310
  option.value = option.__value;
5301
- attr(option, "aria-label", option_aria_label_value = /*option*/ ctx[48].label);
5311
+ attr(option, "aria-label", option_aria_label_value = /*option*/ ctx[49].label);
5302
5312
  },
5303
5313
  m(target, anchor) {
5304
5314
  insert(target, option, anchor);
@@ -5306,18 +5316,18 @@ function create_each_block$4(ctx) {
5306
5316
  append(option, t1);
5307
5317
  },
5308
5318
  p(ctx, dirty) {
5309
- if (dirty[0] & /*_options*/ 8192 && t0_value !== (t0_value = /*option*/ ctx[48].label + "")) set_data(t0, t0_value);
5319
+ if (dirty[0] & /*_options*/ 8192 && t0_value !== (t0_value = /*option*/ ctx[49].label + "")) set_data(t0, t0_value);
5310
5320
 
5311
- if (dirty[0] & /*_options*/ 8192 && option_selected_value !== (option_selected_value = /*option*/ ctx[48].selected)) {
5321
+ if (dirty[0] & /*_options*/ 8192 && option_selected_value !== (option_selected_value = /*option*/ ctx[49].selected)) {
5312
5322
  option.selected = option_selected_value;
5313
5323
  }
5314
5324
 
5315
- if (dirty[0] & /*_options*/ 8192 && option_value_value !== (option_value_value = /*option*/ ctx[48].value)) {
5325
+ if (dirty[0] & /*_options*/ 8192 && option_value_value !== (option_value_value = /*option*/ ctx[49].value)) {
5316
5326
  option.__value = option_value_value;
5317
5327
  option.value = option.__value;
5318
5328
  }
5319
5329
 
5320
- if (dirty[0] & /*_options*/ 8192 && option_aria_label_value !== (option_aria_label_value = /*option*/ ctx[48].label)) {
5330
+ if (dirty[0] & /*_options*/ 8192 && option_aria_label_value !== (option_aria_label_value = /*option*/ ctx[49].label)) {
5321
5331
  attr(option, "aria-label", option_aria_label_value);
5322
5332
  }
5323
5333
  },
@@ -5398,22 +5408,6 @@ function create_fragment$p(ctx) {
5398
5408
  };
5399
5409
  }
5400
5410
 
5401
- function getCustomDropdownWidth(options) {
5402
- let width;
5403
- let maxCount = 0;
5404
-
5405
- options.forEach(option => {
5406
- const label = option.label || option.value || "";
5407
-
5408
- if (!width && maxCount < label.length) {
5409
- maxCount = label.length;
5410
- width = `${Math.max(20, maxCount + 12)}ch`;
5411
- }
5412
- });
5413
-
5414
- return width;
5415
- }
5416
-
5417
5411
  function instance$m($$self, $$props, $$invalidate) {
5418
5412
  let _disabled;
5419
5413
  let _error;
@@ -5457,6 +5451,17 @@ function instance$m($$self, $$props, $$invalidate) {
5457
5451
  addKeyboardEventListeners();
5458
5452
  setHighlightedIndexToSelected();
5459
5453
  }
5454
+
5455
+ // watch for DOM changes within the slot => dynamic binding
5456
+ const slot = _el.querySelector("slot");
5457
+
5458
+ slot === null || slot === void 0
5459
+ ? void 0
5460
+ : slot.addEventListener("slotchange", _e => {
5461
+ $$invalidate(14, _selectedLabel = "");
5462
+ $$invalidate(12, _values = parseValues());
5463
+ $$invalidate(13, _options = getOptions());
5464
+ });
5460
5465
  });
5461
5466
 
5462
5467
  onDestroy(() => {
@@ -5484,7 +5489,7 @@ function instance$m($$self, $$props, $$invalidate) {
5484
5489
  function getOptions() {
5485
5490
  const children = getChildren();
5486
5491
 
5487
- return children.map(el => {
5492
+ return children.filter(child => child.tagName === "GOA-DROPDOWN-ITEM").map(el => {
5488
5493
  const option = el;
5489
5494
  const value = el.getAttribute("value") || option.value;
5490
5495
  const label = el.getAttribute("label") || option.label || value;
@@ -5499,6 +5504,27 @@ function instance$m($$self, $$props, $$invalidate) {
5499
5504
  });
5500
5505
  }
5501
5506
 
5507
+ // compute the required width to enure all children fit
5508
+ function getCustomDropdownWidth(options) {
5509
+ let width;
5510
+ let maxCount = 0;
5511
+
5512
+ if (options.length === 0 && placeholder !== "") {
5513
+ return `${placeholder.length + 12}ch`;
5514
+ }
5515
+
5516
+ options.forEach(option => {
5517
+ const label = option.label || option.value || "";
5518
+
5519
+ if (!width && maxCount < label.length) {
5520
+ maxCount = label.length;
5521
+ width = `${Math.max(20, maxCount + 12)}ch`;
5522
+ }
5523
+ });
5524
+
5525
+ return width;
5526
+ }
5527
+
5502
5528
  function addKeyboardEventListeners() {
5503
5529
  _el.addEventListener("focus", onFocus, true);
5504
5530
  _el.addEventListener("blur", onBlur, true);
@@ -5741,7 +5767,7 @@ function instance$m($$self, $$props, $$invalidate) {
5741
5767
  class Dropdown extends SvelteElement {
5742
5768
  constructor(options) {
5743
5769
  super();
5744
- this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.dropdown{position:relative;cursor:pointer;display:inline-block;width:100%}@media(min-width: 640px){.dropdown{width:var(--width)}}.dropdown-background{cursor:default;position:fixed;z-index:98;inset:0}.dropdown-list{position:absolute;left:0;right:0;padding:0;margin:0;margin-top:3px;list-style-type:none;background:var(--color-white);border-radius:var(--input-border-radius);outline:none;box-shadow:var(--shadow-1);z-index:99;scroll-behavior:smooth;scrollbar-width:thin;display:none}.dropdown-active{display:block}.dropdown-list::-webkit-scrollbar{width:6px}.dropdown-list::-webkit-scrollbar-track{background:#f1f1f1}.dropdown-list::-webkit-scrollbar-thumb{background:#888}.dropdown-list::-webkit-scrollbar-thumb:hover{background:#555}.dropdown-item{margin:0;padding:0.5rem;cursor:pointer;color:var(--color-black);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dropdown-item--tabbed{background:var(--color-gray-100);color:var(--goa-color-interactive--hover)}.dropdown-item--disabled{opacity:0.5;cursor:default}.dropdown-item--disabled:hover{cursor:default;color:var(--color-gray-600)}.dropdown-item--selected{background:var(--goa-color-interactive);color:var(--color-white)}.dropdown-item--tabbed.dropdown-item--selected,.dropdown-item--selected:hover{background:var(--goa-color-interactive--hover);color:var(--color-white)}.dropdown-native{border:1px solid var(--color-gray-600);border-radius:var(--input-border-radius);background-color:var(--color-white)}.dropdown-native:has(select:disabled){background-color:var(--color-gray-100);border-color:var(--color-gray-200);box-shadow:none;color:var(--goa-color-text-secondary);cursor:default}.dropdown-native:has(select.error){border:2px solid var(--goa-color-interactive--error)}select{border:none;background-color:transparent;color:var(--goa-color-text);font-size:var(--input-font-size);appearance:none;padding:calc(var(--input-padding) + 2px);padding-left:0.5rem;padding-right:3rem;outline:none;width:100%}.dropdown-native::after{content:"";position:absolute;right:0.6rem;top:0.6rem;pointer-events:none;width:1.5rem;height:1.5rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='none' stroke='%23333333' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M112 184l144 144 144-144' /%3E%3C/svg%3E");background-repeat:none}.dropdown-native:focus-within{box-shadow:0 0 0 3px var(--goa-color-interactive--focus)}</style>`;
5770
+ this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.dropdown{position:relative;cursor:pointer;display:inline-block;width:100%}@media(min-width: 640px){.dropdown{width:var(--width)}}.dropdown-background{cursor:default;position:fixed;z-index:98;inset:0}.dropdown-list{position:absolute;left:0;right:0;padding:0;margin:0;margin-top:3px;list-style-type:none;background:var(--goa-color-greyscale-white);border-radius:var(--goa-border-radius-m);outline:none;box-shadow:var(--shadow-1);z-index:99;scroll-behavior:smooth;scrollbar-width:thin;display:none}.dropdown-active{display:block}.dropdown-list::-webkit-scrollbar{width:6px}.dropdown-list::-webkit-scrollbar-track{background:#f1f1f1}.dropdown-list::-webkit-scrollbar-thumb{background:#888}.dropdown-list::-webkit-scrollbar-thumb:hover{background:#555}.dropdown-item{margin:0;padding:0.5rem;cursor:pointer;color:var(--goa-color-greyscale-black);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dropdown-item--tabbed{background:var(--goa-color-greyscale-100);color:var(--goa-color-interactive-hover)}.dropdown-item--disabled{opacity:0.5;cursor:default}.dropdown-item--disabled:hover{cursor:default;color:var(--goa-color-greyscale-700)}.dropdown-item--selected{background:var(--goa-color-interactive-default);color:var(--goa-color-greyscale-white)}.dropdown-item--tabbed.dropdown-item--selected,.dropdown-item--selected:hover{background:var(--goa-color-interactive-hover);color:var(--goa-color-greyscale-white)}.dropdown-native{border:1px solid var(--goa-color-greyscale-700);border-radius:var(--goa-border-radius-m);background-color:var(--goa-color-greyscale-white)}.dropdown-native:has(select:disabled){background-color:var(--goa-color-greyscale-100);border-color:var(--goa-color-greyscale-200);box-shadow:none;color:var(--goa-color-text-secondary);cursor:default}.dropdown-native:has(select.error){border:2px solid var(--goa-color-interactive-error)}select{border:none;background-color:transparent;color:var(--goa-color-text-default);font-size:var(--goa-font-size-4);appearance:none;padding:calc(var(--goa-space-xs) + 2px);padding-left:0.5rem;padding-right:3rem;outline:none;width:100%}.dropdown-native::after{content:"";position:absolute;right:0.6rem;top:0.6rem;pointer-events:none;width:1.5rem;height:1.5rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='none' stroke='%23333333' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M112 184l144 144 144-144' /%3E%3C/svg%3E");background-repeat:none}.dropdown-native:focus-within{box-shadow:0 0 0 3px var(--goa-color-interactive-focus)}</style>`;
5745
5771
 
5746
5772
  init(
5747
5773
  this,
@@ -6404,7 +6430,7 @@ function instance$k($$self, $$props, $$invalidate) {
6404
6430
  class Footer extends SvelteElement {
6405
6431
  constructor(options) {
6406
6432
  super();
6407
- this.shadowRoot.innerHTML = `<style>*{box-sizing:border-box}.app-footer{background-color:var(--color-gray-100);border-top:2px solid var(--color-gray-200);border-bottom:1rem solid var(--goa-color-brand)}.content{padding:2rem 1rem;margin:0 auto;width:min(var(--max-content-width), 100%)}@media(min-width: 640px){.content{padding:2rem 1.5rem}}.meta-section{display:flex;flex-direction:column;padding:1rem 0}.meta-section.with-meta-links{gap:2rem;justify-content:space-between}.meta-links{display:none}.with-meta-links .meta-links{display:block}.nav-links{display:flex;flex-direction:column;gap:2rem}.abgov{display:flex;flex-direction:column;justify-content:space-between;width:100%}@media(min-width: 640px){.meta-section{flex-direction:row;gap:2rem}.nav-links{flex-direction:row}.abgov{align-items:center;flex-direction:row-reverse}}.abgov.with-meta-links{gap:1rem;flex-direction:column;width:unset}@media(min-width: 640px){.abgov.with-meta-links{align-items:flex-end}}.goa-copyright{white-space:nowrap}a{color:var(--goa-color-text-secondary)}</style>`;
6433
+ this.shadowRoot.innerHTML = `<style>*{box-sizing:border-box}.app-footer{background-color:var(--goa-color-greyscale-100);border-top:2px solid var(--goa-color-greyscale-200);border-bottom:1rem solid var(--goa-color-brand-default)}.content{padding:2rem 1rem;margin:0 auto;width:min(var(--max-content-width), 100%)}@media(min-width: 640px){.content{padding:2rem 1.5rem}}.meta-section{display:flex;flex-direction:column;padding:1rem 0}.meta-section.with-meta-links{gap:2rem;justify-content:space-between}.meta-links{display:none}.with-meta-links .meta-links{display:block}.nav-links{display:flex;flex-direction:column;gap:2rem}.abgov{display:flex;flex-direction:column;justify-content:space-between;width:100%}@media(min-width: 640px){.meta-section{flex-direction:row;gap:2rem}.nav-links{flex-direction:row}.abgov{align-items:center;flex-direction:row-reverse}}.abgov.with-meta-links{gap:1rem;flex-direction:column;width:unset}@media(min-width: 640px){.abgov.with-meta-links{align-items:flex-end}}.goa-copyright{white-space:nowrap}a{color:var(--goa-color-text-secondary)}</style>`;
6408
6434
 
6409
6435
  init(
6410
6436
  this,
@@ -6597,7 +6623,7 @@ function instance$j($$self, $$props, $$invalidate) {
6597
6623
  class FooterMetaSection extends SvelteElement {
6598
6624
  constructor(options) {
6599
6625
  super();
6600
- this.shadowRoot.innerHTML = `<style>.hidden{display:none}ul{display:flex;flex-wrap:wrap;gap:1rem;padding-left:0}li{list-style-type:none}a{color:var(--goa-color-text);white-space:nowrap}</style>`;
6626
+ this.shadowRoot.innerHTML = `<style>.hidden{display:none}ul{display:flex;flex-wrap:wrap;gap:1rem;padding-left:0}li{list-style-type:none}a{color:var(--goa-color-text-default);white-space:nowrap}</style>`;
6601
6627
 
6602
6628
  init(
6603
6629
  this,
@@ -6858,7 +6884,7 @@ function instance$i($$self, $$props, $$invalidate) {
6858
6884
  class FooterNavSection extends SvelteElement {
6859
6885
  constructor(options) {
6860
6886
  super();
6861
- this.shadowRoot.innerHTML = `<style>:host{flex:auto}.title{font-size:var(--fs-xl);line-height:var(--lh-lg)}.hidden{display:none}.links{display:block;list-style-type:none;padding-left:0}@media(min-width: 720px){.links{display:var(--narrow-display-type);list-style-type:none;padding-left:0;flex-direction:column;column-count:var(--narrow-column-count)}}@media(min-width: 1024px){.links{display:var(--wide-display-type);list-style-type:none;padding-left:0;flex-direction:column;column-count:var(--wide-column-count)}}li{padding:0.75rem 0}a{color:var(--goa-color-text)}</style>`;
6887
+ this.shadowRoot.innerHTML = `<style>:host{flex:auto}.title{font-size:var(--goa-font-size-7);line-height:var(--goa-line-height-4)}.hidden{display:none}.links{display:block;list-style-type:none;padding-left:0}@media(min-width: 720px){.links{display:var(--narrow-display-type);list-style-type:none;padding-left:0;flex-direction:column;column-count:var(--narrow-column-count)}}@media(min-width: 1024px){.links{display:var(--wide-display-type);list-style-type:none;padding-left:0;flex-direction:column;column-count:var(--wide-column-count)}}li{padding:0.75rem 0}a{color:var(--goa-color-text-default)}</style>`;
6862
6888
 
6863
6889
  init(
6864
6890
  this,
@@ -7176,7 +7202,7 @@ function instance$h($$self, $$props, $$invalidate) {
7176
7202
  class FormItem extends SvelteElement {
7177
7203
  constructor(options) {
7178
7204
  super();
7179
- this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}*{box-sizing:border-box}.label{display:block;font-weight:var(--fw-bold);color:var(--goa-color-text);font-size:var(--fs-base);padding:0.5rem 0}.label em{color:var(--color-gray-600);font-weight:var(--fw-regular);font-size:var(--fs-sm);line-height:var(--lh-sm);font-style:normal}.form-item-input{margin-bottom:0.25rem}.help-msg{font-size:var(--fs-sm);color:var(--goa-color-text);margin-right:56px}.error-msg{display:inline-flex;gap:0.25rem;font-size:var(--fs-sm);color:var(--goa-color-interactive--error);margin-bottom:0.25rem}</style>`;
7205
+ this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}*{box-sizing:border-box}.label{display:block;font-weight:var(--goa-font-weight-bold);color:var(--goa-color-text-default);font-size:var(--goa-font-size-4);padding:0.5rem 0}.label em{color:var(--goa-color-greyscale-700);font-weight:var(--goa-font-weight-regular);font-size:var(--goa-font-size-2);line-height:var(--goa-line-height-1);font-style:normal}.form-item-input{margin-bottom:0.25rem}.help-msg{font-size:var(--goa-font-size-2);color:var(--goa-color-text-default);margin-right:56px}.error-msg{display:inline-flex;gap:0.25rem;font-size:var(--goa-font-size-2);color:var(--goa-color-interactive-error);margin-bottom:0.25rem}</style>`;
7180
7206
 
7181
7207
  init(
7182
7208
  this,
@@ -7329,7 +7355,7 @@ function create_fragment$i(ctx) {
7329
7355
  attr(div, "style", div_style_value = `
7330
7356
  ${calculateMargin(/*mt*/ ctx[2], /*mr*/ ctx[3], /*mb*/ ctx[4], /*ml*/ ctx[5])}
7331
7357
  --min-child-width: ${/*minchildwidth*/ ctx[1] || 0};
7332
- gap: var(--goa-spacing-${/*gap*/ ctx[0]})
7358
+ gap: var(--goa-space-${/*gap*/ ctx[0]})
7333
7359
  `);
7334
7360
  },
7335
7361
  m(target, anchor) {
@@ -7340,7 +7366,7 @@ function create_fragment$i(ctx) {
7340
7366
  if (dirty & /*mt, mr, mb, ml, minchildwidth, gap*/ 63 && div_style_value !== (div_style_value = `
7341
7367
  ${calculateMargin(/*mt*/ ctx[2], /*mr*/ ctx[3], /*mb*/ ctx[4], /*ml*/ ctx[5])}
7342
7368
  --min-child-width: ${/*minchildwidth*/ ctx[1] || 0};
7343
- gap: var(--goa-spacing-${/*gap*/ ctx[0]})
7369
+ gap: var(--goa-space-${/*gap*/ ctx[0]})
7344
7370
  `)) {
7345
7371
  attr(div, "style", div_style_value);
7346
7372
  }
@@ -7380,7 +7406,7 @@ function instance$g($$self, $$props, $$invalidate) {
7380
7406
  class Grid extends SvelteElement {
7381
7407
  constructor(options) {
7382
7408
  super();
7383
- this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.goa-grid{display:flex;flex-direction:column;gap:var(--gap)}@media(min-width: 640px){.goa-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(var(--min-child-width), 1fr))}}</style>`;
7409
+ this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.goa-grid{display:flex;flex-direction:column;gap:var(--gap)}@media(min-width: 640px){.goa-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(var(--min-child-width), 1fr))}}</style>`;
7384
7410
 
7385
7411
  init(
7386
7412
  this,
@@ -7558,7 +7584,7 @@ function instance$f($$self, $$props, $$invalidate) {
7558
7584
  class HeroBanner extends SvelteElement {
7559
7585
  constructor(options) {
7560
7586
  super();
7561
- this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.goa-hero{box-sizing:border-box;display:flex;justify-content:flex-end;flex-direction:column;border-bottom:8px solid var(--goa-color-brand);color:var(--color-white);background-position:center center;width:100%;padding:3.5rem 0}h1{margin:0 0 1.75rem;padding:0;color:var(--color-white);font-size:var(--fs-3xl);line-height:var(--lh-2xl);font-weight:var(--fw-bold)}.goa-hero-banner-content{font-size:1.5rem;line-height:2rem;margin-bottom:1.75rem;color:#fff}</style>`;
7587
+ this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.goa-hero{box-sizing:border-box;display:flex;justify-content:flex-end;flex-direction:column;border-bottom:8px solid var(--goa-color-brand-default);color:var(--goa-color-greyscale-white);background-position:center center;width:100%;padding:3.5rem 0}h1{margin:0 0 1.75rem;padding:0;color:var(--goa-color-greyscale-white);font-size:var(--goa-font-size-10);line-height:var(--goa-line-height-7);font-weight:var(--goa-font-weight-bold)}.goa-hero-banner-content{font-size:1.5rem;line-height:2rem;margin-bottom:1.75rem;color:#fff}</style>`;
7562
7588
 
7563
7589
  init(
7564
7590
  this,
@@ -7797,7 +7823,7 @@ function instance$e($$self, $$props, $$invalidate) {
7797
7823
  class IconButton extends SvelteElement {
7798
7824
  constructor(options) {
7799
7825
  super();
7800
- this.shadowRoot.innerHTML = `<style>:host{display:inline-flex;align-items:center;box-sizing:border-box;font-family:var(--font-family)}button,button *{box-sizing:border-box}button{display:inline-flex;align-items:center;box-sizing:border-box;justify-content:center;background:transparent;cursor:pointer;border:none;border-radius:0.5rem;padding:var(--pading-size)}.color,.dark{color:var(--goa-color-interactive);fill:var(--goa-color-interactive);cursor:pointer;transition:background-color 100ms ease-in, transform 100ms ease-in}.dark:not(.inverted){color:unset}button:hover{background-color:var(--color-gray-100);border-color:var(--color-gray-100);color:var(--goa-color-interactive--hover);outline:none}button:focus,button:active{background-color:var(--color-gray-100);border-color:var(--goa-color-interactive--active);color:var(--goa-color-interactive--active);box-shadow:0 0 0 3px var(--goa-color-interactive--focus);outline:none}.color.inverted:hover{background-color:var(--goa-color-primary-dark)}button:disabled{pointer-events:none;opacity:0.5;transform:none;cursor:default}button:disabled:hover{background-color:transparent}button.dark:hover{background-color:rgba(0, 0, 0, 0.3)}button.dark:focus,button.dark:active{background-color:rgba(0, 0, 0, 0.3);box-shadow:0 0 0 3px var(--color-white)}</style>`;
7826
+ this.shadowRoot.innerHTML = `<style>:host{display:inline-flex;align-items:center;box-sizing:border-box;font-family:var(--goa-font-family-sans)}button,button *{box-sizing:border-box}button{display:inline-flex;align-items:center;box-sizing:border-box;justify-content:center;background:transparent;cursor:pointer;border:none;border-radius:0.5rem;padding:var(--pading-size)}.color,.dark{color:var(--goa-color-interactive-default);fill:var(--goa-color-interactive-default);cursor:pointer;transition:background-color 100ms ease-in, transform 100ms ease-in}.dark:not(.inverted){color:unset}button:hover{background-color:var(--goa-color-greyscale-100);border-color:var(--goa-color-greyscale-100);color:var(--goa-color-interactive-hover);outline:none}button:focus,button:active{background-color:var(--goa-color-greyscale-100);border-color:var(--goa-color-interactive-focus);color:var(--goa-color-interactive-focus);box-shadow:0 0 0 3px var(--goa-color-interactive-focus);outline:none}.color.inverted:hover{background-color:var(--goa-color-interactive-hover)}button:disabled{pointer-events:none;opacity:0.5;transform:none;cursor:default}button:disabled:hover{background-color:transparent}button.dark:hover{background-color:rgba(0, 0, 0, 0.3)}button.dark:focus,button.dark:active{background-color:rgba(0, 0, 0, 0.3);box-shadow:0 0 0 3px var(--goa-color-greyscale-white)}</style>`;
7801
7827
 
7802
7828
  init(
7803
7829
  this,
@@ -8916,7 +8942,7 @@ class Input extends SvelteElement {
8916
8942
  constructor(options) {
8917
8943
  super();
8918
8944
 
8919
- this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box}.container{position:relative;width:100%;display:inline-block}@media(min-width: 640px){.container{width:var(--width)}}.goa-input,.goa-input *{box-sizing:border-box}.goa-input{box-sizing:border-box;outline:none;transition:box-shadow 0.1s ease-in;border:1px solid var(--color-gray-600);border-radius:var(--input-border-radius);display:inline-flex;align-items:stretch;vertical-align:middle;min-width:100%}.goa-input:hover{border-color:var(--goa-color-interactive--hover)}.goa-input:active,.goa-input:focus,.goa-input:focus-within{box-shadow:0 0 0 3px var(--goa-color-interactive--focus)}.goa-input.type--range{border:none}.goa-input.type--range:active,.goa-input.type--range:focus,.goa-input.type--range:focus-within{box-shadow:none}.goa-input-leading-icon{margin-left:0.5rem}.goa-input-trailing-icon{margin-right:0.5rem}input{display:inline-block;color:var(--goa-color-text);font-size:var(--input-font-size);padding:var(--input-padding);line-height:calc(40px - calc(var(--input-padding) * 2));background-color:transparent;width:0;flex:1 1 auto;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>')
8945
+ 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(--color-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:0;flex:1 1 auto;font-family:var(--goa-font-family-sans)}input[readonly]{cursor:pointer}.goa-input-leading-icon+input{padding-left:0.5rem}input,input:focus,input:hover,input:active{outline:none;border:none}.goa-input--disabled,.goa-input--disabled:hover,.goa-input--disabled:active,.goa-input--disabled:focus{background-color:var(--goa-color-greyscale-100);border-color:var(--goa-color-greyscale-200);cursor:default;box-shadow:none}.goa-input--disabled input,.goa-input--disabled input:hover,.goa-input--disabled input:active,.goa-input--disabled input:focus{color:var(--goa-color-text-secondary)}.goa-input--disabled input:hover{cursor:default !important}.prefix,.suffix,.leading-content ::slotted(div),.trailing-content ::slotted(div){background-color:var(--goa-color-greyscale-100);padding:0 0.75rem;display:flex;align-items:center}.leading-content ::slotted(div),.trailing-content ::slotted(div){padding:0.5rem 0.75rem}.prefix,.leading-content ::slotted(div){border-top-left-radius:var(--goa-border-radius-m);border-bottom-left-radius:var(--goa-border-radius-m);border-right:1px solid var(--goa-color-greyscale-700)}.suffix,.trailing-content ::slotted(div){border-top-right-radius:var(--goa-border-radius-m);border-bottom-right-radius:var(--goa-border-radius-m);border-left:1px solid var(--goa-color-greyscale-700)}.goa-input--disabled .prefix,.goa-input--disabled .leading-content ::slotted(div){border-right:1px solid var(--goa-color-greyscale-200)}.goa-input--disabled .suffix,.goa-input--disabled .trailing-content ::slotted(div){border-left:1px solid var(--goa-color-greyscale-200)}input.input--goa{display:block;border:none;flex:1 1 auto}.variant--bare{border:none}.variant--bare:focus,.variant--bare:active,.variant--bare:focus-within{box-shadow:none}.error:hover,.error:focus,.error{border:2px solid var(--goa-color-interactive-error)}input[type="search" i]:enabled:read-write:-webkit-any(:focus, :hover)::-webkit-search-cancel-button{position:relative;right:var(--search-icon-offset);cursor:pointer;-webkit-appearance:none;height:1.2rem;width:1.2rem;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%23333" d="M405 136.798L375.202 107 256 226.202 136.798 107 107 136.798 226.202 256 107 375.202 136.798 405 256 285.798 375.202 405 405 375.202 285.798 256z"/></svg>')
8920
8946
  center center no-repeat}</style>`;
8921
8947
 
8922
8948
  init(
@@ -9501,7 +9527,7 @@ function instance$b($$self, $$props, $$invalidate) {
9501
9527
  class MicrositeHeader extends SvelteElement {
9502
9528
  constructor(options) {
9503
9529
  super();
9504
- this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}a{color:var(--goa-color-interactive);cursor:pointer}a:hover{color:var(--goa-color-interactive--hover)}a:focus{outline-width:thin;outline-style:solid;outline-color:var(--goa-color-interactive--hover);outline-offset:0px}.goa-official-site-header{display:flex;font-size:var(--fs-sm);background-color:var(--color-gray-100);align-items:center;justify-content:space-between;padding:0.25rem 1.5rem}@media(max-width: 640px){.goa-official-site-header{padding:0.5rem 1rem;align-items:start}}.spacer{flex:1 1 auto}.version{color:var(--goa-color-text-secondary);padding-left:1rem;line-height:1.25rem}.service-type{font-weight:bold;padding:0.125rem 0.25rem;display:flex;margin-right:1rem;line-height:initial}.service-type--alpha{background-color:var(--goa-color-status-warning);color:var(--goa-color-text)}.service-type--beta{background-color:var(--goa-color-brand);color:var(--goa-color-text-light)}.service-type--live{padding:0}.site-text{color:var(--goa-color-text);line-height:1.25rem}</style>`;
9530
+ this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}a{color:var(--goa-color-interactive-default);cursor:pointer}a:hover{color:var(--goa-color-interactive-hover)}a:focus{outline-width:thin;outline-style:solid;outline-color:var(--goa-color-interactive-hover);outline-offset:0px}.goa-official-site-header{display:flex;font-size:var(--goa-font-size-2);background-color:var(--goa-color-greyscale-100);align-items:center;justify-content:space-between;padding:0.25rem 1.5rem}@media(max-width: 640px){.goa-official-site-header{padding:0.5rem 1rem;align-items:start}}.spacer{flex:1 1 auto}.version{color:var(--goa-color-text-secondary);padding-left:1rem;line-height:1.25rem}.service-type{font-weight:bold;padding:0.125rem 0.25rem;display:flex;margin-right:1rem;line-height:initial}.service-type--alpha{background-color:var(--goa-color-warning-default);color:var(--goa-color-text-default)}.service-type--beta{background-color:var(--goa-color-brand-default);color:var(--goa-color-text-light)}.service-type--live{padding:0}.site-text{color:var(--goa-color-text-default);line-height:1.25rem}</style>`;
9505
9531
 
9506
9532
  init(
9507
9533
  this,
@@ -10032,7 +10058,7 @@ function instance$a($$self, $$props, $$invalidate) {
10032
10058
  class Modal extends SvelteElement {
10033
10059
  constructor(options) {
10034
10060
  super();
10035
- this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.modal{font-family:var(--font-family);position:fixed;inset:0;display:flex;align-items:center;justify-content:center;height:100vh;width:100%;z-index:100}.modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.2);z-index:1000}.emergency{background-color:var(--goa-color-status-emergency)}.important{background-color:var(--goa-color-status-warning)}.information{background-color:var(--goa-color-status-info)}.event{background-color:var(--goa-color-status-info)}.success{background-color:var(--goa-color-status-success)}.callout-bar{flex:0 0 3rem;text-align:center;padding-top:2rem;border-radius:4px 0px 0px 4px}.content{flex:1 1 auto;width:100%;margin:2rem 2rem}.modal-pane{position:relative;background-color:#fff;z-index:1001;width:90%;display:flex;margin:1rem;box-shadow:6px 6px 6px rgba(0, 0, 0, 0.16);border-radius:4px;max-height:90%;border:1px solid var(--color-gray-600)}@media(min-width: 640px){.modal-pane{width:var(--width, 60ch);max-height:80%}}.modal-actions ::slotted(div){margin:1.5rem 0 0}.modal-content ::slotted(:last-child){margin-bottom:0 !important}.modal-close{position:absolute;top:2rem;right:2rem}.modal-title{font-size:var(--fs-xl);margin:0 0 1.5rem;margin-right:40px;flex:0 0 auto}.modal-content{line-height:1.75rem}</style>`;
10061
+ this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.modal{font-family:var(--goa-font-family-sans);position:fixed;inset:0;display:flex;align-items:center;justify-content:center;height:100vh;width:100%;z-index:100}.modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.2);z-index:1000}.emergency{background-color:var(--goa-color-emergency-default)}.important{background-color:var(--goa-color-warning-default)}.information{background-color:var(--goa-color-info-default)}.event{background-color:var(--goa-color-info-default)}.success{background-color:var(--goa-color-success-default)}.callout-bar{flex:0 0 3rem;text-align:center;padding-top:2rem;border-radius:4px 0px 0px 4px}.content{flex:1 1 auto;width:100%;margin:2rem 2rem}.modal-pane{position:relative;background-color:#fff;z-index:1001;width:90%;display:flex;margin:1rem;box-shadow:var(--goa-shadow-modal);border-radius:4px;max-height:90%;border:1px solid var(--goa-color-greyscale-700)}@media(min-width: 640px){.modal-pane{width:var(--width, 60ch);max-height:80%}}.modal-actions ::slotted(div){margin:1.5rem 0 0}.modal-content ::slotted(:last-child){margin-bottom:0 !important}.modal-close{position:absolute;top:2rem;right:2rem}.modal-title{font-size:var(--goa-font-size-7);margin:0 0 1.5rem;margin-right:40px;flex:0 0 auto}.modal-content{line-height:1.75rem}</style>`;
10036
10062
 
10037
10063
  init(
10038
10064
  this,
@@ -10317,7 +10343,7 @@ function instance$9($$self, $$props, $$invalidate) {
10317
10343
  class Notification extends SvelteElement {
10318
10344
  constructor(options) {
10319
10345
  super();
10320
- this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.notification{padding:1.5rem;display:flex;gap:1rem}.emergency{background-color:var(--goa-color-status-emergency);color:var(--color-white)}.important{background-color:var(--goa-color-status-warning)}.information{background-color:var(--goa-color-status-info);color:var(--color-white)}.event{background-color:var(--goa-color-status-success);color:var(--color-white)}.icon{flex:0 0 auto}.content{flex:1 1 auto}::slotted(a){color:unset !important;outline:unset !important}.close{flex:0 0 auto}</style>`;
10346
+ this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.notification{padding:1.5rem;display:flex;gap:1rem}.emergency{background-color:var(--goa-color-emergency-default);color:var(--goa-color-greyscale-white)}.important{background-color:var(--goa-color-warning-default)}.information{background-color:var(--goa-color-info-default);color:var(--goa-color-greyscale-white)}.event{background-color:var(--goa-color-success-default);color:var(--goa-color-greyscale-white)}.icon{flex:0 0 auto}.content{flex:1 1 auto}::slotted(a){color:unset !important;outline:unset !important}.close{flex:0 0 auto}</style>`;
10321
10347
 
10322
10348
  init(
10323
10349
  this,
@@ -10428,7 +10454,7 @@ function instance$8($$self, $$props, $$invalidate) {
10428
10454
  class PageBlock extends SvelteElement {
10429
10455
  constructor(options) {
10430
10456
  super();
10431
- this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.page-content{max-width:var(--max-width);margin:0 auto;padding:0 1.75rem}</style>`;
10457
+ this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.page-content{max-width:var(--max-width);margin:0 auto;padding:0 1.75rem}</style>`;
10432
10458
 
10433
10459
  init(
10434
10460
  this,
@@ -10795,9 +10821,9 @@ class RadioGroup extends SvelteElement {
10795
10821
  constructor(options) {
10796
10822
  super();
10797
10823
 
10798
- this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.goa-radio-group--horizontal{display:flex;flex-direction:row}.goa-radio-group--vertical{display:inline-block}label.goa-radio{--goa-radio-outline-width:3px;--goa-radio-diameter:1.5rem;--goa-radio-border-width:1px;--goa-radio-border-width--checked:7px;display:inline-block;box-sizing:border-box;display:flex;align-items:center;min-height:3rem}.goa-radio:hover{cursor:pointer}.goa-radio *,.goa-radio *:before,.goa-radio *:after{box-sizing:border-box}.goa-radio input[type="radio"]{width:0;height:0;margin:0;opacity:0}input[type="radio"]:hover~.goa-radio-icon{border-color:var(--goa-color-interactive--hover)}input[type="radio"]:focus~.goa-radio-icon{box-shadow:0 0 0 var(--goa-radio-outline-width) var(--goa-color-interactive--focus)}.goa-radio-label{padding:0.5rem;font-weight:var(--fw-regular)}.goa-radio-icon{display:inline-block;height:var(--goa-radio-diameter);width:var(--goa-radio-diameter);border-radius:50%;background-color:#fff;transition:box-shadow 100ms ease-in-out;flex:0 0 auto}.goa-radio:focus>input:not(:disabled)~.goa-radio-icon{box-shadow:0 0 0 var(--goa-radio-outline-width) var(--goa-color-interactive--focus)}.goa-radio--disabled{opacity:0.4}.goa-radio--disabled:hover{cursor:default}input[type="radio"]:checked~.goa-radio-icon{border:var(--goa-radio-border-width--checked) solid
10799
- var(--goa-color-interactive--active)}input[type="radio"]:not(:checked)~.goa-radio-icon{border:var(--goa-radio-border-width) solid var(--color-gray-600)}input[type="radio"]:disabled~.goa-radio-icon{border:var(--goa-radio-border-width) solid var(--color-gray-600)}input[type="radio"]:disabled:checked~.goa-radio-icon{border:var(--goa-radio-border-width--checked) solid
10800
- var(--goa-color-interactive--active)}.goa-radio--error input[type="radio"]:checked~.goa-radio-icon{border:7px solid var(--goa-color-status-emergency)}.goa-radio--error input[type="radio"]:not(:checked)~.goa-radio-icon{border:2px solid var(--goa-color-status-emergency)}</style>`;
10824
+ 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
10825
+ 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
10826
+ var(--goa-color-interactive-hover)}.goa-radio--error input[type="radio"]:checked~.goa-radio-icon{border:7px solid var(--goa-color-emergency-default)}.goa-radio--error input[type="radio"]:not(:checked)~.goa-radio-icon{border:2px solid var(--goa-color-emergency-default)}</style>`;
10801
10827
 
10802
10828
  init(
10803
10829
  this,
@@ -11577,7 +11603,7 @@ function instance$5($$self, $$props, $$invalidate) {
11577
11603
  class Skeleton extends SvelteElement {
11578
11604
  constructor(options) {
11579
11605
  super();
11580
- this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}@keyframes pulse{0%{opacity:0.5}50%{opacity:1}100%{opacity:0.5}}.skeleton{background-color:var(--color-gray-100);animation:pulse 2s infinite ease-in-out;overflow:hidden;margin:10px 0}.image,.image-1{background-color:var(--color-gray-100);flex:1 1 100px;height:100px;margin:0}.image-2{height:140px}.image-3{height:200px}.image-4{height:300px}.text,.text-1,.text-2,.text-3,.text-4{width:100%;height:.75rem;border-radius:0.25rem;margin:6px 0}.title,.title-1,.title-2{width:100%;height:.75rem;border-radius:0.25rem}.title-3{height:.8rem}.title-4{height:1rem}.text-small,.text-small-1{width:30%;height:6px;border-radius:2px}.text-small-2{width:40%;height:8px;border-radius:2px}.text-small-3{width:50%;height:10px;border-radius:3px}.text-small-4{width:70%;height:12px;border-radius:4px}.paragraph{width:100%;height:70px;border-radius:4px}.header,.header-1{width:50%;height:18px;margin:12px 0;border-radius:0.25rem}.header-2{width:60%;height:20px;margin:14px 0;border-radius:0.25rem}.header-3{width:70%;height:22px;margin:16px 0;border-radius:0.25rem}.header-4{width:80%;height:24px;margin:18px 0;border-radius:0.3rem}.avatar{display:inline-block}.avatar,.avatar-1{width:40px;height:40px;border-radius:50%}.avatar-2{width:60px;height:60px;border-radius:50%}.avatar-3{width:80px;height:80px;border-radius:50%}.avatar-4{width:120px;height:120px;border-radius:50%}.thumbnail{display:inline-block}.thumbnail,.thumbnail-1{width:40px;height:40px;border-radius:4px}.thumbnail-2{width:60px;height:60px;border-radius:4px}.thumbnail-3{width:80px;height:80px;border-radius:4px}.thumbnail-4{width:120px;height:120px;border-radius:4px}.card{display:inline-block}.card,.card-1,.card-2,.card-3,.card-4{border:1px solid var(--color-gray-100);border-radius:4px}.card{width:100%}@media(min-width: 480px){.card{max-width:var(--max-width)}}.card-content{flex:1 1 auto;padding:1rem}.profile{display:flex;flex-direction:row;align-items:center}.profile-1{max-width:280px;gap:1rem}.profile-2{max-width:360px;gap:1rem}.profile-3{max-width:480px;gap:1rem}.profile-4{max-width:560px;gap:1rem}.profile .profile-avatar{flex-shrink:0}.profile .profile-name{flex:1 1 auto}</style>`;
11606
+ this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}@keyframes pulse{0%{opacity:0.5}50%{opacity:1}100%{opacity:0.5}}.skeleton{background-color:var(--goa-color-greyscale-100);animation:pulse 2s infinite ease-in-out;overflow:hidden;margin:10px 0}.image,.image-1{background-color:var(--goa-color-greyscale-100);flex:1 1 100px;height:100px;margin:0}.image-2{height:140px}.image-3{height:200px}.image-4{height:300px}.text,.text-1,.text-2,.text-3,.text-4{width:100%;height:.75rem;border-radius:0.25rem;margin:6px 0}.title,.title-1,.title-2{width:100%;height:.75rem;border-radius:0.25rem}.title-3{height:.8rem}.title-4{height:1rem}.text-small,.text-small-1{width:30%;height:6px;border-radius:2px}.text-small-2{width:40%;height:8px;border-radius:2px}.text-small-3{width:50%;height:10px;border-radius:3px}.text-small-4{width:70%;height:12px;border-radius:4px}.paragraph{width:100%;height:70px;border-radius:4px}.header,.header-1{width:50%;height:18px;margin:12px 0;border-radius:0.25rem}.header-2{width:60%;height:20px;margin:14px 0;border-radius:0.25rem}.header-3{width:70%;height:22px;margin:16px 0;border-radius:0.25rem}.header-4{width:80%;height:24px;margin:18px 0;border-radius:0.3rem}.avatar{display:inline-block}.avatar,.avatar-1{width:40px;height:40px;border-radius:50%}.avatar-2{width:60px;height:60px;border-radius:50%}.avatar-3{width:80px;height:80px;border-radius:50%}.avatar-4{width:120px;height:120px;border-radius:50%}.thumbnail{display:inline-block}.thumbnail,.thumbnail-1{width:40px;height:40px;border-radius:4px}.thumbnail-2{width:60px;height:60px;border-radius:4px}.thumbnail-3{width:80px;height:80px;border-radius:4px}.thumbnail-4{width:120px;height:120px;border-radius:4px}.card{display:inline-block}.card,.card-1,.card-2,.card-3,.card-4{border:1px solid var(--goa-color-greyscale-100);border-radius:4px}.card{width:100%}@media(min-width: 480px){.card{max-width:var(--max-width)}}.card-content{flex:1 1 auto;padding:1rem}.profile{display:flex;flex-direction:row;align-items:center}.profile-1{max-width:280px;gap:1rem}.profile-2{max-width:360px;gap:1rem}.profile-3{max-width:480px;gap:1rem}.profile-4{max-width:560px;gap:1rem}.profile .profile-avatar{flex-shrink:0}.profile .profile-name{flex:1 1 auto}</style>`;
11581
11607
 
11582
11608
  init(
11583
11609
  this,
@@ -11734,8 +11760,8 @@ function instance$4($$self, $$props, $$invalidate) {
11734
11760
 
11735
11761
  onMount(() => {
11736
11762
  injectCss(rootEl, ":host", {
11737
- width: `var(--goa-spacing-${hspacing})`,
11738
- height: `var(--goa-spacing-${vspacing})`
11763
+ width: `var(--goa-space-${hspacing})`,
11764
+ height: `var(--goa-space-${vspacing})`
11739
11765
  });
11740
11766
  });
11741
11767
 
@@ -11978,7 +12004,7 @@ function create_if_block(ctx) {
11978
12004
  attr(circle, "cy", /*radius*/ ctx[3]);
11979
12005
 
11980
12006
  attr(circle, "stroke", circle_stroke_value = /*invert*/ ctx[0]
11981
- ? "var(--goa-color-primary-dark)"
12007
+ ? "var(--goa-color-info-hover)"
11982
12008
  : "var(--goa-color-brand-light)");
11983
12009
 
11984
12010
  attr(circle, "stroke-width", /*strokewidth*/ ctx[4]);
@@ -11988,7 +12014,7 @@ function create_if_block(ctx) {
11988
12014
 
11989
12015
  attr(path, "stroke", path_stroke_value = /*invert*/ ctx[0]
11990
12016
  ? "var(--goa-color-brand-light)"
11991
- : "var(--goa-color-primary)");
12017
+ : "var(--goa-color-info-default)");
11992
12018
 
11993
12019
  attr(path, "stroke-linecap", "round");
11994
12020
  attr(svg, "class", svg_class_value = `spinner-${/*type*/ ctx[2]}`);
@@ -12014,7 +12040,7 @@ function create_if_block(ctx) {
12014
12040
  }
12015
12041
 
12016
12042
  if (dirty & /*invert*/ 1 && circle_stroke_value !== (circle_stroke_value = /*invert*/ ctx[0]
12017
- ? "var(--goa-color-primary-dark)"
12043
+ ? "var(--goa-color-info-hover)"
12018
12044
  : "var(--goa-color-brand-light)")) {
12019
12045
  attr(circle, "stroke", circle_stroke_value);
12020
12046
  }
@@ -12037,7 +12063,7 @@ function create_if_block(ctx) {
12037
12063
 
12038
12064
  if (dirty & /*invert*/ 1 && path_stroke_value !== (path_stroke_value = /*invert*/ ctx[0]
12039
12065
  ? "var(--goa-color-brand-light)"
12040
- : "var(--goa-color-primary)")) {
12066
+ : "var(--goa-color-info-default)")) {
12041
12067
  attr(path, "stroke", path_stroke_value);
12042
12068
  }
12043
12069
 
@@ -12214,7 +12240,7 @@ function instance$3($$self, $$props, $$invalidate) {
12214
12240
  class Spinner extends SvelteElement {
12215
12241
  constructor(options) {
12216
12242
  super();
12217
- this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}@keyframes rotate{100%{transform:rotate(360deg)}}.spinner-infinite{animation:rotate 2s linear infinite}</style>`;
12243
+ this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}@keyframes rotate{100%{transform:rotate(360deg)}}.spinner-infinite{animation:rotate 2s linear infinite}</style>`;
12218
12244
 
12219
12245
  init(
12220
12246
  this,
@@ -12420,7 +12446,7 @@ function instance$2($$self, $$props, $$invalidate) {
12420
12446
  class Table extends SvelteElement {
12421
12447
  constructor(options) {
12422
12448
  super();
12423
- 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>`;
12449
+ 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>`;
12424
12450
 
12425
12451
  init(
12426
12452
  this,
@@ -12720,8 +12746,8 @@ class TextArea extends SvelteElement {
12720
12746
  constructor(options) {
12721
12747
  super();
12722
12748
 
12723
- 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)
12724
- }.error:hover,.error:focus,.error{border:2px solid var(--goa-color-interactive--error)}</style>`;
12749
+ 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)
12750
+ }.error:hover,.error:focus,.error{border:2px solid var(--goa-color-interactive-error)}</style>`;
12725
12751
 
12726
12752
  init(
12727
12753
  this,
@@ -12959,12 +12985,12 @@ class FullScreenNavbarLayout extends SvelteElement {
12959
12985
  constructor(options) {
12960
12986
  super();
12961
12987
 
12962
- this.shadowRoot.innerHTML = `<style>.page{height:100vh;grid-template-columns:auto;grid-template-rows:min-content auto min-content;grid-template-areas:"header"
12988
+ this.shadowRoot.innerHTML = `<style>.page{height:100vh;grid-template-columns:auto;grid-template-rows:min-content auto min-content;grid-template-areas:"header"
12963
12989
  "content"
12964
12990
  "nav"
12965
- "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"
12991
+ "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"
12966
12992
  "nav content"
12967
- "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>`;
12993
+ "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>`;
12968
12994
 
12969
12995
  init(
12970
12996
  this,
@@ -13083,7 +13109,7 @@ function create_fragment(ctx) {
13083
13109
 
13084
13110
  attr(div, "style", div_style_value = `
13085
13111
  --max-content-width: ${/*maxcontentwidth*/ ctx[1] || "100%"};
13086
- --nav-column-width: ${/*navcolumnwidth*/ ctx[0] || "var(--layout-nav-column-width)"};
13112
+ --nav-column-width: ${/*navcolumnwidth*/ ctx[0] || "256px"};
13087
13113
  `);
13088
13114
  },
13089
13115
  m(target, anchor) {
@@ -13097,7 +13123,7 @@ function create_fragment(ctx) {
13097
13123
  p(ctx, [dirty]) {
13098
13124
  if (dirty & /*maxcontentwidth, navcolumnwidth*/ 3 && div_style_value !== (div_style_value = `
13099
13125
  --max-content-width: ${/*maxcontentwidth*/ ctx[1] || "100%"};
13100
- --nav-column-width: ${/*navcolumnwidth*/ ctx[0] || "var(--layout-nav-column-width)"};
13126
+ --nav-column-width: ${/*navcolumnwidth*/ ctx[0] || "256px"};
13101
13127
  `)) {
13102
13128
  attr(div, "style", div_style_value);
13103
13129
  }
@@ -13125,7 +13151,7 @@ function instance($$self, $$props, $$invalidate) {
13125
13151
  class TwoColumnLayout extends SvelteElement {
13126
13152
  constructor(options) {
13127
13153
  super();
13128
- 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>`;
13154
+ 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>`;
13129
13155
 
13130
13156
  init(
13131
13157
  this,