diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index ca3a113697..3b7006f3ea 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -145,6 +145,7 @@ Some things are not linted but still are important:
   It applies the CSS class `ld-button` to its root element. Now the consuming developer can decide on either using the WebComponent `<ld-button>Submit</ld-button>` or the CSS class directly `<button class="ld-button">Submit</ld-button>`.
 - When writing CSS, we follow common best practices. We try to keep the CSS specificity to a minimum, in order to simplify component customization, but we also make sure that it's not low to an extent, where styles get overwritten by other libraries' reset or normalize styles (such as Tailwind's [Preflight](https://tailwindcss.com/docs/preflight)). In other words: If you're using the CSS `:where` trick to reduce CSS speceficity to zero, make sure the properties affected are not potential candidates for reset and normalize styles.
 - Themable components should support at least one level of [theme inception](/liquid/components/ld-theme/#theme-inception).
+- Due to an issue in stencil type declarations need to be either inlined or exported, as otherwise undefined types end up in the generated components.d.ts file. 
 - In order for camelcase props to work in React based apps, we create lowercase aliases in components, which have camelcase props, by adding the `@Element()` decorator to the component, making all camelcase props mutable and calling the utility function `applyPropAliases` in the `componentWillLoad` hook: 
   ```tsx
   import { Component, h } from '@stencil/core'
diff --git a/src/liquid/components/ld-bg-cells/ld-bg-cells.tsx b/src/liquid/components/ld-bg-cells/ld-bg-cells.tsx
index 96f073fe51..cd5acd8125 100644
--- a/src/liquid/components/ld-bg-cells/ld-bg-cells.tsx
+++ b/src/liquid/components/ld-bg-cells/ld-bg-cells.tsx
@@ -2,7 +2,7 @@ import { Component, getAssetPath, h, Host, Prop } from '@stencil/core'
 import { getClassNames } from '../../utils/getClassNames'
 import '../../components' // type definitions for type checks and intelliSense
 
-type CellType =
+export type CellType =
   | 'bioreliance'
   | 'f'
   | 'hexagon'
diff --git a/src/liquid/components/ld-tooltip/ld-tooltip.tsx b/src/liquid/components/ld-tooltip/ld-tooltip.tsx
index 7612c23a0e..10bd2f26c3 100644
--- a/src/liquid/components/ld-tooltip/ld-tooltip.tsx
+++ b/src/liquid/components/ld-tooltip/ld-tooltip.tsx
@@ -4,7 +4,7 @@ import { getClassNames } from '../../utils/getClassNames'
 import '../../components' // type definitions for type checks and intelliSense
 import { applyPropAliases } from '../../utils/applyPropAliases'
 
-type Position =
+export type Position =
   | 'bottom center'
   | 'bottom left'
   | 'bottom right'
@@ -18,32 +18,6 @@ type Position =
   | 'top left'
   | 'top right'
 
-const mapPositionToAttachment = (position: Position) =>
-  ({
-    'bottom center': 'top center',
-    'bottom left': 'top left',
-    'bottom right': 'top right',
-    'left bottom': 'bottom right',
-    'left middle': 'middle right',
-    'left top': 'top right',
-    'right bottom': 'bottom left',
-    'right middle': 'middle left',
-    'right top': 'top left',
-    'top center': 'bottom center',
-    'top left': 'bottom left',
-    'top right': 'bottom right',
-  }[position])
-
-const mapPositionToTargetAttachment = (position: Position) =>
-  ({
-    'left bottom': 'bottom left',
-    'left middle': 'middle left',
-    'left top': 'top left',
-    'right bottom': 'bottom right',
-    'right middle': 'middle right',
-    'right top': 'top right',
-  }[position] ?? position)
-
 let tooltipCount = 0
 
 /**
@@ -85,14 +59,39 @@ export class LdTooltip {
   private tooltipRef!: HTMLDivElement
   private triggerRef!: HTMLSpanElement
 
-  componentWillLoad() {
-    applyPropAliases.call(this)
-    this.hasDefaultTrigger = !this.element.querySelector('[slot="trigger"]')
+  private mapPositionToAttachment = (position: Position) => {
+    return {
+      'bottom center': 'top center',
+      'bottom left': 'top left',
+      'bottom right': 'top right',
+      'left bottom': 'bottom right',
+      'left middle': 'middle right',
+      'left top': 'top right',
+      'right bottom': 'bottom left',
+      'right middle': 'middle left',
+      'right top': 'top left',
+      'top center': 'bottom center',
+      'top left': 'bottom left',
+      'top right': 'bottom right',
+    }[position]
+  }
+
+  private mapPositionToTargetAttachment = (position: Position) => {
+    return (
+      {
+        'left bottom': 'bottom left',
+        'left middle': 'middle left',
+        'left top': 'top left',
+        'right bottom': 'bottom right',
+        'right middle': 'middle right',
+        'right top': 'top right',
+      }[position] ?? position
+    )
   }
 
   private initTooltip = () => {
-    const attachment = mapPositionToAttachment(this.position)
-    const targetAttachment = mapPositionToTargetAttachment(this.position)
+    const attachment = this.mapPositionToAttachment(this.position)
+    const targetAttachment = this.mapPositionToTargetAttachment(this.position)
 
     this.popper = new Tether({
       attachment,
@@ -199,6 +198,11 @@ export class LdTooltip {
     this.handleClickOutside(event)
   }
 
+  componentWillLoad() {
+    applyPropAliases.call(this)
+    this.hasDefaultTrigger = !this.element.querySelector('[slot="trigger"]')
+  }
+
   render() {
     return (
       <Host>