@viasat/beam-web-components 2.29.1 → 2.36.0

package/custom-elements.json

@@ -294,147 +294,273 @@
     },
     {
       "kind": "javascript-module",
-      "path": "libs/web-components/src/lib/Badge/Badge.ts",
+      "path": "libs/web-components/src/lib/Alert/Alert.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "`bm-badge`\n\n### Attributes:\n- **appearance**  - Specify the appearance of the Badge\n- **theme**  - Theme of the Badge\n- **size**  - Specify the size of the Badge\n- **emphasis**  - Specify the emphasis of the Badge\n- **hideIcon**  - Hides Badge icon",
-          "name": "BmBadge",
+          "description": "`bm-alert`\n\n### Attributes:\n- **heading**  - Specify the heading text for Alert\n- **body**  - Specify the body text for Alert\n- **size**  - Specify the size of the Alert\n- **fullWidth**  - Specify if the Alert has no border radius\n- **theme**  - Specify the theme of the Alert. By default it inherits the theme from the parent\n- **appearance**  - Specify the appearance of the Alert\n- **hidden**  - Specify if the Alert is hidden\n- **hideIcon**  - Specify if the icon displays on the Alert\n- **dismissible**  - Specify if the Alert can be dismissed\n- **disableAutoFocus**  - Prevent autofocus on show\n- **disableCloseOnEscape**  - Prevent Escape from closing",
+          "name": "BmAlert",
           "slots": [
             {
-              "description": "Provide text for the Badge",
-              "name": "default"
+              "description": "Specify a different icon for the Alert",
+              "name": "icon"
             },
             {
-              "description": "Specify a different icon for the Badge",
-              "name": "icon"
+              "description": "Specify the heading text for Alert or pass the `heading` attribute to set the heading",
+              "name": "heading"
+            },
+            {
+              "description": "Specify the body text for Alert or pass the `body` attribute to set the body",
+              "name": "body"
+            },
+            {
+              "description": "Specify if actions display on the Alert",
+              "name": "actions"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "appearance",
+              "name": "heading",
               "type": {
-                "text": "'infoPrimary' | 'infoSecondary' | 'positive' | 'warning' | 'negative'"
+                "text": "string | undefined"
               },
-              "default": "'infoPrimary'",
-              "description": "Specify the appearance of the Badge",
-              "attribute": "appearance"
+              "description": "Specify the heading text for Alert",
+              "attribute": "heading"
             },
             {
               "kind": "field",
-              "name": "theme",
+              "name": "body",
               "type": {
-                "text": "'light' | 'dark' | undefined"
+                "text": "string | undefined"
               },
-              "description": "Theme of the Badge",
-              "attribute": "theme"
+              "description": "Specify the body text for Alert",
+              "attribute": "body"
             },
             {
               "kind": "field",
               "name": "size",
               "type": {
-                "text": "'sm' | 'md' | undefined"
+                "text": "'sm' | 'md'"
               },
               "default": "'sm'",
-              "description": "Specify the size of the Badge",
+              "description": "Specify the size of the Alert",
               "attribute": "size"
             },
             {
               "kind": "field",
-              "name": "emphasis",
+              "name": "fullWidth",
               "type": {
-                "text": "'strong' | 'medium' | 'subtle'"
+                "text": "boolean"
               },
-              "default": "'strong'",
-              "description": "Specify the emphasis of the Badge",
-              "attribute": "emphasis"
+              "default": "false",
+              "description": "Specify if the Alert has no border radius",
+              "attribute": "fullWidth"
+            },
+            {
+              "kind": "field",
+              "name": "theme",
+              "type": {
+                "text": "'light' | 'dark' | undefined"
+              },
+              "description": "Specify the theme of the Alert. By default it inherits the theme from the parent",
+              "attribute": "theme"
+            },
+            {
+              "kind": "field",
+              "name": "appearance",
+              "type": {
+                "text": "'infoPrimary' | 'infoSecondary' | 'positive' | 'warning' | 'negative'"
+              },
+              "default": "'infoPrimary'",
+              "description": "Specify the appearance of the Alert",
+              "attribute": "appearance"
+            },
+            {
+              "kind": "field",
+              "name": "hidden",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Specify if the Alert is hidden",
+              "attribute": "hidden"
             },
             {
               "kind": "field",
               "name": "hideIcon",
               "type": {
-                "text": "boolean | undefined"
+                "text": "boolean"
               },
-              "description": "Hides Badge icon",
+              "default": "false",
+              "description": "Specify if the icon displays on the Alert",
               "attribute": "hideIcon"
+            },
+            {
+              "kind": "field",
+              "name": "dismissible",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Specify if the Alert can be dismissed",
+              "attribute": "dismissible"
+            },
+            {
+              "kind": "field",
+              "name": "disableAutoFocus",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Prevent autofocus on show",
+              "attribute": "disableAutoFocus"
+            },
+            {
+              "kind": "field",
+              "name": "disableCloseOnEscape",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Prevent Escape from closing",
+              "attribute": "disableCloseOnEscape"
+            }
+          ],
+          "events": [
+            {
+              "description": "Dispatched when the Alert has been dismissed",
+              "name": "bm-dismiss"
             }
           ],
           "attributes": [
             {
-              "name": "appearance",
+              "name": "heading",
               "type": {
-                "text": "'infoPrimary' | 'infoSecondary' | 'positive' | 'warning' | 'negative'"
+                "text": "string | undefined"
               },
-              "default": "'infoPrimary'",
-              "description": "Specify the appearance of the Badge",
-              "fieldName": "appearance"
+              "description": "Specify the heading text for Alert",
+              "fieldName": "heading"
             },
             {
-              "name": "theme",
+              "name": "body",
               "type": {
-                "text": "'light' | 'dark' | undefined"
+                "text": "string | undefined"
               },
-              "description": "Theme of the Badge",
-              "fieldName": "theme"
+              "description": "Specify the body text for Alert",
+              "fieldName": "body"
             },
             {
               "name": "size",
               "type": {
-                "text": "'sm' | 'md' | undefined"
+                "text": "'sm' | 'md'"
               },
               "default": "'sm'",
-              "description": "Specify the size of the Badge",
+              "description": "Specify the size of the Alert",
               "fieldName": "size"
             },
             {
-              "name": "emphasis",
+              "name": "fullWidth",
               "type": {
-                "text": "'strong' | 'medium' | 'subtle'"
+                "text": "boolean"
               },
-              "default": "'strong'",
-              "description": "Specify the emphasis of the Badge",
-              "fieldName": "emphasis"
+              "default": "false",
+              "description": "Specify if the Alert has no border radius",
+              "fieldName": "fullWidth"
+            },
+            {
+              "name": "theme",
+              "type": {
+                "text": "'light' | 'dark' | undefined"
+              },
+              "description": "Specify the theme of the Alert. By default it inherits the theme from the parent",
+              "fieldName": "theme"
+            },
+            {
+              "name": "appearance",
+              "type": {
+                "text": "'infoPrimary' | 'infoSecondary' | 'positive' | 'warning' | 'negative'"
+              },
+              "default": "'infoPrimary'",
+              "description": "Specify the appearance of the Alert",
+              "fieldName": "appearance"
+            },
+            {
+              "name": "hidden",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Specify if the Alert is hidden",
+              "fieldName": "hidden"
             },
             {
               "name": "hideIcon",
               "type": {
-                "text": "boolean | undefined"
+                "text": "boolean"
               },
-              "description": "Hides Badge icon",
+              "default": "false",
+              "description": "Specify if the icon displays on the Alert",
               "fieldName": "hideIcon"
+            },
+            {
+              "name": "dismissible",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Specify if the Alert can be dismissed",
+              "fieldName": "dismissible"
+            },
+            {
+              "name": "disableAutoFocus",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Prevent autofocus on show",
+              "fieldName": "disableAutoFocus"
+            },
+            {
+              "name": "disableCloseOnEscape",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Prevent Escape from closing",
+              "fieldName": "disableCloseOnEscape"
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "bm-badge",
+          "tagName": "bm-alert",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "BmBadge",
+          "name": "BmAlert",
           "declaration": {
-            "name": "BmBadge",
-            "module": "libs/web-components/src/lib/Badge/Badge.ts"
+            "name": "BmAlert",
+            "module": "libs/web-components/src/lib/Alert/Alert.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "bm-badge",
+          "name": "bm-alert",
           "declaration": {
-            "name": "BmBadge",
-            "module": "libs/web-components/src/lib/Badge/Badge.ts"
+            "name": "BmAlert",
+            "module": "libs/web-components/src/lib/Alert/Alert.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "libs/web-components/src/lib/Badge/index.ts",
+      "path": "libs/web-components/src/lib/Alert/index.ts",
       "declarations": [],
       "exports": [
         {
@@ -442,447 +568,34 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "package": "./Badge"
+            "package": "./Alert"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "libs/web-components/src/lib/BadgeDot/BadgeDot.ts",
+      "path": "libs/web-components/src/lib/Avatar/Avatar.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "`bm-badge-dot`\n\n### Attributes:\n- **theme**  - Specify the theme of the BadgeDot. By default it inherits the theme from the parent\n- **appearance**  - Specify the appearance of the BadgeDot\n- **emphasis**  - Specify the emphasis of the BadgeDot\n- **overrideDotColor**  - Overrides default dot color",
-          "name": "BmBadgeDot",
+          "description": "`bm-avatar`\n\n### Attributes:\n- **appearance**  - Specify the appearance of the Avatar\n- **name**  - Specify a name to display initials in the Avatar\n- **src**  - Pass an image to the Avatar\n- **alt**  - Specify alt for image\n- **size**  - Specify the size of the Avatar\n- **disabled**  - Specify if the Avatar is disabled\n- **shape**  - Specify the shape of the Avatar\n- **isInteractive**  - If Avatar is interactive, use `isInteractive` to make the Avatar focusable and show state layer\n- **isFocusable**  - If Avatar is not interactive and Tooltip is provided, use `isFocusable` to make the Avatar focusable\n- **withBorder** ",
+          "name": "BmAvatar",
           "slots": [
             {
-              "description": "Provide text for the BadgeDot",
-              "name": "default"
+              "description": "Customize the default icon",
+              "name": "icon"
             }
           ],
           "members": [
-            {
-              "kind": "field",
-              "name": "theme",
-              "type": {
-                "text": "'light' | 'dark' | undefined"
-              },
-              "description": "Specify the theme of the BadgeDot. By default it inherits the theme from the parent",
-              "attribute": "theme"
-            },
             {
               "kind": "field",
               "name": "appearance",
               "type": {
-                "text": "'infoPrimary' | 'infoSecondary' | 'positive' | 'warning' | 'negative'"
+                "text": "'accent' | 'neutral' | undefined"
               },
-              "default": "'infoPrimary'",
-              "description": "Specify the appearance of the BadgeDot",
-              "attribute": "appearance"
-            },
-            {
-              "kind": "field",
-              "name": "emphasis",
-              "type": {
-                "text": "'strong' | 'subtle'"
-              },
-              "default": "'strong'",
-              "description": "Specify the emphasis of the BadgeDot",
-              "attribute": "emphasis"
-            },
-            {
-              "kind": "field",
-              "name": "overrideDotColor",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Overrides default dot color",
-              "attribute": "overrideDotColor"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "theme",
-              "type": {
-                "text": "'light' | 'dark' | undefined"
-              },
-              "description": "Specify the theme of the BadgeDot. By default it inherits the theme from the parent",
-              "fieldName": "theme"
-            },
-            {
-              "name": "appearance",
-              "type": {
-                "text": "'infoPrimary' | 'infoSecondary' | 'positive' | 'warning' | 'negative'"
-              },
-              "default": "'infoPrimary'",
-              "description": "Specify the appearance of the BadgeDot",
-              "fieldName": "appearance"
-            },
-            {
-              "name": "emphasis",
-              "type": {
-                "text": "'strong' | 'subtle'"
-              },
-              "default": "'strong'",
-              "description": "Specify the emphasis of the BadgeDot",
-              "fieldName": "emphasis"
-            },
-            {
-              "name": "overrideDotColor",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Overrides default dot color",
-              "fieldName": "overrideDotColor"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "bm-badge-dot",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "BmBadgeDot",
-          "declaration": {
-            "name": "BmBadgeDot",
-            "module": "libs/web-components/src/lib/BadgeDot/BadgeDot.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "bm-badge-dot",
-          "declaration": {
-            "name": "BmBadgeDot",
-            "module": "libs/web-components/src/lib/BadgeDot/BadgeDot.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "libs/web-components/src/lib/BadgeDot/index.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "./BadgeDot"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "libs/web-components/src/lib/Alert/Alert.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "`bm-alert`\n\n### Attributes:\n- **heading**  - Specify the heading text for Alert\n- **body**  - Specify the body text for Alert\n- **size**  - Specify the size of the Alert\n- **fullWidth**  - Specify if the Alert has no border radius\n- **theme**  - Specify the theme of the Alert. By default it inherits the theme from the parent\n- **appearance**  - Specify the appearance of the Alert\n- **hidden**  - Specify if the Alert is hidden\n- **hideIcon**  - Specify if the icon displays on the Alert\n- **dismissible**  - Specify if the Alert can be dismissed\n- **disableAutoFocus**  - Prevent autofocus on show\n- **disableCloseOnEscape**  - Prevent Escape from closing",
-          "name": "BmAlert",
-          "slots": [
-            {
-              "description": "Specify a different icon for the Alert",
-              "name": "icon"
-            },
-            {
-              "description": "Specify the heading text for Alert or pass the `heading` attribute to set the heading",
-              "name": "heading"
-            },
-            {
-              "description": "Specify the body text for Alert or pass the `body` attribute to set the body",
-              "name": "body"
-            },
-            {
-              "description": "Specify if actions display on the Alert",
-              "name": "actions"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "heading",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Specify the heading text for Alert",
-              "attribute": "heading"
-            },
-            {
-              "kind": "field",
-              "name": "body",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Specify the body text for Alert",
-              "attribute": "body"
-            },
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "'sm' | 'md'"
-              },
-              "default": "'sm'",
-              "description": "Specify the size of the Alert",
-              "attribute": "size"
-            },
-            {
-              "kind": "field",
-              "name": "fullWidth",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Specify if the Alert has no border radius",
-              "attribute": "fullWidth"
-            },
-            {
-              "kind": "field",
-              "name": "theme",
-              "type": {
-                "text": "'light' | 'dark' | undefined"
-              },
-              "description": "Specify the theme of the Alert. By default it inherits the theme from the parent",
-              "attribute": "theme"
-            },
-            {
-              "kind": "field",
-              "name": "appearance",
-              "type": {
-                "text": "'infoPrimary' | 'infoSecondary' | 'positive' | 'warning' | 'negative'"
-              },
-              "default": "'infoPrimary'",
-              "description": "Specify the appearance of the Alert",
-              "attribute": "appearance"
-            },
-            {
-              "kind": "field",
-              "name": "hidden",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Specify if the Alert is hidden",
-              "attribute": "hidden"
-            },
-            {
-              "kind": "field",
-              "name": "hideIcon",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Specify if the icon displays on the Alert",
-              "attribute": "hideIcon"
-            },
-            {
-              "kind": "field",
-              "name": "dismissible",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Specify if the Alert can be dismissed",
-              "attribute": "dismissible"
-            },
-            {
-              "kind": "field",
-              "name": "disableAutoFocus",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Prevent autofocus on show",
-              "attribute": "disableAutoFocus"
-            },
-            {
-              "kind": "field",
-              "name": "disableCloseOnEscape",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Prevent Escape from closing",
-              "attribute": "disableCloseOnEscape"
-            }
-          ],
-          "events": [
-            {
-              "description": "Dispatched when the Alert has been dismissed",
-              "name": "bm-dismiss"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "heading",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Specify the heading text for Alert",
-              "fieldName": "heading"
-            },
-            {
-              "name": "body",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Specify the body text for Alert",
-              "fieldName": "body"
-            },
-            {
-              "name": "size",
-              "type": {
-                "text": "'sm' | 'md'"
-              },
-              "default": "'sm'",
-              "description": "Specify the size of the Alert",
-              "fieldName": "size"
-            },
-            {
-              "name": "fullWidth",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Specify if the Alert has no border radius",
-              "fieldName": "fullWidth"
-            },
-            {
-              "name": "theme",
-              "type": {
-                "text": "'light' | 'dark' | undefined"
-              },
-              "description": "Specify the theme of the Alert. By default it inherits the theme from the parent",
-              "fieldName": "theme"
-            },
-            {
-              "name": "appearance",
-              "type": {
-                "text": "'infoPrimary' | 'infoSecondary' | 'positive' | 'warning' | 'negative'"
-              },
-              "default": "'infoPrimary'",
-              "description": "Specify the appearance of the Alert",
-              "fieldName": "appearance"
-            },
-            {
-              "name": "hidden",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Specify if the Alert is hidden",
-              "fieldName": "hidden"
-            },
-            {
-              "name": "hideIcon",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Specify if the icon displays on the Alert",
-              "fieldName": "hideIcon"
-            },
-            {
-              "name": "dismissible",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Specify if the Alert can be dismissed",
-              "fieldName": "dismissible"
-            },
-            {
-              "name": "disableAutoFocus",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Prevent autofocus on show",
-              "fieldName": "disableAutoFocus"
-            },
-            {
-              "name": "disableCloseOnEscape",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Prevent Escape from closing",
-              "fieldName": "disableCloseOnEscape"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "bm-alert",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "BmAlert",
-          "declaration": {
-            "name": "BmAlert",
-            "module": "libs/web-components/src/lib/Alert/Alert.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "bm-alert",
-          "declaration": {
-            "name": "BmAlert",
-            "module": "libs/web-components/src/lib/Alert/Alert.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "libs/web-components/src/lib/Alert/index.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "./Alert"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "libs/web-components/src/lib/Avatar/Avatar.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "`bm-avatar`\n\n### Attributes:\n- **appearance**  - Specify the appearance of the Avatar\n- **name**  - Specify a name to display initials in the Avatar\n- **src**  - Pass an image to the Avatar\n- **alt**  - Specify alt for image\n- **size**  - Specify the size of the Avatar\n- **disabled**  - Specify if the Avatar is disabled\n- **shape**  - Specify the shape of the Avatar\n- **isInteractive**  - If Avatar is interactive, use `isInteractive` to make the Avatar focusable and show state layer\n- **isFocusable**  - If Avatar is not interactive and Tooltip is provided, use `isFocusable` to make the Avatar focusable\n- **withBorder** ",
-          "name": "BmAvatar",
-          "slots": [
-            {
-              "description": "Customize the default icon",
-              "name": "icon"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "appearance",
-              "type": {
-                "text": "'accent' | 'neutral' | undefined"
-              },
-              "default": "'neutral'",
-              "description": "Specify the appearance of the Avatar",
+              "default": "'neutral'",
+              "description": "Specify the appearance of the Avatar",
               "attribute": "appearance"
             },
             {
@@ -1099,139 +812,302 @@
       "exports": [
         {
           "kind": "js",
-          "name": "AvatarGroupCtx",
+          "name": "AvatarGroupCtx",
+          "declaration": {
+            "name": "AvatarGroupCtx",
+            "module": "libs/web-components/src/lib/Avatar/AvatarGroup.context.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "libs/web-components/src/lib/Avatar/AvatarGroup.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "`bm-avatar-group`\n\n### Attributes:\n- **wrapping**  - Specify if the AvatarGroup wraps\n- **maxCount**  - Specify the max number of avatars displayed in the group.\n- **size**  - Specify the size of all Avatars\n- **layout**  - Specify the kind of the group.",
+          "name": "BmAvatarGroup",
+          "slots": [
+            {
+              "description": "Add Avatars to create a group",
+              "name": "default"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "wrapping",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Specify if the AvatarGroup wraps",
+              "attribute": "wrapping"
+            },
+            {
+              "kind": "field",
+              "name": "maxCount",
+              "type": {
+                "text": "number"
+              },
+              "default": "5",
+              "description": "Specify the max number of avatars displayed in the group.",
+              "attribute": "maxCount",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "'xs' | 'sm' | 'md' | 'lg' | 'xl'"
+              },
+              "default": "'md'",
+              "description": "Specify the size of all Avatars",
+              "attribute": "size"
+            },
+            {
+              "kind": "field",
+              "name": "layout",
+              "type": {
+                "text": "'stacked' | 'spaced' | undefined"
+              },
+              "default": "'stacked'",
+              "description": "Specify the kind of the group.",
+              "attribute": "layout"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "wrapping",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Specify if the AvatarGroup wraps",
+              "fieldName": "wrapping"
+            },
+            {
+              "name": "maxCount",
+              "type": {
+                "text": "number"
+              },
+              "default": "5",
+              "description": "Specify the max number of avatars displayed in the group.",
+              "fieldName": "maxCount"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "'xs' | 'sm' | 'md' | 'lg' | 'xl'"
+              },
+              "default": "'md'",
+              "description": "Specify the size of all Avatars",
+              "fieldName": "size"
+            },
+            {
+              "name": "layout",
+              "type": {
+                "text": "'stacked' | 'spaced' | undefined"
+              },
+              "default": "'stacked'",
+              "description": "Specify the kind of the group.",
+              "fieldName": "layout"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "bm-avatar-group",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "BmAvatarGroup",
+          "declaration": {
+            "name": "BmAvatarGroup",
+            "module": "libs/web-components/src/lib/Avatar/AvatarGroup.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "bm-avatar-group",
+          "declaration": {
+            "name": "BmAvatarGroup",
+            "module": "libs/web-components/src/lib/Avatar/AvatarGroup.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "libs/web-components/src/lib/Avatar/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./Avatar"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
           "declaration": {
-            "name": "AvatarGroupCtx",
-            "module": "libs/web-components/src/lib/Avatar/AvatarGroup.context.ts"
+            "name": "*",
+            "package": "./AvatarGroup"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "libs/web-components/src/lib/Avatar/AvatarGroup.ts",
+      "path": "libs/web-components/src/lib/Badge/Badge.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "`bm-avatar-group`\n\n### Attributes:\n- **wrapping**  - Specify if the AvatarGroup wraps\n- **maxCount**  - Specify the max number of avatars displayed in the group.\n- **size**  - Specify the size of all Avatars\n- **layout**  - Specify the kind of the group.",
-          "name": "BmAvatarGroup",
+          "description": "`bm-badge`\n\n### Attributes:\n- **appearance**  - Specify the appearance of the Badge\n- **theme**  - Theme of the Badge\n- **size**  - Specify the size of the Badge\n- **emphasis**  - Specify the emphasis of the Badge\n- **hideIcon**  - Hides Badge icon",
+          "name": "BmBadge",
           "slots": [
             {
-              "description": "Add Avatars to create a group",
+              "description": "Provide text for the Badge",
               "name": "default"
+            },
+            {
+              "description": "Specify a different icon for the Badge",
+              "name": "icon"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "wrapping",
+              "name": "appearance",
               "type": {
-                "text": "boolean"
+                "text": "'infoPrimary' | 'infoSecondary' | 'positive' | 'warning' | 'negative'"
               },
-              "default": "false",
-              "description": "Specify if the AvatarGroup wraps",
-              "attribute": "wrapping"
+              "default": "'infoPrimary'",
+              "description": "Specify the appearance of the Badge",
+              "attribute": "appearance"
             },
             {
               "kind": "field",
-              "name": "maxCount",
+              "name": "theme",
               "type": {
-                "text": "number"
+                "text": "'light' | 'dark' | undefined"
               },
-              "default": "5",
-              "description": "Specify the max number of avatars displayed in the group.",
-              "attribute": "maxCount",
-              "reflects": true
+              "description": "Theme of the Badge",
+              "attribute": "theme"
             },
             {
               "kind": "field",
               "name": "size",
               "type": {
-                "text": "'xs' | 'sm' | 'md' | 'lg' | 'xl'"
+                "text": "'sm' | 'md' | undefined"
               },
-              "default": "'md'",
-              "description": "Specify the size of all Avatars",
+              "default": "'sm'",
+              "description": "Specify the size of the Badge",
               "attribute": "size"
             },
             {
               "kind": "field",
-              "name": "layout",
+              "name": "emphasis",
               "type": {
-                "text": "'stacked' | 'spaced' | undefined"
+                "text": "'strong' | 'medium' | 'subtle'"
               },
-              "default": "'stacked'",
-              "description": "Specify the kind of the group.",
-              "attribute": "layout"
+              "default": "'strong'",
+              "description": "Specify the emphasis of the Badge",
+              "attribute": "emphasis"
+            },
+            {
+              "kind": "field",
+              "name": "hideIcon",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Hides Badge icon",
+              "attribute": "hideIcon"
             }
           ],
           "attributes": [
             {
-              "name": "wrapping",
+              "name": "appearance",
               "type": {
-                "text": "boolean"
+                "text": "'infoPrimary' | 'infoSecondary' | 'positive' | 'warning' | 'negative'"
               },
-              "default": "false",
-              "description": "Specify if the AvatarGroup wraps",
-              "fieldName": "wrapping"
+              "default": "'infoPrimary'",
+              "description": "Specify the appearance of the Badge",
+              "fieldName": "appearance"
             },
             {
-              "name": "maxCount",
+              "name": "theme",
               "type": {
-                "text": "number"
+                "text": "'light' | 'dark' | undefined"
               },
-              "default": "5",
-              "description": "Specify the max number of avatars displayed in the group.",
-              "fieldName": "maxCount"
+              "description": "Theme of the Badge",
+              "fieldName": "theme"
             },
             {
               "name": "size",
               "type": {
-                "text": "'xs' | 'sm' | 'md' | 'lg' | 'xl'"
+                "text": "'sm' | 'md' | undefined"
               },
-              "default": "'md'",
-              "description": "Specify the size of all Avatars",
+              "default": "'sm'",
+              "description": "Specify the size of the Badge",
               "fieldName": "size"
             },
             {
-              "name": "layout",
+              "name": "emphasis",
               "type": {
-                "text": "'stacked' | 'spaced' | undefined"
+                "text": "'strong' | 'medium' | 'subtle'"
               },
-              "default": "'stacked'",
-              "description": "Specify the kind of the group.",
-              "fieldName": "layout"
+              "default": "'strong'",
+              "description": "Specify the emphasis of the Badge",
+              "fieldName": "emphasis"
+            },
+            {
+              "name": "hideIcon",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Hides Badge icon",
+              "fieldName": "hideIcon"
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "bm-avatar-group",
+          "tagName": "bm-badge",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "BmAvatarGroup",
+          "name": "BmBadge",
           "declaration": {
-            "name": "BmAvatarGroup",
-            "module": "libs/web-components/src/lib/Avatar/AvatarGroup.ts"
+            "name": "BmBadge",
+            "module": "libs/web-components/src/lib/Badge/Badge.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "bm-avatar-group",
+          "name": "bm-badge",
           "declaration": {
-            "name": "BmAvatarGroup",
-            "module": "libs/web-components/src/lib/Avatar/AvatarGroup.ts"
+            "name": "BmBadge",
+            "module": "libs/web-components/src/lib/Badge/Badge.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "libs/web-components/src/lib/Avatar/index.ts",
+      "path": "libs/web-components/src/lib/Badge/index.ts",
       "declarations": [],
       "exports": [
         {
@@ -1239,15 +1115,7 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "package": "./Avatar"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "./AvatarGroup"
+            "package": "./Badge"
           }
         }
       ]
@@ -1556,90 +1424,222 @@
             {
               "name": "mBottom",
               "type": {
-                "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
+                "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
+              },
+              "description": "Specify bottom margin of a Box",
+              "fieldName": "mBottom"
+            },
+            {
+              "name": "mBefore",
+              "type": {
+                "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
+              },
+              "description": "Specify before margin of a Box",
+              "fieldName": "mBefore"
+            },
+            {
+              "name": "mAfter",
+              "type": {
+                "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
+              },
+              "description": "Specify after margin of a Box",
+              "fieldName": "mAfter"
+            },
+            {
+              "name": "m",
+              "type": {
+                "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
+              },
+              "description": "Specify all margin",
+              "fieldName": "m"
+            },
+            {
+              "name": "p",
+              "type": {
+                "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
+              },
+              "description": "Specify all padding",
+              "fieldName": "p"
+            },
+            {
+              "name": "gap",
+              "type": {
+                "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
+              },
+              "description": "Specify gap between child elements",
+              "fieldName": "gap"
+            },
+            {
+              "name": "shadow",
+              "type": {
+                "text": "'sm' | 'md' | 'lg' | 'none' | 'overlay' | undefined"
+              },
+              "description": "Specify if a Box has a shadow",
+              "fieldName": "shadow"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "bm-box",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "BmBox",
+          "declaration": {
+            "name": "BmBox",
+            "module": "libs/web-components/src/lib/Box/Box.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "bm-box",
+          "declaration": {
+            "name": "BmBox",
+            "module": "libs/web-components/src/lib/Box/Box.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "libs/web-components/src/lib/Box/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./Box"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "libs/web-components/src/lib/BadgeDot/BadgeDot.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "`bm-badge-dot`\n\n### Attributes:\n- **theme**  - Specify the theme of the BadgeDot. By default it inherits the theme from the parent\n- **appearance**  - Specify the appearance of the BadgeDot\n- **emphasis**  - Specify the emphasis of the BadgeDot\n- **overrideDotColor**  - Overrides default dot color",
+          "name": "BmBadgeDot",
+          "slots": [
+            {
+              "description": "Provide text for the BadgeDot",
+              "name": "default"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "theme",
+              "type": {
+                "text": "'light' | 'dark' | undefined"
+              },
+              "description": "Specify the theme of the BadgeDot. By default it inherits the theme from the parent",
+              "attribute": "theme"
+            },
+            {
+              "kind": "field",
+              "name": "appearance",
+              "type": {
+                "text": "'infoPrimary' | 'infoSecondary' | 'positive' | 'warning' | 'negative'"
               },
-              "description": "Specify bottom margin of a Box",
-              "fieldName": "mBottom"
+              "default": "'infoPrimary'",
+              "description": "Specify the appearance of the BadgeDot",
+              "attribute": "appearance"
             },
             {
-              "name": "mBefore",
+              "kind": "field",
+              "name": "emphasis",
               "type": {
-                "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
+                "text": "'strong' | 'subtle'"
               },
-              "description": "Specify before margin of a Box",
-              "fieldName": "mBefore"
+              "default": "'strong'",
+              "description": "Specify the emphasis of the BadgeDot",
+              "attribute": "emphasis"
             },
             {
-              "name": "mAfter",
+              "kind": "field",
+              "name": "overrideDotColor",
               "type": {
-                "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
+                "text": "string | undefined"
               },
-              "description": "Specify after margin of a Box",
-              "fieldName": "mAfter"
-            },
+              "description": "Overrides default dot color",
+              "attribute": "overrideDotColor"
+            }
+          ],
+          "attributes": [
             {
-              "name": "m",
+              "name": "theme",
               "type": {
-                "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
+                "text": "'light' | 'dark' | undefined"
               },
-              "description": "Specify all margin",
-              "fieldName": "m"
+              "description": "Specify the theme of the BadgeDot. By default it inherits the theme from the parent",
+              "fieldName": "theme"
             },
             {
-              "name": "p",
+              "name": "appearance",
               "type": {
-                "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
+                "text": "'infoPrimary' | 'infoSecondary' | 'positive' | 'warning' | 'negative'"
               },
-              "description": "Specify all padding",
-              "fieldName": "p"
+              "default": "'infoPrimary'",
+              "description": "Specify the appearance of the BadgeDot",
+              "fieldName": "appearance"
             },
             {
-              "name": "gap",
+              "name": "emphasis",
               "type": {
-                "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
+                "text": "'strong' | 'subtle'"
               },
-              "description": "Specify gap between child elements",
-              "fieldName": "gap"
+              "default": "'strong'",
+              "description": "Specify the emphasis of the BadgeDot",
+              "fieldName": "emphasis"
             },
             {
-              "name": "shadow",
+              "name": "overrideDotColor",
               "type": {
-                "text": "'sm' | 'md' | 'lg' | 'none' | 'overlay' | undefined"
+                "text": "string | undefined"
               },
-              "description": "Specify if a Box has a shadow",
-              "fieldName": "shadow"
+              "description": "Overrides default dot color",
+              "fieldName": "overrideDotColor"
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "bm-box",
+          "tagName": "bm-badge-dot",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "BmBox",
+          "name": "BmBadgeDot",
           "declaration": {
-            "name": "BmBox",
-            "module": "libs/web-components/src/lib/Box/Box.ts"
+            "name": "BmBadgeDot",
+            "module": "libs/web-components/src/lib/BadgeDot/BadgeDot.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "bm-box",
+          "name": "bm-badge-dot",
           "declaration": {
-            "name": "BmBox",
-            "module": "libs/web-components/src/lib/Box/Box.ts"
+            "name": "BmBadgeDot",
+            "module": "libs/web-components/src/lib/BadgeDot/BadgeDot.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "libs/web-components/src/lib/Box/index.ts",
+      "path": "libs/web-components/src/lib/BadgeDot/index.ts",
       "declarations": [],
       "exports": [
         {
@@ -1647,7 +1647,7 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "package": "./Box"
+            "package": "./BadgeDot"
           }
         }
       ]
@@ -2655,286 +2655,156 @@
             {
               "description": "Add or customize content in the HelperText",
               "name": "default"
-            },
-            {
-              "description": "Specify a different icon for the HelperText",
-              "name": "icon"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "appearance",
-              "type": {
-                "text": "'positive' | 'warning' | 'negative' | 'info'"
-              },
-              "default": "'info'",
-              "description": "Specify the appearance of the HelperText",
-              "attribute": "appearance"
-            },
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "'sm' | 'md'"
-              },
-              "default": "'sm'",
-              "description": "Specify the size of the HelperText",
-              "attribute": "size"
-            },
-            {
-              "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Specify if the message is disabled for HelpText",
-              "attribute": "disabled"
-            },
-            {
-              "kind": "field",
-              "name": "hideIcon",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Specify if the icon displays on the HelperText",
-              "attribute": "hideIcon"
-            },
-            {
-              "kind": "field",
-              "name": "text",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Add or customize content in the HelperText",
-              "attribute": "text"
-            },
-            {
-              "kind": "field",
-              "name": "theme",
-              "type": {
-                "text": "'light' | 'dark' | undefined"
-              },
-              "description": "Specify the theme of the HelperText. By default it inherits the theme from the parent",
-              "attribute": "theme"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "appearance",
-              "type": {
-                "text": "'positive' | 'warning' | 'negative' | 'info'"
-              },
-              "default": "'info'",
-              "description": "Specify the appearance of the HelperText",
-              "fieldName": "appearance"
-            },
-            {
-              "name": "size",
-              "type": {
-                "text": "'sm' | 'md'"
-              },
-              "default": "'sm'",
-              "description": "Specify the size of the HelperText",
-              "fieldName": "size"
-            },
-            {
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Specify if the message is disabled for HelpText",
-              "fieldName": "disabled"
-            },
-            {
-              "name": "hideIcon",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Specify if the icon displays on the HelperText",
-              "fieldName": "hideIcon"
-            },
-            {
-              "name": "text",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Add or customize content in the HelperText",
-              "fieldName": "text"
-            },
-            {
-              "name": "theme",
-              "type": {
-                "text": "'light' | 'dark' | undefined"
-              },
-              "description": "Specify the theme of the HelperText. By default it inherits the theme from the parent",
-              "fieldName": "theme"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "bm-helper-text",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "BmHelperText",
-          "declaration": {
-            "name": "BmHelperText",
-            "module": "libs/web-components/src/lib/HelperText/HelperText.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "bm-helper-text",
-          "declaration": {
-            "name": "BmHelperText",
-            "module": "libs/web-components/src/lib/HelperText/HelperText.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "libs/web-components/src/lib/HelperText/index.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "./HelperText"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "libs/web-components/src/lib/Icon/Icon.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "`bm-icon`\n\n### Attributes:\n- **color**  - Specify the color of Icon\n- **size**  - Specify the size of Icon\n- **customIconSize**  - Specify a custom size for the Icon\n- **customIconColor**  - Specify a custom color for the Icon",
-          "name": "BmIcon",
-          "slots": [
-            {
-              "description": "Specify which Icon to display",
-              "name": "default"
+            },
+            {
+              "description": "Specify a different icon for the HelperText",
+              "name": "icon"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "color",
+              "name": "appearance",
               "type": {
-                "text": "'primary' | 'secondary' | 'infoPrimary' | 'infoSecondary' | 'positive' | 'warning' | 'negative' | 'secondaryInverse' | 'positiveStrong' | 'warningStrong' | 'negativeStrong' | 'infoPrimaryStrong' | 'infoSecondaryStrong' | 'primaryInverse' | undefined"
+                "text": "'positive' | 'warning' | 'negative' | 'info'"
               },
-              "description": "Specify the color of Icon",
-              "attribute": "color"
+              "default": "'info'",
+              "description": "Specify the appearance of the HelperText",
+              "attribute": "appearance"
             },
             {
               "kind": "field",
               "name": "size",
               "type": {
-                "text": "'xs' | 'sm' | 'md' | 'lg' | 'xl'"
+                "text": "'sm' | 'md'"
               },
-              "default": "'md'",
-              "description": "Specify the size of Icon",
+              "default": "'sm'",
+              "description": "Specify the size of the HelperText",
               "attribute": "size"
             },
             {
               "kind": "field",
-              "name": "customIconSize",
+              "name": "disabled",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "Specify a custom size for the Icon",
-              "attribute": "customIconSize"
+              "default": "false",
+              "description": "Specify if the message is disabled for HelpText",
+              "attribute": "disabled"
             },
             {
               "kind": "field",
-              "name": "customIconColor",
+              "name": "hideIcon",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Specify if the icon displays on the HelperText",
+              "attribute": "hideIcon"
+            },
+            {
+              "kind": "field",
+              "name": "text",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Specify a custom color for the Icon",
-              "attribute": "customIconColor"
+              "description": "Add or customize content in the HelperText",
+              "attribute": "text"
+            },
+            {
+              "kind": "field",
+              "name": "theme",
+              "type": {
+                "text": "'light' | 'dark' | undefined"
+              },
+              "description": "Specify the theme of the HelperText. By default it inherits the theme from the parent",
+              "attribute": "theme"
             }
           ],
           "attributes": [
             {
-              "name": "color",
+              "name": "appearance",
               "type": {
-                "text": "'primary' | 'secondary' | 'infoPrimary' | 'infoSecondary' | 'positive' | 'warning' | 'negative' | 'secondaryInverse' | 'positiveStrong' | 'warningStrong' | 'negativeStrong' | 'infoPrimaryStrong' | 'infoSecondaryStrong' | 'primaryInverse' | undefined"
+                "text": "'positive' | 'warning' | 'negative' | 'info'"
               },
-              "description": "Specify the color of Icon",
-              "fieldName": "color"
+              "default": "'info'",
+              "description": "Specify the appearance of the HelperText",
+              "fieldName": "appearance"
             },
             {
               "name": "size",
               "type": {
-                "text": "'xs' | 'sm' | 'md' | 'lg' | 'xl'"
+                "text": "'sm' | 'md'"
               },
-              "default": "'md'",
-              "description": "Specify the size of Icon",
+              "default": "'sm'",
+              "description": "Specify the size of the HelperText",
               "fieldName": "size"
             },
             {
-              "name": "customIconSize",
+              "name": "disabled",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "Specify a custom size for the Icon",
-              "fieldName": "customIconSize"
+              "default": "false",
+              "description": "Specify if the message is disabled for HelpText",
+              "fieldName": "disabled"
             },
             {
-              "name": "customIconColor",
+              "name": "hideIcon",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Specify if the icon displays on the HelperText",
+              "fieldName": "hideIcon"
+            },
+            {
+              "name": "text",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Specify a custom color for the Icon",
-              "fieldName": "customIconColor"
+              "description": "Add or customize content in the HelperText",
+              "fieldName": "text"
+            },
+            {
+              "name": "theme",
+              "type": {
+                "text": "'light' | 'dark' | undefined"
+              },
+              "description": "Specify the theme of the HelperText. By default it inherits the theme from the parent",
+              "fieldName": "theme"
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "bm-icon",
+          "tagName": "bm-helper-text",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "BmIcon",
+          "name": "BmHelperText",
           "declaration": {
-            "name": "BmIcon",
-            "module": "libs/web-components/src/lib/Icon/Icon.ts"
+            "name": "BmHelperText",
+            "module": "libs/web-components/src/lib/HelperText/HelperText.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "bm-icon",
+          "name": "bm-helper-text",
           "declaration": {
-            "name": "BmIcon",
-            "module": "libs/web-components/src/lib/Icon/Icon.ts"
+            "name": "BmHelperText",
+            "module": "libs/web-components/src/lib/HelperText/HelperText.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "libs/web-components/src/lib/Icon/index.ts",
+      "path": "libs/web-components/src/lib/HelperText/index.ts",
       "declarations": [],
       "exports": [
         {
@@ -2942,7 +2812,7 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "package": "./Icon"
+            "package": "./HelperText"
           }
         }
       ]
@@ -3347,71 +3217,201 @@
               }
             },
             {
-              "name": "value",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "value",
+              "inheritedFrom": {
+                "name": "FormField",
+                "module": "libs/web-components/src/lib/wip/Form/Form.decorator.ts"
+              }
+            },
+            {
+              "name": "validationRules",
+              "type": {
+                "text": "Array<FormValidator>"
+              },
+              "default": "[]",
+              "fieldName": "validationRules",
+              "inheritedFrom": {
+                "name": "FormField",
+                "module": "libs/web-components/src/lib/wip/Form/Form.decorator.ts"
+              }
+            },
+            {
+              "name": "input-aria-label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "fieldName": "inputAriaLabel",
+              "inheritedFrom": {
+                "name": "FormField",
+                "module": "libs/web-components/src/lib/wip/Form/Form.decorator.ts"
+              }
+            }
+          ],
+          "superclass": {
+            "name": "FormField",
+            "module": "/libs/web-components/src/lib/wip/Form/Form.decorator"
+          },
+          "tagName": "bm-input-choice-group",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "InputChoiceGroup",
+          "declaration": {
+            "name": "InputChoiceGroup",
+            "module": "libs/web-components/src/lib/InputChoiceGroup/InputChoiceGroup.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "bm-input-choice-group",
+          "declaration": {
+            "name": "InputChoiceGroup",
+            "module": "libs/web-components/src/lib/InputChoiceGroup/InputChoiceGroup.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "libs/web-components/src/lib/InputChoiceGroup/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./InputChoiceGroup"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "libs/web-components/src/lib/Icon/Icon.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "`bm-icon`\n\n### Attributes:\n- **color**  - Specify the color of Icon\n- **size**  - Specify the size of Icon\n- **customIconSize**  - Specify a custom size for the Icon\n- **customIconColor**  - Specify a custom color for the Icon",
+          "name": "BmIcon",
+          "slots": [
+            {
+              "description": "Specify which Icon to display",
+              "name": "default"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "color",
+              "type": {
+                "text": "'primary' | 'secondary' | 'infoPrimary' | 'infoSecondary' | 'positive' | 'warning' | 'negative' | 'secondaryInverse' | 'positiveStrong' | 'warningStrong' | 'negativeStrong' | 'infoPrimaryStrong' | 'infoSecondaryStrong' | 'primaryInverse' | undefined"
+              },
+              "description": "Specify the color of Icon",
+              "attribute": "color"
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "'xs' | 'sm' | 'md' | 'lg' | 'xl'"
+              },
+              "default": "'md'",
+              "description": "Specify the size of Icon",
+              "attribute": "size"
+            },
+            {
+              "kind": "field",
+              "name": "customIconSize",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Specify a custom size for the Icon",
+              "attribute": "customIconSize"
+            },
+            {
+              "kind": "field",
+              "name": "customIconColor",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Specify a custom color for the Icon",
+              "attribute": "customIconColor"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "color",
+              "type": {
+                "text": "'primary' | 'secondary' | 'infoPrimary' | 'infoSecondary' | 'positive' | 'warning' | 'negative' | 'secondaryInverse' | 'positiveStrong' | 'warningStrong' | 'negativeStrong' | 'infoPrimaryStrong' | 'infoSecondaryStrong' | 'primaryInverse' | undefined"
+              },
+              "description": "Specify the color of Icon",
+              "fieldName": "color"
+            },
+            {
+              "name": "size",
               "type": {
-                "text": "string"
+                "text": "'xs' | 'sm' | 'md' | 'lg' | 'xl'"
               },
-              "default": "''",
-              "fieldName": "value",
-              "inheritedFrom": {
-                "name": "FormField",
-                "module": "libs/web-components/src/lib/wip/Form/Form.decorator.ts"
-              }
+              "default": "'md'",
+              "description": "Specify the size of Icon",
+              "fieldName": "size"
             },
             {
-              "name": "validationRules",
+              "name": "customIconSize",
               "type": {
-                "text": "Array<FormValidator>"
+                "text": "string | undefined"
               },
-              "default": "[]",
-              "fieldName": "validationRules",
-              "inheritedFrom": {
-                "name": "FormField",
-                "module": "libs/web-components/src/lib/wip/Form/Form.decorator.ts"
-              }
+              "description": "Specify a custom size for the Icon",
+              "fieldName": "customIconSize"
             },
             {
-              "name": "input-aria-label",
+              "name": "customIconColor",
               "type": {
                 "text": "string | undefined"
               },
-              "fieldName": "inputAriaLabel",
-              "inheritedFrom": {
-                "name": "FormField",
-                "module": "libs/web-components/src/lib/wip/Form/Form.decorator.ts"
-              }
+              "description": "Specify a custom color for the Icon",
+              "fieldName": "customIconColor"
             }
           ],
           "superclass": {
-            "name": "FormField",
-            "module": "/libs/web-components/src/lib/wip/Form/Form.decorator"
+            "name": "LitElement",
+            "package": "lit"
           },
-          "tagName": "bm-input-choice-group",
+          "tagName": "bm-icon",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "InputChoiceGroup",
+          "name": "BmIcon",
           "declaration": {
-            "name": "InputChoiceGroup",
-            "module": "libs/web-components/src/lib/InputChoiceGroup/InputChoiceGroup.ts"
+            "name": "BmIcon",
+            "module": "libs/web-components/src/lib/Icon/Icon.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "bm-input-choice-group",
+          "name": "bm-icon",
           "declaration": {
-            "name": "InputChoiceGroup",
-            "module": "libs/web-components/src/lib/InputChoiceGroup/InputChoiceGroup.ts"
+            "name": "BmIcon",
+            "module": "libs/web-components/src/lib/Icon/Icon.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "libs/web-components/src/lib/InputChoiceGroup/index.ts",
+      "path": "libs/web-components/src/lib/Icon/index.ts",
       "declarations": [],
       "exports": [
         {
@@ -3419,7 +3419,7 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "package": "./InputChoiceGroup"
+            "package": "./Icon"
           }
         }
       ]
@@ -3725,67 +3725,263 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Specify if the Link is disabled",
-              "fieldName": "disabled"
+              "description": "Specify if the Link is disabled",
+              "fieldName": "disabled"
+            },
+            {
+              "name": "href",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Specify the target link for the href attribute",
+              "fieldName": "href"
+            },
+            {
+              "name": "text",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Provide text for the Link",
+              "fieldName": "text"
+            },
+            {
+              "name": "hideUnderline",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Specify if Link displays with an underline",
+              "fieldName": "hideUnderline"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "bm-link",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "BmLink",
+          "declaration": {
+            "name": "BmLink",
+            "module": "libs/web-components/src/lib/Link/Link.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "bm-link",
+          "declaration": {
+            "name": "BmLink",
+            "module": "libs/web-components/src/lib/Link/Link.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "libs/web-components/src/lib/Link/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./Link"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "libs/web-components/src/lib/ProgressBar/ProgressBar.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "`bm-progress-bar`\n\n### Attributes:\n- **state**  - Specify the ProgressBar state\n- **size**  - Specify the size of the ProgressBar\n- **label**  - Provide text for the ProgressBar label\n- **helperText**  - Specify helperText for ProgressBar. helperText is required for the Error state.\n- **fullWidth**  - Specify if the ProgressBar has no corner radius\n- **theme**  - Specify the theme of the ProgressBar. By default it inherits the theme from the parent\n- **value**  - Specify if a ProgressBar is determinate by setting a value between 0 and 100.\n- **progressbarAriaLabel**  - Specify the aria-label for the ProgressBar",
+          "name": "BmProgressBar",
+          "members": [
+            {
+              "kind": "field",
+              "name": "state",
+              "type": {
+                "text": "'active' | 'error' | 'success'"
+              },
+              "default": "'active'",
+              "description": "Specify the ProgressBar state",
+              "attribute": "state"
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "'sm' | 'md' | 'lg'"
+              },
+              "default": "'md'",
+              "description": "Specify the size of the ProgressBar",
+              "attribute": "size"
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string | undefined | undefined"
+              },
+              "description": "Provide text for the ProgressBar label",
+              "attribute": "label"
+            },
+            {
+              "kind": "field",
+              "name": "helperText",
+              "type": {
+                "text": "string | undefined | undefined"
+              },
+              "description": "Specify helperText for ProgressBar. helperText is required for the Error state.",
+              "attribute": "helperText"
+            },
+            {
+              "kind": "field",
+              "name": "fullWidth",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Specify if the ProgressBar has no corner radius",
+              "attribute": "fullWidth"
+            },
+            {
+              "kind": "field",
+              "name": "theme",
+              "type": {
+                "text": "'light' | 'dark' | undefined"
+              },
+              "description": "Specify the theme of the ProgressBar. By default it inherits the theme from the parent",
+              "attribute": "theme"
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "Specify if a ProgressBar is determinate by setting a value between 0 and 100.",
+              "attribute": "value"
+            },
+            {
+              "kind": "field",
+              "name": "progressbarAriaLabel",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Specify the aria-label for the ProgressBar",
+              "attribute": "progressbarAriaLabel"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "state",
+              "type": {
+                "text": "'active' | 'error' | 'success'"
+              },
+              "default": "'active'",
+              "description": "Specify the ProgressBar state",
+              "fieldName": "state"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "'sm' | 'md' | 'lg'"
+              },
+              "default": "'md'",
+              "description": "Specify the size of the ProgressBar",
+              "fieldName": "size"
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string | undefined | undefined"
+              },
+              "description": "Provide text for the ProgressBar label",
+              "fieldName": "label"
+            },
+            {
+              "name": "helperText",
+              "type": {
+                "text": "string | undefined | undefined"
+              },
+              "description": "Specify helperText for ProgressBar. helperText is required for the Error state.",
+              "fieldName": "helperText"
+            },
+            {
+              "name": "fullWidth",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Specify if the ProgressBar has no corner radius",
+              "fieldName": "fullWidth"
             },
             {
-              "name": "href",
+              "name": "theme",
               "type": {
-                "text": "string"
+                "text": "'light' | 'dark' | undefined"
               },
-              "default": "''",
-              "description": "Specify the target link for the href attribute",
-              "fieldName": "href"
+              "description": "Specify the theme of the ProgressBar. By default it inherits the theme from the parent",
+              "fieldName": "theme"
             },
             {
-              "name": "text",
+              "name": "value",
               "type": {
-                "text": "string"
+                "text": "number | undefined"
               },
-              "default": "''",
-              "description": "Provide text for the Link",
-              "fieldName": "text"
+              "description": "Specify if a ProgressBar is determinate by setting a value between 0 and 100.",
+              "fieldName": "value"
             },
             {
-              "name": "hideUnderline",
+              "name": "progressbarAriaLabel",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "default": "false",
-              "description": "Specify if Link displays with an underline",
-              "fieldName": "hideUnderline"
+              "description": "Specify the aria-label for the ProgressBar",
+              "fieldName": "progressbarAriaLabel"
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "bm-link",
+          "tagName": "bm-progress-bar",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "BmLink",
+          "name": "BmProgressBar",
           "declaration": {
-            "name": "BmLink",
-            "module": "libs/web-components/src/lib/Link/Link.ts"
+            "name": "BmProgressBar",
+            "module": "libs/web-components/src/lib/ProgressBar/ProgressBar.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "bm-link",
+          "name": "bm-progress-bar",
           "declaration": {
-            "name": "BmLink",
-            "module": "libs/web-components/src/lib/Link/Link.ts"
+            "name": "BmProgressBar",
+            "module": "libs/web-components/src/lib/ProgressBar/ProgressBar.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "libs/web-components/src/lib/Link/index.ts",
+      "path": "libs/web-components/src/lib/ProgressBar/index.ts",
       "declarations": [],
       "exports": [
         {
@@ -3793,7 +3989,7 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "package": "./Link"
+            "package": "./ProgressBar"
           }
         }
       ]
@@ -4002,227 +4198,23 @@
           "kind": "js",
           "name": "BmListItem",
           "declaration": {
-            "name": "BmListItem",
-            "module": "libs/web-components/src/lib/List/ListItem.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "bm-list-item",
-          "declaration": {
-            "name": "BmListItem",
-            "module": "libs/web-components/src/lib/List/ListItem.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "libs/web-components/src/lib/List/index.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "./List"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "./ListItem"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "libs/web-components/src/lib/ProgressBar/ProgressBar.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "`bm-progress-bar`\n\n### Attributes:\n- **state**  - Specify the ProgressBar state\n- **size**  - Specify the size of the ProgressBar\n- **label**  - Provide text for the ProgressBar label\n- **helperText**  - Specify helperText for ProgressBar. helperText is required for the Error state.\n- **fullWidth**  - Specify if the ProgressBar has no corner radius\n- **theme**  - Specify the theme of the ProgressBar. By default it inherits the theme from the parent\n- **value**  - Specify if a ProgressBar is determinate by setting a value between 0 and 100.\n- **progressbarAriaLabel**  - Specify the aria-label for the ProgressBar",
-          "name": "BmProgressBar",
-          "members": [
-            {
-              "kind": "field",
-              "name": "state",
-              "type": {
-                "text": "'active' | 'error' | 'success'"
-              },
-              "default": "'active'",
-              "description": "Specify the ProgressBar state",
-              "attribute": "state"
-            },
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "'sm' | 'md' | 'lg'"
-              },
-              "default": "'md'",
-              "description": "Specify the size of the ProgressBar",
-              "attribute": "size"
-            },
-            {
-              "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string | undefined | undefined"
-              },
-              "description": "Provide text for the ProgressBar label",
-              "attribute": "label"
-            },
-            {
-              "kind": "field",
-              "name": "helperText",
-              "type": {
-                "text": "string | undefined | undefined"
-              },
-              "description": "Specify helperText for ProgressBar. helperText is required for the Error state.",
-              "attribute": "helperText"
-            },
-            {
-              "kind": "field",
-              "name": "fullWidth",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Specify if the ProgressBar has no corner radius",
-              "attribute": "fullWidth"
-            },
-            {
-              "kind": "field",
-              "name": "theme",
-              "type": {
-                "text": "'light' | 'dark' | undefined"
-              },
-              "description": "Specify the theme of the ProgressBar. By default it inherits the theme from the parent",
-              "attribute": "theme"
-            },
-            {
-              "kind": "field",
-              "name": "value",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "Specify if a ProgressBar is determinate by setting a value between 0 and 100.",
-              "attribute": "value"
-            },
-            {
-              "kind": "field",
-              "name": "progressbarAriaLabel",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Specify the aria-label for the ProgressBar",
-              "attribute": "progressbarAriaLabel"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "state",
-              "type": {
-                "text": "'active' | 'error' | 'success'"
-              },
-              "default": "'active'",
-              "description": "Specify the ProgressBar state",
-              "fieldName": "state"
-            },
-            {
-              "name": "size",
-              "type": {
-                "text": "'sm' | 'md' | 'lg'"
-              },
-              "default": "'md'",
-              "description": "Specify the size of the ProgressBar",
-              "fieldName": "size"
-            },
-            {
-              "name": "label",
-              "type": {
-                "text": "string | undefined | undefined"
-              },
-              "description": "Provide text for the ProgressBar label",
-              "fieldName": "label"
-            },
-            {
-              "name": "helperText",
-              "type": {
-                "text": "string | undefined | undefined"
-              },
-              "description": "Specify helperText for ProgressBar. helperText is required for the Error state.",
-              "fieldName": "helperText"
-            },
-            {
-              "name": "fullWidth",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Specify if the ProgressBar has no corner radius",
-              "fieldName": "fullWidth"
-            },
-            {
-              "name": "theme",
-              "type": {
-                "text": "'light' | 'dark' | undefined"
-              },
-              "description": "Specify the theme of the ProgressBar. By default it inherits the theme from the parent",
-              "fieldName": "theme"
-            },
-            {
-              "name": "value",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "Specify if a ProgressBar is determinate by setting a value between 0 and 100.",
-              "fieldName": "value"
-            },
-            {
-              "name": "progressbarAriaLabel",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Specify the aria-label for the ProgressBar",
-              "fieldName": "progressbarAriaLabel"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "bm-progress-bar",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "BmProgressBar",
-          "declaration": {
-            "name": "BmProgressBar",
-            "module": "libs/web-components/src/lib/ProgressBar/ProgressBar.ts"
+            "name": "BmListItem",
+            "module": "libs/web-components/src/lib/List/ListItem.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "bm-progress-bar",
+          "name": "bm-list-item",
           "declaration": {
-            "name": "BmProgressBar",
-            "module": "libs/web-components/src/lib/ProgressBar/ProgressBar.ts"
+            "name": "BmListItem",
+            "module": "libs/web-components/src/lib/List/ListItem.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "libs/web-components/src/lib/ProgressBar/index.ts",
+      "path": "libs/web-components/src/lib/List/index.ts",
       "declarations": [],
       "exports": [
         {
@@ -4230,7 +4222,15 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "package": "./ProgressBar"
+            "package": "./List"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./ListItem"
           }
         }
       ]
@@ -7879,113 +7879,126 @@
     },
     {
       "kind": "javascript-module",
-      "path": "libs/web-components/src/lib/wip/NativeSelect/NativeSelect.ts",
+      "path": "libs/web-components/src/lib/wip/Form/Form.context.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "bmFormInitials",
+          "type": {
+            "text": "BmFormContext"
+          },
+          "default": "{ required: false, disabled: false, readOnly: false, initialValues: {}, registerField: () => undefined, formBlurHandler: () => undefined, formChangeHandler: () => undefined, }"
+        },
+        {
+          "kind": "variable",
+          "name": "bmFormContext"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "bmFormInitials",
+          "declaration": {
+            "name": "bmFormInitials",
+            "module": "libs/web-components/src/lib/wip/Form/Form.context.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "bmFormContext",
+          "declaration": {
+            "name": "bmFormContext",
+            "module": "libs/web-components/src/lib/wip/Form/Form.context.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "libs/web-components/src/lib/wip/Form/Form.decorator.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "### Attributes:\n- **required**  - Specify if NativeSelect is a required input\n- **readOnly**  - Specify if NativeSelect displays in a read-only state\n- **disabled**  - Specify if NativeSelect displays in a disabled state\n- **error**  - Specify error text and display error state of a NativeSelect\n- **fluid**  - Specify if NativeSelect is fluid\n- **width**  - Specify the width of NativeSelect\n- **ellipse**  - Specify if overflow displays ellipsis\n- **hideRequiredMarker**  - Specify if the NativeSelect displays with an asterisk\n- **theme**  - Specify the theme of the NativeSelect. By default it inherits the theme from the parent",
-          "name": "BmNativeSelect",
-          "slots": [
-            {
-              "description": "Specify Options for NativeSelect",
-              "name": "slot"
-            },
-            {
-              "description": "Specify Label for NativeSelect",
-              "name": "label"
-            },
-            {
-              "description": "Specify HelperText for NativeSelect",
-              "name": "helper-text"
-            }
-          ],
+          "description": "### Attributes:\n- **id** \n- **name** \n- **value** \n- **validationRules** \n- **input-aria-label** ",
+          "name": "FormField",
           "members": [
             {
               "kind": "field",
-              "name": "required",
+              "name": "formAssociated",
               "type": {
                 "text": "boolean"
               },
-              "default": "false",
-              "description": "Specify if NativeSelect is a required input",
-              "attribute": "required"
+              "static": true,
+              "default": "true"
             },
             {
               "kind": "field",
-              "name": "readOnly",
+              "name": "id",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Specify if NativeSelect displays in a read-only state",
-              "attribute": "readOnly"
+              "default": "''",
+              "attribute": "id"
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "name",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Specify if NativeSelect displays in a disabled state",
-              "attribute": "disabled"
+              "default": "''",
+              "attribute": "name"
             },
             {
               "kind": "field",
-              "name": "error",
+              "name": "value",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
-              "description": "Specify error text and display error state of a NativeSelect",
-              "attribute": "error"
+              "default": "''",
+              "attribute": "value"
             },
             {
               "kind": "field",
-              "name": "fluid",
+              "name": "validationRules",
               "type": {
-                "text": "boolean"
+                "text": "Array<FormValidator>"
               },
-              "default": "false",
-              "description": "Specify if NativeSelect is fluid",
-              "attribute": "fluid"
+              "default": "[]",
+              "attribute": "validationRules"
             },
             {
               "kind": "field",
-              "name": "width",
+              "name": "inputAriaLabel",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Specify the width of NativeSelect",
-              "attribute": "width"
+              "attribute": "input-aria-label"
             },
             {
               "kind": "field",
-              "name": "ellipse",
+              "name": "formContext",
               "type": {
-                "text": "boolean"
-              },
-              "default": "true",
-              "description": "Specify if overflow displays ellipsis",
-              "attribute": "ellipse"
+                "text": "BmFormContext"
+              }
             },
             {
-              "kind": "field",
-              "name": "hideRequiredMarker",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Specify if the NativeSelect displays with an asterisk",
-              "attribute": "hideRequiredMarker"
+              "kind": "method",
+              "name": "formAssociatedCallback",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
             },
             {
-              "kind": "field",
-              "name": "theme",
-              "type": {
-                "text": "'light' | 'dark' | undefined"
-              },
-              "description": "Specify the theme of the NativeSelect. By default it inherits the theme from the parent",
-              "attribute": "theme"
+              "kind": "method",
+              "name": "formResetCallback",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
             },
             {
               "kind": "method",
@@ -7997,436 +8010,466 @@
               },
               "parameters": [
                 {
-                  "name": "value",
+                  "name": "ctxValue",
                   "type": {
                     "text": "string"
                   }
                 }
-              ],
-              "inheritedFrom": {
-                "name": "FormField",
-                "module": "libs/web-components/src/lib/wip/Form/Form.decorator.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "formAssociated",
-              "type": {
-                "text": "boolean"
-              },
-              "static": true,
-              "default": "true",
-              "inheritedFrom": {
-                "name": "FormField",
-                "module": "libs/web-components/src/lib/wip/Form/Form.decorator.ts"
-              }
-            },
+              ]
+            }
+          ],
+          "attributes": [
             {
-              "kind": "field",
               "name": "id",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "attribute": "id",
-              "inheritedFrom": {
-                "name": "FormField",
-                "module": "libs/web-components/src/lib/wip/Form/Form.decorator.ts"
-              }
+              "fieldName": "id"
             },
             {
-              "kind": "field",
               "name": "name",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "attribute": "name",
-              "inheritedFrom": {
-                "name": "FormField",
-                "module": "libs/web-components/src/lib/wip/Form/Form.decorator.ts"
-              }
+              "fieldName": "name"
             },
             {
-              "kind": "field",
               "name": "value",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "attribute": "value",
-              "inheritedFrom": {
-                "name": "FormField",
-                "module": "libs/web-components/src/lib/wip/Form/Form.decorator.ts"
-              }
+              "fieldName": "value"
             },
             {
-              "kind": "field",
               "name": "validationRules",
               "type": {
                 "text": "Array<FormValidator>"
               },
               "default": "[]",
-              "attribute": "validationRules",
-              "inheritedFrom": {
-                "name": "FormField",
-                "module": "libs/web-components/src/lib/wip/Form/Form.decorator.ts"
-              }
+              "fieldName": "validationRules"
             },
+            {
+              "name": "input-aria-label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "fieldName": "inputAriaLabel"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "FormField",
+          "declaration": {
+            "name": "FormField",
+            "module": "libs/web-components/src/lib/wip/Form/Form.decorator.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "libs/web-components/src/lib/wip/Form/Form.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "### Attributes:\n- **validationMode**  - Specify if validation runs on change or when loosing focus\n- **initialValues**  - Specify initial values on Form controls based on their names\n- **required**  - Specify if input is a required\n- **disabled**  - Specify if input is a disabled\n- **readOnly**  - Specify if input is a read only\n- **action** \n- **method** \n- **target** \n- **enctype** ",
+          "name": "BmForm",
+          "slots": [
+            {
+              "description": "Add controls to the Form",
+              "name": "slot"
+            }
+          ],
+          "members": [
             {
               "kind": "field",
-              "name": "inputAriaLabel",
+              "name": "validationMode",
               "type": {
-                "text": "string | undefined"
+                "text": "'onChange' | 'onBlur' | 'onSubmit'"
               },
-              "attribute": "input-aria-label",
-              "inheritedFrom": {
-                "name": "FormField",
-                "module": "libs/web-components/src/lib/wip/Form/Form.decorator.ts"
-              }
+              "default": "'onBlur'",
+              "description": "Specify if validation runs on change or when loosing focus",
+              "attribute": "validationMode"
             },
             {
               "kind": "field",
-              "name": "formContext",
+              "name": "initialValues",
               "type": {
-                "text": "BmFormContext"
+                "text": "Record<string, FormValue>"
               },
-              "inheritedFrom": {
-                "name": "FormField",
-                "module": "libs/web-components/src/lib/wip/Form/Form.decorator.ts"
-              }
+              "default": "{}",
+              "description": "Specify initial values on Form controls based on their names",
+              "attribute": "initialValues"
             },
             {
-              "kind": "method",
-              "name": "formAssociatedCallback",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+              "kind": "field",
+              "name": "required",
+              "type": {
+                "text": "boolean"
               },
-              "inheritedFrom": {
-                "name": "FormField",
-                "module": "libs/web-components/src/lib/wip/Form/Form.decorator.ts"
-              }
+              "default": "false",
+              "description": "Specify if input is a required",
+              "attribute": "required"
             },
             {
-              "kind": "method",
-              "name": "formResetCallback",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "inheritedFrom": {
-                "name": "FormField",
-                "module": "libs/web-components/src/lib/wip/Form/Form.decorator.ts"
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "required",
+              "kind": "field",
+              "name": "disabled",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Specify if NativeSelect is a required input",
-              "fieldName": "required"
+              "description": "Specify if input is a disabled",
+              "attribute": "disabled"
             },
             {
+              "kind": "field",
               "name": "readOnly",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Specify if NativeSelect displays in a read-only state",
-              "fieldName": "readOnly"
+              "description": "Specify if input is a read only",
+              "attribute": "readOnly"
             },
             {
-              "name": "disabled",
+              "kind": "field",
+              "name": "action",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "default": "false",
-              "description": "Specify if NativeSelect displays in a disabled state",
-              "fieldName": "disabled"
+              "attribute": "action"
             },
             {
-              "name": "error",
+              "kind": "field",
+              "name": "method",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Specify error text and display error state of a NativeSelect",
-              "fieldName": "error"
+              "attribute": "method"
             },
             {
-              "name": "fluid",
+              "kind": "field",
+              "name": "target",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "default": "false",
-              "description": "Specify if NativeSelect is fluid",
-              "fieldName": "fluid"
+              "attribute": "target"
             },
             {
-              "name": "width",
+              "kind": "field",
+              "name": "enctype",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Specify the width of NativeSelect",
-              "fieldName": "width"
+              "attribute": "enctype"
             },
             {
-              "name": "ellipse",
+              "kind": "field",
+              "name": "formMeta",
               "type": {
-                "text": "boolean"
+                "text": "Record<string, FieldMeta>"
               },
-              "default": "true",
-              "description": "Specify if overflow displays ellipsis",
-              "fieldName": "ellipse"
+              "default": "{}"
             },
             {
-              "name": "hideRequiredMarker",
+              "kind": "field",
+              "name": "formRef"
+            },
+            {
+              "kind": "field",
+              "name": "formContext",
+              "type": {
+                "text": "BmFormContext"
+              },
+              "privacy": "public",
+              "default": "bmFormInitials"
+            }
+          ],
+          "events": [
+            {
+              "description": "Validates the inputs and submits the form",
+              "name": "submit"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "validationMode",
+              "type": {
+                "text": "'onChange' | 'onBlur' | 'onSubmit'"
+              },
+              "default": "'onBlur'",
+              "description": "Specify if validation runs on change or when loosing focus",
+              "fieldName": "validationMode"
+            },
+            {
+              "name": "initialValues",
+              "type": {
+                "text": "Record<string, FormValue>"
+              },
+              "default": "{}",
+              "description": "Specify initial values on Form controls based on their names",
+              "fieldName": "initialValues"
+            },
+            {
+              "name": "required",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Specify if the NativeSelect displays with an asterisk",
-              "fieldName": "hideRequiredMarker"
+              "description": "Specify if input is a required",
+              "fieldName": "required"
             },
             {
-              "name": "theme",
+              "name": "disabled",
               "type": {
-                "text": "'light' | 'dark' | undefined"
+                "text": "boolean"
               },
-              "description": "Specify the theme of the NativeSelect. By default it inherits the theme from the parent",
-              "fieldName": "theme"
+              "default": "false",
+              "description": "Specify if input is a disabled",
+              "fieldName": "disabled"
             },
             {
-              "name": "id",
+              "name": "readOnly",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "''",
-              "fieldName": "id",
-              "inheritedFrom": {
-                "name": "FormField",
-                "module": "libs/web-components/src/lib/wip/Form/Form.decorator.ts"
-              }
+              "default": "false",
+              "description": "Specify if input is a read only",
+              "fieldName": "readOnly"
             },
             {
-              "name": "name",
+              "name": "action",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "''",
-              "fieldName": "name",
-              "inheritedFrom": {
-                "name": "FormField",
-                "module": "libs/web-components/src/lib/wip/Form/Form.decorator.ts"
-              }
+              "fieldName": "action"
             },
             {
-              "name": "value",
+              "name": "method",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "''",
-              "fieldName": "value",
-              "inheritedFrom": {
-                "name": "FormField",
-                "module": "libs/web-components/src/lib/wip/Form/Form.decorator.ts"
-              }
+              "fieldName": "method"
             },
             {
-              "name": "validationRules",
+              "name": "target",
               "type": {
-                "text": "Array<FormValidator>"
+                "text": "string | undefined"
               },
-              "default": "[]",
-              "fieldName": "validationRules",
-              "inheritedFrom": {
-                "name": "FormField",
-                "module": "libs/web-components/src/lib/wip/Form/Form.decorator.ts"
-              }
+              "fieldName": "target"
             },
             {
-              "name": "input-aria-label",
+              "name": "enctype",
               "type": {
                 "text": "string | undefined"
               },
-              "fieldName": "inputAriaLabel",
-              "inheritedFrom": {
-                "name": "FormField",
-                "module": "libs/web-components/src/lib/wip/Form/Form.decorator.ts"
-              }
+              "fieldName": "enctype"
             }
           ],
           "superclass": {
-            "name": "FormField",
-            "module": "/libs/web-components/src/lib/wip/Form/Form.decorator"
+            "name": "LitElement",
+            "package": "lit"
           },
-          "summary": "`bm-native-select`",
-          "tagName": "bm-native-select",
+          "summary": "`bm-form`",
+          "tagName": "bm-form",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "BmNativeSelect",
+          "name": "validators",
           "declaration": {
-            "name": "BmNativeSelect",
-            "module": "libs/web-components/src/lib/wip/NativeSelect/NativeSelect.ts"
+            "name": "validators",
+            "package": "@viasat/beam-shared/components/form"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "BmForm",
+          "declaration": {
+            "name": "BmForm",
+            "module": "libs/web-components/src/lib/wip/Form/Form.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "bm-native-select",
+          "name": "bm-form",
           "declaration": {
-            "name": "BmNativeSelect",
-            "module": "libs/web-components/src/lib/wip/NativeSelect/NativeSelect.ts"
+            "name": "BmForm",
+            "module": "libs/web-components/src/lib/wip/Form/Form.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "libs/web-components/src/lib/wip/NativeSelect/index.ts",
-      "declarations": [],
+      "path": "libs/web-components/src/lib/wip/Form/Form.utils.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "createId",
+          "return": {
+            "type": {
+              "text": "string"
+            }
+          }
+        }
+      ],
       "exports": [
         {
           "kind": "js",
-          "name": "*",
+          "name": "createId",
           "declaration": {
-            "name": "*",
-            "package": "./NativeSelect"
+            "name": "createId",
+            "module": "libs/web-components/src/lib/wip/Form/Form.utils.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "libs/web-components/src/lib/wip/Form/Form.context.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "bmFormInitials",
-          "type": {
-            "text": "BmFormContext"
-          },
-          "default": "{ required: false, disabled: false, readOnly: false, initialValues: {}, registerField: () => undefined, formBlurHandler: () => undefined, formChangeHandler: () => undefined, }"
-        },
-        {
-          "kind": "variable",
-          "name": "bmFormContext"
-        }
-      ],
+      "path": "libs/web-components/src/lib/wip/Form/index.ts",
+      "declarations": [],
       "exports": [
         {
           "kind": "js",
-          "name": "bmFormInitials",
+          "name": "*",
           "declaration": {
-            "name": "bmFormInitials",
-            "module": "libs/web-components/src/lib/wip/Form/Form.context.ts"
+            "name": "*",
+            "package": "./Form"
           }
         },
         {
           "kind": "js",
-          "name": "bmFormContext",
+          "name": "*",
           "declaration": {
-            "name": "bmFormContext",
-            "module": "libs/web-components/src/lib/wip/Form/Form.context.ts"
+            "name": "*",
+            "package": "./Form.decorator"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "libs/web-components/src/lib/wip/Form/Form.decorator.ts",
+      "path": "libs/web-components/src/lib/wip/NativeSelect/NativeSelect.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "### Attributes:\n- **id** \n- **name** \n- **value** \n- **validationRules** \n- **input-aria-label** ",
-          "name": "FormField",
+          "description": "### Attributes:\n- **required**  - Specify if NativeSelect is a required input\n- **readOnly**  - Specify if NativeSelect displays in a read-only state\n- **disabled**  - Specify if NativeSelect displays in a disabled state\n- **error**  - Specify error text and display error state of a NativeSelect\n- **fluid**  - Specify if NativeSelect is fluid\n- **width**  - Specify the width of NativeSelect\n- **ellipse**  - Specify if overflow displays ellipsis\n- **hideRequiredMarker**  - Specify if the NativeSelect displays with an asterisk\n- **theme**  - Specify the theme of the NativeSelect. By default it inherits the theme from the parent",
+          "name": "BmNativeSelect",
+          "slots": [
+            {
+              "description": "Specify Options for NativeSelect",
+              "name": "slot"
+            },
+            {
+              "description": "Specify Label for NativeSelect",
+              "name": "label"
+            },
+            {
+              "description": "Specify HelperText for NativeSelect",
+              "name": "helper-text"
+            }
+          ],
           "members": [
             {
               "kind": "field",
-              "name": "formAssociated",
+              "name": "required",
               "type": {
                 "text": "boolean"
               },
-              "static": true,
-              "default": "true"
+              "default": "false",
+              "description": "Specify if NativeSelect is a required input",
+              "attribute": "required"
             },
             {
               "kind": "field",
-              "name": "id",
+              "name": "readOnly",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "''",
-              "attribute": "id"
+              "default": "false",
+              "description": "Specify if NativeSelect displays in a read-only state",
+              "attribute": "readOnly"
             },
             {
               "kind": "field",
-              "name": "name",
+              "name": "disabled",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "''",
-              "attribute": "name"
+              "default": "false",
+              "description": "Specify if NativeSelect displays in a disabled state",
+              "attribute": "disabled"
             },
             {
               "kind": "field",
-              "name": "value",
+              "name": "error",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "''",
-              "attribute": "value"
+              "description": "Specify error text and display error state of a NativeSelect",
+              "attribute": "error"
             },
             {
               "kind": "field",
-              "name": "validationRules",
+              "name": "fluid",
               "type": {
-                "text": "Array<FormValidator>"
+                "text": "boolean"
               },
-              "default": "[]",
-              "attribute": "validationRules"
+              "default": "false",
+              "description": "Specify if NativeSelect is fluid",
+              "attribute": "fluid"
             },
             {
               "kind": "field",
-              "name": "inputAriaLabel",
+              "name": "width",
               "type": {
                 "text": "string | undefined"
               },
-              "attribute": "input-aria-label"
+              "description": "Specify the width of NativeSelect",
+              "attribute": "width"
             },
             {
               "kind": "field",
-              "name": "formContext",
+              "name": "ellipse",
               "type": {
-                "text": "BmFormContext"
-              }
+                "text": "boolean"
+              },
+              "default": "true",
+              "description": "Specify if overflow displays ellipsis",
+              "attribute": "ellipse"
             },
             {
-              "kind": "method",
-              "name": "formAssociatedCallback",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
+              "kind": "field",
+              "name": "hideRequiredMarker",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Specify if the NativeSelect displays with an asterisk",
+              "attribute": "hideRequiredMarker"
             },
             {
-              "kind": "method",
-              "name": "formResetCallback",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
+              "kind": "field",
+              "name": "theme",
+              "type": {
+                "text": "'light' | 'dark' | undefined"
+              },
+              "description": "Specify the theme of the NativeSelect. By default it inherits the theme from the parent",
+              "attribute": "theme"
             },
             {
               "kind": "method",
@@ -8438,337 +8481,302 @@
               },
               "parameters": [
                 {
-                  "name": "ctxValue",
+                  "name": "value",
                   "type": {
                     "text": "string"
                   }
                 }
-              ]
-            }
-          ],
-          "attributes": [
+              ],
+              "inheritedFrom": {
+                "name": "FormField",
+                "module": "libs/web-components/src/lib/wip/Form/Form.decorator.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "formAssociated",
+              "type": {
+                "text": "boolean"
+              },
+              "static": true,
+              "default": "true",
+              "inheritedFrom": {
+                "name": "FormField",
+                "module": "libs/web-components/src/lib/wip/Form/Form.decorator.ts"
+              }
+            },
             {
+              "kind": "field",
               "name": "id",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "fieldName": "id"
+              "attribute": "id",
+              "inheritedFrom": {
+                "name": "FormField",
+                "module": "libs/web-components/src/lib/wip/Form/Form.decorator.ts"
+              }
             },
             {
+              "kind": "field",
               "name": "name",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "fieldName": "name"
+              "attribute": "name",
+              "inheritedFrom": {
+                "name": "FormField",
+                "module": "libs/web-components/src/lib/wip/Form/Form.decorator.ts"
+              }
             },
             {
+              "kind": "field",
               "name": "value",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "fieldName": "value"
+              "attribute": "value",
+              "inheritedFrom": {
+                "name": "FormField",
+                "module": "libs/web-components/src/lib/wip/Form/Form.decorator.ts"
+              }
             },
             {
+              "kind": "field",
               "name": "validationRules",
               "type": {
                 "text": "Array<FormValidator>"
               },
               "default": "[]",
-              "fieldName": "validationRules"
+              "attribute": "validationRules",
+              "inheritedFrom": {
+                "name": "FormField",
+                "module": "libs/web-components/src/lib/wip/Form/Form.decorator.ts"
+              }
             },
             {
-              "name": "input-aria-label",
+              "kind": "field",
+              "name": "inputAriaLabel",
               "type": {
                 "text": "string | undefined"
               },
-              "fieldName": "inputAriaLabel"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "FormField",
-          "declaration": {
-            "name": "FormField",
-            "module": "libs/web-components/src/lib/wip/Form/Form.decorator.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "libs/web-components/src/lib/wip/Form/Form.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "### Attributes:\n- **validationMode**  - Specify if validation runs on change or when loosing focus\n- **initialValues**  - Specify initial values on Form controls based on their names\n- **required**  - Specify if input is a required\n- **disabled**  - Specify if input is a disabled\n- **readOnly**  - Specify if input is a read only\n- **action** \n- **method** \n- **target** \n- **enctype** ",
-          "name": "BmForm",
-          "slots": [
-            {
-              "description": "Add controls to the Form",
-              "name": "slot"
-            }
-          ],
-          "members": [
+              "attribute": "input-aria-label",
+              "inheritedFrom": {
+                "name": "FormField",
+                "module": "libs/web-components/src/lib/wip/Form/Form.decorator.ts"
+              }
+            },
             {
               "kind": "field",
-              "name": "validationMode",
+              "name": "formContext",
               "type": {
-                "text": "'onChange' | 'onBlur' | 'onSubmit'"
+                "text": "BmFormContext"
               },
-              "default": "'onBlur'",
-              "description": "Specify if validation runs on change or when loosing focus",
-              "attribute": "validationMode"
+              "inheritedFrom": {
+                "name": "FormField",
+                "module": "libs/web-components/src/lib/wip/Form/Form.decorator.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "formAssociatedCallback",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "inheritedFrom": {
+                "name": "FormField",
+                "module": "libs/web-components/src/lib/wip/Form/Form.decorator.ts"
+              }
             },
             {
-              "kind": "field",
-              "name": "initialValues",
-              "type": {
-                "text": "Record<string, FormValue>"
+              "kind": "method",
+              "name": "formResetCallback",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
               },
-              "default": "{}",
-              "description": "Specify initial values on Form controls based on their names",
-              "attribute": "initialValues"
-            },
+              "inheritedFrom": {
+                "name": "FormField",
+                "module": "libs/web-components/src/lib/wip/Form/Form.decorator.ts"
+              }
+            }
+          ],
+          "attributes": [
             {
-              "kind": "field",
               "name": "required",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Specify if input is a required",
-              "attribute": "required"
+              "description": "Specify if NativeSelect is a required input",
+              "fieldName": "required"
             },
             {
-              "kind": "field",
-              "name": "disabled",
+              "name": "readOnly",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Specify if input is a disabled",
-              "attribute": "disabled"
+              "description": "Specify if NativeSelect displays in a read-only state",
+              "fieldName": "readOnly"
             },
             {
-              "kind": "field",
-              "name": "readOnly",
+              "name": "disabled",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Specify if input is a read only",
-              "attribute": "readOnly"
-            },
-            {
-              "kind": "field",
-              "name": "action",
-              "type": {
-                "text": "string | undefined"
-              },
-              "attribute": "action"
+              "description": "Specify if NativeSelect displays in a disabled state",
+              "fieldName": "disabled"
             },
             {
-              "kind": "field",
-              "name": "method",
+              "name": "error",
               "type": {
                 "text": "string | undefined"
               },
-              "attribute": "method"
+              "description": "Specify error text and display error state of a NativeSelect",
+              "fieldName": "error"
             },
             {
-              "kind": "field",
-              "name": "target",
+              "name": "fluid",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "attribute": "target"
+              "default": "false",
+              "description": "Specify if NativeSelect is fluid",
+              "fieldName": "fluid"
             },
             {
-              "kind": "field",
-              "name": "enctype",
+              "name": "width",
               "type": {
                 "text": "string | undefined"
               },
-              "attribute": "enctype"
-            },
-            {
-              "kind": "field",
-              "name": "formMeta",
-              "type": {
-                "text": "Record<string, FieldMeta>"
-              },
-              "default": "{}"
-            },
-            {
-              "kind": "field",
-              "name": "formRef"
-            },
-            {
-              "kind": "field",
-              "name": "formContext",
-              "type": {
-                "text": "BmFormContext"
-              },
-              "privacy": "public",
-              "default": "bmFormInitials"
-            }
-          ],
-          "events": [
-            {
-              "description": "Validates the inputs and submits the form",
-              "name": "submit"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "validationMode",
-              "type": {
-                "text": "'onChange' | 'onBlur' | 'onSubmit'"
-              },
-              "default": "'onBlur'",
-              "description": "Specify if validation runs on change or when loosing focus",
-              "fieldName": "validationMode"
+              "description": "Specify the width of NativeSelect",
+              "fieldName": "width"
             },
             {
-              "name": "initialValues",
+              "name": "ellipse",
               "type": {
-                "text": "Record<string, FormValue>"
+                "text": "boolean"
               },
-              "default": "{}",
-              "description": "Specify initial values on Form controls based on their names",
-              "fieldName": "initialValues"
+              "default": "true",
+              "description": "Specify if overflow displays ellipsis",
+              "fieldName": "ellipse"
             },
             {
-              "name": "required",
+              "name": "hideRequiredMarker",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Specify if input is a required",
-              "fieldName": "required"
+              "description": "Specify if the NativeSelect displays with an asterisk",
+              "fieldName": "hideRequiredMarker"
             },
             {
-              "name": "disabled",
+              "name": "theme",
               "type": {
-                "text": "boolean"
+                "text": "'light' | 'dark' | undefined"
               },
-              "default": "false",
-              "description": "Specify if input is a disabled",
-              "fieldName": "disabled"
+              "description": "Specify the theme of the NativeSelect. By default it inherits the theme from the parent",
+              "fieldName": "theme"
             },
             {
-              "name": "readOnly",
+              "name": "id",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Specify if input is a read only",
-              "fieldName": "readOnly"
+              "default": "''",
+              "fieldName": "id",
+              "inheritedFrom": {
+                "name": "FormField",
+                "module": "libs/web-components/src/lib/wip/Form/Form.decorator.ts"
+              }
             },
             {
-              "name": "action",
+              "name": "name",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
-              "fieldName": "action"
+              "default": "''",
+              "fieldName": "name",
+              "inheritedFrom": {
+                "name": "FormField",
+                "module": "libs/web-components/src/lib/wip/Form/Form.decorator.ts"
+              }
             },
             {
-              "name": "method",
+              "name": "value",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
-              "fieldName": "method"
+              "default": "''",
+              "fieldName": "value",
+              "inheritedFrom": {
+                "name": "FormField",
+                "module": "libs/web-components/src/lib/wip/Form/Form.decorator.ts"
+              }
             },
             {
-              "name": "target",
+              "name": "validationRules",
               "type": {
-                "text": "string | undefined"
+                "text": "Array<FormValidator>"
               },
-              "fieldName": "target"
+              "default": "[]",
+              "fieldName": "validationRules",
+              "inheritedFrom": {
+                "name": "FormField",
+                "module": "libs/web-components/src/lib/wip/Form/Form.decorator.ts"
+              }
             },
             {
-              "name": "enctype",
+              "name": "input-aria-label",
               "type": {
                 "text": "string | undefined"
               },
-              "fieldName": "enctype"
+              "fieldName": "inputAriaLabel",
+              "inheritedFrom": {
+                "name": "FormField",
+                "module": "libs/web-components/src/lib/wip/Form/Form.decorator.ts"
+              }
             }
           ],
           "superclass": {
-            "name": "LitElement",
-            "package": "lit"
+            "name": "FormField",
+            "module": "/libs/web-components/src/lib/wip/Form/Form.decorator"
           },
-          "summary": "`bm-form`",
-          "tagName": "bm-form",
+          "summary": "`bm-native-select`",
+          "tagName": "bm-native-select",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "validators",
-          "declaration": {
-            "name": "validators",
-            "package": "@viasat/beam-shared/components/form"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "BmForm",
+          "name": "BmNativeSelect",
           "declaration": {
-            "name": "BmForm",
-            "module": "libs/web-components/src/lib/wip/Form/Form.ts"
+            "name": "BmNativeSelect",
+            "module": "libs/web-components/src/lib/wip/NativeSelect/NativeSelect.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "bm-form",
-          "declaration": {
-            "name": "BmForm",
-            "module": "libs/web-components/src/lib/wip/Form/Form.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "libs/web-components/src/lib/wip/Form/Form.utils.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "createId",
-          "return": {
-            "type": {
-              "text": "string"
-            }
-          }
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "createId",
+          "name": "bm-native-select",
           "declaration": {
-            "name": "createId",
-            "module": "libs/web-components/src/lib/wip/Form/Form.utils.ts"
+            "name": "BmNativeSelect",
+            "module": "libs/web-components/src/lib/wip/NativeSelect/NativeSelect.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "libs/web-components/src/lib/wip/Form/index.ts",
+      "path": "libs/web-components/src/lib/wip/NativeSelect/index.ts",
       "declarations": [],
       "exports": [
         {
@@ -8776,15 +8784,7 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "package": "./Form"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "./Form.decorator"
+            "package": "./NativeSelect"
           }
         }
       ]