@statistikzh/leu 0.24.1 → 0.25.0

package/package.json

@@ -3,7 +3,7 @@
   "description": "UI component library of the canton of zurich",
   "license": "MIT",
   "author": "statistikzh",
-  "version": "0.24.1",
+  "version": "0.25.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -24,18 +24,17 @@
   "homepage": "https://github.com/statistikzh/leu/",
   "scripts": {
     "analyze": "cem analyze --config custom-elements-manifest.config.js",
-    "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": "npm run build:js && npm run build:css && npm run analyze",
+    "build:js": "tsdown",
     "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 .ts,.js,.mjs,.html . --ignore-path .gitignore ",
+    "lint:eslint": "eslint .",
     "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 .ts,.js,.mjs,.html . --fix --ignore-path .gitignore",
+    "format:eslint": "eslint . --fix",
     "format:prettier": "prettier \"**/*.{ts,js,mjs,md,mdx,html,json}\" --write",
     "test": "web-test-runner --coverage",
     "test:watch": "web-test-runner --watch",
@@ -45,69 +44,57 @@
     "storybook:build": "npm run analyze && npm run build:css && storybook build --output-dir docs"
   },
   "dependencies": {
-    "@floating-ui/dom": "^1.6.13",
-    "lit": "^3.1.4"
+    "@floating-ui/dom": "^1.7.6",
+    "lit": "^3.3.2"
   },
   "devDependencies": {
-    "@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",
+    "@commitlint/cli": "^20.4.4",
+    "@commitlint/config-conventional": "^20.4.4",
+    "@custom-elements-manifest/analyzer": "^0.11.0",
+    "@open-wc/eslint-config": "^13.0.0",
     "@open-wc/testing": "^4.0.0",
-    "@rollup/plugin-commonjs": "^28.0.2",
     "@rollup/plugin-json": "^6.1.0",
-    "@rollup/plugin-replace": "^6.0.2",
-    "@storybook/addon-a11y": "^8.5.8",
-    "@storybook/addon-actions": "^8.5.8",
-    "@storybook/addon-designs": "^8.2.0",
-    "@storybook/addon-essentials": "^8.5.8",
-    "@storybook/blocks": "^8.5.8",
-    "@storybook/core-events": "^8.5.8",
-    "@storybook/manager-api": "^8.5.8",
-    "@storybook/theming": "^8.5.8",
-    "@storybook/web-components": "^8.5.8",
+    "@rollup/plugin-replace": "^6.0.3",
+    "@storybook/addon-a11y": "^10.2.19",
+    "@storybook/addon-designs": "^11.1.2",
+    "@storybook/addon-docs": "^10.2.19",
+    "@storybook/web-components-vite": "^10.2.19",
+    "@tsdown/css": "^0.21.3",
     "@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-esbuild": "^1.0.5",
     "@web/dev-server-rollup": "^0.6.4",
-    "@web/storybook-builder": "^0.2.1",
-    "@web/storybook-framework-web-components": "^0.2.0",
-    "@web/test-runner": "^0.20.0",
+    "@web/test-runner": "^0.20.2",
     "@web/test-runner-commands": "^0.9.0",
-    "@web/test-runner-playwright": "^0.11.0",
-    "@whitespace/storybook-addon-html": "^6.1.1",
+    "@web/test-runner-playwright": "^0.11.1",
+    "@whitespace/storybook-addon-html": "^9.0.0",
     "arg": "^5.0.2",
     "custom-element-jet-brains-integration": "^1.7.0",
     "custom-element-vs-code-integration": "^1.5.0",
     "custom-element-vuejs-integration": "^1.4.0",
-    "eslint": "^8.57.1",
-    "eslint-config-prettier": "^10.0.1",
-    "eslint-plugin-storybook": "^0.11.3",
-    "glob": "^11.0.1",
+    "eslint": "^9.39.4",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-storybook": "^10.2.19",
+    "glob": "^13.0.6",
+    "globals": "^17.4.0",
     "husky": "^9.1.7",
-    "lint-staged": "^15.4.3",
-    "nodemon": "^3.1.9",
-    "postcss": "^8.4.31",
-    "postcss-cli": "^11.0.0",
-    "postcss-import": "^16.1.0",
-    "postcss-lit": "^1.2.0",
-    "postcss-preset-env": "^10.1.5",
-    "prettier": "^3.5.2",
-    "react-syntax-highlighter": "^15.6.1",
-    "rimraf": "^6.0.1",
-    "rollup": "^4.34.8",
-    "rollup-plugin-dts": "^6.2.1",
+    "lint-staged": "^16.3.3",
+    "nodemon": "^3.1.14",
+    "postcss": "^8.5.8",
+    "postcss-cli": "^11.0.1",
+    "postcss-import": "^16.1.1",
+    "postcss-lit": "^1.4.1",
+    "postcss-preset-env": "^11.2.0",
+    "prettier": "^3.8.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",
-    "stylelint-config-recommended": "^15.0.0",
-    "stylelint-config-standard": "^37.0.0",
-    "typescript": "^5.7.3"
+    "rollup-plugin-postcss-lit": "^2.2.0",
+    "sinon": "^21.0.2",
+    "storybook": "^10.2.19",
+    "stylelint": "^17.4.0",
+    "stylelint-config-recommended": "^18.0.0",
+    "stylelint-config-standard": "^40.0.0",
+    "tsdown": "^0.21.3",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.57.0"
   },
   "prettier": {
     "semi": false
@@ -117,19 +104,15 @@
       "stylelint --fix"
     ],
     "*.{ts,js,mjs,html}": [
-      "eslint --fix",
+      "eslint --fix --no-warn-ignored",
       "prettier --write"
     ],
     "*.{md,json}": "prettier --write"
   },
