virtua 0.51.3 → 0.52.0

package/README.md

@@ -2,7 +2,7 @@
 
 ![npm](https://img.shields.io/npm/v/virtua) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/virtua) ![npm](https://img.shields.io/npm/dw/virtua) [![Best of JS](https://img.shields.io/endpoint?url=https://bestofjs-serverless.now.sh/api/project-badge?fullName=inokawa%2Fvirtua%26since=daily)](https://bestofjs.org/projects/virtua) [![Ask DeepWiki](https://deepwiki.com/badge.svg)](https://deepwiki.com/inokawa/virtua) [![check](https://github.com/inokawa/virtua/actions/workflows/check.yml/badge.svg)](https://github.com/inokawa/virtua/actions/workflows/check.yml) [![demo](https://github.com/inokawa/virtua/actions/workflows/demo.yml/badge.svg)](https://github.com/inokawa/virtua/actions/workflows/demo.yml)
 
-> A zero-config, fast and small (~3kB) virtual list (and grid) component for [React](https://github.com/facebook/react), [Vue](https://vuejs.org/), [Solid](https://www.solidjs.com/), [Svelte](https://svelte.dev/) and [Angular](https://angular.dev/).
+> A zero-config, fast and small virtual list and grid component for [React](https://github.com/facebook/react), [Vue](https://vuejs.org/), [Solid](https://www.solidjs.com/), [Svelte](https://svelte.dev/) and [Angular](https://angular.dev/).
 
 ![example](./example.gif)
 
@@ -14,7 +14,7 @@ This project is a challenge to rethink virtualization. The goals are...
 
 - **Zero-config virtualization:** This library is designed to give the best performance without configuration. It also handles common hard things in the real world (dynamic size measurement, scroll position adjustment while reverse scrolling and imperative scrolling, iOS support, etc).
 - **Fast:** Natural virtual scrolling needs optimization in many aspects (eliminate frame drops by reducing CPU usage and GC, reduce [synchronous layout recalculation](https://gist.github.com/paulirish/5d52fb081b3570c81e3a), reduce visual jumps on repaint, optimize with CSS, optimize for JIT, optimize for frameworks, etc). We are trying to combine the best of them.
-- **Small:** Its bundle size should be small as much as possible to be friendly with modern web development. Currently each components are ~3kB gzipped and tree-shakeable.
+- **Small:** Its bundle size should be small as much as possible to be friendly with modern web development. Currently components start from ~3kB gzipped and are tree-shakeable.
 - **Flexible:** Aiming to support many usecases - fixed size, dynamic size, horizontal scrolling, reverse scrolling, RTL, mobile, infinite scrolling, scroll restoration, DnD, keyboard navigation, sticky, placeholder and more. See [live demo](#demo).
 - **Framework agnostic:** [React](https://react.dev/), [Vue](https://vuejs.org/), [Solid](https://www.solidjs.com/), [Svelte](https://svelte.dev/) and [Angular](https://angular.dev/) are supported. We could support other frameworks in the future.
 
@@ -34,6 +34,7 @@ If you want to support legacy browsers, you need polyfills.
 - [Scroll methods on elements](https://caniuse.com/element-scroll-methods) are always required (e.g. [element-scroll-polyfill](https://github.com/idmadj/element-scroll-polyfill)).
 - [CSS scroll-behavior](https://caniuse.com/?search=scroll-behavior) is required only if you call `scrollToIndex` with `smooth: true` (e.g. [scroll-behavior-polyfill](https://github.com/wessberg/scroll-behavior-polyfill)).
 - [CSS inset-inline-start](https://caniuse.com/mdn-css_properties_inset-inline-start) is required only if you set `horizontal: true`. It cannot be polyfilled so use `virtua@<=0.50` instead.
+- [CSS subgrid](https://caniuse.com/css-subgrid) is required for VGrid.
 
 ## Getting started
 
@@ -174,24 +175,46 @@ export const App = () => {
 };
 ```
 
-#### Vertical and horizontal scroll
+#### Tabular data
 
 ```tsx
-import { experimental_VGrid as VGrid } from "virtua";
+import { VGrid } from "virtua";
+
+const columns = [
+  { key: "id", width: 80 },
+  { key: "name", width: 200 },
+  { key: "email", width: 300 },
+  { key: "age", width: 80 },
+  { key: "joined", width: 160 },
+  { key: "bio", width: 480 },
+] as const;
+
+const rows = Array.from({ length: 10000 }, (_, i) => ({
+  id: i,
+  name: `User ${i}`,
+  email: `user${i}@example.com`,
+  age: 20 + (i % 50),
+  joined: new Date(2020, 0, 1 + i).toDateString(),
+  bio: `Hello, I'm user ${i}.`,
+}));
 
 export const App = () => {
   return (
-    <VGrid style={{ height: 800 }} row={1000} col={500}>
-      {({ rowIndex, colIndex }) => (
+    <VGrid
+      style={{ height: 800, border: "solid 1px gray", background: "white" }}
+      rows={rows}
+      rowHeight={40}
+      cols={columns}
+      colWidth="width"
+    >
+      {(row, col) => (
         <div
           style={{
-            width: ((colIndex % 3) + 1) * 100,
-            background: "white",
-            borderLeft: colIndex !== 0 ? "solid 1px gray" : undefined,
-            borderTop: rowIndex !== 0 ? "solid 1px gray" : undefined,
+            borderRight: "solid 1px gray",
+            borderBottom: "solid 1px gray",
           }}
         >
-          {rowIndex} / {colIndex}
+          {row[col.key]}
         </div>
       )}
     </VGrid>
@@ -409,8 +432,9 @@ This package uses [exports of package.json](https://nodejs.org/api/packages.html
 | Vertical scroll                                                                                                                                                | ✅                                                                                                               | ✅                                                                                                                               | ✅                                                                                                                           | ✅                                                                                                                                                                     | 🟠 (needs customization)                                                                                                                           |
 | Horizontal scroll                                                                                                                                              | ✅                                                                                                               | ✅                                                                                                                               | ✅                                                                                                                           | ✅                                                                                                                                                                     | 🟠 (needs customization)                                                                                                                           |
 | Horizontal scroll in RTL direction                                                                                                                             | ✅                                                                                                               | ❌                                                                                                                               | ✅                                                                                                                           | ❌                                                                                                                                                                     | 🟠 (isRtl)                                                                                                                                         |
-| Grid (Virtualization for two dimension)                                                                                                                        | 🟠 (experimental_VGrid)                                                                                          | ❌                                                                                                                               | ✅ ([Grid](https://react-window.vercel.app/grid/grid))                                                                       | ✅ ([Grid](https://github.com/bvaughn/react-virtualized/blob/master/docs/Grid.md))                                                                                     | 🟠 (needs customization)                                                                                                                           |
-| Table                                                                                                                                                          | 🟠 (needs customization)                                                                                         | ✅ (TableVirtuoso)                                                                                                               | 🟠 ([Supported](https://react-window.vercel.app/list/tabular-data))                                                          | 🟠 ([Table](https://github.com/bvaughn/react-virtualized/blob/master/docs/Table.md) but it's built with div)                                                           | 🟠 (needs customization)                                                                                                                           |
+| Grid (Virtualization for two dimensions)                                                                                                                       | ✅ (VGrid)                                                                                                       | ❌                                                                                                                               | ✅ ([Grid](https://react-window.vercel.app/grid/grid))                                                                       | ✅ ([Grid](https://github.com/bvaughn/react-virtualized/blob/master/docs/Grid.md))                                                                                     | 🟠 (needs customization)                                                                                                                           |
+| Tabular data (Columns with headers)                                                                                                                            | ✅ (VGrid)                                                                                                       | ✅ (TableVirtuoso)                                                                                                               | 🟠 ([Supported](https://react-window.vercel.app/list/tabular-data))                                                          | ✅ ([Table](https://github.com/bvaughn/react-virtualized/blob/master/docs/Table.md))                                                                                   | 🟠 (needs customization)                                                                                                                           |
+| HTML table element                                                                                                                                             | 🟠 (needs customization)                                                                                         | ✅ (TableVirtuoso)                                                                                                               | ❌                                                                                                                           | ❌                                                                                                                                                                     | 🟠 (needs customization)                                                                                                                           |
 | Masonry                                                                                                                                                        | ❌                                                                                                               | ✅ (VirtuosoMasonry)                                                                                                             | ❌                                                                                                                           | ✅ ([Masonry](https://github.com/bvaughn/react-virtualized/blob/master/docs/Masonry.md))                                                                               | 🟠 (needs customization)                                                                                                                           |
 | Window scroller                                                                                                                                                | ✅ (WindowVirtualizer)                                                                                           | ✅                                                                                                                               | ❌                                                                                                                           | ✅ ([WindowScroller](https://github.com/bvaughn/react-virtualized/blob/master/docs/WindowScroller.md))                                                                 | ✅ (useWindowVirtualizer)                                                                                                                          |
 | Dynamic list size                                                                                                                                              | ✅                                                                                                               | ✅                                                                                                                               | ✅                                                                                                                           | 🟠 (needs [AutoSizer](https://github.com/bvaughn/react-virtualized/blob/master/docs/AutoSizer.md))                                                                     | ✅                                                                                                                                                 |

package/lib/angular/VGrid.d.ts

@@ -0,0 +1,249 @@
+import { type OnInit, TemplateRef } from "@angular/core";
+import { type GridCellState, type GridRowGroupState, type GridRowState, type VGridScrollToIndexOpts, type VGridAxis, type VGridCell, type VGridSize, type VGridSpan } from "../core/index.js";
+import * as i0 from "@angular/core";
+/**
+ * Methods of {@link VGrid}.
+ */
+export interface VGridHandle {
+    /**
+     * Get current scrollTop.
+     */
+    readonly verticalScrollOffset: number;
+    /**
+     * Get current scrollLeft. Always positive even in RTL.
+     */
+    readonly horizontalScrollOffset: number;
+    /**
+     * Get current scrollHeight.
+     */
+    readonly scrollHeight: number;
+    /**
+     * Get current scrollWidth.
+     */
+    readonly scrollWidth: number;
+    /**
+     * Get current clientHeight.
+     */
+    readonly viewportHeight: number;
+    /**
+     * Get current clientWidth.
+     */
+    readonly viewportWidth: number;
+    /**
+     * Find nearest row index from offset.
+     * @param offset offset in pixels from the top of the scroll container
+     */
+    findRowIndex(offset: number): number;
+    /**
+     * Find nearest column index from offset.
+     * @param offset offset in pixels from the start of the scroll container
+     */
+    findColIndex(offset: number): number;
+    /**
+     * Get offset of the row from the top.
+     * @param index index of row
+     */
+    getRowOffset(index: number): number;
+    /**
+     * Get offset of the column from the start.
+     * @param index index of column
+     */
+    getColOffset(index: number): number;
+    /**
+     * Get size of the row.
+     * @param index index of row
+     */
+    getRowSize(index: number): number;
+    /**
+     * Get size of the column.
+     * @param index index of column
+     */
+    getColSize(index: number): number;
+    /**
+     * Scroll to the cell specified by the indexes. The cell is not hidden behind the rows and the columns sticking over it.
+     * @param opts the indexes of the cell and the options. See {@link VGridScrollToIndexOpts}.
+     */
+    scrollToIndex(opts: VGridScrollToIndexOpts): void;
+    /**
+     * Scroll to the given offsets from the top/start of the scroll container.
+     * @param offset the offsets. The axis whose offset is omitted is not scrolled.
+     */
+    scrollTo(offset: {
+        vertical?: number;
+        horizontal?: number;
+    }): void;
+    /**
+     * Scroll by the given offsets from the current position.
+     * @param offset the offsets. The axis whose offset is omitted is not scrolled.
+     */
+    scrollBy(offset: {
+        vertical?: number;
+        horizontal?: number;
+    }): void;
+}
+/**
+ * Context of the cell template.
+ */
+export type CellContext<R = number, C = number> = {
+    /**
+     * The item of the rows at the row of the cell, or the row index if the rows are a number. Same as `row`.
+     */
+    $implicit: R;
+    /**
+     * The item of the rows at the row of the cell, or the row index if the rows are a number.
+     */
+    row: R;
+    /**
+     * The item of the columns at the column of the cell, or the column index if the columns are a number.
+     */
+    col: C;
+    /**
+     * The row index and the column index of the cell.
+     */
+    cell: Readonly<VGridCell>;
+};
+export declare class GridCell {
+    readonly state: import("@angular/core").InputSignal<GridCellState>;
+    readonly resizer: import("@angular/core").InputSignal<(el: HTMLElement, rowIndex: number | undefined, colIndex: number | undefined) => () => void>;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<GridCell, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<GridCell, "div[virtuaGridCell]", never, { "state": { "alias": "state"; "required": true; "isSignal": true; }; "resizer": { "alias": "resizer"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+export declare class GridRow<R, C> {
+    readonly state: import("@angular/core").InputSignal<GridRowState>;
+    readonly template: import("@angular/core").InputSignal<TemplateRef<CellContext<R, C>>>;
+    readonly row: import("@angular/core").InputSignal<R>;
+    readonly cols: import("@angular/core").InputSignal<VGridAxis<C>>;
+    readonly resizer: import("@angular/core").InputSignal<(el: HTMLElement, rowIndex: number | undefined, colIndex: number | undefined) => () => void>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<GridRow<any, any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<GridRow<any, any>, "div[virtuaGridRow]", never, { "state": { "alias": "state"; "required": true; "isSignal": true; }; "template": { "alias": "template"; "required": true; "isSignal": true; }; "row": { "alias": "row"; "required": true; "isSignal": true; }; "cols": { "alias": "cols"; "required": true; "isSignal": true; }; "resizer": { "alias": "resizer"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+export declare class GridRowGroup<R, C> {
+    readonly state: import("@angular/core").InputSignal<GridRowGroupState>;
+    readonly template: import("@angular/core").InputSignal<TemplateRef<CellContext<R, C>>>;
+    readonly rows: import("@angular/core").InputSignal<VGridAxis<R>>;
+    readonly cols: import("@angular/core").InputSignal<VGridAxis<C>>;
+    readonly resizer: import("@angular/core").InputSignal<(el: HTMLElement, rowIndex: number | undefined, colIndex: number | undefined) => () => void>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<GridRowGroup<any, any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<GridRowGroup<any, any>, "div[virtuaGridRowGroup]", never, { "state": { "alias": "state"; "required": true; "isSignal": true; }; "template": { "alias": "template"; "required": true; "isSignal": true; }; "rows": { "alias": "rows"; "required": true; "isSignal": true; }; "cols": { "alias": "cols"; "required": true; "isSignal": true; }; "resizer": { "alias": "resizer"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+/**
+ * Virtualized grid component for tabular data. See {@link VGridHandle}.
+ *
+ * The host element is the scrollable viewport of the grid.
+ */
+export declare class VGrid<R = number, C = number> implements OnInit, VGridHandle {
+    /**
+     * The rows of the grid. See {@link VGridAxis} for the accepted values.
+     */
+    readonly rows: import("@angular/core").InputSignal<VGridAxis<R>>;
+    /**
+     * The columns of the grid. See {@link VGridAxis} for the accepted values.
+     */
+    readonly cols: import("@angular/core").InputSignal<VGridAxis<C>>;
+    /**
+     * The heights of the rows. See {@link VGridSize} for the accepted values.
+     */
+    readonly rowHeight: import("@angular/core").InputSignal<NoInfer<VGridSize<R>>>;
+    /**
+     * The widths of the columns. See {@link VGridSize} for the accepted values.
+     */
+    readonly colWidth: import("@angular/core").InputSignal<NoInfer<VGridSize<C>>>;
+    /**
+     * The number of the leading rows pinned to the start, which are the column headers (`role="columnheader"`).
+     *
+     * **The pinned cells are rendered over the other cells, so give them an opaque background.**
+     * @defaultValue 0
+     */
+    readonly headerRows: import("@angular/core").InputSignal<number | undefined>;
+    /**
+     * Indexes of the rows which start sections. A section lasts until the next section row or the footer rows, and its first row sticks below the header rows while the section is scrolled through.
+     *
+     * **The section rows are rendered over the other cells while they stick, so give them an opaque background.**
+     */
+    readonly sectionRows: import("@angular/core").InputSignal<readonly number[] | undefined>;
+    /**
+     * The number of the trailing rows pinned to the end.
+     *
+     * **The pinned cells are rendered over the other cells, so give them an opaque background.**
+     * @defaultValue 0
+     */
+    readonly footerRows: import("@angular/core").InputSignal<number | undefined>;
+    /**
+     * The number of the leading columns pinned to the start, the last of which is the row header (`role="rowheader"`).
+     *
+     * **The pinned cells are rendered over the other cells, so give them an opaque background.**
+     * @defaultValue 0
+     */
+    readonly headerCols: import("@angular/core").InputSignal<number | undefined>;
+    /**
+     * The number of the trailing columns pinned to the end.
+     *
+     * **The pinned cells are rendered over the other cells, so give them an opaque background.**
+     * @defaultValue 0
+     */
+    readonly footerCols: import("@angular/core").InputSignal<number | undefined>;
+    /**
+     * Cells merged over multiple rows and/or columns. See {@link VGridSpan} for the accepted values.
+     *
+     * The cell at the origin is stretched over the merged area, and the other cells in it are not rendered. Spans must not overlap each other or cross the boundaries of the pinned rows/columns or the sections. A spanning cell is not measured for `"auto"` sizes on the axes it spans, and doesn't enlarge those tracks.
+     */
+    readonly spans: import("@angular/core").InputSignal<readonly VGridSpan[] | undefined>;
+    /**
+     * List of cells that should be always mounted, even when off screen.
+     */
+    readonly keepMounted: import("@angular/core").InputSignal<readonly VGridCell[] | undefined>;
+    /**
+     * Extra space in pixels to render before/after the viewport. The minimum value is 0. Lower value will give better performance but you can increase to avoid showing blank cells in fast scrolling.
+     * @defaultValue 200
+     */
+    readonly bufferSize: import("@angular/core").InputSignal<number | undefined>;
+    /**
+     * The gap between the rows and the columns in pixels, which is not included in the sizes. Must not be changed after mount.
+     * @defaultValue 0
+     */
+    readonly gap: import("@angular/core").InputSignal<number>;
+    /**
+     * The header cell of the sorted column or row, and the sort order (`aria-sort`).
+     */
+    readonly ariaSort: import("@angular/core").InputSignal<(VGridCell & {
+        order: "ascending" | "descending" | "other";
+    }) | undefined>;
+    /**
+     * Emitted whenever the vertical scroll offset changes. The value is current scrollTop.
+     */
+    readonly verticalScrolled: import("@angular/core").OutputEmitterRef<number>;
+    /**
+     * Emitted whenever the horizontal scroll offset changes. The value is current scrollLeft, which is always positive even in RTL.
+     */
+    readonly horizontalScrolled: import("@angular/core").OutputEmitterRef<number>;
+    /**
+     * Emitted when scrolling stops.
+     */
+    readonly scrollEnded: import("@angular/core").OutputEmitterRef<void>;
+    constructor();
+    ngOnInit(): void;
+    get verticalScrollOffset(): number;
+    get horizontalScrollOffset(): number;
+    get scrollHeight(): number;
+    get scrollWidth(): number;
+    get viewportHeight(): number;
+    get viewportWidth(): number;
+    findRowIndex(offset: number): number;
+    findColIndex(offset: number): number;
+    getRowOffset(index: number): number;
+    getColOffset(index: number): number;
+    getRowSize(index: number): number;
+    getColSize(index: number): number;
+    scrollToIndex(opts: VGridScrollToIndexOpts): void;
+    scrollTo({ vertical, horizontal, }: {
+        vertical?: number;
+        horizontal?: number;
+    }): void;
+    scrollBy({ vertical, horizontal, }: {
+        vertical?: number;
+        horizontal?: number;
+    }): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<VGrid<any, any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<VGrid<any, any>, "virtua-vgrid", never, { "rows": { "alias": "rows"; "required": true; "isSignal": true; }; "cols": { "alias": "cols"; "required": true; "isSignal": true; }; "rowHeight": { "alias": "rowHeight"; "required": true; "isSignal": true; }; "colWidth": { "alias": "colWidth"; "required": true; "isSignal": true; }; "headerRows": { "alias": "headerRows"; "required": false; "isSignal": true; }; "sectionRows": { "alias": "sectionRows"; "required": false; "isSignal": true; }; "footerRows": { "alias": "footerRows"; "required": false; "isSignal": true; }; "headerCols": { "alias": "headerCols"; "required": false; "isSignal": true; }; "footerCols": { "alias": "footerCols"; "required": false; "isSignal": true; }; "spans": { "alias": "spans"; "required": false; "isSignal": true; }; "keepMounted": { "alias": "keepMounted"; "required": false; "isSignal": true; }; "bufferSize": { "alias": "bufferSize"; "required": false; "isSignal": true; }; "gap": { "alias": "gap"; "required": false; "isSignal": true; }; "ariaSort": { "alias": "ariaSort"; "required": false; "isSignal": true; }; }, { "verticalScrolled": "verticalScrolled"; "horizontalScrolled": "horizontalScrolled"; "scrollEnded": "scrollEnded"; }, ["template"], never, true, never>;
+}

package/lib/angular/VList.d.ts

@@ -64,11 +64,11 @@ export declare class VList<T> implements OnInit, VListHandle {
     /**
      * Emitted whenever scroll offset changes. The value is current scrollTop, or scrollLeft if horizontal: true.
      */
-    readonly scroll: import("@angular/core").OutputEmitterRef<number>;
+    readonly scrolled: import("@angular/core").OutputEmitterRef<number>;
     /**
      * Emitted when scrolling stops.
      */
-    readonly scrollEnd: import("@angular/core").OutputEmitterRef<void>;
+    readonly scrollEnded: import("@angular/core").OutputEmitterRef<void>;
     ngOnInit(): void;
     get cache(): CacheSnapshot;
     get scrollOffset(): number;
@@ -81,5 +81,5 @@ export declare class VList<T> implements OnInit, VListHandle {
     scrollTo(offset: number): void;
     scrollBy(offset: number): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<VList<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<VList<any>, "virtua-vlist", never, { "data": { "alias": "data"; "required": true; "isSignal": true; }; "getKey": { "alias": "getKey"; "required": false; "isSignal": true; }; "itemProps": { "alias": "itemProps"; "required": false; "isSignal": true; }; "bufferSize": { "alias": "bufferSize"; "required": false; "isSignal": true; }; "itemSize": { "alias": "itemSize"; "required": false; "isSignal": true; }; "ssrCount": { "alias": "ssrCount"; "required": false; "isSignal": true; }; "shift": { "alias": "shift"; "required": false; "isSignal": true; }; "horizontal": { "alias": "horizontal"; "required": false; "isSignal": true; }; "keepMounted": { "alias": "keepMounted"; "required": false; "isSignal": true; }; "cacheProp": { "alias": "cache"; "required": false; "isSignal": true; }; }, { "scroll": "scroll"; "scrollEnd": "scrollEnd"; }, ["template"], never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<VList<any>, "virtua-vlist", never, { "data": { "alias": "data"; "required": true; "isSignal": true; }; "getKey": { "alias": "getKey"; "required": false; "isSignal": true; }; "itemProps": { "alias": "itemProps"; "required": false; "isSignal": true; }; "bufferSize": { "alias": "bufferSize"; "required": false; "isSignal": true; }; "itemSize": { "alias": "itemSize"; "required": false; "isSignal": true; }; "ssrCount": { "alias": "ssrCount"; "required": false; "isSignal": true; }; "shift": { "alias": "shift"; "required": false; "isSignal": true; }; "horizontal": { "alias": "horizontal"; "required": false; "isSignal": true; }; "keepMounted": { "alias": "keepMounted"; "required": false; "isSignal": true; }; "cacheProp": { "alias": "cache"; "required": false; "isSignal": true; }; }, { "scrolled": "scrolled"; "scrollEnded": "scrollEnded"; }, ["template"], never, true, never>;
 }

package/lib/angular/Virtualizer.d.ts

@@ -119,11 +119,11 @@ export declare class Virtualizer<T> implements OnInit, VirtualizerHandle {
     /**
      * Emitted whenever scroll offset changes. The value is current scrollTop, or scrollLeft if horizontal: true.
      */
-    readonly scroll: import("@angular/core").OutputEmitterRef<number>;
+    readonly scrolled: import("@angular/core").OutputEmitterRef<number>;
     /**
      * Emitted when scrolling stops.
      */
-    readonly scrollEnd: import("@angular/core").OutputEmitterRef<void>;
+    readonly scrollEnded: import("@angular/core").OutputEmitterRef<void>;
     constructor();
     ngOnInit(): void;
     get cache(): CacheSnapshot;
@@ -137,5 +137,5 @@ export declare class Virtualizer<T> implements OnInit, VirtualizerHandle {
     scrollTo(offset: number): void;
     scrollBy(offset: number): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<Virtualizer<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<Virtualizer<any>, "virtua-virtualizer, [virtuaVirtualizer]", never, { "data": { "alias": "data"; "required": true; "isSignal": true; }; "getKey": { "alias": "getKey"; "required": false; "isSignal": true; }; "itemProps": { "alias": "itemProps"; "required": false; "isSignal": true; }; "bufferSize": { "alias": "bufferSize"; "required": false; "isSignal": true; }; "scrollRef": { "alias": "scrollRef"; "required": false; "isSignal": true; }; "itemSize": { "alias": "itemSize"; "required": false; "isSignal": true; }; "ssrCount": { "alias": "ssrCount"; "required": false; "isSignal": true; }; "shift": { "alias": "shift"; "required": false; "isSignal": true; }; "horizontal": { "alias": "horizontal"; "required": false; "isSignal": true; }; "keepMounted": { "alias": "keepMounted"; "required": false; "isSignal": true; }; "cacheProp": { "alias": "cache"; "required": false; "isSignal": true; }; "startMargin": { "alias": "startMargin"; "required": false; "isSignal": true; }; }, { "scroll": "scroll"; "scrollEnd": "scrollEnd"; }, ["contentTemplate"], never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<Virtualizer<any>, "virtua-virtualizer, [virtuaVirtualizer]", never, { "data": { "alias": "data"; "required": true; "isSignal": true; }; "getKey": { "alias": "getKey"; "required": false; "isSignal": true; }; "itemProps": { "alias": "itemProps"; "required": false; "isSignal": true; }; "bufferSize": { "alias": "bufferSize"; "required": false; "isSignal": true; }; "scrollRef": { "alias": "scrollRef"; "required": false; "isSignal": true; }; "itemSize": { "alias": "itemSize"; "required": false; "isSignal": true; }; "ssrCount": { "alias": "ssrCount"; "required": false; "isSignal": true; }; "shift": { "alias": "shift"; "required": false; "isSignal": true; }; "horizontal": { "alias": "horizontal"; "required": false; "isSignal": true; }; "keepMounted": { "alias": "keepMounted"; "required": false; "isSignal": true; }; "cacheProp": { "alias": "cache"; "required": false; "isSignal": true; }; "startMargin": { "alias": "startMargin"; "required": false; "isSignal": true; }; }, { "scrolled": "scrolled"; "scrollEnded": "scrollEnded"; }, ["contentTemplate"], never, true, never>;
 }

package/lib/angular/WindowVirtualizer.d.ts

@@ -88,11 +88,11 @@ export declare class WindowVirtualizer<T> implements OnInit, WindowVirtualizerHa
     /**
      * Emitted whenever scroll offset changes.
      */
-    readonly scroll: import("@angular/core").OutputEmitterRef<void>;
+    readonly scrolled: import("@angular/core").OutputEmitterRef<void>;
     /**
      * Emitted when scrolling stops.
      */
-    readonly scrollEnd: import("@angular/core").OutputEmitterRef<void>;
+    readonly scrollEnded: import("@angular/core").OutputEmitterRef<void>;
     constructor();
     ngOnInit(): void;
     get cache(): CacheSnapshot;
@@ -103,5 +103,5 @@ export declare class WindowVirtualizer<T> implements OnInit, WindowVirtualizerHa
     getItemSize(index: number): number;
     scrollToIndex(index: number, opts?: ScrollToIndexOpts): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<WindowVirtualizer<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<WindowVirtualizer<any>, "virtua-window-virtualizer, [virtuaWindowVirtualizer]", never, { "data": { "alias": "data"; "required": true; "isSignal": true; }; "getKey": { "alias": "getKey"; "required": false; "isSignal": true; }; "bufferSize": { "alias": "bufferSize"; "required": false; "isSignal": true; }; "itemSize": { "alias": "itemSize"; "required": false; "isSignal": true; }; "ssrCount": { "alias": "ssrCount"; "required": false; "isSignal": true; }; "shift": { "alias": "shift"; "required": false; "isSignal": true; }; "horizontal": { "alias": "horizontal"; "required": false; "isSignal": true; }; "cacheProp": { "alias": "cache"; "required": false; "isSignal": true; }; }, { "scroll": "scroll"; "scrollEnd": "scrollEnd"; }, ["template"], never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<WindowVirtualizer<any>, "virtua-window-virtualizer, [virtuaWindowVirtualizer]", never, { "data": { "alias": "data"; "required": true; "isSignal": true; }; "getKey": { "alias": "getKey"; "required": false; "isSignal": true; }; "bufferSize": { "alias": "bufferSize"; "required": false; "isSignal": true; }; "itemSize": { "alias": "itemSize"; "required": false; "isSignal": true; }; "ssrCount": { "alias": "ssrCount"; "required": false; "isSignal": true; }; "shift": { "alias": "shift"; "required": false; "isSignal": true; }; "horizontal": { "alias": "horizontal"; "required": false; "isSignal": true; }; "cacheProp": { "alias": "cache"; "required": false; "isSignal": true; }; }, { "scrolled": "scrolled"; "scrollEnded": "scrollEnded"; }, ["template"], never, true, never>;
 }

package/lib/angular/index.d.ts

@@ -4,3 +4,5 @@
 export { VList, type VListHandle } from "./VList.js";
 export { Virtualizer, type VirtualizerHandle } from "./Virtualizer.js";
 export { WindowVirtualizer, type WindowVirtualizerHandle, } from "./WindowVirtualizer.js";
+export { VGrid, type VGridHandle } from "./VGrid.js";
+export type { VGridSize, VGridSpan } from "../core/index.js";