@fusion.dev/helix-headless 0.152.0 → 0.154.0

package/dist/empty/root/empty-root.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 { ArrivalController, customElement, HelixElement, headingIn, headingLevel, slottedWords, } from '@fusion.dev/helix-core';
+import { ArrivalController, customElement, HelixElement, headingIn, headingLevel, slotFilled, slottedWords, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 let HelixHeadlessEmpty = class HelixHeadlessEmpty extends HelixElement {
@@ -13,6 +13,11 @@ let HelixHeadlessEmpty = class HelixHeadlessEmpty extends HelixElement {
         this.heading = '';
         this.noAnnounce = false;
         this.looseHeading = false;
+        this.readRegions = () => {
+            const filled = (name) => slotFilled(this.renderRoot?.querySelector(`slot[name="${name}"]`));
+            this.toggleState('has-icon', filled('icon'));
+            this.toggleState('has-actions', filled('actions'));
+        };
         this.arrival = new ArrivalController(this, {
             arriving: () => !this.serverRendered && document.readyState === 'complete',
             text: () => [slottedWords(this, ['heading']) || this.heading.trim(), slottedWords(this, [''])]
@@ -31,6 +36,10 @@ let HelixHeadlessEmpty = class HelixHeadlessEmpty extends HelixElement {
         super.firstUpdated(changed);
         this.finishHydration();
     }
+    updated(changed) {
+        super.updated(changed);
+        this.readRegions();
+    }
     renderHeading(hidden) {
         const level = headingLevel(this.headingLevel);
         const slot = html `<slot
@@ -58,10 +67,10 @@ let HelixHeadlessEmpty = class HelixHeadlessEmpty extends HelixElement {
     render() {
         const say = () => this.arrival.say();
         const held = this.arrival.said !== '' && !this.noAnnounce;
-        return html `<slot name="icon"></slot>
+        return html `<slot name="icon" part="icon" @slotchange=${this.readRegions}></slot>
       ${this.renderHeading(held)}
-      <slot aria-hidden=${held ? 'true' : nothing} @slotchange=${say}></slot>
-      <slot name="actions"></slot>
+      <slot aria-hidden=${held ? 'true' : nothing} part="message" @slotchange=${say}></slot>
+      <slot name="actions" part="actions" @slotchange=${this.readRegions}></slot>
       ${this.noAnnounce
             ? nothing
             : html `<span part="live" role="status">${this.arrival.said}</span>`}`;

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

@@ -328,6 +328,9 @@ export declare class HelixHeadlessHeatmap extends HelixHeadlessHeatmap_base {
      * in a browser is still known, and still empty: a `for` naming no table
      * should say so rather than sit blank, which is why this asks
      * `searchableById` and not `elementById`.
+     *
+     * `readingsKnown` asks it for every chart, and for `data` too, which a
+     * server does not draw.
      */
     private get sourceKnown();
     /**

package/dist/heatmap/root/heatmap-root.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 { AriaForwardController, byRow, CHART_PLOT, commaList, customElement, drawTooltip, formatWords, HelixElement, HelixResizeEvent, MixinChartSource, markRegion, pressedValue, rangeAdd, requestValue, StatusController, searchableById, words, writtenList, writtenNumbers, } from '@fusion.dev/helix-core';
+import { AriaForwardController, byRow, CHART_PLOT, commaList, customElement, drawTooltip, formatWords, HelixElement, HelixResizeEvent, MixinChartSource, markRegion, pressedValue, rangeAdd, requestValue, StatusController, words, writtenList, writtenNumbers, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import '../../tooltip/index.js';
@@ -110,13 +110,7 @@ let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartSource(H
         return byRow(series, this.sourceRows.length).map((point) => point ?? { value: undefined });
     }
     get sourceKnown() {
-        if (this.for === '') {
-            return true;
-        }
-        if (this.hydrating) {
-            return false;
-        }
-        return searchableById(this);
+        return this.readingsKnown;
     }
     get rowCount() {
         return Math.max(1, Math.floor(this.rows) || 1);

package/dist/icon/fetch.d.ts

@@ -0,0 +1,20 @@
+import type { HelixIcon } from '@fusion.dev/helix-icons';
+/**
+ * Reads an SVG file's text as an icon, or `undefined` where it is no SVG.
+ *
+ * **What could run is taken out**, because the markup is drawn as it is: every
+ * `<script>` and `<foreignObject>`, every `on…` attribute, every link to a
+ * `javascript:` URL, and every animation that writes a link or a handler. The
+ * root's paint attributes are kept on a group around the shapes, and its
+ * `viewBox`, or its width and height, is the box.
+ *
+ * @param text The file's text.
+ * @param name What the icon is known by, its URL.
+ */
+export declare const readIconFile: (text: string, name: string) => HelixIcon | undefined;
+/**
+ * The icon in the SVG file at `src`: at once where it has been fetched, or a
+ * promise of it the first time, fetched once a page however many elements ask.
+ * `undefined` where the file could not be fetched or is no SVG.
+ */
+export declare const fetchIcon: (src: string) => HelixIcon | Promise<HelixIcon | undefined> | undefined;

package/dist/icon/fetch.js

@@ -0,0 +1,70 @@
+const PAINT = [
+    'fill',
+    'fill-rule',
+    'stroke',
+    'stroke-linecap',
+    'stroke-linejoin',
+    'stroke-miterlimit',
+    'stroke-width',
+];
+const KEY = Symbol.for('helix.icon-fetched');
+const fetched = () => {
+    const held = globalThis;
+    let found = held[KEY];
+    if (!found) {
+        found = { answers: new Map() };
+        held[KEY] = found;
+    }
+    return found;
+};
+export const readIconFile = (text, name) => {
+    const parsed = new DOMParser().parseFromString(text, 'image/svg+xml');
+    const root = parsed.documentElement;
+    if (root?.localName !== 'svg' || parsed.getElementsByTagName('parsererror').length > 0) {
+        return undefined;
+    }
+    for (const unsafe of [...root.querySelectorAll('script, foreignObject')]) {
+        unsafe.remove();
+    }
+    for (const animation of [...root.querySelectorAll('animate, set')]) {
+        const target = (animation.getAttribute('attributeName') ?? '').toLowerCase();
+        if (target.endsWith('href') || target.startsWith('on')) {
+            animation.remove();
+        }
+    }
+    for (const element of [root, ...root.querySelectorAll('*')]) {
+        for (const attribute of [...element.attributes]) {
+            const link = attribute.localName === 'href' && /^\s*javascript:/i.test(attribute.value);
+            if (attribute.localName.toLowerCase().startsWith('on') || link) {
+                element.removeAttribute(attribute.name);
+            }
+        }
+    }
+    const width = Number.parseFloat(root.getAttribute('width') ?? '') || 24;
+    const height = Number.parseFloat(root.getAttribute('height') ?? '') || width;
+    const viewBox = root.getAttribute('viewBox') ?? `0 0 ${width} ${height}`;
+    const paint = PAINT.filter((one) => root.hasAttribute(one))
+        .map((one) => `${one}="${(root.getAttribute(one) ?? '').replaceAll('"', '"')}"`)
+        .join(' ');
+    const shapes = [...root.childNodes]
+        .map((node) => (node instanceof Element ? new XMLSerializer().serializeToString(node) : ''))
+        .join('');
+    return { content: paint ? `<g ${paint}>${shapes}</g>` : shapes, name, viewBox };
+};
+export const fetchIcon = (src) => {
+    const held = fetched();
+    if (held.answers.has(src)) {
+        return held.answers.get(src);
+    }
+    const pending = fetch(src)
+        .then((response) => (response.ok ? response.text() : undefined))
+        .then((text) => (text === undefined ? undefined : readIconFile(text, src)))
+        .catch(() => undefined);
+    held.answers.set(src, pending);
+    void pending.then((icon) => {
+        if (held.answers.get(src) === pending) {
+            held.answers.set(src, icon);
+        }
+    });
+    return pending;
+};

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

@@ -27,8 +27,16 @@ import { nothing, type PropertyValues, type TemplateResult } from 'lit';
  * a glyph that came later is drawn. A glyph registered after the element
  * rendered is drawn then.
  *
- * A name with no match renders nothing, and the element fires `error`, so a
- * typo in a name can be heard. It waits until the page has loaded and painted
+ * **Or point `src` at an SVG file**, such as `src="/icons/rocket.svg"`, and
+ * the element fetches it and draws its shapes in `currentColor` where the file
+ * does not color them. A file is fetched once a page, however many icons name
+ * it, and `load` fires when it is drawn. Scripts, event handlers and
+ * `javascript:` links in the file are taken out before it is drawn. A server
+ * fetches nothing, so a served icon with a `src` is drawn once the script
+ * runs.
+ *
+ * A name with no match, or a `src` that is no SVG, renders nothing, and the
+ * element fires `error`, so a typo in a name can be heard. It waits until the page has loaded and painted
  * first, so a library a later module registers is not taken for a typo.
  *
  * An icon is decorative by default and hidden from assistive technology. Set
@@ -47,8 +55,8 @@ import { nothing, type PropertyValues, type TemplateResult } from 'lit';
  * @aliases Glyph, Symbol
  * @documentation https://fusion.dev/helix/components/icon
  *
- * @event {Event} error - `name` matches no registered icon and no library answers it, so nothing is drawn.
- * @event {Event} load - A glyph a library gave later for `name` is drawn.
+ * @event {Event} error - `name` matches no registered icon and no library answers it, or `src` is no SVG, so nothing is drawn.
+ * @event {Event} load - A glyph a library gave later for `name`, or the file at `src`, is drawn.
  *
  * @csspart svg - The rendered SVG.
  */
@@ -97,6 +105,13 @@ export declare class HelixHeadlessIcon extends HelixElement {
      * prefix.
      */
     name: string;
+    /**
+     * The URL of an SVG file to draw, fetched once a page and drawn in
+     * `currentColor` where the file does not color its shapes.
+     *
+     * Wins over `name`; `icon` wins over both. Absent draws `name`.
+     */
+    src: string;
     /**
      * Hears an `aria-label` written on the element, which no property mirrors.
      *
@@ -120,11 +135,18 @@ export declare class HelixHeadlessIcon extends HelixElement {
     private arrived;
     /** Stops listening to the registry. */
     private unwatch;
+    /** What the glyph is asked for by: `src` where it is set, and `name` otherwise. */
+    private get asked();
     connectedCallback(): void;
     disconnectedCallback(): void;
-    /** What the registry gives for `name` now, starting the wait for a late glyph. */
+    /**
+     * What `src` or the registry gives now, starting the wait for a late glyph.
+     * A file is fetched only where the page can be read: a server fetches
+     * nothing, and a hydrating render draws what the server sent.
+     */
     private lookup;
     protected willUpdate(changed: PropertyValues): void;
+    protected firstUpdated(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
     /** Hands the drawn `<svg>` to the mutator of the library `name` asks, where it has one. */
     private mutate;

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

@@ -8,6 +8,7 @@ import { auditName, customElement, HelixElement, hostAria, reportRuntime, } from
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
+import { fetchIcon } from '../fetch.js';
 import { iconMutator, resolveIcon, watchIcons } from '../registry.js';
 import { afterPageSettles } from '../settle.js';
 let HelixHeadlessIcon = class HelixHeadlessIcon extends HelixElement {
@@ -16,6 +17,7 @@ let HelixHeadlessIcon = class HelixHeadlessIcon extends HelixElement {
         this.label = '';
         this.mirror = false;
         this.name = '';
+        this.src = '';
         this.missed = '';
         this.waiting = false;
         this.arrived = '';
@@ -30,10 +32,13 @@ let HelixHeadlessIcon = class HelixHeadlessIcon extends HelixElement {
             this.requestUpdate();
         }
     }
+    get asked() {
+        return this.src || this.name;
+    }
     connectedCallback() {
         super.connectedCallback();
         this.unwatch = watchIcons(() => {
-            if (this.icon === undefined && this.name !== '') {
+            if (this.icon === undefined && this.src === '' && this.name !== '') {
                 this.requestUpdate();
             }
         });
@@ -44,15 +49,21 @@ let HelixHeadlessIcon = class HelixHeadlessIcon extends HelixElement {
         this.unwatch = undefined;
     }
     lookup() {
-        const found = this.name === '' ? undefined : resolveIcon(this.name);
-        this.waiting = found instanceof Promise;
+        const asked = this.asked;
+        const found = this.src !== ''
+            ? this.childrenKnown
+                ? fetchIcon(this.src)
+                : undefined
+            : this.name === ''
+                ? undefined
+                : resolveIcon(this.name);
+        this.waiting = found instanceof Promise || (this.src !== '' && !this.childrenKnown);
         if (!(found instanceof Promise)) {
             return found;
         }
-        const name = this.name;
         void found.then(() => {
-            if (this.name === name && this.isConnected) {
-                this.arrived = name;
+            if (this.asked === asked && this.isConnected) {
+                this.arrived = asked;
                 this.requestUpdate();
             }
         });
@@ -64,19 +75,26 @@ let HelixHeadlessIcon = class HelixHeadlessIcon extends HelixElement {
         hostAria(this.internals, { role: named ? 'img' : '' });
         this.drawn = this.icon ?? this.lookup();
     }
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        if (this.src !== '') {
+            this.finishHydration();
+        }
+    }
     updated(changed) {
         super.updated(changed);
         if (this.drawn !== undefined) {
             this.mutate();
             this.auditControl();
         }
-        if (this.arrived === this.name && this.drawn !== undefined) {
+        const asked = this.asked;
+        if (this.arrived === asked && this.drawn !== undefined) {
             this.dispatchEvent(new Event('load', { bubbles: false, cancelable: false, composed: false }));
         }
         this.arrived = '';
-        if (this.drawn === undefined && this.name !== '' && !this.waiting) {
-            if (this.missed !== this.name && this.pending !== this.name) {
-                this.pending = this.name;
+        if (this.drawn === undefined && asked !== '' && !this.waiting) {
+            if (this.missed !== asked && this.pending !== asked) {
+                this.pending = asked;
                 afterPageSettles(() => this.reportMissing());
             }
         }
@@ -86,7 +104,7 @@ let HelixHeadlessIcon = class HelixHeadlessIcon extends HelixElement {
     }
     mutate() {
         const svg = this.renderRoot.querySelector('svg');
-        const mutator = this.icon === undefined ? iconMutator(this.name) : undefined;
+        const mutator = this.icon === undefined && this.src === '' ? iconMutator(this.name) : undefined;
         if (svg && mutator) {
             mutator(svg);
         }
@@ -102,18 +120,21 @@ let HelixHeadlessIcon = class HelixHeadlessIcon extends HelixElement {
         }
     }
     reportMissing() {
-        const name = this.pending;
+        const asked = this.pending;
         this.pending = '';
-        if (this.name !== name || this.drawn !== undefined || this.waiting || !this.isConnected) {
+        if (this.asked !== asked || this.drawn !== undefined || this.waiting || !this.isConnected) {
             return;
         }
-        this.missed = name;
+        this.missed = asked;
         this.dispatchEvent(new Event('error', { bubbles: false, cancelable: false, composed: false }));
         reportRuntime({
             kind: 'unknown-icon',
-            message: `<${this.localName} name="${name}"> names no registered icon, so it draws ` +
-                'nothing. Check the name, register the glyph with `registerIcons`, or import it ' +
-                'and pass it as `icon`.',
+            message: this.src === ''
+                ? `<${this.localName} name="${asked}"> names no registered icon, so it draws ` +
+                    'nothing. Check the name, register the glyph with `registerIcons`, or import it ' +
+                    'and pass it as `icon`.'
+                : `<${this.localName} src="${asked}"> could not be fetched as an SVG file, so it ` +
+                    'draws nothing. Check the URL, and that the file is an `<svg>`.',
             tag: this.localName,
         });
     }
@@ -148,6 +169,9 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessIcon.prototype, "name", void 0);
+__decorate([
+    property()
+], HelixHeadlessIcon.prototype, "src", void 0);
 HelixHeadlessIcon = __decorate([
     customElement('helix-headless-icon')
 ], HelixHeadlessIcon);

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

@@ -1,7 +1,7 @@
 import { type Curve, HelixElement, type Series } from '@fusion.dev/helix-core';
 import { nothing, type TemplateResult } from 'lit';
 import '../../tooltip/index.js';
-declare const HelixHeadlessLineChart_base: typeof HelixElement & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinChartSourceInterface);
+declare const HelixHeadlessLineChart_base: typeof HelixElement & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinChartSourceInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinChartStatusInterface);
 /**
  * @summary A chart that draws series over time as lines, read from a table.
  *
@@ -45,12 +45,25 @@ declare const HelixHeadlessLineChart_base: typeof HelixElement & (new (...args:
  * tap or key, and `helix-reading-press` says a reading was clicked, tapped, or
  * pressed with Enter or Space, for a page that opens what a reading stands for.
  *
+ * **`data` takes the readings as data** where the page has no table to point
+ * `for` at, in a table's shape: the column headings, then one row per reading
+ * with its label first. A table is still the better source where the page can
+ * show one, since it reads before any script runs.
+ *
+ * **A chart with nothing to draw says so.** A table with no readings shows
+ * `empty-text`, "No readings", in the plot, and `loading` shows `loading-text`
+ * there until readings arrive. The `empty` and `loading` slots take markup in
+ * their place, such as a link to add the first reading.
+ *
  * @since 0.1.0
  * @status stable
  * @category charts
  * @aliases Time Series, Trend Chart, Multi-line Chart
  * @documentation https://fusion.dev/helix/components/line-chart
  *
+ * @slot empty - Content shown in place of the drawing when the table has no readings, such as a link to add the first. Falls back to `empty-text`.
+ * @slot loading - Content shown in place of the drawing while `loading` is set and there are no readings yet. Falls back to `loading-text`.
+ *
  * @event {HelixReadingChangeEvent} helix-reading-change - The reading shown moved, or was put away: `index` is the row, or `-1` for none, with its `label`, the `series` the keys rest on, and the `pointerType` that moved it.
  * @event {HelixReadingPressEvent} helix-reading-press - A reading was clicked, tapped, or pressed with Enter or Space, with the same detail as `helix-reading-change`.
  *
@@ -58,6 +71,7 @@ declare const HelixHeadlessLineChart_base: typeof HelixElement & (new (...args:
  * @csspart axis - The numbers of the scale beside the plot, under `value-axis`.
  * @csspart band - The band around the reading under the pointer.
  * @csspart baseline - The rule at zero, where zero is inside the range.
+ * @csspart empty - The words in place of the drawing when the table has no readings: the `empty` slot, falling back to `empty-text`. Not drawn while the table cannot be read yet, on the server and during hydration.
  * @csspart gridline - One rule across the plot, under `gridlines`.
  * @csspart guide - A rule down the reading a pointer is resting on.
  * @csspart label - One reading's name.
@@ -65,6 +79,7 @@ declare const HelixHeadlessLineChart_base: typeof HelixElement & (new (...args:
  * @csspart line - The line for one series.
  * @csspart line-dashed - A `line` whose series `dashed` names. Set alongside `line`.
  * @csspart live - The readout: a polite live region that says the reading the keys moved to. Hide it visually.
+ * @csspart loading - The words in place of the drawing while `loading` is set and there are no readings: the `loading` slot, falling back to `loading-text`.
  * @csspart mark - The invisible point the tooltip is anchored to.
  * @csspart marker - The mark on one reading, under `markers`, and on a reading with a blank on either side. Placed with `inset-inline-start` and `inset-block-start`, and carries its series color as `--chart-series`.
  * @csspart marker-lone - A `marker` on a reading with a blank on either side, which no line reaches. Set alongside `marker`.

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

@@ -4,11 +4,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 { byRow, CHART_PLOT, commaList, customElement, drawTooltip, drawValueAxis, extent, formatNumbers, HelixElement, HelixReadingChangeEvent, HelixReadingPressEvent, linear, linePath, MixinChartSource, PLOT_HEIGHT, PLOT_WIDTH, seriesIndex, seriesKey, ticks, unbroken, wordsLocale, } from '@fusion.dev/helix-core';
+import { byRow, CHART_PLOT, commaList, customElement, drawTooltip, drawValueAxis, extent, formatNumbers, HelixElement, HelixReadingChangeEvent, HelixReadingPressEvent, linear, linePath, MixinChartSource, MixinChartStatus, PLOT_HEIGHT, PLOT_WIDTH, seriesIndex, seriesKey, ticks, unbroken, wordsLocale, } from '@fusion.dev/helix-core';
 import { html, nothing, svg } from 'lit';
 import { property } from 'lit/decorators.js';
 import '../../tooltip/index.js';
-let HelixHeadlessLineChart = class HelixHeadlessLineChart extends MixinChartSource(HelixElement) {
+let HelixHeadlessLineChart = class HelixHeadlessLineChart extends MixinChartStatus(MixinChartSource(HelixElement)) {
     constructor() {
         super(...arguments);
         this.area = false;
@@ -59,7 +59,7 @@ let HelixHeadlessLineChart = class HelixHeadlessLineChart extends MixinChartSour
         const series = this.series;
         const readings = series.length === 0 ? [] : this.sourceRows.map((row) => row.label);
         if (readings.length === 0) {
-            return html `<div id=${CHART_PLOT} part="plot"></div>`;
+            return html `<div id=${CHART_PLOT} part="plot">${this.renderStatus()}</div>`;
         }
         const domain = this.range(series);
         const y = linear(domain, [PLOT_HEIGHT, 0]);

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

@@ -7,6 +7,11 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * Draws two concentric circles: a track and a moving arc. The track shows the
  * arc as a proportion of a whole, and costs one element.
  *
+ * **For work whose length is known, use `Progress` with `shape="ring"`.** It
+ * draws the same ring filled to the value, says the value as a progress bar
+ * does, and says when the work is complete. A loader claims no proportion, so
+ * it takes no value.
+ *
  * **The center is a slot, empty by default.** Put your logo there once, where
  * your app wraps the loader. When nothing is slotted, nothing extra is
  * rendered.

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

@@ -15,6 +15,15 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  *
  * The fill is a fraction of the track, written as a custom property.
  *
+ * **The reading is said in the words the bar would show**: a whole percentage
+ * of the range in `locale`, the reading `format-options` writes, or
+ * `value-text`, as `aria-valuetext` beside the number.
+ *
+ * **Words set in the default slot are drawn on the bar**, or in the middle of a
+ * ring, such as `62%` or `3 of 8`, and are what the bar says as its reading
+ * where `value-text` is not set. While there are any, the bar carries
+ * `:state(content)`, so a sheet can make room for them.
+ *
  * **Reaching `max` is said and sent.** When the value arrives at `max` from
  * below, the bar says `complete-label`, "Complete" by default, in a polite
  * `live` region and sends `helix-complete`, so a reader hears that the work is
@@ -28,10 +37,12 @@ import { type PropertyValues, type TemplateResult } 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. Said as the reading where `value-text` is not set.
  * @slot label - A visible label. Its words name the progress bar in place of `label`.
  *
  * @event {HelixCompleteEvent} helix-complete - The value reached `max` from below. Its `value` is `max`. Not sent for a bar that starts full.
  *
+ * @csspart content - The box holding the words of the default slot, over the track or in the middle of the ring. Carries `--progress-fraction`.
  * @csspart groove - The unfilled circle under the ring's filled arc.
  * @csspart indicator - The filled part that shows the work done.
  * @csspart live - A polite region that says `complete-label` when the work is done, rendered from that moment. Hide it visually.
@@ -41,6 +52,7 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @cssproperty --progress-fraction - The value as a fraction of the range, 0 to 1. Pinned to 1 while indeterminate.
  *
  * @cssstate complete - The value is at `max` and the bar is not indeterminate.
+ * @cssstate content - Words are set in the default slot.
  */
 export declare class HelixHeadlessProgress extends HelixElement {
     /**
@@ -67,7 +79,8 @@ export declare class HelixHeadlessProgress extends HelixElement {
      *
      * A `percent` style writes the share of the range, and any other the value
      * itself, so the example says "18 GB". Absent is a whole percentage. The
-     * words are announced as well as shown. `value-text` still wins.
+     * words are announced whether or not `show-value` shows them. `value-text`
+     * still wins.
      */
     formatOptions?: Intl.NumberFormatOptions;
     /**
@@ -173,6 +186,8 @@ export declare class HelixHeadlessProgress extends HelixElement {
     private get text();
     /** A label's words changed, so the name is written again. */
     private readonly renamed;
+    /** The words on the bar changed, so the reading is said again and the state set. */
+    private readonly reworded;
     protected render(): TemplateResult;
 }
 declare global {

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

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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, drawStatus, HelixCompleteEvent, HelixElement, hostAria, readingText, StatusController, slottedWords, words, wordsLocale, } from '@fusion.dev/helix-core';
+import { customElement, drawStatus, HelixCompleteEvent, HelixElement, hostAria, readingText, StatusController, slotFilled, slotNamed, slottedWords, words, wordsLocale, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 let HelixHeadlessProgress = class HelixHeadlessProgress extends HelixElement {
@@ -23,6 +23,10 @@ let HelixHeadlessProgress = class HelixHeadlessProgress extends HelixElement {
         this.renamed = () => {
             this.requestUpdate();
         };
+        this.reworded = () => {
+            this.toggleState('content', slotFilled(slotNamed(this.renderRoot, '')));
+            this.requestUpdate();
+        };
     }
     static { this.words = 'helix-progress'; }
     get complete() {
@@ -48,8 +52,8 @@ let HelixHeadlessProgress = class HelixHeadlessProgress extends HelixElement {
         this.internals.ariaValueNow = this.indeterminate
             ? null
             : String(Math.min(Math.max(this.value || min, min), max));
-        this.internals.ariaValueText =
-            this.valueText || (this.formatOptions !== undefined && !this.indeterminate ? this.text : null);
+        const shown = this.valueText || slottedWords(this, ['']);
+        this.internals.ariaValueText = this.indeterminate ? shown || null : shown || this.text;
         this.toggleState('complete', this.complete);
     }
     updated(changed) {
@@ -75,10 +79,14 @@ let HelixHeadlessProgress = class HelixHeadlessProgress extends HelixElement {
       <circle part="groove" />
       <circle part="indicator" pathLength="100" style="--progress-fraction: ${fraction}" />
     </svg>`;
+        const content = html `<span part="content" aria-hidden="true" style="--progress-fraction: ${fraction}"
+      ><slot @slotchange=${this.reworded}></slot
+    ></span>`;
         return html `<slot name="label" @slotchange=${this.renamed}></slot>${this.shape === 'ring'
-            ? ring
+            ? html `${ring}${content}`
             : html `<div part="track">
             <div part="indicator" style="--progress-fraction: ${fraction}"></div>
+            ${content}
           </div>`}
       ${this.showValue && !this.indeterminate
             ? html `<span part="value" aria-hidden="true"

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

@@ -1,5 +1,5 @@
 import { HelixElement } from '@fusion.dev/helix-core';
-import { type PropertyValues, type TemplateResult } from 'lit';
+import { type CSSResultGroup, type PropertyValues, type TemplateResult } from 'lit';
 /**
  * @summary A short quotation, set inline with the text around it.
  *
@@ -12,6 +12,12 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * element, and its marks follow it: `lang="de"` sets „…“ and `lang="fr"` «…»
  * inside an English page.
  *
+ * **`no-marks` leaves the marks off**, for a quotation set where the page draws
+ * its own, such as a pull quote with a large decorative mark beside it or a
+ * table of sayings. The quotation still counts toward nesting, so a quote
+ * inside it takes the inner marks it would have had. Text with marks typed
+ * into it raises no warning under `no-marks`.
+ *
  * For a passage set off from the surrounding text, use a blockquote.
  *
  * @since 0.1.0
@@ -25,10 +31,20 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @csspart quote - The quotation.
  */
 export declare class HelixHeadlessQuote extends HelixElement {
+    static styles: CSSResultGroup;
     /**
      * URL identifying where the quotation came from.
      */
     cite: string;
+    /**
+     * Whether to leave the quotation marks off, for a quotation set where the
+     * page draws its own.
+     *
+     * Negative, because the marks are on by default and a boolean attribute is
+     * true whenever it is present. Reflected, because a stylesheet takes the
+     * marks off on it.
+     */
+    noMarks: boolean;
     /** Whether this quote has said its text carries typed marks, so it says so once. */
     private warned;
     /**

package/dist/quote/root/quote-root.js

@@ -5,20 +5,21 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { customElement, HelixElement, reportRuntime } from '@fusion.dev/helix-core';
-import { html, nothing } from 'lit';
+import { css, html, nothing, } from 'lit';
 import { property } from 'lit/decorators.js';
 import { typedMarks } from '../marks.js';
 let HelixHeadlessQuote = class HelixHeadlessQuote extends HelixElement {
     constructor() {
         super(...arguments);
         this.cite = '';
+        this.noMarks = false;
         this.warned = false;
         this.readText = () => {
             const text = [...this.childNodes]
                 .filter((node) => !(node instanceof Element) || !node.slot)
                 .map((node) => node.textContent ?? '')
                 .join('');
-            if (this.warned || !typedMarks(text)) {
+            if (this.warned || this.noMarks || !typedMarks(text)) {
                 return;
             }
             this.warned = true;
@@ -29,6 +30,15 @@ let HelixHeadlessQuote = class HelixHeadlessQuote extends HelixElement {
             });
         };
     }
+    static { this.styles = css `
+    :host([no-marks]) [part='quote']::before {
+      content: no-open-quote;
+    }
+
+    :host([no-marks]) [part='quote']::after {
+      content: no-close-quote;
+    }
+  `; }
     firstUpdated(changed) {
         super.firstUpdated(changed);
         this.readText();
@@ -41,6 +51,9 @@ let HelixHeadlessQuote = class HelixHeadlessQuote extends HelixElement {
 __decorate([
     property()
 ], HelixHeadlessQuote.prototype, "cite", void 0);
+__decorate([
+    property({ attribute: 'no-marks', reflect: true, type: Boolean })
+], HelixHeadlessQuote.prototype, "noMarks", void 0);
 HelixHeadlessQuote = __decorate([
     customElement('helix-headless-quote')
 ], HelixHeadlessQuote);