@rhavenside/baseline 2.1.2 → 2.1.4

package/README.md

@@ -617,7 +617,7 @@ Base-Line supports all modern browsers:
 Base-Line includes the following peer dependencies that are automatically installed:
 
 - **@rhavenside/cadence**: ^1.0.1 - Motion system for consistent animations and transitions
-- **@rhavenside/scaffold**: ^1.1.7 - Layout system for structured page layouts
+- **@rhavenside/scaffold**: ^1.1.9 - Layout system for structured page layouts
 - **@popperjs/core**: ^2.11.8 - For positioning tooltips, popovers, and dropdowns
 
 All dependencies are automatically installed when you install `@rhavenside/baseline`. No additional setup required!

package/dist/js/carousel.js

@@ -111,6 +111,13 @@ class Carousel extends BaseComponent {
   }
 
   nextWhenVisible() {
+    // For auto-play carousels (with data-c-ride), always proceed if document is visible
+    // The visibility check can prevent auto-play when element is scrolled out of viewport
+    if (this._config.ride && !document.hidden) {
+      this.next()
+      return
+    }
+    // For manual carousels, check both document visibility and element visibility
     if (!document.hidden && isVisible(this._element)) {
       this.next()
     }

package/dist/js/collapse.js

@@ -219,9 +219,29 @@ class Collapse extends BaseComponent {
 on(document, 'click', SELECTOR_DATA_TOGGLE, function (event) {
   event.preventDefault()
   const selector = this.getAttribute('data-c-target') || this.getAttribute('href')
-  const target = getElement(selector)
+  
+  // Try to get single element first (for ID selectors)
+  let target = getElement(selector)
+  
+  // If no single element found or selector is a class selector, try multiple
+  if (!target || selector.startsWith('.')) {
+    const targets = getElements(selector)
+    if (targets.length > 0) {
+      // Get parent from trigger button if available
+      const parentSelector = this.getAttribute('data-c-parent')
+      const config = parentSelector ? { parent: parentSelector } : {}
+      
+      // Toggle all found elements
+      targets.forEach(element => {
+        const collapse = Collapse.getOrCreateInstance(element, config)
+        collapse.toggle()
+      })
+      return
+    }
+  }
+  
+  // Single element handling (existing logic)
   if (target) {
-    // Get parent from trigger button if available
     const parentSelector = this.getAttribute('data-c-parent')
     const config = parentSelector ? { parent: parentSelector } : {}
     const collapse = Collapse.getOrCreateInstance(target, config)

package/dist/js/util/state-handler.js

@@ -0,0 +1,80 @@
+// src/js/util/state-handler.js
+import { on, off, executeAfterTransition, reflow } from './util.js';
+
+const EVENT_SHOW = 'show';
+const EVENT_SHOWN = 'shown';
+const EVENT_HIDE = 'hide';
+const EVENT_HIDDEN = 'hidden';
+
+export class StateHandler {
+  constructor(element, config = {}) {
+    this._element = element;
+    this._isShown = false;
+    this._transitioning = false;
+    this._config = {
+      backdrop: config.backdrop ?? false,
+      keyboard: config.keyboard ?? true,
+      focus: config.focus ?? true,
+      ...config
+    };
+  }
+
+  toggle() {
+    return this._isShown ? this.hide() : this.show();
+  }
+
+  show() {
+    if (this._isShown || this._transitioning) return;
+
+    const showEvent = this._triggerEvent(EVENT_SHOW);
+    if (showEvent.defaultPrevented) return;
+
+    this._transitioning = true;
+    this._showElement();
+
+    if (this._config.backdrop) {
+      // Backdrop-Logik hier oder via separaten Backdrop-Instanz
+    }
+
+    executeAfterTransition(() => {
+      this._isShown = true;
+      this._transitioning = false;
+      this._triggerEvent(EVENT_SHOWN);
+      if (this._config.focus) this._element.focus();
+    }, this._element);
+  }
+
+  hide() {
+    if (!this._isShown || this._transitioning) return;
+
+    const hideEvent = this._triggerEvent(EVENT_HIDE);
+    if (hideEvent.defaultPrevented) return;
+
+    this._transitioning = true;
+    this._hideElement();
+
+    executeAfterTransition(() => {
+      this._isShown = false;
+      this._transitioning = false;
+      this._triggerEvent(EVENT_HIDDEN);
+    }, this._element);
+  }
+
+  // Interne Helfer
+  _triggerEvent(eventName) {
+    const event = new CustomEvent(eventName + this.constructor.EVENT_KEY, {
+      bubbles: true,
+      cancelable: true
+    });
+    this._element.dispatchEvent(event);
+    return event;
+  }
+
+  _showElement() { throw new Error('_showElement muss implementiert werden'); }
+  _hideElement() { throw new Error('_hideElement muss implementiert werden'); }
+}
+
+StateHandler.EVENT_KEY = '.c.state';
+StateHandler.VERSION = '2.0.0-base-line';
+
+export default StateHandler;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rhavenside/baseline",
-  "version": "2.1.2",
+  "version": "2.1.4",
   "description": "A strict, layer-based design system with semantic tokens",
   "main": "dist/base-line.css",
   "module": "dist/js/index.js",