@fusion.dev/helix 0.152.0 → 0.154.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/badge/root/badge-root.css.js

@@ -1,5 +1,5 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {--_badge-size: var(--helix-size-badge);--_badge-text: var(--helix-text-xs);--_badge-inset: var(--helix-space-2xs);--_badge-dot: var(--helix-space-xs);--_badge-on: var(--helix-color-foreground-on-primary);--_badge-fill: var(--helix-color-primary-surface);display: inline-flex;position: relative;vertical-align: middle;}[part="indicator"] {align-items: center;background-color: var(--badge-background-color, var(--_badge-fill));block-size: var(--_badge-size);border-radius: var(--badge-radius, var(--helix-radii-full));box-shadow: 0 0 0 var(--helix-border-thick) var(--badge-ring-color, var(--helix-color-background));color: var(--badge-color, var(--_badge-on));display: inline-flex;font-size: var(--_badge-text);font-weight: var(--badge-font-weight, var(--helix-weight-semibold));inset-block-start: var(--badge-offset, calc(var(--_badge-size) / 4));inset-inline-end: var(--badge-offset, calc(var(--_badge-size) / 4));justify-content: center;line-height: 1;min-inline-size: var(--_badge-size);padding-inline: var(--_badge-inset);pointer-events: none;position: absolute;translate: 50% -50%;white-space: nowrap;}[part="indicator"]:empty {block-size: var(--_badge-dot);min-inline-size: var(--_badge-dot);padding-inline: var(--helix-space-none);}[part="indicator"][data-single] {padding-inline: var(--helix-space-none);}[part="indicator"] {scale: 1;transition:
+export const styles = createSheet(`:host {--_badge-size: var(--helix-size-badge);--_badge-text: var(--helix-text-xs);--_badge-inset: var(--helix-space-2xs);--_badge-dot: var(--helix-space-xs);--_badge-on: var(--helix-color-foreground-on-primary);--_badge-fill: var(--helix-color-primary-surface);display: inline-flex;position: relative;vertical-align: middle;}[part="indicator"] {align-items: center;background-color: var(--badge-background-color, var(--_badge-fill));block-size: var(--_badge-size);border-radius: var(--badge-radius, var(--helix-radii-full));box-shadow: 0 0 0 var(--helix-border-thick) var(--badge-ring-color, var(--helix-color-background));color: var(--badge-color, var(--_badge-on));display: inline-flex;font-size: var(--_badge-text);font-weight: var(--badge-font-weight, var(--helix-weight-semibold));inset-block-start: var(--badge-offset, calc(var(--_badge-size) / 4));inset-inline-end: var(--badge-offset, calc(var(--_badge-size) / 4));justify-content: center;line-height: 1;min-inline-size: var(--_badge-size);padding-inline: var(--_badge-inset);pointer-events: none;position: absolute;translate: 50% -50%;white-space: nowrap;}[part="indicator"][data-dot] {block-size: auto;min-block-size: var(--_badge-dot);min-inline-size: var(--_badge-dot);padding-inline: var(--helix-space-none);}[part="indicator"][data-dot] slot[name="icon"]::slotted(*) {margin: calc(var(--_badge-inset) / 2);}[part="indicator"] {gap: calc(var(--_badge-inset) / 2);}slot[name="icon"]::slotted(*) {--icon-size: var(--badge-icon-size, var(--_badge-text));flex: none;}[part="indicator"][data-single] {padding-inline: var(--helix-space-none);}[part="indicator"] {scale: 1;transition:
 opacity var(--helix-duration-fast) var(--helix-easing-standard),
 scale var(--helix-duration-normal) var(--helix-easing-emphasized);}[part="indicator"][data-blank] {opacity: 0;scale: 0;transition:
 opacity var(--helix-duration-fast) var(--helix-easing-standard),

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

@@ -25,6 +25,7 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --badge-color - The color of the count, to pair with a fill set through `--badge-background-color`.
  * @cssproperty --badge-font-weight - The weight of the count.
  * @cssproperty --badge-gap - The space between the content and the count under `placement="inline"`.
+ * @cssproperty --badge-icon-size - The size of an icon in the `icon` slot. The count's own size by default.
  * @cssproperty --badge-offset - Pulls the mark in from the corner, along both axes.
  * @cssproperty --badge-radius - How far the indicator's corners are rounded.
  * @cssproperty --badge-ring-color - The color of the ring between the indicator and what is behind it.

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/card/root/card-root.css.js

@@ -4,4 +4,6 @@ var(--card-border-color, var(--helix-color-border));border-radius: var(--card-ra
 border-color var(--helix-duration-fast) var(--helix-easing-standard),
 box-shadow var(--helix-duration-fast) var(--helix-easing-standard);}:host([separation="elevated"]) {--card-shadow: var(--helix-shadow-md);border-color: light-dark(transparent, var(--helix-color-border));}:host([separation="filled"]) {--card-shadow: none;border-color: transparent;}:host([separation="plain"]) {--card-shadow: none;background-color: transparent;border-color: transparent;}slot[name="media"]::slotted(*) {block-size: var(--card-media-block-size, auto);display: block;inline-size: calc(100% + var(--_card-inset) * 2);margin: calc(var(--_card-inset) * -1);margin-block-end: 0;object-fit: var(--card-media-fit, cover);}:host([media-placement="end"]) slot[name="media"]::slotted(*) {margin-block-end: calc(var(--_card-inset) * -1);margin-block-start: 0;order: 1;}slot[name="header"]::slotted(*) {color: var(--_heading-ink);}slot[name="footer"]::slotted(*) {justify-self: end;}[part="header-row"],
 [part="footer-row"] {align-items: center;display: flex;flex-wrap: wrap;gap: var(--card-gap, var(--helix-space-sm));min-inline-size: 0;}[part="header-row"] slot[name="header"]::slotted(*) {flex: 1 1 auto;min-inline-size: 0;}slot[name="header-actions"]::slotted(*),
-slot[name="footer-actions"]::slotted(*) {flex: none;justify-self: end;}[part="footer-row"] slot[name="footer-actions"]::slotted(*) {margin-inline-start: auto;}:host([orientation="horizontal"]) {padding-inline-start: calc(var(--_card-media) + var(--_card-inset));position: relative;}:host([orientation="horizontal"]) slot[name="media"]::slotted(*) {block-size: 100%;inline-size: var(--_card-media);inset-block: 0;inset-inline-start: 0;margin: var(--helix-space-none);position: absolute;}@media (prefers-reduced-motion: reduce) {:host {transition: none;}}:host([material="glass"]) {backdrop-filter: var(--card-backdrop, var(--helix-material-backdrop));background-color: var(--card-background-color, var(--helix-material-translucent));}:host([material="frosted"]) {backdrop-filter: var(--card-backdrop, blur(var(--helix-material-blur-lg)));background-color: var(--card-background-color, var(--helix-material-translucent-strong));}:host([material="transparent"]) {backdrop-filter: none;background-color: transparent;}@media print {:host {background-color: transparent;box-shadow: none;}}`);
+slot[name="footer-actions"]::slotted(*) {flex: none;justify-self: end;}[part="footer-row"] slot[name="footer-actions"]::slotted(*) {margin-inline-start: auto;}:host(:not(:defined)) {column-gap: var(--helix-space-none);grid-template-columns: minmax(0, 1fr) auto;}:host(:not(:defined)) slot::slotted(*) {grid-column: 1 / -1;}:host(:not(:defined)) slot[name="header"]::slotted(*),
+:host(:not(:defined)) slot[name="footer"]::slotted(*) {grid-column: 1;}:host(:not(:defined)) slot[name="header-actions"]::slotted(*),
+:host(:not(:defined)) slot[name="footer-actions"]::slotted(*) {align-self: center;grid-column: 2;margin-inline-start: var(--card-gap, var(--helix-space-sm));}:host([orientation="horizontal"]) {padding-inline-start: calc(var(--_card-media) + var(--_card-inset));position: relative;}:host([orientation="horizontal"]) slot[name="media"]::slotted(*) {block-size: 100%;inline-size: var(--_card-media);inset-block: 0;inset-inline-start: 0;margin: var(--helix-space-none);position: absolute;}@media (prefers-reduced-motion: reduce) {:host {transition: none;}}:host([material="glass"]) {backdrop-filter: var(--card-backdrop, var(--helix-material-backdrop));background-color: var(--card-background-color, var(--helix-material-translucent));}:host([material="frosted"]) {backdrop-filter: var(--card-backdrop, blur(var(--helix-material-blur-lg)));background-color: var(--card-background-color, var(--helix-material-translucent-strong));}:host([material="transparent"]) {backdrop-filter: none;background-color: transparent;}@media print {:host {background-color: transparent;box-shadow: none;}}`);

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

@@ -2,7 +2,7 @@ import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {display: inline;}[part="code"] {background-color: var(
 --code-background-color,
 color-mix(in oklab, var(--helix-color-foreground) 6%, transparent)
-);border-radius: var(--code-radius, var(--helix-radii-sm));color: var(
+);border-radius: var(--code-radius, var(--helix-radii-sm));-webkit-box-decoration-break: clone;box-decoration-break: clone;color: var(
 --code-foreground-color,
 color-mix(in oklab, var(--helix-color-foreground) 30%, var(--helix-color-foreground-muted))
-);font-family: var(--code-font-family, var(--helix-font-mono));font-size: var(--code-size, calc(var(--helix-text-sm) / var(--helix-text-md) * 1em));padding-block: var(--helix-space-none);padding-inline: var(--code-padding, calc(var(--helix-space-2xs) * 0.5));}@media print {[part="code"] {background-color: transparent;}}`);
+);font-family: var(--code-font-family, var(--helix-font-mono));font-size: var(--code-size, calc(var(--helix-text-sm) / var(--helix-text-md) * 1em));overflow-wrap: break-word;padding-block: var(--helix-space-none);padding-inline: var(--code-padding, calc(var(--helix-space-2xs) * 0.5));}@media print {[part="code"] {background-color: transparent;}}`);

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

@@ -11,6 +11,7 @@ import type { CSSResultGroup } from 'lit';
  * @since 0.1.0
  * @status stable
  * @category typography
+ * @aliases Inline code
  * @documentation https://fusion.dev/helix/components/code
  *
  * @cssproperty --code-background-color - Fill behind the fragment. Defaults to the

package/dist/code-block/root/code-block-root.css.js

@@ -1,5 +1,8 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {--_code-block-size: var(--code-block-font-size, var(--helix-text-sm));--_code-block-leading: var(--code-block-line-height, var(--helix-leading-normal));--_code-block-face: var(--code-block-font-family, var(--helix-font-mono));--_code-block-copy-inset: calc(var(--helix-space-sm) + (1lh - var(--helix-size-control-sm)) / 2);--_code-block-gutter: calc(var(--helix-size-control-sm) + var(--_code-block-copy-inset) * 2);display: flex;flex-direction: column;}[part="frame"] {flex: 1;}:host(:not([diff])) [part="frame"] {font-size: var(--_code-block-size);line-height: var(--_code-block-leading);}[part="header"] {align-items: center;backdrop-filter: var(--code-block-backdrop, none);background-color: var(--code-block-header-background-color, var(--helix-color-surface-raised));border: var(--helix-border-thin) solid var(--code-block-border-color, var(--helix-color-border));border-end-end-radius: var(--helix-radii-none);border-end-start-radius: var(--helix-radii-none);border-start-end-radius: var(--code-block-radius, var(--helix-radii-lg));border-start-start-radius: var(--code-block-radius, var(--helix-radii-lg));display: flex;gap: var(--helix-space-sm);padding-block: var(--helix-space-xs);padding-inline: var(--helix-space-md);}[part="header"]:has(> [part="copy"]) {padding-block: var(--helix-space-2xs);padding-inline-end: var(--helix-space-2xs);}[part="label"] {color: var(--code-block-label-color, var(--helix-color-foreground-muted));font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);font-weight: var(--helix-weight-medium);min-inline-size: 0;overflow-wrap: anywhere;}[part="frame"] {position: relative;}[part="block"] {block-size: 100%;}[part="copy"] {--icon-button-size: var(--helix-size-control-sm);}[part="header"] > [part="copy"] {margin-inline-start: auto;}[part="frame"] > [part="copy"] {font-size: var(--_code-block-size);inset-block-start: var(--_code-block-copy-inset);inset-inline-end: var(--_code-block-copy-inset);line-height: var(--_code-block-leading);position: absolute;}[part="block"] {backdrop-filter: var(--code-block-backdrop, none);background-color: var(--code-block-background-color, var(--helix-color-background));border: var(--helix-border-thin) solid var(--code-block-border-color, var(--helix-color-border));border-radius: var(--code-block-radius, var(--helix-radii-lg));margin: var(--helix-space-none);overflow-x: auto;padding-block: var(--helix-space-sm);padding-inline: var(--helix-space-md);}:host(:not([diff], [no-copy])) [part="frame"]:not([part="header"] + *) > [part="block"] {padding-inline-end: var(--_code-block-gutter);}[part="header"] + [part="frame"] [part="block"] {border-block-start-width: var(--helix-space-none);border-start-end-radius: var(--helix-radii-none);border-start-start-radius: var(--helix-radii-none);}[part="code"] {color: var(--code-block-color, var(--helix-color-foreground));font-family: var(--_code-block-face);font-size: var(--_code-block-size);line-height: var(--_code-block-leading);}:host(:not([diff])) [part="code"] {display: block;max-block-size: var(--code-block-max-block-size, none);overflow-x: auto;}:host(:state(expanded)) [part="code"] {max-block-size: none;}[part="expand"] {all: unset;box-sizing: border-box;border-radius: var(--helix-radii-sm);color: var(--code-block-expand-color, var(--helix-color-foreground-muted));cursor: pointer;font-size: var(--helix-text-sm);padding: var(--helix-space-xs);}[part="expand"]:hover {color: var(--helix-color-foreground);}[part="expand"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}:host([wrap]:not([diff], [line-numbers])) [part="code"] {overflow-wrap: anywhere;white-space: pre-wrap;}:host([line-numbers]:not([diff])) [part="block"] {column-gap: var(--helix-space-md);display: grid;grid-template-columns: auto minmax(0, 1fr);}[part="gutter"] {color: var(--code-block-gutter-color, var(--helix-color-foreground-subtle));font-family: var(--_code-block-face);font-size: var(--_code-block-size);font-variant-numeric: tabular-nums;line-height: var(--_code-block-leading);text-align: end;user-select: none;}:host([diff]) {gap: var(--helix-space-md);}:host([diff]) [part="file"] {container-type: inline-size;display: flex;flex-direction: column;}:host([diff]) [part="block"],
+export const styles = createSheet(`:host {--_code-block-size: var(--code-block-font-size, var(--helix-text-sm));--_code-block-leading: var(--code-block-line-height, var(--helix-leading-normal));--_code-block-face: var(--code-block-font-family, var(--helix-font-mono));--_code-block-copy-inset: calc(var(--helix-space-sm) + (1lh - var(--helix-size-control-sm)) / 2);--_code-block-gutter: calc(var(--helix-size-control-sm) + var(--_code-block-copy-inset) * 2);display: flex;flex-direction: column;}[part="frame"] {flex: 1;}:host(:not([diff])) [part="frame"] {font-size: var(--_code-block-size);line-height: var(--_code-block-leading);}[part="header"] {align-items: center;backdrop-filter: var(--code-block-backdrop, none);background-color: var(--code-block-header-background-color, var(--helix-color-surface-raised));border: var(--helix-border-thin) solid var(--code-block-border-color, var(--helix-color-border));border-end-end-radius: var(--helix-radii-none);border-end-start-radius: var(--helix-radii-none);border-start-end-radius: var(--code-block-radius, var(--helix-radii-lg));border-start-start-radius: var(--code-block-radius, var(--helix-radii-lg));display: flex;gap: var(--helix-space-sm);padding-block: var(--helix-space-xs);padding-inline: var(--helix-space-md);}[part="header"]:has(> [part="copy"]) {padding-block: var(--helix-space-2xs);padding-inline-end: var(--helix-space-2xs);}[part="label"] {color: var(--code-block-label-color, var(--helix-color-foreground-muted));font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);font-weight: var(--helix-weight-medium);min-inline-size: 0;overflow-wrap: anywhere;}[part="frame"] {position: relative;}[part="block"] {block-size: 100%;}[part="copy"] {--icon-button-size: var(--helix-size-control-sm);}[part="header"] > [part="copy"] {margin-inline-start: auto;}[part="frame"] > [part="copy"] {font-size: var(--_code-block-size);inset-block-start: var(--_code-block-copy-inset);inset-inline-end: var(--_code-block-copy-inset);line-height: var(--_code-block-leading);position: absolute;}[part="block"] {backdrop-filter: var(--code-block-backdrop, none);background-color: var(--code-block-background-color, var(--helix-color-background));border: var(--helix-border-thin) solid var(--code-block-border-color, var(--helix-color-border));border-radius: var(--code-block-radius, var(--helix-radii-lg));margin: var(--helix-space-none);overflow-x: auto;padding-block: var(--helix-space-sm);padding-inline: var(--helix-space-md);}:host(:not([diff], [no-copy])) [part="frame"]:not([part="header"] + *) > [part="block"] {padding-inline-end: var(--_code-block-gutter);}[part="header"] + [part="frame"] [part="block"] {border-block-start-width: var(--helix-space-none);border-start-end-radius: var(--helix-radii-none);border-start-start-radius: var(--helix-radii-none);}[part="code"] {color: var(--code-block-color, var(--helix-color-foreground));font-family: var(--_code-block-face);font-size: var(--_code-block-size);line-height: var(--_code-block-leading);}:host(:not([diff])) [part="code"] {display: block;max-block-size: var(--code-block-max-block-size, none);overflow-x: auto;}:host(:state(expanded)) [part="code"] {max-block-size: none;}[part="expand"] {all: unset;box-sizing: border-box;border-radius: var(--helix-radii-sm);color: var(--code-block-expand-color, var(--helix-color-foreground-muted));cursor: pointer;font-size: var(--helix-text-sm);padding: var(--helix-space-xs);}[part="expand"]:hover {color: var(--helix-color-foreground);}[part="expand"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="block"]:focus-visible,
+[part="code"]:focus-visible,
+[part="old"]:focus-visible,
+[part="new"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}:host([wrap]:not([diff], [line-numbers])) [part="code"] {overflow-wrap: anywhere;white-space: pre-wrap;}:host([line-numbers]:not([diff])) [part="block"] {column-gap: var(--helix-space-md);display: grid;grid-template-columns: auto minmax(0, 1fr);}[part="gutter"] {color: var(--code-block-gutter-color, var(--helix-color-foreground-subtle));font-family: var(--_code-block-face);font-size: var(--_code-block-size);font-variant-numeric: tabular-nums;line-height: var(--_code-block-leading);text-align: end;user-select: none;}:host([diff]) {gap: var(--helix-space-md);}:host([diff]) [part="file"] {container-type: inline-size;display: flex;flex-direction: column;}:host([diff]) [part="block"],
 [part="old"],
 [part="new"] {backdrop-filter: var(--code-block-backdrop, none);background-color: var(--code-block-background-color, var(--helix-color-background));border: var(--helix-border-thin) solid var(--code-block-border-color, var(--helix-color-border));border-radius: var(--code-block-radius, var(--helix-radii-lg));margin: var(--helix-space-none);min-inline-size: 0;overflow-x: auto;padding-block: var(--helix-space-none) var(--helix-space-sm);padding-inline: var(--helix-space-none);}:host([diff]:not([no-copy]))
 [part="frame"]:not([part="header"] + *)

