@fusion.dev/helix 0.22.0 → 0.24.0

package/dist/filter-input/chip/filter-chip.css.js

@@ -0,0 +1,85 @@
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+align-items: center;
+background-color: var(--filter-input-chip-background-color, var(--helix-color-surface-sunken));
+border: var(--helix-border-thin) solid
+var(--filter-input-chip-border-color, var(--helix-color-border));
+border-radius: var(--filter-input-chip-radius, var(--helix-radii-sm));
+color: var(--helix-color-foreground);
+display: inline-flex;
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-sm);
+
+gap: var(--helix-space-none);
+line-height: var(--helix-leading-normal);
+max-inline-size: 100%;
+
+min-block-size: var(--helix-size-tag);
+padding-inline: var(--helix-space-xs);
+}
+
+:host {
+--helix-size-control: var(--helix-size-control-sm);
+--helix-size-control-loose: calc(var(--helix-size-control) * 1.2);
+--helix-size-control-tight: calc(var(--helix-size-control) * 0.8);
+--helix-size-icon: var(--helix-size-icon-sm);
+--helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);
+--helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);
+}
+
+[part="field"] {
+color: var(--helix-color-foreground-muted);
+padding-inline-end: var(--helix-space-2xs);
+white-space: nowrap;
+}
+
+[part="operator"] {
+align-items: center;
+color: var(--helix-color-foreground-subtle);
+display: inline-flex;
+padding-inline-end: var(--helix-space-2xs);
+white-space: nowrap;
+}
+
+[part="values"] {
+font-weight: var(--helix-weight-medium);
+min-inline-size: 0;
+overflow: hidden;
+text-overflow: ellipsis;
+white-space: nowrap;
+}
+
+[part="dismiss"] {
+background: none;
+block-size: var(--helix-size-icon);
+border: 0;
+border-radius: var(--helix-radii-sm);
+color: var(--helix-color-foreground-subtle);
+cursor: pointer;
+display: grid;
+inline-size: var(--helix-size-icon);
+margin-inline-start: var(--helix-space-2xs);
+padding: var(--helix-space-none);
+place-items: center;
+}
+
+[part="dismiss-mark"] {
+block-size: var(--icon-size, 0.85em);
+inline-size: var(--icon-size, 0.85em);
+}
+
+[part="dismiss"]:hover {
+background-color: color-mix(in oklab, currentcolor 12%, transparent);
+color: var(--helix-color-foreground);
+}
+
+[part="dismiss"]:focus-visible {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: var(--helix-size-focus-offset);
+}
+
+@media print {
+[part="dismiss"] {
+display: none;
+}
+}`);

package/dist/filter-input/chip/filter-chip.d.ts

@@ -0,0 +1,32 @@
+import { HelixHeadlessFilterChip } from '@fusion.dev/helix-headless/filter-input';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary One filter in force: a field, how it is compared, and to what.
+ *
+ * @description
+ * Three segments and a control, drawn so the reader's eye lands on the values.
+ * The field is the quietest of the three because it is the part they already
+ * know, having picked it; the values carry the weight, because a bar of these is
+ * scanned for what the filters are set to rather than for what they are on.
+ *
+ * The operator segment is drawn only where there is one, which is what keeps the
+ * common chip free of jargon. See the headless note, which records the rule.
+ *
+ * @since 0.23.0
+ * @status experimental
+ * @category forms
+ * @aliases FilterToken, FacetChip
+ * @documentation https://helix.fusion.dev/components/filter-input
+ *
+ * @cssproperty --filter-input-chip-background-color - Fill behind the chip.
+ * @cssproperty --filter-input-chip-border-color - Color of the edge.
+ * @cssproperty --filter-input-chip-radius - Corner radius of the chip.
+ */
+export declare class HelixFilterChip extends HelixHeadlessFilterChip {
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-filter-chip': HelixFilterChip;
+    }
+}

package/dist/filter-input/chip/filter-chip.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 { HelixHeadlessFilterChip } from '@fusion.dev/helix-headless/filter-input';
+import { styles } from './filter-chip.css.js';
+let HelixFilterChip = class HelixFilterChip extends HelixHeadlessFilterChip {
+    static { this.styles = styles; }
+};
+HelixFilterChip = __decorate([
+    customElement('helix-filter-chip')
+], HelixFilterChip);
+export { HelixFilterChip };

package/dist/filter-input/field/filter-field.css.d.ts

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

package/dist/filter-input/field/filter-field.css.js

@@ -0,0 +1,4 @@
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+display: none;
+}`);

