@fusion.dev/helix 0.143.0 → 0.145.0

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

@@ -15,6 +15,10 @@ import type { CSSResultGroup } from 'lit';
  * @documentation https://fusion.dev/helix/components/textarea
  *
  * @cssproperty --textarea-background-color - Fill behind the text.
+ * @cssproperty --textarea-border-color - Edge of the field at rest. Hover, focus and an error still draw their own.
+ * @cssproperty --textarea-padding - Space between the edge of the field and the text.
+ * @cssproperty --textarea-radius - Corner radius of the field.
+ * @cssproperty --textarea-resize - Which way a reader can drag the field: `vertical` by default, `none`, `both` or `horizontal`. A field under `auto-grow` has nothing to drag.
  */
 export declare class HelixTextarea extends HelixHeadlessTextarea {
     static styles: CSSResultGroup;

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

@@ -90,6 +90,25 @@ flex-basis: 0;
 min-inline-size: var(--helix-size-icon-loose);
 }
 
+[part="segments"] {
+--_segment-focus-background-color: var(
+--time-input-segment-focus-background-color,
+var(--helix-color-primary)
+);
+--_segment-focus-color: var(
+--time-input-segment-focus-color,
+var(--helix-color-foreground-on-primary)
+);
+--_segment-literal-color: var(
+--time-input-segment-literal-color,
+var(--helix-color-foreground-muted)
+);
+--_segment-placeholder-color: var(
+--time-input-segment-placeholder-color,
+var(--helix-color-foreground-subtle)
+);
+}
+
 @media print {
 :host {
 print-color-adjust: exact;

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/timeline/group/timeline-group.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

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

@@ -0,0 +1,32 @@
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+display: block;
+padding-block-end: var(--timeline-gap, var(--helix-space-lg));
+}
+
+:host(:last-child) {
+padding-block-end: var(--helix-space-none);
+}
+
+[part="heading"] {
+color: var(--timeline-group-heading-color, var(--helix-color-foreground));
+font-size: var(--helix-text-sm);
+font-weight: var(--helix-weight-semibold);
+padding-block-end: var(--helix-space-sm);
+}
+
+[part="entries"] {
+display: flex;
+flex-direction: var(--_timeline-direction, column);
+}
+
+::slotted(*) {
+flex: var(--_timeline-entry-flex, 0 1 auto);
+min-inline-size: 0;
+}
+
+@media print {
+:host {
+break-inside: avoid-page;
+}
+}`);

package/dist/timeline/group/timeline-group.d.ts

@@ -0,0 +1,25 @@
+import { HelixHeadlessTimelineGroup } from '@fusion.dev/helix-headless/timeline';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary A run of timeline entries under a heading, such as a day.
+ *
+ * @description
+ * The heading sits at the start edge, over the entries, in the small heavy
+ * type of a section label, and the space under one group is the space between
+ * two entries.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @aliases Day, Section, Date group
+ * @documentation https://fusion.dev/helix/components/timeline
+ *
+ * @cssproperty --timeline-group-heading-color - The color of the heading.
+ */
+export declare class HelixTimelineGroup extends HelixHeadlessTimelineGroup {
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-timeline-group': HelixTimelineGroup;
+    }
+}

package/dist/timeline/group/timeline-group.js

@@ -0,0 +1,16 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { customElement } from '@fusion.dev/helix-core';
+import { HelixHeadlessTimelineGroup } from '@fusion.dev/helix-headless/timeline';
+import { styles } from './timeline-group.css.js';
+let HelixTimelineGroup = class HelixTimelineGroup extends HelixHeadlessTimelineGroup {
+    static { this.styles = styles; }
+};
+HelixTimelineGroup = __decorate([
+    customElement('helix-timeline-group')
+], HelixTimelineGroup);
+export { HelixTimelineGroup };

package/dist/timeline/index.d.ts

@@ -1,2 +1,3 @@
+export * from './group/timeline-group.js';
 export * from './item/timeline-item.js';
 export * from './root/timeline-root.js';

package/dist/timeline/index.js

@@ -1,2 +1,3 @@
+export * from './group/timeline-group.js';
 export * from './item/timeline-item.js';
 export * from './root/timeline-root.js';

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

@@ -2,21 +2,26 @@ import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
 column-gap: var(--helix-space-md);
 display: grid;
-grid-template-columns: auto minmax(0, 1fr);
-grid-template-rows: auto minmax(0, 1fr);
+
+grid-template-columns: var(--_timeline-columns, auto minmax(0, 1fr));
+grid-template-rows: var(--_timeline-rows, auto minmax(0, 1fr));
 }
 
 [part="rail"] {
+align-items: var(--_timeline-rail-align, normal);
 display: grid;
-grid-row: 1 / -1;
-grid-template-rows: subgrid;
-justify-items: center;
+grid-column: var(--_timeline-rail-column, auto);
+grid-row: var(--_timeline-rail-row, 1 / -1);
+grid-template-columns: var(--_timeline-rail-columns, none);
+grid-template-rows: var(--_timeline-rail-rows, subgrid);
+justify-items: var(--_timeline-rail-justify, center);
 }
 
 [part="rail"]::before {
 background-color: var(--helix-color-border);
 block-size: 100%;
 content: "";
+display: var(--_timeline-arrive-display, block);
 grid-column: 1;
 grid-row: 1;
 inline-size: var(--timeline-rail-size, var(--helix-border-thin));
@@ -27,14 +32,22 @@ visibility: hidden;
 }
 
 [part="rail"]::after {
-align-self: stretch;
+align-self: var(--_timeline-leave-align, stretch);
 background-color: var(--helix-color-border);
+block-size: var(--_timeline-leave-block-size, auto);
 content: "";
 
-grid-column: 1;
-grid-row: 2;
-inline-size: var(--timeline-rail-size, var(--helix-border-thin));
-margin-block-start: var(--timeline-marker-size, var(--helix-size-icon-md));
+grid-column: var(--_timeline-leave-column, 1);
+grid-row: var(--_timeline-leave-row, 2);
+inline-size: var(
+--_timeline-leave-inline-size,
+var(--timeline-rail-size, var(--helix-border-thin))
+);
+justify-self: var(--_timeline-leave-justify, auto);
+margin-block-start: var(
+--_timeline-leave-margin-block,
+var(--timeline-marker-size, var(--helix-size-icon-md))
+);
 }
 
 :host(:last-child) [part="rail"]::after {
@@ -52,7 +65,7 @@ border-radius: var(--timeline-marker-radius, var(--helix-radii-full));
 color: var(--_timeline-tone, var(--helix-color-foreground-subtle));
 display: inline-flex;
 grid-column: 1;
-grid-row: 2;
+grid-row: var(--_timeline-marker-row, 2);
 inline-size: var(--timeline-marker-size, var(--helix-size-icon-md));
 justify-content: center;
 }
@@ -92,21 +105,35 @@ color: var(--helix-color-foreground-muted);
 font-family: var(--helix-font-sans);
 font-size: var(--helix-text-xs);
 font-weight: var(--helix-weight-medium);
-grid-column: 2;
-grid-row: 1;
+grid-column: var(--_timeline-time-column, 2);
+grid-row: var(--_timeline-time-row, 1);
 padding-block-end: var(--helix-space-2xs);
+
+text-align: var(--_timeline-time-align);
 }
 
 [part="content"] {
 display: flex;
 flex-direction: column;
 gap: var(--helix-space-2xs);
-grid-column: 2;
-grid-row: 2;
+grid-column: var(--_timeline-content-column, 2);
+grid-row: var(--_timeline-content-row, 2);
 min-inline-size: 0;
-padding-block-end: var(--timeline-gap, var(--helix-space-lg));
+padding-block-end: var(--_timeline-content-block-end, var(--timeline-gap, var(--helix-space-lg)));
+padding-inline-end: var(--_timeline-content-inline-end, var(--helix-space-none));
 }
 
 :host(:last-child) [part="content"] {
 padding-block-end: var(--helix-space-none);
+padding-inline-end: var(--helix-space-none);
+}
+
+:host(:nth-child(even)) [part="time"] {
+grid-column: var(--_timeline-even-column, var(--_timeline-time-column, 2));
+text-align: var(--_timeline-even-align, var(--_timeline-time-align));
+}
+
+:host(:nth-child(even)) [part="content"] {
+grid-column: var(--_timeline-even-column, var(--_timeline-content-column, 2));
+text-align: var(--_timeline-even-align);
 }`);

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