package/dist/code-block/root/code-block-root.d.ts

@@ -23,6 +23,7 @@ import '../../copy-button/index.js';
  * @since 0.1.0
  * @status stable
  * @category typography
+ * @aliases Code block, Snippet, Pre
  * @documentation https://fusion.dev/helix/components/code-block
  *
  * @cssproperty --code-block-added-color - The color a diff's added lines are tinted in and their `+` is drawn in. The success color by default.

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

@@ -1,2 +1,9 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {block-size: var(--icon-size, var(--helix-size-icon));display: inline-flex;flex: 0 0 auto;inline-size: var(--icon-size, var(--helix-size-icon));}[part="svg"] {block-size: 100%;inline-size: 100%;}@media print {:host {print-color-adjust: economy;}}`);
+export const styles = createSheet(`:host {block-size: var(--icon-size, var(--helix-size-icon));display: inline-flex;flex: 0 0 auto;inline-size: var(--icon-size, var(--helix-size-icon));}[part="svg"] {block-size: 100%;inline-size: 100%;rotate: var(--icon-rotate, none);}:host([auto-width]) {inline-size: auto;}:host([auto-width]) [part="svg"] {inline-size: auto;}:host([rotate="90"]) [part="svg"] {rotate: 90deg;}:host([rotate="180"]) [part="svg"] {rotate: 180deg;}:host([rotate="270"]) [part="svg"] {rotate: 270deg;}:host([flip="x"]) [part="svg"] {transform: scale(-1, 1);}:host([flip="y"]) [part="svg"] {transform: scale(1, -1);}:host([flip="both"]) [part="svg"] {transform: scale(-1, -1);}:host([animation="spin"]) {animation: helix-icon-spin var(--icon-animation-duration, calc(var(--helix-duration-slow) * 3))
+linear infinite;}:host([animation="pulse"]) {animation: helix-icon-pulse var(--icon-animation-duration, calc(var(--helix-duration-slow) * 6))
+ease-in-out infinite;}:host([animation="beat"]) {animation: helix-icon-beat var(--icon-animation-duration, calc(var(--helix-duration-slow) * 3))
+ease-in-out infinite;}@keyframes helix-icon-spin {to {rotate: 1turn;}}@keyframes helix-icon-pulse {50% {opacity: 0.4;}}@keyframes helix-icon-beat {0%,
+60%,
+100% {scale: 1;}30% {scale: 1.2;}}@media (prefers-reduced-motion: reduce) {:host([animation="spin"]),
+:host([animation="pulse"]),
+:host([animation="beat"]) {animation: none;}}@media print {:host {print-color-adjust: economy;}}`);

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

@@ -9,6 +9,13 @@ import type { CSSResultGroup } from 'lit';
  * Inside a button, `--icon-size` is set in `em`, so the icon scales with the
  * button.
  *
+ * **The glyph turns, flips and moves inside its own box**, so the line around
+ * it keeps its place: `rotate` turns it by a quarter, a half or three
+ * quarters, `--icon-rotate` by any angle, `flip` mirrors it across either
+ * axis, and `animation` spins, pulses or beats it, as Web Awesome's icon does.
+ * Reduced motion stills every animation. `auto-width` gives the box the
+ * glyph's own proportions, for a mark wider than it is tall.
+ *
  * @since 0.1.0
  * @status stable
  * @category media
@@ -17,9 +24,39 @@ import type { CSSResultGroup } from 'lit';
  *
  * @csspart svg - The rendered SVG.
  *
- * @cssproperty --icon-size - The width and height of the icon's box.
+ * @cssproperty --icon-animation-duration - How long one turn, pulse or beat of `animation` takes.
+ * @cssproperty --icon-rotate - An angle the glyph is turned by, such as `45deg`. `rotate` wins over it.
+ * @cssproperty --icon-size - The width and height of the icon's box. The height alone under `auto-width`.
  */
 export declare class HelixIcon extends HelixHeadlessIcon {
+    /**
+     * A motion that draws the eye or says work is going on: `spin` turns the
+     * glyph without end, `pulse` fades it in and out, and `beat` swells it.
+     *
+     * Absent is still. Reduced motion stills every one of them.
+     */
+    animation?: 'beat' | 'pulse' | 'spin';
+    /**
+     * Whether the box takes the glyph's own proportions, its height from
+     * `--icon-size` and its width from the glyph's box.
+     *
+     * Absent is a square, which lines icons up in a column.
+     */
+    autoWidth: boolean;
+    /**
+     * Mirrors the glyph across an axis: `x` left to right, `y` top to bottom,
+     * `both` across both.
+     *
+     * Absent draws it as it is. On a right-to-left page, `mirror` is the flip
+     * that follows the direction.
+     */
+    flip?: 'both' | 'x' | 'y';
+    /**
+     * Turns the glyph clockwise by 90, 180 or 270 degrees.
+     *
+     * Absent draws it upright. `--icon-rotate` turns it by any other angle.
+     */
+    rotate?: 90 | 180 | 270;
     static styles: CSSResultGroup;
 }
 declare global {

package/dist/icon/root/icon-root.js

@@ -6,10 +6,27 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessIcon } from '@fusion.dev/helix-headless/icon/root';
+import { property } from 'lit/decorators.js';
 import { styles } from './icon-root.css.js';
 let HelixIcon = class HelixIcon extends HelixHeadlessIcon {
+    constructor() {
+        super(...arguments);
+        this.autoWidth = false;
+    }
     static { this.styles = styles; }
 };
+__decorate([
+    property({ reflect: true })
+], HelixIcon.prototype, "animation", void 0);
+__decorate([
+    property({ attribute: 'auto-width', reflect: true, type: Boolean })
+], HelixIcon.prototype, "autoWidth", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixIcon.prototype, "flip", void 0);
+__decorate([
+    property({ reflect: true, type: Number })
+], HelixIcon.prototype, "rotate", void 0);
 HelixIcon = __decorate([
     customElement('helix-icon')
 ], HelixIcon);

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/quote/root/quote-root.css.js

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: inline;font: inherit;}[part="quote"] {color: var(--quote-color, var(--helix-color-foreground-muted));font: inherit;font-family: var(--quote-font-family, inherit);font-style: var(--quote-font-style, italic);font-weight: var(--quote-font-weight, inherit);}@media print {:host {print-color-adjust: economy;}}`);
+export const styles = createSheet(`:host {display: inline;font: inherit;}[part="quote"] {color: var(--quote-color, var(--helix-color-foreground-muted));font: inherit;font-family: var(--quote-font-family, inherit);font-style: var(--quote-font-style, italic);font-weight: var(--quote-font-weight, inherit);}:host([no-marks]) [part="quote"]::before {content: no-open-quote;}:host([no-marks]) [part="quote"]::after {content: no-close-quote;}@media print {:host {print-color-adjust: economy;}}`);

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;}`);

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

@@ -1,20 +1,24 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: block;inline-size: 100%;}:host(:not([shape])) {block-size: var(--skeleton-block-size, var(--helix-size-control));}:host([shape="text"]) {block-size: 1em;}:host([shape="circle"]) {aspect-ratio: 1 / 1;inline-size: var(--skeleton-size, var(--helix-size-control));}[part="skeleton"] {background-color: var(
+export const styles = createSheet(`:host {display: block;inline-size: 100%;}:host(:not([shape])) {block-size: var(--skeleton-block-size, var(--helix-size-control));}:host([shape="text"]) {block-size: 1em;}:host([shape="text"][lines]:not([lines="1"]):not([lines="0"])) {block-size: auto;}:host([shape="circle"]) {aspect-ratio: 1 / 1;inline-size: var(--skeleton-size, var(--helix-size-control));}[part~="skeleton"] {background-color: var(
 --skeleton-color,
 color-mix(in oklab, var(--helix-color-foreground) 8%, transparent)
-);block-size: 100%;border-radius: var(--skeleton-radius, var(--helix-radii-sm));display: block;inline-size: 100%;overflow: hidden;position: relative;}[part="sheen"] {animation: helix-skeleton-sweep var(--skeleton-duration, calc(var(--helix-duration-slow) * 4))
+);block-size: 100%;border-radius: var(--skeleton-radius, var(--helix-radii-sm));display: block;inline-size: 100%;overflow: hidden;position: relative;}[part="lines"] {display: flex;flex-direction: column;gap: calc((var(--helix-leading-normal) - 1) * 1em);}[part~="line"] {block-size: 1em;}[part~="line"]:last-child:not(:first-child) {inline-size: var(--skeleton-last-line-size, 60%);}[part="sheen"] {animation: helix-skeleton-sweep var(--skeleton-duration, calc(var(--helix-duration-slow) * 4))
 ease-in-out infinite;background-image: linear-gradient(
 90deg,
 transparent 0%,
 var(--skeleton-sheen-color, color-mix(in oklab, var(--helix-color-foreground) 8%, transparent))
 50%,
 transparent 100%
-);display: block;inline-size: 200%;inset-block: 0;inset-inline-start: 0;position: absolute;}:host([shape="text"]) [part="skeleton"] {border-radius: var(--helix-radii-full);}:host([shape="circle"]) [part="skeleton"] {border-radius: var(--helix-radii-full);}:host([effect="pulse"]) [part="sheen"],
-:host([effect="none"]) [part="sheen"] {animation: none;background-image: none;}:host([effect="pulse"]) [part="skeleton"] {animation: helix-skeleton-pulse var(--skeleton-duration, calc(var(--helix-duration-slow) * 4))
+);display: block;inline-size: 200%;inset-block: 0;inset-inline-start: 0;position: absolute;}:host([shape="text"]) [part~="skeleton"] {border-radius: var(--helix-radii-full);}:host([shape="circle"]) [part="skeleton"] {border-radius: var(--helix-radii-full);}:host([effect="pulse"]) [part="sheen"],
+:host([effect="none"]) [part="sheen"] {animation: none;background-image: none;}:host([effect="pulse"]) [part~="skeleton"] {animation: helix-skeleton-pulse var(--skeleton-duration, calc(var(--helix-duration-slow) * 4))
 ease-in-out infinite;}@keyframes helix-skeleton-pulse {50% {opacity: 0.4;}}:host(:state(wrapping)),
 :host(:not(:defined):not(:empty)) {block-size: auto;inline-size: fit-content;max-inline-size: 100%;position: relative;}:host(:state(wrapping)) [part="content"],
 :host(:not(:defined):not(:empty)) [part="content"] {display: block;}:host(:state(wrapping)) [part="skeleton"],
