@statistikzh/leu 0.19.1 → 0.19.2

package/.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  ".": "0.19.1"
+  ".": "0.19.2"
 }

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [0.19.2](https://github.com/statistikZH/leu/compare/leu-v0.19.1...leu-v0.19.2) (2025-10-23)
+
+
+### Bug Fixes
+
+* **file-input:** dispatch input and change events when files are added and removed ([ad2faf5](https://github.com/statistikZH/leu/commit/ad2faf59ff96b0f0990f3022f3e2c07d8cc0975d))
+
 ## [0.19.1](https://github.com/statistikZH/leu/compare/leu-v0.19.0...leu-v0.19.1) (2025-10-15)
 
 

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-CRdVLttR.js';
+import { L as LeuElement } from './LeuElement-CcarVabH.js';
 
 var css_248z = css`:host {
   --accordion-font-regular: var(--leu-font-family-regular);

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-CRdVLttR.js';
+import { L as LeuElement } from './LeuElement-CcarVabH.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-CRdVLttR.js';
+import { L as LeuElement } from './LeuElement-CcarVabH.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-CRdVLttR.js';
+import { L as LeuElement } from './LeuElement-CcarVabH.js';
 import { H as HasSlotController } from './hasSlotController-Bm2tipvG.js';
 import { LeuSpinner } from './Spinner.js';
 

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-CRdVLttR.js';
+import { L as LeuElement } from './LeuElement-CcarVabH.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-CRdVLttR.js';
+import { L as LeuElement } from './LeuElement-CcarVabH.js';
 import { LeuCheckbox } from './Checkbox.js';
 import './Icon.js';
 

package/dist/Chip.js

@@ -1,4 +1,4 @@
-import { L as LeuElement } from './LeuElement-CRdVLttR.js';
+import { L as LeuElement } from './LeuElement-CcarVabH.js';
 import { css } from 'lit';
 
 var css_248z = css`:host *::before,

package/dist/ChipGroup.js

@@ -1,5 +1,5 @@
 import { unsafeStatic, html } from 'lit/static-html.js';
-import { L as LeuElement } from './LeuElement-CRdVLttR.js';
+import { L as LeuElement } from './LeuElement-CcarVabH.js';
 import { css } from 'lit';
 
 var css_248z = css`.label {

package/dist/ChipLink.js

@@ -1,6 +1,6 @@
 import { html } from 'lit';
 import { LeuChipBase } from './Chip.js';
-import './LeuElement-CRdVLttR.js';
+import './LeuElement-CcarVabH.js';
 
 const SIZES = {
     regular: "regular",

package/dist/ChipRemovable.js

@@ -1,7 +1,7 @@
 import { html } from 'lit';
 import { LeuChipBase } from './Chip.js';
 import { LeuIcon } from './Icon.js';
-import './LeuElement-CRdVLttR.js';
+import './LeuElement-CcarVabH.js';
 import './_tslib-CNEFicEt.js';
 import 'lit/decorators.js';
 

package/dist/ChipSelectable.js

@@ -1,6 +1,6 @@
 import { html } from 'lit';
 import { LeuChipBase } from './Chip.js';
-import './LeuElement-CRdVLttR.js';
+import './LeuElement-CcarVabH.js';
 
 const SIZES = {
     small: "small",

package/dist/Dialog.js

@@ -1,7 +1,7 @@
 import { css, nothing, html } from 'lit';
 import { createRef, ref } from 'lit/directives/ref.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { L as LeuElement } from './LeuElement-CRdVLttR.js';
+import { L as LeuElement } from './LeuElement-CcarVabH.js';
 import { H as HasSlotController } from './hasSlotController-Bm2tipvG.js';
 import { LeuIcon } from './Icon.js';
 import './_tslib-CNEFicEt.js';

package/dist/Dropdown.js

@@ -1,6 +1,6 @@
 import { css, nothing, html } from 'lit';
 import { createRef, ref } from 'lit/directives/ref.js';
-import { L as LeuElement } from './LeuElement-CRdVLttR.js';
+import { L as LeuElement } from './LeuElement-CcarVabH.js';
 import { H as HasSlotController } from './hasSlotController-Bm2tipvG.js';
 import { LeuButton } from './Button.js';
 import { LeuMenu } from './Menu.js';

package/dist/FileInput.d.ts

@@ -6,6 +6,10 @@ import { LeuIcon } from './Icon.js';
 import { LeuVisuallyHidden } from './VisuallyHidden.js';
 import './leu-icon.js';
 
+/**
+ * @todo Pluralize text when multiple files are allowed
+ * @todo Hide dropzone when not multiple and already filled
+ */
 /**
  * @tagname leu-file-input
  */
@@ -45,6 +49,7 @@ declare class LeuFileInput extends LeuElement {
     get name(): string;
     updated(changedProperties: any): void;
     protected handleInput(): void;
+    private handleChange;
     formResetCallback(): void;
     protected updateFormValue(): void;
     protected removeFile(fileToRemove: File): void;

package/dist/FileInput.js

@@ -3,7 +3,7 @@ import { css, html, nothing } from 'lit';
 import { property, state, query } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { L as LeuElement } from './LeuElement-CRdVLttR.js';
+import { L as LeuElement } from './LeuElement-CcarVabH.js';
 import './Accordion.js';
 import { LeuButton } from './Button.js';
 import './ButtonGroup.js';
@@ -157,6 +157,10 @@ var css_248z = css`:host {
 }
 `;
 
+/**
+ * @todo Pluralize text when multiple files are allowed
+ * @todo Hide dropzone when not multiple and already filled
+ */
 /**
  * @tagname leu-file-input
  */
@@ -235,6 +239,10 @@ class LeuFileInput extends LeuElement {
                 : acceptableFiles.slice(0, 1);
         }
     }
+    handleChange(event) {
+        const customEvent = new CustomEvent(event.type, event);
+        this.dispatchEvent(customEvent);
+    }
     formResetCallback() {
         this.files = [];
         this.input.value = "";
@@ -249,6 +257,14 @@ class LeuFileInput extends LeuElement {
     }
     removeFile(fileToRemove) {
         this.files = this.files.filter((file) => file !== fileToRemove);
+        this.dispatchEvent(new CustomEvent("input", {
+            composed: true,
+            bubbles: true,
+        }));
+        this.dispatchEvent(new CustomEvent("change", {
+            composed: true,
+            bubbles: true,
+        }));
     }
     static formatFileSize(size) {
         if (size < 1e3) {
@@ -299,6 +315,7 @@ class LeuFileInput extends LeuElement {
             accept=${ifDefined(this.accept)}
             ?disabled=${this.disabled}
             @input=${this.handleInput}
+            @change=${this.handleChange}
           />
         </leu-visually-hidden>
         <div

package/dist/Icon.js

@@ -1,7 +1,7 @@
 import { _ as __decorate } from './_tslib-CNEFicEt.js';
 import { css, html, svg } from 'lit';
 import { property } from 'lit/decorators.js';
-import { L as LeuElement } from './LeuElement-CRdVLttR.js';
+import { L as LeuElement } from './LeuElement-CcarVabH.js';
 
 var css_248z = css`:host {
   display: contents;

package/dist/Input.js

@@ -3,7 +3,7 @@ import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { live } from 'lit/directives/live.js';
 import { createRef, ref } from 'lit/directives/ref.js';
-import { L as LeuElement } from './LeuElement-CRdVLttR.js';
+import { L as LeuElement } from './LeuElement-CcarVabH.js';
 import { LeuIcon } from './Icon.js';
 import './_tslib-CNEFicEt.js';
 import 'lit/decorators.js';

package/dist/{LeuElement-CRdVLttR.js → LeuElement-CcarVabH.js}

@@ -35,7 +35,7 @@ class LeuElement extends LitElement {
         }
     }
 }
-LeuElement.version = "0.19.1";
+LeuElement.version = "0.19.2";
 LeuElement.dependencies = {};
 LeuElement.styles = css_248z;
 

package/dist/Menu.js

@@ -1,5 +1,5 @@
 import { css, html } from 'lit';
-import { L as LeuElement } from './LeuElement-CRdVLttR.js';
+import { L as LeuElement } from './LeuElement-CcarVabH.js';
 import { LeuMenuItem } from './MenuItem.js';
 import 'lit/directives/if-defined.js';
 import './Icon.js';

package/dist/MenuItem.js

@@ -1,6 +1,6 @@
 import { css, html, nothing } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { L as LeuElement } from './LeuElement-CRdVLttR.js';
+import { L as LeuElement } from './LeuElement-CcarVabH.js';
 import { LeuIcon } from './Icon.js';
 import './_tslib-CNEFicEt.js';
 import 'lit/decorators.js';

package/dist/Message.js

@@ -2,7 +2,7 @@ import { _ as __decorate } from './_tslib-CNEFicEt.js';
 import { css, html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { L as LeuElement } from './LeuElement-CRdVLttR.js';
+import { L as LeuElement } from './LeuElement-CcarVabH.js';
 import { LeuIcon } from './Icon.js';
 import { H as HasSlotController } from './hasSlotController-Bm2tipvG.js';
 

package/dist/Pagination.js

@@ -2,7 +2,7 @@ import { _ as __decorate } from './_tslib-CNEFicEt.js';
 import { css, html } from 'lit';
 import { live } from 'lit/directives/live.js';
 import { property, state } from 'lit/decorators.js';
-import { L as LeuElement } from './LeuElement-CRdVLttR.js';
+import { L as LeuElement } from './LeuElement-CcarVabH.js';
 import { LeuButton } from './Button.js';
 import { LeuVisuallyHidden } from './VisuallyHidden.js';
 import { LeuIcon } from './Icon.js';

package/dist/Placeholder.js

@@ -1,5 +1,5 @@
 import { css, html } from 'lit';
-import { L as LeuElement } from './LeuElement-CRdVLttR.js';
+import { L as LeuElement } from './LeuElement-CcarVabH.js';
 
 var css_248z = css`:host {
   --placeholder-font-regular: var(--leu-font-family-regular);

package/dist/Popup.js

@@ -1,6 +1,6 @@
 import { css, html } from 'lit';
 import { autoUpdate, size, flip, shift, computePosition } from '@floating-ui/dom';
-import { L as LeuElement } from './LeuElement-CRdVLttR.js';
+import { L as LeuElement } from './LeuElement-CcarVabH.js';
 
 var css_248z = css`:host {
   --popup-font-regular: var(--leu-font-family-regular);

package/dist/ProgressBar.js

@@ -2,7 +2,7 @@ import { _ as __decorate } from './_tslib-CNEFicEt.js';
 import { css, nothing, html } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { property } from 'lit/decorators.js';
-import { L as LeuElement } from './LeuElement-CRdVLttR.js';
+import { L as LeuElement } from './LeuElement-CcarVabH.js';
 
 var css_248z = css`/* :host {
   --progress-bar-font-regular: var(--leu-font-family-regular);

package/dist/Radio.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-CRdVLttR.js';
+import { L as LeuElement } from './LeuElement-CcarVabH.js';
 
 var css_248z = css`:host {
   --radio-color: var(--leu-color-black-40);

package/dist/RadioGroup.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-CRdVLttR.js';
+import { L as LeuElement } from './LeuElement-CcarVabH.js';
 import { LeuRadio } from './Radio.js';
 
 var css_248z = css`:host {

package/dist/Range.js

@@ -1,5 +1,5 @@
 import { css, html } from 'lit';
-import { L as LeuElement } from './LeuElement-CRdVLttR.js';
+import { L as LeuElement } from './LeuElement-CcarVabH.js';
 
 var css_248z = css`:host {
   --range-color: var(--leu-color-black-40);

package/dist/ScrollTop.js

@@ -1,6 +1,6 @@
 import { css, html } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
-import { L as LeuElement } from './LeuElement-CRdVLttR.js';
+import { L as LeuElement } from './LeuElement-CcarVabH.js';
 import { LeuButton } from './Button.js';
 import { LeuIcon } from './Icon.js';
 import './_tslib-CNEFicEt.js';

package/dist/Select.js

@@ -2,7 +2,7 @@ import { css, nothing, html } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { createRef, ref } from 'lit/directives/ref.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { L as LeuElement } from './LeuElement-CRdVLttR.js';
+import { L as LeuElement } from './LeuElement-CcarVabH.js';
 import { H as HasSlotController } from './hasSlotController-Bm2tipvG.js';
 import { LeuButton } from './Button.js';
 import { LeuMenu } from './Menu.js';

package/dist/Spinner.js

@@ -1,5 +1,5 @@
 import { css, html } from 'lit';
-import { L as LeuElement } from './LeuElement-CRdVLttR.js';
+import { L as LeuElement } from './LeuElement-CcarVabH.js';
 
 var css_248z = css`@keyframes leu-spinner-rotate {
   from {

package/dist/Table.js

@@ -2,7 +2,7 @@ import { css, html, nothing } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { createRef, ref } from 'lit/directives/ref.js';
-import { L as LeuElement } from './LeuElement-CRdVLttR.js';
+import { L as LeuElement } from './LeuElement-CcarVabH.js';
 import { LeuIcon } from './Icon.js';
 import { LeuPagination } from './Pagination.js';
 import './_tslib-CNEFicEt.js';

package/dist/Tag.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-CRdVLttR.js';
+import { L as LeuElement } from './LeuElement-CcarVabH.js';
 
 var css_248z = css`:host {
   /* --tag-font-regular: var(--leu-font-family-regular);

package/dist/VisuallyHidden.js

@@ -1,5 +1,5 @@
 import { css, html } from 'lit';
-import { L as LeuElement } from './LeuElement-CRdVLttR.js';
+import { L as LeuElement } from './LeuElement-CcarVabH.js';
 
 var css_248z = css`:host {
   clip: rect(0 0 0 0);

package/dist/components/file-input/FileInput.d.ts

@@ -2,6 +2,10 @@ import { LeuElement } from "../../lib/LeuElement.js";
 import { LeuButton } from "../../index.js";
 import { LeuIcon } from "../icon/leu-icon.js";
 import { LeuVisuallyHidden } from "../visually-hidden/VisuallyHidden.js";
+/**
+ * @todo Pluralize text when multiple files are allowed
+ * @todo Hide dropzone when not multiple and already filled
+ */
 /**
  * @tagname leu-file-input
  */
@@ -41,6 +45,7 @@ export declare class LeuFileInput extends LeuElement {
     get name(): string;
     updated(changedProperties: any): void;
     protected handleInput(): void;
+    private handleChange;
     formResetCallback(): void;
     protected updateFormValue(): void;
     protected removeFile(fileToRemove: File): void;

package/dist/components/file-input/FileInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileInput.d.ts","sourceRoot":"","sources":["../../../src/components/file-input/FileInput.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAA;AAGpD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAC1C,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAA;AAC7C,OAAO,EAAE,iBAAiB,EAAE,MAAM,sCAAsC,CAAA;AAExE;;GAEG;AACH,qBAAa,YAAa,SAAQ,UAAU;IAC1C,MAAM,CAAC,YAAY;;;;MAIlB;IAED,MAAM,CAAC,MAAM,iCAA8B;IAE3C,MAAM,CAAC,iBAAiB;;;;;;;MAGvB;IAED,MAAM,CAAC,cAAc,UAAO;IAE5B,SAAS,CAAC,SAAS,EAAE,gBAAgB,CAAA;IAGrC,KAAK,EAAE,MAAM,CAAK;IAElB,0MAA0M;IAE1M,MAAM,EAAE,MAAM,CAAK;IAEnB,0CAA0C;IAE1C,QAAQ,EAAE,OAAO,CAAQ;IAEzB,oDAAoD;IAEpD,QAAQ,EAAE,OAAO,CAAQ;IAEzB,0CAA0C;IAE1C,QAAQ,EAAE,OAAO,CAAQ;IAEzB,6EAA6E;IAE7E,OAAO,EAAE,QAAQ,GAAG,aAAa,CAAW;IAGrC,KAAK,EAAE,IAAI,EAAE,CAAK;IAGzB,OAAO,CAAC,UAAU,CAAiB;IAGnC,KAAK,EAAE,gBAAgB,CAAA;;IAQvB,IAAI,IAAI,oBAEP;IAED,IAAI,IAAI,WAEP;IAED,OAAO,CAAC,iBAAiB,KAAA;IAUzB,SAAS,CAAC,WAAW;IAad,iBAAiB;IAKxB,SAAS,CAAC,eAAe;IAYzB,SAAS,CAAC,UAAU,CAAC,YAAY,EAAE,IAAI;IAIvC,SAAS,CAAC,MAAM,CAAC,cAAc,CAAC,IAAI,EAAE,MAAM;IAY5C,SAAS,CAAC,eAAe,UAAW,SAAS,UAQ5C;IAGD,SAAS,CAAC,cAAc,UAAW,SAAS,UAK3C;IAED,SAAS,CAAC,eAAe,UAAW,SAAS,UAM5C;IAED,SAAS,CAAC,UAAU,UAAW,SAAS,UAcvC;IAED,cAAc,CAAC,IAAI,EAAE,IAAI,GAAG,OAAO;IA4BnC,MAAM;CAiEP"}
+{"version":3,"file":"FileInput.d.ts","sourceRoot":"","sources":["../../../src/components/file-input/FileInput.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAA;AAGpD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAC1C,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAA;AAC7C,OAAO,EAAE,iBAAiB,EAAE,MAAM,sCAAsC,CAAA;AAExE;;;GAGG;AAEH;;GAEG;AACH,qBAAa,YAAa,SAAQ,UAAU;IAC1C,MAAM,CAAC,YAAY;;;;MAIlB;IAED,MAAM,CAAC,MAAM,iCAA8B;IAE3C,MAAM,CAAC,iBAAiB;;;;;;;MAGvB;IAED,MAAM,CAAC,cAAc,UAAO;IAE5B,SAAS,CAAC,SAAS,EAAE,gBAAgB,CAAA;IAGrC,KAAK,EAAE,MAAM,CAAK;IAElB,0MAA0M;IAE1M,MAAM,EAAE,MAAM,CAAK;IAEnB,0CAA0C;IAE1C,QAAQ,EAAE,OAAO,CAAQ;IAEzB,oDAAoD;IAEpD,QAAQ,EAAE,OAAO,CAAQ;IAEzB,0CAA0C;IAE1C,QAAQ,EAAE,OAAO,CAAQ;IAEzB,6EAA6E;IAE7E,OAAO,EAAE,QAAQ,GAAG,aAAa,CAAW;IAGrC,KAAK,EAAE,IAAI,EAAE,CAAK;IAGzB,OAAO,CAAC,UAAU,CAAiB;IAGnC,KAAK,EAAE,gBAAgB,CAAA;;IAQvB,IAAI,IAAI,oBAEP;IAED,IAAI,IAAI,WAEP;IAED,OAAO,CAAC,iBAAiB,KAAA;IAUzB,SAAS,CAAC,WAAW;IAarB,OAAO,CAAC,YAAY;IAKb,iBAAiB;IAKxB,SAAS,CAAC,eAAe;IAYzB,SAAS,CAAC,UAAU,CAAC,YAAY,EAAE,IAAI;IAgBvC,SAAS,CAAC,MAAM,CAAC,cAAc,CAAC,IAAI,EAAE,MAAM;IAY5C,SAAS,CAAC,eAAe,UAAW,SAAS,UAQ5C;IAGD,SAAS,CAAC,cAAc,UAAW,SAAS,UAK3C;IAED,SAAS,CAAC,eAAe,UAAW,SAAS,UAM5C;IAED,SAAS,CAAC,UAAU,UAAW,SAAS,UAcvC;IAED,cAAc,CAAC,IAAI,EAAE,IAAI,GAAG,OAAO;IA4BnC,MAAM;CAkEP"}

package/dist/index.js

@@ -18,7 +18,7 @@ export { LeuRadio } from './Radio.js';
 export { LeuRadioGroup } from './RadioGroup.js';
 export { LeuSelect } from './Select.js';
 export { LeuTable } from './Table.js';
-export { L as LeuElement } from './LeuElement-CRdVLttR.js';
+export { L as LeuElement } from './LeuElement-CcarVabH.js';
 import './_tslib-CNEFicEt.js';
 import 'lit';
 import 'lit/static-html.js';

package/dist/leu-accordion.js

@@ -3,7 +3,7 @@ import './_tslib-CNEFicEt.js';
 import 'lit';
 import 'lit/static-html.js';
 import 'lit/decorators.js';
-import './LeuElement-CRdVLttR.js';
+import './LeuElement-CcarVabH.js';
 
 LeuAccordion.define("leu-accordion");
 

package/dist/leu-button-group.js

@@ -1,6 +1,6 @@
 import { LeuButtonGroup } from './ButtonGroup.js';
 import 'lit';
-import './LeuElement-CRdVLttR.js';
+import './LeuElement-CcarVabH.js';
 import './Button.js';
 import './_tslib-CNEFicEt.js';
 import 'lit/directives/class-map.js';

package/dist/leu-button.js

@@ -5,7 +5,7 @@ import 'lit/directives/class-map.js';
 import 'lit/directives/if-defined.js';
 import 'lit/decorators.js';
 import './Icon.js';
-import './LeuElement-CRdVLttR.js';
+import './LeuElement-CcarVabH.js';
 import './hasSlotController-Bm2tipvG.js';
 
 LeuButton.define("leu-button");

package/dist/leu-chart-wrapper.js

@@ -2,7 +2,7 @@ import { LeuChartWrapper } from './ChartWrapper.js';
 import './_tslib-CNEFicEt.js';
 import 'lit';
 import 'lit/decorators.js';
-import './LeuElement-CRdVLttR.js';
+import './LeuElement-CcarVabH.js';
 import './hasSlotController-Bm2tipvG.js';
 import './Spinner.js';
 

package/dist/leu-checkbox-group.js

@@ -3,7 +3,7 @@ import './_tslib-CNEFicEt.js';
 import 'lit';
 import 'lit/directives/class-map.js';
 import 'lit/decorators.js';
-import './LeuElement-CRdVLttR.js';
+import './LeuElement-CcarVabH.js';
 import './Checkbox.js';
 import './Icon.js';
 

package/dist/leu-checkbox.js

@@ -2,7 +2,7 @@ import { LeuCheckbox } from './Checkbox.js';
 import './_tslib-CNEFicEt.js';
 import 'lit';
 import 'lit/decorators.js';
-import './LeuElement-CRdVLttR.js';
+import './LeuElement-CcarVabH.js';
 import './Icon.js';
 
 LeuCheckbox.define("leu-checkbox");

package/dist/leu-chip-group.js

@@ -1,6 +1,6 @@
 import { LeuChipGroup } from './ChipGroup.js';
 import 'lit/static-html.js';
-import './LeuElement-CRdVLttR.js';
+import './LeuElement-CcarVabH.js';
 import 'lit';
 
 LeuChipGroup.define("leu-chip-group");

package/dist/leu-chip-link.js

@@ -1,7 +1,7 @@
 import { LeuChipLink } from './ChipLink.js';
 import 'lit';
 import './Chip.js';
-import './LeuElement-CRdVLttR.js';
+import './LeuElement-CcarVabH.js';
 
 LeuChipLink.define("leu-chip-link");
 

package/dist/leu-chip-removable.js

@@ -1,7 +1,7 @@
 import { LeuChipRemovable } from './ChipRemovable.js';
 import 'lit';
 import './Chip.js';
-import './LeuElement-CRdVLttR.js';
+import './LeuElement-CcarVabH.js';
 import './Icon.js';
 import './_tslib-CNEFicEt.js';
 import 'lit/decorators.js';

package/dist/leu-chip-selectable.js

@@ -1,7 +1,7 @@
 import { LeuChipSelectable } from './ChipSelectable.js';
 import 'lit';
 import './Chip.js';
-import './LeuElement-CRdVLttR.js';
+import './LeuElement-CcarVabH.js';
 
 LeuChipSelectable.define("leu-chip-selectable");
 

package/dist/leu-dialog.js

@@ -2,7 +2,7 @@ import { LeuDialog } from './Dialog.js';
 import 'lit';
 import 'lit/directives/ref.js';
 import 'lit/directives/class-map.js';
-import './LeuElement-CRdVLttR.js';
+import './LeuElement-CcarVabH.js';
 import './hasSlotController-Bm2tipvG.js';
 import './Icon.js';
 import './_tslib-CNEFicEt.js';

package/dist/leu-dropdown.js

@@ -1,7 +1,7 @@
 import { LeuDropdown } from './Dropdown.js';
 import 'lit';
 import 'lit/directives/ref.js';
-import './LeuElement-CRdVLttR.js';
+import './LeuElement-CcarVabH.js';
 import './hasSlotController-Bm2tipvG.js';
 import './Button.js';
 import './_tslib-CNEFicEt.js';

package/dist/leu-file-input.js

@@ -4,7 +4,7 @@ import 'lit';
 import 'lit/decorators.js';
 import 'lit/directives/if-defined.js';
 import 'lit/directives/class-map.js';
-import './LeuElement-CRdVLttR.js';
+import './LeuElement-CcarVabH.js';
 import './Accordion.js';
 import 'lit/static-html.js';
 import './Button.js';

package/dist/leu-icon.js

@@ -2,7 +2,7 @@ import { LeuIcon } from './Icon.js';
 import './_tslib-CNEFicEt.js';
 import 'lit';
 import 'lit/decorators.js';
-import './LeuElement-CRdVLttR.js';
+import './LeuElement-CcarVabH.js';
 
 LeuIcon.define("leu-icon");
 

package/dist/leu-input.js

@@ -4,7 +4,7 @@ import 'lit/directives/class-map.js';
 import 'lit/directives/if-defined.js';
 import 'lit/directives/live.js';
 import 'lit/directives/ref.js';
-import './LeuElement-CRdVLttR.js';
+import './LeuElement-CcarVabH.js';
 import './Icon.js';
 import './_tslib-CNEFicEt.js';
 import 'lit/decorators.js';

package/dist/leu-menu-item.js

@@ -1,7 +1,7 @@
 import { LeuMenuItem } from './MenuItem.js';
 import 'lit';
 import 'lit/directives/if-defined.js';
-import './LeuElement-CRdVLttR.js';
+import './LeuElement-CcarVabH.js';
 import './Icon.js';
 import './_tslib-CNEFicEt.js';
 import 'lit/decorators.js';

package/dist/leu-menu.js

@@ -1,6 +1,6 @@
 import { LeuMenu } from './Menu.js';
 import 'lit';
-import './LeuElement-CRdVLttR.js';
+import './LeuElement-CcarVabH.js';
 import './MenuItem.js';
 import 'lit/directives/if-defined.js';
 import './Icon.js';

package/dist/leu-message.js

@@ -3,7 +3,7 @@ import './_tslib-CNEFicEt.js';
 import 'lit';
 import 'lit/decorators.js';
 import 'lit/directives/class-map.js';
-import './LeuElement-CRdVLttR.js';
+import './LeuElement-CcarVabH.js';
 import './Icon.js';
 import './hasSlotController-Bm2tipvG.js';
 

package/dist/leu-pagination.js

@@ -3,7 +3,7 @@ import './_tslib-CNEFicEt.js';
 import 'lit';
 import 'lit/directives/live.js';
 import 'lit/decorators.js';
-import './LeuElement-CRdVLttR.js';
+import './LeuElement-CcarVabH.js';
 import './Button.js';
 import 'lit/directives/class-map.js';
 import 'lit/directives/if-defined.js';

package/dist/leu-placeholder.js

@@ -1,6 +1,6 @@
 import { LeuPlaceholder } from './Placeholder.js';
 import 'lit';
-import './LeuElement-CRdVLttR.js';
+import './LeuElement-CcarVabH.js';
 
 LeuPlaceholder.define("leu-placeholder");
 

package/dist/leu-popup.js

@@ -1,7 +1,7 @@
 import { LeuPopup } from './Popup.js';
 import 'lit';
 import '@floating-ui/dom';
-import './LeuElement-CRdVLttR.js';
+import './LeuElement-CcarVabH.js';
 
 LeuPopup.define("leu-popup");
 

package/dist/leu-progress-bar.js

@@ -3,7 +3,7 @@ import './_tslib-CNEFicEt.js';
 import 'lit';
 import 'lit/directives/if-defined.js';
 import 'lit/decorators.js';
-import './LeuElement-CRdVLttR.js';
+import './LeuElement-CcarVabH.js';
 
 LeuProgressBar.define("leu-progress-bar");
 

package/dist/leu-radio-group.js

@@ -3,7 +3,7 @@ import './_tslib-CNEFicEt.js';
 import 'lit';
 import 'lit/directives/class-map.js';
 import 'lit/decorators.js';
-import './LeuElement-CRdVLttR.js';
+import './LeuElement-CcarVabH.js';
 import './Radio.js';
 
 LeuRadioGroup.define("leu-radio-group");

package/dist/leu-radio.js

@@ -2,7 +2,7 @@ import { LeuRadio } from './Radio.js';
 import './_tslib-CNEFicEt.js';
 import 'lit';
 import 'lit/decorators.js';
-import './LeuElement-CRdVLttR.js';
+import './LeuElement-CcarVabH.js';
 
 LeuRadio.define("leu-radio");
 

package/dist/leu-range.js

@@ -1,6 +1,6 @@
 import { LeuRange } from './Range.js';
 import 'lit';
-import './LeuElement-CRdVLttR.js';
+import './LeuElement-CcarVabH.js';
 
 LeuRange.define("leu-range");
 

package/dist/leu-scroll-top.js

@@ -1,7 +1,7 @@
 import { LeuScrollTop } from './ScrollTop.js';
 import 'lit';
 import 'lit/directives/class-map.js';
-import './LeuElement-CRdVLttR.js';
+import './LeuElement-CcarVabH.js';
 import './Button.js';
 import './_tslib-CNEFicEt.js';
 import 'lit/directives/if-defined.js';

package/dist/leu-select.js

@@ -3,7 +3,7 @@ import 'lit';
 import 'lit/directives/class-map.js';
 import 'lit/directives/ref.js';
 import 'lit/directives/if-defined.js';
-import './LeuElement-CRdVLttR.js';
+import './LeuElement-CcarVabH.js';
 import './hasSlotController-Bm2tipvG.js';
 import './Button.js';
 import './_tslib-CNEFicEt.js';

package/dist/leu-spinner.js

@@ -1,6 +1,6 @@
 import { LeuSpinner } from './Spinner.js';
 import 'lit';
-import './LeuElement-CRdVLttR.js';
+import './LeuElement-CcarVabH.js';
 
 LeuSpinner.define("leu-spinner");
 

package/dist/leu-table.js

@@ -3,7 +3,7 @@ import 'lit';
 import 'lit/directives/class-map.js';
 import 'lit/directives/style-map.js';
 import 'lit/directives/ref.js';
-import './LeuElement-CRdVLttR.js';
+import './LeuElement-CcarVabH.js';
 import './Icon.js';
 import './_tslib-CNEFicEt.js';
 import 'lit/decorators.js';

package/dist/leu-tag.js

@@ -2,7 +2,7 @@ import { LeuTag } from './Tag.js';
 import './_tslib-CNEFicEt.js';
 import 'lit';
 import 'lit/decorators.js';
-import './LeuElement-CRdVLttR.js';
+import './LeuElement-CcarVabH.js';
 
 LeuTag.define("leu-tag");
 

package/dist/leu-visually-hidden.js

@@ -1,6 +1,6 @@
 import { LeuVisuallyHidden } from './VisuallyHidden.js';
 import 'lit';
-import './LeuElement-CRdVLttR.js';
+import './LeuElement-CcarVabH.js';
 
 LeuVisuallyHidden.define("leu-visually-hidden");
 

package/dist/vscode.html-custom-data.json

@@ -299,7 +299,7 @@
     },
     {
       "name": "leu-file-input",
-      "description": "\n---\n",
+      "description": "\n---\n\n\n### **Events:**\n - **input**\n- **change**",
       "attributes": [
         { "name": "label", "values": [] },
         {

package/dist/vue/index.d.ts

@@ -12,7 +12,7 @@ import type { LeuChipRemovable } from "../ChipRemovable.js";
 import type { LeuChipSelectable, CustomEvent } from "../ChipSelectable.js";
 import type { LeuDialog } from "../Dialog.js";
 import type { LeuDropdown } from "../Dropdown.js";
-import type { LeuFileInput } from "../FileInput.js";
+import type { LeuFileInput, CustomEvent } from "../FileInput.js";
 import type { LeuIcon } from "../Icon.js";
 import type { LeuInput, CustomEvent } from "../Input.js";
 import type { LeuMenu } from "../Menu.js";
@@ -208,6 +208,10 @@ type LeuFileInputProps = {
   form?: LeuFileInput["form"];
   /**  */
   name?: LeuFileInput["name"];
+  /**  */
+  oninput?: (e: CustomEvent<CustomEvent>) => void;
+  /**  */
+  onchange?: (e: CustomEvent<CustomEvent>) => void;
 };
 
 type LeuIconProps = {
@@ -632,6 +636,10 @@ export type CustomElements = {
    *
    * ---
    *
+   *
+   * ### **Events:**
+   *  - **input**
+   * - **change**
    */
   "leu-file-input": DefineComponent<LeuFileInputProps>;
 

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@statistikzh/leu",
-  "version": "0.19.1",
+  "version": "0.19.2",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -597,7 +597,7 @@
         },
         {
           "name": "leu-file-input",
-          "description": "\n---\n",
+          "description": "\n---\n\n\n### **Events:**\n - **input**\n- **change**",
           "doc-url": "",
           "attributes": [
             {
@@ -633,7 +633,10 @@
               }
             }
           ],
-          "events": [],
+          "events": [
+            { "name": "input", "type": "CustomEvent" },
+            { "name": "change", "type": "CustomEvent" }
+          ],
           "js": {
             "properties": [
               { "name": "label", "type": "string" },
@@ -667,7 +670,10 @@
               { "name": "form" },
               { "name": "name" }
             ],
-            "events": []
+            "events": [
+              { "name": "input", "type": "CustomEvent" },
+              { "name": "change", "type": "CustomEvent" }
+            ]
           }
         },
         {

package/package.json

@@ -3,7 +3,7 @@
   "description": "UI component library of the canton of zurich",
   "license": "MIT",
   "author": "statistikzh",
-  "version": "0.19.1",
+  "version": "0.19.2",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/src/components/file-input/FileInput.ts

@@ -10,6 +10,11 @@ import { LeuButton } from "../../index.js"
 import { LeuIcon } from "../icon/leu-icon.js"
 import { LeuVisuallyHidden } from "../visually-hidden/VisuallyHidden.js"
 
+/**
+ * @todo Pluralize text when multiple files are allowed
+ * @todo Hide dropzone when not multiple and already filled
+ */
+
 /**
  * @tagname leu-file-input
  */
@@ -100,6 +105,11 @@ export class LeuFileInput extends LeuElement {
     }
   }
 
+  private handleChange(event: Event & { target: HTMLInputElement }) {
+    const customEvent = new CustomEvent(event.type, event)
+    this.dispatchEvent(customEvent)
+  }
+
   public formResetCallback() {
     this.files = []
     this.input.value = ""
@@ -119,6 +129,18 @@ export class LeuFileInput extends LeuElement {
 
   protected removeFile(fileToRemove: File) {
     this.files = this.files.filter((file) => file !== fileToRemove)
+    this.dispatchEvent(
+      new CustomEvent("input", {
+        composed: true,
+        bubbles: true,
+      }),
+    )
+    this.dispatchEvent(
+      new CustomEvent("change", {
+        composed: true,
+        bubbles: true,
+      }),
+    )
   }
 
   protected static formatFileSize(size: number) {
@@ -220,6 +242,7 @@ export class LeuFileInput extends LeuElement {
             accept=${ifDefined(this.accept)}
             ?disabled=${this.disabled}
             @input=${this.handleInput}
+            @change=${this.handleChange}
           />
         </leu-visually-hidden>
         <div