declare types for component tags (#371)

src/components/alert/alert.ts

@@ -212,3 +212,9 @@ export default class SlAlert extends LitElement {
     `;
   }
 }
+
+    declare global {
+        interface HTMLElementTagNameMap {
+        'sl-alert': SlAlert;
+        }
+    }

src/components/animation/animation.ts

@@ -202,3 +202,9 @@ export default class SlAnimation extends LitElement {
     return html` <slot @slotchange=${this.handleSlotChange}></slot> `;
   }
 }
+
+    declare global {
+        interface HTMLElementTagNameMap {
+        'sl-animation': SlAnimation;
+        }
+    }

src/components/avatar/avatar.ts

@@ -65,3 +65,9 @@ export default class SlAvatar extends LitElement {
     `;
   }
 }
+
+    declare global {
+        interface HTMLElementTagNameMap {
+        'sl-avatar': SlAvatar;
+        }
+    }

src/components/badge/badge.ts

@@ -45,3 +45,9 @@ export default class SlBadge extends LitElement {
     `;
   }
 }
+
+    declare global {
+        interface HTMLElementTagNameMap {
+        'sl-badge': SlBadge;
+        }
+    }

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

@@ -41,3 +41,9 @@ export default class SlButtonGroup extends LitElement {
     `;
   }
 }
+
+    declare global {
+        interface HTMLElementTagNameMap {
+        'sl-button-group': SlButtonGroup;
+        }
+    }

src/components/button/button.ts

@@ -227,3 +227,9 @@ export default class SlButton extends LitElement {
     return isLink ? link : button;
   }
 }
+
+    declare global {
+        interface HTMLElementTagNameMap {
+        'sl-button': SlButton;
+        }
+    }

src/components/card/card.ts

@@ -68,3 +68,9 @@ export default class SlCard extends LitElement {
     `;
   }
 }
+
+    declare global {
+        interface HTMLElementTagNameMap {
+        'sl-card': SlCard;
+        }
+    }

src/components/checkbox/checkbox.ts

@@ -183,3 +183,9 @@ export default class SlCheckbox extends LitElement {
     `;
   }
 }
+
+    declare global {
+        interface HTMLElementTagNameMap {
+        'sl-checkbox': SlCheckbox;
+        }
+    }

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

@@ -821,3 +821,9 @@ export default class SlColorPicker extends LitElement {
     `;
   }
 }
+
+    declare global {
+        interface HTMLElementTagNameMap {
+        'sl-color-picker': SlColorPicker;
+        }
+    }

src/components/details/details.ts

@@ -211,3 +211,9 @@ export default class SlDetails extends LitElement {
     `;
   }
 }
+
+    declare global {
+        interface HTMLElementTagNameMap {
+        'sl-details': SlDetails;
+        }
+    }

src/components/dialog/dialog.ts

@@ -261,3 +261,9 @@ export default class SlDialog extends LitElement {
     `;
   }
 }
+
+    declare global {
+        interface HTMLElementTagNameMap {
+        'sl-dialog': SlDialog;
+        }
+    }

src/components/drawer/drawer.ts

@@ -272,3 +272,9 @@ export default class SlDrawer extends LitElement {
     `;
   }
 }
+
+    declare global {
+        interface HTMLElementTagNameMap {
+        'sl-drawer': SlDrawer;
+        }
+    }

src/components/dropdown/dropdown.ts

@@ -407,3 +407,9 @@ export default class SlDropdown extends LitElement {
     `;
   }
 }
+
+    declare global {
+        interface HTMLElementTagNameMap {
+        'sl-dropdown': SlDropdown;
+        }
+    }

src/components/form/form.ts

@@ -279,3 +279,9 @@ export default class SlForm extends LitElement {
     `;
   }
 }
+
+    declare global {
+        interface HTMLElementTagNameMap {
+        'sl-form': SlForm;
+        }
+    }

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

@@ -24,3 +24,9 @@ export default class SlFormatBytes extends LitElement {
     });
   }
 }
+
+    declare global {
+        interface HTMLElementTagNameMap {
+        'sl-format-bytes': SlFormatBytes;
+        }
+    }

src/components/format-date/format-date.ts

@@ -70,3 +70,9 @@ export default class SlFormatDate extends LitElement {
     }).format(date);
   }
 }