-:host(:not(:defined):not(:empty)) [part="skeleton"] {block-size: auto;inset: 0;position: absolute;}:host(:state(wrapping):not([loading])) [part="skeleton"],
-:host(:not(:defined):not(:empty):not([loading])) [part="skeleton"] {display: none;}:host([loading]:state(wrapping)) [part="content"],
+:host(:not(:defined):not(:empty)) [part="skeleton"],
+:host(:state(wrapping)) [part="lines"],
+:host(:not(:defined):not(:empty)) [part="lines"] {block-size: auto;inset: 0;position: absolute;}:host(:state(wrapping):not([loading])) [part="skeleton"],
+:host(:not(:defined):not(:empty):not([loading])) [part="skeleton"],
+:host(:state(wrapping):not([loading])) [part="lines"],
+:host(:not(:defined):not(:empty):not([loading])) [part="lines"] {display: none;}:host([loading]:state(wrapping)) [part="content"],
 :host([loading]:not(:defined):not(:empty)) [part="content"] {visibility: hidden;}@keyframes helix-skeleton-sweep {from {translate: -50% 0;}to {translate: 50% 0;}}@media (prefers-reduced-motion: reduce) {[part="sheen"],
-:host([effect="pulse"]) [part="skeleton"] {animation: none;}[part="sheen"] {background-image: none;}}@media print {:host {display: none;}}`);
+:host([effect="pulse"]) [part~="skeleton"] {animation: none;}[part="sheen"] {background-image: none;}}@media print {:host {display: none;}}`);

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

