@fusion.dev/helix 0.150.0 → 0.151.0

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

@@ -16,6 +16,11 @@ color-mix(in oklab, var(--_announcement-tint) 20%, var(--_announcement-ground))
 in oklab,
 var(--_announcement-tint) 40%,
 var(--_announcement-ground)
-);}[part="content"] {flex: 1 1 auto;min-inline-size: 0;text-align: var(--announcement-text-align, center);}:host([dismissible]) [part="content"] {padding-inline: calc(var(--helix-size-icon) + var(--helix-space-2xs) * 2 + var(--helix-space-xs));}[part="actions"] slot::slotted(*) {margin-inline-start: var(--helix-space-md);}[part="actions"] {align-items: center;display: flex;flex: 0 0 auto;gap: var(--helix-space-xs);}[part="dismiss"] {all: unset;box-sizing: border-box;block-size: calc(var(--helix-size-icon) + var(--helix-space-2xs) * 2);inline-size: calc(var(--helix-size-icon) + var(--helix-space-2xs) * 2);border-radius: var(--helix-radii-sm);color: var(--helix-color-foreground-muted);cursor: pointer;display: inline-flex;flex: 0 0 auto;place-content: center;place-items: center;position: absolute;inset-inline-end: var(--announcement-inset, var(--helix-space-lg));transition:
+);}[part="content"] {flex: 1 1 auto;min-inline-size: 0;text-align: var(--announcement-text-align, center);}:host([dismissible]) [part="content"] {padding-inline: calc(var(--helix-size-icon) + var(--helix-space-2xs) * 2 + var(--helix-space-xs));}[part="actions"] slot::slotted(*) {margin-inline-start: var(--helix-space-md);}[part="actions"] {align-items: center;display: flex;flex: 0 0 auto;gap: var(--helix-space-xs);}:host([dismissible]) [part="actions"] {margin-inline-end: calc(
+var(--helix-size-icon) +
+var(--helix-space-2xs) *
+2 +
+var(--helix-space-xs)
+);}[part="dismiss"] {all: unset;box-sizing: border-box;block-size: calc(var(--helix-size-icon) + var(--helix-space-2xs) * 2);inline-size: calc(var(--helix-size-icon) + var(--helix-space-2xs) * 2);border-radius: var(--helix-radii-sm);color: var(--helix-color-foreground-muted);cursor: pointer;display: inline-flex;flex: 0 0 auto;place-content: center;place-items: center;position: absolute;inset-inline-end: var(--announcement-inset, var(--helix-space-lg));transition:
 background-color var(--helix-duration-fast) var(--helix-easing-standard),
 color var(--helix-duration-fast) var(--helix-easing-standard);}[part="dismiss"]:hover {background-color: color-mix(in oklab, var(--helix-color-foreground) 8%, transparent);color: var(--helix-color-foreground);}[part="dismiss"] svg {block-size: var(--helix-size-icon);inline-size: var(--helix-size-icon);}[part="dismiss"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="actions"][data-empty] {display: none;}:host(:state(waiting)) {display: none;}@media print {:host {background-color: transparent;}}`);

package/dist/area-chart/root/area-chart-root.css.js

@@ -3,6 +3,7 @@ export const styles = createSheet(`:host {display: grid;gap: var(--area-chart-ga
 in oklab,
 var(--chart-series) var(--area-chart-fill-strength, 55%),
 var(--helix-color-background)
-);stroke: none;}:host([overlap]) [part="area"] {fill: var(--chart-series);fill-opacity: var(--area-chart-overlap-opacity, 0.3);}[part="line"] {stroke: var(--chart-series);stroke-linejoin: round;stroke-width: var(--area-chart-width, var(--_chart-stroke));vector-effect: non-scaling-stroke;}[part="baseline"] {stroke: var(--helix-color-border);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke;}[part="gridline"] {stroke: var(--area-chart-gridline-color, var(--helix-color-border));stroke-opacity: 0.7;stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke;}[part="guide"] {stroke: var(--helix-color-foreground-muted);stroke-dasharray: 3 3;stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke;}[part="labels"] {display: grid;grid-auto-columns: 1fr;grid-auto-flow: column;}[part="label"] {color: var(--helix-color-foreground-muted);font-size: var(--helix-text-xs);overflow: hidden;text-align: center;text-overflow: ellipsis;white-space: nowrap;}[part="summary"] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;margin: var(--helix-space-none);overflow: hidden;position: absolute;white-space: nowrap;}[part="area"],
+);stroke: none;}:host([overlap]) [part="area"] {fill: var(--chart-series);fill-opacity: var(--area-chart-overlap-opacity, 0.3);}[part="line"] {stroke: var(--chart-series);stroke-linejoin: round;stroke-width: var(--area-chart-width, var(--_chart-stroke));vector-effect: non-scaling-stroke;}[part="baseline"] {stroke: var(--helix-color-border);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke;}[part="gridline"] {stroke: var(--area-chart-gridline-color, var(--helix-color-border));stroke-opacity: 0.7;stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke;}[part="guide"] {stroke: var(--helix-color-foreground-muted);stroke-dasharray: 3 3;stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke;}[part="labels"] {display: grid;grid-auto-columns: 1fr;grid-auto-flow: column;}[part="label"] {color: var(--helix-color-foreground-muted);font-size: var(--helix-text-xs);overflow: hidden;text-align: center;text-overflow: ellipsis;white-space: nowrap;}[part="axis"] {color: var(--helix-color-foreground-subtle);font-size: var(--helix-text-xs);font-variant-numeric: tabular-nums;inline-size: calc(var(--area-chart-axis, 3ch) + 1ch);pointer-events: none;position: relative;}[part="tick"] {inset-inline-end: 0;position: absolute;translate: 0 -50%;white-space: nowrap;}:host([value-axis]) {grid-template-columns: auto 1fr;}:host([value-axis]) [part="axis"] {grid-column: 1;grid-row: 1;}:host([value-axis]) [part="plot"],
+:host([value-axis]) [part="labels"] {grid-column: 2;}[part="summary"] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;margin: var(--helix-space-none);overflow: hidden;position: absolute;white-space: nowrap;}[part="area"],
 [part="line"] {transition: d var(--helix-duration-normal) var(--helix-easing-decelerate);}@starting-style {[part="area"],
 [part="line"] {opacity: 0;}}@media print {:host {print-color-adjust: exact;}}`);

package/dist/bar-chart/root/bar-chart-root.css.js

@@ -8,7 +8,9 @@ y var(--helix-duration-normal) var(--helix-easing-decelerate);}@starting-style {
 in oklab,
 var(--bar-chart-secondary) 45%,
 var(--helix-color-foreground)
-);color: var(--_bar-chart-axis-ink, var(--helix-color-foreground-subtle));}:host([secondary]) [part="axis"][data-axis="secondary"] {grid-column: 3;grid-row: 1;}:host([secondary]) [part="labels"] {grid-column: 2;grid-row: 2;}:host([orientation="horizontal"][secondary]) {grid-template-columns: auto 1fr;grid-template-rows: auto 1fr auto;}:host([orientation="horizontal"][secondary]) [part="axis"][data-axis="secondary"] {grid-column: 2;grid-row: 1;}:host([orientation="horizontal"][secondary]) [part="labels"] {grid-column: 1;grid-row: 2;}:host([orientation="horizontal"][secondary]) [part="plot"] {grid-column: 2;grid-row: 2;}:host([orientation="horizontal"][secondary]) [part="axis"][data-axis="primary"] {grid-column: 2;grid-row: 3;}[part="axis"] {color: var(--helix-color-foreground-subtle);font-size: var(--helix-text-xs);font-variant-numeric: tabular-nums;pointer-events: none;position: relative;}:host(:not([orientation="horizontal"])) [part="axis"] {inline-size: var(--bar-chart-axis, 3ch);}:host([orientation="horizontal"]) [part="axis"] {block-size: 1lh;}[part="tick"] {position: absolute;}:host(:not([orientation="horizontal"])) [part="tick"] {inset-inline-end: 0;translate: 0 -50%;}:host([orientation="horizontal"]) [part="tick"] {translate: -50% 0;}:host([orientation="horizontal"]:dir(rtl)) [part="tick"] {translate: 50% 0;}:host(:not([orientation="horizontal"])) [part="axis"][data-axis="secondary"] [part="tick"] {inset-inline-end: auto;inset-inline-start: 0;}[part="bar"] {fill-opacity: calc(var(--_bar-chart-area, 1) * var(--_bar-chart-through, 1));stroke-opacity: var(--_bar-chart-through, 1);}[part="bar"][data-emphasis="outlined"],
+);color: var(--_bar-chart-axis-ink, var(--helix-color-foreground-subtle));}:host([secondary]) [part="axis"][data-axis="secondary"] {grid-column: 3;grid-row: 1;}:host([secondary]) [part="labels"] {grid-column: 2;grid-row: 2;}:host([orientation="horizontal"][secondary]) {grid-template-columns: auto 1fr;grid-template-rows: auto 1fr auto;}:host([orientation="horizontal"][secondary]) [part="axis"][data-axis="secondary"] {grid-column: 2;grid-row: 1;}:host([orientation="horizontal"][secondary]) [part="labels"] {grid-column: 1;grid-row: 2;}:host([orientation="horizontal"][secondary]) [part="plot"] {grid-column: 2;grid-row: 2;}:host([orientation="horizontal"][secondary]) [part="axis"][data-axis="primary"] {grid-column: 2;grid-row: 3;}:host([value-axis]:not([secondary]):not([orientation="horizontal"])) {grid-template-columns: auto 1fr;}:host([value-axis]:not([secondary]):not([orientation="horizontal"]))
+[part="axis"][data-axis="primary"] {grid-column: 1;grid-row: 1;}:host([value-axis]:not([secondary]):not([orientation="horizontal"])) [part="plot"],
+:host([value-axis]:not([secondary]):not([orientation="horizontal"])) [part="labels"] {grid-column: 2;}:host([value-axis][orientation="horizontal"]:not([secondary])) {grid-template-rows: 1fr auto;}:host([value-axis][orientation="horizontal"]:not([secondary])) [part="axis"][data-axis="primary"] {grid-column: 2;grid-row: 2;}[part="axis"] {color: var(--helix-color-foreground-subtle);font-size: var(--helix-text-xs);font-variant-numeric: tabular-nums;pointer-events: none;position: relative;}:host(:not([orientation="horizontal"])) [part="axis"] {inline-size: var(--bar-chart-axis, 3ch);}:host([orientation="horizontal"]) [part="axis"] {block-size: 1lh;}[part="tick"] {position: absolute;}:host(:not([orientation="horizontal"])) [part="tick"] {inset-inline-end: 0;translate: 0 -50%;}:host([orientation="horizontal"]) [part="tick"] {translate: -50% 0;}:host([orientation="horizontal"]:dir(rtl)) [part="tick"] {translate: 50% 0;}:host(:not([orientation="horizontal"])) [part="axis"][data-axis="secondary"] [part="tick"] {inset-inline-end: auto;inset-inline-start: 0;}[part="bar"] {fill-opacity: calc(var(--_bar-chart-area, 1) * var(--_bar-chart-through, 1));stroke-opacity: var(--_bar-chart-through, 1);}[part="bar"][data-emphasis="outlined"],
 :host([emphasis="outlined"]) [part="bar"]:not([data-emphasis]) {--_bar-chart-foot: var(--_bar-chart-base);fill: var(--_bar-chart-shade);stroke: var(--_bar-chart-series);stroke-width: var(--bar-chart-bar-stroke, var(--helix-border-thick));vector-effect: non-scaling-stroke;}[part="bar"][data-emphasis="subtle"],
 :host([emphasis="subtle"]) [part="bar"]:not([data-emphasis]) {--_bar-chart-area: 0.2;--_bar-chart-foot: var(--_bar-chart-base);stroke: var(--_bar-chart-series);stroke-width: var(--bar-chart-bar-stroke, var(--helix-border-thick));vector-effect: non-scaling-stroke;}[part="bar"] {--_bar-chart-shade: color-mix(
 in oklab,

package/dist/chat/composer/chat-composer.css.js

@@ -1,5 +1,6 @@
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {display: block;}[part="composer"] {background-color: var(--chat-composer-background-color, var(--helix-color-surface));border: var(--chat-composer-border-width, var(--helix-border-thin)) solid
-var(--helix-color-border);border-radius: var(--helix-radii-md);display: grid;gap: var(--helix-space-2xs);padding: var(--helix-space-xs);}[part="composer"]:focus-within {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: 0;}[part="field"] {background-color: transparent;border: 0;color: var(--helix-color-foreground);field-sizing: content;font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);line-height: var(--helix-leading-normal);max-block-size: var(--chat-composer-max-block-size, 12rem);padding-block: var(--helix-space-2xs);padding-inline: calc(var(--helix-space-sm) - var(--helix-space-xs) - var(--helix-border-thin));resize: none;}[part="field"]:focus-visible {outline: none;}[part="tools"] {align-items: center;display: flex;gap: var(--helix-space-2xs);justify-content: flex-end;}[part="start"],
+var(--helix-color-border);border-radius: var(--helix-radii-md);display: grid;gap: var(--helix-space-2xs);padding: var(--helix-space-xs);}[part="composer"]:focus-within {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: 0;}:host(:state(invalid)) [part="composer"],
+:host(:state(invalid)) [part="composer"]:focus-within {border-color: var(--helix-color-danger);outline-color: var(--helix-color-danger);}[part="field"] {background-color: transparent;border: 0;color: var(--helix-color-foreground);field-sizing: content;font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);line-height: var(--helix-leading-normal);max-block-size: var(--chat-composer-max-block-size, 12rem);padding-block: var(--helix-space-2xs);padding-inline: calc(var(--helix-space-sm) - var(--helix-space-xs) - var(--helix-border-thin));resize: none;}[part="field"]:focus-visible {outline: none;}[part="tools"] {align-items: center;display: flex;gap: var(--helix-space-2xs);justify-content: flex-end;}[part="start"],
 [part="end"] {--helix-size-control: var(--helix-size-control-sm);--helix-size-control-loose: calc(var(--helix-size-control) * 1.2);--helix-size-control-tight: calc(var(--helix-size-control) * 0.8);--helix-size-icon: var(--helix-size-icon-sm);--helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);--helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);align-items: center;display: flex;gap: var(--helix-space-2xs);}[part="start"] {margin-inline-end: auto;}[part="end"] {margin-inline-end: var(--helix-space-2xs);}[part="start"][data-empty],
 [part="end"][data-empty] {display: none;}[part="send"] {align-items: center;background-color: transparent;block-size: calc(var(--helix-size-control-tight) - var(--helix-space-2xs));border: 0;border-radius: var(--helix-radii-sm);color: var(--helix-color-foreground-muted);cursor: pointer;display: inline-flex;inline-size: calc(var(--helix-size-control-tight) - var(--helix-space-2xs));justify-content: center;padding: var(--helix-space-none);}[part="mark"] {block-size: var(--helix-size-icon-tight);inline-size: var(--helix-size-icon-tight);}[part="send"]:hover:not(:disabled) {background-color: color-mix(in oklab, var(--helix-color-foreground) 8%, transparent);color: var(--helix-color-foreground);}[part="send"]:disabled {cursor: not-allowed;opacity: 0.5;}[part="send"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}`);

