@fusion.dev/helix 0.0.0-dev

package/dist/kbd/root/kbd-root.js

@@ -0,0 +1,36 @@
+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 { HelixHeadlessKbd } from '@fusion.dev/helix-headless/kbd';
+import { styles } from './kbd-root.css.js';
+/**
+ * @summary A keyboard key or chord, set inline with text.
+ *
+ * @description
+ * Drawn as a physical key: a hairline, a sunken fill, and one inset shadow
+ * along the bottom edge that reads as depth without becoming a picture of a
+ * key.
+ *
+ * Sized in `em`, so it stays proportional to whatever it is set inside rather
+ * than holding one size and looking wrong in a heading.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category typography
+ * @aliases Key, Shortcut, Hotkey
+ * @documentation https://helix.fusion.dev/components/kbd
+ *
+ * @cssproperty --kbd-background-color - Fill of the key.
+ * @cssproperty --kbd-border-color - Color of the hairline and the edge.
+ */
+let HelixKbd = class HelixKbd extends HelixHeadlessKbd {
+    static { this.styles = styles; }
+};
+HelixKbd = __decorate([
+    customElement('helix-kbd')
+], HelixKbd);
+export { HelixKbd };

package/dist/legend/index.d.ts

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

package/dist/legend/index.js

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

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

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

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

