@mgdis/mg-components 5.27.2 → 5.27.3

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.
Files changed (93) hide show
  1. package/dist/cjs/index-7bb96ccc.js +1636 -0
  2. package/dist/cjs/index-7bb96ccc.js.map +1 -0
  3. package/dist/cjs/{index-00072168.js → index-8e9b0d9b.js} +67 -27
  4. package/dist/cjs/index-8e9b0d9b.js.map +1 -0
  5. package/dist/cjs/loader.cjs.js +1 -1
  6. package/dist/cjs/mg-action-more_36.cjs.entry.js +123 -115
  7. package/dist/cjs/mg-action-more_36.cjs.entry.js.map +1 -1
  8. package/dist/cjs/mg-components.cjs.js +9 -9
  9. package/dist/cjs/mg-components.cjs.js.map +1 -1
  10. package/dist/cjs/mg-loader.cjs.entry.js +3 -3
  11. package/dist/collection/collection-manifest.json +1 -1
  12. package/dist/collection/components/molecules/menu/mg-menu/mg-menu.js +21 -18
  13. package/dist/collection/components/molecules/menu/mg-menu/mg-menu.js.map +1 -1
  14. package/dist/collection/components/molecules/menu/mg-menu-item/mg-menu-item.js +2 -1
  15. package/dist/collection/components/molecules/menu/mg-menu-item/mg-menu-item.js.map +1 -1
  16. package/dist/collection/components/molecules/mg-item-more/mg-item-more.js +4 -4
  17. package/dist/collection/components/molecules/mg-item-more/mg-item-more.js.map +1 -1
  18. package/dist/collection/components/molecules/mg-popover/mg-popover.js +6 -2
  19. package/dist/collection/components/molecules/mg-popover/mg-popover.js.map +1 -1
  20. package/dist/components/index.es.js +60 -20
  21. package/dist/components/index.es.js.map +1 -1
  22. package/dist/components/index2.js +2 -2
  23. package/dist/components/mg-action-more.js +2 -2
  24. package/dist/components/mg-badge2.js +3 -3
  25. package/dist/components/mg-button2.js +4 -4
  26. package/dist/components/mg-card2.js +2 -2
  27. package/dist/components/mg-details.js +2 -2
  28. package/dist/components/mg-form.js +3 -3
  29. package/dist/components/mg-icon2.js +2 -2
  30. package/dist/components/mg-illustrated-message.js +2 -2
  31. package/dist/components/mg-input-checkbox.js +4 -4
  32. package/dist/components/mg-input-date.js +11 -11
  33. package/dist/components/mg-input-numeric.js +5 -5
  34. package/dist/components/mg-input-password.js +3 -3
  35. package/dist/components/mg-input-radio.js +4 -4
  36. package/dist/components/mg-input-select2.js +6 -6
  37. package/dist/components/mg-input-text2.js +6 -6
  38. package/dist/components/mg-input-textarea.js +6 -6
  39. package/dist/components/mg-input-title2.js +2 -2
  40. package/dist/components/mg-input-toggle.js +4 -4
  41. package/dist/components/mg-input2.js +3 -3
  42. package/dist/components/mg-item-more2.js +26 -23
  43. package/dist/components/mg-item-more2.js.map +1 -1
  44. package/dist/components/mg-loader.js +2 -2
  45. package/dist/components/mg-menu-item2.js +8 -7
  46. package/dist/components/mg-menu-item2.js.map +1 -1
  47. package/dist/components/mg-message.js +3 -3
  48. package/dist/components/mg-modal.js +6 -6
  49. package/dist/components/mg-pagination2.js +2 -2
  50. package/dist/components/mg-panel.js +4 -4
  51. package/dist/components/mg-popover-content2.js +3 -3
  52. package/dist/components/mg-popover2.js +9 -5
  53. package/dist/components/mg-popover2.js.map +1 -1
  54. package/dist/components/mg-skip-links.js +2 -2
  55. package/dist/components/mg-tabs.js +6 -6
  56. package/dist/components/mg-tag.js +3 -3
  57. package/dist/components/mg-tooltip2.js +6 -6
  58. package/dist/esm/{index-8d5d1bfd.js → index-138ea119.js} +62 -22
  59. package/dist/esm/index-138ea119.js.map +1 -0
  60. package/dist/esm/index-c4faef56.js +1607 -0
  61. package/dist/esm/index-c4faef56.js.map +1 -0
  62. package/dist/esm/loader.js +2 -2
  63. package/dist/esm/mg-action-more_36.entry.js +123 -115
  64. package/dist/esm/mg-action-more_36.entry.js.map +1 -1
  65. package/dist/esm/mg-components.js +10 -10
  66. package/dist/esm/mg-components.js.map +1 -1
  67. package/dist/esm/mg-loader.entry.js +3 -3
  68. package/dist/mg-components/mg-components.esm.js +1 -1
  69. package/dist/mg-components/mg-components.esm.js.map +1 -1
  70. package/dist/mg-components/p-284c8327.entry.js +2 -0
  71. package/dist/mg-components/p-284c8327.entry.js.map +1 -0
  72. package/dist/mg-components/p-4c68f6ea.js +3 -0
  73. package/dist/mg-components/p-4c68f6ea.js.map +1 -0
  74. package/dist/mg-components/{p-99e2f42a.entry.js → p-bac6ca1f.entry.js} +2 -2
  75. package/dist/mg-components/p-e9433a87.js +2 -0
  76. package/dist/mg-components/p-e9433a87.js.map +1 -0
  77. package/dist/types/components/molecules/menu/mg-menu/mg-menu.d.ts +1 -5
  78. package/ide/intellij/web-types.json +1 -1
  79. package/ide/vscode/html-custom-data.json +1 -1
  80. package/package.json +21 -21
  81. package/dist/cjs/index-00072168.js.map +0 -1
  82. package/dist/cjs/index-7e27c7ae.js +0 -2561
  83. package/dist/cjs/index-7e27c7ae.js.map +0 -1
  84. package/dist/esm/index-8d5d1bfd.js.map +0 -1
  85. package/dist/esm/index-e479d5ae.js +0 -2532
  86. package/dist/esm/index-e479d5ae.js.map +0 -1
  87. package/dist/mg-components/p-7315d4a6.js +0 -3
  88. package/dist/mg-components/p-7315d4a6.js.map +0 -1
  89. package/dist/mg-components/p-8800813b.js +0 -2
  90. package/dist/mg-components/p-8800813b.js.map +0 -1
  91. package/dist/mg-components/p-f9ac8927.entry.js +0 -2
  92. package/dist/mg-components/p-f9ac8927.entry.js.map +0 -1
  93. /package/dist/mg-components/{p-99e2f42a.entry.js.map → p-bac6ca1f.entry.js.map} +0 -0
@@ -2,8 +2,8 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const index = require('./index-7e27c7ae.js');
6
- const index$1 = require('./index-00072168.js');
5
+ const index = require('./index-7bb96ccc.js');
6
+ const index$1 = require('./index-8e9b0d9b.js');
7
7
 
8
8
  /**
9
9
  * Available menu-item positions
@@ -79,7 +79,7 @@ const MgActionMore = class {
79
79
  ************/
80
80
  this.name = 'mg-action-more';
81
81
  this.classBase = 'mg-c-action-more';
82
- this.mgPopoverIdentifier = index$1.Me(this.name);
82
+ this.mgPopoverIdentifier = index$1.Ne(this.name);
83
83
  /************
84
84
  * Methods *
85
85
  ***********/
@@ -203,7 +203,7 @@ const MgBadge = class {
203
203
  this.label = undefined;
204
204
  this.variant = variants$5[0];
205
205
  this.outline = undefined;
206
- this.classCollection = new index$1.Oe(['mg-c-badge']);
206
+ this.classCollection = new index$1.Be(['mg-c-badge']);
207
207
  }
