@statistikzh/leu 0.7.0 → 0.9.0

package/.eslintrc.json

@@ -23,5 +23,8 @@
         "no-console": "off"
       }
     }
-  ]
+  ],
+  "globals": {
+    "__LEU_VERSION__": "readonly"
+  }
 }

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

@@ -13,17 +13,17 @@ jobs:
   release-please:
     runs-on: ubuntu-latest
     steps:
-      - uses: google-github-actions/release-please-action@v3
+      - uses: google-github-actions/release-please-action@v4
         id: release
         with:
           release-type: node
-          package-name: "@statistikzh/leu"
+          token: ${{ secrets.RELEASE_PLEASE_TOKEN }}
       # The logic below handles the npm publication:
       - uses: actions/checkout@v4
         # these if statements ensure that a publication only occurs when
         # a new release is created:
         if: ${{ steps.release.outputs.release_created }}
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
           node-version: "20.x"
           registry-url: "https://registry.npmjs.org"

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # Changelog
 
+## [0.9.0](https://github.com/statistikZH/leu/compare/v0.8.0...v0.9.0) (2024-07-24)
+
+
+### Features
+
+* **menu-item:** add multipleSelection property to display a check icon ([#227](https://github.com/statistikZH/leu/issues/227)) ([02358cc](https://github.com/statistikZH/leu/commit/02358ccf5de5cb714adefc8de90d8f799dc58692))
+* **spinner:** implement spinner animation element ([ba6257e](https://github.com/statistikZH/leu/commit/ba6257e6f46c021767f90384eaac19e203517b0d))
+* **theme:** add :host pseudo class so that the theme can be used in a shadow root ([#221](https://github.com/statistikZH/leu/issues/221)) ([66e4676](https://github.com/statistikZH/leu/commit/66e4676be80ac79a137452d1f57d51394d3f4146))
+* use new zh web typeface inter ([#224](https://github.com/statistikZH/leu/issues/224)) ([820deca](https://github.com/statistikZH/leu/commit/820deca357889fa11ac145ae0f203e2137c97a15))
+
+
+### Bug Fixes
+
+* **button:** remove border to match sizes of the design system ([#223](https://github.com/statistikZH/leu/issues/223)) ([9fa2cbb](https://github.com/statistikZH/leu/commit/9fa2cbbf919e02f71a150b974bc97563a75048c0))
+* **checkbox:** avoid 'undefined' values and fallback to an empty string ([2f9f95f](https://github.com/statistikZH/leu/commit/2f9f95f50b56469a5ade01d4b5f5816a858028e3))
+* **dropdown:** properly handle the document click events when the element is used in a shadow dom ([0c6c5a9](https://github.com/statistikZH/leu/commit/0c6c5a915b136f8fdbad300f719bb852d09fe220))
+* **radio:** avoid 'undefined' values and fallback to an empty string ([2f9f95f](https://github.com/statistikZH/leu/commit/2f9f95f50b56469a5ade01d4b5f5816a858028e3))
+* **select:** properly handle the document click events when the element is used in a shadow dom ([0c6c5a9](https://github.com/statistikZH/leu/commit/0c6c5a915b136f8fdbad300f719bb852d09fe220))
+
+## [0.8.0](https://github.com/statistikZH/leu/compare/v0.7.0...v0.8.0) (2024-07-16)
+
+
+### Features
+
+* **chip:** add getValue method that returns either the value or the text content of the chip ([78eb332](https://github.com/statistikZH/leu/commit/78eb332e6b0da18cfdff45cbd9f3e7cc9514b9ea))
+
+
+### Bug Fixes
+
+* **checkbox-group:** use lowercase values for orientation attribute ([da68c5e](https://github.com/statistikZH/leu/commit/da68c5e68683e8672712c1bd36134df2eabc4cfb))
+* don't define dependencies in the constructor. add version variable for better comparison ([14eda96](https://github.com/statistikZH/leu/commit/14eda96dcbdcd86124a4e42a9a32d472b44416db))
+* **menu-item:** apply correct active colors to match style guide and to be wcag compliant ([#211](https://github.com/statistikZH/leu/issues/211)) ([1f8e957](https://github.com/statistikZH/leu/commit/1f8e95749ae4faaf87fce29924ba5b35724f8e4d))
+* **menu-item:** use textContent instead of innerText to avoid triggering a reflow ([78eb332](https://github.com/statistikZH/leu/commit/78eb332e6b0da18cfdff45cbd9f3e7cc9514b9ea))
+* **radio-group:** use lowercase values for orientation attribute ([da68c5e](https://github.com/statistikZH/leu/commit/da68c5e68683e8672712c1bd36134df2eabc4cfb))
+
 ## [0.7.0](https://github.com/statistikZH/leu/compare/v0.6.0...v0.7.0) (2024-07-08)
 
 

package/dist/Accordion.d.ts

@@ -28,5 +28,5 @@ export class LeuAccordion extends LeuElement {
     _handleToggleClick(): void;
     render(): import("lit-html").TemplateResult;
 }
-import { L as LeuElement } from './LeuElement-ba5ea33d.js';
+import { L as LeuElement } from './LeuElement-7ab5ef5e.js';
 //# sourceMappingURL=Accordion.d.ts.map

package/dist/Accordion.js

@@ -1,4 +1,4 @@
-import { _ as _defineProperty, L as LeuElement } from './LeuElement-ba5ea33d.js';
+import { _ as _defineProperty, L as LeuElement } from './LeuElement-7ab5ef5e.js';
 import { css, nothing } from 'lit';
 import { html, unsafeStatic } from 'lit/static-html.js';
 

package/dist/Breadcrumb.d.ts

@@ -64,6 +64,6 @@ export class LeuBreadcrumb extends LeuElement {
     renderDropdown(): import("lit-html").TemplateResult<1> | typeof nothing;
     render(): import("lit-html").TemplateResult<1> | typeof nothing;
 }
-import { L as LeuElement } from './LeuElement-ba5ea33d.js';
+import { L as LeuElement } from './LeuElement-7ab5ef5e.js';
 import { nothing } from 'lit';
 //# sourceMappingURL=Breadcrumb.d.ts.map

package/dist/Breadcrumb.js

@@ -1,4 +1,4 @@
-import { _ as _defineProperty, L as LeuElement } from './LeuElement-ba5ea33d.js';
+import { _ as _defineProperty, L as LeuElement } from './LeuElement-7ab5ef5e.js';
 import { css, nothing, html } from 'lit';
 import { createRef, ref } from 'lit/directives/ref.js';
 import { classMap } from 'lit/directives/class-map.js';

package/dist/{Button-7370f901.d.ts → Button-5a8009c5.d.ts}

@@ -77,7 +77,7 @@ declare class LeuButton extends LeuElement {
 declare const BUTTON_SIZES: string[];
 declare const BUTTON_TYPES: string[];
 declare const BUTTON_EXPANDED_OPTIONS: string[];
-import { L as LeuElement } from './LeuElement-ba5ea33d.js';
+import { L as LeuElement } from './LeuElement-7ab5ef5e.js';
 import { nothing } from 'lit';
 export { BUTTON_VARIANTS as B, HasSlotController as H, LeuButton as L, BUTTON_SIZES as a, BUTTON_TYPES as b, BUTTON_EXPANDED_OPTIONS as c };
-//# sourceMappingURL=Button-7370f901.d.ts.map
+//# sourceMappingURL=Button-5a8009c5.d.ts.map

package/dist/{Button-7370f901.d.ts.map → Button-5a8009c5.d.ts.map}

@@ -1 +1 @@
-{"version":3,"file":"Button-7370f901.d.ts","sourceRoot":"","sources":["Button-7370f901.js"],"names":[],"mappings":";;;iCAaa,OAAO,KAAK,EAAE,kBAAkB;AAyW7C,wCAA0D;AAhX1D;;;GAGG;AAEH;;;;GAIG;AACH;IACE,uCAcC;IAHC,UAAgB;IAEhB,eAA0B;IAG5B;;;OAGG;IACH,uBAeC;IAED;;;;OAIG;IACH,qBAEC;IAED;;;OAGG;IACH,gCAEC;IACD,sBAEC;IACD,yBAEC;CACF;AAmTD;;;;;GAKG;AACH;IAQI,WAAiB;IACjB,qBAAqB;IACrB,MADW,MAAM,CACI;IACrB,qBAAqB;IACrB,SADW,MAAM,CACO;IACxB,4CAA4C;IAC5C,MADW,QAAQ,GAAG,QAAQ,GAAG,OAAO,CACpB;IAEpB,qBAAqB;IACrB,eADW,MAAM,CACa;IAE9B,sBAAsB;IACtB,UADW,OAAO,CACG;IACrB,+EAA+E;IAC/E,OADW,OAAO,CACA;IAClB,sBAAsB;IACtB,QADW,OAAO,CACC;IACnB,wDAAwD;IACxD,UADW,OAAO,CACG;IAErB,gGAAgG;IAChG,OADW,OAAO,CACA;IAElB;;;OAGG;IACH,UAFU,CAAC,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC,CAEf;IAE3B,6EAOC;IACD;;;MAaC;IACD,0BAEC;IACD,+CAiCC;CACF;AA7GD,qCAA0C;AAE1C,qCAAmD;AAEnD,gDAAkD;gCA5XI,0BAA0B;wBAC7C,KAAK"}
+{"version":3,"file":"Button-5a8009c5.d.ts","sourceRoot":"","sources":["Button-5a8009c5.js"],"names":[],"mappings":";;;iCAaa,OAAO,KAAK,EAAE,kBAAkB;AAwW7C,wCAA0D;AA/W1D;;;GAGG;AAEH;;;;GAIG;AACH;IACE,uCAcC;IAHC,UAAgB;IAEhB,eAA0B;IAG5B;;;OAGG;IACH,uBAeC;IAED;;;;OAIG;IACH,qBAEC;IAED;;;OAGG;IACH,gCAEC;IACD,sBAEC;IACD,yBAEC;CACF;AAkTD;;;;;GAKG;AACH;IAQI,WAAiB;IACjB,qBAAqB;IACrB,MADW,MAAM,CACI;IACrB,qBAAqB;IACrB,SADW,MAAM,CACO;IACxB,4CAA4C;IAC5C,MADW,QAAQ,GAAG,QAAQ,GAAG,OAAO,CACpB;IAEpB,qBAAqB;IACrB,eADW,MAAM,CACa;IAE9B,sBAAsB;IACtB,UADW,OAAO,CACG;IACrB,+EAA+E;IAC/E,OADW,OAAO,CACA;IAClB,sBAAsB;IACtB,QADW,OAAO,CACC;IACnB,wDAAwD;IACxD,UADW,OAAO,CACG;IAErB,gGAAgG;IAChG,OADW,OAAO,CACA;IAElB;;;OAGG;IACH,UAFU,CAAC,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC,CAEf;IAE3B,6EAOC;IACD;;;MAaC;IACD,0BAEC;IACD,+CAiCC;CACF;AA7GD,qCAA0C;AAE1C,qCAAmD;AAEnD,gDAAkD;gCA3XI,0BAA0B;wBAC7C,KAAK"}

package/dist/{Button-7370f901.js → Button-5a8009c5.js}

@@ -1,4 +1,4 @@
-import { _ as _defineProperty, L as LeuElement } from './LeuElement-ba5ea33d.js';
+import { _ as _defineProperty, L as LeuElement } from './LeuElement-7ab5ef5e.js';
 import { css, html, nothing } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
@@ -100,7 +100,7 @@ button {
           appearance: none;
   transition: background 0.1s ease;
   cursor: pointer;
-  border: 1px solid transparent;
+  border: none;
   border-radius: 2px;
 
   max-width: 100%;
@@ -126,12 +126,11 @@ button:disabled {
 }
 
 button:focus-visible {
-  border: 1px solid var(--leu-color-black-0);
   outline: 2px solid var(--leu-color-func-cyan);
+  outline-offset: 2px;
 }
 
 button.inverted:focus-visible {
-  border: 1px solid var(--leu-color-black-100);
   outline: 2px solid var(--leu-color-black-0);
 }
 

package/dist/Button.d.ts

@@ -1,2 +1,2 @@
-export { c as BUTTON_EXPANDED_OPTIONS, a as BUTTON_SIZES, b as BUTTON_TYPES, B as BUTTON_VARIANTS, L as LeuButton } from "./Button-7370f901.js";
+export { c as BUTTON_EXPANDED_OPTIONS, a as BUTTON_SIZES, b as BUTTON_TYPES, B as BUTTON_VARIANTS, L as LeuButton } from "./Button-5a8009c5.js";
 //# sourceMappingURL=Button.d.ts.map

package/dist/Button.js

@@ -1,6 +1,6 @@
-import './LeuElement-ba5ea33d.js';
+import './LeuElement-7ab5ef5e.js';
 import 'lit';
 import 'lit/directives/class-map.js';
 import 'lit/directives/if-defined.js';
 import './Icon.js';
-export { c as BUTTON_EXPANDED_OPTIONS, a as BUTTON_SIZES, b as BUTTON_TYPES, B as BUTTON_VARIANTS, L as LeuButton } from './Button-7370f901.js';
+export { c as BUTTON_EXPANDED_OPTIONS, a as BUTTON_SIZES, b as BUTTON_TYPES, B as BUTTON_VARIANTS, L as LeuButton } from './Button-5a8009c5.js';

package/dist/ButtonGroup.d.ts

@@ -20,5 +20,5 @@ export class LeuButtonGroup extends LeuElement {
     _handleButtonClick(button: any): void;
     render(): import("lit-html").TemplateResult<1>;
 }
-import { L as LeuElement } from './LeuElement-ba5ea33d.js';
+import { L as LeuElement } from './LeuElement-7ab5ef5e.js';
 //# sourceMappingURL=ButtonGroup.d.ts.map

package/dist/ButtonGroup.js

@@ -1,4 +1,4 @@
-import { _ as _defineProperty, L as LeuElement } from './LeuElement-ba5ea33d.js';
+import { _ as _defineProperty, L as LeuElement } from './LeuElement-7ab5ef5e.js';
 import { css, html } from 'lit';
 
 var css_248z = css`:host,

package/dist/Checkbox.d.ts

@@ -10,5 +10,5 @@ export class LeuCheckbox extends LeuElement {
     handleInput(event: any): void;
     render(): import("lit-html").TemplateResult<1>;
 }
-import { L as LeuElement } from './LeuElement-ba5ea33d.js';
+import { L as LeuElement } from './LeuElement-7ab5ef5e.js';
 //# sourceMappingURL=Checkbox.d.ts.map

package/dist/Checkbox.js

@@ -1,4 +1,4 @@
-import { _ as _defineProperty, L as LeuElement } from './LeuElement-ba5ea33d.js';
+import { _ as _defineProperty, L as LeuElement } from './LeuElement-7ab5ef5e.js';
 import { css, html } from 'lit';
 import { LeuIcon } from './Icon.js';
 
@@ -125,7 +125,7 @@ class LeuCheckbox extends LeuElement {
         @input=${this.handleInput}
         .checked=${this.checked}
         ?disabled=${this.disabled}
-        .value=${this.value}
+        .value=${this.value ?? ""}
       />
       <label for=${`checkbox-${this.name}`} class="label"><slot></slot></label>
       <leu-icon class="icon" name="check"></leu-icon>

package/dist/CheckboxGroup.d.ts

@@ -2,12 +2,13 @@
  * @tagname leu-checkbox-group
  */
 export class LeuCheckboxGroup extends LeuElement {
-    orientation: string;
+    /** @type {"horizontal" | "vertical"} */
+    orientation: "horizontal" | "vertical";
     items: any[];
     get value(): any[];
     handleSlotChange(): void;
     handleItems(): void;
     render(): import("lit-html").TemplateResult<1>;
 }
-import { L as LeuElement } from './LeuElement-ba5ea33d.js';
+import { L as LeuElement } from './LeuElement-7ab5ef5e.js';
 //# sourceMappingURL=CheckboxGroup.d.ts.map

package/dist/CheckboxGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxGroup.d.ts","sourceRoot":"","sources":["CheckboxGroup.js"],"names":[],"mappings":"AAqCA;;GAEG;AACH;IAGI,oBAA+B;IAC/B,aAAe;IAEjB,mBAEC;IACD,yBAEC;IACD,oBAEC;IACD,+CAWC;CACF;gCAnEqD,0BAA0B"}
+{"version":3,"file":"CheckboxGroup.d.ts","sourceRoot":"","sources":["CheckboxGroup.js"],"names":[],"mappings":"AAqCA;;GAEG;AACH;IAGI,wCAAwC;IACxC,aADW,YAAY,GAAG,UAAU,CACL;IAC/B,aAAe;IAEjB,mBAEC;IACD,yBAEC;IACD,oBAEC;IACD,+CAWC;CACF;gCApEqD,0BAA0B"}

package/dist/CheckboxGroup.js

@@ -1,4 +1,4 @@
-import { _ as _defineProperty, L as LeuElement } from './LeuElement-ba5ea33d.js';
+import { _ as _defineProperty, L as LeuElement } from './LeuElement-7ab5ef5e.js';
 import { css, html } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 
@@ -41,7 +41,8 @@ var css_248z = css`:host {
 class LeuCheckboxGroup extends LeuElement {
   constructor() {
     super();
-    this.orientation = "HORIZONTAL";
+    /** @type {"horizontal" | "vertical"} */
+    this.orientation = "horizontal";
     this.items = [];
   }
   get value() {
@@ -56,7 +57,7 @@ class LeuCheckboxGroup extends LeuElement {
   render() {
     const fieldsetClasses = {
       fieldset: "true",
-      "fieldset--vertical": this.orientation === "VERTICAL"
+      "fieldset--vertical": this.orientation === "vertical"
     };
     return html`
       <fieldset class=${classMap(fieldsetClasses)}>

package/dist/Chip.d.ts

@@ -1,5 +1,5 @@
 export class LeuChipBase extends LeuElement {
     inverted: boolean;
 }
-import { L as LeuElement } from './LeuElement-ba5ea33d.js';
+import { L as LeuElement } from './LeuElement-7ab5ef5e.js';
 //# sourceMappingURL=Chip.d.ts.map

package/dist/Chip.js

@@ -1,4 +1,4 @@
-import { _ as _defineProperty, L as LeuElement } from './LeuElement-ba5ea33d.js';
+import { _ as _defineProperty, L as LeuElement } from './LeuElement-7ab5ef5e.js';
 import { css } from 'lit';
 
 var css_248z = css`:host,

package/dist/ChipGroup.d.ts

@@ -32,5 +32,5 @@ export const SELECTION_MODES: Readonly<{
     multiple: "multiple";
     none: "none";
 }>;
-import { L as LeuElement } from './LeuElement-ba5ea33d.js';
+import { L as LeuElement } from './LeuElement-7ab5ef5e.js';
 //# sourceMappingURL=ChipGroup.d.ts.map

package/dist/ChipGroup.js

@@ -1,4 +1,4 @@
-import { _ as _defineProperty, L as LeuElement } from './LeuElement-ba5ea33d.js';
+import { _ as _defineProperty, L as LeuElement } from './LeuElement-7ab5ef5e.js';
 import { html, unsafeStatic } from 'lit/static-html.js';
 import { css } from 'lit';
 
@@ -83,7 +83,7 @@ class LeuChipGroup extends LeuElement {
     });
   }
   get value() {
-    return this.items.filter(i => i.checked).map(i => i.value);
+    return this.items.filter(i => i.checked).map(i => i.getValue());
   }
 
   /**

package/dist/ChipLink.js

@@ -1,4 +1,4 @@
-import { _ as _defineProperty } from './LeuElement-ba5ea33d.js';
+import { _ as _defineProperty } from './LeuElement-7ab5ef5e.js';
 import { html } from 'lit';
 import { LeuChipBase } from './Chip.js';
 

package/dist/ChipRemovable.d.ts

@@ -2,8 +2,15 @@
  * @slot - The content of the chip
  * @tagname leu-chip-removable
  * @fires remove - Dispatched when the user clicks on the chip
+ * @prop {string} value - The value of the chip.
  */
 export class LeuChipRemovable extends LeuChipBase {
+    value: string;
+    /**
+     * Returns the value of the chip. If `value` is not set, it will return the text content
+     * @returns {string}
+     */
+    getValue(): string;
     handleClick(): void;
     render(): import("lit-html").TemplateResult<1>;
 }

package/dist/ChipRemovable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChipRemovable.d.ts","sourceRoot":"","sources":["ChipRemovable.js"],"names":[],"mappings":"AAKA;;;;GAIG;AACH;IACE,oBAMC;IACD,+CAKC;CACF;4BAtB2B,WAAW"}
+{"version":3,"file":"ChipRemovable.d.ts","sourceRoot":"","sources":["ChipRemovable.js"],"names":[],"mappings":"AAKA;;;;;GAKG;AACH;IAGI,cAAe;IAGjB;;;OAGG;IACH,YAFa,MAAM,CAIlB;IACD,oBASC;IACD,+CAKC;CACF;4BAtC2B,WAAW"}

package/dist/ChipRemovable.js

@@ -1,4 +1,4 @@
-import { _ as _defineProperty } from './LeuElement-ba5ea33d.js';
+import { _ as _defineProperty } from './LeuElement-7ab5ef5e.js';
 import { html } from 'lit';
 import { LeuChipBase } from './Chip.js';
 import { LeuIcon } from './Icon.js';
@@ -7,12 +7,28 @@ import { LeuIcon } from './Icon.js';
  * @slot - The content of the chip
  * @tagname leu-chip-removable
  * @fires remove - Dispatched when the user clicks on the chip
+ * @prop {string} value - The value of the chip.
  */
 class LeuChipRemovable extends LeuChipBase {
+  constructor() {
+    super();
+    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();
+  }
   handleClick() {
     const customEvent = new CustomEvent("leu:remove", {
       bubbles: true,
-      composed: true
+      composed: true,
+      detail: {
+        value: this.getValue()
+      }
     });
     this.dispatchEvent(customEvent);
   }
@@ -27,7 +43,11 @@ _defineProperty(LeuChipRemovable, "dependencies", {
   "leu-icon": LeuIcon
 });
 _defineProperty(LeuChipRemovable, "properties", {
-  ...LeuChipBase.properties
+  ...LeuChipBase.properties,
+  value: {
+    type: String,
+    reflect: true
+  }
 });
 
 export { LeuChipRemovable };

package/dist/ChipSelectable.d.ts

@@ -17,7 +17,13 @@ export class LeuChipSelectable extends LeuChipBase {
      */
     variant: string;
     checked: boolean;
+    value: string;
     handleClick(): void;
+    /**
+     * Returns the value of the chip. If `value` is not set, it will return the text content
+     * @returns {string}
+     */
+    getValue(): string;
     render(): import("lit-html").TemplateResult<1>;
 }
 export namespace SIZES {

package/dist/ChipSelectable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChipSelectable.d.ts","sourceRoot":"","sources":["ChipSelectable.js"],"names":[],"mappings":"AAaA;;;;;;;;GAQG;AACH;IAGI,aAAyB;IAEzB;;;;;OAKG;IACH,gBAA8B;IAC9B,iBAAoB;IAKtB,oBAiBC;IACD,+CAQC;CACF;;;;;;;;;4BAhE2B,WAAW"}
+{"version":3,"file":"ChipSelectable.d.ts","sourceRoot":"","sources":["ChipSelectable.js"],"names":[],"mappings":"AAaA;;;;;;;;GAQG;AACH;IAGI,aAAyB;IAEzB;;;;;OAKG;IACH,gBAA8B;IAC9B,iBAAoB;IACpB,cAAe;IAKjB,oBAkBC;IAED;;;OAGG;IACH,YAFa,MAAM,CAIlB;IACD,+CAQC;CACF;;;;;;;;;4BA1E2B,WAAW"}

package/dist/ChipSelectable.js

@@ -1,4 +1,4 @@
-import { _ as _defineProperty } from './LeuElement-ba5ea33d.js';
+import { _ as _defineProperty } from './LeuElement-7ab5ef5e.js';
 import { html } from 'lit';
 import { LeuChipBase } from './Chip.js';
 
@@ -33,6 +33,7 @@ class LeuChipSelectable extends LeuChipBase {
      */
     this.variant = VARIANTS.toggle;
     this.checked = false;
+    this.value = "";
     if (this.variant === VARIANTS.radio && this.size === SIZES.small) {
       console.warn("Small size has no effect on radio variant");
     }
@@ -48,13 +49,22 @@ class LeuChipSelectable extends LeuChipBase {
       this.checked = nextcheckedState;
       this.dispatchEvent(new CustomEvent("input", {
         detail: {
-          checked: this.checked
+          checked: this.checked,
+          value: this.getValue()
         },
         bubbles: true,
         composed: true
       }));
     }
   }
+
+  /**
+   * 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();
+  }
   render() {
     return html`<button
       @click=${() => this.handleClick()}

package/dist/Dropdown.d.ts

@@ -15,5 +15,5 @@ export class LeuDropdown extends LeuElement {
     _getMenu(): any;
     render(): import("lit-html").TemplateResult<1>;
 }
-import { L as LeuElement } from './LeuElement-ba5ea33d.js';
+import { L as LeuElement } from './LeuElement-7ab5ef5e.js';
 //# sourceMappingURL=Dropdown.d.ts.map

package/dist/Dropdown.js

@@ -1,7 +1,7 @@
-import { _ as _defineProperty, L as LeuElement } from './LeuElement-ba5ea33d.js';
+import { _ as _defineProperty, L as LeuElement } from './LeuElement-7ab5ef5e.js';
 import { css, html, nothing } from 'lit';
 import { createRef, ref } from 'lit/directives/ref.js';
-import { H as HasSlotController, L as LeuButton } from './Button-7370f901.js';
+import { H as HasSlotController, L as LeuButton } from './Button-5a8009c5.js';
 import { LeuMenu } from './Menu.js';
 import { LeuMenuItem } from './MenuItem.js';
 import { LeuPopup } from './Popup.js';
@@ -40,7 +40,7 @@ class LeuDropdown extends LeuElement {
     super();
     _defineProperty(this, "hasSlotController", new HasSlotController(this, ["icon"]));
     _defineProperty(this, "_documentClickHandler", event => {
-      if (!this.contains(event.target)) {
+      if (!event.composedPath().includes(this)) {
         this.expanded = false;
       }
     });

package/dist/Icon.d.ts

@@ -112,5 +112,5 @@ export class LeuIcon extends LeuElement {
     name: any | "";
     render(): import("lit-html").TemplateResult<1>;
 }
-import { L as LeuElement } from './LeuElement-ba5ea33d.js';
+import { L as LeuElement } from './LeuElement-7ab5ef5e.js';
 //# sourceMappingURL=Icon.d.ts.map

package/dist/Icon.js

@@ -1,4 +1,4 @@
-import { _ as _defineProperty, L as LeuElement } from './LeuElement-ba5ea33d.js';
+import { _ as _defineProperty, L as LeuElement } from './LeuElement-7ab5ef5e.js';
 import { css, html, svg } from 'lit';
 
 var css_248z = css`svg,

package/dist/Input.d.ts

@@ -145,6 +145,6 @@ export const SIZES: Readonly<{
     SMALL: "small";
     REGULAR: "regular";
 }>;
-import { L as LeuElement } from './LeuElement-ba5ea33d.js';
+import { L as LeuElement } from './LeuElement-7ab5ef5e.js';
 import { nothing } from 'lit';
 //# sourceMappingURL=Input.d.ts.map

package/dist/Input.js

@@ -1,4 +1,4 @@
-import { _ as _defineProperty, L as LeuElement } from './LeuElement-ba5ea33d.js';
+import { _ as _defineProperty, L as LeuElement } from './LeuElement-7ab5ef5e.js';
 import { css, nothing, html } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';

package/dist/{LeuElement-ba5ea33d.d.ts → LeuElement-7ab5ef5e.d.ts}

@@ -4,4 +4,4 @@ declare class LeuElement extends LitElement {
 declare function _defineProperty(obj: any, key: any, value: any): any;
 import { LitElement } from 'lit';
 export { LeuElement as L, _defineProperty as _ };
-//# sourceMappingURL=LeuElement-ba5ea33d.d.ts.map
+//# sourceMappingURL=LeuElement-7ab5ef5e.d.ts.map

package/dist/LeuElement-7ab5ef5e.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LeuElement-7ab5ef5e.d.ts","sourceRoot":"","sources":["LeuElement-7ab5ef5e.js"],"names":[],"mappings":"AA+BA;IACE,8EAcC;CACF;AA7CD,sEAaC;2BAf0B,KAAK"}

package/dist/{LeuElement-ba5ea33d.js → LeuElement-7ab5ef5e.js}

@@ -31,19 +31,22 @@ function _toPropertyKey(arg) {
 
 class LeuElement extends LitElement {
   static define(name, constructor = this, options = {}) {
-    if (!customElements.get(name)) {
+    Object.entries(this.dependencies).forEach(([n, c]) => c.define(n));
+    const currentlyRegisteredConstructor = customElements.get(name);
+    if (currentlyRegisteredConstructor === undefined) {
       customElements.define(name, constructor, options);
-    } else {
-      console.info(`${name} is already defined`);
+      return;
+    }
+    if (currentlyRegisteredConstructor !== constructor) {
+      console.warn(`The custom element with the name <${name}> is already registered with a different constructor. This can happen when the same element has been loaded from different modules (e.g. multiple CDN requests or bundles).`);
+      return;
+    }
+    if (currentlyRegisteredConstructor.version !== constructor.version) {
+      console.warn(`The custom element with the name <${name}> is already defined with the same constructor but a different version (${currentlyRegisteredConstructor.version}).`);
     }
-  }
-  constructor() {
-    super();
-    Object.entries(this.constructor.dependencies).forEach(([name, component]) => {
-      this.constructor.define(name, component);
-    });
   }
 }
+_defineProperty(LeuElement, "version", "0.9.0");
 _defineProperty(LeuElement, "dependencies", {});
 
 export { LeuElement as L, _defineProperty as _ };

package/dist/Menu.d.ts

@@ -25,6 +25,6 @@ export class LeuMenu extends LeuElement {
     updated(changedProperties: any): void;
     render(): import("lit-html").TemplateResult<1>;
 }
-import { L as LeuElement } from './LeuElement-ba5ea33d.js';
+import { L as LeuElement } from './LeuElement-7ab5ef5e.js';
 import { LeuMenuItem } from './MenuItem.js';
 //# sourceMappingURL=Menu.d.ts.map

package/dist/Menu.js

@@ -1,4 +1,4 @@
-import { _ as _defineProperty, L as LeuElement } from './LeuElement-ba5ea33d.js';
+import { _ as _defineProperty, L as LeuElement } from './LeuElement-7ab5ef5e.js';
 import { css, html } from 'lit';
 import { LeuMenuItem } from './MenuItem.js';
 import 'lit/directives/if-defined.js';

package/dist/MenuItem.d.ts

@@ -6,6 +6,7 @@ export type MenuItemRole = 'menuitem' | 'menuitemcheckbox' | 'menuitemradio' | '
  * @tagname leu-menu-item
  * @slot - The label of the menu item
  * @property {boolean} active - Defines if the item is selected or checked
+ * @property {boolean} multipleSelection - If the item is part of a multiple selection. Renders a checkmark before the label when active
  * @property {boolean} disabled - Disables the underlying button or link
  * @property {string} value - The value of the item. It must not contain commas. See `getValue()`
  * @property {string} href - The href of the underlying link
@@ -15,6 +16,7 @@ export type MenuItemRole = 'menuitem' | 'menuitemcheckbox' | 'menuitemradio' | '
 export class LeuMenuItem extends LeuElement {
     active: boolean;
     disabled: boolean;
+    multipleSelection: boolean;
     value: any;
     href: any;
     tabbable: any;
@@ -32,7 +34,9 @@ export class LeuMenuItem extends LeuElement {
     _getTabIndex(): 0 | -1;
     _renderLink(content: any): import("lit-html").TemplateResult<1>;
     _renderButton(content: any): import("lit-html").TemplateResult<1>;
+    _renderBeforeSlotDefault(): import("lit-html").TemplateResult<1> | typeof nothing;
     render(): import("lit-html").TemplateResult<1>;
 }
-import { L as LeuElement } from './LeuElement-ba5ea33d.js';
+import { L as LeuElement } from './LeuElement-7ab5ef5e.js';
+import { nothing } from 'lit';
 //# sourceMappingURL=MenuItem.d.ts.map

package/dist/MenuItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["MenuItem.js"],"names":[],"mappings":"2BA8Fa,UAAU,GAAG,kBAAkB,GAAG,eAAe,GAAG,QAAQ,GAAG,MAAM;AADlF;;GAEG;AAEH;;;;;;;;;GASG;AACH;IAGI,gBAAmB;IACnB,kBAAqB;IACrB,WAAsB;IACtB,UAAqB;IACrB,cAAyB;IAEzB,2BAA2B;IAC3B,eADW,YAAY,CACQ;IAUjC,+BAKC;IAED;;;OAGG;IACH,YAFa,MAAM,CAIlB;IACD;;MAaC;IACD,uBAKC;IACD,gEAYC;IACD,kEAYC;IACD,+CAOC;CACF;gCAnMqD,0BAA0B"}
+{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["MenuItem.js"],"names":[],"mappings":"2BA8Fa,UAAU,GAAG,kBAAkB,GAAG,eAAe,GAAG,QAAQ,GAAG,MAAM;AADlF;;GAEG;AAEH;;;;;;;;;;GAUG;AACH;IAGI,gBAAmB;IACnB,kBAAqB;IACrB,2BAA8B;IAC9B,WAAsB;IACtB,UAAqB;IACrB,cAAyB;IAEzB,2BAA2B;IAC3B,eADW,YAAY,CACQ;IAUjC,+BAKC;IAED;;;OAGG;IACH,YAFa,MAAM,CAIlB;IACD;;MAaC;IACD,uBAKC;IACD,gEAYC;IACD,kEAYC;IACD,kFAKC;IACD,+CASC;CACF;gCA7MqD,0BAA0B;wBAC7C,KAAK"}