From 500a964ae8dedddc5eafe1247e20f4ef0209b103 Mon Sep 17 00:00:00 2001
From: angsherpa456 <ang.sherpa@accenture.com>
Date: Fri, 8 Mar 2024 13:10:31 +0100
Subject: [PATCH] fix(ui): camelCase to kebab-case (#970)

---
 packages/ui-library/.eslintrc.js              | 22 +++++++++++++
 .../src/components/button-group/index.ts      |  7 +++--
 .../src/components/button-icon/index.ts       |  7 +++--
 .../src/components/button-text/index.ts       |  7 +++--
 .../src/components/checkbox/index.ts          |  7 +++--
 .../src/components/counter/index.ts           |  7 +++--
 .../src/components/divider/index.ts           |  7 +++--
 .../components/form-caption-group/index.ts    |  7 +++--
 .../src/components/form-caption/index.ts      |  7 +++--
 .../components/form-label/index.stories.ts    |  4 +--
 .../src/components/form-label/index.test.ts   |  4 +--
 .../src/components/form-label/index.ts        |  7 +++--
 .../ui-library/src/components/icon/index.ts   |  7 +++--
 .../components/input-field-number/index.ts    |  7 +++--
 .../src/components/input-field-text/index.ts  |  9 +++---
 .../ui-library/src/components/loader/index.ts |  7 +++--
 .../src/components/radio-group/index.ts       |  7 +++--
 .../ui-library/src/components/radio/index.ts  |  7 +++--
 .../ui-library/src/components/select/index.ts |  8 +++--
 .../range-legend-slider/index.ts              |  7 +++--
 .../slider-single-value/range-slider/index.ts |  7 +++--
 .../range-legend-min-max-slider/index.ts      |  7 +++--
 .../range-min-max-slider/index.ts             |  7 +++--
 .../src/components/tab-bar/index.ts           |  7 +++--
 .../src/components/textarea/index.ts          |  7 +++--
 .../src/components/toggle-switch/index.ts     |  7 +++--
 .../src/components/tooltip-bubble/index.ts    |  7 +++--
 .../src/components/tooltip/index.ts           |  7 +++--
 .../src/utils/lit-element-custom.ts           | 31 +++++++++++++++++++
 .../typesafe-generic-component-renderer.ts    |  5 +--
 30 files changed, 162 insertions(+), 82 deletions(-)
 create mode 100644 packages/ui-library/src/utils/lit-element-custom.ts

diff --git a/packages/ui-library/.eslintrc.js b/packages/ui-library/.eslintrc.js
index 7983fcea6..a95c52f38 100644
--- a/packages/ui-library/.eslintrc.js
+++ b/packages/ui-library/.eslintrc.js
@@ -11,4 +11,26 @@ module.exports = {
   plugins: ['@typescript-eslint'],
   extends: ['../eslint-config-boiler'],
   ignorePatterns: ['types/', '*.svg', '*.scss', '*.css', '*.md', '*.config.mjs', '.*', 'webpack*.js'],
+  rules: {
+    'no-restricted-imports': [
+      'error',
+      {
+        patterns: [
+          {
+            group: ['lit'],
+            importNamePattern: 'LitElement',
+            message: `Don't use the default LitElement class. Import from /utils/lit-element-custom instead`,
+          },
+        ],
+      },
+    ],
+  },
+  overrides: [
+    {
+      files: ['src/utils/lit-element-custom.ts'],
+      rules: {
+        'no-restricted-imports': 'off',
+      },
+    },
+  ],
 };
diff --git a/packages/ui-library/src/components/button-group/index.ts b/packages/ui-library/src/components/button-group/index.ts
index 13a5f0012..3083e82ee 100644
--- a/packages/ui-library/src/components/button-group/index.ts
+++ b/packages/ui-library/src/components/button-group/index.ts
@@ -1,12 +1,13 @@
-import { LitElement, html } from 'lit';
+import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { styleCustom } from './index.css';
 import { ButtonGroupAlignmentType, ButtonGroupSizesType } from '../../globals/types';
 
 import { TAG_NAME } from './renderFunction';
+import { LitElementCustom } from '../../utils/lit-element-custom';
 
-export class BlrButtonGroup extends LitElement {
+export class BlrButtonGroup extends LitElementCustom {
   static styles = [styleCustom];
 
   @property() sizeVariant: ButtonGroupSizesType = 'md';
@@ -31,4 +32,4 @@ if (!customElements.get(TAG_NAME)) {
   customElements.define(TAG_NAME, BlrButtonGroup);
 }
 
-export type BlrButtonGroupType = Omit<BlrButtonGroup, keyof LitElement>;
+export type BlrButtonGroupType = Omit<BlrButtonGroup, keyof LitElementCustom>;
diff --git a/packages/ui-library/src/components/button-icon/index.ts b/packages/ui-library/src/components/button-icon/index.ts
index 2d0ffd6cc..9fc8c78f8 100644
--- a/packages/ui-library/src/components/button-icon/index.ts
+++ b/packages/ui-library/src/components/button-icon/index.ts
@@ -1,5 +1,5 @@
 /* eslint-disable no-console */
-import { LitElement, html, nothing } from 'lit';
+import { html, nothing } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { property, state } from 'lit/decorators.js';
 import { SizelessIconType } from '@boiler/icons';
@@ -21,6 +21,7 @@ import {
   createBlrClickEvent,
   createBlrFocusEvent,
 } from '../../globals/events';
+import { LitElementCustom } from '../../utils/lit-element-custom';
 
 export type BlrButtonIconEventHandlers = {
   blrFocus?: (event: BlrFocusEvent) => void;
@@ -33,7 +34,7 @@ export type BlrButtonIconEventHandlers = {
  * @fires blrBlur Button lost focus
  * @fires blrClick Button was clicked
  */
-export class BlrButtonIcon extends LitElement {
+export class BlrButtonIcon extends LitElementCustom {
   static styles = [styleCustom];
 
   @property() arialabel!: string;
@@ -150,4 +151,4 @@ if (!customElements.get(TAG_NAME)) {
   customElements.define(TAG_NAME, BlrButtonIcon);
 }
 
-export type BlrButtonIconType = Omit<BlrButtonIcon, keyof LitElement> & BlrButtonIconEventHandlers;
+export type BlrButtonIconType = Omit<BlrButtonIcon, keyof LitElementCustom> & BlrButtonIconEventHandlers;
diff --git a/packages/ui-library/src/components/button-text/index.ts b/packages/ui-library/src/components/button-text/index.ts
index 6b5d59f55..b2628a19f 100644
--- a/packages/ui-library/src/components/button-text/index.ts
+++ b/packages/ui-library/src/components/button-text/index.ts
@@ -1,4 +1,4 @@
-import { LitElement, html, nothing } from 'lit';
+import { html, nothing } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { property, state } from 'lit/decorators.js';
 import { SizelessIconType } from '@boiler/icons';
@@ -27,6 +27,7 @@ import {
   createBlrClickEvent,
   createBlrFocusEvent,
 } from '../../globals/events';
+import { LitElementCustom } from '../../utils/lit-element-custom';
 
 export type BlrButtonTextEventHandlers = {
   blrFocus?: (event: BlrFocusEvent) => void;
@@ -39,7 +40,7 @@ export type BlrButtonTextEventHandlers = {
  * @fires blrBlur Button lost focus
  * @fires blrClick Button was clicked
  */
-export class BlrButtonText extends LitElement {
+export class BlrButtonText extends LitElementCustom {
   static styles = [styleCustom];
 
   @property() label = 'Button Label';
@@ -188,4 +189,4 @@ if (!customElements.get(TAG_NAME)) {
   customElements.define(TAG_NAME, BlrButtonText);
 }
 
-export type BlrButtonTextType = Omit<BlrButtonText, keyof LitElement> & BlrButtonTextEventHandlers;
+export type BlrButtonTextType = Omit<BlrButtonText, keyof LitElementCustom> & BlrButtonTextEventHandlers;
diff --git a/packages/ui-library/src/components/checkbox/index.ts b/packages/ui-library/src/components/checkbox/index.ts
index 5551e92c7..e8429685b 100644
--- a/packages/ui-library/src/components/checkbox/index.ts
+++ b/packages/ui-library/src/components/checkbox/index.ts
@@ -1,4 +1,4 @@
-import { LitElement, html, nothing } from 'lit';
+import { html, nothing } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { TAG_NAME } from './renderFunction';
@@ -21,6 +21,7 @@ import {
   createBlrBlurEvent,
   createBlrFocusEvent,
 } from '../../globals/events';
+import { LitElementCustom } from '../../utils/lit-element-custom';
 
 export type BlrCheckboxEventHandlers = {
   blrFocus?: (event: BlrFocusEvent) => void;
@@ -33,7 +34,7 @@ export type BlrCheckboxEventHandlers = {
  * @fires blrBlur Checkbox lost focus
  * @fires blrCheckedChange Checkbox state changed (event.checkState)
  */
-export class BlrCheckbox extends LitElement {
+export class BlrCheckbox extends LitElementCustom {
   static styles = [];
 
   @query('input')
@@ -316,4 +317,4 @@ if (!customElements.get(TAG_NAME)) {
   customElements.define(TAG_NAME, BlrCheckbox);
 }
 
-export type BlrCheckboxType = Omit<BlrCheckbox, keyof LitElement> & BlrCheckboxEventHandlers;
+export type BlrCheckboxType = Omit<BlrCheckbox, keyof LitElementCustom> & BlrCheckboxEventHandlers;
diff --git a/packages/ui-library/src/components/counter/index.ts b/packages/ui-library/src/components/counter/index.ts
index c791a25a4..96e98a2db 100644
--- a/packages/ui-library/src/components/counter/index.ts
+++ b/packages/ui-library/src/components/counter/index.ts
@@ -1,12 +1,13 @@
-import { LitElement, html } from 'lit';
+import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { CounterVariantType, FormSizesType } from '../../globals/types';
 import { ThemeType } from '../../foundation/_tokens-generated/index.themes';
 import { counterLight, counterDark } from './index.css';
 import { TAG_NAME } from './renderFunction';
+import { LitElementCustom } from '../../utils/lit-element-custom';
 
-export class BlrCounter extends LitElement {
+export class BlrCounter extends LitElementCustom {
   static styles = [];
 
   @property() variant: CounterVariantType = 'neutral';
@@ -39,4 +40,4 @@ if (!customElements.get(TAG_NAME)) {
   customElements.define(TAG_NAME, BlrCounter);
 }
 
-export type BlrCounterType = Omit<BlrCounter, keyof LitElement>;
+export type BlrCounterType = Omit<BlrCounter, keyof LitElementCustom>;
diff --git a/packages/ui-library/src/components/divider/index.ts b/packages/ui-library/src/components/divider/index.ts
index 1f33d41b8..b4bc22a33 100644
--- a/packages/ui-library/src/components/divider/index.ts
+++ b/packages/ui-library/src/components/divider/index.ts
@@ -1,12 +1,13 @@
-import { LitElement, html } from 'lit';
+import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { dividerDark, dividerLight } from './index.css';
 import { TAG_NAME } from './renderFunction';
 import { ThemeType } from '../../foundation/_tokens-generated/index.themes';
 import { DividerVariationTypes } from '../../globals/types';
+import { LitElementCustom } from '../../utils/lit-element-custom';
 
-export class BlrDivider extends LitElement {
+export class BlrDivider extends LitElementCustom {
   @property() direction: DividerVariationTypes = 'vertical';
   @property() theme: ThemeType = 'Light';
 
@@ -31,4 +32,4 @@ if (!customElements.get(TAG_NAME)) {
   customElements.define(TAG_NAME, BlrDivider);
 }
 
-export type BlrDividerType = Omit<BlrDivider, keyof LitElement>;
+export type BlrDividerType = Omit<BlrDivider, keyof LitElementCustom>;
diff --git a/packages/ui-library/src/components/form-caption-group/index.ts b/packages/ui-library/src/components/form-caption-group/index.ts
index 02fac6e78..f84a4f238 100644
--- a/packages/ui-library/src/components/form-caption-group/index.ts
+++ b/packages/ui-library/src/components/form-caption-group/index.ts
@@ -1,4 +1,4 @@
-import { html, LitElement } from 'lit';
+import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 
 import { FormSizesType } from '../../globals/types';
@@ -6,8 +6,9 @@ import { classMap } from 'lit/directives/class-map.js';
 import { formCaptionGroupStyle } from './index.css';
 
 import { TAG_NAME } from './renderFunction';
+import { LitElementCustom } from '../../utils/lit-element-custom';
 
-export class BlrFormCaptionGroup extends LitElement {
+export class BlrFormCaptionGroup extends LitElementCustom {
   static styles = [formCaptionGroupStyle];
 
   @property() sizeVariant: FormSizesType = 'md';
@@ -30,4 +31,4 @@ if (!customElements.get(TAG_NAME)) {
   customElements.define(TAG_NAME, BlrFormCaptionGroup);
 }
 
-export type BlrFormCaptionGroupType = Omit<BlrFormCaptionGroup, keyof LitElement>;
+export type BlrFormCaptionGroupType = Omit<BlrFormCaptionGroup, keyof LitElementCustom>;
diff --git a/packages/ui-library/src/components/form-caption/index.ts b/packages/ui-library/src/components/form-caption/index.ts
index 389cf79b6..7c5faad6d 100644
--- a/packages/ui-library/src/components/form-caption/index.ts
+++ b/packages/ui-library/src/components/form-caption/index.ts
@@ -1,4 +1,4 @@
-import { LitElement, TemplateResult, html, nothing } from 'lit';
+import { TemplateResult, html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { TAG_NAME } from './renderFunction';
@@ -9,8 +9,9 @@ import { CaptionVariantType, FormSizesType, SizesType } from '../../globals/type
 import { calculateIconName } from '../../utils/calculate-icon-name';
 import { getComponentConfigToken } from '../../utils/get-component-config-token';
 import { BlrIconRenderFunction } from '../icon/renderFunction';
+import { LitElementCustom } from '../../utils/lit-element-custom';
 
-export class BlrFormCaption extends LitElement {
+export class BlrFormCaption extends LitElementCustom {
   static styles = [];
 
   @property() message?: string;
@@ -75,4 +76,4 @@ if (!customElements.get(TAG_NAME)) {
   customElements.define(TAG_NAME, BlrFormCaption);
 }
 
-export type BlrFormCaptionType = Omit<BlrFormCaption, keyof LitElement>;
+export type BlrFormCaptionType = Omit<BlrFormCaption, keyof LitElementCustom>;
diff --git a/packages/ui-library/src/components/form-label/index.stories.ts b/packages/ui-library/src/components/form-label/index.stories.ts
index c2a4386ee..e0e251901 100644
--- a/packages/ui-library/src/components/form-label/index.stories.ts
+++ b/packages/ui-library/src/components/form-label/index.stories.ts
@@ -4,9 +4,9 @@ import { FormSizes } from '../../globals/constants';
 import { BlrFormLabelType } from './index';
 import { BlrFormLabelRenderFunction } from './renderFunction';
 import { html } from 'lit-html';
-import { LitElement } from 'lit';
 import { genericBlrComponentRenderer } from '../../utils/typesafe-generic-component-renderer';
 import '../../index';
+import { LitElementCustom } from '../../utils/lit-element-custom';
 
 const sharedStyles = html`
   <style>
@@ -107,7 +107,7 @@ export default {
 
 // The label is not creating a shadow root itself, but errors if it is outside
 // of one. Thus, we're creating a helper component for the stories, that wraps it.
-class WrappedBlrLabel extends LitElement {
+class WrappedBlrLabel extends LitElementCustom {
   labelProps: BlrFormLabelType;
 
   protected render() {
diff --git a/packages/ui-library/src/components/form-label/index.test.ts b/packages/ui-library/src/components/form-label/index.test.ts
index 1f4490b6b..d742cd0da 100644
--- a/packages/ui-library/src/components/form-label/index.test.ts
+++ b/packages/ui-library/src/components/form-label/index.test.ts
@@ -5,7 +5,7 @@ import type { BlrFormLabel, BlrFormLabelType } from '.';
 import { fixture, expect } from '@open-wc/testing';
 import { querySelectorDeep } from 'query-selector-shadow-dom';
 import { genericBlrComponentRenderer } from '../../utils/typesafe-generic-component-renderer';
-import { LitElement } from 'lit';
+import { LitElementCustom } from '../../utils/lit-element-custom';
 
 const sampleParams: BlrFormLabelType = {
   theme: 'Light',
@@ -17,7 +17,7 @@ const sampleParams: BlrFormLabelType = {
 
 // The label is not creating a shadow root itself, but errors if it is outside
 // of one. Thus, we're creating a helper component for the stories, that wraps it.
-class WrappedBlrLabel extends LitElement {
+class WrappedBlrLabel extends LitElementCustom {
   labelProps: BlrFormLabelType;
 
   protected render() {
diff --git a/packages/ui-library/src/components/form-label/index.ts b/packages/ui-library/src/components/form-label/index.ts
index 2da49f01c..cbc7fc6ae 100644
--- a/packages/ui-library/src/components/form-label/index.ts
+++ b/packages/ui-library/src/components/form-label/index.ts
@@ -1,12 +1,13 @@
-import { LitElement, html, nothing } from 'lit';
+import { html, nothing } from 'lit';
 import { TAG_NAME } from './renderFunction';
 import { classMap } from 'lit-html/directives/class-map.js';
 import { property } from 'lit/decorators.js';
 import { ThemeType } from '../../foundation/_tokens-generated/index.themes';
 import { formLight, formDark } from '../../foundation/semantic-tokens/form.css';
 import { InputSizesType } from '../../globals/types';
+import { LitElementCustom } from '../../utils/lit-element-custom';
 
-export class BlrFormLabel extends LitElement {
+export class BlrFormLabel extends LitElementCustom {
   static styles = [];
 
   @property() label = '';
@@ -71,4 +72,4 @@ if (!customElements.get(TAG_NAME)) {
   customElements.define(TAG_NAME, BlrFormLabel);
 }
 
-export type BlrFormLabelType = Omit<BlrFormLabel, keyof LitElement | 'createRenderRoot' | 'error'>;
+export type BlrFormLabelType = Omit<BlrFormLabel, keyof LitElementCustom | 'createRenderRoot' | 'error'>;
diff --git a/packages/ui-library/src/components/icon/index.ts b/packages/ui-library/src/components/icon/index.ts
index 801bf2702..a9cbeb847 100644
--- a/packages/ui-library/src/components/icon/index.ts
+++ b/packages/ui-library/src/components/icon/index.ts
@@ -1,4 +1,4 @@
-import { LitElement, html } from 'lit';
+import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { IconMapping, IconType } from '@boiler/icons';
 import { styleCustom } from './index.css';
@@ -10,6 +10,7 @@ import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';
 import { TAG_NAME } from './renderFunction';
 import { ThemeType } from '../../foundation/_tokens-generated/index.themes';
 import { BlrClickEvent, createBlrClickEvent } from '../../globals/events';
+import { LitElementCustom } from '../../utils/lit-element-custom';
 
 export type BlrIconEventHandlers = {
   blrClick?: (event: BlrClickEvent) => void;
@@ -18,7 +19,7 @@ export type BlrIconEventHandlers = {
 /**
  * @fires blrClick Icon was clicked
  */
-export class BlrIcon extends LitElement {
+export class BlrIcon extends LitElementCustom {
   static styles = [styleCustom];
 
   @property() icon: IconType = 'blr360Xs';
@@ -77,4 +78,4 @@ if (!customElements.get(TAG_NAME)) {
   customElements.define(TAG_NAME, BlrIcon);
 }
 
-export type BlrIconType = Partial<Omit<BlrIcon, keyof LitElement>> & BlrIconEventHandlers;
+export type BlrIconType = Partial<Omit<BlrIcon, keyof LitElementCustom>> & BlrIconEventHandlers;
diff --git a/packages/ui-library/src/components/input-field-number/index.ts b/packages/ui-library/src/components/input-field-number/index.ts
index ad9490e5e..7ca9aafdd 100644
--- a/packages/ui-library/src/components/input-field-number/index.ts
+++ b/packages/ui-library/src/components/input-field-number/index.ts
@@ -1,4 +1,4 @@
-import { LitElement, TemplateResult, html, nothing } from 'lit';
+import { TemplateResult, html, nothing } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { baseStyle, wrapperLight, wrapperDark, StepperComboDark, StepperComboLight } from './index.css';
 import { classMap } from 'lit-html/directives/class-map.js';
@@ -26,6 +26,7 @@ import {
   createBlrNumberValueChangeEvent,
   createBlrSelectEvent,
 } from '../../globals/events';
+import { LitElementCustom } from '../../utils/lit-element-custom';
 
 export type BlrNumberInputEventListeners = {
   blrFocus?: (event: BlrFocusEvent) => void;
@@ -42,7 +43,7 @@ export type BlrNumberInputEventListeners = {
  * @fires blrSelect Text in NumberInput was selected
  * @fires blrNumberStepperClick Step button was clicked
  */
-export class BlrInputFieldNumber extends LitElement {
+export class BlrInputFieldNumber extends LitElementCustom {
   static styles = [baseStyle];
 
   @query('input')
@@ -353,4 +354,4 @@ if (!customElements.get(TAG_NAME)) {
   customElements.define(TAG_NAME, BlrInputFieldNumber);
 }
 
-export type BlrInputFieldNumberType = Omit<BlrInputFieldNumber, keyof LitElement> & BlrNumberInputEventListeners;
+export type BlrInputFieldNumberType = Omit<BlrInputFieldNumber, keyof LitElementCustom> & BlrNumberInputEventListeners;
diff --git a/packages/ui-library/src/components/input-field-text/index.ts b/packages/ui-library/src/components/input-field-text/index.ts
index 4f27b40c4..5784eceba 100644
--- a/packages/ui-library/src/components/input-field-text/index.ts
+++ b/packages/ui-library/src/components/input-field-text/index.ts
@@ -1,4 +1,4 @@
-import { LitElement, html, nothing } from 'lit';
+import { html, nothing } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { property, state } from 'lit/decorators.js';
 import { styleCustom } from './index.css';
@@ -24,6 +24,7 @@ import {
   createBlrSelectEvent,
   createBlrTextValueChangeEvent,
 } from '../../globals/events';
+import { LitElementCustom } from '../../utils/lit-element-custom';
 
 export type BlrInputFieldTextEventHandlers = {
   blrFocus?: (event: BlrFocusEvent) => void;
@@ -38,7 +39,7 @@ export type BlrInputFieldTextEventHandlers = {
  * @fires blrTextValueChange InputFieldText value changed
  * @fires blrSelect Text in InputFieldText got selected
  */
-export class BlrInputFieldText extends LitElement {
+export class BlrInputFieldText extends LitElementCustom {
   static styles = [styleCustom];
 
   @property() inputFieldTextId!: string;
@@ -197,7 +198,7 @@ export class BlrInputFieldText extends LitElement {
                 @focus=${this.handleFocus}
                 maxlength="${this.maxLength}"
                 pattern="${this.pattern}"
-                hasError="${this.hasError}"
+                has-Error="${this.hasError}"
                 @select=${this.handleSelect}
               />
             </div>
@@ -250,4 +251,4 @@ if (!customElements.get(TAG_NAME)) {
   customElements.define(TAG_NAME, BlrInputFieldText);
 }
 
-export type BlrInputFieldTextType = Omit<BlrInputFieldText, keyof LitElement> & BlrInputFieldTextEventHandlers;
+export type BlrInputFieldTextType = Omit<BlrInputFieldText, keyof LitElementCustom> & BlrInputFieldTextEventHandlers;
diff --git a/packages/ui-library/src/components/loader/index.ts b/packages/ui-library/src/components/loader/index.ts
index 904b01fd0..385c2bee1 100644
--- a/packages/ui-library/src/components/loader/index.ts
+++ b/packages/ui-library/src/components/loader/index.ts
@@ -1,4 +1,4 @@
-import { LitElement, html } from 'lit';
+import { html } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { property } from 'lit/decorators.js';
 import { styleCustomLight, styleCustomDark } from './index.css';
@@ -6,8 +6,9 @@ import { styleCustomLight, styleCustomDark } from './index.css';
 import { TAG_NAME } from './renderFunction';
 import { ThemeType } from '../../foundation/_tokens-generated/index.themes';
 import { ActionSizesType, FeedbackVariantType } from '../../globals/types';
+import { LitElementCustom } from '../../utils/lit-element-custom';
 
-export class BlrLoader extends LitElement {
+export class BlrLoader extends LitElementCustom {
   static styles = [];
 
   @property() sizeVariant?: ActionSizesType = 'md';
@@ -38,4 +39,4 @@ if (!customElements.get(TAG_NAME)) {
   customElements.define(TAG_NAME, BlrLoader);
 }
 
-export type BlrLoaderType = Omit<BlrLoader, keyof LitElement>;
+export type BlrLoaderType = Omit<BlrLoader, keyof LitElementCustom>;
diff --git a/packages/ui-library/src/components/radio-group/index.ts b/packages/ui-library/src/components/radio-group/index.ts
index 841c4b22d..0ef1ac79b 100644
--- a/packages/ui-library/src/components/radio-group/index.ts
+++ b/packages/ui-library/src/components/radio-group/index.ts
@@ -1,4 +1,4 @@
-import { LitElement, html, nothing } from 'lit';
+import { html, nothing } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { property } from 'lit/decorators.js';
 import { styleCustom } from './index.css';
@@ -11,8 +11,9 @@ import { BlrFormCaptionGroupRenderFunction } from '../form-caption-group/renderF
 import { BlrFormCaptionRenderFunction } from '../form-caption/renderFunction';
 import { BlrFormLabelInlineRenderFunction } from '../form-label/form-label-inline/renderFunction';
 import { TAG_NAME } from './renderFunction';
+import { LitElementCustom } from '../../utils/lit-element-custom';
 
-export class BlrRadioGroup extends LitElement {
+export class BlrRadioGroup extends LitElementCustom {
   static styles = [styleCustom];
 
   @property() disabled?: boolean;
@@ -142,4 +143,4 @@ if (!customElements.get(TAG_NAME)) {
   customElements.define(TAG_NAME, BlrRadioGroup);
 }
 
-export type BlrRadioGroupType = Omit<BlrRadioGroup, keyof LitElement>;
+export type BlrRadioGroupType = Omit<BlrRadioGroup, keyof LitElementCustom>;
diff --git a/packages/ui-library/src/components/radio/index.ts b/packages/ui-library/src/components/radio/index.ts
index 7f96699ed..f0ebd0964 100644
--- a/packages/ui-library/src/components/radio/index.ts
+++ b/packages/ui-library/src/components/radio/index.ts
@@ -1,4 +1,4 @@
-import { LitElement, html, nothing } from 'lit';
+import { html, nothing } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { property } from 'lit/decorators.js';
 import { styleCustom } from './index.css';
@@ -11,8 +11,9 @@ import { ThemeType } from '../../foundation/_tokens-generated/index.themes';
 import { BlrFormCaptionGroupRenderFunction } from '../form-caption-group/renderFunction';
 import { BlrFormCaptionRenderFunction } from '../form-caption/renderFunction';
 import { BlrFormLabelInlineRenderFunction } from '../form-label/form-label-inline/renderFunction';
+import { LitElementCustom } from '../../utils/lit-element-custom';
 
-export class BlrRadio extends LitElement {
+export class BlrRadio extends LitElementCustom {
   static styles = [styleCustom];
 
   @property() optionId!: string;
@@ -115,4 +116,4 @@ if (!customElements.get(TAG_NAME)) {
   customElements.define(TAG_NAME, BlrRadio);
 }
 
-export type BlrRadioType = Omit<BlrRadio, keyof LitElement>;
+export type BlrRadioType = Omit<BlrRadio, keyof LitElementCustom>;
diff --git a/packages/ui-library/src/components/select/index.ts b/packages/ui-library/src/components/select/index.ts
index da3645b03..3d0cd593c 100644
--- a/packages/ui-library/src/components/select/index.ts
+++ b/packages/ui-library/src/components/select/index.ts
@@ -1,4 +1,4 @@
-import { LitElement, html, nothing } from 'lit';
+import { html, nothing } from 'lit';
 import { ClassMapDirective, classMap } from 'lit/directives/class-map.js';
 import { property, state } from 'lit/decorators.js';
 import { styleCustom } from './index.css';
@@ -24,6 +24,8 @@ import {
   createBlrSelectedValueChangeEvent,
 } from '../../globals/events';
 
+import { LitElementCustom } from '../../utils/lit-element-custom';
+
 export type BlrSelectEventHandlers = {
   blrSelectedValueChange?: (event: BlrSelectedValueChangeEvent) => void;
   blrFocus?: (event: BlrFocusEvent) => void;
@@ -35,7 +37,7 @@ export type BlrSelectEventHandlers = {
  * @fires blrFocus Select received focus
  * @fires blrBlur Select lost focus
  */
-export class BlrSelect extends LitElement {
+export class BlrSelect extends LitElementCustom {
   static styles = [styleCustom];
 
   @property() arialabel?: string;
@@ -230,4 +232,4 @@ if (!customElements.get(TAG_NAME)) {
   customElements.define(TAG_NAME, BlrSelect);
 }
 
-export type BlrSelectType = Omit<BlrSelect, keyof LitElement> & BlrSelectEventHandlers;
+export type BlrSelectType = Omit<BlrSelect, keyof LitElementCustom> & BlrSelectEventHandlers;
diff --git a/packages/ui-library/src/components/slider-single-value/range-legend-slider/index.ts b/packages/ui-library/src/components/slider-single-value/range-legend-slider/index.ts
index 3096965a5..7f99000d4 100644
--- a/packages/ui-library/src/components/slider-single-value/range-legend-slider/index.ts
+++ b/packages/ui-library/src/components/slider-single-value/range-legend-slider/index.ts
@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
-import { LitElement, html, nothing } from 'lit';
+import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { map } from 'lit/directives/map.js';
@@ -12,8 +12,9 @@ import { sliderLight, sliderDark } from '../../../foundation/component-tokens/sl
 import { FormSizesType, ActionVariantType, RenderBtnProps } from '../../../globals/types';
 import { setOnclickValue, findToolTipPosition } from '../../../utils/range-slider-utils';
 import { BlrButtonIconRenderFunction } from '../../button-icon/renderFunction';
+import { LitElementCustom } from '../../../utils/lit-element-custom';
 
-export class BlrRangeLegendSlider extends LitElement {
+export class BlrRangeLegendSlider extends LitElementCustom {
   static styles = [styleCustom];
 
   @property() onClickMinMax?: (param: number) => void;
@@ -176,4 +177,4 @@ if (!customElements.get(TAG_NAME)) {
   customElements.define(TAG_NAME, BlrRangeLegendSlider);
 }
 
-export type BlrRangeLegendSliderType = Omit<BlrRangeLegendSlider, keyof LitElement>;
+export type BlrRangeLegendSliderType = Omit<BlrRangeLegendSlider, keyof LitElementCustom>;
diff --git a/packages/ui-library/src/components/slider-single-value/range-slider/index.ts b/packages/ui-library/src/components/slider-single-value/range-slider/index.ts
index 18bb6bee1..9ab9f4e25 100644
--- a/packages/ui-library/src/components/slider-single-value/range-slider/index.ts
+++ b/packages/ui-library/src/components/slider-single-value/range-slider/index.ts
@@ -1,4 +1,4 @@
-import { LitElement, html, nothing } from 'lit';
+import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { styleCustom } from './index.css';
@@ -10,8 +10,9 @@ import { SizelessIconType } from '@boiler/icons';
 import { ThemeType } from '../../../foundation/_tokens-generated/index.themes';
 import { findPercentage, generateRangeBar, setOnclickValue, findNearestValue } from '../../../utils/range-slider-utils';
 import { BlrButtonIconRenderFunction } from '../../button-icon/renderFunction';
+import { LitElementCustom } from '../../../utils/lit-element-custom';
 
-export class BlrRangeSlider extends LitElement {
+export class BlrRangeSlider extends LitElementCustom {
   static styles = [styleCustom];
 
   @property() onClickMinMax?: (param: number) => void;
@@ -146,4 +147,4 @@ if (!customElements.get(TAG_NAME)) {
   customElements.define(TAG_NAME, BlrRangeSlider);
 }
 
-export type BlrRangeSliderType = Omit<BlrRangeSlider, keyof LitElement>;
+export type BlrRangeSliderType = Omit<BlrRangeSlider, keyof LitElementCustom>;
diff --git a/packages/ui-library/src/components/slider-two-values/range-legend-min-max-slider/index.ts b/packages/ui-library/src/components/slider-two-values/range-legend-min-max-slider/index.ts
index 7191e093d..99422114d 100644
--- a/packages/ui-library/src/components/slider-two-values/range-legend-min-max-slider/index.ts
+++ b/packages/ui-library/src/components/slider-two-values/range-legend-min-max-slider/index.ts
@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
-import { LitElement, html, nothing } from 'lit';
+import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { map } from 'lit/directives/map.js';
@@ -11,8 +11,9 @@ import { sliderLight, sliderDark } from '../../../foundation/component-tokens/sl
 import { FormSizesType, ActionVariantType, RenderBtnProps } from '../../../globals/types';
 import { setOnclickValue, findToolTipPosition } from '../../../utils/range-slider-utils';
 import { BlrButtonIconRenderFunction } from '../../button-icon/renderFunction';
+import { LitElementCustom } from '../../../utils/lit-element-custom';
 
-export class BlrRangeLegendMinMaxSlider extends LitElement {
+export class BlrRangeLegendMinMaxSlider extends LitElementCustom {
   static styles = [styleCustom];
 
   @property() onBtnClick?: (min: number, max: number) => void;
@@ -231,4 +232,4 @@ if (!customElements.get(TAG_NAME)) {
   customElements.define(TAG_NAME, BlrRangeLegendMinMaxSlider);
 }
 
-export type BlrRangeLegendMinMaxSliderType = Omit<BlrRangeLegendMinMaxSlider, keyof LitElement>;
+export type BlrRangeLegendMinMaxSliderType = Omit<BlrRangeLegendMinMaxSlider, keyof LitElementCustom>;
diff --git a/packages/ui-library/src/components/slider-two-values/range-min-max-slider/index.ts b/packages/ui-library/src/components/slider-two-values/range-min-max-slider/index.ts
index c5e5508a5..bfc72644c 100644
--- a/packages/ui-library/src/components/slider-two-values/range-min-max-slider/index.ts
+++ b/packages/ui-library/src/components/slider-two-values/range-min-max-slider/index.ts
@@ -1,4 +1,4 @@
-import { LitElement, html, nothing } from 'lit';
+import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { styleCustom } from './index.css';
@@ -9,8 +9,9 @@ import { sliderLight, sliderDark } from '../../../foundation/component-tokens/sl
 import { FormSizesType, ActionVariantType, RenderBtnProps } from '../../../globals/types';
 import { findPercentage, generateRangeBar, findNearestValue, setOnclickValue } from '../../../utils/range-slider-utils';
 import { BlrButtonIconRenderFunction } from '../../button-icon/renderFunction';
+import { LitElementCustom } from '../../../utils/lit-element-custom';
 
-export class BlrRangeMinMaxSlider extends LitElement {
+export class BlrRangeMinMaxSlider extends LitElementCustom {
   static styles = [styleCustom];
 
   @property() onBtnClick?: (min: number, max: number) => void;
@@ -211,4 +212,4 @@ if (!customElements.get(TAG_NAME)) {
   customElements.define(TAG_NAME, BlrRangeMinMaxSlider);
 }
 
-export type BlrRangeMinMaxSliderType = Omit<BlrRangeMinMaxSlider, keyof LitElement>;
+export type BlrRangeMinMaxSliderType = Omit<BlrRangeMinMaxSlider, keyof LitElementCustom>;
diff --git a/packages/ui-library/src/components/tab-bar/index.ts b/packages/ui-library/src/components/tab-bar/index.ts
index 230527b09..c6e8feee8 100644
--- a/packages/ui-library/src/components/tab-bar/index.ts
+++ b/packages/ui-library/src/components/tab-bar/index.ts
@@ -1,5 +1,5 @@
 /* eslint-disable lit/binding-positions */
-import { LitElement, html, nothing } from 'lit';
+import { html, nothing } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { property, query, queryAll, state } from 'lit/decorators.js';
 import { styleCustom, tabBarDark, tabBarLight } from './index.css';
@@ -22,8 +22,9 @@ import { getComponentConfigToken } from '../../utils/get-component-config-token'
 import { BlrDividerRenderFunction } from '../divider/renderFunction';
 import { BlrIconRenderFunction } from '../icon/renderFunction';
 import { formLight, formDark } from '../../foundation/semantic-tokens/form.css';
+import { LitElementCustom } from '../../utils/lit-element-custom';
 
-export class BlrTabBar extends LitElement {
+export class BlrTabBar extends LitElementCustom {
   static styles = [styleCustom];
 
   @query('.blr-tab-bar')
@@ -250,4 +251,4 @@ if (!customElements.get(TAG_NAME)) {
   customElements.define(TAG_NAME, BlrTabBar);
 }
 
-export type BlrTabBarType = Omit<BlrTabBar, keyof LitElement>;
+export type BlrTabBarType = Omit<BlrTabBar, keyof LitElementCustom>;
diff --git a/packages/ui-library/src/components/textarea/index.ts b/packages/ui-library/src/components/textarea/index.ts
index 707f99bc7..23e400e7e 100644
--- a/packages/ui-library/src/components/textarea/index.ts
+++ b/packages/ui-library/src/components/textarea/index.ts
@@ -1,4 +1,4 @@
-import { LitElement, html, nothing } from 'lit';
+import { html, nothing } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { property, query, state } from 'lit/decorators.js';
@@ -22,6 +22,7 @@ import {
   createBlrSelectEvent,
   createBlrTextValueChangeEvent,
 } from '../../globals/events';
+import { LitElementCustom } from '../../utils/lit-element-custom';
 
 export type BlrTextareaEventHandlers = {
   blrFocus?: (event: BlrFocusEvent) => void;
@@ -36,7 +37,7 @@ export type BlrTextareaEventHandlers = {
  * @fires blrTextValueChange Textarea value changed
  * @fires blrSelect Text in Textarea got selected
  */
-export class BlrTextarea extends LitElement {
+export class BlrTextarea extends LitElementCustom {
   static styles = [styleCustom];
 
   @property() textAreaId!: string;
@@ -254,4 +255,4 @@ if (!customElements.get(TAG_NAME)) {
   customElements.define(TAG_NAME, BlrTextarea);
 }
 
-export type BlrTextareaType = Omit<BlrTextarea, keyof LitElement> & BlrTextareaEventHandlers;
+export type BlrTextareaType = Omit<BlrTextarea, keyof LitElementCustom> & BlrTextareaEventHandlers;
diff --git a/packages/ui-library/src/components/toggle-switch/index.ts b/packages/ui-library/src/components/toggle-switch/index.ts
index 7052e26fe..3c1f85d26 100644
--- a/packages/ui-library/src/components/toggle-switch/index.ts
+++ b/packages/ui-library/src/components/toggle-switch/index.ts
@@ -1,4 +1,4 @@
-import { LitElement, html, nothing } from 'lit';
+import { html, nothing } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { SizelessIconType } from '@boiler/icons';
@@ -12,8 +12,9 @@ import { FormSizesType, IconPositionVariant } from '../../globals/types';
 import { BlrFormCaptionRenderFunction } from '../form-caption/renderFunction';
 import { BlrFormLabelInlineRenderFunction } from '../form-label/form-label-inline/renderFunction';
 import { styleCustom, toggleSwitchLight, toggleSwitchDark } from './index.css';
+import { LitElementCustom } from '../../utils/lit-element-custom';
 
-export class BlrToggleSwitch extends LitElement {
+export class BlrToggleSwitch extends LitElementCustom {
   static styles = [styleCustom];
 
   @query('input')
@@ -256,4 +257,4 @@ if (!customElements.get(TAG_NAME)) {
   customElements.define(TAG_NAME, BlrToggleSwitch);
 }
 
-export type BlrToggleSwitchType = Omit<BlrToggleSwitch, keyof LitElement>;
+export type BlrToggleSwitchType = Omit<BlrToggleSwitch, keyof LitElementCustom>;
diff --git a/packages/ui-library/src/components/tooltip-bubble/index.ts b/packages/ui-library/src/components/tooltip-bubble/index.ts
index 6578b9446..42b8983ef 100644
--- a/packages/ui-library/src/components/tooltip-bubble/index.ts
+++ b/packages/ui-library/src/components/tooltip-bubble/index.ts
@@ -1,11 +1,12 @@
-import { LitElement, css, html, nothing } from 'lit';
+import { css, html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { light, dark } from './index.css';
 import { classMap } from 'lit/directives/class-map.js';
 import { TAG_NAME } from './renderFunction';
 import { ThemeType } from '../../foundation/_tokens-generated/index.themes';
+import { LitElementCustom } from '../../utils/lit-element-custom';
 
-export class BlrTooltipBubble extends LitElement {
+export class BlrTooltipBubble extends LitElementCustom {
   static styles = [
     css`
       :host([visible]) {
@@ -50,4 +51,4 @@ if (!customElements.get(TAG_NAME)) {
   customElements.define(TAG_NAME, BlrTooltipBubble);
 }
 
-export type BlrTooltipBubbleType = Omit<BlrTooltipBubble, keyof LitElement>;
+export type BlrTooltipBubbleType = Omit<BlrTooltipBubble, keyof LitElementCustom>;
diff --git a/packages/ui-library/src/components/tooltip/index.ts b/packages/ui-library/src/components/tooltip/index.ts
index 23334549f..09bc64a4e 100644
--- a/packages/ui-library/src/components/tooltip/index.ts
+++ b/packages/ui-library/src/components/tooltip/index.ts
@@ -1,4 +1,4 @@
-import { LitElement, html } from 'lit';
+import { html } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { Placement as PlacementType } from '@floating-ui/dom';
 import { tooltipPosition } from './tooltip-position';
@@ -7,11 +7,12 @@ import { TAG_NAME } from './renderFunction';
 
 import { ThemeType } from '../../foundation/_tokens-generated/index.themes';
 import { BlrTooltipBubbleRenderFunction } from '../tooltip-bubble/renderFunction';
+import { LitElementCustom } from '../../utils/lit-element-custom';
 
 const enterEvents = ['pointerenter', 'focus'];
 const leaveEvents = ['pointerleave', 'blur', 'keydown', 'click'];
 
-export class BlrTooltip extends LitElement {
+export class BlrTooltip extends LitElementCustom {
   static styles = [styleCustom];
 
   @property() theme?: ThemeType = 'Light';
@@ -68,4 +69,4 @@ if (!customElements.get(TAG_NAME)) {
   customElements.define(TAG_NAME, BlrTooltip);
 }
 
-export type BlrTooltipType = Omit<BlrTooltip, keyof LitElement>;
+export type BlrTooltipType = Omit<BlrTooltip, keyof LitElementCustom>;
diff --git a/packages/ui-library/src/utils/lit-element-custom.ts b/packages/ui-library/src/utils/lit-element-custom.ts
new file mode 100644
index 000000000..853bbd2a6
--- /dev/null
+++ b/packages/ui-library/src/utils/lit-element-custom.ts
@@ -0,0 +1,31 @@
+import { LitElement, PropertyDeclaration } from 'lit';
+
+export const camelCaseToKebabCase = (str: string) => str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+
+export class LitElementCustom extends LitElement {
+  /**
+   * Sets the attribute name in kebab-case
+   *
+   * This function overwrites the lit elements createProperty method,
+   * here it converts the provided attribute name to kebab-case instead of lowercase,
+   * which is the convention for HTML attributes.
+   *
+   * For more information on observed attributes in web components,
+   * refer to the official Lit documentation:
+   * https://lit.dev/docs/components/properties/#observed-attributes
+   *
+   * @param {string} name - The attribute name to convert.
+   * @returns {string} The attribute name in kebab-case.
+   */
+  static createProperty(name: PropertyKey, options: PropertyDeclaration) {
+    let customOptions = options;
+
+    // generate the attribute name if it hasn't been defined or if it's disabled.
+    if (typeof options?.attribute === 'undefined' || options?.attribute === true) {
+      const attributeName = camelCaseToKebabCase(name.toString());
+      customOptions = { ...options, attribute: attributeName };
+    }
+
+    return super.createProperty(name, customOptions);
+  }
+}
diff --git a/packages/ui-library/src/utils/typesafe-generic-component-renderer.ts b/packages/ui-library/src/utils/typesafe-generic-component-renderer.ts
index b6d96bdb4..4f0a941fa 100644
--- a/packages/ui-library/src/utils/typesafe-generic-component-renderer.ts
+++ b/packages/ui-library/src/utils/typesafe-generic-component-renderer.ts
@@ -1,4 +1,5 @@
 import { TemplateResult, html } from 'lit';
+import { camelCaseToKebabCase } from './lit-element-custom';
 
 export const genericBlrComponentRenderer = <ComponentType extends { [s: string]: unknown } | ArrayLike<unknown>>(
   tagName: string,
@@ -25,14 +26,14 @@ export const genericBlrComponentRenderer = <ComponentType extends { [s: string]:
         templateFragments.push(` class=`);
       } else if (typeof value === 'boolean') {
         if (value === true) {
-          templateFragments.push(` ${key}=`);
+          templateFragments.push(` ${camelCaseToKebabCase(key)}=`);
         } else {
           templateFragments.push(` .${key}=`);
         }
       } else if (typeof value === 'object') {
         templateFragments.push(` .${key}=`);
       } else {
-        templateFragments.push(` ${key}=`);
+        templateFragments.push(` ${camelCaseToKebabCase(key)}=`);
       }
 
       values.push(value);