@statistikzh/leu 0.8.0 → 0.10.0

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,39 @@
 # Changelog
 
+## [0.10.0](https://github.com/statistikZH/leu/compare/v0.9.0...v0.10.0) (2024-09-12)
+
+
+### Features
+
+* add dialog component ([805be86](https://github.com/statistikZH/leu/commit/805be868585a1ee59a45bf1d7facd0886596906c))
+* **layout:** add reusable grid definitions as custom properties ([#233](https://github.com/statistikZH/leu/issues/233)) ([4e7367c](https://github.com/statistikZH/leu/commit/4e7367c6eab1ba93037fed2b7ee6de1b3b7c51c3))
+* **theme:** add font feature settings as a custom property ([#237](https://github.com/statistikZH/leu/issues/237)) ([0fc5c5f](https://github.com/statistikZH/leu/commit/0fc5c5ffca3f90e5b61ec992ad6fa28fa9cfc755))
+* **typography:** add regular curves and use 'official' curve names ([#231](https://github.com/statistikZH/leu/issues/231)) ([0f29fb6](https://github.com/statistikZH/leu/commit/0f29fb61ffa6df0ab21c159398a53534075fe454))
+
+
+### Bug Fixes
+
+* **input:** define a explicit background for the whole element ([#236](https://github.com/statistikZH/leu/issues/236)) ([ff1c899](https://github.com/statistikZH/leu/commit/ff1c89910c9502d0bd439f087aea3419323f0f8f))
+
+## [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)
 
 

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

package/dist/Accordion.js

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

@@ -1,2 +1,46 @@
-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";
+export const BUTTON_EXPANDED_OPTIONS: string[];
+export const BUTTON_SIZES: string[];
+export const BUTTON_TYPES: string[];
+export const BUTTON_VARIANTS: string[];
+/**
+ * @tagname leu-button
+ * @slot before - The icon to display before the label
+ * @slot after - The icon to display after the label
+ * @slot - The label of the button or the icon if no label is set
+ */
+export class LeuButton extends LeuElement {
+    label: any;
+    /** @type {string} */
+    size: string;
+    /** @type {string} */
+    variant: string;
+    /** @type {"button" | "submit" | "reset"} */
+    type: "button" | "submit" | "reset";
+    /** @type {string} */
+    componentRole: string;
+    /** @type {boolean} */
+    disabled: boolean;
+    /** @type {boolean} - Only taken into account if no Label and an Icon is set */
+    round: boolean;
+    /** @type {boolean} */
+    active: boolean;
+    /** @type {boolean} - will be used on dark Background */
+    inverted: boolean;
+    /** @type {boolean} - Alters the shape of the button to be full width of its parent container */
+    fluid: boolean;
+    /**
+     * Only taken into account if variant is "ghost"
+     * @type {("true" | "false" | undefined)}
+     */
+    expanded: ("true" | "false" | undefined);
+    renderExpandingIcon(): import("lit-html").TemplateResult<1> | typeof nothing;
+    getAriaAttributes(): {
+        role: string;
+        label: any;
+    };
+    hasTextContent(): boolean;
+    render(): import("lit-html").TemplateResult<1>;
+}
+import { L as LeuElement } from './LeuElement-6fbc0dee.js';
+import { nothing } from 'lit';
 //# sourceMappingURL=Button.d.ts.map

package/dist/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["Button.js"],"names":[],"mappings":""}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["Button.js"],"names":[],"mappings":"AAoTA,+CAAkD;AAJlD,oCAA0C;AAE1C,oCAAmD;AAJnD,uCAA0D;AAS1D;;;;;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;gCA7ZqD,0BAA0B;wBAC7C,KAAK"}

package/dist/Button.js

@@ -1,6 +1,473 @@
-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-3adfb3ed.js';
+import { _ as _defineProperty, L as LeuElement } from './LeuElement-6fbc0dee.js';
+import { css, html, nothing } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { LeuIcon } from './Icon.js';
+import { H as HasSlotController } from './hasSlotController-04d0dfa2.js';
+
+/**
+ * All roles that are associated with a aria-checked attribute
+ * @link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-checked
+ */
+const ARIA_CHECKED_ROLES = ["checkbox", "menuitemcheckbox", "menuitemradio", "option", "radio", "switch"];
+
+/**
+ * All roles that are associated with a aria-selected attribute
+ * @link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected
+ */
+const ARIA_SELECTED_ROLES = ["gridcell", "option", "row", "tab", "columnheader", "rowheader", "treeitem"];
+
+var css_248z = css`:host {
+  display: inline-block;
+}
+
+button {
+  font-family: var(--leu-font-family-black);
+  text-align: center;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  transition: background 0.1s ease;
+  cursor: pointer;
+  border: none;
+  border-radius: 2px;
+
+  max-width: 100%;
+  display: flex;
+  align-items: center;
+  -moz-column-gap: 8px;
+       column-gap: 8px;
+}
+
+.content {
+  flex: 1 1 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+button.round {
+  border-radius: 50%;
+}
+
+button:disabled {
+  cursor: not-allowed;
+}
+
+button:focus-visible {
+  outline: 2px solid var(--leu-color-func-cyan);
+  outline-offset: 2px;
+}
+
+button.inverted:focus-visible {
+  outline: 2px solid var(--leu-color-black-0);
+}
+
+:host([fluid]) button {
+  width: 100%;
+  justify-content: center;
+}
+
+/* size - regular */
+
+button.regular {
+  padding: 12px 24px;
+  font-size: 16px;
+  line-height: 24px;
+}
+
+button.regular.icon-only {
+  padding: 12px;
+}
+
+/* size - small */
+
+button.small {
+  padding: 6px 24px;
+  font-size: 14px;
+  line-height: 20px;
+
+  --leu-icon-size: 1rem;
+}
+
+button.small.icon-only {
+  padding: 8px;
+}
+
+/* primary */
+
+button.primary {
+  color: var(--leu-color-black-0);
+  background: var(--leu-color-black-100);
+}
+
+button.primary:hover {
+  color: var(--leu-color-black-0);
+  background: var(--leu-color-black-transp-80);
+}
+
+button.primary.active {
+  color: var(--leu-color-black-0);
+  background: var(--leu-color-black-100);
+}
+
+button.primary.active:hover {
+  background: var(--leu-color-black-transp-80);
+}
+
+button.primary:disabled {
+  color: var(--leu-color-black-0);
+  background: var(--leu-color-black-transp-20);
+}
+
+/* secondary */
+
+button.secondary {
+  color: var(--leu-color-black-transp-60);
+  background: var(--leu-color-black-transp-10);
+}
+
+button.secondary:hover {
+  color: var(--leu-color-black-100);
+  background: var(--leu-color-black-transp-20);
+}
+
+button.secondary.active {
+  color: var(--leu-color-black-0);
+  background: var(--leu-color-black-100);
+}
+
+button.secondary.active:hover {
+  background: var(--leu-color-black-transp-80);
+}
+
+button.secondary:disabled {
+  color: var(--leu-color-black-transp-20);
+  background: var(--leu-color-black-transp-5);
+}
+
+/* ghost */
+
+button.ghost {
+  --leu-icon-size: 1rem;
+
+  background: transparent;
+  padding: 0 0.5rem;
+  color: var(--leu-color-black-60);
+  font-family: var(--leu-font-family-regular);
+}
+
+button.ghost:hover {
+  color: var(--leu-color-black-100);
+}
+
+button.ghost.active {
+  color: var(--leu-color-black-100);
+}
+
+button.ghost:disabled {
+  color: var(--leu-color-black-20);
+}
+
+/* primary + inverted */
+
+button.primary.inverted {
+  color: var(--leu-color-black-100);
+  background: var(--leu-color-black-0);
+}
+
+button.primary.inverted:hover {
+  color: var(--leu-color-black-100);
+  background: var(--leu-color-white-transp-70);
+}
+
+button.primary.inverted.active {
+  color: var(--leu-color-black-0);
+  background: var(--leu-color-black-100);
+}
+
+button.primary.inverted:disabled {
+  color: var(--leu-color-black-40);
+  background: var(--leu-color-white-transp-70);
+}
+
+/* secondary + inverted */
+
+button.secondary.inverted {
+  color: var(--leu-color-black-0);
+  background: var(--leu-color-black-transp-20);
+}
+
+button.secondary.inverted:hover {
+  color: var(--leu-color-black-0);
+  background: var(--leu-color-black-transp-40);
+}
+
+button.secondary.inverted.active {
+  color: var(--leu-color-black-100);
+  background: var(--leu-color-black-0);
+}
+
+button.secondary.inverted:disabled {
+  color: var(--leu-color-white-transp-70);
+  background: var(--leu-color-black-transp-10);
+}
+
+/* ghost + inverted */
+
+button.ghost.inverted {
+  color: var(--leu-color-black-0);
+}
+
+button.ghost.inverted:hover {
+  color: var(--leu-color-white-transp-70);
+}
+
+button.ghost.inverted.active {
+  color: var(--leu-color-black-0);
+}
+
+button.ghost.inverted:disabled {
+  color: var(--leu-color-black-20);
+}
+
+/* icon-wrapper */
+
+.icon-wrapper leu-icon {
+  display: block;
+}
+
+.ghost.icon-before .icon-wrapper--before,
+.ghost.icon-after .icon-wrapper--after {
+  display: block;
+  padding: 0.5rem;
+  border-radius: 50%;
+  background: var(--leu-color-black-transp-10);
+}
+
+.ghost.active .icon-wrapper--before, .ghost.active .icon-wrapper--after {
+  background: var(--leu-color-black-100);
+  color: var(--leu-color-black-0);
+}
+
+.ghost:disabled .icon-wrapper--before {
+  background: var(--leu-color-black-transp-5);
+}
+
+.ghost:disabled .icon-wrapper--after {
+  background: var(--leu-color-black-transp-5);
+}
+
+/* inverted */
+
+.ghost.inverted .icon-wrapper--before, .ghost.inverted .icon-wrapper--after {
+  background: var(--leu-color-black-transp-20);
+}
+
+.ghost.inverted:hover .icon-wrapper--before, .ghost.inverted:hover .icon-wrapper--after {
+  background: var(--leu-color-black-transp-40);
+  color: var(--leu-color-black-0);
+}
+
+.ghost.inverted:disabled .icon-wrapper--before {
+  background: var(--leu-color-black-transp-20);
+  color: var(--leu-color-white-transp-70);
+}
+
+.ghost.inverted:disabled .icon-wrapper--after {
+  background: var(--leu-color-black-transp-20);
+  color: var(--leu-color-white-transp-70);
+}
+
+.ghost.active.inverted .icon-wrapper--before, .ghost.active.inverted .icon-wrapper--after {
+  background: var(--leu-color-black-0);
+  color: var(--leu-color-black-100);
+}
+
+/* Expanded icon */
+
+.icon-wrapper--expanded {
+  transition: transform 0.1s ease;
+}
+
+:host([expanded="open"]) .icon-wrapper--expanded {
+  transform: rotate(180deg);
+}
+`;
+
+/*
+Design: https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=4-1444&mode=design&t=xu5Vii8jXKKCKDez-0
+Live Demo: zh.ch
+*/
+
+const BUTTON_VARIANTS = ["primary", "secondary", "ghost"];
+Object.freeze(BUTTON_VARIANTS);
+const BUTTON_SIZES = ["regular", "small"];
+Object.freeze(BUTTON_SIZES);
+const BUTTON_TYPES = ["button", "submit", "reset"];
+Object.freeze(BUTTON_TYPES);
+const BUTTON_EXPANDED_OPTIONS = ["true", "false"];
+Object.freeze(BUTTON_EXPANDED_OPTIONS);
+
+/**
+ * @tagname leu-button
+ * @slot before - The icon to display before the label
+ * @slot after - The icon to display after the label
+ * @slot - The label of the button or the icon if no label is set
+ */
+class LeuButton extends LeuElement {
+  constructor() {
+    super();
+    /** @type {string} */
+    /**
+     * @internal
+     */
+    _defineProperty(this, "hasSlotController", new HasSlotController(this, ["before", "after", "[default]"]));
+    this.label = null;
+    /** @type {string} */
+    this.size = "regular";
+    /** @type {string} */
+    this.variant = "primary";
+    /** @type {"button" | "submit" | "reset"} */
+    this.type = "button";
+
+    /** @type {string} */
+    this.componentRole = undefined;
+
+    /** @type {boolean} */
+    this.disabled = false;
+    /** @type {boolean} - Only taken into account if no Label and an Icon is set */
+    this.round = false;
+    /** @type {boolean} */
+    this.active = false;
+    /** @type {boolean} - will be used on dark Background */
+    this.inverted = false;
+
+    /** @type {boolean} - Alters the shape of the button to be full width of its parent container */
+    this.fluid = false;
+
+    /**
+     * Only taken into account if variant is "ghost"
+     * @type {("true" | "false" | undefined)}
+     */
+    this.expanded = undefined;
+  }
+  renderExpandingIcon() {
+    if (typeof this.expanded !== "undefined" && this.variant === "ghost") {
+      return html`<div class="icon-wrapper icon-wrapper--expanded">
+        <leu-icon name="angleDropDown" size="24"></leu-icon>
+      </div>`;
+    }
+    return nothing;
+  }
+  getAriaAttributes() {
+    const attributes = {
+      role: this.componentRole,
+      label: this.label
+    };
+    if (this.componentRole) {
+      if (ARIA_CHECKED_ROLES.includes(this.componentRole)) {
+        attributes.checked = this.active ? "true" : "false";
+      } else if (ARIA_SELECTED_ROLES.includes(this.componentRole)) {
+        attributes.selected = this.active ? "true" : "false";
+      }
+    }
+    return attributes;
+  }
+  hasTextContent() {
+    return Array.from(this.childNodes).some(node => node.nodeType === node.TEXT_NODE && node.textContent.trim() !== "");
+  }
+  render() {
+    const hasTextContent = this.hasTextContent();
+    const hasIconDefault = Boolean(this.querySelector("leu-icon"));
+    const hasIconBefore = this.hasSlotController.test("before");
+    const hasIconAfter = this.hasSlotController.test("after");
+    const aria = this.getAriaAttributes();
+    const cssClasses = {
+      "icon-only": hasIconDefault && !hasTextContent,
+      "icon-before": hasIconBefore,
+      "icon-after": hasIconAfter,
+      round: this.round,
+      active: this.active,
+      inverted: this.inverted,
+      [this.variant]: true,
+      [this.size]: true
+    };
+    return html`
+      <button
+        aria-label=${ifDefined(aria.label)}
+        aria-selected=${ifDefined(aria.selected)}
+        aria-checked=${ifDefined(aria.checked)}
+        aria-expanded=${ifDefined(this.expanded)}
+        role=${ifDefined(aria.role)}
+        class=${classMap(cssClasses)}
+        ?disabled=${this.disabled}
+        type=${this.type}
+      >
+        <slot name="before" class="icon-wrapper icon-wrapper--before"></slot>
+        <span class="content"><slot></slot></span>
+        <slot name="after" class="icon-wrapper icon-wrapper--after"></slot>
+        ${this.renderExpandingIcon()}
+      </button>
+    `;
+  }
+}
+_defineProperty(LeuButton, "dependencies", {
+  "leu-icon": LeuIcon
+});
+_defineProperty(LeuButton, "styles", css_248z);
+/**
+ * @internal
+ */
+_defineProperty(LeuButton, "shadowRootOptions", {
+  ...LeuElement.shadowRootOptions,
+  delegatesFocus: true
+});
+_defineProperty(LeuButton, "properties", {
+  label: {
+    type: String,
+    reflect: true
+  },
+  size: {
+    type: String,
+    reflect: true
+  },
+  variant: {
+    type: String,
+    reflect: true
+  },
+  type: {
+    type: String,
+    reflect: true
+  },
+  componentRole: {
+    type: String,
+    reflect: true
+  },
+  disabled: {
+    type: Boolean,
+    reflect: true
+  },
+  round: {
+    type: Boolean,
+    reflect: true
+  },
+  active: {
+    type: Boolean,
+    reflect: true
+  },
+  inverted: {
+    type: Boolean,
+    reflect: true
+  },
+  expanded: {
+    type: String,
+    reflect: true
+  },
+  fluid: {
+    type: Boolean,
+    reflect: true
+  }
+});
+
+export { BUTTON_EXPANDED_OPTIONS, BUTTON_SIZES, BUTTON_TYPES, BUTTON_VARIANTS, LeuButton };

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

package/dist/ButtonGroup.js

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

package/dist/Checkbox.js

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

@@ -10,5 +10,5 @@ export class LeuCheckboxGroup extends LeuElement {
     handleItems(): void;
     render(): import("lit-html").TemplateResult<1>;
 }
-import { L as LeuElement } from './LeuElement-a20c5fd6.js';
+import { L as LeuElement } from './LeuElement-6fbc0dee.js';
 //# sourceMappingURL=CheckboxGroup.d.ts.map

package/dist/CheckboxGroup.js

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

package/dist/Chip.d.ts

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