@mgdis/mg-components 6.17.0 → 6.18.0

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

@@ -6,7 +6,7 @@ import { d as defineCustomElement$4 } from './mg-input-title2.js';
 import { d as defineCustomElement$3 } from './mg-tooltip2.js';
 import { d as defineCustomElement$2 } from './mg-tooltip-content2.js';
 
-const mgInputToggleCss = ".mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);overflow-wrap:anywhere}.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}}a{color:inherit;text-decoration:underline}a:hover,a:focus,a:active{text-decoration:none}.mg-c-input__toggle-item-container{overflow:hidden;box-sizing:border-box;padding:var(--mg-b-size-4) var(--mg-b-size-8);border:0;border-radius:calc((var(--mg-b-font-size)*var(--mg-b-line-height) + 2*var(--mg-b-size-4))/var(--mg-c-input-toggle-border-radius-ratio));background-color:unset;color:var(--mg-b-color-dark);font-weight:unset;text-overflow:ellipsis;white-space:nowrap}.mg-c-input__toggle-item-container:first-of-type{background-color:color-mix(in srgb, var(--mg-b-color-app), white 80%);color:var(--mg-b-color-app);font-weight:600}.mg-c-input__button-toggle{display:flex;min-width:0;padding:var(--mg-b-size-4);border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:calc((var(--mg-b-font-size)*var(--mg-b-line-height) + 2*(var(--mg-b-size-4) + var(--mg-b-size-4) + var(--mg-c-input-border-width)))/var(--mg-c-input-toggle-border-radius-ratio));background-color:var(--mg-b-color-light);cursor:pointer;font-family:var(--mg-b-font-family);font-size:inherit;line-height:inherit}.mg-c-input__button-toggle:disabled{cursor:default}.mg-c-input.mg-c-input--toggle .mg-c-input__input-container{min-width:0;flex:auto}.mg-c-input.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{background-color:unset;color:var(--mg-b-color-dark);font-weight:unset}.mg-c-input.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:last-of-type{background-color:color-mix(in srgb, var(--mg-b-color-app), white 80%);color:var(--mg-b-color-info);font-weight:600}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container{display:flex;width:calc(var(--mg-b-font-size)*var(--mg-b-line-height) + 2*var(--mg-b-size-4));height:calc(var(--mg-b-font-size)*var(--mg-b-line-height) + 2*var(--mg-b-size-4));align-items:center;justify-content:center;padding:0;visibility:hidden}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container:first-of-type{visibility:visible}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container ::slotted(mg-icon){display:flex}.mg-c-input.mg-c-input--toggle-icon.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{visibility:hidden}.mg-c-input.mg-c-input--toggle-icon.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:last-of-type{visibility:visible}.mg-c-input.mg-c-input--toggle-on-off .mg-c-input__toggle-item-container:first-of-type{background-color:var(--mg-b-color-neutral-30);color:var(--mg-b-color-dark);font-weight:600}.mg-c-input.mg-c-input--toggle-on-off.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{background-color:unset;color:var(--mg-b-color-dark);font-weight:unset}";
+const mgInputToggleCss = ".mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);overflow-wrap:anywhere}.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}}a{color:inherit;text-decoration:underline}a:hover,a:focus,a:active{text-decoration:none}.mg-c-input__toggle-item-container{overflow:hidden;box-sizing:border-box;padding:var(--mg-b-size-4) var(--mg-b-size-8);border-width:var(--mg-b-size-border);border-radius:calc((var(--mg-b-font-size)*var(--mg-b-line-height) + 2*var(--mg-b-size-4))/var(--mg-c-input-toggle-border-radius-ratio));color:var(--mg-b-color-neutral-110);font-weight:unset;text-overflow:ellipsis;white-space:nowrap}.mg-c-input__toggle-item-container:first-of-type{border-style:solid;border-color:var(--mg-b-color-neutral-80);background-color:var(--mg-b-color-light);font-weight:600}.mg-c-input__button-toggle{display:flex;overflow:hidden;min-width:0;align-items:center;padding:.1rem;border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-b-color-neutral-80);border-radius:calc((var(--mg-b-font-size)*var(--mg-b-line-height) + 2*(var(--mg-b-size-4) + var(--mg-b-size-4) + var(--mg-c-input-border-width)))/var(--mg-c-input-toggle-border-radius-ratio));background-color:var(--mg-b-color-neutral-20);cursor:pointer;font-family:var(--mg-b-font-family);font-size:var(--mg-b-small-font-size);line-height:var(--mg-b-size-12)}.mg-c-input__button-toggle:disabled{cursor:default}.mg-c-input__button-toggle:focus{outline-offset:var(--mg-b-size-4)}.mg-c-input.mg-c-input--toggle:not(.mg-c-input--readonly) .mg-c-input__button-toggle{margin-top:var(--mg-b-size-4)}.mg-c-input.mg-c-input--toggle-is-active .mg-c-input__button-toggle{background-color:var(--mg-b-color-neutral-110)}.mg-c-input.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{border:unset;background-color:unset;color:var(--mg-b-color-light);font-weight:unset}.mg-c-input.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:last-of-type{border-style:solid;background-color:var(--mg-b-color-neutral-20);font-weight:600}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__button-toggle{width:100%;min-width:calc(var(--mg-b-size-20)*2);max-width:calc(var(--mg-b-size-20)*2)}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container{display:flex;overflow:unset;min-width:var(--mg-b-size-20);max-width:var(--mg-b-size-20);height:var(--mg-b-size-20);align-items:center;justify-content:center;padding:0;visibility:hidden}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container:first-of-type{visibility:visible}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container:last-of-type{width:unset}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container ::slotted(mg-icon){display:flex}.mg-c-input.mg-c-input--toggle-icon.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{min-width:unset;visibility:hidden}.mg-c-input.mg-c-input--toggle-icon.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:last-of-type{margin-left:auto;visibility:visible}.mg-c-input.mg-c-input--toggle-on-off.mg-c-input--toggle-icon .mg-c-input__toggle-item-container:first-of-type ::slotted(*){display:none}";
 
 /**
  * type Option validation function
@@ -41,7 +41,9 @@ const MgInputToggle$1 = /*@__PURE__*/ proxyCustomElement(class MgInputToggle ext
          */
         this.labelHide = false;
         /**
-         * Define if toggle have on/off style
+         * Define if toggle have on/off style,
+         * the left icon is hidden.
+         * Only available in combination with the "isIcon" prop.
          */
         this.isOnOff = false;
         /**
@@ -76,7 +78,7 @@ const MgInputToggle$1 = /*@__PURE__*/ proxyCustomElement(class MgInputToggle ext
             // Set error message
             this.errorMessage = undefined;
             // Does have a custom error message
-            if (!this.valid && errorMessage !== undefined) {
+            if (!this.valid && typeof errorMessage === 'string') {
                 this.errorMessage = errorMessage;
             }
         };
@@ -91,14 +93,31 @@ const MgInputToggle$1 = /*@__PURE__*/ proxyCustomElement(class MgInputToggle ext
          */
         this.validateSlots = () => {
             const slots = Array.from(this.element.children);
+            // validate slots
             if (slots.length !== 2) {
-                throw new Error('<mg-input-toggle> 2 slots are required.');
+                if (this.isOnOff && this.isIcon) {
+                    // ONLY slot="item-2" is required in with isOnOff && isIcon
+                    if (this.element.querySelector('[slot="item-2"]') === null) {
+                        throw new Error('<mg-input-toggle> an element with attribute slot="item-2" is required.');
+                    }
+                }
+                else {
+                    throw new Error('<mg-input-toggle> 2 slots are required.');
+                }
             }
-            else if (!this.isIcon) {
+            // update slots
+            if (!this.isIcon) {
                 // Due to text-overflow set to ellipsis
                 // we need to ensure that slot element have title to display value on mouse over
                 slots.forEach(slot => slot.setAttribute('title', slot.textContent));
             }
+            else {
+                slots.forEach(slot => {
+                    if (slot.nodeName === 'MG-ICON') {
+                        slot.size = 'small';
+                    }
+                });
+            }
         };
         /**
          * Get checked item
@@ -139,10 +158,16 @@ const MgInputToggle$1 = /*@__PURE__*/ proxyCustomElement(class MgInputToggle ext
         }
     }
     watchIsOnOff(newValue) {
-        if (newValue)
+        if (newValue) {
             this.classCollection.add(this.classOnOff);
-        else
+            if (!this.isIcon) {
+                this.isOnOff = false;
+                console.warn('<mg-input-toggle> prop "isOnOff" must be used with "isIcon". Setting isOnOff to false.');
+            }
+        }
+        else {
             this.classCollection.delete(this.classOnOff);
+        }
     }
     watchIsIcon(newValue) {
         if (newValue)
@@ -190,7 +215,7 @@ const MgInputToggle$1 = /*@__PURE__*/ proxyCustomElement(class MgInputToggle ext
         if (typeof valid !== 'boolean') {
             throw new Error('<mg-input-toggle> method "setError()" param "valid" must be a boolean.');
         }
-        else if (!isValidString(errorMessage)) {
+        else if (errorMessage !== undefined && !isValidString(errorMessage)) {
             throw new Error('<mg-input-toggle> method "setError()" param "errorMessage" must be a string.');
         }
         else {
@@ -267,7 +292,7 @@ const MgInputToggle$1 = /*@__PURE__*/ proxyCustomElement(class MgInputToggle ext
      */
     render() {
         const checkedItem = this.getCheckedItem(this.checked);
-        return (h("mg-input", { key: '7611cffaf1c01e30c3fa7a27555f94ab357dd374', label: this.label, helpText: this.helpText, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: undefined, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, errorMessage: this.errorMessage }, this.readonly ? (checkedItem && h("b", { class: "mg-c-input__readonly-value" }, checkedItem.title)) : (h("button", { type: "button", role: "switch", "aria-checked": this.checked.toString(), "aria-readonly": this.disabled || this.readonly, id: this.identifier, class: "mg-c-input__button-toggle", disabled: this.disabled || this.readonly, onClick: this.toggleChecked, ref: el => {
+        return (h("mg-input", { key: '4d87ed13bbd3d3a54303c21001247e1251417326', label: this.label, helpText: this.helpText, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: undefined, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, errorMessage: this.errorMessage }, this.readonly ? (checkedItem && h("b", { class: "mg-c-input__readonly-value" }, checkedItem.title)) : (h("button", { type: "button", role: "switch", "aria-checked": this.checked.toString(), "aria-readonly": this.disabled || this.readonly, id: this.identifier, class: "mg-c-input__button-toggle", disabled: this.disabled || this.readonly, onClick: this.toggleChecked, ref: el => {
                 if (el !== null)
                     this.button = el;
             } }, h("span", { "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, h("slot", { name: "item-1" })), h("span", { "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, h("slot", { name: "item-2" }))))));
@@ -291,7 +316,7 @@ const MgInputToggle$1 = /*@__PURE__*/ proxyCustomElement(class MgInputToggle ext
         "label": [1],
         "labelOnTop": [4, "label-on-top"],
         "labelHide": [4, "label-hide"],
-        "isOnOff": [4, "is-on-off"],
+        "isOnOff": [1028, "is-on-off"],
         "isIcon": [4, "is-icon"],
         "readonly": [4],
         "disabled": [4],

package/dist/components/mg-input2.js

@@ -13,12 +13,16 @@ const widths = [2, 4, 16, 'full'];
  * Possible tootltip postions
  */
 const tooltipPositions = ['input', 'label'];
+/**
+ * Possible label headings
+ */
+const labelHeadings = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
 const classFieldset = 'mg-c-input--fieldset';
 const classDisabled = 'mg-c-input--disabled';
 const classReadonly = 'mg-c-input--readonly';
 const classVerticalList = 'mg-c-input--vertical-list';
 
-const mgInputCss = ".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}}/*!\n * @prop --mg-c-input-border-width: Defines the width of the input border. Default value is `--mg-b-size-border`.\n * @prop --mg-c-input-border-radius: Defines the border radius of the input. Default value is `--mg-b-size-radius`.\n * @prop --mg-c-input-color-border: Defines the color of the input border. Default value is `rgb(181, 194, 201)`.\n * @prop --mg-c-input-placeholder-color-text: Defines the color of the placeholder text. Default value is `rgb(181, 194, 201)`.\n * @prop --mg-c-input-color-box-shadow-focus: Defines the shadow color of the input when focused. Default value is `rgba(0, 221, 255, 0.5)`.\n * @prop --mg-c-input-error-color-background: Defines the background color of the input error message. Default value is `color-mix(in srgb, var(--mg-b-color-danger), white 95%)`.\n * @prop --mg-c-input-toggle-border-radius-ratio: Defines the border radius ratio of the input toggle. Default value is `2`.\n * @prop --mg-c-input-check-size: Defines the size of the input check. Default value is `--mg-b-size-16`.\n */:host{display:block}.mg-c-input__input mg-icon,.mg-c-input__error mg-icon{display:flex}.mg-c-input{display:flex;min-height:var(--mg-b-size-min-height);align-items:flex-start}.mg-c-input__input-container{width:100%;min-height:var(--mg-b-size-min-height)}.mg-c-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-b-size-16);height:var(--mg-b-size-16);margin-left:var(--mg-b-size-8)}@media print{.mg-c-input__input-container mg-tooltip{display:none}}.mg-c-input__input{display:flex;min-height:var(--mg-b-size-min-height);align-items:center;justify-content:start}.mg-c-input__input mg-tooltip{align-self:baseline;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2)}.mg-c-input__input ::slotted(.mg-c-input__button-toggle:disabled){opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input__title{display:flex;width:var(--mg-c-input-title-width, auto);flex-shrink:0;align-items:baseline;justify-content:flex-end;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);margin-right:var(--mg-c-input-title-horizontal-space, var(--mg-b-size-8));text-align:right}.mg-c-input__title slot[name=label]+mg-tooltip{margin-left:var(--mg-b-size-4)}.mg-c-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-c-input__error{display:inline-block;padding:var(--mg-b-size-4) var(--mg-b-size-8);border-radius:var(--mg-b-size-radius);background:var(--mg-c-input-error-color-background);color:var(--mg-b-color-danger)}.mg-c-input__error ::slotted(*),.mg-c-input__help-text ::slotted(*){font-size:var(--mg-b-font-size-small);text-align:start}:host(:not(.mg-c-input--textarea)) .mg-c-input__input+.mg-c-input__error,:host(:not(.mg-c-input--textarea)) .mg-c-input__input+.mg-c-input__help-text{margin-top:var(--mg-b-size-4)}:host(.mg-c-input.mg-c-input--readonly) .mg-c-input__input mg-tooltip{margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2)}:host(.mg-c-input){display:flex;margin-bottom:var(--mg-c-input-margin-bottom, 0)}:host(.mg-c-input.mg-c-input--checkbox) .mg-c-input__input,:host(.mg-c-input.mg-c-input--radio) .mg-c-input__input{min-height:unset;align-items:flex-start}:host(.mg-c-input.mg-c-input--checkbox,.mg-c-input.mg-c-input--radio) .mg-c-input__input{min-height:unset}:host(.mg-c-input.mg-c-input--fieldset:not(.mg-c-input--checkbox-multi,.mg-c-input--readonly)) .mg-c-input__input-container mg-tooltip{margin-left:var(--mg-b-size-32)}:host(.mg-c-input.mg-c-input--label-on-top){flex-direction:column}:host(.mg-c-input.mg-c-input--label-on-top) .mg-c-input__title{width:100%;flex:0;justify-content:flex-start;margin-top:0;margin-right:0;margin-bottom:var(--mg-b-size-4);text-align:left}:host(.mg-c-input.mg-c-input--label-on-top) .mg-c-input__title ::slotted(mg-input-title){flex-shrink:1}@media screen and (max-width: 767px){:host(.mg-c-input){flex-direction:column}:host(.mg-c-input) .mg-c-input__title{width:100%;flex:0;justify-content:flex-start;margin-top:0;margin-right:0;margin-bottom:var(--mg-b-size-4);text-align:left}:host(.mg-c-input) .mg-c-input__title ::slotted(mg-input-title){flex-shrink:1}}";
+const mgInputCss = ".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}}/*!\n * @prop --mg-c-input-border-width: Defines the width of the input border. Default value is `--mg-b-size-border`.\n * @prop --mg-c-input-border-radius: Defines the border radius of the input. Default value is `--mg-b-size-radius`.\n * @prop --mg-c-input-color-border: Defines the color of the input border. Default value is `rgb(181, 194, 201)`.\n * @prop --mg-c-input-placeholder-color-text: Defines the color of the placeholder text. Default value is `rgb(181, 194, 201)`.\n * @prop --mg-c-input-color-box-shadow-focus: Defines the shadow color of the input when focused. Default value is `rgba(0, 221, 255, 0.5)`.\n * @prop --mg-c-input-error-color-background: Defines the background color of the input error message. Default value is `color-mix(in srgb, var(--mg-b-color-danger), white 95%)`.\n * @prop --mg-c-input-toggle-border-radius-ratio: Defines the border radius ratio of the input toggle. Default value is `2`.\n * @prop --mg-c-input-check-size: Defines the size of the input check. Default value is `--mg-b-size-16`.\n */:host{display:block}.mg-c-input__input mg-icon,.mg-c-input__error mg-icon{display:flex}.mg-c-input{display:flex;min-height:var(--mg-b-size-min-height);align-items:flex-start}.mg-c-input__input-container{width:100%;min-height:var(--mg-b-size-min-height)}.mg-c-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-b-size-16);height:var(--mg-b-size-16);margin-left:var(--mg-b-size-8)}@media print{.mg-c-input__input-container mg-tooltip{display:none}}.mg-c-input__input{display:flex;min-height:var(--mg-b-size-min-height);align-items:center;justify-content:start}.mg-c-input__input mg-tooltip{align-self:baseline;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2)}.mg-c-input__input ::slotted(.mg-c-input__button-toggle:disabled){opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input__title{display:flex;width:var(--mg-c-input-title-width, auto);flex-shrink:0;align-items:baseline;justify-content:flex-end;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);margin-right:var(--mg-c-input-title-horizontal-space, var(--mg-b-size-8));text-align:right}.mg-c-input__title slot[name=label]+mg-tooltip{margin-left:var(--mg-b-size-4)}.mg-c-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-c-input__error{display:inline-block;padding:var(--mg-b-size-4) var(--mg-b-size-8);border-radius:var(--mg-b-size-radius);background:var(--mg-c-input-error-color-background);color:var(--mg-b-color-danger)}.mg-c-input__error ::slotted(*),.mg-c-input__help-text ::slotted(*){font-size:var(--mg-b-font-size-small);text-align:start}:host(:not(.mg-c-input--textarea)) .mg-c-input__input+.mg-c-input__error,:host(:not(.mg-c-input--textarea)) .mg-c-input__input+.mg-c-input__help-text{margin-top:var(--mg-b-size-4)}:host(.mg-c-input.mg-c-input--readonly) .mg-c-input__input mg-tooltip{margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2)}:host(.mg-c-input){display:flex;margin-bottom:var(--mg-c-input-margin-bottom, 0)}:host(.mg-c-input.mg-c-input--checkbox) .mg-c-input__input,:host(.mg-c-input.mg-c-input--toggle) .mg-c-input__input,:host(.mg-c-input.mg-c-input--radio) .mg-c-input__input{min-height:unset;align-items:flex-start}:host(.mg-c-input.mg-c-input--checkbox,.mg-c-input.mg-c-input--radio) .mg-c-input__input{min-height:unset}:host(.mg-c-input.mg-c-input--fieldset:not(.mg-c-input--checkbox-multi,.mg-c-input--readonly)) .mg-c-input__input-container mg-tooltip{margin-left:var(--mg-b-size-32)}:host(.mg-c-input.mg-c-input--toggle) .mg-c-input__input-container{min-width:0;flex:1}:host(.mg-c-input.mg-c-input--label-on-top){flex-direction:column}:host(.mg-c-input.mg-c-input--label-on-top) .mg-c-input__title{width:100%;flex:0;justify-content:flex-start;margin-top:0;margin-right:0;margin-bottom:var(--mg-b-size-4);text-align:left}:host(.mg-c-input.mg-c-input--label-on-top) .mg-c-input__title ::slotted(mg-input-title){flex-shrink:1}:host(.mg-c-input.mg-c-input--inputs-on-bottom) .mg-c-input__help-text{margin-top:var(--mg-b-size-4);margin-bottom:var(--mg-b-size-12)}:host(.mg-c-input.mg-c-input--inputs-on-bottom) .mg-c-input__error{margin-bottom:var(--mg-b-size-20)}:host(.mg-c-input.mg-c-input--inputs-on-bottom.mg-c-input--fieldset){--mg-c-input-title-width:var(--mg-c-form-inputs-title-width, calc(28 * var(--mg-b-size-8)));--mg-c-input-title-horizontal-space:var(--mg-b-size-32)}:host(.mg-c-input.mg-c-input--inputs-on-bottom.mg-c-input--fieldset) ::slotted(*){--mg-c-input-margin-bottom:var(--mg-b-size-16)}:host(.mg-c-input.mg-c-input--label-border-display) .mg-c-input__title{border-bottom:var(--mg-b-size-border) solid var(--mg-c-divider-color-background)}:host(.mg-c-input.mg-c-input--has-heading) .mg-c-input__title{margin-bottom:0}:host(.mg-c-input.mg-c-input--has-heading) .mg-c-input-title__text{margin-top:var(--mg-b-font-size-8);margin-bottom:var(--mg-b-font-size-8)}:host(.mg-c-input.mg-c-input--has-heading) .mg-c-input__help-text,:host(.mg-c-input.mg-c-input--has-heading) .mg-c-input__error{margin-top:0;margin-bottom:var(--mg-b-size-4)}:host(.mg-c-input.mg-c-input--has-heading) .mg-c-input__help-text+.mg-c-input__input,:host(.mg-c-input.mg-c-input--has-heading) .mg-c-input__error+.mg-c-input__input{margin-top:var(--mg-b-size-12)}:host(.mg-c-input.mg-c-input--has-heading) .mg-c-input__help-text+.mg-c-input__error{margin-top:var(--mg-b-size-4)}:host(.mg-c-input.mg-c-input--has-heading.mg-c-input--label-border-display) .mg-c-input__title{margin-bottom:var(--mg-b-size-16)}:host(.mg-c-input.mg-c-input--has-heading.mg-c-input--label-border-display) .mg-c-input__help-text,:host(.mg-c-input.mg-c-input--has-heading.mg-c-input--label-border-display) .mg-c-input__error{margin-bottom:0}:host(.mg-c-input.mg-c-input--has-heading.mg-c-input--label-border-display) .mg-c-input__help-text+.mg-c-input__input,:host(.mg-c-input.mg-c-input--has-heading.mg-c-input--label-border-display) .mg-c-input__error+.mg-c-input__input{margin-top:var(--mg-b-size-16)}:host(.mg-c-input.mg-c-input--has-heading.mg-c-input--label-border-display) .mg-c-input__help-text+.mg-c-input__error{margin-top:var(--mg-b-size-8)}@media screen and (max-width: 767px){:host(.mg-c-input){flex-direction:column}:host(.mg-c-input) .mg-c-input__title{width:100%;flex:0;justify-content:flex-start;margin-top:0;margin-right:0;margin-bottom:var(--mg-b-size-4);text-align:left}:host(.mg-c-input) .mg-c-input__title ::slotted(mg-input-title){flex-shrink:1}}";
 
 const MgInput = /*@__PURE__*/ proxyCustomElement(class MgInput extends HTMLElement {
     constructor(registerHost) {
@@ -34,6 +38,9 @@ const MgInput = /*@__PURE__*/ proxyCustomElement(class MgInput extends HTMLEleme
         this.classInput = 'mg-c-input';
         this.classHasError = 'mg-c-input--has-error';
         this.classLabelOnTop = 'mg-c-input--label-on-top';
+        this.classHasHeading = 'mg-c-input--has-heading';
+        this.classLabelBorderDisplay = 'mg-c-input--label-border-display';
+        this.classInputsOnBottom = 'mg-c-input--inputs-on-bottom';
         /**
          * Define if label is displayed on top
          */
@@ -42,6 +49,11 @@ const MgInput = /*@__PURE__*/ proxyCustomElement(class MgInput extends HTMLEleme
          * Define if label is visible
          */
         this.labelHide = false;
+        /**
+         * Define if label border is visible
+         * You must pair this mode with `labelOnTop`and `fieldset` class
+         */
+        this.labelBorderDisplay = false;
         /**
          * Define tooltip position
          */
@@ -50,6 +62,10 @@ const MgInput = /*@__PURE__*/ proxyCustomElement(class MgInput extends HTMLEleme
          * Define if input is required
          */
         this.required = false;
+        /**
+         * Display inputs after help-text and error message
+         */
+        this.inputsOnBottom = false;
         /**
          * Define aria-describedby ids to link with
          */
@@ -70,11 +86,44 @@ const MgInput = /*@__PURE__*/ proxyCustomElement(class MgInput extends HTMLEleme
          * Element is disabled
          */
         this.isVerticalList = false;
+        /************
+         * Methods *
+         ************/
+        /**
+         * Update element aria-describedby
+         * @param element - element to update
+         * @param ariaDescribedbyIDs - ariaDescribedbyIDs references
+         */
+        this.updateElementAriaDescribedby = (element, ariaDescribedbyIDs) => {
+            if (ariaDescribedbyIDs.size > 0) {
+                element.setAttribute('aria-describedby', Array.from(ariaDescribedbyIDs).join(' '));
+            }
+            else {
+                element.removeAttribute('aria-describedby');
+            }
+        };
         /**
          * Get tooltip node
          * @returns mg-tooltip
          */
         this.renderTooltip = () => (h("mg-tooltip", { identifier: `${this.identifier}-tooltip`, message: this.tooltip }, h("mg-icon", { icon: "info-circle" })));
+        /**
+         * Get input container element
+         * @returns ordered elements
+         */
+        this.inputContainerElements = () => {
+            const elements = [
+                this.helptextMessageSlotElement && (h("div", { class: "mg-c-input__help-text" }, h("slot", { name: this.slotHelpText }))),
+                !this.isDisabled && this.errorMessage && (h("div", { class: "mg-c-input__error", "aria-live": "assertive" }, h("slot", { name: this.slotError }))),
+            ];
+            const inputSlot = (h("div", { class: "mg-c-input__input" }, h("slot", null), this.tooltip && !this.labelOnTop && (this.tooltipPosition === 'input' || this.labelHide) && this.renderTooltip()));
+            if (this.inputsOnBottom) {
+                return [...elements, inputSlot];
+            }
+            else {
+                return [inputSlot, ...elements];
+            }
+        };
     }
     watchIdentifier(newValue) {
         if (!isValidString(newValue)) {
@@ -101,6 +150,26 @@ const MgInput = /*@__PURE__*/ proxyCustomElement(class MgInput extends HTMLEleme
             throw new Error('<mg-input> prop "labelOnTop" must not be paired with the prop "labelHide".');
         }
     }
+    watchlabelHeading(newValue) {
+        if (this.isFieldset && this.labelOnTop && labelHeadings.includes(newValue)) {
+            this.element.classList.add(this.classHasHeading);
+        }
+        else {
+            if ((!this.isFieldset && newValue !== undefined) || typeof newValue === 'string') {
+                throw new Error(`<mg-input> prop "labelHeading" must be used with a fieldset and be one of: ${labelHeadings.join(', ')}. Passed value: ${toString(newValue)}.`);
+            }
+            this.labelHeading = undefined;
+            this.element.classList.remove(this.classHasHeading);
+        }
+    }
+    watchLabelBorderDisplay(newValue) {
+        if (this.isFieldset && this.labelOnTop && newValue) {
+            this.element.classList.add(this.classLabelBorderDisplay);
+        }
+        else {
+            this.element.classList.remove(this.classLabelBorderDisplay);
+        }
+    }
     watchTooltipPosition(newValue) {
         if (!tooltipPositions.includes(newValue)) {
             throw new Error(`<mg-input> prop "tooltipPosition" must be one of: ${tooltipPositions.join(', ')}. Passed value: ${toString(newValue)}.`);
@@ -120,7 +189,7 @@ const MgInput = /*@__PURE__*/ proxyCustomElement(class MgInput extends HTMLEleme
     }
     watchHelpText(newValue) {
         var _a;
-        if (newValue && !this.isReadonly) {
+        if (isValidString(newValue) && !this.isReadonly) {
             this.renderHelpText();
         }
         else {
@@ -128,6 +197,14 @@ const MgInput = /*@__PURE__*/ proxyCustomElement(class MgInput extends HTMLEleme
             this.helptextMessageSlotElement = undefined;
         }
     }
+    watchInputsOnBottom(newValue) {
+        if (newValue) {
+            this.element.classList.add(this.classInputsOnBottom);
+        }
+        else {
+            this.element.classList.remove(this.classInputsOnBottom);
+        }
+    }
     watchAriaDescribedbyIDs() {
         if (this.isReadonly) {
             return;
@@ -143,23 +220,26 @@ const MgInput = /*@__PURE__*/ proxyCustomElement(class MgInput extends HTMLEleme
         // a11y IDs
         const ariaDescribedbyIDs = new Set(this.ariaDescribedbyIDs);
         // Help text
-        if (this.helpText !== undefined) {
+        if (isValidString(this.helpText)) {
             this.renderHelpText();
             if (!ariaDescribedbyIDs.has(this.helpTextId))
                 ariaDescribedbyIDs.add(this.helpTextId);
         }
         // Error Message
-        if (this.errorMessage !== undefined) {
+        if (isValidString(this.errorMessage)) {
             this.renderErrorMessage();
             if (!ariaDescribedbyIDs.has(this.helpTextErrorId))
                 ariaDescribedbyIDs.add(this.helpTextErrorId);
         }
-        this.element.querySelectorAll('input,select,textarea,[role="switch"]').forEach(element => {
-            if (ariaDescribedbyIDs.size > 0) {
-                element.setAttribute('aria-describedby', Array.from(ariaDescribedbyIDs).join(' '));
-            }
-            else {
-                element.removeAttribute('aria-describedby');
+        const inputs = this.element.querySelectorAll('input,select,textarea,[role="switch"]');
+        inputs.forEach((element) => {
+            this.updateElementAriaDescribedby(element, ariaDescribedbyIDs);
+        });
+        // use timeout to await for legend render for componentWillLoad hook
+        setTimeout(() => {
+            const legend = this.element.querySelector('legend');
+            if (legend !== null) {
+                this.updateElementAriaDescribedby(legend, ariaDescribedbyIDs);
             }
         });
     }
@@ -189,9 +269,6 @@ const MgInput = /*@__PURE__*/ proxyCustomElement(class MgInput extends HTMLEleme
             this.renderLabel();
         }
     }
-    /************
-     * Methods *
-     ************/
     /**
      * Render input label
      */
@@ -211,11 +288,21 @@ const MgInput = /*@__PURE__*/ proxyCustomElement(class MgInput extends HTMLEleme
             labelSlotElement.setAttribute(attr, val);
         });
         // create label element
-        const label = document.createElement('span');
-        label.classList.add('mg-c-input-title__text');
-        label.textContent = this.label;
-        labelSlotElement.appendChild(label);
+        if (labelHeadings.includes(this.labelHeading)) {
+            let label = this.element.shadowRoot.querySelector(this.labelHeading);
+            if (label === null) {
+                label = document.createElement(this.labelHeading);
+                label.classList.add('mg-c-input-title__text');
+                labelSlotElement.appendChild(label);
+            }
+            label.textContent = this.label;
+        }
+        else {
+            labelSlotElement.textContent = this.label;
+        }
         this.element.appendChild(labelSlotElement);
+        // update aria-describedby
+        this.watchAriaDescribedbyIDs();
     }
     /**
      * Render error message
@@ -258,6 +345,9 @@ const MgInput = /*@__PURE__*/ proxyCustomElement(class MgInput extends HTMLEleme
         this.watchTooltipPosition(this.tooltipPosition);
         this.watchHelpText(this.helpText);
         this.watchErrorMessage(this.errorMessage);
+        this.watchInputsOnBottom(this.inputsOnBottom);
+        this.watchlabelHeading(this.labelHeading);
+        this.watchLabelBorderDisplay(this.labelBorderDisplay);
     }
     /**
      * Validate slots
@@ -274,16 +364,19 @@ const MgInput = /*@__PURE__*/ proxyCustomElement(class MgInput extends HTMLEleme
      */
     render() {
         const isGroup = this.isFieldset && !this.isReadonly;
-        return (h(Host, { key: '7c4c22aaa8f8d250eafa9159a103a11e637b0cca', class: this.element.classList.toString(), role: isGroup ? 'group' : undefined, "aria-labelledby": isGroup ? `${this.identifier}-title` : undefined }, h("div", { key: '2215e7b2d96e08507579a39d8e05b3e8a3d901fb', class: { 'mg-c-input__title': true, 'mg-u-visually-hidden': this.labelHide } }, h("slot", { key: 'a4dbf4e36dd3ae5437d6dcb05d807f4faa0924b7', name: this.slotLabel }), this.tooltip && (this.tooltipPosition === 'label' || this.labelOnTop) && !this.labelHide && this.renderTooltip()), h("div", { key: '8e382a4857f469a9d6f77cad613183798df4d1e1', class: "mg-c-input__input-container" }, h("div", { key: 'f9897f90d44aab19614d4d40d77a8eb270c92847', class: "mg-c-input__input" }, h("slot", { key: 'c8d809d4ff0d0e660849825f016f9267da3a2d7e' }), this.tooltip && !this.labelOnTop && (this.tooltipPosition === 'input' || this.labelHide) && this.renderTooltip()), this.helptextMessageSlotElement && (h("div", { key: 'cebd6c083d088aebcdae6f032c6cdcf2387c3e27', class: "mg-c-input__help-text" }, h("slot", { key: '923fcc78b309d197e32522052b297ef0f58b1495', name: this.slotHelpText }))), !this.isDisabled && this.errorMessage && (h("div", { key: 'e706bff54ce21191a8c0940c60f6e99a91cfb9ec', class: "mg-c-input__error", "aria-live": "assertive" }, h("slot", { key: '6524debd3640df7b5e73ef4aa4415569eef1ecd8', name: this.slotError }))))));
+        return (h(Host, { key: 'fbab18280a709407c83f324127e8de6cbb05fe7c', class: this.element.classList.toString(), role: isGroup ? 'group' : undefined, "aria-labelledby": isGroup ? `${this.identifier}-title` : undefined }, h("div", { key: 'ac0924c244b9fa87d02e659a5710ee93d12a202f', class: { 'mg-c-input__title': true, 'mg-u-visually-hidden': this.labelHide } }, h("slot", { key: 'c825af33ba0a6c209d02d6487422347f7d8acfed', name: this.slotLabel }), this.tooltip && (this.tooltipPosition === 'label' || this.labelOnTop) && !this.labelHide && this.renderTooltip()), h("div", { key: '805e1eedfdea132f3ea4fd11da761810a3d7c939', class: "mg-c-input__input-container" }, this.inputContainerElements())));
     }
     get element() { return this; }
     static get watchers() { return {
         "identifier": ["watchIdentifier", "watchAriaDescribedbyIDs"],
         "labelOnTop": ["watchLabelOnTop", "watchLabelConfig"],
         "labelHide": ["watchLabelConfig"],
+        "labelHeading": ["watchlabelHeading"],
+        "labelBorderDisplay": ["watchLabelBorderDisplay"],
         "tooltipPosition": ["watchTooltipPosition"],
         "errorMessage": ["watchErrorMessage", "watchAriaDescribedbyIDs"],
         "helpText": ["watchHelpText", "watchAriaDescribedbyIDs"],
+        "inputsOnBottom": ["watchInputsOnBottom"],
         "ariaDescribedbyIDs": ["watchAriaDescribedbyIDs"],
         "class": ["watchClass", "watchLabel"],
         "label": ["watchLabel"],
@@ -297,11 +390,14 @@ const MgInput = /*@__PURE__*/ proxyCustomElement(class MgInput extends HTMLEleme
         "label": [1],
         "labelOnTop": [4, "label-on-top"],
         "labelHide": [4, "label-hide"],
+        "labelHeading": [1025, "label-heading"],
+        "labelBorderDisplay": [4, "label-border-display"],
         "tooltip": [1],
         "tooltipPosition": [1, "tooltip-position"],
         "required": [4],
         "errorMessage": [1, "error-message"],
         "helpText": [1, "help-text"],
+        "inputsOnBottom": [4, "inputs-on-bottom"],
         "ariaDescribedbyIDs": [1025, "aria-describedby-i-ds"],
         "isFieldset": [32],
         "isReadonly": [32],
@@ -311,9 +407,12 @@ const MgInput = /*@__PURE__*/ proxyCustomElement(class MgInput extends HTMLEleme
         "identifier": ["watchIdentifier", "watchAriaDescribedbyIDs"],
         "labelOnTop": ["watchLabelOnTop", "watchLabelConfig"],
         "labelHide": ["watchLabelConfig"],
+        "labelHeading": ["watchlabelHeading"],
+        "labelBorderDisplay": ["watchLabelBorderDisplay"],
         "tooltipPosition": ["watchTooltipPosition"],
         "errorMessage": ["watchErrorMessage", "watchAriaDescribedbyIDs"],
         "helpText": ["watchHelpText", "watchAriaDescribedbyIDs"],
+        "inputsOnBottom": ["watchInputsOnBottom"],
         "ariaDescribedbyIDs": ["watchAriaDescribedbyIDs"],
         "class": ["watchClass", "watchLabel"],
         "label": ["watchLabel"],

package/dist/components/mg-item-more2.js

@@ -194,6 +194,10 @@ const MgMenu = /*@__PURE__*/ proxyCustomElement(class MgMenu extends HTMLElement
      * @param event - mg-item-loaded "item-loaded" custom event
      */
     updateItemListener(event) {
+        // `<mg-action-more>` element doesn't need `data-has-focus` attribute
+        if (event.target.nodeName === 'MG-ACTION-MORE') {
+            return;
+        }
         const itemToWatch = event.target.nodeName === 'MG-ITEM-MORE' ? event.target.shadowRoot.querySelector('mg-menu-item') : event.target;
         ['click', 'focus'].forEach(trigger => {
             itemToWatch.addEventListener(trigger, () => {
@@ -254,7 +258,7 @@ const MgMenu = /*@__PURE__*/ proxyCustomElement(class MgMenu extends HTMLElement
      * @returns HTML Element
      */
     render() {
-        return (h(Host, { key: '45bdad3db5dff4700f51152b94682e5df1997dbf', role: "list", "aria-label": this.label }, h("slot", { key: '43c48419f51b58ec2ee9cec3cf3e5a7e21994a4d' })));
+        return (h(Host, { key: '753833b01b86d6983f5d063f5598e2187b147a6e', role: "list", "aria-label": this.label }, h("slot", { key: '56702e49f5a97feddeb66e6271bd898061aa0d48' })));
     }
     get element() { return this; }
     static get watchers() { return {

package/dist/components/mg-loader2.js

@@ -38,7 +38,7 @@ const MgLoader = /*@__PURE__*/ proxyCustomElement(class MgLoader extends HTMLEle
      * @returns HTML Element
      */
     render() {
-        return (h("div", { key: 'b74028455b7003824fa5618b1751d05a91ab7071', class: "mg-c-loader", "aria-live": "polite" }, h("mg-icon", { key: '204acdb8f881b348148020214c05269878852c4f', icon: "loader", spin: true }), h("span", { key: '40f1792354df01ec9af61ab128575ea166f34cb5', class: { 'mg-u-visually-hidden': this.messageHide } }, this.message || this.messages.loader.inProgress)));
+        return (h("div", { key: '739b4cbacd8a8da056dbb1445c40fac2cf26766a', class: "mg-c-loader", "aria-live": "polite" }, h("mg-icon", { key: '95d3cbf26fcd6dbf0dad4853bf55aa66385f1aba', icon: "loader", spin: true }), h("span", { key: 'f6322cd3054d8976bd2ec24f86a2d6bb60ca7ae1', class: { 'mg-u-visually-hidden': this.messageHide } }, this.message || this.messages.loader.inProgress)));
     }
     get element() { return this; }
     static get watchers() { return {

package/dist/components/mg-message2.js

@@ -98,9 +98,9 @@ const MgMessage = /*@__PURE__*/ proxyCustomElement(class MgMessage extends HTMLE
      * @returns HTML Element
      */
     render() {
-        return (h("div", { key: 'a113514956d6a3ef9fada1a20baa7b00843e5b96', class: this.classCollection.join() }, h("mg-card", { key: 'db894eb3d0f3cb9b18681e0925e0fd1bdcd208e2', shadow: true }, this.variantStyle === 'bar-left' && h("span", { key: '37eb3a027be82ab006fe30dd07bce88f526fc263', class: "mg-c-message__bar" }), h("span", { key: '76a3b6bf2d27ec85b3e9b7235cf5bba933ac02e2', class: "mg-c-message__icon" }, h("mg-icon", { key: '2988764c8a3d272dab5e749a8dc95643b9ead573', icon: this.getIcon() })), h("div", { key: '64e57835d18f433965eda9260efeb74055489c6e', class: "mg-c-message__content" }, h("span", { key: 'a2032d4fe0eec962cd9bb1e12119709bcb6ff53c', class: "mg-c-message__content-slot" }, h("slot", { key: 'dfe5f7315e8f8d66ccb195d8e7f7862eb803e6d9' })), this.hasActions && [
+        return (h("div", { key: 'f99bf527eb2c6005eeaec11f89aaa08f8865ea57', class: this.classCollection.join() }, h("mg-card", { key: 'beede3cd97b022d947c216b6bba454a104ba5790', shadow: true }, this.variantStyle === 'bar-left' && h("span", { key: '515828d725a996c9d57b39ad75e9373150a1b78a', class: "mg-c-message__bar" }), h("span", { key: '02ae41c66af25c2611b9b6cb8c87a1ad99346fa3', class: "mg-c-message__icon" }, h("mg-icon", { key: '3eadb40ed0dfa5ec51155608a67769c5fee3d402', icon: this.getIcon() })), h("div", { key: 'b832251e8f330d00b512bcd508ae9bf6e5f511cb', class: "mg-c-message__content" }, h("span", { key: 'c3520fc49bd5c3c187a83823050ceb9ca8c12d46', class: "mg-c-message__content-slot" }, h("slot", { key: 'f4064dff9536cbb76e45c5c4c1a89621da9531b2' })), this.hasActions && [
             h("span", { class: "mg-c-message__content-separator", key: "content-separator" }),
-            h("span", { class: "mg-c-message__content-actions-slot", key: "content-actions-slot" }, h("slot", { key: 'db1782730e0bffb168b8ec23410e6836f572715c', name: "actions" })),
+            h("span", { class: "mg-c-message__content-actions-slot", key: "content-actions-slot" }, h("slot", { key: '5585f7c14c2c3896cfdb5319414cd82f4d4b3a8b', name: "actions" })),
         ]))));
     }
     get element() { return this; }

package/dist/components/mg-modal.js

@@ -120,11 +120,11 @@ const MgModal$1 = /*@__PURE__*/ proxyCustomElement(class MgModal extends HTMLEle
      * @returns HTML Element
      */
     render() {
-        return (h("dialog", { key: '783b289712deb419fa7ac4c9f371add80054af6b', role: this.dialogRole, id: this.identifier, class: this.classCollection.join(), "aria-labelledby": this.titleId, ref: (el) => {
+        return (h("dialog", { key: '2d99322fd3c80b8cbfea70589cf579e0c1c6f06b', role: this.dialogRole, id: this.identifier, class: this.classCollection.join(), "aria-labelledby": this.titleId, ref: (el) => {
                 if (el !== null) {
                     this.dialog = el;
                 }
-            } }, h("mg-card", { key: 'd6006f296ab50a192229e09e6e01a3313ab69cce', shadow: true }, h("div", { key: '76bc44557dc4b4bcce40b54d5d4bfa381f7906af', class: "mg-c-modal__dialog" }, h("header", { key: '08ba473f429ae57434dd321575f9eaf97e41f7a9', class: "mg-c-modal__header" }, this.closeButton && (h("span", { key: 'd96baeaaefdb5541da7ee7bc58c3901b3d64ed33', class: "mg-c-modal__close-button" }, h("mg-button", { key: 'f43486e05e337fad6e54b8a0b07b9d13aad50acc', "is-icon": true, variant: "flat", label: this.messages.modal.closeButton, onClick: this.handleClose }, h("mg-icon", { key: '3278e25d15abdefb56cc3c67e7a8ec500d90547b', icon: "cross" })))), h("h1", { key: 'd9246055be4cb938f4aff20fcdc53b3a7c119d20', class: "mg-c-modal__title", id: this.titleId }, this.modalTitle)), h("article", { key: 'bce8cd10a2fffdf726df6d07b9f81da1fd693038', class: "mg-c-modal__content" }, h("slot", { key: '9db561d8462fe9a3afc6be543f2ef3b189f3efd4' })), this.hasActions && (h("footer", { key: '226e235454dce60eb8b5652add3b23e1cf480fc7', class: "mg-c-modal__footer" }, h("slot", { key: '8352666de0db98e96c52a419c939574285972571', name: "actions" })))))));
+            } }, h("mg-card", { key: '32692a6d41ef30b3d3e61ddcfea47350d374ed09', shadow: true }, h("div", { key: 'c87bb43bb069671b65a9759ee293e77975707597', class: "mg-c-modal__dialog" }, h("header", { key: '1272a946878efcf8c69f3b09852ba6938cbe31b0', class: "mg-c-modal__header" }, this.closeButton && (h("span", { key: '0704656c7c5ac4c8d405f2cd673e91f72763ee8f', class: "mg-c-modal__close-button" }, h("mg-button", { key: '4402971c763ee34145de5bd69d367fde68f9d1a2', "is-icon": true, variant: "flat", label: this.messages.modal.closeButton, onClick: this.handleClose }, h("mg-icon", { key: '9e16add6a3e387971507a252671c895b6c94a586', icon: "cross" })))), h("h1", { key: '3e4fc2b4419398528565d382b728b8b752758ddd', class: "mg-c-modal__title", id: this.titleId }, this.modalTitle)), h("article", { key: '170ff6bd9592687baa4c561615f540ad1c7400e4', class: "mg-c-modal__content" }, h("slot", { key: 'cb710e2a57e4c997deac367169b56047af1200b1' })), this.hasActions && (h("footer", { key: '1e08d67caeaaaf75eb97faa11528719ea537c24c', class: "mg-c-modal__footer" }, h("slot", { key: '461ec8e4117477aef08dc6d346ad0bf6007ec12d', name: "actions" })))))));
     }
     get element() { return this; }
     static get watchers() { return {

package/dist/components/mg-panel.js

@@ -71,6 +71,13 @@ const MgPanel$1 = /*@__PURE__*/ proxyCustomElement(class MgPanel extends HTMLEle
         /************
          * Methods *
          ************/
+        /**
+         * Check if panel-title slot is used
+         * @returns true if slot is used
+         */
+        this.hasPanelTitleSlot = () => {
+            return this.element.querySelector('[slot="panel-title"]') !== null;
+        };
         /**
          * Toggle is editing state
          */
@@ -124,7 +131,7 @@ const MgPanel$1 = /*@__PURE__*/ proxyCustomElement(class MgPanel extends HTMLEle
          * Render collapse button
          * @returns collpase button
          */
-        this.renderCollapseButton = () => (h("mg-button", { onClick: this.handleCollapseButton, variant: "flat", "aria-expanded": this.expanded.toString(), "aria-controls": `${this.identifier}-content`, disabled: this.expandToggleDisabled, isIcon: this.expandToggleDisplay === 'icon', label: this.panelTitle }, h("span", { class: "mg-c-panel__collapse-button-content" }, h("mg-icon", { icon: "chevron-up", class: { 'mg-c-panel__collapse-button-icon': true, 'mg-c-panel__collapse-button-icon--reverse': !this.expanded } }), !this.isEditing && this.expandToggleDisplay !== 'icon' && this.panelTitle)));
+        this.renderCollapseButton = () => (h("mg-button", { onClick: this.handleCollapseButton, variant: "flat", "aria-expanded": this.expanded.toString(), "aria-controls": `${this.identifier}-content`, disabled: this.expandToggleDisabled, isIcon: this.expandToggleDisplay === 'icon', label: this.expandToggleDisplay === 'icon' ? this.panelTitle : undefined }, h("span", { class: "mg-c-panel__collapse-button-content" }, h("mg-icon", { icon: "chevron-up", class: { 'mg-c-panel__collapse-button-icon': true, 'mg-c-panel__collapse-button-icon--reverse': !this.expanded } }), !this.isEditing && this.expandToggleDisplay !== 'icon' && (this.hasPanelTitleSlot() ? h("slot", { name: "panel-title" }) : this.panelTitle))));
         /**
          * Render edit button
          * @returns edit Button
@@ -141,7 +148,8 @@ const MgPanel$1 = /*@__PURE__*/ proxyCustomElement(class MgPanel extends HTMLEle
          */
         this.renderTitle = () => {
             const elementsToRender = [this.renderCollapseButton()];
-            if (this.titleEditable) {
+            // Add edit functionality only if not using slot and title is editable
+            if (this.titleEditable && !this.hasPanelTitleSlot()) {
                 if (!this.isEditing)
                     elementsToRender.push(this.renderEditButton());
                 else
@@ -167,14 +175,24 @@ const MgPanel$1 = /*@__PURE__*/ proxyCustomElement(class MgPanel extends HTMLEle
         }
     }
     validatePanelTitle(newValue) {
-        if (!isValidString(newValue))
-            throw new Error(`<mg-panel> prop "panelTitle" is required and must be a string. Passed value: ${toString(newValue)}.`);
-        this.titleChange.emit(newValue);
+        if (newValue !== undefined) {
+            if (!isValidString(newValue)) {
+                throw new Error(`<mg-panel> prop "panelTitle" must be a string. Passed value: ${toString(newValue)}.`);
+            }
+            else {
+                this.titleChange.emit(newValue);
+            }
+        }
     }
     validateTitlePattern(newValue) {
         if (newValue !== undefined && !this.titleEditable)
             throw new Error(`<mg-panel> prop "titleEditable" must be set to "true".`);
     }
+    validateTitleEditable(newValue) {
+        if (newValue && this.hasPanelTitleSlot()) {
+            throw new Error(`<mg-panel> prop "titleEditable" cannot be used with panel-title slot.`);
+        }
+    }
     validateTitlePosition(newValue) {
         if (!titlePositions.includes(newValue))
             throw new Error(`<mg-panel> prop "titlePosition" must be one of: ${titlePositions.join(', ')}. Passed value: ${toString(newValue)}.`);
@@ -187,6 +205,9 @@ const MgPanel$1 = /*@__PURE__*/ proxyCustomElement(class MgPanel extends HTMLEle
             throw new Error(`<mg-panel> prop "expandToggleDisplay" must be one of: ${expandToggleDisplays.join(', ')}. Passed value: ${toString(newValue)}.`);
         if (newValue === 'icon' && this.titleEditable)
             this.titleEditable = false;
+        if (newValue === 'icon' && this.hasPanelTitleSlot()) {
+            throw new Error(`<mg-panel> prop "expandToggleDisplay" cannot be "icon" when panel-title slot is used.`);
+        }
     }
     /*************
      * Lifecycle *
@@ -201,9 +222,15 @@ const MgPanel$1 = /*@__PURE__*/ proxyCustomElement(class MgPanel extends HTMLEle
         this.watchIdentifier(this.identifier);
         this.validateTitlePattern(this.titlePattern);
         this.validateTitlePattern(this.titlePatternErrorMessage);
-        this.validatePanelTitle(this.panelTitle);
+        // Only validate panelTitle if slot is not used
+        if (!this.hasPanelTitleSlot()) {
+            if (!isValidString(this.panelTitle))
+                throw new Error(`<mg-panel> prop "panelTitle" is required when panel-title slot is not used.`);
+            this.validatePanelTitle(this.panelTitle);
+        }
         this.validateExpandToggleDisplay(this.expandToggleDisplay);
         this.validateTitlePosition(this.titlePosition);
+        this.validateTitleEditable(this.titleEditable);
     }
     /**
      * Edit DOM after render
@@ -219,7 +246,7 @@ const MgPanel$1 = /*@__PURE__*/ proxyCustomElement(class MgPanel extends HTMLEle
      */
     render() {
         const headerId = `${this.identifier}-header`;
-        return (h("section", { key: '6d9b0759cf8d6a8e94a1a6598f45fc00288ca22a', class: this.classCollection.join(), id: this.identifier }, h("mg-card", { key: '21b0d991daf053506097333df58d3b98ec2e5b0e', shadow: this.shadow }, h("header", { key: 'abd9dbeb13d85c9a66aac13e7b32e6a83e2ded57', class: { 'mg-c-panel__header': true, 'mg-c-panel__header--reverse': this.titlePosition === 'right' }, id: headerId }, this.renderHeaderChildren()), h("article", { key: '23c74b70bd275fb18c853a1b7a0a4b4ff5a4c605', class: "mg-c-panel__content", id: `${this.identifier}-content`, "aria-labelledby": headerId, hidden: !this.expanded }, h("slot", { key: '15561936437c960768c4954f45df4045ac3dee03' })))));
+        return (h("section", { key: '3662204d763051c34ea13de4b7b3f7abc7914b81', class: this.classCollection.join(), id: this.identifier }, h("mg-card", { key: '46f113258172b1d040f65a4d312554b0c0551489', shadow: this.shadow }, h("header", { key: '1d7e7a48a5c4f89d141a5a7e46b220d4f9c082a5', class: { 'mg-c-panel__header': true, 'mg-c-panel__header--reverse': this.titlePosition === 'right' }, id: headerId }, this.renderHeaderChildren()), h("article", { key: 'ab0aec831cc79d982b7556d6e245c80ae2979083', class: "mg-c-panel__content", id: `${this.identifier}-content`, "aria-labelledby": headerId, hidden: !this.expanded }, h("slot", { key: 'e831573fe9d5ff783073d123b7e2a54baad73bfc' })))));
     }
     get element() { return this; }
     static get watchers() { return {
@@ -227,6 +254,7 @@ const MgPanel$1 = /*@__PURE__*/ proxyCustomElement(class MgPanel extends HTMLEle
         "panelTitle": ["validatePanelTitle"],
         "titlePattern": ["validateTitlePattern"],
         "titlePatternErrorMessage": ["validateTitlePattern"],
+        "titleEditable": ["validateTitleEditable"],
         "titlePosition": ["validateTitlePosition"],
         "expanded": ["handleExpanded"],
         "expandToggleDisplay": ["validateExpandToggleDisplay"]
@@ -251,6 +279,7 @@ const MgPanel$1 = /*@__PURE__*/ proxyCustomElement(class MgPanel extends HTMLEle
         "panelTitle": ["validatePanelTitle"],
         "titlePattern": ["validateTitlePattern"],
         "titlePatternErrorMessage": ["validateTitlePattern"],
+        "titleEditable": ["validateTitleEditable"],
         "titlePosition": ["validateTitlePosition"],
         "expanded": ["handleExpanded"],
         "expandToggleDisplay": ["validateExpandToggleDisplay"]

package/dist/components/mg-popover-content2.js

@@ -55,7 +55,7 @@ const MgPopoverContent = /*@__PURE__*/ proxyCustomElement(class MgPopoverContent
      * @returns HTML Element
      */
     render() {
-        return (h(Host, { key: '2746e72f636c1a702d2b15836343ca8503f233e5' }, h("mg-card", { key: '84e28550627969d4e15ded5a5f8b6d19584eb891', class: this.classCollection.join(), shadow: true }, this.closeButton && (h("mg-button", { key: 'f25c773593441597e81330997df3175cd9a963e4', "is-icon": true, variant: "flat", label: this.messages.general.close, onClick: this.handleCloseButton }, h("mg-icon", { key: '723f3d1e8a85356d7aa9be9c875b273d7c9c1f72', icon: "cross" }))), h("div", { key: '283316f2a66212d9afc128aaec3fb24e4a40c0eb', class: "mg-c-popover-content__title" }, h("slot", { key: 'a1839a9a3259ccb221b90e82f786eb0e7c3d2a19', name: "title" })), h("slot", { key: '708903013417e27f4a9ed9811fde886d6b697dec', name: "content" })), h("slot", { key: 'fad6024a2474ffd5f46925101baa0e6ab9f2e951', name: "arrow" })));
+        return (h(Host, { key: '054fc82954b39a488f7fe5cb391d89b5fa4a61fe' }, h("mg-card", { key: 'bb89bada37069b50295bd93d988667c3b85eada3', class: this.classCollection.join(), shadow: true }, this.closeButton && (h("mg-button", { key: 'a59d6610574b964be1e2ce34ccd8e31c1395b6ff', "is-icon": true, variant: "flat", label: this.messages.general.close, onClick: this.handleCloseButton }, h("mg-icon", { key: '5bcc9e4eb21396f4fc66a6f1e4d6c5cdf68ec1f4', icon: "cross" }))), h("div", { key: '57be2022f3b61220e1249faeaf2acee9960027fe', class: "mg-c-popover-content__title" }, h("slot", { key: 'c7870e86a9f105cf6b9d4520c77874bce9235d72', name: "title" })), h("slot", { key: '5af8462232625d9c7d694bab46351d5e646f62ca', name: "content" })), h("slot", { key: '599863410dd7d751e82c440cd6c4fb7f2c48d9f3', name: "arrow" })));
     }
     get element() { return this; }
     static get style() { return mgPopoverContentCss; }

package/dist/components/mg-popover2.js

@@ -251,7 +251,7 @@ const MgPopover = /*@__PURE__*/ proxyCustomElement(class MgPopover extends HTMLE
      * @returns HTML Element
      */
     render() {
-        return (h(Host, { key: '7ea28f19a5a61f6191c2aece439e85da8f067270' }, h("slot", { key: 'aa6a627b90246ca327e2971329ab58b02eeb1d04' }), h("slot", { key: '1851353a6b4de659d6027a0bf3ba5f2120f7137d', name: "content" })));
+        return (h(Host, { key: '2c1506b8e2da100519aeeae75fc5c378a81c473c' }, h("slot", { key: 'f9aea885e8cbc168614c05761829f0a0740eba9e' }), h("slot", { key: 'fa6106a660a73b3761d4783f8d46d401c47b4eb6', name: "content" })));
     }
     get element() { return this; }
     static get watchers() { return {