+
+    declare global {
+        interface HTMLElementTagNameMap {
+        'sl-format-date': SlFormatDate;
+        }
+    }

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

@@ -58,3 +58,9 @@ export default class SlFormatNumber extends LitElement {
     }).format(this.value);
   }
 }
+
+    declare global {
+        interface HTMLElementTagNameMap {
+        'sl-format-number': SlFormatNumber;
+        }
+    }

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

@@ -68,3 +68,9 @@ export default class SlIconButton extends LitElement {
     `;
   }
 }
+
+    declare global {
+        interface HTMLElementTagNameMap {
+        'sl-icon-button': SlIconButton;
+        }
+    }

src/components/icon/icon.ts

@@ -120,3 +120,9 @@ export default class SlIcon extends LitElement {
     return html` <div part="base" class="icon" role="img" aria-label=${this.getLabel()}>${unsafeSVG(this.svg)}</div>`;
   }
 }
+
+    declare global {
+        interface HTMLElementTagNameMap {
+        'sl-icon': SlIcon;
+        }
+    }

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

@@ -135,3 +135,9 @@ export default class SlImageComparer extends LitElement {
     `;
   }
 }
+
+    declare global {
+        interface HTMLElementTagNameMap {
+        'sl-image-comparer': SlImageComparer;
+        }
+    }

src/components/include/include.ts

@@ -78,3 +78,9 @@ export default class SlInclude extends LitElement {
     return html`<slot></slot>`;
   }
 }
+
+    declare global {
+        interface HTMLElementTagNameMap {
+        'sl-include': SlInclude;
+        }
+    }

src/components/input/input.ts

@@ -376,3 +376,9 @@ export default class SlInput extends LitElement {
     );
   }
 }
+
+    declare global {
+        interface HTMLElementTagNameMap {
+        'sl-input': SlInput;
+        }
+    }

src/components/menu-divider/menu-divider.ts

@@ -18,3 +18,9 @@ export default class SlMenuDivider extends LitElement {
     return html` <div part="base" class="menu-divider" role="separator" aria-hidden="true"></div> `;
   }
 }
+
+    declare global {
+        interface HTMLElementTagNameMap {
+        'sl-menu-divider': SlMenuDivider;
+        }
+    }

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

@@ -100,3 +100,9 @@ export default class SlMenuItem extends LitElement {
     `;
   }
 }
+
+    declare global {
+        interface HTMLElementTagNameMap {
+        'sl-menu-item': SlMenuItem;
+        }
+    }

src/components/menu-label/menu-label.ts

@@ -24,3 +24,9 @@ export default class SlMenuLabel extends LitElement {
     `;
   }
 }
+
+    declare global {
+        interface HTMLElementTagNameMap {
+        'sl-menu-label': SlMenuLabel;
+        }
+    }

src/components/menu/menu.ts

@@ -124,3 +124,9 @@ export default class SlMenu extends LitElement {
     `;
   }
 }
+
+    declare global {
+        interface HTMLElementTagNameMap {
+        'sl-menu': SlMenu;
+        }
+    }

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

@@ -50,3 +50,9 @@ export default class SlProgressBar extends LitElement {
     `;
   }
 }
+
+    declare global {
+        interface HTMLElementTagNameMap {
+        'sl-progress-bar': SlProgressBar;
+        }
+    }

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

@@ -76,3 +76,9 @@ export default class SlProgressRing extends LitElement {
     `;
   }
 }
+
+    declare global {
+        interface HTMLElementTagNameMap {
+        'sl-progress-ring': SlProgressRing;
+        }
+    }

src/components/radio/radio.ts

@@ -180,3 +180,9 @@ export default class SlRadio extends LitElement {
     `;
   }
 }
+
+    declare global {
+        interface HTMLElementTagNameMap {
+        'sl-radio': SlRadio;
+        }
+    }

src/components/range/range.ts

@@ -210,3 +210,9 @@ export default class SlRange extends LitElement {
     );
   }
 }
+
+    declare global {
+        interface HTMLElementTagNameMap {
+        'sl-range': SlRange;
+        }
+    }

src/components/rating/rating.ts

