@statistikzh/leu 0.14.3 → 0.15.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.14.3",
+  "version": "0.15.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -28,7 +28,7 @@
             },
             {
               "name": "label",
-              "description": "The label (title) of the accordion.",
+              "description": "The label (title) of the accordion",
               "value": { "type": "string", "default": "\"\"" }
             }
           ],
@@ -53,7 +53,7 @@
               },
               {
                 "name": "label",
-                "description": "The label (title) of the accordion.",
+                "description": "The label (title) of the accordion",
                 "type": "string"
               },
               {
@@ -72,18 +72,28 @@
           "attributes": [
             {
               "name": "label",
-              "value": { "type": "string", "default": "null" }
+              "description": "`aria-label` of the underlying button elements.\nUse it to provide a label when only an icon is visible.",
+              "value": { "type": "null | string", "default": "null" }
             },
             {
               "name": "size",
-              "value": { "type": "string", "default": "\"regular\"" }
+              "description": "The size of the button.",
+              "value": {
+                "type": "\"regular\" | \"small\"",
+                "default": "\"regular\""
+              }
             },
             {
               "name": "variant",
-              "value": { "type": "string", "default": "\"primary\"" }
+              "description": "The visual variant of the button.",
+              "value": {
+                "type": "\"primary\" | \"secondary\" | \"ghost\"",
+                "default": "\"primary\""
+              }
             },
             {
               "name": "type",
+              "description": "The `type` of the underlying button element.",
               "value": {
                 "type": "\"button\" | \"submit\" | \"reset\"",
                 "default": "\"button\""
@@ -91,33 +101,33 @@
             },
             {
               "name": "componentRole",
-              "value": { "type": "string", "default": "undefined" }
+              "description": "The `role` of the underlying button element.",
+              "value": { "type": "string | undefined" }
             },
             {
               "name": "disabled",
+              "description": "Whether the button is disabled or not.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "round",
-              "description": "Only taken into account if no Label and an Icon is set",
+              "description": "Whether the button should be round.\nCan only be applied when the button contains an icon without a visible label.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "active",
+              "description": "Whether the button is active or not.\nDepending on the `componentRole`, it applies `aria-checked` or `aria-selected` to the underlying button element.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "inverted",
-              "description": "will be used on dark Background",
+              "description": "Wheter the colors should be inverted. For use on dark backgrounds.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "expanded",
-              "description": "Only taken into account if variant is \"ghost\"",
-              "value": {
-                "type": "(\"true\" | \"false\" | undefined)",
-                "default": "undefined"
-              }
+              "description": "Whether the button is expanded or not.\nOnly has an effect on the variant `ghost` to show an expanding icon.\nIf the property is not set, the icon will not be shown.\nIf it is set, the icon will either show an expanded or collapsed state.",
+              "value": { "type": "\"true\" | \"false\" | undefined" }
             },
             {
               "name": "fluid",
@@ -142,32 +152,60 @@
           "events": [],
           "js": {
             "properties": [
-              { "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": "label",
+                "description": "`aria-label` of the underlying button elements.\nUse it to provide a label when only an icon is visible.",
+                "type": "null | string"
+              },
+              {
+                "name": "size",
+                "description": "The size of the button.",
+                "type": "\"regular\" | \"small\""
+              },
+              {
+                "name": "variant",
+                "description": "The visual variant of the button.",
+                "type": "\"primary\" | \"secondary\" | \"ghost\""
+              },
+              {
+                "name": "type",
+                "description": "The `type` of the underlying button element.",
+                "type": "\"button\" | \"submit\" | \"reset\""
+              },
+              {
+                "name": "componentRole",
+                "description": "The `role` of the underlying button element.",
+                "type": "string | undefined"
+              },
+              {
+                "name": "disabled",
+                "description": "Whether the button is disabled or not.",
+                "type": "boolean"
+              },
               {
                 "name": "round",
-                "description": "Only taken into account if no Label and an Icon is set",
+                "description": "Whether the button should be round.\nCan only be applied when the button contains an icon without a visible label.",
                 "type": "boolean"
               },
-              { "name": "active", "type": "boolean" },
               {
-                "name": "inverted",
-                "description": "will be used on dark Background",
+                "name": "active",
+                "description": "Whether the button is active or not.\nDepending on the `componentRole`, it applies `aria-checked` or `aria-selected` to the underlying button element.",
                 "type": "boolean"
               },
               {
-                "name": "fluid",
-                "description": "Alters the shape of the button to be full width of its parent container",
+                "name": "inverted",
+                "description": "Wheter the colors should be inverted. For use on dark backgrounds.",
                 "type": "boolean"
               },
               {
                 "name": "expanded",
-                "description": "Only taken into account if variant is \"ghost\"",
-                "type": "(\"true\" | \"false\" | undefined)"
+                "description": "Whether the button is expanded or not.\nOnly has an effect on the variant `ghost` to show an expanding icon.\nIf the property is not set, the icon will not be shown.\nIf it is set, the icon will either show an expanded or collapsed state.",
+                "type": "\"true\" | \"false\" | undefined"
+              },
+              {
+                "name": "fluid",
+                "description": "Alters the shape of the button to be full width of its parent container",
+                "type": "boolean"
               }
             ],
             "events": []
@@ -175,14 +213,13 @@
         },
         {
           "name": "leu-button-group",
-          "description": "\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",
+          "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",
-              "type": "CustomEvent",
               "description": "When the value of the group changes by clicking a button"
             }
           ],
@@ -190,15 +227,12 @@
             "properties": [
               {
                 "name": "value",
-                "description": "The value of the currenty selected (active) button",
-                "type": "string"
-              },
-              { "name": "_items", "type": "array" }
+                "description": "The value of the currently selected (active) button"
+              }
             ],
             "events": [
               {
                 "name": "input",
-                "type": "CustomEvent",
                 "description": "When the value of the group changes by clicking a button"
               }
             ]
@@ -228,36 +262,51 @@
             "properties": [
               { "name": "checked", "type": "boolean" },
               { "name": "disabled", "type": "boolean" },
-              { "name": "name", "type": "string" },
-              { "name": "value", "type": "string" }
+              { "name": "value", "type": "string" },
+              { "name": "name", "type": "string" }
             ],
             "events": []
           }
         },
         {
           "name": "leu-checkbox-group",
-          "description": "\n---\n",
+          "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", "value": { "type": "string" } }
+            {
+              "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": "value" },
               {
                 "name": "orientation",
+                "description": "Defines how the checkboxes should be aligned.",
                 "type": "\"horizontal\" | \"vertical\""
               },
