@mgdis/mg-components 6.13.1 → 6.15.0

package/dist/components/mg-card2.js

@@ -1,25 +1,77 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { C as ClassList } from './index2.js';
 
-const mgCardCss = "/*!\n * @prop --mg-c-card-overflow: Defines the overflow property for the card. Unset by default, fallback on `--mg-c-card-overflow-default`.\n * @prop --mg-c-card-overflow-default: Defines the default overflow property for the card. Unset by default.\n * @prop --mg-c-card-min-width: Defines the min-width property for the card. Unset by default.\n * @prop --mg-c-card-max-width: Defines the max-width property for the card. Unset by default.\n * @prop --mg-c-card-spacing: Defines the padding property for the card. Unset by default, fallback on `--mg-c-card-spacing-default`.\n * @prop --mg-c-card-spacing-default: Defines the default padding property for the card. Default value: `--mg-b-size-16`.\n * @prop --mg-c-card-border: Defines the border property for the card. Unset by default, fallback on `--mg-c-card-border-default`.\n * @prop --mg-c-card-border-default: Defines the default border property for the card. Default value: `var(--mg-b-size-border) solid color-mix(in srgb, var(--mg-b-color-dark), transparent 95%)`.\n * @prop --mg-c-card-border-radius: Defines the border radius property for the card. Unset by default, fallback on `--mg-c-card-border-radius-default`.\n * @prop --mg-c-card-border-radius-default: Defines the default border radius property for the card. Default value: `--mg-b-size-radius`.\n * @prop --mg-c-card-color-background: Defines the background property for the card. Unset by default, fallback on `--mg-c-card-color-background-default`.\n * @prop --mg-c-card-color-background-default: Defines the default background property for the card. Default value: `--mg-b-color-light`.\n * @prop --mg-c-card-box-shadow: Defines the box shadow property for the card. Unset by default, fallback on `--mg-c-card-box-shadow-default`.\n * @prop --mg-c-card-box-shadow-default: Defines the default box shadow property for the card. Default value: `--mg-b-box-shadow`.\n */.mg-c-card{position:relative;z-index:inherit;overflow:var(--mg-c-card-overflow, var(--mg-c-card-overflow-default));width:100%;min-width:var(--mg-c-card-min-width);max-width:var(--mg-c-card-max-width);box-sizing:border-box;padding:var(--mg-c-card-spacing, var(--mg-c-card-spacing-default));border:var(--mg-c-card-border, var(--mg-c-card-border-default));border-radius:var(--mg-c-card-border-radius, var(--mg-c-card-border-radius-default));background:var(--mg-c-card-color-background, var(--mg-c-card-color-background-default));box-shadow:var(--mg-c-card-box-shadow, var(--mg-c-card-box-shadow-default))}.mg-c-card ::slotted(*:not(mg-panel,mg-message,mg-modal)){--mg-c-card-border:var(--mg-c-card-border-default);--mg-c-card-spacing:var(--mg-c-card-spacing-default);--mg-c-card-border-radius:var(--mg-c-card-border-radius-default);--mg-c-card-color-background:var(--mg-c-card-color-background-default);--mg-c-card-box-shadow:var(--mg-c-card-box-shadow-default);--mg-c-card-max-width:unset;--mg-c-card-min-width:unset}";
+/**
+ * List of all possibles radius size
+ */
+const radiusSizes = ['xsmall', 'small', 'medium'];
+
+const mgCardCss = "/*!\n * @prop --mg-c-card-overflow: Defines the overflow property for the card. Unset by default, fallback on `--mg-c-card-overflow-default`.\n * @prop --mg-c-card-overflow-default: Defines the default overflow property for the card. Unset by default.\n * @prop --mg-c-card-min-width: Defines the min-width property for the card. Unset by default.\n * @prop --mg-c-card-max-width: Defines the max-width property for the card. Unset by default.\n * @prop --mg-c-card-spacing: Defines the padding property for the card. Unset by default, fallback on `--mg-c-card-spacing-default`.\n * @prop --mg-c-card-spacing-default: Defines the default padding property for the card. Default value: `--mg-b-size-16`.\n * @prop --mg-c-card-border: Defines the border property for the card. Unset by default, fallback on `--mg-c-card-border-default`.\n * @prop --mg-c-card-border-default: Defines the default border property for the card. Default value: `var(--mg-b-size-border) solid var(--mg-b-color-neutral-30)`.\n * @prop --mg-c-card-border-radius: Defines the border radius property for the card. Unset by default, fallback on `--mg-c-card-border-radius-default`.\n * @prop --mg-c-card-border-radius-default: Defines the default border radius property for the card. Default value: `--mg-b-size-12`.\n * @prop --mg-c-card-color-background: Defines the background property for the card. Unset by default, fallback on `--mg-c-card-color-background-default`.\n * @prop --mg-c-card-color-background-default: Defines the default background property for the card. Default value: `--mg-b-color-light`.\n * @prop --mg-c-card-box-shadow: Defines the box shadow property for the card. Unset by default, fallback on `--mg-c-card-box-shadow-default`.\n * @prop --mg-c-card-box-shadow-default: Defines the default box shadow property for the card. Default value: `--mg-b-box-shadow`.\n */.mg-c-card{position:relative;z-index:inherit;overflow:var(--mg-c-card-overflow, var(--mg-c-card-overflow-default));width:100%;min-width:var(--mg-c-card-min-width);max-width:var(--mg-c-card-max-width);box-sizing:border-box;padding:var(--mg-c-card-spacing, var(--mg-c-card-spacing-default));border:var(--mg-c-card-border, var(--mg-c-card-border-default));border-radius:var(--mg-c-card-border-radius, var(--mg-c-card-border-radius-default));background:var(--mg-c-card-color-background, var(--mg-c-card-color-background-default))}.mg-c-card ::slotted(*:not(mg-panel,mg-message,mg-modal)){--mg-c-card-border:var(--mg-c-card-border-default);--mg-c-card-spacing:var(--mg-c-card-spacing-default);--mg-c-card-border-radius:var(--mg-c-card-border-radius-default);--mg-c-card-color-background:var(--mg-c-card-color-background-default);--mg-c-card-box-shadow:var(--mg-c-card-box-shadow-default);--mg-c-card-max-width:unset;--mg-c-card-min-width:unset}.mg-c-card.mg-c-card--shadow{--mg-c-card-border:var(--mg-b-color-neutral-20);box-shadow:var(--mg-c-card-box-shadow, var(--mg-c-card-box-shadow-default))}.mg-c-card.mg-c-card--radius-xsmall{--mg-c-card-border-radius:var(--mg-b-size-4)}.mg-c-card.mg-c-card--radius-small{--mg-c-card-border-radius:var(--mg-b-size-8)}";
 
 const MgCard = /*@__PURE__*/ proxyCustomElement(class MgCard extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
+        /**
+         * Add box-shadow style
+         */
+        this.shadow = false;
+        /**
+         * Define the border radius size
+         */
+        this.radiusSize = 'medium';
+        /**
+         * Component classes
+         */
+        this.classCollection = new ClassList(['mg-c-card']);
+    }
+    watchShadow(newValue) {
+        if (newValue) {
+            this.classCollection.add('mg-c-card--shadow');
+        }
+        else {
+            this.classCollection.delete('mg-c-card--shadow');
+        }
+    }
+    watchRadiusSize(newValue, oldValue) {
+        if (oldValue !== undefined && radiusSizes.includes(oldValue)) {
+            this.classCollection.delete(`mg-c-card--radius-${oldValue}`);
+        }
+        if (radiusSizes.includes(newValue)) {
+            this.classCollection.add(`mg-c-card--radius-${newValue}`);
+        }
     }
     /*************
      * Lifecycle *
      *************/