package/dist/filter-input/field/filter-field.d.ts

@@ -0,0 +1,29 @@
+import { HelixHeadlessFilterField } from '@fusion.dev/helix-headless/filter-input';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary One thing a set can be filtered by, and how.
+ *
+ * @description
+ * A declaration rather than a control: it renders nothing, and the filter input
+ * reads it to build its menu. The headless note carries the model.
+ *
+ * The stylesheet here is one rule and it is a guard rather than a look. Written
+ * where it belongs, inside a filter input, this is never assigned to a slot and
+ * so is never rendered at all. Written anywhere else it would be an empty inline
+ * box, which is nothing to look at and still a flex item a `gap` would space
+ * away from its neighbors.
+ *
+ * @since 0.23.0
+ * @status experimental
+ * @category forms
+ * @aliases Facet, Dimension
+ * @documentation https://helix.fusion.dev/components/filter-input
+ */
+export declare class HelixFilterField extends HelixHeadlessFilterField {
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-filter-field': HelixFilterField;
+    }
+}

package/dist/filter-input/field/filter-field.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 { HelixHeadlessFilterField } from '@fusion.dev/helix-headless/filter-input';
+import { styles } from './filter-field.css.js';
+let HelixFilterField = class HelixFilterField extends HelixHeadlessFilterField {
+    static { this.styles = styles; }
+};
+HelixFilterField = __decorate([
+    customElement('helix-filter-field')
+], HelixFilterField);
+export { HelixFilterField };

package/dist/filter-input/index.d.ts

@@ -1 +1,5 @@
+export * from './chip/filter-chip.js';
+export * from './field/filter-field.js';
+export * from './menu/filter-menu.js';
+export * from './operator/filter-operator.js';
 export * from './root/filter-input-root.js';

package/dist/filter-input/index.js

@@ -1 +1,5 @@
+export * from './chip/filter-chip.js';
+export * from './field/filter-field.js';
+export * from './menu/filter-menu.js';
+export * from './operator/filter-operator.js';
 export * from './root/filter-input-root.js';

package/dist/filter-input/menu/filter-menu.css.d.ts

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

package/dist/filter-input/menu/filter-menu.css.js

@@ -0,0 +1,4 @@
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+display: contents;
+}`);

package/dist/filter-input/menu/filter-menu.d.ts

@@ -0,0 +1,33 @@
+import { HelixHeadlessFilterMenu } from '@fusion.dev/helix-headless/filter-input';
+import type { CSSResultGroup } from 'lit';
+import '../../divider/index.js';
+import '../../menu/index.js';
+/**
+ * @summary The control that builds a filter: pick a field, tick its values.
+ *
+ * @description
+ * Everything drawn here is drawn by something else: the trigger is the
+ * consumer's, and the pages are `Menu`'s, whose reserved tick column is what
+ * keeps a page of ticked and unticked values on one edge. This element's own
+ * stylesheet is one rule, and it is `display: contents`.
+ *
+ * The headless note carries the model, including why a tick is a filter
+ * immediately and why the operator is decided here rather than on the chip.
+ *
+ * @since 0.25.0
+ * @status experimental
+ * @category forms
+ * @aliases FacetPicker, FilterBuilder
+ * @documentation https://helix.fusion.dev/components/filter-input
+ *
+ * @event {HelixFacetEvent} helix-facet - Fired when a field's values change. Cancelable: refusing it takes the decision and nothing moves.
+ */
+export declare class HelixFilterMenu extends HelixHeadlessFilterMenu {
+    static tier: string;
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-filter-menu': HelixFilterMenu;
+    }
+}

package/dist/filter-input/menu/filter-menu.js

@@ -0,0 +1,19 @@
+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 { HelixHeadlessFilterMenu } from '@fusion.dev/helix-headless/filter-input';
+import { styles } from './filter-menu.css.js';
+import '../../divider/index.js';
+import '../../menu/index.js';
+let HelixFilterMenu = class HelixFilterMenu extends HelixHeadlessFilterMenu {
+    static { this.tier = 'helix-'; }
+    static { this.styles = styles; }
+};
+HelixFilterMenu = __decorate([
+    customElement('helix-filter-menu')
+], HelixFilterMenu);
+export { HelixFilterMenu };

package/dist/filter-input/operator/filter-operator.css.d.ts

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

package/dist/filter-input/operator/filter-operator.css.js

@@ -0,0 +1,4 @@
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+display: none;
+}`);

