@fusion.dev/helix 0.0.0-dev

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

@@ -0,0 +1,335 @@
+// Generated from src/slider/root/slider-root.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+display: flex;
+flex-direction: column;
+gap: var(--helix-space-2xs);
+
+--_slider-track: var(--slider-track-size, var(--helix-size-progress));
+
+--_slider-thumb: var(--slider-thumb-size, var(--helix-size-checkbox));
+--_slider-thumb-length: var(--slider-thumb-length, var(--_slider-thumb));
+--_slider-thumb-radii: var(--slider-thumb-radius, var(--helix-radii-full));
+
+--_slider-halo: color-mix(
+in oklab,
+var(--slider-fill-color, var(--helix-color-primary)) 24%,
+transparent
+);
+
+--_slider-track-color: var(--slider-track-color, var(--helix-color-border));
+}
+
+[part="field"] {
+align-items: center;
+display: flex;
+gap: var(--helix-space-sm);
+}
+
+[part="field"][data-markers] {
+display: grid;
+grid-template-columns: 1fr auto;
+}
+
+[part="control"] {
+
+z-index: var(--helix-layer-raised);
+
+appearance: none;
+background: transparent;
+cursor: pointer;
+flex: 1 1 auto;
+min-inline-size: 0;
+}
+
+[part="field"][data-markers] [part="control"],
+[part="field"][data-markers] [part="markers"] {
+grid-column: 1;
+grid-row: 1;
+}
+
+[part="output"] {
+color: var(--helix-color-foreground);
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-sm);
+font-variant-numeric: tabular-nums;
+
+min-inline-size: var(--_slider-output-reserve, 3ch);
+text-align: end;
+}
+
+[part="field"][data-markers] [part="output"] {
+grid-column: 2;
+grid-row: 1;
+}
+
+[part="control"] {
+--_slider-track-image: var(
+--slider-track-image,
+linear-gradient(
+to right,
+var(--slider-fill-color, var(--helix-color-primary)) calc(var(--slider-fraction, 0) * 100%),
+var(--_slider-track-color) calc(var(--slider-fraction, 0) * 100%)
+)
+);
+}
+
+[part="markers"] {
+align-self: center;
+block-size: var(--_slider-track);
+margin-inline: calc(var(--_slider-thumb-length) / 2);
+pointer-events: none;
+position: relative;
+z-index: var(--helix-layer-raised);
+}
+
+:host([marker-labels]) [part="field"] {
+padding-block-end: var(--helix-space-lg);
+}
+
+[part="marker-label"] {
+color: var(--helix-color-foreground-subtle);
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-xs);
+font-variant-numeric: tabular-nums;
+inset-block-start: var(--helix-space-sm);
+inset-inline-start: 50%;
+position: absolute;
+translate: -50% 0;
+}
+
+[part="markers"] {
+--_slider-hole: calc(var(--_slider-thumb-length) / 2 + var(--helix-border-thin));
+
+mask-image: radial-gradient(
+circle at calc(var(--slider-fraction, 0) * 100%) 50%,
+transparent var(--_slider-hole),
+currentColor var(--_slider-hole)
+);
+pointer-events: none;
+z-index: var(--helix-layer-raised);
+}
+
+[part="field"][data-range] [part="markers"] {
+mask-composite: intersect;
+mask-image:
+radial-gradient(
+circle at calc(var(--slider-from, 0) * 100%) 50%,
+transparent var(--_slider-hole),
+currentColor var(--_slider-hole)
+),
+radial-gradient(
+circle at calc(var(--slider-to, 0) * 100%) 50%,
+transparent var(--_slider-hole),
+currentColor var(--_slider-hole)
+);
+}
+
+:host([orientation="vertical"]) [part="markers"] {
+mask-image: radial-gradient(
+circle at 50% calc(100% - var(--slider-fraction, 0) * 100%),
+transparent var(--_slider-hole),
+currentColor var(--_slider-hole)
+);
+}
+
+[part="marker"] {
+background-color: var(--slider-marker-color, var(--helix-color-background));
+block-size: var(--_slider-track);
+border-radius: var(--helix-radii-full);
+inline-size: var(--helix-border-thick);
+inset-block-start: 0;
+
+inset-inline-start: var(--slider-marker-at, 0%);
+position: absolute;
+translate: -50% 0;
+}
+
+:host(:disabled) [part="control"] {
+cursor: not-allowed;
+}
+
+:host(:disabled) {
+opacity: 0.5;
+}
+
+[part="control"]::-webkit-slider-runnable-track {
+background: var(--_slider-track-image);
+block-size: var(--_slider-track);
+border-radius: var(--helix-radii-full);
+}
+
+[part="control"]::-moz-range-track {
+background: var(--_slider-track-image);
+block-size: var(--_slider-track);
+border-radius: var(--helix-radii-full);
+}
+
+[part="control"]::-webkit-slider-thumb {
+appearance: none;
+
+background-color: var(--slider-thumb-color, var(--helix-color-surface-inverse));
+block-size: var(--_slider-thumb);
+border: none;
+border-radius: var(--_slider-thumb-radii);
+
+box-shadow:
+0 0 0 var(--helix-border-thick) var(--slider-thumb-ring-color, var(--helix-color-background)),
+var(--helix-shadow-md);
+inline-size: var(--_slider-thumb-length);
+margin-block-start: calc((var(--_slider-track) - var(--_slider-thumb)) / 2);
+}
+
+[part="control"]:focus-visible::-webkit-slider-thumb,
+[part="control"]:active::-webkit-slider-thumb {
+box-shadow:
+0 0 0 var(--helix-border-thick) var(--slider-thumb-ring-color, var(--helix-color-background)),
+var(--helix-shadow-md),
+0 0 0 var(--helix-space-2xs) var(--_slider-halo);
+}
+
+[part="control"]:focus-visible::-moz-range-thumb,
+[part="control"]:active::-moz-range-thumb {
+box-shadow:
+0 0 0 var(--helix-border-thick) var(--slider-thumb-ring-color, var(--helix-color-background)),
+var(--helix-shadow-md),
+0 0 0 var(--helix-space-2xs) var(--_slider-halo);
+}
+
+[part="control"]::-moz-range-thumb {
+background-color: var(--slider-thumb-color, var(--helix-color-surface-inverse));
+block-size: var(--_slider-thumb);
+
+border: none;
+border-radius: var(--_slider-thumb-radii);
+
+box-shadow:
+0 0 0 var(--helix-border-thick) var(--slider-thumb-ring-color, var(--helix-color-background)),
+var(--helix-shadow-md);
+inline-size: var(--_slider-thumb-length);
+}
+
+[part="control"]:focus-visible {
+outline: none;
+}
+
+[part="control"]:focus-visible::-webkit-slider-thumb {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: var(--helix-size-focus-offset);
+}
+
+[part="control"]:focus-visible::-moz-range-thumb {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: var(--helix-size-focus-offset);
+}
+
+:host(:state(invalid)) [part="control"]::-webkit-slider-thumb {
+box-shadow: 0 0 0 var(--helix-size-focus-ring) var(--helix-color-danger);
+}
+
+:host(:state(invalid)) [part="control"]::-moz-range-thumb {
+box-shadow: 0 0 0 var(--helix-size-focus-ring) var(--helix-color-danger);
+}
+
+:host([range]) [part="field"] {
+display: grid;
+grid-template-columns: 1fr auto;
+}
+
+:host([range]) [part="control"] {
+grid-area: 1 / 1;
+}
+
+:host([range]) [part="output"] {
+grid-column: 2;
+grid-row: 1;
+}
+
+:host([range]) [part="control"][data-thumb="start"] {
+--_slider-track-image: var(
+--slider-track-image,
+linear-gradient(
+to right,
+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%),
+var(--_slider-track-color) calc(var(--slider-to, 1) * 100%)
+)
+);
+}
+
+:host([range]) [part="control"][data-thumb="end"]::-webkit-slider-runnable-track {
+background: transparent;
+}
+
+:host([range]) [part="control"][data-thumb="end"]::-moz-range-track {
+background: transparent;
+}
+
+:host([range]) [part="control"] {
+pointer-events: none;
+}
+
+:host([range]) [part="control"]::-webkit-slider-thumb {
+pointer-events: auto;
+}
+
+:host([range]) [part="control"]::-moz-range-thumb {
+pointer-events: auto;
+}
+
+:host([orientation="vertical"]) [part="field"] {
+flex-direction: column;
+}
+
+:host([orientation="vertical"]) [part="field"][data-markers] {
+grid-template-columns: none;
+grid-template-rows: 1fr auto;
+}
+
+:host([orientation="vertical"]) [part="control"] {
+direction: rtl;
+inline-size: var(--slider-length, 9rem);
+margin-block: calc(var(--_slider-thumb-length) / 2);
+margin-inline: 0;
+writing-mode: vertical-lr;
+
+--_slider-track-image: var(
+--slider-track-image,
+linear-gradient(
+to top,
+var(--slider-fill-color, var(--helix-color-primary)) calc(var(--slider-fraction, 0) * 100%),
+var(--_slider-track-color) calc(var(--slider-fraction, 0) * 100%)
+)
+);
+}
+
+:host([orientation="vertical"]) [part="marker"] {
+block-size: var(--helix-border-thick);
+inline-size: var(--_slider-track);
+inset-block-end: var(--slider-marker-at, 0%);
+inset-block-start: auto;
+inset-inline-start: 0;
+translate: 0 50%;
+}
+
+:host([orientation="vertical"]) [part="field"][data-markers] [part="output"] {
+grid-column: 1;
+grid-row: 2;
+}
+
+:host([orientation="vertical"]) [part="markers"] {
+align-self: stretch;
+block-size: auto;
+inline-size: var(--_slider-track);
+justify-self: center;
+margin-block: calc(var(--_slider-thumb) / 2);
+margin-inline: 0;
+}
+
+@media print {
+:host {
+box-shadow: none;
+print-color-adjust: exact;
+}
+}`);

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

@@ -0,0 +1,42 @@
+import { HelixHeadlessSlider } from '@fusion.dev/helix-headless/slider';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary A value chosen from a range by dragging.
+ *
+ * @description
+ * The track and the thumb are the browser's own, restyled through the range
+ * pseudo-elements rather than replaced. What that buys is everything a
+ * hand-built slider has to reimplement and usually gets slightly wrong: the
+ * drag, the keys, and a hit area sized by the platform for a finger.
+ *
+ * The filled part of the track is painted with a gradient driven by the
+ * fraction the headless tier writes, rather than by a second element laid over
+ * it. One element cannot be half one color by any other means that survives
+ * the thumb being dragged.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category forms
+ * @aliases Range, Range input
+ * @documentation https://helix.fusion.dev/components/slider
+ *
+ * @cssproperty --slider-fill-color - The part behind the thumb.
+ * @cssproperty --slider-length - How long a vertical track is. Nine rem by default, and read only when `orientation` is `vertical`, a horizontal track taking the width of its row.
+ * @cssproperty --slider-marker-color - The ticks along the track.
+ * @cssproperty --slider-thumb-color - The handle.
+ * @cssproperty --slider-thumb-length - The handle along the track. Follows the size unless it is told otherwise, and setting one of the two is what makes the handle an oval.
+ * @cssproperty --slider-thumb-radius - The handle's corners. Fully round by default, so a handle given two dimensions is a capsule until this says otherwise.
+ * @cssproperty --slider-thumb-ring-color - The fence separating the handle from the track, for a slider that is not on the page.
+ * @cssproperty --slider-thumb-size - The handle across the track. Square with the length by default, which is what makes it round.
+ * @cssproperty --slider-track-color - The part not yet chosen.
+ * @cssproperty --slider-track-image - The whole track, for a slider whose color is the value.
+ * @cssproperty --slider-track-size - How thick the track is. The progress bar's own size by default, the two being the same object.
+ */
+export declare class HelixSlider extends HelixHeadlessSlider {
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-slider': HelixSlider;
+    }
+}

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

@@ -0,0 +1,50 @@
+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 { HelixHeadlessSlider } from '@fusion.dev/helix-headless/slider';
+import { styles as fieldStyles } from '../../shared/field/field.css.js';
+import { styles as fieldStackedStyles } from '../../shared/field/field-stacked.css.js';
+import { styles } from './slider-root.css.js';
+/**
+ * @summary A value chosen from a range by dragging.
+ *
+ * @description
+ * The track and the thumb are the browser's own, restyled through the range
+ * pseudo-elements rather than replaced. What that buys is everything a
+ * hand-built slider has to reimplement and usually gets slightly wrong: the
+ * drag, the keys, and a hit area sized by the platform for a finger.
+ *
+ * The filled part of the track is painted with a gradient driven by the
+ * fraction the headless tier writes, rather than by a second element laid over
+ * it. One element cannot be half one color by any other means that survives
+ * the thumb being dragged.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category forms
+ * @aliases Range, Range input
+ * @documentation https://helix.fusion.dev/components/slider
+ *
+ * @cssproperty --slider-fill-color - The part behind the thumb.
+ * @cssproperty --slider-length - How long a vertical track is. Nine rem by default, and read only when `orientation` is `vertical`, a horizontal track taking the width of its row.
+ * @cssproperty --slider-marker-color - The ticks along the track.
+ * @cssproperty --slider-thumb-color - The handle.
+ * @cssproperty --slider-thumb-length - The handle along the track. Follows the size unless it is told otherwise, and setting one of the two is what makes the handle an oval.
+ * @cssproperty --slider-thumb-radius - The handle's corners. Fully round by default, so a handle given two dimensions is a capsule until this says otherwise.
+ * @cssproperty --slider-thumb-ring-color - The fence separating the handle from the track, for a slider that is not on the page.
+ * @cssproperty --slider-thumb-size - The handle across the track. Square with the length by default, which is what makes it round.
+ * @cssproperty --slider-track-color - The part not yet chosen.
+ * @cssproperty --slider-track-image - The whole track, for a slider whose color is the value.
+ * @cssproperty --slider-track-size - How thick the track is. The progress bar's own size by default, the two being the same object.
+ */
+let HelixSlider = class HelixSlider extends HelixHeadlessSlider {
+    static { this.styles = [fieldStyles, fieldStackedStyles, styles]; }
+};
+HelixSlider = __decorate([
+    customElement('helix-slider')
+], HelixSlider);
+export { HelixSlider };

package/dist/sparkline/index.d.ts

@@ -0,0 +1 @@
+export * from './root/sparkline-root.js';

package/dist/sparkline/index.js

@@ -0,0 +1 @@
+export * from './root/sparkline-root.js';

package/dist/sparkline/root/sparkline-root.css.d.ts

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

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

@@ -0,0 +1,103 @@
+// Generated from src/sparkline/root/sparkline-root.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+block-size: var(--sparkline-block-size, 2.5em);
+
+color: var(--_sparkline-ink);
+
+--_sparkline-ink: var(--sparkline-color, var(--helix-color-series-1));
+
+position: relative;
+
+display: inline-block;
+inline-size: var(--sparkline-inline-size, 7em);
+vertical-align: middle;
+}
+
+[part="svg"] {
+block-size: 100%;
+inline-size: 100%;
+
+overflow: visible;
+}
+
+[part="line"] {
+fill: none;
+stroke: currentColor;
+stroke-linecap: round;
+stroke-linejoin: round;
+
+stroke-width: var(--sparkline-width, var(--_sparkline-weight, 0.11em));
+
+vector-effect: non-scaling-stroke;
+}
+
+[part="area"] {
+fill: none;
+}
+
+[part="wash-start"],
+[part="wash-end"] {
+stop-color: currentColor;
+stop-opacity: 0;
+}
+
+:host(:not([plot="bar"]):not([plot="line"])) [part="area"] {
+fill: url("#sparkline-wash");
+}
+
+:host(:not([plot="bar"]):not([plot="line"])) [part="wash-start"] {
+
+stop-opacity: calc(var(--sparkline-area-opacity, 0.45) * var(--helix-material-opacity));
+}
+
+:host(:not([plot="bar"]):not([plot="line"])) [part="wash-end"] {
+stop-opacity: calc(var(--sparkline-area-opacity, 0.45) / 9 * var(--helix-material-opacity));
+}
+
+:host([weight="thin"]) {
+--_sparkline-weight: 0.07em;
+}
+
+:host([weight="thick"]) {
+--_sparkline-weight: 0.18em;
+}
+
+[part="bar"] {
+fill: currentColor;
+rx: var(--sparkline-bar-radius, 0.5);
+}
+
+:host([terminus="ring"]) [part="svg"] {
+mask-image: radial-gradient(
+circle at var(--chart-terminus-x) var(--chart-terminus-y),
+#0000 calc(var(--_chart-terminus-inner) - 0.5px),
+#000 var(--_chart-terminus-inner)
+);
+}
+
+@media print {
+:host {
+box-shadow: none;
+print-color-adjust: exact;
+}
+}
+
+:host([emphasis="subtle"]) {
+color: color-mix(in oklab, var(--_sparkline-ink) 40%, var(--helix-color-background));
+}
+
+:host([emphasis="outlined"]) [part="bar"] {
+fill: color-mix(in oklab, var(--_sparkline-ink) 55%, var(--helix-color-background));
+stroke: var(--_sparkline-ink);
+stroke-width: var(--sparkline-bar-stroke, 1);
+vector-effect: non-scaling-stroke;
+}
+
+:host([emphasis="outlined"]) [part="area"] {
+opacity: var(--sparkline-area-opacity, 0.35);
+}
+
+:host([emphasis="solid"]) [part="area"] {
+opacity: 1;
+}`);

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

