@fusion.dev/helix 0.0.0-dev

package/dist/video/root/video-root.d.ts

@@ -0,0 +1,87 @@
+import { HelixHeadlessVideo } from '@fusion.dev/helix-headless/video';
+import type { CSSResultGroup } from 'lit';
+import '../../icon/index.js';
+import '../../menu/index.js';
+/**
+ * @summary Plays a video, with controls this library draws rather than the
+ * browser's.
+ *
+ * @description
+ * The player is the headless tier's. What this adds is the bar: where it sits, when
+ * it is there, and what the two ranges look like, which is the whole reason to
+ * replace a control set that cannot be styled.
+ *
+ * **The bar is over the picture, not under it.** A bar in the layout would move
+ * everything below the video by its own height and would leave a strip of page
+ * color under a picture that is meant to be the whole of it. Over it, the
+ * video is the component's size and the controls belong to it.
+ *
+ * **It goes when nobody is using it, and comes back for the keyboard.** Hidden
+ * once a playing video has gone `idle-delay` without being touched, shown again
+ * the moment the pointer moves, and shown whenever anything inside it has
+ * focus, which is what keeps it reachable without a pointer. A paused video
+ * keeps its bar, because a reader who stopped it is deciding what to do next.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category media
+ * @documentation https://helix.fusion.dev/components/video
+ *
+ * @cssproperty --video-accent-color - The played part of the scrubber.
+ * @cssproperty --video-aspect-ratio - The shape of the box. Defaults to the
+ * video's own once known, and `16 / 9` until then.
+ * @cssproperty --video-controls-color - The ink on the bar.
+ * @cssproperty --video-radius - The corner it is cut to.
+ * @cssproperty --video-speed-size - How wide the playback speed control is
+ * held, so the row does not move when the number changes.
+ * @cssproperty --video-start-size - Width of the mark that starts it.
+ * @cssproperty --video-well-color - Behind the picture, and in the letterbox bars.
+ *
+ * @property separation - Whether the bar floats on the picture or sits on its own ground.
+ */
+export declare class HelixVideo extends HelixHeadlessVideo {
+    /**
+     * How the control bar sits on the picture.
+     *
+     * **Classified by what it does rather than by what its values were called.**
+     * These were `solid` and `plain` under `appearance`, and `solid` reads like a
+     * fill weight, which is how this came to be listed as emphasis when the axes
+     * were first sorted. It is not: all three states say what the bar sits on,
+     * which is where it separates from the picture.
+     *
+     * Absent is the default and is what a player looks like, and what the
+     * platform's own controls do: they float on a gradient that fades up into the
+     * picture, dark enough to read them against a bright frame and gone entirely
+     * a little higher up. The picture runs edge to edge behind them. It has no
+     * name because it is the resting treatment, and `shadow` was never a declared
+     * value even while an example wrote it: the attribute matched no selector and
+     * fell through to this rule, which is why it appeared to work.
+     *
+     * `filled` gives the controls a bar of their own, which is what a video
+     * embedded in a document usually wants, where the player is a component on a
+     * page rather than the page itself. It stays put rather than fading, because
+     * a bar that is part of the frame would leave a strip of the well behind it.
+     *
+     * `plain` is neither: the controls sit straight on the picture with nothing
+     * behind them. For a consumer who knows their footage, or who is putting
+     * their own ground there.
+     *
+     * A presentation property, so it lives on this tier. The headless element renders
+     * the same bar for all three.
+     *
+     * **Optional rather than defaulted, which is not a style preference.** A
+     * reflecting property with a default writes its attribute onto every host the
+     * moment the element upgrades, including the ones a consumer rendered and did
+     * not touch, and React reads that as a hydration mismatch. The absent
+     * attribute *is* the shadow, which the stylesheet reads as the base rule, so
+     * only the departure has to be named.
+     */
+    separation?: 'filled' | 'plain';
+    static tier: string;
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-video': HelixVideo;
+    }
+}

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

