@abgov/react-components 4.0.0-alpha.103 → 4.0.0-alpha.104

package/react-components.umd.js

@@ -1067,7 +1067,6 @@
 	}
 	/* libs/web-components/src/components/app-header/AppHeader.svelte generated by Svelte v3.51.0 */
 
-
 	function create_else_block$4(ctx) {
 	  let div;
 	  let img0;
@@ -1303,7 +1302,7 @@
 	class AppHeader extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    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>`;
+	    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>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
@@ -1380,7 +1379,7 @@
 	customElements.define("goa-app-header", AppHeader);
 
 	function calculateMargin(mt, mr, mb, ml) {
-	  return [mt && `margin-top:var(--goa-spacing-${mt});`, mr && `margin-right:var(--goa-spacing-${mr});`, mb && `margin-bottom:var(--goa-spacing-${mb});`, ml && `margin-left:var(--goa-spacing-${ml});`].join(" ");
+	  return [mt && `margin-top:var(--goa-space-${mt});`, mr && `margin-right:var(--goa-space-${mr});`, mb && `margin-bottom:var(--goa-space-${mb});`, ml && `margin-left:var(--goa-space-${ml});`].join(" ");
 	}
 
 	function injectCss(el, rootSelector, css, media) {
@@ -1736,9 +1735,7 @@
 	class Badge extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    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(
-      --font-valign-fix
-    )}.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>`;
+	    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>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
@@ -1883,7 +1880,7 @@
       ctx[5],
       /*ml*/
       ctx[6])}
