@statistikzh/leu 0.5.1 → 0.6.0

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@statistikzh/leu",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -14,22 +14,22 @@
             {
               "name": "heading-level",
               "description": "The heading level of the accordion title. Must be between 1 and 6.",
-              "value": { "type": "Number", "default": "2" }
+              "value": { "type": "number", "default": "2" }
             },
             {
               "name": "label-prefix",
               "description": "The prefix of the accordion label. e.g. \"01\"",
-              "value": { "type": "String" }
+              "value": { "type": "string", "default": "\"\"" }
             },
             {
               "name": "open",
               "description": "The expanded state of the accordion.",
-              "value": { "type": "Boolean", "default": "false" }
+              "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "label",
               "description": "The label (title) of the accordion.",
-              "value": { "type": "String", "default": "\"\"" }
+              "value": { "type": "string", "default": "\"\"" }
             }
           ],
           "slots": [
@@ -42,24 +42,24 @@
           "js": {
             "properties": [
               {
-                "name": "heading-level",
+                "name": "headingLevel",
                 "description": "The heading level of the accordion title. Must be between 1 and 6.",
-                "value": { "type": "Number" }
-              },
-              {
-                "name": "label-prefix",
-                "description": "The prefix of the accordion label. e.g. \"01\"",
-                "value": { "type": "String" }
+                "type": "number"
               },
               {
                 "name": "open",
                 "description": "The expanded state of the accordion.",
-                "value": { "type": "Boolean" }
+                "type": "boolean"
               },
               {
                 "name": "label",
                 "description": "The label (title) of the accordion.",
-                "value": { "type": "String" }
+                "type": "string"
+              },
+              {
+                "name": "labelPrefix",
+                "description": "The prefix of the accordion label. e.g. \"01\"",
+                "type": "string"
               }
             ],
             "events": []
@@ -78,7 +78,7 @@
             {
               "name": "inverted",
               "description": "invert color on dark background",
-              "value": { "type": "Boolean", "default": "false" }
+              "value": { "type": "boolean", "default": "false" }
             },
             { "name": "_hiddenItems", "value": { "type": "string" } },
             { "name": "_showBackOnly", "value": { "type": "string" } },
@@ -88,45 +88,36 @@
           "events": [],
           "js": {
             "properties": [
+              { "name": "_handleResize" },
+              { "name": "_closeDropdown" },
               {
                 "name": "items",
                 "description": "Object array with { label, href }",
-                "value": { "type": "Array" }
+                "type": "Array"
               },
               {
                 "name": "inverted",
-                "description": "invert color on dark background",
-                "value": { "type": "Boolean" }
+                "description": "will be used on dark Background",
+                "type": "boolean"
               },
-              { "name": "_hiddenItems", "value": {} },
-              { "name": "_showBackOnly", "value": {} },
-              { "name": "_isRecalculating", "value": {} },
-              { "name": "_isDropdownOpen", "value": {} }
+              { "name": "resizeObserver" },
+              { "name": "_hiddenItems", "type": "number" },
+              { "name": "_showBackOnly", "type": "null" },
+              { "name": "_isRecalculating", "type": "boolean" },
+              { "name": "_isDropdownOpen", "type": "boolean" }
             ],
             "events": []
           }
         },
         {
           "name": "leu-button",
-          "description": "\n---\n",
+          "description": "\n---\n\n\n### **Slots:**\n - **before** - The icon to display before the label\n- **after** - The icon to display after the label\n- _default_ - The label of the button or the icon if no label is set",
           "doc-url": "",
           "attributes": [
             {
               "name": "label",
               "value": { "type": "string", "default": "null" }
             },
-            {
-              "name": "icon",
-              "value": { "type": "string", "default": "null" }
-            },
-            {
-              "name": "iconPosition",
-              "description": "Only taken into account if Label and no Icon is set",
-              "value": {
-                "type": "(\"before\" | \"after\")",
-                "default": "\"before\""
-              }
-            },
             {
               "name": "size",
               "value": { "type": "string", "default": "\"regular\"" }
@@ -142,7 +133,10 @@
                 "default": "\"button\""
               }
             },
-            { "name": "componentRole", "value": { "type": "string" } },
+            {
+              "name": "componentRole",
+              "value": { "type": "string", "default": "undefined" }
+            },
             {
               "name": "disabled",
               "value": { "type": "boolean", "default": "false" }
@@ -175,44 +169,49 @@
               "value": { "type": "boolean", "default": "false" }
             }
           ],
+          "slots": [
+            {
+              "name": "before",
+              "description": "The icon to display before the label"
+            },
+            {
+              "name": "after",
+              "description": "The icon to display after the label"
+            },
+            {
+              "name": "",
+              "description": "The label of the button or the icon if no label is set"
+            }
+          ],
           "events": [],
           "js": {
             "properties": [
-              { "name": "label", "value": { "type": "string" } },
-              { "name": "icon", "value": { "type": "string" } },
-              {
-                "name": "iconPosition",
-                "description": "Only taken into account if Label and no Icon is set",
-                "value": { "type": "(\"before\" | \"after\")" }
-              },
-              { "name": "size", "value": { "type": "string" } },
-              { "name": "variant", "value": { "type": "string" } },
-              {
-                "name": "type",
-                "value": { "type": "\"button\" | \"submit\" | \"reset\"" }
-              },
-              { "name": "componentRole", "value": { "type": "string" } },
-              { "name": "disabled", "value": { "type": "boolean" } },
+              { "name": "label", "type": "string" },
+              { "name": "size", "type": "string" },
+              { "name": "variant", "type": "string" },
+              { "name": "type", "type": "\"button\" | \"submit\" | \"reset\"" },
+              { "name": "componentRole", "type": "string" },
+              { "name": "disabled", "type": "boolean" },
               {
                 "name": "round",
                 "description": "Only taken into account if no Label and an Icon is set",
-                "value": { "type": "boolean" }
+                "type": "boolean"
               },
-              { "name": "active", "value": { "type": "boolean" } },
+              { "name": "active", "type": "boolean" },
               {
                 "name": "inverted",
                 "description": "will be used on dark Background",
-                "value": { "type": "boolean" }
-              },
-              {
-                "name": "expanded",
-                "description": "Only taken into account if variant is \"ghost\"",
-                "value": { "type": "(\"true\" | \"false\" | undefined)" }
+                "type": "boolean"
               },
               {
                 "name": "fluid",
                 "description": "Alters the shape of the button to be full width of its parent container",
-                "value": { "type": "boolean" }
+                "type": "boolean"
+              },
+              {
+                "name": "expanded",
+                "description": "Only taken into account if variant is \"ghost\"",
+                "type": "(\"true\" | \"false\" | undefined)"
               }
             ],
             "events": []
@@ -227,24 +226,23 @@
           "events": [
             {
               "name": "input",
+              "type": "CustomEvent",
               "description": "When the value of the group changes by clicking a button"
             }
           ],
           "js": {
             "properties": [
-              { "name": "getButtonValue", "value": {} },
               {
                 "name": "value",
                 "description": "The value of the currenty selected (active) button",
-                "value": { "type": "string" }
+                "type": "string"
               },
-              { "name": "_handleSlotChange", "value": {} },
-              { "name": "_handleButtonClick", "value": {} },
-              { "name": "_items", "value": { "type": "array" } }
+              { "name": "_items", "type": "array" }
             ],
             "events": [
               {
                 "name": "input",
+                "type": "CustomEvent",
                 "description": "When the value of the group changes by clicking a button"
               }
             ]
@@ -263,20 +261,19 @@
               "name": "disabled",
               "value": { "type": "boolean", "default": "false" }
             },
-            { "name": "identifier", "value": { "type": "string" } },
-            { "name": "value", "value": { "type": "string" } },
-            { "name": "name", "value": { "type": "string" } },
-            { "name": "label", "value": { "type": "string" } }
+            {
+              "name": "value",
+              "value": { "type": "string", "default": "\"\"" }
+            },
+            { "name": "name", "value": { "type": "string", "default": "\"\"" } }
           ],
           "events": [],
           "js": {
             "properties": [
-              { "name": "checked", "value": { "type": "boolean" } },
-              { "name": "disabled", "value": { "type": "boolean" } },
-              { "name": "identifier", "value": { "type": "string" } },
-              { "name": "value", "value": { "type": "string" } },
-              { "name": "name", "value": { "type": "string" } },
-              { "name": "label", "value": { "type": "string" } }
+              { "name": "checked", "type": "boolean" },
+              { "name": "disabled", "type": "boolean" },
+              { "name": "name", "type": "string" },
+              { "name": "value", "type": "string" }
             ],
             "events": []
           }
@@ -295,8 +292,10 @@
           "events": [],
           "js": {
             "properties": [
-              { "name": "orientation", "value": { "type": "string" } },
-              { "name": "label", "value": { "type": "string" } }
+              { "name": "value" },
+              { "name": "orientation", "type": "string" },
+              { "name": "items", "type": "array" },
+              { "name": "label", "type": "string" }
             ],
             "events": []
           }
@@ -310,7 +309,10 @@
               "name": "inverted",
               "value": { "type": "boolean", "default": "false" }
             },
