@fusion.dev/helix 0.187.0 → 0.189.0

package/dist/element-events.generated.js

@@ -144,13 +144,6 @@ registerElementEvents({
     'helix-icon-button': ['helix-press'],
     'helix-image': ['error', 'load'],
     'helix-input': ['change', 'helix-before-change', 'helix-clear', 'input'],
-    'helix-isometric-heatmap': [
-        'change',
-        'helix-before-change',
-        'helix-reading-change',
-        'helix-reading-press',
-        'helix-resize',
-    ],
     'helix-kbd': ['helix-shortcut'],
     'helix-legend': ['change', 'helix-before-change'],
     'helix-lightbox': [
@@ -270,6 +263,27 @@ registerElementEvents({
     ],
     'helix-slider': ['change', 'helix-before-change', 'input'],
     'helix-sparkline': ['helix-reading-change', 'helix-reading-press'],
+    'helix-spatial-heatmap': [
+        'change',
+        'helix-before-change',
+        'helix-plot-change',
+        'helix-plot-turn',
+        'helix-reading-change',
+        'helix-reading-press',
+        'helix-resize',
+    ],
+    'helix-spatial-scatter-chart': [
+        'helix-plot-change',
+        'helix-plot-turn',
+        'helix-reading-change',
+        'helix-reading-press',
+    ],
+    'helix-spatial-surface-chart': [
+        'helix-plot-change',
+        'helix-plot-turn',
+        'helix-reading-change',
+        'helix-reading-press',
+    ],
     'helix-speed-dial': ['helix-before-close', 'helix-before-open', 'helix-select', 'toggle'],
     'helix-speed-dial-item': ['helix-select'],
     'helix-splitter': [

package/dist/index.d.ts

@@ -53,7 +53,6 @@ export * from './icon/index.js';
 export * from './icon-button/index.js';
 export * from './image/index.js';
 export * from './input/index.js';
-export * from './isometric-heatmap/index.js';
 export * from './kbd/index.js';
 export * from './legend/index.js';
 export * from './lightbox/index.js';
@@ -89,6 +88,9 @@ export * from './skeleton/index.js';
 export * from './skip-link/index.js';
 export * from './slider/index.js';
 export * from './sparkline/index.js';
+export * from './spatial-heatmap/index.js';
+export * from './spatial-scatter-chart/index.js';
+export * from './spatial-surface-chart/index.js';
 export * from './speed-dial/index.js';
 export * from './splitter/index.js';
 export * from './stat/index.js';

package/dist/index.js

@@ -48,7 +48,6 @@ export * from './icon/index.js';
 export * from './icon-button/index.js';
 export * from './image/index.js';
 export * from './input/index.js';
-export * from './isometric-heatmap/index.js';
 export * from './kbd/index.js';
 export * from './legend/index.js';
 export * from './lightbox/index.js';
@@ -84,6 +83,9 @@ export * from './skeleton/index.js';
 export * from './skip-link/index.js';
 export * from './slider/index.js';
 export * from './sparkline/index.js';
+export * from './spatial-heatmap/index.js';
+export * from './spatial-scatter-chart/index.js';
+export * from './spatial-surface-chart/index.js';
 export * from './speed-dial/index.js';
 export * from './splitter/index.js';
 export * from './stat/index.js';

package/dist/orb/shapes.d.ts

@@ -6,8 +6,8 @@
  * the text somebody wrote, so `(typeof ORB_STATES)[number]` reached it as a name
  * with no values in it and the reference page listed none: a reader was told the
  * attribute takes an `OrbState` and left to find out what one is. A union on one
- * line is what every reader of this repository's sources can resolve, the `axes`
- * rule included, and no type system is needed to do it.
+ * line is what every reader of the source can resolve, a lint rule included,
+ * and no type system is needed to do it.
  */
 export type OrbState = 'waiting' | 'connecting' | 'thinking' | 'fetching' | 'listening' | 'working' | 'done';
 /**

package/dist/spatial-heatmap/index.d.ts

@@ -0,0 +1 @@
+export { HelixSpatialHeatmap } from './root/spatial-heatmap-root.js';

package/dist/spatial-heatmap/index.js

@@ -0,0 +1 @@
+export { HelixSpatialHeatmap } from './root/spatial-heatmap-root.js';

package/dist/spatial-heatmap/root/spatial-heatmap-root.css.js

@@ -0,0 +1,2 @@
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {--_spatial-heatmap-cell: var(--spatial-heatmap-cell-size, 1.25rem);--heatmap-tone-accent: var(--helix-color-accent);--heatmap-tone-danger: var(--helix-color-danger);--heatmap-tone-info: var(--helix-color-info);--heatmap-tone-muted: var(--helix-color-surface-sunken);--heatmap-tone-primary: var(--helix-color-primary);--heatmap-tone-success: var(--helix-color-success);--heatmap-tone-warning: var(--helix-color-warning);--heatmap-tone-1: color-mix(in oklab, var(--helix-color-primary-active) 20%, var(--helix-color-surface-sunken));--heatmap-tone-2: color-mix(in oklab, var(--helix-color-primary-active) 40%, var(--helix-color-surface-sunken));--heatmap-tone-3: color-mix(in oklab, var(--helix-color-primary-active) 60%, var(--helix-color-surface-sunken));--heatmap-tone-4: color-mix(in oklab, var(--helix-color-primary-active) 80%, var(--helix-color-surface-sunken));--heatmap-tone-5: var(--helix-color-primary-active);display: grid;grid-template-columns: minmax(0, max-content)}[part~="strip"] {inline-size: calc(var(--spatial-heatmap-span, 1) * 0.866 * var(--_spatial-heatmap-cell));max-inline-size: 100%;position: relative}::slotted([slot="renderer"]) {inset: 0;position: absolute}[part="drawing"] {block-size: auto;display: block;inline-size: 100%;overflow: visible}[part~="cell"], [part~="base"] {--_spatial-heatmap-left: oklch(from var(--_spatial-heatmap-top) calc(l - var(--spatial-heatmap-left-shade, 0.07)) c h);--_spatial-heatmap-right: oklch(from var(--_spatial-heatmap-top) calc(l - var(--spatial-heatmap-right-shade, 0.14)) c h)}[part~="cell"] {--_spatial-heatmap-top: var(--heatmap-tone, color-mix(in oklab, var(--helix-color-surface-sunken), var(--helix-color-surface) 60%))}[part~="base"] {--_spatial-heatmap-top: color-mix(in oklab, var(--helix-color-surface-sunken), var(--helix-color-border) 45%)}[part~="top-face"], [part~="base-top"] {--_spatial-heatmap-face: var(--_spatial-heatmap-top)}[part~="left-face"], [part~="base-left"] {--_spatial-heatmap-face: var(--_spatial-heatmap-left)}[part~="right-face"], [part~="base-right"] {--_spatial-heatmap-face: var(--_spatial-heatmap-right)}[part~="cell"] > *, [part~="base"] > * {--_spatial-heatmap-ink: oklch(from var(--_spatial-heatmap-face) clamp(0, (0.6 - l) * 1000, 1) 0 0);--_spatial-heatmap-edge: oklch(from var(--_spatial-heatmap-face) calc(l + clamp(-0.08, (0.6 - l) * 1000, 0.1)) c h);fill: var(--_spatial-heatmap-face);stroke: var(--_spatial-heatmap-edge);stroke-linejoin: round;stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}[part~="cell-selected"] > * {stroke: var(--spatial-heatmap-selected-color, var(--_spatial-heatmap-ink));stroke-dasharray: 3px 2px;stroke-width: var(--helix-border-thick)}@media (hover: hover) {[part~="cell"]:hover > * {stroke: var(--_spatial-heatmap-ink);stroke-dasharray: none;stroke-width: var(--helix-border-thick)}}[part~="cell-active"] > * {stroke: var(--_spatial-heatmap-ink);stroke-dasharray: none;stroke-width: var(--helix-border-thick)}[part~="strip"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part="live"], [part="overview"], [part="selection"], [part="table"] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;margin: var(--helix-space-none);overflow: hidden;position: absolute;white-space: nowrap}[part="footer"] {color: var(--helix-color-foreground-subtle);display: grid;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);min-block-size: 1lh;padding-block-start: var(--helix-space-xs);position: relative}[part="start"] {inset-block-start: 0;inset-inline-start: calc(var(--spatial-heatmap-start-x, 0) * 100%);margin-block-start: calc((var(--spatial-heatmap-start-y, 0) - var(--spatial-heatmap-depth, 0)) * 100% + 1lh);position: absolute;white-space: nowrap}[part="end"] {inset-block-start: 0;margin-block-start: calc((var(--spatial-heatmap-end-y, 0) - var(--spatial-heatmap-depth, 0)) * 100%);inset-inline-start: calc(var(--spatial-heatmap-end-x, 1) * 100%);position: absolute;translate: -50% 0;white-space: nowrap}[part="summary"] {text-align: center}[part="footer"][data-empty] {display: none}[part="empty"], [part="loading"] {color: var(--helix-color-foreground-subtle);font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);margin: var(--helix-space-none);text-align: center}@media print {[part~="cell"] > *, [part~="base"] > * {stroke: var(--helix-color-border);stroke-width: var(--helix-border-thin)}}@media (forced-colors: active) {[part~="cell"] > * {forced-color-adjust: none;stroke: CanvasText}[part~="base"] > * {fill: Canvas;stroke: CanvasText}[part~="cell-active"] > *, [part~="cell-selected"] > * {stroke: Highlight;stroke-width: var(--helix-border-thick)}}`);

package/dist/spatial-heatmap/root/spatial-heatmap-root.d.ts

@@ -0,0 +1,39 @@
+import { HelixHeadlessSpatialHeatmap } from '@fusion.dev/helix-headless/spatial-heatmap';
+import type { CSSResultGroup } from 'lit';
+import '../../tooltip/index.js';
+/**
+ * @summary A heatmap drawn as a relief, where each reading stands as tall as its value.
+ *
+ * @description
+ * Each reading is a prism. The top face takes the cell's tone, and the two
+ * sides are the same tone, shaded darker, so the whole relief follows your
+ * theme's colors.
+ *
+ * `tones="1 2 3 4 5"` uses the same five-step ramp as `Heatmap`, so the tone
+ * and the height both show the value. Set `--spatial-heatmap-cell-size` to
+ * change how large a cell may grow.
+ *
+ * @since 0.189.0
+ * @status experimental
+ * @category charts
+ * @documentation https://fusion.dev/helix/components/spatial-heatmap
+ *
+ * @cssproperty --spatial-heatmap-cell-size - The largest a cell grows, along its edge. The strip is never wider than its box, and draws smaller cells to fit.
+ * @cssproperty --spatial-heatmap-left-shade - How much less light the left face is than the top, as a step of OKLCH lightness from 0 to 1. 0.07 by default.
+ * @cssproperty --spatial-heatmap-right-shade - How much less light the right face is than the top, as a step of OKLCH lightness from 0 to 1. 0.14 by default.
+ * @cssproperty --spatial-heatmap-selected-color - The color of the dashed edges of a selected prism, under `selection-mode`. By default, white on a dark face and black on a light one.
+ */
+export declare class HelixSpatialHeatmap extends HelixHeadlessSpatialHeatmap {
+    static tier: string;
+    static styles: CSSResultGroup;
+    /**
+     * The smallest cell, in CSS pixels, before the strip draws fewer columns.
+     * `gap` is two pixels at that size, so a prism covers five sixths of its cell.
+     */
+    minCell: number;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-spatial-heatmap': HelixSpatialHeatmap;
+    }
+}

package/dist/spatial-heatmap/root/spatial-heatmap-root.js

@@ -0,0 +1,18 @@
+import { __decorate } from "tslib";
+import { customElement } from '@fusion.dev/helix-core';
+import { HelixHeadlessSpatialHeatmap } from '@fusion.dev/helix-headless/spatial-heatmap';
+import { styles as tooltipStyles } from '../../shared/chart/tooltip.css.js';
+import { styles } from './spatial-heatmap-root.css.js';
+import '../../tooltip/index.js';
+let HelixSpatialHeatmap = class HelixSpatialHeatmap extends HelixHeadlessSpatialHeatmap {
+    constructor() {
+        super(...arguments);
+        this.minCell = 10;
+    }
+    static { this.tier = 'helix-'; }
+    static { this.styles = [tooltipStyles, styles]; }
+};
+HelixSpatialHeatmap = __decorate([
+    customElement('helix-spatial-heatmap')
+], HelixSpatialHeatmap);
+export { HelixSpatialHeatmap };

package/dist/spatial-scatter-chart/index.d.ts

@@ -0,0 +1 @@
+export { HelixSpatialScatterChart } from './root/spatial-scatter-chart-root.js';

package/dist/spatial-scatter-chart/index.js

@@ -0,0 +1 @@
+export { HelixSpatialScatterChart } from './root/spatial-scatter-chart-root.js';

package/dist/spatial-scatter-chart/root/spatial-scatter-chart-root.css.d.ts

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

package/dist/spatial-scatter-chart/root/spatial-scatter-chart-root.css.js

@@ -0,0 +1,2 @@
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {display: block}[part="plot"] {background-color: var(--helix-color-surface-sunken);block-size: var(--spatial-scatter-chart-block-size, 22em);border-radius: var(--helix-radii-md);overflow: hidden;position: relative}::slotted(*) {inset: 0;position: absolute}[part="plot"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part="fallback"] {inset: var(--helix-space-md);position: absolute}[part="fallback"][hidden] {display: none}[part="drawing"] {block-size: 100%;display: block;font-family: var(--helix-font-sans);inline-size: 100%;overflow: visible}[part="grid"] {fill: none;opacity: 0.35;stroke: var(--helix-color-foreground-muted);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}[part="tick"] {fill: var(--helix-color-foreground-muted);font-weight: var(--helix-weight-medium)}[part="axis-name"] {fill: var(--helix-color-foreground);font-weight: var(--helix-weight-semibold)}[part~="point"] {fill: var(--chart-series, var(--helix-color-primary));stroke: var(--helix-color-surface-sunken);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}foreignObject > [part="mark"] {translate: -50% -50%}[part="ring"] {fill: none;pointer-events: none;stroke: var(--helix-color-foreground);stroke-width: var(--helix-border-thick);vector-effect: non-scaling-stroke}[part="live"], [part="summary"], [part="table"] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;margin: var(--helix-space-none);overflow: hidden;position: absolute;white-space: nowrap}[part="empty"], [part="loading"] {color: var(--helix-color-foreground-subtle);font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);margin: var(--helix-space-none);text-align: center}@media print {[part~="point"] {stroke: var(--helix-color-border)}}@media (forced-colors: active) {[part~="point"] {forced-color-adjust: none;stroke: CanvasText}[part="grid"] {stroke: CanvasText}[part="tick"], [part="axis-name"] {fill: CanvasText}[part="ring"] {stroke: Highlight}}`);

package/dist/spatial-scatter-chart/root/spatial-scatter-chart-root.d.ts

@@ -0,0 +1,27 @@
+import { HelixHeadlessSpatialScatterChart } from '@fusion.dev/helix-headless/spatial-scatter-chart';
+import type { CSSResultGroup } from 'lit';
+import '../../tooltip/index.js';
+/**
+ * @summary A chart that plots each row as a point in three dimensions, for data with three measures.
+ *
+ * @description
+ * The points are drawn in 3D by a renderer the page connects, and as a flat
+ * scatter of the first two measures until it has drawn. Each group takes a
+ * series color from the theme, as every chart's series does.
+ *
+ * @since 0.189.0
+ * @status experimental
+ * @category charts
+ * @documentation https://fusion.dev/helix/components/spatial-scatter-chart
+ *
+ * @cssproperty --spatial-scatter-chart-block-size - How tall the plot is.
+ */
+export declare class HelixSpatialScatterChart extends HelixHeadlessSpatialScatterChart {
+    static tier: string;
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-spatial-scatter-chart': HelixSpatialScatterChart;
+    }
+}

package/dist/spatial-scatter-chart/root/spatial-scatter-chart-root.js

@@ -0,0 +1,15 @@
+import { __decorate } from "tslib";
+import { customElement } from '@fusion.dev/helix-core';
+import { HelixHeadlessSpatialScatterChart } from '@fusion.dev/helix-headless/spatial-scatter-chart';
+import { styles as seriesStyles } from '../../shared/chart/series.css.js';
+import { styles as tooltipStyles } from '../../shared/chart/tooltip.css.js';
+import { styles } from './spatial-scatter-chart-root.css.js';
+import '../../tooltip/index.js';
+let HelixSpatialScatterChart = class HelixSpatialScatterChart extends HelixHeadlessSpatialScatterChart {
+    static { this.tier = 'helix-'; }
+    static { this.styles = [seriesStyles, tooltipStyles, styles]; }
+};
+HelixSpatialScatterChart = __decorate([
+    customElement('helix-spatial-scatter-chart')
+], HelixSpatialScatterChart);
+export { HelixSpatialScatterChart };

package/dist/spatial-surface-chart/index.d.ts

@@ -0,0 +1 @@
+export { HelixSpatialSurfaceChart } from './root/spatial-surface-chart-root.js';

package/dist/spatial-surface-chart/index.js

@@ -0,0 +1 @@
+export { HelixSpatialSurfaceChart } from './root/spatial-surface-chart-root.js';

package/dist/spatial-surface-chart/root/spatial-surface-chart-root.css.d.ts

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

package/dist/spatial-surface-chart/root/spatial-surface-chart-root.css.js

@@ -0,0 +1,2 @@
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {--_spatial-surface-chart-high: var(--spatial-surface-chart-high, var(--helix-color-primary-active));--_spatial-surface-chart-low: var(--spatial-surface-chart-low, color-mix(in oklab, var(--helix-color-primary-active) 15%, var(--helix-color-surface-sunken)));display: block}[part="plot"] {background-color: var(--helix-color-surface-sunken);block-size: var(--spatial-surface-chart-block-size, 22em);border-radius: var(--helix-radii-md);overflow: hidden;position: relative}::slotted(*) {inset: 0;position: absolute}[part="plot"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part="fallback"] {inset: var(--helix-space-md);position: absolute}[part="fallback"][hidden] {display: none}[part="drawing"] {block-size: 100%;display: block;font-family: var(--helix-font-sans);inline-size: 100%;overflow: visible}[part="grid"] {fill: none;opacity: 0.35;stroke: var(--helix-color-foreground-muted);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}[part="tick"] {fill: var(--helix-color-foreground-muted);font-weight: var(--helix-weight-medium)}[part="axis-name"] {fill: var(--helix-color-foreground);font-weight: var(--helix-weight-semibold)}[part="face"] {--_spatial-surface-chart-color: color-mix(in oklab, var(--_spatial-surface-chart-high) calc(var(--spatial-surface-chart-level, 0) * 100%), var(--_spatial-surface-chart-low));--_spatial-surface-chart-lit: oklch(from var(--_spatial-surface-chart-color) calc(l - var(--spatial-surface-chart-shade, 0)) c h);--_spatial-surface-chart-rule: oklch(from var(--_spatial-surface-chart-lit) calc(l + clamp(-0.1, (0.6 - l) * 1000, 0.14)) c h);fill: var(--_spatial-surface-chart-lit);stroke: var(--_spatial-surface-chart-rule);stroke-linejoin: round;stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}foreignObject > [part="mark"] {translate: -50% -50%}[part="ring"] {fill: none;pointer-events: none;stroke: var(--helix-color-foreground);stroke-width: var(--helix-border-thick);vector-effect: non-scaling-stroke}[part="live"], [part="summary"], [part="table"] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;margin: var(--helix-space-none);overflow: hidden;position: absolute;white-space: nowrap}[part="empty"], [part="loading"] {color: var(--helix-color-foreground-subtle);font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);margin: var(--helix-space-none);text-align: center}@media print {[part="face"] {stroke: var(--helix-color-border)}}@media (forced-colors: active) {[part="face"] {forced-color-adjust: none;stroke: CanvasText}[part="grid"] {stroke: CanvasText}[part="tick"], [part="axis-name"] {fill: CanvasText}[part="ring"] {stroke: Highlight}}`);

package/dist/spatial-surface-chart/root/spatial-surface-chart-root.d.ts

@@ -0,0 +1,30 @@
+import { HelixHeadlessSpatialSurfaceChart } from '@fusion.dev/helix-headless/spatial-surface-chart';
+import type { CSSResultGroup } from 'lit';
+import '../../tooltip/index.js';
+/**
+ * @summary A chart that draws a height over a grid as a surface in three dimensions, for a measure that varies over two others.
+ *
+ * @description
+ * The surface is drawn in 3D by a renderer the page connects, and as a flat
+ * grid seen from above until it has drawn. Every height is shaded along one
+ * ramp from the theme's primary color, quiet where it is low and strong where
+ * it is high, so the two drawings agree.
+ *
+ * @since 0.189.0
+ * @status experimental
+ * @category charts
+ * @documentation https://fusion.dev/helix/components/spatial-surface-chart
+ *
+ * @cssproperty --spatial-surface-chart-block-size - How tall the plot is.
+ * @cssproperty --spatial-surface-chart-high - The color of the highest reading, which the renderer reads too.
+ * @cssproperty --spatial-surface-chart-low - The color of the lowest reading, which the renderer reads too.
+ */
+export declare class HelixSpatialSurfaceChart extends HelixHeadlessSpatialSurfaceChart {
+    static tier: string;
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-spatial-surface-chart': HelixSpatialSurfaceChart;
+    }
+}

