diff --git a/.github/workflows/chrome.yml b/.github/workflows/chrome-tests.yml
similarity index 78%
rename from .github/workflows/chrome.yml
rename to .github/workflows/chrome-tests.yml
index 74daad1..99eb81e 100644
--- a/.github/workflows/chrome.yml
+++ b/.github/workflows/chrome-tests.yml
@@ -1,6 +1,8 @@
 name: Chrome Tests
 
-on: [push]
+on:
+   push:
+   workflow_call:
 
 jobs:
    cypress-ct:
@@ -15,8 +17,6 @@ jobs:
            id: pnpm-install
            with:
               version: 8
-              run_install: false
-         - name: Install dependencies
-           run: pnpm install
+              run_install: true
          - name: Chrome tests
            run: pnpm run test:chrome
diff --git a/.github/workflows/firefox.yml b/.github/workflows/firefox-tests.yml
similarity index 78%
rename from .github/workflows/firefox.yml
rename to .github/workflows/firefox-tests.yml
index cd05ed7..fe409da 100644
--- a/.github/workflows/firefox.yml
+++ b/.github/workflows/firefox-tests.yml
@@ -1,6 +1,8 @@
 name: Firefox Tests
 
-on: [push]
+on:
+   push:
+   workflow_call:
 
 jobs:
    cypress-ct:
@@ -15,8 +17,6 @@ jobs:
            id: pnpm-install
            with:
               version: 8
