@statistikzh/leu 0.28.0 → 0.28.1

package/dist/leu-pagination.js

@@ -1,10 +1,10 @@
-import "./LeuElement-DQI8cqZV.js";
-import "./Icon-D83qesg5.js";
-import "./Spinner-BBiVZxFH.js";
-import "./Button-DyNVOHCd.js";
+import "./LeuElement-C_lcHzQI.js";
+import "./Icon-D8HTPEFH.js";
+import "./Spinner-ChKJQJTN.js";
+import "./Button-D1aYnunQ.js";
 import "./FormAssociatedMixin-DLPvFtbT.js";
-import "./VisuallyHidden-CpYXyuC7.js";
-import { t as LeuPagination } from "./Pagination-CIy7YvWE.js";
+import "./VisuallyHidden-DF2q9pTa.js";
+import { t as LeuPagination } from "./Pagination-D1tP5FrM.js";
 //#region src/components/pagination/leu-pagination.ts
 LeuPagination.define("leu-pagination");
 //#endregion

package/dist/leu-placeholder.js

@@ -1,5 +1,5 @@
-import "./LeuElement-DQI8cqZV.js";
-import { t as LeuPlaceholder } from "./Placeholder-Dol_X5Hp.js";
+import "./LeuElement-C_lcHzQI.js";
+import { t as LeuPlaceholder } from "./Placeholder-CnGzCZ5-.js";
 //#region src/components/placeholder/leu-placeholder.ts
 LeuPlaceholder.define("leu-placeholder");
 //#endregion

package/dist/leu-popup.js

@@ -1,5 +1,5 @@
-import "./LeuElement-DQI8cqZV.js";
-import { t as LeuPopup } from "./Popup-nJrJHGSy.js";
+import "./LeuElement-C_lcHzQI.js";
+import { t as LeuPopup } from "./Popup-BiN_tZDN.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-DQI8cqZV.js";
-import { t as LeuProgressBar } from "./ProgressBar-Dmq9veqU.js";
+import "./LeuElement-C_lcHzQI.js";
+import { t as LeuProgressBar } from "./ProgressBar-BfJo_KyU.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-DQI8cqZV.js";
-import "./Radio-W5ck_IJI.js";
-import { t as LeuRadioGroup } from "./RadioGroup-De5x2YCO.js";
+import "./LeuElement-C_lcHzQI.js";
+import "./Radio-CV7vuQUj.js";
+import { t as LeuRadioGroup } from "./RadioGroup-C3XWSScc.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-DQI8cqZV.js";
-import { t as LeuRadio } from "./Radio-W5ck_IJI.js";
+import "./LeuElement-C_lcHzQI.js";
+import { t as LeuRadio } from "./Radio-CV7vuQUj.js";
 //#region src/components/radio/leu-radio.ts
 LeuRadio.define("leu-radio");
 //#endregion

package/dist/leu-range.js

@@ -1,5 +1,5 @@
-import "./LeuElement-DQI8cqZV.js";
-import { t as LeuRange } from "./Range-NCdfDkeD.js";
+import "./LeuElement-C_lcHzQI.js";
+import { t as LeuRange } from "./Range-C8RVrIM9.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-DQI8cqZV.js";
-import "./Icon-D83qesg5.js";
-import "./Spinner-BBiVZxFH.js";
-import "./Button-DyNVOHCd.js";
+import "./LeuElement-C_lcHzQI.js";
+import "./Icon-D8HTPEFH.js";
+import "./Spinner-ChKJQJTN.js";
+import "./Button-D1aYnunQ.js";
 import "./FormAssociatedMixin-DLPvFtbT.js";
-import { t as LeuScrollTop } from "./ScrollTop-DwcNIKmN.js";
+import { t as LeuScrollTop } from "./ScrollTop-B_TJ_k4m.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-DQI8cqZV.js";
-import "./Icon-D83qesg5.js";
-import "./Spinner-BBiVZxFH.js";
-import "./Button-DyNVOHCd.js";
+import "./LeuElement-C_lcHzQI.js";
+import "./Icon-D8HTPEFH.js";
+import "./Spinner-ChKJQJTN.js";
+import "./Button-D1aYnunQ.js";
 import "./FormAssociatedMixin-DLPvFtbT.js";
-import "./MenuItem-DCttylRO.js";
-import "./Menu-DRU1LiMM.js";
-import "./Popup-nJrJHGSy.js";
-import "./Input-D7zS50oz.js";
-import { t as LeuSelect } from "./Select-Bpicra9q.js";
+import "./MenuItem-ICjLCGim.js";
+import "./Menu-CFLCnI34.js";
+import "./Popup-BiN_tZDN.js";
+import "./Input-OrILqlax.js";
+import { t as LeuSelect } from "./Select-CbPTrL3G.js";
 //#region src/components/select/leu-select.ts
 LeuSelect.define("leu-select");
 //#endregion