@@ -1,5 +1,5 @@
 import { HelixHeadlessSkeleton } from '@fusion.dev/helix-headless/skeleton';
-import type { CSSResultGroup } from 'lit';
+import { type CSSResultGroup, type TemplateResult } from 'lit';
 /**
  * @summary A placeholder shown in place of content that is still loading.
  *
@@ -11,6 +11,11 @@ import type { CSSResultGroup } from 'lit';
  * Around content with `loading`, the skeleton takes the content's box and
  * paints over it, and the content is hidden until `loading` is taken off.
  *
+ * **`lines` draws a paragraph.** With `shape="text"` and `lines="3"`, one
+ * element stands in for three lines of text: each line a `skeleton` part one
+ * `em` tall, spaced a body line height apart, and the last one shorter, as the end
+ * of a paragraph is.
+ *
  * @since 0.1.0
  * @status stable
  * @category feedback
@@ -18,12 +23,15 @@ import type { CSSResultGroup } from 'lit';
  * @documentation https://fusion.dev/helix/components/skeleton
  *
  * @csspart content - The box around the content, hidden while `loading`.
+ * @csspart line - Each line of a `lines` paragraph, which is also a `skeleton` part.
+ * @csspart lines - The column holding a `lines` paragraph, drawn only for `shape="text"` with two or more lines.
  * @csspart sheen - The highlight swept across the shape. Hidden for `effect="pulse"` and `effect="none"`.
- * @csspart skeleton - The placeholder shape.
+ * @csspart skeleton - The placeholder shape, or each line of a `lines` paragraph.
  *
  * @cssproperty --skeleton-block-size - The height of the block shape, which is the shape when `shape` is unset. Defaults to the control height.
  * @cssproperty --skeleton-color - The placeholder's fill.
  * @cssproperty --skeleton-duration - How long one sweep or one pulse takes.
+ * @cssproperty --skeleton-last-line-size - The width of the last line of a `lines` paragraph. Defaults to 60%.
  * @cssproperty --skeleton-radius - The corner of the block shape.
  * @cssproperty --skeleton-sheen-color - The highlight the sweep carries across the fill.
  * @cssproperty --skeleton-size - The diameter of the circle shape.
@@ -36,6 +44,13 @@ export declare class HelixSkeleton extends HelixHeadlessSkeleton {
      * Reduced motion stills both.
      */
     effect?: 'none' | 'pulse';
