@fusion.dev/helix 0.143.0 → 0.144.0

package/dist/time-input/root/time-input-root.d.ts

@@ -25,6 +25,14 @@ import '../../time-picker/index.js';
  * @cssproperty --time-input-border-width - Width of the panel's edge. Defaults to
  *   `--helix-border-floating`, which is `0`, so the panel stands out by its shadow unless
  *   your theme sets a width.
+ * @cssproperty --time-input-segment-focus-background-color - The fill behind the
+ *   segment with focus, in `segmented`. It follows `--helix-color-primary`.
+ * @cssproperty --time-input-segment-focus-color - The text of the segment with
+ *   focus, in `segmented`.
+ * @cssproperty --time-input-segment-literal-color - The text the locale writes
+ *   between two segments, in `segmented`.
+ * @cssproperty --time-input-segment-placeholder-color - The dashes of a segment
+ *   with nothing in it, in `segmented`. It matches the text field's placeholder.
  * @cssproperty --time-input-shadow - Shadow under the panel. Defaults to
  *   `--helix-shadow-floating`, because the panel can sit over any content.
  */

package/dist/time-input/root/time-input-root.js

@@ -10,6 +10,7 @@ import '../../tag/index.js';
 import '../../time-picker/index.js';
 import { styles as fieldStyles } from '../../shared/field/field.css.js';
 import { styles as fieldFrameStyles } from '../../shared/field/field-frame.css.js';
+import { styles as fieldSegmentsStyles } from '../../shared/field/field-segments.css.js';
 import { styles as fieldStackedStyles } from '../../shared/field/field-stacked.css.js';
 import { styles as floatingEntranceStyles } from '../../shared/floating/entrance.css.js';
 import { styles as floatingPanelStyles } from '../../shared/floating/panel.css.js';
@@ -21,6 +22,7 @@ let HelixTimeInput = class HelixTimeInput extends HelixHeadlessTimeInput {
         fieldStyles,
         fieldFrameStyles,
         fieldStackedStyles,
+        fieldSegmentsStyles,
         tagRowStyles,
         floatingPanelStyles,
         floatingEntranceStyles,

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

@@ -150,6 +150,22 @@ outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
 outline-offset: var(--helix-size-focus-offset);
 }
 
+[part="item"],
+[part="item"] > * {
+touch-action: pan-y;
+}
+
+[part="content"] > slot {
+display: block;
+touch-action: pan-y;
+}
+
+[part="item"][data-swiping] {
+transition: none;
+translate: var(--toast-swipe-x, 0) 0;
+user-select: none;
+}
+
 [part="timer"] {
 animation: helix-toast-drain var(--toast-duration, 0ms) linear forwards;
 background-color: var(--_toast-severity, var(--helix-color-foreground-muted));

package/dist/toggle/group/toggle-group.css.js

@@ -111,4 +111,20 @@ gap: var(--helix-space-sm);
 
 [part="row"] [part="track"] {
 flex: 1 1 auto;
+}
+
+:host([selection-mode="multiple"]) ::slotted(helix-toggle:state(pressed)) {
+background-color: var(--toggle-group-indicator-color, var(--_indicator-surface));
+border-radius: var(--_toggle-radius, var(--helix-radii-sm));
+box-shadow: var(--helix-shadow-sm);
+}
+
+:host([orientation="vertical"]) [part="track"] {
+align-items: stretch;
+flex-direction: column;
+flex-wrap: nowrap;
+}
+
+:host([orientation="vertical"]) ::slotted(helix-toggle) {
+flex: 0 0 auto;
 }`);

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

@@ -17,6 +17,14 @@ inline-size var(--helix-duration-normal) var(--helix-easing-standard);
 z-index: var(--helix-layer-overlay);
 }
 
+[part="backdrop"] {
+background-color: var(--tour-scrim-color, var(--helix-color-overlay));
+inset: 0;
+pointer-events: none;
+position: fixed;
+z-index: var(--helix-layer-overlay);
+}
+
 @media print {
 :host {
 display: none;

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

@@ -31,6 +31,34 @@ outline: none;
 display: none;
 }
 
+:host([type="dialog"]) [part="bubble"] {
+margin: auto;
+}
+
+:host([type="floating"]) [part="bubble"] {
+inset: auto;
+inset-block-end: var(--helix-space-lg);
+inset-inline-end: var(--helix-space-lg);
+}
+
+::slotted([slot="heading"]) {
+font-size: var(--helix-text-md);
+font-weight: var(--helix-weight-semibold);
+margin: var(--helix-space-none);
+}
+
+::slotted([slot="description"]) {
+color: var(--helix-color-foreground-muted);
+font-size: var(--helix-text-sm);
+margin: var(--helix-space-none);
+}
+
+[part="progress"] {
+color: var(--helix-color-foreground-muted);
+font-size: var(--helix-text-sm);
+font-variant-numeric: tabular-nums;
+}
+
 [part="content"] {
 display: flex;
 flex-direction: column;
@@ -75,4 +103,8 @@ border-left: var(--helix-border-thin) solid var(--helix-color-border);
 [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);
+}
+
+:host([type]) [part~="arrow"] {
+display: none;
 }`);

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

