@statistikzh/leu 0.7.0 → 0.8.0

package/dist/Select.d.ts

@@ -131,6 +131,6 @@ export class LeuSelect extends LeuElement {
     _renderToggleButton(): import("lit-html").TemplateResult<1>;
     render(): import("lit-html").TemplateResult<1>;
 }
-import { L as LeuElement } from './LeuElement-ba5ea33d.js';
+import { L as LeuElement } from './LeuElement-a20c5fd6.js';
 import { nothing } from 'lit';
 //# sourceMappingURL=Select.d.ts.map

package/dist/Select.js

@@ -1,9 +1,9 @@
-import { _ as _defineProperty, L as LeuElement } from './LeuElement-ba5ea33d.js';
+import { _ as _defineProperty, L as LeuElement } from './LeuElement-a20c5fd6.js';
 import { css, nothing, html } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { createRef, ref } from 'lit/directives/ref.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { H as HasSlotController, L as LeuButton } from './Button-7370f901.js';
+import { H as HasSlotController, L as LeuButton } from './Button-3adfb3ed.js';
 import { LeuMenu } from './Menu.js';
 import { LeuMenuItem } from './MenuItem.js';
 import { LeuIcon } from './Icon.js';

package/dist/Table.d.ts

@@ -40,5 +40,5 @@ export class LeuTable extends LeuElement {
     get _data(): any[];
     render(): import("lit-html").TemplateResult<1>;
 }
-import { L as LeuElement } from './LeuElement-ba5ea33d.js';
+import { L as LeuElement } from './LeuElement-a20c5fd6.js';
 //# sourceMappingURL=Table.d.ts.map

package/dist/Table.js

@@ -1,4 +1,4 @@
-import { _ as _defineProperty, L as LeuElement } from './LeuElement-ba5ea33d.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 { styleMap } from 'lit/directives/style-map.js';
@@ -6,7 +6,7 @@ import { createRef, ref } from 'lit/directives/ref.js';
 import { LeuIcon } from './Icon.js';
 import { LeuPagination } from './Pagination.js';
 import 'lit/directives/live.js';
-import './Button-7370f901.js';
+import './Button-3adfb3ed.js';
 import 'lit/directives/if-defined.js';
 import './VisuallyHidden.js';
 

package/dist/VisuallyHidden.d.ts

@@ -4,5 +4,5 @@
 export class LeuVisuallyHidden extends LeuElement {
     render(): import("lit-html").TemplateResult<1>;
 }
-import { L as LeuElement } from './LeuElement-ba5ea33d.js';
+import { L as LeuElement } from './LeuElement-a20c5fd6.js';
 //# sourceMappingURL=VisuallyHidden.d.ts.map

package/dist/VisuallyHidden.js

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

package/dist/index.d.ts

@@ -16,6 +16,6 @@ export { LeuRadio } from "./Radio.js";
 export { LeuRadioGroup } from "./RadioGroup.js";
 export { LeuSelect } from "./Select.js";
 export { LeuTable } from "./Table.js";
-export { c as BUTTON_EXPANDED_OPTIONS, a as BUTTON_SIZES, b as BUTTON_TYPES, B as BUTTON_VARIANTS, L as LeuButton } from "./Button-7370f901.js";
+export { c as BUTTON_EXPANDED_OPTIONS, a as BUTTON_SIZES, b as BUTTON_TYPES, B as BUTTON_VARIANTS, L as LeuButton } from "./Button-3adfb3ed.js";
 export { LeuInput, SIZES } from "./Input.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -1,6 +1,6 @@
 export { LeuAccordion } from './Accordion.js';
 export { LeuBreadcrumb } from './Breadcrumb.js';
-export { c as BUTTON_EXPANDED_OPTIONS, a as BUTTON_SIZES, b as BUTTON_TYPES, B as BUTTON_VARIANTS, L as LeuButton } from './Button-7370f901.js';
+export { c as BUTTON_EXPANDED_OPTIONS, a as BUTTON_SIZES, b as BUTTON_TYPES, B as BUTTON_VARIANTS, L as LeuButton } from './Button-3adfb3ed.js';
 export { LeuButtonGroup } from './ButtonGroup.js';
 export { LeuCheckbox } from './Checkbox.js';
 export { LeuCheckboxGroup } from './CheckboxGroup.js';
@@ -18,7 +18,7 @@ export { LeuRadio } from './Radio.js';
 export { LeuRadioGroup } from './RadioGroup.js';
 export { LeuSelect } from './Select.js';
 export { LeuTable } from './Table.js';
-import './LeuElement-ba5ea33d.js';
+import './LeuElement-a20c5fd6.js';
 import 'lit';
 import 'lit/static-html.js';
 import 'lit/directives/ref.js';

package/dist/leu-accordion.js

@@ -1,5 +1,5 @@
 import { LeuAccordion } from './Accordion.js';
