@fusion.dev/helix-headless 0.165.0 → 0.167.0

package/dist/video/root/video-root.js

@@ -594,7 +594,8 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         }
         return html `<${this.tag('menu')} part="captions-menu"
     exportparts="back: captions-menu-back, back-mark: captions-menu-back-mark, empty: captions-menu-empty,
-      header: captions-menu-header, live: captions-menu-live, loading: captions-menu-loading, surface: captions-menu-surface,
+      header: captions-menu-header, live: captions-menu-live, loading: captions-menu-loading,
+      search-field: captions-menu-search-field, surface: captions-menu-surface,
       title: captions-menu-title" label=${this.subtitlesLabel} placement="top-end"
       @toggle=${(event) => this.heardMenu('captions', event)}>
       <button
@@ -804,7 +805,8 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
             ? nothing
             : html `<${this.tag('menu')} part="overflow"
           exportparts="back: overflow-back, back-mark: overflow-back-mark, empty: overflow-empty,
-            header: overflow-header, live: overflow-live, loading: overflow-loading, surface: overflow-surface,
+            header: overflow-header, live: overflow-live, loading: overflow-loading,
+            search-field: overflow-search-field, surface: overflow-surface,
             title: overflow-title" label=${this.moreLabel} placement="top-end"
             @toggle=${(event) => this.heardMenu('overflow', event)}>
               <button

package/dist/video-playlist/menu/video-playlist-menu.d.ts

@@ -38,6 +38,7 @@ import '../../menu/index.js';
  * @csspart menu-header - The bar above a submenu, holding the back button and the submenu's name.
  * @csspart menu-live - The inner menu's `live` part, the region screen readers announce its empty and loading messages from.
  * @csspart menu-loading - Shown while the items are loading.
+ * @csspart menu-search-field - The inner menu's filter field, drawn with `filterable`.
  * @csspart menu-surface - The floating panel the menu is drawn on.
  * @csspart menu-title - The name of the submenu that is shown.
  * @csspart poster - An entry's poster image, if it has one.

package/dist/video-playlist/menu/video-playlist-menu.js

