From 374474d6537dc81ed936a2e269d1cf63a6042335 Mon Sep 17 00:00:00 2001
From: JpunktWpunkt <92968754+JpunktWpunkt@users.noreply.github.com>
Date: Fri, 8 Sep 2023 16:25:26 +0200
Subject: [PATCH 01/21] fix(ui-library): add storybook storie examples

---
 .../components/textarea/examples.stories.ts   | 63 +++++++++++++++++++
 .../src/components/textarea/index.stories.ts  |  4 +-
 2 files changed, 65 insertions(+), 2 deletions(-)
 create mode 100644 packages/ui-library/src/components/textarea/examples.stories.ts

diff --git a/packages/ui-library/src/components/textarea/examples.stories.ts b/packages/ui-library/src/components/textarea/examples.stories.ts
new file mode 100644
index 000000000..784a37da3
--- /dev/null
+++ b/packages/ui-library/src/components/textarea/examples.stories.ts
@@ -0,0 +1,63 @@
+import { html } from 'lit-html';
+import { BlrTextareaRenderFunction, BlrTextareaType } from './index';
+import './index';
+
+const defaultParams: BlrTextareaType = {
+  theme: 'Light',
+  textareaId: '#1',
+  label: 'Label',
+  labelAppendix: '(Optional)',
+  size: 'md',
+  value: 'Rindfleischetikettierungsüberwachungsaufgabenübertragunsgesetz',
+  minLength: 0,
+  maxLength: 140,
+  warningLimitType: 'warningLimitInt',
+  warningLimitInt: 105,
+  warningLimitPer: 75,
+  cols: 20,
+  rows: 5,
+
+  placeholder: 'Type your message here ..',
+  required: false,
+  disabled: false,
+  readonly: false,
+
+  showHint: true,
+  hintIcon: 'blrInfo',
+  hintText: 'Rindfleischetikettierungs',
+
+  hasError: false,
+  errorMessage: "OMG it's an error",
+
+  isResizeable: true,
+};
+
+export default {
+  title: 'Design System/Web Components/BlrTextarea/Examples',
+  parameters: {
+    viewMode: 'story',
+    previewTabs: {
+      'storybook/docs/panel': {
+        hidden: true,
+      },
+    },
+  },
+};
+
+export const Example1 = () =>
+  html`
+    ${BlrTextareaRenderFunction({
+      ...defaultParams,
+      theme: 'Light',
+    })}
+  `;
+Example1.storyName = 'Example1';
+
+export const Example2 = () =>
+  html`
+    ${BlrTextareaRenderFunction({
+      ...defaultParams,
+      theme: 'Dark',
+    })}
+  `;
+Example2.storyName = 'Example2';
diff --git a/packages/ui-library/src/components/textarea/index.stories.ts b/packages/ui-library/src/components/textarea/index.stories.ts
index bdbe31dff..7b8cf2611 100644
--- a/packages/ui-library/src/components/textarea/index.stories.ts
+++ b/packages/ui-library/src/components/textarea/index.stories.ts
@@ -9,7 +9,7 @@ import { Themes } from '../../foundation/_tokens-generated/index.themes';
 import { PureIconKeys } from '@boiler/icons';
 
 export default {
-  title: 'Design System/Web Components',
+  title: 'Design System/Web Components/BlrTextarea',
   argTypes: {
     size: {
       options: FormSizes,
@@ -121,7 +121,7 @@ export const BlrTextarea = ({
     })}
   `;
 
-BlrTextarea.storyName = 'BlrTextarea';
+BlrTextarea.storyName = 'BlrTextarea-Docs';
 
 BlrTextarea.args = {
   theme: 'Light',

From a4c72d2ca57a2c2cd704cdf81a77d8221546bd96 Mon Sep 17 00:00:00 2001
From: JpunktWpunkt <92968754+JpunktWpunkt@users.noreply.github.com>
Date: Fri, 8 Sep 2023 22:16:11 +0200
Subject: [PATCH 02/21] feat(ui-library): adds hasError, disabled and default
 example to storybook textarea storie

---
 .../src/components/textarea/examples.stories.ts   | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/packages/ui-library/src/components/textarea/examples.stories.ts b/packages/ui-library/src/components/textarea/examples.stories.ts
index 784a37da3..f048ff6c7 100644
--- a/packages/ui-library/src/components/textarea/examples.stories.ts
+++ b/packages/ui-library/src/components/textarea/examples.stories.ts
@@ -51,13 +51,22 @@ export const Example1 = () =>
       theme: 'Light',
     })}
   `;
-Example1.storyName = 'Example1';
+Example1.storyName = 'Default';
 
 export const Example2 = () =>
   html`
     ${BlrTextareaRenderFunction({
       ...defaultParams,
-      theme: 'Dark',
+      disabled: true,
     })}
   `;
-Example2.storyName = 'Example2';
+Example2.storyName = 'Disabled';
+
+export const Example3 = () =>
+  html`
+    ${BlrTextareaRenderFunction({
+      ...defaultParams,
+      hasError: true,
+    })}
+  `;
+Example3.storyName = 'hasError';

From 0875c89ba6299b6b11e9133db9680b19f1cc8f9d Mon Sep 17 00:00:00 2001
From: JpunktWpunkt <92968754+JpunktWpunkt@users.noreply.github.com>
Date: Mon, 11 Sep 2023 06:37:13 +0200
Subject: [PATCH 03/21] fix(ui-library): change the hint message

---
 packages/ui-library/src/components/textarea/examples.stories.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui-library/src/components/textarea/examples.stories.ts b/packages/ui-library/src/components/textarea/examples.stories.ts
index f048ff6c7..e63d43b2a 100644
--- a/packages/ui-library/src/components/textarea/examples.stories.ts
+++ b/packages/ui-library/src/components/textarea/examples.stories.ts
@@ -24,7 +24,7 @@ const defaultParams: BlrTextareaType = {
 
   showHint: true,
   hintIcon: 'blrInfo',
-  hintText: 'Rindfleischetikettierungs',
+  hintText: 'hint message',
 
   hasError: false,
   errorMessage: "OMG it's an error",

From ea08e2a8fe3f96fd36174fa3b822564259fea0c7 Mon Sep 17 00:00:00 2001
From: JpunktWpunkt <92968754+JpunktWpunkt@users.noreply.github.com>
Date: Wed, 13 Sep 2023 10:40:02 +0200
Subject: [PATCH 04/21] feat(ui-library): adds some example on one page and add
 font

---
 .../components/textarea/examples.stories.ts   | 30 +++++++++++++++----
 1 file changed, 25 insertions(+), 5 deletions(-)

diff --git a/packages/ui-library/src/components/textarea/examples.stories.ts b/packages/ui-library/src/components/textarea/examples.stories.ts
index e63d43b2a..807f5e0d5 100644
--- a/packages/ui-library/src/components/textarea/examples.stories.ts
+++ b/packages/ui-library/src/components/textarea/examples.stories.ts
@@ -9,7 +9,6 @@ const defaultParams: BlrTextareaType = {
   labelAppendix: '(Optional)',
   size: 'md',
   value: 'Rindfleischetikettierungsüberwachungsaufgabenübertragunsgesetz',
-  minLength: 0,
   maxLength: 140,
   warningLimitType: 'warningLimitInt',
   warningLimitInt: 105,
@@ -32,6 +31,13 @@ const defaultParams: BlrTextareaType = {
   isResizeable: true,
 };
 
+const fontStyle = html`
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap');
+    @import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap');
+  </style>
+`;
+
 export default {
   title: 'Design System/Web Components/BlrTextarea/Examples',
   parameters: {
@@ -46,10 +52,24 @@ export default {
 
 export const Example1 = () =>
   html`
-    ${BlrTextareaRenderFunction({
-      ...defaultParams,
-      theme: 'Light',
-    })}
+    <div>
+      <h3>Default</h3>
+      ${fontStyle}
+      ${BlrTextareaRenderFunction({
+        ...defaultParams,
+        theme: 'Light',
+      })}
+      <h3>Disabled</h3>
+      ${BlrTextareaRenderFunction({
+        ...defaultParams,
+        disabled: true,
+      })}
+      <h3>HasError</h3>
+      ${BlrTextareaRenderFunction({
+        ...defaultParams,
+        hasError: true,
+      })}
+    </div>
   `;
 Example1.storyName = 'Default';
 

From 73b3abe2e303257c3f3c6593da769262c3d81a28 Mon Sep 17 00:00:00 2001
From: JpunktWpunkt <92968754+JpunktWpunkt@users.noreply.github.com>
Date: Wed, 13 Sep 2023 11:03:55 +0200
Subject: [PATCH 05/21] fix(ui-library): fix font issue

---
 .../src/components/textarea/examples.stories.ts    | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/packages/ui-library/src/components/textarea/examples.stories.ts b/packages/ui-library/src/components/textarea/examples.stories.ts
index 807f5e0d5..0fd33e9d1 100644
--- a/packages/ui-library/src/components/textarea/examples.stories.ts
+++ b/packages/ui-library/src/components/textarea/examples.stories.ts
@@ -50,11 +50,16 @@ export default {
   },
 };
 
-export const Example1 = () =>
-  html`
-    <div>
+export const Example1 = () => {
+  return html`
+    ${fontStyle}
+    <style>
+      .stories-textarea {
+        font-family: 'Source Sans Pro', 'Source Code Pro', sans-serif;
+      }
+    </style>
+    <div class="stories-textarea">
       <h3>Default</h3>
-      ${fontStyle}
       ${BlrTextareaRenderFunction({
         ...defaultParams,
         theme: 'Light',
@@ -71,6 +76,7 @@ export const Example1 = () =>
       })}
     </div>
   `;
+};
 Example1.storyName = 'Default';
 
 export const Example2 = () =>

From 71c09a5203ce9fc809eb3123fc1ed7401482ed7b Mon Sep 17 00:00:00 2001
From: JpunktWpunkt <92968754+JpunktWpunkt@users.noreply.github.com>
Date: Wed, 13 Sep 2023 16:13:03 +0200
Subject: [PATCH 06/21] feat(ui-library): adds dark  theme to storybook storie,
 not yet completed

---
 .../components/textarea/examples.stories.ts   | 74 ++++++++++++++++---
 1 file changed, 65 insertions(+), 9 deletions(-)

diff --git a/packages/ui-library/src/components/textarea/examples.stories.ts b/packages/ui-library/src/components/textarea/examples.stories.ts
index 0fd33e9d1..471eda08c 100644
--- a/packages/ui-library/src/components/textarea/examples.stories.ts
+++ b/packages/ui-library/src/components/textarea/examples.stories.ts
@@ -1,6 +1,7 @@
 import { html } from 'lit-html';
 import { BlrTextareaRenderFunction, BlrTextareaType } from './index';
 import './index';
+import { nothing } from 'lit';
 
 const defaultParams: BlrTextareaType = {
   theme: 'Light',
@@ -48,6 +49,17 @@ export default {
       },
     },
   },
+  argTypes: {
+    placeholder: {
+      name: 'Placeholder',
+      description: 'Defines a short hint intended to aid the user with data entry when the component has no value.',
+      defaultValue: '',
+      control: {
+        type: 'text',
+        label: 'Enter Text',
+      },
+    },
+  },
 };
 
 export const Example1 = () => {
@@ -57,12 +69,51 @@ export const Example1 = () => {
       .stories-textarea {
         font-family: 'Source Sans Pro', 'Source Code Pro', sans-serif;
       }
+      .container {
+        width: 377px;
+        height: 64px;
+      }
     </style>
     <div class="stories-textarea">
       <h3>Default</h3>
+      <div class="container">
+        ${BlrTextareaRenderFunction({
+          ...defaultParams,
+          theme: 'Light',
+        })}
+      </div>
+      <h3>Disabled</h3>
+      ${BlrTextareaRenderFunction({
+        ...defaultParams,
+        disabled: true,
+      })}
+      <h3>HasError</h3>
       ${BlrTextareaRenderFunction({
         ...defaultParams,
-        theme: 'Light',
+        hasError: true,
+      })}
+    </div>
+  `;
+};
+Example1.storyName = 'Textarea Examples Light Theme';
+
+export const Example2 = () =>
+  html`
+    ${fontStyle}
+    <style>
+      .stories-textarea {
+        font-family: 'Source Sans Pro', 'Source Code Pro', sans-serif;
+        background-color: black;
+        color: white;
+        width: 377px;
+        height: 64px;
+      }
+    </style>
+    <div class="stories-textarea">
+      <h3>Default</h3>
+      ${BlrTextareaRenderFunction({
+        ...defaultParams,
+        theme: 'Dark',
       })}
       <h3>Disabled</h3>
       ${BlrTextareaRenderFunction({
@@ -76,23 +127,28 @@ export const Example1 = () => {
       })}
     </div>
   `;
-};
-Example1.storyName = 'Default';
+Example2.storyName = 'Textarea Examples Dark Theme';
 
-export const Example2 = () =>
+export const Example3 = () =>
   html`
     ${BlrTextareaRenderFunction({
       ...defaultParams,
-      disabled: true,
+      hasError: true,
     })}
   `;
-Example2.storyName = 'Disabled';
+Example3.storyName = 'hasError';
 
-export const Example3 = () =>
+export const InteractivePlaceholder = ({ placeholder }) =>
   html`
+    ${fontStyle}
     ${BlrTextareaRenderFunction({
       ...defaultParams,
-      hasError: true,
+      placeholder: placeholder,
+      value: '',
     })}
   `;
-Example3.storyName = 'hasError';
+
+InteractivePlaceholder.storyName = 'Interaktiver Placeholder';
+InteractivePlaceholder.args = {
+  placeholder: defaultParams.placeholder,
+};

From 08c1d85eaa87b031e72e19df933bc0ba81327326 Mon Sep 17 00:00:00 2001
From: JpunktWpunkt <92968754+JpunktWpunkt@users.noreply.github.com>
Date: Thu, 14 Sep 2023 07:44:37 +0200
Subject: [PATCH 07/21] core(ui-library): deleted some issues

---
 .../components/textarea/examples.stories.ts   | 25 +++++++++++--------
 1 file changed, 15 insertions(+), 10 deletions(-)

diff --git a/packages/ui-library/src/components/textarea/examples.stories.ts b/packages/ui-library/src/components/textarea/examples.stories.ts
index 471eda08c..f33dc89b2 100644
--- a/packages/ui-library/src/components/textarea/examples.stories.ts
+++ b/packages/ui-library/src/components/textarea/examples.stories.ts
@@ -1,7 +1,6 @@
 import { html } from 'lit-html';
 import { BlrTextareaRenderFunction, BlrTextareaType } from './index';
 import './index';
-import { nothing } from 'lit';
 
 const defaultParams: BlrTextareaType = {
   theme: 'Light',
@@ -70,23 +69,23 @@ export const Example1 = () => {
         font-family: 'Source Sans Pro', 'Source Code Pro', sans-serif;
       }
       .container {
-        width: 377px;
+        width: 23rem;
         height: 64px;
       }
     </style>
     <div class="stories-textarea">
       <h3>Default</h3>
-      <div class="container">
-        ${BlrTextareaRenderFunction({
-          ...defaultParams,
-          theme: 'Light',
-        })}
-      </div>
+      ${BlrTextareaRenderFunction({
+        ...defaultParams,
+        theme: 'Light',
+      })}
+
       <h3>Disabled</h3>
       ${BlrTextareaRenderFunction({
         ...defaultParams,
         disabled: true,
       })}
+
       <h3>HasError</h3>
       ${BlrTextareaRenderFunction({
         ...defaultParams,
@@ -103,9 +102,8 @@ export const Example2 = () =>
     <style>
       .stories-textarea {
         font-family: 'Source Sans Pro', 'Source Code Pro', sans-serif;
-        background-color: black;
         color: white;
-        width: 377px;
+        width: 23rem;
         height: 64px;
       }
     </style>
@@ -119,14 +117,21 @@ export const Example2 = () =>
       ${BlrTextareaRenderFunction({
         ...defaultParams,
         disabled: true,
+        theme: 'Dark',
       })}
       <h3>HasError</h3>
       ${BlrTextareaRenderFunction({
         ...defaultParams,
         hasError: true,
+        theme: 'Dark',
       })}
     </div>
   `;
+Example2.params = {
+  darkMode: {
+    current: 'dark',
+  },
+};
 Example2.storyName = 'Textarea Examples Dark Theme';
 
 export const Example3 = () =>

From 9921136ed50ea5eb9f892be9365cc66d86665640 Mon Sep 17 00:00:00 2001
From: JpunktWpunkt <92968754+JpunktWpunkt@users.noreply.github.com>
Date: Thu, 14 Sep 2023 10:30:24 +0200
Subject: [PATCH 08/21] adds dark and lightmode status from storybook ui to
 show darkmode

---
 .../components/textarea/examples.stories.ts   | 24 ++++++++++---------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/packages/ui-library/src/components/textarea/examples.stories.ts b/packages/ui-library/src/components/textarea/examples.stories.ts
index f33dc89b2..cbc8bf7a9 100644
--- a/packages/ui-library/src/components/textarea/examples.stories.ts
+++ b/packages/ui-library/src/components/textarea/examples.stories.ts
@@ -41,6 +41,9 @@ const fontStyle = html`
 export default {
   title: 'Design System/Web Components/BlrTextarea/Examples',
   parameters: {
+    // backgrounds: {
+    //     default: 'light',
+    // },
     viewMode: 'story',
     previewTabs: {
       'storybook/docs/panel': {
@@ -68,10 +71,6 @@ export const Example1 = () => {
       .stories-textarea {
         font-family: 'Source Sans Pro', 'Source Code Pro', sans-serif;
       }
-      .container {
-        width: 23rem;
-        height: 64px;
-      }
     </style>
     <div class="stories-textarea">
       <h3>Default</h3>
@@ -94,6 +93,11 @@ export const Example1 = () => {
     </div>
   `;
 };
+Example1.parameters = {
+  backgrounds: {
+    default: 'light',
+  },
+};
 Example1.storyName = 'Textarea Examples Light Theme';
 
 export const Example2 = () =>
@@ -103,8 +107,6 @@ export const Example2 = () =>
       .stories-textarea {
         font-family: 'Source Sans Pro', 'Source Code Pro', sans-serif;
         color: white;
-        width: 23rem;
-        height: 64px;
       }
     </style>
     <div class="stories-textarea">
@@ -127,12 +129,12 @@ export const Example2 = () =>
       })}
     </div>
   `;
-Example2.params = {
-  darkMode: {
-    current: 'dark',
+(Example2.parameters = {
+  backgrounds: {
+    default: 'dark',
   },
-};
-Example2.storyName = 'Textarea Examples Dark Theme';
+}),
+  (Example2.storyName = 'Textarea Examples Dark Theme');
 
 export const Example3 = () =>
   html`

From 66253ac0505fe38f10628185c3255eea8b93b344 Mon Sep 17 00:00:00 2001
From: JpunktWpunkt <92968754+JpunktWpunkt@users.noreply.github.com>
Date: Thu, 14 Sep 2023 10:55:24 +0200
Subject: [PATCH 09/21] adds some display flex to story

---
 .../components/textarea/examples.stories.ts   | 95 ++++++++++++-------
 1 file changed, 63 insertions(+), 32 deletions(-)

diff --git a/packages/ui-library/src/components/textarea/examples.stories.ts b/packages/ui-library/src/components/textarea/examples.stories.ts
index cbc8bf7a9..1faae8fea 100644
--- a/packages/ui-library/src/components/textarea/examples.stories.ts
+++ b/packages/ui-library/src/components/textarea/examples.stories.ts
@@ -69,27 +69,43 @@ export const Example1 = () => {
     ${fontStyle}
     <style>
       .stories-textarea {
+        display: flex;
         font-family: 'Source Sans Pro', 'Source Code Pro', sans-serif;
       }
+      .story-textarea {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 1rem;
+        width: 20rem;
+        max-height: 7rem;
+      }
     </style>
     <div class="stories-textarea">
-      <h3>Default</h3>
-      ${BlrTextareaRenderFunction({
-        ...defaultParams,
-        theme: 'Light',
-      })}
+      <div class="story-textarea">
+        <h3>Rest</h3>
+
+        ${BlrTextareaRenderFunction({
+          ...defaultParams,
+          theme: 'Light',
+        })}
+      </div>
+      <div class="story-textarea">
+        <h3>Disabled</h3>
 
-      <h3>Disabled</h3>
-      ${BlrTextareaRenderFunction({
-        ...defaultParams,
-        disabled: true,
-      })}
+        ${BlrTextareaRenderFunction({
+          ...defaultParams,
+          disabled: true,
+        })}
+      </div>
+      <div class="story-textarea">
+        <h3>Error</h3>
 
-      <h3>HasError</h3>
-      ${BlrTextareaRenderFunction({
-        ...defaultParams,
-        hasError: true,
-      })}
+        ${BlrTextareaRenderFunction({
+          ...defaultParams,
+          hasError: true,
+        })}
+      </div>
     </div>
   `;
 };
@@ -105,28 +121,43 @@ export const Example2 = () =>
     ${fontStyle}
     <style>
       .stories-textarea {
+        display: flex;
         font-family: 'Source Sans Pro', 'Source Code Pro', sans-serif;
         color: white;
       }
+      .story-textarea {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 1rem;
+        width: 20rem;
+        max-height: 7rem;
+      }
     </style>
     <div class="stories-textarea">
-      <h3>Default</h3>
-      ${BlrTextareaRenderFunction({
-        ...defaultParams,
-        theme: 'Dark',
-      })}
-      <h3>Disabled</h3>
-      ${BlrTextareaRenderFunction({
-        ...defaultParams,
-        disabled: true,
-        theme: 'Dark',
-      })}
-      <h3>HasError</h3>
-      ${BlrTextareaRenderFunction({
-        ...defaultParams,
-        hasError: true,
-        theme: 'Dark',
-      })}
+      <div class="story-textarea">
+        <h3>Default</h3>
+        ${BlrTextareaRenderFunction({
+          ...defaultParams,
+          theme: 'Dark',
+        })}
+      </div>
+      <div class="story-textarea">
+        <h3>Disabled</h3>
+        ${BlrTextareaRenderFunction({
+          ...defaultParams,
+          disabled: true,
+          theme: 'Dark',
+        })}
+      </div>
+      <div class="story-textarea">
+        <h3>HasError</h3>
+        ${BlrTextareaRenderFunction({
+          ...defaultParams,
+          hasError: true,
+          theme: 'Dark',
+        })}
+      </div>
     </div>
   `;
 (Example2.parameters = {

From c07ac74743af4ec23ed1922af3e4a8a8596cc6a2 Mon Sep 17 00:00:00 2001
From: JpunktWpunkt <92968754+JpunktWpunkt@users.noreply.github.com>
Date: Fri, 15 Sep 2023 11:53:05 +0200
Subject: [PATCH 10/21] fix(ui-libarary): adds some css values to try out the
 focus

---
 .../components/textarea/examples.stories.ts   | 38 ++++++++++++-------
 1 file changed, 24 insertions(+), 14 deletions(-)

diff --git a/packages/ui-library/src/components/textarea/examples.stories.ts b/packages/ui-library/src/components/textarea/examples.stories.ts
index 1faae8fea..c316e2a44 100644
--- a/packages/ui-library/src/components/textarea/examples.stories.ts
+++ b/packages/ui-library/src/components/textarea/examples.stories.ts
@@ -70,6 +70,7 @@ export const Example1 = () => {
     <style>
       .stories-textarea {
         display: flex;
+        flex-wrap: wrap;
         font-family: 'Source Sans Pro', 'Source Code Pro', sans-serif;
       }
       .story-textarea {
@@ -78,13 +79,22 @@ export const Example1 = () => {
         align-items: center;
         gap: 1rem;
         width: 20rem;
-        max-height: 7rem;
+      }
+      .focus {
+        outline: 2px solid hsla(220, 10%, 10%, 1);
+        border-radius: 4px;
       }
     </style>
     <div class="stories-textarea">
       <div class="story-textarea">
         <h3>Rest</h3>
-
+        ${BlrTextareaRenderFunction({
+          ...defaultParams,
+          theme: 'Light',
+        })}
+      </div>
+      <div class="story-textarea">
+        <h3>Focus</h3>
         ${BlrTextareaRenderFunction({
           ...defaultParams,
           theme: 'Light',
@@ -92,7 +102,6 @@ export const Example1 = () => {
       </div>
       <div class="story-textarea">
         <h3>Disabled</h3>
-
         ${BlrTextareaRenderFunction({
           ...defaultParams,
           disabled: true,
@@ -100,12 +109,22 @@ export const Example1 = () => {
       </div>
       <div class="story-textarea">
         <h3>Error</h3>
-
         ${BlrTextareaRenderFunction({
           ...defaultParams,
           hasError: true,
         })}
       </div>
+      <div class="story-textarea">
+        <h3>readOnly</h3>
+        ${BlrTextareaRenderFunction({
+          ...defaultParams,
+          readonly: true,
+        })}
+      </div>
+      <div class="story-textarea">
+        <h3>Description</h3>
+        <p>Here is a description</p>
+      </div>
     </div>
   `;
 };
@@ -114,6 +133,7 @@ Example1.parameters = {
     default: 'light',
   },
 };
+
 Example1.storyName = 'Textarea Examples Light Theme';
 
 export const Example2 = () =>
@@ -167,15 +187,6 @@ export const Example2 = () =>
 }),
   (Example2.storyName = 'Textarea Examples Dark Theme');
 
-export const Example3 = () =>
-  html`
-    ${BlrTextareaRenderFunction({
-      ...defaultParams,
-      hasError: true,
-    })}
-  `;
-Example3.storyName = 'hasError';
-
 export const InteractivePlaceholder = ({ placeholder }) =>
   html`
     ${fontStyle}
@@ -185,7 +196,6 @@ export const InteractivePlaceholder = ({ placeholder }) =>
       value: '',
     })}
   `;
-
 InteractivePlaceholder.storyName = 'Interaktiver Placeholder';
 InteractivePlaceholder.args = {
   placeholder: defaultParams.placeholder,

From ceb6b6e57e6942ccf9917d582043231d7c8eefcc Mon Sep 17 00:00:00 2001
From: JpunktWpunkt <92968754+JpunktWpunkt@users.noreply.github.com>
Date: Wed, 20 Sep 2023 08:20:49 +0200
Subject: [PATCH 11/21] fix(ui-library): adds focus and blur

---
 .../ui-library/src/components/textarea/index.ts     | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/ui-library/src/components/textarea/index.ts b/packages/ui-library/src/components/textarea/index.ts
index 1e328c6e2..10588182c 100644
--- a/packages/ui-library/src/components/textarea/index.ts
+++ b/packages/ui-library/src/components/textarea/index.ts
@@ -46,9 +46,16 @@ export class BlrTextarea extends LitElement {
   @property() theme: ThemeType = 'Light';
 
   @state() protected count = 0;
-
+  @state() protected isFocused = true;
   @query('textarea') protected textareaElement: HTMLTextAreaElement | undefined;
 
+  protected handleFocus = () => {
+    this.isFocused = true;
+  };
+
+  protected handleBlur = () => {
+    this.isFocused = false;
+  };
   connectedCallback() {
     super.connectedCallback();
 
@@ -97,6 +104,7 @@ export class BlrTextarea extends LitElement {
       [`error-input`]: this.hasError || false,
       [`${this.size}`]: this.size,
       [`resizeable`]: this.isResizeable || false,
+      ['focus']: this.isFocused || false,
     });
 
     const counterVariant = this.determinateCounterVariant();
@@ -125,7 +133,8 @@ export class BlrTextarea extends LitElement {
             ?required="${this.required}"
             ?disabled="${this.disabled}"
             @input="${this.onChange}"
-            @focus="${this.onFocus}"
+            @focus=${this.handleFocus}
+            @blur=${this.handleBlur}
             @select="${this.onSelect}"
             @keyup="${this.updateCounter}"
           >${this.value}</textarea>

From 7d1bca8ff0730061ebf87a217160553250b1b1d2 Mon Sep 17 00:00:00 2001
From: JpunktWpunkt <92968754+JpunktWpunkt@users.noreply.github.com>
Date: Wed, 20 Sep 2023 11:21:44 +0200
Subject: [PATCH 12/21] fix(ui-library): adds the structure from figma for
 showcase

---
 .../components/textarea/examples.stories.ts   | 256 +++++++++++++-----
 1 file changed, 193 insertions(+), 63 deletions(-)

diff --git a/packages/ui-library/src/components/textarea/examples.stories.ts b/packages/ui-library/src/components/textarea/examples.stories.ts
index c316e2a44..5693aa384 100644
--- a/packages/ui-library/src/components/textarea/examples.stories.ts
+++ b/packages/ui-library/src/components/textarea/examples.stories.ts
@@ -68,10 +68,16 @@ export const Example1 = () => {
   return html`
     ${fontStyle}
     <style>
+      .wrapper {
+        font-family: 'Source Sans Pro', 'Source Code Pro', sans-serif;
+        display: flex;
+        width: 100%;
+        flex-wrap: wrap;
+      }
       .stories-textarea {
         display: flex;
         flex-wrap: wrap;
-        font-family: 'Source Sans Pro', 'Source Code Pro', sans-serif;
+        flex-direction: column;
       }
       .story-textarea {
         display: flex;
@@ -84,46 +90,93 @@ export const Example1 = () => {
         outline: 2px solid hsla(220, 10%, 10%, 1);
         border-radius: 4px;
       }
+      .row {
+        display: flex;
+        flex-direction: column;
+      }
     </style>
-    <div class="stories-textarea">
-      <div class="story-textarea">
-        <h3>Rest</h3>
-        ${BlrTextareaRenderFunction({
-          ...defaultParams,
-          theme: 'Light',
-        })}
-      </div>
-      <div class="story-textarea">
-        <h3>Focus</h3>
-        ${BlrTextareaRenderFunction({
-          ...defaultParams,
-          theme: 'Light',
-        })}
-      </div>
-      <div class="story-textarea">
-        <h3>Disabled</h3>
-        ${BlrTextareaRenderFunction({
-          ...defaultParams,
-          disabled: true,
-        })}
-      </div>
-      <div class="story-textarea">
-        <h3>Error</h3>
-        ${BlrTextareaRenderFunction({
-          ...defaultParams,
-          hasError: true,
-        })}
-      </div>
-      <div class="story-textarea">
-        <h3>readOnly</h3>
-        ${BlrTextareaRenderFunction({
-          ...defaultParams,
-          readonly: true,
-        })}
+    <div class="wrapper">
+      <div class="row">
+        <p style="text-align: center">Default</p>
+        <div class="stories-textarea">
+          <div class="story-textarea">
+            <p>Rest</p>
+            ${BlrTextareaRenderFunction({
+              ...defaultParams,
+              theme: 'Light',
+            })}
+          </div>
+          <div class="story-textarea">
+            <p>Hover</p>
+            ${BlrTextareaRenderFunction({
+              ...defaultParams,
+              theme: 'Light',
+            })}
+          </div>
+          <div class="story-textarea">
+            <p>Pressed</p>
+            ${BlrTextareaRenderFunction({
+              ...defaultParams,
+              theme: 'Light',
+            })}
+          </div>
+          <div class="story-textarea">
+            <p>Focus</p>
+            ${BlrTextareaRenderFunction({
+              ...defaultParams,
+              theme: 'Light',
+            })}
+          </div>
+          <div class="story-textarea">
+            <p>Disabled</p>
+            ${BlrTextareaRenderFunction({
+              ...defaultParams,
+              disabled: true,
+            })}
+          </div>
+          <div class="story-textarea">
+            <p>readOnly</p>
+            ${BlrTextareaRenderFunction({
+              ...defaultParams,
+              readonly: true,
+            })}
+          </div>
+          <div class="story-textarea">
+            <h3>Description</h3>
+            <p>Here is a description</p>
+          </div>
+        </div>
       </div>
-      <div class="story-textarea">
-        <h3>Description</h3>
-        <p>Here is a description</p>
+      <div class="row">
+        <p style="text-align: center">Error</p>
+        <div class="story-textarea">
+          <p>Rest</p>
+          ${BlrTextareaRenderFunction({
+            ...defaultParams,
+            hasError: true,
+          })}
+        </div>
+        <div class="story-textarea">
+          <p>Hover</p>
+          ${BlrTextareaRenderFunction({
+            ...defaultParams,
+            hasError: true,
+          })}
+        </div>
+        <div class="story-textarea">
+          <p>Pressed</p>
+          ${BlrTextareaRenderFunction({
+            ...defaultParams,
+            hasError: true,
+          })}
+        </div>
+        <div class="story-textarea">
+          <p>Focus</p>
+          ${BlrTextareaRenderFunction({
+            ...defaultParams,
+            hasError: true,
+          })}
+        </div>
       </div>
     </div>
   `;
@@ -140,43 +193,120 @@ export const Example2 = () =>
   html`
     ${fontStyle}
     <style>
-      .stories-textarea {
+      .wrapper {
         display: flex;
+        width: 100%;
+        flex-wrap: wrap;
         font-family: 'Source Sans Pro', 'Source Code Pro', sans-serif;
+      }
+
+      .stories-textarea {
+        display: flex;
         color: white;
+        flex-wrap: wrap;
+        flex-direction: column;
       }
+
       .story-textarea {
         display: flex;
         flex-direction: column;
         align-items: center;
         gap: 1rem;
         width: 20rem;
-        max-height: 7rem;
+      }
+      .row {
+        display: flex;
+        flex-direction: column;
       }
     </style>
-    <div class="stories-textarea">
-      <div class="story-textarea">
-        <h3>Default</h3>
-        ${BlrTextareaRenderFunction({
-          ...defaultParams,
-          theme: 'Dark',
-        })}
-      </div>
-      <div class="story-textarea">
-        <h3>Disabled</h3>
-        ${BlrTextareaRenderFunction({
-          ...defaultParams,
-          disabled: true,
-          theme: 'Dark',
-        })}
+    <div class="wrapper">
+      <div class="row">
+        <p style="text-align: center; color: white">Default</p>
+        <div class="stories-textarea">
+          <div class="story-textarea">
+            <p>Rest</p>
+            ${BlrTextareaRenderFunction({
+              ...defaultParams,
+              theme: 'Dark',
+            })}
+          </div>
+          <div class="story-textarea">
+            <p>Hover</p>
+            ${BlrTextareaRenderFunction({
+              ...defaultParams,
+              theme: 'Dark',
+            })}
+          </div>
+          <div class="story-textarea">
+            <h3>Pressed</h3>
+            ${BlrTextareaRenderFunction({
+              ...defaultParams,
+              theme: 'Dark',
+            })}
+          </div>
+          <div class="story-textarea">
+            <h3>Focus</h3>
+            ${BlrTextareaRenderFunction({
+              ...defaultParams,
+              theme: 'Dark',
+            })}
+          </div>
+          <div class="story-textarea">
+            <h3>Disabled</h3>
+            ${BlrTextareaRenderFunction({
+              ...defaultParams,
+              disabled: true,
+              theme: 'Dark',
+            })}
+          </div>
+          <div class="story-textarea">
+            <h3>readOnly</h3>
+            ${BlrTextareaRenderFunction({
+              ...defaultParams,
+              readonly: true,
+              theme: 'Dark',
+            })}
+          </div>
+          <div class="story-textarea">
+            <h3>Description</h3>
+            <p>Here is a description</p>
+          </div>
+        </div>
       </div>
-      <div class="story-textarea">
-        <h3>HasError</h3>
-        ${BlrTextareaRenderFunction({
-          ...defaultParams,
-          hasError: true,
-          theme: 'Dark',
-        })}
+      <div class="row">
+        <p style="text-align: center; color: white">Error</p>
+        <div class="story-textarea">
+          <p style="color: white">Rest</p>
+          ${BlrTextareaRenderFunction({
+            ...defaultParams,
+            hasError: true,
+            theme: 'Dark',
+          })}
+        </div>
+        <div class="story-textarea">
+          <p style="color: white">Rest</p>
+          ${BlrTextareaRenderFunction({
+            ...defaultParams,
+            hasError: true,
+            theme: 'Dark',
+          })}
+        </div>
+        <div class="story-textarea">
+          <p style="color: white">Rest</p>
+          ${BlrTextareaRenderFunction({
+            ...defaultParams,
+            hasError: true,
+            theme: 'Dark',
+          })}
+        </div>
+        <div class="story-textarea">
+          <p style="color: white">Rest</p>
+          ${BlrTextareaRenderFunction({
+            ...defaultParams,
+            hasError: true,
+            theme: 'Dark',
+          })}
+        </div>
       </div>
     </div>
   `;

From 17c1fe43bf16bacb705ff6336def42425cbf0967 Mon Sep 17 00:00:00 2001
From: JpunktWpunkt <92968754+JpunktWpunkt@users.noreply.github.com>
Date: Thu, 21 Sep 2023 06:55:52 +0200
Subject: [PATCH 13/21] fix(ui-library): fixed font size

---
 .../src/components/textarea/examples.stories.ts  | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/ui-library/src/components/textarea/examples.stories.ts b/packages/ui-library/src/components/textarea/examples.stories.ts
index 5693aa384..455d19484 100644
--- a/packages/ui-library/src/components/textarea/examples.stories.ts
+++ b/packages/ui-library/src/components/textarea/examples.stories.ts
@@ -238,21 +238,21 @@ export const Example2 = () =>
             })}
           </div>
           <div class="story-textarea">
-            <h3>Pressed</h3>
+            <p>Pressed</p>
             ${BlrTextareaRenderFunction({
               ...defaultParams,
               theme: 'Dark',
             })}
           </div>
           <div class="story-textarea">
-            <h3>Focus</h3>
+            <p>Focus</p>
             ${BlrTextareaRenderFunction({
               ...defaultParams,
               theme: 'Dark',
             })}
           </div>
           <div class="story-textarea">
-            <h3>Disabled</h3>
+            <p>Disabled</p>
             ${BlrTextareaRenderFunction({
               ...defaultParams,
               disabled: true,
@@ -260,7 +260,7 @@ export const Example2 = () =>
             })}
           </div>
           <div class="story-textarea">
-            <h3>readOnly</h3>
+            <p>readOnly</p>
             ${BlrTextareaRenderFunction({
               ...defaultParams,
               readonly: true,
@@ -268,7 +268,7 @@ export const Example2 = () =>
             })}
           </div>
           <div class="story-textarea">
-            <h3>Description</h3>
+            <p>Description</p>
             <p>Here is a description</p>
           </div>
         </div>
@@ -284,7 +284,7 @@ export const Example2 = () =>
           })}
         </div>
         <div class="story-textarea">
-          <p style="color: white">Rest</p>
+          <p style="color: white">Hover</p>
           ${BlrTextareaRenderFunction({
             ...defaultParams,
             hasError: true,
@@ -292,7 +292,7 @@ export const Example2 = () =>
           })}
         </div>
         <div class="story-textarea">
-          <p style="color: white">Rest</p>
+          <p style="color: white">Pressed</p>
           ${BlrTextareaRenderFunction({
             ...defaultParams,
             hasError: true,
@@ -300,7 +300,7 @@ export const Example2 = () =>
           })}
         </div>
         <div class="story-textarea">
-          <p style="color: white">Rest</p>
+          <p style="color: white">Focus</p>
           ${BlrTextareaRenderFunction({
             ...defaultParams,
             hasError: true,

From 9b11e36b6c292bd7b784ff77dc2bd77ee1b5191f Mon Sep 17 00:00:00 2001
From: JpunktWpunkt <92968754+JpunktWpunkt@users.noreply.github.com>
Date: Thu, 21 Sep 2023 07:42:50 +0200
Subject: [PATCH 14/21] chore(ux-library): refactoring storybook story

---
 .../src/components/text-input/index.ts        |   2 +-
 .../components/textarea/examples.stories.ts   | 199 ++++--------------
 .../src/components/textarea/index.ts          |   1 +
 3 files changed, 42 insertions(+), 160 deletions(-)

diff --git a/packages/ui-library/src/components/text-input/index.ts b/packages/ui-library/src/components/text-input/index.ts
index f85d07503..147402298 100644
--- a/packages/ui-library/src/components/text-input/index.ts
+++ b/packages/ui-library/src/components/text-input/index.ts
@@ -92,7 +92,7 @@ export class BlrTextInput extends LitElement {
             class="blr-form-element ${inputClasses}"
             id=${this.textInputId}
             type="${this.currentType}"
-            value="${this.value}"
+            .value="${this.value}"
             placeholder="${this.placeholder}"
             ?disabled="${this.disabled}"
             ?readonly="${this.readonly}"
diff --git a/packages/ui-library/src/components/textarea/examples.stories.ts b/packages/ui-library/src/components/textarea/examples.stories.ts
index 455d19484..2abc5d619 100644
--- a/packages/ui-library/src/components/textarea/examples.stories.ts
+++ b/packages/ui-library/src/components/textarea/examples.stories.ts
@@ -31,6 +31,10 @@ const defaultParams: BlrTextareaType = {
   isResizeable: true,
 };
 
+interface StorybookTextareaType extends BlrTextareaType {
+  storybookLabel: string;
+}
+
 const fontStyle = html`
   <style>
     @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap');
@@ -64,6 +68,13 @@ export default {
   },
 };
 
+const renderTextareaExample = (params: StorybookTextareaType) => html`
+  <div class="story-textarea">
+    <p>${params.storybookLabel}</p>
+    ${BlrTextareaRenderFunction(params)}
+  </div>
+`;
+
 export const Example1 = () => {
   return html`
     ${fontStyle}
@@ -86,10 +97,10 @@ export const Example1 = () => {
         gap: 1rem;
         width: 20rem;
       }
-      .focus {
-        outline: 2px solid hsla(220, 10%, 10%, 1);
-        border-radius: 4px;
-      }
+      /*.focus {*/
+      /*  outline: 2px solid hsla(220, 10%, 10%, 1);*/
+      /*  border-radius: 4px;*/
+      /*}*/
       .row {
         display: flex;
         flex-direction: column;
@@ -99,83 +110,21 @@ export const Example1 = () => {
       <div class="row">
         <p style="text-align: center">Default</p>
         <div class="stories-textarea">
-          <div class="story-textarea">
-            <p>Rest</p>
-            ${BlrTextareaRenderFunction({
-              ...defaultParams,
-              theme: 'Light',
-            })}
-          </div>
-          <div class="story-textarea">
-            <p>Hover</p>
-            ${BlrTextareaRenderFunction({
-              ...defaultParams,
-              theme: 'Light',
-            })}
-          </div>
-          <div class="story-textarea">
-            <p>Pressed</p>
-            ${BlrTextareaRenderFunction({
-              ...defaultParams,
-              theme: 'Light',
-            })}
-          </div>
-          <div class="story-textarea">
-            <p>Focus</p>
-            ${BlrTextareaRenderFunction({
-              ...defaultParams,
-              theme: 'Light',
-            })}
-          </div>
-          <div class="story-textarea">
-            <p>Disabled</p>
-            ${BlrTextareaRenderFunction({
-              ...defaultParams,
-              disabled: true,
-            })}
-          </div>
-          <div class="story-textarea">
-            <p>readOnly</p>
-            ${BlrTextareaRenderFunction({
-              ...defaultParams,
-              readonly: true,
-            })}
-          </div>
-          <div class="story-textarea">
-            <h3>Description</h3>
-            <p>Here is a description</p>
-          </div>
+          ${renderTextareaExample({ ...defaultParams, storybookLabel: 'Rest', theme: 'Light' })}
+          ${renderTextareaExample({ ...defaultParams, storybookLabel: 'Hover', theme: 'Light' })}
+          ${renderTextareaExample({ ...defaultParams, storybookLabel: 'Pressed', theme: 'Light' })}
+          ${renderTextareaExample({ ...defaultParams, storybookLabel: 'Focus', theme: 'Light' })}
+          ${renderTextareaExample({ ...defaultParams, storybookLabel: 'Disabled', theme: 'Light', disabled: true })}
+          ${renderTextareaExample({ ...defaultParams, storybookLabel: 'readOnly', theme: 'Light', readonly: true })}
         </div>
       </div>
       <div class="row">
-        <p style="text-align: center">Error</p>
-        <div class="story-textarea">
-          <p>Rest</p>
-          ${BlrTextareaRenderFunction({
-            ...defaultParams,
-            hasError: true,
-          })}
-        </div>
-        <div class="story-textarea">
-          <p>Hover</p>
-          ${BlrTextareaRenderFunction({
-            ...defaultParams,
-            hasError: true,
-          })}
-        </div>
-        <div class="story-textarea">
-          <p>Pressed</p>
-          ${BlrTextareaRenderFunction({
-            ...defaultParams,
-            hasError: true,
-          })}
-        </div>
-        <div class="story-textarea">
-          <p>Focus</p>
-          ${BlrTextareaRenderFunction({
-            ...defaultParams,
-            hasError: true,
-          })}
+        <p style="text-align: center">Default</p>
+        <div class="stories-textarea">
+          ${renderTextareaExample({ ...defaultParams, storybookLabel: 'Rest', hasError: true, theme: 'Light' })}
+          ${renderTextareaExample({ ...defaultParams, storybookLabel: 'Hover', hasError: true, theme: 'Light' })}
+          ${renderTextareaExample({ ...defaultParams, storybookLabel: 'Pressed', hasError: true, theme: 'Light' })}
+          ${renderTextareaExample({ ...defaultParams, storybookLabel: 'Focus', hasError: true, theme: 'Light' })}
         </div>
       </div>
     </div>
@@ -194,10 +143,10 @@ export const Example2 = () =>
     ${fontStyle}
     <style>
       .wrapper {
+        font-family: 'Source Sans Pro', 'Source Code Pro', sans-serif;
         display: flex;
         width: 100%;
         flex-wrap: wrap;
-        font-family: 'Source Sans Pro', 'Source Code Pro', sans-serif;
       }
 
       .stories-textarea {
@@ -223,89 +172,21 @@ export const Example2 = () =>
       <div class="row">
         <p style="text-align: center; color: white">Default</p>
         <div class="stories-textarea">
-          <div class="story-textarea">
-            <p>Rest</p>
-            ${BlrTextareaRenderFunction({
-              ...defaultParams,
-              theme: 'Dark',
-            })}
-          </div>
-          <div class="story-textarea">
-            <p>Hover</p>
-            ${BlrTextareaRenderFunction({
-              ...defaultParams,
-              theme: 'Dark',
-            })}
-          </div>
-          <div class="story-textarea">
-            <p>Pressed</p>
-            ${BlrTextareaRenderFunction({
-              ...defaultParams,
-              theme: 'Dark',
-            })}
-          </div>
-          <div class="story-textarea">
-            <p>Focus</p>
-            ${BlrTextareaRenderFunction({
-              ...defaultParams,
-              theme: 'Dark',
-            })}
-          </div>
-          <div class="story-textarea">
-            <p>Disabled</p>
-            ${BlrTextareaRenderFunction({
-              ...defaultParams,
-              disabled: true,
-              theme: 'Dark',
-            })}
-          </div>
-          <div class="story-textarea">
-            <p>readOnly</p>
-            ${BlrTextareaRenderFunction({
-              ...defaultParams,
-              readonly: true,
-              theme: 'Dark',
-            })}
-          </div>
-          <div class="story-textarea">
-            <p>Description</p>
-            <p>Here is a description</p>
-          </div>
+          ${renderTextareaExample({ ...defaultParams, storybookLabel: 'Rest', theme: 'Dark' })}
+          ${renderTextareaExample({ ...defaultParams, storybookLabel: 'Hover', theme: 'Dark' })}
+          ${renderTextareaExample({ ...defaultParams, storybookLabel: 'Pressed', theme: 'Dark' })}
+          ${renderTextareaExample({ ...defaultParams, storybookLabel: 'Focus', theme: 'Dark' })}
+          ${renderTextareaExample({ ...defaultParams, storybookLabel: 'Disabled', theme: 'Dark', disabled: true })}
+          ${renderTextareaExample({ ...defaultParams, storybookLabel: 'readOnly', theme: 'Dark', readonly: true })}
         </div>
       </div>
       <div class="row">
-        <p style="text-align: center; color: white">Error</p>
-        <div class="story-textarea">
-          <p style="color: white">Rest</p>
-          ${BlrTextareaRenderFunction({
-            ...defaultParams,
-            hasError: true,
-            theme: 'Dark',
-          })}
-        </div>
-        <div class="story-textarea">
-          <p style="color: white">Hover</p>
-          ${BlrTextareaRenderFunction({
-            ...defaultParams,
-            hasError: true,
-            theme: 'Dark',
-          })}
-        </div>
-        <div class="story-textarea">
-          <p style="color: white">Pressed</p>
-          ${BlrTextareaRenderFunction({
-            ...defaultParams,
-            hasError: true,
-            theme: 'Dark',
-          })}
-        </div>
-        <div class="story-textarea">
-          <p style="color: white">Focus</p>
-          ${BlrTextareaRenderFunction({
-            ...defaultParams,
-            hasError: true,
-            theme: 'Dark',
-          })}
+        <p style="text-align: center">Default</p>
+        <div class="stories-textarea">
+          ${renderTextareaExample({ ...defaultParams, storybookLabel: 'Rest', hasError: true, theme: 'Dark' })}
+          ${renderTextareaExample({ ...defaultParams, storybookLabel: 'Hover', hasError: true, theme: 'Dark' })}
+          ${renderTextareaExample({ ...defaultParams, storybookLabel: 'Pressed', hasError: true, theme: 'Dark' })}
+          ${renderTextareaExample({ ...defaultParams, storybookLabel: 'Focus', hasError: true, theme: 'Dark' })}
         </div>
       </div>
     </div>
diff --git a/packages/ui-library/src/components/textarea/index.ts b/packages/ui-library/src/components/textarea/index.ts
index 10588182c..a9ed743c4 100644
--- a/packages/ui-library/src/components/textarea/index.ts
+++ b/packages/ui-library/src/components/textarea/index.ts
@@ -103,6 +103,7 @@ export class BlrTextarea extends LitElement {
       [`error`]: this.hasError || false,
       [`error-input`]: this.hasError || false,
       [`${this.size}`]: this.size,
+      [`readonly`]: this.readonly || false,
       [`resizeable`]: this.isResizeable || false,
       ['focus']: this.isFocused || false,
     });

From 86515854560cdd06bded0a1a3fa51ad679d14c04 Mon Sep 17 00:00:00 2001
From: JpunktWpunkt <92968754+JpunktWpunkt@users.noreply.github.com>
Date: Thu, 21 Sep 2023 10:07:18 +0200
Subject: [PATCH 15/21] feat(ux-library): add lifecylce update for
 shouldFocusState

---
 .../components/textarea/examples.stories.ts   | 25 +++++++++++++------
 .../src/components/textarea/index.ts          | 18 +++++++++++--
 2 files changed, 33 insertions(+), 10 deletions(-)

diff --git a/packages/ui-library/src/components/textarea/examples.stories.ts b/packages/ui-library/src/components/textarea/examples.stories.ts
index 2abc5d619..3ddab669f 100644
--- a/packages/ui-library/src/components/textarea/examples.stories.ts
+++ b/packages/ui-library/src/components/textarea/examples.stories.ts
@@ -15,6 +15,7 @@ const defaultParams: BlrTextareaType = {
   warningLimitPer: 75,
   cols: 20,
   rows: 5,
+  shouldFocus: false,
 
   placeholder: 'Type your message here ..',
   required: false,
@@ -97,10 +98,6 @@ export const Example1 = () => {
         gap: 1rem;
         width: 20rem;
       }
-      /*.focus {*/
-      /*  outline: 2px solid hsla(220, 10%, 10%, 1);*/
-      /*  border-radius: 4px;*/
-      /*}*/
       .row {
         display: flex;
         flex-direction: column;
@@ -113,7 +110,7 @@ export const Example1 = () => {
           ${renderTextareaExample({ ...defaultParams, storybookLabel: 'Rest', theme: 'Light' })}
           ${renderTextareaExample({ ...defaultParams, storybookLabel: 'Hover', theme: 'Light' })}
           ${renderTextareaExample({ ...defaultParams, storybookLabel: 'Pressed', theme: 'Light' })}
-          ${renderTextareaExample({ ...defaultParams, storybookLabel: 'Focus', theme: 'Light' })}
+          ${renderTextareaExample({ ...defaultParams, storybookLabel: 'Focus', theme: 'Light', shouldFocus: true })}
           ${renderTextareaExample({ ...defaultParams, storybookLabel: 'Disabled', theme: 'Light', disabled: true })}
           ${renderTextareaExample({ ...defaultParams, storybookLabel: 'readOnly', theme: 'Light', readonly: true })}
         </div>
@@ -124,7 +121,13 @@ export const Example1 = () => {
           ${renderTextareaExample({ ...defaultParams, storybookLabel: 'Rest', hasError: true, theme: 'Light' })}
           ${renderTextareaExample({ ...defaultParams, storybookLabel: 'Hover', hasError: true, theme: 'Light' })}
           ${renderTextareaExample({ ...defaultParams, storybookLabel: 'Pressed', hasError: true, theme: 'Light' })}
-          ${renderTextareaExample({ ...defaultParams, storybookLabel: 'Focus', hasError: true, theme: 'Light' })}
+          ${renderTextareaExample({
+            ...defaultParams,
+            storybookLabel: 'Focus',
+            hasError: true,
+            theme: 'Light',
+            shouldFocus: true,
+          })}
         </div>
       </div>
     </div>
@@ -175,7 +178,7 @@ export const Example2 = () =>
           ${renderTextareaExample({ ...defaultParams, storybookLabel: 'Rest', theme: 'Dark' })}
           ${renderTextareaExample({ ...defaultParams, storybookLabel: 'Hover', theme: 'Dark' })}
           ${renderTextareaExample({ ...defaultParams, storybookLabel: 'Pressed', theme: 'Dark' })}
-          ${renderTextareaExample({ ...defaultParams, storybookLabel: 'Focus', theme: 'Dark' })}
+          ${renderTextareaExample({ ...defaultParams, storybookLabel: 'Focus', theme: 'Dark', shouldFocus: true })}
           ${renderTextareaExample({ ...defaultParams, storybookLabel: 'Disabled', theme: 'Dark', disabled: true })}
           ${renderTextareaExample({ ...defaultParams, storybookLabel: 'readOnly', theme: 'Dark', readonly: true })}
         </div>
@@ -186,7 +189,13 @@ export const Example2 = () =>
           ${renderTextareaExample({ ...defaultParams, storybookLabel: 'Rest', hasError: true, theme: 'Dark' })}
           ${renderTextareaExample({ ...defaultParams, storybookLabel: 'Hover', hasError: true, theme: 'Dark' })}
           ${renderTextareaExample({ ...defaultParams, storybookLabel: 'Pressed', hasError: true, theme: 'Dark' })}
-          ${renderTextareaExample({ ...defaultParams, storybookLabel: 'Focus', hasError: true, theme: 'Dark' })}
+          ${renderTextareaExample({
+            ...defaultParams,
+            storybookLabel: 'Focus',
+            hasError: true,
+            theme: 'Dark',
+            shouldFocus: true,
+          })}
         </div>
       </div>
     </div>
diff --git a/packages/ui-library/src/components/textarea/index.ts b/packages/ui-library/src/components/textarea/index.ts
index a9ed743c4..895a15842 100644
--- a/packages/ui-library/src/components/textarea/index.ts
+++ b/packages/ui-library/src/components/textarea/index.ts
@@ -42,6 +42,7 @@ export class BlrTextarea extends LitElement {
   @property() rows?: number;
   @property() cols?: number;
   @property() onSelect?: HTMLElement['onselect'];
+  @property() shouldFocus? = false;
 
   @property() theme: ThemeType = 'Light';
 
@@ -49,6 +50,15 @@ export class BlrTextarea extends LitElement {
   @state() protected isFocused = true;
   @query('textarea') protected textareaElement: HTMLTextAreaElement | undefined;
 
+  firstUpdated() {
+    if (this.shouldFocus) {
+      const textarea = this.shadowRoot?.querySelector('textarea');
+      if (textarea) {
+        textarea.focus();
+      }
+    }
+  }
+
   protected handleFocus = () => {
     this.isFocused = true;
   };
@@ -106,6 +116,7 @@ export class BlrTextarea extends LitElement {
       [`readonly`]: this.readonly || false,
       [`resizeable`]: this.isResizeable || false,
       ['focus']: this.isFocused || false,
+      ['shouldFocus']: this.shouldFocus || false,
     });
 
     const counterVariant = this.determinateCounterVariant();
@@ -138,6 +149,7 @@ export class BlrTextarea extends LitElement {
             @blur=${this.handleBlur}
             @select="${this.onSelect}"
             @keyup="${this.updateCounter}"
+            shouldFocus="${this.shouldFocus}"
           >${this.value}</textarea>
         </div>
         <div class="hint-wrapper">
@@ -173,8 +185,8 @@ export class BlrTextarea extends LitElement {
     `;
   }
 }
-
-export type BlrTextareaType = Omit<BlrTextarea, keyof LitElement>;
+type OmittedKeys = 'firstUpdated';
+export type BlrTextareaType = Omit<BlrTextarea, keyof LitElement | OmittedKeys>;
 
 export const BlrTextareaRenderFunction = ({
   textareaId,
@@ -202,6 +214,7 @@ export const BlrTextareaRenderFunction = ({
   showHint,
   value,
   theme,
+  shouldFocus,
 }: BlrTextareaType) => {
   return html`<blr-textarea
     class=${isResizeable ? nothing : `parent-width`}
@@ -230,5 +243,6 @@ export const BlrTextareaRenderFunction = ({
     .isResizeable=${isResizeable}
     .showHint=${showHint}
     .theme=${theme}
+    .shouldFocus=${shouldFocus}
   ></blr-textarea>`;
 };

From 2f71ca7326780a3fde5f135c411d9dc0ae7473fb Mon Sep 17 00:00:00 2001
From: JpunktWpunkt <92968754+JpunktWpunkt@users.noreply.github.com>
Date: Thu, 21 Sep 2023 10:12:30 +0200
Subject: [PATCH 16/21] fix(ui-library): add new story to solve the focus issue

---
 .../components/textarea/examples.stories.ts   | 59 +++++++++++++++++++
 1 file changed, 59 insertions(+)

diff --git a/packages/ui-library/src/components/textarea/examples.stories.ts b/packages/ui-library/src/components/textarea/examples.stories.ts
index 3ddab669f..63b064287 100644
--- a/packages/ui-library/src/components/textarea/examples.stories.ts
+++ b/packages/ui-library/src/components/textarea/examples.stories.ts
@@ -141,6 +141,65 @@ Example1.parameters = {
 
 Example1.storyName = 'Textarea Examples Light Theme';
 
+export const Example4 = () => {
+  return html`
+    ${fontStyle}
+    <style>
+      .wrapper {
+        font-family: 'Source Sans Pro', 'Source Code Pro', sans-serif;
+        display: flex;
+        width: 100%;
+        flex-wrap: wrap;
+      }
+      .stories-textarea {
+        display: flex;
+        flex-wrap: wrap;
+        flex-direction: column;
+      }
+      .story-textarea {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 1rem;
+        width: 20rem;
+      }
+      .row {
+        display: flex;
+        flex-direction: column;
+      }
+    </style>
+    <div class="wrapper">
+      <div class="row">
+        <p style="text-align: center">Default</p>
+        <div class="stories-textarea">
+          ${renderTextareaExample({ ...defaultParams, storybookLabel: 'Rest', theme: 'Light' })}
+          ${renderTextareaExample({ ...defaultParams, storybookLabel: 'Hover', theme: 'Light' })}
+          ${renderTextareaExample({ ...defaultParams, storybookLabel: 'Pressed', theme: 'Light' })}
+          ${renderTextareaExample({ ...defaultParams, storybookLabel: 'Focus', theme: 'Light', shouldFocus: true })}
+          ${renderTextareaExample({ ...defaultParams, storybookLabel: 'Disabled', theme: 'Light', disabled: true })}
+          ${renderTextareaExample({ ...defaultParams, storybookLabel: 'readOnly', theme: 'Light', readonly: true })}
+        </div>
+      </div>
+      <div class="row">
+        <p style="text-align: center">Default</p>
+        <div class="stories-textarea">
+          ${renderTextareaExample({ ...defaultParams, storybookLabel: 'Rest', hasError: true, theme: 'Light' })}
+          ${renderTextareaExample({ ...defaultParams, storybookLabel: 'Hover', hasError: true, theme: 'Light' })}
+          ${renderTextareaExample({ ...defaultParams, storybookLabel: 'Pressed', hasError: true, theme: 'Light' })}
+          ${renderTextareaExample({ ...defaultParams, storybookLabel: 'Focus', hasError: true, theme: 'Light' })}
+        </div>
+      </div>
+    </div>
+  `;
+};
+Example4.parameters = {
+  backgrounds: {
+    default: 'light',
+  },
+};
+
+Example4.storyName = 'Textarea Examples Light Theme Focus';
+
 export const Example2 = () =>
   html`
     ${fontStyle}

From 9d0b5707b8d60a9f1100b955a3e815c57a48067b Mon Sep 17 00:00:00 2001
From: JpunktWpunkt <92968754+JpunktWpunkt@users.noreply.github.com>
Date: Thu, 21 Sep 2023 10:39:31 +0200
Subject: [PATCH 17/21] fix(ui-library): fixed readonly issue

---
 packages/ui-library/src/components/textarea/index.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/ui-library/src/components/textarea/index.ts b/packages/ui-library/src/components/textarea/index.ts
index 895a15842..2f8340389 100644
--- a/packages/ui-library/src/components/textarea/index.ts
+++ b/packages/ui-library/src/components/textarea/index.ts
@@ -113,7 +113,6 @@ export class BlrTextarea extends LitElement {
       [`error`]: this.hasError || false,
       [`error-input`]: this.hasError || false,
       [`${this.size}`]: this.size,
-      [`readonly`]: this.readonly || false,
       [`resizeable`]: this.isResizeable || false,
       ['focus']: this.isFocused || false,
       ['shouldFocus']: this.shouldFocus || false,
@@ -144,6 +143,7 @@ export class BlrTextarea extends LitElement {
             placeholder="${this.placeholder || nothing}"
             ?required="${this.required}"
             ?disabled="${this.disabled}"
+            ?readonly="${this.readonly}"
             @input="${this.onChange}"
             @focus=${this.handleFocus}
             @blur=${this.handleBlur}
@@ -232,7 +232,7 @@ export const BlrTextareaRenderFunction = ({
     .placeholder="${placeholder}"
     .required=${required}
     .disabled=${disabled}
-    .readOnly=${readonly}
+    .readonly=${readonly}
     .hintText=${hintText}
     .hintIcon=${hintIcon}
     .hasError=${hasError}

From ac2c5704e33ead409af84f400364c750183563bb Mon Sep 17 00:00:00 2001
From: JpunktWpunkt <92968754+JpunktWpunkt@users.noreply.github.com>
Date: Thu, 21 Sep 2023 10:52:09 +0200
Subject: [PATCH 18/21] fix(ux-library): change storybook title for showingcase

---
 .../ui-library/src/components/textarea/examples.stories.ts    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/ui-library/src/components/textarea/examples.stories.ts b/packages/ui-library/src/components/textarea/examples.stories.ts
index 63b064287..1b7904cc8 100644
--- a/packages/ui-library/src/components/textarea/examples.stories.ts
+++ b/packages/ui-library/src/components/textarea/examples.stories.ts
@@ -139,7 +139,7 @@ Example1.parameters = {
   },
 };
 
-Example1.storyName = 'Textarea Examples Light Theme';
+Example1.storyName = 'Textarea Examples Light Theme Focus Error';
 
 export const Example4 = () => {
   return html`
@@ -198,7 +198,7 @@ Example4.parameters = {
   },
 };
 
-Example4.storyName = 'Textarea Examples Light Theme Focus';
+Example4.storyName = 'Textarea Examples Light Theme Focus Default';
 
 export const Example2 = () =>
   html`

From 84d4875f714bf76b37473c5c7742713bc654fa82 Mon Sep 17 00:00:00 2001
From: JpunktWpunkt <92968754+JpunktWpunkt@users.noreply.github.com>
Date: Thu, 21 Sep 2023 10:54:17 +0200
Subject: [PATCH 19/21] fix(ux-library): change storybook darkmode title color

---
 packages/ui-library/src/components/textarea/examples.stories.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui-library/src/components/textarea/examples.stories.ts b/packages/ui-library/src/components/textarea/examples.stories.ts
index 1b7904cc8..81f924d1a 100644
--- a/packages/ui-library/src/components/textarea/examples.stories.ts
+++ b/packages/ui-library/src/components/textarea/examples.stories.ts
@@ -243,7 +243,7 @@ export const Example2 = () =>
         </div>
       </div>
       <div class="row">
-        <p style="text-align: center">Default</p>
+        <p style="text-align: center; color: white">Default</p>
         <div class="stories-textarea">
           ${renderTextareaExample({ ...defaultParams, storybookLabel: 'Rest', hasError: true, theme: 'Dark' })}
           ${renderTextareaExample({ ...defaultParams, storybookLabel: 'Hover', hasError: true, theme: 'Dark' })}

From 7f836af1a8997068cf5bf10f2136212a8e7f9938 Mon Sep 17 00:00:00 2001
From: JpunktWpunkt <92968754+JpunktWpunkt@users.noreply.github.com>
Date: Thu, 21 Sep 2023 14:30:33 +0200
Subject: [PATCH 20/21] fix(ui-library): fix some titles

---
 .../ui-library/src/components/textarea/examples.stories.ts  | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/ui-library/src/components/textarea/examples.stories.ts b/packages/ui-library/src/components/textarea/examples.stories.ts
index 81f924d1a..6aedcbaeb 100644
--- a/packages/ui-library/src/components/textarea/examples.stories.ts
+++ b/packages/ui-library/src/components/textarea/examples.stories.ts
@@ -116,7 +116,7 @@ export const Example1 = () => {
         </div>
       </div>
       <div class="row">
-        <p style="text-align: center">Default</p>
+        <p style="text-align: center">Error</p>
         <div class="stories-textarea">
           ${renderTextareaExample({ ...defaultParams, storybookLabel: 'Rest', hasError: true, theme: 'Light' })}
           ${renderTextareaExample({ ...defaultParams, storybookLabel: 'Hover', hasError: true, theme: 'Light' })}
@@ -181,7 +181,7 @@ export const Example4 = () => {
         </div>
       </div>
       <div class="row">
-        <p style="text-align: center">Default</p>
+        <p style="text-align: center">Error</p>
         <div class="stories-textarea">
           ${renderTextareaExample({ ...defaultParams, storybookLabel: 'Rest', hasError: true, theme: 'Light' })}
           ${renderTextareaExample({ ...defaultParams, storybookLabel: 'Hover', hasError: true, theme: 'Light' })}
@@ -243,7 +243,7 @@ export const Example2 = () =>
         </div>
       </div>
       <div class="row">
-        <p style="text-align: center; color: white">Default</p>
+        <p style="text-align: center; color: white">Error</p>
         <div class="stories-textarea">
           ${renderTextareaExample({ ...defaultParams, storybookLabel: 'Rest', hasError: true, theme: 'Dark' })}
           ${renderTextareaExample({ ...defaultParams, storybookLabel: 'Hover', hasError: true, theme: 'Dark' })}

From b674d909f410d5e110134b7ed840093eee42507f Mon Sep 17 00:00:00 2001
From: JpunktWpunkt <92968754+JpunktWpunkt@users.noreply.github.com>
Date: Thu, 21 Sep 2023 15:50:34 +0200
Subject: [PATCH 21/21] chore(ux-library): cleaned up

---
 .../components/textarea/examples.stories.ts   | 21 ++++++++-----------
 .../src/components/textarea/index.ts          | 15 ++-----------
 2 files changed, 11 insertions(+), 25 deletions(-)

diff --git a/packages/ui-library/src/components/textarea/examples.stories.ts b/packages/ui-library/src/components/textarea/examples.stories.ts
index 6aedcbaeb..26d572e48 100644
--- a/packages/ui-library/src/components/textarea/examples.stories.ts
+++ b/packages/ui-library/src/components/textarea/examples.stories.ts
@@ -46,9 +46,6 @@ const fontStyle = html`
 export default {
   title: 'Design System/Web Components/BlrTextarea/Examples',
   parameters: {
-    // backgrounds: {
-    //     default: 'light',
-    // },
     viewMode: 'story',
     previewTabs: {
       'storybook/docs/panel': {
@@ -98,13 +95,13 @@ export const Example1 = () => {
         gap: 1rem;
         width: 20rem;
       }
-      .row {
+      .column {
         display: flex;
         flex-direction: column;
       }
     </style>
     <div class="wrapper">
-      <div class="row">
+      <div class="column">
         <p style="text-align: center">Default</p>
         <div class="stories-textarea">
           ${renderTextareaExample({ ...defaultParams, storybookLabel: 'Rest', theme: 'Light' })}
@@ -115,7 +112,7 @@ export const Example1 = () => {
           ${renderTextareaExample({ ...defaultParams, storybookLabel: 'readOnly', theme: 'Light', readonly: true })}
         </div>
       </div>
-      <div class="row">
+      <div class="column">
         <p style="text-align: center">Error</p>
         <div class="stories-textarea">
           ${renderTextareaExample({ ...defaultParams, storybookLabel: 'Rest', hasError: true, theme: 'Light' })}
@@ -163,13 +160,13 @@ export const Example4 = () => {
         gap: 1rem;
         width: 20rem;
       }
-      .row {
+      .column {
         display: flex;
         flex-direction: column;
       }
     </style>
     <div class="wrapper">
-      <div class="row">
+      <div class="column">
         <p style="text-align: center">Default</p>
         <div class="stories-textarea">
           ${renderTextareaExample({ ...defaultParams, storybookLabel: 'Rest', theme: 'Light' })}
@@ -180,7 +177,7 @@ export const Example4 = () => {
           ${renderTextareaExample({ ...defaultParams, storybookLabel: 'readOnly', theme: 'Light', readonly: true })}
         </div>
       </div>
-      <div class="row">
+      <div class="column">
         <p style="text-align: center">Error</p>
         <div class="stories-textarea">
           ${renderTextareaExample({ ...defaultParams, storybookLabel: 'Rest', hasError: true, theme: 'Light' })}
@@ -225,13 +222,13 @@ export const Example2 = () =>
         gap: 1rem;
         width: 20rem;
       }
-      .row {
+      .column {
         display: flex;
         flex-direction: column;
       }
     </style>
     <div class="wrapper">
-      <div class="row">
+      <div class="column">
         <p style="text-align: center; color: white">Default</p>
         <div class="stories-textarea">
           ${renderTextareaExample({ ...defaultParams, storybookLabel: 'Rest', theme: 'Dark' })}
@@ -242,7 +239,7 @@ export const Example2 = () =>
           ${renderTextareaExample({ ...defaultParams, storybookLabel: 'readOnly', theme: 'Dark', readonly: true })}
         </div>
       </div>
-      <div class="row">
+      <div class="column">
         <p style="text-align: center; color: white">Error</p>
         <div class="stories-textarea">
           ${renderTextareaExample({ ...defaultParams, storybookLabel: 'Rest', hasError: true, theme: 'Dark' })}
diff --git a/packages/ui-library/src/components/textarea/index.ts b/packages/ui-library/src/components/textarea/index.ts
index 2f8340389..350525587 100644
--- a/packages/ui-library/src/components/textarea/index.ts
+++ b/packages/ui-library/src/components/textarea/index.ts
@@ -47,7 +47,6 @@ export class BlrTextarea extends LitElement {
   @property() theme: ThemeType = 'Light';
 
   @state() protected count = 0;
-  @state() protected isFocused = true;
   @query('textarea') protected textareaElement: HTMLTextAreaElement | undefined;
 
   firstUpdated() {
@@ -59,13 +58,6 @@ export class BlrTextarea extends LitElement {
     }
   }
 
-  protected handleFocus = () => {
-    this.isFocused = true;
-  };
-
-  protected handleBlur = () => {
-    this.isFocused = false;
-  };
   connectedCallback() {
     super.connectedCallback();
 
@@ -114,7 +106,6 @@ export class BlrTextarea extends LitElement {
       [`error-input`]: this.hasError || false,
       [`${this.size}`]: this.size,
       [`resizeable`]: this.isResizeable || false,
-      ['focus']: this.isFocused || false,
       ['shouldFocus']: this.shouldFocus || false,
     });
 
@@ -145,8 +136,8 @@ export class BlrTextarea extends LitElement {
             ?disabled="${this.disabled}"
             ?readonly="${this.readonly}"
             @input="${this.onChange}"
-            @focus=${this.handleFocus}
-            @blur=${this.handleBlur}
+            @focus=${this.focus}
+            @blur=${this.blur}
             @select="${this.onSelect}"
             @keyup="${this.updateCounter}"
             shouldFocus="${this.shouldFocus}"
@@ -207,7 +198,6 @@ export const BlrTextareaRenderFunction = ({
   hintIcon,
   hasError,
   onChange,
-  onFocus,
   onSelect,
   readonly,
   isResizeable,
@@ -238,7 +228,6 @@ export const BlrTextareaRenderFunction = ({
     .hasError=${hasError}
     .labelAppendix=${labelAppendix}
     .onChange=${onChange}
-    .onFocus=${onFocus}
     .onSelect=${onSelect}
     .isResizeable=${isResizeable}
     .showHint=${showHint}