@statistikzh/leu 0.23.0 → 0.24.1

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.23.0",
+  "version": "0.24.1",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -65,6 +65,33 @@
             "events": []
           }
         },
+        {
+          "name": "leu-button-group",
+          "description": "A radio input-like button group component.\nIt allows only one button to be active at a time.\n---\n\n\n### **Events:**\n - **input** - When the value of the group changes by clicking a button\n\n### **Slots:**\n - _default_ - Slot for the buttons",
+          "doc-url": "",
+          "attributes": [],
+          "slots": [{ "name": "", "description": "Slot for the buttons" }],
+          "events": [
+            {
+              "name": "input",
+              "description": "When the value of the group changes by clicking a button"
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "value",
+                "description": "The value of the currently selected (active) button"
+              }
+            ],
+            "events": [
+              {
+                "name": "input",
+                "description": "When the value of the group changes by clicking a button"
+              }
+            ]
+          }
+        },
         {
           "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",
@@ -254,134 +281,6 @@
             "events": []
           }
         },
-        {
-          "name": "leu-button-group",
-          "description": "A radio input-like button group component.\nIt allows only one button to be active at a time.\n---\n\n\n### **Events:**\n - **input** - When the value of the group changes by clicking a button\n\n### **Slots:**\n - _default_ - Slot for the buttons",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [{ "name": "", "description": "Slot for the buttons" }],
-          "events": [
-            {
-              "name": "input",
-              "description": "When the value of the group changes by clicking a button"
-            }
-          ],
-          "js": {
-            "properties": [
-              {
-                "name": "value",
-                "description": "The value of the currently selected (active) button"
-              }
-            ],
-            "events": [
-              {
-                "name": "input",
-                "description": "When the value of the group changes by clicking a button"
-              }
-            ]
-          }
-        },
-        {
-          "name": "leu-checkbox",
-          "description": "\n---\n",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "checked",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "disabled",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "value",
-              "value": { "type": "string", "default": "\"\"" }
-            },
-            { "name": "name", "value": { "type": "string", "default": "\"\"" } }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "checked", "type": "boolean" },
-              { "name": "disabled", "type": "boolean" },
-              { "name": "value", "type": "string" },
-              { "name": "name", "type": "string" }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "leu-checkbox-group",
-          "description": "\n---\n\n\n### **Slots:**\n - _default_ - Place the checkboxes inside the default slot.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "orientation",
-              "description": "Defines how the checkboxes should be aligned.",
-              "value": {
-                "type": "\"horizontal\" | \"vertical\"",
-                "default": "\"horizontal\""
-              }
-            },
-            {
-              "name": "label",
-              "description": "The label of the checkbox group",
-              "value": { "type": "string | undefined" }
-            }
-          ],
-          "slots": [
-            {
-              "name": "",
-              "description": "Place the checkboxes inside the default slot."
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "orientation",
-                "description": "Defines how the checkboxes should be aligned.",
-                "type": "\"horizontal\" | \"vertical\""
-              },
-              {
-                "name": "label",
-                "description": "The label of the checkbox group",
-                "type": "string | undefined"
-              },
-              { "name": "value" }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "leu-dropdown",
-          "description": "\n---\n",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "label",
-              "value": { "type": "string", "default": "\"\"" }
-            },
-            {
-              "name": "expanded",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "inverted",
-              "value": { "type": "boolean", "default": "false" }
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "label", "type": "string" },
-              { "name": "expanded", "type": "boolean" },
-              { "name": "inverted", "type": "boolean" }
-            ],
-            "events": []
-          }
-        },
         {
           "name": "leu-dialog",
           "description": "\n---\n",
@@ -605,6 +504,107 @@
             "events": [{ "name": "input", "type": "CustomEvent" }]
           }
         },
