Docs: Add docs for dimensions, isInView rename

Author: jlukic

CHANGELOG.md

@@ -28,7 +28,8 @@ Please note after `1.0` Semver will be followed using normal protocols.
 * **Feature** - Added [`position()`](https://next.semantic-ui.com/api/query/dimensions#position) method that replaces `containerPosition()` with enhanced API supporting multiple coordinate systems (global, local, relative) and proper empty selection handling.
 * **Feature** - Added [`pagePosition()`](https://next.semantic-ui.com/api/query/dimensions#pageposition) method for getting/setting element position relative to the document.
 * **Feature** - Added [`dimensions()`](https://next.semantic-ui.com/api/query/dimensions#dimensions) method returning comprehensive dimension information including content, padding, border, margin, and scroll dimensions.
-* **Feature** - Added [`isInViewport()`](https://next.semantic-ui.com/api/query/visibility#isinviewport) method for detecting viewport intersection with optional threshold and fully visible options.
+* **Feature** - Added [`intersects()`](https://next.semantic-ui.com/api/query/dimensions#intersects) method for checking element intersection with configurable threshold, side detection, and detailed intersection data.
+* **Feature** - Added [`isInView()`](https://next.semantic-ui.com/api/query/visibility#isinview) method for detecting viewport intersection with optional threshold and fully visible options.
 * **Feature** - Added [`positioningParent()`](https://next.semantic-ui.com/api/query/visibility#positioningparent) method that correctly identifies positioning contexts for both absolute and fixed elements, including modern CSS properties like transform, filter, perspective, contain, and will-change.
 * **Feature** - Added [`show()`](https://next.semantic-ui.com/api/query/visibility#show) method for showing hidden elements with optional `calculate` parameter to determine natural display values.
 * **Feature** - Added [`hide()`](https://next.semantic-ui.com/api/query/visibility#hide) method for hiding elements by setting display to 'none'.

ai/packages/query.md

@@ -167,6 +167,7 @@ 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
+- `intersects(target, options)` - Check if elements intersect with target (with threshold, sides, details)
 - `offsetParent(options)` - Get offset parent for positioning
 - `naturalWidth()`, `naturalHeight()` - Get natural dimensions
 - `naturalDisplay(options)` - Get natural display value (ignoring display: none)
@@ -179,7 +180,7 @@ The Query class provides a comprehensive set of methods organized into logical c
 - `hide()` - Hide elements by setting display: none
 - `toggle(options)` - Toggle visibility state
 - `isVisible(options)` - Check if elements are visible (with opacity/visibility checks)
-- `isInViewport(options)` - Check if elements are within viewport bounds (defaults to clipping parent)
+- `isInView(options)` - Check if elements are within viewport bounds (defaults to clipping parent)
 
 ### Component Integration (Semantic UI specific)
 - `settings(newSettings)` - Configure component settings

docs/src/pages/api/query/dimensions.mdx

@@ -367,40 +367,38 @@ const precisePos = $('#element').pagePosition({ precision: 'subpixel' });
 
 ## dimensions
 
-Gets comprehensive dimension information for elements.
+Gets dimension information for elements.
 
 ### Syntax
 
-#### Get
 ```javascript
 $('selector').dimensions()
 ```
 
 ### Returns
 
-#### Get
-Returns a detailed dimensions object:
-- **Single Element** - Dimension object with all measurements
+- **Single Element** - Dimension object
 - **Multiple Elements** - Array of dimension objects  
 - **Empty Selection** - `undefined`
 
-#### Dimension Object Properties
-| Property      | Description                                    |
-|---------------|------------------------------------------------|
-| top, left     | Position relative to viewport                  |
-| right, bottom | Right and bottom edges relative to viewport    |
-| pageTop, pageLeft | Position relative to document              |
-| width         | Content width                                  |
-| innerWidth    | Content + padding width                        |
-| outerWidth    | Content + padding + border width               |
-| marginWidth   | Content + padding + border + margin width      |
-| height        | Content height                                 |
-| innerHeight   | Content + padding height                       |
-| outerHeight   | Content + padding + border height              |
-| marginHeight  | Content + padding + border + margin height     |
-| scrollTop, scrollLeft | Current scroll position                |
-| scrollHeight, scrollWidth | Total scrollable dimensions        |
-| box           | Detailed box model measurements                |
+#### Properties
+| Property      | Description                             |
+|---------------|-----------------------------------------|
+| top, left     | Viewport position                       |
+| right, bottom | Viewport edges                          |
+| pageTop, pageLeft | Document position                   |
+| width         | Content width                           |
+| innerWidth    | Content + padding                       |
+| outerWidth    | Content + padding + border              |
+| marginWidth   | Content + padding + border + margin     |
+| height        | Content height                          |
+| innerHeight   | Content + padding                       |
+| outerHeight   | Content + padding + border              |
+| marginHeight  | Content + padding + border + margin     |
+| scrollTop, scrollLeft | Scroll position                  |
+| scrollHeight, scrollWidth | Scrollable dimensions        |
+| box           | Box model details                       |
+| bounds        | DOMRect bounding box                    |
 
 ### Usage
 
@@ -420,3 +418,92 @@ console.log(`Margin: ${dims.box.margin.bottom}px`);
 
 ### Example
 <PlaygroundExample id="query-dimensions" direction="horizontal"></PlaygroundExample>
+
+## intersects
+
+Checks if elements intersect with a target.
+
+### Syntax
+
+```javascript
+$('selector').intersects(target)
+$('selector').intersects(target, options)
+```
+
+### Parameters
+| Name    | Type                   | Description            |
+|---------|------------------------|------------------------|
+| target  | string/Element/Query   | Target element(s)      |
+| options | object                 | Options (optional)     |
+
+#### Options
+| Name          | Type         | Description                                                         | Default |
+|---------------|--------------|---------------------------------------------------------------------|---------|
+| sides         | string/array | Which sides must intersect ('all', 'top', 'bottom', 'left', 'right') | 'all'  |
+| threshold     | number       | Minimum intersection ratio (0-1)                                   | 0       |
+| fully         | boolean      | Source must be fully contained                                     | false   |
+| returnDetails | boolean      | Return detailed intersection data                                  | false   |
+
+### Returns
+
+- **Basic** - `true` if intersects, `false` otherwise
+- **With returnDetails** - Details object (single element) or array (multiple elements)
+
+#### Details Object
+| Property   | Type    | Description                          |
+|------------|---------|--------------------------------------|
+| intersects | boolean | Elements intersect                   |
+| top        | boolean | Top edge within target               |
+| bottom     | boolean | Bottom edge within target            |
+| left       | boolean | Left edge within target              |
+| right      | boolean | Right edge within target             |
+| ratio      | number  | Intersection/source area ratio       |
+| rect       | object  | Intersection rectangle (or null)     |
+
+### Usage
+
+```javascript
+// Check intersection
+if ($('#trigger').intersects('#popup')) {
+  console.log('Overlapping');
+}
+
+// Multiple targets
+if ($('.item').intersects('.dropzone')) {
+  console.log('Over dropzone');
+}
+
+// 50% overlap required
+$('#draggable').intersects('#target', { threshold: 0.5 });
+
+// Must be fully contained
+$('#child').intersects('#container', { fully: true });
+
+// Check specific sides
+$('#element').intersects('#boundary', { sides: 'top' });
+$('#element').intersects('#boundary', { sides: ['left', 'right'] });
+
+// Get detailed data
+const details = $('#source').intersects('#target', { returnDetails: true });
+if (details.intersects) {
+  console.log(`Overlap: ${details.ratio * 100}%`);
+  console.log(`Area: ${details.rect.width * details.rect.height}px²`);
+}
+
+// Multiple elements
+$('.item').intersects('#container', { returnDetails: true })
+  .forEach((details, i) => {
+    if (details.intersects) {
+      console.log(`Item ${i}: ${details.ratio * 100}%`);
+    }
+  });
+```
+
+### Notes
+- Uses `outerWidth` and `outerHeight` for box-model accuracy
+- Coordinates relative to target element
+- `fully` overrides `threshold` when true
+- With `sides`, at least one specified side must intersect
+
+### Example
+<PlaygroundExample id="query-intersects" direction="horizontal"></PlaygroundExample>

docs/src/pages/api/query/visibility.mdx

@@ -349,36 +349,34 @@ This method detects elements that create containing blocks through:
 ### Example
 <PlaygroundExample id="query-positioningparent" direction="horizontal"></PlaygroundExample>
 
-## isInViewport
+## isInView
 
-Checks if all elements in the selection are within the viewport bounds.
-
-> **Note** By default, this method checks visibility within the clipping parent (scrollable container). If no clipping parent exists, it falls back to the browser viewport. You can also specify a custom viewport element.
+Checks if all elements are within the viewport bounds.
 
 ### Syntax
 
 ```javascript
-$('selector').isInViewport()
-$('selector').isInViewport(options)
+$('selector').isInView()
+$('selector').isInView(options)
 ```
 
 ### Parameters
 
 | Name      | Type    | Description |
 |-----------|---------|-------------|
-| threshold | number  | Minimum percentage (0-1) of element that must be visible. Defaults to `0` (any part visible). |
-| fully     | boolean | Whether element must be fully within viewport. Overrides threshold. Defaults to `false`. |
-| viewport  | Element\|Query | The viewport element to check against. Defaults to clipping parent, falls back to browser viewport. |
+| threshold | number  | Minimum percentage (0-1) visible. Defaults to `0`. |
+| fully     | boolean | Element must be fully within viewport. Defaults to `false`. |
+| viewport  | Element\|Query | Viewport element to check against. Defaults to clipping parent. |
 
 ### Returns
 
-`boolean` - `true` if **ALL** elements meet the visibility criteria, `false` if **ANY** element doesn't meet criteria.
+`boolean` - `true` if ALL elements meet criteria, `false` otherwise.
 
 ### Usage
 
 ```javascript
 // Check if any part is visible in clipping parent (default)
-if ($('#element').isInViewport()) {
+if ($('#element').isInView()) {
   console.log('Element is at least partially visible in container');
 }
 
@@ -398,7 +396,7 @@ if ($('#tooltip').isInViewport({ viewport: $('#modal') })) {
 }
 
 // Check multiple elements (all must meet criteria)
-if ($('.items').isInViewport()) {
+if ($('.items').isInView()) {
   console.log('All items are at least partially visible');
 }
 ```

packages/query/src/query.js

@@ -1996,6 +1996,16 @@ export class Query {
           scrollHeight: document.documentElement.scrollHeight,
           scrollWidth: document.documentElement.scrollWidth,
           box: { padding: boxValues, border: boxValues, margin: boxValues },
+          bounds: {
+            top: 0,
+            left: 0,
+            right: window.innerWidth,
+            bottom: window.innerHeight,
+            width: window.innerWidth,
+            height: window.innerHeight,
+            x: 0,
+            y: 0,
+          },
         };
       }
 

packages/query/types/query.d.ts

@@ -1066,6 +1066,7 @@ export class Query {
         border: { top: number; right: number; bottom: number; left: number; };
         margin: { top: number; right: number; bottom: number; left: number; };
       };
+      bounds: DOMRect;
     }
     | Array<{
       top: number;
@@ -1091,19 +1092,95 @@ export class Query {
         border: { top: number; right: number; bottom: number; left: number; };
         margin: { top: number; right: number; bottom: number; left: number; };
       };
+      bounds: DOMRect;
     }>
     | undefined;
 
+  /**
+   * Checks if elements in the collection intersect with a target element or elements.
+   * @see https://next.semantic-ui.com/api/query/dimensions#intersects
+   * @param target - The target element(s) to check intersection with. Can be a selector string, DOM element, or Query object.
+   * @param options - Configuration options for intersection detection.
+   * @returns Boolean indicating intersection, or detailed intersection data if returnDetails is true.
+   */
+  intersects(
+    target: string | Element | Query,
+    options?: {
+      /** Which sides must intersect ('all' or specific sides). Defaults to 'all'. */
+      sides?: 'all' | 'top' | 'bottom' | 'left' | 'right' | Array<'top' | 'bottom' | 'left' | 'right'>;
+      /** Minimum intersection ratio (0-1). Defaults to 0. */
+      threshold?: number;
+      /** Whether source must be fully contained in target. Defaults to false. */
+      fully?: boolean;
+      /** Whether to return detailed intersection data. Defaults to false. */
+      returnDetails?: false;
+    },
+  ): boolean;
+
+  /**
+   * Checks if elements in the collection intersect with a target element or elements, returning detailed information.
+   * @see https://next.semantic-ui.com/api/query/dimensions#intersects
+   * @param target - The target element(s) to check intersection with.
+   * @param options - Configuration options with returnDetails set to true.
+   * @returns Detailed intersection data object or array of objects.
+   */
+  intersects(
+    target: string | Element | Query,
+    options: {
+      /** Which sides must intersect ('all' or specific sides). Defaults to 'all'. */
+      sides?: 'all' | 'top' | 'bottom' | 'left' | 'right' | Array<'top' | 'bottom' | 'left' | 'right'>;
+      /** Minimum intersection ratio (0-1). Defaults to 0. */
+      threshold?: number;
+      /** Whether source must be fully contained in target. Defaults to false. */
+      fully?: boolean;
+      /** Must be true to get detailed intersection data. */
+      returnDetails: true;
+    },
+  ):
+    | {
+      intersects: boolean;
+      top: boolean;
+      bottom: boolean;
+      left: boolean;
+      right: boolean;
+      ratio: number;
+      rect: {
+        left: number;
+        top: number;
+        right: number;
+        bottom: number;
+        width: number;
+        height: number;
+      } | null;
+    }
+    | Array<{
+      intersects: boolean;
+      top: boolean;
+      bottom: boolean;
+      left: boolean;
+      right: boolean;
+      ratio: number;
+      rect: {
+        left: number;
+        top: number;
+        right: number;
+        bottom: number;
+        width: number;
+        height: number;
+      } | null;
+    }>
+    | null;
+
   /**
    * Checks if ALL elements in the selection are within the viewport.
-   * @see https://next.semantic-ui.com/api/query/visibility#isinviewport
+   * @see https://next.semantic-ui.com/api/query/visibility#isinview
    * @param options - Configuration options.
    * @param options.threshold - Minimum percentage (0-1) of element that must be visible. Defaults to 0.
-   * @param options.fully - Whether element must be fully within viewport. Overrides threshold. Defaults to false.
+   * @param options.fully - Whether element must be fully within viewport. Defaults to false.
    * @param options.viewport - The viewport element to check against. Defaults to clipping parent if not specified.
    * @returns true if ALL elements meet criteria, false otherwise.
    */
-  isInViewport(options?: { threshold?: number; fully?: boolean; viewport?: Element | Query; }): boolean;
+  isInView(options?: { threshold?: number; fully?: boolean; viewport?: Element | Query; }): boolean;
 
   /**
    * Shows hidden elements by setting their display to the natural display value.