@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
@@ -1,5 +1,5 @@
1
- import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-e479d5ae.js';
2
- import { M as Me, i as initLocales, O as Oe, N as Ne, C as Ce, D as De, U as Ue, g as ge, p as pe, z as ze, W as We, q as qe, w as we, F as Fe, _ as _e, B as Be } from './index-8d5d1bfd.js';
1
+ import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-c4faef56.js';
2
+ import { N as Ne, i as initLocales, B as Be, P as Pe, z as ze, C as Ce, W as We, p as pe, g as ge, X as Xe, G as Ge, K as Ke, Q as Qe, U as Ue, H as He, w as we } from './index-138ea119.js';
3
3
 
4
4
  /**
5
5
  * Available menu-item positions
@@ -75,7 +75,7 @@ const MgActionMore = class {
75
75
  ************/
76
76
  this.name = 'mg-action-more';
77
77
  this.classBase = 'mg-c-action-more';
78
- this.mgPopoverIdentifier = Me(this.name);
78
+ this.mgPopoverIdentifier = Ne(this.name);
79
79
  /************
80
80
  * Methods *
81
81
  ***********/
@@ -199,7 +199,7 @@ const MgBadge = class {
199
199
  this.label = undefined;
200
200
  this.variant = variants$5[0];
201
201
  this.outline = undefined;
202
- this.classCollection = new Oe(['mg-c-badge']);
202
+ this.classCollection = new Be(['mg-c-badge']);
203
203
  }
