@statistikzh/leu 0.5.1 → 0.7.0

package/dist/ButtonGroup.d.ts

@@ -4,7 +4,7 @@
  * @prop {string} value - The value of the currenty selected (active) button
  * @fires input - When the value of the group changes by clicking a button
  */
-export class LeuButtonGroup extends LitElement {
+export class LeuButtonGroup extends LeuElement {
     /**
      * @param {import("../button/Button").LeuButton} button
      * @returns {string}
@@ -20,5 +20,5 @@ export class LeuButtonGroup extends LitElement {
     _handleButtonClick(button: any): void;
     render(): import("lit-html").TemplateResult<1>;
 }
-import { LitElement } from 'lit';
+import { L as LeuElement } from './LeuElement-ba5ea33d.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,oCAFa,MAAM,CAIlB;IATC,cAAgB;IAclB,4BAMC;IAVD,oBAGC;IAQD,0BA+BC;IAED;;OAEG;IACH,sCAWC;IACD,+CAMC;CACF;2BAnGqC,KAAK"}
+{"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,5 +1,5 @@
-import { _ as _defineProperty } from './_rollupPluginBabelHelpers-20f659f4.js';
-import { css, LitElement, html } from 'lit';
+import { _ as _defineProperty, L as LeuElement } from './LeuElement-ba5ea33d.js';
+import { css, html } from 'lit';
 
 var css_248z = css`:host,
 :host * {
@@ -19,7 +19,7 @@ var css_248z = css`:host,
  * @prop {string} value - The value of the currenty selected (active) button
  * @fires input - When the value of the group changes by clicking a button
  */
-class LeuButtonGroup extends LitElement {
+class LeuButtonGroup extends LeuElement {
   constructor() {
     super();
     this._items = [];

package/dist/Checkbox.d.ts

@@ -1,13 +1,14 @@
 /**
  * @tagname leu-checkbox
  */
-export class LeuCheckbox extends LitElement {
+export class LeuCheckbox extends LeuElement {
     checked: boolean;
     disabled: boolean;
-    checkIcon: import("lit-html").TemplateResult<1>;
+    name: string;
+    value: string;
     handleChange(event: any): void;
     handleInput(event: any): void;
     render(): import("lit-html").TemplateResult<1>;
 }
-import { LitElement } from 'lit';
+import { L as LeuElement } from './LeuElement-ba5ea33d.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":"AAiGA;;GAEG;AACH;IAGI,iBAAoB;IACpB,kBAAqB;IACrB,gDAA8B;IAEhC,+BAIC;IACD,8BAEC;IACD,+CAgBC;CACF;2BAnIqC,KAAK"}
+{"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,6 +1,6 @@
-import { _ as _defineProperty } from './_rollupPluginBabelHelpers-20f659f4.js';
-import { css, LitElement, html } from 'lit';
-import { I as Icon } from './icon-03e86700.js';
+import { _ as _defineProperty, L as LeuElement } from './LeuElement-ba5ea33d.js';
+import { css, html } from 'lit';
+import { LeuIcon } from './Icon.js';
 
 var css_248z = css`:host {
   --checkbox-color: var(--leu-color-black-40);
@@ -98,12 +98,13 @@ var css_248z = css`:host {
 /**
  * @tagname leu-checkbox
  */
-class LeuCheckbox extends LitElement {
+class LeuCheckbox extends LeuElement {
   constructor() {
     super();
     this.checked = false;
     this.disabled = false;
-    this.checkIcon = Icon("check");
+    this.name = "";
+    this.value = "";
   }
   handleChange(event) {
     this.checked = event.target.checked;
@@ -116,7 +117,7 @@ class LeuCheckbox extends LitElement {
   render() {
     return html`
       <input
-        id=${this.identifier}
+        id=${`checkbox-${this.name}`}
         class="checkbox"
         type="checkbox"
         name="${this.name}"
@@ -126,14 +127,18 @@ class LeuCheckbox extends LitElement {
         ?disabled=${this.disabled}
         .value=${this.value}
       />
-      <label for=${this.identifier} class="label">${this.label}</label>
-      <div class="icon">${this.checkIcon}</div>
+      <label for=${`checkbox-${this.name}`} class="label"><slot></slot></label>
+      <leu-icon class="icon" name="check"></leu-icon>
     `;
   }
 }
+_defineProperty(LeuCheckbox, "dependencies", {
+  "leu-icon": LeuIcon
+});
 _defineProperty(LeuCheckbox, "styles", css_248z);
+/** @internal */
 _defineProperty(LeuCheckbox, "shadowRootOptions", {
-  ...LitElement.shadowRootOptions,
+  ...LeuElement.shadowRootOptions,
   delegatesFocus: true
 });
 _defineProperty(LeuCheckbox, "properties", {
@@ -145,10 +150,6 @@ _defineProperty(LeuCheckbox, "properties", {
     type: Boolean,
     reflect: true
   },
-  identifier: {
-    type: String,
-    reflect: true
-  },
   value: {
     type: String,
     reflect: true
@@ -156,10 +157,6 @@ _defineProperty(LeuCheckbox, "properties", {
   name: {
     type: String,
     reflect: true
-  },
-  label: {
-    type: String,
-    reflect: true
   }
 });
 

package/dist/CheckboxGroup.d.ts

@@ -1,7 +1,7 @@
 /**
  * @tagname leu-checkbox-group
  */
-export class LeuCheckboxGroup extends LitElement {
+export class LeuCheckboxGroup extends LeuElement {
     orientation: string;
     items: any[];
     get value(): any[];
@@ -9,5 +9,5 @@ export class LeuCheckboxGroup extends LitElement {
     handleItems(): void;
     render(): import("lit-html").TemplateResult<1>;
 }
-import { LitElement } from 'lit';
+import { L as LeuElement } from './LeuElement-ba5ea33d.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;2BAlEqC,KAAK"}
+{"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"}

package/dist/CheckboxGroup.js

@@ -1,5 +1,5 @@
-import { _ as _defineProperty } from './_rollupPluginBabelHelpers-20f659f4.js';
-import { css, LitElement, html } from 'lit';
+import { _ as _defineProperty, L as LeuElement } from './LeuElement-ba5ea33d.js';
+import { css, html } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 
 var css_248z = css`:host {
@@ -38,7 +38,7 @@ var css_248z = css`:host {
 /**
  * @tagname leu-checkbox-group
  */
-class LeuCheckboxGroup extends LitElement {
+class LeuCheckboxGroup extends LeuElement {
   constructor() {
     super();
     this.orientation = "HORIZONTAL";
@@ -51,7 +51,7 @@ class LeuCheckboxGroup extends LitElement {
     this.handleItems();
   }
   handleItems() {
-    this.items = [...this.querySelectorAll(":scope > *:not([slot])")];
+    this.items = Array.from(this.querySelectorAll(":scope > *:not([slot])"));
   }
   render() {
     const fieldsetClasses = {

package/dist/Chip.d.ts

@@ -1,5 +1,5 @@
-export class LeuChipBase extends LitElement {
+export class LeuChipBase extends LeuElement {
     inverted: boolean;
 }
-import { LitElement } from 'lit';
+import { L as LeuElement } from './LeuElement-ba5ea33d.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":"AAyJA;IAGI,kBAAqB;CAExB;2BA7J+B,KAAK"}
+{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["Chip.js"],"names":[],"mappings":"AAwJA;IAGI,kBAAqB;CAExB;gCA7JqD,0BAA0B"}

package/dist/Chip.js

@@ -1,5 +1,5 @@
-import { _ as _defineProperty } from './_rollupPluginBabelHelpers-20f659f4.js';
-import { css, LitElement } from 'lit';
+import { _ as _defineProperty, L as LeuElement } from './LeuElement-ba5ea33d.js';
+import { css } from 'lit';
 
 var css_248z = css`:host,
 :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);
@@ -31,6 +31,8 @@ var css_248z = css`:host,
   --chip-radio-border: var(--chip-radio-border-default);
   --chip-radio-background: var(--chip-radio-background-default);
 
+  --leu-icon-size: 1rem;
+
   font-family: var(--leu-font-family-regular);
 
   font-family: var(--chip-font-regular);
@@ -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 {
@@ -65,6 +67,7 @@ var css_248z = css`:host,
   padding: 0.5rem 1rem;
 
   color: var(--chip-color);
+  font-family: inherit;
   font-size: 0.875rem;
   line-height: 1rem;
 
@@ -100,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 {
@@ -131,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;
 }
 
@@ -143,15 +146,11 @@ var css_248z = css`:host,
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-
-.icon svg {
-  display: block;
-}
 `;
 
 /* Design: https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=21161-184433&mode=design&t=Kjo5VDiqivihn8dh-11 */
 
-class LeuChipBase extends LitElement {
+class LeuChipBase extends LeuElement {
   constructor() {
     super();
     this.inverted = false;
@@ -160,17 +159,13 @@ class LeuChipBase extends LitElement {
 _defineProperty(LeuChipBase, "styles", css_248z);
 /** @internal */
 _defineProperty(LeuChipBase, "shadowRootOptions", {
-  ...LitElement.shadowRootOptions,
+  ...LeuElement.shadowRootOptions,
   delegatesFocus: true
 });
 _defineProperty(LeuChipBase, "properties", {
   inverted: {
     type: Boolean,
     reflect: true
-  },
-  label: {
-    type: String,
-    reflect: true
   }
 });
 

package/dist/ChipGroup.d.ts

@@ -3,12 +3,20 @@
  * @cssproperty --leu-chip-group-gap - The gap between the chips
  * @tagname leu-chip-group
  */
-export class LeuChipGroup extends LitElement {
+export class LeuChipGroup extends LeuElement {
     items: any[];
     inverted: boolean;
     headingLevel: number;
     label: string;
-    get value(): any[];
+    /** @type {"single" | "multiple" | "none"} */
+    selectionMode: "single" | "multiple" | "none";
+    /**
+     * 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
@@ -19,10 +27,10 @@ export class LeuChipGroup extends LitElement {
     _getHeadingTag(): string;
     render(): import("lit-html").TemplateResult;
 }
-export namespace SELECTION_MODES {
-    let single: string;
-    let multiple: string;
-    let none: string;
-}
-import { LitElement } from 'lit';
+export const SELECTION_MODES: Readonly<{
+    single: "single";
+    multiple: "multiple";
+    none: "none";
+}>;
+import { L as LeuElement } from './LeuElement-ba5ea33d.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;IAajB,mBAEC;IAED;;;;;;OAMG;IACH,yBAMC;IACD,4CAeC;CACF;;;;;;2BAtG+B,KAAK"}
+{"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,6 +1,6 @@
-import { _ as _defineProperty } from './_rollupPluginBabelHelpers-20f659f4.js';
-import { css, LitElement } from 'lit';
+import { _ as _defineProperty, L as LeuElement } from './LeuElement-ba5ea33d.js';
 import { html, unsafeStatic } from 'lit/static-html.js';
+import { css } from 'lit';
 
 var css_248z = css`.label {
   margin: 0 0 0.5rem;
@@ -22,25 +22,25 @@ var css_248z = css`.label {
 
 /* Figma https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=131766-248643&mode=design&t=Kjo5VDiqivihn8dh-11 */
 
-const SELECTION_MODES = {
+const SELECTION_MODES = Object.freeze({
   single: "single",
   multiple: "multiple",
   none: "none"
-};
+});
 
 /**
  * @slot - Place leu-chip-* elements inside this slot
  * @cssproperty --leu-chip-group-gap - The gap between the chips
  * @tagname leu-chip-group
  */
-class LeuChipGroup extends LitElement {
+class LeuChipGroup extends LeuElement {
   constructor() {
     super();
     /** @internal */
     _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
         });
       }
     });
@@ -58,17 +58,47 @@ class LeuChipGroup extends LitElement {
 
     /** @internal */
     this.items = [];
+
+    /** @type {"single" | "multiple" | "none"} */
+    this.selectionMode = SELECTION_MODES.none;
   }
   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.value);
+  }
+
+  /**
+   * 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.d.ts

@@ -1,6 +1,7 @@
 /**
- * @slot - The content of the chip
  * @tagname leu-chip-link
+ * @slot - The content of the chip
+ * @prop {keyof typeof SIZES} size - The size of the chip
  */
 export class LeuChipLink extends LeuChipBase {
     size: string;

package/dist/ChipLink.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChipLink.d.ts","sourceRoot":"","sources":["ChipLink.js"],"names":[],"mappings":"AASA;;;GAGG;AACH;IAII,aAAyB;IACzB,aAAc;IAEhB,+CAIC;CACF;;;;;4BAvB2B,WAAW"}
+{"version":3,"file":"ChipLink.d.ts","sourceRoot":"","sources":["ChipLink.js"],"names":[],"mappings":"AASA;;;;GAIG;AACH;IAII,aAAyB;IACzB,aAAc;IAEhB,+CAIC;CACF;;;;;4BAxB2B,WAAW"}

package/dist/ChipLink.js

@@ -1,4 +1,4 @@
-import { _ as _defineProperty } from './_rollupPluginBabelHelpers-20f659f4.js';
+import { _ as _defineProperty } from './LeuElement-ba5ea33d.js';
 import { html } from 'lit';
 import { LeuChipBase } from './Chip.js';
 
@@ -8,8 +8,9 @@ const SIZES = {
 };
 
 /**
- * @slot - The content of the chip
  * @tagname leu-chip-link
+ * @slot - The content of the chip
+ * @prop {keyof typeof SIZES} size - The size of the chip
  */
 class LeuChipLink extends LeuChipBase {
   constructor() {
@@ -20,16 +21,12 @@ class LeuChipLink extends LeuChipBase {
   }
   render() {
     return html`<a href=${this.href} class="button">
-      <span class="label">${this.label}</span>
+      <span class="label"><slot></slot></span>
     </a>`;
   }
 }
 _defineProperty(LeuChipLink, "properties", {
   ...LeuChipBase.properties,
-  /**
-   * The size of the chip
-   * @type {keyof typeof SIZES}
-   */
   size: {
     type: String,
     reflect: true

package/dist/ChipRemovable.d.ts

@@ -4,8 +4,6 @@
  * @fires remove - Dispatched when the user clicks on the chip
  */
 export class LeuChipRemovable extends LeuChipBase {
-    /** @internal */
-    _removeIcon: import("lit-html").TemplateResult<1>;
     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;IAII,gBAAgB;IAChB,kDAAoC;IAEtC,oBAMC;IACD,+CAKC;CACF;4BA5B2B,WAAW"}
+{"version":3,"file":"ChipRemovable.d.ts","sourceRoot":"","sources":["ChipRemovable.js"],"names":[],"mappings":"AAKA;;;;GAIG;AACH;IACE,oBAMC;IACD,+CAKC;CACF;4BAtB2B,WAAW"}

package/dist/ChipRemovable.js

@@ -1,7 +1,7 @@
-import { _ as _defineProperty } from './_rollupPluginBabelHelpers-20f659f4.js';
+import { _ as _defineProperty } from './LeuElement-ba5ea33d.js';
 import { html } from 'lit';
 import { LeuChipBase } from './Chip.js';
-import { I as Icon } from './icon-03e86700.js';
+import { LeuIcon } from './Icon.js';
 
 /**
  * @slot - The content of the chip
@@ -9,26 +9,23 @@ import { I as Icon } from './icon-03e86700.js';
  * @fires remove - Dispatched when the user clicks on the chip
  */
 class LeuChipRemovable extends LeuChipBase {
-  constructor() {
-    super();
-
-    /** @internal */
-    this._removeIcon = Icon("close", 16);
-  }
   handleClick() {
     const customEvent = new CustomEvent("leu:remove", {
-      bubble: true,
+      bubbles: true,
       composed: true
     });
     this.dispatchEvent(customEvent);
   }
   render() {
     return html`<button @click=${e => this.handleClick(e)} class="button">
-      <span class="label">${this.label}</span>
-      <div class="icon">${this._removeIcon}</div>
+      <span class="label"><slot></slot></span>
+      <leu-icon name="close" class="icon"></leu-icon>
     </button>`;
   }
 }
+_defineProperty(LeuChipRemovable, "dependencies", {
+  "leu-icon": LeuIcon
+});
 _defineProperty(LeuChipRemovable, "properties", {
   ...LeuChipBase.properties
 });

package/dist/ChipSelectable.d.ts

@@ -1,12 +1,22 @@
 /**
  * A chip component that can be selected.
- * @slot - The content of the chip
  * @tagname leu-chip-selectable
+ * @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;
+    /**
+     * The variant of the chip. Has an effect not only on the visual appearance but also on the behavior.
+     * - `toggle`: The chip behaves like a toggle button.
+     * - `radio`: The chip behaves like a radio button.
+     * @default "toggle"
+     */
     variant: string;
-    selected: boolean;
+    checked: boolean;
     handleClick(): void;
     render(): import("lit-html").TemplateResult<1>;
 }

package/dist/ChipSelectable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChipSelectable.d.ts","sourceRoot":"","sources":["ChipSelectable.js"],"names":[],"mappings":"AAaA;;;;GAIG;AACH;IAGI,aAAyB;IACzB,gBAA8B;IAC9B,kBAAqB;IAKvB,oBAiBC;IACD,+CAQC;CACF;;;;;;;;;4BArD2B,WAAW"}
+{"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"}