@fusion.dev/helix 0.0.0-dev

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

@@ -0,0 +1,122 @@
+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, seriesIndex } from '@fusion.dev/helix-core';
+import { HelixHeadlessBarChart } from '@fusion.dev/helix-headless/bar-chart';
+import { property } from 'lit/decorators.js';
+import { styles as seriesStyles } from '../../shared/chart/series.css.js';
+import { styles } from './bar-chart-root.css.js';
+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.
+ */
+let HelixBarChart = 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 { this.tier = 'helix-'; }
+    /**
+     * 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.
+     */
+    updated(changed) {
+        super.updated(changed);
+        const slots = (list) => new Set((list ?? '')
+            .split(/[\s,]+/)
+            .filter(Boolean)
+            .map((name) => name.toLowerCase())
+            .flatMap((name) => {
+            const at = this.series.findIndex((one) => one.name.trim().toLowerCase() === name);
+            return at < 0 ? [] : [seriesIndex(at)];
+        }));
+        const mark = (bar, name, value) => {
+            if (value) {
+                bar.setAttribute(`data-${name}`, value);
+            }
+            else {
+                bar.removeAttribute(`data-${name}`);
+            }
+        };
+        const outlined = slots(this.outlined);
+        const subtle = slots(this.subtle);
+        const glass = slots(this.glass);
+        for (const bar of this.renderRoot.querySelectorAll('[part="bar"]')) {
+            const at = Number(bar.dataset.series);
+            mark(bar, 'emphasis', outlined.has(at) ? 'outlined' : subtle.has(at) ? 'subtle' : undefined);
+            mark(bar, 'material', glass.has(at) ? 'glass' : undefined);
+        }
+    }
+    static { this.styles = [seriesStyles, styles]; }
+};
+__decorate([
+    property({ reflect: true })
+], HelixBarChart.prototype, "material", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixBarChart.prototype, "wash", void 0);
+__decorate([
+    property()
+], HelixBarChart.prototype, "glass", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixBarChart.prototype, "emphasis", void 0);
+__decorate([
+    property()
+], HelixBarChart.prototype, "outlined", void 0);
+__decorate([
+    property()
+], HelixBarChart.prototype, "subtle", void 0);
+HelixBarChart = __decorate([
+    customElement('helix-bar-chart')
+], HelixBarChart);
+export { HelixBarChart };

package/dist/blockquote/index.d.ts

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

package/dist/blockquote/index.js

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

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

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

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

