hyperclayjs 1.11.0 → 1.13.0

package/README.md

@@ -75,7 +75,7 @@ import 'hyperclayjs/presets/standard.js';
 |--------|------|-------------|
 | ajax-elements | 2.6KB | [ajax-form], [ajax-button] for async form submissions |
 | dom-helpers | 6.2KB | el.nearest, el.val, el.text, el.exec, el.cycle |
-| event-attrs | 4.1KB | [onclickaway], [onclone], [onpagemutation], [onrender] |
+| event-attrs | 4.6KB | [onclickaway], [onclickchildren], [onclone], [onpagemutation], [onrender] |
 | input-helpers | 1.2KB | [prevent-enter], [autosize] for textareas |
 | onaftersave | 1KB | [onaftersave] attribute - run JS when save status changes |
 | sortable | 3.4KB | Drag-drop sorting with [sortable], lazy-loads ~118KB Sortable.js in edit mode |
@@ -85,8 +85,8 @@ import 'hyperclayjs/presets/standard.js';
 | Module | Size | Description |
 |--------|------|-------------|
 | dialogs | 7.7KB | ask(), consent(), tell(), snippet() dialog functions |
-| the-modal | 21.8KB | Full modal window creation system - window.theModal |
-| toast | 7.7KB | Success/error message notifications, toast(msg, msgType) |
+| the-modal | 20.8KB | Full modal window creation system - window.theModal |
+| toast | 7.9KB | Success/error message notifications, toast(msg, msgType) |
 
 ### Utilities (Core utilities (often auto-included))
 
@@ -132,17 +132,17 @@ import 'hyperclayjs/presets/standard.js';
 
 ## Presets
 
-### Minimal (~30.4KB)
+### Minimal (~30.6KB)
 Essential features for basic editing
 
 **Modules:** `save-core`, `save-system`, `edit-mode-helpers`, `toast`, `save-toast`, `export-to-window`
 
-### Standard (~48.4KB)
+### Standard (~49.1KB)
 Standard feature set for most use cases
 
 **Modules:** `save-core`, `save-system`, `edit-mode-helpers`, `persist`, `option-visibility`, `event-attrs`, `dom-helpers`, `toast`, `save-toast`, `export-to-window`
 
-### Everything (~178.1KB)
+### Everything (~177.8KB)
 All available features
 
 Includes all available modules across all categories.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hyperclayjs",
-  "version": "1.11.0",
+  "version": "1.13.0",
   "description": "Modular JavaScript library for building interactive HTML applications with Hyperclay",
   "type": "module",
   "main": "src/hyperclay.js",

package/src/custom-attributes/events.js

@@ -1,5 +1,6 @@
 // Events module - combines all event attribute handlers
 import { init as initOnclickaway } from './onclickaway.js';
+import { init as initOnclickchildren } from './onclickchildren.js';
 import { init as initOnclone } from './onclone.js';
 import { init as initOnmutation } from './onmutation.js';
 import { init as initOnpagemutation } from './onpagemutation.js';
