@abgov/web-components 1.7.0 → 1.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1203,7 +1203,7 @@ class Accordion extends SvelteElement {
1203
1203
  super();
1204
1204
 
1205
1205
  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
1206
- }.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>`;
1206
+ }.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>`;
1207
1207
 
1208
1208
  init(
1209
1209
  this,
@@ -1813,7 +1813,7 @@ function instance$F($$self, $$props, $$invalidate) {
1813
1813
  class Badge extends SvelteElement {
1814
1814
  constructor(options) {
1815
1815
  super();
1816
- 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>`;
1816
+ 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>`;
1817
1817
 
1818
1818
  init(
1819
1819
  this,
@@ -5038,7 +5038,7 @@ function instance$v($$self, $$props, $$invalidate) {
5038
5038
  class Container extends SvelteElement {
5039
5039
  constructor(options) {
5040
5040
  super();
5041
- 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>`;
5041
+ 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>`;
5042
5042
 
5043
5043
  init(
5044
5044
  this,
@@ -5266,7 +5266,7 @@ function instance$u($$self, $$props, $$invalidate) {
5266
5266
  class Details extends SvelteElement {
5267
5267
  constructor(options) {
5268
5268
  super();
5269
- 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>`;
5269
+ 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>`;
5270
5270
 
5271
5271
  init(
5272
5272
  this,
@@ -5484,18 +5484,18 @@ customElements.define("goa-divider", Divider);
5484
5484
 
5485
5485
  function get_each_context_1(ctx, list, i) {
5486
5486
  const child_ctx = ctx.slice();
5487
- child_ctx[49] = list[i];
5488
- child_ctx[53] = i;
5487
+ child_ctx[50] = list[i];
5488
+ child_ctx[54] = i;
5489
5489
  return child_ctx;
5490
5490
  }
5491
5491
 
5492
- function get_each_context$4(ctx, list, i) {
5492
+ function get_each_context$5(ctx, list, i) {
5493
5493
  const child_ctx = ctx.slice();
5494
- child_ctx[49] = list[i];
5494
+ child_ctx[50] = list[i];
5495
5495
  return child_ctx;
5496
5496
  }
5497
5497
 
5498
- // (256:2) {:else}
5498
+ // (270:2) {:else}
5499
5499
  function create_else_block$5(ctx) {
5500
5500
  let t0;
5501
5501
  let goa_input;
@@ -5510,9 +5510,9 @@ function create_else_block$5(ctx) {
5510
5510
  let ul_style_value;
5511
5511
  let mounted;
5512
5512
  let dispose;
5513
- let if_block = /*_isMenuVisible*/ ctx[15] && create_if_block_1$7(ctx);
5514
- let each_value_1 = /*_options*/ ctx[13];
5515
- const get_key = ctx => /*index*/ ctx[53];
5513
+ let if_block = /*_isMenuVisible*/ ctx[17] && create_if_block_1$7(ctx);
5514
+ let each_value_1 = /*_options*/ ctx[12];
5515
+ const get_key = ctx => /*index*/ ctx[54];
5516
5516
 
5517
5517
  for (let i = 0; i < each_value_1.length; i += 1) {
5518
5518
  let child_ctx = get_each_context_1(ctx, each_value_1, i);
@@ -5539,24 +5539,30 @@ function create_else_block$5(ctx) {
5539
5539
  set_custom_element_data(goa_input, "leadingicon", /*leadingicon*/ ctx[2]);
5540
5540
  set_custom_element_data(goa_input, "placeholder", /*placeholder*/ ctx[4]);
5541
5541
  set_custom_element_data(goa_input, "aria-controls", "menu");
5542
- set_custom_element_data(goa_input, "aria-expanded", /*_isMenuVisible*/ ctx[15]);
5542
+ set_custom_element_data(goa_input, "aria-expanded", /*_isMenuVisible*/ ctx[17]);
5543
5543
  set_custom_element_data(goa_input, "arialabel", goa_input_arialabel_value = /*arialabel*/ ctx[1] || /*name*/ ctx[0]);
5544
5544
  set_custom_element_data(goa_input, "data-testid", goa_input_data_testid_value = `${/*name*/ ctx[0]}-dropdown-input`);
5545
5545
  set_custom_element_data(goa_input, "readonly", "");
5546
5546
  set_custom_element_data(goa_input, "role", "combobox");
5547
5547
  set_custom_element_data(goa_input, "trailingicon", "chevron-down");
5548
5548
  set_custom_element_data(goa_input, "type", "text");
5549
- set_custom_element_data(goa_input, "value", /*_selectedLabel*/ ctx[14]);
5549
+ set_custom_element_data(goa_input, "value", /*_selectedLabel*/ ctx[16]);
5550
5550
  set_custom_element_data(goa_input, "width", "100%");
5551
5551
  set_custom_element_data(goa_input, "name", /*name*/ ctx[0]);
5552
5552
  attr(ul, "id", "menu");
5553
5553
  attr(ul, "role", "listbox");
5554
- attr(ul, "aria-activedescendant", /*_selectedLabel*/ ctx[14]);
5554
+ attr(ul, "aria-activedescendant", /*_selectedLabel*/ ctx[16]);
5555
5555
  attr(ul, "data-testid", "dropdown-menu");
5556
5556
  attr(ul, "tabindex", "0");
5557
5557
  attr(ul, "class", "dropdown-list");
5558
- attr(ul, "style", ul_style_value = `overflow-y: auto; max-height: ${/*maxheight*/ ctx[3]}`);
5559
- toggle_class(ul, "dropdown-active", /*_isMenuVisible*/ ctx[15]);
5558
+
5559
+ attr(ul, "style", ul_style_value = `
5560
+ overflow-y: auto;
5561
+ max-height: ${/*maxheight*/ ctx[3]};
5562
+ --bottom: ${/*_dropdownMenuPos*/ ctx[20]};
5563
+ `);
5564
+
5565
+ toggle_class(ul, "dropdown-active", /*_isMenuVisible*/ ctx[17]);
5560
5566
  },
5561
5567
  m(target, anchor) {
5562
5568
  if (if_block) if_block.m(target, anchor);
@@ -5571,15 +5577,15 @@ function create_else_block$5(ctx) {
5571
5577
  each_blocks[i].m(ul, null);
5572
5578
  }
5573
5579
 
5574
- /*ul_binding*/ ctx[33](ul);
5580
+ /*ul_binding*/ ctx[34](ul);
5575
5581
 
5576
5582
  if (!mounted) {
5577
- dispose = listen(goa_input, "click", /*showMenu*/ ctx[24]);
5583
+ dispose = listen(goa_input, "click", /*showMenu*/ ctx[25]);
5578
5584
  mounted = true;
5579
5585
  }
5580
5586
  },
5581
5587
  p(ctx, dirty) {
5582
- if (/*_isMenuVisible*/ ctx[15]) {
5588
+ if (/*_isMenuVisible*/ ctx[17]) {
5583
5589
  if (if_block) {
5584
5590
  if_block.p(ctx, dirty);
5585
5591
  } else {
@@ -5608,8 +5614,8 @@ function create_else_block$5(ctx) {
5608
5614
  set_custom_element_data(goa_input, "placeholder", /*placeholder*/ ctx[4]);
5609
5615
  }
5610
5616
 
5611
- if (dirty[0] & /*_isMenuVisible*/ 32768) {
5612
- set_custom_element_data(goa_input, "aria-expanded", /*_isMenuVisible*/ ctx[15]);
5617
+ if (dirty[0] & /*_isMenuVisible*/ 131072) {
5618
+ set_custom_element_data(goa_input, "aria-expanded", /*_isMenuVisible*/ ctx[17]);
5613
5619
  }
5614
5620
 
5615
5621
  if (dirty[0] & /*arialabel, name*/ 3 && goa_input_arialabel_value !== (goa_input_arialabel_value = /*arialabel*/ ctx[1] || /*name*/ ctx[0])) {
@@ -5620,29 +5626,33 @@ function create_else_block$5(ctx) {
5620
5626
  set_custom_element_data(goa_input, "data-testid", goa_input_data_testid_value);
5621
5627
  }
5622
5628
 
5623
- if (dirty[0] & /*_selectedLabel*/ 16384) {
5624
- set_custom_element_data(goa_input, "value", /*_selectedLabel*/ ctx[14]);
5629
+ if (dirty[0] & /*_selectedLabel*/ 65536) {
5630
+ set_custom_element_data(goa_input, "value", /*_selectedLabel*/ ctx[16]);
5625
5631
  }
5626
5632
 
5627
5633
  if (dirty[0] & /*name*/ 1) {
5628
5634
  set_custom_element_data(goa_input, "name", /*name*/ ctx[0]);
5629
5635
  }
5630
5636
 
5631
- if (dirty[0] & /*_options, _values, _highlightedIndex, onSelect*/ 67186688) {
5632
- each_value_1 = /*_options*/ ctx[13];
5637
+ if (dirty[0] & /*_options, _values, _highlightedIndex, onSelect*/ 134516736) {
5638
+ each_value_1 = /*_options*/ ctx[12];
5633
5639
  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);
5634
5640
  }
5635
5641
 
5636
- if (dirty[0] & /*_selectedLabel*/ 16384) {
5637
- attr(ul, "aria-activedescendant", /*_selectedLabel*/ ctx[14]);
5642
+ if (dirty[0] & /*_selectedLabel*/ 65536) {
5643
+ attr(ul, "aria-activedescendant", /*_selectedLabel*/ ctx[16]);
5638
5644
  }
5639
5645
 
5640
- if (dirty[0] & /*maxheight*/ 8 && ul_style_value !== (ul_style_value = `overflow-y: auto; max-height: ${/*maxheight*/ ctx[3]}`)) {
5646
+ if (dirty[0] & /*maxheight, _dropdownMenuPos*/ 1048584 && ul_style_value !== (ul_style_value = `
5647
+ overflow-y: auto;
5648
+ max-height: ${/*maxheight*/ ctx[3]};
5649
+ --bottom: ${/*_dropdownMenuPos*/ ctx[20]};
5650
+ `)) {
5641
5651
  attr(ul, "style", ul_style_value);
5642
5652
  }
5643
5653
 
5644
- if (dirty[0] & /*_isMenuVisible*/ 32768) {
5645
- toggle_class(ul, "dropdown-active", /*_isMenuVisible*/ ctx[15]);
5654
+ if (dirty[0] & /*_isMenuVisible*/ 131072) {
5655
+ toggle_class(ul, "dropdown-active", /*_isMenuVisible*/ ctx[17]);
5646
5656
  }
5647
5657
  },
5648
5658
  d(detaching) {
@@ -5658,25 +5668,25 @@ function create_else_block$5(ctx) {
5658
5668
  each_blocks[i].d();
5659
5669
  }
5660
5670
 
5661
- /*ul_binding*/ ctx[33](null);
5671
+ /*ul_binding*/ ctx[34](null);
5662
5672
  mounted = false;
5663
5673
  dispose();
5664
5674
  }
5665
5675
  };
5666
5676
  }
5667
5677
 
5668
- // (237:2) {#if _native}
5678
+ // (251:2) {#if _native}
5669
5679
  function create_if_block$f(ctx) {
5670
5680
  let select;
5671
5681
  let slot;
5672
5682
  let select_aria_label_value;
5673
5683
  let mounted;
5674
5684
  let dispose;
5675
- let each_value = /*_options*/ ctx[13];
5685
+ let each_value = /*_options*/ ctx[12];
5676
5686
  let each_blocks = [];
5677
5687
 
5678
5688
  for (let i = 0; i < each_value.length; i += 1) {
5679
- each_blocks[i] = create_each_block$4(get_each_context$4(ctx, each_value, i));
5689
+ each_blocks[i] = create_each_block$5(get_each_context$5(ctx, each_value, i));
5680
5690
  }
5681
5691
 
5682
5692
  return {
@@ -5688,9 +5698,9 @@ function create_if_block$f(ctx) {
5688
5698
  each_blocks[i].c();
5689
5699
  }
5690
5700
 
5691
- select.disabled = /*_disabled*/ ctx[21];
5701
+ select.disabled = /*_disabled*/ ctx[23];
5692
5702
  attr(select, "aria-label", select_aria_label_value = /*arialabel*/ ctx[1] || /*name*/ ctx[0]);
5693
- toggle_class(select, "error", /*_error*/ ctx[23]);
5703
+ toggle_class(select, "error", /*_error*/ ctx[24]);
5694
5704
  },
5695
5705
  m(target, anchor) {
5696
5706
  insert(target, select, anchor);
@@ -5700,25 +5710,25 @@ function create_if_block$f(ctx) {
5700
5710
  each_blocks[i].m(select, null);
5701
5711
  }
5702
5712
 
5703
- /*select_binding*/ ctx[31](select);
5713
+ /*select_binding*/ ctx[32](select);
5704
5714
 
5705
5715
  if (!mounted) {
5706
- dispose = listen(select, "change", /*onNativeSelect*/ ctx[27]);
5716
+ dispose = listen(select, "change", /*onNativeSelect*/ ctx[28]);
5707
5717
  mounted = true;
5708
5718
  }
5709
5719
  },
5710
5720
  p(ctx, dirty) {
5711
- if (dirty[0] & /*_options*/ 8192) {
5712
- each_value = /*_options*/ ctx[13];
5721
+ if (dirty[0] & /*_options*/ 4096) {
5722
+ each_value = /*_options*/ ctx[12];
5713
5723
  let i;
5714
5724
 
5715
5725
  for (i = 0; i < each_value.length; i += 1) {
5716
- const child_ctx = get_each_context$4(ctx, each_value, i);
5726
+ const child_ctx = get_each_context$5(ctx, each_value, i);
5717
5727
 
5718
5728
  if (each_blocks[i]) {
5719
5729
  each_blocks[i].p(child_ctx, dirty);
5720
5730
  } else {
5721
- each_blocks[i] = create_each_block$4(child_ctx);
5731
+ each_blocks[i] = create_each_block$5(child_ctx);
5722
5732
  each_blocks[i].c();
5723
5733
  each_blocks[i].m(select, null);
5724
5734
  }
@@ -5731,32 +5741,33 @@ function create_if_block$f(ctx) {
5731
5741
  each_blocks.length = each_value.length;
5732
5742
  }
5733
5743
 
5734
- if (dirty[0] & /*_disabled*/ 2097152) {
5735
- select.disabled = /*_disabled*/ ctx[21];
5744
+ if (dirty[0] & /*_disabled*/ 8388608) {
5745
+ select.disabled = /*_disabled*/ ctx[23];
5736
5746
  }
5737
5747
 
5738
5748
  if (dirty[0] & /*arialabel, name*/ 3 && select_aria_label_value !== (select_aria_label_value = /*arialabel*/ ctx[1] || /*name*/ ctx[0])) {
5739
5749
  attr(select, "aria-label", select_aria_label_value);
5740
5750
  }
5741
5751
 
5742
- if (dirty[0] & /*_error*/ 8388608) {
5743
- toggle_class(select, "error", /*_error*/ ctx[23]);
5752
+ if (dirty[0] & /*_error*/ 16777216) {
5753
+ toggle_class(select, "error", /*_error*/ ctx[24]);
5744
5754
  }
5745
5755
  },
5746
5756
  d(detaching) {
5747
5757
  if (detaching) detach(select);
5748
5758
  destroy_each(each_blocks, detaching);
5749
- /*select_binding*/ ctx[31](null);
5759
+ /*select_binding*/ ctx[32](null);
5750
5760
  mounted = false;
5751
5761
  dispose();
5752
5762
  }
5753
5763
  };
5754
5764
  }
5755
5765
 
5756
- // (257:4) {#if _isMenuVisible}
5766
+ // (271:4) {#if _isMenuVisible}
5757
5767
  function create_if_block_1$7(ctx) {
5758
5768
  let div;
5759
5769
  let div_data_testid_value;
5770
+ let noscroll_action;
5760
5771
  let mounted;
5761
5772
  let dispose;
5762
5773
 
@@ -5770,7 +5781,11 @@ function create_if_block_1$7(ctx) {
5770
5781
  insert(target, div, anchor);
5771
5782
 
5772
5783
  if (!mounted) {
5773
- dispose = listen(div, "click", /*closeMenu*/ ctx[25]);
5784
+ dispose = [
5785
+ listen(div, "click", /*closeMenu*/ ctx[26]),
5786
+ action_destroyer(noscroll_action = noscroll.call(null, div, { enable: /*_isMenuVisible*/ ctx[17] }))
5787
+ ];
5788
+
5774
5789
  mounted = true;
5775
5790
  }
5776
5791
  },
@@ -5778,19 +5793,21 @@ function create_if_block_1$7(ctx) {
5778
5793
  if (dirty[0] & /*name*/ 1 && div_data_testid_value !== (div_data_testid_value = `${/*name*/ ctx[0]}-dropdown-background`)) {
5779
5794
  attr(div, "data-testid", div_data_testid_value);
5780
5795
  }
5796
+
5797
+ if (noscroll_action && is_function(noscroll_action.update) && dirty[0] & /*_isMenuVisible*/ 131072) noscroll_action.update.call(null, { enable: /*_isMenuVisible*/ ctx[17] });
5781
5798
  },
5782
5799
  d(detaching) {
5783
5800
  if (detaching) detach(div);
5784
5801
  mounted = false;
5785
- dispose();
5802
+ run_all(dispose);
5786
5803
  }
5787
5804
  };
5788
5805
  }
5789
5806
 
5790
- // (300:6) {#each _options as option, index (index)}
5807
+ // (319:6) {#each _options as option, index (index)}
5791
5808
  function create_each_block_1(key_1, ctx) {
5792
5809
  let li;
5793
- let t0_value = (/*option*/ ctx[49].label || /*option*/ ctx[49].value) + "";
5810
+ let t0_value = (/*option*/ ctx[50].label || /*option*/ ctx[50].value) + "";
5794
5811
  let t0;
5795
5812
  let t1;
5796
5813
  let li_id_value;
@@ -5804,7 +5821,7 @@ function create_each_block_1(key_1, ctx) {
5804
5821
  let dispose;
5805
5822
 
5806
5823
  function click_handler() {
5807
- return /*click_handler*/ ctx[32](/*option*/ ctx[49]);
5824
+ return /*click_handler*/ ctx[33](/*option*/ ctx[50]);
5808
5825
  }
5809
5826
 
5810
5827
  return {
@@ -5814,22 +5831,22 @@ function create_each_block_1(key_1, ctx) {
5814
5831
  li = element("li");
5815
5832
  t0 = text(t0_value);
5816
5833
  t1 = space();
5817
- attr(li, "id", li_id_value = /*option*/ ctx[49].label);
5834
+ attr(li, "id", li_id_value = /*option*/ ctx[50].label);
5818
5835
  attr(li, "role", "option");
5819
- attr(li, "aria-label", li_aria_label_value = /*option*/ ctx[49].label || /*option*/ ctx[49].value);
5836
+ attr(li, "aria-label", li_aria_label_value = /*option*/ ctx[50].label || /*option*/ ctx[50].value);
5820
5837
 
5821
- attr(li, "aria-selected", li_aria_selected_value = /*_values*/ ctx[12].includes(/*option*/ ctx[49].value)
5838
+ attr(li, "aria-selected", li_aria_selected_value = /*_values*/ ctx[15].includes(/*option*/ ctx[50].value)
5822
5839
  ? "true"
5823
5840
  : "false");
5824
5841
 
5825
5842
  attr(li, "class", "dropdown-item");
5826
- attr(li, "data-testid", li_data_testid_value = `dropdown-item-${/*option*/ ctx[49].value}`);
5827
- attr(li, "data-index", li_data_index_value = /*index*/ ctx[53]);
5828
- attr(li, "data-value", li_data_value_value = /*option*/ ctx[49].value);
5843
+ attr(li, "data-testid", li_data_testid_value = `dropdown-item-${/*option*/ ctx[50].value}`);
5844
+ attr(li, "data-index", li_data_index_value = /*index*/ ctx[54]);
5845
+ attr(li, "data-value", li_data_value_value = /*option*/ ctx[50].value);
5829
5846
  attr(li, "style", li_style_value = `display: ${"block"}`);
5830
5847
  toggle_class(li, "dropdown-item--disabled", false);
5831
- toggle_class(li, "dropdown-item--tabbed", /*index*/ ctx[53] === /*_highlightedIndex*/ ctx[16]);
5832
- toggle_class(li, "dropdown-item--selected", /*_values*/ ctx[12].includes(/*option*/ ctx[49].value));
5848
+ toggle_class(li, "dropdown-item--tabbed", /*index*/ ctx[54] === /*_highlightedIndex*/ ctx[18]);
5849
+ toggle_class(li, "dropdown-item--selected", /*_values*/ ctx[15].includes(/*option*/ ctx[50].value));
5833
5850
  this.first = li;
5834
5851
  },
5835
5852
  m(target, anchor) {
@@ -5844,40 +5861,40 @@ function create_each_block_1(key_1, ctx) {
5844
5861
  },
5845
5862
  p(new_ctx, dirty) {
5846
5863
  ctx = new_ctx;
5847
- if (dirty[0] & /*_options*/ 8192 && t0_value !== (t0_value = (/*option*/ ctx[49].label || /*option*/ ctx[49].value) + "")) set_data(t0, t0_value);
5864
+ if (dirty[0] & /*_options*/ 4096 && t0_value !== (t0_value = (/*option*/ ctx[50].label || /*option*/ ctx[50].value) + "")) set_data(t0, t0_value);
5848
5865
 
5849
- if (dirty[0] & /*_options*/ 8192 && li_id_value !== (li_id_value = /*option*/ ctx[49].label)) {
5866
+ if (dirty[0] & /*_options*/ 4096 && li_id_value !== (li_id_value = /*option*/ ctx[50].label)) {
5850
5867
  attr(li, "id", li_id_value);
5851
5868
  }
5852
5869
 
5853
- if (dirty[0] & /*_options*/ 8192 && li_aria_label_value !== (li_aria_label_value = /*option*/ ctx[49].label || /*option*/ ctx[49].value)) {
5870
+ if (dirty[0] & /*_options*/ 4096 && li_aria_label_value !== (li_aria_label_value = /*option*/ ctx[50].label || /*option*/ ctx[50].value)) {
5854
5871
  attr(li, "aria-label", li_aria_label_value);
5855
5872
  }
5856
5873
 
5857
- if (dirty[0] & /*_values, _options*/ 12288 && li_aria_selected_value !== (li_aria_selected_value = /*_values*/ ctx[12].includes(/*option*/ ctx[49].value)
5874
+ if (dirty[0] & /*_values, _options*/ 36864 && li_aria_selected_value !== (li_aria_selected_value = /*_values*/ ctx[15].includes(/*option*/ ctx[50].value)
5858
5875
  ? "true"
5859
5876
  : "false")) {
5860
5877
  attr(li, "aria-selected", li_aria_selected_value);
5861
5878
  }
5862
5879
 
5863
- if (dirty[0] & /*_options*/ 8192 && li_data_testid_value !== (li_data_testid_value = `dropdown-item-${/*option*/ ctx[49].value}`)) {
5880
+ if (dirty[0] & /*_options*/ 4096 && li_data_testid_value !== (li_data_testid_value = `dropdown-item-${/*option*/ ctx[50].value}`)) {
5864
5881
  attr(li, "data-testid", li_data_testid_value);
5865
5882
  }
5866
5883
 
5867
- if (dirty[0] & /*_options*/ 8192 && li_data_index_value !== (li_data_index_value = /*index*/ ctx[53])) {
5884
+ if (dirty[0] & /*_options*/ 4096 && li_data_index_value !== (li_data_index_value = /*index*/ ctx[54])) {
5868
5885
  attr(li, "data-index", li_data_index_value);
5869
5886
  }
5870
5887
 
5871
- if (dirty[0] & /*_options*/ 8192 && li_data_value_value !== (li_data_value_value = /*option*/ ctx[49].value)) {
5888
+ if (dirty[0] & /*_options*/ 4096 && li_data_value_value !== (li_data_value_value = /*option*/ ctx[50].value)) {
5872
5889
  attr(li, "data-value", li_data_value_value);
5873
5890
  }
5874
5891
 
5875
- if (dirty[0] & /*_options, _highlightedIndex*/ 73728) {
5876
- toggle_class(li, "dropdown-item--tabbed", /*index*/ ctx[53] === /*_highlightedIndex*/ ctx[16]);
5892
+ if (dirty[0] & /*_options, _highlightedIndex*/ 266240) {
5893
+ toggle_class(li, "dropdown-item--tabbed", /*index*/ ctx[54] === /*_highlightedIndex*/ ctx[18]);
5877
5894
  }
5878
5895
 
5879
- if (dirty[0] & /*_values, _options*/ 12288) {
5880
- toggle_class(li, "dropdown-item--selected", /*_values*/ ctx[12].includes(/*option*/ ctx[49].value));
5896
+ if (dirty[0] & /*_values, _options*/ 36864) {
5897
+ toggle_class(li, "dropdown-item--selected", /*_values*/ ctx[15].includes(/*option*/ ctx[50].value));
5881
5898
  }
5882
5899
  },
5883
5900
  d(detaching) {
@@ -5888,10 +5905,10 @@ function create_each_block_1(key_1, ctx) {
5888
5905
  };
5889
5906
  }
5890
5907
 
5891
- // (246:6) {#each _options as option}
5892
- function create_each_block$4(ctx) {
5908
+ // (260:6) {#each _options as option}
5909
+ function create_each_block$5(ctx) {
5893
5910
  let option;
5894
- let t0_value = /*option*/ ctx[49].label + "";
5911
+ let t0_value = /*option*/ ctx[50].label + "";
5895
5912
  let t0;
5896
5913
  let t1;
5897
5914
  let option_selected_value;
@@ -5903,10 +5920,10 @@ function create_each_block$4(ctx) {
5903
5920
  option = element("option");
5904
5921
  t0 = text(t0_value);
5905
5922
  t1 = space();
5906
- option.selected = option_selected_value = /*option*/ ctx[49].selected;
5907
- option.__value = option_value_value = /*option*/ ctx[49].value;
5923
+ option.selected = option_selected_value = /*option*/ ctx[50].selected;
5924
+ option.__value = option_value_value = /*option*/ ctx[50].value;
5908
5925
  option.value = option.__value;
5909
- attr(option, "aria-label", option_aria_label_value = /*option*/ ctx[49].label);
5926
+ attr(option, "aria-label", option_aria_label_value = /*option*/ ctx[50].label);
5910
5927
  },
5911
5928
  m(target, anchor) {
5912
5929
  insert(target, option, anchor);
@@ -5914,18 +5931,18 @@ function create_each_block$4(ctx) {
5914
5931
  append(option, t1);
5915
5932
  },
5916
5933
  p(ctx, dirty) {
5917
- if (dirty[0] & /*_options*/ 8192 && t0_value !== (t0_value = /*option*/ ctx[49].label + "")) set_data(t0, t0_value);
5934
+ if (dirty[0] & /*_options*/ 4096 && t0_value !== (t0_value = /*option*/ ctx[50].label + "")) set_data(t0, t0_value);
5918
5935
 
5919
- if (dirty[0] & /*_options*/ 8192 && option_selected_value !== (option_selected_value = /*option*/ ctx[49].selected)) {
5936
+ if (dirty[0] & /*_options*/ 4096 && option_selected_value !== (option_selected_value = /*option*/ ctx[50].selected)) {
5920
5937
  option.selected = option_selected_value;
5921
5938
  }
5922
5939
 
5923
- if (dirty[0] & /*_options*/ 8192 && option_value_value !== (option_value_value = /*option*/ ctx[49].value)) {
5940
+ if (dirty[0] & /*_options*/ 4096 && option_value_value !== (option_value_value = /*option*/ ctx[50].value)) {
5924
5941
  option.__value = option_value_value;
5925
5942
  option.value = option.__value;
5926
5943
  }
5927
5944
 
5928
- if (dirty[0] & /*_options*/ 8192 && option_aria_label_value !== (option_aria_label_value = /*option*/ ctx[49].label)) {
5945
+ if (dirty[0] & /*_options*/ 4096 && option_aria_label_value !== (option_aria_label_value = /*option*/ ctx[50].label)) {
5929
5946
  attr(option, "aria-label", option_aria_label_value);
5930
5947
  }
5931
5948
  },
@@ -5941,7 +5958,7 @@ function create_fragment$v(ctx) {
5941
5958
  let div_style_value;
5942
5959
 
5943
5960
  function select_block_type(ctx, dirty) {
5944
- if (/*_native*/ ctx[22]) return create_if_block$f;
5961
+ if (/*_native*/ ctx[14]) return create_if_block$f;
5945
5962
  return create_else_block$5;
5946
5963
  }
5947
5964
 
@@ -5958,15 +5975,15 @@ function create_fragment$v(ctx) {
5958
5975
 
5959
5976
  attr(div, "style", div_style_value = `
5960
5977
  ${calculateMargin(/*mt*/ ctx[8], /*mr*/ ctx[9], /*mb*/ ctx[10], /*ml*/ ctx[11])}
5961
- --width: ${/*width*/ ctx[5] || /*_computedWidth*/ ctx[17]}
5978
+ --width: ${/*width*/ ctx[5] || /*_computedWidth*/ ctx[19]}
5962
5979
  `);
5963
5980
 
5964
- toggle_class(div, "dropdown-native", /*_native*/ ctx[22]);
5981
+ toggle_class(div, "dropdown-native", /*_native*/ ctx[14]);
5965
5982
  },
5966
5983
  m(target, anchor) {
5967
5984
  insert(target, div, anchor);
5968
5985
  if_block.m(div, null);
5969
- /*div_binding*/ ctx[34](div);
5986
+ /*div_binding*/ ctx[35](div);
5970
5987
  },
5971
5988
  p(ctx, dirty) {
5972
5989
  if (current_block_type === (current_block_type = select_block_type(ctx)) && if_block) {
@@ -5985,15 +6002,15 @@ function create_fragment$v(ctx) {
5985
6002
  attr(div, "data-testid", div_data_testid_value);
5986
6003
  }
5987
6004
 
5988
- if (dirty[0] & /*mt, mr, mb, ml, width, _computedWidth*/ 134944 && div_style_value !== (div_style_value = `
6005
+ if (dirty[0] & /*mt, mr, mb, ml, width, _computedWidth*/ 528160 && div_style_value !== (div_style_value = `
5989
6006
  ${calculateMargin(/*mt*/ ctx[8], /*mr*/ ctx[9], /*mb*/ ctx[10], /*ml*/ ctx[11])}
5990
- --width: ${/*width*/ ctx[5] || /*_computedWidth*/ ctx[17]}
6007
+ --width: ${/*width*/ ctx[5] || /*_computedWidth*/ ctx[19]}
5991
6008
  `)) {
5992
6009
  attr(div, "style", div_style_value);
5993
6010
  }
5994
6011
 
5995
- if (dirty[0] & /*_native*/ 4194304) {
5996
- toggle_class(div, "dropdown-native", /*_native*/ ctx[22]);
6012
+ if (dirty[0] & /*_native*/ 16384) {
6013
+ toggle_class(div, "dropdown-native", /*_native*/ ctx[14]);
5997
6014
  }
5998
6015
  },
5999
6016
  i: noop,
@@ -6001,11 +6018,26 @@ function create_fragment$v(ctx) {
6001
6018
  d(detaching) {
6002
6019
  if (detaching) detach(div);
6003
6020
  if_block.d();
6004
- /*div_binding*/ ctx[34](null);
6021
+ /*div_binding*/ ctx[35](null);
6005
6022
  }
6006
6023
  };
6007
6024
  }
6008
6025
 
6026
+ function parseValues(selectedValue) {
6027
+ let rawValue;
6028
+
6029
+ try {
6030
+ rawValue = JSON.parse(selectedValue || "[]");
6031
+ } catch(e) {
6032
+ rawValue = [selectedValue];
6033
+ }
6034
+
6035
+ const rawValues = typeof rawValue === "object" ? rawValue : [rawValue];
6036
+
6037
+ // convert all values to strings to avoid later type comparison issues
6038
+ return rawValues.map(val => `${val}`);
6039
+ }
6040
+
6009
6041
  function instance$s($$self, $$props, $$invalidate) {
6010
6042
  let _disabled;
6011
6043
  let _error;
@@ -6035,30 +6067,21 @@ function instance$s($$self, $$props, $$invalidate) {
6035
6067
  let _isMenuVisible = false;
6036
6068
  let _highlightedIndex = 0;
6037
6069
  let _computedWidth;
6070
+ let _dropdownMenuPos = "auto";
6038
6071
  let _el;
6039
6072
  let _menuEl;
6040
6073
  let _selectEl;
6041
6074
 
6042
6075
  onMount(async () => {
6043
- await tick();
6044
- $$invalidate(12, _values = parseValues());
6045
- $$invalidate(13, _options = getOptions());
6046
-
6047
- if (!_native) {
6048
- $$invalidate(17, _computedWidth = getCustomDropdownWidth(_options));
6049
- addKeyboardEventListeners();
6050
- setHighlightedIndexToSelected();
6051
- }
6052
-
6053
6076
  // watch for DOM changes within the slot => dynamic binding
6054
6077
  const slot = _el.querySelector("slot");
6055
6078
 
6056
6079
  slot === null || slot === void 0
6057
6080
  ? void 0
6058
6081
  : slot.addEventListener("slotchange", _e => {
6059
- $$invalidate(14, _selectedLabel = "");
6060
- $$invalidate(12, _values = parseValues());
6061
- $$invalidate(13, _options = getOptions());
6082
+ $$invalidate(16, _selectedLabel = "");
6083
+ $$invalidate(15, _values = parseValues(value));
6084
+ $$invalidate(12, _options = getOptions());
6062
6085
  });
6063
6086
  });
6064
6087
 
@@ -6094,8 +6117,8 @@ function instance$s($$self, $$props, $$invalidate) {
6094
6117
  const selected = _values.includes(value);
6095
6118
 
6096
6119
  if (selected) {
6097
- $$invalidate(14, _selectedLabel = label);
6098
- $$invalidate(12, _values = [value]);
6120
+ $$invalidate(16, _selectedLabel = label);
6121
+ $$invalidate(15, _values = [value]);
6099
6122
  }
6100
6123
 
6101
6124
  return { selected, value, label };
@@ -6133,28 +6156,12 @@ function instance$s($$self, $$props, $$invalidate) {
6133
6156
  _el.removeEventListener("blur", onBlur, true);
6134
6157
  }
6135
6158
 
6136
- // parse and convert values to strings to avoid later type comparison issues
6137
- function parseValues() {
6138
- let rawValue;
6139
-
6140
- try {
6141
- rawValue = JSON.parse(value || "[]");
6142
- } catch(e) {
6143
- rawValue = [value];
6144
- }
6145
-
6146
- const rawValues = typeof rawValue === "object" ? rawValue : [rawValue];
6147
-
6148
- // convert all values to strings to avoid later type comparison issues
6149
- return rawValues.map(val => `${val}`);
6150
- }
6151
-
6152
6159
  async function showMenu() {
6153
6160
  if (_disabled || _isMenuVisible) {
6154
6161
  return;
6155
6162
  }
6156
6163
 
6157
- $$invalidate(15, _isMenuVisible = true);
6164
+ $$invalidate(17, _isMenuVisible = true);
6158
6165
  await tick();
6159
6166
 
6160
6167
  // hide menu on blur
@@ -6162,17 +6169,29 @@ function instance$s($$self, $$props, $$invalidate) {
6162
6169
 
6163
6170
  // bind up/down arrows to navigate options
6164
6171
  _menuEl.addEventListener("mouseover", onHighlight);
6172
+
6173
+ setDropdownMenuPosition();
6165
6174
  }
6166
6175
 
6167
6176
  function closeMenu() {
6168
6177
  _menuEl.removeEventListener("blur", closeMenu);
6169
6178
  _menuEl.removeEventListener("mouseover", onHighlight);
6170
6179
  setHighlightedIndexToSelected();
6171
- $$invalidate(15, _isMenuVisible = false);
6180
+ $$invalidate(17, _isMenuVisible = false);
6181
+ $$invalidate(20, _dropdownMenuPos = "auto");
6182
+ }
6183
+
6184
+ function setDropdownMenuPosition() {
6185
+ const dropdownRect = _el.getBoundingClientRect();
6186
+ const menuRect = _menuEl.getBoundingClientRect();
6187
+
6188
+ if (window.innerHeight - dropdownRect.top < dropdownRect.height + menuRect.height) {
6189
+ $$invalidate(20, _dropdownMenuPos = menuRect.top - dropdownRect.top + 'px');
6190
+ }
6172
6191
  }
6173
6192
 
6174
6193
  function setHighlightedIndexToSelected() {
6175
- $$invalidate(16, _highlightedIndex = _options.findIndex(option => _values.includes(option.value)));
6194
+ $$invalidate(18, _highlightedIndex = _options.findIndex(option => _values.includes(option.value)));
6176
6195
  }
6177
6196
 
6178
6197
  // Event handlers
@@ -6181,14 +6200,14 @@ function instance$s($$self, $$props, $$invalidate) {
6181
6200
  */
6182
6201
  function onSelect(value, label, close) {
6183
6202
  if (_disabled) return;
6184
- $$invalidate(14, _selectedLabel = label);
6203
+ $$invalidate(16, _selectedLabel = label);
6185
6204
  let detail;
6186
6205
 
6187
6206
  if (_multiselect) {
6188
6207
  _values.push(value);
6189
6208
  detail = { name, values: _values };
6190
6209
  } else {
6191
- $$invalidate(12, _values = [value]);
6210
+ $$invalidate(15, _values = [value]);
6192
6211
  detail = { name, value };
6193
6212
  }
6194
6213
 
@@ -6231,14 +6250,14 @@ function instance$s($$self, $$props, $$invalidate) {
6231
6250
 
6232
6251
  function _handleArrowDown() {
6233
6252
  if (_highlightedIndex < _options.length - 1) {
6234
- $$invalidate(16, _highlightedIndex++, _highlightedIndex);
6253
+ $$invalidate(18, _highlightedIndex++, _highlightedIndex);
6235
6254
  onSelect(_options[_highlightedIndex].value, _options[_highlightedIndex].label, false);
6236
6255
  }
6237
6256
  }
6238
6257
 
6239
6258
  function _handleArrowUp() {
6240
6259
  if (_highlightedIndex > 0) {
6241
- $$invalidate(16, _highlightedIndex--, _highlightedIndex);
6260
+ $$invalidate(18, _highlightedIndex--, _highlightedIndex);
6242
6261
  onSelect(_options[_highlightedIndex].value, _options[_highlightedIndex].label, false);
6243
6262
  }
6244
6263
  }
@@ -6254,7 +6273,7 @@ function instance$s($$self, $$props, $$invalidate) {
6254
6273
  }
6255
6274
 
6256
6275
  function onHighlight(e) {
6257
- $$invalidate(16, _highlightedIndex = Number(e.target.dataset.index));
6276
+ $$invalidate(18, _highlightedIndex = Number(e.target.dataset.index));
6258
6277
  }
6259
6278
 
6260
6279
  function onNativeSelect(e) {
@@ -6266,8 +6285,8 @@ function instance$s($$self, $$props, $$invalidate) {
6266
6285
  function select_binding($$value) {
6267
6286
  binding_callbacks[$$value ? 'unshift' : 'push'](() => {
6268
6287
  _selectEl = $$value;
6269
- $$invalidate(20, _selectEl);
6270
- $$invalidate(13, _options);
6288
+ $$invalidate(22, _selectEl);
6289
+ (((($$invalidate(12, _options), $$invalidate(13, _el)), $$invalidate(29, value)), $$invalidate(14, _native)), $$invalidate(31, native));
6271
6290
  });
6272
6291
  }
6273
6292
 
@@ -6276,29 +6295,29 @@ function instance$s($$self, $$props, $$invalidate) {
6276
6295
  function ul_binding($$value) {
6277
6296
  binding_callbacks[$$value ? 'unshift' : 'push'](() => {
6278
6297
  _menuEl = $$value;
6279
- $$invalidate(19, _menuEl);
6298
+ $$invalidate(21, _menuEl);
6280
6299
  });
6281
6300
  }
6282
6301
 
6283
6302
  function div_binding($$value) {
6284
6303
  binding_callbacks[$$value ? 'unshift' : 'push'](() => {
6285
6304
  _el = $$value;
6286
- $$invalidate(18, _el);
6305
+ $$invalidate(13, _el);
6287
6306
  });
6288
6307
  }
6289
6308
 
6290
6309
  $$self.$$set = $$props => {
6291
6310
  if ('name' in $$props) $$invalidate(0, name = $$props.name);
6292
6311
  if ('arialabel' in $$props) $$invalidate(1, arialabel = $$props.arialabel);
6293
- if ('value' in $$props) $$invalidate(28, value = $$props.value);
6312
+ if ('value' in $$props) $$invalidate(29, value = $$props.value);
6294
6313
  if ('leadingicon' in $$props) $$invalidate(2, leadingicon = $$props.leadingicon);
6295
6314
  if ('maxheight' in $$props) $$invalidate(3, maxheight = $$props.maxheight);
6296
6315
  if ('placeholder' in $$props) $$invalidate(4, placeholder = $$props.placeholder);
6297
6316
  if ('width' in $$props) $$invalidate(5, width = $$props.width);
6298
6317
  if ('disabled' in $$props) $$invalidate(6, disabled = $$props.disabled);
6299
6318
  if ('error' in $$props) $$invalidate(7, error = $$props.error);
6300
- if ('multiselect' in $$props) $$invalidate(29, multiselect = $$props.multiselect);
6301
- if ('native' in $$props) $$invalidate(30, native = $$props.native);
6319
+ if ('multiselect' in $$props) $$invalidate(30, multiselect = $$props.multiselect);
6320
+ if ('native' in $$props) $$invalidate(31, native = $$props.native);
6302
6321
  if ('mt' in $$props) $$invalidate(8, mt = $$props.mt);
6303
6322
  if ('mr' in $$props) $$invalidate(9, mr = $$props.mr);
6304
6323
  if ('mb' in $$props) $$invalidate(10, mb = $$props.mb);
@@ -6307,19 +6326,34 @@ function instance$s($$self, $$props, $$invalidate) {
6307
6326
 
6308
6327
  $$self.$$.update = () => {
6309
6328
  if ($$self.$$.dirty[0] & /*disabled*/ 64) {
6310
- $$invalidate(21, _disabled = toBoolean(disabled));
6329
+ $$invalidate(23, _disabled = toBoolean(disabled));
6311
6330
  }
6312
6331
 
6313
6332
  if ($$self.$$.dirty[0] & /*error*/ 128) {
6314
- $$invalidate(23, _error = toBoolean(error));
6333
+ $$invalidate(24, _error = toBoolean(error));
6315
6334
  }
6316
6335
 
6317
- if ($$self.$$.dirty[0] & /*multiselect*/ 536870912) {
6336
+ if ($$self.$$.dirty[0] & /*multiselect*/ 1073741824) {
6318
6337
  _multiselect = toBoolean(multiselect);
6319
6338
  }
6320
6339
 
6321
- if ($$self.$$.dirty[0] & /*native*/ 1073741824) {
6322
- $$invalidate(22, _native = toBoolean(native));
6340
+ if ($$self.$$.dirty[1] & /*native*/ 1) {
6341
+ $$invalidate(14, _native = toBoolean(native));
6342
+ }
6343
+
6344
+ if ($$self.$$.dirty[0] & /*_el, value, _native, _options*/ 536899584) {
6345
+ {
6346
+ if (_el) {
6347
+ $$invalidate(15, _values = parseValues(value));
6348
+ $$invalidate(12, _options = getOptions());
6349
+
6350
+ if (!_native) {
6351
+ $$invalidate(19, _computedWidth = getCustomDropdownWidth(_options));
6352
+ addKeyboardEventListeners();
6353
+ setHighlightedIndexToSelected();
6354
+ }
6355
+ }
6356
+ }
6323
6357
  }
6324
6358
  };
6325
6359
 
@@ -6336,17 +6370,18 @@ function instance$s($$self, $$props, $$invalidate) {
6336
6370
  mr,
6337
6371
  mb,
6338
6372
  ml,
6339
- _values,
6340
6373
  _options,
6374
+ _el,
6375
+ _native,
6376
+ _values,
6341
6377
  _selectedLabel,
6342
6378
  _isMenuVisible,
6343
6379
  _highlightedIndex,
6344
6380
  _computedWidth,
6345
- _el,
6381
+ _dropdownMenuPos,
6346
6382
  _menuEl,
6347
6383
  _selectEl,
6348
6384
  _disabled,
6349
- _native,
6350
6385
  _error,
6351
6386
  showMenu,
6352
6387
  closeMenu,
@@ -6365,7 +6400,7 @@ function instance$s($$self, $$props, $$invalidate) {
6365
6400
  class Dropdown extends SvelteElement {
6366
6401
  constructor(options) {
6367
6402
  super();
6368
- 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>`;
6403
+ 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>`;
6369
6404
 
6370
6405
  init(
6371
6406
  this,
@@ -6380,15 +6415,15 @@ class Dropdown extends SvelteElement {
6380
6415
  {
6381
6416
  name: 0,
6382
6417
  arialabel: 1,
6383
- value: 28,
6418
+ value: 29,
6384
6419
  leadingicon: 2,
6385
6420
  maxheight: 3,
6386
6421
  placeholder: 4,
6387
6422
  width: 5,
6388
6423
  disabled: 6,
6389
6424
  error: 7,
6390
- multiselect: 29,
6391
- native: 30,
6425
+ multiselect: 30,
6426
+ native: 31,
6392
6427
  mt: 8,
6393
6428
  mr: 9,
6394
6429
  mb: 10,
@@ -6449,7 +6484,7 @@ class Dropdown extends SvelteElement {
6449
6484
  }
6450
6485
 
6451
6486
  get value() {
6452
- return this.$$.ctx[28];
6487
+ return this.$$.ctx[29];
6453
6488
  }
6454
6489
 
6455
6490
  set value(value) {
@@ -6512,7 +6547,7 @@ class Dropdown extends SvelteElement {
6512
6547
  }
6513
6548
 
6514
6549
  get multiselect() {
6515
- return this.$$.ctx[29];
6550
+ return this.$$.ctx[30];
6516
6551
  }
6517
6552
 
6518
6553
  set multiselect(multiselect) {
@@ -6521,7 +6556,7 @@ class Dropdown extends SvelteElement {
6521
6556
  }
6522
6557
 
6523
6558
  get native() {
6524
- return this.$$.ctx[30];
6559
+ return this.$$.ctx[31];
6525
6560
  }
6526
6561
 
6527
6562
  set native(native) {
@@ -7071,14 +7106,14 @@ customElements.define("goa-app-footer", Footer);
7071
7106
 
7072
7107
  /* libs/web-components/src/components/footer-meta-section/FooterMetaSection.svelte generated by Svelte v3.51.0 */
7073
7108
 
7074
- function get_each_context$3(ctx, list, i) {
7109
+ function get_each_context$4(ctx, list, i) {
7075
7110
  const child_ctx = ctx.slice();
7076
7111
  child_ctx[3] = list[i];
7077
7112
  return child_ctx;
7078
7113
  }
7079
7114
 
7080
7115
  // (52:4) {#each children as child}
7081
- function create_each_block$3(ctx) {
7116
+ function create_each_block$4(ctx) {
7082
7117
  let li;
7083
7118
  let a;
7084
7119
  let t_value = /*child*/ ctx[3].innerHTML + "";
@@ -7119,7 +7154,7 @@ function create_fragment$r(ctx) {
7119
7154
  let each_blocks = [];
7120
7155
 
7121
7156
  for (let i = 0; i < each_value.length; i += 1) {
7122
- each_blocks[i] = create_each_block$3(get_each_context$3(ctx, each_value, i));
7157
+ each_blocks[i] = create_each_block$4(get_each_context$4(ctx, each_value, i));
7123
7158
  }
7124
7159
 
7125
7160
  return {
@@ -7155,12 +7190,12 @@ function create_fragment$r(ctx) {
7155
7190
  let i;
7156
7191
 
7157
7192
  for (i = 0; i < each_value.length; i += 1) {
7158
- const child_ctx = get_each_context$3(ctx, each_value, i);
7193
+ const child_ctx = get_each_context$4(ctx, each_value, i);
7159
7194
 
7160
7195
  if (each_blocks[i]) {
7161
7196
  each_blocks[i].p(child_ctx, dirty);
7162
7197
  } else {
7163
- each_blocks[i] = create_each_block$3(child_ctx);
7198
+ each_blocks[i] = create_each_block$4(child_ctx);
7164
7199
  each_blocks[i].c();
7165
7200
  each_blocks[i].m(ul, null);
7166
7201
  }
@@ -7246,7 +7281,7 @@ customElements.define("goa-app-footer-meta-section", FooterMetaSection);
7246
7281
 
7247
7282
  /* libs/web-components/src/components/footer-nav-section/FooterNavSection.svelte generated by Svelte v3.51.0 */
7248
7283
 
7249
- function get_each_context$2(ctx, list, i) {
7284
+ function get_each_context$3(ctx, list, i) {
7250
7285
  const child_ctx = ctx.slice();
7251
7286
  child_ctx[5] = list[i];
7252
7287
  return child_ctx;
@@ -7286,7 +7321,7 @@ function create_if_block$d(ctx) {
7286
7321
  }
7287
7322
 
7288
7323
  // (49:4) {#each children as child}
7289
- function create_each_block$2(ctx) {
7324
+ function create_each_block$3(ctx) {
7290
7325
  let li;
7291
7326
  let a;
7292
7327
  let t_value = /*child*/ ctx[5].innerHTML + "";
@@ -7330,7 +7365,7 @@ function create_fragment$q(ctx) {
7330
7365
  let each_blocks = [];
7331
7366
 
7332
7367
  for (let i = 0; i < each_value.length; i += 1) {
7333
- each_blocks[i] = create_each_block$2(get_each_context$2(ctx, each_value, i));
7368
+ each_blocks[i] = create_each_block$3(get_each_context$3(ctx, each_value, i));
7334
7369
  }
7335
7370
 
7336
7371
  return {
@@ -7393,12 +7428,12 @@ function create_fragment$q(ctx) {
7393
7428
  let i;
7394
7429
 
7395
7430
  for (i = 0; i < each_value.length; i += 1) {
7396
- const child_ctx = get_each_context$2(ctx, each_value, i);
7431
+ const child_ctx = get_each_context$3(ctx, each_value, i);
7397
7432
 
7398
7433
  if (each_blocks[i]) {
7399
7434
  each_blocks[i].p(child_ctx, dirty);
7400
7435
  } else {
7401
- each_blocks[i] = create_each_block$2(child_ctx);
7436
+ each_blocks[i] = create_each_block$3(child_ctx);
7402
7437
  each_blocks[i].c();
7403
7438
  each_blocks[i].m(ul, null);
7404
7439
  }
@@ -8339,7 +8374,7 @@ function instance$k($$self, $$props, $$invalidate) {
8339
8374
  let isDisabled;
8340
8375
  let isInverted;
8341
8376
  let _paddingSize;
8342
- const [Variants, validateVariant] = typeValidator("Icon Button Variant", ["color", "nocolor", "dark"], true);
8377
+ const [Variants, validateVariant] = typeValidator("Icon Button Variant", ["color", "nocolor", "dark", "destructive"], true);
8343
8378
  let { icon } = $$props;
8344
8379
  let { size = "medium" } = $$props;
8345
8380
  let { theme = "outline" } = $$props;
@@ -8418,7 +8453,7 @@ function instance$k($$self, $$props, $$invalidate) {
8418
8453
  class IconButton extends SvelteElement {
8419
8454
  constructor(options) {
8420
8455
  super();
8421
- 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>`;
8456
+ 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>`;
8422
8457
 
8423
8458
  init(
8424
8459
  this,
@@ -11322,17 +11357,31 @@ customElements.define("goa-page-block", PageBlock);
11322
11357
 
11323
11358
  /* libs/web-components/src/components/pagination/Pagination.svelte generated by Svelte v3.51.0 */
11324
11359
 
11360
+ function get_each_context$2(ctx, list, i) {
11361
+ const child_ctx = ctx.slice();
11362
+ child_ctx[18] = list[i];
11363
+ child_ctx[20] = i;
11364
+ return child_ctx;
11365
+ }
11366
+
11367
+ // (66:4) {#if variant === "all"}
11325
11368
  function create_if_block$6(ctx) {
11326
11369
  let goa_block;
11327
11370
  let span0;
11328
11371
  let t1;
11329
11372
  let input;
11330
11373
  let t2;
11331
- let goa_input;
11374
+ let goa_dropdown;
11332
11375
  let t3;
11333
11376
  let span1;
11334
11377
  let t4;
11335
11378
  let t5;
11379
+ let each_value = { length: /*_pageCount*/ ctx[8] };
11380
+ let each_blocks = [];
11381
+
11382
+ for (let i = 0; i < each_value.length; i += 1) {
11383
+ each_blocks[i] = create_each_block$2(get_each_context$2(ctx, each_value, i));
11384
+ }
11336
11385
 
11337
11386
  return {
11338
11387
  c() {
@@ -11342,18 +11391,19 @@ function create_if_block$6(ctx) {
11342
11391
  t1 = space();
11343
11392
  input = element("input");
11344
11393
  t2 = space();
11345
- goa_input = element("goa-input");
11394
+ goa_dropdown = element("goa-dropdown");
11395
+
11396
+ for (let i = 0; i < each_blocks.length; i += 1) {
11397
+ each_blocks[i].c();
11398
+ }
11399
+
11346
11400
  t3 = space();
11347
11401
  span1 = element("span");
11348
11402
  t4 = text("of ");
11349
11403
  t5 = text(/*_pageCount*/ ctx[8]);
11350
11404
  attr(input, "type", "hidden");
11351
- set_custom_element_data(goa_input, "type", "number");
11352
- set_custom_element_data(goa_input, "value", /*pagenumber*/ ctx[0]);
11353
- set_custom_element_data(goa_input, "width", "8ch");
11354
- set_custom_element_data(goa_input, "debounce", "500");
11355
- set_custom_element_data(goa_input, "min", "1");
11356
- set_custom_element_data(goa_input, "max", /*_pageCount*/ ctx[8]);
11405
+ set_custom_element_data(goa_dropdown, "value", /*pagenumber*/ ctx[0]);
11406
+ set_custom_element_data(goa_dropdown, "width", "70px");
11357
11407
  set_custom_element_data(goa_block, "data-testid", "page-selector");
11358
11408
  set_custom_element_data(goa_block, "alignment", "center");
11359
11409
  set_custom_element_data(goa_block, "gap", "s");
@@ -11365,20 +11415,44 @@ function create_if_block$6(ctx) {
11365
11415
  append(goa_block, input);
11366
11416
  /*input_binding*/ ctx[12](input);
11367
11417
  append(goa_block, t2);
11368
- append(goa_block, goa_input);
11369
- /*goa_input_binding*/ ctx[13](goa_input);
11418
+ append(goa_block, goa_dropdown);
11419
+
11420
+ for (let i = 0; i < each_blocks.length; i += 1) {
11421
+ each_blocks[i].m(goa_dropdown, null);
11422
+ }
11423
+
11424
+ /*goa_dropdown_binding*/ ctx[13](goa_dropdown);
11370
11425
  append(goa_block, t3);
11371
11426
  append(goa_block, span1);
11372
11427
  append(span1, t4);
11373
11428
  append(span1, t5);
11374
11429
  },
11375
11430
  p(ctx, dirty) {
11376
- if (dirty & /*pagenumber*/ 1) {
11377
- set_custom_element_data(goa_input, "value", /*pagenumber*/ ctx[0]);
11431
+ if (dirty & /*_pageCount*/ 256) {
11432
+ each_value = { length: /*_pageCount*/ ctx[8] };
11433
+ let i;
11434
+
11435
+ for (i = 0; i < each_value.length; i += 1) {
11436
+ const child_ctx = get_each_context$2(ctx, each_value, i);
11437
+
11438
+ if (each_blocks[i]) {
11439
+ each_blocks[i].p(child_ctx, dirty);
11440
+ } else {
11441
+ each_blocks[i] = create_each_block$2(child_ctx);
11442
+ each_blocks[i].c();
11443
+ each_blocks[i].m(goa_dropdown, null);
11444
+ }
11445
+ }
11446
+
11447
+ for (; i < each_blocks.length; i += 1) {
11448
+ each_blocks[i].d(1);
11449
+ }
11450
+
11451
+ each_blocks.length = each_value.length;
11378
11452
  }
11379
11453
 
11380
- if (dirty & /*_pageCount*/ 256) {
11381
- set_custom_element_data(goa_input, "max", /*_pageCount*/ ctx[8]);
11454
+ if (dirty & /*pagenumber*/ 1) {
11455
+ set_custom_element_data(goa_dropdown, "value", /*pagenumber*/ ctx[0]);
11382
11456
  }
11383
11457
 
11384
11458
  if (dirty & /*_pageCount*/ 256) set_data(t5, /*_pageCount*/ ctx[8]);
@@ -11386,7 +11460,28 @@ function create_if_block$6(ctx) {
11386
11460
  d(detaching) {
11387
11461
  if (detaching) detach(goa_block);
11388
11462
  /*input_binding*/ ctx[12](null);
11389
- /*goa_input_binding*/ ctx[13](null);
11463
+ destroy_each(each_blocks, detaching);
11464
+ /*goa_dropdown_binding*/ ctx[13](null);
11465
+ }
11466
+ };
11467
+ }
11468
+
11469
+ // (71:10) {#each {length: _pageCount} as _, i}
11470
+ function create_each_block$2(ctx) {
11471
+ let goa_dropdown_item;
11472
+
11473
+ return {
11474
+ c() {
11475
+ goa_dropdown_item = element("goa-dropdown-item");
11476
+ set_custom_element_data(goa_dropdown_item, "value", /*i*/ ctx[20] + 1);
11477
+ set_custom_element_data(goa_dropdown_item, "label", /*i*/ ctx[20] + 1);
11478
+ },
11479
+ m(target, anchor) {
11480
+ insert(target, goa_dropdown_item, anchor);
11481
+ },
11482
+ p: noop,
11483
+ d(detaching) {
11484
+ if (detaching) detach(goa_dropdown_item);
11390
11485
  }
11391
11486
  };
11392
11487
  }
@@ -11525,7 +11620,7 @@ function instance$d($$self, $$props, $$invalidate) {
11525
11620
  let { ml = null } = $$props;
11526
11621
 
11527
11622
  // private
11528
- let inputEl = null;
11623
+ let pageDropdownEl = null;
11529
11624
 
11530
11625
  let hiddenEl = null; // needed to allow the inputEl's event to be cancelled
11531
11626
 
@@ -11535,16 +11630,11 @@ function instance$d($$self, $$props, $$invalidate) {
11535
11630
  validateRequired("GoAPagination", { itemcount, pagenumber });
11536
11631
  validateVariant(variant);
11537
11632
 
11538
- // prevent event propagation if value is non-numeric
11539
- // (input[type=number] returns blank for non-numeric numbers)
11540
- inputEl && inputEl.addEventListener("_change", e => {
11633
+ // prevent event propagation
11634
+ pageDropdownEl && pageDropdownEl.addEventListener("_change", e => {
11541
11635
  const page = Number.parseInt(e.detail.value);
11542
11636
  e.stopPropagation();
11543
11637
 
11544
- if (isNaN(page)) {
11545
- return;
11546
- }
11547
-
11548
11638
  hiddenEl.dispatchEvent(new CustomEvent("_change",
11549
11639
  {
11550
11640
  composed: true,
@@ -11577,10 +11667,10 @@ function instance$d($$self, $$props, $$invalidate) {
11577
11667
  });
11578
11668
  }
11579
11669
 
11580
- function goa_input_binding($$value) {
11670
+ function goa_dropdown_binding($$value) {
11581
11671
  binding_callbacks[$$value ? 'unshift' : 'push'](() => {
11582
- inputEl = $$value;
11583
- $$invalidate(6, inputEl);
11672
+ pageDropdownEl = $$value;
11673
+ $$invalidate(6, pageDropdownEl);
11584
11674
  });
11585
11675
  }
11586
11676
 
@@ -11612,14 +11702,14 @@ function instance$d($$self, $$props, $$invalidate) {
11612
11702
  mr,
11613
11703
  mb,
11614
11704
  ml,
11615
- inputEl,
11705
+ pageDropdownEl,
11616
11706
  hiddenEl,
11617
11707
  _pageCount,
11618
11708
  goto,
11619
11709
  itemcount,
11620
11710
  perpagecount,
11621
11711
  input_binding,
11622
- goa_input_binding,
11712
+ goa_dropdown_binding,
11623
11713
  click_handler,
11624
11714
  click_handler_1
11625
11715
  ];
@@ -14092,7 +14182,7 @@ function instance$6($$self, $$props, $$invalidate) {
14092
14182
 
14093
14183
  onMount(() => {
14094
14184
  validateVariant(variant);
14095
- attachSortEventHandling();
14185
+ setTimeout(attachSortEventHandling, 0);
14096
14186
  const slot = _rootEl.querySelector("slot");
14097
14187
 
14098
14188
  if (!slot || slot.assignedElements().length === 0) {