fixes #913

docs/components/input.md

@@ -76,14 +76,14 @@ const App = () => <SlInput placeholder="Clearable" clearable />;
 
 ### Toggle Password
 
-Add the `toggle-password` attribute to add a toggle button that will show the password when activated.
+Add the `password-toggle` attribute to add a toggle button that will show the password when activated.
 
 ```html preview
-<sl-input type="password" placeholder="Password Toggle" size="small" toggle-password></sl-input>
+<sl-input type="password" placeholder="Password Toggle" size="small" password-toggle></sl-input>
 <br />
-<sl-input type="password" placeholder="Password Toggle" size="medium" toggle-password></sl-input>
+<sl-input type="password" placeholder="Password Toggle" size="medium" password-toggle></sl-input>
 <br />
-<sl-input type="password" placeholder="Password Toggle" size="large" toggle-password></sl-input>
+<sl-input type="password" placeholder="Password Toggle" size="large" password-toggle></sl-input>
 ```
 
 ```jsx react
@@ -91,11 +91,11 @@ import { SlInput } from '@shoelace-style/shoelace/dist/react';
 
 const App = () => (
   <>
-    <SlInput type="password" placeholder="Password Toggle" size="small" toggle-password />
+    <SlInput type="password" placeholder="Password Toggle" size="small" password-toggle />
     <br />
-    <SlInput type="password" placeholder="Password Toggle" size="medium" toggle-password />
+    <SlInput type="password" placeholder="Password Toggle" size="medium" password-toggle />
     <br />
-    <SlInput type="password" placeholder="Password Toggle" size="large" toggle-password />
+    <SlInput type="password" placeholder="Password Toggle" size="large" password-toggle />
   </>
 );
 ```

docs/resources/changelog.md

@@ -13,9 +13,11 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 This release removes the `<sl-responsive-media>` component. When this component was introduced, support for [`aspect-radio`](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio)) wasn't great. These days, [the property is supported](https://caniuse.com/mdn-css_properties_aspect-ratio) by all of Shoelace's target browsers, making a dedicated component redundant.
 
 - 🚨 BREAKING: Removed `<sl-responsive-media>` (use the well-supported `aspect-ratio` CSS property instead)
+- 🚨 BREAKING: Changed the `toggle-password` attribute of `<sl-input>` to `password-toggle` for consistency
 - Added an expand/collapse animation to `<sl-tree-item>`
 - Added `sl-lazy-change` event to `<sl-tree-item>`
 - Added `expand-button` part to `<sl-tree-item>` [#893](https://github.com/shoelace-style/shoelace/pull/893)
+- Added `password-visible` attribute to `<sl-input>` [#913](https://github.com/shoelace-style/shoelace/issues/913)
 - Fixed a bug in `<sl-popup>` that didn't account for the arrow's diagonal size
 - Fixed a bug in `<sl-popup>` that caused arrow placement to be incorrect with RTL
 - Fixed a bug in `<sl-progress-ring>` that caused the indeterminate animation to stop working in Safari [#891](https://github.com/shoelace-style/shoelace/issues/891)
@@ -43,7 +45,8 @@ This release removes the `<sl-responsive-media>` component. When this component
 - Fixed a bug in `<sl-tree>` that prevented the keyboard from working when the component was nested in a shadow root [#871](https://github.com/shoelace-style/shoelace/issues/871)
 - Fixed a bug in `<sl-tab-group>` that prevented the keyboard from working when the component was nested in a shadow root [#872](https://github.com/shoelace-style/shoelace/issues/872)
 - Fixed a bug in `<sl-tab>` that allowed disabled tabs to erroneously receive focus
-- Improved single selection in `<sl-tree>` so nodes expand and collapse and receive selection when clicking on the label
+- Improved single selection in `<sl-tree>` so nodes expand and collapse and rece
+  ive selection when clicking on the label
 - Renamed `expanded-icon` and `collapsed-icon` slots to `expand-icon` and `collapse-icon` in the experimental `<sl-tree>` and `<sl-tree-item>` components
 - Improved RTL support for `<sl-image-comparer>`
 - Refactored components to extend from `ShoelaceElement` to make `dir` and `lang` reactive properties in all components

src/components/input/input.ts

@@ -67,7 +67,6 @@ export default class SlInput extends ShoelaceElement {
   private readonly localize = new LocalizeController(this);
 
   @state() private hasFocus = false;
-  @state() private isPasswordVisible = false;
 
   /** The input's type. */
   @property({ reflect: true }) type:
@@ -111,7 +110,10 @@ export default class SlInput extends ShoelaceElement {
   @property({ type: Boolean }) clearable = false;
 
   /** Adds a password toggle button to password inputs. */
-  @property({ attribute: 'toggle-password', type: Boolean }) togglePassword = false;
+  @property({ attribute: 'password-toggle', type: Boolean }) passwordToggle = false;
+
+  /** Determines whether or not the password is currently visible. Only applies to password inputs. */
+  @property({ attribute: 'password-visible', type: Boolean }) passwordVisible = false;
 
   /** Hides the browser's built-in increment/decrement spin buttons for number inputs. */
   @property({ attribute: 'no-spin-buttons', type: Boolean }) noSpinButtons = false;
@@ -324,7 +326,7 @@ export default class SlInput extends ShoelaceElement {
   }
 
   handlePasswordToggle() {
-    this.isPasswordVisible = !this.isPasswordVisible;
+    this.passwordVisible = !this.passwordVisible;
   }
 
   @watch('value', { waitUntilFirstUpdate: true })
@@ -392,7 +394,7 @@ export default class SlInput extends ShoelaceElement {
               part="input"
               id="input"
               class="input__control"
-              type=${this.type === 'password' && this.isPasswordVisible ? 'text' : this.type}
+              type=${this.type === 'password' && this.passwordVisible ? 'text' : this.type}
               name=${ifDefined(this.name)}
               ?disabled=${this.disabled}
               ?readonly=${this.readonly}
@@ -438,17 +440,17 @@ export default class SlInput extends ShoelaceElement {
                   </button>
                 `
               : ''}
-            ${this.togglePassword && !this.disabled
+            ${this.passwordToggle && !this.disabled
               ? html`
                   <button
                     part="password-toggle-button"
                     class="input__password-toggle"
                     type="button"
-                    aria-label=${this.localize.term(this.isPasswordVisible ? 'hidePassword' : 'showPassword')}
+                    aria-label=${this.localize.term(this.passwordVisible ? 'hidePassword' : 'showPassword')}
                     @click=${this.handlePasswordToggle}
                     tabindex="-1"
                   >
-                    ${this.isPasswordVisible
+                    ${this.passwordVisible
                       ? html`
                           <slot name="show-password-icon">
                             <sl-icon name="eye-slash" library="system"></sl-icon>