@fusion.dev/helix 0.23.0 → 0.24.1

package/dist/accordion/item/accordion-item.css.js

@@ -70,4 +70,8 @@ display: block;
 line-height: var(--helix-leading-normal);
 padding: var(--accordion-item-padding, var(--helix-space-sm) var(--helix-space-md));
 padding-block-start: 0;
+}
+
+:host([chevron-placement="start"]) [part="content-inner"] > slot {
+margin-inline-start: calc(var(--helix-text-md) + var(--helix-space-xs));
 }`);

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

@@ -2,10 +2,16 @@ import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
 
 --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);
 
 --_announcement-color: var(--helix-color-foreground-muted);
 
+--_announcement-ground: var(--helix-color-background);
+
 align-items: center;
 background-color: var(--helix-color-surface-sunken);
 
@@ -48,35 +54,43 @@ background-image: none;
 border-block-end-color: var(--helix-color-border);
 }
 
-:host([tone="surface"]) {
-background-color: var(--helix-color-surface);
-background-image: none;
-border-block-end-color: var(--helix-color-border);
-}
-
 :host([tone="primary"]) {
 --_announcement-color: var(--helix-color-primary);
 }
 
-:host([tone]:not([tone="neutral"], [tone="surface"])) {
+:host([tone="accent"]) {
+--_announcement-color: var(--helix-color-accent);
+}
+
+:host([tone]:not([tone="neutral"])) {
 background-image: linear-gradient(
 to right,
 light-dark(
-color-mix(in oklab, var(--_announcement-color) 18%, var(--helix-color-background)),
-color-mix(in oklab, var(--_announcement-color) 32%, var(--helix-color-background))
+color-mix(in oklab, var(--_announcement-color) 18%, var(--_announcement-ground)),
+color-mix(in oklab, var(--_announcement-color) 32%, var(--_announcement-ground))
 ),
 light-dark(
-color-mix(in oklab, var(--_announcement-color) 10%, var(--helix-color-background)),
-color-mix(in oklab, var(--_announcement-color) 20%, var(--helix-color-background))
+color-mix(in oklab, var(--_announcement-color) 10%, var(--_announcement-ground)),
+color-mix(in oklab, var(--_announcement-color) 20%, var(--_announcement-ground))
 )
 );
 border-block-end-color: color-mix(
 in oklab,
 var(--_announcement-color) 40%,
-var(--helix-color-background)
+var(--_announcement-ground)
 );
 }
 
+:host([separation="filled"]) {
+background-color: var(--helix-color-surface-sunken);
+}
+
+:host([separation="elevated"]) {
+--_announcement-ground: var(--helix-color-surface);
+
+background-color: var(--helix-color-surface);
+}
+
 [part="content"] {
 flex: 1 1 auto;
 min-inline-size: 0;

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

@@ -18,6 +18,23 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --announcement-inset - Inline padding, matched to the page.
  */
 export declare class HelixAnnouncement extends HelixHeadlessAnnouncement {
+    /**
+     * Which rung of the surface ladder the band rides.
+     *
+     * `filled` is the resting one, a well sunk below the page. `elevated` brings
+     * it up to the surface step, for a band that reads as part of the furniture
+     * rather than as a slot cut into it.
+     *
+     * **This was `tone="surface"`**, which put an elevation on the axis that says
+     * what a thing means. The band's own doc admitted it, calling `surface` the
+     * one value that was not a color. A band can be `info` and elevated at the
+     * same time, and two values that can both be true are two axes.
+     *
+     * Styled and not headless, because a rung of a ladder is paint: the headless
+     * tier has no stylesheet to sit a band on. `tone` crosses because meaning
+     * survives having nothing to paint with, and it is the only axis that does.
+     */
+    separation?: 'elevated' | 'filled';
     static styles: CSSResultGroup;
 }
 declare global {

package/dist/announcement/root/announcement-root.js

@@ -6,10 +6,14 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessAnnouncement } from '@fusion.dev/helix-headless/announcement';
+import { property } from 'lit/decorators.js';
 import { styles } from './announcement-root.css.js';
 let HelixAnnouncement = class HelixAnnouncement extends HelixHeadlessAnnouncement {
     static { this.styles = styles; }
 };
+__decorate([
+    property({ reflect: true })
+], HelixAnnouncement.prototype, "separation", void 0);
 HelixAnnouncement = __decorate([
     customElement('helix-announcement')
 ], HelixAnnouncement);

package/dist/app-header/root/app-header-root.css.js

@@ -2,9 +2,15 @@ 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);
 
 background-color: var(--app-header-background-color, var(--helix-color-background));

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

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

package/dist/area-chart/index.js

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

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

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

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

@@ -0,0 +1,97 @@
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+display: grid;
+gap: var(--area-chart-gap, var(--helix-space-2xs));
+position: relative;
+}
+
+[part="plot"] {
+block-size: var(--area-chart-block-size, 12em);
+cursor: crosshair;
+position: relative;
+}
+
+[part="plot"] svg {
+block-size: 100%;
+inline-size: 100%;
+overflow: visible;
+}
+
+[part="area"] {
+fill: color-mix(
+in oklab,
+var(--chart-series) var(--area-chart-fill-strength, 55%),
+var(--helix-color-background)
+);
+stroke: none;
+}
+
+[part="line"] {
+stroke: var(--chart-series);
+stroke-linejoin: round;
+stroke-width: var(--area-chart-width, 1.5px);
+vector-effect: non-scaling-stroke;
+}
+
+[part="baseline"] {
+stroke: var(--helix-color-border);
+stroke-width: var(--helix-border-thin);
+vector-effect: non-scaling-stroke;
+}
+
+[part="gridline"] {
+stroke: var(--area-chart-gridline-color, var(--helix-color-border));
+stroke-opacity: 0.7;
+stroke-width: var(--helix-border-thin);
+vector-effect: non-scaling-stroke;
+}
+
+[part="guide"] {
+stroke: var(--helix-color-foreground-muted);
+stroke-dasharray: 3 3;
+stroke-width: var(--helix-border-thin);
+vector-effect: non-scaling-stroke;
+}
+
+[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;
+}
+
+[part="summary"] {
+block-size: 1px;
+clip-path: inset(50%);
+inline-size: 1px;
+margin: var(--helix-space-none);
+overflow: hidden;
+position: absolute;
+white-space: nowrap;
+}
+
+[part="area"],
+[part="line"] {
+transition: d var(--helix-duration-normal) var(--helix-easing-decelerate);
+}
+
+@starting-style {
+[part="area"],
+[part="line"] {
+opacity: 0;
+}
+}
+
+@media print {
+:host {
+print-color-adjust: exact;
+}
+}`);

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

