@fusion.dev/helix 0.145.0 → 0.146.0

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

@@ -22,13 +22,17 @@ import type { CSSResultGroup } from 'lit';
  * @documentation https://fusion.dev/helix/components/tabs
  *
  * @slot - The tabs, as direct children of this element.
+ * @slot indicator - A mark of your own, drawn inside the `indicator` part, where the selected tab's place and size reach it.
  * @slot panels - The panels, as direct children of this element. Panels inside a wrapper are not paired with tabs, because pairing reads only the direct children.
  *
+ * @csspart indicator - The mark that moves to the selected tab. It carries the selected tab's place and size as `--indicator-x`, `--indicator-y`, `--indicator-inline-size` and `--indicator-block-size`.
  * @csspart panels - The panel container.
  * @csspart tabs - The tab list.
  *
  * @cssproperty --tabs-gap - The space between tabs.
  * @cssproperty --tabs-indicator-color - The fill of the mark on the current tab: the bar under `underlined`, and the pill otherwise.
+ * @cssproperty --tabs-indicator-radius - The corners of the mark.
+ * @cssproperty --tabs-indicator-shadow - The shadow under the mark, which the pill and `segmented` draw.
  * @cssproperty --tabs-indicator-thickness - The height of the bar under `underlined`.
  * @cssproperty --tabs-rule-color - The color of the rule under the row in `underlined`.
  */

package/dist/tabs/tab/tab.css.js

