@statistikzh/leu 0.24.2 → 0.26.0

package/.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  ".": "0.24.2"
+  ".": "0.26.0"
 }

package/.storybook/main.ts

@@ -1,69 +1,34 @@
-import rollupJson from "@rollup/plugin-json"
-import rollupCommonjs from "@rollup/plugin-commonjs"
-import rollupTypescript from "rollup-plugin-typescript2"
-import { StorybookConfig } from "@web/storybook-framework-web-components"
+import { defineMain } from "@storybook/web-components-vite/node"
+import { commonConfig } from "../tsdown.config.ts"
 
-import { fileURLToPath } from "url"
-
-import { plugins as rollupPlugins } from "../rollup.config.js"
-
-const config: StorybookConfig = {
+export default defineMain({
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
   addons: [
-    "@storybook/addon-essentials",
     "@storybook/addon-designs",
     "@whitespace/storybook-addon-html",
     "@storybook/addon-a11y",
+    "@storybook/addon-docs",
   ],
   staticDirs: ["static"],
-  framework: {
-    name: "@web/storybook-framework-web-components",
-  },
+  framework: "@storybook/web-components-vite",
   docs: {},
   core: {
-    disableTelemetry: true, // 👈 Disables telemetry
+    disableTelemetry: true,
   },
   previewHead: (head) => {
-    /**
-     * Workaround to get the build process working
-     * @web/storybook-builder sets `extractAssets: true`
-     * for the rollup html plugin. But the same path doesn't
-     * work in th development environment.
-     * */
-    const basePath =
-      process.env.NODE_ENV === "production" ? ".storybook/static/" : ""
     return `
-    ${head}
-    <link rel="stylesheet" href="${basePath}fonts.css" />
-    <link rel="stylesheet" href="${basePath}theme.css" />
-  `
-  },
-  async wdsFinal(config) {
-    config.open = false
-    return config
+      ${head}
+      <link rel="stylesheet" href="fonts.css" />
+      <link rel="stylesheet" href="theme.css" />
+    `
   },
-  async rollupFinal(config) {
-    config.plugins = [
-      rollupTypescript({
-        tsconfig: fileURLToPath(
-          new URL("../tsconfig.build.json", import.meta.url),
-        ),
-        tsconfigOverride: {
-          compilerOptions: {
-            declarationMap: false,
-            emitDeclarationOnly: false,
-            declaration: false,
-            noEmit: false,
-          },
-        },
-      }),
-      ...config.plugins,
-      ...rollupPlugins.map((p) => p.plugin(...p.args)),
-      rollupCommonjs(),
-      rollupJson(),
-    ]
+  async viteFinal(config) {
+    /* eslint-disable-next-line import-x/no-extraneous-dependencies */
+    const { mergeConfig } = await import("vite")
 
-    return config
+    return mergeConfig(config, {
+      plugins: [...commonConfig.plugins],
+      define: commonConfig.define,
+    })
   },
-}
-export default config
+})

package/.storybook/manager.ts

@@ -1,9 +1,6 @@
-import { addons } from "@storybook/manager-api"
+import { addons } from "storybook/manager-api"
 import { theme } from "./theme.js"
 
 addons.setConfig({
   theme,
-  sidebar: {
-    showRoots: false,
-  },
 })

package/.storybook/preview.ts

@@ -1,12 +1,13 @@
 /** @type { import('@storybook/web-components').Preview } */
 
-import { setCustomElementsManifest } from "@storybook/web-components"
+import { setCustomElementsManifest } from "@storybook/web-components-vite"
 import customElemenents from "../dist/custom-elements.json"
 
 setCustomElementsManifest(customElemenents)
 
 const preview = {
   tags: ["autodocs"],
+
   parameters: {
     actions: { argTypesRegex: "^on[A-Z].*" },
     controls: {
@@ -25,7 +26,7 @@ const preview = {
       },
     },
     viewport: {
-      viewports: [
+      options: [
         {
           name: "Micro",
           styles: { width: "320px", height: "568px" },
@@ -59,29 +60,35 @@ const preview = {
       ],
     },
     backgrounds: {
-      default: "light",
-      values: [
-        { name: "light", value: "#fffffe" },
-        { name: "light grey", value: "#f7f7f7" },
-        { name: "blue", value: "#0076bd" },
-        { name: "darkblue", value: "#00407c" },
-        { name: "turquoise", value: "#00797b" },
-        { name: "green", value: "#1a7f1f" },
-        { name: "bordeaux", value: "#b01657" },
-        { name: "magenta", value: "#d40053" },
-        { name: "violet", value: "#7f3da7" },
-        { name: "gray", value: "#666666" },
-      ],
+      options: {
+        light: { name: "light", value: "#fffffe" },
+        light_grey: { name: "light grey", value: "#f7f7f7" },
+        blue: { name: "blue", value: "#0076bd" },
+        darkblue: { name: "darkblue", value: "#00407c" },
+        turquoise: { name: "turquoise", value: "#00797b" },
+        green: { name: "green", value: "#1a7f1f" },
+        bordeaux: { name: "bordeaux", value: "#b01657" },
+        magenta: { name: "magenta", value: "#d40053" },
+        violet: { name: "violet", value: "#7f3da7" },
+        gray: { name: "gray", value: "#666666" },
+      },
     },
     html: {
       root: "#root-inner",
+      removeComments: /\?lit\$[0-9]+\$/,
+      removeEmptyComments: true,
       prettier: {
         tabWidth: 2,
         useTabs: false,
-        removeComments: true,
       },
     },
   },
+
+  initialGlobals: {
+    backgrounds: {
+      value: "light",
+    },
+  },
 }
 
 export default preview

package/.storybook/theme.ts

@@ -1,4 +1,4 @@
-import { create } from "@storybook/theming/create"
+import { create } from "storybook/theming/create"
 
 export const theme = create({
   base: "dark",

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # Changelog
 
+## [0.26.0](https://github.com/statistikZH/leu/compare/leu-v0.25.0...leu-v0.26.0) (2026-03-25)
+
+
+### Features
+
+* **button:** add loading property ([1e494ac](https://github.com/statistikZH/leu/commit/1e494aca16735727120858e9d94612979ba4f24a))
+
+## [0.25.0](https://github.com/statistikZH/leu/compare/leu-v0.24.2...leu-v0.25.0) (2026-03-23)
+
+
+### Features
+
+* **button:** define as form-associated custom element ([4c4f782](https://github.com/statistikZH/leu/commit/4c4f782be1dbfa10aed1b1ada7e40afdcf5af5db))
+* **checkbox:** define as form-associated custom element ([4c4f782](https://github.com/statistikZH/leu/commit/4c4f782be1dbfa10aed1b1ada7e40afdcf5af5db))
+* **radio:** define as form-associated custom element ([4c4f782](https://github.com/statistikZH/leu/commit/4c4f782be1dbfa10aed1b1ada7e40afdcf5af5db))
+
+
+### Bug Fixes
+
+* update dependencies ([004db11](https://github.com/statistikZH/leu/commit/004db111c3f2b0a5aba7faccfb2d71eca653d188))
+
 ## [0.24.2](https://github.com/statistikZH/leu/compare/leu-v0.24.1...leu-v0.24.2) (2026-03-10)
 
 

package/CONTRIBUTING.md

@@ -10,22 +10,33 @@ To submit a contribution:
 
 ## Collaboration guidelines
 
-We don't want to enforce to many rules on how to collaborate on this project. But there are a few things that should be considered when contributing to this project.
+We don't want to enforce to many rules on how to collaborate on this project.
+But there are a few things that should be considered when contributing to this
+project.
 
 ### Commit messages
 
-We enforce [conventional commit](https://www.conventionalcommits.org/en/v1.0.0/) messages with [commitlint](https://commitlint.js.org/#/). This way we can automatically generate a changelog and version the project with Release Please accordingly.
+We enforce
+[conventional commit](https://www.conventionalcommits.org/en/v1.0.0/) messages
+with [commitlint](https://commitlint.js.org/#/). This way we can automatically
+generate a changelog and version the project with Release Please accordingly.
 
-If you're working on a component, please use its name as the scope of the commit message.
-For example:
+If you're working on a component, please use its name as the scope of the commit
+message. For example:
 
-You've added a new feature to the `leu-radio` component. Your commit message should look like this:
+You've added a new feature to the `leu-radio` component. Your commit message
+should look like this:
 
 ```bash
-git commit -m "feat(leu-radio): add new feature"
+git commit -m "feat(radio): add new feature"
 ```
 
 ### Branching
 
-All new features should be developed in a feature branch that is branched off from the `main` branch. Each branch can then be linked to the respective issue on GitHub. Please do not merge feature branches into each other. Try to merge into the `main` branch as soon as possible. This way we can keep the `main` branch up to date and avoid having dependencies between feature branches.
-The feature branch should always be prefixed with the issue number (e.g. `48-dropdown`).
+All new features should be developed in a feature branch that is branched off
+from the `main` branch. Each branch can then be linked to the respective issue
+on GitHub. Please do not merge feature branches into each other. Try to merge
+into the `main` branch as soon as possible. This way we can keep the `main`
+branch up to date and avoid having dependencies between feature branches. The
+feature branch should always be prefixed with the issue number (e.g.
+`48-dropdown`).

package/dist/Accordion-B04QkmHz.js

@@ -0,0 +1,241 @@
+import { t as LeuElement } from "./LeuElement-BeFrgKes.js";
+import { t as __decorate } from "./decorate-DwpAc4D0.js";
+import { css, nothing } from "lit";
+import { html as html$1, unsafeStatic } from "lit/static-html.js";
+import { property } from "lit/decorators.js";
+//#region src/components/accordion/accordion.css?inline
+var accordion_default = css`:host {
+  --accordion-font-regular: var(--leu-font-family-regular);
+  --accordion-font-black: var(--leu-font-family-black);
+
+  --accordion-toggle-font: var(--accordion-font-black);
+
+  --label-color: var(--leu-color-black-60);
+  --label-color-active: var(--leu-color-black-100);
+
+  --divider-color: var(--leu-color-black-20);
+  --divider-color-active: var(--leu-color-black-100);
+
+  --transition: 0.1s ease;
+
+  font-family: var(--accordion-font-regular);
+
+  position: relative;
+}
+.heading {
+  margin: 0;
+}
+.button {
+  width: 100%;
+  background: none;
+  padding: 1rem 0;
+  margin: 0;
+  cursor: pointer;
+
+  border: none;
+
+  color: var(--label-color);
+  font-family: var(--accordion-toggle-font);
+  font-size: 1rem;
+  line-height: 1.5rem;
+  text-align: left;
+
+  display: flex;
+  gap: 0.25rem;
+
+  transition: color var(--transition);
+}
+@media (min-width: 600px) {
+.button {
+    font-size: 1.125rem;
+    gap: 0.8rem;
+}
+  }
+@media (min-width: 1280px) {
+.button {
+    font-size: 1.25rem;
+    line-height: 1.625rem;
+}
+  }
+.button:focus-visible {
+  outline: 2px solid var(--leu-color-func-cyan);
+  outline-offset: 4px;
+}
+.button:hover,
+.button:focus-visible,
+:host([open]) .button {
+  color: var(--label-color-active);
+}
+.plus {
+  position: relative;
+  flex: 0 0 1rem;
+  aspect-ratio: 1;
+  align-self: center;
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+.plus::before,
+.plus::after {
+  content: "";
+
+  position: absolute;
+  top: calc(50% - 0.0625rem);
+  left: 0;
+
+  display: block;
+  width: 1rem;
+  height: 0.125rem;
+  aspect-ratio: 1 / 0.125;
+  background-color: currentcolor;
+  transition: transform var(--transition);
+}
+.plus::before {
+  transform: rotate(90deg);
+}
+:host([open]) .plus::before {
+  transform: rotate(180deg);
+}
+.label {
+  display: block;
+  flex-grow: 1;
+}
+.contentwrapper {
+  display: grid;
+  grid-template-rows: 1fr;
+  transition: grid-template-rows var(--transition);
+}
+.content {
+  overflow: hidden;
+}
+.contentwrapper[hidden] {
+  grid-template-rows: 0fr;
+  opacity: 0;
+  visibility: hidden;
+}
+slot[name="content"] {
+  display: block;
+  padding: 0.5rem 0 1.5rem;
+}
+@media (min-width: 840px) {
+slot[name="content"] {
+    padding: 0.75rem 0 1.5rem;
+}
+  }
+@media (min-width: 1280px) {
+slot[name="content"] {
+    padding: 1rem 0 2.5rem;
+}
+  }
+.divider {
+  width: 100%;
+  height: 1px;
+  margin: 0;
+
+  border: none;
+  background-color: var(--divider-color);
+
+  transition:
+    transform var(--transition), background-color var(--transition);
+}
+:host(:not([open])) .heading:hover ~ .divider {
+  background-color: var(--divider-color-active);
+  transform: scaleY(3);
+}
+:host(:not([open])) .heading:focus-visible ~ .divider {
+  background-color: var(--divider-color-active);
+  transform: scaleY(3);
+}
+`;
+//#endregion
+//#region src/components/accordion/Accordion.ts
+/**
+* @tagname leu-accordion
+* @slot content - The content of the accordion. No styles will be applied to the content.
+* @attr {number} heading-level - The heading level of the accordion title. Must be between 1 and 6.
+* @attr {string} label-prefix - The prefix of the accordion label. e.g. "01"
+*/
+var LeuAccordion = class extends LeuElement {
+	constructor(..._args) {
+		super(..._args);
+		this.headingLevel = 2;
+		this.open = false;
+		this.label = "";
+		this.labelPrefix = "";
+	}
+	static {
+		this.styles = [LeuElement.styles, accordion_default];
+	}
+	static {
+		this.shadowRootOptions = {
+			...LeuElement.shadowRootOptions,
+			delegatesFocus: true
+		};
+	}
+	/**
+	* Determines the heading tag of the accordion toggle.
+	* The headingLevel shouldn't be used directly to render the heading tag
+	* in order to avoid XSS issues.
+	* @internal
+	*/
+	_getHeadingTag() {
+		let level = 2;
+		if (this.headingLevel > 0 && this.headingLevel < 7) level = Math.floor(this.headingLevel);
+		return `h${level}`;
+	}
+	/**
+	* Toggles the accordion open state.
+	* @internal
+	*/
+	_handleToggleClick() {
+		this.open = !this.open;
+	}
+	render() {
+		const hTag = this._getHeadingTag();
+		return html$1`<${unsafeStatic(hTag)} class="heading"><button
+        id="toggle"
+        type="button"
+        class="button"
+        aria-controls="contentwrapper"
+        aria-expanded="${this.open}"
+        @click=${this._handleToggleClick}
+      >
+        ${this.labelPrefix ? html$1`<span class="label-prefix">${this.labelPrefix}</span>` : nothing}
+        <span class="label">${this.label}</span>
+        <div class="plus"></div>
+      </button></${unsafeStatic(hTag)}>
+      <div
+        id="contentwrapper"
+        class="contentwrapper"
+        ?hidden=${!this.open}
+        aria-labelledby="toggle"
+        role="region"
+      >
+        <div
+          class="content"
+        >
+          <slot name="content"></slot>
+        </div>
+      </div>
+      <hr class="divider" />`;
+	}
+};
+__decorate([property({
+	type: Number,
+	attribute: "heading-level",
+	reflect: true
+})], LeuAccordion.prototype, "headingLevel", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], LeuAccordion.prototype, "open", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], LeuAccordion.prototype, "label", void 0);
+__decorate([property({
+	type: String,
+	attribute: "label-prefix",
+	reflect: true
+})], LeuAccordion.prototype, "labelPrefix", void 0);
+//#endregion
+export { LeuAccordion as t };

package/dist/Accordion.d.ts

@@ -1,7 +1,7 @@
-import * as lit_html from 'lit-html';
-import * as lit from 'lit';
-import { L as LeuElement } from './LeuElement.d-BevHqLUu.js';
+import { t as LeuElement } from "./LeuElement-pJFU18Xm.js";
+import * as lit_html0 from "lit-html";
 
+//#region src/components/accordion/Accordion.d.ts
 /**
  * @tagname leu-accordion
  * @slot content - The content of the accordion. No styles will be applied to the content.
@@ -9,45 +9,45 @@ import { L as LeuElement } from './LeuElement.d-BevHqLUu.js';
  * @attr {string} label-prefix - The prefix of the accordion label. e.g. "01"
  */
 declare class LeuAccordion extends LeuElement {
-    static styles: lit.CSSResultGroup[];
-    /** @internal */
-    static shadowRootOptions: {
-        delegatesFocus: boolean;
-        mode: ShadowRootMode;
-        serializable?: boolean;
-        slotAssignment?: SlotAssignmentMode;
-        customElements?: CustomElementRegistry;
-        registry?: CustomElementRegistry;
-    };
-    /**
-     * The heading level of the accordion title. Must be between 1 and 6.
-     */
-    headingLevel: number;
-    /**
-     * The expanded state of the accordion.
-     */
-    open: boolean;
-    /**
-     * The label (title) of the accordion
-     */
-    label: string;
-    /**
-     * The prefix of the accordion label. e.g. "01"
-     */
-    labelPrefix: string;
-    /**
-     * Determines the heading tag of the accordion toggle.
-     * The headingLevel shouldn't be used directly to render the heading tag
-     * in order to avoid XSS issues.
-     * @internal
-     */
-    private _getHeadingTag;
-    /**
-     * Toggles the accordion open state.
-     * @internal
-     */
-    private _handleToggleClick;
-    render(): lit_html.TemplateResult;
+  static styles: any[];
+  /** @internal */
+  static shadowRootOptions: {
+    delegatesFocus: boolean;
+    clonable?: boolean;
+    customElementRegistry?: CustomElementRegistry;
+    mode: ShadowRootMode;
+    serializable?: boolean;
+    slotAssignment?: SlotAssignmentMode;
+  };
+  /**
+   * The heading level of the accordion title. Must be between 1 and 6.
+   */
+  headingLevel: number;
+  /**
+   * The expanded state of the accordion.
+   */
+  open: boolean;
+  /**
+   * The label (title) of the accordion
+   */
+  label: string;
+  /**
+   * The prefix of the accordion label. e.g. "01"
+   */
+  labelPrefix: string;
+  /**
+   * Determines the heading tag of the accordion toggle.
+   * The headingLevel shouldn't be used directly to render the heading tag
+   * in order to avoid XSS issues.
+   * @internal
+   */
+  private _getHeadingTag;
+  /**
+   * Toggles the accordion open state.
+   * @internal
+   */
+  private _handleToggleClick;
+  render(): lit_html0.TemplateResult;
 }
-
-export { LeuAccordion };
+//#endregion
+export { LeuAccordion };