@fusion.dev/helix 0.23.0 → 0.24.0

package/dist/sandbox/toolbar/sandbox-toolbar.css.js

@@ -2,14 +2,20 @@ import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
 
 --helix-size-checkbox: var(--helix-size-checkbox-sm);
+--helix-size-checkbox-loose: calc(var(--helix-size-checkbox) * 1.2);
+--helix-size-checkbox-tight: calc(var(--helix-size-checkbox) * 0.8);
 --helix-size-icon: var(--helix-size-icon-sm);
+--helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);
+--helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);
 --helix-size-control: var(--helix-size-control-sm);
+--helix-size-control-loose: calc(var(--helix-size-control) * 1.2);
+--helix-size-control-tight: calc(var(--helix-size-control) * 0.8);
 --helix-size-tag: var(--helix-size-tag-sm);
 
 align-items: center;
 background-color: var(--helix-color-background);
 
-block-size: var(--sandbox-toolbar-size, var(--helix-size-control-loose));
+block-size: var(--sandbox-toolbar-size, var(--helix-size-control-lg));
 
 border-block-end: var(--helix-border-thin) solid var(--helix-color-border);
 display: flex;

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

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

package/dist/scatter-chart/index.js

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

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

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

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

@@ -0,0 +1,138 @@
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+column-gap: var(--helix-space-xs);
+container-type: inline-size;
+display: grid;
+grid-template-areas:
+"y-name ."
+"y-axis plot"
+". x-axis"
+". x-name";
+grid-template-columns: auto minmax(0, 1fr);
+position: relative;
+row-gap: var(--scatter-chart-gap, var(--helix-space-2xs));
+}
+
+[part="plot"] {
+block-size: var(--scatter-chart-block-size, 14em);
+cursor: crosshair;
+grid-area: plot;
+position: relative;
+}
+
+[part="plot"] svg {
+block-size: 100%;
+inline-size: 100%;
+overflow: visible;
+}
+
+[part="gridline"] {
+stroke: var(--scatter-chart-gridline-color, var(--helix-color-border));
+stroke-width: var(--helix-border-thin);
+vector-effect: non-scaling-stroke;
+}
+
+[part="point"] {
+background-color: var(--chart-series);
+block-size: var(--scatter-chart-point-size, 8px);
+border-radius: var(--helix-radii-full);
+box-shadow: 0 0 0 var(--helix-border-thin)
+var(--scatter-chart-point-ring-color, var(--helix-color-background));
+inline-size: var(--scatter-chart-point-size, 8px);
+inset-block-start: var(--chart-point-y);
+inset-inline-start: var(--chart-point-x);
+opacity: var(--scatter-chart-point-opacity, 0.8);
+pointer-events: none;
+position: absolute;
+transition:
+inset-block-start var(--helix-duration-normal) var(--helix-easing-decelerate),
+inset-inline-start var(--helix-duration-normal) var(--helix-easing-decelerate),
+scale var(--helix-duration-fast) var(--helix-easing-decelerate);
+translate: -50% -50%;
+}
+
+[part="point"][data-active] {
+opacity: 1;
+scale: 1.5;
+}
+
+[part="x-axis"],
+[part="y-axis"] {
+display: grid;
+}
+
+[part="x-axis"] {
+grid-area: x-axis;
+}
+
+[part="y-axis"] {
+grid-area: y-axis;
+}
+
+[part="x-tick"],
+[part="y-tick"] {
+color: var(--helix-color-foreground-muted);
+font-size: var(--helix-text-xs);
+font-variant-numeric: tabular-nums;
+grid-area: 1 / 1;
+line-height: 1;
+position: relative;
+white-space: nowrap;
+}
+
+[part="x-tick"] {
+inset-inline-start: var(--chart-tick);
+justify-self: start;
+translate: -50% 0;
+}
+
+[part="y-tick"] {
+align-self: start;
+inset-block-start: var(--chart-tick);
+justify-self: end;
+translate: 0 -50%;
+}
+
+@container (inline-size < 30rem) {
+[part="x-tick"]:nth-last-child(even) {
+visibility: hidden;
+}
+}
+
+[part="x-name"],
+[part="y-name"] {
+color: var(--helix-color-foreground-muted);
+font-size: var(--helix-text-xs);
+font-weight: var(--helix-weight-medium);
+}
+
+[part="x-name"] {
+grid-area: x-name;
+justify-self: end;
+}
+
+[part="y-name"] {
+grid-area: y-name;
+}
+
+[part="summary"] {
+block-size: 1px;
+clip-path: inset(50%);
+inline-size: 1px;
+margin: var(--helix-space-none);
+overflow: hidden;
+position: absolute;
+white-space: nowrap;
+}
+
+@starting-style {
+[part="point"] {
+opacity: 0;
+}
+}
+
+@media print {
+:host {
+print-color-adjust: exact;
+}
+}`);

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

@@ -0,0 +1,38 @@
+import { HelixHeadlessScatterChart } from '@fusion.dev/helix-headless/scatter-chart';
+import type { CSSResultGroup } from 'lit';
+import '../../tooltip/index.js';
+/**
+ * @summary Whether two measures move together, one point per row.
+ *
+ * @description
+ * The points take the series palette in order, so a table with one column
+ * measured up is series one and a table with three is the first three.
+ *
+ * Each point has a ring of the page around it and stops short of opaque, so a
+ * dense cluster reads as dense rather than as one blot, and two points that
+ * overlap each keep their edge.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category charts
+ * @groups charts
+ * @aliases Scatter Plot, XY Chart, Correlation Chart, Dot Plot
+ * @documentation https://helix.fusion.dev/components/scatter-chart
+ *
+ * @cssproperty --scatter-chart-block-size - Height of the drawing.
+ * @cssproperty --scatter-chart-gap - Space between the drawing and its axes.
+ * @cssproperty --scatter-chart-gridline-color - One rule across the plot, under `gridlines`.
+ * @cssproperty --scatter-chart-point-opacity - How much of its color a point shows, so a cluster reads darker where it is denser.
+ * @cssproperty --scatter-chart-point-ring-color - The ring around each point, which is the page's color unless the chart sits on something else.
+ * @cssproperty --scatter-chart-point-size - Diameter of a point.
+ */
+export declare class HelixScatterChart extends HelixHeadlessScatterChart {
+    /** The styled tier, so the tooltip this renders is the styled one. */
+    static tier: string;
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-scatter-chart': HelixScatterChart;
+    }
+}

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

@@ -0,0 +1,20 @@
+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 { HelixHeadlessScatterChart } from '@fusion.dev/helix-headless/scatter-chart';
+import { styles as seriesStyles } from '../../shared/chart/series.css.js';
+import { styles as tooltipStyles } from '../../shared/chart/tooltip.css.js';
+import { styles } from './scatter-chart-root.css.js';
+import '../../tooltip/index.js';
+let HelixScatterChart = class HelixScatterChart extends HelixHeadlessScatterChart {
+    static { this.tier = 'helix-'; }
+    static { this.styles = [seriesStyles, tooltipStyles, styles]; }
+};
+HelixScatterChart = __decorate([
+    customElement('helix-scatter-chart')
+], HelixScatterChart);
+export { HelixScatterChart };

package/dist/shared/chart/tooltip.css.d.ts

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

package/dist/shared/chart/tooltip.css.js

@@ -0,0 +1,141 @@
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`[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(--chart-series-1);
+}
+
+[part="tooltip-cell"][data-series="2"]::before {
+background-color: var(--chart-series-2);
+}
+
+[part="tooltip-cell"][data-series="3"]::before {
+background-color: var(--chart-series-3);
+}
+
+[part="tooltip-cell"][data-series="4"]::before {
+background-color: var(--chart-series-4);
+}
+
+[part="tooltip-cell"][data-series="5"]::before {
+background-color: var(--chart-series-5);
+}
+
+[part="tooltip-cell"][data-series="6"]::before {
+background-color: var(--chart-series-6);
+}
+
+[part="tooltip-cell"][data-series="7"]::before {
+background-color: var(--chart-series-7);
+}
+
+[part="tooltip-cell"][data-series="8"]::before {
+background-color: var(--chart-series-8);
+}
+
+[part="tooltip-cell"][data-series="9"]::before {
+background-color: var(--chart-series-9);
+}
+
+[part="tooltip-cell"][data-series="10"]::before {
+background-color: var(--chart-series-10);
+}
+
+[part="tooltip-cell"][data-series="11"]::before {
+background-color: var(--chart-series-11);
+}
+
+[part="tooltip-cell"][data-series="12"]::before {
+background-color: var(--chart-series-12);
+}
+
+[part="tooltip-cell"][data-series="13"]::before {
+background-color: var(--chart-series-13);
+}
+
+[part="tooltip-cell"][data-series="14"]::before {
+background-color: var(--chart-series-14);
+}
+
+[part="tooltip-cell"][data-series="15"]::before {
+background-color: var(--chart-series-15);
+}
+
+[part="tooltip-cell"][data-series="16"]::before {
+background-color: var(--chart-series-16);
+}
+
+[part="tooltip-cell"][data-series="17"]::before {
+background-color: var(--chart-series-17);
+}
+
+[part="tooltip-cell"][data-series="18"]::before {
+background-color: var(--chart-series-18);
+}
+
+[part="tooltip-cell"][data-series="19"]::before {
+background-color: var(--chart-series-19);
+}
+
+[part="tooltip-cell"][data-series="20"]::before {
+background-color: var(--chart-series-20);
+}
+
+[part="tooltip-cell"][data-series="21"]::before {
+background-color: var(--chart-series-21);
+}
+
+[part="tooltip-cell"][data-series="22"]::before {
+background-color: var(--chart-series-22);
+}
+
+[part="tooltip-cell"][data-series="23"]::before {
+background-color: var(--chart-series-23);
+}
+
+[part="tooltip-cell"][data-series="24"]::before {
+background-color: var(--chart-series-24);
+}`);

package/dist/skip-link/index.d.ts

@@ -0,0 +1 @@
+export { HelixSkipLink } from './root/skip-link-root.js';

package/dist/skip-link/index.js

@@ -0,0 +1 @@
+export { HelixSkipLink } from './root/skip-link-root.js';

package/dist/skip-link/root/skip-link-root.css.d.ts

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

package/dist/skip-link/root/skip-link-root.css.js

@@ -0,0 +1,36 @@
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+display: block;
+inset-block-start: var(--helix-space-sm);
+inset-inline-start: var(--helix-space-sm);
+position: fixed;
+z-index: var(--helix-layer-overlay);
+}
+
+[part="link"] {
+background-color: var(--helix-color-surface-inverse);
+border: var(--skip-link-border-width, var(--helix-border-floating)) solid
+var(--skip-link-border-color, var(--helix-color-border));
+border-radius: var(--helix-radii-sm);
+box-shadow: var(--skip-link-shadow, var(--helix-shadow-floating));
+color: var(--helix-color-foreground-inverse);
+display: inline-block;
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-sm);
+font-weight: var(--helix-weight-medium);
+line-height: var(--helix-leading-normal);
+padding-block: var(--helix-space-sm);
+padding-inline: var(--helix-space-md);
+text-decoration: none;
+}
+
+[part="link"]:focus-visible {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: var(--helix-size-focus-offset);
+}
+
+@media print {
+:host {
+display: none;
+}
+}`);

