@statistikzh/leu 0.27.0 → 0.28.0

package/.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  ".": "0.27.0"
+  ".": "0.28.0"
 }

package/.storybook/main.ts

@@ -5,7 +5,6 @@ export default defineMain({
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
   addons: [
     "@storybook/addon-designs",
-    "@whitespace/storybook-addon-html",
     "@storybook/addon-a11y",
     "@storybook/addon-docs",
   ],
@@ -20,6 +19,7 @@ export default defineMain({
       ${head}
       <link rel="stylesheet" href="fonts.css" />
       <link rel="stylesheet" href="theme.css" />
+      <link rel="stylesheet" href="global.css" />
     `
   },
   async viteFinal(config) {

package/.storybook/preview.ts

@@ -1,11 +1,12 @@
-/** @type { import('@storybook/web-components').Preview } */
-
-import { setCustomElementsManifest } from "@storybook/web-components-vite"
+import {
+  setCustomElementsManifest,
+  type Preview,
+} from "@storybook/web-components-vite"
 import customElemenents from "../dist/custom-elements.json"
 
 setCustomElementsManifest(customElemenents)
 
-const preview = {
+const preview: Preview = {
   tags: ["autodocs"],
 
   parameters: {
@@ -15,6 +16,7 @@ const preview = {
         color: /(background|color)$/i,
       },
     },
+    docs: { codePanel: true, source: { language: "html" } },
     options: {
       storySort: {
         order: [

package/.storybook/static/global.css

@@ -0,0 +1,5 @@
+p {
+  font: var(--leu-t-curve-regular-regular-font);
+  margin: 0 0 var(--leu-t-curve-regular-regular-spacing) 0;
+  color: var(--leu-color-black-60);
+}

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # Changelog
 
+## [0.28.0](https://github.com/statistikZH/leu/compare/leu-v0.27.0...leu-v0.28.0) (2026-04-09)
+
+
+### ⚠ BREAKING CHANGES
+
+* **button:** The `fluid` property is removed. The underlying <button> or <a> element now takes up the whole width of the host element. The width of the host element can be controlled with css from the outside. The only exception are configurations that only show an icon and therefore should be displayed with an aspect ratio of 1.
+
+### Features
+
+* **button:** add href property so that the component can be used as a link ([18be699](https://github.com/statistikZH/leu/commit/18be6998e9faa21254717f429c79ac72275bd428))
+* **tabs:** add leu-tab-group, leu-tab and leu-tab-panel components ([9565a9f](https://github.com/statistikZH/leu/commit/9565a9f27aa1bef2daf097a93adee525ef19f040))
+
+
+### Bug Fixes
+
+* fix vulnerabilities ([f22cf81](https://github.com/statistikZH/leu/commit/f22cf815dc4607b318751dba8987baa36422c8a6))
+* **select:** remove deprecated fluid property from leu-button ([18be699](https://github.com/statistikZH/leu/commit/18be6998e9faa21254717f429c79ac72275bd428))
+
+
+### Code Refactoring
+
+* **button:** remove `fluid` property ([18be699](https://github.com/statistikZH/leu/commit/18be6998e9faa21254717f429c79ac72275bd428))
+
 ## [0.27.0](https://github.com/statistikZH/leu/compare/leu-v0.26.0...leu-v0.27.0) (2026-04-02)
 
 

package/dist/{Accordion-DLsqXcK8.js → Accordion-D9kLsiBW.js}

@@ -1,4 +1,4 @@
-import { t as LeuElement } from "./LeuElement-k4RjIeoG.js";
+import { t as LeuElement } from "./LeuElement-DQI8cqZV.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";

package/dist/Accordion.d.ts

@@ -1,4 +1,4 @@
-import { t as LeuElement } from "./LeuElement-pJFU18Xm.js";
+import { t as LeuElement } from "./LeuElement-DK1jntuu.js";
 import * as lit_html0 from "lit-html";
 
 //#region src/components/accordion/Accordion.d.ts

package/dist/Accordion.js

@@ -1,3 +1,3 @@
-import "./LeuElement-k4RjIeoG.js";
-import { t as LeuAccordion } from "./Accordion-DLsqXcK8.js";
+import "./LeuElement-DQI8cqZV.js";
+import { t as LeuAccordion } from "./Accordion-D9kLsiBW.js";
 export { LeuAccordion };

package/dist/{Button-BgNUxmo_.d.ts → Button-DcuvEVkC.d.ts}

@@ -1,7 +1,7 @@
-import { t as LeuElement } from "./LeuElement-pJFU18Xm.js";
-import { t as FormAssociatedMixinType } from "./FormAssociatedMixin-Cc74LjbC.js";
-import { t as LeuIcon } from "./Icon-Op80LrrO.js";
-import { t as LeuSpinner } from "./Spinner-CrM1enM0.js";
+import { t as LeuElement } from "./LeuElement-DK1jntuu.js";
+import { t as FormAssociatedMixinType } from "./FormAssociatedMixin-Cw7LsSUE.js";
+import { t as LeuIcon } from "./Icon-CUfh3eb3.js";
+import { t as LeuSpinner } from "./Spinner-DHYaX6-Y.js";
 import * as lit_html0 from "lit-html";
 
 //#region src/components/button/Button.d.ts
@@ -42,15 +42,21 @@ declare class LeuButton extends LeuButton_base {
    */
   variant: "primary" | "secondary" | "ghost";
   /**
-   * The `type` of the underlying button element.
+   * The `type` of the underlying button element. Ignored when `href` is set.
    */
   type: "button" | "submit" | "reset";
   /**
-   * The `role` of the underlying button element.
+   * The `role` of the underlying button element. Ignored when `href` is set.
    */
   componentRole?: string;
   /**
-   * Whether the button is disabled or not.
+   * If set, renders the button as an <a> element instead of a <button> with the provided href.
+   */
+  href: string;
+  /** Tells the browser where to display the linked URL. Only used when `href` is set. */
+  target: "_blank" | "_parent" | "_self" | "_top";
+  /**
+   * Whether the button is disabled or not. Ignored when `href` is set.
    * @type {boolean}
    */
   disabled: boolean;
@@ -76,10 +82,6 @@ declare class LeuButton extends LeuButton_base {
    * If it is set, the icon will either show an expanded or collapsed state.
    */
   expanded?: "true" | "false";
-  /**
-   * Alters the shape of the button to be full width of its parent container
-   */
-  fluid: boolean;
   /**
    * Replaces the content with a spinner
    */
@@ -93,7 +95,7 @@ declare class LeuButton extends LeuButton_base {
   click(): void;
   focus(options?: FocusOptions): void;
   blur(): void;
-  render(): lit_html0.TemplateResult<1>;
+  render(): lit_html0.TemplateResult;
 }
 //#endregion
 export { LeuButton as t };

package/dist/{Button-BSyDL_cV.js → Button-DyNVOHCd.js}

@@ -1,10 +1,11 @@
-import { t as LeuElement } from "./LeuElement-k4RjIeoG.js";
+import { t as LeuElement } from "./LeuElement-DQI8cqZV.js";
 import { t as __decorate } from "./decorate-DwpAc4D0.js";
-import { t as LeuIcon } from "./Icon-CbZXpyHU.js";
-import { t as LeuSpinner } from "./Spinner-VhKfzI3Q.js";
+import { t as LeuIcon } from "./Icon-D83qesg5.js";
+import { t as LeuSpinner } from "./Spinner-BBiVZxFH.js";
 import { t as HasSlotController } from "./hasSlotController-DSBCVzPD.js";
 import { t as FormAssociatedMixin } from "./FormAssociatedMixin-DLPvFtbT.js";
-import { css, html, nothing } from "lit";
+import { css, nothing } from "lit";
+import { html as html$1, literal } from "lit/static-html.js";
 import { property, query } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
@@ -44,11 +45,12 @@ var button_default = css`:host {
  * @todo : Disable hover styles for loading state
  */
 
-button {
+.button {
   position: relative;
-
   font-family: var(--leu-font-family-black);
   text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
@@ -57,11 +59,12 @@ button {
   border: none;
   border-radius: 2px;
 
-  max-width: 100%;
-  display: flex;
+  display: inline-flex;
+  justify-content: center;
   align-items: center;
   -moz-column-gap: 8px;
        column-gap: 8px;
+  width: 100%;
 }
 
 .content {
@@ -71,51 +74,52 @@ button {
   white-space: nowrap;
 }
 
-button.round {
+.button--round {
   border-radius: 50%;
 }
 
-button.disabled {
+.button--disabled {
   cursor: not-allowed;
 }
 
-button.loading {
+.button--loading {
   cursor: wait;
 }
 
-button:focus-visible {
+.button:focus-visible {
   outline: 2px solid var(--leu-color-func-cyan);
   outline-offset: 2px;
 }
 
-button.inverted:focus-visible {
+.button--inverted:focus-visible {
   outline: 2px solid var(--leu-color-black-0);
 }
 
-:host([fluid]) button {
-  width: 100%;
-  justify-content: center;
+.button--icon-only {
+  aspect-ratio: 1;
+  width: auto;
+  width: initial;
 }
 
-button.loading :where(.content, .icon-wrapper) {
+.button--loading :where(.content, .icon-wrapper) {
   visibility: hidden;
 }
 
 /* size - regular */
 
-button.regular {
+.button--regular {
   padding: 12px 24px;
   font-size: 16px;
   line-height: 24px;
 }
 
-button.regular.icon-only {
+.button--regular.button--icon-only {
   padding: 12px;
 }
 
 /* size - small */
 
-button.small {
+.button--small {
   padding: 6px 24px;
   font-size: 14px;
   line-height: 20px;
@@ -123,65 +127,65 @@ button.small {
   --leu-icon-size: 1rem;
 }
 
-button.small.icon-only {
+.button--small.button--icon-only {
   padding: 8px;
 }
 
 /* primary */
 
-button.primary {
+.button--primary {
   color: var(--leu-color-black-0);
   background: var(--leu-color-black-100);
 }
 
-button.primary:hover {
+.button--primary:hover {
   color: var(--leu-color-black-0);
   background: var(--leu-color-black-transp-80);
 }
 
-button.primary.active {
+.button--primary.button--active {
   color: var(--leu-color-black-0);
   background: var(--leu-color-black-100);
 }
 
-button.primary.active:hover {
+.button--primary.button--active:hover {
   background: var(--leu-color-black-transp-80);
 }
 
-button.primary.disabled {
+.button--primary.button--disabled {
   color: var(--leu-color-black-0);
   background: var(--leu-color-black-transp-20);
 }
 
 /* secondary */
 
-button.secondary {
+.button--secondary {
   color: var(--leu-color-black-transp-60);
   background: var(--leu-color-black-transp-10);
 }
 
-button.secondary:hover {
+.button--secondary:hover {
   color: var(--leu-color-black-100);
   background: var(--leu-color-black-transp-20);
 }
 
-button.secondary.active {
+.button--secondary.button--active {
   color: var(--leu-color-black-0);
   background: var(--leu-color-black-100);
 }
 
-button.secondary.active:hover {
+.button--secondary.button--active:hover {
   background: var(--leu-color-black-transp-80);
 }
 
-button.secondary.disabled {
+.button--secondary.button--disabled {
   color: var(--leu-color-black-transp-20);
   background: var(--leu-color-black-transp-5);
 }
 
 /* ghost */
 
-button.ghost {
+.button--ghost {
   --leu-icon-size: 1rem;
 
   background: transparent;
@@ -191,77 +195,77 @@ button.ghost {
   height: 2rem;
 }
 
-button.ghost:hover {
+.button--ghost:hover {
   color: var(--leu-color-black-100);
 }
 
-button.ghost.active {
+.button--ghost.button--active {
   color: var(--leu-color-black-100);
 }
 
-button.ghost.disabled {
+.button--ghost.button--disabled {
   color: var(--leu-color-black-20);
 }
 
 /* primary + inverted */
 
-button.primary.inverted {
+.button--primary.button--inverted {
   color: var(--leu-color-black-100);
   background: var(--leu-color-black-0);
 }
 
-button.primary.inverted:hover {
+.button--primary.button--inverted:hover {
   color: var(--leu-color-black-100);
   background: var(--leu-color-white-transp-70);
 }
 
-button.primary.inverted.active {
+.button--primary.button--inverted.button--active {
   color: var(--leu-color-black-0);
   background: var(--leu-color-black-100);
 }
 
-button.primary.inverted.disabled {
+.button--primary.button--inverted.button--disabled {
   color: var(--leu-color-black-40);
   background: var(--leu-color-white-transp-70);
 }
 
 /* secondary + inverted */
 
-button.secondary.inverted {
+.button--secondary.button--inverted {
   color: var(--leu-color-black-0);
   background: var(--leu-color-black-transp-20);
 }
 
-button.secondary.inverted:hover {
+.button--secondary.button--inverted:hover {
   color: var(--leu-color-black-0);
   background: var(--leu-color-black-transp-40);
 }
 
-button.secondary.inverted.active {
+.button--secondary.button--inverted.button--active {
   color: var(--leu-color-black-100);
   background: var(--leu-color-black-0);
 }
 
-button.secondary.inverted.disabled {
+.button--secondary.button--inverted.button--disabled {
   color: var(--leu-color-white-transp-70);
   background: var(--leu-color-black-transp-10);
 }
 
 /* ghost + inverted */
 
-button.ghost.inverted {
+.button--ghost.button--inverted {
   color: var(--leu-color-black-0);
 }
 
-button.ghost.inverted:hover {
+.button--ghost.button--inverted:hover {
   color: var(--leu-color-white-transp-70);
 }
 
-button.ghost.inverted.active {
+.button--ghost.button--inverted.button--active {
   color: var(--leu-color-black-0);
 }
 
-button.ghost.inverted.disabled {
+.button--ghost.button--inverted.button--disabled {
   color: var(--leu-color-black-20);
 }
 
@@ -275,12 +279,12 @@ button.ghost.inverted.disabled {
   display: none;
 }
 
-.icon-before .icon-wrapper--before,
-.icon-after .icon-wrapper--after {
+.button--icon-before .icon-wrapper--before,
+.button--icon-after .icon-wrapper--after {
   display: block;
 }
 
-.ghost .icon-wrapper {
+.button--ghost .icon-wrapper {
   position: relative;
   width: 2rem;
   padding: 0 0.5rem;
@@ -288,14 +292,14 @@ button.ghost.inverted.disabled {
   --_color: currentcolor;
 }
 
-.ghost .icon-wrapper__slot {
+.button--ghost .icon-wrapper__slot {
   display: block;
   position: relative;
   z-index: 1;
   color: var(--_color);
 }
 
-.ghost .icon-wrapper::before {
+.button--ghost .icon-wrapper::before {
   content: "";
   position: absolute;
   z-index: 0;
@@ -308,32 +312,32 @@ button.ghost.inverted.disabled {
   background: var(--_bg);
 }
 
-.ghost.active .icon-wrapper {
+.button--ghost.button--active .icon-wrapper {
   --_bg: var(--leu-color-black-100);
   --_color: var(--leu-color-black-0);
 }
 
-.ghost.disabled .icon-wrapper {
+.button--ghost.button--disabled .icon-wrapper {
   --_bg: var(--leu-color-black-transp-5);
 }
 
 /* inverted */
 
-.ghost.inverted .icon-wrapper {
+.button--ghost.button--inverted .icon-wrapper {
   --_bg: var(--leu-color-black-transp-20);
 }
 
-.ghost.inverted:hover .icon-wrapper {
+.button--ghost.button--inverted:hover .icon-wrapper {
   --_bg: var(--leu-color-black-transp-40);
   --_color: var(--leu-color-black-0);
 }
 
-.ghost.inverted.disabled .icon-wrapper {
+.button--ghost.button--inverted.button--disabled .icon-wrapper {
   --_bg: var(--leu-color-black-transp-20);
   --_color: var(--leu-color-white-transp-70);
 }
 
-.ghost.active.inverted .icon-wrapper {
+.button--ghost.button--active.button--inverted .icon-wrapper {
   --_bg: var(--leu-color-black-0);
   --_color: var(--leu-color-black-100);
 }
@@ -392,7 +396,6 @@ var LeuButton = class extends FormAssociatedMixin(LeuElement) {
 		this.round = false;
 		this.active = false;
 		this.inverted = false;
-		this.fluid = false;
 		this.loading = false;
 	}
 	static {
@@ -411,7 +414,7 @@ var LeuButton = class extends FormAssociatedMixin(LeuElement) {
 		};
 	}
 	renderExpandingIcon() {
-		if (typeof this.expanded !== "undefined" && this.variant === "ghost") return html`<div class="icon-expanded">
+		if (typeof this.expanded !== "undefined" && this.variant === "ghost") return html$1`<div class="icon-expanded">
         <leu-icon name="angleDropDown" size="24"></leu-icon>
       </div>`;
 		return nothing;
@@ -472,31 +475,35 @@ var LeuButton = class extends FormAssociatedMixin(LeuElement) {
 		const hasIconDefault = Boolean(this.querySelector("leu-icon"));
 		const hasIconBefore = this.hasSlotController.test("before");
 		const hasIconAfter = this.hasSlotController.test("after");
+		const isLink = Boolean(this.href);
 		const aria = this.getAriaAttributes();
+		const tag = isLink ? literal`a` : literal`button`;
 		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
+			"button--icon-only": hasIconDefault && !hasTextContent,
+			"button--icon-before": hasIconBefore,
+			"button--icon-after": hasIconAfter,
+			"button--round": this.round,
+			"button--active": this.active,
+			"button--inverted": this.inverted,
+			"button--loading": this.loading,
+			"button--disabled": this.disabled,
+			[`button--${this.variant}`]: true,
+			[`button--${this.size}`]: true
 		};
-		return html`
-      <button
-        @click=${this.handleClick}
+		return html$1`
+      <${tag}
+        @click=${!isLink ? this.handleClick : void 0}
         aria-label=${ifDefined(aria.label)}
         aria-selected=${ifDefined(aria.selected)}
         aria-checked=${ifDefined(aria.checked)}
         aria-expanded=${ifDefined(this.expanded)}
-        role=${ifDefined(aria.role)}
+        role=${ifDefined(isLink ? void 0 : aria.role)}
+        href=${ifDefined(this.href)}
+        target=${ifDefined(isLink ? this.target : void 0)}
         class=${classMap(cssClasses)}
-        ?disabled=${this.disabled || this.loading}
-        type=${this.type}
+        ?disabled=${this.disabled && !isLink || this.loading}
+        type=${ifDefined(isLink ? void 0 : this.type)}
       >
         <div class="icon-wrapper icon-wrapper--before">
           <slot name="before" class="icon-wrapper__slot"></slot>
@@ -505,9 +512,9 @@ var LeuButton = class extends FormAssociatedMixin(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.loading ? html$1`<leu-spinner class="spinner"></leu-spinner>` : nothing}
         ${this.renderExpandingIcon()}
-      </button>
+      </${tag}>
     `;
 	}
 };
@@ -531,6 +538,11 @@ __decorate([property({
 	type: String,
 	reflect: true
 })], LeuButton.prototype, "componentRole", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], LeuButton.prototype, "href", void 0);
+__decorate([property()], LeuButton.prototype, "target", void 0);
 __decorate([property({
 	type: Boolean,
 	reflect: true
@@ -551,10 +563,6 @@ __decorate([property({
 	type: String,
 	reflect: true
 })], LeuButton.prototype, "expanded", void 0);
-__decorate([property({
-	type: Boolean,
-	reflect: true
-})], LeuButton.prototype, "fluid", void 0);
 __decorate([property({
 	type: Boolean,
 	reflect: true

package/dist/Button.d.ts

@@ -1,2 +1,2 @@
-import { t as LeuButton } from "./Button-BgNUxmo_.js";
+import { t as LeuButton } from "./Button-DcuvEVkC.js";
 export { LeuButton };

package/dist/Button.js

@@ -1,6 +1,6 @@
-import "./LeuElement-k4RjIeoG.js";
-import "./Icon-CbZXpyHU.js";
-import "./Spinner-VhKfzI3Q.js";
-import { t as LeuButton } from "./Button-BSyDL_cV.js";
+import "./LeuElement-DQI8cqZV.js";
+import "./Icon-D83qesg5.js";
+import "./Spinner-BBiVZxFH.js";
+import { t as LeuButton } from "./Button-DyNVOHCd.js";
 import "./FormAssociatedMixin-DLPvFtbT.js";
 export { LeuButton };

package/dist/{ButtonGroup-BmSvl-Oc.js → ButtonGroup-MEh4vb5a.js}

@@ -1,5 +1,5 @@
-import { t as LeuElement } from "./LeuElement-k4RjIeoG.js";
-import { t as LeuButton } from "./Button-BSyDL_cV.js";
+import { t as LeuElement } from "./LeuElement-DQI8cqZV.js";
+import { t as LeuButton } from "./Button-DyNVOHCd.js";
 import { css, html } from "lit";
 //#region src/components/button-group/button-group.css?inline
 var button_group_default = css`.group {

package/dist/ButtonGroup.d.ts

@@ -1,4 +1,4 @@
-import { t as LeuElement } from "./LeuElement-pJFU18Xm.js";
+import { t as LeuElement } from "./LeuElement-DK1jntuu.js";
 import * as lit_html0 from "lit-html";
 
 //#region src/components/button-group/ButtonGroup.d.ts

package/dist/ButtonGroup.js

@@ -1,7 +1,7 @@
-import "./LeuElement-k4RjIeoG.js";
-import "./Icon-CbZXpyHU.js";
-import "./Spinner-VhKfzI3Q.js";
-import "./Button-BSyDL_cV.js";
+import "./LeuElement-DQI8cqZV.js";
+import "./Icon-D83qesg5.js";
+import "./Spinner-BBiVZxFH.js";
+import "./Button-DyNVOHCd.js";
 import "./FormAssociatedMixin-DLPvFtbT.js";
-import { t as LeuButtonGroup } from "./ButtonGroup-BmSvl-Oc.js";
+import { t as LeuButtonGroup } from "./ButtonGroup-MEh4vb5a.js";
 export { LeuButtonGroup };

package/dist/{ChartWrapper-CvDvQsd5.js → ChartWrapper-DAl91BIN.js}

@@ -1,6 +1,6 @@
-import { t as LeuElement } from "./LeuElement-k4RjIeoG.js";
+import { t as LeuElement } from "./LeuElement-DQI8cqZV.js";
 import { t as __decorate } from "./decorate-DwpAc4D0.js";
-import { t as LeuSpinner } from "./Spinner-VhKfzI3Q.js";
+import { t as LeuSpinner } from "./Spinner-BBiVZxFH.js";
 import { t as HasSlotController } from "./hasSlotController-DSBCVzPD.js";
 import { css, html, nothing } from "lit";
 import { property } from "lit/decorators.js";