@hyperfixi/behaviors 2.2.1 → 2.3.1

package/dist/index.cjs

@@ -182,7 +182,7 @@ var init_removable_schema = __esm({
           description: "Element that triggers removal (e.g., a close button)"
         },
         {
-          name: "confirm",
+          name: "confirmRemoval",
           type: "boolean",
           optional: true,
           default: false,
@@ -202,15 +202,18 @@ var init_removable_schema = __esm({
         { name: "removable:removed", description: "Fired after removal" }
       ],
       source: `
-behavior Removable(triggerEl, confirm, effect)
+behavior Removable(triggerEl, confirmRemoval, effect)
   init
     if triggerEl is undefined
       set triggerEl to me
     end
   end
   on click from triggerEl
-    if confirm
-      if not window.confirm("Are you sure?")
+    if confirmRemoval
+      js(me)
+        if (!window.confirm("Are you sure?")) return "cancel";
+      end
+      if it is "cancel"
         halt
       end
     end
@@ -311,9 +314,12 @@ behavior Toggleable(cls, target)
   end
   on click
     toggle .{cls} on target
+    js(target, cls)
+      var eventName = target.classList.contains(cls) ? 'toggleable:on' : 'toggleable:off';
+      target.dispatchEvent(new CustomEvent(eventName, { bubbles: true }));
+    end
   end
-end
-`.trim()
+end`.trim()
     };
   }
 });
@@ -420,27 +426,33 @@ var init_sortable_schema = __esm({
       source: `
 behavior Sortable(handle, dragClass)
   init
-    if no dragClass set dragClass to "sorting"
+    if dragClass is undefined
+      set dragClass to "sorting"
+    end
   end
-  on pointerdown(target, clientY) from me
-    set item to closest <li/> in target
-    if no item exit
-    if handle
-      set handleEl to target.closest(handle)
-      if no handleEl exit
+  on pointerdown(clientY) from me
+    js(me, handle, event)
+      var target = event.target;
+      var item = target.closest("li");
+      if (!item || !me.contains(item)) return false;
+      if (handle && !target.closest(handle)) return false;
+      event.preventDefault();
+      event.stopPropagation();
+      return true;
     end
-    halt the event
-    add dragClass to item
+    if it is false
+      exit
+    end
+    add .{dragClass} to me
     trigger sortable:start on me
     repeat until event pointerup from document
       wait for pointermove(clientY) from document
       trigger sortable:move on me
     end
-    remove dragClass from item
+    remove .{dragClass} from me
     trigger sortable:end on me
   end
-end
-`.trim()
+end`.trim()
     };
   }
 });
