Merge remote-tracking branch 'origin/main' into sp/sync-feature-7.1-with-main

core/src/components/textarea/textarea.ios.scss

@@ -31,6 +31,16 @@
   --padding-start: 0px;
 }
 
+// Textarea - Disabled
+// ----------------------------------------------------------------
+// The textarea, label, helper text, char counter and placeholder
+// should use the same opacity and match the other form controls
+
+:host(.legacy-textarea) .native-textarea[disabled],
+:host(.textarea-disabled) {
+  opacity: #{$textarea-ios-disabled-opacity};
+}
+
 // Textarea Wrapper
 // ----------------------------------------------------------------
 

core/src/components/textarea/textarea.ios.vars.scss

@@ -24,3 +24,6 @@ $textarea-ios-padding-start:                  0 !default;
 
 /// @prop - Placeholder text color of the textarea
 $textarea-ios-placeholder-color:            $placeholder-text-color !default;
+
+/// @prop - The opacity of the input text, label, helper text, char counter and placeholder of a disabled textarea
+$textarea-ios-disabled-opacity: $form-control-ios-disabled-opacity !default;

core/src/components/textarea/textarea.md.scss

@@ -80,6 +80,16 @@
   color: var(--highlight-color);
 }
 
+// Textarea - Disabled
+// ----------------------------------------------------------------
+// The textarea, label, helper text, char counter and placeholder
+// should use the same opacity and match the other form controls
+
+:host(.legacy-textarea) .native-textarea[disabled],
+:host(.textarea-disabled) {
+  opacity: #{$textarea-md-disabled-opacity};
+}
+
 // Textarea Highlight
 // ----------------------------------------------------------------
 

core/src/components/textarea/textarea.md.vars.scss

@@ -24,3 +24,6 @@ $textarea-md-placeholder-color: $placeholder-text-color !default;
 
 /// @prop - The amount of whitespace to display on either side of the floating label
 $textarea-md-floating-label-padding: 4px !default;
+
+/// @prop - The opacity of the input text, label, helper text, char counter and placeholder of a disabled textarea
+$textarea-md-disabled-opacity: $form-control-md-disabled-opacity !default;

core/src/components/textarea/textarea.scss

@@ -176,11 +176,6 @@
   word-break: break-word;
 }
 
-:host(.legacy-textarea) .native-textarea[disabled],
-:host(.textarea-disabled) {
-  opacity: 0.4;
-}
-
 // Input Cover: Unfocused
 // --------------------------------------------------
 // The input cover is the div that actually receives the