Ensures there are no id clashes (#146)

Ensures there are no id clashes by renaming the internal id property to componentId

src/components/details/details.tsx

@@ -24,7 +24,7 @@ let id = 0;
 export class Details {
   details: HTMLElement;
   header: HTMLElement;
-  id = `details-${++id}`;
+  componentId = `details-${++id}`;
   body: HTMLElement;
 
   /** Indicates whether or not the details is open. You can use this in lieu of the show/hide methods. */
@@ -156,11 +156,11 @@ export class Details {
       >
         <header
           ref={el => (this.header = el)}
-          id={`${this.id}-header`}
+          id={`${this.componentId}-header`}
           class="details__header"
           role="button"
           aria-expanded={this.open}
-          aria-controls={`${this.id}-content`}
+          aria-controls={`${this.componentId}-content`}
           aria-disabled={this.disabled}
           tabIndex={this.disabled ? -1 : 0}
           onClick={this.handleSummaryClick}
@@ -178,10 +178,10 @@ export class Details {
         <div ref={el => (this.body = el)} class="details__body" onTransitionEnd={this.handleBodyTransitionEnd}>
           <div
             part="content"
-            id={`${this.id}-content`}
+            id={`${this.componentId}-content`}
             class="details__content"
             role="region"
-            aria-labeledby={`${this.id}-header`}
+            aria-labeledby={`${this.componentId}-header`}
           >
             <slot />
           </div>

src/components/dialog/dialog.tsx

@@ -29,7 +29,7 @@ let id = 0;
 export class Dialog {
   panel: HTMLElement;
   dialog: HTMLElement;
-  id = `dialog-${++id}`;
+  componentId = `dialog-${++id}`;
 
   @Element() host: HTMLSlDialogElement;
 
@@ -196,12 +196,12 @@ export class Dialog {
           aria-modal="true"
           aria-hidden={!this.open}
           aria-label={this.noHeader ? this.label : null}
-          aria-labeledby={!this.noHeader ? `${this.id}-title` : null}
+          aria-labeledby={!this.noHeader ? `${this.componentId}-title` : null}
           tabIndex={0}
         >
           {!this.noHeader && (
             <header part="header" class="dialog__header">
-              <span part="title" class="dialog__title" id={`${this.id}-title`}>
+              <span part="title" class="dialog__title" id={`${this.componentId}-title`}>
                 {/* If there's no label, use an invisible character to prevent the heading from collapsing */}
                 {this.label || String.fromCharCode(65279)}
               </span>

src/components/drawer/drawer.tsx

@@ -28,7 +28,7 @@ let id = 0;
 export class Drawer {
   panel: HTMLElement;
   drawer: HTMLElement;
-  id = `drawer-${++id}`;
+  componentId = `drawer-${++id}`;
 
   @Element() host: HTMLSlDrawerElement;
 
@@ -216,12 +216,12 @@ export class Drawer {
           aria-modal="true"
           aria-hidden={!this.open}
           aria-label={this.noHeader ? this.label : null}
-          aria-labeledby={!this.noHeader ? `${this.id}-title` : null}
+          aria-labeledby={!this.noHeader ? `${this.componentId}-title` : null}
           tabIndex={0}
         >
           {!this.noHeader && (
             <header part="header" class="drawer__header">
-              <span part="title" class="drawer__title" id={`${this.id}-title`}>
+              <span part="title" class="drawer__title" id={`${this.componentId}-title`}>
                 {/* If there's no label, use an invisible character to prevent the heading from collapsing */}
                 {this.label || String.fromCharCode(65279)}
               </span>

src/components/dropdown/dropdown.tsx

@@ -21,7 +21,7 @@ let id = 0;
   shadow: true
 })
 export class Dropdown {
-  id = `dropdown-${++id}`;
+  componentId = `dropdown-${++id}`;
   ignoreMouseEvents = false;
   ignoreMouseTimeout: any;
   ignoreOpenWatcher = false;
@@ -265,7 +265,7 @@ export class Dropdown {
     return (
       <div
         part="base"
-        id={this.id}
+        id={this.componentId}
         class={{
           dropdown: true,
           'dropdown--open': this.open
@@ -289,7 +289,7 @@ export class Dropdown {
           class="dropdown__panel"
           role="menu"
           aria-hidden={!this.open}
-          aria-labeledby={this.id}
+          aria-labeledby={this.componentId}
           hidden
         >
           <slot />

src/components/tab-panel/tab-panel.tsx

@@ -17,7 +17,7 @@ let id = 0;
   shadow: true
 })
 export class TabPanel {
-  id = `tab-panel-${++id}`;
+  componentId = `tab-panel-${++id}`;
 
   @Element() host: HTMLSlTabPanelElement;
 
@@ -30,7 +30,7 @@ export class TabPanel {
   render() {
     return (
       // If the user didn't provide an ID, we'll set one so we can link tabs and tab panels with aria labels
-      <Host id={this.host.id || this.id} style={{ display: this.active ? 'block' : 'none' }}>
+      <Host id={this.host.id || this.componentId} style={{ display: this.active ? 'block' : 'none' }}>
         <div part="base" class="tab-panel" role="tabpanel" aria-selected={this.active} aria-hidden={!this.active}>
           <slot />
         </div>

src/components/tab/tab.tsx

@@ -17,7 +17,7 @@ let id = 0;
   shadow: true
 })
 export class Tab {
-  id = `tab-${++id}`;
+  componentId = `tab-${++id}`;
   tab: HTMLElement;
 
   @Element() host: HTMLSlTabElement;
@@ -46,7 +46,7 @@ export class Tab {
   render() {
     return (
       // If the user didn't provide an ID, we'll set one so we can link tabs and tab panels with aria labels
-      <Host id={this.host.id || this.id}>
+      <Host id={this.host.id || this.componentId}>
         <div
           part="base"
           ref={el => (this.tab = el)}

src/components/tooltip/tooltip.tsx

@@ -18,7 +18,7 @@ let id = 0;
   shadow: true
 })
 export class Tooltip {
-  id = `tooltip-${++id}`;
+  componentId = `tooltip-${++id}`;
   popover: Popover;
   target: HTMLElement;
   tooltip: any;
@@ -194,7 +194,7 @@ export class Tooltip {
 
     if (newTarget !== oldTarget) {
       oldTarget.removeAttribute('aria-describedby');
-      newTarget.setAttribute('aria-describedby', this.id);
+      newTarget.setAttribute('aria-describedby', this.componentId);
     }
   }
 
@@ -216,13 +216,13 @@ export class Tooltip {
   render() {
     return (
       <Host onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
-        <slot aria-describedby={this.id} />
+        <slot aria-describedby={this.componentId} />
 
         {!this.disabled && (
           <div
             part="base"
             ref={el => (this.tooltip = el)}
-            id={this.id}
+            id={this.componentId}
             class={{
               tooltip: true,
               'tooltip--open': this.open