@statistikzh/leu 0.14.0 → 0.14.1

package/dist/Select.js

@@ -1,9 +1,9 @@
-import { _ as _defineProperty, L as LeuElement } from './LeuElement-BjGpKQpe.js';
+import { _ as _defineProperty, L as LeuElement } from './LeuElement-DH0PPSMq.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 } from './hasSlotController-DvFw2NdC.js';
+import { H as HasSlotController } from './hasSlotController-CYd5tWew.js';
 import { LeuButton } from './Button.js';
 import { LeuMenu } from './Menu.js';
 import { LeuMenuItem } from './MenuItem.js';
@@ -557,15 +557,6 @@ class LeuSelect extends LeuElement {
       this._closeDropdown();
     }
   }
-
-  /**
-   * Close the dropdown if the focus moves outside the component.
-   */
-  _handlePopupFocusOut(event) {
-    if (!this.contains(event.relatedTarget) && !this.shadowRoot.contains(event.relatedTarget)) {
-      this._closeDropdown();
-    }
-  }
   _renderFilterInput() {
     if (this.filterable) {
       return html` <leu-input
@@ -657,11 +648,7 @@ class LeuSelect extends LeuElement {
           autoSizePadding="8"
         >
           ${this._renderToggleButton()}
-          <div
-            id="select-popup"
-            class="select-menu-container"
-            @focusout=${this._handlePopupFocusOut}
-          >
+          <div id="select-popup" class="select-menu-container">
             <slot name="before" class="before"></slot>
             ${this._renderFilterInput()}
             <leu-menu

package/dist/Spinner.d.ts

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

package/dist/Spinner.js

@@ -1,4 +1,4 @@
-import { _ as _defineProperty, L as LeuElement } from './LeuElement-BjGpKQpe.js';
+import { _ as _defineProperty, L as LeuElement } from './LeuElement-DH0PPSMq.js';
 import { css, html } from 'lit';
 
 var css_248z = css`@keyframes leu-spinner-rotate {

package/dist/Table.d.ts

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

package/dist/Table.js

@@ -1,4 +1,4 @@
-import { _ as _defineProperty, L as LeuElement } from './LeuElement-BjGpKQpe.js';
+import { _ as _defineProperty, L as LeuElement } from './LeuElement-DH0PPSMq.js';
 import { css, html, nothing } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { styleMap } from 'lit/directives/style-map.js';
@@ -8,7 +8,7 @@ import { LeuPagination } from './Pagination.js';
 import 'lit/directives/live.js';
 import './Button.js';
 import 'lit/directives/if-defined.js';
-import './hasSlotController-DvFw2NdC.js';
+import './hasSlotController-CYd5tWew.js';
 import './VisuallyHidden.js';
 
 var css_248z = css`:host {

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-BjGpKQpe.js';
+import { L as LeuElement } from './LeuElement-DH0PPSMq.js';
 //# sourceMappingURL=VisuallyHidden.d.ts.map

package/dist/VisuallyHidden.js

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

package/dist/{hasSlotController-DvFw2NdC.d.ts → hasSlotController-CYd5tWew.d.ts}

@@ -35,4 +35,4 @@ declare class HasSlotController implements ReactiveController {
     hostConnected(): void;
     hostDisconnected(): void;
 }
-//# sourceMappingURL=hasSlotController-DvFw2NdC.d.ts.map
+//# sourceMappingURL=hasSlotController-CYd5tWew.d.ts.map

package/dist/{hasSlotController-DvFw2NdC.d.ts.map → hasSlotController-CYd5tWew.d.ts.map}

@@ -1 +1 @@
-{"version":3,"file":"hasSlotController-DvFw2NdC.d.ts","sourceRoot":"","sources":["hasSlotController-DvFw2NdC.js"],"names":[],"mappings":";;;;iCASa,OAAO,KAAK,EAAE,kBAAkB;AAP7C;;;GAGG;AAEH;;;;GAIG;AACH,2CAFgB,kBAAkB;IAGhC,uCAcC;IAHC,UAAgB;IAEhB,eAA0B;IAG5B;;;OAGG;IACH,uBAeC;IAED;;;;OAIG;IACH,qBAEC;IAED;;;OAGG;IACH,gCAEC;IACD,sBAEC;IACD,yBAEC;CACF"}
+{"version":3,"file":"hasSlotController-CYd5tWew.d.ts","sourceRoot":"","sources":["hasSlotController-CYd5tWew.js"],"names":[],"mappings":";;;;iCASa,OAAO,KAAK,EAAE,kBAAkB;AAP7C;;;GAGG;AAEH;;;;GAIG;AACH,2CAFgB,kBAAkB;IAGhC,uCAcC;IAHC,UAAgB;IAEhB,eAA0B;IAG5B;;;OAGG;IACH,uBAeC;IAED;;;;OAIG;IACH,qBAEC;IAED;;;OAGG;IACH,gCAEC;IACD,sBAEC;IACD,yBAEC;CACF"}

package/dist/{hasSlotController-DvFw2NdC.js → hasSlotController-CYd5tWew.js}

@@ -1,4 +1,4 @@
-import { _ as _defineProperty } from './LeuElement-BjGpKQpe.js';
+import { _ as _defineProperty } from './LeuElement-DH0PPSMq.js';
 
 /**
  * Thanks Shoelace!

package/dist/index.d.ts

@@ -15,7 +15,7 @@ export { LeuRadio } from "./Radio.js";
 export { LeuRadioGroup } from "./RadioGroup.js";
 export { LeuSelect } from "./Select.js";
 export { LeuTable } from "./Table.js";
-export { L as LeuElement } from "./LeuElement-BjGpKQpe.js";
+export { L as LeuElement } from "./LeuElement-DH0PPSMq.js";
 export { BUTTON_EXPANDED_OPTIONS, BUTTON_SIZES, BUTTON_TYPES, BUTTON_VARIANTS, LeuButton } from "./Button.js";
 export { LeuInput, SIZES } from "./Input.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -17,13 +17,13 @@ export { LeuRadio } from './Radio.js';
 export { LeuRadioGroup } from './RadioGroup.js';
 export { LeuSelect } from './Select.js';
 export { LeuTable } from './Table.js';
-export { L as LeuElement } from './LeuElement-BjGpKQpe.js';
+export { L as LeuElement } from './LeuElement-DH0PPSMq.js';
 import 'lit';
 import 'lit/static-html.js';
 import 'lit/directives/class-map.js';
 import 'lit/directives/if-defined.js';
 import './Icon.js';
-import './hasSlotController-DvFw2NdC.js';
+import './hasSlotController-CYd5tWew.js';
 import './Chip.js';
 import 'lit/directives/ref.js';
 import 'lit/directives/live.js';

package/dist/leu-accordion.js

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

package/dist/leu-button-group.js

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

package/dist/leu-button.js

@@ -1,10 +1,10 @@
 import { LeuButton } from './Button.js';
-import './LeuElement-BjGpKQpe.js';
+import './LeuElement-DH0PPSMq.js';
 import 'lit';
 import 'lit/directives/class-map.js';
 import 'lit/directives/if-defined.js';
 import './Icon.js';
-import './hasSlotController-DvFw2NdC.js';
+import './hasSlotController-CYd5tWew.js';
 
 LeuButton.define("leu-button");
 

package/dist/leu-checkbox-group.js

@@ -1,5 +1,5 @@
 import { LeuCheckboxGroup } from './CheckboxGroup.js';
-import './LeuElement-BjGpKQpe.js';
+import './LeuElement-DH0PPSMq.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-BjGpKQpe.js';
+import './LeuElement-DH0PPSMq.js';
 import 'lit';
 import './Icon.js';
 

package/dist/leu-chip-group.js

@@ -1,5 +1,5 @@
 import { LeuChipGroup } from './ChipGroup.js';
-import './LeuElement-BjGpKQpe.js';
+import './LeuElement-DH0PPSMq.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-BjGpKQpe.js';
+import './LeuElement-DH0PPSMq.js';
 import 'lit';
 import './Chip.js';
 

package/dist/leu-chip-removable.js

@@ -1,5 +1,5 @@
 import { LeuChipRemovable } from './ChipRemovable.js';
-import './LeuElement-BjGpKQpe.js';
+import './LeuElement-DH0PPSMq.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-BjGpKQpe.js';
+import './LeuElement-DH0PPSMq.js';
 import 'lit';
 import './Chip.js';
 

package/dist/leu-dialog.js

@@ -1,9 +1,9 @@
 import { LeuDialog } from './Dialog.js';
-import './LeuElement-BjGpKQpe.js';
+import './LeuElement-DH0PPSMq.js';
 import 'lit';
 import 'lit/directives/ref.js';
 import 'lit/directives/class-map.js';
-import './hasSlotController-DvFw2NdC.js';
+import './hasSlotController-CYd5tWew.js';
 import './Icon.js';
 
 LeuDialog.define("leu-dialog");

package/dist/leu-dropdown.js

@@ -1,8 +1,8 @@
 import { LeuDropdown } from './Dropdown.js';
-import './LeuElement-BjGpKQpe.js';
+import './LeuElement-DH0PPSMq.js';
 import 'lit';
 import 'lit/directives/ref.js';
-import './hasSlotController-DvFw2NdC.js';
+import './hasSlotController-CYd5tWew.js';
 import './Button.js';
 import 'lit/directives/class-map.js';
 import 'lit/directives/if-defined.js';

package/dist/leu-icon.js

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

package/dist/leu-input.js

@@ -1,5 +1,5 @@
 import { LeuInput } from './Input.js';
-import './LeuElement-BjGpKQpe.js';
+import './LeuElement-DH0PPSMq.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-BjGpKQpe.js';
+import './LeuElement-DH0PPSMq.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-BjGpKQpe.js';
+import './LeuElement-DH0PPSMq.js';
 import 'lit';
 import './MenuItem.js';
 import 'lit/directives/if-defined.js';

package/dist/leu-pagination.js

@@ -1,12 +1,12 @@
 import { LeuPagination } from './Pagination.js';
-import './LeuElement-BjGpKQpe.js';
+import './LeuElement-DH0PPSMq.js';
 import 'lit';
 import 'lit/directives/live.js';
 import './Button.js';
 import 'lit/directives/class-map.js';
 import 'lit/directives/if-defined.js';
 import './Icon.js';
-import './hasSlotController-DvFw2NdC.js';
+import './hasSlotController-CYd5tWew.js';
 import './VisuallyHidden.js';
 
 LeuPagination.define("leu-pagination");

package/dist/leu-popup.js

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

package/dist/leu-radio-group.js

@@ -1,5 +1,5 @@
 import { LeuRadioGroup } from './RadioGroup.js';
-import './LeuElement-BjGpKQpe.js';
+import './LeuElement-DH0PPSMq.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-BjGpKQpe.js';
+import './LeuElement-DH0PPSMq.js';
 import 'lit';
 
 LeuRadio.define("leu-radio");

package/dist/leu-range.js

@@ -1,5 +1,5 @@
 import { LeuRange } from './Range.js';
-import './LeuElement-BjGpKQpe.js';
+import './LeuElement-DH0PPSMq.js';
 import 'lit';
 
 LeuRange.define("leu-range");

package/dist/leu-scroll-top.js

@@ -1,11 +1,11 @@
 import { LeuScrollTop } from './ScrollTop.js';
-import './LeuElement-BjGpKQpe.js';
+import './LeuElement-DH0PPSMq.js';
 import 'lit';
 import 'lit/directives/class-map.js';
 import './Button.js';
 import 'lit/directives/if-defined.js';
 import './Icon.js';
-import './hasSlotController-DvFw2NdC.js';
+import './hasSlotController-CYd5tWew.js';
 
 LeuScrollTop.define("leu-scroll-top");
 

package/dist/leu-select.js

@@ -1,10 +1,10 @@
 import { LeuSelect } from './Select.js';
-import './LeuElement-BjGpKQpe.js';
+import './LeuElement-DH0PPSMq.js';
 import 'lit';
 import 'lit/directives/class-map.js';
 import 'lit/directives/ref.js';
 import 'lit/directives/if-defined.js';
-import './hasSlotController-DvFw2NdC.js';
+import './hasSlotController-CYd5tWew.js';
 import './Button.js';
 import './Icon.js';
 import './Menu.js';

package/dist/leu-spinner.js

@@ -1,5 +1,5 @@
 import { LeuSpinner } from './Spinner.js';
-import './LeuElement-BjGpKQpe.js';
+import './LeuElement-DH0PPSMq.js';
 import 'lit';
 
 LeuSpinner.define("leu-spinner");

package/dist/leu-table.js

@@ -1,5 +1,5 @@
 import { LeuTable } from './Table.js';
-import './LeuElement-BjGpKQpe.js';
+import './LeuElement-DH0PPSMq.js';
 import 'lit';
 import 'lit/directives/class-map.js';
 import 'lit/directives/style-map.js';
@@ -9,7 +9,7 @@ import './Pagination.js';
 import 'lit/directives/live.js';
 import './Button.js';
 import 'lit/directives/if-defined.js';
-import './hasSlotController-DvFw2NdC.js';
+import './hasSlotController-CYd5tWew.js';
 import './VisuallyHidden.js';
 
 LeuTable.define("leu-table");

package/dist/leu-visually-hidden.js

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

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

@@ -561,7 +561,7 @@
     },
     {
       "name": "leu-select",
-      "description": "\n---\n\n\n### **Methods:**\n - **_updateMenuItems(changed)** - Apply the current state to the menu items.\n- Set the active property when the value property has changed.\n- Hide menu items that do not match the filter.\n- **_getDisplayValue(): _String | nothing_** - Determines the value or label that should be displayed inside the toggle button.\n- **_isSelected(menuItemValue: _String_): _Boolean_** - Checks if the given value is selected.\n- **_handlePopupFocusOut(event)** - Close the dropdown if the focus moves outside the component.\n\n### **Slots:**\n - **before** - Optional content the appears before the option list\n- **after** - Optional content the appears after the option list",
+      "description": "\n---\n\n\n### **Methods:**\n - **_updateMenuItems(changed)** - Apply the current state to the menu items.\n- Set the active property when the value property has changed.\n- Hide menu items that do not match the filter.\n- **_getDisplayValue(): _String | nothing_** - Determines the value or label that should be displayed inside the toggle button.\n- **_isSelected(menuItemValue: _String_): _Boolean_** - Checks if the given value is selected.\n\n### **Slots:**\n - **before** - Optional content the appears before the option list\n- **after** - Optional content the appears after the option list",
       "attributes": [
         {
           "name": "value",

package/dist/vue/index.d.ts

@@ -665,7 +665,6 @@ export type CustomElements = {
    * - Hide menu items that do not match the filter.
    * - **_getDisplayValue(): _String | nothing_** - Determines the value or label that should be displayed inside the toggle button.
    * - **_isSelected(menuItemValue: _String_): _Boolean_** - Checks if the given value is selected.
-   * - **_handlePopupFocusOut(event)** - Close the dropdown if the focus moves outside the component.
    *
    * ### **Slots:**
    *  - **before** - Optional content the appears before the option list

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.14.0",
+  "version": "0.14.1",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -1119,7 +1119,7 @@
         },
         {
           "name": "leu-select",
-          "description": "\n---\n\n\n### **Methods:**\n - **_updateMenuItems(changed)** - Apply the current state to the menu items.\n- Set the active property when the value property has changed.\n- Hide menu items that do not match the filter.\n- **_getDisplayValue(): _String | nothing_** - Determines the value or label that should be displayed inside the toggle button.\n- **_isSelected(menuItemValue: _String_): _Boolean_** - Checks if the given value is selected.\n- **_handlePopupFocusOut(event)** - Close the dropdown if the focus moves outside the component.\n\n### **Slots:**\n - **before** - Optional content the appears before the option list\n- **after** - Optional content the appears after the option list",
+          "description": "\n---\n\n\n### **Methods:**\n - **_updateMenuItems(changed)** - Apply the current state to the menu items.\n- Set the active property when the value property has changed.\n- Hide menu items that do not match the filter.\n- **_getDisplayValue(): _String | nothing_** - Determines the value or label that should be displayed inside the toggle button.\n- **_isSelected(menuItemValue: _String_): _Boolean_** - Checks if the given value is selected.\n\n### **Slots:**\n - **before** - Optional content the appears before the option list\n- **after** - Optional content the appears after the option list",
           "doc-url": "",
           "attributes": [
             {

package/package.json

@@ -3,7 +3,7 @@
   "description": "UI component library of the canton of zurich",
   "license": "MIT",
   "author": "statistikzh",
-  "version": "0.14.0",
+  "version": "0.14.1",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -31,12 +31,12 @@
     "watch:css": "nodemon --watch 'src/styles/*' -e css --exec npm run build:css",
     "lint": "npm run lint:eslint && npm run lint:prettier",
     "lint:eslint": "eslint --ext .js,.mjs,.html . --ignore-path .gitignore ",
-    "lint:prettier": "prettier \"**/*.{js,mjs,md,html,json}\" --check",
+    "lint:prettier": "prettier \"**/*.{js,mjs,md,mdx,html,json}\" --check",
     "lint:stylelint": "stylelint \"**/*.{js,css}\" --ignore-path .gitignore",
     "lint:types": "tsc",
     "format": "npm run format:eslint && npm run format:prettier",
     "format:eslint": "eslint --ext .js,.mjs,.html . --fix --ignore-path .gitignore",
-    "format:prettier": "prettier \"**/*.{js,mjs,md,html,json}\" --write",
+    "format:prettier": "prettier \"**/*.{js,mjs,md,mdx,html,json}\" --write",
     "test": "web-test-runner --coverage",
     "test:watch": "web-test-runner --watch",
     "prepare": "husky",

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

@@ -2,7 +2,7 @@ import { html } from "lit"
 import "../[namespace]-[name].js"
 
 export default {
-  title: "[Name]",
+  title: "Components/[Name]",
   component: "[namespace]-[name]",
 }
 

package/src/components/accordion/Accordion.js

@@ -49,7 +49,7 @@ export class LeuAccordion extends LeuElement {
   _getHeadingTag() {
     let level = 2
     if (this.headingLevel > 0 && this.headingLevel < 7) {
-      level = this.headingLevel
+      level = Math.floor(this.headingLevel)
     }
 
     return `h${level}`

package/src/components/accordion/accordion.css

@@ -27,7 +27,7 @@
   width: 100%;
   background: none;
   padding: 1rem 0;
-  margin: none;
+  margin: 0;
   cursor: pointer;
 
   border: none;
@@ -114,6 +114,8 @@
 
 .contentwrapper[hidden] {
   grid-template-rows: 0fr;
+  opacity: 0;
+  visibility: hidden;
 }
 
 slot[name="content"] {
@@ -130,7 +132,6 @@ slot[name="content"] {
 }
 
 .divider {
-
   width: 100%;
   height: 1px;
   margin: 0;
@@ -138,7 +139,9 @@ slot[name="content"] {
   border: none;
   background-color: var(--divider-color);
 
-  transition: transform var(--transition), background-color var(--transition);
+  transition:
+    transform var(--transition),
+    background-color var(--transition);
 }
 
 :host(:not([open])) .heading:is(:hover, :focus-visible) ~ .divider {

package/src/components/accordion/stories/accordion.stories.js

@@ -4,10 +4,10 @@ import { ifDefined } from "lit/directives/if-defined.js"
 import "../leu-accordion.js"
 
 export default {
-  title: "Accordion",
+  title: "Components/Accordion",
   component: "leu-accordion",
   argTypes: {
-    headingLevel: {
+    "heading-level": {
       control: "select",
       options: [1, 2, 3, 4, 5, 6],
     },
@@ -27,9 +27,10 @@ export default {
 
 function Template(args) {
   return html` <leu-accordion
-    heading-level=${ifDefined(args.headingLevel)}
+    heading-level=${ifDefined(args["heading-level"])}
     label=${ifDefined(args.label)}
-    label-prefix=${ifDefined(args.labelPrefix)}
+    label-prefix=${ifDefined(args["label-prefix"])}
+    ?open=${args.open}
   >
     <div slot="content">${args.content}</div>
   </leu-accordion>`
@@ -37,7 +38,7 @@ function Template(args) {
 
 export const Regular = Template.bind({})
 Regular.args = {
-  headingLevel: 2,
+  "heading-level": 2,
   label:
     "Akkordeontitel der lang und noch länger werden kann und dann umbricht",
   content: `Regular Interessierte können ab sofort die Genauigkeit ihrer Smartphones
@@ -55,5 +56,5 @@ Regular.args = {
 export const Prefix = Template.bind({})
 Prefix.args = {
   ...Regular.args,
-  labelPrefix: "01",
+  "label-prefix": "01",
 }

package/src/components/button/stories/button.stories.js

@@ -16,7 +16,7 @@ function copyContent(e) {
 }
 
 export default {
-  title: "Button",
+  title: "Components/Button",
   component: "leu-button",
   parameters: {
     design: {

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

@@ -13,7 +13,7 @@ function updateStorybookArgss(id, args) {
 }
 
 export default {
-  title: "ButtonGroup",
+  title: "Components/ButtonGroup",
   component: "leu-button-group",
   parameters: {
     design: {

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

@@ -4,7 +4,7 @@ import "../leu-checkbox-group.js"
 import { ifDefined } from "lit/directives/if-defined.js"
 
 export default {
-  title: "Checkbox/Group",
+  title: "Components/Checkbox/Group",
   component: "leu-checkbox-group",
   argTypes: {
     legend: { control: "text" },

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

@@ -2,7 +2,7 @@ import { html } from "lit"
 import "../leu-checkbox.js"
 
 export default {
-  title: "Checkbox",
+  title: "Components/Checkbox",
   component: "leu-checkbox",
   argTypes: {
     label: {

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

@@ -11,7 +11,7 @@ import { SELECTION_MODES } from "../ChipGroup.js"
 import { VARIANTS as SELECTABLE_VARIANTS } from "../ChipSelectable.js"
 
 export default {
-  title: "Chip/Group",
+  title: "Components/Chip/Group",
   component: "leu-chip-group",
   argTypes: {
     selectionMode: {

package/src/components/chip/stories/chip-link.stories.js

@@ -6,7 +6,7 @@ import "../leu-chip-link.js"
 import { SIZES } from "../ChipLink.js"
 
 export default {
-  title: "Chip/Link",
+  title: "Components/Chip/Link",
   component: "leu-chip-link",
   argTypes: {
     size: { control: "select", options: Object.values(SIZES) },

package/src/components/chip/stories/chip-removable.stories.js

@@ -4,7 +4,7 @@ import { action } from "@storybook/addon-actions"
 import "../leu-chip-removable.js"
 
 export default {
-  title: "Chip/Removable",
+  title: "Components/Chip/Removable",
   component: "leu-chip-removable",
   args: {
     label: "Daten",