@abgov/react-components 4.0.0-alpha.129 → 4.0.0-alpha.130

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/react-components",
-  "version": "4.0.0-alpha.129",
+  "version": "4.0.0-alpha.130",
   "description": "Government of Alberta - UI components for React",
   "bugs": {
     "url": "https://github.com/GovAlta/ui-components/issues"

package/react-components.esm.js

@@ -6725,16 +6725,16 @@ customElements.define("goa-divider", Divider);
 
 function get_each_context_1(ctx, list, i) {
   const child_ctx = ctx.slice();
-  child_ctx[48] = list[i];
-  child_ctx[52] = i;
+  child_ctx[50] = list[i];
+  child_ctx[54] = i;
   return child_ctx;
 }
 
 function get_each_context$4(ctx, list, i) {
   const child_ctx = ctx.slice();
-  child_ctx[48] = list[i];
+  child_ctx[50] = list[i];
   return child_ctx;
-} // (259:2) {:else}
+} // (270:2) {:else}
 
 
 function create_else_block$5(ctx) {
@@ -6760,7 +6760,7 @@ function create_else_block$5(ctx) {
 
   const get_key = ctx =>
   /*index*/
-  ctx[52];
+  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);
@@ -6825,9 +6825,15 @@ function create_else_block$5(ctx) {
       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[17]);
@@ -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;
       }
     },
@@ -6950,7 +6956,7 @@ function create_else_block$5(ctx) {
 
       if (dirty[0] &
       /*_options, _values, _highlightedIndex, onSelect*/
-      67407872) {
+      134516736) {
         each_value_1 =
         /*_options*/
         ctx[12];
@@ -6966,10 +6972,16 @@ function create_else_block$5(ctx) {
       }
 
       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);
       }
 
@@ -6997,13 +7009,13 @@ function create_else_block$5(ctx) {
       /*ul_binding*/
 
 
-      ctx[33](null);
+      ctx[34](null);
       mounted = false;
       dispose();
     }
 
   };
-} // (240:2) {#if _native}
+} // (251:2) {#if _native}
 
 
 function create_if_block$f(ctx) {
@@ -7032,7 +7044,7 @@ function create_if_block$f(ctx) {
 
       select.disabled =
       /*_disabled*/
-      ctx[22];
+      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;
       }
     },
@@ -7093,10 +7105,10 @@ function create_if_block$f(ctx) {
 
       if (dirty[0] &
       /*_disabled*/
-      4194304) {
+      8388608) {
         select.disabled =
         /*_disabled*/
-        ctx[22];
+        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();
     }
 
   };
-} // (260: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);
     }
 
   };
-} // (303: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[48].label ||
+  ctx[50].label ||
   /*option*/
-  ctx[48].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[48])
+      ctx[50])
     );
   }
 
@@ -7215,40 +7240,40 @@ function create_each_block_1(key_1, ctx) {
       t1 = space();
       attr(li, "id", li_id_value =
       /*option*/
-      ctx[48].label);
+      ctx[50].label);
       attr(li, "role", "option");
       attr(li, "aria-label", li_aria_label_value =
       /*option*/
-      ctx[48].label ||
+      ctx[50].label ||
       /*option*/
-      ctx[48].value);
+      ctx[50].value);
       attr(li, "aria-selected", li_aria_selected_value =
       /*_values*/
       ctx[15].includes(
       /*option*/
-      ctx[48].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[48].value}`);
+      ctx[50].value}`);
       attr(li, "data-index", li_data_index_value =
       /*index*/
-      ctx[52]);
+      ctx[54]);
       attr(li, "data-value", li_data_value_value =
       /*option*/
-      ctx[48].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[52] ===
+      ctx[54] ===
       /*_highlightedIndex*/
       ctx[18]);
       toggle_class(li, "dropdown-item--selected",
       /*_values*/
       ctx[15].includes(
       /*option*/
-      ctx[48].value));
+      ctx[50].value));
       this.first = li;
     },
 
@@ -7269,15 +7294,15 @@ function create_each_block_1(key_1, ctx) {
       /*_options*/
       4096 && t0_value !== (t0_value = (
       /*option*/
-      ctx[48].label ||
+      ctx[50].label ||
       /*option*/
-      ctx[48].value) + "")) set_data(t0, t0_value);
+      ctx[50].value) + "")) set_data(t0, t0_value);
 
       if (dirty[0] &
       /*_options*/
       4096 && li_id_value !== (li_id_value =
       /*option*/
-      ctx[48].label)) {
+      ctx[50].label)) {
         attr(li, "id", li_id_value);
       }
 
