@statistikzh/leu 0.26.0 → 0.27.0

package/dist/leu-placeholder.js

@@ -1,5 +1,5 @@
-import "./LeuElement-BeFrgKes.js";
-import { t as LeuPlaceholder } from "./Placeholder-BJybFwSg.js";
+import "./LeuElement-k4RjIeoG.js";
+import { t as LeuPlaceholder } from "./Placeholder-DHMexMhK.js";
 //#region src/components/placeholder/leu-placeholder.ts
 LeuPlaceholder.define("leu-placeholder");
 //#endregion

package/dist/leu-popup.js

@@ -1,5 +1,5 @@
-import "./LeuElement-BeFrgKes.js";
-import { t as LeuPopup } from "./Popup-DNlm_9AA.js";
+import "./LeuElement-k4RjIeoG.js";
+import { t as LeuPopup } from "./Popup-8jhVy8gB.js";
 //#region src/components/popup/leu-popup.ts
 LeuPopup.define("leu-popup");
 //#endregion

package/dist/leu-progress-bar.js

@@ -1,5 +1,5 @@
-import "./LeuElement-BeFrgKes.js";
-import { t as LeuProgressBar } from "./ProgressBar-B0wYj1KF.js";
+import "./LeuElement-k4RjIeoG.js";
+import { t as LeuProgressBar } from "./ProgressBar-CG0_lHfS.js";
 //#region src/components/progress-bar/leu-progress-bar.ts
 LeuProgressBar.define("leu-progress-bar");
 //#endregion

package/dist/leu-radio-group.js

@@ -1,6 +1,6 @@
-import "./LeuElement-BeFrgKes.js";
-import "./Radio-DMCL8c4D.js";
-import { t as LeuRadioGroup } from "./RadioGroup-CM6IyBlq.js";
+import "./LeuElement-k4RjIeoG.js";
+import "./Radio-DG3xqP3s.js";
+import { t as LeuRadioGroup } from "./RadioGroup-BKCp9ICX.js";
 //#region src/components/radio/leu-radio-group.ts
 LeuRadioGroup.define("leu-radio-group");
 //#endregion

package/dist/leu-radio.js

@@ -1,5 +1,5 @@
-import "./LeuElement-BeFrgKes.js";
-import { t as LeuRadio } from "./Radio-DMCL8c4D.js";
+import "./LeuElement-k4RjIeoG.js";
+import { t as LeuRadio } from "./Radio-DG3xqP3s.js";
 //#region src/components/radio/leu-radio.ts
 LeuRadio.define("leu-radio");
 //#endregion

package/dist/leu-range.js

@@ -1,5 +1,5 @@
-import "./LeuElement-BeFrgKes.js";
-import { t as LeuRange } from "./Range-B72rtfln.js";
+import "./LeuElement-k4RjIeoG.js";
+import { t as LeuRange } from "./Range-7LrESv4K.js";
 //#region src/components/range/leu-range.ts
 LeuRange.define("leu-range");
 //#endregion

package/dist/leu-scroll-top.js

@@ -1,9 +1,9 @@
-import "./LeuElement-BeFrgKes.js";
-import "./Icon-C_yYuynf.js";
-import "./Spinner-DDTqijTO.js";
-import "./Button-BkhqVjug.js";
+import "./LeuElement-k4RjIeoG.js";
+import "./Icon-CbZXpyHU.js";
+import "./Spinner-VhKfzI3Q.js";
+import "./Button-BSyDL_cV.js";
 import "./FormAssociatedMixin-DLPvFtbT.js";
-import { t as LeuScrollTop } from "./ScrollTop-BFAqBVDR.js";
+import { t as LeuScrollTop } from "./ScrollTop-CJJsfniA.js";
 //#region src/components/scroll-top/leu-scroll-top.ts
 LeuScrollTop.define("leu-scroll-top");
 //#endregion

package/dist/leu-select.js

@@ -1,13 +1,13 @@
-import "./LeuElement-BeFrgKes.js";
-import "./Icon-C_yYuynf.js";
-import "./Spinner-DDTqijTO.js";
-import "./Button-BkhqVjug.js";
+import "./LeuElement-k4RjIeoG.js";
+import "./Icon-CbZXpyHU.js";
+import "./Spinner-VhKfzI3Q.js";
+import "./Button-BSyDL_cV.js";
 import "./FormAssociatedMixin-DLPvFtbT.js";
