@statistikzh/leu 0.14.4 → 0.15.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.14.4",
+  "version": "0.15.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",
@@ -72,18 +99,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 +128,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,65 +179,106 @@
           "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": []
           }
         },
         {
-          "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",
+          "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": [],
-          "slots": [{ "name": "", "description": "Slot for the buttons" }],
-          "events": [
+          "attributes": [
             {
-              "name": "input",
-              "type": "CustomEvent",
-              "description": "When the value of the group changes by clicking a button"
+              "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": "value",
-                "description": "The value of the currenty selected (active) button",
-                "type": "string"
-              }
+                "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": "input",
-                "type": "CustomEvent",
-                "description": "When the value of the group changes by clicking a button"
-              }
-            ]
+            "events": []
           }
         },
         {
@@ -227,36 +305,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 +974,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 +1142,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": []
           }

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.1",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/release-please-config.json

@@ -2,8 +2,7 @@
   "$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",
+  "always-update": true,
   "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
+  }
+}

package/scripts/postcss-leu-font-styles.cjs

@@ -35,20 +35,20 @@ function generateCustomPropertyDeclarations({
     {
       type: "font",
       name: varFont,
-      value: `var(${varFontSize}) / var(${varLineHeight}) var(${varFontFamily})`,
+      value: `normal var(${varFontSize}) / var(${varLineHeight}) var(${varFontFamily})`,
     },
   ]
 }
 
 function curveStepDeclarations(curvePrefix, stepStyle) {
   const fontSizeVar = stepStyle.declarations.find(
-    (s) => s.type === "fontSize"
+    (s) => s.type === "fontSize",
   ).name
   const lineHeightVar = stepStyle.declarations.find(
-    (s) => s.type === "lineHeight"
+    (s) => s.type === "lineHeight",
   ).name
   const spacingVar = stepStyle.declarations.find(
-    (s) => s.type === "spacing"
+    (s) => s.type === "spacing",
   ).name
   const fontVar = stepStyle.declarations.find((s) => s.type === "font").name
 
@@ -93,8 +93,8 @@ async function createLeuFontStyleNodes(file, postcss, nodeSource) {
   const fontStyleNodes = fontStyleDeclarations.flatMap((style) =>
     style.declarations.map(
       ({ name, value }) =>
-        new postcss.Declaration({ prop: name, value, source: nodeSource })
-    )
+        new postcss.Declaration({ prop: name, value, source: nodeSource }),
+    ),
   )
 
   const curveNodes = curves.flatMap((curve) =>
@@ -105,12 +105,12 @@ async function createLeuFontStyleNodes(file, postcss, nodeSource) {
         const [viewport, styleName] = step
 
         const stepStyle = fontStyleDeclarations.find(
-          (s) => s.name === styleName && s.fontWeight === fontWeight
+          (s) => s.name === styleName && s.fontWeight === fontWeight,
         )
 
         const nodes = curveStepDeclarations(curvePrefix, stepStyle).map(
           ({ prop, value }) =>
-            new postcss.Declaration({ prop, value, source: nodeSource })
+            new postcss.Declaration({ prop, value, source: nodeSource }),
         )
 
         return viewport === null
@@ -122,7 +122,7 @@ async function createLeuFontStyleNodes(file, postcss, nodeSource) {
               source: nodeSource,
             })
       })
-    })
+    }),
   )
 
   return [...fontStyleNodes, ...curveNodes]
@@ -143,7 +143,7 @@ module.exports = () => ({
       const nodes = await createLeuFontStyleNodes(
         path.resolve(rootDir, jsonFile),
         postcss,
-        atRule.source
+        atRule.source,
       )
 
       atRule.replaceWith(nodes)