package/dist/leu-spinner.js

@@ -1,5 +1,5 @@
-import "./LeuElement-DQI8cqZV.js";
-import { t as LeuSpinner } from "./Spinner-BBiVZxFH.js";
+import "./LeuElement-C_lcHzQI.js";
+import { t as LeuSpinner } from "./Spinner-ChKJQJTN.js";
 //#region src/components/spinner/leu-spinner.ts
 LeuSpinner.define("leu-spinner");
 //#endregion

package/dist/leu-tab-group.js

@@ -1,7 +1,7 @@
-import "./LeuElement-DQI8cqZV.js";
-import "./Tab-Ce9nrDok.js";
-import "./TabPanel-BW1ydVBT.js";
-import { t as LeuTabGroup } from "./TabGroup-C-cd4Wcx.js";
+import "./LeuElement-C_lcHzQI.js";
+import "./Tab-BJbzY1xd.js";
+import "./TabPanel-CTyw410b.js";
+import { t as LeuTabGroup } from "./TabGroup-BIaCHrKR.js";
 //#region src/components/tab/leu-tab-group.ts
 LeuTabGroup.define("leu-tab-group");
 //#endregion

package/dist/leu-tab-panel.js

@@ -1,5 +1,5 @@
-import "./LeuElement-DQI8cqZV.js";
-import { t as LeuTabPanel } from "./TabPanel-BW1ydVBT.js";
+import "./LeuElement-C_lcHzQI.js";
+import { t as LeuTabPanel } from "./TabPanel-CTyw410b.js";
 //#region src/components/tab/leu-tab-panel.ts
 LeuTabPanel.define("leu-tab-panel");
 //#endregion

package/dist/leu-tab.js

@@ -1,5 +1,5 @@
-import "./LeuElement-DQI8cqZV.js";
-import { t as LeuTab } from "./Tab-Ce9nrDok.js";
+import "./LeuElement-C_lcHzQI.js";
+import { t as LeuTab } from "./Tab-BJbzY1xd.js";
 //#region src/components/tab/leu-tab.ts
 LeuTab.define("leu-tab");
 //#endregion

package/dist/leu-table.js

@@ -1,11 +1,11 @@
-import "./LeuElement-DQI8cqZV.js";
-import "./Icon-D83qesg5.js";
-import "./Spinner-BBiVZxFH.js";
-import "./Button-DyNVOHCd.js";
+import "./LeuElement-C_lcHzQI.js";
+import "./Icon-D8HTPEFH.js";
+import "./Spinner-ChKJQJTN.js";
+import "./Button-D1aYnunQ.js";
 import "./FormAssociatedMixin-DLPvFtbT.js";
-import "./VisuallyHidden-CpYXyuC7.js";
-import "./Pagination-CIy7YvWE.js";
-import { t as LeuTable } from "./Table-DiYqIzBu.js";
+import "./VisuallyHidden-DF2q9pTa.js";
+import "./Pagination-D1tP5FrM.js";
+import { t as LeuTable } from "./Table-D3QmePJd.js";
 //#region src/components/table/leu-table.ts
 LeuTable.define("leu-table");
 //#endregion

package/dist/leu-tag.js

@@ -1,5 +1,5 @@
-import "./LeuElement-DQI8cqZV.js";
-import { t as LeuTag } from "./Tag-Ct8Hhv7W.js";
+import "./LeuElement-C_lcHzQI.js";
+import { t as LeuTag } from "./Tag-nUnWtHYy.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-DQI8cqZV.js";
-import { t as LeuVisuallyHidden } from "./VisuallyHidden-CpYXyuC7.js";
+import "./LeuElement-C_lcHzQI.js";
+import { t as LeuVisuallyHidden } from "./VisuallyHidden-DF2q9pTa.js";
 //#region src/components/visually-hidden/leu-visually-hidden.ts
 LeuVisuallyHidden.define("leu-visually-hidden");
 //#endregion

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

@@ -34,6 +34,17 @@
         }
       ]
     },
+    {
+      "name": "leu-button-group",
+      "description": "A radio input-like button group component.\nIt allows only one button to be active at a time.\n---\n\n\n### **Events:**\n - **input** - When the value of the group changes by clicking a button\n\n### **Slots:**\n - _default_ - Slot for the buttons",
+      "attributes": [],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://statistikzh.github.io/leu/?path=/story/button-group"
+        }
+      ]
+    },
     {
       "name": "leu-button",
       "description": "\n---\n\n\n### **Slots:**\n - **before** - The icon to display before the label\n- **after** - The icon to display after the label\n- _default_ - The label of the button or the icon if no label is set",
@@ -124,17 +135,6 @@
         }
       ]
     },