@@ -7285,9 +7310,9 @@ function create_each_block_1(key_1, ctx) {
       /*_options*/
       4096 && li_aria_label_value !== (li_aria_label_value =
       /*option*/
-      ctx[48].label ||
+      ctx[50].label ||
       /*option*/
-      ctx[48].value)) {
+      ctx[50].value)) {
         attr(li, "aria-label", li_aria_label_value);
       }
 
@@ -7297,7 +7322,7 @@ function create_each_block_1(key_1, ctx) {
       /*_values*/
       ctx[15].includes(
       /*option*/
-      ctx[48].value) ? "true" : "false")) {
+      ctx[50].value) ? "true" : "false")) {
         attr(li, "aria-selected", li_aria_selected_value);
       }
 
@@ -7305,7 +7330,7 @@ function create_each_block_1(key_1, ctx) {
       /*_options*/
       4096 && li_data_testid_value !== (li_data_testid_value = `dropdown-item-${
       /*option*/
-      ctx[48].value}`)) {
+      ctx[50].value}`)) {
         attr(li, "data-testid", li_data_testid_value);
       }
 
@@ -7313,7 +7338,7 @@ function create_each_block_1(key_1, ctx) {
       /*_options*/
       4096 && li_data_index_value !== (li_data_index_value =
       /*index*/
-      ctx[52])) {
+      ctx[54])) {
         attr(li, "data-index", li_data_index_value);
       }
 
@@ -7321,7 +7346,7 @@ function create_each_block_1(key_1, ctx) {
       /*_options*/
       4096 && li_data_value_value !== (li_data_value_value =
       /*option*/
-      ctx[48].value)) {
+      ctx[50].value)) {
         attr(li, "data-value", li_data_value_value);
       }
 
@@ -7330,7 +7355,7 @@ function create_each_block_1(key_1, ctx) {
       266240) {
         toggle_class(li, "dropdown-item--tabbed",
         /*index*/
-        ctx[52] ===
+        ctx[54] ===
         /*_highlightedIndex*/
         ctx[18]);
       }
@@ -7342,7 +7367,7 @@ function create_each_block_1(key_1, ctx) {
         /*_values*/
         ctx[15].includes(
         /*option*/
-        ctx[48].value));
+        ctx[50].value));
       }
     },
 
@@ -7353,14 +7378,14 @@ function create_each_block_1(key_1, ctx) {
     }
 
   };
-} // (249:6) {#each _options as option}
+} // (260:6) {#each _options as option}
 
 
 function create_each_block$4(ctx) {
   let option;
   let t0_value =
   /*option*/
-  ctx[48].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[48].selected;
+      ctx[50].selected;
       option.__value = option_value_value =
       /*option*/
-      ctx[48].value;
+      ctx[50].value;
       option.value = option.__value;
       attr(option, "aria-label", option_aria_label_value =
       /*option*/
-      ctx[48].label);
+      ctx[50].label);
     },
 
     m(target, anchor) {
@@ -7394,13 +7419,13 @@ function create_each_block$4(ctx) {
       /*_options*/
       4096 && t0_value !== (t0_value =
       /*option*/
-      ctx[48].label + "")) set_data(t0, t0_value);
+      ctx[50].label + "")) set_data(t0, t0_value);
 
       if (dirty[0] &
       /*_options*/
       4096 && option_selected_value !== (option_selected_value =
       /*option*/
-      ctx[48].selected)) {
+      ctx[50].selected)) {
         option.selected = option_selected_value;
       }
 
@@ -7408,7 +7433,7 @@ function create_each_block$4(ctx) {
       /*_options*/
       4096 && option_value_value !== (option_value_value =
       /*option*/
-      ctx[48].value)) {
+      ctx[50].value)) {
         option.__value = option_value_value;
         option.value = option.__value;
       }
@@ -7417,7 +7442,7 @@ function create_each_block$4(ctx) {
       /*_options*/
       4096 && option_aria_label_value !== (option_aria_label_value =
       /*option*/
-      ctx[48].label)) {
+      ctx[50].label)) {
         attr(option, "aria-label", option_aria_label_value);
       }
     },
@@ -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) {
@@ -7540,7 +7565,7 @@ function create_fragment$v(ctx) {
       if_block.d();
       /*div_binding*/
 
-      ctx[34](null);
+      ctx[35](null);
     }
 
   };
@@ -7623,6 +7648,8 @@ function instance$s($$self, $$props, $$invalidate) {
 
   let _computedWidth;
 
+  let _dropdownMenuPos = "auto";
+
   let _el;
 
   let _menuEl;
@@ -7725,6 +7752,8 @@ function instance$s($$self, $$props, $$invalidate) {
 
 
     _menuEl.addEventListener("mouseover", onHighlight);
+
+    setDropdownMenuPosition();
   }
 
   function closeMenu() {
@@ -7734,6 +7763,17 @@ function instance$s($$self, $$props, $$invalidate) {
 
     setHighlightedIndexToSelected();
     $$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() {
@@ -7849,8 +7889,8 @@ function instance$s($$self, $$props, $$invalidate) {
   function select_binding($$value) {
     binding_callbacks[$$value ? 'unshift' : 'push'](() => {
       _selectEl = $$value;
-      $$invalidate(21, _selectEl);
-      ((($$invalidate(12, _options), $$invalidate(13, _el)), $$invalidate(28, value)), $$invalidate(14, _native)), $$invalidate(30, native);
+      $$invalidate(22, _selectEl);
+      ((($$invalidate(12, _options), $$invalidate(13, _el)), $$invalidate(29, value)), $$invalidate(14, _native)), $$invalidate(31, native);
     });
   }
 
@@ -7859,7 +7899,7 @@ function instance$s($$self, $$props, $$invalidate) {
   function ul_binding($$value) {
     binding_callbacks[$$value ? 'unshift' : 'push'](() => {
       _menuEl = $$value;
-      $$invalidate(20, _menuEl);
+      $$invalidate(21, _menuEl);
     });
   }
 
@@ -7873,15 +7913,15 @@ function instance$s($$self, $$props, $$invalidate) {
   $$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);
@@ -7892,30 +7932,30 @@ function instance$s($$self, $$props, $$invalidate) {
     if ($$self.$$.dirty[0] &
     /*disabled*/
     64) {
-      $$invalidate(22, _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) {
+    1) {
       $$invalidate(14, _native = toBoolean(native));
     }
 
     if ($$self.$$.dirty[0] &
     /*_el, value, _native, _options*/
-    268464128) {
+    536899584) {
       {
         if (_el) {
           $$invalidate(15, _values = parseValues(value));
@@ -7931,13 +7971,13 @@ function instance$s($$self, $$props, $$invalidate) {
     }
   };
 
-  return [name, arialabel, leadingicon, maxheight, placeholder, width, disabled, error, mt, mr, mb, ml, _options, _el, _native, _values, _selectedLabel, _isMenuVisible, _highlightedIndex, _computedWidth, _menuEl, _selectEl, _disabled, _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: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;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),
@@ -7945,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,
@@ -7999,7 +8039,7 @@ class Dropdown extends SvelteElement {
   }
 
   get value() {
-    return this.$$.ctx[28];
+    return this.$$.ctx[29];
   }
 
   set value(value) {
@@ -8076,7 +8116,7 @@ class Dropdown extends SvelteElement {
   }
 
   get multiselect() {
-    return this.$$.ctx[29];
+    return this.$$.ctx[30];
   }
 
   set multiselect(multiselect) {
@@ -8087,7 +8127,7 @@ class Dropdown extends SvelteElement {
   }
 
   get native() {
-    return this.$$.ctx[30];
+    return this.$$.ctx[31];
   }
 
   set native(native) {

package/react-components.umd.js

@@ -6767,16 +6767,16 @@
 
 	function get_each_context_1(ctx, list, i) {
 	  const child_ctx = ctx.slice();
-	  child_ctx[48] = list[i];
-	  child_ctx[52] = i;
+	  child_ctx[50] = list[i];
+	  child_ctx[54] = i;
 	  return child_ctx;
 	}
 
 	function get_each_context$4(ctx, list, i) {
 	  const child_ctx = ctx.slice();
-	  child_ctx[48] = list[i];
+	  child_ctx[50] = list[i];
 	  return child_ctx;
-	} // (259:2) {:else}
+	} // (270:2) {:else}
 
 
 	function create_else_block$5(ctx) {
@@ -6802,7 +6802,7 @@
 
 	  const get_key = ctx =>
 	  /*index*/
-	  ctx[52];
+	  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);
@@ -6867,9 +6867,15 @@
 	      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[17]);
@@ -6890,12 +6896,12 @@
 	      /*ul_binding*/
 
 
-	      ctx[33](ul);
+	      ctx[34](ul);
 
 	      if (!mounted) {
 	        dispose = listen(goa_input, "click",
 	        /*showMenu*/
-	        ctx[24]);
+	        ctx[25]);
 	        mounted = true;
 	      }
 	    },
@@ -6992,7 +6998,7 @@
 
 	      if (dirty[0] &
 	      /*_options, _values, _highlightedIndex, onSelect*/
-	      67407872) {
+	      134516736) {
 	        each_value_1 =
 	        /*_options*/
 	        ctx[12];
@@ -7008,10 +7014,16 @@
 	      }
 
 	      if (dirty[0] &
-	      /*maxheight*/
-	      8 && ul_style_value !== (ul_style_value = `overflow-y: auto; max-height: ${
+	      /*maxheight, _dropdownMenuPos*/
+	      1048584 && 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);
 	      }
 
