@abgov/react-components 4.7.0 → 4.8.0

package/react-components.esm.js

@@ -1428,7 +1428,7 @@ class Accordion extends SvelteElement {
   constructor(options) {
     super();
     this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans);font-size:var(--goa-font-size-4)}.goa-accordion,.goa-accordion *{box-sizing:border-box}summary{min-height:3.5rem;border-width:var(--goa-border-width-s);border-style:solid;border-radius:var(--goa-border-radius-m);background-color:var(--goa-color-greyscale-100);border-color:var(--goa-color-greyscale-200);color:var(--goa-color-text-default);;;padding:0.875rem 1rem 0 0;cursor:pointer;list-style:none;display:flex;align-items:flex-start;position:relative}summary.container-medium{min-height:4rem}summary::marker,summary::-webkit-details-marker{display:none}summary .title{display:flex;align-items:center;flex:1}.title span{padding-bottom:var(--goa-space-3xs, 0)}summary .heading{font:var(--goa-typography-heading-s);padding-right:1rem}summary .secondary-text{font:var(--goa-typography-body-s);line-height:1.5rem;padding-right:1rem}summary .heading-content{flex:1
-  }.content{border-bottom:var(--goa-border-width-s) solid var(--goa-color-greyscale-200);border-left:var(--goa-border-width-s) solid var(--goa-color-greyscale-200);border-right:var(--goa-border-width-s) solid var(--goa-color-greyscale-200);border-bottom-left-radius:var(--goa-border-radius-m);border-bottom-right-radius:var(--goa-border-radius-m);padding:1.5rem;padding-left:3.5rem;padding-right:2rem}summary goa-icon{padding:0.125rem 1rem}summary.container-medium goa-icon{padding:0.375rem 1rem}details[open] goa-icon{transform:rotate(90deg)}details[open] summary{border-bottom-left-radius:var(--goa-border-radius-none);border-bottom-right-radius:var(--goa-border-radius-none)}summary:hover{background-color:var(--goa-color-greyscale-200)}summary:focus,summary:active{background-color:var(--goa-color-greyscale-100);outline:none}summary:active::before,summary:focus::before{content:"";position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;border:var(--goa-border-width-l) solid var(--goa-color-interactive-focus);border-radius:4px}summary .heading.heading-medium{line-height:2rem;font:var(--goa-typography-heading-m)}@media(max-width: 640px){summary{align-items:flex-start}summary .title{flex-direction:column;align-items:flex-start}}</style>`;
+  }.content{border-bottom:var(--goa-border-width-s) solid var(--goa-color-greyscale-200);border-left:var(--goa-border-width-s) solid var(--goa-color-greyscale-200);border-right:var(--goa-border-width-s) solid var(--goa-color-greyscale-200);border-bottom-left-radius:var(--goa-border-radius-m);border-bottom-right-radius:var(--goa-border-radius-m);padding:1.5rem;padding-left:3.5rem;padding-right:2rem}.content ::slotted(p:last-child){margin-bottom:0 !important}summary goa-icon{padding:0.125rem 1rem}summary.container-medium goa-icon{padding:0.375rem 1rem}details[open] goa-icon{transform:rotate(90deg)}details[open] summary{border-bottom-left-radius:var(--goa-border-radius-none);border-bottom-right-radius:var(--goa-border-radius-none)}summary:hover{background-color:var(--goa-color-greyscale-200)}summary:focus,summary:active{background-color:var(--goa-color-greyscale-100);outline:none}summary:active::before,summary:focus::before{content:"";position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;border:var(--goa-border-width-l) solid var(--goa-color-interactive-focus);border-radius:4px}summary .heading.heading-medium{line-height:2rem;font:var(--goa-typography-heading-m)}@media(max-width: 640px){summary{align-items:flex-start}summary .title{flex-direction:column;align-items:flex-start}}</style>`;
     init(this, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
@@ -2176,7 +2176,7 @@ function instance$F($$self, $$props, $$invalidate) {
 class Badge extends SvelteElement {
   constructor(options) {
     super();
-    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>`;
+    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{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),
@@ -6175,7 +6175,7 @@ function instance$v($$self, $$props, $$invalidate) {
 class Container extends SvelteElement {
   constructor(options) {
     super();
-    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>`;
+    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)}.content ::slotted(p:last-child){margin-bottom:0 !important}.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),
@@ -6455,7 +6455,7 @@ function instance$u($$self, $$props, $$invalidate) {
 class Details extends SvelteElement {
   constructor(options) {
     super();
-    this.shadowRoot.innerHTML = `<style>:host{font-family:var(--goa-font-family-sans)}details{max-width:75ch;position:relative}details ::slotted(*){font:var(--goa-typography-body-m)}summary{padding:0.5rem;margin-bottom:0.5rem;cursor:pointer;list-style:none;display:flex;align-items:flex-start}goa-icon{position:absolute}details[open] goa-icon{transform:translateX(-1px) rotate(90deg);top:0.75rem}details summary::-webkit-details-marker{display:none}summary{border-radius:var(--goa-border-radius-m)}summary:focus,summary:active{outline:3px solid var(--goa-color-interactive-focus);border-radius:var(--goa-border-radius-m);color:var(--goa-color-interactive-hover);background-color:var(--goa-color-greyscale-100)}summary:hover{background-color:var(--goa-color-greyscale-100)}summary span{margin-left:2rem;text-decoration:underline;color:var(--goa-color-interactive-default);padding-bottom:var(--font-valign-fix);line-height:var(--goa-line-height-3)}summary:hover span{color:var(--goa-color-interactive-hover)}.content{border-left:4px solid var(--goa-color-greyscale-200);padding:1rem;margin-left:1.1rem;margin-bottom:var(--goa-space-s)}</style>`;
+    this.shadowRoot.innerHTML = `<style>:host{font-family:var(--goa-font-family-sans)}details{max-width:75ch;position:relative}details ::slotted(*){font:var(--goa-typography-body-m)}summary{padding:0.5rem;margin-bottom:0.5rem;cursor:pointer;list-style:none;display:flex;align-items:flex-start}goa-icon{position:absolute}details[open] goa-icon{transform:translateX(-1px) rotate(90deg);top:0.75rem}details summary::-webkit-details-marker{display:none}summary{border-radius:var(--goa-border-radius-m)}summary:focus,summary:active{outline:3px solid var(--goa-color-interactive-focus);border-radius:var(--goa-border-radius-m);color:var(--goa-color-interactive-hover);background-color:var(--goa-color-greyscale-100)}summary:hover{background-color:var(--goa-color-greyscale-100)}summary span{margin-left:2rem;text-decoration:underline;color:var(--goa-color-interactive-default);padding-bottom:var(--font-valign-fix);line-height:var(--goa-line-height-3)}summary:hover span{color:var(--goa-color-interactive-hover)}.content{border-left:4px solid var(--goa-color-greyscale-200);padding:1rem;margin-left:1.1rem;margin-bottom:var(--goa-space-s)}.content ::slotted(p:last-child){margin-bottom:0 !important}</style>`;
     init(this, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
@@ -6725,16 +6725,16 @@ customElements.define("goa-divider", Divider);
 
 function get_each_context_1(ctx, list, i) {
   const child_ctx = ctx.slice();
-  child_ctx[49] = list[i];
-  child_ctx[53] = i;
+  child_ctx[50] = list[i];
+  child_ctx[54] = i;
   return child_ctx;
 }
 
-function get_each_context$4(ctx, list, i) {
+function get_each_context$5(ctx, list, i) {
   const child_ctx = ctx.slice();
-  child_ctx[49] = list[i];
+  child_ctx[50] = list[i];
   return child_ctx;
-} // (256:2) {:else}
+} // (270:2) {:else}
 
 
 function create_else_block$5(ctx) {
@@ -6753,14 +6753,14 @@ function create_else_block$5(ctx) {
   let dispose;
   let if_block =
   /*_isMenuVisible*/
-  ctx[15] && create_if_block_1$7(ctx);
+  ctx[17] && create_if_block_1$7(ctx);
   let each_value_1 =
   /*_options*/
-  ctx[13];
+  ctx[12];
 
   const get_key = ctx =>
   /*index*/
-  ctx[53];
+  ctx[54];
 
   for (let i = 0; i < each_value_1.length; i += 1) {
     let child_ctx = get_each_context_1(ctx, each_value_1, i);
@@ -6797,7 +6797,7 @@ function create_else_block$5(ctx) {
       set_custom_element_data(goa_input, "aria-controls", "menu");
       set_custom_element_data(goa_input, "aria-expanded",
       /*_isMenuVisible*/
-      ctx[15]);
+      ctx[17]);
       set_custom_element_data(goa_input, "arialabel", goa_input_arialabel_value =
       /*arialabel*/
       ctx[1] ||
@@ -6812,7 +6812,7 @@ function create_else_block$5(ctx) {
       set_custom_element_data(goa_input, "type", "text");
       set_custom_element_data(goa_input, "value",
       /*_selectedLabel*/
-      ctx[14]);
+      ctx[16]);
       set_custom_element_data(goa_input, "width", "100%");
       set_custom_element_data(goa_input, "name",
       /*name*/
@@ -6821,16 +6821,22 @@ function create_else_block$5(ctx) {
       attr(ul, "role", "listbox");
       attr(ul, "aria-activedescendant",
       /*_selectedLabel*/
-      ctx[14]);
+      ctx[16]);
       attr(ul, "data-testid", "dropdown-menu");
       attr(ul, "tabindex", "0");
       attr(ul, "class", "dropdown-list");
-      attr(ul, "style", ul_style_value = `overflow-y: auto; max-height: ${
+      attr(ul, "style", ul_style_value = `
+        overflow-y: auto;
+        max-height: ${
       /*maxheight*/
-      ctx[3]}`);
+      ctx[3]};
+        --bottom: ${
+      /*_dropdownMenuPos*/
+      ctx[20]};
+      `);
       toggle_class(ul, "dropdown-active",
       /*_isMenuVisible*/
-      ctx[15]);
+      ctx[17]);
     },
 
     m(target, anchor) {
@@ -6848,12 +6854,12 @@ function create_else_block$5(ctx) {
       /*ul_binding*/
 
 
-      ctx[33](ul);
+      ctx[34](ul);
 
       if (!mounted) {
         dispose = listen(goa_input, "click",
         /*showMenu*/
-        ctx[24]);
+        ctx[25]);
         mounted = true;
       }
     },
@@ -6861,7 +6867,7 @@ function create_else_block$5(ctx) {
     p(ctx, dirty) {
       if (
       /*_isMenuVisible*/
-      ctx[15]) {
+      ctx[17]) {
         if (if_block) {
           if_block.p(ctx, dirty);
         } else {
@@ -6908,10 +6914,10 @@ function create_else_block$5(ctx) {
 
       if (dirty[0] &
       /*_isMenuVisible*/
-      32768) {
+      131072) {
         set_custom_element_data(goa_input, "aria-expanded",
         /*_isMenuVisible*/
-        ctx[15]);
+        ctx[17]);
       }
 
       if (dirty[0] &
@@ -6934,10 +6940,10 @@ function create_else_block$5(ctx) {
 
       if (dirty[0] &
       /*_selectedLabel*/
-      16384) {
+      65536) {
         set_custom_element_data(goa_input, "value",
         /*_selectedLabel*/
-        ctx[14]);
+        ctx[16]);
       }
 
       if (dirty[0] &
@@ -6950,35 +6956,41 @@ function create_else_block$5(ctx) {
 
       if (dirty[0] &
       /*_options, _values, _highlightedIndex, onSelect*/
-      67186688) {
+      134516736) {
         each_value_1 =
         /*_options*/
-        ctx[13];
+        ctx[12];
         each_blocks = update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value_1, each_1_lookup, ul, destroy_block, create_each_block_1, null, get_each_context_1);
       }
 
       if (dirty[0] &
       /*_selectedLabel*/
-      16384) {
+      65536) {
         attr(ul, "aria-activedescendant",
         /*_selectedLabel*/
-        ctx[14]);
+        ctx[16]);
       }
 
       if (dirty[0] &
+      /*maxheight, _dropdownMenuPos*/
+      1048584 && ul_style_value !== (ul_style_value = `
+        overflow-y: auto;
+        max-height: ${
       /*maxheight*/
-      8 && ul_style_value !== (ul_style_value = `overflow-y: auto; max-height: ${
-      /*maxheight*/
-      ctx[3]}`)) {
+      ctx[3]};
+        --bottom: ${
+      /*_dropdownMenuPos*/
+      ctx[20]};
+      `)) {
         attr(ul, "style", ul_style_value);
       }
 
       if (dirty[0] &
       /*_isMenuVisible*/
-      32768) {
+      131072) {
         toggle_class(ul, "dropdown-active",
         /*_isMenuVisible*/
-        ctx[15]);
+        ctx[17]);
       }
     },
 
@@ -6997,13 +7009,13 @@ function create_else_block$5(ctx) {
       /*ul_binding*/
 
 
-      ctx[33](null);
+      ctx[34](null);
       mounted = false;
       dispose();
     }
 
   };
-} // (237:2) {#if _native}
+} // (251:2) {#if _native}
 
 
 function create_if_block$f(ctx) {
@@ -7014,11 +7026,11 @@ function create_if_block$f(ctx) {
   let dispose;
   let each_value =
   /*_options*/
-  ctx[13];
+  ctx[12];
   let each_blocks = [];
 
   for (let i = 0; i < each_value.length; i += 1) {
-    each_blocks[i] = create_each_block$4(get_each_context$4(ctx, each_value, i));
+    each_blocks[i] = create_each_block$5(get_each_context$5(ctx, each_value, i));
   }
 
   return {
@@ -7032,7 +7044,7 @@ function create_if_block$f(ctx) {
 
       select.disabled =
       /*_disabled*/
-      ctx[21];
+      ctx[23];
       attr(select, "aria-label", select_aria_label_value =
       /*arialabel*/
       ctx[1] ||
@@ -7040,7 +7052,7 @@ function create_if_block$f(ctx) {
       ctx[0]);
       toggle_class(select, "error",
       /*_error*/
-      ctx[23]);
+      ctx[24]);
     },
 
     m(target, anchor) {
@@ -7053,12 +7065,12 @@ function create_if_block$f(ctx) {
       /*select_binding*/
 
 
-      ctx[31](select);
+      ctx[32](select);
 
       if (!mounted) {
         dispose = listen(select, "change",
         /*onNativeSelect*/
-        ctx[27]);
+        ctx[28]);
         mounted = true;
       }
     },
@@ -7066,19 +7078,19 @@ function create_if_block$f(ctx) {
     p(ctx, dirty) {
       if (dirty[0] &
       /*_options*/
-      8192) {
+      4096) {
         each_value =
         /*_options*/
-        ctx[13];
+        ctx[12];
         let i;
 
         for (i = 0; i < each_value.length; i += 1) {
-          const child_ctx = get_each_context$4(ctx, each_value, i);
+          const child_ctx = get_each_context$5(ctx, each_value, i);
 
           if (each_blocks[i]) {
             each_blocks[i].p(child_ctx, dirty);
           } else {
-            each_blocks[i] = create_each_block$4(child_ctx);
+            each_blocks[i] = create_each_block$5(child_ctx);
             each_blocks[i].c();
             each_blocks[i].m(select, null);
           }
@@ -7093,10 +7105,10 @@ function create_if_block$f(ctx) {
 
       if (dirty[0] &
       /*_disabled*/
-      2097152) {
+      8388608) {
         select.disabled =
         /*_disabled*/
-        ctx[21];
+        ctx[23];
       }
 
       if (dirty[0] &
@@ -7111,10 +7123,10 @@ function create_if_block$f(ctx) {
 
       if (dirty[0] &
       /*_error*/
-      8388608) {
+      16777216) {
         toggle_class(select, "error",
         /*_error*/
-        ctx[23]);
+        ctx[24]);
       }
     },
 
@@ -7123,18 +7135,19 @@ function create_if_block$f(ctx) {
       destroy_each(each_blocks, detaching);
       /*select_binding*/
 
-      ctx[31](null);
+      ctx[32](null);
       mounted = false;
       dispose();
     }
 
   };
-} // (257:4) {#if _isMenuVisible}
+} // (271:4) {#if _isMenuVisible}
 
 
 function create_if_block_1$7(ctx) {
   let div;
   let div_data_testid_value;
+  let noscroll_action;
   let mounted;
   let dispose;
   return {
@@ -7150,9 +7163,13 @@ function create_if_block_1$7(ctx) {
       insert(target, div, anchor);
 
       if (!mounted) {
-        dispose = listen(div, "click",
+        dispose = [listen(div, "click",
         /*closeMenu*/
-        ctx[25]);
+        ctx[26]), action_destroyer(noscroll_action = noscroll.call(null, div, {
+          enable:
+          /*_isMenuVisible*/
+          ctx[17]
+        }))];
         mounted = true;
       }
     },
@@ -7165,25 +7182,33 @@ function create_if_block_1$7(ctx) {
       ctx[0]}-dropdown-background`)) {
         attr(div, "data-testid", div_data_testid_value);
       }
+
+      if (noscroll_action && is_function(noscroll_action.update) && dirty[0] &
+      /*_isMenuVisible*/
+      131072) noscroll_action.update.call(null, {
+        enable:
+        /*_isMenuVisible*/
+        ctx[17]
+      });
     },
 
     d(detaching) {
       if (detaching) detach(div);
       mounted = false;
-      dispose();
+      run_all(dispose);
     }
 
   };
-} // (300:6) {#each _options as option, index (index)}
+} // (319:6) {#each _options as option, index (index)}
 
 
 function create_each_block_1(key_1, ctx) {
   let li;
   let t0_value = (
   /*option*/
-  ctx[49].label ||
+  ctx[50].label ||
   /*option*/
-  ctx[49].value) + "";
+  ctx[50].value) + "";
   let t0;
   let t1;
   let li_id_value;
@@ -7199,9 +7224,9 @@ function create_each_block_1(key_1, ctx) {
   function click_handler() {
     return (
       /*click_handler*/
-      ctx[32](
+      ctx[33](
       /*option*/
-      ctx[49])
+      ctx[50])
     );
   }
 
@@ -7215,40 +7240,40 @@ function create_each_block_1(key_1, ctx) {
       t1 = space();
       attr(li, "id", li_id_value =
       /*option*/
-      ctx[49].label);
+      ctx[50].label);
       attr(li, "role", "option");
       attr(li, "aria-label", li_aria_label_value =
       /*option*/
-      ctx[49].label ||
+      ctx[50].label ||
       /*option*/
-      ctx[49].value);
+      ctx[50].value);
       attr(li, "aria-selected", li_aria_selected_value =
       /*_values*/
-      ctx[12].includes(
+      ctx[15].includes(
       /*option*/
-      ctx[49].value) ? "true" : "false");
+      ctx[50].value) ? "true" : "false");
       attr(li, "class", "dropdown-item");
       attr(li, "data-testid", li_data_testid_value = `dropdown-item-${
       /*option*/
-      ctx[49].value}`);
+      ctx[50].value}`);
       attr(li, "data-index", li_data_index_value =
       /*index*/
-      ctx[53]);
+      ctx[54]);
       attr(li, "data-value", li_data_value_value =
       /*option*/
-      ctx[49].value);
+      ctx[50].value);
       attr(li, "style", li_style_value = `display: ${"block"}`);
       toggle_class(li, "dropdown-item--disabled", false);
       toggle_class(li, "dropdown-item--tabbed",
       /*index*/
-      ctx[53] ===
+      ctx[54] ===
       /*_highlightedIndex*/
-      ctx[16]);
+      ctx[18]);
       toggle_class(li, "dropdown-item--selected",
       /*_values*/
-      ctx[12].includes(
+      ctx[15].includes(
       /*option*/
-      ctx[49].value));
+      ctx[50].value));
       this.first = li;
     },
 
@@ -7267,82 +7292,82 @@ function create_each_block_1(key_1, ctx) {
       ctx = new_ctx;
       if (dirty[0] &
       /*_options*/
-      8192 && t0_value !== (t0_value = (
+      4096 && t0_value !== (t0_value = (
       /*option*/
-      ctx[49].label ||
+      ctx[50].label ||
       /*option*/
-      ctx[49].value) + "")) set_data(t0, t0_value);
+      ctx[50].value) + "")) set_data(t0, t0_value);
 
       if (dirty[0] &
       /*_options*/
-      8192 && li_id_value !== (li_id_value =
+      4096 && li_id_value !== (li_id_value =
       /*option*/
-      ctx[49].label)) {
+      ctx[50].label)) {
         attr(li, "id", li_id_value);
       }
 
       if (dirty[0] &
       /*_options*/
-      8192 && li_aria_label_value !== (li_aria_label_value =
+      4096 && li_aria_label_value !== (li_aria_label_value =
       /*option*/
-      ctx[49].label ||
+      ctx[50].label ||
       /*option*/
-      ctx[49].value)) {
+      ctx[50].value)) {
         attr(li, "aria-label", li_aria_label_value);
       }
 
       if (dirty[0] &
       /*_values, _options*/
-      12288 && li_aria_selected_value !== (li_aria_selected_value =
+      36864 && li_aria_selected_value !== (li_aria_selected_value =
       /*_values*/
-      ctx[12].includes(
+      ctx[15].includes(
       /*option*/
-      ctx[49].value) ? "true" : "false")) {
+      ctx[50].value) ? "true" : "false")) {
         attr(li, "aria-selected", li_aria_selected_value);
       }
 
       if (dirty[0] &
       /*_options*/
-      8192 && li_data_testid_value !== (li_data_testid_value = `dropdown-item-${
+      4096 && li_data_testid_value !== (li_data_testid_value = `dropdown-item-${
       /*option*/
-      ctx[49].value}`)) {
+      ctx[50].value}`)) {
         attr(li, "data-testid", li_data_testid_value);
       }
 
       if (dirty[0] &
       /*_options*/
-      8192 && li_data_index_value !== (li_data_index_value =
+      4096 && li_data_index_value !== (li_data_index_value =
       /*index*/
-      ctx[53])) {
+      ctx[54])) {
         attr(li, "data-index", li_data_index_value);
       }
 
       if (dirty[0] &
       /*_options*/
-      8192 && li_data_value_value !== (li_data_value_value =
+      4096 && li_data_value_value !== (li_data_value_value =
       /*option*/
-      ctx[49].value)) {
+      ctx[50].value)) {
         attr(li, "data-value", li_data_value_value);
       }
 
       if (dirty[0] &
       /*_options, _highlightedIndex*/
-      73728) {
+      266240) {
         toggle_class(li, "dropdown-item--tabbed",
         /*index*/
-        ctx[53] ===
+        ctx[54] ===
         /*_highlightedIndex*/
-        ctx[16]);
+        ctx[18]);
       }
 
       if (dirty[0] &
       /*_values, _options*/
-      12288) {
+      36864) {
         toggle_class(li, "dropdown-item--selected",
         /*_values*/
-        ctx[12].includes(
+        ctx[15].includes(
         /*option*/
-        ctx[49].value));
+        ctx[50].value));
       }
     },
 
@@ -7353,14 +7378,14 @@ function create_each_block_1(key_1, ctx) {
     }
 
   };
-} // (246:6) {#each _options as option}
+} // (260:6) {#each _options as option}
 
 
-function create_each_block$4(ctx) {
+function create_each_block$5(ctx) {
   let option;
   let t0_value =
   /*option*/
-  ctx[49].label + "";
+  ctx[50].label + "";
   let t0;
   let t1;
   let option_selected_value;
@@ -7373,14 +7398,14 @@ function create_each_block$4(ctx) {
       t1 = space();
       option.selected = option_selected_value =
       /*option*/
-      ctx[49].selected;
+      ctx[50].selected;
       option.__value = option_value_value =
       /*option*/
-      ctx[49].value;
+      ctx[50].value;
       option.value = option.__value;
       attr(option, "aria-label", option_aria_label_value =
       /*option*/
-      ctx[49].label);
+      ctx[50].label);
     },
 
     m(target, anchor) {
@@ -7392,32 +7417,32 @@ function create_each_block$4(ctx) {
     p(ctx, dirty) {
       if (dirty[0] &
       /*_options*/
-      8192 && t0_value !== (t0_value =
+      4096 && t0_value !== (t0_value =
       /*option*/
-      ctx[49].label + "")) set_data(t0, t0_value);
+      ctx[50].label + "")) set_data(t0, t0_value);
 
       if (dirty[0] &
       /*_options*/
-      8192 && option_selected_value !== (option_selected_value =
+      4096 && option_selected_value !== (option_selected_value =
       /*option*/
-      ctx[49].selected)) {
+      ctx[50].selected)) {
         option.selected = option_selected_value;
       }
 
       if (dirty[0] &
       /*_options*/
-      8192 && option_value_value !== (option_value_value =
+      4096 && option_value_value !== (option_value_value =
       /*option*/
-      ctx[49].value)) {
+      ctx[50].value)) {
         option.__value = option_value_value;
         option.value = option.__value;
       }
 
       if (dirty[0] &
       /*_options*/
-      8192 && option_aria_label_value !== (option_aria_label_value =
+      4096 && option_aria_label_value !== (option_aria_label_value =
       /*option*/
-      ctx[49].label)) {
+      ctx[50].label)) {
         attr(option, "aria-label", option_aria_label_value);
       }
     },
@@ -7437,7 +7462,7 @@ function create_fragment$v(ctx) {
   function select_block_type(ctx, dirty) {
     if (
     /*_native*/
-    ctx[22]) return create_if_block$f;
+    ctx[14]) return create_if_block$f;
     return create_else_block$5;
   }
 
@@ -7466,11 +7491,11 @@ function create_fragment$v(ctx) {
       /*width*/
       ctx[5] ||
       /*_computedWidth*/
-      ctx[17]}
+      ctx[19]}
   `);
       toggle_class(div, "dropdown-native",
       /*_native*/
-      ctx[22]);
+      ctx[14]);
     },
 
     m(target, anchor) {
@@ -7478,7 +7503,7 @@ function create_fragment$v(ctx) {
       if_block.m(div, null);
       /*div_binding*/
 
-      ctx[34](div);
+      ctx[35](div);
     },
 
     p(ctx, dirty) {
@@ -7504,7 +7529,7 @@ function create_fragment$v(ctx) {
 
       if (dirty[0] &
       /*mt, mr, mb, ml, width, _computedWidth*/
-      134944 && div_style_value !== (div_style_value = `
+      528160 && div_style_value !== (div_style_value = `
     ${calculateMargin(
       /*mt*/
       ctx[8],
@@ -7518,17 +7543,17 @@ function create_fragment$v(ctx) {
       /*width*/
       ctx[5] ||
       /*_computedWidth*/
-      ctx[17]}
+      ctx[19]}
   `)) {
         attr(div, "style", div_style_value);
       }
 
       if (dirty[0] &
       /*_native*/
-      4194304) {
+      16384) {
         toggle_class(div, "dropdown-native",
         /*_native*/
-        ctx[22]);
+        ctx[14]);
       }
     },
 
@@ -7540,12 +7565,26 @@ function create_fragment$v(ctx) {
       if_block.d();
       /*div_binding*/
 
-      ctx[34](null);
+      ctx[35](null);
     }
 
   };
 }
 