-              run_install: false
-         - name: Install dependencies
-           run: pnpm install
+              run_install: true
          - name: Firefox tests
            run: pnpm run test:firefox
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
new file mode 100644
index 0000000..a13451a
--- /dev/null
+++ b/.github/workflows/publish.yml
@@ -0,0 +1,37 @@
+name: Publish to NPM
+
+on:
+   push:
+      tags: ['v*']
+   workflow_dispatch:
+
+jobs:
+   chrome-tests:
+      uses: ./.github/workflows/chrome-tests.yml
+   firefox-tests:
+      uses: ./.github/workflows/firefox-tests.yml
+   publish:
+      needs: [chrome-tests, firefox-tests]
+      runs-on: ubuntu-latest
+      permissions:
+         contents: read
+         id-token: write
+      steps:
+         - uses: actions/checkout@v3
+         - uses: actions/setup-node@v3
+           with:
+              node-version: '19.x'
+              registry-url: 'https://registry.npmjs.org'
+         - uses: pnpm/action-setup@v2
+           name: Install pnpm
+           with:
+              version: 8
+              run_install: true
+         - name: Build
+           run: pnpm build
+         - name: Pack
+           run: rm -rf *.tgz && npm pack
+         - name: Publish
+           run: npm publish *.tgz --provenance
+           env:
+              NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
diff --git a/.github/workflows/webkit.yml b/.github/workflows/webkit.yml
deleted file mode 100644
index 9375827..0000000
--- a/.github/workflows/webkit.yml
+++ /dev/null
@@ -1,22 +0,0 @@
-name: Webkit Tests
-
-on: [push]
-
-jobs:
-   cypress-ct:
-      runs-on: macos-latest
-      steps:
-         - uses: actions/checkout@v3
-         - uses: actions/setup-node@v3
-           with:
-              node-version: '18'
-         - uses: pnpm/action-setup@v2
-           name: Install pnpm
-           id: pnpm-install
-           with:
-              version: 8
-              run_install: false
-         - name: Install dependencies
-           run: pnpm install
-         - name: Webkit tests
-           run: pnpm run test:webkit
diff --git a/README.md b/README.md
index 8cf70e3..d1b9536 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-![npm](https://img.shields.io/npm/v/vue-collapsed?color=46c119) ![dependencies](https://img.shields.io/badge/dependencies-0-success) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/vue-collapsed?color=success) ![downloads](https://img.shields.io/npm/dm/vue-collapsed) ![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/smastrom/vue-collapsed/chrome.yml?branch=main&label=tests)
+![npm](https://img.shields.io/npm/v/vue-collapsed?color=46c119) ![dependencies](https://img.shields.io/badge/dependencies-0-success) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/vue-collapsed?color=success) ![downloads](https://img.shields.io/npm/dm/vue-collapsed) ![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/smastrom/vue-collapsed/chrome-tests.yml?branch=main&label=tests)
 
 # Vue Collapsed
 
@@ -14,10 +14,6 @@ Check out my other packages for Vue 3:
 > _Fully-featured notification system for Vue and Nuxt._  
 > [Visit repo ➔ ](https://github.com/smastrom/notivue)
 
-> 🔥 **Vue Use Fixed Header**  
-> _Turn your boring fixed header into a smart one with one line of code._  
-> [Visit repo ➔ ](https://github.com/smastrom/vue-use-fixed-header)
-
 > 👌 **Vue Use Active Scroll**  
 > _Accurate TOC/sidebar links without compromises._  
 > [Visit repo ➔ ](https://github.com/smastrom/vue-use-active-scroll)
@@ -27,9 +23,10 @@ Check out my other packages for Vue 3:
 ## Installation
 
 ```shell
-npm i -S vue-collapsed
+npm i vue-collapsed
 # yarn add vue-collapsed
 # pnpm add vue-collapsed
+# bun add vue-collapsed
 ```
 
 ## Props
@@ -63,7 +60,7 @@ const isExpanded = ref(false)
   <button @click="isExpanded = !isExpanded">Trigger</button>
 
   <Collapse :when="isExpanded">
-    <p>This is a paragraph.</p>
+    <p>{{ 'Collapsed '.repeat(100) }}</p>
   </Collapse>
 </template>
 ```
@@ -84,7 +81,7 @@ If you prefer to use a custom duration or easing, add a class to Collapse that t
 
 ```vue
 <Collapse :when="isExpanded" class="v-collapse">
-  <p>This is a paragraph.</p>
+  <p>{{ 'Collapsed '.repeat(100) }}</p>
 </Collapse>
 ```
 
@@ -95,10 +92,6 @@ If you prefer to use a custom duration or easing, add a class to Collapse that t
 }
 ```
 
-:bulb: Use [calc()](https://developer.mozilla.org/en-US/docs/Web/CSS/calc) to control the speed while keeping the ratio, _e.g. `calc(var(--vc-auto-duration) * 0.75)`_.
-
-:bulb: Find a full list of easings at [easings.net](https://easings.net).
-
 ### Multiple transitions
 
 To transition other properties use the attribute `data-collapse`:
@@ -111,7 +104,9 @@ To transition other properties use the attribute `data-collapse`:
 ```css
 .v-collapse {
   --dur-easing: var(--vc-auto-duration) cubic-bezier(0.33, 1, 0.68, 1);
-  transition: height var(--dur-easing), opacity var(--dur-easing);
+  transition:
+    height var(--dur-easing),
+    opacity var(--dur-easing);
 }
 
 .v-collapse[data-collapse='expanded'],
@@ -141,7 +136,7 @@ Above values can also be accessed using `v-slot`:
 
 ```vue
 <Collapse :when="isExpanded" class="v-collapse" v-slot="{ state }">
-  {{ state === 'collapsing' ? 'Collapsing the content...' : null }}
+  {{ state === 'collapsing' ? 'Collapsing content...' : null }}
 </Collapse>
 ```
 
@@ -212,16 +207,19 @@ import { Collapse } from 'vue-collapsed'
 
 const isExpanded = ref(false)
 
+const TOGGLE_ID = 'toggle-id'
+const COLLAPSE_ID = 'collapse-id'
+
 const toggleAttrs = computed(() => ({
-  id: 'toggle-id',
-  'aria-controls': 'collapse-id',
+  id: TOGGLE_ID,
+  'aria-controls': COLLAPSE_ID,
   'aria-expanded': isExpanded.value
 }))
 
 const collapseAttrs = {
   role: 'region',
-  id: 'collapse-id',
-  'aria-labelledby': 'toggle-id'
+  id: COLLAPSE_ID,
+  'aria-labelledby': TOGGLE_ID
 }
 
 function handleCollapse() {
@@ -233,7 +231,7 @@ function handleCollapse() {
   <div>
     <button v-bind="toggleAttrs" @click="handleCollapse">This a panel.</button>
     <Collapse v-bind="collapseAttrs" :when="isExpanded">
-      <p>This is a paragraph.</p>
+      <p>{{ 'Collapsed '.repeat(100) }}</p>
     </Collapse>
   </div>
 </template>
@@ -244,7 +242,7 @@ function handleCollapse() {
 ```vue
 <template>
   <Collapse :when="isExpanded" class="instant-collapse">
-    <p>This is a paragraph.</p>
+    <p>{{ 'Collapsed '.repeat(100) }}</p>
   </Collapse>
 </template>
 
diff --git a/cypress.config.ts b/cypress.config.ts
index f21fa8b..5f4380b 100644
--- a/cypress.config.ts
+++ b/cypress.config.ts
@@ -3,7 +3,6 @@ import { defineConfig } from 'cypress'
 export default defineConfig({
    component: {
       video: false,
-      experimentalWebKitSupport: true,
       devServer: {
          framework: 'vue',
          bundler: 'vite',
diff --git a/demo/SingleCollapse.vue b/demo/SingleCollapse.vue
index c18122a..4912325 100644
--- a/demo/SingleCollapse.vue
+++ b/demo/SingleCollapse.vue
@@ -15,15 +15,18 @@ function handleCollapse() {
  * https://www.w3.org/WAI/ARIA/apg/example-index/accordion/accordion
  */
 
+const TOGGLE_ID = 'toggle'
+const COLLAPSE_ID = 'collapse'
+
 const toggleAttrs = computed(() => ({
-   id: 'toggle',
+   id: TOGGLE_ID,
+   'aria-controls': COLLAPSE_ID,
    'aria-expanded': isExpanded.value,
-   'aria-controls': 'collapse',
 }))
 
 const collapseAttrs = {
-   'aria-labelledby': 'toggle',
-   id: 'collapse',
+   'aria-labelledby': TOGGLE_ID,
+   id: COLLAPSE_ID,
    role: 'region',
 }
 </script>
diff --git a/demo/main.ts b/demo/main.ts
index 01d17da..3394132 100644
--- a/demo/main.ts
+++ b/demo/main.ts
@@ -1,4 +1,4 @@
-import Collapse from '../src/Collapse.vue'
+import { Collapse } from '../dist'
 import { createApp } from 'vue'
 import App from './App.vue'
 
diff --git a/package.json b/package.json
index c959028..36424de 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
    "name": "vue-collapsed",
-   "version": "1.2.8",
+   "version": "1.2.9",
    "private": false,
    "description": "Dynamic CSS height transition from any to auto and vice versa for Vue 3. Accordion ready.",
    "keywords": [
@@ -39,37 +39,33 @@
       "dist/*"
    ],
    "scripts": {
-      "build": "rimraf dist && vite build",
+      "build": "vite build",
       "postbuild": "pnpm pack",
-      "build:app": "vite build --mode app",
-      "dev": "vite",
-      "preview": "vite build --mode app && vite preview",
+      "build:app": "vite build && vite build --mode app",
+      "dev": "concurrently \"vite\" \"vite build --watch\"",
+      "preview": "vite build:app && vite preview",
       "prepare": "husky install",
-      "test:chrome": "cypress run --component --browser chrome",
-      "test:firefox": "cypress run --component --browser firefox",
-      "test:webkit": "cypress run --component --browser webkit",
-      "test": "pnpm test:chrome && pnpm test:firefox && pnpm test:webkit",
-      "test:gui": "cypress open --component"
+      "test:chrome": "pnpm build && cypress run --component --browser chrome",
+      "test:firefox": "pnpm build && cypress run --component --browser firefox",
+      "test:gui": "concurrently \"vite build --watch\" \"cypress open --component\""
    },
    "lint-staged": {
       "*.{ts,vue,md}": "prettier --write"
    },
    "devDependencies": {
-      "@babel/types": "^7.22.10",
-      "@rollup/plugin-terser": "^0.4.3",
-      "@types/node": "^18.17.6",
-      "@vitejs/plugin-vue": "^4.3.1",
-      "cypress": "^12.17.4",
+      "@rollup/plugin-terser": "^0.4.4",
+      "@types/node": "^20.8.7",
+      "@vitejs/plugin-vue": "^4.4.0",
+      "concurrently": "^8.2.2",
+      "cypress": "^13.3.2",
       "cypress-wait-frames": "^0.9.4",
       "husky": "^8.0.3",
-      "lint-staged": "^13.3.0",
-      "playwright-webkit": "^1.37.1",
-      "prettier": "^2.8.8",
-      "rimraf": "^4.4.1",
-      "typescript": "^4.9.5",
-      "vite": "^4.4.9",
-      "vite-plugin-dts": "^1.7.3",
+      "lint-staged": "^15.0.2",
+      "prettier": "^3.0.3",
+      "typescript": "^5.2.2",
+      "vite": "^4.5.0",
+      "vite-plugin-dts": "^3.6.0",
       "vue": "^3.3.4",
-      "vue-tsc": "^1.8.8"
+      "vue-tsc": "^1.8.19"
    }
 }
diff --git a/src/Collapse.vue b/src/Collapse.vue
index 5beb69c..e5218e7 100644
--- a/src/Collapse.vue
+++ b/src/Collapse.vue
@@ -1,11 +1,3 @@
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-defineComponent({
-   inheritAttrs: true,
-})
-</script>
-
 <script setup lang="ts">
 import {
    computed,
@@ -18,16 +10,21 @@ import {
    type CSSProperties as CSS,
 } from 'vue'
 
+import { SAFE_STYLES, VISUALLY_HIDDEN, AUTO_DUR_VAR, FALLBACK_DURATION } from './constants'
 import {
-   SAFE_STYLES as safeStyles,
-   VISUALLY_HIDDEN,
-   AUTO_DUR_VAR,
-   FALLBACK_DURATION,
-} from './constants'
-import { getTransition, getHeight, getAutoDuration, isReducedOrDisaled } from './utils'
+   getTransitionProp,
+   getComputedHeight,
+   getHeightProp,
+   getAutoDuration,
+   isReducedOrDisabled,
+} from './utils'
 
 export type TransitionState = 'expanding' | 'expanded' | 'collapsing' | 'collapsed'
 
+defineOptions({
+   inheritAttrs: true,
+})
+
 const props = withDefaults(
    defineProps<{
       when: boolean
@@ -57,7 +54,7 @@ const baseHeight = toRef(props, 'baseHeight')
 
 const baseHeightStyles = computed(() => ({ overflow: 'hidden', height: `${baseHeight.value}px` }))
 const collapsedStyles = computed(() => ({
-   ...safeStyles,
+   ...SAFE_STYLES,
    ...(baseHeight.value === 0 ? { display: 'none' } : baseHeightStyles.value),
 }))
 
@@ -66,20 +63,26 @@ const collapsedStyles = computed(() => ({
 const collapseRef = ref<HTMLElement | null>(null)
 
 const state = ref<TransitionState>(isExpanded.value ? 'expanded' : 'collapsed')
+const setState = (newState: TransitionState) => (state.value = newState)
+
 const style = shallowRef<CSS>({})
+const replaceStyles = (newStyles: CSS) => (style.value = newStyles)
+const addStyles = (newStyles: CSS) => replaceStyles({ ...style.value, ...newStyles })
 
 const autoDuration = ref(FALLBACK_DURATION)
+const setAutoDuration = (newDuration: number) => (autoDuration.value = newDuration)
+
 const autoDurationVar = computed(() => ({ [AUTO_DUR_VAR]: `${autoDuration.value}ms` }))
 
 function onExpanded() {
-   style.value = safeStyles
-   state.value = 'expanded'
+   replaceStyles(SAFE_STYLES)
+   setState('expanded')
    emit('expanded')
 }
 
 function onCollapsed() {
-   style.value = collapsedStyles.value
-   state.value = 'collapsed'
+   replaceStyles(collapsedStyles.value)
+   setState('collapsed')
    emit('collapsed')
 }
 
@@ -87,22 +90,21 @@ function onCollapsed() {
 
 onMounted(() => {
    if (!collapseRef.value) return
-   if (!isExpanded.value && baseHeight.value === 0) style.value = VISUALLY_HIDDEN
+   if (!isExpanded.value && baseHeight.value === 0) replaceStyles(VISUALLY_HIDDEN)
 
    const _autoDuration = getAutoDuration(collapseRef.value.scrollHeight - baseHeight.value)
 
    /**
-    * Autoduration cannot be calculated if collapseRef or any ancestors
-    * have 'display:none' on mount. In this case we cast it to 300ms.
+    * Autoduration cannot be calculated if collapseRef or any ancestor
+    * has 'display:none' on mount. In this case we cast it to 300ms.
     */
-   autoDuration.value = _autoDuration <= 0 ? FALLBACK_DURATION : _autoDuration
-
-   style.value = isExpanded.value ? safeStyles : collapsedStyles.value
+   setAutoDuration(_autoDuration <= 0 ? FALLBACK_DURATION : _autoDuration)
+   replaceStyles(isExpanded.value ? SAFE_STYLES : collapsedStyles.value)
 })
 
 watch(isExpanded, (isExpanding) => {
    if (isExpanding) {
-      if (isReducedOrDisaled(collapseRef.value)) return onExpanded()
+      if (isReducedOrDisabled(collapseRef)) return onExpanded()
 
       /**
        * If baseHeight === 0, at this point CSS height is set to
@@ -114,26 +116,26 @@ watch(isExpanded, (isExpanding) => {
        * We set the height to baseHeight as it is the 'current' height
        * we are transitioning from.
        */
-      state.value = 'expanding'
+
+      setState('expanding')
       emit('expand')
 
-      style.value = {
-         ...safeStyles,
+      replaceStyles({
+         ...SAFE_STYLES,
          ...baseHeightStyles.value,
          ...autoDurationVar.value,
-         willChange: 'height',
-      }
+      })
 
       requestAnimationFrame(() => {
          /** Set height to scrollHeight and trigger the transition. */
-         style.value = {
-            ...style.value,
-            ...getHeight(collapseRef.value),
-            ...getTransition(collapseRef.value),
-         }
+         addStyles({
+            ...getHeightProp(collapseRef),
+            ...getTransitionProp(collapseRef),
+            willChange: 'height',
+         })
       })
    } else {
-      if (isReducedOrDisaled(collapseRef.value)) return onCollapsed()
+      if (isReducedOrDisabled(collapseRef)) return onCollapsed()
 
       /**
        * At this point CSS height property is set to 'auto'
@@ -142,62 +144,51 @@ watch(isExpanded, (isExpanding) => {
        * Since the element is visible we get the 'current'
        * expanded height (scrollHeight) and set it as height.
        */
-      state.value = 'collapsing'
+      setState('collapsing')
       emit('collapse')
 
-      style.value = {
-         ...style.value,
+      addStyles({
          ...autoDurationVar.value,
-         ...getHeight(collapseRef.value),
-         willChange: 'height',
-      }
+         ...getHeightProp(collapseRef),
+      })
 
       requestAnimationFrame(() => {
          /** Set height to baseHeight and trigger the transition. */
-         style.value = {
-            ...style.value,
+         addStyles({
             ...baseHeightStyles.value,
-            ...getTransition(collapseRef.value),
-         }
+            ...getTransitionProp(collapseRef),
+            willChange: 'height',
+         })
       })
    }
 })
 
+// If while collapsed, baseHeight dynamically changes
 watch(baseHeight, (newBaseHeight) => {
    if (!isExpanded.value) {
-      style.value = {
-         ...style.value,
-         /**
-          * Disable transitions when baseHeight changes on
-          * collapsed state in case users are using a rective value.
-          *
-          * Below styles are going to be replaced on next expand.
-          */
-         ...(newBaseHeight === 0
-            ? { display: 'none' }
-            : { transition: 'none', height: `${newBaseHeight}px` }),
+      if (newBaseHeight > 0) {
+         addStyles({ display: undefined, height: `${newBaseHeight}px` })
+      } else {
+         addStyles({ display: 'none' })
       }
    }
 })
 
 // Event handlers
 
-function onTransitionEnd(event: TransitionEvent) {
-   if (event.target === collapseRef.value && event.propertyName === 'height') {
+function onTransitionEnd(e: TransitionEvent) {
+   if (e.target === collapseRef.value && e.propertyName === 'height') {
       /**
        * Reset styles to the initial style state,
        * we also make sure callbacks are triggered only once
        * when transitions are 100% finished.
        */
       if (isExpanded.value) {
-         if (
-            collapseRef.value?.scrollHeight ===
-            parseFloat((event.target as HTMLElement).style.height)
-         ) {
+         if (collapseRef.value?.scrollHeight === getComputedHeight(collapseRef)) {
             onExpanded()
          }
       } else {
-         if (collapseRef.value?.style.height === `${baseHeight.value}px`) {
+         if (baseHeight.value === getComputedHeight(collapseRef)) {
             onCollapsed()
          }
       }
diff --git a/src/utils.ts b/src/utils.ts
index 7bd703e..db1fdcd 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -1,15 +1,24 @@
 import { DEFAULT_TRANSITION } from './constants'
 
-export function getHeight(el: HTMLElement | null) {
+import type { Ref } from 'vue'
+
+type RefEl = Ref<HTMLElement | null>
+
+export function getComputedHeight(el: RefEl) {
+   if (!el.value) return 0
+   return parseFloat(getComputedStyle(el.value).height)
+}
+
+export function getHeightProp(el: RefEl) {
    return {
-      height: `${el?.scrollHeight ?? 0}px`,
+      height: `${el.value?.scrollHeight ?? 0}px`,
    }
 }
 
-export function getTransition(el: HTMLElement | null) {
-   if (!el) return {}
+export function getTransitionProp(el: RefEl) {
+   if (!el.value) return {}
 
-   const { transition } = getComputedStyle(el)
+   const { transition } = getComputedStyle(el.value)
 
    // If transition is not defined, return the default one
    if (transition === 'all 0s ease 0s') return { transition: DEFAULT_TRANSITION }
@@ -17,13 +26,13 @@ export function getTransition(el: HTMLElement | null) {
    return { transition }
 }
 
-export function isReducedOrDisaled(el: HTMLElement | null) {
-   if (!el) return true
+export function isReducedOrDisabled(el: RefEl) {
+   if (!el.value) return true
 
-   const { transition } = getComputedStyle(el)
+   const { transition } = getComputedStyle(el.value)
 
    return (
-      window.matchMedia('(prefers-reduced-motion: reduce)').matches ||
+      matchMedia('(prefers-reduced-motion: reduce)').matches ||
       transition.includes('none') ||
       transition.includes('height 0s')
    )
diff --git a/tests/App.vue b/tests/App.vue
index 4c30efb..1ade792 100644
--- a/tests/App.vue
+++ b/tests/App.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Collapse } from '../src'
+import { Collapse } from '../dist'
 import { onMounted, ref } from 'vue'
 
 const props = withDefaults(
diff --git a/vite.config.ts b/vite.config.ts
index 3e67682..121cad4 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -4,6 +4,8 @@ import vue from '@vitejs/plugin-vue'
 import dts from 'vite-plugin-dts'
 import terser from '@rollup/plugin-terser'
 
+const isWatch = process.argv.includes('--watch')
+
 export default defineConfig(({ mode }) => {
    if (mode === 'app') {
       return {
@@ -12,6 +14,7 @@ export default defineConfig(({ mode }) => {
    }
    return {
       build: {
+         emptyOutDir: !isWatch,
          lib: {
             entry: 'src/index.ts',
             name: 'vue-collapsed',
@@ -37,8 +40,6 @@ export default defineConfig(({ mode }) => {
       plugins: [
          vue(),
          dts({
-            staticImport: true,
-            insertTypesEntry: true,
             rollupTypes: true,
          }),
       ],