-    {
-      "name": "leu-button-group",
-      "description": "A radio input-like button group component.\nIt allows only one button to be active at a time.\n---\n\n\n### **Events:**\n - **input** - When the value of the group changes by clicking a button\n\n### **Slots:**\n - _default_ - Slot for the buttons",
-      "attributes": [],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://statistikzh.github.io/leu/?path=/story/button-group"
-        }
-      ]
-    },
     {
       "name": "leu-chart-wrapper",
       "description": "A wrapper element for charts.\n---\n\n\n### **Slots:**\n - **title** - The title of the chart. Use a heading tag (h2-4) depending on your context.\n- **description** - A description of the chart. Content is wrapped in a `<p>` tag by the component.\n- **chart** - The actual chart\n- **caption** - A caption for the chart, e.g. a source or explanation of the data.\n- **download** - A download button or dropdown to export the chart in different formats.",

package/dist/vue/index.d.ts

@@ -1,8 +1,8 @@
 import type { DefineComponent } from "vue";
 
 import type { LeuAccordion } from "../Accordion.js";
-import type { LeuButton } from "../Button.js";
 import type { LeuButtonGroup } from "../ButtonGroup.js";
+import type { LeuButton } from "../Button.js";
 import type { LeuChartWrapper } from "../ChartWrapper.js";
 import type { LeuCheckbox } from "../Checkbox.js";
 import type { LeuCheckboxGroup } from "../CheckboxGroup.js";
@@ -46,6 +46,13 @@ type LeuAccordionProps = {
   label?: LeuAccordion["label"];
 };
 
+type LeuButtonGroupProps = {
+  /** The value of the currently selected (active) button */
+  value?: LeuButtonGroup["value"];
+  /** When the value of the group changes by clicking a button */
+  oninput?: (e: CustomEvent<never>) => void;
+};
+
 type LeuButtonProps = {
   /** `aria-label` of the underlying button elements.
 Use it to provide a label when only an icon is visible. */
@@ -81,13 +88,6 @@ If it is set, the icon will either show an expanded or collapsed state. */
   loading?: LeuButton["loading"];
 };
 
-type LeuButtonGroupProps = {
-  /** The value of the currently selected (active) button */
-  value?: LeuButtonGroup["value"];
-  /** When the value of the group changes by clicking a button */
-  oninput?: (e: CustomEvent<never>) => void;
-};
-
 type LeuChartWrapperProps = {
   /** Whether the chart is currently loading or not.
 When set to `true`, a spinner will be shown in the chart container. */
@@ -533,18 +533,6 @@ export type CustomElements = {
    */
   "leu-accordion": DefineComponent<LeuAccordionProps>;
 
-  /**
-   *
-   * ---
-   *
-   *
-   * ### **Slots:**
-   *  - **before** - The icon to display before the label
-   * - **after** - The icon to display after the label
-   * - _default_ - The label of the button or the icon if no label is set
-   */
-  "leu-button": DefineComponent<LeuButtonProps>;
-
   /**
    * A radio input-like button group component.
    * It allows only one button to be active at a time.
@@ -559,6 +547,18 @@ export type CustomElements = {
    */
   "leu-button-group": DefineComponent<LeuButtonGroupProps>;
 
+  /**
+   *
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - **before** - The icon to display before the label
+   * - **after** - The icon to display after the label
+   * - _default_ - The label of the button or the icon if no label is set
+   */
+  "leu-button": DefineComponent<LeuButtonProps>;
+
   /**
    * A wrapper element for charts.
    * ---

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.28.0",
+  "version": "0.28.1",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -65,6 +65,33 @@
             "events": []
           }
         },
+        {
+          "name": "leu-button-group",
+          "description": "A radio input-like button group component.\nIt allows only one button to be active at a time.\n---\n\n\n### **Events:**\n - **input** - When the value of the group changes by clicking a button\n\n### **Slots:**\n - _default_ - Slot for the buttons",
+          "doc-url": "",
+          "attributes": [],
+          "slots": [{ "name": "", "description": "Slot for the buttons" }],
+          "events": [
+            {
+              "name": "input",
+              "description": "When the value of the group changes by clicking a button"
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "value",
+                "description": "The value of the currently selected (active) button"
+              }
+            ],
+            "events": [
+              {
+                "name": "input",
+                "description": "When the value of the group changes by clicking a button"
+              }
+            ]
+          }
+        },
         {
           "name": "leu-button",
           "description": "\n---\n\n\n### **Slots:**\n - **before** - The icon to display before the label\n- **after** - The icon to display after the label\n- _default_ - The label of the button or the icon if no label is set",
@@ -233,33 +260,6 @@
             "events": []
           }
         },
-        {
-          "name": "leu-button-group",
-          "description": "A radio input-like button group component.\nIt allows only one button to be active at a time.\n---\n\n\n### **Events:**\n - **input** - When the value of the group changes by clicking a button\n\n### **Slots:**\n - _default_ - Slot for the buttons",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [{ "name": "", "description": "Slot for the buttons" }],
-          "events": [
-            {
-              "name": "input",
-              "description": "When the value of the group changes by clicking a button"
-            }
-          ],
-          "js": {
-            "properties": [
-              {
-                "name": "value",
-                "description": "The value of the currently selected (active) button"
-              }
-            ],
-            "events": [
-              {
-                "name": "input",
-                "description": "When the value of the group changes by clicking a button"
-              }
-            ]
-          }
-        },
         {
           "name": "leu-chart-wrapper",
           "description": "A wrapper element for charts.\n---\n\n\n### **Slots:**\n - **title** - The title of the chart. Use a heading tag (h2-4) depending on your context.\n- **description** - A description of the chart. Content is wrapped in a `<p>` tag by the component.\n- **chart** - The actual chart\n- **caption** - A caption for the chart, e.g. a source or explanation of the data.\n- **download** - A download button or dropdown to export the chart in different formats.",

package/package.json

@@ -3,7 +3,7 @@
   "description": "UI component library of the canton of zurich",
   "license": "MIT",
   "author": "statistikzh",
-  "version": "0.28.0",
+  "version": "0.28.1",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -19,9 +19,9 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/statistikzh/leu.git"
+    "url": "git+https://github.com/statistikZH/leu.git"
   },
-  "homepage": "https://github.com/statistikzh/leu/",
+  "homepage": "https://github.com/statistikZH/leu/",
   "scripts": {
     "analyze": "cem analyze --config custom-elements-manifest.config.js",
     "build": "npm run build:js && npm run build:css && npm run analyze",
@@ -36,6 +36,7 @@
     "format": "npm run format:eslint && npm run format:prettier",
     "format:eslint": "eslint . --fix",
     "format:prettier": "prettier \"**/*.{ts,js,mjs,md,mdx,html,json}\" --write",
+    "generate-component": "./scripts/generate-component/generate.js",
     "test": "web-test-runner --coverage",
     "test:watch": "web-test-runner --watch",
     "prepare": "husky",
@@ -112,6 +113,7 @@
     "bundle": false
   },
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "provenance": true
   }
 }

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