+        {
+          "name": "leu-checkbox",
+          "description": "\n---\n",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "checked",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "disabled",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "value",
+              "value": { "type": "string", "default": "\"\"" }
+            },
+            { "name": "name", "value": { "type": "string", "default": "\"\"" } }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "checked", "type": "boolean" },
+              { "name": "disabled", "type": "boolean" },
+              { "name": "value", "type": "string" },
+              { "name": "name", "type": "string" }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "leu-checkbox-group",
+          "description": "\n---\n\n\n### **Slots:**\n - _default_ - Place the checkboxes inside the default slot.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "orientation",
+              "description": "Defines how the checkboxes should be aligned.",
+              "value": {
+                "type": "\"horizontal\" | \"vertical\"",
+                "default": "\"horizontal\""
+              }
+            },
+            {
+              "name": "label",
+              "description": "The label of the checkbox group",
+              "value": { "type": "string | undefined" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "Place the checkboxes inside the default slot."
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "orientation",
+                "description": "Defines how the checkboxes should be aligned.",
+                "type": "\"horizontal\" | \"vertical\""
+              },
+              {
+                "name": "label",
+                "description": "The label of the checkbox group",
+                "type": "string | undefined"
+              },
+              { "name": "value" }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "leu-dropdown",
+          "description": "\n---\n",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "label",
+              "value": { "type": "string", "default": "\"\"" }
+            },
+            {
+              "name": "expanded",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "inverted",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "label", "type": "string" },
+              { "name": "expanded", "type": "boolean" },
+              { "name": "inverted", "type": "boolean" }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "leu-file-input",
           "description": "\n---\n\n\n### **Events:**\n - **input**\n- **change**",
@@ -686,6 +686,29 @@
             ]
           }
         },
+        {
+          "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 \n\n\n\n\n\n\n- **checkValidity()** - Check input validation\n\n",
@@ -926,29 +949,6 @@
             ]
           }
         },
