@fusion.dev/helix 0.155.0 → 0.156.0

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

@@ -1,5 +1,5 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: contents;}[part="region"] {background-color: var(--canvas-background-color, var(--helix-color-surface-sunken));block-size: var(--canvas-block-size, 30rem);border: var(--helix-border-thin) solid var(--canvas-border-color, var(--helix-color-border));border-radius: var(--canvas-radius, var(--helix-radii-sm));box-sizing: border-box;display: grid;grid-template-rows: auto 1fr auto;overflow: hidden;position: relative;}:host([separation="plain"]) [part="region"] {background-color: transparent;border: none;border-radius: 0;}[part="viewport"] {min-block-size: 0;overflow: hidden;position: relative;}:host(:not(:state(empty))) ::slotted([slot="empty"]) {display: none;}[part="board"] {block-size: var(--_canvas-plane-block-size);inline-size: var(--_canvas-plane-inline-size);left: 0;position: absolute;top: 0;transform: translate(var(--_canvas-x), var(--_canvas-y)) scale(var(--_canvas-zoom));transform-origin: 0 0;transition: transform var(--helix-duration-normal) var(--helix-easing-standard);}:host([grid]) [part="viewport"] {background-position: var(--_canvas-rule-x) var(--_canvas-rule-y);background-size: calc(var(--canvas-grid-size, 32px) * var(--_canvas-rule-zoom))
+export const styles = createSheet(`:host {display: contents;}[part="region"] {background-color: var(--canvas-background-color, var(--helix-color-surface-sunken));block-size: var(--canvas-block-size, 30rem);border: var(--helix-border-thin) solid var(--canvas-border-color, var(--helix-color-border));border-radius: var(--canvas-radius, var(--helix-radii-sm));box-sizing: border-box;display: grid;grid-template-rows: auto 1fr auto;overflow: hidden;position: relative;}:host([separation="plain"]) [part="region"] {background-color: transparent;border: none;border-radius: 0;}[part="viewport"] {min-block-size: 0;overflow: hidden;position: relative;}:host(:not(:state(empty))) ::slotted([slot="empty"]) {display: none;}[part="board"] {block-size: var(--_canvas-plane-block-size);inline-size: var(--_canvas-plane-inline-size);left: 0;position: absolute;top: 0;transform: translate(var(--_canvas-x), var(--_canvas-y)) scale(var(--canvas-zoom));transform-origin: 0 0;transition: transform var(--helix-duration-normal) var(--helix-easing-standard);}:host([grid]) [part="viewport"] {background-position: var(--_canvas-rule-x) var(--_canvas-rule-y);background-size: calc(var(--canvas-grid-size, 32px) * var(--_canvas-rule-zoom))
 calc(var(--canvas-grid-size, 32px) * var(--_canvas-rule-zoom));transition:
 background-position var(--helix-duration-normal) var(--helix-easing-standard),
 background-size var(--helix-duration-normal) var(--helix-easing-standard);}:host([grid="lines"]) [part="viewport"] {--_canvas-rule: color-mix(in oklab, var(--helix-color-border) 50%, transparent);background-image:

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

@@ -1,4 +1,4 @@
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`helix-dialog::part(dialog) {align-self: start;inline-size: min(var(--command-size, 40rem), calc(100vw - var(--helix-space-xl) * 2));margin-block-start: 20vh;padding: var(--helix-space-none);}:host {--option-padding: var(--helix-space-sm);}[part="listbox"] {--listbox-background-color: transparent;border: none;display: block;}helix-listbox::part(items) {background-color: transparent;border: none;max-block-size: var(--command-list-size, 22rem);padding-block: var(--helix-space-xs);}helix-listbox::part(search) {border-block-end: var(--helix-border-thin) solid var(--helix-color-border);padding: var(--option-padding);}helix-listbox::part(search-field) {font-size: var(--helix-text-md);}:host {--_command-row: var(--helix-space-sm);--option-block-padding: var(--_command-row);}:host([data-density="sm"]),
 :host(:where([data-density="sm"] *)) {--_command-row: var(--helix-space-2xs);}:host([data-density="lg"]),
-:host(:where([data-density="lg"] *)) {--_command-row: var(--helix-space-md);}[part="footer"] {align-items: center;border-block-start: var(--helix-border-thin) solid var(--helix-color-border);color: var(--helix-color-foreground-muted);display: flex;font-size: var(--helix-text-xs);gap: var(--helix-space-sm);padding: var(--helix-space-xs) var(--option-padding);}[part="footer"][hidden] {display: none;}@media print {:host {display: none;}}`);
+:host(:where([data-density="lg"] *)) {--_command-row: var(--helix-space-md);}[part="footer"] {align-items: center;border-block-start: var(--helix-border-thin) solid var(--helix-color-border);color: var(--helix-color-foreground-muted);display: flex;font-size: var(--helix-text-xs);gap: var(--helix-space-sm);padding: var(--helix-space-xs) var(--option-padding);}[part="footer"][hidden] {display: none;}:host([inline]) {background-color: var(--helix-color-surface);border: var(--helix-border-thin) solid var(--helix-color-border);border-radius: var(--helix-radii-sm);display: block;inline-size: min(var(--command-size, 40rem), 100%);overflow: hidden;}@media print {:host {display: none;}}`);

package/dist/data-table/root/data-table-root.css.js

@@ -25,7 +25,7 @@ color-mix(in srgb, var(--helix-color-primary) 10%, var(--helix-color-background)
 var(--data-table-drop-indicator-color, var(--helix-color-primary));}[part~="row"][part~="row-drop-after"] > * {box-shadow: inset 0 calc(var(--data-table-drop-indicator-size, var(--helix-border-thick)) * -1) 0
 0 var(--data-table-drop-indicator-color, var(--helix-color-primary));}[part="toolbar"][data-empty],
 [part="footer"][data-empty] {display: none;}[part="toolbar"] {padding-block-end: var(--data-table-toolbar-gap, var(--helix-space-sm));}[part="footer"] {align-items: center;display: flex;flex-wrap: wrap;gap: var(--data-table-footer-item-gap, var(--helix-space-md));padding-block-start: var(--data-table-footer-gap, var(--helix-space-sm));}[part="pagination"] {margin-inline-start: auto;}[part="empty"],
-[part="loading"] {grid-column: 1 / -1;}:host([child-field]) [part~="cell-header"] {--_data-table-gutter: calc(
+[part="loading"] {grid-column: 1 / -1;}[part="error"] {color: var(--data-table-error-color, var(--helix-color-foreground));font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);grid-column: 1 / -1;margin: var(--helix-space-none);padding-block: var(--helix-space-md);padding-inline: var(--helix-space-sm);text-align: center;}:host([child-field]) [part~="cell-header"] {--_data-table-gutter: calc(
 var(--data-table-toggle-size, var(--helix-size-icon-tight)) +
 var(--data-table-toggle-gap, var(--helix-space-2xs))
 );padding-inline-start: calc(

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

@@ -29,6 +29,7 @@ import '../../table/index.js';
  *
  * @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 error - Content shown while `error-text` is set, such as a button that tries again. Falls back to `error-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.
@@ -53,6 +54,7 @@ import '../../table/index.js';
  * @cssproperty --data-table-dragging-opacity - The opacity of a row being moved, with `reorderable-rows`.
  * @cssproperty --data-table-drop-indicator-color - The color of the line where a moved row would land.
  * @cssproperty --data-table-drop-indicator-size - The thickness of the line where a moved row would land.
+ * @cssproperty --data-table-error-color - The color of the words in the line shown while `error-text` is set.
  * @cssproperty --data-table-footer-gap - The space between the grid and the footer below it.
  * @cssproperty --data-table-footer-item-gap - The space between the pieces of the footer, such as a summary and the pagination.
  * @cssproperty --data-table-grip-color - The color of a row's grip, with `reorderable-rows`.

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

@@ -1,7 +1,8 @@
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`[part="field"] {align-items: center;background-color: var(--date-input-background-color, var(--helix-color-well));border: var(--helix-border-thin) solid var(--helix-color-border);border-radius: var(--helix-radii-sm);display: flex;flex-wrap: wrap;gap: var(--helix-space-2xs);min-block-size: var(--helix-size-control);padding-block: var(--helix-space-2xs);padding-inline: var(--helix-space-xs);transition:
 background-color var(--helix-duration-fast) var(--helix-easing-standard),
-border-color var(--helix-duration-fast) var(--helix-easing-standard);}[part="trigger"] {all: unset;block-size: var(--helix-size-icon);box-sizing: border-box;color: var(--helix-color-foreground-muted);cursor: pointer;flex: none;inline-size: var(--helix-size-icon);mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");mask-position: center;mask-repeat: no-repeat;mask-size: 100%;background-color: currentColor;transition: color var(--helix-duration-fast) var(--helix-easing-standard);}[part="trigger"]:hover {color: var(--helix-color-foreground);}[part="trigger"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="surface"] {--_floating-border-color: var(--date-input-border-color, var(--helix-color-border));--_floating-border-width: var(--date-input-border-width, var(--helix-border-floating));--_floating-shadow: var(--date-input-shadow, var(--helix-shadow-floating));inline-size: max-content;padding: var(--helix-space-sm);position: absolute;}::slotted([slot="panel-header"]) {display: block;margin-block-end: var(--helix-space-sm);}::slotted([slot="panel-footer"]) {display: block;margin-block-start: var(--helix-space-sm);}:host(:disabled) [part="field"] {color: var(--helix-color-foreground-subtle);}:host(:disabled) [part="control"],
+border-color var(--helix-duration-fast) var(--helix-easing-standard);}slot[name="start"]::slotted(*),
+slot[name="end"]::slotted(*) {color: var(--helix-color-foreground-subtle);flex: none;}[part="trigger"] {all: unset;block-size: var(--helix-size-icon);box-sizing: border-box;color: var(--helix-color-foreground-muted);cursor: pointer;flex: none;inline-size: var(--helix-size-icon);mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");mask-position: center;mask-repeat: no-repeat;mask-size: 100%;background-color: currentColor;transition: color var(--helix-duration-fast) var(--helix-easing-standard);}[part="trigger"]:hover {color: var(--helix-color-foreground);}[part="trigger"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="surface"] {--_floating-border-color: var(--date-input-border-color, var(--helix-color-border));--_floating-border-width: var(--date-input-border-width, var(--helix-border-floating));--_floating-shadow: var(--date-input-shadow, var(--helix-shadow-floating));inline-size: max-content;padding: var(--helix-space-sm);position: absolute;}::slotted([slot="panel-header"]) {display: block;margin-block-end: var(--helix-space-sm);}::slotted([slot="panel-footer"]) {display: block;margin-block-start: var(--helix-space-sm);}:host(:disabled) [part="field"] {color: var(--helix-color-foreground-subtle);}:host(:disabled) [part="control"],
 :host(:disabled) [part="trigger"] {cursor: not-allowed;}@media (prefers-reduced-motion: reduce) {[part="field"],
 [part="trigger"] {transition: none;}}[part="date"] {flex: none;}:host([mode="multiple"]) [part="control"] {flex-basis: 0;min-inline-size: var(--helix-size-icon-loose);}[part="segments"] {--_segment-focus-background-color: var(
 --date-input-segment-focus-background-color,

package/dist/element-events.generated.js

@@ -142,6 +142,7 @@ registerElementEvents({
         'helix-action',
         'helix-before-change',
         'helix-before-reorder',
+        'helix-load-more',
         'helix-reorder',
     ],
     'helix-list-item': ['helix-action'],

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

@@ -9,7 +9,7 @@ export const styles = createSheet(`:host {display: contents;}[part="region"] {ba
 ".      down  .      notes"
 ".      .     .      full";}[part="legend"] {display: flex;flex-wrap: wrap;gap: var(--helix-space-2xs);inset-block-end: var(--helix-space-sm);inset-inline-start: var(--helix-space-sm);max-inline-size: calc(100% - var(--helix-space-sm) * 3 - var(--helix-size-control-sm));position: absolute;}:host([controls-placement="bottom-start"]) [part="legend"] {inset-inline: auto var(--helix-space-sm);}@container (inline-size < 40rem) {[part="legend"] {flex-wrap: nowrap;inset-block-end: calc(var(--helix-space-sm) - var(--helix-space-2xs));inset-inline-start: calc(var(--helix-space-sm) - var(--helix-space-2xs));overflow-x: auto;padding: var(--helix-space-2xs);scrollbar-width: none;}}[part~="legend-item"] {align-items: center;background-color: var(--viewport-control-background-color, var(--helix-color-surface-overlay));block-size: var(--helix-size-control-tight);border: var(--helix-border-floating) solid var(--helix-color-border);border-radius: var(--helix-radii-sm);box-shadow: var(--helix-shadow-floating);color: var(--helix-color-foreground);cursor: pointer;display: inline-flex;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);font-weight: var(--helix-weight-medium);gap: var(--helix-space-2xs);padding-inline: var(--helix-space-xs);white-space: nowrap;}[part~="legend-item"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part~="legend-item"]:nth-child(24n + 1) {--_graph-swatch: var(--helix-color-series-1);}[part~="legend-item"]:nth-child(24n + 2) {--_graph-swatch: var(--helix-color-series-2);}[part~="legend-item"]:nth-child(24n + 3) {--_graph-swatch: var(--helix-color-series-3);}[part~="legend-item"]:nth-child(24n + 4) {--_graph-swatch: var(--helix-color-series-4);}[part~="legend-item"]:nth-child(24n + 5) {--_graph-swatch: var(--helix-color-series-5);}[part~="legend-item"]:nth-child(24n + 6) {--_graph-swatch: var(--helix-color-series-6);}[part~="legend-item"]:nth-child(24n + 7) {--_graph-swatch: var(--helix-color-series-7);}[part~="legend-item"]:nth-child(24n + 8) {--_graph-swatch: var(--helix-color-series-8);}[part~="legend-item"]:nth-child(24n + 9) {--_graph-swatch: var(--helix-color-series-9);}[part~="legend-item"]:nth-child(24n + 10) {--_graph-swatch: var(--helix-color-series-10);}[part~="legend-item"]:nth-child(24n + 11) {--_graph-swatch: var(--helix-color-series-11);}[part~="legend-item"]:nth-child(24n + 12) {--_graph-swatch: var(--helix-color-series-12);}[part~="legend-item"]:nth-child(24n + 13) {--_graph-swatch: var(--helix-color-series-13);}[part~="legend-item"]:nth-child(24n + 14) {--_graph-swatch: var(--helix-color-series-14);}[part~="legend-item"]:nth-child(24n + 15) {--_graph-swatch: var(--helix-color-series-15);}[part~="legend-item"]:nth-child(24n + 16) {--_graph-swatch: var(--helix-color-series-16);}[part~="legend-item"]:nth-child(24n + 17) {--_graph-swatch: var(--helix-color-series-17);}[part~="legend-item"]:nth-child(24n + 18) {--_graph-swatch: var(--helix-color-series-18);}[part~="legend-item"]:nth-child(24n + 19) {--_graph-swatch: var(--helix-color-series-19);}[part~="legend-item"]:nth-child(24n + 20) {--_graph-swatch: var(--helix-color-series-20);}[part~="legend-item"]:nth-child(24n + 21) {--_graph-swatch: var(--helix-color-series-21);}[part~="legend-item"]:nth-child(24n + 22) {--_graph-swatch: var(--helix-color-series-22);}[part~="legend-item"]:nth-child(24n + 23) {--_graph-swatch: var(--helix-color-series-23);}[part~="legend-item"]:nth-child(24n + 24) {--_graph-swatch: var(--helix-color-series-24);}[part~="legend-item"][data-tone="accent"] {--_graph-swatch: var(--helix-color-accent);}[part~="legend-item"][data-tone="danger"] {--_graph-swatch: var(--helix-color-danger);}[part~="legend-item"][data-tone="info"] {--_graph-swatch: var(--helix-color-info);}[part~="legend-item"][data-tone="neutral"] {--_graph-swatch: var(--helix-color-foreground-muted);}[part~="legend-item"][data-tone="primary"] {--_graph-swatch: var(--helix-color-primary);}[part~="legend-item"][data-tone="success"] {--_graph-swatch: var(--helix-color-success);}[part~="legend-item"][data-tone="warning"] {--_graph-swatch: var(--helix-color-warning);}[part="legend-swatch"] {block-size: var(--helix-space-xs);border: var(--helix-border-thin) solid var(--_graph-swatch, var(--helix-color-foreground-muted));border-radius: var(--helix-radii-full);box-sizing: border-box;background-color: var(--_graph-swatch, var(--helix-color-foreground-muted));flex: 0 0 auto;inline-size: var(--helix-space-xs);}[part~="legend-item-hidden"] {color: var(--helix-color-foreground-subtle);}[part~="legend-item-hidden"] [part="legend-swatch"] {background-color: transparent;}[part="search"] {align-items: center;border-block-end: var(--helix-border-thin) solid var(--helix-color-border);display: flex;gap: var(--helix-space-2xs);padding: var(--helix-space-2xs);padding-inline-start: var(--helix-space-xs);}[part="filter-icon"] {align-items: center;color: var(--helix-color-foreground-subtle);display: inline-flex;flex: 0 0 auto;}[part="filter-icon"] svg,
 slot[name="filter-icon"]::slotted(*) {--icon-size: var(--helix-size-icon-tight);block-size: var(--helix-size-icon-tight);inline-size: var(--helix-size-icon-tight);}[part="search-field"] {appearance: none;background-color: transparent;block-size: var(--helix-size-control-tight);border: none;box-sizing: border-box;color: var(--helix-color-foreground);flex: 1 1 auto;font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);font-weight: var(--helix-weight-medium);min-inline-size: 0;padding-inline: var(--helix-space-2xs);}[part="search-field"]::placeholder {color: var(--helix-color-foreground-subtle);}[part="search-field"]:focus-visible {outline: none;}[part="search"]:has([part="search-field"]:focus-visible),
-[part="list"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}[part="count"] {color: var(--helix-color-foreground-muted);flex: 0 0 auto;font-size: var(--helix-text-xs);font-variant-numeric: tabular-nums;padding-inline-end: calc(var(--helix-space-xs) - var(--helix-space-2xs));}[part="list"] {min-block-size: 0;overflow-y: auto;overscroll-behavior: contain;padding-block: var(--helix-space-2xs);}[part~="note"] {align-items: center;box-sizing: border-box;cursor: pointer;display: flex;font-size: var(--graph-note-text, var(--helix-text-sm));gap: var(--helix-space-sm);min-block-size: var(--helix-size-control-tight);padding-block: var(--helix-space-2xs);padding-inline: var(--graph-note-padding-inline, var(--helix-space-xs));user-select: none;}[part~="note"]:hover,
+[part="list"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}[part="count"] {color: var(--helix-color-foreground-muted);flex: 0 0 auto;font-size: var(--helix-text-xs);font-variant-numeric: tabular-nums;padding-inline-end: calc(var(--helix-space-xs) - var(--helix-space-2xs));}[part="empty"] {color: var(--helix-color-foreground-muted);font-size: var(--helix-text-sm);grid-area: 2 / 1;padding: var(--helix-space-sm);}[part="list"] {min-block-size: 0;overflow-y: auto;overscroll-behavior: contain;padding-block: var(--helix-space-2xs);}[part~="note"] {align-items: center;box-sizing: border-box;cursor: pointer;display: flex;font-size: var(--graph-note-text, var(--helix-text-sm));gap: var(--helix-space-sm);min-block-size: var(--helix-size-control-tight);padding-block: var(--helix-space-2xs);padding-inline: var(--graph-note-padding-inline, var(--helix-space-xs));user-select: none;}[part~="note"]:hover,
 [part="list"]:focus-visible [part~="note-cursor"] {--_graph-wash: var(
 --graph-note-hover-color,
 light-dark(

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

@@ -2,5 +2,5 @@ import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {display: flex;flex-direction: column;gap: var(--list-gap, var(--helix-space-none));}:host([divided]) ::slotted(*:not(:first-child)) {border-block-start: var(--helix-border-thin) solid var(--helix-color-border);}:host([kind="ordered"]),
 :host([kind="unordered"]) {contain: style;padding-inline-start: var(--list-marker-gutter, var(--helix-space-md));}:host([kind="ordered"]) ::slotted(*),
 :host([kind="unordered"]) ::slotted(*) {display: list-item;list-style-position: outside;}:host([kind="ordered"]) ::slotted(*) {list-style-type: decimal;}:host([kind="ordered"][type="a"]) ::slotted(*) {list-style-type: lower-alpha;}:host([kind="ordered"][type="A"]) ::slotted(*) {list-style-type: upper-alpha;}:host([kind="ordered"][type="i"]) ::slotted(*) {list-style-type: lower-roman;}:host([kind="ordered"][type="I"]) ::slotted(*) {list-style-type: upper-roman;}:host([kind="unordered"]) ::slotted(*) {list-style-type: disc;}:host([kind="ordered"]) ::slotted(*) {counter-increment: list-item var(--list-step, 1);}:host([kind="ordered"]) ::slotted(:first-child) {counter-set: list-item var(--list-first);}:host([marker="rail"]) {counter-reset: list-rail;padding-inline-start: var(--helix-space-none);}:host([marker="rail"]) ::slotted(*) {--list-item-rail-content: counter(list-rail, var(--list-rail-style, decimal-leading-zero));--list-item-rail-display: block;counter-increment: list-rail var(--list-step, 1);}:host([marker="rail"]) ::slotted(:first-child) {counter-set: list-rail var(--list-first);}:host([kind="ordered"][marker="rail"]) ::slotted(*),
-:host([kind="unordered"][marker="rail"]) ::slotted(*) {display: block;list-style: none;}:host([kind="description"]) ::slotted(*) {--list-item-term-weight: var(--helix-weight-semibold);}[part="drag-preview"] {background-color: var(--list-drag-preview-background-color, var(--helix-color-surface-raised));border: var(--list-drag-preview-border-width, var(--helix-border-floating)) solid
+:host([kind="unordered"][marker="rail"]) ::slotted(*) {display: block;list-style: none;}:host([kind="description"]) ::slotted(*) {--list-item-term-weight: var(--helix-weight-semibold);}[part="empty"] {color: var(--list-empty-color, var(--helix-color-foreground-muted));font-size: var(--helix-text-sm);padding: var(--list-empty-padding, var(--helix-space-md));text-align: center;}[part="empty"][hidden] {display: none;}[part="loading"] {color: var(--list-loading-color, var(--helix-color-foreground-muted));font-size: var(--helix-text-sm);padding: var(--list-loading-padding, var(--helix-space-sm));text-align: center;}[part="drag-preview"] {background-color: var(--list-drag-preview-background-color, var(--helix-color-surface-raised));border: var(--list-drag-preview-border-width, var(--helix-border-floating)) solid
 var(--list-drag-preview-border-color, var(--helix-color-border));border-radius: var(--list-drag-preview-radius, var(--helix-radii-sm));box-shadow: var(--list-drag-preview-shadow, var(--helix-shadow-floating));opacity: var(--list-drag-preview-opacity, 0.9);}@media print {:host {print-color-adjust: economy;}}`);

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

@@ -19,7 +19,11 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --list-drag-preview-opacity - The opacity of the copy of a row a pointer drags.
  * @cssproperty --list-drag-preview-radius - The corner radius of the copy of a row a pointer drags.
  * @cssproperty --list-drag-preview-shadow - The shadow that raises the copy of a row a pointer drags over the page.
+ * @cssproperty --list-empty-color - The color of the text in the row shown while the list has no rows.
+ * @cssproperty --list-empty-padding - The space around the text in the row shown while the list has no rows.
  * @cssproperty --list-gap - The space between rows.
+ * @cssproperty --list-loading-color - The color of the text in the row drawn while `loading` is set.
+ * @cssproperty --list-loading-padding - The space around the text in the row drawn while `loading` is set.
  * @cssproperty --list-marker-gutter - The space that the markers of ordered and unordered lists sit in.
  * @cssproperty --list-rail-inline-size - The width of the rail's track.
  * @cssproperty --list-rail-style - The counter style of the rail's numbers. Takes any `list-style-type`.

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

@@ -8,5 +8,7 @@ var(--number-input-stepper-border-color, var(--helix-color-border));}[part="incr
 var(--number-input-stepper-border-color, var(--helix-color-border));}[part="decrement"]:hover:not(:disabled),
 [part="increment"]:hover:not(:disabled) {background-color: var(--number-input-stepper-background-color-hover, var(--helix-color-surface));color: var(--number-input-stepper-color-hover, var(--helix-color-foreground));}[part="decrement"]:disabled,
 [part="increment"]:disabled {cursor: default;opacity: 0.4;}[part="decrement"] svg,
-[part="increment"] svg {block-size: var(--number-input-stepper-icon-size, var(--helix-size-icon-tight));inline-size: var(--number-input-stepper-icon-size, var(--helix-size-icon-tight));}:host([scrub]) [part="label"] {cursor: ew-resize;touch-action: none;user-select: none;}:host([scrub]:disabled) [part="label"],
+[part="increment"] svg,
+slot[name="decrement-icon"]::slotted(*),
+slot[name="increment-icon"]::slotted(*) {block-size: var(--number-input-stepper-icon-size, var(--helix-size-icon-tight));inline-size: var(--number-input-stepper-icon-size, var(--helix-size-icon-tight));}:host([scrub]) [part="label"] {cursor: ew-resize;touch-action: none;user-select: none;}:host([scrub]:disabled) [part="label"],
 :host([scrub][readonly]) [part="label"] {cursor: default;}@media print {:host {print-color-adjust: exact;}}`);

package/dist/number-input/root/number-input-root.d.ts

@@ -21,9 +21,11 @@ import type { CSSResultGroup } from 'lit';
  * @aliases NumberField, Stepper, InputNumber
  * @documentation https://fusion.dev/helix/components/number-input
  *
+ * @slot decrement-icon - Replaces the icon on the step down button.
  * @slot end - Content after the number, such as a unit.
  * @slot feedback - The message that says what is wrong, for content richer than a string. It shows while there is a message.
  * @slot hint - Help under the control, for content richer than the `hint` text.
+ * @slot increment-icon - Replaces the icon on the step up button.
  * @slot label - The label, for content richer than the `label` text.
  * @slot start - Content before the number, such as a unit or an icon.
  *
@@ -42,7 +44,7 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --number-input-stepper-border-color - The rule between each stepper button and the number.
  * @cssproperty --number-input-stepper-color - Icon color of the stepper buttons at rest.
  * @cssproperty --number-input-stepper-color-hover - Icon color of a stepper button under the pointer.
- * @cssproperty --number-input-stepper-icon-size - Width and height of the stepper icons.
+ * @cssproperty --number-input-stepper-icon-size - Width and height of the stepper icons, drawn or slotted.
  * @cssproperty --number-input-stepper-size - Width of each stepper button.
  */
 export declare class HelixNumberInput extends HelixHeadlessNumberInput {

package/dist/sandbox/frame.d.ts

@@ -51,8 +51,9 @@ export declare const loggedText: (value: unknown) => string;
  * - Writes each `helix-preview-render` into the root: the markup, the
  *   stylesheet, the direction, the layout and the color mode. Scripts in the
  *   markup run.
- * - Posts every console call and uncaught error as `helix-preview-console`,
- *   an uncaught one marked `uncaught`, which marks the preview `failed`.
+ * - Posts every console call, uncaught error, and unhandled promise rejection
+ *   as `helix-preview-console`, an uncaught one marked `uncaught`, which marks
+ *   the preview `failed`.
  * - Posts `helix-preview-size` whenever what was drawn changes height.
  * - Posts `helix-preview-press` on every press, so menus outside close.
  *
@@ -63,3 +64,9 @@ export declare const loggedText: (value: unknown) => string;
  * @returns A function that stops serving and puts the console back.
  */
 export declare const servePreview: (options?: ServePreviewOptions) => (() => void);
+/**
+ * Markup with a script after it, run as a module once the markup is in: what
+ * a sandbox's `js` pane adds to its `html` pane.
+ */
+export declare const withScript: (source: string, script: string) => string;
+export declare const defaultFrame: () => string;

package/dist/sandbox/frame.js

@@ -51,13 +51,14 @@ const drawn = (child) => {
         .map((node) => node.getBoundingClientRect())
         .filter((box) => box.width > 0 || box.height > 0);
 };
-export const servePreview = (options = {}) => {
+const serveWith = (tools, options = {}) => {
+    const { drawn, isRender, layoutRules, loggedText, runScripts, withoutStylesheets } = tools;
     const root = options.root ?? document.getElementById('preview-root') ?? document.body;
     root.toggleAttribute('data-preview-root', true);
     root.dataset.layout ??= 'padded';
     if (options.layouts !== false) {
         const rules = document.createElement('style');
-        rules.textContent = LAYOUT_RULES;
+        rules.textContent = layoutRules;
         document.head.prepend(rules);
     }
     const post = (message) => window.parent?.postMessage(message, '*');
@@ -73,6 +74,16 @@ export const servePreview = (options = {}) => {
     const failed = (event) => {
         post({ level: 'error', text: event.message, type: 'helix-preview-console', uncaught: true });
     };
+    const refused = (event) => {
+        const { reason } = event;
+        const said = reason instanceof Error ? `${reason.name}: ${reason.message}` : loggedText(reason);
+        post({
+            level: 'error',
+            text: `Uncaught (in promise) ${said}`,
+            type: 'helix-preview-console',
+            uncaught: true,
+        });
+    };
     const measure = () => {
         const boxes = [...root.children].flatMap(drawn);
         if (boxes.length === 0) {
@@ -130,6 +141,7 @@ export const servePreview = (options = {}) => {
     watch();
     const press = () => post({ type: 'helix-preview-press' });
     window.addEventListener('error', failed);
+    window.addEventListener('unhandledrejection', refused);
     window.addEventListener('message', render);
     document.addEventListener('pointerdown', press, { capture: true, passive: true });
     post({ type: 'helix-preview-ready' });
@@ -140,7 +152,27 @@ export const servePreview = (options = {}) => {
         watcher.disconnect();
         children.disconnect();
         window.removeEventListener('error', failed);
+        window.removeEventListener('unhandledrejection', refused);
         window.removeEventListener('message', render);
         document.removeEventListener('pointerdown', press, { capture: true });
     };
 };
+const TOOLS = {
+    drawn,
+    isRender,
+    layoutRules: LAYOUT_RULES,
+    loggedText,
+    runScripts,
+    withoutStylesheets,
+};
+export const servePreview = (options = {}) => serveWith(TOOLS, options);
+let builtIn;
+export const withScript = (source, script) => script === '' ? source : `${source}<script type="module">${script}${SCRIPT_END}`;
+const SCRIPT_END = ['<', 'script>'].join('/');
+export const defaultFrame = () => {
+    if (builtIn === undefined) {
+        const script = `(${serveWith})({drawn:${drawn},isRender:${isRender},layoutRules:${JSON.stringify(LAYOUT_RULES)},loggedText:${loggedText},runScripts:${runScripts},withoutStylesheets:${withoutStylesheets}})`;
+        builtIn = `<!doctype html><html><head><meta charset="utf-8"><meta content="width=device-width" name="viewport"><style>:root{color-scheme:light dark;font-family:system-ui,sans-serif}body{margin:0}</style></head><body><div id="preview-root"></div><script>${script.replaceAll('</', '<\\/')}${SCRIPT_END}</body></html>`;
+    }
+    return builtIn;
+};

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

@@ -48,6 +48,12 @@ export type PreviewMessage = PreviewConsole | PreviewPress | PreviewReady | Prev
  * document imports what the examples need, listens for a render message, and
  * writes the markup into itself.
  *
+ * **Without `src`, the frame loads a built-in document**, so a sandbox renders
+ * with nothing to host. It runs HTML, CSS, and scripts, and reports the
+ * console, uncaught errors, its height, and presses as a frame on
+ * `servePreview` does. It defines no element, so an example that uses Helix
+ * components needs a `src` that imports them.
+ *
  * **Examples render in a frame**, so an example's styles and scripts do not
  * affect the page around the sandbox, and `position: fixed` stays inside the
  * pane. The frame starts empty, with its own stylesheets and its own custom
@@ -128,12 +134,18 @@ export declare class HelixSandboxPreview extends HelixElement {
      * could read it.
      */
     layout?: 'padded' | 'centered' | 'fullscreen' | 'hug';
+    /**
+     * A script to run as a module after the markup, on every render of new
+     * source. A sandbox writes its `js` pane here.
+     */
+    script: string;
     /**
      * Markup to render.
      */
     source: string;
     /**
      * The document the frame loads. It provides the styles and the elements.
+     * Empty loads the built-in document, which defines no element.
      */
     src: string;
     /**
@@ -142,6 +154,12 @@ export declare class HelixSandboxPreview extends HelixElement {
     styles: string;
     /** Whether the frame has said it is listening. */
     private ready;
+    /** The source the frame was last sent, which it holds and does not run again. */
+    private sentSource;
+    /** The source the frame held when it last reported an uncaught error. */
+    private failedSource;
+    /** What the frame is sent as its source: the markup, and the script after it. */
+    private get sending();
     private get frame();
     /**
      * The frame's document has finished loading, so its listener exists, the
@@ -238,7 +256,10 @@ export declare class HelixSandboxPreview extends HelixElement {
      * new document announces itself the same way the first one did.
      */
     reload(): void;
-    /** A new document is on its way, so nothing is sent until it listens, and nothing has failed in it. */
+    /**
+     * A new document is on its way, so nothing is sent until it listens, and
+     * nothing has failed in it. The built-in document loads too.
+     */
     private unready;
     protected updated(changed: PropertyValues): void;
     protected render(): TemplateResult;

package/dist/sandbox/preview/sandbox-preview.js

@@ -7,13 +7,15 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 var HelixSandboxPreview_1;
 import { customElement, DelayController, HelixConsoleEvent, HelixElement, HelixResizeEvent, words, } from '@fusion.dev/helix-core';
 const SETTLE = 120;
-import { html } from 'lit';
+import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
+import { defaultFrame, withScript } from '../frame.js';
 import { styles as sheet } from './sandbox-preview.css.js';
 let HelixSandboxPreview = class HelixSandboxPreview extends HelixElement {
     constructor() {
         super(...arguments);
         this.label = 'Preview';
+        this.script = '';
         this.source = '';
         this.src = '';
         this.styles = '';
@@ -35,6 +37,7 @@ let HelixSandboxPreview = class HelixSandboxPreview extends HelixElement {
             if (data?.type === 'helix-preview-console') {
                 this.dispatchEvent(new HelixConsoleEvent({ level: data.level, text: data.text }));
                 if (data.uncaught) {
+                    this.failedSource = this.sentSource;
                     this.toggleState('failed', true);
                 }
             }
@@ -49,13 +52,18 @@ let HelixSandboxPreview = class HelixSandboxPreview extends HelixElement {
     }
     static { HelixSandboxPreview_1 = this; }
     static { this.words = 'helix-sandbox-preview'; }
+    get sending() {
+        return withScript(this.source, this.script);
+    }
     get frame() {
         return this.renderRoot.querySelector('iframe');
     }
     static { this.target = '*'; }
     scheduleSend() {
         this.settle.start(SETTLE, () => {
-            this.toggleState('failed', false);
+            if (this.sending !== this.failedSource) {
+                this.toggleState('failed', false);
+            }
             this.send();
         });
     }
@@ -67,11 +75,12 @@ let HelixSandboxPreview = class HelixSandboxPreview extends HelixElement {
             ...(this.colorMode ? { colorMode: this.colorMode } : {}),
             direction: this.direction ?? 'ltr',
             layout: this.layout ?? 'padded',
-            source: this.source,
+            source: this.sending,
             styles: this.styles,
             type: 'helix-preview-render',
         };
         this.frame?.contentWindow?.postMessage(message, HelixSandboxPreview_1.target);
+        this.sentSource = this.sending;
     }
     connectedCallback() {
         super.connectedCallback();
@@ -87,12 +96,18 @@ let HelixSandboxPreview = class HelixSandboxPreview extends HelixElement {
             return;
         }
         this.unready();
+        if (this.src === '') {
+            frame.srcdoc = defaultFrame();
+            return;
+        }
         frame.src = this.src;
     }
     unready() {
         this.ready = false;
+        this.sentSource = undefined;
+        this.failedSource = undefined;
         this.toggleState('failed', false);
-        this.toggleState('loading', this.src !== '');
+        this.toggleState('loading', true);
     }
     updated(changed) {
         super.updated(changed);
@@ -100,7 +115,7 @@ let HelixSandboxPreview = class HelixSandboxPreview extends HelixElement {
             this.unready();
             return;
         }
-        if (changed.has('source') || changed.has('styles')) {
+        if (changed.has('source') || changed.has('script') || changed.has('styles')) {
             this.scheduleSend();
             return;
         }
@@ -110,7 +125,8 @@ let HelixSandboxPreview = class HelixSandboxPreview extends HelixElement {
         return html `<iframe
       part="frame"
       @load=${this.handleFrameLoad}
-      src=${this.src}
+      src=${this.src || nothing}
+      srcdoc=${this.src === '' ? defaultFrame() : nothing}
       title=${this.label}
       allow="clipboard-write *; fullscreen *"
       sandbox="allow-scripts allow-forms"
@@ -131,6 +147,9 @@ __decorate([
 __decorate([
     property()
 ], HelixSandboxPreview.prototype, "layout", void 0);
+__decorate([
+    property()
+], HelixSandboxPreview.prototype, "script", void 0);
 __decorate([
     property()
 ], HelixSandboxPreview.prototype, "source", void 0);

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

@@ -11,9 +11,10 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
  * alone.
  *
  * The event carries the pane's `name`, so one sandbox can hold several panes.
- * `html` sets the preview's markup and `css` sets its stylesheet. The sandbox
- * ignores a pane with any other name, so that pane can show content without
- * changing the preview.
+ * `html` sets the preview's markup, `css` sets its stylesheet, and `js` sets
+ * a script that runs as a module after the markup. The sandbox ignores a pane
+ * with any other name, so that pane can show content without changing the
+ * preview.
  *
  * **The dividers are two nested `helix-splitter` elements**, which handle the
  * pointer, the keyboard, and the corner. The inner splitter holds the panes and

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

@@ -12,6 +12,8 @@ import { styles } from './sandbox-root.css.js';
 const DEFAULT_SPLIT = 50;
 const DEFAULT_PANEL = 160;
 const PANEL_MAX = 0.8;
+const PANE_KEYS = { css: 'styles', html: 'source', js: 'script' };
+const isPaneName = (name) => typeof name === 'string' && Object.hasOwn(PANE_KEYS, name);
 let HelixSandbox = class HelixSandbox extends HelixElement {
     constructor() {
         super(...arguments);
@@ -38,7 +40,7 @@ let HelixSandbox = class HelixSandbox extends HelixElement {
             const { value } = event.detail;
             const pane = event.composedPath()[0];
             const name = pane?.name;
-            if (name !== 'css' && name !== 'html') {
+            if (!isPaneName(name)) {
                 return;
             }
             queueMicrotask(() => {
@@ -52,7 +54,7 @@ let HelixSandbox = class HelixSandbox extends HelixElement {
             for (const pane of slot?.assignedElements({ flatten: true }) ?? []) {
                 const { name, value } = pane;
                 const text = typeof value === 'string' ? value : pane.getAttribute('value');
-                if ((name === 'css' || name === 'html') && text) {
+                if (isPaneName(name) && text) {
                     this.write(name, text, true);
                 }
             }
@@ -147,7 +149,7 @@ let HelixSandbox = class HelixSandbox extends HelixElement {
     }
     write(name, value, seeding) {
         for (const preview of this.previews) {
-            const key = name === 'css' ? 'styles' : 'source';
+            const key = PANE_KEYS[name];
             if (!seeding || !preview[key]) {
                 preview[key] = value;
             }

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

@@ -1,4 +1,4 @@
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {display: block;overflow-x: auto;}[part="table"] {display: grid;grid-template-columns: var(--table-columns, var(--table-template, minmax(0, 1fr)));inline-size: 100%;}[part="head"] {display: contents;}::slotted([slot="heading"]) {color: var(--table-title-color, var(--helix-color-foreground));display: block;font-family: var(--helix-font-sans);font-size: var(--table-title-text, var(--helix-text-md));font-weight: var(--helix-weight-semibold);margin-block: var(--helix-space-none) var(--table-title-gap, var(--helix-space-sm));}[part="select-all"] {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-loose);padding-inline: var(--helix-space-none) var(--helix-space-md);}[part="grip-head"] {border-block-end: var(--helix-border-thin) solid var(--helix-color-border);box-sizing: border-box;min-block-size: var(--helix-size-control-loose);}[part="grip-head"]:focus-visible,
-[part="select-all"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}:host([loading]) [part="table"] {opacity: 0.5;}[part="drag-preview"] {background-color: var(--table-drag-preview-background-color, var(--helix-color-surface-raised));border: var(--table-drag-preview-border-width, var(--helix-border-floating)) solid
+[part="select-all"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}[part="error"] {color: var(--table-error-color, var(--helix-color-foreground));font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);margin: var(--helix-space-none);padding-block: var(--helix-space-md);padding-inline: var(--helix-space-sm);text-align: center;}:host([loading]) [part="table"] {opacity: 0.5;}[part="drag-preview"] {background-color: var(--table-drag-preview-background-color, var(--helix-color-surface-raised));border: var(--table-drag-preview-border-width, var(--helix-border-floating)) solid
 var(--table-drag-preview-border-color, var(--helix-color-border));border-radius: var(--table-drag-preview-radius, var(--helix-radii-sm));box-shadow: var(--table-drag-preview-shadow, var(--helix-shadow-floating));opacity: var(--table-drag-preview-opacity, 0.9);}@media print {:host {print-color-adjust: economy;}}`);

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

@@ -15,6 +15,7 @@ import '../../checkbox/index.js';
  *
  * @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 error - Content shown while `error-text` is set, such as a button that tries again. Falls back to `error-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.
  *
@@ -29,6 +30,7 @@ import '../../checkbox/index.js';
  * @cssproperty --table-drag-preview-opacity - The opacity of the copy of a row a pointer drags.
  * @cssproperty --table-drag-preview-radius - The corner radius of the copy of a row a pointer drags.
  * @cssproperty --table-drag-preview-shadow - The shadow that raises the copy of a row a pointer drags over the page.
+ * @cssproperty --table-error-color - The color of the words in the line shown while `error-text` is set.
  * @cssproperty --table-title-color - The color of the words in the `heading` slot.
  * @cssproperty --table-title-gap - The space between the `heading` slot and the grid.
  * @cssproperty --table-title-text - The font size of the words in the `heading` slot.

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

@@ -1,7 +1,8 @@
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`[part="field"] {align-items: center;background-color: var(--time-input-background-color, var(--helix-color-well));flex-wrap: wrap;min-block-size: var(--helix-size-control);padding-block: var(--helix-space-2xs);border: var(--helix-border-thin) solid var(--helix-color-border);border-radius: var(--helix-radii-sm);display: flex;gap: var(--helix-space-2xs);padding-inline: var(--helix-space-xs);transition:
 background-color var(--helix-duration-fast) var(--helix-easing-standard),
-border-color var(--helix-duration-fast) var(--helix-easing-standard);}:host(:disabled) [part="field"] {color: var(--helix-color-foreground-subtle);}[part="trigger"] {--icon-size: var(--helix-size-icon);all: unset;align-items: center;box-sizing: border-box;color: var(--helix-color-foreground-muted);cursor: pointer;display: flex;flex: none;transition: color var(--helix-duration-fast) var(--helix-easing-standard);}:host(:not([mode="multiple"])) [part="field"] {flex-wrap: nowrap;}[part="trigger-icon"] {block-size: var(--icon-size);inline-size: var(--icon-size);}[part="trigger"]:hover {color: var(--helix-color-foreground);}[part="trigger"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}:host(:disabled) [part="trigger"] {cursor: not-allowed;}[part="surface"] {--_floating-border-color: var(--time-input-border-color, var(--helix-color-border));--_floating-border-width: var(--time-input-border-width, var(--helix-border-floating));--_floating-shadow: var(--time-input-shadow, var(--helix-shadow-floating));inline-size: var(--floating-anchor-inline-size, 100%);min-inline-size: max-content;overflow: hidden;padding-block: var(--helix-space-2xs);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"],
+border-color var(--helix-duration-fast) var(--helix-easing-standard);}slot[name="start"]::slotted(*),
+slot[name="end"]::slotted(*) {color: var(--helix-color-foreground-subtle);flex: none;}:host(:disabled) [part="field"] {color: var(--helix-color-foreground-subtle);}[part="trigger"] {--icon-size: var(--helix-size-icon);all: unset;align-items: center;box-sizing: border-box;color: var(--helix-color-foreground-muted);cursor: pointer;display: flex;flex: none;transition: color var(--helix-duration-fast) var(--helix-easing-standard);}:host(:not([mode="multiple"])) [part="field"] {flex-wrap: nowrap;}[part="trigger-icon"] {block-size: var(--icon-size);inline-size: var(--icon-size);}[part="trigger"]:hover {color: var(--helix-color-foreground);}[part="trigger"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}:host(:disabled) [part="trigger"] {cursor: not-allowed;}[part="surface"] {--_floating-border-color: var(--time-input-border-color, var(--helix-color-border));--_floating-border-width: var(--time-input-border-width, var(--helix-border-floating));--_floating-shadow: var(--time-input-shadow, var(--helix-shadow-floating));inline-size: var(--floating-anchor-inline-size, 100%);min-inline-size: max-content;overflow: hidden;padding-block: var(--helix-space-2xs);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"] {transition: none;}}:host([variant="wheels"]) [part="surface"] {inline-size: max-content;}[part="time"] {flex: none;}:host([mode="multiple"]) [part="control"] {flex-basis: 0;min-inline-size: var(--helix-size-icon-loose);}[part="segments"] {--_segment-focus-background-color: var(
 --time-input-segment-focus-background-color,
 var(--helix-color-primary)

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

@@ -1,5 +1,5 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: block;}[part="list"] {--listbox-max-block-size: var(
+export const styles = createSheet(`:host {display: block;}[part="label"] {color: var(--helix-color-foreground);display: block;font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);font-weight: var(--helix-weight-medium);line-height: var(--helix-leading-tight);padding-block-end: var(--helix-space-2xs);}[part="list"] {--listbox-max-block-size: var(
 --time-picker-list-block-size,
 calc(var(--helix-size-control-tight) * 7)
 );display: block;}[part="list"]::part(items) {background-color: transparent;border: none;border-radius: var(--helix-radii-none);padding-block: var(--helix-space-none);}:host([mode="range"]) [part~="option"]:state(selected)::part(item) {background-color: var(--helix-color-surface-inverse);color: var(--helix-color-foreground-inverse);}[part~="option"][data-between]::part(item) {background-color: var(
@@ -20,4 +20,4 @@ var(--time-picker-invalid-color, var(--helix-color-danger));outline-offset: var(
 :host([invalid]) [part="columns"][data-unset],
 :host(:state(invalid)) [part="list"][data-unset],
 :host(:state(invalid)) [part="columns"][data-unset] {border-radius: var(--helix-radii-sm);outline: var(--helix-size-focus-ring) solid
-var(--time-picker-invalid-color, var(--helix-color-danger));outline-offset: var(--helix-size-focus-offset);}[part="feedback"] {color: var(--time-picker-feedback-color, var(--helix-color-danger));font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);margin: var(--helix-space-sm) var(--helix-space-none) var(--helix-space-none);}@media print {:host {print-color-adjust: exact;}}`);
+var(--time-picker-invalid-color, var(--helix-color-danger));outline-offset: var(--helix-size-focus-offset);}[part="hint"] {color: var(--helix-color-foreground-subtle);font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);margin: var(--helix-space-sm) var(--helix-space-none) var(--helix-space-none);}[part="feedback"] {color: var(--time-picker-feedback-color, var(--helix-color-danger));font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);margin: var(--helix-space-sm) var(--helix-space-none) var(--helix-space-none);}@media print {:host {print-color-adjust: exact;}}`);

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

@@ -1,8 +1,8 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {column-gap: var(--helix-space-md);display: grid;grid-template-columns: var(--_timeline-columns, auto minmax(0, 1fr));grid-template-rows: var(--_timeline-rows, auto minmax(0, 1fr));}[part="rail"] {align-items: var(--_timeline-rail-align, normal);display: grid;grid-column: var(--_timeline-rail-column, auto);grid-row: var(--_timeline-rail-row, 1 / -1);grid-template-columns: var(--_timeline-rail-columns, none);grid-template-rows: var(--_timeline-rail-rows, subgrid);justify-items: var(--_timeline-rail-justify, center);}[part="rail"]::before {background-color: var(--helix-color-border);block-size: 100%;content: "";display: var(--_timeline-arrive-display, block);grid-column: 1;grid-row: 1;inline-size: var(--timeline-rail-size, var(--helix-border-thin));}:host(:first-child) [part="rail"]::before {visibility: hidden;}[part="rail"]::after {align-self: var(--_timeline-leave-align, stretch);background-color: var(--helix-color-border);block-size: var(--_timeline-leave-block-size, auto);content: "";grid-column: var(--_timeline-leave-column, 1);grid-row: var(--_timeline-leave-row, 2);inline-size: var(
+export const styles = createSheet(`:host {column-gap: var(--timeline-column-gap, var(--helix-space-md));display: grid;grid-template-columns: var(--_timeline-columns, auto minmax(0, 1fr));grid-template-rows: var(--_timeline-rows, auto minmax(0, 1fr));}[part="rail"] {align-items: var(--_timeline-rail-align, normal);display: grid;grid-column: var(--_timeline-rail-column, auto);grid-row: var(--_timeline-rail-row, 1 / -1);grid-template-columns: var(--_timeline-rail-columns, none);grid-template-rows: var(--_timeline-rail-rows, subgrid);justify-items: var(--_timeline-rail-justify, center);}[part="rail"]::before {background-color: var(--timeline-rail-color, var(--helix-color-border));block-size: 100%;content: "";display: var(--_timeline-arrive-display, block);grid-column: 1;grid-row: 1;inline-size: var(--timeline-rail-size, var(--helix-border-thin));}:host(:first-child) [part="rail"]::before {visibility: hidden;}[part="rail"]::after {align-self: var(--_timeline-leave-align, stretch);background-color: var(--timeline-rail-color, var(--helix-color-border));block-size: var(--_timeline-leave-block-size, auto);content: "";grid-column: var(--_timeline-leave-column, 1);grid-row: var(--_timeline-leave-row, 2);inline-size: var(
 --_timeline-leave-inline-size,
 var(--timeline-rail-size, var(--helix-border-thin))
 );justify-self: var(--_timeline-leave-justify, auto);margin-block-start: var(
 --_timeline-leave-margin-block,
 var(--timeline-marker-size, var(--helix-size-icon-md))
-);}:host(:last-child) [part="rail"]::after {visibility: hidden;}[part="marker"] {--icon-size: var(--helix-size-icon-sm);align-items: center;align-self: start;aspect-ratio: 1;border-radius: var(--timeline-marker-radius, var(--helix-radii-full));color: var(--_timeline-tone, var(--helix-color-foreground-subtle));display: inline-flex;grid-column: 1;grid-row: var(--_timeline-marker-row, 2);inline-size: var(--timeline-marker-size, var(--helix-size-icon-md));justify-content: center;}[part="dot"] {block-size: var(--helix-size-icon-sm);inline-size: var(--helix-size-icon-sm);}:host([tone="danger"]) {--_timeline-tone: var(--helix-color-danger);}:host([tone="info"]) {--_timeline-tone: var(--helix-color-info);}:host([tone="neutral"]) {--_timeline-tone: var(--helix-color-foreground-muted);}:host([tone="primary"]) {--_timeline-tone: var(--helix-color-primary);}:host([tone="success"]) {--_timeline-tone: var(--helix-color-success);}:host([tone="warning"]) {--_timeline-tone: var(--helix-color-warning);}[part="time"] {color: var(--helix-color-foreground-muted);font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);font-weight: var(--helix-weight-medium);grid-column: var(--_timeline-time-column, 2);grid-row: var(--_timeline-time-row, 1);padding-block-end: var(--helix-space-2xs);text-align: var(--_timeline-time-align);}[part="content"] {display: flex;flex-direction: column;gap: var(--helix-space-2xs);grid-column: var(--_timeline-content-column, 2);grid-row: var(--_timeline-content-row, 2);min-inline-size: 0;padding-block-end: var(--_timeline-content-block-end, var(--timeline-gap, var(--helix-space-lg)));padding-inline-end: var(--_timeline-content-inline-end, var(--helix-space-none));}:host(:last-child) [part="content"] {padding-block-end: var(--helix-space-none);padding-inline-end: var(--helix-space-none);}:host(:nth-child(even)) [part="time"] {grid-column: var(--_timeline-even-column, var(--_timeline-time-column, 2));text-align: var(--_timeline-even-align, var(--_timeline-time-align));}:host(:nth-child(even)) [part="content"] {grid-column: var(--_timeline-even-column, var(--_timeline-content-column, 2));text-align: var(--_timeline-even-align);}`);
+);}:host(:last-child) [part="rail"]::after {visibility: hidden;}[part="marker"] {--icon-size: var(--helix-size-icon-sm);align-items: center;align-self: start;aspect-ratio: 1;border-radius: var(--timeline-marker-radius, var(--helix-radii-full));color: var(--_timeline-tone, var(--timeline-marker-color, var(--helix-color-foreground-subtle)));display: inline-flex;grid-column: 1;grid-row: var(--_timeline-marker-row, 2);inline-size: var(--timeline-marker-size, var(--helix-size-icon-md));justify-content: center;}[part="dot"] {block-size: var(--helix-size-icon-sm);inline-size: var(--helix-size-icon-sm);}:host([tone="danger"]) {--_timeline-tone: var(--helix-color-danger);}:host([tone="info"]) {--_timeline-tone: var(--helix-color-info);}:host([tone="neutral"]) {--_timeline-tone: var(--helix-color-foreground-muted);}:host([tone="primary"]) {--_timeline-tone: var(--helix-color-primary);}:host([tone="success"]) {--_timeline-tone: var(--helix-color-success);}:host([tone="warning"]) {--_timeline-tone: var(--helix-color-warning);}[part="time"] {color: var(--timeline-time-color, var(--helix-color-foreground-muted));font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);font-weight: var(--helix-weight-medium);grid-column: var(--_timeline-time-column, 2);grid-row: var(--_timeline-time-row, 1);padding-block-end: var(--helix-space-2xs);text-align: var(--_timeline-time-align);}[part="content"] {display: flex;flex-direction: column;gap: var(--helix-space-2xs);grid-column: var(--_timeline-content-column, 2);grid-row: var(--_timeline-content-row, 2);min-inline-size: 0;padding-block-end: var(--_timeline-content-block-end, var(--timeline-gap, var(--helix-space-lg)));padding-inline-end: var(--_timeline-content-inline-end, var(--helix-space-none));}:host(:last-child) [part="content"] {padding-block-end: var(--helix-space-none);padding-inline-end: var(--helix-space-none);}:host(:nth-child(even)) [part="time"] {grid-column: var(--_timeline-even-column, var(--_timeline-time-column, 2));text-align: var(--_timeline-even-align, var(--_timeline-time-align));}:host(:nth-child(even)) [part="content"] {grid-column: var(--_timeline-even-column, var(--_timeline-content-column, 2));text-align: var(--_timeline-even-align);}`);

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

@@ -13,9 +13,13 @@ import type { CSSResultGroup } from 'lit';
  * @aliases Activity item, History entry, Event
  * @documentation https://fusion.dev/helix/components/timeline
  *
+ * @cssproperty --timeline-column-gap - Space between the rail and the time and what happened.
+ * @cssproperty --timeline-marker-color - The color of the mark on an entry with no `tone`. A `tone` colors the mark itself.
  * @cssproperty --timeline-marker-radius - How round the mark is. Zero is a square, and half its size is a disc.
  * @cssproperty --timeline-marker-size - Edge length of the mark.
+ * @cssproperty --timeline-rail-color - The color of the line.
  * @cssproperty --timeline-rail-size - Width of the line.
+ * @cssproperty --timeline-time-color - The color of the time.
  */
 export declare class HelixTimelineItem extends HelixHeadlessTimelineItem {
     static styles: CSSResultGroup;

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

@@ -20,6 +20,10 @@ import type { CSSResultGroup } from 'lit';
  *   side by side in the order they are read, and the time over what happened
  *   under each mark. Use it for a few entries, since they share the width.
  *
+ * An entry's custom properties, such as `--timeline-rail-color` and
+ * `--timeline-marker-size`, inherit, so setting them on the timeline changes
+ * every entry in it.
+ *
  * @since 0.1.0
  * @status stable
  * @category data

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

@@ -6,9 +6,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessVideoPlaylist } from '@fusion.dev/helix-headless/video-playlist';
+import { styles as liveStyles } from '../../shared/live/live.css.js';
 import { styles } from './video-playlist-root.css.js';
 let HelixVideoPlaylist = class HelixVideoPlaylist extends HelixHeadlessVideoPlaylist {
-    static { this.styles = styles; }
+    static { this.styles = [liveStyles, styles]; }
 };
 HelixVideoPlaylist = __decorate([
     customElement('helix-video-playlist')

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="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"],
+);color: var(--virtual-list-selected-color, inherit);}[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;}}`);