fix(password-input): support invalid state when used in a FluidForm (#1371)

* fix(password-input): support invalid state when used in a `FluidForm`

* docs(fluid-form): add example "Invalid state"

docs/src/pages/components/FluidForm.svx

@@ -1,19 +1,26 @@
 <script>
-  import { FluidForm, FormGroup, TextInput, PasswordInput, Button,} from "carbon-components-svelte";
+  import {
+    FluidForm,
+    TextInput,
+    PasswordInput,
+  } from "carbon-components-svelte";
   import Preview from "../../components/Preview.svelte";
 </script>
 
 ### Fluid form
 
+Note that the `inline` input variants cannot be used within a `FluidForm`.
+
 <FluidForm>
-  <TextInput
-    labelText="User name"
-    placeholder="Enter user name..."
-    required />
+  <TextInput labelText="User name" placeholder="Enter user name..." required />
   <PasswordInput
     required
     type="password"
     labelText="Password"
     placeholder="Enter password..."
   />
-</FluidForm>
+</FluidForm>
+
+### Invalid state
+
+<FileSource src="/framed/FluidForm/FluidFormInvalid" />

docs/src/pages/framed/FluidForm/FluidFormInvalid.svelte

@@ -0,0 +1,25 @@
+<script>
+  import {
+    FluidForm,
+    TextInput,
+    PasswordInput,
+  } from "carbon-components-svelte";
+
+  let password = "";
+  let invalid = false;
+
+  $: invalid = !/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{6,}$/.test(password);
+</script>
+
+<FluidForm>
+  <TextInput labelText="User name" placeholder="Enter user name..." required />
+  <PasswordInput
+    bind:value="{password}"
+    invalid="{invalid}"
+    invalidText="Your password must be at least 6 characters as well as contain at least one uppercase, one lowercase, and one number."
+    required
+    type="password"
+    labelText="Password"
+    placeholder="Enter password..."
+  />
+</FluidForm>