@@ -0,0 +1,61 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { customElement } from '@fusion.dev/helix-core';
+import { HelixHeadlessVideo } from '@fusion.dev/helix-headless/video';
+import { property } from 'lit/decorators.js';
+import '../../icon/index.js';
+import '../../menu/index.js';
+import { styles as glyphStyles } from '../../icon/glyph.css.js';
+import { styles } from './video-root.css.js';
+/**
+ * @summary Plays a video, with controls this library draws rather than the
+ * browser's.
+ *
+ * @description
+ * The player is the headless tier's. What this adds is the bar: where it sits, when
+ * it is there, and what the two ranges look like, which is the whole reason to
+ * replace a control set that cannot be styled.
+ *
+ * **The bar is over the picture, not under it.** A bar in the layout would move
+ * everything below the video by its own height and would leave a strip of page
+ * color under a picture that is meant to be the whole of it. Over it, the
+ * video is the component's size and the controls belong to it.
+ *
+ * **It goes when nobody is using it, and comes back for the keyboard.** Hidden
+ * once a playing video has gone `idle-delay` without being touched, shown again
+ * the moment the pointer moves, and shown whenever anything inside it has
+ * focus, which is what keeps it reachable without a pointer. A paused video
+ * keeps its bar, because a reader who stopped it is deciding what to do next.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category media
+ * @documentation https://helix.fusion.dev/components/video
+ *
+ * @cssproperty --video-accent-color - The played part of the scrubber.
+ * @cssproperty --video-aspect-ratio - The shape of the box. Defaults to the
+ * video's own once known, and `16 / 9` until then.
+ * @cssproperty --video-controls-color - The ink on the bar.
+ * @cssproperty --video-radius - The corner it is cut to.
+ * @cssproperty --video-speed-size - How wide the playback speed control is
+ * held, so the row does not move when the number changes.
+ * @cssproperty --video-start-size - Width of the mark that starts it.
+ * @cssproperty --video-well-color - Behind the picture, and in the letterbox bars.
+ *
+ * @property separation - Whether the bar floats on the picture or sits on its own ground.
+ */
+let HelixVideo = class HelixVideo extends HelixHeadlessVideo {
+    static { this.tier = 'helix-'; }
+    static { this.styles = [glyphStyles, styles]; }
+};
+__decorate([
+    property({ reflect: true })
+], HelixVideo.prototype, "separation", void 0);
+HelixVideo = __decorate([
+    customElement('helix-video')
+], HelixVideo);
+export { HelixVideo };

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

@@ -0,0 +1,3 @@
+export * from './item/video-playlist-item.js';
+export * from './menu/video-playlist-menu.js';
+export * from './root/video-playlist-root.js';

package/dist/video-playlist/index.js

@@ -0,0 +1,3 @@
+export * from './item/video-playlist-item.js';
+export * from './menu/video-playlist-menu.js';
+export * from './root/video-playlist-root.js';

package/dist/video-playlist/item/video-playlist-item.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/video-playlist/item/video-playlist-item.css.js

