@fusion.dev/helix 0.0.0-dev

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

@@ -0,0 +1,82 @@
+// Generated from src/divider/root/divider-root.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+align-items: center;
+display: flex;
+
+--_divider-thickness: var(--divider-thickness, var(--helix-border-thin));
+}
+
+[part="content"] {
+color: var(--helix-color-foreground-muted);
+margin-inline: var(--helix-space-sm);
+display: inline-flex;
+flex: 0 0 auto;
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-xs);
+line-height: var(--helix-leading-tight);
+}
+
+[part="content"] slot::slotted(*),
+[part="content"] {
+white-space: nowrap;
+}
+
+[part="content"][data-empty] {
+display: none;
+}
+
+:host {
+padding-inline-end: var(--divider-padding-end, var(--divider-padding, var(--helix-space-none)));
+padding-inline-start: var(
+--divider-padding-start,
+var(--divider-padding, var(--helix-space-none))
+);
+}
+
+:host([orientation="vertical"]) {
+padding-block-end: var(--divider-padding-end, var(--divider-padding, var(--helix-space-none)));
+padding-block-start: var(
+--divider-padding-start,
+var(--divider-padding, var(--helix-space-none))
+);
+padding-inline: var(--helix-space-none);
+}
+
+:host([orientation="vertical"]) {
+align-self: stretch;
+display: inline-flex;
+flex-direction: column;
+}
+
+:host([orientation="vertical"]) [part="content"] {
+margin-block: var(--helix-space-sm);
+margin-inline: var(--helix-space-none);
+}
+
+[part="line"] {
+background-color: var(--divider-color, var(--helix-color-border));
+}
+
+:host(:not([orientation])) [part="line"],
+:host([orientation="horizontal"]) [part="line"] {
+block-size: var(--_divider-thickness);
+flex: 1 1 0;
+}
+
+:host([orientation="vertical"]) {
+block-size: var(--divider-length, auto);
+}
+
+:host([orientation="vertical"]) [part="line"] {
+flex: 1 1 0;
+inline-size: var(--_divider-thickness);
+
+min-block-size: 1em;
+}
+
+@media print {
+:host {
+box-shadow: none;
+}
+}`);

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

@@ -0,0 +1,34 @@
+import { HelixHeadlessDivider } from '@fusion.dev/helix-headless/divider';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary Separates content into groups with a rule.
+ *
+ * @description
+ * A one-pixel rule in the border color, running the full inline size by
+ * default. A vertical divider stretches to its flex parent instead of setting
+ * its own height, so it matches whatever it sits beside without being told how
+ * tall that is.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category layout
+ * @aliases Separator, Rule
+ * @documentation https://helix.fusion.dev/components/divider
+ *
+ * @csspart line - The rule itself.
+ *
+ * @cssproperty --divider-color - Color of the rule.
+ * @cssproperty --divider-length - How long a vertical rule is. Horizontal takes its width.
+ * @cssproperty --divider-padding - Space taken off both ends of it.
+ * @cssproperty --divider-padding-end - Off the far end only.
+ * @cssproperty --divider-padding-start - Off the near end only.
+ * @cssproperty --divider-thickness - How heavy the rule is.
+ */
+export declare class HelixDivider extends HelixHeadlessDivider {
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-divider': HelixDivider;
+    }
+}

package/dist/divider/root/divider-root.js

@@ -0,0 +1,40 @@
+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 { HelixHeadlessDivider } from '@fusion.dev/helix-headless/divider';
+import { styles } from './divider-root.css.js';
+/**
+ * @summary Separates content into groups with a rule.
+ *
+ * @description
+ * A one-pixel rule in the border color, running the full inline size by
+ * default. A vertical divider stretches to its flex parent instead of setting
+ * its own height, so it matches whatever it sits beside without being told how
+ * tall that is.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category layout
+ * @aliases Separator, Rule
+ * @documentation https://helix.fusion.dev/components/divider
+ *
+ * @csspart line - The rule itself.
+ *
+ * @cssproperty --divider-color - Color of the rule.
+ * @cssproperty --divider-length - How long a vertical rule is. Horizontal takes its width.
+ * @cssproperty --divider-padding - Space taken off both ends of it.
+ * @cssproperty --divider-padding-end - Off the far end only.
+ * @cssproperty --divider-padding-start - Off the near end only.
+ * @cssproperty --divider-thickness - How heavy the rule is.
+ */
+let HelixDivider = class HelixDivider extends HelixHeadlessDivider {
+    static { this.styles = styles; }
+};
+HelixDivider = __decorate([
+    customElement('helix-divider')
+], HelixDivider);
+export { HelixDivider };

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

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

package/dist/donut-chart/index.js

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

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

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

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

@@ -0,0 +1,326 @@
+// Generated from src/donut-chart/root/donut-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;
+
+inline-size: var(--donut-chart-size, 16em);
+place-items: center;
+}
+
+[part="plot"] {
+grid-area: 1 / 1;
+}
+
+[part="plot"] {
+position: relative;
+
+inline-size: 100%;
+}
+
+[part="plot"] svg {
+aspect-ratio: 1;
+display: block;
+inline-size: 100%;
+}
+
+[part="track"],
+[part="segment"] {
+transform: rotate(-90deg);
+transform-box: fill-box;
+transform-origin: center;
+}
+
+[part="track"] {
+stroke: var(--donut-chart-track-color, var(--helix-color-surface-sunken));
+}
+
+[part="segment"] {
+stroke-linecap: butt;
+
+stroke-width: var(--donut-chart-stroke);
+}
+
+[part="center"] slot {
+--stat-value-size: 24cqi;
+
+font-size: 13cqi;
+}
+
+[part="center"] {
+
+inset-block-start: 50%;
+inset-inline-start: 50%;
+pointer-events: none;
+position: absolute;
+translate: -50% -50%;
+
+box-sizing: border-box;
+
+container-type: inline-size;
+display: grid;
+inline-size: calc(100% * (80 - var(--donut-chart-stroke, 16)) / 100);
+place-items: center;
+text-align: center;
+}
+
+[part="segment"] {
+stroke: 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="segment"][data-active] {
+stroke-width: calc(var(--donut-chart-stroke) * 1.18);
+}
+
+:host([emphasis="outlined"]) [part="segment"][data-active] {
+stroke: var(--chart-series);
+stroke-width: var(--donut-chart-stroke);
+}
+
+[part="segment"] {
+transition:
+stroke var(--helix-duration-fast) var(--helix-easing-decelerate),
+stroke-width var(--helix-duration-fast) var(--helix-easing-decelerate);
+}
+
+@media (prefers-reduced-motion: reduce) {
+[part="segment"] {
+transition: none;
+}
+}
+
+[part="segment"] {
+transition:
+r var(--helix-duration-normal) var(--helix-easing-decelerate),
+stroke-dasharray var(--helix-duration-normal) var(--helix-easing-decelerate),
+stroke-dashoffset var(--helix-duration-normal) var(--helix-easing-decelerate),
+stroke-width var(--helix-duration-fast) var(--helix-easing-decelerate);
+}
+
+@starting-style {
+[part="segment"] {
+stroke-dasharray: 0 9999;
+}
+}
+
+[part="track"] {
+transition: r var(--helix-duration-normal) var(--helix-easing-decelerate);
+}
+
+@media (prefers-reduced-motion: reduce) {
+[part="segment"],
+[part="track"] {
+transition: none;
+}
+}
+
+[part="segment"] {
+cursor: crosshair;
+}
+
+:host([sweep="half"]) [part="plot"] svg {
+aspect-ratio: 100 / calc(40 + var(--donut-chart-stroke, 16) / 2);
+}
+
+:host([sweep="half"]) [part="track"],
+:host([sweep="half"]) [part="segment"] {
+transform: rotate(180deg);
+}
+
+:host([sweep="half"]) [part="center"] {
+inset-block-end: 0;
+inset-block-start: auto;
+translate: -50% 0;
+
+block-size: calc(
+100% *
+(40 - var(--donut-chart-stroke, 16)) /
+(40 + var(--donut-chart-stroke, 16) / 2)
+);
+}
+
+:host([sweep="half"]) [part="center"] slot {
+--stat-value-size: 12cqi;
+
+font-size: 6.5cqi;
+}
+
+@media print {
+:host {
+box-shadow: none;
+print-color-adjust: exact;
+}
+}
+
+:host([emphasis="subtle"]) [part="segment"] {
+stroke: color-mix(
+in oklab,
+var(--chart-series) 30%,
+var(--donut-chart-track-color, var(--helix-color-surface-sunken))
+);
+}
+
+[part="segment-edge"] {
+fill: none;
+stroke: none;
+}
+
+:host([emphasis="outlined"]) [part="segment"] {
+stroke: color-mix(
+in oklab,
+var(--chart-series) 55%,
+var(--donut-chart-track-color, var(--helix-color-surface-sunken))
+);
+}
+
+:host([emphasis="outlined"]) [part="segment-edge"] {
+stroke: var(--chart-series);
+
+stroke-width: var(--donut-chart-edge-stroke, 3);
+}
+
+:host([material="glass"]) [part="segment"] {
+stroke-opacity: calc(0.62 * var(--helix-material-opacity));
+}
+
+:host([material="frosted"]) [part="segment"] {
+stroke-opacity: calc(0.88 * var(--helix-material-opacity));
+}`);

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

