hyperclayjs 1.19.6 → 1.19.8

package/README.md

@@ -85,7 +85,7 @@ import 'hyperclayjs/presets/standard.js';
 | Module | Size | Description |
 |--------|------|-------------|
 | dialogs | 7.7KB | ask(), consent(), tell(), snippet() dialog functions |
-| the-modal | 21.1KB | Full modal window creation system - window.theModal |
+| the-modal | 21.5KB | Full modal window creation system - window.theModal |
 | toast | 10.7KB | Success/error message notifications, toast(msg, msgType) |
 
 ### Utilities (Core utilities (often auto-included))
@@ -142,7 +142,7 @@ Standard feature set for most use cases
 
 **Modules:** `save-core`, `snapshot`, `save-system`, `unsaved-warning`, `edit-mode-helpers`, `persist`, `option-visibility`, `event-attrs`, `dom-helpers`, `toast`, `save-toast`, `export-to-window`, `view-mode-excludes-edit-modules`
 
-### Everything (~208.7KB)
+### Everything (~209.1KB)
 All available features
 
 Includes all available modules across all categories.

package/package.json

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

package/src/hyperclay.js

@@ -1,7 +1,7 @@
 /**
  * DO NOT EDIT THIS FILE DIRECTLY — it is generated from build/hyperclay.template.js
  *
- * HyperclayJS v1.19.6 - Minimal Browser-Native Loader
+ * HyperclayJS v1.19.8 - Minimal Browser-Native Loader
  *
  * Modules auto-init when imported (no separate init call needed).
  * Include `export-to-window` feature to export to window.hyperclay.
@@ -105,7 +105,7 @@ const PRESETS = {
   },
   "smooth-sailing": {
     "name": "Smooth Sailing",
-    "description": "Every module with no gotchas",
+    "description": "Everything, without gotchas",
     "modules": [
       "save-core",
       "save-system",

package/src/ui/theModal.js

@@ -368,17 +368,28 @@ const modalCss = `<style class="micromodal-css">
 
 .micromodal__container {
   position: relative;
-  max-width: 600px;
+  width: 100%;
+  max-width: min(550px, calc(100vw - 2rem));
+  max-height: calc(100vh - 4rem);
+  max-height: calc(100dvh - 2rem);
   box-sizing: border-box;
-  overflow-y: auto;
-  padding: 26px 40px 40px 40px;
+  overflow: hidden;
   border: 2px solid #FFFFFF;
   background-color: #11131E;
-  overflow: visible;
+}
+
+.micromodal__inner {
+  overflow-x: hidden;
+  overflow-y: auto;
+  /* Must subtract container's 4px border (2px top + 2px bottom) from max-height,
+     otherwise inner overflows past container since box-sizing: border-box
+     makes the container's content area smaller than its max-height */
+  max-height: calc(100dvh - 2rem - 4px);
+  padding: 26px 40px 40px 40px;
 }
 
 @media (min-width: 640px) {
-  .micromodal .micromodal__container {
+  .micromodal .micromodal__inner {
     padding: 52px 64px 60px 64px;
   }
 }
@@ -418,7 +429,7 @@ const modalCss = `<style class="micromodal-css">
 }
 
 .micromodal .micromodal__input {
-  width: clamp(300px, calc(100vw - 100px), 420px);
+  width: min(calc(100vw - 100px), 420px);
   padding: 6px 6px 7px;
   font-size: var(--hyperclay-modal-input-font-size, 16px);
   color: #000;
@@ -567,10 +578,12 @@ const modalCss = `<style class="micromodal-css">
 const modalHtml = `<div class="micromodal" id="micromodal" aria-hidden="true">
   <div class="micromodal__overlay" tabindex="-1">
     <form class="micromodal__container" role="dialog" aria-modal="true">
-      <div class="micromodal__content"></div>
-      <div class="micromodal__buttons">
-        <button class="micromodal__no" type="button"></button>
-        <button class="micromodal__yes" type="submit"></button>
+      <div class="micromodal__inner">
+        <div class="micromodal__content"></div>
+        <div class="micromodal__buttons">
+          <button class="micromodal__no" type="button"></button>
+          <button class="micromodal__yes" type="submit"></button>
+        </div>
       </div>
       <button class="micromodal__close" type="button" aria-label="Close modal"></button>
     </form>