208
208
  validateValue(newValue) {
209
209
  if (/^(\d+\+*|[?*!a-z])$/i.exec(`${newValue}`) === null) {
@@ -211,7 +211,7 @@ const MgBadge = class {
211
211
  }
212
212
  }
213
213
  validateLabel(newValue) {
214
- if (!index$1.Ne(newValue)) {
214
+ if (!index$1.Pe(newValue)) {
215
215
  throw new Error('<mg-badge> prop "label" is required.');
216
216
  }
217
217
  }
@@ -322,7 +322,7 @@ const MgButton = class {
322
322
  this.isIcon = false;
323
323
  this.disableOnClick = false;
324
324
  this.loading = false;
325
- this.classCollection = new index$1.Oe(['mg-c-button']);
325
+ this.classCollection = new index$1.Be(['mg-c-button']);
326
326
  }
327
327
  validateVariant(newValue, oldValue) {
328
328
  if (!variants$4.includes(newValue)) {
@@ -381,7 +381,7 @@ const MgButton = class {
381
381
  this.validateFullWidth(this.fullWidth);
382
382
  if (this.isIcon) {
383
383
  this.classCollection.add(`mg-c-button--icon`);
384
- if (!index$1.Ne(this.label)) {
384
+ if (!index$1.Pe(this.label)) {
385
385
  throw new Error(`<mg-button> prop "label" is mandatory when prop "isIcon" is set to true.`);
386
386
  }
387
387
  }
@@ -393,7 +393,7 @@ const MgButton = class {
393
393
  * Add listners
394
394
  */
395
395
  componentDidLoad() {
396
- index$1.Ce(() => {
396
+ index$1.ze(() => {
397
397
  var _a;
398
398
  const closestForm = this.element.closest('form') || ((_a = this.element.closest('mg-form')) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelector('form'));
399
399
  // submit buttons should trigger form submition;
@@ -452,7 +452,7 @@ const MgCard = class {
452
452
  };
453
453
  this.variant = undefined;
454
454
  this.variantStyle = undefined;
455
- this.classCollection = new index$1.Oe([this.classBase]);
455
+ this.classCollection = new index$1.Be([this.classBase]);
456
456
  }
457
457
  validateVariant(newValue, oldValue) {
458
458
  if (newValue && !variants$3.includes(newValue))
@@ -557,7 +557,7 @@ const MgDetails = class {
557
557
  this.expanded = false;
558
558
  }
559
559
  validateTitles(newValue) {
560
- if (!index$1.Ne(newValue)) {
560
+ if (!index$1.Pe(newValue)) {
561
561
  throw new Error('<mg-details> prop "toggleClosed" and "toggleOpened" must be defined.');
562
562
  }
563
563
  }
@@ -715,7 +715,7 @@ const MgForm = class {
715
715
  }
716
716
  });
717
717
  };
718
- this.identifier = index$1.Me('mg-form');
718
+ this.identifier = index$1.Ne('mg-form');
719
719
  this.name = this.identifier;
720
720
  this.readonly = false;
721
721
  this.requiredMessage = undefined;
@@ -724,7 +724,7 @@ const MgForm = class {
724
724
  this.disabled = false;
725
725
  this.valid = undefined;
726
726
  this.invalid = undefined;
727
- this.classCollection = new index$1.Oe(['mg-c-form']);
727
+ this.classCollection = new index$1.Be(['mg-c-form']);
728
728
  this.requiredMessageText = undefined;
729
729
  }
730
730
  validateRequiredMessage(newValue) {
@@ -865,7 +865,7 @@ const MgIcon = class {
865
865
  this.variant = undefined;
866
866
  this.variantStyle = undefined;
867
867
  this.spin = false;
868
- this.classCollection = new index$1.Oe(['mg-c-icon']);
868
+ this.classCollection = new index$1.Be(['mg-c-icon']);
869
869
  }
870
870
  validateIcon(newValue, oldValue) {
871
871
  if (!Object.keys(icons).includes(newValue))
@@ -964,7 +964,7 @@ const MgIllustratedMessage = class {
964
964
  componentDidLoad() {
965
965
  const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
966
966
  const slottedIllustrations = this.element.querySelectorAll('[slot="illustration"]');
967
- if (!index$1.De(this.element.querySelector('[slot="title"]'), headingTags)) {
967
+ if (!index$1.Ce(this.element.querySelector('[slot="title"]'), headingTags)) {
968
968
  throw new Error(`<mg-illustrated-message> Slotted title must be a heading: ${headingTags.join(', ')}`);
969
969
  }
970
970
  else if (slottedIllustrations.length !== 1) {
@@ -1064,7 +1064,7 @@ const MgInput = class {
1064
1064
  this.isVerticalList = false;
1065
1065
  }
1066
1066
  watchIdentifier(newValue) {
1067
- if (!index$1.Ne(newValue)) {
1067
+ if (!index$1.Pe(newValue)) {
1068
1068
  throw new Error('<mg-input> prop "identifier" is required.');
1069
1069
  }
1070
1070
  else {
@@ -1149,7 +1149,7 @@ const MgInput = class {
1149
1149
  */
1150
1150
  // eslint-disable-next-line @stencil-community/no-unused-watch
1151
1151
  watchLabel() {
1152
- if (!index$1.Ne(this.label)) {
1152
+ if (!index$1.Pe(this.label)) {
1153
1153
  throw new Error('<mg-input> prop "label" is required.');
1154
1154
  }
1155
1155
  else {
@@ -1445,7 +1445,7 @@ const MgInputCheckbox = class {
1445
1445
  * Method to update searchResults
1446
1446
  */
1447
1447
  this.updateSearchResults = () => {
1448
- this.searchResults = this.checkboxItems.filter(item => index$1.Ue(item.title).includes(index$1.Ue(this.searchValue)));
1448
+ this.searchResults = this.checkboxItems.filter(item => index$1.We(item.title).includes(index$1.We(this.searchValue)));
1449
1449
  };
1450
1450
  /**
1451
1451
  * Method to validate if one of inputs value is checked id required
@@ -1519,7 +1519,7 @@ const MgInputCheckbox = class {
1519
1519
  this.helpText = undefined;
1520
1520
  this.valid = undefined;
1521
1521
  this.invalid = undefined;
1522
- this.classCollection = new index$1.Oe([this.baseClassName, classFieldset]);
1522
+ this.classCollection = new index$1.Be([this.baseClassName, classFieldset]);
1523
1523
  this.errorMessage = undefined;
1524
1524
  this.checkboxItems = [];
1525
1525
  this.displaySearchInput = undefined;
@@ -1627,7 +1627,7 @@ const MgInputCheckbox = class {
1627
1627
  if (typeof valid !== 'boolean') {
1628
1628
  throw new Error('<mg-input-checkbox> method "setError()" param "valid" must be a boolean');
1629
1629
  }
1630
- else if (!index$1.Ne(errorMessage)) {
1630
+ else if (!index$1.Pe(errorMessage)) {
1631
1631
  throw new Error('<mg-input-checkbox> method "setError()" param "errorMessage" must be a string');
1632
1632
  }
1633
1633
  else {
@@ -1890,7 +1890,7 @@ const MgInputDate = class {
1890
1890
  * @param value - value to test
1891
1891
  * @returns truthy when value match the pattern
1892
1892
  */
1893
- this.isValidPattern = (value) => index$1.Ne(value) && index$1.ge.test(value);
1893
+ this.isValidPattern = (value) => index$1.Pe(value) && index$1.pe.test(value);
1894
1894
  /**
1895
1895
  * Format help text to display
1896
1896
  * @param helpText - help text format
@@ -1898,10 +1898,10 @@ const MgInputDate = class {
1898
1898
  */
1899
1899
  this.formatHelpText = (helpText) => {
1900
1900
  const defaultHelpTextVariable = '{defaultHelpText}';
1901
- let text = index$1.Ne(helpText) ? helpText : this.messages.input.date.helpText;
1901
+ let text = index$1.Pe(helpText) ? helpText : this.messages.input.date.helpText;
1902
1902
  if (text.includes(defaultHelpTextVariable))
1903
1903
  text = text.replace(defaultHelpTextVariable, this.formatHelpText(this.messages.input.date.helpText));
1904
- return text.replace('{pattern}', this.renderPattern()).replace('{date}', index$1.pe(index$1.ze(new Date('2023-12-24')), this.systemLocale));
1904
+ return text.replace('{pattern}', this.renderPattern()).replace('{date}', index$1.ge(index$1.Xe(new Date('2023-12-24')), this.systemLocale));
1905
1905
  };
1906
1906
  /**
1907
1907
  * Handle input event
@@ -1993,8 +1993,8 @@ const MgInputDate = class {
1993
1993
  // min, max & minMax
1994
1994
  else if ([InputError$1.MIN, InputError$1.MAX, InputError$1.MINMAX].includes(inputError)) {
1995
1995
  this.errorMessage = this.messages.errors.date[inputError]
1996
- .replace('{min}', index$1.pe(this.min, this.systemLocale))
1997
- .replace('{max}', index$1.pe(this.max, this.systemLocale));
1996
+ .replace('{min}', index$1.ge(this.min, this.systemLocale))
1997
+ .replace('{max}', index$1.ge(this.max, this.systemLocale));
1998
1998
  }
1999
1999
  // wrong date format
2000
2000
  // element.validity.badInput is default error message
@@ -2008,7 +2008,7 @@ const MgInputDate = class {
2008
2008
  * @returns translated html pattern
2009
2009
  */
2010
2010
  this.renderPattern = () => {
2011
- let patternLocal = index$1.We(this.systemLocale);
2011
+ let patternLocal = index$1.Ge(this.systemLocale);
2012
2012
  for (const key in this.messages.input.date.pattern) {
2013
2013
  patternLocal = patternLocal.replace(key, this.messages.input.date.pattern[key]);
2014
2014
  }
@@ -2030,7 +2030,7 @@ const MgInputDate = class {
2030
2030
  this.helpText = undefined;
2031
2031
  this.valid = undefined;
2032
2032
  this.invalid = undefined;
2033
- this.classCollection = new index$1.Oe(['mg-c-input--date']);
2033
+ this.classCollection = new index$1.Be(['mg-c-input--date']);
2034
2034
  this.errorMessage = undefined;
2035
2035
  }
2036
2036
  validateValue(newValue) {
@@ -2038,7 +2038,7 @@ const MgInputDate = class {
2038
2038
  if (newValue === '')
2039
2039
  newValue = null;
2040
2040
  // check value validity
2041
- if (newValue && !index$1.Ne(newValue)) {
2041
+ if (newValue && !index$1.Pe(newValue)) {
2042
2042
  throw new Error("<mg-input-date> props 'value' must be a valid string");
2043
2043
  }
2044
2044
  else if (!newValue || (newValue && this.isValidPattern(newValue))) {
@@ -2095,7 +2095,7 @@ const MgInputDate = class {
2095
2095
  if (typeof valid !== 'boolean') {
2096
2096
  throw new Error('<mg-input-date> method "setError()" param "valid" must be a boolean');
2097
2097
  }
2098
- else if (!index$1.Ne(errorMessage)) {
2098
+ else if (!index$1.Pe(errorMessage)) {
2099
2099
  throw new Error('<mg-input-date> method "setError()" param "errorMessage" must be a string');
2100
2100
  }
2101
2101
  else {
@@ -2149,7 +2149,7 @@ const MgInputDate = class {
2149
2149
  * @returns HTML Element
2150
2150
  */
2151
2151
  render() {
2152
- return (index.h("mg-input", { key: 'f38d79cb71311149b4d15885b65cd8f025dde15d', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonlyValue: index$1.pe(this.value, this.locale), tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, helpText: this.formatHelpText(this.helpText), errorMessage: this.errorMessage }, index.h("input", { key: '67bf6f0ad58ee1a506ffd0d3d41d5954db68465c', type: "date", class: "mg-c-input__box", min: this.min, max: this.max, value: this.value, id: this.identifier, name: this.name, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, ref: (el) => {
2152
+ return (index.h("mg-input", { key: 'f38d79cb71311149b4d15885b65cd8f025dde15d', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonlyValue: index$1.ge(this.value, this.locale), tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, helpText: this.formatHelpText(this.helpText), errorMessage: this.errorMessage }, index.h("input", { key: '67bf6f0ad58ee1a506ffd0d3d41d5954db68465c', type: "date", class: "mg-c-input__box", min: this.min, max: this.max, value: this.value, id: this.identifier, name: this.name, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, ref: (el) => {
2153
2153
  if (el !== null)
2154
2154
  this.input = el;
2155
2155
  } })));
@@ -2280,9 +2280,9 @@ const MgInputNumeric = class {
2280
2280
  this.formatValue = (value) => {
2281
2281
  switch (this.format) {
2282
2282
  case 'number':
2283
- return index$1.we(value, this.locale, this.type === 'decimal' ? this.decimalLength : undefined);
2283
+ return index$1.Qe(value, this.locale, this.type === 'decimal' ? this.decimalLength : undefined);
2284
2284
  case 'currency':
2285
- return index$1.qe(value, this.locale, this.currency);
2285
+ return index$1.Ke(value, this.locale, this.currency);
2286
2286
  case 'none':
2287
2287
  return value.toString();
2288
2288
  }
@@ -2319,7 +2319,7 @@ const MgInputNumeric = class {
2319
2319
  this.decimalLength = 2;
2320
2320
  this.valid = undefined;
2321
2321
  this.invalid = undefined;
2322
- this.classCollection = new index$1.Oe(['mg-c-input--numeric']);
2322
+ this.classCollection = new index$1.Be(['mg-c-input--numeric']);
2323
2323
  this.errorMessage = undefined;
2324
2324
  this.hasFocus = undefined;
2325
2325
  }
@@ -2415,7 +2415,7 @@ const MgInputNumeric = class {
2415
2415
  if (typeof valid !== 'boolean') {
2416
2416
  throw new Error('<mg-input-numeric> method "setError()" param "valid" must be a boolean');
2417
2417
  }
2418
- else if (!index$1.Ne(errorMessage)) {
2418
+ else if (!index$1.Pe(errorMessage)) {
2419
2419
  throw new Error('<mg-input-numeric> method "setError()" param "errorMessage" must be a string');
2420
2420
  }
2421
2421
  else {
@@ -2607,7 +2607,7 @@ const MgInputPassword = class {
2607
2607
  this.helpText = undefined;
2608
2608
  this.valid = undefined;
2609
2609
  this.invalid = undefined;
2610
- this.classCollection = new index$1.Oe(['mg-c-input--password']);
2610
+ this.classCollection = new index$1.Be(['mg-c-input--password']);
2611
2611
  this.errorMessage = undefined;
2612
2612
  this.displayPassword = false;
2613
2613
  }
@@ -2665,7 +2665,7 @@ const MgInputPassword = class {
2665
2665
  if (typeof valid !== 'boolean') {
2666
2666
  throw new Error('<mg-input-password> method "setError()" param "valid" must be a boolean');
2667
2667
  }
2668
- else if (!index$1.Ne(errorMessage)) {
2668
+ else if (!index$1.Pe(errorMessage)) {
2669
2669
  throw new Error('<mg-input-password> method "setError()" param "errorMessage" must be a string');
2670
2670
  }
2671
2671
  else {
@@ -2812,7 +2812,7 @@ const MgInputRadio = class {
2812
2812
  this.helpText = undefined;
2813
2813
  this.valid = undefined;
2814
2814
  this.invalid = undefined;
2815
- this.classCollection = new index$1.Oe(['mg-c-input--radio', classFieldset]);
2815
+ this.classCollection = new index$1.Be(['mg-c-input--radio', classFieldset]);
2816
2816
  this.errorMessage = undefined;
2817
2817
  this.options = undefined;
2818
2818
  }
@@ -2825,7 +2825,7 @@ const MgInputRadio = class {
2825
2825
  throw new Error('<mg-input-radio> prop "items" require at least 2 items.');
2826
2826
  }
2827
2827
  // String array
2828
- else if (index$1.Fe(newValue)) {
2828
+ else if (index$1.Ue(newValue)) {
2829
2829
  this.options = newValue.map(item => ({ title: item, value: item, disabled: this.disabled }));
2830
2830
  }
2831
2831
  // Object array
@@ -2884,7 +2884,7 @@ const MgInputRadio = class {
2884
2884
  if (typeof valid !== 'boolean') {
2885
2885
  throw new Error('<mg-input-radio> method "setError()" param "valid" must be a boolean');
2886
2886
  }
2887
- else if (!index$1.Ne(errorMessage)) {
2887
+ else if (!index$1.Pe(errorMessage)) {
2888
2888
  throw new Error('<mg-input-radio> method "setError()" param "errorMessage" must be a string');
2889
2889
  }
2890
2890
  else {
@@ -3031,7 +3031,7 @@ const MgInputSelect = class {
3031
3031
  if (this.input.value === '') {
3032
3032
  this.setValue(null);
3033
3033
  }
3034
- else if (index$1.Fe(this.items) && this.items.includes(this.input.value)) {
3034
+ else if (index$1.Ue(this.items) && this.items.includes(this.input.value)) {
3035
3035
  this.setValue(this.input.value);
3036
3036
  }
3037
3037
  else if (allItemsAreOptions(this.items) && typeof this.input.value === 'string' && this.items.some(this.isInputValue)) {
@@ -3105,7 +3105,7 @@ const MgInputSelect = class {
3105
3105
  this.helpText = undefined;
3106
3106
  this.valid = undefined;
3107
3107
  this.invalid = undefined;
3108
- this.classCollection = new index$1.Oe(['mg-c-input--select']);
3108
+ this.classCollection = new index$1.Be(['mg-c-input--select']);
3109
3109
  this.errorMessage = undefined;
3110
3110
  this.options = undefined;
3111
3111
  this.valueExist = undefined;
@@ -3113,7 +3113,7 @@ const MgInputSelect = class {
3113
3113
  }
3114
3114
  validateValue(newValue) {
3115
3115
  var _a, _b;
3116
- if (index$1.Fe(this.items) && typeof newValue === 'string') {
3116
+ if (index$1.Ue(this.items) && typeof newValue === 'string') {
3117
3117
  this.readonlyValue = ((_a = this.input) === null || _a === void 0 ? void 0 : _a.value) ? this.input.value : newValue;
3118
3118
  }
3119
3119
  else if (allItemsAreOptions(this.items)) {
@@ -3130,7 +3130,7 @@ const MgInputSelect = class {
3130
3130
  this.options = [];
3131
3131
  }
3132
3132
  // String array
3133
- else if (index$1.Fe(newValue)) {
3133
+ else if (index$1.Ue(newValue)) {
3134
3134
  if (typeof this.value === 'string')
3135
3135
  this.valueExist = newValue.includes(this.value);
3136
3136
  this.options = newValue.map(item => ({ title: item, value: item }));
@@ -3202,7 +3202,7 @@ const MgInputSelect = class {
3202
3202
  if (typeof valid !== 'boolean') {
3203
3203
  throw new Error('<mg-input-select> method "setError()" param "valid" must be a boolean');
3204
3204
  }
3205
- else if (!index$1.Ne(errorMessage)) {
3205
+ else if (!index$1.Pe(errorMessage)) {
3206
3206
  throw new Error('<mg-input-select> method "setError()" param "errorMessage" must be a string');
3207
3207
  }
3208
3208
  else {
@@ -3314,7 +3314,7 @@ const MgInputText = class {
3314
3314
  */
3315
3315
  this.handleFocus = () => {
3316
3316
  this.classCollection.add(this.classFocus);
3317
- this.classCollection = new index$1.Oe(this.classCollection.classes);
3317
+ this.classCollection = new index$1.Be(this.classCollection.classes);
3318
3318
  };
3319
3319
  /**
3320
3320
  * Handle blur event
@@ -3322,7 +3322,7 @@ const MgInputText = class {
3322
3322
  this.handleBlur = () => {
3323
3323
  // Manage focus
3324
3324
  this.classCollection.delete(this.classFocus);
3325
- this.classCollection = new index$1.Oe(this.classCollection.classes);
3325
+ this.classCollection = new index$1.Be(this.classCollection.classes);
3326
3326
  // Display Error
3327
3327
  this.handlerInProgress = Handler.BLUR;
3328
3328
  this.displayError().finally(() => {
@@ -3397,7 +3397,7 @@ const MgInputText = class {
3397
3397
  this.helpText = undefined;
3398
3398
  this.valid = undefined;
3399
3399
  this.invalid = undefined;
3400
- this.classCollection = new index$1.Oe(['mg-c-input--text']);
3400
+ this.classCollection = new index$1.Be(['mg-c-input--text']);
3401
3401
  this.errorMessage = undefined;
3402
3402
  }
3403
3403
  handleValue(newValue) {
@@ -3448,7 +3448,7 @@ const MgInputText = class {
3448
3448
  this.classCollection.add(`mg-c-input--width-${this.mgWidth}`);
3449
3449
  }
3450
3450
  validatePattern(newValue) {
3451
- if (newValue !== undefined && !(index$1.Ne(this.pattern) && index$1.Ne(this.patternErrorMessage))) {
3451
+ if (newValue !== undefined && !(index$1.Pe(this.pattern) && index$1.Pe(this.patternErrorMessage))) {
3452
3452
  throw new Error('<mg-input-text> props "pattern" and "patternErrorMessage" must be non-empty string and paired.');
3453
3453
  }
3454
3454
  }
@@ -3478,7 +3478,7 @@ const MgInputText = class {
3478
3478
  if (typeof valid !== 'boolean') {
3479
3479
  throw new Error('<mg-input-text> method "setError()" param "valid" must be a boolean');
3480
3480
  }
3481
- else if (!index$1.Ne(errorMessage)) {
3481
+ else if (!index$1.Pe(errorMessage)) {
3482
3482
  throw new Error('<mg-input-text> method "setError()" param "errorMessage" must be a string');
3483
3483
  }
3484
3484
  else {
@@ -3587,7 +3587,7 @@ const MgInputTextarea = class {
3587
3587
  */
3588
3588
  this.handleFocus = () => {
3589
3589
  this.classCollection.add(this.classFocus);
3590
- this.classCollection = new index$1.Oe(this.classCollection.classes);
3590
+ this.classCollection = new index$1.Be(this.classCollection.classes);
3591
3591
  };
3592
3592
  /**
3593
3593
  * Handle blur event
@@ -3595,7 +3595,7 @@ const MgInputTextarea = class {
3595
3595
  this.handleBlur = () => {
3596
3596
  // Manage focus
3597
3597
  this.classCollection.delete(this.classFocus);
3598
- this.classCollection = new index$1.Oe(this.classCollection.classes);
3598
+ this.classCollection = new index$1.Be(this.classCollection.classes);
3599
3599
  // Display Error
3600
3600
  this.handlerInProgress = Handler.BLUR;
3601
3601
  this.displayError().finally(() => {
@@ -3658,7 +3658,7 @@ const MgInputTextarea = class {
3658
3658
  this.valid = undefined;
3659
3659
  this.invalid = undefined;
3660
3660
  this.resizable = 'none';
3661
- this.classCollection = new index$1.Oe(['mg-c-input--textarea']);
3661
+ this.classCollection = new index$1.Be(['mg-c-input--textarea']);
3662
3662
  this.errorMessage = undefined;
3663
3663
  }
3664
3664
  handleValue(newValue) {
@@ -3697,7 +3697,7 @@ const MgInputTextarea = class {
3697
3697
  this.classCollection.add(`mg-c-input--width-${this.mgWidth}`);
3698
3698
  }
3699
3699
  validatePattern(newValue) {
3700
- if (newValue !== undefined && !(index$1.Ne(this.pattern) && index$1.Ne(this.patternErrorMessage))) {
3700
+ if (newValue !== undefined && !(index$1.Pe(this.pattern) && index$1.Pe(this.patternErrorMessage))) {
3701
3701
  throw new Error('<mg-input-textarea> props "pattern" and "patternErrorMessage" must be non-empty string and paired.');
3702
3702
  }
3703
3703
  }
@@ -3729,7 +3729,7 @@ const MgInputTextarea = class {
3729
3729
  if (typeof valid !== 'boolean') {
3730
3730
  throw new Error('<mg-input-textarea> method "setError()" param "valid" must be a boolean');
3731
3731
  }
3732
- else if (!index$1.Ne(errorMessage)) {
3732
+ else if (!index$1.Pe(errorMessage)) {
3733
3733
  throw new Error('<mg-input-textarea> method "setError()" param "errorMessage" must be a string');
3734
3734
  }
3735
3735
  else {
@@ -3818,7 +3818,7 @@ const MgInputTitle = class {
3818
3818
  this.tagName = 'label';
3819
3819
  }
3820
3820
  validateIdentifier(newValue) {
3821
- if (!index$1.Ne(newValue)) {
3821
+ if (!index$1.Pe(newValue)) {
3822
3822
  throw new Error('<mg-input-title> prop "identifier" is required.');
3823
3823
  }
3824
3824
  }
@@ -3932,7 +3932,7 @@ const MgInputToggle = class {
3932
3932
  this.tooltip = undefined;
3933
3933
  this.tooltipPosition = 'input';
3934
3934
  this.helpText = undefined;
3935
- this.classCollection = new index$1.Oe(['mg-c-input--toggle']);
3935
+ this.classCollection = new index$1.Be(['mg-c-input--toggle']);
3936
3936
  this.options = undefined;
3937
3937
  this.errorMessage = undefined;
3938
3938
  this.valid = undefined;
@@ -3949,7 +3949,7 @@ const MgInputToggle = class {
3949
3949
  throw new Error('<mg-input-toggle> prop "items" require 2 items.');
3950
3950
  }
3951
3951
  // String array
3952
- else if (index$1.Fe(newValue)) {
3952
+ else if (index$1.Ue(newValue)) {
3953
3953
  this.options = newValue.map(item => ({ title: item, value: item }));
3954
3954
  }
3955
3955
  // Object array
@@ -4005,7 +4005,7 @@ const MgInputToggle = class {
4005
4005
  if (typeof valid !== 'boolean') {
4006
4006
  throw new Error('<mg-input-toggle> method "setError()" param "valid" must be a boolean');
4007
4007
  }
4008
- else if (!index$1.Ne(errorMessage)) {
4008
+ else if (!index$1.Pe(errorMessage)) {
4009
4009
  throw new Error('<mg-input-toggle> method "setError()" param "errorMessage" must be a string');
4010
4010
  }
4011
4011
  else {
@@ -4251,7 +4251,7 @@ const MgItemMore = class {
4251
4251
  navElement.click();
4252
4252
  });
4253
4253
  // add id suffix to prevent duplicate key. default html id is: '';
4254
- if (index$1.Ne(proxy.id))
4254
+ if (index$1.Pe(proxy.id))
4255
4255
  proxy.id = `${proxy.id}-proxy`;
4256
4256
  // update properties and DOM when proxyfied item is updated
4257
4257
  proxified.addEventListener('item-updated', (event) => {
@@ -4281,7 +4281,7 @@ const MgItemMore = class {
4281
4281
  this.slotlabel.label = this.messages.menuLabel;
4282
4282
  }
4283
4283
  validateSize(newValue) {
4284
- if (newValue && typeof newValue !== 'string')
4284
+ if (newValue && !sizes$2.includes(newValue))
4285
4285
  throw new Error(`<${this.name}> prop "size" must match MgItemMore['size'] type.`);
4286
4286
  }
4287
4287
  /*************
@@ -4330,10 +4330,10 @@ const MgItemMore = class {
4330
4330
  * @returns HTML Element
4331
4331
  */
4332
4332
  render() {
4333
- return (index.h(index.Host, { key: '18e3ecec55a7078662bdb04ba6325a4d44ff1c78', role: "listitem" }, this.parentMenu && (index.h("mg-menu-item", { key: 'e04f4b62b1ce70eeae25f959ef6aeca2e4a2690d', "data-overflow-more": true, "data-size": this.parentMenu.size, ref: el => {
4333
+ return (index.h(index.Host, { key: 'b490696ded183a1db05673b3e9ba9744ee134382', role: "listitem" }, this.parentMenu && (index.h("mg-menu-item", { key: '6f8b1967da50e77d87355cedde8aeb2327ddd0ab', "data-overflow-more": true, "data-size": this.parentMenu.size, ref: el => {
4334
4334
  if (el)
4335
4335
  this.moreElementMenuItem = el;
4336
- } }, index.h("mg-icon", { key: '8f20ef688479578ebee9eabb63644837e1d45113', icon: this.icon.icon, slot: "image" }), index.h("span", { key: '7a4f08410d1e85682a8c3e1935525c418a4141de', class: { 'mg-u-visually-hidden': !this.slotlabel.display }, slot: "label" }, this.slotlabel.label), index.h("mg-menu", { key: 'f67f53d289cf65883a3534f17fb2baaa91314a66', direction: Direction.VERTICAL, label: this.messages.menuLabel, size: this.size })))));
4336
+ } }, index.h("mg-icon", { key: 'ddcf120831d42bc6cb9b8e147abac9ba7cbeedb6', icon: this.icon.icon, size: this.size, slot: "image" }), index.h("span", { key: 'fae667ee2f6ac8f4d4f85c5a8db91dede3f470e6', class: { 'mg-u-visually-hidden': !this.slotlabel.display }, slot: "label" }, this.slotlabel.label), index.h("mg-menu", { key: '912d544f80b84b4cffa28517ffbc91d60792a460', direction: Direction.VERTICAL, label: this.messages.menuLabel, size: this.size })))));
4337
4337
  }
4338
4338
  get element() { return index.getElement(this); }
4339
4339
  static get watchers() { return {
@@ -4369,16 +4369,11 @@ const MgMenu = class {
4369
4369
  item.expanded = false;
4370
4370
  }
4371
4371
  };
4372
- /**
4373
- * get mg-item-more element
4374
- * @returns mg-item-more element
4375
- */
4376
- this.getItemMore = () => this.element.querySelector('mg-item-more');
4377
4372
  /**
4378
4373
  * get mg-item-more child mg-menu-item element
4379
4374
  * @returns mg-menu-item element
4380
4375
  */
4381
- this.getItemMoreMenuItem = () => { var _a, _b; return (_b = (_a = this.getItemMore()) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('mg-menu-item'); };
4376
+ this.getItemMoreMenuItem = () => { var _a, _b; return (_b = (_a = this.itemMoreElement) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('mg-menu-item'); };
4382
4377
  /**
4383
4378
  * Set item listend
4384
4379
  * @param item - mg-menu-item element
@@ -4414,20 +4409,25 @@ const MgMenu = class {
4414
4409
  * render mg-item-more
4415
4410
  */
4416
4411
  this.renderMgItemMore = () => {
4417
- if (this.direction !== Direction.HORIZONTAL || this.isChildMenu) {
4412
+ if (this.direction !== Direction.HORIZONTAL || this.isChildMenu || this.element.children.length <= 1) {
4418
4413
  return;
4419
4414
  }
4420
- // /!\ externalise item tag name to get a string type and bypass type checking when value is used in next createElement
4421
- // by doing this we prevent stencil to generate a circular dependencies graph at build time with mg-item-more component.
4422
- let mgItemMore = this.getItemMore();
4423
- if (!mgItemMore) {
4424
- mgItemMore = document.createElement('mg-item-more');
4425
- mgItemMore.addEventListener('item-loaded', this.handleItemLoaded);
4426
- Object.assign(mgItemMore, this.itemmore || {});
4427
- this.element.appendChild(mgItemMore);
4415
+ // Insert mg-item-more outside the mg-menu shadowdom
4416
+ if (!this.itemMoreElement) {
4417
+ this.itemMoreElement = document.createElement('mg-item-more');
4418
+ this.itemMoreElement.addEventListener('item-loaded', this.handleItemLoaded);
4419
+ this.element.appendChild(this.itemMoreElement);
4428
4420
  }
4429
- else {
4430
- Object.defineProperties(mgItemMore, this.itemmore || {});
4421
+ // update mg-item-more props
4422
+ for (const attribute in this.itemmore) {
4423
+ const newValue = this.itemmore[attribute];
4424
+ // to improve rendering we use HTML attributes as much as possible
4425
+ if (['string', 'number'].includes(typeof newValue)) {
4426
+ this.itemMoreElement.setAttribute(attribute, newValue);
4427
+ }
4428
+ else {
4429
+ this.itemMoreElement[attribute] = newValue;
4430
+ }
4431
4431
  }
4432
4432
  };
4433
4433
  this.label = undefined;
@@ -4450,6 +4450,9 @@ const MgMenu = class {
4450
4450
  if (newValue !== undefined && this.direction !== Direction.HORIZONTAL) {
4451
4451
  throw new Error(`<${this.name}> prop "itemmore" must be paired with direction ${Direction.HORIZONTAL}.`);
4452
4452
  }
4453
+ else if (newValue) {
4454
+ this.renderMgItemMore();
4455
+ }
4453
4456
  }
4454
4457
  validateSize(newValue) {
4455
4458
  if (!sizes$2.includes(newValue)) {
@@ -4500,7 +4503,7 @@ const MgMenu = class {
4500
4503
  * @returns HTML Element
4501
4504
  */
4502
4505
  render() {
4503
- return (index.h(index.Host, { key: 'a5fe4a1a61b4255cc9a06217f30ef2f154fd797d', role: "list", "aria-label": this.label }, index.h("slot", { key: '37de5388d1cca3fa46dfbb73ab26ba6e299940b5' })));
4506
+ return (index.h(index.Host, { key: 'a29897d754b7cbb34cc8d63b5ecb025c0d252e12', role: "list", "aria-label": this.label }, index.h("slot", { key: '7fc9dbd765f529e17f0c7ca2012d1b6bf86a05d9' })));
4504
4507
  }
4505
4508
  get element() { return index.getElement(this); }
4506
4509
  static get watchers() { return {
@@ -4512,7 +4515,7 @@ const MgMenu = class {
4512
4515
  };
4513
4516
  MgMenu.style = MgMenuStyle0;
4514
4517
 
4515
- const mgMenuItemCss = ".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}.mg-c-menu-item.mg-c-menu-item--size-regular .mg-c-menu-item__navigation-button,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{height:3.8rem;padding:1rem 2rem}.mg-c-menu-item.mg-c-menu-item--size-regular .mg-c-menu-item__navigation-button,.mg-c-menu-item.mg-c-menu-item--size-regular .mg-c-menu-item__navigation-button ::slotted([slot=label]),.mg-c-menu-item.mg-c-menu-item--size-regular .mg-c-menu-item__navigation-button ::slotted([slot=metadata]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular ::slotted([slot=label]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular ::slotted([slot=metadata]){font-size:var(--font-size)}.mg-c-menu-item.mg-c-menu-item--size-regular .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--horizontal,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular.mg-c-menu-item__navigation-button--horizontal{padding-bottom:calc(1rem - 0.3rem)}.mg-c-menu-item.mg-c-menu-item--size-regular .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--vertical,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular.mg-c-menu-item__navigation-button--vertical{padding-left:calc(2rem - 0.3rem)}.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{height:5.1rem;padding:1rem 3rem}.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button,.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button ::slotted([slot=label]),.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button ::slotted([slot=metadata]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium ::slotted([slot=label]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium ::slotted([slot=metadata]){font-size:calc(var(--font-size) + .2rem)}.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--horizontal,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium.mg-c-menu-item__navigation-button--horizontal{padding-bottom:calc(1rem - 0.3rem)}.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--vertical,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium.mg-c-menu-item__navigation-button--vertical{padding-left:calc(3rem - 0.3rem)}.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{height:7.1rem;padding:1rem 4rem}.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button,.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button ::slotted([slot=label]),.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button ::slotted([slot=metadata]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large ::slotted([slot=label]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large ::slotted([slot=metadata]){font-size:calc(var(--font-size) + .2rem)}.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--horizontal,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large.mg-c-menu-item__navigation-button--horizontal{padding-bottom:calc(1rem - 0.3rem)}.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--vertical,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large.mg-c-menu-item__navigation-button--vertical{padding-left:calc(4rem - 0.3rem)}.mg-c-menu-item__navigation-button{display:flex;box-sizing:border-box;align-items:center;border:none;background-color:unset;color:hsl(var(--mg-menu-item-color-hsl, var(--color-dark)));column-gap:var(--mg-menu-item-navigation-button-column-gap, 1rem);cursor:pointer;font-family:var(--font-family);font-weight:400;line-height:var(--line-height);text-decoration:none;white-space:nowrap}.mg-c-menu-item__navigation-button:disabled,.mg-c-menu-item__navigation-button--disabled{cursor:default;opacity:var(--mg-disabled-opacity)}.mg-c-menu-item__navigation-button:focus-visible{z-index:10}.mg-c-menu-item__navigation-button:hover:not(.mg-c-menu-item__navigation-button--disabled),.mg-c-menu-item__navigation-button:focus-visible:not(.mg-c-menu-item__navigation-button--disabled){background-color:hsl(var(--mg-menu-item-focused-background-color-hsl)/10%)}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--active{color:hsl(var(--mg-menu-item-color-active-hsl));font-weight:600}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--active.mg-c-menu-item__navigation-button--horizontal{border-bottom-color:hsl(var(--mg-menu-item-border-color-active-hsl))}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--active.mg-c-menu-item__navigation-button--vertical{border-left-color:hsl(var(--mg-menu-item-border-color-active-hsl))}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--hidden{display:none}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--horizontal{border-bottom:.3rem solid rgba(0,0,0,0)}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--vertical{border-left:.3rem solid rgba(0,0,0,0)}:host([data-style-direction=vertical][data-level=\"1\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{padding-left:calc(1*2rem - .3rem)}:host([data-level=\"1\"]) .mg-c-menu-item__collapse-container{z-index:calc(1*10)}:host([data-style-direction=vertical][data-level=\"2\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{padding-left:calc(2*2rem - .3rem)}:host([data-level=\"2\"]) .mg-c-menu-item__collapse-container{z-index:calc(2*10)}:host([data-style-direction=vertical][data-level=\"3\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{padding-left:calc(3*2rem - .3rem)}:host([data-level=\"3\"]) .mg-c-menu-item__collapse-container{z-index:calc(3*10)}:host([data-style-direction=vertical][data-level=\"4\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{padding-left:calc(4*2rem - .3rem)}:host([data-level=\"4\"]) .mg-c-menu-item__collapse-container{z-index:calc(4*10)}:host([data-style-direction=vertical][data-level=\"5\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{padding-left:calc(5*2rem - .3rem)}:host([data-level=\"5\"]) .mg-c-menu-item__collapse-container{z-index:calc(5*10)}:host([data-style-direction=vertical][data-level=\"6\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{padding-left:calc(6*2rem - .3rem)}:host([data-level=\"6\"]) .mg-c-menu-item__collapse-container{z-index:calc(6*10)}:host([data-style-direction=vertical][data-level=\"1\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(1*3rem - .3rem)}:host([data-level=\"1\"]) .mg-c-menu-item__collapse-container{z-index:calc(1*10)}:host([data-style-direction=vertical][data-level=\"2\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(2*3rem - .3rem)}:host([data-level=\"2\"]) .mg-c-menu-item__collapse-container{z-index:calc(2*10)}:host([data-style-direction=vertical][data-level=\"3\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(3*3rem - .3rem)}:host([data-level=\"3\"]) .mg-c-menu-item__collapse-container{z-index:calc(3*10)}:host([data-style-direction=vertical][data-level=\"4\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(4*3rem - .3rem)}:host([data-level=\"4\"]) .mg-c-menu-item__collapse-container{z-index:calc(4*10)}:host([data-style-direction=vertical][data-level=\"5\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(5*3rem - .3rem)}:host([data-level=\"5\"]) .mg-c-menu-item__collapse-container{z-index:calc(5*10)}:host([data-style-direction=vertical][data-level=\"6\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(6*3rem - .3rem)}:host([data-level=\"6\"]) .mg-c-menu-item__collapse-container{z-index:calc(6*10)}:host([data-style-direction=vertical][data-level=\"1\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{padding-left:calc(1*4rem - .3rem)}:host([data-level=\"1\"]) .mg-c-menu-item__collapse-container{z-index:calc(1*10)}:host([data-style-direction=vertical][data-level=\"2\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{padding-left:calc(2*4rem - .3rem)}:host([data-level=\"2\"]) .mg-c-menu-item__collapse-container{z-index:calc(2*10)}:host([data-style-direction=vertical][data-level=\"3\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{padding-left:calc(3*4rem - .3rem)}:host([data-level=\"3\"]) .mg-c-menu-item__collapse-container{z-index:calc(3*10)}:host([data-style-direction=vertical][data-level=\"4\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{padding-left:calc(4*4rem - .3rem)}:host([data-level=\"4\"]) .mg-c-menu-item__collapse-container{z-index:calc(4*10)}:host([data-style-direction=vertical][data-level=\"5\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{padding-left:calc(5*4rem - .3rem)}:host([data-level=\"5\"]) .mg-c-menu-item__collapse-container{z-index:calc(5*10)}:host([data-style-direction=vertical][data-level=\"6\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{padding-left:calc(6*4rem - .3rem)}:host([data-level=\"6\"]) .mg-c-menu-item__collapse-container{z-index:calc(6*10)}.mg-c-menu-item{max-width:var(--mg-menu-item-navigation-button-max-width)}.mg-c-menu-item__collapse-container{z-index:10;width:max-content}.mg-c-menu-item__navigation-button-center{min-width:0}.mg-c-menu-item__navigation-button-text-content{display:flex;width:100%;align-items:center}.mg-c-menu-item__navigation-button-text-content-notification,.mg-c-menu-item__navigation-button-text-content ::slotted([slot=information]){margin-left:1rem;font-size:var(--font-size)}.mg-c-menu-item__navigation-button-new-tab{margin-left:.6rem}.mg-c-menu-item__navigation-button-chevron{margin-left:auto;transition:200ms}.mg-c-menu-item__navigation-button-chevron--rotate.mg-c-menu-item__navigation-button-chevron{transform:rotate(180deg)}:host{position:relative;display:flex;--mg-popover-padding-vertical:0;--mg-popover-padding-horizontal:0;--mg-popover-max-width:unset}:host([data-style-direction=vertical]){flex-direction:column}:host([data-style-direction=vertical]) .mg-c-menu-item__navigation-button{width:100%}:host([data-style-direction=vertical]) .mg-c-menu-item__collapse-container{position:unset;top:unset;left:unset;width:unset}:host([data-style-direction=vertical]) .mg-c-menu-item-chevron{margin-left:auto}:host([data-overflow-more]){--mg-menu-item-navigation-button-column-gap:0}:host([data-overflow-more]) .mg-c-menu-item__navigation-button-chevron{display:none}:host([data-overflow-more]) .mg-c-menu-item__navigation-button-text-content ::slotted([slot=information]){margin-left:0}:host([data-overflow-more]) ::slotted(mg-menu){--mg-menu-item-navigation-button-column-gap:1rem}:host([data-style-direction=horizontal]) .mg-c-menu-item__collapse-container.mg-c-menu-item__collapse-container--first-level,:host([data-overflow-more]) .mg-c-menu-item__collapse-container.mg-c-menu-item__collapse-container--first-level{background-color:hsl(var(--color-light))}:host([data-style-direction=horizontal]) .mg-c-menu-item__collapse-container.mg-c-menu-item__collapse-container--first-level ::slotted(mg-menu),:host([data-overflow-more]) .mg-c-menu-item__collapse-container.mg-c-menu-item__collapse-container--first-level ::slotted(mg-menu){padding:1rem 0}::slotted([slot=label]),::slotted([slot=metadata]){display:block;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}::slotted(*){display:flex;flex-direction:column}:host([status=disabled]){pointer-events:none}:host([hidden]){display:none}";
4518
+ const mgMenuItemCss = ".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}.mg-c-menu-item.mg-c-menu-item--size-regular .mg-c-menu-item__navigation-button,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{height:3.8rem;padding:1rem 2rem}.mg-c-menu-item.mg-c-menu-item--size-regular .mg-c-menu-item__navigation-button,.mg-c-menu-item.mg-c-menu-item--size-regular .mg-c-menu-item__navigation-button ::slotted([slot=label]),.mg-c-menu-item.mg-c-menu-item--size-regular .mg-c-menu-item__navigation-button ::slotted([slot=metadata]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular ::slotted([slot=label]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular ::slotted([slot=metadata]){font-size:var(--font-size)}.mg-c-menu-item.mg-c-menu-item--size-regular .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--horizontal,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular.mg-c-menu-item__navigation-button--horizontal{padding-bottom:calc(1rem - 0.3rem)}.mg-c-menu-item.mg-c-menu-item--size-regular .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--vertical,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular.mg-c-menu-item__navigation-button--vertical{padding-left:calc(2rem - 0.3rem)}.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{height:5.1rem;padding:1rem 3rem}.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button,.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button ::slotted([slot=label]),.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button ::slotted([slot=metadata]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium ::slotted([slot=label]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium ::slotted([slot=metadata]){font-size:calc(var(--font-size) + .2rem)}.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--horizontal,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium.mg-c-menu-item__navigation-button--horizontal{padding-bottom:calc(1rem - 0.3rem)}.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--vertical,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium.mg-c-menu-item__navigation-button--vertical{padding-left:calc(3rem - 0.3rem)}.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{height:7.1rem;padding:1rem 4rem}.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button,.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button ::slotted([slot=label]),.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button ::slotted([slot=metadata]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large ::slotted([slot=label]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large ::slotted([slot=metadata]){font-size:calc(var(--font-size) + .2rem)}.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--horizontal,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large.mg-c-menu-item__navigation-button--horizontal{padding-bottom:calc(1rem - 0.3rem)}.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--vertical,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large.mg-c-menu-item__navigation-button--vertical{padding-left:calc(4rem - 0.3rem)}.mg-c-menu-item__navigation-button{display:flex;box-sizing:border-box;align-items:center;border:none;background-color:unset;color:hsl(var(--mg-menu-item-color-hsl, var(--color-dark)));column-gap:var(--mg-menu-item-navigation-button-column-gap, 1rem);cursor:pointer;font-family:var(--font-family);font-weight:400;line-height:var(--line-height);text-decoration:none;white-space:nowrap}.mg-c-menu-item__navigation-button:disabled,.mg-c-menu-item__navigation-button--disabled{cursor:default;opacity:var(--mg-disabled-opacity)}.mg-c-menu-item__navigation-button:focus-visible{z-index:10}.mg-c-menu-item__navigation-button:hover:not(.mg-c-menu-item__navigation-button--disabled),.mg-c-menu-item__navigation-button:focus-visible:not(.mg-c-menu-item__navigation-button--disabled){background-color:hsl(var(--mg-menu-item-focused-background-color-hsl)/10%)}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--active{color:hsl(var(--mg-menu-item-color-active-hsl));font-weight:600}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--active.mg-c-menu-item__navigation-button--horizontal{border-bottom-color:hsl(var(--mg-menu-item-border-color-active-hsl))}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--active.mg-c-menu-item__navigation-button--vertical{border-left-color:hsl(var(--mg-menu-item-border-color-active-hsl))}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--hidden{display:none}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--horizontal{border-bottom:.3rem solid rgba(0,0,0,0)}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--vertical{border-left:.3rem solid rgba(0,0,0,0)}:host([data-style-direction=vertical][data-level=\"1\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{padding-left:calc(1*2rem - .3rem)}:host([data-level=\"1\"]) .mg-c-menu-item__collapse-container{z-index:calc(1*10)}:host([data-style-direction=vertical][data-level=\"2\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{padding-left:calc(2*2rem - .3rem)}:host([data-level=\"2\"]) .mg-c-menu-item__collapse-container{z-index:calc(2*10)}:host([data-style-direction=vertical][data-level=\"3\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{padding-left:calc(3*2rem - .3rem)}:host([data-level=\"3\"]) .mg-c-menu-item__collapse-container{z-index:calc(3*10)}:host([data-style-direction=vertical][data-level=\"4\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{padding-left:calc(4*2rem - .3rem)}:host([data-level=\"4\"]) .mg-c-menu-item__collapse-container{z-index:calc(4*10)}:host([data-style-direction=vertical][data-level=\"5\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{padding-left:calc(5*2rem - .3rem)}:host([data-level=\"5\"]) .mg-c-menu-item__collapse-container{z-index:calc(5*10)}:host([data-style-direction=vertical][data-level=\"6\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{padding-left:calc(6*2rem - .3rem)}:host([data-level=\"6\"]) .mg-c-menu-item__collapse-container{z-index:calc(6*10)}:host([data-style-direction=vertical][data-level=\"1\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(1*3rem - .3rem)}:host([data-level=\"1\"]) .mg-c-menu-item__collapse-container{z-index:calc(1*10)}:host([data-style-direction=vertical][data-level=\"2\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(2*3rem - .3rem)}:host([data-level=\"2\"]) .mg-c-menu-item__collapse-container{z-index:calc(2*10)}:host([data-style-direction=vertical][data-level=\"3\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(3*3rem - .3rem)}:host([data-level=\"3\"]) .mg-c-menu-item__collapse-container{z-index:calc(3*10)}:host([data-style-direction=vertical][data-level=\"4\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(4*3rem - .3rem)}:host([data-level=\"4\"]) .mg-c-menu-item__collapse-container{z-index:calc(4*10)}:host([data-style-direction=vertical][data-level=\"5\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(5*3rem - .3rem)}:host([data-level=\"5\"]) .mg-c-menu-item__collapse-container{z-index:calc(5*10)}:host([data-style-direction=vertical][data-level=\"6\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(6*3rem - .3rem)}:host([data-level=\"6\"]) .mg-c-menu-item__collapse-container{z-index:calc(6*10)}:host([data-style-direction=vertical][data-level=\"1\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{padding-left:calc(1*4rem - .3rem)}:host([data-level=\"1\"]) .mg-c-menu-item__collapse-container{z-index:calc(1*10)}:host([data-style-direction=vertical][data-level=\"2\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{padding-left:calc(2*4rem - .3rem)}:host([data-level=\"2\"]) .mg-c-menu-item__collapse-container{z-index:calc(2*10)}:host([data-style-direction=vertical][data-level=\"3\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{padding-left:calc(3*4rem - .3rem)}:host([data-level=\"3\"]) .mg-c-menu-item__collapse-container{z-index:calc(3*10)}:host([data-style-direction=vertical][data-level=\"4\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{padding-left:calc(4*4rem - .3rem)}:host([data-level=\"4\"]) .mg-c-menu-item__collapse-container{z-index:calc(4*10)}:host([data-style-direction=vertical][data-level=\"5\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{padding-left:calc(5*4rem - .3rem)}:host([data-level=\"5\"]) .mg-c-menu-item__collapse-container{z-index:calc(5*10)}:host([data-style-direction=vertical][data-level=\"6\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{padding-left:calc(6*4rem - .3rem)}:host([data-level=\"6\"]) .mg-c-menu-item__collapse-container{z-index:calc(6*10)}.mg-c-menu-item{max-width:var(--mg-menu-item-navigation-button-max-width)}.mg-c-menu-item__collapse-container{z-index:10;width:max-content}.mg-c-menu-item__navigation-button-center{min-width:0}.mg-c-menu-item__navigation-button-text-content{display:flex;width:100%;align-items:center}.mg-c-menu-item__navigation-button-text-content-notification,.mg-c-menu-item__navigation-button-text-content ::slotted([slot=information]){margin-left:1rem;font-size:var(--font-size)}.mg-c-menu-item__navigation-button-new-tab{margin-left:.6rem}.mg-c-menu-item__navigation-button-chevron{display:var(--mg-c-menu-item-chevron-display);margin-left:auto;transition:200ms}.mg-c-menu-item__navigation-button-chevron--rotate.mg-c-menu-item__navigation-button-chevron{transform:rotate(180deg)}:host{position:relative;display:flex;--mg-popover-padding-vertical:0;--mg-popover-padding-horizontal:0;--mg-popover-max-width:unset}:host([data-style-direction=vertical]){flex-direction:column}:host([data-style-direction=vertical]) .mg-c-menu-item__navigation-button{width:100%}:host([data-style-direction=vertical]) .mg-c-menu-item__collapse-container{position:unset;top:unset;left:unset;width:unset}:host([data-style-direction=vertical]) .mg-c-menu-item-chevron{margin-left:auto}:host([data-overflow-more]){--mg-menu-item-navigation-button-column-gap:0}:host([data-overflow-more]) .mg-c-menu-item__navigation-button-chevron{--mg-c-menu-item-chevron-display:none}:host([data-overflow-more]) .mg-c-menu-item__navigation-button-text-content ::slotted([slot=information]){margin-left:0}:host([data-overflow-more]) ::slotted(mg-menu){--mg-menu-item-navigation-button-column-gap:1rem}:host([data-style-direction=horizontal]) .mg-c-menu-item__collapse-container.mg-c-menu-item__collapse-container--first-level,:host([data-overflow-more]) .mg-c-menu-item__collapse-container.mg-c-menu-item__collapse-container--first-level{background-color:hsl(var(--color-light))}:host([data-style-direction=horizontal]) .mg-c-menu-item__collapse-container.mg-c-menu-item__collapse-container--first-level ::slotted(mg-menu),:host([data-overflow-more]) .mg-c-menu-item__collapse-container.mg-c-menu-item__collapse-container--first-level ::slotted(mg-menu){padding:1rem 0}::slotted([slot=label]),::slotted([slot=metadata]){display:block;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}::slotted(*){display:flex;flex-direction:column}:host([status=disabled]){pointer-events:none}:host([hidden]){display:none}";
4516
4519
  const MgMenuItemStyle0 = mgMenuItemCss;
4517
4520
 
4518
4521
  const MgMenuItem = class {
@@ -4578,7 +4581,7 @@ const MgMenuItem = class {
4578
4581
  throw new Error(`<${this.name}> slot "label" is required.`);
4579
4582
  ['label', 'metadata'].forEach(slot => {
4580
4583
  Array.from(this.element.querySelectorAll(`[slot="${slot}"]`)).forEach(element => {
4581
- if (!index$1.Ne(element.textContent))
4584
+ if (!index$1.Pe(element.textContent))
4582
4585
  throw new Error(`<${this.name}> slot "${slot}" must have text content.`);
4583
4586
  if ((guard && element.getAttribute('title') === null) || !guard)
4584
4587
  element.setAttribute('title', element.textContent);
@@ -4647,13 +4650,13 @@ const MgMenuItem = class {
4647
4650
  * @returns HTML Element
4648
4651
  */
4649
4652
  this.renderSlot = () => index.h("slot", null);
4650
- this.identifier = index$1.Me('mg-menu-item');
4653
+ this.identifier = index$1.Ne('mg-menu-item');
4651
4654
  this.href = undefined;
4652
4655
  this.target = undefined;
4653
4656
  this.status = Status$1.VISIBLE;
4654
4657
  this.expanded = false;
4655
4658
  this.size = 'regular';
4656
- this.navigationButtonClassList = new index$1.Oe([this.navigationButton]);
4659
+ this.navigationButtonClassList = new index$1.Be([this.navigationButton]);
4657
4660
  this.direction = undefined;
4658
4661
  this.isInMainMenu = undefined;
4659
4662
  this.isItemMore = undefined;
@@ -4800,7 +4803,7 @@ const MgMenuItem = class {
4800
4803
  * Emit event when component is updated
4801
4804
  */
4802
4805
  componentShouldUpdate() {
4803
- return index$1.Ce(() => {
4806
+ return index$1.ze(() => {
4804
4807
  this.itemUpdated.emit();
4805
4808
  });
4806
4809
  }
@@ -4813,7 +4816,8 @@ const MgMenuItem = class {
4813
4816
  ['mg-c-menu-item__collapse-container']: true,
4814
4817
  ['mg-c-menu-item__collapse-container--first-level']: (this.isInMainMenu || this.isItemMore) && this.isDirection(Direction.HORIZONTAL),
4815
4818
  });
4816
- return (index.h(index.Host, { key: '10b41e1b90d01a0f0df082cd9fc50884e87c2e59', role: this.isItemMore ? 'presentation' : 'listitem' }, this.displayPopover() ? (index.h("mg-popover", { display: this.expanded, placement: "bottom-start", arrowHide: true, "onDisplay-change": this.handlePopoverDisplay, identifier: this.getPopoverIdentifier() }, this.renderInteractiveElement(), index.h("div", { class: getContainerClasses(), slot: "content" }, this.renderSlot()))) : ([
4819
+ return (index.h(index.Host, { key: '10b41e1b90d01a0f0df082cd9fc50884e87c2e59', role: this.isItemMore ? 'presentation' : 'listitem' }, this.displayPopover() ? (index.h("mg-popover", { display: this.expanded, placement: "bottom-start", arrowHide: true, "onDisplay-change": this.handlePopoverDisplay, identifier: this.getPopoverIdentifier(), "data-fallback-placement": "bottom-end" // use for the last element of the menu if it is placed on the right side
4820
+ }, this.renderInteractiveElement(), index.h("div", { class: getContainerClasses(), slot: "content" }, this.renderSlot()))) : ([
4817
4821
  this.renderInteractiveElement(),
4818
4822
  index.h("div", { key: "vertical-container", class: getContainerClasses(), hidden: !this.expanded }, this.renderSlot()),
4819
4823
  ])));
@@ -4906,13 +4910,13 @@ const MgMessage = class {
4906
4910
  return 'exclamation-circle';
4907
4911
  }
4908
4912
  };
4909
- this.identifier = index$1.Me('mg-message');
4913
+ this.identifier = index$1.Ne('mg-message');
4910
4914
  this.delay = undefined;
4911
4915
  this.variant = variants$1[0];
4912
4916
  this.closeButton = false;
4913
4917
  this.hide = false;
4914
4918
  this.noAriaRole = undefined;
4915
- this.classCollection = new index$1.Oe(['mg-c-message']);
4919
+ this.classCollection = new index$1.Be(['mg-c-message']);
4916
4920
  this.hasActions = false;
4917
4921
  }
4918
4922
  validateDelay(newValue) {
@@ -5055,12 +5059,12 @@ const MgModal = class {
5055
5059
  */
5056
5060
  this.setFocus = () => {
5057
5061
  // Get all focusable elements
5058
- const slottedFocusableElements = Array.from(this.element.querySelectorAll(index$1._e));
5062
+ const slottedFocusableElements = Array.from(this.element.querySelectorAll(index$1.He));
5059
5063
  // If close button is enabled or at least one of the slotted element is focusable
5060
5064
  if (this.closeButton || slottedFocusableElements.length > 0) {
5061
5065
  // Check if slotted focusable elements have shadowDom with focusable elements
5062
5066
  this.modalFocusableElements = slottedFocusableElements.reduce((acc, focusableElement) => {
5063
- acc.push(focusableElement.shadowRoot !== null ? focusableElement.shadowRoot.querySelector(index$1._e) || focusableElement : focusableElement);
5067
+ acc.push(focusableElement.shadowRoot !== null ? focusableElement.shadowRoot.querySelector(index$1.He) || focusableElement : focusableElement);
5064
5068
  return acc;
5065
5069
  }, []);
5066
5070
  // When close button is enabled it's the first focusable element.
@@ -5082,21 +5086,21 @@ const MgModal = class {
5082
5086
  this.handleClose = () => {
5083
5087
  this.hide = true;
5084
5088
  };
5085
- this.identifier = index$1.Me('mg-modal');
5089
+ this.identifier = index$1.Ne('mg-modal');
5086
5090
  this.dialogRole = dialogRoles[0];
5087
5091
  this.modalTitle = undefined;
5088
5092
  this.closeButton = false;
5089
5093
  this.hide = undefined;
5090
5094
  this.hasActions = false;
5091
5095
  this.hasContent = false;
5092
- this.classCollection = new index$1.Oe(['mg-c-modal']);
5096
+ this.classCollection = new index$1.Be(['mg-c-modal']);
5093
5097
  }
5094
5098
  validateDialogRole(newValue) {
5095
5099
  if (!dialogRoles.includes(newValue))
5096
5100
  throw new Error(`<mg-modal> prop "dialogRole" must be one of: ${dialogRoles.join(', ')}.`);
5097
5101
  }
5098
5102
  validateModalTitle(newValue) {
5099
- if (!index$1.Ne(newValue)) {
5103
+ if (!index$1.Pe(newValue)) {
5100
5104
  throw new Error('<mg-modal> prop "modalTitle" is required.');
5101
5105
  }
5102
5106
  }
@@ -5243,7 +5247,7 @@ const MgPagination = class {
5243
5247
  this.handleGoToPage = (action, disabled) => {
5244
5248
  !disabled && this.goToPage(action === NavigationAction.NEXT ? this.currentPage + 1 : this.currentPage - 1);
5245
5249
  };
5246
- this.identifier = index$1.Me('mg-pagination');
5250
+ this.identifier = index$1.Ne('mg-pagination');
5247
5251
  this.label = undefined;
5248
5252
  this.hideNavigationLabels = undefined;
5249
5253
  this.hidePageCount = undefined;
@@ -5408,7 +5412,7 @@ const MgPanel = class {
5408
5412
  ];
5409
5413
  return this.titlePosition === 'right' ? children.reverse() : children;
5410
5414
  };
5411
- this.identifier = index$1.Me('mg-panel');
5415
+ this.identifier = index$1.Ne('mg-panel');
5412
5416
  this.panelTitle = undefined;
5413
5417
  this.titlePattern = undefined;
5414
5418
  this.titlePatternErrorMessage = undefined;
@@ -5417,12 +5421,12 @@ const MgPanel = class {
5417
5421
  this.expanded = false;
5418
5422
  this.expandToggleDisplay = expandToggleDisplays[0];
5419
5423
  this.expandToggleDisabled = undefined;
5420
- this.classCollection = new index$1.Oe(['mg-c-panel']);
5424
+ this.classCollection = new index$1.Be(['mg-c-panel']);
5421
5425
  this.isEditing = false;
5422
5426
  this.updatedPanelTitle = undefined;
5423
5427
  }
5424
5428
  validatePanelTitle(newValue) {
5425
- if (!index$1.Ne(newValue))
5429
+ if (!index$1.Pe(newValue))
5426
5430
  throw new Error('<mg-panel> prop "panelTitle" is required.');
5427
5431
  this.titleChange.emit(newValue);
5428
5432
  }
@@ -7373,7 +7377,7 @@ const MgPopover = class {
7373
7377
  mgPopoverContent.setAttribute('id', this.identifier);
7374
7378
  }
7375
7379
  };
7376
- this.identifier = index$1.Me('mg-popover');
7380
+ this.identifier = index$1.Ne('mg-popover');
7377
7381
  this.placement = 'bottom';
7378
7382
  this.arrowHide = false;
7379
7383
  this.closeButton = false;
@@ -7416,7 +7420,7 @@ const MgPopover = class {
7416
7420
  */
7417
7421
  componentWillLoad() {
7418
7422
  // Get windows to attach events
7419
- this.windows = index$1.Be(window);
7423
+ this.windows = index$1.we(window);
7420
7424
  // render mg-popover-content slot
7421
7425
  this.renderPopoverContent();
7422
7426
  this.validateCloseButton(this.closeButton);
@@ -7434,6 +7438,10 @@ const MgPopover = class {
7434
7438
  // Add aria attributes
7435
7439
  interactiveElement.setAttribute('aria-controls', this.identifier);
7436
7440
  interactiveElement.setAttribute('aria-expanded', `${this.display}`);
7441
+ const fallbackPlacements = [];
7442
+ if (this.element.dataset.fallbackPlacement) {
7443
+ fallbackPlacements.push(this.element.dataset.fallbackPlacement);
7444
+ }
7437
7445
  // Create popperjs popover
7438
7446
  this.popper = createPopper(interactiveElement, this.mgPopover, {
7439
7447
  placement: this.placement,
@@ -7448,7 +7456,7 @@ const MgPopover = class {
7448
7456
  {
7449
7457
  name: 'flip',
7450
7458
  options: {
7451
- fallbackPlacements: ['auto'],
7459
+ fallbackPlacements: [...fallbackPlacements, 'auto'],
7452
7460
  },
7453
7461
  },
7454
7462
  ],
@@ -7478,7 +7486,7 @@ const MgPopover = class {
7478
7486
  * @returns HTML Element
7479
7487
  */
7480
7488
  render() {
7481
- return (index.h(index.Host, { key: '788fd2a8f759f8ae9188b05395cbfc33b5b06c69' }, index.h("slot", { key: '9109948237f93d375e6d1b234274f8283c0260d3' }), index.h("slot", { key: 'e76a1093edab91746a4d3302d7976129ed7c6042', name: "content" })));
7489
+ return (index.h(index.Host, { key: 'a01aff00a17da32a72491629ba80ec51a34cdb0e' }, index.h("slot", { key: 'bb314190042b65bf899e34efac1781ce9230930f' }), index.h("slot", { key: 'daba0b8cb0b1b3b4637bb972da309a9afb73f99e', name: "content" })));
7482
7490
  }
7483
7491
  get element() { return index.getElement(this); }
7484
7492
  static get watchers() { return {
@@ -7504,7 +7512,7 @@ const MgPopoverContent = class {
7504
7512
  this.hideContent.emit();
7505
7513
  };
7506
7514
  this.closeButton = false;
7507
- this.classCollection = new index$1.Oe(['mg-c-popover-content']);
7515
+ this.classCollection = new index$1.Be(['mg-c-popover-content']);
7508
7516
  }
7509
7517
  /*************
7510
7518
  * Lifecycle *
@@ -7522,7 +7530,7 @@ const MgPopoverContent = class {
7522
7530
  componentDidLoad() {
7523
7531
  const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
7524
7532
  const slottedTitleElement = this.element.querySelector('[slot="title"]');
7525
- if (slottedTitleElement && !index$1.De(slottedTitleElement, headingTags)) {
7533
+ if (slottedTitleElement && !index$1.Ce(slottedTitleElement, headingTags)) {
7526
7534
  throw new Error(`<mg-popover> Slotted title must be a heading: ${headingTags.join(', ')}`);
7527
7535
  }
7528
7536
  }
@@ -7558,7 +7566,7 @@ const MgSkipLinks = class {
7558
7566
  this.links = undefined;
7559
7567
  }
7560
7568
  validateLinks(links) {
7561
- if (links === undefined || links.length === 0 || links.some(link => !index$1.Ne(link.href) || !link.href.startsWith('#') || !index$1.Ne(link.label))) {
7569
+ if (links === undefined || links.length === 0 || links.some(link => !index$1.Pe(link.href) || !link.href.startsWith('#') || !index$1.Pe(link.label))) {
7562
7570
  throw new Error(`<mg-skip-links> prop "links": Cannot be empty and each link must contains an href starting with a "#" and a non empty label attributes.`);
7563
7571
  }
7564
7572
  }
@@ -7710,7 +7718,7 @@ const MgTabs = class {
7710
7718
  */
7711
7719
  this.resetFocus = () => {
7712
7720
  // update asynchronously tabindex to prevent get focus on new tabindex at then end of event process
7713
- index$1.Ce(() => {
7721
+ index$1.ze(() => {
7714
7722
  this.tabFocus = undefined;
7715
7723
  Array.from(this.element.shadowRoot.querySelectorAll('[data-index]')).forEach((tab, index) => {
7716
7724
  tab.setAttribute('tabindex', this.activeTab - this.startIndex !== index ? '-1' : '0');
@@ -7725,16 +7733,16 @@ const MgTabs = class {
7725
7733
  if (slots.length !== this.tabs.length)
7726
7734
  throw new Error('<mg-tabs> Must have slots counts equal to tabs count.');
7727
7735
  };
7728
- this.identifier = index$1.Me('mg-tabs');
7736
+ this.identifier = index$1.Ne('mg-tabs');
7729
7737
  this.label = undefined;
7730
7738
  this.size = 'regular';
7731
7739
  this.items = undefined;
7732
7740
  this.activeTab = undefined;
7733
7741
  this.tabs = [];
7734
- this.classCollection = new index$1.Oe(['mg-c-tabs']);
7742
+ this.classCollection = new index$1.Be(['mg-c-tabs']);
7735
7743
  }
7736
7744
  validateLabel(newValue) {
7737
- if (!index$1.Ne(newValue)) {
7745
+ if (!index$1.Pe(newValue)) {
7738
7746
  throw new Error('<mg-tabs> prop "label" is required.');
7739
7747
  }
7740
7748
  }
@@ -7746,7 +7754,7 @@ const MgTabs = class {
7746
7754
  }
7747
7755
  validateItems(newValue) {
7748
7756
  // String array
7749
- if (index$1.Fe(newValue))
7757
+ if (index$1.Ue(newValue))
7750
7758
  this.tabs = newValue.map(item => ({ label: item, status: Status.VISIBLE }));
7751
7759
  // Object array
7752
7760
  else if (Array.isArray(newValue) && newValue.length > 0 && newValue.every(isTabItem))
@@ -7846,7 +7854,7 @@ const MgTag = class {
7846
7854
  this.variant = variants[0];
7847
7855
  this.outline = undefined;
7848
7856
  this.soft = undefined;
7849
- this.classCollection = new index$1.Oe(['mg-c-tag']);
7857
+ this.classCollection = new index$1.Be(['mg-c-tag']);
7850
7858
  }
7851
7859
  validateVariant(newValue, oldValue) {
7852
7860
  if (!variants.includes(newValue)) {
@@ -7883,7 +7891,7 @@ const MgTag = class {
7883
7891
  * @param textContent - html element textContent property
7884
7892
  */
7885
7893
  validateTextContent(textContent) {
7886
- if (!index$1.Ne(textContent))
7894
+ if (!index$1.Pe(textContent))
7887
7895
  throw new Error('<mg-tag> slot must contain a text content.');
7888
7896
  }
7889
7897
  /*************
@@ -7943,7 +7951,7 @@ const MgTooltip = class {
7943
7951
  // Enable the event listeners
7944
7952
  this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: true }] })));
7945
7953
  // hide when click outside on nextTick to prevent event to trigger after creation
7946
- index$1.Ce(() => {
7954
+ index$1.ze(() => {
7947
7955
  this.windows.forEach((localWindow) => {
7948
7956
  localWindow.addEventListener('click', this.clickOutside, false);
7949
7957
  localWindow.addEventListener('keydown', this.pressEscape, false);
@@ -8114,7 +8122,7 @@ const MgTooltip = class {
8114
8122
  });
8115
8123
  });
8116
8124
  };
8117
- this.identifier = index$1.Me('mg-tooltip');
8125
+ this.identifier = index$1.Ne('mg-tooltip');
8118
8126
  this.message = undefined;
8119
8127
  this.placement = 'bottom';
8120
8128
  this.display = false;
@@ -8125,7 +8133,7 @@ const MgTooltip = class {
8125
8133
  this.renderTooltipContent();
8126
8134
  }
8127
8135
  validateMessage(newValue) {
8128
- if (!index$1.Ne(newValue)) {
8136
+ if (!index$1.Pe(newValue)) {
8129
8137
  throw new Error('<mg-tooltip> prop "message" is required.');
8130
8138
  }
8131
8139
  this.mgTooltipContent.message = newValue;
@@ -8174,7 +8182,7 @@ const MgTooltip = class {
8174
8182
  */
8175
8183
  componentWillLoad() {
8176
8184
  // Get windows to attach events
8177
- this.windows = index$1.Be(window);
8185
+ this.windows = index$1.we(window);
8178
8186
  // Get tooltip element
8179
8187
  this.renderTooltipContent();
8180
8188
  this.mgTooltipContent = this.element.querySelector(`#${this.identifier}`);
@@ -8193,7 +8201,7 @@ const MgTooltip = class {
8193
8201
  // get slotted element wich is not the tooltip
8194
8202
  const slotElement = this.element.querySelector(`*:not(#${this.identifier})`);
8195
8203
  // Get interactive element
8196
- const interactiveElement = slotElement.matches(index$1._e) ? slotElement : (_a = slotElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(index$1._e);
8204
+ const interactiveElement = slotElement.matches(index$1.He) ? slotElement : (_a = slotElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(index$1.He);
8197
8205
  // define selected element to become tooltip selector
8198
8206
  this.tooltipedElement = interactiveElement || slotElement;
8199
8207
  // Check if slotted element is a disabled mg-button