@mgdis/mg-components 6.26.0 → 6.28.0

package/dist/types/components/atoms/mg-button/mg-button.d.ts

@@ -44,8 +44,10 @@ export declare class MgButton {
     fullWidth: boolean;
     validateFullWidth(newValue: MgButton['fullWidth']): void;
     /**
-     * Define form id to attach button with.
-     * If this attribute is not set, the `<button>` is associated with its ancestor `<form>` element.
+     * Id of the form to associate the button with, following the native `form` attribute semantics:
+     * it must match the `identifier` of a `mg-form`, or the `id` of a `<form>`, in the same document,
+     * and it overrides the ancestor form.
+     * If this attribute is not set, the button is associated with its ancestor form.
      */
     form?: string;
     /**
@@ -102,6 +104,43 @@ export declare class MgButton {
      * Check if props are well configured on init
      */
     componentWillLoad(): void;
+    /**
+     * Submit a native form the way a native submit button does
+     * @param form - the form to submit
+     */
+    private dispatchSubmit;
+    /**
+     * Wrap a `mg-form` in the actions its public API offers, so nothing reaches into its shadow DOM
+     * @param mgForm - the owning mg-form
+     * @returns its submit and reset actions
+     */
+    private mgFormActions;
+    /**
+     * Wrap a native form in the same actions
+     * @param form - the owning form
+     * @returns its submit and reset actions
+     */
+    private nativeFormActions;
+    /**
+     * Resolve the form the `form` id points to. An id reference does not cross a shadow boundary, so
+     * it resolves in the tree the button belongs to — the document, or the shadow tree it sits in —
+     * the way a native form owner does. The ancestor wins when it is the one pointed at: two forms
+     * can share an identifier, and a tree-wide lookup would retain the first one.
+     * @returns the actions of the form holding that id, or null when none does
+     */
+    private resolveOwnerById;
+    /**
+     * Resolve the form owning this button: an explicit `form` id overrides the ancestor form, and an
+     * id matching nothing logs then falls back on it, so a button never loses an association it had.
+     * @returns the owning form actions, or null when the button has no form owner
+     */
+    private resolveFormOwner;
+    /**
+     * Act on the owning form. The owner is resolved here rather than on load because a native form
+     * owner is re-resolved on every submission, never captured once: the button follows a `form`
+     * changed after render, and no longer races the target form hydration.
+     */
+    private handleFormClick;
     /**
      * Add listners
      */

package/dist/types/components/atoms/mg-tooltip/mg-tooltip.d.ts

@@ -43,7 +43,12 @@ export declare class MgTooltip {
      * Disable tooltip
      */
     disabled: boolean;
-    watchDisabled(newValue: MgTooltip['disabled']): void;
+    watchDisabled(): void;
+    /**
+     * Toggle the popper scroll and resize listeners, only needed while the tooltip is visible
+     * @param enabled - listeners state to apply
+     */
+    private setPopperEventListeners;
     /**
      * Show tooltip
      */
@@ -79,14 +84,35 @@ export declare class MgTooltip {
      * Method to reset guard value
      */
     private resetGuard;
+    /**
+     * Display tooltip when the tooltiped element takes focus
+     */
+    private handleTooltipedElementFocus;
+    /**
+     * Hide tooltip when the tooltiped element loses focus
+     */
+    private handleTooltipedElementBlur;
+    /**
+     * Display tooltip when the tooltiped element is hovered
+     */
+    private handleTooltipedElementMouseenter;
+    /**
+     * Hide tooltip when the tooltiped element is not hovered anymore
+     */
+    private handleTooltipedElementMouseleave;
+    /**
+     * Manage all tooltiped element listeners
+     * @param element - element to bind or unbind
+     * @param action - process to apply on element listeners
+     */
+    private manageTooltipedElementListeners;
     /**
      * Update slot content when it is a mg-button
      * @param mgButton - slotted mg-button
      */
     private setMgButtonWrapper;
     /**
-     * Set popper instance
-     * @param strategy - popper strategy to apply on instance
+     * Set popper instance on the current tooltiped element
      */
     private setPopper;
     /**
@@ -100,10 +126,11 @@ export declare class MgTooltip {
      */
     private setMgButtonMutationObserver;
     /**
-     * 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.
      */
-    private setAriaDescribedby;
+    private updateTooltipedElementA11y;
     /**
      * Render tooltip content element and init listeners
      */

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

@@ -23,6 +23,7 @@ interface InputBaseMethods {
     readonly: boolean;
     displayError: () => Promise<void>;
     reset: () => Promise<void>;
+    setFocus: () => Promise<void>;
 }
 /**
  * Possible Input types

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

@@ -10,6 +10,7 @@ export declare class MgInputCheckbox implements Omit<IMgInputCheckboxListProps,
     private searchInput;
     private messages;
     private hasDisplayedError;
+    private validityCheckPending;
     private customErrorMessage;
     private mode;
     private readonly baseClassName;
@@ -301,6 +302,14 @@ export declare class MgInputCheckbox implements Omit<IMgInputCheckboxListProps,
      * @returns timeout
      */
     componentWillLoad(): ReturnType<typeof setTimeout>;
+    /**
+     * Recompute validity once the DOM is in sync with `value`.
+     * `@Watch('value')` fires before Stencil re-renders, so the rendered control still holds the
+     * previous value at that point (visible with a programmatic value change, e.g. a `v-model`
+     * default value). The watcher therefore only raises a flag, and the check runs here, after the
+     * render. Renders unrelated to `value` leave the flag down and recompute nothing.
+     */
+    componentDidUpdate(): void;
     /**
      * add listeners and DOM attributed
      */

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

@@ -13,6 +13,7 @@ export declare class MgInputCombobox {
     private popoverId;
     private messages;
     private hasDisplayedError;
+    private validityCheckPending;
     private customErrorMessage;
     private handlerInProgress;
     private loadingAction;
@@ -34,7 +35,7 @@ export declare class MgInputCombobox {
      * Define components items
      */
     items: (string | Option)[];
-    watchItems(newValue: MgInputCombobox['items']): void;
+    watchItems(newValue: MgInputCombobox['items'], oldValue?: MgInputCombobox['items']): void;
     /**
      * Define items label
      * Include short description. Required for accessibility.
@@ -308,6 +309,17 @@ export declare class MgInputCombobox {
      * @param fromSetErrorContext - context come from `setError` method
      */
     private setErrorMessage;
+    /**
+     * Check if an option matches the current filter
+     * @param option - option to match
+     * @returns true if the option matches the filter
+     */
+    private matchFilter;
+    /**
+     * Get all the options matching the current filter
+     * @returns filtered options
+     */
+    private getFilteredOptions;
     /**
      * Get first page with filter applied
      * @returns first page with filter applied
@@ -343,6 +355,14 @@ export declare class MgInputCombobox {
      * @returns timeout
      */
     componentWillLoad(): ReturnType<typeof setTimeout>;
+    /**
+     * Recompute validity once the DOM is in sync with `value`.
+     * `@Watch('value')` fires before Stencil re-renders, so the rendered control still holds the
+     * previous value at that point (visible with a programmatic value change, e.g. a `v-model`
+     * default value). The watcher therefore only raises a flag, and the check runs here, after the
+     * render. Renders unrelated to `value` leave the flag down and recompute nothing.
+     */
+    componentDidUpdate(): void;
     /**
      * Render
      * @returns HTML Element

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

@@ -10,6 +10,7 @@ export declare class MgInputDate {
     private locale;
     private systemLocale;
     private hasDisplayedError;
+    private validityCheckPending;
     private handlerInProgress;
     private customErrorMessage;
     /**************
@@ -186,6 +187,14 @@ export declare class MgInputDate {
      * @returns timeout
      */
     componentWillLoad(): ReturnType<typeof setTimeout>;
+    /**
+     * Recompute validity once the DOM is in sync with `value`.
+     * `@Watch('value')` fires before Stencil re-renders, so the rendered control still holds the
+     * previous value at that point (visible with a programmatic value change, e.g. a `v-model`
+     * default value). The watcher therefore only raises a flag, and the check runs here, after the
+     * render. Renders unrelated to `value` leave the flag down and recompute nothing.
+     */
+    componentDidUpdate(): void;
     /**
      * Render pattern
      * @returns translated html pattern

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

@@ -10,6 +10,7 @@ export declare class MgInputFile {
     private locale;
     private messages;
     private hasDisplayedError;
+    private validityCheckPending;
     private customErrorMessage;
     private handlerInProgress;
     /**************
@@ -197,6 +198,14 @@ export declare class MgInputFile {
      * @returns timeout
      */
     componentWillLoad(): ReturnType<typeof setTimeout>;
+    /**
+     * Recompute validity once the DOM is in sync with `value`.
+     * `@Watch('value')` fires before Stencil re-renders, so the rendered control still holds the
+     * previous value at that point (visible with a programmatic value change, e.g. a `v-model`
+     * default value). The watcher therefore only raises a flag, and the check runs here, after the
+     * render. Renders unrelated to `value` leave the flag down and recompute nothing.
+     */
+    componentDidUpdate(): void;
     /**
      * Render files
      * @returns formated files.

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

@@ -17,6 +17,7 @@ export declare class MgInputNumeric {
     private locale;
     private messages;
     private hasDisplayedError;
+    private validityCheckPending;
     private handlerInProgress;
     private customErrorMessage;
     /**************
@@ -263,6 +264,14 @@ export declare class MgInputNumeric {
      * @returns timeout
      */
     componentWillLoad(): ReturnType<typeof setTimeout>;
+    /**
+     * Recompute validity once the DOM is in sync with `value`.
+     * `@Watch('value')` fires before Stencil re-renders, so the rendered control still holds the
+     * previous value at that point (visible with a programmatic value change, e.g. a `v-model`
+     * default value). The watcher therefore only raises a flag, and the check runs here, after the
+     * render. Renders unrelated to `value` leave the flag down and recompute nothing.
+     */
+    componentDidUpdate(): void;
     /**
      * Renders the readonly content of the input component.
      * @returns The readonly content element.

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

@@ -10,6 +10,7 @@ export declare class MgInputPassword {
     private hasDisplayedError;
     private handlerInProgress;
     private customErrorMessage;
+    private validityCheckPending;
     /**************
      * Decorators *
      **************/
@@ -168,6 +169,14 @@ export declare class MgInputPassword {
      * @returns timeout
      */
     componentWillLoad(): ReturnType<typeof setTimeout>;
+    /**
+     * Recompute validity once the DOM is in sync with `value`.
+     * `@Watch('value')` fires before Stencil re-renders, so the rendered control still holds the
+     * previous value at that point (visible with a programmatic value change, e.g. a `v-model`
+     * default value). The watcher therefore only raises a flag, and the check runs here, after the
+     * render. Renders unrelated to `value` leave the flag down and recompute nothing.
+     */
+    componentDidUpdate(): void;
     /**
      * Render
      * @returns HTML Element

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

@@ -6,10 +6,10 @@ export declare class MgInputRadio {
     /************
      * Internal *
      ************/
-    private inputs;
     private readonly classVerticalList;
     private messages;
     private hasDisplayedError;
+    private validityCheckPending;
     private handlerInProgress;
     private customErrorMessage;
     /**************
@@ -28,7 +28,7 @@ export declare class MgInputRadio {
      * Items are the possible options to select
      */
     items: string[] | RadioOption[];
-    validateItems(newValue: string[] | RadioOption[]): void;
+    validateItems(newValue: string[] | RadioOption[], oldValue?: string[] | RadioOption[]): void;
     /**
      * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
      */
@@ -150,6 +150,13 @@ export declare class MgInputRadio {
      * Handle blur event
      */
     private handleBlur;
+    /**
+     * Check if the required constraint is fulfilled
+     * The native group validity cannot answer it: a browser keeps the checked member a group had, even
+     * once that input is removed from the DOM. Options that cannot be selected are ignored.
+     * @returns required constraint is fulfilled
+     */
+    private validateRequired;
     /**
      * Check if input is valid
      */
@@ -164,6 +171,18 @@ export declare class MgInputRadio {
      * @returns element
      */
     private getInvalidElement;
+    /**
+     * Get the rendered radio inputs
+     * Read from the DOM: references kept from a render would outlive the inputs they point to.
+     * @returns rendered radio inputs
+     */
+    private getInputs;
+    /**
+     * Check if a value is the selected one
+     * @param optionValue - option value to compare to the component value
+     * @returns option value is the selected one
+     */
+    private isSelectedValue;
     /*************
      * Lifecycle *
      *************/
@@ -172,6 +191,14 @@ export declare class MgInputRadio {
      * @returns timeout
      */
     componentWillLoad(): ReturnType<typeof setTimeout>;
+    /**
+     * Recompute validity once the DOM is in sync with `value`.
+     * `@Watch('value')` fires before Stencil re-renders, so the rendered control still holds the
+     * previous value at that point (visible with a programmatic value change, e.g. a `v-model`
+     * default value). The watcher therefore only raises a flag, and the check runs here, after the
+     * render. Renders unrelated to `value` leave the flag down and recompute nothing.
+     */
+    componentDidUpdate(): void;
     /**
      * Render
      * @returns HTML Element

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

@@ -9,6 +9,7 @@ export declare class MgInputSelect {
     private input;
     private messages;
     private hasDisplayedError;
+    private validityCheckPending;
     private handlerInProgress;
     private customErrorMessage;
     /**************
@@ -27,7 +28,7 @@ export declare class MgInputSelect {
      * Items are the possible options to select
      */
     items: (string | SelectOption)[];
-    validateItems(newValue: MgInputSelect['items']): void;
+    validateItems(newValue: MgInputSelect['items'], oldValue?: MgInputSelect['items']): void;
     /**
      * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
      */
@@ -199,6 +200,14 @@ export declare class MgInputSelect {
      * @returns timeout
      */
     componentWillLoad(): ReturnType<typeof setTimeout>;
+    /**
+     * Recompute validity once the DOM is in sync with `value`.
+     * `@Watch('value')` fires before Stencil re-renders, so the rendered control still holds the
+     * previous value at that point (visible with a programmatic value change, e.g. a `v-model`
+     * default value). The watcher therefore only raises a flag, and the check runs here, after the
+     * render. Renders unrelated to `value` leave the flag down and recompute nothing.
+     */
+    componentDidUpdate(): void;
     /**
      * Render option
      * @param option - to render

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

@@ -22,6 +22,7 @@ export declare class MgInputText {
     private hasDisplayedError;
     private customErrorMessage;
     private handlerInProgress;
+    private validityCheckPending;
     /**************
      * Decorators *
      **************/
@@ -216,6 +217,14 @@ export declare class MgInputText {
      * @returns timeout
      */
     componentWillLoad(): ReturnType<typeof setTimeout>;
+    /**
+     * Recompute validity once the DOM is in sync with `value`.
+     * `@Watch('value')` fires before Stencil re-renders, so the rendered control still holds the
+     * previous value at that point (visible with a programmatic value change, e.g. a `v-model`
+     * default value). The watcher therefore only raises a flag, and the check runs here, after the
+     * render. Renders unrelated to `value` leave the flag down and recompute nothing.
+     */
+    componentDidUpdate(): void;
     /**
      * Renders the readonly content of the input component.
      * @returns The readonly content element.

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

@@ -9,6 +9,7 @@ export declare class MgInputTextarea {
     private input;
     private messages;
     private hasDisplayedError;
+    private validityCheckPending;
     private handlerInProgress;
     private customErrorMessage;
     /**************
@@ -190,6 +191,14 @@ export declare class MgInputTextarea {
      * @returns timeout
      */
     componentWillLoad(): ReturnType<typeof setTimeout>;
+    /**
+     * Recompute validity once the DOM is in sync with `value`.
+     * `@Watch('value')` fires before Stencil re-renders, so the rendered control still holds the
+     * previous value at that point (visible with a programmatic value change, e.g. a `v-model`
+     * default value). The watcher therefore only raises a flag, and the check runs here, after the
+     * render. Renders unrelated to `value` leave the flag down and recompute nothing.
+     */
+    componentDidUpdate(): void;
     /**
      * Render
      * @returns HTML Element

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

@@ -78,6 +78,10 @@ export declare class MgForm {
      * Required message
      */
     requiredMessageText: string;
+    /**
+     * Whether the form has slotted actions
+     */
+    hasActions: boolean;
     /**
      * Emitted event on form validity check
      * Tells if form is valid or not
@@ -99,6 +103,24 @@ export declare class MgForm {
      * Reset form inputs values, validity and error state
      */
     reset(): Promise<void>;
+    /**
+     * Request the form submission: emit `form-submit`, whatever the inputs validity.
+     * This is what a `mg-button` associated with this form goes through, so that reaching the form
+     * needs no access to its shadow DOM. Unlike the native `requestSubmit()`, it runs no constraint
+     * validation: validity is the consumer's call here, as it is on submission from a nested button.
+     * Read `invalid`, or call `displayError()` / `focusFirstInvalidInput()`.
+     * Unlike `reset()`, a readonly form still submits: readonly fields do not block a native
+     * submission either, and a nested button has always submitted such a form.
+     */
+    requestSubmit(): Promise<void>;
+    /**
+     * **Experimental.** The signature may still change in a minor release.
+     *
+     * Display errors, then focus and scroll to the first invalid input. Focusing is what
+     * carries the information for assistive technologies, a scroll announces nothing.
+     * Read the `invalid` property to know whether the form had an invalid input.
+     */
+    focusFirstInvalidInput(): Promise<void>;
     /**
      * Define required message based on mg-inputs required elements
      */

package/dist/types/components.d.ts

@@ -156,7 +156,7 @@ export namespace Components {
          */
         "disabled"?: boolean;
         /**
-          * Define form id to attach button with. If this attribute is not set, the `<button>` is associated with its ancestor `<form>` element.
+          * Id of the form to associate the button with, following the native `form` attribute semantics: it must match the `identifier` of a `mg-form`, or the `id` of a `<form>`, in the same document, and it overrides the ancestor form. If this attribute is not set, the button is associated with its ancestor form.
          */
         "form"?: string;
         /**
@@ -317,6 +317,10 @@ export namespace Components {
           * Display inputs/fieldsets errors if it exists.
          */
         "displayError": () => Promise<void>;
+        /**
+          * **Experimental.** The signature may still change in a minor release.  Display errors, then focus and scroll to the first invalid input. Focusing is what carries the information for assistive technologies, a scroll announces nothing. Read the `invalid` property to know whether the form had an invalid input.
+         */
+        "focusFirstInvalidInput": () => Promise<void>;
         /**
           * Identifier is used for the element ID (id is a reserved prop in Stencil.js) If not set, it will be created.
           * @default createID('mg-form')
@@ -341,6 +345,10 @@ export namespace Components {
           * @default false
          */
         "readonly": boolean;
+        /**
+          * Request the form submission: emit `form-submit`, whatever the inputs validity. This is what a `mg-button` associated with this form goes through, so that reaching the form needs no access to its shadow DOM. Unlike the native `requestSubmit()`, it runs no constraint validation: validity is the consumer's call here, as it is on submission from a nested button. Read `invalid`, or call `displayError()` / `focusFirstInvalidInput()`. Unlike `reset()`, a readonly form still submits: readonly fields do not block a native submission either, and a nested button has always submitted such a form.
+         */
+        "requestSubmit": () => Promise<void>;
         /**
           * Define when required message is display. When it is unset, component use it internal logic to manage "required message" help text display. When you set the prop to `default`, you override the component internal logique to torce it display "required message" help text. When you set the prop to `hide`, it will prevent the rendering of the message in the component's DOM. As **this element is an accessibility requirement in the view**, you **MUST*** re-implement this message on your own and display it when your form contains required inputs.
          */
@@ -2981,7 +2989,7 @@ declare namespace LocalJSX {
          */
         "disabled"?: boolean;
         /**
-          * Define form id to attach button with. If this attribute is not set, the `<button>` is associated with its ancestor `<form>` element.
+          * Id of the form to associate the button with, following the native `form` attribute semantics: it must match the `identifier` of a `mg-form`, or the `id` of a `<form>`, in the same document, and it overrides the ancestor form. If this attribute is not set, the button is associated with its ancestor form.
          */
         "form"?: string;
         /**

package/ide/intellij/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@mgdis/mg-components",
-  "version": "6.26.0",
+  "version": "6.28.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -220,7 +220,7 @@
         },
         {
           "name": "mg-button",
-          "description": "Attributes:\n- `disable-on-click`: Option to set input disable on click, in order to prevent multi-click.\nParent component have to remove the attribute 'disabled' when the process ends.\n- `disabled`: Disable button\n- `form`: Define form id to attach button with.\nIf this attribute is not set, the `<button>` is associated with its ancestor `<form>` element.\n- `full-width`: Set button to full-width\n- `is-icon`: Define if button is round.\nUsed for icon button.\n- `label`: aria-label\nIn case button text is not explicit enough\n- `size`: Define button size\n- `type`: Define button type\n- `variant`: Define button variant\n\nEvents:\n- `disabled-change`: Emmited event when disabled change\n\nSlots:\n- default: Button content\n\n",
+          "description": "Attributes:\n- `disable-on-click`: Option to set input disable on click, in order to prevent multi-click.\nParent component have to remove the attribute 'disabled' when the process ends.\n- `disabled`: Disable button\n- `form`: Id of the form to associate the button with, following the native `form` attribute semantics:\nit must match the `identifier` of a `mg-form`, or the `id` of a `<form>`, in the same document,\nand it overrides the ancestor form.\nIf this attribute is not set, the button is associated with its ancestor form.\n- `full-width`: Set button to full-width\n- `is-icon`: Define if button is round.\nUsed for icon button.\n- `label`: aria-label\nIn case button text is not explicit enough\n- `size`: Define button size\n- `type`: Define button type\n- `variant`: Define button variant\n\nEvents:\n- `disabled-change`: Emmited event when disabled change\n\nSlots:\n- default: Button content\n\n",
           "doc-url": "http://core.pages.mgdis.fr/core-ui/core-ui/storybook/?path=/docs/atoms-mg-button--docs",
           "attributes": [
             {
@@ -244,7 +244,7 @@
             },
             {
               "name": "form",
-              "description": "Define form id to attach button with.\nIf this attribute is not set, the `<button>` is associated with its ancestor `<form>` element.\n\nType: `string`",
+              "description": "Id of the form to associate the button with, following the native `form` attribute semantics:\nit must match the `identifier` of a `mg-form`, or the `id` of a `<form>`, in the same document,\nand it overrides the ancestor form.\nIf this attribute is not set, the button is associated with its ancestor form.\n\nType: `string`",
               "doc-url": "http://core.pages.mgdis.fr/core-ui/core-ui/storybook/?path=/docs/atoms-mg-button--docs",
               "value": {
                 "type": "string",
@@ -795,7 +795,7 @@
         },
         {
           "name": "mg-form",
-          "description": "Attributes:\n- `aria-role`: Define `<form/>` element aria role\nsee more about aria roles use case: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles\n- `disabled`: Define if form is disabled\n- `identifier`: Identifier is used for the element ID (id is a reserved prop in Stencil.js)\nIf not set, it will be created.\n- `invalid`: Define form invalid state\n- `label-on-top`: Define if slotted mg-component's label are displayed on top\n- `name`: Input name\nIf not set the value equals the identifier\n- `readonly`: Define if form is readonly\n- `required-message`: Define when required message is display.\nWhen it is unset, component use it internal logic to manage \"required message\" help text display.\nWhen you set the prop to `default`, you override the component internal logique to torce it display \"required message\" help text.\nWhen you set the prop to `hide`, it will prevent the rendering of the message in the component's DOM.\nAs **this element is an accessibility requirement in the view**,\nyou **MUST*** re-implement this message on your own and display it when your form contains required inputs.\n- `valid`: Define form valid state\n\nMethods:\n- `displayError`: Display inputs/fieldsets errors if it exists.\n- `reset`: Reset form inputs values, validity and error state\n\nEvents:\n- `form-reset`: Emitted event on form reset\n- `form-submit`: Emitted event on form submit\n- `form-valid`: Emitted event on form validity check\nTells if form is valid or not\n\nSlots:\n- default: Form content\n- `actions`: Actions content\n\n",
+          "description": "Attributes:\n- `aria-role`: Define `<form/>` element aria role\nsee more about aria roles use case: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles\n- `disabled`: Define if form is disabled\n- `identifier`: Identifier is used for the element ID (id is a reserved prop in Stencil.js)\nIf not set, it will be created.\n- `invalid`: Define form invalid state\n- `label-on-top`: Define if slotted mg-component's label are displayed on top\n- `name`: Input name\nIf not set the value equals the identifier\n- `readonly`: Define if form is readonly\n- `required-message`: Define when required message is display.\nWhen it is unset, component use it internal logic to manage \"required message\" help text display.\nWhen you set the prop to `default`, you override the component internal logique to torce it display \"required message\" help text.\nWhen you set the prop to `hide`, it will prevent the rendering of the message in the component's DOM.\nAs **this element is an accessibility requirement in the view**,\nyou **MUST*** re-implement this message on your own and display it when your form contains required inputs.\n- `valid`: Define form valid state\n\nMethods:\n- `displayError`: Display inputs/fieldsets errors if it exists.\n- `focusFirstInvalidInput`: **Experimental.** The signature may still change in a minor release.\n\nDisplay errors, then focus and scroll to the first invalid input. Focusing is what\ncarries the information for assistive technologies, a scroll announces nothing.\nRead the `invalid` property to know whether the form had an invalid input.\n- `requestSubmit`: Request the form submission: emit `form-submit`, whatever the inputs validity.\nThis is what a `mg-button` associated with this form goes through, so that reaching the form\nneeds no access to its shadow DOM. Unlike the native `requestSubmit()`, it runs no constraint\nvalidation: validity is the consumer's call here, as it is on submission from a nested button.\nRead `invalid`, or call `displayError()` / `focusFirstInvalidInput()`.\nUnlike `reset()`, a readonly form still submits: readonly fields do not block a native\nsubmission either, and a nested button has always submitted such a form.\n- `reset`: Reset form inputs values, validity and error state\n\nEvents:\n- `form-reset`: Emitted event on form reset\n- `form-submit`: Emitted event on form submit\n- `form-valid`: Emitted event on form validity check\nTells if form is valid or not\n\nSlots:\n- default: Form content\n- `actions`: Actions content\n\n",
           "doc-url": "http://core.pages.mgdis.fr/core-ui/core-ui/storybook/?path=/docs/molecules-mg-form--docs",
           "attributes": [
             {

package/ide/vscode/html-custom-data.json

@@ -237,7 +237,7 @@
     },
     {
       "name": "mg-button",
-      "description": "Attributes:\n- `disable-on-click`: Option to set input disable on click, in order to prevent multi-click.\nParent component have to remove the attribute 'disabled' when the process ends.\n- `disabled`: Disable button\n- `form`: Define form id to attach button with.\nIf this attribute is not set, the `<button>` is associated with its ancestor `<form>` element.\n- `full-width`: Set button to full-width\n- `is-icon`: Define if button is round.\nUsed for icon button.\n- `label`: aria-label\nIn case button text is not explicit enough\n- `size`: Define button size\n- `type`: Define button type\n- `variant`: Define button variant\n\nEvents:\n- `disabled-change`: Emmited event when disabled change\n\nSlots:\n- default: Button content\n\n",
+      "description": "Attributes:\n- `disable-on-click`: Option to set input disable on click, in order to prevent multi-click.\nParent component have to remove the attribute 'disabled' when the process ends.\n- `disabled`: Disable button\n- `form`: Id of the form to associate the button with, following the native `form` attribute semantics:\nit must match the `identifier` of a `mg-form`, or the `id` of a `<form>`, in the same document,\nand it overrides the ancestor form.\nIf this attribute is not set, the button is associated with its ancestor form.\n- `full-width`: Set button to full-width\n- `is-icon`: Define if button is round.\nUsed for icon button.\n- `label`: aria-label\nIn case button text is not explicit enough\n- `size`: Define button size\n- `type`: Define button type\n- `variant`: Define button variant\n\nEvents:\n- `disabled-change`: Emmited event when disabled change\n\nSlots:\n- default: Button content\n\n",
       "attributes": [
         {
           "name": "disable-on-click",
@@ -269,7 +269,7 @@
         },
         {
           "name": "form",
-          "description": "Define form id to attach button with.\nIf this attribute is not set, the `<button>` is associated with its ancestor `<form>` element.\n\nType: `string`",
+          "description": "Id of the form to associate the button with, following the native `form` attribute semantics:\nit must match the `identifier` of a `mg-form`, or the `id` of a `<form>`, in the same document,\nand it overrides the ancestor form.\nIf this attribute is not set, the button is associated with its ancestor form.\n\nType: `string`",
           "references": [
             {
               "name": "Storybook",
@@ -779,7 +779,7 @@
     },
     {
       "name": "mg-form",
-      "description": "Attributes:\n- `aria-role`: Define `<form/>` element aria role\nsee more about aria roles use case: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles\n- `disabled`: Define if form is disabled\n- `identifier`: Identifier is used for the element ID (id is a reserved prop in Stencil.js)\nIf not set, it will be created.\n- `invalid`: Define form invalid state\n- `label-on-top`: Define if slotted mg-component's label are displayed on top\n- `name`: Input name\nIf not set the value equals the identifier\n- `readonly`: Define if form is readonly\n- `required-message`: Define when required message is display.\nWhen it is unset, component use it internal logic to manage \"required message\" help text display.\nWhen you set the prop to `default`, you override the component internal logique to torce it display \"required message\" help text.\nWhen you set the prop to `hide`, it will prevent the rendering of the message in the component's DOM.\nAs **this element is an accessibility requirement in the view**,\nyou **MUST*** re-implement this message on your own and display it when your form contains required inputs.\n- `valid`: Define form valid state\n\nMethods:\n- `displayError`: Display inputs/fieldsets errors if it exists.\n- `reset`: Reset form inputs values, validity and error state\n\nEvents:\n- `form-reset`: Emitted event on form reset\n- `form-submit`: Emitted event on form submit\n- `form-valid`: Emitted event on form validity check\nTells if form is valid or not\n\nSlots:\n- default: Form content\n- `actions`: Actions content\n\n",
+      "description": "Attributes:\n- `aria-role`: Define `<form/>` element aria role\nsee more about aria roles use case: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles\n- `disabled`: Define if form is disabled\n- `identifier`: Identifier is used for the element ID (id is a reserved prop in Stencil.js)\nIf not set, it will be created.\n- `invalid`: Define form invalid state\n- `label-on-top`: Define if slotted mg-component's label are displayed on top\n- `name`: Input name\nIf not set the value equals the identifier\n- `readonly`: Define if form is readonly\n- `required-message`: Define when required message is display.\nWhen it is unset, component use it internal logic to manage \"required message\" help text display.\nWhen you set the prop to `default`, you override the component internal logique to torce it display \"required message\" help text.\nWhen you set the prop to `hide`, it will prevent the rendering of the message in the component's DOM.\nAs **this element is an accessibility requirement in the view**,\nyou **MUST*** re-implement this message on your own and display it when your form contains required inputs.\n- `valid`: Define form valid state\n\nMethods:\n- `displayError`: Display inputs/fieldsets errors if it exists.\n- `focusFirstInvalidInput`: **Experimental.** The signature may still change in a minor release.\n\nDisplay errors, then focus and scroll to the first invalid input. Focusing is what\ncarries the information for assistive technologies, a scroll announces nothing.\nRead the `invalid` property to know whether the form had an invalid input.\n- `requestSubmit`: Request the form submission: emit `form-submit`, whatever the inputs validity.\nThis is what a `mg-button` associated with this form goes through, so that reaching the form\nneeds no access to its shadow DOM. Unlike the native `requestSubmit()`, it runs no constraint\nvalidation: validity is the consumer's call here, as it is on submission from a nested button.\nRead `invalid`, or call `displayError()` / `focusFirstInvalidInput()`.\nUnlike `reset()`, a readonly form still submits: readonly fields do not block a native\nsubmission either, and a nested button has always submitted such a form.\n- `reset`: Reset form inputs values, validity and error state\n\nEvents:\n- `form-reset`: Emitted event on form reset\n- `form-submit`: Emitted event on form submit\n- `form-valid`: Emitted event on form validity check\nTells if form is valid or not\n\nSlots:\n- default: Form content\n- `actions`: Actions content\n\n",
       "attributes": [
         {
           "name": "aria-role",