-              { "name": "items", "type": "array" },
-              { "name": "label", "type": "string" }
+              {
+                "name": "label",
+                "description": "The label of the checkbox group",
+                "type": "string | undefined"
+              },
+              { "name": "value" }
             ],
             "events": []
           }
@@ -882,36 +931,74 @@
           "description": "\n---\n\n\n### **Events:**\n - **leu:pagechange**",
           "doc-url": "",
           "attributes": [
-            { "name": "defaultPage", "value": { "type": "number" } },
+            {
+              "name": "defaultPage",
+              "value": { "type": "number | undefined" }
+            },
             {
               "name": "itemsPerPage",
-              "value": { "type": "Number", "default": "1" }
+              "description": "Number of items per page.",
+              "value": { "type": "number", "default": "1" }
             },
             {
               "name": "numOfItems",
-              "value": { "type": "Number", "default": "1" }
-            },
-            { "name": "_page", "value": { "type": "string" } }
+              "description": "Total number of items to paginate.",
+              "value": { "type": "number", "default": "1" }
+            }
           ],
           "events": [{ "name": "leu:pagechange", "type": "CustomEvent" }],
           "js": {
             "properties": [
-              { "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.",
-                "type": "Number"
-              }
+              { "name": "defaultPage", "type": "number | undefined" },
+              {
+                "name": "itemsPerPage",
+                "description": "Number of items per page.",
+                "type": "number"
+              },
+              {
+                "name": "numOfItems",
+                "description": "Total number of items to paginate.",
+                "type": "number"
+              },
+              {
+                "name": "page",
+                "description": "The current page number. This is a 1-based index.\nWhen setting this value, it will be clamped\nto the range of valid pages."
+              },
+              {
+                "name": "startIndex",
+                "description": "The index of the first item on the current page."
+              },
+              {
+                "name": "endIndex",
+                "description": "The index of the last item on the current page.\nThis is exclusive, meaning it is one past the last item."
+              },
+              { "name": "_maxPage" }
             ],
             "events": [{ "name": "leu:pagechange", "type": "CustomEvent" }]
           }
         },
