@mgdis/mg-components 6.25.0 → 6.27.0

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

@@ -30,6 +30,13 @@ export class MgTooltip {
          * Disable tooltip
          */
         this.disabled = false;
+        /**
+         * Toggle the popper scroll and resize listeners, only needed while the tooltip is visible
+         * @param enabled - listeners state to apply
+         */
+        this.setPopperEventListeners = (enabled) => {
+            this.popper.setOptions((options) => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled }] })));
+        };
         /**
          * Show tooltip
          */
@@ -37,7 +44,7 @@ export class MgTooltip {
             // Make the tooltip visible
             this.mgTooltipContent.dataset.show = '';
             // Enable the event listeners
-            this.popper.setOptions((options) => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: true }] })));
+            this.setPopperEventListeners(true);
             // hide when click outside on nextTick to prevent event to trigger after creation
             nextTick(() => {
                 this.windows.forEach((localWindow) => {
@@ -53,7 +60,7 @@ export class MgTooltip {
             // Hide the tooltip
             this.mgTooltipContent.removeAttribute('data-show');
             // Disable the event listeners
-            this.popper.setOptions((options) => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: false }] })));
+            this.setPopperEventListeners(false);
             // Remove event listener
             this.windows.forEach((localWindow) => {
                 localWindow.removeEventListener('click', this.handleClickOutside, false);
@@ -117,6 +124,47 @@ export class MgTooltip {
         this.resetGuard = () => {
             this.guard = undefined;
         };
+        /**
+         * Display tooltip when the tooltiped element takes focus
+         */
+        this.handleTooltipedElementFocus = () => {
+            this.guard = Guard.FOCUS;
+            this.setDisplay(true);
+        };
+        /**
+         * Hide tooltip when the tooltiped element loses focus
+         */
+        this.handleTooltipedElementBlur = () => {
+            this.resetGuard();
+            this.setDisplay(false);
+        };
+        /**
+         * Display tooltip when the tooltiped element is hovered
+         */
+        this.handleTooltipedElementMouseenter = () => {
+            this.tooltipMouseListenerAction(Guard.HOVER_TOOLTIPED_ELEMENT, 'mouseenter', Guard.HOVER_TOOLTIP_ELEMENT);
+        };
+        /**
+         * Hide tooltip when the tooltiped element is not hovered anymore
+         */
+        this.handleTooltipedElementMouseleave = () => {
+            this.tooltipMouseListenerAction(Guard.HOVER_TOOLTIPED_ELEMENT, 'mouseleave', Guard.HOVER_TOOLTIP_ELEMENT);
+        };
+        /**
+         * Manage all tooltiped element listeners
+         * @param element - element to bind or unbind
+         * @param action - process to apply on element listeners
+         */
+        this.manageTooltipedElementListeners = (element, action) => {
+            element[action]('focus', this.handleTooltipedElementFocus);
+            // as `click` event is the composition of `mousedown` and `mouseup` event,
+            // and `click` event trigger `focus` event after a success `mousedown` wich set the `guard` to `Guard.FOCUS`
+            // we reset the guard on `mouseup` event to unlock tooltip
+            element[action]('mouseup', this.resetGuard);
+            element[action]('blur', this.handleTooltipedElementBlur);
+            element[action]('mouseenter', this.handleTooltipedElementMouseenter);
+            element[action]('mouseleave', this.handleTooltipedElementMouseleave);
+        };
         /**
          * Update slot content when it is a mg-button
          * @param mgButton - slotted mg-button
@@ -143,10 +191,11 @@ export class MgTooltip {
             }
         };
         /**
-         * Set popper instance
-         * @param strategy - popper strategy to apply on instance
+         * Set popper instance on the current tooltiped element
          */
-        this.setPopper = (strategy) => {
+        this.setPopper = () => {
+            // mg-popover content is already `fixed`: position a nested tooltip relatively to it
+            const strategy = this.element.closest('mg-popover') !== null ? 'absolute' : 'fixed';
             // Create popperjs tooltip
             this.popper = createPopper(this.tooltipedElement, this.mgTooltipContent, {
                 placement: this.placement,
@@ -172,29 +221,20 @@ export class MgTooltip {
          * @param element - tooltiped element
          */
         this.setTooltipedElement = (element) => {
+            // unbind the previous element so its listeners do not stack up on every `disabled` toggle
+            if (this.tooltipedElement !== undefined) {
+                this.manageTooltipedElementListeners(this.tooltipedElement, 'removeEventListener');
+            }
             this.tooltipedElement = element;
-            // Manage tooltipedElement focus events
-            this.tooltipedElement.addEventListener('focus', () => {
-                this.guard = Guard.FOCUS;
-                this.setDisplay(true);
-            });
-            // as `click` event is the composition of `mousedown` and `mouseup` event,
-            // and `click` event trigger `focus` event after a success `mousedown` wich set the `guard` to `Guard.FOCUS`
-            // we reset the guard on `mouseup` event to unlock tooltip
-            this.tooltipedElement.addEventListener('mouseup', () => {
-                this.resetGuard();
-            });
-            this.tooltipedElement.addEventListener('blur', () => {
-                this.resetGuard();
-                this.setDisplay(false);
-            });
-            // manage tooltipElement & tooltipedElement mouseenter/mouseleave events
-            this.tooltipedElement.addEventListener('mouseenter', () => {
-                this.tooltipMouseListenerAction(Guard.HOVER_TOOLTIPED_ELEMENT, 'mouseenter', Guard.HOVER_TOOLTIP_ELEMENT);
-            });
-            this.tooltipedElement.addEventListener('mouseleave', () => {
-                this.tooltipMouseListenerAction(Guard.HOVER_TOOLTIPED_ELEMENT, 'mouseleave', Guard.HOVER_TOOLTIP_ELEMENT);
-            });
+            this.manageTooltipedElementListeners(this.tooltipedElement, 'addEventListener');
+            // popper freezes its reference element, so re-create it to follow the new one.
+            // The initial instance comes from `componentDidLoad`.
+            if (this.popper !== undefined) {
+                this.popper.destroy();
+                this.setPopper();
+                // a fresh instance has its listeners enabled, realign them
+                this.setPopperEventListeners(this.display);
+            }
         };
         /**
          * Set button mutation observer
@@ -222,17 +262,36 @@ export class MgTooltip {
             }).observe(mgButton, { attributes: true });
         };
         /**
-         * Set tooltiped element aria-describedby
-         * @param element - element to update
+         * Reconcile the tooltiped element a11y: the tooltip is restituted — `aria-describedby` exposed, and a
+         * non-interactive element made focusable (`tabindex` + `role`) — unless it is disabled and not displayed.
+         * Pre-existing `aria-describedby` ids are preserved.
          */
-        this.setAriaDescribedby = (element) => {
-            // Set aria-describedby
-            if (!element.hasAttribute('aria-describedby')) {
-                this.tooltipedElement.setAttribute('aria-describedby', this.identifier);
+        this.updateTooltipedElementA11y = () => {
+            const restitute = !this.disabled || this.display;
+            const currentValue = this.tooltipedElement.getAttribute('aria-describedby');
+            const ids = new Set(currentValue !== null ? currentValue.split(' ') : []);
+            if (restitute) {
+                ids.add(this.identifier);
+            }
+            else {
+                ids.delete(this.identifier);
+            }
+            if (ids.size > 0) {
+                this.tooltipedElement.setAttribute('aria-describedby', [...ids].join(' '));
             }
             else {
-                // We ensure to have uniq ids
-                element.setAttribute('aria-describedby', `${[...new Set([...element.getAttribute('aria-describedby').split(' '), this.identifier])].join(' ')}`);
+                this.tooltipedElement.removeAttribute('aria-describedby');
+            }
+            if (this.hasCustomTabIndex) {
+                if (restitute) {
+                    this.tooltipedElement.setAttribute('role', 'button');
+                    if (!this.tooltipedElement.hasAttribute('tabindex'))
+                        this.tooltipedElement.setAttribute('tabindex', '0');
+                }
+                else {
+                    this.tooltipedElement.removeAttribute('role');
+                    this.tooltipedElement.removeAttribute('tabindex');
+                }
             }
         };
     }
@@ -257,14 +316,11 @@ export class MgTooltip {
         else {
             this.hide();
         }
+        this.updateTooltipedElementA11y();
     }
-    watchDisabled(newValue) {
-        if (this.hasCustomTabIndex) {
-            if (newValue)
-                this.tooltipedElement.removeAttribute('tabindex');
-            else if (!this.tooltipedElement.hasAttribute('tabindex'))
-                this.tooltipedElement.setAttribute('tabindex', '0');
-        }
+    watchDisabled() {
+        // Only fires on runtime changes; the initial reconcile is done in componentDidLoad via watchDisplay.
+        this.updateTooltipedElementA11y();
     }
     /**
      * Render tooltip content element and init listeners
@@ -304,7 +360,6 @@ export class MgTooltip {
         // Get tooltip element
         this.renderTooltipContent();
         //validate properties
-        this.watchDisabled(this.disabled);
         this.watchMessage(this.message);
         this.watchIdentifier(this.identifier);
     }
@@ -333,20 +388,13 @@ export class MgTooltip {
         if (this.element.querySelector('mg-button[full-width]') !== null) {
             this.element.classList.add('mg-c-tooltip--full-width');
         }
-        // Add tabindex to slotted element if we can't find any interactive element
-        if (!this.disabled && [undefined, null].includes(interactiveElement)) {
-            this.hasCustomTabIndex = true;
-            slotElement.tabIndex = 0;
-            // Add role on non-interactive element to work with "aria-describedby" for screen readers
-            slotElement.setAttribute('role', 'button');
-        }
-        // apply a11y aria
-        this.setAriaDescribedby(slotElement);
+        // Non-interactive slotted element (no focusable element found): needs synthesized focus to be reachable.
+        this.hasCustomTabIndex = [undefined, null].includes(interactiveElement);
         // set Tooltip
-        this.setPopper(this.element.closest('mg-popover') !== null ? 'absolute' : 'fixed');
+        this.setPopper();
         // add document keyboard handler
         document.addEventListener('keydown', this.handlePressEscape);
-        // check props
+        // check props (also does the initial a11y reconcile)
         this.watchDisplay(this.display);
     }
     /**
@@ -371,7 +419,7 @@ export class MgTooltip {
      * @returns HTML Element
      */
     render() {
-        return (h(Host, { key: '5cd926147c1b6723065c5334699764f32a8a06c9' }, h("slot", { key: 'a1b208798c79e34a207f3bedb2ad9662e02e83e2' }), h("slot", { key: '4f332961968fd3541caf47c2fd9072720fa2ee71', name: "content" })));
+        return (h(Host, { key: '1e9cfc59c335510c21d159253e3f8e1b4256a465' }, h("slot", { key: 'c52d57e3302d4865a2365ac62c931af2948bdf03' }), h("slot", { key: '527b5d8ae562ed1f5faed74356f10be5aca10ac4', name: "content" })));
     }
     static get is() { return "mg-tooltip"; }
     static get encapsulation() { return "shadow"; }

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

@@ -14,7 +14,38 @@ export class MgInput {
         // helpText/errorMessage are injected via innerHTML and may contain HTML: when block content
         // is detected we fall back to <div> to keep the markup valid (RGAA 8.2), otherwise we use a
         // semantic <p> for the (textual) message (RGAA 8.9).
-        this.blockLevelContentRegExp = /<(address|article|aside|blockquote|details|dialog|div|dl|fieldset|figure|figcaption|footer|form|h[1-6]|header|hr|main|nav|ol|p|pre|section|table|ul)[\s/>]/i;
+        this.blockLevelTags = new Set([
+            'address',
+            'article',
+            'aside',
+            'blockquote',
+            'details',
+            'dialog',
+            'div',
+            'dl',
+            'fieldset',
+            'figure',
+            'figcaption',
+            'footer',
+            'form',
+            'h1',
+            'h2',
+            'h3',
+            'h4',
+            'h5',
+            'h6',
+            'header',
+            'hr',
+            'main',
+            'nav',
+            'ol',
+            'p',
+            'pre',
+            'section',
+            'table',
+            'ul',
+        ]);
+        this.openingTagRegExp = /<([a-z1-6]+)[\s/>]/gi;
         // style
         this.classInput = 'mg-c-input';
         this.classHasError = 'mg-c-input--has-error';
@@ -292,7 +323,11 @@ export class MgInput {
      * @returns the tag name to use
      */
     getSlotMessageTagName(content) {
-        return this.blockLevelContentRegExp.test(content) ? 'div' : 'p';
+        for (const [, tagName] of content.matchAll(this.openingTagRegExp)) {
+            if (this.blockLevelTags.has(tagName.toLowerCase()))
+                return 'div';
+        }
+        return 'p';
     }
     /**
      * Get the existing slotted element or (re)create it with the expected tag.
@@ -366,10 +401,10 @@ export class MgInput {
      */
     render() {
         const isGroup = this.isFieldset && !this.isReadonly;
-        return (h(Host, { key: 'e5803717999bac5e4a08910008176baeb426f634', class: this.element.classList.toString(), role: isGroup ? 'group' : undefined, "aria-labelledby": isGroup ? `${this.identifier}-title` : undefined }, h("div", { key: '32b04b05e8a4352536965fcd792f3c206dad9270', class: { 'mg-c-input__title': true, 'mg-u-visually-hidden': this.labelHide } }, h("slot", { key: '2bb360ff8b4a86facb0b7f97fdf7dbbb49b5f6c0', name: this.slotLabel }), this.tooltip &&
+        return (h(Host, { key: '5a321d04d50aa63f86237a1dd72d2ac508b8d4cf', class: this.element.classList.toString(), role: isGroup ? 'group' : undefined, "aria-labelledby": isGroup ? `${this.identifier}-title` : undefined }, h("div", { key: '5d247500c19370d6ee1de79e14ef0c016fe38f7a', class: { 'mg-c-input__title': true, 'mg-u-visually-hidden': this.labelHide } }, h("slot", { key: 'cf56e42a0b56ab855a1b6089fbbd573ef5676b3d', name: this.slotLabel }), this.tooltip &&
             (this.tooltipPosition === 'label' || this.labelOnTop) &&
             !this.labelHide &&
-            this.renderTooltip()), h("div", { key: '0c6751757d182029e1ac6ea4f8a4fcc7aeffb85e', class: "mg-c-input__input-container" }, this.inputContainerElements())));
+            this.renderTooltip()), h("div", { key: 'dfc9112bb933c1c536bdb4e9ef462e0f921a0b82', class: "mg-c-input__input-container" }, this.inputContainerElements())));
     }
     static get is() { return "mg-input"; }
     static get encapsulation() { return "shadow"; }

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

@@ -295,9 +295,7 @@ export class MgInputCheckbox {
          * Renders the readonly value of the input.
          * @returns The rendered readonly value.
          */
-        this.renderReadonly = (readonlyValue) => {
-            return this.inputVerticalList ? (h("ul", { class: "mg-c-input__readonly-value" }, readonlyValue.map((value) => (h("li", { key: value }, h("b", null, value)))))) : (h("b", { class: "mg-c-input__readonly-value" }, readonlyValue.join(', ')));
-        };
+        this.renderReadonly = (readonlyValue) => (h("b", { class: "mg-c-input__readonly-value" }, readonlyValue.join(', ')));
         /**
          * Renders the MgInputCheckboxList component.
          * @returns The rendered MgInputCheckboxList component.
@@ -605,7 +603,7 @@ export class MgInputCheckbox {
         else {
             inputContent = this.renderCheckboxMulti();
         }
-        return (h("mg-input", { key: '8e403fd79ca8a9bb2db5545e946a3763eb156551', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: !this.readonly ? this.required : undefined, tooltip: this.tooltip, tooltipPosition: this.readonly && readonlyValue.length === 0 ? 'label' : this.tooltipPosition, helpText: !this.readonly ? this.helpText : undefined, errorMessage: !this.readonly ? this.errorMessage : undefined }, inputContent));
+        return (h("mg-input", { key: 'e243244fb902cf960d112502e4627a787212db31', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: !this.readonly ? this.required : undefined, tooltip: this.tooltip, tooltipPosition: this.readonly && readonlyValue.length === 0 ? 'label' : this.tooltipPosition, helpText: !this.readonly ? this.helpText : undefined, errorMessage: !this.readonly ? this.errorMessage : undefined }, inputContent));
     }
     static get is() { return "mg-input-checkbox"; }
     static get encapsulation() { return "shadow"; }

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

@@ -352,11 +352,29 @@ export class MgInputCombobox {
                 }
             }
         };
+        /**
+         * Check if an option matches the current filter
+         * @param option - option to match
+         * @returns true if the option matches the filter
+         */
+        this.matchFilter = (option) => this.filter === '' || option.title.toLocaleLowerCase().includes(this.filter.toLocaleLowerCase());
+        /**
+         * Get all the options matching the current filter
+         * @returns filtered options
+         */
+        this.getFilteredOptions = () => this.options.items.filter(this.matchFilter);
         /**
          * Get first page with filter applied
          * @returns first page with filter applied
          */
-        this.getFirstPage = () => this.options.getPage(0, (option) => this.filter === '' || option.title.toLocaleLowerCase().includes(this.filter.toLocaleLowerCase()));
+        this.getFirstPage = () => {
+            const page = this.options.getPage(0, this.matchFilter);
+            // `Paginate` keeps the unfiltered total: realign it with the filtered options, except in
+            // `fetchurl` mode where the total counts the options left to load
+            if (this.fetchurl === undefined)
+                page.total = this.getFilteredOptions().length;
+            return page;
+        };
         /**
          * Loading wrapper with a given action
          * @param action - wrapped loading action
@@ -400,9 +418,7 @@ export class MgInputCombobox {
             return promise()
                 .then(() => {
                 // parse full items list from options
-                const options = this.filter === ''
-                    ? this.options.items
-                    : this.options.items.filter((option) => option.title.includes(this.filter));
+                const options = this.getFilteredOptions();
                 // update visual focus
                 if (action.name !== 'load-data') {
                     index = this.page.getIndexFromCursor(action.cursor, this.loadingAction === 'load-more' && index >= 0 ? options[index] : this.option);
@@ -439,7 +455,9 @@ export class MgInputCombobox {
                 return nextTick(() => {
                     if (typeof this.page.next === 'function') {
                         const nextPage = this.page.next();
-                        this.page = new Page(Object.assign(Object.assign({}, nextPage), { items: [...this.page.items, ...nextPage.items] }));
+                        this.page = new Page(Object.assign(Object.assign({}, nextPage), { items: [...this.page.items, ...nextPage.items],
+                            // `Paginate` keeps the unfiltered total, realign it as in `getFirstPage`
+                            total: this.getFilteredOptions().length }));
                     }
                 });
             }
@@ -778,7 +796,7 @@ export class MgInputCombobox {
         else {
             activeDescendant = (_e = this.value) === null || _e === void 0 ? void 0 : _e.value;
         }
-        return (h("mg-input", { key: 'c8cff9468c9bfdcc6dd5c96c1452ad81620e050c', label: this.label, identifier: this.identifier, class: this.classCollection.classes.join(' '), ariaDescribedbyIDs: popoverContent && popoverContent !== 'list' ? popoverContent : undefined, 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 ? (readonlyValue && h("b", { class: "mg-c-input__readonly-value" }, readonlyValue)) : (h("mg-popover", { identifier: this.popoverId, placement: this.popoverPlacement, display: this.popoverDisplay, style: {
+        return (h("mg-input", { key: '047c14310f70117e1aec89161d2261f175487be7', label: this.label, identifier: this.identifier, class: this.classCollection.classes.join(' '), ariaDescribedbyIDs: popoverContent && popoverContent !== 'list' ? popoverContent : undefined, 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 ? (readonlyValue && h("b", { class: "mg-c-input__readonly-value" }, readonlyValue)) : (h("mg-popover", { identifier: this.popoverId, placement: this.popoverPlacement, display: this.popoverDisplay, style: {
                 '--mg-c-input-list-width': ((_f = this.input) === null || _f === void 0 ? void 0 : _f.offsetWidth) > 0 ? `${this.input.offsetWidth}px` : undefined,
             }, "data-fallback-placement": "bottom-end", "onDisplay-change": this.handlePopoverDisplay }, h("div", { class: "mg-c-input__input-group-container" }, h("mg-icon", { icon: "magnifying-glass" }), h("input", { type: "text", role: "combobox", class: "mg-c-input__box mg-c-input__box--width", value: this.filter, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, autocomplete: "off", "aria-autocomplete": "list", "aria-expanded": this.popoverDisplay.toString(), "aria-controls": listId, "aria-invalid": (this.invalid === true).toString(), "aria-activedescendant": formatID(activeDescendant), onInput: this.handleFilterInput, onBlur: this.handleFilterBlur, onFocus: this.handleFilterFocus, onKeyDown: this.handleFilterKeydown, ref: (el) => {
                 if (el !== null)

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

@@ -250,10 +250,11 @@ export class MgInputPassword {
      * @returns HTML Element
      */
     render() {
-        return (h("mg-input", { key: '0a59c7177c65ccb255164e4ef45945b1ade5ad70', label: this.label, identifier: this.identifier, class: this.classCollection.join(), 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 !== undefined && h("b", { class: "mg-c-input__readonly-value" }, '•'.repeat(this.value.length))) : (h("span", { class: "mg-c-input__input-group" }, h("input", { type: this.displayPassword ? 'text' : 'password', class: "mg-c-input__box mg-c-input__box--width", value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, maxlength: this.maxlength, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
+        const displayPasswordIcon = this.displayPassword ? 'eye-slash' : 'eye';
+        return (h("mg-input", { key: '913d0653faad21f56cb930dfdc0947a0747f17ad', label: this.label, identifier: this.identifier, class: this.classCollection.join(), 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 !== undefined && h("b", { class: "mg-c-input__readonly-value" }, '•'.repeat(this.value.length))) : (h("span", { class: "mg-c-input__input-group" }, h("input", { type: this.displayPassword ? 'text' : 'password', class: "mg-c-input__box mg-c-input__box--width", value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, maxlength: this.maxlength, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
                 if (el !== null)
                     this.input = el;
-            } }), h("mg-button", { label: this.messages.input.password[this.displayPassword ? 'hide' : 'display'], disabled: this.disabled, variant: "flat", class: "mg-c-input__append-button", "is-icon": true, onClick: this.toggleDisplayPassword, "aria-controls": this.identifier }, h("mg-icon", { class: "mg-c-input__input-icon", icon: (this.displayPassword ? 'eye-slash' : 'eye') }))))));
+            } }), h("mg-button", { label: this.messages.input.password[this.displayPassword ? 'hide' : 'display'], disabled: this.disabled, variant: "flat", class: "mg-c-input__append-button", "is-icon": true, onClick: this.toggleDisplayPassword, "aria-controls": this.identifier }, h("mg-icon", { class: "mg-c-input__input-icon", icon: displayPasswordIcon }))))));
     }
     static get is() { return "mg-input-password"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/molecules/inputs/mg-input-rich-text-editor/editor/custom-properties.css

@@ -0,0 +1,50 @@
+/* Jodit theming overrides
+ *
+ * Jodit's own defaults are provided by jodit.css (loaded with :root rewritten to :host).
+ * This layer only holds the values the design system intentionally overrides — mainly px
+ * sizes converted to rem for scalable UI, plus a few color adjustments. It must load after
+ * jodit.css so these win.
+ */
+:host {
+  --jd-color-background-button-hover-opacity30: rgb(234 234 234 / 30%);
+  --jd-color-background-filebrowser-folders: rgb(248 249 250);
+  --jd-color-button-background-hover-opacity40: rgb(219 219 219 / 40%);
+  --jd-color-button-background-hover-opacity60: rgb(219 219 219 / 60%);
+  --jd-color-table-cell-background-hover: rgb(0 0 0 / 5%);
+  --jd-dark-text-color-opacity50: rgb(206 206 206 / 50%);
+  --jd-dark-text-color-opacity80: rgb(206 206 206 / 80%);
+  --jd-dark-toolbar-seperator-color3: rgb(105 105 105 / 75%);
+  --jd-dark-toolbar-seperator-color-opacity80: rgb(105 105 105 / 80%);
+  --jd-color-picker-cell-size: 2.4rem;
+  --jd-button-icon-size: 1.4rem;
+  --jd-button-trigger-size: 1.4rem;
+  --jd-button-df-size: calc((var(--jd-button-icon-size) - 0.4rem) * 2);
+  --jd-icon-size: 1.2rem;
+  --jd-icon-loader-size: 4.8rem;
+  --jd-height: 1.8rem;
+  --jd-height-element-default: 1.8rem;
+  --jd-height-search: 3rem;
+  --jd-input-height: 3.2rem;
+  --jd-switche-height: 3.2rem;
+  --jd-viewer-height: 2.4rem;
+  --jd-width-default: 18rem;
+  --jd-width-element-default: 1.8rem;
+  --jd-width-search: 32rem;
+  --jd-viewer-width: 7rem;
+  --jd-switche-width: 6rem;
+  --jd-col-size: 15rem;
+  --jd-padding-default: 0.8rem;
+  --jd-margin-v: 0.2rem;
+  --jd-switche-slider-margin: 0.4rem;
+  --jd-resizer-handle-size: 1rem;
+  --jd-border-radius-default: 0.3rem;
+  --jd-font-size-default: 1.4rem;
+  --jd-font-size-small: 1.1rem;
+  --jd-box-shadow-1: 0 0.8rem 1.6rem rgb(0 0 0 / 19%);
+  --jd-box-shadow-blur: 1.6rem;
+  --jd-box-shadow-tabs: 0 0.2rem 0.4rem rgb(0 0 0 / 10%);
+  --jd-popup-box-shadow: 0 0.4rem 0.1rem -0.2rem rgb(76 76 76 / 20%), 0 0.3rem 0.3rem 0 rgb(76 76 76 / 15%), 0 0.1rem 0.4rem 0 rgb(76 76 76 / 13%);
+  --jd-popup-max-height: max(50vh, 35rem);
+  --jd-focus-input-box-shadow: 0 0 0 0.05rem rgb(0 123 255 / 25%);
+  --jd-anl-handle-size: 2rem;
+}

package/dist/collection/components/molecules/inputs/mg-input-rich-text-editor/mg-input-rich-text-editor.js

@@ -502,7 +502,7 @@ export class MgInputRichTextEditor {
      * @returns HTML mg-input Element
      */
     render() {
-        return (h("mg-input", { key: '9197857a6c004416b96632c9009d110958c8eb15', identifier: this.identifier, class: this.classCollection.join(), label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, helpText: this.helpText, errorMessage: this.hasDisplayedError ? this.errorMessage : undefined }, this.readonly ? (h("div", { class: "mg-c-input__readonly-value", innerHTML: this.value })) : (h("div", { id: this.identifier, class: "mg-c-input__wrapper" }, h("textarea", { name: this.name, ref: (el) => {
+        return (h("mg-input", { key: 'c42ba3eb1eafa645fa0774d65090c7819168ffd7', identifier: this.identifier, class: this.classCollection.join(), label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, helpText: this.helpText, errorMessage: this.hasDisplayedError ? this.errorMessage : undefined }, this.readonly ? (h("div", { class: "mg-c-input__readonly-value", innerHTML: this.value })) : (h("div", { id: this.identifier, class: "mg-c-input__wrapper" }, h("textarea", { name: this.name, ref: (el) => {
                 if (el !== null)
                     this.editorElement = el;
             } })))));
@@ -511,12 +511,12 @@ export class MgInputRichTextEditor {
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["./editor/custom-properties.scss", "../../../../../node_modules/jodit/es2021/jodit.css", "../../../../../node_modules/@mgdis/styles/dist/components/mg-input-rich-text-editor.css"]
+            "$": ["../../../../assets/jodit/jodit.css", "./editor/custom-properties.css", "../../../../../node_modules/@mgdis/styles/dist/components/mg-input-rich-text-editor.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["editor/custom-properties.css", "../../../../../node_modules/jodit/es2021/jodit.css", "../../../../../node_modules/@mgdis/styles/dist/components/mg-input-rich-text-editor.css"]
+            "$": ["../../../../assets/jodit/jodit.css", "editor/custom-properties.css", "../../../../../node_modules/@mgdis/styles/dist/components/mg-input-rich-text-editor.css"]
         };
     }
     static get properties() {

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

@@ -55,7 +55,11 @@ export class MgDetails {
      * @returns HTML Element
      */
     render() {
-        return (h("details", { key: '78dbeab3b3e6c245bda8fad5900b70727fd47595', class: { 'mg-c-details': true, 'mg-c-details--empty-summary': this.isEmptySummary }, onToggle: this.handleToggle, open: this.expanded, ref: (el) => (this.details = el) }, h("summary", { key: '766e4756a66a1f8e6bc2159f30133a0702353f32' }, h("slot", { key: '3473dd0c0fc7de78c1d7ae6f9ee4a4d2fc7835ee', name: "summary" }), h("span", { key: '7c8d3da4df69d2802f104caaf568ac513f9f03b6', class: "mg-c-details__toggle" }, h("mg-icon", { key: '44da384780ab768bde20acb58885280e193de921', icon: "chevron-up", class: { 'mg-c-details__toggle-icon': true, 'mg-c-details__toggle-icon--reverse': !this.expanded } }), h("span", { key: '387de0caa5ae819c89449e5063e0b6e05b3df8fe', class: { 'mg-u-visually-hidden': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), h("div", { key: '48c1fe8df990a250f098594d9b50df947613955c', class: "mg-c-details__details" }, h("slot", { key: '95554b4d890750cc3b3008965be3e5954d49d810', name: "details" }))));
+        return (h("details", { key: '12eac25682e22d65ace61f6697656459d1494903', class: {
+                'mg-c-details': true,
+                'mg-c-details--hide-summary': this.hideSummary,
+                'mg-c-details--empty-summary': this.isEmptySummary,
+            }, onToggle: this.handleToggle, open: this.expanded, ref: (el) => (this.details = el) }, h("summary", { key: 'd6d621db04bca17297f770a633fcb17711f99ecf' }, h("slot", { key: '245aad29a2f2cd93e3a5426ce1e010ab6f5b5e07', name: "summary" }), h("span", { key: 'ebfe3c80a00b9b7a38a670f536a3984420ec3945', class: "mg-c-details__toggle" }, h("mg-icon", { key: '73c4eb27b3d6aa9168bf6af9fa118afc51b8ee1a', icon: "chevron-up", class: { 'mg-c-details__toggle-icon': true, 'mg-c-details__toggle-icon--reverse': !this.expanded } }), h("span", { key: '96730ec386137f7f3aa463b76c20547a5922f294', class: { 'mg-u-visually-hidden': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), h("div", { key: '8ac6eee499e613a543fd2a2ea9d954719d48005d', class: "mg-c-details__details" }, h("slot", { key: '37af4674491d7857163dcc48424e652cfcefbed6', name: "details" }))));
     }
     static get is() { return "mg-details"; }
     static get encapsulation() { return "shadow"; }

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

@@ -39,6 +39,10 @@ export class MgForm {
          * Component classes
          */
         this.classCollection = new ClassList(['mg-c-form']);
+        /**
+         * Whether the form has slotted actions
+         */
+        this.hasActions = false;
         /**
          * Define required message based on mg-inputs required elements
          */
@@ -205,6 +209,8 @@ export class MgForm {
         this.validateAriaRole(this.ariaRole);
         this.validateRequiredMessage(this.requiredMessage);
         this.handlelabelOnTop(this.labelOnTop);
+        // Detect slotted actions
+        this.hasActions = this.element.querySelector('[slot="actions"]') !== null;
         // Get slotted mgButtons
         this.mgButtons = Array.from(this.element.querySelectorAll('mg-button'));
         // Set button form identifier
@@ -239,6 +245,7 @@ export class MgForm {
             if (mutations.some((mutation) => Object.keys(observerOptions).includes(mutation.type))) {
                 this.setMgInputs();
                 this.checkValidity();
+                this.hasActions = this.element.querySelector('[slot="actions"]') !== null;
             }
         }).observe(this.element, observerOptions);
     }
@@ -247,7 +254,7 @@ export class MgForm {
      * @returns HTML Element
      */
     render() {
-        return (h("form", { key: '65d3e11931386af2dedd953f58505e2c71cd99ff', class: this.classCollection.join(), id: this.identifier, name: this.name, onSubmit: this.handleFormSubmit, role: this.ariaRole }, this.requiredMessageText && h("p", { key: '7546db3b8a4259fd7d092cc7b912b6593fab9d84', innerHTML: this.requiredMessageText }), h("slot", { key: '0023ed360230ea97395a249b230e02bb7a4bdbda' }), !this.readonly && !this.disabled && h("slot", { key: 'de84e088ff029eff487be1ed8b4766425c558c29', name: "actions" })));
+        return (h("form", { key: 'c851e6f19af32f28cad695daa1f42ddff10796a0', class: this.classCollection.join(), id: this.identifier, name: this.name, onSubmit: this.handleFormSubmit, role: this.ariaRole }, this.requiredMessageText && h("p", { key: '7f92b35872c938e87959acac8841937ad503d98f', innerHTML: this.requiredMessageText }), h("slot", { key: 'e75e90f1fe3076d93df82a7a426b17d82035e0cf' }), !this.readonly && !this.disabled && this.hasActions && (h("div", { key: 'a472cf024a61d6be1665d149749ce7d560a00473', class: "mg-c-form__actions" }, h("slot", { key: 'f9098c711cb2d2714057c4f14d6df295b75de774', name: "actions" })))));
     }
     static get is() { return "mg-form"; }
     static get encapsulation() { return "shadow"; }
@@ -458,7 +465,8 @@ export class MgForm {
     static get states() {
         return {
             "classCollection": {},
-            "requiredMessageText": {}
+            "requiredMessageText": {},
+            "hasActions": {}
         };
     }
     static get events() {

package/dist/collection/components/molecules/mg-illustrated-message/mg-illustrated-message.conf.js

@@ -6,3 +6,7 @@ export const sizes = ['small', 'medium', 'large'];
  * List of all possibles directions
  */
 export const directions = ['vertical', 'horizontal'];
+/**
+ * List of all possibles horizontal alignments
+ */
+export const aligns = ['left', 'center', 'right'];