@@ -4,13 +4,13 @@ align-items: center;
 display: inline-flex;
 font-size: var(--helix-text-sm);
 font-weight: var(--helix-weight-medium);
-gap: var(--helix-space-2xs);
+gap: var(--trend-gap, var(--helix-space-2xs));
 line-height: var(--helix-leading-tight);
 }
 
 :host {
 
---_trend-color: var(--helix-color-foreground-muted);
+--_trend-color: var(--trend-neutral-color, var(--helix-color-foreground-muted));
 color: var(--trend-color, var(--_trend-color));
 }
 
@@ -18,14 +18,21 @@ color: var(--trend-color, var(--_trend-color));
 --icon-size: var(--trend-icon-size, 1em);
 }
 
+slot[name="icon"]::slotted(*) {
+--icon-size: var(--trend-icon-size, 1em);
+
+block-size: var(--trend-icon-size, 1em);
+inline-size: var(--trend-icon-size, 1em);
+}
+
 :host([direction="up"][good="up"]),
 :host([direction="down"][good="down"]) {
---_trend-color: var(--helix-color-success);
+--_trend-color: var(--trend-better-color, var(--helix-color-success));
 }
 
 :host([direction="up"][good="down"]),
 :host([direction="down"][good="up"]) {
---_trend-color: var(--helix-color-danger);
+--_trend-color: var(--trend-worse-color, var(--helix-color-danger));
 }
 
 [part="direction"] {
@@ -38,7 +45,7 @@ white-space: nowrap;
 }
 
 slot[name="label"] {
-color: var(--helix-color-foreground-muted);
+color: var(--trend-label-color, var(--helix-color-foreground-muted));
 font-weight: var(--helix-weight-regular);
 }
 

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

@@ -24,8 +24,13 @@ import type { CSSResultGroup } from 'lit';
  * @aliases Delta, Change, Movement
  * @documentation https://fusion.dev/helix/components/trend
  *
+ * @cssproperty --trend-better-color - Color of a move that `good` says is an improvement.
  * @cssproperty --trend-color - Color of the arrow. Setting it overrides the color that `good` sets.
- * @cssproperty --trend-icon-size - Size of the arrow.
+ * @cssproperty --trend-gap - Space between the arrow, the metric and the label.
+ * @cssproperty --trend-icon-size - Size of the arrow, or of a glyph in the `icon` slot.
+ * @cssproperty --trend-label-color - Color of the label.
+ * @cssproperty --trend-neutral-color - Color of a trend that `good` does not judge, or one that did not move.
+ * @cssproperty --trend-worse-color - Color of a move that `good` says is a setback.
  */
 export declare class HelixTrend extends HelixHeadlessTrend {
     static styles: CSSResultGroup;