@@ -0,0 +1,42 @@
+// Generated from src/blockquote/root/blockquote-root.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+display: block;
+}
+
+[part="blockquote"] {
+display: block;
+margin: var(--helix-space-none);
+}
+
+slot:not([name]) {
+
+color: var(--helix-color-foreground-muted);
+font-family: var(--helix-font-display);
+font-size: var(--blockquote-size, var(--helix-text-xl));
+font-weight: var(--helix-weight-medium);
+letter-spacing: var(--helix-tracking-tight);
+line-height: var(--helix-leading-tight);
+}
+
+slot:not([name])::slotted(*) {
+margin: var(--helix-space-none);
+}
+
+[part="attribution"] {
+color: var(--helix-color-foreground-muted);
+font-size: var(--helix-text-sm);
+
+margin-block-start: var(--helix-space-sm);
+}
+
+[part="attribution"][data-empty] {
+display: none;
+}
+
+@media print {
+:host {
+background-color: transparent;
+box-shadow: none;
+}
+}`);

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

@@ -0,0 +1,27 @@
+import { HelixHeadlessBlockquote } from '@fusion.dev/helix-headless/blockquote';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary A passage set off from the prose around it.
+ *
+ * @description
+ * Set larger than body text on the display face, because a pulled quotation is
+ * a change of voice and the type is what says so. No quotation marks are drawn:
+ * the size and the space around it already set the passage apart, and marks on
+ * top of that are the same thing said twice.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category typography
+ * @aliases Pullquote, Citation, Excerpt
+ * @documentation https://helix.fusion.dev/components/blockquote
+ *
+ * @cssproperty --blockquote-size - Size of the quoted passage.
+ */
+export declare class HelixBlockquote extends HelixHeadlessBlockquote {
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-blockquote': HelixBlockquote;
+    }
+}

package/dist/blockquote/root/blockquote-root.js

@@ -0,0 +1,33 @@
+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 { HelixHeadlessBlockquote } from '@fusion.dev/helix-headless/blockquote';
+import { styles } from './blockquote-root.css.js';
+/**
+ * @summary A passage set off from the prose around it.
+ *
+ * @description
+ * Set larger than body text on the display face, because a pulled quotation is
+ * a change of voice and the type is what says so. No quotation marks are drawn:
+ * the size and the space around it already set the passage apart, and marks on
+ * top of that are the same thing said twice.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category typography
+ * @aliases Pullquote, Citation, Excerpt
+ * @documentation https://helix.fusion.dev/components/blockquote
+ *
+ * @cssproperty --blockquote-size - Size of the quoted passage.
+ */
+let HelixBlockquote = class HelixBlockquote extends HelixHeadlessBlockquote {
+    static { this.styles = styles; }
+};
+HelixBlockquote = __decorate([
+    customElement('helix-blockquote')
+], HelixBlockquote);
+export { HelixBlockquote };

package/dist/breadcrumbs/breadcrumb/breadcrumb.css.d.ts

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

package/dist/breadcrumbs/breadcrumb/breadcrumb.css.js

@@ -0,0 +1,109 @@
+// Generated from src/breadcrumbs/breadcrumb/breadcrumb.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+
+--icon-button-size: var(
+--breadcrumbs-control-size,
+calc(var(--helix-text-control) * var(--helix-leading-normal) + var(--helix-space-2xs) * 2)
+);
+
+--button-size: var(
+--breadcrumbs-control-size,
+calc(var(--helix-text-control) * var(--helix-leading-normal) + var(--helix-space-2xs) * 2)
+);
+
+--button-padding-inline: var(--breadcrumbs-control-padding-inline, var(--helix-space-xs));
+
+--button-gap: var(--helix-space-2xs);
+
+align-items: center;
+display: inline-flex;
+gap: var(--breadcrumbs-gap, var(--helix-space-xs));
+}
+
+[part="separator"] {
+color: var(--breadcrumbs-separator-color, var(--helix-color-foreground-subtle));
+display: inline-flex;
+user-select: none;
+}
+
+[part="separator"] svg {
+block-size: 1em;
+inline-size: 1em;
+}
+
+:host(:first-child) [part="separator"] {
+display: none;
+}
+
+::slotted(a) {
+background-color: transparent;
+border-radius: var(--helix-radii-sm);
+padding: var(--helix-space-2xs) var(--helix-space-xs);
+transition: background-color var(--helix-duration-fast) var(--helix-easing-standard);
+}
+
+:host(:first-child) ::slotted(a) {
+margin-inline-start: calc(var(--helix-space-xs) * -1);
+}
+
+::slotted(a:hover) {
+
+background-color: var(
+--breadcrumbs-hover-color,
+color-mix(in oklab, var(--helix-color-foreground) 8%, transparent)
+);
+}
+
+::slotted(a:focus-visible) {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: var(--helix-size-focus-offset);
+}
+
+@media (prefers-reduced-motion: reduce) {
+::slotted(a) {
+transition: none;
+}
+}
+
+:host {
+font-weight: var(--helix-weight-medium);
+}
+
+:host([current]) {
+color: var(--helix-color-foreground);
+}
+
+:host(:dir(rtl)) [part="separator"] svg {
+scale: -1 1;
+}
+
+[part="link"] {
+align-items: center;
+border-radius: var(--helix-radii-sm);
+color: var(--helix-color-foreground-muted);
+display: inline-flex;
+gap: var(--helix-space-2xs);
+padding: var(--helix-space-2xs) var(--helix-space-xs);
+text-decoration: none;
+}
+
+:host(:not([href])) [part="link"] {
+padding-block: var(--helix-space-none);
+}
+
+a[part="link"]:hover {
+background-color: var(
+--breadcrumbs-hover-color,
+color-mix(in oklab, var(--helix-color-foreground) 8%, transparent)
+);
+color: var(--helix-color-foreground);
+}
+
+:host([current]) [part="link"] {
+color: var(--helix-color-foreground);
+}
+
+:host([hidden]) {
+display: none;
+}`);

package/dist/breadcrumbs/breadcrumb/breadcrumb.d.ts

@@ -0,0 +1,38 @@
+import { HelixHeadlessBreadcrumb } from '@fusion.dev/helix-headless/breadcrumbs';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary One step in a breadcrumb trail.
+ *
+ * @description
+ * The separator is hidden on the first item with `:host(:first-child)`, so no
+ * item needs to know its own index and the parent needs no coordination.
+ *
+ * The link carries `data-link="quiet"`, the recipe navigation uses everywhere
+ * else, which is what owns its color. Under the pointer it reads as a subtle
+ * button. That part is styled from in here: the base layer sets color and
+ * text-decoration on an anchor and nothing else, so the outer tree wins those
+ * and leaves box and background to `::slotted`.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @aliases Crumb
+ * @documentation https://helix.fusion.dev/components/breadcrumbs
+ *
+ * @slot - The step: a link, or the text of the current page.
+ * @slot separator - Replaces the chevron shown before this item.
+ *
+ * @csspart separator - The separator preceding the item.
+ *
+ * @cssproperty --breadcrumbs-control-padding-inline - Inline padding of a control slotted into a crumb, matching the steps either side of it.
+ * @cssproperty --breadcrumbs-control-size - How tall a control slotted into a crumb is.
+ * @cssproperty --breadcrumbs-hover-color - Fill behind a step under the pointer.
+ * @cssproperty --breadcrumbs-separator-color - Color of the chevron.
+ */
+export declare class HelixBreadcrumb extends HelixHeadlessBreadcrumb {
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-breadcrumb': HelixBreadcrumb;
+    }
+}

