@statistikzh/leu 0.14.4 → 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.4",
+  "version": "0.15.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -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,14 +227,12 @@
             "properties": [
               {
                 "name": "value",
-                "description": "The value of the currenty selected (active) button",
-                "type": "string"
+                "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"
               }
             ]
@@ -227,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": []
           }
@@ -881,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",
@@ -1011,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": []
           }
@@ -1291,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.4",
+  "version": "0.15.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/release-please-config.json

@@ -2,8 +2,6 @@
   "$schema": "https://raw.githubusercontent.com/googleapis/release-please/main/schemas/config.json",
   "release-type": "node",
   "bump-minor-pre-major": true,
-  "bump-patch-for-minor-pre-major": true,
-  "last-release-sha": "c00695d82782cfa6e3fa0046e3a7deb31c14eb26",
   "packages": {
     ".": {}
   }

package/scripts/generate-component/templates/stories/[name].stories.ts

@@ -1,13 +1,26 @@
+import { Meta, StoryObj } from "@storybook/web-components"
 import { html } from "lit"
+
 import "../[namespace]-[name].js"
+import {[Namespace][Name]} from "../[Name].js"
+
+type StoryArgs = [Namespace][Name]
+type Story = StoryObj<StoryArgs>
 
 export default {
   title: "Components/[Name]",
   component: "[namespace]-[name]",
-}
+} satisfies Meta<StoryArgs>
 
-function Template({}) {
-  return html` <[namespace]-[name] /> `
+const Template: Story = {
+  render: ({}) => {
+    return html` <[namespace]-[name]></[namespace]-[name]>`
+  }
 }
 
-export const Regular = Template.bind({})
+export const Regular = {
+  ...Template,
+  args: {
+    // Add default args here
+  }
+}