Version 0.9.3

docs/.vitepress/theme/index.ts

@@ -1,6 +1,6 @@
+import Theme from 'vitepress/theme'
 // https://vitepress.dev/guide/custom-theme
 import { h } from 'vue'
-import Theme from 'vitepress/theme'
 import './style.css'
 
 export default {

eslint.config.js

@@ -1,3 +1,7 @@
 import antfu from '@antfu/eslint-config'
 
-export default antfu()
+export default antfu({
+  ignores: [
+    'docs/.vitepress/cache',
+  ],
+})

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@compotes/root",
   "type": "module",
-  "version": "0.9.2",
+  "version": "0.9.3",
   "private": "true",
   "packageManager": "pnpm@8.15.2",
   "description": "Components library focused on accessibility/customization",
@@ -43,14 +43,14 @@
     "publish": "pnpm run -r publish"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "2.6.4",
-    "eslint": "^8.56.0",
-    "playwright": "^1.41.2",
-    "typescript": "^5.3.3",
-    "vite": "^5.1.2",
-    "vitepress": "1.0.0-rc.42",
-    "vitest": "^1.2.2",
-    "vue": "^3.4.19",
-    "vue-tsc": "^1.8.27"
+    "@antfu/eslint-config": "4.3.0",
+    "eslint": "^9.21.0",
+    "playwright": "^1.50.1",
+    "typescript": "^5.7.3",
+    "vite": "^6.1.1",
+    "vitepress": "1.6.3",
+    "vitest": "^3.0.6",
+    "vue": "^3.5.13",
+    "vue-tsc": "^2.2.4"
   }
 }

packages/core/package.json

@@ -1,7 +1,7 @@
 {
   "name": "compotes",
   "type": "module",
-  "version": "0.9.2",
+  "version": "0.9.3",
   "packageManager": "pnpm@8.15.1",
   "description": "Components library focused on accessibility/customization",
   "author": "Applelo",
@@ -66,11 +66,11 @@
     "tabbable": "^6.2.0"
   },
   "devDependencies": {
-    "@types/node": "^20.11.17",
-    "fast-glob": "^3.3.2",
-    "lightningcss": "^1.23.0",
-    "typescript": "^5.3.3",
-    "vite": "^5.1.2",
-    "vite-plugin-dts": "^3.7.2"
+    "@types/node": "^22.13.5",
+    "fast-glob": "^3.3.3",
+    "lightningcss": "^1.29.1",
+    "typescript": "^5.7.3",
+    "vite": "^6.1.1",
+    "vite-plugin-dts": "^4.5.0"
   }
 }

packages/core/src/components/collapse.ts

@@ -1,6 +1,6 @@
 import type { ParentOptions } from './_parent'
-import Parent from './_parent'
 import { getTransitionDuration } from './../utils/animation'