+    /**
+     * Check if component props are well configured on init
+     */
+    componentWillLoad() {
+        this.watchShadow(this.shadow);
+        this.watchRadiusSize(this.radiusSize);
+    }
     /**
      * Render
      * @returns HTML Element
      */
     render() {
-        return (h("div", { key: 'e59cabb09dbc28c148770b57de98f130c4479b75', class: "mg-c-card" }, h("slot", { key: 'b6e679317bddd23e73443c601992b7b344d6dc72' })));
+        return (h("div", { key: '6f83c5f7f9e0aacf502e407450cfdf039635a1f1', class: this.classCollection.join() }, h("slot", { key: '6bf8c02d3c3c9d0719e45af96b41f54289e31961' })));
     }
+    static get watchers() { return {
+        "shadow": ["watchShadow"],
+        "radiusSize": ["watchRadiusSize"]
+    }; }
     static get style() { return mgCardCss; }
-}, [1, "mg-card"]);
+}, [257, "mg-card", {
+        "shadow": [4],
+        "radiusSize": [1, "radius-size"],
+        "classCollection": [32]
+    }, undefined, {
+        "shadow": ["watchShadow"],
+        "radiusSize": ["watchRadiusSize"]
+    }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
@@ -36,6 +88,3 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { MgCard as M, defineCustomElement as d };
-//# sourceMappingURL=mg-card2.js.map
-
-//# sourceMappingURL=mg-card2.js.map

package/dist/components/mg-character-left.js

@@ -4,6 +4,3 @@ const MgCharacterLeft = MgCharacterLeft$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { MgCharacterLeft, defineCustomElement };
-//# sourceMappingURL=mg-character-left.js.map
-
-//# sourceMappingURL=mg-character-left.js.map

package/dist/components/mg-character-left2.js

@@ -47,7 +47,7 @@ const MgCharacterLeft = /*@__PURE__*/ proxyCustomElement(class MgCharacterLeft e
         "maxlength": ["validateMaxlength"]
     }; }
     static get style() { return mgCharacterLeftCss; }
