@fusion.dev/helix-headless 0.182.2 → 0.183.0

package/dist/virtual-list/root/virtual-list-root.d.ts

@@ -61,6 +61,32 @@ export interface VirtualListRange {
  * smallest item size, and follows the box as it resizes. `gap` spaces the rows, and the columns
  * of a grid, by a number of pixels the list counts in each row's place.
  *
+ * A grid without `selection-mode` is a grid to a reader, as the APG's grid
+ * and React Aria's grid list are: the box is a `grid` with `aria-rowcount`
+ * and `aria-colcount`, each line drawn is a `row` with `aria-rowindex`, and
+ * each item a `gridcell` with `aria-colindex`. Each line is a slot of the
+ * list's own, so your rows stay its children: give an item one element. With
+ * `selection-mode` it stays a list box of options, as React Aria's list box
+ * in a grid layout does.
+ *
+ * **A waterfall.** `layout="waterfall"` puts each item, in the order of the
+ * set, under the column that ends highest so far, the leftmost of a tie, as a
+ * wall of photos of different heights is, and as React Aria's waterfall
+ * layout and TanStack Virtual's lanes do. `columns`, or `min-column-width`,
+ * says how many columns. Every item is measured, at the width of its column,
+ * and placed at its column and its height, so items of any height leave no
+ * holes. The list draws the items that reach into the box, and the item
+ * holding focus. A reader hears a list, or a list box, in the order of the
+ * set, which is also the order Tab and a screen reader's own keys take.
+ *
+ * In a waterfall, Down and Up move along the column to the next or the
+ * previous item in it, Right and Left move to the next or the previous
+ * column, to the item there that sits beside this one the most, or the
+ * nearest above where none does, and Page Down and Page Up move a box down
+ * or up the column. Home and End go to the first and the last item of the
+ * set, and Shift with a key takes in the items between in the order of the
+ * set.
+ *
  * **Across.** `orientation="horizontal"` lays the items out along a line and
  * scrolls it sideways, as a strip of cards does, windowed the same way:
  * `estimate` is then an item's width, and the box needs an inline size.
@@ -79,10 +105,11 @@ export interface VirtualListRange {
  *
  * | Key | What it does |
  * |---|---|
- * | Down, Up | Moves to the next or the previous item, or in a grid to the item in the same column on the next or the previous line. |
- * | Right, Left | In a grid, moves to the next or the previous item along the line, the other way round on a right-to-left page. In a list that runs across, moves to the next or the previous item the same way, and Down and Up are left to the row. |
- * | Home, End | Moves to the first or the last item. |
- * | Page Down, Page Up | Moves by the number of items, or of lines in a grid, on screen. |
+ * | Down, Up | Moves to the next or the previous item, or in a grid to the item in the same column on the next or the previous line, or in a waterfall to the next or the previous item down the same column. |
+ * | Right, Left | In a grid, moves to the next or the previous item along the line, the other way round on a right-to-left page. In a waterfall, moves to the item beside in the next or the previous column. In a list that runs across, moves to the next or the previous item the same way, and Down and Up are left to the row. |
+ * | Home, End | Moves to the first or the last item. In a grid without `selection-mode`, to the first or the last item of the line. |
+ * | Control or Command with Home or End | In a grid without `selection-mode`, moves to the first or the last item. |
+ * | Page Down, Page Up | Moves by the number of items, or of lines in a grid, on screen, or in a waterfall a box down or up the column. |
  * | A letter or a word | Moves to the next item whose text starts with what you typed. |
  * | Escape | Lets go of every chosen item, in a list with `selection-mode`. |
  * | Alt with Up or Down | In a `reorderable` list, moves the item a place. Alt with Home or End moves it to either end. |
@@ -97,8 +124,9 @@ export interface VirtualListRange {
  * or the item itself when it is a string or a number.
  *
  * Each row says its place in the whole set with `aria-posinset` and
- * `aria-setsize`, so a screen reader says "4,000 of 10,000". The row holding
- * focus stays drawn when it scrolls out.
+ * `aria-setsize`, so a screen reader says "4,000 of 10,000", and each cell of
+ * a grid its line and its column. The row holding focus stays drawn when it
+ * scrolls out.
  *
  * **Selecting.** `selection-mode` makes the list a list box a reader chooses
  * from: `single` selects one item and `multiple` any number. Space or a press
@@ -267,6 +295,15 @@ export declare class HelixHeadlessVirtualList extends HelixElement {
      * wins over this.
      */
     label: string;
+    /**
+     * How items of more than one column are laid out. `grid`, the default, puts
+     * them in lines of equal columns. `waterfall` puts each item, in the order
+     * of the set, under the column that ends highest, as a wall of photos of
+     * different heights is: `columns`, or `min-column-width`, says how many
+     * columns. Rows of a waterfall are measured, and Up and Down move along a
+     * column.
+     */
+    layout: 'grid' | 'waterfall';
     /**
      * Marks the list as busy fetching more items, and draws a row after the last
      * item that says so.
@@ -300,7 +337,7 @@ export declare class HelixHeadlessVirtualList extends HelixElement {
      * Which way the list runs. `horizontal` lays the items out along a line
      * and scrolls it sideways: Left and Right move between items, the other
      * way round on a right-to-left page, and `estimate` is an item's width. A
-     * grid always runs down.
+     * grid and a waterfall always run down.
      */
     orientation: 'horizontal' | 'vertical';
     /**
@@ -324,7 +361,8 @@ export declare class HelixHeadlessVirtualList extends HelixElement {
      * with an arrow moves the row the keys are on, and a pointer drags a row.
      * The list moves no item itself: you move your `items` on `helix-reorder`.
      * Without that import it does nothing, so a list that never moves items
-     * carries none of the code. A list of one column, without sections.
+     * carries none of the code. A list of one column, without sections or a
+     * waterfall.
      */
     reorderable: boolean;
     /**
@@ -422,24 +460,42 @@ export declare class HelixHeadlessVirtualList extends HelixElement {
     get range(): VirtualListRange;
     /** The gap in pixels, none where it is not a positive number. */
     private get space();
+    /** Where each item of a waterfall stands, which the controller places. */
+    private readonly lanes;
+    /** Whether the items are laid out as a waterfall, each down a column. */
+    private get waterfall();
     /**
-     * How many items a line holds: as many as fit at `min-column-width` where
-     * it is set and the box has a width, and `columns` otherwise, at least one.
+     * Whether the list is a grid a reader reads, and not a list box: lines of
+     * columns with no `selection-mode`, which are `grid`, `row` and `gridcell`
+     * to a reader, as the APG's grid and React Aria's grid list are.
+     */
+    private get lined();
+    /**
+     * How many items a line holds, which a waterfall draws one at a time: its
+     * columns are not lines.
      */
     private get across();
+    /**
+     * How many columns there are: as many as fit at `min-column-width` where
+     * it is set and the box has a width, and `columns` otherwise, at least one.
+     */
+    private get columnCount();
     /** How wide the box is, read for `min-column-width`. */
     private boxWidth;
     /** Watches the box's width, for `min-column-width`. */
     private widthWatch;
-    /** The items to a line the measurements were taken at. */
+    /** The items to a line the measurements were taken at, or a waterfall's columns and width. */
     private measuredAcross;
-    /** Watches the box for its width while `min-column-width` asks for it. */
+    /**
+     * Watches the box for its width while `min-column-width` asks for it, or a
+     * waterfall, whose items are as tall as their width makes them.
+     */
     private watchWidth;
     /** The items a span of lines holds. */
     private itemsOn;
     /** The line item `at` is on: its entry in a list with sections. */
     private lineOf;
-    /** Whether the list runs across, which a grid never does. */
+    /** Whether the list runs across, which a grid and a waterfall never do. */
     private get horizontal();
     /** The sections and the items they were read from, kept until either changes. */
     private sectionsRead;
@@ -541,6 +597,14 @@ export declare class HelixHeadlessVirtualList extends HelixElement {
      * is that control's, so a field in a row keeps its arrows.
      */
     private readonly handleKeydown;
+    /**
+     * Where a key goes in a waterfall, through the columns `Waterfall.step`
+     * reads: along the column for Down, Up, Page Down and Page Up, and to the
+     * item beside in the next column or the one before for the keys along the
+     * line, the other way round on a right-to-left page. Past a disabled item,
+     * on the same way.
+     */
+    private inWaterfall;
     /** The key of item `at` in `value`. See `keyField`. */
     private keyAt;
     /** @internal Every item's key, in the order of the set, which the reorder entry moves. */
@@ -600,15 +664,25 @@ export declare class HelixHeadlessVirtualList extends HelixElement {
     private keptIndex;
     /**
      * Writes a row's role, and whether it is chosen in a list that selects:
-     * `option` with `aria-selected` there, and `listitem` otherwise, and
-     * `aria-disabled` on an item `disabled-keys` names. Every pass,
-     * since a choice changes no row's content.
+     * `option` with `aria-selected` there, `gridcell` in a grid, and `listitem`
+     * otherwise, and `aria-disabled` on an item `disabled-keys` names. Every
+     * pass, since a choice changes no row's content.
+     *
+     * Its place too: `aria-posinset` and `aria-setsize` in a list, and in a
+     * grid its column, with the line's `row` given by the slot it is drawn in.
      *
      * `data-selected` and `data-disabled` say the same to a stylesheet, as
      * React Aria's rows do, so one rule reads the same in either kind of list.
      */
     private mark;
-    /** Writes a row's place in the set. */
+    /**
+     * Writes which item a row drew, for the controller to measure it against:
+     * the real index, the same one `aria-posinset` carries one higher.
+     *
+     * `mark` writes the place a reader hears from it, the real index and the
+     * real total, not the position in the window. A reader arrowing through
+     * this should hear where they are in the set.
+     */
     private stamp;
     /** Fills a drawn row from its item, by `renderItem` or by the template's holes. */
     private fill;
@@ -642,6 +716,10 @@ export declare class HelixHeadlessVirtualList extends HelixElement {
     private place;
     /** The sections the rows were last placed in. */
     private placedSections;
+    /** Whether the rows were last placed in a waterfall. */
+    private placedWaterfall;
+    /** The lines of a grid drawn on the last pass, each a `row` the render draws a slot in. */
+    private drawnLines;
     /** The function the drawn headers were drawn by, so a new one draws them again. */
     private headedBy;
     /** Ties each header's id to this list. */

package/dist/virtual-list/root/virtual-list-root.js

@@ -1,5 +1,5 @@
 import { __decorate } from "tslib";
-import { AriaForwardController, anchorAt, commaList, customElement, elementById, HelixElement, HelixLoadMoreEvent, HelixRangeChangeEvent, inRowOrder, isRtl, pressedOwnControl, rangeAdd, requestValue, SCROLLER_RULE, searchableById, selectsAll, Typeahead, toggleValue, typesCharacter, VIRTUAL_RULE, VirtualizeController, words, } from '@fusion.dev/helix-core';
+import { AriaForwardController, anchorAt, commaList, customElement, elementById, HelixElement, HelixLoadMoreEvent, HelixRangeChangeEvent, inRowOrder, isRtl, pressedOwnControl, rangeAdd, requestValue, SCROLLER_RULE, searchableById, selectsAll, Typeahead, toggleValue, typesCharacter, VIRTUAL_RULE, VirtualizeController, Waterfall, words, } from '@fusion.dev/helix-core';
 import { html, nothing, render } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { holdControls, releaseControls } from '../controls.js';
@@ -13,6 +13,7 @@ const nextSectionId = () => {
     return `virtual-list-${sectionCount}`;
 };
 const ROWS = ':scope > [data-index], :scope > [data-section] > [data-index]';
+const LINE = 'helix-line-';
 let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixElement {
     constructor() {
         super(...arguments);
@@ -24,6 +25,7 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
         this.gap = 0;
         this.keyField = '';
         this.label = '';
+        this.layout = 'grid';
         this.loading = false;
         this.loadingLabel = 'Loading more';
         this.measured = false;
@@ -54,7 +56,12 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
             horizontal: () => this.horizontal,
             measured: () => this.measured,
             rows: () => this.lines(),
+            waterfall: () => {
+                this.lanes.lanes = this.columnCount;
+                return this.waterfall ? this.lanes : undefined;
+            },
         });
+        this.lanes = new Waterfall();
         this.boxWidth = 0;
         this.measuredAcross = 1;
         this.handleKeydown = (event) => {
@@ -97,7 +104,9 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
                 }
             }
             const extend = event.shiftKey && this.selectionMode === 'multiple';
-            if (event.altKey || (toggle && !replacing) || (event.shiftKey && !extend)) {
+            const ends = event.key === 'Home' || event.key === 'End';
+            const lined = this.lined;
+            if (event.altKey || (toggle && !replacing && !(lined && ends)) || (event.shiftKey && !extend)) {
                 return;
             }
             const count = this.data.length;
@@ -112,13 +121,19 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
                         : event.key === 'ArrowDown' || event.key === 'ArrowUp'
                             ? ''
                             : event.key;
-            const stepped = stepIndex(key, at, count, last - first - 1, {
-                across: this.across,
-                forward,
-            });
+            const disabled = (one) => this.isDisabled(one);
+            const across = this.across;
+            const start = at - (at % across);
+            const stepped = lined && ends && !toggle
+                ? key === 'Home'
+                    ? start
+                    : Math.min(start + across, count) - 1
+                : this.waterfall && !ends
+                    ? this.inWaterfall(key, at, count, forward)
+                    : stepIndex(key, at, count, last - first - 1, { across, forward });
             const next = stepped === undefined
                 ? undefined
-                : skipDisabled(key, at, stepped, count, (one) => this.isDisabled(one), this.across);
+                : skipDisabled(key, at, stepped, count, disabled, this.waterfall ? 1 : across);
             if (next === undefined) {
                 if (stepped !== undefined) {
                     event.preventDefault();
@@ -172,6 +187,8 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
             this.requestUpdate();
         };
         this.visited = false;
+        this.placedWaterfall = false;
+        this.drawnLines = [];
         this.sectionId = nextSectionId();
     }
     static { this.markRules = [SCROLLER_RULE, VIRTUAL_RULE]; }
@@ -182,7 +199,20 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
     get space() {
         return Number.isFinite(this.gap) && this.gap > 0 ? this.gap : 0;
     }
+    get waterfall() {
+        return this.layout === 'waterfall';
+    }
+    get lined() {
+        return (!this.selectionMode &&
+            !this.waterfall &&
+            !this.horizontal &&
+            this.sections === undefined &&
+            (this.across > 1 || this.minColumnWidth > 0));
+    }
     get across() {
+        return this.waterfall ? 1 : this.columnCount;
+    }
+    get columnCount() {
         if (this.minColumnWidth > 0 && this.boxWidth > 0) {
             const space = this.space;
             return Math.max(1, Math.floor((this.boxWidth + space) / (this.minColumnWidth + space)));
@@ -191,7 +221,9 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
     }
     watchWidth() {
         const viewport = this.partNamed('viewport');
-        if (this.minColumnWidth <= 0 || !viewport || typeof ResizeObserver === 'undefined') {
+        if ((this.minColumnWidth <= 0 && !this.waterfall) ||
+            !viewport ||
+            typeof ResizeObserver === 'undefined') {
             this.widthWatch?.disconnect();
             this.widthWatch = undefined;
             return;
@@ -218,11 +250,11 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
         return sections ? entryOf(sections, at) : Math.floor(at / this.across);
     }
     get horizontal() {
-        return this.orientation === 'horizontal' && this.across === 1;
+        return this.orientation === 'horizontal' && this.across === 1 && !this.waterfall;
     }
     get sections() {
         const data = this.data;
-        if (this.sectionField === '' || data.length === 0 || this.across !== 1) {
+        if (this.sectionField === '' || data.length === 0 || this.columnCount !== 1 || this.waterfall) {
             return undefined;
         }
         const read = this.sectionsRead;
@@ -275,7 +307,7 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
             this.readFor = this.for;
             this.read();
         }
-        const across = this.across;
+        const across = this.waterfall ? `${this.columnCount} ${this.boxWidth}` : this.across;
         if (across !== this.measuredAcross) {
             this.measuredAcross = across;
             this.virtualize.forget();
@@ -450,6 +482,16 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
     rowFor(index) {
         return ([...this.querySelectorAll(ROWS)].find((row) => row.dataset.index === String(index)) ?? null);
     }
+    inWaterfall(key, at, count, forward) {
+        const way = key === forward ? 'next' : key === 'ArrowLeft' || key === 'ArrowRight' ? 'previous' : key;
+        const box = this.partNamed('viewport');
+        let to = this.lanes.step(way, at, count, box?.clientHeight ?? 0);
+        const again = way === 'PageDown' ? 'ArrowDown' : way === 'PageUp' ? 'ArrowUp' : way;
+        while (to !== undefined && this.isDisabled(to)) {
+            to = this.lanes.step(again, to, count, 0);
+        }
+        return to;
+    }
     keyAt(at) {
         return keyOf(this.data[at], at, this.keyField);
     }
@@ -530,7 +572,22 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
             : undefined;
     }
     mark(element, at, chosen, off) {
-        element.setAttribute('role', this.selectionMode ? 'option' : 'listitem');
+        const lined = this.lined;
+        element.setAttribute('role', this.selectionMode ? 'option' : lined ? 'gridcell' : 'listitem');
+        const across = this.across;
+        for (const [name, value] of [
+            ['aria-colindex', lined ? (at % across) + 1 : undefined],
+            ['aria-posinset', lined ? undefined : at + 1],
+            ['aria-setsize', lined ? undefined : this.data.length],
+            ['slot', lined ? `${LINE}${Math.floor(at / across)}` : undefined],
+        ]) {
+            if (value === undefined) {
+                element.removeAttribute(name);
+            }
+            else {
+                element.setAttribute(name, String(value));
+            }
+        }
         const selected = Boolean(this.selectionMode) && chosen.has(this.keyAt(at));
         if (this.selectionMode) {
             element.setAttribute('aria-selected', String(selected));
@@ -549,8 +606,6 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
         element.toggleAttribute('data-disabled', disabled);
     }
     stamp(element, at) {
-        element.setAttribute('aria-posinset', String(at + 1));
-        element.setAttribute('aria-setsize', String(this.data.length));
         element.setAttribute('data-index', String(at));
     }
     fill(elements, at) {
@@ -595,12 +650,13 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
             this.partNamed('after')?.style.setProperty(size, `${spacers.after}px`);
         }
         const sections = this.sections;
-        const regroup = sections !== this.placedSections;
+        const regroup = sections !== this.placedSections || this.waterfall !== this.placedWaterfall;
         this.placedSections = sections;
+        this.placedWaterfall = this.waterfall;
         const children = [
             ...[...this.children].filter((child) => child !== template &&
                 child instanceof HTMLElement &&
-                !child.hasAttribute('slot') &&
+                (child.dataset.index !== undefined || !child.hasAttribute('slot')) &&
                 !child.hasAttribute('data-section')),
             ...this.querySelectorAll(':scope > [data-section] > [data-index]'),
         ];
@@ -660,9 +716,23 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
         });
         const chosen = this.chosen;
         const off = this.disabled;
+        const lines = this.lined ? [...new Set(plan.wanted.map((at) => this.lineOf(at)))] : [];
+        if (lines.join() !== this.drawnLines.join()) {
+            this.drawnLines = lines;
+            this.requestUpdate();
+        }
+        const gap = this.space;
+        const columns = this.columnCount;
         for (const [at, group] of drawn) {
             for (const element of group) {
                 this.mark(element, at, chosen, off);
+                if (this.waterfall) {
+                    const style = element.style;
+                    style.setProperty('position', 'absolute');
+                    style.setProperty('inset-block-start', `${this.virtualize.offsetOf(at)}px`);
+                    style.setProperty('inset-inline-start', `calc((100% + ${gap}px) * ${this.lanes.lane(at)} / ${columns})`);
+                    style.setProperty('inline-size', `calc((100% - ${gap * (columns - 1)}px) / ${columns})`);
+                }
             }
             const stop = at === this.active;
             group[0]?.setAttribute('tabindex', stop ? '0' : '-1');
@@ -745,6 +815,9 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
         return groups;
     }
     spacerSizes() {
+        if (this.waterfall) {
+            return { after: 0, before: 0 };
+        }
         const kept = this.hasUpdated ? this.keptIndex() : undefined;
         const room = this.virtualize.spacers(kept === undefined ? undefined : this.lineOf(kept));
         const sections = this.sections;
@@ -779,14 +852,20 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
         const size = horizontal ? 'inline-size' : 'block-size';
         const flex = horizontal ? '; flex: none' : '';
         const gap = this.space;
+        const grid = gap === 0 ? '' : `; gap: ${gap}px; padding-block-end: ${gap}px`;
         const empty = this.readFor !== undefined &&
             !this.loading &&
             this.data.length === 0 &&
             (this.emptyLabel !== '' || this.querySelector(':scope > [slot="empty"]') !== null);
+        const lined = this.lined;
+        const own = (content) => lined ? html `<div role="gridcell">${content}</div>` : content;
+        const role = this.selectionMode ? 'option' : lined ? 'row' : 'listitem';
         return html `<div
       data-scroller
       part="viewport"
-      role=${this.selectionMode ? 'listbox' : 'list'}
+      role=${this.selectionMode ? 'listbox' : lined ? 'grid' : 'list'}
+      aria-colcount=${lined ? across : nothing}
+      aria-rowcount=${lined ? Math.ceil(this.data.length / across) : nothing}
       aria-multiselectable=${this.selectionMode === 'multiple' ? 'true' : nothing}
       aria-busy=${this.loading ? 'true' : nothing}
       aria-label=${this.label}
@@ -798,24 +877,37 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
         }}
     >
       <div part="before" style="${size}: ${before}px${flex}"></div>
+      ${lined
+            ? html `<div style=${`display: grid; grid-template-columns: repeat(${across}, minmax(0, 1fr))${grid}`}>
+              ${this.drawnLines.map((line) => html `<div
+                  aria-rowindex=${line + 1}
+                  role="row"
+                  style="display: grid; grid-column: 1 / -1; grid-template-columns: subgrid"
+                >
+                  <slot name=${`${LINE}${line}`}></slot>
+                </div>`)}
+            </div>`
+            : nothing}
       <slot
-        style=${horizontal
-            ? `display: flex; flex: none${gap === 0 ? '' : `; column-gap: ${gap}px; padding-inline-end: ${gap}px`}`
-            : across === 1
-                ? gap === 0
-                    ? nothing
-                    : `display: flex; flex-direction: column; row-gap: ${gap}px; padding-block-end: ${gap}px`
-                : `display: grid; grid-template-columns: repeat(${across}, minmax(0, 1fr))${gap === 0 ? '' : `; gap: ${gap}px; padding-block-end: ${gap}px`}`}
+        style=${this.waterfall
+            ? `display: block; position: relative; block-size: ${this.virtualize.offsetOf(this.data.length)}px`
+            : horizontal
+                ? `display: flex; flex: none${gap === 0 ? '' : `; column-gap: ${gap}px; padding-inline-end: ${gap}px`}`
+                : across === 1 || lined
+                    ? gap === 0
+                        ? nothing
+                        : `display: flex; flex-direction: column; row-gap: ${gap}px; padding-block-end: ${gap}px`
+                    : `display: grid; grid-template-columns: repeat(${across}, minmax(0, 1fr))${grid}`}
       ></slot>
       <div part="after" style="${size}: ${after}px${flex}"></div>
       ${this.loading
-            ? html `<div part="loading" role=${this.selectionMode ? 'option' : 'listitem'}>
-              <slot name="loading">${this.loadingLabel}</slot>
+            ? html `<div part="loading" role=${role}>
+              ${own(html `<slot name="loading">${this.loadingLabel}</slot>`)}
             </div>`
             : nothing}
       ${empty
-            ? html `<div part="empty" role=${this.selectionMode ? 'option' : 'listitem'}>
-              <slot name="empty">${this.emptyLabel}</slot>
+            ? html `<div part="empty" role=${role}>
+              ${own(html `<slot name="empty">${this.emptyLabel}</slot>`)}
             </div>`
             : nothing}
     </div>`;
@@ -848,6 +940,9 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessVirtualList.prototype, "label", void 0);
+__decorate([
+    property()
+], HelixHeadlessVirtualList.prototype, "layout", void 0);
 __decorate([
     property({ type: Boolean })
 ], HelixHeadlessVirtualList.prototype, "loading", void 0);