@@ -92,7 +92,8 @@ export class LeuFileInput extends FormAssociatedMixin(LeuElement) {
     }
   }
 
-  private handleChange(event: Event & { target: HTMLInputElement }) {
+  private async handleChange(event: Event & { target: HTMLInputElement }) {
+    await this.updateComplete
     const customEvent = new CustomEvent(event.type, event)
     this.dispatchEvent(customEvent)
   }
@@ -130,7 +131,8 @@ export class LeuFileInput extends FormAssociatedMixin(LeuElement) {
     this.dispatchChangeAndInputEvents()
   }
 
-  protected dispatchChangeAndInputEvents() {
+  protected async dispatchChangeAndInputEvents() {
+    await this.updateComplete
     this.dispatchEvent(
       new CustomEvent("input", {
         composed: true,

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

@@ -35,4 +35,28 @@ describe("LeuFileInput", () => {
     expect(fileInput.validity.valueMissing).to.be.true
     expect(form.checkValidity()).to.be.false
   })
+
+  it("dispatches change after validity is updated", async () => {
+    const el = await fixture<LeuFileInput>(html`
+      <leu-file-input
+        label="File upload"
+        required
+        accept="text/plain"
+      ></leu-file-input>
+    `)
+    const dropzone = el.shadowRoot?.querySelector<HTMLDivElement>(".dropzone")
+    const dataTransfer = new DataTransfer()
+    const file = new File(["content"], "test.txt", { type: "text/plain" })
+    dataTransfer.items.add(file)
+    let validityAtChangeEvent: boolean | undefined
+
+    el.addEventListener("change", () => {
+      validityAtChangeEvent = el.checkValidity()
+    })
+
+    dropzone?.dispatchEvent(new DragEvent("drop", { dataTransfer }))
+    await el.updateComplete
+
+    expect(validityAtChangeEvent).to.be.true
+  })
 })