npm - @jsenv/dom - Versions diffs - 0.6.0 → 0.7.0 - Mend

@jsenv/dom 0.6.0 → 0.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (109) hide show

package/dist/jsenv_dom.js +262 -330
package/package.json +2 -4
package/index.js +0 -124
package/src/attr/add_attribute_effect.js +0 -93
package/src/attr/attributes.js +0 -32
package/src/color/color_constrast.js +0 -69
package/src/color/color_parsing.js +0 -319
package/src/color/color_scheme.js +0 -28
package/src/color/pick_light_or_dark.js +0 -34
package/src/color/resolve_css_color.js +0 -60
package/src/demos/3_columns_resize_demo.html +0 -84
package/src/demos/3_rows_resize_demo.html +0 -89
package/src/demos/aside_and_main_demo.html +0 -93
package/src/demos/coordinates_demo.html +0 -450
package/src/demos/document_autoscroll_demo.html +0 -517
package/src/demos/drag_gesture_constraints_demo.html +0 -701
package/src/demos/drag_gesture_demo.html +0 -1047
package/src/demos/drag_gesture_element_to_impact_demo.html +0 -445
package/src/demos/drag_reference_element_demo.html +0 -480
package/src/demos/flex_details_set_demo.html +0 -302
package/src/demos/flex_details_set_demo_2.html +0 -315
package/src/demos/visible_rect_demo.html +0 -525
package/src/element_signature.js +0 -100
package/src/interaction/drag/constraint_feedback_line.js +0 -92
package/src/interaction/drag/drag_constraint.js +0 -659
package/src/interaction/drag/drag_debug_markers.js +0 -635
package/src/interaction/drag/drag_element_positioner.js +0 -382
package/src/interaction/drag/drag_gesture.js +0 -566
package/src/interaction/drag/drag_resize_demo.html +0 -571
package/src/interaction/drag/drag_to_move.js +0 -301
package/src/interaction/drag/drag_to_resize_gesture.js +0 -68
package/src/interaction/drag/drop_target_detection.js +0 -148
package/src/interaction/drag/sticky_frontiers.js +0 -160
package/src/interaction/event_marker.js +0 -14
package/src/interaction/focus/active_element.js +0 -33
package/src/interaction/focus/arrow_navigation.js +0 -599
package/src/interaction/focus/element_is_focusable.js +0 -57
package/src/interaction/focus/element_visibility.js +0 -111
package/src/interaction/focus/find_focusable.js +0 -21
package/src/interaction/focus/focus_group.js +0 -91
package/src/interaction/focus/focus_group_registry.js +0 -12
package/src/interaction/focus/focus_nav.js +0 -12
package/src/interaction/focus/focus_nav_event_marker.js +0 -14
package/src/interaction/focus/focus_trap.js +0 -105
package/src/interaction/focus/tab_navigation.js +0 -128
package/src/interaction/focus/tests/focus_group_skip_tab_test.html +0 -206
package/src/interaction/focus/tests/tree_focus_test.html +0 -304
package/src/interaction/focus/tests/tree_focus_test.jsx +0 -261
package/src/interaction/focus/tests/tree_focus_test_preact.html +0 -13
package/src/interaction/isolate_interactions.js +0 -161
package/src/interaction/keyboard.js +0 -26
package/src/interaction/scroll/capture_scroll.js +0 -47
package/src/interaction/scroll/is_scrollable.js +0 -159
package/src/interaction/scroll/scroll_container.js +0 -110
package/src/interaction/scroll/scroll_trap.js +0 -44
package/src/interaction/scroll/scrollbar_size.js +0 -20
package/src/interaction/scroll/wheel_through.js +0 -138
package/src/iterable_weak_set.js +0 -66
package/src/position/dom_coords.js +0 -340
package/src/position/offset_parent.js +0 -15
package/src/position/position_fixed.js +0 -15
package/src/position/position_sticky.js +0 -213
package/src/position/sticky_rect.js +0 -79
package/src/position/visible_rect.js +0 -486
package/src/pub_sub.js +0 -31
package/src/size/can_take_size.js +0 -11
package/src/size/details_content_full_height.js +0 -63
package/src/size/flex_details_set.js +0 -974
package/src/size/get_available_height.js +0 -22
package/src/size/get_available_width.js +0 -22
package/src/size/get_border_sizes.js +0 -14
package/src/size/get_height.js +0 -4
package/src/size/get_inner_height.js +0 -15
package/src/size/get_inner_width.js +0 -15
package/src/size/get_margin_sizes.js +0 -10
package/src/size/get_max_height.js +0 -57
package/src/size/get_max_width.js +0 -47
package/src/size/get_min_height.js +0 -14
package/src/size/get_min_width.js +0 -14
package/src/size/get_padding_sizes.js +0 -10
package/src/size/get_width.js +0 -4
package/src/size/hooks/use_available_height.js +0 -27
package/src/size/hooks/use_available_width.js +0 -27
package/src/size/hooks/use_max_height.js +0 -10
package/src/size/hooks/use_max_width.js +0 -10
package/src/size/hooks/use_resize_status.js +0 -62
package/src/size/resize.js +0 -695
package/src/size/resolve_css_size.js +0 -32
package/src/style/dom_styles.js +0 -97
package/src/style/style_composition.js +0 -121
package/src/style/style_controller.js +0 -345
package/src/style/style_default.js +0 -153
package/src/style/style_default_demo.html +0 -128
package/src/style/style_parsing.js +0 -375
package/src/transition/demos/animation_resumption_test.xhtml +0 -500
package/src/transition/demos/height_toggle_test.xhtml +0 -515
package/src/transition/dom_transition.js +0 -254
package/src/transition/easing.js +0 -48
package/src/transition/group_transition.js +0 -261
package/src/transition/transform_style_parser.js +0 -32
package/src/transition/transition_playback.js +0 -366
package/src/transition/transition_timeline.js +0 -79
package/src/traversal.js +0 -247
package/src/ui_transition/demos/content_states_transition_demo.html +0 -628
package/src/ui_transition/demos/smooth_height_transition_demo.html +0 -149
package/src/ui_transition/demos/transition_testing.html +0 -354
package/src/ui_transition/ui_transition.js +0 -1491
package/src/utils.js +0 -69
package/src/value_effect.js +0 -35

