Prevent toggling password & clearing on disabled form controls (#746)

* prevent toggling password & clearing on disabled form controls

* hide clear icon also on readonly

src/components/input/input.ts

@@ -297,6 +297,7 @@ export default class SlInput extends LitElement {
     const hasHelpTextSlot = this.hasSlotController.test('help-text');
     const hasLabel = this.label ? true : !!hasLabelSlot;
     const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
+    const hasClearIcon = this.clearable && !this.disabled && !this.readonly && this.value.length > 0;
 
     return html`
       <div
@@ -378,7 +379,7 @@ export default class SlInput extends LitElement {
               @blur=${this.handleBlur}
             />
 
-            ${this.clearable && this.value.length > 0
+            ${hasClearIcon
               ? html`
                   <button
                     part="clear-button"
@@ -394,7 +395,7 @@ export default class SlInput extends LitElement {
                   </button>
                 `
               : ''}
-            ${this.togglePassword
+            ${this.togglePassword && !this.disabled
               ? html`
                   <button
                     part="password-toggle-button"

src/components/select/select.ts

@@ -450,6 +450,7 @@ export default class SlSelect extends LitElement {
     const hasSelection = this.multiple ? this.value.length > 0 : this.value !== '';
     const hasLabel = this.label ? true : !!hasLabelSlot;
     const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
+    const hasClearIcon = this.clearable && !this.disabled && hasSelection;
 
     return html`
       <div
@@ -530,7 +531,7 @@ export default class SlSelect extends LitElement {
                   : this.placeholder}
               </div>
 
-              ${this.clearable && hasSelection
+              ${hasClearIcon
                 ? html`
                     <button
                       part="clear-button"