@scania/tegel 0.0.10 → 0.0.11

package/dist/collection/components/popover-menu/popover-menu.css

@@ -1,4 +1,4 @@
-:host {
+.tds-popover-menu {
   box-sizing: border-box;
   overflow: hidden;
   width: 160px;
@@ -6,14 +6,8 @@
   padding: 16px;
   box-shadow: 0 3px 3px rgba(0, 0, 0, 0.15), 0 -1px 1px rgba(0, 0, 0, 0.1);
   border-radius: 4px;
-  display: none;
   z-index: 800;
 }
-:host * {
+.tds-popover-menu * {
   box-sizing: border-box;
-}
-
-:host(.tds-popover-menu-show) {
-  opacity: 1;
-  display: block;
 }

package/dist/collection/components/popover-menu/popover-menu.js

@@ -1,77 +1,30 @@
 import { Host, h } from '@stencil/core';
-import { createPopper } from '@popperjs/core';
+import { inheritAttributes } from '../../utils/utils';
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For the list of menu items.
+ */
 export class TdsPopoverMenu {
   constructor() {
+    this.inheritedAttributes = [];
     this.selector = '';
     this.referenceEl = undefined;
-    this.show = false;
+    this.show = null;
     this.placement = 'auto';
     this.offsetSkidding = 0;
     this.offsetDistance = 8;
-    this.renderedShowValue = false;
-    this.popperInstance = undefined;
-    this.target = undefined;
   }
-  handleOutsideClick() {
-    if (this.show) {
-      this.show = false;
-    }
-  }
-  componentDidLoad() {
-    var _a;
-    this.target = (_a = this.referenceEl) !== null && _a !== void 0 ? _a : document.querySelector(this.selector);
-    this.renderedShowValue = this.show;
-    this.popperInstance = createPopper(this.target, this.popoverMenuElement, {
-      strategy: 'fixed',
-      placement: this.placement,
-      modifiers: [
-        {
-          name: 'offset',
-          options: {
-            offset: [this.offsetSkidding, this.offsetDistance],
-          },
-        },
-      ],
-    });
-    const showMenu = () => {
-      this.show = true;
-    };
-    const hideMenu = () => {
-      this.show = false;
-    };
-    this.target.addEventListener('mousedown', (event) => {
-      event.stopPropagation();
-      if (this.show) {
-        hideMenu();
-      }
-      else {
-        showMenu();
-      }
-    });
-    this.popoverMenuElement.addEventListener('mousemove', (event) => {
-      event.stopPropagation();
-    });
-    this.popoverMenuElement.addEventListener('mousedown', (event) => {
-      event.stopPropagation();
-    });
-  }
-  componentDidRender() {
-    if (this.show && !this.renderedShowValue) {
-      // Here we update the popper position since its position is wrong
-      // before it is rendered.
-      this.popperInstance.update();
-    }
-    this.renderedShowValue = this.show;
-  }
-  disconnectedCallback() {
-    var _a;
-    (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.destroy();
+  componentWillLoad() {
+    this.inheritedAttributes = inheritAttributes(this.host, ['style', 'class']);
   }
   render() {
-    return (h(Host, { class: `tds-popover-menu ${this.show ? 'tds-popover-menu-show' : ''}` }, h("slot", null)));
+    var _a;
+    return (h(Host, null, h("tds-popover-core", { class: {
+        'tds-popover-menu': true,
+        [(_a = this.inheritedAttributes.class) !== null && _a !== void 0 ? _a : '']: true,
+      }, selector: this.selector, referenceEl: this.referenceEl, show: this.show, placement: this.placement, offsetSkidding: this.offsetSkidding, offsetDistance: this.offsetDistance }, h("slot", null))));
   }
   static get is() { return "tds-popover-menu"; }
-  static get encapsulation() { return "shadow"; }
+  static get encapsulation() { return "scoped"; }
   static get originalStyleUrls() {
     return {
       "$": ["popover-menu.scss"]
@@ -137,7 +90,7 @@ export class TdsPopoverMenu {
         },
         "attribute": "show",
         "reflect": false,
-        "defaultValue": "false"
+        "defaultValue": "null"
       },
       "placement": {
         "type": "string",
@@ -200,21 +153,5 @@ export class TdsPopoverMenu {
       }
     };
   }
-  static get states() {
-    return {
-      "renderedShowValue": {},
-      "popperInstance": {},
-      "target": {}
-    };
-  }
-  static get elementRef() { return "popoverMenuElement"; }
-  static get listeners() {
-    return [{
-        "name": "mousedown",
-        "method": "handleOutsideClick",
-        "target": "window",
-        "capture": false,
-        "passive": true
-      }];
-  }
+  static get elementRef() { return "host"; }
 }

package/dist/collection/components/popover-menu/popover-menu.stories.js

@@ -34,7 +34,7 @@ export default {
         'Top start',
         'Top end',
         'Left',
-        'Left-start',
+        'Left start',
         'Left end',
         'Right',
         'Right start',
@@ -67,7 +67,7 @@ const Template = ({ menuPosition, icons }) => {
     'Top start': 'top-start',
     'Top end': 'top-end',
     'Left': 'left',
-    'Left star': 'left-start',
+    'Left start': 'left-start',
     'Left end': 'left-end',
     'Right': 'right',
     'Right start': 'right-start',
@@ -130,7 +130,7 @@ const Template = ({ menuPosition, icons }) => {
         <tds-icon slot="icon" size="16px" name="kebab"></tds-icon>
       </tds-button>
     </div>
-
+    
     <script>
       // The 'selector' prop on Popover-Menu can be used instead, but it might be less ideal in frameworks like React 
       document.getElementById('my-popover-menu').referenceEl = document.getElementById('my-popover-button');

package/dist/collection/components/side-menu/side-menu-collapse-button/side-menu-collapse-button.js

@@ -1,6 +1,6 @@
 import { h, Host } from '@stencil/core';
 /**
- * @slot <default>  - <b>Unnamed slot.</b> Used for injecting text presented in collapse button
+ * @slot <default>  - <b>Unnamed slot.</b> For the text label of the button.
  * */
 export class TdsSideMenuCollapseButton {
   constructor() {

package/dist/collection/components/side-menu/side-menu-dropdown/side-menu-dropdown.js

@@ -2,7 +2,7 @@ import { Fragment, h, Host } from '@stencil/core';
 /**
  * @slot button-icon - Used for injecting the icon that compliments the dropdown title
  * @slot button-label - Used for injecting the text, aka dropdown title
- * @slot <default>  - <b>Unnamed slot.</b> Used for injection of <code>tds-side-menu-dropdown-list</code> subcomponent
+ * @slot <default> - <b>Unnamed slot.</b> For injection of the <code>tds-side-menu-dropdown-list</code> subcomponent.
  * */
 export class TdsSideMenuDropdown {
   constructor() {

package/dist/collection/components/side-menu/side-menu-dropdown-list/side-menu-dropdown-list.js

@@ -1,6 +1,6 @@
 import { Host, h } from '@stencil/core';
 /**
- * @slot <default>  - <b>Unnamed slot.</b> Used for injection of <code>tds-side-menu-dropdown-list-item</code> subcomponent
+ * @slot <default>  - <b>Unnamed slot.</b> For injection of <code>tds-side-menu-dropdown-list-item</code> subcomponents.
  * */
 export class TdsSideMenuDropdownList {
   constructor() {

package/dist/collection/components/side-menu/side-menu-dropdown-list-item/side-menu-dropdown-list-item.js

@@ -1,6 +1,6 @@
 import { h, Host } from '@stencil/core';
 /**
- * @slot <default>  - <b>Unnamed slot.</b> Used for injecting native <code>button</code> and <code>link</code> elements
+ * @slot <default> - <b>Unnamed slot.</b> For injecting a native <code>&lt;button></code> or <code>&lt;a></code> element.
  * */
 export class TdsSideMenuDropdownListItem {
   constructor() {

package/dist/collection/components/side-menu/side-menu-item/side-menu-item.js

@@ -1,7 +1,7 @@
 import { h, Host } from '@stencil/core';
 import { dfs } from '../../../utils/utils';
 /**
- * @slot <default>  - <b>Unnamed slot.</b> Used for injecting native <code>button</code> and <code>link</code> elements
+ * @slot <default> - <b>Unnamed slot.</b> For injecting a native <code>&lt;button</code> and <code>&lt;a></code> element.
  * */
 export class TdsSideMenuItem {
   constructor() {

package/dist/collection/components/side-menu/side-menu.js

@@ -6,7 +6,7 @@ const INITIALIZE_ANIMATION_DELAY = 500;
 /**
  * @slot overlay - Used of injection of tds-side-menu-overlay
  * @slot close-button - Used for injection of tds-side-menu-close-button that is show when in mobile view
- * @slot <default> - <b>Unnamed slot.</b>
+ * @slot <default> - <b>Unnamed slot.</b> For primary content of the side menu - like buttons.
  * Used for nesting main content of Side Menu, e.g. <code><tds-side-menu-item></code> and <code><tds-side-menu-dropdown></code> components
  * @slot end - Used for items that are presented at the bottom of the Side Menu, e.g. profile settings
  * @slot sticky-end - Used for tds-side-menu-collapse-button component

package/dist/collection/components/slider/slider.js

@@ -316,7 +316,11 @@ export class TdsSlider {
     }
   }
   render() {
-    return (h("div", { class: `tds-slider-wrapper ${this.readonlyState ? 'read-only' : ''}` }, h("input", { class: "tds-slider-native-element", type: "range", value: this.value, name: this.name, min: this.min, max: this.max, disabled: this.disabled }), h("div", { class: `tds-slider ${this.disabled ? 'disabled' : ''} ${this.useSmall ? 'tds-slider-small' : ''}`, ref: (el) => {
+    return (h("div", { class: `tds-slider-wrapper ${this.readonlyState ? 'read-only' : ''}` }, h("input", { class: "tds-slider-native-element", type: "range", value: this.value, name: this.name, min: this.min, max: this.max, disabled: this.disabled }), h("div", { class: {
+        'tds-slider': true,
+        'disabled': this.disabled,
+        'tds-slider-small': this.useSmall,
+      }, ref: (el) => {
         this.wrapperElement = el;
       } }, h("label", { class: this.showTickNumbers && 'offset' }, this.label), this.useInput && (h("div", { class: "tds-slider__input-values" }, h("div", { ref: (el) => {
         this.minusElement = el;

package/dist/collection/components/stepper/stepper.js

@@ -1,5 +1,8 @@
 import { Host, h } from '@stencil/core';
 import { generateUniqueId } from '../../utils/utils';
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For the step elements.
+ */
 export class TdsStepper {
   constructor() {
     this.orientation = 'horizontal';

package/dist/collection/components/table/table/table.js

@@ -2,6 +2,9 @@
 // https://medium.com/@scottmgerstl/passing-an-object-or-array-to-stencil-dd62b7d92641
 import { h, Host } from '@stencil/core';
 import { generateUniqueId } from '../../../utils/utils';
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For the table contents.
+ */
 export class TdsTable {
   constructor() {
     this.verticalDividers = false;

package/dist/collection/components/table/table-body/table-body.js

@@ -4,9 +4,9 @@ const relevantTableProps = [
   'enableExpandableRows',
 ];
 /**
- * @slot <default> - Default slot for the Table Body, used by <tds-table-body-row>
+ * @slot <default> - <b>Unnamed slot.</b> For table rows.
  * @slot no-result - Slot for no result message when using filtering.
-*/
+ */
 export class TdsTableBody {
   constructor() {
     this.uncheckAll = () => {

package/dist/collection/components/table/table-body-cell/table-body-cell.js

@@ -4,6 +4,9 @@ const relevantTableProps = [
   'compactDesign',
   'noMinWidth',
 ];
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For the cell contents.
+ */
 export class TdsTableBodyCell {
   constructor() {
     this.cellValue = undefined;

package/dist/collection/components/table/table-body-row/table-body-row.js

@@ -5,6 +5,9 @@ const relevantTableProps = [
   'compactDesign',
   'modeVariant',
 ];
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For the cells.
+ */
 export class TdsTableBodyRow {
   constructor() {
     this.enableMultiselect = false;

package/dist/collection/components/table/table-body-row-expandable/table-body-row-expandable.js

@@ -6,6 +6,7 @@ const relevantTableProps = [
   'modeVariant',
 ];
 /**
+ * @slot <default> - <b>Unnamed slot.</b> For the cells.
  * @slot expand-row - Slot for the expanded row.
  */
 export class TdsTableBodyRowExpandable {

package/dist/collection/components/table/table-header/table-header.js

@@ -6,6 +6,9 @@ const relevantTableProps = [
   'compactDesign',
   'noMinWidth',
 ];
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For the header cells.
+ */
 export class TdsTableHeaderRow {
   constructor() {
     this.enableMultiselect = false;

package/dist/collection/components/tabs/folder-tabs/folder-tab/folder-tab.js

@@ -1,4 +1,7 @@
 import { Host, h } from '@stencil/core';
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For the tab link or button.
+ */
 export class TdsFolderTab {
   constructor() {
     this.disabled = false;

package/dist/collection/components/tabs/folder-tabs/folder-tabs.js

@@ -1,4 +1,7 @@
 import { Host, h, } from '@stencil/core';
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For the tab elements.
+ */
 export class TdsFolderTabs {
   constructor() {
     this.navWrapperElement = null; // reference to container with nav buttons

package/dist/collection/components/tabs/inline-tabs/inline-tab/inline-tab.js

@@ -1,4 +1,7 @@
 import { Host, h } from '@stencil/core';
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For the tab link or button.
+ */
 export class TdsInlineTab {
   constructor() {
     this.disabled = false;

package/dist/collection/components/tabs/inline-tabs/inline-tabs.js

@@ -1,4 +1,7 @@
 import { Host, h } from '@stencil/core';
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For the tab elements.
+ */
 export class TdsInlineTabs {
   constructor() {
     this.navWrapperElement = null; // reference to container with nav buttons

package/dist/collection/components/tabs/navigation-tabs/navigation-tab/navigation-tab.js

@@ -1,4 +1,7 @@
 import { Host, h } from '@stencil/core';
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For the tab link or button.
+ */
 export class TdsNavigationTab {
   constructor() {
     this.disabled = false;

package/dist/collection/components/tabs/navigation-tabs/navigation-tabs.js

@@ -1,4 +1,7 @@
 import { Host, h, } from '@stencil/core';
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For the tab elements.
+ */
 export class TdsNavigationTabs {
   constructor() {
     this.navWrapperElement = null; // reference to container with nav buttons

package/dist/collection/components/toast/toast.js

@@ -8,7 +8,7 @@ import { generateUniqueId, hasSlot } from '../../utils/utils';
 export class TdsToast {
   constructor() {
     this.getIconName = () => {
-      switch (this.type) {
+      switch (this.variant) {
         case 'information':
           return 'info';
         case 'error':
@@ -40,7 +40,7 @@ export class TdsToast {
     this.toastId = generateUniqueId();
     this.header = undefined;
     this.subheader = undefined;
-    this.type = 'information';
+    this.variant = 'information';
     this.hidden = false;
     this.toastRole = 'alert';
   }
@@ -58,7 +58,7 @@ export class TdsToast {
     const usesBottomSlot = hasSlot('bottom', this.host);
     return (h(Host, { toastRole: this.toastRole, "aria-describedby": this.host.getAttribute('aria-describedby'), class: `${this.hidden ? 'hide' : 'show'}` }, h("div", { class: `
             wrapper
-            ${this.type}` }, h("tds-icon", { name: this.getIconName(), size: "20px" }), h("div", { class: `content` }, h("div", { class: "header-subheader" }, this.header && h("div", { class: "header" }, this.header), usesHeaderSlot && h("slot", { name: "header" }), this.subheader && h("div", { class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { name: "subheader" })), usesBottomSlot && (h("div", { class: `toast-bottom ${usesSubheaderSlot || this.subheader ? 'subheader' : 'no-subheader'}` }, h("slot", { name: "bottom" })))), h("button", { onClick: () => {
+            ${this.variant}` }, h("tds-icon", { name: this.getIconName(), size: "20px" }), h("div", { class: `content` }, h("div", { class: "header-subheader" }, this.header && h("div", { class: "header" }, this.header), usesHeaderSlot && h("slot", { name: "header" }), this.subheader && h("div", { class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { name: "subheader" })), usesBottomSlot && (h("div", { class: `toast-bottom ${usesSubheaderSlot || this.subheader ? 'subheader' : 'no-subheader'}` }, h("slot", { name: "bottom" })))), h("button", { onClick: () => {
         this.handleClose();
       }, class: `close` }, h("tds-icon", { name: "cross", size: "20px" })))));
   }
@@ -128,7 +128,7 @@ export class TdsToast {
         "attribute": "subheader",
         "reflect": false
       },
-      "type": {
+      "variant": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -142,7 +142,7 @@ export class TdsToast {
           "tags": [],
           "text": "Type of Toast."
         },
-        "attribute": "type",
+        "attribute": "variant",
         "reflect": false,
         "defaultValue": "'information'"
       },

package/dist/collection/components/toast/toast.stories.js

@@ -20,9 +20,9 @@ export default {
     ],
   },
   argTypes: {
-    type: {
-      name: 'Message type',
-      description: 'Changes the type of Toast.',
+    variant: {
+      name: 'Message variant',
+      description: 'Changes the variant of Toast.',
       control: {
         type: 'radio',
       },
@@ -56,14 +56,14 @@ export default {
     },
   },
   args: {
-    type: 'Information',
+    variant: 'Information',
     header: 'Header',
     subheader: 'Subheader',
     bottom: '<a slot="bottom" href="#">This is a link.</a>',
   },
 };
-const Template = ({ type, header, subheader, bottom }) => formatHtmlPreview(`<tds-toast
-        type="${type.toLowerCase()}"
+const Template = ({ variant, header, subheader, bottom }) => formatHtmlPreview(`<tds-toast
+        variant="${variant.toLowerCase()}"
         header="${header}"
         ${subheader ? `subheader="${subheader}"` : ''}
     >

package/dist/collection/components/tooltip/tooltip.js

@@ -1,101 +1,62 @@
-import { h } from '@stencil/core';
-import { createPopper } from '@popperjs/core';
+import { h, Host } from '@stencil/core';
+import { inheritAttributes } from '../../utils/utils';
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For the tooltip contents.
+ */
 export class TdsTooltip {
   constructor() {
     this.offsetSkidding = 0;
     this.offsetDistance = 8;
+    this.popperjsExtraModifiers = [
+      {
+        name: 'positionCalc',
+        enabled: true,
+        phase: 'main',
+        fn: ({ state }) => {
+          if (state.placement === 'bottom-start' || state.placement === 'right-start') {
+            this.border = 'top-left';
+          }
+          else if (state.placement === 'bottom-end' || state.placement === 'left-start') {
+            this.border = 'top-right';
+          }
+          else if (state.placement === 'top-end' || state.placement === 'left-end') {
+            this.border = 'bottom-right';
+          }
+          else if (state.placement === 'top-start' || state.placement === 'right-end') {
+            this.border = 'bottom-left';
+          }
+          else if (state.placement === 'bottom' || state.placement === 'top') {
+            this.border = 'default';
+          }
+        },
+      },
+    ];
+    this.inheritedAttributes = [];
     this.text = '';
     this.selector = '';
     this.referenceEl = undefined;
     this.mouseOverTooltip = false;
     this.show = false;
     this.placement = 'bottom';
-    this.popperInstance = undefined;
-    this.target = undefined;
-  }
-  /** Method to update the Tooltip. Will reevaluate the Tooltips position. */
-  async updateTooltip() {
-    var _a;
-    (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.update();
-  }
-  componentDidLoad() {
-    var _a;
-    this.target = (_a = this.referenceEl) !== null && _a !== void 0 ? _a : document.querySelector(this.selector);
-    const thisValue = this;
-    this.popperInstance = createPopper(this.target, this.tooltip, {
-      placement: thisValue.placement,
-      modifiers: [
-        {
-          name: 'positionCalc',
-          enabled: true,
-          phase: 'main',
-          fn({ state }) {
-            if (state.placement === 'bottom-start' || state.placement === 'right-start') {
-              thisValue.border = 'top-left';
-            }
-            else if (state.placement === 'bottom-end' || state.placement === 'left-start') {
-              thisValue.border = 'top-right';
-            }
-            else if (state.placement === 'top-end' || state.placement === 'left-end') {
-              thisValue.border = 'bottom-right';
-            }
-            else if (state.placement === 'top-start' || state.placement === 'right-end') {
-              thisValue.border = 'bottom-left';
-            }
-            else if (state.placement === 'bottom' || state.placement === 'top') {
-              thisValue.border = 'default';
-            }
-          },
-        },
-        {
-          name: 'offset',
-          options: {
-            offset: [this.offsetSkidding, this.offsetDistance],
-          },
-        },
-      ],
-    });
-    const showTooltip = () => {
-      this.show = true;
-    };
-    const hideTooltip = () => {
-      this.show = false;
-    };
-    // For tabbing over element
-    this.target.addEventListener('focusin', () => {
-      showTooltip();
-    });
-    this.target.addEventListener('focusout', () => {
-      hideTooltip();
-    });
-    // For hovering over element with selector
-    this.target.addEventListener('mouseenter', () => {
-      showTooltip();
-    });
-    this.target.addEventListener('mouseleave', () => {
-      hideTooltip();
-    });
-    // For hovering over Tooltip itself:
-    if (this.mouseOverTooltip === true) {
-      this.tooltip.addEventListener('mouseenter', () => {
-        showTooltip();
-      });
-      this.tooltip.addEventListener('mouseleave', () => {
-        hideTooltip();
-      });
-    }
   }
-  disconnectedCallback() {
-    var _a;
-    (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.destroy();
+  componentWillLoad() {
+    this.inheritedAttributes = inheritAttributes(this.host, ['style', 'class']);
   }
   render() {
-    return (h("span", { ref: (el) => {
-        this.tooltip = el;
-      }, class: `tds-tooltip tds-tooltip-${this.border} ${this.show ? 'tds-tooltip-show' : ''}` }, this.text, h("slot", null)));
+    var _a;
+    return (h(Host, null, h("tds-popover-core", Object.assign({}, this.inheritedAttributes, { class: {
+        'tds-tooltip': true,
+        [`tds-tooltip-${this.border}`]: true,
+        [(_a = this.inheritedAttributes.class) !== null && _a !== void 0 ? _a : '']: true,
+        'tds-tooltip-show': this.show,
+      }, selector: this.selector, referenceEl: this.referenceEl, trigger: this.mouseOverTooltip ? 'hover-popover' : 'hover', modifiers: this.popperjsExtraModifiers, show: this.show, placement: this.placement, autoHide: false, onInternalTdsShow: () => {
+        this.show = true;
+      }, onInternalTdsClose: () => {
+        this.show = false;
+      } }), this.text, h("slot", null))));
   }
   static get is() { return "tds-tooltip"; }
-  static get encapsulation() { return "shadow"; }
+  static get encapsulation() { return "scoped"; }
   static get originalStyleUrls() {
     return {
       "$": ["tooltip.scss"]
@@ -224,30 +185,5 @@ export class TdsTooltip {
       }
     };
   }
-  static get states() {
-    return {
-      "popperInstance": {},
-      "target": {}
-    };
-  }
-  static get methods() {
-    return {
-      "updateTooltip": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Method to update the Tooltip. Will reevaluate the Tooltips position.",
-          "tags": []
-        }
-      }
-    };
-  }
+  static get elementRef() { return "host"; }
 }

package/dist/collection/components/tooltip/tooltip.stories.js

@@ -114,8 +114,8 @@ const ComponentTooltip = ({ tooltipPosition, mouseOverTooltip, text, slot }) =>
    <!-- The 'referenceEl' prop can be used instead of 'selector',
     which might be preferable in frameworks like React -->
    <tds-tooltip
+      id="tooltip-1"
       placement="${positionLookup[tooltipPosition]}"
-      selector="#button-1"
       text="${text}"
       mouse-over-tooltip="${mouseOverTooltip}">
       ${slot}
@@ -124,5 +124,13 @@ const ComponentTooltip = ({ tooltipPosition, mouseOverTooltip, text, slot }) =>
     <!-- Demo button for presentation purposes -->
     <tds-button size= 'sm' id="button-1" text='Hover me'></tds-button>
    </div>
+   <script>
+   (() => {
+     const tooltip = document.getElementById('tooltip-1');
+     const button = document.getElementById('button-1');
+
+     tooltip.referenceEl = button;
+    })();
+   </script>
   `);
 export const Default = ComponentTooltip.bind({});