@fusion.dev/helix 0.32.0 → 0.33.1

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%);
 }`);

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

@@ -14,11 +14,17 @@ transparent
 );
 
 --_slider-track-color: var(--slider-track-color, var(--helix-color-border));
+
+--_slider-along: to right;
 display: flex;
 flex-direction: column;
 gap: var(--helix-space-2xs);
 }
 
+:host(:dir(rtl)) {
+--_slider-along: to left;
+}
+
 [part="field"] {
 align-items: center;
 display: flex;
@@ -66,7 +72,7 @@ grid-row: 1;
 --_slider-track-image: var(
 --slider-track-image,
 linear-gradient(
-to right,
+var(--_slider-along),
 var(--slider-fill-color, var(--helix-color-primary)) calc(var(--slider-fraction, 0) * 100%),
 var(--_slider-track-color) calc(var(--slider-fraction, 0) * 100%)
 )
@@ -86,6 +92,14 @@ z-index: var(--helix-layer-raised);
 padding-block-end: var(--helix-space-lg);
 }
 
+:host([marker-labels]:not([orientation="vertical"])) [part="markers"] {
+block-size: calc(var(--_slider-track) + var(--helix-space-lg));
+border-inline: var(--helix-space-lg) solid transparent;
+margin-block-end: calc(var(--helix-space-lg) * -1);
+margin-inline: calc(var(--_slider-thumb-length) / 2 - var(--helix-space-lg));
+mask-origin: padding-box;
+}
+
 [part="marker-label"] {
 color: var(--helix-color-foreground-subtle);
 font-family: var(--helix-font-sans);
@@ -97,26 +111,44 @@ position: absolute;
 translate: -50% 0;
 }
 
+:host(:dir(rtl)) [part="marker-label"] {
+translate: 50% 0;
+}
+
 [part="markers"] {
+
 --_slider-hole: calc(var(--_slider-thumb-length) / 2 + var(--helix-border-thin));
+--_slider-hole-at: calc(var(--slider-fraction, 0) * 100%);
+--_slider-hole-from: calc(var(--slider-from, 0) * 100%);
+--_slider-hole-to: calc(var(--slider-to, 0) * 100%);
+--_slider-under: linear-gradient(transparent var(--_slider-track), currentColor 0);
 
-mask-image: radial-gradient(
-circle at calc(var(--slider-fraction, 0) * 100%) 50%,
+mask-image:
+var(--_slider-under),
+radial-gradient(
+circle at var(--_slider-hole-at) calc(var(--_slider-track) / 2),
 transparent var(--_slider-hole),
 currentColor var(--_slider-hole)
 );
 }
 
+:host(:dir(rtl)) [part="markers"] {
+--_slider-hole-at: calc(100% - var(--slider-fraction, 0) * 100%);
+--_slider-hole-from: calc(100% - var(--slider-from, 0) * 100%);
+--_slider-hole-to: calc(100% - var(--slider-to, 0) * 100%);
+}
+
 [part="field"][data-range] [part="markers"] {
-mask-composite: intersect;
+mask-composite: add, intersect;
 mask-image:
+var(--_slider-under),
 radial-gradient(
-circle at calc(var(--slider-from, 0) * 100%) 50%,
+circle at var(--_slider-hole-from) calc(var(--_slider-track) / 2),
 transparent var(--_slider-hole),
 currentColor var(--_slider-hole)
 ),
 radial-gradient(
-circle at calc(var(--slider-to, 0) * 100%) 50%,
+circle at var(--_slider-hole-to) calc(var(--_slider-track) / 2),
 transparent var(--_slider-hole),
 currentColor var(--_slider-hole)
 );
@@ -142,6 +174,10 @@ position: absolute;
 translate: -50% 0;
 }
 
+:host(:dir(rtl)) [part="marker"] {
+translate: 50% 0;
+}
+
 :host(:disabled) [part="control"] {
 cursor: not-allowed;
 }
@@ -246,7 +282,7 @@ grid-row: 1;
 --_slider-track-image: var(
 --slider-track-image,
 linear-gradient(
-to right,
+var(--_slider-along),
 var(--_slider-track-color) calc(var(--slider-from, 0) * 100%),
 var(--slider-fill-color, var(--helix-color-primary)) calc(var(--slider-from, 0) * 100%),
 var(--slider-fill-color, var(--helix-color-primary)) calc(var(--slider-to, 1) * 100%),

package/dist/table/cell/table-cell.css.js

@@ -8,11 +8,16 @@ box-sizing: border-box;
 color: var(--helix-color-foreground);
 display: flex;
 font-size: var(--helix-text-sm);
+
+justify-content: var(--table-cell-align);
 min-block-size: var(--helix-size-control);
 min-inline-size: 0;
 
 overflow-wrap: anywhere;
-padding: var(--helix-space-xs) var(--helix-space-md) var(--helix-space-xs) var(--helix-space-none);
+
+padding-block: var(--helix-space-xs);
+padding-inline: var(--helix-space-none) var(--helix-space-md);
+text-align: var(--table-cell-align);
 }
 
 ::slotted(*) {

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

@@ -3,7 +3,7 @@ export const styles = createSheet(`:host {
 display: contents;
 }
 