@@ -4,6 +4,62 @@ display: flex;
 flex-direction: column;
 }
 
+:host([layout="opposite"]) {
+--_timeline-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+--_timeline-content-column: 3;
+--_timeline-rail-column: 2;
+--_timeline-time-align: end;
+--_timeline-time-column: 1;
+--_timeline-time-row: 2;
+}
+
+:host([layout="alternate"]) {
+--_timeline-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+--_timeline-content-column: 3;
+--_timeline-even-align: end;
+--_timeline-even-column: 1;
+--_timeline-rail-column: 2;
+--_timeline-time-column: 3;
+}
+
+:host([orientation="horizontal"]) {
+--_timeline-arrive-display: none;
+--_timeline-columns: minmax(0, 1fr);
+--_timeline-content-block-end: var(--helix-space-none);
+--_timeline-content-column: 1;
+--_timeline-content-inline-end: var(--timeline-gap, var(--helix-space-lg));
+--_timeline-content-row: 3;
+--_timeline-direction: row;
+--_timeline-entry-flex: 1 1 0;
+--_timeline-even-align: initial;
+--_timeline-even-column: initial;
+--_timeline-leave-align: center;
+--_timeline-leave-block-size: var(--timeline-rail-size, var(--helix-border-thin));
+--_timeline-leave-column: 2;
+--_timeline-leave-inline-size: auto;
+--_timeline-leave-justify: stretch;
+--_timeline-leave-margin-block: var(--helix-space-none);
+--_timeline-leave-row: 1;
+--_timeline-marker-row: 1;
+--_timeline-rail-align: center;
+--_timeline-rail-column: 1;
+--_timeline-rail-columns: auto minmax(0, 1fr);
+--_timeline-rail-justify: start;
+--_timeline-rail-row: 1;
+--_timeline-rail-rows: auto;
+--_timeline-rows: auto auto minmax(0, 1fr);
+--_timeline-time-align: initial;
+--_timeline-time-column: 1;
+--_timeline-time-row: 2;
+
+flex-direction: row;
+}
+
+:host([orientation="horizontal"]) ::slotted(*) {
+flex: 1 1 0;
+min-inline-size: 0;
+}
+
 @media print {
 :host {
 print-color-adjust: economy;

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

@@ -7,6 +7,19 @@ import type { CSSResultGroup } from 'lit';
  * Sets the direction time runs in and the spacing between events. Each entry
  * draws its own mark and line.
  *
+ * `layout` and `orientation` move where the entries are drawn, and never the
+ * order they are read in, which is the order you write them in:
+ *
+ * - Unset, the line runs down the start edge, with each time over what
+ *   happened.
+ * - `layout="opposite"` runs the line down the middle, with each time on the
+ *   start side and what happened on the end side.
+ * - `layout="alternate"` runs the line down the middle, with the first entry on
+ *   the end side, the second on the start side, and so on.
+ * - `orientation="horizontal"` runs the line across the top, with the entries
+ *   side by side in the order they are read, and the time over what happened
+ *   under each mark. Use it for a few entries, since they share the width.
+ *
  * @since 0.1.0
  * @status stable
  * @category data
@@ -17,6 +30,19 @@ import type { CSSResultGroup } from 'lit';
  */
 export declare class HelixTimeline extends HelixHeadlessTimeline {
     static styles: CSSResultGroup;
+    /**
+     * Where the entries sit beside the line: `opposite` puts the times on one
+     * side and what happened on the other, and `alternate` puts every other
+     * entry on the other side. Unset, the line runs down the start edge.
+     *
+     * Down the page only: across the page it is set aside.
+     */
+    layout?: 'alternate' | 'opposite';
+    /**
+     * Which way time runs: `horizontal` lays the entries across the page. Unset,
+     * they run down it.
+     */
+    orientation?: 'horizontal';
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/timeline/root/timeline-root.js

@@ -6,10 +6,17 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessTimeline } from '@fusion.dev/helix-headless/timeline';
+import { property } from 'lit/decorators.js';
 import { styles } from './timeline-root.css.js';
 let HelixTimeline = class HelixTimeline extends HelixHeadlessTimeline {
     static { this.styles = styles; }
 };
+__decorate([
+    property({ reflect: true })
+], HelixTimeline.prototype, "layout", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixTimeline.prototype, "orientation", void 0);
 HelixTimeline = __decorate([
     customElement('helix-timeline')
 ], HelixTimeline);

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/toolbar/root/toolbar-root.css.js

@@ -18,8 +18,11 @@ display: inline-flex;
 
 [part="toolbar"] {
 align-items: center;
+background-color: var(--toolbar-background-color, transparent);
+border-radius: var(--toolbar-radius, var(--helix-radii-none));
 display: flex;
 gap: var(--toolbar-gap, var(--helix-space-2xs));
+padding: var(--toolbar-padding, var(--helix-space-none));
 }
 
 :host([orientation="vertical"]) [part="toolbar"] {

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

@@ -17,7 +17,10 @@ import type { CSSResultGroup } from 'lit';
  *
  * @csspart toolbar - The toolbar container.
  *
+ * @cssproperty --toolbar-background-color - The fill behind the controls. Transparent unless set.
  * @cssproperty --toolbar-gap - The space between controls.
+ * @cssproperty --toolbar-padding - The space between the toolbar's edge and its controls.
+ * @cssproperty --toolbar-radius - The corner radius of the toolbar's fill.
  */
 export declare class HelixToolbar extends HelixHeadlessToolbar {
     static styles: CSSResultGroup;

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/tree/item/tree-item.css.js

@@ -166,4 +166,76 @@ grid-template-rows: 0fr;
 align-self: center;
 margin-inline-start: var(--tree-chevron-gap, var(--helix-space-none));
 order: var(--tree-chevron-order, 0);
+}
+
+slot[name="chevron"]::slotted(*) {
+align-self: center;
+block-size: var(--_tree-chevron);
+color: var(--helix-color-foreground-subtle);
+flex: 0 0 auto;
+inline-size: var(--_tree-chevron);
+margin-inline-start: var(--tree-chevron-gap, var(--helix-space-none));
+order: var(--tree-chevron-order, 0);
+transform: rotate(-90deg);
+transition: transform var(--helix-duration-fast) var(--helix-easing-standard);
+}
+
+:host(:dir(rtl)) slot[name="chevron"]::slotted(*) {
+transform: rotate(90deg);
+}
+
+:host(:state(open)) slot[name="chevron"]::slotted(*) {
+transform: rotate(0deg);
+}
+
+[part~="checkbox"] {
+align-self: center;
+background-color: var(--tree-checkbox-background-color, var(--helix-color-background));
+block-size: var(--tree-checkbox-size, var(--_tree-chevron));
+border: var(--helix-border-thin) solid
+var(--tree-checkbox-border-color, var(--helix-color-border));
+border-radius: var(--helix-radii-sm);
+color: var(--tree-checkbox-mark-color, var(--helix-color-foreground));
+display: grid;
+flex: 0 0 auto;
+inline-size: var(--tree-checkbox-size, var(--_tree-chevron));
+place-items: center;
+}
+
+[part~="checkbox-checked"],
+[part~="checkbox-mixed"] {
+border-color: var(--tree-checkbox-border-color, var(--helix-color-foreground));
+}
+
+[part~="checkbox"] svg {
+block-size: 80%;
+inline-size: 80%;
+}
+
+:host([disabled]) [part="row"] {
+cursor: not-allowed;
+opacity: 0.5;
+}
+
+:host([disabled]) [part="row"]:hover {
+background-color: transparent;
+color: var(--helix-color-foreground-muted);
+}
+
+:host(:state(loading)) [part="toggle"],
+:host(:state(loading)) slot[name="chevron"]::slotted(*) {
+animation: tree-loading var(--helix-duration-slow) var(--helix-easing-standard) infinite alternate;
+}
+
+@keyframes tree-loading {
+to {
+opacity: 0.3;
+}
+}
+
+@media (prefers-reduced-motion: reduce) {
+:host(:state(loading)) [part="toggle"],
+:host(:state(loading)) slot[name="chevron"]::slotted(*) {
+animation: none;
+}
 }`);

package/dist/tree/item/tree-item.d.ts

@@ -16,16 +16,26 @@ import type { CSSResultGroup } from 'lit';
  * @documentation https://fusion.dev/helix/components/tree
  *
  * @slot - The item's label.
+ * @slot chevron - Replaces the expand and collapse mark of a branch. A slotted icon is sized and
+ *   turned like the drawn one.
  * @slot children - Nested items, which make this a branch.
  *
  * @event {HelixSelectEvent} helix-select - Fired when the item is chosen, and cancelable. Canceling it changes nothing.
  *
+ * @csspart checkbox - The check mark's box, in a tree with `selection-mode="multiple"`.
+ * @csspart checkbox-checked - The check mark's box while the item is checked.
+ * @csspart checkbox-mixed - The check mark's box while some of a branch's items are checked.
  * @csspart group - The container for nested items.
  * @csspart item - The node, and the focus target.
  * @csspart label - The label text.
  * @csspart row - The clickable label row.
  * @csspart toggle - The expand and collapse control.
  *
+ * @cssproperty --tree-checkbox-background-color - Fill of the check mark's box.
+ * @cssproperty --tree-checkbox-border-color - Border of the check mark's box.
+ * @cssproperty --tree-checkbox-mark-color - Color of the check, and of the bar of a partly checked
+ *   branch.
+ * @cssproperty --tree-checkbox-size - Size of the check mark's box. Follows the chevron's size.
  * @cssproperty --tree-chevron-size - Size of the chevron, and the gutter a leaf reserves.
  * @cssproperty --tree-gap - Space between rows.
  * @cssproperty --tree-indent - Indent added per level.

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