@@ -7039,13 +7051,13 @@
 	      /*ul_binding*/
 
 
-	      ctx[33](null);
+	      ctx[34](null);
 	      mounted = false;
 	      dispose();
 	    }
 
 	  };
-	} // (240:2) {#if _native}
+	} // (251:2) {#if _native}
 
 
 	function create_if_block$f(ctx) {
@@ -7074,7 +7086,7 @@
 
 	      select.disabled =
 	      /*_disabled*/
-	      ctx[22];
+	      ctx[23];
 	      attr(select, "aria-label", select_aria_label_value =
 	      /*arialabel*/
 	      ctx[1] ||
@@ -7082,7 +7094,7 @@
 	      ctx[0]);
 	      toggle_class(select, "error",
 	      /*_error*/
-	      ctx[23]);
+	      ctx[24]);
 	    },
 
 	    m(target, anchor) {
@@ -7095,12 +7107,12 @@
 	      /*select_binding*/
 
 
-	      ctx[31](select);
+	      ctx[32](select);
 
 	      if (!mounted) {
 	        dispose = listen(select, "change",
 	        /*onNativeSelect*/
-	        ctx[27]);
+	        ctx[28]);
 	        mounted = true;
 	      }
 	    },
@@ -7135,10 +7147,10 @@
 
 	      if (dirty[0] &
 	      /*_disabled*/
-	      4194304) {
+	      8388608) {
 	        select.disabled =
 	        /*_disabled*/
-	        ctx[22];
+	        ctx[23];
 	      }
 
 	      if (dirty[0] &
@@ -7153,10 +7165,10 @@
 
 	      if (dirty[0] &
 	      /*_error*/
-	      8388608) {
+	      16777216) {
 	        toggle_class(select, "error",
 	        /*_error*/
-	        ctx[23]);
+	        ctx[24]);
 	      }
 	    },
 
