fix default values

src/components/avatar/avatar.ts

@@ -23,13 +23,13 @@ export default class SlAvatar extends LitElement {
   @state() private hasError = false;
 
   /** The image source to use for the avatar. */
-  @property() image = '';
+  @property() image: string;
 
   /** Alternative text for the image. */
-  @property() alt = '';
+  @property() alt: string;
 
   /** Initials to use as a fallback when no image is available (1-2 characters max recommended). */
-  @property() initials = '';
+  @property() initials: string;
 
   /** The shape of the avatar. */
   @property({ reflect: true }) shape: 'circle' | 'square' | 'rounded' = 'circle';

src/components/button/button.ts

@@ -59,19 +59,19 @@ export default class SlButton extends LitElement {
   @property({ type: Boolean, reflect: true }) submit = false;
 
   /** An optional name for the button. Ignored when `href` is set. */
-  @property() name = '';
+  @property() name: string;
 
   /** An optional value for the button. Ignored when `href` is set. */
-  @property() value = '';
+  @property() value: string;
 
   /** When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`. */
-  @property() href = '';
+  @property() href: string;
 
   /** Tells the browser where to open the link. Only used when `href` is set. */
   @property() target: '_blank' | '_parent' | '_self' | '_top';
 
   /** Tells the browser to download the linked file as this filename. Only used when `href` is set. */
-  @property() download = '';
+  @property() download: string;
 
   /** Emitted when the button loses focus. */
   @event('sl-blur') slBlur: EventEmitter<void>;
@@ -156,7 +156,6 @@ export default class SlButton extends LitElement {
 
     const button = html`
       <button
-        ref=${(el: HTMLButtonElement) => (this.button = el)}
         part="base"
         class=${classMap({
           button: true,
@@ -182,8 +181,8 @@ export default class SlButton extends LitElement {
         })}
         ?disabled=${this.disabled}
         type=${this.submit ? 'submit' : 'button'}
-        name=${this.name}
-        .value=${this.value}
+        name=${ifDefined(this.name)}
+        value=${ifDefined(this.value)}
         @blur=${this.handleBlur}
         @focus=${this.handleFocus}
         @click=${this.handleClick}
@@ -218,7 +217,7 @@ export default class SlButton extends LitElement {
           'button--has-prefix': this.hasPrefix,
           'button--has-suffix': this.hasSuffix
         })}
-        href=${this.href}
+        href=${ifDefined(this.href)}
         target=${ifDefined(this.target)}
         download=${ifDefined(this.download)}
         rel=${ifDefined(this.target ? 'noreferrer noopener' : undefined)}

src/components/checkbox/checkbox.ts

@@ -1,6 +1,7 @@
 import { LitElement, html, unsafeCSS } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators';
 import { classMap } from 'lit-html/directives/class-map';
+import { ifDefined } from 'lit-html/directives/if-defined';
 import { event, EventEmitter, watch } from '../../internal/decorators';
 import styles from 'sass:./checkbox.scss';
 
@@ -30,10 +31,10 @@ export default class SlCheckbox extends LitElement {
   @state() private hasFocus = false;
 
   /** The checkbox's name attribute. */
-  @property() name = '';
+  @property() name: string;
 
   /** The checkbox's value attribute. */
-  @property() value = '';
+  @property() value: string;
 
   /** Disables the checkbox. */
   @property({ type: Boolean, reflect: true }) disabled = false;
@@ -168,8 +169,8 @@ export default class SlCheckbox extends LitElement {
           <input
             id=${this.inputId}
             type="checkbox"
-            name=${this.name}
-            .value=${this.value}
+            name=${ifDefined(this.name)}
+            value=${ifDefined(this.value)}
             ?checked=${this.checked}
             ?disabled=${this.disabled}
             ?required=${this.required}

src/components/details/details.ts

@@ -1,6 +1,7 @@
 import { LitElement, html, unsafeCSS } from 'lit';
 import { customElement, property, query } from 'lit/decorators';
 import { classMap } from 'lit-html/directives/class-map';
+import { ifDefined } from 'lit-html/directives/if-defined';
 import { event, EventEmitter, watch } from '../../internal/decorators';
 import styles from 'sass:./details.scss';
 import { focusVisible } from '../../internal/focus-visible';
@@ -37,7 +38,7 @@ export default class SlDetails extends LitElement {
   @property({ type: Boolean, reflect: true }) open = false;
 
   /** The summary to show in the details header. If you need to display HTML, use the `summary` slot instead. */
-  @property() summary = '';
+  @property() summary: string;
 
   /** Disables the details so it can't be toggled. */
   @property({ type: Boolean, reflect: true }) disabled = false;

src/components/icon-button/icon-button.ts

@@ -20,13 +20,13 @@ export default class SlIconButton extends LitElement {
   @query('button') button: HTMLButtonElement;
 
   /** The name of the icon to draw. */
-  @property() name = '';
+  @property() name: string;
 
   /** The name of a registered custom icon library. */
-  @property() library = '';
+  @property() library: string;
 
   /** An external URL of an SVG file. */
-  @property() src = '';
+  @property() src: string;
 
   /**
    * A description that gets read by screen readers and other assistive devices. For optimal accessibility, you should

src/components/icon/icon.ts

@@ -21,13 +21,13 @@ export default class SlIcon extends LitElement {
   @state() private svg = '';
 
   /** The name of the icon to draw. */
-  @property() name = '';
+  @property() name: string;
 
   /** An external URL of an SVG file. */
-  @property() src = '';
+  @property() src: string;
 
   /** An alternative description to use for accessibility. If omitted, the name or src will be used to generate it. */
-  @property() label = '';
+  @property() label: string;
 
   /** The name of a registered custom icon library. */
   @property() library = 'default';

src/components/input/input.ts

@@ -55,7 +55,7 @@ export default class SlInput extends LitElement {
   @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
 
   /** The input's name attribute. */
-  @property() name = '';
+  @property() name: string;
 
   /** The input's value attribute. */
   @property() value = '';
@@ -64,7 +64,7 @@ export default class SlInput extends LitElement {
   @property({ type: Boolean, reflect: true }) pill = false;
 
   /** The input's label. Alternatively, you can use the label slot. */
-  @property() label = '';
+  @property() label: string;
 
   /** The input's help text. Alternatively, you can use the help-text slot. */
   @property({ attribute: 'help-text' }) helpText = '';
@@ -76,7 +76,7 @@ export default class SlInput extends LitElement {
   @property({ attribute: 'toggle-password', type: Boolean }) togglePassword = false;
 
   /** The input's placeholder text. */
-  @property() placeholder = '';
+  @property() placeholder: string;
 
   /** Disables the input. */
   @property({ type: Boolean, reflect: true }) disabled = false;

src/components/radio/radio.ts

@@ -1,6 +1,7 @@
 import { LitElement, html, unsafeCSS } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators';
 import { classMap } from 'lit-html/directives/class-map';
+import { ifDefined } from 'lit-html/directives/if-defined';
 import { event, EventEmitter, watch } from '../../internal/decorators';
 import styles from 'sass:./radio.scss';
 
@@ -29,10 +30,10 @@ export default class SlRadio extends LitElement {
   @state() private hasFocus = false;
 
   /** The radio's name attribute. */
-  @property() name = '';
+  @property() name: string;
 
   /** The radio's value attribute. */
-  @property() value = '';
+  @property() value: string;
 
   /** Disables the radio. */
   @property({ type: Boolean, reflect: true }) disabled = false;
@@ -166,8 +167,8 @@ export default class SlRadio extends LitElement {
           <input
             id=${this.inputId}
             type="radio"
-            name=${this.name}
-            .value=${this.value}
+            name=${ifDefined(this.name)}
+            value=${ifDefined(this.value)}
             ?checked=${this.checked}
             ?disabled=${this.disabled}
             role="radio"

src/components/select/select.ts

@@ -88,7 +88,7 @@ export default class SlSelect extends LitElement {
   @property({ type: Boolean, reflect: true }) pill = false;
 
   /** The select's label. Alternatively, you can use the label slot. */
-  @property() label = '';
+  @property() label: string;
 
   /** The select's help text. Alternatively, you can use the help-text slot. */
   @property({ attribute: 'help-text' }) helpText: string;

src/components/switch/switch.ts

@@ -1,6 +1,7 @@
 import { LitElement, html, unsafeCSS } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators';
 import { classMap } from 'lit-html/directives/class-map';
+import { ifDefined } from 'lit-html/directives/if-defined';
 import { event, EventEmitter, watch } from '../../internal/decorators';
 import styles from 'sass:./switch.scss';
 
@@ -29,10 +30,10 @@ export default class SlSwitch extends LitElement {
   @state() private hasFocus = false;
 
   /** The switch's name attribute. */
-  @property() name = '';
+  @property() name: string;
 
   /** The switch's value attribute. */
-  @property() value = '';
+  @property() value: string;
 
   /** Disables the switch. */
   @property({ type: Boolean, reflect: true }) disabled = false;
@@ -140,8 +141,8 @@ export default class SlSwitch extends LitElement {
           <input
             id=${this.switchId}
             type="checkbox"
-            name=${this.name}
-            .value=${this.value}
+            name=${ifDefined(this.name)}
+            value=${ifDefined(this.value)}
             ?checked=${this.checked}
             ?disabled=${this.disabled}
             ?required=${this.required}

src/components/textarea/textarea.ts

@@ -41,19 +41,19 @@ export default class SlTextarea extends LitElement {
   @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
 
   /** The textarea's name attribute. */
-  @property() name = '';
+  @property() name: string;
 
   /** The textarea's value attribute. */
   @property() value = '';
 
   /** The textarea's label. Alternatively, you can use the label slot. */
-  @property() label = '';
+  @property() label: string;
 
   /** The textarea's help text. Alternatively, you can use the help-text slot. */
   @property({ attribute: 'help-text' }) helpText = '';
 
   /** The textarea's placeholder text. */
-  @property() placeholder = '';
+  @property() placeholder: string;
 
   /** The number of rows to display by default. */
   @property({ type: Number }) rows = 4;
@@ -284,7 +284,7 @@ export default class SlTextarea extends LitElement {
             part="textarea"
             id=${this.inputId}
             class="textarea__control"
-            name=${this.name}
+            name=${ifDefined(this.name)}
             .value=${this.value}
             ?disabled=${this.disabled}
             ?readonly=${this.readonly}