+        {
+          "name": "leu-placeholder",
+          "description": "* A placeholder to display when no content is available.\n---\n\n\n### **Slots:**\n - **title** - The placeholders title. Use a heading tag (h1-6) depeneding on your context.\n- **description** - A description of the placeholder. Content is wrapped in a `<p>` tag by the component.\n- **cta** - A call to action button like \"Reload\" or \"Create\". Add a single `<leu-button>`.",
+          "doc-url": "",
+          "attributes": [],
+          "slots": [
+            {
+              "name": "title",
+              "description": "The placeholders title. Use a heading tag (h1-6) depeneding on your context."
+            },
+            {
+              "name": "description",
+              "description": "A description of the placeholder. Content is wrapped in a `<p>` tag by the component."
+            },
+            {
+              "name": "cta",
+              "description": "A call to action button like \"Reload\" or \"Create\". Add a single `<leu-button>`."
+            }
+          ],
+          "events": [],
+          "js": { "properties": [], "events": [] }
+        },
         {
           "name": "leu-popup",
           "description": "\n---\n",
@@ -1012,40 +1099,51 @@
             "properties": [
               { "name": "checked", "type": "boolean" },
               { "name": "disabled", "type": "boolean" },
-              { "name": "name", "type": "string" },
-              { "name": "value", "type": "string" }
+              { "name": "value", "type": "string" },
+              { "name": "name", "type": "string" }
             ],
             "events": []
           }
         },
         {
           "name": "leu-radio-group",
-          "description": "\n---\n",
+          "description": "Handles a group of radio buttons, allowing only one to be selected at a time. It provides keyboard navigation and manages focus within the group.\n---\n\n\n### **Slots:**\n - _default_ - Place the radio buttons inside the default slot.",
           "doc-url": "",
           "attributes": [
             {
               "name": "orientation",
+              "description": "Defines how the radio buttons should be aligned.",
               "value": {
                 "type": "\"horizontal\" | \"vertical\"",
                 "default": "\"horizontal\""
               }
             },
-            { "name": "label", "value": { "type": "string" } }
+            {
+              "name": "label",
+              "description": "The label of the radio group",
+              "value": { "type": "string | undefined" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "Place the radio buttons inside the default slot."
+            }
           ],
           "events": [],
           "js": {
             "properties": [
-              { "name": "value" },
-              { "name": "handleFocusIn" },
-              { "name": "handleKeyDown" },
-              { "name": "handleInput" },
               {
                 "name": "orientation",
+                "description": "Defines how the radio buttons should be aligned.",
                 "type": "\"horizontal\" | \"vertical\""
               },
-              { "name": "_currentIndex", "type": "number" },
-              { "name": "items", "type": "array" },
-              { "name": "label", "type": "string" }
+              {
+                "name": "label",
+                "description": "The label of the radio group",
+                "type": "string | undefined"
+              },
+              { "name": "value" }
             ],
             "events": []
           }
@@ -1292,6 +1390,49 @@
             "events": []
           }
         },
+        {
+          "name": "leu-chart-wrapper",
+          "description": "A wrapper element for charts.\n---\n\n\n### **Slots:**\n - **title** - The title of the chart. Use a heading tag (h2-4) depending on your context.\n- **description** - A description of the chart. Content is wrapped in a `<p>` tag by the component.\n- **chart** - The actual chart\n- **caption** - A caption for the chart, e.g. a source or explanation of the data.\n- **download** - A download button or dropdown to export the chart in different formats.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "pending",
+              "description": "Whether the chart is currently loading or not.\nWhen set to `true`, a spinner will be shown in the chart container.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "title",
+              "description": "The title of the chart. Use a heading tag (h2-4) depending on your context."
+            },
+            {
+              "name": "description",
+              "description": "A description of the chart. Content is wrapped in a `<p>` tag by the component."
+            },
+            { "name": "chart", "description": "The actual chart" },
+            {
+              "name": "caption",
+              "description": "A caption for the chart, e.g. a source or explanation of the data."
+            },
+            {
+              "name": "download",
+              "description": "A download button or dropdown to export the chart in different formats."
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "pending",
+                "description": "Whether the chart is currently loading or not.\nWhen set to `true`, a spinner will be shown in the chart container.",
+                "type": "boolean"
+              },
+              { "name": "hasSlotController" }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "leu-visually-hidden",
           "description": "\n---\n",

package/package.json

@@ -3,7 +3,7 @@
   "description": "UI component library of the canton of zurich",
   "license": "MIT",
   "author": "statistikzh",