package/src/interaction/focus/tests/tree_focus_test.html DELETED Viewed

@@ -1,304 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Tree Focus Group</title>
-    <style>
-      body {
-        font-family: Arial, sans-serif;
-        max-width: 800px;
-        margin: 20px auto;
-        padding: 20px;
-        line-height: 1.6;
-      }
-      .tree-container {
-        border: 2px solid #333;
-        padding: 20px;
-        margin: 20px 0;
-        background: #f9f9f9;
-      }
-      details {
-        margin: 8px 0;
-        border: 1px solid #ddd;
-        border-radius: 4px;
-        background: white;
-      }
-      summary {
-        padding: 12px;
-        background: #e8e8e8;
-        cursor: pointer;
-        border-radius: 4px 4px 0 0;
-        font-weight: bold;
-      }
-      summary:hover {
-        background: #d8d8d8;
-      }
-      summary:focus {
-        outline: 2px solid #0066cc;
-        outline-offset: 2px;
-      }
-      .content {
-        padding-left: 16px;
-      }
-      .focusable-item {
-        display: block;
-        padding: 8px 12px;
-        margin: 4px 0;
-        background: #fff;
-        border: 1px solid #ccc;
-        border-radius: 3px;
-        text-decoration: none;
-        color: #333;
-        cursor: pointer;
-      }
-      .focusable-item:hover {
-        background: #f0f8ff;
-        border-color: #0066cc;
-      }
-      .focusable-item:focus {
-        outline: 2px solid #0066cc;
-        outline-offset: 1px;
-        background: #e6f3ff;
-      }
-      .debug {
-        position: fixed;
-        top: 10px;
-        right: 10px;
-        width: 300px;
-        background: #222;
-        color: #fff;
-        padding: 10px;
-        border-radius: 4px;
-        font-size: 12px;
-        max-height: 300px;
-        overflow-y: auto;
-      }
-      .debug h3 {
-        margin: 0 0 10px 0;
-        font-size: 14px;
-      }
-      .status-line {
-        margin: 2px 0;
-        padding: 2px 4px;
-        background: #333;
-        border-radius: 2px;
-      }
-      /* Visual indicators for focus group hierarchy */
-      [data-focus-group="root"] {
-        border-left: 4px solid #0066cc;
-      }
-      [data-focus-group="level-1"] {
-        border-left: 4px solid #00cc66;
-      }
-      [data-focus-group="level-2"] {
-        border-left: 4px solid #cc6600;
-      }
-      [data-focus-group="level-3"] {
-        border-left: 4px solid #cc0066;
-      }
-    </style>
-  </head>
-  <body>
-    <h1>Tree Focus Group Test</h1>
-    <p>
-      This demonstrates a tree-like structure using nested
-      <code>&lt;details&gt;</code> elements with focus groups. Each details
-      contains a focus group for vertical arrow navigation within its content.
-    </p>
-    <div class="debug">
-      <h3>Debug Info</h3>
-      <div id="debug-output"></div>
-    </div>
-    <!-- Test element before the tree -->
-    <div
-      style="
-        margin: 20px 0;
-        padding: 10px;
-        border: 2px solid #0066cc;
-        background: #f0f8ff;
-      "
-    >
-      <label for="before-input">Input before tree (Tab test):</label>
-      <input
-        id="before-input"
-        type="text"
-        placeholder="Focus me, then press Tab"
-        style="margin-left: 10px; padding: 5px"
-      />
-    </div>
-    <div class="tree-container">
-      <h2>File System Tree</h2>
-      <!-- Root level details -->
-      <details open data-focus-group="root">
-        <summary tabindex="0">📁 Projects</summary>
-        <div class="content" id="projects-group">
-          <!-- Nested details level 1 -->
-          <details data-focus-group="level-1">
-            <summary tabindex="-1">📁 src</summary>
-            <div class="content" id="src-group">
-              <!-- Nested details level 2 -->
-              <details data-focus-group="level-2">
-                <summary tabindex="-1">📁 components</summary>
-                <div class="content" id="components-group">
-                  <div tabindex="-1" class="focusable-item">📄 Button.jsx</div>
-                  <div tabindex="-1" class="focusable-item">📄 Modal.jsx</div>
-                </div>
-              </details>
-            </div>
-          </details>
-          <details data-focus-group="level-2">
-            <summary tabindex="-1">📁 utils</summary>
-            <div class="content" id="utils-group">
-              <div tabindex="-1" class="focusable-item">📄 helpers.js</div>
-              <div tabindex="-1" class="focusable-item">📄 config.js</div>
-            </div>
-          </details>
-          <div tabindex="0" class="focusable-item">📄 README.md</div>
-          <div tabindex="0" class="focusable-item">📄 package.json</div>
-          <div tabindex="0" class="focusable-item">� .gitignore</div>
-        </div>
-      </details>
-    </div>
-    <!-- Test element after the tree -->
-    <div
-      style="
-        margin: 20px 0;
-        padding: 10px;
-        border: 2px solid #cc6600;
-        background: #fff8f0;
-      "
-    >
-      <label for="after-input">Input after tree (Tab test):</label>
-      <input
-        id="after-input"
-        type="text"
-        placeholder="Should receive focus after tree"
-        style="margin-left: 10px; padding: 5px"
-      />
-      <button style="margin-left: 10px; padding: 5px 10px">
-        Button after tree
-      </button>
-    </div>
-    <div class="tree-container">
-      <h2>Expected Focus Group Behavior</h2>
-      <ul>
-        <li>
-          <strong>Tab Navigation:</strong> Should skip over focus groups
-          entirely - from "Input before tree" directly to "Input after tree"
-        </li>
-        <li>
-          <strong>Arrow Up/Down:</strong> Navigates within the current focus
-          group (vertical)
-        </li>
-        <li>
-          <strong>Future Implementation:</strong> Arrow Left/Right to
-          collapse/expand or move between sibling groups
-        </li>
-      </ul>
-      <h3>Tab Navigation Test</h3>
-      <ol>
-        <li>Click on "Input before tree" field above</li>
-        <li>
-          Press Tab - should jump directly to "Input after tree" (skipping all
-          focus groups)
-        </li>
-        <li>Press Shift+Tab - should jump back to "Input before tree"</li>
-        <li>
-          To enter a focus group: click on any file/folder item, then use arrows
-        </li>
-      </ol>
-      <h3>Focus Group Configuration</h3>
-      <p>Each <code>details</code> element would be initialized as:</p>
-      <pre><code>initFocusGroup(element, {
-  direction: "vertical",  // Only up/down arrows
-  loop: false,           // Stay at boundaries
-  skipTab: true          // Tab exits the group
-});</code></pre>
-    </div>
-    <script type="module">
-      import { initFocusGroup } from "../focus_group.js";
-      // Initialize focus groups on details elements
-      const focusGroups = document.querySelectorAll("details");
-      focusGroups.forEach((group) => {
-        initFocusGroup(group, {
-          direction: "vertical", // Only allow up/down navigation within each group
-          loop: false, // Don't wrap around at boundaries
-          skipTab: true, // Tab key exits the group
-        });
-      });
-      // Debug logging
-      const debugOutput = document.getElementById("debug-output");
-      function log(message) {
-        const line = document.createElement("div");
-        line.className = "status-line";
-        line.textContent = `${new Date().toLocaleTimeString()}: ${message}`;
-        debugOutput.insertBefore(line, debugOutput.firstChild);
-        // Keep only last 10 messages
-        while (debugOutput.children.length > 10) {
-          debugOutput.removeChild(debugOutput.lastChild);
-        }
-      }
-      // Track focus changes
-      document.addEventListener("focusin", (event) => {
-        const element = event.target;
-        const groupId =
-          element.closest("details")?.getAttribute("data-focus-group") ||
-          "none";
-        const elementType = element.tagName.toLowerCase();
-        const elementText = element.textContent.trim().substring(0, 20);
-        log(`Focus: ${elementType} "${elementText}" in ${groupId}`);
-      });
-      // Track key presses for debugging
-      document.addEventListener("keydown", (event) => {
-        if (
-          ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Tab"].includes(
-            event.key,
-          )
-        ) {
-          const activeGroup =
-            document.activeElement
-              ?.closest("details")
-              ?.getAttribute("data-focus-group") || "none";
-          log(`Key: ${event.key} in ${activeGroup}`);
-        }
-      });
-      log("Tree focus group test initialized");
-    </script>
-  </body>
-</html>