package/dist/skip-link/root/skip-link-root.d.ts

@@ -0,0 +1,42 @@
+import { HelixHeadlessSkipLink } from '@fusion.dev/helix-headless/skip-link';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary The first stop on a page, which moves the reader past everything
+ * repeated on every page.
+ *
+ * @description
+ * Out of sight until the keyboard reaches it, then in the corner of the
+ * viewport and impossible to miss. The hiding is the base layer's visually
+ * hidden helper, so the link stays in the tab order and in the accessibility
+ * tree while nobody can see it; `display: none` would have taken it out of
+ * both. The reveal is this sheet's.
+ *
+ * **Fixed to the viewport rather than placed where it sits in the document**,
+ * because it is first in the document and the page may already be scrolled
+ * when focus arrives, by a restored position or an anchor in the address. A
+ * link revealed above the top of the screen is revealed to nobody.
+ *
+ * Put it first inside `<body>`, before the header, and give the content
+ * region the id its `href` names.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category navigation
+ * @documentation https://helix.fusion.dev/components/skip-link
+ *
+ * @cssproperty --skip-link-border-color - Color of the revealed link's edge.
+ * @cssproperty --skip-link-border-width - Width of the revealed link's edge. Follows
+ *   `--helix-border-floating`, which is `0`, so the link is told apart by its lift unless a
+ *   theme says otherwise.
+ * @cssproperty --skip-link-shadow - Lift under the revealed link. Follows
+ *   `--helix-shadow-floating`, since it sits over whatever the page has at its corner.
+ */
+export declare class HelixSkipLink extends HelixHeadlessSkipLink {
+    static tier: string;
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-skip-link': HelixSkipLink;
+    }
+}