204
204
  validateValue(newValue) {
205
205
  if (/^(\d+\+*|[?*!a-z])$/i.exec(`${newValue}`) === null) {
@@ -207,7 +207,7 @@ const MgBadge = class {
207
207
  }
208
208
  }
209
209
  validateLabel(newValue) {
210
- if (!Ne(newValue)) {
210
+ if (!Pe(newValue)) {
211
211
  throw new Error('<mg-badge> prop "label" is required.');
212
212
  }
213
213
  }
@@ -318,7 +318,7 @@ const MgButton = class {
318
318
  this.isIcon = false;
319
319
  this.disableOnClick = false;
320
320
  this.loading = false;
321
- this.classCollection = new Oe(['mg-c-button']);
321
+ this.classCollection = new Be(['mg-c-button']);
322
322
  }
323
323
  validateVariant(newValue, oldValue) {
324
324
  if (!variants$4.includes(newValue)) {
@@ -377,7 +377,7 @@ const MgButton = class {
377
377
  this.validateFullWidth(this.fullWidth);
378
378
  if (this.isIcon) {
379
379
  this.classCollection.add(`mg-c-button--icon`);
380
- if (!Ne(this.label)) {
380
+ if (!Pe(this.label)) {
381
381
  throw new Error(`<mg-button> prop "label" is mandatory when prop "isIcon" is set to true.`);
382
382
  }
383
383
  }
@@ -389,7 +389,7 @@ const MgButton = class {
389
389
  * Add listners
390
390
  */
391
391
  componentDidLoad() {
392
- Ce(() => {
392
+ ze(() => {
393
393
  var _a;
394
394
  const closestForm = this.element.closest('form') || ((_a = this.element.closest('mg-form')) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelector('form'));
395
395
  // submit buttons should trigger form submition;
@@ -448,7 +448,7 @@ const MgCard = class {
448
448
  };
449
449
  this.variant = undefined;
450
450
  this.variantStyle = undefined;
451
- this.classCollection = new Oe([this.classBase]);
451
+ this.classCollection = new Be([this.classBase]);
452
452
  }
453
453
  validateVariant(newValue, oldValue) {
454
454
  if (newValue && !variants$3.includes(newValue))
@@ -553,7 +553,7 @@ const MgDetails = class {
553
553
  this.expanded = false;
554
554
  }
555
555
  validateTitles(newValue) {
556
- if (!Ne(newValue)) {
556
+ if (!Pe(newValue)) {
557
557
  throw new Error('<mg-details> prop "toggleClosed" and "toggleOpened" must be defined.');
558
558
  }
559
559
  }
@@ -711,7 +711,7 @@ const MgForm = class {
711
711
  }
712
712
  });
713
713
  };
714
- this.identifier = Me('mg-form');
714
+ this.identifier = Ne('mg-form');
715
715
  this.name = this.identifier;
716
716
  this.readonly = false;
717
717
  this.requiredMessage = undefined;
@@ -720,7 +720,7 @@ const MgForm = class {
720
720
  this.disabled = false;
721
721
  this.valid = undefined;
722
722
  this.invalid = undefined;
723
- this.classCollection = new Oe(['mg-c-form']);
723
+ this.classCollection = new Be(['mg-c-form']);
724
724
  this.requiredMessageText = undefined;
725
725
  }
726
726
  validateRequiredMessage(newValue) {
@@ -861,7 +861,7 @@ const MgIcon = class {
861
861
  this.variant = undefined;
862
862
  this.variantStyle = undefined;
863
863
  this.spin = false;
864
- this.classCollection = new Oe(['mg-c-icon']);
864
+ this.classCollection = new Be(['mg-c-icon']);
865
865
  }
866
866
  validateIcon(newValue, oldValue) {
867
867
  if (!Object.keys(icons).includes(newValue))
@@ -960,7 +960,7 @@ const MgIllustratedMessage = class {
960
960
  componentDidLoad() {
961
961
  const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
962
962
  const slottedIllustrations = this.element.querySelectorAll('[slot="illustration"]');
963
- if (!De(this.element.querySelector('[slot="title"]'), headingTags)) {
963
+ if (!Ce(this.element.querySelector('[slot="title"]'), headingTags)) {
964
964
  throw new Error(`<mg-illustrated-message> Slotted title must be a heading: ${headingTags.join(', ')}`);
965
965
  }
966
966
  else if (slottedIllustrations.length !== 1) {
@@ -1060,7 +1060,7 @@ const MgInput = class {
1060
1060
  this.isVerticalList = false;
1061
1061
  }
1062
1062
  watchIdentifier(newValue) {
1063
- if (!Ne(newValue)) {
1063
+ if (!Pe(newValue)) {
1064
1064
  throw new Error('<mg-input> prop "identifier" is required.');
1065
1065
  }
1066
1066
  else {
@@ -1145,7 +1145,7 @@ const MgInput = class {
1145
1145
  */
1146
1146
  // eslint-disable-next-line @stencil-community/no-unused-watch
1147
1147
  watchLabel() {
1148
- if (!Ne(this.label)) {
1148
+ if (!Pe(this.label)) {
1149
1149
  throw new Error('<mg-input> prop "label" is required.');
1150
1150
  }
1151
1151
  else {
@@ -1441,7 +1441,7 @@ const MgInputCheckbox = class {
1441
1441
  * Method to update searchResults
1442
1442
  */
1443
1443
  this.updateSearchResults = () => {
1444
- this.searchResults = this.checkboxItems.filter(item => Ue(item.title).includes(Ue(this.searchValue)));
1444
+ this.searchResults = this.checkboxItems.filter(item => We(item.title).includes(We(this.searchValue)));
1445
1445
  };
1446
1446
  /**
1447
1447
  * Method to validate if one of inputs value is checked id required
@@ -1515,7 +1515,7 @@ const MgInputCheckbox = class {
1515
1515
  this.helpText = undefined;
1516
1516
  this.valid = undefined;
1517
1517
  this.invalid = undefined;
1518
- this.classCollection = new Oe([this.baseClassName, classFieldset]);
1518
+ this.classCollection = new Be([this.baseClassName, classFieldset]);
1519
1519
  this.errorMessage = undefined;
1520
1520
  this.checkboxItems = [];
1521
1521
  this.displaySearchInput = undefined;
@@ -1623,7 +1623,7 @@ const MgInputCheckbox = class {
1623
1623
  if (typeof valid !== 'boolean') {
1624
1624
  throw new Error('<mg-input-checkbox> method "setError()" param "valid" must be a boolean');
1625
1625
  }
1626
- else if (!Ne(errorMessage)) {
1626
+ else if (!Pe(errorMessage)) {
1627
1627
  throw new Error('<mg-input-checkbox> method "setError()" param "errorMessage" must be a string');
1628
1628
  }
1629
1629
  else {
@@ -1886,7 +1886,7 @@ const MgInputDate = class {
1886
1886
  * @param value - value to test
1887
1887
  * @returns truthy when value match the pattern
1888
1888
  */
1889
- this.isValidPattern = (value) => Ne(value) && ge.test(value);
1889
+ this.isValidPattern = (value) => Pe(value) && pe.test(value);
1890
1890
  /**
1891
1891
  * Format help text to display
1892
1892
  * @param helpText - help text format
@@ -1894,10 +1894,10 @@ const MgInputDate = class {
1894
1894
  */
1895
1895
  this.formatHelpText = (helpText) => {
1896
1896
  const defaultHelpTextVariable = '{defaultHelpText}';
1897
- let text = Ne(helpText) ? helpText : this.messages.input.date.helpText;
1897
+ let text = Pe(helpText) ? helpText : this.messages.input.date.helpText;
1898
1898
  if (text.includes(defaultHelpTextVariable))
1899
1899
  text = text.replace(defaultHelpTextVariable, this.formatHelpText(this.messages.input.date.helpText));
1900
- return text.replace('{pattern}', this.renderPattern()).replace('{date}', pe(ze(new Date('2023-12-24')), this.systemLocale));
1900
+ return text.replace('{pattern}', this.renderPattern()).replace('{date}', ge(Xe(new Date('2023-12-24')), this.systemLocale));
1901
1901
  };
1902
1902
  /**
1903
1903
  * Handle input event
@@ -1989,8 +1989,8 @@ const MgInputDate = class {
1989
1989
  // min, max & minMax
1990
1990
  else if ([InputError$1.MIN, InputError$1.MAX, InputError$1.MINMAX].includes(inputError)) {
1991
1991
  this.errorMessage = this.messages.errors.date[inputError]
1992
- .replace('{min}', pe(this.min, this.systemLocale))
1993
- .replace('{max}', pe(this.max, this.systemLocale));
1992
+ .replace('{min}', ge(this.min, this.systemLocale))
1993
+ .replace('{max}', ge(this.max, this.systemLocale));
1994
1994
  }
1995
1995
  // wrong date format
1996
1996
  // element.validity.badInput is default error message
@@ -2004,7 +2004,7 @@ const MgInputDate = class {
2004
2004
  * @returns translated html pattern
2005
2005
  */
2006
2006
  this.renderPattern = () => {
2007
- let patternLocal = We(this.systemLocale);
2007
+ let patternLocal = Ge(this.systemLocale);
2008
2008
  for (const key in this.messages.input.date.pattern) {
2009
2009
  patternLocal = patternLocal.replace(key, this.messages.input.date.pattern[key]);
2010
2010
  }
@@ -2026,7 +2026,7 @@ const MgInputDate = class {
2026
2026
  this.helpText = undefined;
2027
2027
  this.valid = undefined;
2028
2028
  this.invalid = undefined;
2029
- this.classCollection = new Oe(['mg-c-input--date']);
2029
+ this.classCollection = new Be(['mg-c-input--date']);
2030
2030
  this.errorMessage = undefined;
2031
2031
  }
2032
2032
  validateValue(newValue) {
@@ -2034,7 +2034,7 @@ const MgInputDate = class {
2034
2034
  if (newValue === '')
2035
2035
  newValue = null;
2036
2036
  // check value validity
2037
- if (newValue && !Ne(newValue)) {
2037
+ if (newValue && !Pe(newValue)) {
2038
2038
  throw new Error("<mg-input-date> props 'value' must be a valid string");
2039
2039
  }
2040
2040
  else if (!newValue || (newValue && this.isValidPattern(newValue))) {
@@ -2091,7 +2091,7 @@ const MgInputDate = class {
2091
2091
  if (typeof valid !== 'boolean') {
2092
2092
  throw new Error('<mg-input-date> method "setError()" param "valid" must be a boolean');
2093
2093
  }
2094
- else if (!Ne(errorMessage)) {
2094
+ else if (!Pe(errorMessage)) {
2095
2095
  throw new Error('<mg-input-date> method "setError()" param "errorMessage" must be a string');
2096
2096
  }
2097
2097
  else {
@@ -2145,7 +2145,7 @@ const MgInputDate = class {
2145
2145
  * @returns HTML Element
2146
2146
  */
2147
2147
  render() {
2148
- return (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: pe(this.value, this.locale), tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, helpText: this.formatHelpText(this.helpText), errorMessage: this.errorMessage }, 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) => {
2148
+ return (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: ge(this.value, this.locale), tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, helpText: this.formatHelpText(this.helpText), errorMessage: this.errorMessage }, 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) => {
2149
2149
  if (el !== null)
2150
2150
  this.input = el;
2151
2151
  } })));
@@ -2276,9 +2276,9 @@ const MgInputNumeric = class {
2276
2276
  this.formatValue = (value) => {
2277
2277
  switch (this.format) {
2278
2278
  case 'number':
2279
- return we(value, this.locale, this.type === 'decimal' ? this.decimalLength : undefined);
2279
+ return Qe(value, this.locale, this.type === 'decimal' ? this.decimalLength : undefined);
2280
2280
  case 'currency':
2281
- return qe(value, this.locale, this.currency);
2281
+ return Ke(value, this.locale, this.currency);
2282
2282
  case 'none':
2283
2283
  return value.toString();
2284
2284
  }
@@ -2315,7 +2315,7 @@ const MgInputNumeric = class {
2315
2315
  this.decimalLength = 2;
2316
2316
  this.valid = undefined;
2317
2317
  this.invalid = undefined;
2318
- this.classCollection = new Oe(['mg-c-input--numeric']);
2318
+ this.classCollection = new Be(['mg-c-input--numeric']);
2319
2319
  this.errorMessage = undefined;
2320
2320
  this.hasFocus = undefined;
2321
2321
  }
@@ -2411,7 +2411,7 @@ const MgInputNumeric = class {
2411
2411
  if (typeof valid !== 'boolean') {
2412
2412
  throw new Error('<mg-input-numeric> method "setError()" param "valid" must be a boolean');
2413
2413
  }
2414
- else if (!Ne(errorMessage)) {
2414
+ else if (!Pe(errorMessage)) {
2415
2415
  throw new Error('<mg-input-numeric> method "setError()" param "errorMessage" must be a string');
2416
2416
  }
2417
2417
  else {
@@ -2603,7 +2603,7 @@ const MgInputPassword = class {
2603
2603
  this.helpText = undefined;
2604
2604
  this.valid = undefined;
2605
2605
  this.invalid = undefined;
2606
- this.classCollection = new Oe(['mg-c-input--password']);
2606
+ this.classCollection = new Be(['mg-c-input--password']);
2607
2607
  this.errorMessage = undefined;
2608
2608
  this.displayPassword = false;
2609
2609
  }
@@ -2661,7 +2661,7 @@ const MgInputPassword = class {
2661
2661
  if (typeof valid !== 'boolean') {
2662
2662
  throw new Error('<mg-input-password> method "setError()" param "valid" must be a boolean');
2663
2663
  }
2664
- else if (!Ne(errorMessage)) {
2664
+ else if (!Pe(errorMessage)) {
2665
2665
  throw new Error('<mg-input-password> method "setError()" param "errorMessage" must be a string');
2666
2666
  }
2667
2667
  else {
@@ -2808,7 +2808,7 @@ const MgInputRadio = class {
2808
2808
  this.helpText = undefined;
2809
2809
  this.valid = undefined;
2810
2810
  this.invalid = undefined;
2811
- this.classCollection = new Oe(['mg-c-input--radio', classFieldset]);
2811
+ this.classCollection = new Be(['mg-c-input--radio', classFieldset]);
2812
2812
  this.errorMessage = undefined;
2813
2813
  this.options = undefined;
2814
2814
  }
@@ -2821,7 +2821,7 @@ const MgInputRadio = class {
2821
2821
  throw new Error('<mg-input-radio> prop "items" require at least 2 items.');
2822
2822
  }
2823
2823
  // String array
2824
- else if (Fe(newValue)) {
2824
+ else if (Ue(newValue)) {
2825
2825
  this.options = newValue.map(item => ({ title: item, value: item, disabled: this.disabled }));
2826
2826
  }
2827
2827
  // Object array
@@ -2880,7 +2880,7 @@ const MgInputRadio = class {
2880
2880
  if (typeof valid !== 'boolean') {
2881
2881
  throw new Error('<mg-input-radio> method "setError()" param "valid" must be a boolean');
2882
2882
  }
2883
- else if (!Ne(errorMessage)) {
2883
+ else if (!Pe(errorMessage)) {
2884
2884
  throw new Error('<mg-input-radio> method "setError()" param "errorMessage" must be a string');
2885
2885
  }
2886
2886
  else {
@@ -3027,7 +3027,7 @@ const MgInputSelect = class {
3027
3027
  if (this.input.value === '') {
3028
3028
  this.setValue(null);
3029
3029
  }
3030
- else if (Fe(this.items) && this.items.includes(this.input.value)) {
3030
+ else if (Ue(this.items) && this.items.includes(this.input.value)) {
3031
3031
  this.setValue(this.input.value);
3032
3032
  }
3033
3033
  else if (allItemsAreOptions(this.items) && typeof this.input.value === 'string' && this.items.some(this.isInputValue)) {
@@ -3101,7 +3101,7 @@ const MgInputSelect = class {
3101
3101
  this.helpText = undefined;
3102
3102
  this.valid = undefined;
3103
3103
  this.invalid = undefined;
3104
- this.classCollection = new Oe(['mg-c-input--select']);
3104
+ this.classCollection = new Be(['mg-c-input--select']);
3105
3105
  this.errorMessage = undefined;
3106
3106
  this.options = undefined;
3107
3107
  this.valueExist = undefined;
@@ -3109,7 +3109,7 @@ const MgInputSelect = class {
3109
3109
  }
3110
3110
  validateValue(newValue) {
3111
3111
  var _a, _b;
3112
- if (Fe(this.items) && typeof newValue === 'string') {
3112
+ if (Ue(this.items) && typeof newValue === 'string') {
3113
3113
  this.readonlyValue = ((_a = this.input) === null || _a === void 0 ? void 0 : _a.value) ? this.input.value : newValue;
3114
3114
  }
3115
3115
  else if (allItemsAreOptions(this.items)) {
@@ -3126,7 +3126,7 @@ const MgInputSelect = class {
3126
3126
  this.options = [];
3127
3127
  }
3128
3128
  // String array
3129
- else if (Fe(newValue)) {
3129
+ else if (Ue(newValue)) {
3130
3130
  if (typeof this.value === 'string')
3131
3131
  this.valueExist = newValue.includes(this.value);
3132
3132
  this.options = newValue.map(item => ({ title: item, value: item }));
@@ -3198,7 +3198,7 @@ const MgInputSelect = class {
3198
3198
  if (typeof valid !== 'boolean') {
3199
3199
  throw new Error('<mg-input-select> method "setError()" param "valid" must be a boolean');
3200
3200
  }
3201
- else if (!Ne(errorMessage)) {
3201
+ else if (!Pe(errorMessage)) {
3202
3202
  throw new Error('<mg-input-select> method "setError()" param "errorMessage" must be a string');
3203
3203
  }
3204
3204
  else {
@@ -3310,7 +3310,7 @@ const MgInputText = class {
3310
3310
  */
3311
3311
  this.handleFocus = () => {
3312
3312
  this.classCollection.add(this.classFocus);
3313
- this.classCollection = new Oe(this.classCollection.classes);
3313
+ this.classCollection = new Be(this.classCollection.classes);
3314
3314
  };
3315
3315
  /**
3316
3316
  * Handle blur event
@@ -3318,7 +3318,7 @@ const MgInputText = class {
3318
3318
  this.handleBlur = () => {
3319
3319
  // Manage focus
3320
3320
  this.classCollection.delete(this.classFocus);
3321
- this.classCollection = new Oe(this.classCollection.classes);
3321
+ this.classCollection = new Be(this.classCollection.classes);
3322
3322
  // Display Error
3323
3323
  this.handlerInProgress = Handler.BLUR;
3324
3324
  this.displayError().finally(() => {
@@ -3393,7 +3393,7 @@ const MgInputText = class {
3393
3393
  this.helpText = undefined;
3394
3394
  this.valid = undefined;
3395
3395
  this.invalid = undefined;
3396
- this.classCollection = new Oe(['mg-c-input--text']);
3396
+ this.classCollection = new Be(['mg-c-input--text']);
3397
3397
  this.errorMessage = undefined;
3398
3398
  }
3399
3399
  handleValue(newValue) {
@@ -3444,7 +3444,7 @@ const MgInputText = class {
3444
3444
  this.classCollection.add(`mg-c-input--width-${this.mgWidth}`);
3445
3445
  }
3446
3446
  validatePattern(newValue) {
3447
- if (newValue !== undefined && !(Ne(this.pattern) && Ne(this.patternErrorMessage))) {
3447
+ if (newValue !== undefined && !(Pe(this.pattern) && Pe(this.patternErrorMessage))) {
3448
3448
  throw new Error('<mg-input-text> props "pattern" and "patternErrorMessage" must be non-empty string and paired.');
3449
3449
  }
3450
3450
  }
@@ -3474,7 +3474,7 @@ const MgInputText = class {
3474
3474
  if (typeof valid !== 'boolean') {
3475
3475
  throw new Error('<mg-input-text> method "setError()" param "valid" must be a boolean');
3476
3476
  }
3477
- else if (!Ne(errorMessage)) {
3477
+ else if (!Pe(errorMessage)) {
3478
3478
  throw new Error('<mg-input-text> method "setError()" param "errorMessage" must be a string');
3479
3479
  }
3480
3480
  else {
@@ -3583,7 +3583,7 @@ const MgInputTextarea = class {
3583
3583
  */
3584
3584
  this.handleFocus = () => {
3585
3585
  this.classCollection.add(this.classFocus);
3586
- this.classCollection = new Oe(this.classCollection.classes);
3586
+ this.classCollection = new Be(this.classCollection.classes);
3587
3587
  };
3588
3588
  /**
3589
3589
  * Handle blur event
@@ -3591,7 +3591,7 @@ const MgInputTextarea = class {
3591
3591
  this.handleBlur = () => {
3592
3592
  // Manage focus
3593
3593
  this.classCollection.delete(this.classFocus);
3594
- this.classCollection = new Oe(this.classCollection.classes);
3594
+ this.classCollection = new Be(this.classCollection.classes);
3595
3595
  // Display Error
3596
3596
  this.handlerInProgress = Handler.BLUR;
3597
3597
  this.displayError().finally(() => {
@@ -3654,7 +3654,7 @@ const MgInputTextarea = class {
3654
3654
  this.valid = undefined;
3655
3655
  this.invalid = undefined;
3656
3656
  this.resizable = 'none';
3657
- this.classCollection = new Oe(['mg-c-input--textarea']);
3657
+ this.classCollection = new Be(['mg-c-input--textarea']);
3658
3658
  this.errorMessage = undefined;
3659
3659
  }
3660
3660
  handleValue(newValue) {
@@ -3693,7 +3693,7 @@ const MgInputTextarea = class {
3693
3693
  this.classCollection.add(`mg-c-input--width-${this.mgWidth}`);
3694
3694
  }
3695
3695
  validatePattern(newValue) {
3696
- if (newValue !== undefined && !(Ne(this.pattern) && Ne(this.patternErrorMessage))) {
3696
+ if (newValue !== undefined && !(Pe(this.pattern) && Pe(this.patternErrorMessage))) {
3697
3697
  throw new Error('<mg-input-textarea> props "pattern" and "patternErrorMessage" must be non-empty string and paired.');
3698
3698
  }
3699
3699
  }
@@ -3725,7 +3725,7 @@ const MgInputTextarea = class {
3725
3725
  if (typeof valid !== 'boolean') {
3726
3726
  throw new Error('<mg-input-textarea> method "setError()" param "valid" must be a boolean');
3727
3727
  }
3728
- else if (!Ne(errorMessage)) {
3728
+ else if (!Pe(errorMessage)) {
3729
3729
  throw new Error('<mg-input-textarea> method "setError()" param "errorMessage" must be a string');
3730
3730
  }
3731
3731
  else {
@@ -3814,7 +3814,7 @@ const MgInputTitle = class {
3814
3814
  this.tagName = 'label';
3815
3815
  }
3816
3816
  validateIdentifier(newValue) {
3817
- if (!Ne(newValue)) {
3817
+ if (!Pe(newValue)) {
3818
3818
  throw new Error('<mg-input-title> prop "identifier" is required.');
3819
3819
  }
3820
3820
  }
@@ -3928,7 +3928,7 @@ const MgInputToggle = class {
3928
3928
  this.tooltip = undefined;
3929
3929
  this.tooltipPosition = 'input';
3930
3930
  this.helpText = undefined;
3931
- this.classCollection = new Oe(['mg-c-input--toggle']);
3931
+ this.classCollection = new Be(['mg-c-input--toggle']);
3932
3932
  this.options = undefined;
3933
3933
  this.errorMessage = undefined;
3934
3934
  this.valid = undefined;
@@ -3945,7 +3945,7 @@ const MgInputToggle = class {
3945
3945
  throw new Error('<mg-input-toggle> prop "items" require 2 items.');
3946
3946
  }
3947
3947
  // String array
3948
- else if (Fe(newValue)) {
3948
+ else if (Ue(newValue)) {
3949
3949
  this.options = newValue.map(item => ({ title: item, value: item }));
3950
3950
  }
3951
3951
  // Object array
@@ -4001,7 +4001,7 @@ const MgInputToggle = class {
4001
4001
  if (typeof valid !== 'boolean') {
4002
4002
  throw new Error('<mg-input-toggle> method "setError()" param "valid" must be a boolean');
4003
4003
  }
4004
- else if (!Ne(errorMessage)) {
4004
+ else if (!Pe(errorMessage)) {
4005
4005
  throw new Error('<mg-input-toggle> method "setError()" param "errorMessage" must be a string');
4006
4006
  }
4007
4007
  else {
@@ -4247,7 +4247,7 @@ const MgItemMore = class {
4247
4247
  navElement.click();
4248
4248
  });
4249
4249
  // add id suffix to prevent duplicate key. default html id is: '';
4250
- if (Ne(proxy.id))
4250
+ if (Pe(proxy.id))
4251
4251
  proxy.id = `${proxy.id}-proxy`;
4252
4252
  // update properties and DOM when proxyfied item is updated
4253
4253
  proxified.addEventListener('item-updated', (event) => {
@@ -4277,7 +4277,7 @@ const MgItemMore = class {
4277
4277
  this.slotlabel.label = this.messages.menuLabel;
4278
4278
  }
4279
4279
  validateSize(newValue) {
4280
- if (newValue && typeof newValue !== 'string')
4280
+ if (newValue && !sizes$2.includes(newValue))
4281
4281
  throw new Error(`<${this.name}> prop "size" must match MgItemMore['size'] type.`);
4282
4282
  }
4283
4283
  /*************
@@ -4326,10 +4326,10 @@ const MgItemMore = class {
4326
4326
  * @returns HTML Element
4327
4327
  */
4328
4328
  render() {
4329
- return (h(Host, { key: '18e3ecec55a7078662bdb04ba6325a4d44ff1c78', role: "listitem" }, this.parentMenu && (h("mg-menu-item", { key: 'e04f4b62b1ce70eeae25f959ef6aeca2e4a2690d', "data-overflow-more": true, "data-size": this.parentMenu.size, ref: el => {
4329
+ return (h(Host, { key: 'b490696ded183a1db05673b3e9ba9744ee134382', role: "listitem" }, this.parentMenu && (h("mg-menu-item", { key: '6f8b1967da50e77d87355cedde8aeb2327ddd0ab', "data-overflow-more": true, "data-size": this.parentMenu.size, ref: el => {
4330
4330
  if (el)
4331
4331
  this.moreElementMenuItem = el;
4332
- } }, h("mg-icon", { key: '8f20ef688479578ebee9eabb63644837e1d45113', icon: this.icon.icon, slot: "image" }), h("span", { key: '7a4f08410d1e85682a8c3e1935525c418a4141de', class: { 'mg-u-visually-hidden': !this.slotlabel.display }, slot: "label" }, this.slotlabel.label), h("mg-menu", { key: 'f67f53d289cf65883a3534f17fb2baaa91314a66', direction: Direction.VERTICAL, label: this.messages.menuLabel, size: this.size })))));
4332
+ } }, h("mg-icon", { key: 'ddcf120831d42bc6cb9b8e147abac9ba7cbeedb6', icon: this.icon.icon, size: this.size, slot: "image" }), h("span", { key: 'fae667ee2f6ac8f4d4f85c5a8db91dede3f470e6', class: { 'mg-u-visually-hidden': !this.slotlabel.display }, slot: "label" }, this.slotlabel.label), h("mg-menu", { key: '912d544f80b84b4cffa28517ffbc91d60792a460', direction: Direction.VERTICAL, label: this.messages.menuLabel, size: this.size })))));
4333
4333
  }
4334
4334
  get element() { return getElement(this); }
4335
4335
  static get watchers() { return {
@@ -4365,16 +4365,11 @@ const MgMenu = class {
4365
4365
  item.expanded = false;
4366
4366
  }
4367
4367
  };
4368
- /**
4369
- * get mg-item-more element
4370
- * @returns mg-item-more element
4371
- */
4372
- this.getItemMore = () => this.element.querySelector('mg-item-more');
4373
4368
  /**
4374
4369
  * get mg-item-more child mg-menu-item element
4375
4370
  * @returns mg-menu-item element
4376
4371
  */
4377
- 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'); };
4372
+ 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'); };
4378
4373
  /**
4379
4374
  * Set item listend
4380
4375
  * @param item - mg-menu-item element
@@ -4410,20 +4405,25 @@ const MgMenu = class {
4410
4405
  * render mg-item-more
4411
4406
  */
4412
4407
  this.renderMgItemMore = () => {
4413
- if (this.direction !== Direction.HORIZONTAL || this.isChildMenu) {
4408
+ if (this.direction !== Direction.HORIZONTAL || this.isChildMenu || this.element.children.length <= 1) {
4414
4409
  return;
4415
4410
  }
4416
- // /!\ externalise item tag name to get a string type and bypass type checking when value is used in next createElement
4417
- // by doing this we prevent stencil to generate a circular dependencies graph at build time with mg-item-more component.
4418
- let mgItemMore = this.getItemMore();
4419
- if (!mgItemMore) {
4420
- mgItemMore = document.createElement('mg-item-more');
4421
- mgItemMore.addEventListener('item-loaded', this.handleItemLoaded);
4422
- Object.assign(mgItemMore, this.itemmore || {});
4423
- this.element.appendChild(mgItemMore);
4411
+ // Insert mg-item-more outside the mg-menu shadowdom
4412
+ if (!this.itemMoreElement) {
4413
+ this.itemMoreElement = document.createElement('mg-item-more');
4414
+ this.itemMoreElement.addEventListener('item-loaded', this.handleItemLoaded);
4415
+ this.element.appendChild(this.itemMoreElement);
4424
4416
  }
4425
- else {
4426
- Object.defineProperties(mgItemMore, this.itemmore || {});
4417
+ // update mg-item-more props
4418
+ for (const attribute in this.itemmore) {
4419
+ const newValue = this.itemmore[attribute];
4420
+ // to improve rendering we use HTML attributes as much as possible
4421
+ if (['string', 'number'].includes(typeof newValue)) {
4422
+ this.itemMoreElement.setAttribute(attribute, newValue);
4423
+ }
4424
+ else {
4425
+ this.itemMoreElement[attribute] = newValue;
4426
+ }
4427
4427
  }
4428
4428
  };
4429
4429
  this.label = undefined;
@@ -4446,6 +4446,9 @@ const MgMenu = class {
4446
4446
  if (newValue !== undefined && this.direction !== Direction.HORIZONTAL) {
4447
4447
  throw new Error(`<${this.name}> prop "itemmore" must be paired with direction ${Direction.HORIZONTAL}.`);
4448
4448
  }
4449
+ else if (newValue) {
4450
+ this.renderMgItemMore();
4451
+ }
4449
4452
  }
4450
4453
  validateSize(newValue) {
4451
4454
  if (!sizes$2.includes(newValue)) {
@@ -4496,7 +4499,7 @@ const MgMenu = class {
4496
4499
  * @returns HTML Element
4497
4500
  */
4498
4501
  render() {
4499
- return (h(Host, { key: 'a5fe4a1a61b4255cc9a06217f30ef2f154fd797d', role: "list", "aria-label": this.label }, h("slot", { key: '37de5388d1cca3fa46dfbb73ab26ba6e299940b5' })));
4502
+ return (h(Host, { key: 'a29897d754b7cbb34cc8d63b5ecb025c0d252e12', role: "list", "aria-label": this.label }, h("slot", { key: '7fc9dbd765f529e17f0c7ca2012d1b6bf86a05d9' })));
4500
4503
  }
4501
4504
  get element() { return getElement(this); }
4502
4505
  static get watchers() { return {
@@ -4508,7 +4511,7 @@ const MgMenu = class {
4508
4511
  };
4509
4512
  MgMenu.style = MgMenuStyle0;
4510
4513
 
4511
- 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}";
4514
+ 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}";
4512
4515
  const MgMenuItemStyle0 = mgMenuItemCss;
4513
4516
 
4514
4517
  const MgMenuItem = class {
@@ -4574,7 +4577,7 @@ const MgMenuItem = class {
4574
4577
  throw new Error(`<${this.name}> slot "label" is required.`);
4575
4578
  ['label', 'metadata'].forEach(slot => {
4576
4579
  Array.from(this.element.querySelectorAll(`[slot="${slot}"]`)).forEach(element => {
4577
- if (!Ne(element.textContent))
4580
+ if (!Pe(element.textContent))
4578
4581
  throw new Error(`<${this.name}> slot "${slot}" must have text content.`);
4579
4582
  if ((guard && element.getAttribute('title') === null) || !guard)
4580
4583
  element.setAttribute('title', element.textContent);
@@ -4643,13 +4646,13 @@ const MgMenuItem = class {
4643
4646
  * @returns HTML Element
4644
4647
  */
4645
4648
  this.renderSlot = () => h("slot", null);
4646
- this.identifier = Me('mg-menu-item');
4649
+ this.identifier = Ne('mg-menu-item');
4647
4650
  this.href = undefined;
4648
4651
  this.target = undefined;
4649
4652
  this.status = Status$1.VISIBLE;
4650
4653
  this.expanded = false;
4651
4654
  this.size = 'regular';
4652
- this.navigationButtonClassList = new Oe([this.navigationButton]);
4655
+ this.navigationButtonClassList = new Be([this.navigationButton]);
4653
4656
  this.direction = undefined;
4654
4657
  this.isInMainMenu = undefined;
4655
4658
  this.isItemMore = undefined;
@@ -4796,7 +4799,7 @@ const MgMenuItem = class {
4796
4799
  * Emit event when component is updated
4797
4800
  */
4798
4801
  componentShouldUpdate() {
4799
- return Ce(() => {
4802
+ return ze(() => {
4800
4803
  this.itemUpdated.emit();
4801
4804
  });
4802
4805
  }
@@ -4809,7 +4812,8 @@ const MgMenuItem = class {
4809
4812
  ['mg-c-menu-item__collapse-container']: true,
4810
4813
  ['mg-c-menu-item__collapse-container--first-level']: (this.isInMainMenu || this.isItemMore) && this.isDirection(Direction.HORIZONTAL),
4811
4814
  });
4812
- return (h(Host, { key: '10b41e1b90d01a0f0df082cd9fc50884e87c2e59', role: this.isItemMore ? 'presentation' : 'listitem' }, this.displayPopover() ? (h("mg-popover", { display: this.expanded, placement: "bottom-start", arrowHide: true, "onDisplay-change": this.handlePopoverDisplay, identifier: this.getPopoverIdentifier() }, this.renderInteractiveElement(), h("div", { class: getContainerClasses(), slot: "content" }, this.renderSlot()))) : ([
4815
+ return (h(Host, { key: '10b41e1b90d01a0f0df082cd9fc50884e87c2e59', role: this.isItemMore ? 'presentation' : 'listitem' }, this.displayPopover() ? (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
4816
+ }, this.renderInteractiveElement(), h("div", { class: getContainerClasses(), slot: "content" }, this.renderSlot()))) : ([
4813
4817
  this.renderInteractiveElement(),
4814
4818
  h("div", { key: "vertical-container", class: getContainerClasses(), hidden: !this.expanded }, this.renderSlot()),
4815
4819
  ])));
@@ -4902,13 +4906,13 @@ const MgMessage = class {
4902
4906
  return 'exclamation-circle';
4903
4907
  }
4904
4908
  };
4905
- this.identifier = Me('mg-message');
4909
+ this.identifier = Ne('mg-message');
4906
4910
  this.delay = undefined;
4907
4911
  this.variant = variants$1[0];
4908
4912
  this.closeButton = false;
4909
4913
  this.hide = false;
4910
4914
  this.noAriaRole = undefined;
4911
- this.classCollection = new Oe(['mg-c-message']);
4915
+ this.classCollection = new Be(['mg-c-message']);
4912
4916
  this.hasActions = false;
4913
4917
  }
4914
4918
  validateDelay(newValue) {
@@ -5051,12 +5055,12 @@ const MgModal = class {
5051
5055
  */
5052
5056
  this.setFocus = () => {
5053
5057
  // Get all focusable elements
5054
- const slottedFocusableElements = Array.from(this.element.querySelectorAll(_e));
5058
+ const slottedFocusableElements = Array.from(this.element.querySelectorAll(He));
5055
5059
  // If close button is enabled or at least one of the slotted element is focusable
5056
5060
  if (this.closeButton || slottedFocusableElements.length > 0) {
5057
5061
  // Check if slotted focusable elements have shadowDom with focusable elements
5058
5062
  this.modalFocusableElements = slottedFocusableElements.reduce((acc, focusableElement) => {
5059
- acc.push(focusableElement.shadowRoot !== null ? focusableElement.shadowRoot.querySelector(_e) || focusableElement : focusableElement);
5063
+ acc.push(focusableElement.shadowRoot !== null ? focusableElement.shadowRoot.querySelector(He) || focusableElement : focusableElement);
5060
5064
  return acc;
5061
5065
  }, []);
5062
5066
  // When close button is enabled it's the first focusable element.
@@ -5078,21 +5082,21 @@ const MgModal = class {
5078
5082
  this.handleClose = () => {
5079
5083
  this.hide = true;
5080
5084
  };
5081
- this.identifier = Me('mg-modal');
5085
+ this.identifier = Ne('mg-modal');
5082
5086
  this.dialogRole = dialogRoles[0];
5083
5087
  this.modalTitle = undefined;
5084
5088
  this.closeButton = false;
5085
5089
  this.hide = undefined;
5086
5090
  this.hasActions = false;
5087
5091
  this.hasContent = false;
5088
- this.classCollection = new Oe(['mg-c-modal']);
5092
+ this.classCollection = new Be(['mg-c-modal']);
5089
5093
  }
5090
5094
  validateDialogRole(newValue) {
5091
5095
  if (!dialogRoles.includes(newValue))
5092
5096
  throw new Error(`<mg-modal> prop "dialogRole" must be one of: ${dialogRoles.join(', ')}.`);
5093
5097
  }
5094
5098
  validateModalTitle(newValue) {
5095
- if (!Ne(newValue)) {
5099
+ if (!Pe(newValue)) {
5096
5100
  throw new Error('<mg-modal> prop "modalTitle" is required.');
5097
5101
  }
5098
5102
  }
@@ -5239,7 +5243,7 @@ const MgPagination = class {
5239
5243
  this.handleGoToPage = (action, disabled) => {
5240
5244
  !disabled && this.goToPage(action === NavigationAction.NEXT ? this.currentPage + 1 : this.currentPage - 1);
5241
5245
  };
5242
- this.identifier = Me('mg-pagination');
5246
+ this.identifier = Ne('mg-pagination');
5243
5247
  this.label = undefined;
5244
5248
  this.hideNavigationLabels = undefined;
5245
5249
  this.hidePageCount = undefined;
@@ -5404,7 +5408,7 @@ const MgPanel = class {
5404
5408
  ];
5405
5409
  return this.titlePosition === 'right' ? children.reverse() : children;
5406
5410
  };
5407
- this.identifier = Me('mg-panel');
5411
+ this.identifier = Ne('mg-panel');
5408
5412
  this.panelTitle = undefined;
5409
5413
  this.titlePattern = undefined;
5410
5414
  this.titlePatternErrorMessage = undefined;
@@ -5413,12 +5417,12 @@ const MgPanel = class {
5413
5417
  this.expanded = false;
5414
5418
  this.expandToggleDisplay = expandToggleDisplays[0];
5415
5419
  this.expandToggleDisabled = undefined;
5416
- this.classCollection = new Oe(['mg-c-panel']);
5420
+ this.classCollection = new Be(['mg-c-panel']);
5417
5421
  this.isEditing = false;
5418
5422
  this.updatedPanelTitle = undefined;
5419
5423
  }
5420
5424
  validatePanelTitle(newValue) {
5421
- if (!Ne(newValue))
5425
+ if (!Pe(newValue))
5422
5426
  throw new Error('<mg-panel> prop "panelTitle" is required.');
5423
5427
  this.titleChange.emit(newValue);
5424
5428
  }
@@ -7369,7 +7373,7 @@ const MgPopover = class {
7369
7373
  mgPopoverContent.setAttribute('id', this.identifier);
7370
7374
  }
7371
7375
  };
7372
- this.identifier = Me('mg-popover');
7376
+ this.identifier = Ne('mg-popover');
7373
7377
  this.placement = 'bottom';
7374
7378
  this.arrowHide = false;
7375
7379
  this.closeButton = false;
@@ -7412,7 +7416,7 @@ const MgPopover = class {
7412
7416
  */
7413
7417
  componentWillLoad() {
7414
7418
  // Get windows to attach events
7415
- this.windows = Be(window);
7419
+ this.windows = we(window);
7416
7420
  // render mg-popover-content slot
7417
7421
  this.renderPopoverContent();
7418
7422
  this.validateCloseButton(this.closeButton);
@@ -7430,6 +7434,10 @@ const MgPopover = class {
7430
7434
  // Add aria attributes
7431
7435
  interactiveElement.setAttribute('aria-controls', this.identifier);
7432
7436
  interactiveElement.setAttribute('aria-expanded', `${this.display}`);
7437
+ const fallbackPlacements = [];
7438
+ if (this.element.dataset.fallbackPlacement) {
7439
+ fallbackPlacements.push(this.element.dataset.fallbackPlacement);
7440
+ }
7433
7441
  // Create popperjs popover
7434
7442
  this.popper = createPopper(interactiveElement, this.mgPopover, {
7435
7443
  placement: this.placement,
@@ -7444,7 +7452,7 @@ const MgPopover = class {
7444
7452
  {
7445
7453
  name: 'flip',
7446
7454
  options: {
7447
- fallbackPlacements: ['auto'],
7455
+ fallbackPlacements: [...fallbackPlacements, 'auto'],
7448
7456
  },
7449
7457
  },
7450
7458
  ],
@@ -7474,7 +7482,7 @@ const MgPopover = class {
7474
7482
  * @returns HTML Element
7475
7483
  */
7476
7484
  render() {
7477
- return (h(Host, { key: '788fd2a8f759f8ae9188b05395cbfc33b5b06c69' }, h("slot", { key: '9109948237f93d375e6d1b234274f8283c0260d3' }), h("slot", { key: 'e76a1093edab91746a4d3302d7976129ed7c6042', name: "content" })));
7485
+ return (h(Host, { key: 'a01aff00a17da32a72491629ba80ec51a34cdb0e' }, h("slot", { key: 'bb314190042b65bf899e34efac1781ce9230930f' }), h("slot", { key: 'daba0b8cb0b1b3b4637bb972da309a9afb73f99e', name: "content" })));
7478
7486
  }
7479
7487
  get element() { return getElement(this); }
7480
7488
  static get watchers() { return {
@@ -7500,7 +7508,7 @@ const MgPopoverContent = class {
7500
7508
  this.hideContent.emit();
7501
7509
  };
7502
7510
  this.closeButton = false;
7503
- this.classCollection = new Oe(['mg-c-popover-content']);
7511
+ this.classCollection = new Be(['mg-c-popover-content']);
7504
7512
  }
7505
7513
  /*************
7506
7514
  * Lifecycle *
@@ -7518,7 +7526,7 @@ const MgPopoverContent = class {
7518
7526
  componentDidLoad() {
7519
7527
  const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
7520
7528
  const slottedTitleElement = this.element.querySelector('[slot="title"]');
7521
- if (slottedTitleElement && !De(slottedTitleElement, headingTags)) {
7529
+ if (slottedTitleElement && !Ce(slottedTitleElement, headingTags)) {
7522
7530
  throw new Error(`<mg-popover> Slotted title must be a heading: ${headingTags.join(', ')}`);
7523
7531
  }
7524
7532
  }
@@ -7554,7 +7562,7 @@ const MgSkipLinks = class {
7554
7562
  this.links = undefined;
7555
7563
  }
7556
7564
  validateLinks(links) {
7557
- if (links === undefined || links.length === 0 || links.some(link => !Ne(link.href) || !link.href.startsWith('#') || !Ne(link.label))) {
7565
+ if (links === undefined || links.length === 0 || links.some(link => !Pe(link.href) || !link.href.startsWith('#') || !Pe(link.label))) {
7558
7566
  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.`);
7559
7567
  }
7560
7568
  }
@@ -7706,7 +7714,7 @@ const MgTabs = class {
7706
7714
  */
7707
7715
  this.resetFocus = () => {
7708
7716
  // update asynchronously tabindex to prevent get focus on new tabindex at then end of event process
7709
- Ce(() => {
7717
+ ze(() => {
7710
7718
  this.tabFocus = undefined;
7711
7719
  Array.from(this.element.shadowRoot.querySelectorAll('[data-index]')).forEach((tab, index) => {
7712
7720
  tab.setAttribute('tabindex', this.activeTab - this.startIndex !== index ? '-1' : '0');
@@ -7721,16 +7729,16 @@ const MgTabs = class {
7721
7729
  if (slots.length !== this.tabs.length)
7722
7730
  throw new Error('<mg-tabs> Must have slots counts equal to tabs count.');
7723
7731
  };
7724
- this.identifier = Me('mg-tabs');
7732
+ this.identifier = Ne('mg-tabs');
7725
7733
  this.label = undefined;
7726
7734
  this.size = 'regular';
7727
7735
  this.items = undefined;
7728
7736
  this.activeTab = undefined;
7729
7737
  this.tabs = [];
7730
- this.classCollection = new Oe(['mg-c-tabs']);
7738
+ this.classCollection = new Be(['mg-c-tabs']);
7731
7739
  }
7732
7740
  validateLabel(newValue) {
7733
- if (!Ne(newValue)) {
7741
+ if (!Pe(newValue)) {
7734
7742
  throw new Error('<mg-tabs> prop "label" is required.');
7735
7743
  }
7736
7744
  }
@@ -7742,7 +7750,7 @@ const MgTabs = class {
7742
7750
  }
7743
7751
  validateItems(newValue) {
7744
7752
  // String array
7745
- if (Fe(newValue))
7753
+ if (Ue(newValue))
7746
7754
  this.tabs = newValue.map(item => ({ label: item, status: Status.VISIBLE }));
7747
7755
  // Object array
7748
7756
  else if (Array.isArray(newValue) && newValue.length > 0 && newValue.every(isTabItem))
@@ -7842,7 +7850,7 @@ const MgTag = class {
7842
7850
  this.variant = variants[0];
7843
7851
  this.outline = undefined;
7844
7852
  this.soft = undefined;
7845
- this.classCollection = new Oe(['mg-c-tag']);
7853
+ this.classCollection = new Be(['mg-c-tag']);
7846
7854
  }
7847
7855
  validateVariant(newValue, oldValue) {
7848
7856
  if (!variants.includes(newValue)) {
@@ -7879,7 +7887,7 @@ const MgTag = class {
7879
7887
  * @param textContent - html element textContent property
7880
7888
  */
7881
7889
  validateTextContent(textContent) {
7882
- if (!Ne(textContent))
7890
+ if (!Pe(textContent))
7883
7891
  throw new Error('<mg-tag> slot must contain a text content.');
7884
7892
  }
7885
7893
  /*************
@@ -7939,7 +7947,7 @@ const MgTooltip = class {
7939
7947
  // Enable the event listeners
7940
7948
  this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: true }] })));
7941
7949
  // hide when click outside on nextTick to prevent event to trigger after creation
7942
- Ce(() => {
7950
+ ze(() => {
7943
7951
  this.windows.forEach((localWindow) => {
7944
7952
  localWindow.addEventListener('click', this.clickOutside, false);
7945
7953
  localWindow.addEventListener('keydown', this.pressEscape, false);
@@ -8110,7 +8118,7 @@ const MgTooltip = class {
8110
8118
  });
8111
8119
  });
8112
8120
  };
8113
- this.identifier = Me('mg-tooltip');
8121
+ this.identifier = Ne('mg-tooltip');
8114
8122
  this.message = undefined;
8115
8123
  this.placement = 'bottom';
8116
8124
  this.display = false;
@@ -8121,7 +8129,7 @@ const MgTooltip = class {
8121
8129
  this.renderTooltipContent();
8122
8130
  }
8123
8131
  validateMessage(newValue) {
8124
- if (!Ne(newValue)) {
8132
+ if (!Pe(newValue)) {
8125
8133
  throw new Error('<mg-tooltip> prop "message" is required.');
8126
8134
  }
8127
8135
  this.mgTooltipContent.message = newValue;
@@ -8170,7 +8178,7 @@ const MgTooltip = class {
8170
8178
  */
8171
8179
  componentWillLoad() {
8172
8180
  // Get windows to attach events
8173
- this.windows = Be(window);
8181
+ this.windows = we(window);
8174
8182
  // Get tooltip element
8175
8183
  this.renderTooltipContent();
8176
8184
  this.mgTooltipContent = this.element.querySelector(`#${this.identifier}`);
@@ -8189,7 +8197,7 @@ const MgTooltip = class {
8189
8197
  // get slotted element wich is not the tooltip
8190
8198
  const slotElement = this.element.querySelector(`*:not(#${this.identifier})`);
8191
8199
  // Get interactive element
8192
- const interactiveElement = slotElement.matches(_e) ? slotElement : (_a = slotElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(_e);
8200
+ const interactiveElement = slotElement.matches(He) ? slotElement : (_a = slotElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(He);
8193
8201
  // define selected element to become tooltip selector
8194
8202
  this.tooltipedElement = interactiveElement || slotElement;
8195
8203
  // Check if slotted element is a disabled mg-button