revert rules

.eslintrc.cjs

@@ -123,14 +123,7 @@ module.exports = {
         ],
         '@typescript-eslint/no-extraneous-class': 'error',
         '@typescript-eslint/no-parameter-properties': 'error',
-        '@typescript-eslint/strict-boolean-expressions': [
-          'error',
-          {
-            allowString: false,
-            allowNumber: false,
-            allowNullableObject: false
-          }
-        ]
+        '@typescript-eslint/strict-boolean-expressions': 'off'
       }
     },
     {
@@ -145,7 +138,7 @@ module.exports = {
     'no-template-curly-in-string': 'error',
     'array-callback-return': 'error',
     'consistent-return': 'error',
-    curly: 'warn',
+    curly: 'off',
     'default-param-last': 'error',
     eqeqeq: 'error',
     'no-constructor-return': 'error',
@@ -154,7 +147,7 @@ module.exports = {
     'no-extend-native': 'error',
     'no-extra-bind': 'error',
     'no-floating-decimal': 'error',
-    'no-implicit-coercion': 'error',
+    'no-implicit-coercion': 'off',
     'no-implicit-globals': 'error',
     'no-implied-eval': 'error',
     'no-invalid-this': 'error',

docs/assets/plugins/metadata/metadata.js

@@ -20,7 +20,7 @@
       <tbody>
         ${props
           .map(prop => {
-            const hasAttribute = typeof prop.attribute !== 'undefined';
+            const hasAttribute = !!prop.attribute;
             const isAttributeDifferent = prop.attribute !== prop.name;
             let attributeInfo = '';
 
@@ -266,7 +266,7 @@
   }
 
   function escapeHtml(html) {
-    if (typeof html === 'undefined') {
+    if (!html) {
       return '';
     }
     return html

src/components/animation/animation.ts

@@ -77,7 +77,7 @@ export default class SlAnimation extends LitElement {
   }
 
   set currentTime(time: number) {
-    if (typeof this.animation !== 'undefined') {
+    if (this.animation) {
       this.animation.currentTime = time;
     }
   }
@@ -126,7 +126,7 @@ export default class SlAnimation extends LitElement {
 
   @watch('play')
   handlePlayChange() {
-    if (typeof this.animation !== 'undefined') {
+    if (this.animation) {
       if (this.play && !this.hasStarted) {
         this.hasStarted = true;
         emit(this, 'sl-start');
@@ -145,7 +145,7 @@ export default class SlAnimation extends LitElement {
 
   @watch('playbackRate')
   handlePlaybackRateChange() {
-    if (typeof this.animation !== 'undefined') {
+    if (this.animation) {
       this.animation.playbackRate = this.playbackRate;
     }
   }
@@ -162,7 +162,7 @@ export default class SlAnimation extends LitElement {
     const slot = await this.defaultSlot;
     const element = slot.assignedElements()[0] as HTMLElement | undefined;
 
-    if (typeof element === 'undefined' || typeof keyframes === 'undefined') {
+    if (!element || !keyframes) {
       return false;
     }
 
@@ -192,7 +192,7 @@ export default class SlAnimation extends LitElement {
   }
 
   destroyAnimation() {
-    if (typeof this.animation !== 'undefined') {
+    if (this.animation) {
       this.animation.cancel();
       this.animation.removeEventListener('cancel', this.handleAnimationCancel);
       this.animation.removeEventListener('finish', this.handleAnimationFinish);

src/components/avatar/avatar.ts

@@ -3,7 +3,6 @@ import { customElement, property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import styles from './avatar.styles';
 import '~/components/icon/icon';
-import { isTruthy } from '~/internal/is-truthy';
 
 /**
  * @since 2.0
@@ -51,7 +50,7 @@ export default class SlAvatar extends LitElement {
         role="img"
         aria-label=${this.label}
       >
-        ${isTruthy(this.initials)
+        ${this.initials
           ? html` <div part="initials" class="avatar__initials">${this.initials}</div> `
           : html`
               <div part="icon" class="avatar__icon" aria-hidden="true">

src/components/breadcrumb-item/breadcrumb-item.ts

@@ -3,7 +3,6 @@ import { customElement, property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import styles from './breadcrumb-item.styles';
-import { isTruthy } from '~/internal/is-truthy';
 import { HasSlotController } from '~/internal/slot';
 
 /**
@@ -41,7 +40,7 @@ export default class SlBreadcrumbItem extends LitElement {
   @property() rel = 'noreferrer noopener';
 
   render() {
-    const isLink = typeof this.href !== 'undefined';
+    const isLink = this.href ? true : false;
 
     return html`
       <div
@@ -61,9 +60,9 @@ export default class SlBreadcrumbItem extends LitElement {
               <a
                 part="label"
                 class="breadcrumb-item__label breadcrumb-item__label--link"
-                href="${this.href}"
-                target="${this.target}"
-                rel=${ifDefined(isTruthy(this.target) ? this.rel : undefined)}
+                href="${this.href!}"
+                target="${ifDefined(this.target ? this.target : undefined)}"
+                rel=${ifDefined(this.target ? this.rel : undefined)}
               >
                 <slot></slot>
               </a>

src/components/button/button.ts

@@ -7,7 +7,6 @@ import styles from './button.styles';
 import '~/components/spinner/spinner';
 import { emit } from '~/internal/event';
 import { FormSubmitController } from '~/internal/form-control';
-import { isTruthy } from '~/internal/is-truthy';
 import { HasSlotController } from '~/internal/slot';
 
 /**
@@ -124,7 +123,7 @@ export default class SlButton extends LitElement {
   }
 
   render() {
-    const isLink = typeof this.href !== 'undefined';
+    const isLink = this.href ? true : false;
     const tag = isLink ? literal`a` : literal`button`;
 
     /* eslint-disable lit/binding-positions, lit/no-invalid-html */
@@ -162,7 +161,7 @@ export default class SlButton extends LitElement {
         href=${ifDefined(this.href)}
         target=${ifDefined(this.target)}
         download=${ifDefined(this.download)}
-        rel=${ifDefined(isTruthy(this.target) ? 'noreferrer noopener' : undefined)}
+        rel=${ifDefined(this.target ? 'noreferrer noopener' : undefined)}
         role="button"
         aria-disabled=${this.disabled ? 'true' : 'false'}
         tabindex=${this.disabled ? '-1' : '0'}

src/components/dropdown/dropdown.ts

@@ -8,7 +8,6 @@ import type SlMenuItem from '~/components/menu-item/menu-item';
 import type SlMenu from '~/components/menu/menu';
 import { animateTo, stopAnimations } from '~/internal/animate';
 import { emit, waitForEvent } from '~/internal/event';
-import { isTruthy } from '~/internal/is-truthy';
 import { scrollIntoView } from '~/internal/scroll';
 import { getTabbableBoundary } from '~/internal/tabbable';
 import { watch } from '~/internal/watch';
@@ -95,7 +94,7 @@ export default class SlDropdown extends LitElement {
     this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);
     this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
 
-    if (typeof this.containingElement === 'undefined') {
+    if (!this.containingElement) {
       this.containingElement = this;
     }
 
@@ -177,7 +176,7 @@ export default class SlDropdown extends LitElement {
             : document.activeElement;
 
         if (
-          !isTruthy(this.containingElement) ||
+          !this.containingElement ||
           activeElement?.closest(this.containingElement.tagName.toLowerCase()) !== this.containingElement
         ) {
           this.hide();
@@ -189,7 +188,7 @@ export default class SlDropdown extends LitElement {
   handleDocumentMouseDown(event: MouseEvent) {
     // Close when clicking outside of the containing element
     const path = event.composedPath();
-    if (isTruthy(this.containingElement) && !path.includes(this.containingElement)) {
+    if (this.containingElement && !path.includes(this.containingElement)) {
       this.hide();
     }
   }
@@ -275,13 +274,13 @@ export default class SlDropdown extends LitElement {
       }
 
       // Focus on a menu item
-      if (event.key === 'ArrowDown' && typeof firstMenuItem !== 'undefined') {
+      if (event.key === 'ArrowDown') {
         menu!.setCurrentItem(firstMenuItem);
         firstMenuItem.focus();
         return;
       }
 
-      if (event.key === 'ArrowUp' && typeof lastMenuItem !== 'undefined') {
+      if (event.key === 'ArrowUp') {
         menu!.setCurrentItem(lastMenuItem);
         lastMenuItem.focus();
         return;
@@ -321,7 +320,7 @@ export default class SlDropdown extends LitElement {
     const assignedElements = slot.assignedElements({ flatten: true }) as HTMLElement[];
     const accessibleTrigger = assignedElements.find(el => getTabbableBoundary(el).start);
 
-    if (typeof accessibleTrigger !== 'undefined') {
+    if (accessibleTrigger) {
       accessibleTrigger.setAttribute('aria-haspopup', 'true');
       accessibleTrigger.setAttribute('aria-expanded', this.open ? 'true' : 'false');
     }

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

@@ -4,7 +4,6 @@ import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import styles from './icon-button.styles';
 import '~/components/icon/icon';
-import { isTruthy } from '~/internal/is-truthy';
 
 /**
  * @since 2.0
@@ -48,7 +47,7 @@ export default class SlIconButton extends LitElement {
   @property({ type: Boolean, reflect: true }) disabled = false;
 
   render() {
-    const isLink = typeof this.href !== 'undefined';
+    const isLink = this.href ? true : false;
 
     const interior = html`
       <sl-icon
@@ -67,7 +66,7 @@ export default class SlIconButton extends LitElement {
             href=${ifDefined(this.href)}
             target=${ifDefined(this.target)}
             download=${ifDefined(this.download)}
-            rel=${ifDefined(isTruthy(this.target) ? 'noreferrer noopener' : undefined)}
+            rel=${ifDefined(this.target ? 'noreferrer noopener' : undefined)}
             role="button"
             aria-disabled=${this.disabled ? 'true' : 'false'}
             aria-label="${this.label}"

src/components/icon/icon.ts

@@ -57,7 +57,7 @@ export default class SlIcon extends LitElement {
 
   private getUrl() {
     const library = getIconLibrary(this.library);
-    if (typeof this.name !== 'undefined' && typeof library !== 'undefined') {
+    if (this.name && library) {
       return library.resolver(this.name);
     }
     return this.src;
@@ -74,7 +74,7 @@ export default class SlIcon extends LitElement {
   async setIcon() {
     const library = getIconLibrary(this.library);
     const url = this.getUrl();
-    if (typeof url !== 'undefined' && url.length > 0) {
+    if (url) {
       try {
         const file = await requestIcon(url);
         if (url !== this.getUrl()) {

src/components/include/include.ts

@@ -51,10 +51,6 @@ export default class SlInclude extends LitElement {
         return;
       }
 
-      if (typeof file === 'undefined') {
-        return;
-      }
-
       if (!file.ok) {
         emit(this, 'sl-error', { detail: { status: file.status } });
         return;

src/components/menu/menu.ts

@@ -138,7 +138,7 @@ export default class SlMenu extends LitElement {
     if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {
       const items = this.getAllItems({ includeDisabled: false });
       const activeItem = this.getCurrentItem();
-      let index = typeof activeItem !== 'undefined' ? items.indexOf(activeItem) : 0;
+      let index = activeItem ? items.indexOf(activeItem) : 0;
 
       if (items.length > 0) {
         event.preventDefault();

src/components/radio/radio.ts

@@ -62,7 +62,7 @@ export default class SlRadio extends LitElement {
         radio.input.tabIndex = -1;
       });
 
-      if (typeof checkedRadio !== 'undefined') {
+      if (checkedRadio) {
         checkedRadio.input.tabIndex = 0;
       } else if (radios.length > 0) {
         radios[0].input.tabIndex = 0;

src/components/range/range.ts

@@ -90,7 +90,7 @@ export default class SlRange extends LitElement {
     super.connectedCallback();
     this.resizeObserver = new ResizeObserver(() => this.syncRange());
 
-    if (typeof this.value === 'undefined') {
+    if (!this.value) {
       this.value = this.min;
     }
     if (this.value < this.min) {

src/components/select/select.ts

@@ -250,13 +250,13 @@ export default class SlSelect extends LitElement {
       }
 
       // Focus on a menu item
-      if (event.key === 'ArrowDown' && typeof firstItem !== 'undefined') {
+      if (event.key === 'ArrowDown') {
         this.menu.setCurrentItem(firstItem);
         firstItem.focus();
         return;
       }
 
-      if (event.key === 'ArrowUp' && typeof lastItem !== 'undefined') {
+      if (event.key === 'ArrowUp') {
         this.menu.setCurrentItem(lastItem);
         lastItem.focus();
         return;
@@ -343,7 +343,7 @@ export default class SlSelect extends LitElement {
       return false;
     });
 
-    if (typeof clearButton !== 'undefined') {
+    if (clearButton) {
       event.stopPropagation();
     }
   }
@@ -408,7 +408,7 @@ export default class SlSelect extends LitElement {
     } else {
       const checkedItem = items.find(item => item.value === value[0]);
 
-      this.displayLabel = typeof checkedItem !== 'undefined' ? this.getItemLabel(checkedItem) : '';
+      this.displayLabel = checkedItem ? this.getItemLabel(checkedItem) : '';
       this.displayTags = [];
     }
   }

src/components/split-panel/split-panel.ts

@@ -117,7 +117,7 @@ export default class SlSplitPanel extends LitElement {
       }
 
       // Check snap points
-      if (typeof this.snap !== 'undefined') {
+      if (this.snap) {
         const snaps = this.snap.split(' ');
 
         snaps.forEach(value => {
@@ -190,7 +190,7 @@ export default class SlSplitPanel extends LitElement {
     this.size = this.vertical ? height : width;
 
     // Resize when a primary panel is set
-    if (typeof this.primary !== 'undefined') {
+    if (this.primary) {
       this.position = this.pixelsToPercentage(this.cachedPositionInPixels);
     }
   }

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

@@ -113,7 +113,7 @@ export default class SlTabGroup extends LitElement {
   show(panel: string) {
     const tab = this.tabs.find(el => el.panel === panel);
 
-    if (typeof tab !== 'undefined') {
+    if (tab) {
       this.setActiveTab(tab, { scrollBehavior: 'smooth' });
     }
   }
@@ -239,7 +239,7 @@ export default class SlTabGroup extends LitElement {
       ...options
     };
 
-    if (typeof tab !== 'undefined' && tab !== this.activeTab && !tab.disabled) {
+    if (tab && tab !== this.activeTab && !tab.disabled) {
       const previousTab = this.activeTab;
       this.activeTab = tab;
 
@@ -258,7 +258,7 @@ export default class SlTabGroup extends LitElement {
 
       // Emit events
       if (options.emitEvents === true) {
-        if (typeof previousTab !== 'undefined') {
+        if (previousTab) {
           emit(this, 'sl-tab-hide', { detail: { name: previousTab.panel } });
         }
         emit(this, 'sl-tab-show', { detail: { name: this.activeTab.panel } });
@@ -270,7 +270,7 @@ export default class SlTabGroup extends LitElement {
     // Link each tab with its corresponding panel
     this.tabs.forEach(tab => {
       const panel = this.panels.find(el => el.name === tab.panel);
-      if (typeof panel !== 'undefined') {
+      if (panel) {
         tab.setAttribute('aria-controls', panel.getAttribute('id')!);
         panel.setAttribute('aria-labelledby', tab.getAttribute('id')!);
       }
@@ -281,7 +281,7 @@ export default class SlTabGroup extends LitElement {
   syncIndicator() {
     const tab = this.getActiveTab();
 
-    if (typeof tab !== 'undefined') {
+    if (tab) {
       this.indicator.style.display = 'block';
       this.repositionIndicator();
     } else {
@@ -292,7 +292,7 @@ export default class SlTabGroup extends LitElement {
   repositionIndicator() {
     const currentTab = this.getActiveTab();
 
-    if (typeof currentTab === 'undefined') {
+    if (!currentTab) {
       return;
     }
 

src/components/textarea/textarea.ts

@@ -149,19 +149,14 @@ export default class SlTextarea extends LitElement {
   }
 
   /** Gets or sets the textarea's scroll position. */
-  scrollPosition(position: { top?: number; left?: number }): void;
-  scrollPosition(): { top: number; left: number };
   scrollPosition(position?: { top?: number; left?: number }): { top: number; left: number } | undefined {
-    if (typeof position !== 'undefined') {
-      if (typeof position.top === 'number') {
-        this.input.scrollTop = position.top;
-      }
-      if (typeof position.left === 'number') {
-        this.input.scrollLeft = position.left;
-      }
-      return undefined;
+    if (position) {
+      if (typeof position.top === 'number') this.input.scrollTop = position.top;
+      if (typeof position.left === 'number') this.input.scrollLeft = position.left;
+      return;
     }
 
+    // eslint-disable-next-line consistent-return
     return {
       top: this.input.scrollTop,
       left: this.input.scrollTop

src/components/tooltip/tooltip.ts

@@ -151,7 +151,7 @@ export default class SlTooltip extends LitElement {
       el => el.tagName.toLowerCase() !== 'style' && el.getAttribute('slot') !== 'content'
     );
 
-    if (typeof target === 'undefined') {
+    if (!target) {
       throw new Error('Invalid tooltip target: no child element was found.');
     }
 

src/internal/form-control.ts

@@ -44,14 +44,14 @@ export class FormSubmitController implements ReactiveController {
   hostConnected() {
     this.form = this.options.form(this.host);
 
-    if (typeof this.form !== 'undefined' && this.form !== null) {
+    if (this.form) {
       this.form.addEventListener('formdata', this.handleFormData);
       this.form.addEventListener('submit', this.handleFormSubmit);
     }
   }
 
   hostDisconnected() {
-    if (typeof this.form !== 'undefined' && this.form !== null) {
+    if (this.form) {
       this.form.removeEventListener('formdata', this.handleFormData);
       this.form.removeEventListener('submit', this.handleFormSubmit);
       this.form = undefined;
@@ -78,13 +78,7 @@ export class FormSubmitController implements ReactiveController {
     const disabled = this.options.disabled(this.host);
     const reportValidity = this.options.reportValidity;
 
-    if (
-      typeof this.form !== 'undefined' &&
-      this.form !== null &&
-      !this.form.noValidate &&
-      !disabled &&
-      !reportValidity(this.host)
-    ) {
+    if (this.form && !this.form.noValidate && !disabled && !reportValidity(this.host)) {
       event.preventDefault();
       event.stopImmediatePropagation();
     }
@@ -94,7 +88,7 @@ export class FormSubmitController implements ReactiveController {
     // Calling form.submit() seems to bypass the submit event and constraint validation. Instead, we can inject a
     // native submit button into the form, click it, then remove it to simulate a standard form submission.
     const button = document.createElement('button');
-    if (typeof this.form !== 'undefined' && this.form !== null) {
+    if (this.form) {
       button.type = 'submit';
       button.style.position = 'absolute';
       button.style.width = '0';
@@ -141,8 +135,8 @@ export function renderFormControl(
   },
   input: TemplateResult
 ) {
-  const hasLabel = typeof props.label !== 'undefined' ? true : props.hasLabelSlot === true;
-  const hasHelpText = typeof props.helpText !== 'undefined' ? true : props.hasHelpTextSlot === true;
+  const hasLabel = props.label ? true : !!props.hasLabelSlot;
+  const hasHelpText = props.helpText ? true : !!props.hasHelpTextSlot;
 
   return html`
     <div

src/internal/is-truthy.ts

@@ -1,4 +0,0 @@
-export function isTruthy<T>(obj: T | T[] | undefined | null | '' | [] | 0 | false): obj is T | T[] {
-  // eslint-disable-next-line no-restricted-syntax -- we do intentionally want the type coercion behavior
-  return Boolean(obj);
-}

src/internal/slot.ts

@@ -45,12 +45,8 @@ export class HasSlotController implements ReactiveController {
 
   handleSlotChange(event: Event) {
     const slot = event.target as HTMLSlotElement;
-    const isSlotNameDefined = typeof slot.name !== 'undefined';
 
-    if (
-      (this.slotNames.includes('[default]') && !isSlotNameDefined) ||
-      (isSlotNameDefined && this.slotNames.includes(slot.name))
-    ) {
+    if ((this.slotNames.includes('[default]') && !slot.name) || (slot.name && this.slotNames.includes(slot.name))) {
       this.host.requestUpdate();
     }
   }
@@ -82,7 +78,7 @@ export function getInnerHTML(slot: HTMLSlotElement): string {
  * string. This is useful because we can't use slot.textContent as an alternative.
  */
 export function getTextContent(slot: HTMLSlotElement | undefined | null): string {
-  if (typeof slot === 'undefined' || slot === null) {
+  if (!slot) {
     return '';
   }
   const nodes = slot.assignedNodes({ flatten: true });

src/utilities/animation-registry.ts

@@ -36,13 +36,13 @@ export function getAnimation(el: Element, animationName: string) {
   const customAnimation = customAnimationRegistry.get(el);
 
   // Check for a custom animation
-  if (typeof customAnimation?.[animationName] !== 'undefined') {
+  if (customAnimation?.[animationName]) {
     return customAnimation[animationName];
   }
 
   // Check for a default animation
   const defaultAnimation = defaultAnimationRegistry.get(animationName);
-  if (typeof defaultAnimation !== 'undefined') {
+  if (defaultAnimation) {
     return defaultAnimation;
   }
 

src/utilities/base-path.ts

@@ -28,14 +28,14 @@ export function getBasePath() {
 const scripts = [...document.getElementsByTagName('script')] as HTMLScriptElement[];
 const configScript = scripts.find(script => script.hasAttribute('data-shoelace'));
 
-if (typeof configScript !== 'undefined') {
+if (configScript) {
   // Use the data-shoelace attribute
   setBasePath(configScript.getAttribute('data-shoelace')!);
 } else {
   const fallbackScript = scripts.find(s => /shoelace(\.min)?\.js($|\?)/.test(s.src));
   let path = '';
 
-  if (typeof fallbackScript !== 'undefined') {
+  if (fallbackScript) {
     path = fallbackScript.getAttribute('src')!;
   }