@fusion.dev/helix 0.176.0 → 0.177.0

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

@@ -21,6 +21,8 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
  * The shader stops drawing in these cases:
  * - The element is off screen or in a background tab.
  * - `prefers-reduced-motion` is set. The element shows one still frame.
+ * - `paused` is set, from a pause control on your page. The element holds the
+ *   frame it shows.
  * - The browser takes back the drawing context, on a GPU reset or past its
  *   limit of about sixteen contexts. The gradient shows until the context
  *   returns.
@@ -116,6 +118,15 @@ export declare class HelixAura extends HelixElement {
      * this listens for. Asking for the pointer is asking for the hit test.
      */
     interactive: boolean;
+    /**
+     * Whether the field holds still on the frame it shows.
+     *
+     * Set it from a pause control on your page, so a reader can stop the motion,
+     * as WCAG 2.2.2 asks of anything that moves for more than five seconds. A
+     * change to another property still repaints the frame. Clearing it starts
+     * the field from where it stopped.
+     */
+    paused: boolean;
     /**
      * How far the pointer reaches into the field, `0` upward.
      *
@@ -360,7 +371,7 @@ export declare class HelixAura extends HelixElement {
      */
     private prepare;
     connectedCallback(): void;
-    protected updated(): void;
+    protected updated(changed: PropertyValues): void;
     disconnectedCallback(): void;
     /**
      * Gives the context back, once nothing has claimed the element again.

package/dist/aura/root/aura-root.js

@@ -22,6 +22,7 @@ let HelixAura = class HelixAura extends HelixElement {
         this.drift = 0;
         this.gain = 1;
         this.interactive = false;
+        this.paused = false;
         this.reach = 1;
         this.scale = 1;
         this.speed = 1;
@@ -45,7 +46,7 @@ let HelixAura = class HelixAura extends HelixElement {
         this.target = { presence: 0, x: 0, y: 0 };
         this.eased = { presence: 0, x: 0, y: 0 };
         this.gate = new PaintGateController(this, {
-            canRun: () => !!this.gl && !this.gl.isContextLost() && this.width > 0 && this.opened,
+            canRun: () => !this.paused && !!this.gl && !this.gl.isContextLost() && this.width > 0 && this.opened,
             onFrame: (delta) => {
                 this.advance(delta);
             },
@@ -236,7 +237,15 @@ let HelixAura = class HelixAura extends HelixElement {
             this.start();
         }
     }
-    updated() {
+    updated(changed) {
+        if (changed.has('paused')) {
+            if (this.paused) {
+                this.gate.stop();
+            }
+            else {
+                this.gate.play();
+            }
+        }
         this.paintOnce();
     }
     disconnectedCallback() {
@@ -504,6 +513,9 @@ __decorate([
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixAura.prototype, "interactive", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixAura.prototype, "paused", void 0);
 __decorate([
     property({ type: Number })
 ], HelixAura.prototype, "reach", void 0);

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

@@ -14,7 +14,7 @@ import type { CSSResultGroup } from 'lit';
  * @aliases Profile picture, Gravatar
  * @documentation https://fusion.dev/helix/components/avatar
  *
- * @slot - Replaces the image and initials entirely, for an icon.
+ * @slot - Shown when there is no usable image, in place of the initials, for an icon. Hidden from assistive technology when the avatar has a `name`, which the host announces.
  *
  * @csspart image - The image, when one is loading or loaded.
  * @csspart initials - The initials shown when there is no usable image.

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

@@ -12,6 +12,10 @@ import type { CSSResultGroup } from 'lit';
  * that one transform reads, so the cards are placed once in the document's
  * coordinates and are not laid out again.
  *
+ * The [Canvases](https://fusion.dev/helix/docs/canvases) guide loads and saves
+ * a board, keeps it in your state, and lists every key and the roles a screen
+ * reader meets.
+ *
  * @since 0.100.0
  * @status experimental
  * @category media

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

@@ -1,5 +1,5 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: grid;position: relative;inline-size: var(--donut-chart-size, 16em);place-items: center;}[part="plot"] {grid-area: 1 / 1;}[part="plot"] {position: relative;inline-size: 100%;}[part="plot"] svg {aspect-ratio: 1;display: block;inline-size: 100%;}[part="track"],
+export const styles = createSheet(`:host {display: grid;position: relative;inline-size: var(--donut-chart-size, 16em);place-items: center;}[part="plot"] {grid-area: 1 / 1;}[part="plot"] {position: relative;inline-size: 100%;}[part="plot"]:not(:has(svg)) {aspect-ratio: 1;}:host([sweep="half"]) [part="plot"]:not(:has(svg)) {aspect-ratio: 2;}[part="plot"] svg {aspect-ratio: 1;display: block;inline-size: 100%;}[part="track"],
 [part~="segment"] {transform: rotate(-90deg);transform-box: fill-box;transform-origin: center;}[part="track"] {stroke: var(--donut-chart-track-color, var(--helix-color-surface-sunken));}[part~="segment"] {stroke-linecap: butt;stroke-width: var(--donut-chart-stroke);}[part="center"] slot {--stat-value-size: 24cqi;font-size: 13cqi;}[part="center"] {inset-block-start: 50%;inset-inline-start: 50%;pointer-events: none;position: absolute;translate: -50% -50%;box-sizing: border-box;--_donut-chart-ring: 80;container-type: inline-size;display: grid;inline-size: calc(100% * (var(--_donut-chart-ring) - 2 * var(--donut-chart-stroke, 16)) / 100);place-items: center;text-align: center;}[part~="segment"] {stroke: var(--chart-series);}[part~="segment"][data-active] {stroke-width: calc(var(--donut-chart-stroke) * 1.18);}:host([emphasis="outlined"]) [part~="segment"][data-active] {stroke: var(--chart-series);stroke-width: var(--donut-chart-stroke);}[part~="segment"] {transition:
 r var(--helix-duration-normal) var(--helix-easing-decelerate),
 stroke var(--helix-duration-fast) var(--helix-easing-decelerate),

package/dist/donut-chart/root/donut-chart-root.js

@@ -8,12 +8,13 @@ import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessDonutChart } from '@fusion.dev/helix-headless/donut-chart';
 import { property } from 'lit/decorators.js';
 import { styles as seriesStyles } from '../../shared/chart/series.css.js';
+import { styles as statusStyles } from '../../shared/chart/status.css.js';
 import { styles as tooltipStyles } from '../../shared/chart/tooltip.css.js';
 import { styles } from './donut-chart-root.css.js';
 import '../../tooltip/index.js';
 let HelixDonutChart = class HelixDonutChart extends HelixHeadlessDonutChart {
     static { this.tier = 'helix-'; }
-    static { this.styles = [seriesStyles, tooltipStyles, styles]; }
+    static { this.styles = [seriesStyles, statusStyles, tooltipStyles, styles]; }
 };
 __decorate([
     property({ reflect: true })

package/dist/element-events.generated.js

@@ -104,6 +104,7 @@ registerElementEvents({
     ],
     'helix-date-picker': ['change', 'helix-before-change', 'helix-navigate', 'input'],
     'helix-dialog': ['close', 'helix-before-close', 'helix-before-open', 'toggle'],
+    'helix-donut-chart': ['helix-reading-change', 'helix-reading-press'],
     'helix-drawer': ['close', 'helix-before-close', 'helix-before-open', 'toggle'],
     'helix-drilldown': ['helix-navigate', 'helix-select'],
     'helix-drilldown-item': ['helix-select'],
@@ -255,6 +256,7 @@ registerElementEvents({
         'toggle',
     ],
     'helix-slider': ['change', 'helix-before-change', 'input'],
+    'helix-sparkline': ['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/graph/root/graph-root.d.ts

@@ -11,6 +11,10 @@ import type { CSSResultGroup } from 'lit';
  * `no-panel`, the drawing takes the whole frame, and a button among the
  * controls opens the search and the list over its end.
  *
+ * The [Graphs](https://fusion.dev/helix/docs/graphs) guide connects a
+ * renderer, lists the keys and what a screen reader hears, and describes the
+ * methods of a driver for another renderer.
+ *
  * @since 0.116.0
  * @status experimental
  * @category media

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

@@ -18,4 +18,5 @@ var(--helix-color-surface-sunken)
 );--heatmap-tone-5: var(--helix-color-primary-active);display: grid;grid-template-columns: minmax(0, max-content);}[part="strip"] {display: grid;gap: var(--heatmap-gap, var(--helix-space-2xs));grid-auto-columns: var(--_heatmap-cell-width);grid-auto-flow: column;grid-template-rows: repeat(var(--heatmap-rows, 1), var(--_heatmap-cell-height));justify-content: start;position: relative;}[part~="cell"] {background-color: var(--heatmap-tone, var(--helix-color-surface-sunken));border-radius: var(--heatmap-cell-radius, calc(var(--helix-radii-sm) * 0.5));inline-size: var(--_heatmap-cell-width);}[part="mark"] {block-size: 1px;inline-size: 1px;pointer-events: none;position: absolute;}[part="tooltip-anchor"] {inset: 0;pointer-events: none;position: absolute;}[part="tooltip-label"] {display: block;font-weight: var(--helix-weight-medium);opacity: 0.72;}[part~="tooltip-cell"] {align-items: baseline;display: flex;gap: var(--helix-space-sm);justify-content: space-between;}[part="tooltip-name"] {opacity: 0.72;}[part="tooltip-value"] {font-variant-numeric: tabular-nums;font-weight: var(--helix-weight-medium);}@media (hover: hover) {[part~="cell"]:hover {outline: var(--helix-border-thin) solid var(--helix-color-foreground);outline-offset: var(--helix-border-thin);}[part="strip"]:not([data-spaced]) [part~="cell"]:hover {outline-offset: calc(var(--helix-border-thin) * -1);}}[part~="cell-active"] {outline: var(--helix-border-thin) solid var(--helix-color-foreground);outline-offset: var(--helix-border-thin);}[part="strip"]:not([data-spaced]) [part~="cell-active"] {outline-offset: calc(var(--helix-border-thin) * -1);}[part~="cell-selected"] {box-shadow: inset 0 0 0 var(--heatmap-selected-width, var(--helix-border-thick))
 var(--heatmap-selected-color, var(--helix-color-primary));}[part="strip"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part~="tooltip-cell-current"] {font-weight: var(--helix-weight-medium);}[part="live"],
 [part="overview"],
-[part="selection"] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;margin: var(--helix-space-none);overflow: hidden;position: absolute;white-space: nowrap;}[part="footer"] {align-items: baseline;color: var(--helix-color-foreground-subtle);display: grid;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);gap: var(--helix-space-xs);grid-template-columns: auto minmax(0, 1fr) auto;padding-block-start: var(--helix-space-xs);}[part="summary"] {text-align: center;}[part="end"] {text-align: end;}[part="footer"][data-empty] {display: none;}[part="empty"] {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"] {outline: var(--helix-border-thin) solid var(--helix-color-border);outline-offset: calc(var(--helix-border-thin) * -1);}}`);
+[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"] {align-items: baseline;color: var(--helix-color-foreground-subtle);display: grid;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);gap: var(--helix-space-xs);grid-template-columns: auto minmax(0, 1fr) auto;padding-block-start: var(--helix-space-xs);}[part="summary"] {text-align: center;}[part="end"] {text-align: end;}[part="footer"][data-empty] {display: none;}[part="empty"] {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"] {outline: var(--helix-border-thin) solid var(--helix-color-border);outline-offset: calc(var(--helix-border-thin) * -1);}}`);

package/dist/icon-button/root/icon-button-root.css.js

@@ -1,5 +1,5 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {--_icon-button-size: var(--icon-button-size, var(--helix-size-control));display: inline-flex;}:host {--_icon-button-edge: var(--helix-color-border);--_icon-button-turn: 0.8s;--_icon-button-ink: var(--helix-color-foreground-muted);--_icon-button-ink-hover: var(--helix-color-foreground);--_icon-button-fill: var(--_icon-button-tone);--_icon-button-fill-hover: var(--_icon-button-tone-hover);--_icon-button-on-tone: var(--helix-color-background);--_icon-button-tone: var(--helix-color-foreground);--_icon-button-tone-hover: color-mix(
+export const styles = createSheet(`:host {--_icon-button-size: var(--icon-button-size, var(--helix-size-control));display: inline-flex;}:host {--_icon-button-edge: var(--helix-color-border);--_icon-button-crawl: 4s;--_icon-button-turn: 0.8s;--_icon-button-ink: var(--helix-color-foreground-muted);--_icon-button-ink-hover: var(--helix-color-foreground);--_icon-button-fill: var(--_icon-button-tone);--_icon-button-fill-hover: var(--_icon-button-tone-hover);--_icon-button-on-tone: var(--helix-color-background);--_icon-button-tone: var(--helix-color-foreground);--_icon-button-tone-hover: color-mix(
 in oklab,
 var(--helix-color-foreground) 86%,
 var(--helix-color-background)
@@ -95,4 +95,4 @@ color-mix(in oklab, var(--_icon-button-tone) 22%, transparent)
 var(--icon-button-foreground-color, var(--_icon-button-tone))
 );}:host(:disabled) [part="button"] {cursor: not-allowed;opacity: 0.5;}:host(:state(pending)) [part="button"] {cursor: progress;position: relative;}:host(:state(pending)) [part="button"] > :not([part="spinner"]) {visibility: hidden;}[part="spinner"] {animation: helix-icon-button-turn var(--icon-button-spinner-duration, var(--_icon-button-turn))
 linear infinite;block-size: var(--icon-button-spinner-size, 1.15em);border: var(--helix-border-thick) solid
-color-mix(in oklab, var(--icon-button-spinner-color, currentColor) 30%, transparent);border-block-start-color: var(--icon-button-spinner-color, currentColor);border-radius: var(--helix-radii-full);box-sizing: border-box;inline-size: var(--icon-button-spinner-size, 1.15em);inset: 0;margin: auto;position: absolute;}@keyframes helix-icon-button-turn {to {rotate: 1turn;}}@media (prefers-reduced-motion: reduce) {[part="spinner"] {animation-duration: calc(var(--helix-duration-slow) * 12);}}@media print {:host {display: none;}}`);
+color-mix(in oklab, var(--icon-button-spinner-color, currentColor) 30%, transparent);border-block-start-color: var(--icon-button-spinner-color, currentColor);border-radius: var(--helix-radii-full);box-sizing: border-box;inline-size: var(--icon-button-spinner-size, 1.15em);inset: 0;margin: auto;position: absolute;}@keyframes helix-icon-button-turn {to {rotate: 1turn;}}@media (prefers-reduced-motion: reduce) {[part="spinner"] {animation-duration: var(--_icon-button-crawl);}}@media print {:host {display: none;}}`);

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

@@ -1,6 +1,6 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {--_loader-size: var(--helix-size-loader-md);--_loader-breathe: 2.4s;--_loader-stroke: 2;--_loader-turn: 0.8s;color: inherit;display: inline-grid;flex-shrink: 0;place-items: center;vertical-align: middle;}:host([size="sm"]) {--_loader-size: var(--helix-size-loader-sm);}:host([size="lg"]) {--_loader-size: var(--helix-size-loader-lg);}[part="svg"] {animation: helix-loader-turn var(--loader-duration, var(--_loader-turn)) linear infinite;grid-area: 1 / 1;block-size: var(--loader-size, var(--_loader-size));inline-size: var(--loader-size, var(--_loader-size));}[part="track"] {animation: helix-loader-breathe var(--_loader-breathe) ease-in-out infinite;opacity: 0.18;stroke: var(--loader-track-color, currentColor);stroke-width: var(--loader-track-width, var(--_loader-stroke));}[part="mark"] {animation: helix-loader-breathe-mark var(--_loader-breathe) ease-in-out infinite;}@keyframes helix-loader-breathe {0%,
+export const styles = createSheet(`:host {--_loader-size: var(--helix-size-loader-md);--_loader-breathe: 2.4s;--_loader-crawl: 4s;--_loader-stroke: 2;--_loader-turn: 0.8s;color: inherit;display: inline-grid;flex-shrink: 0;place-items: center;vertical-align: middle;}:host([size="sm"]) {--_loader-size: var(--helix-size-loader-sm);}:host([size="lg"]) {--_loader-size: var(--helix-size-loader-lg);}[part="content"] {grid-area: 1 / 1;}[part="svg"] {animation: helix-loader-turn var(--loader-duration, var(--_loader-turn)) linear infinite;grid-area: 1 / 1;block-size: var(--loader-size, var(--_loader-size));inline-size: var(--loader-size, var(--_loader-size));}[part="track"] {animation: helix-loader-breathe var(--_loader-breathe) ease-in-out infinite;opacity: 0.18;stroke: var(--loader-track-color, currentColor);stroke-width: var(--loader-track-width, var(--_loader-stroke));}[part="mark"] {animation: helix-loader-breathe-mark var(--_loader-breathe) ease-in-out infinite;}@keyframes helix-loader-breathe {0%,
 100% {opacity: 0.12;}50% {opacity: 0.24;}}@keyframes helix-loader-breathe-mark {0%,
 100% {opacity: 0.45;scale: 0.82;}50% {opacity: 1;scale: 1;}}[part="indicator"] {stroke: var(--loader-color, currentColor);stroke-dasharray: 50, 100;stroke-linecap: round;stroke-width: var(--loader-track-width, var(--_loader-stroke));}@keyframes helix-loader-turn {to {transform: rotate(1turn);}}@media (prefers-reduced-motion: reduce) {[part="track"],
-[part="mark"] {animation: none;}}@media (prefers-reduced-motion: reduce) {[part="svg"] {animation-duration: calc(var(--helix-duration-slow) * 12);}}[part="mark"] {--_mark-size: calc(var(--loader-size, var(--_loader-size)) * 0.4);--icon-size: var(--_mark-size);align-items: center;block-size: var(--_mark-size);display: flex;grid-area: 1 / 1;inline-size: var(--_mark-size);justify-content: center;}[part="mark"] ::slotted(*) {block-size: 100%;inline-size: 100%;}:host([variant="pulse"]) [part="indicator"] {display: none;}:host([variant="pulse"]) [part="svg"] {animation: none;}:host([variant="pulse"]) {--_loader-size: calc(var(--helix-size-loader-lg) * 2);}:host([variant="pulse"][size="sm"]) {--_loader-size: var(--helix-size-loader-lg);}:host([variant="pulse"][size="lg"]) {--_loader-size: calc(var(--helix-size-loader-lg) * 3);}:host([variant="pulse"]) [part="track"] {display: none;}:host([variant="pulse"]) [part="mark"] {animation-name: helix-loader-pulse-mark;}@keyframes helix-loader-pulse-mark {0%,
+[part="mark"] {animation: none;}}@media (prefers-reduced-motion: reduce) {[part="svg"] {animation-duration: var(--_loader-crawl);}}[part="mark"] {--_mark-size: calc(var(--loader-size, var(--_loader-size)) * 0.4);--icon-size: var(--_mark-size);align-items: center;block-size: var(--_mark-size);display: flex;grid-area: 1 / 1;inline-size: var(--_mark-size);justify-content: center;}[part="mark"] ::slotted(*) {block-size: 100%;inline-size: 100%;}:host([variant="pulse"]) [part="indicator"] {display: none;}:host([variant="pulse"]) [part="svg"] {animation: none;}:host([variant="pulse"]) {--_loader-size: calc(var(--helix-size-loader-lg) * 2);}:host([variant="pulse"][size="sm"]) {--_loader-size: var(--helix-size-loader-lg);}:host([variant="pulse"][size="lg"]) {--_loader-size: calc(var(--helix-size-loader-lg) * 3);}:host([variant="pulse"]) [part="track"] {display: none;}:host([variant="pulse"]) [part="mark"] {animation-name: helix-loader-pulse-mark;}@keyframes helix-loader-pulse-mark {0%,
 100% {opacity: 0.35;}50% {opacity: 1;}}@media (prefers-reduced-motion: reduce) {:host([variant="pulse"]) [part="mark"] {animation: none;opacity: 1;}}[part="svg"][hidden] {display: inline;visibility: hidden;}[part="mark"][hidden] {display: flex;visibility: hidden;}@media print {:host {display: none;}}`);

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

@@ -13,6 +13,9 @@ import type { CSSResultGroup } from 'lit';
  * While `delay` runs, the loader keeps its size and draws nothing, so the line
  * it sits in does not move when it appears.
  *
+ * With something in the `content` slot, the loader takes the larger of the ring
+ * and the content, and the ring centers over the content while the work runs.
+ *
  * @since 0.1.0
  * @status stable
  * @category feedback
@@ -20,7 +23,7 @@ import type { CSSResultGroup } from 'lit';
  * @documentation https://fusion.dev/helix/components/loader
  *
  * @cssproperty --loader-color - Color of the moving arc.
- * @cssproperty --loader-duration - How long one turn of the arc takes, 0.8s by default. With motion reduced the turn slows to a crawl whatever this says.
+ * @cssproperty --loader-duration - How long one turn of the arc takes, 0.8s by default. With motion reduced the arc turns once every four seconds, whatever this says.
  * @cssproperty --loader-size - Diameter. Defaults to the size token that `size` picks, which is 1.5rem at the default density.
  * @cssproperty --loader-track-color - Color of the circle behind the arc.
  * @cssproperty --loader-track-width - Width of the arc and the circle behind it, in units of a 24-unit drawing. Defaults to 2.

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

@@ -13,6 +13,10 @@ import type { CSSResultGroup } from 'lit';
  * to draw the map's credit compact in a corner over the map, which suits a
  * map the width of the page.
  *
+ * The [Maps](https://fusion.dev/helix/docs/maps) guide connects a renderer,
+ * lists the keys and what a screen reader hears, and describes every method
+ * a driver for another renderer can have.
+ *
  * @since 0.100.0
  * @status experimental
  * @category media

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

@@ -13,5 +13,5 @@ inset-block-start var(--helix-duration-normal) var(--helix-easing-decelerate),
 inset-inline-start var(--helix-duration-normal) var(--helix-easing-decelerate),
 scale var(--helix-duration-fast) var(--helix-easing-decelerate);translate: -50% -50%;}[part~="point"][data-active] {opacity: 1;scale: 1.5;}[part="x-axis"],
 [part="y-axis"] {display: grid;}[part="x-axis"] {grid-area: x-axis;}[part="y-axis"] {grid-area: y-axis;}[part="x-tick"],
-[part="y-tick"] {color: var(--helix-color-foreground-muted);font-size: var(--helix-text-xs);font-variant-numeric: tabular-nums;grid-area: 1 / 1;line-height: 1;position: relative;white-space: nowrap;}[part="x-tick"] {inset-inline-start: var(--chart-tick);justify-self: start;translate: -50% 0;}[part="y-tick"] {align-self: start;inset-block-start: var(--chart-tick);justify-self: end;translate: 0 -50%;}@container (inline-size < 30rem) {[part="x-tick"]:nth-last-child(even) {visibility: hidden;}}[part="x-name"],
+[part="y-tick"] {color: var(--helix-color-foreground-muted);font-size: var(--helix-text-xs);font-variant-numeric: tabular-nums;grid-area: 1 / 1;line-height: 1;position: relative;white-space: nowrap;}[part="x-tick"] {inset-inline-start: var(--chart-tick);justify-self: start;translate: -50% 0;}[part="x-tick"][data-edge="end"] {translate: -100% 0;}[part="y-tick"] {align-self: start;inset-block-start: var(--chart-tick);justify-self: end;translate: 0 -50%;}@container (inline-size < 30rem) {[part="x-tick"]:nth-last-child(even) {visibility: hidden;}}[part="x-name"],
 [part="y-name"] {color: var(--helix-color-foreground-muted);font-size: var(--helix-text-xs);font-weight: var(--helix-weight-medium);}[part="x-name"] {grid-area: x-name;justify-self: end;}[part="y-name"] {grid-area: y-name;justify-self: start;}[part="summary"] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;margin: var(--helix-space-none);overflow: hidden;position: absolute;white-space: nowrap;}@starting-style {[part~="point"] {opacity: 0;}}@media print {:host {print-color-adjust: exact;}}`);

package/dist/shared/chart/status.css.js

@@ -1,3 +1,3 @@
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`[part="empty"],
-[part="loading"] {color: var(--helix-color-foreground-subtle);display: grid;font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);inset: 0;margin: var(--helix-space-none);place-content: center;position: absolute;text-align: center;}`);
+[part="loading"] {color: var(--helix-color-foreground-subtle);display: grid;font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);inset: 0;margin: var(--helix-space-none);place-content: center;position: absolute;text-align: center;}[part="table"] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;margin: var(--helix-space-none);overflow: hidden;position: absolute;white-space: nowrap;}`);

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

@@ -15,7 +15,7 @@ import type { CSSResultGroup } from 'lit';
  * @aliases TreeNode, Branch, Leaf
  * @documentation https://fusion.dev/helix/components/tree
  *
- * @slot - The item's label.
+ * @slot - The item's label. A nested item does not go here: give it `slot="children"`. In a development build, an item nested here is reported.
  * @slot chevron - Replaces the expand and collapse mark of a branch. A slotted icon is sized and
  *   turned like the drawn one.
  * @slot children - Nested items, which make this a branch.