@fusion.dev/helix 0.32.0 → 0.33.1

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

@@ -27,6 +27,10 @@ inline-size: 100%;
 block-size: 100%;
 }
 
+[part="canvas"][hidden] {
+display: none;
+}
+
 @media print {
 :host {
 display: none;

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

@@ -20,7 +20,9 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
  * from `gl_VertexID`, so there is no attribute, no buffer and no upload.
  *
  * **It stops when nobody is looking**, off screen and in a background tab, and
- * `prefers-reduced-motion` gets one still frame rather than an empty box.
+ * `prefers-reduced-motion` gets one still frame rather than an empty box. A
+ * context the browser takes back, on a GPU reset or past its cap of about
+ * sixteen, stops it too, and the gradient shows until the context returns.
  *
  * Styled only, and with behavior, which the tier split does not otherwise
  * allow: the behavior is drawing to a canvas, so there is no structure a
@@ -218,6 +220,11 @@ export declare class HelixAura extends HelixElement {
     private readonly eased;
     private motion;
     private visible;
+    /**
+     * What the intersection observer last said, kept because it says so only on
+     * a change: every other path to `play` has to ask it.
+     */
+    private onScreen;
     /**
      * The element's box, cached.
      *
@@ -286,8 +293,21 @@ export declare class HelixAura extends HelixElement {
      * event default-prevented and the extension held from before the loss, and it
      * restores asynchronously, so `start` would have to become a state machine to
      * use it. A fresh canvas is synchronous and cannot half-succeed.
+     *
+     * That is a context this element released. One the browser takes is not
+     * spent: `handleLost` asks for it back, and `start` waits for it rather than
+     * coming here.
      */
     private build;
+    /**
+     * The program and where its uniforms live, on the context already held.
+     *
+     * Apart from `build` because a restored context comes here alone. It is the
+     * same object the browser took, with every program and location it had made
+     * gone, and `build` would replace a canvas that had been lost again before
+     * this ran rather than wait for it a second time.
+     */
+    private prepare;
     connectedCallback(): void;
     protected updated(): void;
     disconnectedCallback(): void;
@@ -308,6 +328,35 @@ export declare class HelixAura extends HelixElement {
      * fresh one.
      */
     private readonly drop;
+    /**
+     * Stops for a context the browser has taken, and asks for it back.
+     *
+     * **Taken on a GPU reset, and past the cap** of about sixteen, where the
+     * browser drops the oldest context for the newest while its aura is still on
+     * screen. `tick` books its own next frame, so the loop went on at 30 frames a
+     * second against a context that draws nothing, and nothing made the program
+     * again once the context came back: the aura never recovered.
+     *
+     * **The canvas is hidden until then, because a lost one is not reliably
+     * transparent.** Measured 15 Sep 2026: headless Chromium painted a plain
+     * canvas white with a broken-image glyph in its corner, force-lost and on a
+     * crashed GPU process alike, while this one came out clear there and on
+     * Metal, and the landing page once held a spent one's last frame (`build`
+     * has it). Hidden, it shows what a machine with no WebGL is shown, the host's
+     * gradient, whatever the engine does with a lost canvas.
+     *
+     * `preventDefault` is the asking: a browser restores only a context whose
+     * loss was canceled.
+     */
+    private readonly handleLost;
+    /**
+     * Draws again on the context the browser gave back.
+     *
+     * Everything made on it went with the loss, so the program is linked again
+     * and the buffer measured as though it were new, which is what gives the new
+     * program its resolution.
+     */
+    private readonly handleRestored;
     /**
      * Resolves the ramp. Called when the palette moves, not when a frame draws.
      *
@@ -368,6 +417,20 @@ export declare class HelixAura extends HelixElement {
      */
     private static readonly CAPPED;
     private readonly tick;
+    /**
+     * Starts the loop, where it is wanted and can be ended.
+     *
+     * **Never while detached.** `tick` books its own next frame, so the only
+     * thing that ends the loop is `stop`, and a disconnection is the last time
+     * `stop` is called. Everything that plays is canceled or disconnected there,
+     * and this holds for whatever callback was already on its way.
+     *
+     * **Nor off screen, whoever asks.** The observer is the one caller that
+     * knows, and a tab coming back, a resize and a restored context all play
+     * too. An aura 2600 pixels below the fold booked no frame at rest and one on
+     * every frame after its tab came back, until it had been scrolled in and out
+     * again. Nor on a lost context, which draws nothing.
+     */
     private play;
     private stop;
     /**

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

@@ -52,6 +52,7 @@ let HelixAura = class HelixAura extends HelixElement {
         this.head = { x: 1, y: 1 };
         this.target = { presence: 0, x: 0, y: 0 };
         this.eased = { presence: 0, x: 0, y: 0 };
+        this.onScreen = false;
         this.box = { height: 1, left: 0, top: 0, width: 1 };
         this.opened = false;
         this.opening = 0;
@@ -65,6 +66,31 @@ let HelixAura = class HelixAura extends HelixElement {
             this.program = null;
             this.gl = null;
         };
+        this.handleLost = (event) => {
+            event.preventDefault();
+            this.stop();
+            if (this.opening) {
+                cancelAnimationFrame(this.opening);
+                this.opening = 0;
+            }
+            this.program = null;
+            this.canvas?.toggleAttribute('hidden', true);
+        };
+        this.handleRestored = () => {
+            if (!this.prepare()) {
+                return;
+            }
+            this.width = 0;
+            this.height = 0;
+            this.measure();
+            if (this.opened) {
+                this.paint();
+                this.play();
+            }
+            else if (this.width) {
+                this.open();
+            }
+        };
         this.tick = (now) => {
             if (!this.last) {
                 this.last = now;
@@ -134,17 +160,27 @@ let HelixAura = class HelixAura extends HelixElement {
         this.start();
     }
     start() {
+        if (!this.isConnected) {
+            return;
+        }
         if (!this.renderRoot.querySelector('canvas')) {
             return;
         }
-        if (!this.program && !this.build()) {
+        if (this.program && this.gl?.isContextLost()) {
+            this.program = null;
+            this.gl = null;
+        }
+        if (!this.program && !this.gl?.isContextLost() && !this.build()) {
             return;
         }
+        this.canvas?.addEventListener('webglcontextlost', this.handleLost);
+        this.canvas?.addEventListener('webglcontextrestored', this.handleRestored);
         this.motion = window.matchMedia('(prefers-reduced-motion: reduce)');
         this.addEventListener('pointermove', this.handlePointer);
         this.addEventListener('pointerleave', this.handleLeave);
         this.visible = new IntersectionObserver(([entry]) => {
-            if (entry?.isIntersecting) {
+            this.onScreen = entry?.isIntersecting ?? false;
+            if (this.onScreen) {
                 this.play();
             }
             else {
@@ -168,7 +204,7 @@ let HelixAura = class HelixAura extends HelixElement {
         });
         this.sized.observe(this);
         this.readPalette();
-        if (this.measure()) {
+        if (this.measure() || (this.width && !this.opened)) {
             this.open();
         }
     }
@@ -193,10 +229,18 @@ let HelixAura = class HelixAura extends HelixElement {
         if (!gl || gl.isContextLost()) {
             return false;
         }
+        return this.prepare();
+    }
+    prepare() {
+        const gl = this.gl;
+        if (!gl) {
+            return false;
+        }
         this.program = this.link(VERTEX, FRAGMENT);
         if (!this.program) {
             return false;
         }
+        this.canvas?.toggleAttribute('hidden', false);
         gl.useProgram(this.program);
         for (const name of [
             'uBloom',
@@ -237,8 +281,16 @@ let HelixAura = class HelixAura extends HelixElement {
     disconnectedCallback() {
         super.disconnectedCallback();
         this.stop();
+        if (this.opening) {
+            cancelAnimationFrame(this.opening);
+            this.opening = 0;
+            this.openBy = 0;
+        }
         this.visible?.disconnect();
         this.visible = undefined;
+        this.onScreen = false;
+        this.canvas?.removeEventListener('webglcontextlost', this.handleLost);
+        this.canvas?.removeEventListener('webglcontextrestored', this.handleRestored);
         this.removeEventListener('pointermove', this.handlePointer);
         this.removeEventListener('pointerleave', this.handleLeave);
         document.removeEventListener('visibilitychange', this.handleVisibility);
@@ -383,7 +435,7 @@ let HelixAura = class HelixAura extends HelixElement {
         this.opening = requestAnimationFrame(draw);
     }
     paintOnce() {
-        if (this.frame) {
+        if (this.frame || !this.opened || !this.isConnected) {
             return;
         }
         this.paint();
@@ -391,9 +443,12 @@ let HelixAura = class HelixAura extends HelixElement {
     static { this.CAPPED = 1000 / 30; }
     play() {
         if (this.frame ||
+            !this.isConnected ||
+            !this.onScreen ||
             this.motion?.matches ||
             document.hidden ||
             !this.gl ||
+            this.gl.isContextLost() ||
             !this.width ||
             !this.opened) {
             return;

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

@@ -220,6 +220,10 @@ translate: 0 -50%;
 translate: -50% 0;
 }
 
+:host([direction="horizontal"]:dir(rtl)) [part="tick"] {
+translate: 50% 0;
+}
+
 :host(:not([direction="horizontal"])) [part="axis"][data-axis="secondary"] [part="tick"] {
 inset-inline-end: auto;
 inset-inline-start: 0;

package/dist/breadcrumbs/breadcrumb/breadcrumb.css.js

@@ -68,10 +68,6 @@ font-weight: var(--helix-weight-medium);
 color: var(--helix-color-foreground);
 }
 
-:host(:dir(rtl)) [part="separator"] svg {
-scale: -1 1;
-}
-
 [part="link"] {
 align-items: center;
 border-radius: var(--helix-radii-sm);

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

@@ -2,7 +2,13 @@ import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
 --_carousel-bleed: var(--carousel-bleed, var(--helix-space-md));
 --_carousel-gap: var(--carousel-gap, var(--helix-space-md));
+
+--_carousel-pane: calc(round(var(--_carousel-share) - 0.015625px, 0.03125px) + 0.015625px);
 --_carousel-per-view: 1;
+--_carousel-share: calc(
+(100% - (var(--_carousel-per-view) - 1) * var(--_carousel-gap)) /
+var(--_carousel-per-view)
+);
 }
 
 :host {
@@ -198,14 +204,21 @@ scroll-snap-type: y mandatory;
 
 [part="slide"] {
 display: flex;
-flex: 0 0
-calc(
-(100% - (var(--_carousel-per-view) - 1) * var(--_carousel-gap)) /
-var(--_carousel-per-view)
-);
+flex: 0 0 var(--_carousel-pane);
 scroll-snap-align: start;
 }
 
+:host(:not([orientation="vertical"])) [part="slide"]:last-child {
+--_carousel-overrun: calc(
+sibling-count() *
+(var(--_carousel-pane) + var(--_carousel-gap)) -
+var(--_carousel-gap) -
+100%
+);
+--_carousel-run-end: calc(round(var(--_carousel-overrun), 1px) - var(--_carousel-overrun));
+margin-inline-end: var(--_carousel-run-end);
+}
+
 [part="slide"] ::slotted(*) {
 flex: 1 1 0;
 min-block-size: 0;
@@ -214,11 +227,7 @@ min-inline-size: 0;
 
 :host([orientation="vertical"]) [part="slide"] {
 flex-direction: column;
-flex: 0 0
-calc(
-(100% - (var(--_carousel-per-view) - 1) * var(--_carousel-gap)) /
-var(--_carousel-per-view)
-);
+flex: 0 0 var(--_carousel-share);
 }
 
 :host([per-view="2"]) {
@@ -312,11 +321,6 @@ margin-inline-start: auto;
 order: 1;
 }
 
-:host(:dir(rtl)) [part="previous"] svg,
-:host(:dir(rtl)) [part="next"] svg {
-scale: -1 1;
-}
-
 :host([orientation="vertical"]:not([indicator-placement])) [part="indicators"] {
 align-self: var(--_carousel-indicators-along);
 flex-direction: column;

package/dist/code-block/root/code-block-root.css.js

@@ -28,16 +28,24 @@ border-end-start-radius: var(--helix-radii-none);
 border-start-end-radius: var(--code-block-radius, var(--helix-radii-lg));
 border-start-start-radius: var(--code-block-radius, var(--helix-radii-lg));
 display: flex;
+gap: var(--helix-space-sm);
 
 padding-block: var(--helix-space-xs);
 padding-inline: var(--helix-space-md);
 }
 
+[part="header"]:has(> [part="copy"]) {
+padding-block: var(--helix-space-2xs);
+padding-inline-end: var(--helix-space-2xs);
+}
+
 [part="label"] {
 color: var(--helix-color-foreground-muted);
 font-family: var(--helix-font-sans);
 font-size: var(--helix-text-xs);
 font-weight: var(--helix-weight-medium);
+min-inline-size: 0;
+overflow-wrap: anywhere;
 }
 
 [part="frame"] {
@@ -50,6 +58,13 @@ block-size: 100%;
 
 [part="copy"] {
 --icon-button-size: var(--helix-size-control-sm);
+}
+
+[part="header"] > [part="copy"] {
+margin-inline-start: auto;
+}
+
+[part="frame"] > [part="copy"] {
 inset-block-start: var(--_code-block-copy-inset);
 inset-inline-end: var(--_code-block-copy-inset);
 position: absolute;
@@ -67,7 +82,7 @@ padding-block: var(--helix-space-sm);
 padding-inline: var(--helix-space-md);
 }
 
-:host(:not([no-copy])) [part="block"] {
+:host(:not([diff], [no-copy])) [part="frame"]:not([part="header"] + *) > [part="block"] {
 padding-inline-end: var(--_code-block-gutter);
 }
 
@@ -114,7 +129,13 @@ padding-block: var(--helix-space-none) var(--helix-space-sm);
 padding-inline: var(--helix-space-none);
 }
 
-[part="header"] + [part="frame"] [part="split"] > * {
+:host([diff]:not([no-copy]))
+[part="frame"]:not([part="header"] + *)
+:is([part="block"], [part="old"], [part="new"]) {
+padding-block-start: var(--_code-block-gutter);
+}
+
+[part="header"] + [part="frame"] :is([part="block"], [part="split"] > *) {
 border-block-start-width: var(--helix-space-none);
 border-start-end-radius: var(--helix-radii-none);
 border-start-start-radius: var(--helix-radii-none);
@@ -130,6 +151,16 @@ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
 [part="split"] {
 grid-template-columns: minmax(0, 1fr);
 }
+
+[part="header"] + [part="frame"] [part="new"] {
+border-block-start-width: var(--helix-border-thin);
+border-start-end-radius: var(--code-block-radius, var(--helix-radii-lg));
+border-start-start-radius: var(--code-block-radius, var(--helix-radii-lg));
+}
+
+:host([diff]:not([no-copy])) [part="frame"]:not([part="header"] + *) [part="new"] {
+padding-block-start: var(--helix-space-none);
+}
 }
 
 :host([diff]) [part="code"] {
@@ -147,10 +178,6 @@ padding-inline: var(--helix-space-md);
 text-decoration: none;
 }
 
-:host(:not([no-copy])) :is([part="hunk"], [part="context"], [part="added"], [part="removed"]) {
-padding-inline-end: var(--_code-block-gutter);
-}
-
 [part="hunk"] {
 background-color: var(--helix-color-surface-sunken);
 color: var(--helix-color-foreground-muted);

package/dist/code-block/root/code-block-root.d.ts

@@ -5,9 +5,12 @@ import '../../copy-button/index.js';
  * @summary A block of code, with somewhere to put its name and a way to take it.
  *
  * @description
- * The header sits above the code rather than floating on it. Overlaid, which is
- * the usual build, the copy button covers the first line, which is the one line
- * of a snippet a reader is most likely to be reading.
+ * The header sits above the code rather than floating on it, and the copy
+ * button stands at its end. Overlaid, which is the usual build, the button
+ * covers the first line, which is the one line of a snippet a reader is most
+ * likely to be reading. A block with no name has no header, and the button
+ * stands beside the code in room the block keeps clear: an end gutter for code,
+ * a band above the first hunk for a diff.
  *
  * A diff is drawn a block per file in the same frame, each changed line washed
  * in its tone at Tag's resting strength with its `+` or `-` in the tone's ink,

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

@@ -1,9 +1,15 @@
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
+
+--_color-picker-along: to right;
 display: block;
 padding-block-end: var(--color-picker-padding, var(--helix-space-none));
 }
 
+:host(:dir(rtl)) {
+--_color-picker-along: to left;
+}
+
 [part="sample"],
 [part="swatch"] {
 background-image:
@@ -29,7 +35,7 @@ box-sizing: border-box;
 aspect-ratio: var(--color-picker-grid-ratio, 1 / 0.7);
 background-image:
 linear-gradient(to top, hsl(0 0% 0%), transparent),
-linear-gradient(to right, hsl(0 0% 100%), transparent),
+linear-gradient(var(--_color-picker-along), hsl(0 0% 100%), transparent),
 linear-gradient(hsl(var(--color-picker-hue) 100% 50%), hsl(var(--color-picker-hue) 100% 50%));
 border-radius: var(--color-picker-grid-radius, var(--helix-radii-sm));
 cursor: crosshair;
@@ -50,6 +56,10 @@ position: absolute;
 translate: -50% -50%;
 }
 
+:host(:dir(rtl)) [part="grid-handle"] {
+translate: 50% -50%;
+}
+
 [part="grid-saturation"],
 [part="grid-brightness"] {
 appearance: none;
@@ -135,7 +145,7 @@ white-space: nowrap;
 
 [part="channel"][data-channel="hue"] {
 --slider-track-image: linear-gradient(
-to right,
+var(--_color-picker-along),
 hsl(0 100% 50%),
 hsl(60 100% 50%),
 hsl(120 100% 50%),
@@ -148,7 +158,7 @@ hsl(360 100% 50%)
 
 [part="channel"][data-channel="alpha"] {
 --slider-track-image:
-linear-gradient(to right, transparent, hsl(var(--color-picker-hue) 100% 50%)),
+linear-gradient(var(--_color-picker-along), transparent, hsl(var(--color-picker-hue) 100% 50%)),
 conic-gradient(
 var(--helix-color-surface-sunken) 0 25%,
 var(--helix-color-surface) 0 50%,

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

@@ -177,8 +177,6 @@ outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
 outline-offset: var(--helix-size-focus-offset);
 }
 
-:host(:dir(rtl)) [part="previous"] svg,
-:host(:dir(rtl)) [part="next"] svg,
 :host(:dir(rtl)) ::slotted([slot="previous-icon"]),
 :host(:dir(rtl)) ::slotted([slot="next-icon"]) {
 scale: -1 1;

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

@@ -128,6 +128,14 @@ block-size: calc(
 font-size: 6.5cqi;
 }
 
+:host(:dir(rtl)) [part="center"] {
+translate: 50% -50%;
+}
+
+:host([sweep="half"]:dir(rtl)) [part="center"] {
+translate: 50% 0;
+}
+
 @media print {
 :host {
 print-color-adjust: exact;

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

@@ -34,10 +34,6 @@ flex: none;
 inline-size: var(--helix-size-icon-tight);
 }
 
-:host(:dir(rtl)) [part="mark"] {
-scale: -1 1;
-}
-
 :host(:not([disabled])) [part="item"]:hover {
 background-color: var(
 --drilldown-item-hover-color,

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

@@ -98,10 +98,6 @@ animation: none;
 }
 }
 
-:host(:dir(rtl)) [part="back"] svg {
-scale: -1 1;
-}
-
 :host([loading]) [part="page"] {
 opacity: 0.5;
 }

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

@@ -34,9 +34,17 @@ import '../../tooltip/index.js';
  * @csspart tooltip - The bubble, forwarded from `Tooltip`.
  * @csspart tooltip-anchor - The `Tooltip` element itself.
  * @csspart tooltip-arrow - The bubble's point, forwarded from `Tooltip`.
+ * @csspart tooltip-arrow-bottom - The point while the bubble is below the reading, so on its top edge, beside `tooltip-arrow`.
+ * @csspart tooltip-arrow-left - The point while the bubble is left of the reading, so on its right edge, beside `tooltip-arrow`.
+ * @csspart tooltip-arrow-right - The point while the bubble is right of the reading, so on its left edge, beside `tooltip-arrow`.
+ * @csspart tooltip-arrow-top - The point while the bubble is above the reading, so on its bottom edge, beside `tooltip-arrow`.
+ * @csspart tooltip-bottom - The bubble while it is below the reading, beside `tooltip`.
  * @csspart tooltip-cell - One column's name and value inside the tooltip.
  * @csspart tooltip-label - The reading's own name inside the tooltip.
+ * @csspart tooltip-left - The bubble while it is left of the reading, beside `tooltip`.
  * @csspart tooltip-name - A column's name inside the tooltip.
+ * @csspart tooltip-right - The bubble while it is right of the reading, beside `tooltip`.
+ * @csspart tooltip-top - The bubble while it is above the reading, beside `tooltip`.
  * @csspart tooltip-value - A column's value inside the tooltip.
  *
  * @cssproperty --heatmap-cell-height - How tall a cell is. A row of a tall thin cell is what a status page draws.

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

@@ -100,8 +100,4 @@ display: contents;
 
 slot[name="submenu"]::slotted(helix-divider) {
 margin-block: var(--helix-space-2xs);
-}
-
-:host(:dir(rtl)) [part="mark"][data-submenu] {
-scale: -1 1;
 }`);

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

@@ -100,10 +100,6 @@ margin-block: var(--helix-space-2xs);
 display: none;
 }
 
-:host(:dir(rtl)) [part="back"] svg {
-scale: -1 1;
-}
-
 :host([loading]) [part="surface"] {
 opacity: 0.5;
 }

package/dist/object-inspector/root/object-inspector-root.css.js

@@ -98,10 +98,6 @@ margin-inline-end: var(--helix-space-2xs);
 vertical-align: -0.125em;
 }
 
-:host(:dir(rtl)) [part~="row"][aria-expanded="false"] > [part="toggle"] {
-scale: -1 1;
-}
-
 [part="key"] {
 color: var(--helix-color-syntax-name);
 }

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

@@ -31,6 +31,10 @@ inline-size: 100%;
 text-decoration-color: var(--_orb-ground);
 }
 
+[part="canvas"][hidden] {
+display: none;
+}
+
 @media print {
 :host {
 display: none;

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

@@ -92,6 +92,8 @@ export declare class HelixOrb extends HelixElement {
     private frame;
     private running;
     private onScreen;
+    /** Whether the browser has taken the canvas, as its own two events say. */
+    private lost;
     /** The box the canvas was last measured at, in CSS pixels. */
     private box;
     /**
@@ -150,6 +152,27 @@ export declare class HelixOrb extends HelixElement {
     private stop;
     private readonly tick;
     private readonly handleVisibility;
+    /**
+     * Stops for a canvas the browser has taken, on a GPU reset, until it is
+     * given back.
+     *
+     * **Not canceled, which is the aura's contract turned over.** A 2D context
+     * comes back on its own unless its loss is canceled, where a WebGL one comes
+     * back only if it is. Hidden meanwhile, because a lost canvas is not reliably
+     * transparent (the aura's `handleLost` has what was measured), and hidden it
+     * leaves the empty box a machine with no 2D context is shown.
+     */
+    private readonly handleLost;
+    /**
+     * Draws again on the canvas the browser gave back.
+     *
+     * **Sized again, because it comes back in its default state.** Found 15 Sep
+     * 2026 by crashing the GPU process under headless Chromium: the transform
+     * `measure` sets came back the identity, and `measure` sets it only when the
+     * box changes. At twice the density that is an orb drawn at half its size in
+     * the top left corner, for as long as the box holds still.
+     */
+    private readonly handleRestored;
     private readonly handleMotion;
     /**
      * One frame.