-import "./MenuItem-DVg8-1Bq.js";
-import "./Menu-BeqqtCw6.js";
-import "./Popup-DNlm_9AA.js";
-import "./Input-DEOVocTa.js";
-import { t as LeuSelect } from "./Select-vxl3BvD4.js";
+import "./MenuItem-Cs3KFhJm.js";
+import "./Menu-Cu8eIF1T.js";
+import "./Popup-8jhVy8gB.js";
+import "./Input-DBXX7ev8.js";
+import { t as LeuSelect } from "./Select-CxEDXIBn.js";
 //#region src/components/select/leu-select.ts
 LeuSelect.define("leu-select");
 //#endregion

package/dist/leu-spinner.js

@@ -1,5 +1,5 @@
-import "./LeuElement-BeFrgKes.js";
-import { t as LeuSpinner } from "./Spinner-DDTqijTO.js";
+import "./LeuElement-k4RjIeoG.js";
+import { t as LeuSpinner } from "./Spinner-VhKfzI3Q.js";
 //#region src/components/spinner/leu-spinner.ts
 LeuSpinner.define("leu-spinner");
 //#endregion

package/dist/leu-table.js

@@ -1,11 +1,11 @@
-import "./LeuElement-BeFrgKes.js";
-import "./Icon-C_yYuynf.js";
-import "./Spinner-DDTqijTO.js";
-import "./Button-BkhqVjug.js";
+import "./LeuElement-k4RjIeoG.js";
+import "./Icon-CbZXpyHU.js";
+import "./Spinner-VhKfzI3Q.js";
+import "./Button-BSyDL_cV.js";
 import "./FormAssociatedMixin-DLPvFtbT.js";
-import "./VisuallyHidden-pll3amXE.js";
-import "./Pagination-DJI5MIi_.js";
-import { t as LeuTable } from "./Table-BgCxfBcm.js";
+import "./VisuallyHidden-Co_txzxB.js";
+import "./Pagination-CB2eVlXk.js";
+import { t as LeuTable } from "./Table-rg_JCtsA.js";
 //#region src/components/table/leu-table.ts
 LeuTable.define("leu-table");
 //#endregion

package/dist/leu-tag.js

@@ -1,5 +1,5 @@
-import "./LeuElement-BeFrgKes.js";
-import { t as LeuTag } from "./Tag-DK2KkPIQ.js";
+import "./LeuElement-k4RjIeoG.js";
+import { t as LeuTag } from "./Tag-BROUaDAZ.js";
 //#region src/components/tag/leu-tag.ts
 LeuTag.define("leu-tag");
 //#endregion

package/dist/leu-visually-hidden.js

@@ -1,5 +1,5 @@
-import "./LeuElement-BeFrgKes.js";
-import { t as LeuVisuallyHidden } from "./VisuallyHidden-pll3amXE.js";
+import "./LeuElement-k4RjIeoG.js";
+import { t as LeuVisuallyHidden } from "./VisuallyHidden-Co_txzxB.js";
 //#region src/components/visually-hidden/leu-visually-hidden.ts
 LeuVisuallyHidden.define("leu-visually-hidden");
 //#endregion

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

