@statistikzh/leu 0.5.1 → 0.6.0

package/dist/leu-scroll-top.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"leu-scroll-top.d.ts","sourceRoot":"","sources":["leu-scroll-top.js"],"names":[],"mappings":";6BAC6B,gBAAgB"}
+{"version":3,"file":"leu-scroll-top.d.ts","sourceRoot":"","sources":["leu-scroll-top.js"],"names":[],"mappings":";6BAA6B,gBAAgB"}

package/dist/leu-scroll-top.js

@@ -1,14 +1,12 @@
-import { d as defineElement } from './defineElement-40372b4b.js';
 import { LeuScrollTop } from './ScrollTop.js';
-import './_rollupPluginBabelHelpers-20f659f4.js';
+import './LeuElement-6de6f209.js';
 import 'lit';
 import 'lit/directives/class-map.js';
-import './leu-button.js';
-import './Button-5326c982.js';
+import './Button-9692e403.js';
 import 'lit/directives/if-defined.js';
-import './icon-03e86700.js';
+import './Icon.js';
 import './utils-65469421.js';
 
-defineElement("scroll-top", LeuScrollTop);
+LeuScrollTop.define("leu-scroll-top");
 
 export { LeuScrollTop };

package/dist/leu-select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"leu-select.d.ts","sourceRoot":"","sources":["leu-select.js"],"names":[],"mappings":";0BAC0B,aAAa"}
+{"version":3,"file":"leu-select.d.ts","sourceRoot":"","sources":["leu-select.js"],"names":[],"mappings":";0BAA0B,aAAa"}

package/dist/leu-select.js

@@ -1,26 +1,18 @@
-import { d as defineElement } from './defineElement-40372b4b.js';
 import { LeuSelect } from './Select.js';
-import './_rollupPluginBabelHelpers-20f659f4.js';
+import './LeuElement-6de6f209.js';
 import 'lit';
 import 'lit/directives/class-map.js';
-import 'lit/directives/map.js';
-import 'lit/directives/if-defined.js';
 import 'lit/directives/ref.js';
-import './icon-03e86700.js';
-import './Button-5326c982.js';
-import './leu-button.js';
-import './leu-menu.js';
+import 'lit/directives/if-defined.js';
+import './Button-9692e403.js';
+import './Icon.js';
 import './Menu.js';
-import './leu-menu-item.js';
 import './MenuItem.js';
-import 'lit/static-html.js';
-import './leu-input.js';
 import './Input.js';
 import 'lit/directives/live.js';
-import './leu-popup.js';
 import './Popup.js';
 import '@floating-ui/dom';
 
-defineElement("select", LeuSelect);
+LeuSelect.define("leu-select");
 
 export { LeuSelect };

package/dist/leu-table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"leu-table.d.ts","sourceRoot":"","sources":["leu-table.js"],"names":[],"mappings":";yBACyB,YAAY"}
+{"version":3,"file":"leu-table.d.ts","sourceRoot":"","sources":["leu-table.js"],"names":[],"mappings":";yBAAyB,YAAY"}

package/dist/leu-table.js

@@ -1,20 +1,16 @@
-import { d as defineElement } from './defineElement-40372b4b.js';
 import { LeuTable } from './Table.js';
-import './_rollupPluginBabelHelpers-20f659f4.js';
+import './LeuElement-6de6f209.js';
 import 'lit';
 import 'lit/directives/class-map.js';
 import 'lit/directives/style-map.js';
 import 'lit/directives/ref.js';
-import './icon-03e86700.js';
-import './leu-pagination.js';
+import './Icon.js';
 import './Pagination.js';
 import 'lit/directives/live.js';
-import './leu-button.js';
-import './Button-5326c982.js';
+import './Button-9692e403.js';
 import 'lit/directives/if-defined.js';
-import './leu-visually-hidden.js';
 import './VisuallyHidden.js';
 
-defineElement("table", LeuTable);
+LeuTable.define("leu-table");
 
 export { LeuTable };

package/dist/leu-visually-hidden.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"leu-visually-hidden.d.ts","sourceRoot":"","sources":["leu-visually-hidden.js"],"names":[],"mappings":";kCACkC,qBAAqB"}
+{"version":3,"file":"leu-visually-hidden.d.ts","sourceRoot":"","sources":["leu-visually-hidden.js"],"names":[],"mappings":";kCAAkC,qBAAqB"}

package/dist/leu-visually-hidden.js

@@ -1,8 +1,7 @@
-import { d as defineElement } from './defineElement-40372b4b.js';
 import { LeuVisuallyHidden } from './VisuallyHidden.js';
-import './_rollupPluginBabelHelpers-20f659f4.js';
+import './LeuElement-6de6f209.js';
 import 'lit';
 
