Version 0.10.0

[Applelo]

New Features 🔥

Vue Package (@compotes/vue)

Official Vue 3 support is here! The new @compotes/vue package provides ready-to-use components and composables for all Compote components.

Components:

• CCollapse / CCollapseTrigger - Collapsible content with toggle trigger
• CDrag - Click-and-drag scrollable container
• CDrilldown / CDrilldownMenu / CDrilldownNext / CDrilldownBack - Hierarchical navigation
• CDropdown / CDropdownMenu / CDropdownTrigger - Dropdown with context injection
• CMarquee - Scrolling marquee

All components support the as prop to customize the rendered element, expose methods and reactive state via template refs, and emit typed events.

Composables:

• useCollapse - Reactive collapse state (isExpanded, isCollapsing) and methods
• useDrag - Reactive drag state (isDragging, isDraggable)
• useDrilldown - Reactive drilldown state (level, currentMenuId) and navigation methods
• useDropdown - Reactive dropdown state (isOpen, type) and control methods
• useMarquee - Reactive marquee state (isPaused) and playback methods

Core Improvements

• Declarative event listeners - Pass event handlers via the on option instead of manual addEventListener
• State change callbacks - Subscribe to reactive state changes with the onStateChange option
• Typed events - Each component exports an Events enum for type-safe event handling
• Typed state - Each component exports a State interface (CollapseState, DragState, etc.)
• Debounced observers - ResizeObserver and MutationObserver callbacks are now debounced to prevent page freezing
• Deferred initialization - Components can be instantiated without an element and initialized later with init()

Bug Fixes 🔨

• Collapse: Fixed concurrent animation issues, improved destroy cleanup (removes inline styles and ARIA attributes)
• Drag: Switched from mouse events to pointer events for better touch support, added setPointerCapture for reliable drag behavior
• Drilldown: Fixed items array not clearing on updateItems(), mutation observer no longer triggers on clone operations
• Dropdown: Fixed error message referencing wrong selector, improved accessibility event initialization and cleanup
• Marquee: Fixed inverted fill detection logic, improved clone cleanup and focus handling
• Accessibility: focusChar() is now case-insensitive

Breaking Changes 💥

Core API Changes

• Constructor / el / init(): The element parameter is now optional. Components can be created without an element and initialized later via init(el, options)
• destroyEvents() removed: Event cleanup is now handled automatically via AbortController

Removed Options

• initAccessibility - Accessibility is now always enabled
• initEvents - Events are now always initialized

New Options

• on - Declarative event listeners object
• onStateChange - State change callback for Vue integration

CSS Changes

• Marquee direction classes renamed: .c-marquee--direction-top → .c-marquee--direction-up, .c-marquee--direction-bottom → .c-marquee--direction-down to respect <marquee> usage.

Build Output

• UMD file renamed: compotes.umd.cjs → compotes.umd.js

Infrastructure 🧰

• Migrated build system from Vite to tsdown/rolldown
• Migrated to pnpm workspace catalogs for centralized dependency management
• Added test coverage reporting with Coveralls
• Added browser-based testing with Vitest + Playwright
• Added doc-sync CI check to validate documentation stays in sync with implementation
• Major dependency updates: pnpm 10, Vitest 4, ESLint 10, TypeScript 5.9, Vite 7