@ukic/web-components 3.0.0 → 3.1.0

package/vscode-data.json

@@ -29,15 +29,30 @@
           "description": "The size of the accordion.",
           "values": [
             {
-              "name": "default"
+              "name": "large"
             },
             {
-              "name": "large"
+              "name": "medium"
             },
             {
               "name": "small"
             }
           ]
+        },
+        {
+          "name": "theme",
+          "description": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.",
+          "values": [
+            {
+              "name": "dark"
+            },
+            {
+              "name": "inherit"
+            },
+            {
+              "name": "light"
+            }
+          ]
         }
       ]
     },
@@ -52,21 +67,6 @@
           "name": "accessible-button-label",
           "description": "The accessible button label to provide more context to the 'See all/Hide all' button for screen reader users."
         },
-        {
-          "name": "appearance",
-          "description": "The appearance of the accordion group, e.g dark, or light.",
-          "values": [
-            {
-              "name": "dark"
-            },
-            {
-              "name": "default"
-            },
-            {
-              "name": "light"
-            }
-          ]
-        },
         {
           "name": "expanded",
           "description": "If `true`, the accordion will load in an expanded state."
@@ -84,15 +84,30 @@
           "description": "The size of the accordion.",
           "values": [
             {
-              "name": "default"
+              "name": "large"
             },
             {
-              "name": "large"
+              "name": "medium"
             },
             {
               "name": "small"
             }
           ]
+        },
+        {
+          "name": "theme",
+          "description": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.",
+          "values": [
+            {
+              "name": "dark"
+            },
+            {
+              "name": "inherit"
+            },
+            {
+              "name": "light"
+            }
+          ]
         }
       ]
     },
@@ -119,6 +134,25 @@
           "name": "message",
           "description": "The main body message of the alert."
         },
+        {
+          "name": "show-default-icon",
+          "description": "If `true`, the default icon for the neutral variant will appear on the left of the alert."
+        },
+        {
+          "name": "theme",
+          "description": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.",
+          "values": [
+            {
+              "name": "dark"
+            },
+            {
+              "name": "inherit"
+            },
+            {
+              "name": "light"
+            }
+          ]
+        },
         {
           "name": "title-above",
           "description": "If `true`, the title and message will appear above and below instead of inline."
@@ -153,10 +187,40 @@
         "value": ""
       },
       "attributes": [
+        {
+          "name": "position",
+          "description": "The horizontal position of the element.",
+          "values": [
+            {
+              "name": "center"
+            },
+            {
+              "name": "left"
+            },
+            {
+              "name": "right"
+            }
+          ]
+        },
         {
           "name": "target",
           "description": "The ID of the element to jump back to when the link is clicked."
         },
+        {
+          "name": "theme",
+          "description": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.",
+          "values": [
+            {
+              "name": "dark"
+            },
+            {
+              "name": "inherit"
+            },
+            {
+              "name": "light"
+            }
+          ]
+        },
         {
           "name": "variant",
           "description": "The variant of the button to render",
@@ -214,16 +278,31 @@
           "description": "The size of the badge to be displayed.",
           "values": [
             {
-              "name": "default"
+              "name": "large"
             },
             {
-              "name": "large"
+              "name": "medium"
             },
             {
               "name": "small"
             }
           ]
         },
+        {
+          "name": "theme",
+          "description": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.",
+          "values": [
+            {
+              "name": "dark"
+            },
+            {
+              "name": "inherit"
+            },
+            {
+              "name": "light"
+            }
+          ]
+        },
         {
           "name": "type",
           "description": "The type of badge to be displayed.",
@@ -301,27 +380,31 @@
       },
       "attributes": [
         {
-          "name": "appearance",
-          "description": "The appearance of the breadcrumb group.",
+          "name": "back-breadcrumb-only",
+          "description": "If `true`, display only a single breadcrumb for the parent page with a back icon."
+        },
+        {
+          "name": "collapsed",
+          "description": "If `true`, all breadcrumbs between the first and last breadcrumb will be collapsed."
+        },
+        {
+          "name": "monochrome",
+          "description": "If `true`, the breadcrumb group will display as black in the light theme, and white in the dark theme."
+        },
+        {
+          "name": "theme",
+          "description": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.",
           "values": [
             {
               "name": "dark"
             },
             {
-              "name": "default"
+              "name": "inherit"
             },
             {
               "name": "light"
             }
           ]
-        },
-        {
-          "name": "back-breadcrumb-only",
-          "description": "If `true`, display only a single breadcrumb for the parent page with a back icon."
-        },
-        {
-          "name": "collapsed",
-          "description": "If `true`, all breadcrumbs between the first and last breadcrumb will be collapsed."
         }
       ]
     },
@@ -336,21 +419,6 @@
           "name": "accept",
           "description": "If `fileUpload` is set to `true`, this is the accepted list of file types."
         },
-        {
-          "name": "appearance",
-          "description": "The appearance of the button, e.g. dark, light, or the default.",
-          "values": [
-            {
-              "name": "dark"
-            },
-            {
-              "name": "default"
-            },
-            {
-              "name": "light"
-            }
-          ]
-        },
         {
           "name": "disable-tooltip",
           "description": "If `true`, the ic-tooltip which is shown for icon variant will be disabled. Title or aria-label must be set if this prop is not applied."
@@ -419,6 +487,10 @@
           "name": "loading",
           "description": "If `true`, the button will be in loading state."
         },
+        {
+          "name": "monochrome",
+          "description": "If `true`, the button will display as monochromatic in either `light` or `dark` theme."
+        },
         {
           "name": "multiple",
           "description": "If `fileUpload` is set to `true`, this boolean determines whether multiple files are accepted."
@@ -462,10 +534,10 @@
           "description": "The size of the button to be displayed.",
           "values": [
             {
-              "name": "default"
+              "name": "large"
             },
             {
-              "name": "large"
+              "name": "medium"
             },
             {
               "name": "small"
@@ -476,6 +548,21 @@
           "name": "target",
           "description": "The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe)."
         },
+        {
+          "name": "theme",
+          "description": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.",
+          "values": [
+            {
+              "name": "dark"
+            },
+            {
+              "name": "inherit"
+            },
+            {
+              "name": "light"
+            }
+          ]
+        },
         {
           "name": "tooltip-placement",
           "description": "The position of the tooltip in relation to the button.",
@@ -628,6 +715,21 @@
         {
           "name": "target",
           "description": "The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe)."
+        },
+        {
+          "name": "theme",
+          "description": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.",
+          "values": [
+            {
+              "name": "dark"
+            },
+            {
+              "name": "inherit"
+            },
+            {
+              "name": "light"
+            }
+          ]
         }
       ]
     },
@@ -652,7 +754,7 @@
         },
         {
           "name": "checked",
-          "description": "If `true`, the checkbox will be set to the checked state."
+          "description": "If `true`, the checkbox will be set to the checked state. This is only the initial state and will be updated to unchecked if the checkbox is clicked."
         },
         {
           "name": "disabled",
@@ -695,16 +797,31 @@
           "description": "The size of the checkbox to be displayed. This does not affect the font size of the label. If a checkbox is contained in a checkbox group, this will override the size set on checkbox group.",
           "values": [
             {
-              "name": "default"
+              "name": "large"
             },
             {
-              "name": "large"
+              "name": "medium"
             },
             {
               "name": "small"
             }
           ]
         },
