@fusion.dev/helix 0.152.0 → 0.153.0

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

@@ -7,12 +7,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 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 statusStyles } from '../../shared/chart/status.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]; }
+    static { this.styles = [seriesStyles, statusStyles, tooltipStyles, styles]; }
 };
 HelixAreaChart = __decorate([
     customElement('helix-area-chart')

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

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

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

@@ -1,2 +1,3 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: block;}[part="figure"] {margin: var(--helix-space-none);}[part="blockquote"] {display: block;margin: var(--helix-space-none);}:host([marks]) [part="blockquote"]::before {color: var(--blockquote-mark-color, var(--helix-color-foreground-subtle));content: open-quote / "";float: inline-start;font-family: var(--blockquote-font-family, var(--helix-font-display));font-size: var(--blockquote-mark-size, var(--helix-text-3xl));line-height: 1;margin-inline-end: var(--helix-space-xs);}:host([marks]) [part="blockquote"]::after {content: no-close-quote;}slot:not([name]) {color: var(--blockquote-color, var(--helix-color-foreground-muted));font-family: var(--blockquote-font-family, var(--helix-font-display));font-size: var(--blockquote-size, var(--helix-text-xl));font-weight: var(--blockquote-font-weight, var(--helix-weight-medium));letter-spacing: var(--blockquote-letter-spacing, var(--helix-tracking-tight));line-height: var(--blockquote-line-height, var(--helix-leading-tight));}slot:not([name])::slotted(*) {margin: var(--helix-space-none);}[part="attribution"] {color: var(--blockquote-attribution-color, var(--helix-color-foreground-muted));font-family: var(--blockquote-attribution-font-family, inherit);font-size: var(--blockquote-attribution-size, var(--helix-text-sm));font-weight: var(--blockquote-attribution-font-weight, inherit);margin-block-start: var(--blockquote-gap, var(--helix-space-sm));}[part="attribution"][data-empty] {display: none;}@media print {:host {print-color-adjust: economy;}}`);
+export const styles = createSheet(`:host {display: block;}[part="figure"] {margin: var(--helix-space-none);}[part="blockquote"] {display: block;margin: var(--helix-space-none);}:host([marks]) [part="blockquote"]::before {color: var(--blockquote-mark-color, var(--helix-color-foreground-subtle));content: open-quote / "";float: inline-start;font-family: var(--blockquote-font-family, var(--helix-font-display));font-size: var(--blockquote-mark-size, var(--helix-text-3xl));line-height: 1;margin-inline-end: var(--helix-space-xs);}:host([marks]) [part="blockquote"]::after {content: no-close-quote;}:host([text-align="start"]) {text-align: start;}:host([text-align="center"]) {text-align: center;}:host([text-align="end"]) {text-align: end;}:host([text-wrap="balance"]) {text-wrap: balance;}:host([text-wrap="pretty"]) {text-wrap: pretty;}:host([marks][text-align="center"]) [part="blockquote"]::before,
+:host([marks][text-align="end"]) [part="blockquote"]::before {display: block;float: none;line-height: 0.75;margin-inline-end: var(--helix-space-none);}slot:not([name]) {color: var(--blockquote-color, var(--helix-color-foreground-muted));font-family: var(--blockquote-font-family, var(--helix-font-display));font-size: var(--blockquote-size, var(--helix-text-xl));font-weight: var(--blockquote-font-weight, var(--helix-weight-medium));letter-spacing: var(--blockquote-letter-spacing, var(--helix-tracking-tight));line-height: var(--blockquote-line-height, var(--helix-leading-tight));}slot:not([name])::slotted(*) {margin: var(--helix-space-none);}[part="attribution"] {color: var(--blockquote-attribution-color, var(--helix-color-foreground-muted));font-family: var(--blockquote-attribution-font-family, inherit);font-size: var(--blockquote-attribution-size, var(--helix-text-sm));font-weight: var(--blockquote-attribution-font-weight, inherit);margin-block-start: var(--blockquote-gap, var(--helix-space-sm));}[part="attribution"][data-empty] {display: none;}@media print {:host {print-color-adjust: economy;}}`);

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

@@ -9,6 +9,11 @@ import type { CSSResultGroup } from 'lit';
  * set the passage apart. `marks` draws one large opening mark over the passage,
  * as a pull quote sets it, in the element's language.
  *
+ * `text-align` sets the passage and its attribution in the middle of the
+ * column or against its far edge, as a pull quote often stands. There, the
+ * mark `marks` draws stands over the passage rather than beside it.
+ * `text-wrap="balance"` evens out a short passage's lines.
+ *
  * @since 0.1.0
  * @status stable
  * @category typography
@@ -30,6 +35,28 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --blockquote-size - The font size of the quoted passage.
  */
 export declare class HelixBlockquote extends HelixHeadlessBlockquote {
+    /**
+     * How the passage and its attribution align, set as `text-align`.
+     *
+     * `center` for a pull quote in the middle of a column and `end` for one
+     * against its far edge. Under either, the mark `marks` draws stands over
+     * the first line. Absent aligns as the prose around it does.
+     *
+     * Named for the CSS property it sets, as `Text.textAlign` is: `align` alone
+     * is a legacy HTML attribute the browser maps to `text-align` by itself,
+     * and it has no `start` or `end`.
+     */
+    textAlign?: 'start' | 'center' | 'end';
+    /**
+     * How the passage's lines break, set as `text-wrap`.
+     *
+     * `balance` evens out the length of every line, which suits a pull quote of
+     * a few lines in display type. `pretty` avoids a last line of one short
+     * word, for a longer passage. Absent, the lines break as the browser breaks
+     * them. The same name and values `Text` takes, but `nowrap`, a passage being
+     * more than one line.
+     */
+    textWrap?: 'balance' | 'pretty';
     static styles: CSSResultGroup;
 }
 declare global {

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

@@ -6,10 +6,17 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessBlockquote } from '@fusion.dev/helix-headless/blockquote';
+import { property } from 'lit/decorators.js';
 import { styles } from './blockquote-root.css.js';
 let HelixBlockquote = class HelixBlockquote extends HelixHeadlessBlockquote {
     static { this.styles = styles; }
 };
+__decorate([
+    property({ attribute: 'text-align', reflect: true })
+], HelixBlockquote.prototype, "textAlign", void 0);
+__decorate([
+    property({ attribute: 'text-wrap', reflect: true })
+], HelixBlockquote.prototype, "textWrap", void 0);
 HelixBlockquote = __decorate([
     customElement('helix-blockquote')
 ], HelixBlockquote);

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

@@ -8,13 +8,20 @@ import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessLineChart } from '@fusion.dev/helix-headless/line-chart';
 import { property } from 'lit/decorators.js';
 import { styles as seriesStyles } from '../../shared/chart/series.css.js';
+import { styles as statusStyles } from '../../shared/chart/status.css.js';
 import { styles as terminusStyles } from '../../shared/chart/terminus.css.js';
 import { styles as tooltipStyles } from '../../shared/chart/tooltip.css.js';
 import { styles } from './line-chart-root.css.js';
 import '../../tooltip/index.js';
 let HelixLineChart = class HelixLineChart extends HelixHeadlessLineChart {
     static { this.tier = 'helix-'; }
-    static { this.styles = [seriesStyles, tooltipStyles, terminusStyles, styles]; }
+    static { this.styles = [
+        seriesStyles,
+        statusStyles,
+        tooltipStyles,
+        terminusStyles,
+        styles,
+    ]; }
 };
 __decorate([
     property({ reflect: true })

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

@@ -81,6 +81,12 @@ export declare class HelixOrb extends HelixElement {
      * Off by default, because the name and the busy state already change with
      * the state, and an orb beside a stream of messages would otherwise talk
      * over them. Set it on an orb that is the only sign of progress on the page.
+     *
+     * **Without it, finishing is silent.** `done` turns the orb into an image
+     * named "Done" that is no longer busy, which a screen reader reports when it
+     * next reaches the orb and does not say as it happens. A page whose own
+     * result arrives in a live region, such as a chat reply, already says the
+     * work is done; one that shows nothing else sets `announce`.
      */
     announce: boolean;
     /**

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

@@ -1,12 +1,21 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: block;}:host([show-value]) {align-items: center;column-gap: var(--progress-value-gap, var(--helix-space-sm));display: grid;grid-template-columns: 1fr auto;row-gap: var(--progress-label-gap, var(--helix-space-2xs));}slot[name="label"]::slotted(*) {color: var(--progress-label-color, var(--helix-color-foreground));display: block;font-size: var(--progress-label-size, var(--helix-text-sm));grid-column: 1 / -1;margin-block-end: var(--progress-label-gap, var(--helix-space-2xs));}:host([show-value]) slot[name="label"]::slotted(*) {margin-block-end: 0;}:host([shape="ring"]) slot[name="label"]::slotted(*) {grid-column: 1;margin-block: 0;}[part="value"] {color: var(--progress-value-color, var(--helix-color-foreground-muted));font-family: var(--helix-font-sans);font-size: var(--progress-value-size, var(--helix-text-xs));font-variant-numeric: tabular-nums;min-inline-size: 3ch;text-align: end;}[part="live"] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;margin: var(--helix-space-none);overflow: hidden;position: absolute;white-space: nowrap;}[part="track"] {background-color: var(--progress-track-color, var(--helix-color-surface-sunken));block-size: var(--progress-size, var(--helix-size-progress));border-radius: var(--progress-radius, var(--helix-radii-full));inline-size: 100%;overflow: hidden;}[part="indicator"] {background-color: var(--progress-color, var(--helix-color-primary));block-size: 100%;border-radius: inherit;inline-size: 100%;scale: var(--progress-fraction, 0) 1;transform-origin: left center;transition: scale var(--progress-transition-duration, var(--helix-duration-normal))
+export const styles = createSheet(`:host {display: block;}:host([show-value]) {align-items: center;column-gap: var(--progress-value-gap, var(--helix-space-sm));display: grid;grid-template-columns: 1fr auto;row-gap: var(--progress-label-gap, var(--helix-space-2xs));}slot[name="label"]::slotted(*) {color: var(--progress-label-color, var(--helix-color-foreground));display: block;font-size: var(--progress-label-size, var(--helix-text-sm));grid-column: 1 / -1;margin-block-end: var(--progress-label-gap, var(--helix-space-2xs));}:host([show-value]) slot[name="label"]::slotted(*) {margin-block-end: 0;}:host([shape="ring"]) slot[name="label"]::slotted(*) {grid-column: 1;margin-block: 0;}[part="value"] {color: var(--progress-value-color, var(--helix-color-foreground-muted));font-family: var(--helix-font-sans);font-size: var(--progress-value-size, var(--helix-text-xs));font-variant-numeric: tabular-nums;min-inline-size: 3ch;text-align: end;}[part="live"] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;margin: var(--helix-space-none);overflow: hidden;position: absolute;white-space: nowrap;}[part="track"] {background-color: var(--progress-track-color, var(--helix-color-surface-sunken));min-block-size: var(--progress-size, var(--helix-size-progress));border-radius: var(--progress-radius, var(--helix-radii-full));inline-size: 100%;overflow: hidden;}[part="indicator"] {background-color: var(--progress-color, var(--helix-color-primary));block-size: 100%;border-radius: inherit;inline-size: 100%;scale: var(--progress-fraction, 0) 1;transform-origin: left center;transition: scale var(--progress-transition-duration, var(--helix-duration-normal))
 var(--helix-easing-decelerate);}:host(:dir(rtl)) [part="indicator"] {transform-origin: right center;}:host([indeterminate]) {--_progress-cycle: calc(var(--helix-duration-slow) * 5);}:host([indeterminate]) [part="indicator"] {animation: helix-progress-indeterminate var(--_progress-cycle) linear infinite;transition: none;}:host([indeterminate]) [part="indicator"] {--_progress-way: 1;}:host([indeterminate]:dir(rtl)) [part="indicator"] {--_progress-way: -1;}@keyframes helix-progress-indeterminate {0% {scale: 0.18 1;translate: calc(-18% * var(--_progress-way, 1));}35% {scale: 0.5 1;translate: calc(12% * var(--_progress-way, 1));}65% {scale: 0.5 1;translate: calc(52% * var(--_progress-way, 1));}100% {scale: 0.18 1;translate: calc(100% * var(--_progress-way, 1));}}@media (prefers-reduced-motion: reduce) {:host([indeterminate]) [part="indicator"] {animation: none;background-image: repeating-linear-gradient(
 -45deg,
 var(--helix-color-background) 0 var(--helix-space-xs),
 transparent var(--helix-space-xs) calc(var(--helix-space-xs) * 2)
-);scale: 1 1;translate: 0;}}:host([shape="ring"]) {display: inline-grid;place-items: center;row-gap: var(--progress-label-gap, var(--helix-space-2xs));}:host([shape="ring"]) [part="track"] {--_ring-stroke: var(--progress-ring-width, var(--helix-size-progress));background-color: transparent;block-size: var(--progress-ring-size, 4rem);grid-area: 1 / 1;inline-size: var(--progress-ring-size, 4rem);rotate: -90deg;}:host([shape="ring"]) [part="groove"],
+);scale: 1 1;translate: 0;}}[part="track"] {display: grid;}[part="track"] > * {grid-area: 1 / 1;}[part="content"] {--_progress-over: var(--progress-content-fill-color, var(--helix-color-foreground-on-primary));--_progress-under: var(--progress-content-color, var(--helix-color-foreground));--_progress-split: calc(var(--progress-fraction, 0) * 100%);-webkit-background-clip: text;background-clip: text;background-image: linear-gradient(
+to right,
+var(--_progress-over) var(--_progress-split),
+var(--_progress-under) var(--_progress-split)
+);color: transparent;font-family: var(--helix-font-sans);font-size: var(--progress-content-size, var(--helix-text-xs));font-variant-numeric: tabular-nums;line-height: var(--helix-leading-tight);padding-inline: var(--helix-space-xs);position: relative;white-space: nowrap;}:host(:dir(rtl)) [part="content"] {background-image: linear-gradient(
+to left,
+var(--_progress-over) var(--_progress-split),
+var(--_progress-under) var(--_progress-split)
+);}:host([indeterminate]) [part="content"],
+:host([emphasis="subtle"]) [part="content"] {--_progress-over: var(--_progress-under);}:host([shape="ring"]) {display: inline-grid;place-items: center;row-gap: var(--progress-label-gap, var(--helix-space-2xs));}:host([shape="ring"]) [part="track"] {--_ring-stroke: var(--progress-ring-width, var(--helix-size-progress));background-color: transparent;block-size: var(--progress-ring-size, 4rem);grid-area: 1 / 1;inline-size: var(--progress-ring-size, 4rem);rotate: -90deg;}:host([shape="ring"]) [part="groove"],
 :host([shape="ring"]) [part="indicator"] {cx: 50%;cy: 50%;fill: none;r: calc(50% - var(--_ring-stroke) / 2);stroke-width: var(--_ring-stroke);}:host([shape="ring"]) [part="groove"] {stroke: var(--progress-track-color, var(--helix-color-surface-sunken));}:host([shape="ring"]) [part="indicator"] {scale: none;stroke: var(--progress-color, var(--helix-color-primary));stroke-dasharray: calc(var(--progress-fraction) * 100) 100;stroke-linecap: round;transition: stroke-dasharray var(--progress-transition-duration, var(--helix-duration-normal))
-var(--helix-easing-decelerate);}:host([shape="ring"][show-value]) {gap: var(--helix-space-none);grid-template-columns: auto;}:host([shape="ring"]) [part="value"] {grid-area: 1 / 1;min-inline-size: 0;text-align: center;}:host([shape="ring"][indeterminate]) [part="track"] {animation: helix-progress-ring var(--_progress-cycle) linear infinite;}:host([shape="ring"][indeterminate]) [part="indicator"] {animation: helix-progress-ring-sweep calc(var(--_progress-cycle) * 0.7) ease-in-out infinite;transition: none;}@keyframes helix-progress-ring {from {rotate: -90deg;}to {rotate: 270deg;}}@keyframes helix-progress-ring-sweep {0% {stroke-dasharray: 10 100;stroke-dashoffset: 0;}50% {stroke-dasharray: 70 100;stroke-dashoffset: -25;}100% {stroke-dasharray: 10 100;stroke-dashoffset: -100;}}@media (prefers-reduced-motion: reduce) {:host([shape="ring"]) [part="indicator"] {transition: none;}:host([shape="ring"][indeterminate]) [part="track"] {animation-duration: calc(var(--_progress-cycle) * 12);}:host([shape="ring"][indeterminate]) [part="indicator"] {animation: none;stroke-dasharray: 25 100;}}@media (forced-colors: active) {[part="track"] {outline: var(--helix-border-thin) solid CanvasText;}[part="indicator"] {background-color: Highlight;forced-color-adjust: none;}:host([shape="ring"]) [part="track"] {outline: none;}:host([shape="ring"]) [part="indicator"] {stroke: Highlight;}:host([shape="ring"]) [part="groove"] {stroke: CanvasText;}}@media print {:host {print-color-adjust: exact;}}:host([emphasis="subtle"]) [part="indicator"] {background-color: color-mix(
+var(--helix-easing-decelerate);}:host([shape="ring"][show-value]) {gap: var(--helix-space-none);grid-template-columns: auto;}:host([shape="ring"]) [part="value"] {grid-area: 1 / 1;min-inline-size: 0;text-align: center;}:host([shape="ring"]) [part="content"] {background-image: none;color: var(--progress-content-color, var(--helix-color-foreground));grid-area: 1 / 1;padding-inline: var(--helix-space-none);text-align: center;}:host([shape="ring"][indeterminate]) [part="track"] {animation: helix-progress-ring var(--_progress-cycle) linear infinite;}:host([shape="ring"][indeterminate]) [part="indicator"] {animation: helix-progress-ring-sweep calc(var(--_progress-cycle) * 0.7) ease-in-out infinite;transition: none;}@keyframes helix-progress-ring {from {rotate: -90deg;}to {rotate: 270deg;}}@keyframes helix-progress-ring-sweep {0% {stroke-dasharray: 10 100;stroke-dashoffset: 0;}50% {stroke-dasharray: 70 100;stroke-dashoffset: -25;}100% {stroke-dasharray: 10 100;stroke-dashoffset: -100;}}@media (prefers-reduced-motion: reduce) {:host([shape="ring"]) [part="indicator"] {transition: none;}:host([shape="ring"][indeterminate]) [part="track"] {animation-duration: calc(var(--_progress-cycle) * 12);}:host([shape="ring"][indeterminate]) [part="indicator"] {animation: none;stroke-dasharray: 25 100;}}@media (forced-colors: active) {[part="track"] {outline: var(--helix-border-thin) solid CanvasText;}[part="indicator"] {background-color: Highlight;forced-color-adjust: none;}:host([shape="ring"]) [part="track"] {outline: none;}:host([shape="ring"]) [part="indicator"] {stroke: Highlight;}:host([shape="ring"]) [part="groove"] {stroke: CanvasText;}[part="content"] {--_progress-over: HighlightText;--_progress-under: CanvasText;forced-color-adjust: none;}:host([shape="ring"]) [part="content"] {color: CanvasText;}}@media print {:host {print-color-adjust: exact;}}:host([emphasis="subtle"]) [part="indicator"] {background-color: color-mix(
 in oklab,
 var(--progress-color, var(--helix-color-primary)) 30%,
 var(--progress-track-color, var(--helix-color-surface-sunken))

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

@@ -18,9 +18,13 @@ import type { CSSResultGroup } from 'lit';
  * @aliases Progress bar, Loading bar
  * @documentation https://fusion.dev/helix/components/progress
  *
+ * @slot - Words drawn on the bar, or in the middle of a ring, such as the reading. The bar grows to their height, and over the fill they take the fill's own ink.
  * @slot label - A visible label, above a bar and under a ring. Its words name it in place of `label`.
  *
  * @cssproperty --progress-color - Fill of the part that is done.
+ * @cssproperty --progress-content-color - The color of the words of the default slot where they are over the track, and in a ring.
+ * @cssproperty --progress-content-fill-color - The color of the words of the default slot where they are over the fill.
+ * @cssproperty --progress-content-size - The type size of the words of the default slot.
  * @cssproperty --progress-label-color - Color of a slotted label.
  * @cssproperty --progress-label-gap - Space between a slotted label and the bar.
  * @cssproperty --progress-label-size - Type size of a slotted label.

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

@@ -7,12 +7,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 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 statusStyles } from '../../shared/chart/status.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]; }
+    static { this.styles = [seriesStyles, statusStyles, tooltipStyles, styles]; }
 };
 HelixScatterChart = __decorate([
     customElement('helix-scatter-chart')

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

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

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

@@ -0,0 +1,3 @@
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`[part="empty"],
+[part="loading"] {color: var(--helix-color-foreground-subtle);display: grid;font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);inset: 0;margin: var(--helix-space-none);place-content: center;position: absolute;text-align: center;}`);