@fusion.dev/helix 0.0.0-dev

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

@@ -0,0 +1,78 @@
+import { HelixHeadlessSplitter } from '@fusion.dev/helix-headless/splitter';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary Two panes and a divider the reader can move.
+ *
+ * @description
+ * The divider is a line to look at and a box to hit, and they are different
+ * sizes. Drawn at the border's own width it is a one pixel pointer target, which
+ * is the fault every hand-rolled splitter has; the line is a border and the
+ * target is the box around it.
+ *
+ * It lights on hover before it is touched, because a hairline says nothing about
+ * being movable, and the whole target lights rather than the line, so the thing
+ * that answers the pointer is the thing that changed.
+ *
+ * Both panes scroll and both have their minimum size taken off them. A flex
+ * item's floor is its content, so a pane holding anything scrollable would
+ * otherwise refuse to go below it: the divider would stop at a width nobody
+ * asked for and nothing would say why.
+ *
+ * The corner where a nested splitter crosses is twice the divider's target,
+ * because it is aimed at as a point rather than a line. It draws nothing of its
+ * own: the `move` cursor already says what it is, at the moment a reader is on
+ * it. A ring on focus is the exception, since with nothing drawn there would
+ * otherwise be no way to see where the keyboard is.
+ *
+ * A divider stays lit for as long as it is moving, which `:hover` cannot say on
+ * its own: a drag captures the pointer, and a corner moves the nested divider
+ * while the reader is nowhere near it. It goes primary while it moves rather
+ * than merely darker, because hover is a question and a drag is an answer, and
+ * because a corner moving two dividers at once needs the pair to read as one
+ * gesture.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category layout
+ * @aliases SplitPane, Resizable, SplitView
+ * @documentation https://helix.fusion.dev/components/splitter
+ *
+ * @csspart corner - The handle where a nested splitter's divider crosses this one.
+ * @csspart end - The box holding the second.
+ * @csspart separator - The divider itself.
+ * @csspart start - The box holding the first pane.
+ *
+ * @cssproperty --splitter-color - The line between the panes.
+ * @cssproperty --splitter-corner - How wide the handle at a crossing is.
+ * @cssproperty --splitter-drag-color - The line while it is being moved.
+ * @cssproperty --splitter-grip-color - The grip beside the line, once it is shown.
+ * @cssproperty --splitter-grip-length - How far the grip runs along the divider.
+ * @cssproperty --splitter-hover-color - The target under the pointer.
+ * @cssproperty --splitter-target - How wide the draggable box is.
+ */
+export declare class HelixSplitter extends HelixHeadlessSplitter {
+    /**
+     * Whether the divider carries a grip.
+     *
+     * - `line` is the divider alone, for a splitter the reader already knows is
+     *   one: an editor, a mail client, anything they open every day.
+     * - `grip` adds a short capsule beside the line, for the first encounter. A
+     *   hairline between two panels is a border until something says otherwise,
+     *   and at rest the only thing saying otherwise is a cursor that appears once
+     *   the pointer is already on it.
+     *
+     * `grip` rather than `handle`, which this component has already spent on the
+     * corner: that is a box the reader grabs, and this is a mark that says the
+     * line can be grabbed. The grip adds no hit area of its own.
+     *
+     * Both are writable, so a generated page can say which it means rather than
+     * relying on the absence of an attribute.
+     */
+    variant?: 'grip' | 'line';
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-splitter': HelixSplitter;
+    }
+}

package/dist/splitter/root/splitter-root.js