-}, [2, "mg-character-left", {
+}, [258, "mg-character-left", {
         "identifier": [1],
         "characters": [1],
         "maxlength": [2]
@@ -71,6 +71,3 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { MgCharacterLeft as M, defineCustomElement as d };
-//# sourceMappingURL=mg-character-left2.js.map
-
-//# sourceMappingURL=mg-character-left2.js.map

package/dist/components/mg-details.js

@@ -1,105 +1,6 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { i as isValidString } from './index2.js';
-import { d as defineCustomElement$2 } from './mg-icon2.js';
-
-const mgDetailsCss = ".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-details-spacing: Defines the spacing between the summary and the details. Default value: `--mg-b-size-8`.\n */.mg-c-details summary{display:inline-flex;align-items:baseline;cursor:pointer;gap:var(--mg-b-size-16)}.mg-c-details summary::-webkit-details-marker{display:none}.mg-c-details.mg-c-details--empty-summary summary{gap:unset}.mg-c-details__toggle{display:flex;min-height:calc(var(--mg-b-font-size)*var(--mg-b-line-height));flex-shrink:0;align-items:center;align-self:flex-start;gap:var(--mg-b-size-4)}.mg-c-details__toggle-icon.mg-c-details__toggle-icon--reverse{transform:rotate(180deg)}.mg-c-details__details{margin-top:var(--mg-c-details-spacing)}@media (width < 43.75rem){.mg-c-details:not(.mg-c-details--empty-summary) .mg-c-details__toggle>span{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}}";
-
-const MgDetails$1 = /*@__PURE__*/ proxyCustomElement(class MgDetails extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.expandedChange = createEvent(this, "expanded-change", 7);
-        /**
-         * Hide summary element
-         */
-        this.hideSummary = false;
-        /**
-         * Define if details are diplayed
-         */
-        this.expanded = false;
-        /**
-         * Handle details toggle
-         */
-        this.handleToggle = () => {
-            this.expanded = this.details.open;
-        };
-    }
-    validateTitles(newValue) {
-        if (!isValidString(newValue)) {
-            throw new Error(`<mg-details> prop "toggleClosed" and "toggleOpened" is required and must be a valid string. Passed value: "toggleClosed='${this.toggleClosed}'" and "toggleOpened='${this.toggleOpened}'".`);
-        }
-    }
-    handleExpanded(newValue) {
-        this.expandedChange.emit(newValue);
-    }
-    /*************
-     * Lifecycle *
-     *************/
-    /**
-     * Check if component props are well configured on init
-     */
-    componentWillLoad() {
-        this.validateTitles(this.toggleClosed);
-        this.validateTitles(this.toggleOpened);
-        // Check if summary slot is empty
-        const summarySlot = this.element.querySelector('[slot="summary"]');
-        this.isEmptySummary = summarySlot === null || !isValidString(summarySlot.textContent);
-        // Add event listener to prevent default action on summary click
-        this.element.addEventListener('click', (event) => {
-            if (event.target.closest('[slot="summary"] mg-button, mg-button[slot="summary"]') !== null) {
-                event.preventDefault();
-            }
-        });
-    }
-    /**
-     * Render
-     * @returns HTML Element
-     */
-    render() {
-        return (h("details", { key: 'a06326b8ad16138a8dcc826a0e7dcce5b27aed6e', class: { 'mg-c-details': true, 'mg-c-details--empty-summary': this.isEmptySummary }, onToggle: this.handleToggle, open: this.expanded, ref: (el) => (this.details = el) }, h("summary", { key: '32517ae0572bfdd2b4abcf3b1a693df2bb9189d8' }, h("slot", { key: 'e06f303855a21ac4e6c20b2a405699429a38f978', name: "summary" }), h("span", { key: 'f9b1589d79e8f56d546fdb323faea37d6527ef78', class: "mg-c-details__toggle" }, h("mg-icon", { key: '5174b81f4a93f04690b8dcd3432d11cf56eaf7df', icon: "chevron-up", class: { 'mg-c-details__toggle-icon': true, 'mg-c-details__toggle-icon--reverse': !this.expanded } }), h("span", { key: 'b7c07eb8ec0b674c4233b2b6d6522a8afe9bcdfc', class: { 'mg-u-visually-hidden': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), h("div", { key: 'a88f7633a3aa775bb26e11788469d9f51764c223', class: "mg-c-details__details" }, h("slot", { key: 'd87ba0c67e7730436b9aff8edf1b04dcd0528fc1', name: "details" }))));
-    }
-    get element() { return this; }
-    static get watchers() { return {
-        "toggleClosed": ["validateTitles"],
-        "toggleOpened": ["validateTitles"],
-        "expanded": ["handleExpanded"]
-    }; }
-    static get style() { return mgDetailsCss; }
-}, [1, "mg-details", {
-        "toggleClosed": [1, "toggle-closed"],
-        "toggleOpened": [1, "toggle-opened"],
-        "hideSummary": [4, "hide-summary"],
-        "expanded": [1028]
-    }, undefined, {
-        "toggleClosed": ["validateTitles"],
-        "toggleOpened": ["validateTitles"],
-        "expanded": ["handleExpanded"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["mg-details", "mg-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "mg-details":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, MgDetails$1);
-            }
-            break;
-        case "mg-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-defineCustomElement$1();
+import { M as MgDetails$1, d as defineCustomElement$1 } from './mg-details2.js';
 
 const MgDetails = MgDetails$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { MgDetails, defineCustomElement };
-//# sourceMappingURL=mg-details.js.map
-
-//# sourceMappingURL=mg-details.js.map

package/dist/components/mg-details2.js

@@ -0,0 +1,99 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { i as isValidString } from './index2.js';
+import { d as defineCustomElement$1 } from './mg-icon2.js';
+
+const mgDetailsCss = ".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-details-spacing: Defines the spacing between the summary and the details. Default value: `--mg-b-size-8`.\n */.mg-c-details summary{display:inline-flex;align-items:baseline;cursor:pointer;gap:var(--mg-b-size-16)}.mg-c-details summary::-webkit-details-marker{display:none}.mg-c-details.mg-c-details--empty-summary summary{gap:unset}.mg-c-details__toggle{display:flex;min-height:calc(var(--mg-b-font-size)*var(--mg-b-line-height));flex-shrink:0;align-items:center;align-self:flex-start;gap:var(--mg-b-size-4)}.mg-c-details__toggle-icon.mg-c-details__toggle-icon--reverse{transform:rotate(180deg)}.mg-c-details__details{margin-top:var(--mg-c-details-spacing)}@media (width < 43.75rem){.mg-c-details:not(.mg-c-details--empty-summary) .mg-c-details__toggle>span{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}}";
+
+const MgDetails = /*@__PURE__*/ proxyCustomElement(class MgDetails extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.expandedChange = createEvent(this, "expanded-change", 7);
+        /**
+         * Hide summary element
+         */
+        this.hideSummary = false;
+        /**
+         * Define if details are diplayed
+         */
+        this.expanded = false;
+        /**
+         * Handle details toggle
+         */
+        this.handleToggle = () => {
+            this.expanded = this.details.open;
+        };
+    }
+    validateTitles(newValue) {
+        if (!isValidString(newValue)) {
+            throw new Error(`<mg-details> prop "toggleClosed" and "toggleOpened" is required and must be a valid string. Passed value: "toggleClosed='${this.toggleClosed}'" and "toggleOpened='${this.toggleOpened}'".`);
+        }
+    }
+    handleExpanded(newValue) {
+        this.expandedChange.emit(newValue);
+    }
+    /*************
+     * Lifecycle *
+     *************/
+    /**
+     * Check if component props are well configured on init
+     */
+    componentWillLoad() {
+        this.validateTitles(this.toggleClosed);
+        this.validateTitles(this.toggleOpened);
+        // Check if summary slot is empty
+        const summarySlot = this.element.querySelector('[slot="summary"]');
+        this.isEmptySummary = summarySlot === null || !isValidString(summarySlot.textContent);
+        // Add event listener to prevent default action on summary click
+        this.element.addEventListener('click', (event) => {
+            if (event.target.closest('[slot="summary"] mg-button, mg-button[slot="summary"]') !== null) {
+                event.preventDefault();
+            }
+        });
+    }
+    /**
+     * Render
+     * @returns HTML Element
+     */
+    render() {
+        return (h("details", { key: '4da17afd7a964a14b5b101bcfadc241be569d55a', class: { 'mg-c-details': true, 'mg-c-details--empty-summary': this.isEmptySummary }, onToggle: this.handleToggle, open: this.expanded, ref: (el) => (this.details = el) }, h("summary", { key: '515d6c4e117b547fe80a310fb90e114900f645e8' }, h("slot", { key: '0c9c0dcc47dd418e34e541d878bfc03ca137c68d', name: "summary" }), h("span", { key: 'c94f52994843b10c1161c0d85f38f8cb917ea806', class: "mg-c-details__toggle" }, h("mg-icon", { key: '9421452572af3deb03146a8dfd189369b249ba2d', icon: "chevron-up", class: { 'mg-c-details__toggle-icon': true, 'mg-c-details__toggle-icon--reverse': !this.expanded } }), h("span", { key: 'dbfb0b34da00e37f55ec07236611c2babdd6b7c5', class: { 'mg-u-visually-hidden': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), h("div", { key: '1b18b65a98e39a8663fa5d7e51eef5fbe2b92f76', class: "mg-c-details__details" }, h("slot", { key: '81c213594b1b67747db439624090784eaa5e6fcd', name: "details" }))));
+    }
+    get element() { return this; }
+    static get watchers() { return {
+        "toggleClosed": ["validateTitles"],
+        "toggleOpened": ["validateTitles"],
+        "expanded": ["handleExpanded"]
+    }; }
+    static get style() { return mgDetailsCss; }
+}, [257, "mg-details", {
+        "toggleClosed": [1, "toggle-closed"],
+        "toggleOpened": [1, "toggle-opened"],
+        "hideSummary": [4, "hide-summary"],
+        "expanded": [1028]
+    }, undefined, {
+        "toggleClosed": ["validateTitles"],
+        "toggleOpened": ["validateTitles"],
+        "expanded": ["handleExpanded"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["mg-details", "mg-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "mg-details":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, MgDetails);
+            }
+            break;
+        case "mg-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { MgDetails as M, defineCustomElement as d };

package/dist/components/mg-divider.js

@@ -4,6 +4,3 @@ const MgDivider = MgDivider$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { MgDivider, defineCustomElement };
-//# sourceMappingURL=mg-divider.js.map
-
-//# sourceMappingURL=mg-divider.js.map

package/dist/components/mg-divider2.js

@@ -26,7 +26,7 @@ const MgDivider = /*@__PURE__*/ proxyCustomElement(class MgDivider extends HTMLE
             } }));
     }
     static get style() { return mgDividerCss; }
-}, [1, "mg-divider", {
+}, [257, "mg-divider", {
         "fullWidth": [4, "full-width"]
     }]);
 function defineCustomElement() {
@@ -45,6 +45,3 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { MgDivider as M, defineCustomElement as d };
-//# sourceMappingURL=mg-divider2.js.map
-
-//# sourceMappingURL=mg-divider2.js.map

package/dist/components/mg-form.js

@@ -244,7 +244,7 @@ const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class MgForm extends HTMLEleme
      * @returns HTML Element
      */
     render() {
-        return (h("form", { key: '6330085d26ecd493eab3fd0fd63344ce1a00e589', class: this.classCollection.join(), id: this.identifier, name: this.name, onSubmit: this.handleFormSubmit, role: this.ariaRole }, this.requiredMessageText && h("p", { key: '386adf6d3ee2d0d8ec6adf791da8f21a6fb6ac11', innerHTML: this.requiredMessageText }), h("slot", { key: '5349f004f644b4e02e1c5da27f49df4efacac016' }), !this.readonly && !this.disabled && h("slot", { key: '2ed9817b514033c89933751a3dc00ed668331b68', name: "actions" })));
+        return (h("form", { key: 'd6842c8daef22c0a3747147d99d7bf6920f7623e', class: this.classCollection.join(), id: this.identifier, name: this.name, onSubmit: this.handleFormSubmit, role: this.ariaRole }, this.requiredMessageText && h("p", { key: 'cf5d9f380dfce313811df2dec390543ee19dffcb', innerHTML: this.requiredMessageText }), h("slot", { key: '2f03dd98f92469bc34b8bf9b8a8ef79cf8adf25c' }), !this.readonly && !this.disabled && h("slot", { key: 'c0f38f24c59d70703accf5fc63a2b58a92a952f0', name: "actions" })));
     }
     get element() { return this; }
     static get watchers() { return {
@@ -256,7 +256,7 @@ const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class MgForm extends HTMLEleme
         "disabled": ["handleAttributeChange"]
     }; }
     static get style() { return mgFormCss; }
-}, [1, "mg-form", {
+}, [257, "mg-form", {
         "identifier": [1],
         "name": [1],
         "readonly": [4],
@@ -297,6 +297,3 @@ const MgForm = MgForm$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { MgForm, defineCustomElement };
-//# sourceMappingURL=mg-form.js.map
-
-//# sourceMappingURL=mg-form.js.map

package/dist/components/mg-icon.js

@@ -4,6 +4,3 @@ const MgIcon = MgIcon$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { MgIcon, defineCustomElement };
-//# sourceMappingURL=mg-icon.js.map
-
-//# sourceMappingURL=mg-icon.js.map