-    --gap: var(--goa-spacing-${
+    --gap: var(--goa-space-${
       /*gap*/
       ctx[0]});
     --alignment: ${
@@ -1913,7 +1910,7 @@
       ctx[5],
       /*ml*/
       ctx[6])}
-    --gap: var(--goa-spacing-${
+    --gap: var(--goa-space-${
       /*gap*/
       ctx[0]});
     --alignment: ${
@@ -2091,7 +2088,7 @@
 
 	function create_else_block$2(ctx) {
 	  let t0;
-	  let slot;
+	  let span;
 	  let t1;
 	  let if_block1_anchor;
 	  let if_block0 =
@@ -2104,17 +2101,18 @@
 	    c() {
 	      if (if_block0) if_block0.c();
 	      t0 = space();
-	      slot = element("slot");
+	      span = element("span");
+	      span.innerHTML = `<slot></slot>`;
 	      t1 = space();
 	      if (if_block1) if_block1.c();
 	      if_block1_anchor = empty();
-	      attr(slot, "class", "text");
+	      attr(span, "class", "text");
 	    },
 
 	    m(target, anchor) {
 	      if (if_block0) if_block0.m(target, anchor);
 	      insert(target, t0, anchor);
-	      insert(target, slot, anchor);
+	      insert(target, span, anchor);
 	      insert(target, t1, anchor);
 	      if (if_block1) if_block1.m(target, anchor);
 	      insert(target, if_block1_anchor, anchor);
@@ -2155,7 +2153,7 @@
 	    d(detaching) {
 	      if (if_block0) if_block0.d(detaching);
 	      if (detaching) detach(t0);
-	      if (detaching) detach(slot);
+	      if (detaching) detach(span);
 	      if (detaching) detach(t1);
 	      if (if_block1) if_block1.d(detaching);
 	      if (detaching) detach(if_block1_anchor);
@@ -2166,22 +2164,23 @@
 
 
 	function create_if_block$f(ctx) {
-	  let slot;
+	  let span;
 	  let t;
 	  let goa_icon;
 	  return {
 	    c() {
-	      slot = element("slot");
+	      span = element("span");
+	      span.innerHTML = `<slot></slot>`;
 	      t = space();
 	      goa_icon = element("goa-icon");
-	      attr(slot, "class", "text");
+	      attr(span, "class", "text");
 	      set_custom_element_data(goa_icon, "id", "trailing-icon");
 	      set_custom_element_data(goa_icon, "type", "arrow-forward");
 	      set_custom_element_data(goa_icon, "inverted", "true");
 	    },
 
 	    m(target, anchor) {
-	      insert(target, slot, anchor);
+	      insert(target, span, anchor);
 	      insert(target, t, anchor);
 	      insert(target, goa_icon, anchor);
 	    },
@@ -2189,13 +2188,13 @@
 	    p: noop,
 
 	    d(detaching) {
-	      if (detaching) detach(slot);
+	      if (detaching) detach(span);
 	      if (detaching) detach(t);
 	      if (detaching) detach(goa_icon);
 	    }
 
 	  };
-	} // (49:4) {#if leadingicon}
+	} // (51:4) {#if leadingicon}
 
 
 	function create_if_block_2$6(ctx) {
@@ -2239,7 +2238,7 @@
 	    }
 
 	  };
-	} // (53:4) {#if trailingicon}
+	} // (57:4) {#if trailingicon}
 
 
 	function create_if_block_1$9(ctx) {
@@ -2522,10 +2521,8 @@
 	class Button extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    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,
-      border-color 0.2s ease-in-out}.text{padding-bottom:var(
-      --font-valign-fix
-    )}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>`;
+	    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,
+      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>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
@@ -2815,7 +2812,7 @@
 	class ButtonGroup extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    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>`;
+	    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>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
@@ -3146,7 +3143,7 @@
 	class Callout extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    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>`;
+	    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>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
@@ -3331,7 +3328,7 @@
 	      /*ml*/
 	      ctx[6]) + " " + (
 	      /*elevation*/
-	      ctx[0] === 0 ? `border: 1px solid var(--color-gray-200);` : `box-shadow: var(--shadow-${
+	      ctx[0] === 0 ? `border: 1px solid var(--goa-color-greyscale-200);` : `box-shadow: var(--shadow-${
       /*elevation*/
       ctx[0]});`) + "");
 	    },
@@ -3366,7 +3363,7 @@
 	      /*ml*/
 	      ctx[6]) + " " + (
 	      /*elevation*/
-	      ctx[0] === 0 ? `border: 1px solid var(--color-gray-200);` : `box-shadow: var(--shadow-${
+	      ctx[0] === 0 ? `border: 1px solid var(--goa-color-greyscale-200);` : `box-shadow: var(--shadow-${
       /*elevation*/
       ctx[0]});`) + "")) {
 	        attr(div, "style", div_style_value);
@@ -3426,7 +3423,7 @@
 	class Card extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    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>`;
+	    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>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
@@ -3579,7 +3576,7 @@
 	class CardContent extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.card-content{padding:1rem}</style>`;
+	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.card-content{padding:1rem}</style>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
@@ -3626,7 +3623,7 @@
 	class CardGroup extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    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>`;
+	    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>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
@@ -3712,7 +3709,7 @@
 	class CardImage extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}</style>`;
+	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}</style>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
@@ -4178,7 +4175,7 @@
 	class Checkbox extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    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>`;
+	    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>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
@@ -4398,9 +4395,9 @@
 	      set_custom_element_data(goa_icon, "type", "close-circle");
 	      set_custom_element_data(goa_icon, "fillcolor", goa_icon_fillcolor_value =
 	      /*_error*/
-	      ctx[10] ? "var(--goa-color-status-emergency)" :
+	      ctx[10] ? "var(--goa-color-emergency-default)" :
 	      /*_hovering*/
-	      ctx[9] ? "var(--goa-color-interactive--hover)" : "var(--color-gray-600)");
+	      ctx[9] ? "var(--goa-color-interactive-hover)" : "var(--goa-color-greyscale-700)");
 	      set_custom_element_data(goa_icon, "opacity", goa_icon_opacity_value =
 	      /*_error*/
 	      ctx[10] ?
@@ -4417,9 +4414,9 @@
 	      /*_error, _hovering*/
 	      1536 && goa_icon_fillcolor_value !== (goa_icon_fillcolor_value =
 	      /*_error*/
-	      ctx[10] ? "var(--goa-color-status-emergency)" :
+	      ctx[10] ? "var(--goa-color-emergency-default)" :
 	      /*_hovering*/
-	      ctx[9] ? "var(--goa-color-interactive--hover)" : "var(--color-gray-600)")) {
+	      ctx[9] ? "var(--goa-color-interactive-hover)" : "var(--goa-color-greyscale-700)")) {
 	        set_custom_element_data(goa_icon, "fillcolor", goa_icon_fillcolor_value);
 	      }
 
@@ -4719,7 +4716,7 @@
 	class Chip extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    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>`;
+	    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>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
@@ -5470,7 +5467,7 @@
 	class CircularProgress extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    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>`;
