don't use inferred types for analyzer

src/components/alert/alert.ts

@@ -44,10 +44,10 @@ export default class SlAlert extends LitElement {
   @query('[part="base"]') base: HTMLElement;
 
   /** Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods. */
-  @property({ type: Boolean, reflect: true }) open = false;
+  @property({ type: Boolean, reflect: true }) open: boolean = false;
 
   /** Makes the alert closable. */
-  @property({ type: Boolean, reflect: true }) closable = false;
+  @property({ type: Boolean, reflect: true }) closable: boolean = false;
 
   /** The type of alert. */
   @property({ reflect: true }) type: 'primary' | 'success' | 'info' | 'warning' | 'danger' = 'primary';
@@ -56,7 +56,7 @@ export default class SlAlert extends LitElement {
    * The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with
    * the alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`.
    */
-  @property({ type: Number }) duration = Infinity;
+  @property({ type: Number }) duration: number = Infinity;
 
   firstUpdated() {
     this.base.hidden = !this.open;

src/components/animation/animation.ts

@@ -25,25 +25,25 @@ export default class SlAnimation extends LitElement {
   @queryAsync('slot') defaultSlot: Promise<HTMLSlotElement>;
 
   /** The name of the built-in animation to use. For custom animations, use the `keyframes` prop. */
-  @property() name = 'none';
+  @property() name: string = 'none';
 
   /** The number of milliseconds to delay the start of the animation. */
-  @property({ type: Number }) delay = 0;
+  @property({ type: Number }) delay: number = 0;
 
   /** Determines the direction of playback as well as the behavior when reaching the end of an iteration. */
   @property() direction: PlaybackDirection = 'normal';
 
   /** The number of milliseconds each iteration of the animation takes to complete. */
-  @property({ type: Number }) duration = 1000;
+  @property({ type: Number }) duration: number = 1000;
 
   /**
    * The easing function to use for the animation. This can be a Shoelace easing function or a custom easing function
    * such as `cubic-bezier(0, 1, .76, 1.14)`.
    */
-  @property() easing = 'linear';
+  @property() easing: string = 'linear';
 
   /** The number of milliseconds to delay after the active period of an animation sequence. */
-  @property({ attribute: 'end-delay', type: Number }) endDelay = 0;
+  @property({ attribute: 'end-delay', type: Number }) endDelay: number = 0;
 
   /** Sets how the animation applies styles to its target before and after its execution. */
   @property() fill: FillMode = 'auto';
@@ -52,7 +52,7 @@ export default class SlAnimation extends LitElement {
   @property({ type: Number }) iterations: number = Infinity;
 
   /** The offset at which to start the animation, usually between 0 (start) and 1 (end). */
-  @property({ attribute: 'iteration-start', type: Number }) iterationStart = 0;
+  @property({ attribute: 'iteration-start', type: Number }) iterationStart: number = 0;
 
   /** The keyframes to use for the animation. If this is set, `name` will be ignored. */
   @property({ attribute: false }) keyframes: Keyframe[];
@@ -62,10 +62,10 @@ export default class SlAnimation extends LitElement {
    * to `2`, for example, will double the animation's speed. A negative value can be used to reverse the animation. This
    * value can be changed without causing the animation to restart.
    */
-  @property({ attribute: 'playback-rate', type: Number }) playbackRate = 1;
+  @property({ attribute: 'playback-rate', type: Number }) playbackRate: number = 1;
 
   /** Pauses the animation. The animation will resume when this prop is removed. */
-  @property({ type: Boolean }) pause = false;
+  @property({ type: Boolean }) pause: boolean = false;
 
   connectedCallback() {
     super.connectedCallback();

src/components/badge/badge.ts

@@ -19,10 +19,10 @@ export default class SlBadge extends LitElement {
   @property({ reflect: true }) type: 'primary' | 'success' | 'info' | 'warning' | 'danger' = 'primary';
 
   /** Draws a pill-style badge with rounded edges. */
-  @property({ type: Boolean, reflect: true }) pill = false;
+  @property({ type: Boolean, reflect: true }) pill: boolean = false;
 
   /** Makes the badge pulsate to draw attention. */
-  @property({ type: Boolean, reflect: true }) pulse = false;
+  @property({ type: Boolean, reflect: true }) pulse: boolean = false;
 
   render() {
     return html`

src/components/button-group/button-group.ts

@@ -17,7 +17,7 @@ export default class SlButtonGroup extends LitElement {
   @query('slot') defaultSlot: HTMLSlotElement;
 
   /** A label to use for the button group's `aria-label` attribute. */
-  @property() label = '';
+  @property() label: string = '';
 
   handleFocus(event: CustomEvent) {
     const button = findButton(event.target as HTMLElement);

src/components/button/button.ts

@@ -44,22 +44,22 @@ export default class SlButton extends LitElement {
   @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
 
   /** Draws the button with a caret for use with dropdowns, popovers, etc. */
-  @property({ type: Boolean, reflect: true }) caret = false;
+  @property({ type: Boolean, reflect: true }) caret: boolean = false;
 
   /** Disables the button. */
-  @property({ type: Boolean, reflect: true }) disabled = false;
+  @property({ type: Boolean, reflect: true }) disabled: boolean = false;
 
   /** Draws the button in a loading state. */
-  @property({ type: Boolean, reflect: true }) loading = false;
+  @property({ type: Boolean, reflect: true }) loading: boolean = false;
 
   /** Draws a pill-style button with rounded edges. */
-  @property({ type: Boolean, reflect: true }) pill = false;
+  @property({ type: Boolean, reflect: true }) pill: boolean = false;
 
   /** Draws a circle button. */
-  @property({ type: Boolean, reflect: true }) circle = false;
+  @property({ type: Boolean, reflect: true }) circle: boolean = false;
 
   /** Indicates if activating the button should submit the form. Ignored when `href` is set. */
-  @property({ type: Boolean, reflect: true }) submit = false;
+  @property({ type: Boolean, reflect: true }) submit: boolean = false;
 
   /** An optional name for the button. Ignored when `href` is set. */
   @property() name: string;

src/components/checkbox/checkbox.ts

@@ -42,19 +42,19 @@ export default class SlCheckbox extends LitElement {
   @property() value: string;
 
   /** Disables the checkbox. */
-  @property({ type: Boolean, reflect: true }) disabled = false;
+  @property({ type: Boolean, reflect: true }) disabled: boolean = false;
 
   /** Makes the checkbox a required field. */
-  @property({ type: Boolean, reflect: true }) required = false;
+  @property({ type: Boolean, reflect: true }) required: boolean = false;
 
   /** Draws the checkbox in a checked state. */
-  @property({ type: Boolean, reflect: true }) checked = false;
+  @property({ type: Boolean, reflect: true }) checked: boolean = false;
 
   /** Draws the checkbox in an indeterminate state. */
-  @property({ type: Boolean, reflect: true }) indeterminate = false;
+  @property({ type: Boolean, reflect: true }) indeterminate: boolean = false;
 
   /** This will be true when the control is in an invalid state. Validity is determined by the `required` prop. */
-  @property({ type: Boolean, reflect: true }) invalid = false;
+  @property({ type: Boolean, reflect: true }) invalid: boolean = false;
 
   firstUpdated() {
     this.invalid = !this.input.checkValidity();

src/components/color-picker/color-picker.ts

@@ -60,7 +60,7 @@ export default class SlColorPicker extends LitElement {
   @state() private showCopyFeedback = false;
 
   /** The current color. */
-  @property() value = '#ffffff';
+  @property() value: string = '#ffffff';
 
   /**
    * The format to use for the display value. If opacity is enabled, these will translate to HEXA, RGBA, and HSLA
@@ -70,43 +70,43 @@ export default class SlColorPicker extends LitElement {
   @property() format: 'hex' | 'rgb' | 'hsl' = 'hex';
 
   /** Renders the color picker inline rather than inside a dropdown. */
-  @property({ type: Boolean, reflect: true }) inline = false;
+  @property({ type: Boolean, reflect: true }) inline: boolean = false;
 
   /** Determines the size of the color picker's trigger. This has no effect on inline color pickers. */
   @property() size: 'small' | 'medium' | 'large' = 'medium';
 
   /** Removes the format toggle. */
-  @property({ attribute: 'no-format-toggle', type: Boolean }) noFormatToggle = false;
+  @property({ attribute: 'no-format-toggle', type: Boolean }) noFormatToggle: boolean = false;
 
   /** The input's name attribute. */
-  @property() name = '';
+  @property() name: string = '';
 
   /** Disables the color picker. */
-  @property({ type: Boolean, reflect: true }) disabled = false;
+  @property({ type: Boolean, reflect: true }) disabled: boolean = false;
 
   /**
    * This will be true when the control is in an invalid state. Validity is determined by the `setCustomValidity()`
    * method using the browser's constraint validation API.
    */
-  @property({ type: Boolean, reflect: true }) invalid = false;
+  @property({ type: Boolean, reflect: true }) invalid: boolean = false;
 
   /**
    * Enable this option to prevent the panel from being clipped when the component is placed inside a container with
    * `overflow: auto|scroll`.
    */
-  @property({ type: Boolean }) hoist = false;
+  @property({ type: Boolean }) hoist: boolean = false;
 
   /** Whether to show the opacity slider. */
-  @property({ type: Boolean }) opacity = false;
+  @property({ type: Boolean }) opacity: boolean = false;
 
   /** By default, the value will be set in lowercase. Set this to true to set it in uppercase instead. */
-  @property({ type: Boolean }) uppercase = false;
+  @property({ type: Boolean }) uppercase: boolean = false;
 
   /**
    * An array of predefined color swatches to display. Can include any format the color picker can parse, including
    * HEX(A), RGB(A), HSL(A), and CSS color names.
    */
-  @property({ attribute: false }) swatches = [
+  @property({ attribute: false }) swatches: string[] = [
     '#d0021b',
     '#f5a623',
     '#f8e71c',

src/components/details/details.ts

@@ -45,13 +45,13 @@ export default class SlDetails extends LitElement {
   private componentId = `details-${++id}`;
 
   /** Indicates whether or not the details is open. You can use this in lieu of the show/hide methods. */
-  @property({ type: Boolean, reflect: true }) open = false;
+  @property({ type: Boolean, reflect: true }) open: boolean = false;
 
   /** The summary to show in the details header. If you need to display HTML, use the `summary` slot instead. */
   @property() summary: string;
 
   /** Disables the details so it can't be toggled. */
-  @property({ type: Boolean, reflect: true }) disabled = false;
+  @property({ type: Boolean, reflect: true }) disabled: boolean = false;
 
   connectedCallback() {
     super.connectedCallback();

src/components/dialog/dialog.ts

@@ -72,19 +72,19 @@ export default class SlDialog extends LitElement {
   @state() private hasFooter = false;
 
   /** Indicates whether or not the dialog is open. You can use this in lieu of the show/hide methods. */
-  @property({ type: Boolean, reflect: true }) open = false;
+  @property({ type: Boolean, reflect: true }) open: boolean = false;
 
   /**
    * The dialog's label as displayed in the header. You should always include a relevant label even when using
    * `no-header`, as it is required for proper accessibility.
    */
-  @property({ reflect: true }) label = '';
+  @property({ reflect: true }) label: string = '';
 
   /**
    * Disables the header. This will also remove the default close button, so please ensure you provide an easy,
    * accessible way for users to dismiss the dialog.
    */
-  @property({ attribute: 'no-header', type: Boolean, reflect: true }) noHeader = false;
+  @property({ attribute: 'no-header', type: Boolean, reflect: true }) noHeader: boolean = false;
 
   connectedCallback() {
     super.connectedCallback();

src/components/drawer/drawer.ts

@@ -80,13 +80,13 @@ export default class SlDrawer extends LitElement {
   @state() private hasFooter = false;
 
   /** Indicates whether or not the drawer is open. You can use this in lieu of the show/hide methods. */
-  @property({ type: Boolean, reflect: true }) open = false;
+  @property({ type: Boolean, reflect: true }) open: boolean = false;
 
   /**
    * The drawer's label as displayed in the header. You should always include a relevant label even when using
    * `no-header`, as it is required for proper accessibility.
    */
-  @property({ reflect: true }) label = '';
+  @property({ reflect: true }) label: string = '';
 
   /** The direction from which the drawer will open. */
   @property({ reflect: true }) placement: 'top' | 'end' | 'bottom' | 'start' = 'end';
@@ -95,13 +95,13 @@ export default class SlDrawer extends LitElement {
    * 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.
    */
-  @property({ type: Boolean, reflect: true }) contained = false;
+  @property({ type: Boolean, reflect: true }) contained: false = false;
 
   /**
    * Removes the header. This will also remove the default close button, so please ensure you provide an easy,
    * accessible way for users to dismiss the drawer.
    */
-  @property({ attribute: 'no-header', type: Boolean, reflect: true }) noHeader = false;
+  @property({ attribute: 'no-header', type: Boolean, reflect: true }) noHeader: false = false;
 
   connectedCallback() {
     super.connectedCallback();

src/components/dropdown/dropdown.ts

@@ -46,7 +46,7 @@ export default class SlDropdown extends LitElement {
   private popover: PopperInstance;
 
   /** Indicates whether or not the dropdown is open. You can use this in lieu of the show/hide methods. */
-  @property({ type: Boolean, reflect: true }) open = false;
+  @property({ type: Boolean, reflect: true }) open: boolean = false;
 
   /**
    * The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel
@@ -67,25 +67,25 @@ export default class SlDropdown extends LitElement {
     | 'left-end' = 'bottom-start';
 
   /** Disables the dropdown so the panel will not open. */
-  @property({ type: Boolean }) disabled = false;
+  @property({ type: Boolean }) disabled: boolean = false;
 
   /** Determines whether the dropdown should hide when a menu item is selected. */
-  @property({ attribute: 'close-on-select', type: Boolean, reflect: true }) closeOnSelect = true;
+  @property({ attribute: 'close-on-select', type: Boolean, reflect: true }) closeOnSelect: boolean = true;
 
   /** The dropdown will close when the user interacts outside of this element (e.g. clicking). */
   @property({ attribute: false }) containingElement: HTMLElement;
 
   /** The distance in pixels from which to offset the panel away from its trigger. */
-  @property({ type: Number }) distance = 2;
+  @property({ type: Number }) distance: number = 2;
 
   /** The distance in pixels from which to offset the panel along its trigger. */
-  @property({ type: Number }) skidding = 0;
+  @property({ type: Number }) skidding: number = 0;
 
   /**
    * Enable this option to prevent the panel from being clipped when the component is placed inside a container with
    * `overflow: auto|scroll`.
    */
-  @property({ type: Boolean }) hoist = false;
+  @property({ type: Boolean }) hoist: boolean = false;
 
   connectedCallback() {
     super.connectedCallback();

src/components/form/form.ts

@@ -41,7 +41,7 @@ export default class SlForm extends LitElement {
   private formControls: FormControl[];
 
   /** Prevent the form from validating inputs before submitting. */
-  @property({ type: Boolean, reflect: true }) novalidate = false;
+  @property({ type: Boolean, reflect: true }) novalidate: boolean = false;
 
   connectedCallback() {
     super.connectedCallback();

src/components/format-bytes/format-bytes.ts

@@ -9,7 +9,7 @@ import { formatBytes } from '../../internal/number';
 @customElement('sl-format-bytes')
 export default class SlFormatBytes extends LitElement {
   /** The number to format in bytes. */
-  @property({ type: Number }) value = 0;
+  @property({ type: Number }) value: number = 0;
 
   /** The unit to display. */
   @property() unit: 'bytes' | 'bits' = 'bytes';

src/components/format-number/format-number.ts

@@ -8,7 +8,7 @@ import { customElement, property } from 'lit/decorators.js';
 @customElement('sl-format-number')
 export default class SlFormatNumber extends LitElement {
   /** The number to format. */
-  @property({ type: Number }) value = 0;
+  @property({ type: Number }) value: number = 0;
 
   /** The locale to use when formatting the number. */
   @property() locale: string;
@@ -17,10 +17,10 @@ export default class SlFormatNumber extends LitElement {
   @property() type: 'currency' | 'decimal' | 'percent' = 'decimal';
 
   /** Turns off grouping separators. */
-  @property({ attribute: 'no-grouping', type: Boolean }) noGrouping = false;
+  @property({ attribute: 'no-grouping', type: Boolean }) noGrouping: boolean = false;
 
   /** The currency to use when formatting. Must be an ISO 4217 currency code such as `USD` or `EUR`. */
-  @property() currency = 'USD';
+  @property() currency: string = 'USD';
 
   /** How to display the currency. */
   @property({ attribute: 'currency-display' }) currencyDisplay: 'symbol' | 'narrowSymbol' | 'code' | 'name' = 'symbol';

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

@@ -32,10 +32,10 @@ export default class SlIconButton extends LitElement {
    * A description that gets read by screen readers and other assistive devices. For optimal accessibility, you should
    * always include a label that describes what the icon button does.
    */
-  @property() label = '';
+  @property() label: string = '';
 
   /** Disables the button. */
-  @property({ type: Boolean, reflect: true }) disabled = false;
+  @property({ type: Boolean, reflect: true }) disabled: boolean = false;
 
   connectedCallback() {
     super.connectedCallback();

src/components/icon/icon.ts

@@ -34,7 +34,7 @@ export default class SlIcon extends LitElement {
   @property() label: string;
 
   /** The name of a registered custom icon library. */
-  @property() library = 'default';
+  @property() library: string = 'default';
 
   connectedCallback() {
     super.connectedCallback();

src/components/image-comparer/image-comparer.ts

@@ -35,7 +35,7 @@ export default class SlImageComparer extends LitElement {
   @query('.image-comparer__handle') handle: HTMLElement;
 
   /** The position of the divider as a percentage. */
-  @property({ type: Number, reflect: true }) position = 50;
+  @property({ type: Number, reflect: true }) position: number = 50;
 
   handleDrag(event: any) {
     const { width } = this.base.getBoundingClientRect();

src/components/include/include.ts

@@ -26,7 +26,7 @@ export default class SlInclude extends LitElement {
    * Allows included scripts to be executed. You must ensure the content you're including is trusted, otherwise this
    * option can lead to XSS vulnerabilities in your app!
    */
-  @property({ attribute: 'allow-scripts', type: Boolean }) allowScripts = false;
+  @property({ attribute: 'allow-scripts', type: Boolean }) allowScripts: boolean = false;
 
   executeScript(script: HTMLScriptElement) {
     // Create a copy of the script and swap it out so the browser executes it

src/components/input/input.ts

@@ -67,31 +67,31 @@ export default class SlInput extends LitElement {
   @property() name: string;
 
   /** The input's value attribute. */
-  @property() value = '';
+  @property() value: string = '';
 
   /** Draws a pill-style input with rounded edges. */
-  @property({ type: Boolean, reflect: true }) pill = false;
+  @property({ type: Boolean, reflect: true }) pill: boolean = false;
 
   /** The input's label. Alternatively, you can use the label slot. */
   @property() label: string;
 
   /** The input's help text. Alternatively, you can use the help-text slot. */
-  @property({ attribute: 'help-text' }) helpText = '';
+  @property({ attribute: 'help-text' }) helpText: string = '';
 
   /** Adds a clear button when the input is populated. */
-  @property({ type: Boolean }) clearable = false;
+  @property({ type: Boolean }) clearable: boolean = false;
 
   /** Adds a password toggle button to password inputs. */
-  @property({ attribute: 'toggle-password', type: Boolean }) togglePassword = false;
+  @property({ attribute: 'toggle-password', type: Boolean }) togglePassword: boolean = false;
 
   /** The input's placeholder text. */
   @property() placeholder: string;
 
   /** Disables the input. */
-  @property({ type: Boolean, reflect: true }) disabled = false;
+  @property({ type: Boolean, reflect: true }) disabled: boolean = false;
 
   /** Makes the input readonly. */
-  @property({ type: Boolean, reflect: true }) readonly = false;
+  @property({ type: Boolean, reflect: true }) readonly: boolean = false;
 
   /** The minimum length of input that will be considered valid. */
   @property({ type: Number }) minlength: number;
@@ -112,13 +112,13 @@ export default class SlInput extends LitElement {
   @property() pattern: string;
 
   /** Makes the input a required field. */
-  @property({ type: Boolean, reflect: true }) required = false;
+  @property({ type: Boolean, reflect: true }) required: boolean = false;
 
   /**
    * This will be true when the control is in an invalid state. Validity is determined by props such as `type`,
    * `required`, `minlength`, `maxlength`, and `pattern` using the browser's constraint validation API.
    */
-  @property({ type: Boolean, reflect: true }) invalid = false;
+  @property({ type: Boolean, reflect: true }) invalid: boolean = false;
 
   /** The input's autocaptialize attribute. */
   @property() autocapitalize: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters';

src/components/menu-item/menu-item.ts

@@ -29,13 +29,13 @@ export default class SlMenuItem extends LitElement {
   @state() private hasFocus = false;
 
   /** Draws the item in a checked state. */
-  @property({ type: Boolean, reflect: true }) checked = false;
+  @property({ type: Boolean, reflect: true }) checked: boolean = false;
 
   /** A unique value to store in the menu item. This can be used as a way to identify menu items when selected. */
-  @property() value = '';
+  @property() value: string = '';
 
   /** Draws the menu item in a disabled state. */
-  @property({ type: Boolean, reflect: true }) disabled = false;
+  @property({ type: Boolean, reflect: true }) disabled: boolean = false;
 
   /** Sets focus on the button. */
   focus(options?: FocusOptions) {

src/components/progress-bar/progress-bar.ts

@@ -24,10 +24,10 @@ export default class SlProgressBar extends LitElement {
   static styles = unsafeCSS(styles);
 
   /** The progress bar's percentage, 0 to 100. */
-  @property({ type: Number, reflect: true }) percentage = 0;
+  @property({ type: Number, reflect: true }) percentage: number = 0;
 
   /** When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state. */
-  @property({ type: Boolean, reflect: true }) indeterminate = false;
+  @property({ type: Boolean, reflect: true }) indeterminate: boolean = false;
 
   render() {
     return html`

src/components/progress-ring/progress-ring.ts

@@ -22,10 +22,10 @@ export default class SlProgressRing extends LitElement {
   @query('.progress-ring__indicator') indicator: SVGCircleElement;
 
   /** The size of the progress ring in pixels. */
-  @property({ type: Number }) size = 128;
+  @property({ type: Number }) size: number = 128;
 
   /** The stroke width of the progress ring in pixels. */
-  @property({ attribute: 'stroke-width', type: Number }) strokeWidth = 4;
+  @property({ attribute: 'stroke-width', type: Number }) strokeWidth: number = 4;
 
   /** The current progress percentage, 0 - 100. */
   @property({ type: Number, reflect: true }) percentage: number;

src/components/qr-code/qr-code.ts

@@ -18,22 +18,22 @@ export default class SlQrCode extends LitElement {
   @query('canvas') canvas: HTMLElement;
 
   /** The QR code's value. */
-  @property() value = '';
+  @property() value: string = '';
 
   /** The label used when screen readers announce the code. If unspecified, the value will be used. */
-  @property() label = '';
+  @property() label: string = '';
 
   /** The size of the code's overall square in pixels. */
-  @property({ type: Number }) size = 128;
+  @property({ type: Number }) size: number = 128;
 
   /** The fill color. This can be any valid CSS color, but not a CSS custom property. */
-  @property() fill = '#000';
+  @property() fill: string = '#000';
 
   /** The background color. This can be any valid CSS color or `transparent`, but not a CSS custom property. */
-  @property() background = '#fff';
+  @property() background: string = '#fff';
 
   /** The edge radius of each module. Must be between 0 and 0.5. */
-  @property({ type: Number }) radius = 0;
+  @property({ type: Number }) radius: number = 0;
 
   /** The level of error correction to use. */
   @property({ attribute: 'error-correction' }) errorCorrection: 'L' | 'M' | 'Q' | 'H' = 'H';

src/components/radio-group/radio-group.ts

@@ -18,10 +18,10 @@ export default class SlRadioGroup extends LitElement {
   static styles = unsafeCSS(styles);
 
   /** The radio group label. Required for proper accessibility. Alternatively, you can use the label slot. */
-  @property() label = '';
+  @property() label: string = '';
 
   /** Hides the fieldset and legend that surrounds the radio group. The label will still be read by screen readers. */
-  @property({ type: Boolean, attribute: 'no-fieldset' }) noFieldset = false;
+  @property({ type: Boolean, attribute: 'no-fieldset' }) noFieldset: boolean = false;
 
   render() {
     return html`

src/components/radio/radio.ts

@@ -41,16 +41,16 @@ export default class SlRadio extends LitElement {
   @property() value: string;
 
   /** Disables the radio. */
-  @property({ type: Boolean, reflect: true }) disabled = false;
+  @property({ type: Boolean, reflect: true }) disabled: boolean = false;
 
   /** Draws the radio in a checked state. */
-  @property({ type: Boolean, reflect: true }) checked = false;
+  @property({ type: Boolean, reflect: true }) checked: boolean = false;
 
   /**
    * This will be true when the control is in an invalid state. Validity in range inputs is determined by the message
    * provided by the `setCustomValidity` method.
    */
-  @property({ type: Boolean, reflect: true }) invalid = false;
+  @property({ type: Boolean, reflect: true }) invalid: boolean = false;
 
   /** Simulates a click on the radio. */
   click() {

src/components/range/range.ts

@@ -43,40 +43,40 @@ export default class SlRange extends LitElement {
   @state() private hasTooltip = false;
 
   /** The input's name attribute. */
-  @property() name = '';
+  @property() name: string = '';
 
   /** The input's value attribute. */
-  @property({ type: Number }) value = 0;
+  @property({ type: Number }) value: number = 0;
 
   /** The range's label. Alternatively, you can use the label slot. */
-  @property() label = '';
+  @property() label: string = '';
 
   /** The range's help text. Alternatively, you can use the help-text slot. */
-  @property({ attribute: 'help-text' }) helpText = '';
+  @property({ attribute: 'help-text' }) helpText: string = '';
 
   /** Disables the input. */
-  @property({ type: Boolean, reflect: true }) disabled = false;
+  @property({ type: Boolean, reflect: true }) disabled: boolean = false;
 
   /**
    * This will be true when the control is in an invalid state. Validity in range inputs is determined by the message
    * provided by the `setCustomValidity` method.
    */
-  @property({ type: Boolean, reflect: true }) invalid = false;
+  @property({ type: Boolean, reflect: true }) invalid: boolean = false;
 
   /** The input's min attribute. */
-  @property({ type: Number }) min = 0;
+  @property({ type: Number }) min: number = 0;
 
   /** The input's max attribute. */
-  @property({ type: Number }) max = 100;
+  @property({ type: Number }) max: number = 100;
 
   /** The input's step attribute. */
-  @property({ type: Number }) step = 1;
+  @property({ type: Number }) step: number = 1;
 
   /** The preferred placedment of the tooltip. */
   @property() tooltip: 'top' | 'bottom' | 'none' = 'top';
 
   /** A function used to format the tooltip's value. */
-  @property() tooltipFormatter = (value: number) => value.toString();
+  @property({ attribute: false }) tooltipFormatter: (value: number) => string = (value: number) => value.toString();
 
   connectedCallback() {
     super.connectedCallback();

src/components/rating/rating.ts

@@ -34,23 +34,24 @@ export default class SlRating extends LitElement {
   @state() private isHovering = false;
 
   /** The current rating. */
-  @property({ type: Number }) value = 0;
+  @property({ type: Number }) value: number = 0;
 
   /** The highest rating to show. */
-  @property({ type: Number }) max = 5;
+  @property({ type: Number }) max: number = 5;
 
   /** The minimum increment value allowed by the control. */
-  @property({ type: Number }) precision = 1;
+  @property({ type: Number }) precision: number = 1;
 
   /** Makes the rating readonly. */
-  @property({ type: Boolean, reflect: true }) readonly = false;
+  @property({ type: Boolean, reflect: true }) readonly: boolean = false;
 
   /** Disables the rating. */
-  @property({ type: Boolean, reflect: true }) disabled = false;
+  @property({ type: Boolean, reflect: true }) disabled: boolean = false;
 
   /** The name of the icon to display as the symbol. */
   // @ts-ignore
-  @property() getSymbol = (value?: number) => '<sl-icon name="star-fill" library="system"></sl-icon>';
+  @property() getSymbol: (value: number) => string = (value: number) =>
+    '<sl-icon name="star-fill" library="system"></sl-icon>';
 
   /** Sets focus on the rating. */
   focus(options?: FocusOptions) {

src/components/relative-time/relative-time.ts

@@ -30,7 +30,7 @@ export default class SlRelativeTime extends LitElement {
   @property() numeric: 'always' | 'auto' = 'auto';
 
   /** Keep the displayed value up to date as time passes. */
-  @property({ type: Boolean }) sync = false;
+  @property({ type: Boolean }) sync: boolean = false;
 
   disconnectedCallback() {
     super.disconnectedCallback();

src/components/responsive-media/responsive-media.ts

@@ -17,7 +17,7 @@ export default class SlResponsiveMedia extends LitElement {
    * The aspect ratio of the embedded media in the format of `width:height`, e.g. `16:9`, `4:3`, or `1:1`. Ratios not in
    * this format will be ignored.
    */
-  @property({ attribute: 'aspect-ratio' }) aspectRatio = '16:9';
+  @property({ attribute: 'aspect-ratio' }) aspectRatio: string = '16:9';
 
   /** Determines how content will be resized to fit its container. */
   @property() fit: 'cover' | 'contain' = 'cover';

src/components/select/select.ts

@@ -68,22 +68,22 @@ export default class SlSelect extends LitElement {
   @state() private displayTags: TemplateResult[] = [];
 
   /** Enables multiselect. With this enabled, value will be an array. */
-  @property({ type: Boolean, reflect: true }) multiple = false;
+  @property({ type: Boolean, reflect: true }) multiple: boolean = false;
 
   /**
    * The maximum number of tags to show when `multiple` is true. After the maximum, "+n" will be shown to indicate the
    * number of additional items that are selected. Set to -1 to remove the limit.
    */
-  @property({ attribute: 'max-tags-visible', type: Number }) maxTagsVisible = 3;
+  @property({ attribute: 'max-tags-visible', type: Number }) maxTagsVisible: number = 3;
 
   /** Disables the select control. */
-  @property({ type: Boolean, reflect: true }) disabled = false;
+  @property({ type: Boolean, reflect: true }) disabled: boolean = false;
 
   /** The select's name. */
-  @property() name = '';
+  @property() name: string = '';
 
   /** The select's placeholder text. */
-  @property() placeholder = '';
+  @property() placeholder: string = '';
 
   /** The select's size. */
   @property() size: 'small' | 'medium' | 'large' = 'medium';
@@ -92,13 +92,13 @@ export default class SlSelect extends LitElement {
    * Enable this option to prevent the panel from being clipped when the component is placed inside a container with
    * `overflow: auto|scroll`.
    */
-  @property({ type: Boolean }) hoist = false;
+  @property({ type: Boolean }) hoist: boolean = false;
 
   /** The value of the control. This will be a string or an array depending on `multiple`. */
   @property() value: string | Array<string> = '';
 
   /** Draws a pill-style select with rounded edges. */
-  @property({ type: Boolean, reflect: true }) pill = false;
+  @property({ type: Boolean, reflect: true }) pill: boolean = false;
 
   /** The select's label. Alternatively, you can use the label slot. */
   @property() label: string;
@@ -107,13 +107,13 @@ export default class SlSelect extends LitElement {
   @property({ attribute: 'help-text' }) helpText: string;
 
   /** The select's required attribute. */
-  @property({ type: Boolean, reflect: true }) required = false;
+  @property({ type: Boolean, reflect: true }) required: boolean = false;
 
   /** Adds a clear button when the select is populated. */
-  @property({ type: Boolean }) clearable = false;
+  @property({ type: Boolean }) clearable: boolean = false;
 
   /** This will be true when the control is in an invalid state. Validity is determined by the `required` prop. */
-  @property({ type: Boolean, reflect: true }) invalid = false;
+  @property({ type: Boolean, reflect: true }) invalid: boolean = false;
 
   connectedCallback() {
     super.connectedCallback();

src/components/switch/switch.ts

@@ -45,16 +45,16 @@ export default class SlSwitch extends LitElement {
   @property() value: string;
 
   /** Disables the switch. */
-  @property({ type: Boolean, reflect: true }) disabled = false;
+  @property({ type: Boolean, reflect: true }) disabled: boolean = false;
 
   /** Makes the switch a required field. */
-  @property({ type: Boolean, reflect: true }) required = false;
+  @property({ type: Boolean, reflect: true }) required: boolean = false;
 
   /** Draws the switch in a checked state. */
-  @property({ type: Boolean, reflect: true }) checked = false;
+  @property({ type: Boolean, reflect: true }) checked: boolean = false;
 
   /** This will be true when the control is in an invalid state. Validity is determined by the `required` prop. */
-  @property({ type: Boolean, reflect: true }) invalid = false;
+  @property({ type: Boolean, reflect: true }) invalid: boolean = false;
 
   firstUpdated() {
     this.invalid = !this.input.checkValidity();

src/components/tab-group/tab-group.ts

@@ -58,7 +58,7 @@ export default class SlTabGroup extends LitElement {
   @property() activation: 'auto' | 'manual' = 'auto';
 
   /** Disables the scroll arrows that appear when tabs overflow. */
-  @property({ attribute: 'no-scroll-controls', type: Boolean }) noScrollControls = false;
+  @property({ attribute: 'no-scroll-controls', type: Boolean }) noScrollControls: boolean = false;
 
   connectedCallback() {
     super.connectedCallback();

src/components/tab-panel/tab-panel.ts

@@ -19,10 +19,10 @@ export default class SlTabPanel extends LitElement {
   private componentId = `tab-panel-${++id}`;
 
   /** The tab panel's name. */
-  @property() name = '';
+  @property() name: string = '';
 
   /** When true, the tab panel will be shown. */
-  @property({ type: Boolean, reflect: true }) active = false;
+  @property({ type: Boolean, reflect: true }) active: false = false;
 
   connectedCallback() {
     super.connectedCallback();

src/components/tab/tab.ts

@@ -30,16 +30,16 @@ export default class SlTab extends LitElement {
   private componentId = `tab-${++id}`;
 
   /** The name of the tab panel the tab will control. The panel must be located in the same tab group. */
-  @property() panel = '';
+  @property() panel: string = '';
 
   /** Draws the tab in an active state. */
-  @property({ type: Boolean, reflect: true }) active = false;
+  @property({ type: Boolean, reflect: true }) active: boolean = false;
 
   /** Makes the tab closable and shows a close icon. */
-  @property({ type: Boolean }) closable = false;
+  @property({ type: Boolean }) closable: boolean = false;
 
   /** Draws the tab in a disabled state. */
-  @property({ type: Boolean, reflect: true }) disabled = false;
+  @property({ type: Boolean, reflect: true }) disabled: boolean = false;
 
   /** Sets focus to the tab. */
   focus(options?: FocusOptions) {

src/components/tag/tag.ts

@@ -29,10 +29,10 @@ export default class SlTag extends LitElement {
   @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
 
   /** Draws a pill-style tag with rounded edges. */
-  @property({ type: Boolean, reflect: true }) pill = false;
+  @property({ type: Boolean, reflect: true }) pill: false = false;
 
   /** Makes the tag clearable. */
-  @property({ type: Boolean }) clearable = false;
+  @property({ type: Boolean }) clearable: false = false;
 
   handleClearClick() {
     emit(this, 'sl-clear');

src/components/textarea/textarea.ts

@@ -50,28 +50,28 @@ export default class SlTextarea extends LitElement {
   @property() name: string;
 
   /** The textarea's value attribute. */
-  @property() value = '';
+  @property() value: string = '';
 
   /** The textarea's label. Alternatively, you can use the label slot. */
   @property() label: string;
 
   /** The textarea's help text. Alternatively, you can use the help-text slot. */
-  @property({ attribute: 'help-text' }) helpText = '';
+  @property({ attribute: 'help-text' }) helpText: string = '';
 
   /** The textarea's placeholder text. */
   @property() placeholder: string;
 
   /** The number of rows to display by default. */
-  @property({ type: Number }) rows = 4;
+  @property({ type: Number }) rows: number = 4;
 
   /** Controls how the textarea can be resized. */
   @property() resize: 'none' | 'vertical' | 'auto' = 'vertical';
 
   /** Disables the textarea. */
-  @property({ type: Boolean, reflect: true }) disabled = false;
+  @property({ type: Boolean, reflect: true }) disabled: boolean = false;
 
   /** Makes the textarea readonly. */
-  @property({ type: Boolean, reflect: true }) readonly = false;
+  @property({ type: Boolean, reflect: true }) readonly: boolean = false;
 
   /** The minimum length of input that will be considered valid. */
   @property({ type: Number }) minlength: number;
@@ -83,13 +83,13 @@ export default class SlTextarea extends LitElement {
   @property() pattern: string;
 
   /** Makes the textarea a required field. */
-  @property({ type: Boolean, reflect: true }) required = false;
+  @property({ type: Boolean, reflect: true }) required: boolean = false;
 
   /**
    * This will be true when the control is in an invalid state. Validity is determined by props such as `type`,
    * `required`, `minlength`, and `maxlength` using the browser's constraint validation API.
    */
-  @property({ type: Boolean, reflect: true }) invalid = false;
+  @property({ type: Boolean, reflect: true }) invalid: boolean = false;
 
   /** The textarea's autocaptialize attribute. */
   @property() autocapitalize:

src/components/tooltip/tooltip.ts

@@ -44,7 +44,7 @@ export default class SlTooltip extends LitElement {
   private hoverTimeout: any;
 
   /** The tooltip's content. Alternatively, you can use the content slot. */
-  @property() content = '';
+  @property() content: string = '';
 
   /**
    * The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip
@@ -65,23 +65,23 @@ export default class SlTooltip extends LitElement {
     | 'left-end' = 'top';
 
   /** Disables the tooltip so it won't show when triggered. */
-  @property({ type: Boolean, reflect: true }) disabled = false;
+  @property({ type: Boolean, reflect: true }) disabled: boolean = false;
 
   /** The distance in pixels from which to offset the tooltip away from its target. */
-  @property({ type: Number }) distance = 10;
+  @property({ type: Number }) distance: number = 10;
 
   /** Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods. */
-  @property({ type: Boolean, reflect: true }) open = false;
+  @property({ type: Boolean, reflect: true }) open: boolean = false;
 
   /** The distance in pixels from which to offset the tooltip along its target. */
-  @property({ type: Number }) skidding = 0;
+  @property({ type: Number }) skidding: number = 0;
 
   /**
    * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple
    * options can be passed by separating them with a space. When manual is used, the tooltip must be activated
    * programmatically.
    */
-  @property() trigger = 'hover focus';
+  @property() trigger: string = 'hover focus';
 
   connectedCallback() {
     super.connectedCallback();