package/dist/spatial-surface-chart/root/spatial-surface-chart-root.js

@@ -0,0 +1,14 @@
+import { __decorate } from "tslib";
+import { customElement } from '@fusion.dev/helix-core';
+import { HelixHeadlessSpatialSurfaceChart } from '@fusion.dev/helix-headless/spatial-surface-chart';
+import { styles as tooltipStyles } from '../../shared/chart/tooltip.css.js';
+import { styles } from './spatial-surface-chart-root.css.js';
+import '../../tooltip/index.js';
+let HelixSpatialSurfaceChart = class HelixSpatialSurfaceChart extends HelixHeadlessSpatialSurfaceChart {
+    static { this.tier = 'helix-'; }
+    static { this.styles = [tooltipStyles, styles]; }
+};
+HelixSpatialSurfaceChart = __decorate([
+    customElement('helix-spatial-surface-chart')
+], HelixSpatialSurfaceChart);
+export { HelixSpatialSurfaceChart };

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

@@ -14,6 +14,7 @@ import '../../checkbox/index.js';
  * @documentation https://fusion.dev/helix/components/table
  *
  * @slot - The table's rows.
+ * @slot columns - The columns, as `TableColumn` elements. The table moves each column here itself, so markup that runs in a browser leaves it out; a server-rendered page writes `slot="columns"` on each column so the headings sit in place before the table upgrades.
  * @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.