@statistikzh/leu 0.7.0 → 0.9.0

package/dist/theme.css

@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --leu-color-black-100: #000;
   --leu-color-black-80: #333;
   --leu-color-black-60: #666;
@@ -42,8 +43,12 @@
   --leu-color-func-red: #d93c1a;
   --leu-color-func-green: #1a7f1f;
 
-  --leu-font-family-regular: HelveticaNowRegular, Helvetica, sans-serif; /* stylelint-disable-line value-keyword-case */
-  --leu-font-family-black: HelveticaNowBlack, Arial Black, Helvetica, sans-serif; /* stylelint-disable-line value-keyword-case */
+  /* stylelint-disable value-keyword-case */
+  --leu-font-family-regular: InterRegular, HelveticaNowRegular, Helvetica,
+    sans-serif;
+  --leu-font-family-black: InterBlack, HelveticaNowBlack, Arial Black, Helvetica,
+    sans-serif;
+  /* stylelint-enable value-keyword-case */
 
   --leu-box-shadow-short: 0px 0px 2px var(--leu-color-black-transp-40);
   --leu-box-shadow-regular: 0px 0px 16px var(--leu-color-black-transp-20);
@@ -260,7 +265,8 @@
   --leu-t-curve-180-black-font:  var(--leu-t-70-black-font);
 }
 @media (min-width: 600px) {
-  :root {
+  :root,
+:host {
     --leu-t-curve-35-black-font-size:  var(--leu-t-35-black-font-size);
     --leu-t-curve-35-black-line-height:  var(--leu-t-35-black-line-height);
     --leu-t-curve-35-black-spacing:  var(--leu-t-35-black-spacing);
@@ -268,7 +274,8 @@
 }
 }
 @media (min-width: 600px) {
-  :root {
+  :root,
+:host {
     --leu-t-curve-45-black-font-size:  var(--leu-t-40-black-font-size);
     --leu-t-curve-45-black-line-height:  var(--leu-t-40-black-line-height);
     --leu-t-curve-45-black-spacing:  var(--leu-t-40-black-spacing);
@@ -276,7 +283,8 @@
 }
 }
 @media (min-width: 1024px) {
-  :root {
+  :root,
+:host {
     --leu-t-curve-45-black-font-size:  var(--leu-t-45-black-font-size);
     --leu-t-curve-45-black-line-height:  var(--leu-t-45-black-line-height);
     --leu-t-curve-45-black-spacing:  var(--leu-t-45-black-spacing);
@@ -284,7 +292,8 @@
 }
 }
 @media (min-width: 400px) {
-  :root {
+  :root,
+:host {
     --leu-t-curve-50-black-font-size:  var(--leu-t-45-black-font-size);
     --leu-t-curve-50-black-line-height:  var(--leu-t-45-black-line-height);
     --leu-t-curve-50-black-spacing:  var(--leu-t-45-black-spacing);
@@ -292,7 +301,8 @@
 }
 }
 @media (min-width: 1280px) {
-  :root {
+  :root,
+:host {
     --leu-t-curve-50-black-font-size:  var(--leu-t-50-black-font-size);
     --leu-t-curve-50-black-line-height:  var(--leu-t-50-black-line-height);
     --leu-t-curve-50-black-spacing:  var(--leu-t-50-black-spacing);
@@ -300,7 +310,8 @@
 }
 }
 @media (min-width: 600px) {
-  :root {
+  :root,
+:host {
     --leu-t-curve-60-black-font-size:  var(--leu-t-50-black-font-size);
     --leu-t-curve-60-black-line-height:  var(--leu-t-50-black-line-height);
     --leu-t-curve-60-black-spacing:  var(--leu-t-50-black-spacing);
@@ -308,7 +319,8 @@
 }
 }
 @media (min-width: 1280px) {
-  :root {
+  :root,
+:host {
     --leu-t-curve-60-black-font-size:  var(--leu-t-60-black-font-size);
     --leu-t-curve-60-black-line-height:  var(--leu-t-60-black-line-height);
     --leu-t-curve-60-black-spacing:  var(--leu-t-60-black-spacing);
@@ -316,7 +328,8 @@
 }
 }
 @media (min-width: 400px) {
-  :root {
+  :root,
+:host {
     --leu-t-curve-70-black-font-size:  var(--leu-t-50-black-font-size);
     --leu-t-curve-70-black-line-height:  var(--leu-t-50-black-line-height);
     --leu-t-curve-70-black-spacing:  var(--leu-t-50-black-spacing);
@@ -324,7 +337,8 @@
 }
 }
 @media (min-width: 1024px) {
-  :root {
+  :root,
+:host {
     --leu-t-curve-70-black-font-size:  var(--leu-t-60-black-font-size);
     --leu-t-curve-70-black-line-height:  var(--leu-t-60-black-line-height);
     --leu-t-curve-70-black-spacing:  var(--leu-t-60-black-spacing);
@@ -332,7 +346,8 @@
 }
 }
 @media (min-width: 1280px) {
-  :root {
+  :root,
+:host {
     --leu-t-curve-70-black-font-size:  var(--leu-t-70-black-font-size);
     --leu-t-curve-70-black-line-height:  var(--leu-t-70-black-line-height);
     --leu-t-curve-70-black-spacing:  var(--leu-t-70-black-spacing);
@@ -340,7 +355,8 @@
 }
 }
 @media (min-width: 600px) {
-  :root {
+  :root,
+:host {
     --leu-t-curve-80-black-font-size:  var(--leu-t-60-black-font-size);
     --leu-t-curve-80-black-line-height:  var(--leu-t-60-black-line-height);
     --leu-t-curve-80-black-spacing:  var(--leu-t-60-black-spacing);
@@ -348,7 +364,8 @@
 }
 }
 @media (min-width: 1024px) {
-  :root {
+  :root,
+:host {
     --leu-t-curve-80-black-font-size:  var(--leu-t-70-black-font-size);
     --leu-t-curve-80-black-line-height:  var(--leu-t-70-black-line-height);
     --leu-t-curve-80-black-spacing:  var(--leu-t-70-black-spacing);
@@ -356,7 +373,8 @@
 }
 }
 @media (min-width: 1280px) {
-  :root {
+  :root,
+:host {
     --leu-t-curve-80-black-font-size:  var(--leu-t-80-black-font-size);
     --leu-t-curve-80-black-line-height:  var(--leu-t-80-black-line-height);
     --leu-t-curve-80-black-spacing:  var(--leu-t-80-black-spacing);
@@ -364,7 +382,8 @@
 }
 }
 @media (min-width: 600px) {
-  :root {
+  :root,
+:host {
     --leu-t-curve-120-black-font-size:  var(--leu-t-70-black-font-size);
     --leu-t-curve-120-black-line-height:  var(--leu-t-70-black-line-height);
     --leu-t-curve-120-black-spacing:  var(--leu-t-70-black-spacing);
@@ -372,7 +391,8 @@
 }
 }
 @media (min-width: 840px) {
-  :root {
+  :root,
+:host {
     --leu-t-curve-120-black-font-size:  var(--leu-t-80-black-font-size);
     --leu-t-curve-120-black-line-height:  var(--leu-t-80-black-line-height);
     --leu-t-curve-120-black-spacing:  var(--leu-t-80-black-spacing);
@@ -380,7 +400,8 @@
 }
 }
 @media (min-width: 1024px) {
-  :root {
+  :root,
+:host {
     --leu-t-curve-120-black-font-size:  var(--leu-t-100-black-font-size);
     --leu-t-curve-120-black-line-height:  var(--leu-t-100-black-line-height);
     --leu-t-curve-120-black-spacing:  var(--leu-t-100-black-spacing);
@@ -388,7 +409,8 @@
 }
 }
 @media (min-width: 1280px) {
-  :root {
+  :root,
+:host {
     --leu-t-curve-120-black-font-size:  var(--leu-t-120-black-font-size);
     --leu-t-curve-120-black-line-height:  var(--leu-t-120-black-line-height);
     --leu-t-curve-120-black-spacing:  var(--leu-t-120-black-spacing);
@@ -396,7 +418,8 @@
 }
 }
 @media (min-width: 400px) {
-  :root {
+  :root,
+:host {
     --leu-t-curve-180-black-font-size:  var(--leu-t-80-black-font-size);
     --leu-t-curve-180-black-line-height:  var(--leu-t-80-black-line-height);
     --leu-t-curve-180-black-spacing:  var(--leu-t-80-black-spacing);
@@ -404,7 +427,8 @@
 }
 }
 @media (min-width: 600px) {
-  :root {
+  :root,
+:host {
     --leu-t-curve-180-black-font-size:  var(--leu-t-100-black-font-size);
     --leu-t-curve-180-black-line-height:  var(--leu-t-100-black-line-height);
     --leu-t-curve-180-black-spacing:  var(--leu-t-100-black-spacing);
@@ -412,7 +436,8 @@
 }
 }
 @media (min-width: 840px) {
-  :root {
+  :root,
+:host {
     --leu-t-curve-180-black-font-size:  var(--leu-t-120-black-font-size);
     --leu-t-curve-180-black-line-height:  var(--leu-t-120-black-line-height);
     --leu-t-curve-180-black-spacing:  var(--leu-t-120-black-spacing);
@@ -420,7 +445,8 @@
 }
 }
 @media (min-width: 1024px) {
-  :root {
+  :root,
+:host {
     --leu-t-curve-180-black-font-size:  var(--leu-t-140-black-font-size);
     --leu-t-curve-180-black-line-height:  var(--leu-t-140-black-line-height);
     --leu-t-curve-180-black-spacing:  var(--leu-t-140-black-spacing);
@@ -428,7 +454,8 @@
 }
 }
 @media (min-width: 1280px) {
-  :root {
+  :root,
+:host {
     --leu-t-curve-180-black-font-size:  var(--leu-t-180-black-font-size);
     --leu-t-curve-180-black-line-height:  var(--leu-t-180-black-line-height);
     --leu-t-curve-180-black-spacing:  var(--leu-t-180-black-spacing);

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

@@ -141,7 +141,10 @@
       "name": "leu-checkbox-group",
       "description": "\n---\n",
       "attributes": [
-        { "name": "orientation", "values": [] },
+        {
+          "name": "orientation",
+          "values": [{ "name": "horizontal" }, { "name": "vertical" }]
+        },
         { "name": "label", "values": [] }
       ],
       "references": [
@@ -196,9 +199,14 @@
     },
     {
       "name": "leu-chip-removable",
-      "description": "\n---\n\n\n### **Events:**\n - **remove** - Dispatched when the user clicks on the chip\n\n### **Slots:**\n - _default_ - The content of the chip",
+      "description": "\n---\n\n\n### **Events:**\n - **remove** - Dispatched when the user clicks on the chip\n\n### **Methods:**\n - **getValue(): _string_** - Returns the value of the chip. If `value` is not set, it will return the text content\n\n### **Slots:**\n - _default_ - The content of the chip",
       "attributes": [
         { "name": "", "values": [] },
+        {
+          "name": "value",
+          "description": "The value of the chip.",
+          "values": []
+        },
         { "name": "inverted", "values": [] }
       ],
       "references": [
@@ -210,7 +218,7 @@
     },
     {
       "name": "leu-chip-selectable",
-      "description": "A chip component that can be selected.\n---\n\n\n### **Events:**\n - **input** - undefined\n\n### **Slots:**\n - _default_ - The content of the chip",
+      "description": "A chip component that can be selected.\n---\n\n\n### **Events:**\n - **input** - undefined\n\n### **Methods:**\n - **getValue(): _string_** - Returns the value of the chip. If `value` is not set, it will return the text content\n\n### **Slots:**\n - _default_ - The content of the chip",
       "attributes": [
         { "name": "", "values": [] },
         {
@@ -412,6 +420,11 @@
           "description": "Defines if the item is selected or checked",
           "values": []
         },
+        {
+          "name": "multipleSelection",
+          "description": "If the item is part of a multiple selection. Renders a checkmark before the label when active",
+          "values": []
+        },
         {
           "name": "disabled",
           "description": "Disables the underlying button or link",
@@ -516,7 +529,10 @@
       "name": "leu-radio-group",
       "description": "\n---\n",
       "attributes": [
-        { "name": "orientation", "values": [] },
+        {
+          "name": "orientation",
+          "values": [{ "name": "horizontal" }, { "name": "vertical" }]
+        },
         { "name": "label", "values": [] }
       ],
       "references": [
@@ -592,6 +608,17 @@
         }
       ]
     },
+    {
+      "name": "leu-spinner",
+      "description": "\n---\n\n\n### **CSS Properties:**\n - **--leu-spinner-size** - The size of the spinner. _(default: undefined)_",
+      "attributes": [],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://statistikzh.github.io/leu/?path=/story/spinner"
+        }
+      ]
+    },
     {
       "name": "leu-table",
       "description": "\n---\n",

package/dist/vue/index.d.ts

@@ -21,6 +21,7 @@ import type { LeuRadio } from "../Radio.js";
 import type { LeuRadioGroup } from "../RadioGroup.js";
 import type { LeuScrollTop } from "../ScrollTop.js";
 import type { LeuSelect } from "../Select.js";
+import type { LeuSpinner } from "../Spinner.js";
 import type { LeuTable } from "../Table.js";
 import type { LeuVisuallyHidden } from "../VisuallyHidden.js";
 
@@ -142,6 +143,8 @@ type LeuChipLinkProps = {
 type LeuChipRemovableProps = {
   /**  */
   ""?: LeuChipRemovable[""];
+  /** The value of the chip. */
+  value?: LeuChipRemovable["value"];
   /**  */
   inverted?: LeuChipRemovable["inverted"];
   /**  */
@@ -253,6 +256,8 @@ type LeuMenuProps = {
 type LeuMenuItemProps = {
   /** Defines if the item is selected or checked */
   active?: LeuMenuItem["active"];
+  /** If the item is part of a multiple selection. Renders a checkmark before the label when active */
+  multipleSelection?: LeuMenuItem["multipleSelection"];
   /** Disables the underlying button or link */
   disabled?: LeuMenuItem["disabled"];
   /** If the item should be focusable. Will be reflected as `tabindex` to the underlying button or link */
@@ -381,6 +386,8 @@ type LeuSelectProps = {
   _menuRef?: LeuSelect["_menuRef"];
 };
 
+type LeuSpinnerProps = {};
+
 type LeuTableProps = {
   /**  */
   columns?: LeuTable["columns"];
@@ -530,6 +537,9 @@ export type CustomElements = {
    * ### **Events:**
    *  - **remove** - Dispatched when the user clicks on the chip
    *
+   * ### **Methods:**
+   *  - **getValue(): _string_** - Returns the value of the chip. If `value` is not set, it will return the text content
+   *
    * ### **Slots:**
    *  - _default_ - The content of the chip
    */
@@ -543,6 +553,9 @@ export type CustomElements = {
    * ### **Events:**
    *  - **input** - undefined
    *
+   * ### **Methods:**
+   *  - **getValue(): _string_** - Returns the value of the chip. If `value` is not set, it will return the text content
+   *
    * ### **Slots:**
    *  - _default_ - The content of the chip
    */
@@ -666,6 +679,16 @@ export type CustomElements = {
    */
   "leu-select": DefineComponent<LeuSelectProps>;
 
+  /**
+   *
+   * ---
+   *
+   *
+   * ### **CSS Properties:**
+   *  - **--leu-spinner-size** - The size of the spinner. _(default: undefined)_
+   */
+  "leu-spinner": DefineComponent<LeuSpinnerProps>;
+
   /**
    *
    * ---

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@statistikzh/leu",
-  "version": "0.7.0",
+  "version": "0.9.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -286,14 +286,20 @@
           "attributes": [
             {
               "name": "orientation",
-              "value": { "type": "string", "default": "\"HORIZONTAL\"" }
+              "value": {
+                "type": "\"horizontal\" | \"vertical\"",
+                "default": "\"horizontal\""
+              }
             },
             { "name": "label", "value": { "type": "string" } }
           ],
           "events": [],
           "js": {
             "properties": [
-              { "name": "orientation", "value": { "type": "string" } },
+              {
+                "name": "orientation",
+                "value": { "type": "\"horizontal\" | \"vertical\"" }
+              },
               { "name": "label", "value": { "type": "string" } }
             ],
             "events": []
@@ -379,10 +385,15 @@
         },
         {
           "name": "leu-chip-removable",
-          "description": "\n---\n\n\n### **Events:**\n - **remove** - Dispatched when the user clicks on the chip\n\n### **Slots:**\n - _default_ - The content of the chip",
+          "description": "\n---\n\n\n### **Events:**\n - **remove** - Dispatched when the user clicks on the chip\n\n### **Methods:**\n - **getValue(): _string_** - Returns the value of the chip. If `value` is not set, it will return the text content\n\n### **Slots:**\n - _default_ - The content of the chip",
           "doc-url": "",
           "attributes": [
             { "name": "", "value": { "type": "string" } },
+            {
+              "name": "value",
+              "description": "The value of the chip.",
+              "value": { "type": "string", "default": "\"\"" }
+            },
             {
               "name": "inverted",
               "value": { "type": "boolean", "default": "false" }
@@ -398,6 +409,11 @@
           "js": {
             "properties": [
               { "name": "", "value": {} },
+              {
+                "name": "value",
+                "description": "The value of the chip.",
+                "value": { "type": "string" }
+              },
               { "name": "inverted", "value": { "type": "boolean" } }
             ],
             "events": [
@@ -410,7 +426,7 @@
         },
         {
           "name": "leu-chip-selectable",
-          "description": "A chip component that can be selected.\n---\n\n\n### **Events:**\n - **input** - undefined\n\n### **Slots:**\n - _default_ - The content of the chip",
+          "description": "A chip component that can be selected.\n---\n\n\n### **Events:**\n - **input** - undefined\n\n### **Methods:**\n - **getValue(): _string_** - Returns the value of the chip. If `value` is not set, it will return the text content\n\n### **Slots:**\n - _default_ - The content of the chip",
           "doc-url": "",
           "attributes": [
             { "name": "", "value": { "type": "string" } },
@@ -435,7 +451,7 @@
             {
               "name": "value",
               "description": "The value of the chip.",
-              "value": { "type": "string" }
+              "value": { "type": "string", "default": "\"\"" }
             },
             {
               "name": "inverted",
@@ -787,6 +803,11 @@
               "description": "Defines if the item is selected or checked",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "multipleSelection",
+              "description": "If the item is part of a multiple selection. Renders a checkmark before the label when active",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "disabled",
               "description": "Disables the underlying button or link",
@@ -824,6 +845,11 @@
                 "description": "Defines if the item is selected or checked",
                 "value": { "type": "boolean" }
               },
+              {
+                "name": "multipleSelection",
+                "description": "If the item is part of a multiple selection. Renders a checkmark before the label when active",
+                "value": { "type": "boolean" }
+              },
               {
                 "name": "disabled",
                 "description": "Disables the underlying button or link",
@@ -990,14 +1016,20 @@
           "attributes": [
             {
               "name": "orientation",
-              "value": { "type": "string", "default": "\"HORIZONTAL\"" }
+              "value": {
+                "type": "\"horizontal\" | \"vertical\"",
+                "default": "\"horizontal\""
+              }
             },
             { "name": "label", "value": { "type": "string" } }
           ],
           "events": [],
           "js": {
             "properties": [
-              { "name": "orientation", "value": { "type": "string" } },
+              {
+                "name": "orientation",
+                "value": { "type": "\"horizontal\" | \"vertical\"" }
+              },
               { "name": "label", "value": { "type": "string" } }
             ],
             "events": []
@@ -1125,6 +1157,14 @@
             "events": []
           }
         },
+        {
+          "name": "leu-spinner",
+          "description": "\n---\n\n\n### **CSS Properties:**\n - **--leu-spinner-size** - The size of the spinner. _(default: undefined)_",
+          "doc-url": "",
+          "attributes": [],
+          "events": [],
+          "js": { "properties": [], "events": [] }
+        },
         {
           "name": "leu-table",
           "description": "\n---\n",

package/package.json

@@ -3,7 +3,7 @@
   "description": "UI component library of the canton of zurich",
   "license": "MIT",
   "author": "statistikzh",
-  "version": "0.7.0",
+  "version": "0.9.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -58,6 +58,7 @@
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-json": "^6.0.0",
+    "@rollup/plugin-replace": "^5.0.7",
     "@rollup/plugin-typescript": "^11.1.6",
     "@storybook/addon-designs": "^7.0.9",
     "@storybook/addon-essentials": "^7.6.17",

package/rollup.config.js

@@ -4,8 +4,17 @@ import { fileURLToPath } from "url"
 import postcss from "rollup-plugin-postcss"
 import postcssLit from "rollup-plugin-postcss-lit"
 import { babel } from "@rollup/plugin-babel"
+import replace from "@rollup/plugin-replace"
 
 export const plugins = [
+  {
+    plugin: replace,
+    args: [
+      {
+        __LEU_VERSION__: JSON.stringify(process.env.npm_package_version),
+      },
+    ],
+  },
   {
     plugin: postcss,
     args: [

package/scripts/generate-component/templates/[namespace]-[name].js

@@ -1,6 +1,5 @@
-import { defineElement } from "../../lib/defineElement.js"
 import { [Namespace][Name] } from "./[Name].js"
 
 export { [Namespace][Name] }
 
-defineElement("[name]", [Namespace][Name])
+[Namespace][Name].define("[namespace]-[name]")

package/src/components/button/button.css

@@ -8,7 +8,7 @@ button {
   appearance: none;
   transition: background 0.1s ease;
   cursor: pointer;
-  border: 1px solid transparent;
+  border: none;
   border-radius: 2px;
 
   max-width: 100%;
@@ -33,12 +33,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/src/components/checkbox/Checkbox.js

@@ -59,7 +59,7 @@ export 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/src/components/checkbox/CheckboxGroup.js

@@ -19,7 +19,8 @@ export class LeuCheckboxGroup extends LeuElement {
 
   constructor() {
     super()
-    this.orientation = "HORIZONTAL"
+    /** @type {"horizontal" | "vertical"} */
+    this.orientation = "horizontal"
     this.items = []
   }
 
@@ -38,7 +39,7 @@ export class LeuCheckboxGroup extends LeuElement {
   render() {
     const fieldsetClasses = {
       fieldset: "true",
-      "fieldset--vertical": this.orientation === "VERTICAL",
+      "fieldset--vertical": this.orientation === "vertical",
     }
 
     return html`

package/src/components/checkbox/stories/checkbox-group.stories.js

@@ -9,7 +9,7 @@ export default {
   argTypes: {
     legend: { control: "text" },
     orientation: {
-      options: ["VERTICAL", "HORIZONTAL"],
+      options: ["vertical", "horizontal"],
       control: { type: "checkbox" },
     },
   },
@@ -49,11 +49,11 @@ HorizontalLabel.args = {
 
 export const Vertical = Template.bind({})
 Vertical.args = {
-  orientation: "VERTICAL",
+  orientation: "vertical",
 }
 
 export const VerticalLabel = Template.bind({})
 VerticalLabel.args = {
-  orientation: "VERTICAL",
+  orientation: "vertical",
   label: "Anrede",
 }

package/src/components/checkbox/stories/checkbox.stories.js

@@ -17,9 +17,14 @@ export default {
   },
 }
 
-function Template({ label = "Label", value, checked, disabled }) {
+function Template({ label = "Label", value, checked, disabled, name = "" }) {
   return html`
-    <leu-checkbox .value=${value} ?checked=${checked} ?disabled=${disabled}>
+    <leu-checkbox
+      .value=${value}
+      ?checked=${checked}
+      ?disabled=${disabled}
+      name=${name}
+    >
       ${label}
     </leu-checkbox>
   `

package/src/components/chip/ChipGroup.js

@@ -62,7 +62,7 @@ export 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())
   }
 
   /**