@@ -0,0 +1,90 @@
+// Generated from src/legend/root/legend-root.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+display: block;
+}
+
+[part="list"] {
+display: flex;
+flex-direction: var(--legend-direction, row);
+
+flex-wrap: wrap;
+gap: var(--legend-gap, var(--helix-space-sm));
+list-style: none;
+margin: var(--helix-space-none);
+padding: var(--helix-space-none);
+}
+
+[part="entry"] {
+align-items: center;
+color: var(--helix-color-foreground-muted);
+display: flex;
+font-size: var(--helix-text-sm);
+gap: var(--helix-space-2xs);
+line-height: var(--helix-leading-tight);
+}
+
+:host([placement="start"]) [part="list"],
+:host([placement="end"]) [part="list"] {
+flex-direction: column;
+}
+
+:host([placement="end"]) [part="entry"] {
+flex-direction: row-reverse;
+text-align: end;
+}
+
+[part="swatch"] {
+block-size: var(--legend-swatch-size, var(--helix-space-sm));
+
+border-radius: var(--helix-radii-sm);
+flex: 0 0 auto;
+inline-size: var(--legend-swatch-size, var(--helix-space-sm));
+}
+
+[part="entry"] [part="swatch"] {
+background-color: color-mix(
+in oklab,
+var(--chart-series) calc(var(--_legend-area, 1) * var(--_legend-through, 1) * 100%),
+transparent
+);
+}
+
+[part="entry"][data-emphasis="outlined"] [part="swatch"],
+:host([emphasis="outlined"]) [part="entry"]:not([data-emphasis]) [part="swatch"] {
+background-color: color-mix(
+in oklab,
+var(--_legend-shade) calc(var(--_legend-through, 1) * 100%),
+transparent
+);
+border: var(--legend-swatch-stroke, var(--helix-border-thick)) solid
+color-mix(in oklab, var(--chart-series) calc(var(--_legend-through, 1) * 100%), transparent);
+}
+
+[part="entry"][data-emphasis="subtle"] [part="swatch"],
+:host([emphasis="subtle"]) [part="entry"]:not([data-emphasis]) [part="swatch"] {
+border: var(--legend-swatch-stroke, var(--helix-border-thick)) solid
+color-mix(in oklab, var(--chart-series) calc(var(--_legend-through, 1) * 100%), transparent);
+
+--_legend-area: 0.2;
+}
+
+[part="swatch"] {
+--_legend-shade: color-mix(in oklab, var(--chart-series) 60%, var(--helix-color-background));
+}
+
+[part="entry"][data-material="glass"] [part="swatch"],
+:host([material="glass"]) [part="entry"]:not([data-material]) [part="swatch"] {
+--_legend-through: calc(0.62 * var(--helix-material-opacity));
+}
+
+[part="entry"][data-material="frosted"],
+:host([material="frosted"]) [part="entry"]:not([data-material]) [part="swatch"] {
+--_legend-through: calc(0.88 * var(--helix-material-opacity));
+}
+
+@media print {
+:host {
+box-shadow: none;
+}
+}`);

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

@@ -0,0 +1,128 @@
+import { HelixHeadlessLegend } from '@fusion.dev/helix-headless/legend';
+import type { CSSResultGroup, PropertyValues } from 'lit';
+/**
+ * @summary The names a chart draws, each beside the color it is drawn in.
+ *
+ * @description
+ * A row that wraps, because a legend sits under a chart as wide as the chart
+ * and there is no arrangement of eight names that fits every width. Set
+ * `--legend-direction` to `column` where it sits beside one instead.
+ *
+ * The eight series colours are mapped here rather than in the tier below, which
+ * carries the index and holds no tokens. Written as eight rules for the reason
+ * `Avatar.Group` writes twelve: an index in markup cannot select a token, and a
+ * custom property set inline would be the headless tier naming a color.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category charts
+ * @groups charts
+ * @aliases Key, Series Key
+ * @documentation https://helix.fusion.dev/components/legend
+ *
+ * @cssproperty --legend-direction - `row`, which wraps, or `column`.
+ * @cssproperty --legend-gap - Space between entries.
+ * @cssproperty --legend-swatch-size - Size of the color patch.
+ * @cssproperty --legend-swatch-stroke - Width of the edge an `outlined` or
+ *   `subtle` swatch is drawn with.
+ */
+export declare class HelixLegend extends HelixHeadlessLegend {
+    static styles: CSSResultGroup;
+    /**
+     * Where the legend sits and which way its entries run.
+     *
+     * Absent is a wrapping row, which is what sits under a chart. `start` and
+     * `end` stack the entries in a column, for a legend beside one.
+     *
+     * **This says which way the entries run and not where the element is**, which
+     * is the honest limit of a component that is a sibling of the chart rather
+     * than part of it. A legend cannot place itself relative to something it is
+     * not inside, so the consumer still puts it above, below or beside; this
+     * makes it lay out correctly once it is there, which was the part that
+     * previously took a custom property nobody would guess at.
+     *
+     * The alternative was a `legend` slot on every chart, so a chart could place
+     * its own. That is worse: it makes the legend's position a fact about the
+     * chart, so two charts sharing one legend becomes impossible, and it puts a
+     * list inside a drawing that is `aria-hidden`.
+     */
+    placement?: 'end' | 'start';
+    /**
+     * How much ink the swatches claim.
+     *
+     * **The same axis as the chart's, with the same values, because a legend that
+     * does not match its chart is worse than no legend.** A key whose swatches are
+     * solid while the columns they key are outlined tells a reader the two are
+     * different kinds of fact, which is the exact thing `outlined` on a chart
+     * exists to say. `outlined` is the series color as an edge over a fill faded
+     * toward the page, `subtle` is that edge over a wash, and absent is the filled
+     * patch, per the rule that a reflected property takes no default.
+     *
+     * **The legend declares it rather than reading it off the chart, and that is a
+     * decision rather than a shortcut.** A legend has no reference to a chart: it
+     * points at a *table* through `for`, which is what lets two charts share one,
+     * and the chart points at the same table independently. Giving it a chart to
+     * read would make a list of names depend on a drawing it is deliberately not
+     * part of, and would still not answer the per-series case, where `outlined` is
+     * a set of names rather than one value. Two attributes carrying the same word
+     * is the honest cost of the legend being a sibling.
+     */
+    emphasis?: 'outlined' | 'solid' | 'subtle';
+    /**
+     * What the swatches are made of.
+     *
+     * `glass` thins whatever emphasis drew, the way it does on a column, so a
+     * legend beside a glass chart is in the same substance as the chart. Scaled by
+     * `--helix-material-opacity`, so a theme that is more see-through everywhere is
+     * more see-through here.
+     *
+     * **This paints a mark rather than a ground, and the axis still reads the
+     * same way.** On a surface the points are how much of the page shows through;
+     * on a series they are how much ink the mark has, and the order is the same:
+     * `glass` admits most, `frosted` admits less, absent is opaque. The two
+     * factors, 0.62 and 0.88, carry the relationship the surface tokens carry
+     * between `material-translucent` and `material-translucent-strong`, so a
+     * chart and a card mean the same thing by the word.
+     *
+     * **`transparent` is where this one stops.** A mark with no ink is not a
+     * material choice, it is an absent series, and a chart says that by not
+     * having the datum rather than by painting it invisibly. See 270.
+     */
+    material?: 'frosted' | 'glass';
+    /**
+     * Which entries are drawn as an outline rather than a fill, by name.
+     *
+     * Space or comma separated and matched against the names this legend is
+     * showing, which are the same names the chart matches its own `outlined`
+     * against, since both read one table. So a chart and its key say the same
+     * thing the same way: `outlined="Forecast"` on both.
+     */
+    outlined?: string;
+    /**
+     * Which entries are drawn as a wash of their color, by name.
+     *
+     * Matched as `outlined` is.
+     */
+    subtle?: string;
+    /**
+     * Which entries are glass rather than solid, by name.
+     *
+     * Matched as `outlined` is.
+     */
+    glass?: string;
+    /**
+     * Marks each entry with the treatment its name was given.
+     *
+     * After the update rather than during it, because the entries are what the
+     * tier below rendered and matching happens against the names it chose to show.
+     * The same shape `BarChart.updated` uses on its bars, and for the same reason:
+     * a per-series answer cannot be a selector, since CSS cannot match an
+     * attribute against a list.
+     */
+    protected updated(changed: PropertyValues<this>): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-legend': HelixLegend;
+    }
+}

package/dist/legend/root/legend-root.js

@@ -0,0 +1,99 @@
+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 { HelixHeadlessLegend } from '@fusion.dev/helix-headless/legend';
+import { property } from 'lit/decorators.js';
+import { styles as seriesStyles } from '../../shared/chart/series.css.js';
+import { styles } from './legend-root.css.js';
+/**
+ * @summary The names a chart draws, each beside the color it is drawn in.
+ *
+ * @description
+ * A row that wraps, because a legend sits under a chart as wide as the chart
+ * and there is no arrangement of eight names that fits every width. Set
+ * `--legend-direction` to `column` where it sits beside one instead.
+ *
+ * The eight series colours are mapped here rather than in the tier below, which
+ * carries the index and holds no tokens. Written as eight rules for the reason
+ * `Avatar.Group` writes twelve: an index in markup cannot select a token, and a
+ * custom property set inline would be the headless tier naming a color.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category charts
+ * @groups charts
+ * @aliases Key, Series Key
+ * @documentation https://helix.fusion.dev/components/legend
+ *
+ * @cssproperty --legend-direction - `row`, which wraps, or `column`.
+ * @cssproperty --legend-gap - Space between entries.
+ * @cssproperty --legend-swatch-size - Size of the color patch.
+ * @cssproperty --legend-swatch-stroke - Width of the edge an `outlined` or
+ *   `subtle` swatch is drawn with.
+ */
+let HelixLegend = class HelixLegend extends HelixHeadlessLegend {
+    static { this.styles = [seriesStyles, styles]; }
+    /**
+     * Marks each entry with the treatment its name was given.
+     *
+     * After the update rather than during it, because the entries are what the
+     * tier below rendered and matching happens against the names it chose to show.
+     * The same shape `BarChart.updated` uses on its bars, and for the same reason:
+     * a per-series answer cannot be a selector, since CSS cannot match an
+     * attribute against a list.
+     */
+    updated(changed) {
+        super.updated(changed);
+        const showing = this.names().map((name) => name.trim().toLowerCase());
+        const slots = (value) => new Set((value ?? '')
+            .split(/[\s,]+/)
+            .filter(Boolean)
+            .map((name) => name.toLowerCase())
+            .flatMap((name) => {
+            const at = showing.indexOf(name);
+            return at < 0 ? [] : [at];
+        }));
+        const mark = (entry, name, value) => {
+            if (value) {
+                entry.setAttribute(`data-${name}`, value);
+            }
+            else {
+                entry.removeAttribute(`data-${name}`);
+            }
+        };
+        const outlined = slots(this.outlined);
+        const subtle = slots(this.subtle);
+        const glass = slots(this.glass);
+        const entries = [...this.renderRoot.querySelectorAll('[part="entry"]')];
+        for (const [at, entry] of entries.entries()) {
+            mark(entry, 'emphasis', outlined.has(at) ? 'outlined' : subtle.has(at) ? 'subtle' : undefined);
+            mark(entry, 'material', glass.has(at) ? 'glass' : undefined);
+        }
+    }
+};
+__decorate([
+    property({ reflect: true })
+], HelixLegend.prototype, "placement", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixLegend.prototype, "emphasis", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixLegend.prototype, "material", void 0);
+__decorate([
+    property()
+], HelixLegend.prototype, "outlined", void 0);
+__decorate([
+    property()
+], HelixLegend.prototype, "subtle", void 0);
+__decorate([
+    property()
+], HelixLegend.prototype, "glass", void 0);
+HelixLegend = __decorate([
+    customElement('helix-legend')
+], HelixLegend);
+export { HelixLegend };

package/dist/line-chart/index.d.ts

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

package/dist/line-chart/index.js

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

package/dist/line-chart/root/line-chart-root.css.d.ts

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

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

@@ -0,0 +1,293 @@
+// Generated from src/line-chart/root/line-chart-root.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+display: grid;
+position: relative;
+gap: var(--line-chart-gap, var(--helix-space-2xs));
+}
+
+[part="plot"] {
+position: relative;
+
+block-size: var(--line-chart-block-size, 12em);
+}
+
+[part="plot"] svg {
+block-size: 100%;
+inline-size: 100%;
+
+overflow: visible;
+}
+
+[part="line"] {
+stroke-linecap: round;
+stroke-linejoin: round;
+stroke-width: var(--line-chart-width, 2px);
+vector-effect: non-scaling-stroke;
+}
+
+[part="area"] {
+
+opacity: calc(var(--line-chart-area-opacity, 0.16) * var(--helix-material-opacity));
+stroke: none;
+}
+
+[part="baseline"] {
+stroke: var(--helix-color-border);
+stroke-width: var(--helix-border-thin);
+vector-effect: non-scaling-stroke;
+}
+
+[part="labels"] {
+display: grid;
+grid-auto-columns: 1fr;
+grid-auto-flow: column;
+}
+
+[part="label"] {
+color: var(--helix-color-foreground-muted);
+font-size: var(--helix-text-xs);
+overflow: hidden;
+text-align: center;
+text-overflow: ellipsis;
+white-space: nowrap;
+}
+
+[part="line"] {
+stroke: var(--chart-series);
+}
+
+[part="terminus"] {
+color: var(--chart-series);
+}
+
+:host([terminus="ring"]) [part="svg"] {
+mask-composite: intersect;
+mask-image: var(--_line-chart-holes);
+}
+
+[part="area"] {
+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;
+stroke-width: var(--helix-border-thin);
+vector-effect: non-scaling-stroke;
+}
+
+[part="line"] {
+stroke-dasharray: 1000;
+transition:
+d var(--helix-duration-normal) var(--helix-easing-decelerate),
+stroke-dashoffset var(--helix-duration-slow) var(--helix-easing-decelerate);
+}
+
+@starting-style {
+[part="line"] {
+stroke-dashoffset: 1000;
+}
+}
+
+[part="area"] {
+transition:
+d var(--helix-duration-normal) var(--helix-easing-decelerate),
+opacity var(--helix-duration-slow) var(--helix-easing-decelerate);
+}
+
+@starting-style {
+[part="area"] {
+opacity: 0;
+}
+}
+
+@media (prefers-reduced-motion: reduce) {
+[part="line"],
+[part="area"] {
+transition: none;
+}
+}
+
+[part="plot"] {
+cursor: crosshair;
+}
+
+[part="gridline"] {
+stroke: var(--line-chart-gridline-color, var(--helix-color-border));
+stroke-width: var(--helix-border-thin);
+vector-effect: non-scaling-stroke;
+}
+
+[part="band"] {
+fill: var(--line-chart-band-color, var(--helix-color-surface-sunken));
+}
+
+@media print {
+:host {
+box-shadow: none;
+print-color-adjust: exact;
+}
+}
+
+:host([emphasis="subtle"]) [part="line"] {
+stroke: color-mix(in oklab, var(--chart-series) 45%, var(--helix-color-background));
+}
+
+:host([emphasis="subtle"]) [part="area"] {
+fill: color-mix(in oklab, var(--chart-series) 45%, var(--helix-color-background));
+}
+
+:host([emphasis="outlined"]) {
+--line-chart-area-opacity: 0.08;
+}
+
+:host([emphasis="solid"]) {
+--line-chart-area-opacity: 1;
+}
+
+:host([material="glass"]) [part="line"] {
+stroke-opacity: calc(0.62 * var(--helix-material-opacity));
+}
+
+:host([material="frosted"]) [part="line"] {
+stroke-opacity: calc(0.88 * var(--helix-material-opacity));
+}`);