@mgdis/mg-components 4.2.0 → 4.2.1

package/dist/cjs/{popper-71bf3058.js → popper-11d5f714.js}

@@ -160,38 +160,57 @@ var max = Math.max;
 var min = Math.min;
 var round = Math.round;
 
-function getBoundingClientRect(element, includeScale) {
+function getUAString() {
+  var uaData = navigator.userAgentData;
+
+  if (uaData != null && uaData.brands) {
+    return uaData.brands.map(function (item) {
+      return item.brand + "/" + item.version;
+    }).join(' ');
+  }
+
+  return navigator.userAgent;
+}
+
+function isLayoutViewport() {
+  return !/^((?!chrome|android).)*safari/i.test(getUAString());
+}
+
+function getBoundingClientRect(element, includeScale, isFixedStrategy) {
   if (includeScale === void 0) {
     includeScale = false;
   }
 
-  var rect = element.getBoundingClientRect();
+  if (isFixedStrategy === void 0) {
+    isFixedStrategy = false;
+  }
+
+  var clientRect = element.getBoundingClientRect();
   var scaleX = 1;
   var scaleY = 1;
 
-  if (isHTMLElement(element) && includeScale) {
-    var offsetHeight = element.offsetHeight;
-    var offsetWidth = element.offsetWidth; // Do not attempt to divide by 0, otherwise we get `Infinity` as scale
-    // Fallback to 1 in case both values are `0`
-
-    if (offsetWidth > 0) {
-      scaleX = round(rect.width) / offsetWidth || 1;
-    }
-
-    if (offsetHeight > 0) {
-      scaleY = round(rect.height) / offsetHeight || 1;
-    }
+  if (includeScale && isHTMLElement(element)) {
+    scaleX = element.offsetWidth > 0 ? round(clientRect.width) / element.offsetWidth || 1 : 1;
+    scaleY = element.offsetHeight > 0 ? round(clientRect.height) / element.offsetHeight || 1 : 1;
   }
 
+  var _ref = isElement(element) ? getWindow(element) : window,
+      visualViewport = _ref.visualViewport;
+
+  var addVisualOffsets = !isLayoutViewport() && isFixedStrategy;
+  var x = (clientRect.left + (addVisualOffsets && visualViewport ? visualViewport.offsetLeft : 0)) / scaleX;
+  var y = (clientRect.top + (addVisualOffsets && visualViewport ? visualViewport.offsetTop : 0)) / scaleY;
+  var width = clientRect.width / scaleX;
+  var height = clientRect.height / scaleY;
   return {
-    width: rect.width / scaleX,
-    height: rect.height / scaleY,
-    top: rect.top / scaleY,
-    right: rect.right / scaleX,
-    bottom: rect.bottom / scaleY,
-    left: rect.left / scaleX,
-    x: rect.left / scaleX,
-    y: rect.top / scaleY
+    width: width,
+    height: height,
+    top: y,
+    right: x + width,
+    bottom: y + height,
+    left: x,
+    x: x,
+    y: y
   };
 }
 
@@ -286,8 +305,8 @@ function getTrueOffsetParent(element) {
 
 
 function getContainingBlock(element) {
-  var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') !== -1;
-  var isIE = navigator.userAgent.indexOf('Trident') !== -1;
+  var isFirefox = /firefox/i.test(getUAString());
+  var isIE = /Trident/i.test(getUAString());
 
   if (isIE && isHTMLElement(element)) {
     // In IE 9, 10 and 11 fixed elements containing block is always established by the viewport
@@ -708,31 +727,21 @@ function getWindowScrollBarX(element) {
   return getBoundingClientRect(getDocumentElement(element)).left + getWindowScroll(element).scrollLeft;
 }
 
-function getViewportRect(element) {
+function getViewportRect(element, strategy) {
   var win = getWindow(element);
   var html = getDocumentElement(element);
   var visualViewport = win.visualViewport;
   var width = html.clientWidth;
   var height = html.clientHeight;
   var x = 0;
-  var y = 0; // NB: This isn't supported on iOS <= 12. If the keyboard is open, the popper
-  // can be obscured underneath it.
-  // Also, `html.clientHeight` adds the bottom bar height in Safari iOS, even
-  // if it isn't open, so if this isn't available, the popper will be detected
-  // to overflow the bottom of the screen too early.
+  var y = 0;
 
   if (visualViewport) {
     width = visualViewport.width;
-    height = visualViewport.height; // Uses Layout Viewport (like Chrome; Safari does not currently)
-    // In Chrome, it returns a value very close to 0 (+/-) but contains rounding
-    // errors due to floating point numbers, so we need to check precision.
-    // Safari returns a number <= 0, usually < -1 when pinch-zoomed
-    // Feature detection fails in mobile emulation mode in Chrome.
-    // Math.abs(win.innerWidth / visualViewport.scale - visualViewport.width) <
-    // 0.001
-    // Fallback here: "Not Safari" userAgent
-
-    if (!/^((?!chrome|android).)*safari/i.test(navigator.userAgent)) {
+    height = visualViewport.height;
+    var layoutViewport = isLayoutViewport();
+
+    if (layoutViewport || !layoutViewport && strategy === 'fixed') {
       x = visualViewport.offsetLeft;
       y = visualViewport.offsetTop;
     }
@@ -826,8 +835,8 @@ function rectToClientRect(rect) {
   });
 }
 
-function getInnerBoundingClientRect(element) {
-  var rect = getBoundingClientRect(element);
+function getInnerBoundingClientRect(element, strategy) {
+  var rect = getBoundingClientRect(element, false, strategy === 'fixed');
   rect.top = rect.top + element.clientTop;
   rect.left = rect.left + element.clientLeft;
   rect.bottom = rect.top + element.clientHeight;
@@ -839,8 +848,8 @@ function getInnerBoundingClientRect(element) {
   return rect;
 }
 
-function getClientRectFromMixedType(element, clippingParent) {
-  return clippingParent === viewport ? rectToClientRect(getViewportRect(element)) : isElement(clippingParent) ? getInnerBoundingClientRect(clippingParent) : rectToClientRect(getDocumentRect(getDocumentElement(element)));
+function getClientRectFromMixedType(element, clippingParent, strategy) {
+  return clippingParent === viewport ? rectToClientRect(getViewportRect(element, strategy)) : isElement(clippingParent) ? getInnerBoundingClientRect(clippingParent, strategy) : rectToClientRect(getDocumentRect(getDocumentElement(element)));
 } // A "clipping parent" is an overflowable container with the characteristic of
 // clipping (or hiding) overflowing elements with a position different from
 // `initial`
@@ -863,18 +872,18 @@ function getClippingParents(element) {
 // clipping parents
 
 
-function getClippingRect(element, boundary, rootBoundary) {
+function getClippingRect(element, boundary, rootBoundary, strategy) {
   var mainClippingParents = boundary === 'clippingParents' ? getClippingParents(element) : [].concat(boundary);
   var clippingParents = [].concat(mainClippingParents, [rootBoundary]);
   var firstClippingParent = clippingParents[0];
   var clippingRect = clippingParents.reduce(function (accRect, clippingParent) {
-    var rect = getClientRectFromMixedType(element, clippingParent);
+    var rect = getClientRectFromMixedType(element, clippingParent, strategy);
     accRect.top = max(rect.top, accRect.top);
     accRect.right = min(rect.right, accRect.right);
     accRect.bottom = min(rect.bottom, accRect.bottom);
     accRect.left = max(rect.left, accRect.left);
     return accRect;
-  }, getClientRectFromMixedType(element, firstClippingParent));
+  }, getClientRectFromMixedType(element, firstClippingParent, strategy));
   clippingRect.width = clippingRect.right - clippingRect.left;
   clippingRect.height = clippingRect.bottom - clippingRect.top;
   clippingRect.x = clippingRect.left;
@@ -955,6 +964,8 @@ function detectOverflow(state, options) {
   var _options = options,
       _options$placement = _options.placement,
       placement = _options$placement === void 0 ? state.placement : _options$placement,
+      _options$strategy = _options.strategy,
+      strategy = _options$strategy === void 0 ? state.strategy : _options$strategy,
       _options$boundary = _options.boundary,
       boundary = _options$boundary === void 0 ? clippingParents : _options$boundary,
       _options$rootBoundary = _options.rootBoundary,
@@ -969,7 +980,7 @@ function detectOverflow(state, options) {
   var altContext = elementContext === popper ? reference : popper;
   var popperRect = state.rects.popper;
   var element = state.elements[altBoundary ? altContext : elementContext];
-  var clippingClientRect = getClippingRect(isElement(element) ? element : element.contextElement || getDocumentElement(state.elements.popper), boundary, rootBoundary);
+  var clippingClientRect = getClippingRect(isElement(element) ? element : element.contextElement || getDocumentElement(state.elements.popper), boundary, rootBoundary, strategy);
   var referenceClientRect = getBoundingClientRect(state.elements.reference);
   var popperOffsets = computeOffsets({
     reference: referenceClientRect,
@@ -1483,7 +1494,7 @@ function getCompositeRect(elementOrVirtualElement, offsetParent, isFixed) {
   var isOffsetParentAnElement = isHTMLElement(offsetParent);
   var offsetParentIsScaled = isHTMLElement(offsetParent) && isElementScaled(offsetParent);
   var documentElement = getDocumentElement(offsetParent);
-  var rect = getBoundingClientRect(elementOrVirtualElement, offsetParentIsScaled);
+  var rect = getBoundingClientRect(elementOrVirtualElement, offsetParentIsScaled, isFixed);
   var scroll = {
     scrollLeft: 0,
     scrollTop: 0

package/dist/collection/collection-manifest.json

@@ -28,7 +28,7 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "2.18.0",
+    "version": "2.18.1",
     "typescriptVersion": "4.7.4"
   },
   "collections": [],

package/dist/collection/components/atoms/mg-badge/mg-badge.js

@@ -24,7 +24,9 @@ export class MgBadge {
   }
   validateLabel(newValue) {
     if (typeof newValue !== 'string' || newValue.trim() === '') {
-      throw new Error('<mg-badge> prop "label" is required.');
+      // TODO: throw new Error on next major (5.0.0)
+      // throw new Error('<mg-badge> prop "label" is required.');
+      console.error('<mg-badge> prop "label" is required.');
     }
   }
   validateVariant(newValue, oldValue) {

package/dist/collection/components/atoms/mg-input-title/mg-input-title.js

@@ -15,7 +15,9 @@ export class MgInputTitle {
   }
   validateIdentifier(newValue) {
     if (typeof newValue !== 'string' || newValue.trim() === '') {
-      throw new Error('<mg-input-title> prop "identifier" is required.');
+      // TODO: throw new Error on next major (5.0.0)
+      // throw new Error('<mg-input-title> prop "identifier" is required.');
+      console.error('<mg-input-title> prop "identifier" is required.');
     }
   }
   /*************

package/dist/collection/components/atoms/mg-tooltip/mg-tooltip.js

@@ -90,7 +90,9 @@ export class MgTooltip {
   }
   validateMessage(newValue) {
     if (typeof newValue !== 'string' || newValue.trim() === '') {
-      throw new Error('<mg-tooltip> prop "message" is required.');
+      // TODO: throw new Error on next major (5.0.0)
+      // throw new Error('<mg-tooltip> prop "message" is required.');
+      console.error('<mg-tooltip> prop "message" is required.');
     }
   }
   handleDisplay(newValue) {

package/dist/collection/components/molecules/inputs/MgInput.js

@@ -50,7 +50,9 @@ export const MgInput = (props, children, utils) => {
    * Check required properties
    */
   if (typeof props.identifier !== 'string' || props.identifier.trim() === '') {
-    throw new Error('<mg-input> prop "identifier" is required.');
+    // TODO: throw new Error on next major (5.0.0)
+    // throw new Error('<mg-input> prop "identifier" is required.');
+    console.error('<mg-input> prop "identifier" is required.');
   }
   if (typeof props.label !== 'string' || props.label.trim() === '') {
     throw new Error('<mg-input> prop "label" is required.');

package/dist/collection/components/molecules/inputs/mg-input-numeric/mg-input-numeric.js

@@ -180,7 +180,7 @@ export class MgInputNumeric {
       // Split number and decimal
       const [integer, decimal = ''] = newValue.replace('-', '').split(/[\.,]/);
       // Regex
-      const regex = this.type === 'integer' ? /^[\-]?\d+$/ : /^[\-]?\d+[.,]?\d*$/;
+      const regex = this.type === 'integer' ? /^-?\d+$/ : /^-?\d+[.,]?\d*$/;
       // Filter input
       if (newValue === '' || (newValue.match(regex) && integer.length <= this.integerLength && decimal.length <= (this.type === 'integer' ? 0 : this.decimalLength))) {
         this.storedValue = newValue;

package/dist/collection/components/molecules/mg-modal/mg-modal.css

@@ -41,10 +41,10 @@
   margin-top: calc((var(--default-size) - var(--mg-modal-title-font-size) * var(--line-height)) / 2 * -1);
   margin-right: calc((var(--default-size) - var(--mg-icon-regular-size)) / 2 * -1);
 }
-.mg-modal .mg-modal__content {
+.mg-modal__content {
   overflow-y: auto;
 }
-.mg-modal .mg-modal__content::slotted(*) {
+.mg-modal__content::slotted(*) {
   font-size: var(--mg-modal-content-font-size);
 }
 .mg-modal.mg-modal--hide {

package/dist/collection/components/molecules/mg-modal/mg-modal.js

@@ -50,17 +50,21 @@ export class MgModal {
   }
   validateModalTitle(newValue) {
     if (typeof newValue !== 'string' || newValue.trim() === '') {
-      throw new Error('<mg-modal> prop "modalTitle" is required.');
+      // TODO: throw new Error on next major (5.0.0)
+      // throw new Error('<mg-modal> prop "modalTitle" is required.');
+      console.error('<mg-modal> prop "modalTitle" is required.');
     }
   }
   validateHide(newValue) {
     if (newValue) {
       this.componentHide.emit();
       this.classList.add(this.classHide);
+      document.body.style.overflow = this.bodyOverflow;
     }
     else {
       this.componentShow.emit();
       this.classList.delete(this.classHide);
+      document.body.style.overflow = 'hidden';
     }
   }
   /**
@@ -84,6 +88,8 @@ export class MgModal {
    * @returns {void}
    */
   componentWillLoad() {
+    // Store body overflow
+    this.bodyOverflow = document.body.style.overflow;
     // Get locales
     this.messages = initLocales(this.element).messages;
     // Validate

package/dist/collection/components/molecules/mg-panel/mg-panel.js

@@ -111,7 +111,9 @@ export class MgPanel {
   }
   validatePanelTitle(newValue) {
     if (typeof newValue !== 'string' || newValue.trim() === '') {
-      throw new Error('<mg-panel> prop "panelTitle" is required.');
+      // TODO: throw new Error on next major (5.0.0)
+      // throw new Error('<mg-panel> prop "panelTitle" is required.');
+      console.error('<mg-panel> prop "panelTitle" is required.');
     }
     this.titleChange.emit(newValue);
   }

package/dist/collection/components/molecules/mg-popover/mg-popover.css

@@ -23,18 +23,17 @@ mg-popover::slotted(*) {
   margin-top: calc(0rem - (var(--default-size) - var(--mg-popover-title-font-size) * var(--line-height)) / 2);
   margin-left: 3rem;
 }
-.mg-popover .mg-popover__arrow,
-.mg-popover .mg-popover__arrow::before {
+.mg-popover__arrow, .mg-popover__arrow::before {
   position: absolute;
   width: 2rem;
   height: 2rem;
   z-index: -1;
   background: inherit;
 }
-.mg-popover .mg-popover__arrow {
+.mg-popover__arrow {
   visibility: hidden;
 }
-.mg-popover .mg-popover__arrow::before {
+.mg-popover__arrow::before {
   visibility: visible;
   content: "";
   transform: rotate(45deg);
@@ -51,7 +50,6 @@ mg-popover::slotted(*) {
 .mg-popover[data-popper-placement^=right] > .mg-popover__arrow {
   left: -6px;
 }
-
 .mg-popover__title ::slotted([slot=title]) {
   margin: 0 0 1rem;
   font-size: var(--mg-popover-title-font-size);

package/dist/collection/components/molecules/mg-tabs/mg-tabs.js

@@ -131,7 +131,9 @@ export class MgTabs {
   }
   validateLabel(newValue) {
     if (typeof newValue !== 'string' || newValue.trim() === '') {
-      throw new Error('<mg-tabs> prop "label" is required.');
+      // TODO: throw new Error on next major (5.0.0)
+      // throw new Error('<mg-tabs> prop "label" is required.');
+      console.error('<mg-tabs> prop "label" is required.');
     }
   }
   validateSize(newValue) {

package/dist/components/MgInput.js

@@ -51,7 +51,9 @@ const MgInput = (props, children, utils) => {
    * Check required properties
    */
   if (typeof props.identifier !== 'string' || props.identifier.trim() === '') {
-    throw new Error('<mg-input> prop "identifier" is required.');
+    // TODO: throw new Error on next major (5.0.0)
+    // throw new Error('<mg-input> prop "identifier" is required.');
+    console.error('<mg-input> prop "identifier" is required.');
   }
   if (typeof props.label !== 'string' || props.label.trim() === '') {
     throw new Error('<mg-input> prop "label" is required.');

package/dist/components/mg-badge2.js

@@ -34,7 +34,9 @@ const MgBadge = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   validateLabel(newValue) {
     if (typeof newValue !== 'string' || newValue.trim() === '') {
-      throw new Error('<mg-badge> prop "label" is required.');
+      // TODO: throw new Error on next major (5.0.0)
+      // throw new Error('<mg-badge> prop "label" is required.');
+      console.error('<mg-badge> prop "label" is required.');
     }
   }
   validateVariant(newValue, oldValue) {

package/dist/components/mg-input-numeric.js

@@ -202,7 +202,7 @@ const MgInputNumeric$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
       // Split number and decimal
       const [integer, decimal = ''] = newValue.replace('-', '').split(/[\.,]/);
       // Regex
-      const regex = this.type === 'integer' ? /^[\-]?\d+$/ : /^[\-]?\d+[.,]?\d*$/;
+      const regex = this.type === 'integer' ? /^-?\d+$/ : /^-?\d+[.,]?\d*$/;
       // Filter input
       if (newValue === '' || (newValue.match(regex) && integer.length <= this.integerLength && decimal.length <= (this.type === 'integer' ? 0 : this.decimalLength))) {
         this.storedValue = newValue;

package/dist/components/mg-input-title2.js

@@ -20,7 +20,9 @@ const MgInputTitle = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   }
   validateIdentifier(newValue) {
     if (typeof newValue !== 'string' || newValue.trim() === '') {
-      throw new Error('<mg-input-title> prop "identifier" is required.');
+      // TODO: throw new Error on next major (5.0.0)
+      // throw new Error('<mg-input-title> prop "identifier" is required.');
+      console.error('<mg-input-title> prop "identifier" is required.');
     }
   }
   /*************

package/dist/components/mg-modal.js

@@ -4,7 +4,7 @@ import { i as initLocales } from './index2.js';
 import { d as defineCustomElement$3 } from './mg-button2.js';
 import { d as defineCustomElement$2 } from './mg-icon2.js';
 
-const mgModalCss = ".mg-modal{display:flex;justify-content:center;align-items:center;position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;padding:2rem 0;background-color:hsla(var(--color-light), 85%)}.mg-modal__dialog{display:flex;flex-direction:column;align-self:center;row-gap:3rem;padding:1.5rem 2.5rem;width:60rem;height:fit-content;max-width:100%;max-height:100%;box-sizing:border-box;background-color:hsl(var(--color-light));box-shadow:var(--box-shadow);border-radius:var(--mg-modal-border-radius)}.mg-modal__header{margin-bottom:0.5rem}.mg-modal__title{margin:0;font-family:var(--font-family-heading);font-size:var(--mg-modal-title-font-size);font-weight:600}.mg-modal__close-button{float:right;height:var(--mg-modal-title-font-size);margin-top:calc((var(--default-size) - var(--mg-modal-title-font-size) * var(--line-height)) / 2 * -1);margin-right:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2 * -1)}.mg-modal .mg-modal__content{overflow-y:auto}.mg-modal .mg-modal__content::slotted(*){font-size:var(--mg-modal-content-font-size)}.mg-modal.mg-modal--hide{display:none}";
+const mgModalCss = ".mg-modal{display:flex;justify-content:center;align-items:center;position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;padding:2rem 0;background-color:hsla(var(--color-light), 85%)}.mg-modal__dialog{display:flex;flex-direction:column;align-self:center;row-gap:3rem;padding:1.5rem 2.5rem;width:60rem;height:fit-content;max-width:100%;max-height:100%;box-sizing:border-box;background-color:hsl(var(--color-light));box-shadow:var(--box-shadow);border-radius:var(--mg-modal-border-radius)}.mg-modal__header{margin-bottom:0.5rem}.mg-modal__title{margin:0;font-family:var(--font-family-heading);font-size:var(--mg-modal-title-font-size);font-weight:600}.mg-modal__close-button{float:right;height:var(--mg-modal-title-font-size);margin-top:calc((var(--default-size) - var(--mg-modal-title-font-size) * var(--line-height)) / 2 * -1);margin-right:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2 * -1)}.mg-modal__content{overflow-y:auto}.mg-modal__content::slotted(*){font-size:var(--mg-modal-content-font-size)}.mg-modal.mg-modal--hide{display:none}";
 
 const MgModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -60,17 +60,21 @@ const MgModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   validateModalTitle(newValue) {
     if (typeof newValue !== 'string' || newValue.trim() === '') {
-      throw new Error('<mg-modal> prop "modalTitle" is required.');
+      // TODO: throw new Error on next major (5.0.0)
+      // throw new Error('<mg-modal> prop "modalTitle" is required.');
+      console.error('<mg-modal> prop "modalTitle" is required.');
     }
   }
   validateHide(newValue) {
     if (newValue) {
       this.componentHide.emit();
       this.classList.add(this.classHide);
+      document.body.style.overflow = this.bodyOverflow;
     }
     else {
       this.componentShow.emit();
       this.classList.delete(this.classHide);
+      document.body.style.overflow = 'hidden';
     }
   }
   /**
@@ -94,6 +98,8 @@ const MgModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
    * @returns {void}
    */
   componentWillLoad() {
+    // Store body overflow
+    this.bodyOverflow = document.body.style.overflow;
     // Get locales
     this.messages = initLocales(this.element).messages;
     // Validate

package/dist/components/mg-panel.js

@@ -125,7 +125,9 @@ const MgPanel$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   validatePanelTitle(newValue) {
     if (typeof newValue !== 'string' || newValue.trim() === '') {
-      throw new Error('<mg-panel> prop "panelTitle" is required.');
+      // TODO: throw new Error on next major (5.0.0)
+      // throw new Error('<mg-panel> prop "panelTitle" is required.');
+      console.error('<mg-panel> prop "panelTitle" is required.');
     }
     this.titleChange.emit(newValue);
   }

package/dist/components/mg-popover.js

@@ -5,7 +5,7 @@ import { d as defineCustomElement$3 } from './mg-button2.js';
 import { d as defineCustomElement$2 } from './mg-icon2.js';
 import { c as createPopper } from './popper.js';
 
-const mgPopoverCss = "mg-popover.sc-mg-popover{display:contents}mg-popover.sc-mg-popover-s>*{display:inline-block}.mg-popover.sc-mg-popover{display:none;padding:1.5rem;z-index:9999;border-radius:0.5rem;background-color:hsl(var(--mg-popover-background-color));box-shadow:var(--box-shadow);color:hsl(var(--mg-popover-font-color))}.mg-popover[data-show].sc-mg-popover{display:block}.mg-popover.sc-mg-popover mg-button.sc-mg-popover{float:right;margin-right:calc(0rem - (var(--default-size) - var(--mg-icon-regular-size)) / 2);margin-top:calc(0rem - (var(--default-size) - var(--mg-popover-title-font-size) * var(--line-height)) / 2);margin-left:3rem}.mg-popover.sc-mg-popover .mg-popover__arrow.sc-mg-popover,.mg-popover.sc-mg-popover .mg-popover__arrow.sc-mg-popover::before{position:absolute;width:2rem;height:2rem;z-index:-1;background:inherit}.mg-popover.sc-mg-popover .mg-popover__arrow.sc-mg-popover{visibility:hidden}.mg-popover.sc-mg-popover .mg-popover__arrow.sc-mg-popover::before{visibility:visible;content:\"\";transform:rotate(45deg)}.mg-popover[data-popper-placement^=top].sc-mg-popover>.mg-popover__arrow.sc-mg-popover{bottom:-6px}.mg-popover[data-popper-placement^=bottom].sc-mg-popover>.mg-popover__arrow.sc-mg-popover{top:-6px}.mg-popover[data-popper-placement^=left].sc-mg-popover>.mg-popover__arrow.sc-mg-popover{right:-6px}.mg-popover[data-popper-placement^=right].sc-mg-popover>.mg-popover__arrow.sc-mg-popover{left:-6px}.mg-popover__title.sc-mg-popover-s>[slot=title],.mg-popover__title .sc-mg-popover-s>[slot=title]{margin:0 0 1rem;font-size:var(--mg-popover-title-font-size);font-weight:600}";
+const mgPopoverCss = "mg-popover.sc-mg-popover{display:contents}mg-popover.sc-mg-popover-s>*{display:inline-block}.mg-popover.sc-mg-popover{display:none;padding:1.5rem;z-index:9999;border-radius:0.5rem;background-color:hsl(var(--mg-popover-background-color));box-shadow:var(--box-shadow);color:hsl(var(--mg-popover-font-color))}.mg-popover[data-show].sc-mg-popover{display:block}.mg-popover.sc-mg-popover mg-button.sc-mg-popover{float:right;margin-right:calc(0rem - (var(--default-size) - var(--mg-icon-regular-size)) / 2);margin-top:calc(0rem - (var(--default-size) - var(--mg-popover-title-font-size) * var(--line-height)) / 2);margin-left:3rem}.mg-popover__arrow.sc-mg-popover,.mg-popover__arrow.sc-mg-popover::before{position:absolute;width:2rem;height:2rem;z-index:-1;background:inherit}.mg-popover__arrow.sc-mg-popover{visibility:hidden}.mg-popover__arrow.sc-mg-popover::before{visibility:visible;content:\"\";transform:rotate(45deg)}.mg-popover[data-popper-placement^=top].sc-mg-popover>.mg-popover__arrow.sc-mg-popover{bottom:-6px}.mg-popover[data-popper-placement^=bottom].sc-mg-popover>.mg-popover__arrow.sc-mg-popover{top:-6px}.mg-popover[data-popper-placement^=left].sc-mg-popover>.mg-popover__arrow.sc-mg-popover{right:-6px}.mg-popover[data-popper-placement^=right].sc-mg-popover>.mg-popover__arrow.sc-mg-popover{left:-6px}.mg-popover__title.sc-mg-popover-s>[slot=title],.mg-popover__title .sc-mg-popover-s>[slot=title]{margin:0 0 1rem;font-size:var(--mg-popover-title-font-size);font-weight:600}";
 
 const MgPopover$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/mg-tabs.js

@@ -151,7 +151,9 @@ const MgTabs$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   validateLabel(newValue) {
     if (typeof newValue !== 'string' || newValue.trim() === '') {
-      throw new Error('<mg-tabs> prop "label" is required.');
+      // TODO: throw new Error on next major (5.0.0)
+      // throw new Error('<mg-tabs> prop "label" is required.');
+      console.error('<mg-tabs> prop "label" is required.');
     }
   }
   validateSize(newValue) {

package/dist/components/mg-tooltip2.js

@@ -104,7 +104,9 @@ const MgTooltip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   validateMessage(newValue) {
     if (typeof newValue !== 'string' || newValue.trim() === '') {
-      throw new Error('<mg-tooltip> prop "message" is required.');
+      // TODO: throw new Error on next major (5.0.0)
+      // throw new Error('<mg-tooltip> prop "message" is required.');
+      console.error('<mg-tooltip> prop "message" is required.');
     }
   }
   handleDisplay(newValue) {