feat(version): 3.0

CHANGELOG.md

@@ -1,3 +1,21 @@
+# 3.0.0-next.1 (2026-07-17)
+* feat!: drawer now uses native Invoker Commands — `show`, `close` and `toggle` actions removed
+* feat: added shared `onCommand` helper for command-driven components
+* fix: popover now removes its command listener, positioning fallback and overridden element methods on disconnect
+
+# 3.0.0-next.0 (2026-07-02)
+* feat!: updated components to Winduum `3.0.0-next.7` (aligned with `winduum-elements`)
+* feat!: carousel rewritten to new API (`scrollBy`, `toggleScrollState`, `setSnappedAttribute`, `scrollToMarker`) — `pagination`, `counter` and `progress` targets replaced by `markerGroup`/`marker` targets and `vertical` value
+* feat!: drawer rewritten to new dialog-based API (`drawerEvents`, `drawerObserver`, `showDrawer`) — `dialog` value replaced by boolean `modal` value
+* feat!: popover rewritten to native Popover API with anchor positioning and `@floating-ui` fallback (`autoUpdate`, `placement` values)
+* feat!: removed dialog and details components (handled natively in Winduum 3)
+* feat!: form component now only validates on submit — field validation moved to the new field component
+* feat: added field component
+* feat: control component now toggles `data-active` attribute on change
+* feat: button component now shows ripple on click automatically
+* feat: toaster component now uses `toasterObserver`
+* fix: range component no longer calls `setTrackProperty` (handled internally by `setValue`)
+
 # 2.0.10, 2.0.11 (2025-04-30)
 * feat: added carousel component
 

README.md

