@fusion.dev/helix 0.0.0-dev

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

@@ -0,0 +1,445 @@
+// Generated from src/bar-chart/root/bar-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(--bar-chart-gap, var(--helix-space-2xs));
+}
+
+[part="plot"] {
+position: relative;
+
+block-size: var(--bar-chart-block-size, 12em);
+}
+
+[part="plot"] svg {
+block-size: 100%;
+inline-size: 100%;
+
+overflow: visible;
+}
+
+[part="baseline"] {
+stroke: var(--helix-color-border);
+stroke-width: var(--helix-border-thin);
+vector-effect: non-scaling-stroke;
+}
+
+[part="bar"] {
+clip-path: inset(var(--_bar-chart-foot, 0) round var(--_bar-chart-corners));
+fill: var(--_bar-chart-series);
+
+--_bar-chart-corners: var(--bar-chart-bar-radius, 2px) var(--bar-chart-bar-radius, 2px) 0 0;
+--_bar-chart-base: 0 0 calc(var(--bar-chart-bar-stroke, var(--helix-border-thick)) / 2) 0;
+}
+
+:host([direction="horizontal"]) [part="bar"] {
+--_bar-chart-corners: 0 var(--bar-chart-bar-radius, 2px) var(--bar-chart-bar-radius, 2px) 0;
+--_bar-chart-base: 0 0 0 calc(var(--bar-chart-bar-stroke, var(--helix-border-thick)) / 2);
+}
+
+[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;
+}
+
+:host([direction="horizontal"]) {
+grid-template-columns: auto 1fr;
+}
+
+:host([direction="horizontal"]) [part="labels"] {
+grid-column: 1;
+grid-row: 1;
+}
+
+:host([direction="horizontal"]) [part="plot"] {
+grid-column: 2;
+grid-row: 1;
+}
+
+:host([direction="horizontal"]) [part="labels"] {
+grid-auto-columns: auto;
+grid-auto-flow: row;
+grid-auto-rows: 1fr;
+}
+
+:host([direction="horizontal"]) [part="label"] {
+align-self: center;
+text-align: end;
+}
+
+[part="bar"],
+[part="line"] {
+--_bar-chart-series: 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"] {
+display: block;
+font-weight: var(--helix-weight-medium);
+margin-block-end: var(--helix-space-2xs);
+}
+
+[part="tooltip-cell"] {
+align-items: baseline;
+column-gap: var(--helix-space-sm);
+display: grid;
+grid-template-columns: 0.5em minmax(0, 1fr) auto;
+}
+
+[part="tooltip-name"] {
+grid-column: 2;
+
+opacity: 0.72;
+}
+
+[part="tooltip-value"] {
+font-variant-numeric: tabular-nums;
+grid-column: 3;
+}
+
+[part="tooltip-cell"][data-series]::before {
+block-size: 0.5em;
+border-radius: var(--helix-radii-full);
+content: "";
+grid-column: 1;
+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="plot"]:has([data-active]) [part="group"]:not([data-active]) {
+opacity: 0.45;
+}
+
+[part="group"] {
+transition: opacity var(--helix-duration-fast) var(--helix-easing-decelerate);
+}
+
+@media (prefers-reduced-motion: reduce) {
+[part="group"] {
+transition: none;
+}
+}
+
+[part="bar"] {
+transition:
+height var(--helix-duration-normal) var(--helix-easing-decelerate),
+width var(--helix-duration-normal) var(--helix-easing-decelerate),
+x var(--helix-duration-normal) var(--helix-easing-decelerate),
+y var(--helix-duration-normal) var(--helix-easing-decelerate);
+}
+
+@starting-style {
+:host(:not([direction="horizontal"])) [part="bar"] {
+height: 0;
+y: 100;
+}
+
+:host([direction="horizontal"]) [part="bar"] {
+width: 0;
+}
+}
+
+@media (prefers-reduced-motion: reduce) {
+[part="bar"] {
+transition: none;
+}
+}
+
+[part="plot"] {
+cursor: crosshair;
+}
+
+[part="gridline"] {
+stroke: var(--bar-chart-gridline-color, var(--helix-color-border));
+stroke-width: var(--helix-border-thin);
+vector-effect: non-scaling-stroke;
+}
+
+[part="band"] {
+fill: var(--bar-chart-band-color, var(--helix-color-surface-sunken));
+}
+
+[part="line"] {
+fill: none;
+stroke: var(--bar-chart-line-color, var(--_bar-chart-series, var(--helix-color-series-1)));
+stroke-linecap: round;
+stroke-linejoin: round;
+stroke-width: var(--bar-chart-line-width, 2.5px);
+vector-effect: non-scaling-stroke;
+}
+
+:host([secondary]) {
+grid-template-columns: auto 1fr auto;
+}
+
+:host([secondary]) [part="axis"][data-axis="primary"] {
+grid-column: 1;
+grid-row: 1;
+}
+
+:host([secondary]) [part="plot"] {
+grid-column: 2;
+grid-row: 1;
+}
+
+[part="axis"][data-axis="secondary"] {
+--_bar-chart-axis-ink: color-mix(
+in oklab,
+var(--bar-chart-secondary) 45%,
+var(--helix-color-foreground)
+);
+
+color: var(--_bar-chart-axis-ink, var(--helix-color-foreground-subtle));
+}
+
+:host([secondary]) [part="axis"][data-axis="secondary"] {
+grid-column: 3;
+grid-row: 1;
+}
+
+:host([secondary]) [part="labels"] {
+grid-column: 2;
+grid-row: 2;
+}
+
+:host([direction="horizontal"][secondary]) {
+grid-template-columns: auto 1fr;
+grid-template-rows: auto 1fr auto;
+}
+
+:host([direction="horizontal"][secondary]) [part="axis"][data-axis="secondary"] {
+grid-column: 2;
+grid-row: 1;
+}
+
+:host([direction="horizontal"][secondary]) [part="labels"] {
+grid-column: 1;
+grid-row: 2;
+}
+
+:host([direction="horizontal"][secondary]) [part="plot"] {
+grid-column: 2;
+grid-row: 2;
+}
+
+:host([direction="horizontal"][secondary]) [part="axis"][data-axis="primary"] {
+grid-column: 2;
+grid-row: 3;
+}
+
+[part="axis"] {
+color: var(--helix-color-foreground-subtle);
+font-size: var(--helix-text-xs);
+font-variant-numeric: tabular-nums;
+pointer-events: none;
+position: relative;
+}
+
+:host(:not([direction="horizontal"])) [part="axis"] {
+inline-size: var(--bar-chart-axis, 3ch);
+}
+
+:host([direction="horizontal"]) [part="axis"] {
+block-size: 1lh;
+}
+
+[part="tick"] {
+position: absolute;
+}
+
+:host(:not([direction="horizontal"])) [part="tick"] {
+inset-inline-end: 0;
+translate: 0 -50%;
+}
+
+:host([direction="horizontal"]) [part="tick"] {
+translate: -50% 0;
+}
+
+:host(:not([direction="horizontal"])) [part="axis"][data-axis="secondary"] [part="tick"] {
+inset-inline-end: auto;
+inset-inline-start: 0;
+}
+
+[part="bar"] {
+fill-opacity: calc(var(--_bar-chart-area, 1) * var(--_bar-chart-through, 1));
+stroke-opacity: var(--_bar-chart-through, 1);
+}
+
+[part="bar"][data-emphasis="outlined"],
+:host([emphasis="outlined"]) [part="bar"]:not([data-emphasis]) {
+fill: var(--_bar-chart-shade);
+stroke: var(--_bar-chart-series);
+stroke-width: var(--bar-chart-bar-stroke, var(--helix-border-thick));
+vector-effect: non-scaling-stroke;
+
+--_bar-chart-foot: var(--_bar-chart-base);
+}
+
+[part="bar"][data-emphasis="subtle"],
+:host([emphasis="subtle"]) [part="bar"]:not([data-emphasis]) {
+stroke: var(--_bar-chart-series);
+stroke-width: var(--bar-chart-bar-stroke, var(--helix-border-thick));
+vector-effect: non-scaling-stroke;
+
+--_bar-chart-area: 0.2;
+
+--_bar-chart-foot: var(--_bar-chart-base);
+}
+
+[part="bar"] {
+--_bar-chart-shade: color-mix(
+in oklab,
+var(--_bar-chart-series) 60%,
+var(--helix-color-background)
+);
+}
+
+[part="bar"][data-material="glass"],
+:host([material="glass"]) [part="bar"]:not([data-material]) {
+--_bar-chart-through: calc(0.62 * var(--helix-material-opacity));
+}
+
+[part="bar"][data-material="frosted"],
+:host([material="frosted"]) [part="bar"]:not([data-material]) {
+--_bar-chart-through: calc(0.88 * var(--helix-material-opacity));
+}
+
+:host([wash="gradient"]) [part="bar"] {
+fill: var(--chart-bar-wash);
+}
+
+[part="bar-wash-start"] {
+stop-color: var(--chart-series);
+stop-opacity: calc(1 * var(--helix-material-opacity));
+}
+
+[part="bar-wash-end"] {
+stop-color: var(--chart-series);
+stop-opacity: calc(0.35 * var(--helix-material-opacity));
+}
+
+@media print {
+:host {
+box-shadow: none;
+print-color-adjust: exact;
+}
+}`);

package/dist/bar-chart/root/bar-chart-root.d.ts

@@ -0,0 +1,177 @@
+import { HelixHeadlessBarChart } from '@fusion.dev/helix-headless/bar-chart';
+import type { CSSResultGroup, PropertyValues } from 'lit';
+import '../../tooltip/index.js';
+/**
+ * @summary Categories as columns, read from a table.
+ *
+ * @description
+ * The columns take the series palette in order, so a chart of one is series one
+ * and a chart of four is the first four. Rounded at the far end only, because a
+ * column grows from the baseline and a rounded foot would lift it off the rule
+ * it is measured against.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category charts
+ * @groups charts
+ * @aliases Column Chart, Categorical Chart
+ * @documentation https://helix.fusion.dev/components/bar-chart
+ *
+ * @cssproperty --bar-chart-band-color - The slot the pointer is resting in.
+ * @cssproperty --bar-chart-bar-radius - Corner radius at the far end of a column.
+ * @cssproperty --bar-chart-bar-stroke - Width of the edge an `outlined` or `subtle`
+ *   column is drawn with.
+ * @cssproperty --bar-chart-block-size - Height of the drawing.
+ * @cssproperty --bar-chart-gap - Space between the drawing and its labels.
+ * @cssproperty --bar-chart-gridline-color - One rule across the plot, under `gridlines`.
+ * @cssproperty --bar-chart-line-color - A `lines` series, overriding its series color.
+ * @cssproperty --bar-chart-line-width - Thickness of a `lines` series.
+ */
+export declare class HelixBarChart extends HelixHeadlessBarChart {
+    /**
+     * **The styled tier, so the tooltip this renders is the styled one.**
+     *
+     * `tag()` builds a child's tag name from this prefix, and the base declares
+     * `helix-headless-`. Every other styled component that renders a child
+     * overrides it; the three charts that draw a tooltip did not, so a
+     * `helix-bar-chart` on a page put a `helix-headless-tooltip` in its shadow
+     * root: the behavior with none of the surface. What showed was the browser's
+     * own popover defaults, a white 1.5px border, square corners, `0.25em` of
+     * padding and the page's font size, which is why the reading bubble looked
+     * like no other tooltip on the site.
+     *
+     * Measured before the fix: the chart's bubble computed
+     * `border: 1.5px solid rgb(255, 255, 255)`, `border-radius: 0px`,
+     * `padding: 3.5px`, `font-size: 14px`. The masthead's, a `helix-tooltip`,
+     * had the component's own `none`, `radii-sm`, `2xs xs` and `text-xs`.
+     */
+    static tier: string;
+    /**
+     * What the columns are made of.
+     *
+     * **A third axis on the chart, not on the bar.** A bar is a mark inside a
+     * drawing and nobody writes markup for one; the chart is what a consumer
+     * addresses, so the choice belongs here and reaches every column at once.
+     *
+     * `glass` lets the gridlines read through the columns, which is what puts a
+     * chart in the same language as a glass header rather than leaving it the one
+     * opaque slab on the page.
+     *
+     * **`gradient` was here and is `wash` now, which is #156.** The two set
+     * different properties, `fill-opacity` against `fill`, and a chart forced into
+     * both renders as a translucent gradient that is distinct from either: one
+     * enum was holding two independent things, which is the mistake `Card`'s own
+     * doc warns about arriving on the component that borrowed the word.
+     *
+     * Absent is solid, per the rule that a reflected property takes no default,
+     * so the stylesheet describes only the departure. The strength is the
+     * theme's: `glass` scales with `--helix-material-opacity`, so a language that
+     * is more see-through everywhere is more see-through here.
+     *
+     * Styled rather than headless, because what a bar is filled with is a
+     * treatment and this tier is where treatments live. The gradient it points at
+     * is drawn below, which is an element and therefore that tier's business.
+     *
+     * **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';
+    /**
+     * How a column's fill is distributed across it.
+     *
+     * `gradient` fades each column toward its base, into the wash the headless
+     * tier draws whether or not anything points at it.
+     *
+     * **A chart-domain axis and deliberately not a library one.** It lives on this
+     * family alone, and here it is a way of encoding data rather than a way of
+     * expressing a theme: promoted to the registry it would put an attribute on
+     * eighty-eight components that means nothing on eighty-seven. `wash` because
+     * that is what the tier below already calls it, in `--chart-bar-wash` and in
+     * the `bar-wash-start` and `bar-wash-end` stops.
+     */
+    wash?: 'gradient';
+    /**
+     * Which series are glass rather than solid, by name.
+     *
+     * Matched the way `outlined` is, against the column headings the table gives.
+     *
+     * **Per series for the reason `emphasis` is, arrived at one axis later.** A
+     * chart-wide material puts every column in the same substance, which is right
+     * when the whole chart is joining the page's language and wrong the moment one
+     * series is a different kind of fact from the others. The two axes take the
+     * same shape because they answer the same question about the same thing: what
+     * is *this series* made of, and how much ink does *this series* claim.
+     */
+    glass?: string;
+    /**
+     * How much ink the columns claim.
+     *
+     * The chart's treatment, which every series takes unless `outlined` or
+     * `subtle` names it. `outlined` is the mark as its edge alone, `subtle` a wash
+     * of the series color with that edge on it, and absent is the filled column,
+     * per the rule that a reflected property takes no default.
+     *
+     * **It composes with `material` rather than competing with it.** Emphasis
+     * decides what is drawn and material decides how much of it comes through, so
+     * `glass` thins whatever emphasis put there: the fill on a solid column, the
+     * stroke on an outlined one. That corner was inert when the two were first
+     * put side by side, `glass` setting a fill opacity on a mark whose fill is
+     * `none`, and a combination that silently does nothing is the trap
+     * `--card-backdrop` was for the one commit it shipped alone.
+     */
+    emphasis?: 'outlined' | 'solid' | 'subtle';
+    /**
+     * Which series are drawn as an outline rather than a fill, by name.
+     *
+     * Space separated and matched against the column headings the table gives,
+     * the way `lines` and `secondary` are, so a chart says `outlined="Forecast"`
+     * rather than counting columns. Names because they are what the table already
+     * carries and what the legend already shows.
+     *
+     * **The case this exists for is a series that is not a measurement.** A
+     * forecast, a target, a budget: something drawn on the same axis as the
+     * others and not the same kind of fact, which an outline says without a
+     * second legend or a note under the chart.
+     *
+     * Per series and not per bar, because a bar is a mark inside a drawing and
+     * nobody writes markup for one, which is the same reason `material` sits on
+     * the chart.
+     */
+    outlined?: string;
+    /**
+     * Which series are drawn as a wash of their color, by name.
+     *
+     * Matched as `outlined` is.
+     */
+    subtle?: string;
+    /**
+     * Marks each column with the treatments its series asked for.
+     *
+     * **Stamped after render rather than rendered, because the tier that draws
+     * the columns is the one that must not know about treatments.** The headless
+     * tier already writes `data-series` on every rect so a stylesheet can color
+     * it; this reads the same mark, resolves the names against the series the
+     * table gave, and writes `data-emphasis` beside it. The stylesheet does the
+     * rest, so nothing about painting crosses the tier boundary.
+     *
+     * The mark is the palette slot rather than the series ordinal, so past the
+     * palette's width two series share one. They share a color there too, which
+     * is the same limit arriving in a second place rather than a new one.
+     */
+    protected updated(changed: PropertyValues<this>): void;
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-bar-chart': HelixBarChart;
+    }
+}