-  "overrides": {
-    "estree-walker": "2.0.2"
-  },
   "esm.sh": {
     "bundle": false
   },
   "publishConfig": {
-    "access": "public",
-    "provenance": false
+    "access": "public"
   }
 }

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

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/web-components"
+import { Meta, StoryObj } from "@storybook/web-components-vite"
 import { html } from "lit"
 
 import "../[namespace]-[name].js"

package/src/components/accordion/Accordion.ts

@@ -4,7 +4,7 @@ import { property } from "lit/decorators.js"
 
 import { LeuElement } from "../../lib/LeuElement.js"
 
-import styles from "./accordion.css"
+import styles from "./accordion.css?inline"
 
 /**
  * @tagname leu-accordion

package/src/components/button/Button.ts

@@ -1,14 +1,15 @@
 import { html, nothing } from "lit"
 import { classMap } from "lit/directives/class-map.js"
 import { ifDefined } from "lit/directives/if-defined.js"
-import { property } from "lit/decorators.js"
+import { property, query } from "lit/decorators.js"
 
 import { LeuIcon } from "../icon/Icon.js"
 import { LeuElement } from "../../lib/LeuElement.js"
 import { HasSlotController } from "../../lib/hasSlotController.js"
 import { ARIA_CHECKED_ROLES, ARIA_SELECTED_ROLES } from "../../lib/a11y.js"
 
-import styles from "./button.css"
+import styles from "./button.css?inline"
+import { FormAssociatedMixin } from "../../lib/mixins/FormAssociatedMixin.js"
 
 /**
  * @tagname leu-button
@@ -17,7 +18,7 @@ import styles from "./button.css"
  * @slot - The label of the button or the icon if no label is set
  * @see https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=4-1444&mode=design&t=xu5Vii8jXKKCKDez-0
  */
