@mgdis/mg-components 6.1.0 → 6.3.0

package/ide/intellij/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@mgdis/mg-components",
-  "version": "6.1.0",
+  "version": "6.3.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -69,7 +69,7 @@
         },
         {
           "name": "mg-alert",
-          "description": "Attributes:\n- `delay`: Add a delay to hide/close message when it passed\nValue is defined in seconds and must greater than 2 seconds\n- `variant`: Define variant\n- `variant-style`: Define variant style\n\nEvents:\n- `component-hide`: Emited event when alert is hidden\n- `component-show`: Emited event when alert is diplayed\n\nSlots:\n- ``: Alert content\n- `actions`: Actions content\n\n",
+          "description": "Attributes:\n- `delay`: Add a delay to hide/close message when it passed\nValue is defined in seconds and must greater than 2 seconds\n- `variant`: Define variant\n- `variant-style`: Define variant style\n\nEvents:\n- `component-close`: Emmited event when alert is closed\n- `component-hide`: Emited event when alert is hidden\n- `component-show`: Emited event when alert is diplayed\n\nSlots:\n- ``: Alert content\n- `actions`: Actions content\n\n",
           "doc-url": "http://core.pages.mgdis.fr/core-ui/core-ui/storybook/?path=/docs/molecules-mg-alert--docs",
           "attributes": [
             {
@@ -131,6 +131,10 @@
               }
             ],
             "events": [
+              {
+                "name": "component-close",
+                "description": "Emmited event when alert is closed"
+              },
               {
                 "name": "component-hide",
                 "description": "Emited event when alert is hidden"
@@ -249,7 +253,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- `type`: Define button type\n- `variant`: Define button variant\n\nEvents:\n- `disabled-change`: Emmited event when disabled change\n\nSlots:\n- ``: 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`: 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- ``: Button content\n\n",
           "doc-url": "http://core.pages.mgdis.fr/core-ui/core-ui/storybook/?path=/docs/atoms-mg-button--docs",
           "attributes": [
             {
@@ -309,6 +313,16 @@
                 "required": false
               }
             },
+            {
+              "name": "size",
+              "description": "Define button size\n\nType: `\"large\" | \"medium\"`",
+              "doc-url": "http://core.pages.mgdis.fr/core-ui/core-ui/storybook/?path=/docs/atoms-mg-button--docs",
+              "value": {
+                "type": "\"large\" | \"medium\"",
+                "default": "sizes[0]",
+                "required": false
+              }
+            },
             {
               "name": "type",
               "description": "Define button type\n\nType: `\"button\" | \"reset\" | \"submit\"`",
@@ -388,6 +402,16 @@
                   "required": false
                 }
               },
+              {
+                "name": "size",
+                "description": "Define button size\n\nType: `\"large\" | \"medium\"`",
+                "doc-url": "http://core.pages.mgdis.fr/core-ui/core-ui/storybook/?path=/docs/atoms-mg-button--docs",
+                "value": {
+                  "type": "\"large\" | \"medium\"",
+                  "default": "sizes[0]",
+                  "required": false
+                }
+              },
               {
                 "name": "type",
                 "description": "Define button type\n\nType: `\"button\" | \"reset\" | \"submit\"`",
@@ -793,7 +817,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 input error if it exists.\n\nEvents:\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- ``: 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 input error if it exists.\n- `reset`: Reset form inputs values, validity and error state\n\nEvents:\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- ``: 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": [
             {
@@ -1391,7 +1415,7 @@
         },
         {
           "name": "mg-input-checkbox",
-          "description": "Attributes:\n- `disabled`: Define if input is disabled\n- `display-selected-values`: Display selected values list in \"multi\" type\nThis prop is only applied with prop type \"multi\" or when an \"unset\" mode render a \"multi\" type.\n- `edit-button-message`: Overwrite default \"edit\" button message\n- `help-text`: Add a help text under the input, usually expected data format and example\n- `identifier`: Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n- `input-vertical-list`: Define if inputs are display verticaly\n- `invalid`: Define input invalid state\n- `label`: Define input label\n- `label-hide`: Define if label is visible\n- `label-on-top`: Define if label is displayed on top\n- `name`: Define input name\nIf not set the value equals the identifier\n- `readonly`: Define if mg-input-checkbox is readonly\n- `required`: Define if mg-input-checkbox is required\n- `select-button-message`: Overwrite default \"select\" button message\n- `show-button-message`: Overwrite default \"show\" button message\n- `tooltip`: Add a tooltip message next to the input\n- `tooltip-position`: Define tooltip position\n- `type`: Define checkbox type\nWhen it's undefined the type is dynamic:\n- With 0-5 items type is 'checkbox'\n- With 5-10 items type is 'multi'\nWhen it set the type is locked to the defined value.\nWhen type is dynamic OR with 'multi' type AND Over 10 items \"search\" feature is enabled\n- `valid`: Define input valid state\n\nProperties:\n- `value`: Component value\nIf item.value is `null`, checkbox will be indeterminate by default\n\nMethods:\n- `displayError`: Display input error if it exists.\n- `setError`: Set an error and display a custom error message.\nThis method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\nIt must be paired with an error message to display for the given context.\nWhen used to set validity to `false`, you should use this method again to reset the validity to `true`.\n\nEvents:\n- `input-valid`: Emited event when checking validity\n- `value-change`: Emitted event when value change\n\n",
+          "description": "Attributes:\n- `disabled`: Define if input is disabled\n- `display-selected-values`: Display selected values list in \"multi\" type\nThis prop is only applied with prop type \"multi\" or when an \"unset\" mode render a \"multi\" type.\n- `edit-button-message`: Overwrite default \"edit\" button message\n- `help-text`: Add a help text under the input, usually expected data format and example\n- `identifier`: Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n- `input-vertical-list`: Define if inputs are display verticaly\n- `invalid`: Define input invalid state\n- `label`: Define input label\n- `label-hide`: Define if label is visible\n- `label-on-top`: Define if label is displayed on top\n- `name`: Define input name\nIf not set the value equals the identifier\n- `readonly`: Define if mg-input-checkbox is readonly\n- `required`: Define if mg-input-checkbox is required\n- `select-button-message`: Overwrite default \"select\" button message\n- `show-button-message`: Overwrite default \"show\" button message\n- `tooltip`: Add a tooltip message next to the input\n- `tooltip-position`: Define tooltip position\n- `type`: Define checkbox type\nWhen it's undefined the type is dynamic:\n- With 0-5 items type is 'checkbox'\n- With 5-10 items type is 'multi'\nWhen it set the type is locked to the defined value.\nWhen type is dynamic OR with 'multi' type AND Over 10 items \"search\" feature is enabled\n- `valid`: Define input valid state\n\nProperties:\n- `value`: Component value\nIf item.value is `null`, checkbox will be indeterminate by default\n\nMethods:\n- `displayError`: Display input error if it exists.\n- `reset`: Reset value, validity and error state\n- `setError`: Set an error and display a custom error message.\nThis method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\nIt must be paired with an error message to display for the given context.\nWhen used to set validity to `false`, you should use this method again to reset the validity to `true`.\n\nEvents:\n- `input-valid`: Emited event when checking validity\n- `value-change`: Emitted event when value change\n\n",
           "doc-url": "http://core.pages.mgdis.fr/core-ui/core-ui/storybook/?path=/docs/molecules-inputs-mg-input-checkbox--docs",
           "attributes": [
             {
@@ -1780,7 +1804,7 @@
         },
         {
           "name": "mg-input-date",
-          "description": "Attributes:\n- `disabled`: Define if input is disabled\n- `help-text`: Add a help text under the input, usually expected data format and example\nAvailable string variables:\n - `{pattern}`: render innerHTML pattern based on system\n - `{date}`: render innerText date with a pattern base format.\n - `{defaultHelpText}`: render default `helpText` usefull to concat helpText local with your custom text.\nex: `Input use {pattern} pattern` as `helpText` prop value will be render as `Input use mm/dd/yyyy pattern`\n- `identifier`: Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n- `invalid`: Define input invalid state\n- `label`: Input label\n- `label-hide`: Define if label is visible\n- `label-on-top`: Define if label is displayed on top\n- `max`: Define input maximum date\nformat: yyyy-mm-dd\n- `min`: Define input minimum date\nformat: yyyy-mm-dd\n- `name`: Input name\nIf not set the value equals the identifier\n- `readonly`: Define if input is readonly\n- `required`: Define if input is required\n- `tooltip`: Add a tooltip message next to the input\n- `tooltip-position`: Define tooltip position\n- `valid`: Define input valid state\n- `value`: Component value\n\nMethods:\n- `displayError`: Display input error if it exists.\n- `setError`: Set an error and display a custom error message.\nThis method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\nIt must be paired with an error message to display for the given context.\nWhen used to set validity to `false`, you should use this method again to reset the validity to `true`.\n\nEvents:\n- `input-valid`: Emited event when checking validity\n- `value-change`: Emited event when value change\n\n",
+          "description": "Attributes:\n- `disabled`: Define if input is disabled\n- `help-text`: Add a help text under the input, usually expected data format and example\nAvailable string variables:\n - `{pattern}`: render innerHTML pattern based on system\n - `{date}`: render innerText date with a pattern base format.\n - `{defaultHelpText}`: render default `helpText` usefull to concat helpText local with your custom text.\nex: `Input use {pattern} pattern` as `helpText` prop value will be render as `Input use mm/dd/yyyy pattern`\n- `identifier`: Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n- `invalid`: Define input invalid state\n- `label`: Input label\n- `label-hide`: Define if label is visible\n- `label-on-top`: Define if label is displayed on top\n- `max`: Define input maximum date\nformat: yyyy-mm-dd\n- `min`: Define input minimum date\nformat: yyyy-mm-dd\n- `name`: Input name\nIf not set the value equals the identifier\n- `readonly`: Define if input is readonly\n- `required`: Define if input is required\n- `tooltip`: Add a tooltip message next to the input\n- `tooltip-position`: Define tooltip position\n- `valid`: Define input valid state\n- `value`: Component value\n\nMethods:\n- `displayError`: Display input error if it exists.\n- `reset`: Reset value, validity and error state\n- `setError`: Set an error and display a custom error message.\nThis method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\nIt must be paired with an error message to display for the given context.\nWhen used to set validity to `false`, you should use this method again to reset the validity to `true`.\n\nEvents:\n- `input-valid`: Emited event when checking validity\n- `value-change`: Emited event when value change\n\n",
           "doc-url": "http://core.pages.mgdis.fr/core-ui/core-ui/storybook/?path=/docs/molecules-inputs-mg-input-date--docs",
           "attributes": [
             {
@@ -2106,7 +2130,7 @@
         },
         {
           "name": "mg-input-numeric",
-          "description": "Attributes:\n- `currency`: Define currency\n- `decimal-length`: Override decimal length\ndecimal is the number after the decimal point\n- `disabled`: Define if input is disabled\n- `format`: Set local formatting.\nNumbers are formatted based on the locale.\n- `help-text`: Add a help text under the input, usually expected data format and example\n- `identifier`: Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n- `integer-length`: Override integer length\ninteger is the number before the decimal point\n- `invalid`: Define input pattern error message\n- `label`: Input label\n- `label-hide`: Define if label is visible\n- `label-on-top`: Define if label is displayed on top\n- `max`: Maximum value\n- `mg-width`: Define input width\n- `min`: Minimum value\n- `name`: Input name\nIf not set the value equals the identifier\n- `placeholder`: Input placeholder.\nIt should be a word or short phrase that demonstrates the expected type of data, not a replacement for labels or help text.\n- `readonly`: Define if input is readonly\n- `required`: Define if input is required\n- `tooltip`: Add a tooltip message next to the input\n- `tooltip-position`: Define tooltip position\n- `type`: Define numeric type\n- `valid`: Define input pattern to validate\n- `value`: Component value\n\nMethods:\n- `displayError`: Display input error if it exists.\n- `setError`: Set an error and display a custom error message.\nThis method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\nIt must be paired with an error message to display for the given context.\nWhen used to set validity to `false`, you should use this method again to reset the validity to `true`.\n\nEvents:\n- `input-valid`: Emited event when checking validity\n- `value-change`: Emited event when value change\n\nSlots:\n- `append-input`: Content to display next to the input\n\n",
+          "description": "Attributes:\n- `currency`: Define currency\n- `decimal-length`: Override decimal length\ndecimal is the number after the decimal point\n- `disabled`: Define if input is disabled\n- `format`: Set local formatting.\nNumbers are formatted based on the locale.\n- `help-text`: Add a help text under the input, usually expected data format and example\n- `identifier`: Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n- `integer-length`: Override integer length\ninteger is the number before the decimal point\n- `invalid`: Define input pattern error message\n- `label`: Input label\n- `label-hide`: Define if label is visible\n- `label-on-top`: Define if label is displayed on top\n- `max`: Maximum value\n- `mg-width`: Define input width\n- `min`: Minimum value\n- `name`: Input name\nIf not set the value equals the identifier\n- `placeholder`: Input placeholder.\nIt should be a word or short phrase that demonstrates the expected type of data, not a replacement for labels or help text.\n- `readonly`: Define if input is readonly\n- `required`: Define if input is required\n- `tooltip`: Add a tooltip message next to the input\n- `tooltip-position`: Define tooltip position\n- `type`: Define numeric type\n- `unit`: Define unit symbol (km, L, etc.)\n- `unit-display`: Define unit display format ('short', 'long', 'narrow')\n- `valid`: Define input pattern to validate\n- `value`: Component value\n\nMethods:\n- `displayError`: Display input error if it exists.\n- `reset`: Reset value, validity and error state\n- `setError`: Set an error and display a custom error message.\nThis method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\nIt must be paired with an error message to display for the given context.\nWhen used to set validity to `false`, you should use this method again to reset the validity to `true`.\n\nEvents:\n- `input-valid`: Emited event when checking validity\n- `value-change`: Emited event when value change\n\nSlots:\n- `append-input`: Content to display next to the input\n\n",
           "doc-url": "http://core.pages.mgdis.fr/core-ui/core-ui/storybook/?path=/docs/molecules-inputs-mg-input-numeric--docs",
           "attributes": [
             {
@@ -2141,10 +2165,10 @@
             },
             {
               "name": "format",
-              "description": "Set local formatting.\nNumbers are formatted based on the locale.\n\nType: `\"currency\" | \"none\" | \"number\"`",
+              "description": "Set local formatting.\nNumbers are formatted based on the locale.\n\nType: `\"currency\" | \"none\" | \"number\" | \"percent\" | \"unit\"`",
               "doc-url": "http://core.pages.mgdis.fr/core-ui/core-ui/storybook/?path=/docs/molecules-inputs-mg-input-numeric--docs",
               "value": {
-                "type": "\"currency\" | \"none\" | \"number\"",
+                "type": "\"currency\" | \"none\" | \"number\" | \"percent\" | \"unit\"",
                 "default": "'number'",
                 "required": false
               }
@@ -2309,6 +2333,25 @@
                 "required": false
               }
             },
+            {
+              "name": "unit",
+              "description": "Define unit symbol (km, L, etc.)\n\nType: `string`",
+              "doc-url": "http://core.pages.mgdis.fr/core-ui/core-ui/storybook/?path=/docs/molecules-inputs-mg-input-numeric--docs",
+              "value": {
+                "type": "string",
+                "required": false
+              }
+            },
+            {
+              "name": "unit-display",
+              "description": "Define unit display format ('short', 'long', 'narrow')\n\nType: `\"long\" | \"narrow\" | \"short\"`",
+              "doc-url": "http://core.pages.mgdis.fr/core-ui/core-ui/storybook/?path=/docs/molecules-inputs-mg-input-numeric--docs",
+              "value": {
+                "type": "\"long\" | \"narrow\" | \"short\"",
+                "default": "'short'",
+                "required": false
+              }
+            },
             {
               "name": "valid",
               "description": "Define input pattern to validate\n\nType: `boolean`",
@@ -2362,10 +2405,10 @@
               },
               {
                 "name": "format",
-                "description": "Set local formatting.\nNumbers are formatted based on the locale.\n\nType: `\"currency\" | \"none\" | \"number\"`",
+                "description": "Set local formatting.\nNumbers are formatted based on the locale.\n\nType: `\"currency\" | \"none\" | \"number\" | \"percent\" | \"unit\"`",
                 "doc-url": "http://core.pages.mgdis.fr/core-ui/core-ui/storybook/?path=/docs/molecules-inputs-mg-input-numeric--docs",
                 "value": {
-                  "type": "\"currency\" | \"none\" | \"number\"",
+                  "type": "\"currency\" | \"none\" | \"number\" | \"percent\" | \"unit\"",
                   "default": "'number'",
                   "required": false
                 }
@@ -2530,6 +2573,25 @@
                   "required": false
                 }
               },
+              {
+                "name": "unit",
+                "description": "Define unit symbol (km, L, etc.)\n\nType: `string`",
+                "doc-url": "http://core.pages.mgdis.fr/core-ui/core-ui/storybook/?path=/docs/molecules-inputs-mg-input-numeric--docs",
+                "value": {
+                  "type": "string",
+                  "required": false
+                }
+              },
+              {
+                "name": "unitDisplay",
+                "description": "Define unit display format ('short', 'long', 'narrow')\n\nType: `\"long\" | \"narrow\" | \"short\"`",
+                "doc-url": "http://core.pages.mgdis.fr/core-ui/core-ui/storybook/?path=/docs/molecules-inputs-mg-input-numeric--docs",
+                "value": {
+                  "type": "\"long\" | \"narrow\" | \"short\"",
+                  "default": "'short'",
+                  "required": false
+                }
+              },
               {
                 "name": "valid",
                 "description": "Define input pattern to validate\n\nType: `boolean`",
@@ -2566,7 +2628,7 @@
         },
         {
           "name": "mg-input-password",
-          "description": "Attributes:\n- `disabled`: Define if input is disabled\n- `help-text`: Add a help text under the input, usually expected data format and example\n- `identifier`: Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n- `invalid`: Define input invalid state\n- `label`: Input label\n- `label-hide`: Define if label is visible\n- `label-on-top`: Define if label is displayed on top\n- `maxlength`: Input max length\n- `mg-width`: Define input width\n- `name`: Input name\nIf not set the value equals the identifier\n- `placeholder`: Input placeholder.\nIt should be a word or short phrase that demonstrates the expected type of data, not a replacement for labels or help text.\n- `readonly`: Define if input is readonly\n- `required`: Define if input is required\n- `tooltip`: Add a tooltip message next to the input\n- `tooltip-position`: Define tooltip position\n- `valid`: Define input valid state\n- `value`: Component value\n\nMethods:\n- `displayError`: Display input error if it exists.\n- `setError`: Set an error and display a custom error message.\nThis method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\nIt must be paired with an error message to display for the given context.\nWhen used to set validity to `false`, you should use this method again to reset the validity to `true`.\n\nEvents:\n- `input-valid`: Emited event when checking validity\n- `value-change`: Emited event when value change\n\n",
+          "description": "Attributes:\n- `disabled`: Define if input is disabled\n- `help-text`: Add a help text under the input, usually expected data format and example\n- `identifier`: Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n- `invalid`: Define input invalid state\n- `label`: Input label\n- `label-hide`: Define if label is visible\n- `label-on-top`: Define if label is displayed on top\n- `maxlength`: Input max length\n- `mg-width`: Define input width\n- `name`: Input name\nIf not set the value equals the identifier\n- `placeholder`: Input placeholder.\nIt should be a word or short phrase that demonstrates the expected type of data, not a replacement for labels or help text.\n- `readonly`: Define if input is readonly\n- `required`: Define if input is required\n- `tooltip`: Add a tooltip message next to the input\n- `tooltip-position`: Define tooltip position\n- `valid`: Define input valid state\n- `value`: Component value\n\nMethods:\n- `displayError`: Display input error if it exists.\n- `reset`: Reset value, validity and error state\n- `setError`: Set an error and display a custom error message.\nThis method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\nIt must be paired with an error message to display for the given context.\nWhen used to set validity to `false`, you should use this method again to reset the validity to `true`.\n\nEvents:\n- `input-valid`: Emited event when checking validity\n- `value-change`: Emited event when value change\n\n",
           "doc-url": "http://core.pages.mgdis.fr/core-ui/core-ui/storybook/?path=/docs/molecules-inputs-mg-input-password--docs",
           "attributes": [
             {
@@ -2910,7 +2972,7 @@
         },
         {
           "name": "mg-input-radio",
-          "description": "Attributes:\n- `disabled`: Define if input is disabled\n- `help-text`: Add a help text under the input, usually expected data format and example\n- `identifier`: Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n- `input-vertical-list`: Define if inputs are display verticaly\n- `invalid`: Define input invalid state\n- `label`: Input label\n- `label-hide`: Define if label is visible\n- `label-on-top`: Define if label is displayed on top\n- `name`: Input name\nIf not set the value equals the identifier\n- `readonly`: Define if input is readonly\n- `required`: Define if input is required\n- `tooltip`: Add a tooltip message next to the input\n- `tooltip-position`: Define tooltip position\n- `valid`: Define input valid state\n- `value`: Component value\n\nProperties:\n- `items`: Items are the possible options to select\n\nMethods:\n- `displayError`: Display input error if it exists.\n- `setError`: Set an error and display a custom error message.\nThis method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\nIt must be paired with an error message to display for the given context.\nWhen used to set validity to `false`, you should use this method again to reset the validity to `true`.\n\nEvents:\n- `input-valid`: Emited event when checking validity\n- `value-change`: Emitted event when value change\n\n",
+          "description": "Attributes:\n- `disabled`: Define if input is disabled\n- `help-text`: Add a help text under the input, usually expected data format and example\n- `identifier`: Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n- `input-vertical-list`: Define if inputs are display verticaly\n- `invalid`: Define input invalid state\n- `label`: Input label\n- `label-hide`: Define if label is visible\n- `label-on-top`: Define if label is displayed on top\n- `name`: Input name\nIf not set the value equals the identifier\n- `readonly`: Define if input is readonly\n- `required`: Define if input is required\n- `tooltip`: Add a tooltip message next to the input\n- `tooltip-position`: Define tooltip position\n- `valid`: Define input valid state\n- `value`: Component value\n\nProperties:\n- `items`: Items are the possible options to select\n\nMethods:\n- `displayError`: Display input error if it exists.\n- `reset`: Reset value, validity and error state\n- `setError`: Set an error and display a custom error message.\nThis method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\nIt must be paired with an error message to display for the given context.\nWhen used to set validity to `false`, you should use this method again to reset the validity to `true`.\n\nEvents:\n- `input-valid`: Emited event when checking validity\n- `value-change`: Emitted event when value change\n\n",
           "doc-url": "http://core.pages.mgdis.fr/core-ui/core-ui/storybook/?path=/docs/molecules-inputs-mg-input-radio--docs",
           "attributes": [
             {
@@ -3229,7 +3291,7 @@
         },
         {
           "name": "mg-input-select",
-          "description": "Attributes:\n- `disabled`: Define if input is disabled\n- `help-text`: Add a help text under the input, usually expected data format and example\n- `identifier`: Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n- `invalid`: Define input invalid state\n- `label`: Input label\n- `label-hide`: Define if label is visible\n- `label-on-top`: Define if label is displayed on top\n- `mg-width`: Define input width\n- `name`: Input name\nIf not set the value equals the identifier\n- `placeholder`: Input placeholder.\nIt should be a word or short phrase that demonstrates the expected type of data, not a replacement for labels or help text.\n- `placeholder-disabled`: Option to disable placeholder\n- `placeholder-hide`: Option to remove placeholder\n- `readonly`: Define if input is readonly\n- `required`: Define if input is required\n- `tooltip`: Add a tooltip message next to the input\n- `tooltip-position`: Define tooltip position\n- `valid`: Define input valid state\n- `value`: Component value\n\nProperties:\n- `items`: Items are the possible options to select\n\nMethods:\n- `displayError`: Display input error if it exists.\n- `setError`: Set an error and display a custom error message.\nThis method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\nIt must be paired with an error message to display for the given context.\nWhen used to set validity to `false`, you should use this method again to reset the validity to `true`.\n\nEvents:\n- `input-valid`: Emited event when checking validity\n- `value-change`: Emited event when value change\n\n",
+          "description": "Attributes:\n- `disabled`: Define if input is disabled\n- `help-text`: Add a help text under the input, usually expected data format and example\n- `identifier`: Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n- `invalid`: Define input invalid state\n- `label`: Input label\n- `label-hide`: Define if label is visible\n- `label-on-top`: Define if label is displayed on top\n- `mg-width`: Define input width\n- `name`: Input name\nIf not set the value equals the identifier\n- `placeholder`: Input placeholder.\nIt should be a word or short phrase that demonstrates the expected type of data, not a replacement for labels or help text.\n- `placeholder-disabled`: Option to disable placeholder\n- `placeholder-hide`: Option to remove placeholder\n- `readonly`: Define if input is readonly\n- `required`: Define if input is required\n- `tooltip`: Add a tooltip message next to the input\n- `tooltip-position`: Define tooltip position\n- `valid`: Define input valid state\n- `value`: Component value\n\nProperties:\n- `items`: Items are the possible options to select\n\nMethods:\n- `displayError`: Display input error if it exists.\n- `reset`: Reset value, validity and error state\n- `setError`: Set an error and display a custom error message.\nThis method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\nIt must be paired with an error message to display for the given context.\nWhen used to set validity to `false`, you should use this method again to reset the validity to `true`.\n\nEvents:\n- `input-valid`: Emited event when checking validity\n- `value-change`: Emited event when value change\n\n",
           "doc-url": "http://core.pages.mgdis.fr/core-ui/core-ui/storybook/?path=/docs/molecules-inputs-mg-input-select--docs",
           "attributes": [
             {
@@ -3602,7 +3664,7 @@
         },
         {
           "name": "mg-input-text",
-          "description": "Attributes:\n- `character-left-hide`: Define if component should display character left\n- `disabled`: Define if input is disabled\n- `help-text`: Add a help text under the input, usually expected data format and example\n- `icon`: Input icon\n- `identifier`: Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n- `invalid`: Define input invalid state\n- `label`: Input label\n- `label-hide`: Define if label is visible\n- `label-on-top`: Define if label is displayed on top\n- `maxlength`: Input max length\n- `mg-width`: Define input width\n- `name`: Input name\nIf not set the value equals the identifier\n- `pattern`: Define input pattern to validate\nPlease refer to the Pattern section in the input documentation for detailed information on using regular expressions in components.\n- `pattern-error-message`: Define input pattern error message\n- `placeholder`: Input placeholder.\nIt should be a word or short phrase that demonstrates the expected type of data, not a replacement for labels or help text.\n- `readonly`: Define if input is readonly\n- `required`: Define if input is required\n- `tooltip`: Add a tooltip message next to the input\n- `tooltip-position`: Define tooltip position\n- `type`: Input type\n- `valid`: Define input valid state\n- `value`: Component value\n\nProperties:\n- `datalistoptions`: Define datalist options\n\nMethods:\n- `displayError`: Display input error if it exists.\n- `setError`: Set an error and display a custom error message.\nThis method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\nIt must be paired with an error message to display for the given context.\nWhen used to set validity to `false`, you should use this method again to reset the validity to `true`.\n- `setFocus`: Public method to play input focus\n\nEvents:\n- `input-valid`: Emited event when checking validity\n- `value-change`: Emited event when value change\n\nSlots:\n- `append-input`: Content to display next to the input\n\n",
+          "description": "Attributes:\n- `character-left-hide`: Define if component should display character left\n- `disabled`: Define if input is disabled\n- `help-text`: Add a help text under the input, usually expected data format and example\n- `icon`: Input icon\n- `identifier`: Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n- `invalid`: Define input invalid state\n- `label`: Input label\n- `label-hide`: Define if label is visible\n- `label-on-top`: Define if label is displayed on top\n- `maxlength`: Input max length\n- `mg-width`: Define input width\n- `name`: Input name\nIf not set the value equals the identifier\n- `pattern`: Define input pattern to validate\nPlease refer to the Pattern section in the input documentation for detailed information on using regular expressions in components.\n- `pattern-error-message`: Define input pattern error message\n- `placeholder`: Input placeholder.\nIt should be a word or short phrase that demonstrates the expected type of data, not a replacement for labels or help text.\n- `readonly`: Define if input is readonly\n- `required`: Define if input is required\n- `tooltip`: Add a tooltip message next to the input\n- `tooltip-position`: Define tooltip position\n- `type`: Input type\n- `valid`: Define input valid state\n- `value`: Component value\n\nProperties:\n- `datalistoptions`: Define datalist options\n\nMethods:\n- `displayError`: Display input error if it exists.\n- `reset`: Reset value, validity and error state\n- `setError`: Set an error and display a custom error message.\nThis method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\nIt must be paired with an error message to display for the given context.\nWhen used to set validity to `false`, you should use this method again to reset the validity to `true`.\n- `setFocus`: Public method to play input focus\n\nEvents:\n- `input-valid`: Emited event when checking validity\n- `value-change`: Emited event when value change\n\nSlots:\n- `append-input`: Content to display next to the input\n\n",
           "doc-url": "http://core.pages.mgdis.fr/core-ui/core-ui/storybook/?path=/docs/molecules-inputs-mg-input-text--docs",
           "attributes": [
             {
@@ -4051,7 +4113,7 @@
         },
         {
           "name": "mg-input-textarea",
-          "description": "Attributes:\n- `character-left-hide`: Define if component should display character left\n- `disabled`: Define if input is disabled\n- `help-text`: Add a help text under the input, usually expected data format and example\n- `identifier`: Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n- `invalid`: Define input invalid state\n- `label`: Input label\n- `label-hide`: Define if label is visible\n- `label-on-top`: Define if label is displayed on top\n- `maxlength`: Input max length\n- `mg-width`: Define input width\n- `name`: Input name\nIf not set the value equals the identifier\n- `pattern`: Define input pattern to validate\nPlease refer to the Pattern section in the input documentation for detailed information on using regular expressions in components.\n- `pattern-error-message`: Define input pattern error message\n- `placeholder`: Input placeholder.\nIt should be a word or short phrase that demonstrates the expected type of data, not a replacement for labels or help text.\n- `readonly`: Define if input is readonly\n- `required`: Define if input is required\n- `resizable`: Define if input is resizable\n- `rows`: Define the number of visible text lines for the control\n- `tooltip`: Add a tooltip message next to the input\n- `tooltip-position`: Define tooltip position\n- `valid`: Define input valid state\n- `value`: Component value\n\nMethods:\n- `displayError`: Display input error if it exists.\n- `setError`: Set an error and display a custom error message.\nThis method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\nIt must be paired with an error message to display for the given context.\nWhen used to set validity to `false`, you should use this method again to reset the validity to `true`.\n\nEvents:\n- `input-valid`: Emited event when checking validity\n- `value-change`: Emited event when value change\n\n",
+          "description": "Attributes:\n- `character-left-hide`: Define if component should display character left\n- `disabled`: Define if input is disabled\n- `help-text`: Add a help text under the input, usually expected data format and example\n- `identifier`: Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n- `invalid`: Define input invalid state\n- `label`: Input label\n- `label-hide`: Define if label is visible\n- `label-on-top`: Define if label is displayed on top\n- `maxlength`: Input max length\n- `mg-width`: Define input width\n- `name`: Input name\nIf not set the value equals the identifier\n- `pattern`: Define input pattern to validate\nPlease refer to the Pattern section in the input documentation for detailed information on using regular expressions in components.\n- `pattern-error-message`: Define input pattern error message\n- `placeholder`: Input placeholder.\nIt should be a word or short phrase that demonstrates the expected type of data, not a replacement for labels or help text.\n- `readonly`: Define if input is readonly\n- `required`: Define if input is required\n- `resizable`: Define if input is resizable\n- `rows`: Define the number of visible text lines for the control\n- `tooltip`: Add a tooltip message next to the input\n- `tooltip-position`: Define tooltip position\n- `valid`: Define input valid state\n- `value`: Component value\n\nMethods:\n- `displayError`: Display input error if it exists.\n- `reset`: Reset value, validity and error state\n- `setError`: Set an error and display a custom error message.\nThis method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\nIt must be paired with an error message to display for the given context.\nWhen used to set validity to `false`, you should use this method again to reset the validity to `true`.\n\nEvents:\n- `input-valid`: Emited event when checking validity\n- `value-change`: Emited event when value change\n\n",
           "doc-url": "http://core.pages.mgdis.fr/core-ui/core-ui/storybook/?path=/docs/molecules-inputs-mg-input-textarea--docs",
           "attributes": [
             {
@@ -4493,7 +4555,7 @@
         },
         {
           "name": "mg-input-toggle",
-          "description": "Attributes:\n- `disabled`: Define if input is disabled\n- `help-text`: Add a help text under the input, usually expected data format and example\n- `identifier`: Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n- `is-icon`: Define if toggle display icon\n- `is-on-off`: Define if toggle have on/off style\n- `label`: Input label\n- `label-hide`: Define if label is visible\n- `label-on-top`: Define if label is displayed on top\n- `name`: Input name\nIf not set the value equals the identifier\n- `readonly`: Define if input is readonly\n- `tooltip`: Add a tooltip message next to the input\n- `tooltip-position`: Define tooltip position\n- `value`: Component value\n\nProperties:\n- `items`: Items are the possible options to select\n\nMethods:\n- `setError`: Set an error and display a custom error message.\nThis method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\nIt must be paired with an error message to display for the given context.\nWhen used to set validity to `false`, you should use this method again to reset the validity to `true`.\n\nEvents:\n- `input-valid`: Emited event when checking validity\n- `value-change`: Emited event when value change\n\nSlots:\n- `item-1`: Left option toggle content\n- `item-2`: Right option toggle content\n\n",
+          "description": "Attributes:\n- `disabled`: Define if input is disabled\n- `help-text`: Add a help text under the input, usually expected data format and example\n- `identifier`: Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n- `is-icon`: Define if toggle display icon\n- `is-on-off`: Define if toggle have on/off style\n- `label`: Input label\n- `label-hide`: Define if label is visible\n- `label-on-top`: Define if label is displayed on top\n- `name`: Input name\nIf not set the value equals the identifier\n- `readonly`: Define if input is readonly\n- `tooltip`: Add a tooltip message next to the input\n- `tooltip-position`: Define tooltip position\n- `value`: Component value\n\nProperties:\n- `items`: Items are the possible options to select\n\nMethods:\n- `reset`: Reset value, validity, error and visual state\n- `setError`: Set an error and display a custom error message.\nThis method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\nIt must be paired with an error message to display for the given context.\nWhen used to set validity to `false`, you should use this method again to reset the validity to `true`.\n\nEvents:\n- `input-valid`: Emited event when checking validity\n- `value-change`: Emited event when value change\n\nSlots:\n- `item-1`: Left option toggle content\n- `item-2`: Right option toggle content\n\n",
           "doc-url": "http://core.pages.mgdis.fr/core-ui/core-ui/storybook/?path=/docs/molecules-inputs-mg-input-toggle--docs",
           "attributes": [
             {
@@ -5109,7 +5171,7 @@
         },
         {
           "name": "mg-modal",
-          "description": "Attributes:\n- `close-button`: Define if modal has a cross button\n- `dialog-role`: Modal dialog role.\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- `modal-title`: Displayed modal title\n- `open`: Define if modal is open\n\nEvents:\n- `component-hide`: Emmited event when modal is hidden\n- `component-show`: Emmited event when modal is diplayed\n\nSlots:\n- ``: Modal content\n- `actions`: Actions content\n\n",
+          "description": "Attributes:\n- `close-button`: Define if modal has a cross button\n- `dialog-role`: Modal dialog role.\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- `modal-title`: Displayed modal title\n- `open`: Define if modal is open\n\nEvents:\n- `component-close`: Emmited event when modal is closed\n- `component-hide`: Emmited event when modal is hidden\n- `component-show`: Emmited event when modal is diplayed\n\nSlots:\n- ``: Modal content\n- `actions`: Actions content\n\n",
           "doc-url": "http://core.pages.mgdis.fr/core-ui/core-ui/storybook/?path=/docs/molecules-mg-modal--docs",
           "attributes": [
             {
@@ -5215,6 +5277,10 @@
               }
             ],
             "events": [
+              {
+                "name": "component-close",
+                "description": "Emmited event when modal is closed"
+              },
               {
                 "name": "component-hide",
                 "description": "Emmited event when modal is hidden"
@@ -5587,7 +5653,7 @@
         },
         {
           "name": "mg-popover",
-          "description": "Attributes:\n- `arrow-hide`: Hide popover arrow\n- `close-button`: Define if popover has a cross button\n- `disabled`: Disable popover\n- `display`: Display popover\n- `identifier`: Sets an `id` attribute.\nNeeded by the input for accessibility `aria-decribedby`.\n- `placement`: Popover placement\n\nEvents:\n- `display-change`: Emited event when display value change\n\nSlots:\n- ``: Element that will display the popover\n- `content`: popover content\n\n",
+          "description": "Attributes:\n- `arrow-hide`: Hide popover arrow\n- `close-button`: Define if popover has a cross button\n- `disabled`: Disable popover\n- `display`: Display popover\n- `identifier`: Sets an `id` attribute.\nNeeded by the input for accessibility `aria-decribedby`.\n- `placement`: Popover placement\n\nEvents:\n- `component-close`: Emmited event when popover is closed\n- `display-change`: Emited event when display value change\n\nSlots:\n- ``: Element that will display the popover\n- `content`: popover content\n\n",
           "doc-url": "http://core.pages.mgdis.fr/core-ui/core-ui/storybook/?path=/docs/molecules-mg-popover--docs",
           "attributes": [
             {
@@ -5715,6 +5781,10 @@
               }
             ],
             "events": [
+              {
+                "name": "component-close",
+                "description": "Emmited event when popover is closed"
+              },
               {
                 "name": "display-change",
                 "description": "Emited event when display value change"
@@ -5754,6 +5824,136 @@
             ]
           }
         },
+        {
+          "name": "mg-progress",
+          "description": "Attributes:\n- `aria-role`: Define progress role\n- `progressbar` to indicate a progress, such as loading or percent completion of a task\n- `meter` to indicate a graphical display of a numeric value that varies within a defined range\n- `label`: Define label\n- `max`: Define the maximum value in the range\n- `min`: Define the minimum value in the range\n- `value`: Define current value\nBy default, it will be displayed as a percentage value.\nIf you don’t specify the min and max props, the value should be a number within the range of 0 to 100.\n\n",
+          "doc-url": "http://core.pages.mgdis.fr/core-ui/core-ui/storybook/?path=/docs/molecules-mg-progress--docs",
+          "attributes": [
+            {
+              "name": "aria-role",
+              "description": "Define progress role\n- `progressbar` to indicate a progress, such as loading or percent completion of a task\n- `meter` to indicate a graphical display of a numeric value that varies within a defined range\n\nType: `\"meter\" | \"progressbar\"`",
+              "doc-url": "http://core.pages.mgdis.fr/core-ui/core-ui/storybook/?path=/docs/molecules-mg-progress--docs",
+              "value": {
+                "type": "\"meter\" | \"progressbar\"",
+                "default": "'progressbar'",
+                "required": false
+              }
+            },
+            {
+              "name": "label",
+              "description": "Define label\n\nType: `string`",
+              "doc-url": "http://core.pages.mgdis.fr/core-ui/core-ui/storybook/?path=/docs/molecules-mg-progress--docs",
+              "value": {
+                "type": "string",
+                "required": true
+              }
+            },
+            {
+              "name": "max",
+              "description": "Define the maximum value in the range\n\nType: `number`",
+              "doc-url": "http://core.pages.mgdis.fr/core-ui/core-ui/storybook/?path=/docs/molecules-mg-progress--docs",
+              "value": {
+                "type": "number",
+                "default": "100",
+                "required": false
+              }
+            },
+            {
+              "name": "min",
+              "description": "Define the minimum value in the range\n\nType: `number`",
+              "doc-url": "http://core.pages.mgdis.fr/core-ui/core-ui/storybook/?path=/docs/molecules-mg-progress--docs",
+              "value": {
+                "type": "number",
+                "default": "0",
+                "required": false
+              }
+            },
+            {
+              "name": "value",
+              "description": "Define current value\nBy default, it will be displayed as a percentage value.\nIf you don’t specify the min and max props, the value should be a number within the range of 0 to 100.\n\nType: `number`",
+              "doc-url": "http://core.pages.mgdis.fr/core-ui/core-ui/storybook/?path=/docs/molecules-mg-progress--docs",
+              "value": {
+                "type": "number",
+                "default": "0",
+                "required": false
+              }
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "ariaRole",
+                "description": "Define progress role\n- `progressbar` to indicate a progress, such as loading or percent completion of a task\n- `meter` to indicate a graphical display of a numeric value that varies within a defined range\n\nType: `\"meter\" | \"progressbar\"`",
+                "doc-url": "http://core.pages.mgdis.fr/core-ui/core-ui/storybook/?path=/docs/molecules-mg-progress--docs",
+                "value": {
+                  "type": "\"meter\" | \"progressbar\"",
+                  "default": "'progressbar'",
+                  "required": false
+                }
+              },
+              {
+                "name": "label",
+                "description": "Define label\n\nType: `string`",
+                "doc-url": "http://core.pages.mgdis.fr/core-ui/core-ui/storybook/?path=/docs/molecules-mg-progress--docs",
+                "value": {
+                  "type": "string",
+                  "required": true
+                }
+              },
+              {
+                "name": "max",
+                "description": "Define the maximum value in the range\n\nType: `number`",
+                "doc-url": "http://core.pages.mgdis.fr/core-ui/core-ui/storybook/?path=/docs/molecules-mg-progress--docs",
+                "value": {
+                  "type": "number",
+                  "default": "100",
+                  "required": false
+                }
+              },
+              {
+                "name": "min",
+                "description": "Define the minimum value in the range\n\nType: `number`",
+                "doc-url": "http://core.pages.mgdis.fr/core-ui/core-ui/storybook/?path=/docs/molecules-mg-progress--docs",
+                "value": {
+                  "type": "number",
+                  "default": "0",
+                  "required": false
+                }
+              },
+              {
+                "name": "value",
+                "description": "Define current value\nBy default, it will be displayed as a percentage value.\nIf you don’t specify the min and max props, the value should be a number within the range of 0 to 100.\n\nType: `number`",
+                "doc-url": "http://core.pages.mgdis.fr/core-ui/core-ui/storybook/?path=/docs/molecules-mg-progress--docs",
+                "value": {
+                  "type": "number",
+                  "default": "0",
+                  "required": false
+                }
+              }
+            ],
+            "events": []
+          },
+          "css": {
+            "properties": [
+              {
+                "name": "--mg-c-progress-bar-color-background",
+                "description": "Defines the color of the progress bar. Default value is `--mg-b-color-neutral-30`."
+              },
+              {
+                "name": "--mg-c-progress-border-color",
+                "description": "Defines the color of the progress bar border. Default value is `--mg-b-color-neutral-80`."
+              },
+              {
+                "name": "--mg-c-progress-fill-color-background",
+                "description": "Defines the color of the progress bar fill background. Default value is `--mg-b-color-app`."
+              },
+              {
+                "name": "--mg-c-progress-size",
+                "description": "Defines the size of the progress bar. Default value is `--mg-b-size-8`."
+              }
+            ]
+          }
+        },
         {
           "name": "mg-skip-links",
           "description": "Properties:\n- `links`: Skip links\n\nEvents:\n- `go-to-anchor`: Emited event when link is clicked\n\n",

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

@@ -353,6 +353,22 @@
       "name": "--mg-c-popover-title-font-size",
       "description": "Defines the font size of the popover title. Default value: `--mg-b-font-size-h5`."
     },
+    {
+      "name": "--mg-c-progress-bar-color-background",
+      "description": "Defines the color of the progress bar. Default value is `--mg-b-color-neutral-30`."
+    },
+    {
+      "name": "--mg-c-progress-border-color",
+      "description": "Defines the color of the progress bar border. Default value is `--mg-b-color-neutral-80`."
+    },
+    {
+      "name": "--mg-c-progress-fill-color-background",
+      "description": "Defines the color of the progress bar fill background. Default value is `--mg-b-color-app`."
+    },
+    {
+      "name": "--mg-c-progress-size",
+      "description": "Defines the size of the progress bar. Default value is `--mg-b-size-8`."
+    },
     {
       "name": "--mg-c-tabs-color",
       "description": "Defines tabs global color, used for bottom line and active tabs. Default value: `--mg-b-color-app`."