@@ -7165,18 +7177,19 @@
 	      destroy_each(each_blocks, detaching);
 	      /*select_binding*/
 
-	      ctx[31](null);
+	      ctx[32](null);
 	      mounted = false;
 	      dispose();
 	    }
 
 	  };
-	} // (260: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 {
@@ -7192,9 +7205,13 @@
 	      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;
 	      }
 	    },
@@ -7207,25 +7224,33 @@
       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);
 	    }
 
 	  };
-	} // (303: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[48].label ||
+	  ctx[50].label ||
 	  /*option*/
-	  ctx[48].value) + "";
+	  ctx[50].value) + "";
 	  let t0;
 	  let t1;
 	  let li_id_value;
@@ -7241,9 +7266,9 @@
 	  function click_handler() {
 	    return (
 	      /*click_handler*/
-	      ctx[32](
+	      ctx[33](
 	      /*option*/
-	      ctx[48])
+	      ctx[50])
 	    );
 	  }
 
@@ -7257,40 +7282,40 @@
 	      t1 = space();
 	      attr(li, "id", li_id_value =
 	      /*option*/
-	      ctx[48].label);
+	      ctx[50].label);
 	      attr(li, "role", "option");
 	      attr(li, "aria-label", li_aria_label_value =
 	      /*option*/
-	      ctx[48].label ||
+	      ctx[50].label ||
 	      /*option*/
-	      ctx[48].value);
+	      ctx[50].value);
 	      attr(li, "aria-selected", li_aria_selected_value =
 	      /*_values*/
 	      ctx[15].includes(
 	      /*option*/
-	      ctx[48].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[48].value}`);
+      ctx[50].value}`);
 	      attr(li, "data-index", li_data_index_value =
 	      /*index*/
-	      ctx[52]);
+	      ctx[54]);
 	      attr(li, "data-value", li_data_value_value =
 	      /*option*/
-	      ctx[48].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[52] ===
+	      ctx[54] ===
 	      /*_highlightedIndex*/
 	      ctx[18]);
 	      toggle_class(li, "dropdown-item--selected",
 	      /*_values*/
 	      ctx[15].includes(
 	      /*option*/
-	      ctx[48].value));
+	      ctx[50].value));
 	      this.first = li;
 	    },
 
