@mgdis/mg-components 6.18.0 → 6.20.0

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

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { C as ClassList, i as isValidString, t as toString } from './index2.js';
-import { d as defineCustomElement$5, c as classReadonly, a as classDisabled, w as widths } from './mg-input2.js';
+import { d as defineCustomElement$5, c as classReadonly, a as classDisabled, w as widths, e as classDisplayCharacterLeft } from './mg-input2.js';
 import { i as initLocales } from './index3.js';
 import { d as defineCustomElement$7 } from './mg-character-left2.js';
 import { d as defineCustomElement$6 } from './mg-icon2.js';
@@ -8,7 +8,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 mgInputTextareaCss = ".mg-c-input__box{height:var(--mg-b-size-min-height);box-sizing:border-box;padding:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-8);border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:var(--mg-c-input-border-radius);background-color:var(--mg-b-color-light);color:var(--mg-b-color-dark);font-family:inherit;font-size:var(--mg-b-font-size);text-align:var(--mg-c-input-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-c-input-placeholder-color-text);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 var(--mg-b-size-4) var(--mg-c-input-color-box-shadow-focus)}.mg-c-input__box:disabled{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--has-error .mg-c-input__box{border-color:var(--mg-b-color-danger)}.mg-c-input.mg-c-input--is-input-group-append{--mg-c-button-border-radius-top-left:0;--mg-c-button-border-radius-bottom-left:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:calc(-1*var(--mg-b-size-border));border-bottom-right-radius:0;border-top-right-radius:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box:focus-visible{outline-offset:-0.2rem;outline-style:solid;outline-width:.2rem}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-c-button-border-radius-top-right:0;--mg-c-button-border-radius-bottom-right:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-c-button-border-right-width:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-c-button-border-radius-top-right:var(--mg-c-input-border-radius);--mg-c-button-border-radius-bottom-right:var(--mg-c-input-border-radius)}.mg-c-input.mg-c-input--is-append-input-slot-content:not(.mg-c-input--readonly) ::slotted([slot=append-input]){align-self:start;padding-top:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2)}.mg-c-input.mg-c-input--has-icon .mg-c-input__with-character-left>mg-icon:first-of-type,.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container>mg-icon:first-of-type{position:absolute;top:50%;left:var(--mg-b-size-8);color:var(--mg-c-input-color-icon);transform:translateY(-50%)}.mg-c-input.mg-c-input--has-icon .mg-c-input__with-character-left .mg-c-input__box,.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container .mg-c-input__box{padding-left:calc(var(--mg-b-size-16) + var(--mg-b-size-8)*2)}.mg-c-input__input-container{width:100%;flex:1 auto}.mg-c-input.mg-c-input--width-full .mg-c-input__box{width:100%}.mg-c-input.mg-c-input--width-2 .mg-c-input__with-character-left,.mg-c-input.mg-c-input--width-4 .mg-c-input__with-character-left,.mg-c-input.mg-c-input--width-16 .mg-c-input__with-character-left{width:max-content}.mg-c-input.mg-c-input--width-2 .mg-c-input__with-character-left:has(textarea),.mg-c-input.mg-c-input--width-4 .mg-c-input__with-character-left:has(textarea),.mg-c-input.mg-c-input--width-16 .mg-c-input__with-character-left:has(textarea){flex-grow:inherit}.mg-c-input.mg-c-input--width-2 .mg-c-input__box{width:var(--mg-b-size-48)}.mg-c-input.mg-c-input--width-2 .mg-c-input__with-character-left:not(:has(textarea)) .mg-c-input__box{width:calc(var(--mg-b-size-48) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-4 .mg-c-input__box{width:var(--mg-b-size-72)}.mg-c-input.mg-c-input--width-4 .mg-c-input__with-character-left:not(:has(textarea)) .mg-c-input__box{width:calc(var(--mg-b-size-72) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-16 .mg-c-input__box{width:calc(26*var(--mg-b-size-8))}.mg-c-input.mg-c-input--width-16 .mg-c-input__with-character-left:not(:has(textarea)) .mg-c-input__box{width:calc(calc(26 * var(--mg-b-size-8)) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-full:not(.mg-c-input--label-on-top){justify-content:stretch}.mg-c-input.mg-c-input--is-input-group-append ::slotted([slot=append-input]),.mg-c-input.mg-c-input--is-append-input-slot-content ::slotted([slot=append-input]){width:auto}:host(.mg-c-input.mg-c-input--width-full) ::slotted(*:not(mg-input-title)){width:100%;max-width:100%}.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-c-input.mg-c-input--display-character-left mg-character-left{font-size:var(--mg-b-font-size-small);opacity:.6}.mg-c-input.mg-c-input--display-character-left .mg-c-input__input+.mg-c-input__help-text ::slotted(*),.mg-c-input.mg-c-input--display-character-left .mg-c-input__input+.mg-c-input__error ::slotted(*){margin-top:0}.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__input{align-items:start}.mg-c-input__box{display:block;height:auto;resize:none}.mg-c-input__box.mg-c-input__box--resizable{resize:both}.mg-c-input__box.mg-c-input__box--resizable-horizontal{resize:horizontal}.mg-c-input__box.mg-c-input__box--resizable-vertical{resize:vertical}.mg-c-input__readonly-value{white-space:pre-line}.mg-c-input__with-character-left{flex-grow:1}.mg-c-input__with-character-left mg-character-left{display:block;text-align:end;visibility:hidden}.mg-c-input.mg-u-is-focused .mg-c-input__with-character-left mg-character-left{visibility:visible}@-moz-document url-prefix(){.mg-c-input__box{overflow-x:hidden}}";
+const mgInputTextareaCss = ".mg-c-input__box{height:var(--mg-b-size-min-height);box-sizing:border-box;padding:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-8);border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:var(--mg-c-input-border-radius);background-color:var(--mg-b-color-light);color:var(--mg-b-color-dark);font-family:inherit;font-size:var(--mg-b-font-size);text-align:var(--mg-c-input-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-c-input-placeholder-color-text);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 var(--mg-b-size-4) var(--mg-c-input-color-box-shadow-focus)}.mg-c-input__box:disabled{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--has-error .mg-c-input__box{border-color:var(--mg-b-color-danger)}.mg-c-input.mg-c-input--is-input-group-append{--mg-c-button-border-radius-top-left:0;--mg-c-button-border-radius-bottom-left:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:calc(-1*var(--mg-b-size-border));border-bottom-right-radius:0;border-top-right-radius:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box:focus-visible{outline-offset:-0.2rem;outline-style:solid;outline-width:.2rem}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-c-button-border-radius-top-right:0;--mg-c-button-border-radius-bottom-right:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-c-button-border-right-width:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-c-button-border-radius-top-right:var(--mg-c-input-border-radius);--mg-c-button-border-radius-bottom-right:var(--mg-c-input-border-radius)}.mg-c-input.mg-c-input--is-append-input-slot-content:not(.mg-c-input--readonly) ::slotted([slot=append-input]){align-self:start;padding-top:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2)}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container{position:relative}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container>mg-icon:first-of-type{position:absolute;top:50%;left:var(--mg-b-size-8);color:var(--mg-c-input-color-icon);transform:translateY(-50%)}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container .mg-c-input__box{padding-left:calc(var(--mg-b-size-16) + var(--mg-b-size-8)*2)}.mg-c-input__input-container{width:100%;flex:1 auto}.mg-c-input.mg-c-input--width-full .mg-c-input__box{width:100%}.mg-c-input.mg-c-input--width-full .mg-c-input__input-group-container{width:100%;flex-grow:1}.mg-c-input.mg-c-input--width-2.mg-c-input--display-character-left .mg-c-input__input-group-container,.mg-c-input.mg-c-input--width-4.mg-c-input--display-character-left .mg-c-input__input-group-container,.mg-c-input.mg-c-input--width-16.mg-c-input--display-character-left .mg-c-input__input-group-container{width:max-content}.mg-c-input.mg-c-input--width-2 .mg-c-input__box{width:var(--mg-b-size-48)}.mg-c-input.mg-c-input--width-2.mg-c-input--text.mg-c-input--display-character-left .mg-c-input__box{width:calc(var(--mg-b-size-48) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-4 .mg-c-input__box{width:var(--mg-b-size-72)}.mg-c-input.mg-c-input--width-4.mg-c-input--text.mg-c-input--display-character-left .mg-c-input__box{width:calc(var(--mg-b-size-72) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-16 .mg-c-input__box{width:calc(26*var(--mg-b-size-8))}.mg-c-input.mg-c-input--width-16.mg-c-input--text.mg-c-input--display-character-left .mg-c-input__box{width:calc(calc(26 * var(--mg-b-size-8)) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-full:not(.mg-c-input--label-on-top){justify-content:stretch}.mg-c-input.mg-c-input--is-input-group-append ::slotted([slot=append-input]),.mg-c-input.mg-c-input--is-append-input-slot-content ::slotted([slot=append-input]){width:auto}:host(.mg-c-input.mg-c-input--width-full) ::slotted(*:not(mg-input-title)){width:100%;max-width:100%}.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-c-input.mg-c-input--display-character-left mg-character-left{position:absolute;display:none}.mg-c-input.mg-c-input--display-character-left mg-character-left>span{font-size:var(--mg-b-font-size-small);opacity:.6}.mg-c-input.mg-c-input--display-character-left .mg-c-input__input+.mg-c-input__help-text ::slotted(*),.mg-c-input.mg-c-input--display-character-left .mg-c-input__input+.mg-c-input__error ::slotted(*){margin-top:0}.mg-c-input.mg-c-input--display-character-left .mg-c-input__input-group-container{position:relative}.mg-c-input.mg-c-input--display-character-left input:focus~mg-character-left,.mg-c-input.mg-c-input--display-character-left textarea:focus~mg-character-left{display:block}.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__input{align-items:start}.mg-c-input__box{display:block;height:auto;resize:none}.mg-c-input__box.mg-c-input__box--resizable{resize:both}.mg-c-input__box.mg-c-input__box--resizable-horizontal{resize:horizontal}.mg-c-input__box.mg-c-input__box--resizable-vertical{resize:vertical}.mg-c-input.mg-c-input--readonly .mg-c-input__readonly-value{white-space:pre-line}.mg-c-input.mg-c-input--display-character-left .mg-c-input__box{padding-bottom:var(--mg-b-size-24)}.mg-c-input.mg-c-input--display-character-left mg-character-left{bottom:calc(var(--mg-c-input-border-width) + .1rem);left:calc(var(--mg-c-input-border-width) + .1rem);padding:calc(var(--mg-b-size-4)/2 - var(--mg-c-input-border-width)) calc(var(--mg-b-size-4) - var(--mg-c-input-border-width));border:var(--mg-c-input-border-width) solid var(--mg-c-input-color-border);border-bottom-width:0;border-left-width:0;background:var(--mg-b-color-neutral-0);border-bottom-left-radius:var(--mg-c-input-border-radius);border-top-right-radius:var(--mg-c-input-border-radius)}@-moz-document url-prefix(){.mg-c-input__box{overflow-x:hidden}}";
 
 const MgInputTextarea$1 = /*@__PURE__*/ proxyCustomElement(class MgInputTextarea extends HTMLElement {
     constructor(registerHost) {
@@ -19,12 +19,6 @@ const MgInputTextarea$1 = /*@__PURE__*/ proxyCustomElement(class MgInputTextarea
         this.__attachShadow();
         this.valueChange = createEvent(this, "value-change", 7);
         this.inputValid = createEvent(this, "input-valid", 7);
-        /************
-         * Internal *
-         ************/
-        // Classes
-        this.classFocus = 'mg-u-is-focused';
-        this.classDisplayCharacterLeft = 'mg-c-input--display-character-left';
         // hasDisplayedError (triggered by blur event)
         this.hasDisplayedError = false;
         this.customErrorMessage = { lock: false };
@@ -91,20 +85,10 @@ const MgInputTextarea$1 = /*@__PURE__*/ proxyCustomElement(class MgInputTextarea
             }
             this.value = this.input.value;
         };
-        /**
-         * Handle focus event
-         */
-        this.handleFocus = () => {
-            this.classCollection.add(this.classFocus);
-            this.classCollection = new ClassList(this.classCollection.classes);
-        };
         /**
          * Handle blur event
          */
         this.handleBlur = () => {
-            // Manage focus
-            this.classCollection.delete(this.classFocus);
-            this.classCollection = new ClassList(this.classCollection.classes);
             // Display Error
             this.handlerInProgress = 'blur';
             this.displayError().finally(() => {
@@ -189,10 +173,10 @@ const MgInputTextarea$1 = /*@__PURE__*/ proxyCustomElement(class MgInputTextarea
     }
     validatecharacterLeftHide(newValue) {
         if (newValue) {
-            this.classCollection.delete(this.classDisplayCharacterLeft);
+            this.classCollection.delete(classDisplayCharacterLeft);
         }
         else {
-            this.classCollection.add(this.classDisplayCharacterLeft);
+            this.classCollection.add(classDisplayCharacterLeft);
         }
     }
     /**
@@ -315,13 +299,13 @@ const MgInputTextarea$1 = /*@__PURE__*/ proxyCustomElement(class MgInputTextarea
      * @returns HTML Element
      */
     render() {
-        return (h("mg-input", { key: '9b58ccb9f0b150f5de8cc9f895f4cdea2bbbeecd', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: this.characterLeftId, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.value && h("b", { class: "mg-c-input__readonly-value" }, this.value)) : (h("div", { class: "mg-c-input__with-character-left" }, h("textarea", { class: {
+        return (h("mg-input", { key: 'a43b8b1572249e31fb6ea5bd9244639698629218', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: this.characterLeftId, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.value && h("b", { class: "mg-c-input__readonly-value" }, this.value)) : (h("div", { class: "mg-c-input__input-group-container" }, h("textarea", { class: {
                 'mg-c-input__box': true,
                 'mg-c-input__box--width': true,
                 'mg-c-input__box--resizable': this.resizable === 'both',
                 'mg-c-input__box--resizable-horizontal': this.resizable === 'horizontal',
                 'mg-c-input__box--resizable-vertical': this.resizable === 'vertical',
-            }, value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, rows: this.rows, maxlength: this.maxlength, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: (el) => {
+            }, value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, rows: this.rows, maxlength: this.maxlength, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
                 if (el !== null)
                     this.input = el;
             } }), !this.characterLeftHide && this.maxlength > 0 && (h("mg-character-left", { identifier: this.characterLeftId, characters: this.value, maxlength: this.maxlength }))))));

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

@@ -6,14 +6,14 @@ 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-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}";
+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:.1rem 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;line-height:var(--mg-b-size-16);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-is-active .mg-c-input__button-toggle{border-color:var(--mg-b-color-neutral-110);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;border-color:var(--mg-b-color-light);background-color:var(--mg-b-color-light);font-weight:600}.mg-c-input.mg-c-input--toggle:not(.mg-c-input--readonly) .mg-c-input__button-toggle,.mg-c-input.mg-c-input--toggle:not(.mg-c-input--readonly).mg-c-input--label-on-top .mg-c-input__button-toggle{margin-top:var(--mg-b-size-4)}@media screen and (min-width: 768px){.mg-c-input.mg-c-input--toggle:not(.mg-c-input--readonly) .mg-c-input__button-toggle{margin-top:calc((var(--mg-b-size-min-height) - (var(--mg-b-size-20) + var(--mg-b-size-4)) + .1rem)/2)}}.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
  * @param option - radio option
  * @returns toggle option type is valid
  */
-const isOption = (option) => typeof option === 'object' && typeof option.title === 'string' && option.value !== undefined;
+const isOption = (option) => typeof option === 'object' && typeof option.title === 'string';
 const MgInputToggle$1 = /*@__PURE__*/ proxyCustomElement(class MgInputToggle extends HTMLElement {
     constructor(registerHost) {
         super();
@@ -66,10 +66,6 @@ const MgInputToggle$1 = /*@__PURE__*/ proxyCustomElement(class MgInputToggle ext
          * Component classes
          */
         this.classCollection = new ClassList(['mg-c-input--toggle']);
-        /**
-         * Checked internal value
-         */
-        this.checked = false;
         /**
          * Set input error message
          * @param errorMessage - errorMessage override
@@ -83,10 +79,11 @@ const MgInputToggle$1 = /*@__PURE__*/ proxyCustomElement(class MgInputToggle ext
             }
         };
         /**
-         * Change checked value
+         * Handle switch button to update value
          */
-        this.toggleChecked = () => {
-            this.checked = !this.checked;
+        this.handleSwitchButton = () => {
+            const currentOptionIndex = this.getCurrentOptionIndex(this.value);
+            this.value = this.options[currentOptionIndex === 0 ? 1 : 0].value;
         };
         /**
          * Slots validation
@@ -124,24 +121,51 @@ const MgInputToggle$1 = /*@__PURE__*/ proxyCustomElement(class MgInputToggle ext
          * @param checked - checked item
          * @returns toggle value
          */
-        this.getCheckedItem = (checked) => {
-            var _a;
-            if (((_a = this.options) === null || _a === void 0 ? void 0 : _a.length) === 2) {
-                return this.options[checked ? 1 : 0];
-            }
-            else {
-                return null;
-            }
+        this.getCurrentOptionIndex = (value) => {
+            return this.options.findIndex(option => toString(option.value) === toString(value)) === 1 ? 1 : 0;
+        };
+        /**
+         * Check if value is checked
+         * @param value - toggle value
+         * @returns truthy if value is checked
+         */
+        this.isChecked = (value) => {
+            return this.getCurrentOptionIndex(value) === 1;
         };
     }
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    handleValue(newValue) {
-        // Swich to the right option
-        this.setChecked();
-        // Emit value-change event
-        this.valueChange.emit(newValue);
+    watchValue(newValue, oldValue) {
+        // A "true" attribute can be represented by an empty string
+        // We need to convert it to a boolean true value
+        if (newValue === '') {
+            this.value = true;
+            // Return early to prevent infinite loop
+            return;
+        }
+        // https://stenciljs.com/docs/properties
+        // According to the Stencil documentation, when a prop is declared as `any`, boolean values can be bound as boolean attributes.
+        // However, depending on the integration context (e.g., Vue.js), they may also be interpreted as string attributes.
+        // To avoid incorrect type interpretation when a boolean is received as a string,
+        // we normalize the value and convert it to a proper boolean before internal use.
+        else if (['true', 'false'].includes(newValue) && this.options.every(option => typeof option.value === 'boolean')) {
+            this.value = newValue === 'true';
+            // Return early to prevent infinite loop
+            return;
+        }
+        if (this.isChecked(newValue)) {
+            this.classCollection.add(this.classIsActive);
+        }
+        else {
+            this.classCollection.delete(this.classIsActive);
+        }
+        // when value is reassigned programmatically from previous `watchValue` call
+        // `oldValue` can be a string while `newValue` is boolean or vice versa
+        // so we need to compare them as strings to prevent infinite loop and unnecessary event emission
+        if (toString(newValue) !== toString(oldValue)) {
+            // Emit value-change event
+            this.valueChange.emit(newValue);
+        }
     }
-    validateItems(newValue) {
+    watchItems(newValue) {
         if (typeof newValue === 'object' && this.items.length !== 2) {
             throw new Error(`<mg-input-toggle> prop "items" require 2 items. Passed value: ${toString(newValue)}.`);
         }
@@ -154,7 +178,7 @@ const MgInputToggle$1 = /*@__PURE__*/ proxyCustomElement(class MgInputToggle ext
             this.options = newValue;
         }
         else {
-            throw new Error(`<mg-input-toggle> prop "items" is required and all items must be the same type: ToggleValue. Passed value: ${toString(newValue)}.`);
+            throw new Error(`<mg-input-toggle> prop "items" is required and all items must be the same type: ToggleOption. Passed value: ${toString(newValue)}.`);
         }
     }
     watchIsOnOff(newValue) {
@@ -187,15 +211,6 @@ const MgInputToggle$1 = /*@__PURE__*/ proxyCustomElement(class MgInputToggle ext
         else
             this.classCollection.delete(classDisabled);
     }
-    handleChecked(newValue) {
-        // style
-        if (newValue)
-            this.classCollection.add(this.classIsActive);
-        else
-            this.classCollection.delete(this.classIsActive);
-        // update value
-        this.value = this.getCheckedItem(newValue).value;
-    }
     /**
      * Set focus on input.
      */
@@ -230,7 +245,6 @@ const MgInputToggle$1 = /*@__PURE__*/ proxyCustomElement(class MgInputToggle ext
     async reset() {
         if (!this.readonly) {
             this.value = this.options[0].value;
-            this.setChecked();
             // Use `Promise` as requested for stencil method
             // Use `requestAnimationFrame` to ensure:
             // - DOM is fully updated before validation
@@ -245,28 +259,6 @@ const MgInputToggle$1 = /*@__PURE__*/ proxyCustomElement(class MgInputToggle ext
             });
         }
     }
-    /**
-     * set checked state
-     */
-    setChecked() {
-        const optionTrueValueIndex = this.options.map(option => option.value).findIndex(value => value === true);
-        if ([0, 1].includes(optionTrueValueIndex)) {
-            // has "value" props type is not a boolean, it is bind/render as an attributes/props
-            // true props will be represent by "true" string so we convert it has boolean
-            // true attribute will be represent by "" string so we convert it has boolean
-            // https://stenciljs.com/docs/properties
-            if (['', 'true'].includes(this.value) && this.options.find(option => option.value) !== undefined) {
-                this.value = true;
-            }
-            // when options are boolean values and ordered as [true,false] instead [false,true]
-            // we need to reversed the checked value logic
-            const selectedValue = this.value === this.options[optionTrueValueIndex].value;
-            this.checked = optionTrueValueIndex === 0 ? !selectedValue : selectedValue;
-        }
-        else {
-            this.checked = this.value === this.options[1].value;
-        }
-    }
     /*************
      * Lifecycle *
      *************/
@@ -274,13 +266,9 @@ const MgInputToggle$1 = /*@__PURE__*/ proxyCustomElement(class MgInputToggle ext
      * Check if component props are well configured on init
      */
     componentWillLoad() {
-        // Check items format
-        this.validateItems(this.items);
-        // Check slots
+        this.watchItems(this.items);
         this.validateSlots();
-        // init checked value
-        this.setChecked();
-        // apply handler
+        this.watchValue(this.value);
         this.watchIsIcon(this.isIcon);
         this.watchIsOnOff(this.isOnOff);
         this.watchReadonly(this.readonly);
@@ -291,25 +279,24 @@ const MgInputToggle$1 = /*@__PURE__*/ proxyCustomElement(class MgInputToggle ext
      * @returns HTML Element
      */
     render() {
-        const checkedItem = this.getCheckedItem(this.checked);
-        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 => {
+        const currentOption = this.options[this.getCurrentOptionIndex(this.value)];
+        return (h("mg-input", { key: '7e4a6a75069f6f3c0c49a5989f0b4e7a56954efc', 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 ? (currentOption && h("b", { class: "mg-c-input__readonly-value" }, currentOption.title)) : (h("button", { type: "button", role: "switch", "aria-checked": this.isChecked(this.value).toString(), "aria-readonly": this.disabled || this.readonly, id: this.identifier, class: "mg-c-input__button-toggle", disabled: this.disabled || this.readonly, onClick: this.handleSwitchButton, 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" }))))));
     }
     get element() { return this; }
     static get watchers() { return {
-        "value": ["handleValue"],
-        "items": ["validateItems"],
+        "value": ["watchValue"],
+        "items": ["watchItems"],
         "isOnOff": ["watchIsOnOff"],
         "isIcon": ["watchIsIcon"],
         "readonly": ["watchReadonly"],
-        "disabled": ["watchDisabled"],
-        "checked": ["handleChecked"]
+        "disabled": ["watchDisabled"]
     }; }
     static get style() { return mgInputToggleCss; }
 }, [257, "mg-input-toggle", {
-        "value": [1032],
+        "value": [1040],
         "items": [16],
         "identifier": [1],
         "name": [1],
@@ -327,18 +314,16 @@ const MgInputToggle$1 = /*@__PURE__*/ proxyCustomElement(class MgInputToggle ext
         "options": [32],
         "errorMessage": [32],
         "valid": [32],
-        "checked": [32],
         "setFocus": [64],
         "setError": [64],
         "reset": [64]
     }, undefined, {
-        "value": ["handleValue"],
-        "items": ["validateItems"],
+        "value": ["watchValue"],
+        "items": ["watchItems"],
         "isOnOff": ["watchIsOnOff"],
         "isIcon": ["watchIsIcon"],
         "readonly": ["watchReadonly"],
-        "disabled": ["watchDisabled"],
-        "checked": ["handleChecked"]
+        "disabled": ["watchDisabled"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/dist/components/mg-input2.js

@@ -21,8 +21,9 @@ 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 classDisplayCharacterLeft = 'mg-c-input--display-character-left';
 
-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 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 .mg-c-input__input+.mg-c-input__error,:host .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) {
@@ -455,4 +456,4 @@ function defineCustomElement() {
 }
 defineCustomElement();
 
-export { MgInput as M, classDisabled as a, classFieldset as b, classReadonly as c, defineCustomElement as d, classVerticalList as e, widths as w };
+export { MgInput as M, classDisabled as a, classFieldset as b, classReadonly as c, defineCustomElement as d, classDisplayCharacterLeft as e, classVerticalList as f, widths as w };

package/dist/components/mg-message2.js

@@ -12,7 +12,7 @@ const variants = ['info', 'warning', 'success', 'danger'];
  */
 const variantStyles = ['bar-left', 'background'];
 
-const mgMessageCss = "/*!\n * @prop --mg-c-message-border-radius: Defines the border radius of the message. Default value: `--mg-b-size-radius`.\n */:host{--mg-c-card-spacing:0;--mg-c-card-border-radius:var(--mg-c-message-border-radius);--mg-c-card-border:none;--mg-c-card-overflow:hidden}.mg-c-message{display:inline-block;min-height:var(--mg-b-size-min-height)}.mg-c-message.mg-c-message--danger .mg-c-message__icon{color:var(--mg-b-color-danger)}.mg-c-message.mg-c-message--danger.mg-c-message--bar-left .mg-c-message__bar{background-color:var(--mg-b-color-danger)}.mg-c-message.mg-c-message--danger.mg-c-message--background{--mg-c-card-color-background:var(--mg-b-color-red-20, color-mix(in srgb, var(--mg-b-color-danger), white 80%))}.mg-c-message.mg-c-message--info .mg-c-message__icon{color:var(--mg-b-color-info)}.mg-c-message.mg-c-message--info.mg-c-message--bar-left .mg-c-message__bar{background-color:var(--mg-b-color-info)}.mg-c-message.mg-c-message--info.mg-c-message--background{--mg-c-card-color-background:var(--mg-b-color-blue-20, color-mix(in srgb, var(--mg-b-color-info), white 80%))}.mg-c-message.mg-c-message--success .mg-c-message__icon{color:var(--mg-b-color-success)}.mg-c-message.mg-c-message--success.mg-c-message--bar-left .mg-c-message__bar{background-color:var(--mg-b-color-success)}.mg-c-message.mg-c-message--success.mg-c-message--background{--mg-c-card-color-background:var(--mg-b-color-green-20, color-mix(in srgb, var(--mg-b-color-success), white 80%))}.mg-c-message.mg-c-message--warning .mg-c-message__icon{color:var(--mg-b-color-warning)}.mg-c-message.mg-c-message--warning.mg-c-message--bar-left .mg-c-message__bar{background-color:var(--mg-b-color-warning)}.mg-c-message.mg-c-message--warning.mg-c-message--background{--mg-c-card-color-background:var(--mg-b-color-yellow-20, color-mix(in srgb, var(--mg-b-color-warning), white 80%))}.mg-c-message ::slotted(*){padding:0;margin:0}.mg-c-message__icon{position:absolute;top:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2);left:calc(var(--mg-b-size-4) + var(--mg-b-size-8));line-height:1}.mg-c-message__content{display:flex;flex-wrap:wrap;padding:0 var(--mg-b-size-8) 0 calc(var(--mg-b-size-4) + var(--mg-b-size-8) + var(--mg-b-size-16) + var(--mg-b-size-8));place-content:stretch flex-end}.mg-c-message__content-slot{flex-grow:1;margin:var(--mg-b-size-8) 0}.mg-c-message__content-separator{display:inline-block;width:var(--mg-b-size-40);height:0}.mg-c-message__content-actions-slot{padding:var(--mg-b-size-8) 0;text-align:right}.mg-c-message__bar{position:absolute;top:0;left:0;width:var(--mg-b-size-4);height:100%}.mg-c-message ::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-message,.mg-c-message mg-message{max-width:100%}";
+const mgMessageCss = "/*!\n * @prop --mg-c-message-border-radius: Defines the border radius of the message. Default value: `--mg-b-size-radius`.\n */:host{--mg-c-card-spacing:0;--mg-c-card-border-radius:var(--mg-c-message-border-radius);--mg-c-card-border:none;--mg-c-card-overflow:hidden}.mg-c-message{display:inline-block;min-height:var(--mg-b-size-min-height)}.mg-c-message.mg-c-message--danger .mg-c-message__icon{color:var(--mg-b-color-danger)}.mg-c-message.mg-c-message--danger.mg-c-message--bar-left .mg-c-message__bar{background-color:var(--mg-b-color-danger)}.mg-c-message.mg-c-message--danger.mg-c-message--background{--mg-c-card-color-background:var(--mg-b-color-red-20, color-mix(in srgb, var(--mg-b-color-danger), white 80%))}.mg-c-message.mg-c-message--info .mg-c-message__icon{color:var(--mg-b-color-info)}.mg-c-message.mg-c-message--info.mg-c-message--bar-left .mg-c-message__bar{background-color:var(--mg-b-color-info)}.mg-c-message.mg-c-message--info.mg-c-message--background{--mg-c-card-color-background:var(--mg-b-color-blue-20, color-mix(in srgb, var(--mg-b-color-info), white 80%))}.mg-c-message.mg-c-message--success .mg-c-message__icon{color:var(--mg-b-color-success)}.mg-c-message.mg-c-message--success.mg-c-message--bar-left .mg-c-message__bar{background-color:var(--mg-b-color-success)}.mg-c-message.mg-c-message--success.mg-c-message--background{--mg-c-card-color-background:var(--mg-b-color-green-20, color-mix(in srgb, var(--mg-b-color-success), white 80%))}.mg-c-message.mg-c-message--warning .mg-c-message__icon{color:var(--mg-b-color-warning)}.mg-c-message.mg-c-message--warning.mg-c-message--bar-left .mg-c-message__bar{background-color:var(--mg-b-color-warning)}.mg-c-message.mg-c-message--warning.mg-c-message--background{--mg-c-card-color-background:var(--mg-b-color-yellow-20, color-mix(in srgb, var(--mg-b-color-warning), white 80%))}.mg-c-message ::slotted(*){padding:0;margin:0}.mg-c-message__icon{position:absolute;top:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2);left:calc(var(--mg-b-size-4) + var(--mg-b-size-8));line-height:1}.mg-c-message__content{display:flex;flex-wrap:wrap;padding:0 var(--mg-b-size-8) 0 calc(var(--mg-b-size-4) + var(--mg-b-size-8) + var(--mg-b-size-16) + var(--mg-b-size-8));place-content:stretch flex-end}.mg-c-message__content-slot{flex-grow:1;margin:var(--mg-b-size-8) 0}.mg-c-message__content-separator{display:inline-block;width:var(--mg-b-size-40);height:0}.mg-c-message__content-actions-slot{padding:var(--mg-b-size-8) 0;text-align:right}.mg-c-message__bar{position:absolute;top:0;left:0;width:var(--mg-b-size-4);height:100%}.mg-c-message ::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-max-height:unset;--mg-c-card-overflow:var(--mg-c-card-overflow-default)}.mg-c-message,.mg-c-message mg-message{max-width:100%}";
 
 const MgMessage = /*@__PURE__*/ proxyCustomElement(class MgMessage extends HTMLElement {
     constructor(registerHost) {

package/dist/components/mg-modal.js

@@ -10,7 +10,7 @@ import { d as defineCustomElement$2 } from './mg-icon2.js';
  */
 const dialogRoles = ['dialog', 'alertdialog'];
 
-const mgModalCss = "/*!\n * @prop --mg-c-modal-border-radius: Defines the border radius of the modal. Default value: `--mg-b-size-radius`.\n * @prop --mg-c-modal-title-font-size: Defines the font size of the modal title. Default value: `--mg-b-font-size-h3`.\n */:host{--mg-c-card-border-radius:var(--mg-c-modal-border-radius);--mg-c-card-spacing:var(--mg-b-size-16) var(--mg-b-size-24);--mg-c-card-border:none}.mg-c-modal{border:none;background:none;color:inherit}.mg-c-modal[open]{display:flex;padding:var(--mg-b-size-24) var(--mg-b-size-8)}.mg-c-modal::backdrop{background-color:var(--mg-b-color-light);opacity:.85}.mg-c-modal mg-card{display:flex;width:calc(75*var(--mg-b-size-8));max-width:100%;max-height:100%}.mg-c-modal__dialog{position:relative;display:flex;height:fit-content;max-height:100%;flex-direction:column;align-self:center;row-gap:var(--mg-b-size-24)}.mg-c-modal__title{margin:0;font-family:var(--mg-b-font-family-heading);font-size:var(--mg-c-modal-title-font-size);font-weight:600}.mg-c-modal__close-button{height:var(--mg-c-modal-title-font-size);margin-top:calc((var(--mg-b-size-min-height) - var(--mg-c-modal-title-font-size)*var(--mg-b-line-height))/2*-1);margin-right:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2*-1);margin-left:var(--mg-b-size-16);float:right}.mg-c-modal__content{padding:var(--mg-b-size-16);margin:calc(var(--mg-b-size-16)*-1);overflow-y:auto}.mg-c-modal ::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}";
+const mgModalCss = "/*!\n * @prop --mg-c-modal-border-radius: Defines the border radius of the modal. Default value: `--mg-c-card-border-radius-default`.\n * @prop --mg-c-modal-title-font-size: Defines the font size of the modal title. Default value: `--mg-b-font-size-h3`.\n */:host{--mg-c-card-border-radius:var(--mg-c-modal-border-radius);--mg-c-card-spacing:var(--mg-b-size-16) var(--mg-b-size-24);--mg-c-card-border:none}.mg-c-modal{border:none;background:none;color:inherit}.mg-c-modal[open]{display:flex;padding:var(--mg-b-size-24) var(--mg-b-size-8)}.mg-c-modal::backdrop{background-color:var(--mg-b-color-light);opacity:.85}.mg-c-modal mg-card{display:flex;width:calc(75*var(--mg-b-size-8));max-width:100%;max-height:100%}.mg-c-modal__dialog{position:relative;display:flex;height:fit-content;max-height:100%;flex-direction:column;align-self:center;row-gap:var(--mg-b-size-24)}.mg-c-modal__title{margin:0;font-family:var(--mg-b-font-family-heading);font-size:var(--mg-c-modal-title-font-size);font-weight:600}.mg-c-modal__close-button{height:var(--mg-c-modal-title-font-size);margin-top:calc((var(--mg-b-size-min-height) - var(--mg-c-modal-title-font-size)*var(--mg-b-line-height))/2*-1);margin-right:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2*-1);margin-left:var(--mg-b-size-16);float:right}.mg-c-modal__content{padding:var(--mg-b-size-16);margin:calc(var(--mg-b-size-16)*-1);overflow-y:auto}.mg-c-modal ::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-max-height:unset;--mg-c-card-overflow:var(--mg-c-card-overflow-default)}";
 
 const MgModal$1 = /*@__PURE__*/ proxyCustomElement(class MgModal extends HTMLElement {
     constructor(registerHost) {

package/dist/components/mg-panel.js

@@ -20,7 +20,7 @@ const expandToggleDisplays = ['text', 'icon'];
  */
 const titlePositions = ['left', 'right'];
 
-const mgPanelCss = "/*!\n * @prop --mg-c-panel-border-radius: Defines the border radius of the panel. Default value: `--mg-b-size-radius`.\n * @prop --mg-c-panel-color-background: Defines the background of the panel.\n * @prop --mg-c-panel-box-shadow: Defines the box shadow of the panel. Default value: `--mg-b-box-shadow`.\n * @prop --mg-c-panel-content-spacing: Defines the padding of the panel content. Default value: `--mg-b-size-16`.\n */:host{--mg-c-card-spacing:0;--mg-c-card-border-radius:var(--mg-c-panel-border-radius);--mg-c-card-color-background:var(--mg-c-panel-color-background);--mg-c-card-box-shadow:var(--mg-c-panel-box-shadow)}.mg-c-panel__header{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;padding:0 var(--mg-b-size-4)}.mg-c-panel__header-title,.mg-c-panel__header-content{display:flex;margin:var(--mg-b-size-4) 0}.mg-c-panel__header-content{min-height:var(--mg-b-size-min-height);flex:1 auto;align-items:center;padding-left:var(--mg-b-size-4)}.mg-c-panel__header-title mg-input-text{flex-grow:1;margin-left:var(--mg-b-size-4)}.mg-c-panel__header-title mg-button+mg-button:not([slot=append-input]){margin-left:var(--mg-b-size-4)}.mg-c-panel__header-title.mg-c-panel__header-title--full{flex:1 1 auto}.mg-c-panel__collapse-button-content{--mg-b-font-size:var(--mg-b-font-size-h5);--mg-c-button-font-weight:600}.mg-c-panel__collapse-button-icon.mg-c-panel__collapse-button-icon--reverse{transform:rotate(180deg)}.mg-c-panel__content{padding:var(--mg-c-panel-content-spacing)}.mg-c-panel ::slotted([slot=header-right]){display:flex;flex-wrap:wrap;margin-left:auto;gap:var(--mg-b-spacing-actions)}.mg-c-panel ::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}";
+const mgPanelCss = "/*!\n * @prop --mg-c-panel-border-radius: Defines the border radius of the panel. Default value: `--mg-c-card-border-radius-default`.\n * @prop --mg-c-panel-color-background: Defines the background of the panel. Default value: `unset`.\n * @prop --mg-c-panel-box-shadow: Defines the box shadow of the panel. Default value: `--mg-b-box-shadow`.\n * @prop --mg-c-panel-content-spacing: Defines the padding of the panel content. Default value: `--mg-b-size-16`.\n */:host{--mg-c-card-spacing:0;--mg-c-card-border-radius:var(--mg-c-panel-border-radius);--mg-c-card-color-background:var(--mg-c-panel-color-background);--mg-c-card-box-shadow:var(--mg-c-panel-box-shadow)}.mg-c-panel__header{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;padding:0 var(--mg-b-size-4)}.mg-c-panel__header-title,.mg-c-panel__header-content{display:flex;margin:var(--mg-b-size-4) 0}.mg-c-panel__header-content{min-height:var(--mg-b-size-min-height);flex:1 auto;align-items:center;padding-left:var(--mg-b-size-4)}.mg-c-panel__header-title mg-input-text{flex-grow:1;margin-left:var(--mg-b-size-4)}.mg-c-panel__header-title mg-button+mg-button:not([slot=append-input]){margin-left:var(--mg-b-size-4)}.mg-c-panel__header-title.mg-c-panel__header-title--full{flex:1 1 auto}.mg-c-panel__collapse-button-content{--mg-b-font-size:var(--mg-b-font-size-h5);--mg-c-button-font-weight:600}.mg-c-panel__collapse-button-icon.mg-c-panel__collapse-button-icon--reverse{transform:rotate(180deg)}.mg-c-panel__content{padding:var(--mg-c-panel-content-spacing)}.mg-c-panel ::slotted([slot=header-right]){display:flex;flex-wrap:wrap;margin-left:auto;gap:var(--mg-b-spacing-actions)}.mg-c-panel ::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-max-height:unset;--mg-c-card-overflow:var(--mg-c-card-overflow-default)}";
 
 const MgPanel$1 = /*@__PURE__*/ proxyCustomElement(class MgPanel extends HTMLElement {
     constructor(registerHost) {

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

@@ -5,7 +5,7 @@ import { d as defineCustomElement$3 } from './mg-button2.js';
 import { d as defineCustomElement$2 } from './mg-card2.js';
 import { d as defineCustomElement$1 } from './mg-icon2.js';
 
-const mgPopoverContentCss = ":host{position:relative;z-index:2000;display:none;padding:var(--mg-b-size-8);color:var(--mg-c-popover-color-text)}:host([data-show]){display:block}:host([data-popper-placement^=left-start]),:host([data-popper-placement^=left-end]),:host([data-popper-placement^=right-start]),:host([data-popper-placement^=right-end]){padding:0 var(--mg-b-size-8)}.mg-c-popover-content{--mg-c-card-max-width:var(--mg-c-popover-max-width);--mg-c-card-min-width:var(--mg-c-popover-min-width)}.mg-c-popover-content mg-button{margin-top:calc(-1*(var(--mg-b-size-min-height) - var(--mg-c-popover-title-font-size)*var(--mg-b-line-height))/2);margin-right:calc(-1*(var(--mg-b-size-min-height) - var(--mg-b-size-16))/2);margin-left:var(--mg-b-size-32);float:right}.mg-c-popover-content__title ::slotted([slot=title]){margin:0 0 var(--mg-b-size-12) !important;font-size:var(--mg-c-popover-title-font-size) !important;font-weight:600 !important}.mg-c-popover-content ::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}:host([data-popper-placement^=top][data-arrow-hide]){padding-bottom:0}:host([data-popper-placement^=bottom][data-arrow-hide]){padding-top:0}:host([data-popper-placement$=end][data-arrow-hide]),:host([data-popper-placement^=left][data-arrow-hide]){padding-right:0}:host([data-popper-placement$=start][data-arrow-hide]),:host([data-popper-placement^=right][data-arrow-hide]){padding-left:0}::slotted([slot=arrow]){position:absolute;width:calc(var(--mg-b-size-24) + 2*var(--mg-c-card-border-radius) + 2*var(--mg-b-size-8));height:calc(var(--mg-b-size-24) + 2*var(--mg-c-card-border-radius) + 2*var(--mg-b-size-8));visibility:hidden}::slotted([slot=arrow])::before{position:absolute;content:\"\";visibility:visible}:host([data-arrow-hide]) ::slotted([slot=arrow]){display:none}:host([data-popper-placement^=top]) ::slotted([slot=arrow]),:host([data-popper-placement^=bottom]) ::slotted([slot=arrow]){height:var(--mg-b-size-8)}:host([data-popper-placement^=top]) ::slotted([slot=arrow])::before,:host([data-popper-placement^=bottom]) ::slotted([slot=arrow])::before{left:calc(var(--mg-c-card-border-radius) + var(--mg-b-size-8));border-right:calc(var(--mg-b-size-24)/2) solid rgba(0,0,0,0);border-left:calc(var(--mg-b-size-24)/2) solid rgba(0,0,0,0)}:host([data-popper-placement^=top]) ::slotted([slot=arrow]){bottom:var(--mg-b-size-border);filter:drop-shadow(0 0.5rem 0.25rem color-mix(in srgb, var(--mg-b-color-dark), transparent 85%))}:host([data-popper-placement^=top]) ::slotted([slot=arrow])::before{border-top:var(--mg-b-size-8) solid var(--mg-c-popover-color-background)}:host([data-popper-placement^=bottom]) ::slotted([slot=arrow]){top:var(--mg-b-size-border);filter:drop-shadow(0 -0.5rem 0.25rem color-mix(in srgb, var(--mg-b-color-dark), transparent 85%))}:host([data-popper-placement^=bottom]) ::slotted([slot=arrow])::before{border-bottom:var(--mg-b-size-8) solid var(--mg-c-popover-color-background)}:host([data-popper-placement^=left]) ::slotted([slot=arrow]),:host([data-popper-placement^=right]) ::slotted([slot=arrow]){width:var(--mg-b-size-8)}:host([data-popper-placement^=left]) ::slotted([slot=arrow])::before,:host([data-popper-placement^=right]) ::slotted([slot=arrow])::before{top:calc(var(--mg-c-card-border-radius) + var(--mg-b-size-8));border-top:calc(var(--mg-b-size-24)/2) solid rgba(0,0,0,0);border-bottom:calc(var(--mg-b-size-24)/2) solid rgba(0,0,0,0)}:host([data-popper-placement^=left]) ::slotted([slot=arrow]){right:var(--mg-b-size-border);filter:drop-shadow(0.5rem 0 0.25rem color-mix(in srgb, var(--mg-b-color-dark), transparent 85%))}:host([data-popper-placement^=left]) ::slotted([slot=arrow])::before{border-left:var(--mg-b-size-8) solid var(--mg-c-popover-color-background)}:host([data-popper-placement^=right]) ::slotted([slot=arrow]){left:var(--mg-b-size-border);filter:drop-shadow(-0.5rem 0 0.25rem color-mix(in srgb, var(--mg-b-color-dark), transparent 85%))}:host([data-popper-placement^=right]) ::slotted([slot=arrow])::before{border-right:var(--mg-b-size-8) solid var(--mg-c-popover-color-background)}:host([data-popper-placement^=left-start]) ::slotted([slot=arrow]),:host([data-popper-placement^=left-end]) ::slotted([slot=arrow]),:host([data-popper-placement^=right-start]) ::slotted([slot=arrow]),:host([data-popper-placement^=right-end]) ::slotted([slot=arrow]){height:calc(var(--mg-b-size-24) + 2*var(--mg-c-card-border-radius))}:host([data-popper-placement^=left-start]) ::slotted([slot=arrow])::before,:host([data-popper-placement^=left-end]) ::slotted([slot=arrow])::before,:host([data-popper-placement^=right-start]) ::slotted([slot=arrow])::before,:host([data-popper-placement^=right-end]) ::slotted([slot=arrow])::before{top:var(--mg-c-card-border-radius)}";
+const mgPopoverContentCss = ":host{position:relative;z-index:2000;display:none;padding:var(--mg-b-size-8);color:var(--mg-c-popover-color-text)}:host([data-show]){display:block}:host([data-popper-placement^=left-start]),:host([data-popper-placement^=left-end]),:host([data-popper-placement^=right-start]),:host([data-popper-placement^=right-end]){padding:0 var(--mg-b-size-8)}.mg-c-popover-content{--mg-c-card-max-width:var(--mg-c-popover-max-width);--mg-c-card-min-width:var(--mg-c-popover-min-width);--mg-c-card-max-height:min( var(--mg-c-popover-max-height), 100vh - calc(var(--mg-b-size-min-height) + var(--mg-b-size-32)) );--mg-c-card-overflow:var(--mg-c-popover-overflow)}.mg-c-popover-content mg-button{margin-top:calc(-1*(var(--mg-b-size-min-height) - var(--mg-c-popover-title-font-size)*var(--mg-b-line-height))/2);margin-right:calc(-1*(var(--mg-b-size-min-height) - var(--mg-b-size-16))/2);margin-left:var(--mg-b-size-32);float:right}.mg-c-popover-content__title ::slotted([slot=title]){margin:0 0 var(--mg-b-size-12) !important;font-size:var(--mg-c-popover-title-font-size) !important;font-weight:600 !important}.mg-c-popover-content ::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-max-height:unset;--mg-c-card-overflow:var(--mg-c-card-overflow-default)}:host([data-popper-placement^=top][data-arrow-hide]){padding-bottom:0}:host([data-popper-placement^=bottom][data-arrow-hide]){padding-top:0}:host([data-popper-placement$=end][data-arrow-hide]),:host([data-popper-placement^=left][data-arrow-hide]){padding-right:0}:host([data-popper-placement$=start][data-arrow-hide]),:host([data-popper-placement^=right][data-arrow-hide]){padding-left:0}::slotted([slot=arrow]){position:absolute;width:calc(var(--mg-b-size-24) + 2*var(--mg-c-popover-border-radius) + 2*var(--mg-b-size-8));height:calc(var(--mg-b-size-24) + 2*var(--mg-c-popover-border-radius) + 2*var(--mg-b-size-8));visibility:hidden}::slotted([slot=arrow])::before{position:absolute;content:\"\";visibility:visible}:host([data-arrow-hide]) ::slotted([slot=arrow]){display:none}:host([data-popper-placement^=top]) ::slotted([slot=arrow]),:host([data-popper-placement^=bottom]) ::slotted([slot=arrow]){height:var(--mg-b-size-8)}:host([data-popper-placement^=top]) ::slotted([slot=arrow])::before,:host([data-popper-placement^=bottom]) ::slotted([slot=arrow])::before{left:calc(var(--mg-c-popover-border-radius) + var(--mg-b-size-8));border-right:calc(var(--mg-b-size-24)/2) solid rgba(0,0,0,0);border-left:calc(var(--mg-b-size-24)/2) solid rgba(0,0,0,0)}:host([data-popper-placement^=top]) ::slotted([slot=arrow]){bottom:var(--mg-b-size-border);filter:drop-shadow(0 0.5rem 0.25rem color-mix(in srgb, var(--mg-b-color-dark), transparent 85%))}:host([data-popper-placement^=top]) ::slotted([slot=arrow])::before{border-top:var(--mg-b-size-8) solid var(--mg-c-popover-color-background)}:host([data-popper-placement^=bottom]) ::slotted([slot=arrow]){top:var(--mg-b-size-border);filter:drop-shadow(0 -0.5rem 0.25rem color-mix(in srgb, var(--mg-b-color-dark), transparent 85%))}:host([data-popper-placement^=bottom]) ::slotted([slot=arrow])::before{border-bottom:var(--mg-b-size-8) solid var(--mg-c-popover-color-background)}:host([data-popper-placement^=left]) ::slotted([slot=arrow]),:host([data-popper-placement^=right]) ::slotted([slot=arrow]){width:var(--mg-b-size-8)}:host([data-popper-placement^=left]) ::slotted([slot=arrow])::before,:host([data-popper-placement^=right]) ::slotted([slot=arrow])::before{top:calc(var(--mg-c-popover-border-radius) + var(--mg-b-size-8));border-top:calc(var(--mg-b-size-24)/2) solid rgba(0,0,0,0);border-bottom:calc(var(--mg-b-size-24)/2) solid rgba(0,0,0,0)}:host([data-popper-placement^=left]) ::slotted([slot=arrow]){right:var(--mg-b-size-border);filter:drop-shadow(0.5rem 0 0.25rem color-mix(in srgb, var(--mg-b-color-dark), transparent 85%))}:host([data-popper-placement^=left]) ::slotted([slot=arrow])::before{border-left:var(--mg-b-size-8) solid var(--mg-c-popover-color-background)}:host([data-popper-placement^=right]) ::slotted([slot=arrow]){left:var(--mg-b-size-border);filter:drop-shadow(-0.5rem 0 0.25rem color-mix(in srgb, var(--mg-b-color-dark), transparent 85%))}:host([data-popper-placement^=right]) ::slotted([slot=arrow])::before{border-right:var(--mg-b-size-8) solid var(--mg-c-popover-color-background)}:host([data-popper-placement^=left-start]) ::slotted([slot=arrow]),:host([data-popper-placement^=left-end]) ::slotted([slot=arrow]),:host([data-popper-placement^=right-start]) ::slotted([slot=arrow]),:host([data-popper-placement^=right-end]) ::slotted([slot=arrow]){height:calc(var(--mg-b-size-24) + 2*var(--mg-c-popover-border-radius))}:host([data-popper-placement^=left-start]) ::slotted([slot=arrow])::before,:host([data-popper-placement^=left-end]) ::slotted([slot=arrow])::before,:host([data-popper-placement^=right-start]) ::slotted([slot=arrow])::before,:host([data-popper-placement^=right-end]) ::slotted([slot=arrow])::before{top:var(--mg-c-popover-border-radius)}";
 
 const MgPopoverContent = /*@__PURE__*/ proxyCustomElement(class MgPopoverContent extends HTMLElement {
     constructor(registerHost) {

package/dist/components/mg-popover2.js

@@ -6,7 +6,7 @@ import { d as defineCustomElement$2 } from './mg-icon2.js';
 import { d as defineCustomElement$1 } from './mg-popover-content2.js';
 import { c as createPopper } from './popper.js';
 
-const mgPopoverCss = "/*!\n * @prop --mg-c-popover-color-background: Defines the background color of the popover. Default value: `--mg-b-color-light`.\n * @prop --mg-c-popover-color-text: Defines the font color of the popover. Default value: `--mg-b-color-font-dark`.\n * @prop --mg-c-popover-title-font-size: Defines the font size of the popover title. Default value: `--mg-b-font-size-h5`.\n * @prop --mg-c-popover-padding-vertical: Defines the vertical padding of the popover. Default value: `unset`, fallback to `--mg-b-size-16`.\n * @prop --mg-c-popover-padding-horizontal: Defines the horizontal padding of the popover. Default value: `unset`, fallback to `--mg-b-size-16`.\n * @prop --mg-c-popover-max-width: Defines the max-width of the popover. Default value: `--mg-b-size-floating-element-max-width`.\n * @prop --mg-c-popover-min-width: Defines the min-width of the popover. Default value: `unset`.\n */:host{--mg-c-card-spacing:var(--mg-c-popover-padding-vertical, var(--mg-b-size-16)) var(--mg-c-popover-padding-horizontal, var(--mg-b-size-16));--mg-c-card-border:none;--mg-c-card-border-radius:var(--mg-b-size-radius);--mg-c-card-color-background:var(--mg-c-popover-color-background);position:relative;display:contents}:host::slotted(*){display:inline-block}";
+const mgPopoverCss = "/*!\n * @prop --mg-c-popover-color-background: Defines the background color of the popover. Default value: `--mg-b-color-light`.\n * @prop --mg-c-popover-color-text: Defines the font color of the popover. Default value: `--mg-b-color-font-dark`.\n * @prop --mg-c-popover-title-font-size: Defines the font size of the popover title. Default value: `--mg-b-font-size-h5`.\n * @prop --mg-c-popover-padding-vertical: Defines the vertical padding of the popover. Default value: `unset`, fallback to `--mg-b-size-16`.\n * @prop --mg-c-popover-padding-horizontal: Defines the horizontal padding of the popover. Default value: `unset`, fallback to `--mg-b-size-16`.\n * @prop --mg-c-popover-max-width: Defines the max-width of the popover. Default value: `--mg-b-size-floating-element-max-width`.\n * @prop --mg-c-popover-max-height: Defines the max-height of the popover. Default value: `unset`.\n * @prop --mg-c-popover-overflow: Defines the overflow property for the popover. Unset by default, fallback on `--mg-c-card-overflow`.\n * @prop --mg-c-popover-border-radius: Defines the border-radius of the popover. Default value: `--mg-c-card-border-radius-default`.\n * @prop --mg-c-popover-min-width: Defines the min-width of the popover. Default value: `unset`.\n */:host{--mg-c-card-spacing:var(--mg-c-popover-padding-vertical, var(--mg-b-size-16)) var(--mg-c-popover-padding-horizontal, var(--mg-b-size-16));--mg-c-card-border:none;--mg-c-card-border-radius:var(--mg-c-popover-border-radius);--mg-c-card-color-background:var(--mg-c-popover-color-background);position:relative;display:contents}:host::slotted(*){display:inline-block}";
 
 const MgPopover = /*@__PURE__*/ proxyCustomElement(class MgPopover extends HTMLElement {
     constructor(registerHost) {

package/dist/esm/{index-T6kOJXP1.js → index-BluNKQ3L.js}

@@ -2,7 +2,7 @@ const NAMESPACE = 'mg-components';
 const BUILD = /* mg-components */ { hydratedSelectorName: "hydrated", lazyLoad: true, propChangeCallback: true, slotRelocation: true, updatable: true};
 
 const globalScripts = () => {};
-const globalStyles = ":root{--mg-b-size-4:0.4rem;--mg-b-size-8:0.8rem;--mg-b-size-12:1.2rem;--mg-b-size-16:1.6rem;--mg-b-size-20:2rem;--mg-b-size-24:2.4rem;--mg-b-size-32:3.2rem;--mg-b-size-40:4rem;--mg-b-size-48:4.8rem;--mg-b-size-56:5.6rem;--mg-b-size-64:6.4rem;--mg-b-size-72:7.2rem;--mg-b-size-120:12rem;--mg-b-size-border:0.1rem;--mg-b-size-radius:var(--mg-b-size-4);--mg-b-size-floating-element-max-width:40rem;--mg-b-size-min-height:3.5rem;--mg-b-spacing-actions:var(--mg-b-size-8);--mg-b-color-blue-10:rgb(227, 244, 255);--mg-b-color-blue-20:rgb(209, 237, 255);--mg-b-color-blue-30:rgb(166, 219, 255);--mg-b-color-blue-40:rgb(106, 195, 255);--mg-b-color-blue-50:rgb(64, 179, 255);--mg-b-color-blue-60:rgb(22, 162, 255);--mg-b-color-blue-70:rgb(0, 132, 220);--mg-b-color-blue-80:rgb(0, 94, 156);--mg-b-color-blue-90:rgb(0, 67, 111);--mg-b-color-blue-100:rgb(0, 39, 66);--mg-b-color-green-10:rgb(234, 251, 244);--mg-b-color-green-20:rgb(212, 247, 234);--mg-b-color-green-30:rgb(181, 240, 219);--mg-b-color-green-40:rgb(144, 232, 202);--mg-b-color-green-50:rgb(97, 223, 179);--mg-b-color-green-60:rgb(50, 213, 156);--mg-b-color-green-70:rgb(46, 194, 142);--mg-b-color-green-80:rgb(36, 151, 111);--mg-b-color-green-90:rgb(21, 89, 66);--mg-b-color-green-100:rgb(13, 54, 40);--mg-b-color-red-10:rgb(251, 233, 234);--mg-b-color-red-20:rgb(248, 216, 217);--mg-b-color-red-30:rgb(242, 174, 178);--mg-b-color-red-40:rgb(236, 134, 139);--mg-b-color-red-50:rgb(229, 96, 103);--mg-b-color-red-60:rgb(221, 42, 52);--mg-b-color-red-70:rgb(219, 31, 41);--mg-b-color-red-80:rgb(152, 21, 28);--mg-b-color-red-90:rgb(120, 17, 23);--mg-b-color-red-100:rgb(92, 13, 13);--mg-b-color-yellow-10:rgb(255, 247, 230);--mg-b-color-yellow-20:rgb(255, 240, 207);--mg-b-color-yellow-30:rgb(255, 226, 162);--mg-b-color-yellow-40:rgb(255, 212, 118);--mg-b-color-yellow-50:rgb(255, 195, 62);--mg-b-color-yellow-60:rgb(232, 177, 56);--mg-b-color-yellow-70:rgb(181, 138, 44);--mg-b-color-yellow-80:rgb(140, 107, 34);--mg-b-color-yellow-90:rgb(86, 66, 21);--mg-b-color-yellow-100:rgb(53, 41, 13);--mg-b-color-neutral-0:rgb(255, 255, 255);--mg-b-color-neutral-10:rgb(250, 251, 251);--mg-b-color-neutral-20:rgb(236, 238, 238);--mg-b-color-neutral-30:rgb(225, 227, 228);--mg-b-color-neutral-40:rgb(197, 201, 203);--mg-b-color-neutral-50:rgb(182, 188, 190);--mg-b-color-neutral-60:rgb(157, 165, 167);--mg-b-color-neutral-70:rgb(129, 139, 142);--mg-b-color-neutral-80:rgb(101, 113, 117);--mg-b-color-neutral-90:rgb(75, 89, 94);--mg-b-color-neutral-100:rgb(47, 64, 69);--mg-b-color-neutral-110:rgb(21, 40, 46);--mg-b-color-neutral-120:rgb(5, 9, 11);--mg-b-color-dark:var(--mg-b-color-neutral-110);--mg-b-color-light:var(--mg-b-color-neutral-0);--mg-b-color-danger:var(--mg-b-color-red-70);--mg-b-color-text-on-danger:var(--mg-b-color-light);--mg-b-color-info:var(--mg-b-color-blue-80);--mg-b-color-text-on-info:var(--mg-b-color-light);--mg-b-color-success:var(--mg-b-color-green-60);--mg-b-color-text-on-success:var(--mg-b-color-dark);--mg-b-color-warning:var(--mg-b-color-yellow-50);--mg-b-color-text-on-warning:var(--mg-b-color-dark);--mg-b-color-app:var(--mg-b-color-blue-80);--mg-b-color-primary:var(--mg-b-color-neutral-110);--mg-b-color-text-on-primary:var(--mg-b-color-light);--mg-b-color-secondary:var(--mg-b-color-neutral-10);--mg-b-color-text-on-secondary:var(--mg-b-color-dark);--mg-b-font-size:1.3rem;--mg-b-font-size-small:1.17rem;--mg-b-font-size-h1:calc(var(--mg-b-font-size) * 1.85);--mg-b-font-size-h2:calc(var(--mg-b-font-size) * 1.65);--mg-b-font-size-h3:calc(var(--mg-b-font-size) * 1.35);--mg-b-font-size-h4:calc(var(--mg-b-font-size) * 1.2);--mg-b-font-size-h5:calc(var(--mg-b-font-size) * 1.1);--mg-b-font-size-h6:calc(var(--mg-b-font-size) * 0.8);--mg-b-small-font-size:0.9em;--mg-b-font-family:\"Open Sans\", sans-serif;--mg-b-font-family-heading:var(--mg-b-font-family);--mg-b-line-height:1.4;--mg-b-box-shadow:0 0.3rem 0.8rem 0 color-mix(in srgb, var(--mg-b-color-dark), transparent 85%);--mg-b-opacity-element-disabled:0.4}:root{--mg-c-badge-size:var(--mg-b-size-16);--mg-c-badge-font-size:var(--mg-b-font-size-small);--mg-c-button-border-radius:var(--mg-b-size-radius);--mg-c-button-icon-border-radius:var(--mg-b-size-min-height);--mg-c-button-color-background-danger:var(--mg-b-color-danger);--mg-c-button-color-border-danger:var(--mg-b-color-red-80);--mg-c-button-color-gradient-danger:var(--mg-b-color-red-80);--mg-c-button-color-text-danger:var(--mg-b-color-text-on-danger);--mg-c-button-color-background-info:var(--mg-b-color-info);--mg-c-button-color-border-info:var(--mg-b-color-blue-90);--mg-c-button-color-gradient-info:var(--mg-b-color-blue-90);--mg-c-button-color-text-info:var(--mg-b-color-text-on-info);--mg-c-button-color-background-success:var(--mg-b-color-success);--mg-c-button-color-border-success:var(--mg-b-color-green-70);--mg-c-button-color-gradient-success:var(--mg-b-color-green-70);--mg-c-button-color-text-success:var(--mg-b-color-text-on-success);--mg-c-button-color-background-warning:var(--mg-b-color-warning);--mg-c-button-color-border-warning:var(--mg-b-color-yellow-60);--mg-c-button-color-gradient-warning:var(--mg-b-color-yellow-60);--mg-c-button-color-text-warning:var(--mg-b-color-text-on-warning);--mg-c-button-color-background-primary:var(--mg-b-color-primary);--mg-c-button-color-border-primary:var(--mg-b-color-neutral-120);--mg-c-button-color-gradient-primary:var(--mg-b-color-neutral-120);--mg-c-button-color-text-primary:var(--mg-b-color-text-on-primary);--mg-c-button-color-background-secondary:var(--mg-b-color-secondary);--mg-c-button-color-border-secondary:var(--mg-b-color-neutral-20);--mg-c-button-color-gradient-secondary:var(--mg-b-color-neutral-20);--mg-c-button-color-text-secondary:var(--mg-b-color-text-on-secondary);--mg-c-button-color-background-danger-alt:var(--mg-b-color-neutral-10);--mg-c-button-color-border-danger-alt:var(--mg-b-color-neutral-20);--mg-c-button-color-gradient-danger-alt:var(--mg-b-color-neutral-20);--mg-c-button-color-text-danger-alt:var(--mg-b-color-danger);--mg-c-card-spacing-default:var(--mg-b-size-16);--mg-c-card-border-radius-default:var(--mg-b-size-12);--mg-c-card-color-background-default:var(--mg-b-color-light);--mg-c-card-border-default:var(--mg-b-size-border) solid var(--mg-b-color-neutral-30);--mg-c-card-box-shadow-default:var(--mg-b-box-shadow);--mg-c-divider-color-background:color-mix(in srgb, var(--mg-b-color-dark), transparent 85%);--mg-c-divider-thickness:var(--mg-b-size-border);--mg-c-divider-spacing-vertical:var(--mg-b-size-40);--mg-c-icon-border-radius:50%;--mg-c-tag-height:var(--mg-b-size-24);--mg-c-tag-border-radius:var(--mg-b-size-radius);--mg-c-tag-font-size:var(--mg-b-font-size-small);--mg-c-tooltip-border-radius:var(--mg-b-size-radius);--mg-c-tooltip-color-background:var(--mg-b-color-dark);--mg-c-tooltip-color-text:var(--mg-b-color-light);--mg-c-details-spacing:var(--mg-b-size-8);--mg-c-illustrated-message-spacing-vertical:var(--mg-b-size-40);--mg-c-input-border-width:var(--mg-b-size-border);--mg-c-input-border-radius:var(--mg-b-size-radius);--mg-c-input-color-border:rgb(181 194 201);--mg-c-input-placeholder-color-text:rgb(181 194 201);--mg-c-input-color-icon:rgb(181 194 201);--mg-c-input-color-box-shadow-focus:rgb(0 221 255 / 50%);--mg-c-input-error-color-background:color-mix(in srgb, var(--mg-b-color-danger), white 95%);--mg-c-input-toggle-border-radius-ratio:2;--mg-c-input-check-size:var(--mg-b-size-16);--mg-c-menu-item-color:var(--mg-b-color-app);--mg-c-message-border-radius:var(--mg-b-size-radius);--mg-c-modal-border-radius:var(--mg-b-size-radius);--mg-c-modal-title-font-size:var(--mg-b-font-size-h3);--mg-c-panel-border-radius:var(--mg-b-size-radius);--mg-c-panel-box-shadow:var(--mg-b-box-shadow);--mg-c-panel-content-spacing:var(--mg-b-size-16);--mg-c-popover-color-background:var(--mg-b-color-light);--mg-c-popover-color-text:var(--mg-b-color-dark);--mg-c-popover-title-font-size:var(--mg-b-font-size-h5);--mg-c-popover-max-width:var(--mg-b-size-floating-element-max-width);--mg-c-progress-size:var(--mg-b-size-8);--mg-c-progress-border-color:var(--mg-b-color-neutral-80);--mg-c-progress-bar-color-background:var(--mg-b-color-neutral-30);--mg-c-progress-fill-color-background:var(--mg-b-color-app);--mg-c-tabs-color:var(--mg-b-color-app)}html{font-size:62.5%}body{font-family:var(--mg-b-font-family);font-size:var(--mg-b-font-size);-webkit-font-smoothing:antialiased;line-height:var(--mg-b-line-height)}:root{--mg-b-font-family:system-ui, sans-serif}";
+const globalStyles = ":root{--mg-b-size-4:0.4rem;--mg-b-size-8:0.8rem;--mg-b-size-12:1.2rem;--mg-b-size-16:1.6rem;--mg-b-size-20:2rem;--mg-b-size-24:2.4rem;--mg-b-size-32:3.2rem;--mg-b-size-40:4rem;--mg-b-size-48:4.8rem;--mg-b-size-56:5.6rem;--mg-b-size-64:6.4rem;--mg-b-size-72:7.2rem;--mg-b-size-120:12rem;--mg-b-size-border:0.1rem;--mg-b-size-radius:var(--mg-b-size-4);--mg-b-size-floating-element-max-width:40rem;--mg-b-size-min-height:3.5rem;--mg-b-spacing-actions:var(--mg-b-size-8);--mg-b-color-blue-10:rgb(227, 244, 255);--mg-b-color-blue-20:rgb(209, 237, 255);--mg-b-color-blue-30:rgb(166, 219, 255);--mg-b-color-blue-40:rgb(106, 195, 255);--mg-b-color-blue-50:rgb(64, 179, 255);--mg-b-color-blue-60:rgb(22, 162, 255);--mg-b-color-blue-70:rgb(0, 132, 220);--mg-b-color-blue-80:rgb(0, 94, 156);--mg-b-color-blue-90:rgb(0, 67, 111);--mg-b-color-blue-100:rgb(0, 39, 66);--mg-b-color-green-10:rgb(234, 251, 244);--mg-b-color-green-20:rgb(212, 247, 234);--mg-b-color-green-30:rgb(181, 240, 219);--mg-b-color-green-40:rgb(144, 232, 202);--mg-b-color-green-50:rgb(97, 223, 179);--mg-b-color-green-60:rgb(50, 213, 156);--mg-b-color-green-70:rgb(46, 194, 142);--mg-b-color-green-80:rgb(36, 151, 111);--mg-b-color-green-90:rgb(21, 89, 66);--mg-b-color-green-100:rgb(13, 54, 40);--mg-b-color-red-10:rgb(251, 233, 234);--mg-b-color-red-20:rgb(248, 216, 217);--mg-b-color-red-30:rgb(242, 174, 178);--mg-b-color-red-40:rgb(236, 134, 139);--mg-b-color-red-50:rgb(229, 96, 103);--mg-b-color-red-60:rgb(221, 42, 52);--mg-b-color-red-70:rgb(219, 31, 41);--mg-b-color-red-80:rgb(152, 21, 28);--mg-b-color-red-90:rgb(120, 17, 23);--mg-b-color-red-100:rgb(92, 13, 13);--mg-b-color-yellow-10:rgb(255, 247, 230);--mg-b-color-yellow-20:rgb(255, 240, 207);--mg-b-color-yellow-30:rgb(255, 226, 162);--mg-b-color-yellow-40:rgb(255, 212, 118);--mg-b-color-yellow-50:rgb(255, 195, 62);--mg-b-color-yellow-60:rgb(232, 177, 56);--mg-b-color-yellow-70:rgb(181, 138, 44);--mg-b-color-yellow-80:rgb(140, 107, 34);--mg-b-color-yellow-90:rgb(86, 66, 21);--mg-b-color-yellow-100:rgb(53, 41, 13);--mg-b-color-neutral-0:rgb(255, 255, 255);--mg-b-color-neutral-10:rgb(250, 251, 251);--mg-b-color-neutral-20:rgb(236, 238, 238);--mg-b-color-neutral-30:rgb(225, 227, 228);--mg-b-color-neutral-40:rgb(197, 201, 203);--mg-b-color-neutral-50:rgb(182, 188, 190);--mg-b-color-neutral-60:rgb(157, 165, 167);--mg-b-color-neutral-70:rgb(129, 139, 142);--mg-b-color-neutral-80:rgb(101, 113, 117);--mg-b-color-neutral-90:rgb(75, 89, 94);--mg-b-color-neutral-100:rgb(47, 64, 69);--mg-b-color-neutral-110:rgb(21, 40, 46);--mg-b-color-neutral-120:rgb(5, 9, 11);--mg-b-color-dark:var(--mg-b-color-neutral-110);--mg-b-color-light:var(--mg-b-color-neutral-0);--mg-b-color-danger:var(--mg-b-color-red-70);--mg-b-color-text-on-danger:var(--mg-b-color-light);--mg-b-color-info:var(--mg-b-color-blue-80);--mg-b-color-text-on-info:var(--mg-b-color-light);--mg-b-color-success:var(--mg-b-color-green-60);--mg-b-color-text-on-success:var(--mg-b-color-dark);--mg-b-color-warning:var(--mg-b-color-yellow-50);--mg-b-color-text-on-warning:var(--mg-b-color-dark);--mg-b-color-app:var(--mg-b-color-blue-80);--mg-b-color-primary:var(--mg-b-color-neutral-110);--mg-b-color-text-on-primary:var(--mg-b-color-light);--mg-b-color-secondary:var(--mg-b-color-neutral-10);--mg-b-color-text-on-secondary:var(--mg-b-color-dark);--mg-b-font-size:1.3rem;--mg-b-font-size-small:1.17rem;--mg-b-font-size-h1:calc(var(--mg-b-font-size) * 1.85);--mg-b-font-size-h2:calc(var(--mg-b-font-size) * 1.65);--mg-b-font-size-h3:calc(var(--mg-b-font-size) * 1.35);--mg-b-font-size-h4:calc(var(--mg-b-font-size) * 1.2);--mg-b-font-size-h5:calc(var(--mg-b-font-size) * 1.1);--mg-b-font-size-h6:calc(var(--mg-b-font-size) * 0.8);--mg-b-small-font-size:0.9em;--mg-b-font-family:'Open Sans', sans-serif;--mg-b-font-family-heading:var(--mg-b-font-family);--mg-b-line-height:1.4;--mg-b-box-shadow:0 0.3rem 0.8rem 0 color-mix(in srgb, var(--mg-b-color-dark), transparent 85%);--mg-b-opacity-element-disabled:0.4}:root{--mg-c-badge-size:var(--mg-b-size-16);--mg-c-badge-font-size:var(--mg-b-font-size-small);--mg-c-button-border-radius:var(--mg-b-size-radius);--mg-c-button-icon-border-radius:var(--mg-b-size-min-height);--mg-c-button-color-background-danger:var(--mg-b-color-danger);--mg-c-button-color-border-danger:var(--mg-b-color-red-80);--mg-c-button-color-gradient-danger:var(--mg-b-color-red-80);--mg-c-button-color-text-danger:var(--mg-b-color-text-on-danger);--mg-c-button-color-background-info:var(--mg-b-color-info);--mg-c-button-color-border-info:var(--mg-b-color-blue-90);--mg-c-button-color-gradient-info:var(--mg-b-color-blue-90);--mg-c-button-color-text-info:var(--mg-b-color-text-on-info);--mg-c-button-color-background-success:var(--mg-b-color-success);--mg-c-button-color-border-success:var(--mg-b-color-green-70);--mg-c-button-color-gradient-success:var(--mg-b-color-green-70);--mg-c-button-color-text-success:var(--mg-b-color-text-on-success);--mg-c-button-color-background-warning:var(--mg-b-color-warning);--mg-c-button-color-border-warning:var(--mg-b-color-yellow-60);--mg-c-button-color-gradient-warning:var(--mg-b-color-yellow-60);--mg-c-button-color-text-warning:var(--mg-b-color-text-on-warning);--mg-c-button-color-background-primary:var(--mg-b-color-primary);--mg-c-button-color-border-primary:var(--mg-b-color-neutral-120);--mg-c-button-color-gradient-primary:var(--mg-b-color-neutral-120);--mg-c-button-color-text-primary:var(--mg-b-color-text-on-primary);--mg-c-button-color-background-secondary:var(--mg-b-color-secondary);--mg-c-button-color-border-secondary:var(--mg-b-color-neutral-20);--mg-c-button-color-gradient-secondary:var(--mg-b-color-neutral-20);--mg-c-button-color-text-secondary:var(--mg-b-color-text-on-secondary);--mg-c-button-color-background-danger-alt:var(--mg-b-color-neutral-10);--mg-c-button-color-border-danger-alt:var(--mg-b-color-neutral-20);--mg-c-button-color-gradient-danger-alt:var(--mg-b-color-neutral-20);--mg-c-button-color-text-danger-alt:var(--mg-b-color-danger);--mg-c-card-spacing-default:var(--mg-b-size-16);--mg-c-card-border-radius-default:var(--mg-b-size-12);--mg-c-card-color-background-default:var(--mg-b-color-light);--mg-c-card-border-default:var(--mg-b-size-border) solid var(--mg-b-color-neutral-30);--mg-c-card-box-shadow-default:var(--mg-b-box-shadow);--mg-c-divider-color-background:color-mix(in srgb, var(--mg-b-color-dark), transparent 85%);--mg-c-divider-thickness:var(--mg-b-size-border);--mg-c-divider-spacing-vertical:var(--mg-b-size-40);--mg-c-icon-border-radius:50%;--mg-c-tag-height:var(--mg-b-size-24);--mg-c-tag-border-radius:var(--mg-b-size-radius);--mg-c-tag-font-size:var(--mg-b-font-size-small);--mg-c-tooltip-border-radius:var(--mg-b-size-radius);--mg-c-tooltip-color-background:var(--mg-b-color-dark);--mg-c-tooltip-color-text:var(--mg-b-color-light);--mg-c-details-spacing:var(--mg-b-size-8);--mg-c-illustrated-message-spacing-vertical:var(--mg-b-size-40);--mg-c-input-border-width:var(--mg-b-size-border);--mg-c-input-border-radius:var(--mg-b-size-radius);--mg-c-input-color-border:rgb(181 194 201);--mg-c-input-placeholder-color-text:rgb(181 194 201);--mg-c-input-color-icon:rgb(181 194 201);--mg-c-input-color-box-shadow-focus:rgb(0 221 255 / 50%);--mg-c-input-error-color-background:color-mix(in srgb, var(--mg-b-color-danger), white 95%);--mg-c-input-toggle-border-radius-ratio:2;--mg-c-input-check-size:var(--mg-b-size-16);--mg-c-menu-item-color:var(--mg-b-color-app);--mg-c-message-border-radius:var(--mg-b-size-radius);--mg-c-modal-border-radius:var(--mg-c-card-border-radius-default);--mg-c-modal-title-font-size:var(--mg-b-font-size-h3);--mg-c-panel-border-radius:var(--mg-c-card-border-radius-default);--mg-c-panel-box-shadow:var(--mg-b-box-shadow);--mg-c-panel-content-spacing:var(--mg-b-size-16);--mg-c-popover-border-radius:var(--mg-c-card-border-radius-default);--mg-c-popover-color-background:var(--mg-b-color-light);--mg-c-popover-color-text:var(--mg-b-color-dark);--mg-c-popover-title-font-size:var(--mg-b-font-size-h5);--mg-c-popover-max-width:var(--mg-b-size-floating-element-max-width);--mg-c-progress-size:var(--mg-b-size-8);--mg-c-progress-border-color:var(--mg-b-color-neutral-80);--mg-c-progress-bar-color-background:var(--mg-b-color-neutral-30);--mg-c-progress-fill-color-background:var(--mg-b-color-app);--mg-c-tabs-color:var(--mg-b-color-app)}html{font-size:62.5%}body{font-family:var(--mg-b-font-family);font-size:var(--mg-b-font-size);-webkit-font-smoothing:antialiased;line-height:var(--mg-b-line-height)}:root{--mg-b-font-family:system-ui, sans-serif}";
 
 /*
  Stencil Client Platform v4.38.0 | MIT Licensed | https://stenciljs.com