@ukic/web-components 3.0.0-alpha.2 → 3.0.0-alpha.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ukic/web-components",
-  "version": "3.0.0-alpha.2",
+  "version": "3.0.0-alpha.4",
   "description": "A web component UI library compiled with StencilJS",
   "author": "mi6",
   "bugs": {
@@ -96,5 +96,5 @@
     "webpack": "^5.76.0"
   },
   "license": "MIT",
-  "gitHead": "59d0e036de6def6644421e17bf1c5591eac0e34a"
+  "gitHead": "c83a1397b30a5eb7cb844ac6c1bf037de3b7a94a"
 }

package/vscode-data.json

@@ -38,6 +38,21 @@
               "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."
@@ -93,6 +93,21 @@
               "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"
+            }
+          ]
         }
       ]
     },
@@ -121,7 +136,22 @@
         },
         {
           "name": "show-default-icon",
-          "description": "If `true`, the default icon for the neutral variant will be appear on the left of the alert."
+          "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",
@@ -651,6 +681,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"
+            }
+          ]
         }
       ]
     },
@@ -675,7 +720,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",
@@ -728,6 +773,21 @@
             }
           ]
         },
+        {
+          "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."
@@ -780,6 +840,21 @@
             }
           ]
         },
+        {
+          "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'.",
@@ -1063,6 +1138,21 @@
               "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"
+            }
+          ]
         }
       ]
     },
@@ -1072,7 +1162,97 @@
         "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",
@@ -1477,6 +1657,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."
@@ -1731,6 +1915,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."
@@ -1765,7 +1953,7 @@
         },
         {
           "name": "size",
-          "description": "The size of the menu component.",
+          "description": "The size of the menu.",
           "values": [
             {
               "name": "large"
@@ -1780,7 +1968,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",
@@ -1825,7 +2013,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."
         },
         {
@@ -2126,21 +2314,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."
@@ -2169,10 +2342,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.",
@@ -2194,21 +2386,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."
@@ -2217,6 +2394,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."
@@ -2225,6 +2406,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'.",
@@ -2260,6 +2456,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"
+            }
+          ]
         }
       ]
     },
@@ -2318,6 +2529,21 @@
             }
           ]
         },
+        {
+          "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'.",
@@ -2386,6 +2612,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."
@@ -2691,6 +2932,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."
@@ -2762,7 +3018,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",
@@ -2796,6 +3052,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."
@@ -2830,7 +3090,7 @@
         },
         {
           "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",
@@ -2838,7 +3098,7 @@
         },
         {
           "name": "size",
-          "description": "The size of the select component.",
+          "description": "The size of the select.",
           "values": [
             {
               "name": "large"
@@ -2876,7 +3136,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."
         }
       ]
     },
@@ -3195,6 +3455,21 @@
             }
           ]
         },
+        {
+          "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 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>`."