@@ -0,0 +1,95 @@
+// Generated from src/video-playlist/item/video-playlist-item.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+display: block;
+}
+
+[part="item"] {
+all: unset;
+box-sizing: border-box;
+
+align-items: center;
+background-color: var(--video-playlist-item-background-color, transparent);
+border-radius: var(--helix-radii-sm);
+cursor: pointer;
+display: flex;
+gap: var(--helix-space-sm);
+inline-size: 100%;
+
+padding: var(--helix-space-2xs) var(--helix-space-2xs) var(--helix-space-2xs)
+var(--helix-space-sm);
+position: relative;
+text-align: start;
+transition:
+background-color var(--helix-duration-fast) var(--helix-easing-standard),
+color var(--helix-duration-fast) var(--helix-easing-standard);
+}
+
+:host(:not([disabled])) [part="item"]:hover {
+background-color: color-mix(in oklab, var(--helix-color-foreground) 8%, transparent);
+}
+
+[part="item"]:focus-visible {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: calc(var(--helix-size-focus-offset) * -1);
+}
+
+[part="item"][aria-current="true"] {
+background-color: color-mix(in oklab, var(--helix-color-foreground) 6%, transparent);
+color: var(--helix-color-foreground);
+}
+
+[part="item"][aria-current="true"]::before {
+background-color: var(--helix-color-primary);
+border-radius: var(--helix-radii-full);
+content: "";
+inline-size: var(--helix-border-thick);
+inset-block: var(--helix-space-2xs);
+inset-inline-start: var(--helix-space-2xs);
+position: absolute;
+}
+
+:host([disabled]) [part="item"] {
+cursor: not-allowed;
+opacity: 0.5;
+}
+
+[part="media"] {
+aspect-ratio: 16 / 9;
+border-radius: var(--helix-radii-sm);
+flex: 0 0 auto;
+inline-size: var(--video-playlist-media-size, 5rem);
+overflow: hidden;
+}
+
+[part="media"] ::slotted(*),
+[part="thumbnail"] {
+block-size: 100%;
+display: block;
+inline-size: 100%;
+object-fit: cover;
+}
+
+[part="label"] {
+color: var(--helix-color-foreground);
+display: flex;
+flex-direction: column;
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-sm);
+font-weight: var(--helix-weight-medium);
+gap: var(--helix-space-2xs);
+line-height: var(--helix-leading-tight);
+min-inline-size: 0;
+}
+
+[part="label"] ::slotted([slot="meta"]) {
+color: var(--helix-color-foreground-subtle);
+font-size: var(--helix-text-xs);
+font-weight: var(--helix-weight-regular);
+}
+
+@media (prefers-reduced-motion: reduce) {
+[part="item"] {
+transition: none;
+}
+}`);

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

@@ -0,0 +1,25 @@
+import { HelixHeadlessVideoPlaylistItem } from '@fusion.dev/helix-headless/video-playlist';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary One entry in a video playlist.
+ *
+ * @description
+ * Presentation only: the row, its thumbnail column, and the mark on the one
+ * playing. The base class holds what the entry is and what it announces.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category media
+ * @documentation https://helix.fusion.dev/components/video-playlist
+ *
+ * @cssproperty --video-playlist-item-background-color - Fill behind a row.
+ * @cssproperty --video-playlist-media-size - Width of the thumbnail column.
+ */
+export declare class HelixVideoPlaylistItem extends HelixHeadlessVideoPlaylistItem {
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-video-playlist-item': HelixVideoPlaylistItem;
+    }
+}

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

@@ -0,0 +1,31 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { customElement } from '@fusion.dev/helix-core';
+import { HelixHeadlessVideoPlaylistItem } from '@fusion.dev/helix-headless/video-playlist';
+import { styles } from './video-playlist-item.css.js';
+/**
+ * @summary One entry in a video playlist.
+ *
+ * @description
+ * Presentation only: the row, its thumbnail column, and the mark on the one
+ * playing. The base class holds what the entry is and what it announces.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category media
+ * @documentation https://helix.fusion.dev/components/video-playlist
+ *
+ * @cssproperty --video-playlist-item-background-color - Fill behind a row.
+ * @cssproperty --video-playlist-media-size - Width of the thumbnail column.
+ */
+let HelixVideoPlaylistItem = class HelixVideoPlaylistItem extends HelixHeadlessVideoPlaylistItem {
+    static { this.styles = styles; }
+};
+HelixVideoPlaylistItem = __decorate([
+    customElement('helix-video-playlist-item')
+], HelixVideoPlaylistItem);
+export { HelixVideoPlaylistItem };

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

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

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

@@ -0,0 +1,44 @@
+// Generated from src/video-playlist/menu/video-playlist-menu.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+display: flex;
+flex: 0 0 auto;
+}
+
+[part="trigger"] {
+all: unset;
+
+--icon-size: var(--video-playlist-menu-size, var(--helix-size-icon-tight));
+
+align-items: center;
+border-radius: var(--helix-radii-sm);
+box-sizing: border-box;
+color: var(--video-playlist-menu-color, inherit);
+cursor: pointer;
+display: flex;
+flex: 0 0 auto;
+justify-content: center;
+min-block-size: var(--helix-size-icon-loose);
+min-inline-size: var(--helix-size-icon-loose);
+}
+
+[part="trigger"]:focus-visible {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: var(--helix-size-focus-offset);
+}
+
+[part="entry"] {
+--menu-item-start: var(--video-playlist-menu-poster, calc(var(--helix-size-icon-loose) * 2));
+}
+
+[part="entry"]::part(item) {
+padding-block: var(--helix-space-2xs);
+}
+
+[part="poster"] {
+aspect-ratio: 16 / 9;
+border-radius: var(--helix-radii-sm);
+display: block;
+inline-size: 100%;
+object-fit: cover;
+}`);

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

@@ -0,0 +1,43 @@
+import { HelixHeadlessVideoPlaylistMenu } from '@fusion.dev/helix-headless/video-playlist';
+import type { CSSResultGroup } from 'lit';
+import '../../icon/index.js';
+import '../../menu/index.js';
+/**
+ * @summary The playlist's entries, as a menu inside the player's control bar.
+ *
+ * @description
+ * Presentation only: a control-bar button drawn like the ones beside it, and a
+ * menu that opens over the picture rather than under it. The base class holds
+ * where the playlist is, what the entries are, and what choosing announces.
+ *
+ * The trigger's declarations are `Video`'s control rule written out a second
+ * time, which is not duplication that could be avoided. That rule is
+ * `[part="controls"] :where(a, button)` inside `Video`'s shadow root, and this
+ * element sits in its light DOM: a shadow rule reaches an assigned node only
+ * through `::slotted()` and never reaches into the node's own shadow root at
+ * all. So the button here is two boundaries away from the rule that styles
+ * every button beside it, and the same tokens are what make the two agree.
+ *
+ * Color is inherited rather than named, so the bar's own color arrives on
+ * its own. `--video-playlist-menu-color` is there for the case where it should
+ * not.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category media
+ * @aliases Episode Menu, Queue Menu, Up Next
+ * @documentation https://helix.fusion.dev/components/video-playlist
+ *
+ * @cssproperty --video-playlist-menu-color - Color of the trigger, defaulting to the control bar's.
+ * @cssproperty --video-playlist-menu-poster - Width of an entry's still.
+ * @cssproperty --video-playlist-menu-size - Size of the trigger's glyph.
+ */
+export declare class HelixVideoPlaylistMenu extends HelixHeadlessVideoPlaylistMenu {
+    static tier: string;
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-video-playlist-menu': HelixVideoPlaylistMenu;
+    }
+}

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