@@ -242,3 +242,9 @@ export default class SlRating extends LitElement {
     `;
   }
 }
+
+    declare global {
+        interface HTMLElementTagNameMap {
+        'sl-rating': SlRating;
+        }
+    }

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

@@ -116,3 +116,9 @@ export default class SlRelativeTime extends LitElement {
     return html` <time datetime=${this.isoTime} title=${this.titleTime}>${this.relativeTime}</time> `;
   }
 }
+
+    declare global {
+        interface HTMLElementTagNameMap {
+        'sl-relative-time': SlRelativeTime;
+        }
+    }

src/components/resize-observer/resize-observer.ts

@@ -45,3 +45,9 @@ export default class SlResizeObserver extends LitElement {
     return html` <slot @slotchange=${this.handleSlotChange}></slot> `;
   }
 }
+
+    declare global {
+        interface HTMLElementTagNameMap {
+        'sl-resize-observer': SlResizeObserver;
+        }
+    }

src/components/responsive-embed/responsive-embed.ts

@@ -37,3 +37,9 @@ export default class SlResponsiveEmbed extends LitElement {
     `;
   }
 }
+
+    declare global {
+        interface HTMLElementTagNameMap {
+        'sl-responsive-embed': SlResponsiveEmbed;
+        }
+    }

src/components/select/select.ts

@@ -465,3 +465,9 @@ export default class SlSelect extends LitElement {
     );
   }
 }
+
+    declare global {
+        interface HTMLElementTagNameMap {
+        'sl-select': SlSelect;
+        }
+    }

src/components/skeleton/skeleton.ts

@@ -34,3 +34,9 @@ export default class SlSkeleton extends LitElement {
     `;
   }
 }
+
+    declare global {
+        interface HTMLElementTagNameMap {
+        'sl-skeleton': SlSkeleton;
+        }
+    }

src/components/spinner/spinner.ts

@@ -16,3 +16,9 @@ export default class SlSpinner extends LitElement {
     return html` <span part="base" class="spinner" aria-busy="true" aria-live="polite"></span> `;
   }
 }
+
+    declare global {
+        interface HTMLElementTagNameMap {
+        'sl-spinner': SlSpinner;
+        }
+    }

src/components/switch/switch.ts

@@ -156,3 +156,9 @@ export default class SlSwitch extends LitElement {
     `;
   }
 }
+
+    declare global {
+        interface HTMLElementTagNameMap {
+        'sl-switch': SlSwitch;
+        }
+    }

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

@@ -360,3 +360,9 @@ export default class SlTabGroup extends LitElement {
     `;
   }
 }
+
+    declare global {
+        interface HTMLElementTagNameMap {
+        'sl-tab-group': SlTabGroup;
+        }
+    }

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

@@ -44,3 +44,9 @@ export default class SlTabPanel extends LitElement {
     `;
   }
 }
+
+    declare global {
+        interface HTMLElementTagNameMap {
+        'sl-tab-panel': SlTabPanel;
+        }
+    }

src/components/tab/tab.ts

@@ -88,3 +88,9 @@ export default class SlTab extends LitElement {
     `;
   }
 }
+
+    declare global {
+        interface HTMLElementTagNameMap {
+        'sl-tab': SlTab;
+        }
+    }

src/components/tag/tag.ts

@@ -81,3 +81,9 @@ export default class SlTag extends LitElement {
     `;
   }
 }
+
+    declare global {
+        interface HTMLElementTagNameMap {
+        'sl-tag': SlTag;
+        }
+    }

src/components/textarea/textarea.ts

@@ -296,3 +296,9 @@ export default class SlTextarea extends LitElement {
     );
   }
 }
+
+    declare global {
+        interface HTMLElementTagNameMap {
+        'sl-textarea': SlTextarea;
+        }
+    }

src/components/tooltip/tooltip.ts

@@ -262,3 +262,9 @@ export default class SlTooltip extends LitElement {
     `;
   }
 }
+
+    declare global {
+        interface HTMLElementTagNameMap {
+        'sl-tooltip': SlTooltip;
+        }
+    }

tsconfig.json

@@ -71,5 +71,9 @@
     "removeComments": true,
     "skipLibCheck": true                      /* Skip type checking of declaration files. */,
     "forceConsistentCasingInFileNames": true  /* Disallow inconsistently-cased references to the same file. */
-  }
+  },
+  "exclude": [
+    "docs",
+    "dist"
+  ]
 }