package/dist/breadcrumbs/breadcrumb/breadcrumb.js

@@ -0,0 +1,44 @@
+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 { HelixHeadlessBreadcrumb } from '@fusion.dev/helix-headless/breadcrumbs';
+import { styles } from './breadcrumb.css.js';
+/**
+ * @summary One step in a breadcrumb trail.
+ *
+ * @description
+ * The separator is hidden on the first item with `:host(:first-child)`, so no
+ * item needs to know its own index and the parent needs no coordination.
+ *
+ * The link carries `data-link="quiet"`, the recipe navigation uses everywhere
+ * else, which is what owns its color. Under the pointer it reads as a subtle
+ * button. That part is styled from in here: the base layer sets color and
+ * text-decoration on an anchor and nothing else, so the outer tree wins those
+ * and leaves box and background to `::slotted`.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @aliases Crumb
+ * @documentation https://helix.fusion.dev/components/breadcrumbs
+ *
+ * @slot - The step: a link, or the text of the current page.
+ * @slot separator - Replaces the chevron shown before this item.
+ *
+ * @csspart separator - The separator preceding the item.
+ *
+ * @cssproperty --breadcrumbs-control-padding-inline - Inline padding of a control slotted into a crumb, matching the steps either side of it.
+ * @cssproperty --breadcrumbs-control-size - How tall a control slotted into a crumb is.
+ * @cssproperty --breadcrumbs-hover-color - Fill behind a step under the pointer.
+ * @cssproperty --breadcrumbs-separator-color - Color of the chevron.
+ */
+let HelixBreadcrumb = class HelixBreadcrumb extends HelixHeadlessBreadcrumb {
+    static { this.styles = styles; }
+};
+HelixBreadcrumb = __decorate([
+    customElement('helix-breadcrumb')
+], HelixBreadcrumb);
+export { HelixBreadcrumb };

package/dist/breadcrumbs/index.d.ts

@@ -0,0 +1,2 @@
+export * from './breadcrumb/breadcrumb.js';
+export * from './root/breadcrumbs-root.js';

package/dist/breadcrumbs/index.js

@@ -0,0 +1,2 @@
+export * from './breadcrumb/breadcrumb.js';
+export * from './root/breadcrumbs-root.js';

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

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

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

@@ -0,0 +1,23 @@
+// Generated from src/breadcrumbs/root/breadcrumbs-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"] {
+align-items: center;
+display: flex;
+flex-wrap: wrap;
+font-size: var(--helix-text-sm);
+gap: var(--breadcrumbs-gap, var(--helix-space-xs));
+
+list-style: none;
+margin: var(--helix-space-none);
+padding: var(--helix-space-none);
+}
+
+@media print {
+:host {
+box-shadow: none;
+}
+}`);

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

@@ -0,0 +1,29 @@
+import { HelixHeadlessBreadcrumbs } from '@fusion.dev/helix-headless/breadcrumbs';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary Shows the path to the current page.
+ *
+ * @description
+ * A single wrapping line by default. The trail wraps rather than scrolling,
+ * because a truncated path tells the reader less than a two-line one.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category navigation
+ * @aliases Breadcrumb, Crumbs
+ * @documentation https://helix.fusion.dev/components/breadcrumbs
+ *
+ * @slot - The trail's items, in order from root to current page.
+ *
+ * @csspart list - The ordered list.
+ *
+ * @cssproperty --breadcrumbs-gap - Space between items and separators.
+ */
+export declare class HelixBreadcrumbs extends HelixHeadlessBreadcrumbs {
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-breadcrumbs': HelixBreadcrumbs;
+    }
+}

package/dist/breadcrumbs/root/breadcrumbs-root.js

@@ -0,0 +1,35 @@
+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 { HelixHeadlessBreadcrumbs } from '@fusion.dev/helix-headless/breadcrumbs';
+import { styles } from './breadcrumbs-root.css.js';
+/**
+ * @summary Shows the path to the current page.
+ *
+ * @description
+ * A single wrapping line by default. The trail wraps rather than scrolling,
+ * because a truncated path tells the reader less than a two-line one.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category navigation
+ * @aliases Breadcrumb, Crumbs
+ * @documentation https://helix.fusion.dev/components/breadcrumbs
+ *
+ * @slot - The trail's items, in order from root to current page.
+ *
+ * @csspart list - The ordered list.
+ *
+ * @cssproperty --breadcrumbs-gap - Space between items and separators.
+ */
+let HelixBreadcrumbs = class HelixBreadcrumbs extends HelixHeadlessBreadcrumbs {
+    static { this.styles = styles; }
+};
+HelixBreadcrumbs = __decorate([
+    customElement('helix-breadcrumbs')
+], HelixBreadcrumbs);
+export { HelixBreadcrumbs };

package/dist/button/index.d.ts

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

package/dist/button/index.js

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

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

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