+function parseValues(selectedValue) {
+  let rawValue;
+
+  try {
+    rawValue = JSON.parse(selectedValue || "[]");
+  } catch (e) {
+    rawValue = [selectedValue];
+  }
+
+  const rawValues = typeof rawValue === "object" ? rawValue : [rawValue]; // convert all values to strings to avoid later type comparison issues
+
+  return rawValues.map(val => `${val}`);
+}
+
 function instance$s($$self, $$props, $$invalidate) {
   let _disabled;
 
@@ -7609,6 +7648,8 @@ function instance$s($$self, $$props, $$invalidate) {
 
   let _computedWidth;
 
+  let _dropdownMenuPos = "auto";
+
   let _el;
 
   let _menuEl;
@@ -7616,23 +7657,13 @@ function instance$s($$self, $$props, $$invalidate) {
   let _selectEl;
 
   onMount(async () => {
-    await tick();
-    $$invalidate(12, _values = parseValues());
-    $$invalidate(13, _options = getOptions());
-
-    if (!_native) {
-      $$invalidate(17, _computedWidth = getCustomDropdownWidth(_options));
-      addKeyboardEventListeners();
-      setHighlightedIndexToSelected();
-    } // watch for DOM changes within the slot => dynamic binding
-
-
+    // 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());
+      $$invalidate(16, _selectedLabel = "");
+      $$invalidate(15, _values = parseValues(value));
+      $$invalidate(12, _options = getOptions());
     });
   });
   onDestroy(() => {
@@ -7665,8 +7696,8 @@ function instance$s($$self, $$props, $$invalidate) {
       const selected = _values.includes(value);
 
       if (selected) {
-        $$invalidate(14, _selectedLabel = label);
-        $$invalidate(12, _values = [value]);
+        $$invalidate(16, _selectedLabel = label);
+        $$invalidate(15, _values = [value]);
       }
 
       return {
@@ -7707,21 +7738,6 @@ function instance$s($$self, $$props, $$invalidate) {
     _el.removeEventListener("focus", onFocus, true);
 
     _el.removeEventListener("blur", onBlur, true);
-  } // parse and convert values to strings to avoid later type comparison issues
-
-
-  function parseValues() {
-    let rawValue;
-
-    try {
-      rawValue = JSON.parse(value || "[]");
-    } catch (e) {
-      rawValue = [value];
-    }
-
-    const rawValues = typeof rawValue === "object" ? rawValue : [rawValue]; // convert all values to strings to avoid later type comparison issues
-
-    return rawValues.map(val => `${val}`);
   }
 
   async function showMenu() {
@@ -7729,13 +7745,15 @@ function instance$s($$self, $$props, $$invalidate) {
       return;
     }
 
-    $$invalidate(15, _isMenuVisible = true);
+    $$invalidate(17, _isMenuVisible = true);
     await tick(); // hide menu on blur
 
     _menuEl.addEventListener("blur", closeMenu); // bind up/down arrows to navigate options
 
 
     _menuEl.addEventListener("mouseover", onHighlight);
+
+    setDropdownMenuPosition();
   }
 
   function closeMenu() {
@@ -7744,11 +7762,22 @@ function instance$s($$self, $$props, $$invalidate) {
     _menuEl.removeEventListener("mouseover", onHighlight);
 
     setHighlightedIndexToSelected();
-    $$invalidate(15, _isMenuVisible = false);
+    $$invalidate(17, _isMenuVisible = false);
+    $$invalidate(20, _dropdownMenuPos = "auto");
+  }
+
+  function setDropdownMenuPosition() {
+    const dropdownRect = _el.getBoundingClientRect();
+
+    const menuRect = _menuEl.getBoundingClientRect();
+
+    if (window.innerHeight - dropdownRect.top < dropdownRect.height + menuRect.height) {
+      $$invalidate(20, _dropdownMenuPos = menuRect.top - dropdownRect.top + 'px');
+    }
   }
 
   function setHighlightedIndexToSelected() {
-    $$invalidate(16, _highlightedIndex = _options.findIndex(option => _values.includes(option.value)));
+    $$invalidate(18, _highlightedIndex = _options.findIndex(option => _values.includes(option.value)));
   } // Event handlers
 
   /**
@@ -7758,7 +7787,7 @@ function instance$s($$self, $$props, $$invalidate) {
 
   function onSelect(value, label, close) {
     if (_disabled) return;
-    $$invalidate(14, _selectedLabel = label);
+    $$invalidate(16, _selectedLabel = label);
     let detail;
 
     if (_multiselect) {
@@ -7769,7 +7798,7 @@ function instance$s($$self, $$props, $$invalidate) {
         values: _values
       };
     } else {
-      $$invalidate(12, _values = [value]);
+      $$invalidate(15, _values = [value]);
       detail = {
         name,
         value
@@ -7825,14 +7854,14 @@ function instance$s($$self, $$props, $$invalidate) {
 
   function _handleArrowDown() {
     if (_highlightedIndex < _options.length - 1) {
-      $$invalidate(16, _highlightedIndex++, _highlightedIndex);
+      $$invalidate(18, _highlightedIndex++, _highlightedIndex);
       onSelect(_options[_highlightedIndex].value, _options[_highlightedIndex].label, false);
     }
   }
 
   function _handleArrowUp() {
     if (_highlightedIndex > 0) {
-      $$invalidate(16, _highlightedIndex--, _highlightedIndex);
+      $$invalidate(18, _highlightedIndex--, _highlightedIndex);
       onSelect(_options[_highlightedIndex].value, _options[_highlightedIndex].label, false);
     }
   } // add required bindings to component
@@ -7848,7 +7877,7 @@ function instance$s($$self, $$props, $$invalidate) {
   }
 
   function onHighlight(e) {
-    $$invalidate(16, _highlightedIndex = Number(e.target.dataset.index));
+    $$invalidate(18, _highlightedIndex = Number(e.target.dataset.index));
   }
 
   function onNativeSelect(e) {
@@ -7860,8 +7889,8 @@ function instance$s($$self, $$props, $$invalidate) {
   function select_binding($$value) {
     binding_callbacks[$$value ? 'unshift' : 'push'](() => {
       _selectEl = $$value;
-      $$invalidate(20, _selectEl);
-      $$invalidate(13, _options);
+      $$invalidate(22, _selectEl);
+      ((($$invalidate(12, _options), $$invalidate(13, _el)), $$invalidate(29, value)), $$invalidate(14, _native)), $$invalidate(31, native);
     });
   }
 
@@ -7870,29 +7899,29 @@ function instance$s($$self, $$props, $$invalidate) {
   function ul_binding($$value) {
     binding_callbacks[$$value ? 'unshift' : 'push'](() => {
       _menuEl = $$value;
-      $$invalidate(19, _menuEl);
+      $$invalidate(21, _menuEl);
     });
   }
 
   function div_binding($$value) {
     binding_callbacks[$$value ? 'unshift' : 'push'](() => {
       _el = $$value;
-      $$invalidate(18, _el);
+      $$invalidate(13, _el);
     });
   }
 
   $$self.$$set = $$props => {
     if ('name' in $$props) $$invalidate(0, name = $$props.name);
     if ('arialabel' in $$props) $$invalidate(1, arialabel = $$props.arialabel);
-    if ('value' in $$props) $$invalidate(28, value = $$props.value);
+    if ('value' in $$props) $$invalidate(29, value = $$props.value);
     if ('leadingicon' in $$props) $$invalidate(2, leadingicon = $$props.leadingicon);
     if ('maxheight' in $$props) $$invalidate(3, maxheight = $$props.maxheight);
     if ('placeholder' in $$props) $$invalidate(4, placeholder = $$props.placeholder);
     if ('width' in $$props) $$invalidate(5, width = $$props.width);
     if ('disabled' in $$props) $$invalidate(6, disabled = $$props.disabled);
     if ('error' in $$props) $$invalidate(7, error = $$props.error);
-    if ('multiselect' in $$props) $$invalidate(29, multiselect = $$props.multiselect);
-    if ('native' in $$props) $$invalidate(30, native = $$props.native);
+    if ('multiselect' in $$props) $$invalidate(30, multiselect = $$props.multiselect);
+    if ('native' in $$props) $$invalidate(31, native = $$props.native);
     if ('mt' in $$props) $$invalidate(8, mt = $$props.mt);
     if ('mr' in $$props) $$invalidate(9, mr = $$props.mr);
     if ('mb' in $$props) $$invalidate(10, mb = $$props.mb);
@@ -7903,35 +7932,52 @@ function instance$s($$self, $$props, $$invalidate) {
     if ($$self.$$.dirty[0] &
     /*disabled*/
     64) {
-      $$invalidate(21, _disabled = toBoolean(disabled));
+      $$invalidate(23, _disabled = toBoolean(disabled));
     }
 
     if ($$self.$$.dirty[0] &
     /*error*/
     128) {
-      $$invalidate(23, _error = toBoolean(error));
+      $$invalidate(24, _error = toBoolean(error));
     }
 
     if ($$self.$$.dirty[0] &
     /*multiselect*/
-    536870912) {
+    1073741824) {
       _multiselect = toBoolean(multiselect);
     }
 
-    if ($$self.$$.dirty[0] &
+    if ($$self.$$.dirty[1] &
     /*native*/
-    1073741824) {
-      $$invalidate(22, _native = toBoolean(native));
+    1) {
+      $$invalidate(14, _native = toBoolean(native));
+    }
+
+    if ($$self.$$.dirty[0] &
+    /*_el, value, _native, _options*/
+    536899584) {
+      {
+        if (_el) {
+          $$invalidate(15, _values = parseValues(value));
+          $$invalidate(12, _options = getOptions());
+
+          if (!_native) {
+            $$invalidate(19, _computedWidth = getCustomDropdownWidth(_options));
+            addKeyboardEventListeners();
+            setHighlightedIndexToSelected();
+          }
+        }
+      }
     }
   };
 
-  return [name, arialabel, leadingicon, maxheight, placeholder, width, disabled, error, mt, mr, mb, ml, _values, _options, _selectedLabel, _isMenuVisible, _highlightedIndex, _computedWidth, _el, _menuEl, _selectEl, _disabled, _native, _error, showMenu, closeMenu, onSelect, onNativeSelect, value, multiselect, native, select_binding, click_handler, ul_binding, div_binding];
+  return [name, arialabel, leadingicon, maxheight, placeholder, width, disabled, error, mt, mr, mb, ml, _options, _el, _native, _values, _selectedLabel, _isMenuVisible, _highlightedIndex, _computedWidth, _dropdownMenuPos, _menuEl, _selectEl, _disabled, _error, showMenu, closeMenu, onSelect, onNativeSelect, value, multiselect, native, select_binding, click_handler, ul_binding, div_binding];
 }
 
 class Dropdown extends SvelteElement {
   constructor(options) {
     super();
-    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);transition:box-shadow 0.1s ease-in}.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)}.dropdown-native:hover{border-color:var(--goa-color-interactive-hover);box-shadow:0 0 0 var(--goa-border-width-m) var(--goa-color-interactive-hover)}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>`;
+    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:var(--width, 100%)}.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;bottom:var(--bottom);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);transition:box-shadow 0.1s ease-in}.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)}.dropdown-native:hover{border-color:var(--goa-color-interactive-hover);box-shadow:0 0 0 var(--goa-border-width-m) var(--goa-color-interactive-hover)}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),
@@ -7939,15 +7985,15 @@ class Dropdown extends SvelteElement {
     }, instance$s, create_fragment$v, safe_not_equal, {
       name: 0,
       arialabel: 1,
-      value: 28,
+      value: 29,
       leadingicon: 2,
       maxheight: 3,
       placeholder: 4,
       width: 5,
       disabled: 6,
       error: 7,
-      multiselect: 29,
-      native: 30,
+      multiselect: 30,
+      native: 31,
       mt: 8,
       mr: 9,
       mb: 10,
@@ -7993,7 +8039,7 @@ class Dropdown extends SvelteElement {
   }
 
   get value() {
-    return this.$$.ctx[28];
+    return this.$$.ctx[29];
   }
 
   set value(value) {
@@ -8070,7 +8116,7 @@ class Dropdown extends SvelteElement {
   }
 
   get multiselect() {
-    return this.$$.ctx[29];
+    return this.$$.ctx[30];
   }
 
   set multiselect(multiselect) {
@@ -8081,7 +8127,7 @@ class Dropdown extends SvelteElement {
   }
 
   get native() {
-    return this.$$.ctx[30];
+    return this.$$.ctx[31];
   }
 
   set native(native) {
@@ -8676,14 +8722,14 @@ class Footer extends SvelteElement {
 customElements.define("goa-app-footer", Footer);
 /* libs/web-components/src/components/footer-meta-section/FooterMetaSection.svelte generated by Svelte v3.51.0 */
 
-function get_each_context$3(ctx, list, i) {
+function get_each_context$4(ctx, list, i) {
   const child_ctx = ctx.slice();
   child_ctx[3] = list[i];
   return child_ctx;
 } // (52:4) {#each children as child}
 
 
-function create_each_block$3(ctx) {
+function create_each_block$4(ctx) {
   let li;
   let a;
   let t_value =
@@ -8741,7 +8787,7 @@ function create_fragment$r(ctx) {
   let each_blocks = [];
 
   for (let i = 0; i < each_value.length; i += 1) {
-    each_blocks[i] = create_each_block$3(get_each_context$3(ctx, each_value, i));
+    each_blocks[i] = create_each_block$4(get_each_context$4(ctx, each_value, i));
   }
 
   return {
@@ -8785,12 +8831,12 @@ function create_fragment$r(ctx) {
         let i;
 
         for (i = 0; i < each_value.length; i += 1) {
-          const child_ctx = get_each_context$3(ctx, each_value, i);
+          const child_ctx = get_each_context$4(ctx, each_value, i);
 
           if (each_blocks[i]) {
             each_blocks[i].p(child_ctx, dirty);
           } else {
-            each_blocks[i] = create_each_block$3(child_ctx);
+            each_blocks[i] = create_each_block$4(child_ctx);
             each_blocks[i].c();
             each_blocks[i].m(ul, null);
           }
@@ -8867,7 +8913,7 @@ class FooterMetaSection extends SvelteElement {
 customElements.define("goa-app-footer-meta-section", FooterMetaSection);
 /* libs/web-components/src/components/footer-nav-section/FooterNavSection.svelte generated by Svelte v3.51.0 */
 
-function get_each_context$2(ctx, list, i) {
+function get_each_context$3(ctx, list, i) {
   const child_ctx = ctx.slice();
   child_ctx[5] = list[i];
   return child_ctx;
@@ -8916,7 +8962,7 @@ function create_if_block$d(ctx) {
 } // (49:4) {#each children as child}
 
 
-function create_each_block$2(ctx) {
+function create_each_block$3(ctx) {
   let li;
   let a;
   let t_value =
@@ -8979,7 +9025,7 @@ function create_fragment$q(ctx) {
   let each_blocks = [];
 
   for (let i = 0; i < each_value.length; i += 1) {
-    each_blocks[i] = create_each_block$2(get_each_context$2(ctx, each_value, i));
+    each_blocks[i] = create_each_block$3(get_each_context$3(ctx, each_value, i));
   }
 
   return {
@@ -9057,12 +9103,12 @@ function create_fragment$q(ctx) {
         let i;
 
         for (i = 0; i < each_value.length; i += 1) {
-          const child_ctx = get_each_context$2(ctx, each_value, i);
+          const child_ctx = get_each_context$3(ctx, each_value, i);
 
           if (each_blocks[i]) {
             each_blocks[i].p(child_ctx, dirty);
           } else {
-            each_blocks[i] = create_each_block$2(child_ctx);
+            each_blocks[i] = create_each_block$3(child_ctx);
             each_blocks[i].c();
             each_blocks[i].m(ul, null);
           }
@@ -10277,7 +10323,7 @@ function instance$k($$self, $$props, $$invalidate) {
 
   let _paddingSize;
 
-  const [Variants, validateVariant] = typeValidator("Icon Button Variant", ["color", "nocolor", "dark"], true);
+  const [Variants, validateVariant] = typeValidator("Icon Button Variant", ["color", "nocolor", "dark", "destructive"], true);
   let {
     icon
   } = $$props;
@@ -10370,7 +10416,7 @@ function instance$k($$self, $$props, $$invalidate) {
 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(--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>`;
+    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:not(.destructive){background-color:var(--goa-color-greyscale-100);border-color:var(--goa-color-greyscale-100);color:var(--goa-color-interactive-hover);outline:none}button:focus:not(.destructive),button:active:not(.destructive){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)}.destructive{color:var(--goa-color-emergency-dark);fill:var(--goa-color-emergency-dark)}.destructive:hover{background-color:var(--goa-color-emergency-light);border-color:var(--goa-color-emergency-light);outline:none}.destructive:focus,.destructive:active{background-color:var(--goa-color-emergency-light);border-color:var(--goa-color-interactive-focus);box-shadow:0 0 0 3px var(--goa-color-interactive-focus);outline:none}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),
@@ -13845,17 +13891,36 @@ class PageBlock extends SvelteElement {
 customElements.define("goa-page-block", PageBlock);
 /* libs/web-components/src/components/pagination/Pagination.svelte generated by Svelte v3.51.0 */
 
+function get_each_context$2(ctx, list, i) {
+  const child_ctx = ctx.slice();
+  child_ctx[18] = list[i];
+  child_ctx[20] = i;
+  return child_ctx;
+} // (66:4) {#if variant === "all"}
+
+
 function create_if_block$6(ctx) {
   let goa_block;
   let span0;
   let t1;
   let input;
   let t2;
-  let goa_input;
+  let goa_dropdown;
   let t3;
   let span1;
   let t4;
   let t5;
+  let each_value = {
+    length:
+    /*_pageCount*/
+    ctx[8]
+  };
+  let each_blocks = [];
+
+  for (let i = 0; i < each_value.length; i += 1) {
+    each_blocks[i] = create_each_block$2(get_each_context$2(ctx, each_value, i));
+  }
+
   return {
     c() {
       goa_block = element("goa-block");
@@ -13864,7 +13929,12 @@ function create_if_block$6(ctx) {
       t1 = space();
       input = element("input");
       t2 = space();
-      goa_input = element("goa-input");
+      goa_dropdown = element("goa-dropdown");
+
+      for (let i = 0; i < each_blocks.length; i += 1) {
+        each_blocks[i].c();
+      }
+
       t3 = space();
       span1 = element("span");
       t4 = text("of ");
@@ -13872,16 +13942,10 @@ function create_if_block$6(ctx) {
       /*_pageCount*/
       ctx[8]);
       attr(input, "type", "hidden");
-      set_custom_element_data(goa_input, "type", "number");
-      set_custom_element_data(goa_input, "value",
+      set_custom_element_data(goa_dropdown, "value",
       /*pagenumber*/
       ctx[0]);
-      set_custom_element_data(goa_input, "width", "8ch");
-      set_custom_element_data(goa_input, "debounce", "500");
-      set_custom_element_data(goa_input, "min", "1");
-      set_custom_element_data(goa_input, "max",
-      /*_pageCount*/
-      ctx[8]);
+      set_custom_element_data(goa_dropdown, "width", "70px");
       set_custom_element_data(goa_block, "data-testid", "page-selector");
       set_custom_element_data(goa_block, "alignment", "center");
       set_custom_element_data(goa_block, "gap", "s");
@@ -13896,10 +13960,15 @@ function create_if_block$6(ctx) {
 
       ctx[12](input);
       append(goa_block, t2);
-      append(goa_block, goa_input);
-      /*goa_input_binding*/
+      append(goa_block, goa_dropdown);
+
+      for (let i = 0; i < each_blocks.length; i += 1) {
+        each_blocks[i].m(goa_dropdown, null);
+      }
+      /*goa_dropdown_binding*/
+
 
-      ctx[13](goa_input);
+      ctx[13](goa_dropdown);
       append(goa_block, t3);
       append(goa_block, span1);
       append(span1, t4);
@@ -13907,22 +13976,43 @@ function create_if_block$6(ctx) {
     },
 
     p(ctx, dirty) {
+      if (dirty &
+      /*_pageCount*/
+      256) {
+        each_value = {
+          length:
+          /*_pageCount*/
+          ctx[8]
+        };
+        let i;
+
+        for (i = 0; i < each_value.length; i += 1) {
+          const child_ctx = get_each_context$2(ctx, each_value, i);
+
+          if (each_blocks[i]) {
+            each_blocks[i].p(child_ctx, dirty);
+          } else {
+            each_blocks[i] = create_each_block$2(child_ctx);
+            each_blocks[i].c();
+            each_blocks[i].m(goa_dropdown, null);
+          }
+        }
+
+        for (; i < each_blocks.length; i += 1) {
+          each_blocks[i].d(1);
+        }
+
+        each_blocks.length = each_value.length;
+      }
+
       if (dirty &
       /*pagenumber*/
       1) {
-        set_custom_element_data(goa_input, "value",
+        set_custom_element_data(goa_dropdown, "value",
         /*pagenumber*/
         ctx[0]);
       }
 
-      if (dirty &
-      /*_pageCount*/
-      256) {
-        set_custom_element_data(goa_input, "max",
-        /*_pageCount*/
-        ctx[8]);
-      }
-
       if (dirty &
       /*_pageCount*/
       256) set_data(t5,
@@ -13935,11 +14025,39 @@ function create_if_block$6(ctx) {
       /*input_binding*/
 
       ctx[12](null);
-      /*goa_input_binding*/
+      destroy_each(each_blocks, detaching);
+      /*goa_dropdown_binding*/
 
       ctx[13](null);
     }
 
+  };
+} // (71:10) {#each {length: _pageCount} as _, i}
+
+
+function create_each_block$2(ctx) {
+  let goa_dropdown_item;
+  return {
+    c() {
+      goa_dropdown_item = element("goa-dropdown-item");
+      set_custom_element_data(goa_dropdown_item, "value",
+      /*i*/
+      ctx[20] + 1);
+      set_custom_element_data(goa_dropdown_item, "label",
+      /*i*/
+      ctx[20] + 1);
+    },
+
+    m(target, anchor) {
+      insert(target, goa_dropdown_item, anchor);
+    },
+
+    p: noop,
+
+    d(detaching) {
+      if (detaching) detach(goa_dropdown_item);
+    }
+
   };
 }
 
@@ -14135,7 +14253,7 @@ function instance$d($$self, $$props, $$invalidate) {
     ml = null
   } = $$props; // private
 
-  let inputEl = null;
+  let pageDropdownEl = null;
   let hiddenEl = null; // needed to allow the inputEl's event to be cancelled
   // hooks
 
@@ -14145,17 +14263,11 @@ function instance$d($$self, $$props, $$invalidate) {
       itemcount,
       pagenumber
     });
-    validateVariant(variant); // prevent event propagation if value is non-numeric 
-    // (input[type=number] returns blank for non-numeric numbers)
+    validateVariant(variant); // prevent event propagation
 
-    inputEl && inputEl.addEventListener("_change", e => {
+    pageDropdownEl && pageDropdownEl.addEventListener("_change", e => {
       const page = Number.parseInt(e.detail.value);
       e.stopPropagation();
-
-      if (isNaN(page)) {
-        return;
-      }
-
       hiddenEl.dispatchEvent(new CustomEvent("_change", {
         composed: true,
         bubbles: true,
@@ -14189,10 +14301,10 @@ function instance$d($$self, $$props, $$invalidate) {
     });
   }
 
-  function goa_input_binding($$value) {
+  function goa_dropdown_binding($$value) {
     binding_callbacks[$$value ? 'unshift' : 'push'](() => {
-      inputEl = $$value;
-      $$invalidate(6, inputEl);
+      pageDropdownEl = $$value;
+      $$invalidate(6, pageDropdownEl);
     });
   }
 
@@ -14220,7 +14332,7 @@ function instance$d($$self, $$props, $$invalidate) {
     }
   };
 
-  return [pagenumber, variant, mt, mr, mb, ml, inputEl, hiddenEl, _pageCount, goto, itemcount, perpagecount, input_binding, goa_input_binding, click_handler, click_handler_1];
+  return [pagenumber, variant, mt, mr, mb, ml, pageDropdownEl, hiddenEl, _pageCount, goto, itemcount, perpagecount, input_binding, goa_dropdown_binding, click_handler, click_handler_1];
 }
 
 class Pagination extends SvelteElement {
@@ -17292,7 +17404,7 @@ function instance$6($$self, $$props, $$invalidate) {
 
   onMount(() => {
     validateVariant(variant);
-    attachSortEventHandling();
+    setTimeout(attachSortEventHandling, 0);
 
     const slot = _rootEl.querySelector("slot");
 
@@ -19678,11 +19790,11 @@ const GoAAccordion = ({
     mb: mb,
     ml: ml
   }, {
-    children: [children, headingContent && jsx("div", Object.assign({
+    children: [headingContent && jsx("div", Object.assign({
       slot: "headingcontent"
     }, {
       children: headingContent
-    }), void 0)]
+    }), void 0), children]
   }), void 0);
 };
 
@@ -20104,6 +20216,7 @@ const GoACircularProgress = ({
 
 const GoAContainer = ({
   accent,
+  heading,
   title,
   padding,
   children,
@@ -20115,6 +20228,7 @@ const GoAContainer = ({
   ml,
   testId
 }) => {
+  const headingContent = heading || title;
   return jsxs("goa-container", Object.assign({
     type: type,
     padding: padding,
@@ -20125,10 +20239,10 @@ const GoAContainer = ({
     ml: ml,
     "data-testid": testId
   }, {
-    children: [title && jsx("div", Object.assign({
+    children: [headingContent && jsx("div", Object.assign({
       slot: "title"
     }, {
-      children: title
+      children: headingContent
     }), void 0), children, actions && jsx("div", Object.assign({
       slot: "actions"
     }, {