@statistikzh/leu 0.22.0 → 0.23.0

package/.github/workflows/release-please.yml

@@ -4,6 +4,7 @@ on:
       - main
 
 permissions:
+  id-token: write
   contents: write
   pull-requests: write
 
@@ -33,6 +34,4 @@ jobs:
       - run: npm run build
         if: ${{ steps.release.outputs.release_created }}
       - run: npm publish --access public
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
         if: ${{ steps.release.outputs.release_created }}

package/.nvmrc

@@ -1 +1 @@
-v20.9.0
+v24

package/.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  ".": "0.22.0"
+  ".": "0.23.0"
 }

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## [0.23.0](https://github.com/statistikZH/leu/compare/leu-v0.22.1...leu-v0.23.0) (2026-01-20)
+
+
+### Features
+
+* **popup:** add offset properties to translate the popup content ([#324](https://github.com/statistikZH/leu/issues/324)) ([1e71bf0](https://github.com/statistikZH/leu/commit/1e71bf061bb940156dd0a24a71243db093d7bd49))
+
+## [0.22.1](https://github.com/statistikZH/leu/compare/leu-v0.22.0...leu-v0.22.1) (2025-12-17)
+
+
+### Bug Fixes
+
+* **exports:** add missing exports ([1d5a3a4](https://github.com/statistikZH/leu/commit/1d5a3a4099982e594baf41acf124f9f7d0b2c355))
+* **file-input:** dispatch change and input events on drop ([#319](https://github.com/statistikZH/leu/issues/319)) ([5e83629](https://github.com/statistikZH/leu/commit/5e836290c2368a958154eeb7451cf9e59ccb908a))
+* **types:** add missing HTMLElementTagNameMap definitions ([1d5a3a4](https://github.com/statistikZH/leu/commit/1d5a3a4099982e594baf41acf124f9f7d0b2c355))
+
 ## [0.22.0](https://github.com/statistikZH/leu/compare/leu-v0.21.1...leu-v0.22.0) (2025-11-18)
 
 

package/README.md

@@ -4,13 +4,15 @@
 
 A UI component library based on the [design system](https://www.zh.ch/de/webangebote-entwickeln-und-gestalten.html) of the canton of zurich.
 
-## ⚠️ This project is still in alpha state
+## ⚠️ Active development
 
-This package is still in alpha state. It is not recommended to use it in production yet.
+This library hasn't had a major release yet. Therefore, all minor releases may include breaking changes.
+Check the [changelog](CHANGELOG.md) for details on the changes made.
+If you plan to use this library in production, please get [in touch with us](#contact).
 
 ## Prerequisites
 
-Node.js > v18.0.0
+Node.js > v20.9.0
 
 ## Installation
 
@@ -20,9 +22,12 @@ npm i @statistikzh/leu
 
 ## Usage
 
+The [storybook](https://statistikzh.github.io/leu/) contains a in depth guide to install the library and
+a comprehensive overview of all components and their usage.
+
 In order for the components to work, you need to load the theme styles and the font definitions globally.
 The theme file is part of the package (`dist/theme.css`).
-The fonts on the other hand have to be licensed and are therefore not included in the package.
+The fonts on the other hand have to be licensed and are therefore not included in this package.
 
 If you have an environment that resolves bare module imports, you can use the library like this:
 
@@ -32,25 +37,25 @@ If you have an environment that resolves bare module imports, you can use the li
   import "@statistikzh/leu/leu-input.js"
 </script>
 
-<leu-input></leu-input>
+<leu-input label="Repository" type="text" value="@statistikzh/leu"></leu-input>
 ```
 
 ### CDN
 
 Browsers can't resolve bare module imports without import maps. But we can use a CDN to resolve the imports for us.
 This is useful if you're just using plain HTML and JavaScript without any build or transformation steps.
-Also this is applicable in an environment like [Observable](https://observablehq.com).
+This is also applicable in an environment like [Observable](https://observablehq.com).
 
 ```html
 <link
   rel="stylesheet"
-  href="https://esm.run/@statistikzh/leu@0.1/dist/theme.css"
+  href="https://esm.sh/@statistikzh/leu@0.22.0/dist/theme.css"
 />
 <script type="module">
-  import "https://esm.run/@statistikzh/leu@0.1/dist/leu-input.js"
+  import "https://esm.sh/@statistikzh/leu@0.22.0/leu-input.js"
 </script>
 
-<leu-input></leu-input>
+<leu-input label="Repository" type="text" value="@statistikzh/leu"></leu-input>
 ```
 
 ## Linting and formatting
@@ -112,7 +117,7 @@ dan.bueschlen@statistik.ji.zh.ch <br>
 
 This project uses the following license: <br>
 
-- Code license: [Copyright (c) <2024> <Statistisches Amt Kanton Zürich>](LICENSE)
+- Code license: [Copyright (c) <2025> <Statistisches Amt Kanton Zürich>](LICENSE)
 
 ## Guidelines for contributing
 

package/dist/Accordion.js

@@ -2,7 +2,7 @@ import { _ as __decorate } from './_tslib-CNEFicEt.js';
 import { css, nothing } from 'lit';
 import { unsafeStatic, html } from 'lit/static-html.js';
 import { property } from 'lit/decorators.js';
-import { L as LeuElement } from './LeuElement-BooZrClI.js';
+import { L as LeuElement } from './LeuElement-CWseJvWv.js';
 
 var css_248z = css`:host {
   --accordion-font-regular: var(--leu-font-family-regular);

package/dist/Button.d.ts

@@ -1,6 +1,6 @@
 import * as lit_html from 'lit-html';
 import * as lit from 'lit';
-import { LeuIcon } from './Icon.js';
+import { L as LeuIcon } from './Icon.d-itcQ94ym.js';
 import { L as LeuElement } from './LeuElement.d-BevHqLUu.js';
 
 /**

package/dist/Button.js

@@ -4,7 +4,7 @@ import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { property } from 'lit/decorators.js';
 import { LeuIcon } from './Icon.js';
-import { L as LeuElement } from './LeuElement-BooZrClI.js';
+import { L as LeuElement } from './LeuElement-CWseJvWv.js';
 import { H as HasSlotController } from './hasSlotController-Bm2tipvG.js';
 
 /**

package/dist/ButtonGroup.js

@@ -1,5 +1,5 @@
 import { css, html } from 'lit';
-import { L as LeuElement } from './LeuElement-BooZrClI.js';
+import { L as LeuElement } from './LeuElement-CWseJvWv.js';
 import { LeuButton } from './Button.js';
 import './_tslib-CNEFicEt.js';
 import 'lit/directives/class-map.js';

package/dist/ChartWrapper.js

@@ -1,7 +1,7 @@
 import { _ as __decorate } from './_tslib-CNEFicEt.js';
 import { css, nothing, html } from 'lit';
 import { property } from 'lit/decorators.js';
-import { L as LeuElement } from './LeuElement-BooZrClI.js';
+import { L as LeuElement } from './LeuElement-CWseJvWv.js';
 import { H as HasSlotController } from './hasSlotController-Bm2tipvG.js';
 import { LeuSpinner } from './Spinner.js';
 

package/dist/Checkbox.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 { LeuIcon } from './Icon.js';
+import { L as LeuIcon } from './Icon.d-itcQ94ym.js';
 
 /**
  * @tagname leu-checkbox

package/dist/Checkbox.js

@@ -1,7 +1,7 @@
 import { _ as __decorate } from './_tslib-CNEFicEt.js';
 import { css, html } from 'lit';
 import { property } from 'lit/decorators.js';
-import { L as LeuElement } from './LeuElement-BooZrClI.js';
+import { L as LeuElement } from './LeuElement-CWseJvWv.js';
 import { LeuIcon } from './Icon.js';
 
 var css_248z = css`:host {

package/dist/CheckboxGroup.js

@@ -2,7 +2,7 @@ import { _ as __decorate } from './_tslib-CNEFicEt.js';
 import { css, html } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { property } from 'lit/decorators.js';
-import { L as LeuElement } from './LeuElement-BooZrClI.js';
+import { L as LeuElement } from './LeuElement-CWseJvWv.js';
 import { LeuCheckbox } from './Checkbox.js';
 import './Icon.js';
 

package/dist/Chip.d.ts

@@ -12,13 +12,7 @@ declare class LeuChipBase extends LeuElement {
         customElements?: CustomElementRegistry;
         registry?: CustomElementRegistry;
     };
-    static properties: {
-        inverted: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-    };
-    constructor();
+    inverted: boolean;
 }
 
 export { LeuChipBase };

package/dist/Chip.js

@@ -1,4 +1,6 @@
-import { L as LeuElement } from './LeuElement-BooZrClI.js';
+import { _ as __decorate } from './_tslib-CNEFicEt.js';
+import { property } from 'lit/decorators.js';
+import { L as LeuElement } from './LeuElement-CWseJvWv.js';
 import { css } from 'lit';
 
 var css_248z = css`:host *::before,
@@ -148,7 +150,7 @@ var css_248z = css`:host *::before,
 /* Design: https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=21161-184433&mode=design&t=Kjo5VDiqivihn8dh-11 */
 class LeuChipBase extends LeuElement {
     constructor() {
-        super();
+        super(...arguments);
         this.inverted = false;
     }
 }
@@ -158,8 +160,8 @@ LeuChipBase.shadowRootOptions = {
     ...LeuElement.shadowRootOptions,
     delegatesFocus: true,
 };
-LeuChipBase.properties = {
-    inverted: { type: Boolean, reflect: true },
-};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LeuChipBase.prototype, "inverted", void 0);
 
 export { LeuChipBase };

package/dist/ChipGroup.d.ts

@@ -1,12 +1,9 @@
 import * as lit_html from 'lit-html';
 import * as lit from 'lit';
 import { L as LeuElement } from './LeuElement.d-BevHqLUu.js';
+import { LeuChipSelectable } from './ChipSelectable.js';
+import './Chip.js';
 
-declare const SELECTION_MODES: Readonly<{
-    single: "single";
-    multiple: "multiple";
-    none: "none";
-}>;
 /**
  * @slot - Place leu-chip-* elements inside this slot
  * @cssproperty --leu-chip-group-gap - The gap between the chips
@@ -14,49 +11,33 @@ declare const SELECTION_MODES: Readonly<{
  */
 declare class LeuChipGroup extends LeuElement {
     static styles: lit.CSSResultGroup[];
-    static properties: {
-        inverted: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        selectionMode: {
-            type: StringConstructor;
-            attribute: string;
-            reflect: boolean;
-        };
-        headingLevel: {
-            type: NumberConstructor;
-            attribute: string;
-            reflect: boolean;
-        };
-        label: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
-    };
-    constructor();
+    inverted: boolean;
+    selectionMode: "single" | "multiple" | "none";
+    headingLevel: number;
+    label: string;
+    protected selectableItems: Array<LeuChipSelectable>;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    get value(): any;
+    get value(): string[];
     /**
      * Checks the items with the given values.
      * If the selectionMode is single, only the first item with the given value is checked.
-     * @param {string[]} valueList
      */
-    set value(valueList: any);
+    set value(valueList: 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.
-     * @returns {String} The heading tag of the accordion toggle.
      * @internal
      */
-    _getHeadingTag(): string;
-    /** @internal */
-    handleInput: (e: any) => void;
-    /** @internal */
-    handleSlotChange: (e: any) => void;
+    protected _getHeadingTag(): string;
+    protected handleInput: (e: Event & {
+        target: LeuChipSelectable;
+    }) => void;
+    protected handleSlotChange: (e: Event & {
+        target: HTMLSlotElement;
+    }) => void;
     render(): lit_html.TemplateResult;
 }
 
-export { LeuChipGroup, SELECTION_MODES };
+export { LeuChipGroup };

package/dist/ChipGroup.js

@@ -1,6 +1,10 @@
+import { _ as __decorate } from './_tslib-CNEFicEt.js';
 import { unsafeStatic, html } from 'lit/static-html.js';
-import { L as LeuElement } from './LeuElement-BooZrClI.js';
+import { property } from 'lit/decorators.js';
+import { L as LeuElement } from './LeuElement-CWseJvWv.js';
 import { css } from 'lit';
+import { LeuChipSelectable } from './ChipSelectable.js';
+import './Chip.js';
 
 var css_248z = css`.label {
   margin: 0 0 0.5rem;
@@ -20,12 +24,6 @@ var css_248z = css`.label {
 }
 `;
 
-/* Figma https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=131766-248643&mode=design&t=Kjo5VDiqivihn8dh-11 */
-const SELECTION_MODES = Object.freeze({
-    single: "single",
-    multiple: "multiple",
-    none: "none",
-});
 /**
  * @slot - Place leu-chip-* elements inside this slot
  * @cssproperty --leu-chip-group-gap - The gap between the chips
@@ -33,28 +31,26 @@ const SELECTION_MODES = Object.freeze({
  */
 class LeuChipGroup extends LeuElement {
     constructor() {
-        super();
-        /** @internal */
+        super(...arguments);
+        this.inverted = false;
+        this.selectionMode = "none";
+        this.headingLevel = 2;
+        this.label = "";
+        this.selectableItems = [];
         this.handleInput = (e) => {
-            if (this.selectionMode === SELECTION_MODES.single) {
-                this.items.forEach((item) => {
+            if (this.selectionMode === "single") {
+                this.selectableItems.forEach((item) => {
                     item.checked = item === e.target; // eslint-disable-line no-param-reassign
                 });
             }
         };
-        /** @internal */
         this.handleSlotChange = (e) => {
             const slot = e.target;
-            const items = slot.assignedElements({ flatten: true });
-            this.items = items;
+            const items = slot
+                .assignedElements({ flatten: true })
+                .filter((el) => el instanceof LeuChipSelectable);
+            this.selectableItems = items;
         };
-        this.inverted = false;
-        this.headingLevel = 2;
-        this.label = "";
-        /** @internal */
-        this.items = [];
-        /** @type {"single" | "multiple" | "none"} */
-        this.selectionMode = SELECTION_MODES.none;
     }
     connectedCallback() {
         super.connectedCallback();
@@ -72,18 +68,19 @@ class LeuChipGroup extends LeuElement {
         this.removeEventListener("input", this.handleInput, { capture: true });
     }
     get value() {
-        return this.items.filter((i) => i.checked).map((i) => i.getValue());
+        return this.selectableItems
+            .filter((i) => i.checked)
+            .map((i) => i.getValue());
     }
     /**
      * Checks the items with the given values.
      * If the selectionMode is single, only the first item with the given value is checked.
-     * @param {string[]} valueList
      */
     set value(valueList) {
         let hasChanged = false;
-        for (const item of this.items) {
+        for (const item of this.selectableItems) {
             item.checked = hasChanged ? false : valueList.includes(item.value);
-            if (this.selectionMode === SELECTION_MODES.single && item.checked) {
+            if (this.selectionMode === "single" && item.checked) {
                 hasChanged = true;
             }
         }
@@ -92,7 +89,6 @@ class LeuChipGroup extends LeuElement {
      * 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.
-     * @returns {String} The heading tag of the accordion toggle.
      * @internal
      */
     _getHeadingTag() {
@@ -121,11 +117,17 @@ class LeuChipGroup extends LeuElement {
     }
 }
 LeuChipGroup.styles = [LeuElement.styles, css_248z];
-LeuChipGroup.properties = {
-    inverted: { type: Boolean, reflect: true },
-    selectionMode: { type: String, attribute: "selection-mode", reflect: true },
-    headingLevel: { type: Number, attribute: "heading-level", reflect: true },
-    label: { type: String, reflect: true },
-};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LeuChipGroup.prototype, "inverted", void 0);
+__decorate([
+    property({ type: String, attribute: "selection-mode", reflect: true })
+], LeuChipGroup.prototype, "selectionMode", void 0);
+__decorate([
+    property({ type: Number, attribute: "heading-level", reflect: true })
+], LeuChipGroup.prototype, "headingLevel", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], LeuChipGroup.prototype, "label", void 0);
 
-export { LeuChipGroup, SELECTION_MODES };
+export { LeuChipGroup };

package/dist/ChipLink.d.ts

@@ -3,32 +3,16 @@ import { LeuChipBase } from './Chip.js';
 import 'lit';
 import './LeuElement.d-BevHqLUu.js';
 
-declare const SIZES: {
-    regular: string;
-    large: string;
-};
 /**
  * @tagname leu-chip-link
  * @slot - The content of the chip
- * @prop {keyof typeof SIZES} size - The size of the chip
  */
 declare class LeuChipLink extends LeuChipBase {
-    static properties: {
-        size: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
-        href: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
-        inverted: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-    };
-    constructor();
+    /** The size of the chip */
+    size: "regular" | "large";
+    /** The URL that the chip links to */
+    href: string;
     render(): lit_html.TemplateResult<1>;
 }
 
-export { LeuChipLink, SIZES };
+export { LeuChipLink };

package/dist/ChipLink.js

@@ -1,21 +1,19 @@
+import { _ as __decorate } from './_tslib-CNEFicEt.js';
 import { html } from 'lit';
+import { property } from 'lit/decorators.js';
 import { LeuChipBase } from './Chip.js';
-import './LeuElement-BooZrClI.js';
+import './LeuElement-CWseJvWv.js';
 
-const SIZES = {
-    regular: "regular",
-    large: "large",
-};
 /**
  * @tagname leu-chip-link
  * @slot - The content of the chip
- * @prop {keyof typeof SIZES} size - The size of the chip
  */
 class LeuChipLink extends LeuChipBase {
     constructor() {
-        super();
-        this.inverted = false;
-        this.size = SIZES.regular;
+        super(...arguments);
+        /** The size of the chip */
+        this.size = "regular";
+        /** The URL that the chip links to */
         this.href = "";
     }
     render() {
@@ -24,10 +22,11 @@ class LeuChipLink extends LeuChipBase {
     </a>`;
     }
 }
-LeuChipLink.properties = {
-    ...LeuChipBase.properties,
-    size: { type: String, reflect: true },
-    href: { type: String, reflect: true },
-};
+__decorate([
+    property({ type: String, reflect: true })
+], LeuChipLink.prototype, "size", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], LeuChipLink.prototype, "href", void 0);
 
-export { LeuChipLink, SIZES };
+export { LeuChipLink };

package/dist/ChipRemovable.d.ts

@@ -1,6 +1,6 @@
 import * as lit_html from 'lit-html';
 import { LeuChipBase } from './Chip.js';
-import { LeuIcon } from './Icon.js';
+import { L as LeuIcon } from './Icon.d-itcQ94ym.js';
 import 'lit';
 import './LeuElement.d-BevHqLUu.js';
 
@@ -14,23 +14,12 @@ declare class LeuChipRemovable extends LeuChipBase {
     static dependencies: {
         "leu-icon": typeof LeuIcon;
     };
-    static properties: {
-        value: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
-        inverted: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-    };
-    constructor();
+    value: string;
     /**
      * Returns the value of the chip. If `value` is not set, it will return the text content
-     * @returns {string}
      */
-    getValue(): any;
-    handleClick(): void;
+    getValue(): string;
+    protected handleClick(): void;
     render(): lit_html.TemplateResult<1>;
 }
 

package/dist/ChipRemovable.js

@@ -1,9 +1,9 @@
+import { _ as __decorate } from './_tslib-CNEFicEt.js';
 import { html } from 'lit';
+import { property } from 'lit/decorators.js';
 import { LeuChipBase } from './Chip.js';
 import { LeuIcon } from './Icon.js';
-import './LeuElement-BooZrClI.js';
-import './_tslib-CNEFicEt.js';
-import 'lit/decorators.js';
+import './LeuElement-CWseJvWv.js';
 
 /**
  * @slot - The content of the chip
@@ -13,12 +13,11 @@ import 'lit/decorators.js';
  */
 class LeuChipRemovable extends LeuChipBase {
     constructor() {
-        super();
+        super(...arguments);
         this.value = "";
     }
     /**
      * Returns the value of the chip. If `value` is not set, it will return the text content
-     * @returns {string}
      */
     getValue() {
         return this.value || this.textContent.trim();
@@ -43,9 +42,8 @@ class LeuChipRemovable extends LeuChipBase {
 LeuChipRemovable.dependencies = {
     "leu-icon": LeuIcon,
 };
-LeuChipRemovable.properties = {
-    ...LeuChipBase.properties,
-    value: { type: String, reflect: true },
-};
+__decorate([
+    property({ type: String, reflect: true })
+], LeuChipRemovable.prototype, "value", void 0);
 
 export { LeuChipRemovable };