-            { "name": "selection-mode", "value": { "type": "string" } },
+            {
+              "name": "selection-mode",
+              "value": { "type": "\"single\" | \"multiple\" | \"none\"" }
+            },
             {
               "name": "heading-level",
               "value": { "type": "number", "default": "2" }
@@ -329,10 +331,14 @@
           "events": [],
           "js": {
             "properties": [
-              { "name": "inverted", "value": { "type": "boolean" } },
-              { "name": "selection-mode", "value": { "type": "string" } },
-              { "name": "heading-level", "value": { "type": "number" } },
-              { "name": "label", "value": { "type": "string" } }
+              { "name": "value" },
+              { "name": "inverted", "type": "boolean" },
+              { "name": "headingLevel", "type": "number" },
+              { "name": "label", "type": "string" },
+              {
+                "name": "selectionMode",
+                "type": "\"single\" | \"multiple\" | \"none\""
+              }
             ],
             "events": []
           }
@@ -342,7 +348,6 @@
           "description": "\n---\n\n\n### **Slots:**\n - _default_ - The content of the chip",
           "doc-url": "",
           "attributes": [
-            { "name": "", "value": { "type": "string" } },
             {
               "name": "size",
               "description": "The size of the chip",
@@ -355,22 +360,19 @@
             {
               "name": "inverted",
               "value": { "type": "boolean", "default": "false" }
-            },
-            { "name": "label", "value": { "type": "string" } }
+            }
           ],
           "slots": [{ "name": "", "description": "The content of the chip" }],
           "events": [],
           "js": {
             "properties": [
-              { "name": "", "value": {} },
+              { "name": "inverted", "type": "boolean" },
               {
                 "name": "size",
                 "description": "The size of the chip",
-                "value": { "type": "keyof typeof SIZES" }
+                "type": "keyof typeof SIZES"
               },
-              { "name": "href", "value": { "type": "string" } },
-              { "name": "inverted", "value": { "type": "boolean" } },
-              { "name": "label", "value": { "type": "string" } }
+              { "name": "href", "type": "string" }
             ],
             "events": []
           }
@@ -380,12 +382,10 @@
           "description": "\n---\n\n\n### **Events:**\n - **remove** - Dispatched when the user clicks on the chip\n\n### **Slots:**\n - _default_ - The content of the chip",
           "doc-url": "",
           "attributes": [
-            { "name": "", "value": { "type": "string" } },
             {
               "name": "inverted",
               "value": { "type": "boolean", "default": "false" }
-            },
-            { "name": "label", "value": { "type": "string" } }
+            }
           ],
           "slots": [{ "name": "", "description": "The content of the chip" }],
           "events": [
@@ -395,11 +395,7 @@
             }
           ],
           "js": {
-            "properties": [
-              { "name": "", "value": {} },
-              { "name": "inverted", "value": { "type": "boolean" } },
-              { "name": "label", "value": { "type": "string" } }
-            ],
+            "properties": [{ "name": "inverted", "type": "boolean" }],
             "events": [
               {
                 "name": "remove",
@@ -410,21 +406,17 @@
         },
         {
           "name": "leu-chip-selectable",
-          "description": "A chip component that can be selected.\n---\n\n\n### **Events:**\n - **input** - undefined\n\n### **Slots:**\n - _default_ - The content of the chip",
+          "description": "A chip component that can be selected.\n---\n\n\n### **Events:**\n - **input**\n\n### **Slots:**\n - _default_ - The content of the chip",
           "doc-url": "",
           "attributes": [
-            { "name": "", "value": { "type": "string" } },
             {
               "name": "size",
               "description": "The size of the chip. Not supported for radio variant.",
-              "value": {
-                "type": "keyof typeof SIZES",
-                "default": "\"regular\""
-              }
+              "value": { "type": "keyof typeof SIZES" }
             },
             {
               "name": "variant",
-              "description": "The variant of the chip. Has an effect not only on the visual appearance but also on the behavior.\n- `toggle`: The chip behaves like a toggle button.\n- `radio`: The chip behaves like a radio button.",
+              "description": "`toggle` or `radio`. Determines if only one or multiple chips can be selected.",
               "value": {
                 "type": "keyof typeof VARIANTS",
                 "default": "\"toggle\""
@@ -438,30 +430,27 @@
             {
               "name": "inverted",
               "value": { "type": "boolean", "default": "false" }
-            },
-            { "name": "label", "value": { "type": "string" } }
+            }
           ],
           "slots": [{ "name": "", "description": "The content of the chip" }],
-          "events": [{ "name": "input" }],
+          "events": [{ "name": "input", "type": "CustomEvent" }],
           "js": {
             "properties": [
-              { "name": "", "value": {} },
               {
                 "name": "size",
                 "description": "The size of the chip. Not supported for radio variant.",
-                "value": { "type": "keyof typeof SIZES" }
+                "type": "keyof typeof SIZES"
               },
               {
                 "name": "variant",
                 "description": "The variant of the chip. Has an effect not only on the visual appearance but also on the behavior.\n- `toggle`: The chip behaves like a toggle button.\n- `radio`: The chip behaves like a radio button.",
-                "value": { "type": "keyof typeof VARIANTS" }
+                "type": "keyof typeof VARIANTS"
               },
-              { "name": "selected", "value": { "type": "boolean" } },
-              { "name": "value", "value": { "type": "string" } },
-              { "name": "inverted", "value": { "type": "boolean" } },
-              { "name": "label", "value": { "type": "string" } }
+              { "name": "selected", "type": "boolean" },
+              { "name": "value", "type": "string" },
+              { "name": "inverted", "type": "boolean" }
             ],
-            "events": [{ "name": "input" }]
+            "events": [{ "name": "input", "type": "CustomEvent" }]
           }
         },
         {
@@ -481,15 +470,46 @@
           "events": [],
           "js": {
             "properties": [
-              { "name": "label", "value": { "type": "string" } },
-              { "name": "expanded", "value": { "type": "boolean" } }
+              { "name": "hasSlotController" },
+              { "name": "_documentClickHandler" },
+              { "name": "_menuItemClickHandler" },
+              {
+                "name": "_keyDownMenuHandler",
+                "description": "Close the dropdown when the user presses the Escape or the Tab key.\nNavigating the menu with the arrow keys is handled by the menu itself."
+              },
+              { "name": "label", "type": "string" },
+              { "name": "expanded", "type": "boolean" },
+              { "name": "_toggleRef", "type": "Ref<HTMLButtonElement>" }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "leu-icon",
+          "description": "A component to render all defined zhWeb icons.\nThe `fill` of the icon is set to `currentColor` and\ncan be overriden by setting the css `color` property.\nIf the icon name is not found, a placeholder will be displayed.\n---\n\n\n### **CSS Properties:**\n - **--leu-icon-size** - The size of the icon. _(default: undefined)_",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "name",
+              "description": "The name of the icon to display.",
+              "value": { "type": "IconPathName", "default": "\"\"" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "name",
+                "description": "The name of the icon to display.",
+                "type": "IconPathName | \"\""
+              }
             ],
             "events": []
           }
         },
         {
           "name": "leu-input",
-          "description": "A text input element.\n---\n\n\n### **Events:**\n - **input** - Dispatched when the value of the input element changes.\n- **change** - Dispatched when the value of the input element changes and the input element loses focus.\n\n### **Methods:**\n - **getValidationMessages(): _Object_** - Merge custom and default validation messages.\nA validation message can be a function or a string.\nIf it s a function, the function is called with the corresponding\nattribute value as argument.\ne.g.\n`tooLong(this.maxlength)`\nThis way the framework user can create reasonable validation messages\n- **renderErrorMessages(validityState: _ValidityState_, validationMessages: _Object_, idRef: _String_): __** - Creates an error list with an item for the given validity state.",
+          "description": "A text input element.\n---\n\n\n### **Events:**\n - **input** - Dispatched when the value of the input element changes.\n- **change** - Dispatched when the value of the input element changes and the input element loses focus.\n\n### **Methods:**\n - **getValidationMessages(): _Object_** - Merge custom and default validation messages.\nA validation message can be a function or a string.\nIf it s a function, the function is called with the corresponding\nattribute value as argument.\ne.g.\n`tooLong(this.maxlength)`\nThis way the framework user can create reasonable validation messages\n- **renderErrorMessages(): _TemplateResult | nothing_** - Creates an error list with an item for the given validity state.",
           "doc-url": "",
           "attributes": [
             {
@@ -540,7 +560,7 @@
             {
               "name": "size",
               "description": "The size of the input element.",
-              "value": { "type": "string" }
+              "value": { "type": "string", "default": "\"regular\"" }
             },
             {
               "name": "icon",
@@ -600,10 +620,12 @@
           "events": [
             {
               "name": "input",
+              "type": "CustomEvent",
               "description": "Dispatched when the value of the input element changes."
             },
             {
               "name": "change",
+              "type": "CustomEvent",
               "description": "Dispatched when the value of the input element changes and the input element loses focus."
             }
           ],
@@ -612,112 +634,114 @@
               {
                 "name": "disabled",
                 "description": "Disables the input element.",
-                "value": { "type": "boolean" }
+                "type": "boolean"
               },
               {
                 "name": "required",
                 "description": "Marks the input element as required.",
-                "value": { "type": "boolean" }
+                "type": "boolean"
               },
               {
                 "name": "clearable",
                 "description": "Adds a button to clear the input element.",
-                "value": { "type": "boolean" }
+                "type": "boolean"
+              },
+              {
+                "name": "size",
+                "description": "The size of the input element.",
+                "type": "\"small\" | \"regular\""
+              },
+              {
+                "name": "type",
+                "description": "The type of the input element.",
+                "type": "string"
+              },
+              { "name": "_validity", "type": "null" },
+              {
+                "name": "validationMessages",
+                "description": "Custom validation messages. The key is the name of the validity state and the value is the message.",
+                "type": "object"
+              },
+              {
+                "name": "novalidate",
+                "description": "Disables the browser's validation.",
+                "type": "boolean"
               },
               {
                 "name": "value",
                 "description": "The value of the input element.",
-                "value": { "type": "string" }
+                "type": "string"
               },
               {
                 "name": "name",
                 "description": "The name of the input element.",
-                "value": { "type": "string" }
+                "type": "string"
+              },
+              {
+                "name": "label",
+                "description": "The label of the input element.",
+                "type": "string"
               },
               {
                 "name": "error",
                 "description": "A custom error that is completely independent of the validity state. Useful for displaying server side errors.",
-                "value": { "type": "string" }
+                "type": "string"
               },
               {
-                "name": "label",
-                "description": "The label of the input element.",
-                "value": { "type": "string" }
+                "name": "icon",
+                "description": "The icon that is displayed at the end of the input element.",
+                "type": "string"
               },
               {
                 "name": "prefix",
                 "description": "A prefix that relates to the value of the input (e.g. CHF).",
-                "value": { "type": "string" }
+                "type": "string"
               },
               {
                 "name": "suffix",
                 "description": "A suffix that relates to the value of the input (e.g. mm).",
-                "value": { "type": "string" }
-              },
-              {
-                "name": "size",
-                "description": "The size of the input element.",
-                "value": { "type": "string" }
-              },
-              {
-                "name": "icon",
-                "description": "The icon that is displayed at the end of the input element.",
-                "value": { "type": "string" }
+                "type": "string"
               },
               {
                 "name": "pattern",
                 "description": "A regular expression that the value is checked against.",
-                "value": { "type": "string" }
-              },
-              {
-                "name": "type",
-                "description": "The type of the input element.",
-                "value": { "type": "string" }
+                "type": "string"
               },
               {
                 "name": "min",
                 "description": "The minimum value of the input element.",
-                "value": { "type": "string" }
+                "type": "string"
               },
               {
                 "name": "max",
                 "description": "The maximum value of the input element.",
-                "value": { "type": "string" }
-              },
-              {
-                "name": "maxlength",
-                "description": "The maximum length of the input element.",
-                "value": { "type": "string" }
+                "type": "string"
               },
               {
                 "name": "minlength",
                 "description": "The minimum length of the input element.",
-                "value": { "type": "string" }
-              },
-              {
-                "name": "validationMessages",
-                "description": "Custom validation messages. The key is the name of the validity state and the value is the message.",
-                "value": { "type": "object" }
+                "type": "string"
               },
               {
-                "name": "novalidate",
-                "description": "Disables the browser's validation.",
-                "value": { "type": "boolean" }
+                "name": "maxlength",
+                "description": "The maximum length of the input element.",
+                "type": "string"
               },
               {
                 "name": "step",
                 "description": "The step value of the input element.",
-                "value": { "type": "string" }
-              },
-              { "name": "_validity", "value": { "type": "null" } }
+                "type": "string"
+              }
             ],
             "events": [
               {
                 "name": "input",
+                "type": "CustomEvent",
                 "description": "Dispatched when the value of the input element changes."
               },
               {
                 "name": "change",
+                "type": "CustomEvent",
                 "description": "Dispatched when the value of the input element changes and the input element loses focus."
               }
             ]
@@ -727,40 +751,61 @@
           "name": "leu-menu",
           "description": "\n---\n",
           "doc-url": "",
-          "attributes": [],
+          "attributes": [
+            {
+              "name": "selects",
+              "description": "This has only an effect when the role is 'menu'. It defines which role the menu items will get. Default is 'none'.",
+              "value": { "type": "SelectsType", "default": "\"none\"" }
+            }
+          ],
           "events": [],
-          "js": { "properties": [], "events": [] }
+          "js": {
+            "properties": [
+              {
+                "name": "selects",
+                "description": "This has only an effect when the role is 'menu'. It defines which role the menu items will get. Default is 'none'.",
+                "type": "SelectsType"
+              },
+              { "name": "value" }
+            ],
+            "events": []
+          }
         },
         {
           "name": "leu-menu-item",
-          "description": "\n---\n\n\n### **Slots:**\n - _default_ - The label of the menu item",
+          "description": "\n---\n\n\n### **Methods:**\n - **getValue(): _string_** - Returns the value of the item. If `value` is not set, it will return the inner text\n\n### **Slots:**\n - _default_ - The label of the menu item",
           "doc-url": "",
           "attributes": [
             {
-              "name": "before",
-              "description": "Can be either an icon name or a text\nIf no icon with this value is found, it will be displayed as text.\nIf the value is \"EMPTY\", an empty placeholder with the size of an icon will be displayed.",
-              "value": { "type": "string" }
+              "name": "active",
+              "description": "Defines if the item is selected or checked",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "after",
-              "description": "Can be either an icon name or a text\nIf no icon with this value is found, it will be displayed as text\nIf the value is \"EMPTY\", an empty placeholder with the size of an icon will be displayed.",
-              "value": { "type": "string" }
+              "name": "disabled",
+              "description": "Disables the underlying button or link",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "active",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "tabbable",
+              "description": "If the item should be focusable. Will be reflected as `tabindex` to the underlying button or link",
+              "value": { "type": "boolean", "default": "undefined" }
             },
             {
-              "name": "highlighted",
-              "description": "A programmatic way to highlight the menu item like it is hovered.\nThis is just a visual effect and does not change the active state.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "href",
+              "description": "The href of the underlying link",
+              "value": { "type": "string", "default": "undefined" }
             },
             {
-              "name": "disabled",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "value",
+              "description": "The value of the item. It must not contain commas. See `getValue()`",
+              "value": { "type": "string", "default": "undefined" }
             },
-            { "name": "label", "value": { "type": "string" } },
-            { "name": "href", "value": { "type": "string" } }
+            {
+              "name": "componentRole",
+              "description": "The role of the item. This will be reflected as `role` to the underlying button or link. Default is `'menuitem'.`",
+              "value": { "type": "MenuItemRole", "default": "\"menuitem\"" }
+            }
           ],
           "slots": [
             { "name": "", "description": "The label of the menu item" }
@@ -769,31 +814,42 @@
           "js": {
             "properties": [
               {
-                "name": "before",
-                "description": "Can be either an icon name or a text\nIf no icon with this value is found, it will be displayed as text.\nIf the value is \"EMPTY\", an empty placeholder with the size of an icon will be displayed.",
-                "value": { "type": "string" }
+                "name": "active",
+                "description": "Defines if the item is selected or checked",
+                "type": "boolean"
+              },
+              {
+                "name": "disabled",
+                "description": "Disables the underlying button or link",
+                "type": "boolean"
+              },
+              {
+                "name": "value",
+                "description": "The value of the item. It must not contain commas. See `getValue()`",
+                "type": "string"
               },
               {
-                "name": "after",
-                "description": "Can be either an icon name or a text\nIf no icon with this value is found, it will be displayed as text\nIf the value is \"EMPTY\", an empty placeholder with the size of an icon will be displayed.",
-                "value": { "type": "string" }
+                "name": "href",
+                "description": "The href of the underlying link",
+                "type": "string"
               },
-              { "name": "active", "value": { "type": "boolean" } },
               {
-                "name": "highlighted",
-                "description": "A programmatic way to highlight the menu item like it is hovered.\nThis is just a visual effect and does not change the active state.",
-                "value": { "type": "boolean" }
+                "name": "tabbable",
+                "description": "If the item should be focusable. Will be reflected as `tabindex` to the underlying button or link",
+                "type": "boolean"
               },
-              { "name": "disabled", "value": { "type": "boolean" } },
-              { "name": "label", "value": { "type": "string" } },
-              { "name": "href", "value": { "type": "string" } }
+              {
+                "name": "componentRole",
+                "description": "The role of the item. This will be reflected as `role` to the underlying button or link. Default is `'menuitem'.`",
+                "type": "MenuItemRole"
+              }
             ],
             "events": []
           }
         },
         {
           "name": "leu-pagination",
-          "description": "\n---\n\n\n### **Events:**\n - **leu:pagechange** - undefined",
+          "description": "\n---\n\n\n### **Events:**\n - **leu:pagechange**",
           "doc-url": "",
           "attributes": [
             { "name": "defaultPage", "value": { "type": "number" } },
@@ -805,25 +861,25 @@
               "name": "numOfItems",
               "value": { "type": "Number", "default": "1" }
             },
-            {
-              "name": "_page",
-              "description": "Internal page state that contains an\nalready clamped page number. Should only\nbe accessed through the `page` getter and\nsetter.",
-              "value": { "type": "Number", "default": "1" }
-            }
+            { "name": "_page", "value": { "type": "string" } }
           ],
-          "events": [{ "name": "leu:pagechange" }],
+          "events": [{ "name": "leu:pagechange", "type": "CustomEvent" }],
           "js": {
             "properties": [
-              { "name": "defaultPage", "value": { "type": "number" } },
-              { "name": "itemsPerPage", "value": { "type": "Number" } },
-              { "name": "numOfItems", "value": { "type": "Number" } },
+              { "name": "page" },
+              { "name": "startIndex" },
+              { "name": "endIndex" },
+              { "name": "_maxPage" },
+              { "name": "numOfItems", "type": "Number" },
+              { "name": "itemsPerPage", "type": "Number" },
+              { "name": "defaultPage", "type": "number" },
               {
                 "name": "_page",
                 "description": "Internal page state that contains an\nalready clamped page number. Should only\nbe accessed through the `page` getter and\nsetter.",
-                "value": { "type": "Number" }
+                "type": "Number"
               }
             ],
-            "events": [{ "name": "leu:pagechange" }]
+            "events": [{ "name": "leu:pagechange", "type": "CustomEvent" }]
           }
         },
         {
@@ -831,14 +887,21 @@
           "description": "\n---\n",
           "doc-url": "",
           "attributes": [
-            { "name": "anchor", "value": { "type": "string" } },
-            { "name": "active", "value": { "type": "boolean" } },
             {
-              "name": "placement",
+              "name": "anchor",
               "value": {
-                "type": "\"top\"|\"top-start\"|\"top-end\"|\"bottom\"|\"bottom-start\"|\"bottom-end\"|\"left\"|\"left-start\"|\"left-end\"|\"right\"|\"right-start\"|\"right-end\""
+                "type": "string | HTMLElement",
+                "default": "undefined"
               }
             },
+            {
+              "name": "active",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "placement",
+              "value": { "type": "Placement", "default": "undefined" }
+            },
             {
               "name": "flip",
               "value": { "type": "boolean", "default": "false" }
@@ -847,40 +910,50 @@
               "name": "shift",
               "value": { "type": "boolean", "default": "false" }
             },
-            { "name": "shiftPadding", "value": { "type": "number" } },
+            {
+              "name": "shiftPadding",
+              "value": { "type": "number", "default": "0" }
+            },
             {
               "name": "matchSize",
-              "value": { "type": "\"width\" | \"height\" | \"both\"" }
+              "value": {
+                "type": "\"width\" | \"height\" | \"both\"",
+                "default": "undefined"
+              }
             },
             {
               "name": "autoSize",
-              "value": { "type": "\"width\" | \"height\" | \"both\"" }
+              "value": {
+                "type": "\"width\" | \"height\" | \"both\"",
+                "default": "undefined"
+              }
             },
-            { "name": "autoSizePadding", "value": { "type": "number" } }
+            {
+              "name": "autoSizePadding",
+              "value": { "type": "number", "default": "0" }
+            }
           ],
           "events": [],
           "js": {
             "properties": [
-              { "name": "anchor", "value": {} },
-              { "name": "active", "value": { "type": "boolean" } },
-              {
-                "name": "placement",
-                "value": {
-                  "type": "\"top\"|\"top-start\"|\"top-end\"|\"bottom\"|\"bottom-start\"|\"bottom-end\"|\"left\"|\"left-start\"|\"left-end\"|\"right\"|\"right-start\"|\"right-end\""
-                }
-              },
-              { "name": "flip", "value": { "type": "boolean" } },
-              { "name": "shift", "value": { "type": "boolean" } },
-              { "name": "shiftPadding", "value": { "type": "number" } },
+              { "name": "popupEl" },
+              { "name": "anchorEl", "type": "null" },
+              { "name": "cleanup" },
+              { "name": "flip", "type": "boolean" },
+              { "name": "shift", "type": "boolean" },
+              { "name": "active", "type": "boolean" },
+              { "name": "placement", "type": "Placement" },
               {
                 "name": "matchSize",
-                "value": { "type": "\"width\" | \"height\" | \"both\"" }
+                "type": "\"width\" | \"height\" | \"both\""
               },
               {
                 "name": "autoSize",
-                "value": { "type": "\"width\" | \"height\" | \"both\"" }
+                "type": "\"width\" | \"height\" | \"both\""
               },
-              { "name": "autoSizePadding", "value": { "type": "number" } }
+              { "name": "shiftPadding", "type": "number" },
+              { "name": "autoSizePadding", "type": "number" },
+              { "name": "anchor", "type": "string | HTMLElement" }
             ],
             "events": []
           }
@@ -898,20 +971,19 @@
               "name": "disabled",
               "value": { "type": "boolean", "default": "false" }
             },
-            { "name": "identifier", "value": { "type": "string" } },
-            { "name": "value", "value": { "type": "string" } },
-            { "name": "name", "value": { "type": "string" } },
-            { "name": "label", "value": { "type": "string" } }
+            {
+              "name": "value",
+              "value": { "type": "string", "default": "\"\"" }
+            },
+            { "name": "name", "value": { "type": "string", "default": "\"\"" } }
           ],
           "events": [],
           "js": {
             "properties": [
-              { "name": "checked", "value": { "type": "boolean" } },
-              { "name": "disabled", "value": { "type": "boolean" } },
-              { "name": "identifier", "value": { "type": "string" } },
-              { "name": "value", "value": { "type": "string" } },
-              { "name": "name", "value": { "type": "string" } },
-              { "name": "label", "value": { "type": "string" } }
+              { "name": "checked", "type": "boolean" },
+              { "name": "disabled", "type": "boolean" },
+              { "name": "name", "type": "string" },
+              { "name": "value", "type": "string" }
             ],
             "events": []
           }
@@ -930,8 +1002,14 @@
           "events": [],
           "js": {
             "properties": [
-              { "name": "orientation", "value": { "type": "string" } },
-              { "name": "label", "value": { "type": "string" } }
+              { "name": "value" },
+              { "name": "handleFocusIn" },
+              { "name": "handleKeyDown" },
+              { "name": "handleInput" },
+              { "name": "orientation", "type": "string" },
+              { "name": "_currentIndex", "type": "number" },
+              { "name": "items", "type": "array" },
+              { "name": "label", "type": "string" }
             ],
             "events": []
           }
@@ -945,45 +1023,61 @@
           ],
           "events": [],
           "js": {
-            "properties": [{ "name": "_showButton", "value": {} }],
+            "properties": [
+              { "name": "scroll" },
+              { "name": "_showButton", "type": "boolean" }
+            ],
             "events": []
           }
         },
         {
           "name": "leu-select",
-          "description": "\n---\n\n\n### **Methods:**\n - **selectOption(option: _*_)** - Adds or replaces the given option in the options array.\n\n### **Slots:**\n - **before** - Optional content the appears before the option list\n- **after** - Optional content the appears after the option list",
+          "description": "\n---\n\n\n### **Methods:**\n - **_updateMenuItems(changed)** - Apply the current state to the menu items.\n- Set the active property when the value property has changed.\n- Hide menu items that do not match the filter.\n- **_getDisplayValue(): _String | nothing_** - Determines the value or label that should be displayed inside the toggle button.\n- **_isSelected(menuItemValue: _String_): _Boolean_** - Checks if the given value is selected.\n- **_handlePopupFocusOut(event)** - Close the dropdown if the focus moves outside the component.\n\n### **Slots:**\n - **before** - Optional content the appears before the option list\n- **after** - Optional content the appears after the option list",
           "doc-url": "",
           "attributes": [
+            {
+              "name": "value",
+              "description": "List of selected values. If they're set from outside the component, the select element tries to find all the options with the given values and selects them.",
+              "value": { "type": "array", "default": "[]" }
+            },
+            {
+              "name": "name",
+              "description": "Reflects to the name attribute of the hidden input field that would be used in a form",
+              "value": { "type": "string", "default": "\"\"" }
+            },
             {
               "name": "open",
+              "description": "The expanded state of the popup",
               "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "label",
+              "description": "The label of the select",
               "value": { "type": "string", "default": "\"\"" }
             },
-            {
-              "name": "options",
-              "value": { "type": "array", "default": "[]" }
-            },
-            { "name": "value", "value": { "type": "array", "default": "[]" } },
             {
               "name": "clearable",
+              "description": "Show a clearable button to reset the value",
               "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "disabled",
+              "description": "If the select should be disabled",
               "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "filterable",
+              "description": "Show an input field to filter the options inside the popup",
               "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "multiple",
+              "description": "Allow multiple selections",
               "value": { "type": "boolean", "default": "false" }
             },
-            { "name": "optionFilter", "value": { "type": "string" } }
+            { "name": "_optionFilter", "value": { "type": "string" } },
+            { "name": "_hasFilterResults", "value": { "type": "string" } },
+            { "name": "_displayValue", "value": { "type": "string" } }
           ],
           "slots": [
             {
@@ -998,15 +1092,52 @@
           "events": [],
           "js": {
             "properties": [
-              { "name": "open", "value": { "type": "boolean" } },
-              { "name": "label", "value": { "type": "string" } },
-              { "name": "options", "value": { "type": "array" } },
-              { "name": "value", "value": { "type": "array" } },
-              { "name": "clearable", "value": { "type": "boolean" } },
-              { "name": "disabled", "value": { "type": "boolean" } },
-              { "name": "filterable", "value": { "type": "boolean" } },
-              { "name": "multiple", "value": { "type": "boolean" } },
-              { "name": "optionFilter", "value": {} }
+              {
+                "name": "open",
+                "description": "The expanded state of the popup",
+                "type": "boolean"
+              },
+              {
+                "name": "disabled",
+                "description": "If the select should be disabled",
+                "type": "boolean"
+              },
+              {
+                "name": "multiple",
+                "description": "Allow multiple selections",
+                "type": "boolean"
+              },
+              {
+                "name": "clearable",
+                "description": "Show a clearable button to reset the value",
+                "type": "boolean"
+              },
+              {
+                "name": "filterable",
+                "description": "Show an input field to filter the options inside the popup",
+                "type": "boolean"
+              },
+              {
+                "name": "value",
+                "description": "List of selected values. If they're set from outside the component, the select element tries to find all the options with the given values and selects them.",
+                "type": "array"
+              },
+              {
+                "name": "label",
+                "description": "The label of the select",
+                "type": "string"
+              },
+              {
+                "name": "name",
+                "description": "Reflects to the name attribute of the hidden input field that would be used in a form",
+                "type": "string"
+              },
+              { "name": "_optionFilterRef", "type": "Ref<LeuInput>" },
+              { "name": "_toggleButtonRef", "type": "Ref<HTMLButtonElement>" },
+              { "name": "_menuRef", "type": "Ref<LeuMenu>" },
+              { "name": "_optionFilter", "type": "string" },
+              { "name": "_hasFilterResults", "type": "boolean" },
+              { "name": "_displayValue", "type": "string" }
             ],
             "events": []
           }
@@ -1048,16 +1179,20 @@
           "events": [],
           "js": {
             "properties": [
-              { "name": "columns", "value": { "type": "array" } },
-              { "name": "data", "value": { "type": "array" } },
-              { "name": "firstColumnSticky", "value": { "type": "boolean" } },
-              { "name": "itemsPerPage", "value": { "type": "number" } },
-              { "name": "sortIndex", "value": { "type": "number" } },
-              { "name": "sortOrderAsc", "value": { "type": "boolean" } },
-              { "name": "width", "value": { "type": "number" } },
-              { "name": "_shadowLeft", "value": {} },
-              { "name": "_shadowRight", "value": {} },
-              { "name": "_page", "value": {} }
+              { "name": "_columns" },
+              { "name": "_sortedData" },
+              { "name": "_data" },
+              { "name": "columns", "type": "array" },
+              { "name": "data", "type": "array" },
+              { "name": "firstColumnSticky", "type": "boolean" },
+              { "name": "itemsPerPage", "type": "number" },
+              { "name": "sortIndex", "type": "number" },
+              { "name": "sortOrderAsc", "type": "boolean" },
+              { "name": "width", "type": "number" },
+              { "name": "_resizeObserver" },
+              { "name": "_shadowLeft", "type": "boolean" },
+              { "name": "_shadowRight", "type": "boolean" },
+              { "name": "_page", "type": "number" }
             ],
             "events": []
           }