use attr not prop

docs/resources/changelog.md

@@ -478,7 +478,7 @@ Thank you for your help and patience with testing Shoelace. I promise, we're not
 - Improved a11y of the scroll buttons in `<sl-tab-group>`
 - Improved a11y of the close button in `<sl-tab>`
 - Improved a11y of `<sl-tab-panel>` by removing an invalid `aria-selected` attribute [#579](https://github.com/shoelace-style/shoelace/issues/579)
-- Improved a11y of `<sl-icon>` by not using a variation of the `name` attribute for labels (use the `label` prop instead)
+- Improved a11y of `<sl-icon>` by not using a variation of the `name` attribute for labels (use the `label` attribute instead)
 - Moved `role` from the shadow root to the host element in `<sl-menu>`
 - Removed redundant `role="menu"` in `<sl-dropdown>`
 - Slightly faster animations for showing and hiding `<sl-dropdown>`
@@ -540,7 +540,7 @@ This release is the second attempt at unbundling dependencies. This will be a br
 Shoelace doesn't have a lot of dependencies, but this release unbundles most of them so you can potentially save some extra kilobytes. This will be a breaking change only if your configuration _does not_ support bare module specifiers. CDN users and bundler users will be unaffected.
 
 - 🚨 BREAKING: renamed the `sl-clear` event to `sl-remove`, the `clear-button` part to `remove-button`, and the `clearable` property to `removable` in `<sl-tag>`
-- Added the `disabled` prop to `<sl-resize-observer>`
+- Added the `disabled` attribute to `<sl-resize-observer>`
 - Fixed a bug in `<sl-mutation-observer>` where setting `disabled` initially didn't work
 - Unbundled dependencies and configured external imports to be packaged with bare module specifiers
 

scripts/plop/templates/component/component.hbs

@@ -8,7 +8,7 @@ import type { CSSResultGroup } from 'lit';
 
 /**
  * @summary Short summary of the component's intended use.
- * 
+ *
  * @since 2.0
  * @status experimental
  *
@@ -29,10 +29,10 @@ export default class {{ properCase tag }} extends ShoelaceElement {
 
   private readonly localize = new LocalizeController(this);
 
-  /** An example property. */
-  @property() prop = 'example';
+  /** An example attribute. */
+  @property() attr = 'example';
 
-  @watch('someProp')
+  @watch('someProperty')
   doSomething() {
     // Example event
     this.emit('sl-event-name');

src/components/animation/animation.ts

@@ -32,8 +32,8 @@ export default class SlAnimation extends ShoelaceElement {
   @property() name = 'none';
 
   /**
-   * Plays the animation. When omitted, the animation will be paused. This prop will be automatically removed when the
-   * animation finishes or gets canceled.
+   * Plays the animation. When omitted, the animation will be paused. This attribute will be automatically removed when
+   * the animation finishes or gets canceled.
    */
   @property({ type: Boolean, reflect: true }) play = false;
 

src/components/drawer/drawer.ts

@@ -95,7 +95,7 @@ export default class SlDrawer extends ShoelaceElement {
 
   /**
    * By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of
-   * its parent element, set this prop and add `position: relative` to the parent.
+   * its parent element, set this attribute and add `position: relative` to the parent.
    */
   @property({ type: Boolean, reflect: true }) contained = false;