@@ -0,0 +1,111 @@
+import { HelixHeadlessDonutChart } from '@fusion.dev/helix-headless/donut-chart';
+import type { CSSResultGroup } from 'lit';
+import '../../tooltip/index.js';
+/**
+ * @summary Parts of a whole as a ring, read from a table.
+ *
+ * @description
+ * The slices take the series palette in order, so a legend beside it maps the
+ * same twenty-four.
+ *
+ * The ring starts at twelve o'clock, which is a rotation applied here rather
+ * than arithmetic done below: where a reader expects the first slice to begin
+ * is a fact about the picture, not about the numbers.
+ *
+ * A track is drawn under the slices, so a ring whose values do not fill it
+ * still reads as a ring with a gap rather than as a broken arc.
+ *
+ * **How thick the ring is drawn is `hole`, not a CSS hook.** It was
+ * `--donut-chart-thickness`, and the stroke's width and the ring's radius have
+ * to agree: the outer edge is `r + width / 2`, so setting one in CSS and
+ * deriving the other in markup gives a drawing that is wrong in both. Measured
+ * with the hook still in place, every ring came out twelve units thick whatever
+ * its `hole`, so a pie was a small ring with a hole in it and `large` was drawn
+ * larger than the default.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category charts
+ * @groups charts
+ * @aliases Pie Chart, Ring Chart, Share Chart
+ * @documentation https://helix.fusion.dev/components/donut-chart
+ *
+ * @cssproperty --donut-chart-edge-stroke - Thickness of the slice boundary under `outlined`.
+ * @cssproperty --donut-chart-size - Width and height of the ring.
+ * @cssproperty --donut-chart-track-color - Color of the ring under the slices.
+ */
+export declare class HelixDonutChart extends HelixHeadlessDonutChart {
+    /**
+     * **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;
+    /**
+     * How much ink the slices claim.
+     *
+     * `solid` is the resting arrangement and selects nothing: a slice at full
+     * strength is what the base rule already draws. `subtle` is the ring as a wash
+     * of its own colors, still readable and no longer the loudest thing beside the
+     * number it is explaining. `outlined` keeps the slice and fades it toward the
+     * page, leaving a boundary in the series' own color, which is the same trade
+     * `BarChart` makes on a column.
+     *
+     * **This took three values on 25 Aug 2026, and the note it replaces argued it
+     * could not.** That note was right about the mark: a slice is a stroke on a
+     * ring, the edge *is* the mark, and there is nothing within it to fade. It
+     * concluded that `outlined` would mean drawing slices as filled paths instead
+     * of arcs, and called that changing what a donut is to satisfy a word.
+     *
+     * What it did not weigh is that the two can both be there. The arc still draws
+     * the slice and still carries the animation, and a closed path traces the same
+     * wedge beside it for anything that needs a boundary. Nothing about the donut
+     * changed; something was added next to it. See `renderEdge` on the tier below
+     * for why the dash could not simply be replaced.
+     *
+     * The value that stays refused is `ghost`, which on a ring is a chart with no
+     * slices.
+     */
+    emphasis?: 'outlined' | 'solid' | 'subtle';
+    /**
+     * What the ring is made of.
+     *
+     * `glass` lets the page read through the slices, for a chart sitting on a
+     * surface that is itself translucent: a glass card with an opaque ring on it is
+     * the two-designs-sharing-a-window failure a material policy exists to stop.
+     * The track keeps its fill, a see-through groove being a missing one.
+     *
+     * The strength is the theme's, scaled by `--helix-material-opacity`.
+     *
+     * **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';
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-donut-chart': HelixDonutChart;
+    }
+}

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

@@ -0,0 +1,76 @@
+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 { HelixHeadlessDonutChart } from '@fusion.dev/helix-headless/donut-chart';
+import { property } from 'lit/decorators.js';
+import { styles as seriesStyles } from '../../shared/chart/series.css.js';
+import { styles } from './donut-chart-root.css.js';
+import '../../tooltip/index.js';
+/**
+ * @summary Parts of a whole as a ring, read from a table.
+ *
+ * @description
+ * The slices take the series palette in order, so a legend beside it maps the
+ * same twenty-four.
+ *
+ * The ring starts at twelve o'clock, which is a rotation applied here rather
+ * than arithmetic done below: where a reader expects the first slice to begin
+ * is a fact about the picture, not about the numbers.
+ *
+ * A track is drawn under the slices, so a ring whose values do not fill it
+ * still reads as a ring with a gap rather than as a broken arc.
+ *
+ * **How thick the ring is drawn is `hole`, not a CSS hook.** It was
+ * `--donut-chart-thickness`, and the stroke's width and the ring's radius have
+ * to agree: the outer edge is `r + width / 2`, so setting one in CSS and
+ * deriving the other in markup gives a drawing that is wrong in both. Measured
+ * with the hook still in place, every ring came out twelve units thick whatever
+ * its `hole`, so a pie was a small ring with a hole in it and `large` was drawn
+ * larger than the default.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category charts
+ * @groups charts
+ * @aliases Pie Chart, Ring Chart, Share Chart
+ * @documentation https://helix.fusion.dev/components/donut-chart
+ *
+ * @cssproperty --donut-chart-edge-stroke - Thickness of the slice boundary under `outlined`.
+ * @cssproperty --donut-chart-size - Width and height of the ring.
+ * @cssproperty --donut-chart-track-color - Color of the ring under the slices.
+ */
+let HelixDonutChart = class HelixDonutChart extends HelixHeadlessDonutChart {
+    /**
+     * **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 { this.tier = 'helix-'; }
+    static { this.styles = [seriesStyles, styles]; }
+};
+__decorate([
+    property({ reflect: true })
+], HelixDonutChart.prototype, "emphasis", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixDonutChart.prototype, "material", void 0);
+HelixDonutChart = __decorate([
+    customElement('helix-donut-chart')
+], HelixDonutChart);
+export { HelixDonutChart };

package/dist/drawer/index.d.ts

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

package/dist/drawer/index.js

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

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

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