@statistikzh/leu 0.6.0 → 0.8.0

package/.eslintrc.json

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

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # Changelog
 
+## [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)
+
+
+### Features
+
+* **chip-group:** implement value setter ([dd1557a](https://github.com/statistikZH/leu/commit/dd1557ab1063ec7421a74057c489529b26e6d805))
+* **input:** add inputAsNumber getter that matches the native inputs method with the same name ([552f1ff](https://github.com/statistikZH/leu/commit/552f1ff18680c6a2866c7813fe40c462ea834802))
+
+
+### Bug Fixes
+
+* **chip-group:** handle the chip children during the event capture phase ([552f1ff](https://github.com/statistikZH/leu/commit/552f1ff18680c6a2866c7813fe40c462ea834802))
+* **radio-group:** handle the radio children during the event capture phase ([552f1ff](https://github.com/statistikZH/leu/commit/552f1ff18680c6a2866c7813fe40c462ea834802))
+
 ## [0.6.0](https://github.com/statistikZH/leu/compare/v0.5.1...v0.6.0) (2024-07-01)
 
 

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-6de6f209.js';
+import { L as LeuElement } from './LeuElement-a20c5fd6.js';
 //# sourceMappingURL=Accordion.d.ts.map

package/dist/Accordion.js

@@ -1,4 +1,4 @@
-import { _ as _defineProperty, L as LeuElement } from './LeuElement-6de6f209.js';
+import { _ as _defineProperty, L as LeuElement } from './LeuElement-a20c5fd6.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-6de6f209.js';
+import { L as LeuElement } from './LeuElement-a20c5fd6.js';
 import { nothing } from 'lit';
 //# sourceMappingURL=Breadcrumb.d.ts.map

package/dist/Breadcrumb.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumb.d.ts","sourceRoot":"","sources":["Breadcrumb.js"],"names":[],"mappings":"AAuHA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH;IAOM,yBAA+C;IAO7C,uBAAyB;IACzB,0BAA6B;IAY7B,qBAAqB;IASvB,yBAA4C;IAW9C,aAAe;IACf,wDAAwD;IACxD,UADW,OAAO,CACG;IAErB,gBAAgB;IAChB,iEAAgC;IAehC,+BAEQ;IAEV,qBAEC;IACD,+CAOC;IAOD,gBAAgB;IAChB,sBAEC;IAED,gBAAgB;IAChB,4BAEC;IACD;;;;;OAKG;IACH,eAFa,IAAI,CA4BhB;IACD;;;OAGG;IACH,wEAqCC;IACD,gEAmCC;CACF;gCAzWqD,0BAA0B;wBAC7C,KAAK"}
+{"version":3,"file":"Breadcrumb.d.ts","sourceRoot":"","sources":["Breadcrumb.js"],"names":[],"mappings":"AAyHA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH;IAOM,yBAA+C;IAO7C,uBAAyB;IACzB,0BAA6B;IAY7B,qBAAqB;IASvB,yBAA4C;IAW9C,aAAe;IACf,wDAAwD;IACxD,UADW,OAAO,CACG;IAErB,gBAAgB;IAChB,iEAAgC;IAehC,+BAEQ;IAEV,qBAEC;IACD,+CAOC;IAOD,gBAAgB;IAChB,sBAEC;IAED,gBAAgB;IAChB,4BAEC;IACD;;;;;OAKG;IACH,eAFa,IAAI,CA4BhB;IACD;;;OAGG;IACH,wEAqCC;IACD,gEAmCC;CACF;gCA3WqD,0BAA0B;wBAC7C,KAAK"}

package/dist/Breadcrumb.js

@@ -1,4 +1,4 @@
-import { _ as _defineProperty, L as LeuElement } from './LeuElement-6de6f209.js';
+import { _ as _defineProperty, L as LeuElement } from './LeuElement-a20c5fd6.js';
 import { css, nothing, html } from 'lit';
 import { createRef, ref } from 'lit/directives/ref.js';
 import { classMap } from 'lit/directives/class-map.js';
@@ -20,6 +20,8 @@ var css_248z = css`:host,
   --breadcrumb-font-regular: var(--leu-font-family-regular);
   --breadcrumb-font-black: var(--leu-font-family-black);
 
+  font-family: var(--leu-font-family-regular);
+
   font-family: var(--breadcrumb-font-regular);
   line-height: 1.5;
   color: var(--leu-color-black-100);

package/dist/{Button-9692e403.d.ts → Button-3adfb3ed.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-6de6f209.js';
+import { L as LeuElement } from './LeuElement-a20c5fd6.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-9692e403.d.ts.map
+//# sourceMappingURL=Button-3adfb3ed.d.ts.map

package/dist/Button-3adfb3ed.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button-3adfb3ed.d.ts","sourceRoot":"","sources":["Button-3adfb3ed.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"}

package/dist/{Button-9692e403.js → Button-3adfb3ed.js}

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

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-9692e403.js";
+export { c as BUTTON_EXPANDED_OPTIONS, a as BUTTON_SIZES, b as BUTTON_TYPES, B as BUTTON_VARIANTS, L as LeuButton } from "./Button-3adfb3ed.js";
 //# sourceMappingURL=Button.d.ts.map

package/dist/Button.js

@@ -1,6 +1,6 @@
-import './LeuElement-6de6f209.js';
+import './LeuElement-a20c5fd6.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-9692e403.js';
+export { c as BUTTON_EXPANDED_OPTIONS, a as BUTTON_SIZES, b as BUTTON_TYPES, B as BUTTON_VARIANTS, L as LeuButton } from './Button-3adfb3ed.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-6de6f209.js';
+import { L as LeuElement } from './LeuElement-a20c5fd6.js';
 //# sourceMappingURL=ButtonGroup.d.ts.map

package/dist/ButtonGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonGroup.d.ts","sourceRoot":"","sources":["ButtonGroup.js"],"names":[],"mappings":"AAeA;;;;;GAKG;AACH;IAME;;;OAGG;IACH,8BAHW,GAAoC,GAClC,MAAM,CAIlB;IATC,cAAgB;IAclB,4BAMC;IAVD,oBAGC;IAQD,0BA+BC;IAED;;OAEG;IACH,2BAFW,GAAoC,QAa9C;IACD,+CAMC;CACF;gCApGqD,0BAA0B"}
+{"version":3,"file":"ButtonGroup.d.ts","sourceRoot":"","sources":["ButtonGroup.js"],"names":[],"mappings":"AAeA;;;;;GAKG;AACH;IAME;;;OAGG;IACH,oCAFa,MAAM,CAIlB;IATC,cAAgB;IAclB,4BAMC;IAVD,oBAGC;IAQD,0BA+BC;IAED;;OAEG;IACH,sCAWC;IACD,+CAMC;CACF;gCApGqD,0BAA0B"}

package/dist/ButtonGroup.js

@@ -1,4 +1,4 @@
-import { _ as _defineProperty, L as LeuElement } from './LeuElement-6de6f209.js';
+import { _ as _defineProperty, L as LeuElement } from './LeuElement-a20c5fd6.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-6de6f209.js';
+import { L as LeuElement } from './LeuElement-a20c5fd6.js';
 //# sourceMappingURL=Checkbox.d.ts.map

package/dist/Checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["Checkbox.js"],"names":[],"mappings":"AA+FA;;GAEG;AACH;IAGI,iBAAoB;IACpB,kBAAqB;IACrB,aAAc;IACd,cAAe;IAEjB,+BAIC;IACD,8BAEC;IACD,+CAgBC;CACF;gCAnIqD,0BAA0B"}
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["Checkbox.js"],"names":[],"mappings":"AAiGA;;GAEG;AACH;IAGI,iBAAoB;IACpB,kBAAqB;IACrB,aAAc;IACd,cAAe;IAEjB,+BAIC;IACD,8BAEC;IACD,+CAgBC;CACF;gCArIqD,0BAA0B"}

package/dist/Checkbox.js

@@ -1,4 +1,4 @@
-import { _ as _defineProperty, L as LeuElement } from './LeuElement-6de6f209.js';
+import { _ as _defineProperty, L as LeuElement } from './LeuElement-a20c5fd6.js';
 import { css, html } from 'lit';
 import { LeuIcon } from './Icon.js';
 
@@ -20,6 +20,8 @@ var css_248z = css`:host {
   align-items: flex-start;
   gap: 0.5rem;
 
+  font-family: var(--leu-font-family-regular);
+
   font-family: var(--checkbox-font-regular);
 }
 

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-6de6f209.js';
+import { L as LeuElement } from './LeuElement-a20c5fd6.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":"AAmCA;;GAEG;AACH;IAGI,oBAA+B;IAC/B,aAAe;IAEjB,mBAEC;IACD,yBAEC;IACD,oBAEC;IACD,+CAWC;CACF;gCAjEqD,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-6de6f209.js';
+import { _ as _defineProperty, L as LeuElement } from './LeuElement-a20c5fd6.js';
 import { css, html } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 
@@ -6,6 +6,8 @@ var css_248z = css`:host {
   --group-font-regular: var(--leu-font-family-regular);
   --group-font-black: var(--leu-font-family-black);
 
+  font-family: var(--leu-font-family-regular);
+
   font-family: var(--group-font-regular);
 }
 
@@ -39,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() {
@@ -54,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-6de6f209.js';
+import { L as LeuElement } from './LeuElement-a20c5fd6.js';
 //# sourceMappingURL=Chip.d.ts.map

package/dist/Chip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["Chip.js"],"names":[],"mappings":"AAsJA;IAGI,kBAAqB;CAExB;gCA3JqD,0BAA0B"}
+{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["Chip.js"],"names":[],"mappings":"AAwJA;IAGI,kBAAqB;CAExB;gCA7JqD,0BAA0B"}

package/dist/Chip.js

@@ -1,4 +1,4 @@
-import { _ as _defineProperty, L as LeuElement } from './LeuElement-6de6f209.js';
+import { _ as _defineProperty, L as LeuElement } from './LeuElement-a20c5fd6.js';
 import { css } from 'lit';
 
 var css_248z = css`:host,
@@ -11,17 +11,17 @@ var css_248z = css`:host,
 :host {
   --chip-background-color-default: var(--leu-color-black-transp-10);
   --chip-background-color-hover: var(--leu-color-black-transp-20);
-  --chip-background-color-selected: var(--leu-color-black-100);
-  --chip-background-color-selected-hover: var(--leu-color-black-transp-80);
+  --chip-background-color-checked: var(--leu-color-black-100);
+  --chip-background-color-checked-hover: var(--leu-color-black-transp-80);
 
   --chip-color-default: var(--leu-color-black-transp-60);
   --chip-color-hover: var(--leu-color-black-100);
-  --chip-color-selected: var(--leu-color-black-0);
+  --chip-color-checked: var(--leu-color-black-0);
 
   --chip-radio-border-default: var(--leu-color-black-transp-40);
-  --chip-radio-border-selected: var(--leu-color-black-0);
+  --chip-radio-border-checked: var(--leu-color-black-0);
   --chip-radio-background-default: var(--leu-color-black-0);
-  --chip-radio-background-selected: var(--leu-color-func-cyan);
+  --chip-radio-background-checked: var(--leu-color-func-cyan);
 
   --chip-font-regular: var(--leu-font-family-regular);
   --chip-font-black: var(--leu-font-family-black);
@@ -33,6 +33,8 @@ var css_248z = css`:host,
 
   --leu-icon-size: 1rem;
 
+  font-family: var(--leu-font-family-regular);
+
   font-family: var(--chip-font-regular);
 
   /* Allow shrinking to achieve text truncation (ellipsis) */
@@ -45,14 +47,14 @@ var css_248z = css`:host,
 
   --chip-color-default: var(--leu-color-black-0);
   --chip-color-hover: var(--leu-color-black-0);
-  --chip-color-selected: var(--leu-color-black-0);
+  --chip-color-checked: var(--leu-color-black-0);
 }
 
-:host([selected]) {
-  --chip-background-color: var(--chip-background-color-selected);
-  --chip-color: var(--chip-color-selected);
-  --chip-radio-border: var(--chip-radio-border-selected);
-  --chip-radio-background: var(--chip-radio-background-selected);
+:host([checked]) {
+  --chip-background-color: var(--chip-background-color-checked);
+  --chip-color: var(--chip-color-checked);
+  --chip-radio-border: var(--chip-radio-border-checked);
+  --chip-radio-background: var(--chip-radio-background-checked);
 }
 
 .button {
@@ -101,10 +103,10 @@ var css_248z = css`:host,
   text-decoration: none;
 }
 
-:host([selected]) .button:hover,
-:host([selected]) .button:focus-visible {
-  --chip-background-color: var(--chip-background-color-selected-hover);
-  --chip-color: var(--chip-color-selected);
+:host([checked]) .button:hover,
+:host([checked]) .button:focus-visible {
+  --chip-background-color: var(--chip-background-color-checked-hover);
+  --chip-color: var(--chip-color-checked);
 }
 
 :host([href][size="large"]) .button {
@@ -132,7 +134,7 @@ var css_248z = css`:host,
   border-radius: 50%;
 }
 
-:host([variant="radio"][selected]) .button::before {
+:host([variant="radio"][checked]) .button::before {
   border-width: 3px;
 }
 

package/dist/ChipGroup.d.ts

@@ -10,7 +10,13 @@ export class LeuChipGroup extends LeuElement {
     label: string;
     /** @type {"single" | "multiple" | "none"} */
     selectionMode: "single" | "multiple" | "none";
-    get value(): any[];
+    /**
+     * Checks the items with the given values.
+     * If the selectionMode is single, only the first item with the given value is checked.
+     * @param {string[]} valueList
+     */
+    set value(valueList: string[]);
+    get value(): string[];
     /**
      * Determines the heading tag of the accordion toggle.
      * The headingLevel shouldn't be used directly to render the heading tag
@@ -26,5 +32,5 @@ export const SELECTION_MODES: Readonly<{
     multiple: "multiple";
     none: "none";
 }>;
-import { L as LeuElement } from './LeuElement-6de6f209.js';
+import { L as LeuElement } from './LeuElement-a20c5fd6.js';
 //# sourceMappingURL=ChipGroup.d.ts.map

package/dist/ChipGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChipGroup.d.ts","sourceRoot":"","sources":["ChipGroup.js"],"names":[],"mappings":"AA8BA;;;;GAIG;AACH;IAiBM,aAAkB;IAEpB,kBAAqB;IACrB,qBAAqB;IACrB,cAAe;IAKf,6CAA6C;IAC7C,eADW,QAAQ,GAAG,UAAU,GAAG,MAAM,CACA;IAU3C,mBAEC;IAED;;;;;;OAMG;IACH,yBAMC;IACD,4CAeC;CACF;AAlFD;;;;GAIG;gCA5BmD,0BAA0B"}
+{"version":3,"file":"ChipGroup.d.ts","sourceRoot":"","sources":["ChipGroup.js"],"names":[],"mappings":"AA8BA;;;;GAIG;AACH;IAiBM,aAAkB;IAEpB,kBAAqB;IACrB,qBAAqB;IACrB,cAAe;IAKf,6CAA6C;IAC7C,eADW,QAAQ,GAAG,UAAU,GAAG,MAAM,CACA;IA0B3C;;;;OAIG;IACH,+BAQC;IAjBD,sBAEC;IAiBD;;;;;;OAMG;IACH,yBAMC;IACD,4CAeC;CACF;AA7GD;;;;GAIG;gCA5BmD,0BAA0B"}

package/dist/ChipGroup.js

@@ -1,4 +1,4 @@
-import { _ as _defineProperty, L as LeuElement } from './LeuElement-6de6f209.js';
+import { _ as _defineProperty, L as LeuElement } from './LeuElement-a20c5fd6.js';
 import { html, unsafeStatic } from 'lit/static-html.js';
 import { css } from 'lit';
 
@@ -40,7 +40,7 @@ class LeuChipGroup extends LeuElement {
     _defineProperty(this, "handleInput", e => {
       if (this.selectionMode === SELECTION_MODES.single) {
         this.items.forEach(item => {
-          item.selected = item === e.target; // eslint-disable-line no-param-reassign
+          item.checked = item === e.target; // eslint-disable-line no-param-reassign
         });
       }
     });
@@ -64,14 +64,41 @@ class LeuChipGroup extends LeuElement {
   }
   connectedCallback() {
     super.connectedCallback();
-    this.addEventListener("input", this.handleInput);
+
+    /**
+     * It is technically possible to add an event listener to the host element
+     * before it is connected to the dom. In that case the outside event listener would
+     * be called before the following event listener. But at this point multiple
+     * radio chips could be selected at the same time because `handleInput` hasn't been
+     * called yet. That's why we use the capture phase.
+     */
+    this.addEventListener("input", this.handleInput, {
+      capture: true
+    });
   }
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.removeEventListener("input", this.handleInput);
+    this.removeEventListener("input", this.handleInput, {
+      capture: true
+    });
   }
   get value() {
-    return this.items.filter(i => i.selected).map(i => i.value);
+    return this.items.filter(i => i.checked).map(i => i.getValue());
+  }
+
+  /**
+   * Checks the items with the given values.
+   * If the selectionMode is single, only the first item with the given value is checked.
+   * @param {string[]} valueList
+   */
+  set value(valueList) {
+    let hasChanged = false;
+    for (const item of this.items) {
+      item.checked = hasChanged ? false : valueList.includes(item.value);
+      if (this.selectionMode === SELECTION_MODES.single && item.checked) {
+        hasChanged = true;
+      }
+    }
   }
 
   /**

package/dist/ChipLink.js

@@ -1,4 +1,4 @@
-import { _ as _defineProperty } from './LeuElement-6de6f209.js';
+import { _ as _defineProperty } from './LeuElement-a20c5fd6.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-6de6f209.js';
+import { _ as _defineProperty } from './LeuElement-a20c5fd6.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

@@ -4,6 +4,8 @@
  * @slot - The content of the chip
  * @prop {keyof typeof SIZES} size - The size of the chip. Not supported for radio variant.
  * @prop {keyof typeof VARIANTS} variant - `toggle` or `radio`. Determines if only one or multiple chips can be selected.
+ * @prop {boolean} checked - Whether the chip is selected.
+ * @prop {string} value - The value of the chip.
  */
 export class LeuChipSelectable extends LeuChipBase {
     size: string;
@@ -14,8 +16,14 @@ export class LeuChipSelectable extends LeuChipBase {
      * @default "toggle"
      */
     variant: string;
-    selected: boolean;
+    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;;;;;;GAMG;AACH;IAGI,aAAyB;IAEzB;;;;;OAKG;IACH,gBAA8B;IAC9B,kBAAqB;IAKvB,oBAiBC;IACD,+CAQC;CACF;;;;;;;;;4BA9D2B,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-6de6f209.js';
+import { _ as _defineProperty } from './LeuElement-a20c5fd6.js';
 import { html } from 'lit';
 import { LeuChipBase } from './Chip.js';
 
@@ -17,6 +17,8 @@ const VARIANTS = {
  * @slot - The content of the chip
  * @prop {keyof typeof SIZES} size - The size of the chip. Not supported for radio variant.
  * @prop {keyof typeof VARIANTS} variant - `toggle` or `radio`. Determines if only one or multiple chips can be selected.
+ * @prop {boolean} checked - Whether the chip is selected.
+ * @prop {string} value - The value of the chip.
  */
 class LeuChipSelectable extends LeuChipBase {
   constructor() {
@@ -30,34 +32,44 @@ class LeuChipSelectable extends LeuChipBase {
      * @default "toggle"
      */
     this.variant = VARIANTS.toggle;
-    this.selected = false;
+    this.checked = false;
+    this.value = "";
     if (this.variant === VARIANTS.radio && this.size === SIZES.small) {
       console.warn("Small size has no effect on radio variant");
     }
   }
   handleClick() {
-    let nextSelectedState = this.selected;
+    let nextcheckedState = this.checked;
     if (this.variant === VARIANTS.radio) {
-      nextSelectedState = true;
+      nextcheckedState = true;
     } else {
-      nextSelectedState = !this.selected;
+      nextcheckedState = !this.checked;
     }
-    if (nextSelectedState !== this.selected) {
-      this.selected = nextSelectedState;
+    if (nextcheckedState !== this.checked) {
+      this.checked = nextcheckedState;
       this.dispatchEvent(new CustomEvent("input", {
         detail: {
-          selected: this.selected
+          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=${e => this.handleClick(e)}
+      @click=${() => this.handleClick()}
       class="button"
-      aria-pressed=${this.selected ? "true" : "false"}
+      aria-pressed=${this.checked ? "true" : "false"}
     >
       <span class="label"><slot></slot></span>
     </button>`;
@@ -73,7 +85,7 @@ _defineProperty(LeuChipSelectable, "properties", {
     type: String,
     reflect: true
   },
-  selected: {
+  checked: {
     type: Boolean,
     reflect: true
   },

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-6de6f209.js';
+import { L as LeuElement } from './LeuElement-a20c5fd6.js';
 //# sourceMappingURL=Dropdown.d.ts.map

package/dist/Dropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["Dropdown.js"],"names":[],"mappings":"AAkCA;;GAEG;AACH;IAMQ,kBAAqB;IAqBzB,cAAe;IAGf,kEAAkE;IAClE,YADW,OAAO,oBAAoB,EAAE,GAAG,CAAC,iBAAiB,CAAC,CACjC;IAkB/B,gCAIC;IACD,iDAYC;IACD,2BAEC;IAED;;OAEG;IACH,YAFa,GAA8B,CAI1C;IACD,+CA6BC;CACF;gCAhJqD,0BAA0B"}
+{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["Dropdown.js"],"names":[],"mappings":"AAkCA;;GAEG;AACH;IAMQ,kBAAqB;IAqBzB,cAAe;IAGf,kEAAkE;IAClE,YADW,OAAO,oBAAoB,EAAE,GAAG,CAAC,iBAAiB,CAAC,CACjC;IAkB/B,gCAIC;IACD,iDAYC;IACD,2BAEC;IAED;;OAEG;IACH,gBAEC;IACD,+CA6BC;CACF;gCAhJqD,0BAA0B"}

package/dist/Dropdown.js

@@ -1,7 +1,7 @@
-import { _ as _defineProperty, L as LeuElement } from './LeuElement-6de6f209.js';
+import { _ as _defineProperty, L as LeuElement } from './LeuElement-a20c5fd6.js';
 import { css, html, nothing } from 'lit';
 import { createRef, ref } from 'lit/directives/ref.js';
-import { H as HasSlotController, L as LeuButton } from './Button-9692e403.js';
+import { H as HasSlotController, L as LeuButton } from './Button-3adfb3ed.js';
 import { LeuMenu } from './Menu.js';
 import { LeuMenuItem } from './MenuItem.js';
 import { LeuPopup } from './Popup.js';