Merge branch 'next' into feat/query-anchor

Author: jlukic

CHANGELOG.md

@@ -9,16 +9,7 @@ Please note after `1.0` Semver will be followed using normal protocols.
 # Version 0.17.0 - xx.xx.xxxx
 
 ## Major Features
-* **Anchor/Positioning** - Added new `anchor` behavior that allows you to position elements relative to other elements using `css anchor`
-
-## Bugs
-* **Query Plugins** - Fixed issue where using non clonables as settings like query collections, or custom classes wouldn't work as expected. This was related to the default behavior of deepExtend and clone (see breaking changes).
-* **Query** - Fixed bug in `is` where it would return true for non-existent selectors
-
-## Features
-* **Utils** - Clone now has a new setting `preserveDOM` which will not clone DOM nodes if present. This can be useful in scenarios where you want to clone an object with references to the live DOM you want to maintain
-* **Utils** - Added `log()` function for flexible logging with formatting, namespacing, timestamps, and JSON output support
-* **Utils** - Renamed `errors.js` module to `debug.js` to better reflect its logging and debugging capabilities
+* **Attach** - Added new `attach` behavior that allows you to position elements relative to other elements using `css anchor` positioning.
 
 ## Breaking Changes
 * **Utils** - `deepExtend` now preserves non clonables by default. This is to prevent very common scenarios where extend is used with custom classes or dom elements where the original reference should be maintained. Note this still can be overwritten using `deepExtend(obj1, obj2, { preserveNonCloneable: false });`