@@ -0,0 +1,70 @@
+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 { HelixHeadlessSplitter } from '@fusion.dev/helix-headless/splitter';
+import { property } from 'lit/decorators.js';
+import { styles } from './splitter-root.css.js';
+/**
+ * @summary Two panes and a divider the reader can move.
+ *
+ * @description
+ * The divider is a line to look at and a box to hit, and they are different
+ * sizes. Drawn at the border's own width it is a one pixel pointer target, which
+ * is the fault every hand-rolled splitter has; the line is a border and the
+ * target is the box around it.
+ *
+ * It lights on hover before it is touched, because a hairline says nothing about
+ * being movable, and the whole target lights rather than the line, so the thing
+ * that answers the pointer is the thing that changed.
+ *
+ * Both panes scroll and both have their minimum size taken off them. A flex
+ * item's floor is its content, so a pane holding anything scrollable would
+ * otherwise refuse to go below it: the divider would stop at a width nobody
+ * asked for and nothing would say why.
+ *
+ * The corner where a nested splitter crosses is twice the divider's target,
+ * because it is aimed at as a point rather than a line. It draws nothing of its
+ * own: the `move` cursor already says what it is, at the moment a reader is on
+ * it. A ring on focus is the exception, since with nothing drawn there would
+ * otherwise be no way to see where the keyboard is.
+ *
+ * A divider stays lit for as long as it is moving, which `:hover` cannot say on
+ * its own: a drag captures the pointer, and a corner moves the nested divider
+ * while the reader is nowhere near it. It goes primary while it moves rather
+ * than merely darker, because hover is a question and a drag is an answer, and
+ * because a corner moving two dividers at once needs the pair to read as one
+ * gesture.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category layout
+ * @aliases SplitPane, Resizable, SplitView
+ * @documentation https://helix.fusion.dev/components/splitter
+ *
+ * @csspart corner - The handle where a nested splitter's divider crosses this one.
+ * @csspart end - The box holding the second.
+ * @csspart separator - The divider itself.
+ * @csspart start - The box holding the first pane.
+ *
+ * @cssproperty --splitter-color - The line between the panes.
+ * @cssproperty --splitter-corner - How wide the handle at a crossing is.
+ * @cssproperty --splitter-drag-color - The line while it is being moved.
+ * @cssproperty --splitter-grip-color - The grip beside the line, once it is shown.
+ * @cssproperty --splitter-grip-length - How far the grip runs along the divider.
+ * @cssproperty --splitter-hover-color - The target under the pointer.
+ * @cssproperty --splitter-target - How wide the draggable box is.
+ */
+let HelixSplitter = class HelixSplitter extends HelixHeadlessSplitter {
+    static { this.styles = styles; }
+};
+__decorate([
+    property({ reflect: true })
+], HelixSplitter.prototype, "variant", void 0);
+HelixSplitter = __decorate([
+    customElement('helix-splitter')
+], HelixSplitter);
+export { HelixSplitter };

package/dist/stat/group/stat-group.css.d.ts

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

package/dist/stat/group/stat-group.css.js

