@fusion.dev/helix 0.32.0 → 0.33.0

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.0",
   "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.0",
+    "@fusion.dev/helix-headless": "0.33.0",
+    "@fusion.dev/helix-styles": "0.33.0"
   },
   "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.0",
+    "@fusion.dev/helix-testing": "0.33.0",
     "@fusion.dev/scripts": "0.0.0-dev",
     "@happy-dom/global-registrator": "^20.0.0",
     "@lit-labs/ssr": "^4.1.0",