-  "version": "0.14.3",
+  "version": "0.15.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -24,19 +24,19 @@
   "homepage": "https://github.com/statistikzh/leu/",
   "scripts": {
     "analyze": "cem analyze --config custom-elements-manifest.config.js",
-    "build": "rimraf dist && npm run build:js && npm run build:types && npm run build:css && npm run analyze",
+    "build": "rimraf dist && npm run build:types && npm run build:js && npm run build:css && npm run analyze",
     "build:js": "rollup -c rollup.config.js",
     "build:types": "tsc -p tsconfig.build.json",
     "build:css": "postcss src/styles/theme.css -o dist/theme.css && cp dist/theme.css .storybook/static/",
     "watch:css": "nodemon --watch 'src/styles/*' -e css --exec npm run build:css",
     "lint": "npm run lint:eslint && npm run lint:prettier",
-    "lint:eslint": "eslint --ext .js,.mjs,.html . --ignore-path .gitignore ",
-    "lint:prettier": "prettier \"**/*.{js,mjs,md,mdx,html,json}\" --check",
-    "lint:stylelint": "stylelint \"**/*.{js,css}\" --ignore-path .gitignore",
+    "lint:eslint": "eslint --ext .ts,.js,.mjs,.html . --ignore-path .gitignore ",
+    "lint:prettier": "prettier \"**/*.{.ts,js,mjs,md,mdx,html,json}\" --check",
+    "lint:stylelint": "stylelint \"**/*.{ts,js,css}\" --ignore-path .gitignore",
     "lint:types": "tsc",
     "format": "npm run format:eslint && npm run format:prettier",
-    "format:eslint": "eslint --ext .js,.mjs,.html . --fix --ignore-path .gitignore",
-    "format:prettier": "prettier \"**/*.{js,mjs,md,mdx,html,json}\" --write",
+    "format:eslint": "eslint --ext .ts,.js,.mjs,.html . --fix --ignore-path .gitignore",
+    "format:prettier": "prettier \"**/*.{ts,js,mjs,md,mdx,html,json}\" --write",
     "test": "web-test-runner --coverage",
     "test:watch": "web-test-runner --watch",
     "prepare": "husky",
@@ -49,13 +49,11 @@
     "lit": "^3.1.4"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.26.9",
     "@commitlint/cli": "^19.7.1",
     "@commitlint/config-conventional": "^19.7.1",
     "@custom-elements-manifest/analyzer": "^0.10.4",
     "@open-wc/eslint-config": "^12.0.3",
     "@open-wc/testing": "^4.0.0",
-    "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^28.0.2",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-replace": "^6.0.2",
@@ -68,7 +66,11 @@
     "@storybook/manager-api": "^8.5.8",
     "@storybook/theming": "^8.5.8",
     "@storybook/web-components": "^8.5.8",
+    "@types/mocha": "^10.0.10",
+    "@typescript-eslint/eslint-plugin": "^8.34.0",
+    "@typescript-eslint/parser": "^8.34.0",
     "@web/dev-server": "^0.4.6",
+    "@web/dev-server-esbuild": "^1.0.4",
     "@web/dev-server-rollup": "^0.6.4",
     "@web/storybook-builder": "^0.2.1",
     "@web/storybook-framework-web-components": "^0.2.0",
@@ -96,8 +98,10 @@
     "react-syntax-highlighter": "^15.6.1",
     "rimraf": "^6.0.1",
     "rollup": "^4.34.8",
+    "rollup-plugin-dts": "^6.2.1",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-postcss-lit": "^2.1.0",
+    "rollup-plugin-typescript2": "^0.36.0",
     "sinon": "^19.0.2",
     "storybook": "^8.5.8",
     "stylelint": "^16.14.1",
@@ -109,10 +113,10 @@
     "semi": false
   },
   "lint-staged": {
-    "*.{js,css}": [
+    "*.{ts,js,css}": [
       "stylelint --fix"
     ],
-    "*.{js,mjs,html}": [
+    "*.{ts,js,mjs,html}": [
       "eslint --fix",
       "prettier --write"
     ],
@@ -120,5 +124,8 @@
   },
   "overrides": {
     "estree-walker": "2.0.2"
+  },
+  "esm.sh": {
+    "bundle": false
   }
 }

package/release-please-config.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "https://raw.githubusercontent.com/googleapis/release-please/main/schemas/config.json",
+  "release-type": "node",
+  "bump-minor-pre-major": true,
+  "packages": {
+    ".": {}
+  }
+}