@@ -0,0 +1,38 @@
+import { HelixHeadlessAreaChart } from '@fusion.dev/helix-headless/area-chart';
+import type { CSSResultGroup } from 'lit';
+import '../../tooltip/index.js';
+/**
+ * @summary How a total is made up over time, as bands stacked on one another.
+ *
+ * @description
+ * The bands take the series palette in order, the first column at the bottom,
+ * so a legend beside the chart names them in the order they are stacked.
+ *
+ * Each band is a pale fill with its top edge drawn at the series' full color.
+ * The fills are mixed toward the page rather than made translucent, because
+ * the bands overlap where they are drawn and a translucent one would show the
+ * others through it.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category charts
+ * @groups charts
+ * @aliases Stacked Area Chart, Composition Chart, Stream Chart
+ * @documentation https://helix.fusion.dev/components/area-chart
+ *
+ * @cssproperty --area-chart-block-size - Height of the drawing.
+ * @cssproperty --area-chart-fill-strength - How much of its series' color a band takes, as a percentage mixed toward the page.
+ * @cssproperty --area-chart-gap - Space between the drawing and its labels.
+ * @cssproperty --area-chart-gridline-color - One rule across the plot, under `gridlines`.
+ * @cssproperty --area-chart-width - Thickness of a band's top edge.
+ */
+export declare class HelixAreaChart extends HelixHeadlessAreaChart {
+    /** The styled tier, so the tooltip this renders is the styled one. */
+    static tier: string;
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-area-chart': HelixAreaChart;
+    }
+}

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

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

