@statistikzh/leu 0.13.1 → 0.14.1

package/dist/theme.css

@@ -55,25 +55,6 @@
   --leu-box-shadow-long: 0px 0px 80px var(--leu-color-black-transp-20);
 
   --leu-z-index-popup: 100;
-  --leu-t-font-feature-settings: "ss07", "ss08", "cv03", "cv04", "cv10";
-
-  /*
-   * Grid system
-   *
-   * The design system uses a 6 columns system on smaller screens.
-   * For simplicity we use a 12 column grid for all breakpoints (zh web implementation does the same).
-   *
-   * The goal is to keep the css footprint small
-   * by not generating all classes for every cell width for every breakpoint.
-   * Most components don't need a grid and those who do probably have a very simple configuration.
-   * If we have enough use cases for a more complex grid system we can add it later.
-   */
-  --leu-grid-gap: 1rem;
-  --leu-grid-template-columns: repeat(12, minmax(0, 4.25rem));
-  --leu-grid-max-width: 73rem;
-
-  --leu-grid-columns-full: 1 / -1;
-  --leu-grid-columns-offset: 1 / -1;
 
   --leu-t-tiny-regular-font-size: 0.75rem;
 
@@ -226,94 +207,6 @@
   --leu-t-curve-tiny-regular-spacing:  var(--leu-t-tiny-regular-spacing);
 
   --leu-t-curve-tiny-regular-font:  var(--leu-t-tiny-regular-font);
-
-  --leu-t-curve-tiny-black-font-size:  var(--leu-t-tiny-black-font-size);
-
-  --leu-t-curve-tiny-black-line-height:  var(--leu-t-tiny-black-line-height);
-
-  --leu-t-curve-tiny-black-spacing:  var(--leu-t-tiny-black-spacing);
-
-  --leu-t-curve-tiny-black-font:  var(--leu-t-tiny-black-font);
-
-  --leu-t-curve-small-regular-font-size:  var(--leu-t-small-regular-font-size);
-
-  --leu-t-curve-small-regular-line-height:  var(--leu-t-small-regular-line-height);
-
-  --leu-t-curve-small-regular-spacing:  var(--leu-t-small-regular-spacing);
-
-  --leu-t-curve-small-regular-font:  var(--leu-t-small-regular-font);
-
-  --leu-t-curve-small-black-font-size:  var(--leu-t-small-black-font-size);
-
-  --leu-t-curve-small-black-line-height:  var(--leu-t-small-black-line-height);
-
-  --leu-t-curve-small-black-spacing:  var(--leu-t-small-black-spacing);
-
-  --leu-t-curve-small-black-font:  var(--leu-t-small-black-font);
-
-  --leu-t-curve-regular-regular-font-size:  var(--leu-t-regular-regular-font-size);
-
-  --leu-t-curve-regular-regular-line-height:  var(--leu-t-regular-regular-line-height);
-
-  --leu-t-curve-regular-regular-spacing:  var(--leu-t-regular-regular-spacing);
-
-  --leu-t-curve-regular-regular-font:  var(--leu-t-regular-regular-font);
-
-  --leu-t-curve-regular-black-font-size:  var(--leu-t-regular-black-font-size);
-
-  --leu-t-curve-regular-black-line-height:  var(--leu-t-regular-black-line-height);
-
-  --leu-t-curve-regular-black-spacing:  var(--leu-t-regular-black-spacing);
-
-  --leu-t-curve-regular-black-font:  var(--leu-t-regular-black-font);
-
-  --leu-t-curve-bigger-regular-regular-font-size:  var(--leu-t-bigger-regular-regular-font-size);
-
-  --leu-t-curve-bigger-regular-regular-line-height:  var(--leu-t-bigger-regular-regular-line-height);
-
-  --leu-t-curve-bigger-regular-regular-spacing:  var(--leu-t-bigger-regular-regular-spacing);
-
-  --leu-t-curve-bigger-regular-regular-font:  var(--leu-t-bigger-regular-regular-font);
-
-  --leu-t-curve-bigger-regular-black-font-size:  var(--leu-t-bigger-regular-black-font-size);
-
-  --leu-t-curve-bigger-regular-black-line-height:  var(--leu-t-bigger-regular-black-line-height);
-
-  --leu-t-curve-bigger-regular-black-spacing:  var(--leu-t-bigger-regular-black-spacing);
-
-  --leu-t-curve-bigger-regular-black-font:  var(--leu-t-bigger-regular-black-font);
-
-  --leu-t-curve-medium-black-font-size:  var(--leu-t-bigger-regular-black-font-size);
-
-  --leu-t-curve-medium-black-line-height:  var(--leu-t-bigger-regular-black-line-height);
-
-  --leu-t-curve-medium-black-spacing:  var(--leu-t-bigger-regular-black-spacing);
-
-  --leu-t-curve-medium-black-font:  var(--leu-t-bigger-regular-black-font);
-
-  --leu-t-curve-large-black-font-size:  var(--leu-t-bigger-regular-black-font-size);
-
-  --leu-t-curve-large-black-line-height:  var(--leu-t-bigger-regular-black-line-height);
-
-  --leu-t-curve-large-black-spacing:  var(--leu-t-bigger-regular-black-spacing);
-
-  --leu-t-curve-large-black-font:  var(--leu-t-bigger-regular-black-font);
-
-  --leu-t-curve-big-black-font-size:  var(--leu-t-large-black-font-size);
-
-  --leu-t-curve-big-black-line-height:  var(--leu-t-large-black-line-height);
-
-  --leu-t-curve-big-black-spacing:  var(--leu-t-large-black-spacing);
-
-  --leu-t-curve-big-black-font:  var(--leu-t-large-black-font);
-
-  --leu-t-curve-huge-black-font-size:  var(--leu-t-small-big-black-font-size);
-
-  --leu-t-curve-huge-black-line-height:  var(--leu-t-small-big-black-line-height);
-
-  --leu-t-curve-huge-black-spacing:  var(--leu-t-small-big-black-spacing);
-
-  --leu-t-curve-huge-black-font:  var(--leu-t-small-big-black-font);
 }
 @media (min-width: 600px) {
   :root,
@@ -324,6 +217,17 @@
     --leu-t-curve-tiny-regular-font:  var(--leu-t-small-regular-font);
 }
 }
