@mgdis/mg-components 6.17.0 → 6.18.0

package/dist/mg-components/{p-c5da335e.entry.js → p-952288bd.entry.js}

@@ -1 +1 @@
-import{r as t,c as s,f as i,h as e,a}from"./p-T6kOJXP1.js";import{C as h,t as o}from"./p-WtiuOkLj.js";import{i as r}from"./p-CNX6lq0x.js";const n=["info","warning","success","danger"],c=["bar-left","background"],l=class{constructor(i){t(this,i),this.componentShow=s(this,"component-show",3),this.componentHide=s(this,"component-hide",3),this.componentClose=s(this,"component-close",3),this.classCloseButton="mg-c-alert--close-button",this.storedTimer=null,this.isFocused=!1,this.isHovered=!1,this.variant="info",this.variantStyle="bar-left",this.classCollection=new h(["mg-c-alert"]),this.hasActions=!1,this.setTimer=()=>{this.storedTimer=setTimeout((()=>this.element.hidden=!0),1e3*this.delay)},this.clearTimer=()=>{clearTimeout(this.storedTimer)},this.timerEvents=t=>{this.clearTimer();const s="mouseenter"===t.type;this[s?"isHovered":"isFocused"]=!0,this.element.addEventListener(s?"mouseleave":"focusout",(t=>{this["mouseleave"===t.type?"isHovered":"isFocused"]=!1,this.isFocused||this.isHovered||this.setTimer()}),{once:!0})},this.handleClose=()=>{this.element.hidden=!0,this.componentClose.emit()}}watchDelay(t){if(void 0!==t&&t<2)throw new Error(`<mg-alert> prop "delay" must be greater than 2 seconds. Passed value: ${o(t)}.`)}watchVariant(t){if(t&&!n.includes(t))throw new Error(`<mg-alert> prop "variant" must be one of: ${n.join(", ")}. Passed value: ${o(t)}.`)}watchVariantStyle(t){if(t&&!c.includes(t))throw new Error(`<mg-alert> prop "variantStyle" must be one of: ${c.join(", ")}. Passed value: ${o(t)}.`)}watchHidden(t){"string"==typeof t&&""===t&&(t=!0),t?(this.componentHide.emit(),["focusin","mouseenter"].forEach((t=>{this.element.removeEventListener(t,this.timerEvents)})),this.clearTimer()):(this.componentShow.emit(),this.delay>1&&(this.setTimer(),["focusin","mouseenter"].forEach((t=>{this.element.addEventListener(t,this.timerEvents)})))),i(this)}componentWillLoad(){this.messages=r(this.element).messages,this.watchVariant(this.variant),this.watchVariantStyle(this.variantStyle),this.watchDelay(this.delay),this.watchHidden(this.element.hidden),this.hasActions=null!==this.element.querySelector('[slot="actions"]'),this.hasActions||this.classCollection.add(this.classCloseButton)}render(){return e("mg-message",{key:"626afcfe4c86dacff9860d2515827ae5aa6b7234",class:this.classCollection.join(),role:["info","success"].includes(this.variant)?"status":"alert",variant:this.variant,variantStyle:this.variantStyle},e("slot",{key:"bc7d72c21dcf36c9012e144253ce2b3c6ebc14ed"}),this.hasActions?e("span",{slot:"actions"},e("slot",{name:"actions"})):e("span",{class:"mg-c-alert__close-button"},e("mg-button",{"is-icon":!0,variant:"flat",label:this.messages.alert.closeButton,onClick:this.handleClose},e("mg-icon",{icon:"cross"}))))}get element(){return a(this)}static get watchers(){return{delay:["watchDelay"],variant:["watchVariant"],variantStyle:["watchVariantStyle"],hidden:["watchHidden"]}}};l.style=".mg-c-alert__close-button{position:absolute;top:0;right:0}.mg-c-alert.mg-c-alert--close-button{--mg-c-card-spacing:0 var(--mg-b-size-min-height) 0 0}";export{l as mg_alert}
+import{r as t,c as s,f as i,h as e,a}from"./p-T6kOJXP1.js";import{C as h,t as o}from"./p-C7xjtdiw.js";import{i as r}from"./p-CNX6lq0x.js";const n=["info","warning","success","danger"],c=["bar-left","background"],l=class{constructor(i){t(this,i),this.componentShow=s(this,"component-show",3),this.componentHide=s(this,"component-hide",3),this.componentClose=s(this,"component-close",3),this.classCloseButton="mg-c-alert--close-button",this.storedTimer=null,this.isFocused=!1,this.isHovered=!1,this.variant="info",this.variantStyle="bar-left",this.classCollection=new h(["mg-c-alert"]),this.hasActions=!1,this.setTimer=()=>{this.storedTimer=setTimeout((()=>this.element.hidden=!0),1e3*this.delay)},this.clearTimer=()=>{clearTimeout(this.storedTimer)},this.timerEvents=t=>{this.clearTimer();const s="mouseenter"===t.type;this[s?"isHovered":"isFocused"]=!0,this.element.addEventListener(s?"mouseleave":"focusout",(t=>{this["mouseleave"===t.type?"isHovered":"isFocused"]=!1,this.isFocused||this.isHovered||this.setTimer()}),{once:!0})},this.handleClose=()=>{this.element.hidden=!0,this.componentClose.emit()}}watchDelay(t){if(void 0!==t&&t<2)throw new Error(`<mg-alert> prop "delay" must be greater than 2 seconds. Passed value: ${o(t)}.`)}watchVariant(t){if(t&&!n.includes(t))throw new Error(`<mg-alert> prop "variant" must be one of: ${n.join(", ")}. Passed value: ${o(t)}.`)}watchVariantStyle(t){if(t&&!c.includes(t))throw new Error(`<mg-alert> prop "variantStyle" must be one of: ${c.join(", ")}. Passed value: ${o(t)}.`)}watchHidden(t){"string"==typeof t&&""===t&&(t=!0),t?(this.componentHide.emit(),["focusin","mouseenter"].forEach((t=>{this.element.removeEventListener(t,this.timerEvents)})),this.clearTimer()):(this.componentShow.emit(),this.delay>1&&(this.setTimer(),["focusin","mouseenter"].forEach((t=>{this.element.addEventListener(t,this.timerEvents)})))),i(this)}componentWillLoad(){this.messages=r(this.element).messages,this.watchVariant(this.variant),this.watchVariantStyle(this.variantStyle),this.watchDelay(this.delay),this.watchHidden(this.element.hidden),this.hasActions=null!==this.element.querySelector('[slot="actions"]'),this.hasActions||this.classCollection.add(this.classCloseButton)}render(){return e("mg-message",{key:"4b974a10812e527a2c481ec00f22324ab490a135",class:this.classCollection.join(),role:["info","success"].includes(this.variant)?"status":"alert",variant:this.variant,variantStyle:this.variantStyle},e("slot",{key:"9133a3cca56d67e75e8c3f018c52838c31e908f2"}),this.hasActions?e("span",{slot:"actions"},e("slot",{name:"actions"})):e("span",{class:"mg-c-alert__close-button"},e("mg-button",{"is-icon":!0,variant:"flat",label:this.messages.alert.closeButton,onClick:this.handleClose},e("mg-icon",{icon:"cross"}))))}get element(){return a(this)}static get watchers(){return{delay:["watchDelay"],variant:["watchVariant"],variantStyle:["watchVariantStyle"],hidden:["watchHidden"]}}};l.style=".mg-c-alert__close-button{position:absolute;top:0;right:0}.mg-c-alert.mg-c-alert--close-button{--mg-c-card-spacing:0 var(--mg-b-size-min-height) 0 0}";export{l as mg_alert}