+        {
+          "name": "theme",
+          "description": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.",
+          "values": [
+            {
+              "name": "dark"
+            },
+            {
+              "name": "inherit"
+            },
+            {
+              "name": "light"
+            }
+          ]
+        },
         {
           "name": "value",
           "description": "The value for the checkbox."
@@ -747,16 +864,31 @@
           "description": "The size of the checkboxes to be displayed. This does not affect the font size of the label.",
           "values": [
             {
-              "name": "default"
+              "name": "large"
             },
             {
-              "name": "large"
+              "name": "medium"
             },
             {
               "name": "small"
             }
           ]
         },
+        {
+          "name": "theme",
+          "description": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.",
+          "values": [
+            {
+              "name": "dark"
+            },
+            {
+              "name": "inherit"
+            },
+            {
+              "name": "light"
+            }
+          ]
+        },
         {
           "name": "validation-status",
           "description": "The validation status - e.g. 'error' | 'warning' | 'success'.",
@@ -774,7 +906,7 @@
         },
         {
           "name": "validation-text",
-          "description": "The validation text - e.g. 'error' | 'warning' | 'success'."
+          "description": "The text to display as the validation message."
         }
       ]
     },
@@ -787,12 +919,16 @@
       "attributes": [
         {
           "name": "custom-color",
-          "description": "The custom chip colour. This prop will be applied to the chip component if `dismissible` is set to `false`.\nCan be a hex value e.g. \"#ff0000\", RGB e.g. \"rgb(255, 0, 0)\", or RGBA e.g. \"rgba(255, 0, 0, 1)\"."
+          "description": "The custom chip colour. This will override the theme colour.\nCan be a hex value e.g. \"#ff0000\", RGB e.g. \"rgb(255, 0, 0)\", or RGBA e.g. \"rgba(255, 0, 0, 1)\"."
         },
         {
           "name": "disabled",
           "description": "If `true`, the chip will appear disabled."
         },
+        {
+          "name": "dismiss-label",
+          "description": "The text in the dismiss button tooltip and aria label."
+        },
         {
           "name": "dismissible",
           "description": "If `true`, the chip will have a close button at the end to dismiss it."
@@ -806,19 +942,34 @@
           "description": "The size of the chip.",
           "values": [
             {
-              "name": "default"
+              "name": "large"
             },
             {
-              "name": "large"
+              "name": "medium"
             },
             {
               "name": "small"
             }
           ]
         },
+        {
+          "name": "theme",
+          "description": "Sets the chip to the dark or light theme colors. \"inherit\" will set the color based on the system settings or ic-theme component.\nSetting the \"customColor\" prop will override this.",
+          "values": [
+            {
+              "name": "dark"
+            },
+            {
+              "name": "inherit"
+            },
+            {
+              "name": "light"
+            }
+          ]
+        },
         {
           "name": "transparent-background",
-          "description": "If `true`, the outlined variant of chip will have a transparent background rather than white."
+          "description": "If `true`, the outlined variant of chip will have a transparent background rather than the theme defined color."
         },
         {
           "name": "variant",
@@ -896,12 +1047,27 @@
           "description": "The size of the data list component.",
           "values": [
             {
-              "name": "default"
+              "name": "medium"
             },
             {
               "name": "small"
             }
           ]
+        },
+        {
+          "name": "theme",
+          "description": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.",
+          "values": [
+            {
+              "name": "dark"
+            },
+            {
+              "name": "inherit"
+            },
+            {
+              "name": "light"
+            }
+          ]
         }
       ]
     },
@@ -921,13 +1087,28 @@
           "description": "The size of the data row component.",
           "values": [
             {
-              "name": "default"
+              "name": "medium"
             },
             {
               "name": "small"
             }
           ]
         },
+        {
+          "name": "theme",
+          "description": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.",
+          "values": [
+            {
+              "name": "dark"
+            },
+            {
+              "name": "inherit"
+            },
+            {
+              "name": "light"
+            }
+          ]
+        },
         {
           "name": "value",
           "description": "The value of the middle (right if no end-component supplied) cell of the row."
@@ -941,17 +1122,13 @@
         "value": ""
       },
       "attributes": [
-        {
-          "name": "buttons",
-          "description": "If set to `false`, default buttons or slotted dialog controls will not be displayed."
-        },
         {
           "name": "close-on-backdrop-click",
-          "description": "If set to `true`, the dialog will not close when the backdrop is clicked."
+          "description": "If set to `false`, the dialog will not close when the backdrop is clicked."
         },
         {
           "name": "destructive",
-          "description": "If default buttons are displayed, sets the 'primary' or rightmost button to the destructive variant. Stops initial focus being set on the 'primary' or rightmost default or slotted button."
+          "description": "If 'true', sets the 'primary' or rightmost button to the destructive variant. Stops initial focus being set on the 'primary' or rightmost default or slotted button."
         },
         {
           "name": "disable-height-constraint",
@@ -973,6 +1150,10 @@
           "name": "hide-close-button",
           "description": "If `true`, the close button will not be displayed."
         },
+        {
+          "name": "hide-default-controls",
+          "description": "If set to `true`, default button controls will not be shown, but slotted dialog controls will still be displayed."
+        },
         {
           "name": "label",
           "description": "Sets the optional label for the dialog which appears above the heading."
@@ -995,16 +1176,121 @@
               "name": "small"
             }
           ]