package/src/interaction/focus/tests/tree_focus_test.jsx DELETED Viewed

@@ -1,261 +0,0 @@
-import { Details } from "@jsenv/navi";
-import { render } from "preact";
-// Add CSS styles
-import.meta.css = /* css */ `
-  body {
-    font-family: Arial, sans-serif;
-    max-width: 800px;
-    margin: 20px auto;
-    padding: 20px;
-    line-height: 1.6;
-  }
-  .tree-container {
-    border: 2px solid #333;
-    padding: 20px;
-    margin: 20px 0;
-    background: #f9f9f9;
-  }
-  details {
-    margin: 8px 0;
-    border: 1px solid #ddd;
-    border-radius: 4px;
-    background: white;
-  }
-  summary {
-    padding: 12px;
-    background: #e8e8e8;
-    cursor: pointer;
-    border-radius: 4px 4px 0 0;
-    font-weight: bold;
-  }
-  summary:hover {
-    background: #d8d8d8;
-  }
-  .content {
-    padding-left: 16px;
-  }
-  .focusable-item {
-    display: block;
-    padding: 8px 12px;
-    margin: 4px 0;
-    background: #fff;
-    border: 1px solid #ccc;
-    border-radius: 3px;
-    text-decoration: none;
-    color: #333;
-    cursor: pointer;
-  }
-  .focusable-item:hover {
-    background: #f0f8ff;
-    border-color: #0066cc;
-  }
-  .focusable-item:focus {
-    outline: 2px solid #0066cc;
-    outline-offset: 1px;
-    background: #e6f3ff;
-  }
-  .debug {
-    position: fixed;
-    top: 10px;
-    right: 10px;
-    width: 300px;
-    background: #222;
-    color: #fff;
-    padding: 10px;
-    border-radius: 4px;
-    font-size: 12px;
-    max-height: 300px;
-    overflow-y: auto;
-  }
-  .debug h3 {
-    margin: 0 0 10px 0;
-    font-size: 14px;
-  }
-  .status-line {
-    margin: 2px 0;
-    padding: 2px 4px;
-    background: #333;
-    border-radius: 2px;
-  }
-  .test-input-container {
-    margin: 20px 0;
-    padding: 10px;
-    border-radius: 4px;
-  }
-  .before-tree {
-    border: 2px solid #0066cc;
-    background: #f0f8ff;
-  }
-  .after-tree {
-    border: 2px solid #cc6600;
-    background: #fff8f0;
-  }
-  input,
-  button {
-    margin-left: 10px;
-    padding: 5px;
-  }
-  button {
-    padding: 5px 10px;
-  }
-`;
-const TreeFocusTest = () => {
-  return (
-    <div>
-      <h1>Tree Focus Group Test - Preact</h1>
-      <p>
-        This demonstrates a tree-like structure using @jsenv/navi&apos;s{" "}
-        <code>&lt;Details&gt;</code> component with focus groups.
-      </p>
-      {/* Test element before the tree */}
-      <div className="test-input-container before-tree">
-        <label htmlFor="before-input">Input before tree (Tab test):</label>
-        <input
-          id="before-input"
-          type="text"
-          placeholder="Focus me, then press Tab"
-        />
-      </div>
-      <div className="tree-container">
-        <h2>File System Tree</h2>
-        {/* Root level details */}
-        <Details
-          focusGroup
-          focusGroupDirection="vertical"
-          open
-          label={"📁 Projects"}
-        >
-          <div className="content">
-            {/* Nested details level 1 */}
-            <Details focusGroup focusGroupDirection="vertical" label="📁 src">
-              <div className="content">
-                {/* Nested details level 2 */}
-                <Details
-                  focusGroup
-                  focusGroupDirection="vertical"
-                  label="📁 components"
-                >
-                  <div className="content">
-                    <div tabIndex="-1" className="focusable-item">
-                      📄 Button.jsx
-                    </div>
-                    <div tabIndex="-1" className="focusable-item">
-                      📄 Modal.jsx
-                    </div>
-                  </div>
-                </Details>
-              </div>
-            </Details>
-            <Details focusGroup focusGroupDirection="vertical" label="📁 utils">
-              <div className="content">
-                <div tabIndex="-1" className="focusable-item">
-                  📄 helpers.js
-                </div>
-                <div tabIndex="-1" className="focusable-item">
-                  📄 config.js
-                </div>
-              </div>
-            </Details>
-            <div tabIndex="0" className="focusable-item">
-              📄 README.md
-            </div>
-            <div tabIndex="0" className="focusable-item">
-              📄 package.json
-            </div>
-            <div tabIndex="0" className="focusable-item">
-              📄 .gitignore
-            </div>
-          </div>
-        </Details>
-      </div>
-      {/* Test element after the tree */}
-      <div className="test-input-container after-tree">
-        <label htmlFor="after-input">Input after tree (Tab test):</label>
-        <input
-          id="after-input"
-          type="text"
-          placeholder="Should receive focus after tree"
-        />
-        <button>Button after tree</button>
-      </div>
-      <div className="tree-container">
-        <h2>Expected Focus Group Behavior</h2>
-        <ul>
-          <li>
-            <strong>Tab Navigation:</strong> Should skip over focus groups
-            entirely - from &quot;Input before tree&quot; directly to
-            &quot;Input after tree&quot;
-          </li>
-          <li>
-            <strong>Arrow Up/Down:</strong> Navigates within the current focus
-            group (vertical)
-          </li>
-          <li>
-            <strong>Future Implementation:</strong> Arrow Left/Right to
-            collapse/expand or move between sibling groups
-          </li>
-        </ul>
-        <h3>Tab Navigation Test</h3>
-        <ol>
-          <li>Click on &quot;Input before tree&quot; field above</li>
-          <li>
-            Press Tab - should jump directly to &quot;Input after tree&quot;
-            (skipping all focus groups)
-          </li>
-          <li>
-            Press Shift+Tab - should jump back to &quot;Input before tree&quot;
-          </li>
-          <li>
-            To enter a focus group: click on any file/folder item, then use
-            arrows
-          </li>
-        </ol>
-        <h3>Focus Group Configuration</h3>
-        <p>
-          Each <code>&lt;Details&gt;</code> component is configured as:
-        </p>
-        <pre>
-          <code>{`<Details
-  focusGroup
-  label="📁 Folder"
->
-  <div className="content">
-    {/* Content */}
-  </div>
-</Details>`}</code>
-        </pre>
-      </div>
-    </div>
-  );
-};
-// Mount the component
-render(<TreeFocusTest />, document.body);

package/src/interaction/focus/tests/tree_focus_test_preact.html DELETED Viewed

@@ -1,13 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Tree Focus Group Test - Preact</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="./tree_focus_test.jsx"></script>
-  </body>
-</html>