@@ -7311,15 +7336,15 @@
 	      /*_options*/
 	      4096 && t0_value !== (t0_value = (
 	      /*option*/
-	      ctx[48].label ||
+	      ctx[50].label ||
 	      /*option*/
-	      ctx[48].value) + "")) set_data(t0, t0_value);
+	      ctx[50].value) + "")) set_data(t0, t0_value);
 
 	      if (dirty[0] &
 	      /*_options*/
 	      4096 && li_id_value !== (li_id_value =
 	      /*option*/
-	      ctx[48].label)) {
+	      ctx[50].label)) {
 	        attr(li, "id", li_id_value);
 	      }
 
@@ -7327,9 +7352,9 @@
 	      /*_options*/
 	      4096 && li_aria_label_value !== (li_aria_label_value =
 	      /*option*/
-	      ctx[48].label ||
+	      ctx[50].label ||
 	      /*option*/
-	      ctx[48].value)) {
+	      ctx[50].value)) {
 	        attr(li, "aria-label", li_aria_label_value);
 	      }
 
@@ -7339,7 +7364,7 @@
 	      /*_values*/
 	      ctx[15].includes(
 	      /*option*/
-	      ctx[48].value) ? "true" : "false")) {
+	      ctx[50].value) ? "true" : "false")) {
 	        attr(li, "aria-selected", li_aria_selected_value);
 	      }
 