+	    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>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
@@ -5735,7 +5732,7 @@
 	class Container extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    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>`;
+	    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>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
@@ -5950,7 +5947,7 @@
 	class Divider extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    this.shadowRoot.innerHTML = `<style>hr{padding:0;margin:0;height:1px;background-color:var(--color-gray-200);border:none}</style>`;
+	    this.shadowRoot.innerHTML = `<style>hr{padding:0;margin:0;height:1px;background-color:var(--goa-color-greyscale-200);border:none}</style>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
@@ -6041,25 +6038,25 @@
 
 	function get_each_context_1(ctx, list, i) {
 	  const child_ctx = ctx.slice();
-	  child_ctx[48] = list[i];
-	  child_ctx[52] = i;
+	  child_ctx[49] = list[i];
+	  child_ctx[53] = i;
 	  return child_ctx;
 	}
 
 	function get_each_context$4(ctx, list, i) {
 	  const child_ctx = ctx.slice();
-	  child_ctx[48] = list[i];
+	  child_ctx[49] = list[i];
 	  return child_ctx;
-	} // (244:2) {:else}
+	} // (256:2) {:else}
 
 
 	function create_else_block$1(ctx) {
 	  let t0;
-	  let slot;
-	  let t1;
 	  let goa_input;
-	  let goa_input_aria_label_value;
+	  let goa_input_arialabel_value;
 	  let goa_input_data_testid_value;
+	  let t1;
+	  let slot;
 	  let t2;
 	  let ul;
 	  let each_blocks = [];
@@ -6076,7 +6073,7 @@
 
 	  const get_key = ctx =>
 	  /*index*/
-	  ctx[52];
+	  ctx[53];
 
 	  for (let i = 0; i < each_value_1.length; i += 1) {
 	    let child_ctx = get_each_context_1(ctx, each_value_1, i);
@@ -6088,9 +6085,9 @@
 	    c() {
 	      if (if_block) if_block.c();
 	      t0 = space();
-	      slot = element("slot");
-	      t1 = space();
 	      goa_input = element("goa-input");
+	      t1 = space();
+	      slot = element("slot");
 	      t2 = space();
 	      ul = element("ul");
 
@@ -6114,7 +6111,7 @@
 	      set_custom_element_data(goa_input, "aria-expanded",
 	      /*_isMenuVisible*/
 	      ctx[15]);
-	      set_custom_element_data(goa_input, "aria-label", goa_input_aria_label_value =
+	      set_custom_element_data(goa_input, "arialabel", goa_input_arialabel_value =
 	      /*arialabel*/
 	      ctx[1] ||
 	      /*name*/
@@ -6130,6 +6127,9 @@
 	      /*_selectedLabel*/
 	      ctx[14]);
 	      set_custom_element_data(goa_input, "width", "100%");
+	      set_custom_element_data(goa_input, "name",
+	      /*name*/
+	      ctx[0]);
 	      attr(ul, "id", "menu");
 	      attr(ul, "role", "listbox");
 	      attr(ul, "aria-activedescendant",
@@ -6149,9 +6149,9 @@
 	    m(target, anchor) {
 	      if (if_block) if_block.m(target, anchor);
 	      insert(target, t0, anchor);
-	      insert(target, slot, anchor);
-	      insert(target, t1, anchor);
 	      insert(target, goa_input, anchor);
+	      insert(target, t1, anchor);
+	      insert(target, slot, anchor);
 	      insert(target, t2, anchor);
 	      insert(target, ul, anchor);
 
@@ -6229,12 +6229,12 @@
 
 	      if (dirty[0] &
 	      /*arialabel, name*/
-	      3 && goa_input_aria_label_value !== (goa_input_aria_label_value =
+	      3 && goa_input_arialabel_value !== (goa_input_arialabel_value =
 	      /*arialabel*/
 	      ctx[1] ||
 	      /*name*/
 	      ctx[0])) {
-	        set_custom_element_data(goa_input, "aria-label", goa_input_aria_label_value);
+	        set_custom_element_data(goa_input, "arialabel", goa_input_arialabel_value);
 	      }
 
 	      if (dirty[0] &
@@ -6253,6 +6253,14 @@
 	        ctx[14]);
 	      }
 
+	      if (dirty[0] &
+	      /*name*/
+	      1) {
+	        set_custom_element_data(goa_input, "name",
+	        /*name*/
+	        ctx[0]);
+	      }
+
 	      if (dirty[0] &
 	      /*_options, _values, _highlightedIndex, onSelect*/
 	      67186688) {
@@ -6290,9 +6298,9 @@
 	    d(detaching) {
 	      if (if_block) if_block.d(detaching);
 	      if (detaching) detach(t0);
-	      if (detaching) detach(slot);
-	      if (detaching) detach(t1);
 	      if (detaching) detach(goa_input);
+	      if (detaching) detach(t1);
+	      if (detaching) detach(slot);
 	      if (detaching) detach(t2);
 	      if (detaching) detach(ul);
 
@@ -6308,7 +6316,7 @@
 	    }
 
 	  };
-	} // (225:2) {#if _native}
+	} // (237:2) {#if _native}
 
 
 	function create_if_block$a(ctx) {
@@ -6434,7 +6442,7 @@
 	    }
 
 	  };
-	} // (245:4) {#if _isMenuVisible}
+	} // (257:4) {#if _isMenuVisible}
 
 
 	function create_if_block_1$5(ctx) {
@@ -6479,16 +6487,16 @@
 	    }
 
 	  };
