@fusion.dev/helix 0.150.0 → 0.152.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/app-header/root/app-header-root.css.js

@@ -2,4 +2,9 @@ import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {--helix-size-checkbox: var(--helix-size-checkbox-sm);--helix-size-checkbox-loose: calc(var(--helix-size-checkbox) * 1.2);--helix-size-checkbox-tight: calc(var(--helix-size-checkbox) * 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);--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-tag: var(--helix-size-tag-sm);background-color: var(--app-header-background-color, var(--helix-color-background));border-block-end: var(--helix-border-thin) solid var(--app-header-border-color, transparent);container-type: inline-size;display: block;inline-size: 100%;transition:
 backdrop-filter var(--helix-duration-normal) var(--helix-easing-standard),
 background-color var(--helix-duration-normal) var(--helix-easing-standard),
-border-color var(--helix-duration-normal) var(--helix-easing-standard);}:host([material="glass"]) {backdrop-filter: var(--app-header-backdrop, var(--helix-material-backdrop));background-color: var(--app-header-background-color, var(--helix-material-translucent));}:host([material="frosted"]) {backdrop-filter: var(--app-header-backdrop, blur(var(--helix-material-blur-lg)));background-color: var(--app-header-background-color, var(--helix-material-translucent-strong));}:host([material="transparent"]) {background-color: var(--app-header-background-color, transparent);}:host([material="transparent"]:state(scrolled)) {backdrop-filter: var(--app-header-backdrop, var(--helix-material-backdrop));background-color: var(--app-header-background-color, var(--helix-material-translucent));}:host([sticky]) {inset-block-start: 0;position: sticky;z-index: var(--helix-layer-sticky);}[part="row"] {align-items: center;block-size: var(--app-header-block-size, var(--helix-size-header));display: grid;gap: var(--helix-space-lg);grid-template-columns: minmax(max-content, 1fr) minmax(0, auto) minmax(max-content, 1fr);margin-inline: auto;max-inline-size: var(--app-header-max-inline-size, 72rem);padding-inline: var(--app-header-padding, var(--helix-space-lg));}[part="start"] {align-items: center;display: flex;min-inline-size: 0;}[part="end"] {align-items: center;display: flex;gap: var(--helix-space-xs);justify-content: flex-end;min-inline-size: 0;}:host([content-align="start"]) [part="row"] {grid-template-columns: auto 1fr auto;}slot[name="start"]::slotted(*) {align-items: center;color: var(--helix-color-foreground);display: flex;flex: 0 0 auto;font-weight: var(--helix-weight-semibold);gap: var(--helix-space-xs);letter-spacing: var(--helix-tracking-tight);}[part="content"] {align-items: center;display: flex;position: relative;gap: var(--helix-space-md);justify-content: safe center;min-inline-size: 0;overflow-x: auto;}:host([content-align="start"]) [part="content"] {justify-content: flex-start;}@container (inline-size < 24rem) {[part="row"] {gap: var(--helix-space-md);padding-inline: var(--app-header-padding, var(--helix-space-md));}}@media print {:host {display: none;}}`);
+border-color var(--helix-duration-normal) var(--helix-easing-standard);}:host([material="glass"]) {backdrop-filter: var(--app-header-backdrop, var(--helix-material-backdrop));background-color: var(--app-header-background-color, var(--helix-material-translucent));}:host([material="frosted"]) {backdrop-filter: var(--app-header-backdrop, blur(var(--helix-material-blur-lg)));background-color: var(--app-header-background-color, var(--helix-material-translucent-strong));}:host([material="transparent"]) {background-color: var(--app-header-background-color, transparent);}:host([material="transparent"]:state(scrolled)) {backdrop-filter: var(--app-header-backdrop, var(--helix-material-backdrop));background-color: var(--app-header-background-color, var(--helix-material-translucent));}:host([sticky]) {inset-block-start: 0;position: sticky;z-index: var(--helix-layer-sticky);}[part="row"] {align-items: center;block-size: var(--app-header-block-size, var(--helix-size-header));display: grid;gap: var(--helix-space-lg);grid-template-columns: minmax(max-content, 1fr) minmax(0, auto) minmax(max-content, 1fr);margin-inline: auto;max-inline-size: var(--app-header-max-inline-size, 72rem);padding-inline: var(--app-header-padding, var(--helix-space-lg));}[part="start"] {align-items: center;display: flex;min-inline-size: 0;}[part="end"] {align-items: center;display: flex;gap: var(--helix-space-xs);justify-content: flex-end;min-inline-size: 0;}:host([content-align="start"]) [part="row"] {grid-template-columns: auto 1fr auto;}slot[name="start"]::slotted(*) {align-items: center;color: var(--helix-color-foreground);display: flex;flex: 0 0 auto;font-weight: var(--helix-weight-semibold);gap: var(--helix-space-xs);letter-spacing: var(--helix-tracking-tight);}[part="content"] {align-items: center;display: flex;position: relative;gap: var(--helix-space-md);justify-content: safe center;min-inline-size: 0;overflow-x: auto;}:host([content-align="start"]) [part="content"] {justify-content: flex-start;}@container (inline-size < 24rem) {[part="row"] {gap: var(--helix-space-md);padding-inline: var(--app-header-padding, var(--helix-space-md));}}:host([sticky]) {transition:
+backdrop-filter var(--helix-duration-normal) var(--helix-easing-standard),
+background-color var(--helix-duration-normal) var(--helix-easing-standard),
+border-color var(--helix-duration-normal) var(--helix-easing-standard),
+translate var(--helix-duration-normal) var(--helix-easing-standard);}:host([sticky]:state(hidden)) {translate: 0 -100%;}:host(:state(folded)) [part="row"] {block-size: auto;grid-template-columns: minmax(0, 1fr) auto;grid-template-rows: var(--app-header-block-size, var(--helix-size-header));row-gap: var(--helix-space-none);}:host(:state(folded)) [part="content"] {align-items: stretch;flex-direction: column;grid-column: 1 / -1;grid-row: 2;justify-content: flex-start;overflow-x: visible;padding-block-end: var(--helix-space-sm);}[part="content"][hidden] {display: none;}[part="toggle"] {all: unset;box-sizing: border-box;align-items: center;block-size: var(--helix-size-control);border-radius: var(--helix-radii-sm);color: var(--helix-color-foreground-muted);cursor: pointer;display: inline-flex;inline-size: var(--helix-size-control);justify-content: center;}[part="toggle"] svg {block-size: var(--helix-size-icon);inline-size: var(--helix-size-icon);}[part="toggle"]:hover,
+:host(:state(open)) [part="toggle"] {background-color: color-mix(in oklab, var(--helix-color-foreground) 8%, transparent);color: var(--helix-color-foreground);}[part="toggle"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}@media (prefers-reduced-motion: reduce) {:host([sticky]) {transition: none;}}@media print {:host {display: none;}}`);

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/navigation/root/navigation-root.css.js