-        }
-      ]
-    },
-    {
-      "name": "ic-divider",
-      "description": {
+        },
+        {
+          "name": "theme",
+          "description": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.",
+          "values": [
+            {
+              "name": "dark"
+            },
+            {
+              "name": "inherit"
+            },
+            {
+              "name": "light"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "ic-divider",
+      "description": {
         "kind": "markdown",
         "value": ""
       },
-      "attributes": []
+      "attributes": [
+        {
+          "name": "border-style",
+          "description": "The line style of the divider.",
+          "values": [
+            {
+              "name": "dashed"
+            },
+            {
+              "name": "solid"
+            }
+          ]
+        },
+        {
+          "name": "label",
+          "description": "The label for the divider. The label placement will need to be set for the label to be displayed correctly."
+        },
+        {
+          "name": "label-placement",
+          "description": "The position the label is placed on the divider. `Left` and `right` placement is only applicable when orientation is set to `horizontal`. `Top` and `bottom` placement is only applicable when orientation is set to `vertical`. `Center` placement is applicable for both orientations.",
+          "values": [
+            {
+              "name": "bottom"
+            },
+            {
+              "name": "center"
+            },
+            {
+              "name": "left"
+            },
+            {
+              "name": "right"
+            },
+            {
+              "name": "top"
+            }
+          ]
+        },
+        {
+          "name": "monochrome",
+          "description": "If `true`, the divider will be displayed in a grey colour."
+        },
+        {
+          "name": "orientation",
+          "description": "The orientation of the divider.",
+          "values": [
+            {
+              "name": "horizontal"
+            },
+            {
+              "name": "vertical"
+            }
+          ]
+        },
+        {
+          "name": "theme",
+          "description": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.",
+          "values": [
+            {
+              "name": "dark"
+            },
+            {
+              "name": "default"
+            },
+            {
+              "name": "inherit"
+            },
+            {
+              "name": "light"
+            }
+          ]
+        },
+        {
+          "name": "weight",
+          "description": "The thickness of the divider.",
+          "values": [
+            {
+              "name": "medium"
+            },
+            {
+              "name": "thick"
+            },
+            {
+              "name": "thin"
+            },
+            {
+              "name": "very-thick"
+            }
+          ]
+        }
+      ]
     },
     {
       "name": "ic-empty-state",
@@ -1041,10 +1327,10 @@
           "description": "The size of the image or icon used in the image slot.",
           "values": [
             {
-              "name": "default"
+              "name": "large"
             },
             {
-              "name": "large"
+              "name": "medium"
             },
             {
               "name": "small"
@@ -1058,6 +1344,21 @@
         {
           "name": "subheading",
           "description": "The subtitle rendered in the empty state container."
+        },
+        {
+          "name": "theme",
+          "description": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.",
+          "values": [
+            {
+              "name": "dark"
+            },
+            {
+              "name": "inherit"
+            },
+            {
+              "name": "light"
+            }
+          ]
         }
       ]
     },
@@ -1253,7 +1554,7 @@
           "description": "The size of the hero component.",
           "values": [
             {
-              "name": "default"
+              "name": "medium"
             },
             {
               "name": "small"
@@ -1297,18 +1598,6 @@
         "value": ""
       },
       "attributes": [
-        {
-          "name": "appearance",
-          "description": "The appearance of the input component container.",
-          "values": [
-            {
-              "name": "dark"
-            },
-            {
-              "name": "default"
-            }
-          ]
-        },
         {
           "name": "disabled",
           "description": "If `true`, the disabled state will be set."
@@ -1330,10 +1619,10 @@
           "description": "The size of the input component container component.",
           "values": [
             {
-              "name": "default"
+              "name": "large"
             },
             {
-              "name": "large"
+              "name": "medium"
             },
             {
               "name": "small"
@@ -1385,18 +1674,6 @@
         "value": ""
       },
       "attributes": [
-        {
-          "name": "appearance",
-          "description": "The appearance of the input label.",
-          "values": [
-            {
-              "name": "dark"
-            },
-            {
-              "name": "default"
-            }
-          ]
-        },
         {
           "name": "disabled",
           "description": "If `true`, the disabled state will be set."
@@ -1409,6 +1686,10 @@
           "name": "helper-text",
           "description": "The helper text that will be displayed."
         },
+        {
+          "name": "hide-label",
+          "description": "The label will be visually hidden."
+        },
         {
           "name": "label",
           "description": "The text content of the label."
@@ -1487,21 +1768,6 @@
         "value": ""
       },
       "attributes": [
-        {
-          "name": "appearance",
-          "description": "The appearance of the link, e.g. dark, light, or default.",
-          "values": [
-            {
-              "name": "dark"
-            },
-            {
-              "name": "default"
-            },
-            {
-              "name": "light"
-            }
-          ]
-        },
         {
           "name": "download",
           "description": "If `true`, the user can save the linked URL instead of navigating to it."
@@ -1514,6 +1780,10 @@
           "name": "hreflang",
           "description": "The human language of the linked URL."
         },
+        {
+          "name": "monochrome",
+          "description": "If `true`, the link will display as black in the light theme, and white in the dark theme."
+        },
         {
           "name": "referrerpolicy",
           "description": "How much of the referrer to send when following the link.",
@@ -1551,6 +1821,21 @@
         {
           "name": "target",
           "description": "The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe)."
+        },
+        {
+          "name": "theme",
+          "description": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.",
+          "values": [
+            {
+              "name": "dark"
+            },
+            {
+              "name": "inherit"
+            },
+            {
+              "name": "light"
+            }
+          ]
         }
       ]
     },
@@ -1561,18 +1846,6 @@
         "value": ""
       },
       "attributes": [
-        {
-          "name": "appearance",
-          "description": "The appearance of the loading indicator, e.g. dark or light.",
-          "values": [
-            {
-              "name": "dark"
-            },
-            {
-              "name": "light"
-            }
-          ]
-        },
         {
           "name": "description",
           "description": "The description that will be set as the aria-label of the loading indicator when not using a visible label."
@@ -1583,7 +1856,7 @@
         },
         {
           "name": "label",
-          "description": "The label to be displayed beneath the loading indicator.\nDisplay a changing label by separating multiple messages with forward slashes."
+          "description": "The label to be displayed beneath the loading indicator.\nDisplay a changing label by supplying an array of messages."
         },
         {
           "name": "label-duration",
@@ -1597,6 +1870,10 @@
           "name": "min",
           "description": "The minimum value that the progress value can take.\nUsed to calculate the proportional width of the progress bar."
         },
+        {
+          "name": "monochrome",
+          "description": "If `true`, the element will display as black and white."
+        },
         {
           "name": "progress",
           "description": "The current amount of progress made.\nIf not provided, component acts as an indeterminate loading indicator."
@@ -1605,20 +1882,35 @@
           "name": "size",
           "description": "The size of the loading indicator.",
           "values": [
-            {
-              "name": "default"
-            },
             {
               "name": "icon"
             },
             {
               "name": "large"
             },
+            {
+              "name": "medium"
+            },
             {
               "name": "small"
             }
           ]
         },
+        {
+          "name": "theme",
+          "description": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.",
+          "values": [
+            {
+              "name": "dark"
+            },
+            {
+              "name": "inherit"
+            },
+            {
+              "name": "light"
+            }
+          ]
+        },
         {
           "name": "type",
           "description": "The type of indicator, either linear or circular.",
@@ -1652,6 +1944,10 @@
             }
           ]
         },
+        {
+          "name": "close-on-select",
+          "description": "If `true`, the menu will close when an option is selected."
+        },
         {
           "name": "full-width",
           "description": "If `true`, the menu will fill the width of the container."
@@ -1686,13 +1982,13 @@
         },
         {
           "name": "size",
-          "description": "The size of the menu component.",
+          "description": "The size of the menu.",
           "values": [
             {
-              "name": "default"
+              "name": "large"
             },
             {
-              "name": "large"
+              "name": "medium"
             },
             {
               "name": "small"
@@ -1701,7 +1997,7 @@
         },
         {
           "name": "value",
-          "description": "The value of the currently selected option."
+          "description": "The value of the currently selected option - or array of values (if multiple options allowed)."
         },
         {
           "name": "value-field",
@@ -1729,6 +2025,10 @@
         "value": ""
       },
       "attributes": [
+        {
+          "name": "checked",
+          "description": "If `true`, the menu item will be in a checked state. This is only applicable when variant is set to `toggle`."
+        },
         {
           "name": "description",
           "description": "The description displayed in the menu item, below the label."
@@ -1746,7 +2046,7 @@
           "description": "The human language of the linked URL."
         },
         {
-          "name": "keyboard-shortcut",
+          "name": "keyboard-shortcut-label",
           "description": "The label describing the keyboard shortcut for a menu item's action."
         },
         {
@@ -1872,6 +2172,21 @@
         {
           "name": "target",
           "description": "The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe)."
+        },
+        {
+          "name": "theme",
+          "description": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.",
+          "values": [
+            {
+              "name": "dark"
+            },
+            {
+              "name": "inherit"
+            },
+            {
+              "name": "light"
+            }
+          ]
         }
       ]
     },
@@ -1884,11 +2199,26 @@
       "attributes": [
         {
           "name": "expandable",
-          "description": "If `true`, the group will be expandable in the side menu."
+          "description": "If `true`, the group will be expandable when in an ic-side-navigation component, or, when in an ic-top-navigation component, in the side menu displayed at small screen sizes."
         },
         {
           "name": "label",
           "description": "The label to display on the group."
+        },
+        {
+          "name": "theme",
+          "description": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.",
+          "values": [
+            {
+              "name": "dark"
+            },
+            {
+              "name": "inherit"
+            },
+            {
+              "name": "light"
+            }
+          ]
         }
       ]
     },
@@ -1956,6 +2286,21 @@
         {
           "name": "target",
           "description": "The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe)."
+        },
+        {
+          "name": "theme",
+          "description": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.",
+          "values": [
+            {
+              "name": "dark"
+            },
+            {
+              "name": "inherit"
+            },
+            {
+              "name": "light"
+            }
+          ]
         }
       ]
     },
@@ -1970,6 +2315,21 @@
           "name": "status",
           "description": "The status info to display."
         },
+        {
+          "name": "theme",
+          "description": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.",
+          "values": [
+            {
+              "name": "dark"
+            },
+            {
+              "name": "inherit"
+            },
+            {
+              "name": "light"
+            }
+          ]
+        },
         {
           "name": "version",
           "description": "The version info to display."
@@ -2015,7 +2375,7 @@
           "description": "The size of the page header component.",
           "values": [
             {
-              "name": "default"
+              "name": "medium"
             },
             {
               "name": "small"
@@ -2033,6 +2393,21 @@
         {
           "name": "subheading",
           "description": "The subtitle to render on the page header."
+        },
+        {
+          "name": "theme",
+          "description": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.",
+          "values": [
+            {
+              "name": "dark"
+            },
+            {
+              "name": "inherit"
+            },
+            {
+              "name": "light"
+            }
+          ]
         }
       ]
     },
@@ -2047,21 +2422,6 @@
           "name": "adjacent-page-count",
           "description": "The number of pages displayed adjacent to the current page when using 'complex' type pagination. Accepted values are 0, 1 & 2."
         },
-        {
-          "name": "appearance",
-          "description": "The appearance of the pagination, e.g. dark, light or the default.",
-          "values": [
-            {
-              "name": "dark"
-            },
-            {
-              "name": "default"
-            },
-            {
-              "name": "light"
-            }
-          ]
-        },
         {
           "name": "boundary-page-count",
           "description": "The number of pages displayed as boundary items to the current page when using 'complex' type pagination. Accepted values are 0, 1 & 2."
@@ -2090,10 +2450,29 @@
           "name": "label",
           "description": "The label for the pagination item (applicable when simple pagination is being used)."
         },
+        {
+          "name": "monochrome",
+          "description": "If `true`, the pagination will display as black in the light theme, and white in dark theme."
+        },
         {
           "name": "pages",
           "description": "The total number of pages."
         },
+        {
+          "name": "theme",
+          "description": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.",
+          "values": [
+            {
+              "name": "dark"
+            },
+            {
+              "name": "inherit"
+            },
+            {
+              "name": "light"
+            }
+          ]
+        },
         {
           "name": "type",
           "description": "The type of pagination to be used.",
@@ -2115,21 +2494,6 @@
         "value": ""
       },
       "attributes": [
-        {
-          "name": "appearance",
-          "description": "The appearance of the pagination, e.g. dark, light or the default.",
-          "values": [
-            {
-              "name": "dark"
-            },
-            {
-              "name": "default"
-            },
-            {
-              "name": "light"
-            }
-          ]
-        },
         {
           "name": "disabled",
           "description": "If `true`, the pagination item will be disabled."
@@ -2138,6 +2502,10 @@
           "name": "label",
           "description": "The label for the pagination item (applicable when simple pagination is being used)."
         },
+        {
+          "name": "monochrome",
+          "description": "If `true`, the pagination item will display as black in the light theme, and white in dark theme."
+        },
         {
           "name": "page",
           "description": "The current page number."
@@ -2146,6 +2514,21 @@
           "name": "selected",
           "description": "If `true`, the pagination item will be selected."
         },
+        {
+          "name": "theme",
+          "description": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.",
+          "values": [
+            {
+              "name": "dark"
+            },
+            {
+              "name": "inherit"
+            },
+            {
+              "name": "light"
+            }
+          ]
+        },
         {
           "name": "type",
           "description": "The type of pagination item - 'page' or 'ellipsis'.",
@@ -2181,6 +2564,21 @@
         {
           "name": "submenu-id",
           "description": "The unique identifier for a popover submenu."
+        },
+        {
+          "name": "theme",
+          "description": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.",
+          "values": [
+            {
+              "name": "dark"
+            },
+            {
+              "name": "inherit"
+            },
+            {
+              "name": "light"
+            }
+          ]
         }
       ]
     },
@@ -2232,13 +2630,28 @@
           "description": "The size of the radio group component.",
           "values": [
             {
-              "name": "default"
+              "name": "medium"
             },
             {
               "name": "small"
             }
           ]
         },
+        {
+          "name": "theme",
+          "description": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.",
+          "values": [
+            {
+              "name": "dark"
+            },
+            {
+              "name": "inherit"
+            },
+            {
+              "name": "light"
+            }
+          ]
+        },
         {
           "name": "validation-status",
           "description": "The validation status - e.g. 'error' | 'warning' | 'success'.",
@@ -2256,7 +2669,7 @@
         },
         {
           "name": "validation-text",
-          "description": "The validation text - e.g. 'error' | 'warning' | 'success'."
+          "description": "The text to display as the validation message."
         }
       ]
     },
@@ -2307,6 +2720,21 @@
           "name": "selected",
           "description": "If `true`, the radio option will be displayed in a selected state."
         },
+        {
+          "name": "theme",
+          "description": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.",
+          "values": [
+            {
+              "name": "dark"
+            },
+            {
+              "name": "inherit"
+            },
+            {
+              "name": "light"
+            }
+          ]
+        },
         {
           "name": "value",
           "description": "The value for the radio option."
@@ -2330,171 +2758,7 @@
         },
         {
           "name": "autocomplete",
-          "description": "The state of autocompletion the browser can apply on the text value.",
-          "values": [
-            {
-              "name": "name"
-            },
-            {
-              "name": "on"
-            },
-            {
-              "name": "off"
-            },
-            {
-              "name": "honorific-prefix"
-            },
-            {
-              "name": "given-name"
-            },
-            {
-              "name": "additional-name"
-            },
-            {
-              "name": "family-name"
-            },
-            {
-              "name": "honorific-suffix"
-            },
-            {
-              "name": "nickname"
-            },
-            {
-              "name": "email"
-            },
-            {
-              "name": "username"
-            },
-            {
-              "name": "new-password"
-            },
-            {
-              "name": "current-password"
-            },
-            {
-              "name": "one-time-code"
-            },
-            {
-              "name": "organization-title"
-            },
-            {
-              "name": "organization"
-            },
-            {
-              "name": "street-address"
-            },
-            {
-              "name": "address-line1"
-            },
-            {
-              "name": "address-line2"
-            },
-            {
-              "name": "address-line3"
-            },
-            {
-              "name": "address-level4"
-            },
-            {
-              "name": "address-level3"
-            },
-            {
-              "name": "address-level2"
-            },
-            {
-              "name": "address-level1"
-            },
-            {
-              "name": "country"
-            },
-            {
-              "name": "country-name"
-            },
-            {
-              "name": "postal-code"
-            },
-            {
-              "name": "cc-name"
-            },
-            {
-              "name": "cc-given-name"
-            },
-            {
-              "name": "cc-additional-name"
-            },
-            {
-              "name": "cc-family-name"
-            },
-            {
-              "name": "cc-number"
-            },
-            {
-              "name": "cc-exp"
-            },
-            {
-              "name": "cc-exp-month"
-            },
-            {
-              "name": "cc-exp-year"
-            },
-            {
-              "name": "cc-csc"
-            },
-            {
-              "name": "cc-type"
-            },
-            {
-              "name": "transaction-currency"
-            },
-            {
-              "name": "transaction-amount"
-            },
-            {
-              "name": "language"
-            },
-            {
-              "name": "bday"
-            },
-            {
-              "name": "bday-day"
-            },
-            {
-              "name": "bday-month"
-            },
-            {
-              "name": "bday-year"
-            },
-            {
-              "name": "sex"
-            },
-            {
-              "name": "tel"
-            },
-            {
-              "name": "tel-country-code"
-            },
-            {
-              "name": "tel-national"
-            },
-            {
-              "name": "tel-area-code"
-            },
-            {
-              "name": "tel-local"
-            },
-            {
-              "name": "tel-extension"
-            },
-            {
-              "name": "impp"
-            },
-            {
-              "name": "url"
-            },
-            {
-              "name": "photo"
-            }
-          ]
+          "description": "The state of autocompletion the browser can apply on the text value."
         },
         {
           "name": "autocorrect",
@@ -2601,7 +2865,7 @@
           "description": "The size of the search bar component.",
           "values": [
             {
-              "name": "default"
+              "name": "medium"
             },
             {
               "name": "small"
@@ -2612,6 +2876,21 @@
           "name": "spellcheck",
           "description": "If `true`, the value of the search will have its spelling and grammar checked."
         },
+        {
+          "name": "theme",
+          "description": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.",
+          "values": [
+            {
+              "name": "dark"
+            },
+            {
+              "name": "inherit"
+            },
+            {
+              "name": "light"
+            }
+          ]
+        },
         {
           "name": "timeout",
           "description": "If using external filtering, set a timeout for when loading takes too long."
@@ -2663,7 +2942,7 @@
       "attributes": [
         {
           "name": "debounce",
-          "description": "The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke."
+          "description": "The amount of time, in milliseconds, to wait to trigger the `icInput` event after each keystroke."
         },
         {
           "name": "disable-auto-filtering",
@@ -2683,7 +2962,7 @@
         },
         {
           "name": "full-width",
-          "description": "If `true`, the select element will fill the width of the container. This prop should only be used with searchable select and will only be applied if searchable is true."
+          "description": "If `true`, the select will fill the width of the container."
         },
         {
           "name": "helper-text",
@@ -2717,6 +2996,10 @@
           "name": "loading-label",
           "description": "The message displayed whilst the options are being loaded externally."
         },
+        {
+          "name": "multiple",
+          "description": "If `true`, multiple options can be selected."
+        },
         {
           "name": "name",
           "description": "The name of the control, which is submitted with the form data."
@@ -2747,11 +3030,11 @@
         },
         {
           "name": "searchable",
-          "description": "If `true`, a searchable variant of the select will be displayed which can be typed in to filter options."
+          "description": "If `true`, a searchable variant of the select will be displayed which can be typed in to filter options. This functionality is only available on the single-select variant of the select component."
         },
         {
           "name": "select-on-enter",
-          "description": "If `true`, the icOptionSelect event will be fired on enter instead of ArrowUp and ArrowDown."
+          "description": "If `true`, the icOptionSelect event will be fired on enter instead of ArrowUp and ArrowDown on the single select."
         },
         {
           "name": "show-clear-button",
@@ -2759,13 +3042,13 @@
         },
         {
           "name": "size",
-          "description": "The size of the select component.",
+          "description": "The size of the select.",
           "values": [
             {
-              "name": "default"
+              "name": "large"
             },
             {
-              "name": "large"
+              "name": "medium"
             },
             {
               "name": "small"
@@ -2773,21 +3056,36 @@
           ]
         },
         {
-          "name": "timeout",
-          "description": "If using external filtering, set a timeout for when loading takes too long."
-        },
-        {
-          "name": "validation-status",
-          "description": "The validation status - e.g. 'error' | 'warning' | 'success'.",
+          "name": "theme",
+          "description": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.",
           "values": [
             {
-              "name": "error"
+              "name": "dark"
             },
             {
-              "name": "success"
+              "name": "inherit"
             },
             {
-              "name": "warning"
+              "name": "light"
+            }
+          ]
+        },
+        {
+          "name": "timeout",
+          "description": "If using external filtering, set a timeout for when loading takes too long."
+        },
+        {
+          "name": "validation-status",
+          "description": "The validation status - e.g. 'error' | 'warning' | 'success'.",
+          "values": [
+            {
+              "name": "error"
+            },
+            {
+              "name": "success"
+            },
+            {
+              "name": "warning"
             }
           ]
         },
@@ -2797,7 +3095,7 @@
         },
         {
           "name": "value",
-          "description": "The value of the select, reflected by the value of the currently selected option. For the searchable variant, the value is also reflected by the user input."
+          "description": "The value of the select, reflected by the value of the currently selected option.\nFor the searchable variant, the value is also reflected by the user input.\nFor the multi-select variant, the value must be an array of option values."
         }
       ]
     },
@@ -2858,11 +3156,14 @@
       },
       "attributes": [
         {
-          "name": "appearance",
-          "description": "The appearance of the skeleton.",
+          "name": "theme",
+          "description": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.",
           "values": [
             {
-              "name": "default"
+              "name": "dark"
+            },
+            {
+              "name": "inherit"
             },
             {
               "name": "light"
@@ -2886,6 +3187,54 @@
         }
       ]
     },
+    {
+      "name": "ic-skip-link",
+      "description": {
+        "kind": "markdown",
+        "value": ""
+      },
+      "attributes": [
+        {
+          "name": "full-width",
+          "description": "If `true`, the skip link will fill the width of the page."
+        },
+        {
+          "name": "inline",
+          "description": "If `true`, the skip link will appear inline with surrounding page content when focused."
+        },
+        {
+          "name": "label",
+          "description": "The label displayed when the skip link is focused."
+        },
+        {
+          "name": "monochrome",
+          "description": "If `true`, the skip link will display as black in the light theme, and white in the dark theme."
+        },
+        {
+          "name": "target",
+          "description": "The target ID for the element which should receive focus when triggering the skip link."
+        },
+        {
+          "name": "theme",
+          "description": "Sets the theme color to the dark or light theme color. `inherit` will set the color based on the system settings or ic-theme component.",
+          "values": [
+            {
+              "name": "dark"
+            },
+            {
+              "name": "inherit"
+            },
+            {
+              "name": "light"
+            }
+          ]
+        },
+        {
+          "name": "transparent-background",
+          "description": "If `true`, the background will be hidden."
+        }
+      ]
+    },
     {
       "name": "ic-status-tag",
       "description": {
@@ -2906,10 +3255,10 @@
           "description": "The size of the status tag component.",
           "values": [
             {
-              "name": "default"
+              "name": "large"
             },
             {
-              "name": "large"
+              "name": "medium"
             },
             {
               "name": "small"
@@ -2934,6 +3283,25 @@
             }
           ]
         },
+        {
+          "name": "theme",
+          "description": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.",
+          "values": [
+            {
+              "name": "dark"
+            },
+            {
+              "name": "inherit"
+            },
+            {
+              "name": "light"
+            }
+          ]
+        },
+        {
+          "name": "uppercase",
+          "description": "The letter case of the status tag's label."
+        },
         {
           "name": "variant",
           "description": "The emphasis of the status tag.",
@@ -3015,25 +3383,28 @@
           ]
         },
         {
-          "name": "appearance",
-          "description": "The appearance of the stepper.",
+          "name": "connector-width",
+          "description": "The length of the connector between each step in pixels. Minimum length is 100px."
+        },
+        {
+          "name": "hide-step-info",
+          "description": "If `true`, the information about each step, i.e. step title, step subtitle and step status, will be hidden on all default steps. The information about each step will still be visible in the compact variant of the stepper."
+        },
+        {
+          "name": "theme",
+          "description": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.",
           "values": [
             {
-              "name": "default"
+              "name": "dark"
+            },
+            {
+              "name": "inherit"
             },
             {
               "name": "light"
             }
           ]
         },
-        {
-          "name": "connector-width",
-          "description": "The length of the connector between each step in pixels. Minimum length is 100px."
-        },
-        {
-          "name": "hide-step-info",
-          "description": "If `true`, the information about each step, i.e. step title, step subtitle and step status, will be hidden on all default steps. The information about each step will still be visible in the compact variant of the stepper."
-        },
         {
           "name": "variant",
           "description": "The variant of the stepper.",
@@ -3079,16 +3450,12 @@
           "name": "name",
           "description": "The name of the control, which is submitted with the form data."
         },
-        {
-          "name": "show-state",
-          "description": "If `true`, the switch will render the On/Off state text."
-        },
         {
           "name": "size",
           "description": "The size of the switch component.",
           "values": [
             {
-              "name": "default"
+              "name": "medium"
             },
             {
               "name": "small"
@@ -3096,49 +3463,14 @@
           ]
         },
         {
-          "name": "value",
-          "description": "The value of the toggle does not mean if it's checked or not, use the `checked`\nproperty for that.\n\nThe value of a toggle is analogous to the value of a `<input type=\"checkbox\">`,\nit's only used when the toggle participates in a native `<form>`."
-        }
-      ]
-    },
-    {
-      "name": "ic-tab",
-      "description": {
-        "kind": "markdown",
-        "value": ""
-      },
-      "attributes": [
-        {
-          "name": "disabled",
-          "description": "If `true`, the disabled state will be set."
-        }
-      ]
-    },
-    {
-      "name": "ic-tab-context",
-      "description": {
-        "kind": "markdown",
-        "value": ""
-      },
-      "attributes": [
-        {
-          "name": "activation-type",
-          "description": "Determines whether tabs have to be manually activated (by pressing 'Enter' or 'Space') when they receive focus using keyboard navigation.",
+          "name": "theme",
+          "description": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.",
           "values": [
             {
-              "name": "automatic"
+              "name": "dark"
             },
             {
-              "name": "manual"
-            }
-          ]
-        },
-        {
-          "name": "appearance",
-          "description": "The appearance of the tab context, e.g dark, or light.",
-          "values": [
-            {
-              "name": "dark"
+              "name": "inherit"
             },
             {
               "name": "light"
@@ -3146,222 +3478,111 @@
           ]
         },
         {
-          "name": "context-id",
-          "description": "The unique context needed if using multiple tabs inside one another i.e. rendering another set of tabs inside a tab panel."
-        },
-        {
-          "name": "selected-tab-index",
-          "description": "The selected tab to be controlled by the user. Must be used alongside the icTabSelect event to manage tab selection."
-        }
-      ]
-    },
-    {
-      "name": "ic-tab-group",
-      "description": {
-        "kind": "markdown",
-        "value": ""
-      },
-      "attributes": [
-        {
-          "name": "inline",
-          "description": "If `true`, the tabs and tab panels will be positioned separately."
-        },
-        {
-          "name": "label",
-          "description": "The label to describe the purpose of the set of tabs to screen reader users."
+          "name": "value",
+          "description": "The value of the toggle does not mean if it's checked or not, use the `checked`\nproperty for that.\n\nThe value of a toggle is analogous to the value of a `<input type=\"checkbox\">`,\nit's only used when the toggle participates in a native `<form>`."
         }
       ]
     },
     {
-      "name": "ic-tab-panel",
-      "description": {
-        "kind": "markdown",
-        "value": ""
-      },
-      "attributes": []
-    },
-    {
-      "name": "ic-text-field",
+      "name": "ic-tab",
       "description": {
         "kind": "markdown",
         "value": ""
-      },
-      "attributes": [
-        {
-          "name": "auto-focus",
-          "description": "If `true`, the form control will have input focus when the page loads."
-        },
-        {
-          "name": "autocapitalize",
-          "description": "The automatic capitalisation of the text value as it is entered/edited by the user.\nAvailable options: \"off\", \"none\", \"on\", \"sentences\", \"words\", \"characters\"."
-        },
-        {
-          "name": "autocomplete",
-          "description": "The state of autocompletion the browser can apply on the text value.",
-          "values": [
-            {
-              "name": "name"
-            },
-            {
-              "name": "on"
-            },
-            {
-              "name": "off"
-            },
-            {
-              "name": "honorific-prefix"
-            },
-            {
-              "name": "given-name"
-            },
-            {
-              "name": "additional-name"
-            },
-            {
-              "name": "family-name"
-            },
-            {
-              "name": "honorific-suffix"
-            },
-            {
-              "name": "nickname"
-            },
-            {
-              "name": "email"
-            },
-            {
-              "name": "username"
-            },
-            {
-              "name": "new-password"
-            },
-            {
-              "name": "current-password"
-            },
-            {
-              "name": "one-time-code"
-            },
-            {
-              "name": "organization-title"
-            },
-            {
-              "name": "organization"
-            },
-            {
-              "name": "street-address"
-            },
-            {
-              "name": "address-line1"
-            },
-            {
-              "name": "address-line2"
-            },
-            {
-              "name": "address-line3"
-            },
-            {
-              "name": "address-level4"
-            },
-            {
-              "name": "address-level3"
-            },
-            {
-              "name": "address-level2"
-            },
-            {
-              "name": "address-level1"
-            },
-            {
-              "name": "country"
-            },
-            {
-              "name": "country-name"
-            },
-            {
-              "name": "postal-code"
-            },
-            {
-              "name": "cc-name"
-            },
-            {
-              "name": "cc-given-name"
-            },
-            {
-              "name": "cc-additional-name"
-            },
-            {
-              "name": "cc-family-name"
-            },
-            {
-              "name": "cc-number"
-            },
-            {
-              "name": "cc-exp"
-            },
-            {
-              "name": "cc-exp-month"
-            },
-            {
-              "name": "cc-exp-year"
-            },
-            {
-              "name": "cc-csc"
-            },
-            {
-              "name": "cc-type"
-            },
-            {
-              "name": "transaction-currency"
-            },
-            {
-              "name": "transaction-amount"
-            },
-            {
-              "name": "language"
-            },
-            {
-              "name": "bday"
-            },
-            {
-              "name": "bday-day"
-            },
-            {
-              "name": "bday-month"
-            },
-            {
-              "name": "bday-year"
-            },
-            {
-              "name": "sex"
-            },
-            {
-              "name": "tel"
-            },
-            {
-              "name": "tel-country-code"
-            },
-            {
-              "name": "tel-national"
-            },
-            {
-              "name": "tel-area-code"
-            },
+      },
+      "attributes": [
+        {
+          "name": "disabled",
+          "description": "If `true`, the disabled state will be set."
+        }
+      ]
+    },
+    {
+      "name": "ic-tab-context",
+      "description": {
+        "kind": "markdown",
+        "value": ""
+      },
+      "attributes": [
+        {
+          "name": "activation-type",
+          "description": "Determines whether tabs have to be manually activated (by pressing 'Enter' or 'Space') when they receive focus using keyboard navigation.",
+          "values": [
             {
-              "name": "tel-local"
+              "name": "automatic"
             },
             {
-              "name": "tel-extension"
-            },
+              "name": "manual"
+            }
+          ]
+        },
+        {
+          "name": "context-id",
+          "description": "The unique context needed if using multiple tabs inside one another i.e. rendering another set of tabs inside a tab panel."
+        },
+        {
+          "name": "monochrome",
+          "description": "If `true`, the tabs will display as black in the light theme."
+        },
+        {
+          "name": "selected-tab-index",
+          "description": "The selected tab to be controlled by the user. Must be used alongside the icTabSelect event to manage tab selection."
+        },
+        {
+          "name": "theme",
+          "description": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.",
+          "values": [
             {
-              "name": "impp"
+              "name": "dark"
             },
             {
-              "name": "url"
+              "name": "inherit"
             },
             {
-              "name": "photo"
+              "name": "light"
             }
           ]
+        }
+      ]
+    },
+    {
+      "name": "ic-tab-group",
+      "description": {
+        "kind": "markdown",
+        "value": ""
+      },
+      "attributes": [
+        {
+          "name": "inline",
+          "description": "If `true`, the tabs and tab panels will be positioned separately."
+        },
+        {
+          "name": "label",
+          "description": "The label to describe the purpose of the set of tabs to screen reader users."
+        }
+      ]
+    },
+    {
+      "name": "ic-tab-panel",
+      "description": {
+        "kind": "markdown",
+        "value": ""
+      },
+      "attributes": []
+    },
+    {
+      "name": "ic-text-field",
+      "description": {
+        "kind": "markdown",
+        "value": ""
+      },
+      "attributes": [
+        {
+          "name": "autocapitalize",
+          "description": "The automatic capitalisation of the text value as it is entered/edited by the user.\nAvailable options: \"off\", \"none\", \"on\", \"sentences\", \"words\", \"characters\"."
+        },
+        {
+          "name": "autocomplete",
+          "description": "The state of autocompletion the browser can apply on the text value."
         },
         {
           "name": "autocorrect",
@@ -3375,6 +3596,10 @@
             }
           ]
         },
+        {
+          "name": "autofocus",
+          "description": "If `true`, the form control will have input focus when the page loads."
+        },
         {
           "name": "debounce",
           "description": "The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke."
@@ -3445,6 +3670,14 @@
           "name": "max-characters",
           "description": "The count of characters in the field. Will display a warning if the bound is reached. (NOTE: If the value of the text field has been set using the `value` prop, it will be truncated to this number of characters)"
         },
+        {
+          "name": "max-characters-message",
+          "description": "The text to display as the warning message when the maximum number of characters (the `maxCharacters` prop value) is reached."
+        },
+        {
+          "name": "max-message",
+          "description": "The text to display as the error message when the maximum value (the `max` prop value) has been exceeded."
+        },
         {
           "name": "min",
           "description": "The minimum number that can be accepted as a value, when `type` is `number` and `rows` is `1`. (NOTE: Ensure to include visual indication of min value in `helperText` or `label`)"
@@ -3453,6 +3686,14 @@
           "name": "min-characters",
           "description": "The minimum number of characters that can be entered in the field."
         },
+        {
+          "name": "min-characters-message",
+          "description": "The text to display as the error message when the minimum number of characters (the `minCharacters` prop value) has not been met."
+        },
+        {
+          "name": "min-message",
+          "description": "The text to display as the error message when the minimum value (the `min` prop value) has not been met."
+        },
         {
           "name": "name",
           "description": "The name of the control, which is submitted with the form data."
@@ -3482,7 +3723,7 @@
           "description": "The size of the text field component.",
           "values": [
             {
-              "name": "default"
+              "name": "medium"
             },
             {
               "name": "small"
@@ -3493,6 +3734,21 @@
           "name": "spellcheck",
           "description": "If `true`, the value of the text field will have its spelling and grammar checked."
         },
+        {
+          "name": "theme",
+          "description": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.",
+          "values": [
+            {
+              "name": "dark"
+            },
+            {
+              "name": "inherit"
+            },
+            {
+              "name": "light"
+            }
+          ]
+        },
         {
           "name": "type",
           "description": "The type of control to display. The default type is text.",
@@ -3541,7 +3797,7 @@
         },
         {
           "name": "validation-text",
-          "description": "The validation state - e.g. 'error' | 'warning' | 'success'."
+          "description": "The text to display as the validation message."
         },
         {
           "name": "value",
@@ -3557,8 +3813,23 @@
       },
       "attributes": [
         {
-          "name": "color",
-          "description": "The theme colour. Can be a hex value e.g. \"#ff0000\", RGB e.g. \"rgb(255, 0, 0)\", or RGBA e.g. \"rgba(255, 0, 0, 1)\"."
+          "name": "brand-color",
+          "description": "The brand colour. Can be a hex value e.g. \"#ff0000\", RGB e.g. \"rgb(255, 0, 0)\", or RGBA e.g. \"rgba(255, 0, 0, 1)\"."
+        },
+        {
+          "name": "theme",
+          "description": "The theme mode. Can be \"dark\", \"light\", or \"system\". \"system\" will use the device or browser settings.",
+          "values": [
+            {
+              "name": "dark"
+            },
+            {
+              "name": "light"
+            },
+            {
+              "name": "system"
+            }
+          ]
         }
       ]
     },
@@ -3643,21 +3914,6 @@
           "name": "accessible-label",
           "description": "The accessible label that will be applied to the toggle button. This is required for the icon variant of toggle buttons."
         },
-        {
-          "name": "appearance",
-          "description": "The appearance of the toggle button.",
-          "values": [
-            {
-              "name": "dark"
-            },
-            {
-              "name": "default"
-            },
-            {
-              "name": "light"
-            }
-          ]
-        },
         {
           "name": "checked",
           "description": "If `true`, the toggle button will be in a checked state."
@@ -3693,21 +3949,58 @@
           "name": "loading",
           "description": "If `true`, the toggle button will be in loading state."
         },
+        {
+          "name": "monochrome",
+          "description": "If `true`, the toggle button will display as black in the light theme, and white in dark theme."
+        },
         {
           "name": "size",
           "description": "The size of the toggle button to be displayed.",
           "values": [
             {
-              "name": "default"
+              "name": "large"
             },
             {
-              "name": "large"
+              "name": "medium"
             },
             {
               "name": "small"
             }
           ]
         },
+        {
+          "name": "theme",
+          "description": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.",
+          "values": [
+            {
+              "name": "dark"
+            },
+            {
+              "name": "inherit"
+            },
+            {
+              "name": "light"
+            }
+          ]
+        },
+        {
+          "name": "tooltip-placement",
+          "description": "The position of the tooltip in relation to the toggle button.",
+          "values": [
+            {
+              "name": "bottom"
+            },
+            {
+              "name": "left"
+            },
+            {
+              "name": "right"
+            },
+            {
+              "name": "top"
+            }
+          ]
+        },
         {
           "name": "variant",
           "description": "The variant of the toggle button.",
@@ -3733,21 +4026,6 @@
           "name": "accessible-label",
           "description": "The accessible label of the toggle button group component to provide context for screen reader users."
         },
-        {
-          "name": "appearance",
-          "description": "The appearance of the toggle button group, e.g dark, or light.",
-          "values": [
-            {
-              "name": "dark"
-            },
-            {
-              "name": "default"
-            },
-            {
-              "name": "light"
-            }
-          ]
-        },
         {
           "name": "disabled",
           "description": "If `true`, the toggle button group will be set to the disabled state."
@@ -3775,6 +4053,10 @@
           "name": "loading",
           "description": "If `true`, the toggle button group will be in loading state."
         },
+        {
+          "name": "monochrome",
+          "description": "If `true`, the toggle button group will display as black in the light theme, and white in dark theme."
+        },
         {
           "name": "select-method",
           "description": "If `auto`, controls are toggled automatically when navigated to. If `manual`, the controls must be actioned to change their toggled state. The value of this prop is ignored if `selectType` is set to`multi`.",
@@ -3804,16 +4086,49 @@
           "description": "The size of the toggle buttons to be displayed. This does not affect the font size of the accessible label.",
           "values": [
             {
-              "name": "default"
+              "name": "large"
             },
             {
-              "name": "large"
+              "name": "medium"
             },
             {
               "name": "small"
             }
           ]
         },
+        {
+          "name": "theme",
+          "description": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.",
+          "values": [
+            {
+              "name": "dark"
+            },
+            {
+              "name": "inherit"
+            },
+            {
+              "name": "light"
+            }
+          ]
+        },
+        {
+          "name": "tooltip-placement",
+          "description": "The position of the tooltip in relation to the toggle buttons.",
+          "values": [
+            {
+              "name": "bottom"
+            },
+            {
+              "name": "left"
+            },
+            {
+              "name": "right"
+            },
+            {
+              "name": "top"
+            }
+          ]
+        },
         {
           "name": "variant",
           "description": "The variant of the toggle button.",
@@ -3835,6 +4150,10 @@
         "value": ""
       },
       "attributes": [
+        {
+          "name": "disable-click",
+          "description": "If `true`, the tooltip will not be displayed on click, it will require hover or using the display method."
+        },
         {
           "name": "disable-hover",
           "description": "If `true`, the tooltip will not be displayed on hover, it will require a click."
@@ -3892,6 +4211,21 @@
         {
           "name": "target",
           "description": "The ID of the element the tooltip is describing - for when aria-labelledby or aria-describedby is used."
+        },
+        {
+          "name": "theme",
+          "description": "Sets the tooltip to the dark or light theme colors. \"inherit\" will set the color based on the system settings or ic-theme component.",
+          "values": [
+            {
+              "name": "dark"
+            },
+            {
+              "name": "inherit"
+            },
+            {
+              "name": "light"
+            }
+          ]
         }
       ]
     },
@@ -3941,6 +4275,21 @@
           "name": "status",
           "description": "The status info to be displayed."
         },
+        {
+          "name": "theme",
+          "description": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.",
+          "values": [
+            {
+              "name": "dark"
+            },
+            {
+              "name": "inherit"
+            },
+            {
+              "name": "light"
+            }
+          ]
+        },
         {
           "name": "version",
           "description": "The version info to be displayed."
@@ -3974,6 +4323,21 @@
           "name": "strikethrough",
           "description": "If `true`, the typography will have a line through it."
         },
+        {
+          "name": "theme",
+          "description": "Sets the text color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.",
+          "values": [
+            {
+              "name": "dark"
+            },
+            {
+              "name": "inherit"
+            },
+            {
+              "name": "light"
+            }
+          ]
+        },
         {
           "name": "underline",
           "description": "If `true`, the typography will have a line under it."