package/dist/data-table/root/data-table-root.d.ts

@@ -28,7 +28,9 @@ import '../../table/index.js';
  * @documentation https://fusion.dev/helix/components/data-table
  *
  * @slot - The columns, as `TableColumn` elements.
+ * @slot empty - Content shown when there are no rows to show and none are loading, such as a picture and a link. Falls back to `empty-text`, which the live region still says.
  * @slot footer - Content below the grid. It replaces the built-in pagination.
+ * @slot loading - Content shown while the rows load, such as a spinner. Falls back to `loading-text`, which the live region still says.
  * @slot toolbar - Content above the grid, such as a search field or actions.
  *
  * @csspart cell - One cell.

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

@@ -7,4 +7,4 @@ var(--divider-padding, var(--helix-space-none))
 --divider-padding-start,
 var(--divider-padding, var(--helix-space-none))
 );padding-inline: var(--helix-space-none);}:host(:state(vertical)) {align-self: stretch;display: inline-flex;flex-direction: column;}:host(:state(vertical)) [part="content"] {margin-block: var(--divider-content-gap, var(--helix-space-sm));margin-inline: var(--helix-space-none);}[part="line"] {background-color: var(--divider-color, var(--helix-color-border));}:host(:not(:state(vertical))) [part="line"] {block-size: var(--_divider-thickness);flex: 1 1 0;}:host(:state(vertical)) {block-size: var(--divider-length, auto);}:host(:state(vertical)) [part="line"] {flex: 1 1 0;inline-size: var(--_divider-thickness);min-block-size: 1em;}:host([content-placement="start"]) [part="line"]:has(+ [part="content"]:not([data-empty])),