+:root,
+:host {
+
+  --leu-t-curve-tiny-black-font-size:  var(--leu-t-tiny-black-font-size);
+
+  --leu-t-curve-tiny-black-line-height:  var(--leu-t-tiny-black-line-height);
+
+  --leu-t-curve-tiny-black-spacing:  var(--leu-t-tiny-black-spacing);
+
+  --leu-t-curve-tiny-black-font:  var(--leu-t-tiny-black-font);
+}
 @media (min-width: 600px) {
   :root,
 :host {
@@ -333,6 +237,17 @@
     --leu-t-curve-tiny-black-font:  var(--leu-t-small-black-font);
 }
 }
+:root,
+:host {
+
+  --leu-t-curve-small-regular-font-size:  var(--leu-t-small-regular-font-size);
+
+  --leu-t-curve-small-regular-line-height:  var(--leu-t-small-regular-line-height);
+
+  --leu-t-curve-small-regular-spacing:  var(--leu-t-small-regular-spacing);
+
+  --leu-t-curve-small-regular-font:  var(--leu-t-small-regular-font);
+}
 @media (min-width: 600px) {
   :root,
 :host {
@@ -351,6 +266,17 @@
     --leu-t-curve-small-regular-font:  var(--leu-t-bigger-regular-regular-font);
 }
 }
+:root,
+:host {
+
+  --leu-t-curve-small-black-font-size:  var(--leu-t-small-black-font-size);
+
+  --leu-t-curve-small-black-line-height:  var(--leu-t-small-black-line-height);
+
+  --leu-t-curve-small-black-spacing:  var(--leu-t-small-black-spacing);
+
+  --leu-t-curve-small-black-font:  var(--leu-t-small-black-font);
+}
 @media (min-width: 600px) {
   :root,
 :host {
@@ -369,6 +295,17 @@
     --leu-t-curve-small-black-font:  var(--leu-t-bigger-regular-black-font);
 }
 }
+:root,
+:host {
+
+  --leu-t-curve-regular-regular-font-size:  var(--leu-t-regular-regular-font-size);
+
+  --leu-t-curve-regular-regular-line-height:  var(--leu-t-regular-regular-line-height);
+
+  --leu-t-curve-regular-regular-spacing:  var(--leu-t-regular-regular-spacing);
+
+  --leu-t-curve-regular-regular-font:  var(--leu-t-regular-regular-font);
+}
 @media (min-width: 400px) {
   :root,
 :host {
@@ -387,6 +324,17 @@
     --leu-t-curve-regular-regular-font:  var(--leu-t-medium-regular-font);
 }
 }