+    /**
+     * How many lines of text the placeholder stands for, with `shape="text"`.
+     *
+     * Absent, or 1, is one line. Reflected, because the stylesheet sizes a
+     * paragraph by it.
+     */
+    lines?: number;
     /**
      * The shape of the placeholder: `text`, `circle`, or a block when unset.
      *
@@ -45,6 +60,7 @@ export declare class HelixSkeleton extends HelixHeadlessSkeleton {
      */
     shape?: 'text' | 'circle';
     static styles: CSSResultGroup;
+    protected renderShape(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/skeleton/root/skeleton-root.js

@@ -6,14 +6,25 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessSkeleton } from '@fusion.dev/helix-headless/skeleton';
+import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { styles } from './skeleton-root.css.js';
 let HelixSkeleton = class HelixSkeleton extends HelixHeadlessSkeleton {
     static { this.styles = styles; }
+    renderShape() {
+        const count = Math.floor(this.lines ?? 1);
+        if (this.shape !== 'text' || !(count > 1)) {
+            return super.renderShape();
+        }
+        return html `<span part="lines">${Array.from({ length: count }, () => html `<span part="skeleton line"><span part="sheen"></span></span>`)}</span>`;
+    }
 };
 __decorate([
     property({ reflect: true })
 ], HelixSkeleton.prototype, "effect", void 0);