-import './LeuElement-ba5ea33d.js';
+import './LeuElement-a20c5fd6.js';
 import 'lit';
 import 'lit/static-html.js';
 

package/dist/leu-breadcrumb.js

@@ -1,5 +1,5 @@
 import { LeuBreadcrumb } from './Breadcrumb.js';
-import './LeuElement-ba5ea33d.js';
+import './LeuElement-a20c5fd6.js';
 import 'lit';
 import 'lit/directives/ref.js';
 import 'lit/directives/class-map.js';

package/dist/leu-button-group.js

@@ -1,5 +1,5 @@
 import { LeuButtonGroup } from './ButtonGroup.js';
-import './LeuElement-ba5ea33d.js';
+import './LeuElement-a20c5fd6.js';
 import 'lit';
 
 LeuButtonGroup.define("leu-button-group");

package/dist/leu-button.d.ts

@@ -1,3 +1,3 @@
 export { LeuButton };
-import { L as LeuButton } from './Button-7370f901.js';
+import { L as LeuButton } from './Button-3adfb3ed.js';
 //# sourceMappingURL=leu-button.d.ts.map

package/dist/leu-button.js

@@ -1,5 +1,5 @@
-import { L as LeuButton } from './Button-7370f901.js';
-import './LeuElement-ba5ea33d.js';
+import { L as LeuButton } from './Button-3adfb3ed.js';
+import './LeuElement-a20c5fd6.js';
 import 'lit';
 import 'lit/directives/class-map.js';
 import 'lit/directives/if-defined.js';

package/dist/leu-checkbox-group.js

@@ -1,5 +1,5 @@
 import { LeuCheckboxGroup } from './CheckboxGroup.js';
-import './LeuElement-ba5ea33d.js';
+import './LeuElement-a20c5fd6.js';
 import 'lit';
 import 'lit/directives/class-map.js';
 

package/dist/leu-checkbox.js

@@ -1,5 +1,5 @@
 import { LeuCheckbox } from './Checkbox.js';
-import './LeuElement-ba5ea33d.js';
+import './LeuElement-a20c5fd6.js';
 import 'lit';
 import './Icon.js';
 

package/dist/leu-chip-group.js

@@ -1,5 +1,5 @@
 import { LeuChipGroup } from './ChipGroup.js';
-import './LeuElement-ba5ea33d.js';
+import './LeuElement-a20c5fd6.js';
 import 'lit';
 import 'lit/static-html.js';
 

package/dist/leu-chip-link.js

@@ -1,5 +1,5 @@
 import { LeuChipLink } from './ChipLink.js';
-import './LeuElement-ba5ea33d.js';
+import './LeuElement-a20c5fd6.js';
 import 'lit';
 import './Chip.js';
 

package/dist/leu-chip-removable.js

@@ -1,5 +1,5 @@
 import { LeuChipRemovable } from './ChipRemovable.js';
-import './LeuElement-ba5ea33d.js';
+import './LeuElement-a20c5fd6.js';
 import 'lit';
 import './Chip.js';
 import './Icon.js';

package/dist/leu-chip-selectable.js

@@ -1,5 +1,5 @@
 import { LeuChipSelectable } from './ChipSelectable.js';
-import './LeuElement-ba5ea33d.js';
+import './LeuElement-a20c5fd6.js';
 import 'lit';
 import './Chip.js';
 

package/dist/leu-dropdown.js

@@ -1,8 +1,8 @@
 import { LeuDropdown } from './Dropdown.js';
-import './LeuElement-ba5ea33d.js';
+import './LeuElement-a20c5fd6.js';
 import 'lit';
 import 'lit/directives/ref.js';
-import './Button-7370f901.js';
+import './Button-3adfb3ed.js';
 import 'lit/directives/class-map.js';
 import 'lit/directives/if-defined.js';
 import './Icon.js';

package/dist/leu-icon.js

@@ -1,5 +1,5 @@
 import { LeuIcon } from './Icon.js';
-import './LeuElement-ba5ea33d.js';
+import './LeuElement-a20c5fd6.js';
 import 'lit';
 
 LeuIcon.define("leu-icon");

package/dist/leu-input.js

@@ -1,5 +1,5 @@
 import { LeuInput } from './Input.js';
-import './LeuElement-ba5ea33d.js';
+import './LeuElement-a20c5fd6.js';
 import 'lit';
 import 'lit/directives/class-map.js';
 import 'lit/directives/if-defined.js';

package/dist/leu-menu-item.js

@@ -1,5 +1,5 @@
 import { LeuMenuItem } from './MenuItem.js';
-import './LeuElement-ba5ea33d.js';
+import './LeuElement-a20c5fd6.js';
 import 'lit';
 import 'lit/directives/if-defined.js';
 import './Icon.js';

package/dist/leu-menu.js

@@ -1,5 +1,5 @@
 import { LeuMenu } from './Menu.js';
-import './LeuElement-ba5ea33d.js';
+import './LeuElement-a20c5fd6.js';
 import 'lit';
 import './MenuItem.js';
 import 'lit/directives/if-defined.js';