-[part="tooltip"] {
+[part~="tooltip"] {
 overflow: visible;
 align-items: center;
 display: flex;
@@ -34,12 +34,12 @@ display var(--helix-duration-fast) allow-discrete,
 overlay var(--helix-duration-fast) allow-discrete;
 }
 
-[part="tooltip"][data-placed] {
+[part~="tooltip"][data-placed] {
 opacity: 1;
 scale: 1;
 }
 
-[part="arrow"] {
+[part~="arrow"] {
 background-color: var(--tooltip-background-color, var(--helix-color-surface-inverse));
 
 block-size: var(--tooltip-arrow-size, 0.5rem);
@@ -48,68 +48,52 @@ position: absolute;
 rotate: 45deg;
 }
 
-:host([material="glass"]) [part="tooltip"],
-:host([material="glass"]) [part="arrow"] {
+:host([material="glass"]) [part~="tooltip"],
+:host([material="glass"]) [part~="arrow"] {
 backdrop-filter: var(--tooltip-backdrop, var(--helix-material-backdrop));
 background-color: var(--tooltip-background-color, var(--helix-material-translucent));
 }
 
-:host([material="frosted"]) [part="tooltip"],
-:host([material="frosted"]) [part="arrow"] {
+:host([material="frosted"]) [part~="tooltip"],
+:host([material="frosted"]) [part~="arrow"] {
 backdrop-filter: var(--tooltip-backdrop, blur(var(--helix-material-blur-lg)));
 background-color: var(--tooltip-background-color, var(--helix-material-translucent-strong));
 }
 
-:host([material="frosted"]) [part="tooltip"],
-:host([material="glass"]) [part="tooltip"] {
+:host([material="frosted"]) [part~="tooltip"],
+:host([material="glass"]) [part~="tooltip"] {
 border: var(--helix-border-thin) solid var(--helix-color-border);
 color: var(--helix-color-foreground);
 }
 
-[part="tooltip"][data-placement^="bottom"] [part="arrow"] {
-inset-block-start: calc(var(--tooltip-arrow-size, 0.5rem) / -2);
-}
-
-[part="tooltip"][data-placement^="top"] [part="arrow"] {
-inset-block-end: calc(var(--tooltip-arrow-size, 0.5rem) / -2);
-}
-
-[part="tooltip"][data-placement^="right"] [part="arrow"] {
-inset-inline-start: calc(var(--tooltip-arrow-size, 0.5rem) / -2);
-}
-
-[part="tooltip"][data-placement^="left"] [part="arrow"] {
-inset-inline-end: calc(var(--tooltip-arrow-size, 0.5rem) / -2);
-}
-
-[part="tooltip"][data-placement^="top"] {
+[part~="tooltip"][data-placement^="top"] {
 transform-origin: var(--floating-arrow-x, 50%) 100%;
 }
 
-[part="tooltip"][data-placement^="bottom"] {
+[part~="tooltip"][data-placement^="bottom"] {
 transform-origin: var(--floating-arrow-x, 50%) 0;
 }
 
-[part="tooltip"][data-placement^="left"] {
+[part~="tooltip"][data-placement^="left"] {
 transform-origin: 100% var(--floating-arrow-y, 50%);
 }
 
-[part="tooltip"][data-placement^="right"] {
+[part~="tooltip"][data-placement^="right"] {
 transform-origin: 0 var(--floating-arrow-y, 50%);
 }
 
-[part="tooltip"]:not(:popover-open) {
+[part~="tooltip"]:not(:popover-open) {
 display: none;
 }
 
 @media (prefers-reduced-motion: reduce) {
 
-[part="tooltip"] {
+[part~="tooltip"] {
 scale: 1;
 transition: none;
 }
 
-[part="tooltip"][data-placed] {
+[part~="tooltip"][data-placed] {
 scale: 1;
 }
 }

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

@@ -8,9 +8,10 @@ border-radius: var(--tour-spotlight-radius, var(--helix-radii-md));
 box-shadow: 0 0 0 100vmax var(--tour-scrim-color, var(--helix-color-overlay));
 pointer-events: none;
 position: fixed;
+
 transition:
-inset-block-start var(--helix-duration-normal) var(--helix-easing-standard),
-inset-inline-start var(--helix-duration-normal) var(--helix-easing-standard),
+left var(--helix-duration-normal) var(--helix-easing-standard),
+top var(--helix-duration-normal) var(--helix-easing-standard),
 block-size var(--helix-duration-normal) var(--helix-easing-standard),
 inline-size var(--helix-duration-normal) var(--helix-easing-standard);
 z-index: var(--helix-layer-overlay);

package/dist/tour/stop/tour-stop.css.js

@@ -43,7 +43,7 @@ justify-content: flex-end;
 margin-inline-end: auto;
 }
 
-[part="arrow"] {
+[part~="arrow"] {
 background-color: var(--tour-surface-color, var(--helix-color-surface-raised));
 
 block-size: var(--tour-arrow-size, 0.5rem);
@@ -52,26 +52,22 @@ position: absolute;
 rotate: 45deg;
 }
 
-[part="bubble"][data-placement^="bottom"] [part="arrow"] {
-border-block-start: var(--helix-border-thin) solid var(--helix-color-border);
-border-inline-start: var(--helix-border-thin) solid var(--helix-color-border);
-inset-block-start: calc(var(--tour-arrow-size, 0.5rem) / -2);
+[part="bubble"][data-placement^="bottom"] [part~="arrow"] {
+border-left: var(--helix-border-thin) solid var(--helix-color-border);
+border-top: var(--helix-border-thin) solid var(--helix-color-border);
 }
 
-[part="bubble"][data-placement^="top"] [part="arrow"] {
-border-block-end: var(--helix-border-thin) solid var(--helix-color-border);
-border-inline-end: var(--helix-border-thin) solid var(--helix-color-border);
-inset-block-end: calc(var(--tour-arrow-size, 0.5rem) / -2);
+[part="bubble"][data-placement^="top"] [part~="arrow"] {
+border-bottom: var(--helix-border-thin) solid var(--helix-color-border);
+border-right: var(--helix-border-thin) solid var(--helix-color-border);
 }
 
-[part="bubble"][data-placement^="right"] [part="arrow"] {
-border-block-end: var(--helix-border-thin) solid var(--helix-color-border);
-border-inline-start: var(--helix-border-thin) solid var(--helix-color-border);
-inset-inline-start: calc(var(--tour-arrow-size, 0.5rem) / -2);
+[part="bubble"][data-placement^="right"] [part~="arrow"] {
+border-bottom: var(--helix-border-thin) solid var(--helix-color-border);
+border-left: var(--helix-border-thin) solid var(--helix-color-border);
 }
 
-[part="bubble"][data-placement^="left"] [part="arrow"] {
-border-block-start: var(--helix-border-thin) solid var(--helix-color-border);
-border-inline-end: var(--helix-border-thin) solid var(--helix-color-border);
-inset-inline-end: calc(var(--tour-arrow-size, 0.5rem) / -2);
+[part="bubble"][data-placement^="left"] [part~="arrow"] {
+border-right: var(--helix-border-thin) solid var(--helix-color-border);
+border-top: var(--helix-border-thin) solid var(--helix-color-border);
 }`);

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

@@ -86,6 +86,10 @@ transform: rotate(-90deg);
 transition: transform var(--helix-duration-fast) var(--helix-easing-standard);
 }
 
+:host(:dir(rtl)) [part="toggle"] {
+transform: rotate(90deg);
+}
+
 :host(:state(open)) [part="toggle"] {
 transform: rotate(0deg);
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix",
   "description": "Styled component tier. Extends the headless tier with token-driven presentation.",
-  "version": "0.32.0",
+  "version": "0.33.1",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -47,14 +47,14 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.32.0",
-    "@fusion.dev/helix-headless": "0.32.0",
-    "@fusion.dev/helix-styles": "0.32.0"
+    "@fusion.dev/helix-core": "0.33.1",
+    "@fusion.dev/helix-headless": "0.33.1",
+    "@fusion.dev/helix-styles": "0.33.1"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.11.0",
-    "@fusion.dev/helix-cem": "0.32.0",
-    "@fusion.dev/helix-testing": "0.32.0",
+    "@fusion.dev/helix-cem": "0.33.1",
+    "@fusion.dev/helix-testing": "0.33.1",
     "@fusion.dev/scripts": "0.0.0-dev",
     "@happy-dom/global-registrator": "^20.0.0",
     "@lit-labs/ssr": "^4.1.0",