@@ -0,0 +1,114 @@
+import { HelixHeadlessSparkline } from '@fusion.dev/helix-headless/sparkline';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary A line with no axes, for the shape of a series beside the number it belongs to.
+ *
+ * @description
+ * Sized in `em` by default, so a sparkline set beside a figure is a figure-sized
+ * thing and one set in a table row is a row-sized thing. The type scale is
+ * absolute and cannot say "a little wider than this".
+ *
+ * The stroke does not scale with the box. `preserveAspectRatio="none"` is what
+ * lets one drawing fill a 60px slot and a 600px one, and without
+ * `vector-effect: non-scaling-stroke` the same line comes out hairline in the
+ * first and heavy in the second.
+ *
+ * One color on the host, read by the line, the wash, the columns and the mark
+ * alike, so moving `--sparkline-color` cannot leave parts of one drawing
+ * disagreeing.
+ *
+ * The line's weight is set in `em` rather than pixels, so it grows with the
+ * drawing the way the drawing grows with its type. A fixed 1.5px was the first
+ * version and left a 200 pixel sparkline wearing a hairline: `vector-effect`
+ * keeps a stroke out of the view box's stretch, which is the point, and it also
+ * keeps it out of every other reason it might want to be bigger.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category charts
+ * @groups charts
+ * @aliases Micro Chart, Trend Line, Inline Chart
+ * @documentation https://helix.fusion.dev/components/sparkline
+ *
+ * @cssproperty --chart-terminus-hole - A fill for the middle of a `ring` terminus, which is otherwise open.
+ * @cssproperty --chart-terminus-size - Size of the mark on the last reading.
+ * @cssproperty --sparkline-area-opacity - How much of the line's color the wash takes where it meets the line.
+ * @cssproperty --sparkline-bar-radius - Corner radius on a column, under `plot="bar"`.
+ * @cssproperty --sparkline-bar-stroke - Thickness of a column's edge under `outlined`.
+ * @cssproperty --sparkline-block-size - Height of the drawing.
+ * @cssproperty --sparkline-color - Color of the line, the wash, the columns and the mark.
+ * @cssproperty --sparkline-inline-size - Width of the drawing.
+ * @cssproperty --sparkline-width - Thickness of the line, overriding `weight`.
+ */
+export declare class HelixSparkline extends HelixHeadlessSparkline {
+    /**
+     * How much ink the drawing claims.
+     *
+     * `subtle` mixes the drawing toward the page. The case is a table where one row
+     * is being read and the rest are context.
+     *
+     * It moves the host's `color`, which is what every mark here is drawn in: the
+     * line strokes it, both gradient stops take it so the wash is the line's own
+     * color, and the terminus fills it. So one declaration quietens all of them,
+     * and a consumer's `--sparkline-color` is quietened rather than replaced.
+     *
+     * **The other two follow whichever plot is drawn**, because a sparkline is
+     * three marks behind one property and the difference between a boundary and a
+     * fill does not exist until you know which. A `bar` plot answers like
+     * `BarChart`, an `area` or `line` plot like `LineChart`. `solid` on bars is the
+     * resting column and selects nothing.
+     *
+     * **`outlined` was refused here until 25 Aug 2026**, on the grounds that it
+     * needs a fill to remove and this is a stroke. That is true of the line and not
+     * of the other two plots, which is what the argument missed: a bar has an area
+     * and an area plot is one.
+     *
+     * `ghost` is still an empty cell, and there is still no `material`. Glass
+     * exists so what is behind a mark reads through it, and at the size a sparkline
+     * draws there is nothing behind it a reader could resolve.
+     */
+    emphasis?: 'outlined' | 'solid' | 'subtle';
+    static styles: CSSResultGroup;
+    /**
+     * How heavy the line is drawn.
+     *
+     * Absent is the weight a sparkline is usually drawn at. `thin` suits one set
+     * in a table row among many; `thick` suits one standing on its own, where a
+     * hairline reads as an accident.
+     *
+     * Three steps rather than a number, because `--sparkline-width` is already
+     * the number and an attribute earns its place by being the thing a consumer
+     * reaches for without reading the stylesheet. The hook stays for anything the
+     * three do not cover.
+     */
+    weight?: 'thick' | 'thin';
+    /**
+     * The shape of the mark on the last reading.
+     *
+     * Absent is a dot, which is how a line is usually ended, and absent rather
+     * than defaulted because a reflecting property with a default writes its
+     * attribute onto a host the consumer rendered, which React reports as a
+     * hydration mismatch.
+     *
+     * `none` lets the line stop on its own, which suits a series read as a shape
+     * rather than for where it finished. `ring` lets the ground through, for a
+     * chart drawn over something busy. `triangle` points along the axis and reads
+     * as "and onward" rather than as a second claim about the data.
+     *
+     * A `bar` plot draws none of them: the last column already is the last
+     * reading, and a mark on top of it would say the same thing twice.
+     *
+     * The shapes come from `helix/styled/src/shared/chart/terminus.css`, shared with
+     * `LineChart`, so the set is the same wherever a line ends. `ring` is the
+     * one that asks anything of the drawing: the disc it leaves open is masked out
+     * of the `<svg>`, so the line stops at the ring's inner edge rather than
+     * running on to the reading at its center, and the middle shows whatever the
+     * chart is drawn over rather than a guess at it.
+     */
+    terminus?: 'none' | 'ring' | 'square' | 'triangle';
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-sparkline': HelixSparkline;
+    }
+}