+:root,
+:host {
+
+  --leu-t-curve-regular-black-font-size:  var(--leu-t-regular-black-font-size);
+
+  --leu-t-curve-regular-black-line-height:  var(--leu-t-regular-black-line-height);
+
+  --leu-t-curve-regular-black-spacing:  var(--leu-t-regular-black-spacing);
+
+  --leu-t-curve-regular-black-font:  var(--leu-t-regular-black-font);
+}
 @media (min-width: 400px) {
   :root,
 :host {
@@ -405,6 +353,17 @@
     --leu-t-curve-regular-black-font:  var(--leu-t-medium-black-font);
 }
 }
+:root,
+:host {
+
+  --leu-t-curve-bigger-regular-regular-font-size:  var(--leu-t-bigger-regular-regular-font-size);
+
+  --leu-t-curve-bigger-regular-regular-line-height:  var(--leu-t-bigger-regular-regular-line-height);
+
+  --leu-t-curve-bigger-regular-regular-spacing:  var(--leu-t-bigger-regular-regular-spacing);
+
+  --leu-t-curve-bigger-regular-regular-font:  var(--leu-t-bigger-regular-regular-font);
+}
 @media (min-width: 600px) {
   :root,
 :host {
@@ -423,6 +382,17 @@
     --leu-t-curve-bigger-regular-regular-font:  var(--leu-t-large-regular-font);
 }
 }
+:root,
+:host {
+
+  --leu-t-curve-bigger-regular-black-font-size:  var(--leu-t-bigger-regular-black-font-size);
+
+  --leu-t-curve-bigger-regular-black-line-height:  var(--leu-t-bigger-regular-black-line-height);
+
+  --leu-t-curve-bigger-regular-black-spacing:  var(--leu-t-bigger-regular-black-spacing);
+
+  --leu-t-curve-bigger-regular-black-font:  var(--leu-t-bigger-regular-black-font);
+}
 @media (min-width: 600px) {
   :root,
 :host {
@@ -441,6 +411,17 @@
     --leu-t-curve-bigger-regular-black-font:  var(--leu-t-large-black-font);
 }
 }
+:root,
+:host {
+
+  --leu-t-curve-medium-black-font-size:  var(--leu-t-bigger-regular-black-font-size);
+
+  --leu-t-curve-medium-black-line-height:  var(--leu-t-bigger-regular-black-line-height);
+
+  --leu-t-curve-medium-black-spacing:  var(--leu-t-bigger-regular-black-spacing);
+
+  --leu-t-curve-medium-black-font:  var(--leu-t-bigger-regular-black-font);
+}
 @media (min-width: 400px) {
   :root,
 :host {
@@ -468,6 +449,17 @@
     --leu-t-curve-medium-black-font:  var(--leu-t-small-big-black-font);
 }
 }
+:root,
+:host {
+
+  --leu-t-curve-large-black-font-size:  var(--leu-t-bigger-regular-black-font-size);
+
+  --leu-t-curve-large-black-line-height:  var(--leu-t-bigger-regular-black-line-height);
+
+  --leu-t-curve-large-black-spacing:  var(--leu-t-bigger-regular-black-spacing);
+
+  --leu-t-curve-large-black-font:  var(--leu-t-bigger-regular-black-font);
+}
 @media (min-width: 600px) {
   :root,
 :host {
@@ -495,6 +487,17 @@
     --leu-t-curve-large-black-font:  var(--leu-t-big-black-font);
 }
 }
+:root,
+:host {
+
+  --leu-t-curve-big-black-font-size:  var(--leu-t-large-black-font-size);
+
+  --leu-t-curve-big-black-line-height:  var(--leu-t-large-black-line-height);
+
+  --leu-t-curve-big-black-spacing:  var(--leu-t-large-black-spacing);
+
+  --leu-t-curve-big-black-font:  var(--leu-t-large-black-font);
+}
 @media (min-width: 600px) {
   :root,
 :host {
@@ -531,6 +534,17 @@
     --leu-t-curve-big-black-font:  var(--leu-t-small-huge-black-font);
 }
 }
+:root,
+:host {
+
+  --leu-t-curve-huge-black-font-size:  var(--leu-t-small-big-black-font-size);
+
+  --leu-t-curve-huge-black-line-height:  var(--leu-t-small-big-black-line-height);
+
+  --leu-t-curve-huge-black-spacing:  var(--leu-t-small-big-black-spacing);
+
+  --leu-t-curve-huge-black-font:  var(--leu-t-small-big-black-font);
+}
 @media (min-width: 400px) {
   :root,
 :host {
@@ -576,6 +590,28 @@
     --leu-t-curve-huge-black-font:  var(--leu-t-giant-black-font);
 }
 }