@@ -7,6 +8,7 @@ import { init as initOnrender } from './onrender.js';
 
 function init() {
   initOnclickaway();
+  initOnclickchildren();
   initOnclone();
   initOnmutation();
   initOnpagemutation();

package/src/custom-attributes/onclickchildren.js

@@ -0,0 +1,12 @@
+function init() {
+  document.addEventListener('click', function(event) {
+    const parent = event.target.closest('[onclickchildren]');
+    if (parent && event.target !== parent) {
+      const directChild = event.composedPath().find(el => el.parentNode === parent);
+      new Function(parent.getAttribute('onclickchildren')).call(directChild);
+    }
+  });
+}
+
+export { init };
+export default init;

package/src/hyperclay.js

@@ -1,5 +1,5 @@
 /**
- * HyperclayJS v1.11.0 - Minimal Browser-Native Loader
+ * HyperclayJS v1.13.0 - Minimal Browser-Native Loader
  *
  * Modules auto-init when imported (no separate init call needed).
  * Include `export-to-window` feature to export to window.hyperclay.

package/src/ui/theModal.js

@@ -318,8 +318,8 @@ const modalCss = `<style class="micromodal-css">
 .micromodal {
   display: none;
   color: #fff;
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-  font-size: 18px;
+  font-family: var(--hyperclay-modal-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
+  font-size: var(--hyperclay-modal-font-size, 18px);
 }
 
 .micromodal button:not(.custom-button) {
@@ -415,7 +415,7 @@ const modalCss = `<style class="micromodal-css">
 .micromodal .micromodal__input {
   width: clamp(300px, calc(100vw - 100px), 420px);
   padding: 6px 6px 7px;
-  font-size: 16px;
+  font-size: var(--hyperclay-modal-input-font-size, 16px);
   color: #000;
 }
 
@@ -572,19 +572,12 @@ const modalHtml = `<div class="micromodal" id="micromodal" aria-hidden="true">
   </div>
 </div>`;
 
-const DEFAULT_FONT_FAMILY = "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace";
-const DEFAULT_FONT_SIZE = "18px";
-const DEFAULT_INPUT_FONT_SIZE = "16px";
-
 const themodal = (() => {
   let html = "";
   let yes = "";
   let no = "";
   let zIndex = "100";
   let closeHtml = "";
-  let fontFamily = DEFAULT_FONT_FAMILY;
-  let fontSize = DEFAULT_FONT_SIZE;
-  let inputFontSize = DEFAULT_INPUT_FONT_SIZE;
 
   let enableClickOutsideCloses = true;
   let disableScroll = true;
@@ -612,17 +605,6 @@ const themodal = (() => {
       modalOverlayElem.style.zIndex = zIndex;
       modalCloseElem.innerHTML = closeHtml;
 
-      // Apply font styles to the modal
-      const modalElem = document.querySelector("#micromodal");
-      modalElem.style.fontFamily = fontFamily;
-      modalElem.style.fontSize = fontSize;
-
-      // Apply input font size
-      const modalInputElem = document.querySelector(".micromodal__input");
-      if (modalInputElem) {
-        modalInputElem.style.fontSize = inputFontSize;
-      }
-
       // MODIFIED so modal doesn't close if mousedown happened inside the modal
       let mousedownOnBackdrop = false;
 
@@ -702,9 +684,6 @@ const themodal = (() => {
           no = "";
           zIndex = "100";
           closeHtml = "";
-          fontFamily = DEFAULT_FONT_FAMILY;
-          fontSize = DEFAULT_FONT_SIZE;
-          inputFontSize = DEFAULT_INPUT_FONT_SIZE;
 
           // reset to defaults
           enableClickOutsideCloses = true;
@@ -768,24 +747,6 @@ const themodal = (() => {
     set zIndex(newVal) {
       zIndex = newVal;
     },
-    get fontFamily() {
-      return fontFamily;
-    },
-    set fontFamily(newVal) {
-      fontFamily = newVal;
-    },
-    get fontSize() {
-      return fontSize;
-    },
-    set fontSize(newVal) {
-      fontSize = newVal;
-    },
-    get inputFontSize() {
-      return inputFontSize;
-    },
-    set inputFontSize(newVal) {
-      inputFontSize = newVal;
-    },
     get disableFocus() {
       return disableFocus;
     },

package/src/ui/toast.js

@@ -71,8 +71,8 @@ const modernStyles = `
     align-items: center;
     gap: 12px;
     padding: 16px 24px 16px 16px;
-    font-size: 16px;
-    font-family: monospace;
+    font-size: var(--hyperclay-toast-font-size, 16px);
+    font-family: var(--hyperclay-toast-font-family, monospace);
     font-weight: bold;
     color: white;
     border-width: 1px;
@@ -155,6 +155,8 @@ export const hyperclayStyles = `
     background-color: #0B0C12;
     border: 2px dashed rgba(255,255,255,.6);
     transition: right 0.5s ease-in-out;
+    font-size: var(--hyperclay-toast-font-size, inherit);
+    font-family: var(--hyperclay-toast-font-family, inherit);
   }
 
   [data-toast-theme="hyperclay"] .toast svg {