@@ -0,0 +1,56 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { customElement } from '@fusion.dev/helix-core';
+import { HelixHeadlessVideoPlaylistMenu } from '@fusion.dev/helix-headless/video-playlist';
+import { styles as glyphStyles } from '../../icon/glyph.css.js';
+import { styles } from './video-playlist-menu.css.js';
+import '../../icon/index.js';
+import '../../menu/index.js';
+/**
+ * @summary The playlist's entries, as a menu inside the player's control bar.
+ *
+ * @description
+ * Presentation only: a control-bar button drawn like the ones beside it, and a
+ * menu that opens over the picture rather than under it. The base class holds
+ * where the playlist is, what the entries are, and what choosing announces.
+ *
+ * The trigger's declarations are `Video`'s control rule written out a second
+ * time, which is not duplication that could be avoided. That rule is
+ * `[part="controls"] :where(a, button)` inside `Video`'s shadow root, and this
+ * element sits in its light DOM: a shadow rule reaches an assigned node only
+ * through `::slotted()` and never reaches into the node's own shadow root at
+ * all. So the button here is two boundaries away from the rule that styles
+ * every button beside it, and the same tokens are what make the two agree.
+ *
+ * Color is inherited rather than named, so the bar's own color arrives on
+ * its own. `--video-playlist-menu-color` is there for the case where it should
+ * not.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category media
+ * @aliases Episode Menu, Queue Menu, Up Next
+ * @documentation https://helix.fusion.dev/components/video-playlist
+ *
+ * @cssproperty --video-playlist-menu-color - Color of the trigger, defaulting to the control bar's.
+ * @cssproperty --video-playlist-menu-poster - Width of an entry's still.
+ * @cssproperty --video-playlist-menu-size - Size of the trigger's glyph.
+ */
+let HelixVideoPlaylistMenu = class HelixVideoPlaylistMenu extends HelixHeadlessVideoPlaylistMenu {
+    /* `glyphStyles` first, and it is not optional. `drawIcon` renders a bare
+       `<svg data-glyph>` with no size of its own, and the only rule that sizes
+       one lives in the icon family's sheet. Without it the glyph came out 24x24
+       inside a 24x24 button, filling it edge to edge beside a 16x16 fullscreen
+       icon: right color, right button, right position, and half again too big.
+       Nothing failed, because a missing rule is not an error. */
+    static { this.tier = 'helix-'; }
+    static { this.styles = [glyphStyles, styles]; }
+};
+HelixVideoPlaylistMenu = __decorate([
+    customElement('helix-video-playlist-menu')
+], HelixVideoPlaylistMenu);
+export { HelixVideoPlaylistMenu };

package/dist/video-playlist/root/video-playlist-root.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

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