+:root,
+:host {
+  --leu-t-font-feature-settings: "ss07", "ss08", "cv03", "cv04", "cv10";
+
+  /*
+   * Grid system
+   *
+   * The design system uses a 6 columns system on smaller screens.
+   * For simplicity we use a 12 column grid for all breakpoints (zh web implementation does the same).
+   *
+   * The goal is to keep the css footprint small
+   * by not generating all classes for every cell width for every breakpoint.
+   * Most components don't need a grid and those who do probably have a very simple configuration.
+   * If we have enough use cases for a more complex grid system we can add it later.
+   */
+  --leu-grid-gap: 1rem;
+  --leu-grid-template-columns: repeat(12, minmax(0, 4.25rem));
+  --leu-grid-max-width: 73rem;
+
+  --leu-grid-columns-full: 1 / -1;
+  --leu-grid-columns-offset: 1 / -1;
+}
 @media (min-width: 600px) {
   :root,
 :host {

package/dist/vscode.html-custom-data.json

@@ -34,32 +34,6 @@
         }
       ]
     },
-    {
-      "name": "leu-breadcrumb",
-      "description": "A Breadcrumb Navigation.\n\nThe breadcrumbs can be displayed in two different layouts.\nOnly the back link (the last item / parent of the current page)\nis displayed when…\n-  … the width of the container is smaller\n     than the BACK_ONLY_BREAKPOINT.\n-  … less then two breadcrumb items could be displayed\n     without overflowing the container.\n\nOtherwise as many items as possible are displayed in an inline list\nwithout overflowing the container. The remaining items are displayed\nin a dropdown menu.\n\nIn order to determine the exact numbers of items that have to be\nhidden inside the dropdown, all of them have to be rendered first.\n1. Render all items\n2. Calculate (measure) the number of items that can be displayed\n   without overflowing the container.\n3. Updating the state (_hiddeItems) which will trigger a rerender\n4. Render the items again with the new state.\n\nThis results in multiple updates scheduled one after another. Lit\nwill also print a waring in the console beacause of that.\nIt's no a nice behaviour but the only one that works without\nhaving duplicate and hidden markup to derive the sizes from that.\n---\n\n\n### **Methods:**\n - **renderDropdown(): __** - Render the dropdown menu",
-      "attributes": [
-        {
-          "name": "items",
-          "description": "Object array with { label, href }",
-          "values": [{ "name": "Array" }]
-        },
-        {
-          "name": "inverted",
-          "description": "invert color on dark background",
-          "values": []
-        },
-        { "name": "_hiddenItems", "values": [] },
-        { "name": "_showBackOnly", "values": [] },
-        { "name": "_isRecalculating", "values": [] },
-        { "name": "_isDropdownOpen", "values": [] }
-      ],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://statistikzh.github.io/leu/?path=/story/breadcrumb"
-        }
-      ]
-    },
     {
       "name": "leu-button",
       "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",
@@ -181,7 +155,6 @@
       "name": "leu-chip-link",
       "description": "\n---\n\n\n### **Slots:**\n - _default_ - The content of the chip",
       "attributes": [
-        { "name": "", "values": [] },
         {
           "name": "size",
           "description": "The size of the chip",
@@ -201,7 +174,6 @@
       "name": "leu-chip-removable",
       "description": "\n---\n\n\n### **Events:**\n - **remove** - Dispatched when the user clicks on the chip\n\n### **Methods:**\n - **getValue(): _string_** - Returns the value of the chip. If `value` is not set, it will return the text content\n\n### **Slots:**\n - _default_ - The content of the chip",
       "attributes": [
-        { "name": "", "values": [] },
         {
           "name": "value",
           "description": "The value of the chip.",
@@ -218,9 +190,8 @@
     },
     {
       "name": "leu-chip-selectable",
-      "description": "A chip component that can be selected.\n---\n\n\n### **Events:**\n - **input** - undefined\n\n### **Methods:**\n - **getValue(): _string_** - Returns the value of the chip. If `value` is not set, it will return the text content\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### **Methods:**\n - **getValue(): _string_** - Returns the value of the chip. If `value` is not set, it will return the text content\n\n### **Slots:**\n - _default_ - The content of the chip",
       "attributes": [
-        { "name": "", "values": [] },
         {
           "name": "size",
           "description": "The size of the chip. Not supported for radio variant.",
@@ -298,7 +269,7 @@
     },
     {
       "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(): _TemplateResult | nothing_** - 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- **checkValidity(): _boolean_** - Check input validation\n- **renderErrorMessages(): _TemplateResult | nothing_** - Creates an error list with an item for the given validity state.",
       "attributes": [
         {
           "name": "disabled",
@@ -475,7 +446,7 @@
     },
     {
       "name": "leu-pagination",
-      "description": "\n---\n\n\n### **Events:**\n - **leu:pagechange** - undefined",
+      "description": "\n---\n\n\n### **Events:**\n - **leu:pagechange**",
       "attributes": [
         { "name": "defaultPage", "values": [] },
         { "name": "itemsPerPage", "values": [{ "name": "Number" }] },
@@ -590,7 +561,7 @@
     },
     {
       "name": "leu-select",
-      "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",
+      "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\n### **Slots:**\n - **before** - Optional content the appears before the option list\n- **after** - Optional content the appears after the option list",
       "attributes": [
         {
           "name": "value",

package/dist/vue/index.d.ts

@@ -1,7 +1,6 @@
 import type { DefineComponent } from "vue";
 
 import type { LeuAccordion } from "../Accordion.js";
-import type { LeuBreadcrumb } from "../Breadcrumb.js";
 import type { LeuButton } from "../Button.js";
 import type { LeuButtonGroup, CustomEvent } from "../ButtonGroup.js";
 import type { LeuCheckbox } from "../Checkbox.js";
@@ -38,27 +37,6 @@ type LeuAccordionProps = {
   label?: LeuAccordion["label"];
 };
 
-type LeuBreadcrumbProps = {
-  /** Object array with { label, href } */
-  items?: LeuBreadcrumb["items"];
-  /** invert color on dark background */
-  inverted?: LeuBreadcrumb["inverted"];
-  /**  */
-  _hiddenItems?: LeuBreadcrumb["_hiddenItems"];
-  /**  */
-  _showBackOnly?: LeuBreadcrumb["_showBackOnly"];
-  /**  */
-  _isRecalculating?: LeuBreadcrumb["_isRecalculating"];
-  /**  */
-  _isDropdownOpen?: LeuBreadcrumb["_isDropdownOpen"];
-  /**  */
-  _handleResize?: LeuBreadcrumb["_handleResize"];
-  /**  */
-  _closeDropdown?: LeuBreadcrumb["_closeDropdown"];
-  /**  */
-  resizeObserver?: LeuBreadcrumb["resizeObserver"];
-};
-
 type LeuButtonProps = {
   /**  */
   label?: LeuButton["label"];
@@ -90,7 +68,7 @@ type LeuButtonGroupProps = {
   /**  */
   _items?: LeuButtonGroup["_items"];
   /** When the value of the group changes by clicking a button */
-  onInput?: (e: CustomEvent<CustomEvent>) => void;
+  oninput?: (e: CustomEvent<CustomEvent>) => void;
 };
 
 type LeuCheckboxProps = {
@@ -130,34 +108,25 @@ If the selectionMode is single, only the first item with the given value is chec
 };
 
 type LeuChipLinkProps = {
-  /**  */
-  ""?: LeuChipLink[""];
   /** The size of the chip */
   size?: LeuChipLink["size"];
   /**  */
   href?: LeuChipLink["href"];
   /**  */
   inverted?: LeuChipLink["inverted"];
-  /**  */
-  ""?: LeuChipLink[""];
 };
 
 type LeuChipRemovableProps = {
-  /**  */
-  ""?: LeuChipRemovable[""];
   /** The value of the chip. */
   value?: LeuChipRemovable["value"];
   /**  */
   inverted?: LeuChipRemovable["inverted"];
-  /**  */
-  ""?: LeuChipRemovable[""];
+
   /** Dispatched when the user clicks on the chip */
-  onRemove?: (e: CustomEvent<never>) => void;
+  onremove?: (e: CustomEvent<never>) => void;
 };
 
 type LeuChipSelectableProps = {
-  /**  */
-  ""?: LeuChipSelectable[""];
   /** The size of the chip. Not supported for radio variant. */
   size?: LeuChipSelectable["size"];
   /** `toggle` or `radio`. Determines if only one or multiple chips can be selected. */
@@ -168,10 +137,9 @@ type LeuChipSelectableProps = {
   value?: LeuChipSelectable["value"];
   /**  */
   inverted?: LeuChipSelectable["inverted"];
+
   /**  */
-  ""?: LeuChipSelectable[""];
-  /**  */
-  onInput?: (e: CustomEvent<CustomEvent>) => void;
+  oninput?: (e: CustomEvent<CustomEvent>) => void;
 };
 
 type LeuDialogProps = {
@@ -254,9 +222,9 @@ type LeuInputProps = {
   /**  */
   valueAsNumber?: LeuInput["valueAsNumber"];
   /** Dispatched when the value of the input element changes. */
-  onInput?: (e: CustomEvent<CustomEvent>) => void;
+  oninput?: (e: CustomEvent<CustomEvent>) => void;
   /** Dispatched when the value of the input element changes and the input element loses focus. */
-  onChange?: (e: CustomEvent<CustomEvent>) => void;
+  onchange?: (e: CustomEvent<CustomEvent>) => void;
 };
 
 type LeuMenuProps = {
@@ -301,7 +269,7 @@ type LeuPaginationProps = {
   /**  */
   _maxPage?: LeuPagination["_maxPage"];
   /**  */
-  onLeupagechange?: (e: CustomEvent<CustomEvent>) => void;
+  "onleu:pagechange"?: (e: CustomEvent<CustomEvent>) => void;
 };
 
 type LeuPopupProps = {
@@ -474,41 +442,6 @@ export type CustomElements = {
    */
   "leu-accordion": DefineComponent<LeuAccordionProps>;
 
-  /**
-   * A Breadcrumb Navigation.
-   *
-   * The breadcrumbs can be displayed in two different layouts.
-   * Only the back link (the last item / parent of the current page)
-   * is displayed when…
-   * -  … the width of the container is smaller
-   *      than the BACK_ONLY_BREAKPOINT.
-   * -  … less then two breadcrumb items could be displayed
-   *      without overflowing the container.
-   *
-   * Otherwise as many items as possible are displayed in an inline list
-   * without overflowing the container. The remaining items are displayed
-   * in a dropdown menu.
-   *
-   * In order to determine the exact numbers of items that have to be
-   * hidden inside the dropdown, all of them have to be rendered first.
-   * 1. Render all items
-   * 2. Calculate (measure) the number of items that can be displayed
-   *    without overflowing the container.
-   * 3. Updating the state (_hiddeItems) which will trigger a rerender
-   * 4. Render the items again with the new state.
-   *
-   * This results in multiple updates scheduled one after another. Lit
-   * will also print a waring in the console beacause of that.
-   * It's no a nice behaviour but the only one that works without
-   * having duplicate and hidden markup to derive the sizes from that.
-   * ---
-   *
-   *
-   * ### **Methods:**
-   *  - **renderDropdown(): __** - Render the dropdown menu
-   */
-  "leu-breadcrumb": DefineComponent<LeuBreadcrumbProps>;
-
   /**
    *
    * ---
@@ -593,7 +526,7 @@ export type CustomElements = {
    *
    *
    * ### **Events:**
-   *  - **input** - undefined
+   *  - **input**
    *
    * ### **Methods:**
    *  - **getValue(): _string_** - Returns the value of the chip. If `value` is not set, it will return the text content
@@ -647,6 +580,7 @@ export type CustomElements = {
    * e.g.
    * `tooLong(this.maxlength)`
    * This way the framework user can create reasonable validation messages
+   * - **checkValidity(): _boolean_** - Check input validation
    * - **renderErrorMessages(): _TemplateResult | nothing_** - Creates an error list with an item for the given validity state.
    */
   "leu-input": DefineComponent<LeuInputProps>;
@@ -677,7 +611,7 @@ export type CustomElements = {
    *
    *
    * ### **Events:**
-   *  - **leu:pagechange** - undefined
+   *  - **leu:pagechange**
    */
   "leu-pagination": DefineComponent<LeuPaginationProps>;
 
@@ -731,7 +665,6 @@ export type CustomElements = {
    * - Hide menu items that do not match the filter.
    * - **_getDisplayValue(): _String | nothing_** - Determines the value or label that should be displayed inside the toggle button.
    * - **_isSelected(menuItemValue: _String_): _Boolean_** - Checks if the given value is selected.
-   * - **_handlePopupFocusOut(event)** - Close the dropdown if the focus moves outside the component.
    *
    * ### **Slots:**
    *  - **before** - Optional content the appears before the option list