package/dist/skip-link/root/skip-link-root.js

@@ -0,0 +1,17 @@
+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 { HelixHeadlessSkipLink } from '@fusion.dev/helix-headless/skip-link';
+import { styles } from './skip-link-root.css.js';
+let HelixSkipLink = class HelixSkipLink extends HelixHeadlessSkipLink {
+    static { this.tier = 'helix-'; }
+    static { this.styles = styles; }
+};
+HelixSkipLink = __decorate([
+    customElement('helix-skip-link')
+], HelixSkipLink);
+export { HelixSkipLink };

package/dist/steps/step/step.css.js

@@ -105,7 +105,11 @@ z-index: 1;
 
 [part="label"] {
 --helix-size-control: var(--helix-size-control-sm);
+--helix-size-control-loose: calc(var(--helix-size-control) * 1.2);
+--helix-size-control-tight: calc(var(--helix-size-control) * 0.8);
 --helix-size-icon: var(--helix-size-icon-sm);
+--helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);
+--helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);
 --helix-space-control: var(--_step-inset);
 --helix-text-control: var(--helix-text-sm);
 --button-foreground-color: var(--helix-color-foreground-muted);

package/dist/table/column/table-column.css.js

@@ -17,4 +17,70 @@ font-weight: var(--helix-weight-semibold);
 min-block-size: var(--helix-size-control-loose);
 min-inline-size: 0;
 padding-inline-end: var(--helix-space-md);