-	} // (287:6) {#each _options as option, index (index)}
+	} // (300:6) {#each _options as option, index (index)}
 
 
 	function create_each_block_1(key_1, ctx) {
 	  let li;
 	  let t0_value = (
 	  /*option*/
-	  ctx[48].label ||
+	  ctx[49].label ||
 	  /*option*/
-	  ctx[48].value) + "";
+	  ctx[49].value) + "";
 	  let t0;
 	  let t1;
 	  let li_id_value;
@@ -6506,7 +6514,7 @@
 	      /*click_handler*/
 	      ctx[32](
 	      /*option*/
-	      ctx[48])
+	      ctx[49])
 	    );
 	  }
 
@@ -6520,40 +6528,40 @@
 	      t1 = space();
 	      attr(li, "id", li_id_value =
 	      /*option*/
-	      ctx[48].label);
+	      ctx[49].label);
 	      attr(li, "role", "option");
 	      attr(li, "aria-label", li_aria_label_value =
 	      /*option*/
-	      ctx[48].label ||
+	      ctx[49].label ||
 	      /*option*/
-	      ctx[48].value);
+	      ctx[49].value);
 	      attr(li, "aria-selected", li_aria_selected_value =
 	      /*_values*/
 	      ctx[12].includes(
 	      /*option*/
-	      ctx[48].value) ? "true" : "false");
+	      ctx[49].value) ? "true" : "false");
 	      attr(li, "class", "dropdown-item");
 	      attr(li, "data-testid", li_data_testid_value = `dropdown-item-${
       /*option*/
-      ctx[48].value}`);
+      ctx[49].value}`);
 	      attr(li, "data-index", li_data_index_value =
 	      /*index*/
-	      ctx[52]);
+	      ctx[53]);
 	      attr(li, "data-value", li_data_value_value =
 	      /*option*/
-	      ctx[48].value);
+	      ctx[49].value);
 	      attr(li, "style", li_style_value = `display: ${"block"}`);
 	      toggle_class(li, "dropdown-item--disabled", false);
 	      toggle_class(li, "dropdown-item--tabbed",
 	      /*index*/
-	      ctx[52] ===
+	      ctx[53] ===
 	      /*_highlightedIndex*/
 	      ctx[16]);
 	      toggle_class(li, "dropdown-item--selected",
 	      /*_values*/
 	      ctx[12].includes(
 	      /*option*/
-	      ctx[48].value));
+	      ctx[49].value));
 	      this.first = li;
 	    },
 
@@ -6574,15 +6582,15 @@
 	      /*_options*/
 	      8192 && t0_value !== (t0_value = (
 	      /*option*/
-	      ctx[48].label ||
+	      ctx[49].label ||
 	      /*option*/
-	      ctx[48].value) + "")) set_data(t0, t0_value);
+	      ctx[49].value) + "")) set_data(t0, t0_value);
 
 	      if (dirty[0] &
 	      /*_options*/
 	      8192 && li_id_value !== (li_id_value =
 	      /*option*/
-	      ctx[48].label)) {
+	      ctx[49].label)) {
 	        attr(li, "id", li_id_value);
 	      }
 
@@ -6590,9 +6598,9 @@
 	      /*_options*/
 	      8192 && li_aria_label_value !== (li_aria_label_value =
 	      /*option*/
-	      ctx[48].label ||
+	      ctx[49].label ||
 	      /*option*/
-	      ctx[48].value)) {
+	      ctx[49].value)) {
 	        attr(li, "aria-label", li_aria_label_value);
 	      }
 
@@ -6602,7 +6610,7 @@
 	      /*_values*/
 	      ctx[12].includes(
 	      /*option*/
-	      ctx[48].value) ? "true" : "false")) {
+	      ctx[49].value) ? "true" : "false")) {
 	        attr(li, "aria-selected", li_aria_selected_value);
 	      }
 
@@ -6610,7 +6618,7 @@
 	      /*_options*/
 	      8192 && li_data_testid_value !== (li_data_testid_value = `dropdown-item-${
       /*option*/
-      ctx[48].value}`)) {
+      ctx[49].value}`)) {
 	        attr(li, "data-testid", li_data_testid_value);
 	      }
 