+__decorate([
+    property({ reflect: true, type: Number })
+], HelixSkeleton.prototype, "lines", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixSkeleton.prototype, "shape", void 0);

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

@@ -1,4 +1,4 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {align-content: start;align-items: baseline;display: grid;gap: var(--stat-gap, var(--helix-space-2xs));grid-template-columns: auto 1fr;}slot[name="label"]::slotted(*) {color: var(--stat-label-color, var(--helix-color-foreground-muted));font-size: var(--stat-label-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(--stat-value-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(--stat-unit-color, var(--helix-color-foreground-muted));font-size: var(--stat-unit-size, calc(var(--helix-text-md) / var(--helix-text-md) * 1em));font-weight: var(--helix-weight-medium);}slot[name="trend"]::slotted(*) {grid-column: 1 / -1;}:host([direction="column-reverse"]) slot[name="label"]::slotted(*) {order: 1;}:host([direction="row"]),
+export const styles = createSheet(`:host {align-content: start;align-items: baseline;display: grid;gap: var(--stat-gap, var(--helix-space-2xs));grid-template-columns: auto 1fr;}slot[name="label"]::slotted(*) {color: var(--stat-label-color, var(--helix-color-foreground-muted));font-size: var(--stat-label-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);}[part="value"] {color: var(--stat-value-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(--stat-unit-color, var(--helix-color-foreground-muted));font-size: var(--stat-unit-size, calc(var(--helix-text-md) / var(--helix-text-md) * 1em));font-weight: var(--helix-weight-medium);}slot[name="trend"]::slotted(*) {grid-column: 1 / -1;}:host([direction="column-reverse"]) slot[name="label"]::slotted(*) {order: 1;}:host([direction="row"]),
 :host([direction="row-reverse"]) {align-items: baseline;display: flex;gap: var(--stat-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 {print-color-adjust: economy;}}`);