@@ -0,0 +1,12 @@
+// Generated from src/stat/group/stat-group.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+display: flex;
+flex-wrap: wrap;
+gap: var(--stat-group-gap, var(--helix-space-2xl));
+}
+
+:host([divided]) ::slotted(*:not(:first-child)) {
+border-inline-start: var(--helix-border-thin) solid var(--helix-color-border);
+padding-inline-start: var(--stat-group-gap, var(--helix-space-2xl));
+}`);

package/dist/stat/group/stat-group.d.ts

@@ -0,0 +1,30 @@
+import { HelixHeadlessStatGroup } from '@fusion.dev/helix-headless/stat';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary A row of related measurements.
+ *
+ * @description
+ * Wraps rather than scrolls, and each figure keeps its own width instead of
+ * every one taking an equal share: a set of figures is read by comparing them,
+ * and equal columns make a four-digit number and a two-digit one look like the
+ * same quantity.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @aliases Metrics, KPIs, Figures
+ * @documentation https://helix.fusion.dev/components/stat
+ *
+ * @cssproperty --stat-group-gap - Space between figures.
+ */
+export declare class HelixStatGroup extends HelixHeadlessStatGroup {
+    /**
+     * Whether the figures are separated by a rule as well as by space.
+     */
+    divided: boolean;
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-stat-group': HelixStatGroup;
+    }
+}

package/dist/stat/group/stat-group.js

@@ -0,0 +1,43 @@
+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 { HelixHeadlessStatGroup } from '@fusion.dev/helix-headless/stat';
+import { property } from 'lit/decorators.js';
+import { styles } from './stat-group.css.js';
+/**
+ * @summary A row of related measurements.
+ *
+ * @description
+ * Wraps rather than scrolls, and each figure keeps its own width instead of
+ * every one taking an equal share: a set of figures is read by comparing them,
+ * and equal columns make a four-digit number and a two-digit one look like the
+ * same quantity.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @aliases Metrics, KPIs, Figures
+ * @documentation https://helix.fusion.dev/components/stat
+ *
+ * @cssproperty --stat-group-gap - Space between figures.
+ */
+let HelixStatGroup = class HelixStatGroup extends HelixHeadlessStatGroup {
+    constructor() {
+        super(...arguments);
+        /**
+         * Whether the figures are separated by a rule as well as by space.
+         */
+        this.divided = false;
+    }
+    static { this.styles = styles; }
+};
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixStatGroup.prototype, "divided", void 0);
+HelixStatGroup = __decorate([
+    customElement('helix-stat-group')
+], HelixStatGroup);
+export { HelixStatGroup };

package/dist/stat/index.d.ts

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

package/dist/stat/index.js

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

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

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

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

@@ -0,0 +1,60 @@
+// Generated from src/stat/root/stat-root.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+
+align-content: start;
+
+align-items: baseline;
+display: grid;
+gap: var(--helix-space-2xs);
+grid-template-columns: auto 1fr;
+}
+
+slot[name="label"]::slotted(*) {
+color: var(--helix-color-foreground-muted);
+font-size: calc(var(--helix-text-xs) / var(--helix-text-md) * 1em);
+font-weight: var(--helix-weight-medium);
+grid-column: 1 / -1;
+letter-spacing: var(--helix-tracking-wide);
+}
+
+slot:not([name]) {
+color: var(--helix-color-foreground);
+font-family: var(--helix-font-display);
+font-size: var(--stat-value-size, calc(var(--helix-text-3xl) / var(--helix-text-md) * 1em));
+font-weight: var(--helix-weight-semibold);
+letter-spacing: var(--helix-tracking-tight);
+line-height: var(--helix-leading-tight);
+}
+
+slot[name="unit"]::slotted(*) {
+color: var(--helix-color-foreground-muted);
+font-size: calc(var(--helix-text-md) / var(--helix-text-md) * 1em);
+font-weight: var(--helix-weight-medium);
+}
+
+:host([direction="column-reverse"]) slot[name="label"]::slotted(*) {
+order: 1;
+}
+
+:host([direction="row"]),
+:host([direction="row-reverse"]) {
+align-items: baseline;
+display: flex;
+gap: var(--helix-space-xs);
+}
+
+:host([direction="row"]) slot[name="label"]::slotted(*),
+:host([direction="row-reverse"]) slot[name="label"]::slotted(*) {
+grid-column: auto;
+}
+
+:host([direction="row-reverse"]) slot[name="label"] {
+order: 1;
+}
+
+@media print {
+:host {
+box-shadow: none;
+}
+}`);

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

@@ -0,0 +1,27 @@
+import { HelixHeadlessStat } from '@fusion.dev/helix-headless/stat';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary One measurement, with the word for what it measures.
+ *
+ * @description
+ * The value is set on the display face at a size the type scale does not reach,
+ * because a figure is the one place on a page where the number is the design.
+ * The label sits above it in the label ramp, quiet and wide-tracked, so the
+ * pair reads as one object rather than as two lines of text.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category data
+ * @aliases Metric, KPI, Figure
+ * @documentation https://helix.fusion.dev/components/stat
+ *
+ * @cssproperty --stat-value-size - Size of the figure.
+ */
+export declare class HelixStat extends HelixHeadlessStat {
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-stat': HelixStat;
+    }
+}