@@ -11,12 +11,12 @@ block-size: var(--_tab-height, var(--tabs-tab-block-size, var(--helix-size-contr
 border: none;
 
 border-block-end: var(--helix-border-thick) solid transparent;
-border-radius: var(--_tab-radius, var(--helix-radii-none));
+border-radius: var(--tabs-tab-radius, var(--_tab-radius, var(--helix-radii-none)));
 color: var(--tabs-tab-color, var(--helix-color-foreground-subtle));
 cursor: pointer;
 font: inherit;
-font-size: var(--helix-text-sm);
-font-weight: var(--helix-weight-medium);
+font-size: var(--tabs-tab-font-size, var(--helix-text-sm));
+font-weight: var(--tabs-tab-font-weight, var(--helix-weight-medium));
 display: inline-flex;
 
 inline-size: var(--_tab-inline-size, auto);
@@ -31,21 +31,28 @@ color var(--helix-duration-fast) var(--helix-easing-standard);
 white-space: nowrap;
 }
 
-[part="tab"]:hover:not(:disabled) {
-background-color: color-mix(in oklab, var(--helix-color-foreground) 5%, transparent);
-color: var(--helix-color-foreground);
+[part="tab"]:hover:not(:disabled, [aria-disabled="true"]) {
+background-color: var(
+--tabs-tab-hover-background-color,
+color-mix(in oklab, var(--helix-color-foreground) 5%, transparent)
+);
+color: var(--tabs-tab-hover-color, var(--helix-color-foreground));
 }
 
 :host(:state(selected)) [part="tab"],
 :host(:state(selected)) [part="tab"]:hover {
-background-color: var(--_tab-selected-surface, transparent);
+background-color: var(
+--tabs-tab-selected-background-color,
+var(--_tab-selected-surface, transparent)
+);
 box-shadow: var(--_tab-selected-shadow, none);
 color: var(--tabs-tab-selected-color, var(--helix-color-foreground));
 }
 
-[part="tab"]:disabled {
+[part="tab"]:disabled,
+[part="tab"][aria-disabled="true"] {
 cursor: not-allowed;
-opacity: 0.5;
+opacity: var(--tabs-tab-disabled-opacity, 0.5);
 }
 
 [part="tab"]:focus-visible {

package/dist/tabs/tab/tab.d.ts

@@ -19,7 +19,14 @@ import type { CSSResultGroup } from 'lit';
  *
  * @cssproperty --tabs-tab-block-size - The height of a tab. `segmented` sizes its tabs to the track and does not read it.
  * @cssproperty --tabs-tab-color - The label color of a tab that is not current.
+ * @cssproperty --tabs-tab-disabled-opacity - How faint a disabled tab is drawn.
+ * @cssproperty --tabs-tab-font-size - The size of a tab's label.
+ * @cssproperty --tabs-tab-font-weight - The weight of a tab's label.
+ * @cssproperty --tabs-tab-hover-background-color - The wash under the pointer.
+ * @cssproperty --tabs-tab-hover-color - The label color under the pointer.
  * @cssproperty --tabs-tab-padding-inline - The space either side of the label.
+ * @cssproperty --tabs-tab-radius - The corners of a tab, which the hover wash takes.
+ * @cssproperty --tabs-tab-selected-background-color - The fill of the current tab itself, under the moving mark.
  * @cssproperty --tabs-tab-selected-color - The label color of the current tab.
  */
 export declare class HelixTab extends HelixHeadlessTab {

package/dist/tag/group/tag-group.css.js

@@ -3,4 +3,10 @@ export const styles = createSheet(`:host {
 display: flex;
 flex-wrap: wrap;
 gap: var(--tag-group-gap, var(--helix-space-2xs));
+}
+
+[part="empty"]:focus-visible {
+border-radius: var(--helix-radii-sm);
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: var(--helix-size-focus-offset);
 }`);

package/dist/text/clamp.d.ts

@@ -1,8 +1,11 @@
 /**
- * The line count `lines` asks for, as the declaration that clamps it, or
+ * The line count `lines` asks for, as the declarations that clamp it, or
  * `undefined` where it is no whole number above zero.
  *
  * Written on the part inside the shadow root, so any count works with no rule
- * per number, and the server renders it with the rest of the template.
+ * per number, and the server renders it with the rest of the template. The
+ * box and the overflow it needs are written with the count, so a count that
+ * is no count leaves the text as it was, with nothing cut off. A page's
+ * `::part(text)` rule still wins over each of them.
  */
 export declare const clampOf: (lines: number | undefined) => string | undefined;

package/dist/text/clamp.js

@@ -1 +1,3 @@
-export const clampOf = (lines) => Number.isInteger(lines) && lines > 0 ? `-webkit-line-clamp: ${lines}` : undefined;
+export const clampOf = (lines) => Number.isInteger(lines) && lines > 0
+    ? `display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: ${lines}`
+    : undefined;

package/dist/text/root/text-root.css.js

@@ -186,12 +186,6 @@ display: block;
 min-inline-size: 0;
 }
 
-:host([lines]) [part="text"] {
--webkit-box-orient: vertical;
-display: -webkit-box;
-overflow: hidden;
-}
-
 :host([text-align="start"]) {
 text-align: start;
 }

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

@@ -87,7 +87,8 @@ export declare class HelixText extends HelixElement {
      * Lays the text out as a block, because a line count needs a width to break
      * against. The whole text stays in the page, so a screen reader and a search
      * still read all of it. Set it as an attribute, such as `lines="1"` for a
-     * single line.
+     * single line. A count that is not a whole number above zero, such as `0`,
+     * cuts nothing off.
      */
     lines?: number;
     /**

package/dist/textarea/root/textarea-root.css.js

@@ -25,6 +25,33 @@ color: var(--helix-color-foreground-subtle);
 flex: 0 0 auto;
 }
 
+[part="clear"] {
+--icon-size: var(--helix-size-icon-tight);
+all: unset;
+
+align-items: center;
+align-self: flex-start;
+border-radius: var(--helix-radii-sm);
+box-sizing: border-box;
+color: var(--helix-color-foreground-muted);
+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);
+transition: color var(--helix-duration-fast) var(--helix-easing-standard);
+}
+
+[part="clear"]:hover {
+color: var(--helix-color-foreground);
+}
+
+[part="clear"]:focus-visible {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: var(--helix-size-focus-offset);
+}
+
 :host([auto-grow]) [part="control"] {
 overflow: hidden;
 resize: none;

package/dist/time-input/root/time-input-root.css.js

@@ -69,6 +69,18 @@ padding-inline: var(--helix-space-none);
 position: absolute;
 }
 
+::slotted([slot="panel-header"]) {
+display: block;
+margin-block-end: var(--helix-space-sm);
+margin-inline: var(--helix-space-sm);
+}
+
+::slotted([slot="panel-footer"]) {
+display: block;
+margin-block-start: var(--helix-space-sm);
+margin-inline: var(--helix-space-sm);
+}
+
 @media (prefers-reduced-motion: reduce) {
 [part="field"],
 [part="trigger"] {

package/dist/time-picker/root/time-picker-root.css.js

@@ -109,7 +109,7 @@ transition: background-color var(--helix-duration-fast) var(--helix-easing-stand
 }
 
 [part="column"] [part~="option"]:not([disabled]):hover::part(label),
-[part="column"] [part~="option"][data-active]::part(label) {
+[part="column"] [part~="option"]:state(active)::part(label) {
 background-color: var(--helix-color-surface-sunken);
 }
 

package/dist/toast/item/toast-item.css.js

@@ -84,6 +84,16 @@ grid-area: 1 / 2;
 min-inline-size: 0;
 }
 
+::slotted([slot="heading"]) {
+display: block;
+font-weight: var(--helix-weight-semibold);
+}
+
+::slotted([slot="description"]) {
+color: var(--helix-color-foreground-muted);
+display: block;
+}
+
 [part="actions"] {
 display: flex;
 gap: var(--helix-space-2xs);

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

@@ -23,6 +23,7 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --toast-inset - Distance from the edges of the window.
  */
 export declare class HelixToast extends HelixHeadlessToast {
+    static tier: string;
     static styles: CSSResultGroup;
 }
 declare global {

package/dist/toast/root/toast-root.js

@@ -8,6 +8,7 @@ import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessToast } from '@fusion.dev/helix-headless/toast';
 import { styles } from './toast-root.css.js';
 let HelixToast = class HelixToast extends HelixHeadlessToast {
+    static { this.tier = 'helix-'; }
     static { this.styles = styles; }
 };
 HelixToast = __decorate([

package/dist/toggle/group/toggle-group.css.js

@@ -34,7 +34,7 @@ align-items: start;
 [part="track"] {
 --_toggle-height: calc(var(--helix-size-control) - var(--helix-space-2xs) * 2);
 
---_toggle-radius: var(--helix-radii-sm);
+--_toggle-radius: var(--toggle-group-item-radius, var(--helix-radii-sm));
 
 --_indicator-surface: var(--helix-color-surface-raised);
 display: inline-flex;
@@ -51,7 +51,10 @@ padding: var(--helix-space-2xs);
 :host(:not([separation])) [part="track"],
 :host([separation="outlined"]) [part="track"] {
 
---_toggle-radius: calc(var(--helix-radii-sm) - var(--helix-border-thin));
+--_toggle-radius: var(
+--toggle-group-item-radius,
+calc(var(--toggle-group-radius, var(--helix-radii-sm)) - var(--helix-border-thin))
+);
 
 --_toggle-height: calc(
 var(--helix-size-control) -
@@ -62,9 +65,9 @@ var(--helix-border-thin) *
 );
 
 --_indicator-surface: var(--helix-color-surface-overlay);
-background-color: var(--helix-color-surface-sunken);
-border: var(--helix-border-thin) solid var(--helix-color-border);
-border-radius: var(--helix-radii-sm);
+background-color: var(--toggle-group-background-color, var(--helix-color-surface-sunken));
+border: var(--helix-border-thin) solid var(--toggle-group-border-color, var(--helix-color-border));
+border-radius: var(--toggle-group-radius, var(--helix-radii-sm));
 padding: var(--helix-space-2xs);
 }
 
@@ -79,7 +82,7 @@ flex: 1 1 auto;
 background-color: var(--toggle-group-indicator-color, var(--_indicator-surface));
 block-size: var(--indicator-block-size, 0);
 border-radius: var(--_toggle-radius, var(--helix-radii-sm));
-box-shadow: var(--helix-shadow-sm);
+box-shadow: var(--toggle-group-indicator-shadow, var(--helix-shadow-sm));
 inline-size: var(--indicator-inline-size, 0);
 inset-block-start: 0;
 inset-inline-start: 0;
@@ -116,7 +119,7 @@ flex: 1 1 auto;
 :host([selection-mode="multiple"]) ::slotted(helix-toggle:state(pressed)) {
 background-color: var(--toggle-group-indicator-color, var(--_indicator-surface));
 border-radius: var(--_toggle-radius, var(--helix-radii-sm));
-box-shadow: var(--helix-shadow-sm);
+box-shadow: var(--toggle-group-indicator-shadow, var(--helix-shadow-sm));
 }
 
 :host([orientation="vertical"]) [part="track"] {

package/dist/toggle/group/toggle-group.d.ts

@@ -26,7 +26,12 @@ import type { CSSResultGroup } from 'lit';
  *
  * @csspart indicator - The moving marker behind the selected item.
  *
- * @cssproperty --toggle-group-indicator-color - The fill of the moving marker.
+ * @cssproperty --toggle-group-background-color - The groove behind the items, when the group is framed.
+ * @cssproperty --toggle-group-border-color - The edge of the groove, when the group is framed.
+ * @cssproperty --toggle-group-indicator-color - The fill of the moving marker, and of each pressed item under `selection-mode="multiple"`.
+ * @cssproperty --toggle-group-indicator-shadow - The shadow of the moving marker and of each pressed item.
+ * @cssproperty --toggle-group-item-radius - Corner radius of each item, the marker, and a pressed item's fill. Without it, the curve stays concentric with the groove.
+ * @cssproperty --toggle-group-radius - Corner radius of the groove, when the group is framed.
  */
 export declare class HelixToggleGroup extends HelixHeadlessToggleGroup {
     /**

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

@@ -16,6 +16,12 @@ import type { CSSResultGroup } from 'lit';
  * @slot - The item's label.
  *
  * @csspart item - The radio button.
+ *
+ * @cssproperty --toggle-item-color - Text color of an item that is not chosen. Read by the base
+ *   layer, which styles the `item` part.
+ * @cssproperty --toggle-item-color-selected - Text color of the chosen item, and of each pressed
+ *   item in a group that allows several.
+ * @cssproperty --toggle-item-padding-inline - Space either side of an item's label.
  */
 export declare class HelixToggle extends HelixHeadlessToggle {
     static styles: CSSResultGroup;

package/dist/toolbar/root/toolbar-root.css.js

@@ -19,6 +19,7 @@ display: inline-flex;
 [part="toolbar"] {
 align-items: center;
 background-color: var(--toolbar-background-color, transparent);
+border: var(--toolbar-border-width, 0) solid var(--toolbar-border-color, transparent);
 border-radius: var(--toolbar-radius, var(--helix-radii-none));
 display: flex;
 gap: var(--toolbar-gap, var(--helix-space-2xs));

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

@@ -18,6 +18,8 @@ import type { CSSResultGroup } from 'lit';
  * @csspart toolbar - The toolbar container.
  *
  * @cssproperty --toolbar-background-color - The fill behind the controls. Transparent unless set.
+ * @cssproperty --toolbar-border-color - The color of the toolbar's edge, once it has a width.
+ * @cssproperty --toolbar-border-width - The width of the toolbar's edge. None unless set.
  * @cssproperty --toolbar-gap - The space between controls.
  * @cssproperty --toolbar-padding - The space between the toolbar's edge and its controls.
  * @cssproperty --toolbar-radius - The corner radius of the toolbar's fill.

package/dist/tooltip/root/tooltip-root.css.js

@@ -11,10 +11,10 @@ gap: var(--helix-space-2xs);
 
 background-color: var(--tooltip-background-color, var(--helix-color-surface-inverse));
 border: none;
-border-radius: var(--helix-radii-sm);
-color: var(--helix-color-foreground-inverse);
+border-radius: var(--tooltip-radius, var(--helix-radii-sm));
+color: var(--tooltip-color, var(--helix-color-foreground-inverse));
 font-family: var(--helix-font-sans);
-font-size: var(--helix-text-xs);
+font-size: var(--tooltip-font-size, var(--helix-text-xs));
 
 font-weight: var(--helix-weight-regular);
 inline-size: max-content;
@@ -23,7 +23,7 @@ margin: var(--helix-space-none);
 max-inline-size: var(--tooltip-max-inline-size, 16rem);
 
 opacity: 0;
-padding: var(--helix-space-2xs) var(--helix-space-xs);
+padding: var(--tooltip-padding, var(--helix-space-2xs) var(--helix-space-xs));
 position: fixed;
 scale: 0;
 
@@ -63,7 +63,7 @@ background-color: var(--tooltip-background-color, var(--helix-material-transluce
 :host([material="frosted"]) [part~="tooltip"],
 :host([material="glass"]) [part~="tooltip"] {
 border: var(--helix-border-thin) solid var(--helix-color-border);
-color: var(--helix-color-foreground);
+color: var(--tooltip-color, var(--helix-color-foreground));
 }
 
 [part~="tooltip"][data-placement^="top"] {

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

@@ -20,7 +20,11 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --tooltip-arrow-size - The size of the arrow on the bubble's edge.
  * @cssproperty --tooltip-backdrop - The blur behind a `frosted` or `glass` bubble.
  * @cssproperty --tooltip-background-color - The fill of the bubble.
+ * @cssproperty --tooltip-color - The color of the bubble's words.
+ * @cssproperty --tooltip-font-size - The size of the bubble's words.
  * @cssproperty --tooltip-max-inline-size - The widest the bubble grows before its text wraps.
+ * @cssproperty --tooltip-padding - The space between the bubble's edge and its words.
+ * @cssproperty --tooltip-radius - The bubble's corner radius.
  */
 export declare class HelixTooltip extends HelixHeadlessTooltip {
     /**

package/dist/tree/item/tree-item.css.js

@@ -13,8 +13,10 @@ outline: none;
 [part="row"] {
 
 align-items: center;
-border-radius: var(--helix-radii-sm);
-color: var(--helix-color-foreground-muted);
+
+background-color: var(--_tree-row-fill, transparent);
+border-radius: var(--tree-row-radius, var(--helix-radii-sm));
+color: var(--_tree-row-ink, var(--tree-row-color, var(--helix-color-foreground-muted)));
 cursor: pointer;
 display: flex;
 
@@ -50,7 +52,10 @@ var(--_tree-reserve, calc(var(--_tree-chevron) + var(--helix-space-2xs)))
 }
 
 [part="row"]:has([part="toggle"]) {
-color: var(--_tree-heading-ink, var(--helix-color-foreground-muted));
+color: var(
+--_tree-row-ink,
+var(--_tree-heading-ink, var(--tree-row-color, var(--helix-color-foreground-muted)))
+);
 font-size: var(--_tree-heading-text, var(--_tree-text, var(--helix-text-sm)));
 font-weight: var(--helix-weight-medium);
 letter-spacing: var(--_tree-heading-tracking, var(--helix-tracking-normal));
@@ -65,13 +70,18 @@ slot[name="children"]::slotted(*) {
 }
 
 [part="row"]:hover {
-background-color: var(--helix-color-surface-raised);
-color: var(--helix-color-foreground);
+background-color: var(--tree-row-hover-background-color, var(--helix-color-surface-raised));
+color: var(--tree-row-hover-color, var(--helix-color-foreground));
 }
 
 :host(:state(selected)) [part="row"] {
-background-color: var(--helix-color-surface-sunken);
-color: var(--helix-color-foreground);
+background-color: var(--tree-row-selected-background-color, var(--helix-color-surface-sunken));
+color: var(--tree-row-selected-color, var(--helix-color-foreground));
+}
+
+:host(:state(checked)) [part="row"] {
+--_tree-row-fill: var(--tree-row-checked-background-color, transparent);
+--_tree-row-ink: var(--tree-row-checked-color);
 }
 
 [part="item"]:focus-visible [part="row"],
@@ -214,12 +224,12 @@ inline-size: 80%;
 
 :host([disabled]) [part="row"] {
 cursor: not-allowed;
-opacity: 0.5;
+opacity: var(--tree-row-disabled-opacity, 0.5);
 }
 
 :host([disabled]) [part="row"]:hover {
 background-color: transparent;
-color: var(--helix-color-foreground-muted);
+color: var(--tree-row-color, var(--helix-color-foreground-muted));
 }
 
 :host(:state(loading)) [part="toggle"],

package/dist/tree/item/tree-item.d.ts

@@ -39,6 +39,15 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --tree-chevron-size - Size of the chevron, and the gutter a leaf reserves.
  * @cssproperty --tree-gap - Space between rows.
  * @cssproperty --tree-indent - Indent added per level.
+ * @cssproperty --tree-row-checked-background-color - Fill of a checked row, in a tree with `selection-mode="multiple"`. Unset, the box alone marks it.
+ * @cssproperty --tree-row-checked-color - Text color of a checked row, in a tree with `selection-mode="multiple"`.
+ * @cssproperty --tree-row-color - Text color of a row at rest.
+ * @cssproperty --tree-row-disabled-opacity - How faint a disabled row is drawn.
+ * @cssproperty --tree-row-hover-background-color - Fill of a row under the pointer.
+ * @cssproperty --tree-row-hover-color - Text color of a row under the pointer.
+ * @cssproperty --tree-row-radius - Corners of a row's fill.
+ * @cssproperty --tree-row-selected-background-color - Fill of the chosen row, in a tree of one choice.
+ * @cssproperty --tree-row-selected-color - Text color of the chosen row, in a tree of one choice.
  * @cssproperty --tree-row-size - Minimum height of a row, so rows with and without an icon match.
  */
 export declare class HelixTreeItem extends HelixHeadlessTreeItem {

package/dist/trend/root/trend-root.css.js

@@ -18,20 +18,18 @@ color: var(--trend-color, var(--_trend-color));
 --icon-size: var(--trend-icon-size, 1em);
 }
 
-slot[name="icon"]::slotted(*) {
+slot[name$="icon"]::slotted(*) {
 --icon-size: var(--trend-icon-size, 1em);
 
 block-size: var(--trend-icon-size, 1em);
 inline-size: var(--trend-icon-size, 1em);
 }
 
-:host([direction="up"][good="up"]),
-:host([direction="down"][good="down"]) {
+:host(:state(better)) {
 --_trend-color: var(--trend-better-color, var(--helix-color-success));
 }
 
-:host([direction="up"][good="down"]),
-:host([direction="down"][good="up"]) {
+:host(:state(worse)) {
 --_trend-color: var(--trend-worse-color, var(--helix-color-danger));
 }
 

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

@@ -13,7 +13,7 @@ import type { CSSResultGroup } from 'lit';
  * no surface for material, and no area for a wash. The text weight comes from
  * `Text` and the size from the region.
  *
- * The meaning axis is derived: `direction` and `good` resolve to success,
+ * The meaning axis is derived: `movement` and `good` resolve to success,
  * danger, or muted, so you state the metric's polarity once. There is no
  * `tone`, because a declared tone could disagree with the arrow.
  *
@@ -27,7 +27,7 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --trend-better-color - Color of a move that `good` says is an improvement.
  * @cssproperty --trend-color - Color of the arrow. Setting it overrides the color that `good` sets.
  * @cssproperty --trend-gap - Space between the arrow, the metric and the label.
- * @cssproperty --trend-icon-size - Size of the arrow, or of a glyph in the `icon` slot.
+ * @cssproperty --trend-icon-size - Size of the arrow, or of a glyph in one of the icon slots.
  * @cssproperty --trend-label-color - Color of the label.
  * @cssproperty --trend-neutral-color - Color of a trend that `good` does not judge, or one that did not move.
  * @cssproperty --trend-worse-color - Color of a move that `good` says is a setback.

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

@@ -17,6 +17,20 @@ outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
 outline-offset: calc(var(--helix-size-focus-offset) * -1);
 }
 
+::slotted([aria-selected="true"]) {
+background-color: var(
+--virtual-list-selected-background-color,
+var(--helix-color-primary-subtle)
+);
+}
+
+[part="loading"] {
+color: var(--virtual-list-loading-color, var(--helix-color-foreground-muted));
+font-size: var(--helix-text-sm);
+padding: var(--virtual-list-loading-padding, var(--helix-space-sm));
+text-align: center;
+}
+
 [part="after"],
 [part="before"] {
 flex: none;

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

@@ -7,7 +7,9 @@ import type { CSSResultGroup } from 'lit';
  * The styled tier styles the scrolling box and draws the focus ring on the row
  * holding focus. Rows are your markup in the light DOM, so your stylesheet
  * styles them the same as any other content, and a rule of yours on a row wins
- * over the ring.
+ * over the ring. While `loading` is set, a muted, centered row after the last
+ * item says "Loading more". In a list with `selection-mode`, a chosen row takes
+ * the fill a chosen List row takes.
  *
  * @category layout
  * @since 0.1.0
@@ -16,9 +18,13 @@ import type { CSSResultGroup } from 'lit';
  *
  * @csspart after - The space that stands in for the rows below the rendered ones.
  * @csspart before - The space that stands in for the rows above the rendered ones.
+ * @csspart loading - The row after the last item while `loading` is set.
  * @csspart viewport - The scrolling box.
  *
  * @cssproperty --virtual-list-block-size - How tall the scrolling box is.
+ * @cssproperty --virtual-list-loading-color - The color of the text in the row drawn while `loading` is set.
+ * @cssproperty --virtual-list-loading-padding - The space around the text in the row drawn while `loading` is set.
+ * @cssproperty --virtual-list-selected-background-color - The fill behind a chosen row, in a list with `selection-mode`.
  */
 export declare class HelixVirtualList extends HelixHeadlessVirtualList {
     static styles: CSSResultGroup;