@@ -1,5 +1,5 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: block;}[part="nav"] {align-items: center;block-size: var(--navigation-block-size, var(--helix-size-control-sm));display: flex;gap: var(--navigation-gap, var(--helix-space-2xs));min-inline-size: 0;overflow-x: auto;position: relative;}[part="indicator"] {background-color: var(--navigation-indicator-color, var(--helix-color-surface-sunken));block-size: var(--indicator-block-size, 0);border-radius: var(--navigation-indicator-radius, var(--helix-radii-sm));box-shadow: var(--navigation-indicator-shadow, none);inline-size: var(--indicator-inline-size, 0);inset-block-start: 50%;inset-inline-start: 0;opacity: 0;position: absolute;translate: var(--indicator-x, 0) -50%;transition:
+export const styles = createSheet(`:host {display: block;}[part="nav"] {align-items: center;block-size: var(--navigation-block-size, var(--helix-size-control-sm));display: flex;gap: var(--navigation-gap, var(--helix-space-2xs));min-inline-size: 0;overflow-x: auto;position: relative;}::slotted(:is(ul, ol, [role="list"])) {align-items: center;block-size: 100%;display: flex;gap: var(--navigation-gap, var(--helix-space-2xs));list-style: none;margin: var(--helix-space-none);padding: var(--helix-space-none);}:host([orientation="vertical"]) ::slotted(:is(ul, ol, [role="list"])) {align-items: stretch;block-size: auto;flex-direction: column;}[part="indicator"] {background-color: var(--navigation-indicator-color, var(--helix-color-surface-sunken));block-size: var(--indicator-block-size, 0);border-radius: var(--navigation-indicator-radius, var(--helix-radii-sm));box-shadow: var(--navigation-indicator-shadow, none);inline-size: var(--indicator-inline-size, 0);inset-block-start: 50%;inset-inline-start: 0;opacity: 0;position: absolute;translate: var(--indicator-x, 0) -50%;transition:
 translate var(--helix-duration-normal) var(--helix-easing-emphasized),
 inline-size var(--helix-duration-normal) var(--helix-easing-emphasized),
 opacity var(--helix-duration-fast) var(--helix-easing-standard);z-index: var(--helix-layer-base);}[part="indicator"][data-placed] {opacity: 1;}:host([orientation="vertical"]) [part="nav"] {align-items: stretch;block-size: auto;flex-direction: column;overflow-x: visible;}:host([orientation="vertical"]) [part="indicator"] {inset-block-start: 0;translate: var(--indicator-x, 0) var(--indicator-y, 0);}@media print {:host {display: none;}}`);

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/steps/step/step.css.js

@@ -3,4 +3,4 @@ export const styles = createSheet(`:host {--_step-inset: var(--helix-space-sm);a
 :host::after {background-color: var(--steps-connector-color, var(--helix-color-border));content: "";position: absolute;z-index: 0;}:host::before {block-size: var(--_steps-lead-block-size, var(--helix-border-thin));inline-size: var(--_steps-lead-inline-size, 0);inset-block-start: var(--_steps-lead-block-start, 50%);inset-inline-start: var(--_steps-lead-inline-start, 0);}:host::after {block-size: var(--_steps-trail-block-size, var(--helix-border-thin));inline-size: var(--_steps-trail-inline-size, 0);inset-block-start: var(--_steps-trail-block-start, 50%);inset-inline-start: var(--_steps-trail-inline-start, 0);}:host(:first-child)::before,
 :host(:last-child)::after {display: none;}[part="marker"] {align-items: center;grid-column: var(--_steps-marker-column, 1);grid-row: 1;justify-self: var(--_steps-marker-justify, center);block-size: var(--_steps-mark-box, var(--helix-size-icon));box-sizing: border-box;color: var(--_steps-marker-color, var(--helix-color-border));display: inline-flex;flex: 0 0 auto;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);font-weight: var(--helix-weight-semibold);inline-size: var(--_steps-mark-box, var(--helix-size-icon));justify-content: center;position: relative;transition: color var(--helix-duration-fast) var(--helix-easing-standard);z-index: 1;}[part="marker"] slot {align-items: center;display: inline-flex;justify-content: center;}[part="marker"]::after {content: var(--_steps-count, none);}[part="marker"] svg {block-size: var(--_steps-m, var(--helix-size-icon));display: var(--_steps-mark, inline);flex: 0 0 auto;inline-size: var(--_steps-m, var(--helix-size-icon));}slot[name="marker"]::slotted(*) {--icon-size: var(--_steps-m, var(--helix-size-icon));}:host([complete]) [part="marker"] {color: var(--steps-complete-color, var(--_steps-ink-complete, var(--helix-color-success)));}:host([current]) [part="marker"] {color: var(--steps-current-color, var(--_steps-ink-current, var(--helix-color-primary)));}:host([complete][current]) [part="marker"] {color: var(--steps-complete-color, var(--_steps-ink-complete, var(--helix-color-success)));}[part="body"] {align-items: var(--_steps-body-align, center);grid-column: var(--_steps-body-column, 1);grid-row: var(--_steps-body-row, 2);display: flex;flex-direction: column;min-inline-size: 0;position: relative;z-index: 1;}[part="label"] {--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);--helix-space-control: var(--_step-inset);--helix-text-control: var(--helix-text-sm);--button-foreground-color: var(--helix-color-foreground-muted);max-inline-size: 100%;}:host([complete]) [part="label"],
 :host([current]) [part="label"] {--button-foreground-color: var(--helix-color-foreground);}[part="description"] {color: var(--helix-color-foreground-subtle);font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);padding-inline: var(--_step-inset);}:host([disabled]) [part="marker"],
-:host([disabled]) [part="description"] {opacity: 0.5;}[part="content"] {display: var(--_steps-content, none);grid-column: var(--_steps-body-column, 1);grid-row: calc(var(--_steps-body-row, 2) + 1);grid-template-rows: 0fr;padding-inline: var(--_step-inset);transition: grid-template-rows var(--helix-duration-normal) var(--helix-easing-standard);}:host([current]) [part="content"] {grid-template-rows: 1fr;}[part="content"] > slot {display: block;min-block-size: 0;overflow: hidden;}`);
+:host([disabled]) [part="description"] {opacity: 0.5;}[part="content"] {display: var(--_steps-content, none);grid-column: var(--_steps-body-column, 1);grid-row: calc(var(--_steps-body-row, 2) + 1);grid-template-rows: 0fr;padding-inline: var(--_step-inset);transition: grid-template-rows var(--helix-duration-normal) var(--helix-easing-standard);}:host([current]) [part="content"] {grid-template-rows: 1fr;}[part="content"] > slot {display: block;min-block-size: 0;overflow: hidden;transition: visibility var(--helix-duration-normal) var(--helix-easing-standard);visibility: hidden;}:host([current]) [part="content"] > slot {visibility: visible;}`);

package/dist/steps/step/step.d.ts

@@ -4,6 +4,16 @@ import '../../button/index.js';
 /**
  * @summary One stage in a sequence.
  *
+ * @description
+ * A step draws its mark, its name as a `helix-button`, and the line that joins
+ * it to the steps either side. The mark is a tick on a finished step, a dot
+ * on the current one, and an empty ring on one nobody has reached. Where the
+ * list sets `variant="numeric"`, it is the step's number.
+ *
+ * Down a column, the current step opens to show what is in its `content` slot,
+ * and the others collapse it. A collapsed stage's content is hidden, so Tab and
+ * a screen reader pass over it as well.
+ *
  * @since 0.1.0
  * @status stable
  * @aliases Stage

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`.