@@ -6618,7 +6626,7 @@
 	      /*_options*/
 	      8192 && li_data_index_value !== (li_data_index_value =
 	      /*index*/
-	      ctx[52])) {
+	      ctx[53])) {
 	        attr(li, "data-index", li_data_index_value);
 	      }
 
@@ -6626,7 +6634,7 @@
 	      /*_options*/
 	      8192 && li_data_value_value !== (li_data_value_value =
 	      /*option*/
-	      ctx[48].value)) {
+	      ctx[49].value)) {
 	        attr(li, "data-value", li_data_value_value);
 	      }
 
@@ -6635,7 +6643,7 @@
 	      73728) {
 	        toggle_class(li, "dropdown-item--tabbed",
 	        /*index*/
-	        ctx[52] ===
+	        ctx[53] ===
 	        /*_highlightedIndex*/
 	        ctx[16]);
 	      }
@@ -6647,7 +6655,7 @@
 	        /*_values*/
 	        ctx[12].includes(
 	        /*option*/
-	        ctx[48].value));
+	        ctx[49].value));
 	      }
 	    },
 
@@ -6658,14 +6666,14 @@
 	    }
 
 	  };
-	} // (234:6) {#each _options as option}
+	} // (246:6) {#each _options as option}
 
 
 	function create_each_block$4(ctx) {
 	  let option;
 	  let t0_value =
 	  /*option*/
-	  ctx[48].label + "";
+	  ctx[49].label + "";
 	  let t0;
 	  let t1;
 	  let option_selected_value;
@@ -6678,14 +6686,14 @@
 	      t1 = space();
 	      option.selected = option_selected_value =
 	      /*option*/
-	      ctx[48].selected;
+	      ctx[49].selected;
 	      option.__value = option_value_value =
 	      /*option*/
-	      ctx[48].value;
+	      ctx[49].value;
 	      option.value = option.__value;
 	      attr(option, "aria-label", option_aria_label_value =
 	      /*option*/
-	      ctx[48].label);
+	      ctx[49].label);
 	    },
 
 	    m(target, anchor) {
@@ -6699,13 +6707,13 @@
 	      /*_options*/
 	      8192 && t0_value !== (t0_value =
 	      /*option*/
-	      ctx[48].label + "")) set_data(t0, t0_value);
+	      ctx[49].label + "")) set_data(t0, t0_value);
 
 	      if (dirty[0] &
 	      /*_options*/
 	      8192 && option_selected_value !== (option_selected_value =
 	      /*option*/
-	      ctx[48].selected)) {
+	      ctx[49].selected)) {
 	        option.selected = option_selected_value;
 	      }
 
@@ -6713,7 +6721,7 @@
 	      /*_options*/
 	      8192 && option_value_value !== (option_value_value =
 	      /*option*/
-	      ctx[48].value)) {
+	      ctx[49].value)) {
 	        option.__value = option_value_value;
 	        option.value = option.__value;
 	      }
@@ -6722,7 +6730,7 @@
 	      /*_options*/
 	      8192 && option_aria_label_value !== (option_aria_label_value =
 	      /*option*/
-	      ctx[48].label)) {
+	      ctx[49].label)) {
 	        attr(option, "aria-label", option_aria_label_value);
 	      }
 	    },
@@ -6851,20 +6859,6 @@
 	  };
 	}
 