package/dist/leu-pagination.js

@@ -1,8 +1,8 @@
 import { LeuPagination } from './Pagination.js';
-import './LeuElement-ba5ea33d.js';
+import './LeuElement-a20c5fd6.js';
 import 'lit';
 import 'lit/directives/live.js';
-import './Button-7370f901.js';
+import './Button-3adfb3ed.js';
 import 'lit/directives/class-map.js';
 import 'lit/directives/if-defined.js';
 import './Icon.js';

package/dist/leu-popup.js

@@ -1,5 +1,5 @@
 import { LeuPopup } from './Popup.js';
-import './LeuElement-ba5ea33d.js';
+import './LeuElement-a20c5fd6.js';
 import 'lit';
 import '@floating-ui/dom';
 

package/dist/leu-radio-group.js

@@ -1,5 +1,5 @@
 import { LeuRadioGroup } from './RadioGroup.js';
-import './LeuElement-ba5ea33d.js';
+import './LeuElement-a20c5fd6.js';
 import 'lit';
 import 'lit/directives/class-map.js';
 

package/dist/leu-radio.js

@@ -1,5 +1,5 @@
 import { LeuRadio } from './Radio.js';
-import './LeuElement-ba5ea33d.js';
+import './LeuElement-a20c5fd6.js';
 import 'lit';
 
 LeuRadio.define("leu-radio");

package/dist/leu-scroll-top.js

@@ -1,8 +1,8 @@
 import { LeuScrollTop } from './ScrollTop.js';
-import './LeuElement-ba5ea33d.js';
+import './LeuElement-a20c5fd6.js';
 import 'lit';
 import 'lit/directives/class-map.js';
-import './Button-7370f901.js';
+import './Button-3adfb3ed.js';
 import 'lit/directives/if-defined.js';
 import './Icon.js';
 import './utils-65469421.js';

package/dist/leu-select.js

@@ -1,10 +1,10 @@
 import { LeuSelect } from './Select.js';
-import './LeuElement-ba5ea33d.js';
+import './LeuElement-a20c5fd6.js';
 import 'lit';
 import 'lit/directives/class-map.js';
 import 'lit/directives/ref.js';
 import 'lit/directives/if-defined.js';
-import './Button-7370f901.js';
+import './Button-3adfb3ed.js';
 import './Icon.js';
 import './Menu.js';
 import './MenuItem.js';

package/dist/leu-table.js

@@ -1,5 +1,5 @@
 import { LeuTable } from './Table.js';
-import './LeuElement-ba5ea33d.js';
+import './LeuElement-a20c5fd6.js';
 import 'lit';
 import 'lit/directives/class-map.js';
 import 'lit/directives/style-map.js';
@@ -7,7 +7,7 @@ import 'lit/directives/ref.js';
 import './Icon.js';
 import './Pagination.js';
 import 'lit/directives/live.js';
-import './Button-7370f901.js';
+import './Button-3adfb3ed.js';
 import 'lit/directives/if-defined.js';
 import './VisuallyHidden.js';
 

package/dist/leu-visually-hidden.js

@@ -1,5 +1,5 @@
 import { LeuVisuallyHidden } from './VisuallyHidden.js';
-import './LeuElement-ba5ea33d.js';
+import './LeuElement-a20c5fd6.js';
 import 'lit';
 
 LeuVisuallyHidden.define("leu-visually-hidden");

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": [] },
         {
@@ -516,7 +524,10 @@
       "name": "leu-radio-group",
       "description": "\n---\n",
       "attributes": [
-        { "name": "orientation", "values": [] },
+        {
+          "name": "orientation",
+          "values": [{ "name": "horizontal" }, { "name": "vertical" }]
+        },
         { "name": "label", "values": [] }
       ],
       "references": [

package/dist/vue/index.d.ts

@@ -142,6 +142,8 @@ type LeuChipLinkProps = {
 type LeuChipRemovableProps = {
   /**  */
   ""?: LeuChipRemovable[""];
+  /** The value of the chip. */
+  value?: LeuChipRemovable["value"];
   /**  */
   inverted?: LeuChipRemovable["inverted"];
   /**  */
@@ -530,6 +532,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 +548,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
    */

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.8.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",
@@ -990,14 +1006,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": []

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.8.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/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/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())
   }
 
   /**

package/src/components/chip/ChipRemovable.js

@@ -7,6 +7,7 @@ import { LeuIcon } from "../icon/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.
  */
 export class LeuChipRemovable extends LeuChipBase {
   static dependencies = {
@@ -15,12 +16,29 @@ export class LeuChipRemovable extends LeuChipBase {
 
   static properties = {
     ...LeuChipBase.properties,
+    value: { type: String, reflect: true },
+  }
+
+  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,
+      detail: {
+        value: this.getValue(),
+      },
     })
     this.dispatchEvent(customEvent)
   }