package/dist/filter-input/operator/filter-operator.d.ts

@@ -0,0 +1,27 @@
+import { HelixHeadlessFilterOperator } from '@fusion.dev/helix-headless/filter-input';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary One way a filter can compare a field to its values.
+ *
+ * @description
+ * A declaration rather than a control: it renders nothing, and the field it is
+ * written under reads it. The headless note carries the model, including why the
+ * words are the consumer's and never this element's.
+ *
+ * The stylesheet is one rule and it is a guard rather than a look, for the
+ * reason `FilterField`'s note gives.
+ *
+ * @since 0.23.0
+ * @status experimental
+ * @category forms
+ * @aliases Comparator, Predicate
+ * @documentation https://helix.fusion.dev/components/filter-input
+ */
+export declare class HelixFilterOperator extends HelixHeadlessFilterOperator {
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-filter-operator': HelixFilterOperator;
+    }
+}

package/dist/filter-input/operator/filter-operator.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 { HelixHeadlessFilterOperator } from '@fusion.dev/helix-headless/filter-input';
+import { styles } from './filter-operator.css.js';
+let HelixFilterOperator = class HelixFilterOperator extends HelixHeadlessFilterOperator {
+    static { this.styles = styles; }
+};
+HelixFilterOperator = __decorate([
+    customElement('helix-filter-operator')
+], HelixFilterOperator);
+export { HelixFilterOperator };

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

@@ -59,6 +59,28 @@ font-weight: var(--helix-weight-medium);
 min-inline-size: 0;
 }
 
+[part="lead"] {
+align-items: center;
+align-self: stretch;
+border-inline-end: var(--helix-border-thin) solid
+var(--filter-input-lead-border-color, var(--helix-color-border));
+display: flex;
+margin-block: calc(var(--helix-space-2xs) * -1);
+margin-inline-start: calc(var(--helix-space-xs) * -1);
+padding-inline: var(--helix-space-2xs) var(--helix-space-xs);
+}
+
+[part="lead"][hidden] {
+display: none;
+}
+
+[part="lead"],
+slot[name="end"] {
+--button-size: var(--filter-input-action-size, var(--helix-size-tag));
+--icon-button-size: var(--filter-input-action-size, var(--helix-size-tag));
+--button-padding-inline: var(--filter-input-action-padding-inline, var(--helix-space-xs));
+}
+
 slot[name="start"]::slotted(*),
 slot[name="end"]::slotted(*) {
 color: var(--helix-color-foreground-subtle);
@@ -66,14 +88,14 @@ flex: 0 0 auto;
 }
 
 [part="clear"] {
---icon-size: var(--helix-size-icon-tight);
+--icon-size: 0.85em;
 all: unset;
 
 align-items: center;
 align-self: center;
 border-radius: var(--helix-radii-sm);
 box-sizing: border-box;
-color: var(--helix-color-foreground-muted);
+color: var(--helix-color-foreground-subtle);
 cursor: pointer;
 display: flex;
 flex: 0 0 auto;
@@ -84,6 +106,7 @@ transition: color var(--helix-duration-fast) var(--helix-easing-standard);
 }
 
 [part="clear"]:hover {
+background-color: color-mix(in oklab, currentcolor 12%, transparent);
 color: var(--helix-color-foreground);
 }
 

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

@@ -31,10 +31,13 @@ import '../../option/index.js';
  * @aliases SearchField, FacetInput, TokenInput
  * @documentation https://helix.fusion.dev/components/filter-input
  *
+ * @cssproperty --filter-input-action-padding-inline - Space either side of a slotted control's label. Follows `--helix-space-xs`, which is what a token uses.
+ * @cssproperty --filter-input-action-size - Height of a control slotted at either end. Follows `--helix-size-tag`, so it matches the tokens beside it rather than the field around them.
  * @cssproperty --filter-input-background-color - Fill behind the field.
  * @cssproperty --filter-input-border-color - Color of the suggestion panel's edge.
  * @cssproperty --filter-input-border-width - Width of that edge. Follows `--helix-border-floating`.
  * @cssproperty --filter-input-control-size - Smallest the text keeps as tokens fill the line, before it wraps to its own.