+}
+
+[part="column"] {
+position: relative;
+}
+
+[part="sort"] {
+all: unset;
+align-items: center;
+box-sizing: border-box;
+cursor: pointer;
+display: inline-flex;
+flex: 1;
+gap: var(--helix-space-2xs);
+min-inline-size: 0;
+}
+
+[part="sort"]:focus-visible,
+[part="grip"]:focus-visible,
+[part="resizer"]:focus-visible {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: var(--helix-size-focus-offset);
+}
+
+[part="grip"] {
+all: unset;
+align-items: center;
+border-radius: var(--helix-radii-sm);
+box-sizing: border-box;
+color: var(--helix-color-foreground-muted);
+cursor: grab;
+display: inline-flex;
+flex: none;
+margin-inline-end: var(--helix-space-2xs);
+touch-action: none;
+}
+
+[part="grip"]:active {
+cursor: grabbing;
+}
+
+[part="grip-mark"] {
+block-size: 1em;
+inline-size: 1em;
+}
+
+[part="resizer"] {
+cursor: col-resize;
+inline-size: var(--helix-space-sm);
+inset-block: 0;
+inset-inline-end: 0;
+position: absolute;
+touch-action: none;
+}
+
+[part="resizer"]::after {
+border-inline-end: var(--helix-border-thin) solid transparent;
+content: "";
+inset-block: var(--helix-space-xs);
+inset-inline-end: 0;
+position: absolute;
+}
+
+[part="resizer"]:hover::after,
+[part="resizer"]:focus-visible::after {
+border-inline-end-color: var(--helix-color-foreground-muted);
 }`);

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

@@ -46,6 +46,16 @@ export declare class HelixTag extends HelixHeadlessTag {
      *
      * `tone` is semantic color, which is what these are and what `helix-text`
      * already calls them. `helix component`'s `axes` holds the vocabulary.
+     *
+     * **Not all seven are statuses, and `accent` is the one worth saying out
+     * loud**: it is the second emphasis, a rotation off the brand seed rather than
+     * a color of its own, so it stays in relation when somebody rethemes.
+     * `primary` is the seed itself. The four that are statuses are the four
+     * `HelixStatusTone` names, and those are the ones that would carry a glyph
+     * somewhere that draws one.
+     *
+     * `Badge` and `Announcement` take the same seven, all three being a mark that
+     * carries a meaning beside something else.
      */
     tone?: 'accent' | 'danger' | 'info' | 'neutral' | 'primary' | 'success' | 'warning';
     static styles: CSSResultGroup;

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

@@ -27,8 +27,9 @@ import type { CSSResultGroup } from 'lit';
  * the ramp is named, and a page built from it is consistent because there was
  * nothing else to choose.
  *
- * `tone` stays separate, because color carries state rather than typography.
- * Folding it in would mean `caption-danger` and `label-primary` and the rest of
+ * `tone` and `emphasis` stay separate, because color carries state rather than
+ * typography, and what a line means is not how loudly it says it. Folding
+ * either in would mean `caption-danger` and `label-muted` and the rest of the
  * cross product, which is the explosion a named ramp exists to prevent.
  *
  * @since 0.1.0
@@ -49,23 +50,35 @@ export declare class HelixText extends HelixElement {
      */
     as?: 'span' | 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'strong' | 'em' | 'code' | 'label';
     /**
-     * Color role. A separate axis from the type ramp, because color carries
-     * state: folding it in would mean `caption-danger` and the rest of the cross
-     * product.
+     * How loud the text is, beside what it means.
+     *
+     * `muted` is the quiet ink that still has to be read, and `subtle` the
+     * quieter one below it. Two axes because the test says so: a line can be a
+     * danger *and* quiet at once, and a muted danger is what a validation hint
+     * under a field is.
+     *
+     * **With a `tone`, both are that tone's one quiet ink**: the tone's hue at half
+     * its chroma, as readable as the tone. The readable range holds one quiet step
+     * and not two, measured in #124 for the neutral ink, and a tone has less room
+     * there rather than more, so `subtle` on a tone is the same ink as `muted`
+     * rather than a second one that could not be read.
+     *
+     * The resting case is the absent attribute, full strength.
+     */
+    emphasis?: 'muted' | 'subtle';
+    /**
+     * What the text means. A separate axis from the type ramp, because color
+     * carries state: folding it in would mean `caption-danger` and the rest of the
+     * cross product.
      *
      * **There is no `default` value**, and one must not be added: it would match
      * no rule and fall through to the inherited ink, reading as working while
      * saying nothing. The resting case is the absent attribute.
      *
-     * **`muted` and `subtle` are weight rather than meaning and belong on
-     * `emphasis`, which is why this is still off the registry.** Splitting them
-     * out is blocked on the palette rather than on the rename: there is a quiet
-     * step for the neutral ink and none for any other tone, so a muted danger has
-     * nothing to be made of. `primary-subtle` is a tinted *ground* and not a
-     * quiet ink. That is #141's to derive, and until it does, folding the two
-     * halves apart would leave three of the four combinations unsayable.
+     * Weight is not a tone. How loud the text is belongs on `emphasis`, which is
+     * why `muted` and `subtle` moved there.
      */
-    tone?: 'muted' | 'subtle' | 'primary' | 'danger';
+    tone?: 'accent' | 'danger' | 'info' | 'primary' | 'success' | 'warning';
     /**
      * Type treatment.
      *

package/dist/text/root/text-root.js

@@ -32,6 +32,9 @@ let HelixText = class HelixText extends HelixElement {
 __decorate([
     property({ reflect: true })
 ], HelixText.prototype, "as", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixText.prototype, "emphasis", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixText.prototype, "tone", void 0);