@fusion.dev/helix 0.32.0 → 0.33.0

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

@@ -199,9 +199,11 @@ scroll-snap-type: y mandatory;
 [part="slide"] {
 display: flex;
 flex: 0 0
-calc(
+round(
+up,
 (100% - (var(--_carousel-per-view) - 1) * var(--_carousel-gap)) /
-var(--_carousel-per-view)
+var(--_carousel-per-view),
+1px
 );
 scroll-snap-align: start;
 }
@@ -312,11 +314,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/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.

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

@@ -32,6 +32,7 @@ let HelixOrb = class HelixOrb extends HelixElement {
         this.frame = 0;
         this.running = false;
         this.onScreen = false;
+        this.lost = false;
         this.box = 0;
         this.from = paramsFor('thinking');
         this.morphAt = 0;
@@ -56,6 +57,19 @@ let HelixOrb = class HelixOrb extends HelixElement {
                 this.play();
             }
         };
+        this.handleLost = () => {
+            this.lost = true;
+            this.stop();
+            this.canvas?.toggleAttribute('hidden', true);
+        };
+        this.handleRestored = () => {
+            this.lost = false;
+            this.canvas?.toggleAttribute('hidden', false);
+            this.box = 0;
+            this.measure();
+            this.paint(0);
+            this.play();
+        };
         this.handleMotion = () => {
             if (this.motion?.matches) {
                 this.stop();
@@ -99,6 +113,10 @@ let HelixOrb = class HelixOrb extends HelixElement {
     disconnectedCallback() {
         super.disconnectedCallback();
         this.stop();
+        this.onScreen = false;
+        this.box = 0;
+        this.canvas?.removeEventListener('contextlost', this.handleLost);
+        this.canvas?.removeEventListener('contextrestored', this.handleRestored);
         this.visible?.disconnect();
         this.visible = undefined;
         this.sized?.disconnect();
@@ -108,6 +126,9 @@ let HelixOrb = class HelixOrb extends HelixElement {
         document.removeEventListener('visibilitychange', this.handleVisibility);
     }
     start() {
+        if (!this.isConnected) {
+            return;
+        }
         const canvas = this.renderRoot.querySelector('canvas');
         if (!canvas) {
             return;
@@ -117,6 +138,12 @@ let HelixOrb = class HelixOrb extends HelixElement {
         if (!this.context) {
             return;
         }
+        canvas.addEventListener('contextlost', this.handleLost);
+        canvas.addEventListener('contextrestored', this.handleRestored);
+        if (this.lost && !this.context.isContextLost()) {
+            this.lost = false;
+            canvas.toggleAttribute('hidden', false);
+        }
         this.motion ??= window.matchMedia('(prefers-reduced-motion: reduce)');
         this.motion.addEventListener('change', this.handleMotion);
         this.visible ??= new IntersectionObserver(([entry]) => {
@@ -178,7 +205,7 @@ let HelixOrb = class HelixOrb extends HelixElement {
         return blendStaged(this.from, to, smoother(k), smoother(Math.max(0, k - TRAIL) / (1 - TRAIL)));
     }
     play() {
-        if (this.running || this.motion?.matches || !this.onScreen) {
+        if (this.running || this.motion?.matches || !this.onScreen || this.lost) {
             return;
         }
         this.running = true;

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

@@ -103,10 +103,6 @@ block-size: var(--helix-size-icon-tight);
 inline-size: var(--helix-size-icon-tight);
 }
 
-:host(:dir(rtl)) [part="first"] svg,
-:host(:dir(rtl)) [part="last"] svg,
-:host(:dir(rtl)) [part="previous"] svg,
-:host(:dir(rtl)) [part="next"] svg,
 :host(:dir(rtl)) ::slotted([slot="first-icon"]),
 :host(:dir(rtl)) ::slotted([slot="last-icon"]),
 :host(:dir(rtl)) ::slotted([slot="previous-icon"]),

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

@@ -6,6 +6,7 @@ gap: var(--helix-space-2xs);
 }
 
 [part="field"] {
+align-self: start;
 display: flex;
 gap: var(--pin-input-gap, var(--helix-space-xs));
 }

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

@@ -1,7 +1,12 @@
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
-column-gap: var(--helix-space-xs);
 container-type: inline-size;
+display: block;
+position: relative;
+}
+
+[part="plane"] {
+column-gap: var(--helix-space-xs);
 display: grid;
 grid-template-areas:
 "y-name y-name"
@@ -9,7 +14,6 @@ grid-template-areas:
 ". x-axis"
 ". x-name";
 grid-template-columns: auto minmax(0, 1fr);
-position: relative;
 row-gap: var(--scatter-chart-gap, var(--helix-space-xs));
 }
 
@@ -113,6 +117,7 @@ justify-self: end;
 
 [part="y-name"] {
 grid-area: y-name;
+justify-self: start;
 }
 
 [part="summary"] {

package/dist/scroll-area/root/scroll-area-root.css.js

@@ -59,11 +59,18 @@ opacity: 1;
 }
 
 [part="edges"] {
+--_scroll-area-from-start: to right;
+--_scroll-area-from-end: to left;
 inset: 0;
 pointer-events: none;
 position: absolute;
 }
 
+:host(:dir(rtl)) [part="edges"] {
+--_scroll-area-from-start: to left;
+--_scroll-area-from-end: to right;
+}
+
 [part="edges"]::before,
 [part="edges"]::after {
 content: "";
@@ -76,7 +83,7 @@ z-index: var(--helix-layer-raised);
 
 [part="edges"]::before {
 background: linear-gradient(
-to right,
+var(--_scroll-area-from-start),
 var(--scroll-area-fade-color, var(--helix-color-background)),
 transparent
 );
@@ -86,7 +93,7 @@ inset-inline-start: 0;
 
 [part="edges"]::after {
 background: linear-gradient(
-to left,
+var(--_scroll-area-from-end),
 var(--scroll-area-fade-color, var(--helix-color-background)),
 transparent
 );

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

@@ -10,6 +10,10 @@ position: absolute;
 translate: -50% -50%;
 }
 
+:host(:dir(rtl)) [part="terminus"] {
+translate: 50% -50%;
+}
+
 [part="terminus"] {
 border-radius: var(--helix-radii-full);
 }
@@ -37,4 +41,8 @@ inline-size: calc(var(--chart-terminus-size, 5px) * 1.6);
 background-color: currentColor;
 border-radius: var(--helix-radii-none);
 clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
+}
+
+:host([terminus="triangle"]:dir(rtl)) [part="terminus"] {
+clip-path: polygon(100% 0%, 0% 50%, 100% 100%);
 }`);