-export class LeuButton extends LeuElement {
+export class LeuButton extends FormAssociatedMixin(LeuElement) {
   static dependencies = {
     "leu-icon": LeuIcon,
   }
@@ -109,6 +110,9 @@ export class LeuButton extends LeuElement {
   @property({ type: Boolean, reflect: true })
   fluid: boolean = false
 
+  @query(".button")
+  private button!: HTMLButtonElement
+
   private renderExpandingIcon() {
     if (typeof this.expanded !== "undefined" && this.variant === "ghost") {
       return html`<div class="icon-expanded">
@@ -157,6 +161,59 @@ export class LeuButton extends LeuElement {
     )
   }
 
+  // The form value is set at the very moment the button is clicked.
+  /* eslint-disable-next-line class-methods-use-this */
+  setFormValue() {}
+
+  protected handleClick(e: PointerEvent) {
+    if (this.disabled) {
+      e.preventDefault()
+      e.stopImmediatePropagation()
+      return
+    }
+
+    const form = this.internals.form
+
+    if (this.type === "button" || !form) {
+      return
+    }
+
+    if (this.type === "reset") {
+      form.reset()
+    }
+
+    /**
+     * Form associated custom elements don't trigger form submission when they have `type="submit"`.
+     * They also can't be passed as the submitter to `form.requestSubmit()`.
+     * To work around this, we create a temporary hidden button, trigger the submission through it and remove it afterwards.
+     * Hopefully we can move away from this workaround in the future.
+     */
+    if (this.type === "submit") {
+      const proxyButton = document.createElement("button")
+      Object.assign(proxyButton, {
+        type: "submit",
+        name: this.name,
+        value: this.getAttribute("value") ?? "",
+      })
+
+      form.appendChild(proxyButton)
+      form.requestSubmit(proxyButton)
+      form.removeChild(proxyButton)
+    }
+  }
+
+  click() {
+    this.button.click()
+  }
+
+  focus(options?: FocusOptions) {
+    this.button.focus(options)
+  }
+
+  blur() {
+    this.button.blur()
+  }
+
   render() {
     const hasTextContent = this.hasTextContent()
     const hasIconDefault = Boolean(this.querySelector("leu-icon"))
@@ -165,6 +222,7 @@ export class LeuButton extends LeuElement {
     const aria = this.getAriaAttributes()
 
     const cssClasses = {
+      button: true,
       "icon-only": hasIconDefault && !hasTextContent,
       "icon-before": hasIconBefore,
       "icon-after": hasIconAfter,
@@ -176,6 +234,7 @@ export class LeuButton extends LeuElement {
     }
     return html`
       <button
+        @click=${this.handleClick}
         aria-label=${ifDefined(aria.label)}
         aria-selected=${ifDefined(aria.selected)}
         aria-checked=${ifDefined(aria.checked)}

package/src/components/button/test/button.test.ts

@@ -2,10 +2,11 @@ import { html } from "lit"
 import { fixture, expect, elementUpdated, oneEvent } from "@open-wc/testing"
 
 import "../leu-button.js"
+import type { LeuButton } from "../leu-button.js"
 import "../../icon/leu-icon.js"
 
 async function defaultFixture() {
-  return fixture(html` <leu-button>button</leu-button>`)
+  return fixture<LeuButton>(html` <leu-button>button</leu-button>`)
 }
 
 describe("LeuButton", () => {
@@ -51,7 +52,7 @@ describe("LeuButton", () => {
   it("renders the icon slots at the correct position", async () => {
     const el = await fixture(
       html` <leu-button
-        ><leu-icon name="addBew" slot="before"></leu-icon>Sichern</leu-button
+        ><leu-icon name="addNew" slot="before"></leu-icon>Sichern</leu-button
       >`,
     )
 
@@ -64,7 +65,7 @@ describe("LeuButton", () => {
   })
 
   it("renders the expanded icon only when the variant is ghost", async () => {
-    const el = await fixture(
+    const el = await fixture<LeuButton>(
       html` <leu-button variant="ghost" expanded="true"
         ><leu-icon name="addNew" slot="before"></leu-icon>Sichern</leu-button
       >`,
@@ -88,7 +89,7 @@ describe("LeuButton", () => {
   })
 
   it("sets the dissabled attrbiute", async () => {
-    const el = await fixture(
+    const el = await fixture<LeuButton>(
       html` <leu-button variant="ghost" expanded="true" disabled>
         <leu-icon name="addNew" slot="before"></leu-icon>
         Sichern
@@ -106,7 +107,7 @@ describe("LeuButton", () => {
   })
 
   it("reflects the role attribute", async () => {
-    const el = await fixture(
+    const el = await fixture<LeuButton>(
       html` <leu-button variant="ghost" componentRole="menuitemradio"
         ><leu-icon name="addNew" slot="before"></leu-icon>Sichern</leu-button
       >`,
@@ -118,7 +119,7 @@ describe("LeuButton", () => {
   })
 
   it("sets the either checked or selected attribute depending on the role", async () => {
-    const el = await fixture(
+    const el = await fixture<LeuButton>(
       html` <leu-button variant="ghost" componentRole="menuitemradio" active
         ><leu-icon name="addNew" slot="before"></leu-icon>Sichern</leu-button
       >`,
@@ -154,7 +155,7 @@ describe("LeuButton", () => {
   })
 
   it("dispatches the click event", async () => {
-    const el = await fixture(html` <leu-button>Sichern</leu-button>`)
+    const el = await fixture<LeuButton>(html` <leu-button>Sichern</leu-button>`)
     const button = el.shadowRoot.querySelector("button")
 
     setTimeout(() => button.click())
@@ -163,4 +164,181 @@ describe("LeuButton", () => {
 
     expect(event).to.exist
   })
+
+  describe("form association", () => {
+    it("submits the form when type is submit", async () => {
+      const form = await fixture<HTMLFormElement>(html`
+        <form @submit=${(e: Event) => e.preventDefault()}>
+          <leu-button type="submit">Submit</leu-button>
+        </form>
+      `)
+
+      const button = form.querySelector<LeuButton>("leu-button")
+
+      setTimeout(() => button.click())
+      const event = await oneEvent(form, "submit")
+
+      expect(event).to.exist
+    })
+
+    it("submits the form with the button name and value", async () => {
+      let submittedData: FormData | null = null
+
+      const form = await fixture<HTMLFormElement>(html`
+        <form
+          @submit=${(e: SubmitEvent) => {
+            e.preventDefault()
+            submittedData = new FormData(form, e.submitter)
+          }}
+        >
+          <input type="text" name="field" value="test" />
+          <leu-button type="submit" name="action" value="save">Save</leu-button>
+        </form>
+      `)
+
+      const button = form.querySelector<LeuButton>("leu-button")
+
+      setTimeout(() => button.click())
+      await oneEvent(form, "submit")
+
+      expect(submittedData).to.not.be.null
+      expect(submittedData.get("action")).to.equal("save")
+      expect(submittedData.get("field")).to.equal("test")
+    })
+
+    it("submits an empty string as value when no value attribute is set", async () => {
+      let submittedData: FormData | null = null
+
+      const form = await fixture<HTMLFormElement>(html`
+        <form
+          @submit=${(e: SubmitEvent) => {
+            e.preventDefault()
+            submittedData = new FormData(form, e.submitter)
+          }}
+        >
+          <leu-button type="submit" name="action">Submit</leu-button>
+        </form>
+      `)
+
+      const button = form.querySelector<LeuButton>("leu-button")
+
+      setTimeout(() => button.click())
+      await oneEvent(form, "submit")
+
+      expect(submittedData.get("action")).to.equal("")
+    })
+
+    it("resets the form when type is reset", async () => {
+      const form = await fixture<HTMLFormElement>(html`
+        <form>
+          <input type="text" name="field" value="initial" />
+          <leu-button type="reset">Reset</leu-button>
+        </form>
+      `)
+
+      const input = form.querySelector<HTMLInputElement>("input")
+      input.value = "modified"
+      expect(input.value).to.equal("modified")
+
+      const button = form.querySelector<LeuButton>("leu-button")
+      button.click()
+
+      expect(input.value).to.equal("initial")
+    })
+
+    it("does not submit or reset the form when type is button", async () => {
+      let submitted = false
+      let reset = false
+
+      const form = await fixture<HTMLFormElement>(html`
+        <form
+          @submit=${(e: Event) => {
+            e.preventDefault()
+            submitted = true
+          }}
+          @reset=${() => {
+            reset = true
+          }}
+        >
+          <leu-button type="button">Click</leu-button>
+        </form>
+      `)
+
+      const button = form.querySelector<LeuButton>("leu-button")
+      button.click()
+
+      expect(submitted).to.be.false
+      expect(reset).to.be.false
+    })
+
+    it("does not submit or reset when the button is not inside a form", async () => {
+      const el = await fixture<LeuButton>(
+        html`<leu-button type="submit">Submit</leu-button>`,
+      )
+
+      // Should not throw
+      el.click()
+    })
+
+    it("does not submit or reset the form when disabled", async () => {
+      let submitted = false
+      let reset = false
+
+      const form = await fixture<HTMLFormElement>(html`
+        <form
+          @submit=${(e: Event) => {
+            e.preventDefault()
+            submitted = true
+          }}
+          @reset=${() => {
+            reset = true
+          }}
+        >
+          <leu-button type="submit" disabled>Submit</leu-button>
+          <leu-button type="reset" disabled>Reset</leu-button>
+        </form>
+      `)
+
+      const submitBtn = form.querySelectorAll<LeuButton>("leu-button")[0]
+      const resetBtn = form.querySelectorAll<LeuButton>("leu-button")[1]
+
+      submitBtn.click()
+      resetBtn.click()
+
+      expect(submitted).to.be.false
+      expect(reset).to.be.false
+    })
+
+    it("is form associated", async () => {
+      const form = await fixture<HTMLFormElement>(html`
+        <form>
+          <leu-button type="submit" name="btn">Submit</leu-button>
+        </form>
+      `)
+
+      const button = form.querySelector<LeuButton>("leu-button")
+
+      expect(button.form).to.equal(form)
+    })
+
+    it("responds to formDisabledCallback", async () => {
+      const form = await fixture<HTMLFormElement>(html`
+        <form>
+          <fieldset>
+            <leu-button type="submit">Submit</leu-button>
+          </fieldset>
+        </form>
+      `)
+
+      const fieldset = form.querySelector("fieldset")
+      const button = form.querySelector<LeuButton>("leu-button")
+
+      expect(button.disabled).to.be.false
+
+      fieldset.disabled = true
+      await elementUpdated(button)
+
+      expect(button.disabled).to.be.true
+    })
+  })
 })

package/src/components/button-group/ButtonGroup.ts

@@ -3,7 +3,7 @@ import { html } from "lit"
 import { LeuElement } from "../../lib/LeuElement.js"
 import { LeuButton } from "../button/Button.js"
 
-import styles from "./button-group.css"
+import styles from "./button-group.css?inline"
 
 /**
  * A radio input-like button group component.
@@ -34,9 +34,7 @@ export class LeuButtonGroup extends LeuElement {
 
   set value(newValue) {
     this._items.forEach((item) => {
-      /* eslint-disable no-param-reassign */
       item.active = LeuButtonGroup.getButtonValue(item) === newValue
-      /* eslint-enable no-param-reassign */
     })
   }
 
@@ -58,7 +56,6 @@ export class LeuButtonGroup extends LeuElement {
     let foundActiveButtonBefore = false
 
     this._items.forEach((item) => {
-      /* eslint-disable no-param-reassign */
       item.addEventListener("click", this._handleButtonClick)
       item.componentRole = "menuitemradio"
 
@@ -71,8 +68,6 @@ export class LeuButtonGroup extends LeuElement {
       } else if (item.active) {
         foundActiveButtonBefore = true
       }
-
-      /* eslint-enable no-param-reassign */
     })
   }
 

package/src/components/button-group/stories/button-group.stories.ts

@@ -3,7 +3,7 @@ import "../leu-button-group.js"
 import "../../button/leu-button.js"
 
 // https://stackoverflow.com/questions/72566428/storybook-angular-how-to-dynamically-update-args-from-the-template
-import { UPDATE_STORY_ARGS } from "@storybook/core-events" // eslint-disable-line
+import { UPDATE_STORY_ARGS } from "storybook/internal/core-events"
 function updateStorybookArgss(id, args) {
   const channel = window.__STORYBOOK_ADDONS_CHANNEL__
   channel.emit(UPDATE_STORY_ARGS, {

package/src/components/chart-wrapper/ChartWrapper.ts

@@ -3,7 +3,7 @@ import { property } from "lit/decorators.js"
 
 import { LeuElement } from "../../lib/LeuElement.js"
 
-import styles from "./chart-wrapper.css"
+import styles from "./chart-wrapper.css?inline"
 import { HasSlotController } from "../../lib/hasSlotController.js"
 import { LeuSpinner } from "../spinner/Spinner.js"
 

package/src/components/chart-wrapper/stories/chart-wrapper.stories.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/web-components"
+import { Meta, StoryObj } from "@storybook/web-components-vite"
 import { html } from "lit"
 
 import "../../dropdown/leu-dropdown.js"