@statistikzh/leu 0.24.2 → 0.26.0

package/package.json

@@ -3,7 +3,7 @@
   "description": "UI component library of the canton of zurich",
   "license": "MIT",
   "author": "statistikzh",
-  "version": "0.24.2",
+  "version": "0.26.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,14 +104,11 @@
       "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
   },

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,16 @@
 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 { LeuSpinner } from "../spinner/Spinner.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,9 +19,10 @@ 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,
+    "leu-spinner": LeuSpinner,
   }
 
   static styles = [LeuElement.styles, styles]
@@ -109,6 +112,15 @@ export class LeuButton extends LeuElement {
   @property({ type: Boolean, reflect: true })
   fluid: boolean = false
 
+  /**
+   * Replaces the content with a spinner
+   */
+  @property({ type: Boolean, reflect: true })
+  loading: 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 +169,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 || this.loading) {
+      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,24 +230,28 @@ export class LeuButton extends LeuElement {
     const aria = this.getAriaAttributes()
 
     const cssClasses = {
+      button: true,
       "icon-only": hasIconDefault && !hasTextContent,
       "icon-before": hasIconBefore,
       "icon-after": hasIconAfter,
       round: this.round,
       active: this.active,
+      disabled: this.disabled,
       inverted: this.inverted,
+      loading: this.loading,
       [this.variant]: true,
       [this.size]: true,
     }
     return html`
       <button
+        @click=${this.handleClick}
         aria-label=${ifDefined(aria.label)}
         aria-selected=${ifDefined(aria.selected)}
         aria-checked=${ifDefined(aria.checked)}
         aria-expanded=${ifDefined(this.expanded)}
         role=${ifDefined(aria.role)}
         class=${classMap(cssClasses)}
-        ?disabled=${this.disabled}
+        ?disabled=${this.disabled || this.loading}
         type=${this.type}
       >
         <div class="icon-wrapper icon-wrapper--before">
@@ -192,7 +261,9 @@ export class LeuButton extends LeuElement {
         <div class="icon-wrapper icon-wrapper--after">
           <slot name="after" class="icon-wrapper__slot"></slot>
         </div>
-
+        ${this.loading
+          ? html`<leu-spinner class="spinner"></leu-spinner>`
+          : nothing}
         ${this.renderExpandingIcon()}
       </button>
     `

package/src/components/button/button.css

@@ -2,7 +2,12 @@
   display: inline-block;
 }
 
+/*
+ * @todo : Disable hover styles for loading state
+ */
 button {
+  position: relative;
+
   font-family: var(--leu-font-family-black);
   text-align: center;
   appearance: none;
@@ -28,10 +33,14 @@ button.round {
   border-radius: 50%;
 }
 
-button:disabled {
+button.disabled {
   cursor: not-allowed;
 }
 
+button.loading {
+  cursor: wait;
+}
+
 button:focus-visible {
   outline: 2px solid var(--leu-color-func-cyan);
   outline-offset: 2px;
@@ -46,6 +55,10 @@ button.inverted:focus-visible {
   justify-content: center;
 }
 
+button.loading :where(.content, .icon-wrapper) {
+  visibility: hidden;
+}
+
 /* size - regular */
 button.regular {
   padding: 12px 24px;
@@ -90,7 +103,7 @@ button.primary.active:hover {
   background: var(--leu-color-black-transp-80);
 }
 
-button.primary:disabled {
+button.primary.disabled {
   color: var(--leu-color-black-0);
   background: var(--leu-color-black-transp-20);
 }
@@ -115,7 +128,7 @@ button.secondary.active:hover {
   background: var(--leu-color-black-transp-80);
 }
 
-button.secondary:disabled {
+button.secondary.disabled {
   color: var(--leu-color-black-transp-20);
   background: var(--leu-color-black-transp-5);
 }
@@ -139,7 +152,7 @@ button.ghost.active {
   color: var(--leu-color-black-100);
 }
 
-button.ghost:disabled {
+button.ghost.disabled {
   color: var(--leu-color-black-20);
 }
 
@@ -159,7 +172,7 @@ button.primary.inverted.active {
   background: var(--leu-color-black-100);
 }
 
-button.primary.inverted:disabled {
+button.primary.inverted.disabled {
   color: var(--leu-color-black-40);
   background: var(--leu-color-white-transp-70);
 }
@@ -180,7 +193,7 @@ button.secondary.inverted.active {
   background: var(--leu-color-black-0);
 }
 
-button.secondary.inverted:disabled {
+button.secondary.inverted.disabled {
   color: var(--leu-color-white-transp-70);
   background: var(--leu-color-black-transp-10);
 }
@@ -198,7 +211,7 @@ button.ghost.inverted.active {
   color: var(--leu-color-black-0);
 }
 
-button.ghost.inverted:disabled {
+button.ghost.inverted.disabled {
   color: var(--leu-color-black-20);
 }
 
@@ -249,7 +262,7 @@ button.ghost.inverted:disabled {
   --_color: var(--leu-color-black-0);
 }
 
-.ghost:disabled .icon-wrapper {
+.ghost.disabled .icon-wrapper {
   --_bg: var(--leu-color-black-transp-5);
 }
 
@@ -264,7 +277,7 @@ button.ghost.inverted:disabled {
   --_color: var(--leu-color-black-0);
 }
 
-.ghost.inverted:disabled .icon-wrapper {
+.ghost.inverted.disabled .icon-wrapper {
   --_bg: var(--leu-color-black-transp-20);
   --_color: var(--leu-color-white-transp-70);
 }
@@ -286,3 +299,18 @@ button.ghost.inverted:disabled {
 :host([expanded="true"]) .icon-expanded {
   transform: rotate(180deg);
 }
+
+.spinner {
+  --leu-spinner-size: 1.75rem;
+  padding: 0;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: currentcolor;
+  display: block;
+}
+
+button.small .spinner {
+  --leu-spinner-size: 1.25rem;
+}

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

@@ -41,6 +41,7 @@ function Template(args = {}) {
         ?active=${args.active}
         ?inverted=${args.inverted}
         ?disabled=${args.disabled}
+        ?loading=${args.loading}
         @click=${copyContent}
       >
         ${args.icon
@@ -87,6 +88,7 @@ Regular.argTypes = {
   disabled: { control: "boolean" },
   round: { control: "boolean" },
   active: { control: "boolean" },
+  loading: { control: "boolean" },
 }
 Regular.args = {
   content: "Click Mich...",
@@ -125,6 +127,22 @@ const items = [
     disabled: true,
   },
 
+  { content: "Normal", icon: "calendar", iconPosition: "after", loading: true },
+  {
+    content: "Active",
+    icon: "calendar",
+    iconPosition: "after",
+    active: true,
+    loading: true,
+  },
+  {
+    content: "Disabled",
+    icon: "calendar",
+    iconPosition: "after",
+    disabled: true,
+    loading: true,
+  },
+
   { icon: "calendar" },
   { icon: "calendar", active: true },
   { icon: "calendar", disabled: true },
@@ -132,6 +150,10 @@ const items = [
   { icon: "calendar", round: true },
   { icon: "calendar", round: true, active: true },
   { icon: "calendar", round: true, disabled: true },
+
+  { icon: "calendar", round: true, loading: true },
+  { icon: "calendar", round: true, active: true, loading: true },
+  { icon: "calendar", round: true, disabled: true, loading: true },
 ]
 
 const ghostItems = [
@@ -309,6 +331,7 @@ function TemplateOverview() {
                         ?active=${item.active}
                         ?disabled=${item.disabled}
                         ?inverted=${group.inverted}
+                        ?loading=${item.loading}
                         @click=${copyContent}
                       >
                         ${item.icon