-	function getCustomDropdownWidth(options) {
-	  let width;
-	  let maxCount = 0;
-	  options.forEach(option => {
-	    const label = option.label || option.value || "";
-
-	    if (!width && maxCount < label.length) {
-	      maxCount = label.length;
-	      width = `${Math.max(20, maxCount + 12)}ch`;
-	    }
-	  });
-	  return width;
-	}
-
 	function instance$m($$self, $$props, $$invalidate) {
 	  const showMenu = _async(function () {
 	    if (_disabled || _isMenuVisible) {
@@ -6958,7 +6952,16 @@
 	        $$invalidate(17, _computedWidth = getCustomDropdownWidth(_options));
 	        addKeyboardEventListeners();
 	        setHighlightedIndexToSelected();
-	      }
+	      } // watch for DOM changes within the slot => dynamic binding
+
+
+	      const slot = _el.querySelector("slot");
+
+	      slot === null || slot === void 0 ? void 0 : slot.addEventListener("slotchange", _e => {
+	        $$invalidate(14, _selectedLabel = "");
+	        $$invalidate(12, _values = parseValues());
+	        $$invalidate(13, _options = getOptions());
+	      });
 	    });
 	  });
 	  onDestroy(() => {
@@ -6983,7 +6986,7 @@
 
 	  function getOptions() {
 	    const children = getChildren();
-	    return children.map(el => {
+	    return children.filter(child => child.tagName === "GOA-DROPDOWN-ITEM").map(el => {
 	      const option = el;
 	      const value = el.getAttribute("value") || option.value;
 	      const label = el.getAttribute("label") || option.label || value;
@@ -7001,6 +7004,26 @@
 	        label
 	      };
 	    });
+	  } // compute the required width to enure all children fit
+
+
+	  function getCustomDropdownWidth(options) {
+	    let width;
+	    let maxCount = 0;
+
+	    if (options.length === 0 && placeholder !== "") {
+	      return `${placeholder.length + 12}ch`;
+	    }
+
+	    options.forEach(option => {
+	      const label = option.label || option.value || "";
+
+	      if (!width && maxCount < label.length) {
+	        maxCount = label.length;
+	        width = `${Math.max(20, maxCount + 12)}ch`;
+	      }
+	    });
+	    return width;
 	  }
 
 	  function addKeyboardEventListeners() {
@@ -7223,7 +7246,7 @@
 	class Dropdown extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    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>`;
+	    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>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
@@ -7927,7 +7950,7 @@
 	class Footer extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    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>`;
+	    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>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
@@ -8140,7 +8163,7 @@
 	class FooterMetaSection extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    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>`;
+	    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>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
@@ -8449,7 +8472,7 @@
 	class FooterNavSection extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    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>`;
+	    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>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
@@ -8872,7 +8895,7 @@
 	class FormItem extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    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>`;
+	    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>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
@@ -9032,7 +9055,7 @@
     --min-child-width: ${
       /*minchildwidth*/
       ctx[1] || 0};
-    gap: var(--goa-spacing-${
+    gap: var(--goa-space-${
       /*gap*/
       ctx[0]})
   `);
@@ -9059,7 +9082,7 @@
     --min-child-width: ${
       /*minchildwidth*/
       ctx[1] || 0};
-    gap: var(--goa-spacing-${
+    gap: var(--goa-space-${
       /*gap*/
       ctx[0]})
   `)) {
@@ -9117,7 +9140,7 @@
 	class Grid extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    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>`;
+	    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>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
@@ -9326,7 +9349,7 @@
 	class HeroBanner extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    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>`;
+	    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>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
@@ -9663,7 +9686,7 @@
 	class IconButton extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    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>`;
+	    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>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
@@ -11114,7 +11137,7 @@
 	class Input extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    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>')
+	    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>')
       center center no-repeat}</style>`;
 	    init(this, {
 	      target: this.shadowRoot,
@@ -11775,7 +11798,7 @@
 	class MicrositeHeader extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    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>`;
+	    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>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
@@ -12395,7 +12418,7 @@
 	class Modal extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    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>`;
+	    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>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
@@ -12718,7 +12741,7 @@
 	class Notification extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    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>`;
+	    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>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
@@ -12841,7 +12864,7 @@
 	class PageBlock extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    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>`;
+	    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>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
@@ -13345,9 +13368,9 @@
 	class RadioGroup extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    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
-      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
-      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>`;
+	    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
+      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
+      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>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
@@ -14305,7 +14328,7 @@
 	class Skeleton extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    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>`;
+	    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>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
@@ -14481,8 +14504,8 @@
 	  let rootEl;
 	  onMount(() => {
 	    injectCss(rootEl, ":host", {
-	      width: `var(--goa-spacing-${hspacing})`,
-	      height: `var(--goa-spacing-${vspacing})`
+	      width: `var(--goa-space-${hspacing})`,
+	      height: `var(--goa-space-${vspacing})`
 	    });
 	  });
 
@@ -14763,7 +14786,7 @@
 	      ctx[3]);
 	      attr(circle, "stroke", circle_stroke_value =
 	      /*invert*/
-	      ctx[0] ? "var(--goa-color-primary-dark)" : "var(--goa-color-brand-light)");
+	      ctx[0] ? "var(--goa-color-info-hover)" : "var(--goa-color-brand-light)");
 	      attr(circle, "stroke-width",
 	      /*strokewidth*/
 	      ctx[4]);
@@ -14782,7 +14805,7 @@
 	      ctx[4]);
 	      attr(path, "stroke", path_stroke_value =
 	      /*invert*/
-	      ctx[0] ? "var(--goa-color-brand-light)" : "var(--goa-color-primary)");
+	      ctx[0] ? "var(--goa-color-brand-light)" : "var(--goa-color-info-default)");
 	      attr(path, "stroke-linecap", "round");
 	      attr(svg, "class", svg_class_value = `spinner-${
       /*type*/
@@ -14832,7 +14855,7 @@
 	      /*invert*/
 	      1 && circle_stroke_value !== (circle_stroke_value =
 	      /*invert*/
-	      ctx[0] ? "var(--goa-color-primary-dark)" : "var(--goa-color-brand-light)")) {
+	      ctx[0] ? "var(--goa-color-info-hover)" : "var(--goa-color-brand-light)")) {
 	        attr(circle, "stroke", circle_stroke_value);
 	      }
 
@@ -14876,7 +14899,7 @@
 	      /*invert*/
 	      1 && path_stroke_value !== (path_stroke_value =
 	      /*invert*/
-	      ctx[0] ? "var(--goa-color-brand-light)" : "var(--goa-color-primary)")) {
+	      ctx[0] ? "var(--goa-color-brand-light)" : "var(--goa-color-info-default)")) {
 	        attr(path, "stroke", path_stroke_value);
 	      }
 
@@ -15101,7 +15124,7 @@
 	class Spinner extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    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>`;
+	    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>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
@@ -15354,7 +15377,7 @@
 	class Table extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    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>`;
+	    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>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
@@ -15759,8 +15782,8 @@
 	class TextArea extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    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)