@@ -14,6 +14,6 @@ Ready to use components and utilities for Stimulus
 {
   "@hotwired/stimulus": "^3",
   "@newlogic-digital/utils-js": "^1",
-  "winduum": "^2"
+  "winduum": "^3"
 }
 ```

components/button/index.js

@@ -1,4 +1,5 @@
 import { Controller } from '@hotwired/stimulus'
+import { dataset } from '@newlogic-digital/utils-js'
 
 export class Button extends Controller {
   static values = {
@@ -30,6 +31,8 @@ export class Button extends Controller {
     this.loadingValue && this.observer.observe(this.element, {
       attributeFilter: [this.loadingAttribute],
     })
+
+    dataset(this.element, 'action').add(`click->${this.identifier}#ripple`)
   }
 
   disconnect() {

components/carousel-experimental/index.js

@@ -0,0 +1,60 @@
+import { Controller } from '@hotwired/stimulus'
+import { dataset } from '@newlogic-digital/utils-js'
+
+export class Carousel extends Controller {
+  static targets = ['content', 'markerGroup', 'marker', 'prev', 'next']
+
+  static values = {
+    vertical: Boolean,
+  }
+
+  async connect() {
+    const { setSnappedAttribute, toggleScrollState } = await import('winduum/src/components/carousel-experimental/index.js')
+
+    this.abortController = new AbortController()
+    const signal = this.abortController.signal
+
+    this.contentTarget.addEventListener('scrollsnapchanging', (event) => {
+      setSnappedAttribute(this.contentTarget, event.snapTargetInline ?? event.snapTargetBlock, this.hasMarkerGroupTarget ? this.markerGroupTarget : null)
+    }, { signal })
+
+    this.contentTarget.addEventListener('scroll', () => {
+      toggleScrollState(this.contentTarget, {
+        prevElement: this.hasPrevTarget ? this.prevTarget : null,
+        nextElement: this.hasNextTarget ? this.nextTarget : null,
+        vertical: this.verticalValue,
+      })
+    }, { signal })
+  }
+
+  disconnect() {
+    this.abortController?.abort()
+  }
+
+  markerTargetConnected(element) {
+    dataset(element, 'action').add(`click->${this.identifier}#scrollToMarker:prevent`)
+  }
+
+  async scrollToMarker({ currentTarget }) {
+    const { scrollToMarker } = await import('winduum/src/components/carousel-experimental/index.js')
+
+    scrollToMarker(this.contentTarget, currentTarget, this.markerGroupTarget, this.verticalValue ? { block: 'start' } : {})
+  }
+
+  async scroll(direction) {
+    const { scrollBy } = await import('winduum/src/components/carousel-experimental/index.js')
+
+    scrollBy(this.contentTarget, {
+      direction,
+      vertical: this.verticalValue,
+    })
+  }
+
+  scrollPrev() {
+    this.scroll(-1)
+  }
+
+  scrollNext() {
+    this.scroll(1)
+  }
+}

components/carousel-experimental/readme.md

@@ -0,0 +1,26 @@
+# [Carousel Experimental](https://winduum.dev/docs/components/carousel-experimental.html)
+
+## Installation
+```shell
+npm i winduum-stimulus
+```
+
+```js
+import { Application } from '@hotwired/stimulus'
+import { Carousel } from 'winduum-stimulus/components/carousel-experimental/index.js'
+
+const application = Application.start()
+
+application.register('x-carousel-experimental', Carousel)
+```
+
+### Local imports
+By default, imports are directly from `npm` so you can leverage updates.
+Alternatively, you can also copy and paste the code from this directory to your project and remap the imports to local.
+
+```js
+import { Carousel } from '@/components/ui/carousel-experimental/index.js'
+```
+
+### Docs
+Visit [docs](https://winduum.dev/docs/components/carousel-experimental.html) to learn more about JavaScript API and see usage examples.

components/carousel/index.js

@@ -8,7 +8,7 @@ export class Carousel extends Controller {
   async connect() {
     await this.scroll()
 
-    if (this.hasPaginationTarget) {
+    if (this.hasPaginationTarget && !this.paginationTarget.children.length) {
       const { paginationCarousel } = await import('winduum/src/components/carousel/index.js')
 
       paginationCarousel(this.contentTarget, {

components/control/index.js

@@ -1,7 +1,22 @@
 import { Controller } from '@hotwired/stimulus'
-import { dispatchCustomEvent } from '@newlogic-digital/utils-js'
+import { dataset, dispatchCustomEvent } from '@newlogic-digital/utils-js'
 
 export class Control extends Controller {
+  activeAttribute = 'data-active'
+
+  connect() {
+    this.toggleActiveAttribute()
+    dataset(this.element, 'action').add(`change->${this.identifier}#toggleActiveAttribute`)
+  }
+
+  toggleActiveAttribute() {
+    const telCountryCode = this.element.querySelector('[autocomplete="tel-country-code"]')
+
+    if (telCountryCode) telCountryCode.nextElementSibling.textContent = telCountryCode.value
+
+    this.element.toggleAttribute(this.activeAttribute, !!this.element.querySelector('input:not([type="hidden"]), textarea, select')?.value)
+  }
+
   stepUp() {
     this.element.querySelector('input').stepUp()
     dispatchCustomEvent(this.element.querySelector('input'))

components/details/index.js

@@ -1,38 +1,9 @@
 import { Controller } from '@hotwired/stimulus'
 
 export class Details extends Controller {
-  async show({ currentTarget, params }) {
-    const { showDetails } = await import('winduum/src/components/details/index.js')
-
-    await showDetails(currentTarget, params)
-  }
-
-  async close({ currentTarget, params }) {
-    const { closeDetails } = await import('winduum/src/components/details/index.js')
-
-    await closeDetails(currentTarget, params)
-  }
-
-  async toggle({ currentTarget, params }) {
+  async toggleDetails({ currentTarget }) {
     const { toggleDetails } = await import('winduum/src/components/details/index.js')
 
-    this.closeSiblings({ params })
-
-    await toggleDetails(currentTarget, params)
-  }
-
-  closeSiblings({ params }) {
-    if (!this.element.dataset.name) return
-
-    document.querySelectorAll(`details[data-name="${this.element.dataset.name}"]`).forEach((currentTarget) => {
-      if (currentTarget !== this.element) this.close({ currentTarget, params })
-    })
-  }
-
-  connect() {
-    if (this.element.name) {
-      this.element.dataset.name = this.element.name
-      this.element.removeAttribute('name')
-    }
+    toggleDetails(currentTarget, arguments[0]?.params)
   }
 }