-        {
-          "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-menu",
           "description": "\n---\n",
@@ -1428,53 +1428,153 @@
         },
         {
           "name": "leu-range",
-          "description": "\n---\n\n\n### **Methods:**\n ",
+          "description": "\n---\n\n\n### **Events:**\n - **input**\n\n### **Methods:**\n ",
           "doc-url": "",
           "attributes": [
             {
               "name": "value",
+              "description": "The default value of the range slider.\nString input is parsed as a comma-separated list of numbers.",
               "value": { "type": "array", "default": "[50]" }
             },
-            { "name": "min", "value": { "type": "number", "default": "0" } },
-            { "name": "max", "value": { "type": "number", "default": "100" } },
-            { "name": "step", "value": { "type": "number", "default": "1" } },
+            {
+              "name": "min",
+              "description": "The minimum value of the range slider.",
+              "value": { "type": "number", "default": "0" }
+            },
+            {
+              "name": "max",
+              "description": "The maximum value of the range slider.",
+              "value": { "type": "number", "default": "100" }
+            },
+            {
+              "name": "step",
+              "description": "The step size of the range slider.",
+              "value": { "type": "number", "default": "1" }
+            },
             {
               "name": "name",
               "value": { "type": "string", "default": "\"\"" }
             },
             {
               "name": "label",
+              "description": "The label of the range slider.",
               "value": { "type": "string", "default": "\"\"" }
             },
+            {
+              "name": "hide-label",
+              "description": "Whether to hide the label of the range slider.\nIf true, the label will still be available for screen readers\nand is only visually hidden.",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "disabled",
+              "description": "Whether the range slider is disabled.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "multiple",
+              "description": "Whether to use a range with two handles.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "show-ticks",
+              "description": "Wheter to show tick marks below the range slider.\nOne tick mark per step will be rendered.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "show-range-labels",
+              "description": "Whether to show the min and max labels below the range slider.",
               "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "prefix",
+              "description": "A prefix to display before the value in the output element(s).\nIs ignored if a custom valueFormatter is provided.",
+              "value": { "type": "string", "default": "\"\"" }
+            },
+            {
+              "name": "suffix",
+              "description": "A suffix to display after the value in the output element(s).\nIs ignored if a custom valueFormatter is provided.",
+              "value": { "type": "string", "default": "\"\"" }
             }
           ],
-          "events": [],
+          "events": [{ "name": "input", "type": "CustomEvent" }],
           "js": {
             "properties": [
-              { "name": "defaultValue", "type": "array" },
-              { "name": "min", "type": "number" },
-              { "name": "max", "type": "number" },
-              { "name": "step", "type": "number" },
+              {
+                "name": "defaultValue",
+                "description": "The default value of the range slider.\nString input is parsed as a comma-separated list of numbers.",
+                "type": "array"
+              },
+              {
+                "name": "min",
+                "description": "The minimum value of the range slider.",
+                "type": "number"
+              },
+              {
+                "name": "max",
+                "description": "The maximum value of the range slider.",
+                "type": "number"
+              },
+              {
+                "name": "step",
+                "description": "The step size of the range slider.",
+                "type": "number"
+              },
               { "name": "name", "type": "string" },
-              { "name": "label", "type": "string" },
-              { "name": "disabled", "type": "boolean" },
-              { "name": "multiple", "type": "boolean" },
+              {
+                "name": "label",
+                "description": "The label of the range slider.",
+                "type": "string"
+              },
+              {
+                "name": "hideLabel",
+                "description": "Whether to hide the label of the range slider.\nIf true, the label will still be available for screen readers\nand is only visually hidden.",
+                "type": "boolean"
+              },
+              {
+                "name": "disabled",
+                "description": "Whether the range slider is disabled.",
+                "type": "boolean"
+              },
+              {
+                "name": "multiple",
+                "description": "Whether to use a range with two handles.",
+                "type": "boolean"
+              },
+              {
+                "name": "showTicks",
+                "description": "Wheter to show tick marks below the range slider.\nOne tick mark per step will be rendered.",
+                "type": "boolean"
+              },
+              {
+                "name": "showRangeLabels",
+                "description": "Whether to show the min and max labels below the range slider.",
+                "type": "boolean"
+              },
+              {
+                "name": "prefix",
+                "description": "A prefix to display before the value in the output element(s).\nIs ignored if a custom valueFormatter is provided.",
+                "type": "string"
+              },
+              {
+                "name": "suffix",
+                "description": "A suffix to display after the value in the output element(s).\nIs ignored if a custom valueFormatter is provided.",
+                "type": "string"
+              },
+              {
+                "name": "valueFormatter",
+                "description": "A custom function to format the value displayed in the output element(s).\nIf provided, the prefix and suffix properties will be ignored.",
+                "type": "(value: number) => string | undefined"
+              },
               {
                 "name": "value",
-                "description": "Sets the value of the underlying input element(s).\nThe value has to be an array if \"multiple\" range is used.\nOtherwise it has to be a string."
+                "description": "The value of the range slider.\nString input is parsed as a comma-separated list of numbers.\nIn multiple mode, if only a single value is provided, the second handle will be set to the minimum value.\nIn single mode, only the first value will be used.",
+                "type": "string"
               },
-              { "name": "valueAsArray" },
-              { "name": "valueLow" },
-              { "name": "valueHigh" }
+              { "name": "valueAsArray", "type": "InternalRangeValue" },
+              { "name": "valueLow", "type": "number" },
+              { "name": "valueHigh", "type": "number" }
             ],
-            "events": []
+            "events": [{ "name": "input", "type": "CustomEvent" }]
           }
         },
         {

package/package.json

@@ -3,7 +3,7 @@
   "description": "UI component library of the canton of zurich",
   "license": "MIT",
   "author": "statistikzh",
-  "version": "0.23.0",
+  "version": "0.24.1",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -19,7 +19,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/statistikzh/leu.git"
+    "url": "git+https://github.com/statistikzh/leu.git"
   },
   "homepage": "https://github.com/statistikzh/leu/",
   "scripts": {
@@ -127,5 +127,9 @@
   },
   "esm.sh": {
     "bundle": false
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": false
   }
 }

package/src/components/file-input/FileInput.ts

@@ -6,8 +6,8 @@ import { classMap } from "lit/directives/class-map.js"
 import { LeuElement } from "../../lib/LeuElement.js"
 
 import styles from "./file-input.css"
-import { LeuButton } from "../../index.js"
-import { LeuIcon } from "../icon/leu-icon.js"
+import { LeuButton } from "../button/Button.js"
+import { LeuIcon } from "../icon/Icon.js"
 import { LeuVisuallyHidden } from "../visually-hidden/VisuallyHidden.js"
 
 /**