@@ -44,6 +35,13 @@ Please note after `1.0` Semver will be followed using normal protocols.
 * **Enhancement** - [`closest()`](https://next.semantic-ui.com/api/query/dom-traversal#closest) now supports passing DOM elements directly as the selector parameter, checking containment using the element's `contains()` method.
 * **Bug** - Fixed CSS nesting parsing in [`naturalDisplay()`](https://next.semantic-ui.com/api/query/dimensions#naturaldisplay) to properly resolve nested selectors with `&` parent references (e.g., `& .grid-container`).
 * **Bug** - Fixed [`position()`](https://next.semantic-ui.com/api/query/dimensions#position) method to return `undefined` for empty selections instead of empty array when used as getter.
+* **Bug** - Fixed issue where using non clonables as settings like query collections, or custom classes wouldn't work as expected. This was related to the default behavior of deepExtend and clone (see breaking changes).
+* **Bug** - Fixed bug in `is` where it would return true for non-existent selectors
+
+## Utils
+* **Feature** - Clone now has a new setting `preserveDOM` which will not clone DOM nodes if present. This can be useful in scenarios where you want to clone an object with references to the live DOM you want to maintain
+* **Feature** - Added `log()` function for flexible logging with formatting, namespacing, timestamps, and JSON output support
+* **Feature** - Renamed `errors.js` module to `debug.js` to better reflect its logging and debugging capabilities
 
 # Version 0.16.1-2 - 08.21.2025
 

ai/packages/query.md

@@ -167,21 +167,31 @@ The Query class provides a comprehensive set of methods organized into logical c
 - `pagePosition(options)` - Get document-relative position (viewport + scroll)
 - `dimensions()` - Get comprehensive dimension info (position, size, box model)
 - `bounds()` - Get DOMRect bounding box information
+<<<<<<< HEAD
 - `intersects(target, options)` - Check if elements intersect with target (with threshold, sides, details, all)
+=======
+>>>>>>> next
 - `offsetParent(options)` - Get offset parent for positioning
 - `naturalWidth()`, `naturalHeight()` - Get natural dimensions
 - `naturalDisplay(options)` - Get natural display value (ignoring display: none)
 - `clippingParent()` - Get element that clips visual bounds
 - `containingParent()` - Get simple containing parent (offsetParent)
 - `positioningParent(options)` - Get accurate positioning context parent
+<<<<<<< HEAD
 - `scrollParent(options)` - Get nearest scrollable container or all scroll parents in hierarchy
+=======
+>>>>>>> next
 
 ### Visibility and Display
 - `show(options)` - Show hidden elements using natural display value
 - `hide()` - Hide elements by setting display: none
 - `toggle(options)` - Toggle visibility state
 - `isVisible(options)` - Check if elements are visible (with opacity/visibility checks)
+<<<<<<< HEAD
 - `isInView(options)` - Check if elements are within viewport bounds (inherits all intersects options)
+=======
+- `isInViewport(options)` - Check if elements are within viewport bounds (defaults to clipping parent)
+>>>>>>> next
 
 ### Component Integration (Semantic UI specific)
 - `settings(newSettings)` - Configure component settings
@@ -866,7 +876,11 @@ console.log('Scrollable area:', dims.scrollWidth, dims.scrollHeight);
 // Lazy loading with viewport detection (uses clipping parent by default)
 function setupLazyLoading() {
   $('.lazy-image').each((img) => {
+<<<<<<< HEAD
     if ($(img).isInView({ threshold: 0.1 })) {
+=======
+    if ($(img).isInViewport({ threshold: 0.1 })) {
+>>>>>>> next
       img.src = img.dataset.src;
       img.classList.remove('lazy-image');
     }
@@ -877,21 +891,30 @@ function setupLazyLoading() {
 $('#content-area').on('scroll', () => {
   $('.animate-on-scroll').each((element) => {
     // Check visibility within the scrolling content area
+<<<<<<< HEAD
     if ($(element).isInView({ threshold: 0.5 })) {
+=======
+    if ($(element).isInViewport({ threshold: 0.5 })) {
+>>>>>>> next
       element.classList.add('animated');
     }
   });
 });
 
 // Check visibility within custom viewport (modal, sidebar, etc.)
+<<<<<<< HEAD
 if ($('.modal-content').isInView({ fully: true, viewport: $('#modal') })) {
+=======
+if ($('.modal-content').isInViewport({ fully: true, viewport: $('#modal') })) {
+>>>>>>> next
   console.log('Modal content is fully visible within modal viewport');
 }
 
 // Progressive reveal based on browser viewport
 $('.reveal-items').each((item) => {
   const $item = $(item);
   // Explicitly use browser viewport instead of clipping parent
+<<<<<<< HEAD
   if ($item.isInView({ threshold: 0.25, viewport: document.documentElement })) {
     $item.addClass('fade-in');
   }
@@ -919,6 +942,12 @@ if ($('.draggable-items').intersects('.drop-zone', { all: true, threshold: 0.8 }
   console.log('All items are mostly within drop zone');
   $('.drop-zone').addClass('ready-for-drop');
 }
+=======
+  if ($item.isInViewport({ threshold: 0.25, viewport: document.documentElement })) {
+    $item.addClass('fade-in');
+  }
+});
+>>>>>>> next
 ```
 
 ### Dynamic Positioning
@@ -952,6 +981,7 @@ function positionTooltip($tooltip, $trigger) {
   $tooltip.css({ top: `${top}px`, left: `${left}px` });
 }
 
+<<<<<<< HEAD
 // Position tooltip within scrollable container
 function positionTooltipInScroller($tooltip, $trigger) {
   const $scrollContainer = $trigger.scrollParent();
@@ -986,6 +1016,8 @@ function setupScrollAwareTooltip($trigger, $tooltip) {
   });
 }
 
+=======
+>>>>>>> next
 // Relative positioning for connected elements
 $('#draggable').on('drag', (event) => {
   // Position connected indicator relative to draggable

docs/src/content/examples/query-is-in-viewport.mdx

@@ -0,0 +1,12 @@
+---
+title: 'Query .isInViewport()'
+shortTitle: '.isInViewport()'
+id: 'query-is-in-viewport'
+exampleType: 'component'
+category: 'Query'
+subcategory: 'Visibility'
+tags: ['query', 'viewport', 'visibility', 'intersection', 'scroll']
+description: 'Checks if elements are within the viewport bounds with threshold support'
+tip: 'Useful for lazy loading, animations, and scroll-triggered effects based on viewport visibility'
+selectedFile: 'page.js'
+---

docs/src/examples/query/visibility/query-is-in-viewport/page.css

@@ -0,0 +1,82 @@
+.scroll-container {
+  height: 300px;
+  overflow-y: auto;
+  padding: var(--padding);
+  background: var(--standard-1);
+  border: var(--border);
+  border-radius: var(--border-radius);
+  margin: var(--margin) 0;
+}
+
+.test-element {
+  width: 200px;
+  height: 100px;
+  background: var(--blue-10);
+  border: 2px solid var(--blue-30);
+  color: var(--blue-70);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto 20px;
+  border-radius: var(--border-radius);
+  font-weight: bold;
+  font-size: 16px;
+  transition: all 0.3s ease;
+}
+
+.test-element.in-viewport {
+  background: var(--green-10);
+  border-color: var(--green-30);
+  color: var(--green-70);
+  transform: scale(1.05);
+  box-shadow: 0 8px 25px var(--green-20);
+}
+
+.test-element.partially-visible {
+  background: var(--orange-10);
+  border-color: var(--orange-30);
+  color: var(--orange-70);
+}
+
+.spacer {
+  height: 200px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--standard-50);
+  font-style: italic;
+}
+
+.spacer.bottom {
+  height: 100px;
+}
+
+ui-button {
+  margin: 5px;
+}
+
+.output {
+  background: var(--standard-5);
+  border: var(--border);
+  border-radius: var(--border-radius);
+  padding: var(--padding);
+  margin: var(--margin) 0;
+}
+
+.output h3 {
+  margin-top: 0;
+  color: var(--standard-70);
+}
+
+#viewport-info {
+  background: var(--standard-0);
+  padding: var(--padding);
+  border-radius: var(--border-radius);
+  border: var(--border);
+  white-space: pre-wrap;
+  font-family: monospace;
+  font-size: 13px;
+  line-height: 1.4;
+  max-height: 200px;
+  overflow-y: auto;
+}

docs/src/examples/query/visibility/query-is-in-viewport/page.html

@@ -0,0 +1,24 @@
+<p>Check viewport visibility with threshold and fully options</p>
+
+<div class="scroll-container" id="scroll-area">
+  <div class="spacer">Scroll down to see elements...</div>
+  
+  <div class="test-element" data-name="Element 1">Element 1</div>
+  <div class="spacer">Scroll more...</div>
+  
+  <div class="test-element" data-name="Element 2">Element 2</div>
+  <div class="spacer">Keep scrolling...</div>
+  
+  <div class="test-element" data-name="Element 3">Element 3</div>
+  <div class="spacer bottom">End of content</div>
+</div>
+
+<ui-button id="check-viewport">Check Viewport</ui-button>
+<ui-button id="check-threshold">Check 50% Threshold</ui-button>
+<ui-button id="check-fully">Check Fully Visible</ui-button>
+<ui-button id="scroll-to-middle">Scroll to Middle</ui-button>
+
+<div class="output">
+  <h3>Viewport Status</h3>
+  <pre id="viewport-info"></pre>
+</div>

docs/src/examples/query/visibility/query-is-in-viewport/page.js

@@ -0,0 +1,68 @@
+import { $ } from '@semantic-ui/query';
+
+function checkViewportStatus(options = {}) {
+  let info = 'CLIPPING PARENT VISIBILITY CHECK';
+
+  if (options.threshold !== undefined) {
+    info += ` (${Math.round(options.threshold * 100)}% threshold)`;
+  }
+  if (options.fully) {
+    info += ' (fully visible only)';
+  }
+
+  info += ':\n\n';
+
+  $('.test-element').each((element) => {
+    const $element = $(element);
+    const name = $element.attr('data-name');
+    const isVisible = $element.isInViewport(options);
+
+    info += `${name}: ${isVisible ? '✓ VISIBLE IN CONTAINER' : '✗ NOT VISIBLE IN CONTAINER'}\n`;
+
+    // Visual feedback
+    $element.removeClass('in-viewport partially-visible');
+    if (isVisible) {
+      $element.addClass('in-viewport');
+    }
+    else if ($element.isInViewport()) {
+      $element.addClass('partially-visible');
+    }
+  });
+
+  // Check all elements together
+  const allVisible = $('.test-element').isInViewport(options);
+  info += `\nAll elements visible in container: ${allVisible ? '✓ YES' : '✗ NO'}`;
+
+  $('#viewport-info').text(info);
+}
+
+// Event handlers using Query
+$('#check-viewport').on('click', () => {
+  checkViewportStatus();
+});
+
+$('#check-threshold').on('click', () => {
+  checkViewportStatus({ threshold: 0.5 });
+});
+
+$('#check-fully').on('click', () => {
+  checkViewportStatus({ fully: true });
+});
+
+$('#scroll-to-middle').on('click', () => {
+  const container = $('#scroll-area').el();
+  const scrollHeight = container.scrollHeight;
+  const clientHeight = container.clientHeight;
+  container.scrollTop = (scrollHeight - clientHeight) / 2;
+
+  // Check after scroll
+  setTimeout(() => checkViewportStatus(), 100);
+});
+
+// Check on scroll
+$('#scroll-area').on('scroll', () => {
+  checkViewportStatus();
+});
+
+// Initial check
+checkViewportStatus();