@@ -7347,7 +7372,7 @@
 	      /*_options*/
 	      4096 && li_data_testid_value !== (li_data_testid_value = `dropdown-item-${
       /*option*/
-      ctx[48].value}`)) {
+      ctx[50].value}`)) {
 	        attr(li, "data-testid", li_data_testid_value);
 	      }
 
@@ -7355,7 +7380,7 @@
 	      /*_options*/
 	      4096 && li_data_index_value !== (li_data_index_value =
 	      /*index*/
-	      ctx[52])) {
+	      ctx[54])) {
 	        attr(li, "data-index", li_data_index_value);
 	      }
 
@@ -7363,7 +7388,7 @@
 	      /*_options*/
 	      4096 && li_data_value_value !== (li_data_value_value =
 	      /*option*/
-	      ctx[48].value)) {
+	      ctx[50].value)) {
 	        attr(li, "data-value", li_data_value_value);
 	      }
 
@@ -7372,7 +7397,7 @@
 	      266240) {
 	        toggle_class(li, "dropdown-item--tabbed",
 	        /*index*/
-	        ctx[52] ===
+	        ctx[54] ===
 	        /*_highlightedIndex*/
 	        ctx[18]);
 	      }
@@ -7384,7 +7409,7 @@
 	        /*_values*/
 	        ctx[15].includes(
 	        /*option*/
-	        ctx[48].value));
+	        ctx[50].value));
 	      }
 	    },
 
@@ -7395,14 +7420,14 @@
 	    }
 
 	  };
-	} // (249:6) {#each _options as option}
+	} // (260:6) {#each _options as option}
 
 
 	function create_each_block$4(ctx) {
 	  let option;
 	  let t0_value =
 	  /*option*/
-	  ctx[48].label + "";
+	  ctx[50].label + "";
 	  let t0;
 	  let t1;
 	  let option_selected_value;
@@ -7415,14 +7440,14 @@
 	      t1 = space();
 	      option.selected = option_selected_value =
 	      /*option*/
-	      ctx[48].selected;
+	      ctx[50].selected;
 	      option.__value = option_value_value =
 	      /*option*/
-	      ctx[48].value;
+	      ctx[50].value;
 	      option.value = option.__value;
 	      attr(option, "aria-label", option_aria_label_value =
 	      /*option*/
-	      ctx[48].label);
+	      ctx[50].label);
 	    },
 
 	    m(target, anchor) {
@@ -7436,13 +7461,13 @@
 	      /*_options*/
 	      4096 && t0_value !== (t0_value =
 	      /*option*/
-	      ctx[48].label + "")) set_data(t0, t0_value);
+	      ctx[50].label + "")) set_data(t0, t0_value);
 
 	      if (dirty[0] &
 	      /*_options*/
 	      4096 && option_selected_value !== (option_selected_value =
 	      /*option*/
-	      ctx[48].selected)) {
+	      ctx[50].selected)) {
 	        option.selected = option_selected_value;
 	      }
 
@@ -7450,7 +7475,7 @@
 	      /*_options*/
 	      4096 && option_value_value !== (option_value_value =
 	      /*option*/
-	      ctx[48].value)) {
+	      ctx[50].value)) {
 	        option.__value = option_value_value;
 	        option.value = option.__value;
 	      }
@@ -7459,7 +7484,7 @@
 	      /*_options*/
 	      4096 && option_aria_label_value !== (option_aria_label_value =
 	      /*option*/
-	      ctx[48].label)) {
+	      ctx[50].label)) {
 	        attr(option, "aria-label", option_aria_label_value);
 	      }
 	    },
@@ -7520,7 +7545,7 @@
 	      if_block.m(div, null);
 	      /*div_binding*/
 
-	      ctx[34](div);
+	      ctx[35](div);
 	    },
 
 	    p(ctx, dirty) {
@@ -7582,7 +7607,7 @@
 	      if_block.d();
 	      /*div_binding*/
 
-	      ctx[34](null);
+	      ctx[35](null);
 	    }
 
 	  };
@@ -7615,6 +7640,8 @@
 
 
 	      _menuEl.addEventListener("mouseover", onHighlight);
+
+	      setDropdownMenuPosition();
 	    });
 	  });
 
@@ -7680,6 +7707,8 @@
 
 	  let _computedWidth;
 
+	  let _dropdownMenuPos = "auto";
+
 	  let _el;
 
 	  let _menuEl;
@@ -7778,6 +7807,17 @@
 
 	    setHighlightedIndexToSelected();
 	    $$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() {
@@ -7893,8 +7933,8 @@
 	  function select_binding($$value) {
 	    binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 	      _selectEl = $$value;
-	      $$invalidate(21, _selectEl);
-	      ((($$invalidate(12, _options), $$invalidate(13, _el)), $$invalidate(28, value)), $$invalidate(14, _native)), $$invalidate(30, native);
+	      $$invalidate(22, _selectEl);
+	      ((($$invalidate(12, _options), $$invalidate(13, _el)), $$invalidate(29, value)), $$invalidate(14, _native)), $$invalidate(31, native);
 	    });
 	  }
 
@@ -7903,7 +7943,7 @@
 	  function ul_binding($$value) {
 	    binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 	      _menuEl = $$value;
-	      $$invalidate(20, _menuEl);
+	      $$invalidate(21, _menuEl);
 	    });
 	  }
 
@@ -7917,15 +7957,15 @@
 	  $$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);
@@ -7936,30 +7976,30 @@
 	    if ($$self.$$.dirty[0] &
 	    /*disabled*/
 	    64) {
-	      $$invalidate(22, _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) {
+	    1) {
 	      $$invalidate(14, _native = toBoolean(native));
 	    }
 
 	    if ($$self.$$.dirty[0] &
 	    /*_el, value, _native, _options*/
-	    268464128) {
+	    536899584) {
 	      {
 	        if (_el) {
 	          $$invalidate(15, _values = parseValues(value));
@@ -7975,13 +8015,13 @@
 	    }
 	  };
 
-	  return [name, arialabel, leadingicon, maxheight, placeholder, width, disabled, error, mt, mr, mb, ml, _options, _el, _native, _values, _selectedLabel, _isMenuVisible, _highlightedIndex, _computedWidth, _menuEl, _selectEl, _disabled, _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: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;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),
@@ -7989,15 +8029,15 @@
 	    }, 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,
@@ -8043,7 +8083,7 @@
 	  }
 
 	  get value() {
-	    return this.$$.ctx[28];
+	    return this.$$.ctx[29];
 	  }
 
 	  set value(value) {
@@ -8120,7 +8160,7 @@
 	  }
 
 	  get multiselect() {
-	    return this.$$.ctx[29];
+	    return this.$$.ctx[30];
 	  }
 
 	  set multiselect(multiselect) {
@@ -8131,7 +8171,7 @@
 	  }
 
 	  get native() {
-	    return this.$$.ctx[30];
+	    return this.$$.ctx[31];
 	  }
 
 	  set native(native) {