@@ -81,147 +81,6 @@ text-align: end;
 --_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;
 }

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

@@ -8,6 +8,7 @@ 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 as tooltipStyles } from '../../shared/chart/tooltip.css.js';
 import { styles } from './bar-chart-root.css.js';
 import '../../tooltip/index.js';
 let HelixBarChart = class HelixBarChart extends HelixHeadlessBarChart {
@@ -39,7 +40,7 @@ let HelixBarChart = class HelixBarChart extends HelixHeadlessBarChart {
             mark(bar, 'material', glass.has(at) ? 'glass' : undefined);
         }
     }
-    static { this.styles = [seriesStyles, styles]; }
+    static { this.styles = [seriesStyles, tooltipStyles, styles]; }
 };
 __decorate([
     property({ reflect: true })

package/dist/chat/composer/chat-composer.css.js

@@ -47,7 +47,11 @@ justify-content: flex-end;
 [part="start"],
 [part="end"] {
 --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);
 
 align-items: center;
 display: flex;

package/dist/chat/message/chat-message.css.js

@@ -66,7 +66,11 @@ pointer-events: auto;
 [part="actions"] {
 
 --helix-size-control: calc(var(--helix-size-control-sm) - var(--helix-space-2xs));
+--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);
 
 align-items: center;
 display: inline-flex;
@@ -81,6 +85,8 @@ display: none;
 --helix-size-avatar: var(--helix-size-avatar-sm);
 --helix-size-tag: var(--helix-size-tag-sm);
 --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);
 
 align-items: center;
 color: var(--helix-color-foreground-muted);
@@ -115,6 +121,15 @@ background-color: transparent;
 padding-inline: var(--helix-space-none);
 }
 
+:host([separation="plain"]) [part="body"] {
+justify-items: stretch;
+max-inline-size: 100%;
+}
+
+:host([separation="plain"]) [part="content"] {
+inline-size: auto;
+}
+
 :host([author="me"]) [part="content"] {
 background-color: var(
 --chat-message-background-color-me,
@@ -161,6 +176,11 @@ padding-inline: var(--helix-space-xs);
 --orb-size: var(--helix-size-icon-sm);
 }
 
+slot[name="indicator"]::slotted(helix-orb) {
+background-color: transparent;
+padding: var(--helix-space-none);
+}
+
 [part="indicator"] {
 animation: helix-chat-typing 1.2s infinite ease-in-out;
 background-image:

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

@@ -62,7 +62,11 @@ padding-inline: var(--chat-padding-inline, var(--helix-space-md));
 
 [part="header"] > [part="actions"] {
 --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);
 
 align-items: center;
 display: flex;
@@ -112,6 +116,7 @@ var(--helix-border-thin)
 }
 
 [part="empty"],
+[part="history"],
 [part="loading"] {
 color: var(--helix-color-foreground-subtle);
 font-family: var(--helix-font-sans);
@@ -121,6 +126,27 @@ padding-block: var(--helix-space-lg);
 text-align: center;
 }
 
+[part="live"] {
+block-size: 1px;
+clip-path: inset(50%);
+inline-size: 1px;
+overflow: hidden;
+position: absolute;
+white-space: nowrap;
+}
+
+[part="log"][data-windowed] {
+gap: var(--helix-space-none);
+}
+
+[part="turn"] {
+flex: none;
+}
+
+[part="turn"]:not([data-index="0"]) {
+padding-block-start: var(--chat-gap, var(--helix-space-md));
+}
+
 @media print {
 :host {
 max-block-size: none;