-defineElement("visually-hidden", LeuVisuallyHidden);
+LeuVisuallyHidden.define("leu-visually-hidden");
 
 export { LeuVisuallyHidden };

package/dist/theme.css

@@ -49,6 +49,8 @@
   --leu-box-shadow-regular: 0px 0px 16px var(--leu-color-black-transp-20);
   --leu-box-shadow-long: 0px 0px 80px var(--leu-color-black-transp-20);
 
+  --leu-z-index-popup: 100;
+
   --leu-t-30-regular-font-size: 0.75rem;
 
   --leu-t-30-regular-line-height: 1.5;

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

@@ -9,22 +9,22 @@
         {
           "name": "heading-level",
           "description": "The heading level of the accordion title. Must be between 1 and 6.",
-          "values": [{ "name": "Number" }]
+          "values": []
         },
         {
           "name": "label-prefix",
           "description": "The prefix of the accordion label. e.g. \"01\"",
-          "values": [{ "name": "String" }]
+          "values": []
         },
         {
           "name": "open",
           "description": "The expanded state of the accordion.",
-          "values": [{ "name": "Boolean" }]
+          "values": []
         },
         {
           "name": "label",
           "description": "The label (title) of the accordion.",
-          "values": [{ "name": "String" }]
+          "values": []
         }
       ],
       "references": [
@@ -46,7 +46,7 @@
         {
           "name": "inverted",
           "description": "invert color on dark background",
-          "values": [{ "name": "Boolean" }]
+          "values": []
         },
         { "name": "_hiddenItems", "values": [] },
         { "name": "_showBackOnly", "values": [] },
@@ -62,15 +62,9 @@
     },
     {
       "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",
       "attributes": [
         { "name": "label", "values": [] },
-        { "name": "icon", "values": [] },
-        {
-          "name": "iconPosition",
-          "description": "Only taken into account if Label and no Icon is set",
-          "values": [{ "name": "(\"before\"" }, { "name": "\"after\")" }]
-        },
         { "name": "size", "values": [] },
         { "name": "variant", "values": [] },
         {
@@ -133,10 +127,8 @@
       "attributes": [
         { "name": "checked", "values": [] },
         { "name": "disabled", "values": [] },
-        { "name": "identifier", "values": [] },
         { "name": "value", "values": [] },
-        { "name": "name", "values": [] },
-        { "name": "label", "values": [] }
+        { "name": "name", "values": [] }
       ],
       "references": [
         {
@@ -164,7 +156,14 @@
       "description": "\n---\n\n\n### **Slots:**\n - _default_ - Place leu-chip-* elements inside this slot\n\n### **CSS Properties:**\n - **--leu-chip-group-gap** - The gap between the chips _(default: undefined)_",
       "attributes": [
         { "name": "inverted", "values": [] },
-        { "name": "selection-mode", "values": [] },
+        {
+          "name": "selection-mode",
+          "values": [
+            { "name": "single" },
+            { "name": "multiple" },
+            { "name": "none" }
+          ]
+        },
         { "name": "heading-level", "values": [] },
         { "name": "label", "values": [] }
       ],
@@ -179,15 +178,13 @@
       "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",
           "values": [{ "name": "keyof typeof SIZES" }]
         },
         { "name": "href", "values": [] },
-        { "name": "inverted", "values": [] },
-        { "name": "label", "values": [] }
+        { "name": "inverted", "values": [] }
       ],
       "references": [
         {
@@ -199,11 +196,7 @@
     {
       "name": "leu-chip-removable",
       "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",
-      "attributes": [
-        { "name": "", "values": [] },
-        { "name": "inverted", "values": [] },
-        { "name": "label", "values": [] }
-      ],
+      "attributes": [{ "name": "inverted", "values": [] }],
       "references": [
         {
           "name": "Documentation",
@@ -213,9 +206,8 @@
     },
     {
       "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",
       "attributes": [
-        { "name": "", "values": [] },
         {
           "name": "size",
           "description": "The size of the chip. Not supported for radio variant.",
@@ -223,13 +215,12 @@
         },
         {
           "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.",
           "values": [{ "name": "keyof typeof VARIANTS" }]
         },
         { "name": "selected", "values": [] },
         { "name": "value", "values": [] },
-        { "name": "inverted", "values": [] },
-        { "name": "label", "values": [] }
+        { "name": "inverted", "values": [] }
       ],
       "references": [
         {
@@ -252,9 +243,26 @@
         }
       ]
     },
+    {
+      "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)_",
+      "attributes": [
+        {
+          "name": "name",
+          "description": "The name of the icon to display.",
+          "values": [{ "name": "IconPathName" }]
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://statistikzh.github.io/leu/?path=/story/icon"
+        }
+      ]
+    },
     {
       "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.",
       "attributes": [
         {
           "name": "disabled",
@@ -368,7 +376,13 @@
     {
       "name": "leu-menu",
       "description": "\n---\n",
-      "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'.",
+          "values": [{ "name": "SelectsType" }]
+        }
+      ],
       "references": [
         {
           "name": "Documentation",
@@ -378,27 +392,38 @@
     },
     {
       "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",
       "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.",
+          "name": "active",
+          "description": "Defines if the item is selected or checked",
           "values": []
         },
         {
-          "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.",
+          "name": "disabled",
+          "description": "Disables the underlying button or link",
           "values": []
         },
-        { "name": "active", "values": [] },
         {
-          "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.",
+          "name": "tabbable",
+          "description": "If the item should be focusable. Will be reflected as `tabindex` to the underlying button or link",
           "values": []
         },
-        { "name": "disabled", "values": [] },
-        { "name": "label", "values": [] },
-        { "name": "href", "values": [] }
+        {
+          "name": "href",
+          "description": "The href of the underlying link",
+          "values": []
+        },
+        {
+          "name": "value",
+          "description": "The value of the item. It must not contain commas. See `getValue()`",
+          "values": []
+        },
+        {
+          "name": "componentRole",
+          "description": "The role of the item. This will be reflected as `role` to the underlying button or link. Default is `'menuitem'.`",
+          "values": [{ "name": "MenuItemRole" }]
+        }
       ],
       "references": [
         {
@@ -409,16 +434,12 @@
     },
     {
       "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" }] },
         { "name": "numOfItems", "values": [{ "name": "Number" }] },
-        {
-          "name": "_page",
-          "description": "Internal page state that contains an\nalready clamped page number. Should only\nbe accessed through the `page` getter and\nsetter.",
-          "values": [{ "name": "Number" }]
-        }
+        { "name": "_page", "values": [] }
       ],
       "references": [
         {
@@ -431,25 +452,9 @@
       "name": "leu-popup",
       "description": "\n---\n",
       "attributes": [
-        { "name": "anchor", "values": [] },
+        { "name": "anchor", "values": [{ "name": "HTMLElement" }] },
         { "name": "active", "values": [] },
-        {
-          "name": "placement",
-          "values": [
-            { "name": "top" },
-            { "name": "top-start" },
-            { "name": "top-end" },
-            { "name": "bottom" },
-            { "name": "bottom-start" },
-            { "name": "bottom-end" },
-            { "name": "left" },
-            { "name": "left-start" },
-            { "name": "left-end" },
-            { "name": "right" },
-            { "name": "right-start" },
-            { "name": "right-end" }
-          ]
-        },
+        { "name": "placement", "values": [{ "name": "Placement" }] },
         { "name": "flip", "values": [] },
         { "name": "shift", "values": [] },
         { "name": "shiftPadding", "values": [] },
@@ -484,10 +489,8 @@
       "attributes": [
         { "name": "checked", "values": [] },
         { "name": "disabled", "values": [] },
-        { "name": "identifier", "values": [] },
         { "name": "value", "values": [] },
-        { "name": "name", "values": [] },
-        { "name": "label", "values": [] }
+        { "name": "name", "values": [] }
       ],
       "references": [
         {
@@ -523,17 +526,51 @@
     },
     {
       "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",
       "attributes": [
-        { "name": "open", "values": [] },
-        { "name": "label", "values": [] },
-        { "name": "options", "values": [{ "name": "array" }] },
-        { "name": "value", "values": [{ "name": "array" }] },
-        { "name": "clearable", "values": [] },
-        { "name": "disabled", "values": [] },
-        { "name": "filterable", "values": [] },
-        { "name": "multiple", "values": [] },
-        { "name": "optionFilter", "values": [] }
+        {
+          "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.",
+          "values": [{ "name": "array" }]
+        },
+        {
+          "name": "name",
+          "description": "Reflects to the name attribute of the hidden input field that would be used in a form",
+          "values": []
+        },
+        {
+          "name": "open",
+          "description": "The expanded state of the popup",
+          "values": []
+        },
+        {
+          "name": "label",
+          "description": "The label of the select",
+          "values": []
+        },
+        {
+          "name": "clearable",
+          "description": "Show a clearable button to reset the value",
+          "values": []
+        },
+        {
+          "name": "disabled",
+          "description": "If the select should be disabled",
+          "values": []
+        },
+        {
+          "name": "filterable",
+          "description": "Show an input field to filter the options inside the popup",
+          "values": []
+        },
+        {
+          "name": "multiple",
+          "description": "Allow multiple selections",
+          "values": []
+        },
+        { "name": "_optionFilter", "values": [] },
+        { "name": "_hasFilterResults", "values": [] },
+        { "name": "_displayValue", "values": [] }
       ],
       "references": [
         {