fix(build): export types

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'

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'

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>