diff --git a/docs/components/input.md b/docs/components/input.md
index 499c9ca79..3df755b97 100644
--- a/docs/components/input.md
+++ b/docs/components/input.md
@@ -76,14 +76,14 @@ const App = () => ;
### 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
-
+
-
+
-
+
```
```jsx react
@@ -91,11 +91,11 @@ import { SlInput } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<>
-
+
-
+
-
+
>
);
```
diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md
index 5b87cc4e2..bf9d72f91 100644
--- a/docs/resources/changelog.md
+++ b/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 `` 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 `` (use the well-supported `aspect-ratio` CSS property instead)
+- 🚨 BREAKING: Changed the `toggle-password` attribute of `` to `password-toggle` for consistency
- Added an expand/collapse animation to ``
- Added `sl-lazy-change` event to ``
- Added `expand-button` part to `` [#893](https://github.com/shoelace-style/shoelace/pull/893)
+- Added `password-visible` attribute to `` [#913](https://github.com/shoelace-style/shoelace/issues/913)
- Fixed a bug in `` that didn't account for the arrow's diagonal size
- Fixed a bug in `` that caused arrow placement to be incorrect with RTL
- Fixed a bug in `` 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 `` component. When this component
- Fixed a bug in `` 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 `` 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 `` that allowed disabled tabs to erroneously receive focus
-- Improved single selection in `` so nodes expand and collapse and receive selection when clicking on the label
+- Improved single selection in `` 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 `` and `` components
- Improved RTL support for ``
- Refactored components to extend from `ShoelaceElement` to make `dir` and `lang` reactive properties in all components
diff --git a/src/components/input/input.ts b/src/components/input/input.ts
index 2ec4de6ff..34f6b479a 100644
--- a/src/components/input/input.ts
+++ b/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 {
`
: ''}
- ${this.togglePassword && !this.disabled
+ ${this.passwordToggle && !this.disabled
? html`