package/dist/mg-components/{p-WtiuOkLj.js → p-C7xjtdiw.js}

@@ -1 +1 @@
-class t{classes;constructor(t=[]){this.classes=t}add=t=>{this.has(t)||this.classes.push(t)};delete=t=>{const s=this.classes.indexOf(t);s>-1&&this.classes.splice(s,1)};has=t=>this.classes.includes(t);join=()=>this.classes.join(" ")}const s=t=>"object"==typeof t&&!Array.isArray(t)&&null!==t,e=(t,r,i)=>{if(!s(t)||"string"!=typeof r)return i;const[n,...o]=r.split(".");return o.length?e(t[n],o.join("."),i):t[n]??i},r=t=>Array.isArray(t)&&t.every((t=>"string"==typeof t)),i=t=>"string"==typeof t&&""!==t.trim(),n=t=>"object"==typeof t?JSON.stringify(t):String(t),o=t=>"string"==typeof t?t.toLocaleLowerCase().normalize("NFD").replaceAll(/[\u0300-\u036f]/g,""):t,a=(t="",s=10)=>{const e=new Uint8Array(s);crypto.getRandomValues(e);const r=Array.from(e).map((t=>t.toString(16).padStart(2,"0"))).join("").slice(0,s);return""!==t?`${t}-${r}`:r},h=t=>i(t)&&null!==/^([a-z][a-z0-9]*)(-[a-z0-9]+)*$/.exec(t),f=t=>{let e;return"string"==typeof t?e=t:Boolean(t)&&"object"==typeof t&&(s(t)||Array.isArray(t))?e=JSON.stringify(t):null!=t&&"boolean"!=typeof t&&"object"!=typeof t&&(e=String(t)),e?e.replace(/[A-Z]+(?![a-z])|[A-Z]/g,((t,s)=>(s>0?"-":"")+t.toLowerCase())).replace(/[^a-z0-9-]+/g,"-").replace(/--+/g,"-").replace(/(?:^-)|(?:-$)/g,""):e},u=async t=>{if(t)return t()},c={FIRST:"first",NEXT:"next",PREVIOUS:"previous",LAST:"last"};class y{items=[];total;top=10;next;baseIndex=1;constructor(t){if(!s(t))throw new Error("Page - init must match IPage type.");Array.isArray(t.items)&&(this.items=t.items),"number"==typeof t.top&&(this.top=t.top),this.total="number"==typeof t.total?t.total:this.items.length,this.next=t.next}getIndexFromCursor=(t="first",s)=>{if(!Array.isArray(this.items)||!this.items.length)return null;const e=this.items.length-this.baseIndex;let r,i=0;if(["previous","next"].includes(t)&&s){const t=this.items.findIndex((t=>JSON.stringify(t)===JSON.stringify(s)));if(-1===t)return 0;i=t}return r="first"===t?0:"last"===t?e:"previous"===t?JSON.stringify(this.items[i])===JSON.stringify(this.items[0])?e:i-this.baseIndex:"next"===t?JSON.stringify(this.items[i])===JSON.stringify(this.items[e])?0:i+this.baseIndex:0,r}}class p{items=[];#t=10;#s;#e;constructor(t,e){Array.isArray(t)&&(this.items=t),e&&(["string","function"].includes(typeof e.next)||s(e.next)&&URL.canParse(e.next))&&(this.#s=e.next),"number"==typeof e?.top&&(this.#t=e.top),"number"==typeof e?.total&&(this.#e=e.total)}getPage=(t=0,s)=>{const e="function"==typeof s?this.items.filter(s):this.items;let r;return this.#s?r=this.#s:e.length>t+this.#t&&(r=()=>this.getPage(t+this.#t,s)),new y({items:e.slice(t,t+this.#t),total:this.#e,top:this.#t,next:r})}}const l=/^\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])$/,g=t=>t.toISOString().split("T")[0],b=(t,s)=>s.includes(t?.tagName.toLowerCase()),m='a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"]), [identifier], mg-button',S=t=>"number"==typeof t&&!Number.isNaN(t),d=t=>[t,...x(t),...A(t)],x=(t,s=[])=>{if(t.self!==t.top)try{const e=t.parent;return e?(s.push(e),x(e,s)):s}catch(t){return console.error("Different hosts between iframes:",t),s}return s},A=(t,s=[])=>{if(t.frames.length>0)for(const e of Array.from(t.frames))s.push(e),A(e,s);return s};export{t as C,p as P,c as a,r as b,i as c,y as d,S as e,f,e as g,a as h,s as i,h as j,b as k,o as l,l as m,u as n,g as o,d as p,m as q,n as t}
+class t{classes;constructor(t=[]){this.classes=t}add=t=>{this.has(t)||this.classes.push(t)};delete=t=>{const s=this.classes.indexOf(t);s>-1&&this.classes.splice(s,1)};has=t=>this.classes.includes(t);join=()=>this.classes.join(" ")}const s=t=>"object"==typeof t&&!Array.isArray(t)&&null!==t,e=(t,r,i)=>{if(!s(t)||"string"!=typeof r)return i;const[n,...o]=r.split(".");return o.length?e(t[n],o.join("."),i):t[n]??i},r=t=>Array.isArray(t)&&t.every((t=>"string"==typeof t)),i=t=>"string"==typeof t&&""!==t.trim(),n=t=>"object"==typeof t?JSON.stringify(t):String(t),o=t=>"string"==typeof t?t.toLocaleLowerCase().normalize("NFD").replaceAll(/[\u0300-\u036f]/g,""):t,a=(t="",s=10)=>{const e=new Uint8Array(s);crypto.getRandomValues(e);const r=Array.from(e).map((t=>t.toString(16).padStart(2,"0"))).join("").slice(0,s);return""!==t?`${t}-${r}`:r},h=t=>i(t)&&null!==/^([a-z][a-z0-9]*)(-[a-z0-9]+)*$/.exec(t),f=t=>{let e;return"string"==typeof t?e=t:Boolean(t)&&"object"==typeof t&&(s(t)||Array.isArray(t))?e=JSON.stringify(t):null!=t&&"boolean"!=typeof t&&"object"!=typeof t&&(e=String(t)),e?e.replace(/[A-Z]+(?![a-z])|[A-Z]/g,((t,s)=>(s>0?"-":"")+t.toLowerCase())).replace(/[^a-z0-9-]+/g,"-").replace(/--+/g,"-").replace(/(?:^-)|(?:-$)/g,""):e},u=async t=>{if(t)return t()},c={FIRST:"first",NEXT:"next",PREVIOUS:"previous",LAST:"last"};class y{items=[];total;top=10;next;baseIndex=1;constructor(t){if(!s(t))throw new Error("Page - init must match IPage type.");Array.isArray(t.items)&&(this.items=t.items),"number"==typeof t.top&&(this.top=t.top),this.total="number"==typeof t.total?t.total:this.items.length,this.next=t.next}getIndexFromCursor=(t="first",s)=>{if(!Array.isArray(this.items)||!this.items.length)return null;const e=this.items.length-this.baseIndex;let r,i=0;if(["previous","next"].includes(t)&&s){const t=this.items.findIndex((t=>JSON.stringify(t)===JSON.stringify(s)));if(-1===t)return 0;i=t}return r="first"===t?0:"last"===t?e:"previous"===t?JSON.stringify(this.items[i])===JSON.stringify(this.items[0])?e:i-this.baseIndex:"next"===t?JSON.stringify(this.items[i])===JSON.stringify(this.items[e])?0:i+this.baseIndex:0,r}}class p{items=[];#t=10;#s;#e;constructor(t,e){Array.isArray(t)&&(this.items=t),e&&(["string","function"].includes(typeof e.next)||s(e.next)&&URL.canParse(e.next))&&(this.#s=e.next),"number"==typeof e?.top&&(this.#t=e.top),"number"==typeof e?.total&&(this.#e=e.total)}getPage=(t=0,s)=>{const e="function"==typeof s?this.items.filter(s):this.items;let r;return this.#s?r=this.#s:e.length>t+this.#t&&(r=()=>this.getPage(t+this.#t,s)),new y({items:e.slice(t,t+this.#t),total:this.#e,top:this.#t,next:r})}}const l=/^\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])$/,g=t=>t.toISOString().split("T")[0],b=(t,s)=>s.includes(t?.tagName.toLowerCase()),m='a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"]), [identifier], mg-button',S=t=>"number"==typeof t&&!Number.isNaN(t),d=t=>[t,...x(t),...A(t)],x=(t,s=[])=>{if(t.self!==t.top)try{const e=t.parent;return e?(s.push(e),x(e,s)):s}catch(t){return console.error("Different hosts between iframes:",t),s}return s},A=(t,s=[])=>{if(t.frames.length>0)for(const e of Array.from(t.frames))s.push(e),A(e,s);return s};export{t as C,p as P,c as a,r as b,s as c,y as d,S as e,f,e as g,a as h,i,h as j,b as k,o as l,l as m,u as n,g as o,d as p,m as q,n as t}

package/dist/mg-components/p-D9V2v4n2.js

@@ -0,0 +1 @@
+const a=[2,4,16,"full"],s=["input","label"],t=["h1","h2","h3","h4","h5","h6"],l="mg-c-input--fieldset",i="mg-c-input--disabled",c="mg-c-input--readonly",e="mg-c-input--vertical-list";export{i as a,l as b,c,e as d,t as l,s as t,a as w}

package/dist/mg-components/p-f2cddd52.entry.js

@@ -0,0 +1 @@
+import{r as t,h as i,a as s}from"./p-T6kOJXP1.js";import{C as e,i as h}from"./p-C7xjtdiw.js";import{c as a}from"./p-D9V2v4n2.js";const r=class{constructor(i){t(this,i),this.name=this.identifier,this.legendHide=!1,this.legendBorderDisplay=!1,this.readonly=!1,this.disabled=!1,this.classCollection=new e(["mg-c-input--fieldset"]),this.checkValidity=()=>{var t;this.valid=!(this.mgInputs.some((t=>t.invalid))||(null===(t=this.errorMessage)||void 0===t?void 0:t.length)>0)},this.setMgInputs=()=>{this.mgInputs=Array.from(this.element.querySelectorAll("*")).filter((t=>t.nodeName.startsWith("MG-INPUT"))),this.mgInputs.forEach((t=>{this.readonly?t.readonly=!0:this.disabled?t.disabled=!0:t.addEventListener("input-valid",this.checkValidity)}))}}watchLegendBorderDisplay(t){if(t&&!h(this.legendHeading))throw new Error('<mg-fieldset> prop "legendBorderDisplay" must not be paired with the prop "legendHeading".')}watchReadonly(t){t?this.classCollection.add(a):this.classCollection.delete(a)}handleAttributeChange(){this.setMgInputs()}async setCustomValidity(t){this.errorMessage=h(t)?t:void 0,this.checkValidity()}async displayError(){this.readonly||this.mgInputs.forEach((t=>{t.displayError()}))}componentWillLoad(){this.watchReadonly(this.readonly),this.watchLegendBorderDisplay(this.legendBorderDisplay),this.setMgInputs()}componentDidLoad(){const t={childList:!0,subtree:!0};new MutationObserver((i=>{i.some((i=>Object.keys(t).includes(i.type)))&&this.setMgInputs()})).observe(this.element,t)}render(){return i("mg-input",{key:"b8b7c203bb2ed22cc9344389af5a6ae8d85af6d5",label:this.legend,identifier:this.identifier,class:this.classCollection.join(),labelOnTop:!this.legendHide,labelHeading:this.legendHeading,labelBorderDisplay:this.legendHeading&&this.legendBorderDisplay,labelHide:this.legendHide,inputsOnBottom:void 0!==this.legendHeading,tooltip:this.tooltip,tooltipPosition:"label",helpText:this.helpText,errorMessage:!this.valid&&h(this.errorMessage)?this.errorMessage:void 0},i("span",{key:"c0e7480b14b0a8e136dd951bdce7275b65b59b48",class:"mg-c-input__input-group"},i("slot",{key:"021e7b126cef9437e64622d8ef59219b09c06e9f"})))}get element(){return s(this)}static get watchers(){return{legendBorderDisplay:["watchLegendBorderDisplay"],readonly:["watchReadonly","handleAttributeChange"],disabled:["handleAttributeChange"]}}};export{r as mg_fieldset}

package/dist/mg-components/{p-397bf67b.entry.js → p-f6afaeb8.entry.js}

@@ -1 +1 @@
-import{r as t,h as e,a}from"./p-T6kOJXP1.js";import{i}from"./p-CNX6lq0x.js";import{c as r,t as s}from"./p-WtiuOkLj.js";const o=class{constructor(e){t(this,e),this.messageHide=!1}watchMessage(t){if(t&&!r(t))throw new Error(`<mg-loader> prop "message" must be a valid string. Passed value: ${s(t)}.`)}componentWillLoad(){this.messages=i(this.element).messages,this.watchMessage(this.message)}render(){return e("div",{key:"b74028455b7003824fa5618b1751d05a91ab7071",class:"mg-c-loader","aria-live":"polite"},e("mg-icon",{key:"204acdb8f881b348148020214c05269878852c4f",icon:"loader",spin:!0}),e("span",{key:"40f1792354df01ec9af61ab128575ea166f34cb5",class:{"mg-u-visually-hidden":this.messageHide}},this.message||this.messages.loader.inProgress))}get element(){return a(this)}static get watchers(){return{message:["watchMessage"]}}};o.style=".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}}:host{display:block}.mg-c-loader{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--mg-b-size-4);text-align:center}";export{o as mg_loader}
+import{r as t,h as e,a}from"./p-T6kOJXP1.js";import{i}from"./p-CNX6lq0x.js";import{i as r,t as s}from"./p-C7xjtdiw.js";const o=class{constructor(e){t(this,e),this.messageHide=!1}watchMessage(t){if(t&&!r(t))throw new Error(`<mg-loader> prop "message" must be a valid string. Passed value: ${s(t)}.`)}componentWillLoad(){this.messages=i(this.element).messages,this.watchMessage(this.message)}render(){return e("div",{key:"739b4cbacd8a8da056dbb1445c40fac2cf26766a",class:"mg-c-loader","aria-live":"polite"},e("mg-icon",{key:"95d3cbf26fcd6dbf0dad4853bf55aa66385f1aba",icon:"loader",spin:!0}),e("span",{key:"f6322cd3054d8976bd2ec24f86a2d6bb60ca7ae1",class:{"mg-u-visually-hidden":this.messageHide}},this.message||this.messages.loader.inProgress))}get element(){return a(this)}static get watchers(){return{message:["watchMessage"]}}};o.style=".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}}:host{display:block}.mg-c-loader{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--mg-b-size-4);text-align:center}";export{o as mg_loader}

package/dist/types/components/molecules/inputs/mg-input/mg-input.conf.d.ts

@@ -8,6 +8,11 @@ export type Width = (typeof widths)[number];
  */
 export declare const tooltipPositions: readonly ["input", "label"];
 export type TooltipPosition = (typeof tooltipPositions)[number];
+/**
+ * Possible label headings
+ */
+export declare const labelHeadings: readonly ["h1", "h2", "h3", "h4", "h5", "h6"];
+export type labelHeading = (typeof labelHeadings)[number];
 /**
  * Base interface for common methods
  */

package/dist/types/components/molecules/inputs/mg-input/mg-input.d.ts

@@ -1,4 +1,4 @@
-import { type TooltipPosition } from './mg-input.conf';
+import { type TooltipPosition, labelHeading } from './mg-input.conf';
 /**
  * @slot - Input content
  */
@@ -16,6 +16,9 @@ export declare class MgInput {
     private readonly classInput;
     private readonly classHasError;
     private readonly classLabelOnTop;
+    private readonly classHasHeading;
+    private readonly classLabelBorderDisplay;
+    private readonly classInputsOnBottom;
     /**************
      * Decorators *
      **************/
@@ -42,6 +45,18 @@ export declare class MgInput {
      */
     labelHide: boolean;
     watchLabelConfig(): void;
+    /**
+     * Define label heading, use to define label with associated semantic
+     * You must pair this mode with `labelOnTop`and `fieldset` class
+     */
+    labelHeading?: labelHeading;
+    watchlabelHeading(newValue: MgInput['labelHeading']): void;
+    /**
+     * Define if label border is visible
+     * You must pair this mode with `labelOnTop`and `fieldset` class
+     */
+    labelBorderDisplay: boolean;
+    watchLabelBorderDisplay(newValue: MgInput['labelBorderDisplay']): void;
     /**
      * Add a tooltip message next to the input
      */
@@ -65,6 +80,11 @@ export declare class MgInput {
      */
     helpText?: string;
     watchHelpText(newValue: MgInput['helpText']): void;
+    /**
+     * Display inputs after help-text and error message
+     */
+    inputsOnBottom?: boolean;
+    watchInputsOnBottom(newValue: MgInput['inputsOnBottom']): void;
     /**
      * Define aria-describedby ids to link with
      */
@@ -97,6 +117,12 @@ export declare class MgInput {
     /************
      * Methods *
      ************/
+    /**
+     * Update element aria-describedby
+     * @param element - element to update
+     * @param ariaDescribedbyIDs - ariaDescribedbyIDs references
+     */
+    private updateElementAriaDescribedby;
     /**
      * Render input label
      */
@@ -125,6 +151,11 @@ export declare class MgInput {
      * @returns mg-tooltip
      */
     private renderTooltip;
+    /**
+     * Get input container element
+     * @returns ordered elements
+     */
+    private inputContainerElements;
     /**
      * Render
      * @returns HTML Element

package/dist/types/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.d.ts

@@ -10,6 +10,7 @@ export declare class MgInputCheckbox implements Omit<MgInputCheckboxListProps, '
     private searchInput;
     private messages;
     private hasDisplayedError;
+    private customErrorMessage;
     private mode;
     private readonly baseClassName;
     private readonly classTypeMulti;
@@ -179,8 +180,9 @@ export declare class MgInputCheckbox implements Omit<MgInputCheckboxListProps, '
      * When used to set validity to `false`, you should use this method again to reset the validity to `true`.
      * @param valid - value indicating the validity
      * @param errorMessage - the error message to display
+     * @param errorMessageLock - lock the error message and validity state
      */
-    setError(valid: MgInputCheckbox['valid'], errorMessage: string): Promise<void>;
+    setError(valid: MgInputCheckbox['valid'], errorMessage?: string, errorMessageLock?: boolean): Promise<void>;
     /**
      * Reset value, validity and error state
      */
@@ -259,8 +261,7 @@ export declare class MgInputCheckbox implements Omit<MgInputCheckboxListProps, '
     private getSelectValuesButtonMessage;
     /**
      * Set input error message
-     * @param displayError - dispay error condition
-     * @param errorMessage - errorMessage override
+     * @param fromSetErrorContext - context come from `setError` method
      */
     private setErrorMessage;
     /**

package/dist/types/components/molecules/inputs/mg-input-combobox/mg-input-combobox.d.ts

@@ -13,6 +13,7 @@ export declare class MgInputCombobox {
     private popoverId;
     private messages;
     private hasDisplayedError;
+    private customErrorMessage;
     private handlerInProgress;
     private loadingAction;
     private debounce;
@@ -226,8 +227,9 @@ export declare class MgInputCombobox {
      * When used to set validity to `false`, you should use this method again to reset the validity to `true`.
      * @param valid - value indicating the validity
      * @param errorMessage - the error message to display
+     * @param errorMessageLock - lock the error message and validity state
      */
-    setError(valid: MgInputCombobox['valid'], errorMessage: string): Promise<void>;
+    setError(valid: MgInputCombobox['valid'], errorMessage?: string, errorMessageLock?: boolean): Promise<void>;
     /**
      * Reset value, validity and error state
      */
@@ -299,7 +301,7 @@ export declare class MgInputCombobox {
     private checkValidity;
     /**
      * Set input error message
-     * @param errorMessage - errorMessage override
+     * @param fromSetErrorContext - context come from `setError` method
      */
     private setErrorMessage;
     /**

package/dist/types/components/molecules/inputs/mg-input-date/mg-input-date.d.ts

@@ -11,6 +11,7 @@ export declare class MgInputDate {
     private systemLocale;
     private hasDisplayedError;
     private handlerInProgress;
+    private customErrorMessage;
     /**************
      * Decorators *
      **************/
@@ -126,8 +127,9 @@ export declare class MgInputDate {
      * When used to set validity to `false`, you should use this method again to reset the validity to `true`.
      * @param valid - value indicating the validity
      * @param errorMessage - the error message to display
+     * @param errorMessageLock - lock the error message and validity state
      */
-    setError(valid: MgInputDate['valid'], errorMessage: string): Promise<void>;
+    setError(valid: MgInputDate['valid'], errorMessage?: string, errorMessageLock?: boolean): Promise<void>;
     /**
      * Reset value, validity and error state
      */
@@ -173,7 +175,7 @@ export declare class MgInputDate {
     private getInputError;
     /**
      * Check input errors
-     * @param errorMessage - errorMessage override
+     * @param fromSetErrorContext - context come from `setError` method
      */
     private setErrorMessage;
     /*************

package/dist/types/components/molecules/inputs/mg-input-numeric/mg-input-numeric.d.ts

@@ -18,6 +18,7 @@ export declare class MgInputNumeric {
     private messages;
     private hasDisplayedError;
     private handlerInProgress;
+    private customErrorMessage;
     /**************
      * Decorators *
      **************/
@@ -174,8 +175,9 @@ export declare class MgInputNumeric {
      * When used to set validity to `false`, you should use this method again to reset the validity to `true`.
      * @param valid - value indicating the validity
      * @param errorMessage - the error message to display
+     * @param errorMessageLock - lock the error message and validity state
      */
-    setError(valid: MgInputNumeric['valid'], errorMessage: string): Promise<void>;
+    setError(valid: MgInputNumeric['valid'], errorMessage?: string, errorMessageLock?: boolean): Promise<void>;
     /**
      * Reset value, validity and error state
      */
@@ -229,7 +231,7 @@ export declare class MgInputNumeric {
     private formatErrorValue;
     /**
      * Set input error message
-     * @param errorMessage - errorMessage override
+     * @param fromSetErrorContext - context come from `setError` method
      */
     private setErrorMessage;
     /**

package/dist/types/components/molecules/inputs/mg-input-password/mg-input-password.d.ts

@@ -9,6 +9,7 @@ export declare class MgInputPassword {
     private messages;
     private hasDisplayedError;
     private handlerInProgress;
+    private customErrorMessage;
     /**************
      * Decorators *
      **************/
@@ -126,8 +127,9 @@ export declare class MgInputPassword {
      * When used to set validity to `false`, you should use this method again to reset the validity to `true`.
      * @param valid - value indicating the validity
      * @param errorMessage - the error message to display
+     * @param errorMessageLock - lock the error message and validity state
      */
-    setError(valid: MgInputPassword['valid'], errorMessage: string): Promise<void>;
+    setError(valid: MgInputPassword['valid'], errorMessage?: string, errorMessageLock?: boolean): Promise<void>;
     /**
      * Reset value, validity and error state
      */
@@ -155,7 +157,7 @@ export declare class MgInputPassword {
     private checkValidity;
     /**
      * Set input error message
-     * @param errorMessage - errorMessage override
+     * @param fromSetErrorContext - context come from `setError` method
      */
     private setErrorMessage;
     /*************

package/dist/types/components/molecules/inputs/mg-input-radio/mg-input-radio.d.ts

@@ -11,6 +11,7 @@ export declare class MgInputRadio {
     private messages;
     private hasDisplayedError;
     private handlerInProgress;
+    private customErrorMessage;
     /**************
      * Decorators *
      **************/
@@ -128,8 +129,9 @@ export declare class MgInputRadio {
      * When used to set validity to `false`, you should use this method again to reset the validity to `true`.
      * @param valid - value indicating the validity
      * @param errorMessage - the error message to display
+     * @param errorMessageLock - lock the error message and validity state
      */
-    setError(valid: MgInputRadio['valid'], errorMessage: string): Promise<void>;
+    setError(valid: MgInputRadio['valid'], errorMessage?: string, errorMessageLock?: boolean): Promise<void>;
     /**
      * Reset value, validity and error state
      */
@@ -154,7 +156,7 @@ export declare class MgInputRadio {
     private checkValidity;
     /**
      * Set input error message
-     * @param errorMessage - errorMessage override
+     * @param fromSetErrorContext - context come from `setError` method
      */
     private setErrorMessage;
     /**

package/dist/types/components/molecules/inputs/mg-input-rich-text-editor/mg-input-rich-text-editor.d.ts

@@ -10,6 +10,7 @@ export declare class MgInputRichTextEditor {
     private wrapperElement;
     private messages;
     private hasDisplayedError;
+    private customErrorMessage;
     private readonly classFocus;
     /**************
      * Decorators *
@@ -138,8 +139,9 @@ export declare class MgInputRichTextEditor {
      * When used to set validity to `false`, you should use this method again to reset the validity to `true`.
      * @param valid - value indicating the validity
      * @param errorMessage - the error message to display
+     * @param errorMessageLock - lock the error message and validity state
      */
-    setError(valid: MgInputRichTextEditor['valid'], errorMessage: string): Promise<void>;
+    setError(valid: MgInputRichTextEditor['valid'], errorMessage?: string, errorMessageLock?: boolean): Promise<void>;
     /**
      * Reset value, validity and error state
      */
@@ -170,7 +172,7 @@ export declare class MgInputRichTextEditor {
     private checkValidity;
     /**
      * Set input error message
-     * @param errorMessage - errorMessage override
+     * @param fromSetErrorContext - context come from `setError` method
      */
     private setErrorMessage;
     /**

package/dist/types/components/molecules/inputs/mg-input-select/mg-input-select.d.ts

@@ -10,6 +10,7 @@ export declare class MgInputSelect {
     private messages;
     private hasDisplayedError;
     private handlerInProgress;
+    private customErrorMessage;
     /**************
      * Decorators *
      **************/
@@ -140,8 +141,9 @@ export declare class MgInputSelect {
      * When used to set validity to `false`, you should use this method again to reset the validity to `true`.
      * @param valid - value indicating the validity
      * @param errorMessage - the error message to display
+     * @param errorMessageLock - lock the error message and validity state
      */
-    setError(valid: MgInputSelect['valid'], errorMessage: string): Promise<void>;
+    setError(valid: MgInputSelect['valid'], errorMessage?: string, errorMessageLock?: boolean): Promise<void>;
     /**
      * Reset value, validity and error state
      */
@@ -181,7 +183,7 @@ export declare class MgInputSelect {
     private checkValidity;
     /**
      * Set input error message
-     * @param errorMessage - errorMessage override
+     * @param fromSetErrorContext - context come from `setError` method
      */
     private setErrorMessage;
     /*************

package/dist/types/components/molecules/inputs/mg-input-text/mg-input-text.d.ts

@@ -21,6 +21,7 @@ export declare class MgInputText {
     private input;
     private messages;
     private hasDisplayedError;
+    private customErrorMessage;
     private handlerInProgress;
     /**************
      * Decorators *
@@ -165,8 +166,9 @@ export declare class MgInputText {
      * When used to set validity to `false`, you should use this method again to reset the validity to `true`.
      * @param valid - value indicating the validity
      * @param errorMessage - the error message to display
+     * @param errorMessageLock - lock the error message and validity state
      */
-    setError(valid: MgInputText['valid'], errorMessage: string): Promise<void>;
+    setError(valid: MgInputText['valid'], errorMessage?: string, errorMessageLock?: boolean): Promise<void>;
     /**
      * Reset value, validity and error state
      */
@@ -198,7 +200,7 @@ export declare class MgInputText {
     private checkValidity;
     /**
      * Set input error message
-     * @param errorMessage - errorMessage override
+     * @param fromSetErrorContext - context come from `setError` method
      */
     private setErrorMessage;
     /**

package/dist/types/components/molecules/inputs/mg-input-textarea/mg-input-textarea.d.ts

@@ -12,6 +12,7 @@ export declare class MgInputTextarea {
     private messages;
     private hasDisplayedError;
     private handlerInProgress;
+    private customErrorMessage;
     /**************
      * Decorators *
      **************/
@@ -148,8 +149,9 @@ export declare class MgInputTextarea {
      * When used to set validity to `false`, you should use this method again to reset the validity to `true`.
      * @param valid - value indicating the validity
      * @param errorMessage - the error message to display
+     * @param errorMessageLock - lock the error message and validity state
      */
-    setError(valid: MgInputTextarea['valid'], errorMessage: string): Promise<void>;
+    setError(valid: MgInputTextarea['valid'], errorMessage?: string, errorMessageLock?: boolean): Promise<void>;
     /**
      * Reset value, validity and error state
      */
@@ -183,7 +185,7 @@ export declare class MgInputTextarea {
     private checkValidity;
     /**
      * Set input error message
-     * @param errorMessage - errorMessage override
+     * @param fromSetErrorContext - context come from `setError` method
      */
     private setErrorMessage;
     /*************

package/dist/types/components/molecules/inputs/mg-input-toggle/mg-input-toggle.d.ts

@@ -53,7 +53,9 @@ export declare class MgInputToggle {
      */
     labelHide: boolean;
     /**
-     * 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.
      */
     isOnOff: boolean;
     watchIsOnOff(newValue: MgInputToggle['isOnOff']): void;
@@ -125,7 +127,7 @@ export declare class MgInputToggle {
      * @param valid - value indicating the validity
      * @param errorMessage - the error message to display
      */
-    setError(valid: boolean, errorMessage: string): Promise<void>;
+    setError(valid: boolean, errorMessage?: string): Promise<void>;
     /**
      * Reset value, validity, error and visual state
      */

package/dist/types/components/molecules/mg-fieldset/mg-fieldset.d.ts

@@ -0,0 +1,105 @@
+import { ClassList } from '@mgdis/core-ui-helpers/dist/utils';
+import { labelHeading } from '../inputs/mg-input/mg-input.conf';
+export declare class MgFieldset {
+    /************
+     * Internal *
+     ************/
+    private mgInputs;
+    /**************
+     * Decorators *
+     **************/
+    /**
+     * Get component DOM element
+     */
+    element: HTMLMgFieldsetElement;
+    /**
+     * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
+     */
+    identifier: string;
+    /**
+     * Fieldset name
+     * If not set the value equals the identifier
+     */
+    name: string;
+    /**
+     * Fieldset legend
+     */
+    legend: string;
+    /**
+     * Define if legend is visible
+     */
+    legendHide: boolean;
+    /**
+     * Define legend heading, use to define legend with associated semantic
+     */
+    legendHeading?: labelHeading;
+    /**
+     * Define if legend border is visible.
+     */
+    legendBorderDisplay: boolean;
+    watchLegendBorderDisplay(newValue: MgFieldset['legendBorderDisplay']): void;
+    /**
+     * Define if inputs are readonly
+     */
+    readonly: boolean;
+    watchReadonly(newValue: MgFieldset['readonly']): void;
+    /**
+     * Define if inputs are disabled
+     */
+    disabled: boolean;
+    handleAttributeChange(): void;
+    /**
+     * Add a tooltip message next to the fieldset
+     */
+    tooltip?: string;
+    /**
+     * Add a help text under the fieldset, usually expected data format and example
+     */
+    helpText?: string;
+    /**
+     * Define custom error message to display
+     */
+    errorMessage?: string;
+    /**
+     * Define fieldset valid state
+     */
+    valid: boolean;
+    /**
+     * Component classes
+     */
+    classCollection: ClassList;
+    /**
+     * Component is not a candidate for constraint validation.
+     * You can use this method to define the `errorMessage` and set the `valid` state to `false`.
+     * @param errorMessage - error message to display. Use a valid `string` to define an error or `undefined` to delete the error
+     */
+    setCustomValidity(errorMessage?: string): Promise<void>;
+    /**
+     * Display inputs error if it exists.
+     */
+    displayError(): Promise<void>;
+    /**
+     * Check if fieldset is valid
+     */
+    private checkValidity;
+    /**
+     * Set mgInputs
+     */
+    private setMgInputs;
+    /*************
+     * Lifecycle *
+     *************/
+    /**
+     * Check if component props are well configured on init
+     */
+    componentWillLoad(): void;
+    /**
+     * Add slot listeners
+     */
+    componentDidLoad(): void;
+    /**
+     * Render
+     * @returns HTML Element
+     */
+    render(): HTMLElement;
+}

package/dist/types/components/molecules/mg-form/mg-form.d.ts

@@ -92,7 +92,7 @@ export declare class MgForm {
      */
     formReset: EventEmitter<boolean>;
     /**
-     * Display input error if it exists.
+     * Display inputs/fieldsets errors if it exists.
      */
     displayError(): Promise<void>;
     /**

package/dist/types/components/molecules/mg-panel/mg-panel.d.ts

@@ -3,6 +3,7 @@ import { ClassList } from '@mgdis/core-ui-helpers/dist/utils';
 import { type ExpandToggleDisplayType, type TitlePositionType } from './mg-panel.conf';
 /**
  * @slot - Panel content
+ * @slot panel-title - Panel title content (replaces panel-title prop when used)
  * @slot header-right - Header right panel content
  */
 export declare class MgPanel {
@@ -27,7 +28,7 @@ export declare class MgPanel {
     /**
      * Panel title
      */
-    panelTitle: string;
+    panelTitle?: string;
     validatePanelTitle(newValue: MgPanel['panelTitle']): void;
     /**
      * Panel title pattern
@@ -42,6 +43,7 @@ export declare class MgPanel {
      * Define if panel title is editable
      */
     titleEditable: boolean;
+    validateTitleEditable(newValue: MgPanel['titleEditable']): void;
     /**
      * Define title position
      */
@@ -88,6 +90,11 @@ export declare class MgPanel {
     /************
      * Methods *
      ************/
+    /**
+     * Check if panel-title slot is used
+     * @returns true if slot is used
+     */
+    private hasPanelTitleSlot;
     /**
      * Toggle is editing state
      */