package/dist/stat/root/stat-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 { HelixHeadlessStat } from '@fusion.dev/helix-headless/stat';
+import { styles } from './stat-root.css.js';
+/**
+ * @summary One measurement, with the word for what it measures.
+ *
+ * @description
+ * The value is set on the display face at a size the type scale does not reach,
+ * because a figure is the one place on a page where the number is the design.
+ * The label sits above it in the label ramp, quiet and wide-tracked, so the
+ * pair reads as one object rather than as two lines of text.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category data
+ * @aliases Metric, KPI, Figure
+ * @documentation https://helix.fusion.dev/components/stat
+ *
+ * @cssproperty --stat-value-size - Size of the figure.
+ */
+let HelixStat = class HelixStat extends HelixHeadlessStat {
+    static { this.styles = styles; }
+};
+HelixStat = __decorate([
+    customElement('helix-stat')
+], HelixStat);
+export { HelixStat };

package/dist/steps/index.d.ts

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

package/dist/steps/index.js

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

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

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

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

@@ -0,0 +1,94 @@
+// Generated from src/steps/root/steps-root.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+counter-reset: helix-step;
+display: flex;
+gap: var(--steps-gap, var(--helix-space-md));
+
+--_steps-m: var(--steps-marker-size, var(--helix-size-icon));
+--_steps-mark-box: var(--_steps-m);
+
+--_steps-connector-inset: var(--steps-connector-inset, var(--helix-space-2xs));
+--_steps-columns: minmax(0, 1fr);
+--_steps-marker-column: 1;
+--_steps-marker-justify: center;
+--_steps-body-column: 1;
+--_steps-body-row: 2;
+--_steps-body-align: center;
+--_steps-row-gap: var(--helix-space-xs);
+--_steps-content: none;
+
+--_steps-lead-inline-start: calc(var(--steps-gap, var(--helix-space-md)) / -2);
+--_steps-lead-inline-size: calc(
+50% +
+var(--steps-gap, var(--helix-space-md)) /
+2 -
+var(--_steps-mark-box) /
+2 -
+var(--_steps-connector-inset)
+);
+--_steps-lead-block-start: calc(var(--_steps-mark-box) / 2);
+--_steps-lead-block-size: var(--helix-border-thin);
+--_steps-trail-inline-start: calc(
+50% +
+var(--_steps-mark-box) /
+2 +
+var(--_steps-connector-inset)
+);
+--_steps-trail-inline-size: calc(
+50% +
+var(--steps-gap, var(--helix-space-md)) /
+2 -
+var(--_steps-mark-box) /
+2 -
+var(--_steps-connector-inset)
+);
+--_steps-trail-block-start: calc(var(--_steps-mark-box) / 2);
+--_steps-trail-block-size: var(--helix-border-thin);
+}
+
+:host(:not([orientation="vertical"])) ::slotted(*) {
+flex: 1 1 0;
+min-inline-size: 0;
+}
+
+:host([orientation="vertical"]) {
+flex-direction: column;
+
+--_steps-mark-box: var(--helix-size-control-tight);
+--_steps-columns: auto minmax(0, 1fr);
+--_steps-marker-justify: start;
+--_steps-body-column: 2;
+--_steps-body-row: 1;
+--_steps-body-align: start;
+--_steps-row-gap: var(--helix-space-2xs);
+--_steps-content: grid;
+
+--_steps-lead-inline-start: calc(var(--_steps-mark-box) / 2);
+--_steps-lead-inline-size: var(--helix-border-thin);
+--_steps-lead-block-start: calc(var(--steps-gap, var(--helix-space-md)) / -2);
+--_steps-lead-block-size: calc(var(--steps-gap, var(--helix-space-md)) / 2);
+--_steps-trail-inline-start: calc(var(--_steps-mark-box) / 2);
+--_steps-trail-inline-size: var(--helix-border-thin);
+--_steps-trail-block-start: var(--_steps-mark-box);
+--_steps-trail-block-size: calc(
+100% -
+var(--_steps-mark-box) +
+var(--steps-gap, var(--helix-space-md)) /
+2
+);
+}
+
+:host([variant="numeric"]) {
+--_steps-mark: none;
+--_steps-count: counter(helix-step);
+--_steps-marker-color: var(--helix-color-foreground-subtle);
+--_steps-ink-complete: var(--helix-color-foreground-muted);
+--_steps-ink-current: var(--helix-color-foreground);
+}
+
+@media print {
+:host {
+box-shadow: none;
+}
+}`);

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

@@ -0,0 +1,36 @@
+import { HelixHeadlessSteps } from '@fusion.dev/helix-headless/steps';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary A sequence of stages, and where the reader is in it.
+ *
+ * @description
+ * The numbering is a CSS counter rather than a property, so a step's position
+ * is drawn by the browser at layout and is right in the server's markup with no
+ * script involved. Reordering the steps renumbers them; nothing has to be told.
+ *
+ * A step's name is a `helix-button`, so what it looks like under the pointer,
+ * with focus, and when refused are Button's decisions and Button's hooks. There
+ * is no `--steps-hover-color`: `--button-background-color` is that hook, and a
+ * second name for it here would be a second thing to keep in step.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category navigation
+ * @aliases Stepper, Wizard, Progress steps
+ * @documentation https://helix.fusion.dev/components/steps
+ *
+ * @cssproperty --steps-complete-color - The mark on a finished step.
+ * @cssproperty --steps-connector-color - The rule running through the steps.
+ * @cssproperty --steps-connector-inset - Air either side of a mark, before the rail.
+ * @cssproperty --steps-current-color - The mark on the current step.
+ * @cssproperty --steps-gap - Space between one step and the next.
+ * @cssproperty --steps-marker-size - Size of the mark, glyph or digit.
+ */
+export declare class HelixSteps extends HelixHeadlessSteps {
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-steps': HelixSteps;
+    }
+}

package/dist/steps/root/steps-root.js

@@ -0,0 +1,42 @@
+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 { HelixHeadlessSteps } from '@fusion.dev/helix-headless/steps';
+import { styles } from './steps-root.css.js';
+/**
+ * @summary A sequence of stages, and where the reader is in it.
+ *
+ * @description
+ * The numbering is a CSS counter rather than a property, so a step's position
+ * is drawn by the browser at layout and is right in the server's markup with no
+ * script involved. Reordering the steps renumbers them; nothing has to be told.
+ *
+ * A step's name is a `helix-button`, so what it looks like under the pointer,
+ * with focus, and when refused are Button's decisions and Button's hooks. There
+ * is no `--steps-hover-color`: `--button-background-color` is that hook, and a
+ * second name for it here would be a second thing to keep in step.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category navigation
+ * @aliases Stepper, Wizard, Progress steps
+ * @documentation https://helix.fusion.dev/components/steps
+ *
+ * @cssproperty --steps-complete-color - The mark on a finished step.
+ * @cssproperty --steps-connector-color - The rule running through the steps.
+ * @cssproperty --steps-connector-inset - Air either side of a mark, before the rail.
+ * @cssproperty --steps-current-color - The mark on the current step.
+ * @cssproperty --steps-gap - Space between one step and the next.
+ * @cssproperty --steps-marker-size - Size of the mark, glyph or digit.
+ */
+let HelixSteps = class HelixSteps extends HelixHeadlessSteps {
+    static { this.styles = styles; }
+};
+HelixSteps = __decorate([
+    customElement('helix-steps')
+], HelixSteps);
+export { HelixSteps };

package/dist/steps/step/step.css.d.ts

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