@statistikzh/leu 0.27.0 → 0.28.1

package/.github/workflows/publish.yml

@@ -7,6 +7,7 @@ on:
       - "leu-v*"
 
 permissions:
+  id-token: write
   contents: read
 
 jobs:
@@ -21,10 +22,7 @@ jobs:
           cache: "npm"
           registry-url: "https://registry.npmjs.org"
 
-      - run: npm --version
       - run: npm ci
       - run: npm run build
       - name: Publish to npm
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
         run: npm publish

package/.release-please-manifest.json

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

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/AGENTS.md

@@ -0,0 +1,162 @@
+# AGENTS.md - AI Coding Assistant Guide
+
+This file provides guidance for AI coding assistants when working with this repository.
+
+## Project Overview
+
+`leu` is a framework-agnostic web components library implementing the design system of the Canton of Zurich. Components are built with [Lit](https://lit.dev) and extend a shared `LeuElement` base class.
+
+## Repo Structure
+
+```
+src/
+├── components/   # Individual web components (one folder per component)
+├── lib/          # Shared base class (LeuElement), mixins, and utilities
+├── styles/       # Global CSS theme (theme.css)
+├── docs/         # Documentation source files
+└── index.ts      # Public barrel export
+scripts/
+└── generate-component/  # Scaffolding script for new components
+```
+
+Each component folder (e.g. `src/components/button/`) typically contains:
+
+- `Button.ts` — component class
+- `leu-button.ts` — custom element registration
+- `button.css` — component styles (imported as `?inline` in the class)
+- `stories/` — Storybook stories
+- `test/` — unit tests
+
+## Essential Commands
+
+All commands run from the repo root.
+
+```bash
+npm run storybook        # Start Storybook dev server on http://localhost:8080
+npm run build            # Full production build (JS + CSS + CEM analysis)
+npm run build:js         # TypeScript → JS via tsdown
+npm run build:css        # PostCSS theme build
+npm run lint             # ESLint + Prettier check
+npm run lint:types       # TypeScript type check
+npm run format           # Auto-fix ESLint + Prettier
+npm run test             # Run all tests with coverage
+npm run test:watch       # Run tests in watch mode
+npm run analyze          # Regenerate custom-elements.json manifest
+```
+
+## Build & Test Flow
+
+**Build:** `npm run build` compiles TypeScript (`tsdown`), builds the CSS theme, and regenerates the custom elements manifest. Check types without building: `npm run lint:types`.
+
+**Tests** use Web Test Runner with Playwright. Test files match `src/components/**/*.test.ts`.
+
+Run tests for a single component:
+
+```bash
+npm run test -- --files "src/components/button/**/*.test.ts"
+```
+
+**Running a single test case:** Use `.only` to isolate a failing test, then remove it before committing:
+
+```ts
+it.only("should render correctly", () => {
+```
+
+**Important:** Only run tests for the component being modified, not the full suite, unless validating a cross-cutting change.
+
+## Component Development
+
+A new component can be scaffolded using the provided script:
+
+```bash
+# Learn how to use the generator:
+npm run generate-component -- --help
+# Create a single component:
+npm run generate-component -- --name button
+# For multiple components that live in the same folder (e.g. menu + menu-item):
+npm run generate-component -- --name menu --components menu,menu-item
+```
+
+### Naming Conventions
+
+- Class name: `LeuButton` (PascalCase, `Leu` prefix)
+- Tag name: `leu-button` (kebab-case, `leu-` prefix)
+- File names: `Button.ts`, `leu-button.ts`, `button.css`
+
+### Component Structure
+
+Components extend `LeuElement` (which extends `LitElement`):
+
+```ts
+import { LeuElement } from "../../lib/LeuElement.js"
+import styles from "./button.css?inline"
+
+export class LeuButton extends LeuElement {
+  static styles = [LeuElement.styles, styles]
+
+  // Use Lit decorators for properties
+  @property({ type: String, reflect: true })
+  variant: "primary" | "secondary" | "ghost" = "primary"
+}
+```
+
+Register the custom element in a separate file:
+
+```ts
+// leu-button.ts
+import { LeuButton } from "./Button.js"
+customElements.define("leu-button", LeuButton)
+```
+
+Export from `src/index.ts` (both the class and the registration module).
+
+### Styles
+
+All component styles should be based on the global theme variables defined in `src/styles/theme.css`.
+
+### Key Patterns
+
+| Topic            | Convention                                                                |
+| ---------------- | ------------------------------------------------------------------------- |
+| Styles           | Import CSS as `?inline`, include `LeuElement.styles` first                |
+| Slots            | Manage with `HasSlotController` from `lib/hasSlotController.ts`           |
+| Form fields      | Extend `FormAssociatedMixin(LeuElement)`                                  |
+| Sub-dependencies | Declare via static `dependencies` object; auto-registered by `LeuElement` |
+| Figma reference  | Link in JSDoc `@see` on the class                                         |
+
+## Commit Message Format
+
+Follow [Conventional Commits](https://conventionalcommits.org) (enforced by commitlint):
+
+```
+<type>(<scope>): <description>
+
+[body]
+
+[footer]
+```
+
+**Types:** `fix`, `feat`, `docs`, `style`, `refactor`, `perf`, `test`, `chore`, `revert`
+**Scope:** Component name without prefix (e.g., `button`, `input`, `dialog`)
+
+Example: `feat(radio): add new feature`
+
+## Branching
+
+Branch off `main`. Prefix branch names with the issue number (e.g. `48-dropdown`). Do not merge feature branches into each other; merge into `main` as soon as possible.
+Branches will be squashed on merge, so the commit history should be clean and focused on the change.
+
+```
+fix(button): correct focus outline on tab key
+
+The button now receives proper focus outline when
+navigating with the tab key.
+
+Fixes #42
+```
+
+## GitHub Actions & Releases
+
+Never update the `CHANGELOG.md` or version number manually. The release process is automated via GitHub Actions:
+
+1. Merge your PR into `main` with a properly formatted commit message.

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # Changelog
 
+## [0.28.1](https://github.com/statistikZH/leu/compare/leu-v0.28.0...leu-v0.28.1) (2026-05-20)
+
+
+### Bug Fixes
+
+* **file-input:** dispatch `input`/`change` events only after render state settles ([#348](https://github.com/statistikZH/leu/issues/348)) ([d2f2237](https://github.com/statistikZH/leu/commit/d2f223716eac4033e6e121be9806c718ccb7a775))
+
+## [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-CwkI7sfx.js}

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