@@ -577,11 +589,21 @@ var init_resizable_schema = __esm({
       source: `
 behavior Resizable(handle, minWidth, minHeight, maxWidth, maxHeight)
   init
-    if no handle set handle to me
-    if no minWidth set minWidth to 50
-    if no minHeight set minHeight to 50
-    if no maxWidth set maxWidth to 9999
-    if no maxHeight set maxHeight to 9999
+    if handle is undefined
+      set handle to me
+    end
+    if minWidth is undefined
+      set minWidth to 50
+    end
+    if minHeight is undefined
+      set minHeight to 50
+    end
+    if maxWidth is undefined
+      set maxWidth to 9999
+    end
+    if maxHeight is undefined
+      set maxHeight to 9999
+    end
   end
   on pointerdown(clientX, clientY) from handle
     halt the event
@@ -593,15 +615,13 @@ behavior Resizable(handle, minWidth, minHeight, maxWidth, maxHeight)
     set startX to clientX
     set startY to clientY
     repeat until event pointerup from document
-      wait for pointermove(clientX, clientY) or
-               pointerup from document
-      set newWidth to startWidth + (clientX - startX)
-      set newHeight to startHeight + (clientY - startY)
-      if newWidth < minWidth set newWidth to minWidth
-      if newWidth > maxWidth set newWidth to maxWidth
-      if newHeight < minHeight set newHeight to minHeight
-      if newHeight > maxHeight set newHeight to maxHeight
-      add { width: \${newWidth}px; height: \${newHeight}px; }
+      wait for pointermove(clientX, clientY) or pointerup from document
+      js(startWidth, startHeight, clientX, clientY, startX, startY, minWidth, maxWidth, minHeight, maxHeight, me)
+        var nw = Math.max(minWidth, Math.min(maxWidth, startWidth + (clientX - startX)));
+        var nh = Math.max(minHeight, Math.min(maxHeight, startHeight + (clientY - startY)));
+        me.style.width = nw + 'px';
+        me.style.height = nh + 'px';
+      end
       trigger resizable:resize
     end
     trigger resizable:end
@@ -740,27 +760,49 @@ var init_clipboard_schema = __esm({
         "navigator.clipboard.writeText() requires HTTPS or localhost",
         'Falls back to document.execCommand("copy") for older browsers'
       ],
-      source: [
-        "behavior Clipboard(text, source, feedback, feedbackDuration)",
-        "  init",
-        "    if feedbackDuration is undefined set feedbackDuration to 2000",
-        "    if source is undefined set source to me",
-        "  end",
-        "  on click",
-        "    if text is not undefined",
-        "      set copyText to text",
-        "    else",
-        "      set copyText to source's value or source's textContent",
-        "    end",
-        "    js(copyText) navigator.clipboard.writeText(copyText) end",
-        "    set feedbackEl to feedback or me",
-        "    add .copied to feedbackEl",
-        "    wait feedbackDuration ms",
-        "    remove .copied from feedbackEl",
-        "    trigger clipboard:copied",
-        "  end",
-        "end"
-      ].join("\n")
+      source: `
+behavior Clipboard(text, source, feedback, feedbackDuration)
+  init
+    if feedbackDuration is undefined
+      set feedbackDuration to 2000
+    end
+    if source is undefined
+      set source to me
+    end
+  end
+  on click
+    if text is not undefined
+      set copyText to text
+    else
+      set copyText to source's textContent
+    end
+    js(me, copyText, feedback, feedbackDuration)
+      async function copyToClipboard(t) {
+        if (navigator.clipboard && navigator.clipboard.writeText) {
+          await navigator.clipboard.writeText(t);
+          return;
+        }
+        var ta = document.createElement('textarea');
+        ta.value = t;
+        ta.style.position = 'fixed';
+        ta.style.opacity = '0';
+        document.body.appendChild(ta);
+        ta.select();
+        try { document.execCommand('copy'); } finally { document.body.removeChild(ta); }
+      }
+      try {
+        await copyToClipboard(copyText);
+        var feedbackEl = feedback ? (typeof feedback === 'string' ? document.querySelector(feedback) : feedback) : me;
+        if (!feedbackEl) feedbackEl = me;
+        feedbackEl.classList.add('copied');
+        me.dispatchEvent(new CustomEvent('clipboard:copied', { bubbles: true, detail: { text: copyText } }));
+        setTimeout(function() { feedbackEl.classList.remove('copied'); }, feedbackDuration);
+      } catch(err) {
+        me.dispatchEvent(new CustomEvent('clipboard:error', { bubbles: true, detail: { error: err } }));
+      }
+    end
+  end
+end`.trim()
     };
   }
 });
@@ -909,24 +951,60 @@ var init_autodismiss_schema = __esm({
         { name: "autodismiss:paused", description: "Fired when the timer is paused on hover" },
         { name: "autodismiss:resumed", description: "Fired when the timer resumes on mouseleave" }
       ],
-      source: [
-        "behavior AutoDismiss(delay, pauseOnHover, effect)",
-        "  init",
-        "    if delay is undefined set delay to 5000",
-        "    if pauseOnHover is undefined set pauseOnHover to true",
-        '    if effect is undefined set effect to "none"',
-        "  end",
-        "  on load",
-        "    trigger autodismiss:start",
-        "    wait delay ms",
-        "    trigger autodismiss:dismissed",
-        '    if effect is "fade"',
-        "      transition opacity to 0 over 300ms",
-        "    end",
-        "    remove me",
-        "  end",
-        "end"
-      ].join("\n")
+      source: `
+behavior AutoDismiss(delay, pauseOnHover, effect)
+  init
+    if delay is undefined
+      set delay to 5000
+    end
+    if pauseOnHover is undefined
+      set pauseOnHover to true
+    end
+    if effect is undefined
+      set effect to "none"
+    end
+    js(me, delay, effect, pauseOnHover)
+      me.dispatchEvent(new CustomEvent('autodismiss:start', { bubbles: true }));
+      var remaining = delay;
+      var startedAt = Date.now();
+      var timerId = null;
+      function dismiss() {
+        var ev = new CustomEvent('autodismiss:dismissed', { bubbles: true, cancelable: true });
+        me.dispatchEvent(ev);
+        if (ev.defaultPrevented) return;
+        if (effect === 'fade') {
+          me.style.transition = 'opacity 300ms';
+          me.style.opacity = '0';
+          setTimeout(function() { me.remove(); }, 300);
+        } else {
+          me.remove();
+        }
+      }
+      function start() {
+        startedAt = Date.now();
+        timerId = setTimeout(dismiss, remaining);
+      }
+      start();
+      if (pauseOnHover) {
+        me.addEventListener('mouseenter', function() {
+          if (timerId != null) {
+            clearTimeout(timerId);
+            timerId = null;
+            remaining -= Date.now() - startedAt;
+            if (remaining < 0) remaining = 0;
+            me.dispatchEvent(new CustomEvent('autodismiss:paused', { bubbles: true }));
+          }
+        });
+        me.addEventListener('mouseleave', function() {
+          if (timerId == null && me.isConnected) {
+            me.dispatchEvent(new CustomEvent('autodismiss:resumed', { bubbles: true }));
+            start();
+          }
+        });
+      }
+    end
+  end
+end`.trim()
     };
   }
 });
@@ -1042,19 +1120,38 @@ var init_clickoutside_schema = __esm({
         }
       ],
       events: [
-        { name: "clickoutside", description: "Fired when a pointer press occurs outside the element" }
+        { name: "clickoutside", description: "Fired when a pointer press occurs outside the element" },
+        {
+          name: "clickoutside:activate",
+          description: "Listen for this event to programmatically activate detection"
+        },
+        {
+          name: "clickoutside:deactivate",
+          description: "Listen for this event to programmatically deactivate detection"
+        }
       ],
       requirements: ["Uses pointerdown instead of click to avoid timing issues with removed elements"],
       source: `
 behavior ClickOutside(active)
   init
-    if active is undefined set active to true
+    if active is undefined
+      set active to true
+    end
   end
   on pointerdown from document
-    if active and not me.contains(event.target)
-      trigger clickoutside on me
+    js(me, active)
+      if (!me.isConnected) return;
+      if (active && !me.contains(event.target)) {
+        me.dispatchEvent(new CustomEvent('clickoutside', { bubbles: true }));
+      }
     end
   end
+  on clickoutside:activate
+    set active to true
+  end
+  on clickoutside:deactivate
+    set active to false
+  end
 end`.trim()
     };
   }
@@ -1167,10 +1264,51 @@ var init_focustrap_schema = __esm({
       source: `
 behavior FocusTrap(active, initialFocus, returnFocus)
   init
-    if active is undefined set active to true
-    if returnFocus is undefined set returnFocus to true
+    if active is undefined
+      set active to true
+    end
+    if returnFocus is undefined
+      set returnFocus to true
+    end
+    js(me, active, initialFocus, returnFocus)
+      var FOCUSABLE = 'a[href],button:not(:disabled),input:not(:disabled),select:not(:disabled),textarea:not(:disabled),[tabindex]:not([tabindex="-1"])';
+      var isActive = false;
+      var previouslyFocused = null;
+      function getFocusable() { return Array.from(me.querySelectorAll(FOCUSABLE)); }
+      function activate() {
+        if (isActive) return;
+        isActive = true;
+        previouslyFocused = document.activeElement;
+        me.setAttribute('aria-modal', 'true');
+        var initEl = initialFocus ? (typeof initialFocus === 'string' ? me.querySelector(initialFocus) : initialFocus) : null;
+        if (initEl) { initEl.focus(); } else { var f = getFocusable(); if (f.length) f[0].focus(); }
+        me.dispatchEvent(new CustomEvent('focustrap:activated', { bubbles: true }));
+      }
+      function deactivate() {
+        if (!isActive) return;
+        isActive = false;
+        me.removeAttribute('aria-modal');
+        if (returnFocus && previouslyFocused instanceof HTMLElement) previouslyFocused.focus();
+        previouslyFocused = null;
+        me.dispatchEvent(new CustomEvent('focustrap:deactivated', { bubbles: true }));
+      }
+      me.addEventListener('keydown', function(e) {
+        if (!isActive || e.key !== 'Tab') return;
+        var focusable = getFocusable();
+        if (focusable.length === 0) { e.preventDefault(); return; }
+        e.preventDefault();
+        var idx = focusable.indexOf(document.activeElement);
+        if (e.shiftKey) {
+          focusable[idx <= 0 ? focusable.length - 1 : idx - 1].focus();
+        } else {
+          focusable[idx >= focusable.length - 1 ? 0 : idx + 1].focus();
+        }
+      });
+      me.addEventListener('focustrap:activate', function() { activate(); });
+      me.addEventListener('focustrap:deactivate', function() { deactivate(); });
+      if (active) activate();
+    end
   end
-  -- Imperative installer handles Tab key trapping and focus management
 end`.trim()
     };
   }
@@ -1325,13 +1463,6 @@ var init_scrollreveal_schema = __esm({
           optional: true,
           default: true,
           description: "If true, disconnect observer after first intersection"
-        },
-        {
-          name: "rootMargin",
-          type: "string",
-          optional: true,
-          default: "0px",
-          description: "CSS margin around the viewport for triggering earlier or later"
         }
       ],
       events: [
@@ -1340,14 +1471,33 @@ var init_scrollreveal_schema = __esm({
       ],
       requirements: ["Uses IntersectionObserver API (supported in all modern browsers)"],
       source: `
-behavior ScrollReveal(cls, threshold, once, rootMargin)
+behavior ScrollReveal(cls, threshold, once)
   init
-    if cls is undefined set cls to "revealed"
-    if threshold is undefined set threshold to 0.1
-    if once is undefined set once to true
-    if rootMargin is undefined set rootMargin to "0px"
+    if cls is undefined
+      set cls to "revealed"
+    end
+    if threshold is undefined
+      set threshold to 0.1
+    end
+    if once is undefined
+      set once to true
+    end
+    js(me, cls, threshold, once)
+      var obs = new IntersectionObserver(function(entries) {
+        for (var i = 0; i < entries.length; i++) {
+          if (entries[i].isIntersecting) {
+            me.classList.add(cls);
+            me.dispatchEvent(new CustomEvent('scrollreveal:enter', { bubbles: true }));
+            if (once) obs.disconnect();
+          } else if (!once) {
+            me.classList.remove(cls);
+            me.dispatchEvent(new CustomEvent('scrollreveal:exit', { bubbles: true }));
+          }
+        }
+      }, { threshold: threshold });
+      obs.observe(me);
+    end
   end
-  -- Imperative installer handles IntersectionObserver setup
 end`.trim()
     };
   }
@@ -1476,17 +1626,86 @@ var init_tabs_schema = __esm({
         "Manages aria-selected, aria-controls, aria-labelledby, and tabindex",
         "Keyboard: Arrow keys navigate, Home/End jump to first/last, Tab exits tablist"
       ],
-      source: [
-        "behavior Tabs(orientation, activeTab, wrap, activeClass)",
-        "  init",
-        '    if orientation is undefined set orientation to "horizontal"',
-        "    if activeTab is undefined set activeTab to 0",
-        "    if wrap is undefined set wrap to true",
-        '    if activeClass is undefined set activeClass to "active"',
-        "  end",
-        "  -- Imperative installer handles ARIA wiring and keyboard navigation",
-        "end"
-      ].join("\n")
+      source: `
+behavior Tabs(orientation, activeTab, wrap, activeClass)
+  init
+    if orientation is undefined
+      set orientation to "horizontal"
+    end
+    if activeTab is undefined
+      set activeTab to 0
+    end
+    if wrap is undefined
+      set wrap to true
+    end
+    if activeClass is undefined
+      set activeClass to "active"
+    end
+    js(me, orientation, activeTab, wrap, activeClass)
+      var tabs = Array.from(me.querySelectorAll('[role="tab"]'));
+      var panels = Array.from(me.querySelectorAll('[role="tabpanel"]'));
+      if (tabs.length === 0 || panels.length === 0) return;
+      var tablist = me.querySelector('[role="tablist"]') || tabs[0].parentElement;
+      if (tablist) tablist.setAttribute('aria-orientation', orientation);
+      var count = Math.min(tabs.length, panels.length);
+      var idN = 0;
+      for (var i = 0; i < count; i++) {
+        if (!tabs[i].id) tabs[i].id = 'tab-' + (++idN);
+        if (!panels[i].id) panels[i].id = 'tabpanel-' + idN;
+        tabs[i].setAttribute('aria-controls', panels[i].id);
+        panels[i].setAttribute('aria-labelledby', tabs[i].id);
+      }
+      var cur = Math.max(0, Math.min(activeTab, count - 1));
+      function activate(idx, prev) {
+        if (idx === prev || idx < 0 || idx >= count) return false;
+        var ev = new CustomEvent('tabs:change', { bubbles: true, cancelable: true, detail: { index: idx, previousIndex: prev } });
+        me.dispatchEvent(ev);
+        if (ev.defaultPrevented) return false;
+        if (prev >= 0 && prev < count) {
+          tabs[prev].setAttribute('aria-selected', 'false');
+          tabs[prev].setAttribute('tabindex', '-1');
+          tabs[prev].classList.remove(activeClass);
+          panels[prev].setAttribute('aria-hidden', 'true');
+          panels[prev].classList.remove(activeClass);
+        }
+        tabs[idx].setAttribute('aria-selected', 'true');
+        tabs[idx].setAttribute('tabindex', '0');
+        tabs[idx].classList.add(activeClass);
+        panels[idx].setAttribute('aria-hidden', 'false');
+        panels[idx].classList.add(activeClass);
+        cur = idx;
+        me.dispatchEvent(new CustomEvent('tabs:changed', { bubbles: true, detail: { index: idx } }));
+        return true;
+      }
+      for (var j = 0; j < count; j++) {
+        tabs[j].setAttribute('aria-selected', 'false');
+        tabs[j].setAttribute('tabindex', '-1');
+        panels[j].setAttribute('aria-hidden', 'true');
+        panels[j].classList.remove(activeClass);
+      }
+      tabs[cur].setAttribute('aria-selected', 'true');
+      tabs[cur].setAttribute('tabindex', '0');
+      tabs[cur].classList.add(activeClass);
+      panels[cur].setAttribute('aria-hidden', 'false');
+      panels[cur].classList.add(activeClass);
+      for (var k = 0; k < count; k++) {
+        (function(idx) {
+          tabs[idx].addEventListener('click', function() { if (activate(idx, cur)) tabs[idx].focus(); });
+        })(k);
+      }
+      (tablist || me).addEventListener('keydown', function(e) {
+        var nk = orientation === 'horizontal' ? 'ArrowRight' : 'ArrowDown';
+        var pk = orientation === 'horizontal' ? 'ArrowLeft' : 'ArrowUp';
+        var next = null;
+        if (e.key === nk) { next = cur + 1; if (next >= count) next = wrap ? 0 : null; }
+        else if (e.key === pk) { next = cur - 1; if (next < 0) next = wrap ? count - 1 : null; }
+        else if (e.key === 'Home') next = 0;
+        else if (e.key === 'End') next = count - 1;
+        if (next !== null) { e.preventDefault(); if (activate(next, cur)) tabs[next].focus(); }
+      });
+    end
+  end
+end`.trim()
     };
   }
 });