@@ -0,0 +1,21 @@
+// Generated from src/video-playlist/root/video-playlist-root.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+display: grid;
+gap: var(--helix-space-md);
+grid-template-columns: var(--video-playlist-layout, 1fr);
+}
+
+[part="items"] {
+display: flex;
+flex-direction: column;
+gap: var(--helix-space-2xs);
+max-block-size: var(--video-playlist-size, 26rem);
+overflow-y: auto;
+}
+
+@media print {
+:host {
+display: none;
+}
+}`);

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

@@ -0,0 +1,26 @@
+import { HelixHeadlessVideoPlaylist } from '@fusion.dev/helix-headless/video-playlist';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary A set of clips and the one player they take turns in.
+ *
+ * @description
+ * Presentation only: the arrangement of the two regions and the scroller the
+ * entries sit in. Everything about which clip is current is the base class.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category media
+ * @aliases Playlist, Queue, Up next
+ * @documentation https://helix.fusion.dev/components/video-playlist
+ *
+ * @cssproperty --video-playlist-layout - Columns for the player and the list.
+ * @cssproperty --video-playlist-size - How tall the list gets before it scrolls.
+ */
+export declare class HelixVideoPlaylist extends HelixHeadlessVideoPlaylist {
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-video-playlist': HelixVideoPlaylist;
+    }
+}

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

@@ -0,0 +1,32 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { customElement } from '@fusion.dev/helix-core';
+import { HelixHeadlessVideoPlaylist } from '@fusion.dev/helix-headless/video-playlist';
+import { styles } from './video-playlist-root.css.js';
+/**
+ * @summary A set of clips and the one player they take turns in.
+ *
+ * @description
+ * Presentation only: the arrangement of the two regions and the scroller the
+ * entries sit in. Everything about which clip is current is the base class.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category media
+ * @aliases Playlist, Queue, Up next
+ * @documentation https://helix.fusion.dev/components/video-playlist
+ *
+ * @cssproperty --video-playlist-layout - Columns for the player and the list.
+ * @cssproperty --video-playlist-size - How tall the list gets before it scrolls.
+ */
+let HelixVideoPlaylist = class HelixVideoPlaylist extends HelixHeadlessVideoPlaylist {
+    static { this.styles = styles; }
+};
+HelixVideoPlaylist = __decorate([
+    customElement('helix-video-playlist')
+], HelixVideoPlaylist);
+export { HelixVideoPlaylist };

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

@@ -0,0 +1 @@
+export * from './root/virtual-list-root.js';

package/dist/virtual-list/index.js

@@ -0,0 +1 @@
+export * from './root/virtual-list-root.js';

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

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

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

@@ -0,0 +1,27 @@
+// Generated from src/virtual-list/root/virtual-list-root.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+display: block;
+}
+
+[part="viewport"] {
+block-size: var(--virtual-list-block-size, 20em);
+
+margin-inline: calc(var(--helix-size-focus-reach) * -1);
+overflow-y: auto;
+overscroll-behavior: contain;
+padding-inline: var(--helix-size-focus-reach);
+}
+
+[part="after"],
+[part="before"] {
+flex: none;
+}
+
+@media print {
+:host {
+box-shadow: none;
+max-block-size: none;
+overflow: visible;
+}
+}`);

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

@@ -0,0 +1,31 @@
+import { HelixHeadlessVirtualList } from '@fusion.dev/helix-headless/virtual-list';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary Renders the rows of a long set that are on screen, and no others.
+ *
+ * @description
+ * The styled tier adds the scrolling box's own treatment and nothing else. Rows
+ * are the consumer's markup in the light DOM, so they are styled by the
+ * consumer's stylesheet the way any other content is, and this must not reach
+ * into them: a rule here for a row would be a design system styling markup it
+ * did not write.
+ *
+ * @category layout
+ * @since 0.1.0
+ * @status experimental
+ * @documentation https://helix.fusion.dev/components/virtual-list
+ *
+ * @csspart after - The space standing in for rows below the window.
+ * @csspart before - The space standing in for rows above the window.
+ * @csspart viewport - The scrolling box.
+ *
+ * @cssproperty --virtual-list-block-size - How tall the scrolling box is.
+ */
+export declare class HelixVirtualList extends HelixHeadlessVirtualList {
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-virtual-list': HelixVirtualList;
+    }
+}

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

@@ -0,0 +1,37 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { customElement } from '@fusion.dev/helix-core';
+import { HelixHeadlessVirtualList } from '@fusion.dev/helix-headless/virtual-list';
+import { styles } from './virtual-list-root.css.js';
+/**
+ * @summary Renders the rows of a long set that are on screen, and no others.
+ *
+ * @description
+ * The styled tier adds the scrolling box's own treatment and nothing else. Rows
+ * are the consumer's markup in the light DOM, so they are styled by the
+ * consumer's stylesheet the way any other content is, and this must not reach
+ * into them: a rule here for a row would be a design system styling markup it
+ * did not write.
+ *
+ * @category layout
+ * @since 0.1.0
+ * @status experimental
+ * @documentation https://helix.fusion.dev/components/virtual-list
+ *
+ * @csspart after - The space standing in for rows below the window.
+ * @csspart before - The space standing in for rows above the window.
+ * @csspart viewport - The scrolling box.
+ *
+ * @cssproperty --virtual-list-block-size - How tall the scrolling box is.
+ */
+let HelixVirtualList = class HelixVirtualList extends HelixHeadlessVirtualList {
+    static { this.styles = styles; }
+};
+HelixVirtualList = __decorate([
+    customElement('helix-virtual-list')
+], HelixVirtualList);
+export { HelixVirtualList };