@@ -308,7 +308,7 @@
     },
     {
       "name": "leu-file-input",
-      "description": "\n---\n\n\n### **Events:**\n - **input**\n- **change**",
+      "description": "\n---\n\n\n### **Events:**\n - **input**\n- **change**\n\n### **Methods:**\n ",
       "attributes": [
         { "name": "label", "values": [] },
         {
@@ -380,11 +380,6 @@
           "description": "Adds a button to clear the input element",
           "values": []
         },
-        {
-          "name": "value",
-          "description": "The value of the input element.",
-          "values": []
-        },
         {
           "name": "error",
           "description": "A custom error that is completely independent of the validity state. Useful for displaying server side errors.",
@@ -459,6 +454,11 @@
           "name": "novalidate",
           "description": "Disables the browser's validation.",
           "values": []
+        },
+        {
+          "name": "value",
+          "description": "The default value of the input element.",
+          "values": []
         }
       ],
       "references": [
@@ -808,22 +808,12 @@
     },
     {
       "name": "leu-select",
-      "description": "\n---\n\n\n### **Methods:**\n - **_updateMenuItems(changed)** - Apply the current state to the menu items.\n- Set the active property when the value property has changed.\n- Hide menu items that do not match the filter.\n- **_getDisplayValue(): _String | nothing_** - Determines the value or label that should be displayed inside the toggle button.\n- **_isSelected(menuItemValue: _String_): _Boolean_** - Checks if the given value is selected.\n\n### **Slots:**\n - **before** - Optional content the appears before the option list\n- **after** - Optional content the appears after the option list",
+      "description": "\n---\n\n\n### **Methods:**\n - **_updateMenuItems(changed)** - Apply the current state to the menu items.\n- Set the active property when the value property has changed.\n- Hide menu items that do not match the filter.\n- **_getDisplayValue()** - Determines the value or label that should be displayed inside the toggle button.\n- **_isSelected(menuItemValue: _string_)** - Checks if the given value is selected.\n\n### **Slots:**\n - **before** - Optional content the appears before the option list\n- **after** - Optional content the appears after the option list",
       "attributes": [
         {
           "name": "value",
-          "description": "List of selected values. If they're set from outside the component, the select element tries to find all the options with the given values and selects them.",
-          "values": [{ "name": "array" }]
-        },
-        {
-          "name": "name",
-          "description": "Reflects to the name attribute of the hidden input field that would be used in a form",
-          "values": []
-        },
-        {
-          "name": "open",
-          "description": "The expanded state of the popup",
-          "values": []
+          "description": "The default value of the select. Corresponds to the `value` HTML attribute.",
+          "values": [{ "name": "Array<string>" }]
         },
         {
           "name": "label",
@@ -835,11 +825,6 @@
           "description": "Show a clearable button to reset the value",
           "values": []
         },
-        {
-          "name": "disabled",
-          "description": "If the select should be disabled",
-          "values": []
-        },
         {
           "name": "filterable",
           "description": "Show an input field to filter the options inside the popup",
@@ -850,9 +835,11 @@
           "description": "Allow multiple selections",
           "values": []
         },
-        { "name": "_optionFilter", "values": [] },
-        { "name": "_hasFilterResults", "values": [] },
-        { "name": "_displayValue", "values": [] }
+        {
+          "name": "required",
+          "description": "Marks the input element as required",
+          "values": []
+        }
       ],
       "references": [
         {

package/dist/vue/index.d.ts

@@ -213,8 +213,6 @@ type LeuInputProps = {
   required?: LeuInput["required"];
   /** Adds a button to clear the input element */
   clearable?: LeuInput["clearable"];
-  /** The value of the input element. */
-  value?: LeuInput["value"];
   /** A custom error that is completely independent of the validity state. Useful for displaying server side errors. */
   error?: LeuInput["error"];
   /** The label of the input element */
@@ -245,6 +243,10 @@ type LeuInputProps = {
   validationMessages?: LeuInput["validationMessages"];
   /** Disables the browser's validation. */
   novalidate?: LeuInput["novalidate"];
+  /** The default value of the input element. */
+  value?: LeuInput["defaultValue"];
+  /** The value of the input element. */
+  value?: LeuInput["value"];
   /**  */
   _validity?: LeuInput["_validity"];
   /**  */
@@ -429,34 +431,21 @@ type LeuScrollTopProps = {
 };
 
 type LeuSelectProps = {
-  /** List of selected values. If they're set from outside the component, the select element tries to find all the options with the given values and selects them. */
-  value?: LeuSelect["value"];
-  /** Reflects to the name attribute of the hidden input field that would be used in a form */
-  name?: LeuSelect["name"];
-  /** The expanded state of the popup */
-  open?: LeuSelect["open"];
+  /** The default value of the select. Corresponds to the `value` HTML attribute. */
+  value?: LeuSelect["defaultValue"];
   /** The label of the select */
   label?: LeuSelect["label"];
   /** Show a clearable button to reset the value */
   clearable?: LeuSelect["clearable"];
-  /** If the select should be disabled */
-  disabled?: LeuSelect["disabled"];
   /** Show an input field to filter the options inside the popup */
   filterable?: LeuSelect["filterable"];
   /** Allow multiple selections */
   multiple?: LeuSelect["multiple"];
-  /**  */
-  _optionFilter?: LeuSelect["_optionFilter"];
-  /**  */
-  _hasFilterResults?: LeuSelect["_hasFilterResults"];
-  /**  */
-  _displayValue?: LeuSelect["_displayValue"];
-  /**  */
-  _optionFilterRef?: LeuSelect["_optionFilterRef"];
-  /**  */
-  _toggleButtonRef?: LeuSelect["_toggleButtonRef"];
-  /**  */
-  _menuRef?: LeuSelect["_menuRef"];
+  /** Marks the input element as required */
+  required?: LeuSelect["required"];
+  /** List of selected values. If they're set from outside the component, the select element
+finds all the options that match the given values and selects them. */
+  value?: LeuSelect["value"];
 };
 
 type LeuSpinnerProps = {};
@@ -644,6 +633,9 @@ export type CustomElements = {
    * ### **Events:**
    *  - **input**
    * - **change**
+   *
+   * ### **Methods:**
+   *
    */
   "leu-file-input": DefineComponent<LeuFileInputProps>;
 
@@ -802,8 +794,8 @@ export type CustomElements = {
    *  - **_updateMenuItems(changed)** - Apply the current state to the menu items.
    * - Set the active property when the value property has changed.
    * - Hide menu items that do not match the filter.
-   * - **_getDisplayValue(): _String | nothing_** - Determines the value or label that should be displayed inside the toggle button.
-   * - **_isSelected(menuItemValue: _String_): _Boolean_** - Checks if the given value is selected.
+   * - **_getDisplayValue()** - Determines the value or label that should be displayed inside the toggle button.
+   * - **_isSelected(menuItemValue: _string_)** - Checks if the given value is selected.
    *
    * ### **Slots:**
    *  - **before** - Optional content the appears before the option list

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.26.0",
+  "version": "0.27.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -613,7 +613,7 @@
         },
         {
           "name": "leu-file-input",
-          "description": "\n---\n\n\n### **Events:**\n - **input**\n- **change**",
+          "description": "\n---\n\n\n### **Events:**\n - **input**\n- **change**\n\n### **Methods:**\n ",
           "doc-url": "",
           "attributes": [
             {
@@ -733,11 +733,6 @@
               "description": "Adds a button to clear the input element",
               "value": { "type": "boolean", "default": "false" }
             },
-            {
-              "name": "value",
-              "description": "The value of the input element.",
-              "value": { "type": "string", "default": "\"\"" }
-            },
             {
               "name": "error",
               "description": "A custom error that is completely independent of the validity state. Useful for displaying server side errors.",
@@ -815,6 +810,11 @@
               "name": "novalidate",
               "description": "Disables the browser's validation.",
               "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "value",
+              "description": "The default value of the input element.",
+              "value": { "type": "string", "default": "\"\"" }
             }
           ],
           "events": [
@@ -846,11 +846,6 @@
                 "description": "Adds a button to clear the input element",
                 "type": "boolean"
               },
-              {
-                "name": "value",
-                "description": "The value of the input element.",
-                "type": "string"
-              },
               {
                 "name": "error",
                 "description": "A custom error that is completely independent of the validity state. Useful for displaying server side errors.",
@@ -926,6 +921,16 @@
                 "description": "Disables the browser's validation.",
                 "type": "boolean"
               },
+              {
+                "name": "defaultValue",
+                "description": "The default value of the input element.",
+                "type": "string"
+              },
+              {
+                "name": "value",
+                "description": "The value of the input element.",
+                "type": "string"
+              },
               { "name": "_validity", "type": "ValidityState | null" },
               { "name": "valueAsNumber" }
             ],
@@ -1581,23 +1586,13 @@
         },
         {
           "name": "leu-select",
-          "description": "\n---\n\n\n### **Methods:**\n - **_updateMenuItems(changed)** - Apply the current state to the menu items.\n- Set the active property when the value property has changed.\n- Hide menu items that do not match the filter.\n- **_getDisplayValue(): _String | nothing_** - Determines the value or label that should be displayed inside the toggle button.\n- **_isSelected(menuItemValue: _String_): _Boolean_** - Checks if the given value is selected.\n\n### **Slots:**\n - **before** - Optional content the appears before the option list\n- **after** - Optional content the appears after the option list",
+          "description": "\n---\n\n\n### **Methods:**\n - **_updateMenuItems(changed)** - Apply the current state to the menu items.\n- Set the active property when the value property has changed.\n- Hide menu items that do not match the filter.\n- **_getDisplayValue()** - Determines the value or label that should be displayed inside the toggle button.\n- **_isSelected(menuItemValue: _string_)** - Checks if the given value is selected.\n\n### **Slots:**\n - **before** - Optional content the appears before the option list\n- **after** - Optional content the appears after the option list",
           "doc-url": "",
           "attributes": [
             {
               "name": "value",
-              "description": "List of selected values. If they're set from outside the component, the select element tries to find all the options with the given values and selects them.",
-              "value": { "type": "array", "default": "[]" }
-            },
-            {
-              "name": "name",
-              "description": "Reflects to the name attribute of the hidden input field that would be used in a form",
-              "value": { "type": "string", "default": "\"\"" }
-            },
-            {
-              "name": "open",
-              "description": "The expanded state of the popup",
-              "value": { "type": "boolean", "default": "false" }
+              "description": "The default value of the select. Corresponds to the `value` HTML attribute.",
+              "value": { "type": "Array<string>", "default": "[]" }
             },
             {
               "name": "label",
@@ -1609,11 +1604,6 @@
               "description": "Show a clearable button to reset the value",
               "value": { "type": "boolean", "default": "false" }
             },
-            {
-              "name": "disabled",
-              "description": "If the select should be disabled",
-              "value": { "type": "boolean", "default": "false" }
-            },
             {
               "name": "filterable",
               "description": "Show an input field to filter the options inside the popup",
@@ -1624,9 +1614,11 @@
               "description": "Allow multiple selections",
               "value": { "type": "boolean", "default": "false" }
             },
-            { "name": "_optionFilter", "value": { "type": "string" } },
-            { "name": "_hasFilterResults", "value": { "type": "string" } },
-            { "name": "_displayValue", "value": { "type": "string" } }
+            {
+              "name": "required",
+              "description": "Marks the input element as required",
+              "value": { "type": "boolean", "default": "false" }
+            }
           ],
           "slots": [
             {
@@ -1642,19 +1634,19 @@
           "js": {
             "properties": [
               {
-                "name": "open",
-                "description": "The expanded state of the popup",
-                "type": "boolean"
+                "name": "label",
+                "description": "The label of the select",
+                "type": "string"
               },
               {
-                "name": "disabled",
-                "description": "If the select should be disabled",
-                "type": "boolean"
+                "name": "defaultValue",
+                "description": "The default value of the select. Corresponds to the `value` HTML attribute.",
+                "type": "Array<string>"
               },
               {
-                "name": "multiple",
-                "description": "Allow multiple selections",
-                "type": "boolean"
+                "name": "value",
+                "description": "List of selected values. If they're set from outside the component, the select element\nfinds all the options that match the given values and selects them.",
+                "type": "Array<string>"
               },
               {
                 "name": "clearable",
@@ -1667,26 +1659,15 @@
                 "type": "boolean"
               },
               {
-                "name": "value",
-                "description": "List of selected values. If they're set from outside the component, the select element tries to find all the options with the given values and selects them.",
-                "type": "array"
-              },
-              {
-                "name": "label",
-                "description": "The label of the select",
-                "type": "string"
+                "name": "multiple",
+                "description": "Allow multiple selections",
+                "type": "boolean"
               },
               {
-                "name": "name",
-                "description": "Reflects to the name attribute of the hidden input field that would be used in a form",
-                "type": "string"
-              },
-              { "name": "_optionFilterRef", "type": "Ref<LeuInput>" },
-              { "name": "_toggleButtonRef", "type": "Ref<HTMLButtonElement>" },
-              { "name": "_menuRef", "type": "Ref<LeuMenu>" },
-              { "name": "_optionFilter", "type": "string" },
-              { "name": "_hasFilterResults", "type": "boolean" },
-              { "name": "_displayValue", "type": "string" }
+                "name": "required",
+                "description": "Marks the input element as required",
+                "type": "boolean"
+              }
             ],
             "events": []
           }

package/package.json

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

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

@@ -145,16 +145,35 @@ export class LeuFileInput extends FormAssociatedMixin(LeuElement) {
     )
   }
 
+  /**
+   * This implementation Uses base-10 (decimal) units:
+   * 1 KB = 1_000 bytes
+   * 1 MB = 1_000_000 bytes
+   * 1 GB = 1_000_000_000 bytes
+   *
+   * To switch to base-2 (binary), use the following implementation:
+   * // const KB = 1024
+   * // const MB = 1024 * 1024
+   * // const GB = 1024 * 1024 * 1024
+   */
   protected static formatFileSize(size: number) {
-    if (size < 1e3) {
-      return html`${size}&nbsp;bytes`
+    const KB = 1e3
+    const MB = 1e6
+    const GB = 1e9
+
+    if (size >= GB) {
+      return html`${(size / GB).toFixed(1)}&nbsp;GB`
+    }
+
+    if (size >= MB) {
+      return html`${(size / MB).toFixed(1)}&nbsp;MB`
     }
 
-    if (size >= 1e3 && size < 1e6) {
-      return html`${(size / 1e3).toFixed(1)}&nbsp;KB`
+    if (size >= KB) {
+      return html`${(size / KB).toFixed(1)}&nbsp;KB`
     }
 
-    return html`${(size / 1e6).toFixed(1)}&nbsp;MB`
+    return html`${size}&nbsp;bytes`
   }
 
   protected handleDragEnter = (event: DragEvent) => {

package/src/components/input/Input.ts

@@ -86,10 +86,6 @@ export class LeuInput extends FormAssociatedMixin(LeuElement) {
   @property({ type: Boolean, reflect: true })
   clearable: boolean = false
 
-  /** The value of the input element. */
-  @property({ type: String, reflect: true })
-  value: string = ""
-
   /** A custom error that is completely independent of the validity state. Useful for displaying server side errors. */
   @property({ type: String, reflect: true })
   error: string = ""
@@ -150,6 +146,26 @@ export class LeuInput extends FormAssociatedMixin(LeuElement) {
   @property({ type: Boolean, reflect: true })
   novalidate: boolean = false
 
+  /** The default value of the input element. */
+  @property({ type: String, reflect: true, attribute: "value" })
+  defaultValue: string = ""
+
+  protected _value: string
+
+  /** The value of the input element. */
+  @property({ type: String, attribute: false })
+  set value(value: string) {
+    this._value = value
+  }
+
+  get value(): string {
+    if (typeof this._value === "string") {
+      return this._value
+    }
+
+    return this.defaultValue
+  }
+
   @state()
   _validity: ValidityState | null = null
 
@@ -171,15 +187,32 @@ export class LeuInput extends FormAssociatedMixin(LeuElement) {
   }
 
   formResetCallback() {
-    this.value = ""
+    this.value = this.defaultValue
   }
 
   protected setFormValue(): void {
-    this.internals.setFormValue(this.value)
+    this.internals.setFormValue(this.disabled ? null : this.value)
   }
 
   protected willUpdate(changedProperties: PropertyValues<this>): void {
-    if (changedProperties.has("value")) {
+    super.willUpdate(changedProperties)
+    let valueChanged = false
+
+    if (
+      changedProperties.has("defaultValue") &&
+      !changedProperties.has("value") &&
+      !this.hasInteracted
+    ) {
+      this.value = this.defaultValue
+      valueChanged = true
+    }
+
+    if (
+      valueChanged ||
+      changedProperties.has("value") ||
+      changedProperties.has("name") ||
+      changedProperties.has("disabled")
+    ) {
       this.setFormValue()
     }
   }
@@ -225,6 +258,7 @@ export class LeuInput extends FormAssociatedMixin(LeuElement) {
    * @fires {CustomEvent} change
    */
   protected handleChange(event: Event & { target: HTMLInputElement }) {
+    this.hasInteracted = true
     if (event.target.validity.valid) {
       this.value = event.target.value
     }
@@ -239,6 +273,7 @@ export class LeuInput extends FormAssociatedMixin(LeuElement) {
    * the event can be handled outside the shadow DOM.
    */
   protected handleInput(event: Event & { target: HTMLInputElement }) {
+    this.hasInteracted = true
     this.value = event.target.value
 
     const customEvent = new CustomEvent("input", {
@@ -311,7 +346,7 @@ export class LeuInput extends FormAssociatedMixin(LeuElement) {
       return true
     }
 
-    return this._validity === null || this.novalidate
+    return this._validity === null || this.novalidate || this.disabled
       ? false
       : !this._validity.valid
   }