-:host([content-placement="end"]) [part="content"]:not([data-empty]) + [part="line"] {flex: 0 0 var(--divider-content-offset, var(--helix-space-lg));}@media print {:host {print-color-adjust: economy;}}`);
+:host([content-placement="end"]) [part="content"]:not([data-empty]) + [part="line"] {flex: 0 0 var(--divider-content-offset, var(--helix-space-lg));}@media (forced-colors: active) {[part="line"] {background-color: CanvasText;forced-color-adjust: none;}}@media print {:host {print-color-adjust: economy;}}`);

package/dist/element-events.generated.js

@@ -3,8 +3,10 @@ registerElementEvents({
     'helix-accordion-item': ['helix-before-close', 'helix-before-open', 'toggle'],
     'helix-announcement': ['helix-dismiss'],
     'helix-app-header': ['helix-scrolled'],
+    'helix-area-chart': ['helix-reading-change', 'helix-reading-press'],
     'helix-aura': ['helix-aura-fallback'],
     'helix-avatar': ['error', 'load'],
+    'helix-bar-chart': ['helix-reading-change', 'helix-reading-press'],
     'helix-button': ['helix-press'],
     'helix-button-group': ['change', 'helix-before-change'],
     'helix-callout': ['helix-dismiss'],
@@ -133,6 +135,7 @@ registerElementEvents({
         'helix-before-open',
         'toggle',
     ],
+    'helix-line-chart': ['helix-reading-change', 'helix-reading-press'],
     'helix-list': [
         'change',
         'helix-action',
@@ -217,6 +220,7 @@ registerElementEvents({
     'helix-sandbox-preview': ['helix-console', 'helix-resize'],
     'helix-sandbox-source': ['helix-before-edit', 'helix-caret', 'helix-edit'],
     'helix-sandbox-terminal': ['change', 'helix-before-change'],
+    'helix-scatter-chart': ['helix-reading-change', 'helix-reading-press'],
     'helix-scroll-area': ['scroll', 'scrollend'],
     'helix-select': [
         'change',

package/dist/line-chart/root/line-chart-root.css.js

@@ -1,5 +1,6 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: grid;position: relative;gap: var(--line-chart-gap, var(--helix-space-2xs));}[part="plot"] {position: relative;block-size: var(--line-chart-block-size, 12em);}[part="plot"] svg {block-size: 100%;inline-size: 100%;overflow: visible;}[part~="line"] {stroke-linecap: round;stroke-linejoin: round;stroke-width: var(--line-chart-width, var(--_chart-stroke));vector-effect: non-scaling-stroke;}[part="area"] {opacity: calc(var(--line-chart-area-opacity, 0.16) * var(--helix-material-opacity));stroke: none;}[part="baseline"] {stroke: var(--helix-color-border);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke;}[part="labels"] {display: grid;grid-auto-columns: 1fr;grid-auto-flow: column;}[part="label"] {color: var(--helix-color-foreground-muted);font-size: var(--helix-text-xs);overflow: hidden;text-align: center;text-overflow: ellipsis;white-space: nowrap;}[part~="line"] {stroke: var(--chart-series);}[part="terminus"] {color: var(--chart-series);}[part~="marker"] {background-color: var(--chart-series);block-size: var(--line-chart-marker-size, 6px);border-radius: var(--helix-radii-full);box-shadow: 0 0 0 var(--helix-border-thin)
+export const styles = createSheet(`:host {display: grid;position: relative;gap: var(--line-chart-gap, var(--helix-space-2xs));}[part="plot"] {position: relative;block-size: var(--line-chart-block-size, 12em);}[part="plot"] svg {block-size: 100%;inline-size: 100%;overflow: visible;}[part~="line"] {stroke-linecap: round;stroke-linejoin: round;stroke-width: var(--line-chart-width, var(--_chart-stroke));vector-effect: non-scaling-stroke;}[part="area"] {opacity: calc(var(--line-chart-area-opacity, 0.16) * var(--helix-material-opacity));stroke: none;}[part="baseline"] {stroke: var(--helix-color-border);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke;}[part="labels"] {display: grid;grid-auto-columns: 1fr;grid-auto-flow: column;}[part="label"] {color: var(--helix-color-foreground-muted);font-size: var(--helix-text-xs);overflow: hidden;text-align: center;text-overflow: ellipsis;white-space: nowrap;}[part="axis"] {color: var(--helix-color-foreground-subtle);font-size: var(--helix-text-xs);font-variant-numeric: tabular-nums;inline-size: calc(var(--line-chart-axis, 3ch) + 1ch);pointer-events: none;position: relative;}[part="tick"] {inset-inline-end: 0;position: absolute;translate: 0 -50%;white-space: nowrap;}:host([value-axis]) {grid-template-columns: auto 1fr;}:host([value-axis]) [part="axis"] {grid-column: 1;grid-row: 1;}:host([value-axis]) [part="plot"],
+:host([value-axis]) [part="labels"] {grid-column: 2;}[part~="line"] {stroke: var(--chart-series);}[part="terminus"] {color: var(--chart-series);}[part~="marker"] {background-color: var(--chart-series);block-size: var(--line-chart-marker-size, 6px);border-radius: var(--helix-radii-full);box-shadow: 0 0 0 var(--helix-border-thin)
 var(--line-chart-marker-ring-color, var(--helix-color-background));inline-size: var(--line-chart-marker-size, 6px);pointer-events: none;position: absolute;translate: -50% -50%;}:host(:dir(rtl)) [part~="marker"] {translate: 50% -50%;}:host([terminus="ring"]) [part="svg"] {mask-composite: intersect;mask-image: var(--_line-chart-holes);}[part="area"] {fill: var(--chart-series);}[part="guide"] {stroke: var(--helix-color-foreground-muted);stroke-dasharray: 3 3;stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke;}[part~="line"] {stroke-dasharray: 1000;transition:
 d var(--helix-duration-normal) var(--helix-easing-decelerate),
 stroke-dashoffset var(--helix-duration-slow) var(--helix-easing-decelerate);}@starting-style {[part~="line"] {stroke-dashoffset: 1000;}}[part~="line-dashed"] {stroke-dasharray: var(--line-chart-dash, 6 4);}@starting-style {[part~="line-dashed"] {stroke-dashoffset: 0;}}[part="area"] {transition:

package/dist/orb/root/orb-root.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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, HelixElement, hostAria, PaintGateController, readColor, words, wordsConverter, } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, hostAria, PaintGateController, readColorAlpha, words, wordsConverter, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { styles as liveStyles } from '../../shared/live/live.css.js';
@@ -14,7 +14,7 @@ const MORPH_NEAR = 380;
 const MORPH_REACH = 580;
 const LIGHT_Y = 0.36;
 const STILL_PHASE = 1.4;
-const GRAY = [128, 128, 128];
+const GRAY = [128, 128, 128, 1];
 let HelixOrb = class HelixOrb extends HelixElement {
     constructor() {
         super(...arguments);
@@ -188,8 +188,8 @@ let HelixOrb = class HelixOrb extends HelixElement {
         const params = still ? paramsFor(this.state) : this.paramsNow();
         this.phase += dt * params.rate;
         const painted = getComputedStyle(ctx.canvas);
-        const ink = readColor(painted.color) ?? GRAY;
-        const ground = readColor(painted.textDecorationColor) ?? GRAY;
+        const ink = readColorAlpha(painted.color) ?? GRAY;
+        const ground = readColorAlpha(painted.textDecorationColor) ?? GRAY;
         const mesh = meshFor(size);
         const even = evenSphere(mesh.lanes, mesh.segs);
         const spin = this.phase * 0.9;
@@ -244,7 +244,12 @@ let HelixOrb = class HelixOrb extends HelixElement {
                 continue;
             }
             const t = Math.min(1, Math.max(0, dot.shade));
-            ctx.fillStyle = `rgba(${Math.round(ink[0] + (ground[0] - ink[0]) * t)},${Math.round(ink[1] + (ground[1] - ink[1]) * t)},${Math.round(ink[2] + (ground[2] - ink[2]) * t)},${dot.alpha})`;
+            const alpha = ink[3] + (ground[3] - ink[3]) * t;
+            if (alpha <= 0) {
+                continue;
+            }
+            const channel = (at) => Math.round((ink[at] * ink[3] + (ground[at] * ground[3] - ink[at] * ink[3]) * t) / alpha);
+            ctx.fillStyle = `rgba(${channel(0)},${channel(1)},${channel(2)},${dot.alpha * alpha})`;
             ctx.beginPath();
             ctx.arc(dot.x, dot.y, Math.max(0.3, dot.radius), 0, Math.PI * 2);
             ctx.fill();

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

@@ -6,7 +6,7 @@ var(--helix-color-background) 0 var(--helix-space-xs),
 transparent var(--helix-space-xs) calc(var(--helix-space-xs) * 2)
 );scale: 1 1;translate: 0;}}:host([shape="ring"]) {display: inline-grid;place-items: center;row-gap: var(--progress-label-gap, var(--helix-space-2xs));}:host([shape="ring"]) [part="track"] {--_ring-stroke: var(--progress-ring-width, var(--helix-size-progress));background-color: transparent;block-size: var(--progress-ring-size, 4rem);grid-area: 1 / 1;inline-size: var(--progress-ring-size, 4rem);rotate: -90deg;}:host([shape="ring"]) [part="groove"],
 :host([shape="ring"]) [part="indicator"] {cx: 50%;cy: 50%;fill: none;r: calc(50% - var(--_ring-stroke) / 2);stroke-width: var(--_ring-stroke);}:host([shape="ring"]) [part="groove"] {stroke: var(--progress-track-color, var(--helix-color-surface-sunken));}:host([shape="ring"]) [part="indicator"] {scale: none;stroke: var(--progress-color, var(--helix-color-primary));stroke-dasharray: calc(var(--progress-fraction) * 100) 100;stroke-linecap: round;transition: stroke-dasharray var(--progress-transition-duration, var(--helix-duration-normal))
-var(--helix-easing-decelerate);}:host([shape="ring"][show-value]) {gap: var(--helix-space-none);grid-template-columns: auto;}:host([shape="ring"]) [part="value"] {grid-area: 1 / 1;min-inline-size: 0;text-align: center;}:host([shape="ring"][indeterminate]) [part="track"] {animation: helix-progress-ring var(--_progress-cycle) linear infinite;}:host([shape="ring"][indeterminate]) [part="indicator"] {animation: helix-progress-ring-sweep calc(var(--_progress-cycle) * 0.7) ease-in-out infinite;transition: none;}@keyframes helix-progress-ring {from {rotate: -90deg;}to {rotate: 270deg;}}@keyframes helix-progress-ring-sweep {0% {stroke-dasharray: 10 100;stroke-dashoffset: 0;}50% {stroke-dasharray: 70 100;stroke-dashoffset: -25;}100% {stroke-dasharray: 10 100;stroke-dashoffset: -100;}}@media (prefers-reduced-motion: reduce) {:host([shape="ring"]) [part="indicator"] {transition: none;}:host([shape="ring"][indeterminate]) [part="track"] {animation-duration: calc(var(--_progress-cycle) * 12);}:host([shape="ring"][indeterminate]) [part="indicator"] {animation: none;stroke-dasharray: 25 100;}}@media print {:host {print-color-adjust: exact;}}:host([emphasis="subtle"]) [part="indicator"] {background-color: color-mix(
+var(--helix-easing-decelerate);}:host([shape="ring"][show-value]) {gap: var(--helix-space-none);grid-template-columns: auto;}:host([shape="ring"]) [part="value"] {grid-area: 1 / 1;min-inline-size: 0;text-align: center;}:host([shape="ring"][indeterminate]) [part="track"] {animation: helix-progress-ring var(--_progress-cycle) linear infinite;}:host([shape="ring"][indeterminate]) [part="indicator"] {animation: helix-progress-ring-sweep calc(var(--_progress-cycle) * 0.7) ease-in-out infinite;transition: none;}@keyframes helix-progress-ring {from {rotate: -90deg;}to {rotate: 270deg;}}@keyframes helix-progress-ring-sweep {0% {stroke-dasharray: 10 100;stroke-dashoffset: 0;}50% {stroke-dasharray: 70 100;stroke-dashoffset: -25;}100% {stroke-dasharray: 10 100;stroke-dashoffset: -100;}}@media (prefers-reduced-motion: reduce) {:host([shape="ring"]) [part="indicator"] {transition: none;}:host([shape="ring"][indeterminate]) [part="track"] {animation-duration: calc(var(--_progress-cycle) * 12);}:host([shape="ring"][indeterminate]) [part="indicator"] {animation: none;stroke-dasharray: 25 100;}}@media (forced-colors: active) {[part="track"] {outline: var(--helix-border-thin) solid CanvasText;}[part="indicator"] {background-color: Highlight;forced-color-adjust: none;}:host([shape="ring"]) [part="track"] {outline: none;}:host([shape="ring"]) [part="indicator"] {stroke: Highlight;}:host([shape="ring"]) [part="groove"] {stroke: CanvasText;}}@media print {:host {print-color-adjust: exact;}}:host([emphasis="subtle"]) [part="indicator"] {background-color: color-mix(
 in oklab,
 var(--progress-color, var(--helix-color-primary)) 30%,
 var(--progress-track-color, var(--helix-color-surface-sunken))

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

@@ -19,6 +19,12 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
  * pointer, the keyboard, and the corner. The inner splitter holds the panes and
  * the outer one holds the panel, so the panel spans the full width.
  *
+ * On a focused divider, the arrow keys move it, and `Home` and `End` move it
+ * to its ends. `Enter` on the panes divider shuts the lead pane, and pressed
+ * again it opens the pane where it was. `Enter` on the panel divider shuts the
+ * panel to `panel-collapsed-size`, and pressed again it opens the panel to its
+ * last height.
+ *
  * @since 0.1.0
  * @status stable
  * @category tooling
@@ -384,6 +390,26 @@ export declare class HelixSandbox extends HelixElement {
      * and `panel-collapsed-size` was inert with it.
      */
     private readonly handleCollapse;
+    /** Where the lead pane opens back to after `Enter` shut it. */
+    private reopenSplit?;
+    /** Where the panel opens back to after `Enter` shut it, in pixels. */
+    private reopenPanel?;
+    /**
+     * Shuts a pane on `Enter`, or opens it again, in this element's own units.
+     *
+     * The window splitter pattern's key. The splitter's own toggle asks for a
+     * collapse, which `handleCollapse` refuses, so the key is answered here: the
+     * panes divider moves `split` to zero and back, and the panel divider moves
+     * `panel-size` to `panel-collapsed-size` and back. Each goes through the same
+     * request a drag makes, so a consumer hears `helix-before-split` or
+     * `helix-before-panel-resize` and can refuse it.
+     *
+     * Only `Enter` on a divider of this sandbox's own splitters. The key comes up
+     * from the source pane too, and an `Enter` typed there is a new line.
+     */
+    private readonly handleDividerKey;
+    private toggleLead;
+    private togglePanel;
     /**
      * Puts a divider where this element says it is.
      *

package/dist/sandbox/root/sandbox-root.js

@@ -94,6 +94,22 @@ let HelixSandbox = class HelixSandbox extends HelixElement {
         this.handleCollapse = (event) => {
             this.claim(event);
         };
+        this.handleDividerKey = (event) => {
+            const splitter = event.currentTarget;
+            const origin = event.composedPath()[0];
+            if (event.key !== 'Enter' ||
+                !(origin instanceof Element) ||
+                origin.getAttribute('part') !== 'separator' ||
+                origin.getRootNode() !== splitter.shadowRoot) {
+                return;
+            }
+            if (splitter.getAttribute('part') === 'panes') {
+                this.toggleLead(splitter);
+            }
+            else {
+                this.togglePanel(splitter);
+            }
+        };
         this.readPanel = () => {
             this.hasPanel = this.querySelector(':scope > [slot="panel"]') !== null;
         };
@@ -188,6 +204,37 @@ let HelixSandbox = class HelixSandbox extends HelixElement {
         event.preventDefault();
         return event.detail.value;
     }
+    toggleLead(splitter) {
+        if (this.split > 0) {
+            const open = this.split;
+            this.requestSplit(0);
+            if (this.split === 0) {
+                this.reopenSplit = open;
+            }
+        }
+        else {
+            const home = Number.isFinite(this.defaultSplit) && this.defaultSplit > 0;
+            this.requestSplit(this.reopenSplit ?? (home ? this.defaultSplit : DEFAULT_SPLIT));
+        }
+        this.answer(splitter, this.split);
+    }
+    togglePanel(splitter) {
+        const floor = Number.isFinite(this.panelCollapsedSize)
+            ? Math.max(0, this.panelCollapsedSize)
+            : 0;
+        if (this.panelSize > floor) {
+            const open = this.panelSize;
+            this.requestPanelSize(floor);
+            if (this.panelSize === floor) {
+                this.reopenPanel = open;
+            }
+        }
+        else {
+            const home = Number.isFinite(this.defaultPanelSize) && this.defaultPanelSize > floor;
+            this.requestPanelSize(this.reopenPanel ?? (home ? this.defaultPanelSize : DEFAULT_PANEL));
+        }
+        this.answer(splitter, this.panelPosition);
+    }
     answer(divider, position) {
         const target = divider;
         if (target && Number.isFinite(position)) {
@@ -256,10 +303,12 @@ let HelixSandbox = class HelixSandbox extends HelixElement {
         orientation="vertical" collapsed-size=${this.panelSliver} corner-label=${this.cornerLabel}
         label=${this.panelLabel} default-position=${this.homePanelPosition}
         min=${100 - PANEL_MAX * 100} .position=${this.panelPosition}
-        @helix-before-collapse=${this.handleCollapse} @helix-before-resize=${this.handlePanelChange}>
+        @helix-before-collapse=${this.handleCollapse} @helix-before-resize=${this.handlePanelChange}
+        @keydown=${this.handleDividerKey}>
         <helix-splitter slot="start" part="panes" exportparts="separator" default-position=${home}
           label=${label} orientation=${vertical ? 'vertical' : 'horizontal'} .position=${split}
-          @helix-before-collapse=${this.handleCollapse} @helix-before-resize=${this.handlePanesChange}>
+          @helix-before-collapse=${this.handleCollapse} @helix-before-resize=${this.handlePanesChange}
+          @keydown=${this.handleDividerKey}>
           <div part="pane" data-pane=${first} slot="start"><slot name=${first} @slotchange=${this.seed}></slot></div>
           <div part="pane" data-pane=${second} slot="end"><slot name=${second} @slotchange=${this.seed}></slot></div>
         </helix-splitter>

package/dist/sandbox/source/sandbox-source.css.js

@@ -1,4 +1,4 @@
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {display: block;block-size: 100%;}[part="highlight"],
-[part="source"] {border: none;color: var(--helix-color-foreground-muted);font-family: var(--helix-font-mono);font-size: var(--helix-text-xs);inline-size: 100%;line-height: var(--helix-leading-normal);min-block-size: var(--sandbox-source-min-block-size, 12rem);padding: var(--helix-space-sm);tab-size: 2;}[part="source"] {background-color: var(--sandbox-source-background-color, var(--helix-color-background));block-size: 100%;display: block;resize: none;}[part="source"]:focus-visible {background-color: var(--helix-color-surface);outline: none;}[part="field"] {background-color: var(--sandbox-source-background-color, var(--helix-color-background));block-size: 100%;display: grid;grid-template-rows: minmax(max-content, auto);overflow: auto;}[part="field"]:focus-within {background-color: var(--helix-color-surface);}[part="field"] > [part] {grid-area: 1 / 1;letter-spacing: normal;margin: 0;overflow-wrap: break-word;white-space: pre-wrap;}[part="field"] > [part="source"],
-[part="field"] > [part="source"]:focus-visible {-webkit-text-fill-color: transparent;align-self: stretch;background-color: transparent;block-size: auto;caret-color: var(--helix-color-foreground);color: transparent;overflow: hidden;}[data-kind="callable"] {color: var(--sandbox-source-callable-color, var(--helix-color-syntax-callable));}[data-kind="comment"] {color: var(--sandbox-source-comment-color, var(--helix-color-syntax-comment));}[data-kind="constant"] {color: var(--sandbox-source-constant-color, var(--helix-color-syntax-constant));}[data-kind="invalid"] {color: var(--sandbox-source-invalid-color, var(--helix-color-syntax-invalid));}[data-kind="keyword"] {color: var(--sandbox-source-keyword-color, var(--helix-color-syntax-keyword));}[data-kind="name"] {color: var(--sandbox-source-name-color, var(--helix-color-syntax-name));}[data-kind="string"] {color: var(--sandbox-source-string-color, var(--helix-color-syntax-string));}[data-kind="tag"] {color: var(--sandbox-source-tag-color, var(--helix-color-syntax-tag));}`);
+[part="source"] {border: none;color: var(--helix-color-foreground-muted);font-family: var(--helix-font-mono);font-size: var(--helix-text-xs);inline-size: 100%;line-height: var(--helix-leading-normal);min-block-size: var(--sandbox-source-min-block-size, 12rem);padding: var(--helix-space-sm);tab-size: 2;}[part="source"] {background-color: var(--sandbox-source-background-color, var(--helix-color-background));block-size: 100%;display: block;resize: none;}[part="source"]:focus-visible {background-color: var(--helix-color-surface);outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}[part="field"] {background-color: var(--sandbox-source-background-color, var(--helix-color-background));block-size: 100%;display: grid;grid-template-rows: minmax(max-content, auto);overflow: auto;}[part="field"]:focus-within {background-color: var(--helix-color-surface);}[part="field"]:has(> [part="source"]:focus-visible) {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}[part="field"] > [part] {grid-area: 1 / 1;letter-spacing: normal;margin: 0;overflow-wrap: break-word;white-space: pre-wrap;}[part="field"] > [part="source"],
+[part="field"] > [part="source"]:focus-visible {-webkit-text-fill-color: transparent;align-self: stretch;background-color: transparent;block-size: auto;caret-color: var(--helix-color-foreground);color: transparent;outline: none;overflow: hidden;}[data-kind="callable"] {color: var(--sandbox-source-callable-color, var(--helix-color-syntax-callable));}[data-kind="comment"] {color: var(--sandbox-source-comment-color, var(--helix-color-syntax-comment));}[data-kind="constant"] {color: var(--sandbox-source-constant-color, var(--helix-color-syntax-constant));}[data-kind="invalid"] {color: var(--sandbox-source-invalid-color, var(--helix-color-syntax-invalid));}[data-kind="keyword"] {color: var(--sandbox-source-keyword-color, var(--helix-color-syntax-keyword));}[data-kind="name"] {color: var(--sandbox-source-name-color, var(--helix-color-syntax-name));}[data-kind="string"] {color: var(--sandbox-source-string-color, var(--helix-color-syntax-string));}[data-kind="tag"] {color: var(--sandbox-source-tag-color, var(--helix-color-syntax-tag));}`);

package/dist/sandbox/source/sandbox-source.d.ts

@@ -133,6 +133,18 @@ export declare class HelixSandboxSource extends HelixElement {
      */
     private edit;
     private readonly handleKeydown;
+    /**
+     * Writes the two spaces Tab inserts, as typing would.
+     *
+     * **Through `insertText`, so undo takes the indent back.** Assigning
+     * `field.value` empties the textarea's undo history: a reader who typed,
+     * pressed Tab and then Cmd+Z or Ctrl+Z lost the indent and everything typed
+     * before it. `insertText` is the edit a keystroke makes, so it joins the
+     * history and sends the `input` event that `handleInput` takes. It writes
+     * into whatever has focus, so it is used only while the field has it. Where it
+     * is not supported, the field is written directly.
+     */
+    private indent;
     protected render(): TemplateResult;
     /** The field itself and its description, which is the whole pane without `tokenize`. */
     private renderField;

package/dist/sandbox/source/sandbox-source.js

@@ -46,12 +46,7 @@ let HelixSandboxSource = class HelixSandboxSource extends HelixElement {
                 return;
             }
             event.preventDefault();
-            const field = event.target;
-            const { selectionEnd, selectionStart, value } = field;
-            field.value = `${value.slice(0, selectionStart)}  ${value.slice(selectionEnd)}`;
-            field.selectionStart = selectionStart + 2;
-            field.selectionEnd = field.selectionStart;
-            this.edit(field, field.value);
+            this.indent(event.target);
         };
     }
     static { this.words = 'helix-sandbox-source'; }
@@ -66,6 +61,17 @@ let HelixSandboxSource = class HelixSandboxSource extends HelixElement {
             this.dispatchEvent(new HelixEditEvent({ value: next }));
         }
     }
+    indent(field) {
+        const { ownerDocument } = field;
+        const focused = field.getRootNode().activeElement === field;
+        if (focused &&
+            typeof ownerDocument.execCommand === 'function' &&
+            ownerDocument.execCommand('insertText', false, '  ')) {
+            return;
+        }
+        field.setRangeText('  ', field.selectionStart, field.selectionEnd, 'end');
+        this.edit(field, field.value);
+    }
     render() {
         const field = this.renderField();
         if (!this.tokenize) {

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

@@ -14,7 +14,9 @@ import '../../checkbox/index.js';
  * @documentation https://fusion.dev/helix/components/table
  *
  * @slot - The table's rows.
+ * @slot empty - Content shown when there are no rows and none are loading, such as a picture and a link. Falls back to `empty-text`, which the live region still says.
  * @slot heading - Words that name the table, shown above it in the weight of a heading.
+ * @slot loading - Content shown while the rows load, such as a spinner. Falls back to `loading-text`, which the live region still says.
  *
  * @csspart drag-preview - A copy of the row a pointer drags by its grip, which follows the pointer in the top layer until the row is let go, in a `reorderable` table. Hidden from assistive technology.
  * @csspart live - A live region that repeats the empty and loading text, and says each step of a move, so screen readers announce it when it changes. Visually hidden in the styled tier.

package/dist/table/row/table-row.css.js

@@ -4,7 +4,8 @@ export const styles = createSheet(`:host {display: contents;}[part~="select"] {a
 in srgb,
 var(--helix-color-primary) 10%,
 var(--helix-color-background)
-);}:host(:state(link)) ::slotted(*) {cursor: pointer;}:host(:state(link):hover) ::slotted(*) {background-color: var(
+);}:host([disabled]) [part~="select"],
+:host([disabled]) ::slotted(*) {opacity: var(--table-row-disabled-opacity, 0.5);}:host(:state(link)) ::slotted(*) {cursor: pointer;}:host(:state(link):hover) ::slotted(*) {background-color: var(
 --table-row-hover-background-color,
 color-mix(in oklab, var(--helix-color-foreground) 5%, transparent)
 );}[part~="select"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}[part~="grip"] {align-items: center;border-block-end: var(--helix-border-thin) solid var(--helix-color-border);box-sizing: border-box;display: flex;min-block-size: var(--helix-size-control);padding-inline: var(--helix-space-2xs) var(--helix-space-sm);}[part~="grip"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}[part="grip-button"] {all: unset;align-items: center;border-radius: var(--helix-radii-sm);box-sizing: border-box;color: var(--table-grip-color, var(--helix-color-foreground-muted));cursor: grab;display: inline-flex;touch-action: none;}[part="grip-button"]:active {cursor: grabbing;}[part="grip-button"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="grip-button"][aria-disabled="true"] {cursor: default;opacity: var(--table-grip-disabled-opacity, 0.4);}[part="grip-mark"] {block-size: 1em;inline-size: 1em;}:host(:state(dragging)) [part~="grip"],

package/dist/table/row/table-row.d.ts

@@ -21,6 +21,7 @@ import '../../checkbox/index.js';
  * @cssproperty --table-drop-indicator-size - The thickness of the line where a moved row would land.
  * @cssproperty --table-grip-color - The color of a row's grip, in a `reorderable` table.
  * @cssproperty --table-grip-disabled-opacity - The opacity of a row's grip while a sort decides the order.
+ * @cssproperty --table-row-disabled-opacity - The opacity of the cells of a `disabled` row.
  * @cssproperty --table-row-hover-background-color - The wash across the cells of a row with `href` under the pointer.
  */
 export declare class HelixTableRow extends HelixHeadlessTableRow {

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

@@ -7,5 +7,5 @@ var(--helix-scrollbar-thumb-hover-color)
 var(--virtual-list-scrollbar-track-color, var(--helix-scrollbar-track-color));}::slotted([data-index]:focus-visible) {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="empty"] {color: var(--virtual-list-empty-color, var(--helix-color-foreground-muted));font-size: var(--helix-text-sm);padding: var(--virtual-list-empty-padding, var(--helix-space-md));text-align: center;}[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;}@media print {:host {overflow: visible;}}`);

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

@@ -18,10 +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 empty - The row shown when there are no items and none are loading, where `empty-label` or the `empty` slot gives it content.
  * @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-empty-color - The color of the text in the row shown when there are no items.
+ * @cssproperty --virtual-list-empty-padding - The space around the text in the row shown when there are no items.
  * @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-scrollbar-thumb-color - The thumb of the list's scrollbar. Defaults to `--helix-scrollbar-thumb-color`.