From 7408397cae7e07c34f3cbcd45000c48cfcfa48a3 Mon Sep 17 00:00:00 2001
From: Lea <lea.gardavaud@post.ch>
Date: Thu, 5 Dec 2024 08:39:39 +0100
Subject: [PATCH] feat(styles, documentation): textarea component (#4062)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Alizé Debray <33580481+alizedebray@users.noreply.github.com>
---
 .changeset/flat-bears-tap.md                  |   6 +
 .changeset/purple-terms-march.md              |   6 +
 .../segmented-button.docs.mdx                 |   2 +-
 .../components/textarea/textarea.docs.mdx     |  36 +---
 .../textarea/textarea.snapshot.stories.ts     |  41 ++--
 .../components/textarea/textarea.stories.ts   |  75 +------
 .../layout/containers/containers.docs.mdx     |   2 +-
 .../utilities/overflow/overflow.docs.mdx      |   4 +-
 .../styles/src/components/floating-label.scss |  71 +------
 .../styles/src/components/form-textarea.scss  | 189 +++++++++++++++++-
 packages/styles/src/components/forms.scss     |  10 +-
 packages/styles/src/mixins/_forms.scss        |  10 +
 .../src/variables/components/_forms.scss      |  20 +-
 13 files changed, 230 insertions(+), 242 deletions(-)
 create mode 100644 .changeset/flat-bears-tap.md
 create mode 100644 .changeset/purple-terms-march.md

diff --git a/.changeset/flat-bears-tap.md b/.changeset/flat-bears-tap.md
new file mode 100644
index 0000000000..e7876f96fc
--- /dev/null
+++ b/.changeset/flat-bears-tap.md
@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': major
+'@swisspost/design-system-styles': major
+---
+
+Removed size variants for textarea form control. The sizing classes `.form-control-sm`, `.form-control-rg` and `.form-control-lg` for textarea no longer have any effect and can be removed safely.
diff --git a/.changeset/purple-terms-march.md b/.changeset/purple-terms-march.md
new file mode 100644
index 0000000000..317e86c951
--- /dev/null
+++ b/.changeset/purple-terms-march.md
@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': minor
+'@swisspost/design-system-styles': minor
+---
+
+Updated `.form-control` textarea to new Post design.
diff --git a/packages/documentation/src/stories/components/segmented-button/segmented-button.docs.mdx b/packages/documentation/src/stories/components/segmented-button/segmented-button.docs.mdx
index 73aaaebc93..f1c1e949e6 100644
--- a/packages/documentation/src/stories/components/segmented-button/segmented-button.docs.mdx
+++ b/packages/documentation/src/stories/components/segmented-button/segmented-button.docs.mdx
@@ -15,7 +15,7 @@ import StylesPackageImport from '@/shared/styles-package-import.mdx';
 The segmented button is a single-select component. 
 It allows users to toggle between two or more content sections within the same area on the screen.
 
-<div role="alert" class="alert alert-info">
+<div role="alert" class="banner banner-info">
   <p>
     If the labels are too long or the number of options is excessive for the available space,
     consider using a select component. Keep in mind that long labels may cause layout issues,
diff --git a/packages/documentation/src/stories/components/textarea/textarea.docs.mdx b/packages/documentation/src/stories/components/textarea/textarea.docs.mdx
index 4a9050489f..f9cac32a95 100644
--- a/packages/documentation/src/stories/components/textarea/textarea.docs.mdx
+++ b/packages/documentation/src/stories/components/textarea/textarea.docs.mdx
@@ -23,10 +23,7 @@ Custom textarea elements need only the class `.form-control` to trigger the cust
   <Controls of={TextareaStories.Default} />
 </div>
 
-<StylesPackageImport
-  components={['forms']}
-  required={{ 'floating-label': true, 'validation': true }}
-/>
+<StylesPackageImport components={['form-textarea']} required={{ validation: true }} />
 
 ## Concrete Examples of Application
 
@@ -38,34 +35,3 @@ Wrap a pair of `<textarea>` and `<label>` elements in a `.form-floating` contain
 But note that the `<textarea>` element must come first, so we can ensure the correct styles.
 
 <Canvas of={TextareaStories.FloatingLabel} />
-
-### Sizing
-
-<div className="banner banner-warning">
-  <h4 className="banner-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>
-</div>
-
-The size can be changed by simply adding one of four classes:
-
-- Small: `.form-control-sm`
-- Regular: `.form-control-rg`
-- Medium: default or `.form-control-md`
-- Large: `.form-control-lg`
-
-<div className="banner banner-info">
-  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>
diff --git a/packages/documentation/src/stories/components/textarea/textarea.snapshot.stories.ts b/packages/documentation/src/stories/components/textarea/textarea.snapshot.stories.ts
index 2dc5e70bbb..bc9da48120 100644
--- a/packages/documentation/src/stories/components/textarea/textarea.snapshot.stories.ts
+++ b/packages/documentation/src/stories/components/textarea/textarea.snapshot.stories.ts
@@ -1,8 +1,8 @@
 import type { Args, StoryContext, StoryObj } from '@storybook/web-components';
 import meta from './textarea.stories';
 import { html } from 'lit';
-import { schemes } from '@/shared/snapshots/schemes';
 import { COMBINATIONS, getCombinations } from '@/utils/inputComponentsGetCombinations';
+import { schemes } from '@/shared/snapshots/schemes';
 
 const { id, ...metaWithoutId } = meta;
 
@@ -37,34 +37,17 @@ export const Textarea: Story = {
     ];
 
     return schemes(
-      scheme => html`
-        <div class="d-flex gap-16 flex-column">
-          <h3>Sizes</h3>
-          ${getCombinations('size', context.argTypes.size.options, combinations).map(
-            (args: Args) => {
-              context.id = `${scheme}-${crypto.randomUUID()}`;
-              return html`
-                <div>
-                  ${args.title !== undefined && args.title
-                    ? html`
-                        <h4>
-                          ${Object.entries(context.argTypes.size.control.labels)
-                            .filter(([key]) => key === args.size)
-                            .map(s => s[1])}
-                        </h4>
-                      `
-                    : ''}
-                  <div>${meta.render?.({ ...context.args, ...args }, context)}</div>
-                </div>
-              `;
-            },
-          )}
-          <h3>Floating Label</h3>
-          ${getCombinations('floatingLabel', [true], combinations).map((args: Args) => {
-            context.id = `${scheme}-${crypto.randomUUID()}`;
-            return html` <div>${meta.render?.({ ...context.args, ...args }, context)}</div> `;
-          })}
-        </div>
+      () => html`
+        <h3>Floating Label</h3>
+        ${getCombinations('floatingLabel', [true], combinations).map((args: Args) => {
+          context.id = crypto.randomUUID();
+          return html` <div>${meta.render?.({ ...context.args, ...args }, context)}</div> `;
+        })}
+        <h3>Standard</h3>
+        ${getCombinations('floatingLabel', [false], combinations).map((args: Args) => {
+          context.id = crypto.randomUUID();
+          return html` <div>${meta.render?.({ ...context.args, ...args }, context)}</div> `;
+        })}
       `,
     );
   },
diff --git a/packages/documentation/src/stories/components/textarea/textarea.stories.ts b/packages/documentation/src/stories/components/textarea/textarea.stories.ts
index 61d88f2a17..f647e87e42 100644
--- a/packages/documentation/src/stories/components/textarea/textarea.stories.ts
+++ b/packages/documentation/src/stories/components/textarea/textarea.stories.ts
@@ -18,16 +18,14 @@ const meta: MetaComponent = {
     badges: [],
     design: {
       type: 'figma',
-      url: 'https://www.figma.com/file/xZ0IW0MJO0vnFicmrHiKaY/Components-Post?type=design&node-id=22194-89755&mode=design&t=3lniLiZhl7q9Gqgn-4',
+      url: 'https://www.figma.com/design/JIT5AdGYqv6bDRpfBPV8XR/Foundations-%26-Components-Next-Level?node-id=21-182',
     },
   },
   args: {
     label: 'Label',
-    floatingLabel: false,
+    floatingLabel: true,
     hiddenLabel: false,
     value: undefined,
-    size: 'form-control-lg',
-    sizeFloatingLabel: 'form-control-lg',
     hint: 'Hintus textus elare volare cantare hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.',
     disabled: false,
     validation: 'null',
@@ -78,46 +76,6 @@ const meta: MetaComponent = {
         disable: true,
       },
     },
-    size: {
-      name: 'Size',
-      description: "Sets the size of the component's appearance.",
-      if: {
-        arg: 'floatingLabel',
-        truthy: false,
-      },
-      control: {
-        type: 'select',
-        labels: {
-          'form-control-sm': 'Small',
-          'form-control-rg': 'Regular (deprecated)',
-          'null': 'Middle (deprecated)',
-          'form-control-lg': 'Large',
-        },
-      },
-      options: ['form-control-sm', 'form-control-rg', 'null', 'form-control-lg'],
-      table: {
-        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:
@@ -180,8 +138,6 @@ type Story = StoryObj;
 function renderTextarea(args: Args, context: StoryContext) {
   const classes = mapClasses({
     'form-control': true,
-    [args.size]: !args.floatingLabel,
-    [args.sizeFloatingLabel]: args.floatingLabel,
     [args.validation]: args.validation,
   });
   const useAriaLabel = !args.floatingLabel && args.hiddenLabel;
@@ -204,7 +160,7 @@ function renderTextarea(args: Args, context: StoryContext) {
       id=${context.id}
       class=${classes}
       defaultValue=${args.value ?? nothing}
-      placeholder=${useAriaLabel ? args.label : ''}
+      placeholder="My placeholder"
       rows=${args.rows}
       ?disabled=${args.disabled}
       aria-label=${useAriaLabel ? args.label : nothing}
@@ -225,33 +181,8 @@ ${args.textInside ?? nothing}</textarea
 export const Default: Story = {};
 
 export const FloatingLabel: Story = {
-  parameters: {
-    controls: {
-      exclude: ['Hidden Label', 'Size', 'Rows', 'Helper Text', 'Disabled', 'Validation'],
-    },
-  },
   args: {
     floatingLabel: true,
     hint: '',
   },
 };
-
-export const Size: Story = {
-  parameters: {
-    controls: {
-      exclude: [
-        'Label',
-        'Floating Label',
-        'Hidden Label',
-        'Rows',
-        'Helper Text',
-        'Disabled',
-        'Validation',
-      ],
-    },
-  },
-  args: {
-    size: 'form-control-sm',
-    hint: '',
-  },
-};
diff --git a/packages/documentation/src/stories/foundations/layout/containers/containers.docs.mdx b/packages/documentation/src/stories/foundations/layout/containers/containers.docs.mdx
index 9d5366ca9a..dec76de2dc 100644
--- a/packages/documentation/src/stories/foundations/layout/containers/containers.docs.mdx
+++ b/packages/documentation/src/stories/foundations/layout/containers/containers.docs.mdx
@@ -9,7 +9,7 @@ import * as ContainerStories from './containers.stories';
   Containers are essential layout elements ensuring content is aligned and properly padded across all devices and viewports.
 </div>
 
-<div className="alert alert-info my-24">
+<div className="banner banner-info my-24">
   Containers are required when using the <a href="/?path=/docs/7240f2ef-216a-490e-9bd8-c0cef19f7b31--docs">grid system</a>.
 </div>
 
diff --git a/packages/documentation/src/stories/utilities/overflow/overflow.docs.mdx b/packages/documentation/src/stories/utilities/overflow/overflow.docs.mdx
index d160910264..2ddb36043a 100644
--- a/packages/documentation/src/stories/utilities/overflow/overflow.docs.mdx
+++ b/packages/documentation/src/stories/utilities/overflow/overflow.docs.mdx
@@ -7,7 +7,7 @@ import * as OverflowStories from './overflow.stories';
 
 <div className="lead">Define how a content overflows its container.</div>
 <br />
-<div className="alert alert-info">Note that these utility classes are not responsive.</div>
+<div className="banner banner-info">Note that these utility classes are not responsive.</div>
 
 <Canvas sourceState="shown" of={OverflowStories.Default} />
 <div className="hide-col-default">
@@ -29,7 +29,7 @@ The values available are the following:
 - `hidden` hides all of the content that would overflow the container, without any scrollbars.
 - `scroll` does not overflow the content and adds scrollbars to the container.
 
-<div className="alert alert-info alert-sm">
+<div className="banner banner-info banner-md">
   If one of the axis is defined as `visible`, and the other axis is defined as something else, then
   the `visible` axis will be considered to be `auto`.
 </div>
diff --git a/packages/styles/src/components/floating-label.scss b/packages/styles/src/components/floating-label.scss
index 0a343bd64d..2c1c52ce33 100644
--- a/packages/styles/src/components/floating-label.scss
+++ b/packages/styles/src/components/floating-label.scss
@@ -21,8 +21,7 @@ tokens.$default-map: components.$post-text-input;
 .form-floating {
   position: relative;
 
-  > .form-control ~ label,
-  > textarea ~ label {
+  > input.form-control ~ label {
     position: absolute;
     z-index: 2;
     text-align: start;
@@ -48,7 +47,7 @@ tokens.$default-map: components.$post-text-input;
     background-color: tokens.get('input-color-enabled-bg');
   }
 
-  > .form-control {
+  > input.form-control {
     height: tokens.get('input-sizing-height');
     min-height: tokens.get('input-sizing-height');
 
@@ -103,15 +102,8 @@ tokens.$default-map: components.$post-text-input;
     }
   }
 
-  > textarea:disabled ~ label,
-  > .form-control:disabled ~ label {
-    // Required for `.form-control`s because of specificity
-    color: tokens.get('input-color-disabled-fg');
-    background-color: tokens.get('input-color-disabled-bg');
-  }
-
   // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
-  > .form-control:-webkit-autofill {
+  > input.form-control:-webkit-autofill {
     padding-block-start: tokens.get('input-padding-block-start');
     padding-block-end: tokens.get('input-padding-block-end');
 
@@ -122,63 +114,8 @@ tokens.$default-map: components.$post-text-input;
     }
   }
 
-  > :disabled ~ label,
-  > .form-control:disabled ~ label {
-    // Required for `.form-control`s because of specificity
-    color: tokens.get('input-color-disabled-fg');
-    background-color: tokens.get('input-color-disabled-bg');
-  }
-
-  > textarea.form-control {
-    padding-block-start: forms.$form-floating-textarea-padding-t !important;
-    padding-block-end: spacing.$size-mini;
-    padding-inline-end: 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 {
-      padding-block-end: 0;
-      width: calc(100% - (#{tokens.get('input-border-width')} * 2));
-      max-width: none;
-      height: unset;
-      padding-block-start: spacing.$size-regular;
-    }
-
-    &:focus,
-    &:not(:placeholder-shown) {
-      padding-block-end: spacing.$size-mini;
-
-      ~ label {
-        padding-block-start: spacing.$size-mini;
-        width: calc(100% - (#{tokens.get('input-border-width')} * 2));
-        max-width: none;
-        background-color: tokens.get('input-color-selected-bg');
-      }
-    }
-
-    &:is(.is-valid, .is-invalid) {
-      ~ label {
-        width: calc(
-          100% - (#{tokens.get('input-border-width')} * 2) - #{spacing.$size-mini} - #{tokens.get(
-              'input-sizing-height'
-            )}
-        );
-      }
-
-      &:focus,
-      &:not(:placeholder-shown) {
-        ~ label {
-          width: calc(100% - (#{tokens.get('input-border-width')} * 2));
-        }
-      }
-    }
-  }
-
   @include utilities-mx.high-contrast-mode() {
-    > input,
-    > textarea {
+    > input {
       @include forms-mx.placeholder() {
         opacity: 0;
       }
diff --git a/packages/styles/src/components/form-textarea.scss b/packages/styles/src/components/form-textarea.scss
index 2b8b4c8299..bec86c5fad 100644
--- a/packages/styles/src/components/form-textarea.scss
+++ b/packages/styles/src/components/form-textarea.scss
@@ -1,17 +1,188 @@
-@use './../variables/spacing';
+@forward './../variables/options';
+
+@use './../mixins/utilities';
 @use './../variables/components/forms';
-@use './../functions/sizing';
+@use './../mixins/forms' as forms-mx;
+
+@use './../functions/tokens';
+@use './../tokens/components';
+@use './../tokens/elements';
+
+tokens.$default-map: components.$post-text-area;
 
 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%;
-  }
+  display: block;
+  width: 100%;
+  appearance: none; // Fix appearance for date inputs in Safari
+  background-clip: padding-box;
+  border: tokens.get('textarea-border-width') tokens.get('textarea-border-style-enabled')
+    tokens.get('textarea-enabled-border');
+  position: relative;
+  border-radius: tokens.get('textarea-border-radius');
+  background-color: tokens.get('textarea-enabled-bg');
+  color: tokens.get('textarea-enabled-fg');
+  padding-inline-start: tokens.get('textarea-padding-inline-start');
+  padding-inline-end: tokens.get('textarea-padding-inline-end');
+  padding-block: tokens.get('textarea-standalone-padding-block');
+  min-height: tokens.get('textarea-sizing-min-height');
+  resize: vertical;
+  @include utilities.focus-style;
+  @include forms-mx.textarea-resizer-svg(#050400);
 
   &[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-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");
+    @include forms-mx.textarea-resizer-svg(#696864);
+  }
+
+  &:focus {
+    @include utilities.high-contrast-mode {
+      border-color: FieldText !important; // On blink browser valid and invalid border colors are converted to Highlight color
     }
   }
+
+  &:not(:disabled) {
+    &:hover,
+    &:focus {
+      @include utilities.high-contrast-mode {
+        border-color: FieldText;
+      }
+    }
+
+    &:hover {
+      border-color: tokens.get('textarea-hover-border');
+      background-color: tokens.get('textarea-hover-bg');
+
+      @include utilities.high-contrast-mode {
+        border-color: Highlight;
+      }
+    }
+  }
+
+  &[readonly]:not(:disabled) {
+    border-color: tokens.get('textarea-enabled-border');
+    background-color: tokens.get('textarea-enabled-bg');
+  }
+
+  &::placeholder {
+    color: tokens.get('textarea-placeholder-fg');
+    opacity: 1;
+  }
+
+  &:disabled {
+    color: tokens.get('textarea-disabled-fg');
+    background-color: tokens.get('textarea-disabled-bg');
+    border-color: tokens.get('textarea-disabled-border');
+    border-style: tokens.get('textarea-border-style-disabled');
+    opacity: 1;
+  }
+
+  &.is-valid,
+  &.is-invalid {
+    &:not(:disabled) {
+      background-size: tokens.get('textarea-sizing-icon');
+      background-position: top tokens.get('textarea-position-block-start-validation') right
+        tokens.get('textarea-position-inline-end-validation');
+      background-repeat: no-repeat;
+      padding-inline-end: tokens.get('textarea-validated-padding-inline-end');
+    }
+  }
+
+  &.is-valid:not(:disabled) {
+    background-image: forms.$valid-icon;
+  }
+
+  &.is-invalid:not(:disabled) {
+    background-image: forms.$invalid-icon;
+  }
+}
+
+.form-label:has(+ textarea.form-control[disabled]) {
+  color: tokens.get('textarea-disabled-fg');
+}
+
+.form-floating {
+  position: relative;
+
+  > textarea ~ label {
+    position: absolute;
+    z-index: 2;
+    text-align: start;
+    pointer-events: none;
+    display: block;
+    top: tokens.get('textarea-border-width');
+    left: tokens.get('textarea-border-width');
+    margin: 0;
+    padding-inline-start: calc(
+      tokens.get('textarea-label-padding-inline-start') - tokens.get('textarea-border-width')
+    );
+    padding-inline-end: 0;
+    padding-block-start: tokens.get('textarea-label-padding-block-start');
+    width: calc(
+      100% - (#{tokens.get('textarea-border-width')} * 2) - #{tokens.get(
+          'textarea-label-padding-inline-end'
+        )}
+    );
+    border: 0;
+    color: tokens.get('textarea-enabled-fg');
+    height: auto;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    transition:
+      padding-block-start 0.2s ease-in-out,
+      font-size 0.2s ease-in-out;
+    background-color: tokens.get('textarea-enabled-bg');
+  }
+
+  > textarea.form-control {
+    padding-block-start: tokens.get('textarea-padding-block-start');
+    padding-block-end: tokens.get('textarea-padding-block-end');
+
+    &::placeholder {
+      color: transparent;
+    }
+
+    &:focus,
+    &:not(:placeholder-shown) {
+      ~ label {
+        font-size: tokens.get('textarea-label-filled-font-size');
+        padding-block-start: tokens.get('textarea-label-filled-padding-block-start');
+      }
+    }
+
+    @include forms-mx.placeholder {
+      opacity: 0;
+    }
+
+    &:focus {
+      @include forms-mx.placeholder {
+        color: tokens.get('textarea-placeholder-fg');
+        opacity: 1;
+      }
+    }
+
+    &:disabled ~ label {
+      color: tokens.get('textarea-disabled-fg');
+      background-color: tokens.get('textarea-disabled-bg');
+    }
+
+    &:not(:disabled):hover ~ label {
+      color: tokens.get('textarea-hover-fg');
+      background-color: tokens.get('textarea-hover-bg');
+    }
+
+    &:is(.is-valid, .is-invalid) {
+      ~ label {
+        width: calc(
+          100% - (#{tokens.get('textarea-border-width')} * 2) - #{tokens.get(
+              'textarea-label-validated-padding-inline-end'
+            )}
+        );
+      }
+    }
+  }
+
+  > textarea:disabled ~ label {
+    color: tokens.get('textarea-disabled-fg');
+    background-color: tokens.get('textarea-disabled-bg');
+  }
 }
diff --git a/packages/styles/src/components/forms.scss b/packages/styles/src/components/forms.scss
index a01caef122..0c91904414 100644
--- a/packages/styles/src/components/forms.scss
+++ b/packages/styles/src/components/forms.scss
@@ -10,7 +10,7 @@
 
 tokens.$default-map: components.$post-text-input;
 
-.form-control {
+input.form-control {
   display: block;
   width: 100%;
   font-family: tokens.get('body-font-family', elements.$post-body);
@@ -203,15 +203,11 @@ tokens.$default-map: components.$post-text-input;
   }
 }
 
-textarea.form-control {
-  min-height: tokens.get('input-sizing-height');
-}
-
-.form-label:has(+ .form-control[disabled]) {
+.form-label:has(+ input.form-control[disabled]) {
   color: tokens.get('input-color-disabled-fg');
 }
 
-.form-floating > .form-control {
+.form-floating > input.form-control {
   height: tokens.get('input-sizing-height');
   min-height: tokens.get('input-sizing-height');
 }
diff --git a/packages/styles/src/mixins/_forms.scss b/packages/styles/src/mixins/_forms.scss
index c1127430f5..0854d6adf0 100644
--- a/packages/styles/src/mixins/_forms.scss
+++ b/packages/styles/src/mixins/_forms.scss
@@ -2,6 +2,7 @@
 @use './../variables/components/forms';
 @use './../mixins/utilities';
 @use './../functions/icons';
+@use './../functions/utilities' as utilities-fx;
 
 // Placeholder in input fields
 @mixin placeholder() {
@@ -53,3 +54,12 @@
   }
   background-image: $state, $validation;
 }
+
+@mixin textarea-resizer-svg($color) {
+  &::-webkit-resizer {
+    $clean-color: utilities-fx.replace('#{$color}', '#', '%23');
+    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24" fill="none"%3E%3Cg clip-path="url(%23clip0_7846_3191)"%3E%3Cpath d="M6.5 18H9.5V21H6.5V18Z" fill="#{$clean-color}"/%3E%3Cpath d="M12.5 18H15.5V21H12.5V18Z" fill="#{$clean-color}"/%3E%3Cpath d="M12.5 12H15.5V15H12.5V12Z" fill="#{$clean-color}"/%3E%3Cpath d="M18.5 12H21.5V15H18.5V12Z" fill="#{$clean-color}"/%3E%3Cpath d="M18.5 6H21.5V9H18.5V6Z" fill="#{$clean-color}"/%3E%3Cpath d="M18.5 18H21.5V21H18.5V18Z" fill="#{$clean-color}"/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id="clip0_7846_3191"%3E%3Crect width="24" height="24" fill="white" transform="translate(0.5)"/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E');
+    background-repeat: no-repeat;
+    background-size: 100%;
+  }
+}
diff --git a/packages/styles/src/variables/components/_forms.scss b/packages/styles/src/variables/components/_forms.scss
index 1182c8cc8d..4d3d685670 100644
--- a/packages/styles/src/variables/components/_forms.scss
+++ b/packages/styles/src/variables/components/_forms.scss
@@ -10,14 +10,13 @@
 
 // Forms
 
-// Used elsewhere than text input
+// Used elsewhere than text input, textarea or select
 
 $input-padding-y: button.$input-btn-padding-y !default;
 $input-padding-x: button.$input-btn-padding-x !default;
 $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-copy !default;
 
 $input-padding-y-rg: button.$input-btn-padding-y-rg !default;
@@ -25,19 +24,13 @@ $input-padding-x-rg: button.$input-btn-padding-x-rg !default;
 $input-line-height-rg: type.$line-height-copy !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;
 
-$input-disabled-bg: rgba(var(--post-contrast-color-inverted-rgb), 0.4) !default;
-$input-disabled-color: var(--post-gray-60); // Design System only
 $input-disabled-border-color: var(--post-gray-40); // Design System only
-$input-disabled-border-style: spacing.$size-line dashed;
 
 $input-border-color: color.$gray-80 !default;
 $input-border-width: button.$input-btn-border-width !default;
 
-$input-border-radius: 0 !default;
-
 $input-focus-width: button.$input-btn-focus-width !default;
 $input-focus-box-shadow: none !default;
 $input-focus-outline-thickness: spacing.$size-line;
@@ -79,18 +72,7 @@ $form-range-thumb-disabled-border-color: $input-disabled-border-color !default;
 $form-range-height: $form-range-thumb-height + $form-range-thumb-focus-box-shadow-width * 2;
 $form-range-input-height-ie: 6rem !default;
 
-$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
-);
-
 $form-floating-height: $input-height-lg * $input-line-height-lg;
-$form-floating-padding-y: $input-padding-y-lg;
-
-$form-floating-textarea-padding-t: spacing.$size-mini + $form-floating-label-font-size *
-  type.$line-height-copy * $form-floating-label-scale; // The Space needed for the label on focus
 
 $valid-icon: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1266_5647)'%3E%3Cpath d='M16 0C7.16 0 0 7.16 0 16C0 24.84 7.16 32 16 32C24.84 32 32 24.84 32 16C32 7.16 24.84 0 16 0ZM25.05 9.01L14.4 25.15L7.04 17.27C6.66 16.87 6.68 16.23 7.09 15.86C7.49 15.48 8.13 15.5 8.5 15.91L14.13 21.94L23.38 7.92C23.68 7.46 24.3 7.33 24.77 7.64C25.23 7.94 25.36 8.56 25.05 9.03V9.01Z' fill='%23107800'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1266_5647'%3E%3Crect width='32' height='32' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
 $invalid-icon: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1266_5583)'%3E%3Cpath d='M16 0C7.16 0 0 7.16 0 16C0 24.84 7.16 32 16 32C24.84 32 32 24.84 32 16C32 7.16 24.84 0 16 0ZM14.49 6.28H17.53V10.76L16.93 17.11H15.09L14.49 10.76V6.28ZM16.01 22.33C14.93 22.33 14.08 21.48 14.08 20.42C14.08 19.36 14.93 18.53 16.01 18.53C17.09 18.53 17.94 19.38 17.94 20.42C17.94 21.46 17.09 22.33 16.01 22.33Z' fill='%23B20000'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1266_5583'%3E%3Crect width='32' height='32' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");