@mgdis/mg-components 6.24.0 → 6.26.0

package/dist/collection/collection-manifest.json

@@ -9,6 +9,7 @@
     "components/atoms/internals/mg-input-title/mg-input-title.js",
     "components/atoms/mg-card/mg-card.js",
     "components/atoms/mg-divider/mg-divider.js",
+    "components/atoms/mg-illustration/mg-illustration.js",
     "components/atoms/mg-tag/mg-tag.js",
     "components/atoms/mg-tooltip/mg-tooltip.js",
     "components/atoms/mg-tooltip/mg-tooltip-content/mg-tooltip-content.js",

package/dist/collection/components/atoms/internals/mg-character-left/mg-character-left.js

@@ -37,7 +37,7 @@ export class MgCharacterLeft {
      * @returns HTML Element
      */
     render() {
-        return (h("span", { key: '41b489eafc25e9fe2e32b54a72542090d79e1052', id: this.identifier, "aria-live": "polite" }, h("span", { key: 'c9dd3eb15ebc866333d4e911e1a560cac1c07ef7', "aria-hidden": "true" }, this.maxlength - this.characters.length, "/", this.maxlength), h("span", { key: '0e4664f577b8db68f0355fc92f9df251f945dedd', class: "mg-u-visually-hidden" }, this.messages.nbCharLeft.replace('{counter}', this.maxlength - this.characters.length))));
+        return (h("span", { key: '45b074ad1ffaa1041e5c4d62417ed44ea76aa218', id: this.identifier, "aria-live": "polite" }, h("span", { key: 'ed5f631cb268f888287e5ffafbd5ce22b07c71d5', "aria-hidden": "true" }, this.maxlength - this.characters.length, "/", this.maxlength), h("span", { key: 'd9cda093c2ece7c3e39ea1bbd9499318c964b7f6', class: "mg-u-visually-hidden" }, this.messages.nbCharLeft.replace('{counter}', this.maxlength - this.characters.length))));
     }
     static get is() { return "mg-character-left"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/atoms/internals/mg-input-title/mg-input-title.js

@@ -44,7 +44,7 @@ export class MgInputTitle {
     render() {
         const TagName = this.readonly ? 'span' : this.tagName;
         // \u00A0 represent a  
-        return (h(TagName, { key: '316341d052fa751e442f749ce66e2712ecd864c2', class: "mg-c-input-title", htmlFor: !this.isLegend && this.identifier, id: this.isLegend ? `${this.identifier}-title` : undefined }, h("slot", { key: '4df4df8d18f46b09081ebc13619034f923132697' }), this.required && !this.readonly && (h("span", { key: '778a3317990278dd95a450dd9aa91c3afafb1b43', class: "mg-c-input-title__required" }, "\u00A0", h("span", { key: '509a4ecc94111d61f3df3ae28286bf23bf8c7d0f', class: "mg-u-is-asterisk" }, "*")))));
+        return (h(TagName, { key: 'a3b4b081eb6612ae8f94e687d6ee55e0a4fc8747', class: "mg-c-input-title", htmlFor: !this.isLegend && this.identifier, id: this.isLegend ? `${this.identifier}-title` : undefined }, h("slot", { key: '849858a8fca06a38cb33da241c52d29ad2af559b' }), this.required && !this.readonly && (h("span", { key: '4b6a62fbe70f027a8123e512cfdaad5c37c8e94a', class: "mg-c-input-title__required" }, "\u00A0", h("span", { key: '520b037e53779a58bc013f40d16ab724da734315', class: "mg-u-is-asterisk" }, "*")))));
     }
     static get is() { return "mg-input-title"; }
     static get encapsulation() { return "scoped"; }

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

@@ -69,7 +69,7 @@ export class MgBadge {
      * @returns HTML Element
      */
     render() {
-        return (h("span", { key: 'b4c55957d7e59c889147cf3ddeb57f94c7afdaaa', class: this.classCollection.join() }, h("span", { key: '3f9bfae0e36de3c14d71d3a904f426508b1d5872', class: "mg-c-badge__value" }, this.value), h("span", { key: '2e6ee3c010b6f0c8c1df7bfdd3aed755e5afc0d8', class: "mg-u-visually-hidden" }, this.label)));
+        return (h("span", { key: 'af4f655ca8a11422a34cdce3e8febf46269ca574', class: this.classCollection.join() }, h("span", { key: 'bcc8c0a863615ba503f135f562bd970216599df0', class: "mg-c-badge__value" }, this.value), h("span", { key: '136d338c9a7b7791178dec1dae3898f4a7b099ea', class: "mg-u-visually-hidden" }, this.label)));
     }
     static get is() { return "mg-badge"; }
     static get encapsulation() { return "shadow"; }

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

@@ -162,6 +162,9 @@ export class MgButton {
                 throw new Error(`<mg-button> prop "label" is mandatory when prop "isIcon" is set to true.`);
             }
         }
+        else {
+            this.classCollection.delete(`mg-c-button--icon`);
+        }
         this.setIconSize();
     }
     loadingHandler(newValue) {
@@ -207,7 +210,7 @@ export class MgButton {
      */
     render() {
         var _a;
-        return (h(Host, { key: 'e79494f9da9f0c4c19841d44a85ee955f2e19016', role: "button", tabIndex: this.element.getAttribute('tabindex') || 0, type: this.type, form: this.form, "full-width": this.fullWidth, "aria-label": this.label, "aria-disabled": (_a = this.disabled) === null || _a === void 0 ? void 0 : _a.toString(), onClick: this.handleClick, onKeyup: this.handleKeyup, onKeydown: this.handleKeydown }, h("div", { key: '1a4802637eca8125d09cae3363ff11fe9b50ffd4', class: this.classCollection.join() }, this.loading && h("mg-icon", { key: '9f4512a0ed650c3af63e8216baa5b0eaabd4bfd2', icon: "loader", spin: true }), h("div", { key: '9c0647c6741a0610a516bc2ac1cce328d3004d51', class: "mg-c-button__content" }, h("slot", { key: '7875b875d0a8a8ac74faf233b0cd49462a775dc6' })))));
+        return (h(Host, { key: '9efa9dbbcdb2965cb8fd301c86988d0b0d97b474', role: "button", tabIndex: this.element.getAttribute('tabindex') || 0, type: this.type, form: this.form, "full-width": this.fullWidth, "aria-label": this.label, "aria-disabled": (_a = this.disabled) === null || _a === void 0 ? void 0 : _a.toString(), onClick: this.handleClick, onKeyup: this.handleKeyup, onKeydown: this.handleKeydown }, h("div", { key: '36918b5b208a9e0a9650107f4418cac35ade1ed2', class: this.classCollection.join() }, this.loading && h("mg-icon", { key: '8ad3e911d273f69441f2a405f8040cc685a0a486', icon: "loader", spin: true }), h("div", { key: 'a6b199c669ef6b15bfc345c98192290ce11e65cb', class: "mg-c-button__content" }, h("slot", { key: 'b13d317001dbf66c945cdf9e97c06338ce073c12' })))));
     }
     static get is() { return "mg-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -58,7 +58,7 @@ export class MgCard {
      * @returns HTML Element
      */
     render() {
-        return (h("div", { key: 'd652bf6913d37428bb9729d32fb3541543418a71', class: this.classCollection.join() }, h("slot", { key: '5157ee6cf1330c907babad1f2190973dd4d9f39e' })));
+        return (h("div", { key: '8fb6d9aa655b838e219a077670ce6296640d0854', class: this.classCollection.join() }, h("slot", { key: '9413035054408e44b8c8bb3f2033ff970931c347' })));
     }
     static get is() { return "mg-card"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/atoms/mg-divider/mg-divider.conf.js

@@ -0,0 +1,4 @@
+/**
+ * List of all possibles directions
+ */
+export const directions = ['horizontal', 'vertical'];

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

@@ -1,4 +1,6 @@
-import { h } from "@stencil/core";
+import { h, Host } from "@stencil/core";
+import { toString } from "@mgdis/core-ui-helpers/dist/utils";
+import { directions } from "./mg-divider.conf";
 export class MgDivider {
     constructor() {
         /**************
@@ -8,16 +10,40 @@ export class MgDivider {
          * Define component size
          */
         this.fullWidth = false;
+        /**
+         * Define component direction
+         */
+        this.direction = 'horizontal';
+    }
+    validateDirection(newValue) {
+        if (newValue === '') {
+            // Reactive frameworks (ex. Vue) can pass "" instead of undefined.
+            // Treat it as "use the default", do not throw.
+            this.direction = directions[0];
+        }
+        else if (!directions.includes(newValue)) {
+            throw new Error(`<mg-divider> prop "direction" must be one of: ${directions.join(', ')}. Passed value: ${toString(newValue)}.`);
+        }
+    }
+    /*************
+     * Lifecycle *
+     *************/
+    /**
+     * Check if component props are well configured on init
+     */
+    componentWillLoad() {
+        this.validateDirection(this.direction);
     }
     /**
      * Render
      * @returns HTML Element
      */
     render() {
-        return (h("div", { key: 'a1b0e3b95ed9f52febab9f8d50b4053d1c13f7fb', class: {
+        return (h(Host, { key: '33f0896876d43052fd99a20ebf943d3ee30dfc7a', role: "separator", "aria-orientation": this.direction }, h("div", { key: 'a9e87c1d097177b5995649485da427ca25436f8c', class: {
                 'mg-c-divider': true,
                 'mg-c-divider--full-width': this.fullWidth,
-            } }));
+                'mg-c-divider--direction-vertical': this.direction === 'vertical',
+            } })));
     }
     static get is() { return "mg-divider"; }
     static get encapsulation() { return "shadow"; }
@@ -52,7 +78,40 @@ export class MgDivider {
                 "reflect": false,
                 "attribute": "full-width",
                 "defaultValue": "false"
+            },
+            "direction": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "DividerDirectionType",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {
+                        "DividerDirectionType": {
+                            "location": "import",
+                            "path": "./mg-divider.conf",
+                            "id": "src/components/atoms/mg-divider/mg-divider.conf.ts::DividerDirectionType",
+                            "referenceLocation": "DividerDirectionType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define component direction"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "direction",
+                "defaultValue": "'horizontal'"
             }
         };
     }
+    static get watchers() {
+        return [{
+                "propName": "direction",
+                "methodName": "validateDirection"
+            }];
+    }
 }

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

@@ -1,4 +1,4 @@
-import { sizes, variants, variantStyles } from "./mg-icon.conf";
+import { sizes, variants, variantStyles, } from "./mg-icon.conf";
 import { ClassList, toString } from "@mgdis/core-ui-helpers/dist/utils";
 import { icons } from "../../../assets/icons";
 export class MgIcon {

package/dist/collection/components/atoms/mg-illustration/mg-illustration.conf.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,95 @@
+import { toString } from "@mgdis/core-ui-helpers/dist/utils";
+import { illustrations } from "../../../assets/illustrations";
+/**
+ * @part illustration - The inlined illustration SVG. Recolor its brand accent through the `--mg-b-color-app` custom property.
+ */
+export class MgIllustration {
+    constructor() {
+        /**
+         * Render illustration in shadowroot
+         * @param illustration - illustration to render
+         */
+        this.renderIllustration = (illustration) => {
+            var _a;
+            // Remove existing SVG from ShadowRoot
+            (_a = this.element.shadowRoot.querySelector('svg')) === null || _a === void 0 ? void 0 : _a.remove();
+            // Append new SVG to ShadowRoot. A <template> parses the string into an inert fragment,
+            // and appending moves the <svg> out of it — no throwaway container element left behind.
+            const template = document.createElement('template');
+            template.innerHTML = illustrations[illustration];
+            this.element.shadowRoot.append(template.content.firstElementChild);
+            // Update svg attributes (only the <svg> is swapped above, so Stencil's injected <style> is kept)
+            const svg = this.element.shadowRoot.querySelector('svg');
+            svg.setAttribute('aria-hidden', 'true');
+            svg.setAttribute('focusable', 'false');
+            svg.setAttribute('class', 'mg-c-illustration');
+            svg.setAttribute('part', 'illustration');
+        };
+    }
+    validateIllustration(newValue) {
+        if (!Object.keys(illustrations).includes(newValue)) {
+            throw new Error(`<mg-illustration> prop "illustration" must be one of: ${Object.keys(illustrations).join(', ')}. Passed value: ${toString(newValue)}.`);
+        }
+        else {
+            this.renderIllustration(newValue);
+        }
+    }
+    /**
+     * Check if props are well configured on init
+     */
+    componentWillLoad() {
+        this.validateIllustration(this.illustration);
+    }
+    static get is() { return "mg-illustration"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../../../../node_modules/@mgdis/styles/dist/components/mg-illustration.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["../../../../node_modules/@mgdis/styles/dist/components/mg-illustration.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "illustration": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IllustrationType",
+                    "resolved": "\"aides\" | \"all-done\" | \"convention-empty\" | \"conviviale\" | \"digital-forms\" | \"digital-security\" | \"disconnected\" | \"documents\" | \"echanges\" | \"empty\" | \"missing-informations\" | \"neutral\" | \"no-data\" | \"no-result\" | \"request-sent\" | \"search-no-result\" | \"secure-data\" | \"stage\" | \"welcome\"",
+                    "references": {
+                        "IllustrationType": {
+                            "location": "import",
+                            "path": "./mg-illustration.conf",
+                            "id": "src/components/atoms/mg-illustration/mg-illustration.conf.ts::IllustrationType",
+                            "referenceLocation": "IllustrationType"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "mgdis",
+                            "text": "/img."
+                        }],
+                    "text": "Illustration to display, by name from"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "illustration"
+            }
+        };
+    }
+    static get elementRef() { return "element"; }
+    static get watchers() {
+        return [{
+                "propName": "illustration",
+                "methodName": "validateIllustration"
+            }];
+    }
+}

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

@@ -84,7 +84,7 @@ export class MgTag {
      * @returns HTML Element
      */
     render() {
-        return (h("span", { key: '3604851191691e002f8f7a701e37abe0059238e3', class: this.classCollection.join() }, h("slot", { key: 'c51e18e61908772878f380d1ae798e5e5f43ca02' })));
+        return (h("span", { key: 'd0a9551f29695cd9c49751c4950db3c13065490e', class: this.classCollection.join() }, h("slot", { key: '51f2a2e1c9578f6449bb9c124335ad707d5ebeb1' })));
     }
     static get is() { return "mg-tag"; }
     static get encapsulation() { return "shadow"; }

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

@@ -11,7 +11,7 @@ export class MgTooltipContent {
      * @returns HTML Element
      */
     render() {
-        return (h(Host, { key: 'efe7a2b2622713929caf9a2e114e7a1267643f5e', role: "tooltip" }, h("span", { key: '00f0066cfa058e55a88533f8b6daaa8ab283b29c', innerHTML: this.message, class: "mg-tooltip-content__message" }), h("slot", { key: 'fd952c4db7b77b54591bf2c58012096579de45c2', name: "arrow" })));
+        return (h(Host, { key: '49dc32a8c7191fb291d2c47fc1e903d16e0774ab', role: "tooltip" }, h("span", { key: '913adc1f23eec27eb4b83cc4f4d9b4c1d6f9b2c2', innerHTML: this.message, class: "mg-tooltip-content__message" }), h("slot", { key: '44da4832c535df385cbde0fd32791d901c538e84', name: "arrow" })));
     }
     static get is() { return "mg-tooltip-content"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,5 +1,5 @@
 import { h, Host } from "@stencil/core";
-import { createID, focusableElements, getWindows, isValideID, isValidString, nextTick, toString } from "@mgdis/core-ui-helpers/dist/utils";
+import { createID, focusableElements, getWindows, isValideID, isValidString, nextTick, toString, } from "@mgdis/core-ui-helpers/dist/utils";
 import { createPopper } from "@popperjs/core";
 import { Guard } from "./mg-tooltip.conf";
 /**
@@ -37,7 +37,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.popper.setOptions((options) => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: true }] })));
             // hide when click outside on nextTick to prevent event to trigger after creation
             nextTick(() => {
                 this.windows.forEach((localWindow) => {
@@ -53,7 +53,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.popper.setOptions((options) => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: false }] })));
             // Remove event listener
             this.windows.forEach((localWindow) => {
                 localWindow.removeEventListener('click', this.handleClickOutside, false);
@@ -201,9 +201,9 @@ export class MgTooltip {
          * @param mgButton - mg-button to observe
          */
         this.setMgButtonMutationObserver = (mgButton) => {
-            new MutationObserver(mutationList => {
+            new MutationObserver((mutationList) => {
                 // stop process when none of mutations attributed is disabled
-                if (!mutationList.some(mutation => ['aria-disabled', 'disabled'].includes(mutation.attributeName)))
+                if (!mutationList.some((mutation) => ['aria-disabled', 'disabled'].includes(mutation.attributeName)))
                     return;
                 // set guard when one of mutations is for a disabled with disabled-on-click
                 if (mutationList.some((mutation) => mutation.target.disabled && mutation.target.disableOnClick)) {
@@ -318,7 +318,9 @@ export class MgTooltip {
         // get slotted element wich is not the tooltip
         const slotElement = this.element.querySelector(`*:not(#${this.identifier})`);
         // Get interactive element
-        const interactiveElement = slotElement.matches(focusableElements) ? slotElement : (_a = slotElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(focusableElements);
+        const interactiveElement = slotElement.matches(focusableElements)
+            ? slotElement
+            : (_a = slotElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(focusableElements);
         this.setTooltipedElement(interactiveElement || slotElement);
         // Check if slotted element is a disabled mg-button
         // In this case we wrap the mg-button into a div to enable the tooltip
@@ -369,7 +371,7 @@ export class MgTooltip {
      * @returns HTML Element
      */
     render() {
-        return (h(Host, { key: 'f8fe2bfb1fe70bf169abf8ddd77323342af2ac54' }, h("slot", { key: '6d478d941b9cf9374395e597a703ba7c8411eb75' }), h("slot", { key: 'bbbb59eda24731ec2fa54a909b0f3f93000083e5', name: "content" })));
+        return (h(Host, { key: '5cd926147c1b6723065c5334699764f32a8a06c9' }, h("slot", { key: 'a1b208798c79e34a207f3bedb2ad9662e02e83e2' }), h("slot", { key: '4f332961968fd3541caf47c2fd9072720fa2ee71', name: "content" })));
     }
     static get is() { return "mg-tooltip"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 import { isValidString, isValideID, toString } from "@mgdis/core-ui-helpers/dist/utils";
 import { normalizeBooleanAttributes } from "@mgdis/core-ui-helpers/dist/stencil";
-import { tooltipPositions, classFieldset, classReadonly, classDisabled, classVerticalList, labelHeadings } from "./mg-input.conf";
+import { tooltipPositions, classFieldset, classReadonly, classDisabled, classVerticalList, labelHeadings, } from "./mg-input.conf";
 /**
  * @slot - Input content
  */
@@ -10,6 +10,42 @@ export class MgInput {
         this.slotLabel = 'label';
         this.slotError = 'error';
         this.slotHelpText = 'help-text';
+        // Block-level elements that cannot be nested inside a <p>.
+        // 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.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';
@@ -82,7 +118,7 @@ export class MgInput {
          * Get tooltip node
          * @returns mg-tooltip
          */
-        this.renderTooltip = () => (h("mg-tooltip", { identifier: `${this.identifier}-tooltip`, message: this.tooltip }, h("mg-icon", { icon: "info-circle" })));
+        this.renderTooltip = () => (h("mg-tooltip", { identifier: `${this.identifier}-tooltip`, message: this.tooltip }, h("mg-icon", { icon: "info-circle-outline" })));
         /**
          * Get input container element
          * @returns ordered elements
@@ -92,7 +128,10 @@ export class MgInput {
                 this.helptextMessageSlotElement && (h("div", { class: "mg-c-input__help-text" }, h("slot", { name: this.slotHelpText }))),
                 !this.isDisabled && this.errorMessage && (h("div", { class: "mg-c-input__error", "aria-live": "assertive" }, h("slot", { name: this.slotError }))),
             ];
-            const inputSlot = (h("div", { class: "mg-c-input__input" }, h("slot", null), this.tooltip && !this.labelOnTop && (this.tooltipPosition === 'input' || this.labelHide) && this.renderTooltip()));
+            const inputSlot = (h("div", { class: "mg-c-input__input" }, h("slot", null), this.tooltip &&
+                !this.labelOnTop &&
+                (this.tooltipPosition === 'input' || this.labelHide) &&
+                this.renderTooltip()));
             if (this.inputsOnBottom) {
                 return [...elements, inputSlot];
             }
@@ -189,7 +228,7 @@ export class MgInput {
             this.ariaDescribedbyIDs = this.ariaDescribedbyIDs.split(' ');
             return;
         }
-        else if (!(Array.isArray(this.ariaDescribedbyIDs) && this.ariaDescribedbyIDs.every(entry => typeof entry === 'string'))) {
+        else if (!(Array.isArray(this.ariaDescribedbyIDs) && this.ariaDescribedbyIDs.every((entry) => typeof entry === 'string'))) {
             this.ariaDescribedbyIDs = [];
             return;
         }
@@ -222,7 +261,6 @@ export class MgInput {
     /**
      * Component classes
      */
-    // eslint-disable-next-line @stencil-community/no-unused-watch
     watchClass() {
         if (!this.element.classList.contains(this.classInput)) {
             this.element.classList.add(this.classInput);
@@ -235,7 +273,6 @@ export class MgInput {
     /**
      * Trigger label update
      */
-    // eslint-disable-next-line @stencil-community/no-unused-watch
     watchLabel() {
         if (!isValidString(this.label)) {
             throw new Error(`<mg-input> prop "label" is required and must be a string. Passed value: ${toString(this.label)}.`);
@@ -278,16 +315,46 @@ export class MgInput {
         // update aria-describedby
         this.watchAriaDescribedbyIDs();
     }
+    /**
+     * Get the semantic tag name for a slotted message.
+     * Phrasing (textual/inline) content uses <p> (RGAA 8.9); block-level content falls back to
+     * <div> to avoid invalid nesting such as <p><p>…</p></p> (RGAA 8.2).
+     * @param content - the HTML content that will be injected in the slot
+     * @returns the tag name to use
+     */
+    getSlotMessageTagName(content) {
+        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.
+     * The element is recreated when its current tag no longer matches the expected one
+     * (e.g. the content switched from text to block HTML), keeping the slot id and position.
+     * @param slot - the slot name
+     * @param tagName - the expected tag name
+     * @returns the slotted element
+     */
+    getSlotMessageElement(slot, tagName) {
+        let slotElement = this.element.querySelector(`[slot=${slot}]`);
+        if (slotElement !== null && slotElement.tagName.toLowerCase() !== tagName) {
+            slotElement.remove();
+            slotElement = null;
+        }
+        if (slotElement === null) {
+            slotElement = document.createElement(tagName);
+            slotElement.setAttribute('slot', slot);
+            this.element.appendChild(slotElement);
+        }
+        return slotElement;
+    }
     /**
      * Render error message
      */
     renderErrorMessage() {
-        this.errorMessageSlotElement = this.element.querySelector(`[slot=${this.slotError}]`);
-        if (this.errorMessageSlotElement === null) {
-            this.errorMessageSlotElement = document.createElement('div');
-            this.errorMessageSlotElement.setAttribute('slot', this.slotError);
-            this.element.appendChild(this.errorMessageSlotElement);
-        }
+        this.errorMessageSlotElement = this.getSlotMessageElement(this.slotError, this.getSlotMessageTagName(this.errorMessage));
         this.errorMessageSlotElement.setAttribute('id', this.helpTextErrorId);
         this.errorMessageSlotElement.innerHTML = this.errorMessage;
     }
@@ -295,12 +362,7 @@ export class MgInput {
      * Render help text message
      */
     renderHelpText() {
-        this.helptextMessageSlotElement = this.element.querySelector(`[slot=${this.slotHelpText}]`);
-        if (this.helptextMessageSlotElement === null) {
-            this.helptextMessageSlotElement = document.createElement('div');
-            this.helptextMessageSlotElement.setAttribute('slot', this.slotHelpText);
-            this.element.appendChild(this.helptextMessageSlotElement);
-        }
+        this.helptextMessageSlotElement = this.getSlotMessageElement(this.slotHelpText, this.getSlotMessageTagName(this.helpText));
         this.helptextMessageSlotElement.setAttribute('id', this.helpTextId);
         this.helptextMessageSlotElement.innerHTML = this.helpText;
     }
@@ -339,7 +401,10 @@ export class MgInput {
      */
     render() {
         const isGroup = this.isFieldset && !this.isReadonly;
-        return (h(Host, { key: 'b5952c998fe8562eb2e5dc0e425484f0aa9177f3', class: this.element.classList.toString(), role: isGroup ? 'group' : undefined, "aria-labelledby": isGroup ? `${this.identifier}-title` : undefined }, h("div", { key: 'd6399c7f4798af37639218373f775739fc04e593', class: { 'mg-c-input__title': true, 'mg-u-visually-hidden': this.labelHide } }, h("slot", { key: '58a593bb16193a5ca6b0374919b22fa64aab26a4', name: this.slotLabel }), this.tooltip && (this.tooltipPosition === 'label' || this.labelOnTop) && !this.labelHide && this.renderTooltip()), h("div", { key: '1a70d0b00d6cf235c7a64d3ebde212eef62e213c', class: "mg-c-input__input-container" }, this.inputContainerElements())));
+        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: '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/MgInputCheckboxList.js

@@ -4,7 +4,10 @@ import { h } from "@stencil/core";
  * @param props - MgInputCheckboxList Interface Props
  * @returns input template
  */
-export const MgInputCheckboxList = (props) => (h("div", { class: "mg-c-input__input-group-container", "aria-labelledby": props.labelledby, id: props.id }, props.checkboxes.map(input => {
+export const MgInputCheckboxList = (props) => (h("div", { class: "mg-c-input__input-group-container", "aria-labelledby": props.labelledby, id: props.id }, props.checkboxes.map((input) => {
     var _a, _b;
-    return (h("div", { key: input._id, class: { 'mg-c-input__input-group': true, 'mg-c-input__input-group--disabled': props.disabled || input.disabled } }, h("input", { type: "checkbox", id: input._id, name: props.name, value: (_a = input.value) === null || _a === void 0 ? void 0 : _a.toString(), checked: Boolean(input.value), required: input.required, "aria-invalid": ((_b = props.invalid) === null || _b === void 0 ? void 0 : _b.toString()) || 'false', disabled: props.disabled || input.disabled, indeterminate: input.value === null, onInput: input._handleInput, onBlur: input._handleBlur, onKeyDown: input._handleKeydown }), h("label", { htmlFor: input._id }, input.title)));
+    return (h("div", { key: input._id, class: {
+            'mg-c-input__input-group': true,
+            'mg-c-input__input-group--disabled': props.disabled || input.disabled,
+        } }, h("input", { type: "checkbox", id: input._id, name: props.name, value: (_a = input.value) === null || _a === void 0 ? void 0 : _a.toString(), checked: Boolean(input.value), required: input.required, "aria-invalid": ((_b = props.invalid) === null || _b === void 0 ? void 0 : _b.toString()) || 'false', disabled: props.disabled || input.disabled, indeterminate: input.value === null, onInput: input._handleInput, onBlur: input._handleBlur, onKeyDown: input._handleKeydown }), h("label", { htmlFor: input._id }, input.title)));
 })));

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

@@ -34,5 +34,9 @@ export const MgInputCheckboxPaginated = (props) => {
     };
     return (h("div", { class: "mg-input-checkbox-paginated mg-c-input__tab", slot: `tab_content-${props.key + 1}` }, 
     // Mass action depends on all checkboxes list, not only displayed items
-    typeof props.handleMassAction === 'function' && props.checkboxes.length > 0 && props.checkboxes.some(checkbox => checkbox.disabled !== true) && (h("mg-tooltip", { slot: "header-action", class: "mg-c-input__tabs-action", message: props.messages.tooltip }, h("mg-button", { variant: "link", onClick: props.handleMassAction }, props.messages.action))), h("div", { class: "mg-c-input__tabs-content" }, h("p", { id: tabId, class: { 'mg-c-input__popover-info': true, 'mg-u-visually-hidden': items.length !== 0 }, "aria-live": items.length !== 0 ? 'polite' : undefined }, items.length === 0 ? props.messages.noValue : props.messages.values.replace('{count}', items.length.toString())), items.length > 0 && (h(MgInputCheckboxList, { checkboxes: items, labelledby: tabId, id: listId, disabled: props.disabled, name: props.name, invalid: props.invalid })), hasNext(props.checkboxes, props.limit) && (h("mg-button", { key: "load-more", variant: "flat", class: "mg-c-input__load-more", tabIndex: -1, "full-width": true, onClick: handleLoadMoreClick, "aria-controls": listId }, h("mg-icon", { icon: "chevron-down" }), props.messages.showMore)))));
+    typeof props.handleMassAction === 'function' &&
+        props.checkboxes.length > 0 &&
+        props.checkboxes.some((checkbox) => checkbox.disabled !== true) && (h("mg-tooltip", { slot: "header-action", class: "mg-c-input__tabs-action", message: props.messages.tooltip }, h("mg-button", { variant: "link", onClick: props.handleMassAction }, props.messages.action))), h("div", { class: "mg-c-input__tabs-content" }, h("p", { id: tabId, class: { 'mg-c-input__popover-info': true, 'mg-u-visually-hidden': items.length !== 0 }, "aria-live": items.length !== 0 ? 'polite' : undefined }, items.length === 0
+        ? props.messages.noValue
+        : props.messages.values.replace('{count}', items.length.toString())), items.length > 0 && (h(MgInputCheckboxList, { checkboxes: items, labelledby: tabId, id: listId, disabled: props.disabled, name: props.name, invalid: props.invalid })), hasNext(props.checkboxes, props.limit) && (h("mg-button", { key: "load-more", variant: "flat", class: "mg-c-input__load-more", tabIndex: -1, "full-width": true, onClick: handleLoadMoreClick, "aria-controls": listId }, h("mg-icon", { icon: "chevron-down" }), props.messages.showMore)))));
 };