-  }.error:hover,.error:focus,.error{border:2px solid var(--goa-color-interactive--error)}</style>`;
+	    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)
+  }.error:hover,.error:focus,.error{border:2px solid var(--goa-color-interactive-error)}</style>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
@@ -16003,12 +16026,12 @@
 	class FullScreenNavbarLayout extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    this.shadowRoot.innerHTML = `<style>.page{height:100vh;grid-template-columns:auto;grid-template-rows:min-content auto min-content;grid-template-areas:"header"  
+	    this.shadowRoot.innerHTML = `<style>.page{height:100vh;grid-template-columns:auto;grid-template-rows:min-content auto min-content;grid-template-areas:"header"
       "content"
       "nav"
-      "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"  
+      "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"
         "nav content"
-        "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>`;
+        "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>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
@@ -16110,7 +16133,7 @@
       ctx[1] || "100%"};
     --nav-column-width: ${
       /*navcolumnwidth*/
-      ctx[0] || "var(--layout-nav-column-width)"};
+      ctx[0] || "256px"};
   `);
 	    },
 
@@ -16132,7 +16155,7 @@
       ctx[1] || "100%"};
     --nav-column-width: ${
       /*navcolumnwidth*/
-      ctx[0] || "var(--layout-nav-column-width)"};
+      ctx[0] || "256px"};
   `)) {
 	        attr(div, "style", div_style_value);
 	      }
@@ -16167,7 +16190,7 @@
 	class TwoColumnLayout extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    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>`;
+	    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>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),