+ * @cssproperty --filter-input-lead-border-color - The seam between the leading box and the text.
  * @cssproperty --filter-input-panel-size - Width of the suggestion panel. Follows the field by default.
  * @cssproperty --filter-input-shadow - Lift under the panel. Follows `--helix-shadow-floating`: a
  *   floating surface sits over content nobody can predict, so it keeps a lift by default.

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

@@ -1,5 +1,6 @@
 import { HelixHeadlessHeatmap } from '@fusion.dev/helix-headless/heatmap';
 import type { CSSResultGroup } from 'lit';
+import '../../tooltip/index.js';
 /**
  * @summary A strip of cells colored by how each one went: uptime, contributions, activity.
  *

package/dist/heatmap/root/heatmap-root.js

@@ -7,6 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessHeatmap } from '@fusion.dev/helix-headless/heatmap';
 import { styles } from './heatmap-root.css.js';
+import '../../tooltip/index.js';
 let HelixHeatmap = class HelixHeatmap extends HelixHeadlessHeatmap {
     constructor() {
         super(...arguments);

package/dist/index.d.ts

@@ -8,6 +8,7 @@ export * from '@fusion.dev/helix-core';
 export * from './accordion/index.js';
 export * from './announcement/index.js';
 export * from './app-header/index.js';
+export * from './area-chart/index.js';
 export * from './aura/index.js';
 export * from './avatar/index.js';
 export * from './badge/index.js';
@@ -32,6 +33,7 @@ export * from './copy-button/index.js';
 export * from './data-table/index.js';
 export * from './date-input/index.js';
 export * from './date-picker/index.js';
+export * from './description-list/index.js';
 export * from './dialog/index.js';
 export * from './divider/index.js';
 export * from './donut-chart/index.js';
@@ -60,6 +62,7 @@ export * from './meter/index.js';
 export * from './navigation/index.js';
 export * from './notifications/index.js';
 export * from './number-input/index.js';
+export * from './object-inspector/index.js';
 export * from './option/index.js';
 export * from './orb/index.js';
 export * from './outline/index.js';
@@ -72,9 +75,11 @@ export * from './quote/index.js';
 export * from './radio/index.js';
 export * from './rating/index.js';
 export * from './sandbox/index.js';
+export * from './scatter-chart/index.js';
 export * from './scroll-area/index.js';
 export * from './select/index.js';
 export * from './skeleton/index.js';
+export * from './skip-link/index.js';
 export * from './slider/index.js';
 export * from './sparkline/index.js';
 export * from './speed-dial/index.js';

package/dist/index.js

@@ -3,6 +3,7 @@ export * from '@fusion.dev/helix-core';
 export * from './accordion/index.js';
 export * from './announcement/index.js';
 export * from './app-header/index.js';
+export * from './area-chart/index.js';
 export * from './aura/index.js';
 export * from './avatar/index.js';
 export * from './badge/index.js';
@@ -27,6 +28,7 @@ export * from './copy-button/index.js';
 export * from './data-table/index.js';
 export * from './date-input/index.js';
 export * from './date-picker/index.js';
+export * from './description-list/index.js';
 export * from './dialog/index.js';
 export * from './divider/index.js';
 export * from './donut-chart/index.js';
@@ -55,6 +57,7 @@ export * from './meter/index.js';
 export * from './navigation/index.js';
 export * from './notifications/index.js';
 export * from './number-input/index.js';
+export * from './object-inspector/index.js';
 export * from './option/index.js';
 export * from './orb/index.js';
 export * from './outline/index.js';
@@ -67,9 +70,11 @@ export * from './quote/index.js';
 export * from './radio/index.js';
 export * from './rating/index.js';
 export * from './sandbox/index.js';
+export * from './scatter-chart/index.js';
 export * from './scroll-area/index.js';
 export * from './select/index.js';
 export * from './skeleton/index.js';
+export * from './skip-link/index.js';
 export * from './slider/index.js';
 export * from './sparkline/index.js';
 export * from './speed-dial/index.js';

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

@@ -69,144 +69,6 @@ mask-image: var(--_line-chart-holes);
 fill: var(--chart-series);
 }
 
-[part="mark"] {
-block-size: 1px;
-inline-size: 1px;
-pointer-events: none;
-position: absolute;
-}
-
-[part="tooltip-anchor"] {
-inset: 0;
-pointer-events: none;
-position: absolute;
-}
-
-[part="tooltip-label"] {
-color: var(--helix-color-foreground-muted);
-display: block;
-font-weight: var(--helix-weight-medium);
-}
-
-[part="tooltip-cell"] {
-align-items: baseline;
-display: flex;
-gap: var(--helix-space-sm);
-justify-content: space-between;
-}
-
-[part="tooltip-name"] {
-color: var(--helix-color-foreground-muted);
-}
-
-[part="tooltip-value"] {
-font-variant-numeric: tabular-nums;
-font-weight: var(--helix-weight-medium);
-}
-
-[part="tooltip-cell"][data-series]::before {
-block-size: 0.5em;
-border-radius: var(--helix-radii-full);
-content: "";
-inline-size: 0.5em;
-}
-
-[part="tooltip-cell"][data-series="1"]::before {
-background-color: var(--helix-color-series-1);
-}
-
-[part="tooltip-cell"][data-series="2"]::before {
-background-color: var(--helix-color-series-2);
-}
-
-[part="tooltip-cell"][data-series="3"]::before {
-background-color: var(--helix-color-series-3);
-}
-
-[part="tooltip-cell"][data-series="4"]::before {
-background-color: var(--helix-color-series-4);
-}
-
-[part="tooltip-cell"][data-series="5"]::before {
-background-color: var(--helix-color-series-5);
-}
-
-[part="tooltip-cell"][data-series="6"]::before {
-background-color: var(--helix-color-series-6);
-}
-
-[part="tooltip-cell"][data-series="7"]::before {
-background-color: var(--helix-color-series-7);
-}
-
-[part="tooltip-cell"][data-series="8"]::before {
-background-color: var(--helix-color-series-8);
-}
-
-[part="tooltip-cell"][data-series="9"]::before {
-background-color: var(--helix-color-series-9);
-}
-
-[part="tooltip-cell"][data-series="10"]::before {
-background-color: var(--helix-color-series-10);
-}
-
-[part="tooltip-cell"][data-series="11"]::before {
-background-color: var(--helix-color-series-11);
-}
-
-[part="tooltip-cell"][data-series="12"]::before {
-background-color: var(--helix-color-series-12);
-}
-
-[part="tooltip-cell"][data-series="13"]::before {
-background-color: var(--helix-color-series-13);
-}
-
-[part="tooltip-cell"][data-series="14"]::before {
-background-color: var(--helix-color-series-14);
-}
-
-[part="tooltip-cell"][data-series="15"]::before {
-background-color: var(--helix-color-series-15);
-}
-
-[part="tooltip-cell"][data-series="16"]::before {
-background-color: var(--helix-color-series-16);
-}
-
-[part="tooltip-cell"][data-series="17"]::before {
-background-color: var(--helix-color-series-17);
-}
-
-[part="tooltip-cell"][data-series="18"]::before {
-background-color: var(--helix-color-series-18);
-}
-
-[part="tooltip-cell"][data-series="19"]::before {
-background-color: var(--helix-color-series-19);
-}
-
-[part="tooltip-cell"][data-series="20"]::before {
-background-color: var(--helix-color-series-20);
-}
-
-[part="tooltip-cell"][data-series="21"]::before {
-background-color: var(--helix-color-series-21);
-}
-
-[part="tooltip-cell"][data-series="22"]::before {
-background-color: var(--helix-color-series-22);
-}
-
-[part="tooltip-cell"][data-series="23"]::before {
-background-color: var(--helix-color-series-23);
-}
-
-[part="tooltip-cell"][data-series="24"]::before {
-background-color: var(--helix-color-series-24);
-}
-
 [part="guide"] {
 stroke: var(--helix-color-foreground-muted);
 stroke-dasharray: 3 3;

package/dist/line-chart/root/line-chart-root.js

@@ -9,11 +9,12 @@ import { HelixHeadlessLineChart } from '@fusion.dev/helix-headless/line-chart';
 import { property } from 'lit/decorators.js';
 import { styles as seriesStyles } from '../../shared/chart/series.css.js';
 import { styles as terminusStyles } from '../../shared/chart/terminus.css.js';
+import { styles as tooltipStyles } from '../../shared/chart/tooltip.css.js';
 import { styles } from './line-chart-root.css.js';
 import '../../tooltip/index.js';
 let HelixLineChart = class HelixLineChart extends HelixHeadlessLineChart {
     static { this.tier = 'helix-'; }
-    static { this.styles = [seriesStyles, terminusStyles, styles]; }
+    static { this.styles = [seriesStyles, tooltipStyles, terminusStyles, styles]; }
 };
 __decorate([
     property({ reflect: true })