From 11fd926590a11b8da12ec32f6b6603cd3335c1e3 Mon Sep 17 00:00:00 2001
From: davidritter-dotcom <david.ritter.1@post.ch>
Date: Wed, 29 Nov 2023 15:30:14 +0100
Subject: [PATCH 01/22] feat(documentation, styles): some small changes

---
 .../components/textarea/textarea.stories.ts   | 30 +++++++++++++++++--
 packages/styles/src/components/forms.scss     |  7 ++++-
 .../src/variables/components/_forms.scss      | 20 +++++++++----
 3 files changed, 47 insertions(+), 10 deletions(-)

diff --git a/packages/documentation/src/stories/components/textarea/textarea.stories.ts b/packages/documentation/src/stories/components/textarea/textarea.stories.ts
index 367f243cc3..0984cc6fec 100644
--- a/packages/documentation/src/stories/components/textarea/textarea.stories.ts
+++ b/packages/documentation/src/stories/components/textarea/textarea.stories.ts
@@ -21,6 +21,7 @@ const meta: Meta = {
     hiddenLabel: false,
     value: undefined,
     size: 'null',
+    sizeWithFloatingLabel: 'null',
     rows: 4,
     hint: 'Hintus textus elare volare cantare hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.',
     disabled: false,
@@ -93,13 +94,32 @@ const meta: Meta = {
         category: 'General',
       },
     },
