From 3d98d4dfaf7542f4b8acbd1dc4584b210a279ad8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Elodie=20Labb=C3=A9?= <elodie.labbe@upfluence.com>
Date: Wed, 6 May 2026 15:15:26 +0200
Subject: [PATCH 1/3] add feedbackMessage to PasswordInput

---
 addon/components/o-s-s/password-input.hbs | 25 +++++++++++++++--------
 addon/components/o-s-s/password-input.ts  |  2 ++
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/addon/components/o-s-s/password-input.hbs b/addon/components/o-s-s/password-input.hbs
index 514c211ae..df27a420e 100644
--- a/addon/components/o-s-s/password-input.hbs
+++ b/addon/components/o-s-s/password-input.hbs
@@ -1,5 +1,5 @@
 <div class="fx-col fx-1 fx-gap-px-6">
-  <OSS::InputContainer @errorMessage={{this.errorMessage}} ...attributes>
+  <OSS::InputContainer @feedbackMessage={{@feedbackMessage}} @errorMessage={{this.errorMessage}} ...attributes>
     <:input>
       <Input
         @value={{@value}}
@@ -14,8 +14,12 @@
       {{#if @disabled}}
         <OSS::Icon class="font-color-gray-500" @icon={{this.visibilityIcon}} />
       {{else}}
-        <OSS::Button class="margin-px-6" @icon={{this.visibilityIcon}} @square={{true}}
-                     {{on "click" this.toggleVisibility}} />
+        <OSS::Button
+          class="margin-px-6"
+          @icon={{this.visibilityIcon}}
+          @square={{true}}
+          {{on "click" this.toggleVisibility}}
+        />
       {{/if}}
     </:suffix>
   </OSS::InputContainer>
@@ -23,13 +27,18 @@
     <div class="fx-row fx-gap-px-12" data-control-name="password-input-validators">
       {{#each this.inputValidators as |inputValidator|}}
         {{#let (this.validatorAttributes type=inputValidator) as |validator|}}
-          <div class="password-input-validator fx-row fx-gap-px-6"
-               data-control-name="password-input-validator-{{inputValidator}}">
+          <div
+            class="password-input-validator fx-row fx-gap-px-6"
+            data-control-name="password-input-validator-{{inputValidator}}"
+          >
             <div class="validator-icon-container">
               {{#each this.validationIcons as |validationIcon|}}
-                <OSS::Icon @icon={{validationIcon.icon}}
-                           class="validator-icon {{validator.iconClass}}
-                                  {{this.validationIconVisibility validator=validator state=validationIcon.state}}" />
+                <OSS::Icon
+                  @icon={{validationIcon.icon}}
+                  class="validator-icon
+                    {{validator.iconClass}}
+                    {{this.validationIconVisibility validator=validator state=validationIcon.state}}"
+                />
               {{/each}}
             </div>
             <span class={{validator.labelClass}}>{{t validator.labelKey}}</span>
diff --git a/addon/components/o-s-s/password-input.ts b/addon/components/o-s-s/password-input.ts
index 340a88015..bb8569692 100644
--- a/addon/components/o-s-s/password-input.ts
+++ b/addon/components/o-s-s/password-input.ts
@@ -5,6 +5,7 @@ import Component from '@glimmer/component';
 import { assert } from '@ember/debug';
 import { isEmpty } from '@ember/utils';
 import { helper } from '@ember/component/helper';
+import type { FeedbackMessage } from './input-container';
 
 export type ValidatorSet = Record<string, { labelKey: string; regex: RegExp }>;
 export const INPUT_VALIDATORS: ValidatorSet = {
@@ -17,6 +18,7 @@ interface OSSPasswordInputArgs {
   value: string | null;
   placeholder?: string;
   errorMessage?: string;
+  feedbackMessage?: FeedbackMessage;
   disabled?: boolean;
   validates?(isPassing: boolean): void;
   validatorSet?: ValidatorSet;

From 4e67fc126aaaf3ab849e9cdf3c4e2fca92ba1411 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Elodie=20Labb=C3=A9?= <elodie.labbe@upfluence.com>
Date: Wed, 6 May 2026 15:22:39 +0200
Subject: [PATCH 2/3] add tests, update story

---
 .../o-s-s/password-input.stories.js           | 10 ++++++++
 .../components/o-s-s/password-input-test.ts   | 25 +++++++++++++++++++
 2 files changed, 35 insertions(+)

diff --git a/addon/components/o-s-s/password-input.stories.js b/addon/components/o-s-s/password-input.stories.js
index 89ff35330..2dc286f33 100644
--- a/addon/components/o-s-s/password-input.stories.js
+++ b/addon/components/o-s-s/password-input.stories.js
@@ -35,6 +35,16 @@ export default {
       },
       control: { type: 'text' }
     },
+    feedbackMessage: {
+      description: 'A success, warning or error message that will be displayed below the input-group.',
+      table: {
+        type: {
+          summary: '{ type: string, value: string }'
+        },
+        defaultValue: { summary: 'undefined' }
+      },
+      control: { type: 'object' }
+    },
     disabled: {
       description: 'Whether or not the input is disabled',
       table: {
diff --git a/tests/integration/components/o-s-s/password-input-test.ts b/tests/integration/components/o-s-s/password-input-test.ts
index 1f85feb3c..bc207dc94 100644
--- a/tests/integration/components/o-s-s/password-input-test.ts
+++ b/tests/integration/components/o-s-s/password-input-test.ts
@@ -168,6 +168,31 @@ module('Integration | Component | o-s-s/password-input', function (hooks) {
     });
   });
 
+  module('feedbackMessage', () => {
+    test('Passing an error @feedbackMessage displays the message and sets the border to red', async function (assert) {
+      await render(
+        hbs`<OSS::PasswordInput @value="" @feedbackMessage={{hash type="error" value="This is an error message"}} />`
+      );
+      assert.dom('.oss-input-container').hasClass('oss-input-container--error');
+      assert.dom('.font-color-error-500').hasText('This is an error message');
+    });
+
+    test('Passing a @feedbackMessage without a value only applies the container state class', async function (assert) {
+      await render(hbs`<OSS::PasswordInput @value="" @feedbackMessage={{hash type="success"}} />`);
+      assert.dom('.oss-input-container').hasClass('oss-input-container--success');
+      assert.dom('.font-color-success-500').doesNotExist();
+    });
+
+    test('@errorMessage takes precedence over @feedbackMessage', async function (assert) {
+      await render(
+        hbs`<OSS::PasswordInput @value="" @errorMessage="Error takes priority" @feedbackMessage={{hash type="success" value="Success message"}} />`
+      );
+      assert.dom('.oss-input-container').hasClass('oss-input-container--errored');
+      assert.dom('.text-color-error').hasText('Error takes priority');
+      assert.dom('.font-color-success-500').doesNotExist();
+    });
+  });
+
   test('it throws an error when the @value parameter is missing', async function (assert) {
     setupOnerror((err: any) => {
       assert.equal(err.message, 'Assertion Failed: [component][OSS::PasswordInput] The @value parameter is mandatory');

From 203ff5d13108fbc9b5a30e7a6e9bfa03fd0ebc9f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Elodie=20Labb=C3=A9?= <elodie.labbe@upfluence.com>
Date: Thu, 7 May 2026 15:56:58 +0200
Subject: [PATCH 3/3] Add flex-wrap to password input validators

---
 addon/components/o-s-s/password-input.hbs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/addon/components/o-s-s/password-input.hbs b/addon/components/o-s-s/password-input.hbs
index df27a420e..7499334d3 100644
--- a/addon/components/o-s-s/password-input.hbs
+++ b/addon/components/o-s-s/password-input.hbs
@@ -24,7 +24,7 @@
     </:suffix>
   </OSS::InputContainer>
   {{#if @validates}}
-    <div class="fx-row fx-gap-px-12" data-control-name="password-input-validators">
+    <div class="fx-row fx-gap-px-12 fx-wrap" data-control-name="password-input-validators">
       {{#each this.inputValidators as |inputValidator|}}
         {{#let (this.validatorAttributes type=inputValidator) as |validator|}}
           <div