@@ -84,7 +84,7 @@ let HelixHeadlessVideoPlaylistMenu = class HelixHeadlessVideoPlaylistMenu extend
     renderMenu() {
         return html `<${this.tag('menu')} part="menu"
     exportparts="back: menu-back, back-mark: menu-back-mark, empty: menu-empty, header: menu-header,
-      live: menu-live, loading: menu-loading, surface: menu-surface, title: menu-title" label=${this.label} placement=${this.placement}
+      live: menu-live, loading: menu-loading, search-field: menu-search-field, surface: menu-surface, title: menu-title" label=${this.label} placement=${this.placement}
       @toggle=${this.heardToggle}>
       <slot name="trigger" slot="trigger">
         <button

package/dist/video-playlist/root/video-playlist-root.js

@@ -47,8 +47,16 @@ let HelixHeadlessVideoPlaylist = class HelixHeadlessVideoPlaylist extends MixinC
             if (event.defaultPrevented) {
                 return;
             }
+            const value = event.detail.value;
+            const player = this.player;
+            if (value === this.active) {
+                if (player && player.paused !== false) {
+                    void Promise.resolve(player.play()).catch(() => { });
+                }
+                return;
+            }
             this.chased = true;
-            this.requestActive(event.detail.value, 'press');
+            this.requestActive(value, 'press');
         };
         this.handleFocusIn = (event) => {
             const entry = event.target;
@@ -259,6 +267,12 @@ let HelixHeadlessVideoPlaylist = class HelixHeadlessVideoPlaylist extends MixinC
         if (changed.has('shuffle') && !this.shuffle) {
             this.dealt = undefined;
         }
+        if (this.active === '' && this.childrenKnown) {
+            const opening = this.resolveActive(this.items);
+            if (opening) {
+                this.active = opening.value;
+            }
+        }
     }
     updated(changed) {
         super.updated?.(changed);

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

@@ -8,6 +8,12 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * `const row: VirtualListRenderer<Person> = (person) => person.name`.
  */
 export type VirtualListRenderer<Item = unknown> = (item: Item, index: number) => unknown;
+/**
+ * Draws one section's header, for a list given `sectionField`, given the
+ * section's name and its place among the sections. Returns anything Lit
+ * renders.
+ */
+export type VirtualListSectionRenderer = (name: string, index: number) => unknown;
 /** Where `scrollToIndex` puts an item, and how it gets there. */
 export interface VirtualListScrollOptions {
     /**
@@ -55,12 +61,26 @@ 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.
  *
+ * **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.
+ *
+ * **Sections.** `section-field` names the field of each item that says which
+ * section it is in, and the list draws a header before each section's items,
+ * as React Aria's list box sections do. Each section is an element with the
+ * `group` role, named by its header, which is its first child and carries
+ * `data-header`, so your stylesheet styles it, such as with `position:
+ * sticky`. A section starts wherever the field changes, so give the items in
+ * order. The window counts the headers with the items, and a section the
+ * window starts inside is drawn with its header. `renderSection` draws a
+ * header of your own.
+ *
  * **Keyboard.** The list is one tab stop.
  *
  * | 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. |
+ * | 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. |
  * | A letter or a word | Moves to the next item whose text starts with what you typed. |
@@ -153,6 +173,7 @@ export interface VirtualListRange {
  * @csspart viewport - The scrolling box. On this tier, it needs only a block size.
  *
  * @cssstate empty - While the list has read its items and holds none.
+ * @cssstate horizontal - While the list runs across, with `orientation="horizontal"`.
  * @cssstate loading - While `loading` is set.
  */
 export declare class HelixHeadlessVirtualList extends HelixElement {
@@ -247,6 +268,13 @@ export declare class HelixHeadlessVirtualList extends HelixElement {
      * follows the box as it resizes, which `columns` then does not decide.
      */
     minColumnWidth: number;
+    /**
+     * 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.
+     */
+    orientation: 'horizontal' | 'vertical';
     /**
      * Draws one item into its row, given the item and its index. Set it as a
      * property.
@@ -256,6 +284,20 @@ export declare class HelixHeadlessVirtualList extends HelixElement {
      * and place in the set. Where it is unset, the row `<template>` is used.
      */
     renderItem: VirtualListRenderer<any> | undefined;
+    /**
+     * Draws each section's header, given its name and its place among the
+     * sections, for a list given `section-field`. Set it as a property. Where
+     * it is unset, the header is the name as text.
+     */
+    renderSection: VirtualListSectionRenderer | undefined;
+    /**
+     * The field of each item that names its section, as a key or a path of
+     * keys. Set, the items are drawn in sections: a header, then the items, in
+     * an element with the `group` role that the header names. A section starts
+     * wherever the field changes, so give the items in order. A list of one
+     * column only.
+     */
+    sectionField: string;
     /**
      * What a press does to the items already chosen: `toggle` adds or takes out
      * the item, and `replace` selects it alone and lets the arrow keys carry the
@@ -358,6 +400,14 @@ export declare class HelixHeadlessVirtualList extends HelixElement {
     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. */
+    private get horizontal();
+    /** The sections and the items they were read from, kept until either changes. */
+    private sectionsRead;
+    /** The sections `section-field` divides the items into, in a list of one column. */
+    private get sections();
     /**
      * Scrolls the list to show the item at `index`.
      *
@@ -443,6 +493,8 @@ export declare class HelixHeadlessVirtualList extends HelixElement {
     private isDisabled;
     /** The item a row element drew, for an element that is one of the rows. */
     private indexOf;
+    /** Whether a node is one of the rows: a child, or a child of a section. */
+    private isRow;
     /** The row that holds the tab stop for item `index`, where it is drawn. */
     private rowFor;
     /**
@@ -541,7 +593,23 @@ export declare class HelixHeadlessVirtualList extends HelixElement {
      * buttons are in the tab order, and those of every other row wait.
      */
     private place;
-    /** The spacers' heights: the window's, with the line kept for focus taking its own room. */
+    /** The sections the rows were last placed in. */
+    private placedSections;
+    /** 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. */
+    private readonly sectionId;
+    /**
+     * The section elements a pass draws rows into, by section, for the
+     * sections of the wanted items: each a `group` named by its header, which
+     * is its first child. The ones no wanted item is in leave, and all of them
+     * do when the sections change.
+     */
+    private groups;
+    /**
+     * The spacers' sizes: the window's, with the line kept for focus taking its
+     * own room, and so do the headers drawn with their sections from outside it.
+     */
     private spacerSizes;
     protected render(): TemplateResult;
 }

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

@@ -11,6 +11,13 @@ import { holdControls, releaseControls } from '../controls.js';
 import { fillHoles, keyOf, textsOf } from '../fill.js';
 import { skipDisabled, stepIndex } from '../keys.js';
 import { drawPlan, itemsOf, stopAfter } from '../plan.js';
+import { entryOf, headOf, itemsIn, sectionAt, sectionsOf } from '../sections.js';
+let sectionCount = 0;
+const nextSectionId = () => {
+    sectionCount += 1;
+    return `virtual-list-${sectionCount}`;
+};
+const ROWS = ':scope > [data-index], :scope > [data-section] > [data-index]';
 let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixElement {
     constructor() {
         super(...arguments);
@@ -26,6 +33,8 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
         this.loadingLabel = 'Loading more';
         this.measured = false;
         this.minColumnWidth = 0;
+        this.orientation = 'vertical';
+        this.sectionField = '';
         this.selectionBehavior = 'toggle';
         this.textField = '';
         this.value = '';
@@ -41,9 +50,12 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
         });
         this.virtualize = new VirtualizeController(this, {
             container: () => this.partNamed('viewport'),
-            count: () => Math.ceil(this.data.length / this.across),
+            count: () => this.sections
+                ? this.data.length + this.sections.starts.length
+                : Math.ceil(this.data.length / this.across),
             estimate: () => this.estimate,
             gap: () => this.space,
+            horizontal: () => this.horizontal,
             measured: () => this.measured,
             rows: () => this.lines(),
         });
@@ -94,13 +106,23 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
             }
             const count = this.data.length;
             const { first, last } = this.virtualize.visible();
-            const stepped = stepIndex(event.key, at, count, last - first - 1, {
+            const forward = isRtl(this) ? 'ArrowLeft' : 'ArrowRight';
+            const key = !this.horizontal
+                ? event.key
+                : event.key === forward
+                    ? 'ArrowDown'
+                    : event.key === 'ArrowLeft' || event.key === 'ArrowRight'
+                        ? 'ArrowUp'
+                        : event.key === 'ArrowDown' || event.key === 'ArrowUp'
+                            ? ''
+                            : event.key;
+            const stepped = stepIndex(key, at, count, last - first - 1, {
                 across: this.across,
-                forward: isRtl(this) ? 'ArrowLeft' : 'ArrowRight',
+                forward,
             });
             const next = stepped === undefined
                 ? undefined
-                : skipDisabled(event.key, at, stepped, count, (one) => this.isDisabled(one), this.across);
+                : skipDisabled(key, at, stepped, count, (one) => this.isDisabled(one), this.across);
             if (next === undefined) {
                 if (stepped !== undefined) {
                     event.preventDefault();
@@ -122,7 +144,7 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
                 return;
             }
             const path = event.composedPath();
-            const row = path.find((node) => node instanceof HTMLElement && node.parentElement === this);
+            const row = path.find((node) => this.isRow(node));
             const at = this.indexOf(row ?? null);
             if (at === undefined) {
                 return;
@@ -143,7 +165,7 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
         };
         this.handleFocusIn = (event) => {
             let node = event.target;
-            while (node && node.parentNode !== this) {
+            while (node && node !== this && !this.isRow(node)) {
                 node = node.parentNode;
             }
             const index = this.indexOf(node);
@@ -152,6 +174,7 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
             }
             this.requestUpdate();
         };
+        this.sectionId = nextSectionId();
     }
     static { this.words = 'helix-virtual-list'; }
     get range() {
@@ -186,7 +209,32 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
         this.widthWatch.observe(viewport);
     }
     itemsOn(lines) {
-        return itemsOf(lines, this.across, this.data.length);
+        const sections = this.sections;
+        return sections
+            ? itemsIn(sections, lines, this.data.length)
+            : itemsOf(lines, this.across, this.data.length);
+    }
+    lineOf(at) {
+        const sections = this.sections;
+        return sections ? entryOf(sections, at) : Math.floor(at / this.across);
+    }
+    get horizontal() {
+        return this.orientation === 'horizontal' && this.across === 1;
+    }
+    get sections() {
+        const data = this.data;
+        if (this.sectionField === '' || data.length === 0 || this.across !== 1) {
+            return undefined;
+        }
+        const read = this.sectionsRead;
+        if (read?.data !== data || read.field !== this.sectionField) {
+            this.sectionsRead = {
+                data,
+                field: this.sectionField,
+                sections: sectionsOf(data, this.sectionField),
+            };
+        }
+        return this.sectionsRead?.sections;
     }
     scrollToIndex(index, options = {}) {
         const count = this.data.length;
@@ -194,14 +242,14 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
             return;
         }
         const at = Math.max(0, Math.min(Math.trunc(index), count - 1));
-        this.virtualize.reveal(Math.floor(at / this.across), 0, options);
+        this.virtualize.reveal(this.lineOf(at), 0, options);
         this.virtualize.measure();
     }
     get data() {
         return this.items ?? this.rows;
     }
     drawn() {
-        return [...this.querySelectorAll(':scope > [data-index]')].map((element) => ({
+        return [...this.querySelectorAll(ROWS)].map((element) => ({
             element,
             index: Number(element.dataset.index),
         }));
@@ -209,6 +257,13 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
     lines() {
         const across = this.across;
         const drawn = this.drawn();
+        const sections = this.sections;
+        if (sections) {
+            return [
+                ...drawn.map(({ element, index }) => ({ element, index: entryOf(sections, index) })),
+                ...[...this.querySelectorAll(':scope > [data-section] > [data-entry]')].map((element) => ({ element, index: Number(element.dataset.entry) })),
+            ];
+        }
         return across === 1
             ? drawn
             : drawn
@@ -226,6 +281,9 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
             this.measuredAcross = across;
             this.virtualize.forget();
         }
+        if (this.hasUpdated && (changed.has('orientation') || changed.has('sectionField'))) {
+            this.virtualize.forget();
+        }
         if (this.hasUpdated) {
             if (changed.has('items')) {
                 this.keepPlace(changed.get('items'));
@@ -245,10 +303,13 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
         if (!same(by, 0) || !same(now.length - 1, was.length - 1)) {
             return;
         }
-        if (by % this.across === 0) {
+        if (this.sections) {
+            this.virtualize.shift(this.lineOf(by) - 1);
+        }
+        else if (by % this.across === 0) {
             this.virtualize.shift(by / this.across);
         }
-        for (const row of this.querySelectorAll(':scope > [data-index]')) {
+        for (const row of this.querySelectorAll(ROWS)) {
             row.dataset.index = String(Number(row.dataset.index) + by);
         }
         this.active += by;
@@ -324,6 +385,7 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
         super.updated?.(changed);
         this.toggleState('empty', this.readFor !== undefined && this.data.length === 0);
         this.toggleState('loading', this.loading);
+        this.toggleState('horizontal', this.horizontal);
         this.watchWidth();
         const was = this.virtualize.window;
         this.virtualize.measure();
@@ -376,14 +438,18 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
         return this.disabledKeys !== '' && this.disabled.has(this.keyAt(at));
     }
     indexOf(node) {
-        if (!(node instanceof HTMLElement) || node.parentElement !== this) {
+        if (!this.isRow(node)) {
             return undefined;
         }
         const index = node.dataset.index;
         return index === undefined ? undefined : Number(index);
     }
+    isRow(node) {
+        const parent = node instanceof HTMLElement ? node.parentElement : null;
+        return (parent === this || (parent?.parentElement === this && parent.hasAttribute('data-section')));
+    }
     rowFor(index) {
-        return this.querySelector(`:scope > [data-index="${index}"]`);
+        return ([...this.querySelectorAll(ROWS)].find((row) => row.dataset.index === String(index)) ?? null);
     }
     keyAt(at) {
         return keyOf(this.data[at], at, this.keyField);
@@ -437,7 +503,7 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
     async focusIndex(index) {
         this.active = index;
         this.focusing = index;
-        this.virtualize.reveal(Math.floor(index / this.across));
+        this.virtualize.reveal(this.lineOf(index));
         this.virtualize.measure();
         this.requestUpdate();
         try {
@@ -451,7 +517,7 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
     focusedIndex() {
         const root = this.getRootNode();
         let node = root.activeElement;
-        while (node && node.parentElement !== this) {
+        while (node && node !== this && !this.isRow(node)) {
             node = node.parentElement;
         }
         const index = node instanceof HTMLElement ? node.dataset.index : undefined;
@@ -518,10 +584,20 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
         const onScreen = this.range.first;
         if (this.hasUpdated) {
             const spacers = this.spacerSizes();
-            this.partNamed('before')?.style.setProperty('block-size', `${spacers.before}px`);
-            this.partNamed('after')?.style.setProperty('block-size', `${spacers.after}px`);
-        }
-        const children = [...this.children].filter((child) => child !== template && child instanceof HTMLElement && !child.hasAttribute('slot'));
+            const size = this.horizontal ? 'inline-size' : 'block-size';
+            this.partNamed('before')?.style.setProperty(size, `${spacers.before}px`);
+            this.partNamed('after')?.style.setProperty(size, `${spacers.after}px`);
+        }
+        const sections = this.sections;
+        const regroup = sections !== this.placedSections;
+        this.placedSections = sections;
+        const children = [
+            ...[...this.children].filter((child) => child !== template &&
+                child instanceof HTMLElement &&
+                !child.hasAttribute('slot') &&
+                !child.hasAttribute('data-section')),
+            ...this.querySelectorAll(':scope > [data-section] > [data-index]'),
+        ];
         const plan = drawPlan({
             across: this.across,
             count,
@@ -529,7 +605,7 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
             first,
             kept: this.keptIndex(),
             last,
-            redraw: (this.filledBy === undefined) !== (this.renderItem === undefined),
+            redraw: regroup || (this.filledBy === undefined) !== (this.renderItem === undefined),
         });
         const drawn = new Map();
         for (const child of children) {
@@ -541,26 +617,34 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
             }
             drawn.set(index, [...(drawn.get(index) ?? []), child]);
         }
-        const refill = this.filledFrom !== this.data || this.filledBy !== this.renderItem;
+        const refill = this.filledFrom !== this.data ||
+            this.filledBy !== this.renderItem ||
+            this.headedBy !== this.renderSection;
         this.filledFrom = this.data;
         this.filledBy = this.renderItem;
+        this.headedBy = this.renderSection;
+        const groups = this.groups(sections, plan.wanted, regroup, refill);
         const fresh = new Set();
-        let anchor = drawn.values().next().value?.[0] ?? null;
+        const anchors = new Map();
         for (const at of plan.wanted) {
+            const parent = (sections && groups.get(sectionAt(sections, at))) || this;
+            if (!anchors.has(parent)) {
+                anchors.set(parent, parent.querySelector(':scope > [data-index]'));
+            }
             const group = drawn.get(at);
             if (group) {
                 if (refill) {
                     this.fill(group, at);
                     fresh.add(at);
                 }
-                anchor = group.at(-1).nextElementSibling;
+                anchors.set(parent, group.at(-1).nextElementSibling);
                 continue;
             }
             const fragment = this.draw(template, at);
             drawn.set(at, [...fragment.children]);
             this.watchSize([...fragment.children]);
             fresh.add(at);
-            this.insertBefore(fragment, anchor);
+            parent.insertBefore(fragment, anchors.get(parent) ?? null);
         }
         this.active = stopAfter(this.active, plan.wanted, {
             count,
@@ -594,13 +678,100 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
             }, 0);
         }
     }
+    groups(sections, wanted, regroup, refill) {
+        const keep = new Set(sections ? wanted.map((at) => sectionAt(sections, at)) : []);
+        const groups = new Map();
+        for (const group of this.querySelectorAll(':scope > [data-section]')) {
+            const at = Number(group.dataset.section);
+            if (regroup || !keep.has(at)) {
+                this.sizes?.unobserve(group.firstElementChild);
+                group.remove();
+            }
+            else {
+                groups.set(at, group);
+            }
+        }
+        if (!sections) {
+            return groups;
+        }
+        for (const at of [...keep].sort((a, b) => a - b)) {
+            let group = groups.get(at);
+            const fresh = group === undefined;
+            if (!group) {
+                group = document.createElement('div');
+                const header = document.createElement('div');
+                header.id = `${this.sectionId}-${at}`;
+                header.dataset.entry = String(headOf(sections, at));
+                header.setAttribute('data-header', '');
+                group.dataset.section = String(at);
+                group.setAttribute('role', 'group');
+                group.setAttribute('aria-labelledby', header.id);
+                group.append(header);
+                const after = [...groups].find(([other]) => other > at)?.[1] ?? null;
+                this.insertBefore(group, after);
+                groups.set(at, group);
+                this.watchSize([header]);
+            }
+            const header = group.firstElementChild;
+            if (fresh || refill) {
+                const name = sections.names[at] ?? '';
+                if (this.renderSection) {
+                    render(this.renderSection(name, at), header);
+                }
+                else {
+                    header.textContent = name;
+                }
+            }
+            if (this.selectionMode) {
+                header.setAttribute('role', 'presentation');
+            }
+            else {
+                header.removeAttribute('role');
+            }
+            const gap = this.space;
+            group.style.cssText = this.horizontal
+                ? `display: flex; column-gap: ${gap}px`
+                : gap === 0
+                    ? ''
+                    : `display: flex; flex-direction: column; row-gap: ${gap}px`;
+        }
+        return groups;
+    }
     spacerSizes() {
         const kept = this.hasUpdated ? this.keptIndex() : undefined;
-        return this.virtualize.spacers(kept === undefined ? undefined : Math.floor(kept / this.across));
+        const room = this.virtualize.spacers(kept === undefined ? undefined : this.lineOf(kept));
+        const sections = this.sections;
+        if (!sections || !this.hasUpdated) {
+            return room;
+        }
+        const { first, last } = this.virtualize.window;
+        const items = this.itemsOn(this.virtualize.window);
+        const drawnIn = new Set();
+        if (items.last > items.first) {
+            drawnIn.add(sectionAt(sections, items.first));
+        }
+        if (kept !== undefined) {
+            drawnIn.add(sectionAt(sections, kept));
+        }
+        let { after, before } = room;
+        for (const section of drawnIn) {
+            const head = headOf(sections, section);
+            if (head < first) {
+                before = Math.max(0, before - this.virtualize.sizeOf(head));
+            }
+            else if (head >= last) {
+                after = Math.max(0, after - this.virtualize.sizeOf(head));
+            }
+        }
+        return { after, before };
     }
     render() {
         const { after, before } = this.spacerSizes();
         const across = this.across;
+        const horizontal = this.horizontal;
+        const size = horizontal ? 'inline-size' : 'block-size';
+        const flex = horizontal ? '; flex: none' : '';
+        const gap = this.space;
         const empty = this.readFor !== undefined &&
             !this.loading &&
             this.data.length === 0 &&
@@ -612,20 +783,24 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
       aria-multiselectable=${this.selectionMode === 'multiple' ? 'true' : nothing}
       aria-busy=${this.loading ? 'true' : nothing}
       aria-label=${this.label}
+      aria-orientation=${this.selectionMode && horizontal ? 'horizontal' : nothing}
+      style=${horizontal ? 'display: flex' : nothing}
       @scroll=${() => {
             this.virtualize.measure();
             this.report();
         }}
     >
-      <div part="before" style="block-size: ${before}px"></div>
+      <div part="before" style="${size}: ${before}px${flex}"></div>
       <slot
-        style=${across === 1
-            ? this.space === 0
-                ? nothing
-                : `display: flex; flex-direction: column; row-gap: ${this.space}px; padding-block-end: ${this.space}px`
-            : `display: grid; grid-template-columns: repeat(${across}, minmax(0, 1fr))${this.space === 0 ? '' : `; gap: ${this.space}px; padding-block-end: ${this.space}px`}`}
+        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`}`}
       ></slot>
-      <div part="after" style="block-size: ${after}px"></div>
+      <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>
@@ -679,9 +854,18 @@ __decorate([
 __decorate([
     property({ attribute: 'min-column-width', type: Number })
 ], HelixHeadlessVirtualList.prototype, "minColumnWidth", void 0);
+__decorate([
+    property()
+], HelixHeadlessVirtualList.prototype, "orientation", void 0);
 __decorate([
     property({ attribute: false })
 ], HelixHeadlessVirtualList.prototype, "renderItem", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessVirtualList.prototype, "renderSection", void 0);
+__decorate([
+    property({ attribute: 'section-field' })
+], HelixHeadlessVirtualList.prototype, "sectionField", void 0);
 __decorate([
     property({ attribute: 'selection-behavior' })
 ], HelixHeadlessVirtualList.prototype, "selectionBehavior", void 0);