+    sizeWithFloatingLabel: {
+      name: 'Size',
+      description: "Sets the size of the component's appearance.",
+      if: {
+        arg: 'floatingLabel',
+        truthy: true,
+      },
+      control: {
+        type: 'select',
+        labels: {
+          'form-control-sm': 'Small',
+          'form-control-lg': 'Large',
+        },
+      },
+      options: ['form-control-sm', 'form-control-lg'],
+      table: {
+        category: 'General',
+      },
+    },
     rows: {
       name: 'Rows',
       description:
         'Attribute to set the initial height, in lines of text, of the `textarea` element.',
       control: {
-        type: 'number',
-        min: 3,
+        type: 'range',
+        min: 2,
         max: 10,
         step: 1,
       },
@@ -156,6 +176,8 @@ function renderTextarea(args: Args, context: StoryContext) {
   const classes = mapClasses({
     'form-control': true,
     [args.size]: args.size && args.size !== 'null',
+    [args.sizeWithFloatingLabel]:
+      args.sizeWithFloatingLabel && args.sizeWithFloatingLabel !== 'null',
     [args.validation]: args.validation && args.validation !== 'null',
   });
   const useAriaLabel = !args.floatingLabel && args.hiddenLabel;
@@ -200,7 +222,9 @@ function renderTextarea(args: Args, context: StoryContext) {
       aria-label=${useAriaLabel ? args.label : nothing}
       aria-invalid=${VALIDATION_STATE_MAP[args.validation] ?? nothing}
       style=${args.resize ?? nothing}
-    >${args.textInside ?? nothing}</textarea>
+    >
+${args.textInside ?? nothing}</textarea
+    >
   `;
   if (args.floatingLabel) {
     return html`
diff --git a/packages/styles/src/components/forms.scss b/packages/styles/src/components/forms.scss
index 1e4528a07f..b69072815e 100644
--- a/packages/styles/src/components/forms.scss
+++ b/packages/styles/src/components/forms.scss
@@ -3,6 +3,7 @@
 @use './../lic/bootstrap-license';
 
 @use './../variables/components/forms';
+@use './../spacing';
 
 @use './../mixins/utilities';
 @use './../mixins/forms' as form-mixins;
@@ -16,6 +17,10 @@
   @include form-mixins.form-control-rg;
 }
 
+.form-control-lg {
+  padding: spacing.$size-regular 0 spacing.$size-mini spacing.$size-regular;
+}
+
 select.form-control-rg:not([size]):not([multiple]) {
   height: forms.$input-height-rg;
 }
@@ -55,7 +60,7 @@ select.form-control-rg:not([size]):not([multiple]) {
 
     // Fix Safari cutoff when change the initial position of the selector button.
     /* stylelint-disable-next-line */
-    @supports (background: -webkit-named-image(i)) {
+    @supports (background: - webkit-named-image(i)) {
       &::file-selector-button {
         display: initial;
         position: initial;
diff --git a/packages/styles/src/variables/components/_forms.scss b/packages/styles/src/variables/components/_forms.scss
index 9218bfb071..260a5564bc 100644
--- a/packages/styles/src/variables/components/_forms.scss
+++ b/packages/styles/src/variables/components/_forms.scss
@@ -13,7 +13,7 @@
 // Forms
 
 $form-label-margin-bottom: 0.5rem !default;
-$form-label-color: rgba(var(--post-contrast-color-rgb), 0.8) !default;
+$form-label-color: var(--post-contrast-color-rgb) !default;
 
 $input-padding-y: button.$input-btn-padding-y !default;
 $input-padding-x: button.$input-btn-padding-x !default;
@@ -27,9 +27,10 @@ $input-padding-y-rg: button.$input-btn-padding-y-rg !default;
 $input-padding-x-rg: button.$input-btn-padding-x-rg !default;
 $input-line-height-rg: type.$line-height-copy !default;
 
-$input-padding-y-lg: spacing.$size-small-large !default;
+$input-padding-y-lg: spacing.$size-regular !default;
 $input-padding-x-lg: button.$input-btn-padding-x-lg !default;
 $input-line-height-lg: type.$line-height-copy !default;
+$input-font-size-lg: type.$font-size-16 !default;
 
 $input-bg: color.$white !default;
 $input-disabled-bg: rgba(var(--post-contrast-color-inverted-rgb), 0.6) !default;
@@ -74,7 +75,9 @@ $input-height-content-lg: type.$font-size-medium * $input-line-height-lg !defaul
 $input-height-inner-lg: $input-height-content-lg + ($input-padding-y-lg * 2) !default; // Design System
 $input-height-lg: calc(#{$input-height-inner-lg} + #{$input-height-border}) !default;
 
-$input-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !default;
+$input-transition:
+  border-color 0.15s ease-in-out,
+  box-shadow 0.15s ease-in-out !default;
 
 $form-text-color: var(--post-contrast-color);
 $form-text-font-size: type.$font-size-tiny;
@@ -94,7 +97,9 @@ $form-range-thumb-width: 2rem !default;
 $form-range-thumb-height: $form-range-thumb-width !default;
 $form-range-thumb-bg: color.$white !default;
 $form-range-thumb-border: 2px solid color.$black !default;
-$form-range-thumb-focus-box-shadow: 0 0 0 1px color.$black, 0 0 0 0.2rem rgba(color.$gray-80, 0.25) !default;
+$form-range-thumb-focus-box-shadow:
+  0 0 0 1px color.$black,
+  0 0 0 0.2rem rgba(color.$gray-80, 0.25) !default;
 $form-range-thumb-focus-box-shadow-width: 0.2rem; // For focus box shadow issue in Edge
 $form-range-thumb-active-bg: color.$white !default;
 $form-range-thumb-disabled-bg: $form-range-thumb-bg !default;
@@ -128,7 +133,10 @@ $form-floating-label-padding-t: calc(
 $form-floating-label-translate-x: $form-floating-padding-x * (1 - $form-floating-label-scale);
 $form-floating-label-transform: scale($form-floating-label-scale);
 $form-floating-transition: animation.$transition-base;
-$form-floating-transition-in: $form-floating-transition,
+$form-floating-transition-in:
+  $form-floating-transition,
   width 0ms list.nth(animation.$transition-base, 2);
-$form-floating-transition-out: $form-floating-transition, width 0ms linear;
+$form-floating-transition-out:
+  $form-floating-transition,
+  width 0ms linear;
 $form-floating-select-bg-size: 32px 32px;

From 512a8696c642816a7acc9b3e4e5450d140d7844e Mon Sep 17 00:00:00 2001
From: davidritter-dotcom <david.ritter.1@post.ch>
Date: Wed, 29 Nov 2023 16:57:13 +0100
Subject: [PATCH 02/22] feat(styles): padding ajustment

form-control-lg
---
 packages/styles/src/components/forms.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/styles/src/components/forms.scss b/packages/styles/src/components/forms.scss
index b69072815e..2e80140a9f 100644
--- a/packages/styles/src/components/forms.scss
+++ b/packages/styles/src/components/forms.scss
@@ -3,7 +3,7 @@
 @use './../lic/bootstrap-license';
 
 @use './../variables/components/forms';
-@use './../spacing';
+@use './../variables/spacing';
 
 @use './../mixins/utilities';
 @use './../mixins/forms' as form-mixins;
@@ -18,7 +18,7 @@
 }
 
 .form-control-lg {
-  padding: spacing.$size-regular 0 spacing.$size-mini spacing.$size-regular;
+  padding: spacing.$size-regular spacing.$size-large spacing.$size-mini spacing.$size-regular;
 }
 
 select.form-control-rg:not([size]):not([multiple]) {

From a8472ebf2dee30b28f81f211a4f52d655b3a796c Mon Sep 17 00:00:00 2001
From: davidritter-dotcom <david.ritter.1@post.ch>
Date: Tue, 13 Feb 2024 15:17:25 +0100
Subject: [PATCH 03/22] Revert "feat(styles): padding ajustment"

This reverts commit 512a8696c642816a7acc9b3e4e5450d140d7844e.
---
 packages/styles/src/components/forms.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/styles/src/components/forms.scss b/packages/styles/src/components/forms.scss
index 2e80140a9f..b69072815e 100644
--- a/packages/styles/src/components/forms.scss
+++ b/packages/styles/src/components/forms.scss
@@ -3,7 +3,7 @@
 @use './../lic/bootstrap-license';
 
 @use './../variables/components/forms';
-@use './../variables/spacing';
+@use './../spacing';
 
 @use './../mixins/utilities';
 @use './../mixins/forms' as form-mixins;
@@ -18,7 +18,7 @@
 }
 
 .form-control-lg {
-  padding: spacing.$size-regular spacing.$size-large spacing.$size-mini spacing.$size-regular;
+  padding: spacing.$size-regular 0 spacing.$size-mini spacing.$size-regular;
 }
 
 select.form-control-rg:not([size]):not([multiple]) {

From 3f0d8aaa112a8884c5c91711f9da0651ca134868 Mon Sep 17 00:00:00 2001
From: davidritter-dotcom <david.ritter.1@post.ch>
Date: Tue, 13 Feb 2024 15:20:00 +0100
Subject: [PATCH 04/22] Revert "feat(documentation, styles): some small
 changes"

This reverts commit 11fd926590a11b8da12ec32f6b6603cd3335c1e3.
---
 .../components/textarea/textarea.stories.ts   | 30 ++-----------------
 packages/styles/src/components/forms.scss     |  7 +----
 .../src/variables/components/_forms.scss      | 20 ++++---------
 3 files changed, 10 insertions(+), 47 deletions(-)

diff --git a/packages/documentation/src/stories/components/textarea/textarea.stories.ts b/packages/documentation/src/stories/components/textarea/textarea.stories.ts
index 0984cc6fec..367f243cc3 100644
--- a/packages/documentation/src/stories/components/textarea/textarea.stories.ts
+++ b/packages/documentation/src/stories/components/textarea/textarea.stories.ts
@@ -21,7 +21,6 @@ const meta: Meta = {
     hiddenLabel: false,
     value: undefined,
     size: 'null',
-    sizeWithFloatingLabel: 'null',
     rows: 4,
     hint: 'Hintus textus elare volare cantare hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.',
     disabled: false,
@@ -94,32 +93,13 @@ const meta: Meta = {
         category: 'General',
       },
     },
-    sizeWithFloatingLabel: {
-      name: 'Size',
-      description: "Sets the size of the component's appearance.",
-      if: {
-        arg: 'floatingLabel',
-        truthy: true,
-      },
-      control: {
-        type: 'select',
-        labels: {
-          'form-control-sm': 'Small',
-          'form-control-lg': 'Large',
-        },
-      },
-      options: ['form-control-sm', 'form-control-lg'],
-      table: {
-        category: 'General',
-      },
-    },
     rows: {
       name: 'Rows',
       description:
         'Attribute to set the initial height, in lines of text, of the `textarea` element.',
       control: {
-        type: 'range',
-        min: 2,
+        type: 'number',
+        min: 3,
         max: 10,
         step: 1,
       },
@@ -176,8 +156,6 @@ function renderTextarea(args: Args, context: StoryContext) {
   const classes = mapClasses({
     'form-control': true,
     [args.size]: args.size && args.size !== 'null',
-    [args.sizeWithFloatingLabel]:
-      args.sizeWithFloatingLabel && args.sizeWithFloatingLabel !== 'null',
     [args.validation]: args.validation && args.validation !== 'null',
   });
   const useAriaLabel = !args.floatingLabel && args.hiddenLabel;
@@ -222,9 +200,7 @@ function renderTextarea(args: Args, context: StoryContext) {
       aria-label=${useAriaLabel ? args.label : nothing}
       aria-invalid=${VALIDATION_STATE_MAP[args.validation] ?? nothing}
       style=${args.resize ?? nothing}
-    >
-${args.textInside ?? nothing}</textarea
-    >
+    >${args.textInside ?? nothing}</textarea>
   `;
   if (args.floatingLabel) {
     return html`
diff --git a/packages/styles/src/components/forms.scss b/packages/styles/src/components/forms.scss
index b69072815e..1e4528a07f 100644
--- a/packages/styles/src/components/forms.scss
+++ b/packages/styles/src/components/forms.scss
@@ -3,7 +3,6 @@
 @use './../lic/bootstrap-license';
 
 @use './../variables/components/forms';
-@use './../spacing';
 
 @use './../mixins/utilities';
 @use './../mixins/forms' as form-mixins;
@@ -17,10 +16,6 @@
   @include form-mixins.form-control-rg;
 }
 
-.form-control-lg {
-  padding: spacing.$size-regular 0 spacing.$size-mini spacing.$size-regular;
-}
-
 select.form-control-rg:not([size]):not([multiple]) {
   height: forms.$input-height-rg;
 }
@@ -60,7 +55,7 @@ select.form-control-rg:not([size]):not([multiple]) {
 
     // Fix Safari cutoff when change the initial position of the selector button.
     /* stylelint-disable-next-line */
-    @supports (background: - webkit-named-image(i)) {
+    @supports (background: -webkit-named-image(i)) {
       &::file-selector-button {
         display: initial;
         position: initial;
diff --git a/packages/styles/src/variables/components/_forms.scss b/packages/styles/src/variables/components/_forms.scss
index 260a5564bc..9218bfb071 100644
--- a/packages/styles/src/variables/components/_forms.scss
+++ b/packages/styles/src/variables/components/_forms.scss
@@ -13,7 +13,7 @@
 // Forms
 
 $form-label-margin-bottom: 0.5rem !default;
-$form-label-color: var(--post-contrast-color-rgb) !default;
+$form-label-color: rgba(var(--post-contrast-color-rgb), 0.8) !default;
 
 $input-padding-y: button.$input-btn-padding-y !default;
 $input-padding-x: button.$input-btn-padding-x !default;
@@ -27,10 +27,9 @@ $input-padding-y-rg: button.$input-btn-padding-y-rg !default;
 $input-padding-x-rg: button.$input-btn-padding-x-rg !default;
 $input-line-height-rg: type.$line-height-copy !default;
 
-$input-padding-y-lg: spacing.$size-regular !default;
+$input-padding-y-lg: spacing.$size-small-large !default;
 $input-padding-x-lg: button.$input-btn-padding-x-lg !default;
 $input-line-height-lg: type.$line-height-copy !default;
-$input-font-size-lg: type.$font-size-16 !default;
 
 $input-bg: color.$white !default;
 $input-disabled-bg: rgba(var(--post-contrast-color-inverted-rgb), 0.6) !default;
@@ -75,9 +74,7 @@ $input-height-content-lg: type.$font-size-medium * $input-line-height-lg !defaul
 $input-height-inner-lg: $input-height-content-lg + ($input-padding-y-lg * 2) !default; // Design System
 $input-height-lg: calc(#{$input-height-inner-lg} + #{$input-height-border}) !default;
 
-$input-transition:
-  border-color 0.15s ease-in-out,
-  box-shadow 0.15s ease-in-out !default;
+$input-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !default;
 
 $form-text-color: var(--post-contrast-color);
 $form-text-font-size: type.$font-size-tiny;
@@ -97,9 +94,7 @@ $form-range-thumb-width: 2rem !default;
 $form-range-thumb-height: $form-range-thumb-width !default;
 $form-range-thumb-bg: color.$white !default;
 $form-range-thumb-border: 2px solid color.$black !default;
-$form-range-thumb-focus-box-shadow:
-  0 0 0 1px color.$black,
-  0 0 0 0.2rem rgba(color.$gray-80, 0.25) !default;
+$form-range-thumb-focus-box-shadow: 0 0 0 1px color.$black, 0 0 0 0.2rem rgba(color.$gray-80, 0.25) !default;
 $form-range-thumb-focus-box-shadow-width: 0.2rem; // For focus box shadow issue in Edge
 $form-range-thumb-active-bg: color.$white !default;
 $form-range-thumb-disabled-bg: $form-range-thumb-bg !default;
@@ -133,10 +128,7 @@ $form-floating-label-padding-t: calc(
 $form-floating-label-translate-x: $form-floating-padding-x * (1 - $form-floating-label-scale);
 $form-floating-label-transform: scale($form-floating-label-scale);
 $form-floating-transition: animation.$transition-base;
-$form-floating-transition-in:
-  $form-floating-transition,
+$form-floating-transition-in: $form-floating-transition,
   width 0ms list.nth(animation.$transition-base, 2);
-$form-floating-transition-out:
-  $form-floating-transition,
-  width 0ms linear;
+$form-floating-transition-out: $form-floating-transition, width 0ms linear;
 $form-floating-select-bg-size: 32px 32px;

From 1928f9d7571b780dcf69a68814f6e51ed203603e Mon Sep 17 00:00:00 2001
From: davidritter-dotcom <david.ritter.1@post.ch>
Date: Wed, 14 Feb 2024 13:07:21 +0100
Subject: [PATCH 05/22] feat(docs): docs and story

---
 .../forms/textarea/textarea.docs.mdx          | 12 +++---
 .../forms/textarea/textarea.stories.ts        | 37 +++++++++++++++----
 .../styles/src/components/form-textarea.scss  | 14 +++++++
 .../src/variables/components/_forms.scss      |  1 +
 4 files changed, 51 insertions(+), 13 deletions(-)

diff --git a/packages/documentation/src/stories/components/forms/textarea/textarea.docs.mdx b/packages/documentation/src/stories/components/forms/textarea/textarea.docs.mdx
index aff25e957b..a20cca5312 100644
--- a/packages/documentation/src/stories/components/forms/textarea/textarea.docs.mdx
+++ b/packages/documentation/src/stories/components/forms/textarea/textarea.docs.mdx
@@ -34,7 +34,8 @@ But note that the `<textarea>` element must come first, so we can ensure the cor
 
 <div className="alert alert-warning">
   <h4 className="alert-heading">We're deprecating the regular and medium sizes for text input, textarea and select.</h4>
-  <p className="mt-0">This will make it easier to select the appropriate size variant: small for internal applications, large for external applications.<br />`.form-control-rg` and `.form-control-md` are deprecated and will be removed in the next major version.</p>
+  <p className="mt-0">This will make it easier to select the appropriate size variant: small for internal applications, large for external applications.<br />
+  `.form-control-rg` and `.form-control-md` are deprecated and will be removed in the next major version.</p>
 </div>
 
 The size can be changed by simply adding one of four classes:
@@ -45,14 +46,13 @@ The size can be changed by simply adding one of four classes:
 - Large: `.form-control-lg`
 
 <div className="alert alert-info">
-  <h4 className="alert-heading">Do not apply size classes on floating-label elements</h4>
-  <div className="mt-0">
-    It is not intended to apply the size classes to `textarea` elements that are nested in a
-    `.form-floating` container.
-  </div>
+  Regular and medium size classes are not available on floating-label elements
 </div>
 
 <Canvas of={TextareaStories.Size} />
+<div className="hide-col-default">
+  <Controls of={TextareaStories.Size} />
+</div>
 
 ### Validation
 
diff --git a/packages/documentation/src/stories/components/forms/textarea/textarea.stories.ts b/packages/documentation/src/stories/components/forms/textarea/textarea.stories.ts
index 31e3423710..efef775241 100644
--- a/packages/documentation/src/stories/components/forms/textarea/textarea.stories.ts
+++ b/packages/documentation/src/stories/components/forms/textarea/textarea.stories.ts
@@ -20,7 +20,8 @@ const meta: Meta = {
     floatingLabel: false,
     hiddenLabel: false,
     value: undefined,
-    size: 'null',
+    size: 'form-control-lg',
+    sizeFloatingLabel: 'form-control-lg',
     rows: 4,
     hint: 'Hintus textus elare volare cantare hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.',
     disabled: false,
@@ -93,13 +94,32 @@ const meta: Meta = {
         category: 'General',
       },
     },
+    sizeFloatingLabel: {
+      name: 'Size',
+      description: "Sets the size of the component's appearance.",
+      if: {
+        arg: 'floatingLabel',
+        truthy: true,
+      },
+      control: {
+        type: 'select',
+        labels: {
+          'form-control-sm': 'Small',
+          'form-control-lg': 'Large',
+        },
+      },
+      options: ['form-control-sm', 'form-control-lg'],
+      table: {
+        category: 'General',
+      },
+    },
     rows: {
       name: 'Rows',
       description:
         'Attribute to set the initial height, in lines of text, of the `textarea` element.',
       control: {
         type: 'number',
-        min: 3,
+        min: 2,
         max: 10,
         step: 1,
       },
@@ -153,11 +173,14 @@ type Story = StoryObj;
 
 function renderTextarea(args: Args, context: StoryContext) {
   const id = `${context.viewMode}_${context.story.replace(/\s/g, '-')}_ExampleTextarea`;
-  const classes = mapClasses({
-    'form-control': true,
-    [args.size]: args.size && args.size !== 'null',
-    [args.validation]: args.validation && args.validation !== 'null',
-  });
+  const classes = [
+    'form-control',
+    args.floatingLabel ? args.sizeFloatingLabel : args.size,
+    args.validation,
+  ]
+    .filter(c => c && c !== 'null')
+    .join(' ');
+
   const useAriaLabel = !args.floatingLabel && args.hiddenLabel;
   const label = !useAriaLabel
     ? html` <label for=${id} class="form-label">${args.label}</label> `
diff --git a/packages/styles/src/components/form-textarea.scss b/packages/styles/src/components/form-textarea.scss
index f03786d930..a1b798f233 100644
--- a/packages/styles/src/components/form-textarea.scss
+++ b/packages/styles/src/components/form-textarea.scss
@@ -1,8 +1,22 @@
 @use './../variables/spacing';
 @use './../variables/components/forms';
+@use './../functions/sizing';
 
 textarea {
   &.form-control {
+    &.form-control-lg {
+      padding-top: spacing.$size-regular;
+      padding-bottom: spacing.$size-mini;
+      padding-left: spacing.$size-regular;
+    }
+
+    &.form-control-sm {
+      padding-top: sizing.px-to-rem(7);
+      padding-left: spacing.$size-regular;
+      padding-right: sizing.px-to-rem(22);
+      padding-bottom: 0;
+    }
+
     &::-webkit-resizer {
       background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 15 15' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='#{forms.$input-border-color}' d='M0 12H3V15H0V12Z'/%3E%3Cpath fill='#{forms.$input-border-color}' d='M6 12H9V15H6V12Z'/%3E%3Cpath fill='#{forms.$input-border-color}' d='M6 6H9V9H6V6Z'/%3E%3Cpath fill='#{forms.$input-border-color}' d='M12 6H15V9H12V6Z'/%3E%3Cpath fill='#{forms.$input-border-color}' d='M12 0H15V3H12V0Z'/%3E%3Cpath fill='#{forms.$input-border-color}' d='M12 12H15V15H12V12Z'/%3E%3C/svg%3E");
       background-repeat: no-repeat;
diff --git a/packages/styles/src/variables/components/_forms.scss b/packages/styles/src/variables/components/_forms.scss
index 2610e272af..9feb807f4a 100644
--- a/packages/styles/src/variables/components/_forms.scss
+++ b/packages/styles/src/variables/components/_forms.scss
@@ -17,6 +17,7 @@ $form-bg-size-sm: 24px !default;
 
 $form-label-margin-bottom: 0.5rem !default;
 $form-label-color: var(--post-contrast-color) !default;
+$form-label-font-size-sm: type.$font-size-14;
 
 $input-padding-y: button.$input-btn-padding-y !default;
 $input-padding-x: button.$input-btn-padding-x !default;

From 40bb3ef634de53df5acc06f2f0c591f90e967f08 Mon Sep 17 00:00:00 2001
From: davidritter-dotcom <david.ritter.1@post.ch>
Date: Thu, 15 Feb 2024 17:07:58 +0100
Subject: [PATCH 06/22] feat(styles): floating label large

---
 .../styles/src/components/floating-label.scss | 23 +++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/packages/styles/src/components/floating-label.scss b/packages/styles/src/components/floating-label.scss
index c0ea34fc5b..b1784cbeed 100644
--- a/packages/styles/src/components/floating-label.scss
+++ b/packages/styles/src/components/floating-label.scss
@@ -210,8 +210,10 @@
   }
 
   > textarea.form-control {
-    padding-top: forms.$input-padding-y-lg * 2;
-    padding-bottom: forms.$input-padding-y-lg;
+    // padding-top: forms.$input-padding-y-lg * 2;
+    padding-top: spacing.$size-regular;
+    padding-bottom: spacing.$size-mini;
+    // padding-bottom: forms.$input-padding-y-lg;
     height: auto;
 
     ~ label {
@@ -219,6 +221,9 @@
       width: calc(100% - (#{forms.$input-border-width * 2}));
       max-width: none;
       height: unset;
+      padding-left: spacing.$size-regular;
+      padding-top: spacing.$size-regular;
+      transform-origin: spacing.$size-regular 0;
     }
 
     &:focus,
@@ -238,6 +243,20 @@
       }
     }
 
+    &.form-control-sm {
+      padding-left: spacing.$size-regular;
+      padding-top: spacing.$size-regular;
+      padding-right: forms.$input-padding-y-lg * 2;
+      font-size: forms.$form-floating-label-font-size-placeholder-sm;
+
+      ~ label {
+        font-size: forms.$form-floating-label-font-size-sm;
+        padding-left: spacing.$size-regular;
+        padding-top: spacing.$size-regular;
+        padding-right: forms.$input-padding-y-lg * 2;
+      }
+    }
+
     &:is(.is-valid, .is-invalid) {
       ~ label {
         width: calc(

From 42185c2073f32fc78472ed6f42abec03bf33b34e Mon Sep 17 00:00:00 2001
From: davidritter-dotcom <david.ritter.1@post.ch>
Date: Tue, 20 Feb 2024 15:41:44 +0100
Subject: [PATCH 07/22] feat(styles, documentation): floating label styles for
 small variant

---
 .../forms/textarea/textarea.stories.ts        |  1 -
 .../styles/src/components/floating-label.scss | 57 +++++++++++++------
 .../styles/src/components/form-textarea.scss  | 14 ++---
 .../src/variables/components/_forms.scss      | 19 ++++++-
 4 files changed, 64 insertions(+), 27 deletions(-)

diff --git a/packages/documentation/src/stories/components/forms/textarea/textarea.stories.ts b/packages/documentation/src/stories/components/forms/textarea/textarea.stories.ts
index efef775241..26006879a7 100644
--- a/packages/documentation/src/stories/components/forms/textarea/textarea.stories.ts
+++ b/packages/documentation/src/stories/components/forms/textarea/textarea.stories.ts
@@ -22,7 +22,6 @@ const meta: Meta = {
     value: undefined,
     size: 'form-control-lg',
     sizeFloatingLabel: 'form-control-lg',
-    rows: 4,
     hint: 'Hintus textus elare volare cantare hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.',
     disabled: false,
     validation: 'null',
diff --git a/packages/styles/src/components/floating-label.scss b/packages/styles/src/components/floating-label.scss
index b1784cbeed..979506f599 100644
--- a/packages/styles/src/components/floating-label.scss
+++ b/packages/styles/src/components/floating-label.scss
@@ -210,10 +210,8 @@
   }
 
   > textarea.form-control {
-    // padding-top: forms.$input-padding-y-lg * 2;
-    padding-top: spacing.$size-regular;
-    padding-bottom: spacing.$size-mini;
-    // padding-bottom: forms.$input-padding-y-lg;
+    padding-top: forms.$form-textarea-padding-t;
+    padding-bottom: forms.$form-textarea-padding-b;
     height: auto;
 
     ~ label {
@@ -221,18 +219,21 @@
       width: calc(100% - (#{forms.$input-border-width * 2}));
       max-width: none;
       height: unset;
-      padding-left: spacing.$size-regular;
-      padding-top: spacing.$size-regular;
-      transform-origin: spacing.$size-regular 0;
+      padding-left: forms.$form-textarea-padding-l;
+      padding-top: forms.$form-textarea-padding-t;
+      transform-origin: forms.$form-textarea-padding-l 0;
     }
 
     &:focus,
     &:not(:placeholder-shown) {
-      padding-top: forms.$input-padding-y-lg * 2;
-      padding-bottom: forms.$input-padding-y-lg;
+      padding-top: (
+          forms.$form-textarea-padding-t * forms.$form-floating-label-scale +
+            forms.$form-floating-label-font-size * forms.$form-floating-line-height
+        ) * forms.$form-floating-label-scale;
+      padding-bottom: forms.$form-textarea-padding-b;
 
       ~ label {
-        padding-top: forms.$input-padding-y-lg * forms.$form-floating-label-scale;
+        padding-top: forms.$form-textarea-padding-t * forms.$form-floating-label-scale;
         width: calc(
           (100% * #{forms.$form-floating-label-upscale}) - #{forms.$form-floating-label-translate-x *
             forms.$form-floating-label-upscale * 2} - #{forms.$input-border-width * forms.$form-floating-label-upscale *
@@ -244,16 +245,38 @@
     }
 
     &.form-control-sm {
-      padding-left: spacing.$size-regular;
-      padding-top: spacing.$size-regular;
-      padding-right: forms.$input-padding-y-lg * 2;
+      padding-left: forms.$form-textarea-padding-l;
+      padding-top: forms.$form-textarea-padding-t;
+      padding-right: forms.$form-textarea-padding-r;
       font-size: forms.$form-floating-label-font-size-placeholder-sm;
+      height: auto;
 
       ~ label {
-        font-size: forms.$form-floating-label-font-size-sm;
-        padding-left: spacing.$size-regular;
-        padding-top: spacing.$size-regular;
-        padding-right: forms.$input-padding-y-lg * 2;
+        font-size: forms.$form-floating-label-font-size-placeholder-sm;
+        padding-left: forms.$form-textarea-padding-l;
+        padding-top: forms.$form-textarea-padding-t;
+        padding-right: forms.$form-textarea-padding-r;
+      }
+
+      &:focus,
+      &:not(:placeholder-shown) {
+        padding-top: (
+            forms.$form-textarea-padding-t * forms.$form-floating-label-scale-sm +
+              forms.$form-floating-label-font-size-placeholder-sm * forms.$input-line-height-sm
+          ) * forms.$form-floating-label-scale-sm;
+        padding-bottom: forms.$form-textarea-padding-b;
+
+        ~ label {
+          transform: scale(forms.$form-floating-label-scale-sm);
+          padding-top: forms.$form-textarea-padding-t * forms.$form-floating-label-scale-sm;
+          width: calc(
+            (100% * #{forms.$form-floating-label-upscale-sm}) - #{forms.$form-floating-label-translate-x-sm *
+              forms.$form-floating-label-upscale-sm * 2} - #{forms.$input-border-width * forms.$form-floating-label-upscale-sm *
+              2} - #{forms.$form-floating-padding-x-sm * forms.$form-floating-label-upscale-sm}
+          );
+          max-width: none;
+          background: forms.$input-bg;
+        }
       }
     }
 
diff --git a/packages/styles/src/components/form-textarea.scss b/packages/styles/src/components/form-textarea.scss
index a1b798f233..0e316c604d 100644
--- a/packages/styles/src/components/form-textarea.scss
+++ b/packages/styles/src/components/form-textarea.scss
@@ -5,16 +5,16 @@
 textarea {
   &.form-control {
     &.form-control-lg {
-      padding-top: spacing.$size-regular;
-      padding-bottom: spacing.$size-mini;
-      padding-left: spacing.$size-regular;
+      padding-top: forms.$form-textarea-padding-t;
+      padding-bottom: forms.$form-textarea-padding-b;
+      padding-left: forms.$form-textarea-padding-l;
     }
 
     &.form-control-sm {
-      padding-top: sizing.px-to-rem(7);
-      padding-left: spacing.$size-regular;
-      padding-right: sizing.px-to-rem(22);
-      padding-bottom: 0;
+      padding-top: forms.$form-textarea-padding-t-sm;
+      padding-right: forms.$form-textarea-padding-r;
+      padding-left: forms.$form-textarea-padding-l;
+      padding-bottom: forms.$form-textarea-padding-b-sm;
     }
 
     &::-webkit-resizer {
diff --git a/packages/styles/src/variables/components/_forms.scss b/packages/styles/src/variables/components/_forms.scss
index 9feb807f4a..f8f78b446a 100644
--- a/packages/styles/src/variables/components/_forms.scss
+++ b/packages/styles/src/variables/components/_forms.scss
@@ -119,6 +119,14 @@ $form-range-input-height-ie: 6rem !default;
 
 $form-file-button-hover-bg: $input-bg;
 
+$form-textarea-padding-r: sizing.px-to-rem(22) !default;
+$form-textarea-padding-l: spacing.$size-regular;
+$form-textarea-padding-t: spacing.$size-regular;
+$form-textarea-padding-b: spacing.$size-mini;
+
+$form-textarea-padding-t-sm: sizing.px-to-rem(7);
+$form-textarea-padding-b-sm: 0;
+
 $form-floating-height: $input-height-lg * $input-line-height-lg;
 $form-floating-padding-x: $input-padding-x-lg;
 $form-floating-padding-y: $input-padding-y-lg;
@@ -128,8 +136,8 @@ $form-floating-input-padding-b: 0;
 $form-floating-label-opacity: 1;
 $form-floating-label-height: $form-floating-height;
 $form-floating-label-color: $input-placeholder-color;
-$form-floating-label-font-size: type.$font-size-bigger-regular;
-$form-floating-label-font-size-small: type.$font-size-tiny;
+$form-floating-label-font-size: type.$font-size-16;
+$form-floating-label-font-size-small: type.$font-size-12;
 $form-floating-label-scale: math.div(
   $form-floating-label-font-size-small,
   $form-floating-label-font-size
@@ -150,8 +158,15 @@ $form-floating-select-bg-size: 32px 32px;
 
 $form-floating-label-font-size-sm: type.$font-size-12;
 $form-floating-label-font-size-placeholder-sm: type.$font-size-14;
+$form-floating-label-scale-sm: math.div(
+  $form-floating-label-font-size-sm,
+  $form-floating-label-font-size-placeholder-sm
+);
+$form-floating-label-upscale-sm: math.div(1, $form-floating-label-scale-sm);
 $form-floating-padding-x-sm: spacing.$size-regular;
 $form-floating-padding-y-sm: $input-padding-y-sm;
+$form-floating-label-translate-x-sm: $form-floating-padding-x-sm *
+  (1 - $form-floating-label-scale-sm);
 $form-floating-label-height-sm: $form-floating-input-height-sm;
 $form-floating-label-padding-t-sm: $form-floating-label-height-sm * 0.5 -
   $form-floating-label-font-size-sm;

From c61087706b040a43034680fd34fa7e870e262b92 Mon Sep 17 00:00:00 2001
From: davidritter-dotcom <david.ritter.1@post.ch>
Date: Fri, 8 Mar 2024 17:12:28 +0100
Subject: [PATCH 08/22] feat(styles): validation states and label size

---
 packages/styles/src/components/form-validation.scss | 12 ++++++++++++
 packages/styles/src/components/forms.scss           |  5 +++++
 2 files changed, 17 insertions(+)

diff --git a/packages/styles/src/components/form-validation.scss b/packages/styles/src/components/form-validation.scss
index 010fb06350..b38faf58a4 100644
--- a/packages/styles/src/components/form-validation.scss
+++ b/packages/styles/src/components/form-validation.scss
@@ -142,6 +142,18 @@
   }
 }
 
+textarea.form-control {
+  &.is-invalid,
+  &.is-valid {
+    background-position: right spacing.$size-micro top spacing.$size-mini;
+
+    &.form-select-sm,
+    &.form-control-sm {
+      background-position: right spacing.$size-micro top spacing.$size-mini;
+    }
+  }
+}
+
 .form-check-input {
   @include form-validation-mx.form-validation-state-selector(invalid) {
     border-color: form-validation.$form-feedback-invalid-color;
diff --git a/packages/styles/src/components/forms.scss b/packages/styles/src/components/forms.scss
index 9e3feb498f..25643ff4f8 100644
--- a/packages/styles/src/components/forms.scss
+++ b/packages/styles/src/components/forms.scss
@@ -3,6 +3,7 @@
 @use './../lic/bootstrap-license';
 
 @use './../variables/components/forms';
+@use './../variables/type';
 
 @use './../mixins/utilities';
 @use './../mixins/forms' as form-mixins;
@@ -147,3 +148,7 @@ select.form-control-rg:not([size]):not([multiple]) {
     }
   }
 }
+
+.form-label:has(+ .form-control-sm, + .form-select-sm) {
+  font-size: type.$font-size-14;
+}

From 1d56366015a007b92a8dd76dafe8a4e9e3ce646d Mon Sep 17 00:00:00 2001
From: davidritter-dotcom <david.ritter.1@post.ch>
Date: Tue, 19 Mar 2024 12:52:19 +0100
Subject: [PATCH 09/22] feat(styles): disabled styles

---
 .../styles/src/components/form-textarea.scss  | 13 --------
 packages/styles/src/components/forms.scss     | 30 +++++++++++++++++--
 .../src/variables/components/_forms.scss      |  1 +
 3 files changed, 29 insertions(+), 15 deletions(-)

diff --git a/packages/styles/src/components/form-textarea.scss b/packages/styles/src/components/form-textarea.scss
index 0e316c604d..2fa0dce5f6 100644
--- a/packages/styles/src/components/form-textarea.scss
+++ b/packages/styles/src/components/form-textarea.scss
@@ -4,19 +4,6 @@
 
 textarea {
   &.form-control {
-    &.form-control-lg {
-      padding-top: forms.$form-textarea-padding-t;
-      padding-bottom: forms.$form-textarea-padding-b;
-      padding-left: forms.$form-textarea-padding-l;
-    }
-
-    &.form-control-sm {
-      padding-top: forms.$form-textarea-padding-t-sm;
-      padding-right: forms.$form-textarea-padding-r;
-      padding-left: forms.$form-textarea-padding-l;
-      padding-bottom: forms.$form-textarea-padding-b-sm;
-    }
-
     &::-webkit-resizer {
       background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 15 15' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='#{forms.$input-border-color}' d='M0 12H3V15H0V12Z'/%3E%3Cpath fill='#{forms.$input-border-color}' d='M6 12H9V15H6V12Z'/%3E%3Cpath fill='#{forms.$input-border-color}' d='M6 6H9V9H6V6Z'/%3E%3Cpath fill='#{forms.$input-border-color}' d='M12 6H15V9H12V6Z'/%3E%3Cpath fill='#{forms.$input-border-color}' d='M12 0H15V3H12V0Z'/%3E%3Cpath fill='#{forms.$input-border-color}' d='M12 12H15V15H12V12Z'/%3E%3C/svg%3E");
       background-repeat: no-repeat;
diff --git a/packages/styles/src/components/forms.scss b/packages/styles/src/components/forms.scss
index 25643ff4f8..d78065336a 100644
--- a/packages/styles/src/components/forms.scss
+++ b/packages/styles/src/components/forms.scss
@@ -25,6 +25,21 @@
   @include form-mixins.form-lg;
 }
 
+textarea {
+  &.form-control-lg {
+    padding-top: forms.$form-textarea-padding-t;
+    padding-bottom: forms.$form-textarea-padding-b;
+    padding-left: forms.$form-textarea-padding-l;
+  }
+
+  &.form-control-sm {
+    padding-top: forms.$form-textarea-padding-t-sm;
+    padding-right: forms.$form-textarea-padding-r;
+    padding-left: forms.$form-textarea-padding-l;
+    padding-bottom: forms.$form-textarea-padding-b-sm;
+  }
+}
+
 select.form-control-rg:not([size]):not([multiple]) {
   height: forms.$input-height-rg;
 }
@@ -34,6 +49,11 @@ select.form-control-rg:not([size]):not([multiple]) {
 
   &:disabled {
     color: forms.$input-disabled-color;
+    border: forms.$input-disabled-boarder-style;
+
+    & + .form-text {
+      color: forms.$input-disabled-color;
+    }
   }
 
   &[readonly]:not(:disabled) {
@@ -149,6 +169,12 @@ select.form-control-rg:not([size]):not([multiple]) {
   }
 }
 
-.form-label:has(+ .form-control-sm, + .form-select-sm) {
-  font-size: type.$font-size-14;
+.form-label {
+  &:has(+ .form-control-sm, + .form-select-sm) {
+    font-size: type.$font-size-14;
+  }
+
+  &:has(+ .form-control:disabled) {
+    color: forms.$input-disabled-color;
+  }
 }
diff --git a/packages/styles/src/variables/components/_forms.scss b/packages/styles/src/variables/components/_forms.scss
index f8f78b446a..03c7d3934b 100644
--- a/packages/styles/src/variables/components/_forms.scss
+++ b/packages/styles/src/variables/components/_forms.scss
@@ -39,6 +39,7 @@ $input-bg: color.$white !default;
 $input-disabled-bg: rgba(var(--post-contrast-color-inverted-rgb), 0.6) !default;
 $input-disabled-color: color.$gray-40; // Design System only
 $input-disabled-border-color: color.$gray-40; // Design System only
+$input-disabled-boarder-style: dashed;
 
 $input-color: color.$black !default;
 $input-border-color: color.$gray-60 !default;

From 05723e7aa004eeec575b45ad562e5c415b19d284 Mon Sep 17 00:00:00 2001
From: davidritter-dotcom <david.ritter.1@post.ch>
Date: Tue, 19 Mar 2024 16:55:02 +0100
Subject: [PATCH 10/22] feat(styles): textarea and input disabled state and
 focus

---
 .../styles/src/components/form-textarea.scss     | 14 +++++++++-----
 packages/styles/src/components/forms.scss        | 10 +++++-----
 .../styles/src/variables/components/_forms.scss  | 16 ++++++++--------
 3 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/packages/styles/src/components/form-textarea.scss b/packages/styles/src/components/form-textarea.scss
index 2fa0dce5f6..2b8b4c8299 100644
--- a/packages/styles/src/components/form-textarea.scss
+++ b/packages/styles/src/components/form-textarea.scss
@@ -2,12 +2,16 @@
 @use './../variables/components/forms';
 @use './../functions/sizing';
 
-textarea {
-  &.form-control {
+textarea.form-control {
+  &::-webkit-resizer {
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 15 15' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='#{forms.$input-border-color}' d='M0 12H3V15H0V12Z'/%3E%3Cpath fill='#{forms.$input-border-color}' d='M6 12H9V15H6V12Z'/%3E%3Cpath fill='#{forms.$input-border-color}' d='M6 6H9V9H6V6Z'/%3E%3Cpath fill='#{forms.$input-border-color}' d='M12 6H15V9H12V6Z'/%3E%3Cpath fill='#{forms.$input-border-color}' d='M12 0H15V3H12V0Z'/%3E%3Cpath fill='#{forms.$input-border-color}' d='M12 12H15V15H12V12Z'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-size: 75%;
+  }
+
+  &[disabled] {
     &::-webkit-resizer {
-      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 15 15' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='#{forms.$input-border-color}' d='M0 12H3V15H0V12Z'/%3E%3Cpath fill='#{forms.$input-border-color}' d='M6 12H9V15H6V12Z'/%3E%3Cpath fill='#{forms.$input-border-color}' d='M6 6H9V9H6V6Z'/%3E%3Cpath fill='#{forms.$input-border-color}' d='M12 6H15V9H12V6Z'/%3E%3Cpath fill='#{forms.$input-border-color}' d='M12 0H15V3H12V0Z'/%3E%3Cpath fill='#{forms.$input-border-color}' d='M12 12H15V15H12V12Z'/%3E%3C/svg%3E");
-      background-repeat: no-repeat;
-      background-size: 75%;
+      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 15 15' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='#{forms.$input-disabled-border-color}' d='M0 12H3V15H0V12Z'/%3E%3Cpath fill='#{forms.$input-disabled-border-color}' d='M6 12H9V15H6V12Z'/%3E%3Cpath fill='#{forms.$input-disabled-border-color}' d='M6 6H9V9H6V6Z'/%3E%3Cpath fill='#{forms.$input-disabled-border-color}' d='M12 6H15V9H12V6Z'/%3E%3Cpath fill='#{forms.$input-disabled-border-color}' d='M12 0H15V3H12V0Z'/%3E%3Cpath fill='#{forms.$input-disabled-border-color}' d='M12 12H15V15H12V12Z'/%3E%3C/svg%3E");
     }
   }
 }
diff --git a/packages/styles/src/components/forms.scss b/packages/styles/src/components/forms.scss
index d78065336a..37f7002644 100644
--- a/packages/styles/src/components/forms.scss
+++ b/packages/styles/src/components/forms.scss
@@ -46,18 +46,18 @@ select.form-control-rg:not([size]):not([multiple]) {
 
 .form-control {
   position: relative;
+  @include utilities.focus-style();
 
-  &:disabled {
+  &[disabled] {
     color: forms.$input-disabled-color;
     border: forms.$input-disabled-boarder-style;
-
-    & + .form-text {
+    & ~ .form-text {
       color: forms.$input-disabled-color;
     }
   }
 
   &[readonly]:not(:disabled) {
-    border-color: forms.$input-border-color;
+    border-color: forms.$input-color;
     background-color: forms.$input-bg;
   }
 
@@ -174,7 +174,7 @@ select.form-control-rg:not([size]):not([multiple]) {
     font-size: type.$font-size-14;
   }
 
-  &:has(+ .form-control:disabled) {
+  &:has(+ .form-control[disabled]) {
     color: forms.$input-disabled-color;
   }
 }
diff --git a/packages/styles/src/variables/components/_forms.scss b/packages/styles/src/variables/components/_forms.scss
index 251b879b50..1866c5af9f 100644
--- a/packages/styles/src/variables/components/_forms.scss
+++ b/packages/styles/src/variables/components/_forms.scss
@@ -36,13 +36,13 @@ $input-padding-x-lg: button.$input-btn-padding-x-lg !default;
 $input-line-height-lg: type.$line-height-copy !default;
 
 $input-bg: color.$white !default;
-$input-disabled-bg: rgba(var(--post-contrast-color-inverted-rgb), 0.6) !default;
-$input-disabled-color: rgba(var(--post-contrast-color-rgb), 0.6); // Design System only
+$input-disabled-bg: rgba(var(--post-contrast-color-inverted-rgb), 0.4) !default;
+$input-disabled-color: rgba(var(--post-contrast-color-rgb), 0.4); // Design System only
 $input-disabled-border-color: color.$gray-40; // Design System only
-$input-disabled-boarder-style: dashed;
+$input-disabled-boarder-style: spacing.$size-line dashed;
 
 $input-color: color.$black !default;
-$input-border-color: color.$gray-60 !default;
+$input-border-color: color.$gray-80 !default;
 $input-border-width: button.$input-btn-border-width !default;
 $input-box-shadow: none !default;
 
@@ -51,11 +51,11 @@ $input-border-radius-lg: 0 !default;
 $input-border-radius-rg: 0 !default;
 $input-border-radius-sm: 0 !default;
 
-$input-focus-bg: $input-bg !default;
-$input-focus-border-color: var(--post-contrast-color-rgb) !default;
-$input-focus-color: $input-color !default;
+$input-focus-bg: inherit !default;
+$input-focus-border-color: inherit !default;
+$input-focus-color: inherit !default;
 $input-focus-width: button.$input-btn-focus-width !default;
-$input-focus-box-shadow: 0 0 0 $input-focus-width rgba($input-focus-border-color, 0.25) !default;
+$input-focus-box-shadow: none !default;
 $input-focus-outline-thickness: spacing.$size-line;
 
 $input-placeholder-color: color.$gray-60 !default;

From 74bbcdecb056169ddb91c9864cd10f19be498c96 Mon Sep 17 00:00:00 2001
From: davidritter-dotcom <david.ritter.1@post.ch>
Date: Wed, 20 Mar 2024 11:42:42 +0100
Subject: [PATCH 11/22] feat(styles): validated styles and accessibility test

---
 .../cypress/e2e/components/textarea.cy.ts              |  3 ---
 packages/styles/src/components/form-validation.scss    | 10 ++++------
 packages/styles/src/components/forms.scss              |  2 +-
 .../src/variables/components/_form-validation.scss     |  6 ++++--
 packages/styles/src/variables/components/_forms.scss   |  2 +-
 5 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/packages/documentation/cypress/e2e/components/textarea.cy.ts b/packages/documentation/cypress/e2e/components/textarea.cy.ts
index 63e460754d..0fcbd28056 100644
--- a/packages/documentation/cypress/e2e/components/textarea.cy.ts
+++ b/packages/documentation/cypress/e2e/components/textarea.cy.ts
@@ -9,9 +9,6 @@ describe('Textarea', () => {
     it('Has no detectable a11y violations on load for all variants', () => {
       cy.checkA11y('#root-inner', {
         rules: {
-          'color-contrast': {
-            enabled: false,
-          },
           'duplicate-id-aria': {
             enabled: false,
           },
diff --git a/packages/styles/src/components/form-validation.scss b/packages/styles/src/components/form-validation.scss
index 5355b33348..2616e77ae9 100644
--- a/packages/styles/src/components/form-validation.scss
+++ b/packages/styles/src/components/form-validation.scss
@@ -112,9 +112,8 @@
       }
     }
 
-    &:focus {
-      border-color: form-validation.$form-feedback-invalid-color;
-      box-shadow: form-validation.$form-feedback-invalid-box-shadow;
+    &.form-control-sm ~ .invalid-feedback {
+      padding: form-validation.$form-feedback-padding-y-sm form-validation.$form-feedback-padding-x;
     }
   }
 
@@ -130,9 +129,8 @@
       }
     }
 
-    &:focus {
-      border-color: form-validation.$form-feedback-valid-color;
-      box-shadow: form-validation.$form-feedback-valid-box-shadow;
+    &.form-control-sm ~ .valid-feedback {
+      padding: form-validation.$form-feedback-padding-y-sm form-validation.$form-feedback-padding-x;
     }
   }
 
diff --git a/packages/styles/src/components/forms.scss b/packages/styles/src/components/forms.scss
index 37f7002644..d143354b13 100644
--- a/packages/styles/src/components/forms.scss
+++ b/packages/styles/src/components/forms.scss
@@ -49,7 +49,7 @@ select.form-control-rg:not([size]):not([multiple]) {
   @include utilities.focus-style();
 
   &[disabled] {
-    color: forms.$input-disabled-color;
+    color: forms.$input-disabled-border-color;
     border: forms.$input-disabled-boarder-style;
     & ~ .form-text {
       color: forms.$input-disabled-color;
diff --git a/packages/styles/src/variables/components/_form-validation.scss b/packages/styles/src/variables/components/_form-validation.scss
index bf1280c968..ce25e70661 100644
--- a/packages/styles/src/variables/components/_form-validation.scss
+++ b/packages/styles/src/variables/components/_form-validation.scss
@@ -4,6 +4,7 @@
 @use './../components/button';
 @use './../components/forms';
 @use './../../functions/icons';
+@use './../../functions/sizing';
 
 // Bootstrap variables
 $form-feedback-margin-top: 0 !default;
@@ -21,8 +22,9 @@ $form-feedback-icon-invalid-hcm-light: url(icons.get-colored-svg-url(
 )) !default;
 
 // Design System custom variables
-$form-feedback-padding-x: button.$input-btn-padding-x !default;
-$form-feedback-padding-y: 0.5 * button.$input-btn-padding-x !default;
+$form-feedback-padding-x: spacing.$size-regular !default;
+$form-feedback-padding-y: sizing.px-to-rem(6);
+$form-feedback-padding-y-sm: spacing.$size-micro;
 $form-feedback-icon-size: 2rem !default; // Equals 24pt [svg-size]
 $form-feedback-icon-offset: spacing.$size-mini !default;
 $form-feedback-valid-bg: color.$success-green !default;
diff --git a/packages/styles/src/variables/components/_forms.scss b/packages/styles/src/variables/components/_forms.scss
index 1866c5af9f..c29f696472 100644
--- a/packages/styles/src/variables/components/_forms.scss
+++ b/packages/styles/src/variables/components/_forms.scss
@@ -37,7 +37,7 @@ $input-line-height-lg: type.$line-height-copy !default;
 
 $input-bg: color.$white !default;
 $input-disabled-bg: rgba(var(--post-contrast-color-inverted-rgb), 0.4) !default;
-$input-disabled-color: rgba(var(--post-contrast-color-rgb), 0.4); // Design System only
+$input-disabled-color: rgba(var(--post-contrast-color-rgb), 0.6); // Design System only
 $input-disabled-border-color: color.$gray-40; // Design System only
 $input-disabled-boarder-style: spacing.$size-line dashed;
 

From 6120bee8d6402f741cf3ee19f7fb58d26c418b28 Mon Sep 17 00:00:00 2001
From: davidritter-dotcom <david.ritter.1@post.ch>
Date: Tue, 26 Mar 2024 11:41:53 +0100
Subject: [PATCH 12/22] feat(styles): small change

---
 .../styles/src/components/floating-label.scss | 55 +++++++++++++------
 packages/styles/src/mixins/_forms.scss        |  2 +-
 .../src/variables/components/_forms.scss      |  4 +-
 3 files changed, 40 insertions(+), 21 deletions(-)

diff --git a/packages/styles/src/components/floating-label.scss b/packages/styles/src/components/floating-label.scss
index 457e1a2899..524ab0848a 100644
--- a/packages/styles/src/components/floating-label.scss
+++ b/packages/styles/src/components/floating-label.scss
@@ -215,8 +215,12 @@
   }
 
   > textarea.form-control {
-    padding-top: forms.$form-textarea-padding-t;
+    padding-top: (
+      forms.$form-textarea-padding-t-sm + forms.$form-floating-label-font-size *
+        forms.$form-floating-line-height * forms.$form-floating-label-scale
+    ) !important;
     padding-bottom: forms.$form-textarea-padding-b;
+    padding-left: forms.$form-textarea-padding-l;
     height: auto;
 
     ~ label {
@@ -227,18 +231,15 @@
       padding-left: forms.$form-textarea-padding-l;
       padding-top: forms.$form-textarea-padding-t;
       transform-origin: forms.$form-textarea-padding-l 0;
+      background-color: green !important;
     }
 
     &:focus,
     &:not(:placeholder-shown) {
-      padding-top: (
-          forms.$form-textarea-padding-t * forms.$form-floating-label-scale +
-            forms.$form-floating-label-font-size * forms.$form-floating-line-height
-        ) * forms.$form-floating-label-scale;
       padding-bottom: forms.$form-textarea-padding-b;
 
       ~ label {
-        padding-top: forms.$form-textarea-padding-t * forms.$form-floating-label-scale;
+        padding-top: forms.$form-textarea-padding-t-sm;
         width: calc(
           (100% * #{forms.$form-floating-label-upscale}) - #{forms.$form-floating-label-translate-x *
             forms.$form-floating-label-upscale * 2} - #{forms.$input-border-width * forms.$form-floating-label-upscale *
@@ -250,8 +251,10 @@
     }
 
     &.form-control-sm {
-      padding-left: forms.$form-textarea-padding-l;
-      padding-top: forms.$form-textarea-padding-t;
+      padding-top: (
+        forms.$form-textarea-padding-t-sm + forms.$form-floating-label-font-size-placeholder-sm *
+          forms.$input-line-height-sm * forms.$form-floating-label-scale-sm
+      ) !important;
       padding-right: forms.$form-textarea-padding-r;
       font-size: forms.$form-floating-label-font-size-placeholder-sm;
       height: auto;
@@ -265,15 +268,11 @@
 
       &:focus,
       &:not(:placeholder-shown) {
-        padding-top: (
-            forms.$form-textarea-padding-t * forms.$form-floating-label-scale-sm +
-              forms.$form-floating-label-font-size-placeholder-sm * forms.$input-line-height-sm
-          ) * forms.$form-floating-label-scale-sm;
         padding-bottom: forms.$form-textarea-padding-b;
 
         ~ label {
           transform: scale(forms.$form-floating-label-scale-sm);
-          padding-top: forms.$form-textarea-padding-t * forms.$form-floating-label-scale-sm;
+          padding-top: forms.$form-textarea-padding-t-sm;
           width: calc(
             (100% * #{forms.$form-floating-label-upscale-sm}) - #{forms.$form-floating-label-translate-x-sm *
               forms.$form-floating-label-upscale-sm * 2} - #{forms.$input-border-width * forms.$form-floating-label-upscale-sm *
@@ -288,8 +287,8 @@
     &:is(.is-valid, .is-invalid) {
       ~ label {
         width: calc(
-          100% - (#{forms.$input-border-width * 2}) - #{forms.$form-floating-padding-x} - #{form-validation.$form-feedback-icon-offset} -
-            #{form-validation.$form-feedback-icon-size}
+          100% - (#{forms.$input-border-width * 2}) - #{form-validation.$form-feedback-icon-offset} -
+            #{forms.$form-bg-size}
         );
       }
 
@@ -299,11 +298,31 @@
           width: calc(
             (100% * #{forms.$form-floating-label-upscale}) - #{forms.$form-floating-label-translate-x *
               forms.$form-floating-label-upscale * 2} - #{forms.$input-border-width * forms.$form-floating-label-upscale *
-              2} - #{forms.$form-floating-padding-x * forms.$form-floating-label-upscale} - #{form-validation.$form-feedback-icon-offset *
-              forms.$form-floating-label-upscale} - #{form-validation.$form-feedback-icon-size *
-              forms.$form-floating-label-upscale}
+              2} - #{form-validation.$form-feedback-icon-offset * forms.$form-floating-label-upscale} -
+              #{form-validation.$form-feedback-icon-size * forms.$form-floating-label-upscale}
+          );
+        }
+      }
+
+      &.form-control-sm {
+        ~ label {
+          width: calc(
+            100% - (#{forms.$input-border-width * 2}) - #{form-validation.$form-feedback-icon-offset} -
+              #{forms.$form-bg-size-sm}
           );
         }
+
+        &:focus,
+        &:not(:placeholder-shown) {
+          ~ label {
+            width: calc(
+              (100% * #{forms.$form-floating-label-upscale}) - #{forms.$form-floating-label-translate-x *
+                forms.$form-floating-label-upscale-sm * 2} - #{forms.$input-border-width * forms.$form-floating-label-upscale-sm *
+                2} - #{form-validation.$form-feedback-icon-offset *
+                forms.$form-floating-label-upscale-sm} - #{forms.$form-bg-size-sm * forms.$form-floating-label-upscale-sm}
+            );
+          }
+        }
       }
     }
   }
diff --git a/packages/styles/src/mixins/_forms.scss b/packages/styles/src/mixins/_forms.scss
index 912d3820a2..ca11c46b1a 100644
--- a/packages/styles/src/mixins/_forms.scss
+++ b/packages/styles/src/mixins/_forms.scss
@@ -42,7 +42,7 @@
 }
 
 @mixin form-lg {
-  font-size: type.$font-size-16;
+  font-size: type.$font-size-16 !important;
   line-height: forms.$input-line-height-lg;
   min-height: forms.$input-height-lg;
 }
diff --git a/packages/styles/src/variables/components/_forms.scss b/packages/styles/src/variables/components/_forms.scss
index c29f696472..5f812eb37a 100644
--- a/packages/styles/src/variables/components/_forms.scss
+++ b/packages/styles/src/variables/components/_forms.scss
@@ -25,7 +25,7 @@ $input-line-height: type.$line-height-copy !default;
 
 $input-padding-y-sm: button.$input-btn-padding-y-sm !default;
 $input-padding-x-sm: button.$input-btn-padding-x-sm !default;
-$input-line-height-sm: type.$line-height-sm !default;
+$input-line-height-sm: type.$line-height-copy !default;
 
 $input-padding-y-rg: button.$input-btn-padding-y-rg !default;
 $input-padding-x-rg: button.$input-btn-padding-x-rg !default;
@@ -125,7 +125,7 @@ $form-textarea-padding-l: spacing.$size-regular;
 $form-textarea-padding-t: spacing.$size-regular;
 $form-textarea-padding-b: spacing.$size-mini;
 
-$form-textarea-padding-t-sm: sizing.px-to-rem(7);
+$form-textarea-padding-t-sm: spacing.$size-mini;
 $form-textarea-padding-b-sm: 0;
 
 $form-floating-height: $input-height-lg * $input-line-height-lg;

From 7b0dd3ef2f1e1a3404f09a95308f561f921172be Mon Sep 17 00:00:00 2001
From: davidritter-dotcom <david.ritter.1@post.ch>
Date: Tue, 26 Mar 2024 17:47:02 +0100
Subject: [PATCH 13/22] feat(styles): textarea styles update

---
 .../cypress/e2e/components/textarea.cy.ts     |  2 +-
 .../styles/src/components/floating-label.scss | 37 +++++++++----------
 .../src/components/form-validation.scss       |  1 -
 packages/styles/src/components/forms.scss     | 17 +++++----
 .../src/variables/components/_button.scss     |  8 ++--
 .../src/variables/components/_forms.scss      | 12 +-----
 6 files changed, 34 insertions(+), 43 deletions(-)

diff --git a/packages/documentation/cypress/e2e/components/textarea.cy.ts b/packages/documentation/cypress/e2e/components/textarea.cy.ts
index 530096c844..d0e4fc0daf 100644
--- a/packages/documentation/cypress/e2e/components/textarea.cy.ts
+++ b/packages/documentation/cypress/e2e/components/textarea.cy.ts
@@ -7,7 +7,7 @@ describe('Textarea', () => {
     });
 
     it('Has no detectable a11y violations on load for all variants', () => {
-      cy.checkA11y('#root-inner', {});
+      cy.checkA11y('#root-inner');
     });
   });
 });
diff --git a/packages/styles/src/components/floating-label.scss b/packages/styles/src/components/floating-label.scss
index 524ab0848a..8564911903 100644
--- a/packages/styles/src/components/floating-label.scss
+++ b/packages/styles/src/components/floating-label.scss
@@ -216,11 +216,11 @@
 
   > textarea.form-control {
     padding-top: (
-      forms.$form-textarea-padding-t-sm + forms.$form-floating-label-font-size *
-        forms.$form-floating-line-height * forms.$form-floating-label-scale
-    ) !important;
-    padding-bottom: forms.$form-textarea-padding-b;
-    padding-left: forms.$form-textarea-padding-l;
+      spacing.$size-mini + forms.$form-floating-label-font-size * forms.$form-floating-line-height *
+        forms.$form-floating-label-scale
+    ) !important; // The Space needed for the label on focus
+    padding-bottom: spacing.$size-mini;
+    padding-right: spacing.$size-large;
     height: auto;
 
     ~ label {
@@ -228,18 +228,16 @@
       width: calc(100% - (#{forms.$input-border-width * 2}));
       max-width: none;
       height: unset;
-      padding-left: forms.$form-textarea-padding-l;
-      padding-top: forms.$form-textarea-padding-t;
-      transform-origin: forms.$form-textarea-padding-l 0;
-      background-color: green !important;
+      padding-top: spacing.$size-regular;
+      background-color: purple !important;
     }
 
     &:focus,
     &:not(:placeholder-shown) {
-      padding-bottom: forms.$form-textarea-padding-b;
+      padding-bottom: spacing.$size-mini;
 
       ~ label {
-        padding-top: forms.$form-textarea-padding-t-sm;
+        padding-top: spacing.$size-mini;
         width: calc(
           (100% * #{forms.$form-floating-label-upscale}) - #{forms.$form-floating-label-translate-x *
             forms.$form-floating-label-upscale * 2} - #{forms.$input-border-width * forms.$form-floating-label-upscale *
@@ -252,27 +250,27 @@
 
     &.form-control-sm {
       padding-top: (
-        forms.$form-textarea-padding-t-sm + forms.$form-floating-label-font-size-placeholder-sm *
+        spacing.$size-mini + forms.$form-floating-label-font-size-placeholder-sm *
           forms.$input-line-height-sm * forms.$form-floating-label-scale-sm
       ) !important;
-      padding-right: forms.$form-textarea-padding-r;
+      padding-right: spacing.$size-large;
       font-size: forms.$form-floating-label-font-size-placeholder-sm;
       height: auto;
 
       ~ label {
         font-size: forms.$form-floating-label-font-size-placeholder-sm;
-        padding-left: forms.$form-textarea-padding-l;
-        padding-top: forms.$form-textarea-padding-t;
-        padding-right: forms.$form-textarea-padding-r;
+        padding-left: spacing.$size-regular;
+        padding-top: spacing.$size-regular;
+        padding-right: spacing.$size-large;
       }
 
       &:focus,
       &:not(:placeholder-shown) {
-        padding-bottom: forms.$form-textarea-padding-b;
+        padding-bottom: spacing.$size-mini;
 
         ~ label {
           transform: scale(forms.$form-floating-label-scale-sm);
-          padding-top: forms.$form-textarea-padding-t-sm;
+          padding-top: spacing.$size-mini;
           width: calc(
             (100% * #{forms.$form-floating-label-upscale-sm}) - #{forms.$form-floating-label-translate-x-sm *
               forms.$form-floating-label-upscale-sm * 2} - #{forms.$input-border-width * forms.$form-floating-label-upscale-sm *
@@ -314,9 +312,10 @@
 
         &:focus,
         &:not(:placeholder-shown) {
+          padding-right: spacing.$size-bigger-big;
           ~ label {
             width: calc(
-              (100% * #{forms.$form-floating-label-upscale}) - #{forms.$form-floating-label-translate-x *
+              (100% * #{forms.$form-floating-label-upscale-sm}) - #{forms.$form-floating-label-translate-x *
                 forms.$form-floating-label-upscale-sm * 2} - #{forms.$input-border-width * forms.$form-floating-label-upscale-sm *
                 2} - #{form-validation.$form-feedback-icon-offset *
                 forms.$form-floating-label-upscale-sm} - #{forms.$form-bg-size-sm * forms.$form-floating-label-upscale-sm}
diff --git a/packages/styles/src/components/form-validation.scss b/packages/styles/src/components/form-validation.scss
index 2616e77ae9..d245c1ba0e 100644
--- a/packages/styles/src/components/form-validation.scss
+++ b/packages/styles/src/components/form-validation.scss
@@ -160,7 +160,6 @@ textarea.form-control {
   &.is-valid {
     background-position: right spacing.$size-micro top spacing.$size-mini;
 
-    &.form-select-sm,
     &.form-control-sm {
       background-position: right spacing.$size-micro top spacing.$size-mini;
     }
diff --git a/packages/styles/src/components/forms.scss b/packages/styles/src/components/forms.scss
index d143354b13..a6c42d6641 100644
--- a/packages/styles/src/components/forms.scss
+++ b/packages/styles/src/components/forms.scss
@@ -4,6 +4,7 @@
 
 @use './../variables/components/forms';
 @use './../variables/type';
+@use './../variables/spacing';
 
 @use './../mixins/utilities';
 @use './../mixins/forms' as form-mixins;
@@ -27,16 +28,15 @@
 
 textarea {
   &.form-control-lg {
-    padding-top: forms.$form-textarea-padding-t;
-    padding-bottom: forms.$form-textarea-padding-b;
-    padding-left: forms.$form-textarea-padding-l;
+    padding-top: spacing.$size-regular;
+    padding-bottom: spacing.$size-mini;
+    padding-right: spacing.$size-large;
   }
 
   &.form-control-sm {
-    padding-top: forms.$form-textarea-padding-t-sm;
-    padding-right: forms.$form-textarea-padding-r;
-    padding-left: forms.$form-textarea-padding-l;
-    padding-bottom: forms.$form-textarea-padding-b-sm;
+    padding-top: spacing.$size-mini;
+    padding-right: spacing.$size-large;
+    padding-bottom: 0;
   }
 }
 
@@ -171,7 +171,8 @@ select.form-control-rg:not([size]):not([multiple]) {
 
 .form-label {
   &:has(+ .form-control-sm, + .form-select-sm) {
-    font-size: type.$font-size-14;
+    font-size: forms.$form-label-font-size-sm;
+    margin-bottom: spacing.$size-micro;
   }
 
   &:has(+ .form-control[disabled]) {
diff --git a/packages/styles/src/variables/components/_button.scss b/packages/styles/src/variables/components/_button.scss
index 85c8f7d824..442c584ed4 100644
--- a/packages/styles/src/variables/components/_button.scss
+++ b/packages/styles/src/variables/components/_button.scss
@@ -18,16 +18,16 @@ $input-btn-padding-y: spacing.$size-regular - $input-btn-border-width-rem !defau
 $input-btn-padding-x: spacing.$size-small-large - $input-btn-border-width-rem !default;
 $input-btn-line-height: type.$line-height-copy !default;
 
-$input-btn-padding-y-sm: spacing.$size-mini - $input-btn-border-width-rem !default;
-$input-btn-padding-x-sm: spacing.$size-small-regular !default;
+$input-btn-padding-y-sm: spacing.$size-micro !default;
+$input-btn-padding-x-sm: spacing.$size-regular !default;
 $input-btn-line-height-sm: type.$line-height-copy !default;
 
 $input-btn-padding-y-rg: spacing.$size-small-regular - $input-btn-border-width-rem !default;
 $input-btn-padding-x-rg: spacing.$size-regular - $input-btn-border-width-rem !default;
 $input-btn-line-height-rg: type.$line-height-copy !default;
 
-$input-btn-padding-y-lg: spacing.$size-small-large - $input-btn-border-width-rem !default;
-$input-btn-padding-x-lg: spacing.$size-large - $input-btn-border-width-rem !default;
+$input-btn-padding-y-lg: spacing.$size-small-regular !default;
+$input-btn-padding-x-lg: spacing.$size-regular !default;
 $input-btn-line-height-lg: type.$line-height-copy !default;
 
 $input-btn-focus-width: 0.125rem !default; // 2px
diff --git a/packages/styles/src/variables/components/_forms.scss b/packages/styles/src/variables/components/_forms.scss
index 5f812eb37a..26d6e3bf99 100644
--- a/packages/styles/src/variables/components/_forms.scss
+++ b/packages/styles/src/variables/components/_forms.scss
@@ -15,7 +15,7 @@
 $form-bg-size: 32px !default;
 $form-bg-size-sm: 24px !default;
 
-$form-label-margin-bottom: 0.5rem !default;
+$form-label-margin-bottom: spacing.$size-mini !default;
 $form-label-color: var(--post-contrast-color) !default;
 $form-label-font-size-sm: type.$font-size-14;
 
@@ -31,7 +31,7 @@ $input-padding-y-rg: button.$input-btn-padding-y-rg !default;
 $input-padding-x-rg: button.$input-btn-padding-x-rg !default;
 $input-line-height-rg: type.$line-height-copy !default;
 
-$input-padding-y-lg: sizing.px-to-rem(11) !default;
+$input-padding-y-lg: button.$input-btn-padding-y-lg !default;
 $input-padding-x-lg: button.$input-btn-padding-x-lg !default;
 $input-line-height-lg: type.$line-height-copy !default;
 
@@ -120,14 +120,6 @@ $form-range-input-height-ie: 6rem !default;
 
 $form-file-button-hover-bg: $input-bg;
 
-$form-textarea-padding-r: sizing.px-to-rem(22) !default;
-$form-textarea-padding-l: spacing.$size-regular;
-$form-textarea-padding-t: spacing.$size-regular;
-$form-textarea-padding-b: spacing.$size-mini;
-
-$form-textarea-padding-t-sm: spacing.$size-mini;
-$form-textarea-padding-b-sm: 0;
-
 $form-floating-height: $input-height-lg * $input-line-height-lg;
 $form-floating-padding-x: $input-padding-x-lg;
 $form-floating-padding-y: $input-padding-y-lg;

From 771d6f016cc55f24ce2295233073187ac08e2f2e Mon Sep 17 00:00:00 2001
From: davidritter-dotcom <david.ritter.1@post.ch>
Date: Wed, 27 Mar 2024 13:30:27 +0100
Subject: [PATCH 14/22] feat(styles): min height fix

---
 .../styles/src/components/floating-label.scss | 20 ++++++++++---------
 packages/styles/src/components/forms.scss     |  8 +++++++-
 .../src/variables/components/_forms.scss      | 10 ++++++++--
 3 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/packages/styles/src/components/floating-label.scss b/packages/styles/src/components/floating-label.scss
index 8564911903..1da3150b47 100644
--- a/packages/styles/src/components/floating-label.scss
+++ b/packages/styles/src/components/floating-label.scss
@@ -10,6 +10,8 @@
 @use './../mixins/forms' as forms-mx;
 @use './../mixins/utilities' as utilities-mx;
 
+@use './../functions/sizing';
+
 @use './../variables/type';
 @use './../variables/spacing';
 @use './../variables/components/forms';
@@ -215,12 +217,12 @@
   }
 
   > textarea.form-control {
-    padding-top: (
-      spacing.$size-mini + forms.$form-floating-label-font-size * forms.$form-floating-line-height *
-        forms.$form-floating-label-scale
-    ) !important; // The Space needed for the label on focus
+    padding-top: forms.$form-floating-textarea-padding-t !important;
     padding-bottom: spacing.$size-mini;
     padding-right: spacing.$size-large;
+    min-height: (forms.$form-floating-label-font-size * forms.$input-line-height-lg) +
+      forms.$form-floating-textarea-padding-t + spacing.$size-mini +
+      sizing.px-to-rem(forms.$input-border-width * 2);
     height: auto;
 
     ~ label {
@@ -229,7 +231,6 @@
       max-width: none;
       height: unset;
       padding-top: spacing.$size-regular;
-      background-color: purple !important;
     }
 
     &:focus,
@@ -249,12 +250,13 @@
     }
 
     &.form-control-sm {
-      padding-top: (
-        spacing.$size-mini + forms.$form-floating-label-font-size-placeholder-sm *
-          forms.$input-line-height-sm * forms.$form-floating-label-scale-sm
-      ) !important;
+      padding-top: forms.$form-floating-textarea-padding-t-sm !important;
       padding-right: spacing.$size-large;
       font-size: forms.$form-floating-label-font-size-placeholder-sm;
+      min-height: (
+          forms.$form-floating-label-font-size-placeholder-sm * forms.$input-line-height-sm
+        ) + forms.$form-floating-textarea-padding-t-sm + spacing.$size-mini +
+        sizing.px-to-rem(forms.$input-border-width * 2);
       height: auto;
 
       ~ label {
diff --git a/packages/styles/src/components/forms.scss b/packages/styles/src/components/forms.scss
index a6c42d6641..18e6447227 100644
--- a/packages/styles/src/components/forms.scss
+++ b/packages/styles/src/components/forms.scss
@@ -6,6 +6,8 @@
 @use './../variables/type';
 @use './../variables/spacing';
 
+@use './../functions/sizing';
+
 @use './../mixins/utilities';
 @use './../mixins/forms' as form-mixins;
 
@@ -31,12 +33,16 @@ textarea {
     padding-top: spacing.$size-regular;
     padding-bottom: spacing.$size-mini;
     padding-right: spacing.$size-large;
+    min-height: (forms.$form-floating-label-font-size * forms.$input-line-height-lg) +
+      spacing.$size-regular + spacing.$size-mini + sizing.px-to-rem(forms.$input-border-width * 2);
   }
 
   &.form-control-sm {
     padding-top: spacing.$size-mini;
     padding-right: spacing.$size-large;
     padding-bottom: 0;
+    min-height: (forms.$form-floating-label-font-size-placeholder-sm * forms.$input-line-height-sm) +
+      (spacing.$size-mini * 2) + sizing.px-to-rem(forms.$input-border-width * 2);
   }
 }
 
@@ -50,7 +56,7 @@ select.form-control-rg:not([size]):not([multiple]) {
 
   &[disabled] {
     color: forms.$input-disabled-border-color;
-    border: forms.$input-disabled-boarder-style;
+    border: forms.$input-disabled-border-style;
     & ~ .form-text {
       color: forms.$input-disabled-color;
     }
diff --git a/packages/styles/src/variables/components/_forms.scss b/packages/styles/src/variables/components/_forms.scss
index 26d6e3bf99..04629842a9 100644
--- a/packages/styles/src/variables/components/_forms.scss
+++ b/packages/styles/src/variables/components/_forms.scss
@@ -39,7 +39,7 @@ $input-bg: color.$white !default;
 $input-disabled-bg: rgba(var(--post-contrast-color-inverted-rgb), 0.4) !default;
 $input-disabled-color: rgba(var(--post-contrast-color-rgb), 0.6); // Design System only
 $input-disabled-border-color: color.$gray-40; // Design System only
-$input-disabled-boarder-style: spacing.$size-line dashed;
+$input-disabled-border-style: spacing.$size-line dashed;
 
 $input-color: color.$black !default;
 $input-border-color: color.$gray-80 !default;
@@ -128,7 +128,7 @@ $form-floating-input-padding-t: spacing.$size-large;
 $form-floating-input-padding-b: 0;
 $form-floating-label-opacity: 1;
 $form-floating-label-height: $form-floating-height;
-$form-floating-label-color: $input-placeholder-color;
+$form-floating-label-color: color.$gray-80;
 $form-floating-label-font-size: type.$font-size-16;
 $form-floating-label-font-size-small: type.$font-size-12;
 $form-floating-label-scale: math.div(
@@ -163,3 +163,9 @@ $form-floating-label-translate-x-sm: $form-floating-padding-x-sm *
 $form-floating-label-height-sm: $form-floating-input-height-sm;
 $form-floating-label-padding-t-sm: $form-floating-label-height-sm * 0.5 -
   $form-floating-label-font-size-sm;
+
+$form-floating-textarea-padding-t: spacing.$size-mini + $form-floating-label-font-size *
+  $form-floating-line-height * $form-floating-label-scale; // The Space needed for the label on focus
+$form-floating-textarea-padding-t-sm: spacing.$size-mini +
+  $form-floating-label-font-size-placeholder-sm * $input-line-height-sm *
+  $form-floating-label-scale-sm;

From 5ce4074023cd92b37c7982c58b1666565db4a456 Mon Sep 17 00:00:00 2001
From: davidritter-dotcom <david.ritter.1@post.ch>
Date: Thu, 4 Apr 2024 09:23:24 +0200
Subject: [PATCH 15/22] fix(styles): lint and codesmell fix

---
 .../components/forms/textarea/textarea.stories.ts        | 1 -
 packages/styles/src/components/floating-label.scss       | 1 +
 packages/styles/src/components/forms.scss                | 9 +++++++--
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/documentation/src/stories/components/forms/textarea/textarea.stories.ts b/packages/documentation/src/stories/components/forms/textarea/textarea.stories.ts
index 32e8ca2020..fa3680a8eb 100644
--- a/packages/documentation/src/stories/components/forms/textarea/textarea.stories.ts
+++ b/packages/documentation/src/stories/components/forms/textarea/textarea.stories.ts
@@ -1,6 +1,5 @@
 import type { Args, StoryContext, StoryObj } from '@storybook/web-components';
 import { html, nothing } from 'lit';
-import { mapClasses } from '../../../../utils';
 import { MetaComponent } from '../../../../../types';
 
 const VALIDATION_STATE_MAP: Record<string, undefined | boolean> = {
diff --git a/packages/styles/src/components/floating-label.scss b/packages/styles/src/components/floating-label.scss
index 1da3150b47..01f0e0f8ab 100644
--- a/packages/styles/src/components/floating-label.scss
+++ b/packages/styles/src/components/floating-label.scss
@@ -315,6 +315,7 @@
         &:focus,
         &:not(:placeholder-shown) {
           padding-right: spacing.$size-bigger-big;
+
           ~ label {
             width: calc(
               (100% * #{forms.$form-floating-label-upscale-sm}) - #{forms.$form-floating-label-translate-x *
diff --git a/packages/styles/src/components/forms.scss b/packages/styles/src/components/forms.scss
index 18e6447227..8021dc2e0e 100644
--- a/packages/styles/src/components/forms.scss
+++ b/packages/styles/src/components/forms.scss
@@ -50,14 +50,19 @@ select.form-control-rg:not([size]):not([multiple]) {
   height: forms.$input-height-rg;
 }
 
+.form-control,
+.form-control:focus {
+  @include utilities.focus-style();
+}
+
 .form-control {
   position: relative;
-  @include utilities.focus-style();
 
   &[disabled] {
     color: forms.$input-disabled-border-color;
     border: forms.$input-disabled-border-style;
-    & ~ .form-text {
+
+    ~ .form-text {
       color: forms.$input-disabled-color;
     }
   }

From 2116d9edbe2e5772ea4d33735169e84f4a6d7592 Mon Sep 17 00:00:00 2001
From: davidritter-dotcom <david.ritter.1@post.ch>
Date: Thu, 4 Apr 2024 14:51:32 +0200
Subject: [PATCH 16/22] fix(styles): disable and valid, invalid style fix

---
 packages/styles/src/components/form-validation.scss | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/styles/src/components/form-validation.scss b/packages/styles/src/components/form-validation.scss
index d245c1ba0e..58d2d2aac8 100644
--- a/packages/styles/src/components/form-validation.scss
+++ b/packages/styles/src/components/form-validation.scss
@@ -101,7 +101,10 @@
 .form-control,
 .form-select {
   &.is-invalid {
-    border-color: form-validation.$form-feedback-invalid-color;
+    &:not(:disabled) {
+      border-color: form-validation.$form-feedback-invalid-color;
+    }
+
     background-image: b.escape-svg(form-validation.$form-feedback-icon-invalid);
 
     @include utilities-mx.high-contrast-mode() {
@@ -118,7 +121,10 @@
   }
 
   &.is-valid {
-    border-color: var(--post-success-green);
+    &:not(:disabled) {
+      border-color: var(--post-success-green);
+    }
+
     background-image: b.escape-svg(form-validation.$form-feedback-icon-valid);
 
     @include utilities-mx.high-contrast-mode() {

From 594a7690c2ec341eaf724fbbad0405a11fcbbc7d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oliver=20Sch=C3=BCrch?= <oliver.schuerch@post.ch>
Date: Tue, 16 Apr 2024 16:50:44 +0200
Subject: [PATCH 17/22] chore: add update

---
 packages/styles/src/components/form-validation.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/styles/src/components/form-validation.scss b/packages/styles/src/components/form-validation.scss
index 58d2d2aac8..dce630768b 100644
--- a/packages/styles/src/components/form-validation.scss
+++ b/packages/styles/src/components/form-validation.scss
@@ -14,6 +14,8 @@
 @use './../variables/components/forms';
 @use './../variables/spacing';
 
+// Hello David
+
 .invalid-feedback,
 .valid-feedback {
   display: none;

From c1dfb977af1201c2ade5076071af3c858aa7bef1 Mon Sep 17 00:00:00 2001
From: davidritter-dotcom <david.ritter.1@post.ch>
Date: Wed, 17 Apr 2024 11:15:04 +0200
Subject: [PATCH 18/22] fix(styles): boarder color on focused valid textarea

---
 packages/styles/src/components/form-validation.scss | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/styles/src/components/form-validation.scss b/packages/styles/src/components/form-validation.scss
index 00a898b555..8cd103374d 100644
--- a/packages/styles/src/components/form-validation.scss
+++ b/packages/styles/src/components/form-validation.scss
@@ -14,8 +14,6 @@
 @use './../variables/components/forms';
 @use './../variables/spacing';
 
-// Hello David
-
 .invalid-feedback,
 .valid-feedback {
   display: none;
@@ -131,7 +129,7 @@
       border-color: var(--post-success);
 
       &:focus {
-        border-color: form-validation.$form-feedback-valid-color;
+        border-color: var(--post-success);
       }
     }
 

From ef32169eb4ed042d619de4d06473d6430b533dab Mon Sep 17 00:00:00 2001
From: davidritter-dotcom <david.ritter.1@post.ch>
Date: Tue, 4 Jun 2024 14:34:15 +0200
Subject: [PATCH 19/22] chore(documentation, styles): add changeset

---
 .changeset/few-news-switch.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 .changeset/few-news-switch.md

diff --git a/.changeset/few-news-switch.md b/.changeset/few-news-switch.md
new file mode 100644
index 0000000000..c3568b1178
--- /dev/null
+++ b/.changeset/few-news-switch.md
@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': major
+'@swisspost/design-system-styles': major
+---
+
+Added a small variant for the textarea with floating label

From 33547378ac18945a5cc284d26ede830be20178ee Mon Sep 17 00:00:00 2001
From: davidritter-dotcom <david.ritter.1@post.ch>
Date: Tue, 4 Jun 2024 16:30:24 +0200
Subject: [PATCH 20/22] fix(documentation): code smell fix

---
 .../src/stories/components/forms/textarea/textarea.stories.ts  | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/documentation/src/stories/components/forms/textarea/textarea.stories.ts b/packages/documentation/src/stories/components/forms/textarea/textarea.stories.ts
index 55ff72461c..1c402f0e42 100644
--- a/packages/documentation/src/stories/components/forms/textarea/textarea.stories.ts
+++ b/packages/documentation/src/stories/components/forms/textarea/textarea.stories.ts
@@ -1,7 +1,6 @@
+import { MetaComponent } from '@root/types';
 import type { Args, StoryContext, StoryObj } from '@storybook/web-components';
 import { html, nothing } from 'lit';
-import { mapClasses } from '@/utils';
-import { MetaComponent } from '@root/types';
 
 const VALIDATION_STATE_MAP: Record<string, undefined | boolean> = {
   'null': undefined,

From 7a25574537a744125743b73852c180050e879322 Mon Sep 17 00:00:00 2001
From: davidritter-dotcom <david.ritter.1@post.ch>
Date: Wed, 12 Jun 2024 09:24:43 +0200
Subject: [PATCH 21/22] fix(documentation): missing import in the textarea
 story

---
 .../src/stories/components/forms/textarea/textarea.stories.ts    | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/documentation/src/stories/components/forms/textarea/textarea.stories.ts b/packages/documentation/src/stories/components/forms/textarea/textarea.stories.ts
index 44dc65d949..aac1a853d7 100644
--- a/packages/documentation/src/stories/components/forms/textarea/textarea.stories.ts
+++ b/packages/documentation/src/stories/components/forms/textarea/textarea.stories.ts
@@ -1,6 +1,7 @@
 import { MetaComponent } from '@root/types';
 import type { Args, StoryContext, StoryObj } from '@storybook/web-components';
 import { html, nothing } from 'lit';
+import { mapClasses } from '@root/src/utils';
 
 const VALIDATION_STATE_MAP: Record<string, undefined | boolean> = {
   'null': undefined,

From a075373a580609daa349b351d0cbeb4a2d93a2e7 Mon Sep 17 00:00:00 2001
From: davidritter-dotcom <david.ritter.1@post.ch>
Date: Wed, 12 Jun 2024 10:02:42 +0200
Subject: [PATCH 22/22] fix(documentation): code smell and small change on
 mapClasses function

---
 .../components/forms/checkbox/checkbox.stories.ts        | 2 +-
 .../components/forms/textarea/textarea.stories.ts        | 9 +++++----
 .../src/stories/components/table/table.stories.ts        | 4 ++--
 packages/documentation/src/utils/map-classes.ts          | 1 +
 4 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/packages/documentation/src/stories/components/forms/checkbox/checkbox.stories.ts b/packages/documentation/src/stories/components/forms/checkbox/checkbox.stories.ts
index 0972e21199..6c8b87ec97 100644
--- a/packages/documentation/src/stories/components/forms/checkbox/checkbox.stories.ts
+++ b/packages/documentation/src/stories/components/forms/checkbox/checkbox.stories.ts
@@ -181,7 +181,7 @@ function renderCheckbox(args: Args, context: StoryContext) {
 
   const containerClasses = mapClasses({
     'form-check': true,
-    [args.size]: args.size && args.size !== 'null',
+    [args.size]: args.size,
     'form-check-inline': args.inline,
   });
 
diff --git a/packages/documentation/src/stories/components/forms/textarea/textarea.stories.ts b/packages/documentation/src/stories/components/forms/textarea/textarea.stories.ts
index aac1a853d7..2bf4b6dfe3 100644
--- a/packages/documentation/src/stories/components/forms/textarea/textarea.stories.ts
+++ b/packages/documentation/src/stories/components/forms/textarea/textarea.stories.ts
@@ -1,7 +1,7 @@
 import { MetaComponent } from '@root/types';
 import type { Args, StoryContext, StoryObj } from '@storybook/web-components';
 import { html, nothing } from 'lit';
-import { mapClasses } from '@root/src/utils';
+import { mapClasses } from '@/utils';
 
 const VALIDATION_STATE_MAP: Record<string, undefined | boolean> = {
   'null': undefined,
@@ -179,10 +179,11 @@ type Story = StoryObj;
 function renderTextarea(args: Args, context: StoryContext) {
   const classes = mapClasses({
     'form-control': true,
-    [args.size]: !args.floatingLabel && args.size !== 'null',
-    [args.sizeFloatingLabel]: args.floatingLabel && args.sizefloatingLabel !== 'null',
-    [args.validation]: args.validation && args.validation !== 'null',
+    [args.size]: !args.floatingLabel,
+    [args.sizeFloatingLabel]: args.floatingLabel,
+    [args.validation]: args.validation,
   });
+  console.log(classes);
   const useAriaLabel = !args.floatingLabel && args.hiddenLabel;
   const label = !useAriaLabel
     ? html` <label for=${context.id} class="form-label">${args.label}</label> `
diff --git a/packages/documentation/src/stories/components/table/table.stories.ts b/packages/documentation/src/stories/components/table/table.stories.ts
index 38d09abde4..32b861014b 100644
--- a/packages/documentation/src/stories/components/table/table.stories.ts
+++ b/packages/documentation/src/stories/components/table/table.stories.ts
@@ -122,10 +122,10 @@ function renderTable(args: Args) {
     <table
       class="${mapClasses({
         table: true,
-        [args.borderStyle]: args.borderStyle && args.borderStyle !== 'null',
+        [args.borderStyle]: args.borderStyle,
         [variants]: variants && variants !== '',
         [cationTop]: cationTop !== 'null',
-        [args.alignment]: args.alignment && args.alignment !== 'null',
+        [args.alignment]: args.alignment,
       })}"
     >
       <caption class="${args.captionPlacement === 'hidden' ? 'visually-hidden' : ''}">
diff --git a/packages/documentation/src/utils/map-classes.ts b/packages/documentation/src/utils/map-classes.ts
index b3644d5b29..55bdbc12e3 100644
--- a/packages/documentation/src/utils/map-classes.ts
+++ b/packages/documentation/src/utils/map-classes.ts
@@ -2,5 +2,6 @@ export function mapClasses(classObject: Record<string, boolean>): string {
   return Object.entries(classObject)
     .filter(([_newClass, shouldAddClass]) => shouldAddClass)
     .map(([newClass]) => newClass)
+    .filter(c => c !== 'null')
     .join(' ');
 }