+import Parent from './_parent'
 
 declare global {
   interface HTMLElementEventMap {
@@ -106,7 +106,8 @@ export default class Collapse extends Parent {
     if (this.hasTransition) {
       const height = this.el.scrollHeight
       this.el.style.height = `${height}px`
-      // eslint-disable-next-line no-unused-expressions
+
+      // eslint-disable-next-line ts/no-unused-expressions
       this.el.offsetHeight // reflow
       this.collapsing = true
       this.el.classList.add(this.collapsingClass)

packages/core/src/components/drag.ts

@@ -1,4 +1,5 @@
-import Parent, { type ParentOptions } from './_parent'
+import type { ParentOptions } from './_parent'
+import Parent from './_parent'
 
 declare global {
   interface HTMLElementEventMap {

packages/core/src/components/drilldown.ts

@@ -1,7 +1,8 @@
+import type { ParentOptions } from './_parent'
 import { tabbable } from 'tabbable'
 import { focusChar, focusFirst, focusLast, focusSibling, generateId } from '../utils/accessibility'
-import Parent, { type ParentOptions } from './_parent'
 import { getTransitionDuration } from './../utils/animation'
+import Parent from './_parent'
 
 declare global {
   interface HTMLElementEventMap {
@@ -40,6 +41,7 @@ export default class Drilldown extends Parent {
   private level = 0
 
   private resizeObserver?: ResizeObserver
+  private resizeObserverTimeout = 0
   private mutationObserver?: MutationObserver
 
   private delayCssVar = '--c-drilldown-delay'
@@ -69,7 +71,10 @@ export default class Drilldown extends Parent {
         this.update(true)
       })
     this.resizeObserver = new ResizeObserver(() => {
-      this.updateHeight()
+      clearTimeout(this.resizeObserverTimeout)
+      this.resizeObserverTimeout = window.setTimeout(() => {
+        this.updateHeight()
+      }, 100)
     })
 
     this.resizeObserver.observe(this.el)
@@ -175,8 +180,9 @@ export default class Drilldown extends Parent {
             if (
               activeElement
               && activeElement.classList.contains('c-drilldown-next')
-            )
+            ) {
               this.next(activeElement)
+            }
             break
           }
           case 'Home':

packages/core/src/components/dropdown.ts

@@ -1,5 +1,6 @@
+import type { ParentOptions } from './_parent'
 import { focusFirst, focusLast, focusSibling, generateId } from '../utils/accessibility'
-import Parent, { type ParentOptions } from './_parent'
+import Parent from './_parent'
 
 declare global {
   interface HTMLElementEventMap {

packages/core/src/components/marquee.ts

@@ -1,5 +1,6 @@
+import type { ParentOptions } from './_parent'
 import { tabbable } from 'tabbable'
-import Parent, { type ParentOptions } from './_parent'
+import Parent from './_parent'
 
 declare global {
   interface HTMLElementEventMap {
@@ -47,6 +48,7 @@ export default class Marquee extends Parent {
   private mutationObserver?: MutationObserver
   private clones: Element[] = []
   private fillMultiplier = 1
+  private resizeObserverTimeout: number = 0
 
   private keyboardClass = 'c-marquee--keyboard'
   private pauseClass = 'c-marquee--pause'
@@ -82,8 +84,10 @@ export default class Marquee extends Parent {
           this.update(this.opts.fill)
       })
     this.resizeObserver = new ResizeObserver(() => {
-      // fix wrong calculation from Firefox
-      setTimeout(() => this.update(), 1)
+      window.clearTimeout(this.resizeObserverTimeout)
+      this.resizeObserverTimeout = window.setTimeout(() => {
+        this.update()
+      }, 100)
     })
 
     this.resizeObserver.observe(this.el)
@@ -136,8 +140,9 @@ export default class Marquee extends Parent {
             target.classList.contains('.c-marquee')
             || target.closest('.c-marquee')
           )
-        )
+        ) {
           return
+        }
         this.el.classList.remove(this.keyboardClass)
       },
       event: 'focusout',

packages/core/test/__snapshots__/collapse.test.ts.snap

@@ -6,10 +6,10 @@ exports[`collapse > destroy 1`] = `
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Collapse</title>
-    <script type="module" crossorigin="" src="/assets/collapse-SWlymWei.js"></script>
-    <link rel="modulepreload" crossorigin="" href="/assets/_parent-CjRBGSFb.js">
+    <script type="module" crossorigin="" src="/assets/collapse-CzeDw6km.js"></script>
+    <link rel="modulepreload" crossorigin="" href="/assets/_parent-Dk8zhMEj.js">
     <link rel="modulepreload" crossorigin="" href="/assets/animation-CH8HhKvA.js">
-    <link rel="stylesheet" crossorigin="" href="/assets/marquee-ybAlwBfl.css">
+    <link rel="stylesheet" crossorigin="" href="/assets/marquee-CMSK5Pe4.css">
   </head>
   <body>
     <div>

packages/core/test/__snapshots__/drag.test.ts.snap

@@ -6,9 +6,9 @@ exports[`drag > destroy 1`] = `
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Drag</title>
-    <script type="module" crossorigin="" src="/assets/drag-v3RSYZlk.js"></script>
-    <link rel="modulepreload" crossorigin="" href="/assets/_parent-CjRBGSFb.js">
-    <link rel="stylesheet" crossorigin="" href="/assets/marquee-ybAlwBfl.css">
+    <script type="module" crossorigin="" src="/assets/drag-Bmh5p5IV.js"></script>
+    <link rel="modulepreload" crossorigin="" href="/assets/_parent-Dk8zhMEj.js">
+    <link rel="stylesheet" crossorigin="" href="/assets/marquee-CMSK5Pe4.css">
   </head>
   <body>
     <div class="c-drag" style="width: 200px; height: 200px;">

packages/core/test/__snapshots__/drilldown.test.ts.snap

@@ -6,12 +6,12 @@ exports[`drilldown > destroy 1`] = `
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Drilldown</title>
-    <script type="module" crossorigin="" src="/assets/drilldown-DXK_JbmL.js"></script>
-    <link rel="modulepreload" crossorigin="" href="/assets/_parent-CjRBGSFb.js">
+    <script type="module" crossorigin="" src="/assets/drilldown-Be0rv62g.js"></script>
+    <link rel="modulepreload" crossorigin="" href="/assets/_parent-Dk8zhMEj.js">
     <link rel="modulepreload" crossorigin="" href="/assets/index.esm-CjV0_wFH.js">
     <link rel="modulepreload" crossorigin="" href="/assets/accessibility-DQSUv1PD.js">
     <link rel="modulepreload" crossorigin="" href="/assets/animation-CH8HhKvA.js">
-    <link rel="stylesheet" crossorigin="" href="/assets/marquee-ybAlwBfl.css">
+    <link rel="stylesheet" crossorigin="" href="/assets/marquee-CMSK5Pe4.css">
   </head>
   <body>
 

packages/core/test/__snapshots__/dropdown.test.ts.snap

@@ -6,11 +6,11 @@ exports[`dropdown > destroy 1`] = `
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Dropdown</title>
-    <script type="module" crossorigin="" src="/assets/dropdown-B0DMcfyw.js"></script>
-    <link rel="modulepreload" crossorigin="" href="/assets/_parent-CjRBGSFb.js">
+    <script type="module" crossorigin="" src="/assets/dropdown-Dk8m4rwe.js"></script>
+    <link rel="modulepreload" crossorigin="" href="/assets/_parent-Dk8zhMEj.js">
     <link rel="modulepreload" crossorigin="" href="/assets/index.esm-CjV0_wFH.js">
     <link rel="modulepreload" crossorigin="" href="/assets/accessibility-DQSUv1PD.js">
-    <link rel="stylesheet" crossorigin="" href="/assets/marquee-ybAlwBfl.css">
+    <link rel="stylesheet" crossorigin="" href="/assets/marquee-CMSK5Pe4.css">
   </head>
   <body>
     <div class="c-dropdown" style="margin-top: 2rem;">

packages/core/test/__snapshots__/marquee.test.ts.snap

@@ -6,10 +6,10 @@ exports[`marquee > destroy 1`] = `
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Marquee</title>
-    <script type="module" crossorigin="" src="/assets/marquee-CiR83C0J.js"></script>
-    <link rel="modulepreload" crossorigin="" href="/assets/_parent-CjRBGSFb.js">
+    <script type="module" crossorigin="" src="/assets/marquee-DdwmC-Hi.js"></script>
+    <link rel="modulepreload" crossorigin="" href="/assets/_parent-Dk8zhMEj.js">
     <link rel="modulepreload" crossorigin="" href="/assets/index.esm-CjV0_wFH.js">
-    <link rel="stylesheet" crossorigin="" href="/assets/marquee-ybAlwBfl.css">
+    <link rel="stylesheet" crossorigin="" href="/assets/marquee-CMSK5Pe4.css">
   </head>
   <body>
     <div class="c-marquee" style="width: 200px;">

packages/core/test/collapse.test.ts

@@ -1,6 +1,6 @@
-import { afterAll, beforeAll, describe, expect, it } from 'vitest'
 import type { Browser } from 'playwright'
 import { chromium } from 'playwright'
+import { afterAll, beforeAll, describe, expect, it } from 'vitest'
 import { destroyComponent } from './helper/destroy'
 
 let browser: Browser

packages/core/test/components/collapse.ts

@@ -1,5 +1,5 @@
-import '@css/drag.css'
 import { Collapse } from '@src/index'
+import '@css/drag.css'
 
 const el = document.querySelector<HTMLElement>('.c-collapse')
 if (el) {

packages/core/test/components/drag.ts

@@ -1,5 +1,5 @@
-import '@css/drag.css'
 import { Drag } from '@src/index'
+import '@css/drag.css'
 
 const el = document.querySelector<HTMLElement>('.c-drag')
 if (el) {

packages/core/test/components/drilldown.ts

@@ -1,5 +1,5 @@
-import '@css/drag.css'
 import { Drilldown } from '@src/index'
+import '@css/drag.css'
 
 const el = document.querySelector<HTMLElement>('.c-drilldown')
 const reset = document.querySelector<HTMLElement>('.js-drilldown-reset')

packages/core/test/components/dropdown.ts

@@ -1,5 +1,5 @@
-import '@css/dropdown.css'
 import { Dropdown } from '@src/index'
+import '@css/dropdown.css'
 
 const el = document.querySelector<HTMLElement>('.c-dropdown')
 if (el) {

packages/core/test/components/marquee.ts

@@ -1,5 +1,5 @@
-import '@css/marquee.css'
 import { Marquee } from '@src/index'
+import '@css/marquee.css'
 
 const el = document.querySelector<HTMLElement>('.c-marquee')
 const play = document.querySelector('.js-marquee-play')

packages/core/test/drag.test.ts

@@ -1,6 +1,6 @@
-import { afterAll, beforeAll, describe, expect, it } from 'vitest'
 import type { Browser, Page } from 'playwright'
 import { chromium } from 'playwright'
+import { afterAll, beforeAll, describe, expect, it } from 'vitest'
 import { destroyComponent } from './helper/destroy'
 
 let browser: Browser

packages/core/test/drilldown.test.ts

@@ -1,6 +1,6 @@
-import { afterAll, beforeAll, describe, expect, it } from 'vitest'
 import type { Browser } from 'playwright'
 import { chromium } from 'playwright'
+import { afterAll, beforeAll, describe, expect, it } from 'vitest'
 import { destroyComponent } from './helper/destroy'
 
 let browser: Browser
@@ -77,6 +77,6 @@ describe('drilldown', async () => {
     const { before, after } = await destroyComponent(page)
     expect(before).not.toEqual(after)
     // remove style to prevent issue between local and ci
-    expect(after.replace(/ style=".*;"/gm, '')).toMatchSnapshot()
+    expect(after.replace(/ style=".*;"/g, '')).toMatchSnapshot()
   })
 })

packages/core/test/dropdown.test.ts

@@ -1,6 +1,6 @@
-import { afterAll, beforeAll, describe, expect, it } from 'vitest'
 import type { Browser } from 'playwright'
 import { chromium } from 'playwright'
+import { afterAll, beforeAll, describe, expect, it } from 'vitest'
 import { destroyComponent } from './helper/destroy'
 
 let browser: Browser

packages/core/test/global.ts

@@ -1,5 +1,5 @@
-import { resolve } from 'node:path'
 import type { InlineConfig } from 'vite'
+import { resolve } from 'node:path'
 import { build, preview } from 'vite'
 
 const config: InlineConfig = {

packages/core/test/marquee.test.ts

@@ -1,6 +1,6 @@
-import { afterAll, beforeAll, describe, expect, it } from 'vitest'
 import type { Browser } from 'playwright'
 import { chromium } from 'playwright'
+import { afterAll, beforeAll, describe, expect, it } from 'vitest'
 import { destroyComponent } from './helper/destroy'
 
 let browser: Browser

packages/core/test/parent.test.ts

@@ -1,6 +1,6 @@
-import { afterAll, beforeAll, describe, expect, it } from 'vitest'
 import type { Browser } from 'playwright'
 import { chromium } from 'playwright'
+import { afterAll, beforeAll, describe, expect, it } from 'vitest'
 
 let browser: Browser
 

packages/core/vite.config.ts

@@ -1,12 +1,12 @@
 /// <reference types="vitest" />
 
-import { basename, resolve } from 'node:path'
 import { Buffer } from 'node:buffer'
 import { promises as fs } from 'node:fs'
+import { basename, resolve } from 'node:path'
+import fg from 'fast-glob'
+import { transform } from 'lightningcss'
 import { defineConfig } from 'vite'
 import dts from 'vite-plugin-dts'
-import { transform } from 'lightningcss'
-import fg from 'fast-glob'
 
 // https://vitejs.dev/config/
 export default defineConfig({